/* Общие стили — перенесены из прототипа v10 (дизайн-система ГрандПирог). Владелец — T0. */
/* Дизайн-система ГрандПирог: цвета, типографика и скругления с grandpie.ru */
:root{
  /* фирменные токены */
  --red-600:#cc0033; --crimson-700:#a61d3d; --crimson-800:#7f1830;
  --green-500:#7ca877; --green-600:#66a55f; --yellow-400:#feb832;
  --cream-50:#fef5e7; --ink-brown:#604848;
  --radius:5px; --font-sans:"PT Sans", Arial, sans-serif;

  /* светлая тема — основная, как на сайте */
  --bg:#ffffff; --panel:#f6f6f6; --head:#eeeeee; --top:#fef5e7;
  --card:#ffffff; --ink:#333333; --sub:#898989; --line:#cccccc;
  --cream:#333333; --dim:#6b6b6b; --mute:#898989;
  --halar:#feb832; --gandpie:#a61d3d; --tg:#3A8FD0; --mail:#66a55f;
  --calm:#66a55f; --warm:#feb832; --hot:#e07b1f; --late:#cc0033; --ok:#66a55f;
  --edge:#cccccc;
  --shadow:0 1px 3px rgba(51,51,51,.08);
  --accent:#cc0033; --accent-ink:#ffffff;
  --field:#ffffff; --inset:#f6f6f6;
}
html[data-theme="dark"]{
  --bg:#1A1416; --panel:#241C1F; --head:#2E2428; --top:#160F12;
  --card:#2B2226; --ink:#F2E9E4; --sub:#B9A9A3; --line:#43353A;
  --cream:#F2E9E4; --dim:#B9A9A3; --mute:#8A7A7F;
  --halar:#feb832; --gandpie:#C23455; --tg:#5BA6E0; --mail:#7ca877;
  --calm:#C8A24A; --warm:#feb832; --hot:#F08A3C; --late:#FF5876; --ok:#7ca877;
  --edge:rgba(255,255,255,.09);
  --shadow:none;
  --accent:#cc0033; --accent-ink:#ffffff;
  --field:#1F1619; --inset:#352A2E;
}
/* светлая тема по умолчанию: карточки с тонкой обводкой и мягкой тенью */
.card,.tcard,.panelbox,.stat,.w,.qstat,.col{box-shadow:var(--shadow); border:1px solid var(--line)}
.rolebar{background:var(--cream-50)}
.tab{background:#f6f6f6}
.dl{background:#f6f6f6}
.titem{background:#f6f6f6}
.heat{background:#e3e3e3}
.rtab.on,.tbtn.primary,.step.on,.viewsw button.on,.admtabs button.on,.fbtn.on,.addbtn,
.go2,.solid,.bigbtn{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.step.on b{color:var(--accent-ink)}
.bigbtn.ghost{background:transparent; color:var(--sub); border:1px solid var(--line)}
.bigbtn.warn{background:var(--yellow-400); color:#3B2708; border-color:var(--yellow-400)}
.ptt{background:var(--crimson-700); color:#fff}
.ptt.rec{background:var(--late); color:#fff}
.bar1 .tr{background:#e3e3e3}
.toggle{background:#cfcfcf}
.setrow input,.setrow select,.vsel,.dates input[type=date]{background:var(--field); color:var(--ink); border-color:var(--line)}
.ov{background:rgba(51,51,51,.5)}
#gate .go{background:var(--accent); color:var(--accent-ink)}
.grid::-webkit-scrollbar-thumb,.colbody::-webkit-scrollbar-thumb{background:#cfcfcf}

/* тёмная тема — для вечерней смены */
html[data-theme="dark"] .card,html[data-theme="dark"] .tcard,html[data-theme="dark"] .panelbox,
html[data-theme="dark"] .stat,html[data-theme="dark"] .w,html[data-theme="dark"] .qstat,
html[data-theme="dark"] .col{box-shadow:none; border:1px solid var(--edge)}
html[data-theme="dark"] .rolebar{background:#120C0E}
html[data-theme="dark"] .tab{background:#1A1416}

html[data-theme="dark"] .heat{background:#473A3E}
html[data-theme="dark"] .bar1 .tr{background:#352A2E}
html[data-theme="dark"] .toggle{background:#43353A}
html[data-theme="dark"] .toggle.on{background:var(--ok)}

html[data-theme="dark"] .ov{background:rgba(10,6,8,.8)}
html[data-theme="dark"] .grid::-webkit-scrollbar-thumb,
html[data-theme="dark"] .colbody::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14)}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font-sans);
  background:var(--bg); color:var(--cream); -webkit-font-smoothing:antialiased; overflow:hidden;
  padding-top:env(safe-area-inset-top,0)}
.tnum{font-variant-numeric:tabular-nums}
button{font:inherit; cursor:pointer; border:0}
:focus-visible{outline:3px solid #7FB0FF; outline-offset:2px}

#gate{position:fixed; inset:0; z-index:60; background:var(--bg); display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:24px}
#gate .tag{font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim)}
#gate h1{font-size:clamp(26px,4vw,42px); font-weight:800; max-width:18ch; line-height:1.12; margin-top:10px}
#gate p{color:var(--dim); max-width:48ch; line-height:1.55; margin-top:14px}
#gate .go{margin-top:30px; background:var(--accent); color:var(--accent-ink); font-size:19px; font-weight:800;
  padding:17px 40px; border-radius:var(--radius)}
#gate .note{margin-top:22px; font-size:13px; color:var(--mute); max-width:46ch; line-height:1.5}

.rolebar{height:58px; background:#0D0B08; border-bottom:1px solid var(--edge);
  display:flex; align-items:center; gap:8px; padding:0 14px; overflow-x:auto}
.rolebar .lbl{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); margin-right:4px; white-space:nowrap}
.rtab{background:transparent; color:var(--dim); border:1px solid var(--edge); border-radius:var(--radius);
  padding:8px 13px; font-size:14px; font-weight:600; white-space:nowrap}
.rtab.on{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.rolebar .spacer{flex:1}
.rolebar .dev{font-size:12px; color:var(--mute); white-space:nowrap}

.topbar{height:68px; background:var(--top); border-bottom:1px solid var(--edge);
  display:flex; align-items:center; gap:16px; padding:0 18px}
.brand .name{font-weight:800; font-size:17px}
.brand .sub{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-top:3px}
.clock{font-size:28px; font-weight:800}
.flex1{flex:1}
.kpi{display:flex; gap:7px; align-items:baseline; color:var(--dim); font-size:13px}
.kpi b{color:var(--cream); font-size:20px; font-weight:800}
.tbtn{background:transparent; color:var(--cream); border:1px solid var(--edge); border-radius:var(--radius);
  padding:9px 13px; font-size:14px; font-weight:600; white-space:nowrap}
.tbtn.primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.tbtn.off{opacity:.5}
.tbtn.stale,.rtab.stale{border-color:var(--yellow-400); color:var(--yellow-400)}
.rtab.off{opacity:.55}

.stage{height:calc(100vh - 126px); overflow:hidden}
.pane{display:none; height:100%}
.pane.on{display:block}

.viewsw{display:flex; gap:6px; padding:10px 14px 0}
.viewsw button{background:var(--panel); border:1px solid var(--edge); color:var(--dim);
  border-radius:var(--radius); padding:8px 14px; font-size:13px; font-weight:600}
.viewsw button.on{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.steps{display:flex; gap:8px; padding:10px 14px 0; overflow-x:auto}
.step{background:var(--panel); border:1px solid var(--edge); border-radius:var(--radius); padding:10px 15px;
  display:flex; align-items:center; gap:9px; white-space:nowrap; color:var(--dim); font-weight:600; font-size:14px}
.step b{font-size:17px; font-weight:800; color:var(--cream)}
.step.on{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.step.on b{color:var(--accent-ink)}
.step.alarm b{color:#F0A08C}
.grid{overflow-y:auto; padding:14px; display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); align-content:start}
.grid::-webkit-scrollbar,.colbody::-webkit-scrollbar{width:8px}
.grid::-webkit-scrollbar-thumb,.colbody::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12); border-radius:var(--radius)}
.empty{color:#564d43; font-size:15px; text-align:center; padding:50px 10px; line-height:1.6; grid-column:1/-1}
.quick{display:flex; gap:10px; padding:10px 14px 0; flex-wrap:wrap}
.qstat{background:var(--panel); border-radius:var(--radius); padding:9px 14px; font-size:13px; color:var(--dim)}
.qstat b{color:var(--cream); font-size:17px; font-weight:800; margin-right:5px}

.board{display:flex; gap:12px; padding:12px 14px; overflow-x:auto}
.col{flex:1 1 0; min-width:270px; background:var(--panel); border-radius:var(--radius); display:flex; flex-direction:column; overflow:hidden}
.colhead{background:var(--head); padding:11px 13px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--edge)}
.colhead .t{font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase}
.colhead .c{font-size:14px; font-weight:800; background:rgba(255,255,255,.09); border-radius:var(--radius); padding:2px 9px}
.colbody{padding:10px; display:flex; flex-direction:column; gap:10px; overflow-y:auto; flex:1}

.card{background:var(--card); color:var(--ink); border-radius:var(--radius); padding:12px;
  display:flex; flex-direction:column; gap:9px; animation:pop .2s ease}
@keyframes pop{from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:none}}
.chead{display:flex; align-items:center; gap:8px}
.badge{font-size:11px; font-weight:700; padding:4px 8px; border-radius:var(--radius); color:#fff; white-space:nowrap}
.onum{font-weight:800; font-size:15px}
.ago{margin-left:auto; font-size:11px; color:var(--sub); font-weight:600}
.dl{border-radius:var(--radius); padding:9px 10px; background:var(--inset); border:1px solid var(--line)}
.dlrow{display:flex; align-items:baseline; justify-content:space-between; gap:8px}
.dlt{font-size:14px; font-weight:800}
.dlt span{font-weight:600; color:var(--sub)}
.dlc{font-size:13px; font-weight:800}
.heat{height:7px; border-radius:var(--radius); background:#E0D2BB; margin-top:8px; overflow:hidden}
.heat i{display:block; height:100%; border-radius:var(--radius); transition:width .5s linear}
.lv-calm .dlc{color:var(--calm)} .lv-calm .heat i{background:var(--calm)}
.lv-warm .dlc{color:var(--warm)} .lv-warm .heat i{background:var(--warm)}
.lv-hot .dlc{color:var(--hot)} .lv-hot .heat i{background:var(--hot)}
.lv-late .dlc{color:var(--late)} .lv-late .heat i{background:var(--late)}
.lv-late{border-color:#EBC0BB; background:#F6E1DD}
.lv-night .dlc{color:var(--tg)} .lv-night .heat i{background:var(--tg)}
.chip.promo{background:#FBEFD8; color:#7A4F12}
.chip.gift{background:#E5EEDD; color:#3E6B2E}
.chip.night{background:#DCE8EC; color:#2c6b73}
html[data-theme="dark"] .chip.promo{background:#3E2F14; color:#F3C77A}
html[data-theme="dark"] .chip.gift{background:#213018; color:#9FD38F}
html[data-theme="dark"] .chip.night{background:#17303A; color:#8FD0E8}
.cust{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap}
.cust .nm{font-size:17px; font-weight:800}
.cust .ph{font-size:14px; color:var(--sub); font-weight:600}
.meta{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--sub); flex-wrap:wrap}
.chip{font-size:11px; font-weight:700; padding:3px 8px; border-radius:var(--radius)}
.chip.pickup{background:#E7E0D0; color:#6b5d3f}
.chip.deliv{background:#DCE8EC; color:#2c6b73}
.chip.warn{background:#F6E1DD; color:#9E2B24}
.items{list-style:none; display:flex; flex-direction:column; gap:5px; border-top:1px solid var(--line); padding-top:9px}
.items li{display:flex; align-items:baseline; gap:8px; font-size:14px}
.items li .nm2{flex:1}
.items li .q{font-weight:800}
.items li.rdy{color:#4E7A3E}
.foot{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.total{font-size:17px; font-weight:800}
.total span{font-size:12px; color:var(--sub); font-weight:600}
.acts{margin-left:auto; display:flex; gap:7px}
.mini{border:1px solid var(--line); background:transparent; color:var(--sub); border-radius:var(--radius); padding:8px 10px; font-size:13px}
.mini:hover{background:var(--inset); color:var(--ink); border-color:var(--sub)}
.mini.has{background:#EDE3F3; color:#5B3E78; border-color:#D9C8E6}
.go2{background:var(--accent); color:var(--accent-ink); font-size:14px; font-weight:700; border-radius:var(--radius); padding:9px 14px}
.notes{display:flex; flex-direction:column; gap:6px}
.note{border-radius:var(--radius); padding:8px 10px; font-size:13px; line-height:1.45}
.note.client{background:#FDF4DC; border:1px solid #EBD9A8; color:#6B5520}
.note.mgr{background:#EDE3F3; border:1px solid #D9C8E6; color:#4E3268}
.note .who{font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; opacity:.75; display:block; margin-bottom:2px}

.tab{height:100%; display:flex; flex-direction:column; background:#141110}
.tabhead{background:var(--top); padding:13px 18px; display:flex; align-items:center; gap:14px; border-bottom:1px solid var(--edge)}
.tabhead .who{font-size:19px; font-weight:800}
.tabhead .cnt{font-size:14px; color:var(--dim)}
.tabgrid{flex:1; overflow-y:auto; padding:14px; display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); align-content:start}
.tcard{background:var(--card); color:var(--ink); border-radius:var(--radius); padding:16px;
  display:flex; flex-direction:column; gap:12px; border:3px solid transparent}
.tcard.sel{border-color:#2BA69C; box-shadow:0 0 0 4px rgba(43,166,156,.18)}
.tcard.confirm{border-color:var(--warm); box-shadow:0 0 0 4px rgba(226,154,50,.2)}
.tcard h3{font-size:21px; font-weight:800; display:flex; align-items:center; gap:9px}
.tcard h3 .mark{margin-left:auto; font-size:12px; font-weight:700; color:var(--sub)}
.titem{display:flex; align-items:center; gap:12px; background:var(--inset); border:1px solid var(--line);
  border-radius:var(--radius); padding:14px; font-size:17px; font-weight:700; text-align:left; width:100%; color:var(--ink)}
.titem .q{margin-left:auto; font-size:16px}
.titem .box{width:26px; height:26px; border-radius:var(--radius); border:2px solid #B9A98E; flex:none;
  display:flex; align-items:center; justify-content:center; font-size:16px; color:#fff}
.titem.done{background:#E5EEDD; border-color:#CFE0BF; color:#3E6B2E}
.titem.done .box{background:var(--ok); border-color:var(--ok)}
.titem small{display:block; font-size:12px; font-weight:600; color:var(--sub); margin-top:2px}
.confirmbox{background:#FBEFD8; border:2px solid var(--warm); border-radius:var(--radius); padding:14px;
  display:flex; flex-direction:column; gap:11px}
.confirmbox .q2{font-size:18px; font-weight:800; color:#7A4F12}
.confirmbox .hint{font-size:13px; color:#8A6A32; line-height:1.45}
.confirmrow{display:flex; gap:10px}
.tfoot{display:flex; gap:10px; align-items:center}
.bigbtn{flex:1; background:var(--accent); color:var(--accent-ink); font-size:18px; font-weight:800;
  border-radius:var(--radius); padding:16px; text-align:center}
.bigbtn.ghost{background:transparent; color:var(--sub); border:1px solid var(--line)}
.bigbtn.warn{background:var(--yellow-400); color:#3B2708}
.bigbtn:disabled{opacity:.35}
.tempty{color:#5a5045; text-align:center; padding:60px 20px; font-size:17px; line-height:1.6; grid-column:1/-1}
.voice{background:var(--top); border-top:1px solid var(--edge); padding:13px 18px;
  padding-bottom:calc(13px + env(safe-area-inset-bottom,0px)); display:flex; align-items:center; gap:13px; flex-wrap:wrap}
.ptt{flex:1; min-width:220px; background:var(--crimson-700); color:#fff; font-size:19px; font-weight:800;
  border-radius:var(--radius); padding:19px; touch-action:none; text-align:center}
.ptt.rec{background:var(--late); color:#fff}
.voicehint{font-size:13px; color:var(--dim); flex:1; min-width:200px; line-height:1.45}
.vsel{background:#15110D; color:var(--dim); border:1px solid var(--edge); border-radius:var(--radius); padding:10px; font-size:13px}

.ov{position:fixed; inset:0; z-index:50; background:rgba(15,11,8,.8); display:none;
  align-items:center; justify-content:center; padding:20px}
.ov.on{display:flex}
.sheet{width:min(640px,96vw); max-height:88vh; overflow-y:auto; background:var(--panel); color:var(--ink);
  border-radius:var(--radius); animation:rise .2s ease}
@keyframes rise{from{transform:translateY(12px); opacity:.5} to{transform:none; opacity:1}}
.sheet .sh{padding:16px 20px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px}
.sheet .sh h3{font-size:19px; font-weight:800}
.sheet .sb{padding:20px; display:flex; flex-direction:column; gap:14px}
.sheet .sf{padding:16px 20px; border-top:1px solid var(--line); display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.fld{display:flex; flex-direction:column; gap:6px}
.fld label{font-size:12px; font-weight:700; color:var(--sub); text-transform:uppercase; letter-spacing:.05em}
.fld input,.fld select,.fld textarea{font:inherit; font-size:16px; padding:11px 12px; border-radius:var(--radius);
  border:1px solid var(--line); background:var(--field); color:var(--ink); resize:vertical}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.row3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px}
.pick{display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--inset); border:1px solid var(--line); border-radius:var(--radius)}
.pick .n{font-weight:700; flex:1}
.catttl{font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  color:var(--sub); margin:12px 0 6px}
.catttl:first-child{margin-top:0}
.orow{background:var(--inset); border:1px solid var(--line); border-radius:var(--radius); padding:12px; margin-bottom:9px}
.orow.gift{background:#E5EEDD; border-color:#CFE0BF}
html[data-theme="dark"] .orow.gift{background:#213018; border-color:#3B5A2C}
.orow-top{display:flex; align-items:center; gap:9px; margin-bottom:10px; font-size:15px}
.orow-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:10px; align-items:end}
.of{display:flex; flex-direction:column; gap:5px}
.of>span{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--sub)}
.of select,.of input{font:inherit; font-size:15px; padding:9px 10px; border-radius:var(--radius);
  border:1px solid var(--line); background:var(--field); color:var(--ink); width:100%; min-width:0}
.of input:disabled{opacity:.5}
.of .qty{display:flex; align-items:center; gap:6px}
.of .qty button{width:32px; height:36px; border-radius:var(--radius); border:1px solid var(--line);
  background:var(--field); color:var(--ink); font-size:17px; font-weight:800}
.of .qty b{min-width:24px; text-align:center; font-size:16px}
.orow-note{margin-top:8px; font-size:12px; color:var(--warm)}
@media (max-width:620px){.orow-grid{grid-template-columns:1fr 1fr}}
.vinp{font:inherit; font-size:15px; padding:8px 10px; border-radius:var(--radius);
  border:1px solid var(--line); background:var(--field); color:var(--ink); width:100%; min-width:0}
.pick .n small{display:block; font-size:12px; color:var(--sub); font-weight:600}
.pick .qty{display:flex; align-items:center; gap:8px}
.pick .qty button{width:34px; height:34px; border-radius:var(--radius); border:1px solid var(--line); background:var(--field); font-size:18px; font-weight:800; color:var(--ink)}
.pick .qty b{min-width:22px; text-align:center; font-size:17px}
.ghostbtn{background:transparent; border:1px solid var(--line); color:var(--sub); border-radius:var(--radius); padding:12px 16px; font-weight:600}
.solid{background:var(--accent); color:var(--accent-ink); border-radius:var(--radius); padding:13px 20px; font-weight:800; font-size:16px}
.seg{display:flex; gap:6px; flex-wrap:wrap}
.seg button{border:1px solid var(--line); background:var(--field); color:var(--ink); border-radius:var(--radius); padding:9px 13px; font-size:14px; font-weight:600}
.seg button.on{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.chk{display:flex; align-items:center; gap:11px; padding:11px 12px; background:var(--inset); border:1px solid var(--line); border-radius:var(--radius); font-size:15px; font-weight:600}
.chk input{width:20px; height:20px}

.label{background:#fff; color:#111 !important; border:1px solid #d9d2c4; border-radius:var(--radius); padding:12px; font-size:11px; line-height:1.45}
.label *{color:#111}
.label h4{font-size:14px; margin-bottom:6px}
.label .g{display:grid; grid-template-columns:1fr auto; gap:8px; align-items:end}
.label .qr{width:58px; height:58px; background:repeating-conic-gradient(#111 0 25%, #fff 0 50%) 0 0/10px 10px; border:2px solid #111}
.label .bar{height:26px; margin-top:8px; background:repeating-linear-gradient(90deg,#111 0 2px,#fff 2px 4px,#111 4px 5px,#fff 5px 9px)}

.adm{height:100%; display:flex; flex-direction:column}
.admtabs{display:flex; gap:8px; padding:12px 14px; border-bottom:1px solid var(--edge); overflow-x:auto}
.admtabs button{background:transparent; color:var(--dim); border:1px solid var(--edge); border-radius:var(--radius);
  padding:9px 14px; font-size:14px; font-weight:600; white-space:nowrap}
.admtabs button.on{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.admbody{flex:1; overflow-y:auto; padding:16px}
.admbody h2{font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--dim); margin:20px 0 10px}
.admbody h2:first-child{margin-top:0}
.panelbox{background:var(--panel); border-radius:var(--radius); padding:16px; overflow-x:auto}
.admbody{overflow-x:hidden}
table.t{min-width:640px}
.sheet .sb{min-width:0}
.sheet *{max-width:100%}
.filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px}
.filters .fg{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.filters .fl{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--mute); margin-right:3px}
.fbtn{background:var(--panel); border:1px solid var(--edge); color:var(--dim); border-radius:var(--radius); padding:8px 12px; font-size:13px; font-weight:600}
.fbtn.on{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.fbtn.src.on{color:#fff}
.dates{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:10px}
.dates input[type=date]{font:inherit; font-size:14px; padding:8px 11px; border-radius:var(--radius);
  border:1px solid var(--edge); background:var(--panel); color:var(--cream)}
.dates .sep{color:var(--mute); font-size:13px}
.dates .rng{color:var(--dim); font-size:13px; margin-left:4px}
.stats{display:flex; gap:10px; flex-wrap:wrap}
.stat{background:var(--panel); border-radius:var(--radius); padding:13px 16px; min-width:140px; flex:1}
.stat .v{font-size:24px; font-weight:800}
.stat .k{font-size:12px; color:var(--dim); margin-top:3px}
.stat.alert .v{color:#F0A08C}
table.t{width:100%; border-collapse:collapse; font-size:14px}
table.t th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--dim); padding:8px 10px; border-bottom:1px solid var(--edge)}
table.t td{padding:11px 10px; border-bottom:1px solid rgba(255,255,255,.04); vertical-align:middle}
table.t tr:last-child td{border-bottom:0}
.pill{font-size:11px; font-weight:700; padding:3px 9px; border-radius:var(--radius); background:rgba(255,255,255,.08); color:var(--dim)}
.pill.on{background:rgba(62,138,74,.2); color:#8FD39B}
.rowbtn{background:transparent; border:1px solid var(--edge); color:var(--dim); border-radius:var(--radius); padding:7px 11px; font-size:13px}
.rowbtn:hover{border-color:rgba(255,255,255,.2); color:var(--cream)}
.rowbtn.del:hover{border-color:#8E4038; color:#F0A08C}
.addbtn{background:var(--accent); color:var(--accent-ink); border-radius:var(--radius); padding:10px 15px; font-weight:700; font-size:14px}
.cliinput{font:inherit; font-size:14px; padding:10px 12px; border-radius:var(--radius);
  border:1px solid var(--edge); background:var(--field); color:var(--ink); min-width:260px; flex:1}

.toggle{width:44px; height:25px; border-radius:var(--radius); background:#3A302A; position:relative; flex:none; display:inline-block}
.toggle.on{background:var(--ok); box-shadow:0 0 0 2px rgba(124,168,119,.25)}
.toggle i{position:absolute; top:3px; left:3px; width:19px; height:19px; border-radius:50%; background:#fff; transition:left .15s}
.toggle.on i{left:22px}
.setrow{display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.04); flex-wrap:wrap}
.setrow:last-child{border-bottom:0}
.setrow .txt{flex:1; min-width:220px}
.setrow .txt b{display:block; font-size:15px; font-weight:700}
.setrow .txt small{display:block; color:var(--dim); font-size:13px; margin-top:3px; line-height:1.45}
.setrow input[type=number],.setrow input[type=text],.setrow select{font:inherit; padding:9px 11px; border-radius:var(--radius);
  border:1px solid var(--edge); background:var(--field); color:var(--ink)}
.setrow input[type=number],.setrow input[type=text]{width:110px; text-align:right}
.setrow input[type=range]{width:150px}
.bars{display:flex; flex-direction:column; gap:11px}
.bar1 .l{display:flex; justify-content:space-between; font-size:14px; margin-bottom:5px; gap:10px}
.bar1 .tr{height:9px; border-radius:var(--radius); background:#2C241D; overflow:hidden}
.bar1 .tr i{display:block; height:100%; border-radius:var(--radius)}
.hours{display:flex; align-items:flex-end; gap:5px; height:130px}
.hours .h{flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:5px}
.hours .h i{width:100%; background:var(--halar); border-radius:var(--radius) 5px 0 0; display:block; min-height:3px}
.hours .h span{font-size:10px; color:var(--mute)}

/* сводка дня */
.dash{height:100%; overflow-y:auto; padding:16px}
.dashhead{display:flex; align-items:center; gap:14px; margin-bottom:16px; flex-wrap:wrap}
.dashhead h2{font-size:24px; font-weight:800}
.dashhead .sub{color:var(--dim); font-size:14px}
.wgrid{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.w{background:var(--panel); border-radius:var(--radius); padding:16px}
.w .wt{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--dim); margin-bottom:10px}
.w .wv{font-size:38px; font-weight:800; line-height:1}
.w .ws{font-size:13px; color:var(--dim); margin-top:7px}
.w.wide{grid-column:span 2}
.w.alert .wv{color:#F0A08C}
@media (max-width:700px){.w.wide{grid-column:span 1}}

#alert{position:fixed; inset:0; z-index:55; background:rgba(15,11,8,.78); display:none; align-items:center; justify-content:center; padding:22px}
#alert.on{display:flex}
.alertcard{width:min(520px,95vw); background:var(--panel); color:var(--ink); border-radius:var(--radius); overflow:hidden}
.alerttop{background:var(--late); color:#fff; padding:15px 20px; font-size:19px; font-weight:800;
  display:flex; align-items:center; justify-content:space-between; animation:bell 1s ease-in-out infinite}
@keyframes bell{0%,100%{background:var(--late)}50%{background:#AE231C}}
.alertbody{padding:20px; display:flex; flex-direction:column; gap:12px}
.alertfoot{padding:16px 20px; border-top:1px solid var(--line); display:flex; align-items:center; gap:12px}

/* гарантия контраста: варианты кнопок определяются последними */
.bigbtn.ghost{background:transparent; color:var(--ink); border:1px solid var(--line)}
.bigbtn.warn{background:var(--yellow-400); color:#333333; border-color:var(--yellow-400)}
.ghostbtn{background:transparent; border:1px solid var(--line); color:var(--ink)}
.mini{color:var(--ink)}
.rowbtn{color:var(--ink)}
.tbtn{color:var(--cream)}
.tbtn.primary{color:var(--accent-ink)}

@media (max-width:860px){
  .kpi{display:none}
  .tabgrid,.grid{grid-template-columns:1fr}
  .row2,.row3{grid-template-columns:1fr}
  .col{flex:0 0 84vw}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}