:root{
  --paper:#F6F4EF; --card:#FFFFFF; --ink:#17172B; --muted:#6E6E82; --line:#E6E1D8;
  --coral:#FF5A3C; --teal:#12A39A; --lilac:#9C8BE0; --pink:#F48FB1; --butter:#F6D365;
  --ar:"Baloo Bhaijaan 2","Segoe UI",Tahoma,sans-serif; --en:"Fredoka","Baloo Bhaijaan 2",system-ui,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--ar);font-size:17px;line-height:1.55}
body.en{font-family:var(--en)}
.wrap{max-width:560px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:20px 120px}
header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{width:46px;height:46px;border-radius:14px;object-fit:cover}
.brand b{font-size:22px;font-weight:800}
.lang{border:2px solid var(--ink);background:var(--card);color:var(--ink);border-radius:999px;padding:4px 14px;font:inherit;font-weight:700;cursor:pointer}
.hero{margin-block:22px 8px}
.hero h1{font-size:clamp(30px,8vw,40px);line-height:1.15;margin:0;font-weight:800;text-wrap:balance}
.hero h1 .dot{color:var(--coral)}
.hero p{color:var(--muted);margin:8px 0 0}
.steps{display:flex;gap:6px;margin:18px 0}
.steps i{flex:1;height:6px;border-radius:6px;background:var(--line)}
.steps i.on{background:var(--teal)}
h2{font-size:22px;margin:18px 0 10px;font-weight:800}
.choice{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.big{background:var(--card);border:2px solid var(--line);border-radius:22px;padding:18px 14px;text-align:start;cursor:pointer;font:inherit;color:var(--ink);display:flex;flex-direction:column;gap:6px;min-width:0}
.big:hover,.big:focus-visible{border-color:var(--ink);outline:none}
.big .ico{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:24px;font-weight:800;color:#fff}
.big b{font-size:19px}.big span{color:var(--muted);font-size:14px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.prod{background:var(--card);border:2px solid var(--line);border-radius:20px;padding:10px;cursor:pointer;font:inherit;color:var(--ink);text-align:start;display:flex;flex-direction:column;gap:4px;min-width:0;position:relative}
.prod img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#FBFAF7;border-radius:14px}
.prod b{font-size:16px;line-height:1.3}
.prod .price{font-weight:800;color:var(--coral)}
.prod .days{font-size:13px;color:var(--muted)}
.prod.sel{border-color:var(--teal);box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 25%,transparent)}
.prod[disabled]{opacity:.5;cursor:not-allowed}
.tag{position:absolute;top:16px;inset-inline-start:16px;background:var(--ink);color:#fff;border-radius:999px;padding:0 10px;font-size:12px;font-weight:700}
.field{display:flex;flex-direction:column;gap:6px;margin-block:14px}
label,.lbl{font-weight:700}
.hint{color:var(--muted);font-size:14px;font-weight:500}
input,textarea,select{font:inherit;color:var(--ink);background:var(--card);border:2px solid var(--line);border-radius:14px;padding:10px 12px;width:100%}
input:focus,textarea:focus{outline:none;border-color:var(--teal)}
textarea{min-height:84px;resize:vertical}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:2px solid var(--line);background:var(--card);border-radius:999px;padding:6px 14px;font:inherit;font-weight:600;color:var(--ink);cursor:pointer}
.chip.sel{background:var(--ink);border-color:var(--ink);color:#fff}
.sw{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.swc{border:2px solid var(--line);background:var(--card);border-radius:16px;padding:10px;cursor:pointer;font:inherit;color:var(--ink);display:flex;align-items:center;gap:10px;text-align:start}
.swc .dots{display:flex}.swc .dots i{width:22px;height:22px;border-radius:50%;border:2px solid #fff;margin-inline-end:-7px;box-shadow:0 0 0 1px var(--line)}
.swc.sel{border-color:var(--teal);box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 25%,transparent)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.note{background:color-mix(in srgb,var(--butter) 35%,var(--card));border-radius:16px;padding:12px 14px;font-size:15px}
.sum{background:var(--card);border:2px dashed var(--ink);border-radius:20px;padding:16px;white-space:pre-wrap;font-size:15px}
.check{list-style:none;padding:0;margin:10px 0;display:grid;gap:4px;font-size:15px}
.check li.ok::before{content:"✓ ";color:var(--teal);font-weight:800}
.check li.no::before{content:"• ";color:var(--coral);font-weight:800}
.check li.no{color:var(--coral)}
.bar{position:fixed;inset:auto 0 0 0;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(6px);border-top:1px solid var(--line);padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));padding-top:12px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.bar .in{max-width:560px;margin:0 auto;display:flex;gap:10px}
.btn{flex:1;border:none;border-radius:16px;padding:14px;font:inherit;font-weight:800;font-size:18px;cursor:pointer;background:var(--ink);color:#fff;text-align:center;text-decoration:none}
.btn.ghost{flex:0 0 auto;background:var(--card);color:var(--ink);border:2px solid var(--ink)}
.btn.wa{background:#1FA855}
.btn[aria-disabled="true"]{opacity:.4;pointer-events:none}
.done{text-align:center;padding-block:30px}
.done .big2{font-size:56px}
.ref{font-family:var(--en);background:var(--ink);color:#fff;border-radius:10px;padding:2px 10px}
.foot{color:var(--muted);font-size:13px;text-align:center;margin-top:28px}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
@media (max-width:360px){.choice,.grid,.sw,.row2{grid-template-columns:1fr}}
@media (prefers-reduced-motion:no-preference){.view{animation:in .25s ease-out}@keyframes in{from{transform:translateY(6px)}to{transform:none}}}
.slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.slot{border:2px solid var(--line);background:var(--card);border-radius:16px;padding:8px 10px;display:flex;align-items:center;gap:10px;cursor:pointer;font:inherit;color:var(--ink);text-align:start;min-width:0}
.slot.on{border-color:var(--teal);box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 25%,transparent)}
.slot small{display:block;color:var(--muted);font-size:12px;font-weight:600}
.slot b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spool{--c:#ccc;width:34px;height:34px;flex:0 0 34px;border-radius:50%;background:radial-gradient(circle at 50% 50%,var(--card) 0 22%,#0000 23%),repeating-radial-gradient(circle at 50% 50%,var(--c) 0 2px,color-mix(in srgb,var(--c) 82%,#000) 2px 3px);box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--c) 70%,#000),0 1px 2px #0002}
.spool.silk{background:radial-gradient(circle at 50% 50%,var(--card) 0 22%,#0000 23%),conic-gradient(from 30deg,var(--c),#fff8,var(--c),color-mix(in srgb,var(--c) 70%,#000),var(--c))}
.spool.glow{box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--c) 70%,#000),0 0 10px var(--c)}
.spool.empty{background:repeating-linear-gradient(45deg,var(--line) 0 4px,var(--card) 4px 8px);box-shadow:inset 0 0 0 2px var(--line)}
.shelf{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.shelf h4{margin:0;font-size:13px;color:var(--muted);letter-spacing:.02em}
.row{display:flex;flex-wrap:wrap;gap:8px}
.sp{position:relative;border:2px solid transparent;background:none;padding:4px;border-radius:14px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;width:68px;font:inherit;color:var(--ink)}
.sp span{font-size:11px;line-height:1.2;text-align:center}
.sp.sel{border-color:var(--teal);background:var(--card)}
.sp.out .spool{opacity:.75;outline:2px dashed var(--muted);outline-offset:2px}
.sp em{position:absolute;top:0;inset-inline-end:0;background:var(--coral);color:#fff;font-style:normal;font-size:10px;font-weight:800;border-radius:999px;padding:0 5px}
.sets{display:flex;flex-wrap:wrap;gap:8px}
.set{display:flex;align-items:center;gap:6px}
.set i{width:14px;height:14px;border-radius:50%;display:inline-block;margin-inline-end:-6px;border:2px solid var(--card)}
.preview{margin:12px auto 0;display:flex;justify-content:center}
.tagp{min-width:180px;max-width:100%;padding:14px 22px;border-radius:999px;font-family:var(--en);font-weight:600;font-size:30px;text-align:center;box-shadow:inset 0 -6px 0 #0001,0 6px 14px #0002;letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wait{color:var(--coral);font-weight:700;font-size:14px}
.terms{font-size:13px;color:var(--muted);background:var(--card);border-radius:14px;padding:10px 12px;border:1px solid var(--line)}