:root {
    --md-sys-font-family: 'Roboto', sans-serif;
    --md-sys-color-surface: #fef7ff;
    --md-sys-color-on-surface: #1d1b20;
    --md-sys-color-primary: #6750a4;
    --md-sys-color-surface-container-high: #ece6f0;
    --md-sys-color-surface-container-low: #f7f2fa;
    --md-sys-color-outline-variant: #cac4d0;
    --md-sys-color-secondary: #625b71;
    --md-sys-color-on-surface-variant: #49454f;
    --log-debug-bg: #e6e1e5; --log-debug-text: #49454f;
    --log-info-bg: #d6e3ff; --log-info-text: #001b3e;
    --log-warn-bg: #ffdf99; --log-warn-text: #261a00;
    --log-error-bg: #ffdad6; --log-error-text: #410002;
    --md-sys-color-highlight: #ffd966;
}

@media (prefers-color-scheme: dark) {
    :root {
        --md-sys-color-surface: #141218;
        --md-sys-color-on-surface: #e6e1e5;
        --md-sys-color-primary: #d0bcff;
        --md-sys-color-surface-container-high: #2b2930;
        --md-sys-color-surface-container-low: #1d1b20;
        --md-sys-color-outline-variant: #49454f;
        --log-debug-bg: #322f37; --log-debug-text: #cac4d0;
        --log-info-bg: #00458f; --log-info-text: #d6e3ff;
        --log-warn-bg: #5d4200; --log-warn-text: #ffdf99;
        --log-error-bg: #93000a; --log-error-text: #ffdad6;
    }
}

body {
    margin: 0; padding: 0;
    font-family: var(--md-sys-font-family);
    height: 100dvh; display: flex; flex-direction: column;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    overflow: hidden;
}

/* 顶部控制区布局优化 */
.controls {
    padding: 12px 16px 8px;
    background: var(--md-sys-color-surface);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    z-index: 10;
}

.search-bar {
    display: flex; align-items: center; height: 48px; padding: 0 16px;
    background: var(--md-sys-color-surface-container-high);
    border-radius: 24px;
    margin-bottom: 12px;
}

.search-bar input {
    flex: 1; border: none; background: transparent; outline: none;
    color: var(--md-sys-color-on-surface); font-size: 15px;
}

/* 过滤器组：解决间距问题 */
.filters-group {
    display: flex; flex-direction: column; gap: 4px;
}

.filters {
    display: flex; gap: 6px; overflow-x: auto;
    scrollbar-width: none; /* Firefox */
}
.filters::-webkit-scrollbar { display: none; } /* Chrome/Safari */

/* 在 Level 和 Tag 之间留空 */
.filter-divider {
    height: 1px;
    margin: 4px 0;
    background: var(--md-sys-color-outline-variant);
    opacity: 0.3;
}

#list-container {
    flex: 1; overflow-y: auto; padding: 8px;
    will-change: scroll-position;
    contain: size layout style;
}

/* 日志卡片：极致性能 */
.log-card {
    position: relative; padding: 12px; margin-bottom: 8px;
    background: var(--md-sys-color-surface-container-low);
    border-radius: 12px;
    contain: layout paint;
    min-height: 70px;
}

.level-tag {
    position: absolute; top: 12px; right: 12px;
    padding: 2px 8px; border-radius: 6px;
    font-size: 10px; font-weight: 800;
}

.level-D { background: var(--log-debug-bg); color: var(--log-debug-text); }
.level-I { background: var(--log-info-bg); color: var(--log-info-text); }
.level-W { background: var(--log-warn-bg); color: var(--log-warn-text); }
.level-E { background: var(--log-error-bg); color: var(--log-error-text); }

.log-meta {
    font-family: 'Roboto Mono', monospace; font-size: 11px;
    color: var(--md-sys-color-secondary); margin-bottom: 2px;
}

.log-tag-name {
    font-weight: 500; color: var(--md-sys-color-primary);
    font-size: 13px; margin-bottom: 4px;
}

.log-msg {
    font-family: 'Roboto Mono', monospace; font-size: 13px; line-height: 1.45;
    white-space: pre-wrap; word-break: break-all;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
}

.log-card.expanded .log-msg { display: block; -webkit-line-clamp: unset; }

mark { background: var(--md-sys-color-highlight); color: #000; border-radius: 2px; }