:root {
  --bg: #06110b;
  --bg-grid: rgba(52, 199, 122, 0.08);
  --surface: #0b1f14;
  --surface-2: #102819;
  --surface-3: #153422;
  --sidebar: #07170e;
  --ink: #effff5;
  --muted: #9bc2aa;
  --line: #24553a;
  --purple: #34c77a;
  --purple-hot: #58e69a;
  --purple-deep: #168a4f;
  --cyan: #63d8c2;
  --green: #2fd682;
  --red: #ff4d74;
  --yellow: #ffd15a;
  --black: #050207;
  --white: #fff;
  --chart-grid: #20432f;
  --chart-text: #9eb9a8;
  --border: 2px solid var(--purple);
  --shadow: 6px 6px 0 rgba(22, 138, 79, 0.38);
  --small-shadow: 4px 4px 0 rgba(22, 138, 79, 0.30);
  --mono: "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[data-theme="light"] {
  --bg: #eaf7ef;
  --bg-grid: rgba(25, 135, 84, 0.10);
  --surface: #fbfffc;
  --surface-2: #def3e6;
  --surface-3: #c9ead7;
  --sidebar: #d7efdf;
  --ink: #102218;
  --muted: #52695a;
  --line: #9bc7aa;
  --purple: #198754;
  --purple-hot: #126d43;
  --purple-deep: #0e5c37;
  --cyan: #167c6f;
  --green: #087a46;
  --red: #c81e47;
  --yellow: #9c6900;
  --black: #100719;
  --white: #fff;
  --chart-grid: #c4ddcc;
  --chart-text: #52695a;
  --shadow: 6px 6px 0 rgba(14, 92, 55, 0.24);
  --small-shadow: 4px 4px 0 rgba(14, 92, 55, 0.20);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--sans);
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--bg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px);
  background-size: 28px 28px;
}
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.hidden { display: none !important; }
.is-locked { overflow: hidden; }

.login-screen {
  min-height: 100vh;
  padding: 28px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 75% 20%, rgba(52, 199, 122, .22), transparent 34%), var(--bg);
}
.login-window { width: min(980px, 100%); border: 2px solid var(--purple); background: var(--surface); box-shadow: 12px 12px 0 rgba(22, 138, 79, .36); }
.terminal-bar { min-height: 46px; padding: 10px 14px; display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; color: var(--muted); border-bottom: 2px solid var(--purple); background: var(--surface-2); font: 700 12px var(--mono); }
.terminal-dots { display: flex; gap: 7px; }
.terminal-dots span { width: 12px; height: 12px; border: 2px solid var(--ink); background: var(--purple); }
.terminal-dots span:nth-child(2) { background: var(--yellow); }
.terminal-dots span:nth-child(3) { background: var(--green); }
.login-content { display: grid; grid-template-columns: .9fr 1.1fr; min-height: 510px; }
.cat-panel { padding: 42px; display: grid; place-content: center; text-align: center; border-right: 2px solid var(--purple); background: linear-gradient(145deg, var(--surface-3), var(--surface)); }
.cat-panel img { width: min(290px, 76vw); filter: drop-shadow(8px 8px 0 rgba(22,138,79,.22)); }
.cat-panel p { margin: 22px 0 4px; font: 900 17px var(--mono); letter-spacing: .13em; color: var(--purple-hot); }
.cat-panel small { color: var(--muted); font: 12px var(--mono); }
.login-form-panel { padding: 56px 48px; display: flex; flex-direction: column; justify-content: center; }
.terminal-command { margin: 0 0 28px; color: var(--muted); font: 13px var(--mono); }
.terminal-command span { color: var(--green); }
.terminal-command b { color: var(--cyan); }
.login-form-panel h1 { margin: 0; font: 950 clamp(36px, 6vw, 66px)/.95 var(--sans); letter-spacing: -.06em; text-transform: uppercase; }
.login-copy { margin: 18px 0 34px; color: var(--muted); }
.login-form-panel label, .settings-panel > label { display: block; margin: 17px 0 7px; font: 900 11px var(--mono); letter-spacing: .08em; color: var(--purple-hot); }
.password-field { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; border: 2px solid var(--purple); background: var(--bg); box-shadow: var(--small-shadow); }
.password-field > span { text-align: center; color: var(--green); font: 900 20px var(--mono); }
.password-field input { min-width: 0; height: 52px; border: 0; color: var(--ink); background: transparent; font: 700 17px var(--mono); }
.password-field button { align-self: stretch; border: 0; border-left: 2px solid var(--purple); padding: 0 16px; background: var(--surface-3); font: 900 11px var(--mono); cursor: pointer; }
.login-submit, .brutal-button { width: 100%; min-height: 52px; margin-top: 22px; border: 2px solid var(--black); color: var(--white); background: linear-gradient(90deg, var(--purple-deep), var(--purple)); box-shadow: var(--small-shadow); font: 950 13px var(--mono); letter-spacing: .08em; cursor: pointer; }
.login-submit:hover, .brutal-button:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 rgba(22,138,79,.36); }
.login-message { min-height: 20px; color: var(--red); font: 700 12px var(--mono); }
.login-foot { margin: auto 0 0; color: var(--muted); font: 11px var(--mono); }
.cursor { display: inline-block; width: 9px; height: 14px; margin-right: 8px; background: var(--green); animation: blink 1s steps(1) infinite; }
.shake { animation: shake .22s linear 2; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes shake { 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }

.app { min-height: 100vh; display: grid; grid-template-columns: 310px minmax(0,1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 20px; border-right: 2px solid var(--purple); background: rgba(7,23,14,.97); scrollbar-width: none; -ms-overflow-style: none; }
.sidebar::-webkit-scrollbar { width: 0; height: 0; display: none; }
html[data-theme="light"] .sidebar { background: rgba(231,219,255,.98); }
.brand-block { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.brand-logo { width: 54px; height: 54px; display: grid; place-items: center; border: 2px solid var(--purple); background: var(--surface-2); box-shadow: var(--small-shadow); color: var(--purple-hot); font: 950 20px var(--mono); }
.brand-logo img { width: 100%; height: 100%; padding: 5px; display: block; object-fit: contain; object-position: center; }
.brand-block h1 { margin: 0; font-size: 19px; letter-spacing: -.03em; }
.brand-block p { margin: 4px 0 0; color: var(--muted); font: 9px var(--mono); letter-spacing: .12em; }
.side-panel { margin-top: 16px; padding: 15px; border: 2px solid var(--line); background: var(--surface); box-shadow: 4px 4px 0 rgba(22,138,79,.16); }
.panel-heading { margin: -15px -15px 14px; padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--line); background: var(--surface-2); font: 950 11px var(--mono); letter-spacing: .08em; }
.connection-lamp { width: 14px; height: 14px; border: 2px solid var(--black); border-radius: 50%; }
.connection-lamp.offline { background: var(--red); box-shadow: 0 0 14px var(--red); }
.connection-lamp.online { background: var(--green); box-shadow: 0 0 15px var(--green); animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 5px var(--green); } }
.device-box { min-height: 68px; padding: 11px; border: 2px solid var(--line); background: var(--bg); }
.device-box small { display: block; margin-bottom: 7px; color: var(--muted); font: 9px var(--mono); }
.device-box strong { font: 800 11px/1.45 var(--mono); overflow-wrap: anywhere; }
.connect-button.disconnect { background: var(--red); }
.panel-note { margin: 13px 0 0; color: var(--muted); font: 10px/1.5 var(--mono); }
.sample-name-input { width: 100%; min-height: 44px; padding: 9px 10px; border: 2px solid var(--purple); color: var(--ink); background: var(--bg); font: 800 13px var(--mono); }
.sample-name-input.invalid { border-color: var(--red); box-shadow: 0 0 0 2px rgba(255,77,116,.20); }
.setting-control { display: grid; grid-template-columns: 1fr 58px; border: 2px solid var(--line); background: var(--bg); }
.setting-control input { min-width: 0; height: 39px; padding: 7px 9px; border: 0; color: var(--ink); background: transparent; font: 800 14px var(--mono); }
.setting-control span { display: grid; place-items: center; border-left: 2px solid var(--line); color: var(--purple-hot); background: var(--surface-2); font: 900 9px var(--mono); }
.sample-caption { display: block; margin-top: 5px; color: var(--muted); font: 9px var(--mono); }
.filename-preview { min-height: 24px; padding: 6px 7px; border-left: 2px solid var(--purple); background: var(--surface-2); overflow-wrap: anywhere; }
.fixed-info { margin-top: 18px; padding: 11px; display: grid; grid-template-columns: 1fr auto; align-items: center; border: 2px solid var(--purple); background: linear-gradient(135deg, var(--surface-3), var(--surface)); }
.fixed-info span { font: 900 9px var(--mono); }
.fixed-info strong { color: var(--purple-hot); font: 950 17px var(--mono); }
.fixed-info small { grid-column: 1/-1; margin-top: 4px; color: var(--muted); font: 9px var(--mono); }
.stat-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); font: 10px var(--mono); }
.stat-row:last-child { border: 0; }
.stat-row span { color: var(--muted); }
.stat-row strong { color: var(--purple-hot); text-align: right; }

.main-area { min-width: 0; padding: 24px; }
.app-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 20px; }
.header-kicker { margin: 0 0 5px; color: var(--purple-hot); font: 900 10px var(--mono); letter-spacing: .1em; }
.app-header h2 { margin: 0; font: 950 clamp(24px, 3.5vw, 43px)/1 var(--sans); letter-spacing: -.055em; }
.header-right { display: flex; align-items: stretch; gap: 8px; }
.current-notification { width: min(380px, 38vw); min-height: 64px; padding: 9px 12px; display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 10px; border: 2px solid var(--line); background: var(--surface); box-shadow: var(--small-shadow); }
.notification-mark { width: 31px; height: 31px; display: grid; place-items: center; border: 2px solid currentColor; font: 950 16px var(--mono); }
.current-notification small { display: block; color: var(--muted); font: 9px var(--mono); }
.current-notification strong { display: block; margin-top: 3px; font: 800 11px/1.35 var(--mono); }
.current-notification.success { color: var(--green); }
.current-notification.warning { color: var(--yellow); }
.current-notification.error { color: var(--red); }
.current-notification.info { color: var(--cyan); }
.utility-button, .card-buttons button { padding: 0 13px; border: 2px solid var(--line); color: var(--ink); background: var(--surface-2); font: 900 10px var(--mono); cursor: pointer; }
.utility-button:hover, .card-buttons button:hover { border-color: var(--purple); color: var(--purple-hot); }
.logout-button { border-color: var(--red); }
.about-button { min-height: 64px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; border-color: var(--purple); }
.about-icon { width: 22px; height: 22px; display: inline-grid; place-items: center; border: 2px solid currentColor; border-radius: 50%; font: 950 12px/1 var(--mono); }

.about-modal { position: fixed; inset: 0; z-index: 1200; padding: 18px; display: grid; place-items: center; background: rgba(4, 12, 7, .78); backdrop-filter: blur(8px); }
.about-modal.hidden { display: none; }
.about-panel { position: relative; width: min(520px, 94vw); padding: 34px 34px 28px; text-align: center; border: 2px solid var(--purple); background: var(--surface); box-shadow: 12px 12px 0 rgba(22,138,79,.38); }
.about-close { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border: 2px solid var(--line); color: var(--ink); background: var(--surface-2); font: 900 22px/1 var(--mono); cursor: pointer; }
.about-close:hover { border-color: var(--red); color: var(--red); }
.about-logo { width: 112px; height: 112px; display: block; margin: 0 auto 16px; object-fit: contain; }
.about-eyebrow { margin: 0 0 5px; color: var(--purple-hot); font: 900 10px var(--mono); letter-spacing: .14em; }
.about-panel h2 { margin: 0; font-size: 30px; letter-spacing: -.04em; }
.about-divider { width: 72px; height: 3px; margin: 17px auto 20px; background: var(--purple); }
.about-developed { margin: 0 0 10px; color: var(--muted); font: 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.about-credit { margin: 0; font-size: 15px; line-height: 1.55; }
.about-credit span { color: var(--muted); font-size: 13px; }
.about-and { display: block; margin: 10px 0; color: var(--purple-hot); font: 900 11px var(--mono); }
.about-runtime { margin: 22px -10px -8px; padding-top: 15px; border-top: 1px solid var(--line); color: var(--muted); font: 9px/1.5 var(--mono); letter-spacing: .05em; }

.action-row { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; margin-bottom: 18px; }
.action-card { min-height: 88px; padding: 13px; display: grid; grid-template-columns: 43px 1fr; gap: 11px; align-items: center; text-align: left; border: 2px solid var(--purple); color: var(--ink); background: linear-gradient(145deg, var(--surface-2), var(--surface)); box-shadow: var(--small-shadow); cursor: pointer; }
.action-card:hover:not(:disabled) { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 rgba(22,138,79,.32); }
.action-card:disabled { opacity: .38; cursor: not-allowed; box-shadow: none; }
.action-number { width: 41px; height: 41px; display: grid; place-items: center; border: 2px solid var(--purple); color: var(--purple-hot); background: var(--bg); font: 950 12px var(--mono); }
.action-card strong { display: block; font: 950 12px var(--mono); }
.action-card small { display: block; margin-top: 5px; color: var(--muted); font: 9px/1.35 var(--mono); }
.action-card.danger { border-color: var(--red); }
.action-card.danger .action-number { border-color: var(--red); color: var(--red); }
.content-stack { display: grid; gap: 18px; }
.brutal-card, .process-board { border: 2px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.card-header { min-height: 70px; padding: 12px 15px; display: flex; justify-content: space-between; align-items: center; gap: 16px; border-bottom: 2px solid var(--line); background: var(--surface-2); }
.card-header p { margin: 0 0 3px; color: var(--purple-hot); font: 900 9px var(--mono); letter-spacing: .1em; }
.card-header h3 { margin: 0; font-size: 19px; }
.card-buttons { display: flex; align-self: stretch; gap: 7px; }
.card-buttons button:disabled { opacity: .35; cursor: not-allowed; }
.chart-wrapper { position: relative; min-height: 390px; padding: 12px; }
.icon-button { min-width: 42px; padding-inline: 11px; font-size: 17px; line-height: 1; }

.mini-switch { min-height: 42px; padding: 0 9px; display: inline-flex; align-items: center; gap: 7px; border: 2px solid var(--line); color: var(--ink); background: var(--surface-2); font: 900 9px var(--mono); cursor: pointer; user-select: none; }
.mini-switch:hover { border-color: var(--purple); color: var(--purple-hot); }
.mini-switch input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.mini-switch i { position: relative; width: 32px; height: 17px; border: 2px solid var(--muted); background: var(--bg); transition: .15s ease; }
.mini-switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 9px; height: 9px; background: var(--muted); transition: transform .15s ease, background .15s ease; }
.mini-switch input:checked + i { border-color: var(--cyan); }
.mini-switch input:checked + i::after { transform: translateX(15px); background: var(--cyan); }
.mini-switch input:focus-visible + i { outline: 3px solid var(--purple-hot); outline-offset: 2px; }
.mini-switch b { min-width: 20px; color: var(--muted); font: inherit; }
.mini-switch input:checked ~ b { color: var(--cyan); }
body.modal-open { overflow: hidden; }
.chart-modal { position: fixed; inset: 0; z-index: 1000; padding: 18px; display: grid; place-items: center; background: rgba(4, 2, 9, .82); backdrop-filter: blur(8px); }
.chart-modal.hidden { display: none; }
.chart-modal-panel { width: min(1500px, 97vw); height: min(900px, 94vh); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border: 2px solid var(--purple); background: var(--surface); box-shadow: 12px 12px 0 rgba(22, 138, 79, .40); }
.chart-modal-header { min-height: 74px; padding: 13px 16px; display: flex; justify-content: space-between; align-items: center; gap: 18px; border-bottom: 2px solid var(--line); background: var(--surface-2); }
.chart-modal-header p { margin: 0 0 4px; color: var(--purple-hot); font: 900 9px var(--mono); letter-spacing: .1em; }
.chart-modal-header h2 { margin: 0; font-size: clamp(17px, 2vw, 24px); }
.modal-close-button { min-height: 42px; white-space: nowrap; border-color: var(--red); color: var(--red); }
.expanded-chart-wrapper { position: relative; min-height: 0; padding: 12px; }
#expandedSensorChart { width: 100%; height: 100%; display: block; }
.expanded-chart-legend { max-height: 92px; overflow-y: auto; }
.expanded-chart-legend .legend-item { font-size: 13px; }

#sensorChart { width: 100%; height: 390px; display: block; }
.chart-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font: 900 11px var(--mono); letter-spacing: .08em; pointer-events: none; }
.chart-legend { min-height: 42px; padding: 9px 15px; display: flex; flex-wrap: wrap; gap: 8px 14px; border-top: 2px solid var(--line); background: var(--surface-2); }
.legend-item { display: inline-flex; align-items: center; gap: 7px; font: 850 11px var(--mono); }
.legend-color { width: 20px; height: 6px; border: 1px solid var(--ink); }
.process-board { padding: 16px; }
.process-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.phase-badge { display: inline-block; padding: 6px 9px; border: 2px solid var(--purple); color: var(--purple-hot); background: var(--surface-2); font: 950 9px var(--mono); }
.process-top h3 { margin: 8px 0 0; font-size: 19px; }
.process-counter { text-align: right; }
.process-counter strong { display: block; color: var(--purple-hot); font: 950 27px var(--mono); }
.process-counter small { color: var(--muted); font: 9px var(--mono); }
.progress-outer { height: 16px; margin: 15px 0; border: 2px solid var(--purple); background: var(--bg); }
.progress-inner { width: 0; height: 100%; background: linear-gradient(90deg, var(--purple-deep), var(--cyan)); transition: width .1s linear; }
.phase-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
.phase-item { padding: 9px; display: flex; gap: 8px; align-items: center; border: 2px solid var(--line); color: var(--muted); background: var(--surface-2); font: 10px var(--mono); }
.phase-item span { color: var(--purple-hot); }
.phase-item.active { border-color: var(--cyan); color: var(--cyan); box-shadow: inset 0 0 18px rgba(86,233,255,.1); }
.phase-item.done { border-color: var(--green); color: var(--green); }
.rate-badge { padding: 7px 10px; border: 2px solid var(--purple); color: var(--purple-hot); background: var(--bg); font: 900 11px var(--mono); }
.table-wrapper { max-height: 390px; overflow: auto; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; font: 10px var(--mono); }
th, td { padding: 10px 11px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: left; }
th { position: sticky; top: 0; z-index: 1; color: var(--purple-hot); background: var(--surface-2); }
tbody tr:nth-child(even) { background: rgba(52,199,122,.05); }
.empty-cell { height: 135px; color: var(--muted); text-align: center; }

@media (max-width: 1180px) {
  .app { grid-template-columns: 270px minmax(0,1fr); }
  .action-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .app-header { flex-direction: column; }
  .header-right { width: 100%; }
  .current-notification { width: 100%; }
}
@media (max-width: 800px) {
  .login-content { grid-template-columns: 1fr; }
  .cat-panel { display: none; }
  .app { display: block; }
  .sidebar { position: static; width: auto; height: auto; border-right: 0; border-bottom: 2px solid var(--purple); }
  .main-area { padding: 16px; }
  .header-right { flex-wrap: wrap; }
  .current-notification { flex: 1 1 100%; }
  .utility-button { min-height: 42px; flex: 1; }
}
@media (max-width: 560px) {
  .chart-modal { padding: 8px; }
  .chart-modal-panel { width: 100%; height: 96vh; box-shadow: 5px 5px 0 rgba(22,138,79,.36); }
  .chart-modal-header { align-items: flex-start; flex-direction: column; }
  .modal-close-button { width: 100%; }
  .login-screen { padding: 12px; }
  .login-form-panel { padding: 34px 22px; }
  .terminal-bar > span:nth-child(2) { display: none; }
  .terminal-bar { grid-template-columns: auto 1fr; }
  .action-row { grid-template-columns: 1fr; }
  .card-header, .process-top { align-items: flex-start; flex-direction: column; }
  .card-buttons { width: 100%; flex-wrap: wrap; }
  .card-buttons button { min-height: 40px; flex: 1; }
  .phase-grid { grid-template-columns: 1fr; }
  .process-counter { text-align: left; }
}

@media (max-width: 760px) {
  .mini-switch > span { display: none; }
  .mini-switch { padding-inline: 8px; }
}

/* ==========================================================
   APPEARANCE MENU
   One icon opens both dark/light and UI-theme controls.
   ========================================================== */
.appearance-control { position: relative; display: flex; }
.appearance-button { width: 52px; min-width: 52px; min-height: 64px; padding: 0; display: grid; place-items: center; }
.appearance-button svg { width: 22px; height: 22px; fill: currentColor; }
.appearance-button[aria-expanded="true"] { border-color: var(--purple); color: var(--purple-hot); background: var(--surface-3); }
.appearance-popover { position: absolute; z-index: 900; top: calc(100% + 9px); right: 0; width: min(440px, calc(100vw - 32px)); padding: 14px; border: 2px solid var(--purple); color: var(--ink); background: var(--surface); box-shadow: var(--shadow); }
.appearance-popover-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding-bottom: 11px; border-bottom: 2px solid var(--line); }
.appearance-popover-head small { display: block; color: var(--purple-hot); font: 900 9px var(--mono); letter-spacing: .12em; }
.appearance-popover-head strong { display: block; margin-top: 3px; font-size: 16px; }
.appearance-close { width: 34px; height: 34px; border: 2px solid var(--line); color: var(--ink); background: var(--surface-2); font: 900 19px/1 var(--mono); cursor: pointer; }
.appearance-close:hover { border-color: var(--purple); color: var(--purple-hot); }
.mode-selector { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mode-selector button { min-height: 42px; border: 2px solid var(--line); color: var(--muted); background: var(--surface-2); font: 900 10px var(--mono); cursor: pointer; }
.mode-selector button.active { border-color: var(--purple); color: var(--ink); background: var(--surface-3); box-shadow: inset 0 -3px 0 var(--purple); }
.appearance-section-label { margin: 15px 0 8px; color: var(--purple-hot); font: 900 9px var(--mono); letter-spacing: .12em; }
.theme-option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.theme-option { min-width: 0; min-height: 66px; padding: 8px; display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 9px; border: 2px solid var(--line); color: var(--ink); background: var(--surface-2); text-align: left; cursor: pointer; }
.theme-option:hover { border-color: var(--purple); }
.theme-option.active { border-color: var(--purple-hot); background: var(--surface-3); box-shadow: inset 3px 0 0 var(--purple-hot); }
.theme-option span { min-width: 0; }
.theme-option b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 900 10px var(--mono); }
.theme-option small { display: block; margin-top: 4px; color: var(--muted); font: 8px var(--mono); }
.theme-swatch { width: 32px; height: 32px; display: block; border: 2px solid currentColor; background: #34c77a; }
.theme-swatch.default { background: linear-gradient(135deg,#06110b 0 49%,#34c77a 50%); }
.theme-swatch.minimalist { background: linear-gradient(135deg,#111813 0 49%,#58c98a 50%); }
.theme-swatch.bento { border-radius: 9px; background: linear-gradient(135deg,#102819 0 49%,#58e69a 50%); }
.theme-swatch.neo { background: linear-gradient(135deg,#43d782 0 49%,#061009 50%); box-shadow: 3px 3px 0 #061009; }
.theme-swatch.terminal { background: repeating-linear-gradient(0deg,#020603 0 4px,#37f06f 5px 6px); }
.theme-swatch.cyberpunk { clip-path: polygon(0 0,80% 0,100% 20%,100% 100%,20% 100%,0 80%); background: linear-gradient(135deg,#04110a 0 48%,#3fd7b0 49% 70%,#56e58d 71%); }
.theme-swatch.material { border-radius: 50%; background: linear-gradient(135deg,#17221b 0 50%,#8ad7a8 50%); }
.theme-swatch.editorial { background: linear-gradient(90deg,#102018 0 50%,#eef8f1 50%); }

/* 1. Minimalist UI ------------------------------------------------------- */
html[data-ui-theme="minimalist"] {
  --bg-grid: transparent;
  --surface: #101812;
  --surface-2: #162019;
  --surface-3: #1d2a21;
  --sidebar: #0d160f;
  --line: #2c4032;
  --purple: #58c98a;
  --purple-hot: #86e2aa;
  --purple-deep: #248a55;
  --cyan: #78d8c1;
  --chart-grid: #2b3d31;
  --chart-text: #b4cabb;
  --shadow: 0 1px 0 rgba(255,255,255,.035);
  --small-shadow: none;
}
html[data-theme="light"][data-ui-theme="minimalist"] {
  --bg: #f4faf6;
  --surface: #ffffff;
  --surface-2: #edf6f0;
  --surface-3: #e4f0e8;
  --sidebar: #f8fcf9;
  --ink: #172019;
  --muted: #627266;
  --line: #d4e2d8;
  --purple: #2d8d5a;
  --purple-hot: #247347;
  --purple-deep: #1c5d39;
  --cyan: #267766;
  --chart-grid: #dae6dd;
  --chart-text: #607066;
}
html[data-ui-theme="minimalist"] body { background-image: none; }
html[data-ui-theme="minimalist"] .sidebar { border-right: 1px solid var(--line); background: var(--sidebar); }
html[data-ui-theme="minimalist"] .side-panel,
html[data-ui-theme="minimalist"] .brutal-card,
html[data-ui-theme="minimalist"] .process-board,
html[data-ui-theme="minimalist"] .current-notification,
html[data-ui-theme="minimalist"] .action-card,
html[data-ui-theme="minimalist"] .chart-modal-panel,
html[data-ui-theme="minimalist"] .login-window { border-width: 1px; border-radius: 12px; box-shadow: none; }
html[data-ui-theme="minimalist"] .panel-heading,
html[data-ui-theme="minimalist"] .card-header,
html[data-ui-theme="minimalist"] .chart-legend,
html[data-ui-theme="minimalist"] .chart-modal-header { border-width: 1px; }
html[data-ui-theme="minimalist"] .action-card:hover:not(:disabled) { transform: none; box-shadow: none; border-color: var(--purple); }
html[data-ui-theme="minimalist"] .brand-logo,
html[data-ui-theme="minimalist"] .action-number,
html[data-ui-theme="minimalist"] .phase-badge,
html[data-ui-theme="minimalist"] .rate-badge { border-width: 1px; border-radius: 9px; box-shadow: none; }

/* 2. Bento UI ------------------------------------------------------------ */
html[data-ui-theme="bento"] {
  --bg-grid: transparent;
  --surface: #130b20;
  --surface-2: #102819;
  --surface-3: #173923;
  --line: #2b5d3f;
  --shadow: 0 12px 34px rgba(0,0,0,.24);
  --small-shadow: 0 7px 20px rgba(0,0,0,.18);
}
html[data-theme="light"][data-ui-theme="bento"] {
  --bg: #eaf7ef;
  --surface: #fff;
  --surface-2: #f4fcf7;
  --surface-3: #dff3e7;
  --sidebar: #e0f1e6;
  --line: #bfdcc9;
  --shadow: 0 12px 34px rgba(55,28,88,.11);
  --small-shadow: 0 7px 20px rgba(55,28,88,.09);
}
html[data-ui-theme="bento"] body { background-image: none; }
html[data-ui-theme="bento"] .sidebar { padding: 16px; border-right: 0; background: var(--bg); }
html[data-ui-theme="bento"] .side-panel,
html[data-ui-theme="bento"] .brutal-card,
html[data-ui-theme="bento"] .process-board,
html[data-ui-theme="bento"] .current-notification,
html[data-ui-theme="bento"] .chart-modal-panel { border: 1px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: var(--small-shadow); }
html[data-ui-theme="bento"] .action-card { min-height: 104px; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--small-shadow); }
html[data-ui-theme="bento"] .action-card:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow); }
html[data-ui-theme="bento"] .brand-logo,
html[data-ui-theme="bento"] .action-number,
html[data-ui-theme="bento"] .phase-badge,
html[data-ui-theme="bento"] .rate-badge,
html[data-ui-theme="bento"] .utility-button,
html[data-ui-theme="bento"] .card-buttons button,
html[data-ui-theme="bento"] .mini-switch { border-radius: 12px; }
html[data-ui-theme="bento"] .panel-heading,
html[data-ui-theme="bento"] .card-header,
html[data-ui-theme="bento"] .chart-legend,
html[data-ui-theme="bento"] .chart-modal-header { border-width: 0 0 1px; }

/* 3. Neo-Brutalism ------------------------------------------------------- */
html[data-ui-theme="neo-brutalism"] {
  --bg: #0b1a11;
  --bg-grid: rgba(216,183,255,.09);
  --surface: #143422;
  --surface-2: #1b472d;
  --surface-3: #245f3b;
  --sidebar: #0d2416;
  --ink: #f4fff8;
  --muted: #c2dacb;
  --line: #0b050f;
  --purple: #43d782;
  --purple-hot: #8aefb2;
  --purple-deep: #198750;
  --cyan: #65dbc2;
  --black: #061009;
  --shadow: 8px 8px 0 #061009;
  --small-shadow: 5px 5px 0 #061009;
}
html[data-theme="light"][data-ui-theme="neo-brutalism"] {
  --bg: #d8f2e2;
  --surface: #f9fffb;
  --surface-2: #bde7cc;
  --surface-3: #95d7ab;
  --sidebar: #b0e0bf;
  --ink: #0d2114;
  --muted: #456150;
  --line: #0e2a18;
  --purple: #258a54;
  --purple-hot: #176b3d;
  --purple-deep: #176b3d;
  --cyan: #18796b;
  --black: #08030b;
  --chart-grid: #b4d8c0;
  --chart-text: #496153;
}
html[data-ui-theme="neo-brutalism"] .sidebar { border-right: 3px solid var(--black); }
html[data-ui-theme="neo-brutalism"] .side-panel,
html[data-ui-theme="neo-brutalism"] .brutal-card,
html[data-ui-theme="neo-brutalism"] .process-board,
html[data-ui-theme="neo-brutalism"] .current-notification,
html[data-ui-theme="neo-brutalism"] .chart-modal-panel,
html[data-ui-theme="neo-brutalism"] .action-card,
html[data-ui-theme="neo-brutalism"] .brand-logo,
html[data-ui-theme="neo-brutalism"] .action-number { border: 3px solid var(--black); box-shadow: var(--small-shadow); }
html[data-ui-theme="neo-brutalism"] .action-card:hover:not(:disabled) { transform: translate(-3px,-3px); box-shadow: 9px 9px 0 var(--black); }
html[data-ui-theme="neo-brutalism"] .panel-heading,
html[data-ui-theme="neo-brutalism"] .card-header,
html[data-ui-theme="neo-brutalism"] .chart-legend { border-bottom: 3px solid var(--black); }
html[data-ui-theme="neo-brutalism"] .utility-button,
html[data-ui-theme="neo-brutalism"] .card-buttons button,
html[data-ui-theme="neo-brutalism"] .mini-switch { border: 2px solid var(--black); }

/* 4. Terminal / Linux UI ------------------------------------------------ */
html[data-ui-theme="terminal"] {
  --bg: #020603;
  --bg-grid: rgba(49,255,123,.055);
  --surface: #050b07;
  --surface-2: #07110a;
  --surface-3: #0a1b0e;
  --sidebar: #020703;
  --ink: #baffc9;
  --muted: #63a976;
  --line: #174c27;
  --purple: #37f06f;
  --purple-hot: #70ff99;
  --purple-deep: #16a944;
  --cyan: #50ffcf;
  --green: #37f06f;
  --red: #ff5b6e;
  --yellow: #e8ff6a;
  --black: #000;
  --chart-grid: #123b20;
  --chart-text: #78b989;
  --shadow: none;
  --small-shadow: none;
  --sans: var(--mono);
}
html[data-theme="light"][data-ui-theme="terminal"] {
  --bg: #e9f5ea;
  --bg-grid: rgba(21,110,49,.07);
  --surface: #f7fff8;
  --surface-2: #e2f3e5;
  --surface-3: #cceacf;
  --sidebar: #dff0e2;
  --ink: #092811;
  --muted: #3d7049;
  --line: #7ead88;
  --purple: #146d31;
  --purple-hot: #0c5926;
  --purple-deep: #0b4c21;
  --cyan: #006b60;
  --green: #146d31;
  --chart-grid: #b8d3bd;
  --chart-text: #426f4c;
}
html[data-ui-theme="terminal"] body { font-family: var(--mono); }
html[data-ui-theme="terminal"] .sidebar { border-right: 1px solid var(--purple); background: var(--sidebar); }
html[data-ui-theme="terminal"] .side-panel,
html[data-ui-theme="terminal"] .brutal-card,
html[data-ui-theme="terminal"] .process-board,
html[data-ui-theme="terminal"] .current-notification,
html[data-ui-theme="terminal"] .chart-modal-panel,
html[data-ui-theme="terminal"] .action-card,
html[data-ui-theme="terminal"] .brand-logo,
html[data-ui-theme="terminal"] .action-number { border: 1px solid var(--purple); border-radius: 0; box-shadow: none; }
html[data-ui-theme="terminal"] .panel-heading,
html[data-ui-theme="terminal"] .card-header,
html[data-ui-theme="terminal"] .chart-legend,
html[data-ui-theme="terminal"] .chart-modal-header { border-color: var(--purple); border-width: 0 0 1px; }
html[data-ui-theme="terminal"] .utility-button,
html[data-ui-theme="terminal"] .card-buttons button,
html[data-ui-theme="terminal"] .mini-switch,
html[data-ui-theme="terminal"] input,
html[data-ui-theme="terminal"] select { border-radius: 0; }
html[data-ui-theme="terminal"] .action-card:hover:not(:disabled) { transform: none; box-shadow: inset 0 0 0 1px var(--green); color: var(--green); }
html[data-ui-theme="terminal"] .app-header h2,
html[data-ui-theme="terminal"] .brand-block h1 { letter-spacing: 0; }
html[data-ui-theme="terminal"] .connection-lamp.online { box-shadow: 0 0 8px var(--green); }


/* 5. Cyberpunk HUD ------------------------------------------------------ */
html[data-ui-theme="cyberpunk"] {
  --bg: #04110a; --bg-grid: rgba(0,229,255,.065); --surface: #091b12; --surface-2: #0d2618; --surface-3: #123522;
  --sidebar: #06170e; --line: #20543a; --purple: #45dd88; --purple-hot: #74efa5; --purple-deep: #1f9257; --cyan: #42d6b0;
  --green: #65e99a; --chart-grid: #174a34; --chart-text: #9ac8ad; --shadow: 7px 7px 0 rgba(0,229,255,.20); --small-shadow: 4px 4px 0 rgba(69,221,136,.17);
}
html[data-theme="light"][data-ui-theme="cyberpunk"] {
  --bg: #eafaf0; --surface: #fbfffc; --surface-2: #e7f7ed; --surface-3: #d4f0df; --sidebar: #dff3e7; --ink: #102018; --muted: #546d5c;
  --line: #a8d2b7; --purple: #1c8a50; --purple-hot: #146a3d; --purple-deep: #146a3d; --cyan: #18796b; --chart-grid: #c7e2d0; --chart-text: #566f5e;
}
html[data-ui-theme="cyberpunk"] .side-panel, html[data-ui-theme="cyberpunk"] .brutal-card, html[data-ui-theme="cyberpunk"] .process-board, html[data-ui-theme="cyberpunk"] .current-notification, html[data-ui-theme="cyberpunk"] .chart-modal-panel, html[data-ui-theme="cyberpunk"] .action-card { clip-path: polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px)); }
html[data-ui-theme="cyberpunk"] .brand-logo, html[data-ui-theme="cyberpunk"] .action-number { border-color: var(--cyan); box-shadow: 3px 3px 0 rgba(69,221,136,.30); }
html[data-ui-theme="cyberpunk"] .panel-heading, html[data-ui-theme="cyberpunk"] .card-header { border-bottom-color: var(--cyan); }

/* 6. Material 3 --------------------------------------------------------- */
html[data-ui-theme="material"] {
  --bg-grid: transparent; --bg: #111b15; --surface: #1b2920; --surface-2: #24352a; --surface-3: #2f4436; --sidebar: #17221b;
  --line: #41594a; --purple: #8ad7a8; --purple-hot: #b4ecc8; --purple-deep: #55a879; --cyan: #78cdb6;
  --chart-grid: #344b3c; --chart-text: #c8d9cd; --shadow: 0 10px 24px rgba(0,0,0,.22); --small-shadow: 0 4px 12px rgba(0,0,0,.18);
}
html[data-theme="light"][data-ui-theme="material"] {
  --bg: #fbfffc; --surface: #fff; --surface-2: #eff7f1; --surface-3: #e2f1e7; --sidebar: #f4faf6; --ink: #18221b; --muted: #5d6f63;
  --line: #c8d9cd; --purple: #2a8454; --purple-hot: #1f6b42; --purple-deep: #1f6b42; --cyan: #237966; --chart-grid: #dae7dd; --chart-text: #5d6f63;
}
html[data-ui-theme="material"] body { background-image: none; }
html[data-ui-theme="material"] .side-panel, html[data-ui-theme="material"] .brutal-card, html[data-ui-theme="material"] .process-board, html[data-ui-theme="material"] .current-notification, html[data-ui-theme="material"] .chart-modal-panel { border: 1px solid var(--line); border-radius: 24px; overflow: hidden; box-shadow: var(--small-shadow); }
html[data-ui-theme="material"] .action-card { border: 1px solid var(--line); border-radius: 18px; box-shadow: none; }
html[data-ui-theme="material"] .utility-button, html[data-ui-theme="material"] .card-buttons button, html[data-ui-theme="material"] .mini-switch, html[data-ui-theme="material"] input, html[data-ui-theme="material"] .brand-logo, html[data-ui-theme="material"] .phase-badge, html[data-ui-theme="material"] .rate-badge { border-radius: 14px; }
html[data-ui-theme="material"] .action-number { border-radius: 50%; }

/* 7. Editorial Pro ------------------------------------------------------ */
html[data-ui-theme="editorial"] {
  --bg-grid: transparent; --bg: #101010; --surface: #142019; --surface-2: #1b2a21; --surface-3: #23352a; --sidebar: #0c1510;
  --ink: #edf7f0; --muted: #aabbb0; --line: #34463a; --purple: #72c690; --purple-hot: #9be0b1; --purple-deep: #3b8a5d; --cyan: #72c690;
  --chart-grid: #2e4034; --chart-text: #adbbb1; --shadow: none; --small-shadow: none;
}
html[data-theme="light"][data-ui-theme="editorial"] {
  --bg: #edf5ef; --surface: #f9fcfa; --surface-2: #eef5f0; --surface-3: #e3eee6; --sidebar: #e8f1ea; --ink: #142019; --muted: #627068;
  --line: #c5d3c9; --purple: #397b55; --purple-hot: #2c6243; --purple-deep: #2f6948; --cyan: #397b55; --chart-grid: #d4e0d7; --chart-text: #617068;
}
html[data-ui-theme="editorial"] body { background-image: none; font-family: Georgia, "Times New Roman", serif; }
html[data-ui-theme="editorial"] .sidebar { border-right: 1px solid var(--line); background: var(--sidebar); }
html[data-ui-theme="editorial"] .side-panel, html[data-ui-theme="editorial"] .brutal-card, html[data-ui-theme="editorial"] .process-board, html[data-ui-theme="editorial"] .current-notification, html[data-ui-theme="editorial"] .chart-modal-panel, html[data-ui-theme="editorial"] .action-card { border-width: 1px; box-shadow: none; }
html[data-ui-theme="editorial"] .app-header h2, html[data-ui-theme="editorial"] .brand-block h1, html[data-ui-theme="editorial"] .process-top h3, html[data-ui-theme="editorial"] .card-header h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 700; letter-spacing: -.025em; }
html[data-ui-theme="editorial"] .brand-logo, html[data-ui-theme="editorial"] .action-number, html[data-ui-theme="editorial"] .phase-badge, html[data-ui-theme="editorial"] .rate-badge { border-width: 1px; box-shadow: none; }

@media (max-width: 800px) {
  .appearance-control { margin-left: auto; }
  .appearance-button { min-height: 42px; }
  .appearance-popover { position: fixed; top: 92px; right: 16px; left: 16px; width: auto; max-height: calc(100vh - 110px); overflow-y: auto; scrollbar-width: none; }
  .appearance-popover::-webkit-scrollbar { display: none; }
}
@media (max-width: 520px) {
  .theme-option-grid { grid-template-columns: 1fr; }
}

/* Appearance popover follows the selected UI language. */
html[data-ui-theme="minimalist"] .appearance-popover { border-width: 1px; border-radius: 12px; box-shadow: none; }
html[data-ui-theme="bento"] .appearance-popover { border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--small-shadow); }
html[data-ui-theme="neo-brutalism"] .appearance-popover { border: 3px solid var(--black); box-shadow: var(--shadow); }
html[data-ui-theme="terminal"] .appearance-popover { border: 1px solid var(--purple); border-radius: 0; box-shadow: none; }
html[data-ui-theme="cyberpunk"] .appearance-popover { border-color: var(--cyan); clip-path: polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px)); }
html[data-ui-theme="material"] .appearance-popover { border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); }
html[data-ui-theme="material"] .appearance-close,
html[data-ui-theme="material"] .mode-selector button,
html[data-ui-theme="material"] .theme-option { border-radius: 14px; }
html[data-ui-theme="editorial"] .appearance-popover { border: 1px solid var(--line); box-shadow: none; }

@media (max-width: 640px) {
  .about-button { min-height: 48px; }
  .about-panel { padding: 30px 22px 24px; }
  .about-logo { width: 92px; height: 92px; }
}