/* Layout: a yellow pachislot cabinet parked on the Shibuya scramble crossing at night; beside it the 剩餘數量 board and the viewer's own tickets.
   Redemption and the admin backend are separate views on the same night ground. Single-theme by choice: always "after work". */
:root{
  color-scheme: dark;
  --night:#120F26;
  --night-hi:#1C1840;
  --field:#0F0C24;
  --cabinet:#2A2350;
  --ink:#1B1533;
  --paint:#F5F1E8;
  --dim:#A39CC6;
  --bulb:#FFC23D;
  --neon:#FF4F86;
  --glass:#09071A;
  --line:rgba(245,241,232,.12);
  --edge:rgba(245,241,232,.22);

  --cab:#FFCB2E;
  --cab-hi:#FFE27A;
  --cab-lo:#EDA900;
  --cab-edge:#B87F00;
  --cab-ink:#3A2900;

  --tier-A:#FFC23D;
  --tier-B:#FF4F86;
  --tier-C:#4CC9F0;
  --tier-D:#5FE3A1;
  --tier-E:#B79CFF;
  --tier-P:#F5F1E8;
  --seal:#E0336A;
  --err:#FF9DB9;

  --font-display:"Huninn","Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  --font-body:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  --font-sign:"Bungee","Arial Black","Noto Sans TC",sans-serif;
  --font-led:"DotGothic16","Consolas","Courier New",monospace;

  --cell:clamp(58px, 17vw, 86px);
  --rig-gap:46px;
}

html,body{background:var(--night);}
body{
  color:var(--paint);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  background:
    radial-gradient(1100px 560px at 22% -8%, #2E2160 0%, transparent 62%),
    radial-gradient(760px 540px at 26% 46%, rgba(255,203,46,.13), transparent 62%),
    var(--night);
  min-height:100%;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
}
button,input{font:inherit;}
:focus-visible{outline:3px solid var(--bulb); outline-offset:3px;}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

.wrap{max-width:1120px; margin:0 auto; padding-block:20px 64px; display:flex; flex-direction:column; gap:24px;}
.view{display:flex; flex-direction:column; gap:28px;}

/* ---------- Top bar ---------- */
.topbar{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:36px;}
.eyebrow{margin:0; font-size:13px; letter-spacing:.22em; color:var(--bulb); display:flex; align-items:center; gap:10px;}
.eyebrow::before{content:""; width:28px; height:2px; background:var(--bulb); box-shadow:0 0 8px var(--bulb);}
.admin-entry{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px; border-radius:999px;
  border:1px solid var(--edge); background:rgba(18,15,38,.6);
  color:var(--paint); font-size:14px; cursor:pointer;
}
.admin-entry:hover{background:rgba(245,241,232,.08);}

/* ---------- Header: the neon sign ---------- */
.hero{display:flex; flex-direction:column; gap:12px; max-width:44rem;}
.sign{
  margin:0;
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(34px, 6.4vw, 64px);
  line-height:1.15;
  letter-spacing:.03em;
  text-wrap:balance;
  color:#FFF7DA;
}
.tube{
  text-shadow:0 0 2px #fff, 0 0 10px var(--cab), 0 0 26px var(--cab), 0 0 52px rgba(255,203,46,.5);
  animation:flicker 1.8s ease-out 1 both;
}
.star{display:inline-block; margin-left:.08em; animation:twinkle 3.2s ease-in-out infinite;}
.lede{margin:0; color:var(--dim); max-width:34em; text-wrap:pretty;}
.lede b{color:var(--paint); font-weight:500;}
.mode-chip{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; color:var(--paint);
  padding:4px 12px; border-radius:999px;
  background:rgba(245,241,232,.06); border:1px solid var(--line);
}
.mode-chip::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--dim);}
.mode-chip[data-mode="online"]::before{background:var(--tier-D); box-shadow:0 0 8px var(--tier-D);}
.mode-chip[data-mode="local"]::before{background:var(--bulb);}
.mode-chip[data-mode="stale"]::before{background:var(--neon);}

/* ---------- Stage ---------- */
.stage{display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr); gap:40px; align-items:start;}
@media (max-width:860px){ .stage{grid-template-columns:minmax(0, 1fr);} }

.machine-col{position:relative; padding-bottom:56px;}
.crossing{
  position:absolute; left:0; right:0; bottom:0; height:190px; z-index:0;
  background:repeating-linear-gradient(90deg, rgba(245,241,232,.9) 0 30px, transparent 30px 62px);
  transform:perspective(300px) rotateX(58deg);
  transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(to top, #000 0%, rgba(0,0,0,.6) 40%, transparent 92%);
          mask-image:linear-gradient(to top, #000 0%, rgba(0,0,0,.6) 40%, transparent 92%);
  opacity:.28;
  pointer-events:none;
}
.rig{position:relative; z-index:1; max-width:460px; margin:0 auto; display:flex; flex-direction:column; gap:14px;}
.machine{position:relative; padding-right:var(--rig-gap);}

.marquee{
  position:relative;
  background:linear-gradient(180deg, var(--cab-hi), var(--cab));
  border:2px solid var(--cab-edge); border-bottom:0;
  border-radius:24px 24px 6px 6px;
  padding:22px 14px 12px;
  display:flex; align-items:baseline; justify-content:center; flex-wrap:wrap; column-gap:10px; row-gap:2px;
}
.bulbs{position:absolute; left:18px; right:18px; top:8px; display:flex; justify-content:space-between;}
.bulbs i{
  width:8px; height:8px; border-radius:50%;
  background:#C98F00;
  box-shadow:inset 0 1px 1px rgba(0,0,0,.25);
  animation:chase 1.5s linear infinite;
  animation-delay:calc(var(--i) * -0.115s);
}
.marquee-title{font-family:var(--font-display); font-size:clamp(20px, 5.2vw, 28px); line-height:1.1; color:var(--cab-ink); text-shadow:0 2px 0 rgba(255,255,255,.45); white-space:nowrap;}
.marquee-sub{font-family:var(--font-sign); font-size:11px; letter-spacing:.12em; color:var(--cab-ink); opacity:.75;}

.cabinet{
  background:linear-gradient(180deg, var(--cab-hi), var(--cab) 22%, var(--cab-lo));
  border:2px solid var(--cab-edge); border-top-color:var(--cab-lo);
  border-radius:6px 6px 20px 20px;
  padding:16px;
  display:flex; flex-direction:column; gap:16px;
  box-shadow:0 36px 60px -24px rgba(0,0,0,.7), 0 0 70px -16px rgba(255,203,46,.4), inset 0 1px 0 rgba(255,255,255,.55);
}

.leds{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px;}
.led{background:var(--glass); border:1px solid #000; border-radius:8px; padding:5px 8px 6px; display:flex; flex-direction:column; gap:1px; min-width:0;}
.led-label{font-size:11px; letter-spacing:.1em; color:var(--dim);}
.led-val{font-family:var(--font-led); font-size:clamp(14px, 3.6vw, 18px); line-height:1.3; color:var(--bulb); text-shadow:0 0 6px rgba(255,194,61,.65); white-space:nowrap; font-variant-numeric:tabular-nums; overflow:hidden;}

.window{
  position:relative;
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px;
  background:var(--glass);
  padding:8px; border-radius:12px;
  border:3px solid #0B0918;
  box-shadow:inset 0 0 0 2px rgba(255,194,61,.3), 0 0 0 4px #19143A;
  transition:box-shadow .3s;
}
.window.win{box-shadow:inset 0 0 0 2px var(--bulb), 0 0 0 4px #19143A, 0 0 34px rgba(255,79,134,.55);}
.reel{
  position:relative; height:calc(var(--cell) * 3); overflow:hidden; border-radius:6px;
  background:linear-gradient(180deg, #D9D2C2, var(--paint) 30%, var(--paint) 70%, #D9D2C2);
}
.reel::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(9,7,26,.78), rgba(9,7,26,0) 30%, rgba(9,7,26,0) 70%, rgba(9,7,26,.78));
}
.strip{position:absolute; left:0; right:0; top:0; will-change:transform;}
.sym{height:var(--cell); display:grid; place-items:center;}
.sym span{
  font-family:var(--font-sign);
  font-size:calc(var(--cell) * .6);
  line-height:1;
  color:var(--c);
  text-shadow:
    2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 2px 0 var(--ink), 0 -2px 0 var(--ink),
    2px 2px 0 var(--ink), -2px 2px 0 var(--ink), 2px -2px 0 var(--ink), -2px -2px 0 var(--ink),
    0 5px 0 var(--ink);
}
.sym[data-k="P"] span{
  font-family:var(--font-display);
  font-size:calc(var(--cell) * .38);
  color:var(--seal);
  text-shadow:none;
  width:calc(var(--cell) * .66); height:calc(var(--cell) * .66);
  display:grid; place-items:center;
  border:3px solid var(--seal); border-radius:50%;
  transform:rotate(-8deg);
}
.reel.spinning .sym span{filter:blur(1.3px);}
.sym.hit span{animation:hit .55s ease-out 2;}
.sym[data-k="P"].hit span{animation:hit-p .55s ease-out 2;}
.payline{position:absolute; left:2px; right:2px; top:50%; height:2px; margin-top:-1px; background:var(--neon); box-shadow:0 0 8px var(--neon); opacity:.55; pointer-events:none; z-index:2;}
.payline::before,.payline::after{content:""; position:absolute; top:-5px; border:6px solid transparent;}
.payline::before{left:-4px; border-left-color:var(--neon);}
.payline::after{right:-4px; border-right-color:var(--neon);}
.window.win .payline{opacity:1;}
.reach{
  position:absolute; left:50%; top:-16px; transform:translateX(-50%); z-index:3;
  font-family:var(--font-display); font-size:20px; line-height:1.4;
  color:var(--ink); background:var(--neon);
  padding:2px 16px; border-radius:999px; white-space:nowrap;
  box-shadow:0 0 18px var(--neon);
  animation:blink .32s steps(2) infinite;
}

/* lever — the only control on the machine */
.lever{
  --rod:clamp(70px, 19vw, 96px);
  position:absolute; right:2px;
  top:calc(67% - var(--rod) - 17px);
  width:40px; height:calc(var(--rod) * 2 + 34px);
  padding:0; border:0; background:none; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.lever:disabled{cursor:not-allowed;}
.lever-base{
  position:absolute; left:-14px; right:5px;
  top:calc(var(--rod) + 17px - 13px); height:26px;
  border-radius:0 10px 10px 0;
  background:linear-gradient(180deg, var(--cab-lo), var(--cab-edge));
  border:1px solid #6B4A00;
}
.rod{
  position:absolute; left:50%; top:17px; width:8px; margin-left:-4px; height:var(--rod);
  transform-origin:50% 100%; border-radius:4px;
  background:linear-gradient(90deg, #77748C, #F4F2FA 45%, #8D8AA0);
}
.knob{
  position:absolute; left:50%; top:0; width:34px; height:34px; margin-left:-17px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #FFD6E3 0 12%, var(--neon) 46%, #9E1E4C 100%);
  box-shadow:0 4px 10px rgba(0,0,0,.45), 0 0 16px rgba(255,79,134,.45);
  transition:filter .2s;
}
.lever:not(:disabled) .knob{animation:knob-idle 2.2s ease-in-out infinite;}
.lever.blocked .knob{filter:grayscale(.7) brightness(.75);}
.lever.pulling .rod{animation:rod-pull .75s linear;}
.lever.pulling .knob{animation:knob-pull .75s linear;}

.machine.jackpot .bulbs i{animation-duration:.45s;}
.machine.jackpot .marquee-title{animation:glow .45s ease-in-out infinite alternate;}

/* tray + ticket */
.tray{margin-right:var(--rig-gap); position:relative; z-index:1; display:flex; flex-direction:column; gap:10px;}
.tray-msg{margin:0; font-size:14px; line-height:1.5; color:var(--paint); min-height:1.5em;}
.tray-msg.err{color:var(--err);}
.tray-empty{
  margin:0;
  border:2px dashed rgba(245,241,232,.22); border-radius:12px;
  padding:14px 18px;
  background:rgba(18,15,38,.72);
  color:var(--dim); font-size:14px;
  display:flex; flex-direction:column; gap:2px;
}
.tray-empty strong{color:var(--paint); font-weight:500; letter-spacing:.1em; font-size:13px;}
.ticket{
  display:grid; grid-template-columns:84px minmax(0, 1fr);
  background:var(--paint); color:var(--ink);
  border-radius:10px; overflow:hidden;
  box-shadow:0 0 0 3px var(--c), 0 20px 40px -14px rgba(0,0,0,.7);
}
.ticket.in{animation:ticket-in .5s cubic-bezier(.2,.9,.3,1.25);}
.ticket-stub{
  background:var(--c);
  border-right:2px dashed rgba(27,21,51,.45);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  padding:12px 6px; text-align:center;
  font-family:var(--font-led); font-size:14px; line-height:1.3;
}
.ticket[data-k="P"] .ticket-stub{background:#E7E1D3;}
.ticket-main{display:flex; align-items:center; flex-wrap:wrap; gap:12px 14px; padding:14px 16px; min-width:0;}
.t-badge{
  flex:none; width:52px; height:52px; border-radius:12px;
  background:var(--ink); color:var(--c);
  display:grid; place-items:center;
  font-family:var(--font-sign); font-size:28px; line-height:1;
}
.ticket[data-k="P"] .t-badge{font-family:var(--font-display); font-size:24px;}
.t-text{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 120px;}
.t-tier{margin:0; font-family:var(--font-display); font-size:22px; line-height:1.2;}
.t-name{margin:0; font-weight:700; font-size:15px; line-height:1.4; overflow-wrap:anywhere;}
.t-meta{margin:0; font-size:12px; color:#5B5577;}
.t-action{flex:none;}
.t-done{margin:0; font-size:13px; color:#5B5577; text-align:right;}

/* small yellow action */
.btn-redeem{
  font-size:14px; font-weight:700;
  padding:6px 16px; border-radius:999px; border:0; cursor:pointer;
  color:var(--cab-ink);
  background:linear-gradient(180deg, var(--cab-hi), var(--cab));
  box-shadow:0 3px 0 var(--cab-edge);
  white-space:nowrap;
}
.btn-redeem:active{transform:translateY(2px); box-shadow:0 1px 0 var(--cab-edge);}
.btn-redeem.alt{background:transparent; color:var(--cab); box-shadow:inset 0 0 0 2px var(--cab);}
.btn-redeem.alt:active{transform:translateY(1px); box-shadow:inset 0 0 0 2px var(--cab);}
.done-actions{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.done-actions .primary{align-self:auto;}

/* ---------- Side column ---------- */
.side{display:flex; flex-direction:column; gap:32px; min-width:0;}
h2{margin:0; font-family:var(--font-display); font-weight:400; font-size:22px; line-height:1.3; letter-spacing:.04em; text-wrap:balance;}
h3{margin:0; font-family:var(--font-display); font-weight:400; font-size:20px; line-height:1.3;}
.sec-head{display:flex; align-items:baseline; justify-content:space-between; gap:8px 12px; flex-wrap:wrap;}
.sec-meta{margin:0; font-size:13px; color:var(--dim); font-variant-numeric:tabular-nums;}

.board{
  background:var(--night-hi);
  border:1px solid var(--line);
  border-radius:16px;
  padding:20px;
  display:flex; flex-direction:column; gap:14px;
}
.board-sum{margin:0; font-family:var(--font-led); font-size:16px; color:var(--bulb); font-variant-numeric:tabular-nums;}
.prize-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column;}
.prize{display:grid; grid-template-columns:44px minmax(0, 1fr) auto; gap:12px; align-items:center; padding-block:12px; border-top:1px solid var(--line);}
.prize:first-child{border-top:0; padding-top:2px;}
.badge{
  width:44px; height:44px; border-radius:10px;
  background:var(--c); color:var(--ink);
  display:grid; place-items:center;
  font-family:var(--font-sign); font-size:22px; line-height:1;
  box-shadow:0 0 18px -6px var(--c);
}
.badge.is-p{font-family:var(--font-display); font-size:20px;}
.prize-info{min-width:0;}
.prize-title{margin:0; font-size:15px; line-height:1.45; overflow-wrap:anywhere;}
.prize-title b{font-family:var(--font-display); font-weight:400; color:var(--c); margin-right:8px;}
.pips{display:flex; flex-wrap:wrap; gap:3px; margin-top:6px;}
.pips i{width:7px; height:7px; border-radius:2px; background:var(--c);}
.pips i.gone{background:transparent; box-shadow:inset 0 0 0 1px rgba(245,241,232,.2);}
.prize-count{margin:0; font-family:var(--font-led); text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums;}
.prize-count b{font-weight:400; font-size:22px; color:var(--paint);}
.prize-count span{font-size:15px; color:var(--dim);}
.prize.soldout .badge{filter:grayscale(1) brightness(.55); box-shadow:none;}
.prize.soldout .prize-title{color:var(--dim);}
.prize.soldout .prize-count b{color:var(--dim);}

.mine{display:flex; flex-direction:column; gap:12px;}
.mine-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column;}
.mine-item{display:grid; grid-template-columns:auto minmax(0, 1fr) auto; gap:12px; align-items:center; padding-block:10px; border-top:1px solid var(--line);}
.mine-item:first-child{border-top:0;}
.mine-text{margin:0; font-size:15px; line-height:1.4; min-width:0; overflow-wrap:anywhere;}
.mine-text small{display:block; font-size:12px; color:var(--dim); font-variant-numeric:tabular-nums;}
.mine-status{margin:0; font-size:13px; text-align:right; color:var(--tier-D);}
.mine-status.shipped{color:var(--dim);}
.mini{
  width:26px; height:26px; border-radius:7px; flex:none;
  background:var(--c); color:var(--ink);
  display:inline-grid; place-items:center;
  font-family:var(--font-sign); font-size:13px; line-height:1;
}
.mini.is-p{font-family:var(--font-display); font-size:13px;}
.empty{margin:0; font-size:14px; color:var(--dim);}
.foot{margin:0; font-size:13px; color:var(--dim); max-width:40em;}

/* ---------- shared form bits ---------- */
.back{align-self:flex-start; background:none; border:0; padding:4px 0; color:var(--dim); font-size:14px; cursor:pointer;}
.back:hover{color:var(--paint);}
.card{
  background:var(--night-hi);
  border:1px solid var(--line);
  border-top:6px solid var(--c, var(--cab));
  border-radius:18px;
  padding:24px;
  display:flex; flex-direction:column; gap:20px;
}
.field{display:flex; flex-direction:column; gap:8px;}
.field-label{font-size:14px; font-weight:500; letter-spacing:.06em;}
.input{
  color:var(--paint); background:var(--field);
  border:1px solid var(--edge); border-radius:10px;
  padding:12px 14px; width:100%;
}
.input::placeholder{color:#6F6894;}
.input:focus{outline:none; border-color:var(--bulb); box-shadow:0 0 0 3px rgba(255,194,61,.25);}
.primary{
  align-self:flex-start;
  font-family:var(--font-display); font-size:20px; line-height:1.2;
  padding:12px 28px; border:0; border-radius:999px; cursor:pointer;
  color:var(--cab-ink);
  background:linear-gradient(180deg, var(--cab-hi), var(--cab) 50%, var(--cab-lo));
  box-shadow:0 5px 0 var(--cab-edge);
}
.primary:active:not(:disabled){transform:translateY(3px); box-shadow:0 2px 0 var(--cab-edge);}
.primary:disabled{filter:grayscale(.7) brightness(.65); cursor:not-allowed;}
.ghost{
  border-radius:999px; padding:7px 16px; cursor:pointer; font-size:14px;
  border:1px solid var(--edge); background:transparent; color:var(--paint);
}
.ghost:hover{background:rgba(245,241,232,.08);}
.form-msg{margin:0; font-size:14px; min-height:1.5em;}
.form-msg.err{color:var(--err);}
.form-msg.ok{color:var(--tier-D);}
.note{
  margin:0; padding:10px 14px; border-radius:10px;
  background:rgba(255,203,46,.1); border:1px solid rgba(255,203,46,.4);
  color:#FFE3A3; font-size:14px;
}

/* ---------- redeem view ---------- */
.redeem-wrap{width:100%; max-width:640px; margin:0 auto; display:flex; flex-direction:column; gap:16px;}
.redeem-head{display:flex; align-items:center; gap:16px;}
.redeem-head .badge{width:60px; height:60px; border-radius:14px; font-size:30px;}
.redeem-head .badge.is-p{font-size:26px;}
.redeem-kicker{margin:0; font-size:13px; letter-spacing:.1em; color:var(--c); font-variant-numeric:tabular-nums;}
.redeem-head h2{font-size:28px;}
.redeem-form{display:flex; flex-direction:column; gap:22px;}
fieldset{border:0; margin:0; padding:0; min-width:0;}
legend{padding:0; margin-bottom:8px; font-size:14px; font-weight:500; letter-spacing:.06em;}
.opts{display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:10px;}
.opt{
  position:relative;
  display:flex; flex-direction:column; gap:2px;
  padding:14px 14px 12px; border-radius:12px;
  border:1px solid var(--edge); background:var(--field);
  cursor:pointer;
  transition:border-color .15s, box-shadow .15s;
}
.opt input{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer;}
.opt-name{font-family:var(--font-display); font-size:20px; line-height:1.3;}
.opt-left{font-size:13px; color:var(--dim); font-variant-numeric:tabular-nums;}
.opt:hover{border-color:rgba(245,241,232,.4);}
.opt.is-checked{border-color:var(--c); box-shadow:inset 0 0 0 2px var(--c);}
.opt.is-checked .opt-name{color:var(--c);}
.opt.is-focus{outline:3px solid var(--bulb); outline-offset:2px;}
.opt.gone{opacity:.45; cursor:not-allowed;}
.opt.gone input{cursor:not-allowed;}
.opt.gone .opt-left{color:var(--err);}
.done{display:flex; flex-direction:column; gap:16px;}
.done-kicker{margin:0; font-size:14px; letter-spacing:.14em; color:var(--tier-D);}
.done-main{margin:0; font-family:var(--font-display); font-size:36px; line-height:1.2; color:var(--c);}
.done-list{margin:0; display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 16px; font-size:15px;}
.done-list dt{color:var(--dim);}
.done-list dd{margin:0; overflow-wrap:anywhere;}

/* ---------- login ---------- */
.login-wrap{width:100%; max-width:440px; margin:0 auto; display:flex; flex-direction:column; gap:16px;}
.login-sub{margin:0; font-size:14px; color:var(--dim);}
.who{display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px; background:var(--field); border:1px solid var(--line);}
.who img{width:40px; height:40px; border-radius:50%; flex:none; object-fit:cover; background:var(--cabinet);}
.who-name{margin:0; font-weight:500; overflow-wrap:anywhere;}
.who-role{margin:0; font-size:13px; color:var(--dim);}

/* ---------- admin ---------- */
.admin-top{display:flex; align-items:center; justify-content:space-between; gap:12px 16px; flex-wrap:wrap;}
.admin-top h2{font-size:30px;}
.admin-who{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--dim);}
.admin-who img{width:28px; height:28px; border-radius:50%; object-fit:cover; background:var(--cabinet);}
.stats{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px;}
@media (max-width:640px){ .stats{grid-template-columns:repeat(2, minmax(0, 1fr));} }
.stat{background:var(--night-hi); border:1px solid var(--line); border-radius:14px; padding:14px 16px; display:flex; flex-direction:column; gap:2px;}
.stat-label{font-size:13px; color:var(--dim);}
.stat-val{font-family:var(--font-led); font-size:28px; line-height:1.2; color:var(--bulb); font-variant-numeric:tabular-nums;}
.stat.alert .stat-val{color:var(--neon);}
.panel{background:var(--night-hi); border:1px solid var(--line); border-radius:16px; padding:20px; display:flex; flex-direction:column; gap:14px; min-width:0;}
.tabs{display:flex; flex-wrap:wrap; gap:6px;}
.tab{
  padding:5px 12px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:transparent; color:var(--paint);
  font-size:13px; font-variant-numeric:tabular-nums;
}
.tab[aria-pressed="true"]{background:var(--cab); border-color:var(--cab); color:var(--cab-ink); font-weight:700;}
.table-wrap{overflow-x:auto; margin-inline:-4px;}
table{width:100%; min-width:820px; border-collapse:collapse; font-size:14px;}
th{text-align:left; font-weight:500; font-size:12px; letter-spacing:.08em; color:var(--dim); padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap;}
td{padding:10px; border-bottom:1px solid var(--line); vertical-align:middle;}
td.num{font-variant-numeric:tabular-nums; white-space:nowrap;}
td .sub{display:block; font-size:12px; color:var(--dim);}
.tier-cell{display:inline-flex; align-items:center; gap:8px; white-space:nowrap;}
.tier-cell .mini{width:22px; height:22px; font-size:11px; border-radius:6px;}
.ship{display:inline-flex; align-items:center; gap:8px; cursor:pointer; white-space:nowrap;}
.ship input{width:18px; height:18px; accent-color:var(--tier-D); cursor:pointer;}
.pill{display:inline-block; padding:1px 9px; border-radius:999px; font-size:12px;}
.pill.pending{background:rgba(255,194,61,.15); color:#FFD77A;}
.pill.shipped{background:rgba(95,227,161,.15); color:var(--tier-D);}
.pending-list{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px;}
.pending-list li{
  display:inline-flex; align-items:center; gap:8px;
  padding:4px 12px 4px 4px; border-radius:999px;
  background:rgba(245,241,232,.06); border:1px solid var(--line);
  font-size:13px; font-variant-numeric:tabular-nums;
}
.pending-list .mini{width:22px; height:22px; font-size:11px; border-radius:6px;}
.stock-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:12px;}
.stock-tier{border:1px solid var(--line); border-top:4px solid var(--c); border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:8px;}
.stock-tier h4{margin:0 0 4px; font-family:var(--font-display); font-weight:400; font-size:17px; color:var(--c);}
.stock-row{display:grid; grid-template-columns:minmax(0, 1fr) 68px 68px; gap:8px; align-items:center; font-size:14px;}
.stock-row.head{font-size:12px; color:var(--dim);}
.stock-row.head span:not(:first-child){text-align:right;}
.num-input{
  width:100%; color:var(--paint); background:var(--field);
  border:1px solid var(--edge); border-radius:8px;
  padding:6px 8px; text-align:right; font-variant-numeric:tabular-nums;
}
.num-input:focus{outline:none; border-color:var(--bulb); box-shadow:0 0 0 3px rgba(255,194,61,.25);}
.num-input.dirty{border-color:var(--bulb);}
.stock-sum{margin:4px 0 0; font-size:12px; color:var(--dim); font-variant-numeric:tabular-nums;}
.stock-sum.warn{color:var(--err);}
.stock-actions{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.stock-actions .primary{font-size:17px; padding:9px 22px;}

/* ---------- admin: search, delivery columns, phone cards ---------- */
.reg-tools{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.reg-tools .input{max-width:340px; padding:9px 12px;}
tr.delivered td{color:var(--dim);}
td.ck{text-align:center;}
td.ck input{width:20px; height:20px; cursor:pointer; accent-color:var(--tier-D);}
td.ck input:disabled{cursor:not-allowed; opacity:.35;}
.pill.handed{background:rgba(255,79,134,.16); color:var(--err);}
@media (max-width:700px){
  .table-wrap{margin-inline:0;}
  table{min-width:0;}
  thead{display:none;}
  table, tbody, tr, td{display:block;}
  tr{border:1px solid var(--line); border-radius:12px; padding:8px 12px; margin-bottom:10px;}
  td{border:0; padding:5px 0; display:flex; align-items:center; justify-content:space-between; gap:12px; text-align:right;}
  td::before{content:attr(data-label); font-size:12px; color:var(--dim); text-align:left;}
  td.ck{text-align:right;}
  td.empty-row{justify-content:flex-start;}
  td.empty-row::before{content:none;}
}

/* ---------- voucher: shown to staff on-site ---------- */
.voucher-layer{
  position:fixed; inset:0; z-index:50;
  background:rgba(12,10,28,.95);
  overflow-y:auto;
  display:flex; flex-direction:column; align-items:center;
  padding:max(20px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(20px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
.voucher-wrap{margin-block:auto; width:100%; max-width:420px; display:flex; flex-direction:column; gap:14px;}
.voucher{
  position:relative; overflow:hidden;
  background:var(--paint); color:var(--ink);
  border-radius:18px;
  box-shadow:0 0 0 4px var(--c), 0 30px 60px -20px rgba(0,0,0,.8);
}
.v-band{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 18px;
  background:linear-gradient(180deg, var(--cab-hi), var(--cab));
  color:var(--cab-ink);
  font-family:var(--font-display); font-size:18px; line-height:1.3;
}
.v-live{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-led); font-size:16px; font-variant-numeric:tabular-nums;}
.v-live i{width:8px; height:8px; border-radius:50%; background:#D3164E; animation:pulse 1s ease-in-out infinite;}
.v-body{padding:20px 22px 22px; display:flex; flex-direction:column; gap:16px;}
.v-tier{display:flex; align-items:center; gap:12px;}
.v-tier .badge{width:48px; height:48px; font-size:24px; box-shadow:none;}
.v-tier .badge.is-p{font-size:22px;}
.v-tier-name{margin:0; font-family:var(--font-display); font-size:20px; line-height:1.2;}
.v-item{margin:0; font-size:14px; color:#5B5577;}
.v-label{margin:0; font-size:13px; letter-spacing:.14em; color:#5B5577;}
.v-opt{margin:0; font-family:var(--font-display); font-size:clamp(44px, 14vw, 64px); line-height:1.1; overflow-wrap:anywhere;}
.v-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:14px; border-top:2px dashed rgba(27,21,51,.25);}
.v-meta{margin:0; display:grid; grid-template-columns:auto minmax(0, 1fr); gap:4px 14px; font-size:16px; min-width:0;}
.v-meta dt{color:#5B5577;}
.v-meta dd{margin:0; font-weight:700; overflow-wrap:anywhere; font-variant-numeric:tabular-nums;}
.v-stamp{
  flex:none; margin:0;
  width:92px; height:92px; border-radius:50%; padding:8px;
  display:grid; place-items:center; text-align:center;
  font-family:var(--font-display); font-size:16px; line-height:1.2;
  color:#5B5577; border:3px dashed rgba(27,21,51,.35);
  transform:rotate(-10deg);
}
.v-stamp.done{color:var(--seal); border:4px solid var(--seal); box-shadow:inset 0 0 0 3px var(--paint), inset 0 0 0 5px var(--seal);}
.v-scan{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 42%, rgba(255,255,255,.6) 50%, transparent 58%);
  background-size:260% 100%;
  animation:scan 2.6s linear infinite;
}
.v-note{margin:0; text-align:center; font-size:13px; color:var(--dim);}
.v-close{align-self:center;}
@keyframes scan{from{background-position:120% 0}to{background-position:-120% 0}}
@keyframes pulse{50%{opacity:.3}}

/* ---------- motion ---------- */
@keyframes flicker{0%{opacity:.55}6%{opacity:1}10%{opacity:.5}16%{opacity:1}22%{opacity:.8}28%,100%{opacity:1}}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.12) rotate(8deg)}}
@keyframes chase{0%,55%{background:#C98F00; box-shadow:inset 0 1px 1px rgba(0,0,0,.25)}68%{background:var(--neon); box-shadow:0 0 10px var(--neon)}100%{background:#C98F00; box-shadow:inset 0 1px 1px rgba(0,0,0,.25)}}
@keyframes glow{from{color:var(--cab-ink); text-shadow:0 2px 0 rgba(255,255,255,.45)}to{color:#C21F57; text-shadow:0 0 16px rgba(255,79,134,.7), 0 2px 0 rgba(255,255,255,.45)}}
@keyframes blink{50%{background:var(--bulb)}}
@keyframes hit{50%{transform:scale(1.2)}}
@keyframes hit-p{50%{transform:rotate(-8deg) scale(1.2)}}
@keyframes ticket-in{from{transform:translateY(-18px) rotate(-2.5deg); opacity:.25}to{transform:none; opacity:1}}
@keyframes knob-idle{0%,100%{box-shadow:0 4px 10px rgba(0,0,0,.45), 0 0 14px rgba(255,79,134,.4)}50%{box-shadow:0 4px 10px rgba(0,0,0,.45), 0 0 28px rgba(255,79,134,.9)}}
@keyframes rod-pull{0%{transform:scaleY(1)}35%,55%{transform:scaleY(-1)}100%{transform:scaleY(1)}}
@keyframes knob-pull{
  0%{transform:translateY(0) scale(1)}
  17.5%{transform:translateY(var(--rod)) scale(1.3)}
  35%,55%{transform:translateY(calc(var(--rod) * 2)) scale(1)}
  77.5%{transform:translateY(var(--rod)) scale(1.3)}
  100%{transform:translateY(0) scale(1)}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important;}
}