/* ==========================================================================
   Pizza This — v3 design system (full rebuild)

   Direction: a warm, editorial restaurant brand on the public side, and a
   calm, dense "app" on the staff side. One accent (tomato), tinted warm
   neutrals, no neon, no gradients-as-decoration. Display type is Bricolage
   Grotesque in sentence case (no more all-caps shouting), body is Geist,
   numbers/tickets are Geist Mono.

   Motion follows the emil-design-eng rules: ease-out for anything entering,
   120-260ms for UI, transform/opacity only, nothing bouncy, everything
   off under prefers-reduced-motion.
   ========================================================================== */

:root{
  /* surfaces */
  --bg:#F6F1E9;
  --surface:#FFFDF9;
  --surface-2:#F0E9DE;
  --surface-3:#E8DFD1;
  --line:#E4DACB;
  --line-2:#D5C8B5;

  /* text */
  --ink:#1C1713;
  --ink-2:#4A4038;
  --muted:#857A6D;

  /* the one accent */
  --accent:#E2432A;
  --accent-hover:#C93720;
  --accent-soft:#FCE6DF;
  --accent-ink:#A42C18;

  /* semantic (used sparingly, small doses only) */
  --amber:#C98418;
  --amber-soft:#FBF0DB;
  --live:#3F9C6D;

  /* dark surfaces: sidebar, footer, feature bands */
  --char:#1A1512;
  --char-2:#251E19;
  --char-3:#30271F;
  --char-line:rgba(255,246,234,.09);
  --on-char:#F5EEE3;
  --on-char-2:rgba(245,238,227,.66);
  --on-char-3:rgba(245,238,227,.42);

  /* type */
  --f-display:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;
  --f-body:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'Geist Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;

  /* shape */
  --r-xs:7px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;

  /* depth — warm-tinted, never pure black */
  --sh-1:0 1px 2px rgba(48,30,14,.06),0 1px 1px rgba(48,30,14,.04);
  --sh-2:0 1px 2px rgba(48,30,14,.05),0 10px 28px -10px rgba(48,30,14,.20);
  --sh-3:0 2px 4px rgba(48,30,14,.06),0 30px 70px -24px rgba(48,30,14,.38);

  /* motion */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --t-press:120ms; --t-fast:160ms; --t-ui:220ms; --t-slow:320ms;

  --gutter:clamp(16px,4vw,40px);
  --maxw:1200px;
}

/* ---------------------------------------------------------------- reset -- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;min-height:100dvh}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
::selection{background:var(--accent);color:#fff}

h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;letter-spacing:-.025em;line-height:1.05;color:inherit;font-optical-sizing:auto}
.mono{font-family:var(--f-mono);font-feature-settings:"tnum" 1}
.num{font-family:var(--f-mono);font-feature-settings:"tnum" 1;font-weight:500}
.muted{color:var(--muted)}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.ico{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ico-sm{width:15px;height:15px}
.ico-lg{width:22px;height:22px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.kicker{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.kicker::before{content:"";width:18px;height:1.5px;background:currentColor;opacity:.6}

/* ------------------------------------------------------------- buttons -- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 18px;border-radius:var(--r-pill);font-weight:600;font-size:14px;line-height:1;white-space:nowrap;border:1px solid transparent;background:var(--surface);color:var(--ink);box-shadow:var(--sh-1);transition:background-color var(--t-fast) ease,border-color var(--t-fast) ease,color var(--t-fast) ease,transform var(--t-press) var(--ease-out),box-shadow var(--t-fast) ease;-webkit-tap-highlight-color:transparent}
.btn:hover{border-color:var(--line-2)}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 6px 16px -6px rgba(226,67,42,.55)}
.btn-primary:hover{background:var(--accent-hover);border-color:transparent}
.btn-dark{background:var(--ink);color:var(--surface);box-shadow:none}
.btn-dark:hover{background:#000;border-color:transparent}
.btn-ghost{background:transparent;box-shadow:none;border-color:var(--line-2)}
.btn-ghost:hover{background:var(--surface);border-color:var(--ink-2)}
.btn-quiet{background:transparent;box-shadow:none;color:var(--ink-2)}
.btn-quiet:hover{background:var(--surface-2);border-color:transparent}
.btn-danger{background:transparent;box-shadow:none;border-color:rgba(226,67,42,.35);color:var(--accent-ink)}
.btn-danger:hover{background:var(--accent-soft);border-color:var(--accent)}
.btn-sm{height:34px;padding:0 13px;font-size:13px}
.btn-xs{height:28px;padding:0 10px;font-size:12px;gap:5px}
.btn-lg{height:52px;padding:0 26px;font-size:15.5px}
.btn-block{width:100%}
.btn-icon{width:36px;padding:0}
.btn-discord{background:#5865F2;color:#fff;box-shadow:none}
.btn-discord:hover{background:#4752C4;border-color:transparent}
.btn-discord svg{width:17px;height:17px}
.btn .arrow{transition:transform var(--t-ui) var(--ease-out)}
.btn:hover .arrow{transform:translateX(3px)}
.link{color:var(--accent-ink);font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:rgba(164,44,24,.3);transition:text-decoration-color var(--t-fast) ease}
.link:hover{text-decoration-color:currentColor}
.done{background:var(--ink)!important;color:#fff!important}

/* --------------------------------------------------------------- forms -- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field>label,.label{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.field .hint,.hint{font-size:12px;color:var(--muted);line-height:1.5}
.input,.field input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.field select,.field textarea{width:100%;height:44px;padding:0 14px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font-size:14.5px;transition:border-color var(--t-fast) ease,box-shadow var(--t-fast) ease}
.field textarea,textarea.input{height:auto;min-height:104px;padding:12px 14px;line-height:1.5;resize:vertical}
.input:hover,.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--ink-2)}
.input:focus,.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(226,67,42,.16)}
.field select,select.input{appearance:none;-webkit-appearance:none;padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23857A6D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center}
.input-sm{height:34px!important;font-size:13px!important;padding:0 10px!important;border-radius:var(--r-xs)!important}
select.input-sm{padding-right:30px!important;background-position:right 9px center!important}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.row-2{grid-template-columns:1fr}}
.check{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;cursor:pointer;user-select:none}
.check input{appearance:none;-webkit-appearance:none;width:20px;height:20px;border:1.5px solid var(--line-2);border-radius:6px;background:var(--surface);display:grid;place-items:center;flex-shrink:0;transition:background-color var(--t-fast) ease,border-color var(--t-fast) ease}
.check input::after{content:"";width:10px;height:6px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px) scale(0);transition:transform var(--t-fast) var(--ease-out)}
.check input:checked{background:var(--accent);border-color:var(--accent)}
.check input:checked::after{transform:rotate(-45deg) translate(1px,-1px) scale(1)}

/* switch (used for "available" toggles) */
.switch{position:relative;display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.switch input{appearance:none;-webkit-appearance:none;width:38px;height:22px;border-radius:var(--r-pill);background:var(--surface-3);position:relative;transition:background-color var(--t-ui) ease;flex-shrink:0}
.switch input::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:var(--sh-1);transition:transform var(--t-ui) var(--ease-out)}
.switch input:checked{background:var(--ink)}
.switch input:checked::after{transform:translateX(16px)}

/* ------------------------------------------------- badges / chips / dots -- */
.badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--r-pill);font-size:12px;font-weight:600;white-space:nowrap;background:var(--surface-2);color:var(--ink-2)}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85}
.b-paid,.b-approved,.b-hired{background:var(--surface-2);color:var(--ink)}
.b-unpaid,.b-rejected{background:var(--accent-soft);color:var(--accent-ink)}
.b-pending,.b-open{background:var(--amber-soft);color:#8A5A0C}
.b-passed{background:var(--surface-2);color:var(--muted)}
.b-plain::before{display:none}

.rank{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--r-pill);font-size:12px;font-weight:600;background:var(--surface-2);color:var(--ink-2);white-space:nowrap}
.rank.is-top{background:var(--ink);color:var(--surface)}
.rank.is-mgmt{background:var(--accent-soft);color:var(--accent-ink)}
.rank i{font-style:normal;font-size:12px}

.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--line-2);flex-shrink:0}
.dot.on{background:var(--live);box-shadow:0 0 0 3px rgba(63,156,109,.16)}
.avatar{position:relative;width:38px;height:38px;border-radius:50%;background:var(--ink);color:var(--surface);display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:15px;flex-shrink:0}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.avatar .dot{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border:2px solid var(--surface);box-shadow:none}
.avatar-sm{width:30px;height:30px;font-size:12px}
.avatar-lg{width:56px;height:56px;font-size:20px}
.avatar.tone-1{background:#E2432A}.avatar.tone-2{background:#3A2E26}.avatar.tone-3{background:#B9822C}.avatar.tone-4{background:#6B5B4E}

/* --------------------------------------------------------------- flash -- */
.flash{list-style:none;display:flex;flex-direction:column;gap:8px}
.flash li{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--r-md);font-size:14px;font-weight:500;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-2);animation:flash-in var(--t-slow) var(--ease-out) both}
.flash li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink-2);flex-shrink:0}
.flash li.success::before{background:var(--live)}
.flash li.error{border-color:rgba(226,67,42,.35)}
.flash li.error::before{background:var(--accent)}
.flash-site{padding-top:16px}
.flash-app{position:fixed;top:16px;right:16px;z-index:200;width:min(380px,calc(100vw - 32px))}
@keyframes flash-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* =================================================================== PUBLIC */

/* header */
.site-head{position:sticky;top:0;z-index:50;background:rgba(246,241,233,.86);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color var(--t-ui) ease,background-color var(--t-ui) ease}
.site-head.scrolled{border-bottom-color:var(--line);background:rgba(246,241,233,.94)}
.site-head-in{display:flex;align-items:center;gap:28px;height:68px}
.logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:800;font-size:20px;letter-spacing:-.035em;color:var(--ink)}
.logo-mark{width:30px;height:30px;border-radius:9px;background:var(--accent);display:grid;place-items:center;color:#fff;transform:rotate(-8deg);transition:transform var(--t-slow) var(--ease-out)}
.logo:hover .logo-mark{transform:rotate(0deg)}
.logo-mark svg{width:18px;height:18px}
.site-nav{display:flex;gap:4px}
.site-nav a{position:relative;padding:8px 12px;border-radius:var(--r-pill);font-size:14px;font-weight:500;color:var(--ink-2);transition:color var(--t-fast) ease,background-color var(--t-fast) ease}
.site-nav a:hover{color:var(--ink);background:var(--surface-2)}
.site-nav a.is-active{color:var(--ink);background:var(--surface)}
.site-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.site-burger{display:none}
@media(max-width:900px){
  .site-nav,.site-actions .hide-m{display:none}
  .site-burger{display:inline-flex}
}
.site-sheet{position:fixed;inset:68px 0 auto 0;z-index:49;background:var(--bg);border-bottom:1px solid var(--line);padding:12px var(--gutter) 22px;display:flex;flex-direction:column;gap:2px;transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity var(--t-ui) var(--ease-out),transform var(--t-ui) var(--ease-out);box-shadow:var(--sh-2)}
.site-sheet.open{opacity:1;transform:none;pointer-events:auto}
.site-sheet a:not(.btn){padding:13px 4px;font-family:var(--f-display);font-weight:600;font-size:22px;letter-spacing:-.02em;border-bottom:1px solid var(--line)}
.site-sheet .btn{margin-top:14px}

/* footer */
.site-foot{background:var(--char);color:var(--on-char);margin-top:96px}
.site-foot-in{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-block:64px 40px}
.site-foot .logo{color:var(--on-char)}
.site-foot p{color:var(--on-char-2);font-size:14px;margin-top:14px;max-width:34ch}
.site-foot h4{font-family:var(--f-mono);font-weight:500;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-char-3);margin-bottom:14px}
.site-foot li{list-style:none;margin-bottom:9px;font-size:14px;color:var(--on-char-2)}
.site-foot li a{transition:color var(--t-fast) ease}
.site-foot li a:hover{color:var(--on-char)}
.site-foot-base{border-top:1px solid var(--char-line);padding-block:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--on-char-3)}
@media(max-width:860px){.site-foot-in{grid-template-columns:1fr 1fr}.site-foot-in>:first-child{grid-column:1/-1}}

/* section scaffolding */
.sect{padding-block:clamp(56px,9vw,112px)}
.sect-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,44px)}
.sect-head h2{font-size:clamp(2rem,4.4vw,3.2rem);max-width:16ch;margin-top:12px}
.sect-head p{max-width:42ch;color:var(--ink-2);font-size:16px}

/* ---- home: hero ---- */
.hero{padding-top:clamp(28px,5vw,64px);padding-bottom:clamp(40px,6vw,72px)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center}
.status-chip{display:inline-flex;align-items:center;gap:10px;height:34px;padding:0 14px 0 12px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line);font-size:13px;font-weight:500;color:var(--ink-2);box-shadow:var(--sh-1)}
.status-chip b{color:var(--ink);font-weight:600}
.pulse{position:relative;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--accent);animation:pulse 2.2s var(--ease-out) infinite}
@keyframes pulse{from{transform:scale(1);opacity:.55}to{transform:scale(3);opacity:0}}
.hero h1{font-size:clamp(2.9rem,7.2vw,5.6rem);letter-spacing:-.045em;line-height:.95;margin-top:22px;font-weight:800}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero-lede{margin-top:22px;font-size:clamp(16px,1.6vw,18.5px);color:var(--ink-2);max-width:44ch;line-height:1.55}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:32px}
.hero-meta{display:flex;gap:28px;flex-wrap:wrap;margin-top:40px;padding-top:24px;border-top:1px solid var(--line)}
.hero-meta div{display:flex;flex-direction:column;gap:2px}
.hero-meta b{font-family:var(--f-display);font-size:22px;font-weight:700;letter-spacing:-.02em}
.hero-meta span{font-size:12.5px;color:var(--muted)}

.hero-art{position:relative;padding:0 0 48px 0}
.hero-photo{position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/4.4;background:var(--char);box-shadow:var(--sh-3)}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:62% 50%;transform:scale(1.04);transition:transform 1.2s var(--ease-out)}
.hero-art:hover .hero-photo img{transform:scale(1.07)}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(26,21,18,.55))}
.hero-photo-cap{position:absolute;left:22px;bottom:20px;z-index:1;color:#fff;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.mini-ticket{position:absolute;left:-28px;bottom:0;z-index:2;width:250px;background:#FFFEFB;border-radius:14px 14px 4px 4px;padding:16px 16px 22px;font-family:var(--f-mono);font-size:12px;box-shadow:var(--sh-3);transform:rotate(-3deg);animation:float-y 6s ease-in-out infinite}
.mini-ticket::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:10px;background:radial-gradient(circle at 6px -2px,transparent 6px,#FFFEFB 6.5px) 0 0/12px 10px repeat-x}
.mini-ticket h5{font-family:var(--f-display);font-size:15px;letter-spacing:-.02em;margin-bottom:2px}
.mini-ticket .mt-meta{color:var(--muted);font-size:11px;padding-bottom:10px;border-bottom:1px dashed var(--line-2);margin-bottom:10px}
.mini-ticket .mt-line{display:flex;justify-content:space-between;gap:10px;padding:3px 0;color:var(--ink-2)}
.mini-ticket .mt-total{display:flex;justify-content:space-between;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line-2);font-weight:600;color:var(--ink);font-size:13px}
.hero-sticker{position:absolute;right:-14px;top:28px;z-index:2;width:118px;height:118px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;text-align:center;font-family:var(--f-display);font-weight:700;line-height:1.05;font-size:14px;letter-spacing:-.01em;box-shadow:var(--sh-2);transform:rotate(10deg)}
.hero-sticker b{display:block;font-size:30px;letter-spacing:-.04em}
@keyframes float-y{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(-3deg) translateY(-8px)}}
@media(max-width:940px){
  .hero-grid{grid-template-columns:1fr}
  .hero-art{max-width:520px;margin-inline:auto;width:100%;padding-left:24px}
  .hero-photo{aspect-ratio:4/3.4}
  .mini-ticket{left:0;width:220px}
  .hero-sticker{right:0;width:96px;height:96px;font-size:12px}
  .hero-sticker b{font-size:24px}
}

/* ---- home: steps ---- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--ink)}
.step{position:relative;padding:28px 28px 8px 0}
.step+.step{padding-left:28px;border-left:1px solid var(--line)}
.step-n{font-family:var(--f-mono);font-size:12.5px;color:var(--accent-ink);font-weight:500}
.step h3{font-size:clamp(1.35rem,2.2vw,1.7rem);margin-top:28px;max-width:14ch}
.step p{margin-top:12px;color:var(--ink-2);max-width:32ch}
@media(max-width:820px){.steps{grid-template-columns:1fr}.step,.step+.step{padding:24px 0;border-left:0;border-bottom:1px solid var(--line)}}

/* ---- home: menu preview (restaurant-menu list, not cards) ---- */
.menu-board{display:grid;grid-template-columns:1fr 1fr;gap:6px 64px}
.mb-item{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:20px 0;border-bottom:1px solid var(--line)}
.mb-item h3{font-size:20px;font-weight:650;letter-spacing:-.02em;display:flex;align-items:baseline;gap:12px;min-width:0}
.mb-item h3::after{content:"";flex:1;border-bottom:1.5px dotted var(--line-2);transform:translateY(-4px);min-width:20px}
.mb-item .mb-price{font-family:var(--f-mono);font-size:16px;font-weight:500;align-self:baseline}
.mb-item p{grid-column:1/-1;color:var(--muted);font-size:14px}
@media(max-width:760px){.menu-board{grid-template-columns:1fr}}

/* ---- home: dark facts band ---- */
.band{background:var(--char);color:var(--on-char);border-radius:var(--r-xl);padding:clamp(28px,5vw,56px);display:grid;grid-template-columns:1.1fr 2fr;gap:clamp(24px,5vw,64px);align-items:center;overflow:hidden;position:relative}
.band h2{font-size:clamp(1.9rem,3.6vw,2.8rem);max-width:12ch}
.band p{color:var(--on-char-2);margin-top:14px;max-width:34ch}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--char-line);border-radius:var(--r-lg);overflow:hidden}
.fact{background:var(--char-2);padding:22px 22px 20px;transition:background-color var(--t-ui) ease}
.fact:hover{background:var(--char-3)}
.fact .ico{color:var(--accent);width:22px;height:22px}
.fact b{display:block;font-family:var(--f-display);font-size:24px;letter-spacing:-.025em;margin-top:18px}
.fact span{font-size:13px;color:var(--on-char-2)}
@media(max-width:860px){.band{grid-template-columns:1fr}}
@media(max-width:460px){.facts{grid-template-columns:1fr}}

/* ---- home: careers split ---- */
.split-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tile{position:relative;border-radius:var(--r-xl);padding:clamp(26px,4vw,40px);min-height:300px;display:flex;flex-direction:column;justify-content:space-between;gap:32px;overflow:hidden;transition:transform var(--t-slow) var(--ease-out),box-shadow var(--t-slow) var(--ease-out)}
.tile:hover{transform:translateY(-4px);box-shadow:var(--sh-3)}
.tile h3{font-size:clamp(1.8rem,3.4vw,2.6rem);max-width:12ch}
.tile p{margin-top:12px;max-width:34ch}
.tile-accent{background:var(--accent);color:#fff}
.tile-accent p{color:rgba(255,255,255,.85)}
.tile-paper{background:var(--surface);border:1px solid var(--line)}
.tile-paper p{color:var(--ink-2)}
.tile .tile-go{display:inline-flex;align-items:center;gap:10px;font-weight:600}
.tile .tile-go .arrow{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.18);transition:transform var(--t-ui) var(--ease-out)}
.tile-paper .tile-go .arrow{background:var(--ink);color:#fff}
.tile:hover .tile-go .arrow{transform:translateX(4px)}
@media(max-width:760px){.split-2{grid-template-columns:1fr}}

/* ---- menu / ordering page ---- */
.order-page{padding-top:28px}
.order-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:20px}
.order-head h1{font-size:clamp(2.2rem,5vw,3.6rem);letter-spacing:-.04em}
.order-head p{color:var(--ink-2);margin-top:8px;max-width:46ch}
.order-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;align-items:start}
@media(max-width:1000px){.order-layout{grid-template-columns:minmax(0,1fr)}}
.order-layout>*{min-width:0}

.toolbar{position:sticky;top:68px;z-index:20;display:flex;gap:10px;align-items:center;padding:12px 0;background:var(--bg);margin-bottom:6px}
.app .toolbar{top:64px}
.search{position:relative;flex:0 1 260px;min-width:160px}
.search .ico{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted);width:16px;height:16px}
.search input{width:100%;height:40px;padding:0 14px 0 38px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:var(--surface);font-size:14px;transition:border-color var(--t-fast) ease,box-shadow var(--t-fast) ease}
.search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(226,67,42,.16)}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1;padding:2px}
.chips::-webkit-scrollbar{display:none}
@media(max-width:640px){.toolbar{flex-wrap:wrap}.search{flex:1 1 100%}.chips{flex:1 1 100%}}
.chip{height:40px;padding:0 16px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:transparent;font-size:13.5px;font-weight:600;color:var(--ink-2);white-space:nowrap;display:inline-flex;align-items:center;gap:8px;transition:background-color var(--t-fast) ease,color var(--t-fast) ease,border-color var(--t-fast) ease,transform var(--t-press) var(--ease-out)}
.chip:hover{border-color:var(--ink-2);color:var(--ink)}
.chip:active{transform:scale(.96)}
.chip.is-active{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.chip small{font-family:var(--f-mono);font-size:11px;opacity:.6;font-weight:500}

.dish-group{margin-bottom:30px;scroll-margin-top:140px}
.dish-group-title{display:flex;align-items:baseline;gap:10px;font-size:22px;margin:10px 0 14px}
.dish-group-title small{font-family:var(--f-mono);font-size:12px;color:var(--muted);font-weight:500;letter-spacing:0}
.dish-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.dish{position:relative;display:grid;grid-template-columns:76px 1fr;grid-template-rows:1fr auto;gap:4px 14px;padding:12px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);transition:border-color var(--t-fast) ease,box-shadow var(--t-ui) ease,transform var(--t-ui) var(--ease-out)}
.dish:hover{border-color:var(--line-2);box-shadow:var(--sh-2)}
.dish.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.dish-img{grid-row:1/3;width:76px;height:76px;border-radius:var(--r-md);overflow:hidden;background:var(--surface-2);display:grid;place-items:center;font-size:30px}
.dish-img img{width:100%;height:100%;object-fit:cover}
.dish-body{min-width:0;padding-top:2px}
.dish-body h4{font-family:var(--f-body);font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.dish-body p{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dish[data-cat="Meal Boxes"] .dish-body p{-webkit-line-clamp:4}
.dish-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dish-price{font-family:var(--f-mono);font-weight:600;font-size:14.5px}
.add-btn{height:32px;padding:0 13px;border-radius:var(--r-pill);background:var(--surface-2);font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:5px;transition:background-color var(--t-fast) ease,color var(--t-fast) ease,transform var(--t-press) var(--ease-out)}
.add-btn:hover{background:var(--ink);color:var(--surface)}
.add-btn:active{transform:scale(.94)}
.qty{display:inline-flex;align-items:center;gap:2px;height:32px;padding:2px;border-radius:var(--r-pill);background:var(--ink);color:var(--surface);animation:pop-in var(--t-ui) var(--ease-out)}
.qty-btn{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:16px;line-height:1;color:inherit;transition:background-color var(--t-fast) ease,transform var(--t-press) var(--ease-out)}
.qty-btn:hover{background:rgba(255,255,255,.14)}
.qty-btn:active{transform:scale(.88)}
.qty-n,.qty-input{min-width:24px;text-align:center;font-family:var(--f-mono);font-weight:600;font-size:13.5px}
.qty-input{width:34px;height:26px;border:0;background:transparent;color:inherit;padding:0;-moz-appearance:textfield}
.qty-input::-webkit-outer-spin-button,.qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty-input:focus{outline:1.5px solid rgba(255,255,255,.4);border-radius:6px}
@keyframes pop-in{from{transform:scale(.85);opacity:.4}to{transform:none;opacity:1}}
.empty-search{padding:48px 0;text-align:center;color:var(--muted)}

/* the ticket — kept as a receipt on purpose: it's the product */
.cart{position:sticky;top:88px}
.app .cart{top:84px}
.ticket{position:relative;background:#FFFEFB;border:1px solid var(--line);border-radius:var(--r-lg) var(--r-lg) 6px 6px;padding:22px 20px 26px;box-shadow:var(--sh-2)}
.ticket::after{content:"";position:absolute;left:-1px;right:-1px;bottom:-10px;height:11px;background:radial-gradient(circle at 7px -3px,transparent 7px,#FFFEFB 7.5px) -1px 0/14px 11px repeat-x;filter:drop-shadow(0 1px 0 var(--line))}
.ticket-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:14px;border-bottom:1px dashed var(--line-2)}
.ticket-head h3{font-size:20px}
.ticket-meta{font-family:var(--f-mono);font-size:11.5px;color:var(--muted);text-align:right;line-height:1.5}
.lines{padding:12px 0;min-height:96px;font-family:var(--f-mono);font-size:13px}
.line{display:flex;justify-content:space-between;gap:12px;padding:5px 0;animation:line-in var(--t-ui) var(--ease-out) both}
.line .l-name{color:var(--ink-2);min-width:0;overflow:hidden;text-overflow:ellipsis}
.line .l-amt{font-weight:600;white-space:nowrap}
@keyframes line-in{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.ticket .empty{padding:22px 0;text-align:center;color:var(--muted);font-family:var(--f-body);font-size:13.5px;line-height:1.6}
.ticket .empty .ico{margin:0 auto 10px;width:28px;height:28px;color:var(--line-2)}
.tot{border-top:1px dashed var(--line-2);padding-top:10px;font-family:var(--f-mono);font-size:13px}
.tot .line{animation:none}
.disc-line .l-amt{color:var(--accent-ink)}
.grand{display:flex;justify-content:space-between;align-items:baseline;margin-top:8px;padding-top:12px;border-top:1.5px solid var(--ink);font-family:var(--f-display);font-weight:700;font-size:24px;letter-spacing:-.03em}
.opts{margin-top:18px;padding-top:16px;border-top:1px dashed var(--line-2)}
.opts .field{margin-bottom:12px}
.ticket .check{margin-bottom:14px}
.ticket-actions{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.ticket .hint{text-align:center;margin-top:4px}
.clear{align-self:center;font-size:12.5px;font-weight:600;color:var(--muted);padding:6px 10px;border-radius:var(--r-pill);transition:color var(--t-fast) ease,background-color var(--t-fast) ease}
.clear:hover{color:var(--accent-ink);background:var(--accent-soft)}
.disc-row{display:flex;gap:6px;flex-wrap:wrap}
.disc-pill{height:32px;padding:0 12px;border-radius:var(--r-pill);border:1px solid var(--line-2);font-family:var(--f-mono);font-size:12.5px;font-weight:600;color:var(--ink-2);transition:background-color var(--t-fast) ease,color var(--t-fast) ease,border-color var(--t-fast) ease,transform var(--t-press) var(--ease-out)}
.disc-pill:hover{border-color:var(--ink)}
.disc-pill:active{transform:scale(.94)}
.disc-pill.active{background:var(--accent);border-color:var(--accent);color:#fff}

/* mobile cart bar + sheet */
.cart-bar{display:none}
.cart-scrim{display:none}
@media(max-width:1000px){
  .cart{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:70;max-height:88dvh;overflow-y:auto;padding:10px 10px calc(18px + env(safe-area-inset-bottom));background:var(--bg);border-radius:24px 24px 0 0;box-shadow:0 -20px 60px -20px rgba(48,30,14,.45);transform:translateY(105%);transition:transform var(--t-slow) var(--ease-out)}
  .cart.open{transform:none}
  .cart::before{content:"";display:block;width:40px;height:4px;border-radius:4px;background:var(--line-2);margin:0 auto 10px}
  .cart-scrim{display:block;position:fixed;inset:0;z-index:65;background:rgba(26,21,18,.4);opacity:0;pointer-events:none;transition:opacity var(--t-slow) ease}
  .cart-scrim.open{opacity:1;pointer-events:auto}
  .cart-bar{display:flex;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:60;height:58px;align-items:center;justify-content:space-between;gap:12px;padding:0 8px 0 20px;border-radius:var(--r-pill);background:var(--ink);color:var(--surface);box-shadow:var(--sh-3);transform:translateY(140%);transition:transform var(--t-slow) var(--ease-out)}
  .cart-bar.show{transform:none}
  .cart-bar b{font-family:var(--f-mono);font-weight:600}
  .cart-bar .btn{height:44px}
  .order-page,.register{padding-bottom:90px}
}
.bump{animation:bump 260ms var(--ease-out)}
@keyframes bump{40%{transform:scale(1.12)}}

/* ---- about ---- */
.about-hero{padding-top:clamp(40px,7vw,96px)}
.about-hero h1{font-size:clamp(2.6rem,7vw,5.4rem);letter-spacing:-.045em;line-height:.98;max-width:14ch;font-weight:800}
.about-hero h1 em{font-style:normal;color:var(--accent)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);margin-top:clamp(32px,6vw,72px);align-items:start}
.about-photo{border-radius:var(--r-xl);overflow:hidden;aspect-ratio:5/4;background:var(--char)}
.about-photo img{width:100%;height:100%;object-fit:cover}
.about-copy p{font-size:clamp(16px,1.6vw,19px);color:var(--ink-2);line-height:1.6}
.about-copy p+p{margin-top:18px}
.about-copy .lead{font-family:var(--f-display);font-size:clamp(22px,2.4vw,28px);line-height:1.25;letter-spacing:-.02em;color:var(--ink)}
.feature-list{margin-top:40px;border-top:1px solid var(--ink)}
.feature-row{display:grid;grid-template-columns:48px 1fr auto;gap:16px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}
.feature-row .ico{width:24px;height:24px;color:var(--accent)}
.feature-row h3{font-size:20px}
.feature-row p{color:var(--muted);font-size:14px;margin-top:4px}
.feature-row .num{font-size:13px;color:var(--muted)}
@media(max-width:820px){.about-grid{grid-template-columns:1fr}}

/* ---- apply ---- */
.apply-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,5vw,72px);align-items:start;padding-top:clamp(36px,6vw,80px)}
.apply-side h1{font-size:clamp(2.6rem,6vw,4.6rem);letter-spacing:-.045em;line-height:.98;font-weight:800}
.apply-side>p{margin-top:18px;color:var(--ink-2);font-size:17px;max-width:38ch}
.perks{margin-top:36px;display:flex;flex-direction:column;gap:2px}
.perk{display:flex;gap:14px;padding:16px 0;border-top:1px solid var(--line)}
.perk-n{width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--surface);display:grid;place-items:center;font-family:var(--f-mono);font-size:12px;flex-shrink:0}
.perk b{display:block;font-size:15px}
.perk span{font-size:14px;color:var(--muted)}
.form-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(22px,3.4vw,36px);box-shadow:var(--sh-2)}
.form-card h2{font-size:24px;margin-bottom:4px}
.form-card>.hint{margin-bottom:22px;font-size:13.5px}
@media(max-width:880px){.apply-grid{grid-template-columns:1fr}}

/* ---- crew ---- */
.crew-head{padding-top:clamp(36px,6vw,80px);display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.crew-head h1{font-size:clamp(2.6rem,6vw,4.6rem);letter-spacing:-.045em;font-weight:800}
.crew-head p{color:var(--ink-2);margin-top:12px;max-width:40ch}
.seg{display:inline-flex;padding:4px;border-radius:var(--r-pill);background:var(--surface-2);gap:2px}
.seg button{height:34px;padding:0 14px;border-radius:var(--r-pill);font-size:13px;font-weight:600;color:var(--ink-2);transition:background-color var(--t-fast) ease,color var(--t-fast) ease}
.seg button.is-active{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1)}
.tier{display:grid;grid-template-columns:220px 1fr;gap:24px;padding:26px 0;border-top:1px solid var(--line)}
.tier:first-of-type{border-top:1px solid var(--ink)}
.tier-label{display:flex;flex-direction:column;gap:6px}
.tier-label h2{font-size:22px;display:flex;align-items:center;gap:10px}
.tier-label span{font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.person{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);transition:border-color var(--t-fast) ease,transform var(--t-ui) var(--ease-out)}
.person:hover{border-color:var(--line-2);transform:translateY(-2px)}
.person b{display:block;font-size:14.5px;font-weight:600;line-height:1.2}
.person small{font-size:12px;color:var(--muted)}
@media(max-width:760px){.tier{grid-template-columns:1fr;gap:14px}}

/* ---- welcome / login result ---- */
.center-card{min-height:calc(100dvh - 68px - 200px);display:grid;place-items:center;padding:48px var(--gutter)}
.center-card .form-card{max-width:460px;width:100%;text-align:left}
.center-card h1{font-size:clamp(1.9rem,4vw,2.5rem);letter-spacing:-.035em}
.center-card p{color:var(--ink-2);margin-top:12px}
.notice-box{margin-top:18px;padding:14px 16px;border-radius:var(--r-md);background:var(--surface-2);font-size:14px;color:var(--ink-2)}

/* =============================================================== APP SHELL */
body.app{background:var(--bg)}
.shell{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100dvh}
.side{position:sticky;top:0;height:100dvh;background:var(--char);color:var(--on-char);display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--char-3) transparent}
.side-top{padding:20px 18px 14px;display:flex;align-items:center;justify-content:space-between}
.side .logo{color:var(--on-char);font-size:18px}
.side .logo-mark{width:28px;height:28px}
.side-close{display:none;color:var(--on-char-2)}
.side-user{margin:4px 12px 10px;padding:10px;border-radius:var(--r-md);background:var(--char-2);display:flex;align-items:center;gap:11px}
.side-user .avatar{background:var(--accent);width:34px;height:34px;font-size:14px}
.side-user b{display:block;font-size:14px;font-weight:600;line-height:1.2}
.side-user small{font-size:12px;color:var(--on-char-3)}
.side-nav{padding:6px 12px 12px;display:flex;flex-direction:column;gap:1px;flex:1}
.side-nav h6{font-family:var(--f-mono);font-weight:500;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-char-3);padding:18px 10px 8px}
.side-link{position:relative;display:flex;align-items:center;gap:11px;height:38px;padding:0 10px;border-radius:var(--r-sm);font-size:14px;font-weight:500;color:var(--on-char-2);transition:background-color var(--t-fast) ease,color var(--t-fast) ease}
.side-link:hover{background:var(--char-2);color:var(--on-char)}
.side-link.is-active{background:var(--char-3);color:var(--on-char)}
.side-link.is-active::before{content:"";position:absolute;left:-12px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
.side-link.is-active .ico{color:var(--accent)}
.side-link .count{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);background:var(--accent);color:#fff;font-family:var(--f-mono);font-size:11px;font-weight:600;display:grid;place-items:center}
.side-foot{padding:12px;border-top:1px solid var(--char-line);display:flex;flex-direction:column;gap:1px}

.app-main{min-width:0;display:flex;flex-direction:column}
.app-top{position:sticky;top:0;z-index:30;height:64px;display:flex;align-items:center;gap:14px;padding:0 max(clamp(16px,3vw,32px),calc((100% - 1600px) / 2 + 32px));background:rgba(246,241,233,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.app-top h1{font-family:var(--f-display);font-size:19px;letter-spacing:-.02em;font-weight:700;display:flex;align-items:center;gap:8px;min-width:0}
.app-top h1 .crumb{color:var(--muted);font-weight:500}
.app-top-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.app-burger{display:none}
.live-clock{font-family:var(--f-mono);font-size:13px;color:var(--muted);padding:0 4px}
.app-body{padding:clamp(18px,3vw,32px);width:100%;max-width:1600px;margin-inline:auto}
.scrim{display:none}
@media(max-width:980px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;bottom:0;width:284px;z-index:90;transform:translateX(-102%);transition:transform var(--t-slow) var(--ease-out);box-shadow:var(--sh-3)}
  .side.open{transform:none}
  .side-close{display:inline-flex}
  .scrim{display:block;position:fixed;inset:0;z-index:85;background:rgba(26,21,18,.45);opacity:0;pointer-events:none;transition:opacity var(--t-slow) ease}
  .scrim.open{opacity:1;pointer-events:auto}
  .app-burger{display:inline-flex}
  .live-clock{display:none}
}

/* views (client-side tabs inside one route) */
.view{display:none}
.view.is-active{display:block;animation:view-in var(--t-slow) var(--ease-out) both}
@keyframes view-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.view-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.view-head h2{font-size:clamp(1.7rem,3vw,2.3rem);letter-spacing:-.035em}
.view-head p{color:var(--ink-2);margin-top:6px;max-width:58ch;font-size:14.5px}
.view-head .actions{display:flex;gap:8px;flex-wrap:wrap}

/* panels */
.box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;box-shadow:var(--sh-1);min-width:0}
.box-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}
.box-head h3{font-size:17px;letter-spacing:-.02em}
.box-head p{font-size:13px;color:var(--muted);margin-top:3px}
.box-head .actions{display:flex;gap:6px;flex-shrink:0}
.box-flush{padding:0;overflow:hidden}
.box-flush .box-head{padding:18px 20px 0}
.box-dark{background:var(--char);color:var(--on-char);border-color:var(--char)}
.box-dark .box-head p{color:var(--on-char-3)}
.box-warn{border-color:rgba(226,67,42,.35);background:linear-gradient(0deg,var(--accent-soft),var(--accent-soft)) padding-box}
.cols{display:grid;gap:16px}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cols-main{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
.stack{display:flex;flex-direction:column;gap:16px;min-width:0}
.mt{margin-top:16px}
@media(max-width:1180px){.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.cols-2,.cols-3,.cols-main{grid-template-columns:1fr}}
@media(max-width:520px){.cols-4{grid-template-columns:1fr 1fr}}
.empty-state{padding:26px 10px;text-align:center;color:var(--muted);font-size:14px}
.empty-state .ico{margin:0 auto 10px;width:26px;height:26px;color:var(--line-2)}

/* stat tiles */
.stat{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 18px 16px;display:flex;flex-direction:column;gap:6px;min-width:0;transition:border-color var(--t-fast) ease,transform var(--t-ui) var(--ease-out),box-shadow var(--t-ui) ease}
a.stat:hover{border-color:var(--line-2);transform:translateY(-2px);box-shadow:var(--sh-2)}
.stat-label{font-size:12.5px;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:7px}
.stat-label .ico{width:15px;height:15px}
.stat-value{font-family:var(--f-display);font-size:clamp(28px,3vw,36px);font-weight:700;letter-spacing:-.04em;line-height:1.05;font-feature-settings:"tnum" 1}
.stat-sub{font-size:12.5px;color:var(--muted)}
.stat.is-alert .stat-value{color:var(--accent)}
.stat .go{position:absolute;right:14px;top:14px;color:var(--line-2);transition:color var(--t-fast) ease,transform var(--t-ui) var(--ease-out)}
a.stat:hover .go{color:var(--ink);transform:translate(2px,-2px)}

/* tables & lists */
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;font-size:11.5px;font-weight:600;color:var(--muted);padding:0 12px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl th:first-child,.tbl td:first-child{padding-left:0}
.tbl th:last-child,.tbl td:last-child{padding-right:0}
.tbl .r{text-align:right}
.tbl tbody tr{transition:background-color var(--t-fast) ease}
.tbl-click tbody tr{cursor:pointer}
.tbl-click tbody tr:hover{background:var(--surface-2)}
.tbl tr.me td{background:var(--accent-soft)}
.who{display:flex;align-items:center;gap:11px;min-width:0}
.who b{display:block;font-weight:600;font-size:14px;line-height:1.25}
.who small{display:block;font-size:12px;color:var(--muted)}
.tbl-wrap{overflow-x:auto;margin-inline:-4px;padding-inline:4px}

.list{display:flex;flex-direction:column}
.list-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.list-row:first-child{padding-top:2px}
.list-row:last-child{border-bottom:0;padding-bottom:2px}
.list-row .meta{font-size:12.5px;color:var(--muted);margin-top:2px}
.list-row .acts{display:flex;gap:6px;align-items:center;flex-wrap:wrap}

/* ---- dashboard: clock hero ---- */
.clock-hero{position:relative;overflow:hidden;background:var(--char);color:var(--on-char);border-radius:var(--r-xl);padding:clamp(22px,3.4vw,34px);display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;min-height:220px}
.clock-hero::before{content:"";position:absolute;right:-120px;top:-140px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(226,67,42,.32),transparent 65%);pointer-events:none;opacity:.0;transition:opacity 600ms ease}
.clock-hero.is-on::before{opacity:1}
.clock-state{display:inline-flex;align-items:center;gap:9px;height:30px;padding:0 13px;border-radius:var(--r-pill);background:var(--char-2);font-size:13px;font-weight:500;color:var(--on-char-2)}
.clock-state .dot{background:var(--on-char-3);box-shadow:none}
.clock-hero.is-on .clock-state{color:var(--on-char)}
.clock-hero.is-on .clock-state .dot{background:var(--accent);animation:blink 1.6s ease-in-out infinite}
@keyframes blink{50%{opacity:.35}}
.timer{font-family:var(--f-mono);font-weight:500;font-size:clamp(3rem,8vw,5.4rem);letter-spacing:-.04em;line-height:1;margin-top:18px;font-feature-settings:"tnum" 1}
.clock-hero.is-off .timer{color:var(--on-char-3)}
.clock-hint{margin-top:12px;color:var(--on-char-2);font-size:14px}
.punch{position:relative;z-index:1;width:156px;height:156px;border-radius:50%;background:var(--accent);color:#fff;font-family:var(--f-display);font-weight:700;font-size:20px;letter-spacing:-.02em;display:grid;place-items:center;box-shadow:0 0 0 10px rgba(226,67,42,.14),0 20px 40px -12px rgba(226,67,42,.6);transition:transform var(--t-ui) var(--ease-out),box-shadow var(--t-ui) ease,background-color var(--t-fast) ease}
.punch:hover{transform:scale(1.03);box-shadow:0 0 0 14px rgba(226,67,42,.16),0 24px 44px -12px rgba(226,67,42,.65)}
.punch:active{transform:scale(.96)}
.punch.out{background:var(--surface);color:var(--ink);box-shadow:0 0 0 10px rgba(255,255,255,.06),0 20px 40px -12px rgba(0,0,0,.5)}
.punch.out:hover{box-shadow:0 0 0 14px rgba(255,255,255,.08),0 24px 44px -12px rgba(0,0,0,.55)}
.punch:disabled{opacity:.6;cursor:wait;transform:none}
.punch small{display:block;font-family:var(--f-body);font-size:12px;font-weight:500;opacity:.75;margin-top:4px;letter-spacing:0}
@media(max-width:620px){.clock-hero{grid-template-columns:1fr}.punch{width:100%;height:64px;border-radius:var(--r-pill);font-size:18px}.punch small{display:none}}

/* shift picker (24h dual-handle) */
.clockpick{user-select:none;touch-action:none;padding-top:6px}
.clockpick-track{position:relative;height:44px;border-radius:var(--r-md);background:repeating-linear-gradient(90deg,var(--surface-2) 0 calc(12.5% - 1px),var(--line) calc(12.5% - 1px) 12.5%);cursor:pointer}
.clockpick-range{position:absolute;top:6px;bottom:6px;border-radius:8px;background:var(--accent);opacity:.9;pointer-events:none}
.clockpick-handle{position:absolute;top:50%;width:22px;height:52px;margin-left:-11px;transform:translateY(-50%);border-radius:8px;background:var(--surface);border:2px solid var(--ink);box-shadow:var(--sh-2);cursor:grab;transition:transform var(--t-press) var(--ease-out)}
.clockpick-handle::after{content:"";position:absolute;left:50%;top:50%;width:2px;height:16px;transform:translate(-50%,-50%);border-left:2px solid var(--line-2);border-right:2px solid var(--line-2);width:6px}
.clockpick-handle:active{cursor:grabbing;transform:translateY(-50%) scale(1.08)}
.clockpick-handle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.clockpick-ticks{display:flex;justify-content:space-between;margin-top:8px;font-family:var(--f-mono);font-size:10.5px;color:var(--muted)}
.clockpick-readout{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px}
.clockpick-time{font-family:var(--f-mono);font-weight:600;font-size:20px;letter-spacing:-.02em}

/* notices */
.notices{display:flex;flex-direction:column;gap:10px;max-height:420px;overflow-y:auto;scrollbar-width:thin}
.note{padding:14px 16px;border-radius:var(--r-md);background:var(--surface-2);position:relative}
.note-top{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.note-top b{font-size:14.5px}
.note-top em{font-style:normal;font-family:var(--f-mono);font-size:11.5px;color:var(--muted);white-space:nowrap}
.note p{font-size:13.5px;color:var(--ink-2);margin-top:4px;white-space:pre-line}

/* leaderboard */
.podium{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-items:end;margin-bottom:14px}
.pod{border-radius:var(--r-md);background:var(--surface-2);padding:14px 12px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.pod .avatar{margin-bottom:2px}
.pod b{font-size:13.5px;font-weight:600;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pod .num{font-size:20px;font-weight:600}
.pod small{font-size:11px;color:var(--muted)}
.pod-1{order:2;background:var(--char);color:var(--on-char);padding-block:22px 16px}
.pod-1 small{color:var(--on-char-3)}
.pod-1 .avatar{background:var(--accent)}
.pod-2{order:1}.pod-3{order:3}
.pod .place{font-family:var(--f-mono);font-size:11px;opacity:.6}
.rank-list .r-n{font-family:var(--f-mono);font-size:12px;color:var(--muted);width:22px}

/* promo kit */
.cmd{position:relative;font-family:var(--f-mono);font-size:13px;line-height:1.75;background:var(--char-2);border:1px solid var(--char-line);border-radius:var(--r-md);padding:16px;white-space:pre-wrap;word-break:break-word;color:var(--on-char)}
.cmd .cmd-prefix{color:var(--on-char-3)}
.cmd .c-red{color:#FF7A66}.cmd .c-white{color:#fff}.cmd .c-green{color:#8FD3A8}.cmd .c-yellow{color:#F5D27A}.cmd .c-orange{color:#F6A770}.cmd .c-blue{color:#9DB4F5}.cmd .c-purple{color:#CDA8F2}
.box-dark .btn-ghost{color:var(--on-char);border-color:var(--char-line)}
.box-dark .btn-ghost:hover{background:var(--char-2);border-color:var(--on-char-3)}
.box-dark .field>label{color:var(--on-char-2)}
.box-dark .input,.box-dark .field input:not([type=checkbox]){background:var(--char-2);border-color:var(--char-line);color:var(--on-char)}
.box-dark .input:focus,.box-dark .field input:focus{border-color:var(--accent)}
.box-dark .hint{color:var(--on-char-3)}
.name-edit{margin-top:14px}
.name-edit summary{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--on-char-2);cursor:pointer;list-style:none;padding:4px 0}
.name-edit summary::-webkit-details-marker{display:none}
.name-edit summary:hover{color:var(--on-char)}
.inline-form{display:flex;gap:8px;flex-wrap:wrap}
.inline-form>input,.inline-form>.input{flex:1;min-width:160px}
.inline-form>.btn{flex-shrink:0}
.name-edit .inline-form{margin-top:10px}
.locked{display:flex;align-items:center;gap:12px;padding:16px;border-radius:var(--r-md);background:var(--char-2);color:var(--on-char-2);font-size:14px}
.locked .ico{color:var(--on-char-3)}

.ad-preview{display:grid;grid-template-columns:160px 1fr;gap:16px;align-items:start}
.ad-thumb{position:relative;width:160px;aspect-ratio:4/3;border-radius:var(--r-md);overflow:hidden;background:var(--surface-2)}
.ad-thumb img{width:100%;height:100%;object-fit:cover;color:transparent}
.ad-thumb button{position:absolute;inset:auto 6px 6px 6px;height:28px;border-radius:var(--r-pill);background:rgba(26,21,18,.78);color:#fff;font-size:11.5px;font-weight:600;backdrop-filter:blur(6px);transition:background-color var(--t-fast) ease}
.ad-thumb button:hover{background:var(--ink)}
.ad-text{font-size:15px;line-height:1.5;padding:12px 14px;border-radius:var(--r-md);background:var(--surface-2);word-break:break-word}
.ad-url{margin-top:8px;width:100%;height:34px;padding:0 10px;border-radius:var(--r-xs);border:1px dashed var(--line-2);background:transparent;font-family:var(--f-mono);font-size:11.5px;color:var(--muted)}
.ad-actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
@media(max-width:520px){.ad-preview{grid-template-columns:1fr}.ad-thumb{width:100%}}

/* modals */
.modal-overlay{position:fixed;inset:0;z-index:150;background:rgba(26,21,18,.5);padding:20px;place-items:center;backdrop-filter:blur(3px)}
.modal-overlay:not([hidden]){display:grid;animation:fade-in var(--t-ui) ease both}
.modal-box{width:100%;max-width:520px;max-height:84vh;overflow-y:auto;background:var(--surface);border-radius:var(--r-xl);padding:24px;box-shadow:var(--sh-3);animation:modal-in var(--t-slow) var(--ease-out) both}
.modal-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.modal-head h3{font-size:20px}
.modal-close{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:20px;color:var(--muted);transition:background-color var(--t-fast) ease,color var(--t-fast) ease}
.modal-close:hover{background:var(--surface-2);color:var(--ink)}
.modal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.modal-thumb{border-radius:var(--r-md);overflow:hidden;border:2px solid transparent;padding:0;line-height:0;transition:border-color var(--t-fast) ease,transform var(--t-press) var(--ease-out)}
.modal-thumb img{width:100%;aspect-ratio:4/3;object-fit:cover}
.modal-thumb:hover{border-color:var(--line-2)}
.modal-thumb:active{transform:scale(.97)}
.modal-thumb.selected{border-color:var(--accent)}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes modal-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}

/* ---- manage: people board ---- */
.people-list{display:flex;flex-direction:column}
.p-row{display:grid;grid-template-columns:minmax(200px,1.4fr) minmax(150px,1fr) minmax(190px,1.1fr) auto;gap:18px;align-items:center;padding:14px 20px;border-top:1px solid var(--line);transition:background-color var(--t-fast) ease}
.p-row:hover{background:#FFFBF4}
.p-head{padding-block:10px;font-size:11.5px;font-weight:600;color:var(--muted);border-top:0;background:transparent!important}
.p-name{display:flex;align-items:center;gap:12px;min-width:0}
.p-name b{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14.5px;flex-wrap:wrap}
.p-name .rank{margin-top:4px;height:22px;font-size:11.5px}
.p-hours{display:flex;flex-direction:column;gap:6px}
.p-hours-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12.5px}
.p-hours-top a{font-family:var(--f-mono);font-weight:600;font-size:13.5px;color:var(--ink)}
.p-hours-top a:hover{color:var(--accent-ink);text-decoration:underline}
.bar{height:6px;border-radius:6px;background:var(--surface-3);overflow:hidden}
.bar i{display:block;height:100%;border-radius:6px;background:var(--ink);transform-origin:left;animation:grow 700ms var(--ease-out) both}
.bar.low i{background:var(--accent)}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.p-pay{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.p-pay form{display:flex}
.p-acts{display:flex;gap:4px;justify-content:flex-end}
.icon-btn{width:34px;height:34px;border-radius:var(--r-sm);display:grid;place-items:center;color:var(--ink-2);border:1px solid var(--line);background:var(--surface);transition:background-color var(--t-fast) ease,color var(--t-fast) ease,border-color var(--t-fast) ease,transform var(--t-press) var(--ease-out)}
.icon-btn:hover{border-color:var(--ink);color:var(--ink)}
.icon-btn:active{transform:scale(.92)}
.icon-btn.danger:hover{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft)}
.icon-btn:disabled{opacity:.35;cursor:not-allowed;transform:none;border-color:var(--line);color:var(--muted);background:var(--surface)}
.icon-btn .ico{width:16px;height:16px}
.warn-pill{font-size:11px;font-weight:600;height:20px;padding:0 8px;border-radius:var(--r-pill);background:var(--accent-soft);color:var(--accent-ink);display:inline-flex;align-items:center}
@media(max-width:1100px){
  .p-head{display:none}
  .p-row{grid-template-columns:1fr auto;grid-template-areas:"name acts" "hours hours" "pay pay";row-gap:12px}
  .p-name{grid-area:name}.p-hours{grid-area:hours}.p-pay{grid-area:pay}.p-acts{grid-area:acts}
}

/* ---- manage: schedule timeline ---- */
.tl{position:relative}
.tl-axis,.tl-row{display:grid;grid-template-columns:150px 1fr 84px;gap:14px;align-items:center}
.tl-axis{padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:6px}
.tl-hours{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:10.5px;color:var(--muted)}
.tl-row{padding:7px 0}
.tl-name{display:flex;align-items:center;gap:10px;min-width:0}
.tl-name b{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-track{position:relative;height:30px;border-radius:8px;background:repeating-linear-gradient(90deg,var(--surface-2) 0 calc(12.5% - 1px),var(--line) calc(12.5% - 1px) 12.5%)}
.tl-seg{position:absolute;top:4px;bottom:4px;border-radius:6px;background:var(--ink);transform-origin:left;animation:grow 600ms var(--ease-out) both}
.tl-seg.req{background:transparent;border:1.5px dashed var(--accent)}
.tl-label{position:absolute;inset:0;display:flex;align-items:center;padding-left:10px;font-family:var(--f-mono);font-size:11.5px;color:var(--ink-2)}
.tl-acts{display:flex;gap:4px;justify-content:flex-end;position:relative}
.tl-now{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--accent);border-radius:2px;pointer-events:none;z-index:1}
.tl-now::before{content:"";position:absolute;top:-4px;left:-3px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.pop{position:relative}
.pop>summary{list-style:none}
.pop>summary::-webkit-details-marker{display:none}
.pop-panel{position:absolute;right:0;top:calc(100% + 6px);z-index:20;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:12px;box-shadow:var(--sh-3);min-width:250px;animation:modal-in var(--t-ui) var(--ease-out) both}
.pop-panel .inline-form>input{min-width:120px}
@media(max-width:700px){.tl-axis{display:none}.tl-row{grid-template-columns:1fr auto;grid-template-areas:"name acts" "track track"}.tl-name{grid-area:name}.tl-track{grid-area:track}.tl-acts{grid-area:acts}}

/* ---- manage: hiring board ---- */
.kanban{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.lane{background:var(--surface-2);border-radius:var(--r-lg);padding:12px}
.lane-head{display:flex;justify-content:space-between;align-items:center;padding:4px 6px 12px;font-weight:600;font-size:14px}
.lane-head span{font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.lane-cards{display:flex;flex-direction:column;gap:10px}
.app-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:16px;box-shadow:var(--sh-1)}
.app-card-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.app-card-top b{font-size:15.5px;font-weight:650}
.app-card-top small{display:block;font-family:var(--f-mono);font-size:12px;color:var(--muted);margin-top:2px}
.app-facts{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.app-facts span{font-size:12px;padding:3px 9px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--ink-2)}
.app-why{margin-top:12px;font-size:13.5px;color:var(--ink-2);line-height:1.55;white-space:pre-line}
.app-card .decide{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;align-items:flex-start}
.decide details{flex:0 0 auto}
.decide details[open]{flex:1 1 100%}
.decide summary{list-style:none}
.decide summary::-webkit-details-marker{display:none}
.decide-form{margin-top:10px;padding:12px;border-radius:var(--r-md);background:var(--surface-2)}
.decide-form .field{margin-bottom:10px}
@media(max-width:900px){.kanban{grid-template-columns:1fr}}

/* ---- manage: broadcast ---- */
.color-pills{display:flex;gap:8px}
.color-pill{width:30px;height:30px;border-radius:50%;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--line-2);transition:box-shadow var(--t-fast) ease,transform var(--t-press) var(--ease-out)}
.color-pill:active{transform:scale(.9)}
.color-pill.selected{box-shadow:0 0 0 2px var(--ink)}
.embed{display:flex;gap:0;border-radius:6px;background:#2B2D31;color:#DBDEE1;font-family:'gg sans','Noto Sans',var(--f-body);overflow:hidden}
.embed-bar{width:4px;flex-shrink:0;background:#E8B44A;transition:background-color var(--t-ui) ease}
.embed-in{padding:12px 16px 14px;min-width:0;flex:1}
.embed-title{font-weight:700;color:#F2F3F5;font-size:15px;word-break:break-word}
.embed-body{font-size:14px;margin-top:6px;white-space:pre-wrap;word-break:break-word;color:#DBDEE1;line-height:1.4}
.embed img{margin-top:12px;border-radius:4px;max-height:200px;object-fit:cover}
.embed-foot{font-size:12px;color:#949BA4;margin-top:10px}
.preview-label{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.img-field{display:flex;gap:10px;align-items:center}
.img-field img{width:44px;height:44px;border-radius:var(--r-xs);object-fit:cover;border:1px solid var(--line);flex-shrink:0}
.custom-back{font-size:12.5px;font-weight:600;color:var(--muted);align-self:flex-start;padding:2px 0}
.custom-back:hover{color:var(--ink)}

/* ---- manage: menu & ads ---- */
.price-tbl .menu-price-cat td{padding-top:20px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)}
.menu-price-row td{padding-block:10px}
.menu-price-name{font-weight:600;font-size:14px;display:block}
.menu-price-desc{font-size:12.5px;color:var(--muted);display:block;max-width:44ch}
.menu-price-form{display:flex;gap:6px;align-items:center;justify-content:flex-end}
.money-in{position:relative;width:110px}
.money-in::before{content:"$";position:absolute;left:11px;top:50%;transform:translateY(-50%);font-family:var(--f-mono);font-size:13px;color:var(--muted)}
.money-in input{width:100%;height:34px;padding:0 10px 0 22px;border:1px solid var(--line-2);border-radius:var(--r-xs);background:var(--surface);font-family:var(--f-mono);font-size:13.5px;text-align:right}
.money-in input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(226,67,42,.16)}
.price-scroll{max-height:620px;overflow-y:auto;scrollbar-width:thin;margin-right:-8px;padding-right:8px}
.ad-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.ad-tile{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--surface);transition:opacity var(--t-ui) ease,border-color var(--t-fast) ease}
.ad-tile.off{opacity:.55}
.ad-tile img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--surface-2)}
.ad-tile form{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px}
.ad-tile .mono{font-size:10.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 12px 10px;display:block}
.gen-hint{display:flex;gap:10px;padding:12px 14px;border-radius:var(--r-md);background:var(--surface-2);font-size:13px;color:var(--ink-2);margin-bottom:14px}
.gen-error{color:var(--accent-ink);font-size:13px;margin-bottom:10px}
.btn.loading{position:relative;color:transparent!important}
.btn.loading::after{content:"";position:absolute;width:16px;height:16px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:spin 700ms linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- sales ---- */
.bars{display:flex;flex-direction:column;gap:12px}
.bars-row{display:grid;grid-template-columns:140px 1fr 90px;gap:12px;align-items:center;font-size:13.5px}
.bars-row a{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bars-row a:hover{color:var(--accent-ink)}
.bars-row .bar{height:10px}
.bars-row .num{text-align:right}
.back-link{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--muted);margin-bottom:10px;transition:color var(--t-fast) ease}
.back-link:hover{color:var(--ink)}

/* ---- vault ---- */
.vault-lock{max-width:420px;margin:clamp(20px,8vh,80px) auto 0;text-align:center}
.vault-lock .lock-icon{width:64px;height:64px;border-radius:20px;background:var(--char);color:var(--on-char);display:grid;place-items:center;margin:0 auto 18px}
.vault-lock h2{font-size:28px;letter-spacing:-.03em}
.vault-lock p{color:var(--muted);margin:8px 0 22px}
.vault-lock form{text-align:left}
.code-list{display:flex;flex-direction:column;gap:8px}
.code-new{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-md);background:var(--surface-2);font-family:var(--f-mono);font-size:16px;font-weight:600;letter-spacing:.04em}
.vault-code-row{display:grid;grid-template-columns:minmax(180px,auto) 1fr auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.vault-code-row:last-child{border-bottom:0}
.vault-code-main{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.vault-code{font-family:var(--f-mono);font-weight:600;font-size:14.5px;letter-spacing:.03em}
.vault-code-badge{font-size:11.5px;font-weight:600;height:22px;padding:0 9px;border-radius:var(--r-pill);display:inline-flex;align-items:center}
.vault-code-badge.unused{background:var(--surface-2);color:var(--ink)}
.vault-code-badge.used{background:var(--accent-soft);color:var(--accent-ink)}
.vault-code-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.vault-code-form label{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--muted)}
.vault-code-form input[type=number]{width:74px}
.vault-code-form input[type=text]{width:150px}
.vault-code-form input[type=number],.vault-code-form input[type=text]{height:32px;padding:0 9px;border:1px solid var(--line-2);border-radius:var(--r-xs);background:var(--surface);font-size:13px;color:var(--ink)}
.vault-code-used input{width:16px;height:16px;accent-color:var(--accent)}
@media(max-width:820px){.vault-code-row{grid-template-columns:1fr}}


/* ---- v3 polish ---- */
@media(min-width:981px){.shell{background:linear-gradient(90deg,var(--char) 260px,var(--bg) 260px)}}
.cols-2,.cols-main{align-items:start}
.btn-primary:disabled{background:var(--surface-3);color:var(--muted);box-shadow:none;opacity:1}
.tl-seg{display:flex;align-items:center;padding-left:8px;overflow:hidden;white-space:nowrap;font-family:var(--f-mono);font-size:11px;font-weight:500;color:rgba(255,255,255,.88)}
.tl-seg.req{color:var(--accent-ink)}
.tl .tl-row:not(:nth-child(2)) .tl-now::before{display:none}
@media(max-width:700px){.tl-seg{font-size:0;padding:0}}


/* ---- public menu: customer-facing photo cards (deliberately unlike the staff Register's dense rows) ---- */
.how{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.how span{display:inline-flex;align-items:center;gap:9px;height:36px;padding:0 15px 0 6px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line);font-size:13.5px;font-weight:500;color:var(--ink-2)}
.how b{width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-family:var(--f-mono);font-size:11.5px;font-weight:600}
.staff-hint{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;padding:12px 12px 12px 16px;border-radius:var(--r-md);background:var(--char);color:var(--on-char);font-size:14px;margin-bottom:18px}
.staff-hint>span{display:flex;align-items:center;gap:12px}
.staff-hint .ico{color:var(--accent);flex-shrink:0}
.menu-cards .dish-grid{grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:14px}
.menu-cards .dish{display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden}
.menu-cards .dish-img{width:100%;height:auto;aspect-ratio:4/3;border-radius:0;font-size:46px}
.menu-cards .dish-body{padding:14px 16px 6px}
.menu-cards .dish-body h4{font-family:var(--f-display);font-size:17px;font-weight:650;letter-spacing:-.02em}
.menu-cards .dish-body p{-webkit-line-clamp:3}
.menu-cards .dish-foot{margin-top:auto;padding:10px 16px 16px}
.menu-cards .dish-price{font-size:15.5px}
.menu-cards .dish-group-title{font-size:26px;margin-top:18px}
@media(max-width:520px){.menu-cards .dish-grid{grid-template-columns:1fr 1fr;gap:10px}.menu-cards .dish-body{padding:12px 12px 4px}.menu-cards .dish-foot{padding:8px 12px 12px;flex-wrap:wrap;gap:6px}.menu-cards .dish-body h4{font-size:15px}.menu-cards .dish-body p{font-size:12px}}


/* ---- crew page: "player intro" lineup ---- */
.crew-stage{position:relative;background:radial-gradient(1100px 520px at 50% -8%,rgba(226,67,42,.30),transparent 62%),radial-gradient(700px 400px at 100% 40%,rgba(217,164,65,.08),transparent 60%),var(--char);color:var(--on-char);padding:clamp(32px,6vw,72px) 0 clamp(56px,8vw,104px);margin-bottom:-96px;overflow:hidden}
.crew-stage .crew-head{padding-top:0;margin-bottom:clamp(24px,4vw,44px)}
.crew-stage .crew-head h1{color:var(--on-char)}
.crew-stage .crew-head p{color:var(--on-char-2)}
.seg-dark{background:var(--char-2)}
.seg-dark button{color:var(--on-char-2)}
.seg-dark button.is-active{background:var(--on-char);color:var(--ink)}
.lineup-tier{padding:28px 0 8px;border-top:1px solid var(--char-line)}
.lineup-label{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.lineup-label h2{font-size:clamp(20px,2.4vw,26px);letter-spacing:-.025em}
.lineup-icon{width:36px;height:36px;border-radius:50%;background:var(--char-2);display:grid;place-items:center;font-size:17px}
.lineup-count{margin-left:auto;font-family:var(--f-mono);font-size:12px;color:var(--on-char-3)}
.lineup{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.lineup-captain{display:flex;justify-content:center;flex-wrap:wrap;gap:20px}
.lineup-captain .player{width:min(330px,100%)}
.player{position:relative;border-radius:22px;overflow:hidden;background:var(--char-2);border:1px solid var(--char-line);transition:transform var(--t-slow) var(--ease-out),border-color var(--t-ui) ease,box-shadow var(--t-slow) ease;--t1:#3B2F27;--t2:#1D1713;--acc:var(--on-char-3)}
.player.is-mgmt{--t1:#7A2A1B;--t2:#24140F;--acc:var(--accent)}
.player.is-boss{--t1:#8E6A24;--t2:#2A1E0C;--acc:#D9A441}
.player:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--acc) 55%,transparent);box-shadow:0 34px 70px -26px rgba(0,0,0,.75)}
.player-stage{position:relative;aspect-ratio:4/4.5;overflow:hidden;background:radial-gradient(60% 55% at 50% 22%,rgba(255,255,255,.18),transparent 70%),linear-gradient(180deg,var(--t1),var(--t2) 92%)}
.player-stage::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 2px,transparent 2px 14px);pointer-events:none}
.player-num{position:absolute;top:4px;left:14px;font-family:var(--f-display);font-weight:800;font-size:clamp(84px,9vw,112px);line-height:1;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.22);pointer-events:none}
.player-floor{position:absolute;left:12%;right:12%;bottom:-14px;height:34px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent)}
.player-fig{position:absolute;left:0;right:0;bottom:0;height:100%;display:flex;justify-content:center;align-items:flex-end;transform-origin:50% 100%;transition:transform 600ms var(--ease-out)}
.player-fig svg{height:100%;width:auto;display:block;filter:drop-shadow(0 10px 18px rgba(0,0,0,.35))}
.player:hover .player-fig{transform:scale(1.045)}
.player-live{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 10px;border-radius:var(--r-pill);background:rgba(20,16,13,.72);backdrop-filter:blur(6px);font-size:11.5px;font-weight:600;color:var(--on-char)}
.player-live i{width:7px;height:7px;border-radius:50%;background:var(--live);box-shadow:0 0 0 3px rgba(63,156,109,.25);animation:blink 1.8s ease-in-out infinite}
.player-plate{position:relative;padding:14px 16px 16px;background:linear-gradient(180deg,var(--char-2),var(--char))}
.player-plate::before{content:"";position:absolute;left:16px;top:0;width:36px;height:3px;border-radius:0 0 3px 3px;background:var(--acc)}
.player-rank{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
.player-name{margin-top:6px;font-family:var(--f-display);font-weight:800;text-transform:uppercase;line-height:.92;letter-spacing:-.02em;overflow-wrap:anywhere}
.player-name .first{display:block;font-size:14px;font-weight:600;letter-spacing:.04em;color:var(--on-char-2);margin-bottom:2px}
.player-name .last{display:block;font-size:clamp(22px,2.2vw,27px)}
.lineup-captain .player-name .last{font-size:clamp(28px,3vw,36px)}
.player-handle{display:block;margin-top:6px;font-family:var(--f-mono);font-size:11.5px;color:var(--on-char-3)}
/* walk-in: cards rise in sequence, then each figure steps up into its spotlight */
.lineup.stagger.in .player-fig svg{animation:fig-in 900ms var(--ease-out) both;animation-delay:calc(var(--d,0) * 90ms + 160ms)}
@keyframes fig-in{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
.lineup.stagger.in .player-num{animation:num-in 900ms var(--ease-out) both;animation-delay:calc(var(--d,0) * 90ms + 60ms)}
@keyframes num-in{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@media(max-width:520px){.lineup{grid-template-columns:1fr 1fr;gap:10px}.player-plate{padding:12px}.player-name .last{font-size:19px}.player-num{font-size:72px}}

/* toast */
.toast{position:fixed;left:50%;bottom:28px;z-index:300;transform:translate(-50%,24px);opacity:0;pointer-events:none;display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:var(--r-pill);background:var(--ink);color:var(--surface);font-size:14px;font-weight:500;box-shadow:var(--sh-3);transition:transform var(--t-slow) var(--ease-out),opacity var(--t-ui) ease}
.toast.show{transform:translate(-50%,0);opacity:1}
@media(max-width:1000px){.toast{bottom:88px}}

/* ------------------------------------------------------- scroll reveal -- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.stagger>*{opacity:0;transform:translateY(12px)}
.stagger.in>*{opacity:1;transform:none;transition:opacity 600ms var(--ease-out),transform 600ms var(--ease-out)}
.stagger.in>*:nth-child(2){transition-delay:60ms}.stagger.in>*:nth-child(3){transition-delay:120ms}
.stagger.in>*:nth-child(4){transition-delay:180ms}.stagger.in>*:nth-child(5){transition-delay:240ms}
.stagger.in>*:nth-child(6){transition-delay:300ms}.stagger.in>*:nth-child(n+7){transition-delay:340ms}
.rise{animation:rise 700ms var(--ease-out) both}
.rise-2{animation-delay:80ms}.rise-3{animation-delay:160ms}.rise-4{animation-delay:240ms}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.view.is-active .stagger-v>*{animation:rise 500ms var(--ease-out) both}
.view.is-active .stagger-v>*:nth-child(2){animation-delay:50ms}
.view.is-active .stagger-v>*:nth-child(3){animation-delay:100ms}
.view.is-active .stagger-v>*:nth-child(4){animation-delay:150ms}
.view.is-active .stagger-v>*:nth-child(n+5){animation-delay:200ms}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}
  .reveal,.stagger>*{opacity:1;transform:none}
}