/* PMU Hub — Apple-style chrome, Google Calendar-style timetable.
   Tokens only; dark mode follows the phone. System font = SF Pro on iPhone, Roboto on Android. */
:root {
  --tint: #231F20; --on-tint: #FFFFFF;
  --bg: #F2F2F7; --surface: #FFFFFF; --surface2: #F2F2F7; --elev: #FFFFFF;
  --label: #000000; --label2: rgba(60, 60, 67, .62); --label3: rgba(60, 60, 67, .32);
  --sep: rgba(60, 60, 67, .22); --fill: rgba(120, 120, 128, .12); --fill2: rgba(120, 120, 128, .2);
  --bar: rgba(242, 242, 247, .78);
  --red: #FF3B30; --green: #34C759; --orange: #FF9500; --blue: #007AFF;
  --red-text: #D70015; --green-text: #248A3D; --orange-text: #C93400;
  --warn-bg: rgba(255, 149, 0, .14); --ok-bg: rgba(52, 199, 89, .14); --bad-bg: rgba(255, 59, 48, .1);
  --shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .06);
  --grid-line: rgba(60, 60, 67, .09);
  --hh: 56px; /* hour height in the time grid; pinch changes it */
  --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, Roboto, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --spring: cubic-bezier(.32, .72, 0, 1);
  color-scheme: light;
}
/* dark tokens: follow the phone unless the student picked Light or Dark in Profile */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tint: #F5F5F7; --on-tint: #1C1C1E;
    --bg: #000000; --surface: #1C1C1E; --surface2: #2C2C2E; --elev: #2C2C2E;
    --label: #FFFFFF; --label2: rgba(235, 235, 245, .62); --label3: rgba(235, 235, 245, .32);
    --sep: rgba(84, 84, 88, .6); --fill: rgba(120, 120, 128, .24); --fill2: rgba(120, 120, 128, .36);
    --bar: rgba(10, 10, 12, .74);
    --red: #FF453A; --green: #30D158; --orange: #FF9F0A; --blue: #0A84FF;
    --red-text: #FF6961; --green-text: #30D158; --orange-text: #FFB340;
    --warn-bg: rgba(255, 159, 10, .18); --ok-bg: rgba(48, 209, 88, .16); --bad-bg: rgba(255, 69, 58, .16);
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .4);
    --grid-line: rgba(84, 84, 88, .45);
    color-scheme: dark;}
}
:root[data-theme="dark"] {
    --tint: #F5F5F7; --on-tint: #1C1C1E;
    --bg: #000000; --surface: #1C1C1E; --surface2: #2C2C2E; --elev: #2C2C2E;
    --label: #FFFFFF; --label2: rgba(235, 235, 245, .62); --label3: rgba(235, 235, 245, .32);
    --sep: rgba(84, 84, 88, .6); --fill: rgba(120, 120, 128, .24); --fill2: rgba(120, 120, 128, .36);
    --bar: rgba(10, 10, 12, .74);
    --red: #FF453A; --green: #30D158; --orange: #FF9F0A; --blue: #0A84FF;
    --red-text: #FF6961; --green-text: #30D158; --orange-text: #FFB340;
    --warn-bg: rgba(255, 159, 10, .18); --ok-bg: rgba(48, 209, 88, .16); --bad-bg: rgba(255, 69, 58, .16);
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .4);
    --grid-line: rgba(84, 84, 88, .45);
    color-scheme: dark;}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; background: var(--bg); color: var(--label); }
body { font-family: var(--font); font-size: 17px; line-height: 1.29; letter-spacing: -.022em; -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, p, figure { margin: 0; }
img { display: block; max-width: 100%; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hidden { display: none !important; }
:focus-visible { outline: 2.5px solid var(--label); outline-offset: 2px; border-radius: 8px; }
.num { font-variant-numeric: tabular-nums; }

#app { max-width: 560px; margin: 0 auto; min-height: 100dvh; }
.screen { min-height: 100dvh; display: flex; flex-direction: column; padding: 0 16px calc(32px + var(--safe-bottom)); }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; align-items: center; gap: 8px; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.grow { flex-grow: 1; }
.muted { color: var(--label2); }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.center { text-align: center; }

/* ── navigation bar: translucent material, large title collapses into it ── */
.nav { position: sticky; top: 0; z-index: 20; margin: 0 -16px; padding: var(--safe-top) 8px 0; min-height: calc(48px + var(--safe-top));
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  background: var(--bar); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 .5px 0 transparent; transition: box-shadow .2s; }
.nav.scrolled { box-shadow: 0 .5px 0 var(--sep); }
.nav .l { justify-self: start; display: flex; align-items: center; }
.nav .r { justify-self: end; display: flex; align-items: center; gap: 2px; }
.nav .t { font-size: 17px; font-weight: 600; text-align: center; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: opacity .2s; display: flex; align-items: center; justify-content: center; }
.nav[data-collapse] .t { opacity: 0; }
.nav[data-collapse].scrolled .t { opacity: 1; }
.navbtn { min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; border-radius: 22px; color: var(--tint); text-decoration: none; font-size: 17px; padding: 0 10px; }
.navbtn:active { background: var(--fill); }
.navbtn.strong { font-weight: 600; }
.navbtn[disabled] { opacity: .3; pointer-events: none; }
.wm { height: 26px; width: auto; display: block; color: var(--label); overflow: visible; }
.wm path { fill: currentColor; }

.lt { font-size: 34px; line-height: 41px; font-weight: 700; letter-spacing: .011em; margin: 6px 0 2px; }
.lt-sub { font-size: 15px; line-height: 20px; color: var(--label2); margin-bottom: 4px; }

/* ── segmented control ── */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); background: var(--fill); border-radius: 9px; padding: 2px; }
.seg button { height: 30px; border-radius: 7px; font-size: 13px; font-weight: 500; letter-spacing: -.01em; color: var(--label); white-space: nowrap; transition: background .2s, box-shadow .2s; }
.seg button[aria-pressed="true"] { background: var(--elev); font-weight: 600; box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 3px 1px rgba(0, 0, 0, .04); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .seg button[aria-pressed="true"] { background: #636366; } }
:root[data-theme="dark"] .seg button[aria-pressed="true"] { background: #636366; }

/* ── inset grouped lists ── */
.sh { font-size: 13px; line-height: 18px; color: var(--label2); margin: 26px 16px 7px; }
.sf { font-size: 13px; line-height: 18px; color: var(--label2); margin: 7px 16px 0; }
.sf a, .lt-sub a, .status a, .empty a { color: var(--label); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.list { background: var(--surface); border-radius: 22px; overflow: hidden; }
.cell { position: relative; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 16px; width: 100%; text-align: left; text-decoration: none; color: inherit; background: var(--surface); }
.cell + .cell::before { content: ""; position: absolute; top: 0; right: 0; left: 16px; height: .5px; background: var(--sep); }
.list.ic .cell + .cell::before { left: 58px; }
.list.av .cell + .cell::before { left: 68px; }
a.cell:active, button.cell:active { background: var(--fill); }
.cell .main { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cell .main small { font-size: 13px; line-height: 18px; color: var(--label2); }
.cell .value { color: var(--label2); text-align: right; white-space: nowrap; }
.cell .chev { color: var(--label3); display: flex; margin-right: -4px; }
/* icon tiles are monochrome: brand ink with a white glyph (inverted in dark mode) */
.tile { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--tint) !important; color: var(--on-tint); }
.tile svg { width: 19px; height: 19px; }
.cell .lbl { width: 92px; flex-shrink: 0; color: var(--label); }
input.plain, textarea.plain { flex-grow: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 17px; padding: 3px 0; color: var(--label); }
textarea.plain { min-height: 92px; resize: vertical; line-height: 1.35; }
::placeholder { color: var(--label3); }
.field { border: 0; background: var(--fill); border-radius: 8px; padding: 7px 10px; font-size: 17px; color: var(--label); min-height: 36px; }
input[type="radio"], input[type="checkbox"] { accent-color: var(--tint); width: 22px; height: 22px; }
.switch { position: relative; width: 51px; height: 31px; flex-shrink: 0; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; width: 100%; height: 100%; z-index: 1; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: 16px; background: var(--fill2); transition: background .25s; }
.switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .15); transition: transform .25s var(--spring); }
.switch input:checked + span { background: var(--green); }
.switch input:checked + span::after { transform: translateX(20px); }

/* ── buttons ── */
.btn { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; padding: 0 22px; border-radius: 999px; background: var(--tint); color: var(--on-tint); font-size: 17px; font-weight: 600; text-decoration: none; transition: opacity .15s, transform .15s var(--spring); }
.btn:active { opacity: .78; transform: scale(.985); }
.btn[disabled] { opacity: .3; pointer-events: none; }
.btn.secondary { background: var(--fill); color: var(--label); }
.btn.danger { background: var(--bad-bg); color: var(--red-text); }
.btn.sm { min-height: 36px; width: auto; padding: 0 16px; font-size: 15px; }
.btns { display: flex; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px; border-radius: 999px; background: var(--fill); font-size: 15px; font-weight: 500; color: var(--label); }
.chip[aria-pressed="true"] { background: var(--tint); color: var(--on-tint); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--fill); color: var(--label2); white-space: nowrap; }
.pill.ok { background: var(--ok-bg); color: var(--green-text); }
.pill.warn { background: var(--warn-bg); color: var(--orange-text); }
.pill.bad { background: var(--bad-bg); color: var(--red-text); }
.pill.ink { background: var(--tint); color: var(--on-tint); }

.card { background: var(--surface); border-radius: 22px; padding: 16px; }
.empty { text-align: center; color: var(--label2); padding: 28px 20px; font-size: 15px; line-height: 20px; }
.empty b { display: block; color: var(--label); font-size: 17px; margin-bottom: 4px; }
.note { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 20px; color: var(--label2); padding: 12px 14px; background: var(--surface); border-radius: 16px; }
.note svg { flex-shrink: 0; margin-top: 1px; }
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; background: var(--warn-bg); color: var(--label); font-size: 15px; line-height: 20px; }
.alert svg { color: var(--orange); flex-shrink: 0; margin-top: 1px; }
.alert.bad { background: var(--bad-bg); }
.alert.bad svg { color: var(--red); }

.avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--fill2); color: var(--label2); font-size: 15px; font-weight: 600; object-fit: cover; }
.avatar.sm { width: 24px; height: 24px; font-size: 10px; }
.avatar.lg { width: 96px; height: 96px; font-size: 34px; }

/* ── bottom sheet ── */
.sheet-back { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, 0); transition: background .3s; }
.sheet-back.on { background: rgba(0, 0, 0, .32); }
.sheet { position: fixed; z-index: 61; left: 0; right: 0; bottom: 0; max-width: 560px; margin: 0 auto; max-height: 92dvh; overflow: auto; overscroll-behavior: contain;
  background: var(--bg); border-radius: 26px 26px 0 0; padding: 8px 16px calc(24px + var(--safe-bottom)); transform: translateY(100%); transition: transform .42s var(--spring); }
.sheet.on { transform: none; }
.sheet .grab { width: 36px; height: 5px; border-radius: 3px; background: var(--fill2); margin: 0 auto 14px; }
.sheet h2 { font-size: 22px; line-height: 28px; font-weight: 700; }
.toast { position: fixed; z-index: 90; left: 50%; bottom: calc(26px + var(--safe-bottom)); transform: translateX(-50%); background: var(--tint); color: var(--on-tint); padding: 11px 18px; border-radius: 999px; font-size: 15px; font-weight: 500; box-shadow: var(--shadow); animation: toast 2.6s var(--spring) forwards; white-space: nowrap; max-width: 90vw; overflow: hidden; text-overflow: ellipsis; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, 12px); } 10%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
.fab { position: fixed; z-index: 15; right: max(16px, calc(50% - 264px)); bottom: calc(20px + var(--safe-bottom)); height: 56px; min-width: 56px; padding: 0 22px 0 18px; border-radius: 28px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--tint); color: var(--on-tint); font-size: 17px; font-weight: 600; text-decoration: none; box-shadow: 0 6px 20px rgba(0, 0, 0, .22); }
.fab.round { padding: 0; width: 56px; }
.fab:active { transform: scale(.96); }

/* ── timetable ── */
.calbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0 4px; }
.calbar h2 { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: .01em; }
.calbar .arrows { display: flex; align-items: center; gap: 2px; }
.today-btn { height: 32px; padding: 0 12px; border-radius: 16px; background: var(--fill); font-size: 15px; font-weight: 500; color: var(--label); margin-right: 4px; }
.status { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 18px; color: var(--label2); margin: 0 2px 10px; min-height: 18px; }
.status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.status .dot.busy { background: var(--orange); animation: pulse 1.2s infinite; }
.status .dot.off { background: var(--label3); }

.calsticky { position: sticky; top: calc(48px + var(--safe-top)); z-index: 8; margin: 0 -16px; padding: 6px 16px 2px; background: var(--bg); }
.days-head { display: grid; margin: 0 -16px; padding: 2px 16px 6px 0; }
.days-head .d { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--label2); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; }
.days-head .d b { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 500; color: var(--label); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.days-head .d.today { color: var(--red-text); }
.days-head .d.today b { background: var(--red); color: #fff; font-weight: 600; }
.tgrid { position: relative; display: grid; touch-action: pan-x pan-y; margin: 0 -16px; padding: 10px 16px 10px 0; user-select: none; -webkit-user-select: none; }
.tgrid .hours { position: relative; }
.tgrid .hl { position: absolute; right: 7px; transform: translateY(-50%); font-size: 11px; color: var(--label3); font-variant-numeric: tabular-nums; top: calc(var(--h) * var(--hh)); }
.tgrid .col { position: relative; }
.tgrid .col + .col { border-left: .5px solid var(--grid-line); }
.tgrid .gl { position: absolute; left: 44px; right: 0; height: .5px; background: var(--grid-line); top: calc(10px + var(--h) * var(--hh)); pointer-events: none; }
.ev { position: absolute; z-index: 1; left: calc(var(--lane) * 100% / var(--lanes) + 1px); width: calc(100% / var(--lanes) - 3px); top: calc(var(--s) * var(--hh) + 1px); height: max(18px, calc(var(--d) * var(--hh) - 2px));
  border-radius: 6px; padding: 4px 6px 4px 9px; overflow: hidden; text-align: left; display: flex; flex-direction: column; gap: 1px; font-size: 12px; line-height: 15px; letter-spacing: -.01em;
  /* Apple Calendar: a soft tint of the calendar colour, a solid bar on the left, text in a deeper shade */
  background: color-mix(in srgb, var(--c) 17%, var(--surface)); color: color-mix(in srgb, var(--c) 62%, #000); }
.ev::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ev { background: color-mix(in srgb, var(--c) 30%, #1C1C1E); color: color-mix(in srgb, var(--c) 45%, #fff); } }
:root[data-theme="dark"] .ev { background: color-mix(in srgb, var(--c) 30%, #1C1C1E); color: color-mix(in srgb, var(--c) 45%, #fff); }
.ev b { font-weight: 600; font-size: 13px; line-height: 16px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow-wrap: normal; hyphens: auto; -webkit-hyphens: auto; }
.tgrid[data-view="week"] .ev, .tgrid[data-view="3day"] .ev { padding: 3px 4px 3px 7px; font-size: 11px; line-height: 13px; }
.tgrid[data-view="week"] .ev b, .tgrid[data-view="3day"] .ev b { font-size: 11.5px; line-height: 14px; }
.ev span { opacity: .85; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.ev.two b, .ev.three b { display: block; white-space: nowrap; text-overflow: ellipsis; }
.ev.two span ~ span { display: none; }
.ev.one { flex-direction: row; align-items: center; gap: 5px; padding-top: 0; padding-bottom: 0; }
.ev.one b { display: block; white-space: nowrap; text-overflow: ellipsis; min-width: 0; flex-shrink: 1; }
.ev.one span { flex-shrink: 0; }
.ev.one span ~ span, .ev.one.narrow span { display: none; }
.ev.narrow b { display: block; white-space: nowrap; text-overflow: ellipsis; }
.ev.clash { box-shadow: inset 0 0 0 1.5px var(--orange); }
.ev:active { filter: brightness(.95); }
.nowline { position: absolute; z-index: 3; left: -4px; right: 0; height: 1.5px; background: var(--red); top: calc(var(--s) * var(--hh)); pointer-events: none; }
.nowline::before { content: ""; position: absolute; left: 0; top: -3.25px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.zoom-hint { position: fixed; left: 50%; top: calc(64px + var(--safe-top)); transform: translateX(-50%); z-index: 30; padding: 6px 12px; border-radius: 999px; background: var(--tint); color: var(--on-tint); font-size: 13px; font-weight: 600; opacity: 0; transition: opacity .2s; pointer-events: none; }
.zoom-hint.on { opacity: .92; }

.nowcard { display: flex; gap: 12px; align-items: stretch; background: var(--surface); border-radius: 22px; padding: 14px 16px; margin-bottom: 4px; }
.nowcard .bar { width: 4px; border-radius: 2px; flex-shrink: 0; }
.nowcard .body { flex-grow: 1; min-width: 0; }
.nowcard .k { font-size: 13px; font-weight: 600; color: var(--label2); display: flex; justify-content: space-between; gap: 8px; }
.nowcard .t { font-size: 17px; font-weight: 600; margin-top: 2px; }
.nowcard .s { font-size: 15px; color: var(--label2); margin-top: 1px; }
.progress { height: 4px; border-radius: 2px; background: var(--fill); margin-top: 10px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--label); border-radius: 2px; }

.month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--surface); border-radius: 22px; padding: 8px 6px 10px; }
.month .wd { text-align: center; font-size: 11px; font-weight: 600; color: var(--label2); padding: 4px 0 8px; text-transform: uppercase; }
.month button { min-height: 54px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 0; border-radius: 12px; }
.month button:active { background: var(--fill); }
.month button span { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; font-variant-numeric: tabular-nums; }
.month button.other span { color: var(--label3); }
.month button.today span { background: var(--red); color: #fff; font-weight: 600; }
.month .dots { display: flex; gap: 3px; height: 6px; }
.month .dots i { width: 6px; height: 6px; border-radius: 50%; }

.agenda-day { font-size: 13px; font-weight: 600; color: var(--label2); margin: 22px 4px 8px; }
.agenda-day.today { color: var(--red-text); }
.arow { display: flex; gap: 12px; align-items: stretch; padding: 11px 16px; width: 100%; text-align: left; position: relative; }
.arow + .arow::before { content: ""; position: absolute; top: 0; right: 0; left: 76px; height: .5px; background: var(--sep); }
.arow:active { background: var(--fill); }
.arow .t { width: 48px; flex-shrink: 0; font-size: 15px; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; }
.arow .t small { font-size: 13px; color: var(--label2); }
.arow .c { width: 4px; border-radius: 2px; flex-shrink: 0; }
.arow .m { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.arow .m b { font-weight: 600; }
.arow .m span { font-size: 15px; color: var(--label2); }

.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 14px 4px 0; font-size: 13px; color: var(--label2); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* ── start (pick your group) ── */
.hero-wm { width: 150px; height: auto; color: var(--label); margin: 4px 0 22px; }
.gridpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 8px; }
.gridpick button { height: 44px; border-radius: 12px; background: var(--surface); font-size: 17px; font-variant-numeric: tabular-nums; }
.gridpick button[aria-pressed="true"] { background: var(--tint); color: var(--on-tint); font-weight: 600; }

/* ── rides ── */
.ride { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; }
.ride:active { opacity: .85; }
.ride .when { font-size: 13px; font-weight: 600; color: var(--label2); }
.ride .route { font-size: 17px; font-weight: 600; }
.ride .price { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.seatdots { display: inline-flex; gap: 4px; align-items: center; }
.seatdots i { width: 9px; height: 9px; border-radius: 50%; background: var(--fill2); }
.seatdots i.on { background: var(--label); }
.rate-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 22px; background: var(--tint); color: var(--on-tint); }
.rate-strip small { opacity: .7; font-size: 13px; display: block; }
.rate-strip b { font-size: 22px; font-variant-numeric: tabular-nums; }
.cardiag { display: flex; gap: 18px; align-items: center; }
.cardiag svg { flex-shrink: 0; }
.stepper { display: inline-flex; align-items: center; background: var(--fill); border-radius: 9px; height: 34px; }
.stepper button { width: 44px; height: 34px; font-size: 22px; color: var(--label); }
.stepper b { min-width: 22px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.stars { color: #FF9500; letter-spacing: .02em; }
.stars-input { display: flex; gap: 6px; justify-content: center; }
.stars-input button { font-size: 38px; color: var(--fill2); width: 46px; height: 50px; }
.stars-input button.on { color: #FF9500; }
.hostcard { background: var(--tint); color: var(--on-tint); border-radius: 22px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.hostcard .sub { opacity: .72; font-size: 15px; }
.powered { font-size: 13px; color: var(--label2); text-align: center; margin: 22px 0 8px; }

/* start a ride */
input.plain.right { text-align: right; }
.cell.pick { position: relative; }
.cell.pick input[type="datetime-local"], .cell.pick input[type="date"], .cell.pick input[type="time"], .cell.pick select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 2; }
.cell .value.choose { color: var(--label); font-weight: 600; }
.cell .value.set { color: var(--label); }
.steprow { gap: 10px; }
.stepval { min-width: 18px; text-align: right; font-size: 17px; font-weight: 600; }
.ios-stepper { display: inline-flex; align-items: center; height: 32px; border-radius: 9px; background: var(--fill); flex-shrink: 0; }
.ios-stepper button { width: 46px; height: 32px; display: inline-flex; align-items: center; justify-content: center; color: var(--label); border-radius: 9px; }
.ios-stepper button:active { background: var(--fill2); }
.ios-stepper button[disabled] { opacity: .3; pointer-events: none; }
.ios-stepper i { width: .5px; height: 18px; background: var(--sep); }
.carcard { padding: 16px 16px 10px; }
.carhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.carhead b { font-size: 20px; line-height: 25px; display: block; }
.carhead small { font-size: 13px; color: var(--label2); }
.carwrap { display: flex; justify-content: center; padding: 10px 0 0; }
.cta-bar { position: fixed; z-index: 15; left: 0; right: 0; bottom: 0; max-width: 560px; margin: 0 auto; padding: 10px 16px calc(10px + var(--safe-bottom)); display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--bar); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 -.5px 0 var(--sep); }
.cta-bar span { font-size: 13px; color: var(--label2); text-align: center; }

/* square photo crop */
.crop-stage { position: relative; width: min(100%, 340px); aspect-ratio: 1; overflow: hidden; border-radius: 18px; background: #000; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.crop-stage img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
.crop-mask { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 999px rgba(0, 0, 0, .5); outline: 1px solid rgba(255, 255, 255, .7); outline-offset: -1px; pointer-events: none; }
.crop-zoom { display: flex; align-items: center; gap: 12px; width: min(100%, 340px); color: var(--label3); }
.crop-zoom input { flex-grow: 1; accent-color: var(--tint); }

/* ── ideas ── */
.idea { display: flex; gap: 14px; align-items: flex-start; }
.vote { width: 48px; height: 58px; flex-shrink: 0; border-radius: 14px; background: var(--fill); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.vote[aria-pressed="true"] { background: var(--tint); color: var(--on-tint); }
.thumb { width: 100%; max-height: 220px; object-fit: cover; border-radius: 14px; margin-top: 4px; background: var(--fill); }
.reply { background: var(--ok-bg); border-radius: 14px; padding: 10px 12px; font-size: 15px; line-height: 20px; }

/* ── group ── */
.gate { display: flex; flex-direction: column; gap: 14px; text-align: center; margin-top: 40px; }
.gate h1 { font-size: 28px; line-height: 34px; font-weight: 700; }
.gate p { font-size: 17px; line-height: 23px; color: var(--label2); }
.gate-ico { width: 72px; height: 72px; border-radius: 20px; align-self: center; display: inline-flex; align-items: center; justify-content: center; background: var(--tint); color: var(--on-tint); }
.gate-ico svg { width: 36px; height: 36px; }
.gsticky { position: sticky; top: calc(48px + var(--safe-top)); z-index: 8; margin: 0 -16px; padding: 6px 16px 8px; background: var(--bg); }
.group-screen { padding-bottom: 0; }
.chat-day { align-self: center; font-size: 12px; font-weight: 600; color: var(--label2); margin: 12px 0 4px; }
.msg { margin-top: 2px; }
.msg.first { margin-top: 8px; }
.msg .bubble { text-align: left; max-width: 100%; }
.msg .bubble time { font-size: 11px; opacity: .55; margin-left: 8px; float: right; margin-top: 6px; font-variant-numeric: tabular-nums; }
.msg small { margin-left: 44px; }
.pinned .pin-line { display: block; color: var(--label); margin-top: 2px; }
.pin-dot { opacity: .6; }
.news p { font-size: 17px; line-height: 23px; margin: 10px 0 8px; white-space: pre-wrap; }
.news.pending { box-shadow: inset 0 0 0 1px var(--orange); }

/* ── chat ── */
.chat { display: flex; flex-direction: column; gap: 0; padding: 4px 0 12px; min-height: 50vh; }
.msg { display: flex; flex-direction: column; max-width: 78%; }
.msg small { font-size: 12px; color: var(--label2); margin: 0 12px 2px; }
.msg .bubble { background: var(--surface); padding: 8px 13px; border-radius: 19px; font-size: 17px; line-height: 22px; }
.msg.me { align-self: flex-end; }
.msg.me .bubble { background: var(--tint); color: var(--on-tint); }
.pinned { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: var(--surface); border-radius: 16px; font-size: 15px; line-height: 20px; }
.composer { position: sticky; bottom: 0; display: flex; gap: 8px; align-items: center; margin: 0 -16px; padding: 8px 16px calc(8px + var(--safe-bottom)); background: var(--bar); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.composer input { flex-grow: 1; min-width: 0; height: 36px; border-radius: 18px; border: .5px solid var(--sep); background: var(--surface); padding: 0 14px; font-size: 17px; outline: 0; }
.composer button { width: 32px; height: 32px; border-radius: 50%; background: var(--tint); color: var(--on-tint); display: inline-flex; align-items: center; justify-content: center; }

/* ── handbook ── */
.article { background: var(--surface); border-radius: 22px; padding: 18px 18px 6px; margin-top: 12px; font-size: 17px; line-height: 25px; letter-spacing: -.01em; }
.article h3 { font-size: 20px; line-height: 25px; font-weight: 600; margin-bottom: 8px; letter-spacing: .01em; }
.article p { margin: 0 0 12px; }
.article ul { margin: 0 0 12px; padding-left: 20px; }
.article li { margin-bottom: 6px; }

/* ── menu: full screen, tilted live previews; follows the app's light / dark theme ── */
.me-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px 6px; text-decoration: none; }
.me-row b { font-size: 17px; }
.me-row small { display: block; font-size: 13px; color: var(--label2); margin-top: 1px; }
.mitem { display: flex; align-items: center; gap: 14px; padding: 14px 14px 14px 18px; min-height: 104px; border-radius: 24px; background: var(--surface); text-decoration: none; overflow: hidden; perspective: 600px; transition: background .15s; }
.mitem:active, .msmall:active { background: var(--fill); }
.mitem .txt { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mitem .txt b { font-size: 20px; line-height: 25px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.mitem .txt small { font-size: 15px; color: var(--label2); }
.mitem .pv { width: 96px; height: 76px; flex-shrink: 0; border-radius: 12px; transform: rotateY(-24deg) rotateX(10deg) rotateZ(-2deg); transform-origin: right center; box-shadow: -10px 14px 24px rgba(0, 0, 0, .18); overflow: hidden; display: flex; flex-direction: column; gap: 4px; padding: 8px; }
.mgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mgrid > :last-child:nth-child(odd) { grid-column: span 2; min-height: 0; }
.msmall { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 22px; background: var(--surface); text-decoration: none; min-height: 104px; }
.msmall b { font-size: 17px; font-weight: 600; }
.msmall small { font-size: 13px; color: var(--label2); margin-top: -8px; }
.live { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: 5px; background: #FF3B30; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.live i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.install { font-size: 13px; color: var(--label2); text-align: center; line-height: 18px; margin-top: 18px; }

/* ── Super Cup tab: plovdivsupercup.com look inside PMU Hub ── */
.cup { background: #020812; color: #fff; --label: #fff; --label2: #8A97AB; --tint: #fff; --on-tint: #020812; --bar: rgba(2, 8, 18, .82); --sep: #13233F; --fill: rgba(255, 255, 255, .08); }
.cup .wm { color: #fff; }
.cup .kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 800; letter-spacing: .16em; color: #8A97AB; text-transform: uppercase; margin-top: 14px; }
.cup .kicker i { width: 6px; height: 6px; background: #2B5BFF; }
.cup h1 { font-family: "Archivo Black", Impact, var(--font); font-weight: 400; font-size: 46px; line-height: .95; letter-spacing: -.01em; text-transform: uppercase; margin: 10px 0 6px; }
.cup h1 span { color: #2B5BFF; }
.cup-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0 12px; }
.cup-tabs button { height: 44px; border: 1px solid #13233F; background: #06101F; color: #8A97AB; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.cup-tabs button i { width: 7px; height: 7px; border-radius: 50%; background: #2B5BFF; }
.cup-tabs button.eu i { background: #E2A11B; }
.cup-tabs button[aria-pressed="true"] { border-color: #2B5BFF; color: #fff; background: #0A1A3A; }
.cup-tabs button.eu[aria-pressed="true"] { border-color: #E2A11B; background: #1E1708; }
.cpanel { border: 1px solid #13233F; background: #06101F; padding: 14px 12px 6px; margin-bottom: 12px; }
.cpanel h2 { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.cpanel .meta { font-size: 10px; font-weight: 800; letter-spacing: .14em; color: #5A6880; text-transform: uppercase; }
.ctable { width: 100%; border-collapse: collapse; margin-top: 10px; font-variant-numeric: tabular-nums; table-layout: fixed; }
.ctable th { font-size: 9.5px; font-weight: 800; letter-spacing: .12em; color: #5A6880; text-align: center; padding: 6px 2px; border-bottom: 1px solid #13233F; width: 28px; }
.ctable th.tm { text-align: left; width: auto; }
.ctable th.ps { width: 32px; }
.ctable td { font-size: 13px; text-align: center; padding: 9px 2px; border-bottom: 1px solid #0D1A30; color: #8A97AB; }
.ctable tr:last-child td { border-bottom: 0; }
.ctable td.pos { font-weight: 800; color: #5A6880; border-left: 3px solid transparent; }
.ctable tr.top td.pos { border-left-color: #19B57A; color: #fff; }
.ctable td.team { text-align: left; color: #fff; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctable td.team img, .ctable td.team .ph { width: 22px; height: 22px; display: inline-block; vertical-align: -6px; margin-right: 8px; object-fit: cover; background: #13233F; }
.ctable td.pts { color: #fff; font-weight: 800; font-size: 15px; }
.ctable td.gd.p { color: #19B57A; }
.ctable td.gd.n { color: #FF5C72; }
.fixture { display: grid; grid-template-columns: minmax(0, 1fr) 86px minmax(0, 1fr); align-items: center; gap: 8px; padding: 12px 10px; border: 1px solid #13233F; background: #06101F; text-decoration: none; color: inherit; }
.fixture + .fixture { border-top: 0; }
.fixture .tm { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 8px; min-width: 0; }
.fixture .tm span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fixture .tm.away { justify-content: flex-end; text-align: right; }
.fixture .tm img, .fixture .tm .ph { width: 26px; height: 26px; flex-shrink: 0; object-fit: cover; background: #13233F; }
.fixture .mid { text-align: center; display: flex; flex-direction: column; gap: 3px; align-items: center; }
.fixture .score { font-family: "Archivo Black", Impact, var(--font); font-size: 20px; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.fixture .when { font-size: 10px; font-weight: 800; letter-spacing: .1em; color: #8A97AB; text-transform: uppercase; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fixture .st { font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #5A6880; }
.fixture.is-live { border-color: #FF3B30; }
.mw { display: flex; align-items: center; justify-content: space-between; margin: 20px 0 8px; }
.mw b { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.mw small { font-size: 10px; font-weight: 800; letter-spacing: .14em; color: #5A6880; text-transform: uppercase; }
.cup-link { display: flex; align-items: center; justify-content: center; min-height: 48px; border: 1px solid #2B5BFF; color: #fff; text-decoration: none; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; margin-top: 18px; }
.cup-foot { font-size: 12px; color: #5A6880; text-align: center; margin-top: 14px; line-height: 18px; }
.cup-foot .wm { height: 18px; display: inline-block; vertical-align: -5px; color: #8A97AB; margin: 0 3px; }

/* ── City Taxi (One App): red hero with a little live map, facts, the SMS tip, a step timeline ── */
.taxi { --one: #ED1C24; --one2: #B80F17; --oneblue: #0071F3; }
.tx-hero { position: relative; overflow: hidden; margin: 0 -16px; padding: 20px 20px 22px; color: #fff; background: radial-gradient(120% 90% at 100% 0%, #FF4A50 0%, transparent 55%), linear-gradient(160deg, var(--one) 0%, var(--one2) 100%); display: flex; flex-direction: column; gap: 10px; }
.tx-road { position: absolute; right: -40px; top: -30px; width: 220px; height: 220px; transform: rotate(-28deg); opacity: .14; pointer-events: none; }
.tx-road i { position: absolute; left: 0; right: 0; height: 26px; border-radius: 13px; background: #fff; }
.tx-road i:nth-child(1) { top: 20px; } .tx-road i:nth-child(2) { top: 80px; } .tx-road i:nth-child(3) { top: 140px; }
.tx-logo { height: 34px; width: auto; align-self: flex-start; position: relative; }
.tx-hero h1 { position: relative; font: 800 29px/34px Montserrat, var(--font); letter-spacing: -.02em; max-width: 15ch; }
.tx-hero p { position: relative; font: 500 15px/21px Montserrat, var(--font); opacity: .92; max-width: 36ch; }
.tx-map { position: relative; margin-top: 6px; height: 120px; border-radius: 18px; overflow: hidden; background: rgba(0, 0, 0, .18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.tx-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tx-car { offset-path: path("M36 92 H190 V30 H262"); offset-rotate: auto; animation: txDrive 5.5s cubic-bezier(.5, 0, .4, 1) infinite; }
@keyframes txDrive { 0% { offset-distance: 0%; } 70%, 100% { offset-distance: 100%; } }
.tx-eta { position: absolute; left: 12px; bottom: 10px; padding: 5px 10px; border-radius: 100px; background: #fff; color: #111; font: 600 12px/16px var(--font); box-shadow: 0 4px 12px rgba(0, 0, 0, .18); }
.tx-eta b { color: var(--one); font-weight: 800; }
.tx-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.tx-facts div { background: var(--surface); border-radius: 16px; padding: 11px 12px; display: flex; flex-direction: column; gap: 1px; }
.tx-facts b { font: 800 20px/24px Montserrat, var(--font); color: var(--one); letter-spacing: -.01em; }
.tx-facts small { font-size: 12px; line-height: 16px; color: var(--label2); }
.tx-tip { display: flex; gap: 12px; margin-top: 10px; padding: 14px; border-radius: 18px; background: var(--warn-bg); }
.tx-tip-i { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--orange); color: #fff; font: 800 15px/26px var(--font); text-align: center; }
.tx-tip b { font-size: 16px; }
.tx-tip p { font-size: 14px; line-height: 19px; color: var(--label2); margin: 3px 0 8px; }
.tx-tip p b { font-size: inherit; color: var(--label); }
.tx-wa { font-size: 14px; font-weight: 600; color: var(--green-text); text-decoration: none; }
.taxi .shots { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 6px -16px 0; padding: 14px 16px 14px; scrollbar-width: none; }
.taxi .shots::-webkit-scrollbar { display: none; }
.taxi .shots figure { flex: 0 0 52%; scroll-snap-align: center; display: flex; flex-direction: column; gap: 8px; }
.taxi .shots img { width: 100%; border-radius: 24px; box-shadow: 0 10px 28px rgba(0, 0, 0, .18); background: #EEEEEE; }
.taxi .shots figcaption { font: 600 13px/17px Montserrat, var(--font); text-align: center; color: var(--label2); }
.taxi h2 { font: 800 21px/26px Montserrat, var(--font); margin: 22px 2px 10px; letter-spacing: -.01em; }
.tx-steps { list-style: none; margin: 0; padding: 4px 0 0; counter-reset: s; background: var(--surface); border-radius: 20px; padding: 14px 16px 4px; }
.tx-steps li { position: relative; counter-increment: s; padding: 0 0 14px 42px; min-height: 40px; }
.tx-steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--one); color: #fff; font: 800 13px/28px Montserrat, var(--font); text-align: center; z-index: 1; }
.tx-steps li:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; border-radius: 1px; background: linear-gradient(var(--one), rgba(237, 28, 36, .15)); }
.tx-steps b { display: block; font-size: 16px; line-height: 21px; padding-top: 3px; }
.tx-steps span { display: block; font-size: 14px; line-height: 19px; color: var(--label2); margin-top: 1px; }
.tx-faq { background: var(--surface); border-radius: 20px; overflow: hidden; }
.tx-faq details { padding: 0 16px; }
.tx-faq details + details { border-top: .5px solid var(--sep); }
.tx-faq summary { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 600; cursor: pointer; list-style: none; }
.tx-faq summary::-webkit-details-marker { display: none; }
.tx-faq summary::after { content: "+"; font-size: 22px; font-weight: 400; color: var(--label3); transition: transform .2s; }
.tx-faq details[open] summary::after { transform: rotate(45deg); }
.tx-faq p { padding: 0 0 14px; font-size: 15px; line-height: 21px; color: var(--label2); }
.tx-faq a { color: var(--label); font-weight: 600; }
.taxi .cta { position: sticky; bottom: 0; z-index: 5; margin: 18px -16px calc(-32px - var(--safe-bottom)); padding: 10px 16px calc(10px + var(--safe-bottom)); background: var(--bar); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); display: flex; flex-direction: column; align-items: center; gap: 6px; border-top: .5px solid var(--sep); }
.tx-gets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.tx-get { width: 100%; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 18px; border-radius: 100px; background: var(--oneblue); color: #fff; text-decoration: none; font: 700 15px/18px Montserrat, var(--font); box-shadow: 0 6px 18px rgba(0, 113, 243, .35); }
.tx-get svg { width: 20px; height: 20px; flex: none; }
.tx-get span { display: flex; flex-direction: column; align-items: flex-start; }
.tx-get small { font-weight: 600; opacity: .85; font-size: 11px; line-height: 14px; }
.tx-get:active { transform: scale(.98); }
.tx-call { font-size: 13px; color: var(--label2); text-decoration: none; }
.tx-call b { color: var(--label); }
@media (prefers-reduced-motion: reduce) { .tx-car { animation: none; offset-distance: 70%; } }
@media (min-width: 1024px) { .tx-hero { margin: 0; border-radius: 26px; padding: 28px; } .tx-map { height: 150px; } }
.badges { display: flex; gap: 10px; justify-content: center; }
.badges a { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 100px; background: #000; color: #fff; text-decoration: none; font-size: 13px; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
[tabindex="-1"]:focus { outline: none; }

/* ── sign in: black-and-white line drawings draw themselves in, then drift ── */
.login { position: relative; overflow: hidden; background: var(--bg); padding-top: var(--safe-top); }
.lg-art { position: absolute; left: 0; right: 0; top: 0; height: 49vh; color: var(--label); pointer-events: none; }
.lg-ico { position: absolute; opacity: .85; transform: rotate(var(--r)); translate: calc(var(--px, 0) * var(--z, 1) * 1px) calc(var(--py, 0) * var(--z, 1) * 1px); transition: translate .5s cubic-bezier(.2, .8, .2, 1); animation: lg-float var(--f) ease-in-out calc(var(--d) + 1.6s) infinite alternate; }
.lg-ico * { stroke-dasharray: 1; stroke-dashoffset: 1; animation: lg-draw 1.6s cubic-bezier(.6, .1, .2, 1) var(--d) forwards; }
.lg-pulse { position: absolute; left: -4%; width: 108%; bottom: 0; height: 34px; opacity: .45; }
.lg-pulse path { stroke-dasharray: .22 .78; stroke-dashoffset: 1; animation: lg-pulse 3.2s linear 1.2s infinite; }
@keyframes lg-draw { to { stroke-dashoffset: 0; } }
.lg-ico .lg-beat { transform-box: fill-box; transform-origin: center; animation: lg-beat 3.2s ease-out 2s infinite; }
.lg-ico .lg-bub { stroke-dasharray: none; stroke-dashoffset: 0; opacity: 0; animation: lg-bub 2.6s ease-in calc(1.8s + var(--b, 0s)) infinite; }
.lg-ico .lg-rung { transform-box: fill-box; transform-origin: center; animation: lg-draw 1.6s cubic-bezier(.6, .1, .2, 1) var(--d) forwards, lg-twist 2.4s ease-in-out calc(var(--d) + 1.6s + var(--t, 0s)) infinite; }
@keyframes lg-beat { 0%, 30%, 100% { transform: none; } 8% { transform: scale(1.16); } 14% { transform: scale(.97); } 20% { transform: scale(1.09); } }
@keyframes lg-bub { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 80% { opacity: .8; } 100% { opacity: 0; transform: translateY(-7px); } }
@keyframes lg-twist { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.15); } }
.lg-dot { position: absolute; bottom: -10px; border: 1px solid currentColor; border-radius: 50%; opacity: 0; animation: lg-rise var(--du) linear var(--dl) infinite; }
@keyframes lg-rise { 0% { opacity: 0; transform: translate(0, 0); } 12% { opacity: .22; } 70% { opacity: .16; } 100% { opacity: 0; transform: translate(var(--sw), -52vh); } }
.lg-brand .lg-wm { animation: lg-in .9s cubic-bezier(.2, .8, .2, 1) .9s both; }
.lg-brand p { animation: lg-in .9s cubic-bezier(.2, .8, .2, 1) 1.1s both; }
.lg-form { animation: lg-in .9s cubic-bezier(.2, .8, .2, 1) 1.3s both; }
@keyframes lg-in { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.lg-still .lg-brand .lg-wm, .lg-still .lg-brand p, .lg-still .lg-form, .lg-still .lg-get { animation: none; opacity: 1; transform: none; }
.lg-still .lg-ico * { animation: none; stroke-dashoffset: 0; }
.lg-still .lg-ico .lg-beat { animation: lg-beat 3.2s ease-out infinite; }
.lg-still .lg-ico .lg-bub { animation: lg-bub 2.6s ease-in var(--b, 0s) infinite; }
.lg-still .lg-ico .lg-rung { animation: lg-twist 2.4s ease-in-out var(--t, 0s) infinite; }
@keyframes lg-float { from { transform: rotate(var(--r)) translateY(0); } to { transform: rotate(calc(var(--r) + 4deg)) translateY(-8px); } }
@keyframes lg-pulse { to { stroke-dashoffset: -1; } }
.lg-brand { position: relative; margin-top: 50vh; display: flex; flex-direction: column; gap: 10px; }
.lg-brand .wm { height: 46px; }
.lg-brand p { font-size: 17px; line-height: 22px; color: var(--label2); max-width: 320px; }
.lg-form { position: relative; display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }
.lg-get { position: absolute; z-index: 2; top: calc(var(--safe-top) + 12px); right: 16px; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px 0 9px; border-radius: 999px;
  background: var(--label); color: var(--bg); font-size: 15px; font-weight: 600; letter-spacing: -.2px; box-shadow: 0 6px 20px rgba(0,0,0,.14);
  opacity: 0; transform: translateY(-10px) scale(.96); animation: lg-get-in .6s cubic-bezier(.2, .9, .3, 1.2) 1.5s forwards; -webkit-tap-highlight-color: transparent; }
.lg-get:active { transform: scale(.95); transition: transform .1s; }
.lg-get::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 1.5px solid var(--label); opacity: 0; animation: lg-ring 3.6s ease-out 2.4s infinite; pointer-events: none; }
.lg-get-ico { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--bg) 16%, transparent); overflow: hidden; }
.lg-get-ico svg { width: 16px; height: 16px; }
.lg-arrow { animation: lg-drop 3.6s cubic-bezier(.5, 0, .3, 1) 2.2s infinite; }
.lg-tray { animation: lg-tray 3.6s ease-out 2.2s infinite; transform-origin: 12px 18px; }
@keyframes lg-get-in { to { opacity: 1; transform: none; } }
@keyframes lg-drop { 0% { transform: translateY(0); opacity: 1; } 22% { transform: translateY(9px); opacity: 0; } 23% { transform: translateY(-11px); opacity: 0; } 42%, 100% { transform: translateY(0); opacity: 1; } }
@keyframes lg-tray { 0%, 16% { transform: none; } 24% { transform: scaleX(1.18) translateY(.6px); } 36%, 100% { transform: none; } }
@keyframes lg-ring { 0% { opacity: .5; transform: scale(1); } 45%, 100% { opacity: 0; transform: scale(1.22, 1.5); } }
.lg-about { align-self: center; font-size: 13px; color: var(--label3, var(--label2)); text-decoration: none; margin-top: -6px; padding-bottom: 6px; }
.about { gap: 10px; }
.about p { font-size: 15px; line-height: 21px; color: var(--label2); }
.about h3 { font-size: 17px; line-height: 22px; font-weight: 600; margin-top: 8px; }
.lg-link { align-self: center; min-height: 36px; font-size: 15px; font-weight: 600; color: var(--label); margin-top: -2px; }
.lg-head { display: none; }
.lg-skip { min-height: 44px; font-size: 15px; color: var(--label2); text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .lg-dot, .lg-brand .lg-wm, .lg-brand p, .lg-form, .lg-ico .lg-beat, .lg-ico .lg-bub, .lg-ico .lg-rung { animation: none !important; opacity: 1; } .lg-dot { display: none; } .lg-get { animation: none; opacity: 1; transform: none; } .lg-get::after, .lg-arrow, .lg-tray { animation: none; } .lg-ico *, .lg-pulse path { animation: none; stroke-dashoffset: 0; stroke-dasharray: none; } .lg-ico { animation: none; } }
@media (max-height: 700px) { .lg-art { height: 39vh; } .lg-brand { margin-top: 40vh; } }

/* course / specialty picker rows */
.pickrow { text-align: left; width: 100%; }
.pickrow .tick { color: var(--label); display: grid; place-items: center; width: 22px; }
.pickrow[aria-pressed="true"] .main { font-weight: 600; }

/* student board */
.bgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
@media (min-width: 640px) { .bgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bcard { display: flex; flex-direction: column; gap: 3px; text-decoration: none; color: var(--label); min-width: 0; }
.bcard .bph { position: relative; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: var(--surface); display: grid; place-items: center; color: var(--label3); margin-bottom: 5px; box-shadow: inset 0 0 0 .5px var(--sep, rgba(0,0,0,.08)); }
.bcard .bph img { width: 100%; height: 100%; object-fit: cover; }
.bcard .bph svg { width: 34px; height: 34px; }
.bcard .bph i { position: absolute; left: 8px; top: 8px; font-style: normal; font-size: 12px; font-weight: 600; background: var(--label); color: var(--bg); padding: 3px 8px; border-radius: 999px; }
.bcard.done { opacity: .55; }
.bcard b { font-size: 15px; line-height: 20px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bcard small { font-size: 13px; line-height: 17px; color: var(--label2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bcard .price { color: var(--label); font-weight: 600; }
.lphoto { width: 100%; max-height: 62vh; object-fit: cover; border-radius: 22px; margin-top: 10px; background: var(--surface); }
.phpick { display: block; margin-top: 12px; border-radius: 22px; overflow: hidden; background: var(--surface); cursor: pointer; }
.phpick > span { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 16px; color: var(--label2); text-align: center; }
.phpick > span b { color: var(--label); font-size: 17px; font-weight: 600; }
.phpick > span small { font-size: 13px; }
.phpick img { width: 100%; max-height: 300px; object-fit: cover; display: block; }
.btn.wa { background: #25D366; color: #fff; }
.btn.wa svg { width: 22px; height: 22px; }
.tile.wa-tile { background: #25D366 !important; color: #fff; }

/* all-day: holidays, vacations, exam sessions */
.allday { display: grid; gap: 2px; padding: 4px 0; border-bottom: .5px solid var(--sep, rgba(0,0,0,.1)); }
.allday .adl { font-size: 10px; color: var(--label3); align-self: center; text-align: right; padding-right: 6px; }
.allday > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.adchip { display: block; width: 100%; text-align: left; font-size: 12px; font-weight: 600; line-height: 18px; padding: 1px 6px; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  --c: #8E8E93; background: color-mix(in srgb, var(--c) 17%, var(--surface)); color: color-mix(in srgb, var(--c) 62%, var(--label)); }
.adchip.holiday, .adbar.holiday { --c: #FF3B30; }
.adchip.vacation, .adbar.vacation { --c: #34C759; }
.adchip.session, .adbar.session { --c: #5856D6; }
.adchip.semester, .adbar.semester { --c: #007AFF; }
.adbar { background: var(--c, #8E8E93); }
.month button.ad-vacation { background: color-mix(in srgb, #34C759 10%, transparent); }
.month button.ad-holiday { background: color-mix(in srgb, #FF3B30 10%, transparent); }
.month button.ad-session { background: color-mix(in srgb, #5856D6 8%, transparent); }

/* "Brace yourselves" — exams are coming */
.brace { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--surface); border-radius: 22px; padding: 14px 18px 18px; margin-top: 12px; color: var(--label); }
.brace .brace-art { width: 200px; height: auto; }
.brace .snow { animation: brace-snow 4s ease-in-out infinite alternate; }
.brace b { font-size: 22px; line-height: 26px; letter-spacing: -.3px; text-transform: uppercase; font-weight: 800; margin-top: 4px; }
.brace span { font-size: 15px; line-height: 20px; color: var(--label2); margin-top: 2px; }
.brace-x { position: absolute; right: 10px; top: 10px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--label3); background: var(--fill, rgba(120,120,128,.12)); }
.brace-x svg { width: 16px; height: 16px; }
@keyframes brace-snow { from { transform: translateY(-3px); } to { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .brace .snow { animation: none; } }
.grade { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; font-weight: 700; background: var(--fill, rgba(120,120,128,.12)); color: var(--label); flex-shrink: 0; }
.grade.g6 { background: var(--label); color: var(--bg); }
.grade.g2 { background: color-mix(in srgb, #FF3B30 18%, transparent); color: var(--red-text); }

select.plain { border: 0; background: transparent; font: inherit; color: var(--label2); text-align: right; text-align-last: right; -webkit-appearance: none; appearance: none; padding-right: 2px; flex-grow: 1; }

/* ───────────── desktop: a real website with a sidebar ───────────── */
#side { display: none; }
@media (min-width: 1024px) {
  body:not(.bare) #side { display: flex; flex-direction: column; position: fixed; left: 0; top: 0; bottom: 0; width: 248px; padding: 22px 14px 18px; z-index: 30;
    background: var(--surface); border-right: .5px solid var(--sep); overflow-y: auto; }
  body:not(.bare) #app { max-width: none; margin: 0 0 0 248px; }
  body:not(.bare) .screen { max-width: 760px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
  body:not(.bare) .nav { margin: 0 -32px; padding-left: 24px; padding-right: 24px; }
  body:not(.bare) .nav a[href="#/menu"] { visibility: hidden; }
  body:not(.bare) .sheet, body:not(.bare) .cta-bar { left: 248px; }
  body:not(.bare) .lt { font-size: 40px; line-height: 46px; }
  /* wide screens: calendar, boards, group */
  body:not(.bare) .screen:has(#tgrid), body:not(.bare) .screen:has(.month), body:not(.bare) .screen:has(.bgrid), body:not(.bare) .screen.group-screen { max-width: 1180px; }
  .bgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .side-wm { display: block; padding: 4px 10px 22px; color: var(--label); }
  .side-wm .wm { height: 30px; }
  .side-nav { display: flex; flex-direction: column; gap: 2px; }
  .side-nav a, .side-install, .side-me { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; color: var(--label); text-decoration: none; font-size: 15px; font-weight: 500; }
  .side-nav a svg, .side-install svg { width: 20px; height: 20px; color: var(--label2); flex-shrink: 0; }
  .side-nav a:hover, .side-install:hover, .side-me:hover { background: var(--fill, rgba(120,120,128,.12)); }
  .side-nav a.on { background: var(--label); color: var(--bg); }
  .side-nav a.on svg { color: var(--bg); }
  .side-install { width: 100%; margin-bottom: 8px; color: var(--label2); }
  .side-me { border-top: .5px solid var(--sep); border-radius: 0 0 10px 10px; padding-top: 14px; min-width: 0; }
  .side-me.on { background: var(--fill, rgba(120,120,128,.12)); }
  .side-me small { display: block; font-size: 12px; color: var(--label2); font-weight: 400; }
  .side-me b { display: block; font-size: 15px; font-weight: 600; }
  /* sign-in and first steps: centred card on a calm background */
  body.bare #app { max-width: 480px; }
  .sheet { border-radius: 26px; bottom: 24px; max-width: 520px; }
}
@media (min-width: 1024px) and (hover: hover) { .ev:hover { filter: brightness(.97); } .bcard:hover .bph { filter: brightness(.96); } }
@media (min-width: 1024px) { .gate { max-width: 480px; margin-left: auto; margin-right: auto; width: 100%; } .group-screen .gsticky, .group-screen #gbody { max-width: 860px; margin-left: auto; margin-right: auto; width: 100%; } }

/* the MU HUB wordmark is wider than the old one: never let it push the page sideways */
.wm { max-width: 100%; }
.lg-brand .wm { height: auto; width: min(100%, 230px); aspect-ratio: 403.8 / 105; }
.hero-wm .wm { height: auto; width: min(100%, 170px); aspect-ratio: 403.8 / 105; }
html, body { overflow-x: clip; overscroll-behavior-x: none; max-width: 100%; }
/* no page ever moves sideways: anything too wide is clipped by its screen, and fields are big enough that iPhones don't zoom in on them */
#app, .screen { max-width: 100%; overflow-x: clip; }
input, select, textarea { font-size: max(16px, 1em); }

/* 3D campus map */
.campus-screen { padding-bottom: 0; }
.cmap { position: relative; flex-grow: 1; margin: 0 -16px; min-height: calc(100dvh - 48px - var(--safe-top)); overflow: hidden; touch-action: none; }
.cmap canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
.cmap canvas:active { cursor: grabbing; }
.clabels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.clabel { position: absolute; left: 0; top: 0; font-size: 11px; font-weight: 600; line-height: 14px; white-space: nowrap; translate: -50% -100%; padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.clabel.b { font-size: 12px; }
.clabel.on { background: var(--label); color: var(--bg) !important; }
.cctl { position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column; gap: 1px; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,.14); }
.cbtn { width: 44px; height: 44px; display: grid; place-items: center; background: var(--surface); color: var(--label); font-size: 13px; font-weight: 700; }
.cbtn.on { color: #007AFF; }
.cbtn #needle { display: grid; transition: transform .2s; }
.mapanel { position: absolute; left: 12px; right: 12px; bottom: calc(12px + var(--safe-bottom)); }
.cpcard { display: block; width: 100%; text-align: left; background: var(--surface); border-radius: 20px; padding: 14px 16px; box-shadow: 0 6px 24px rgba(0,0,0,.14); color: var(--label); }
.cpcard b { font-size: 17px; font-weight: 600; display: block; }
.cpcard small { font-size: 13px; color: var(--label2); display: block; margin-top: 2px; }
.csearch { display: flex; align-items: center; gap: 10px; color: var(--label2); font-size: 17px; }
@media (min-width: 1024px) { body:not(.bare) .screen.campus-screen { max-width: none; } body:not(.bare) .cmap { margin: 0 -32px; } .mapanel { left: auto; width: 380px; } }

.invite-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; margin-top: 18px; }
.invite-hero .avatar.lg { width: 72px; height: 72px; font-size: 28px; }
.invite-hero h1 { font-size: 26px; line-height: 31px; font-weight: 700; letter-spacing: -.4px; max-width: 320px; }
.invite-hero p { font-size: 15px; color: var(--label2); }

/* Start a ride: live flight list */
.flsug, .flnear { margin-top: 8px; }
.cell.flrow { width: 100%; text-align: left; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; }
.cell.flrow:active { background: var(--fill3, rgba(120,120,128,.12)); }
.fltime { width: 46px; flex: none; font-size: 17px; font-weight: 600; color: var(--label); display: flex; flex-direction: column; line-height: 20px; }
.fltime small { font-size: 12px; font-weight: 500; color: var(--orange, #FF9500); }
.flst { font-size: 12px; color: var(--label2); max-width: 90px; text-align: right; flex: none; }
.carwrap svg { display: block; height: auto; }

/* ride: pick-up order */
.cell.stop { gap: 12px; }
.stopn { width: 26px; height: 26px; flex: none; border-radius: 13px; background: var(--label); color: var(--bg, #fff); display: grid; place-items: center; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cell.stop .main small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.stoptime { position: relative; width: 64px; flex: none; text-align: center; font-size: 17px; font-variant-numeric: tabular-nums; background: var(--fill); border-radius: 8px; padding: 5px 0; color: var(--label); cursor: pointer; }
.stoptime input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.updown { display: flex; flex-direction: column; gap: 2px; flex: none; }
.updown button { width: 30px; height: 22px; border-radius: 6px; background: var(--fill); color: var(--label); display: grid; place-items: center; }
.updown button svg { width: 12px; height: 12px; }
.updown button:first-child svg { transform: rotate(-90deg); }
.updown button:last-child svg { transform: rotate(90deg); }
.updown button:disabled { opacity: .3; }
.card.proposal { margin-top: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.card.proposal ol { margin: 0; padding-left: 20px; font-size: 15px; line-height: 22px; }

/* map: chips, attribution, HEI label */
.cchips { position: absolute; left: 12px; right: 68px; top: 12px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.cchips::-webkit-scrollbar { display: none; }
.cchip { flex: none; height: 32px; padding: 0 14px; border-radius: 16px; background: var(--surface); color: var(--label); font-size: 14px; font-weight: 600; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.cchip:active { opacity: .7; }
.cattr { position: absolute; right: 8px; bottom: calc(2px + var(--safe-bottom)); font-size: 10px; color: var(--label3); pointer-events: none; margin: 0; }
.mapanel { bottom: calc(18px + var(--safe-bottom)); }
.clabel.hei { background: #FF9500; color: #fff !important; }

/* notifications */
.navbtn.bell { position: relative; }
.bdg { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #FF3B30; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--bg); font-variant-numeric: tabular-nums; }
.bdg[hidden] { display: none; }
.bdg.side { position: static; margin-left: auto; box-shadow: none; }
.cell.notice { align-items: flex-start; }
.cell.notice .main small.when { color: var(--label3); font-size: 12px; margin-top: 2px; }
.cell.notice.new .main { font-weight: 600; }
.cell.notice .dot { width: 9px; height: 9px; border-radius: 5px; background: #007AFF; flex: none; margin-top: 8px; }
/* passenger form */
.addrsug .list { margin-top: 6px; }
.addrsug .osm { font-size: 11px; color: var(--label3); margin: 4px 4px 0; text-align: right; }
.carlegend { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; font-size: 12px; color: var(--label2); padding: 4px 0 6px; }
.carlegend span { display: inline-flex; align-items: center; gap: 5px; }
.carlegend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.carlegend i.free { background: var(--surface); border: 1.5px solid var(--label3); }
.caroverflow { text-align: center; color: var(--red-text, #FF3B30); font-size: 13px; font-weight: 600; margin: 4px 0 0; }
.carwrap { flex-direction: column; align-items: center; }
/* walk or taxi advice */
.advice { border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; background: var(--surface); }
.advice b { font-size: 17px; display: block; }
.advice small { font-size: 14px; color: var(--label2); display: block; margin-top: 2px; line-height: 19px; }
.advice.taxi { box-shadow: inset 4px 0 0 #FF9500; }
.advice.walk { box-shadow: inset 4px 0 0 #34C759; }

/* guide: place cards */
.pscroll { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 2px 16px 8px; scrollbar-width: none; }
.pscroll::-webkit-scrollbar { display: none; }
.pscroll .pcard { flex: 0 0 78%; max-width: 300px; scroll-snap-align: start; }
.pcard { background: var(--surface); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.pc-photo { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #E9EEF6, #D6DEEA); overflow: hidden; }
.pcard.wide .pc-photo { aspect-ratio: 2 / 1; }
.pc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-photo.none { display: grid; place-items: center; color: #8E8E93; }
.pc-photo.none span svg { width: 34px; height: 34px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pc-photo { background: linear-gradient(135deg, #2C2C2E, #1C1C1E); } }
:root[data-theme="dark"] .pc-photo { background: linear-gradient(135deg, #2C2C2E, #1C1C1E); }
.pc-photo .credit { position: absolute; right: 6px; bottom: 5px; font-size: 9px; color: #fff; background: rgba(0,0,0,.45); padding: 1px 6px; border-radius: 6px; }
.pc-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 2px; flex-grow: 1; }
.pc-body b { font-size: 17px; line-height: 22px; }
.pc-body small { font-size: 14px; color: var(--label2); }
.pc-body p { font-size: 15px; line-height: 20px; color: var(--label); margin: 6px 0 0; }
.pc-tag { font-size: 12px; font-weight: 600; color: var(--label2); text-transform: uppercase; letter-spacing: .3px; }
.pc-btns { display: flex; gap: 8px; margin-top: auto; padding-top: 10px; }
.pc-btns .btn.sm:first-child { flex-grow: 1; justify-content: center; }
.callrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; margin-top: 12px; }
.callbtn { display: flex; align-items: center; gap: 10px; background: var(--surface); border-radius: 14px; padding: 10px 12px; color: var(--label); text-decoration: none; }
.callbtn b { display: block; font-size: 16px; }
.callbtn small { display: block; font-size: 12px; color: var(--label2); }
.callbtn.sos { color: #fff; background: #FF3B30; }
.callbtn.sos small { color: rgba(255,255,255,.85); }
.acc details.article { padding: 14px 18px; margin-top: 8px; }
.acc details.article[open] { padding-bottom: 6px; }
.acc details.article[open] summary { margin-bottom: 10px; }
.acc details.article summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.acc details.article summary::-webkit-details-marker { display: none; }
.acc details.article summary::after { content: '+'; font-size: 22px; color: var(--label3); font-weight: 300; }
.acc details.article[open] summary::after { content: '–'; }
.acc details.article summary h3 { margin: 0; }
details.srcs { margin-top: 14px; }
details.srcs summary { font-size: 13px; color: var(--label2); cursor: pointer; padding: 6px 4px; }
.pc-photo .ph-ic { position: absolute; inset: 0; display: grid; place-items: center; color: #8E8E93; }
.pc-photo .ph-ic svg { width: 34px; height: 34px; }
.pc-photo img { position: relative; }
.pc-photo.none .credit { display: none; }
.carlegend i.taken { background: var(--label); }
.carlegend i.drv { background: #FF9500; }

.chat-day.sys { font-weight: 500; font-style: normal; color: var(--label3); }
.chat.ridechat { min-height: calc(100dvh - 230px - var(--safe-top) - var(--safe-bottom)); justify-content: flex-end; }
.sharegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sharegrid .btn { justify-content: center; }
.sharegrid #shs { grid-column: 1 / -1; }
.msg.me small { text-align: right; margin: 0 44px 2px 12px; }
.msg.me .row { justify-content: flex-end; }
.card.handover { margin-top: 12px; padding: 14px 16px; box-shadow: inset 4px 0 0 #FF9500; display: flex; flex-direction: column; gap: 6px; }
.card.handover b { font-size: 17px; }
.card.handover p { font-size: 15px; line-height: 20px; color: var(--label2); margin: 0; }
.pc-map { position: absolute; inset: 0; overflow: hidden; background: #EDEAE4; }
.pc-map img { position: absolute; width: 256px; height: 256px; max-width: none; }
.pc-pin { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -22px 0 0 -11px; background: #FF3B30; border: 3px solid #fff; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.pc-photo.icon { display: grid; place-items: center; }
.pc-photo.icon.pharmacy { background: linear-gradient(135deg, #E3F5E8, #C8EBD2); color: #1F9D49; }
.pc-photo.icon.cross { background: linear-gradient(135deg, #FDE7E6, #F9CFCC); color: #E5352B; }
.pc-photo.icon.bank { background: linear-gradient(135deg, #E6EEFB, #CFDDF5); color: #2F5DB3; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pc-photo.icon { filter: brightness(.55) saturate(1.2); } }
:root[data-theme="dark"] .pc-photo.icon { filter: brightness(.55) saturate(1.2); }
.pc-photo.icon.building, .pc-photo.icon.passport { background: linear-gradient(135deg, #ECEDF1, #D9DCE3); color: #3A3F4A; }
.pc-photo.icon:not(.pharmacy):not(.cross):not(.bank):not(.building):not(.passport) { background: linear-gradient(135deg, #ECEDF1, #D9DCE3); color: #6B717C; }

/* ═════════════ Menu: console-grade cards ═════════════ */
.hx { --rx: 0deg; --ry: 0deg; --px: 0; --py: 0; position: relative; display: block; border-radius: 26px; overflow: hidden; isolation: isolate; color: #fff; text-decoration: none; -webkit-tap-highlight-color: transparent;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .6s var(--spring), box-shadow .3s; will-change: transform;
  box-shadow: 0 22px 40px -22px rgba(10, 14, 40, .55), 0 2px 6px rgba(0, 0, 0, .12); animation: hxIn .9s var(--spring) both; animation-delay: calc(var(--i, 0) * 55ms); background: #070b18; }
.hx.tilt { transition: transform .1s linear, box-shadow .3s; }
.hx:active { transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) scale(.975); }
.hx:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px #fff, 0 0 0 7px rgba(0, 0, 0, .3), 0 26px 50px -20px rgba(10, 14, 40, .7); }
.hx::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 9; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .22); }
.hx-in { position: absolute; inset: 0; }
.hx-in::before { content: ""; position: absolute; z-index: 7; top: -20%; bottom: -20%; width: 45%; left: -60%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22) 45%, rgba(255, 255, 255, .05) 55%, transparent); transform: skewX(-18deg); animation: hxSheen 1.4s cubic-bezier(.3, .6, .2, 1) both; animation-delay: calc(.45s + var(--i, 0) * 90ms); }
.hx-glare { position: absolute; inset: 0; z-index: 8; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 50%); mix-blend-mode: overlay; }
.hx.tilt .hx-glare { opacity: 1; }
.hx:not(.run) .hx-in *, .hx:not(.run) .hx-in::before { animation-play-state: paused !important; }
.hx .cap { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 6; display: flex; flex-direction: column; gap: 4px; text-shadow: 0 1px 14px rgba(0, 0, 0, .45); transform: translate3d(calc(var(--px) * -6px), calc(var(--py) * -4px), 0); transition: transform .6s var(--spring); }
.hx.tilt .cap { transition: transform .1s linear; }
.hx .cap b { font: 800 24px/1.05 Montserrat, system-ui, sans-serif; letter-spacing: -.025em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hx .cap small { font-size: 13px; line-height: 17px; font-weight: 500; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx .kick { font: 700 11px/14px system-ui, -apple-system, sans-serif; letter-spacing: .12em; text-transform: uppercase; opacity: .92; display: flex; align-items: center; gap: 6px; }
.hx .now { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border-radius: 5px; background: #FF3B30; letter-spacing: .08em; }
.hx .now i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: pulse 1.4s infinite; }
.hx .scrim { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(to top, rgba(2, 6, 18, .82), rgba(2, 6, 18, .2) 48%, transparent 70%); }
.hx.w { grid-column: span 2; }
.hx.sq { aspect-ratio: 1 / 1.08; }
.hx.sq .cap b { font-size: 20px; }
.hx.sq .cap { left: 14px; right: 14px; bottom: 13px; }
@keyframes hxIn { from { opacity: 0; transform: perspective(900px) translate3d(0, 34px, -60px) rotateX(16deg); } to { opacity: 1; } }
@keyframes hxSheen { from { left: -60%; } to { left: 130%; } }

/* Super Cup — night stadium */
.hx.cup { height: 280px; background: #020812; }
.hx.cup .sky { position: absolute; inset: 0; background: radial-gradient(130% 80% at 50% 108%, #1f56e0 0%, #0b2a74 30%, #061738 52%, #020812 78%); }
.hx.cup .crowd { position: absolute; left: -6%; right: -6%; top: 30%; height: 70px; background: radial-gradient(circle, rgba(150, 180, 255, .4) 0 1.1px, transparent 1.6px) 0 0 / 5px 4px, radial-gradient(circle, rgba(255, 255, 255, .18) 0 1px, transparent 1.5px) 2px 2px / 7px 5px;
  -webkit-mask-image: linear-gradient(transparent, #000 35%, #000 75%, transparent); mask-image: linear-gradient(transparent, #000 35%, #000 75%, transparent); transform: translate3d(calc(var(--px) * -6px), 0, 0); }
.hx.cup .flashes i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 2px #fff; opacity: 0; animation: flash 4s infinite; }
.hx.cup .beam { position: absolute; top: -10px; width: 300px; height: 330px; margin-left: -150px; pointer-events: none; transform-origin: 50% 0; mix-blend-mode: screen; filter: blur(5px);
  background: conic-gradient(from 160deg at 50% 0%, transparent 0deg, rgba(190, 215, 255, .5) 17deg, rgba(220, 235, 255, .6) 20deg, rgba(190, 215, 255, .5) 23deg, transparent 40deg, transparent 360deg); opacity: 0;
  animation: lightsOn 1.3s ease-out .35s forwards, beamSway 9s ease-in-out 1.6s infinite alternate; }
.hx.cup .beam.l { left: 14%; --a: -30deg; transform: rotate(-30deg); }
.hx.cup .beam.r { left: 86%; --a: 30deg; transform: rotate(30deg); animation-delay: .55s, 1.6s; animation-direction: normal, alternate-reverse; }
.hx.cup .lamp { position: absolute; top: 2px; width: 46px; height: 16px; margin-left: -23px; border-radius: 3px; background: radial-gradient(circle, #fff 0 1.3px, rgba(255, 255, 255, .25) 1.8px, transparent 2.2px) 0 0 / 6px 6px, #1b2b4a; box-shadow: 0 0 0 1px #2a3d63; opacity: .4; animation: lampOn 1.3s ease-out .35s forwards; }
.hx.cup .lamp.l { left: 14%; transform: rotate(-8deg); } .cup .lamp.r { left: 86%; transform: rotate(8deg); animation-delay: .55s; }
.hx.cup .pitchw { position: absolute; left: 50%; bottom: -8px; width: 170%; height: 210px; margin-left: -85%; perspective: 340px; transform: translate3d(calc(var(--px) * -14px), 0, 0); transition: transform .6s var(--spring); }
.hx.tilt .pitchw { transition: transform .1s linear; }
.hx.cup .pitch { position: absolute; inset: 0; transform: rotateX(62deg); transform-origin: 50% 100%; overflow: hidden; border-radius: 4px;
  background: repeating-linear-gradient(90deg, #1f8f3e 0 6.25%, #197c35 6.25% 12.5%); box-shadow: 0 0 60px rgba(40, 200, 90, .25); }
.hx.cup .pitch svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hx.cup .pool { position: absolute; inset: 0; background: radial-gradient(40% 70% at 30% 40%, rgba(255, 255, 255, .22), transparent 70%), radial-gradient(40% 70% at 70% 40%, rgba(255, 255, 255, .22), transparent 70%); mix-blend-mode: soft-light; }
.hx.cup .ball { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #c9d1dd 60%, #6b7686); box-shadow: 0 0 8px rgba(255, 255, 255, .7); animation: ball 6s cubic-bezier(.45, 0, .55, 1) infinite; }
.hx.cup .scrim { background: linear-gradient(to top, rgba(2, 8, 18, .92), rgba(2, 8, 18, .35) 45%, transparent 68%), linear-gradient(90deg, rgba(2, 8, 18, .5), transparent 60%); }
.hx.cup .bug { position: absolute; left: 14px; top: 30px; z-index: 6; display: flex; align-items: stretch; height: 26px; font: 800 12px/26px Montserrat, system-ui; letter-spacing: .02em; opacity: 0; transform: translateX(-12px); transition: opacity .5s, transform .6s var(--spring);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .5)); }
.hx.cup .bug.in { opacity: 1; transform: none; }
.hx.cup .bug > span { padding: 0 8px; background: rgba(6, 14, 34, .88); }
.hx.cup .bug > span.mw { background: #2B5BFF; font-size: 10px; letter-spacing: .1em; border-radius: 4px 0 0 4px; }
.hx.cup .bug .tm { position: relative; min-width: 40px; text-align: center; }
.hx.cup .bug .tm::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 3px; height: 2px; border-radius: 1px; background: var(--tc, #2B5BFF); }
.hx.cup .bug .sc { background: #fff; color: #020812; min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; }
.hx.cup .bug .sc i { font-style: normal; margin: 0 3px; opacity: .5; }
.hx.cup .bug .lv, .hx.cup .bug .ko { background: rgba(6, 14, 34, .88); font-size: 10px; letter-spacing: .08em; border-radius: 0 4px 4px 0; display: flex; align-items: center; gap: 5px; }
.hx.cup .bug .lv { background: #FF3B30; } .cup .bug .lv i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: pulse 1.2s infinite; }
.hx.cup .futw { position: absolute; right: 16px; top: 68px; z-index: 6; width: 98px; height: 138px; filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .6)) drop-shadow(0 0 18px rgba(255, 210, 110, .25)); opacity: 0; transition: opacity .6s;
  transform: translate3d(calc(var(--px) * 14px), calc(var(--py) * 10px), 0) rotate(5deg); }
.hx.cup .futw.in { opacity: 1; animation: futIn 1s var(--spring) both, futFloat 6s ease-in-out 1s infinite; }
.hx.cup .fut { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: 12px 8px 10px; color: #3b2a07; overflow: hidden;
  clip-path: polygon(0 9%, 13% 0, 31% 3%, 50% 0, 69% 3%, 87% 0, 100% 9%, 100% 88%, 50% 100%, 0 88%);
  background: linear-gradient(135deg, #fbe7a2 0%, #d8ad4c 28%, #fff4c9 46%, #c99a36 60%, #f4d683 80%, #b98a2b 100%); }
.hx.cup .fut::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 8px, rgba(255, 255, 255, .12) 8px 9px); }
.hx.cup .fut::after { content: ""; position: absolute; top: -30%; bottom: -30%; width: 40%; left: -70%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent); transform: skewX(-20deg); animation: futShine 4.5s ease-in-out 1.6s infinite; }
.hx.cup .fut .rt { position: absolute; left: 10px; top: 14px; font: 400 24px/1 'Archivo Black', sans-serif; display: flex; flex-direction: column; align-items: center; }
.hx.cup .fut .rt small { font: 800 8px/1.4 Montserrat, sans-serif; letter-spacing: .08em; }
.hx.cup .fut .pos { position: absolute; left: 10px; top: 50px; font: 800 9px/1 Montserrat, sans-serif; letter-spacing: .06em; }
.hx.cup .fut .crest { width: 54px; height: 54px; margin: 8px 0 0 18px; display: flex; align-items: center; justify-content: center; }
.hx.cup .fut .crest img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .3)); }
.hx.cup .fut b { margin-top: 8px; padding-top: 5px; border-top: 1px solid rgba(59, 42, 7, .35); font: 800 10px/1.1 Montserrat, sans-serif; text-transform: uppercase; letter-spacing: .02em; max-width: 92px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 1; }
.hx.cup .fut .st { display: flex; gap: 7px; margin-top: 5px; z-index: 1; }
.hx.cup .fut .st i { font: 700 8px/1 Montserrat, sans-serif; font-style: normal; display: flex; flex-direction: column; align-items: center; gap: 1px; opacity: .85; }
.hx.cup .fut .st i b { all: unset; font: 800 11px/1 Montserrat, sans-serif; }
.hx.cup .cap { bottom: 18px; right: 124px; }
.hx.cup .cap .cupwm { display: flex; flex-direction: column; overflow: visible; -webkit-line-clamp: unset; padding-top: 4px; font: 400 44px/.95 'Archivo Black', Impact, sans-serif; letter-spacing: -.01em; text-shadow: none; }
.hx.cup .cap .cupwm > span { display: block; color: #fff; }
.hx.cup .cap .cupwm > span + span { color: #2B5BFF; }
@keyframes lightsOn { 0% { opacity: 0; } 10% { opacity: 1; } 16% { opacity: .15; } 24% { opacity: 1; } 30% { opacity: .5; } 40%, 100% { opacity: 1; } }
@keyframes lampOn { 0% { opacity: .4; } 10% { opacity: 1; box-shadow: 0 0 0 1px #2a3d63, 0 0 30px 10px rgba(210, 228, 255, .9); } 16% { opacity: .5; } 24%, 100% { opacity: 1; box-shadow: 0 0 0 1px #2a3d63, 0 0 22px 6px rgba(210, 228, 255, .7); } }
@keyframes beamSway { from { transform: rotate(calc(var(--a) - 3deg)); } to { transform: rotate(calc(var(--a) + 3deg)); } }
@keyframes flash { 0%, 92%, 100% { opacity: 0; } 94% { opacity: 1; } }
@keyframes ball { 0% { left: 30%; top: 60%; } 25% { left: 52%; top: 35%; } 50% { left: 72%; top: 58%; } 75% { left: 45%; top: 70%; } 100% { left: 30%; top: 60%; } }
@keyframes futIn { from { opacity: 0; transform: translate3d(40px, -10px, 0) rotate(18deg) scale(.7); } }
@keyframes futFloat { 50% { margin-top: -6px; } }
@keyframes futShine { 0% { left: -70%; } 40%, 100% { left: 140%; } }

@media (prefers-reduced-motion: reduce) {
  .hx, .hx *, .hx-in::before { animation: none !important; transition: none !important; }
  .hx.cup .beam, .hx.cup .lamp, .hx.cup .futw, .hx.cup .bug { opacity: 1; }
}

.hx.cup .pitch::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30%; background: linear-gradient(#061738, transparent); }
.hx .cap > * { flex-shrink: 0; }
.cplus { position: absolute; left: 0; top: 0; translate: -50% -100%; pointer-events: auto; width: 26px; height: 26px; border-radius: 50%; background: var(--bg); color: #007AFF; font-size: 20px; font-weight: 500; line-height: 24px; text-align: center; box-shadow: 0 1px 6px rgba(0, 0, 0, .25), inset 0 0 0 1.5px #007AFF; }
.cplus:active { transform: scale(.9); }
/* Set an alarm */
.alarmpick { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px; border-radius: 18px; background: var(--surface); }
.alarmpick > span { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.alarmpick b { font-size: 48px; line-height: 54px; font-weight: 300; letter-spacing: -.02em; }
.alarmpick small { font-size: 13px; color: var(--label2); }
.alarmpick .stepbtn { width: 48px; height: 48px; border-radius: 50%; background: var(--fill); color: var(--label); font-size: 26px; line-height: 48px; }
.alarmpick .stepbtn:active { background: var(--fill2); }
.nowcard[data-nextev] { cursor: pointer; } .nowcard .alarmbtn { margin-top: 10px; width: auto; }
.legendbox { margin: 14px 4px 0; }
.legendbox summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--label2); cursor: pointer; padding: 6px 0; }
.legendbox summary::-webkit-details-marker { display: none; }
.legendbox summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.legendbox[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
.legendbox .dots { display: inline-flex; }
.legendbox .dots i { width: 10px; height: 10px; border-radius: 50%; margin-left: -3px; box-shadow: 0 0 0 1.5px var(--bg); }
.legendbox .dots i:first-child { margin-left: 0; }
.legendbox .legend { margin: 6px 0 0; }
.note.ok { color: var(--green-text, #248A3D); }
.card.rateask { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-left: 4px solid #FF9500; }
.card.rateask span { font-size: 15px; line-height: 20px; color: var(--label2); }
/* Super Cup: one-line scoreboard on top of the menu */
.cupstrip { display: flex; align-items: center; gap: 10px; height: 46px; margin-top: 10px; padding: 0 14px 0 12px; border-radius: 16px; text-decoration: none; color: #fff; position: relative; overflow: hidden;
  background: radial-gradient(120% 140% at 50% 130%, #1f56e0 0%, #0b2a74 35%, #04112b 70%, #020812 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); font: 800 13px/1 Montserrat, system-ui, sans-serif; animation: mcIn .5s var(--spring) both; }
.cupstrip:active { transform: scale(.98); }
.cupstrip .lights { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(40% 120% at 12% -30%, rgba(200, 225, 255, .35), transparent 70%), radial-gradient(40% 120% at 88% -30%, rgba(200, 225, 255, .35), transparent 70%); }
.cupstrip .tag { font: 400 13px/1 'Archivo Black', Impact, sans-serif; letter-spacing: .01em; white-space: nowrap; }
.cupstrip .tag i { font-style: normal; color: #4f7bff; }
.cupstrip .when { margin-left: auto; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #9fb3dc; white-space: nowrap; }
.cupstrip .sb { display: flex; align-items: center; gap: 6px; white-space: nowrap; position: relative; }
.cupstrip .lv + .sb, .cupstrip .tag + .sb { margin-left: auto; }
.cupstrip .sb b { position: relative; padding-bottom: 3px; }
.cupstrip .sb b::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 1px; background: var(--tc, #2B5BFF); }
.cupstrip .sb em { font-style: normal; padding: 4px 6px; border-radius: 5px; background: #fff; color: #020812; font-variant-numeric: tabular-nums; }
.cupstrip .lv { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: 5px; background: #FF3B30; font-size: 10px; letter-spacing: .08em; }
.cupstrip .lv i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: pulse 1.2s infinite; }
@keyframes mcIn { from { opacity: 0; transform: translateY(6px); } }
.mitem .powered-by { display: block; margin-top: 6px; font-size: 11px; line-height: 13px; color: var(--label3); letter-spacing: .02em; }
.mitem .powered-by b { display: inline; font-size: 11px; line-height: 13px; font-weight: 700; color: var(--label2); letter-spacing: .02em; }
.centr { position: absolute; left: 0; top: 0; translate: -50% -50%; width: 22px; height: 22px; border-radius: 50%; background: #34C759; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0, 0, 0, .3); }
.cpcard .btns { flex-wrap: wrap; } .cpcard .btns .btn.sm { white-space: nowrap; }
.declined { color: var(--red-text, #D70015) !important; display: flex; gap: 4px; align-items: flex-start; } .declined svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }
.hx.cup .bug > span.mw.eu { background: #FF6B1A; }
/* route map in a ride */
.routecard { margin-top: 10px; border-radius: 18px; overflow: hidden; background: var(--surface); }
.routemap { height: 230px; background: #E9EEF3; }
.routecap { padding: 10px 14px 12px; font-size: 13px; line-height: 18px; color: var(--label2); display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; }
.routecap b { color: var(--label); font-weight: 600; }
.routecap .linkbtn { color: #007AFF; font-weight: 600; text-decoration: none; background: none; padding: 0; font-size: 13px; }
.rpin { background: none; border: none; }
.rpin b { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: #231F20; color: #fff; font: 700 13px/1 system-ui, sans-serif; box-shadow: 0 0 0 2.5px #fff, 0 2px 6px rgba(0, 0, 0, .35); }
.rpin.me b { background: #007AFF; }
.rpin.hw { white-space: nowrap; }
.rpin.hw > * { vertical-align: middle; }
.rpin.hw { display: inline-flex !important; align-items: center; gap: 5px; padding: 4px 8px 4px 4px; margin: -14px 0 0 -14px; border-radius: 999px; background: #fff; color: #1C1C1E; font: 600 12px/1 system-ui, sans-serif; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
.rpin.hw span { padding: 3px 6px; border-radius: 5px; background: #0A7D3E; color: #fff; font-weight: 800; border: 1.5px solid #fff; outline: 1px solid #0A7D3E; }
.rpin.ap { display: flex !important; align-items: center; justify-content: center; width: 30px !important; height: 30px !important; margin: -15px 0 0 -15px !important; border-radius: 50%; background: #FF9500; color: #fff; box-shadow: 0 0 0 2.5px #fff, 0 2px 6px rgba(0, 0, 0, .35); }
.rpin.ap svg { width: 16px; height: 16px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .routemap .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.88); } }
:root[data-theme="dark"] .routemap .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.88); }
.routemap .leaflet-control-attribution { font-size: 9px; }
.pickmap { position: relative; height: 320px; border-radius: 16px; overflow: hidden; background: #E9EEF3; }
.pickmap #pkmap { position: absolute; inset: 0; }
.pkpin { position: absolute; left: 50%; top: 50%; z-index: 500; transform: translate(-50%, -100%); color: #FF3B30; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.pkpin svg { width: 36px; height: 36px; fill: #FF3B30; stroke: #fff; }
.rpin.ap { width: auto !important; padding: 0 9px 0 7px; gap: 4px; border-radius: 999px !important; }
.rpin.ap em { font: 800 11px/1 system-ui, sans-serif; font-style: normal; }
.langpick { display: flex; justify-content: flex-end; gap: 4px; margin: -12px 0 8px; }
.langpick button { padding: 5px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--label2); background: transparent; }
.langpick button[aria-pressed="true"] { background: var(--fill); color: var(--label); }

/* ── group: photos, videos and files in the chat, the Files tab, invites ── */
.composer .attach { background: none; color: var(--tint); width: 34px; height: 34px; flex-shrink: 0; }
.composer .attach:active { background: var(--fill); }
.upbar { position: sticky; bottom: calc(52px + var(--safe-bottom)); margin: 0 -16px; padding: 7px 16px 9px; background: var(--bar); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); font-size: 13px; color: var(--label2); z-index: 2; }
.upbar i { display: block; height: 3px; border-radius: 2px; background: var(--tint); margin-top: 5px; transition: width .2s; }
.filesbar .upbar, #gbody > .upbar:not(:last-child) { position: static; margin: 10px 0 0; border-radius: 12px; }
.msg .bubble.hasmedia { padding: 3px; overflow: hidden; display: flex; flex-direction: column; }
.msg .bubble.hasmedia .btext { padding: 6px 10px 2px; }
.msg .bubble.hasmedia time { margin: 2px 8px 4px auto; float: none; align-self: flex-end; }
.mthumb { position: relative; display: block; width: min(240px, 62vw); max-height: 320px; border-radius: 16px; overflow: hidden; background: var(--fill); }
.mthumb img, .mthumb video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.playbtn { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(0, 0, 0, .5); color: #fff; display: grid; place-items: center; padding-left: 3px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.playbtn.sm { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
.playbtn.sm svg { width: 18px; height: 18px; }
.msg .bubble.hasfile { display: flex; flex-direction: column; gap: 6px; min-width: 220px; }
.mfile, .mfilecard { display: flex; align-items: center; gap: 10px; text-align: left; }
.mfile b, .mfilecard b { display: block; font-size: 15px; line-height: 19px; font-weight: 600; word-break: break-word; }
.mfile small, .mfilecard small { display: block; font-size: 12px; opacity: .7; margin-top: 1px; }
.ficon { width: 40px; height: 46px; flex-shrink: 0; border-radius: 8px; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .02em; display: inline-flex; align-items: flex-end; justify-content: center; padding-bottom: 7px; clip-path: polygon(0 0, 72% 0, 100% 22%, 100% 100%, 0 100%); }
.ficon svg { margin-bottom: 4px; }
.mfilecard { padding: 14px; }
.filesbar { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.filesbar .seg { flex-grow: 1; min-width: 0; }
.filesbar .seg button { min-width: 0; overflow: hidden; text-overflow: ellipsis; padding: 0 6px; }
.filesbar .fadd { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; background: var(--tint); color: var(--on-tint); display: inline-flex; align-items: center; justify-content: center; }
.filesbar .fadd svg { width: 18px; height: 18px; }
.mgridx { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; margin-top: 12px; border-radius: 14px; overflow: hidden; }
.mcell { position: relative; aspect-ratio: 1; background: var(--fill); overflow: hidden; }
.mcell img, .mcell video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
#flist .list { margin-top: 12px; }
.fcell { gap: 12px; }
.viewer { position: fixed; inset: 0; z-index: 200; background: #000; color: #fff; display: flex; flex-direction: column; opacity: 0; transition: opacity .2s; }
.viewer.on { opacity: 1; }
.vbar { display: flex; align-items: center; gap: 6px; padding: calc(6px + var(--safe-top)) 8px 6px; }
.vbar .vt { flex-grow: 1; min-width: 0; text-align: center; }
.vbar .vt b { display: block; font-size: 15px; font-weight: 600; }
.vbar .vt small { display: block; font-size: 12px; opacity: .65; }
.vbtn { width: 44px; height: 44px; border-radius: 22px; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; text-decoration: none; }
.vbtn:active { background: rgba(255, 255, 255, .15); }
.vbody { flex-grow: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.vbody img, .vbody video { max-width: 100%; max-height: 100%; object-fit: contain; }
.vcap { padding: 10px 16px calc(14px + var(--safe-bottom)); font-size: 16px; line-height: 21px; }
.pc-cam { position: absolute; left: 8px; top: 8px; width: 36px; height: 36px; border-radius: 50%; background: rgba(0, 0, 0, .5); color: #fff; display: grid; place-items: center; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); z-index: 2; }
.pc-cam svg { width: 19px; height: 19px; }
.bsearch { padding: 8px 16px; border-top: .5px solid var(--sep); }
.bsearch input { width: 100%; height: 36px; border-radius: 10px; background: var(--fill); padding: 0 12px; font-size: 17px; }
.bres { margin: 0 !important; border-radius: 0 !important; background: transparent !important; max-height: 340px; overflow-y: auto; }
#bsrch .bsearch { border-top: 0; padding: 0 0 8px; }
#bsrch .bres { border-radius: 14px !important; background: var(--surface) !important; max-height: 55vh; }
.bres .addb .main { color: var(--tint); }
.gate.invite .avatar.lg { align-self: center; }
.gate.invite h1 { font-size: 26px; line-height: 32px; }
.lg-invite { display: flex; gap: 12px; align-items: center; text-align: left; padding: 12px 14px; border-radius: 16px; background: var(--surface); margin-bottom: 10px; }
.lg-invite svg { flex-shrink: 0; color: var(--tint); }
.lg-invite b { display: block; font-size: 15px; line-height: 20px; }
.lg-invite small { display: block; font-size: 13px; line-height: 17px; color: var(--label2); margin-top: 2px; }
.msg .bubble small { margin: 1px 0 0; color: inherit; font-size: 12px; }

.cta-bar .btn.soft { opacity: .55; }
.langpick .lp-ic { display: inline-flex; align-items: center; color: var(--label2); margin-right: 2px; }
.langpick .lp-ic svg { width: 18px; height: 18px; }

/* ── Arabic: right to left ── */
[dir="rtl"] .rtl-flip { transform: scaleX(-1); }
[dir="rtl"] .msg small { margin: 0 12px 2px; }
[dir="rtl"] .msg .bubble { text-align: right; }
[dir="rtl"] .msg .bubble time { float: left; margin-left: 0; margin-right: 8px; }
[dir="rtl"] .pc-photo .credit { right: auto; left: 6px; }
[dir="rtl"] .pc-cam { left: auto; right: 8px; }
[dir="rtl"] .lg-invite, [dir="rtl"] .mfile, [dir="rtl"] .mfilecard { text-align: right; }
[dir="rtl"] input[type="tel"], [dir="rtl"] input[type="email"], [dir="rtl"] .num { direction: ltr; }

/* Super Cup: the scorebug on two rows (always fits), the tournament logo on the right, the live strip on two rows */
.hx.cup .bug { flex-direction: column; align-items: flex-start; height: auto; gap: 4px; max-width: calc(100% - 28px); }
.hx.cup .bug > .row { display: flex; align-items: stretch; height: 26px; }
.hx.cup .bug > .row > span { padding: 0 8px; background: rgba(6, 14, 34, .88); }
.hx.cup .bug > .row > span.mw { background: #2B5BFF; font-size: 10px; letter-spacing: .1em; border-radius: 4px 0 0 4px; }
.hx.cup .bug > .row > span.mw.eu { background: #FF6B1A; }
.hx.cup .bug > .row > span:last-child { border-radius: 0 4px 4px 0; }
.hx.cup .bug > .ko, .hx.cup .bug > .lv { height: 20px; padding: 0 8px; border-radius: 4px; line-height: 20px; }
.hx.cup .cuplogo { position: absolute; right: 18px; top: 92px; z-index: 6; width: 34%; max-width: 150px; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .55)) drop-shadow(0 0 22px rgba(80, 130, 255, .35)); animation: futFloat 6s ease-in-out infinite; }
.hx.cup .cuplogo svg { width: 100%; height: auto; display: block; }
.cupstrip { flex-direction: column; align-items: stretch; height: auto; gap: 7px; padding: 10px 14px; }
.cupstrip .r1 { display: flex; align-items: center; gap: 8px; position: relative; min-width: 0; }
.cupstrip .r1 .when { margin-left: 0; overflow: hidden; text-overflow: ellipsis; }
.cupstrip .r1 .lv { margin-left: auto; }
.cupstrip > .sb { justify-content: center; font: 800 15px/1 Montserrat, system-ui, sans-serif; letter-spacing: .02em; }
.free-note { text-align: center; font-size: 13px; line-height: 18px; color: var(--label2); margin: 10px 0 0; }
.free-note span { display: block; font-size: 11px; letter-spacing: .02em; color: var(--label2); opacity: .85; }
.free-note span b { font-weight: 700; letter-spacing: .04em; }
/* install the app */
.inst .gate { margin-top: 24px; max-width: 420px; margin-inline: auto; }
.inst-lead { font-size: 17px; line-height: 23px; color: var(--label2); }
.inst-steps { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-direction: column; gap: 10px; text-align: start; }
.inst-steps li { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; background: var(--surface); font-size: 16px; line-height: 21px;
  opacity: 0; transform: translateY(8px); animation: inst-in .45s ease calc(.15s + var(--i) * .18s) forwards; }
.inst-n { flex: none; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--tint); color: var(--on-tint); font-weight: 700; }
.inst-n svg { width: 22px; height: 22px; }
.inst-arrow { position: fixed; bottom: calc(env(safe-area-inset-bottom, 0px) + 6px); left: 50%; translate: -50% 0; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--tint); color: var(--on-tint); box-shadow: 0 6px 20px rgba(0,0,0,.2); animation: inst-bob 1.4s ease-in-out infinite; }
.inst-arrow svg { width: 24px; height: 24px; }
@keyframes inst-in { to { opacity: 1; transform: none; } }
@keyframes inst-bob { 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .inst-steps li { animation: none; opacity: 1; transform: none; } .inst-arrow { animation: none; } }
.tbadge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #FF3B30; color: #fff; font-size: 11px; font-weight: 700; vertical-align: 1px; margin-left: 4px; }
.navbtn.txt { font-size: 17px; }
.abtns { display: flex; flex-wrap: wrap; gap: 8px; }
.avatar.md { width: 56px; height: 56px; font-size: 20px; flex-shrink: 0; }
.verified { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: #34C759; font-weight: 600; }

/* airport rides: time in two taps */
.tsheet .tbig { font: 700 40px/1 var(--font); font-variant-numeric: tabular-nums; text-align: center; padding: 2px 0 4px; letter-spacing: -.02em; }
.tsheet .tbig .muted { color: var(--label3); font-size: 17px; font-weight: 500; letter-spacing: 0; }
.tsheet .tbig .muted:not(:first-child) { font-size: inherit; font-weight: inherit; }
.tpart { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 8px; margin-top: 8px; }
.tpart small { font-size: 13px; color: var(--label2); }
.thours, .tmins { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.tmins { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.thours button, .tmins button { height: 44px; border-radius: 12px; background: var(--fill); color: var(--label); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; transition: transform .1s, background .15s; }
.tmins button { height: 52px; font-size: 17px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--sep); }
.thours button.on, .tmins button.on { background: var(--tint); color: var(--on-tint); box-shadow: none; }
.thours button:active, .tmins button:active { transform: scale(.94); }
.thours button[disabled], .tmins button[disabled] { opacity: .28; pointer-events: none; }

/* menu: compact so most of it fits on one phone screen */
.menu .mlist { gap: 8px; margin-top: 8px; }
.menu .mitem { min-height: 74px; padding: 9px 10px 9px 16px; border-radius: 20px; gap: 12px; }
.menu .mitem .txt { gap: 1px; }
.menu .mitem .txt b { font-size: 17px; line-height: 22px; }
.menu .mitem .txt small { font-size: 13px; line-height: 17px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.menu .mitem .powered-by { margin-top: 3px; }
.menu .mitem .pv { width: 80px; height: 56px; padding: 6px; border-radius: 10px; box-shadow: -8px 10px 18px rgba(0, 0, 0, .16); }
.menu .mgrid { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.menu .mgrid > :last-child:nth-child(odd) { grid-column: auto; }
.menu .msmall { min-height: 0; padding: 11px 10px 10px; gap: 6px; border-radius: 18px; }
.menu .msmall .tile { width: 30px; height: 30px; border-radius: 8px; }
.menu .msmall .tile svg { width: 18px; height: 18px; }
.menu .msmall b { font-size: 15px; line-height: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu .msmall small { display: none; }
.menu .mcup { margin-top: 8px; }
.menu .mcup .hx.cup { height: 250px; }
.menu .mitem .txt .powered-by b { display: inline; font-size: 11px; line-height: 13px; font-weight: 700; }

.rec { display: flex; gap: 10px; margin-top: 10px; padding: 12px 14px; border-radius: 16px; background: var(--ok-bg); font-size: 14px; line-height: 19px; color: var(--label2); }
.rec svg { flex: none; width: 20px; height: 20px; color: var(--green-text); margin-top: 1px; }
.rec b { display: block; color: var(--label); font-size: 15px; margin-bottom: 2px; }

/* ride: sent to TrueDrivers / confirmed */
.tdcard { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; padding: 14px; border-radius: 18px; background: var(--surface); font-size: 14px; line-height: 19px; color: var(--label2); }
.tdcard > svg { flex: none; width: 22px; height: 22px; color: var(--label); margin-top: 1px; }
.tdcard b { display: block; font-size: 16px; line-height: 21px; color: var(--label); margin-bottom: 2px; }
.tdcard.ok { background: var(--ok-bg); } .tdcard.ok > svg { color: var(--green-text); }
.tdcard.no { background: var(--bad-bg); } .tdcard.no > svg { color: var(--red-text); }
.tdcard.wait { background: var(--warn-bg); }
.tdcard.go { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--sep); }
.tdspin { flex: none; width: 18px; height: 18px; margin: 2px; border-radius: 50%; border: 2.5px solid var(--orange); border-right-color: transparent; animation: tdspin 1s linear infinite; }
@keyframes tdspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tdspin { animation: none; } }

/* new ride: From / To with suggestions */
.route2 { position: relative; margin-top: 12px; background: var(--surface); border-radius: 18px; overflow: hidden; }
.route2::before { content: ""; position: absolute; left: 23px; top: 36px; height: 26px; border-left: 2px dashed var(--sep); }
.rt2 { position: relative; width: 100%; display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 8px 60px 8px 17px; text-align: start; background: none; color: var(--label); }
.rt2 + .rt2::before { content: ""; position: absolute; top: 0; left: 44px; right: 0; border-top: .5px solid var(--sep); }
.rt2 .main { display: flex; flex-direction: column; min-width: 0; }
.rt2 small { font-size: 12px; color: var(--label2); font-weight: 600; }
.rt2 b { font-size: 17px; line-height: 22px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt2 b.ph { color: var(--label3); font-weight: 500; }
.rt2 .rt-dot { flex: none; }
.rtswap { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; background: var(--fill); color: var(--label); display: grid; place-items: center; z-index: 1; }
.rtswap svg { width: 20px; height: 20px; }

.backtrip { width: 100%; display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 13px 14px; border-radius: 18px; background: var(--surface); color: var(--label); text-align: start; }
.backtrip > svg { flex: none; width: 26px; height: 26px; padding: 5px; box-sizing: content-box; border-radius: 10px; background: #007AFF; color: #fff; }
.backtrip span:not(.chev) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.backtrip b { font-size: 16px; }
.backtrip small { font-size: 13px; color: var(--label2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.backtrip .chev { color: var(--label3); }
.rt-dot { width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--label); background: var(--surface); position: relative; z-index: 1; box-sizing: content-box; }
.rt-dot.to { background: var(--label); }
.backnote > svg { width: 22px; height: 22px; flex: none; }

/* chat: reactions, edit, mentions */
.rxrow { display: flex; flex-wrap: wrap; gap: 4px; margin: -4px 0 2px 32px; position: relative; z-index: 1; }
.msg.me .rxrow { justify-content: flex-end; margin: -4px 32px 2px 0; }
.rx { display: inline-flex; align-items: center; gap: 3px; height: 26px; padding: 0 8px; border-radius: 13px; background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); font-size: 14px; color: var(--label); }
.rx span { font-size: 12px; font-weight: 600; color: var(--label2); }
.rx.on { box-shadow: inset 0 0 0 1.5px #007AFF, 0 1px 3px rgba(0, 0, 0, .12); }
.rxbar { display: flex; justify-content: space-between; gap: 4px; padding: 6px; border-radius: 28px; background: var(--surface); box-shadow: var(--shadow); }
.rxbar button { flex: 1; height: 46px; border-radius: 23px; font-size: 27px; line-height: 1; transition: transform .12s; }
.rxbar button:active { transform: scale(1.25); }
.rxbar button.on { background: var(--fill2); }
.btext .ment { font-weight: 600; color: #007AFF; }
.msg.me .btext .ment { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.btext .ment.me { background: rgba(0, 122, 255, .14); border-radius: 4px; padding: 0 2px; }
.editbar { display: flex; align-items: center; gap: 10px; margin: 0 -16px; padding: 8px 16px; background: var(--bar); border-top: .5px solid var(--sep); position: sticky; bottom: calc(58px + var(--safe-bottom)); z-index: 4; }
.editbar span { flex: 1; min-width: 0; font-size: 13px; color: var(--label2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid #007AFF; padding-left: 8px; }
.editbar b { display: block; color: #007AFF; font-size: 13px; }
.editbar button { width: 30px; height: 30px; display: grid; place-items: center; color: var(--label2); }
.editbar button svg { width: 18px; height: 18px; }
.mentions { position: sticky; bottom: calc(58px + var(--safe-bottom)); z-index: 5; margin: 0 -8px 4px; background: var(--elev); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; max-height: 260px; overflow-y: auto; }
.mentions button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 14px; text-align: start; color: var(--label); }
.mentions button + button { border-top: .5px solid var(--sep); }
.mentions button span:last-child { display: flex; flex-direction: column; font-size: 15px; }
.mentions small { font-size: 12px; color: var(--label2); }

/* ── Sign in on a computer: the whole screen. Left: the drawings float over a deep blue-violet glow with the
   MU HUB wordmark; right: the form. ── */
@media (min-width: 900px) and (min-height: 520px) {
  .screen.login { position: fixed; inset: 0; z-index: 5; max-width: none; margin: 0; padding: 0; overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(440px, 1fr); grid-template-rows: 1fr; }
  .login .lg-art { grid-area: 1 / 1; position: relative; inset: auto; height: 100%; color: #fff; overflow: hidden; isolation: isolate;
    background: linear-gradient(160deg, #101A4A 0%, #0A0B26 70%); }
  .login .lg-art::before, .login .lg-art::after { content: ''; position: absolute; z-index: -1; width: 90%; aspect-ratio: 1; border-radius: 50%; filter: blur(70px); opacity: .85; pointer-events: none; }
  .login .lg-art::before { left: -30%; top: -35%; background: radial-gradient(circle, #3D7BFF 0%, rgba(53, 97, 240, .55) 40%, transparent 70%); animation: lg-aur1 18s ease-in-out infinite alternate; }
  .login .lg-art::after { right: -35%; bottom: -40%; background: radial-gradient(circle, #C44BFF 0%, rgba(142, 60, 245, .55) 40%, transparent 70%); animation: lg-aur2 22s ease-in-out infinite alternate; }
  .login .lg-ico { opacity: .9; scale: 1.7; }
  .login .lg-ico:nth-of-type(odd) { scale: 1.35; opacity: .7; }
  .login .lg-dot { animation-name: lg-rise-d; }
  .login .lg-art { --yk: .7%; }
  .login .lg-pulse { top: 54%; bottom: auto; height: 60px; opacity: .3; }
  .login .lg-head { display: block; font-size: 34px; line-height: 40px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 10px; }
  .login .lg-head small { display: block; font-size: 17px; line-height: 22px; font-weight: 400; letter-spacing: -.01em; color: var(--label2); margin-top: 6px; }
  .login .lg-brand { grid-area: 1 / 1; align-self: end; margin: 0; padding: 0 clamp(40px, 6vw, 96px) clamp(40px, 9vh, 96px); color: #fff; z-index: 1; pointer-events: none; }
  .login .lg-brand .wm { color: #fff; width: clamp(260px, 28vw, 440px); height: auto; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .35)); }
  .login .lg-brand p { color: rgba(255, 255, 255, .74); font-size: clamp(17px, 1.5vw, 22px); line-height: 1.35; max-width: 30ch; margin-top: 6px; }
  .login > .grow { display: none; }
  .login .lg-form { grid-area: 1 / 2; align-self: center; justify-self: center; width: min(400px, calc(100% - 64px)); margin: 0; max-height: 100dvh; overflow: auto; padding: 32px 2px; }
  .login .lg-get { top: 20px; right: 24px; }
  .login .lg-form .seg { margin-bottom: 4px; }
}
@media (min-width: 900px) and (min-height: 520px) and (prefers-reduced-motion: reduce) { .login .lg-art::before, .login .lg-art::after { animation: none; } }
@keyframes lg-aur1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(18%, 22%) scale(1.15); } }
@keyframes lg-aur2 { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(-20%, -16%) scale(.95); } }
@keyframes lg-rise-d { 0% { opacity: 0; transform: translate(0, 0); } 12% { opacity: .35; } 70% { opacity: .25; } 100% { opacity: 0; transform: translate(var(--sw), -100vh); } }

/* "Show the number on the app icon" (iPhone home-screen app) */
.badgeask { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; text-align: left; }
.badgeask .main { flex: 1; min-width: 0; }
.badgeask .main b { display: block; font-size: 15px; line-height: 20px; }
.badgeask .main small { display: block; font-size: 13px; line-height: 17px; color: var(--label2); margin-top: 2px; }
.badgeask .bico { position: relative; flex-shrink: 0; width: 44px; height: 44px; }
.badgeask .bico img { width: 44px; height: 44px; border-radius: 10px; display: block; }
.badgeask .bico b { position: absolute; top: -6px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #FF3B30; color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--surface, #fff); }