:root {
  --bg: #111418;
  --panel: #1a1f26;
  --panel-2: #222832;
  --border: #2e3642;
  --text: #e6e9ee;
  --muted: #8d97a5;
  --accent: #4f8cff;
  --accent-2: #7c5cff;
  --good: #35c27a;
  --warn: #e6a23c;
  --bad: #ef5b5b;
  --radius: 10px;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0 0 .5em; font-weight: 650; }
h1 { font-size: 24px; }
h2 { font-size: 18px; }
h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.hidden, [hidden] { display: none !important; }

/* ---- Top bar ---- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 24px;
  padding: 10px 24px; background: #0c0e11; border-bottom: 1px solid var(--border);
}
.brand { font-weight: 700; font-size: 18px; color: var(--text); letter-spacing: .02em; }
.brand:hover { text-decoration: none; }
.topbar nav { display: flex; gap: 4px; }
.topbar nav a { color: var(--muted); padding: 6px 12px; border-radius: 6px; }
.topbar nav a.active, .topbar nav a:hover { color: var(--text); background: var(--panel-2); text-decoration: none; }
.topbar-note { margin-left: auto; color: var(--muted); font-size: 12px; }
.save-status { font-size: 12px; color: var(--muted); white-space: nowrap; }
.save-status.offline { color: var(--warn); }
.user-box { display: flex; align-items: center; gap: 8px; font-size: 13px; white-space: nowrap; }
.user-box:empty { display: none; }

/* ---- Login / register ---- */
.auth-wrap { max-width: 380px; margin: 8vh auto 0; }
.auth-wrap h1 { text-align: center; margin-bottom: 18px; }
.auth-wrap form { display: flex; flex-direction: column; gap: 12px; }
.auth-wrap label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.auth-wrap input { width: 100%; }
.auth-wrap button[type=submit] { justify-content: center; padding: 9px 12px; }
.auth-wrap .alt { text-align: center; margin-top: 14px; font-size: 13px; }
.link-box { display: flex; gap: 8px; }
.link-box input { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
.notice { border: 1px solid #5c4623; background: #211b12; color: #f0d6a8; padding: 12px 14px; border-radius: 8px; }

main { max-width: 1400px; margin: 0 auto; padding: 24px; position: relative; z-index: 1; }

/* ---- Building blocks ---- */
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.panel + .panel { margin-top: 16px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-2 > .panel + .panel { margin-top: 0; }  /* side by side, so no stacking gap */
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row.spread { justify-content: space-between; }
.stack > * + * { margin-top: 10px; }

button, .btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 7px; padding: 7px 12px; font: inherit; cursor: pointer;
}
button:hover, .btn:hover { border-color: #465264; text-decoration: none; }
button.primary, .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.primary:hover { filter: brightness(1.08); }
button.danger { color: var(--bad); }
button.ghost { background: transparent; border-color: transparent; color: var(--muted); padding: 3px 6px; }
button.ghost:hover { color: var(--text); background: var(--panel-2); }
button:disabled { opacity: .5; cursor: default; }

input[type=text], input[type=password], input[type=number], input[type=search], select, textarea {
  background: #0f1216; color: var(--text); border: 1px solid var(--border);
  border-radius: 7px; padding: 7px 10px; font: inherit;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
textarea { width: 100%; min-height: 180px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
label.check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
input[type=range] { accent-color: var(--accent); }

.pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); }
.pill.good { color: var(--good); border-color: #235c3f; background: #13261d; }
.pill.bad { color: var(--bad); border-color: #5c2323; background: #261313; }
.pill.warn { color: var(--warn); border-color: #5c4623; background: #261f13; }
.pill.foil { color: #c9a8ff; border-color: #4a3a6b; background: #1d1729; }

.ms { width: 15px; height: 15px; vertical-align: -2px; margin: 0 1px; }

/* ---- Autocomplete ---- */
.ac { position: relative; }
.ac input { width: 100%; }
.ac-list {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
  max-height: 320px; overflow: auto; box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.ac-list div { padding: 7px 10px; cursor: pointer; display: flex; justify-content: space-between; gap: 8px; }
.ac-list div:hover, .ac-list div.sel { background: #2c3440; }

/* ---- Home ---- */
.deck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.deck-tile {
  position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border);
  background: var(--panel) center 20% / cover no-repeat; min-height: 150px; color: var(--text);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.deck-tile::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,12,15,.95) 20%, rgba(10,12,15,.25)); }
.deck-tile > * { position: relative; }
.deck-tile .body { padding: 12px; }
.deck-tile .name { font-weight: 650; font-size: 16px; }
.deck-tile:hover { border-color: var(--accent); text-decoration: none; }
/* Deck folders (js/folders.js) */
.deck-folders { margin: 0 0 12px; }
.folder-chip { border-radius: 999px; padding: 4px 12px; font-size: 13px; }
.folder-chip.active { border-color: var(--accent); background: rgba(79, 140, 255, .15); }
.folder-limit a { white-space: nowrap; }
.folder-section { margin-bottom: 18px; }
.folder-section h3 { margin-bottom: 8px; }
.deck-tile .tile-folder {
  position: absolute; top: 8px; right: 8px; padding: 2px 6px; font-size: 13px; line-height: 1.2;
  background: rgba(10, 12, 15, .6); border-color: transparent; opacity: .55;
}
.deck-tile:hover .tile-folder, .deck-tile .tile-folder:focus { opacity: 1; }
@media (hover: none), (max-width: 640px) { .deck-tile .tile-folder { opacity: 1; } }
.folder-dialog { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; width: min(420px, calc(100vw - 32px)); }
.folder-dialog::backdrop { background: rgba(0, 0, 0, .6); }
.folder-list button { width: 100%; justify-content: flex-start; text-align: left; }

/* ---- Deck page ---- */
.deck-head {
  display: flex; gap: 20px; align-items: flex-end; padding: 20px; margin: 0 0 20px;
  background: #0c0e11 center 25% / cover no-repeat; position: relative; min-height: 180px;
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.deck-head::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--bg) 5%, rgba(17,20,24,.55)); }
.deck-head > * { position: relative; }
.deck-head .deck-title { flex: 1; min-width: 0; }
.deck-head h1 { font-size: 28px; margin-bottom: 4px; }
.deck-head .meta { display: flex; gap: 14px; flex-wrap: wrap; color: var(--muted); }
.deck-head .meta b { color: var(--text); }
.deck-head input.title-edit { color: var(--text); font: inherit; font-size: 26px; font-weight: 650; background: transparent; border-color: transparent; padding: 0; width: 100%; }
.deck-head input.title-edit:hover, .deck-head input.title-edit:focus { border-color: var(--border); background: rgba(0,0,0,.3); }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.tabs a { padding: 9px 14px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a.active { color: var(--text); border-bottom-color: var(--accent); }
.tabs a:hover { color: var(--text); text-decoration: none; }
@media (max-width: 640px) { .tabs { overflow-x: auto; scrollbar-width: thin; } .tabs a { white-space: nowrap; padding: 9px 10px; } }

.deck-columns { columns: 3 300px; column-gap: 16px; }
.type-group { break-inside: avoid; margin-bottom: 16px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; }
.type-group h3 { display: flex; justify-content: space-between; margin-bottom: 6px; }
.card-row { display: flex; align-items: center; gap: 6px; padding: 3px 4px; border-radius: 5px; }
.card-row:hover { background: var(--panel-2); }
.card-row .qty { width: 20px; color: var(--muted); text-align: right; }
/* Basic lands: the count is a box you can type in. */
.card-row input.qty-edit {
  width: 46px; padding: 1px 4px; font-size: 13px; text-align: right; background: transparent;
  border-color: transparent; color: var(--text); -moz-appearance: textfield;
}
.card-row:hover input.qty-edit, .card-row input.qty-edit:focus { border-color: var(--border); background: #0f1216; }
#add-qty { width: 64px; }
.card-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: default; }
.card-row .cost { white-space: nowrap; }
.card-row .actions { display: none; }
.card-row:hover .actions { display: inline-flex; }
.own-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.own-dot.yes { background: var(--good); }
.own-dot.no { background: var(--bad); }
.own-dot.used { background: var(--warn); }

.visual-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.visual-grid .vc { position: relative; }
.visual-grid img { width: 100%; border-radius: 7px; display: block; aspect-ratio: 488 / 680; background: var(--panel-2); }
.visual-grid .badge { position: absolute; top: 6px; left: 6px; }
.img-ph {
  aspect-ratio: 488 / 680; width: 100%; border-radius: 7px; background: var(--panel-2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px; color: var(--muted); font-size: 13px;
}

/* ---- Recommendations ---- */
.rec-layout { display: grid; grid-template-columns: 290px 1fr; gap: 16px; align-items: start; }
.rec-side { position: sticky; top: 70px; }
.rec-side .field { margin-bottom: 12px; }
.rec-side .field > label:first-child { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.rec-side select, .rec-side input[type=number], .rec-side input[type=search] { width: 100%; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 4px 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel-2); cursor: pointer; font-size: 12px; color: var(--muted); }
.chip.on { background: #1e2b45; border-color: var(--accent); color: var(--text); }
.chip .n { opacity: .6; margin-left: 3px; }

.rec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.rec-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.rec-card img { width: 100%; aspect-ratio: 488 / 680; object-fit: cover; display: block; background: var(--panel-2); }
.rec-card .body { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.rec-card .name { font-weight: 600; }
.rec-card .reasons { display: flex; flex-wrap: wrap; gap: 4px; }
.rec-card .reasons span { font-size: 11px; padding: 1px 6px; border-radius: 5px; background: var(--panel-2); color: var(--muted); }
.reasons .k-syn { color: #b69cff !important; }
.reasons .k-pop { color: #8fb4ff !important; }
.reasons .k-own { color: var(--good) !important; }
.reasons .k-role { color: var(--warn) !important; }
.reasons .k-combo { color: #ff8fd0 !important; }
.reasons .k-theme { color: #66d9e8 !important; }
.reasons .k-neg { color: var(--bad) !important; }
.reasons .k-budget { color: #a3e635 !important; }
.rec-card .foot { margin-top: auto; display: flex; gap: 6px; align-items: center; }
.scorebar { height: 4px; background: var(--panel-2); border-radius: 2px; overflow: hidden; }
.scorebar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }

.rec-table { width: 100%; border-collapse: collapse; }
.rec-table th, .rec-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.rec-table th { color: var(--muted); font-weight: 500; font-size: 12px; }

/* ---- Stats ---- */
.bars { display: flex; align-items: flex-end; gap: 8px; height: 160px; padding-top: 10px; }
.bars .bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.bars .bar i { display: block; width: 100%; background: var(--accent); border-radius: 4px 4px 0 0; min-height: 2px; }
.bars .bar span { font-size: 12px; color: var(--muted); }
.meter { display: grid; grid-template-columns: 110px 1fr 60px; gap: 10px; align-items: center; margin: 6px 0; }
.meter .track { height: 8px; background: var(--panel-2); border-radius: 4px; overflow: hidden; }
.meter .track i { display: block; height: 100%; background: var(--good); }
.meter .track i.low { background: var(--warn); }

/* ---- Collection ---- */
.explorer { display: grid; grid-template-columns: 280px 1fr; gap: 16px; align-items: start; }
.filter-panel { position: sticky; top: 70px; max-height: calc(100vh - 90px); overflow: auto; }
.filter-panel .field { margin-top: 14px; }
.filter-panel .field > label:first-child { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.filter-panel input[type=search], .filter-panel select { width: 100%; }
.range-row { display: flex; gap: 8px; align-items: center; }
.range-row input { width: 100%; min-width: 0; }
.color-toggles { display: flex; gap: 6px; }
.color-toggle { padding: 5px; border-radius: 50%; line-height: 0; opacity: .45; }
.color-toggle .ms { width: 20px; height: 20px; margin: 0; }
.color-toggle.on { opacity: 1; border-color: var(--accent); box-shadow: 0 0 0 2px #1e2b45; }
.built-query { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.built-query code { background: #0f1216; border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; width: 100%; word-break: break-word; }
.search-row { display: flex; gap: 8px; }
.search-row input { flex: 1; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; padding: 9px 12px; }
.syntax-help { margin-top: 10px; padding: 8px 12px; }
.syntax-help code { white-space: nowrap; }
.coll-card { position: relative; }
.coll-card a { display: block; }
.coll-card .price-tag { position: absolute; right: 6px; bottom: 6px; background: rgba(12,14,17,.85); border-radius: 5px; padding: 1px 6px; font-size: 12px; }
.dropzone { border: 2px dashed var(--border); border-radius: var(--radius); padding: 28px; text-align: center; color: var(--muted); }
.dropzone.over { border-color: var(--accent); color: var(--text); background: #16202f; }
table.list { width: 100%; border-collapse: collapse; }
table.list td, table.list th { padding: 5px 8px; border-bottom: 1px solid var(--border); text-align: left; }
table.list th { color: var(--muted); font-weight: 500; }

/* ---- Misc ---- */
#preview { position: fixed; z-index: 100; width: 325px; border-radius: 12px; pointer-events: none; box-shadow: 0 12px 40px rgba(0,0,0,.6); }
/* Touch: a held card, big in the middle of the screen (js/app.js). */
#preview.held { width: min(325px, calc(100vw - 32px)); left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); z-index: 3600; }
@media (hover: none) { [data-card] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } }
#toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 200; }
.toast { background: var(--panel-2); border: 1px solid var(--border); border-left: 3px solid var(--accent); padding: 10px 14px; border-radius: 8px; max-width: 380px; transition: opacity .4s; }
.toast.error { border-left-color: var(--bad); }
.toast.good { border-left-color: var(--good); }
.toast.hide { opacity: 0; }
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--muted); border-top-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty { text-align: center; padding: 40px; color: var(--muted); }
.error-box { border: 1px solid #5c2323; background: #1f1414; color: #f3b1b1; padding: 12px 14px; border-radius: 8px; }
details summary { cursor: pointer; color: var(--muted); }

@media (max-width: 900px) {
  main { padding: 16px; }
  .grid-2, .rec-layout, .explorer { grid-template-columns: 1fr; }
  .rec-side, .filter-panel { position: static; max-height: none; }
  .deck-head { margin: 0 0 16px; }
  .topbar { padding: 10px 16px; gap: 12px; }
  .topbar-note, .save-status { display: none; }
}

/* Card printings dialog (collection) */
#card-dialog { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 48px); }
#card-dialog::backdrop { background: rgba(0, 0, 0, .6); }
.printings { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.printing { display: flex; gap: 10px; align-items: flex-start; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; }
.printing img, .printing .img-ph { width: 110px; flex: none; border-radius: 5px; }
.printing .img-ph { aspect-ratio: 488 / 680; display: grid; place-items: center; text-align: center; font-size: 12px; }
.printing .stack { gap: 4px; }
.coll-card { cursor: pointer; }

/* Deck page visual view: Moxfield-style stacks. Each card overlaps the one
   above it, leaving its name bar visible; hovering lifts a card to the front. */
.stacks { display: flex; flex-wrap: wrap; gap: 18px 14px; align-items: flex-start; }
.stack-col { width: 180px; }
.stack-col h3 { font-size: 14px; margin: 0 0 8px; }
.stack { display: flex; flex-direction: column; padding-bottom: 8px; }
.stack-card { position: relative; border-radius: 8px; transition: transform .12s ease; }
.stack-card + .stack-card { margin-top: -214px; } /* card is 251px tall: ~37px (the name bar) stays visible */
.stack-card img, .stack-card .img-ph { width: 180px; aspect-ratio: 488 / 680; border-radius: 8px; display: block; background: var(--panel-2); box-shadow: 0 -1px 3px rgba(0, 0, 0, .5); }
.stack-card .img-ph { display: flex; align-items: flex-start; padding: 8px; font-size: 12px; border: 1px solid var(--border); box-sizing: border-box; }
.stack-card:hover { z-index: 5; transform: translateY(-6px); }
.stack-card .badge { position: absolute; top: 6px; right: 6px; gap: 4px; align-items: center; }
.stack-card .own-dot { width: 10px; height: 10px; box-shadow: 0 0 0 2px rgba(0, 0, 0, .6); }
@media (max-width: 640px) {
  .stack-col { width: calc(50% - 7px); }
  .stack-card img, .stack-card .img-ph { width: 100%; }
  .stack-card + .stack-card { margin-top: -119%; } /* of the column width: card is 139% tall, 20% stays visible */
}

/* Stats: creature types and keywords (rows open to list their cards) */
.tribe summary, .more > summary { list-style: none; cursor: pointer; }
.tribe summary::-webkit-details-marker, .more > summary::-webkit-details-marker { display: none; }
.tribe > div { padding: 2px 0 8px; }
.more > summary { margin: 4px 0; }

/* Card art in the empty space beside the page on wide screens. The columns
   sit under the (opaque, sticky) top bar and fade into the background toward
   the page and toward the bottom. Hidden where there isn't room. */
.side-art { display: none; position: fixed; top: 0; bottom: 0; width: calc((100vw - 1400px) / 2); z-index: 0; pointer-events: none;
  background: var(--bg) center 20% / cover no-repeat; opacity: 0; transition: opacity .8s ease; }
.side-art.left { left: 0; }
.side-art.right { right: 0; }
.side-art.shown { opacity: .6; }
.side-art::after { content: ''; position: absolute; inset: 0; }
.side-art.left::after { background: linear-gradient(to right, transparent 35%, var(--bg)), linear-gradient(to bottom, transparent 40%, var(--bg) 92%); }
.side-art.right::after { background: linear-gradient(to left, transparent 35%, var(--bg)), linear-gradient(to bottom, transparent 40%, var(--bg) 92%); }
@media (min-width: 1640px) { .side-art { display: block; } }

/* Announcement banner (set on the Admin page) */
#announcement { max-width: 1400px; margin: 12px auto 0; padding: 0 24px; position: relative; z-index: 2; }
.announce { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px 10px 14px; border-radius: var(--radius);
  background: #12203a; border: 1px solid #25406e; border-left: 4px solid var(--accent); }
.announce .text { flex: 1; min-width: 0; line-height: 1.45; overflow-wrap: anywhere; }
.announce button { padding: 0 10px; font-size: 18px; line-height: 1.2; }
.announce.warning { background: #261f13; border-color: #5c4623; border-left-color: var(--warn); }
.announce-tab { display: block; margin-left: auto; font-size: 13px; padding: 4px 12px; border-radius: 999px; }
.announce-tab.warning { color: var(--warn); border-color: #5c4623; }

/* Site updates page (js/updates.js) */
.updates { display: flex; flex-direction: column; gap: 14px; max-width: 820px; }
.update h2 { margin: 2px 0 8px; }
.update p { margin: 0; line-height: 1.5; }
.update .howto { margin-top: 10px; padding: 8px 12px; background: var(--panel-2); border-radius: 8px; font-size: 14px; }
.update .howto ul { margin: 4px 0 0; padding-left: 20px; }
.update .howto li { margin: 3px 0; }
.testing-tag { font-size: 11px; vertical-align: 2px; margin-left: 4px; }
.btn .testing-tag { margin-left: 2px; vertical-align: 0; background: var(--warn); border-color: transparent; color: #1d1405; font-weight: 600; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; border-radius: 0; background: transparent; color: var(--muted); padding: 6px 12px; }
.seg button + button { border-left: 1px solid var(--border); }
.seg button.on { color: #fff; background: var(--panel-2); }
.seg button.on.admins { background: #3a2e14; color: var(--warn); }
.seg button.on.everyone { background: #173324; color: var(--good); }
.seg button.on.off { background: #2a1818; color: var(--bad); }
.seg button.on.supporters { background: #2c1f3d; color: #d2b4ff; }
.features-table td { vertical-align: middle; padding: 8px 6px; }
.topbar nav a.has-new::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--accent); vertical-align: middle; }

/* Phones: the tabs get their own row under the logo (and scroll sideways if
   they still don't fit), so nothing is pushed off the screen. */
@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; row-gap: 6px; }
  .topbar nav { order: 3; width: 100%; overflow-x: auto; white-space: nowrap; }
  .deck-head { flex-wrap: wrap; min-height: 0; padding-top: 70px; }
  .deck-head .deck-title { flex: 1 1 100%; }
  .user-box { margin-left: auto; }
}

/* Fan Content Policy disclaimer and data credits, under every page. */
.site-footer { max-width: 1400px; margin: 0 auto; padding: 16px 24px 28px; position: relative; z-index: 1;
  color: var(--muted); font-size: 11px; line-height: 1.5; border-top: 1px solid var(--border); }
.site-footer p { margin: 0 0 4px; }
.site-footer a { color: inherit; text-decoration: underline; }
/* The full-screen playtest tables have no room for it. */
body:has(#app .pt) .site-footer { display: none; }

/* ---- Supporters (js/support.js) ---- */
.supporter-pill { color: #d2b4ff; border-color: #4a3a6b; background: #1d1729; text-decoration: none !important; white-space: nowrap; }
.supporter-pill:hover { color: #efe3ff; border-color: #6a55a0; }
.supporter-badge { color: #f0c75e; margin-left: 3px; font-size: 13px; cursor: default; }
.user-box .user-link { color: var(--muted); }
.user-box .user-link:hover { color: var(--text); text-decoration: none; }
.support-page { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.support-hero { text-align: center; padding: 8px 0 0; }
.support-hero p { max-width: 640px; margin: 6px auto 0; }
.support-free { border-color: #235c3f; background: linear-gradient(180deg, #13261d, var(--panel)); }
.support-free ul, .support-perks ul { margin: 6px 0 0; padding-left: 20px; }
.support-free li, .support-perks li { margin: 3px 0; }
.support-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.support-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 15px; letter-spacing: .08em; padding: 3px 10px; border-radius: 6px; background: var(--panel-2); border: 1px dashed var(--border); }
.sup-admin td { vertical-align: middle; }
.sup-admin input[type=date] { width: 150px; }
@media (max-width: 640px) {
  .support-cta button, .support-cta .btn { width: 100%; justify-content: center; }
  .sup-admin table, .sup-admin tbody, .sup-admin tr, .sup-admin td { display: block; }
  .sup-admin thead { display: none; }
  .sup-admin tr { border-bottom: 1px solid var(--border); padding: 6px 0; }
  .sup-admin td { border: 0 !important; padding: 3px 0 !important; text-align: left !important; }
}
/* Admin tabs (#/admin/<tab>): the bar scrolls sideways instead of wrapping, and wide tables scroll inside their panel. */
.admin-tabs { overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.admin-tabs a { flex: none; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
.admin-tab-head { margin-bottom: 12px; flex-wrap: nowrap; }
.table-scroll { overflow-x: auto; max-width: 100%; }
.admin-summary { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.admin-summary > .panel { display: block; color: var(--text); margin: 0; min-height: 44px; }
.admin-summary > .panel:hover { border-color: var(--accent); text-decoration: none; }
.admin-summary h3 { margin: 0 0 4px; }
/* Admin → Usage (#115): plain CSS charts, no library. */
.usage-bars { display: flex; align-items: flex-end; gap: 2px; height: 140px; }
.usage-bar { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; min-width: 0; }
.usage-bar span { display: block; width: 100%; min-height: 1px; background: var(--accent); border-radius: 2px 2px 0 0; }
.usage-split { display: flex; border-radius: 6px; overflow: hidden; font-size: 13px; }
.usage-split span { padding: 6px 8px; white-space: nowrap; overflow: hidden; background: var(--accent); color: #fff; min-width: 0; }
.usage-split span + span { background: var(--muted); }
.admin-summary h3 { margin: 0 0 6px; font-size: 14px; color: var(--muted); font-weight: 500; }
@media (max-width: 640px) {
  #admin button, #admin select { min-height: 44px; }
}
/* Admin: database health (app/dbmonitor.py) */
.dbmon-scroll { overflow-x: auto; }
.dbmon-table td { vertical-align: middle; }
.cap { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.cap-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border); overflow: hidden; }
.cap-bar > span { display: block; height: 100%; background: var(--good); }
.cap-bar > span.warn, .spark > span.warn { background: var(--warn); }
.cap-bar > span.bad, .spark > span.bad { background: var(--bad); }
.spark { display: inline-flex; align-items: flex-end; gap: 2px; height: 18px; }
.spark > span { width: 5px; background: var(--border); border-radius: 1px; }
.spark > span.good { background: var(--good); }
.small.good { color: var(--good); }
.small.warn { color: var(--warn); }
.small.bad { color: var(--bad); }
/* Admin → Usage → Suspect cards (#118) */
.suspects td { vertical-align: top; }
.suspect-example { margin: 6px 0; }
.suspect-example pre { white-space: pre-wrap; word-break: break-word; font-size: 12px; max-height: 240px; overflow: auto; margin: 4px 0 0; padding: 6px; background: var(--panel-2, rgba(127, 127, 127, 0.08)); border-radius: 4px; }