:root {
    --bg: #f4f5f7;
    --surface: #ffffff;
    --border: #e2e4e8;
    --text: #1a1d23;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --accent-ai: #6366f1;
    --accent-ai-bg: #eef2ff;
    --accent-gaming: #f59e0b;
    --accent-gaming-bg: #fffbeb;
    --hot-high: #dc2626;
    --hot-mid: #f59e0b;
    --hot-low: #6b7280;
    --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
    --radius: 8px;
    --radius-sm: 4px;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans SC", sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    line-height: 1.5;
}

/* ---------- Header ---------- */
.app-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-left {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.app-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.3px;
}

.app-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

.header-center .date-display {
    font-size: 13px;
    color: var(--text-secondary);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    transition: background 0.3s;
}
.status-dot.loading { background: #f59e0b; animation: pulse 1s infinite; }
.status-dot.error { background: #ef4444; }

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.status-text {
    font-size: 12px;
    color: var(--text-secondary);
}

.btn-refresh {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
}
.btn-refresh:hover { background: var(--bg); box-shadow: var(--shadow); }
.btn-refresh:active { transform: scale(0.97); }
.btn-refresh.spinning svg { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Tab Bar ---------- */
.tab-bar {
    display: flex;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    padding: 0 24px;
    position: sticky;
    top: 57px;
    z-index: 99;
}

.tab {
    padding: 12px 24px;
    border: none;
    background: none;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}
.tab:hover { color: var(--text); }
.tab.active {
    color: var(--text);
    border-bottom-color: var(--accent-ai);
}
.tab[data-category="gaming"].active {
    border-bottom-color: var(--accent-gaming);
}

/* ---------- Content ---------- */
.content {
    max-width: 1120px;
    margin: 0 auto;
    padding: 20px 24px 60px;
}

.news-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--text-secondary);
}

/* ---------- News Card ---------- */
.news-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 18px;
    margin-bottom: 10px;
    transition: box-shadow 0.15s, border-color 0.15s;
}
.news-card:hover {
    box-shadow: var(--shadow);
    border-color: #cbd5e1;
}

.news-rank {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    background: var(--bg);
}
.news-card.top-1 .news-rank { background: var(--hot-high); color: #fff; }
.news-card.top-2 .news-rank { background: var(--hot-mid); color: #fff; }
.news-card.top-3 .news-rank { background: var(--hot-mid); color: #fff; }

.news-body {
    flex: 1;
    min-width: 0;
}

.news-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 6px;
}
.news-title a {
    color: var(--text);
    text-decoration: none;
}
.news-title a:hover {
    color: var(--accent-ai);
}
.tab[data-category="gaming"].active ~ .content .news-title a:hover,
.category-gaming .news-title a:hover { color: var(--accent-gaming); }

.news-summary {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.news-source {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 600;
    background: var(--bg);
    color: var(--text-secondary);
}

.news-time {
    font-size: 12px;
    color: var(--text-muted);
}

/* ---------- Hotness Bar ---------- */
.hotness-bar-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.hotness-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    min-width: 20px;
    text-align: right;
}

.hotness-track {
    width: 60px;
    height: 4px;
    background: var(--bg);
    border-radius: 99px;
    overflow: hidden;
}

.hotness-fill {
    height: 100%;
    border-radius: 99px;
    transition: width 0.3s;
}
.hotness-fill.high { background: var(--hot-high); }
.hotness-fill.mid { background: var(--hot-mid); }
.hotness-fill.low { background: #9ca3af; }

/* ---------- Loading / Empty ---------- */
.loading-spinner {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
    font-size: 14px;
}
.loading-spinner::after {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    margin: 12px auto;
    border: 3px solid var(--border);
    border-top-color: var(--accent-ai);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.empty-state {
    text-align: center;
    padding: 80px 20px;
    color: var(--text-muted);
}
.empty-state h3 { font-size: 18px; margin-bottom: 8px; color: var(--text-secondary); }

/* ---------- Footer ---------- */
.app-footer {
    text-align: center;
    padding: 20px;
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    justify-content: center;
    gap: 16px;
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
    .app-header { padding: 12px 16px; }
    .tab-bar { padding: 0 16px; }
    .content { padding: 14px 16px 40px; }
    .app-title { font-size: 18px; }
    .header-center .date-display { display: none; }
    .news-card { padding: 12px 14px; gap: 10px; }
    .news-rank { width: 24px; height: 24px; font-size: 11px; }
    .news-title { font-size: 14px; }
    .hotness-track { width: 40px; }
}
/* ====== Search Bar ====== */
.search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 6px 14px;
    margin-bottom: 14px;
    transition: border-color 0.15s;
}
.search-bar:focus-within {
    border-color: var(--accent-ai);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
}
.search-icon { flex-shrink: 0; color: var(--text-muted); }
.search-input {
    flex: 1;
    border: none;
    outline: none;
    background: none;
    font-size: 14px;
    color: var(--text);
    font-family: inherit;
}
.search-input::placeholder { color: var(--text-muted); }
.search-clear {
    display: none;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px;
    border: none;
    border-radius: 50%;
    background: var(--border);
    color: var(--text-secondary);
    font-size: 11px;
    cursor: pointer;
    transition: background 0.15s;
}
.search-clear:hover { background: var(--text-muted); color: var(--surface); }
.search-clear.visible { display: inline-flex; }

/* ====== Tags ====== */
.news-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}
.tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
}
.tag-tech { background: #dbeafe; color: #1d4ed8; }
.tag-company { background: #e0e7ff; color: #4338ca; }
.tag-solution { background: #d1fae5; color: #047857; }

/* ====== Chinese Summary ====== */
.news-chinese-summary {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 8px;
    padding: 6px 10px;
    background: #f8fafc;
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--border);
}
/* ====== Filter Bar ====== */
.filter-bar {
    padding: 8px 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.filter-row {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    padding: 2px 0;
}
.filter-lbl {
    font-size: 12px;
    color: var(--text-secondary);
    margin-right: 6px;
    min-width: 48px;
    font-weight: 500;
}
.fb-btn {
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 99px;
    padding: 2px 10px;
    font-size: 11px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.15s;
    font-family: inherit;
}
.fb-btn:hover {
    border-color: var(--accent-ai);
    color: var(--text);
}
.fb-btn.active {
    background: var(--accent-ai);
    color: #fff;
    border-color: var(--accent-ai);
}

/* ====== Importance Badges ====== */
.imp-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 3px;
    margin-right: 4px;
    margin-bottom: 6px;
    vertical-align: middle;
}
.imp-s-badge {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #f59e0b;
}
.imp-a-badge {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #10b981;
}
.imp-text {
    font-size: 10px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

/* ====== S-Level Highlight ====== */
.news-card.imp-S {
    border-color: #f59e0b;
    background: #fffbeb;
    box-shadow: 0 0 0 1px #f59e0b;
}
.news-card.imp-S .news-rank {
    background: #f59e0b;
    color: #fff;
}

/* ====== Category Tag ====== */
.cat-tag {
    display: inline-block;
    font-size: 10px;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 6px;
    margin-right: 4px;
    margin-bottom: 6px;
    vertical-align: middle;
}

/* ====== Type Tag ====== */
.type-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 3px;
    margin-right: 4px;
    margin-bottom: 6px;
    vertical-align: middle;
}
.type-updates { background: #e0e7ff; color: #4338ca; }
.type-resources { background: #d1fae5; color: #047857; }
.type-trend { background: #fee2e2; color: #b91c1c; }
.github-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: #111827;
    border-radius: 3px;
    padding: 1px 8px;
    margin-right: 4px;
    margin-bottom: 6px;
    vertical-align: middle;
}

/* ====== GitHub Stats ====== */
.github-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 6px 0 8px;
}
.gh-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    background: var(--bg);
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 11px;
    color: var(--text-secondary);
}
.gh-stat strong {
    font-size: 13px;
    color: var(--text);
}

/* ====== Gaming Hotspots ====== */
.hotspot-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.hotspot-title-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}
.hotspot-total {
    font-size: 12px;
    color: var(--text-secondary);
}
.hotspot-loading {
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

/* ====== Gaming Pipeline Hotspots ====== */
.gaming-hotspot-section {
    margin-bottom: 16px;
}
.gaming-hotspot-list {
    display: grid;
    gap: 8px;
}
.gaming-hotspot-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent-gaming);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
}
.gaming-hotspot-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}
.gaming-hotspot-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}
.gaming-hotspot-event {
    font-size: 11px;
    color: var(--text-secondary);
}
.gaming-hotspot-score {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-gaming);
}
.gaming-hotspot-imp {
    font-size: 10px;
    font-weight: 700;
    color: #92400e;
    background: var(--accent-gaming-bg);
    border-radius: 99px;
    padding: 1px 8px;
}
.gaming-hotspot-sources {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-secondary);
}
.gaming-source-name {
    font-weight: 600;
    color: var(--text-secondary);
}
.gaming-source-btn {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 4px;
    background: var(--accent-gaming);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s;
}
.gaming-source-btn:hover {
    background: #d97706;
}

/* ====== Home information architecture ====== */
.page-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}
.page-intro h2 {
    margin: 2px 0 4px;
    font-size: 24px;
    letter-spacing: -0.3px;
}
.page-intro p,
.page-date,
.page-updated {
    color: var(--text-secondary);
    font-size: 12px;
}
.page-kicker,
.section-eyebrow {
    color: var(--accent-ai);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
}
.gaming-intro .page-kicker,
.gaming-intro + .gaming-layout .section-eyebrow {
    color: #b45309;
}
.dashboard-section,
.weekly-board,
.today-new-panel {
    margin-bottom: 18px;
}
.section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}
.section-header h3 {
    margin-top: 2px;
    font-size: 17px;
}
.section-note,
.section-count {
    color: var(--text-muted);
    font-size: 11px;
}
.filter-hint {
    padding-left: 58px;
    color: var(--text-muted);
    font-size: 10px;
}
[hidden] {
    display: none !important;
}
.gaming-filters .fb-btn:hover {
    border-color: var(--accent-gaming);
}
.gaming-filters .fb-btn.active {
    border-color: var(--accent-gaming);
    background: var(--accent-gaming);
}

.priority-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.priority-card,
.intel-row,
.github-radar-card,
.weekly-event-card,
.today-new-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}
.priority-card {
    padding: 16px 18px;
    border-left: 3px solid var(--accent-ai);
}
.priority-meta,
.intel-meta,
.github-radar-meta,
.event-foot,
.today-new-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    color: var(--text-muted);
    font-size: 10px;
}
.priority-card h4,
.intel-row h4,
.github-radar-card h4,
.weekly-event-card h4,
.today-new-card h4 {
    margin: 7px 0 5px;
    line-height: 1.45;
}
.priority-card h4 a,
.intel-row h4 a,
.github-radar-card h4 a {
    color: var(--text);
    text-decoration: none;
}
.priority-card h4 a:hover,
.intel-row h4 a:hover {
    color: var(--accent-ai);
}
.priority-card p,
.intel-row p,
.github-radar-card p,
.weekly-event-card p,
.today-new-card p {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.6;
}
.priority-card p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.priority-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}
.importance-pill {
    display: inline-flex;
    padding: 1px 7px;
    border-radius: 99px;
    background: var(--bg);
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 700;
}
.importance-s { background: #fef3c7; color: #92400e; }
.importance-a { background: #d1fae5; color: #065f46; }

.ai-section-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.ai-controls {
    margin-bottom: 20px;
}
.ai-controls .search-bar {
    margin-bottom: 8px;
}
.ai-filter-bar {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.section-actions {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 3px;
}
.section-toggle {
    border: 0;
    background: transparent;
    color: var(--accent-ai);
    font: inherit;
    font-size: 11px;
    cursor: pointer;
    padding: 0;
}
.section-toggle:hover {
    text-decoration: underline;
}
.section-toggle[hidden] {
    display: none;
}
.ai-stream-section {
    min-width: 0;
}
.compact-list {
    display: grid;
    gap: 8px;
}
.intel-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
}
.intel-main { min-width: 0; }
.intel-row h4 {
    font-size: 13px;
}
.intel-row p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.github-radar-section {
    padding-top: 4px;
}
.github-radar-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 9px;
}
.github-radar-card {
    min-width: 0;
    padding: 13px;
    border-top: 1px solid #cbd5e1;
    background: #fbfcfe;
}
.github-radar-card h4 {
    font-size: 13px;
}
.github-radar-card h4 a {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.github-radar-card p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.github-radar-card .github-stats {
    gap: 4px;
    margin-bottom: 0;
}
.github-radar-card .gh-stat {
    padding: 1px 4px;
    font-size: 9px;
    color: var(--text-muted);
}
.github-radar-card .gh-stat strong {
    font-size: 10px;
    color: var(--text-secondary);
}
.page-updated {
    margin-top: 8px;
    text-align: right;
}

.gaming-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
    gap: 18px;
    align-items: start;
}
.game-group + .game-group {
    margin-top: 18px;
}
.game-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.game-group-header h3 {
    font-size: 15px;
}
.game-group-header span {
    color: var(--text-muted);
    font-size: 11px;
}
.weekly-event-list,
.today-new-list {
    display: grid;
    gap: 8px;
}
.today-new-empty {
    padding: 12px 2px 4px;
    color: var(--text-muted);
    font-size: 12px;
}
.weekly-event-card {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 16px;
    padding: 14px 16px;
    border-left: 3px solid var(--accent-gaming);
}
.weekly-event-card.is-event-clickable { cursor: pointer; }
.weekly-event-card.is-event-clickable:hover { border-color: #b45309; }
.weekly-event-card.is-event-clickable:focus-visible { outline: 2px solid #f59e0b; outline-offset: 2px; }
.event-date-block strong,
.event-date-block span {
    display: block;
}
.event-date-block strong {
    font-size: 13px;
}
.event-date-block span {
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 10px;
}
.game-name {
    color: #92400e;
    font-size: 11px;
    font-weight: 700;
}
.weekly-event-card h4 {
    font-size: 15px;
}
.event-foot {
    margin-top: 9px;
}
.event-source-link {
    color: var(--text-secondary);
    font-size: 10px;
    text-decoration: none;
    white-space: nowrap;
}
.event-source-link:hover {
    color: #92400e;
    text-decoration: underline;
}
.verification-pending {
    color: var(--text-muted);
    font-size: 10px;
}
.attention,
.phase-pill {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: 99px;
    background: var(--accent-gaming-bg);
    color: #92400e;
    font-size: 10px;
    font-weight: 600;
}
.attention-high { background: #fee2e2; color: #b91c1c; }
.attention-medium { background: #fef3c7; color: #92400e; }
.weak-score { color: var(--text-muted); }
.today-new-panel {
    position: sticky;
    top: 116px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fffaf0;
}
.today-new-card {
    padding: 12px;
}
.today-new-time {
    color: #b45309;
    font-size: 10px;
    font-weight: 700;
}
.today-new-card h4 {
    font-size: 13px;
}
.today-new-meta {
    margin-top: 8px;
}
.module-empty {
    grid-column: 1 / -1;
    padding: 24px 14px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    color: var(--text-secondary);
    text-align: center;
    font-size: 12px;
}
.module-empty p {
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 11px;
}
.module-error {
    border-color: #fecaca;
    background: #fff7f7;
    color: #b91c1c;
}
.event-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(15, 23, 42, .22);
}
.event-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 41;
    display: flex;
    flex-direction: column;
    width: min(460px, 94vw);
    height: 100vh;
    border-left: 1px solid var(--border);
    background: var(--surface);
    box-shadow: -12px 0 30px rgba(15, 23, 42, .12);
    transform: translateX(102%);
    transition: transform .16s ease-out;
}
.event-drawer.is-open { transform: translateX(0); }
.event-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--border);
}
.event-drawer-close {
    padding: 5px 9px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 12px;
}
.event-drawer-body { overflow-y: auto; padding: 20px; }
.event-detail-title h2 { margin: 6px 0 10px; font-size: 21px; line-height: 1.35; }
.verification-badge {
    display: inline-flex;
    padding: 3px 7px;
    border-radius: 4px;
    background: #dcfce7;
    color: #166534;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
}
.verification-partial { background: var(--accent-gaming-bg); color: #92400e; }
.event-detail-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 18px 0 22px;
}
.event-detail-meta div { padding: 9px; border: 1px solid var(--border); border-radius: 6px; }
.event-detail-meta dt { color: var(--text-muted); font-size: 10px; }
.event-detail-meta dd { margin: 5px 0 0; font-size: 12px; font-weight: 700; }
.drawer-section { margin-top: 22px; }
.drawer-section h3 { margin: 0 0 10px; font-size: 14px; }
.why-it-matters { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.7; }
.event-timeline,
.evidence-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.event-timeline-item { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 9px; }
.event-timeline-item time,
.event-timeline-item span,
.evidence-item span { color: var(--text-muted); font-size: 10px; }
.event-timeline-item p { margin: 0 0 3px; color: var(--text); font-size: 12px; line-height: 1.55; }
.timeline-source,
.evidence-link { color: #92400e; text-decoration: none; font-size: 11px; }
.timeline-source:hover,
.evidence-link:hover { text-decoration: underline; }
.evidence-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 6px; }
.evidence-item div { min-width: 0; }
.evidence-item strong,
.evidence-item span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-empty,
.drawer-state { padding: 15px 0; color: var(--text-secondary); font-size: 12px; }
.drawer-state { padding: 32px 12px; text-align: center; }
.drawer-state p { margin: 6px 0 0; color: var(--text-muted); font-size: 11px; }

@media (max-width: 900px) {
    .ai-section-grid { grid-template-columns: 1fr; }
    .github-radar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gaming-layout { grid-template-columns: 1fr; }
    .today-new-panel { position: static; }
}

@media (max-width: 640px) {
    .page-intro { align-items: flex-start; flex-direction: column; gap: 6px; }
    .priority-list,
    .github-radar-grid { grid-template-columns: 1fr; }
    .weekly-event-card { grid-template-columns: 1fr; gap: 8px; }
    .event-detail-meta { grid-template-columns: 1fr; }
    .event-timeline-item { grid-template-columns: 1fr; gap: 3px; }
    .filter-hint { padding-left: 0; }
}