/* Arc Rewards design system: deep warm charcoal + premium gold */
:root{
  --bg0:#080706; --bg1:#0e0b09;
  --panel:#171310; --panel2:#1e1913; --panel3:#262019;
  --line:#2e2718; --line-soft:#241e14;
  --gold:#d9a441; --gold-hi:#f6d488; --gold-lo:#a8742c;
  --gold-grad:linear-gradient(135deg,#f6d488 0%,#d9a441 48%,#b3802e 100%);
  --text:#f4ecdd; --muted:#ab9f89; --faint:#7d7261;
  --danger:#e0655f; --green:#5dbb84;
  --radius:20px; --radius-sm:14px;
  --shadow:0 10px 30px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.35);
  --shadow-gold:0 8px 24px rgba(217,164,65,.28);
  --font:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font); color:var(--text); min-height:100vh;
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(217,164,65,.13), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(217,164,65,.07), transparent 55%),
    linear-gradient(180deg, var(--bg1), var(--bg0));
  background-attachment:fixed;
}
button{font-family:inherit; cursor:pointer}
input,textarea,select{font-family:inherit}
.hidden{display:none !important}

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px 22px; background:rgba(10,8,7,.86); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.brand{display:flex; align-items:center; gap:12px; min-width:0}
.brand-mark{
  width:44px; height:44px; border-radius:13px; display:grid; place-items:center; flex:0 0 auto;
  background:var(--gold-grad); color:#171106; font-weight:800; font-size:24px; box-shadow:var(--shadow-gold);
}
.brand-name{font-weight:800; letter-spacing:.14em; font-size:17px; line-height:1}
.brand-name span{color:var(--gold)}
.brand-sub{font-size:12px; color:var(--muted); margin-top:4px; letter-spacing:.04em}
.mode-switch{display:flex; background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:4px}
.mode-btn{
  border:0; background:transparent; color:var(--muted); font-weight:700; font-size:14px;
  padding:10px 18px; border-radius:999px; min-height:44px; transition:all .18s ease;
}
.mode-btn.active{background:var(--gold-grad); color:#171106; box-shadow:var(--shadow-gold)}
.mode-btn:active{transform:scale(.97)}

main{max-width:1060px; margin:0 auto; padding:26px 20px 40px}
.footer{text-align:center; color:var(--faint); font-size:12.5px; padding:10px 16px 30px}

/* ---------- views & screens ---------- */
.view{display:none}
.view.active{display:block}
.screen{display:none}
.screen.active{display:block; animation:screenIn .34s cubic-bezier(.2,.8,.25,1)}
@keyframes screenIn{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
.screen.narrow{max-width:520px; margin:0 auto}
.screen-title{font-size:32px; font-weight:800; letter-spacing:-.01em; margin:6px 0 8px}
.screen-sub{color:var(--muted); font-size:16.5px; line-height:1.5; margin:0 0 22px}
.back-link{background:none; border:0; color:var(--gold); font-size:15px; font-weight:700; padding:8px 0; min-height:44px}

/* ---------- cards & buttons ---------- */
.card{
  background:linear-gradient(180deg, var(--panel2), var(--panel));
  border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:22px; margin:0 0 18px; box-shadow:var(--shadow);
}
.card.highlight{border-color:rgba(217,164,65,.45)}
.card-title{font-size:17px; font-weight:800; letter-spacing:.01em; margin-bottom:12px}
.card-text{color:var(--muted); line-height:1.55; margin:0 0 14px; font-size:15.5px}
.btn{
  border:0; border-radius:var(--radius-sm); font-weight:800; font-size:16px;
  padding:14px 22px; min-height:54px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:transform .12s ease, box-shadow .2s ease, opacity .2s ease; touch-action:manipulation;
}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.55; cursor:wait}
.btn-gold{background:var(--gold-grad); color:#171106; box-shadow:var(--shadow-gold)}
.btn-outline{background:transparent; color:var(--gold); border:1.5px solid rgba(217,164,65,.55)}
.btn-ghost{background:transparent; color:var(--muted); border:1px solid var(--line)}
.btn-danger{background:transparent; color:var(--danger); border:1.5px solid rgba(224,101,95,.5)}
.btn-big{font-size:18px; min-height:62px; border-radius:16px}
.btn-block{width:100%}
.btn-sm{min-height:46px; padding:10px 16px; font-size:14.5px}

/* ---------- forms ---------- */
.field{display:block; margin:0 0 16px}
.field span{display:block; font-size:13.5px; font-weight:700; color:var(--muted); margin-bottom:8px; letter-spacing:.02em}
.field span em{font-style:normal; color:var(--faint); font-weight:500}
.field input, .card input[type=text], .card input[type=number], .card input[type=email], .card textarea{
  width:100%; background:#0d0a08; color:var(--text); border:1.5px solid var(--line); border-radius:var(--radius-sm);
  padding:15px 16px; font-size:17px; outline:none; transition:border-color .15s ease; min-height:56px;
}
.card textarea{resize:vertical; line-height:1.5}
.field input:focus, .card input:focus, .card textarea:focus{border-color:var(--gold)}
input[type=date]{color-scheme:dark}
.field-error{color:var(--danger); font-size:14.5px; min-height:20px; margin:4px 0 10px; font-weight:600}
.field-note{color:var(--faint); font-size:13.5px; margin-top:10px; line-height:1.45}
.success-text{color:var(--green); font-weight:700; font-size:15px; margin-top:10px; min-height:0}
.inline-form{display:flex; gap:10px; align-items:stretch}
.inline-form input{flex:1}
.inline-form .short-input{flex:0 0 130px}
.wrap-form{flex-wrap:wrap}
.wrap-form input{flex:1 1 180px}
.mini-title{font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin:18px 0 10px}

/* ---------- store picker ---------- */
.store-list{display:grid; gap:14px}
@media(min-width:640px){ .store-list{grid-template-columns:1fr 1fr} }
.store-card{
  text-align:left; background:linear-gradient(180deg, var(--panel2), var(--panel)); color:var(--text);
  border:1.5px solid var(--line-soft); border-radius:var(--radius); padding:24px; min-height:118px;
  display:flex; flex-direction:column; justify-content:center; gap:6px; box-shadow:var(--shadow);
  transition:transform .14s ease, border-color .14s ease;
}
.store-card:active{transform:scale(.98)}
.store-card:hover{border-color:rgba(217,164,65,.5)}
.store-card .store-name{font-size:22px; font-weight:800}
.store-card .store-meta{color:var(--muted); font-size:14.5px}
.store-card .store-meta b{color:var(--gold)}

/* ---------- phone keypad ---------- */
.phone-display{
  background:#0d0a08; border:1.5px solid var(--line); border-radius:16px; text-align:center;
  font-size:34px; font-weight:800; letter-spacing:.06em; padding:18px 10px; margin-bottom:16px; min-height:82px;
  display:flex; align-items:center; justify-content:center;
}
.phone-placeholder{color:var(--faint)}
.keypad{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-width:420px; margin:0 auto 18px}
.keypad button{
  background:var(--panel2); color:var(--text); border:1px solid var(--line-soft); border-radius:16px;
  font-size:26px; font-weight:700; min-height:64px; transition:all .1s ease; touch-action:manipulation;
}
.keypad button:active{background:var(--panel3); transform:scale(.95)}
.keypad .key-util{font-size:16px; color:var(--muted); font-weight:700}
#cust-phone{max-width:520px; margin:0 auto}
#cust-signup{max-width:520px; margin:0 auto}

/* ---------- customer hero ---------- */
.hero{
  background:linear-gradient(140deg,#2a2113 0%, #1a1409 55%, #120e07 100%);
  border:1px solid rgba(217,164,65,.4); border-radius:26px; padding:26px; margin-bottom:18px;
  box-shadow:var(--shadow-gold), var(--shadow); position:relative; overflow:hidden;
}
.hero::after{content:''; position:absolute; width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle, rgba(246,212,136,.22), transparent 65%); top:-160px; right:-110px; pointer-events:none}
.hero-top{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; position:relative; z-index:1}
.hero-hello{font-size:21px; font-weight:800}
.hero-store{color:var(--gold-hi); font-size:14px; font-weight:600; margin-top:3px}
.tier-chip{
  background:var(--gold-grad); color:#171106; font-weight:800; font-size:13.5px; letter-spacing:.05em;
  padding:8px 14px; border-radius:999px; white-space:nowrap; box-shadow:var(--shadow-gold);
}
.hero-balance{display:flex; align-items:baseline; gap:10px; margin:16px 0 6px; position:relative; z-index:1}
.hero-balance span{font-size:64px; font-weight:800; line-height:1; background:linear-gradient(180deg,#fff7e0,#f0cd7e);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.hero-balance small{color:var(--gold-hi); font-size:17px; font-weight:700}
.hero-progress-wrap{position:relative; z-index:1; margin-top:10px}
.hero-progress-label{font-size:13.5px; color:#d8c9a4; margin-bottom:7px; font-weight:600}
.progress{background:rgba(255,255,255,.12); height:10px; border-radius:99px; overflow:hidden}
.card .progress{background:#0d0a08}
.progress-fill{height:100%; width:0; border-radius:99px; background:var(--gold-grad); transition:width .8s cubic-bezier(.2,.8,.25,1)}
.hero-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:20px; position:relative; z-index:1}
.hero-stats div{background:rgba(0,0,0,.28); border:1px solid rgba(246,212,136,.16); border-radius:14px; padding:10px 6px; text-align:center}
.hero-stats strong{display:block; font-size:19px}
.hero-stats span{font-size:11.5px; color:#cbbd97; letter-spacing:.03em}

.next-reward-row{display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:12px}
.next-reward-name{font-size:19px; font-weight:800}
.next-reward-away{color:var(--muted); font-size:14.5px; margin-top:3px}
.next-reward-cost{font-size:22px; font-weight:800; color:var(--gold); white-space:nowrap}

/* ---------- check-in / spin ---------- */
.checkin-code-wrap{text-align:center; padding-top:16px}
.checkin-code{
  font-size:64px; font-weight:800; letter-spacing:.28em; text-indent:.28em; color:var(--gold-hi);
  background:#0d0a08; border:1.5px dashed rgba(217,164,65,.55); border-radius:18px; padding:14px 6px;
}
.checkin-note{color:var(--muted); font-size:14px; margin-top:10px}
.wheel-wrap{position:relative; width:min(300px,78vw); margin:8px auto 18px; aspect-ratio:1}
.wheel{
  width:100%; height:100%; border-radius:50%; border:8px solid #0d0a08;
  box-shadow:0 0 0 2px rgba(217,164,65,.5), var(--shadow); position:relative; overflow:hidden;
  transition:transform 5.4s cubic-bezier(.1,.75,.08,1);
}
.wheel-label{
  position:absolute; left:50%; top:50%; transform-origin:0 0; font-size:12.5px; font-weight:800;
  color:#171106; white-space:nowrap; text-shadow:0 1px 0 rgba(255,255,255,.25);
}
.wheel-pointer{
  position:absolute; top:-6px; left:50%; transform:translateX(-50%); z-index:3;
  width:0; height:0; border-left:13px solid transparent; border-right:13px solid transparent; border-top:22px solid var(--gold);
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));
}
.wheel-hub{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
  width:64px; height:64px; border-radius:50%; background:var(--gold-grad); color:#171106;
  display:grid; place-items:center; font-weight:800; letter-spacing:.08em; font-size:14px; box-shadow:var(--shadow-gold);
}
.spin-result{text-align:center; font-size:18px; font-weight:800; color:var(--gold-hi); min-height:26px; margin-top:12px}

/* ---------- rewards / lists ---------- */
.reward-list{display:grid; gap:12px}
@media(min-width:640px){ .reward-list{grid-template-columns:1fr 1fr} }
.reward-card{background:#0d0a08; border:1px solid var(--line-soft); border-radius:16px; padding:16px}
.reward-card.ready{border-color:rgba(217,164,65,.6)}
.reward-top{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:10px}
.reward-name{font-weight:800; font-size:16.5px}
.reward-cost{color:var(--gold); font-weight:800; white-space:nowrap}
.reward-card .progress{margin-bottom:12px}
.ready-tag{color:var(--green); font-weight:800; font-size:12px; letter-spacing:.09em}
.pending-list{margin-top:6px}
.pending-item{
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  background:rgba(217,164,65,.08); border:1px solid rgba(217,164,65,.35); border-radius:14px; padding:13px 15px; margin-top:10px;
}
.pending-item .pi-label{font-weight:700}
.pending-item .pi-status{color:var(--gold-hi); font-size:13px; font-weight:700}
.pending-actions{display:flex; gap:8px}
.activity-list{display:flex; flex-direction:column}
.activity-row{display:flex; justify-content:space-between; gap:12px; padding:11px 2px; border-bottom:1px solid var(--line-soft); font-size:15px}
.activity-row:last-child{border-bottom:0}
.activity-row .a-main{font-weight:600}
.activity-row .a-sub{color:var(--faint); font-size:12.5px; margin-top:2px}
.activity-row .a-pts{font-weight:800; white-space:nowrap}
.a-pts.pos{color:var(--green)} .a-pts.neg{color:var(--danger)}
.empty-state{
  color:var(--muted); text-align:center; padding:20px 12px; font-size:15px; line-height:1.5;
  border:1.5px dashed var(--line); border-radius:14px; margin-top:6px;
}
.referral-row{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.referral-code{
  font-size:24px; font-weight:800; letter-spacing:.12em; color:var(--gold-hi);
  background:#0d0a08; border:1.5px dashed rgba(217,164,65,.5); padding:10px 16px; border-radius:12px;
}
.referral-count{color:var(--muted); font-size:14.5px}
.stars{display:flex; gap:6px; margin-bottom:14px}
.stars button{
  background:none; border:0; font-size:38px; line-height:1; color:#3a3226; padding:4px; min-width:52px; min-height:52px;
  transition:transform .12s ease, color .12s ease;
}
.stars button.on{color:var(--gold)}
.stars button:active{transform:scale(1.2)}
.home-footer{margin-top:4px}
.toggle-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 4px; font-weight:600; cursor:pointer}
.toggle-row input{display:none}
.toggle-ui{width:56px; height:32px; border-radius:99px; background:#0d0a08; border:1.5px solid var(--line); position:relative; flex:0 0 auto; transition:all .2s}
.toggle-ui::after{content:''; position:absolute; width:24px; height:24px; border-radius:50%; background:var(--muted); top:2.5px; left:3px; transition:all .2s}
.toggle-row input:checked + .toggle-ui{background:rgba(217,164,65,.25); border-color:var(--gold)}
.toggle-row input:checked + .toggle-ui::after{left:26px; background:var(--gold)}

/* ---------- cashier ---------- */
.dash-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:16px}
.dash-store{font-size:24px; font-weight:800}
.dash-cashier{color:var(--muted); font-size:14.5px; margin-top:3px}
.kpi-strip{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:18px}
@media(min-width:680px){ .kpi-strip{grid-template-columns:repeat(4,1fr)} }
.kpi{background:linear-gradient(180deg, var(--panel2), var(--panel)); border:1px solid var(--line-soft); border-radius:16px; padding:16px; text-align:center; box-shadow:var(--shadow)}
.kpi strong{display:block; font-size:27px; font-weight:800}
.kpi span{font-size:12.5px; color:var(--muted); letter-spacing:.03em}
.kpi-alert.has-pending{border-color:var(--gold); animation:pulseGlow 1.6s ease-in-out infinite}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 0 rgba(217,164,65,.0)} 50%{box-shadow:0 0 22px 2px rgba(217,164,65,.45)}}
.kpi-alert.has-pending strong{color:var(--gold-hi)}
.live-item{
  width:100%; text-align:left; background:#0d0a08; color:var(--text); border:1px solid var(--line-soft);
  border-radius:14px; padding:14px 16px; margin-bottom:9px; display:flex; justify-content:space-between; align-items:center; gap:10px; min-height:58px;
}
.live-item:active{transform:scale(.99)}
.live-item .li-code{font-weight:800; color:var(--gold-hi); letter-spacing:.1em}
.live-item .li-name{font-weight:600}
.live-item .li-sub{color:var(--faint); font-size:12.5px}
.found-customer{margin-top:18px; border-top:1px solid var(--line-soft); padding-top:18px}
.found-head{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:6px}
.found-name{font-size:20px; font-weight:800}
.found-phone{color:var(--muted); font-size:14px}
.found-balance{font-size:26px; font-weight:800; color:var(--gold)}
.found-balance small{font-size:13px; color:var(--muted); margin-left:3px}
.quick-amounts{display:flex; flex-wrap:wrap; gap:9px; margin-bottom:12px}
.quick-amounts button{
  background:var(--panel3); color:var(--text); border:1.5px solid var(--line); border-radius:12px;
  font-size:16.5px; font-weight:800; padding:12px 18px; min-height:52px; min-width:74px; transition:all .12s;
}
.quick-amounts button.selected{background:var(--gold-grad); color:#171106; border-color:transparent}
.quick-amounts button:active{transform:scale(.95)}

/* ---------- admin ---------- */
.store-pills{display:flex; gap:9px; flex-wrap:wrap; margin-bottom:14px}
.store-pills button{
  background:var(--panel); color:var(--muted); border:1.5px solid var(--line); border-radius:999px;
  font-weight:800; font-size:14.5px; padding:11px 18px; min-height:48px;
}
.store-pills button.active{background:var(--gold-grad); color:#171106; border-color:transparent}
.tab-bar{display:flex; gap:6px; overflow-x:auto; padding-bottom:8px; margin-bottom:16px; scrollbar-width:none}
.tab-bar::-webkit-scrollbar{display:none}
.tab-bar button{
  background:transparent; color:var(--muted); border:1px solid var(--line-soft); border-radius:999px;
  font-weight:700; font-size:14px; padding:10px 16px; min-height:46px; white-space:nowrap;
}
.tab-bar button.active{color:var(--gold-hi); border-color:var(--gold); background:rgba(217,164,65,.1)}
.tab-page{display:none}
.tab-page.active{display:block; animation:screenIn .3s ease}
.kpi-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:18px}
@media(min-width:760px){ .kpi-grid{grid-template-columns:repeat(4,1fr)} }
.chart{display:flex; align-items:flex-end; gap:10px; height:170px; padding-top:10px}
.chart-col{flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end}
.chart-bar{width:100%; max-width:56px; border-radius:9px 9px 4px 4px; background:var(--gold-grad); min-height:4px; transition:height .7s cubic-bezier(.2,.8,.25,1); box-shadow:var(--shadow-gold)}
.chart-val{font-size:13px; font-weight:800; color:var(--gold-hi)}
.chart-lab{font-size:12px; color:var(--muted)}
.admin-row{
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  padding:13px 2px; border-bottom:1px solid var(--line-soft);
}
.admin-row:last-child{border-bottom:0}
.admin-row .ar-main{font-weight:700}
.admin-row .ar-sub{color:var(--faint); font-size:12.5px; margin-top:2px}
.admin-row .ar-side{font-weight:800; color:var(--gold); white-space:nowrap}
.admin-row input[type=number], .admin-row input[type=text]{
  width:110px; background:#0d0a08; color:var(--text); border:1.5px solid var(--line); border-radius:10px; padding:10px; font-size:15px; min-height:46px;
}
.admin-row input[type=text]{width:170px}
.adjust-inline{display:flex; gap:8px; align-items:center}
.adjust-inline input{width:90px !important}
.tag{display:inline-block; font-size:11.5px; font-weight:800; letter-spacing:.06em; padding:4px 9px; border-radius:99px; vertical-align:middle}
.tag-used{background:rgba(224,101,95,.15); color:var(--danger)}
.tag-free{background:rgba(93,187,132,.15); color:var(--green)}
.tag-sim{background:rgba(217,164,65,.16); color:var(--gold-hi)}
.sim-banner{
  background:rgba(217,164,65,.1); border:1.5px solid rgba(217,164,65,.5); color:#efe0ba;
  border-radius:var(--radius-sm); padding:15px 17px; font-size:14.5px; line-height:1.55; margin-bottom:18px;
}
.sms-body{color:var(--muted); font-size:14px; line-height:1.5; margin-top:3px}

/* ---------- toast / confetti ---------- */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%, 90px); z-index:90;
  background:#221b12; color:var(--text); border:1.5px solid rgba(217,164,65,.6); border-radius:14px;
  padding:15px 20px; font-weight:700; font-size:15.5px; box-shadow:var(--shadow); max-width:min(92vw,520px);
  text-align:center; transition:transform .3s cubic-bezier(.2,.8,.25,1); pointer-events:none;
}
.toast.show{transform:translate(-50%,0)}
.toast.error{border-color:var(--danger)}
#confettiCanvas{position:fixed; inset:0; pointer-events:none; z-index:80}

/* ---------- responsive: landscape tablets & small screens ---------- */
@media(min-width:900px) and (orientation:landscape){
  #cust-home.active{display:grid; grid-template-columns:1fr 1fr; gap:0 18px; align-items:start}
  #cust-home .hero, #cust-home .home-footer{grid-column:1 / -1}
}
@media(max-width:560px){
  .topbar{padding:12px 14px}
  .brand-sub{display:none}
  .mode-btn{padding:9px 12px; font-size:13.5px}
  main{padding:18px 13px 34px}
  .screen-title{font-size:27px}
  .hero-balance span{font-size:52px}
  .hero-stats{grid-template-columns:repeat(2,1fr)}
  .checkin-code{font-size:50px}
  .inline-form{flex-direction:column}
  .inline-form .short-input{flex:1}
  .btn{min-height:56px}
}