:root {
  color-scheme: dark;
  --bg: #090c0e;
  --sidebar: #0d1114;
  --panel: #12181c;
  --panel-soft: #0e1417;
  --line: #2a363c;
  --line-soft: #202a2f;
  --text: #edf3f2;
  --muted: #91a2a6;
  --cyan: #55d5d0;
  --blue: #6ba6ef;
  --green: #65d3a8;
  --violet: #a68ae8;
  --orange: #efb45e;
  --danger: #ef6b72;
  font-family: Inter, "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body { min-width: 0; overflow-x: hidden; }
[hidden] { display: none !important; }
button, input, select { font: inherit; }
button { cursor: pointer; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 260px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 24px 18px; background: var(--sidebar); border-right: 1px solid var(--line-soft); }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 24px; }
.brand-mark { display: grid; place-items: center; width: 46px; height: 38px; border: 1px solid #2d8996; color: var(--cyan); font-weight: 800; font-size: 13px; }
.brand strong { display: block; font-size: 20px; }
.brand small { display: block; color: var(--muted); margin-top: 2px; }
.nav { display: grid; gap: 6px; padding-bottom: 24px; border-bottom: 1px solid var(--line-soft); }
.nav-button { border: 0; text-align: left; color: var(--muted); background: transparent; padding: 12px 14px; border-radius: 6px; }
.nav-button:hover, .nav-button.is-active { color: var(--text); background: #13232d; }
.nav-button.is-active { box-shadow: inset 3px 0 var(--cyan); }
.sidebar-heading { display: flex; justify-content: space-between; align-items: center; padding: 24px 8px 12px; color: var(--muted); font-size: 14px; }
.count { min-width: 26px; padding: 2px 8px; text-align: center; color: var(--cyan); background: #11252c; border-radius: 999px; }
.session-list { display: grid; gap: 6px; overflow: auto; padding-right: 3px; }
.session-item { width: 100%; border: 1px solid transparent; background: transparent; color: var(--text); text-align: left; padding: 12px; border-radius: 6px; }
.session-item:hover, .session-item.is-active { background: #111d26; border-color: #243b49; }
.session-item strong, .session-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-item strong { font-size: 14px; }
.session-item small { color: var(--muted); margin-top: 5px; }
.sidebar-footer { margin-top: auto; padding: 18px 8px 0; color: #708187; font-size: 12px; }
.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(101, 211, 168, .1); }

.main { min-width: 0; }
.view { display: none; max-width: 1540px; margin: 0 auto; padding: 30px 38px 64px; }
.view.is-visible { display: block; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 30px; line-height: 1.25; }
h2 { font-size: 25px; }
h3 { margin-bottom: 0; font-size: 20px; }
.eyebrow { margin-bottom: 7px; color: var(--cyan); font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.muted, .panel-note { color: var(--muted); }
.panel-note { font-size: 13px; }
.primary-button, .secondary-button, .danger-button { min-height: 42px; padding: 0 18px; border-radius: 6px; font-weight: 700; }
.primary-button, .secondary-button, .danger-button { white-space: nowrap; }
.primary-button { color: #041014; background: var(--cyan); border: 1px solid var(--cyan); }
.primary-button:hover { background: #7be1ec; }
.secondary-button { color: #c7d6d9; background: #121c20; border: 1px solid #34464e; }
.secondary-button:hover { color: white; border-color: #55717b; }
.danger-button { color: #ffb3b8; background: transparent; border: 1px solid #713943; }
.danger-button:hover { background: #2a171d; }
.status-banner { margin-bottom: 18px; padding: 13px 16px; color: #bceef3; background: #0d252c; border: 1px solid #285965; border-radius: 6px; }
.status-banner.is-error { color: #ffc1c5; background: #29171c; border-color: #723c46; }

.overview-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.metric-card, .score-card, .panel, .empty-state { border: 1px solid var(--line); background: var(--panel); border-radius: 8px; box-shadow: 0 10px 28px rgba(0, 0, 0, .12); }
.metric-card { padding: 18px; }
.metric-card span, .score-card span { color: var(--muted); font-size: 14px; }
.metric-card strong { display: block; margin: 12px 0 3px; font-size: 28px; }
.metric-card small, .score-card small { color: #718594; }
.trend-panel { margin-bottom: 26px; }
.chart-compact { min-height: 220px; }
.empty-state { display: grid; place-items: center; min-height: 360px; padding: 56px 24px; text-align: center; }
.empty-state p { max-width: 620px; color: var(--muted); line-height: 1.8; }
.empty-wave { width: 180px; height: 54px; margin-bottom: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 54'%3E%3Cpath d='M2 28h30l8-18 14 36 15-26 12 8h23l8-14 10 28 11-14h45' fill='none' stroke='%234fd4e5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.session-heading { display: flex; justify-content: space-between; gap: 20px; align-items: start; margin: 30px 0 16px; }
.session-heading h2 { margin-bottom: 8px; }
.session-actions { display: flex; gap: 8px; }
.metadata-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 14px; border: 1px solid var(--line); background: #0f1518; }
.metadata-strip div { min-width: 0; padding: 13px 15px; border-right: 1px solid var(--line-soft); }
.metadata-strip div:last-child { border-right: 0; }
.metadata-strip span, .metadata-strip strong { display: block; }
.metadata-strip span { color: var(--muted); font-size: 12px; }
.metadata-strip strong { margin-top: 6px; overflow: hidden; color: #dce6e7; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.score-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.score-card { position: relative; overflow: hidden; padding: 18px; }
.score-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent, var(--cyan)); }
.score-card::after { content: ""; position: absolute; left: 0; bottom: 0; width: var(--score, 0); height: 3px; background: var(--accent, var(--cyan)); transition: width .45s ease; }
.score-card strong { display: block; margin: 10px 0 3px; font-size: 28px; color: var(--accent, var(--cyan)); }
.accent-cyan { --accent: var(--cyan); } .accent-blue { --accent: var(--blue); } .accent-green { --accent: var(--green); } .accent-violet { --accent: var(--violet); }
.score-card-wide { --accent: var(--orange); }
.panel { padding: 22px; margin-bottom: 14px; }
.panel-title { display: flex; justify-content: space-between; align-items: start; gap: 18px; margin-bottom: 18px; }
.panel-title .eyebrow { margin-bottom: 5px; }
.pill { display: inline-flex; align-items: center; min-height: 28px; padding: 3px 10px; border: 1px solid #375263; color: #a8c0cf; border-radius: 999px; font-size: 12px; }
.report-text { max-width: 1120px; color: #c8d5dd; line-height: 1.8; }
.quality-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 20px; background: var(--line); border: 1px solid var(--line); }
.quality-strip div { padding: 14px; background: var(--panel-soft); }
.quality-strip span, .quality-strip strong { display: block; }
.quality-strip span { color: var(--muted); font-size: 13px; }
.quality-strip strong { margin-top: 7px; font-size: 17px; }
.insight-layout { grid-template-columns: 1fr 1fr; }
.comparison-list { display: grid; gap: 17px; }
.comparison-row { display: grid; grid-template-columns: 115px minmax(90px, 1fr) 58px; align-items: center; gap: 14px; }
.comparison-copy strong, .comparison-copy span { display: block; }
.comparison-copy strong { color: #dce6e7; font-size: 14px; }
.comparison-copy span { margin-top: 4px; color: var(--muted); font-size: 11px; }
.comparison-bars { display: grid; gap: 5px; }
.comparison-bars i { position: relative; display: block; height: 5px; overflow: hidden; background: #20292e; border-radius: 2px; }
.comparison-bars i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--bar); background: var(--bar-color); }
.delta { text-align: right; font-family: "Cascadia Code", Consolas, monospace; font-size: 13px; }
.delta.is-positive { color: var(--green); } .delta.is-negative { color: var(--danger); } .delta.is-neutral { color: var(--muted); }
.insight-list { display: grid; }
.insight-item { display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.insight-item:first-child { padding-top: 0; }
.insight-item:last-child { padding-bottom: 0; border-bottom: 0; }
.insight-item > span { display: grid; place-items: center; width: 30px; height: 30px; color: var(--cyan); background: #132328; border: 1px solid #29454c; font-size: 11px; font-weight: 700; }
.insight-item strong { color: #dce6e7; font-size: 14px; }
.insight-item p { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.chart { display: block; width: 100%; min-height: 260px; background: #0b1219; border: 1px solid var(--line-soft); border-radius: 4px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: -6px 0 12px; color: var(--muted); font-size: 13px; }
.legend-item { display: inline-flex; align-items: center; gap: 7px; }
.legend-swatch { width: 18px; height: 3px; }
.metric-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 12px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.metric-stat { position: relative; padding: 13px 14px; background: #0d1417; }
.metric-stat::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: var(--metric-color); }
.metric-stat span, .metric-stat strong, .metric-stat small { display: block; }
.metric-stat span { color: var(--muted); font-size: 12px; }
.metric-stat strong { margin: 6px 0 4px; color: var(--metric-color); font-size: 21px; }
.metric-stat small { color: #71848a; font-size: 11px; line-height: 1.45; }
.select-label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }
select { min-height: 36px; color: var(--text); background: #0a1117; border: 1px solid var(--line); border-radius: 5px; padding: 0 28px 0 10px; }
.two-column { display: grid; grid-template-columns: 1.2fr .8fr; gap: 14px; }
.two-column .panel { min-width: 0; }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 11px 10px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line-soft); }
th { color: var(--muted); font-weight: 600; }
td { color: #cbd7de; }
.quality-good { color: var(--green); } .quality-fair { color: var(--orange); } .quality-poor { color: var(--danger); }
.file-list { display: grid; gap: 8px; }
.file-link { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; color: #bdd2de; text-decoration: none; border: 1px solid var(--line-soft); border-radius: 5px; }
.file-link:hover { border-color: #3d6677; color: white; }
.file-link small { color: var(--muted); }
.reading-grid, .dictionary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.reading-grid > div, .dictionary-grid > div { padding: 16px; background: #0e1518; }
.reading-grid strong, .dictionary-grid strong { color: #dce7e7; font-size: 14px; }
.reading-grid p, .dictionary-grid p { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.dictionary-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 18px; }

.algorithm-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.algorithm-layout .panel { margin-bottom: 0; }
.method-intro, .limitation-panel { grid-column: 1 / -1; }
.method-intro > p, .formula-panel > p, .limitation-panel > p { color: #b9c8d1; line-height: 1.75; }
.pipeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 0; margin: 24px 0 0; list-style: none; counter-reset: step; }
.pipeline li { min-height: 112px; padding: 15px; background: #0b141b; border: 1px solid var(--line-soft); }
.pipeline strong, .pipeline span { display: block; }
.pipeline strong { color: var(--cyan); margin-bottom: 9px; }
.pipeline span { color: var(--muted); line-height: 1.55; font-size: 14px; }
.formula-panel code { display: block; margin: 16px 0; padding: 14px; overflow-wrap: anywhere; color: #c8f6fb; background: #081319; border-left: 3px solid var(--cyan); font-family: "Cascadia Code", Consolas, monospace; }
.formula-panel dl { display: grid; grid-template-columns: 48px 1fr; gap: 8px 12px; color: #b6c6cf; }
.formula-panel dt { color: var(--cyan); font-weight: 700; }
.formula-panel dd { margin: 0; }
.clean-list { margin: 16px 0 0; padding-left: 20px; color: #bdcad2; line-height: 1.9; }
.recommendation-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 18px 0 0; padding: 0; background: var(--line-soft); border: 1px solid var(--line-soft); list-style: none; }
.recommendation-list li { display: grid; grid-template-columns: 38px 1fr; gap: 12px; padding: 17px; background: #0e1518; }
.recommendation-list li > span { color: var(--cyan); font: 700 12px "Cascadia Code", Consolas, monospace; }
.recommendation-list strong { color: #dce7e7; font-size: 14px; }
.recommendation-list p { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.is-dragging-files::after { content: "松开以导入 EEG 文件"; position: fixed; z-index: 50; inset: 18px; display: grid; place-items: center; color: white; background: rgba(9, 12, 14, .94); border: 2px dashed var(--cyan); font-size: 22px; font-weight: 700; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 20; max-width: 420px; padding: 13px 16px; color: var(--text); background: #17303a; border: 1px solid #386878; border-radius: 6px; opacity: 0; transform: translateY(10px); pointer-events: none; transition: .2s ease; }
.toast.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1050px) {
  .app-shell { grid-template-columns: 220px minmax(0, 1fr); }
  .view { padding: 24px; }
  .session-heading { flex-direction: column; }
  .overview-grid, .score-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .score-card-wide { grid-column: 1 / -1; }
  .two-column { grid-template-columns: 1fr; }
  .metadata-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .metadata-strip div:nth-child(3) { border-right: 0; }
  .metadata-strip div:nth-child(-n+3) { border-bottom: 1px solid var(--line-soft); }
  .metric-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dictionary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pipeline { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .app-shell { display: block; }
  .sidebar { position: relative; width: 100%; height: auto; padding: 16px; border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .brand { padding-bottom: 14px; }
  .nav { grid-template-columns: 1fr 1fr; padding-bottom: 14px; }
  .sidebar-heading { display: flex; padding: 14px 4px 8px; }
  .session-list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 74vw); overflow-x: auto; padding: 0 0 5px; scrollbar-width: none; }
  .session-list::-webkit-scrollbar { display: none; }
  .sidebar-footer { display: none; }
  .view { padding: 20px 14px 48px; }
  .topbar, .session-heading { align-items: stretch; flex-direction: column; }
  .session-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .top-actions .primary-button { width: 100%; }
  .overview-grid, .score-grid, .quality-strip, .algorithm-layout, .pipeline { grid-template-columns: 1fr; }
  .metadata-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metadata-strip div { border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
  .metadata-strip div:nth-child(even) { border-right: 0; }
  .metadata-strip div:nth-last-child(-n+2) { border-bottom: 0; }
  .comparison-row { grid-template-columns: 96px minmax(70px, 1fr) 50px; gap: 9px; }
  .metric-stat-grid, .reading-grid, .dictionary-grid, .recommendation-list { grid-template-columns: 1fr; }
  .method-intro, .limitation-panel { grid-column: auto; }
  .panel { padding: 16px; }
  .panel-title { flex-direction: column; }
  h1 { font-size: 26px; }
}

@media (max-width: 420px) {
  .session-actions { grid-template-columns: 1fr; }
  .session-actions button { width: 100%; }
  .chart { min-height: 230px; }
  .comparison-row { grid-template-columns: 1fr 48px; }
  .comparison-bars { grid-column: 1 / -1; grid-row: 2; }
  .delta { grid-column: 2; grid-row: 1; }
}

@media print {
  :root { color-scheme: light; --bg: #fff; --panel: #fff; --panel-soft: #fff; --text: #111; --muted: #555; --line: #bbb; --line-soft: #ddd; }
  body { background: #fff; color: #111; }
  .app-shell { display: block; }
  .sidebar, .topbar, .overview-grid, .trend-panel, .session-actions, .toast, .data-notes-panel { display: none !important; }
  .view { max-width: none; padding: 0; }
  .session-heading { margin-top: 0; }
  .panel, .metric-card, .score-card { break-inside: avoid; box-shadow: none; }
  .chart { background: #0b1219; }
  .file-link { color: #111; }
}