/* OFF DUTY — the workshop look: charcoal steel, safety orange, condensed
   stencil type, tickets with perforations, rubber stamps that thump. */

@font-face { font-family: 'Oswald'; src: url('/fonts/oswald.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('/fonts/barlow-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('/fonts/barlow-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('/fonts/barlow-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --bg: #0f1114; --bg2: #14171b; --card: #1a1e23; --card2: #21262d; --line: #2c333c; --line2: #3a434e;
  --ink: #f3f1ec; --ink2: #b8bec7; --ink3: #7e8792;
  --or: #ff6a13; --or2: #ff8b40; --or-d: #c84d06; --am: #ffb703;
  --in: #2fd27a; --maybe: #ffb703; --out: #ff5050;
  --fd: 'Oswald', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --fb: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --r: 14px; --nav: 68px; --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; min-height: 100dvh; color: var(--ink); font: 500 16px/1.4 var(--fb); background-color: var(--bg);
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 2px, transparent 2px 13px), radial-gradient(1200px 600px at 50% -200px, #1d2229 0%, transparent 70%);
  background-attachment: fixed; overscroll-behavior-y: none;
}
body.locked { overflow: hidden; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
a { color: var(--or2); }
:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; border-radius: 6px; }
.offscreen { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
[hidden] { display: none !important; }
h1, h2, h3, h4 { font-family: var(--fd); font-weight: 600; letter-spacing: .01em; margin: 0; line-height: 1.12; }
.muted { color: var(--ink2); } .small { font-size: 13px; } .center { text-align: center; }
.mt { margin-top: 16px; } .mt-s { margin-top: 10px; } .mt-l { margin-top: 28px; }
.row { display: flex; align-items: center; } .col { display: flex; flex-direction: column; } .gap { gap: 10px; } .grow { flex: 1; min-width: 0; }
.between { justify-content: space-between; } .end { justify-content: flex-end; } .wrapr { flex-wrap: wrap; }

#app { max-width: 560px; margin: 0 auto; min-height: 100dvh; position: relative; }
#view { padding-bottom: calc(var(--nav) + var(--safe-b) + 24px); }
.page { animation: pagein .22s ease-out; }
@keyframes pagein { from { opacity: 0; transform: translateY(6px); } }
.wrap { padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.boot { display: grid; place-items: center; height: 70vh; }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--or); animation: spin .8s linear infinite; margin: 40px auto; }
.spinner.small { width: 22px; height: 22px; margin: 20px auto; }
@keyframes spin { to { transform: rotate(360deg); } }

/* -------------------------------------------------------------- top --- */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px; padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 10px 16px; background: linear-gradient(var(--bg) 70%, rgba(15,17,20,0)); }
.top .ttl { flex: 1; min-width: 0; }
.top h1 { font-size: 24px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top .ttl small { display: block; color: var(--ink3); font-size: 13px; }
.top .tright { display: flex; gap: 4px; margin-left: auto; }
.brand { display: flex; align-items: center; gap: 9px; flex: 1; }
.wordmark { font-family: var(--fd); font-size: 23px; letter-spacing: .06em; text-transform: uppercase; }
.wordmark b { color: var(--or); font-weight: 700; } .wordmark span { font-weight: 500; }
.ib { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: var(--ink); position: relative; flex: none; }
.ib:active { background: var(--card2); }
.ib.sm { width: 34px; height: 34px; }
.ib .dot { position: absolute; top: 4px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--or); color: #1a0d04; font: 700 11px/18px var(--fb); font-style: normal; }
.av-btn { padding: 0; } .av-btn .av { border-radius: 50%; box-shadow: 0 0 0 2px var(--line2); }

/* ------------------------------------------------------------ tabs --- */
#tabs { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 560px; z-index: 30; height: calc(var(--nav) + var(--safe-b)); padding-bottom: var(--safe-b);
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; background: rgba(17,19,23,.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
.tab { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--ink3); text-decoration: none; font: 600 11px var(--fd); letter-spacing: .08em; text-transform: uppercase; position: relative; height: 100%; justify-content: center; }
.tab.on { color: var(--ink); } .tab.on .ic { color: var(--or); }
.tab .tbadge { position: absolute; top: 8px; left: 54%; background: var(--or); color: #1a0d04; font: 700 10px/16px var(--fb); min-width: 16px; padding: 0 4px; border-radius: 8px; font-style: normal; }
.tab.fab .fabin { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; color: #1a0d04; background: linear-gradient(180deg, var(--or2), var(--or)); box-shadow: 0 8px 20px rgba(255,106,19,.35), inset 0 -3px 0 rgba(0,0,0,.18); transform: translateY(-14px) rotate(0deg); transition: transform .15s; }
.tab.fab:active .fabin { transform: translateY(-12px) scale(.94); }

/* ---------------------------------------------------------- buttons --- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 0 18px; border-radius: 12px; font: 600 15px var(--fd); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; transition: transform .08s, filter .15s; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; pointer-events: none; }
.btn.primary { background: linear-gradient(180deg, var(--or2), var(--or)); color: #170b03; box-shadow: inset 0 -3px 0 rgba(0,0,0,.2); }
.btn.fire { background: linear-gradient(180deg, #ff9040, #ff4d1a); color: #170b03; box-shadow: 0 6px 20px rgba(255,77,26,.35), inset 0 -3px 0 rgba(0,0,0,.2); }
.btn.ghost { background: var(--card2); color: var(--ink); border: 1px solid var(--line2); }
.btn.danger { background: rgba(255,80,80,.12); color: #ff8a8a; border: 1px solid rgba(255,80,80,.35); }
.btn.block { width: 100%; } .btn.big { min-height: 56px; font-size: 18px; }
.btn.sm { min-height: 34px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.linkbtn { color: var(--or2); font: 600 13px var(--fd); letter-spacing: .06em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 4px; padding: 8px 2px; }
.linkbtn.inline { padding: 0; text-transform: none; font: inherit; text-decoration: underline; letter-spacing: 0; }
.pill { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; background: var(--card2); border: 1px solid var(--line2); font: 600 11px var(--fb); color: var(--ink2); margin-left: 6px; vertical-align: middle; }
.pill.fl { color: #ffb37d; border-color: rgba(255,106,19,.4); background: rgba(255,106,19,.12); margin-left: 0; }
.pill.ok { color: var(--in); border-color: rgba(47,210,122,.4); }

/* ------------------------------------------------------------- home --- */
.greet { margin: 2px 0 0; color: var(--ink2); font-size: 15px; }
.battery { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: var(--r); background: linear-gradient(135deg, var(--card2), var(--card)); border: 1px solid var(--line); }
.battery .bleft small { display: block; font: 600 11px var(--fd); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
.battery .bleft b { font: 700 38px/1 var(--fd); display: block; margin: 2px 0; }
.battery .bleft span { font-size: 13px; color: var(--ink2); }
.battery .bright { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.battery .bright small { color: var(--ink3); font-size: 12px; text-align: right; }
.bshell { display: flex; align-items: center; }
.cells { display: flex; gap: 3px; padding: 4px; border: 2px solid var(--ink3); border-radius: 7px; }
.cells i { width: 14px; height: 24px; border-radius: 3px; background: var(--card2); }
.bnub { width: 4px; height: 10px; background: var(--ink3); border-radius: 0 2px 2px 0; }
.battery.full .cells i.on { background: var(--in); } .battery.ok .cells i.on { background: #a6d93a; } .battery.low .cells i.on { background: var(--am); }
.battery.crit .cells i.on { background: var(--out); animation: blink 1.2s infinite; } .battery.crit .bleft b { color: var(--out); }
@keyframes blink { 50% { opacity: .35; } }
.waitbar, .flarebtn, .nudge { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 14px 14px; border-radius: var(--r); }
.waitbar { background: rgba(255,183,3,.1); border: 1px dashed rgba(255,183,3,.55); animation: glow 2.4s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 4px rgba(255,183,3,.08); } }
.waitbar .wemo, .flarebtn .flame, .nudge .nemo { font-size: 28px; flex: none; }
.waitbar .wtext, .flarebtn .ftext, .nudge > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.waitbar b, .flarebtn b, .nudge b { font: 600 17px var(--fd); letter-spacing: .02em; }
.waitbar small, .flarebtn small, .nudge small { color: var(--ink2); font-size: 13px; }
.flarebtn { background: linear-gradient(120deg, #3a1a08, #241510 60%, var(--card)); border: 1px solid rgba(255,106,19,.45); }
.flarebtn .flame { animation: flick 1.6s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes flick { 0%, 100% { transform: rotate(-4deg) scale(1); } 50% { transform: rotate(5deg) scale(1.08); } }
.nudges { display: flex; flex-direction: column; gap: 8px; }
.nudge { background: var(--card); border: 1px solid var(--line); }
.nudge.hot { border-color: rgba(255,106,19,.5); }
.sect { display: flex; align-items: baseline; justify-content: space-between; margin-top: 8px; }
.sect h2 { font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
.card.hero { text-align: center; padding: 26px 18px; }
.hemo { font-size: 44px; margin-bottom: 8px; }
.card.hero h3 { font-size: 22px; text-transform: uppercase; margin-bottom: 6px; }
.empty { text-align: center; padding: 30px 12px; }
.empty .eemo { font-size: 44px; } .empty h3 { margin: 8px 0 4px; font-size: 19px; text-transform: uppercase; } .empty .btn { margin-top: 14px; }

/* ----------------------------------------------------------- ticket --- */
.ticket { --c: var(--or); position: relative; display: flex; background: var(--card); border-radius: var(--r); border: 1px solid var(--line); overflow: hidden; cursor: pointer; min-height: 96px; transition: transform .1s; }
.ticket:active { transform: scale(.985); }
.ticket::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--c); }
.ticket .stub { width: 74px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; border-right: 2px dashed var(--line2); position: relative; padding-left: 5px; background: linear-gradient(180deg, rgba(255,255,255,.03), transparent); }
.ticket .stub::before, .ticket .stub::after { content: ''; position: absolute; right: -9px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line); }
.ticket .stub::before { top: -9px; } .ticket .stub::after { bottom: -9px; }
.stub small { font: 600 12px var(--fd); letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); }
.stub b { font: 700 32px/1 var(--fd); color: var(--ink); }
.stub.poll { color: var(--am); } .stub.poll b { font-size: 24px; }
.tmain { flex: 1; min-width: 0; padding: 11px 14px 11px 14px; display: flex; flex-direction: column; gap: 4px; }
.tcrew { display: flex; align-items: center; gap: 6px; font: 600 11px var(--fd); letter-spacing: .1em; text-transform: uppercase; color: var(--c); flex-wrap: wrap; }
.tcrew .pill { margin-left: 0; text-transform: none; letter-spacing: 0; }
.ttitle { font-size: 19px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.temo { font-family: var(--fb); }
.tmeta { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--ink2); font-size: 13px; }
.tmeta span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.tplace { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 100%; }
.tfoot { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
.tcount { font: 600 12px var(--fd); letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); }
.tcount.need { color: var(--am); } .tcount.good { color: var(--in); }
.ticket.big { min-height: 130px; } .ticket.big .ttitle { font-size: 24px; } .ticket.big .stub { width: 86px; } .ticket.big .stub b { font-size: 40px; }
.ticket.cancelled { opacity: .55; } .ticket.cancelled .ttitle { text-decoration: line-through; }
.ticket.flare { background: linear-gradient(120deg, #2a160c, var(--card) 55%); border-color: rgba(255,106,19,.35); }
.mini-stamp { position: absolute; right: 10px; top: 10px; transform: rotate(-12deg); font: 700 12px var(--fd); letter-spacing: .12em; padding: 2px 7px; border: 2px solid currentColor; border-radius: 6px; opacity: .9; }
.mini-stamp.in { color: var(--in); } .mini-stamp.maybe { color: var(--maybe); } .mini-stamp.out { color: var(--out); }
.mini-stamp.big { top: 40%; right: 20%; font-size: 18px; }

.stack { display: flex; align-items: center; }
.stack .sa { width: var(--s); height: var(--s); border-radius: 50%; margin-left: calc(var(--s) * -.28); box-shadow: 0 0 0 2px var(--card); display: grid; place-items: center; background: var(--card2); flex: none; }
.stack .sa:first-child { margin-left: 0; }
.stack .sa.more { font: 600 11px var(--fd); color: var(--ink2); }
.stack .av { display: block; }
.cbadge { --c: var(--or); display: grid; place-items: center; border-radius: 30%; background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.22), transparent 60%), var(--c); box-shadow: inset 0 -3px 0 rgba(0,0,0,.25), 0 0 0 2px rgba(0,0,0,.25); flex: none; line-height: 1; }

/* ------------------------------------------------------------ sheets --- */
.scrim { position: fixed; inset: 0; z-index: 50; background: rgba(5,6,8,.6); display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity .22s; }
.scrim.on { opacity: 1; } .scrim.off { opacity: 0; pointer-events: none; }
.sheet { width: 100%; max-width: 560px; max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain; background: var(--bg2); border-radius: 22px 22px 0 0; border: 1px solid var(--line); border-bottom: 0;
  padding: 8px 18px calc(22px + var(--safe-b)); transform: translateY(40px); transition: transform .26s cubic-bezier(.2,.9,.25,1.05); display: flex; flex-direction: column; gap: 12px; }
.sheet.tall { height: 92dvh; max-height: 92dvh; }
.scrim.on .sheet { transform: none; }
.grab { width: 42px; height: 5px; border-radius: 3px; background: var(--line2); margin: 2px auto 6px; flex: none; }
.sh-title { font-size: 22px; text-transform: uppercase; }
.sticky-cta { position: sticky; bottom: calc(-22px - var(--safe-b)); margin: 4px -18px calc(-22px - var(--safe-b)); padding: 12px 18px calc(16px + var(--safe-b)); background: linear-gradient(rgba(20,23,27,0), var(--bg2) 30%); }
.list { display: flex; flex-direction: column; gap: 2px; }
.li { display: flex; align-items: center; gap: 12px; padding: 13px 12px; border-radius: 12px; text-align: left; color: var(--ink); text-decoration: none; width: 100%; background: var(--card); border: 1px solid var(--line); margin-bottom: 6px; }
.li > span { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.li small { color: var(--ink3); font-size: 12.5px; }
.li.danger { color: #ff8a8a; }
.toast { position: fixed; left: 50%; bottom: calc(var(--nav) + var(--safe-b) + 18px); transform: translate(-50%, 20px); z-index: 80; max-width: calc(100% - 32px); display: flex; gap: 8px; align-items: center;
  padding: 12px 16px; border-radius: 14px; background: #f3f1ec; color: #15171a; font-weight: 600; font-size: 15px; box-shadow: 0 10px 30px rgba(0,0,0,.4); opacity: 0; transition: .25s; pointer-events: none; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast.top { bottom: auto; top: calc(env(safe-area-inset-top, 0px) + 16px); transform: translate(-50%, -20px); }
.toast.top.on { transform: translate(-50%, 0); }
.toast.warn { background: #ffd2c2; } .toast.tap { pointer-events: auto; cursor: pointer; }
.toast .temo { font-size: 20px; }

/* ------------------------------------------------------------ forms --- */
.form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.flabel { font: 600 12px var(--fd); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
.fhint { font-size: 12.5px; color: var(--ink3); }
.inp { width: 100%; min-height: 46px; padding: 11px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line2); color: var(--ink); outline: none; font-size: 16px; }
.inp:focus { border-color: var(--or); box-shadow: 0 0 0 3px rgba(255,106,19,.15); }
.inp.big { font: 600 20px var(--fd); letter-spacing: .02em; }
.inp.code { font: 600 22px var(--fd); letter-spacing: .2em; text-align: center; text-transform: uppercase; }
.inp.time { width: auto; min-height: 38px; padding: 6px 10px; flex: none; }
textarea.inp { resize: vertical; line-height: 1.4; }
select.inp { appearance: none; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chips.scrollx { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; }
.sheet .chips.scrollx { margin: 0 -18px; padding: 2px 18px; }
.chips.scrollx::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 13px; border-radius: 999px; background: var(--card); border: 1px solid var(--line2); color: var(--ink2); font-size: 14.5px; font-weight: 600; white-space: nowrap; flex: none; transition: background .12s, color .12s; }
.chip.on { background: var(--ink); color: #121417; border-color: var(--ink); }
.chip.best { border-color: rgba(255,183,3,.5); color: #ffd36b; } .chip.best.on { background: var(--am); color: #1d1300; }
.chip.ghost { border-style: dashed; }
.chips.small .chip { min-height: 32px; padding: 0 10px; font-size: 13.5px; }
.chip .cemo { font-size: 17px; }
.chips.acts .chip { min-height: 42px; }
.daychip { flex-direction: column; justify-content: center; gap: 0; min-width: 56px; min-height: 58px; border-radius: 14px; padding: 4px 8px; position: relative; }
.daychip small { font: 600 11px var(--fd); letter-spacing: .08em; text-transform: uppercase; }
.daychip b { font: 700 21px/1.1 var(--fd); }
.daychip.pick { cursor: pointer; }
.hiddeninp { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.whenline { margin: 2px 0 0; color: var(--ink2); font-size: 13.5px; display: flex; align-items: center; gap: 6px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stepper { display: flex; align-items: center; gap: 4px; background: var(--card); border: 1px solid var(--line2); border-radius: 12px; padding: 4px; width: fit-content; }
.stb { width: 38px; height: 38px; border-radius: 9px; background: var(--card2); font: 600 22px var(--fd); }
.stv { min-width: 52px; text-align: center; font: 600 18px var(--fd); }
details.more { border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 14px; }
details.more > summary { font: 600 14px var(--fd); letter-spacing: .1em; text-transform: uppercase; color: var(--or2); cursor: pointer; list-style: none; padding: 6px 0; }
details.more[open] > summary { margin-bottom: 12px; }
details.more > * + * { margin-top: 14px; }
.optlist { display: flex; flex-direction: column; gap: 6px; }
.opt { display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 6px 14px; background: var(--card); border: 1px solid var(--line2); border-radius: 12px; }
.seg { display: flex; padding: 4px; gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 13px; }
.segb { flex: 1; min-height: 40px; border-radius: 10px; font: 600 13px var(--fd); letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); display: inline-flex; align-items: center; justify-content: center; gap: 6px; position: relative; }
.segb.on { background: var(--card2); color: var(--ink); box-shadow: inset 0 -2px 0 var(--or); }
.segb .badge { background: var(--or); color: #1a0d04; border-radius: 8px; font: 700 10px/16px var(--fb); padding: 0 5px; min-width: 16px; }
.toggle { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; position: relative; }
.toggle .tl { flex: 1; display: flex; flex-direction: column; } .toggle small { color: var(--ink3); font-size: 12.5px; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.knob { width: 50px; height: 30px; border-radius: 15px; background: var(--line2); position: relative; flex: none; transition: background .15s; }
.knob::after { content: ''; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); transition: transform .18s; }
.toggle input:checked + .knob { background: var(--or); } .toggle input:checked + .knob::after { transform: translateX(20px); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--ink2); cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--or); flex: none; margin: 0; }
.or { text-align: center; color: var(--ink3); font: 600 12px var(--fd); letter-spacing: .2em; text-transform: uppercase; }

/* ---------------------------------------------------------- popup --- */
.popup-scrim { align-items: center; background: rgba(5,6,8,.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sheet.popup { background: none; border: 0; padding: 16px; max-height: 100dvh; transform: scale(.92) translateY(20px); }
.scrim.on .sheet.popup { transform: none; }
.pcard { --c: var(--or); position: relative; background: linear-gradient(180deg, var(--card2), var(--card)); border: 1px solid var(--line2); border-radius: 22px; padding: 16px 18px 12px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.6); animation: popin .35s cubic-bezier(.2,.9,.3,1.25); }
.pcard::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--c); }
.pcard.flare { background: radial-gradient(400px 200px at 50% 0%, rgba(255,106,19,.25), transparent), linear-gradient(180deg, var(--card2), var(--card)); }
@keyframes popin { from { transform: translateY(30px) scale(.9); opacity: 0; } }
.pcard.leave { animation: popout .26s ease-in forwards; }
@keyframes popout { to { transform: translateX(110%) rotate(8deg); opacity: 0; } }
.pcard.stamped { animation: thump .32s ease-out; }
@keyframes thump { 30% { transform: scale(.97) translateY(3px); } 60% { transform: scale(1.01); } }
.phead { display: flex; align-items: center; gap: 8px; }
.pcrew { flex: 1; font: 600 12px var(--fd); letter-spacing: .12em; text-transform: uppercase; color: var(--c); }
.pcount { font: 600 12px var(--fd); color: var(--ink3); }
.pemo { font-size: 58px; text-align: center; line-height: 1; margin-top: 2px; filter: drop-shadow(0 8px 14px rgba(0,0,0,.4)); }
.ptitle { font-size: 30px; text-align: center; text-transform: uppercase; line-height: 1.05; }
.pwho { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--ink2); font-size: 14px; }
.pwhen { text-align: center; padding: 10px; border-radius: 14px; background: rgba(0,0,0,.22); border: 1px dashed var(--line2); }
.pday { display: flex; flex-direction: column; } .pday b { font: 700 26px var(--fd); text-transform: uppercase; letter-spacing: .03em; color: var(--am); } .pday span { font: 600 18px var(--fd); }
.pplace { color: var(--ink2); margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 5px; }
.pheads { display: flex; align-items: center; justify-content: center; gap: 10px; font: 600 14px var(--fd); letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); }
.pcost { text-align: center; color: var(--ink2); font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 5px; }
.pact { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 8px; margin-top: 4px; }
.pact .btn { grid-column: span 3; }
.pact .btn.primary.grow { grid-column: span 2; } .pact .btn.ghost { grid-column: span 1; }
.stampbtn { min-height: 74px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 4px; border: 2px solid; transition: transform .08s, background .15s; }
.stampbtn b { font: 700 16px/1.05 var(--fd); letter-spacing: .05em; text-transform: uppercase; text-align: center; }
.stampbtn small { font-size: 11.5px; color: var(--ink2); text-align: center; line-height: 1.15; }
.stampbtn:active { transform: scale(.95); }
.stampbtn.in { border-color: var(--in); color: var(--in); background: rgba(47,210,122,.08); }
.stampbtn.in b { font-size: 19px; }
.stampbtn.maybe { border-color: rgba(255,183,3,.7); color: var(--maybe); background: rgba(255,183,3,.06); }
.stampbtn.out { border-color: rgba(255,80,80,.6); color: #ff7b7b; background: rgba(255,80,80,.06); }
.stampbtn.chosen.in { background: var(--in); color: #062614; } .stampbtn.chosen.maybe { background: var(--maybe); color: #261a00; } .stampbtn.chosen.out { background: var(--out); color: #2a0606; }
.stampbtn.chosen small { color: inherit; opacity: .8; }
.stamp-layer { position: absolute; inset: 0; pointer-events: none; display: grid; place-items: center; }
.stamp { font: 700 44px/1 var(--fd); letter-spacing: .1em; padding: 10px 22px; border: 6px solid currentColor; border-radius: 12px; text-transform: uppercase; transform: rotate(-14deg); mix-blend-mode: screen;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -2.4 1.7'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -2.4 1.7'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); }
.stamp.in { color: var(--in); } .stamp.maybe { color: var(--maybe); } .stamp.out { color: var(--out); }
.stamp.big { font-size: 64px; animation: slam .38s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes slam { from { transform: rotate(-24deg) scale(2.6); opacity: 0; } 70% { opacity: 1; } to { transform: rotate(-14deg) scale(1); opacity: .92; } }
.stamp.hero { position: absolute; right: 14px; top: 16px; font-size: 26px; padding: 5px 12px; border-width: 4px; opacity: .85; }
.linkbtn { justify-content: center; }
.pollbox { display: flex; flex-direction: column; gap: 8px; }
.vrow { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line2); }
.vrow.best { border-color: rgba(255,183,3,.6); background: rgba(255,183,3,.06); }
.vwhen { flex: 1; display: flex; flex-direction: column; min-width: 0; } .vwhen b { font: 600 16px var(--fd); text-transform: uppercase; } .vwhen span { color: var(--ink2); font-size: 13.5px; }
.vtally { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .vtally small { color: var(--ink3); font-size: 11.5px; }
.vbtns { display: flex; gap: 5px; }
.vb { width: 38px; height: 38px; border-radius: 10px; font: 700 17px var(--fd); border: 2px solid var(--line2); color: var(--ink3); }
.vb.yes.on { background: var(--in); border-color: var(--in); color: #062614; } .vb.maybe.on { background: var(--maybe); border-color: var(--maybe); color: #261a00; } .vb.no.on { background: var(--out); border-color: var(--out); color: #2a0606; }
.lock { min-height: 38px; padding: 0 10px; }

/* ------------------------------------------------------------ boss --- */
.boss-msg { white-space: pre-wrap; padding: 14px 16px; border-radius: 16px 16px 16px 4px; background: #1f3b2a; color: #e8fff0; font-size: 16px; line-height: 1.45; border: 1px solid #2c5a3f; }

/* ----------------------------------------------------------- crews --- */
.crewcard { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); text-align: left; width: 100%; }
.crewcard .ccmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.crewcard b { font: 600 19px var(--fd); letter-spacing: .02em; }
.crewcard small { color: var(--ink2); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crewcard small.warn { color: var(--am); }
.ccside { display: flex; align-items: center; gap: 6px; color: var(--ink3); }
.ubadge { background: var(--or); color: #1a0d04; font: 700 12px/22px var(--fb); font-style: normal; min-width: 22px; padding: 0 6px; border-radius: 11px; text-align: center; }
.ubadge.alt { background: var(--am); }
.crewhero { --c: var(--or); display: flex; gap: 14px; align-items: center; padding: 6px 16px 14px; }
.crewhero h2 { font-size: 26px; text-transform: uppercase; } .crewhero small { color: var(--ink3); font-size: 13px; } .crewhero p { margin: 4px 0 0; color: var(--ink2); font-size: 14px; }
.tabs3 { margin: 0 16px 6px; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 62px); z-index: 15; background: rgba(26,30,35,.96); backdrop-filter: blur(10px); }
.card.best { border-color: rgba(255,183,3,.35); background: rgba(255,183,3,.05); display: flex; flex-direction: column; gap: 10px; }
.besth { font: 600 13px var(--fd); letter-spacing: .12em; text-transform: uppercase; color: var(--am); }
details.past > summary { color: var(--ink3); font: 600 13px var(--fd); letter-spacing: .1em; text-transform: uppercase; padding: 10px 0; cursor: pointer; }
details.past[open] { display: flex; flex-direction: column; gap: 10px; }
.member { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.member.me { border-color: rgba(255,106,19,.4); }
.member .mmain { flex: 1; min-width: 0; display: flex; flex-direction: column; } .member b { font-weight: 700; } .member small { color: var(--ink3); font-size: 12.5px; }
.mav { border-radius: 50%; flex: none; display: grid; place-items: center; }
.rank { width: 26px; text-align: center; font: 700 18px var(--fd); color: var(--ink3); flex: none; }
.rank.r0 { color: #ffd34d; } .rank.r1 { color: #d6dde6; } .rank.r2 { color: #d99a5f; }
.cprev { flex: none; }
.emogrid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.emo { aspect-ratio: 1; border-radius: 10px; font-size: 22px; background: var(--card); border: 1px solid var(--line); }
.emo.on { background: var(--card2); border-color: var(--or); box-shadow: 0 0 0 2px rgba(255,106,19,.3); }
.qrbox { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px; background: var(--card); border-radius: 18px; border: 1px solid var(--line); }
.qr { width: 220px; height: 220px; border-radius: 12px; image-rendering: pixelated; background: #fff; }
.bigcode { font: 700 34px var(--fd); letter-spacing: .18em; text-align: center; padding: 8px 0; color: var(--ink); }
.bigcode.spare { font-size: 22px; letter-spacing: .1em; padding: 14px; border: 2px dashed var(--am); border-radius: 14px; color: var(--am); }
.bigcode.dead { opacity: .3; text-decoration: line-through; }

/* ------------------------------------------------------------ chat --- */
.chat { display: flex; flex-direction: column; gap: 6px; min-height: calc(100dvh - 470px); justify-content: flex-end; }
.thread .chat { min-height: 0; }
.msg { display: flex; align-items: flex-end; gap: 7px; max-width: 86%; }
.msg.mine { margin-left: auto; flex-direction: row-reverse; }
.msg .bubble { padding: 8px 12px 6px; border-radius: 16px 16px 16px 4px; background: var(--card2); border: 1px solid var(--line); display: flex; flex-direction: column; min-width: 60px; }
.msg.mine .bubble { border-radius: 16px 16px 4px 16px; background: #3a210f; border-color: rgba(255,106,19,.35); }
.msg .bubble b { font-size: 12px; color: var(--or2); }
.mtext { white-space: pre-wrap; word-break: break-word; font-size: 15.5px; }
.msg .bubble small { align-self: flex-end; color: var(--ink3); font-size: 10.5px; margin-top: 2px; }
.msg.hidden { opacity: .6; }
.daysep { align-self: center; font: 600 11px var(--fd); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); padding: 6px 10px; }
.chatbar { position: sticky; bottom: calc(var(--nav) + var(--safe-b) + 6px); display: flex; gap: 8px; align-items: flex-end; padding: 8px; margin-top: 6px; background: rgba(26,30,35,.97); border: 1px solid var(--line2); border-radius: 18px; backdrop-filter: blur(10px); z-index: 12; }
.chatbar.inline { position: static; }
.chatinp { flex: 1; resize: none; border: 0; outline: none; background: none; padding: 9px 6px 9px 10px; font-size: 16px; max-height: 120px; line-height: 1.35; }
.ib.send { background: var(--or); color: #1a0d04; border-radius: 12px; }
.quickmsg .chip { min-height: 32px; font-size: 13.5px; }
.thread { padding-top: 0; }

/* ----------------------------------------------------------- event --- */
.ehero { --c: var(--or); position: relative; padding: 18px 16px 16px; border-radius: 18px; background: linear-gradient(180deg, var(--card2), var(--card)); border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; gap: 8px; }
.ehero::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--c); }
.ehero.flare { background: radial-gradient(500px 220px at 20% 0%, rgba(255,106,19,.22), transparent), linear-gradient(180deg, var(--card2), var(--card)); }
.ehero.cancelled .etitle { text-decoration: line-through; opacity: .6; }
.eemo { font-size: 46px; line-height: 1; }
.etitle { font-size: 30px; text-transform: uppercase; padding-right: 80px; }
.eby { display: flex; align-items: center; gap: 6px; color: var(--ink2); font-size: 14px; }
.erow { display: flex; align-items: center; gap: 8px; color: var(--ink2); font-size: 15px; text-decoration: none; }
.erow.big { color: var(--ink); font-size: 16px; } .erow.big b { font-family: var(--fd); font-size: 18px; text-transform: uppercase; color: var(--am); letter-spacing: .02em; }
.erow.link { color: var(--ink); } .erow small { color: var(--ink3); }
.wx .wxi { font-size: 20px; }
.enotes { margin: 4px 0 0; padding: 10px 12px; border-left: 3px solid var(--line2); color: var(--ink2); white-space: pre-wrap; background: rgba(0,0,0,.15); border-radius: 0 10px 10px 0; }
.quorum { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; font: 600 13px var(--fd); letter-spacing: .08em; text-transform: uppercase; color: var(--am); }
.quorum.on { color: var(--in); }
.qbar { height: 8px; border-radius: 4px; background: rgba(255,255,255,.07); overflow: hidden; }
.qbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--am), var(--or)); border-radius: 4px; transition: width .4s; }
.quorum.on .qbar i { background: var(--in); }
.pgroup { display: flex; flex-direction: column; gap: 8px; }
.pgh { display: flex; justify-content: space-between; font: 600 13px var(--fd); letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); }
.pgh span { color: var(--ink3); }
.plist { display: flex; flex-wrap: wrap; gap: 10px; }
.pp { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 62px; font-size: 12px; color: var(--ink2); position: relative; }
.pp span { max-width: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp small { position: absolute; top: -2px; right: 4px; background: var(--in); color: #062614; font: 700 10px/16px var(--fb); padding: 0 4px; border-radius: 8px; }
.items { display: flex; flex-direction: column; gap: 6px; }
.item { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); min-height: 48px; }
.item .iname { flex: 1; font-weight: 600; } .item.taken .iname { color: var(--ink2); }
.iwho { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--in); }
.tabbox { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 6px 12px 12px; display: flex; flex-direction: column; }
.tabrow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line2); }
.tabrow small { color: var(--ink3); } .amt { font-family: var(--fd); font-size: 16px; }
.tabsum { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0 6px; color: var(--ink2); font-size: 13.5px; gap: 8px; flex-wrap: wrap; }
.tabsum b { color: var(--ink); font-family: var(--fd); font-size: 15px; }
.moves { display: flex; flex-direction: column; gap: 6px; }
.move { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 10px; background: rgba(255,183,3,.07); font-size: 14px; }
.move b { margin-left: auto; font-family: var(--fd); font-size: 15px; color: var(--am); }
.move.me { background: rgba(255,80,80,.1); }

/* ----------------------------------------------------------- radar --- */
.locline { display: flex; align-items: center; gap: 4px; color: var(--ink); font-size: 14px; padding: 4px 0; }
.rlist { display: flex; flex-direction: column; gap: 10px; }
.dad, .rcrew, .rhang { --c: var(--or); display: flex; gap: 12px; padding: 12px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); align-items: flex-start; cursor: pointer; }
.dad .dmain, .rcrew .dmain, .rhang .dmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dmain b { font: 600 18px var(--fd); letter-spacing: .02em; } .dmain small { color: var(--ink3); font-size: 13px; display: flex; align-items: center; gap: 4px; }
.hob { display: flex; gap: 3px; font-size: 17px; flex-wrap: wrap; }
.hob span { opacity: .45; filter: grayscale(.6); } .hob span.sh { opacity: 1; filter: none; }
.dtags { display: flex; flex-wrap: wrap; gap: 5px; }
.tag { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: var(--card2); color: var(--ink2); border: 1px solid var(--line2); }
.dbio { margin: 2px 0 0; color: var(--ink2); font-size: 13.5px; font-style: italic; }
.dact { flex: none; align-self: center; }
.nextup { color: var(--am) !important; }
.rhang .stub { width: 56px; flex: none; display: flex; flex-direction: column; align-items: center; border-right: 2px dashed var(--line2); padding-right: 10px; }
.rhang .stub b { font-size: 26px; }
.rhang { border-left: 4px solid var(--c); }
.safety { display: flex; gap: 8px; align-items: flex-start; color: var(--ink3); font-size: 12.5px; margin: 8px 0 0; }
.safety .ic { flex: none; color: var(--in); }
.uhero { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 6px 0 4px; }
.uhero h1 { font-size: 30px; text-transform: uppercase; margin-top: 6px; } .uhero small { color: var(--ink3); } .uhero p { margin: 2px 0 0; }
.av.big { filter: drop-shadow(0 10px 20px rgba(0,0,0,.45)); }
.avedit { position: relative; border-radius: 50%; }
.avedit .pen { position: absolute; right: 4px; bottom: 4px; width: 32px; height: 32px; border-radius: 50%; background: var(--or); color: #1a0d04; display: grid; place-items: center; box-shadow: 0 0 0 3px var(--bg); }
.ubio { text-align: center; color: var(--ink2); font-style: italic; margin: 0; }
.ustats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ustats > div { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 6px; text-align: center; display: flex; flex-direction: column; }
.ustats b { font: 700 26px var(--fd); } .ustats small { color: var(--ink3); font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; font-family: var(--fd); }
.mutual { text-align: center; color: var(--in); font: 600 15px var(--fd); letter-spacing: .04em; text-transform: uppercase; }
.slots { display: grid; grid-template-columns: 40px repeat(4, 1fr); gap: 5px; align-items: center; }
.slots .sh { text-align: center; font: 600 10.5px var(--fd); letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
.slots .sd { font: 600 12px var(--fd); text-transform: uppercase; color: var(--ink2); }
.slots .sc { height: 32px; border-radius: 8px; background: var(--card); border: 1px solid var(--line); }
.slots .sc.on { background: rgba(255,106,19,.55); border-color: var(--or); }
.slots .sc.both { background: var(--or); box-shadow: 0 0 0 2px rgba(255,183,3,.4); }
.slots.edit .sc { cursor: pointer; }

/* ------------------------------------------------------------- feed --- */
.feed { display: flex; flex-direction: column; gap: 4px; }
.fi { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 12px; text-align: left; width: 100%; }
.fi.new { background: rgba(255,106,19,.08); }
.fav { position: relative; flex: none; } .fav i { position: absolute; right: -6px; bottom: -4px; font-style: normal; font-size: 16px; }
.femo { width: 36px; height: 36px; display: grid; place-items: center; font-size: 22px; flex: none; }
.ftx { flex: 1; display: flex; flex-direction: column; font-size: 14.5px; } .ftx small { color: var(--ink3); font-size: 12px; }

/* ------------------------------------------------------ onboarding --- */
.welcome { padding: calc(env(safe-area-inset-top, 0px) + 14px) 18px 28px; display: flex; flex-direction: column; gap: 18px; min-height: 100dvh; }
.wtop { display: flex; align-items: center; justify-content: space-between; }
.langseg { width: auto; } .langseg .segb { min-height: 32px; padding: 0 10px; flex: none; }
.whero { text-align: center; padding: 10px 0 0; }
.hlogo { display: inline-block; animation: float 4s ease-in-out infinite; filter: drop-shadow(0 16px 30px rgba(255,106,19,.25)); }
@keyframes float { 50% { transform: translateY(-6px) rotate(-3deg); } }
.whero h1 { font-size: 36px; text-transform: uppercase; margin: 14px 0 10px; line-height: 1.02; }
.lead { color: var(--ink2); font-size: 16.5px; margin: 0 auto; max-width: 420px; }
.perks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.perks li { display: flex; gap: 14px; align-items: center; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.perks li > span { font-size: 28px; flex: none; }
.perks b { font: 600 17px var(--fd); letter-spacing: .02em; display: block; } .perks small { color: var(--ink2); font-size: 13.5px; }
.wcta { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.invite { --c: var(--or); padding: 14px; border-radius: 18px; background: linear-gradient(135deg, rgba(255,255,255,.05), transparent), var(--card); border: 2px solid var(--c); display: flex; flex-direction: column; gap: 10px; }
.invite h2 { font-size: 24px; text-transform: uppercase; } .invite small { color: var(--ink3); font: 600 11px var(--fd); letter-spacing: .12em; text-transform: uppercase; }
.onb { padding: calc(env(safe-area-inset-top, 0px) + 10px) 18px 28px; display: flex; flex-direction: column; gap: 14px; min-height: 100dvh; }
.onb h1 { font-size: 30px; text-transform: uppercase; margin-top: 10px; }
.onb h3 { font-size: 16px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink2); }
.onbtop { display: flex; align-items: center; gap: 10px; }
.dots { display: flex; gap: 6px; flex: 1; justify-content: center; }
.dots i { width: 26px; height: 5px; border-radius: 3px; background: var(--line2); } .dots i.on { background: var(--or); }
.onbcta { margin-top: auto; padding-top: 16px; position: sticky; bottom: 0; background: linear-gradient(rgba(15,17,20,0), var(--bg) 30%); padding-bottom: calc(8px + var(--safe-b)); }
.steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; color: var(--ink2); }
.steps li::marker { color: var(--or); font-family: var(--fd); }

/* ---------------------------------------------------------- avatars --- */
.av { display: block; flex: none; }
.avb { display: flex; flex-direction: column; gap: 10px; }
.avb-top { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 0; }
.avb-prev { animation: popin .3s; }
.avb-l { font: 600 12px var(--fd); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); margin-top: 4px; }
.avb-sw { display: flex; flex-wrap: wrap; gap: 8px; }
.sw { width: 36px; height: 36px; border-radius: 50%; border: 2px solid rgba(0,0,0,.35); box-shadow: 0 0 0 2px transparent; }
.sw.on { box-shadow: 0 0 0 3px var(--bg2), 0 0 0 5px var(--or); }
.avb-th { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -18px; padding: 4px 18px; }
.avb-th::-webkit-scrollbar { display: none; }
.th { flex: none; border-radius: 50%; padding: 2px; border: 2px solid transparent; }
.th.on { border-color: var(--or); }

/* ----------------------------------------------------------- calendar --- */
.calhead { display: flex; align-items: center; justify-content: space-between; }
.calhead h2 { font-size: 20px; text-transform: uppercase; letter-spacing: .04em; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cwd { text-align: center; font: 600 11px var(--fd); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); padding: 4px 0; }
.cd { aspect-ratio: 1 / 1.05; border-radius: 10px; background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.cd.blank { background: none; border: 0; }
.cd b { font: 600 16px var(--fd); }
.cd.past { opacity: .5; }
.cd.today { border-color: var(--or); } .cd.today b { color: var(--or2); }
.cd.sel { background: var(--ink); color: #121417; } .cd.sel b { color: #121417; }
.cdots { display: flex; gap: 2px; height: 6px; }
.cdots i { width: 6px; height: 6px; border-radius: 50%; opacity: .7; } .cdots i.in { opacity: 1; box-shadow: 0 0 0 1px rgba(255,255,255,.6); } .cdots i.x { opacity: .25; }

/* ----------------------------------------------------------- burst --- */
.burst { position: fixed; z-index: 90; pointer-events: none; width: 0; height: 0; }
.burst i { position: absolute; width: 8px; height: 12px; border-radius: 2px; animation: fly 1s cubic-bezier(.15,.7,.35,1) forwards; }
@keyframes fly { to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; } }
@media (min-width: 600px) { #app { border-left: 1px solid var(--line); border-right: 1px solid var(--line); } }