:root{
  --char:#16151a;
  --char-2:#201e26;
  --panel:#26232e;
  --line:#37333f;
  --paper:#faf7f5;
  --ink:#1a1720;
  --ink-soft:#6a6472;
  --red:#ff3d3d;
  --red-2:#ff5c33;
  --amber:#ffb020;
  --lime:#a8e10c;
  --good:#2fce8a;
  --white:#fff;
  --shadow:0 26px 60px -36px rgba(0,0,0,.5);
  --shadow-sm:0 14px 32px -24px rgba(0,0,0,.4);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --display:"Arial Black",Impact,var(--sans);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}
input,select{font-family:inherit}
a{color:inherit;text-decoration:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.display{font-family:var(--display);font-weight:900;letter-spacing:0;text-transform:uppercase;line-height:.95}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;font-size:.95rem;padding:14px 24px;border-radius:12px;border:none;background:var(--red);color:#fff;text-transform:uppercase;letter-spacing:.02em;transition:.18s}
.btn:hover{background:var(--red-2);transform:translateY(-2px)}
.btn:disabled{background:var(--line);color:var(--ink-soft);cursor:not-allowed;transform:none}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--line)}
.btn.ghost:hover{border-color:var(--red);color:var(--red);background:transparent}
.btn.block{width:100%}
.btn.sm{padding:9px 16px;font-size:.82rem;border-radius:9px}

/* header */
header.top{background:var(--char);color:#fff;position:sticky;top:0;z-index:40}
.top-in{display:flex;align-items:center;justify-content:space-between;height:62px}
.logo{display:flex;align-items:center;gap:9px;font-family:var(--display);font-size:1.3rem;text-transform:uppercase}
.logo .mark{width:32px;height:32px}
.top .nav{display:flex;gap:20px;align-items:center;font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.top .nav a{color:rgba(255,255,255,.7)}
.top .nav a:hover{color:#fff}
.top .nav a.admin{color:var(--amber)}

/* hero */
.hero{background:var(--char);color:#fff;position:relative;overflow:hidden;padding:44px 0 30px;text-align:center}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(255,61,61,.28),transparent 55%),radial-gradient(circle at 80% 80%,rgba(255,176,32,.18),transparent 50%)}
.hero-in{position:relative;z-index:2}
.hero .kick{color:var(--amber);font-weight:800;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase}
.hero h1{font-size:3.8rem;margin:10px 0 12px}
.hero h1 em{color:var(--red);font-style:normal}
.hero p{color:rgba(255,255,255,.7);max-width:44ch;margin:0 auto;font-size:1rem}

/* booking flow */
.book{padding:24px 0 60px}
.steps-bar{display:flex;gap:6px;max-width:620px;margin:0 auto 26px}
.sbar{flex:1;text-align:center}
.sbar .n{width:30px;height:30px;border-radius:50%;background:var(--paper);border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem;margin:0 auto 5px;transition:.2s}
.sbar.on .n{background:var(--red);border-color:var(--red);color:#fff}
.sbar.done .n{background:var(--char);border-color:var(--char);color:#fff}
.sbar .t{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft)}
.sbar.on .t{color:var(--ink)}

.card{background:var(--white);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm);max-width:620px;margin:0 auto;overflow:hidden}
.card-hd{padding:18px 22px;border-bottom:1px solid var(--line)}
.card-hd h2{font-size:1.2rem;font-family:var(--display);text-transform:uppercase}
.card-hd p{font-size:.86rem;color:var(--ink-soft);margin-top:2px}
.card-bd{padding:22px}
.step{display:none}
.step.on{display:block}

/* location + package options */
.opt{border:2px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:12px;cursor:pointer;display:flex;align-items:center;gap:14px;transition:.15s;background:var(--white)}
.opt:hover{border-color:var(--red)}
.opt.sel{border-color:var(--red);background:#fff5f4}
.opt .rad{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);flex:0 0 22px;position:relative}
.opt.sel .rad{border-color:var(--red)}
.opt.sel .rad::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--red)}
.opt .oi{flex:1}
.opt .oi b{font-size:1rem;display:block}
.opt .oi span{font-size:.82rem;color:var(--ink-soft)}
.opt .price{font-family:var(--display);font-size:1.1rem;color:var(--red)}
.opt.dim{opacity:.4;pointer-events:none}
.opt.dim .price{color:var(--ink-soft)}

.party{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.party button{flex:1;min-width:60px;border:2px solid var(--line);background:var(--white);border-radius:10px;padding:14px 8px;font-weight:800;transition:.15s}
.party button.sel{border-color:var(--red);background:#fff5f4;color:var(--red)}
.hint{font-size:.82rem;color:var(--ink-soft);margin-top:6px}

/* slots */
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.slot{border:2px solid var(--line);border-radius:10px;padding:12px 8px;text-align:center;background:var(--white);transition:.15s;cursor:pointer}
.slot:hover:not(.full){border-color:var(--red)}
.slot.sel{border-color:var(--red);background:#fff5f4}
.slot b{display:block;font-weight:800;font-size:.95rem}
.slot .cap{font-size:.72rem;color:var(--ink-soft);margin-top:2px}
.slot.low .cap{color:var(--amber);font-weight:700}
.slot.full{opacity:.45;cursor:not-allowed;background:var(--paper)}
.slot.full .cap{color:var(--red)}

/* payment */
.field{margin-bottom:14px}
.field label{display:block;font-size:.8rem;font-weight:700;color:var(--ink-soft);margin-bottom:6px;text-transform:uppercase;letter-spacing:.03em}
.field input{width:100%;padding:13px 15px;border:2px solid var(--line);border-radius:10px;font-size:1rem}
.field input:focus{outline:none;border-color:var(--red)}
.field-row{display:flex;gap:12px}
.field-row .field{flex:1}
.summary{background:var(--paper);border-radius:12px;padding:16px 18px;margin-bottom:18px}
.summary .sr{display:flex;justify-content:space-between;padding:5px 0;font-size:.92rem}
.summary .sr.total{border-top:1px solid var(--line);margin-top:8px;padding-top:12px;font-family:var(--display);font-size:1.2rem}
.summary .sr.total .amt{color:var(--red)}
.paynote{font-size:.76rem;color:var(--ink-soft);text-align:center;margin-top:12px}

/* confirmation */
.confirm{text-align:center;padding:14px 0}
.confirm .tick{width:70px;height:70px;border-radius:50%;background:#eafff5;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.confirm h2{font-family:var(--display);text-transform:uppercase;font-size:1.6rem}
.confirm .ref{font-family:var(--display);color:var(--red);font-size:1.3rem;margin:6px 0}
.confirm-detail{background:var(--paper);border-radius:12px;padding:18px;text-align:left;margin:18px 0;font-size:.92rem}
.confirm-detail .cr{display:flex;justify-content:space-between;padding:5px 0}
.confirm-detail .cr b{font-weight:700}
.sync-status{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;font-weight:700;padding:7px 14px;border-radius:20px;margin-top:8px}
.sync-status.ok{background:#eafff5;color:var(--good)}
.sync-status.fail{background:#fff0f0;color:var(--red)}
.sync-status.pending{background:#fff8e8;color:var(--amber)}

/* admin */
.admin{padding:26px 0 60px;background:var(--char);min-height:100vh;color:#fff;display:none}
.admin.on{display:block}
.admin-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;flex-wrap:wrap;gap:12px}
.admin-hd h1{font-family:var(--display);text-transform:uppercase;font-size:1.8rem}
.admin-hd a{color:var(--amber);font-weight:700;font-size:.85rem}
.astat{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
.astat .s{background:var(--char-2);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.astat .s .l{font-size:.74rem;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.04em}
.astat .s .v{font-family:var(--display);font-size:1.8rem;margin-top:4px}
.apanel{background:var(--char-2);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:18px}
.apanel h3{padding:16px 20px;border-bottom:1px solid var(--line);font-size:1rem;font-family:var(--display);text-transform:uppercase}
.atable{width:100%;border-collapse:collapse;font-size:.86rem}
.atable th{text-align:left;padding:10px 20px;color:rgba(255,255,255,.5);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--line)}
.atable td{padding:12px 20px;border-bottom:1px solid var(--line)}
.atable tr:last-child td{border-bottom:none}
.spill{font-size:.72rem;font-weight:800;padding:3px 10px;border-radius:20px}
.spill.ok{background:rgba(47,206,138,.16);color:var(--good)}
.spill.fail{background:rgba(255,61,61,.16);color:var(--red)}
.spill.pending{background:rgba(255,176,32,.16);color:var(--amber)}
.retry{background:var(--amber);color:#231a03;border:none;border-radius:7px;padding:6px 12px;font-weight:800;font-size:.76rem}
.retry:hover{background:#ffc247}
.acap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;padding:16px 20px}
.acap{background:var(--char);border:1px solid var(--line);border-radius:10px;padding:12px;text-align:center}
.acap b{display:block;font-family:var(--display);font-size:1.3rem}
.acap .l{font-size:.72rem;color:rgba(255,255,255,.5)}
.acap.low b{color:var(--amber)}
.acap.full b{color:var(--red)}
.empty-a{padding:30px;text-align:center;color:rgba(255,255,255,.4)}

.foot{background:var(--char);color:rgba(255,255,255,.5);text-align:center;padding:24px;font-size:.8rem}
.foot a{color:var(--red)}

@media(max-width:640px){
  .hero h1{font-size:2.5rem}
  .top .nav{gap:14px}
  .field-row{flex-direction:column;gap:0}
  .astat{grid-template-columns:1fr 1fr}
  .atable{font-size:.78rem}
  .atable th,.atable td{padding:9px 12px}
}