:root,
:root[data-theme="iris-light"] {
  color-scheme: light;
  --bg: #f8f7fc;
  --surface: #ffffff;
  --surface-soft: #f4f1fc;
  --surface-raised: #ffffff;
  --ink: #29243a;
  --muted: #6f6980;
  --line: #e4def2;
  --line-strong: #cec3e7;
  --accent: #7559e8;
  --accent-dark: #5e43c8;
  --accent-soft: #eee9fd;
  --accent-contrast: #ffffff;
  --secondary: #3ea7d8;
  --success: #42b883;
  --success-soft: #e9f8f1;
  --lime: #d8ccff;
  --amber: #a96b16;
  --amber-soft: #fff4df;
  --red: #b94e59;
  --red-soft: #fff0f1;
  --blue: #367fa4;
  --topbar-bg: rgba(255,255,255,.94);
  --sidebar-bg: #f6f3fb;
  --nav-label: #837c91;
  --nav-text: #585164;
  --nav-icon: #756e82;
  --nav-count-bg: #e9e4f1;
  --hero-start: #30205b;
  --hero-mid: #563d9e;
  --hero-end: #3ea7d8;
  --hero-action-bg: #f2efff;
  --hero-action-ink: #392673;
  --focus-ring: rgba(117,89,232,.25);
  --shadow: 0 12px 34px rgba(54, 39, 91, .11);
  font-family: Inter, "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--bg);
}

:root[data-theme="lavender-mist"] {
  --bg: #fbf3f8;
  --surface: #fffafc;
  --surface-soft: #f6e7f0;
  --surface-raised: #fffdfd;
  --ink: #382735;
  --muted: #7d6878;
  --line: #ecd6e3;
  --line-strong: #d9b9ce;
  --accent: #9660a2;
  --accent-dark: #77417f;
  --accent-soft: #f1deed;
  --secondary: #d87996;
  --success: #4ba582;
  --success-soft: #eaf7f1;
  --lime: #e2c4dd;
  --amber: #ad701d;
  --amber-soft: #fff1dc;
  --red: #b9526b;
  --red-soft: #fde8ee;
  --blue: #687f9f;
  --topbar-bg: rgba(255,249,252,.96);
  --sidebar-bg: #f3e4ed;
  --nav-label: #92778b;
  --nav-text: #654f61;
  --nav-icon: #826b7d;
  --nav-count-bg: #e8d3e0;
  --hero-start: #542645;
  --hero-mid: #8f4f7e;
  --hero-end: #d87996;
  --hero-action-bg: #fff1f7;
  --hero-action-ink: #65304f;
  --focus-ring: rgba(150,96,162,.28);
  --shadow: 0 12px 34px rgba(105, 55, 85, .13);
}

:root[data-theme="midnight-iris"] {
  color-scheme: dark;
  --bg: #171522;
  --surface: #211e2f;
  --surface-soft: #29243a;
  --surface-raised: #2d2840;
  --ink: #f4f1fa;
  --muted: #bdb5cc;
  --line: #39334a;
  --line-strong: #4d4562;
  --accent: #9b87f5;
  --accent-dark: #b3a3ff;
  --accent-soft: #30294e;
  --secondary: #63bce5;
  --success: #58c99a;
  --success-soft: #203b35;
  --lime: #c9bcff;
  --amber: #f2c36b;
  --amber-soft: #3a3021;
  --red: #f17d88;
  --red-soft: #40282f;
  --blue: #70c4e7;
  --topbar-bg: rgba(28,25,40,.94);
  --sidebar-bg: #1b1828;
  --nav-label: #938aa3;
  --nav-text: #c4bdcf;
  --nav-icon: #aca3bc;
  --nav-count-bg: #302b3e;
  --hero-start: #211b3e;
  --hero-mid: #49377b;
  --hero-end: #266d8d;
  --hero-action-bg: #ece7ff;
  --hero-action-ink: #33245e;
  --focus-ring: rgba(155,135,245,.34);
  --shadow: 0 16px 40px rgba(0,0,0,.28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--ink); }
body.resizing-workbench, body.resizing-workbench * { cursor: col-resize !important; user-select: none !important; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 3px solid var(--focus-ring); outline-offset: 2px;
}

.topbar {
  position: sticky; top: 0; z-index: 40; height: 72px; display: grid;
  grid-template-columns: 250px minmax(280px, 640px) 1fr; align-items: center; gap: 28px;
  padding: 0 28px; background: var(--topbar-bg); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
.brand-lockup { display: flex; align-items: center; gap: 11px; border: 0; padding: 0; background: none; cursor: pointer; text-align: left; }
.brand-lockup strong { display: block; font-size: 18px; letter-spacing: -.02em; }
.brand-lockup small { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; letter-spacing: .17em; }
.brand-mark {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px;
  background: var(--accent); color: white; box-shadow: inset 0 -8px 16px rgba(0,0,0,.08);
}
.brand-cell { width: 28px; height: 28px; display: block; }
.global-search-wrap { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 0 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.global-search-wrap > span { color: var(--muted); font-size: 20px; }
.search-icon { width: 17px; height: 17px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.global-search-wrap input { min-width: 0; height: 42px; border: 0; outline: 0; background: transparent; color: var(--ink); }
kbd { padding: 3px 7px; border: 1px solid var(--line); border-bottom-color: var(--line-strong); border-radius: 5px; background: var(--surface-raised); color: var(--muted); font-size: 10px; }
.search-popover { position: absolute; top: 49px; left: 0; right: 0; max-height: 420px; overflow-y: auto; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.search-hit { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 12px; border: 0; border-radius: 9px; background: none; text-align: left; cursor: pointer; }
.search-hit:hover { background: var(--accent-soft); }
.search-hit span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-hit small { flex: none; color: var(--muted); }
.top-actions { justify-self: end; display: flex; align-items: center; gap: 12px; }
.local-badge { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; letter-spacing: .14em; }
.local-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px var(--success-soft); }
.appearance-control { width: auto; display: flex; grid-template-columns: none; align-items: center; gap: 6px; margin: 0; padding: 0 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); color: var(--muted); }
.appearance-control > span { color: var(--accent); font-size: 13px; }
.appearance-control select { width: auto; min-height: 32px; padding: 0 20px 0 0; border: 0; background: transparent; color: var(--ink); font-size: 10px; font-weight: 650; cursor: pointer; }
.language-toggle { min-width: 38px; min-height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); color: var(--accent); cursor: pointer; font-size: 10px; font-weight: 800; }
.language-toggle:hover, .appearance-control:hover { border-color: var(--accent); }
.avatar { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-soft); color: var(--accent); font-size: 10px; font-weight: 800; }
.kimi-status { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 11px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface-soft); color: var(--muted); cursor: pointer; font-size: 10px; font-weight: 700; }
.kimi-status i { width: 7px; height: 7px; border-radius: 50%; background: #a9a2b4; }
.kimi-status.configured { border-color: #d7cfff; background: var(--accent-soft); color: var(--accent-dark); }
.kimi-status.configured i { background: var(--accent); box-shadow: 0 0 0 3px rgba(109,74,255,.12); }
.mobile-menu { display: none; border: 0; background: none; font-size: 22px; }

.app-shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: calc(100vh - 72px); }
.sidebar { position: sticky; top: 72px; height: calc(100vh - 72px); display: flex; flex-direction: column; padding: 22px 17px 17px; border-right: 1px solid var(--line); background: var(--sidebar-bg); overflow-y: auto; }
.sidebar > nav { flex: 0 0 auto; }
.nav-label { margin: 19px 12px 7px; color: var(--nav-label); font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.sidebar > nav > .nav-label:first-child { margin-top: 0; }
#admin-navigation:not([hidden]) { display: flow-root; }
.nav-item { width: 100%; display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 8px; padding: 10px 11px; border: 0; border-radius: 9px; background: transparent; color: var(--nav-text); cursor: pointer; text-align: left; font-size: 13px; }
.nav-item > span { display: grid; place-items: center; width: 24px; height: 24px; color: var(--nav-icon); font-size: 15px; }
.nav-item > b { min-width: 22px; padding: 2px 6px; border-radius: 99px; background: var(--nav-count-bg); color: var(--nav-icon); font-size: 9px; text-align: center; }
.nav-item:hover { background: var(--accent-soft); color: var(--ink); }
.nav-item.active { background: var(--accent-soft); color: var(--accent-dark); font-weight: 650; }
.nav-item.active > span { color: var(--accent); }
.nav-item.active > b { background: var(--surface-raised); color: var(--accent); }
.sidebar-note { flex: 0 0 auto; margin-top: 19px; padding: 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--accent-soft); }
.sidebar-note strong { font-size: 12px; }
.sidebar-note p { margin: 6px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.sidebar-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.sidebar-tools a, .sidebar-tools button { padding: 7px 5px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--muted); cursor: pointer; font-size: 8px; text-align: center; text-decoration: none; }
.sidebar-tools a:hover, .sidebar-tools button:hover { border-color: #c9baf0; color: var(--accent); }
.sidebar-version { padding: 15px 5px 0; color: var(--muted); font-size: 9px; letter-spacing: .08em; }

.content { min-width: 0; padding: 32px clamp(22px, 4vw, 58px) 72px; }
.view { display: none; width: min(1380px, 100%); margin: 0 auto; animation: fade-up .25s ease; }
.view.active { display: block; }
@keyframes fade-up { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.section-kicker, .eyebrow { display: block; color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.hero-card { position: relative; min-height: 360px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); gap: 32px; align-items: center; overflow: hidden; padding: clamp(34px, 5vw, 64px); border-radius: 22px; background: linear-gradient(135deg, var(--hero-start) 0%, var(--hero-mid) 58%, var(--hero-end) 120%); color: white; box-shadow: var(--shadow); }
.hero-card::before { content: ""; position: absolute; right: -120px; top: -210px; width: 520px; height: 520px; border-radius: 50%; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 0 0 70px rgba(255,255,255,.025), 0 0 0 140px rgba(255,255,255,.02); }
.hero-copy { position: relative; z-index: 1; }
.hero-copy .eyebrow { color: var(--lime); }
.hero-copy h1 { max-width: 680px; margin: 13px 0 17px; font-size: clamp(31px, 4vw, 54px); line-height: 1.12; letter-spacing: -.045em; }
:root[lang="en"] .hero-copy h1 { font-size: clamp(29px, 3.55vw, 48px); }
.hero-copy > p { max-width: 620px; margin: 0; color: rgba(255,255,255,.72); font-size: 15px; line-height: 1.8; }
.hero-copy > p strong { color: white; font-weight: 650; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
button.primary, button.ghost, button.text-button { border: 0; cursor: pointer; }
button.primary { padding: 11px 17px; border-radius: 9px; background: var(--accent); color: white; font-weight: 650; box-shadow: 0 6px 14px rgba(109,74,255,.18); }
button.primary:hover { background: var(--accent-dark); }
button.ghost { padding: 10px 16px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); color: var(--ink); }
.hero-card button.primary { background: var(--hero-action-bg); color: var(--hero-action-ink); box-shadow: none; }
.hero-card button.primary:hover { background: white; }
.hero-card button.ghost { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.08); color: white; }
button.large { padding: 13px 19px; }
button.full { width: 100%; padding: 14px; }
.design-submit { margin-top: 24px; }
button:disabled { opacity: .56; cursor: wait; }
button.text-button { padding: 4px; background: transparent; color: var(--accent); font-size: 11px; font-weight: 650; }
.hero-visual { position: relative; z-index: 1; min-height: 250px; }
.flow-node { position: absolute; width: 205px; padding: 16px 18px; border: 1px solid rgba(255,255,255,.15); border-radius: 14px; background: rgba(255,255,255,.09); backdrop-filter: blur(12px); box-shadow: 0 14px 28px rgba(0,0,0,.12); }
.flow-node span { float: right; color: var(--lime); font-size: 10px; font-weight: 800; }
.flow-node strong { display: block; font-size: 13px; }
.flow-node small { display: block; margin-top: 6px; color: rgba(255,255,255,.58); font-size: 10px; }
.flow-node.n1 { left: 0; top: 8px; }
.flow-node.n2 { right: 0; top: 92px; }
.flow-node.n3 { left: 20px; bottom: 0; }
.flow-line { position: absolute; width: 90px; height: 1px; background: rgba(199,227,110,.6); transform-origin: left center; }
.flow-line::after { content: ""; position: absolute; right: -1px; top: -3px; width: 7px; height: 7px; border-top: 1px solid var(--lime); border-right: 1px solid var(--lime); transform: rotate(45deg); }
.flow-line.l1 { left: 176px; top: 71px; transform: rotate(23deg); }
.flow-line.l2 { right: 157px; top: 163px; transform: rotate(155deg); }
.brand-story { display: grid; grid-template-columns: 1.3fr repeat(2, minmax(0, 1fr)); gap: 0; margin-top: 16px; overflow: hidden; }
.brand-story-intro, .name-meaning { padding: 22px; }
.brand-story-intro { background: var(--surface-soft); }
.brand-story-intro h2 { margin: 6px 0 8px; font-size: 18px; letter-spacing: -.025em; }
.brand-story-intro p, .name-meaning p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.6; }
.name-meaning { border-left: 1px solid var(--line); }
.name-meaning > span { display: block; margin-bottom: 12px; color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.name-meaning.chinese > span { font-size: 16px; letter-spacing: .12em; }
.name-meaning strong { display: block; margin-bottom: 6px; font-size: 11px; }

.section-head, .page-head, .card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; }
.section-head { align-items: end; margin: 36px 0 16px; }
.section-head h2, .page-head h1, .card-head h3 { margin: 5px 0 0; letter-spacing: -.025em; }
.section-head h2 { font-size: 22px; }
.updated { color: var(--muted); font-size: 10px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.metric { min-height: 112px; padding: 19px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.metric-top { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }
.metric-icon { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); }
.metric-value { margin-top: 15px; font-size: 30px; font-weight: 700; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.metric-value small { margin-left: 5px; color: var(--muted); font-size: 10px; font-weight: 500; letter-spacing: 0; }
.skeleton { background: linear-gradient(90deg, #fff, #f1f5f3, #fff); background-size: 200% 100%; animation: loading 1.2s infinite; }
@keyframes loading { to { background-position: -200% 0; } }
.home-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 16px; margin-top: 16px; }
.card { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.workflow-card, .recent-card { padding: 22px; }
.card-head h3 { font-size: 17px; }
.step-list { margin: 22px 0 0; padding: 0; list-style: none; }
.step-list li { display: grid; grid-template-columns: 34px 1fr; gap: 13px; padding: 14px 0; border-top: 1px solid var(--line); }
.step-list li > span { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; background: var(--surface-soft); color: var(--accent); font-size: 10px; font-weight: 800; }
.step-list strong { font-size: 12px; }
.step-list p { margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.compact-list { margin-top: 16px; }
.compact-item { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 11px; padding: 13px 0; border-top: 1px solid var(--line); }
.compact-item { width: 100%; border-right: 0; border-bottom: 0; border-left: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.compact-file { display: grid; place-items: center; width: 34px; height: 38px; border-radius: 7px; background: var(--accent-soft); color: var(--accent); font-size: 8px; font-weight: 800; }
.compact-item strong { display: block; font-size: 11px; }
.compact-item small { display: block; max-width: 220px; margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.file-state { width: 8px; height: 8px; border-radius: 50%; background: #36a46c; }
.file-state.missing { background: var(--amber); }
.empty { padding: 24px; color: var(--muted); text-align: center; font-size: 12px; }
.review-banner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 15px; margin-top: 16px; padding: 18px 20px; border: 1px solid #ecd7b7; border-radius: 14px; background: var(--amber-soft); }
.review-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #ffe6b9; color: var(--amber); font-weight: 800; }
.review-banner strong { font-size: 12px; }
.review-banner p { margin: 4px 0 0; color: #806643; font-size: 10px; line-height: 1.55; }
.review-banner .ghost { border-color: #e2cda9; background: rgba(255,255,255,.54); }

.page-head { align-items: center; margin-bottom: 24px; }
.page-head h1 { font-size: clamp(27px, 3vw, 39px); }
.page-head p { max-width: 720px; margin: 9px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.status-chip { display: inline-flex; align-items: center; flex: none; padding: 7px 11px; border-radius: 99px; font-size: 9px; font-weight: 750; letter-spacing: .05em; }
.status-chip.amber { background: var(--amber-soft); color: var(--amber); }
.status-chip.green { background: var(--accent-soft); color: var(--accent); }
.designer-layout { display: grid; grid-template-columns: minmax(380px, 520px) minmax(0, 1fr); gap: 20px; align-items: start; }
.panel-design-guide { margin-bottom: 18px; overflow: hidden; }
.panel-design-guide summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 18px; cursor: pointer; list-style: none; }
.panel-design-guide summary::-webkit-details-marker { display: none; }
.panel-design-guide summary strong,.panel-design-guide summary small { display: block; }
.panel-design-guide summary strong { font-size: 12px; }
.panel-design-guide summary small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.panel-design-guide summary i { color: var(--accent); font-style: normal; transition: transform .2s ease; }
.panel-design-guide[open] summary i { transform: rotate(180deg); }
.panel-design-guide-body { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(260px,.7fr); gap: 12px; align-items: start; padding: 0 18px 18px; border-top: 1px solid var(--line); }
.panel-design-guide-steps { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-content: start; gap: 9px; padding-top: 14px; }
.panel-design-guide-steps article { position: relative; min-height: 98px; padding: 14px 16px 14px 48px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); }
.panel-design-guide-steps article > span { position: absolute; left: 13px; top: 13px; color: var(--accent); font-size: 10px; font-weight: 800; }
.panel-design-guide-steps strong { font-size: 12px; }
.panel-design-guide-steps p { margin: 7px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.panel-guide-reference { grid-column: 1 / -1; padding: 14px 16px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); }
.panel-guide-reference .evidence-links { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; padding: 10px 0 0; }
.panel-guide-reference .evidence-links a { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.panel-design-guide-rules { margin-top: 14px; padding: 13px; border-radius: 9px; background: var(--accent-soft); }
.panel-design-guide-rules > strong { font-size: 9px; }
.panel-design-guide-rules ul { margin: 7px 0; padding-left: 18px; color: var(--muted); font-size: 8px; line-height: 1.65; }
.panel-design-guide-rules p { margin: 7px 0 0; color: var(--muted); font-size: 7px; line-height: 1.55; }
.panel-guide-attachment-group { margin-top: 12px; padding-top: 10px; border-top: 1px solid color-mix(in srgb,var(--accent) 20%,var(--line)); }
.panel-guide-attachment-group > strong { display: block; margin-bottom: 7px; font-size: 8px; color: var(--ink); }
.panel-guide-attachments { display: flex; flex-wrap: wrap; gap: 7px; }
.panel-guide-attachments a { display: inline-flex; align-items: center; justify-content: center; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); color: var(--accent-dark); font-size: 8px; font-weight: 750; text-decoration: none; }
.panel-guide-attachments a:first-child { border-color: var(--accent); background: var(--accent); color: white; }
.flow-analysis-skill-guide { margin-top: 0; }
.flow-analysis-guide-intro { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 -18px; padding: 20px 24px 18px; background: linear-gradient(120deg, var(--surface), var(--accent-soft)); }
.flow-analysis-guide-intro h2 { margin: 7px 0 6px; font-size: 23px; }
.flow-analysis-guide-intro p { max-width: 760px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.skill-guide-sync { margin-top: 11px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); font-size: 8px; line-height: 1.55; }
.skill-guide-sync strong { display: block; margin-bottom: 3px; color: var(--ink); font-size: 9px; }
.skill-guide-sync code { overflow-wrap: anywhere; color: inherit; font-size: 7px; }
.skill-guide-sync.current { border-color: color-mix(in srgb, var(--accent) 34%, var(--line)); background: var(--accent-soft); color: var(--accent-dark); }
.skill-guide-sync.outdated,.skill-guide-sync.error { border-color: color-mix(in srgb, var(--red) 36%, var(--line)); background: var(--red-soft); color: var(--red); }
.skill-guide-sync.checking { background: var(--surface-soft); }
.designer-stage-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: -2px 0 20px; }
.designer-stage-strip span { padding: 9px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); color: var(--muted); font-size: 8px; font-weight: 750; text-align: center; }
.designer-stage-strip span.active { border-color: #b9a8ff; background: var(--accent-soft); color: var(--accent); }
.design-catalog-status { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); color: var(--muted); font-size: 9px; line-height: 1.5; }
.design-catalog-status.error { border-color: color-mix(in srgb, var(--red) 38%, var(--line)); background: var(--red-soft); color: var(--red); }
.design-catalog-status .ghost { flex: none; padding: 7px 10px; font-size: 8px; }
.group-name-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 10px 0 18px; }
.marker-expression-grid { display: grid; grid-template-columns: repeat(var(--marker-columns, 1), minmax(190px, 240px)); width: fit-content; max-width: 100%; gap: 9px; margin: 10px 0 18px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.marker-expression-grid .field-help { grid-column: 1 / -1; }
.marker-expression-grid .field-help strong,.marker-expression-grid .field-help span { display: block; }
.marker-expression-grid .field-help span { margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.5; }
.marker-expression-grid label { grid-template-columns: minmax(90px, .7fr) 1fr; align-items: center; }
.marker-expression-grid label > span { font-size: 9px; font-weight: 750; }
.panel-draft { display: grid; gap: 14px; min-width: 0; }
.panel-draft-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px; border-radius: 14px; background: linear-gradient(135deg, #30215c, #6246c7); color: white; }
.panel-draft-head h2 { margin: 5px 0 7px; font-size: 22px; }
.panel-draft-head p { margin: 0; color: rgba(255,255,255,.68); font-size: 9px; }
.panel-skill-note { padding: 16px 18px; border-color: #cbbfff; background: linear-gradient(135deg, #f4f0ff, #fbfaff); }
.panel-skill-note strong { color: var(--accent); font-size: 11px; }
.panel-skill-note p { margin: 6px 0 0; color: var(--muted); font-size: 9px; line-height: 1.65; }
.panel-editor-list { display: grid; }
.panel-editor-row { display: grid; grid-template-columns: minmax(100px, .55fr) minmax(240px, 1.4fr); gap: 12px 16px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.panel-editor-row:last-child { border-bottom: 0; }
.panel-marker strong,.panel-marker small { display: block; }
.panel-marker strong { font-size: 12px; }
.panel-marker small { margin-top: 5px; color: var(--muted); font-size: 8px; }
.panel-option-detail { grid-column: 2; display: grid; grid-template-columns: auto minmax(0,1fr); align-items: start; gap: 9px; }
.panel-option-detail p { margin: 1px 0 0; color: var(--muted); font-size: 8px; line-height: 1.55; }
.external-antibody-search { grid-column: 1 / -1; padding: 11px 12px; border: 1px solid color-mix(in srgb,var(--amber) 45%,var(--line)); border-radius: 9px; background: var(--amber-soft); }
.external-antibody-search strong,.external-antibody-search small,.external-antibody-search em { display: block; }
.external-antibody-search strong { color: var(--amber); font-size: 9px; }
.external-antibody-search small { margin-top: 3px; color: var(--muted); font-size: 7px; overflow-wrap: anywhere; }
.external-antibody-search > div { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.external-antibody-search a { padding: 7px 9px; border: 1px solid color-mix(in srgb,var(--amber) 40%,var(--line)); border-radius: 7px; background: var(--surface); color: var(--accent-dark); font-size: 8px; font-weight: 700; text-decoration: none; }
.external-antibody-search em { margin-top: 8px; color: var(--muted); font-size: 7px; font-style: normal; line-height: 1.5; }
.plan-external-grid { display: grid; gap: 9px; padding: 14px 18px 5px; }
.plan-external-grid article { display: grid; grid-template-columns: minmax(170px,.65fr) minmax(200px,1fr) auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid color-mix(in srgb,var(--amber) 40%,var(--line)); border-radius: 9px; background: var(--amber-soft); }
.plan-external-grid article strong,.plan-external-grid article small { display: block; }
.plan-external-grid article strong { margin-top: 6px; font-size: 10px; }
.plan-external-grid article small { margin-top: 3px; color: var(--muted); font-size: 7px; overflow-wrap: anywhere; }
.plan-external-grid article p { margin: 0; color: var(--muted); font-size: 8px; line-height: 1.55; }
.plan-external-grid article > div:last-child { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.plan-external-grid article a { padding: 7px 9px; border: 1px solid color-mix(in srgb,var(--amber) 40%,var(--line)); border-radius: 7px; background: var(--surface); color: var(--accent-dark); font-size: 8px; font-weight: 700; text-decoration: none; }
.panel-risk-list { display: grid; gap: 9px; padding: 14px 18px 18px; }
.panel-risk-list article { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); }
.panel-risk-list article > span { grid-row: 1 / span 2; align-self: start; padding: 4px 7px; border-radius: 99px; font-size: 7px; font-weight: 800; }
.panel-risk-list article strong { font-size: 10px; }
.panel-risk-list article small { color: var(--muted); font-size: 8px; }
.panel-risk-list article p,.panel-risk-list article em { grid-column: 2; margin: 3px 0 0; font-size: 8px; line-height: 1.5; }
.panel-risk-list article p { color: var(--muted); }
.panel-risk-list article em { color: var(--ink); font-style: normal; font-weight: 700; }
.panel-risk-list .risk-infeasible { border-color: #ef9da6; background: #fff2f3; }
.panel-risk-list .risk-infeasible > span,.panel-risk-list .risk-high > span { background: #ffe1e4; color: #a63545; }
.panel-risk-list .risk-high { border-color: #efb0b7; }
.panel-risk-list .risk-medium > span { background: var(--amber-soft); color: var(--amber); }
.panel-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 2px 0 18px; }
.table-subline { display: block; margin-top: 4px; color: var(--muted); font-size: 7px; }
.form-card { padding: 24px; }
.form-section-title { display: flex; align-items: center; gap: 11px; margin: 4px 0 17px; }
.form-section-title:not(:first-child) { margin-top: 27px; padding-top: 23px; border-top: 1px solid var(--line); }
.form-section-title > span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); font-size: 10px; font-weight: 800; }
.form-section-title strong, .form-section-title small { display: block; }
.form-section-title strong { font-size: 13px; }
.form-section-title small { margin-top: 3px; color: var(--muted); font-size: 9px; }
label { display: grid; gap: 7px; margin-top: 14px; color: var(--ink); font-size: 11px; font-weight: 650; }
label > small { color: var(--muted); font-size: 9px; font-weight: 400; }
.design-field { position: relative; display: grid; gap: 7px; margin-top: 14px; min-width: 0; }
.design-field > strong { font-size: 11px; }
.design-field-help { min-height: 30px; margin: 0; color: var(--muted); font-size: 9px; font-weight: 400; line-height: 1.65; }
.multi-select-picker { position: relative; min-width: 0; }
.multi-select-trigger { width: 100%; min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface-soft); color: var(--muted); cursor: pointer; font: inherit; font-size: 11px; font-weight: 650; line-height: 1.35; text-align: left; }
.multi-select-trigger span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.multi-select-trigger i { flex: none; font-size: 16px; font-style: normal; transition: transform .18s ease; }
.multi-select-trigger[aria-expanded="true"] { border-color: var(--accent); background: var(--surface-raised); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.multi-select-trigger[aria-expanded="true"] i { transform: rotate(180deg); }
.multi-select-picker.has-selection .multi-select-trigger { color: var(--ink); }
.multi-select-menu { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); max-height: 260px; overflow-y: auto; padding: 7px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface-raised); box-shadow: var(--shadow); }
.multi-select-option { display: flex; grid-template-columns: none; align-items: center; gap: 9px; margin: 0; padding: 9px 10px; border-radius: 7px; cursor: pointer; font-size: 10px; font-weight: 550; }
.multi-select-option:hover { background: var(--accent-soft); }
.multi-select-option input { flex: none; width: 16px; min-height: 16px; margin: 0; accent-color: var(--accent); }
.multi-select-empty { padding: 14px; color: var(--muted); font-size: 9px; text-align: center; }
input, select, textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface-soft); color: var(--ink); }
input, select { min-height: 42px; padding: 0 11px; }
textarea { min-height: 84px; padding: 10px 11px; resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .72; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); background: var(--surface-raised); }
.form-grid { display: grid; gap: 13px; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.check-row { grid-template-columns: auto 1fr; align-items: center; gap: 10px; margin: 20px 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); cursor: pointer; }
.check-row input { width: 17px; min-height: 17px; accent-color: var(--accent); }
.check-row strong, .check-row small { display: block; }
.check-row small { margin-top: 3px; color: var(--muted); font-weight: 400; }
.form-foot { margin: 11px 0 0; color: var(--muted); font-size: 9px; text-align: center; }
.result-placeholder { min-height: 520px; display: grid; place-content: center; justify-items: center; padding: 40px; border: 1px dashed var(--line-strong); border-radius: 14px; color: var(--muted); text-align: center; }
.placeholder-mark { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: var(--accent-soft); color: var(--accent); font-size: 24px; }
.result-placeholder h3 { margin: 18px 0 6px; color: var(--ink); font-size: 17px; }
.result-placeholder p { max-width: 420px; margin: 0; font-size: 11px; line-height: 1.7; }
.plan { display: grid; gap: 14px; }
.plan-head { padding: 22px; border-radius: 14px; background: linear-gradient(135deg, var(--hero-start), var(--hero-mid)); color: white; }
.plan-head-top { display: flex; justify-content: space-between; gap: 16px; }
.plan-head h2 { margin: 4px 0 6px; font-size: 22px; }
.plan-head p { margin: 0; color: rgba(255,255,255,.64); font-size: 10px; }
.plan-tools { display: flex; gap: 7px; margin-top: 18px; }
.plan-tools button { padding: 7px 10px; border: 1px solid rgba(255,255,255,.2); border-radius: 7px; background: rgba(255,255,255,.08); color: white; cursor: pointer; font-size: 9px; }
.plan-section { overflow: hidden; }
.plan-section-title { display: flex; align-items: center; justify-content: space-between; padding: 15px 17px; border-bottom: 1px solid var(--line); }
.plan-section-title strong { font-size: 12px; }
.plan-section-title small { color: var(--muted); font-size: 9px; }
.control-list, .gate-list, .warning-list { margin: 0; padding: 4px 18px 14px; list-style: none; }
.control-list li { display: grid; grid-template-columns: minmax(120px,.45fr) 1fr auto; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 10px; }
.control-list li:last-child { border: 0; }
.control-list span:nth-child(2) { color: var(--muted); }
.gate-list { counter-reset: gates; padding-top: 10px; }
.gate-list li { position: relative; padding: 7px 4px 7px 31px; color: var(--ink); font-size: 10px; line-height: 1.55; counter-increment: gates; }
.gate-list li::before { content: counter(gates); position: absolute; left: 0; top: 5px; display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 8px; font-weight: 800; }
.warning-list { padding-top: 8px; }
.warning-list li { margin: 7px 0; padding: 9px 11px; border-left: 3px solid #e1a146; background: var(--amber-soft); color: #765c37; font-size: 9px; line-height: 1.5; }
.notice-list { margin: 0; padding: 12px 16px; list-style: none; }
.notice-list li { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: start; gap: 10px; padding: 10px 12px; border-left: 3px solid var(--success); background: var(--success-soft); color: var(--ink); font-size: 9px; line-height: 1.55; }
.notice-list strong { color: var(--success); white-space: nowrap; }
.notice-list span { overflow-wrap: anywhere; }
.evidence-links { padding: 12px 18px 16px; }
.evidence-links a { display: flex; flex-direction: column; gap: 3px; padding: 6px 0; color: var(--accent); font-size: 10px; text-decoration: none; }
.evidence-links a:hover { text-decoration: underline; }
.evidence-links a small { color: var(--muted); font-size: 7px; font-weight: 500; }
.button-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.designer-head-actions { display: flex; align-items: center; gap: 10px; }
.assistant-disclaimer { align-self: end; margin-top: 28px !important; color: var(--muted) !important; font-size: 9px !important; text-align: center; }
.plan-disclaimer { margin: 14px; padding: 16px 18px; border-color: var(--line-strong); background: var(--amber-soft); color: var(--ink); }
.plan-disclaimer > strong { display: block; margin-bottom: 5px; color: var(--amber); font-size: 12px; }
.plan-disclaimer p { margin: 0 0 12px; color: var(--muted); font-size: 9px; line-height: 1.6; }
.plan-disclaimer label { display: flex; align-items: flex-start; gap: 9px; font-size: 9px; font-weight: 700; line-height: 1.45; }
.plan-disclaimer input { width: 17px; height: 17px; margin-top: 1px; accent-color: var(--accent); }
.plan-disclaimer small { display: block; margin: 8px 0 0 26px; color: var(--muted); font-size: 8px; }
.plan-purpose { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 18px 18px; }
.plan-purpose p { margin: 0; padding: 12px; border-radius: 9px; background: var(--surface-soft); color: var(--muted); font-size: 9px; line-height: 1.5; }
.plan-purpose b { display: block; margin-bottom: 5px; color: var(--ink); }
.template-match-banner { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 12px; margin: 14px 18px 0; padding: 13px 14px; border: 1px solid color-mix(in srgb,var(--success) 45%,var(--line)); border-radius: 10px; background: var(--success-soft); }
.template-match-banner > span { align-self: start; padding: 5px 8px; border-radius: 99px; background: var(--success); color: white; font-size: 7px; font-weight: 800; white-space: nowrap; }
.template-match-banner strong { display: block; font-size: 11px; }
.template-match-banner p { margin: 4px 0 0; color: var(--muted); font-size: 8px; line-height: 1.55; }
.plan-template-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; padding: 12px 18px 16px; }
.plan-template-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px 12px; padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.plan-template-card > div { min-width: 0; }
.plan-template-card > div strong,.plan-template-card > div small { display: block; }
.plan-template-card > div strong { margin-top: 7px; font-size: 11px; }
.plan-template-card > div small { margin-top: 3px; overflow-wrap: anywhere; color: var(--muted); font-size: 7px; }
.plan-template-card p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 8px; line-height: 1.55; }
.plan-template-card em { grid-column: 1 / -1; color: var(--amber); font-size: 7px; font-style: normal; }
.plan-template-card > a { grid-column: 2; grid-row: 1; align-self: center; min-width: 86px; padding: 8px 10px; border-radius: 7px; background: var(--accent); color: white; font-size: 8px; }
.gate-list li > strong,.gate-list li > span,.gate-list li > small { display: block; }
.gate-list li > span { margin-top: 3px; color: var(--accent-dark); font-weight: 700; }
.gate-list li > small { margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.5; }
.evidence-query { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 6px 10px; margin: 0 18px 12px; padding: 10px 12px; border-radius: 9px; background: var(--surface-soft); color: var(--muted); font-size: 8px; }
.evidence-query code { min-width: 0; overflow-wrap: anywhere; color: var(--ink); }
.evidence-query span { grid-column: 2; }
.design-reference-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.design-reference-head strong { font-size: 11px; }
.design-reference-head small { color: var(--muted); font-size: 8px; }
.experiment-plan-history { margin-top: 18px; padding: 24px; }
.experiment-plan-history .card-head p { max-width: 720px; margin: 5px 0 0; color: var(--muted); font-size: 9px; }
.experiment-plan-history-list { display: grid; gap: 10px; margin-top: 14px; }
.experiment-plan-history-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.experiment-plan-history-item h4 { margin: 6px 0 4px; }
.experiment-plan-history-item p { margin: 0; color: var(--muted); font-size: 8px; }
.backend-version-blocker { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 24px; background: rgba(28,24,43,.78); backdrop-filter: blur(10px); }
.backend-version-blocker[hidden] { display: none; }
.backend-version-blocker > div { width: min(620px,100%); padding: 32px; border: 1px solid var(--line-strong); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.backend-version-blocker h2 { margin: 8px 0 10px; }
.backend-version-blocker p,.backend-version-blocker li { color: var(--muted); font-size: 10px; line-height: 1.65; }
.backend-version-blocker ol { margin: 16px 0; padding-left: 22px; }
.backend-launch-command { display: block; margin-top: 8px; padding: 9px 11px; overflow-wrap: anywhere; border-radius: 7px; background: var(--surface-soft); color: var(--ink); user-select: all; }
.backend-version-blocker button { width: 100%; }
.evidence-search-status { display: flex; align-items: flex-start; gap: 10px; margin: 12px 18px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); }
.evidence-search-status strong { flex: 0 0 auto; color: var(--muted); font-size: 9px; }
.evidence-search-status span { color: var(--muted); font-size: 8px; line-height: 1.5; }
.evidence-search-status.completed { border-color: color-mix(in srgb,var(--success) 45%,var(--line)); background: var(--success-soft); }
.evidence-search-status.completed strong { color: var(--success); }
.evidence-search-status.unavailable { border-color: color-mix(in srgb,var(--amber) 45%,var(--line)); background: var(--amber-soft); }
.evidence-search-status.unavailable strong { color: var(--amber); }
.viability-recommendations { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; padding: 14px 18px 4px; }
.viability-option { padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.viability-option > div { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 8px; }
.viability-option > div span { grid-row: 1 / span 2; align-self: start; padding: 4px 7px; border-radius: 99px; background: var(--surface-soft); color: var(--muted); font-size: 7px; font-weight: 800; }
.viability-option.recommended { border-color: color-mix(in srgb,var(--success) 42%,var(--line)); background: color-mix(in srgb,var(--success-soft) 55%,var(--surface)); }
.viability-option.recommended > div span { background: var(--success-soft); color: var(--success); }
.viability-option.channel_conflict { opacity: .68; }
.viability-option.channel_conflict > div span { background: var(--red-soft); color: var(--red); }
.viability-option strong { font-size: 10px; }
.viability-option small { color: var(--muted); font-size: 8px; }
.viability-option p { margin: 9px 0; color: var(--muted); font-size: 8px; line-height: 1.5; }
.viability-option a { color: var(--accent); font-size: 8px; text-decoration: none; }
.plan-section > .source-note { margin: 0; padding: 12px 18px 16px; border-top: 1px solid var(--line); line-height: 1.65; }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 8px; padding: 12px; }
.reagent-toolbar {
  display: grid;
  grid-template-columns: minmax(180px, 1.6fr) repeat(7, minmax(82px, 1fr)) auto;
  gap: 6px;
  overflow-x: auto;
  align-items: center;
  padding: 10px;
}
.reagent-toolbar .search-field { min-width: 180px; }
.toolbar.reagent-toolbar select {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 0 7px;
  font-size: 10px;
}
.reagent-toolbar .search-field input { min-height: 36px; padding: 0 7px 0 2px; font-size: 10px; }
.reagent-toolbar .search-field span { font-size: 14px; }
.reagent-toolbar .toolbar-count { margin-left: 0; }
.toolbar .search-field { flex: 1; grid-template-columns: auto 1fr; align-items: center; gap: 7px; margin: 0; padding-left: 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); }
.toolbar .search-field span { color: var(--muted); font-size: 17px; }
.toolbar .search-field input { min-width: 0; border: 0; background: transparent; outline: 0; }
.toolbar select { width: auto; min-width: 126px; }
.toolbar-count { margin-left: auto; padding-right: 7px; color: var(--muted); font-size: 10px; white-space: nowrap; }
.filter-summary { margin: 0 2px 12px; color: var(--muted); font-size: 9px; }
.spectra-viewer { margin-bottom: 14px; padding: 18px; }
.template-upload-note.error { color: var(--red); font-weight: 650; }
.template-upload-note.valid { color: var(--success); }
.spectra-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.spectra-head h2 { margin: 5px 0 4px; font-size: 17px; }
.spectra-head p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.spectra-head > a { flex-shrink: 0; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--accent-dark); font-size: 8px; font-weight: 700; text-decoration: none; }
.spectra-head > a:hover { border-color: var(--accent); background: var(--accent-soft); }
.spectra-controls { display: grid; grid-template-columns: minmax(190px, 1.2fr) minmax(160px, 1fr) auto auto repeat(3, auto); align-items: end; gap: 7px; margin-top: 15px; padding: 11px; border-radius: 10px; background: var(--surface-soft); }
.spectra-controls > label:not(.spectra-check) { display: grid; gap: 5px; color: var(--muted); font-size: 8px; font-weight: 700; }
.spectra-controls select { width: 100%; min-height: 35px; padding: 0 9px; font-size: 9px; }
.spectra-controls > button { min-height: 35px; padding: 0 11px; font-size: 8px; white-space: nowrap; }
.spectra-check { min-height: 35px; display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 8px; white-space: nowrap; }
.spectra-check input { width: 14px; height: 14px; accent-color: var(--accent); }
.spectra-selected { display: flex; flex-wrap: wrap; gap: 7px; margin: 11px 0; }
.spectra-selected > button { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; align-items: center; gap: 7px; min-width: 150px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); cursor: pointer; text-align: left; }
.spectra-selected > button:hover { border-color: var(--spectrum-color); }
.spectra-selected > button > i { width: 9px; height: 30px; border-radius: 5px; background: var(--spectrum-color); box-shadow: 0 0 10px color-mix(in srgb, var(--spectrum-color) 40%, transparent); }
.spectra-selected strong, .spectra-selected small { display: block; }
.spectra-selected strong { font-size: 9px; }
.spectra-selected small { margin-top: 2px; color: var(--muted); font-size: 7px; }
.spectra-selected b { color: var(--muted); font-size: 13px; font-weight: 500; }
.spectra-empty { width: 100%; padding: 10px; border: 1px dashed var(--line-strong); border-radius: 8px; color: var(--muted); font-size: 8px; text-align: center; }
.spectra-chart-shell { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
#spectra-canvas { display: block; width: 100%; height: 360px; }
.spectra-line-key { position: absolute; right: 12px; bottom: 9px; display: flex; gap: 9px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 7px; background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--muted); font-size: 7px; }
.spectra-line-key span { display: inline-flex; align-items: center; gap: 4px; }
.spectra-line-key i { width: 18px; border-top: 2px solid var(--accent); }
.spectra-line-key i.dashed { border-top-style: dashed; }
.spectra-line-key b { width: 2px; height: 11px; background: #ef4e73; }
.spectra-line-key em { width: 15px; height: 9px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.spectra-assessment { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 7px; margin-top: 10px; }
.spectra-alert { padding: 9px 10px; border-left: 3px solid var(--line-strong); border-radius: 7px; background: var(--surface-soft); }
.spectra-alert strong, .spectra-alert span { display: block; }
.spectra-alert strong { font-size: 8px; }
.spectra-alert span { margin-top: 3px; color: var(--muted); font-size: 7px; line-height: 1.45; }
.spectra-alert.ok { border-color: var(--success); background: var(--success-soft); }
.spectra-alert.notice { border-color: var(--secondary); }
.spectra-alert.warn { border-color: var(--amber); background: var(--amber-soft); }
.spectra-alert.danger { border-color: var(--red); background: var(--red-soft); }
.spectra-disclaimer { margin: 10px 2px 0; color: var(--muted); font-size: 7px; line-height: 1.55; }
.spectra-source-links { margin: 3px 2px 0; color: var(--muted); font-size: 7px; line-height: 1.5; }
.spectra-source-links a { color: var(--accent); font-weight: 700; text-decoration: none; }
.spectra-source-links a:hover { text-decoration: underline; }
.table-card { overflow: hidden; }
.table-wrap { width: 100%; overflow-x: auto; }
.table-card .table-wrap { overflow-x: hidden; }
.reagent-table { width: 100%; min-width: 0; table-layout: fixed; }
.reagent-table th, .reagent-table td { padding: 11px clamp(6px, .72vw, 13px); overflow-wrap: anywhere; word-break: normal; }
.reagent-table th { white-space: normal; line-height: 1.25; }
.reagent-table th:nth-child(1) { width: 14%; }
.reagent-table th:nth-child(2) { width: 9%; }
.reagent-table th:nth-child(3) { width: 8%; }
.reagent-table th:nth-child(4) { width: 15%; }
.reagent-table th:nth-child(5) { width: 9%; }
.reagent-table th:nth-child(6) { width: 8%; }
.reagent-table th:nth-child(7) { width: 17%; }
.reagent-table th:nth-child(8) { width: 9%; }
.reagent-table th:nth-child(9) { width: 11%; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { background: var(--surface-soft); color: #78847f; font-size: 9px; font-weight: 700; letter-spacing: .03em; white-space: nowrap; }
td { color: #485650; font-size: 10px; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #fbfcfb; }
td strong { display: block; color: var(--ink); font-size: 11px; }
td small { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; }
.official-link { display: inline-block; margin-top: 5px; color: var(--accent); font-size: 8px; text-decoration: none; }
.official-link:hover { text-decoration: underline; }
.table-edit-button { padding: 6px 9px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); color: var(--accent-dark); cursor: pointer; font-size: 8px; font-weight: 700; white-space: nowrap; }
.table-edit-button:hover { border-color: var(--accent); background: var(--accent-soft); }
.record-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.record-delete-button { min-height: 30px; padding: 5px 9px; border: 1px solid color-mix(in srgb, var(--red) 42%, var(--line)); border-radius: 7px; background: var(--surface); color: var(--red); cursor: pointer; font-size: 8px; font-weight: 700; white-space: nowrap; }
.record-delete-button:hover { border-color: var(--red); background: var(--red-soft); }
.template-match-list { display: grid; gap: 2px; min-width: 0; }
.template-match-list button { min-height: 0; padding: 4px 8px; border: 1px solid #d9cff4; border-radius: 7px; background: var(--accent-soft); color: var(--accent-dark); cursor: pointer; text-align: left; line-height: 1.15; }
.template-match-list button:hover { border-color: var(--accent); }
.template-match-list button strong, .template-match-list button small { display: block; }
.template-match-list button strong { font-size: 8px; line-height: 1.15; }
.template-match-list button small { margin-top: 1px; color: var(--muted); font-size: 7px; line-height: 1.1; }
.no-match { color: #9aa29f; font-size: 8px; }
.mono { font-family: "Cascadia Code", Consolas, monospace; }
.review-tag { display: inline-flex; padding: 4px 7px; border-radius: 99px; background: var(--amber-soft); color: var(--amber); font-size: 8px; white-space: nowrap; }
.review-tag.verified { background: var(--accent-soft); color: var(--accent); }
.review-tag.rejected { background: #fdecec; color: #b33b48; }
.review-tag.archived { background: #ecebf0; color: #625d6c; }

.template-view-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0; }
.template-type-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.template-type-tab { padding: 8px 13px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--muted); font-size: 9px; font-weight: 700; cursor: pointer; }
.template-type-tab.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); }
.template-layout-toggle { display: flex; flex: none; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.template-layout-toggle button { padding: 6px 9px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; font-size: 8px; font-weight: 700; }
.template-layout-toggle button.active { background: var(--accent-soft); color: var(--accent-dark); }

.instrument-resources { margin-top: 17px; padding-top: 17px; border-top: 1px solid var(--line); }
.resource-grid { display: grid; gap: 8px; margin-top: 12px; }
.resource-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-width: 0; padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.resource-item > span { display: grid; place-items: center; width: 64px; min-height: 44px; padding: 5px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-dark); font-size: 8px; font-weight: 800; line-height: 1.2; text-align: center; }
.resource-item > div { min-width: 0; }
.resource-item strong, .resource-item small { display: block; }
.resource-item strong { font-size: 10px; line-height: 1.35; overflow-wrap: anywhere; }
.resource-item small { margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.resource-actions { display: flex; gap: 6px; }
.resource-actions a { padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--accent-dark); font-size: 8px; font-weight: 700; text-decoration: none; }
.resource-actions em { color: var(--muted); font-size: 8px; }

.admin-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.admin-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .8fr); gap: 14px; }
.admin-panel { padding: 18px; }
.admin-panel h2 { margin: 5px 0 14px; font-size: 16px; }
.admin-review-actions { display: flex; gap: 7px; }
.admin-panel-note { margin: -6px 0 13px; color: var(--muted); font-size: 8px; line-height: 1.55; }
.review-queue, .user-list, .audit-list { display: grid; gap: 8px; }
.review-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.review-item > div:first-child { min-width: 0; }
.review-item span, .review-item strong, .review-item small, .review-item em { display: block; }
.review-item span { color: var(--accent); font-size: 8px; font-weight: 800; }
.review-item strong { margin-top: 3px; font-size: 10px; }
.review-item small, .review-item em { margin-top: 3px; color: var(--muted); font-size: 8px; overflow-wrap: anywhere; }
.review-item > div:last-child { display: flex; flex-shrink: 0; gap: 6px; }
.compact-form { display: grid; gap: 9px; }
.compact-form label { font-size: 9px; font-weight: 700; }
.user-list, .audit-list { margin-top: 14px; max-height: 260px; overflow: auto; }
.user-list > div, .audit-list > div { padding: 9px 0; border-bottom: 1px solid var(--line); }
.user-list strong, .user-list span, .audit-list strong, .audit-list span { display: block; }
.user-list strong, .audit-list strong { font-size: 9px; }
.user-list span, .audit-list span { margin-top: 3px; color: var(--muted); font-size: 8px; }
.export-button { display: inline-flex; margin-top: 14px; padding: 9px 12px; border-radius: 8px; background: var(--accent); color: white; font-size: 9px; font-weight: 800; text-decoration: none; }
.admin-review-history { display: grid; gap: 14px; margin-top: 18px; }
.admin-review-history[hidden] { display: none; }
.review-history-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.review-history-head .text-link { display: block; margin: 0 0 18px; }
.review-history-head .section-kicker { display: block; }
.review-history-head h2 { margin: 5px 0 7px; font-size: 24px; }
.review-history-head p { max-width: 760px; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.6; }
.review-history-toolbar { display: grid; grid-template-columns: minmax(240px,1fr) minmax(150px,.3fr) minmax(150px,.3fr) auto; align-items: end; gap: 10px; padding: 14px; }
.review-history-toolbar label { display: grid; gap: 5px; min-width: 0; color: var(--muted); font-size: 8px; font-weight: 700; }
.review-history-toolbar input, .review-history-toolbar select { min-width: 0; }
.review-history-toolbar > strong { padding: 12px 2px; color: var(--accent-dark); font-size: 9px; white-space: nowrap; }
.review-history-list { display: grid; gap: 9px; }
.review-history-item { display: grid; grid-template-columns: minmax(220px,1.2fr) minmax(300px,1fr) minmax(220px,.75fr); align-items: center; gap: 18px; padding: 15px 17px; }
.review-history-meta { display: flex; align-items: center; gap: 7px; }
.review-history-meta > span:first-child { color: var(--accent); font-size: 8px; font-weight: 800; }
.review-history-main h3 { margin: 6px 0 3px; font-size: 12px; }
.review-history-main p, .review-history-note p { margin: 0; color: var(--muted); font-size: 8px; line-height: 1.5; overflow-wrap: anywhere; }
.review-history-audit { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.review-history-audit span { color: var(--muted); font-size: 7px; }
.review-history-audit strong { display: block; margin-top: 4px; color: var(--ink); font-size: 8px; overflow-wrap: anywhere; }
.review-history-note { min-width: 0; padding-left: 16px; border-left: 1px solid var(--line); }
.review-history-note > span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 7px; font-weight: 700; }
.output-card { padding: 18px; border-color: #cfc3ff; background: linear-gradient(145deg, #fff, var(--accent-soft)); }
.output-card h3 { margin: 5px 0 10px; }
.output-card code { display: block; padding: 10px; border-radius: 8px; background: #241a3c; color: #efeaff; overflow-wrap: anywhere; }
.output-card p { margin: 10px 0 0; color: var(--muted); font-size: 9px; line-height: 1.6; }
.instrument-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px; }
.instrument-card { padding: 22px; }
.instrument-top { display: flex; justify-content: space-between; gap: 16px; }
.instrument-name h2 { margin: 5px 0 3px; font-size: 22px; }
.instrument-name p { margin: 0; color: var(--muted); font-size: 10px; }
.instrument-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 20px 0; }
.instrument-meta div { padding: 10px; border-radius: 9px; background: var(--surface-soft); }
.instrument-meta small, .instrument-meta strong { display: block; }
.instrument-meta small { color: var(--muted); font-size: 8px; }
.instrument-meta strong { margin-top: 4px; font-size: 10px; }
.detector-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 7px; }
.detector { padding: 9px; border: 1px solid var(--line); border-radius: 8px; }
.detector strong, .detector small { display: block; }
.detector strong { color: var(--accent); font-family: "Cascadia Code", Consolas, monospace; font-size: 10px; }
.detector small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.laser-row { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.laser-row span { padding: 7px 9px; border-radius: 8px; background: var(--accent-soft); color: var(--muted); font-size: 8px; }
.laser-row strong { margin-right: 5px; color: var(--accent-dark); }
.instrument-details { display: grid; grid-template-columns: .5fr 1fr 1.5fr; gap: 8px; margin-top: 12px; }
.instrument-details span { padding: 9px; border-radius: 8px; background: var(--surface-soft); color: var(--muted); font-size: 8px; line-height: 1.5; }
.instrument-details strong { display: block; margin-bottom: 3px; color: var(--ink); }
.instrument-learning { margin-top: 18px; padding-top: 17px; border-top: 1px solid var(--line); }
.instrument-learning-head { display: flex; align-items: end; justify-content: space-between; gap: 15px; margin-bottom: 10px; }
.instrument-learning-head h3 { margin: 5px 0 0; font-size: 14px; }
.instrument-learning-head > small { color: var(--muted); font-size: 8px; }
.instrument-tutorials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.instrument-tutorials button { position: relative; min-height: 118px; padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); color: inherit; cursor: pointer; text-align: left; transition: border-color .18s, transform .18s; }
.instrument-tutorials button:hover { transform: translateY(-1px); border-color: #c7b8ed; }
.instrument-tutorials button > span { float: right; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 8px; }
.instrument-tutorials strong, .instrument-tutorials small, .instrument-tutorials em { display: block; }
.instrument-tutorials strong { margin-bottom: 6px; font-size: 11px; }
.instrument-tutorials small { max-width: calc(100% - 20px); color: var(--muted); font-size: 8px; line-height: 1.5; }
.instrument-tutorials em { position: absolute; left: 13px; bottom: 11px; color: var(--accent); font-size: 7px; font-style: normal; font-weight: 700; }
.source-note { margin: 17px 0 0; color: var(--muted); font-size: 8px; line-height: 1.5; }
.template-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.template-card { display: flex; flex-direction: column; padding: 20px; }
.template-top { display: flex; justify-content: space-between; gap: 15px; }
.template-format { display: grid; place-items: center; width: 48px; height: 54px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-size: 9px; font-weight: 800; }
.template-card h3 { margin: 15px 0 5px; font-size: 16px; }
.template-card .cell-type { min-height: 30px; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.template-provider { display: flex; align-items: baseline; gap: 6px; margin: 8px 0 0; color: var(--muted); }
.template-provider small { font-size: 7px; }
.template-provider strong { color: var(--ink); font-size: 9px; }
.panel-line { margin: 15px 0 0; padding: 11px; border-radius: 9px; background: var(--surface-soft); color: #40504a; font-size: 9px; line-height: 1.5; }
.matched-products { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; }
.matched-products > strong { width: 100%; color: var(--ink); font-size: 8px; }
.matched-products > span { padding: 4px 6px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-dark); font-size: 7px; }
.matched-products > small { width: 100%; color: var(--muted); font-size: 7px; line-height: 1.45; }
.template-description { flex: 1; margin: 0 0 15px; color: var(--muted); font-size: 9px; line-height: 1.55; }
.template-actions { display: flex; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.template-actions a { flex: 1; padding: 10px; border-radius: 8px; background: var(--accent); color: white; font-size: 10px; font-weight: 650; text-align: center; text-decoration: none; }
.template-actions a.disabled { pointer-events: none; background: #dfe5e2; color: #89948f; }
.template-actions button { flex: none; min-height: 36px; padding: 0 12px; }
.template-actions .record-delete-button { min-height: 36px; }
.pending-edit-notice { flex: none; padding: 8px 10px; border-radius: 7px; background: var(--amber-soft); color: var(--amber); font-size: 8px; font-weight: 700; white-space: nowrap; }

.template-grid.list-view { grid-template-columns: 1fr; gap: 8px; }
.template-grid.list-view .template-card { display: grid; grid-template-columns: 58px minmax(160px, .7fr) minmax(190px, 1fr) minmax(180px, 1.15fr) auto; grid-template-areas: "top title panel products actions"; align-items: center; gap: 11px; padding: 12px 14px; }
.template-grid.list-view .template-top { grid-area: top; display: block; }
.template-grid.list-view .template-format { width: 42px; height: 42px; }
.template-grid.list-view .template-top .review-tag { margin-top: 5px; padding: 3px 5px; font-size: 6px; }
.template-grid.list-view .template-title-block { grid-area: title; min-width: 0; }
.template-grid.list-view .template-title-block h3 { overflow: hidden; margin: 0 0 3px; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.template-grid.list-view .cell-type { min-height: 0; font-size: 8px; }
.template-grid.list-view .template-provider { margin-top: 4px; }
.template-grid.list-view .panel-line { grid-area: panel; min-width: 0; margin: 0; padding: 9px; }
.template-grid.list-view .matched-products { grid-area: products; min-width: 0; max-height: 76px; overflow: auto; margin: 0; padding: 8px; }
.template-grid.list-view .template-description { display: none; }
.template-grid.list-view .template-actions { grid-area: actions; align-items: stretch; flex-direction: column; min-width: 112px; padding: 0; border: 0; }
.template-grid.list-view .template-actions a { flex: none; padding: 8px; font-size: 8px; }
.template-grid.list-view .template-actions button { min-height: 30px; padding: 0 9px; font-size: 8px; }
.template-grid.list-view .pending-edit-notice { max-width: 140px; white-space: normal; text-align: center; }

.knowledge-search { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 12px 13px 12px 16px; }
.knowledge-search > span { color: var(--muted); font-size: 21px; }
.knowledge-search input { border: 0; outline: 0; background: transparent; }
.topic-pills { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0; }
.topic-pills button { padding: 6px 10px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--muted); cursor: pointer; font-size: 9px; }
.topic-pills button.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.knowledge-list { display: grid; gap: 11px; }
.knowledge-ai { overflow: hidden; margin-bottom: 22px; padding: 20px; }
.knowledge-ai-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.knowledge-ai-head h2 { margin: 5px 0 5px; font-size: 18px; }
.knowledge-ai-head p { max-width: 760px; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.6; }
.knowledge-chat { display: grid; gap: 10px; max-height: 560px; overflow-y: auto; margin: 17px 0 11px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); scroll-behavior: smooth; }
.chat-message { max-width: min(860px, 92%); padding: 12px 14px; border: 1px solid var(--line); border-radius: 4px 12px 12px; background: var(--surface); }
.chat-message.user { justify-self: end; border-color: var(--accent); border-radius: 12px 4px 12px 12px; background: var(--accent-soft); }
.chat-message > span { color: var(--accent); font-size: 7px; font-weight: 800; letter-spacing: .06em; }
.chat-message > p { margin: 6px 0 0; color: var(--ink); font-size: 10px; line-height: 1.75; white-space: pre-wrap; }
.chat-message.loading { opacity: .75; }
.chat-message.error { border-color: color-mix(in srgb, var(--red) 45%, var(--line)); }
.chat-message.error > p { color: var(--red); }
.knowledge-ai-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; }
.knowledge-ai-form textarea { min-height: 62px; resize: vertical; }
.knowledge-ai-form button { align-self: stretch; min-width: 120px; }
.knowledge-ai-privacy { margin: 9px 0 0; color: var(--muted); font-size: 8px; line-height: 1.5; }
.knowledge-ai-evidence { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line); }
.knowledge-ai-evidence > strong { display: block; margin-bottom: 7px; font-size: 8px; }
.knowledge-evidence-note { margin: -2px 0 8px; color: var(--muted); font-size: 7px; line-height: 1.5; overflow-wrap: anywhere; }
.knowledge-ai-evidence > div { display: grid; gap: 6px; }
.knowledge-ai-evidence article { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 7px; padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); }
.knowledge-ai-evidence.external-evidence article { border-color: #ead8a4; background: color-mix(in srgb, var(--surface-soft) 88%, #fff4d3); }
.knowledge-ai-evidence article > span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-size: 7px; font-weight: 800; }
.knowledge-ai-evidence h4 { margin: 0; font-size: 9px; }
.knowledge-ai-evidence article small { display: block; margin-top: 3px; color: var(--muted); font-size: 7px; line-height: 1.45; }
.knowledge-ai-evidence article p, .empty-evidence p { margin: 4px 0 0; color: var(--muted); font-size: 8px; line-height: 1.55; }
.knowledge-ai-source-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.knowledge-ai-source-links a, .knowledge-ai-source-links em { color: var(--accent); font-size: 7px; font-style: normal; text-decoration: none; }
.knowledge-ai-source-links a:hover { text-decoration: underline; }
.chat-message .ai-disclaimer { display: block; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); color: #8a6e3f; font-size: 7px; }
.knowledge-directory-head { margin: 5px 0 10px; }
.knowledge-directory-head h2 { margin: 4px 0 0; font-size: 16px; }
.knowledge-directory-head p { margin: 5px 0 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.system-guides-section { margin: 4px 0 24px; }
.system-guide-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.system-guide-card { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.system-guide-card > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.system-guide-card h3 { margin: 12px 0 6px; font-size: 12px; }
.system-guide-card p { min-height: 38px; margin: 0; color: var(--muted); font-size: 8px; line-height: 1.6; }
.guide-current { color: var(--green); font-size: 7px; }
.guide-current.warning { color: var(--amber); }
.system-guide-actions { display: flex; align-items: center; gap: 8px; margin-top: 13px; }
.system-guide-actions a { padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; color: var(--accent); font-size: 8px; font-weight: 700; text-decoration: none; }
.system-guide-actions a:hover { border-color: var(--accent); background: var(--accent-soft); }
.knowledge-card { padding: 19px 21px; }
.knowledge-card summary { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; cursor: pointer; list-style: none; }
.knowledge-card summary::-webkit-details-marker { display: none; }
.knowledge-type { padding: 5px 8px; border-radius: 6px; background: var(--surface-soft); color: var(--accent); font-size: 8px; }
.knowledge-card h3 { margin: 0; font-size: 13px; }
.knowledge-card summary > span:last-child { color: var(--muted); transition: transform .2s; }
.knowledge-card[open] summary > span:last-child { transform: rotate(45deg); }
.knowledge-body { margin: 16px 0 0 70px; padding-top: 15px; border-top: 1px solid var(--line); }
.knowledge-body > p { margin: 0; color: #4d5a56; font-size: 10px; line-height: 1.8; }
.source-list { margin-top: 13px; }
.source-list a, .source-list span { display: block; margin-top: 5px; color: var(--accent); font-size: 9px; text-decoration: none; }
.source-list a:hover { text-decoration: underline; }
.source-list em { color: var(--muted); font-style: normal; }

.analysis-tabs { display: flex; gap: 4px; margin-bottom: 16px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.analysis-tabs[hidden] { display: none; }
.analysis-tab { padding: 11px 15px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); cursor: pointer; }
.analysis-tab.active { border-bottom-color: var(--accent); color: var(--accent); font-weight: 650; }
.analysis-page { display: none; }
.analysis-page.active { display: block; }
.analysis-page[hidden] { display: none !important; }
.analysis-page-home-row { display: flex; justify-content: flex-end; margin: 0 0 12px; }
.analysis-page-home-row button { min-height: 42px; padding: 10px 17px; font-size: 13px; font-weight: 700; }
.analysis-projects-intro { margin-bottom: 16px; }
.analysis-projects-intro h2 { margin: 7px 0 5px; font-size: 24px; letter-spacing: -.035em; }
.analysis-projects-intro p { max-width: 820px; margin: 0; color: var(--muted); line-height: 1.65; }
.analysis-workspace-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin-bottom: 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.analysis-workspace-metrics > div { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-right: 1px solid var(--line); }
.analysis-workspace-metrics > div:last-child { border-right: 0; }
.analysis-workspace-metrics span { color: var(--muted); font-size: 9px; font-weight: 750; }
.analysis-workspace-metrics strong { font-size: 24px; line-height: 1; }
.create-analysis-workspace-form { display: grid; grid-template-columns: minmax(160px,.65fr) minmax(230px,1fr) minmax(280px,1.25fr) auto; align-items: end; gap: 12px; padding: 20px; }
.create-analysis-workspace-form > div { align-self: center; }
.create-analysis-workspace-form > div strong { font-size: 13px; }
.create-analysis-workspace-form > div p { margin: 5px 0 0; color: var(--muted); font-size: 8px; line-height: 1.5; }
.create-analysis-workspace-form label { min-width: 0; display: grid; gap: 6px; color: var(--muted); font-size: 9px; font-weight: 750; }
.create-analysis-workspace-form input,.create-analysis-workspace-form select { width: 100%; min-width: 0; box-sizing: border-box; }
.create-analysis-workspace-form button { min-height: 42px; white-space: nowrap; }
.create-experiment-workspace-form { display: grid; grid-template-columns: minmax(170px,.72fr) minmax(240px,1fr) minmax(260px,1.2fr) auto; align-items: end; gap: 12px; padding: 20px; }
.create-experiment-workspace-form > div { align-self: center; }
.create-experiment-workspace-form > div strong { font-size: 13px; }
.create-experiment-workspace-form > div p { margin: 5px 0 0; color: var(--muted); font-size: 8px; line-height: 1.5; }
.create-experiment-workspace-form label,.workspace-status-filter { min-width: 0; display: grid; gap: 6px; color: var(--muted); font-size: 9px; font-weight: 750; }
.create-experiment-workspace-form input,.workspace-status-filter select { width: 100%; min-width: 0; box-sizing: border-box; }
.create-experiment-workspace-form button { min-height: 42px; white-space: nowrap; }
.analysis-workspace-toolbar .workspace-status-filter { flex: 0 0 170px; }
.analysis-workspace-toolbar .workspace-status-filter select { min-height: 34px; padding-top: 0; padding-bottom: 0; }
.experiment-workspace-progress { display: grid; justify-items: end; gap: 5px; }
.experiment-workspace-progress span { color: var(--accent-dark); font-size: 9px; font-weight: 800; }
.experiment-workspace-progress strong { color: var(--muted); font-size: 8px; }
#experiment-autosave-status { min-width: 92px; margin: 0; text-align: right; }
.analysis-workspace-toolbar { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 8px 10px; }
.analysis-workspace-toolbar .search-field { flex: 1 1 auto; width: auto; min-width: 240px; display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 7px; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); }
.analysis-workspace-toolbar .search-field input { min-width: 0; min-height: 34px; padding: 0; border: 0; border-radius: 0; background: transparent; outline: 0; font-size: 9px; }
.analysis-workspace-toolbar .search-field span { display: inline-flex; color: var(--muted); }
.analysis-workspace-toolbar > button { min-height: 34px; margin-left: auto; padding: 7px 12px; }
.analysis-workspace-list { display: block; overflow-x: hidden; }
.analysis-workspace-table { width: 100%; min-width: 0; overflow: hidden; }
.analysis-workspace-list-head,.analysis-workspace-row { display: grid; grid-template-columns: minmax(180px,1.15fr) 82px minmax(120px,.68fr) minmax(110px,.62fr) minmax(430px,1.35fr); align-items: center; gap: 10px; }
.analysis-workspace-list-head { padding: 11px 18px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .04em; }
.analysis-workspace-item { min-width: 0; padding: 15px 18px; border-bottom: 1px solid var(--line); background: var(--surface); }
.analysis-workspace-item:last-child { border-bottom: 0; }
.analysis-workspace-item:hover { background: var(--surface-soft); }
.analysis-workspace-item[data-status="in_progress"] { box-shadow: inset 3px 0 var(--accent); }
.analysis-workspace-main,.analysis-workspace-status-cell,.analysis-workspace-progress-cell,.analysis-workspace-updated-cell { min-width: 0; }
.analysis-workspace-main h3 { margin: 0 0 4px; font-size: 13px; }
.analysis-workspace-main p { margin: 5px 0 0; overflow: hidden; color: var(--muted); font-size: 8px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.analysis-workspace-progress-cell { display: grid; gap: 5px; }
.analysis-workspace-progress-cell strong { font-size: 9px; }
.analysis-workspace-updated-cell time { color: var(--ink); font-size: 8px; font-weight: 700; }
.analysis-workspace-item-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap; gap: 7px; white-space: nowrap; }
.analysis-workspace-item-actions button,.workspace-action-link { flex: 0 0 auto; min-height: 36px; padding: 7px 11px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: 10px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.workspace-action-link { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; text-decoration: none; }
.workspace-action-link:hover { border-color: var(--accent); color: var(--accent); }
.analysis-workspace-item-actions .danger { color: var(--red); border-color: color-mix(in srgb,var(--red) 32%,var(--line)); }
.analysis-workspace-item small { color: var(--muted); font-size: 8px; }
.analysis-workspace-empty { min-height: 190px; display: grid; place-items: center; align-content: center; gap: 6px; text-align: center; }
.analysis-workspace-empty h3,.analysis-workspace-empty p { margin: 0; }
.analysis-workspace-empty p { color: var(--muted); }
.analysis-workspace-banner { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 14px; padding: 18px 20px; background: linear-gradient(120deg,var(--surface),var(--accent-soft)); }
.analysis-workspace-banner h2 { margin: 5px 0 3px; font-size: 20px; }
.analysis-workspace-banner p { max-width: 820px; margin: 0; color: var(--muted); }
.analysis-project-history { margin-top: 18px; }
.analysis-project-history[hidden] { display: none !important; }
.input-card { padding: 20px; }
.input-row { display: grid; grid-template-columns: 1fr auto; gap: 9px; }
.actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 15px; }
.help { margin: 9px 0 0; color: var(--muted); font-size: 9px; }
.status-line { min-height: 30px; margin: 0; padding: 10px 2px 2px; color: var(--muted); font-size: 10px; }
.status-line.error { color: var(--red); }
.metric-grid.compact { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 10px 0; }
.metric-grid.compact .metric { min-height: 82px; }
.results { display: grid; gap: 13px; }
.result-section { overflow: hidden; }
.result-header { display: flex; justify-content: space-between; gap: 12px; padding: 15px 17px; border-bottom: 1px solid var(--line); }
.result-title { font-size: 12px; font-weight: 700; }
.result-meta { margin-top: 4px; color: var(--muted); font-size: 9px; }
.badge { align-self: flex-start; padding: 5px 8px; border-radius: 99px; background: var(--surface-soft); color: var(--muted); font-size: 8px; }
.badge.ok { background: var(--accent-soft); color: var(--accent); }
.badge.warn { background: var(--amber-soft); color: var(--amber); }
.badge.error { background: var(--red-soft); color: var(--red); }
.analysis-head-badges { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

/* Analysis workspace uses a denser type scale than the general CytoPilot shell. */
#view-analysis { font-size: 12px; }
#view-analysis .page-head h1 { font-size: clamp(23px, 2.7vw, 34px); }
#view-analysis .flow-analysis-guide-intro h2 { font-size: 19px; }
#view-analysis .validation-head h2,#view-analysis .history-head h2 { font-size: 22px; }
#view-analysis .metric-value { font-size: 25px; }

.analysis-guide-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.analysis-guide-links a { color: var(--accent); font-size: 9px; font-weight: 800; text-decoration: none; }
.guide-badge { flex: none; padding: 8px 11px; border-radius: 99px; background: #e9fff4; color: #22704e; font-size: 9px; font-weight: 750; }
.goal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin: 14px 0; }
.goal-card { display: block; padding: 20px; color: inherit; text-align: left; cursor: pointer; transition: transform .18s, border-color .18s, box-shadow .18s; }
.goal-card:hover { transform: translateY(-2px); border-color: #c6b7ec; box-shadow: var(--shadow); }
.goal-card > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); font-size: 9px; font-weight: 800; }
.goal-card strong { display: block; margin-top: 16px; font-size: 14px; }
.goal-card p { min-height: 48px; margin: 7px 0 13px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.goal-card em { color: var(--accent); font-size: 9px; font-style: normal; font-weight: 700; }
.guide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.guide-panel { padding: 22px; }
.guide-panel h3 { margin: 7px 0 16px; font-size: 16px; }
.glossary { margin: 0; }
.glossary > div { display: grid; grid-template-columns: 54px 1fr; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.glossary dt { color: var(--accent); font-family: "Cascadia Code", Consolas, monospace; font-size: 10px; font-weight: 800; }
.glossary dd { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.mini-steps { margin: 0; padding: 0; list-style: none; }
.mini-steps li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; padding: 9px 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.mini-steps li span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 8px; font-weight: 800; }
.analysis-stepper { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 11px; }
.analysis-stepper span { padding: 6px 9px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--muted); font-size: 8px; }
.analysis-stepper span.done { border-color: #d7cfff; background: var(--accent-soft); color: var(--accent); }

.secret-note { margin-top: 18px; padding: 14px; border: 1px solid #ddd3f3; border-radius: 10px; background: var(--accent-soft); }
.secret-note strong { font-size: 11px; }
.secret-note p { margin: 5px 0 0; color: var(--muted); font-size: 9px; line-height: 1.6; }
.privacy-list { display: grid; gap: 6px; margin-top: 14px; color: #5c5270; font-size: 9px; }
#kimi-form { padding: 23px; }

dialog {
  width: min(620px, calc(100% - 32px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 24px 70px rgba(11,41,34,.25);
}
dialog::backdrop { background: rgba(14,30,26,.42); backdrop-filter: blur(3px); }
dialog.wide-dialog { width: min(880px, calc(100% - 28px)); }
#history-dialog { width: min(940px, calc(100% - 32px)); }
.tutorial-dialog-shell, .history-dialog-shell { padding: 24px; }
.history-dialog-shell {
  box-sizing: border-box;
  height: calc(100vh - 32px);
  height: calc(100dvh - 32px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}
.dialog-lead { margin: 12px 0 17px; color: var(--muted); font-size: 10px; line-height: 1.65; }
#tutorial-media video { display: block; width: 100%; max-height: 430px; border-radius: 11px; background: #180e2b; }
.article-guide-mark { display: flex; align-items: center; gap: 12px; padding: 17px; border: 1px solid var(--line-strong); border-radius: 11px; background: linear-gradient(120deg, var(--accent-soft), var(--surface)); }
.article-guide-mark span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 10px; background: var(--accent); color: white; font-size: 8px; font-weight: 800; }
.article-guide-mark strong, .article-guide-mark small { display: block; }
.article-guide-mark strong { font-size: 11px; }
.article-guide-mark small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.tutorial-content-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 22px; margin-top: 20px; }
.tutorial-content-grid h3 { margin: 0 0 9px; font-size: 12px; }
.tutorial-step-list { margin: 0; padding: 0; list-style: none; counter-reset: tutorial; }
.tutorial-step-list li { position: relative; min-height: 27px; padding: 5px 0 10px 35px; color: #4d5a56; font-size: 9px; line-height: 1.55; counter-increment: tutorial; }
.tutorial-step-list li::before { content: counter(tutorial); position: absolute; left: 0; top: 2px; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-size: 8px; font-weight: 800; }
.tutorial-check-list, .tutorial-warning-list { margin: 0 0 17px; padding: 0; list-style: none; }
.tutorial-check-list li, .tutorial-warning-list li { margin-bottom: 6px; padding: 8px 9px 8px 28px; border-radius: 7px; color: var(--muted); font-size: 8px; line-height: 1.5; }
.tutorial-check-list li { position: relative; background: #f3faf6; }
.tutorial-check-list li::before { content: "✓"; position: absolute; left: 10px; color: #2a875d; font-weight: 800; }
.tutorial-warning-list li { background: var(--amber-soft); color: #765c37; }
.history-list {
  min-height: 0;
  display: block;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-top: 18px;
  padding: 5px 9px 5px 14px;
}
.history-list::-webkit-scrollbar { width: 9px; }
.history-list::-webkit-scrollbar-track { background: transparent; }
.history-list::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 99px; background: var(--line-strong); background-clip: padding-box; }
.history-item {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 104px;
  align-items: start;
  column-gap: 20px;
  row-gap: 6px;
  min-height: auto;
  padding: 17px 16px 19px;
  border-bottom: 1px solid var(--line);
}
.history-item:last-child { border-bottom: 0; }
.history-version { padding-top: 1px; color: var(--accent-dark); font-size: 11px; line-height: 1.55; }
.history-note {
  min-width: 0;
  margin: 0;
  padding: 0 0 3px;
  color: var(--ink-soft);
  font-size: 9px;
  line-height: 1.85;
  overflow-wrap: anywhere;
}
.history-date { padding-top: 2px; color: var(--muted); font-size: 8px; line-height: 1.55; text-align: right; white-space: nowrap; }
#record-form {
  box-sizing: border-box;
  width: 100%;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-color: var(--accent-soft) transparent;
  scrollbar-width: thin;
  padding: 23px;
}
#record-form::-webkit-scrollbar { width: 10px; }
#record-form::-webkit-scrollbar-track { background: transparent; }
#record-form::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background: var(--line-strong); background-clip: padding-box; }
#record-form::-webkit-scrollbar-thumb:hover { background-color: var(--accent); }
.dialog-head { display: flex; justify-content: space-between; gap: 20px; }
.dialog-head > div { min-width: 0; }
.dialog-head h2 { margin: 5px 0 0; overflow-wrap: anywhere; font-size: 21px; }
.icon-button { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); cursor: pointer; font-size: 19px; }
.dialog-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 13px; margin-top: 13px; }
.dialog-fields .wide { grid-column: 1 / -1; }
.record-field { display: grid; gap: 7px; margin-top: 12px; color: var(--ink); font-size: 9px; font-weight: 700; }
.record-field-label { display: block; }
.reagent-picker { overflow: hidden; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface-soft); }
.reagent-picker > input { width: 100%; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: var(--surface); }
.reagent-picker-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 210px; overflow: auto; padding: 8px; gap: 6px; }
.reagent-picker-options > label { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 8px; margin: 0; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; }
.reagent-picker-options > label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.reagent-picker-options input { width: auto; min-height: auto; margin-top: 2px; }
.reagent-picker-options strong, .reagent-picker-options small { display: block; }
.reagent-picker-options strong { overflow-wrap: anywhere; font-size: 8px; }
.reagent-picker-options small { margin-top: 3px; color: var(--muted); font-size: 7px; font-weight: 400; }
.reagent-picker-count { display: block; padding: 8px 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 8px; font-weight: 400; }
.template-upload-control { display: grid; gap: 7px; }
.template-upload-control input[type="file"] { min-height: 48px; padding: 9px; cursor: pointer; }
.template-upload-control input[type="file"]::file-selector-button { margin-right: 10px; padding: 7px 11px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--accent-soft); color: var(--accent-dark); cursor: pointer; font-weight: 700; }
.template-upload-control small { color: var(--muted); font-size: 8px; line-height: 1.5; }
.template-provenance em { display: block; margin-top: 3px; color: var(--accent-dark); font-size: 7px; font-style: normal; }
.dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
#record-form .dialog-actions {
  position: sticky;
  bottom: -23px;
  z-index: 3;
  margin: 0 -23px -23px;
  padding: 14px 23px 23px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: 0 -10px 22px color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(8px);
}
#record-form #record-status:empty { min-height: 12px; padding-top: 4px; }
#auth-form {
  width: 100%;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: clamp(18px, 2.5vw, 26px);
}
#auth-form .secret-note { margin-top: 14px; padding: 12px 14px; }
#auth-form label { margin-top: 12px; }
#auth-form .dialog-actions { margin-top: 18px; padding-top: 14px; }
#account-dialog { width: min(650px, calc(100% - 32px)); }
.account-dialog-shell { box-sizing: border-box; padding: clamp(22px, 3vw, 32px); }
.account-brand-row,.account-brand-lockup,.account-identity { display: flex; align-items: center; }
.account-brand-row { justify-content: space-between; gap: 18px; }
.account-brand-lockup { gap: 12px; }
.account-brand-lockup > span:last-child { display: grid; gap: 2px; }
.account-brand-lockup strong { font-size: 18px; letter-spacing: -.03em; }
.account-brand-lockup small { color: var(--muted); font-size: 7px; letter-spacing: .2em; }
.account-brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; background: var(--accent); color: white; }
.account-brand-mark svg { width: 27px; height: 27px; }
.account-dialog-intro { margin-top: 30px; }
.account-dialog-intro h2 { margin: 8px 0 9px; font-size: clamp(25px, 4vw, 34px); }
.account-dialog-intro p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
.account-identity { gap: 12px; margin-top: 24px; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); }
.account-avatar { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: white; font-size: 14px; font-weight: 800; }
.account-identity > div { min-width: 0; display: grid; gap: 3px; }
.account-identity > div strong { overflow-wrap: anywhere; font-size: 12px; }
.account-identity > div span { color: var(--muted); font-size: 8px; }
.account-identity .status-chip { margin-left: auto; }
.account-logout-button { width: 100%; min-height: 44px; margin-top: 18px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; font-size: 10px; font-weight: 750; }
.account-logout-button:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); }
.account-logout-button:disabled { cursor: wait; opacity: .62; }
.account-boundary { margin-top: 18px; padding: 15px; border: 1px dashed var(--line-strong); border-radius: 11px; background: color-mix(in srgb, var(--accent-soft) 42%, var(--surface)); }
.account-boundary strong { font-size: 10px; }
.account-boundary p { margin: 6px 0 0; color: var(--muted); font-size: 9px; line-height: 1.7; }
#account-status-line:empty { display: none; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 80; max-width: 360px; padding: 12px 16px; border-radius: 10px; background: var(--hero-start); color: white; box-shadow: var(--shadow); font-size: 10px; opacity: 0; transform: translateY(10px); pointer-events: none; transition: .2s; }
.toast.show { opacity: 1; transform: none; }

/* Cytometry Arcade */
.games-hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; gap: 34px;
  overflow: hidden; padding: 38px 42px; border-radius: 22px; background: #21183c; color: white;
  box-shadow: 0 18px 48px rgba(32, 23, 61, .16);
}
.games-hero::after { content: ""; position: absolute; right: 13%; top: -140px; width: 330px; height: 330px; border-radius: 50%; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 0 0 54px rgba(139,124,255,.035), 0 0 0 108px rgba(139,124,255,.025); }
.games-hero > * { position: relative; z-index: 1; }
.games-hero .section-kicker { color: #bfb4ff; }
.games-hero h1 { max-width: none; margin: 10px 0 9px; font-size: clamp(28px, 3.15vw, 50px); line-height: 1.13; letter-spacing: -.04em; white-space: nowrap; }
.games-hero p { max-width: 680px; margin: 0; color: rgba(255,255,255,.66); font-size: 13px; line-height: 1.7; }
.games-hero-stat { min-width: 108px; padding-left: 23px; border-left: 1px solid rgba(255,255,255,.14); }
.games-hero-stat strong, .games-hero-stat span { display: block; }
.games-hero-stat strong { font-size: 31px; letter-spacing: -.04em; }
.games-hero-stat span { margin-top: 4px; color: rgba(255,255,255,.5); font-size: 9px; }
.game-filter-row { display: flex; gap: 7px; margin: 22px 0 16px; }
.game-filter { padding: 8px 14px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--muted); cursor: pointer; font-size: 10px; font-weight: 700; }
.game-filter:hover, .game-filter.active { border-color: #b9aafa; background: var(--accent-soft); color: var(--accent-dark); }
.game-lobby { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.game-card { position: relative; display: flex; flex-direction: column; min-height: 415px; overflow: hidden; padding: 18px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.game-card:hover { z-index: 2; transform: translateY(-4px); border-color: #cbbef2; box-shadow: 0 18px 38px rgba(61,41,102,.12); }
.game-card.featured { border-color: #bbaaff; box-shadow: inset 0 3px 0 #8b7cff; }
.game-card-top { display: flex; align-items: center; gap: 7px; }
.game-number { margin-right: auto; color: #a49caf; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.game-type, .new-tag { padding: 4px 7px; border-radius: 99px; background: #f4f1f8; color: #766e80; font-size: 8px; font-weight: 750; }
.new-tag { background: #e8e1ff; color: #6747df; letter-spacing: .08em; }
.game-preview { height: 118px; display: grid; place-items: center; margin: 13px 0 17px; overflow: hidden; border-radius: 12px; background: var(--surface-soft); }
.game-en { color: var(--accent); font-size: 7px; font-weight: 800; letter-spacing: .15em; }
.game-card h3 { margin: 5px 0 7px; font-size: 19px; letter-spacing: -.025em; }
.game-card > p { min-height: 48px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.65; }
.game-meta { display: flex; gap: 6px; margin-top: 11px; }
.game-meta span { padding: 4px 7px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font-size: 8px; }
.game-learn { margin-top: auto; padding: 11px 0 10px; border-top: 1px solid var(--line); }
.game-learn span, .game-learn strong { display: block; }
.game-learn span { margin-bottom: 4px; color: #a39cab; font-size: 7px; letter-spacing: .1em; }
.game-learn strong { font-size: 9px; }
.game-play { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 10px 12px; border: 0; border-radius: 9px; background: #271d3f; color: white; cursor: pointer; font-size: 10px; font-weight: 700; }
.game-play:hover { background: var(--accent); }
.game-play span { font-size: 15px; }

.mini-plot, .mini-comp, .mini-cell, .mini-wave, .mini-panel, .mini-sort, .mini-ninja { position: relative; width: 82%; height: 82%; }
.mini-plot { border-left: 1px solid #aaa0be; border-bottom: 1px solid #aaa0be; background: radial-gradient(circle at 70% 33%, rgba(139,124,255,.7) 0 2px, transparent 3px) 0 0/12px 10px, radial-gradient(circle at 28% 70%, rgba(104,95,118,.35) 0 2px, transparent 3px) 0 0/14px 13px; }
.mini-plot span { position: absolute; left: 48%; top: 12%; width: 42%; height: 48%; border: 1px dashed #755bdc; background: rgba(139,124,255,.08); }
.mini-comp { background: linear-gradient(90deg, transparent 10%, rgba(69,217,163,.18) 10% 90%, transparent 90%); }
.mini-comp::before { content: ""; position: absolute; left: 12%; top: 68%; width: 75%; height: 3px; border-radius: 50%; background: #45d9a3; box-shadow: 10px -7px 0 #45d9a3, 22px -13px 0 #45d9a3, 34px -20px 0 #45d9a3, 48px -28px 0 #45d9a3, 62px -37px 0 #45d9a3, 76px -45px 0 #45d9a3, 90px -54px 0 #45d9a3, 104px -61px 0 #45d9a3; transform: rotate(-1deg); }
.mini-comp span { position: absolute; left: 50%; top: 8%; height: 84%; border-left: 1px dashed #7053d5; }
.mini-cell { display: flex; gap: 5px; align-items: end; justify-content: center; }
.mini-cell i { padding: 6px; border-radius: 6px; background: #fff8e7; color: #996611; font-size: 8px; font-style: normal; }
.mini-cell span { position: absolute; top: 7px; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #ffbc52; color: white; font-size: 25px; box-shadow: inset 0 -10px 20px rgba(107,67,0,.12); }
.mini-wave { display: flex; align-items: end; gap: 3px; padding: 20px; }
.mini-wave i { width: 7px; height: 35%; border-radius: 4px; background: #ff7f90; }
.mini-wave i:nth-child(2) { height: 75%; }.mini-wave i:nth-child(3) { height: 48%; }
.mini-wave span { position: absolute; right: 20%; top: 12%; display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: #ff5d78; color: white; font-weight: 800; }
.mini-panel { display: flex; align-items: center; justify-content: center; gap: 9px; }
.mini-panel i { width: 20px; height: 65px; border-radius: 99px; background: #8b7cff; box-shadow: inset 0 -12px 18px rgba(0,0,0,.12); }.mini-panel i:nth-child(2){height:85px;background:#45d9a3}.mini-panel i:nth-child(3){height:48px;background:#ffb84d}.mini-panel i:nth-child(4){height:73px;background:#ff5d78}
.mini-sort::before { content:""; position:absolute; left:46%; top:3%; height:62%; border-left:5px solid #66c99d; }.mini-sort span { position:absolute; left:22%; bottom:3%; width:28%; height:38%; border:2px solid #9e95ad; border-top:0; transform:skew(4deg); }.mini-sort i {position:absolute;width:9px;height:9px;border-radius:50%;background:#8b7cff;left:48%;top:20%}.mini-sort i:nth-child(3){top:36%;background:#ffb84d}.mini-sort i:nth-child(4){top:52%;background:#ff5d78}
.mini-ninja b { position:absolute;left:6%;top:8%;padding:6px 8px;border-radius:7px;background:#45d9a3;color:#173d31;font-size:10px }.mini-ninja i { position:absolute;width:30px;height:30px;border-radius:50%;background:#45d9a3;left:43%;top:4%;box-shadow:0 0 18px #45d9a3}.mini-ninja i:nth-child(3){left:67%;top:50%;background:#ffb84d;box-shadow:0 0 18px #ffb84d}.mini-ninja i:nth-child(4){left:25%;top:61%;background:#ff5d78;box-shadow:0 0 18px #ff5d78}.mini-ninja span{position:absolute;left:14%;top:70%;width:70%;height:2px;background:white;transform:rotate(-22deg);box-shadow:0 0 8px white}
.mini-match { width: 92px; display:grid; grid-template-columns:repeat(4,1fr);gap:5px }.mini-match i { width:19px;height:19px;border-radius:50%;background:#8b7cff;box-shadow:inset 0 -5px 7px rgba(0,0,0,.1)}.mini-match .c1{background:#45d9a3}.mini-match .c2{background:#ffb84d}.mini-match .c3{background:#ff5d78}
.mini-lightpath,.mini-defense,.mini-sampleaid,.mini-conveyor,.mini-spectrum,.mini-rhythm{position:relative;width:84%;height:78%}.mini-lightpath{display:flex;align-items:center;justify-content:space-between}.mini-lightpath i,.mini-lightpath b,.mini-lightpath em{padding:7px;border-radius:7px;background:#8b7cff;color:white;font-size:8px;font-style:normal}.mini-lightpath b{background:#ffb84d}.mini-lightpath em{background:#45d9a3}.mini-lightpath span{position:absolute;left:10%;right:10%;top:50%;height:2px;background:linear-gradient(90deg,#8b7cff,#ffb84d,#45d9a3);z-index:0}.mini-lightpath>*:not(span){position:relative;z-index:1}
.mini-defense{display:flex;align-items:center;justify-content:center;gap:6px}.mini-defense b{display:grid;place-items:center;width:27px;height:45px;border:2px solid #8b7cff;border-radius:6px;color:#6d4aff;font-size:9px}.mini-defense i{position:absolute;left:4%;width:17px;height:17px;border-radius:50%;background:#ff5d78}.mini-defense span{position:absolute;left:9%;right:5%;height:3px;background:#45d9a3;z-index:-1}
.mini-sampleaid i{position:absolute;left:18%;top:15%;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#45d9a3;color:white;font-size:28px;font-style:normal}.mini-sampleaid span{position:absolute;left:48%;top:22%;width:40%;height:31%;border-bottom:3px solid #ff5d78;transform:skewY(-18deg)}.mini-sampleaid b{position:absolute;right:8%;bottom:10%;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#ffb84d;color:white}
.mini-conveyor span{position:absolute;left:3%;right:3%;top:55%;height:5px;background:#706883;box-shadow:0 9px 0 #aaa3b5}.mini-conveyor i{position:absolute;left:25%;top:18%;padding:10px;border-radius:50%;background:#8b7cff;color:white;font-size:7px;font-style:normal}.mini-conveyor b{position:absolute;right:23%;bottom:2%;padding:9px;border:2px solid #45d9a3;border-top:0;font-size:8px}.mini-conveyor b:last-child{right:2%;border-color:#ffb84d}
.mini-spectrum{background:linear-gradient(90deg,rgba(139,124,255,.18),rgba(69,217,163,.18),rgba(255,184,77,.18),rgba(255,93,120,.18));border-radius:8px}.mini-spectrum i{position:absolute;width:18px;height:18px;border-radius:50%;background:#8b7cff;left:18%;top:20%;box-shadow:0 0 12px #8b7cff}.mini-spectrum i:nth-child(2){left:52%;top:45%;background:#45d9a3;box-shadow:0 0 12px #45d9a3}.mini-spectrum i:nth-child(3){left:75%;top:12%;width:35px;height:35px;background:rgba(255,93,120,.35);box-shadow:0 0 18px #ff5d78}.mini-spectrum span{position:absolute;left:43%;bottom:5%;width:27px;height:27px;border:3px solid white;border-radius:50%;background:#45d9a3}
.mini-rhythm{overflow:hidden}.mini-rhythm span{position:absolute;left:18%;top:3%;bottom:3%;border-left:3px solid #8b7cff}.mini-rhythm i{position:absolute;left:72%;top:20%;width:16px;height:48px;border-radius:50%;background:#45d9a3}.mini-rhythm i:nth-child(2){left:48%;top:38%;background:#ffb84d}.mini-rhythm i:nth-child(3){left:27%;top:12%;width:28px;background:#ff5d78}

.game-stage { scroll-margin-top: 92px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.game-stage-head { min-height: 82px; display: grid; grid-template-columns: 170px 1fr auto auto; align-items: center; gap: 20px; padding: 14px 22px; border-bottom: 1px solid var(--line); }
.game-back { border: 0; background: transparent; color: var(--muted); cursor: pointer; text-align: left; font-size: 10px; }
.game-back:hover { color: var(--accent); }
.game-stage-title span { color: var(--accent); font-size: 7px; font-weight: 800; letter-spacing: .14em; }
.game-stage-title h2 { margin: 4px 0 0; font-size: 20px; }
.game-player { min-width: 82px; padding-left: 22px; border-left: 1px solid var(--line); }
.game-player span, .game-player strong { display: block; }
.game-player span { color: var(--muted); font-size: 8px; }
.game-player strong { max-width: 120px; overflow: hidden; margin-top: 4px; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.game-score { min-width: 80px; padding-left: 22px; border-left: 1px solid var(--line); }
.game-score span, .game-score strong { display: block; }.game-score span{color:var(--muted);font-size:8px}.game-score strong{margin-top:2px;font-size:24px}
.game-runtime { min-height: 590px; background: var(--surface-soft); }
.arcade-playing { overflow: hidden; }
.arcade-playing .game-stage {
  position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column;
  width: 100vw; height: 100dvh; margin: 0; border: 0; border-radius: 0;
  background: var(--surface-soft); box-shadow: none; animation: arcade-enter .28s ease both;
}
.arcade-playing .game-stage-head {
  position: relative; z-index: 3; flex: 0 0 auto; min-height: 88px; padding-inline: clamp(20px, 4vw, 58px);
  background: rgba(255,255,255,.96); box-shadow: 0 8px 28px rgba(30,21,51,.06); backdrop-filter: blur(14px);
}
.arcade-playing .game-back { min-height: 42px; padding: 0 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); }
.arcade-playing .game-runtime { flex: 1 1 auto; min-height: 0; overflow: auto; }
.arcade-playing .play-layout, .arcade-playing .sort-game, .arcade-playing .game-finish { min-height: calc(100dvh - 88px); }
.arcade-playing .ninja-shell { min-height: calc(100dvh - 88px); }
.arcade-playing .ninja-canvas-wrap { height: calc(100dvh - 158px); min-height: 520px; }
@keyframes arcade-enter { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
.play-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); min-height: 590px; }
.play-brief { padding: 38px 28px; border-right: 1px solid var(--line); background: var(--surface); }
.brief-step { padding: 5px 8px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); font-size: 8px; font-weight: 750; }
.play-brief h3 { margin: 15px 0 10px; font-size: 23px; line-height: 1.25; letter-spacing: -.03em; }.play-brief p{color:var(--muted);font-size:11px;line-height:1.75}
.brief-tip { margin-top: 24px; padding: 13px; border-radius: 10px; background: #f5f2fa; }.brief-tip strong,.brief-tip span{display:block}.brief-tip strong{font-size:9px}.brief-tip span{margin-top:5px;color:var(--muted);font-size:9px;line-height:1.55}
.live-round-score { display: flex; align-items: end; justify-content: space-between; margin: 25px 0 4px; padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.live-round-score span { color: var(--muted); font-size: 8px; }
.live-round-score strong { font-size: 25px; letter-spacing: -.04em; }
.round-feedback { min-height: 44px; margin: 14px 0 0; color: var(--accent-dark); font-size: 9px; font-weight: 650; line-height: 1.6; }
.play-board { position: relative; min-width: 0; display: flex; flex-direction: column; padding: 25px; background: #ece9f2; }
.gate-canvas { width: 100%; min-height: 0; flex: 1; border-radius: 12px; cursor: crosshair; touch-action: none; box-shadow: 0 15px 35px rgba(20,14,37,.18); }
.board-foot { position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 5px 0;color:var(--muted);font-size:9px}.axis-y{position:absolute;left:-3px;bottom:50px;transform:rotate(-90deg);transform-origin:left bottom}
.comp-readout { display:flex;align-items:baseline;justify-content:space-between;margin-top:22px}.comp-readout span{font-size:9px;color:var(--muted)}.comp-readout strong{font-size:25px}.big-slider{width:100%;margin:13px 0 23px;accent-color:var(--accent)}

.quiz-shell, .panel-game { width: min(780px, calc(100% - 40px)); margin: 0 auto; padding: 48px 0; text-align:center }.quiz-progress{height:4px;margin-bottom:34px;border-radius:99px;background:#e9e5ef;overflow:hidden}.quiz-progress span{display:block;height:100%;background:var(--accent);transition:.3s}.quiz-shell h3,.panel-game h3{margin:8px 0 22px;font-size:28px}.clue-card{min-height:145px;display:grid;place-items:center;padding:25px;border-radius:16px;background:#241a42;color:white;box-shadow:0 16px 38px rgba(35,26,65,.16)}.clue-card span{color:#bfb4dd;font-size:8px;letter-spacing:.18em}.clue-card strong{font-size:clamp(18px,3vw,31px);letter-spacing:.02em}.clue-card.trouble{background:#43222f}.quiz-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}.quiz-options button{display:flex;align-items:center;justify-content:space-between;min-height:68px;padding:16px;border:1px solid var(--line);border-radius:10px;background:white;cursor:pointer;font-size:14px;font-weight:750;line-height:1.45;text-align:left}.quiz-options button:hover{border-color:#bcaefa}.quiz-options button.correct,.panel-choices button.correct{border-color:#45b885;background:#eaf9f2;color:#1a754e;box-shadow:0 0 0 3px rgba(69,184,133,.16);transform:scale(1.025)}.quiz-options button.correct{font-size:16px;font-weight:850}.quiz-options button.wrong,.panel-choices button.wrong{border-color:#e68b94;background:#fff0f1;color:#a63845}.quiz-feedback,#panel-feedback{min-height:38px;color:var(--muted);font-size:11px;line-height:1.6}.answer-reveal{margin:16px auto 8px!important;padding:12px 16px;border:1px solid #89d5b2;border-radius:10px;background:#eaf9f2;color:#176b49!important;font-size:15px!important;font-weight:850!important;line-height:1.65!important;box-shadow:0 8px 22px rgba(44,142,98,.1)}
.quiz-status { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.quiz-status > span:last-child { color: var(--muted); font-size: 8px; }
.panel-target{display:inline-flex;flex-direction:column;min-width:280px;padding:19px 28px;border:1px solid #d8cff2;border-radius:14px;background:white;box-shadow:var(--shadow)}.panel-target span,.panel-target small{color:var(--muted);font-size:8px}.panel-target strong{margin:7px 0;font-size:20px}.panel-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.panel-choices button{min-height:138px;padding:17px;border:1px solid var(--line);border-radius:13px;background:white;cursor:pointer}.panel-choices i{display:block;width:28px;height:28px;margin:0 auto 10px;border-radius:50%;background:#8b7cff;box-shadow:0 0 18px rgba(139,124,255,.35)}.panel-choices .dye-1{background:#45d9a3;box-shadow:0 0 18px rgba(69,217,163,.35)}.panel-choices .dye-2{background:#ffb84d;box-shadow:0 0 18px rgba(255,184,77,.35)}.panel-choices strong,.panel-choices span{display:block}.panel-choices strong{font-size:14px;line-height:1.45}.panel-choices button.correct strong{font-size:16px;font-weight:850}.panel-choices span{margin-top:10px;color:var(--accent);font-size:8px}
.sort-game{display:grid;grid-template-columns:1fr 360px;min-height:590px}.sort-machine{position:relative;overflow:hidden;background:#171226}.sort-machine::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,rgba(139,124,255,.19),transparent 45%)}.sort-stream{position:absolute;left:50%;top:40px;height:375px;border-left:8px solid rgba(69,217,163,.65);box-shadow:0 0 19px #45d9a3}.sort-stream i{position:absolute;left:-9px;width:12px;height:12px;border-radius:50%;background:#ffb84d}.sort-stream i:nth-child(1){top:40px}.sort-stream i:nth-child(2){top:110px;background:#8b7cff}.sort-stream i:nth-child(3){top:190px;background:#ff5d78}.sort-stream i:nth-child(4){top:260px}.sort-stream span{position:absolute;top:320px;left:-70px;width:140px;height:80px;border-bottom:3px solid #c3bad5;border-radius:50%}.sort-tubes{position:absolute;left:50%;bottom:52px;display:flex;gap:44px;transform:translateX(-50%)}.sort-tubes b{width:80px;height:112px;padding-top:88px;border:2px solid #8a829a;border-top:0;color:#bdb5c9;font-size:8px;text-align:center;transform:skew(4deg)}.sort-console{padding:42px 33px;background:white}.sort-console h3{margin:8px 0 25px;font-size:23px}.sort-console label{display:grid;grid-template-columns:1fr auto;gap:9px;margin:18px 0;color:var(--muted);font-size:10px}.sort-console label strong{color:var(--ink)}.sort-console label input{grid-column:1/-1;width:100%;accent-color:var(--accent)}.sort-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:27px 0 17px}.sort-metrics div{padding:10px 6px;border-radius:9px;background:#f6f3fa;text-align:center}.sort-metrics span,.sort-metrics strong{display:block}.sort-metrics span{color:var(--muted);font-size:7px}.sort-metrics strong{margin-top:5px;font-size:16px}.sort-console>p{color:var(--muted);font-size:8px;text-align:center}

.ninja-shell{min-height:650px;background:#100c20}.ninja-hud{height:70px;display:grid;grid-template-columns:120px minmax(260px,1fr) 120px;align-items:center;gap:18px;padding:7px 28px;background:#1d1730;color:white}.ninja-hud>div:first-child,.ninja-hud>div:last-child{text-align:center}.ninja-hud span,.ninja-hud strong{display:block}.ninja-hud>div>span{color:#9f96b2;font-size:9px}.ninja-hud>div>strong{margin-top:2px;font-size:24px}.ninja-target{justify-self:center;min-width:270px;padding:7px 24px;border:1px solid var(--target);border-radius:11px;background:color-mix(in srgb,var(--target) 13%,transparent);box-shadow:inset 0 -3px 0 var(--target),0 0 20px color-mix(in srgb,var(--target) 22%,transparent);text-align:center}.ninja-target strong{color:var(--target);font-size:20px!important}.ninja-target small{display:block;color:#b9b0c9;font-size:8px}.ninja-canvas-wrap{position:relative;height:580px}.ninja-canvas-wrap canvas{display:block;width:100%;height:100%;cursor:crosshair;touch-action:none}.ninja-prompt{position:absolute;left:50%;top:18px;transform:translateX(-50%);color:rgba(255,255,255,.48);font-size:9px;letter-spacing:.1em;pointer-events:none}.ninja-change{position:absolute;left:50%;top:43%;z-index:3;opacity:0;transform:translate(-50%,-50%) scale(.75);padding:18px 30px;border:1px solid rgba(255,255,255,.28);border-radius:14px;background:rgba(18,12,36,.82);color:white;font-size:25px;font-weight:800;pointer-events:none}.ninja-change.show{animation:target-flash 1.2s ease both}@keyframes target-flash{0%{opacity:0;transform:translate(-50%,-50%) scale(.75)}20%,70%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.08)}}
.match-shell{min-height:calc(100dvh - 88px);display:grid;grid-template-columns:250px auto;align-content:center;justify-content:center;gap:35px;padding:24px}.match-guide{padding:25px;border-radius:15px;background:white;box-shadow:var(--shadow)}.match-guide h3{margin:7px 0}.match-guide>p{color:var(--muted);font-size:10px;line-height:1.6}.fluor-key{display:grid;gap:7px;margin:20px 0}.fluor-key div{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:8px;padding:8px;border:1px solid var(--line);border-radius:7px}.fluor-key i{width:17px;height:17px;border-radius:50%;background:var(--c);box-shadow:0 0 9px var(--c)}.fluor-key strong{font-size:10px}.fluor-key span{color:var(--muted);font-size:8px}.match-moves{display:flex;align-items:end;justify-content:space-between;margin-top:23px;padding-top:17px;border-top:1px solid var(--line)}.match-moves span{color:var(--muted);font-size:9px}.match-moves strong{font-size:31px}.match-board-wrap{position:relative}.match-grid{display:grid;grid-template-columns:repeat(var(--match-size),62px);gap:6px;padding:15px;border-radius:18px;background:#211a32;box-shadow:0 18px 38px rgba(30,22,47,.2)}.match-grid button{position:relative;width:62px;height:62px;border:1px solid rgba(255,255,255,.05);border-radius:12px;background:#2e2740;cursor:pointer;transition:transform .18s,opacity .18s}.match-grid button:hover,.match-grid button.selected{background:#443a5a;transform:scale(1.06)}.match-grid button.selected{outline:2px solid white}.match-grid button i{display:block;width:36px;height:36px;margin:auto;border-radius:50%;background:var(--cell);box-shadow:inset 0 -8px 12px rgba(0,0,0,.16),0 0 14px color-mix(in srgb,var(--cell) 70%,transparent)}.match-grid button span{position:absolute;left:0;right:0;bottom:3px;color:#d7d0df;font-size:7px}.match-hint{min-height:18px;margin:11px 0 0;color:var(--muted);font-size:10px;text-align:center}.match-effects{position:absolute;inset:0 0 28px;pointer-events:none;overflow:hidden;border-radius:18px}.match-fx{position:absolute;left:calc(15px + var(--col) * 68px + 31px);top:calc(15px + var(--row) * 68px + 31px);z-index:4;color:white}.match-fx>b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:12px;text-shadow:0 2px 8px #000;white-space:nowrap}.match-fx.burst>i,.match-fx.explosion>i{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--fx);box-shadow:0 0 25px var(--fx);animation:particle .62s ease-out both}.match-fx.explosion>i:nth-child(1){--dx:-75px;--dy:-70px}.match-fx.explosion>i:nth-child(2){--dx:75px;--dy:-55px}.match-fx.explosion>i:nth-child(3){--dx:-65px;--dy:70px}.match-fx.explosion>i:nth-child(4){--dx:80px;--dy:70px}.match-fx.burst>i{--dx:0;--dy:0;animation:boom .55s ease-out both}.match-fx .laser-h{position:absolute;left:-520px;top:-3px;width:1040px;height:6px;background:white;box-shadow:0 0 12px var(--fx),0 0 28px var(--fx);animation:laser-pop .58s ease both}.match-fx .laser-v{position:absolute;left:-3px;top:-520px;width:6px;height:1040px;background:white;box-shadow:0 0 12px var(--fx),0 0 28px var(--fx);animation:laser-pop .58s ease both}@keyframes particle{to{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}}@keyframes boom{0%{transform:scale(.2)}60%{opacity:1;transform:scale(8)}100%{opacity:0;transform:scale(11)}}@keyframes laser-pop{0%{opacity:0;transform:scale(.2)}35%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.15)}}
.game-finish{min-height:590px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;text-align:center;background:radial-gradient(circle at 50% 45%,#eee9ff 0,transparent 42%)}.finish-orbit{display:grid;place-items:center;width:150px;height:150px;margin-bottom:25px;border:1px solid #d8d0ef;border-radius:50%;background:white;box-shadow:0 0 0 18px rgba(139,124,255,.055),0 0 0 38px rgba(139,124,255,.025)}.finish-orbit strong,.finish-orbit span{display:block}.finish-orbit strong{font-size:39px;letter-spacing:-.05em}.finish-orbit span{color:var(--muted);font-size:8px}.game-finish h3{margin:8px 0;font-size:27px}.game-finish>p{max-width:560px;color:var(--muted);font-size:11px;line-height:1.75}.finish-actions{display:flex;gap:8px;margin-top:13px}
.player-entry { min-height: calc(100dvh - 88px); display: grid; place-items: center; padding: 32px; background: radial-gradient(circle at 50% 40%, var(--accent-soft), transparent 45%), var(--surface-soft); }
.player-entry-card { width: min(480px, 100%); padding: 36px; border: 1px solid var(--line); border-radius: 19px; background: var(--surface); box-shadow: 0 22px 58px rgba(48,32,85,.14); }
.player-entry-card h3 { margin: 9px 0 8px; font-size: 27px; letter-spacing: -.035em; }
.player-entry-card > p { margin: 0 0 23px; color: var(--muted); font-size: 10px; line-height: 1.7; }
.player-entry-card form label { display: block; margin-bottom: 7px; color: var(--muted); font-size: 9px; font-weight: 700; }
.player-entry-card form input { width: 100%; height: 50px; margin-bottom: 10px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface-soft); color: var(--ink); font-size: 14px; }
.score-rule-card { display: grid; gap: 6px; margin-top: 20px; padding: 15px; border-radius: 11px; background: var(--accent-soft); }
.score-rule-card strong { margin-bottom: 2px; font-size: 10px; }
.score-rule-card span { color: var(--muted); font-size: 9px; line-height: 1.45; }
.prototype-shell { min-height: calc(100dvh - 88px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 38px clamp(20px,5vw,70px); background: var(--surface-soft); }
.prototype-head { width: min(900px,100%); margin-bottom: 25px; text-align:center }.prototype-head h3{margin:8px 0;font-size:clamp(24px,3vw,36px);letter-spacing:-.04em}.prototype-head p{max-width:680px;margin:0 auto;color:var(--muted);font-size:10px;line-height:1.7}.prototype-feedback{min-height:38px;margin:15px 0 8px;color:var(--accent-dark);font-size:10px;font-weight:700;text-align:center}.prototype-actions{display:flex;gap:9px;margin-top:21px}
.optical-line{width:min(980px,100%);display:flex;align-items:center;justify-content:center;gap:12px;padding:26px;border-radius:15px;background:#171226;color:white;box-shadow:0 18px 40px rgba(25,18,41,.18)}.optical-line strong,.optical-line span{min-width:145px;padding:18px;border:1px solid rgba(255,255,255,.13);border-radius:10px;background:rgba(255,255,255,.06);font-size:14px;font-weight:750;text-align:center}.optical-line strong{border-color:var(--beam);box-shadow:inset 0 -2px 0 var(--beam),0 0 18px color-mix(in srgb,var(--beam) 30%,transparent)}.optical-line i{width:42px;height:3px;background:linear-gradient(90deg,#8b7cff,#fff)}.component-bays{width:min(980px,100%);display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:17px}.component-bays section{padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}.component-bays section>b{display:block;margin-bottom:11px;color:var(--muted);font-size:10px;letter-spacing:.1em}.component-bays section>div{display:grid;grid-template-columns:1fr 1fr;gap:8px}.component-bays button{min-height:48px;padding:11px 7px;border:1px solid var(--line);border-radius:7px;background:var(--surface-soft);color:var(--ink);cursor:pointer;font-size:14px;font-weight:750;line-height:1.3}.component-bays button.selected{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}.component-bays button.correct{border-color:#45b885;background:#eaf9f2;color:#1a754e;font-size:16px;font-weight:850;box-shadow:0 0 0 3px rgba(69,184,133,.16);transform:scale(1.025)}.component-bays button.wrong{border-color:#e68b94;background:#fff0f1;color:#a63845}
.defense-slots{width:min(980px,100%);display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.defense-slots div{position:relative;min-height:112px;display:grid;place-items:center;padding:15px;border:1px dashed var(--line-strong);border-radius:11px;background:var(--surface)}.defense-slots div:not(:last-child)::after{content:"→";position:absolute;right:-12px;z-index:2;color:var(--accent);font-size:16px}.defense-slots span{position:absolute;left:9px;top:8px;color:var(--muted);font-size:10px}.defense-slots strong{font-size:14px;line-height:1.45;text-align:center}.defense-slots .filled{border-style:solid;border-color:#a894f5;background:var(--accent-soft)}.defense-pool{width:min(980px,100%);display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:24px}.defense-pool button{min-height:46px;padding:12px 17px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);cursor:pointer;font-size:14px;font-weight:750;line-height:1.35}.defense-pool button:disabled{opacity:.35}
.rescue-game{min-height:calc(100dvh - 88px);display:grid;grid-template-columns:minmax(300px,.8fr) minmax(420px,1.2fr);align-content:center;gap:25px;padding:45px max(30px,8vw);background:var(--surface-soft)}.rescue-monitor{grid-row:1/4;min-height:340px;display:flex;flex-direction:column;justify-content:center;padding:35px;border-radius:18px;background:#19132b;color:white;box-shadow:0 20px 50px rgba(25,19,43,.2)}.rescue-monitor>span{color:#a79dbb;font-size:8px;letter-spacing:.15em}.rescue-monitor>strong{font-size:clamp(18px,2.3vw,29px);line-height:1.45}.rescue-vitals{display:flex;align-items:end;gap:5px;height:70px;margin:28px 0}.rescue-vitals i{width:10px;height:35%;border-radius:5px;background:#45d9a3;animation:vitals .8s ease-in-out infinite alternate}.rescue-vitals i:nth-child(2){height:80%;animation-delay:.1s}.rescue-vitals i:nth-child(3){height:50%;animation-delay:.2s}.rescue-vitals i:nth-child(4){height:95%;animation-delay:.3s}.rescue-vitals i:nth-child(5){height:60%;animation-delay:.4s}@keyframes vitals{to{transform:scaleY(.55)}}.rescue-game .prototype-head{margin:0;text-align:left}.rescue-game .prototype-head p{margin:0}.rescue-options{display:grid;gap:8px}.rescue-options button{display:flex;align-items:center;justify-content:space-between;min-height:57px;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);cursor:pointer;font-size:10px;font-weight:700}.rescue-options button.correct{border-color:#45b885;background:#eaf9f2}.rescue-options button.wrong{border-color:#e68b94;background:#fff0f1}
.conveyor-game{min-height:calc(100dvh - 88px);padding:22px clamp(20px,5vw,65px);background:#161124;color:white}.conveyor-hud{display:flex;justify-content:space-between;max-width:1120px;margin:0 auto 10px}.conveyor-hud span{color:#9f96b2;font-size:8px}.conveyor-hud strong{display:block;color:white;font-size:23px;text-align:center}.conveyor-main{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:14px;max-width:1120px;margin:auto}.conveyor-belt{position:relative;height:430px;overflow:hidden;border-radius:15px;background:linear-gradient(#211a36,#151023)}.belt-help{position:absolute;left:20px;top:18px;color:#9188a6;font-size:8px;letter-spacing:.06em}.belt-line{position:absolute;left:0;right:0;bottom:72px;height:8px;background:#655d78;box-shadow:0 14px 0 #3d364d}.conveyor-cell{position:absolute;left:4%;bottom:98px;width:132px;height:132px;display:grid;place-items:center;border-radius:50%;background:var(--cell-color);box-shadow:0 0 34px var(--cell-color)}.conveyor-cell i{position:absolute;inset:9px;border:1px solid rgba(255,255,255,.46);border-radius:50%}.conveyor-cell strong{max-width:104px;font-size:13px;line-height:1.35;text-align:center}.conveyor-cell.run{animation:belt-run 5.2s linear both}@keyframes belt-run{from{left:4%}to{left:82%}}.conveyor-classifier{padding:13px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:#1d1730}.conveyor-classifier>span{display:block;margin-bottom:9px;color:#aaa1bc;font-size:8px;font-weight:800;letter-spacing:.12em}.tube-row{display:grid;grid-template-columns:1fr;gap:7px;margin:0}.tube-row button{min-height:66px;display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:9px;padding:8px 10px;border:1px solid rgba(255,255,255,.12);border-radius:9px;background:#241d38;color:white;cursor:pointer;text-align:left}.tube-row button:hover{border-color:#8b7cff;background:#312649}.tube-row button i{display:block;width:27px;height:39px;margin:0;border:2px solid #8b7cff;border-top:0}.tube-row button strong,.tube-row button small{display:block}.tube-row button strong{font-size:9px}.tube-row button small{margin-top:4px;color:#9f96b2;font-size:7px}.tube-row button b{color:#8b7cff;font-size:13px}.conveyor-game>.prototype-feedback{color:#c8bfff}
.spectrum-game,.rhythm-game{min-height:calc(100dvh - 88px);padding:18px clamp(14px,4vw,50px);background:#100c20;color:white}.spectrum-hud,.rhythm-hud{display:flex;align-items:center;justify-content:space-between;max-width:980px;margin:0 auto 10px;padding:10px 16px;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:#1d1730}.spectrum-hud span,.rhythm-hud span{color:#aaa1bc;font-size:9px}.spectrum-hud strong,.rhythm-hud strong{color:white}.spectrum-board{max-width:980px;margin:auto}.spectrum-board canvas,.rhythm-game canvas{display:block;width:100%;max-height:calc(100dvh - 190px);border-radius:14px;touch-action:none}.spectrum-board p,.rhythm-game>p{color:#9f96b2;font-size:8px;text-align:center}.rhythm-game canvas{max-width:980px;margin:auto}.rhythm-controls{display:flex;justify-content:center;gap:9px;margin-top:10px}.rhythm-controls button{min-width:160px;padding:12px;border:1px solid rgba(255,255,255,.15);border-radius:9px;background:#241d38;color:white;cursor:pointer;font-size:10px;font-weight:700}.rhythm-controls button:first-child{box-shadow:inset 0 -3px 0 #45d9a3}.rhythm-controls button:last-child{box-shadow:inset 0 -3px 0 #ff5d78}.rhythm-controls small{display:block;margin-top:3px;color:#9f96b2;font-size:7px}

@media (max-width: 1050px) {
  .topbar { grid-template-columns: 210px minmax(240px, 1fr) auto; }
  .app-shell { grid-template-columns: 210px minmax(0, 1fr); }
  .reagent-toolbar {
    grid-template-columns: minmax(150px, 1.5fr) repeat(7, minmax(72px, 1fr));
  }
  .reagent-toolbar .search-field { min-width: 150px; }
  .reagent-toolbar .toolbar-count { display: none; }
  .toolbar.reagent-toolbar select,
  .reagent-toolbar .search-field input { font-size: 9px; }
  .spectra-controls { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .spectra-controls > label:not(.spectra-check) { grid-column: span 2; }
  .hero-card { grid-template-columns: 1fr; }
  .hero-visual { display: none; }
  .designer-layout { grid-template-columns: 1fr; }
  .panel-design-guide-body { grid-template-columns: 1fr; }
  .brand-story { grid-template-columns: 1fr 1fr; }
  .goal-grid { grid-template-columns: 1fr 1fr; }
  .name-meaning:nth-child(3) { border-top: 1px solid var(--line); }
  .name-meaning:nth-child(4) { border-top: 1px solid var(--line); }
  .game-lobby { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .game-card { min-height: 390px; }
  .games-hero h1 { font-size: clamp(25px, 3.6vw, 38px); }
  .template-grid.list-view .template-card { grid-template-columns: 52px minmax(150px, .7fr) minmax(190px, 1fr) auto; grid-template-areas: "top title panel actions" "top title products actions"; }
}

@media (max-width: 760px) {
  .analysis-workspace-metrics { grid-template-columns: 1fr 1fr; }
  .analysis-workspace-metrics > div:nth-child(2) { border-right: 0; }
  .analysis-workspace-metrics > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .create-analysis-workspace-form { grid-template-columns: 1fr; }
  .create-experiment-workspace-form { grid-template-columns: 1fr; }
  .create-analysis-workspace-form button { width: 100%; }
  .create-experiment-workspace-form button { width: 100%; }
  .analysis-workspace-toolbar { align-items: stretch; flex-direction: column; }
  .analysis-workspace-toolbar .search-field { width: 100%; min-width: 0; flex-basis: auto; }
  .analysis-workspace-toolbar .workspace-status-filter { width: 100%; flex-basis: auto; }
  .analysis-workspace-toolbar > button { width: 100%; margin-left: 0; }
  .analysis-workspace-table { min-width: 0; }
  .analysis-workspace-list-head { display: none; }
  .analysis-workspace-row { grid-template-columns: 1fr; align-items: stretch; gap: 10px; padding: 17px; }
  .analysis-workspace-main p { white-space: normal; }
  .analysis-workspace-progress-cell,.analysis-workspace-updated-cell { padding-top: 9px; border-top: 1px solid var(--line); }
  .analysis-workspace-banner { align-items: stretch; flex-direction: column; }
  .analysis-workspace-item-actions { align-items: stretch; justify-content: flex-start; flex-direction: column; }
  .analysis-workspace-item-actions > *,.analysis-workspace-banner button { width: 100%; }
  .reusable-source-options { grid-template-columns: 1fr; }
  .designer-head-actions,.experiment-plan-history-item { align-items: stretch; flex-direction: column; width: 100%; }
  .designer-stage-strip,.group-name-grid,.marker-expression-grid { grid-template-columns: 1fr; }
  .panel-editor-row { grid-template-columns: 1fr; }
  .panel-option-detail { grid-column: 1; }
  .plan-external-grid article { grid-template-columns: 1fr; }
  .plan-external-grid article > div:last-child { justify-content: flex-start; }
  .panel-confirm-actions { flex-direction: column; }
  .plan-purpose { grid-template-columns: 1fr; }
  .viability-recommendations { grid-template-columns: 1fr; }
  .plan-template-grid { grid-template-columns: 1fr; }
  .panel-design-guide-steps { grid-template-columns: 1fr; }
  .panel-guide-reference .evidence-links { grid-template-columns: 1fr; }
  .template-match-banner { grid-template-columns: 1fr; }
  .admin-metrics, .admin-grid { grid-template-columns: 1fr; }
  .review-history-head { align-items: stretch; flex-direction: column; }
  .review-history-toolbar { grid-template-columns: 1fr; }
  .review-history-item { grid-template-columns: 1fr; }
  .review-history-audit { grid-template-columns: 1fr 1fr; }
  .review-history-note { padding: 10px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .resource-item { grid-template-columns: 56px minmax(0, 1fr); }
  .resource-item > span { width: 56px; }
  .resource-actions { grid-column: 1 / -1; }
  .topbar { grid-template-columns: auto 1fr auto; height: 62px; padding: 0 14px; gap: 10px; }
  .mobile-menu { display: block; }
  .brand-lockup small, .global-search-wrap, .local-badge { display: none; }
  .kimi-status span { display: none; }
  .kimi-status { min-width: 34px; justify-content: center; padding: 0; }
  .brand-lockup { justify-self: center; }
  .brand-mark { width: 32px; height: 32px; }
  .avatar { width: 34px; height: 34px; }
  .app-shell { display: block; min-height: calc(100vh - 62px); }
  .sidebar { position: fixed; z-index: 50; top: 62px; left: 0; width: min(290px, 86vw); height: calc(100vh - 62px); transform: translateX(-105%); transition: transform .22s ease; box-shadow: var(--shadow); }
  .sidebar.open { transform: none; }
  .content { padding: 22px 12px 56px; }
  .hero-card { min-height: auto; padding: 32px 23px; border-radius: 17px; }
  .hero-copy h1 { font-size: 34px; }
  .hero-copy > p { font-size: 13px; }
  .hero-actions { flex-direction: column; }
  .hero-actions button { width: 100%; }
  .brand-story { grid-template-columns: 1fr; }
  .name-meaning { border-top: 1px solid var(--line); border-left: 0; }
  .section-head, .page-head { align-items: flex-start; flex-direction: column; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-grid { grid-template-columns: 1fr; }
  .review-banner { grid-template-columns: auto 1fr; }
  .review-banner button { grid-column: 1 / -1; width: 100%; }
  .form-grid.two { grid-template-columns: 1fr; }
  .template-view-controls { align-items: stretch; flex-direction: column; }
  .template-layout-toggle { align-self: flex-start; }
  .template-grid.list-view .template-card { display: flex; padding: 14px; }
  .template-grid.list-view .template-top { display: flex; }
  .template-grid.list-view .template-actions { width: 100%; }
  .reagent-picker-options { grid-template-columns: 1fr; }
  .toolbar { align-items: stretch; flex-direction: column; }
  .toolbar select { width: 100%; }
  .toolbar-count { margin-left: 0; }
  .table-card { overflow: visible; background: transparent; border: 0; box-shadow: none; }
  .reagent-table, .reagent-table tbody { display: block; }
  .reagent-table thead { display: none; }
  .reagent-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-bottom: 10px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); }
  .reagent-table td { min-width: 0; padding: 0; border: 0; }
  .reagent-table td::before { content: attr(data-label); display: block; margin-bottom: 3px; color: var(--muted); font-size: 7px; font-weight: 700; letter-spacing: .04em; }
  .reagent-table td:nth-child(1), .reagent-table td:nth-child(7) { grid-column: 1 / -1; }
  .reagent-table tbody tr:hover td { background: transparent; }
  .spectra-head { flex-direction: column; }
  .spectra-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spectra-controls > label:not(.spectra-check), .spectra-controls > button { grid-column: 1 / -1; }
  #spectra-canvas { height: 320px; }
  .spectra-line-key { position: static; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
  .goal-grid, .guide-grid { grid-template-columns: 1fr; }
  .instrument-tutorials, .tutorial-content-grid { grid-template-columns: 1fr; }
  .flow-analysis-guide-intro { align-items: flex-start; flex-direction: column; }
  .knowledge-search { grid-template-columns: auto 1fr; }
  .knowledge-search button { grid-column: 1 / -1; }
  .knowledge-ai-head { flex-direction: column; }
  .knowledge-ai-form { grid-template-columns: 1fr; }
  .knowledge-ai-form button { min-height: 44px; }
  .system-guide-list { grid-template-columns: 1fr; }
  .chat-message { max-width: 100%; }
  .knowledge-body { margin-left: 0; }
  .input-row { grid-template-columns: 1fr; }
  .actions { flex-direction: column; }
  .dialog-fields { grid-template-columns: 1fr; }
  .dialog-fields .wide { grid-column: auto; }
  dialog { width: calc(100% - 18px); max-height: calc(100vh - 18px); max-height: calc(100dvh - 18px); }
  .history-dialog-shell { height: calc(100vh - 18px); height: calc(100dvh - 18px); padding: 18px; }
  #history-dialog { width: calc(100% - 18px); }
  .history-item { grid-template-columns: 76px minmax(0, 1fr); gap: 7px 12px; padding: 15px 9px 17px; }
  .history-date { grid-column: 2; padding-top: 0; text-align: left; }
  #record-form { max-height: calc(100vh - 18px); max-height: calc(100dvh - 18px); padding: 18px; }
  #record-form .dialog-actions { bottom: -18px; margin: 0 -18px -18px; padding: 12px 18px 18px; }
  #auth-form { max-height: calc(100vh - 18px); max-height: calc(100dvh - 18px); padding: 18px; }
  #auth-form .dialog-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #auth-form .dialog-actions button { width: 100%; }
  .games-hero { grid-template-columns: 1fr 1fr; padding: 28px 23px; gap: 20px; }
  .games-hero > div:first-child { grid-column: 1 / -1; }
  .games-hero-stat { padding-left: 0; border-left: 0; }
  .games-hero h1 { white-space: normal; }
  .game-lobby { grid-template-columns: 1fr; }
  .game-card { min-height: 385px; }
  .game-stage-head { grid-template-columns: 1fr auto auto; }
  .game-stage-title { grid-column: 1 / -1; grid-row: 2; }
  .game-player, .game-score { min-width: 58px; padding-left: 10px; }
  .game-runtime { min-height: 640px; }
  .arcade-playing .game-stage-head { min-height: 112px; }
  .arcade-playing .game-runtime { min-height: 0; }
  .arcade-playing .play-layout, .arcade-playing .sort-game, .arcade-playing .game-finish { min-height: calc(100dvh - 112px); }
  .arcade-playing .ninja-shell { min-height: calc(100dvh - 112px); }
  .arcade-playing .ninja-canvas-wrap { height: calc(100dvh - 182px); min-height: 420px; }
  .play-layout, .sort-game { grid-template-columns: 1fr; }
  .play-brief { padding: 23px; border-right: 0; border-bottom: 1px solid var(--line); }
  .play-board { min-height: 430px; padding: 12px; }
  .quiz-options, .panel-choices { grid-template-columns: 1fr; }
  .quiz-options button { min-height: 48px; }
  .sort-machine { min-height: 330px; }
  .ninja-hud { height: auto; grid-template-columns: 55px 1fr 55px; gap: 7px; padding: 7px; }
  .ninja-target { min-width: 0; width: 100%; padding: 6px; }
  .ninja-target strong { font-size: 16px!important; }
  .ninja-canvas-wrap { height: 520px; }
  .match-shell { grid-template-columns: 1fr; gap: 13px; padding: 14px; }
  .match-guide { padding: 14px; }
  .fluor-key { grid-template-columns: 1fr 1fr; }
  .match-board-wrap { width: 100%; overflow: auto; }
  .match-grid { width: max-content; grid-template-columns: repeat(var(--match-size), minmax(42px, 1fr)); gap: 4px; margin: auto; padding: 9px; }
  .match-grid button { width: 100%; height: auto; aspect-ratio: 1; }
  .match-grid button i { width: 62%; height: 62%; }
  .match-effects { display: none; }
  .player-entry { min-height: calc(100dvh - 112px); padding: 17px; }
  .player-entry-card { padding: 24px; }
  .prototype-shell { min-height: calc(100dvh - 112px); padding: 24px 14px; }
  .optical-line { display: grid; grid-template-columns: 1fr; gap: 6px; }
  .optical-line i { width: 2px; height: 12px; margin: auto; }
  .component-bays { grid-template-columns: 1fr; }
  .defense-slots { grid-template-columns: 1fr; }
  .defense-slots div { min-height: 54px; }
  .defense-slots div:not(:last-child)::after { right: 50%; bottom: -13px; transform: rotate(90deg); }
  .rescue-game { min-height: calc(100dvh - 112px); grid-template-columns: 1fr; padding: 22px 14px; }
  .rescue-monitor { grid-row: auto; min-height: 220px; }
  .conveyor-main { grid-template-columns: 1fr; }
  .tube-row { grid-template-columns: repeat(2,1fr); }
  .tube-row button:last-child { grid-column: 1/-1; }
  .conveyor-game,.spectrum-game,.rhythm-game { min-height: calc(100dvh - 112px); }
  .conveyor-belt { height: 230px; }
  .conveyor-cell { bottom: 77px; width: 82px; height: 82px; }
  .conveyor-cell strong { max-width: 64px; font-size: 9px; }
  .rhythm-controls button { min-width: 120px; }
}

@media (max-height: 720px) {
  #auth-form { padding: 16px 20px; }
  #auth-form .dialog-head h2 { font-size: 18px; }
  #auth-form .secret-note { margin-top: 10px; padding: 10px 12px; }
  #auth-form label { gap: 5px; margin-top: 9px; }
  #auth-form input { min-height: 36px; }
  #auth-form .dialog-actions { margin-top: 12px; padding-top: 10px; }
}

@media (max-width: 430px) {
  .metric-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .metric { min-height: 96px; padding: 14px; }
  .metric-value { font-size: 25px; }
  .control-list li { grid-template-columns: 1fr; gap: 4px; }
  .instrument-grid, .template-grid { grid-template-columns: 1fr; }
}

.analysis-upload-box { display: grid; grid-template-columns: minmax(260px,1fr) auto; align-items: center; gap: 18px; margin-bottom: 10px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(135deg,var(--surface-soft),var(--surface)); }
.analysis-upload-box h3 { margin: 5px 0; font-size: 17px; }
.analysis-upload-box p { margin: 0; color: var(--muted); font-size: 9px; }
.analysis-file-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 10px; background: var(--accent); color: white; cursor: pointer; font-size: 10px; font-weight: 800; box-shadow: 0 9px 20px color-mix(in srgb,var(--accent) 20%,transparent); }
.analysis-file-button:hover { filter: brightness(1.05); transform: translateY(-1px); }
.analysis-file-button input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.analysis-file-selection { grid-column: 1 / -1; min-height: 42px; display: flex; align-items: center; padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: 9px; color: var(--muted); font-size: 9px; }
.analysis-file-selection.ready { display: grid; gap: 3px; border-style: solid; border-color: var(--success); background: var(--success-soft); color: var(--ink); }
.analysis-file-selection.ready span { color: var(--muted); overflow-wrap: anywhere; }
.analysis-service-status { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 12px; margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.analysis-service-status > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; font-weight: 900; }
.analysis-service-status strong,.analysis-service-status p { display: block; margin: 0; }
.analysis-service-status p { margin-top: 2px; color: var(--muted); font-size: 8px; line-height: 1.55; }
.analysis-service-status.checking > span { background: var(--accent-soft); color: var(--accent); }
.analysis-service-status.ready { border-color: color-mix(in srgb,var(--success) 45%,var(--line)); background: var(--success-soft); }
.analysis-service-status.ready > span { background: var(--success); color: white; }
.analysis-service-status.blocked { align-items: start; border-color: color-mix(in srgb,var(--red) 45%,var(--line)); background: var(--red-soft); }
.analysis-service-status.blocked > span { background: var(--red); color: white; }
.analysis-service-status.blocked ol { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 8px 0 0; padding-left: 18px; color: var(--ink); font-size: 8px; }
.analysis-service-status.blocked code { padding: 2px 5px; border-radius: 4px; background: var(--surface); }
.analysis-stepper span.current { border-color: var(--accent); background: var(--accent); color: white; box-shadow: 0 5px 12px color-mix(in srgb,var(--accent) 18%,transparent); }
.analysis-stepper span.done::before { content: "✓ "; font-weight: 900; }
.workspace-gate-export { margin-top: 14px; padding: 20px; }
.workspace-gate-export-head { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.workspace-gate-export-head h3 { margin: 5px 0 3px; }
.workspace-gate-export-head p { margin: 0; color: var(--muted); }
.workspace-gate-export-tools,.workspace-gate-export-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.workspace-gate-selector { display: grid; grid-template-columns: 1fr; gap: 0; margin: 14px 0; max-height: 360px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.workspace-gate-option { display: grid; grid-template-columns: minmax(260px,1fr) 95px 120px minmax(180px,240px) auto; align-items: center; gap: 10px; min-width: 0; margin: 0; padding: 9px 12px 9px calc(12px + var(--gate-indent, 0px)); border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: var(--surface); font-weight: 500; }
.workspace-gate-option:last-child { border-bottom: 0; }
.workspace-gate-option:hover { background: var(--surface-soft); }
.workspace-gate-option:has(input:checked) { background: var(--accent-soft); }
.workspace-gate-option strong { overflow-wrap: anywhere; font-size: 11px; line-height: 1.35; }
.workspace-gate-option em { color: var(--muted); font-size: 9px; font-style: normal; white-space: nowrap; }
.workspace-gate-metric { width: fit-content; display: inline-flex; align-items: center; gap: 7px; margin: 0; cursor: pointer; color: var(--muted); font-size: 9px; font-weight: 750; white-space: nowrap; }
.workspace-gate-metric input { width: 17px; min-height: 17px; margin: 0; padding: 0; accent-color: var(--accent); }
.workspace-gate-metric:has(input:checked) { color: var(--accent); }
.workspace-percentage-denominator { width: 100%; min-width: 0; min-height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); font-size: 9px; }
.workspace-percentage-denominator:disabled { cursor: not-allowed; opacity: .45; }
.workspace-gate-export-actions .status-line { flex: 1; min-width: 220px; margin: 0; }
.workspace-gate-export-actions .status-line a { margin-left: 8px; color: var(--accent); font-weight: 800; }
.status-line.success { color: var(--success); }
.status-line.warning { color: var(--amber); }
.workspace-binding-guide { display: grid; grid-template-columns: minmax(260px,1fr) auto; align-items: center; gap: 20px; margin: 12px 0 16px; padding: 22px 24px; }
.workspace-binding-guide.complete { border-color: color-mix(in srgb,var(--success) 45%,var(--line)); background: linear-gradient(120deg,var(--surface),var(--success-soft)); }
.workspace-binding-guide.incomplete { border-color: color-mix(in srgb,var(--amber) 50%,var(--line)); background: linear-gradient(120deg,var(--surface),var(--amber-soft)); }
.workspace-binding-guide h3 { margin: 5px 0 4px; font-size: 17px; }
.workspace-binding-guide p { margin: 0; color: var(--muted); }
.workspace-binding-guide ul { display: grid; gap: 6px; margin: 13px 0 0; padding: 0; list-style: none; }
.workspace-binding-guide li { overflow-wrap: anywhere; }
.workspace-binding-guide code { display: inline-block; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); }
.binding-actions { display: grid; justify-items: end; gap: 10px; }
.binding-state { display: inline-flex; padding: 7px 10px; border-radius: 99px; background: var(--surface); color: var(--ink); font-size: 8px; font-weight: 800; white-space: nowrap; }
.gate-tree-details { border-top: 1px solid var(--line); }
.gate-tree-details summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 17px; color: var(--accent); cursor: pointer; font-size: 9px; font-weight: 800; list-style: none; }
.gate-tree-details summary::-webkit-details-marker { display: none; }
.gate-tree-details summary::before { content: "＋"; margin-right: 7px; }
.gate-tree-details[open] summary::before { content: "－"; }
.gate-tree-details summary span { margin-left: auto; padding: 4px 7px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); font-size: 8px; }
#analyze-button:disabled { cursor: not-allowed; }
@media (max-width: 760px) {
  .workspace-binding-guide { grid-template-columns: 1fr; }
  .binding-actions { justify-items: start; }
  .workspace-wsp-batch { grid-template-columns: 1fr; }
}
.scan-next-step { display: grid; grid-template-columns: minmax(260px,1fr) auto; align-items: center; gap: 20px; margin-top: 16px; padding: 22px 24px; border-color: color-mix(in srgb,var(--accent) 35%,var(--line)); background: linear-gradient(120deg,var(--surface),var(--accent-soft)); }
.scan-next-step[hidden] { display: none; }
.scan-next-step h3 { margin: 5px 0; }
.scan-next-step p { max-width: 700px; margin: 0; color: var(--muted); }
.scan-next-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.analysis-file-pickers { margin: 18px 0 4px; }
.analysis-file-pickers input[type="file"] { padding: 10px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface-soft); }
.workspace-wsp-batch { display: grid; grid-template-columns: minmax(260px,420px) 1fr; align-items: end; gap: 14px; margin: 12px 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--accent-soft); }
.workspace-wsp-batch[hidden] { display: none; }
.workspace-wsp-batch .help { margin: 0 0 8px; }
.validation-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 14px; padding: 28px 30px; background: linear-gradient(120deg,var(--surface),var(--accent-soft)); }
.validation-head h2 { margin: 6px 0; font-size: 27px; letter-spacing: -.04em; }
.validation-head p { max-width: 760px; margin: 0; color: var(--muted); }
.validation-empty { min-height: 260px; display: grid; place-items: center; align-content: center; gap: 8px; text-align: center; }
.validation-empty > span,.validation-no-findings > span { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--success-soft); color: var(--success); font-size: 20px; font-weight: 900; }
.validation-empty h3,.validation-empty p { margin: 0; }
.validation-empty p { max-width: 560px; color: var(--muted); }
.validation-summary { margin-bottom: 14px; }
.validation-grid { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(280px,.8fr); gap: 14px; }
.validation-grid > .card,.biological-review-card { padding: 22px; }
.validation-finding { display: grid; gap: 6px; margin-top: 8px; padding: 12px 14px; border: 1px solid var(--line); border-left-width: 4px; border-radius: 10px; background: var(--surface-soft); }
.validation-finding > div { display: flex; align-items: center; gap: 7px; }
.validation-finding > div span { font-size: 7px; font-weight: 900; letter-spacing: .08em; }
.validation-finding code { color: var(--muted); font-size: 8px; }
.validation-finding strong { font-size: 10px; line-height: 1.55; }
.validation-finding small { color: var(--muted); }
.validation-finding.error { border-left-color: var(--red); }
.validation-finding.error > div span { color: var(--red); }
.validation-finding.warning { border-left-color: var(--amber); }
.validation-finding.warning > div span { color: var(--amber); }
.validation-finding.info { border-left-color: var(--accent); }
.validation-finding.info > div span { color: var(--accent); }
.validation-no-findings { min-height: 220px; display: grid; place-items: center; align-content: center; gap: 8px; text-align: center; }
.validation-no-findings p { max-width: 420px; margin: 0; color: var(--muted); }
.validation-provenance { display: grid; gap: 0; }
.validation-provenance > div { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.validation-provenance span { color: var(--muted); font-size: 8px; }
.validation-provenance code { overflow-wrap: anywhere; color: var(--ink); }
.validation-provenance > p { margin: 14px 0 0; padding: 11px; border-radius: 9px; background: var(--amber-soft); color: var(--amber); font-size: 8px; line-height: 1.6; }
.validation-decision { display: inline-flex; width: fit-content; padding: 4px 7px; border-radius: 99px; font-size: 7px; font-weight: 900; letter-spacing: .04em; }
.validation-decision.validated { background: var(--success-soft); color: var(--success); }
.validation-decision.review { background: var(--amber-soft); color: var(--amber); }
.validation-decision.rejected { background: var(--red-soft); color: var(--red); }
.biological-review-card { margin-top: 14px; }
.biological-review-card h3 { margin: 5px 0 14px; }
.biological-review-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: 8px; }
.biological-review-list span { padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); color: var(--muted); font-size: 9px; }
.history-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 14px; padding: 28px 30px; background: linear-gradient(120deg,var(--surface),var(--accent-soft)); }
.history-head h2 { margin: 6px 0; font-size: 27px; letter-spacing: -.04em; }
.history-head p { max-width: 720px; margin: 0; color: var(--muted); }
.analysis-history-metrics { margin: 14px 0; }
.analysis-history-toolbar { display: grid; grid-template-columns: minmax(0,1fr) 190px 90px; align-items: center; gap: 10px; margin-bottom: 10px; padding: 12px; }
.analysis-history-toolbar .search-field { width: 100%; min-width: 0; min-height: 44px; }
.analysis-history-toolbar .search-field input { width: 100%; min-height: 42px; font-size: 10px; }
.analysis-history-toolbar select { width: 100%; min-height: 44px; }
.analysis-history-toolbar .toolbar-count { margin: 0; padding: 0; text-align: right; }
.analysis-history-list { display: grid; gap: 12px; }
.analysis-history-item { display: grid; grid-template-columns: minmax(330px,1fr) auto; align-items: center; gap: 18px; padding: 20px 22px; transition: border-color .18s ease,transform .18s ease; }
.analysis-history-item:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.analysis-history-main { display: grid; grid-template-columns: 52px minmax(0,1fr); align-items: center; gap: 14px; min-width: 0; }
.analysis-history-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: var(--accent-soft); color: var(--accent); font-size: 8px; font-weight: 900; letter-spacing: .06em; }
.analysis-history-title { display: flex; align-items: center; gap: 9px; }
.analysis-history-title time { color: var(--muted); font-size: 8px; }
.analysis-history-item h3 { margin: 7px 0 5px; font-size: 15px; }
.analysis-history-item p { min-width: 0; margin: 0; color: var(--muted); font-size: 8px; }
.analysis-history-item p span { display: inline-block; max-width: min(520px,55vw); overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; white-space: nowrap; }
.analysis-history-summary { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.analysis-history-side { display: grid; justify-items: end; gap: 10px; }
.history-record-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.history-delete-button { padding: 6px 9px; border: 1px solid color-mix(in srgb,var(--red) 35%,var(--line)); border-radius: 7px; background: var(--surface); color: var(--red); cursor: pointer; font-size: 8px; font-weight: 750; }
.history-delete-button:hover { background: var(--red-soft); }
.history-delete-button:disabled { cursor: wait; opacity: .55; }
.analysis-history-summary span { min-width: 96px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.analysis-history-summary b { display: block; margin-bottom: 4px; color: var(--muted); font-size: 7px; font-weight: 700; letter-spacing: .04em; }
.analysis-history-summary strong { color: var(--ink); font-size: 15px; }
.analysis-history-output { grid-column: 1 / -1; display: grid; grid-template-columns: 64px minmax(0,1fr); align-items: center; gap: 10px; padding-top: 13px; border-top: 1px solid var(--line); }
.analysis-history-output > span { color: var(--muted); font-size: 8px; font-weight: 800; }
.analysis-history-output code { min-width: 0; padding: 9px 11px; overflow: hidden; border-radius: 8px; background: var(--surface-soft); color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.analysis-history-empty { min-height: 230px; display: grid; place-items: center; align-content: center; gap: 8px; text-align: center; }
.analysis-history-empty > span { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 20px; font-weight: 800; }
.analysis-history-empty h3,.analysis-history-empty p { margin: 0; }
.analysis-history-empty p { max-width: 540px; color: var(--muted); }
.analysis-history-empty.error-state > span { background: var(--red-soft); color: var(--red); }
.analysis-history-empty button { margin-top: 8px; }
.reusable-analysis-input { display: grid; gap: 16px; padding: 24px; }
.reusable-analysis-input h2 { margin: 5px 0; font-size: 22px; }
.reusable-analysis-input p { margin: 0; color: var(--muted); }
.reusable-source-picker { min-width: 0; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.reusable-source-picker legend { padding: 0 6px; color: var(--ink); font-size: 10px; font-weight: 800; }
.reusable-source-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.reusable-source-options > label { min-width: 0; display: flex; align-items: flex-start; gap: 8px; padding: 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; }
.reusable-source-options > label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.reusable-source-options input { flex: none; width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--accent); }
.reusable-source-options span { min-width: 0; display: grid; gap: 3px; }
.reusable-source-options strong { font-size: 9px; line-height: 1.35; }
.reusable-source-options small { color: var(--muted); font-size: 8px; line-height: 1.4; }
.reusable-source-panel { min-width: 0; }
.reusable-source-panel[hidden] { display: none; }
.reusable-source-panel > label:not(.analysis-file-button) { display: grid; gap: 6px; font-size: 10px; font-weight: 750; }
.reusable-wsp-file-button { width: fit-content; }
.reusable-wsp-file-selection { margin-top: 8px; }
.compatibility-warning { margin: 12px 0; padding: 16px 18px; border-color: color-mix(in srgb,var(--amber) 45%,var(--line)); background: var(--amber-soft); }
.compatibility-warning p { margin: 4px 0 10px; color: var(--muted); }
.compatibility-warning ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.compatibility-warning li { display: flex; justify-content: space-between; gap: 12px; padding-top: 6px; border-top: 1px solid color-mix(in srgb,var(--amber) 25%,var(--line)); }
.compatibility-warning li span { color: var(--muted); }
.reusable-file-button { width: fit-content; }
#reusable-analysis-summary { grid-template-columns: repeat(3,minmax(105px,.48fr)) minmax(210px,.8fr) minmax(420px,2fr) !important; gap: 10px; }
#reusable-analysis-summary .metric { min-width: 0; min-height: 70px; padding: 11px 13px; overflow: hidden; }
#reusable-analysis-summary .metric-top { font-size: 8px; line-height: 1.2; }
#reusable-analysis-summary .metric-icon { width: 23px; height: 23px; border-radius: 8px; font-size: 9px; }
#reusable-analysis-summary .metric-value { margin-top: 7px; font-size: 18px; line-height: 1.15; }
#reusable-analysis-summary .validation-decision-metric .metric-value { font-size: 14px; line-height: 1.25; letter-spacing: -.02em; overflow-wrap: anywhere; word-break: break-word; }
#reusable-analysis-summary .template-prototype-metric .metric-value { font-size: 12px; line-height: 1.3; letter-spacing: 0; white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.gate-workbench { --gate-tree-width: 190px; --gate-stats-width: 230px; display: grid; grid-template-columns: var(--gate-tree-width) minmax(0,2fr) var(--gate-stats-width); gap: 12px; margin-top: 14px; align-items: start; }
.gate-workbench > .card { min-width: 0; padding: 18px; }
.workbench-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.workbench-panel-head > div { min-width: 0; }
.workbench-panel-head h3 { margin: 4px 0 0; font-size: 14px; line-height: 1.2; }
.workbench-panel-head p { margin: 4px 0 0; color: var(--muted); }
.gate-workbench-tree { position: relative; }
.gate-workbench-tree > label { margin-bottom: 10px; font-size: 10px; }
.gate-workbench-tree select { min-height: 34px; padding: 0 9px; font-size: 10px; }
#workbench-gate-tree { max-height: 600px; overflow: auto; padding-right: 3px; }
.gate-tree-button { width: calc(100% - var(--gate-depth) * 8px); min-height: 30px; display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 2px 0 2px calc(var(--gate-depth) * 8px); padding: 5px 7px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--ink); cursor: pointer; text-align: left; font-size: 10px; line-height: 1.25; }
.gate-tree-button:hover,.gate-tree-button.active { border-color: var(--line-strong); background: var(--accent-soft); color: var(--accent); }
.gate-tree-button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gate-tree-button small { flex: none; color: var(--muted); font-size: 9px; }
.workbench-column-resizer { position: absolute; top: 12px; z-index: 8; width: 12px; height: 34px; min-width: 12px; min-height: 34px; margin: 0; padding: 0; border: 1px solid var(--line-strong); border-radius: 99px; background: var(--surface); cursor: col-resize; box-shadow: var(--shadow); touch-action: none; }
.workbench-column-resizer::after { content: "⋮"; color: var(--muted); font-size: 10px; line-height: 30px; }
.workbench-column-resizer:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.workbench-tree-resizer { right: -6px; }
.workbench-stats-resizer { left: -6px; }
.gate-workbench-plot { overflow: hidden; }
.cytometry-plot { position: relative; min-width: 0; min-height: 500px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.cytometry-plot canvas { width: 100%; display: block; }
.plot-empty { min-height: 500px; display: grid; place-items: center; padding: 30px; color: var(--muted); text-align: center; }
.plot-empty.error { color: var(--red); }
.plot-caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5px 14px; padding: 9px 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 8px; }
#workbench-current-stats { min-width: 0; width: 100%; grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap: 7px; margin: 0 0 9px; overflow: hidden; }
#workbench-current-stats .metric { min-width: 0; min-height: 58px; padding: 9px 10px; overflow: hidden; border-radius: 8px; background: var(--surface-soft); }
#workbench-current-stats .metric-top { gap: 5px; font-size: 12px; font-weight: 750; line-height: 1.2; }
#workbench-current-stats .metric-top > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#workbench-current-stats .metric-icon { flex: none; width: 18px; height: 18px; border-radius: 5px; font-size: 7px; }
#workbench-current-stats .metric-value { margin-top: 6px; overflow: hidden; font-size: 18px; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
.gate-workbench-stats { position: relative; }
.gate-workbench-stats > button:not(.workbench-column-resizer) { width: 100%; margin-top: 2px; }
.workbench-axis-controls { display: grid; gap: 8px; width: 100%; margin: 10px 0 8px; }
.workbench-axis-controls[hidden], .workbench-axis-row[hidden] { display: none; }
.workbench-axis-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; }
.workbench-axis-row { min-width: 0; display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1.2fr) repeat(3,minmax(0,.82fr)); align-items: end; gap: 8px; margin: 0; padding: 11px 12px 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); }
.workbench-axis-row legend { padding: 0 5px; color: var(--accent); font-size: 8px; font-weight: 850; letter-spacing: .04em; }
.workbench-axis-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 8px; line-height: 1.4; }
.workbench-axis-actions { flex: none; display: flex; justify-content: flex-end; gap: 5px; }
.workbench-axis-controls label { display: grid; gap: 3px; color: var(--muted); font-size: 8px; font-weight: 750; }
.workbench-axis-controls select { width: 100%; min-width: 0; max-width: none; min-height: 31px; padding: 0 24px 0 7px; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.workbench-axis-controls input { width: 100%; min-width: 0; box-sizing: border-box; min-height: 31px; padding: 0 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font-size: 9px; }
.workbench-axis-controls button { min-height: 29px; padding: 0 8px; font-size: 8px; }
.workbench-axis-note { margin: 0 0 8px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-soft); color: var(--muted); font-size: 8px; line-height: 1.45; }
.workbench-axis-note.error { border-color: color-mix(in srgb,var(--red) 45%,var(--line)); background: color-mix(in srgb,var(--red) 7%,var(--surface)); color: var(--red); font-weight: 750; }
.gate-editor { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.gate-editor h4 { margin: 0 0 8px; font-size: 11px; }
.gate-editor p { margin: 5px 0 10px; color: var(--muted); font-size: 8px; line-height: 1.5; }
.gate-editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.gate-editor label { display: grid; gap: 4px; color: var(--muted); font-size: 8px; }
.gate-editor input, .gate-editor textarea { width: 100%; box-sizing: border-box; padding: 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit; }
.gate-editor textarea { min-height: 120px; resize: vertical; font-family: "Cascadia Code", Consolas, monospace; font-size: 8px; }
.gate-editor-actions { display: grid; gap: 6px; margin-top: 9px; }
.gate-editor-actions button { width: 100%; }
.gate-save-as-note { margin: 7px 0 0 !important; padding: 7px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-soft); }
.gate-editor-status { margin-top: 7px; color: var(--muted); font-size: 8px; line-height: 1.45; overflow-wrap: anywhere; }
.gate-editor-status.error { color: var(--red); }
.gate-editor-status.success { color: var(--green); }
.gate-editor-idle { min-height: 150px; display: flex; flex-direction: column; justify-content: flex-start; }
.gate-editor-idle small { color: var(--muted); font-size: 7px; line-height: 1.45; overflow-wrap: anywhere; }
.gate-quadrant-preview-label { pointer-events: none; fill: #4b2bd2; stroke: rgba(255,255,255,.96); stroke-width: 4px; paint-order: stroke fill; font: 700 10px Arial, sans-serif; }
.gate-nudge-panel { display: grid; gap: 7px; margin-top: 10px; padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); }
.gate-nudge-panel h5 { margin: 0; font-size: 9px; }
.gate-nudge-panel > p { margin: 0; }
.gate-nudge-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.gate-nudge-settings label:first-child { grid-column: 1 / -1; }
.gate-nudge-settings.quadrant-nudge-settings label:first-child { grid-column: auto; }
.gate-nudge-settings select,.gate-nudge-settings input { min-width: 0; min-height: 31px; }
.gate-nudge-pad { display: grid; grid-template-columns: repeat(3,34px); grid-template-rows: repeat(3,32px); justify-content: center; gap: 4px; }
.gate-nudge-pad button { min-width: 0; min-height: 0; padding: 0; font-size: 15px; line-height: 1; }
.gate-nudge-pad [data-gate-nudge="up"] { grid-column: 2; grid-row: 1; }
.gate-nudge-pad [data-gate-nudge="left"] { grid-column: 1; grid-row: 2; }
.gate-nudge-pad [data-gate-nudge="right"] { grid-column: 3; grid-row: 2; }
.gate-nudge-pad [data-gate-nudge="down"] { grid-column: 2; grid-row: 3; }
.current-gate-export-options { min-width: 0; display: grid; gap: 8px; margin-top: 12px; padding: 10px; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); }
.current-gate-export-options[hidden] { display: none; }
.current-gate-export-options h4 { margin: 0; font-size: 10px; }
.current-gate-export-options p { margin: 0; color: var(--muted); font-size: 8px; line-height: 1.45; }
.current-gate-export-metrics { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr); gap: 7px; }
.current-gate-export-metrics label { min-width: 0; display: flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 9px; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); font-size: 9px; font-weight: 750; }
.current-gate-export-metrics input { width: 17px; height: 17px; accent-color: var(--accent); }
.current-gate-export-denominator { display: grid; gap: 4px; color: var(--muted); font-size: 8px; font-weight: 750; }
.current-gate-export-denominator select { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; min-height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); }
.current-gate-export-options > button { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; margin-top: 0; white-space: normal; }
.gate-statistics-panel { margin-top: 14px; padding: 20px; overflow: hidden; }
.gate-statistics-actions { display: flex; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.gate-statistics-actions button { min-height: 31px; padding: 0 10px; font-size: 8px; }
.selected-gate-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.selected-gate-chips button { padding: 6px 9px; border: 1px solid var(--line); border-radius: 99px; background: var(--accent-soft); color: var(--accent); cursor: pointer; font-size: 8px; }
.selected-gate-chips > span { color: var(--muted); font-size: 9px; }
.cytometry-plot.gate-drag-active canvas { cursor: default; touch-action: none; }
.gate-drag-overlay { position: absolute; inset: 0 auto auto 0; z-index: 6; width: 100%; height: var(--gate-canvas-height,570px); overflow: visible; cursor: crosshair; pointer-events: auto; touch-action: none; user-select: none; outline: none; }
.gate-drag-svg-frame { fill: rgba(109,69,255,.07); stroke: #6d45ff; stroke-width: 2.5; vector-effect: non-scaling-stroke; cursor: move; pointer-events: all; }
.gate-drag-svg-polygon { fill: rgba(109,69,255,.09); stroke: #6d45ff; stroke-width: 3; vector-effect: non-scaling-stroke; cursor: move; pointer-events: all; }
.gate-drag-svg-edge { fill: none; stroke: #6d45ff; stroke-width: 3; vector-effect: non-scaling-stroke; pointer-events: none; }
.gate-drag-svg-edge-hit { fill: none; stroke: rgba(109,69,255,.001); stroke-width: 32; vector-effect: non-scaling-stroke; pointer-events: stroke; }
.gate-drag-svg-edge-hit.vertical { cursor: ew-resize; }
.gate-drag-svg-edge-hit.horizontal { cursor: ns-resize; }
.gate-drag-svg-handle { fill: #fff; stroke: #6d45ff; stroke-width: 3; vector-effect: non-scaling-stroke; pointer-events: all; filter: drop-shadow(0 1px 2px rgba(47,33,91,.28)); }
.gate-drag-svg-handle.nwse { cursor: nwse-resize; }
.gate-drag-svg-handle.nesw { cursor: nesw-resize; }
.polygon-vertex-handle { cursor: crosshair; }
.gate-drag-active.gate-dragging .gate-drag-svg-frame { fill: rgba(109,69,255,.14); }
.gate-drag-active.gate-dragging .gate-drag-svg-polygon { fill: rgba(109,69,255,.16); }
.plot-warning { color: #a85b00; font-weight: 750; }
.reusable-template-governance { margin-top: 12px; padding: 18px; }
.template-governance-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.template-governance-grid > div { display: grid; gap: 3px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); }
.template-governance-grid span { color: var(--muted); font-size: 8px; }
.template-governance-grid strong { font-size: 9px; overflow-wrap: anywhere; }
.template-governance-actions { display: grid; grid-template-columns: minmax(240px, 1fr) auto; align-items: end; gap: 9px; margin-top: 10px; }
.template-governance-actions label { display: grid; gap: 4px; color: var(--muted); font-size: 8px; font-weight: 750; }
.template-governance-actions input { min-height: 34px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.template-governance-actions > div { display: flex; gap: 6px; flex-wrap: wrap; }
#gate-statistics-table { overflow: auto; }

@media (max-width: 760px) {
  .reusable-source-options { grid-template-columns: 1fr; }
  #reusable-analysis-summary { grid-template-columns: 1fr 1fr !important; }
  #reusable-analysis-summary .validation-decision-metric,
  #reusable-analysis-summary .template-prototype-metric { grid-column: 1 / -1; }
  .analysis-upload-box { grid-template-columns: 1fr; }
  .analysis-file-button { width: 100%; }
  .analysis-file-selection { grid-column: auto; }
  .analysis-service-status { grid-template-columns: 34px minmax(0,1fr); }
  .analysis-service-status > button { grid-column: 1 / -1; width: 100%; }
  .analysis-service-status.blocked ol { display: grid; }
  .scan-next-step { grid-template-columns: 1fr; }
  .scan-next-actions { justify-content: stretch; }
  .scan-next-actions button { width: 100%; }
  .history-head { align-items: stretch; flex-direction: column; }
  .validation-head { align-items: stretch; flex-direction: column; }
  .validation-grid { grid-template-columns: 1fr; }
  .analysis-history-toolbar { grid-template-columns: 1fr; }
  .analysis-history-toolbar .toolbar-count { margin-left: 0; }
  .analysis-history-item { grid-template-columns: 1fr; }
  .analysis-history-summary { justify-content: flex-start; }
  .analysis-history-side { justify-items: start; }
  .analysis-history-output { grid-template-columns: 1fr; }
  .analysis-history-item p span { max-width: 70vw; }
  .gate-workbench { grid-template-columns: 1fr; }
  .workbench-column-resizer { display: none; }
  .workbench-axis-controls { justify-content: flex-start; width: 100%; }
  .workbench-axis-grid { grid-template-columns: 1fr; }
  .workbench-axis-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .workbench-axis-row label:first-of-type { grid-column: 1 / -1; }
  .workbench-axis-footer { align-items: stretch; flex-direction: column; }
  .workbench-axis-actions { justify-content: flex-start; }
  #workbench-current-stats { grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap: 4px; }
  #workbench-current-stats .metric { padding: 6px; }
  #workbench-current-stats .metric-top { font-size: 9px; }
  #workbench-current-stats .metric-icon { display: none; }
  #workbench-current-stats .metric-value { font-size: 15px; }
  .template-governance-grid { grid-template-columns: 1fr 1fr; }
  .template-governance-actions { grid-template-columns: 1fr; }
  .cytometry-plot,.plot-empty { min-height: 420px; }
  .workspace-gate-option { grid-template-columns: minmax(0,1fr) auto auto; padding-left: 12px; }
  .workspace-gate-option strong { grid-column: 1 / -1; }
  .workspace-percentage-denominator { grid-column: 1 / -1; }
  .workspace-gate-option em { grid-column: 1 / -1; }
}

@media (min-width: 761px) and (max-width: 1180px) {
  .create-analysis-workspace-form { grid-template-columns: minmax(200px,.8fr) minmax(0,1fr) auto; }
  .create-analysis-workspace-form > div { grid-column: 1 / -1; }
  .create-experiment-workspace-form { grid-template-columns: minmax(200px,.8fr) minmax(0,1fr) auto; }
  .create-experiment-workspace-form > div { grid-column: 1 / -1; }
  #reusable-analysis-summary { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  #reusable-analysis-summary .template-prototype-metric { grid-column: 1 / -1; }
  .gate-workbench { grid-template-columns: var(--gate-tree-width) minmax(0,1.5fr); }
  .gate-workbench-stats { grid-column: 1 / -1; }
  .workbench-stats-resizer { display: none; }
  .workbench-axis-row { grid-template-columns: minmax(0,1.5fr) minmax(0,1fr) repeat(3,minmax(0,.78fr)); }
}

/* Theme finishing layer: preserves semantic status colors and readable dark surfaces. */
:root[data-theme="midnight-iris"] .reagent-table tbody tr:hover td,
:root[data-theme="midnight-iris"] tbody tr:hover td { background: var(--surface-raised); }
:root[data-theme="midnight-iris"] th,
:root[data-theme="midnight-iris"] td,
:root[data-theme="midnight-iris"] .panel-line,
:root[data-theme="midnight-iris"] .knowledge-body > p,
:root[data-theme="midnight-iris"] .tutorial-step-list li { color: var(--ink); }
:root[data-theme="midnight-iris"] th { color: var(--muted); }
:root[data-theme="midnight-iris"] .game-type { background: var(--surface-soft); color: var(--muted); }
:root[data-theme="midnight-iris"] .review-tag.rejected { background: var(--red-soft); color: var(--red); }
:root[data-theme="midnight-iris"] .review-tag.archived { background: var(--surface-soft); color: var(--muted); }
:root[data-theme="midnight-iris"] .review-banner p,
:root[data-theme="midnight-iris"] .warning-list li,
:root[data-theme="midnight-iris"] .tutorial-warning-list li { color: var(--amber); }
:root[data-theme="midnight-iris"] .tutorial-check-list li { background: var(--success-soft); }
:root[data-theme="midnight-iris"] .tutorial-check-list li::before { color: var(--success); }
:root[data-theme="midnight-iris"] .flow-analysis-guide-intro,
:root[data-theme="midnight-iris"] .article-guide-mark,
:root[data-theme="midnight-iris"] .output-card { background: linear-gradient(120deg, var(--surface), var(--accent-soft)); }
:root[data-theme="midnight-iris"] .privacy-list,
:root[data-theme="midnight-iris"] .history-item code { color: var(--muted); }
:root[data-theme="midnight-iris"] .quiz-options button,
:root[data-theme="midnight-iris"] .panel-target,
:root[data-theme="midnight-iris"] .panel-choices button,
:root[data-theme="midnight-iris"] .sort-console,
:root[data-theme="midnight-iris"] .match-guide,
:root[data-theme="midnight-iris"] .finish-orbit { background: var(--surface); color: var(--ink); }
:root[data-theme="midnight-iris"] .quiz-options button.correct,
:root[data-theme="midnight-iris"] .panel-choices button.correct,
:root[data-theme="midnight-iris"] .component-bays button.correct,
:root[data-theme="midnight-iris"] .answer-reveal { border-color: color-mix(in srgb,var(--success) 58%,var(--line)); background: var(--success-soft); color: var(--success)!important; }
:root[data-theme="midnight-iris"] .brief-tip,
:root[data-theme="midnight-iris"] .sort-metrics div { background: var(--surface-soft); }
:root[data-theme="midnight-iris"] .game-finish { background: radial-gradient(circle at 50% 45%, var(--accent-soft) 0, transparent 42%); }
:root[data-theme="midnight-iris"] .hero-card button.primary:hover { background: #ffffff; }

@media (max-width: 1180px) {
  .appearance-control select { max-width: 96px; }
  .local-badge { display: none; }
}

@media (max-width: 760px) {
  .appearance-control { padding: 0 7px; }
  .appearance-control select { width: 20px; max-width: 20px; padding: 0; color: transparent; }
  .appearance-control select option { color: var(--ink); }
  .top-actions { gap: 6px; }
  .language-toggle { min-width: 34px; padding: 0 6px; }
}
.form-card [hidden] {
  display: none !important;
}


/* Static mirror additions: these rules are intentionally separate from the
   production stylesheet so the visual baseline remains recognizable. */
.demo-release-ribbon{position:fixed;z-index:120;left:50%;bottom:18px;display:flex;align-items:center;gap:10px;transform:translateX(-50%);padding:9px 14px;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));border-radius:999px;background:color-mix(in srgb,var(--surface) 94%,transparent);box-shadow:0 12px 35px rgba(25,20,45,.16);backdrop-filter:blur(15px);font-size:8px;letter-spacing:.08em;white-space:nowrap}.demo-release-ribbon strong{color:var(--accent)}.demo-release-ribbon span{color:var(--muted)}.demo-static-lock{position:relative}.demo-static-lock::after{content:"STATIC";margin-left:7px;padding:2px 5px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:7px;font-weight:800;letter-spacing:.08em}.demo-static-result{min-height:410px;padding:24px}.demo-panel-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}.demo-panel-summary>div{padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--surface-soft)}.demo-panel-summary span,.demo-panel-summary strong{display:block}.demo-panel-summary span{color:var(--muted);font-size:8px}.demo-panel-summary strong{margin-top:7px;font-size:19px}.demo-panel-table{width:100%;border-collapse:collapse;font-size:10px}.demo-panel-table th,.demo-panel-table td{padding:10px;border-bottom:1px solid var(--line);text-align:left}.demo-panel-table th{color:var(--muted);font-size:8px;text-transform:uppercase;letter-spacing:.08em}.demo-panel-table td:first-child{font-weight:750}.demo-risk{color:#a66b13}.demo-ok{color:var(--success)}.demo-plot-shell{display:grid;grid-template-columns:230px minmax(0,1fr);gap:14px}.demo-gate-tree{padding:14px}.demo-gate-tree button{display:block;width:100%;margin:4px 0;padding:9px 10px;border:0;border-radius:7px;background:transparent;color:var(--ink);text-align:left}.demo-gate-tree button.active{background:var(--accent-soft);color:var(--accent);font-weight:750}.demo-scatter{min-height:410px;padding:18px}.demo-scatter svg{width:100%;height:360px}.demo-scatter-grid{fill:none;stroke:var(--line);stroke-width:1}.demo-scatter-points{fill:var(--accent);opacity:.5}.demo-scatter-gate{fill:color-mix(in srgb,var(--success) 12%,transparent);stroke:var(--success);stroke-width:3;stroke-dasharray:7 5}.demo-scatter text{fill:var(--success);font-size:13px;font-weight:750}.demo-notice-card{display:flex;align-items:flex-start;gap:12px;margin:12px 0;padding:14px;border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));border-radius:10px;background:var(--accent-soft)}.demo-notice-card b{color:var(--accent)}.demo-notice-card p{margin:3px 0 0;color:var(--muted);font-size:9px;line-height:1.6}.demo-spectra-placeholder{height:330px;display:grid;place-items:center;background:repeating-linear-gradient(0deg,transparent 0 44px,var(--line) 45px),repeating-linear-gradient(90deg,transparent 0 69px,var(--line) 70px);border-radius:10px}.demo-spectra-placeholder svg{width:92%;height:82%}.demo-spectra-placeholder path{fill:none;stroke-width:4}.demo-spectra-placeholder .violet{stroke:#7c66e8}.demo-spectra-placeholder .green{stroke:#32b576}.demo-spectra-placeholder .amber{stroke:#e0a53d}@media(max-width:760px){.demo-release-ribbon{bottom:9px;max-width:calc(100% - 24px);white-space:normal}.demo-release-ribbon span{display:none}.demo-panel-summary{grid-template-columns:1fr}.demo-plot-shell{grid-template-columns:1fr}.demo-gate-tree{display:flex;overflow:auto}.demo-gate-tree button{min-width:150px}.demo-scatter{padding:8px}.demo-scatter svg{height:290px}}