/* Palette selection is independent for each console. No business state is stored here. */
:root[data-console="agent"] {
  --primary: #1d4ed8;
  --primary-hover: #1e40af;
  --text: #172b4d;
  --text-secondary: #334965;
  --muted: #62718c;
  --border: #e2e9f5;
  --border-strong: #c6d5ec;
  --soft: #f7f9fe;
  --selected: #edf3ff;
  --row-border: #eaf0f8;
  --neutral-bg: #eff3f9;
  --neutral-muted-bg: #f0f3f8;
  --neutral-text: #63728b;
  --disabled-bg: #f3f6fb;
  --disabled-text: #70809a;
  --placeholder: #73819a;
  --selected-border: #dbe6fb;
  --empty-icon: #91aedc;
  --ring-soft: #f7faff;
  --ring-border: #e9f0fd;
  --toast-bg: #1e3a73;
  --shadow: 0 4px 24px #173b7106;
  --shadow-tint: #18346314;
  --shadow-soft: #18346305;
  --shadow-drawer: #18346312;
  --shadow-input: #18346303;
  --shadow-button: #1747a512;
  --shadow-button-hover: #1747a520;
  --shadow-control: #18346320;
  --shadow-sticky: #18346308;
  --backdrop: #10213c40;
  --outline-reference: #1d4ed866;
  --upload-border: #bbceeb;
  --video-overlay: #15396bd9;
  --media-canvas: #16243b;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: var(--surface);
  color: var(--primary);
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
}
.theme-toggle:hover { background: var(--selected); border-color: var(--primary); }
.theme-toggle-icon { font: 18px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.login-ui-tools { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; max-width: calc(100% - 32px); }
.login-ui-tools button { margin: 0; }
.topbar > div { min-width: 0; }

/* Deep indigo, cyan and violet are inspired by the TravellerQuant reference.
   Glow and grids are decorative; operational content stays on opaque surfaces. */
:root[data-theme="cyber"] {
  color-scheme: dark;
  --canvas: #02030a;
  --surface: #0a1223;
  --primary: #35f3ff;
  --primary-hover: #95f8ff;
  --on-primary: #03131e;
  --text: #f4fbff;
  --text-secondary: #c3d4e7;
  --muted: #a1b2cb;
  --border: #263b57;
  --border-strong: #3a5678;
  --soft: #101e32;
  --selected: #123046;
  --row-border: #22354c;
  --neutral-bg: #17273a;
  --neutral-muted-bg: #172337;
  --neutral-text: #b3c4d9;
  --warning-bg: #352b16;
  --warning-text: #f4d280;
  --warning-border: #725c2a;
  --danger: #ff91a4;
  --danger-bg: #381c2b;
  --danger-border: #774054;
  --danger-border-strong: #b4647c;
  --danger-soft: #2c1925;
  --disabled-bg: #172235;
  --disabled-text: #a1aec3;
  --placeholder: #92a4bd;
  --selected-border: #2c5d70;
  --empty-icon: #80ccdd;
  --ring-soft: #14132c;
  --ring-border: #3b3360;
  --backdrop: #000515a8;
  --toast-bg: #173f51;
  --toast-text: #eafaff;
  --shadow: 0 12px 32px #00030c40, 0 0 0 1px #35f3ff04;
  --shadow-tint: #00030c66;
  --shadow-soft: #00030c33;
  --shadow-drawer: #00030c80;
  --shadow-input: #00030c30;
  --shadow-button: #35f3ff20;
  --shadow-button-hover: #35f3ff38;
  --shadow-control: #00030c80;
  --shadow-sticky: #00030c60;
  --video-overlay: #09172be8;
  --media-canvas: #030714;
  --media-error: #652d40;
  --outline-reference: #35f3ff99;
  --upload-border: #44718b;
  --cyber-violet: #d492ff;
  --cyber-magenta: #ff3df2;
}
:root[data-console="agent"][data-theme="cyber"] {
  --primary: #7cb7ff;
  --primary-hover: #b2d7ff;
  --selected: #152d4d;
  --selected-border: #355780;
  --shadow-button: #6aaeff20;
  --shadow-button-hover: #6aaeff38;
  --outline-reference: #7cb7ff99;
}
[data-theme="cyber"] body {
  background-color: var(--canvas);
  background-image:
    linear-gradient(#35f3ff06 1px, transparent 1px),
    linear-gradient(90deg, #b657ef06 1px, transparent 1px),
    radial-gradient(ellipse at 82% 0%, #2c145940, transparent 52%),
    radial-gradient(ellipse at 15% 40%, #06374b35, transparent 55%);
  background-size: 56px 56px, 56px 56px, 100% 100%, 100% 100%;
  background-attachment: fixed;
}
[data-theme="cyber"] .workspace,
[data-theme="cyber"] .main-shell,
[data-theme="cyber"] .content,
[data-theme="cyber"] .login-screen { background: transparent; }
[data-theme="cyber"] .sidebar { background: linear-gradient(180deg, #091323, #080b18); box-shadow: 8px 0 28px #00040b30; }
[data-theme="cyber"] .topbar { background: #090f20f5; border-bottom-color: #35f3ff29; }
[data-theme="cyber"] .topbar::selection,
[data-theme="cyber"] ::selection { color: #fff; background: #6d48a8; }
[data-theme="cyber"] .eyebrow,
[data-theme="cyber"] .nav-label { font-family: ui-monospace, SFMono-Regular, Consolas, "PingFang SC", monospace; letter-spacing: 2px; }
[data-theme="cyber"] .page-heading .eyebrow::before { content: "// "; color: var(--cyber-violet); }
[data-theme="cyber"] .brand-name small { color: var(--primary); }
[data-theme="cyber"] h1,
[data-theme="cyber"] h2 { text-shadow: 0 0 30px #35f3ff0d; }
[data-theme="cyber"] .login-brand {
  border-color: #35f3ff40;
  border-radius: 20px;
  background: linear-gradient(135deg, #071a29 0%, #101326 55%, #231336 100%);
  box-shadow: inset 0 0 56px #35f3ff05, 0 18px 48px #00040c55;
}
[data-theme="cyber"] .login-brand::after { border-color: #35f3ff4d; box-shadow: 0 0 0 38px #ff3df205, 0 0 0 39px #a96bff44, 0 0 55px #35f3ff10; }
[data-theme="cyber"] .login-brand h1::before { box-shadow: 0 0 18px #35f3ff44; }
[data-theme="cyber"] .login-form form { padding: 26px; border: 1px solid var(--border); border-top-color: #a96bff88; border-radius: 16px; background: #0a1223f2; box-shadow: var(--shadow); }
[data-theme="cyber"] .login-form h2 { letter-spacing: .2px; }
[data-theme="cyber"] nav button.active { border-radius: 7px; background: linear-gradient(90deg, var(--selected), #132138); box-shadow: inset 3px 0 0 var(--primary), inset 0 0 0 1px #35f3ff18; }
[data-theme="cyber"] .panel,
[data-theme="cyber"] .stat,
[data-theme="cyber"] .agent-channel-card { border-radius: 10px; }
[data-theme="cyber"] .panel { position: relative; border-top-color: #35f3ff55; }
[data-theme="cyber"] .panel::before { content: ""; position: absolute; z-index: 1; top: 0; right: 18px; width: 32px; height: 2px; pointer-events: none; background: var(--cyber-magenta); opacity: .7; }
[data-theme="cyber"] .stat::before { content: ""; position: absolute; top: -1px; left: 18px; width: 34px; height: 2px; background: var(--primary); box-shadow: 0 0 14px #35f3ff44; }
[data-theme="cyber"] .stat-value { color: var(--text); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
[data-theme="cyber"] .stat.featured .stat-value { color: var(--primary); }
[data-theme="cyber"] .primary,
[data-theme="cyber"] .member-primary { color: var(--on-primary); background: var(--primary); font-weight: 700; box-shadow: 0 0 16px var(--shadow-button); }
[data-theme="cyber"] .primary:hover,
[data-theme="cyber"] .member-primary:hover { background: var(--primary-hover); box-shadow: 0 0 22px var(--shadow-button-hover); }
[data-theme="cyber"] .theme-toggle { color: var(--primary); background: #111b30; border-color: #6d59a1; box-shadow: inset 0 0 14px #ff3df206; }
[data-theme="cyber"] .theme-toggle:hover { border-color: var(--primary); background: var(--selected); }
[data-theme="cyber"] .theme-toggle-icon { color: var(--cyber-violet); }
[data-theme="cyber"] .status-dot { box-shadow: 0 0 0 3px var(--selected), 0 0 12px var(--primary); }
[data-theme="cyber"] input:focus,
[data-theme="cyber"] textarea:focus,
[data-theme="cyber"] select:focus { box-shadow: 0 0 0 4px #35f3ff0b; }
[data-theme="cyber"] .toolbar-controls > select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23c3d4e7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 4 4 4 4-4'/%3E%3C/svg%3E"); }
[data-theme="cyber"] dialog { border-left: 1px solid #35f3ff42; }
[data-theme="cyber"] dialog header { border-bottom-color: #35f3ff29; }
[data-theme="cyber"] .product-delete:disabled { color: var(--disabled-text); }
[data-theme="cyber"] .ui-number-badge { color: var(--on-primary); }
[data-theme="cyber"] .media-play,
[data-theme="cyber"] .media-load-error { color: #f4fbff; }

@media (max-width: 1050px) {
  .topbar { height: auto; min-height: 78px; gap: 12px; padding-block: 12px; }
  .topbar > div { gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
}
@media (max-width: 720px) {
  .topbar { min-height: 60px; gap: 8px; }
  .topbar > div { max-width: 100%; justify-content: flex-start; gap: 7px; }
  .topbar > span { flex-basis: 100%; }
  .topbar .theme-toggle { min-height: 38px; }
  .theme-toggle { padding-inline: 10px; }
  .login-ui-tools { top: 14px; right: 16px; gap: 7px; }
  .login-form { padding-top: 88px; }
  [data-theme="cyber"] .login-form form { padding: 22px; }
  [data-theme="cyber"] .mobile-brand { gap: 10px; }
  [data-theme="cyber"] .mobile-brand .brand-name { font-size: 22px; }
  [data-theme="cyber"] .mobile-brand .logo { width: 44px; height: 44px; }
  [data-theme="cyber"] body { background-attachment: scroll; }
}
@media (max-width: 380px) {
  .topbar > div { gap: 6px; }
  .topbar .quiet { padding-inline: 8px; }
  .theme-toggle { gap: 5px; padding-inline: 8px; }
  [data-theme="cyber"] .login-form { padding-inline: 18px; }
  [data-theme="cyber"] .login-form form { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-toggle, [data-theme="cyber"] button { transition: none; }
  [data-theme="cyber"] body { background-attachment: scroll; }
}
@media print {
  .theme-toggle { display: none !important; }
}