/* ======================================================
     BASE RESET (the Claude Artifact host used to inject this)
     ====================================================== */
  html{
    box-sizing:border-box;
    scroll-padding-top:env(safe-area-inset-top,0px);
  }
  *, *::before, *::after{ box-sizing:inherit; }
  html, body{ margin:0; padding:0; }
  body{
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  img{ max-width:100%; }
  [hidden]{ display:none !important; }

  /* ======================================================
     DESIGN SYSTEM — Sushi Lounge Beer
     Tokens first, then base, then components (reusable,
     scoped by class — never bare element selectors that can
     leak into an unrelated part of the page), then layout,
     then the admin panel, then responsive overrides.
     ====================================================== */

  :root{
    /* -- color: brand -- */
    --red:#a6001b;
    --red-dim:#7f0016;
    /* -- color: surface & text -- */
    --ink:#18130f;
    --ink-soft:#5a5049;
    --paper:#faf7f2;
    --surface:#ffffff;
    --line:#e9e1d5;
    --muted:#948a7d;
    /* -- color: semantic -- */
    --ok:#2f7d4f;
    --off:#b5533f;
    --focus:#a6001b;

    /* -- type scale -- */
    --text-xs:11px;
    --text-sm:12px;
    --text-base:13px;
    --text-md:14px;
    --text-lg:15px;
    --text-xl:21px;
    --display-sm:24px;
    --display-md:26px;
    --display-lg:28px;
    --font-display:"Bebas Neue",Impact,sans-serif;
    --font-body:"Work Sans",-apple-system,BlinkMacSystemFont,sans-serif;

    /* -- spacing scale -- */
    --space-1:4px;
    --space-2:8px;
    --space-3:12px;
    --space-4:16px;
    --space-5:20px;
    --space-6:24px;
    --space-7:32px;

    /* -- radius scale -- */
    --radius-sm:8px;
    --radius-md:10px;
    --radius-lg:14px;
    --radius-xl:18px;
    --radius-pill:999px;

    /* -- elevation & z-index -- */
    --shadow-fab:0 6px 18px rgba(0,0,0,.35);
    --z-nav:19;
    --z-header:20;
    --z-fab:40;
    --z-overlay:50;

    color-scheme:light;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --red:#ff5b6c;
      --red-dim:#ff8590;
      --ink:#f3ede4;
      --ink-soft:#cabfb1;
      --paper:#151109;
      --surface:#1f1a12;
      --line:#3a3225;
      --muted:#9c9082;
      --ok:#59c084;
      --off:#e0846f;
      color-scheme:dark;
    }
  }
  :root[data-theme="dark"]{
    --red:#ff5b6c;
    --red-dim:#ff8590;
    --ink:#f3ede4;
    --ink-soft:#cabfb1;
    --paper:#151109;
    --surface:#1f1a12;
    --line:#3a3225;
    --muted:#9c9082;
    --ok:#59c084;
    --off:#e0846f;
    color-scheme:dark;
  }

  /* ---------- base ---------- */
  * { box-sizing:border-box; }
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:var(--font-body);
    padding-inline:0;
  }
  h1,h2,h3{ font-family:var(--font-display); font-weight:400; letter-spacing:.03em; text-wrap:balance; }
  .num{ font-variant-numeric:tabular-nums; }
  :focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

  /* ---------- component: button ---------- */
  .btn{
    font:600 var(--text-base) var(--font-body); border-radius:var(--radius-sm);
    border:1px solid var(--line); background:var(--surface); color:var(--ink);
    padding:var(--space-2) var(--space-3); cursor:pointer;
  }
  .btn:hover{ border-color:var(--ink-soft); }
  .btn.primary{ background:var(--red); border-color:var(--red); color:#fff; }
  .btn.primary:hover{ background:var(--red-dim); border-color:var(--red-dim); }
  .btn.ghost{ background:transparent; }
  .btn.danger{ color:var(--off); }
  .btn.danger:hover{ border-color:var(--off); }
  .btn:disabled{ opacity:.5; cursor:default; }
  .btn.sm{ padding:5px 9px; font-size:var(--text-sm); }

  /* ---------- component: form field ----------
     Base style for text-like inputs & textareas only —
     checkboxes/radios opt out and get their own small rule,
     so a control from one part of the page can never stretch
     or restyle a control in an unrelated part. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea{
    font:500 var(--text-md) var(--font-body); color:var(--ink); background:var(--surface);
    border:1px solid var(--line); border-radius:var(--radius-sm); padding:9px 11px; width:100%;
  }
  textarea{ resize:vertical; min-height:44px; }
  input[type="checkbox"], input[type="radio"]{ width:16px; height:16px; accent-color:var(--red); flex:none; }

  /* ---------- component: badge ---------- */
  .badge{
    display:inline-block; font:700 10px var(--font-body); letter-spacing:.06em; text-transform:uppercase;
    color:#fff; background:var(--red); padding:2px 7px; border-radius:4px; margin-left:6px; vertical-align:2px;
  }

  /* ---------- layout: header & nav ---------- */
  header.top{
    position:sticky; top:env(safe-area-inset-top,0px); z-index:var(--z-header);
    background:var(--surface);
    border-bottom:1px solid var(--line);
    padding:var(--space-3) var(--space-4);
    display:flex; align-items:center; gap:var(--space-3);
  }
  header.top img.logo{ height:52px; width:52px; object-fit:contain; flex:none; }
  header.top .lockup{ flex:1; min-width:0; }
  header.top h1{ margin:0; font-size:var(--display-md); color:var(--red); line-height:1; }
  header.top .tag{ margin:2px 0 0; font-size:var(--text-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
  header.top .modebtn{
    flex:none; border:1px solid var(--line); background:transparent; color:var(--ink-soft);
    font:600 var(--text-sm) var(--font-body); letter-spacing:.02em; padding:9px 14px; border-radius:var(--radius-pill); cursor:pointer;
  }
  header.top .modebtn:hover{ border-color:var(--red); color:var(--red); }

  nav.chips{
    position:sticky; top:calc(env(safe-area-inset-top,0px) + 81px); z-index:var(--z-nav);
    background:var(--paper); border-bottom:1px solid var(--line);
    display:flex; gap:var(--space-2); overflow-x:auto; padding:10px var(--space-4);
    scrollbar-width:none;
  }
  nav.chips::-webkit-scrollbar{ display:none; }
  nav.chips button{
    flex:none; border:1px solid var(--line); background:var(--surface); color:var(--ink-soft);
    font:600 var(--text-sm) var(--font-body); padding:7px 13px; border-radius:var(--radius-pill); cursor:pointer; white-space:nowrap;
  }
  nav.chips button.active{ background:var(--red); border-color:var(--red); color:#fff; }

  /* ---------- pattern: review banner ---------- */
  .reviewbanner{
    display:block; max-width:720px; margin:14px auto 0; padding:11px var(--space-4);
    background:var(--red); color:#fff; text-decoration:none; text-align:center;
    font-size:var(--text-base); font-weight:600; border-radius:var(--radius-md);
  }
  .reviewbanner:hover{ background:var(--red-dim); }

  /* ---------- pattern: wifi popup ---------- */
  .wifi-fab{
    position:fixed; right:16px; bottom:calc(env(safe-area-inset-bottom,0px) + 16px); z-index:var(--z-fab);
    background:var(--ink); color:#fff; border:none; border-radius:var(--radius-pill);
    padding:12px 18px; font:600 var(--text-base) var(--font-body); cursor:pointer;
    box-shadow:var(--shadow-fab);
  }
  .wifi-fab:hover{ opacity:.9; }

  .wifi-overlay{
    position:fixed; inset:0; z-index:var(--z-overlay); background:rgba(10,8,6,.6);
    display:flex; align-items:flex-end; justify-content:center; padding:0;
  }
  @media (min-width:560px){ .wifi-overlay{ align-items:center; padding:var(--space-5); } }

  .wifi-modal{
    position:relative; background:var(--surface); color:var(--ink);
    width:100%; max-width:420px; border-radius:var(--radius-xl) var(--radius-xl) 0 0;
    padding:var(--space-6) var(--space-5) calc(env(safe-area-inset-bottom,0px) + var(--space-5));
    max-height:90vh; overflow-y:auto;
  }
  @media (min-width:560px){ .wifi-modal{ border-radius:var(--radius-xl); padding:var(--space-6); } }
  .wifi-modal h3{ margin:0 0 6px; font-size:var(--display-sm); color:var(--red); }
  .wifi-sub{ margin:0 0 var(--space-4); font-size:var(--text-base); color:var(--ink-soft); line-height:1.5; }
  .wifi-x{
    position:absolute; top:var(--space-3); right:14px; background:none; border:none;
    font-size:22px; line-height:1; color:var(--muted); cursor:pointer; padding:4px;
  }
  .wifi-field{ display:block; margin-bottom:var(--space-3); }
  .wifi-field span{ display:block; font-size:var(--text-sm); font-weight:600; color:var(--ink-soft); margin-bottom:5px; }
  .wifi-field input{ font-size:16px; padding:11px 12px; }
  .wifi-consent{ display:flex; gap:9px; align-items:flex-start; margin:var(--space-4) 0 var(--space-5); font-size:11.5px; color:var(--ink-soft); line-height:1.5; }
  .wifi-consent input{ margin-top:2px; }
  .wifi-submit{ width:100%; padding:var(--space-3); font-size:var(--text-md); }
  .wifi-creds{ display:flex; flex-direction:column; gap:10px; margin:4px 0 var(--space-5); }
  .wifi-creds div{ display:flex; justify-content:space-between; align-items:center; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-md); padding:var(--space-3) 14px; }
  .wifi-creds span{ font-size:var(--text-sm); color:var(--muted); }
  .wifi-creds strong{ font-size:var(--text-lg); font-variant-numeric:tabular-nums; }

  /* ---------- layout: menu ---------- */
  main{ max-width:720px; margin:0 auto; padding:22px var(--space-4) 60px; }

  section.cat{ padding-block:22px; scroll-margin-top:150px; }
  section.cat + section.cat{ border-top:1px solid var(--line); }
  section.cat h2{ margin:0 0 var(--space-4); font-size:var(--display-lg); color:var(--red); }

  /* ---------- pattern: menu item row ---------- */
  ul.items{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-5); }
  .item{ display:flex; gap:var(--space-3); align-items:flex-start; }
  .item .thumb{ width:68px; height:68px; border-radius:var(--radius-md); object-fit:cover; flex:none; background:var(--line); }
  .item .body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--space-1); }
  .item .head{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; }
  .item .name{ min-width:0; font-weight:600; font-size:var(--text-lg); margin:0; }
  .item .desc{ margin:0; font-size:var(--text-base); color:var(--ink-soft); line-height:1.3; white-space:pre-line; }
  .item .price{ flex:none; text-align:right; font-weight:700; font-size:var(--text-lg); }
  .item .price .was{ display:block; font-weight:500; font-size:var(--text-sm); color:var(--muted); text-decoration:line-through; }
  .item .price .now{ color:var(--red); }

  footer.info{ max-width:720px; margin:0 auto; padding:0 var(--space-4) 48px; color:var(--muted); font-size:12.5px; line-height:1.7; }
  footer.info strong{ color:var(--ink-soft); }

  .empty{ padding:60px var(--space-4); text-align:center; color:var(--muted); font-size:var(--text-md); }

  /* ---------- admin: login ---------- */
  .loginbox{ max-width:360px; margin:60px auto; padding:0 var(--space-4); display:flex; flex-direction:column; gap:var(--space-3); }
  .loginbox h2{ margin:0 0 4px; font-size:var(--display-sm); color:var(--red); }
  .loginbox p{ margin:0 0 var(--space-2); font-size:var(--text-base); color:var(--ink-soft); }
  .loginbox .error{ font-size:var(--text-sm); color:var(--off); display:none; }
  .loginbox .error.show{ display:block; }

  /* ---------- admin: wifi leads ---------- */
  .leadstable{ width:100%; border-collapse:collapse; font-size:var(--text-base); }
  .leadstable th{ text-align:left; font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.05em; color:var(--muted); padding:8px 10px; border-bottom:1px solid var(--line); }
  .leadstable td{ padding:8px 10px; border-bottom:1px solid var(--line); }
  .leadstoggle{ background:none; border:none; color:var(--red); font:600 var(--text-base) var(--font-body); cursor:pointer; padding:0; text-decoration:underline; text-underline-offset:2px; }

  /* ---------- admin: panel ---------- */
  #admin{ max-width:720px; margin:0 auto; padding:var(--space-5) var(--space-4) 80px; display:flex; flex-direction:column; gap:var(--space-6); }
  #admin .notice{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:var(--space-3) 14px; font-size:var(--text-base); color:var(--ink-soft); }
  .newcat{ display:flex; gap:var(--space-2); }
  .newcat input{ flex:1; }

  .catcard{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; }
  .catcard .cathead{ display:flex; align-items:center; gap:10px; padding:var(--space-3) 14px; border-bottom:1px solid var(--line); }
  .catcard .cathead input{ font:600 var(--text-lg) var(--font-body); border-color:transparent; background:transparent; padding:6px var(--space-2); }
  .catcard .cathead input:hover, .catcard .cathead input:focus{ border-color:var(--line); background:var(--paper); }
  .catcard .catcount{ flex:none; font-size:var(--text-xs); color:var(--muted); white-space:nowrap; }
  .cathandle{ flex:none; cursor:grab; color:var(--muted); font-size:var(--text-lg); line-height:1; user-select:none; }
  .cathandle:active{ cursor:grabbing; }
  .catcard.dragging{ opacity:.4; }

  .adminitem{ display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center; padding:var(--space-3) 14px; border-bottom:1px solid var(--line); }
  .adminitem:last-of-type{ border-bottom:none; }
  .adminitem.dragging{ opacity:.4; }
  .ihandle{ flex:none; cursor:grab; color:var(--muted); font-size:var(--text-base); line-height:1; user-select:none; padding:0 2px; align-self:center; }
  .ihandle:active{ cursor:grabbing; }
  .adminitem .aphoto{ flex:none; display:flex; flex-direction:column; align-items:center; gap:3px; }
  .adminitem .athumb{ width:44px; height:44px; border-radius:var(--radius-sm); object-fit:cover; flex:none; background:var(--paper); }
  .adminitem .aphoto-empty{ display:flex; align-items:center; justify-content:center; border:1px dashed var(--line); font-size:9px; color:var(--muted); text-align:center; line-height:1.2; }
  .adminitem .aphoto-btn{ font-size:10px; font-weight:600; color:var(--red); cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
  .adminitem .aname{ flex:1 1 200px; min-width:0; }
  .adminitem .aname .n{ font-weight:600; font-size:var(--text-md); }
  .adminitem .aname .d{ font-size:var(--text-sm); color:var(--muted); margin-top:2px; }
  .adminitem .aprice{ flex:none; display:flex; align-items:center; gap:5px; }
  .adminitem .aprice span{ color:var(--muted); font-size:var(--text-base); }
  .adminitem .aprice input{ width:84px; text-align:right; padding:6px var(--space-2); }
  .adminitem .apromo{ flex:none; display:flex; align-items:center; gap:5px; }
  .adminitem .apromo span{ color:var(--red); font-size:var(--text-sm); font-weight:600; }
  .adminitem .apromo input{ width:74px; text-align:right; padding:6px var(--space-2); border-color:var(--red); }
  .adminitem .apromo input::placeholder{ color:var(--muted); font-weight:400; }
  .adminitem .avail{ flex:none; display:flex; align-items:center; gap:6px; font-size:var(--text-sm); color:var(--ink-soft); }
  .adminitem.is-unavailable{ opacity:.55; }
  .savemark{ font-size:var(--text-xs); color:var(--ok); opacity:0; transition:opacity .25s; }
  .savemark.show{ opacity:1; }

  .additem{ padding:var(--space-3) 14px; display:flex; flex-direction:column; gap:var(--space-2); background:var(--paper); }
  .additem .row{ display:flex; gap:var(--space-2); }
  .additem .row input:first-child{ flex:2; }
  .additem .row input:last-child{ flex:1; max-width:110px; }
  .catfoot{ display:flex; justify-content:flex-end; padding:8px 14px var(--space-3); }

  /* skeleton loader (kept for future async states) */
  .skel{ background:linear-gradient(90deg,var(--line),var(--surface),var(--line)); background-size:200% 100%; border-radius:6px; animation:shine 1.4s infinite; }
  @media (prefers-reduced-motion:reduce){ .skel{ animation:none; } }
  @keyframes shine{ to{ background-position:-200% 0; } }

  /* ---------- responsive ---------- */
  @media (max-width:480px){
    header.top{ padding:var(--space-3) 14px; gap:10px; }
    header.top img.logo{ height:42px; width:42px; }
    header.top h1{ font-size:var(--text-xl); }
    header.top .modebtn{ padding:8px 11px; font-size:var(--text-xs); }
    .item .price{ font-size:var(--text-md); }
  }