/* Arcane Sanctum — dark "aurora" theme, same design language as ArcaneDatabase (glossy glass over a black
   base with a blue/magenta/cyan glow at the bottom and a faint grid). Tokens mirror ArcaneDatabase styles.css. */
:root {
  --bg: #000;
  --panel: rgba(255, 255, 255, 0.03);           /* glass */
  --panel-strong: rgba(0, 0, 0, 0.28);
  --panel-solid: #0b0f1a;
  --line: rgba(120, 170, 255, 0.14);
  --glass-border: rgba(140, 180, 255, 0.18);
  --glass-shine: inset 0 1px 0 rgba(180, 210, 255, 0.16);
  --blur: blur(28px) saturate(1.85);
  --text: #fff; --text-dim: #c5d4f5; --muted: #7a90c2;
  --accent: #5b9dff; --accent-dim: rgba(91, 157, 255, 0.18); --accent-bg: rgba(91, 157, 255, 0.10);
  --teal: #5eead4; --indigo: #9aa8ff; --ok: #7ed9a0;
  --danger: #ef7a6c; --danger-dim: rgba(239, 122, 108, 0.16);
  --well: linear-gradient(180deg, rgba(120, 170, 255, 0.16), rgba(80, 130, 255, 0.06));
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.48); --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.28);
  --radius: 10px; --radius-sm: 6px; --radius-lg: 16px;
  --font: Outfit, Inter, "Segoe UI", "Helvetica Neue", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.23, 1, 0.32, 1); --dur: 0.2s;
  /* Everything lives in a centered 1920px (1080p-wide) column: on ultrawide screens the page stays in the middle. */
  --page-w: 1920px; --drawer-w: 760px; --top-h: 44px;
  --gutter: max(12px, calc((100vw - var(--page-w)) / 2));
}
/* Split pane: while an item is open the drawer takes the right part of the page column (under the header,
   which never moves) and the board shrinks to the remaining width. Narrow screens fall back to an overlay. */
body.drawer-open #main { padding-right: calc(var(--gutter) + var(--drawer-w) + 12px); }
@media (max-width: 1400px) { body.drawer-open #main { padding-right: var(--gutter); } }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
html { color-scheme: dark; }
body {
  font: 13.5px/1.45 var(--font); letter-spacing: -0.01em; -webkit-font-smoothing: antialiased;
  color: var(--text); background-color: var(--bg);
  background-image:
    radial-gradient(800px 480px at 88% -10%, rgba(70, 120, 255, 0.22), transparent 52%),
    linear-gradient(rgba(90, 140, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90, 140, 255, 0.045) 1px, transparent 1px);
  background-size: auto, 72px 72px, 72px 72px;
  display: flex; flex-direction: column; isolation: isolate;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; filter: blur(8px);
  background:
    radial-gradient(ellipse 80% 50% at 20% 110%, rgba(70, 90, 255, 0.55), transparent 58%),
    radial-gradient(ellipse 70% 45% at 78% 115%, rgba(210, 40, 170, 0.42), transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 120%, rgba(40, 180, 255, 0.32), transparent 50%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.12; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  -webkit-mask-image: radial-gradient(ellipse 95% 58% at 50% 118%, #000 10%, transparent 72%);
  mask-image: radial-gradient(ellipse 95% 58% at 50% 118%, #000 10%, transparent 72%);
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button, .btn, select, input, textarea {
  font: inherit; color: var(--text); border: 1px solid var(--glass-border); background: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-sm); padding: 5px 9px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--muted); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
select option { background: var(--panel-solid); color: var(--text); }
input[type=date]::-webkit-calendar-picker-indicator { filter: invert(0.8); }
button, .btn { cursor: pointer; }
button:hover, .btn:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(160, 195, 255, 0.35); text-decoration: none; }
button.primary { background: linear-gradient(145deg, #8cbcff 0%, #3d7eff 100%); color: #061024; border-color: transparent; font-weight: 600;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 8px 18px rgba(91,157,255,0.28); }
button.primary:hover { filter: brightness(1.08); }
button.danger { color: var(--danger); }
button.active { background: var(--accent-dim); border-color: var(--accent); color: #dbe8ff; }
button.link { border: 0; background: none; padding: 0; color: var(--accent); box-shadow: none; }
input, textarea, select { width: 100%; }
textarea { min-height: 120px; font-family: var(--mono); font-size: 12px; resize: vertical; }
label { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 8px; }
label > input, label > select, label > textarea { margin-top: 2px; font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--text); }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 11px; }
.mono { font-family: var(--mono); }
.row { display: flex; gap: 8px; align-items: center; }
.spacer { flex: 1; }

/* glass surface used by topbar, sections, drawer, panels */
.glass, #topbar, .column, .card, .panel, .login-box, .palette-box, .drawer-head, .comment, table.list {
  background: var(--panel); border: 1px solid var(--glass-border);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: var(--glass-shine);
}

/* topbar */
#topbar { display: flex; align-items: center; gap: 8px; padding: 8px var(--gutter); border-width: 0 0 1px; border-radius: 0;
  background: var(--panel-strong); position: sticky; top: 0; z-index: 10; }
#topbar .brand { display: flex; align-items: center; gap: 8px; margin-right: 8px; }
#topbar .brand-icon { height: 22px; width: auto; }
#topbar .brand-word { height: 11px; width: auto; }
#topbar select { width: auto; }
#topbar nav { display: flex; gap: 4px; }

/* main */
#main { flex: 1; overflow: auto; padding: 14px var(--gutter); transition: padding var(--dur) var(--ease); }
h1 { font-size: 20px; font-weight: 600; margin: 0 0 12px; letter-spacing: -0.02em; }
h2 { font-size: 13px; font-weight: 600; margin: 16px 0 6px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; }

/* board = vertical flow: one section per state, top to bottom, items as rows */
.board { display: flex; flex-direction: column; gap: 10px; }
.column { border-radius: var(--radius-lg); display: flex; flex-direction: column; transition: border-color var(--dur) var(--ease); }
.column-head { padding: 8px 12px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.column-head { cursor: pointer; user-select: none; }
.column-head .caret { width: 12px; color: var(--muted); font-size: 12px; }
.column.folded .cards { display: none; }
.column.folded .column-head { opacity: .8; }
.quick-add-btn { width: 26px; height: 26px; padding: 0; line-height: 1; font-size: 16px; font-weight: 600; border-radius: 50%; color: var(--accent); }
.quick-add-btn:hover { background: var(--accent-dim); border-color: var(--accent); }
.column-head .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; box-shadow: 0 0 10px currentColor; }
.column-head .count { color: var(--muted); font-weight: 400; font-family: var(--mono); font-size: 12px; }
.cards { padding: 0 8px 8px; min-height: 12px; }
.column.drag-over { border-color: var(--accent); box-shadow: var(--glass-shine), 0 0 0 3px var(--accent-dim); }
.card { border-radius: var(--radius); padding: 6px 12px; margin-bottom: 5px; cursor: grab; background: rgba(0, 0, 0, 0.30);
  display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.card:hover { border-color: rgba(160, 195, 255, 0.4); transform: translateY(-1px); box-shadow: var(--glass-shine), var(--shadow-sm); }
.card.dragging { opacity: .4; }
.card.drop-before { border-top: 2px solid var(--accent); }
.card .key { font-family: var(--mono); font-size: 11px; color: var(--accent); }
.card .title { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .meta { display: flex; flex-wrap: nowrap; gap: 6px; align-items: center; font-size: 11px; color: var(--muted); justify-self: end; }
.chip { display: inline-block; padding: 0 6px; border-radius: 999px; font-size: 11px; line-height: 17px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.08); }
.chip.label { color: #fff; border-color: transparent; }
.prio { font-weight: 600; }
.prio-4 { color: var(--danger); } .prio-3 { color: #f3b562; } .prio-2 { color: var(--accent); } .prio-1 { color: var(--text-dim); }
.type-icon { font-family: var(--mono); font-weight: 700; font-size: 10px; padding: 0 4px; border: 1px solid var(--glass-border); border-radius: 4px; color: var(--indigo); }

/* list */
table.list { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: var(--radius); overflow: hidden; }
table.list th, table.list td { padding: 6px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
table.list td.title { white-space: normal; }
table.list th { background: rgba(91, 157, 255, 0.08); cursor: pointer; user-select: none; font-weight: 600; position: sticky; top: 0;
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); }
table.list tr:hover td { background: rgba(255,255,255,0.04); }
table.list tr.closed td { color: var(--muted); }
.toolbar { display: flex; gap: 6px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.toolbar select, .toolbar input { width: auto; }

/* drawer */
#drawer { position: fixed; top: var(--top-h); right: var(--gutter); width: min(var(--drawer-w), 100vw); height: calc(100vh - var(--top-h));
  background: rgba(6, 10, 22, 0.82); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border-left: 1px solid var(--glass-border); box-shadow: var(--shadow); overflow-y: auto; z-index: 20; display: flex; flex-direction: column; }
.drawer-head > .mono, .drawer-head > button, #topbar button, #topbar select { white-space: nowrap; flex-shrink: 0; }
.drawer-head .title-input { flex: 1 1 auto; min-width: 0; width: auto; }
.drawer-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-width: 0 0 1px; border-radius: 0;
  position: sticky; top: 0; background: rgba(6, 10, 22, 0.9); z-index: 1; }
.drawer-body { display: grid; grid-template-columns: 1fr 230px; gap: 0; flex: 1; }
.drawer-main { padding: 14px; border-right: 1px solid var(--line); min-width: 0; }
.drawer-side { padding: 14px; background: rgba(91, 157, 255, 0.04); }
.drawer-side label { margin-top: 10px; }
.title-input { font-size: 17px; font-weight: 600; border: 1px solid transparent; background: transparent; padding: 2px 6px; letter-spacing: -0.01em; }
.title-input:hover, .title-input:focus { border-color: var(--glass-border); background: rgba(255,255,255,0.03); }
.md { line-height: 1.55; color: var(--text-dim); }
.md h1, .md h2, .md h3 { margin: 12px 0 4px; font-size: 14px; color: var(--text); text-transform: none; letter-spacing: 0; } .md h1 { font-size: 16px; }
.md p { margin: 6px 0; } .md ul, .md ol { margin: 4px 0; padding-left: 22px; }
.md code { font-family: var(--mono); background: rgba(91, 157, 255, 0.12); color: #cfe0ff; padding: 0 4px; border-radius: 4px; font-size: 12px; }
.md pre { background: rgba(0,0,0,0.45); border: 1px solid var(--line); padding: 10px; border-radius: var(--radius-sm); overflow-x: auto; }
.md pre code { background: none; padding: 0; }
.md blockquote { border-left: 3px solid var(--accent); margin: 6px 0; padding-left: 10px; color: var(--muted); }
.body-empty { color: var(--muted); font-style: italic; }
.checklist li { list-style: none; display: flex; gap: 8px; align-items: center; padding: 3px 0; }
.checklist li input[type=checkbox] { width: auto; accent-color: var(--accent); }
.checklist li .text { flex: 1; }
.checklist li.done .text { text-decoration: line-through; color: var(--muted); }
.checklist { padding: 0; margin: 4px 0; }
.comment { border-radius: var(--radius-sm); padding: 8px 10px; margin: 8px 0; background: rgba(0,0,0,0.25); }
.comment .who { font-size: 11px; color: var(--muted); margin-bottom: 3px; font-family: var(--mono); }
.activity { font-size: 11px; color: var(--muted); padding: 0; margin: 0; font-family: var(--mono); }
.activity li { list-style: none; padding: 3px 0; border-bottom: 1px dotted var(--line); }
.links li { list-style: none; padding: 3px 0; display: flex; gap: 6px; align-items: center; }
.links { padding: 0; margin: 4px 0; }
.kbd { font-family: var(--mono); font-size: 10px; border: 1px solid var(--glass-border); border-radius: 4px; padding: 0 4px; background: rgba(255,255,255,0.06); }

/* palette */
#palette { position: fixed; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  z-index: 30; display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; }
.palette-box { width: min(680px, 92vw); border-radius: var(--radius-lg); box-shadow: var(--glass-shine), var(--shadow); overflow: hidden; background: rgba(6, 10, 22, 0.9); }
#palette-input { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 14px 16px; font-size: 16px; background: transparent; box-shadow: none; }
#palette-results { max-height: 50vh; overflow-y: auto; }
.pal-row { padding: 8px 16px; cursor: pointer; display: flex; gap: 10px; }
.pal-row:hover, .pal-row.sel { background: var(--accent-dim); }

/* toast */
#toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: rgba(6, 10, 22, 0.92); color: #fff;
  border: 1px solid var(--glass-border); padding: 9px 16px; border-radius: 999px; z-index: 40; box-shadow: var(--shadow-sm); }
#toast.err { background: rgba(120, 30, 20, 0.92); border-color: var(--danger); }

/* account / cockpit */
.panel { border-radius: var(--radius-lg); padding: 14px; margin-bottom: 12px; max-width: 960px; }
.panel table { width: 100%; border-collapse: collapse; }
.panel td, .panel th { padding: 5px 6px; border-bottom: 1px solid var(--line); text-align: left; }
.panel th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); }
.panel .row input, .panel .row select { width: auto; }
.token-box { font-family: var(--mono); background: rgba(0,0,0,0.45); border: 1px solid var(--line); padding: 10px; border-radius: var(--radius-sm); word-break: break-all; margin: 6px 0; color: #cfe0ff; }
.editor-row { display: grid; grid-template-columns: 1fr 120px 70px 30px 30px; gap: 4px; margin-bottom: 4px; align-items: center; }
.editor-row input[type=color] { padding: 0; height: 26px; }

/* login */
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-box { border-radius: var(--radius-lg); padding: 28px; width: 340px; background: rgba(6, 10, 22, 0.7); box-shadow: var(--glass-shine), var(--shadow); }
.login-box h1 { margin: 0; } .login-box .brand { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.login-box .brand-icon { height: 36px; width: auto; } .login-box .brand-word { height: 16px; width: auto; } .login-box h2 { margin: 4px 0 12px; font-weight: 400; color: var(--muted); text-transform: none; letter-spacing: 0; }
.login-box button { width: 100%; margin-top: 16px; background: linear-gradient(145deg, #8cbcff 0%, #3d7eff 100%); color: #061024; border-color: transparent; font-weight: 600;
  box-shadow: 0 8px 18px rgba(91,157,255,0.28); }
.login-box .error { color: var(--danger); } .login-box .hint { color: var(--muted); }

@media (max-width: 720px) {
  .drawer-body { grid-template-columns: 1fr; }
  .drawer-main { border-right: 0; }
}

/* files: tree (left) + file pane (right) */
.files { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 10px; align-items: start; }
.files .panel { max-width: none; margin: 0; }
.tree { position: sticky; top: 0; max-height: calc(100vh - var(--top-h) - 28px); overflow-y: auto; padding: 8px; }
.tree-head { display: flex; align-items: center; gap: 8px; padding: 4px 6px 8px; }
.tree-head button { padding: 2px 8px; font-size: 12px; }
.tree-new input { font-size: 12px; font-family: var(--mono); margin-bottom: 6px; }
.tree-row { display: flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: var(--radius-sm); color: var(--text-dim); font-size: 12.5px; cursor: pointer; text-decoration: none; }
.tree-row:hover { background: rgba(255,255,255,0.05); text-decoration: none; }
.tree-row.active { background: var(--accent-dim); color: #dbe8ff; }
.tree-row.dir { color: var(--text); font-weight: 500; user-select: none; }
.tree-row .caret { width: 10px; color: var(--muted); font-size: 11px; }
.tree-row .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree-row .meta { margin-left: auto; white-space: nowrap; font-family: var(--mono); font-size: 10px; }
.tree-row .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 8px var(--danger); flex-shrink: 0; }
.tree-row.locked .name { color: var(--danger); }
.file { padding: 12px 16px 18px; min-height: 300px; }
.file-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.file-head .path { font-size: 13px; color: var(--accent); }
.file-head button { padding: 3px 9px; font-size: 12px; white-space: nowrap; }
.file-sub { margin: 4px 0 10px; }
.file-sub b { color: var(--text-dim); }
.file-empty { color: var(--text-dim); max-width: 640px; }
.file-body { min-width: 0; }
.md-file { font-size: 14px; max-width: 900px; }
.md-file h1 { font-size: 20px; margin-top: 4px; } .md-file h2 { font-size: 16px; } .md-file h3 { font-size: 14px; }
.md table.md-table { border-collapse: collapse; margin: 8px 0; font-size: 12.5px; display: block; overflow-x: auto; max-width: 100%; }
.md table.md-table th, .md table.md-table td { border: 1px solid var(--line); padding: 4px 8px; text-align: left; vertical-align: top; }
.md table.md-table th { background: rgba(91, 157, 255, 0.10); color: var(--text); }
.md input[type=checkbox] { width: auto; margin-right: 4px; accent-color: var(--accent); }
.md img { max-width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.raw { font-family: var(--mono); font-size: 12px; white-space: pre-wrap; word-break: break-word; background: rgba(0,0,0,0.45); border: 1px solid var(--line); padding: 10px; border-radius: var(--radius-sm); color: var(--text-dim); }
.img-wrap img { max-width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--line); background: rgba(0,0,0,0.3); }
.file-editor { min-height: 60vh; font-size: 12.5px; line-height: 1.5; tab-size: 2; }
.commit-msg { flex: 1; font-family: var(--mono); font-size: 12px; }
.lock-banner { background: var(--danger-dim); border: 1px solid var(--danger); color: #ffd9d3; padding: 8px 12px; border-radius: var(--radius-sm); margin-bottom: 10px; }
.conflict { background: rgba(243, 181, 98, 0.08); border: 1px solid rgba(243, 181, 98, 0.5); padding: 10px 12px; border-radius: var(--radius); margin-bottom: 12px; }
.diff { font-family: var(--mono); font-size: 12px; background: rgba(0,0,0,0.45); border: 1px solid var(--line); padding: 8px 10px; border-radius: var(--radius-sm); overflow-x: auto; max-height: 50vh; color: var(--text-dim); margin: 6px 0; }
.diff .ln { display: block; white-space: pre; min-height: 1.2em; }
.diff .add { color: var(--ok); background: rgba(126, 217, 160, 0.10); }
.diff .del { color: var(--danger); background: rgba(239, 122, 108, 0.10); }
.diff .hunk { color: var(--accent); } .diff .hdr { color: var(--muted); }
.history { padding: 0; margin: 0 0 8px; }
.history li { list-style: none; display: flex; gap: 10px; align-items: center; padding: 5px 6px; border-bottom: 1px dotted var(--line); font-size: 12.5px; }
.history li.current { background: var(--accent-bg); border-radius: var(--radius-sm); }
.history li .msg { color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history li button { padding: 1px 7px; font-size: 11px; }
@media (max-width: 900px) { .files { grid-template-columns: 1fr; } .tree { position: static; max-height: 40vh; } }

/* admin: token reveal */
.token-reveal { margin-top: 10px; padding: 10px 12px; border-radius: var(--radius); background: var(--accent-bg); border: 1px solid var(--accent); }
.token-reveal .token-box { margin: 6px 0; }
.panel button.small { padding: 2px 8px; font-size: 11px; }
.cmd-line { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-top: 6px; }
.cmd-line code { font-family: var(--mono); font-size: 11px; background: rgba(0,0,0,0.45); border: 1px solid var(--line); padding: 4px 8px; border-radius: 4px; color: #cfe0ff; white-space: nowrap; overflow-x: auto; }
.chip.agentic { background: rgba(94, 234, 212, 0.12); border-color: rgba(94, 234, 212, 0.45); color: var(--teal); font-family: var(--mono); font-size: 10px; letter-spacing: .04em; }
.drawer-side label .row input[type=checkbox] { width: auto; accent-color: var(--teal); }

/* === interactive visibility, ported from Arcane Codex 0.8.2 (+15% fill/border on things you click). Delete this block to revert. === */
button:not(.primary):not(.danger):not(.link):not(.quick-add-btn), .btn:not(.primary) {
  background: rgba(80, 140, 255, 0.115); border-color: rgba(150, 190, 255, 0.25);
}
button:not(.primary):not(.link):hover, .btn:not(.primary):hover {
  background: rgba(80, 140, 255, 0.184); border-color: rgba(180, 210, 255, 0.32);
}
button.primary { box-shadow: 0 6px 18px rgba(91, 157, 255, 0.25); }
button.danger { background: rgba(239, 122, 108, 0.184); border-color: rgba(239, 122, 108, 0.40); }
button.danger:hover { background: rgba(239, 122, 108, 0.28); border-color: rgba(239, 122, 108, 0.55); }
button.active { background: var(--accent-dim); border-color: var(--accent); }
select { background-color: #161e28; border-color: rgba(150, 190, 255, 0.253); }
input:not([type=checkbox]):not([type=color]), textarea { border-color: rgba(150, 190, 255, 0.22); background: rgba(8, 10, 14, 0.437); }
button:focus-visible, .btn:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.14); }
.card { border-color: rgba(140, 180, 255, 0.207); }
.card:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.253); }
.tree-row:hover { background: rgba(80, 140, 255, 0.10); }
/* section tabs (Board / List / Files / My work) sit on the header seam like Codex's Stats / Items / Loot */
#topbar { padding-bottom: 0; }
#topbar #views { align-self: stretch; align-items: stretch; gap: 2px; margin: -8px 0 0; padding-top: 8px; }
#topbar #views button { background: transparent; border: 1px solid transparent; border-bottom: 2px solid transparent; border-radius: 10px 10px 0 0;
  color: var(--muted); font-weight: 600; padding: 0 14px; box-shadow: none; }
#topbar #views button:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); border-color: transparent; }
#topbar #views button.active, #topbar #views button.active:hover { color: #fff; background: var(--panel); border-color: var(--glass-border);
  border-bottom: 2px solid var(--teal); margin-bottom: -1px; box-shadow: var(--glass-shine); position: relative; }
#topbar .spacer ~ button, #topbar #usernav button, #topbar #usernav .btn, #topbar select { align-self: center; }
/* === end interactive visibility === */