:root{
  --bg:#0a0a0a;          /* near-black */
  --panel:#111;          /* soft-black panel */
  --ink:#ededed;         /* off-white text */
  --dim:#7a7a7a;         /* dim grey */
  --rule:#2a2a2a;        /* separators */
  --line:#444;           /* dashed lines / leaders */
  --neon:#39ff14;        /* electric green: live status / surge ONLY */
  --warn:#ff5c5c;        /* bans / errors */
  --mono:'Courier New',ui-monospace,Menlo,Consolas,monospace;
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:var(--mono);line-height:1.55;font-size:16px;
  -webkit-font-smoothing:antialiased}
body{max-width:560px;margin:0 auto;min-height:100vh;padding:0 18px 120px;
  letter-spacing:.3px}
a{color:var(--ink)}
.hidden{display:none!important}

/* ---- monogram + header ---- */
.brandmark{display:block;margin:26px auto 6px;width:84px;height:84px}
.hero{display:block;margin:18px auto 4px;width:min(300px,72vw);height:auto;
  border-radius:8px}
.wordmark{font-family:var(--serif);text-align:center;font-size:30px;
  letter-spacing:4px;font-weight:600;margin:0}
.tagline{font-family:var(--serif);text-align:center;color:var(--dim);
  font-style:italic;font-size:15px;margin:2px 0 16px}

/* ---- dashed rules + status ---- */
.rule{border:0;border-top:1.5px dashed var(--line);margin:16px 0}
.status{text-align:center;text-transform:uppercase;font-size:13px;
  letter-spacing:1.5px;color:var(--dim)}
.status .live{color:var(--neon);text-shadow:0 0 8px rgba(57,255,20,.5)}
.status .dot{display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--neon);box-shadow:0 0 8px var(--neon);margin-right:6px;
  vertical-align:middle;animation:pulse 1.8s infinite}
.status .off{color:var(--warn)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.surge{color:var(--neon);text-align:center;font-size:13px;letter-spacing:1px;
  border:1px dashed var(--neon);padding:7px;margin:10px 0;text-transform:uppercase}

/* ---- section headers ---- */
.cat{text-transform:uppercase;font-weight:bold;letter-spacing:1px;
  margin:22px 0 8px;font-size:15px;display:flex;align-items:center;gap:9px}

/* ---- menu rows w/ dot leaders ---- */
.row{display:flex;align-items:flex-end;margin:7px 0;font-size:15px}
.row .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .lead{flex:1;border-bottom:1.5px dotted var(--line);margin:0 7px 4px}
.row .pr{white-space:nowrap}
.qty{display:flex;align-items:center;gap:10px;margin-left:12px}
.qbtn{width:28px;height:28px;border:1px solid var(--line);background:transparent;
  color:var(--ink);font-family:var(--mono);font-size:17px;cursor:pointer;
  border-radius:3px;line-height:1}
.qbtn:active{background:#222}
.qn{min-width:16px;text-align:center}

/* ---- buttons ---- */
.btn{display:block;width:100%;padding:15px;margin:12px 0;background:var(--ink);
  color:#000;border:none;font-family:var(--mono);font-weight:bold;font-size:15px;
  letter-spacing:1px;text-transform:uppercase;cursor:pointer;border-radius:4px}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn.neon{background:var(--neon);color:#000;box-shadow:0 0 14px rgba(57,255,20,.4)}
.btn.call{background:var(--neon);color:#000;font-size:17px;padding:18px}
.btn:disabled{opacity:.35;cursor:not-allowed}

/* ---- inputs ---- */
label{display:block;text-transform:uppercase;font-size:12px;color:var(--dim);
  letter-spacing:1px;margin:14px 0 5px}
input,textarea,select{width:100%;padding:13px;background:#000;border:1px solid var(--line);
  color:var(--ink);font-family:var(--mono);font-size:15px;border-radius:4px}
textarea{min-height:90px;resize:vertical}
input:focus,textarea:focus{outline:none;border-color:var(--ink)}

/* ---- cards / notices ---- */
.card{border:1px dashed var(--line);padding:16px;margin:14px 0;border-radius:4px}
.notice{font-size:13px;color:var(--dim);margin:10px 0}
.warnbox{border:1px solid var(--warn);color:var(--warn);padding:12px;
  font-size:13px;margin:12px 0;border-radius:4px}
.err{color:var(--warn);font-size:13px;margin:8px 0;min-height:18px}
.tier-badge{display:inline-block;border:1px solid var(--line);padding:2px 9px;
  font-size:11px;text-transform:uppercase;letter-spacing:1px;border-radius:3px}
.tier-badge.mid{border-color:var(--neon);color:var(--neon)}

/* ---- tip blocks ---- */
.tips{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin:8px 0}
.tip{border:1px solid var(--line);padding:13px 8px;text-align:center;cursor:pointer;
  border-radius:4px;font-size:14px}
.tip.sel{border-color:var(--neon);color:var(--neon);box-shadow:0 0 10px rgba(57,255,20,.25)}
.tip small{display:block;color:var(--dim);font-size:10px;margin-top:3px;letter-spacing:.5px}

/* ---- totals receipt ---- */
.totrow{display:flex;justify-content:space-between;font-size:14px;margin:5px 0}
.totrow.grand{font-size:18px;font-weight:bold;border-top:1.5px dashed var(--line);
  padding-top:10px;margin-top:10px}
.totrow .free{color:var(--neon)}

/* ---- footer ---- */
.foot{text-align:center;color:var(--dim);font-size:12px;letter-spacing:1px;
  margin-top:30px;text-transform:uppercase}

/* ---- floating cart bar ---- */
.cartbar{position:fixed;left:0;right:0;bottom:0;background:var(--panel);
  border-top:1.5px dashed var(--line);padding:13px 18px;max-width:560px;margin:0 auto;
  display:flex;align-items:center;gap:12px}
.cartbar .sum{flex:1;font-size:13px}
.cartbar .sum b{font-size:16px}
.cartbar button{width:auto;margin:0;padding:13px 20px;white-space:nowrap}