:root{
  --bg:#0f1115; --card:#1a1d24; --card2:#22262f; --line:#2c313c;
  --text:#eef1f6; --muted:#9aa3b2; --accent:#ff7a45; --accent2:#2ecc71;
  --radius:14px;
}
*{box-sizing:border-box}
.hidden{display:none !important}
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased;
}
b{color:var(--text)}

/* topbar */
.topbar{
  position:sticky; top:0; z-index:5; display:flex; align-items:center;
  justify-content:space-between; gap:12px; padding:14px 16px;
  background:linear-gradient(180deg,#171a21,rgba(23,26,33,.92));
  border-bottom:1px solid var(--line); backdrop-filter:blur(8px);
}
.r-name{font-weight:700; font-size:18px}
.t-no{color:var(--muted); font-size:13px}
.live{color:var(--accent2); font-size:13px; font-weight:600}

.btn-call{
  background:var(--accent); color:#1a1206; border:0; font-weight:700;
  padding:10px 14px; border-radius:999px; font-size:14px; cursor:pointer;
}
.btn-call:active{transform:scale(.97)}

/* липкая шапка гостя: имя+стол прокручиваются, табы прилипают */
.ghead{position:sticky; top:0; z-index:20; background:var(--bg); border-bottom:1px solid var(--line)}
.ghead .topbar{position:static; border-bottom:1px solid var(--line)}
.cat-tabs{display:flex; gap:8px; overflow-x:auto; padding:10px 16px; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.cat-tabs::-webkit-scrollbar{display:none}
.cat-tabs a{flex:0 0 auto; padding:7px 14px; border-radius:999px; background:var(--card2); color:var(--muted);
  text-decoration:none; font-size:14px; font-weight:600; white-space:nowrap; border:1px solid var(--line)}
.cat-tabs a.on{background:var(--accent); color:#1a1206; border-color:var(--accent)}
section.cat{scroll-margin-top:120px}

/* тосты — стопка сверху по центру */
.toast-host{position:fixed; top:12px; left:0; right:0; z-index:60; display:flex; flex-direction:column;
  align-items:center; gap:8px; pointer-events:none}
.toast{padding:12px 16px; border-radius:999px; font-size:14px; box-shadow:0 6px 24px rgba(0,0,0,.4);
  transition:opacity .3s, transform .3s}
.toast.ok{background:#1d3b2a; color:#7ef0b0; border:1px solid rgba(46,204,113,.4)}
.toast.out{opacity:0; transform:translateY(-8px)}

/* меню */
.menu{padding:12px 16px 120px; max-width:680px; margin:0 auto}
.cat h2{font-size:15px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:22px 0 10px}
.item{
  display:flex; gap:12px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:12px; margin-bottom:10px; transition:border-color .15s;
}
.item.active{border-color:var(--accent)}
.item-img{width:72px; height:72px; object-fit:cover; border-radius:10px; flex:0 0 auto}
.item-img.ph{display:flex; align-items:center; justify-content:center; font-size:30px; font-weight:800;
  color:var(--muted); background:linear-gradient(135deg,var(--card2),#2b313c)}
.item-body{flex:1; min-width:0}
.item-head{display:flex; justify-content:space-between; gap:8px; align-items:baseline}
.item-name{font-weight:600}
.item-price{color:var(--accent); font-weight:700; white-space:nowrap}
.item-desc{margin:4px 0 8px; color:var(--muted); font-size:13px; line-height:1.4}
/* добавление: кнопка "Добавить" -> счётчик */
.add-zone{margin-top:4px}
.add-btn{background:var(--accent); color:#1a1206; border:0; font-weight:700; padding:9px 18px;
  border-radius:999px; font-size:14px; cursor:pointer}
.add-btn:active{transform:scale(.97)}
.stepper{display:flex; align-items:center; gap:14px}
.qty-btn{
  width:34px; height:34px; border-radius:8px; border:1px solid var(--accent);
  background:transparent; color:var(--accent); font-size:20px; cursor:pointer; line-height:1;
}
.qty-btn:active{transform:scale(.95)}
.qty{min-width:18px; text-align:center; font-weight:700}
.empty{color:var(--muted); text-align:center; padding:40px 0}

/* FAB вызова официанта — всегда виден */
.fab-call{position:fixed; right:16px; bottom:20px; z-index:30; background:var(--card2); color:var(--text);
  border:1px solid var(--accent); font-weight:700; padding:12px 18px; border-radius:999px; font-size:14px;
  cursor:pointer; box-shadow:0 6px 24px rgba(0,0,0,.45); transition:bottom .2s}
.fab-call.lifted{bottom:92px}
.fab-call:disabled{opacity:.6}

/* экран после заказа */
.overlay{position:fixed; inset:0; z-index:70; background:rgba(8,9,12,.82); display:flex;
  align-items:center; justify-content:center; padding:24px}
.overlay.hidden{display:none}
.overlay-card{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:28px 24px;
  max-width:340px; width:100%; text-align:center}
.overlay-card h2{margin:6px 0}
.overlay-card .muted{color:var(--muted); font-size:14px}
.big-emoji{font-size:52px; line-height:1}
.done-lines{margin:14px 0; text-align:left}
.done-lines .cart-line{border-bottom:1px solid var(--line); padding:6px 0}
.muted{color:var(--muted)}

/* корзина */
.cart-bar{position:fixed; left:0; right:0; bottom:0; z-index:10; padding:12px 16px;
  background:linear-gradient(0deg,#0f1115,rgba(15,17,21,.9)); border-top:1px solid var(--line)}
.cart-bar.hidden{display:none}
.cart-summary{width:100%; max-width:680px; margin:0 auto; display:flex; justify-content:space-between;
  background:var(--card2); color:var(--text); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; font-weight:600; cursor:pointer}
.cart-sheet{max-width:680px; margin:10px auto 0; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:14px}
.cart-sheet.hidden{display:none}
.cart-cta{color:var(--accent2); font-weight:700}
.cart-line{display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--line); font-size:14px}
.cart-sheet textarea{width:100%; margin:12px 0; background:var(--card2); color:var(--text);
  border:1px solid var(--line); border-radius:10px; padding:10px; font:inherit; resize:vertical}
.btn-order{width:100%; background:var(--accent2); color:#062013; border:0; font-weight:800;
  padding:14px; border-radius:var(--radius); font-size:16px; cursor:pointer}

/* админ-лента */
.feed{max-width:760px; margin:0 auto; padding:16px}
.calls{display:flex; flex-direction:column; gap:8px; margin-bottom:16px}
.call-card{display:flex; justify-content:space-between; align-items:center;
  background:rgba(255,122,69,.12); border:1px solid var(--accent); border-radius:var(--radius); padding:12px 14px}
.orders{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px}
.order-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px; border-left:4px solid var(--muted)}
.order-card.st-new{border-left-color:var(--accent)}
.order-card.st-accepted{border-left-color:#f4c542}
.order-card.st-served{border-left-color:var(--accent2)}
.order-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:4px}
.order-ago{color:var(--muted); font-size:12px; margin-bottom:8px}
.status-tag{font-size:11px; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); padding:2px 8px; border-radius:999px}
.order-items{list-style:none; margin:0; padding:0}
.order-items li{display:flex; justify-content:space-between; flex-wrap:wrap; padding:4px 0; font-size:14px; border-bottom:1px dashed var(--line)}
.oi-comment{flex-basis:100%; color:var(--muted); font-size:12px}
.order-comment{background:var(--card2); border-radius:8px; padding:8px 10px; font-size:13px; margin:8px 0}
.order-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.btn-mini{background:var(--accent); color:#1a1206; border:0; font-weight:700; padding:8px 12px; border-radius:8px; cursor:pointer; font-size:13px}
.btn-mini.ok{background:var(--accent2); color:#062013}
.btn-mini.ghost{background:transparent; color:var(--muted); border:1px solid var(--line)}
form{margin:0}

/* навигация админки */
.adminnav{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.adminnav a{color:var(--muted); text-decoration:none; padding:8px 12px; border-radius:8px; font-size:14px; font-weight:600}
.adminnav a.on{background:var(--card2); color:var(--text)}
.adminnav a:hover{color:var(--text)}
.adminnav a.logout{color:#e06a6a}

/* логин */
.login-wrap{min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:20px}
.login-card{width:100%; max-width:340px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:28px 24px}
.login-card h1{margin:0; font-size:22px}
.login-card .sub{margin:4px 0 18px; color:var(--muted); font-size:14px}
.login-card input{width:100%; margin-bottom:12px; background:var(--card2); color:var(--text); border:1px solid var(--line); border-radius:10px; padding:12px 14px; font:inherit}
.login-card button{width:100%; background:var(--accent); color:#1a1206; border:0; font-weight:800; padding:13px; border-radius:10px; font-size:15px; cursor:pointer}
.login-err{background:rgba(224,106,106,.14); color:#e06a6a; border:1px solid rgba(224,106,106,.3); padding:10px 12px; border-radius:10px; font-size:13px; margin-bottom:14px}

/* управление */
.manage{max-width:760px; margin:0 auto; padding:16px 16px 80px}
.row-form{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px}
.row-form input{flex:1; min-width:120px; background:var(--card2); color:var(--text); border:1px solid var(--line); border-radius:10px; padding:10px 12px; font:inherit}
.row-form .price-in{flex:0 0 110px}
.m-cat{margin-bottom:26px}
.m-cat-head{display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); padding-bottom:8px; margin-bottom:12px}
.m-cat-head h2{font-size:17px; margin:0}
.m-item{background:var(--card); border:1px solid var(--line); border-radius:12px 12px 0 0; border-bottom:0; padding:12px; display:flex; flex-direction:column; gap:8px}
.m-item.off{opacity:.55}
.m-item-main{display:flex; gap:8px}
.m-item-main input[name=name]{flex:1}
.m-item input, .m-item select{background:var(--card2); color:var(--text); border:1px solid var(--line); border-radius:8px; padding:9px 11px; font:inherit}
.m-item .price-in{flex:0 0 120px}
.m-item-foot{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.m-item-foot select{flex:1; min-width:120px}
.chk{display:flex; gap:6px; align-items:center; color:var(--muted); font-size:13px; white-space:nowrap}
.m-item-actions{display:flex; gap:8px; background:var(--card); border:1px solid var(--line); border-top:1px dashed var(--line); border-radius:0 0 12px 12px; padding:8px 12px; margin-bottom:10px}
.add-item{margin-top:6px}

/* столы / qr */
.tables-top{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:18px}
.tables-top .row-form{flex:1; margin:0}
.print-link{text-decoration:none; display:inline-block; white-space:nowrap}
.qr-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px}
.qr-card{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px; text-align:center; display:flex; flex-direction:column; gap:8px; align-items:center}
.qr-no{font-weight:700}
.qr-img{width:100%; max-width:150px; height:auto; background:#fff; border-radius:8px; padding:6px}
.qr-link{color:var(--accent); font-size:13px; text-decoration:none}