/* ============================================================
   unify leagues prototype — page chrome + phone app + staff console.
   App look = the shipped unify system: violet #7061f0 on a soft
   violet-white canvas, Mohol for display/numbers, Outfit for UI,
   full-pill buttons, soft violet shadows, no borders on cards.
   Green is used ONLY for money held safely in a team pot.
   ============================================================ */

:root {
  /* page chrome */
  --pg-bg: #edecf1; --pg-panel: #ffffff; --pg-ink: #1b1733; --pg-muted: #514d67; --pg-soft: #6f6b85;
  --pg-line: #e4e3ea; --pg-violet: #6a5aec; --pg-tint: #f1f0f5; --pg-shadow: 0 30px 60px -24px rgba(20, 16, 40, .32);
  /* app */
  --bg: #f6f5fd; --surface: #ffffff; --field: #f3f1fc; --ink: #1b1733; --ink-70: #514d67; --ink-50: #6f6b85; --ink-30: #b3afc6;
  --line: #efedf9; --violet: #7061f0; --violet-600: #5f4fe6; --violet-050: #ece9fd; --violet-100: #ded8fb; --on-violet: #ffffff;
  --green: #18a558; --green-bg: #e8f6ee; --green-ink: #2f7d55;
  --card-sh: 0 1px 2px rgba(27, 23, 51, .04), 0 4px 14px rgba(27, 23, 51, .05); --pop-sh: 0 18px 44px rgba(27, 23, 51, .14), 0 4px 12px rgba(27, 23, 51, .05);
  --btn-sh: none;
  /* liquid glass (the app's web recipe) - floating chrome only, never content */
  --glass: rgba(255, 255, 255, .5); --glass-raised: rgba(255, 255, 255, .9); --glass-rim: rgba(255, 255, 255, .45);
  --glass-hair: rgba(27, 23, 51, .07); --glass-sh: 0 8px 28px rgba(27, 23, 51, .10); --lens: rgba(27, 23, 51, .06);
  --deep: #1b1733; --deep-2: rgba(255, 255, 255, .09); --deep-ink: #ffffff; --deep-soft: #b9b0fb;
  --scrim: rgba(20, 14, 50, .38); --tab-bg: rgba(255, 255, 255, .94);
  --display: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --brand: "Mohol", "Outfit", system-ui, sans-serif; /* the unify wordmark only */
  --ui: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --av0b: #e9e6fd; --av0i: #5343d6; --av1b: #e1ecfa; --av1i: #285a99; --av2b: #dcf1ec; --av2i: #1c6b5e;
  --av3b: #f9ecd9; --av3i: #855414; --av4b: #f9e3e8; --av4i: #963049; --av5b: #e8eaee; --av5i: #454d5a;
  --kit-line: rgba(27, 23, 51, .18);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --pg-bg: #0b0915; --pg-panel: #14111f; --pg-ink: #f1effc; --pg-muted: #c3bee0; --pg-soft: #9e99bd;
    --pg-line: #26213d; --pg-violet: #a193ff; --pg-tint: #251f47; --pg-shadow: 0 30px 60px -24px rgba(0, 0, 0, .7);
    --bg: #0f0d1a; --surface: #1a1729; --field: #231f36; --ink: #f3f1fb; --ink-70: #c7c2de; --ink-50: #9d98b8; --ink-30: #5f5a7a;
    --line: #2a2640; --violet: #8374f7; --violet-600: #b0a5ff; --violet-050: #262046; --violet-100: #3a3170; --on-violet: #ffffff;
    --green: #3fcf84; --green-bg: #12291c; --green-ink: #86e2af;
    --card-sh: none; --pop-sh: 0 18px 44px rgba(0, 0, 0, .55); --btn-sh: none;
    --deep: #221d3f; --deep-2: rgba(255, 255, 255, .08); --deep-ink: #ffffff; --deep-soft: #b9b0fb;
    --scrim: rgba(0, 0, 0, .55); --tab-bg: rgba(30, 27, 46, .94);
    --av0b: #2b2552; --av0i: #c4bcff; --av1b: #1b2a42; --av1i: #9cc2f2; --av2b: #15312c; --av2i: #8fd6c6;
    --av3b: #35281a; --av3i: #eec48a; --av4b: #3a1f28; --av4i: #f2a7b8; --av5b: #262a31; --av5i: #c1c7d1;
    --kit-line: rgba(255, 255, 255, .5);
    --glass: rgba(18, 14, 42, .26); --glass-raised: rgba(28, 24, 46, .9); --glass-rim: transparent;
    --glass-hair: rgba(255, 255, 255, .07); --glass-sh: 0 12px 26px rgba(0, 0, 0, .45); --lens: rgba(255, 255, 255, .10);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --pg-bg: #0b0915; --pg-panel: #14111f; --pg-ink: #f1effc; --pg-muted: #c3bee0; --pg-soft: #9e99bd;
  --pg-line: #26213d; --pg-violet: #a193ff; --pg-tint: #251f47; --pg-shadow: 0 30px 60px -24px rgba(0, 0, 0, .7);
  --bg: #0f0d1a; --surface: #1a1729; --field: #231f36; --ink: #f3f1fb; --ink-70: #c7c2de; --ink-50: #9d98b8; --ink-30: #5f5a7a;
  --line: #2a2640; --violet: #8374f7; --violet-600: #b0a5ff; --violet-050: #262046; --violet-100: #3a3170; --on-violet: #ffffff;
  --green: #3fcf84; --green-bg: #12291c; --green-ink: #86e2af;
  --card-sh: none; --pop-sh: 0 18px 44px rgba(0, 0, 0, .55); --btn-sh: none;
  --deep: #221d3f; --deep-2: rgba(255, 255, 255, .08); --deep-ink: #ffffff; --deep-soft: #b9b0fb;
  --scrim: rgba(0, 0, 0, .55); --tab-bg: rgba(30, 27, 46, .94);
  --av0b: #2b2552; --av0i: #c4bcff; --av1b: #1b2a42; --av1i: #9cc2f2; --av2b: #15312c; --av2i: #8fd6c6;
  --av3b: #35281a; --av3i: #eec48a; --av4b: #3a1f28; --av4i: #f2a7b8; --av5b: #262a31; --av5i: #c1c7d1;
  --kit-line: rgba(255, 255, 255, .5);
    --glass: rgba(18, 14, 42, .26); --glass-raised: rgba(28, 24, 46, .9); --glass-rim: transparent;
    --glass-hair: rgba(255, 255, 255, .07); --glass-sh: 0 12px 26px rgba(0, 0, 0, .45); --lens: rgba(255, 255, 255, .10);
}

* { box-sizing: border-box; }
html, body, #root { height: 100%; }
body { margin: 0; background: var(--pg-bg); color: var(--pg-ink); font-family: var(--ui); font-size: 15px; line-height: 1.45;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
input, textarea, select { font: inherit; color: inherit; }
button:focus-visible, [tabindex]:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--violet); outline-offset: 2px; border-radius: 10px; }
.ic { display: block; flex: 0 0 auto; }
.disp { font-family: var(--display); font-weight: 600; letter-spacing: -.025em; }
.num { font-variant-numeric: tabular-nums; }

/* ─────────────────────────── page layout ─────────────────────────── */
.layout { display: grid; grid-template-columns: 348px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: 100%; }
.guide { background: var(--pg-panel); border-right: 1px solid var(--pg-line); height: 100%; min-height: 0; overflow-y: auto;
  padding: 26px 22px 28px; display: flex; flex-direction: column; gap: 18px; }
.g-brand { display: flex; align-items: baseline; gap: 10px; }
.g-brand .wm { font-family: var(--brand); font-size: 26px; color: var(--pg-violet); letter-spacing: -.02em; }
.g-brand .tg { font-size: 13.5px; font-weight: 600; color: var(--pg-soft); }
.g-intro { color: var(--pg-muted); font-size: 14px; line-height: 1.5; }
.g-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; background: var(--pg-bg); padding: 5px; border-radius: 16px; }
.g-role { display: flex; align-items: center; gap: 6px; padding: 9px 8px; border-radius: 12px; font-weight: 600; font-size: 13px; white-space: nowrap; color: var(--pg-muted); }
.g-role .ic { opacity: .8; }
.g-role.on { background: var(--pg-panel); color: var(--pg-ink); box-shadow: 0 1px 3px rgba(20, 16, 40, .08); }
.g-role.on .ic { color: var(--pg-ink); opacity: 1; }
.g-who { display: flex; gap: 12px; align-items: center; }
.g-who .imlogo { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; }
.g-who b { display: block; font-size: 15px; }
.g-who div span { display: block; color: var(--pg-muted); font-size: 13.5px; line-height: 1.4; }
.g-tag { align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--pg-muted); background: var(--pg-tint); padding: 4px 10px; border-radius: 999px; }
.g-steps { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: st; }
.g-step { counter-increment: st; }
.g-step button { width: 100%; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start;
  padding: 11px 12px; border-radius: 14px; background: var(--pg-bg); transition: background .15s; }
.g-step button:hover { background: var(--pg-tint); }
.g-step .dot { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 600; font-size: 13px; background: var(--pg-panel); color: var(--pg-ink); }
.g-step .dot::before { content: counter(st); }
.g-step.done .dot { background: var(--pg-ink); color: var(--pg-panel); }
.g-step.done .dot::before { content: "✓"; font-family: var(--ui); font-weight: 700; }
.g-step b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.g-step span { display: block; font-size: 13px; color: var(--pg-muted); margin-top: 2px; line-height: 1.4; }
.g-sub { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pg-soft); margin-top: 4px; }
.g-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; font-size: 13px; color: var(--pg-soft); }
.g-reset { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--pg-muted);
  padding: 8px 12px; border-radius: 999px; background: var(--pg-bg); }
.g-reset:hover { color: var(--pg-ink); }

.stage { position: relative; height: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 20px; }
.stage.console-stage { align-items: stretch; justify-content: stretch; padding: 18px; overflow: auto; container-type: inline-size; }

/* phone device */
.devwrap { width: calc(414px * var(--scale, 1)); height: calc(868px * var(--scale, 1)); flex: 0 0 auto; }
.device { width: 414px; height: 868px; transform: scale(var(--scale, 1)); transform-origin: 0 0; background: #0d0c15; border-radius: 60px;
  padding: 12px; box-shadow: var(--pg-shadow), inset 0 0 0 2px #2a2740; }
.screen { position: relative; width: 390px; height: 844px; border-radius: 48px; overflow: hidden; isolation: isolate; }
.island { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 122px; height: 35px; background: #06050b; border-radius: 20px; z-index: 90; }
.sbar { position: absolute; top: 0; left: 0; right: 0; height: 50px; z-index: 80; display: flex; align-items: center; justify-content: space-between;
  padding: 16px 30px 0 34px; color: var(--ink); background: var(--bg); pointer-events: none; }
.sbar .t { font-weight: 600; font-size: 16px; }
.sbar .sys { display: flex; gap: 6px; align-items: center; }

/* mobile top bar (replaces the guide on small screens) */
.mbar { display: none; }

/* ─────────────────────────── app ─────────────────────────── */
.app { --sb: 50px; position: relative; width: 100%; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--ui); overflow: hidden; }
.view { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; padding-top: 50px; scrollbar-width: none; overscroll-behavior: contain; }
.view::-webkit-scrollbar { display: none; }
.view.enter { animation: slideIn .28s cubic-bezier(.2, .8, .2, 1); }
.view.enter-back { animation: slideBack .24s cubic-bezier(.2, .8, .2, 1); }
.view.fade { animation: fadeIn .2s ease; }
@keyframes slideIn { from { transform: translateX(26%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slideBack { from { transform: translateX(-14%); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.pad { padding: 0 18px; }
.bottom-space { height: 120px; }
.bottom-space.sm { height: 40px; }
.bottom-space.dock { height: 120px; }

/* campus header */
.uhead { display: flex; align-items: center; justify-content: space-between; padding: 6px 18px 8px; }
.uni { display: flex; align-items: center; gap: 9px; }
.uni .u { width: 34px; height: 34px; border-radius: 10px; background: var(--surface); box-shadow: var(--card-sh); display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 600; font-size: 13px; color: #8a1538; }
.uni .wm { font-family: var(--brand); font-size: 27px; color: var(--violet); letter-spacing: -.02em; }
.tray { display: flex; align-items: center; gap: 4px; background: var(--surface); border-radius: 999px; padding: 4px 4px 4px 10px; box-shadow: var(--card-sh); }
.tray .ib { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; position: relative; }
.tray .ib .d, .circ .d { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 2px var(--surface); }
.av.av-me { --s: 36px; }
.utabs { display: flex; border-bottom: 1px solid var(--line); margin: 0 0 14px; }
.utabs button { flex: 1; text-align: center; font-size: 16px; font-weight: 600; color: var(--ink-50); padding: 10px 0 11px; position: relative; }
.utabs button.on { color: var(--ink); }
.utabs button.on::after { content: ""; position: absolute; left: 24%; right: 24%; bottom: -1px; height: 3px; border-radius: 3px; background: var(--violet); }

/* sub-screen bar */
.subbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 16px 14px; background: linear-gradient(var(--bg) 20%, transparent); pointer-events: none; }
.subbar > * { pointer-events: auto; }
.subbar .mid { flex: 1; min-width: 0; }
.subbar .mid .t { font-weight: 600; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.subbar .mid .s { font-size: 12.5px; color: var(--ink-50); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acts { display: flex; gap: 8px; }
.circ { width: 44px; height: 44px; border-radius: 50%; background: var(--surface); display: flex; align-items: center; justify-content: center; box-shadow: var(--card-sh); color: var(--ink); flex: 0 0 auto; position: relative; }
.circ.sm { width: 36px; height: 36px; }
.badge-n { position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px; border-radius: 10px; background: var(--violet); color: var(--on-violet); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 5px; box-shadow: 0 0 0 2px var(--bg); }

.ptitle { font-family: var(--display); font-weight: 600; font-size: 30px; letter-spacing: -.02em; line-height: 1.02; }
.psub { font-size: 13.5px; color: var(--ink-50); margin-top: 5px; }
.slabel { display: flex; align-items: baseline; justify-content: space-between; margin: 22px 2px 10px; gap: 10px; }
.slabel .k { font-size: 13.5px; font-weight: 600; color: var(--ink-50); }
.slabel .k b { color: var(--ink); font-weight: 700; }
.slabel .a { font-size: 13.5px; font-weight: 600; color: var(--violet-600); }
.row { display: flex; align-items: center; }
.between { justify-content: space-between; }
.gap6 { gap: 6px; } .gap8 { gap: 8px; } .gap10 { gap: 10px; } .gap12 { gap: 12px; }
.muted { color: var(--ink-50); }
.grow { flex: 1; min-width: 0; }

.card { background: var(--surface); border-radius: 16px; box-shadow: var(--card-sh); }
.card.pad14 { padding: 14px; }
.card + .card { margin-top: 10px; }
.tapcard { width: 100%; display: block; text-align: left; }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--ink-70); background: var(--field); padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.chip.soft { color: var(--ink-70); background: var(--field); }
.chip.ink { color: var(--surface); background: var(--ink); }
.chip.green { color: var(--green-ink); background: var(--green-bg); }
.chip.warn { color: var(--ink); background: var(--field); }
.seasonchip { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--ink-70); background: var(--surface); box-shadow: var(--card-sh); padding: 5px 11px; border-radius: 999px; }
.seasonchip i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-50); }
.orgline { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--ink-50); }
.orgline b { color: var(--ink); font-weight: 600; }
.orgline .ic { color: var(--violet); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 22px; border-radius: 999px; font-weight: 600; font-size: 16.5px; width: 100%; }
.btn.primary { background: var(--violet); color: var(--on-violet); }
.btn.ghost { background: var(--surface); color: var(--ink); box-shadow: var(--card-sh); }
.btn.tint { background: var(--violet-050); color: var(--violet-600); }
.btn.black { background: #0c0b12; color: #fff; }
.btn.sm { height: 44px; font-size: 15px; }
.btn[disabled] { opacity: .45; cursor: default; }
.mini { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  background: var(--violet); color: var(--on-violet); white-space: nowrap; flex: 0 0 auto; }
.mini.tint { background: var(--violet-050); color: var(--violet-600); }
.mini.soft { background: var(--field); color: var(--ink-70); }
.mini.ink { background: var(--ink); color: var(--surface); }

/* availability pair */
.rsvp { display: flex; gap: 6px; }
.rsvp button { height: 36px; padding: 0 15px; border-radius: 999px; font-weight: 700; font-size: 14px; background: var(--field); color: var(--ink-70); display: inline-flex; align-items: center; gap: 6px; }
.rsvp button.in.on { background: var(--violet); color: var(--on-violet); }
.rsvp button.cant.on { background: var(--ink); color: var(--surface); }
.rsvp.dark button { background: var(--deep-2); color: var(--deep-ink); }
.rsvp.dark button.on { background: #fff; color: #1b1733; }
.rsvp.big button { height: 48px; flex: 1; justify-content: center; font-size: 16px; }

/* crest */
.crest { display: inline-flex; flex: 0 0 auto; filter: drop-shadow(0 3px 6px rgba(20, 16, 40, .16)); }
.crest svg { display: block; }

/* avatars */
.av { --s: 38px; width: var(--s); height: var(--s); border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; font-family: var(--ui); font-size: calc(var(--s) * .37); font-weight: 600; letter-spacing: .02em; line-height: 1; background: var(--av-b, var(--av0b)); color: var(--av-i, var(--av0i)); user-select: none; }
.av.s24 { --s: 24px; } .av.s28 { --s: 28px; } .av.s32 { --s: 32px; } .av.s44 { --s: 44px; }
.av.t0 { --av-b: var(--av0b); --av-i: var(--av0i); } .av.t1 { --av-b: var(--av1b); --av-i: var(--av1i); } .av.t2 { --av-b: var(--av2b); --av-i: var(--av2i); }
.av.t3 { --av-b: var(--av3b); --av-i: var(--av3i); } .av.t4 { --av-b: var(--av4b); --av-i: var(--av4i); } .av.t5 { --av-b: var(--av5b); --av-i: var(--av5i); }
.astack { display: flex; }
.astack .av { border: 2px solid var(--surface); }
.astack .av + .av { margin-left: -8px; }
.astack .more { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--surface); background: var(--field); margin-left: -8px; font-size: 10px; font-weight: 700; color: var(--ink-70); display: flex; align-items: center; justify-content: center; }
.imlogo { width: 38px; height: 38px; border-radius: 12px; background: var(--ink); color: var(--surface); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }

/* match card: the next game, a white content card like every other */
.mday { position: relative; background: var(--surface); color: var(--ink); border-radius: 22px; padding: 16px 16px 14px; box-shadow: var(--card-sh); width: 100%; text-align: left; display: block; }
.mday .top { display: flex; align-items: center; justify-content: space-between; }
.mday .when { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; background: var(--field); color: var(--ink); padding: 5px 11px; border-radius: 999px; }
.mday .when i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.mday .lg { font-size: 12.5px; font-weight: 600; color: var(--ink-50); }
.mday .teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: 14px 0 2px; }
.mday .tm { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.mday .tm .nm { font-size: 14px; font-weight: 600; line-height: 1.2; }
.mday .tm .sb { font-size: 11.5px; color: var(--ink-50); font-weight: 600; }
.mday .ko { font-family: var(--display); font-weight: 600; font-size: 32px; letter-spacing: -.03em; text-align: center; line-height: 1; }
.mday .ko small { display: block; font-family: var(--ui); font-size: 11.5px; font-weight: 600; color: var(--ink-50); letter-spacing: 0; margin-top: 5px; }
.mday .where { display: flex; align-items: center; gap: 6px; justify-content: center; font-size: 12.5px; color: var(--ink-50); margin-top: 8px; }
.mday .bar { display: flex; align-items: center; gap: 10px; margin-top: 13px; background: var(--field); border-radius: 16px; padding: 10px 10px 10px 13px; }
.mday .bar .q { font-size: 14px; font-weight: 600; flex: 1; min-width: 0; }
.mday .bar .q small { display: block; font-size: 12px; color: var(--ink-50); font-weight: 500; margin-top: 1px; }
.mday .bar .rsvp button { background: var(--surface); }
.mday .bar .rsvp button.in.on { background: var(--violet); }
.mday .bar .rsvp button.cant.on { background: var(--ink); }
.mday .clash { margin-top: 10px; display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--ink-70); background: var(--field); border-radius: 12px; padding: 8px 10px; }

/* team row card */
.teamrow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.teamrow .nm { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.teamrow .sb { font-size: 12.5px; color: var(--ink-50); margin-top: 1px; }
.teamrow .pts { text-align: right; }
.teamrow .pts b { font-family: var(--display); font-weight: 600; font-size: 20px; display: block; line-height: 1; }
.teamrow .pts span { font-size: 11.5px; color: var(--ink-50); font-weight: 600; }

/* announcement card */
.ann { display: flex; gap: 12px; align-items: flex-start; padding: 14px; }
.ann .ico { width: 36px; height: 36px; border-radius: 12px; background: var(--field); color: var(--ink-70); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ann .t { font-size: 14.5px; line-height: 1.4; }
.ann .m { font-size: 12px; color: var(--ink-50); font-weight: 600; margin-top: 6px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ann .m .seen { color: var(--violet-600); }

/* social card */
.social { padding: 14px; }
.social .h { display: flex; gap: 12px; align-items: center; }
.social .ico { width: 42px; height: 42px; border-radius: 13px; background: var(--field); color: var(--ink-70); display: flex; align-items: center; justify-content: center; }
.social .t { font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; }
.social .s { font-size: 12.5px; color: var(--ink-50); margin-top: 1px; }
.social .f { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; gap: 10px; }

/* pot mini */
.potmini { padding: 14px; }
.potmini .t { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.potmini .t b { font-size: 14.5px; }
.prog { height: 8px; border-radius: 8px; background: var(--field); overflow: hidden; margin-top: 10px; }
.prog i { display: block; height: 100%; border-radius: 8px; background: var(--violet); transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.prog.green i { background: var(--green); }
.potmini .s { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-50); margin-top: 7px; }
.potmini .s b { color: var(--ink); font-weight: 600; }

/* list rows */
.lrow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; width: 100%; text-align: left; }
.lrow + .lrow { border-top: 1px solid var(--line); }
.lrow .t { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.lrow .s { font-size: 12.5px; color: var(--ink-50); margin-top: 1px; }
.lrow .r { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--ink-30); flex: 0 0 auto; }
.lrow .tint-ico { width: 38px; height: 38px; border-radius: 12px; background: var(--field); color: var(--ink-70); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }

/* segmented */
.seg { display: flex; background: var(--surface); border-radius: 999px; padding: 4px; box-shadow: var(--card-sh); }
.seg button { flex: 1; text-align: center; font-size: 14px; font-weight: 600; color: var(--ink-50); padding: 8px 0; border-radius: 999px; }
.seg button.on { background: var(--ink); color: var(--surface); }

/* team hero */
.thero { display: flex; align-items: center; gap: 14px; padding: 2px 18px 0; }
.thero .nm { font-family: var(--display); font-weight: 600; font-size: 25px; letter-spacing: -.02em; line-height: 1.05; }
.thero .sb { font-size: 13px; color: var(--ink-50); margin-top: 4px; }
.statrow { display: grid; grid-template-columns: repeat(4, 1fr); padding: 12px 4px; margin-top: 14px; }
.statrow .c { text-align: center; }
.statrow .c + .c { border-left: 1px solid var(--line); }
.statrow .v { font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: -.015em; }
.statrow .k { font-size: 11.5px; color: var(--ink-50); font-weight: 600; margin-top: 2px; }

/* fixtures */
.fxrow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; width: 100%; text-align: left; }
.fxrow + .fxrow { border-top: 1px solid var(--line); }
.fxrow .date { width: 44px; text-align: center; flex: 0 0 auto; }
.fxrow .date b { display: block; font-family: var(--display); font-weight: 600; font-size: 19px; line-height: 1; }
.fxrow .date span { display: block; font-size: 11px; font-weight: 700; color: var(--ink-50); margin-top: 3px; text-transform: lowercase; }
.fxrow .t { font-size: 14.5px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.fxrow .s { font-size: 12.5px; color: var(--ink-50); margin-top: 2px; }
.fxrow .res { margin-left: auto; font-family: var(--display); font-weight: 600; font-size: 17px; flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.wdl { width: 22px; height: 22px; border-radius: 50%; font-family: var(--ui); font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.wdl.w { background: var(--violet); color: var(--on-violet); } .wdl.d { background: var(--field); color: var(--ink); } .wdl.l { background: var(--field); color: var(--ink-50); }
.mystate { margin-left: auto; flex: 0 0 auto; }
.clashline { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-70); margin-top: 4px; }

/* fixture detail */
.vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 6px; padding: 4px 18px 0; }
.vs .tm { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.vs .tm .nm { font-size: 14.5px; font-weight: 600; line-height: 1.2; }
.vs .tm .sb { font-size: 12px; color: var(--ink-50); font-weight: 600; }
.vs .ko { text-align: center; padding-top: 12px; }
.vs .ko .t { font-family: var(--display); font-weight: 600; font-size: 38px; letter-spacing: -.03em; line-height: 1; }
.vs .ko .s { font-size: 12px; font-weight: 700; color: var(--violet-600); margin-top: 6px; }
.infocard .lrow .tint-ico { width: 36px; height: 36px; }
.clashcard { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: var(--field); border-radius: 16px; color: var(--ink); margin-top: 10px; font-size: 13.5px; line-height: 1.45; }
.clashcard .ic { color: var(--violet-600); margin-top: 1px; }
.meter { display: flex; gap: 4px; margin-top: 10px; }
.meter i { flex: 1; height: 6px; border-radius: 6px; background: var(--field); }
.meter i.in { background: var(--ink); }
.who { padding: 14px; }
.who .top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.who .big { font-family: var(--display); font-weight: 600; font-size: 26px; letter-spacing: -.02em; }
.who .big small { font-family: var(--ui); font-size: 13px; font-weight: 600; color: var(--ink-50); letter-spacing: 0; margin-left: 4px; }
.who .ok { font-size: 12.5px; font-weight: 700; color: var(--ink-70); }
.who .grp { margin-top: 14px; }
.who .grp .gl { font-size: 12px; font-weight: 700; color: var(--ink-50); margin-bottom: 8px; }
.who .faces { display: flex; flex-wrap: wrap; gap: 10px 6px; }
.who .face { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 56px; }
.who .face span { font-size: 11px; font-weight: 600; color: var(--ink-70); max-width: 58px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who .face.q .av { opacity: .45; filter: grayscale(1); }
.reasons { display: flex; flex-direction: column; }
.reasons .rr { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.reasons .rr + .rr { border-top: 1px solid var(--line); }
.reasons .rr .n { font-weight: 600; font-size: 14px; }
.reasons .rr .why { font-size: 12.5px; color: var(--ink-50); }
.nudge { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); margin-top: 14px; padding-top: 12px; font-size: 13.5px; color: var(--ink-70); }

/* squad */
.prow { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.prow + .prow { border-top: 1px solid var(--line); }
.prow .nm { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.prow .sb { font-size: 12.5px; color: var(--ink-50); margin-top: 1px; }
.prow .r { margin-left: auto; text-align: right; flex: 0 0 auto; }
.prow .r b { font-family: var(--display); font-weight: 600; font-size: 15px; display: block; }
.prow .r span { font-size: 11px; color: var(--ink-50); font-weight: 600; }
.role { display: inline-flex; align-items: center; justify-content: center; height: 18px; padding: 0 6px; border-radius: 999px; font-size: 10.5px; font-weight: 800; background: var(--ink); color: var(--surface); }
.role.key { background: var(--green-bg); color: var(--green-ink); gap: 3px; }

/* pot */
.potcard { padding: 16px; }
.pothead { display: flex; align-items: center; gap: 12px; }
.potbal { font-family: var(--display); font-weight: 600; font-size: 38px; letter-spacing: -.03em; line-height: 1; margin-top: 12px; }
.potbal small { font-family: var(--ui); font-size: 13.5px; font-weight: 600; color: var(--ink-50); letter-spacing: 0; margin-left: 6px; }
.safe { display: flex; gap: 10px; align-items: flex-start; background: var(--green-bg); color: var(--green-ink); border-radius: 14px; padding: 11px 13px; font-size: 13px; line-height: 1.45; margin-top: 14px; }
.safe b { color: var(--green-ink); }
.safe .ic { color: var(--green); margin-top: 1px; }
.entry { padding: 16px; }
.entry .t { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.entry .t b { font-size: 15.5px; display: block; }
.entry .t span { font-size: 12.5px; color: var(--ink-50); }
.entry .amt { font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: -.02em; text-align: right; }
.entry .amt small { display: block; font-family: var(--ui); font-size: 11.5px; color: var(--ink-50); font-weight: 600; letter-spacing: 0; }
.paidfaces { display: flex; gap: 5px; margin-top: 12px; flex-wrap: wrap; }
.paidfaces .pf { position: relative; }
.paidfaces .pf .av { --s: 29px; }
.paidfaces .pf.no .av { opacity: .4; filter: grayscale(1); }
.paidfaces .pf .tk { position: absolute; right: -3px; bottom: -3px; width: 15px; height: 15px; border-radius: 50%; background: var(--violet); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--surface); }
.entry .rule { font-size: 12.5px; color: var(--ink-50); margin-top: 12px; line-height: 1.45; }
.req { padding: 14px; }
.req .t { font-size: 15px; font-weight: 600; }
.req .s { font-size: 12.5px; color: var(--ink-50); margin-top: 2px; }
.req .amt { font-family: var(--display); font-weight: 600; font-size: 20px; }
.keys { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.keypill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; background: var(--field); font-size: 12.5px; font-weight: 600; color: var(--ink-70); }
.keypill .av { --s: 24px; }
.keypill.ok { background: var(--green-bg); color: var(--green-ink); }
.ledger .lrow .amt { margin-left: auto; font-family: var(--display); font-weight: 600; font-size: 16px; flex: 0 0 auto; }
.ledger .lrow .amt.plus { color: var(--green-ink); }
.ledger .lrow .ico2 { width: 34px; height: 34px; border-radius: 11px; background: var(--field); color: var(--ink-70); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.nextphase { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--ink-70); background: var(--field); padding: 3px 9px; border-radius: 999px; }

/* chat */
.chead { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 11px; padding: 4px 14px 10px; background: var(--bg); }
.chead .t { font-size: 16px; font-weight: 600; }
.chead .s { font-size: 12px; color: var(--ink-50); }
.pinned { position: sticky; top: 58px; z-index: 29; margin: 0 12px; padding: 11px 13px; display: flex; gap: 10px; align-items: flex-start; width: calc(100% - 24px); text-align: left; }
.pinned .ico { color: var(--violet-600); margin-top: 2px; }
.pinned .l { font-size: 11.5px; font-weight: 700; color: var(--violet-600); }
.pinned .x { font-size: 14px; line-height: 1.4; margin-top: 1px; }
.pinned .m { font-size: 12px; color: var(--ink-50); font-weight: 600; margin-top: 5px; }
.msgs { padding: 14px 12px 0; display: flex; flex-direction: column; gap: 6px; }
.daysep { align-self: center; font-size: 11.5px; font-weight: 700; color: var(--ink-50); margin: 8px 0 4px; }
.mrow { display: flex; gap: 8px; align-items: flex-end; max-width: 86%; }
.mrow.out { align-self: flex-end; flex-direction: row-reverse; }
.mrow .av { --s: 28px; }
.bub { padding: 9px 13px; border-radius: 20px; font-size: 14.5px; line-height: 1.4; background: var(--surface); box-shadow: var(--card-sh); border-bottom-left-radius: 7px; }
.bub .who2 { font-size: 11.5px; font-weight: 700; color: var(--violet-600); margin-bottom: 1px; }
.mrow.out .bub { background: var(--violet); color: var(--on-violet); border-bottom-left-radius: 20px; border-bottom-right-radius: 7px; box-shadow: none; }
.annbub { align-self: stretch; max-width: none; background: var(--surface); box-shadow: var(--card-sh); border-radius: 18px; padding: 12px 14px; }
.annbub .l { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--violet-600); }
.annbub .x { font-size: 14.5px; margin-top: 4px; line-height: 1.45; }
.annbub .m { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--ink-50); font-weight: 600; }
.annbub .m button { color: var(--violet-600); font-weight: 700; }
.sysmsg { align-self: center; font-size: 12px; color: var(--ink-50); font-weight: 600; background: var(--field); padding: 6px 11px; border-radius: 999px; margin: 4px 0; text-align: center; max-width: 92%; }
.sysmsg.v { background: var(--field); color: var(--ink); }
.chsocial { align-self: stretch; }
.composer { position: absolute; left: 0; right: 0; bottom: 0; z-index: 40; padding: 14px 12px 28px; background: linear-gradient(transparent, var(--bg) 70%); display: flex; gap: 8px; align-items: center; }
.composer .fld { flex: 1; min-width: 0; height: 44px; border-radius: 999px; background: var(--surface); box-shadow: var(--card-sh); display: flex; align-items: center; padding: 0 6px 0 16px; gap: 6px; }
.composer input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 15px; }
.composer input::placeholder { color: var(--ink-50); }
.composer .send { width: 34px; height: 34px; border-radius: 50%; background: var(--violet); color: var(--on-violet); display: flex; align-items: center; justify-content: center; }
.composer .circ { width: 44px; height: 44px; }
.composer .circ.on { background: var(--violet); color: var(--on-violet); }
.announce-hint { position: absolute; left: 12px; right: 12px; bottom: 82px; z-index: 41; font-size: 12.5px; font-weight: 600; color: var(--ink-70); background: var(--field); border-radius: 12px; padding: 8px 12px; display: flex; gap: 8px; align-items: center; }
.propose { align-self: flex-start; width: 80%; background: var(--surface); border-radius: 20px; border-bottom-left-radius: 7px; box-shadow: var(--card-sh); padding: 12px 13px; }
.propose .l { font-size: 11.5px; font-weight: 700; color: var(--violet-600); }
.propose .w { font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: -.015em; margin-top: 3px; }
.propose .was { font-size: 12px; color: var(--ink-50); margin-top: 1px; }
.propose .was s { color: var(--ink-30); }
.propose .a { display: flex; gap: 8px; margin-top: 10px; }
.propose .a .mini { flex: 1; }
.pinfx { margin: 0 12px; padding: 11px 13px; display: flex; gap: 10px; align-items: center; }
.pinfx .l { font-size: 11.5px; font-weight: 700; color: var(--violet-600); }
.pinfx .x { font-size: 14.5px; font-weight: 600; margin-top: 1px; }
.pinfx .m { font-size: 12px; color: var(--ink-50); }


/* captain's 5 steps (IM's own entry process) */
.setup { padding: 14px; }
.setup .stepper { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 12px; position: relative; }
.setup .stepper::before { content: ""; position: absolute; left: 10%; right: 10%; top: 14px; height: 2px; background: var(--line); }
.stp { display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; z-index: 1; }
.stp .n { width: 28px; height: 28px; border-radius: 50%; background: var(--field); color: var(--ink-50); display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 600; font-size: 13px; box-shadow: 0 0 0 3px var(--surface); }
.stp.ok .n { background: var(--ink); color: var(--surface); }
.stp .l { font-size: 11px; font-weight: 600; color: var(--ink-70); text-align: center; line-height: 1.2; }

/* staff ↔ captain direct line */
.imlogo.s28 { width: 28px; height: 28px; border-radius: 9px; }
.askcard { align-self: flex-start; width: 84%; margin-left: 36px; background: var(--surface); border-radius: 18px; box-shadow: var(--card-sh); padding: 12px 13px; }
.askcard .l { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--violet-600); }
.askcard .q { font-size: 15px; font-weight: 600; margin-top: 3px; }
.askcard .a { display: flex; gap: 8px; margin-top: 10px; }
.askcard .a .mini { flex: 1; height: 38px; }
.askcard .s { font-size: 11.5px; color: var(--ink-50); margin-top: 8px; }
.askcard.done { background: var(--field); box-shadow: none; }


/* referee score entry (phone) */
.scoreentry { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 6px; }
.scoreentry .side { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.scoreentry .nm { font-size: 13px; font-weight: 600; line-height: 1.2; }
.scoreentry .stepper { display: flex; align-items: center; gap: 6px; }
.scoreentry .stepper .b { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; background: var(--field); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; color: var(--ink); }
.scoreentry .stepper .v { font-family: var(--display); font-weight: 600; font-size: 34px; letter-spacing: -.03em; min-width: 30px; text-align: center; line-height: 1; }
.scoreentry .dash { font-family: var(--display); font-weight: 600; font-size: 26px; color: var(--ink-30); padding-bottom: 6px; }

/* messages hub */
.mtitle { font-family: var(--display); font-weight: 600; font-size: 30px; letter-spacing: -.02em; }
.search { display: flex; align-items: center; gap: 10px; background: var(--surface); border-radius: 999px; min-height: 46px; padding: 0 18px; box-shadow: var(--card-sh); color: var(--ink-50); font-size: 15px; }
.spaces { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dbox { background: var(--surface); border-radius: 18px; box-shadow: var(--card-sh); padding: 14px; text-align: left; display: flex; flex-direction: column; gap: 10px; min-height: 104px; position: relative; }
.dbox .ico { width: 36px; height: 36px; border-radius: 12px; background: var(--field); color: var(--ink-70); display: flex; align-items: center; justify-content: center; }
.dbox .t { font-size: 15px; font-weight: 600; }
.dbox .s { font-size: 12px; color: var(--ink-50); }
.dbox.wide { grid-column: 1 / -1; flex-direction: row; align-items: center; min-height: 0; }
.dbox .un { position: absolute; top: 12px; right: 12px; min-width: 20px; height: 20px; border-radius: 10px; background: var(--violet); color: var(--on-violet); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 6px; }
.crow2 { display: flex; align-items: center; gap: 12px; padding: 11px 14px; width: 100%; text-align: left; }
.crow2 + .crow2 { border-top: 1px solid var(--line); }
.crow2 .t { font-size: 15px; font-weight: 600; }
.crow2 .pv { font-size: 13px; color: var(--ink-50); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crow2 .rt { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: 0 0 auto; }
.crow2 .tm { font-size: 12px; color: var(--ink-50); font-weight: 600; }
.crow2 .un { min-width: 20px; height: 20px; border-radius: 10px; background: var(--violet); color: var(--on-violet); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 6px; }
.duo { position: relative; width: 42px; height: 44px; flex: 0 0 auto; }
.duo .crest { position: absolute; }
.duo .crest:first-child { left: 0; top: 0; }
.duo .crest:last-child { right: 0; bottom: 0; }

/* league table */
.ltable { overflow: hidden; }
.lt-h, .lt-r { display: grid; grid-template-columns: 22px minmax(0, 1fr) 24px 50px 32px 34px; align-items: center; column-gap: 4px; padding: 0 12px; }
.lt-h { font-size: 11px; font-weight: 700; color: var(--ink-50); letter-spacing: .04em; padding-top: 10px; padding-bottom: 8px; }
.lt-h span, .lt-r span { text-align: center; }
.lt-h span:nth-child(2) { text-align: left; }
.lt-r { height: 44px; font-size: 13.5px; color: var(--ink-70); font-variant-numeric: tabular-nums; }
.lt-r + .lt-r { border-top: 1px solid var(--line); }
.lt-r .p { font-family: var(--display); font-weight: 600; color: var(--ink); }
.lt-r .tn { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-align: left; }
.lt-r .tn em { font-style: normal; overflow: hidden; text-overflow: ellipsis; }
.lt-r .pt { font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--ink); }
.lt-r.me { background: var(--field); }
.lt-r.cut { border-top: 1.5px dashed var(--line) !important; }
.lt-key { font-size: 11.5px; color: var(--ink-50); padding: 10px 14px; }

/* sheet */
.scrim { position: absolute; inset: 0; background: var(--scrim); z-index: 100; }
.scrim.anim { animation: fadeIn .2s ease; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 101; background: var(--glass-raised); -webkit-backdrop-filter: blur(20px) saturate(200%); backdrop-filter: blur(20px) saturate(200%); border-radius: 28px 28px 0 0; padding: 8px 20px 30px; box-shadow: inset 0 1px 0 var(--glass-rim), 0 -12px 40px rgba(20, 16, 40, .14); max-height: 90%; overflow-y: auto; scrollbar-width: none; }
.sheet.anim { animation: sheetUp .3s cubic-bezier(.2, .8, .2, 1); }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
.grabber { width: 40px; height: 5px; border-radius: 99px; background: var(--ink-30); margin: 4px auto 14px; }
.shh { display: flex; align-items: center; gap: 12px; }
.shh .t { font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: -.015em; line-height: 1.1; }
.shh .s { font-size: 13px; color: var(--ink-50); margin-top: 3px; }
.flabel { font-size: 12.5px; font-weight: 700; color: var(--ink-50); margin: 16px 2px 8px; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { font-size: 14px; font-weight: 600; padding: 9px 14px; border-radius: 999px; background: var(--field); color: var(--ink-70); }
.opt.on { background: var(--ink); color: var(--surface); }
.field { width: 100%; background: var(--field); border: 0; border-radius: 15px; padding: 13px 15px; font-size: 15px; color: var(--ink); outline: 0; }
.field::placeholder { color: var(--ink-50); }
textarea.field { min-height: 74px; resize: none; line-height: 1.45; }
.fields2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.trust { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--ink-70); line-height: 1.45; background: var(--field); border-radius: 15px; padding: 11px 13px; margin-top: 16px; }
.trust .ic { color: var(--violet-600); margin-top: 1px; }
.sheet .btn { margin-top: 16px; }
.sheet .btn.ghost { background: var(--field); box-shadow: none; }
.calrow { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.calrow + .calrow { border-top: 1px solid var(--line); }
.calrow .lg { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 600; font-size: 14px; color: #fff; flex: 0 0 auto; }
.calrow .t { font-size: 15px; font-weight: 600; }
.calrow .s { font-size: 12.5px; color: var(--ink-50); }
.toggle { width: 48px; height: 29px; border-radius: 15px; background: var(--ink-30); position: relative; flex: 0 0 auto; margin-left: auto; transition: background .2s; }
.toggle::after { content: ""; position: absolute; left: 3px; top: 3px; width: 23px; height: 23px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(20, 16, 40, .2); transition: transform .2s; }
.toggle.on { background: var(--violet); }
.toggle.on::after { transform: translateX(19px); }
.paysum { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; }
.paysum + .paysum { border-top: 1px solid var(--line); }
.paysum b { font-family: var(--display); font-weight: 600; font-size: 20px; }
.done-mark { width: 64px; height: 64px; border-radius: 50%; background: var(--green-bg); color: var(--green); display: flex; align-items: center; justify-content: center; margin: 10px auto 12px; animation: pop .35s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes pop { from { transform: scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }
.center { text-align: center; }
.invoice { background: var(--field); border-radius: 16px; padding: 14px; margin-top: 14px; font-size: 13px; color: var(--ink-70); }
.invoice .ih { display: flex; justify-content: space-between; align-items: baseline; }
.invoice .ih b { font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--ink); }
.invoice .ir { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--line); gap: 10px; }
.invoice .ir:first-of-type { border-top: 0; }
.invoice .ir span:last-child { color: var(--ink); font-weight: 600; text-align: right; }
.spin { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* tab bar (iOS 26-style floating bar) */
.tabbar { position: absolute; left: 22px; right: 22px; bottom: 21px; height: 62px; border-radius: 31px; z-index: 60; display: flex; align-items: center; padding: 0 5px;
  background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(200%); backdrop-filter: blur(20px) saturate(200%);
  box-shadow: inset 0 0 0 1px var(--glass-rim), 0 0 0 .5px var(--glass-hair), var(--glass-sh); }
.tabbar button { flex: 1; height: 52px; display: flex; align-items: center; justify-content: center; color: var(--violet); border-radius: 26px; position: relative; transition: background .2s ease; }
.tabbar button .ic { opacity: .72; }
.tabbar button.on { background: var(--lens); }
.tabbar button.on .ic { opacity: 1; }
.tabbar button .disc { width: 38px; height: 38px; border-radius: 50%; background: var(--violet-050); display: grid; place-items: center; }
.tabbar button .disc .ic { opacity: 1; }
.tabbar .udot { position: absolute; top: 11px; right: calc(50% - 15px); width: 8px; height: 8px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 2px var(--surface); }

/* toast + banner */
.toast { position: absolute; left: 50%; bottom: 100px; transform: translateX(-50%); z-index: 120; color: var(--ink); padding: 11px 17px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; white-space: nowrap; max-width: 92%; overflow: hidden; text-overflow: ellipsis;
  background: var(--glass-raised); -webkit-backdrop-filter: blur(20px) saturate(200%); backdrop-filter: blur(20px) saturate(200%);
  box-shadow: inset 0 0 0 1px var(--glass-rim), 0 0 0 .5px var(--glass-hair), var(--glass-sh); }
.toast.anim { animation: toastIn .25s ease; }
.toast.hi { bottom: 92px; }
@keyframes toastIn { from { transform: translate(-50%, 10px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.banner { position: absolute; left: 10px; right: 10px; top: 52px; z-index: 130; border-radius: 24px; padding: 12px 14px 12px; color: #1b1733;
  background: rgba(245, 244, 250, .92); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 16px 40px rgba(20, 14, 50, .28); }
.banner.anim { animation: bannerIn .45s cubic-bezier(.2, 1.1, .3, 1); }
@keyframes bannerIn { from { transform: translateY(-140%); } to { transform: none; } }
.banner .h { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #6f6b85; font-weight: 600; }
.banner .h .app-ic { width: 20px; height: 20px; border-radius: 6px; background: #7061f0; color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 600; font-size: 12px; }
.banner .h .when { margin-left: auto; }
.banner .b { margin-top: 6px; font-size: 15px; line-height: 1.35; }
.banner .b b { display: block; font-weight: 600; }
.banner .ba { display: flex; gap: 8px; margin-top: 10px; }
.banner .ba button { flex: 1; display: flex; align-items: center; justify-content: center; height: 40px; border-radius: 14px; background: rgba(27, 23, 51, .08); font-weight: 700; font-size: 15px; color: #1b1733; }
.banner .ba button.pri { background: #7061f0; color: #fff; }
.banner .hint { font-size: 11.5px; color: #6f6b85; margin-top: 8px; text-align: center; }

/* placeholder screens */
.placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; height: 70%; padding: 0 40px; color: var(--ink-50); }
.placeholder .ico { width: 56px; height: 56px; border-radius: 18px; background: var(--field); color: var(--ink-70); display: flex; align-items: center; justify-content: center; }

/* sport grid */
.sgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sport { background: var(--surface); border-radius: 18px; padding: 12px; box-shadow: var(--card-sh); text-align: left; }
.sport .i { width: 36px; height: 36px; border-radius: 11px; background: var(--field); color: var(--ink-70); display: flex; align-items: center; justify-content: center; }
.sport .n { font-size: 13.5px; font-weight: 600; margin-top: 9px; }
.sport .d { font-size: 11.5px; color: var(--ink-50); }

/* ─────────────────────────── staff console ─────────────────────────── */
.console { width: 100%; min-height: 100%; background: var(--bg); color: var(--ink); border-radius: 18px; box-shadow: var(--pg-shadow); overflow: hidden; display: grid; grid-template-columns: 224px minmax(0, 1fr); position: relative; }
.c-side { background: var(--surface); border-right: 1px solid var(--line); padding: 20px 14px; display: flex; flex-direction: column; gap: 4px; }
.c-org { display: flex; align-items: center; gap: 10px; padding: 0 8px 16px; }
.c-org b { display: block; font-size: 14.5px; }
.c-org span { display: block; font-size: 12px; color: var(--ink-50); }
.c-nav { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; font-weight: 600; font-size: 14.5px; color: var(--ink-70); width: 100%; }
.c-nav:hover { background: var(--field); }
.c-nav.on { background: var(--field); color: var(--ink); }
.c-nav .cnt { margin-left: auto; font-size: 11.5px; font-weight: 700; background: var(--ink); color: var(--surface); border-radius: 999px; padding: 1px 7px; }
.c-side .foot { margin-top: auto; font-size: 12px; color: var(--ink-50); padding: 12px 8px 0; line-height: 1.45; }
.c-main { padding: 24px 28px 40px; min-width: 0; overflow-x: hidden; }
.c-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.c-top h1 { font-family: var(--display); font-weight: 700; font-size: 30px; letter-spacing: -.02em; margin: 0; line-height: 1.05; }
.c-top p { margin: 4px 0 0; color: var(--ink-50); font-size: 14px; }
.c-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.c-stat { background: var(--surface); border-radius: 16px; box-shadow: var(--card-sh); padding: 14px 16px; }
.c-stat .k { font-size: 12.5px; font-weight: 600; color: var(--ink-50); }
.c-stat .v { font-family: var(--display); font-weight: 600; font-size: 26px; letter-spacing: -.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.c-stat .s { font-size: 12.5px; color: var(--ink-50); margin-top: 2px; }
.c-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 16px; margin-top: 18px; align-items: start; }
.c-panel { background: var(--surface); border-radius: 18px; box-shadow: var(--card-sh); padding: 16px 18px; min-width: 0; }
.c-panel + .c-panel { margin-top: 16px; }
.c-panel h2 { font-size: 16px; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 8px; }
.c-panel h2 .cnt { font-size: 12px; font-weight: 700; color: var(--ink-70); background: var(--field); border-radius: 999px; padding: 2px 8px; }
.c-panel .hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.attn { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; }
.attn + .attn { border-top: 1px solid var(--line); }
.attn .ico { width: 34px; height: 34px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; background: var(--field); color: var(--ink-70); }
.attn .t { font-weight: 600; font-size: 14.5px; }
.attn .s { font-size: 13px; color: var(--ink-50); margin-top: 2px; }
.attn .a { margin-left: auto; flex: 0 0 auto; }
.pill { height: 30px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--field); color: var(--ink); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pill.solid { background: var(--violet); color: var(--on-violet); }
.pill.soft { background: var(--field); color: var(--ink-70); }
.tscroll { overflow-x: auto; }
table.ct { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
table.ct th { text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-50); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.ct td { padding: 10px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
table.ct tr:last-child td { border-bottom: 0; }
table.ct tr.click { cursor: pointer; }
table.ct tr.click:hover td { background: var(--field); }
table.ct tr.hl td { background: var(--field); }
table.ct .tn { display: flex; align-items: center; gap: 9px; font-weight: 600; }
table.ct .r { text-align: right; }
.mbar2 { width: 90px; height: 6px; border-radius: 6px; background: var(--field); overflow: hidden; display: inline-block; vertical-align: middle; margin-right: 8px; }
.mbar2 i { display: block; height: 100%; background: var(--violet); border-radius: 6px; }
.mbar2.green i { background: var(--green); }
.st { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st.ready { color: var(--green-ink); background: var(--green-bg); }
.st.risk { color: var(--ink); background: var(--field); }
.st.short { color: var(--ink); background: var(--field); }
.st.unpaid { color: var(--ink-70); background: var(--field); }
.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.filters button { font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--surface); color: var(--ink-70); box-shadow: var(--card-sh); }
.filters button.on { background: var(--ink); color: var(--surface); box-shadow: none; }
.gamerow { display: grid; grid-template-columns: 64px minmax(0, 1fr) 150px; gap: 14px; align-items: center; padding: 12px 0; }
.gamerow + .gamerow { border-top: 1px solid var(--line); }
.gamerow .tm { font-family: var(--display); font-weight: 600; font-size: 18px; }
.gamerow .tm small { display: block; font-family: var(--ui); font-size: 11.5px; color: var(--ink-50); font-weight: 600; }
.side2 { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; padding: 2px 0; }
.side2 .cnt2 { margin-left: auto; font-size: 12.5px; color: var(--ink-50); font-weight: 600; font-variant-numeric: tabular-nums; }
.side2 .cnt2.low { color: var(--violet-600); font-weight: 700; }
.ledger-t td .amt { font-family: var(--display); font-weight: 600; font-size: 14.5px; }
.ledger-t td .amt.plus { color: var(--green-ink); }
.compose { display: grid; gap: 10px; }
.compose select, .compose textarea { width: 100%; background: var(--field); border: 0; border-radius: 12px; padding: 11px 13px; font-size: 14.5px; color: var(--ink); outline: 0; }
.compose textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
.sent { padding: 12px 0; }
.sent + .sent { border-top: 1px solid var(--line); }
.sent .to { font-size: 12px; font-weight: 700; color: var(--violet-600); }
.sent .x { font-size: 14px; margin-top: 3px; line-height: 1.45; }
.sent .m { font-size: 12.5px; color: var(--ink-50); margin-top: 6px; display: flex; align-items: center; gap: 8px; }
.drawer-scrim { position: absolute; inset: 0; background: var(--scrim); z-index: 50; }
.drawer-scrim.anim { animation: fadeIn .2s ease; }
.drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 92%); background: var(--surface); z-index: 51; padding: 22px 22px 30px; overflow-y: auto; box-shadow: -20px 0 50px rgba(20, 14, 50, .2); }
.drawer.anim { animation: drawerIn .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes drawerIn { from { transform: translateX(100%); } to { transform: none; } }
.c-toast { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; background: var(--ink); color: var(--surface); padding: 10px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.c-toast.anim { animation: toastIn .25s ease; }
.c-note { font-size: 12.5px; color: var(--ink-50); margin-top: 10px; }


/* the console sizes to its own space (it shares the screen with the demo guide) */
@container (max-width: 1180px) {
  .c-grid { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 960px) {
  .console { grid-template-columns: minmax(0, 1fr); }
  .c-side { flex-direction: row; align-items: center; overflow-x: auto; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--line); gap: 4px; }
  .c-org, .c-side .foot, .c-sec { display: none; }
  .c-nav { width: auto; white-space: nowrap; padding: 8px 12px; }
}
@container (max-width: 640px) {
  .c-sum { grid-template-columns: 1fr 1fr; }
  .c-main { padding: 18px 14px 40px; }
  .gamerow { grid-template-columns: 54px minmax(0, 1fr); }
  .gamerow > :last-child { grid-column: 1 / -1; text-align: left !important; }
  .attn { flex-wrap: wrap; }
  .attn .grow { flex: 1 1 calc(100% - 46px); }
  .attn .a { margin-left: 46px; }
}


/* console: direct thread + escalation ladder */
.dmdrawer { width: min(440px, 94%); display: flex; flex-direction: column; }
.dmthread { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; padding: 12px; background: var(--bg); border-radius: 16px; max-height: 42vh; overflow-y: auto; }
.dmthread .mrow { max-width: 92%; }
.escbox { margin-top: 14px; background: var(--field); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.escbox > .t { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.escrow { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--surface); border-radius: 12px; padding: 10px 12px; }
.escrow .ico { width: 30px; height: 30px; border-radius: 10px; background: var(--field); color: var(--ink-70); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.escrow b { display: block; font-size: 13.5px; font-weight: 600; }
.escrow span span { display: block; font-size: 12px; color: var(--ink-50); }
.escrow.done { opacity: .7; }
.escrow.done .ico { background: var(--violet); color: var(--on-violet); }


/* console: season tools */
.c-sec { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-50); padding: 14px 12px 4px; }
.bstep { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; }
.bstep + .bstep { border-top: 1px solid var(--line); }
.bstep .n { width: 28px; height: 28px; border-radius: 50%; background: var(--field); color: var(--ink-70); font-family: var(--display); font-weight: 600; display: flex; align-items: center; justify-content: center; }
.bstep b { display: block; font-size: 14px; }
.bstep span { font-size: 12.5px; color: var(--ink-50); }
.bstep .st { color: var(--green-ink); }
.genlist { max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.genwk .gw { font-size: 12px; font-weight: 700; color: var(--ink-50); margin-bottom: 4px; }
.genrow { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; padding: 5px 0; }
.genrow .tn { display: flex; align-items: center; gap: 6px; font-weight: 600; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.genrow > .muted { font-size: 12px; white-space: nowrap; }
.slotgrid td { padding: 4px; min-width: 112px; white-space: normal !important; }
.slotgrid td:first-child { min-width: 0; width: 52px; }
.slot { border-radius: 10px; padding: 8px 10px; font-size: 12.5px; min-height: 48px; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.slot.used { background: var(--field); }
.slot.used .tn { display: flex; align-items: flex-start; gap: 5px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.slot.used .tn .crest { margin-top: 1px; }
.slot.used span:last-child { color: var(--ink-50); }
.slot.free { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink-70); font-weight: 600; }
.slot.none { background: repeating-linear-gradient(135deg, var(--field), var(--field) 6px, transparent 6px, transparent 12px); color: var(--ink-50); }
.refrow { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; }
.refrow + .refrow { border-top: 1px solid var(--line); }
.refrow .tm { font-family: var(--display); font-weight: 600; font-size: 17px; width: 64px; flex: 0 0 auto; }
.refrow .tm small { display: block; font-family: var(--ui); font-size: 11.5px; color: var(--ink-50); font-weight: 600; }
.refrow .t { font-weight: 600; font-size: 14px; }
.refrow .s { font-size: 12.5px; color: var(--ink-50); margin-top: 2px; }
.sugg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sugg .pill[disabled] { opacity: .55; cursor: default; }
.opts2 { display: flex; flex-direction: column; gap: 8px; }
.opt2 { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--surface); border-radius: 12px; padding: 10px 12px; box-shadow: inset 0 0 0 1.5px var(--line); }
.opt2 b { display: block; font-size: 14px; }
.opt2 span span { display: block; font-size: 12px; color: var(--ink-50); }
.opt2.on { box-shadow: inset 0 0 0 2px var(--violet); color: var(--violet-600); }
.opt2[disabled] { opacity: .5; cursor: default; }

/* ─────────────────────────── small screens ─────────────────────────── */
@media (max-width: 820px) {
  .layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .guide { display: none; }
  .guide.open { display: flex; position: fixed; inset: 0; z-index: 500; height: auto; border: 0; padding-top: calc(20px + env(safe-area-inset-top, 0px)); padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  .guide .g-close { display: flex; }
  .mbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; background: var(--pg-panel); border-bottom: 1px solid var(--pg-line); }
  .mbar .mt { font-size: 13.5px; font-weight: 600; color: var(--pg-soft); }
  .mbar button { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13.5px; background: var(--pg-tint); color: var(--pg-ink); padding: 7px 12px; border-radius: 999px; }
  .stage { padding: 0; align-items: stretch; }
  .stage.console-stage { padding: 0; }
  .devwrap { width: 100%; height: 100%; }
  .device { width: 100%; height: 100%; transform: none; border-radius: 0; padding: 0; box-shadow: none; background: var(--bg); }
  .screen { width: 100%; height: 100%; border-radius: 0; }
  .island, .sbar { display: none; }
  .app { --sb: 0px; }
  .view { padding-top: 8px; }
  .banner { top: 8px; }
  .console { grid-template-columns: 1fr; border-radius: 0; box-shadow: none; }
  .c-side { flex-direction: row; overflow-x: auto; padding: 10px; border-right: 0; border-bottom: 1px solid var(--line); gap: 4px; }
  .c-org, .c-side .foot { display: none; }
  .c-nav { width: auto; white-space: nowrap; }
  .c-main { padding: 18px 16px 40px; }
  .c-sum { grid-template-columns: 1fr 1fr; }
  .c-grid { grid-template-columns: 1fr; }
  .gamerow { grid-template-columns: 54px minmax(0, 1fr); }
  .gamerow > :last-child { grid-column: 1 / -1; }
}
.g-close { display: none; align-self: flex-end; align-items: center; gap: 6px; font-weight: 600; color: var(--pg-muted); background: var(--pg-bg); padding: 7px 12px; border-radius: 999px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ── kit ─────────────────────────────────────────────── */
.kit { display: block; flex: 0 0 auto; }
.kitcard { padding: 14px 16px; }
.kits { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.kits.two { grid-template-columns: 1fr 1fr; }
.kside { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; min-width: 0; }
.kside .kit { margin-bottom: 4px; }
.kside .kn { font-weight: 600; font-size: 14px; line-height: 1.2; }
.kside .kc { font-size: 12.5px; color: var(--ink-50); line-height: 1.3; }
.kvs { font-size: 13px; font-weight: 600; color: var(--ink-50); }
.kvs.warn { width: 32px; height: 32px; border-radius: 50%; background: var(--field); color: var(--ink); display: grid; place-items: center; }
.kstat { display: flex; gap: 9px; align-items: flex-start; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.45; color: var(--ink-70); }
.kstat b { color: var(--ink); font-weight: 600; }
.kstat .ic { flex: 0 0 auto; margin-top: 1px; color: var(--ink-70); }
.mday .kitline { position: relative; display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 12.5px; color: var(--ink-50); margin-top: 7px; }
.mday .kitline.warn { color: var(--ink); font-weight: 600; }
.mday .kitline .dot { margin: 0 3px; opacity: .6; }
.mday .kitline .kb { width: 22px; height: 22px; border-radius: 50%; background: var(--field); display: grid; place-items: center; flex: 0 0 auto; }
.mday .kitline .kb + .kb { margin-left: -7px; box-shadow: 0 0 0 1.5px var(--surface); }
.mday .kitline .kb + span { margin-left: 2px; }
.kitprev { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 0 2px; }
.kitprev .kc { font-size: 13px; color: var(--ink-50); font-weight: 600; }
.swatches { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.sw { aspect-ratio: 1; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px var(--kit-line); transition: box-shadow .15s ease; }
.sw.on { box-shadow: inset 0 0 0 1px var(--kit-line), 0 0 0 2.5px var(--surface), 0 0 0 4.5px var(--violet); }
.kopts { display: grid; gap: 8px; }
.kopt { display: flex; gap: 12px; align-items: center; text-align: left; width: 100%; padding: 11px 14px; border-radius: 16px; background: var(--field); color: var(--ink); transition: background .15s ease, box-shadow .15s ease; }
.kopt b { display: block; font-size: 14.5px; font-weight: 600; }
.kopt span { display: block; font-size: 12.5px; color: var(--ink-50); line-height: 1.4; margin-top: 2px; }
.kopt.on { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--violet); }
.bub .kl { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; opacity: .85; margin-bottom: 2px; }
.side2 .kitdot { display: inline-flex; margin-left: 2px; }

/* ── liquid glass: the floating control layer (header circles, the header tray, the composer).
   the app's own web recipe; content underneath stays solid white. ── */
.circ, .tray, .uni .u, .composer .fld {
  background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(200%); backdrop-filter: blur(20px) saturate(200%);
  box-shadow: inset 0 0 0 1px var(--glass-rim), 0 0 0 .5px var(--glass-hair), 0 4px 16px rgba(27, 23, 51, .07); }
.composer .circ.on { background: var(--violet); color: var(--on-violet); }

/* ── find a team ─────────────────────────────────────── */
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.way { background: var(--surface); border-radius: 16px; box-shadow: var(--card-sh); padding: 12px 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; min-width: 0; }
.way .ico { width: 34px; height: 34px; border-radius: 11px; background: var(--field); color: var(--ink-70); display: grid; place-items: center; }
.way b { font-size: 13.5px; font-weight: 600; line-height: 1.2; }
.way span { font-size: 11.5px; color: var(--ink-50); line-height: 1.3; }
.way.on { box-shadow: inset 0 0 0 1.5px var(--violet), var(--card-sh); }
.fchips { display: flex; gap: 6px; margin-top: 14px; overflow-x: auto; scrollbar-width: none; }
.fchips button { flex: 0 0 auto; font-size: 13px; font-weight: 600; padding: 7px 13px; border-radius: 999px; background: var(--surface); color: var(--ink-70); box-shadow: var(--card-sh); }
.fchips button.on { background: var(--ink); color: var(--surface); box-shadow: none; }
.fplayer { display: flex; align-items: center; gap: 11px; padding: 11px 14px; }
.fplayer + .fplayer { border-top: 1px solid var(--line); }
.fplayer .t { font-weight: 600; font-size: 14.5px; }
.fplayer .s { font-size: 12.5px; color: var(--ink-50); }
.findhome { display: flex; align-items: center; gap: 12px; padding: 14px; width: 100%; text-align: left; }
.findhome .t { font-weight: 600; font-size: 15px; }
.findhome .s { font-size: 12.5px; color: var(--ink-50); margin-top: 1px; }
.findhome .astack .av { --s: 30px; }
.mine { padding: 14px; margin-top: 14px; }
.mine .top { display: flex; align-items: center; gap: 12px; }
.mine .k { font-size: 11.5px; font-weight: 700; color: var(--ink-50); letter-spacing: .02em; }
.mine .t { font-weight: 600; font-size: 15.5px; }
.mine .s { font-size: 12.5px; color: var(--ink-50); }
.mine .acts { display: flex; gap: 8px; margin-top: 12px; }
.mine .acts .mini { flex: 1; }
.optsm { display: flex; flex-wrap: wrap; gap: 8px; }
.optsm .opt.on { background: var(--ink); color: var(--surface); }

/* ── watching, feed, stats, cup, profile, full time ─── */
.watchcard .btn { flex: 1; }
.post { padding: 0; overflow: hidden; margin-top: 10px; }
.post .ph { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.post .ph .t { font-weight: 600; font-size: 14.5px; }
.post .ph .s { font-size: 12px; color: var(--ink-50); }
.scene { position: relative; aspect-ratio: 16 / 9; background: #0b1322; overflow: hidden; }
.scene svg { display: block; width: 100%; height: 100%; }
.scene .ov { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 14px 12px; background: linear-gradient(transparent, rgba(5, 8, 16, .72)); color: #fff; display: flex; flex-direction: column; }
.scene .sc { font-family: var(--display); font-weight: 600; font-size: 34px; letter-spacing: -.03em; line-height: 1; }
.scene .sc.sm { font-size: 22px; margin-top: 2px; }
.scene .vs { font-size: 12px; font-weight: 600; opacity: .85; margin-top: 4px; }
.scene.sm { border-radius: 16px; }
.scene .phototag { position: absolute; top: 10px; left: 10px; display: inline-flex; gap: 5px; align-items: center; font-size: 11.5px; font-weight: 600; color: #fff; background: rgba(0, 0, 0, .38); padding: 4px 9px; border-radius: 999px; }
.post .ptext { padding: 12px 14px 0; font-size: 14.5px; line-height: 1.45; }
.post .pmotm { display: flex; align-items: center; gap: 6px; margin: 8px 14px 0; font-size: 12.5px; color: var(--ink-70); }
.post .pacts { display: flex; gap: 4px; padding: 8px 8px 10px; }
.post .pacts button { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-70); padding: 6px 10px; border-radius: 999px; }
.post .pacts button:last-child { margin-left: auto; }
.post .pacts button.on { color: var(--violet); }
.post .pacts button.on .ic { fill: currentColor; }
.poster { display: flex; gap: 12px; align-items: center; margin: 0 14px; padding: 14px; border-radius: 16px; background: var(--field); }
.poster .pi { width: 42px; height: 42px; border-radius: 13px; background: var(--surface); display: grid; place-items: center; color: var(--ink-70); flex: 0 0 auto; }
.poster b { display: block; font-size: 15px; }
.poster span { font-size: 12.5px; color: var(--ink-50); }
.rank { display: flex; align-items: center; gap: 11px; padding: 10px 14px; }
.rank + .rank { border-top: 1px solid var(--line); }
.rank .rk { width: 16px; font-weight: 700; color: var(--ink-50); font-size: 13px; text-align: center; font-variant-numeric: tabular-nums; }
.rank .t { font-weight: 600; font-size: 14.5px; }
.rank .s { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-50); }
.rank b { font-size: 20px; }
.cup { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: center; margin-top: 12px; }
.cup .semis { display: grid; gap: 12px; }
.cup .final { position: relative; }
.cup .final::before { content: ""; position: absolute; left: -18px; top: -38px; bottom: -38px; width: 9px; border: 1.5px solid var(--line); border-left: 0; border-radius: 0 8px 8px 0; }
.cbox { background: var(--field); border-radius: 12px; padding: 8px 10px; min-width: 0; }
.cbox .cl { font-size: 11px; font-weight: 700; color: var(--ink-50); margin-bottom: 2px; }
.ct { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 3px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct.tbd { color: var(--ink-50); font-weight: 500; }
.lt-r[data-a] { cursor: pointer; }
.prof { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 18px 0 6px; }
.prof .nm { font-family: var(--display); font-weight: 600; font-size: 24px; letter-spacing: -.02em; margin-top: 8px; }
.prof .sb { font-size: 13.5px; color: var(--ink-50); }
.av.s72 { --s: 72px; }
.badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.vchip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--ink-70); background: var(--field); padding: 5px 10px; border-radius: 999px; }
.vchip .ic { color: var(--violet); }
.ibadge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--surface); background: var(--ink); padding: 5px 11px; border-radius: 999px; }
.ftres { display: flex; align-items: center; justify-content: center; gap: 16px; }
.ftres div { display: flex; align-items: center; gap: 10px; }
.ftres b { font-family: var(--display); font-weight: 600; font-size: 40px; letter-spacing: -.03em; }
.ftres span { font-size: 26px; color: var(--ink-30); }

/* screenshot mode: only the phone (or the console), on a transparent page */
body.shotmode { background: transparent; }
body.shotmode .guide, body.shotmode .mbar { display: none !important; }
body.shotmode .layout { grid-template-columns: minmax(0, 1fr); }
body.shotmode .stage:not(.console-stage) { padding: 0; align-items: flex-start; justify-content: flex-start; }
body.shotmode .device { box-shadow: none; }
body.shotmode .toast { display: none; }