/* Layout: one full-screen view at a time; temple-silk palette (maroon ground, zari gold accent). Single dark theme by choice: a store kiosk. */
:root{
  --ground:#1d0a10; --silk:#2a0f17; --panel:#341520; --line:#5a2a36;
  --zari:#d8ad5a; --zari-deep:#b88a3a; --ink:#f6ece2; --muted:#c9b3a8; --err:#ff9b8c;
  --display:"Fraunces",Georgia,serif; --body:"Mukta",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--ground);color:var(--ink);font:18px/1.5 var(--body);-webkit-tap-highlight-color:transparent;overscroll-behavior:none;user-select:none}
input{user-select:text}
#app{height:100%}
.screen{position:fixed;inset:0;padding:max(24px,env(safe-area-inset-top)) 24px max(24px,env(safe-area-inset-bottom))}
.center{display:flex;align-items:center;justify-content:center;overflow:auto}
[hidden]{display:none!important}

h1{font:650 clamp(1.6rem,3.4vw,2.4rem)/1.15 var(--display);margin:0 0 6px;text-wrap:balance}
h2{font:600 1.5rem/1.2 var(--display);margin:0}
.display{font-size:clamp(2.2rem,6vw,4.2rem);line-height:1.05;margin-bottom:14px}
.eyebrow{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--zari);margin:0 0 6px;font-weight:600}
.muted{color:var(--muted);margin:4px 0}
.lede{color:var(--muted);max-width:38ch;font-size:1.15rem;margin:0 auto 28px}
.err{color:var(--err);min-height:1.5em;margin:6px 0 0}

.panel{width:min(560px,100%);background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:28px;display:flex;flex-direction:column;gap:10px}
.panel.narrow{width:min(400px,100%);text-align:center;align-items:stretch}
label{font-weight:600;margin-top:6px}
input[type=text],input[type=password]{font:inherit;font-size:1.2rem;padding:14px 16px;border-radius:12px;border:1px solid var(--line);background:var(--silk);color:var(--ink);width:100%}
input:focus-visible,button:focus-visible{outline:3px solid var(--zari);outline-offset:2px}
.check{display:flex;gap:12px;align-items:flex-start;font-weight:400;color:var(--muted);background:var(--silk);border:1px solid var(--line);border-radius:12px;padding:14px}
.check input{width:28px;height:28px;flex:none;accent-color:var(--zari);margin:0}
.row{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.row .btn{flex:1 1 180px}

.btn{font:600 1.1rem var(--body);border-radius:999px;padding:16px 26px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;min-height:56px}
.btn.primary{background:var(--zari);border-color:var(--zari);color:#2a0f17}
.btn.primary:active{background:var(--zari-deep)}
.btn.ghost{background:var(--silk)}
.btn.small{min-height:44px;padding:10px 18px;font-size:.95rem}
.btn.big{font-size:1.4rem;padding:22px 56px}
.btn:disabled{opacity:.5}

.hero{text-align:center;max-width:820px}
.stats{color:var(--muted);margin-top:22px;font-variant-numeric:tabular-nums}
.corner{position:fixed;top:max(16px,env(safe-area-inset-top));right:16px;background:none;border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:8px 16px;font:500 .9rem var(--body)}

.pin-dots{display:flex;gap:14px;justify-content:center;margin:14px 0}
.pin-dots i{width:16px;height:16px;border-radius:50%;border:2px solid var(--zari)}
.pin-dots i.on{background:var(--zari)}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.keypad button{font:600 1.6rem var(--body);height:72px;border-radius:16px;border:1px solid var(--line);background:var(--silk);color:var(--ink)}
.keypad button:active{background:var(--line)}

/* camera */
.camera{padding:0;background:#000}
.camera video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.guide{position:absolute;left:50%;top:50%;height:86%;transform:translate(-50%,-50%);fill:none;stroke:rgba(216,173,90,.75);stroke-width:2.5;stroke-dasharray:8 8;pointer-events:none}
.cam-top{position:absolute;top:max(16px,env(safe-area-inset-top));left:16px;right:16px;display:flex;justify-content:space-between;align-items:center}
.cam-bottom{position:absolute;left:0;right:0;bottom:max(20px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:14px;padding:0 16px}
.cam-msg{background:rgba(29,10,16,.78);padding:12px 22px;border-radius:999px;margin:0;text-align:center;font-size:1.15rem;max-width:min(680px,100%)}
.chip{display:inline-block;background:rgba(29,10,16,.8);border:1px solid var(--zari);color:var(--zari);border-radius:999px;padding:6px 14px;font-weight:600;font-variant-numeric:tabular-nums;margin:0}
.shutter{width:84px;height:84px;border-radius:50%;border:5px solid var(--ink);background:var(--zari);box-shadow:0 0 0 4px rgba(0,0,0,.35)}
.shutter:active{transform:scale(.94)}
.count{font:650 9rem/1 var(--display);color:var(--zari);position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);text-shadow:0 4px 30px rgba(0,0,0,.6)}

/* making */
.making{background:var(--ground)}
.making img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(18px) brightness(.45);transform:scale(1.1)}
.making-card{position:relative;background:rgba(42,15,23,.86);border:1px solid var(--line);border-radius:20px;padding:34px 40px;text-align:center;max-width:520px}
.elapsed{font:600 2rem var(--display);color:var(--zari);margin:10px 0 0;font-variant-numeric:tabular-nums}
.loom{display:flex;gap:6px;justify-content:center;height:60px;align-items:flex-end;margin-bottom:18px}
.loom i{width:10px;background:linear-gradient(var(--zari),var(--zari-deep));border-radius:3px;animation:weave 1.2s ease-in-out infinite}
.loom i:nth-child(2){animation-delay:.1s}.loom i:nth-child(3){animation-delay:.2s}.loom i:nth-child(4){animation-delay:.3s}.loom i:nth-child(5){animation-delay:.4s}.loom i:nth-child(6){animation-delay:.5s}.loom i:nth-child(7){animation-delay:.6s}
@keyframes weave{0%,100%{height:14px}50%{height:60px}}
@media (prefers-reduced-motion:reduce){.loom i{animation:none;height:40px}}

/* result */
.result{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;padding-inline:20px}
.result-main{min-height:0;display:flex;align-items:center;justify-content:center}
.result-main img{max-width:100%;max-height:100%;object-fit:contain;border-radius:14px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.result-side{display:flex;flex-direction:column;gap:12px;justify-content:center;min-width:0}
.result-side .chip{align-self:flex-start}
.thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.thumbs img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:8px;border:2px solid transparent;cursor:pointer}
.thumbs img.on{border-color:var(--zari)}
@media (orientation:portrait){.result{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}.result-side{justify-content:flex-start}.thumbs{grid-template-columns:repeat(6,1fr)}}

.toast{position:fixed;left:50%;bottom:max(28px,env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--panel);border:1px solid var(--zari);padding:12px 22px;border-radius:999px;z-index:9}