/* ============================================================
   MenuQR — Shared Design System
   Preserves the original single-file prototype's visual identity.
   Do not change tokens below without checking every page.
   ============================================================ */

  :root{
    --ink:#17181A;
    --ink-soft:#2A2C2E;
    --teal:#0E5C52;
    --teal-deep:#0A423B;
    --mango:#FF7A29;
    --mango-deep:#E0621A;
    --pink:#E23E82;
    --paper:#FBF6E8;
    --paper-dim:#F1E9D3;
    --line: rgba(251,246,232,0.16);
    --maxw: 1180px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--ink);
    color:var(--paper);
    font-family:'Inter',sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{ background:var(--mango); color:var(--ink); }
  img{max-width:100%;display:block;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
  h1,h2,h3{ margin:0; }
  .display{
    font-family:'Bebas Neue', sans-serif;
    letter-spacing:0.5px;
    line-height:0.95;
    text-transform:uppercase;
  }
  .mono{ font-family:'Space Mono', monospace; }
  a{color:inherit;}
  button{font-family:inherit; cursor:pointer;}

  /* ---------- NAV ---------- */
  header.nav{
    position:sticky; top:0; z-index:50;
    background:rgba(23,24,26,0.86);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{
    max-width:var(--maxw); margin:0 auto; padding:16px 28px;
    display:flex; align-items:center; justify-content:space-between;
  }
  .logo{
    display:flex; align-items:baseline; gap:6px;
    font-family:'Bebas Neue',sans-serif; font-size:26px; letter-spacing:0.5px;
  }
  .logo .dot{ color:var(--mango); font-family:'Space Mono',monospace; font-size:14px; }
  .nav-links{ display:flex; gap:32px; font-size:14px; font-weight:500; }
  .nav-links a{ opacity:0.75; text-decoration:none; transition:opacity .15s; }
  .nav-links a:hover{ opacity:1; }
  .nav-cta{
    background:var(--mango); color:var(--ink); border:none; border-radius:100px;
    padding:10px 20px; font-weight:700; font-size:14px;
  }
  .nav-right{ display:flex; align-items:center; gap:10px; position:relative; }
  .user-btn{
    width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:transparent; border:1px solid var(--line); color:var(--paper);
    transition:background .15s, border-color .15s;
  }
  .user-btn:hover{ border-color:rgba(251,246,232,0.4); }
  .user-btn.open{ background:var(--paper); border-color:var(--paper); color:var(--ink); }
  .user-menu{
    position:absolute; top:calc(100% + 12px); right:0; width:200px;
    background:var(--paper); color:var(--ink); border-radius:10px;
    box-shadow:0 20px 50px rgba(0,0,0,0.4); padding:8px;
    display:none; flex-direction:column; gap:2px; z-index:60;
  }
  .user-menu.open{ display:flex; }
  .user-menu button{
    background:none; border:none; text-align:left; padding:11px 12px; border-radius:7px;
    font-size:13.5px; font-weight:600; color:var(--ink);
  }
  .user-menu button:hover{ background:rgba(23,24,26,0.06); }
  .user-menu button.primary{ color:var(--mango-deep); }
  .user-menu .divider{ height:1px; background:rgba(23,24,26,0.1); margin:6px 4px; }
  @media (max-width:760px){ .nav-links{display:none;} }

  /* ---------- HERO ---------- */
  .hero{
    padding:88px 0 70px;
    background:
      radial-gradient(ellipse at 15% 0%, rgba(255,122,41,0.16), transparent 55%),
      radial-gradient(ellipse at 90% 10%, rgba(226,62,130,0.13), transparent 50%),
      var(--ink);
    border-bottom:1px solid var(--line);
    position:relative; overflow:hidden;
  }
  .hero-grid{
    display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px; align-items:center;
  }
  @media (max-width:900px){ .hero-grid{grid-template-columns:1fr;} }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'Space Mono',monospace; font-size:12px; letter-spacing:0.08em;
    color:var(--mango); border:1px solid rgba(255,122,41,0.4); border-radius:100px;
    padding:6px 14px; margin-bottom:22px; text-transform:uppercase;
  }
  .eyebrow::before{ content:"●"; font-size:8px; color:var(--pink); }
  .hero h1{ font-size:clamp(42px,6vw,74px); }
  .hero h1 span{ color:var(--mango); }
  .hero p.sub{
    font-size:18px; line-height:1.6; color:rgba(251,246,232,0.72);
    max-width:480px; margin:22px 0 32px;
  }
  .hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; }
  .btn-primary{
    background:var(--mango); color:var(--ink); border:none; border-radius:100px;
    padding:15px 28px; font-weight:800; font-size:15px;
    box-shadow:0 8px 24px rgba(255,122,41,0.28);
    transition:transform .15s ease;
  }
  .btn-primary:hover{ transform:translateY(-2px); }
  .btn-ghost{
    background:transparent; color:var(--paper); border:1px solid var(--line);
    border-radius:100px; padding:15px 26px; font-weight:600; font-size:15px;
  }
  .hero-stats{ display:flex; gap:34px; margin-top:44px; }
  .hero-stats div b{ display:block; font-family:'Bebas Neue',sans-serif; font-size:30px; color:var(--paper);}
  .hero-stats div span{ font-size:12px; color:rgba(251,246,232,0.55); }

  /* ticket visual in hero */
  .ticket-hero{
    background:var(--paper); color:var(--ink); border-radius:6px;
    padding:26px 24px 30px; max-width:340px; margin-left:auto;
    box-shadow:0 30px 60px rgba(0,0,0,0.45);
    position:relative; transform:rotate(2.2deg);
  }
  .ticket-hero::before, .ticket-hero::after{
    content:""; position:absolute; left:0; right:0; height:14px;
    background:
      radial-gradient(circle at 8px 7px, var(--ink) 7px, transparent 7.5px) repeat-x;
    background-size:16px 14px;
  }
  .ticket-hero::before{ top:-7px; }
  .ticket-hero::after{ bottom:-7px; transform:rotate(180deg); }
  .ticket-hero .t-head{ text-align:center; margin-bottom:10px; }
  .ticket-hero .t-head b{ font-family:'Bebas Neue',sans-serif; font-size:22px; display:block; }
  .ticket-hero .t-head span{ font-family:'Space Mono',monospace; font-size:10px; letter-spacing:0.1em; opacity:0.6; }
  .t-dash{ border-top:1.5px dashed rgba(23,24,26,0.35); margin:14px 0; }
  .ticket-hero .t-row{ display:flex; justify-content:space-between; font-family:'Space Mono',monospace; font-size:12px; padding:4px 0; }
  .qr-fake{
    width:150px; height:150px; margin:16px auto 8px;
    background:
      repeating-linear-gradient(90deg, var(--ink) 0 8px, transparent 8px 16px),
      repeating-linear-gradient(0deg, var(--ink) 0 8px, transparent 8px 16px);
    background-blend-mode:multiply; opacity:0.9;
    -webkit-mask: radial-gradient(circle, black 60%, black 60%);
  }
  .ticket-hero .t-foot{ text-align:center; font-family:'Space Mono',monospace; font-size:10px; opacity:0.6; letter-spacing:0.08em; }

  /* ---------- SECTION generic ---------- */
  section{ padding:96px 0; }
  .section-head{ max-width:640px; margin-bottom:56px; }
  .section-head .eyebrow{ margin-bottom:16px; }
  .section-head h2{ font-size:clamp(32px,4.4vw,48px); }
  .section-head p{ margin-top:14px; font-size:16px; line-height:1.65; color:rgba(251,246,232,0.65); }

  /* ---------- HOW IT WORKS (order tickets) ---------- */
  .how{ background:var(--teal-deep); border-bottom:1px solid var(--line); }
  .how .section-head h2{ color:var(--paper); }
  .order-rail{
    display:grid; grid-template-columns:repeat(5,1fr); gap:16px;
  }
  @media (max-width:980px){ .order-rail{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:560px){ .order-rail{grid-template-columns:1fr;} }
  .order-card{
    background:rgba(251,246,232,0.05); border:1px solid rgba(251,246,232,0.14);
    border-radius:10px; padding:22px 18px; position:relative;
  }
  .order-card .num{
    font-family:'Space Mono',monospace; font-size:12px; color:var(--mango);
    letter-spacing:0.08em; margin-bottom:14px; display:block;
  }
  .order-card h3{ font-family:'Bebas Neue',sans-serif; font-size:22px; letter-spacing:0.3px; margin-bottom:8px; }
  .order-card p{ font-size:13.5px; line-height:1.55; color:rgba(251,246,232,0.68); margin:0; }

  /* ---------- DEMO (the actual prototype flow) ---------- */
  .demo{ background:var(--ink); }
  .step-label{
    font-family:'Space Mono',monospace; font-size:12px; color:var(--mango);
    letter-spacing:0.1em; text-transform:uppercase; margin-bottom:10px;
  }
  .step-title{ font-family:'Bebas Neue',sans-serif; font-size:34px; margin-bottom:6px; }
  .step-desc{ color:rgba(251,246,232,0.6); font-size:15px; margin-bottom:32px; max-width:560px; }

  /* tabs */
  .tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:28px; }
  .tab-btn{
    background:transparent; border:1px solid var(--line); color:var(--paper);
    padding:9px 18px; border-radius:100px; font-size:13.5px; font-weight:600;
    opacity:0.6; transition:all .15s;
  }
  .tab-btn.active{ background:var(--paper); color:var(--ink); opacity:1; border-color:var(--paper); }

  .tpl-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  @media (max-width:900px){ .tpl-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:600px){ .tpl-grid{grid-template-columns:1fr;} }
  .tpl-card{
    border-radius:14px; overflow:hidden; border:2px solid transparent;
    background:var(--ink-soft); cursor:pointer; transition:transform .18s, border-color .18s;
  }
  .tpl-card:hover{ transform:translateY(-4px); }
  .tpl-card.selected{ border-color:var(--mango); }
  .tpl-preview{ height:150px; display:flex; align-items:center; justify-content:center; position:relative; }
  .tpl-preview .mini-title{ font-family:'Bebas Neue',sans-serif; font-size:20px; text-align:center; padding:0 14px; }
  .tpl-meta{ padding:14px 16px 18px; }
  .tpl-meta b{ display:block; font-size:15px; margin-bottom:3px; }
  .tpl-meta span{ font-size:12.5px; color:rgba(251,246,232,0.55); }
  .tpl-pick{
    margin-top:12px; width:100%; padding:9px; border-radius:8px; border:1px solid var(--line);
    background:transparent; color:var(--paper); font-size:12.5px; font-weight:700;
    letter-spacing:0.03em; text-transform:uppercase;
  }
  .tpl-card.selected .tpl-pick{ background:var(--mango); color:var(--ink); border-color:var(--mango); }

  .tpl-tier{
    position:absolute; top:10px; left:10px; z-index:3;
    font-family:'Space Mono',monospace; font-size:9.5px; letter-spacing:0.1em; font-weight:700;
    padding:4px 9px; border-radius:100px; text-transform:uppercase;
  }
  .tier-free{ background:rgba(255,255,255,0.85); color:var(--teal-deep); }
  .tier-pro{ background:var(--ink); color:var(--mango); border:1px solid rgba(255,122,41,0.5); }
  .tpl-lock{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    background:rgba(23,24,26,0.42); font-size:22px; z-index:2;
  }
  .tpl-price{ display:block; margin-top:8px; font-family:'Space Mono',monospace; font-size:13px; color:var(--mango); font-weight:700; }
  .tpl-price span{ color:rgba(251,246,232,0.5); font-weight:400; }
  .tpl-card.paid .tpl-pick{ border-color:rgba(255,122,41,0.5); color:var(--mango); }
  .tpl-card.paid.selected .pick-paid{ background:var(--mango); color:var(--ink); border-color:var(--mango); }

  /* retro-diner mini preview (template picker card) */
  .retro-mini{ display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; }
  .retro-mini-menu{ font-family:'Bebas Neue',sans-serif; font-size:30px; line-height:0.8; letter-spacing:1px; }
  .retro-mini-script{ font-size:14px; margin-top:-6px; transform:rotate(-6deg); }
  .retro-mini-rule{ width:46%; height:3px; margin-top:9px; border-radius:2px; }

  /* upload */
  .upload-zone{
    border:2px dashed var(--line); border-radius:16px; padding:50px 24px;
    text-align:center; background:rgba(251,246,232,0.03); position:relative; overflow:hidden;
  }
  .upload-zone.dragging{ border-color:var(--mango); background:rgba(255,122,41,0.06); }
  .upload-zone svg{ margin-bottom:14px; }
  .upload-zone h4{ font-family:'Bebas Neue',sans-serif; font-size:22px; margin-bottom:6px; }
  .upload-zone p{ font-size:13.5px; color:rgba(251,246,232,0.55); margin-bottom:20px; }
  .upload-btns{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
  #fileInput{ display:none; }

  .scan-box{ position:relative; border-radius:12px; overflow:hidden; margin-top:26px; display:none; }
  .scan-box img{ width:100%; display:block; filter:saturate(0.9); }
  .scan-line{
    position:absolute; left:0; right:0; height:3px; top:0;
    background:linear-gradient(90deg, transparent, var(--mango), transparent);
    box-shadow:0 0 18px 4px rgba(255,122,41,0.6);
    animation:scan 1.6s linear infinite;
  }
  @keyframes scan{ 0%{top:0;} 100%{top:100%;} }
  .scan-caption{
    position:absolute; bottom:0; left:0; right:0; padding:12px 16px;
    background:linear-gradient(0deg, rgba(0,0,0,0.75), transparent);
    font-family:'Space Mono',monospace; font-size:12px; letter-spacing:0.05em;
  }

  /* generated menu */
  .menu-stage{ display:none; }
  .menu-card{
    border-radius:16px; padding:38px 34px; max-width:560px; margin:0 auto;
    box-shadow:0 30px 70px rgba(0,0,0,0.4);
  }
  .menu-card .m-head{ text-align:center; margin-bottom:22px; }
  .menu-card .m-head b{ font-size:30px; display:block; }
  .menu-card .m-head span{ font-size:12.5px; letter-spacing:0.1em; opacity:0.65; }
  .m-section-title{
    font-family:'Space Mono',monospace; font-size:12px; letter-spacing:0.12em;
    text-transform:uppercase; opacity:0.6; margin:22px 0 10px;
  }
  .m-item{ display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px dashed rgba(0,0,0,0.12); align-items:baseline; }
  .m-item .m-name{ font-weight:600; font-size:15px; outline:none; }
  .m-item .m-price{ font-family:'Space Mono',monospace; font-size:14px; outline:none; white-space:nowrap; }
  .m-item .m-del{ opacity:0.3; border:none; background:none; font-size:14px; margin-left:8px; }
  .m-item .m-del:hover{ opacity:1; }
  .m-add{
    margin-top:14px; width:100%; padding:10px; border-radius:8px; border:1px dashed currentColor;
    background:none; font-size:13px; font-weight:600; opacity:0.7;
  }
  .edit-hint{ text-align:center; font-size:12.5px; color:rgba(251,246,232,0.45); margin-top:16px; }
  .generate-row{ text-align:center; margin-top:30px; }

  /* retro-diner generated menu layout */
  .menu-card.layout-retro-diner{ padding:38px 32px 32px; text-align:center; }
  .retro-head{ margin-bottom:2px; }
  .retro-menu-word{
    font-family:'Bebas Neue',sans-serif; font-size:66px; line-height:0.82; letter-spacing:2px;
    text-transform:uppercase;
  }
  .retro-script{
    display:inline-block; font-size:27px; font-weight:400; margin-top:-20px;
    transform:rotate(-5deg); outline:none;
  }
  .retro-rule{ height:4px; width:64%; margin:16px auto 22px; border-radius:2px; }
  .retro-body{ column-count:2; column-gap:26px; text-align:left; }
  .retro-section{ break-inside:avoid; margin-bottom:20px; }
  .retro-section-title{
    font-family:'Bebas Neue',sans-serif; font-size:17px; letter-spacing:0.4px;
    text-transform:uppercase; border-bottom:2.5px solid; padding-bottom:5px; margin-bottom:11px;
  }
  .retro-item{ display:flex; align-items:baseline; gap:6px; margin-bottom:9px; flex-wrap:wrap; }
  .retro-name{ font-weight:800; font-size:11.5px; text-transform:uppercase; outline:none; white-space:nowrap; min-width:0; flex-shrink:1; }
  .retro-desc{ white-space:normal !important; }
  .retro-leader{ flex:1; border-bottom:2px dotted rgba(35,31,32,0.35); min-width:8px; margin-bottom:3px; }
  .retro-price{ font-weight:800; font-size:12.5px; outline:none; white-space:nowrap; }
  .retro-del{ opacity:0.25; border:none; background:none; font-size:12px; }
  .retro-del:hover{ opacity:1; }
  .retro-foot{ text-align:center; margin-top:14px; font-size:11px; opacity:0.55; }
  .retro-add{ break-inside:avoid; border-color:currentColor; }

  /* floral-wedding generated menu layout */
  .menu-card.layout-floral-wedding{
    position:relative; padding:0; max-width:420px; aspect-ratio:768/1024;
    overflow:hidden; border-radius:6px;
  }
  .floral-frame{ position:absolute; inset:7% 6.5% 9%; border:2px solid; pointer-events:none; z-index:1; opacity:0.62; }
  .floral-botanical{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
  /* Colors are set as direct attributes on each SVG path/circle in
     main.js now, not via these classes — <use>-cloned content doesn't
     always pick up class-based CSS reliably across browsers. */
  .floral-inner{
    position:absolute; inset:15% 11% 9%; z-index:2;
    display:flex; flex-direction:column; align-items:center; text-align:center;
    overflow-y:auto;
  }
  .floral-title{ font-size:clamp(36px,7vw,54px); line-height:1; margin:2px 0 22px; font-weight:400; outline:none; flex-shrink:0; }
  .floral-section{ margin:0 0 20px; width:100%; }
  .floral-section-title{
    margin:0 0 9px; font-size:clamp(13px,2vw,17px); font-weight:500;
    letter-spacing:.09em; text-transform:uppercase; outline:none;
  }
  .floral-item{ margin-bottom:11px; position:relative; }
  .floral-name{ font-style:italic; font-size:13.5px; outline:none; }
  .floral-price{ font-style:italic; font-size:12.5px; opacity:0.85; margin-left:5px; outline:none; white-space:nowrap; }
  .floral-desc{
    display:block; white-space:normal; font-family:Arial, Helvetica, sans-serif;
    font-size:11px; opacity:0.75; font-style:italic; letter-spacing:.02em;
    margin-top:3px; line-height:1.4;
  }
  .floral-del{
    opacity:0.25; border:none; background:none; font-size:11px;
    margin-left:6px; vertical-align:middle;
  }
  .floral-del:hover{ opacity:1; }
  .floral-foot{ margin-top:auto; padding-top:10px; flex-shrink:0; }
  .floral-names{ font-size:clamp(22px,4vw,32px); outline:none; }
  .floral-sub{ display:block; font-size:12px; letter-spacing:.14em; margin-top:8px; opacity:0.85; outline:none; }
  .floral-add{
    margin-top:6px; width:100%; padding:8px; border-radius:6px; border:1px dashed currentColor;
    background:none; font-size:12px; font-weight:600; opacity:0.7;
  }

  /* ticket printer output */
  .printer-stage{ display:none; text-align:center; margin-top:50px; }
  .printer-slot{
    width:220px; height:16px; background:var(--ink-soft); margin:0 auto;
    border-radius:3px; box-shadow:0 6px 0 rgba(0,0,0,0.3) inset;
  }
  .ticket-out{
    background:var(--paper); color:var(--ink); width:260px; margin:0 auto;
    padding:22px 20px 26px; border-radius:0 0 6px 6px;
    transform:translateY(-100%); opacity:0;
    box-shadow:0 20px 50px rgba(0,0,0,0.4);
  }
  .ticket-out.dropped{ animation:drop .9s cubic-bezier(.2,.9,.3,1) forwards; }
  @keyframes drop{ 0%{transform:translateY(-100%); opacity:0;} 60%{opacity:1;} 100%{transform:translateY(0); opacity:1;} }
  .ticket-out .t-head b{ font-family:'Bebas Neue',sans-serif; font-size:20px; }
  .ticket-out .t-head span{ font-family:'Space Mono',monospace; font-size:10px; opacity:0.6; }
  #qrcode{ display:flex; justify-content:center; margin:16px 0 10px; }
  #qrcode img, #qrcode canvas{ border-radius:4px; }
  .ticket-out .t-url{ font-family:'Space Mono',monospace; font-size:10.5px; opacity:0.6; word-break:break-all; }
  .dl-row{ margin-top:22px; display:flex; gap:10px; justify-content:center; }
  .dl-btn{
    background:var(--paper); color:var(--ink); border:1px solid var(--line);
    padding:10px 18px; border-radius:100px; font-size:13px; font-weight:700;
  }
  .dl-btn.primary{ background:var(--mango); color:var(--ink); border-color:var(--mango); }

  /* ---------------- REFERRAL ---------------- */
  .referral{
    background:var(--teal-deep); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  }
  .ref-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px; align-items:start; }
  @media (max-width:900px){ .ref-grid{grid-template-columns:1fr;} }
  .ref-sub{ font-size:16px; line-height:1.65; color:rgba(251,246,232,0.68); max-width:480px; margin:16px 0 34px; }
  .ref-steps{ display:flex; flex-direction:column; gap:20px; }
  .ref-step{ display:flex; gap:16px; align-items:flex-start; }
  .ref-step .num{ font-size:13px; color:var(--mango); padding-top:2px; }
  .ref-step b{ display:block; font-size:16px; margin-bottom:3px; }
  .ref-step p{ margin:0; font-size:13.5px; color:rgba(251,246,232,0.6); line-height:1.5; }

  .ref-card{
    background:var(--paper); color:var(--ink); border-radius:16px; padding:32px 28px;
    box-shadow:0 30px 70px rgba(0,0,0,0.35); display:flex; flex-direction:column;
  }
  .ref-badge{
    font-size:11px; letter-spacing:0.12em; color:var(--pink); margin-bottom:10px; display:block;
  }
  .ref-amount{ font-family:'Bebas Neue',sans-serif; font-size:44px; line-height:1; }
  .ref-amount .tbd-x{ color:var(--mango); }
  .ref-amount-unit{ font-size:16px; }
  .ref-note{ font-size:12.5px; color:rgba(23,24,26,0.55); margin-top:6px; display:block; }
  .ref-card .t-dash{ border-top:1.5px dashed rgba(23,24,26,0.2); margin:22px 0 18px; }
  .ref-label{ font-size:11px; letter-spacing:0.1em; opacity:0.55; margin-bottom:8px; display:block; }
  .ref-link-row{ display:flex; gap:8px; }
  .ref-link-input{
    flex:1; border:1px solid rgba(23,24,26,0.18); background:rgba(23,24,26,0.03);
    border-radius:8px; padding:11px 12px; font-size:12.5px; color:var(--ink);
  }
  .ref-copy{
    background:var(--ink); color:var(--paper); border:none; border-radius:8px;
    padding:0 16px; font-size:12.5px; font-weight:700;
  }

  /* ---------------- AUTH MODAL ---------------- */
  .auth-overlay{
    position:fixed; inset:0; background:rgba(10,11,12,0.72); backdrop-filter:blur(3px);
    display:none; align-items:center; justify-content:center; z-index:100; padding:20px;
  }
  .auth-overlay.open{ display:flex; }
  .auth-modal{
    background:var(--paper); color:var(--ink); width:100%; max-width:400px;
    border-radius:10px; padding:30px 28px 28px; position:relative;
    box-shadow:0 40px 90px rgba(0,0,0,0.5);
  }
  .auth-modal::before, .auth-modal::after{
    content:""; position:absolute; left:0; right:0; height:14px;
    background:radial-gradient(circle at 8px 7px, var(--ink) 7px, transparent 7.5px) repeat-x;
    background-size:16px 14px;
  }
  .auth-modal::before{ top:-7px; }
  .auth-modal::after{ bottom:-7px; transform:rotate(180deg); }
  .auth-close{
    position:absolute; top:14px; right:16px; background:none; border:none;
    font-size:18px; color:rgba(23,24,26,0.45); line-height:1;
  }
  .auth-close:hover{ color:var(--ink); }
  .auth-head{ text-align:center; margin-bottom:22px; }
  .auth-head b{ font-family:'Bebas Neue',sans-serif; font-size:26px; display:block; }
  .auth-head span{ font-family:'Space Mono',monospace; font-size:11px; opacity:0.55; letter-spacing:0.08em; }
  .auth-view{ display:none; }
  .auth-view.active{ display:block; }
  .auth-field{ margin-bottom:14px; }
  .auth-field label{ display:block; font-size:12px; font-weight:600; margin-bottom:6px; opacity:0.75; }
  .auth-field input{
    width:100%; border:1px solid rgba(23,24,26,0.18); background:rgba(23,24,26,0.03);
    border-radius:8px; padding:11px 12px; font-size:14px; color:var(--ink); font-family:'Inter',sans-serif;
  }
  .auth-field input:focus{ outline:none; border-color:var(--mango); }
  .auth-submit{
    width:100%; background:var(--mango); color:var(--ink); border:none; border-radius:8px;
    padding:13px; font-weight:800; font-size:14.5px; margin-top:6px;
  }
  .auth-forgot{ text-align:right; margin:-6px 0 16px; }
  .auth-forgot a, .auth-switch a{ font-size:12.5px; color:var(--teal-deep); font-weight:600; text-decoration:none; }
  .auth-forgot a:hover, .auth-switch a:hover{ text-decoration:underline; }
  .auth-switch{ text-align:center; margin-top:20px; font-size:13px; opacity:0.75; }
  .auth-back{ font-size:12.5px; color:var(--teal-deep); font-weight:600; display:inline-block; margin-bottom:16px; text-decoration:none; }
  .auth-note{ font-size:12px; opacity:0.55; text-align:center; margin-top:14px; line-height:1.5; }

  /* ---------- FOOTER ---------- */
  footer{ background:var(--teal-deep); padding:60px 0 34px; border-top:1px solid var(--line); }
  .foot-grid{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:30px; margin-bottom:40px; }
  .foot-cta h3{ font-family:'Bebas Neue',sans-serif; font-size:30px; max-width:380px; }
  .foot-note{ font-size:12.5px; color:rgba(251,246,232,0.5); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; border-top:1px solid var(--line); padding-top:22px; }

  @media (prefers-reduced-motion: reduce){
    .scan-line, .ticket-out.dropped{ animation:none !important; }
  }

/* ============================================================
   EXTENDED DESIGN SYSTEM — added for the multi-page app
   Same tokens, same ticket/paper language, new components.
   ============================================================ */

/* ---------- generic layout helpers ---------- */
main{ display:block; }
.page-hero{
  padding:64px 0 48px;
  background:
    radial-gradient(ellipse at 15% 0%, rgba(255,122,41,0.14), transparent 55%),
    radial-gradient(ellipse at 90% 10%, rgba(226,62,130,0.10), transparent 50%),
    var(--ink);
  border-bottom:1px solid var(--line);
}
.page-hero h1{ font-size:clamp(34px,5vw,54px); }
.page-hero p.sub{ font-size:16px; line-height:1.6; color:rgba(251,246,232,0.68); max-width:560px; margin-top:14px; }
.section-tight{ padding:64px 0; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:900px){ .grid-2,.grid-3{ grid-template-columns:1fr; } }

/* ---------- authenticated nav variant ---------- */
.nav-links.app-links a.active{ opacity:1; color:var(--mango); }
.nav-links.app-links{ gap:26px; }

/* ---------- breadcrumbs / back link ---------- */
.back-link{
  display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600;
  color:rgba(251,246,232,0.65); text-decoration:none; margin-bottom:18px;
}
.back-link:hover{ color:var(--paper); }

/* ---------- buttons: extra variants ---------- */
.btn-sm{ padding:9px 16px; font-size:13px; border-radius:100px; font-weight:700; }
.btn-outline{
  background:transparent; color:var(--mango); border:1px solid rgba(255,122,41,0.5);
  border-radius:100px; padding:12px 22px; font-weight:700; font-size:14px;
}
.btn-danger{
  background:transparent; color:#FF6B6B; border:1px solid rgba(255,107,107,0.4);
  border-radius:100px; padding:12px 22px; font-weight:700; font-size:14px;
}
.btn-block{ width:100%; }
.btn-icon{
  width:38px; height:38px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--line); color:var(--paper);
}
.btn-icon:hover{ border-color:rgba(251,246,232,0.4); }

/* ---------- status badges ---------- */
.badge{
  display:inline-flex; align-items:center; gap:5px; font-family:'Space Mono',monospace;
  font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; font-weight:700;
  padding:4px 10px; border-radius:100px;
}
.badge::before{ content:"●"; font-size:7px; }
.badge-draft{ background:rgba(251,246,232,0.1); color:rgba(251,246,232,0.7); }
.badge-published{ background:rgba(14,92,82,0.35); color:#5FD8C4; border:1px solid rgba(95,216,196,0.3); }
.badge-paused{ background:rgba(226,62,130,0.15); color:var(--pink); }

/* ---------- progress stepper (create-menu wizard) ---------- */
.stepper{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:44px; }
.step-pill{
  display:flex; align-items:center; gap:8px; padding:9px 16px 9px 9px; border-radius:100px;
  border:1px solid var(--line); font-size:13px; font-weight:600; color:rgba(251,246,232,0.5);
}
.step-pill .n{
  width:22px; height:22px; border-radius:50%; background:rgba(251,246,232,0.08);
  display:flex; align-items:center; justify-content:center; font-family:'Space Mono',monospace; font-size:11px;
}
.step-pill.done{ color:var(--paper); border-color:rgba(255,122,41,0.35); }
.step-pill.done .n{ background:var(--mango); color:var(--ink); }
.step-pill.current{ color:var(--paper); border-color:var(--mango); background:rgba(255,122,41,0.08); }
.step-pill.current .n{ background:var(--mango); color:var(--ink); }

/* ---------- generic form fields ---------- */
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:12.5px; font-weight:600; margin-bottom:7px; opacity:0.8; }
.field input, .field select, .field textarea{
  width:100%; border:1px solid var(--line); background:rgba(251,246,232,0.04);
  border-radius:8px; padding:11px 13px; font-size:14px; color:var(--paper); font-family:'Inter',sans-serif;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--mango); }
.field .hint{ font-size:11.5px; color:rgba(251,246,232,0.45); margin-top:6px; }
.field-row{ display:flex; gap:14px; }
.field-row .field{ flex:1; }
.switch-row{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--line); }
.switch-row b{ font-size:14px; font-weight:600; display:block; }
.switch-row span{ font-size:12.5px; color:rgba(251,246,232,0.5); }
.switch{ position:relative; width:42px; height:24px; border-radius:100px; background:rgba(251,246,232,0.15); border:none; flex-shrink:0; }
.switch::after{ content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--paper); transition:transform .15s; }
.switch.on{ background:var(--mango); }
.switch.on::after{ transform:translateX(18px); }

/* Light-on-dark paper panel (used inside dark sections for forms) */
.panel{
  background:var(--ink-soft); border:1px solid var(--line); border-radius:16px; padding:28px;
}
.panel-paper{
  background:var(--paper); color:var(--ink); border-radius:16px; padding:28px;
  box-shadow:0 20px 50px rgba(0,0,0,0.3);
}
.panel-paper .field label{ color:rgba(23,24,26,0.7); }
.panel-paper .field input, .panel-paper .field select, .panel-paper .field textarea{
  border-color:rgba(23,24,26,0.16); background:rgba(23,24,26,0.03); color:var(--ink);
}

/* ---------- generic modal (reused for previews, confirmations) ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(10,11,12,0.72); backdrop-filter:blur(3px);
  display:none; align-items:center; justify-content:center; z-index:200; padding:20px;
}
.modal-overlay.open{ display:flex; }
.modal-box{
  background:var(--paper); color:var(--ink); width:100%; max-width:460px;
  border-radius:14px; padding:28px; position:relative; box-shadow:0 40px 90px rgba(0,0,0,0.5);
}
.modal-box.modal-wide{ max-width:720px; }
.modal-box .modal-close{
  position:absolute; top:14px; right:16px; background:none; border:none;
  font-size:18px; color:rgba(23,24,26,0.45);
}
.modal-box h3{ font-family:'Bebas Neue',sans-serif; font-size:24px; margin-bottom:14px; }
.modal-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:22px; }
.modal-box.on-dark{ background:var(--ink-soft); color:var(--paper); }
.modal-box.on-dark h3{ color:var(--paper); }

/* ---------- toast notifications ---------- */
.toast-stack{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:300;
  display:flex; flex-direction:column; gap:10px; align-items:center;
}
.toast{
  background:var(--paper); color:var(--ink); padding:12px 20px; border-radius:100px;
  font-size:13.5px; font-weight:600; box-shadow:0 16px 40px rgba(0,0,0,0.35);
  display:flex; align-items:center; gap:8px; opacity:0; transform:translateY(10px);
  animation:toastIn .25s ease forwards;
}
.toast.success::before{ content:"✓"; color:#0E5C52; font-weight:800; }
.toast.error::before{ content:"✕"; color:#E23E82; font-weight:800; }
.toast.info::before{ content:"●"; color:var(--mango); font-size:9px; }
@keyframes toastIn{ to{ opacity:1; transform:translateY(0); } }

/* ---------- empty states ---------- */
.empty-state{
  text-align:center; padding:70px 24px; border:1.5px dashed var(--line); border-radius:16px;
}
.empty-state .icon{ font-size:34px; margin-bottom:14px; }
.empty-state h3{ font-family:'Bebas Neue',sans-serif; font-size:26px; margin-bottom:8px; }
.empty-state p{ color:rgba(251,246,232,0.6); font-size:14.5px; max-width:380px; margin:0 auto 22px; }

/* ---------- template preview modal grid usage ---------- */
.tpl-preview-large{ height:280px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; }

/* ============================================================
   TEMPLATES PAGE
   ============================================================ */
.tpl-desc{ font-size:12.5px; color:rgba(251,246,232,0.55); margin-top:4px; line-height:1.4; }
.tpl-actions-row{ display:flex; gap:8px; margin-top:12px; }
.tpl-actions-row .tpl-pick{ margin-top:0; flex:1; }
.tpl-preview-btn{
  flex:1; padding:9px; border-radius:8px; border:1px solid var(--line); background:transparent;
  color:var(--paper); font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.03em;
}

/* ============================================================
   CREATE-MENU WIZARD
   ============================================================ */
.wizard-panel{ max-width:640px; }
.upload-state{ display:none; }
.upload-state.active{ display:block; }
.retry-box{ text-align:center; padding:30px; }
.retry-box .icon{ font-size:30px; margin-bottom:10px; }

/* ============================================================
   EDITOR (editor.html)
   ============================================================ */
.editor-topbar{
  position:sticky; top:65px; z-index:40; background:rgba(23,24,26,0.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line); padding:14px 0;
}
.editor-topbar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.editor-topbar-left{ display:flex; align-items:center; gap:12px; }
.editor-topbar-left b{ font-family:'Bebas Neue',sans-serif; font-size:20px; }
.editor-topbar-right{ display:flex; align-items:center; gap:10px; }
.save-status{ font-size:12px; color:rgba(251,246,232,0.5); font-family:'Space Mono',monospace; display:flex; align-items:center; gap:6px; }
.save-status .dot-saved{ color:#5FD8C4; }
.save-status .dot-unsaved{ color:var(--mango); }

.editor-layout{ display:grid; grid-template-columns:400px 1fr; gap:36px; padding:40px 0 90px; align-items:start; }
@media (max-width:980px){ .editor-layout{ grid-template-columns:1fr; } }

.editor-sidebar{ position:sticky; top:150px; }
@media (max-width:980px){ .editor-sidebar{ position:static; } }
.editor-tabs{ display:flex; gap:6px; background:var(--ink-soft); border:1px solid var(--line); border-radius:100px; padding:4px; margin-bottom:22px; }
.editor-tab{
  flex:1; text-align:center; padding:9px; border-radius:100px; font-size:12.5px; font-weight:700;
  background:transparent; border:none; color:rgba(251,246,232,0.55); letter-spacing:0.02em;
}
.editor-tab.active{ background:var(--mango); color:var(--ink); }
.editor-pane{ display:none; }
.editor-pane.active{ display:block; }

.editor-cat{ border:1px solid var(--line); border-radius:12px; margin-bottom:14px; overflow:hidden; }
.editor-cat-head{ display:flex; align-items:center; gap:8px; padding:12px 14px; background:rgba(251,246,232,0.03); }
.editor-cat-head .drag{ opacity:0.35; cursor:grab; font-size:14px; }
.editor-cat-head input{
  flex:1; background:none; border:none; font-family:'Bebas Neue',sans-serif; font-size:16px; color:var(--paper);
  letter-spacing:0.3px; text-transform:uppercase;
}
.editor-cat-head input:focus{ outline:none; }
.editor-cat-head button{ background:none; border:none; color:rgba(251,246,232,0.35); font-size:13px; }
.editor-cat-head button:hover{ color:#FF6B6B; }
.editor-cat-body{ padding:10px 14px 14px; }
.editor-item-row{ display:flex; align-items:flex-start; gap:8px; padding:9px 0; border-bottom:1px dashed var(--line); }
.editor-item-row:last-of-type{ border-bottom:none; }
.editor-item-row .drag{ opacity:0.3; font-size:13px; padding-top:9px; cursor:grab; }
.editor-item-fields{ flex:1; display:flex; flex-direction:column; gap:6px; }
.editor-item-fields .top-row{ display:flex; gap:6px; }
.editor-item-fields input[type="text"]{
  background:rgba(251,246,232,0.04); border:1px solid var(--line); border-radius:6px;
  padding:8px 9px; font-size:13px; color:var(--paper);
}
.editor-item-fields .item-name-input{ flex:1; font-weight:600; }
.editor-item-fields .item-price-input{ width:76px; font-family:'Space Mono',monospace; }
.editor-item-fields .item-desc-input{ font-size:12px; opacity:0.8; }
.editor-item-row .item-actions{ display:flex; flex-direction:column; gap:6px; align-items:center; padding-top:6px; }
.editor-item-row .toggle-mini{ width:30px; height:18px; border-radius:100px; background:rgba(251,246,232,0.15); border:none; position:relative; }
.editor-item-row .toggle-mini.on{ background:var(--mango); }
.editor-item-row .toggle-mini::after{ content:""; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:var(--paper); transition:transform .15s; }
.editor-item-row .toggle-mini.on::after{ transform:translateX(12px); }
.editor-item-row .del-mini{ background:none; border:none; color:rgba(251,246,232,0.3); font-size:12px; }
.editor-item-row .del-mini:hover{ color:#FF6B6B; }
.add-item-btn{
  width:100%; margin-top:8px; padding:9px; border-radius:8px; border:1px dashed var(--line);
  background:none; color:rgba(251,246,232,0.6); font-size:12.5px; font-weight:600;
}
.add-cat-btn{
  width:100%; padding:12px; border-radius:12px; border:1.5px dashed rgba(255,122,41,0.4);
  background:none; color:var(--mango); font-size:13px; font-weight:700;
}
.editor-preview-frame{
  background:var(--ink-soft); border:1px solid var(--line); border-radius:20px; padding:40px 20px;
  display:flex; justify-content:center;
}
.editor-preview-frame .menu-card{ width:100%; }

.template-switch-row{ display:flex; align-items:center; gap:14px; padding:14px; border:1px solid var(--line); border-radius:12px; margin-bottom:18px; }
.template-switch-row .swatch{ width:52px; height:52px; border-radius:8px; flex-shrink:0; }
.template-switch-row .info{ flex:1; }
.template-switch-row .info b{ display:block; font-size:14px; }
.template-switch-row .info span{ font-size:12px; color:rgba(251,246,232,0.5); }

/* ============================================================
   PUBLISH.HTML — three-option comparison
   ============================================================ */
.publish-options{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start; }
@media (max-width:980px){ .publish-options{ grid-template-columns:1fr; } }
.publish-card{
  background:var(--ink-soft); border:1px solid var(--line); border-radius:16px; padding:26px 24px;
  display:flex; flex-direction:column; height:100%;
}
.publish-card.featured{ border-color:var(--mango); box-shadow:0 20px 50px rgba(255,122,41,0.12); }
.publish-card .kicker{ font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.1em; color:var(--mango); margin-bottom:10px; }
.publish-card h3{ font-family:'Bebas Neue',sans-serif; font-size:26px; margin-bottom:6px; }
.publish-card .price{ font-family:'Bebas Neue',sans-serif; font-size:34px; margin:6px 0 4px; }
.publish-card .price span{ font-family:'Inter',sans-serif; font-size:13px; font-weight:600; color:rgba(251,246,232,0.5); }
.publish-card p.desc{ font-size:13px; color:rgba(251,246,232,0.62); line-height:1.55; margin-bottom:16px; }
.publish-card ul{ list-style:none; padding:0; margin:0 0 20px; display:flex; flex-direction:column; gap:9px; flex:1; }
.publish-card li{ font-size:13px; display:flex; gap:8px; align-items:flex-start; color:rgba(251,246,232,0.8); }
.publish-card li::before{ content:"✓"; color:var(--mango); font-weight:800; flex-shrink:0; }
.publish-card li.no::before{ content:"—"; color:rgba(251,246,232,0.3); }
.publish-card li.no{ color:rgba(251,246,232,0.35); }

/* ============================================================
   PRICING.HTML
   ============================================================ */
.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:980px){ .pricing-grid{ grid-template-columns:1fr; } }
.price-card{
  background:var(--ink-soft); border:1px solid var(--line); border-radius:18px; padding:30px 26px;
  display:flex; flex-direction:column;
}
.price-card.highlight{ border:2px solid var(--mango); position:relative; }
.price-card.highlight .ribbon{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--mango); color:var(--ink); font-family:'Space Mono',monospace; font-size:10.5px;
  font-weight:700; letter-spacing:0.08em; padding:5px 14px; border-radius:100px; text-transform:uppercase;
}
.price-card h3{ font-family:'Bebas Neue',sans-serif; font-size:24px; }
.price-card .amount{ font-family:'Bebas Neue',sans-serif; font-size:46px; margin:14px 0 2px; }
.price-card .amount span{ font-family:'Inter',sans-serif; font-size:14px; font-weight:600; color:rgba(251,246,232,0.5); }
.price-card p.desc{ font-size:13px; color:rgba(251,246,232,0.6); margin-bottom:20px; line-height:1.5; }
.price-card ul{ list-style:none; padding:0; margin:0 0 24px; flex:1; display:flex; flex-direction:column; gap:10px; }
.price-card li{ font-size:13px; display:flex; gap:8px; color:rgba(251,246,232,0.8); }
.price-card li::before{ content:"✓"; color:var(--mango); font-weight:800; }

.compare-table{ width:100%; border-collapse:collapse; margin-top:20px; font-size:13.5px; }
.compare-table th, .compare-table td{ padding:13px 14px; text-align:center; border-bottom:1px solid var(--line); }
.compare-table td:first-child, .compare-table th:first-child{ text-align:left; color:rgba(251,246,232,0.8); }
.compare-table th{ font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:rgba(251,246,232,0.55); }
.compare-table td.yes{ color:#5FD8C4; font-weight:700; }
.compare-table td.no{ color:rgba(251,246,232,0.25); }
.compare-table td.tbd{ color:var(--mango); font-family:'Space Mono',monospace; font-size:11.5px; }
.compare-scroll{ overflow-x:auto; }

.faq-item{ border-bottom:1px solid var(--line); padding:18px 0; }
.faq-q{ display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-weight:700; font-size:15px; }
.faq-q .plus{ font-size:18px; color:var(--mango); transition:transform .2s; }
.faq-item.open .faq-q .plus{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.faq-item.open .faq-a{ max-height:200px; }
.faq-a p{ font-size:13.5px; color:rgba(251,246,232,0.62); padding-top:12px; line-height:1.6; }

/* ============================================================
   CHECKOUT.HTML
   ============================================================ */
.checkout-layout{ display:grid; grid-template-columns:1fr 380px; gap:40px; align-items:start; }
@media (max-width:900px){ .checkout-layout{ grid-template-columns:1fr; } }
.checkout-summary{
  background:var(--paper); color:var(--ink); border-radius:12px; padding:26px 24px; position:relative;
}
.checkout-summary::before, .checkout-summary::after{
  content:""; position:absolute; left:0; right:0; height:14px;
  background:radial-gradient(circle at 8px 7px, var(--ink) 7px, transparent 7.5px) repeat-x;
  background-size:16px 14px;
}
.checkout-summary::before{ top:-7px; }
.checkout-summary::after{ bottom:-7px; transform:rotate(180deg); }
.checkout-row{ display:flex; justify-content:space-between; font-family:'Space Mono',monospace; font-size:13px; padding:6px 0; }
.checkout-row.total{ font-size:17px; font-weight:800; border-top:1.5px dashed rgba(23,24,26,0.3); margin-top:10px; padding-top:14px; }
.checkout-row.discount{ color:#0E5C52; }
.checkout-state{ display:none; text-align:center; padding:40px 20px; }
.checkout-state.active{ display:block; }
.checkout-state .icon{ font-size:44px; margin-bottom:14px; }
.spinner{
  width:36px; height:36px; border-radius:50%; border:3px solid rgba(255,122,41,0.25);
  border-top-color:var(--mango); margin:0 auto 16px; animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ============================================================
   DASHBOARD.HTML
   ============================================================ */
.dash-summary{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:40px; }
@media (max-width:700px){ .dash-summary{ grid-template-columns:1fr; } }
.summary-card{ background:var(--ink-soft); border:1px solid var(--line); border-radius:14px; padding:20px 22px; }
.summary-card b{ font-family:'Bebas Neue',sans-serif; font-size:34px; display:block; }
.summary-card span{ font-size:12.5px; color:rgba(251,246,232,0.55); }

.menu-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:980px){ .menu-cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .menu-cards{ grid-template-columns:1fr; } }
.mcard{ background:var(--ink-soft); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.mcard-preview{ height:120px; display:flex; align-items:center; justify-content:center; position:relative; }
.mcard-preview .mini-title{ font-family:'Bebas Neue',sans-serif; font-size:18px; }
.mcard-body{ padding:16px 18px 18px; position:relative; }
.mcard-body b.name{ display:block; font-size:15.5px; margin-bottom:4px; }
.mcard-body .tpl-name{ font-size:12px; color:rgba(251,246,232,0.5); margin-bottom:10px; display:block; }
.mcard-url{ font-family:'Space Mono',monospace; font-size:11px; color:rgba(251,246,232,0.45); margin-bottom:6px; display:block; word-break:break-all; }
.mcard-edited{ font-size:11px; color:rgba(251,246,232,0.4); margin-bottom:14px; display:block; }
.mcard-actions{ display:flex; gap:8px; }
.mcard-actions .btn-sm{ flex:1; text-align:center; background:transparent; border:1px solid var(--line); color:var(--paper); }
.mcard-more{ position:absolute; top:16px; right:16px; }
.mcard-more-btn{ background:none; border:none; color:rgba(251,246,232,0.5); font-size:16px; padding:4px 8px; }
.mcard-more-menu{
  position:absolute; top:26px; right:0; background:var(--paper); color:var(--ink); border-radius:10px;
  box-shadow:0 20px 50px rgba(0,0,0,0.4); padding:6px; width:170px; display:none; flex-direction:column; z-index:20;
}
.mcard-more-menu.open{ display:flex; }
.mcard-more-menu button{ background:none; border:none; text-align:left; padding:9px 10px; border-radius:6px; font-size:12.5px; font-weight:600; }
.mcard-more-menu button:hover{ background:rgba(23,24,26,0.06); }
.mcard-more-menu button.danger{ color:#C6392E; }
.qr-mini{ width:56px; height:56px; background:#fff; border-radius:6px; padding:4px; }

/* ============================================================
   MENU-DETAIL.HTML
   ============================================================ */
.detail-layout{ display:grid; grid-template-columns:1fr 340px; gap:40px; align-items:start; }
@media (max-width:900px){ .detail-layout{ grid-template-columns:1fr; } }
.action-list{ display:flex; flex-direction:column; gap:8px; }
.action-list button, .action-list a{
  display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-radius:10px;
  border:1px solid var(--line); background:rgba(251,246,232,0.02); color:var(--paper); font-size:13.5px; font-weight:600;
  text-decoration:none;
}
.action-list button:hover, .action-list a:hover{ border-color:rgba(251,246,232,0.35); }
.action-list button.danger{ color:#FF6B6B; border-color:rgba(255,107,107,0.3); }
.stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:22px 0; }
.stat-box{ background:rgba(251,246,232,0.03); border:1px solid var(--line); border-radius:12px; padding:16px; text-align:center; }
.stat-box b{ font-family:'Bebas Neue',sans-serif; font-size:26px; display:block; }
.stat-box span{ font-size:11px; color:rgba(251,246,232,0.5); }
.activity-row{ display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.activity-row .dot{ width:8px; height:8px; border-radius:50%; background:var(--mango); margin-top:5px; flex-shrink:0; }
.activity-row .t{ color:rgba(251,246,232,0.45); font-size:11.5px; }

/* ============================================================
   PUBLIC-MENU.HTML — mobile-first, no app chrome
   ============================================================ */
.public-shell{ min-height:100vh; background:var(--ink); }
.public-brand-footer{
  text-align:center; padding:34px 20px 24px; font-family:'Space Mono',monospace; font-size:11px;
  color:rgba(251,246,232,0.4); letter-spacing:0.05em;
}
.public-brand-footer a{ color:var(--mango); text-decoration:none; font-weight:700; }

/* ---------------- pm-* : the real public menu page (tabs + scroll) ---------------- */
/* A template only sets colors/fonts here — this structure itself is
   shared by every template, not redrawn per design. */
.pm-root{ min-height:100vh; max-width:640px; margin:0 auto; }

/* On wide screens, a narrow column floating in a sea of black looks
   unfinished — give it a deliberate "phone preview" frame instead:
   rounded corners, shadow, breathing room. The page still scrolls
   normally (no internal scroll box) — same behavior as mobile, just
   framed. Mobile itself stays edge-to-edge, untouched. */
@media (min-width: 680px){
  .public-shell{ padding:40px 20px; }
  .pm-root{ min-height:auto; border-radius:18px; box-shadow:0 30px 80px rgba(0,0,0,0.5); }
  .pm-tabs{ border-radius:18px 18px 0 0; }
}
.pm-header{ padding:28px 20px 18px; text-align:center; }
.pm-restname{ font-size:clamp(24px,5vw,34px); font-weight:800; margin:0; line-height:1.15; }
.pm-restsub{ font-size:13px; opacity:0.65; margin:6px 0 0; letter-spacing:0.03em; }

.pm-tabs{
  position:sticky; top:0; z-index:20; display:flex; gap:8px; overflow-x:auto;
  padding:12px 16px; background:inherit; border-bottom:1px solid rgba(127,127,127,0.18);
  scrollbar-width:none;
}
.pm-tabs::-webkit-scrollbar{ display:none; }
.pm-tab{
  flex-shrink:0; padding:8px 16px; border-radius:100px; border:1.5px solid rgba(127,127,127,0.3);
  background:none; font-size:13px; font-weight:700; font-family:inherit; color:inherit;
  opacity:0.6; cursor:pointer; transition:opacity .15s;
}
.pm-tab.active{ opacity:1; }

.pm-sections{ padding:8px 20px 80px; }
.pm-section{ padding-top:22px; scroll-margin-top:64px; }
.pm-section-title{
  font-size:clamp(17px,2.6vw,21px); font-weight:800; text-transform:uppercase;
  letter-spacing:0.04em; margin:0 0 12px;
}
.pm-item{
  display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
  padding:14px 0; border-bottom:1px dashed rgba(127,127,127,0.22);
}
.pm-item-main{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.pm-item-name{ font-size:15.5px; font-weight:700; }
.pm-item-desc{ font-size:12.5px; opacity:0.65; line-height:1.4; }
.pm-item-chips{ margin-top:2px; }
.pm-item-price{ font-family:'Space Mono',monospace; font-size:14px; font-weight:700; white-space:nowrap; flex-shrink:0; }
.pm-soldout{
  display:inline-block; font-size:9.5px; font-weight:700; padding:2px 7px; border-radius:100px;
  border:1px solid #FF6B6B; color:#FF6B6B; margin-left:6px; text-decoration:none; vertical-align:middle;
}
.item-badge-popular{
  display:inline-block; font-size:9.5px; font-weight:800; letter-spacing:0.05em; text-transform:uppercase;
  padding:2px 7px; border-radius:100px; margin-left:6px; vertical-align:middle;
}

/* ============================================================
   REFERRALS.HTML — full dashboard
   ============================================================ */
.ref-summary{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin:36px 0; }
@media (max-width:980px){ .ref-summary{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .ref-summary{ grid-template-columns:1fr; } }
.ref-stat{ background:var(--ink-soft); border:1px solid var(--line); border-radius:14px; padding:18px; }
.ref-stat b{ font-family:'Bebas Neue',sans-serif; font-size:28px; display:block; }
.ref-stat span{ font-size:11.5px; color:rgba(251,246,232,0.5); }
.ref-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.ref-table th, .ref-table td{ padding:13px 12px; text-align:left; border-bottom:1px solid var(--line); }
.ref-table th{ font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:rgba(251,246,232,0.5); }
.status-chip{ font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:100px; text-transform:uppercase; letter-spacing:0.04em; }
.status-registrado{ background:rgba(251,246,232,0.1); color:rgba(251,246,232,0.7); }
.status-pendiente{ background:rgba(255,122,41,0.15); color:var(--mango); }
.status-pagado{ background:rgba(14,92,82,0.35); color:#5FD8C4; }
.table-scroll{ overflow-x:auto; }

/* ============================================================
   ACCOUNT.HTML
   ============================================================ */
.account-nav{ display:flex; flex-direction:column; gap:4px; position:sticky; top:150px; }
.account-nav a{
  padding:11px 14px; border-radius:8px; font-size:13.5px; font-weight:600; text-decoration:none;
  color:rgba(251,246,232,0.6);
}
.account-nav a.active, .account-nav a:hover{ background:rgba(251,246,232,0.06); color:var(--paper); }
.account-layout{ display:grid; grid-template-columns:200px 1fr; gap:36px; align-items:start; }
@media (max-width:820px){ .account-layout{ grid-template-columns:1fr; } .account-nav{ position:static; flex-direction:row; flex-wrap:wrap; } }
.account-section{ margin-bottom:52px; }
.account-section h2{ font-family:'Bebas Neue',sans-serif; font-size:26px; margin-bottom:4px; }
.account-section .desc{ font-size:13px; color:rgba(251,246,232,0.55); margin-bottom:20px; }
.invoice-row{ display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.invoice-row span.date{ color:rgba(251,246,232,0.5); }
.card-mock{ display:flex; align-items:center; gap:12px; padding:14px; border:1px solid var(--line); border-radius:12px; }
.card-mock .card-icon{ width:40px; height:28px; border-radius:4px; background:linear-gradient(135deg,var(--mango),var(--pink)); }
.danger-box{ border:1px solid rgba(255,107,107,0.3); border-radius:12px; padding:20px; }
.danger-box p{ font-size:13px; color:rgba(251,246,232,0.6); margin-bottom:14px; }

@media (prefers-reduced-motion: reduce){
  .spinner{ animation:none !important; }
}

/* ---------------- availability schedules ---------------- */
/* The [hidden] attribute LOSES to the display:flex/block these
   elements already have, so it has to be forced. */
.pm-section[hidden], .pm-item[hidden], .pm-tab[hidden], .pm-empty[hidden]{ display:none !important; }
.pm-empty{ text-align:center; padding:48px 0; opacity:.6; font-size:14px; }

/* editor: the little clock buttons on sections and dishes */
.sched-btn{
  display:inline-flex; align-items:center; gap:5px; background:none;
  border:1px solid rgba(251,246,232,0.18); color:rgba(251,246,232,0.55);
  font-size:11px; font-weight:600; padding:4px 10px; border-radius:100px;
  cursor:pointer; font-family:inherit; white-space:nowrap;
}
.sched-btn:hover{ color:var(--paper); border-color:rgba(251,246,232,0.4); }
.sched-btn.on{ color:var(--mango); border-color:var(--mango); background:rgba(240,130,60,0.08); }
/* The section header already styles EVERY button inside it (no border,
   dim text, red on hover — that's the trash can's look) with higher
   specificity than .sched-btn, so the clock has to be restated here. */
.editor-cat-head .sched-btn{
  border:1px solid rgba(251,246,232,0.18); color:rgba(251,246,232,0.55); font-size:11px;
}
.editor-cat-head .sched-btn:hover{ color:var(--paper); border-color:rgba(251,246,232,0.4); }
.editor-cat-head .sched-btn.on{ color:var(--mango); border-color:var(--mango); }
.editor-cat-head .sched-btn.on:hover{ color:var(--mango); }

/* the schedule dialog (sits on the light .modal-box) */
.sched-modal .sched-mode{ display:flex; flex-direction:column; gap:8px; margin:6px 0 14px; }
.sched-modal .sched-mode label{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; cursor:pointer; }
.sched-presets{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.sched-preset{
  border:1px solid rgba(23,24,26,0.2); background:#fff; color:var(--ink); border-radius:100px;
  padding:5px 12px; font-size:12px; font-weight:600; cursor:pointer; font-family:inherit;
}
.sched-preset:hover{ border-color:var(--ink); }
.sched-window{ border:1px solid rgba(23,24,26,0.12); border-radius:10px; padding:12px; margin-bottom:10px; background:rgba(23,24,26,0.03); }
.sched-days{ display:flex; gap:5px; margin-bottom:10px; }
.sched-day{
  flex:1; border:1px solid rgba(23,24,26,0.2); background:#fff; color:var(--ink); border-radius:8px;
  padding:7px 0; font-size:12px; font-weight:700; cursor:pointer; font-family:inherit;
}
.sched-day.on{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.sched-times{ display:flex; align-items:center; gap:8px; }
.sched-times input[type=time]{
  flex:1; border:1px solid rgba(23,24,26,0.2); background:#fff; color:var(--ink); border-radius:8px;
  padding:8px 10px; font-family:'Inter',sans-serif; font-size:14px;
}
.sched-times .sched-remove{ background:none; border:none; color:rgba(23,24,26,0.4); font-size:15px; cursor:pointer; }
.sched-times .sched-remove:hover{ color:#d33; }
.sched-add{
  background:none; border:1px dashed rgba(23,24,26,0.3); color:var(--ink); border-radius:8px;
  width:100%; padding:9px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit;
}
.sched-note{ font-size:12px; color:rgba(23,24,26,0.55); margin-top:10px; line-height:1.4; }
.sched-error{ color:#d33; font-size:12.5px; margin-top:8px; }

/* ---------------- WhatsApp: contact button + ordering (public menu) ---------------- */
.pm-wa-btn{
  display:inline-flex; align-items:center; gap:6px; margin-top:14px; padding:9px 16px;
  border:1.5px solid currentColor; border-radius:100px; font-size:13px; font-weight:700;
  text-decoration:none;
}
.pm-wa-btn:hover{ opacity:.8; }

/* + button / quantity stepper next to each dish's price */
.pm-item-side{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex-shrink:0; }
.pm-order:empty{ display:none; }
.pm-add{
  width:32px; height:32px; border-radius:50%; border:1.5px solid currentColor; background:none;
  font-size:19px; line-height:1; font-weight:700; cursor:pointer; font-family:inherit; padding:0;
}
.pm-stepper{
  display:inline-flex; align-items:center; gap:2px; border:1.5px solid currentColor;
  border-radius:100px; padding:2px;
}
.pm-stepper button{
  width:28px; height:28px; border:none; background:none; border-radius:50%; font-size:17px;
  font-weight:700; line-height:1; cursor:pointer; color:inherit; font-family:inherit; padding:0;
}
.pm-stepper span{ min-width:22px; text-align:center; font-size:14px; font-weight:800; }

/* floating "Ver pedido" bar — sticks to the bottom of the viewport while the menu is on screen */
.pm-cartbar{
  position:sticky; bottom:14px; z-index:30; display:flex; align-items:center; gap:12px;
  width:calc(100% - 32px); margin:0 16px 14px; padding:14px 16px; border:none; border-radius:14px;
  font-family:inherit; font-size:15px; font-weight:800; cursor:pointer;
  box-shadow:0 10px 30px rgba(0,0,0,0.35);
}
.pm-cartbar[hidden]{ display:none; }
.pm-cartbar-count{
  min-width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,0.28);
  display:inline-flex; align-items:center; justify-content:center; font-size:13px;
}
.pm-cartbar-label{ flex:1; text-align:left; }
.pm-cartbar-total{ font-family:'Space Mono',monospace; }

/* the order sheet (bottom sheet on phones, centered card on desktop) */
.pm-sheet-overlay{
  position:fixed; inset:0; z-index:100; background:rgba(0,0,0,0.55);
  display:flex; align-items:flex-end; justify-content:center;
}
.pm-sheet-overlay[hidden]{ display:none; }
.pm-sheet{
  width:100%; max-width:640px; max-height:88vh; overflow-y:auto;
  border-radius:18px 18px 0 0; padding:20px 20px 24px;
}
@media (min-width: 680px){
  .pm-sheet-overlay{ align-items:center; padding:20px; }
  .pm-sheet{ border-radius:18px; max-height:80vh; }
}
.pm-sheet-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.pm-sheet-title{ font-size:20px; font-weight:800; }
.pm-sheet-close{ background:none; border:none; font-size:20px; color:inherit; opacity:.6; cursor:pointer; padding:4px 8px; }
.pm-line{
  display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center;
  padding:11px 0; border-bottom:1px dashed rgba(127,127,127,0.28);
}
.pm-line-name{ font-weight:700; font-size:14.5px; min-width:0; overflow-wrap:anywhere; }
.pm-line-total{ font-family:'Space Mono',monospace; font-size:13px; font-weight:700; min-width:68px; text-align:right; }
.pm-sheet-notice{ font-size:12.5px; opacity:.8; margin:12px 0 0; line-height:1.4; }
.pm-sheet-note{
  width:100%; margin-top:14px; border:1px solid rgba(127,127,127,0.4); border-radius:10px;
  padding:10px 12px; background:transparent; color:inherit; font-family:inherit; font-size:14px;
  resize:vertical; min-height:62px; box-sizing:border-box;
}
.pm-sheet-total{ display:flex; justify-content:space-between; align-items:center; font-size:17px; font-weight:800; margin:16px 0 12px; }
.pm-send{
  display:block; text-align:center; text-decoration:none; padding:14px; border-radius:12px;
  font-weight:800; font-size:15px; background:#25D366; color:#073b1b; cursor:pointer;
}
.pm-send:not([href]){ opacity:.4; pointer-events:none; }
.pm-clear{
  display:block; margin:14px auto 0; background:none; border:none; color:inherit; opacity:.55;
  font-size:13px; text-decoration:underline; cursor:pointer; font-family:inherit;
}
.pm-sheet-fine{ font-size:12px; opacity:.6; text-align:center; margin:12px 0 0; line-height:1.4; }

/* ---------------- QR by table / zone ---------------- */
/* public page: "you are at Terraza · Mesa 5" */
.pm-table-badge{
  display:inline-block; margin:12px 6px 0; padding:5px 14px; border:1.5px solid currentColor;
  border-radius:100px; font-size:13px; font-weight:700;
}

/* menu-detail: the zone manager */
.qrz-form{ display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; margin-bottom:16px; }
.qrz-form label{ display:block; font-size:11.5px; color:rgba(251,246,232,0.55); margin-bottom:4px; }
.qrz-input{
  background:rgba(251,246,232,0.05); border:1px solid var(--line); color:var(--paper);
  border-radius:8px; padding:10px 12px; font-family:'Inter',sans-serif; font-size:14px;
}
.qrz-input:focus{ outline:none; border-color:var(--mango); }
.qrz-input.name{ width:210px; max-width:100%; }
.qrz-input.num{ width:84px; }
.qrz-zone{ border:1px solid var(--line); border-radius:12px; padding:14px; margin-top:12px; }
.qrz-zone-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.qrz-zone-head b{ font-size:15px; flex:1; min-width:120px; overflow-wrap:anywhere; }
.qrz-count{ font-size:12px; color:rgba(251,246,232,0.5); }
.qrz-chips{ display:flex; flex-wrap:wrap; gap:6px; margin:12px 0; }
.qrz-chip{
  display:inline-flex; align-items:center; gap:4px; padding:5px 6px 5px 11px;
  border:1px solid var(--line); border-radius:100px; font-size:12.5px;
}
.qrz-chip button{ background:none; border:none; color:rgba(251,246,232,0.4); cursor:pointer; font-size:12px; padding:0 4px; }
.qrz-chip button:hover{ color:#FF6B6B; }
.qrz-add{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.qrz-upsell{
  border:1px dashed var(--mango); border-radius:10px; padding:12px 14px;
  font-size:13.5px; margin-bottom:12px;
}
.qrz-upsell a{ color:var(--mango); font-weight:700; }

/* editor › Configuración › Pedidos por WhatsApp */
.orders-help{ font-size:12.5px; line-height:1.5; color:rgba(251,246,232,0.5); margin:10px 0 0; }
.orders-help:empty{ display:none; }
.orders-help a{ color:var(--mango); font-weight:700; }
.switch:disabled{ cursor:not-allowed; }

.orders-number{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.orders-number[hidden]{ display:none; }
.orders-number label{ display:block; font-size:13px; font-weight:600; margin-bottom:8px; }
.orders-number-row{ display:flex; gap:8px; }
.orders-number-row input{
  flex:1; min-width:0; background:rgba(251,246,232,0.05); border:1px solid var(--line);
  color:var(--paper); border-radius:8px; padding:10px 12px; font-family:'Inter',sans-serif; font-size:14px;
}
.orders-number-row input:focus{ outline:none; border-color:var(--mango); }
.orders-number-hint{ font-size:12px; color:rgba(251,246,232,0.5); margin:8px 0 0; line-height:1.5; }
.orders-number-error{ font-size:12.5px; color:#FF8A8A; margin:8px 0 0; line-height:1.5; }
.orders-number-error[hidden]{ display:none; }

/* ---------------- language switcher on the public menu ---------------- */
.pm-langs{ display:flex; justify-content:center; gap:6px; margin-top:12px; flex-wrap:wrap; }
.pm-lang{
  min-width:38px; padding:5px 10px; border-radius:100px; border:1.5px solid rgba(127,127,127,0.35);
  background:none; color:inherit; font:700 12px/1 inherit; font-family:inherit; letter-spacing:.04em;
  cursor:pointer; opacity:.65;
}
.pm-lang.active{ opacity:1; }
.pm-lang:hover{ opacity:1; }

/* editor › Configuración › Idiomas */
.lang-settings{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.lang-settings[hidden]{ display:none; }
.lang-settings > b{ display:block; font-size:14px; margin-bottom:10px; }
.lang-settings label{ display:block; font-size:13px; font-weight:600; margin:10px 0 6px; }
.lang-settings select{
  width:100%; background:rgba(251,246,232,0.05); border:1px solid var(--line); color:var(--paper);
  border-radius:8px; padding:10px 12px; font-family:'Inter',sans-serif; font-size:14px;
}
.lang-checks{ display:flex; flex-wrap:wrap; gap:8px; }
.lang-settings .lang-check{
  display:inline-flex; align-items:center; gap:6px; margin:0; padding:7px 12px; font-weight:500;
  border:1px solid var(--line); border-radius:100px; cursor:pointer;
}
.lang-check.locked{ opacity:.45; cursor:not-allowed; }

/* >>> menuqr: dialogs-tabs-descriptions (do not edit this block by hand; re-run fix_styles.py to refresh) >>> */

/* Editor tab bar: five tabs fit the 400px sidebar on a desktop; on a narrower screen the row scrolls
   sideways instead of pushing the last tab outside its rounded container. */
.editor-tabs{
  gap:4px; overflow-x:auto; overflow-y:hidden; max-width:100%; box-sizing:border-box;
  scrollbar-width:none; -ms-overflow-style:none; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
}
.editor-tabs::-webkit-scrollbar{ display:none; }
.editor-tab{
  flex:1 0 auto; padding:9px 10px; font-size:12px; white-space:nowrap; scroll-snap-align:center;
  font-family:inherit; cursor:pointer;
}
@media (max-width:980px){
  .editor-tab{ padding:11px 14px; font-size:13px; min-height:40px; }
}

/* A dish's description wraps instead of pushing the price off the screen. */
.pm-item-desc, .m-desc, .retro-desc, .floral-desc{ overflow-wrap:anywhere; word-break:break-word; }
.pm-item-desc{ display:block; }

/* In-page dialogs (MenuQR.dialog): they replace the browser's own prompt() / confirm() boxes. */
html.mq-dialog-open body{ overflow:hidden; }
.mq-dialog-overlay{ z-index:400; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.mq-dialog{
  max-width:420px; max-height:calc(100vh - 40px); max-height:calc(100dvh - 40px); overflow-y:auto;
  padding:26px 24px 22px; text-align:left;
}
.mq-dialog .mq-dialog-title{ font-family:'Bebas Neue',sans-serif; font-size:26px; line-height:1.1; margin:0 0 10px; padding-right:8px; }
.mq-dialog .mq-dialog-message{ font-size:14.5px; line-height:1.5; margin:0 0 6px; color:rgba(23,24,26,0.78); overflow-wrap:anywhere; }
.mq-dialog .mq-dialog-form{ margin:0; }
.mq-dialog .mq-field{ display:block; margin:12px 0 0; }
.mq-dialog .mq-field-label{ display:block; font-size:12.5px; font-weight:700; margin-bottom:6px; color:rgba(23,24,26,0.72); }
.mq-dialog .mq-input{
  display:block; width:100%; box-sizing:border-box; min-height:46px; padding:11px 13px; font-size:16px; /* 16px: iOS doesn't zoom in */
  font-family:'Inter',sans-serif; color:var(--ink); background:#fff;
  border:1.5px solid rgba(23,24,26,0.22); border-radius:10px; outline:none;
}
.mq-dialog .mq-input:focus{ border-color:var(--ink); box-shadow:0 0 0 3px rgba(226,62,130,0.22); }
.mq-dialog .mq-input.mq-invalid{ border-color:#d33; }
.mq-dialog .mq-dialog-error{ margin:10px 0 0; font-size:13px; font-weight:600; color:#c0392b; }
.mq-dialog .mq-dialog-error[hidden]{ display:none; }
.mq-dialog .mq-dialog-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:20px; }
.mq-dialog .mq-btn{
  min-height:46px; padding:0 20px; border-radius:100px; font-family:inherit; font-size:15px; font-weight:700;
  cursor:pointer; border:1.5px solid transparent; line-height:1; white-space:nowrap;
}
.mq-dialog .mq-btn-ok{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.mq-dialog .mq-btn-ok.btn-danger{ background:#d33; border-color:#d33; color:#fff; }
.mq-dialog .mq-btn:not(.mq-btn-ok){ background:transparent; color:var(--ink); border-color:rgba(23,24,26,0.28); }
.mq-dialog .mq-btn:focus-visible{ outline:3px solid rgba(226,62,130,0.5); outline-offset:2px; }
@media (max-width:560px){
  /* Phone: the box sits near the TOP of the screen (the on-screen keyboard rises from the bottom and would
     cover a box placed in the middle), buttons are full width and easy to hit, "confirm" comes first. */
  .mq-dialog-overlay.modal-overlay{ align-items:flex-start; padding:max(14px, env(safe-area-inset-top)) 14px 14px; }
  .mq-dialog{ margin-top:6vh; max-width:none; padding:22px 18px 18px; }
  .mq-dialog .mq-dialog-actions{ flex-direction:column-reverse; gap:8px; }
  .mq-dialog .mq-btn{ width:100%; min-height:50px; }
}

/* <<< menuqr: dialogs-tabs-descriptions <<< */

/* >>> menuqr: qr-style >>> */
/* "Personalizar mi QR" panel (menu detail). */
#qrStylePanel .qs-row{ display:flex; gap:12px; margin-bottom:12px; }
#qrStylePanel .qs-color{ flex:1; display:flex; flex-direction:column; gap:6px; font-size:12.5px; font-weight:700; color:rgba(23,24,26,0.72); }
#qrStylePanel .qs-color input[type=color]{
  width:100%; height:46px; padding:3px; border:1.5px solid rgba(23,24,26,0.22); border-radius:10px; background:#fff; cursor:pointer;
}
#qrStylePanel .qs-check{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; margin:4px 0 10px; min-height:44px; cursor:pointer; }
#qrStylePanel .qs-check input{ width:20px; height:20px; accent-color:var(--ink); }
#qrStylePanel .qs-text{ display:block; font-size:12.5px; font-weight:700; color:rgba(23,24,26,0.72); }
#qrStylePanel .qs-text input{
  display:block; width:100%; box-sizing:border-box; margin-top:6px; min-height:46px; padding:11px 13px; font-size:16px;
  font-family:'Inter',sans-serif; color:var(--ink); background:#fff; border:1.5px solid rgba(23,24,26,0.22); border-radius:10px;
}
#qrStylePanel .qs-problem{ margin:10px 0 0; font-size:13px; font-weight:600; color:#c0392b; }
#qrStylePanel .qs-problem[hidden], #qrStylePanel .qs-locked[hidden]{ display:none; }
#qrStylePanel .qs-locked{ margin:0 0 12px; padding:10px 12px; border-radius:10px; background:rgba(226,62,130,0.1); font-size:13px; font-weight:600; }
#qrStylePanel .qs-locked a{ color:var(--ink); }
#qrStylePanel .qs-actions{ display:flex; gap:10px; margin-top:16px; }
#qrStylePanel .qs-actions .dl-btn{ flex:1; min-height:46px; margin:0; }
#qrStylePanel .qs-actions .dl-btn:disabled, #qrStylePanel input:disabled{ opacity:0.45; cursor:not-allowed; }
@media (max-width:420px){
  #qrStylePanel .qs-row{ flex-direction:column; }
  #qrStylePanel .qs-actions{ flex-direction:column; }
}
/* <<< menuqr: qr-style <<< */

/* >>> menuqr: editor-tour >>> */
/* The editor's top bar wraps instead of pushing "Publicar" off a narrow screen. */
.editor-topbar-right{ flex-wrap:wrap; row-gap:8px; }
@media (max-width:560px){
  .editor-topbar-right{ width:100%; }
  .editor-topbar-right .save-status{ flex-basis:100%; }
}

/* First-visit guide (static/js/editor-tour.js). */
html.tour-open body{ overflow-x:hidden; }
.tour-shade{ position:fixed; inset:0; z-index:450; background:transparent; }
.tour-ring{
  position:fixed; z-index:451; pointer-events:none; border-radius:14px; border:2px solid var(--mango);
  box-shadow:0 0 0 9999px rgba(10,11,12,0.62); transition:top .2s ease, left .2s ease, width .2s ease, height .2s ease;
}
.tour-card{
  position:fixed; z-index:452; width:330px; max-width:calc(100vw - 24px); box-sizing:border-box;
  background:var(--paper); color:var(--ink); border-radius:16px; padding:18px 18px 14px; box-shadow:0 30px 70px rgba(0,0,0,0.5);
}
.tour-card.tour-floating{ top:50%; left:50%; transform:translate(-50%,-50%); }
.tour-count{ font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:rgba(23,24,26,0.5); }
.tour-title{ font-family:'Bebas Neue',sans-serif; font-size:26px; line-height:1.1; margin:4px 0 6px; }
.tour-text{ font-size:14.5px; line-height:1.5; margin:0 0 14px; color:rgba(23,24,26,0.8); }
.tour-actions{ display:flex; align-items:center; gap:8px; }
.tour-skip{ margin-right:auto; background:none; border:none; padding:10px 4px; font-family:inherit; font-size:13px; font-weight:600; color:rgba(23,24,26,0.55); cursor:pointer; text-decoration:underline; }
.tour-btn{
  min-height:42px; padding:0 18px; border-radius:100px; font-family:inherit; font-size:14px; font-weight:700; cursor:pointer;
  border:1.5px solid rgba(23,24,26,0.28); background:transparent; color:var(--ink);
}
.tour-btn[hidden]{ display:none; }
.tour-next{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.tour-btn:focus-visible, .tour-skip:focus-visible{ outline:3px solid rgba(226,62,130,0.5); outline-offset:2px; }
@media (max-width:560px){
  /* Phone: the card is a sheet at the bottom with big buttons; the highlighted tab sits in the upper part of the screen. */
  .tour-card{ left:12px; right:12px; bottom:max(12px, env(safe-area-inset-bottom)); top:auto !important; width:auto; max-width:none; transform:none; }
  .tour-card.tour-floating{ top:auto; left:12px; transform:none; }
  .tour-btn{ min-height:48px; padding:0 22px; }
  .tour-skip{ min-height:44px; }
}
@media (prefers-reduced-motion: reduce){ .tour-ring{ transition:none; } }
/* <<< menuqr: editor-tour <<< */

/* >>> menuqr: editor-mobile >>> */
/* On a phone the editor's single column used to be as wide as its widest content (the tab row), so the whole
   page was wider than the screen and everything was cut off on the right. minmax(0,1fr) lets it shrink. */
@media (max-width:980px){
  /* .editor-layout also had padding:40px 0 90px, which wiped out the page's side margin: give it back. */
  .editor-layout{ grid-template-columns:minmax(0,1fr); gap:24px; padding:24px 16px 90px; }
  .account-layout{ grid-template-columns:minmax(0,1fr); }
}
.account-layout > *{ min-width:0; }
.editor-layout > *{ min-width:0; }
.editor-sidebar, .editor-pane, .editor-pane .panel{ max-width:100%; box-sizing:border-box; }
/* <<< menuqr: editor-mobile <<< */

/* >>> menuqr: editor-collapse >>> */
/* Minimise a dish (one line: name, price) or a whole category, so a menu with 30 dishes stays manageable. */
.editor-collapse-all{ display:flex; gap:8px; justify-content:flex-end; margin:0 0 12px; flex-wrap:wrap; }
.editor-collapse-all button{
  font:inherit; font-size:12.5px; font-weight:700; padding:8px 14px; min-height:36px; border-radius:100px; cursor:pointer;
  background:transparent; color:rgba(251,246,232,0.7); border:1px solid var(--line);
}
.editor-collapse-all button:hover{ color:var(--paper); border-color:rgba(251,246,232,0.35); }

.collapse-btn{
  background:none; border:none; color:rgba(251,246,232,0.55); cursor:pointer; font-size:15px; line-height:1;
  width:32px; height:32px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; flex:none;
}
.collapse-btn:hover{ color:var(--paper); background:rgba(251,246,232,0.08); }
.editor-cat-head .collapse-btn{ margin-right:-2px; }
.editor-cat-head .cat-count{ display:none; font-family:'Space Mono',monospace; font-size:11.5px; color:rgba(251,246,232,0.5); }
.editor-cat.is-collapsed .cat-count{ display:inline; }
.editor-cat.is-collapsed .editor-cat-body{ display:none; }
.editor-cat.is-collapsed .collapse-btn{ transform:rotate(-90deg); }

/* The one-line version of a dish: hidden while it is open, the only thing shown while it is minimised. */
.editor-item-row .item-summary{
  display:none; align-items:center; gap:10px; width:100%; box-sizing:border-box; min-height:44px; padding:8px 10px; text-align:left;
  font:inherit; color:var(--paper); background:rgba(251,246,232,0.04); border:1px solid var(--line); border-radius:10px; cursor:pointer;
}
.editor-item-row .item-summary:hover{ background:rgba(251,246,232,0.08); }
.editor-item-row.is-collapsed .item-summary{ display:flex; }
/* !important: the dish's inner blocks carry an inline display:flex that would otherwise win */
.editor-item-row.is-collapsed > :not(.item-summary){ display:none !important; }
.item-summary .chev{ color:rgba(251,246,232,0.55); flex:none; }
.item-summary .sum-name{ flex:1; min-width:0; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.item-summary .sum-price{ font-family:'Space Mono',monospace; font-size:13px; color:rgba(251,246,232,0.75); flex:none; }
.item-summary .sum-flag{ font-size:11px; font-weight:700; padding:2px 8px; border-radius:100px; background:rgba(226,62,130,0.25); color:var(--mango); flex:none; }
/* On a phone the category's header (arrow, handle, name, Horario, count, bin) must shrink instead of clipping. */
.editor-cat-head{ min-width:0; }
.editor-cat-head input{ min-width:0; }
.editor-cat-head .sched-btn{ flex:none; }
@media (max-width:560px){
  .editor-cat-head{ gap:4px; padding:10px 8px; }
  .editor-cat-head .sched-btn{ padding-left:8px; padding-right:8px; }
}
/* <<< menuqr: editor-collapse <<< */

/* >>> menuqr: floral-public >>> */
/* The Floral template on the public page: garlands top and bottom, a vine down each side, a fine frame. */
.pm-floral{ position:relative; font-family:'Cormorant Garamond', Georgia, serif; }
.pm-floral > header, .pm-floral > main, .pm-floral > .pm-promos{ position:relative; z-index:1; }
.pm-floral-decor{ position:absolute; z-index:0; pointer-events:none; }
.pm-floral .pmf-top{ top:0; left:0; width:100%; height:auto; aspect-ratio:768/200; }
.pm-floral .pmf-bottom{ bottom:0; left:0; width:100%; height:auto; aspect-ratio:768/184; }
.pm-floral .pmf-frame{ inset:10px 8px; border:1.5px solid; opacity:.5; }
.pm-floral::before, .pm-floral::after{
  content:""; position:absolute; z-index:0; pointer-events:none; top:150px; bottom:150px; width:34px;
  background:var(--pmf-vine, none) repeat-y 0 0 / 34px 300px; opacity:.9;
}
.pm-floral::before{ left:6px; }
.pm-floral::after{ right:6px; transform:scaleX(-1); }

.pm-floral .pm-header{ padding-top:calc(min(100vw, 640px) * .27); }
.pm-floral .pm-restname{ font-weight:400; font-size:clamp(44px, 11vw, 64px); line-height:1.05; }
.pm-floral .pm-restsub{ font-size:15px; letter-spacing:.14em; opacity:.8; }
.pm-floral .pm-sections{ padding:8px 44px calc(min(100vw, 640px) * .27 + 36px); }
.pm-floral .pm-section-title{ text-align:center; font-weight:500; letter-spacing:.14em; font-size:clamp(19px, 3.4vw, 24px); }
.pm-floral .pm-section-title::after{ content:""; display:block; width:48px; height:1px; margin:10px auto 0; background:currentColor; opacity:.4; }
.pm-floral .pm-item{ border-bottom:1px dotted rgba(127,127,127,.4); }
.pm-floral .pm-item-name{ font-style:italic; font-weight:500; font-size:19px; }
.pm-floral .pm-item-desc{ font-family:Arial, Helvetica, sans-serif; font-style:italic; font-size:12.5px; opacity:.75; }
.pm-floral .pm-item-price{ font-family:inherit; font-style:italic; font-weight:600; font-size:18px; }
.pm-floral .pm-tab{ font-family:inherit; font-size:15px; }
@media (max-width:420px){
  .pm-floral .pm-sections{ padding-left:40px; padding-right:40px; }
}
/* <<< menuqr: floral-public <<< */

/* >>> menuqr: legal >>> */
/* Terms and Privacy pages, and the Terms · Privacy links in every footer. */
.legal{ max-width:760px; padding-top:28px; padding-bottom:40px; }
.legal h1{ margin:6px 0 4px; }
.legal-updated{ font-size:13px; opacity:.6; margin:0 0 26px; }
.legal h2{ font-family:'Inter',sans-serif; font-size:18px; font-weight:700; margin:30px 0 8px; }
.legal p, .legal li{ font-size:15.5px; line-height:1.7; }
.legal p{ margin:0 0 12px; }
.legal ul{ margin:0 0 12px; padding-left:22px; }
.legal li{ margin-bottom:6px; }
.legal a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }
.foot-legal{ display:inline-flex; gap:16px; flex-wrap:wrap; }
.foot-legal a{ color:inherit; opacity:.7; text-decoration:none; }
.foot-legal a:hover{ opacity:1; text-decoration:underline; }
.auth-note a{ color:inherit; text-decoration:underline; }
@media (max-width:600px){
  .legal{ padding-top:16px; }
  .legal p, .legal li{ font-size:15px; }
  .legal h2{ font-size:17px; margin-top:24px; }
}
/* <<< menuqr: legal <<< */