/* Kimaya Rewards — customer app. Dark aubergine + gold, magenta for action */
@font-face{font-family:"Cinzel";font-weight:600;font-display:swap;src:url(/fonts/cinzel-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Jost";font-weight:400;font-display:swap;src:url(/fonts/jost-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Jost";font-weight:500;font-display:swap;src:url(/fonts/jost-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Jost";font-weight:600;font-display:swap;src:url(/fonts/jost-latin-600-normal.woff2) format("woff2")}

:root{
  --bg:#170A12; --bg2:#22101B; --card:#2A1422; --card2:#341A2B; --line:#4A2A3D;
  --gold:#D9AE5B; --gold2:#F3D58E; --gold-dk:#9C7330;
  --magenta:#C2286E; --magenta2:#E0478C;
  --text:#F7ECEF; --muted:#BFA4B1; --ok:#5BC08A; --err:#FF8A8A;
  --display:"Cinzel", Georgia, serif; --ui:"Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%}
body{background:radial-gradient(120% 60% at 50% -10%,#3A1530 0%,var(--bg) 60%) fixed,var(--bg);color:var(--text);font:400 16px/1.45 var(--ui)}
button,input{font:inherit;color:inherit}
[hidden]{display:none!important}

.wrap{max-width:460px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top,0px) + 14px) max(18px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 90px) max(18px,env(safe-area-inset-left,0px))}

/* header */
.top{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.top img{width:44px;height:44px;border-radius:50%}
.top .t{flex:1;min-width:0}
.top .brand{font:600 15px/1.1 var(--display);letter-spacing:.06em;color:var(--gold)}
.top .hello{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iconbtn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--card);display:grid;place-items:center;cursor:pointer}
.iconbtn svg{width:20px;height:20px}

/* buttons & inputs */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:0;border-radius:14px;padding:15px 18px;font-weight:600;font-size:16px;cursor:pointer;transition:transform .1s,opacity .2s}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.55;cursor:default}
.btn.primary{background:linear-gradient(135deg,var(--magenta2),var(--magenta));color:#fff;box-shadow:0 8px 24px -8px rgba(224,71,140,.6)}
.btn.gold{background:linear-gradient(135deg,var(--gold2),var(--gold) 55%,var(--gold-dk));color:#2A1020}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--muted)}
.btn:focus-visible,.iconbtn:focus-visible,.tab:focus-visible{outline:2px solid var(--gold2);outline-offset:2px}
.field{display:grid;gap:6px;margin-bottom:14px}
.field label{font-size:13px;color:var(--muted)}
.input{width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:14px;font-size:17px;outline:none}
.input:focus{border-color:var(--gold)}
.phone{display:flex;align-items:center;background:var(--bg2);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.phone:focus-within{border-color:var(--gold)}
.phone span{padding:0 4px 0 14px;color:var(--muted);font-size:17px}
.phone input{border:0;background:transparent;flex:1;padding:14px 14px 14px 6px;font-size:18px;letter-spacing:.06em;outline:none;min-width:0}
.otp{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:6px 0 16px}
.otp input{text-align:center;font-size:22px;font-weight:600;padding:14px 0;background:var(--bg2);border:1px solid var(--line);border-radius:12px;outline:none;width:100%;min-width:0}
.otp input:focus{border-color:var(--gold)}
.err{color:var(--err);font-size:14px;min-height:20px;margin:-4px 0 10px}
.small{font-size:13px;color:var(--muted)}
.link{background:none;border:0;color:var(--gold2);text-decoration:underline;cursor:pointer;padding:0;font-size:14px}

/* login */
.hero{text-align:center;padding:10px 0 22px}
.hero img{width:150px;border-radius:12px}
.hero h1{font:600 22px/1.25 var(--display);letter-spacing:.04em;color:var(--gold2);margin:14px 0 6px;text-wrap:balance}
.hero p{margin:0 auto;color:var(--muted);max-width:30ch}
.panel{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px}
.wa{display:flex;align-items:center;gap:8px;justify-content:center;font-size:13px;color:var(--muted);margin-top:12px}
.wa svg{width:16px;height:16px}

/* stamp card */
.loyalty{position:relative;border-radius:22px;padding:20px 18px 18px;overflow:hidden;
  background:linear-gradient(150deg,#3B1630 0%,#2A1222 45%,#1E0C17 100%);border:1px solid #5A3049;box-shadow:0 20px 40px -24px #000}
.loyalty::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 40% at 100% 0%,rgba(217,174,91,.22),transparent 70%);pointer-events:none}
.loyalty .head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;position:relative}
.loyalty .label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.loyalty .goal{font:600 18px/1.2 var(--display);color:var(--text);margin-top:4px}
.loyalty .count{font:600 30px/1 var(--display);color:var(--gold2);font-variant-numeric:tabular-nums;white-space:nowrap}
.loyalty .count small{font-size:15px;color:var(--muted)}
.stamps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0 14px;position:relative}
.st{aspect-ratio:1;border-radius:50%;border:1.5px dashed #6B4459;display:grid;place-items:center;color:#6B4459;font-size:13px;font-weight:600;position:relative}
.st.on{border:2px solid var(--gold);background:radial-gradient(circle,#fff 0 58%,#F6E3EB 100%);box-shadow:0 0 0 3px rgba(217,174,91,.15)}
.st.on img{width:84%;height:84%;object-fit:contain;border-radius:50%}
.st.gift{border-color:var(--gold);border-style:solid;color:var(--gold2);background:rgba(217,174,91,.08)}
.st.gift svg{width:46%;height:46%}
.st.new{animation:pop .7s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{0%{transform:scale(0) rotate(-30deg)}100%{transform:scale(1) rotate(0)}}
.bar{height:6px;border-radius:9px;background:#1A0A13;overflow:hidden;position:relative}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--magenta),var(--gold));border-radius:9px;transition:width .8s}
.loyalty .hint{font-size:14px;color:var(--muted);margin-top:10px;position:relative}
.loyalty .hint b{color:var(--text)}

.cta{margin-top:18px}
.note{margin-top:10px;text-align:center;font-size:13px;color:var(--muted)}

/* sections */
h2.sec{font:600 14px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:28px 0 12px}
.list{display:grid;gap:10px}
.rw{display:flex;gap:14px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;cursor:pointer;text-align:left;width:100%}
.rw .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:none;background:rgba(217,174,91,.12);color:var(--gold2)}
.rw .ic.scr{background:linear-gradient(135deg,var(--gold2),var(--gold-dk));color:#2A1020}
.rw .ic svg{width:24px;height:24px}
.rw .tx{flex:1;min-width:0}
.rw .tx b{display:block;font-weight:600}
.rw .tx span{font-size:13px;color:var(--muted)}
.rw.dim{opacity:.5;cursor:default}
.pill{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:99px;background:rgba(91,192,138,.15);color:var(--ok);white-space:nowrap}
.pill.new{background:var(--magenta);color:#fff}
.pill.off{background:#3A2632;color:var(--muted)}
.empty{text-align:center;color:var(--muted);padding:26px 10px;border:1px dashed var(--line);border-radius:16px;font-size:14px}

/* menu */
.mcat{margin-bottom:20px}
.mcat h3{font:600 17px var(--display);color:var(--gold2);margin:0 0 6px;letter-spacing:.03em}
.mi{display:flex;gap:12px;justify-content:space-between;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--line)}
.mi .n{min-width:0}
.mi .n b{font-weight:500}
.mi .n span{display:block;font-size:13px;color:var(--muted)}
.mi .p{font-weight:600;color:var(--gold2);white-space:nowrap;font-variant-numeric:tabular-nums}
.contact{margin-top:20px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;font-size:14px;color:var(--muted);display:grid;gap:6px}
.contact b{color:var(--text)}

/* bottom tabs */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;background:rgba(23,10,18,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);
  padding:8px max(12px,env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
.tabs .in{max-width:460px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.tab{background:none;border:0;display:grid;justify-items:center;gap:2px;padding:6px;border-radius:12px;color:var(--muted);font-size:12px;cursor:pointer;position:relative}
.tab svg{width:22px;height:22px}
.tab.on{color:var(--gold2);background:rgba(217,174,91,.08)}
.tab .dot{position:absolute;top:4px;right:calc(50% - 18px);width:8px;height:8px;border-radius:50%;background:var(--magenta2)}

/* overlays */
.ov{position:fixed;inset:0;z-index:50;background:rgba(10,4,8,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;place-items:center;
  padding:calc(env(safe-area-inset-top,0px) + 16px) max(18px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 16px) max(18px,env(safe-area-inset-left,0px))}
.sheet{width:100%;max-width:400px;background:var(--card);border:1px solid #5A3049;border-radius:24px;padding:26px 22px;text-align:center;animation:up .3s ease}
@keyframes up{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
.sheet h3{font:600 21px/1.25 var(--display);color:var(--gold2);margin:4px 0 8px;text-wrap:balance}
.sheet p{color:var(--muted);margin:0 0 18px}
.code{font:600 44px/1 var(--display);letter-spacing:.18em;color:var(--text);background:var(--bg2);border:1px dashed var(--gold);border-radius:16px;padding:18px 10px 14px;margin:6px 0 16px}
.code.sm{font-size:30px;letter-spacing:.14em}
.who{font-size:15px;color:var(--text);margin-bottom:4px}
.spin{width:44px;height:44px;margin:4px auto 12px;border-radius:50%;border:3px solid #4A2A3D;border-top-color:var(--gold);animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.big-ic{width:76px;height:76px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#fff 0 60%,#F6E3EB);border:2px solid var(--gold)}
.big-ic img{width:86%;border-radius:50%}
.big-ic.gift{background:linear-gradient(135deg,var(--gold2),var(--gold-dk));color:#2A1020;border:0}
.big-ic.gift svg{width:40px;height:40px}
.stack{display:grid;gap:10px}

/* scratch */
.scratch{position:relative;width:100%;aspect-ratio:1.6;border-radius:18px;overflow:hidden;margin:6px 0 16px;background:linear-gradient(135deg,#FFF6FA,#F7E2EC);color:#3A1230;display:grid;place-items:center;padding:16px;user-select:none}
.scratch .prize{font:600 22px/1.25 var(--display);text-wrap:balance}
.scratch .prize small{display:block;font:500 13px var(--ui);color:#8A5A72;margin-top:8px;letter-spacing:.05em}
.scratch canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab;transition:opacity .5s}

/* confetti */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.confetti i{position:absolute;top:-12px;width:8px;height:14px;border-radius:2px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}

.toast{position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:#F7ECEF;color:#2A1020;padding:10px 16px;border-radius:12px;font-size:14px;font-weight:500;z-index:70;box-shadow:0 10px 30px -10px #000;max-width:90vw}
.menu-pop{position:absolute;right:max(18px,env(safe-area-inset-right,0px));top:calc(env(safe-area-inset-top,0px) + 64px);background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:6px;z-index:30;min-width:200px;box-shadow:0 20px 40px -20px #000}
.menu-pop button{display:block;width:100%;text-align:left;background:none;border:0;padding:11px 12px;border-radius:10px;cursor:pointer}
.menu-pop button:hover{background:rgba(255,255,255,.05)}
.menu-pop .who2{padding:10px 12px 8px;font-size:13px;color:var(--muted);border-bottom:1px solid var(--line);margin-bottom:4px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}