:root{
  --bg:#020805;
  --g:#39ff88;          /* primary neon */
  --g2:#00ff41;         /* classic matrix */
  --g-soft:rgba(57,255,136,.14);
  --g-line:rgba(57,255,136,.20);
  --g-line2:rgba(57,255,136,.38);
  --txt:#d6ffe4;
  --dim:#6fa883;
  --dim2:#3e6b4f;
  --cyan:#5ef2ff;
  --red:#ff4d6d;
  --panel:rgba(3,16,9,.50);
  --panel-hi:rgba(8,30,17,.72);
  --radius:18px;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'Space Grotesk',system-ui,sans-serif;
  --glow:0 0 18px rgba(57,255,136,.45), 0 0 2px rgba(57,255,136,.9);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{
  min-height:100dvh;background:var(--bg);color:var(--txt);
  font-family:var(--mono);font-size:14px;line-height:1.5;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg{display:block}
[hidden]{display:none!important}
::selection{background:rgba(57,255,136,.35);color:#fff}

/* ── background ───────────────────────────── */
#rain{position:fixed;inset:0;width:100%;height:100%;z-index:0}
.vignette{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(130% 90% at 50% 10%, transparent 45%, rgba(2,8,5,.45) 80%, rgba(2,8,5,.8) 100%);
}

/* ── boot ─────────────────────────────────── */
.boot{
  position:fixed;inset:0;z-index:50;display:grid;place-items:center;
  background:rgba(2,8,5,.92);transition:opacity .6s ease, visibility .6s;
}
.boot.done{opacity:0;visibility:hidden}
.boot-lines{font-size:13px;color:var(--g);text-shadow:var(--glow);min-width:260px;padding:24px}
.boot-lines div{opacity:0;animation:fadeIn .25s forwards;white-space:pre}
.boot-lines .err{color:var(--red);text-shadow:0 0 12px rgba(255,77,109,.6);white-space:normal;max-width:340px}
@keyframes fadeIn{to{opacity:1}}

/* ── layout ───────────────────────────────── */
.app{
  position:relative;z-index:2;max-width:1180px;margin:0 auto;
  padding:max(18px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  opacity:0;transform:translateY(8px);transition:opacity .8s ease .1s, transform .8s ease .1s;
}
.app.ready{opacity:1;transform:none}

.top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 0 22px}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand-mark{
  width:42px;height:42px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(145deg,rgba(57,255,136,.18),rgba(57,255,136,.03));
  border:1px solid var(--g-line2);box-shadow:inset 0 0 18px rgba(57,255,136,.15), 0 0 24px rgba(57,255,136,.12);
}
.brand-mark svg{width:26px;height:26px;fill:none;stroke:var(--g);stroke-width:1.8;stroke-linejoin:round;filter:drop-shadow(0 0 4px var(--g))}
h1{
  font-family:var(--sans);font-weight:700;letter-spacing:.14em;
  font-size:clamp(20px,4.6vw,30px);color:#eafff1;white-space:nowrap;
  text-shadow:0 0 22px rgba(57,255,136,.55), 0 0 2px rgba(57,255,136,.9);
}

/* glitch */
.glitch{position:relative}
.glitch::before,.glitch::after{
  content:attr(data-text);position:absolute;inset:0;pointer-events:none;opacity:0;
}
.glitch::before{color:var(--cyan);transform:translate(-2px,0);animation:glitchA 7s infinite steps(1)}
.glitch::after{color:var(--g2);transform:translate(2px,0);animation:glitchB 7s infinite steps(1)}
@keyframes glitchA{
  0%,92%,100%{opacity:0;clip-path:inset(0 0 0 0)}
  93%{opacity:.8;clip-path:inset(10% 0 60% 0)}
  95%{opacity:.8;clip-path:inset(55% 0 20% 0);transform:translate(-3px,1px)}
  97%{opacity:.6;clip-path:inset(30% 0 45% 0)}
}
@keyframes glitchB{
  0%,92%,100%{opacity:0}
  94%{opacity:.7;clip-path:inset(65% 0 5% 0)}
  96%{opacity:.7;clip-path:inset(5% 0 75% 0);transform:translate(3px,-1px)}
}

/* the quiet terminal cursor (write-mode entry) */
.cursor{
  width:11px;height:clamp(20px,4.4vw,28px);margin-left:4px;flex:none;align-self:center;
  background:var(--g);opacity:.55;border-radius:1px;position:relative;
  animation:blink 1.1s steps(1) infinite;box-shadow:0 0 10px rgba(57,255,136,.6);
  transition:opacity .2s;
}
.cursor::after{content:"";position:absolute;inset:-12px -10px}  /* bigger tap target */
.cursor:hover,.cursor:focus-visible{opacity:1;outline:none}
@keyframes blink{50%{opacity:0}}
body.authed .cursor{animation:none;opacity:.9;background:var(--cyan);box-shadow:0 0 12px rgba(94,242,255,.6)}

.root-chip{
  display:flex;align-items:center;gap:8px;flex:none;
  padding:6px 6px 6px 12px;border-radius:999px;font-size:11px;letter-spacing:.18em;color:var(--cyan);
  background:rgba(94,242,255,.08);border:1px solid rgba(94,242,255,.3);
}
.root-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:pulse 2s infinite}
.chip-btn{padding:4px 10px;border-radius:999px;background:rgba(94,242,255,.12);letter-spacing:.1em;font-size:11px}
.chip-btn:hover{background:rgba(94,242,255,.25)}
@keyframes pulse{50%{opacity:.35}}

.grid{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:18px;align-items:start}
.col-left{display:grid;gap:18px}

/* ── panels ───────────────────────────────── */
.panel{
  position:relative;padding:20px;border-radius:var(--radius);
  background:var(--panel);
  border:1px solid var(--g-line);
  backdrop-filter:blur(7px) saturate(140%);-webkit-backdrop-filter:blur(7px) saturate(140%);
  box-shadow:0 20px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04), inset 0 0 40px rgba(57,255,136,.04);
  overflow:hidden;
}
.panel::before{ /* corner brackets */
  content:"";position:absolute;inset:8px;pointer-events:none;border-radius:12px;
  background:
    linear-gradient(var(--g),var(--g)) top left/14px 1px,
    linear-gradient(var(--g),var(--g)) top left/1px 14px,
    linear-gradient(var(--g),var(--g)) bottom right/14px 1px,
    linear-gradient(var(--g),var(--g)) bottom right/1px 14px;
  background-repeat:no-repeat;opacity:.45;
}
.panel-label{font-size:11px;letter-spacing:.24em;color:var(--dim);margin-bottom:14px}

/* ── coupon ticket ────────────────────────── */
.ticket{
  --notch:14px;--stub:64px;
  display:flex;border-radius:14px;position:relative;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(57,255,136,.28), transparent 55%),
    linear-gradient(135deg, rgba(57,255,136,.16), rgba(0,255,65,.04));
  border:1px solid var(--g-line2);
  box-shadow:0 0 40px rgba(57,255,136,.18), inset 0 0 30px rgba(57,255,136,.08);
  -webkit-mask:radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, transparent 98%, #000) top/100% 51% no-repeat,
               radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, transparent 98%, #000) bottom/100% 51% no-repeat;
          mask:radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, transparent 98%, #000) top/100% 51% no-repeat,
               radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, transparent 98%, #000) bottom/100% 51% no-repeat;
  overflow:hidden;
}
.ticket::after{ /* sheen */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.10) 48%, transparent 60%);
  transform:translateX(-120%);animation:sheen 6s ease-in-out infinite;
}
@keyframes sheen{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.ticket-main{flex:1;display:flex;align-items:center;gap:14px;padding:22px 20px}
.ticket-count{
  font-family:var(--sans);font-weight:700;font-size:76px;line-height:.9;color:#f0fff5;
  text-shadow:0 0 30px rgba(57,255,136,.8), 0 0 4px rgba(57,255,136,1);
  font-variant-numeric:tabular-nums;min-width:.6em;
}
.ticket-unit{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--g);line-height:1.5}
.ticket-stub{
  width:var(--stub);flex:none;display:grid;place-items:center;
  border-left:2px dashed rgba(57,255,136,.35);
}
.stub-text{writing-mode:vertical-rl;transform:rotate(180deg);font-size:10px;letter-spacing:.22em;color:var(--dim)}
.ticket.bump{animation:bump .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes bump{30%{transform:scale(1.04)}}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.stat{padding:10px 12px;border-radius:12px;background:rgba(57,255,136,.05);border:1px solid rgba(57,255,136,.1)}
.stat-k{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.stat-v{display:block;font-size:22px;font-weight:600;color:var(--txt);font-variant-numeric:tabular-nums}
.stat-v.small{font-size:13px;margin-top:6px;letter-spacing:.08em}
.stat-v.ok{color:var(--g);text-shadow:0 0 10px rgba(57,255,136,.6)}
.stat-v.open{color:var(--cyan)}

/* ── rules ────────────────────────────────── */
.rules{list-style:none;display:grid;gap:12px}
.rules li{display:flex;gap:12px;align-items:flex-start;color:var(--dim);font-size:13px}
.rules b{color:var(--txt);font-weight:600}
.ic{width:20px;height:20px;flex:none;border-radius:6px;margin-top:1px;border:1px solid var(--g-line2);position:relative}
.ic::after{content:"";position:absolute;inset:5px;border-radius:2px}
.ic-clean::after{background:var(--g);box-shadow:0 0 8px var(--g)}
.ic-week::after{inset:4px 8px;background:var(--g);opacity:.7}
.ic-use{border-color:rgba(94,242,255,.45)}
.ic-use::after{border:1.5px solid var(--cyan)}

/* ── log ──────────────────────────────────── */
.log{list-style:none;display:grid;gap:2px;font-size:12.5px;max-height:260px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--dim2) transparent}
.log li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;padding:7px 4px;border-bottom:1px solid rgba(57,255,136,.07);cursor:pointer;border-radius:6px}
.log li:hover{background:rgba(57,255,136,.05)}
.log .d{color:var(--dim)}
.log .t{color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.log .t small{color:var(--dim2);margin-left:6px}
.log .v{font-weight:600}
.log .v.p{color:var(--g)}
.log .v.m{color:var(--cyan)}
.log .empty{color:var(--dim2);cursor:default;grid-template-columns:1fr}

/* ── calendar ─────────────────────────────── */
.cal-panel{padding:22px 22px 18px}
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.cal-title{font-family:var(--sans);font-weight:700;font-size:clamp(22px,4vw,30px);letter-spacing:.06em;text-align:center;color:#eafff1;text-shadow:0 0 18px rgba(57,255,136,.4)}
.cal-year{color:var(--dim);font-weight:400;margin-left:8px}
.nav-btn{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;
  border:1px solid var(--g-line);background:rgba(57,255,136,.05);transition:.2s;
}
.nav-btn:hover{border-color:var(--g-line2);background:rgba(57,255,136,.12);box-shadow:0 0 18px rgba(57,255,136,.2)}
.nav-btn svg{width:20px;height:20px;fill:none;stroke:var(--g);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.today-btn{
  display:block;margin:0 auto 16px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);
  padding:4px 12px;border-radius:999px;transition:.2s;
}
.today-btn:hover{color:var(--g);background:rgba(57,255,136,.08)}

.cal-dow,.cal-row{display:grid;grid-template-columns:30px repeat(7,1fr);gap:8px}
.cal-dow{margin-bottom:8px}
.cal-dow span{text-align:center;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim2)}
.cal-dow span.redeem{color:var(--dim)}
.cal-dow .wk{font-size:9px}
.cal-grid{display:grid;gap:8px;touch-action:pan-y}
.cal-grid.slide-l{animation:slideL .35s ease}
.cal-grid.slide-r{animation:slideR .35s ease}
@keyframes slideL{from{opacity:0;transform:translateX(24px)}}
@keyframes slideR{from{opacity:0;transform:translateX(-24px)}}

.wkn{
  display:grid;place-items:center;font-size:10px;color:var(--dim2);border-radius:8px;position:relative;
}
.wkn.got{color:var(--g);text-shadow:0 0 8px rgba(57,255,136,.7)}
.wkn.got::before{
  content:"";position:absolute;left:50%;top:14%;bottom:14%;width:2px;transform:translateX(-50%) translateX(-11px);
  background:var(--g);box-shadow:0 0 10px var(--g);border-radius:2px;
}

.day{
  position:relative;aspect-ratio:1/1;min-height:42px;border-radius:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(57,255,136,.035);border:1px solid rgba(57,255,136,.09);
  transition:transform .18s ease, background .2s, border-color .2s, box-shadow .2s;
  font-variant-numeric:tabular-nums;
}
.day:hover{transform:translateY(-2px);border-color:var(--g-line2);background:rgba(57,255,136,.08)}
.day:active{transform:scale(.96)}
.day .n{font-size:clamp(13px,2.2vw,16px);font-weight:600;color:var(--txt);line-height:1}
.day .tag{font-size:9px;letter-spacing:.06em;margin-top:4px;line-height:1;height:9px}
.day.out{opacity:.28}
.day.future .n{color:var(--dim)}
.day.weekend{background:rgba(0,0,0,.18)}
.day.wk-got{border-color:rgba(57,255,136,.16)}

.day.today{border-color:var(--g);box-shadow:0 0 0 1px var(--g) inset, 0 0 22px rgba(57,255,136,.35)}
.day.today::after{
  content:"";position:absolute;top:6px;right:6px;width:5px;height:5px;border-radius:50%;
  background:var(--g);box-shadow:0 0 8px var(--g);animation:pulse 1.6s infinite;
}
.day.clean{
  background:radial-gradient(circle at 50% 35%, rgba(57,255,136,.55), rgba(57,255,136,.14) 70%);
  border-color:var(--g);box-shadow:0 0 22px rgba(57,255,136,.35), inset 0 0 14px rgba(255,255,255,.08);
}
.day.clean .n{color:#04150b}
.day.clean .tag{color:#04150b;font-weight:800}
.day.use{border-color:rgba(94,242,255,.6);background:rgba(94,242,255,.08);box-shadow:inset 0 0 0 1px rgba(94,242,255,.25)}
.day.use .tag{color:var(--cyan)}
.day.use::before{
  content:"";position:absolute;inset:5px;border-radius:8px;border:1px dashed rgba(94,242,255,.45);pointer-events:none;
}
.day.clean.use{background:radial-gradient(circle at 50% 35%, rgba(57,255,136,.5), rgba(94,242,255,.18) 75%)}
.day.selected{outline:2px solid var(--g);outline-offset:2px}
.day.pop{animation:pop .7s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{0%{transform:scale(.8)}40%{transform:scale(1.12)}}

.legend{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;margin-top:18px;font-size:11px;color:var(--dim)}
.legend span{display:flex;align-items:center;gap:7px}
.lg{width:12px;height:12px;border-radius:4px;display:inline-block}
.lg-clean{background:var(--g);box-shadow:0 0 8px var(--g)}
.lg-use{border:1px dashed var(--cyan);background:rgba(94,242,255,.1)}
.lg-week{width:3px;height:12px;background:var(--g);box-shadow:0 0 8px var(--g);border-radius:2px}

.foot{display:flex;justify-content:center;gap:8px;margin:26px 0 6px;font-size:11px;letter-spacing:.18em;color:var(--dim2)}
.foot .sep{opacity:.5}

/* ── overlays / sheets ────────────────────── */
.overlay{
  position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(1,5,3,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease, visibility .28s;
}
.overlay.open{opacity:1;visibility:visible;pointer-events:auto}
.sheet{
  position:relative;width:100%;max-width:440px;max-height:calc(100dvh - 40px);overflow:auto;
  padding:26px 24px 24px;border-radius:22px;
  background:linear-gradient(180deg, rgba(10,34,19,.92), rgba(3,14,8,.95));
  border:1px solid var(--g-line2);
  box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 60px rgba(57,255,136,.12), inset 0 1px 0 rgba(255,255,255,.06);
  transform:translateY(16px) scale(.98);transition:transform .35s cubic-bezier(.2,.9,.3,1.1);
}
.overlay.open .sheet{transform:none}
.sheet-grip{display:none}
.x-btn{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:var(--dim)}
.x-btn:hover{background:rgba(57,255,136,.1);color:var(--g)}
.x-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.sheet-kicker{font-size:11px;letter-spacing:.22em;color:var(--dim);text-transform:uppercase}
.sheet-title{font-family:var(--sans);font-size:24px;font-weight:700;letter-spacing:.04em;color:#eefff4;margin:4px 0 16px;text-shadow:0 0 16px rgba(57,255,136,.35)}
.sheet-title.center{text-align:center;letter-spacing:.16em;font-size:20px;margin-bottom:6px}

.rows{display:grid;gap:8px;margin-bottom:16px}
.row{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;
  background:rgba(57,255,136,.05);border:1px solid rgba(57,255,136,.1);
}
.row .badge{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;font-weight:800;font-size:13px}
.row .badge.p{background:var(--g);color:#04150b;box-shadow:0 0 14px rgba(57,255,136,.5)}
.row .badge.m{border:1px dashed var(--cyan);color:var(--cyan)}
.row .badge.n{border:1px solid var(--g-line);color:var(--dim)}
.row .meta{flex:1;min-width:0}
.row .meta b{display:block;font-weight:600;color:var(--txt)}
.row .meta span{display:block;font-size:12px;color:var(--dim);overflow-wrap:anywhere}
.rm-btn{font-size:11px;letter-spacing:.1em;color:var(--dim);padding:6px 10px;border-radius:8px;border:1px solid rgba(57,255,136,.12);flex:none}
.rm-btn:hover{color:var(--red);border-color:rgba(255,77,109,.4)}
.rm-btn.armed{color:#fff;background:var(--red);border-color:var(--red)}

.weekline{font-size:12px;color:var(--dim);padding:0 2px;margin:-4px 0 16px}
.weekline b{color:var(--g);font-weight:600}
.weekline b.open{color:var(--cyan)}

.actions{display:grid;gap:10px;padding-top:16px;border-top:1px solid rgba(57,255,136,.12)}
.note-field{
  width:100%;padding:12px 14px;border-radius:12px;font:inherit;font-size:13px;color:var(--txt);
  background:rgba(0,0,0,.3);border:1px solid var(--g-line);outline:none;transition:.2s;
}
.note-field:focus{border-color:var(--g);box-shadow:0 0 0 3px rgba(57,255,136,.15)}
.note-field::placeholder{color:var(--dim2)}
.btn-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn{
  position:relative;padding:14px 12px;border-radius:14px;font-weight:600;letter-spacing:.08em;font-size:13px;
  border:1px solid var(--g-line2);background:rgba(57,255,136,.07);color:var(--txt);transition:.2s;overflow:hidden;
}
.btn small{display:block;font-weight:400;font-size:10.5px;letter-spacing:.04em;color:var(--dim);margin-top:3px;text-transform:none}
.btn:hover:not(:disabled){background:rgba(57,255,136,.14);box-shadow:0 0 22px rgba(57,255,136,.2)}
.btn-primary{background:linear-gradient(135deg,#39ff88,#00e86a);color:#03140a;border-color:transparent;box-shadow:0 0 26px rgba(57,255,136,.35)}
.btn-primary small{color:rgba(3,20,10,.7)}
.btn-primary:hover:not(:disabled){background:linear-gradient(135deg,#5dffa0,#14ff7e);box-shadow:0 0 34px rgba(57,255,136,.55)}
.btn-use{border-color:rgba(94,242,255,.45);background:rgba(94,242,255,.08)}
.btn-use:hover:not(:disabled){background:rgba(94,242,255,.16);box-shadow:0 0 22px rgba(94,242,255,.25)}
.btn:disabled{opacity:.38;cursor:not-allowed;filter:saturate(.3)}
.btn.wide{width:100%}
.btn.loading{color:transparent!important}
.btn.loading::after{
  content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px;border-radius:50%;
  border:2px solid currentColor;border-color:#03140a transparent #03140a transparent;animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* auth */
.sheet.auth{max-width:380px;text-align:left}
.auth-ring{
  width:64px;height:64px;margin:6px auto 14px;border-radius:50%;display:grid;place-items:center;position:relative;
  border:1px solid var(--g-line2);box-shadow:0 0 30px rgba(57,255,136,.25), inset 0 0 20px rgba(57,255,136,.12);
}
.auth-ring::before{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  border:1px solid transparent;border-top-color:var(--g);border-right-color:rgba(57,255,136,.3);animation:spin 2.4s linear infinite;
}
.auth-ring svg{width:26px;height:26px;fill:none;stroke:var(--g);stroke-width:1.8;stroke-linecap:round;filter:drop-shadow(0 0 4px var(--g))}
.auth-sub{text-align:center;font-size:12px;color:var(--dim);margin-bottom:20px}
.auth.granted .auth-ring{border-color:var(--g);box-shadow:0 0 50px rgba(57,255,136,.6)}
.auth.granted .auth-sub{color:var(--g)}
.field{
  display:flex;align-items:center;gap:10px;padding:0 14px;margin-bottom:14px;border-radius:14px;
  background:rgba(0,0,0,.35);border:1px solid var(--g-line2);transition:.2s;
}
.field:focus-within{border-color:var(--g);box-shadow:0 0 0 3px rgba(57,255,136,.15), 0 0 24px rgba(57,255,136,.2)}
.field .prompt{color:var(--g);font-weight:800}
.field input{flex:1;min-width:0;padding:15px 0;background:none;border:0;outline:none;color:var(--txt);font:inherit;font-size:16px;letter-spacing:.12em}
.field input::placeholder{color:var(--dim2);letter-spacing:.1em}
.auth.shake{animation:shake .45s}
.auth.shake .auth-sub{color:var(--red)}
.auth.shake .field{border-color:var(--red);box-shadow:0 0 0 3px rgba(255,77,109,.15)}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}

/* toasts */
.toasts{position:fixed;z-index:60;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translateX(-50%);display:grid;gap:8px;width:min(92vw,420px);pointer-events:none}
.toast{
  padding:12px 16px;border-radius:12px;font-size:13px;
  background:rgba(5,22,12,.95);border:1px solid var(--g-line2);color:var(--txt);
  box-shadow:0 12px 30px rgba(0,0,0,.5), 0 0 20px rgba(57,255,136,.15);
  animation:toastIn .3s ease;
}
.toast::before{content:"> ";color:var(--g)}
.toast.err{border-color:rgba(255,77,109,.5)}
.toast.err::before{content:"! ";color:var(--red)}
.toast.out{opacity:0;transform:translateY(6px);transition:.3s}
@keyframes toastIn{from{opacity:0;transform:translateY(10px)}}

/* ── responsive ───────────────────────────── */
@media (max-width:900px){
  .grid{grid-template-columns:1fr}
  .col-left{display:contents}
  .coupon-panel{order:1}
  .cal-panel{order:2}
  .log-panel{order:3}
  .rules-panel{order:4}
}
@media (max-width:560px){
  body{font-size:13px}
  .top{margin-bottom:16px}
  .brand{gap:10px}
  .brand-mark{width:36px;height:36px;border-radius:10px}
  .brand-mark svg{width:22px;height:22px}
  h1{letter-spacing:.1em}
  .panel{padding:16px;border-radius:16px}
  .cal-panel{padding:16px 12px 14px}
  .cal-dow,.cal-row{grid-template-columns:20px repeat(7,1fr);gap:5px}
  .cal-grid{gap:5px}
  .day{border-radius:10px;min-height:0}
  .day .tag{font-size:8px;margin-top:3px}
  .wkn{font-size:8.5px}
  .wkn.got::before{transform:translateX(-50%) translateX(-7px)}
  .ticket-count{font-size:64px}
  .ticket-main{padding:18px 16px}
  .ticket{--stub:52px}
  .root-chip span:not(.dot){display:none}
  .root-chip{padding:5px 5px 5px 10px}

  .overlay{align-items:flex-end;padding:0}
  .sheet{max-width:none;border-radius:24px 24px 0 0;padding:14px 18px max(22px,env(safe-area-inset-bottom));transform:translateY(100%);max-height:88dvh}
  .sheet.auth{max-width:none}
  .note-field{font-size:16px}
  .sheet-grip{display:block;width:44px;height:4px;border-radius:4px;background:var(--dim2);margin:0 auto 14px}
  .x-btn{top:10px;right:10px}
}
@media (max-width:360px){
  h1{font-size:18px;letter-spacing:.06em}
  .stats{gap:6px}
  .stat{padding:8px}
  .stat-v{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .cursor{animation:none}
}