:root{
  --bg:#F3F4F9; --surface:#FFFFFF; --ink:#1B2040; --muted:#5F6688; --line:#D9DCEA;
  --nerve:#F2B705; --nerve-ink:#8A6400; --accent:#3346D3; --accent-press:#2131A6; --on-accent:#FFFFFF;
  --good:#23894D; --good-bg:#DCF2E5; --bad:#C83B33;
  --f-display:"Lalezar","Vazirmatn",Tahoma,sans-serif; --f-body:"Vazirmatn",Tahoma,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#111329; --surface:#1A1D3A; --ink:#ECEEFB; --muted:#A0A5C8; --line:#2D3159;
  --nerve:#F5C430; --nerve-ink:#FFE7A0; --accent:#7381FF; --accent-press:#4C5AD8; --on-accent:#0E1030;
  --good:#5BD18C; --good-bg:#16382A; --bad:#FF7A70; color-scheme:dark}}
[hidden]{display:none!important}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.75;min-height:100vh}
.app{direction:rtl;max-width:680px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column}
.pad{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.top{display:flex;align-items:center;padding-block:14px 0}
.brand{font-family:var(--f-display);font-size:24px;line-height:1.2}
main{flex:1}
.intro h1{font-family:var(--f-display);font-weight:400;font-size:26px;line-height:1.5;margin:14px 0 4px}
.intro p{margin:0 0 14px;color:var(--muted);font-size:14.5px}
.packs{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.skel{height:132px;border-radius:18px;background:linear-gradient(90deg,var(--surface),var(--line),var(--surface));background-size:200% 100%;animation:sh 1.3s linear infinite;opacity:.6}
@keyframes sh{to{background-position:-200% 0}}
.pack{position:relative;background:var(--surface);border:2px solid var(--line);border-bottom-width:4px;border-radius:18px;padding:14px;display:grid;gap:10px}
.pack.open{border-color:var(--accent)}
.pack.hl{outline:3px solid var(--nerve);outline-offset:2px}
.p-head{display:flex;align-items:flex-start;gap:12px}
.ico{flex:none;width:48px;height:48px;border-radius:14px;background:color-mix(in srgb,var(--accent) 12%,var(--surface));display:grid;place-items:center;font-size:26px;line-height:1}
.pack:not(.open) .ico{background:color-mix(in srgb,var(--muted) 14%,var(--surface));filter:grayscale(.35)}
.p-title{min-width:0;flex:1}
.p-title h2{margin:0;font-size:18px;line-height:1.5;font-weight:800;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.p-title p{margin:2px 0 0;color:var(--muted);font-size:13.5px;line-height:1.7}
.num{flex:none;color:var(--muted);font-size:12px;font-weight:700;border:1px solid var(--line);border-radius:99px;padding:0 8px}
.badge{font-size:11.5px;font-weight:800;border-radius:99px;padding:0 9px;line-height:1.8;white-space:nowrap}
.badge.open{background:var(--good-bg);color:var(--good)}
.badge.wait{background:color-mix(in srgb,var(--nerve) 20%,var(--surface));color:var(--nerve-ink)}
.badge.soon{background:color-mix(in srgb,var(--muted) 16%,var(--surface));color:var(--muted)}
.when{font-size:13px;color:var(--muted);margin:0}
.when b{color:var(--ink);font-weight:800}
.cd{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:0;padding:0;list-style:none;direction:rtl}
.cd li{background:color-mix(in srgb,var(--accent) 8%,var(--surface));border:1px solid var(--line);border-radius:12px;text-align:center;padding:4px 2px;line-height:1.35}
.cd b{display:block;font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--accent)}
.cd span{font-size:11.5px;color:var(--muted)}
.prep{margin:0;font-weight:800;color:var(--nerve-ink);font-size:14.5px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;border:0;border-bottom:4px solid var(--accent-press);background:var(--accent);color:var(--on-accent);border-radius:14px;padding:6px 18px;font:inherit;font-weight:800;cursor:pointer;text-decoration:none;width:100%}
.acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.acts .btn{padding-inline:10px}
@media (max-width:340px){.acts{grid-template-columns:1fr}}
.btn:active{transform:translateY(2px);border-bottom-width:2px}
.btn.ghost{background:transparent;color:var(--accent);border:2px solid var(--line);border-bottom-width:4px}
.btn:focus-visible,.lnk:focus-visible{outline:3px solid var(--nerve);outline-offset:2px}
.notice{margin:0;font-size:13px;color:var(--muted);background:color-mix(in srgb,var(--good) 10%,var(--surface));border-radius:12px;padding:6px 10px}
.notice a{color:var(--accent);font-weight:700}
.foot{padding-block:18px 22px;text-align:center}
.links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:8px}
.lnk{display:inline-block;border:2px solid var(--line);border-radius:99px;padding:2px 14px;font-size:13px;font-weight:700;color:var(--accent);text-decoration:none;background:var(--surface)}
.privacy{margin:0;font-size:11.5px;color:var(--muted)}
.err{color:var(--bad);font-weight:700}
@media (prefers-reduced-motion:reduce){.skel{animation:none}}