:root {
  --tabbar: 0px; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px);
  --bg: #f4f5f7; --panel: #ffffff; --line: #e3e6ea; --line2: #eef0f3; --text: #14181d; --muted: #6b7480;
  --accent: #2563eb; --accent-2: #dbeafe; --in: #ffffff; --out: #dbeafe; --sys: #fef3c7;
  --ok: #15803d; --warn: #b45309; --err: #b91c1c; --shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.06);
  --radius: 10px; --hdr: 52px;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#0f1216; --panel:#161b22; --line:#262d36; --line2:#1d232b; --text:#e6e9ee; --muted:#8b95a1;
          --accent:#3b82f6; --accent-2:#1e3a5f; --in:#1c232c; --out:#1e3a5f; --sys:#3a3218;
          --ok:#4ade80; --warn:#fbbf24; --err:#f87171; --shadow: 0 1px 2px rgba(0,0,0,.4); }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
       background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); }
input, textarea, select, button { font: inherit; color: inherit; }
input, textarea, select { background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
                          padding: 8px 10px; min-width: 0; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent-2); border-color: var(--accent); }
textarea { resize: vertical; }
button { background: var(--accent); color: #fff; border: 0; border-radius: 8px; padding: 8px 14px;
         cursor: pointer; white-space: nowrap; }
button:disabled { opacity: .5; cursor: default; }
button.sec { background: transparent; color: var(--text); border: 1px solid var(--line); }
button.ghost { background: transparent; color: var(--muted); padding: 6px 8px; }
button.danger { background: var(--err); }
button.sm { padding: 5px 10px; font-size: 13px; }
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.right { text-align: right; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 20px;
        font-size: 12px; border: 1px solid var(--line); background: var(--bg); white-space: nowrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.badge { background: var(--accent); color: #fff; border-radius: 10px; padding: 0 6px; font-size: 11px;
         font-weight: 600; min-width: 18px; text-align: center; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.card h3 { margin: 0 0 12px; font-size: 15px; }
.empty { margin: auto; color: var(--muted); text-align: center; padding: 40px 16px; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-weight: 600; color: var(--muted); font-size: 12px; padding: 8px 10px;
     border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 9px 10px; border-bottom: 1px solid var(--line2); vertical-align: top; }
tr.click { cursor: pointer; }
tr.click:hover td { background: var(--bg); }
.table-wrap { overflow-x: auto; }
label.field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
label.field > * { color: var(--text); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 640px) { .grid2, .grid3 { grid-template-columns: 1fr; } }

/* ---------- каркас */
header.top { height: var(--hdr); display: flex; align-items: center; gap: 6px; padding: 0 12px;
             background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
header.top .brand { font-weight: 700; margin-right: 8px; white-space: nowrap; }
nav.tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
nav.tabs a { padding: 7px 11px; border-radius: 8px; color: var(--muted); text-decoration: none; white-space: nowrap;
             display: inline-flex; gap: 6px; align-items: center; }
nav.tabs a.on { background: var(--accent-2); color: var(--accent); font-weight: 600; }
nav.tabs a .ic, #userBtn .av { display: none; }
.user-box { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.user-box select { padding: 5px 8px; }
#conn { font-size: 18px; line-height: 1; }
main#view { height: calc(100vh - var(--hdr)); height: calc(100dvh - var(--hdr) - var(--safe-top) - var(--tabbar)); overflow: hidden; display: flex; }
.page { flex: 1; overflow-y: auto; padding: 16px; }
.page-inner { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { background: transparent; color: var(--muted); border-radius: 0; padding: 6px 12px; }
.seg button.on { background: var(--accent-2); color: var(--accent); font-weight: 600; }

/* ---------- инбокс */
.inbox { display: flex; width: 100%; min-height: 0; }
.dlist { width: 340px; flex: none; border-right: 1px solid var(--line); background: var(--panel);
         display: flex; flex-direction: column; min-height: 0; }
.dlist .tabs { padding: 8px; border-bottom: 1px solid var(--line); display: flex; gap: 4px; flex-wrap: wrap; }
.dlist .items { overflow-y: auto; flex: 1; }
.d { padding: 11px 14px; border-bottom: 1px solid var(--line2); cursor: pointer; }
.d:hover { background: var(--bg); }
.d.on { background: var(--bg); box-shadow: inset 3px 0 0 var(--accent); }
.d .top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.d .nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d .meta { font-size: 12px; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.d .pv { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.wait { color: var(--warn); font-weight: 600; }
.wait.long { color: var(--err); }
.chat { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chat-head { padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--panel);
             display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chat-head .who { font-weight: 600; }
.msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.m { max-width: min(620px, 78%); padding: 8px 12px; border-radius: 12px; background: var(--in);
     border: 1px solid var(--line); white-space: pre-wrap; word-break: break-word; }
.m.out { align-self: flex-end; background: var(--out); }
.m.sys { align-self: center; background: var(--sys); font-size: 13px; max-width: 90%; text-align: center; }
.m .meta { font-size: 11px; color: var(--muted); margin-top: 4px; }
.m img { max-width: 100%; border-radius: 8px; display: block; margin-top: 6px; }
.composer { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); background: var(--panel);
            padding-bottom: max(10px, env(safe-area-inset-bottom)); }
.composer textarea { flex: 1; height: 40px; max-height: 160px; resize: none; }
.back { display: none; }
@media (max-width: 760px) {
  .dlist { width: 100%; border-right: 0; }
  .inbox.has-open .dlist { display: none; }
  .inbox:not(.has-open) .chat { display: none; }
  .back { display: inline-flex; }
  .chat-head { gap: 6px; padding: 8px 10px; }
  .chat-head > .muted { display: none; }
  .chat-head .who { flex: 1 1 60%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chat-head .grow { display: none; }
  .chat-head button.sm { padding: 5px 9px; }
  header.top .brand { display: none; }
  .m { max-width: 88%; }
}

/* ---------- доска заказов */
.board { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; min-height: 60vh; }
.col { width: 236px; flex: none; background: var(--line2); border-radius: var(--radius); display: flex;
       flex-direction: column; max-height: calc(100dvh - 190px); }
.col.drop { outline: 2px dashed var(--accent); }
.col.col-empty { width: 44px; min-height: 200px; }
.col.col-empty h4 { writing-mode: vertical-rl; padding: 12px 0; align-items: center; margin: 0 auto; white-space: nowrap; }
.col.col-empty h4 .grow, .col.col-empty h4 .num { display: none; }
.col h4 { margin: 0; padding: 10px 12px; font-size: 13px; display: flex; gap: 6px; align-items: center; }
.col .cards { overflow-y: auto; padding: 0 8px 8px; display: flex; flex-direction: column; gap: 8px; }
.ocard { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px; cursor: pointer; }
.ocard:hover { border-color: var(--accent); }
.ocard[draggable=true] { cursor: grab; }
.ocard .l1 { display: flex; justify-content: space-between; gap: 6px; font-weight: 600; }
.ocard .l2 { font-size: 12px; color: var(--muted); margin-top: 4px; display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- модальные окна и уведомления */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: flex; align-items: flex-start;
           justify-content: center; z-index: 100; padding: 6vh 12px 12px; overflow-y: auto; }
.modal { background: var(--panel); border-radius: 14px; width: min(640px, 100%); box-shadow: var(--shadow);
         display: flex; flex-direction: column; max-height: 88vh; }
.modal.wide { width: min(900px, 100%); }
.modal header { padding: 14px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; }
.modal header h3 { margin: 0; font-size: 16px; flex: 1; }
.modal .body { padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.modal footer { padding: 12px 16px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
#toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 200; }
.toast { background: var(--text); color: var(--panel); padding: 10px 14px; border-radius: 10px; box-shadow: var(--shadow);
         max-width: 360px; animation: fade .2s; }
.toast.err { background: var(--err); color: #fff; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } }

/* ---------- прочее */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.kpi .v { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi .l { color: var(--muted); font-size: 12px; }
.bar { height: 6px; background: var(--line2); border-radius: 4px; overflow: hidden; min-width: 60px; }
.bar > i { display: block; height: 100%; background: var(--accent); }
.matrix td, .matrix th { text-align: center; padding: 6px; }
.matrix td:first-child, .matrix th:first-child { text-align: left; white-space: nowrap; }
.side-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.dcard { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px;
         display: flex; flex-direction: column; gap: 8px; }
.dcard .addr { font-size: 16px; font-weight: 600; }
.big-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.big-actions button { padding: 12px; font-size: 15px; }
.picker { position: absolute; left: 0; right: 0; top: 100%; z-index: 150; background: var(--panel); border: 1px solid var(--line);
          border-radius: 8px; box-shadow: var(--shadow); max-height: 320px; overflow-y: auto; margin-top: 2px; min-width: 320px; }
.pick { display: flex; gap: 10px; padding: 8px 10px; cursor: pointer; border-bottom: 1px solid var(--line2); font-size: 13px; }
.pick:hover { background: var(--accent-2); }

/* ---------- телефон: меню внизу, как в приложениях; учёт «чёлки» и нижней полосы iPhone */
header.top { padding-top: var(--safe-top); height: calc(var(--hdr) + var(--safe-top)); }
@media (max-width: 760px) {
  :root { --tabbar: calc(56px + var(--safe-bottom)); }
  body.chat-open, body.one-tab { --tabbar: 0px; }
  header.top { padding-left: 12px; padding-right: 8px; }
  header.top .brand { display: inline; font-size: 15px; }
  nav.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: var(--tabbar);
             padding: 4px 4px var(--safe-bottom); gap: 0; justify-content: space-around; overflow: visible;
             background: var(--panel); border-top: 1px solid var(--line); }
  body.chat-open nav.tabs, body.one-tab nav.tabs { display: none; }
  nav.tabs a { flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: center; gap: 1px;
               padding: 4px 2px; font-size: 10.5px; border-radius: 10px; position: relative; }
  nav.tabs a.on { background: transparent; }
  nav.tabs a .ic { display: block; font-size: 21px; line-height: 1.1; }
  nav.tabs a .lb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  nav.tabs a .badge { position: absolute; top: 2px; left: calc(50% + 6px); font-size: 10px; }
  .user-box { gap: 6px; }
  .user-box select { max-width: 132px; padding: 5px 6px; }
  #userBtn { padding: 6px; }
  #userBtn .nm { display: none; }
  #userBtn .av { display: inline; font-size: 18px; }
  #toasts { bottom: calc(var(--tabbar) + 12px); left: 12px; right: 12px; }
  .toast { max-width: none; }
  .page { padding: 12px; }
}
@media (max-width: 760px) {
  .side-tabs, .toolbar > .seg { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .side-tabs::-webkit-scrollbar { display: none; }
  .side-tabs button, .seg button { flex: none; }
  .toolbar select, .toolbar input { flex: 1 1 140px; }
}