/* dragon-i — brand system (extracted from dragon-i.com.hk, re-est 2026) */
:root{
  --cream:#FFFCFA; --red:#DD482A; --red-deep:#c53c20;
  --ink:#2f2e2e; --gray:#494949; --soft:#8a8078;
  --hair:#f0e0d8; --hair2:#e7cfc4; --white:#fff;
  --pop:"Poppins",-apple-system,"Avenir Next","Futura","Century Gothic",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased}
html{scroll-behavior:smooth}
body{font-family:var(--pop);font-weight:300;color:var(--gray);background:var(--cream);min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
a{color:var(--red);text-decoration:none}
button{font-family:var(--pop)}

/* ---------- header / footer ---------- */
.site-head{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px clamp(18px,6vw,72px);z-index:90}
.site-head .logo img{width:clamp(118px,16vw,150px);display:block}
.site-head .logo .fb{display:none;font-weight:800;font-size:clamp(26px,5vw,34px);letter-spacing:-.045em;color:var(--red);line-height:1}
.site-head .logo.noimg img{display:none}
.site-head .logo.noimg .fb{display:block}
.site-nav{display:flex;gap:clamp(14px,3vw,34px);align-items:center;flex:1;justify-content:center}
.site-nav a{font-size:14px;font-weight:400;color:var(--gray);letter-spacing:-.01em}
.site-nav a.on,.site-nav a:hover{color:var(--red)}
.site-nav .navapp{display:none}
.head-right{display:flex;align-items:center;gap:12px}
.cta{border:1px solid var(--red);border-radius:99px;padding:9px 18px;color:var(--red);font-size:14px;font-weight:400;white-space:nowrap}
.cta.solid{background:var(--red);color:var(--cream)}
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:10px;
  background:none;border:1px solid var(--hair2);border-radius:12px;cursor:pointer}
.nav-burger span{display:block;height:2px;border-radius:1px;background:var(--red);transition:transform .2s,opacity .2s}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.site-foot{padding:44px clamp(20px,6vw,72px);border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:baseline}
.site-foot .fm{font-weight:800;color:var(--red);font-size:20px;letter-spacing:-.04em}
.site-foot p{font-size:12.5px;color:var(--soft);line-height:1.6}

/* ---------- type ---------- */
.kicker{font-size:13px;font-weight:500;color:var(--red);margin-bottom:14px}
.kicker::before{content:"– "}
h1.display{font-weight:300;font-size:clamp(34px,5vw,54px);letter-spacing:-.02em;color:var(--ink);line-height:1.14}
h1.display em,h2.display em{font-style:normal;color:var(--red)}
h2.display{font-weight:300;font-size:clamp(26px,3.4vw,36px);letter-spacing:-.02em;color:var(--ink);line-height:1.2}
.lead{font-size:16px;line-height:1.7;color:var(--gray);max-width:560px}
.rule{width:56px;height:2px;background:var(--red)}

/* ---------- layout ---------- */
.wrap{padding:clamp(28px,5vw,64px) clamp(20px,6vw,72px)}
.narrow{max-width:560px;margin:0 auto}
.mid{max-width:860px;margin:0 auto}

/* ---------- components ---------- */
.btn{display:inline-block;border:none;cursor:pointer;border-radius:9px;padding:14px 26px;
  font-size:14px;font-weight:500;letter-spacing:.02em;text-transform:lowercase;transition:transform .12s,opacity .12s}
.btn:active{transform:scale(.98)}
.btn.red{background:var(--red);color:var(--cream)}
.btn.pill{background:transparent;border:1px solid var(--red);color:var(--red);border-radius:99px;font-weight:400}
.btn.block{display:block;width:100%;text-align:center}
.btn[disabled]{opacity:.5;cursor:default}

.card{background:var(--white);border:1px solid var(--hair);border-radius:18px;padding:22px;
  box-shadow:0 10px 26px rgba(180,110,85,.07)}

.field{margin-bottom:22px}
.field label{display:block;font-size:12px;font-weight:500;color:var(--red);margin-bottom:8px}
.field label::before{content:"– "}
.field input,.field textarea,.field select{width:100%;border:none;border-bottom:1px solid var(--red);background:transparent;
  font-family:var(--pop);font-weight:300;font-size:15px;color:var(--ink);padding:9px 2px;outline:none;border-radius:0}
.field textarea{border:1px solid var(--hair2);border-radius:12px;padding:12px;min-height:90px}
.field input::placeholder,.field textarea::placeholder{color:#c4b8ae}
.hint{font-size:12px;color:var(--soft);line-height:1.6}
.error{color:var(--red);font-size:13px;font-weight:400;min-height:18px;margin-top:10px}
.ok{color:#2e7d5b;font-size:13px;font-weight:400}

.pill-tag{display:inline-block;font-size:11px;font-weight:400;letter-spacing:.03em;text-transform:lowercase;
  padding:5px 12px;border-radius:99px;border:1px solid var(--hair2);color:var(--soft)}
.pill-tag.hot{color:var(--red);border-color:var(--red)}
.pill-tag.fill{color:var(--cream);background:var(--red);border-color:var(--red)}

/* events list */
.event-row{display:flex;gap:22px;padding:22px 4px;border-bottom:1px solid #f6ebe5}
.event-row:last-child{border-bottom:none}
.event-row .d{min-width:64px;text-align:center}
.event-row .d .n{font-weight:300;font-size:30px;color:var(--red);line-height:1}
.event-row .d .m{font-size:11px;color:var(--soft);margin-top:4px;text-transform:lowercase}
.event-row h3{font-weight:500;font-size:18px;color:var(--ink);margin-bottom:4px;letter-spacing:-.01em}
.event-row .sub{font-size:13.5px;color:var(--gray);line-height:1.6}
.event-row .meta{font-size:12px;color:var(--soft);margin-top:6px}

/* choice cards (reserve) */
.choice{position:relative;border:1px solid var(--hair);border-radius:16px;padding:18px;cursor:pointer;background:var(--white);margin-bottom:12px}
.choice.on{border-color:var(--red)}
.choice h4{font-weight:500;font-size:16px;color:var(--ink);margin-bottom:4px}
.choice p{font-size:12.5px;color:var(--gray);line-height:1.55}
.choice .price{position:absolute;top:18px;right:18px;font-weight:400;color:var(--red)}
.choice .badge{position:absolute;top:16px;right:16px;font-size:10px;color:var(--red);border:1px solid var(--red);border-radius:99px;padding:3px 9px}
.choice.locked{opacity:.55}
.choice.red115{background:var(--red);border-color:var(--red)}
.choice.red115 h4,.choice.red115 p{color:var(--cream)}
.choice.red115 .badge{color:var(--cream);border-color:rgba(255,252,250,.6)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--hair2);background:var(--white);border-radius:12px;padding:10px 14px;cursor:pointer;text-align:center;font-weight:300}
.chip .dw{display:block;font-size:9.5px;color:var(--soft);margin-bottom:2px;text-transform:lowercase}
.chip .dn{font-size:16px;color:var(--ink)}
.chip.on{border-color:var(--red);background:#fdf0eb}
.chip.on .dw,.chip.on .dn{color:var(--red)}
.stepper{display:flex;align-items:center;gap:20px}
.stepper button{width:36px;height:36px;border-radius:50%;border:1px solid var(--red);background:var(--cream);color:var(--red);font-size:17px;cursor:pointer}
.stepper .val{font-size:20px;color:var(--ink);min-width:26px;text-align:center;font-weight:400}

/* red band */
.band{background:var(--red);color:var(--cream);border-radius:22px;padding:clamp(28px,4vw,48px);box-shadow:0 14px 40px rgba(197,60,32,.3)}
.band h2{font-weight:300;font-size:clamp(24px,3vw,34px);letter-spacing:-.02em;line-height:1.2;margin-bottom:12px}
.band p{color:rgba(255,252,250,.92);line-height:1.7;max-width:560px}
.band .btn.pill{border-color:var(--cream);color:var(--cream)}

/* member card */
.mcard{position:relative;border-radius:22px;overflow:hidden;padding:26px;background:var(--red);color:var(--cream);
  box-shadow:0 20px 44px rgba(197,60,32,.35);max-width:420px}
.mcard .top{display:flex;justify-content:space-between;margin-bottom:56px}
.mcard .n115{font-weight:800;font-size:36px;letter-spacing:-.03em}
.mcard .tier{font-size:11px;border:1px solid rgba(255,252,250,.65);padding:6px 13px;border-radius:99px;height:fit-content;text-transform:lowercase}
.mcard .name{font-weight:500;font-size:19px;letter-spacing:.1em;margin-bottom:6px}
.mcard .since{font-size:11px;color:rgba(255,252,250,.8);text-transform:lowercase}

/* coming soon — visible but resting */
.soon{opacity:.5;filter:saturate(.6)}
.soon-pill{display:inline-block;font-size:10px;font-weight:400;letter-spacing:.04em;text-transform:lowercase;
  color:var(--soft);border:1px dashed var(--hair2);border-radius:99px;padding:4px 11px;vertical-align:middle;background:transparent}

/* ktv night planner (members + admin) */
.kgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.kgrid .kh{font-size:10px;font-weight:400;color:var(--soft);text-align:center;padding:4px 0 6px;text-transform:lowercase}
.kd{position:relative;border:1px solid var(--hair2);background:var(--white);border-radius:12px;padding:9px 2px 7px;text-align:center;cursor:pointer;min-height:50px}
.kd .n{font-size:15px;font-weight:300;color:var(--ink);line-height:1.1}
.kd .m{font-size:8.5px;color:var(--soft);margin-top:3px;text-transform:lowercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px}
.kd.blank{border:none;background:none;cursor:default;min-height:0}
.kd.closed{opacity:.4;cursor:not-allowed;background:#f8f1ec}
.kd.taken{cursor:not-allowed;background:#f8f1ec;border-color:var(--hair)}
.kd.taken .n{color:var(--soft)}
.kd.asked{border-color:#d9a94a;background:#fdf7ea}
.kd.asked .m{color:#b07c1f}
.kd.on{border-color:var(--red);background:#fdf0eb;box-shadow:0 0 0 1px var(--red) inset}
.kd.on .n{color:var(--red)}
.kd.yours,.kd.booked{background:var(--red);border-color:var(--red)}
.kd.yours .n,.kd.yours .m,.kd.booked .n,.kd.booked .m{color:var(--cream)}
@media (max-width:520px){.kd{min-height:44px;padding:7px 1px 5px}.kd .n{font-size:13px}.kd .m{font-size:7.5px}}

/* toast */
.toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(20px);opacity:0;
  background:var(--red);color:var(--cream);font-size:13.5px;font-weight:400;padding:14px 24px;border-radius:9px;
  z-index:100;pointer-events:none;transition:all .3s;box-shadow:0 12px 30px rgba(197,60,32,.35);white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%)}

/* stats tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.tile{background:var(--white);border:1px solid var(--hair);border-radius:16px;padding:20px;text-align:left}
.tile .v{font-weight:300;font-size:30px;color:var(--red)}
.tile .l{font-size:12px;color:var(--soft);margin-top:6px;line-height:1.5}

/* tables (admin) */
table.di{width:100%;border-collapse:collapse;font-size:13.5px}
table.di th{text-align:left;font-weight:500;color:var(--red);font-size:12px;padding:10px 12px;border-bottom:1px solid var(--hair2);text-transform:lowercase}
table.di td{padding:12px;border-bottom:1px solid #f6ebe5;color:var(--gray);vertical-align:middle}
table.di tr:last-child td{border-bottom:none}
.mini{font-size:12px;font-weight:400;border-radius:99px;border:1px solid var(--red);color:var(--red);background:transparent;
  padding:6px 13px;cursor:pointer;text-transform:lowercase}
.mini.solid{background:var(--red);color:var(--cream)}
.mini.gray{border-color:var(--hair2);color:var(--soft)}
select.mini{appearance:none;padding:6px 13px}
.status-held{color:#b07c1f}.status-confirmed{color:#2e7d5b}.status-seated{color:var(--red)}.status-cancelled{color:#b3a89f}

/* ---------- smartphone-first ---------- */
@media (max-width:760px){
  .site-head{padding:14px 18px}
  .nav-burger{display:flex}
  .site-nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--cream);border-bottom:1px solid var(--hair);padding:6px 18px 14px;
    box-shadow:0 18px 30px rgba(180,110,85,.12)}
  .site-nav.open{display:flex}
  .site-nav a{font-size:17px;padding:15px 4px;border-bottom:1px solid #f6ebe5}
  .site-nav a:last-child{border-bottom:none}
  .site-nav .navapp{display:block;color:var(--soft)}
  .cta.solid{padding:10px 16px;font-size:13px}

  /* iOS Safari zooms on focus when inputs are <16px — never let that happen */
  input,textarea,select{font-size:16px !important}

  .event-row{flex-wrap:wrap}
  .event-row>div[style*="align-self"]{width:100%;margin-top:4px}
  .event-row .btn{width:100%;text-align:center}

  .site-foot{flex-direction:column;gap:14px;padding:34px 20px}
  .wrap{padding:26px 18px}
  h1.display{font-size:clamp(30px,9vw,38px)}
  .btn{padding:15px 22px}
}