/* Layout: frosted glass panels floating over a slow granite-and-copper aurora. One sticky glass bar, stat row, then the active view. */
:root {
  --ink: #090c13;
  --ink-2: #0f1420;
  --glass: rgba(255, 255, 255, 0.055);
  --glass-strong: rgba(255, 255, 255, 0.09);
  --glass-press: rgba(255, 255, 255, 0.14);
  --edge: rgba(255, 255, 255, 0.11);
  --edge-hi: rgba(255, 255, 255, 0.26);
  --text: #eef1f6;
  --muted: #9aa3b6;
  --faint: #6b7489;
  --copper: #e8955f;
  --copper-deep: #b8643a;
  --teal: #5fd4c4;
  --st-working: #5fd4c4;
  --st-next: #a9b6cf;
  --st-waiting: #f5c451;
  --st-blocked: #fb7f8f;
  --st-requested: #c7b4ff;
  --st-done: #8b95a8;
  --ok: #5ee08f;
  --font-display: "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --font-body: "Geist", "Helvetica Neue", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --r-lg: 22px;
  --r-md: 14px;
  --r-sm: 10px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font: 15px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
}
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--copper); }
::selection { background: rgba(232, 149, 95, 0.35); }
[hidden] { display: none !important; }

/* ---------- backdrop ---------- */
.sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(120% 90% at 50% -10%, #182033 0%, var(--ink) 60%); }
.blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.55; will-change: transform; }
.blob.b1 { width: 52vw; height: 52vw; left: -12vw; top: -14vw; background: radial-gradient(circle at 40% 40%, var(--copper), transparent 65%); animation: drift1 26s ease-in-out infinite alternate; }
.blob.b2 { width: 46vw; height: 46vw; right: -14vw; top: 10vh; background: radial-gradient(circle at 50% 50%, #2f7f86, transparent 65%); animation: drift2 32s ease-in-out infinite alternate; }
.blob.b3 { width: 60vw; height: 40vw; left: 18vw; bottom: -22vw; background: radial-gradient(circle at 50% 50%, #3a3f8f, transparent 65%); opacity: 0.45; animation: drift3 38s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(14vw, 10vh) scale(1.12); } }
@keyframes drift2 { to { transform: translate(-12vw, 16vh) scale(0.9); } }
@keyframes drift3 { to { transform: translate(-10vw, -8vh) scale(1.15); } }
/* granite speckle */
.sky::after {
  content: ""; position: absolute; inset: 0; opacity: 0.16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { .blob { animation: none; } }

/* ---------- glass ---------- */
.glass {
  position: relative;
  background: linear-gradient(160deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03) 45%, rgba(255,255,255,0.05));
  -webkit-backdrop-filter: blur(22px) saturate(165%);
  backdrop-filter: blur(22px) saturate(165%);
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -1px 0 rgba(255,255,255,0.03), 0 18px 50px -20px rgba(0,0,0,0.65);
  isolation: isolate;
}
/* specular rim: brighter on the top-left edge, like light catching cut glass */
.glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, var(--edge-hi), transparent 35%, transparent 70%, rgba(255,255,255,0.12));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
/* glare that follows the pointer */
.glare::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.10), transparent 45%);
  z-index: -1;
}
.glare:hover::after { opacity: 1; }

/* ---------- top bar ---------- */
.bar-shield { position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--ink); }
.bar {
  position: sticky; top: calc(env(safe-area-inset-top, 0px) + 12px); z-index: 20;
  max-width: 1180px; margin: 12px auto 0; padding: 10px 10px 10px 16px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border-radius: 999px;
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mark {
  width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex: none;
  font: 700 17px/1 var(--font-display); color: #1a0f08;
  background: linear-gradient(145deg, #f6b58a, var(--copper) 45%, var(--copper-deep));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 6px 18px -6px rgba(232,149,95,0.7);
}
.brand-name { font: 650 16px/1.1 var(--font-display); letter-spacing: -0.01em; }
.brand-sub { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.tabs { display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.06); margin-left: auto; }
.tab {
  border: 0; background: none; padding: 7px 14px; border-radius: 999px; cursor: pointer; color: var(--muted);
  font-weight: 550; font-size: 13.5px; position: relative; white-space: nowrap; transition: color .2s, background .2s;
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--text); background: var(--glass-press); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); }
.tab .dot { position: absolute; top: 5px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--copper); box-shadow: 0 0 10px var(--copper); }
.who { display: flex; align-items: center; gap: 8px; }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none;
  font: 650 12.5px/1 var(--font-body); color: var(--ink); background: var(--c, var(--st-next));
}
.avatar.julian { --c: var(--copper); }
.avatar.eric { --c: #8fd3ff; }
.avatar.pedro { --c: #ffd27a; }
.avatar.benson { --c: #b9f2a1; }
.avatar.sm { width: 22px; height: 22px; font-size: 10px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer;
  border: 1px solid var(--edge); background: var(--glass-strong); color: var(--text);
  padding: 8px 15px; border-radius: 999px; font-weight: 560; font-size: 13.5px; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14); transition: background .2s, transform .15s, border-color .2s;
}
.btn:hover { background: var(--glass-press); border-color: var(--edge-hi); }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: progress; }
.btn.primary { background: linear-gradient(150deg, #f4ae80, var(--copper) 50%, var(--copper-deep)); color: #1d1007; border-color: rgba(255,210,180,0.5); box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 8px 24px -10px rgba(232,149,95,0.8); }
.btn.primary:hover { filter: brightness(1.06); }
.btn.ok { background: rgba(94,224,143,0.16); border-color: rgba(94,224,143,0.45); color: #c9f7d9; }
.btn.warn { background: rgba(245,196,81,0.13); border-color: rgba(245,196,81,0.45); color: #fde7ad; }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--muted); }
.btn.ghost:hover { color: var(--text); background: var(--glass); }
.btn.sm { padding: 5px 11px; font-size: 12.5px; }
.icon-btn { width: 32px; height: 32px; padding: 0; border-radius: 50%; }
:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }

/* ---------- page ---------- */
main { max-width: 1180px; margin: 0 auto; }
.hero { padding: 34px 4px 18px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; }
.hero h1 { margin: 0; font: 650 clamp(30px, 5vw, 46px)/1.02 var(--font-display); letter-spacing: -0.03em; text-wrap: balance; }
.hero h1 em { font-style: normal; background: linear-gradient(100deg, #ffd0ae, var(--copper)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { margin: 10px 0 0; color: var(--muted); max-width: 60ch; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 26px; }
.stat { padding: 16px 18px; border-radius: var(--r-lg); cursor: pointer; text-align: left; border: 1px solid var(--edge); color: var(--text); }
.stat:hover { border-color: var(--edge-hi); }
.stat-n { font: 600 34px/1 var(--font-mono); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.stat-l { margin-top: 8px; font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.stat-l i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.stat.hot { border-color: rgba(245,196,81,0.5); }

.section-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 6px 4px 12px; flex-wrap: wrap; }
.section-h h2 { margin: 0; font: 620 19px/1.2 var(--font-display); letter-spacing: -0.01em; }
.section-h p { margin: 0; color: var(--muted); font-size: 13px; }
.view > section + section { margin-top: 30px; }

/* ---------- cards ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.card {
  padding: 18px; cursor: pointer; display: flex; flex-direction: column; gap: 10px; min-width: 0; text-align: left;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .2s;
}
.card:hover { transform: translateY(-3px); border-color: var(--edge-hi); }
.card-top { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.eyebrow { font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank { font: 600 12px/1 var(--font-mono); color: var(--faint); }
.card h3 { margin: 0; font: 620 18px/1.22 var(--font-display); letter-spacing: -0.01em; text-wrap: balance; }
.card .sum { margin: 0; color: var(--muted); font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.latest { font-size: 13px; padding: 10px 12px; border-radius: var(--r-sm); background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.05); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.latest b { color: var(--faint); font-weight: 500; font-family: var(--font-mono); font-size: 11.5px; margin-right: 6px; }
.card-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 2px; }
.meta { font-size: 12px; color: var(--faint); font-family: var(--font-mono); }

.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 560; white-space: nowrap; color: var(--c);
  background: color-mix(in srgb, var(--c) 13%, transparent); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.chip.working { --c: var(--st-working); } .chip.next { --c: var(--st-next); } .chip.waiting { --c: var(--st-waiting); }
.chip.blocked { --c: var(--st-blocked); } .chip.requested { --c: var(--st-requested); } .chip.done { --c: var(--st-done); }
.chip.pending { --c: var(--st-waiting); } .chip.approved { --c: var(--ok); } .chip.changes { --c: var(--st-blocked); }
.chip.plain { --c: var(--muted); } .chip.plain::before { display: none; }

.needs { border-color: rgba(245,196,81,0.45); box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 0 0 1px rgba(245,196,81,0.12), 0 18px 50px -20px rgba(0,0,0,0.65); }

/* ---------- priority list ---------- */
.queue { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.row {
  display: grid; grid-template-columns: 28px 46px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 12px 14px 12px 10px; border-radius: 18px; touch-action: pan-y; user-select: none;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.row:hover { border-color: var(--edge-hi); }
.row.dragging { z-index: 5; transform: scale(1.015); border-color: rgba(232,149,95,0.6); box-shadow: 0 24px 60px -18px rgba(0,0,0,0.8), 0 0 0 1px rgba(232,149,95,0.3); transition: none; }
.handle { cursor: grab; touch-action: none; color: var(--faint); display: grid; place-items: center; height: 40px; border: 0; background: none; border-radius: 8px; }
.handle:hover { color: var(--text); background: var(--glass); }
.row.dragging .handle { cursor: grabbing; }
.big-rank { font: 600 26px/1 var(--font-mono); letter-spacing: -0.05em; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.row:first-child .big-rank { color: var(--copper); }
.row-main { min-width: 0; cursor: pointer; }
.row-title { font: 600 16px/1.25 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-sub { display: flex; gap: 8px; align-items: center; margin-top: 5px; flex-wrap: wrap; }
.row-btns { display: flex; gap: 4px; }
.row-btns .btn { width: 30px; height: 30px; padding: 0; border-radius: 50%; }

/* ---------- activity ---------- */
.feed { list-style: none; margin: 0; padding: 6px 18px; }
.feed li { display: grid; grid-template-columns: 22px minmax(0,1fr) auto; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.06); align-items: start; }
.feed li:last-child { border-bottom: 0; }
.feed .what { font-size: 14px; }
.feed .what a { color: var(--text); text-decoration: none; font-weight: 600; cursor: pointer; }
.feed .what a:hover { color: var(--copper); }
.feed .quote { color: var(--muted); font-size: 13px; margin-top: 3px; }
.feed time { font: 12px var(--font-mono); color: var(--faint); white-space: nowrap; }
.feed li.new .what::before { content: "NEW"; font: 600 9.5px/1 var(--font-mono); letter-spacing: 0.08em; color: var(--ink); background: var(--copper); padding: 2px 5px; border-radius: 4px; margin-right: 8px; vertical-align: 2px; }

.empty { padding: 34px 20px; text-align: center; color: var(--muted); }
.empty strong { display: block; color: var(--text); font: 600 17px var(--font-display); margin-bottom: 4px; }

/* ---------- drawer ---------- */
.scrim { position: fixed; inset: 0; background: rgba(4,6,10,0.5); z-index: 40; opacity: 0; transition: opacity .3s; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.scrim.on { opacity: 1; }
.drawer {
  position: fixed; z-index: 50; top: calc(10px + env(safe-area-inset-top, 0px)); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); right: max(10px, env(safe-area-inset-right, 0px));
  width: min(620px, calc(100vw - 20px)); border-radius: 26px; display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(160deg, rgba(30,36,52,0.82), rgba(14,18,28,0.88));
  transform: translateX(calc(100% + 30px)); visibility: hidden;
  transition: transform .45s cubic-bezier(.2,.85,.2,1), visibility 0s linear .45s;
}
.drawer.on { transform: none; visibility: visible; transition: transform .45s cubic-bezier(.2,.85,.2,1); }
.d-head { padding: 20px 22px 16px; border-bottom: 1px solid rgba(255,255,255,0.07); display: flex; flex-direction: column; gap: 10px; }
.d-head h2 { margin: 0; font: 650 25px/1.12 var(--font-display); letter-spacing: -0.02em; text-wrap: balance; }
.d-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.d-close { position: absolute; top: 14px; right: 14px; }
.d-body { flex: 1; overflow-y: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 16px; overscroll-behavior: contain; }
.d-sum { color: #cdd3df; white-space: pre-wrap; margin: 0; }
.d-link { font-size: 13.5px; word-break: break-all; }
.timeline { display: flex; flex-direction: column; gap: 12px; }
.t-item { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 10px; }
.t-card { padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.07); min-width: 0; }
.t-card.fb-approve { border-color: rgba(94,224,143,0.35); background: rgba(94,224,143,0.06); }
.t-card.fb-changes { border-color: rgba(251,127,143,0.35); background: rgba(251,127,143,0.06); }
.t-card.resolved { opacity: 0.6; }
.t-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.t-meta strong { color: var(--text); font-weight: 600; }
.t-body { white-space: pre-wrap; word-wrap: break-word; font-size: 14px; }
.t-body a { word-break: break-all; }
.files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.thumb { width: 120px; height: 84px; border-radius: 10px; object-fit: cover; cursor: zoom-in; border: 1px solid var(--edge); background: rgba(255,255,255,0.04); }
.file { display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border-radius: 10px; background: rgba(0,0,0,0.25); border: 1px solid var(--edge); font-size: 12.5px; cursor: pointer; max-width: 100%; }
.file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file small { color: var(--faint); font-family: var(--font-mono); }

.composer { border-top: 1px solid rgba(255,255,255,0.07); padding: 14px 22px calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 10px; background: rgba(0,0,0,0.18); }
.composer-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.composer-actions .spacer { flex: 1; }
.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.06); }
.seg button { border: 0; background: none; padding: 6px 12px; border-radius: 999px; cursor: pointer; font-size: 13px; color: var(--muted); font-weight: 560; }
.seg button[aria-pressed="true"] { background: var(--glass-press); color: var(--text); }
.seg button[data-kind="approve"][aria-pressed="true"] { background: rgba(94,224,143,0.2); color: #c9f7d9; }
.seg button[data-kind="changes"][aria-pressed="true"] { background: rgba(251,127,143,0.2); color: #ffd0d6; }
.check { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); cursor: pointer; }
.check input { accent-color: var(--copper); width: 16px; height: 16px; }
.pending-files { display: flex; flex-wrap: wrap; gap: 6px; }
.pending-files .file { cursor: default; }
.drop-hint { font-size: 12px; color: var(--faint); }
.dropping { outline: 2px dashed var(--copper); outline-offset: -8px; }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12px; color: var(--muted); font-weight: 560; letter-spacing: 0.02em; }
.input, textarea.input, select.input {
  width: 100%; padding: 10px 13px; border-radius: 12px; border: 1px solid var(--edge); background: rgba(0,0,0,0.28);
  outline: none; transition: border-color .2s, background .2s; font-size: 14.5px;
}
.input:focus { border-color: rgba(232,149,95,0.65); background: rgba(0,0,0,0.38); }
textarea.input { resize: vertical; min-height: 70px; line-height: 1.45; }
select.input option { background: var(--ink-2); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ---------- modal ---------- */
.modal { position: fixed; z-index: 60; inset: 0; display: grid; place-items: center; padding: 16px; }
.modal-card { width: min(520px, 100%); padding: 24px; display: flex; flex-direction: column; gap: 14px; background: linear-gradient(160deg, rgba(34,40,58,0.86), rgba(14,18,28,0.92)); max-height: calc(100dvh - 32px); overflow-y: auto; }
.modal-card h2 { margin: 0; font: 650 22px/1.15 var(--font-display); }
.modal-card p.hint { margin: -6px 0 0; color: var(--muted); font-size: 13.5px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.err { color: #ffb3bd; font-size: 13px; min-height: 1em; }

/* ---------- login ---------- */
.login { min-height: 100dvh; display: grid; place-items: center; padding: 24px 0; }
.login-card { width: min(420px, 100%); padding: 32px 28px; display: flex; flex-direction: column; gap: 16px; }
.login-card .mark { width: 46px; height: 46px; font-size: 22px; border-radius: 14px; }
.login-card h1 { margin: 6px 0 0; font: 650 30px/1.05 var(--font-display); letter-spacing: -0.03em; }
.login-card p { margin: 0; color: var(--muted); }
.login-card .input { font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; font-size: 16px; }

/* ---------- lightbox + toast ---------- */
.lightbox { position: fixed; inset: 0; z-index: 80; background: rgba(4,6,10,0.88); display: grid; place-items: center; padding: 20px; cursor: zoom-out; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 12px; box-shadow: 0 30px 80px rgba(0,0,0,0.6); }
.toast { position: fixed; z-index: 90; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 30px); opacity: 0; padding: 11px 18px; border-radius: 999px; font-size: 14px; transition: all .35s cubic-bezier(.2,.85,.2,1); pointer-events: none; max-width: calc(100vw - 32px); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { border-color: rgba(251,127,143,0.5); }

.foot-note { margin: 34px 4px 0; font-size: 12px; color: var(--faint); text-align: center; }
.loading { padding: 80px 0; text-align: center; color: var(--muted); }

/* ---------- small screens ---------- */
@media (max-width: 860px) {
  .tabs { order: 3; margin-left: 0; width: 100%; justify-content: space-between; overflow-x: auto; }
  .tab { flex: 1; padding: 7px 8px; }
  .bar { border-radius: 24px; }
  .who { margin-left: auto; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .bar { position: relative; top: 0; }
  .brand { flex: 1; }
  .brand-name { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .brand-sub { display: none; }
  .bar .btn.primary span { display: none; }
  .row { grid-template-columns: 24px 34px minmax(0, 1fr); }
  .row-btns { grid-column: 3; justify-self: start; }
  .big-rank { font-size: 20px; }
  .two { grid-template-columns: 1fr; }
  .drawer { right: 0; left: 0; width: 100%; top: env(safe-area-inset-top, 0px); bottom: 0; border-radius: 22px 22px 0 0; transform: translateY(105%); }
  .drawer.on { transform: none; }
  .grid { grid-template-columns: minmax(0, 1fr); }
}
.queue { position: relative; }
.brand > div { min-width: 0; }