/* CRM «Наш декор»: телефон — одна колонка и нижнее меню; широкий экран — меню слева. Системные шрифты. */
:root{
  --bg:#eef1ef; --surface:#fff; --sunk:#e4e9e6; --ink:#17201d; --muted:#5b6964; --line:#d3dbd7;
  --accent:#1d5e57; --accent-ink:#fff; --accent-soft:#d6e8e4;
  --good:#2b7a4b; --good-soft:#dcefe3; --warn:#9a6212; --warn-soft:#f6e9d2; --crit:#b3261e; --crit-soft:#f8dedb;
  --r:10px; --f:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace; color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#111715; --surface:#19211e; --sunk:#0d1311; --ink:#e6ece9; --muted:#9aa9a3; --line:#2b3632;
  --accent:#5fb5a8; --accent-ink:#0b1513; --accent-soft:#1c3631;
  --good:#6cc493; --good-soft:#163323; --warn:#e2ac57; --warn-soft:#3a2b12; --crit:#f08a80; --crit-soft:#3d1a17; color-scheme:dark}}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--ink);font:15px/1.45 var(--f);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
a{color:var(--accent)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
.app{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;min-height:100vh}
header.top{position:sticky;top:0;z-index:5;background:var(--surface);border-bottom:1px solid var(--line);
  padding:10px max(14px,env(safe-area-inset-right)) 10px max(14px,env(safe-area-inset-left));display:flex;align-items:center;gap:10px}
.brand{font-weight:700;font-size:16px;white-space:nowrap;text-decoration:none;color:var(--ink);line-height:1.1}
.brand small{display:block;font-weight:600;font-size:10px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.brand.big{font-size:22px;margin-bottom:8px}
header .search{flex:1;min-width:0}
header .search input{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
header .add{white-space:nowrap}
main{min-width:0;max-width:1180px;width:100%;margin:0 auto;padding:16px max(14px,env(safe-area-inset-right)) calc(96px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
main.solo{display:grid;place-items:center;min-height:100vh;padding:16px}
h1{font-size:21px;font-weight:700;margin:0 0 6px;overflow-wrap:anywhere}
h1 a{color:inherit;text-decoration:none}
h2{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin:24px 0 8px}
.sub{color:var(--muted);margin:0 0 12px;font-size:14px}
.muted{color:var(--muted);font-weight:500}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.mono{font-family:var(--mono);font-size:13px}
.note{color:var(--muted);font-size:13px;margin-top:12px}
nav.tabs{position:fixed;left:0;right:0;bottom:0;z-index:6;background:var(--surface);border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(5,1fr);padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
nav.tabs a{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px 9px;text-decoration:none;color:var(--muted);font-size:11px;font-weight:600}
nav.tabs a[aria-current="page"]{color:var(--accent)}
.badge{position:absolute;top:3px;left:calc(50% + 6px);background:var(--crit);color:#fff;border-radius:999px;font-size:10px;min-width:17px;height:17px;line-height:17px;text-align:center;padding:0 4px}
.ic{width:22px;height:22px;display:block;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.ic-today{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h10M4 18h7'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E")}
.ic-funnel{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Crect x='3' y='4' width='5' height='16' rx='1.5'/%3E%3Crect x='10' y='4' width='5' height='11' rx='1.5'/%3E%3Crect x='17' y='4' width='4' height='7' rx='1.5'/%3E%3C/svg%3E")}
.ic-clients{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c.8-3.6 3.4-5.5 6.5-5.5s5.7 1.9 6.5 5.5M16 4.5a3.5 3.5 0 0 1 0 7M18.5 14.8c1.6.8 2.6 2.5 3 5.2'/%3E%3C/svg%3E")}
.ic-stock{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M3 8l9-4 9 4-9 4-9-4z'/%3E%3Cpath d='M3 8v8l9 4 9-4V8M12 12v8'/%3E%3C/svg%3E")}
.ic-more{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='5' cy='12' r='1.8'/%3E%3Ccircle cx='12' cy='12' r='1.8'/%3E%3Ccircle cx='19' cy='12' r='1.8'/%3E%3C/svg%3E")}
@media (min-width:900px){
  .app{grid-template-columns:210px minmax(0,1fr);grid-template-rows:auto 1fr}
  header.top{grid-column:1/-1}
  nav.tabs{position:sticky;top:62px;align-self:start;grid-row:2;display:flex;flex-direction:column;border-top:0;background:transparent;padding:14px 8px}
  nav.tabs a{flex-direction:row;gap:10px;font-size:14px;padding:10px 12px;border-radius:8px}
  nav.tabs a[aria-current="page"]{background:var(--accent-soft)}
  .badge{position:static;margin-left:auto}
  main{padding-bottom:48px}
}
.flash{border-radius:8px;padding:10px 12px;margin:0 0 12px;background:var(--accent-soft)}
.flash.err{background:var(--crit-soft);color:var(--crit)}
.flash.ok{background:var(--good-soft);color:var(--good)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.pad{padding:14px}
.list{display:flex;flex-direction:column;overflow:hidden}
.row{display:flex;gap:12px;align-items:center;padding:11px 14px;border-top:1px solid var(--line);min-width:0}
.row:first-child{border-top:0}
.row.wrap{flex-wrap:wrap}
.row .grow,.grow{flex:1;min-width:0}
.row .t{font-weight:600;overflow-wrap:anywhere}
.row .t.done{text-decoration:line-through;color:var(--muted)}
.d{color:var(--muted);font-size:13px;overflow-wrap:anywhere}
a.row.btn{text-decoration:none;color:inherit}
a.row.btn:hover{background:var(--sunk)}
.pill{display:inline-flex;align-items:center;border-radius:999px;padding:2px 9px;font-size:12px;font-weight:600;white-space:nowrap;background:var(--sunk);color:var(--muted)}
.pill.good,.st-paid,.st-shipped{background:var(--good-soft);color:var(--good)}
.pill.warn,.st-quote{background:var(--warn-soft);color:var(--warn)}
.pill.crit,.st-lost{background:var(--crit-soft);color:var(--crit)}
.st-new,.st-work{background:var(--accent-soft);color:var(--accent)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;text-decoration:none;color:inherit}
.stat b{display:block;font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.stat span{color:var(--muted);font-size:13px}
.btn-p,.btn-s,.btn-g{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:8px;padding:9px 14px;font-weight:600;font-size:14px;border:1px solid transparent;text-decoration:none;line-height:1.2}
.btn-p{background:var(--accent);color:var(--accent-ink)}
.btn-s{background:var(--surface);border-color:var(--line);color:var(--ink)}
.btn-s.static{cursor:default;font-weight:500}
.btn-g{background:none;color:var(--accent)}
.btn-g.crit{color:var(--crit)}
.sm{padding:5px 10px;font-size:13px}
.wide{width:100%}
.btns,.contacts{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px}
.bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
label.f{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted);font-weight:600}
label.f input,label.f select,label.f textarea,.addline input,.row input,.row select{border:1px solid var(--line);border-radius:8px;padding:9px 10px;background:var(--surface);color:var(--ink);font-weight:400;font-size:15px;min-width:0;width:100%}
label.f.inline{flex-direction:row;align-items:center;gap:8px}
label.f.inline select{width:auto}
label.inline{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--muted);white-space:nowrap}
label.inline input{width:auto}
textarea{resize:vertical}
.grid2{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:640px){.grid2{grid-template-columns:1fr 1fr}.span2{grid-column:1/-1}}
.addline{display:flex;gap:8px;margin:10px 0;flex-wrap:wrap}
.addline input{flex:1 1 180px}
.addline .qty{flex:0 0 80px}
.addline .date{flex:0 0 160px}
.row input.mid,.row select{width:auto;flex:0 1 170px}
.stagebar,.inline-form{display:inline-block;margin:0 8px 0 0}
.tbl{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);text-align:left;font-weight:700;padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:7px 10px;border-top:1px solid var(--line);vertical-align:middle}
tbody tr:first-child td{border-top:0}
tfoot td{border-top:1px solid var(--line)}
.r{text-align:right}
.nowrap{white-space:nowrap}
td form{display:inline}
input.ed{width:76px;text-align:right;border:1px solid var(--line);border-radius:6px;padding:5px 7px;background:var(--surface);font-variant-numeric:tabular-nums}
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(215px,1fr);gap:10px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory}
.col{background:var(--sunk);border-radius:var(--r);padding:8px;scroll-snap-align:start;min-width:0}
.col h3{display:flex;justify-content:space-between;gap:6px;font-size:13px;margin:4px 4px 8px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px;margin-bottom:8px}
.cardlink{text-decoration:none;color:inherit;display:block}
.card .t{font-weight:600}
.card .m{display:flex;align-items:center;gap:8px;margin-top:8px}
.card .m .num{margin-left:auto}
.empty{color:var(--muted);font-size:13px;margin:4px}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 12px;font-size:13px;text-decoration:none;color:var(--ink)}
.chip[aria-current="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.check{width:26px;height:26px;border-radius:7px;border:1.5px solid var(--line);background:var(--surface);color:var(--good);font-weight:700;padding:0}
.check.on{background:var(--good-soft);border-color:var(--good)}
.chat{display:flex;flex-direction:column;gap:6px}
.msg{max-width:85%;padding:8px 11px;border-radius:12px;font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere}
.msg small{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.msg.c{background:var(--surface);border:1px solid var(--line);align-self:flex-start}
.msg.m{background:var(--accent-soft);align-self:flex-end}
pre.calc{white-space:pre-wrap;font:13px/1.5 var(--mono);margin:0}
.hist .row{padding:8px 14px}
.danger{margin-top:28px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.subnav{display:flex;gap:6px;margin-bottom:12px}
.subnav a{padding:6px 12px;border-radius:999px;text-decoration:none;color:var(--muted);font-weight:600;font-size:14px}
.subnav a[aria-current="page"]{background:var(--accent-soft);color:var(--accent)}
.src{width:84px}
.src-n{width:150px;text-align:right;font-size:13px;color:var(--muted)}
meter{height:12px}
.login{width:min(380px,100%);padding:22px;display:flex;flex-direction:column;gap:12px}
.logout{margin-top:28px}
td .d{font-family:var(--f)}
@media (max-width:640px){
  table.cards,table.cards tbody,table.cards tfoot{display:block}
  table.cards thead{display:none}
  table.cards tbody tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 10px;padding:12px;border-top:1px solid var(--line);align-items:end}
  table.cards tbody tr:first-child{border-top:0}
  table.cards td{padding:0;border:0;text-align:left}
  table.cards td.c-main{grid-column:1/-1}
  table.cards td.c-stk,table.cards td.c-box{grid-column:span 2;align-self:center}
  table.cards td.c-act{text-align:right;align-self:center}
  table.cards td[data-l]::before{content:attr(data-l);display:block;font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px}
  table.cards input.ed{width:100%;text-align:left;padding:8px}
  table.cards tfoot tr{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border-top:1px solid var(--line)}
  table.cards tfoot td{padding:0;border:0}
  table.cards tfoot td:empty{display:none}
  table.cards td[colspan]{grid-column:1/-1}
}
