/* UI parity slice — demo look (space) on the real backend. Tokens copied
   from the demo export; API contracts unchanged. */
:root{
  --bg1:#7a3f10; --bg2:#46220a; --card:#63350d; --card2:#71400f;
  --sheet1:#8a4a12; --sheet2:#4c2708; --line:rgba(255,196,128,.16);
  --txt:#fff8ef; --muted:#eccfa8; --faint:#cfa06c; --accent:#ff8a1e;
  --accent2:#ffb35c; --accent-soft:#f5a83d; --cream:#fff3df; --ink:#3a1c04;
  --green:#7bc96f; --red:#ff7a6b; --radius:26px;
  --shadow:0 10px 28px rgba(20,8,0,.45);
}
*{box-sizing:border-box}
html{overscroll-behavior:none}
body{
  margin:0; color:var(--txt);
  font-family:Vazirmatn,Tahoma,'Segoe UI',sans-serif;
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(154,85,24,.55), transparent 60%),
    linear-gradient(180deg,var(--bg1),var(--bg2) 55%,#331a05);
  background-attachment:fixed;
  min-height:100vh; overscroll-behavior:none;
}
body.sheet-open{overflow:hidden}
a{color:var(--accent2)}
button,input,select,textarea{font:inherit}
input,select,textarea{
  width:100%; background:rgba(0,0,0,.3); border:1px solid var(--line);
  color:var(--txt); border-radius:13px; padding:11px 13px; font-size:16px; outline:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
button{
  cursor:pointer; border:0; border-radius:14px; padding:11px 16px;
  background:linear-gradient(180deg,var(--accent2),var(--accent));
  color:var(--ink); font-weight:800;
}
button.ghost{background:rgba(0,0,0,.3); color:var(--txt); border:1px solid var(--line)}
button.small{padding:7px 12px; font-size:13.5px}
button:disabled{opacity:.5; cursor:default}
h1,h2,h3{margin:0}

/* shell */
.topbar{
  position:relative; z-index:30; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px; max-width:520px; margin:0 auto;
  background:linear-gradient(180deg,rgba(64,30,8,.97),rgba(64,30,8,.9));
  border-bottom:1px solid var(--line);
}
.topbar .brand{font-weight:900; font-size:18px; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.topbar .brand small{display:block; font-size:12px; color:var(--muted); font-weight:600}
.topbar .logo{width:38px; height:38px; border-radius:12px; object-fit:cover; background:var(--card2); flex:none}
.langbar{display:flex; gap:4px; flex:none}
.tb-side{display:flex; gap:8px; align-items:center; flex:none}
.tb-brand{position:absolute; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:8px; max-width:56%}
.tb-brand .brand{text-align:center}
.langbar .lang-drop{position:relative; flex:none}
.langbar .lang-drop-btn{display:flex; align-items:center; gap:4px; padding:0 13px; height:44px; background:rgba(0,0,0,.3); color:var(--txt); font-size:13.5px; font-weight:800; border:1px solid var(--line); border-radius:15px}
.langbar .lang-menu{position:absolute; top:calc(100% + 6px); inset-inline-start:0; box-sizing:border-box; max-width:calc(100vw - 28px); display:none; flex-direction:column; gap:2px; min-width:132px; padding:6px; background:var(--card2); border:1px solid var(--line); border-radius:14px; z-index:60; box-shadow:0 10px 30px rgba(0,0,0,.45)}
.langbar .lang-menu.open{display:flex}
.langbar .lang-menu button{padding:11px 12px; text-align:start; background:transparent; color:var(--txt); font-size:15px; font-weight:700; border:0; border-radius:10px}
.langbar .lang-menu button.on{background:rgba(255,138,30,.16); color:var(--accent2)}
.insta-btn svg{width:22px; height:22px}
.loc-btn{flex:none; display:flex; align-items:center; color:var(--accent2)}
.loc-btn svg{width:24px; height:24px}
.icon-btn{
  width:44px; height:44px; border-radius:15px; background:rgba(0,0,0,.32);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  position:relative; flex:none; font-size:20px; color:var(--txt);
}
.icon-btn.app-dl{width:auto; padding:0 13px; gap:6px; font-size:13.5px; font-weight:800; color:var(--accent2)}
.wrap{max-width:520px; margin:0 auto; padding:14px 14px 120px}
.card{
  background:linear-gradient(180deg,var(--card2),var(--card));
  border:1px solid var(--line); border-radius:var(--radius);
  padding:15px 16px; margin-bottom:12px; box-shadow:var(--shadow);
}
.muted{color:var(--muted); font-size:14px; line-height:1.8}
.price{color:var(--accent2); font-weight:900}
.tag{display:inline-block; font-size:12px; padding:3px 9px; border-radius:99px; background:rgba(0,0,0,.3); border:1px solid var(--line)}
.tag.new{background:var(--accent); color:var(--ink); border-color:var(--accent)}
.tag.ok{background:rgba(123,201,111,.18); color:#a5e39b; border-color:var(--green)}
.formgrid{display:grid; gap:8px}
.fld label{display:block; font-size:13px; color:var(--muted); margin:12px 0 5px; font-weight:700}
table.list{width:100%; border-collapse:collapse; font-size:14px}
table.list td,table.list th{border-bottom:1px solid var(--line); padding:8px 4px; text-align:start}
.row{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line)}

/* PWA banner — white push-notification style */
#pwaBanner{
  position:fixed; top:calc(10px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%);
  width:min(492px,calc(100% - 20px)); z-index:55; display:flex; align-items:flex-start; gap:11px;
  background:#fff; color:#1c1c1e; border-radius:22px; padding:12px; text-align:start;
  box-shadow:0 14px 34px rgba(15,5,0,.34); animation:notifDrop .62s cubic-bezier(.21,1.32,.36,1) .3s backwards;
  transition:transform .45s ease, opacity .45s ease;
}
@keyframes notifDrop{0%{opacity:0; transform:translateX(-50%) translateY(-135%)}55%{opacity:1; transform:translateX(-50%) translateY(7px)}78%{transform:translateX(-50%) translateY(-3px)}100%{opacity:1; transform:translateX(-50%) translateY(0)}}
#pwaBanner.fly{transform:translateX(calc(-50% + var(--fly-x, 0px))) translateY(var(--fly-y, -140%)) scale(var(--fly-s, 1)); opacity:0}
#pwaBanner .pwa-ic{width:40px; height:40px; border-radius:11px; flex:none; color:#3a1c04; display:flex; align-items:center; justify-content:center; font-size:21px}
#pwaBanner .pwa-txt{flex:1; min-width:0}
#pwaBanner .pwa-meta{display:flex; justify-content:space-between; gap:8px; font-size:11.5px; color:#8e8e93}
#pwaBanner .pwa-txt b{font-size:14.5px; display:block; color:#1c1c1e; line-height:1.45}
#pwaBanner .pwa-desc{font-size:12.5px; color:#5a5a5e; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#pwaBanner .pwa-actions{display:flex; align-items:center; gap:6px; flex:none}
#pwaBanner .pwa-install{background:linear-gradient(180deg,#2f9bff,#0a6fe0); color:#fff; font-weight:800; border-radius:999px; padding:8px 14px; font-size:13.5px; box-shadow:0 4px 10px rgba(20,110,230,.35)}
#pwaBanner .pwa-x{color:#8e8e93; background:#f2f2f7; width:26px; height:26px; border-radius:50%; font-size:17px; padding:0; display:flex; align-items:center; justify-content:center}

/* customer header inside menu */
.hdr-row{display:flex; align-items:center; gap:10px; padding:6px 2px 4px}
.hdr-name{flex:1; min-width:0}
.hdr-name h1{font-size:20px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hdr-name .sub{font-size:12.5px; color:var(--muted)}

/* order bar — fixed at top, numbers only change (no rebuild while open) */
#orderBar{
  position:fixed; top:calc(8px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%);
  width:min(492px,calc(100% - 20px)); z-index:44; padding:12px 14px; border-radius:20px;
  display:flex; align-items:center; gap:12px; cursor:pointer;
  background:linear-gradient(90deg,#8a4a12,#a35a17); border:1px solid rgba(255,200,140,.35);
  box-shadow:0 12px 26px rgba(20,8,0,.4); animation:obDrop .45s cubic-bezier(.21,1.25,.36,1);
}
@keyframes obDrop{0%{opacity:0; transform:translateX(-50%) translateY(-120%)}60%{opacity:1; transform:translateX(-50%) translateY(5px)}100%{opacity:1; transform:translateX(-50%) translateY(0)}}
#orderBar .ob-info{flex:1; min-width:0}
#orderBar .ob-info b{font-size:15.5px}
#orderBar .ob-info span{display:block; font-size:12.5px; color:#ffd9a8}
#orderBar .ob-btn{background:var(--cream); color:var(--ink); font-weight:900; border-radius:14px; padding:11px 16px; font-size:15px; flex:none}
body.has-ob .cats-bar{top:70px}
body.has-ob .cat-sec{scroll-margin-top:146px}

/* search scrolls away; categories alone stay sticky */
.search-bar{display:flex; align-items:center; gap:10px; padding:0 14px; background:var(--card2); border:1.5px solid var(--accent); border-radius:999px; margin:0}
.search-band{margin:-14px -14px 0; padding:14px 14px 14px; background:linear-gradient(180deg,rgba(64,30,8,.97),rgba(64,30,8,.9))}
.search-bar input{flex:1; background:none; border:none; color:var(--txt); padding:12px 0; font-size:16px; min-width:0}
.search-bar input::placeholder{color:var(--faint)}
.search-bar .search-ic, .search-bar .search-filter{display:flex; align-items:center; color:var(--txt); flex:none}
.search-bar .search-ic svg, .search-bar .search-filter svg{width:21px; height:21px}
.search-bar .search-filter{background:none; border:none; padding:6px 0; cursor:pointer}
.search-bar .search-div{width:1px; align-self:stretch; margin:9px 0; background:rgba(255,255,255,.22); flex:none}
.cats-bar{
  position:sticky; top:0; z-index:25; margin:0 -14px; padding:10px 14px 3px;
  background:linear-gradient(180deg,rgba(64,30,8,.97),rgba(64,30,8,.94));
  border-bottom:1px solid var(--line); box-shadow:0 10px 22px rgba(20,8,0,.28);
}
.cats{display:flex; gap:8px; overflow-x:auto; padding:2px 2px 8px; scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
.cat-btn{flex:none; display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:999px; background:rgba(0,0,0,.3); border:1px solid var(--line); color:var(--muted); font-size:14.5px; font-weight:700}
.cat-btn img{width:16px; height:16px; border-radius:4px; object-fit:cover}
.cat-btn.on{background:linear-gradient(180deg,var(--accent2),var(--accent)); color:var(--ink); border-color:transparent; box-shadow:0 6px 16px rgba(255,138,30,.35)}
.cat-sec{scroll-margin-top:76px}
.cat-sec-title{font-size:17.5px; font-weight:800; margin:18px 2px 2px; display:flex; align-items:center; gap:7px}
.cat-sec-title img{width:19px; height:19px; border-radius:5px; object-fit:cover}
.cat-sec.on-sec .cat-sec-title{color:var(--accent2)}

/* dish cards — compact */
.dish-list{display:flex; flex-direction:column; gap:10px; padding-top:6px}
.dish{display:flex; gap:0; overflow:hidden; padding:0; cursor:pointer; border-radius:20px;
  background:linear-gradient(180deg,var(--card2),var(--card)); border:1px solid var(--line); box-shadow:var(--shadow);
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none}
.sheet-head h3{user-select:none; -webkit-user-select:none; -webkit-touch-callout:none}
.dish .d-img{width:92px; min-height:92px; flex:none; position:relative; background:rgba(0,0,0,.25)}
.dish .d-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.dish .d-body{flex:1; min-width:0; padding:9px 12px; display:flex; flex-direction:column; justify-content:center}
.dish h3{font-size:16.5px; font-weight:800; display:flex; align-items:center; gap:6px; flex-wrap:wrap; line-height:1.35}
.dish .d-rate{font-size:12px; font-weight:800; color:var(--accent2); background:rgba(255,138,30,.15); border:1px solid rgba(255,138,30,.35); padding:1px 8px; border-radius:999px}
.dish .d-desc{color:var(--muted); font-size:12.5px; margin-top:1px; line-height:1.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dish .d-foot{margin-top:5px; display:flex; align-items:center; justify-content:space-between; gap:8px}
.dish .d-foot .price{font-size:15px}
.dish.unavail{opacity:.55}
.dish.unavail .d-img img{filter:grayscale(.8)}
.unavail-tag{position:absolute; bottom:8px; inset-inline-start:8px; background:rgba(20,8,0,.85); color:#ffb3ab; font-size:12px; font-weight:800; padding:4px 10px; border-radius:999px; z-index:2}
.stepper{display:flex; align-items:center; gap:8px}
.stepper button{width:34px; height:34px; border-radius:50%; font-size:20px; font-weight:900; line-height:1; display:flex; align-items:center; justify-content:center; padding:0}
.stepper button:active{transform:scale(.92)}
.stepper .plus{background:linear-gradient(180deg,var(--accent2),var(--accent)); color:var(--ink); box-shadow:0 4px 10px rgba(255,138,30,.35)}
.stepper .minus{background:var(--cream); color:var(--ink)}
.stepper .qty{font-size:16px; font-weight:800; min-width:18px; text-align:center}

/* bottom nav — floating dark pill, RTL order: account, orders, menu (centre), assistant, waiter.
   Selection changes COLOUR ONLY, never size or position: every circle is always 52px,
   the selected one just turns orange (dark icon on it, orange label below it). */
#bottomNav{
  position:fixed; left:16px; right:16px; bottom:12px; z-index:40; max-width:520px; margin-inline:auto;
  background:linear-gradient(180deg,rgba(46,21,4,.94),rgba(34,15,2,.98)); backdrop-filter:blur(10px);
  border:1px solid rgba(255,200,140,.16); border-radius:24px; display:flex; overflow:visible;
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  box-shadow:0 14px 34px rgba(20,8,0,.5);
}
#bottomNav button{flex:1; display:flex; flex-direction:column; align-items:center; padding:0 2px;
  color:#fff8ef; font-size:11px; font-weight:700; border-radius:14px; position:relative; background:none; line-height:1.35}
#bottomNav button .nb-ic{position:relative; width:46px; height:46px; border-radius:50%; flex:none;
  background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.09);
  display:flex; align-items:center; justify-content:center; color:#fff}
#bottomNav button .nb-ic svg{width:24px; height:24px; filter:drop-shadow(0 0 4px rgba(255,255,255,.55))}
#bottomNav button .nb-lb{margin-top:3px; font-size:11px; font-weight:700; white-space:nowrap}
#bottomNav button .nb-badge{position:absolute; top:-4px; inset-inline-end:-6px; background:var(--red); color:#fff;
  font-size:10.5px; font-weight:800; min-width:18px; height:18px; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 4px; z-index:2}
/* selected option: same 46px circle, only its colours change */
#bottomNav button.on .nb-ic{
  background:radial-gradient(circle at 50% 28%, #ffc46b, #ff8a1e 62%, #f97316);
  border-color:transparent;
  box-shadow:0 6px 18px rgba(255,138,30,.45); color:var(--ink)}
#bottomNav button.on .nb-ic svg{filter:none}
#bottomNav button.on .nb-lb{color:var(--accent2)}

/* sheets — one engine for all */
.sheet-wrap{position:fixed; inset:0; z-index:60; background:rgba(15,5,0,.55); backdrop-filter:blur(3px); display:flex; align-items:flex-end; justify-content:center; overscroll-behavior:none}
.sheet{
  width:100%; max-width:520px; max-height:92vh; overflow-y:auto; border-radius:30px 30px 0 0;
  background:linear-gradient(180deg,var(--sheet1),var(--sheet2) 45%); border:1px solid var(--line); border-bottom:none;
  padding:14px 18px calc(20px + env(safe-area-inset-bottom)); animation:sheetUp .3s ease; overscroll-behavior:contain;
  will-change:transform;
}
@keyframes sheetUp{from{transform:translateY(40px); opacity:.4}to{transform:none; opacity:1}}
.sheet.no-anim{animation:none}
.sheet.dish-sheet{height:67vh; height:67dvh; max-height:67vh; max-height:67dvh}
.sheet.dragging{transition:none !important}
.sheet.snapping{transition:transform .22s ease}
.sheet .grab{width:44px; height:5px; border-radius:99px; background:rgba(255,220,180,.4); margin:0 auto 12px; position:relative; touch-action:none; cursor:grab}
.sheet .grab::before{content:''; position:absolute; inset:-11px -70px}
.sheet-head{touch-action:none; cursor:grab; display:flex; align-items:center; justify-content:space-between; margin-bottom:6px}
.sheet-head h3{font-size:19px; font-weight:900}
.dish-sheet-drag{touch-action:none; cursor:grab; -webkit-user-drag:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none}
.dish-sheet-img{width:100%; height:250px; object-fit:cover; border-radius:22px; display:block}
.sheet .row{border-bottom:1px solid var(--line)}
.cart-row{display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px dashed var(--line)}
.cart-row img{width:52px; height:52px; border-radius:12px; object-fit:cover; flex:none; background:rgba(0,0,0,.25)}
.cart-row .cr-info{flex:1; min-width:0}
.cart-row .cr-info b{display:block; font-size:14.5px}
.cart-row .cr-info span{font-size:13px}

/* welcome overlay */
#welcomeOverlay{position:fixed; inset:0; z-index:65; background:rgba(20,8,0,.45); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); display:flex; align-items:center; justify-content:center; padding:22px; animation:fadeIn .3s ease; transition:opacity .3s ease}
#welcomeOverlay.bye{opacity:0}
.welcome-pop{max-width:400px; width:100%; text-align:center; padding:30px 22px; animation:popIn .38s cubic-bezier(.2,1.3,.4,1)}
@keyframes popIn{from{opacity:0; transform:scale(.86) translateY(16px)}to{opacity:1; transform:none}}
@keyframes fadeIn{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
.welcome-pop .w-emoji{font-size:42px}
.welcome-pop h2{font-size:23px; font-weight:900; margin:10px 0 8px}
.welcome-pop p{color:var(--muted); line-height:1.9; margin:0 0 16px}
/* language popup — single column */
.lang-popup{max-width:400px; width:100%; text-align:center; padding:26px 22px}
.lang-col{display:flex; flex-direction:column; gap:10px; margin-top:18px}
.lang-col .lang-btn{flex-direction:row; justify-content:space-between; align-items:center; padding:15px 18px; background:rgba(0,0,0,.3); border:1px solid var(--line); border-radius:20px; color:var(--txt); font-size:18px; font-weight:800; display:flex}
.lang-col .lang-btn.on{border-color:var(--accent); background:rgba(255,138,30,.16)}

/* confirmation popup (waiter call) */
#confirmOverlay{position:fixed; inset:0; z-index:68; background:rgba(20,8,0,.45); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); display:flex; align-items:center; justify-content:center; padding:22px; animation:fadeIn .3s ease}
.confirm-pop{max-width:400px; width:100%; text-align:center; padding:30px 22px; animation:popIn .38s cubic-bezier(.2,1.3,.4,1)}
.confirm-pop .w-emoji{font-size:42px}
.confirm-pop h2{font-size:21px; font-weight:900; margin:10px 0 8px}
.confirm-pop p{color:var(--muted); line-height:1.9; margin:0 0 16px}
.confirm-actions{display:flex; gap:10px; justify-content:center}
.confirm-yes{background:linear-gradient(180deg,#ff8c1a,#e56d00); color:#fff; font-weight:900; border-radius:14px; padding:13px 20px; font-size:15.5px; flex:1}
.confirm-no{background:rgba(255,255,255,.08); color:var(--txt); font-weight:800; border-radius:14px; padding:13px 20px; font-size:15.5px; flex:1; border:1px solid var(--line)}

/* call overlay */
#callOverlay{position:fixed; inset:0; z-index:70; background:linear-gradient(180deg,#5a2c08,#331a05); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:30px; text-align:center}
#callOverlay .call-ic{font-size:64px}
#callOverlay .call-timer{font-size:42px; font-weight:900; letter-spacing:1px}
#callOverlay .call-end{background:var(--red); color:#fff; border-radius:999px; padding:14px 34px; font-size:17px}

/* tracking */
.track-banner{border-radius:18px; padding:13px 15px; margin-bottom:12px; background:rgba(255,138,30,.16); border:1px solid rgba(255,138,30,.45); font-weight:800; animation:blink 1.6s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.65}}
.timeline{display:flex; flex-direction:column; margin:12px 0}
.tl-step{display:flex; gap:12px; position:relative; padding-bottom:19px}
.tl-step:last-child{padding-bottom:2px}
.tl-step::before{content:''; position:absolute; top:32px; bottom:1px; inset-inline-start:14.5px; width:3px; border-radius:99px; background:rgba(255,255,255,.13)}
.tl-step .dot{width:30px; height:30px; border-radius:50%; background:rgba(0,0,0,.3); border:2px solid var(--line); flex:none; display:flex; align-items:center; justify-content:center; font-size:14px; z-index:1}
.tl-step.done .dot{background:var(--green); border-color:var(--green); color:#123}
.tl-step.now .dot{background:var(--accent); border-color:var(--accent); color:var(--ink)}
.tl-step.dim{color:var(--muted)}
.tl-step b{display:block}
.tl-step span{font-size:13px; color:var(--muted)}
.ti-row{display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:1px dashed var(--line); font-size:14px}

/* chat */
.chatmsg{padding:9px 13px; border-radius:14px; max-width:85%; background:rgba(0,0,0,.3); border:1px solid var(--line); line-height:1.7}
.chatmsg.customer{margin-left:auto; background:linear-gradient(180deg,var(--accent2),var(--accent)); color:var(--ink); border-color:transparent}
.chatmsg.assistant,.chatmsg.chef{margin-right:auto}
.chat-input-row{display:flex; gap:8px; position:sticky; bottom:0; z-index:5; background:rgba(52,24,5,.96); padding:10px; border-radius:20px; border:1px solid var(--line); margin-top:12px}
.chat-input-row input{flex:1}

/* panels */
.tabs{display:flex; gap:8px; overflow-x:auto; margin-bottom:12px; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none; padding:9px 16px; border-radius:999px; background:rgba(0,0,0,.3); border:1px solid var(--line); color:var(--muted); font-size:14px; font-weight:700}
.tabs button.on{background:linear-gradient(180deg,var(--accent2),var(--accent)); color:var(--ink); border-color:transparent}
.status-bar{display:flex; gap:6px; margin:10px 0}
.status-bar .seg{flex:1; height:8px; border-radius:99px; background:rgba(255,255,255,.12)}
.status-bar .seg.done{background:var(--green)}
.status-bar .seg.now{background:var(--accent)}
.status-bar .seg-labels{display:flex; gap:6px; font-size:11px; color:var(--muted)}
.status-bar .seg-labels span{flex:1; text-align:center}
.unread-banner{display:flex; gap:11px; align-items:flex-start; background:rgba(255,122,107,.14); border:1px solid rgba(255,122,107,.45); border-radius:18px; padding:13px 14px; margin-bottom:12px}
.unread-banner .ub-dot{width:11px; height:11px; border-radius:50%; background:var(--red); flex:none; margin-top:5px; animation:blink 1.6s infinite}
.thread-card{cursor:pointer; position:relative}
.thread-card .ub-dot{position:absolute; top:14px; inset-inline-end:14px; width:10px; height:10px; border-radius:50%; background:var(--red)}
.qrbox{display:flex; justify-content:center; margin:12px 0}
.qrbox svg{max-width:280px; width:100%; height:auto; background:#fff; border-radius:12px; padding:8px}
.receipt{color:#000; font-size:14px}
.receipt h2,.receipt h3{color:#000; text-align:center}
#printArea{display:none}
@media print{
  body.printing > *:not(#printArea){display:none !important}
  body.printing #printArea{display:block !important}
}
.toast{
  position:fixed; left:50%; bottom:110px; transform:translateX(-50%) translateY(20px); z-index:90;
  background:var(--card2); border:1px solid var(--line); border-radius:14px; padding:12px 16px; text-align:center; width:max-content; max-width:min(480px, calc(100% - 32px)); overflow-wrap:break-word;
}
.star-pick{display:flex; gap:6px; font-size:30px}
.star-pick button{background:none; border:0; padding:2px; color:var(--faint); font-size:30px}
.star-pick button.lit{color:var(--accent2)}
.icon-pick{display:flex; gap:8px; flex-wrap:wrap}
.icon-pick-btn{width:44px; height:44px; border-radius:13px; background:rgba(0,0,0,.3); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:20px; padding:0}
.icon-pick-btn.on{background:linear-gradient(180deg,var(--accent2),var(--accent)); color:var(--ink); border-color:transparent}
.icon-pick-btn img{width:22px; height:22px; object-fit:cover; border-radius:5px}
.stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.stat-grid .stat{text-align:center}
.stat-grid .stat b{font-size:24px; display:block; color:var(--accent2)}
.stat-grid .stat span{font-size:13px; color:var(--muted)}
.view{animation:fadeIn .35s ease}
@media(min-width:900px){
  .wrap,#bottomNav,.topbar{max-width:920px}
  .sheet{max-width:640px}
  .dish-list{display:grid; grid-template-columns:1fr 1fr; gap:12px}
  .stat-grid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:380px){
  .hdr-name h1{font-size:18px}
  .dish .d-img{width:80px; min-height:80px}
  .stepper button{width:32px; height:32px; font-size:18px}
  #pwaBanner .pwa-desc{display:none}
}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.01ms !important; transition-duration:.01ms !important} }