:root {
  --bg: #09050f;
  --bg-grid: rgba(169, 92, 255, 0.08);
  --surface: #130b20;
  --surface-2: #1b0f2d;
  --surface-3: #24133a;
  --sidebar: #0e0718;
  --ink: #f8f3ff;
  --muted: #b8a8c8;
  --line: #342044;
  --purple: #9b5cff;
  --purple-hot: #bd72ff;
  --purple-deep: #6f2cff;
  --cyan: #56e9ff;
  --green: #35f397;
  --red: #ff4d74;
  --yellow: #ffd15a;
  --black: #050207;
  --white: #fff;
  --chart-grid: #352344;
  --chart-text: #aa98bd;
  --border: 2px solid var(--purple);
  --shadow: 6px 6px 0 rgba(111, 44, 255, 0.42);
  --small-shadow: 4px 4px 0 rgba(111, 44, 255, 0.35);
  --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: #eee7ff;
  --bg-grid: rgba(99, 33, 205, 0.10);
  --surface: #fffaff;
  --surface-2: #f1e8ff;
  --surface-3: #e2d2ff;
  --sidebar: #e7dbff;
  --ink: #160923;
  --muted: #665373;
  --line: #b89ad8;
  --purple: #6f2cff;
  --purple-hot: #842cff;
  --purple-deep: #4d10b5;
  --cyan: #057a98;
  --green: #008a4c;
  --red: #c81e47;
  --yellow: #9c6900;
  --black: #100719;
  --white: #fff;
  --chart-grid: #d5c6e6;
  --chart-text: #675476;
  --shadow: 6px 6px 0 rgba(77, 16, 181, 0.30);
  --small-shadow: 4px 4px 0 rgba(77, 16, 181, 0.25);
}

* { 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(155, 92, 255, .24), transparent 34%), var(--bg);
}
.login-window { width: min(980px, 100%); border: 2px solid var(--purple); background: var(--surface); box-shadow: 12px 12px 0 rgba(111, 44, 255, .45); }
.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(111,44,255,.25)); }
.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(111,44,255,.45); }
.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(14,7,24,.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-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(111,44,255,.18); }
.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); }

.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(111,44,255,.4); }
.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(111, 44, 255, .5); }
.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(155,92,255,.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(111,44,255,.45); }
  .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: #9b5cff; }
.theme-swatch.default { background: linear-gradient(135deg,#09050f 0 49%,#9b5cff 50%); }
.theme-swatch.minimalist { background: linear-gradient(135deg,#17161e 0 49%,#a78bfa 50%); }
.theme-swatch.bento { border-radius: 9px; background: linear-gradient(135deg,#1c1030 0 49%,#bd72ff 50%); }
.theme-swatch.neo { background: linear-gradient(135deg,#b868ff 0 49%,#07030a 50%); box-shadow: 3px 3px 0 #07030a; }
.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,#060513 0 48%,#00e5ff 49% 70%,#ff36d1 71%); }
.theme-swatch.material { border-radius: 50%; background: linear-gradient(135deg,#241b2f 0 50%,#d0bcff 50%); }
.theme-swatch.editorial { background: linear-gradient(90deg,#111 0 50%,#f3f0e8 50%); }

/* 1. Minimalist UI ------------------------------------------------------- */
html[data-ui-theme="minimalist"] {
  --bg-grid: transparent;
  --surface: #111018;
  --surface-2: #181722;
  --surface-3: #201e2c;
  --sidebar: #0e0d14;
  --line: #312f3d;
  --purple: #a78bfa;
  --purple-hot: #c4b5fd;
  --purple-deep: #7c3aed;
  --cyan: #8be9fd;
  --chart-grid: #2f2d39;
  --chart-text: #c1bdcb;
  --shadow: 0 1px 0 rgba(255,255,255,.035);
  --small-shadow: none;
}
html[data-theme="light"][data-ui-theme="minimalist"] {
  --bg: #f6f5f8;
  --surface: #ffffff;
  --surface-2: #f2f1f5;
  --surface-3: #eceaf0;
  --sidebar: #fbfafc;
  --ink: #17151c;
  --muted: #6f6978;
  --line: #dedbe3;
  --purple: #7357b8;
  --purple-hot: #60449e;
  --purple-deep: #51348d;
  --cyan: #16697a;
  --chart-grid: #e2dfe7;
  --chart-text: #6e6975;
}
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: #1c1030;
  --surface-3: #271641;
  --line: #3d2858;
  --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: #f1ecfa;
  --surface: #fff;
  --surface-2: #f8f3ff;
  --surface-3: #eee3ff;
  --sidebar: #eee7f8;
  --line: #d8cae8;
  --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: #12091d;
  --bg-grid: rgba(216,183,255,.09);
  --surface: #27103c;
  --surface-2: #351653;
  --surface-3: #4a2070;
  --sidebar: #180a25;
  --ink: #fff8ff;
  --muted: #dbc7e8;
  --line: #0b050f;
  --purple: #b868ff;
  --purple-hot: #e2b9ff;
  --purple-deep: #7d26d8;
  --cyan: #64f2ff;
  --black: #07030a;
  --shadow: 8px 8px 0 #07030a;
  --small-shadow: 5px 5px 0 #07030a;
}
html[data-theme="light"][data-ui-theme="neo-brutalism"] {
  --bg: #e9d8ff;
  --surface: #fff6ff;
  --surface-2: #dcb9ff;
  --surface-3: #c78bff;
  --sidebar: #d5a7ff;
  --ink: #100519;
  --muted: #4b325b;
  --line: #110618;
  --purple: #7f27cc;
  --purple-hot: #5b0d9e;
  --purple-deep: #5a0fa0;
  --cyan: #007c8a;
  --black: #08030b;
  --chart-grid: #c3a4dc;
  --chart-text: #4d365d;
}
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: #05040d; --bg-grid: rgba(0,229,255,.065); --surface: #0b0818; --surface-2: #111025; --surface-3: #191638;
  --sidebar: #070611; --line: #22374a; --purple: #ff36d1; --purple-hot: #ff71df; --purple-deep: #b51a94; --cyan: #00e5ff;
  --green: #5bff9d; --chart-grid: #173445; --chart-text: #8bb8c9; --shadow: 7px 7px 0 rgba(0,229,255,.20); --small-shadow: 4px 4px 0 rgba(255,54,209,.17);
}
html[data-theme="light"][data-ui-theme="cyberpunk"] {
  --bg: #eaf9ff; --surface: #fbfdff; --surface-2: #e8f6fb; --surface-3: #d9f0f8; --sidebar: #e1f4fa; --ink: #10131c; --muted: #526975;
  --line: #9dc7d5; --purple: #a91087; --purple-hot: #800b67; --purple-deep: #780760; --cyan: #00798c; --chart-grid: #c5dce4; --chart-text: #526d78;
}
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(255,54,209,.35); }
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: #141218; --surface: #211f26; --surface-2: #2b2930; --surface-3: #36323e; --sidebar: #1b191f;
  --line: #49454f; --purple: #d0bcff; --purple-hot: #e8ddff; --purple-deep: #9a82db; --cyan: #a8c7fa;
  --chart-grid: #3c3941; --chart-text: #cac4d0; --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: #fffbfe; --surface: #fff; --surface-2: #f3edf7; --surface-3: #e8def8; --sidebar: #f7f2fa; --ink: #1d1b20; --muted: #625b71;
  --line: #cac4d0; --purple: #6750a4; --purple-hot: #4f378b; --purple-deep: #4f378b; --cyan: #315da8; --chart-grid: #ded8e3; --chart-text: #625b71;
}
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: #171717; --surface-2: #202020; --surface-3: #292929; --sidebar: #0d0d0d;
  --ink: #f1eee7; --muted: #aaa59c; --line: #3b3935; --purple: #d7b67b; --purple-hot: #f0d49f; --purple-deep: #a47a36; --cyan: #d7b67b;
  --chart-grid: #34322f; --chart-text: #b1aca3; --shadow: none; --small-shadow: none;
}
html[data-theme="light"][data-ui-theme="editorial"] {
  --bg: #efede7; --surface: #faf8f2; --surface-2: #f0ede5; --surface-3: #e4dfd4; --sidebar: #e8e5dd; --ink: #171717; --muted: #6c685f;
  --line: #c8c2b6; --purple: #765a2b; --purple-hot: #594219; --purple-deep: #5f451b; --cyan: #765a2b; --chart-grid: #d7d1c6; --chart-text: #6a655d;
}
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; }