/* =========================================================
   BEER CITY BREAD CO. :: OWNER PORTAL
   Calm, fast, built for a manager on a busy shift.
   ========================================================= */
:root{
  --ink:#000; --paper:#fff; --bg:#f4f3f0; --card:#fff; --line:#e4e1db; --line-2:#d3cfc7; --muted:#6d6a64; --soft:#f0eee9;
  --ale:#f0a92e; --ale-deep:#b87612; --ale-mist:#fdf3e1; --rogue:#1f5257; --rogue-mist:#e3eeee;
  --ok:#1f9d5c; --ok-mist:#e3f5ea; --warn:#b7791f; --bad:#c53b3b; --bad-mist:#fbe9e9; --info:#2f5fbf; --info-mist:#e8eefb;
  --f-display:'Big Shoulders Display', 'Arial Narrow', sans-serif; --f-body:'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --r:14px; --side:264px; --ease:cubic-bezier(.2,.8,.2,1);
}
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{ margin:0; font-family:var(--f-body); font-size:15px; line-height:1.5; color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; }
button, input, select, textarea{ font:inherit; color:inherit; }
a{ color:inherit; }
:focus-visible{ outline:3px solid var(--ale); outline-offset:2px; border-radius:6px; }
.sr{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
[hidden]{ display:none!important; }

/* ---------- login ---------- */
.login{ min-height:100vh; display:grid; grid-template-columns:1.1fr 1fr; background:#000; }
.login-art{ position:relative; overflow:hidden; color:#fff; padding:48px; display:flex; flex-direction:column; justify-content:space-between; }
.login-art img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.4; }
.login-art::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.2), #000); }
.login-art > *{ position:relative; z-index:1; }
.login-logo{ width:190px; color:#fff; }
.login-logo svg{ width:100%; height:auto; }
.login-art h1{ font-family:var(--f-display); font-weight:800; text-transform:uppercase; font-size:clamp(46px,5vw,76px); line-height:.9; margin:0 0 14px; }
.login-art p{ margin:0; color:#d6d6d6; max-width:28em; font-size:17px; }
.login-side{ display:grid; place-items:center; padding:32px; background:var(--bg); }
.login-card{ width:min(420px,100%); }
.login-card h2{ margin:0 0 6px; font-size:28px; }
.login-card > p{ margin:0 0 26px; color:var(--muted); }
.login-card.shake{ animation:shake .45s; }
@keyframes shake{ 20%,60%{ transform:translateX(-8px) } 40%,80%{ transform:translateX(8px) } }
.demo-box{ margin-top:22px; padding:16px; border-radius:var(--r); background:var(--ale-mist); border:1px solid #f3dcb0; font-size:14px; }
.demo-box b{ display:block; margin-bottom:8px; }
.demo-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.demo-chips button{ border:1px solid #e6c98f; background:#fff; border-radius:999px; padding:6px 12px; cursor:pointer; font-weight:600; font-size:13px; }
.demo-chips button:hover{ background:var(--ale); border-color:var(--ale); }
.login-err{ color:var(--bad); font-weight:600; font-size:14px; min-height:20px; margin:4px 0 0; }

/* ---------- form controls ---------- */
.fld{ display:grid; gap:6px; margin-bottom:14px; }
.fld > label, .lbl{ font-weight:700; font-size:13.5px; }
.fld .hint{ font-weight:500; color:var(--muted); font-size:12.5px; }
.in, .sl, .ta{ width:100%; min-height:44px; border:1.5px solid var(--line-2); border-radius:11px; padding:9px 12px; background:#fff; transition:border-color .15s, box-shadow .15s; }
.ta{ min-height:96px; resize:vertical; line-height:1.5; }
.sl{ appearance:none; padding-right:36px; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center/16px; }
.in:focus, .sl:focus, .ta:focus{ outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(240,169,46,.35); }
.pw{ position:relative; }
.pw button{ position:absolute; right:6px; top:50%; transform:translateY(-50%); border:0; background:none; font-weight:700; font-size:13px; cursor:pointer; padding:6px 8px; border-radius:8px; color:var(--muted); }
.row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.row3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.sw{ position:relative; display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-weight:600; user-select:none; }
.sw input{ position:absolute; opacity:0; pointer-events:none; }
.sw i{ width:42px; height:24px; border-radius:99px; background:var(--line-2); position:relative; transition:background .2s; flex:none; }
.sw i::after{ content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .25s var(--ease); }
.sw input:checked + i{ background:var(--ok); }
.sw input:checked + i::after{ transform:translateX(18px); }
.sw input:focus-visible + i{ outline:3px solid var(--ale); outline-offset:2px; }

/* ---------- buttons ---------- */
.b{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:0 16px; border-radius:10px; border:1.5px solid var(--ink); background:var(--ink); color:#fff; font-weight:700; font-size:14px; cursor:pointer; text-decoration:none; transition:background .15s, border-color .15s, transform .15s, color .15s; white-space:nowrap; }
.b:hover{ background:#262626; }
.b:active{ transform:translateY(1px); }
.b-ale{ background:var(--ale); border-color:var(--ale); color:#000; }
.b-ale:hover{ background:#f5b94e; }
.b-ghost{ background:#fff; color:var(--ink); border-color:var(--line-2); }
.b-ghost:hover{ background:var(--soft); border-color:var(--ink); }
.b-danger{ background:#fff; color:var(--bad); border-color:#efc4c4; }
.b-danger:hover{ background:var(--bad-mist); }
.b-sm{ min-height:34px; padding:0 12px; font-size:13px; border-radius:9px; }
.b-lg{ min-height:50px; padding:0 22px; font-size:15px; width:100%; }
.b svg{ width:16px; height:16px; flex:none; }
.b.busy{ opacity:.7; pointer-events:none; }
.ib{ width:36px; height:36px; border-radius:9px; border:1.5px solid var(--line); background:#fff; cursor:pointer; display:inline-grid; place-items:center; color:var(--muted); transition:all .15s; }
.ib:hover{ border-color:var(--ink); color:var(--ink); }
.ib.on{ background:var(--ale); border-color:var(--ale); color:#000; }
.ib svg{ width:17px; height:17px; }

/* ---------- app shell ---------- */
.app{ display:grid; grid-template-columns:var(--side) 1fr; min-height:100vh; }
.side{ background:#000; color:#fff; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; padding:20px 14px; gap:16px; z-index:30; }
.side-logo{ display:flex; align-items:center; gap:10px; padding:4px 8px 6px; text-decoration:none; }
.side-logo svg{ width:128px; height:auto; color:#fff; }
.side-logo span{ font-size:11px; font-weight:700; background:var(--ale); color:#000; border-radius:6px; padding:2px 7px; }
.locpick{ background:#161616; border:1px solid #2a2a2a; border-radius:12px; padding:10px; }
.locpick label{ display:block; font-size:12px; color:#a3a3a3; font-weight:600; margin:0 0 6px 2px; }
.locpick .sl{ background-color:#000; color:#fff; border-color:#333; min-height:40px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bbb' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.locpick .locked{ display:flex; align-items:center; gap:8px; font-weight:700; }
.locpick .locked svg{ width:15px; color:var(--ale); }
.snav{ display:flex; flex-direction:column; gap:2px; overflow:auto; }
.snav button{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; border:0; background:none; color:#cfcfcf; font-weight:600; cursor:pointer; text-align:left; transition:background .15s, color .15s; }
.snav button svg{ width:19px; height:19px; flex:none; opacity:.85; }
.snav button:hover{ background:#1a1a1a; color:#fff; }
.snav button.on{ background:#fff; color:#000; }
.snav button .cnt{ margin-left:auto; min-width:22px; height:22px; padding:0 7px; border-radius:99px; background:var(--ale); color:#000; font-size:12px; font-weight:800; display:grid; place-items:center; }
.snav .sep{ height:1px; background:#222; margin:8px 4px; }
.side-foot{ margin-top:auto; display:grid; gap:10px; }
.me{ display:flex; align-items:center; gap:10px; padding:10px; border-radius:12px; background:#131313; }
.me i{ width:34px; height:34px; border-radius:50%; background:var(--ale); color:#000; display:grid; place-items:center; font-style:normal; font-weight:800; flex:none; }
.me b{ display:block; font-size:13.5px; line-height:1.2; }
.me small{ color:#a3a3a3; font-size:12px; }
.side-foot .row{ gap:8px; }
.side-foot .b{ background:#1a1a1a; border-color:#2a2a2a; color:#ddd; min-height:36px; font-size:13px; }
.side-foot .b:hover{ background:#262626; color:#fff; }

.main{ min-width:0; display:flex; flex-direction:column; }
.top{ position:sticky; top:0; z-index:20; background:rgba(244,243,240,.88); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line); height:66px; display:flex; align-items:center; gap:14px; padding:0 28px; }
.top h1{ margin:0; font-family:var(--f-display); text-transform:uppercase; font-weight:800; font-size:30px; line-height:1; }
.top .scope{ font-size:13px; font-weight:700; padding:4px 10px; border-radius:99px; background:#fff; border:1px solid var(--line); }
.top-act{ margin-left:auto; display:flex; gap:8px; align-items:center; }
.burger{ display:none; }
.view{ padding:26px 28px 60px; max-width:1360px; width:100%; }
.demo-strip{ margin:0 0 20px; padding:12px 16px; border-radius:12px; background:var(--ale-mist); border:1px solid #f3dcb0; display:flex; gap:12px; align-items:center; font-size:14px; }
.demo-strip b{ font-weight:800; }
.demo-strip button{ margin-left:auto; }

/* ---------- cards + tiles ---------- */
.card{ background:var(--card); border:1px solid var(--line); border-radius:18px; padding:20px; }
.card-h{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 14px; }
.card-h h2, .card-h h3{ margin:0; font-size:17px; }
.card-h p{ margin:2px 0 0; color:var(--muted); font-size:13.5px; }
.grid{ display:grid; gap:16px; }
.g2{ grid-template-columns:1fr 1fr; }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }
.g-main{ grid-template-columns:1.6fr 1fr; align-items:start; }
.tile{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:18px; cursor:pointer; text-align:left; display:flex; flex-direction:column; gap:10px; transition:border-color .15s, transform .2s var(--ease), box-shadow .2s; }
.tile:hover{ border-color:var(--ink); transform:translateY(-2px); box-shadow:0 12px 30px -18px rgba(0,0,0,.35); }
.tile span svg{ width:18px; height:18px; flex:none; }
.tile span{ font-weight:600; color:var(--muted); font-size:13.5px; display:flex; align-items:center; gap:8px; }
.tile b{ font-family:var(--f-display); font-weight:800; font-size:48px; line-height:.9; }
.tile small{ color:var(--muted); font-size:13px; }
.tile.hot{ background:#000; color:#fff; border-color:#000; }
.tile.hot span, .tile.hot small{ color:#bdbdbd; }
.tile.hot b{ color:var(--ale); }
.greet{ margin:0 0 18px; }
.greet h2{ margin:0; font-size:26px; }
.greet p{ margin:4px 0 0; color:var(--muted); }
.list{ display:flex; flex-direction:column; }
.li{ display:flex; align-items:center; gap:12px; padding:12px 4px; border-top:1px solid var(--line); cursor:pointer; border-radius:8px; }
.li:first-child{ border-top:0; }
.li:hover{ background:var(--soft); }
.li .t{ flex:1; min-width:0; }
.li .t b{ display:block; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.li .t small{ color:var(--muted); font-size:13px; }
.li .dt{ width:48px; text-align:center; border-radius:10px; background:var(--soft); padding:4px 0; flex:none; }
.li .dt b{ display:block; font-family:var(--f-display); font-size:22px; line-height:1; }
.li .dt small{ font-size:11px; font-weight:700; color:var(--muted); }
.empty{ padding:28px 10px; text-align:center; color:var(--muted); }
.empty b{ display:block; color:var(--ink); font-size:16px; margin-bottom:4px; }
.loc-live{ display:flex; gap:10px; align-items:center; padding:12px; border-radius:12px; background:var(--soft); }
.loc-live + .loc-live{ margin-top:8px; }
.loc-live b{ flex:1; }

/* ---------- tags ---------- */
.tag{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:3px 9px; border-radius:99px; background:var(--soft); color:#3a3a3a; white-space:nowrap; }
.tag i{ width:7px; height:7px; border-radius:50%; background:currentColor; }
.tag.rockford{ background:var(--rogue-mist); color:var(--rogue); }
.tag.beltline{ background:#1b1b1b; color:var(--ale); }
.tag.both{ background:var(--ale-mist); color:var(--ale-deep); }
.st-new{ background:var(--info-mist); color:var(--info); }
.st-quoted, .st-reviewing{ background:var(--ale-mist); color:var(--ale-deep); }
.st-confirmed, .st-interview{ background:#efe7fb; color:#6a3fb5; }
.st-prep{ background:#fff0e0; color:#b35a00; }
.st-ready, .st-hired, .st-sent, .st-live{ background:var(--ok-mist); color:var(--ok); }
.st-done, .st-draft{ background:var(--soft); color:#555; }
.st-declined{ background:var(--bad-mist); color:var(--bad); }
.dot{ width:9px; height:9px; border-radius:50%; background:#aaa; flex:none; }
.dot.open{ background:var(--ok); box-shadow:0 0 0 4px var(--ok-mist); }

/* ---------- toolbar ---------- */
.bar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.search{ position:relative; flex:1; min-width:200px; max-width:360px; }
.search input{ padding-left:36px; }
.search svg{ position:absolute; left:12px; top:50%; transform:translateY(-50%); width:16px; color:var(--muted); }
.chips{ display:flex; gap:6px; flex-wrap:wrap; }
.chip{ height:34px; padding:0 12px; border-radius:99px; border:1.5px solid var(--line-2); background:#fff; cursor:pointer; font-weight:700; font-size:13px; display:inline-flex; align-items:center; gap:6px; }
.chip:hover{ border-color:var(--ink); }
.chip.on{ background:var(--ink); border-color:var(--ink); color:#fff; }
.chip small{ font-weight:800; opacity:.6; }
.seg2{ display:inline-flex; background:#fff; border:1.5px solid var(--line-2); border-radius:11px; padding:3px; }
.seg2 button{ border:0; background:none; padding:6px 12px; border-radius:8px; font-weight:700; font-size:13px; cursor:pointer; color:var(--muted); }
.seg2 button.on{ background:var(--ink); color:#fff; }

/* ---------- kanban ---------- */
.board{ display:grid; grid-template-columns:repeat(6, minmax(220px,1fr)); gap:12px; overflow-x:auto; padding-bottom:10px; }
.col{ background:#ebe9e4; border-radius:16px; padding:10px; min-height:360px; display:flex; flex-direction:column; gap:8px; transition:background .15s, box-shadow .15s; }
.col.over{ background:var(--ale-mist); box-shadow:inset 0 0 0 2px var(--ale); }
.col-h{ display:flex; align-items:center; justify-content:space-between; padding:4px 6px 6px; font-weight:800; font-size:13.5px; }
.col-h span{ background:#fff; border-radius:99px; min-width:24px; height:22px; display:grid; place-items:center; font-size:12px; padding:0 6px; }
.oc{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px; cursor:grab; display:grid; gap:6px; transition:box-shadow .15s, transform .15s, border-color .15s; }
.oc:hover{ border-color:var(--ink); box-shadow:0 8px 20px -12px rgba(0,0,0,.35); }
.oc.dragging{ opacity:.45; transform:rotate(2deg); }
.oc-top{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.oc-top b{ font-size:13px; color:var(--muted); }
.oc h4{ margin:0; font-size:15px; }
.oc p{ margin:0; font-size:13px; color:var(--muted); }
.oc-foot{ display:flex; justify-content:space-between; align-items:center; font-size:13px; font-weight:700; }
.oc.due{ box-shadow:inset 3px 0 0 var(--ale); }

/* ---------- table ---------- */
.tbl{ width:100%; border-collapse:separate; border-spacing:0; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.tbl th{ text-align:left; font-size:12.5px; color:var(--muted); font-weight:700; padding:12px 14px; background:#faf9f7; border-bottom:1px solid var(--line); }
.tbl td{ padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:middle; }
.tbl tr:last-child td{ border-bottom:0; }
.tbl tbody tr{ cursor:pointer; }
.tbl tbody tr:hover td{ background:#fbfaf8; }
.tbl .nm b{ display:block; }
.tbl .nm small{ color:var(--muted); }
.tbl-wrap{ overflow-x:auto; }

/* ---------- drawer ---------- */
.dw-wrap{ position:fixed; inset:0; z-index:80; }
.dw-bg{ position:absolute; inset:0; background:rgba(0,0,0,.35); opacity:0; transition:opacity .3s; }
.dw{ position:absolute; top:0; right:0; bottom:0; width:min(560px,100%); background:#fff; box-shadow:-20px 0 60px rgba(0,0,0,.2); transform:translateX(100%); transition:transform .4s var(--ease); display:flex; flex-direction:column; }
.dw.wide{ width:min(760px,100%); }
.dw-wrap.open .dw-bg{ opacity:1; }
.dw-wrap.open .dw{ transform:none; }
.dw-h{ padding:18px 22px; border-bottom:1px solid var(--line); display:flex; align-items:flex-start; gap:12px; }
.dw-h h2{ margin:0; font-size:21px; line-height:1.2; }
.dw-h p{ margin:4px 0 0; color:var(--muted); font-size:13.5px; }
.dw-h .ib{ margin-left:auto; flex:none; }
.dw-b{ padding:20px 22px; overflow:auto; flex:1; }
.dw-f{ padding:14px 22px; border-top:1px solid var(--line); display:flex; gap:8px; justify-content:flex-end; background:#faf9f7; flex-wrap:wrap; }
.dw-f .grow{ margin-right:auto; }
.sec-t{ font-size:12.5px; font-weight:800; color:var(--muted); margin:20px 0 8px; }
.sec-t:first-child{ margin-top:0; }
.kv{ display:grid; grid-template-columns:130px 1fr; gap:8px 12px; font-size:14px; }
.kv dt{ color:var(--muted); }
.kv dd{ margin:0; font-weight:600; }
.items{ border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.items div{ display:flex; justify-content:space-between; gap:12px; padding:10px 12px; border-top:1px solid var(--line); font-size:14px; }
.items div:first-child{ border-top:0; }
.items .tot{ background:var(--soft); font-weight:800; }
.stepper{ display:flex; gap:4px; margin:4px 0 12px; }
.stepper button{ flex:1; border:0; padding:8px 4px 0; background:none; cursor:pointer; font-size:11.5px; font-weight:700; color:var(--muted); text-align:left; border-top:5px solid var(--line); border-radius:0; }
.stepper button.done{ border-top-color:var(--ale); color:var(--ink); }
.stepper button.cur{ border-top-color:var(--ink); color:var(--ink); }
.stepper button:hover{ color:var(--ink); }
.tline{ display:grid; gap:10px; border-left:2px solid var(--line); padding-left:14px; margin-left:4px; }
.tline div{ position:relative; font-size:13.5px; }
.tline div::before{ content:""; position:absolute; left:-20px; top:6px; width:10px; height:10px; border-radius:50%; background:var(--ale); }
.tline small{ color:var(--muted); display:block; }
.av{ display:grid; grid-template-columns:52px repeat(7,1fr); gap:4px; font-size:12px; text-align:center; font-weight:700; }
.av span{ padding:6px 0; border-radius:7px; }
.av .y{ background:var(--ale); }
.av .n{ background:var(--soft); color:#bbb; }
.av .l{ text-align:left; color:var(--muted); }

/* ---------- menu manager ---------- */
.sync{ display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:14px; background:#000; color:#fff; margin-bottom:16px; flex-wrap:wrap; }
.sync .toast-logo{ width:36px; height:36px; border-radius:10px; background:#ff6c2c; display:grid; place-items:center; font-weight:900; color:#fff; flex:none; }
.sync b{ display:block; }
.sync small{ color:#bdbdbd; }
.sync .b{ margin-left:auto; background:#fff; color:#000; border-color:#fff; }
.sync .spin svg{ animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg) } }
.mcat{ margin-bottom:18px; }
.mcat h3{ margin:0 0 8px; font-size:15px; display:flex; gap:8px; align-items:center; }
.mrow{ display:grid; grid-template-columns:48px 1fr auto auto; gap:12px; align-items:center; padding:10px 12px; background:#fff; border:1px solid var(--line); border-radius:12px; margin-bottom:6px; cursor:pointer; transition:border-color .15s; }
.mrow:hover{ border-color:var(--ink); }
.mrow.hid{ opacity:.5; }
.mthumb{ width:48px; height:48px; border-radius:10px; background:var(--soft) center/cover; display:grid; place-items:center; color:#bbb; }
.mthumb svg{ width:18px; }
.mrow .nm b{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.mrow .nm small{ color:var(--muted); display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.mrow .pr{ font-weight:800; display:flex; align-items:center; gap:6px; }
.mrow .pr svg{ width:13px; color:var(--muted); }
.mrow .acts{ display:flex; gap:6px; }
.gal{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.gal button{ aspect-ratio:1; border-radius:10px; border:2px solid transparent; background:center/cover; cursor:pointer; padding:0; }
.gal button.on{ border-color:var(--ale); box-shadow:0 0 0 3px rgba(240,169,46,.35); }
.gal .none{ background:var(--soft); font-size:12px; font-weight:700; color:var(--muted); }
.pv-dish{ border-radius:16px; overflow:hidden; border:1px solid var(--line); }
.pv-dish .im{ aspect-ratio:16/10; background:var(--soft) center/cover; position:relative; }
.pv-dish .im .tag{ position:absolute; left:10px; top:10px; background:var(--ale); color:#000; }
.pv-dish .tx{ padding:14px; }
.pv-dish h4{ margin:0 0 4px; font-family:var(--f-display); text-transform:uppercase; font-size:24px; line-height:1; }
.pv-dish p{ margin:0; color:var(--muted); font-size:13.5px; }

/* ---------- email ---------- */
.email-grid{ display:grid; grid-template-columns:minmax(300px,.85fr) minmax(400px,1.25fr); gap:16px; align-items:start; }
.email-pv{ position:sticky; top:86px; }
.inbox-chrome{ background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.inbox-chrome .ih{ padding:12px 16px; border-bottom:1px solid var(--line); font-size:13px; }
.inbox-chrome .ih b{ display:block; font-size:15px; }
.inbox-chrome .ih small{ color:var(--muted); }
.mail-body{ background:#efece6; padding:18px; max-height:calc(100vh - 220px); overflow:auto; }
.mail{ max-width:560px; margin:0 auto; background:#fff; border-radius:6px; overflow:hidden; font-family:Arial, Helvetica, sans-serif; color:#111; }
.mail-top{ background:#000; padding:18px; text-align:center; }
.mail-top svg{ width:150px; height:auto; color:#fff; }
.mail-hero{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.mail-in{ padding:22px 26px; }
.mail-in h1{ font-family:var(--f-display); text-transform:uppercase; font-weight:800; font-size:34px; line-height:.95; margin:0 0 12px; }
.mail-in p{ margin:0 0 14px; font-size:15px; line-height:1.55; white-space:pre-line; }
.mail-btn{ display:inline-block; background:#f0a92e; color:#000; font-weight:700; padding:12px 22px; border-radius:99px; text-decoration:none; font-size:14px; }
.mail-dishes{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:18px 0 6px; }
.mail-dishes img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:6px; }
.mail-dishes b{ display:block; font-size:12.5px; margin-top:6px; line-height:1.2; }
.mail-ev{ border-top:1px solid #eee; padding-top:14px; margin-top:10px; }
.mail-ev div{ display:flex; gap:12px; padding:8px 0; font-size:13.5px; }
.mail-ev div b{ min-width:62px; }
.mail-foot{ background:#f6f5f2; padding:16px 26px; font-size:11.5px; color:#777; text-align:center; line-height:1.6; }
.block-list{ display:grid; gap:8px; }
.block{ display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.block b{ flex:1; font-size:14px; }
.aud{ display:grid; gap:8px; }
.aud label{ display:flex; align-items:center; gap:10px; padding:12px; border:1.5px solid var(--line-2); border-radius:12px; cursor:pointer; background:#fff; }
.aud input{ accent-color:#000; width:18px; height:18px; }
.aud label:has(input:checked){ border-color:var(--ink); box-shadow:0 0 0 3px rgba(240,169,46,.3); }
.aud b{ flex:1; }
.aud small{ color:var(--muted); font-weight:700; }
.stat{ display:flex; gap:18px; }
.stat div b{ display:block; font-size:18px; }
.stat div small{ color:var(--muted); font-size:12px; }
.meter{ height:6px; background:var(--soft); border-radius:99px; overflow:hidden; width:90px; }
.meter i{ display:block; height:100%; background:var(--ok); }

/* ---------- site settings ---------- */
.hrs{ display:grid; gap:6px; }
.hrs-row{ display:grid; grid-template-columns:96px 1fr 1fr auto; gap:8px; align-items:center; }
.hrs-row .in{ min-height:38px; padding:6px 10px; }
.hrs-row.off .in{ opacity:.35; pointer-events:none; }
.banner-pv{ border-radius:10px; padding:10px 14px; font-weight:700; font-size:14px; text-align:center; background:var(--ale); color:#000; margin-top:6px; }
.banner-pv.rockford{ background:var(--rogue); color:#fff; }
.banner-pv.offp{ background:var(--soft); color:var(--muted); font-weight:600; }
.clos{ display:flex; gap:8px; align-items:center; padding:8px 10px; border:1px solid var(--line); border-radius:10px; margin-bottom:6px; font-size:14px; }
.clos b{ flex:1; }

/* ---------- modal + toast ---------- */
.md{ position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:16px; }
.md-bg{ position:absolute; inset:0; background:rgba(0,0,0,.45); }
.md-c{ position:relative; background:#fff; border-radius:18px; padding:24px; width:min(440px,100%); box-shadow:0 30px 80px rgba(0,0,0,.3); animation:mdin .3s var(--ease); }
.md-c h3{ margin:0 0 6px; font-size:20px; }
.md-c p{ margin:0 0 18px; color:var(--muted); }
.md-c .acts{ display:flex; gap:8px; justify-content:flex-end; }
@keyframes mdin{ from{ transform:translateY(12px) scale(.98); opacity:0 } }
.toast{ position:fixed; left:50%; bottom:22px; transform:translate(-50%, calc(100% + 40px)); visibility:hidden; background:#000; color:#fff; padding:12px 18px; border-radius:12px; font-weight:600; z-index:100; transition:transform .4s var(--ease), visibility .4s; display:flex; gap:10px; align-items:center; max-width:calc(100vw - 30px); box-shadow:0 20px 40px rgba(0,0,0,.3); }
.toast.show{ transform:translate(-50%,0); visibility:visible; }
.toast i{ width:9px; height:9px; border-radius:50%; background:var(--ale); flex:none; }
.toast a{ color:var(--ale); font-weight:800; }

/* ---------- responsive ---------- */
@media (max-width:1180px){ .g4{ grid-template-columns:repeat(2,1fr); } .g-main, .email-grid{ grid-template-columns:1fr; } .email-pv{ position:static; } }
@media (max-width:900px){
  .login{ grid-template-columns:1fr; }
  .login-art{ min-height:260px; padding:28px; }
  .app{ grid-template-columns:1fr; }
  .side{ position:fixed; left:0; top:0; bottom:0; width:min(290px,86vw); transform:translateX(-100%); transition:transform .35s var(--ease); }
  body.side-open .side{ transform:none; box-shadow:20px 0 60px rgba(0,0,0,.4); }
  body.side-open::after{ content:""; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:25; }
  .burger{ display:inline-grid; }
  .top{ padding:0 16px; }
  .top h1{ font-size:24px; }
  .top .hide-sm{ display:none; }
  .view{ padding:18px 16px 60px; }
  .g2, .g3{ grid-template-columns:1fr; }
  .row, .row3{ grid-template-columns:1fr; }
  .board{ grid-template-columns:repeat(6, 250px); }
  .mrow{ grid-template-columns:44px 1fr; }
  .mrow .pr, .mrow .acts{ grid-column:2; }
  .hrs-row{ grid-template-columns:70px 1fr 1fr auto; }
  .kv{ grid-template-columns:110px 1fr; }
  .li{ flex-wrap:wrap; }
  .li .t{ min-width:55%; }
  .bar .search{ max-width:none; }
}
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms!important; transition-duration:.001ms!important; } }

/* ===== round 2 ===== */
.oc-pay{ display:flex; }
.pay-row{ display:flex; align-items:center; gap:12px; margin-top:14px; padding:12px 14px; border-radius:14px; background:var(--bad-mist); border:1px solid #efc4c4; }
.pay-row.is-paid{ background:var(--ok-mist); border-color:#bfe6cd; }
.pay-row > div{ flex:1; }
.pay-row b{ display:block; font-size:14px; }
.pay-row small{ color:var(--muted); font-size:12.5px; }
.md-warn{ width:min(470px,100%); text-align:left; border-top:6px solid var(--bad); }
.warn-ic{ width:52px; height:52px; border-radius:50%; background:var(--bad); color:#fff; display:grid; place-items:center; font-family:var(--f-display); font-weight:900; font-size:32px; margin-bottom:12px; animation:wob .6s var(--ease); }
@keyframes wob{ 0%{ transform:scale(.4) } 60%{ transform:scale(1.12) rotate(-8deg) } 100%{ transform:none } }
.md-warn h3{ font-size:22px; }
.warn-kv{ background:var(--soft); border-radius:12px; padding:12px 14px; margin:0 0 18px; grid-template-columns:90px 1fr; }
.md-c .acts.stack{ flex-direction:column; align-items:stretch; }
.md-c .acts.stack .b{ min-height:46px; }

/* email editor */
.mail.mobile{ max-width:375px; }
.mail{ transition:max-width .4s var(--ease); }
.mail-blocks{ padding:18px 24px 10px; }
.mail-body{ max-height:calc(100vh - 236px); }
.m-h{ font-family:var(--f-display); text-transform:uppercase; font-weight:800; font-size:34px; line-height:.95; margin:6px 0; }
.m-t{ font-size:15px; line-height:1.6; padding:4px 0; }
.m-t a, .m-call a{ color:#b87612; }
.m-call{ background:#fdf3e1; border-left:4px solid #f0a92e; padding:14px 16px; border-radius:6px; font-size:15px; line-height:1.55; margin:6px 0; }
.m-img{ width:100%; border-radius:6px; display:block; margin:6px 0; }
.m-img-empty{ aspect-ratio:16/8; border:2px dashed #ddd; border-radius:8px; display:grid; place-content:center; text-align:center; color:#888; gap:4px; background:#fafafa; margin:6px 0; padding:10px; }
.m-img-empty svg{ width:30px; height:30px; margin:0 auto; }
.m-img-empty b{ color:#333; }
.m-img-empty span{ font-size:12.5px; }
.m-btn{ display:inline-block; background:#f0a92e; color:#000; font-weight:700; padding:12px 24px; border-radius:99px; font-size:14px; margin:8px 0; }
.m-div{ border:0; margin:16px 0; }
.m-div.line{ border-top:1px solid #e5e2dc; }
.m-div.dots{ border-top:3px dotted #c9c4ba; }
.m-div.gold{ height:5px; background:#f0a92e; border-radius:5px; width:64px; }
.m-sp.s{ height:12px; } .m-sp.m{ height:28px; } .m-sp.l{ height:54px; }
.eb .m-sp{ background:repeating-linear-gradient(45deg, #fafafa 0 6px, #f2f2f2 6px 12px); border-radius:4px; }
.m-sub{ font-family:var(--f-display); text-transform:uppercase; font-weight:800; font-size:22px; line-height:1; margin:8px 0 10px; }
.m-note{ color:#999; font-size:13px; font-style:italic; margin:4px 0; }
.mail-dishes small{ display:block; color:#777; font-size:12px; margin-top:2px; }
.mail-ev{ border-top:0; padding-top:0; margin-top:4px; }
.eb{ position:relative; border-radius:8px; outline:2px dashed transparent; outline-offset:4px; transition:outline-color .15s; cursor:pointer; }
.eb:hover{ outline-color:#ecc985; }
.eb.sel{ outline:2px solid var(--ale); }
.eb.drop{ outline:2px dashed var(--ok); background:var(--ok-mist); }
.eb.flash{ animation:flash 1.2s ease; }
@keyframes flash{ 0%{ background:rgba(240,169,46,.35) } 100%{ background:transparent } }
.eb-tools{ position:absolute; top:-18px; right:6px; display:none; align-items:center; gap:2px; background:#000; color:#fff; border-radius:9px; padding:3px; z-index:4; font-family:var(--f-body); box-shadow:0 6px 16px rgba(0,0,0,.25); }
.eb:hover .eb-tools, .eb.sel .eb-tools{ display:flex; }
.eb-tools span{ padding:0 8px 0 6px; font-size:11.5px; font-weight:700; }
.eb-tools button{ width:28px; height:28px; border:0; background:none; color:#fff; border-radius:6px; cursor:pointer; display:grid; place-items:center; }
.eb-tools button:hover{ background:#333; }
.eb-tools button[data-a="del"]:hover{ background:var(--bad); }
.eb-tools button:disabled{ opacity:.3; pointer-events:none; }
.eb-tools svg{ width:15px; height:15px; }
.eb [contenteditable]{ cursor:text; border-radius:4px; transition:background .15s, box-shadow .15s; }
.eb [contenteditable]:hover{ background:rgba(240,169,46,.07); }
.eb [contenteditable]:focus{ outline:none; background:rgba(240,169,46,.1); box-shadow:0 0 0 2px rgba(240,169,46,.5); }
.eb-add{ display:flex; align-items:center; justify-content:center; width:100%; height:16px; border:0; background:none; cursor:pointer; opacity:0; padding:0; position:relative; transition:opacity .15s, height .2s; font-family:var(--f-body); }
.mail-blocks:hover .eb-add{ opacity:.4; }
.eb-add:hover, .eb-add:focus-visible{ opacity:1 !important; height:34px; }
.eb-add::before{ content:""; position:absolute; left:10px; right:10px; top:50%; border-top:2px dashed #f0c46e; }
.eb-add span{ position:relative; display:inline-flex; align-items:center; gap:4px; background:#fff; padding:2px 10px; border:1.5px solid #f0c46e; border-radius:99px; color:#b87612; font-weight:800; font-size:12px; }
.eb-add svg{ width:13px; height:13px; }
.previewing .eb-add{ display:none; }
.palette{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.palette button, .eb-pop button{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 6px; border:1.5px solid var(--line-2); border-radius:12px; background:#fff; cursor:pointer; font-weight:700; font-size:12.5px; text-align:center; transition:border-color .15s, background .15s, transform .15s; }
.palette button:hover, .eb-pop button:hover{ border-color:#000; background:var(--ale-mist); transform:translateY(-1px); }
.palette svg, .eb-pop svg{ width:20px; height:20px; }
.eb-pop{ position:fixed; z-index:95; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 24px 60px rgba(0,0,0,.25); padding:8px; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; width:min(340px, calc(100vw - 20px)); animation:mdin .2s var(--ease); }
.em-bar{ display:flex; gap:8px; align-items:center; margin-bottom:10px; flex-wrap:wrap; }
.em-saved{ margin-left:auto; color:var(--muted); font-size:12.5px; }
.em-acts{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; align-items:center; }
.insp .lbl{ display:block; margin:12px 0 8px; }
.insp .card-h + .lbl{ margin-top:0; }
.insp .gal{ grid-template-columns:repeat(5,1fr); }
.tips{ margin:0; padding-left:18px; color:var(--muted); font-size:14px; display:grid; gap:6px; }
.fmt{ display:flex; gap:6px; flex-wrap:wrap; }
.fmt button{ min-width:40px; height:38px; padding:0 10px; border:1.5px solid var(--line-2); border-radius:9px; background:#fff; cursor:pointer; font-size:14px; font-weight:700; }
.fmt button:hover{ border-color:#000; background:var(--ale-mist); }
.up-btn{ margin-top:10px; width:100%; cursor:pointer; }
.ev-pick{ display:flex; align-items:center; gap:10px; padding:10px; border:1px solid var(--line); border-radius:12px; margin-bottom:6px; background:#fff; cursor:default; }
.ev-pick .t{ flex:1; min-width:0; }
.ev-pick .t b{ display:block; font-size:14px; }
.ev-pick small{ color:var(--muted); font-size:12.5px; }
.ev-pick .dt{ width:44px; text-align:center; border-radius:10px; background:var(--soft); padding:4px 0; flex:none; }
.ev-pick .dt b{ display:block; font-family:var(--f-display); font-size:20px; line-height:1; }
.ev-pick .dt small{ font-size:11px; font-weight:700; }
.ev-pick .mthumb{ width:44px; height:44px; flex:none; }
.em-side .seg2{ flex-wrap:wrap; }

/* tap list */
.taps-card{ margin-bottom:16px; }
.tap-chips{ display:flex; flex-wrap:wrap; gap:8px; padding:12px; border-radius:14px; background:var(--soft); min-height:56px; }
.tap-chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 6px 6px 12px; border-radius:99px; background:#000; color:var(--ale); font-weight:700; font-size:13.5px; cursor:grab; transition:transform .15s, box-shadow .15s, opacity .15s; user-select:none; }
.tap-chip.dragging{ opacity:.4; }
.tap-chip.over{ box-shadow:0 0 0 3px var(--ale); transform:scale(1.04); }
.tap-chip button{ width:24px; height:24px; border-radius:50%; border:0; background:#262626; color:#fff; cursor:pointer; display:grid; place-items:center; }
.tap-chip button:hover{ background:var(--bad); }
.tap-chip button svg{ width:13px; height:13px; }
.tap-add{ display:flex; gap:8px; margin-top:12px; }

/* pop-up manager */
.pop-card{ grid-column:1 / -1; }
.pop-grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:22px; align-items:start; }
.pop-grid .fld .sl + .in{ margin-top:6px; }
.pg-picks{ display:flex; flex-wrap:wrap; gap:6px; }
.pg input{ position:absolute; opacity:0; pointer-events:none; }
.pg span{ display:inline-flex; align-items:center; height:34px; padding:0 12px; border-radius:99px; border:1.5px solid var(--line-2); background:#fff; font-weight:700; font-size:13px; cursor:pointer; transition:all .15s; }
.pg input:checked + span{ background:#000; border-color:#000; color:#fff; }
.pg input:focus-visible + span{ outline:3px solid var(--ale); outline-offset:2px; }
.pop-pv{ background:linear-gradient(135deg, #1a1a1a, #3a3a3a); border-radius:16px; padding:26px 20px; min-height:230px; display:flex; flex-direction:column; justify-content:center; }
.pv-pop{ position:relative; background:#fff; border-radius:18px; padding:22px 20px 18px; box-shadow:0 20px 40px rgba(0,0,0,.35); border-top:5px solid var(--ale); transition:opacity .3s; }
.pv-pop.is-off{ opacity:.5; }
.pv-x{ position:absolute; top:10px; right:12px; width:26px; height:26px; border-radius:50%; background:var(--soft); display:grid; place-items:center; font-size:16px; }
.pv-pop h4{ font-family:var(--f-display); text-transform:uppercase; font-weight:800; font-size:28px; line-height:.95; margin:0 26px 8px 0; }
.pv-pop p{ margin:0 0 14px; color:#555; font-size:14px; white-space:pre-line; }
.pv-acts{ display:flex; gap:8px; flex-wrap:wrap; }
.pv-b1, .pv-b2{ padding:9px 16px; border-radius:99px; font-weight:700; font-size:13px; }
.pv-b1{ background:var(--ale); }
.pv-b2{ border:1.5px solid #000; }
.pop-pv .hint{ color:#cfcfcf; }

/* team */
.tabtags{ display:flex; flex-wrap:wrap; gap:4px; max-width:420px; }
.tabpick{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.tabpick .is-locked{ opacity:.7; }
@media (max-width:900px){ .pop-grid, .tabpick{ grid-template-columns:1fr; } .palette, .eb-pop{ grid-template-columns:repeat(3,1fr); } }
.ib.dim{ opacity:.35; }
.ib.dim:hover{ opacity:1; }