/* =========================================================================
   KILN — member app + staff console. Every control is a pill with depth.
   ========================================================================= */
:root {
  --bg: #0b0a09; --s1: #151310; --s2: #1d1a17; --s3: #27231f;
  --line: rgba(242,236,226,.08); --line-2: rgba(242,236,226,.15);
  --tx: #f2ece2; --tx-2: rgba(242,236,226,.62); --tx-3: rgba(242,236,226,.4);
  --ember: #ff5a1f; --ember-hi: #ffb27a; --gold: #ffd27a; --go: #5fe39a; --go-hi: #a6f5c8; --warn: #ffbf47; --bad: #ff5d4d; --info: #8fb1ff;
  --flame: linear-gradient(135deg, #ffd27a 0%, #ff7a2f 42%, #e1301b 100%);
  --g-go: linear-gradient(135deg, #a6f5c8, #2fb873);
  --g-bad: linear-gradient(135deg, #ff9a8a, #d4301f);
  --g-panel: linear-gradient(165deg, rgba(41,37,33,.92) 0%, rgba(20,18,16,.96) 100%);
  --sh-panel: 0 0 0 1px var(--line) inset, 0 1px 0 rgba(255,255,255,.04) inset, 0 26px 60px -32px rgba(0,0,0,.95), 0 8px 20px -12px rgba(0,0,0,.6);
  --sh-flame: 0 8px 20px -12px rgba(255,90,31,.6), 0 1px 0 rgba(255,255,255,.4) inset, 0 -3px 8px rgba(120,20,0,.25) inset;
  --f-d: 'Big Shoulders Display', 'Arial Narrow', sans-serif; --f: 'Inter Tight', system-ui, sans-serif; --f-m: 'JetBrains Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.16,1,.3,1); --r: 28px; --side: 256px;
  --t-press: 120ms; --t-hover: 200ms; --t-panel: 320ms; --t-reveal: 600ms;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; color: var(--tx); font: 15px/1.45 var(--f); -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; background: radial-gradient(1100px 520px at 90% -10%, rgba(255,90,31,.12), transparent 60%), radial-gradient(800px 500px at -10% 110%, rgba(255,178,122,.05), transparent 60%), var(--bg); background-attachment: fixed; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; }
::selection { background: var(--ember); color: #000; }
::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }
.mono { font-family: var(--f-m); } .muted { color: var(--tx-2); } .dim { color: var(--tx-3); } .hot { color: var(--ember-hi); } .ok { color: var(--go-hi); } .no { color: #ff8a7a; }
.d { font-family: var(--f-d); text-transform: uppercase; font-weight: 800; letter-spacing: .01em; }
.flame-text { background: var(--flame); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hide { display: none !important; }

/* layout */
.app { display: grid; grid-template-columns: var(--side) 1fr; min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 4px; padding: 22px 14px; border-right: 1px solid var(--line); background: linear-gradient(180deg, rgba(21,19,16,.94), rgba(11,10,9,.94)); backdrop-filter: blur(20px); z-index: 30; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 12px 20px; }
.brand svg { width: 28px; height: 28px; }
.brand b { font: 900 24px/1 var(--f-d); letter-spacing: .14em; }
.brand small { display: block; font: 400 9px/1 var(--f-m); letter-spacing: .2em; color: var(--tx-3); text-transform: uppercase; margin-top: 4px; }
.side__label { padding: 16px 14px 6px; font: 400 10px/1 var(--f-m); letter-spacing: .2em; color: var(--tx-3); text-transform: uppercase; }
.nav-pill { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 16px; border-radius: 999px; color: var(--tx-2); font-weight: 500; transition: color .25s, background .25s; }
.nav-pill svg { width: 18px; height: 18px; flex: none; }
.nav-pill:hover { color: var(--tx); background: rgba(255,255,255,.04); }
.nav-pill.is-active { color: #1b0700; background: var(--flame); box-shadow: var(--sh-flame); font-weight: 700; }
.nav-pill .count { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 99px; display: grid; place-items: center; font: 700 11px/1 var(--f-m); color: #fff; background: var(--g-bad); }
.nav-pill.is-active .count { background: #1b0700; color: var(--gold); }
.side__foot { margin-top: auto; display: grid; gap: 10px; padding-top: 16px; }
.me { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 999px; background: rgba(255,255,255,.03); box-shadow: 0 0 0 1px var(--line) inset; }
.me b { display: block; font-size: 13px; } .me span { display: block; font-size: 11px; color: var(--tx-3); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 800 14px/1 var(--f-d); letter-spacing: .04em; color: #1b0700; background: var(--flame); box-shadow: var(--sh-flame); }
.av--sm { width: 30px; height: 30px; font-size: 12px; } .av--lg { width: 68px; height: 68px; font-size: 26px; } .av--xl { width: 110px; height: 110px; font-size: 44px; }
.main { min-width: 0; padding: 24px clamp(16px, 3vw, 40px) 70px; }
.top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.top h1 { font: 900 clamp(40px, 4.4vw, 68px)/.88 var(--f-d); text-transform: uppercase; }
.top p { margin: 8px 0 0; color: var(--tx-2); }
.top__l { display: flex; gap: 14px; align-items: center; }
.top__r { display: flex; flex-wrap: wrap; gap: 10px; }
.btn.burger { display: none; }
@media (max-width: 980px) {
  .app { grid-template-columns: 1fr; }
  .side { position: fixed; inset: 0 auto 0 0; width: 280px; transform: translateX(-105%); transition: transform .5s var(--ease); box-shadow: 30px 0 80px rgba(0,0,0,.6); }
  .nav-open .side { transform: none; }
  .btn.burger { display: inline-flex; }
}

/* buttons */
.btn { --h: 42px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--h); padding: 0 20px; border: 0; border-radius: 999px; cursor: pointer; overflow: hidden; isolation: isolate;
  font-weight: 700; font-size: 14px; white-space: nowrap; transition: transform var(--t-hover) var(--ease), box-shadow var(--t-hover), background var(--t-hover), opacity var(--t-hover); }
.btn:active { transform: scale(.97); transition-duration: var(--t-press); } .btn:disabled { opacity: .45; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn--sm { --h: 40px; padding: 0 16px; font-size: 13px; } .btn--xs { --h: 34px; padding: 0 12px; font-size: 12px; } .btn--lg { --h: 54px; padding: 0 28px; font-size: 16px; }
.btn--xl { --h: 66px; padding: 0 34px; font-size: 18px; }
.btn--block { width: 100%; } .btn--icon { width: var(--h); padding: 0; }
.btn--flame { color: #1b0700; background: var(--flame); box-shadow: var(--sh-flame); }
.btn--flame::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.6) 50%, transparent 70%); transform: translateX(-120%); transition: transform .8s var(--ease); }
.btn--flame:hover::before { transform: translateX(120%); }
.btn--glass { background: linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.025)); box-shadow: 0 0 0 1px var(--line-2) inset, 0 1px 0 rgba(255,255,255,.08) inset, 0 10px 24px -14px rgba(0,0,0,.8); }
.btn--glass:hover { background: linear-gradient(135deg, rgba(255,122,47,.2), rgba(255,255,255,.04)); box-shadow: 0 0 0 1px rgba(255,178,122,.4) inset; }
.btn--go { color: #062615; background: var(--g-go); box-shadow: 0 10px 24px -10px rgba(47,184,115,.7), 0 1px 0 rgba(255,255,255,.4) inset; }
.btn--bad { color: #2a0503; background: var(--g-bad); box-shadow: 0 10px 24px -10px rgba(212,48,31,.7), 0 1px 0 rgba(255,255,255,.35) inset; }
.btn--ghost { color: var(--tx-2); background: transparent; box-shadow: 0 0 0 1px var(--line-2) inset; }
.btn--ghost:hover { color: var(--tx); background: rgba(255,255,255,.04); }
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(0,0,0,.85); }

/* segmented */
.seg { display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(0,0,0,.4); box-shadow: 0 0 0 1px var(--line) inset, 0 2px 8px rgba(0,0,0,.45) inset; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg button { flex: none; height: 40px; padding: 0 15px; border: 0; border-radius: 999px; background: transparent; color: var(--tx-2); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all .3s var(--ease); }
.seg button:hover { color: var(--tx); }
.seg button.is-on { color: #1b0700; background: var(--flame); box-shadow: var(--sh-flame); }
.seg button .n { margin-left: 6px; font: 500 11px/1 var(--f-m); opacity: .7; }
.seg--days button { height: auto; padding: 9px 14px; display: grid; gap: 3px; justify-items: center; }
.seg--days small { font: 400 9px/1 var(--f-m); letter-spacing: .14em; opacity: .7; }
.seg--days b { font: 800 20px/1 var(--f-d); }

/* panels */
.panel { position: relative; min-width: 0; padding: 24px; border-radius: var(--r); background: var(--g-panel); box-shadow: var(--sh-panel); }
.panel--hot::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(600px 220px at 100% 0%, rgba(255,90,31,.16), transparent 70%); }
.panel--flame { background: var(--flame); color: #1b0700; box-shadow: var(--sh-flame), 0 40px 80px -40px rgba(255,90,31,.6); }
.ph { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.ph h3 { font-size: 15px; font-weight: 700; }
.ph .sub { font: 400 10px/1 var(--f-m); letter-spacing: .16em; text-transform: uppercase; color: var(--tx-3); }
.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.gm { grid-template-columns: minmax(0,1.65fr) minmax(0,1fr); } .gm-r { grid-template-columns: minmax(0,1fr) minmax(0,1.65fr); }
.mt { margin-top: 18px; }
@media (max-width: 1200px) { .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .gm, .gm-r { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } .panel { padding: 18px; } }

/* stats */
.stat { display: grid; gap: 8px; }
.stat__k { font: 400 10px/1 var(--f-m); letter-spacing: .18em; text-transform: uppercase; color: var(--tx-3); }
.stat__v { font: 900 clamp(38px, 3.4vw, 56px)/.9 var(--f-d); font-variant-numeric: tabular-nums; }
.stat__d { font-size: 12px; color: var(--tx-2); }
.stat__i { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--ember-hi); background: rgba(255,90,31,.12); box-shadow: 0 0 0 1px rgba(255,90,31,.28) inset; }
.stat__i svg { width: 18px; height: 18px; }
.panel--flame .stat__k, .panel--flame .stat__d { color: rgba(27,7,0,.65); }

/* badges */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font: 600 11px/1 var(--f-m); white-space: nowrap; text-transform: capitalize; color: var(--tx-2); background: rgba(255,255,255,.06); box-shadow: 0 0 0 1px var(--line) inset; }
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.b-ok { color: var(--go-hi); background: rgba(95,227,154,.1); box-shadow: 0 0 0 1px rgba(95,227,154,.28) inset; }
.b-hot { color: var(--ember-hi); background: rgba(255,90,31,.12); box-shadow: 0 0 0 1px rgba(255,90,31,.3) inset; }
.b-warn { color: #ffd38a; background: rgba(255,191,71,.12); box-shadow: 0 0 0 1px rgba(255,191,71,.3) inset; }
.b-info { color: #b8cdff; background: rgba(143,177,255,.12); box-shadow: 0 0 0 1px rgba(143,177,255,.3) inset; }
.b-bad { color: #ff9f93; background: rgba(255,93,77,.12); box-shadow: 0 0 0 1px rgba(255,93,77,.3) inset; }

/* forms */
.field { display: grid; gap: 7px; }
.field > span { font: 400 10px/1 var(--f-m); letter-spacing: .16em; text-transform: uppercase; color: var(--tx-3); padding-left: 4px; }
.input, .select, .textarea { width: 100%; height: 46px; padding: 0 16px; border: 0; border-radius: 14px; outline: none; color: var(--tx); background: rgba(0,0,0,.35); box-shadow: 0 0 0 1px var(--line-2) inset, 0 2px 8px rgba(0,0,0,.4) inset; transition: box-shadow .25s, background .25s; }
.textarea { height: auto; min-height: 100px; padding: 14px 16px; border-radius: 16px; resize: vertical; line-height: 1.5; }
.select { appearance: none; padding-right: 40px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ff7a2f' stroke-width='1.8' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; }
.select option { background: #1d1a17; }
.select--sm, .input--sm { height: 40px; font-size: 13px; padding-left: 14px; }
.input:focus, .select:focus, .textarea:focus { background-color: rgba(0,0,0,.5); box-shadow: 0 0 0 1px rgba(255,178,122,.7) inset, 0 0 0 4px rgba(255,90,31,.14); }
.input--xl { height: 72px; padding: 0 24px; border-radius: 20px; font: 600 26px/1 var(--f-m); letter-spacing: .14em; text-transform: uppercase; text-align: center; }
.search { position: relative; } .search svg { position: absolute; left: 16px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--tx-3); } .search .input { padding-left: 42px; }
.form { display: grid; gap: 14px; }
.check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; font-size: 14px; }
.check input { appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border-radius: 50%; background: rgba(0,0,0,.45); box-shadow: 0 0 0 1px var(--line-2) inset; cursor: pointer; display: grid; place-items: center; transition: all .2s; }
.check input:checked { background: var(--flame); box-shadow: var(--sh-flame); }
.check input:checked::after { content: ''; width: 6px; height: 10px; border: solid #1b0700; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 999px; font-size: 13px; font-weight: 600; background: rgba(255,255,255,.04); box-shadow: 0 0 0 1px var(--line-2) inset; cursor: pointer; transition: all .25s; }
.chip span i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--ember)); }
.chip input:checked + span { color: #1b0700; background: var(--flame); box-shadow: var(--sh-flame); }
.toggle { position: relative; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: 14px; }
.toggle input { appearance: none; width: 46px; height: 26px; margin: 0; border-radius: 99px; background: rgba(0,0,0,.45); box-shadow: 0 0 0 1px var(--line-2) inset; cursor: pointer; transition: background .3s; position: relative; }
.toggle input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--tx-2); transition: transform .35s var(--ease), background .3s; }
.toggle input:checked { background: var(--flame); }
.toggle input:checked::after { transform: translateX(20px); background: #1b0700; }

/* rows */
.rows { display: grid; gap: 8px; }
.row { display: grid; align-items: center; gap: 14px; min-height: 58px; padding: 9px 12px 9px 18px; border-radius: 16px; background: rgba(255,255,255,.025); box-shadow: 0 0 0 1px var(--line) inset; transition: background .25s, box-shadow .25s; }
.row:hover { background: rgba(255,255,255,.05); }
a.row, .row--link { cursor: pointer; }
.row__m { min-width: 0; }
.row__t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row__s { margin-top: 2px; font-size: 12px; color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rh { display: grid; gap: 14px; padding: 0 12px 6px 18px; font: 400 10px/1 var(--f-m); letter-spacing: .16em; text-transform: uppercase; color: var(--tx-3); }
.cdot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
@media (max-width: 760px) { .row { border-radius: 26px; grid-template-columns: 1fr auto !important; } .row > .opt { display: none; } .rh { display: none; } }
.empty { padding: 36px 20px; text-align: center; color: var(--tx-3); }
.empty b { display: block; font: 800 28px/1 var(--f-d); text-transform: uppercase; color: var(--tx-2); margin-bottom: 8px; }

/* charts */
.bars { display: flex; align-items: flex-end; gap: 5px; height: 170px; }
.bars__c { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; min-width: 0; }
.bars__b { width: 100%; max-width: 40px; min-height: 4px; border-radius: 999px; background: var(--flame); box-shadow: 0 8px 18px -10px rgba(255,90,31,.8); transform-origin: bottom; }
.bars__b--dim { background: rgba(255,255,255,.12); box-shadow: none; }
.bars__l { font: 400 9px/1 var(--f-m); color: var(--tx-3); white-space: nowrap; }
.bars__v { font: 600 10px/1 var(--f-m); color: var(--tx-2); }
.chart { width: 100%; display: block; overflow: visible; }
.chart text { font: 400 10px var(--f-m); fill: var(--tx-3); }
.chart .gl { stroke: rgba(255,255,255,.05); }
.heat { display: grid; grid-template-columns: 34px repeat(18, 1fr); gap: 4px; align-items: center; }
.heat span { font: 400 9px/1 var(--f-m); color: var(--tx-3); }
.heat i { aspect-ratio: 1.6; border-radius: 6px; background: rgba(255,90,31, var(--a)); box-shadow: 0 0 0 1px rgba(255,255,255,.03) inset; }
.cal { display: grid; grid-template-columns: repeat(17, 1fr); grid-template-rows: repeat(7, 1fr); grid-auto-flow: column; gap: 4px; }
.cal i { aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.06); }
.cal i.l1 { background: rgba(255,90,31,.45); } .cal i.l2 { background: var(--ember); box-shadow: 0 0 8px rgba(255,90,31,.7); }
.cal i.today { box-shadow: 0 0 0 2px var(--gold); }
.meter { height: 8px; border-radius: 99px; background: rgba(0,0,0,.4); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: inherit; background: var(--flame); transform-origin: left; }
.meter--go i { background: var(--g-go); }
.legend { display: flex; flex-wrap: wrap; gap: 8px; }
.legend span { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 999px; font-size: 12px; color: var(--tx-2); background: rgba(255,255,255,.04); }
.legend i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }

/* key card (door QR) */
.key { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; padding: 26px; border-radius: 36px; color: #1b0700; background: var(--flame); box-shadow: var(--sh-flame), 0 40px 90px -40px rgba(255,90,31,.7); }
.key::after { content: 'KILN'; position: absolute; right: -10px; bottom: -40px; font: 900 180px/1 var(--f-d); color: rgba(27,7,0,.08); pointer-events: none; }
.key__qr { width: 168px; height: 168px; padding: 12px; border-radius: 26px; background: #f2ece2; box-shadow: 0 16px 40px -14px rgba(27,7,0,.6); }
.key__qr img { width: 100%; height: 100%; display: block; }
.key h2 { font: 900 44px/.88 var(--f-d); text-transform: uppercase; }
.key .code { display: inline-block; margin-top: 12px; padding: 8px 14px; border-radius: 999px; font: 700 14px/1 var(--f-m); letter-spacing: .16em; background: rgba(27,7,0,.12); }
.key p { margin: 8px 0 0; font-size: 13px; color: rgba(27,7,0,.7); }
@media (max-width: 560px) { .key { grid-template-columns: 1fr; justify-items: center; text-align: center; } }

/* class session pill */
.sess { display: grid; grid-template-columns: 74px 1fr auto; gap: 14px; align-items: center; min-height: 66px; padding: 10px 12px 10px 18px; border-radius: 18px; background: rgba(255,255,255,.03); box-shadow: 0 0 0 1px var(--line) inset; }
.sess.is-mine { background: rgba(255,90,31,.09); box-shadow: 0 0 0 1px rgba(255,122,47,.45) inset; }
.sess.is-past { opacity: .4; }
.sess__t { font: 800 22px/1 var(--f-d); }
.sess__t small { display: block; font: 400 10px/1.4 var(--f-m); color: var(--tx-3); }
.sess__n { display: flex; align-items: center; gap: 10px; font: 800 22px/1 var(--f-d); text-transform: uppercase; }
.sess__m { margin-top: 3px; font-size: 12px; color: var(--tx-3); }
.cap { display: inline-flex; gap: 2px; vertical-align: middle; margin-left: 6px; }
.cap i { width: 4px; height: 10px; border-radius: 2px; background: rgba(255,255,255,.12); }
.cap i.on { background: var(--ember); }
@media (max-width: 560px) { .sess { grid-template-columns: 56px 1fr; border-radius: 26px; } .sess > :last-child { grid-column: 1 / -1; } }

/* week grid (staff schedule) */
.week { display: grid; grid-template-columns: repeat(7, minmax(130px, 1fr)); gap: 10px; overflow-x: auto; }
.week__d { display: grid; gap: 8px; align-content: start; }
.week__h { padding: 10px 14px; border-radius: 999px; text-align: center; background: rgba(255,255,255,.04); box-shadow: 0 0 0 1px var(--line) inset; }
.week__h b { font: 800 22px/1 var(--f-d); } .week__h small { display: block; font: 400 9px/1 var(--f-m); letter-spacing: .14em; color: var(--tx-3); }
.week__h.is-today { background: var(--flame); color: #1b0700; box-shadow: var(--sh-flame); } .week__h.is-today small { color: rgba(27,7,0,.6); }
.ws { display: grid; gap: 5px; padding: 12px 14px; border-radius: 22px; cursor: pointer; background: rgba(255,255,255,.035); box-shadow: 0 0 0 1px var(--line) inset, inset 4px 0 0 var(--c); transition: transform .3s var(--ease), background .25s; text-align: left; border: 0; color: inherit; }
.ws:hover { transform: translateY(-2px); background: rgba(255,255,255,.06); }
.ws.is-cancel { opacity: .4; text-decoration: line-through; }
.ws b { font: 800 17px/1 var(--f-d); text-transform: uppercase; }
.ws small { font: 400 10px/1.3 var(--f-m); color: var(--tx-3); }

/* desk result */
.result { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; padding: 26px; border-radius: 36px; transition: background .4s; }
.result--ok { background: linear-gradient(135deg, rgba(95,227,154,.2), rgba(47,184,115,.06)); box-shadow: 0 0 0 1.5px rgba(95,227,154,.55) inset, 0 30px 80px -30px rgba(47,184,115,.6); }
.result--no { background: linear-gradient(135deg, rgba(255,93,77,.2), rgba(212,48,31,.06)); box-shadow: 0 0 0 1.5px rgba(255,93,77,.6) inset, 0 30px 80px -30px rgba(212,48,31,.6); }
.result__big { font: 900 64px/.85 var(--f-d); text-transform: uppercase; }
.result--ok .result__big { color: var(--go-hi); } .result--no .result__big { color: #ff9f93; }
.scanner { position: relative; overflow: hidden; border-radius: 30px; background: #000; aspect-ratio: 4/3; }
.scanner video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scanner::after { content: ''; position: absolute; inset: 18%; border-radius: 26px; box-shadow: 0 0 0 2px var(--ember), 0 0 0 999px rgba(0,0,0,.45); }

/* timeline */
.tl { position: relative; display: grid; gap: 14px; padding-left: 22px; }
.tl::before { content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: linear-gradient(var(--ember), rgba(255,90,31,.05)); }
.tl__i { position: relative; font-size: 14px; line-height: 1.4; }
.tl__i::before { content: ''; position: absolute; left: -21px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 2px var(--ember), 0 0 10px rgba(255,90,31,.6); }
.tl__m { margin-top: 4px; font: 400 10px/1 var(--f-m); color: var(--tx-3); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; font-size: 14px; margin: 0; }
.kv dt { font: 400 10px/1.9 var(--f-m); letter-spacing: .14em; text-transform: uppercase; color: var(--tx-3); } .kv dd { margin: 0; }
.callout { display: flex; gap: 14px; align-items: center; padding: 14px 20px; border-radius: 18px; background: linear-gradient(135deg, rgba(255,90,31,.15), rgba(255,90,31,.04)); box-shadow: 0 0 0 1px rgba(255,122,47,.35) inset; }
.callout svg { flex: none; width: 20px; height: 20px; color: var(--ember-hi); }
@media (max-width: 760px) { .callout { border-radius: 24px; align-items: flex-start; flex-wrap: wrap; } }

/* modal + toast */
.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 18px; background: rgba(5,4,3,.72); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity .3s; }
.modal.is-open { opacity: 1; pointer-events: auto; }
.modal__c { width: min(560px, 100%); max-height: 90vh; overflow: auto; padding: 28px; border-radius: 36px; background: linear-gradient(165deg, #27221d, #12100e); box-shadow: 0 0 0 1px rgba(255,122,47,.18) inset, 0 50px 120px -30px #000; transform: translateY(30px) scale(.96); transition: transform .5s var(--ease); }
.modal__c--wide { width: min(880px, 100%); }
.modal.is-open .modal__c { transform: none; }
.mh { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.mh h2 { font: 900 34px/.9 var(--f-d); text-transform: uppercase; }
.mf { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 300; display: grid; gap: 8px; }
.toast { display: flex; align-items: center; gap: 10px; padding: 12px 18px 12px 12px; border-radius: 999px; font-size: 14px; background: linear-gradient(135deg, #2c2722, #1a1714); box-shadow: 0 0 0 1px var(--line-2) inset, 0 20px 40px -15px #000; animation: tin .5s var(--ease); }
.toast i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; color: #062615; background: var(--g-go); }
.toast--err i { background: var(--g-bad); color: #2a0503; }
@keyframes tin { from { transform: translateY(20px) scale(.95); opacity: 0; } }
.skel { height: 130px; border-radius: 28px; background: linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,.07), rgba(255,255,255,.03)); background-size: 200% 100%; animation: sk 1.2s infinite; }
@keyframes sk { to { background-position: -200% 0; } }

/* login */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.auth__art { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 40px; border-right: 1px solid var(--line); }
.auth__art canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.auth__big { position: relative; font: 900 clamp(80px, 11vw, 190px)/.8 var(--f-d); text-transform: uppercase; }
.auth__form { display: grid; place-items: center; padding: 40px 20px; }
.auth__card { width: min(420px, 100%); }
@media (max-width: 900px) { .auth { grid-template-columns: 1fr; } .auth__art { min-height: 240px; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 1ms !important; animation: none !important; } }