/* Shared semantic roles. Components consume these instead of palette literals. */
:root {
  --surface-dark:color-mix(in srgb,var(--bg) 80%,var(--panel));
  --surface-raised:#1a232c;
  --text-secondary:#b8c4cc;
  --on-accent:#04091d;
  --success:#66e1b2;
  --chart-1:#66e1b2; --chart-2:#6da7ff; --chart-3:#ffc46b; --chart-4:#c78cff;
  --accent-soft:color-mix(in srgb,var(--accent) 12%,var(--panel));
  --accent-line:color-mix(in srgb,var(--accent) 44%,var(--line));
  --danger-soft:color-mix(in srgb,var(--danger) 12%,var(--panel));
  --danger-line:color-mix(in srgb,var(--danger) 44%,var(--line));
  --warning-soft:color-mix(in srgb,var(--amber) 12%,var(--panel));
  --warning-line:color-mix(in srgb,var(--amber) 44%,var(--line));
}
:root:not([data-theme="classic"]) ::selection { background:var(--text-secondary); color:var(--bg); }
.theme-dialog { position:fixed; inset:16px 16px 16px auto; width:min(760px,calc(100vw - 64px)); max-height:calc(100dvh - 32px); margin:0; padding:0; overflow:auto; border:1px solid var(--line); border-radius:22px; color:var(--text); background:var(--bg); box-shadow:-18px 24px 80px #0008; }
.theme-dialog::backdrop { background:#02061626; backdrop-filter:none; }
.theme-dialog button,.theme-dialog input { font:inherit; }
.theme-dialog button { cursor:pointer; }
.theme-dialog button:disabled { opacity:.4; cursor:not-allowed; }
.theme-dialog :is(button,input):focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.theme-dialog button { min-height:40px; padding:9px 14px; border:1px solid var(--line); border-radius:9px; background:var(--panel); color:var(--text-secondary); font-size:12px; }
.theme-dialog button:hover:not(:disabled) { border-color:var(--accent); color:var(--text); }
.theme-dialog header { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:24px 28px; border-bottom:1px solid var(--line); }
.theme-dialog h2 { margin:2px 0 0; font-size:27px; }
.theme-dialog .eyebrow { margin:0; }
.theme-dialog #theme-close { font-size:24px; padding:0; width:40px; }
.theme-body { display:grid; grid-template-columns:240px minmax(0,1fr); }
.theme-sidebar { padding:24px 20px; border-right:1px solid var(--line); background:var(--surface-dark); }
.theme-sidebar h3,.theme-editor h3 { margin:0 0 14px; color:var(--muted); font:11px 'DM Mono',monospace; letter-spacing:.09em; text-transform:uppercase; }
.theme-library { display:grid; gap:10px; max-height:380px; overflow:auto; }
.theme-dialog .theme-choice { display:grid; gap:10px; padding:12px; text-align:left; }
.theme-choice[aria-pressed="true"] { border-color:var(--accent); background:var(--accent-soft); }
.theme-choice strong { font-size:14px; color:var(--text); }
.theme-choice small { color:var(--muted); font-size:11px; line-height:1.5; }
.theme-swatches { display:flex; height:30px; overflow:hidden; border:1px solid var(--line); border-radius:5px; }
.theme-swatches i { flex:1; }
.theme-sidebar > p { color:var(--muted); font-size:11px; line-height:1.6; margin:20px 0; }
.theme-transfer { display:flex; flex-wrap:wrap; gap:6px; }
.theme-editor { padding:24px 28px; min-width:0; }
.theme-preview { display:grid; grid-template-columns:1fr auto; gap:8px 20px; padding:20px; margin-bottom:22px; border:1px solid var(--line); border-radius:13px; background:linear-gradient(125deg,var(--panel),var(--accent-soft)); }
.theme-preview > p { grid-column:1/-1; color:var(--muted); font:10px 'DM Mono',monospace; margin:0; }
.theme-preview strong { font-size:22px; }
.theme-preview > span { align-self:center; color:var(--success); font-size:12px; }
.theme-preview svg { grid-column:1/-1; width:100%; height:55px; overflow:visible; }
.theme-name { display:grid; gap:7px; color:var(--text-secondary); font-size:12px; margin-bottom:20px; }
.theme-name input { padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--text); min-width:0; }
.theme-colors { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.theme-color { display:grid; grid-template-columns:30px minmax(0,1fr); gap:7px; }
.theme-color label { grid-column:1/-1; font-size:10px; color:var(--text-secondary); }
.theme-color input[type=color] { width:30px; height:32px; padding:0; border:1px solid var(--line); border-radius:6px; background:transparent; cursor:pointer; }
.theme-color input[type=text] { width:100%; min-width:0; padding:4px 6px; border:1px solid var(--line); border-radius:6px; background:var(--panel); color:var(--text-secondary); font:10px 'DM Mono',monospace; }
.theme-color input:user-invalid { border-color:var(--danger); }
.theme-contrast { color:var(--muted); font-size:11px; line-height:1.6; margin:18px 0 0; }
.theme-contrast[data-low=true] { color:var(--amber); }
.theme-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:18px 28px; border-top:1px solid var(--line); background:var(--panel); }
.theme-footer > div { display:flex; gap:8px; flex-wrap:wrap; }
.theme-dialog .theme-primary { background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:700; }
.theme-dialog .theme-primary:hover:not(:disabled) { color:var(--on-accent); filter:brightness(1.08); }
.theme-dialog #theme-delete { color:var(--danger); }
.theme-status { flex-basis:100%; margin:0; color:var(--muted); font-size:11px; min-height:18px; }
@media(max-width:760px) {
  .theme-dialog { inset:8px; width:calc(100vw - 16px); max-height:calc(100dvh - 16px); }
  .theme-body { grid-template-columns:1fr; }
  .theme-sidebar { border-right:0; border-bottom:1px solid var(--line); padding:18px; }
  .theme-library { grid-template-columns:repeat(2,minmax(0,1fr)); max-height:200px; }
  .theme-sidebar > p { margin:12px 0; }
  .theme-editor { padding:18px; }
  .theme-dialog header,.theme-footer { padding:18px; }
  .theme-colors { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Keep the new theme entry reachable in the original mobile menu too. */
@container dashboard-viewport (max-width:899px) {
  .dashboard-settings-menu { left:0; right:auto; }
  .dashboard-settings-menu > #theme-manager-open { display:block!important; }
}