/* кабинет «Умной полки»: одна визуальная система на все экраны.

   принципы (design/ДИЗАЙН-АУДИТ-2026-09-16.md, раздел 4): белый лист, чёрный
   текст, один синий акцент, радиус 8, без теней и размытий, статус словом
   вместо бейджей, один контейнер на экран, секции через линию.
   заголовки и кнопки с прописной, тексты заказчика как есть. */

:root{
  --bg:#f6f7f9; --surface:#ffffff; --surface-2:#f9fafb;
  --text:#111827; --text-2:#6b7280; --text-3:#9ca3af;
  --line:#e3e6ea; --line-2:#eef0f3;
  --blue:#2563eb; --blue-d:#1d4ed8; --blue-t:rgba(37,99,235,.08);
  --green:#15803d; --green-t:#ecfdf3;
  --amber:#b45309; --amber-t:#fff7ed;
  --red:#b91c1c; --red-t:#fef2f2;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --r:8px; --r-sm:6px;
  --sh:0 1px 2px rgba(0,0,0,.05);
  --w:1120px; --w-form:720px; --w-narrow:560px;
}
*{box-sizing:border-box; margin:0; padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:14px; line-height:1.45; color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
:focus-visible{outline:2px solid var(--blue); outline-offset:2px; border-radius:4px}
a{color:var(--blue)}
b,strong{font-weight:600}
.num{font-variant-numeric:tabular-nums}
[hidden]{display:none !important}

/* ─── шапка: одна строка 56px ─── */
header.top{background:var(--surface); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:60}
.hrow{max-width:var(--w); margin:0 auto; padding:0 var(--s5); height:56px;
  display:flex; align-items:center; gap:var(--s5)}
.brand{font-size:16px; font-weight:600; color:var(--text); text-decoration:none;
  white-space:nowrap; letter-spacing:-.01em}
.crumb{display:flex; align-items:center; gap:var(--s2); min-width:0; font-size:14px;
  color:var(--text-2); flex:1}
.crumb a{color:var(--text-2); text-decoration:none; white-space:nowrap}
.crumb a:hover{color:var(--text)}
.crumb .sep{color:var(--text-3)}
.crumb .cur{color:var(--text); font-weight:500; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; max-width:260px}
.tabs{display:flex; gap:var(--s5); margin-left:auto; height:56px}
.tabs button{appearance:none; border:0; background:none; font:inherit; font-size:14px;
  color:var(--text-2); cursor:pointer; padding:0; height:56px; position:relative;
  white-space:nowrap}
.tabs button:hover{color:var(--text)}
.tabs button.on{color:var(--text); font-weight:500}
.tabs button.on::after{content:""; position:absolute; left:0; right:0; bottom:-1px;
  height:2px; background:var(--blue)}
.who{position:relative; flex:none; margin-left:auto}
.avatar{width:32px; height:32px; border-radius:50%; background:var(--blue); color:#fff;
  display:grid; place-items:center; font-size:13px; font-weight:600; border:0;
  cursor:pointer; font-family:inherit}
.menu{position:absolute; right:0; top:44px; min-width:220px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); box-shadow:0 6px 24px rgba(0,0,0,.08);
  padding:var(--s2) 0; display:none; z-index:70}
.menu.on{display:block}
.menu .mail{padding:var(--s2) var(--s4); font-size:12px; color:var(--text-2);
  border-bottom:1px solid var(--line-2); margin-bottom:var(--s1); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.menu button{display:block; width:100%; text-align:left; appearance:none; border:0;
  background:none; font:inherit; font-size:14px; padding:var(--s2) var(--s4);
  cursor:pointer; color:var(--text)}
.menu button:hover{background:var(--surface-2)}

/* ─── страница ─── */
.wrap{max-width:var(--w); margin:0 auto; padding:var(--s6) var(--s5) var(--s7)}
.view{display:none}
.view.on{display:block}
h1{font-size:22px; font-weight:600; letter-spacing:-.015em; line-height:1.25;
  margin-bottom:var(--s2)}
.lead{color:var(--text-2); font-size:14px; max-width:78ch; margin-bottom:var(--s5)}
h2{font-size:16px; font-weight:600; letter-spacing:-.01em; line-height:1.3}
h3{font-size:14px; font-weight:600}
.hint{font-size:13px; color:var(--text-2); line-height:1.5}
.muted{color:var(--text-2)}
.small{font-size:12px; color:var(--text-2)}

/* подвкладки внутри «Результатов» */
.subtabs{display:flex; gap:var(--s5); border-bottom:1px solid var(--line);
  margin-bottom:var(--s5)}
.subtabs button{appearance:none; border:0; background:none; font:inherit; font-size:14px;
  color:var(--text-2); cursor:pointer; padding:0 0 10px; position:relative}
.subtabs button.on{color:var(--text); font-weight:500}
.subtabs button.on::after{content:""; position:absolute; left:0; right:0; bottom:-1px;
  height:2px; background:var(--blue)}

/* ─── лист с секциями ─── */
.sheet{background:var(--surface); border:1px solid var(--line); border-radius:var(--r)}
.sheet + .sheet{margin-top:var(--s4)}
.sec{padding:var(--s5)}
.sec + .sec{border-top:1px solid var(--line)}
.sec-h{display:flex; align-items:baseline; gap:var(--s3); margin-bottom:var(--s3)}
.sec-h h2{flex:1; min-width:0}
.sec-h .status{flex:none}
.sec .why{font-size:13px; color:var(--text); line-height:1.5; margin-bottom:var(--s3);
  max-width:80ch}
.sec .why.muted{color:var(--text-2)}
.form{max-width:var(--w-form)}
.narrow{max-width:var(--w-narrow); margin:0 auto}

/* ─── статус словом ─── */
.status{font-size:13px; font-weight:500; color:var(--text-2); white-space:nowrap}
.status.ok{color:var(--green)}
.status.warn{color:var(--amber)}
.status.bad{color:var(--red)}
.status::before{content:""; display:inline-block; width:8px; height:8px;
  border-radius:50%; background:currentColor; margin-right:6px; vertical-align:1px}
.status.plain::before{display:none}

/* ─── сообщения: один компонент ─── */
.msg{border:1px solid var(--line); border-radius:var(--r); padding:var(--s3) var(--s4);
  font-size:13px; line-height:1.5; margin:var(--s3) 0; background:var(--surface-2)}
.msg.ok{border-color:#bbf7d0; background:var(--green-t); color:var(--green)}
.msg.warn{border-color:#fed7aa; background:var(--amber-t); color:var(--amber)}
.msg.bad{border-color:#fecaca; background:var(--red-t); color:var(--red)}
.msg a,.msg .link{color:inherit; text-decoration:underline}
.toast{position:fixed; left:50%; top:68px; transform:translateX(-50%); z-index:90;
  max-width:min(640px,calc(100vw - 32px)); background:var(--text); color:#fff;
  border-radius:var(--r); padding:var(--s3) var(--s4); font-size:13px; line-height:1.45;
  box-shadow:0 8px 24px rgba(0,0,0,.18); display:none}
.toast.on{display:block}
.toast.ok{background:var(--green)}
.empty{padding:var(--s6) var(--s4); text-align:center; color:var(--text-2); font-size:14px}
.empty .btn{margin-top:var(--s3)}

/* ─── кнопки ─── */
.btn{appearance:none; display:inline-flex; align-items:center; justify-content:center;
  gap:6px; height:36px; padding:0 14px; border-radius:var(--r); border:1px solid var(--blue);
  background:var(--blue); color:#fff; font:inherit; font-size:14px; font-weight:500;
  text-decoration:none; cursor:pointer; white-space:nowrap}
.btn:hover{background:var(--blue-d); border-color:var(--blue-d)}
.btn.sec{background:var(--surface); color:var(--text); border-color:var(--line)}
.btn.sec:hover{background:var(--surface-2); border-color:#cfd4da}
.btn.danger{background:var(--surface); color:var(--red); border-color:var(--line)}
.btn.danger:hover{background:var(--red-t); border-color:#fecaca}
.btn.sm{height:28px; padding:0 10px; font-size:13px}
.btn:disabled{opacity:.5; cursor:not-allowed}
.link{appearance:none; background:none; border:0; padding:0; color:var(--blue);
  font:inherit; font-size:13px; cursor:pointer; text-decoration:none}
.link:hover{text-decoration:underline}
.link.danger{color:var(--red)}
.actions{display:flex; gap:var(--s2); flex-wrap:wrap; align-items:center}

/* ─── формы ─── */
input:not([type=radio],[type=checkbox],[type=file]),select,textarea{
  font:inherit; font-size:14px; height:40px; padding:0 12px; border:1px solid var(--line);
  border-radius:var(--r); background:var(--surface); color:var(--text); width:100%}
textarea{height:auto; padding:10px 12px}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--blue);
  box-shadow:0 0 0 3px var(--blue-t)}
input[type=radio],input[type=checkbox]{width:16px; height:16px; flex:none;
  accent-color:var(--blue)}
label.fl{display:block; font-size:13px; color:var(--text-2); margin-bottom:6px}
.field{margin-bottom:var(--s4)}
.row{display:flex; align-items:center; gap:var(--s3); min-height:44px; padding:6px 0;
  border-bottom:1px solid var(--line-2)}
.row:last-child{border-bottom:0}
.row .nm{flex:1; min-width:0; font-size:14px}
.row .nm .hint{display:block}
.row input[type=number]{width:140px; text-align:right; font-variant-numeric:tabular-nums}
.row select{width:auto; max-width:100%}
.row .val{color:var(--text-2); font-variant-numeric:tabular-nums; text-align:right;
  overflow-wrap:anywhere}
.choice{display:flex; gap:var(--s3); align-items:flex-start; padding:8px 0; cursor:pointer}
.choice input{margin-top:3px}
.choice .t{display:block; font-size:14px; font-weight:500}
.choice .d{display:block; font-size:13px; color:var(--text-2); margin-top:2px}
.grid2{display:grid; gap:var(--s3) var(--s5);
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.seg{display:inline-flex; border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden}
.seg button{appearance:none; border:0; background:var(--surface); color:var(--text-2);
  font:inherit; font-size:13px; padding:6px 12px; cursor:pointer}
.seg button + button{border-left:1px solid var(--line)}
.seg button.on{background:var(--blue-t); color:var(--blue); font-weight:500}
details.more > summary{list-style:none; cursor:pointer; font-size:13px; color:var(--blue);
  user-select:none}
details.more > summary::-webkit-details-marker{display:none}
details.more[open] > summary{margin-bottom:var(--s2)}
details.more{margin-top:var(--s2)}

/* ─── файлы в поле ─── */
.filerow{display:flex; align-items:center; gap:var(--s3); padding:10px 0;
  border-bottom:1px solid var(--line-2); font-size:14px}
.filerow .nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.filerow .meta{color:var(--text-2); font-size:13px; white-space:nowrap}
.filerow .acts{display:flex; gap:var(--s3); flex:none}
.filenote{font-size:13px; color:var(--amber); padding:0 0 10px}
.dropline{border:1px dashed #cfd4da; border-radius:var(--r); padding:12px 14px;
  font-size:13px; color:var(--text-2); cursor:pointer; text-align:center;
  margin-top:var(--s3); background:var(--surface)}
.dropline:hover,.dropline.over{border-color:var(--blue); color:var(--blue);
  background:var(--blue-t)}
.dropline b{color:var(--text); font-weight:500}
.dropline.busy{cursor:default; color:var(--text-2)}
.mapbox{margin-top:var(--s3); border:1px solid var(--line); border-radius:var(--r);
  padding:var(--s4); background:var(--surface-2)}
.maptable{width:100%; border-collapse:collapse; font-size:12px; margin-top:var(--s3);
  background:var(--surface)}
.maptable th,.maptable td{border:1px solid var(--line); padding:5px 8px; text-align:left;
  white-space:nowrap; max-width:220px; overflow:hidden; text-overflow:ellipsis}
.maptable thead th{background:var(--surface-2); font-weight:600; vertical-align:top}
.maptable select{font-size:12px; height:30px; padding:0 6px; width:100%}
.maptable tbody td{color:var(--text-2); font-variant-numeric:tabular-nums}
.scrollx{overflow-x:auto; -webkit-overflow-scrolling:touch}
.rules{font-size:13px; color:var(--text); line-height:1.55; max-width:80ch}
.rules ul{margin:8px 0 8px 18px}
.rules li{margin-bottom:6px}
.stickybar{position:sticky; bottom:0; background:var(--surface); border-top:1px solid var(--line);
  border-radius:0 0 var(--r) var(--r); padding:var(--s3) var(--s5); display:flex;
  gap:var(--s3); align-items:center; flex-wrap:wrap}
.stickybar .hint{flex:1; min-width:200px}
.spin{display:inline-block; width:14px; height:14px; border:2px solid var(--line);
  border-top-color:var(--blue); border-radius:50%; animation:sp .7s linear infinite;
  vertical-align:-2px; margin-right:6px}
@keyframes sp{to{transform:rotate(360deg)}}

/* ─── вход ─── */
.auth{max-width:400px; margin:6vh auto 0}
.auth .sheet{padding:var(--s6)}
.auth h1{text-align:center; margin-bottom:var(--s5)}
.switchline{text-align:center; font-size:13px; color:var(--text-2); margin-top:var(--s4)}
.switchline a{cursor:pointer}

/* ─── точки ─── */
.points{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:var(--s3); margin-top:var(--s4)}
.point{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:var(--s4); cursor:pointer; text-align:left; font:inherit; color:var(--text)}
.point:hover{border-color:var(--blue)}
.point .nm{font-weight:600; font-size:15px}
.point .meta{font-size:13px; color:var(--text-2); margin-top:4px}
.point.add{border-style:dashed; background:transparent}
.point.add .nm{color:var(--blue)}
.addform{display:flex; gap:var(--s2); margin-top:var(--s4); flex-wrap:wrap; align-items:center}
.addform input{max-width:320px}

/* ─── результат ─── */
.figure{display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap}
.figure .v{font-size:28px; font-weight:600; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; line-height:1.2}
.figure .l{font-size:14px; color:var(--text-2)}
.ctrl{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--s2) var(--s5)}
.ctrl div{display:flex; justify-content:space-between; gap:var(--s3); font-size:13px;
  padding:6px 0; border-bottom:1px solid var(--line-2)}
.ctrl div span:first-child{color:var(--text-2)}
.ctrl div span:last-child{font-variant-numeric:tabular-nums; font-weight:500}
.ctrl .ok{color:var(--green)} .ctrl .warn{color:var(--amber)} .ctrl .bad{color:var(--red)}
.summary{font-size:14px; margin:var(--s3) 0}
.summary b{color:var(--red)}
.dl{position:relative; display:inline-block}
.dl .menu{top:calc(100% + 6px); left:0; right:auto}

/* ─── таблица ─── */
.tbar{display:flex; gap:var(--s2); align-items:center; margin-bottom:var(--s3); flex-wrap:wrap}
.tbar input[type=search]{flex:1; min-width:180px}
.tbar select{width:auto; min-width:160px}
.tablewrap{overflow:auto; max-height:72vh; border:1px solid var(--line); border-radius:var(--r);
  -webkit-overflow-scrolling:touch; background:var(--surface)}
table.grid{width:100%; border-collapse:separate; border-spacing:0; font-size:13px;
  table-layout:fixed; min-width:880px}
table.grid th{position:sticky; top:0; z-index:2; background:var(--surface-2); text-align:right;
  font-size:12px; font-weight:600; color:var(--text); padding:8px 10px; height:44px; vertical-align:top;
  line-height:1.3;
  border-bottom:1px solid var(--line); cursor:pointer; user-select:none; white-space:nowrap;
  width:96px}
table.grid th:first-child,table.grid td:first-child{position:sticky; left:0; z-index:1;
  background:var(--surface); text-align:left; width:300px; min-width:300px; max-width:300px;
  box-shadow:inset -1px 0 var(--line); overflow:hidden}
table.grid th:first-child{z-index:3; background:var(--surface-2)}
table.grid td{padding:0 10px; height:36px; border-bottom:1px solid var(--line-2);
  text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
table.grid td.num{cursor:help}
table.grid td.num:hover{background:var(--blue-t)}
table.grid tr.grp{cursor:pointer}
table.grid tr.grp td{font-weight:600; background:var(--surface-2)}
table.grid tr.lin{cursor:pointer}
table.grid tr.sku td:first-child{color:var(--text-2)}
table.grid tr.total td{font-weight:600; background:var(--surface-2)}
table.grid tr.below td{background:var(--red-t)}
table.grid tr.below td:first-child{box-shadow:inset 3px 0 0 var(--red), inset -1px 0 var(--line)}
table.grid th .u{display:block; font-weight:400; color:var(--text-3); font-size:11px}
.tw{display:inline-block; width:14px; color:var(--text-3); font-size:10px}
.pad{padding-left:var(--s5)}
.pad2{padding-left:var(--s6)}
.nmcell{display:flex; align-items:center; gap:6px; min-width:0; white-space:nowrap}
.nmcell .t{flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis}
.cnt{color:var(--text-3); font-size:12px; flex:none}
.mark{font-size:12px; color:var(--text-2); flex:none; text-decoration:underline dotted}
.mark.bad{color:var(--red)}
.mark.amber{color:var(--amber)}
.mark.abc{color:var(--text-2); font-weight:500; text-decoration:none}
.tinfo{font-size:13px; color:var(--text-2); margin-top:var(--s3); line-height:1.5}
#pop{position:fixed; z-index:200; max-width:340px; background:var(--text); color:#fff;
  border-radius:var(--r); padding:10px 12px; font-size:12px; line-height:1.5;
  box-shadow:0 8px 24px rgba(0,0,0,.2); pointer-events:none; display:none}
#pop.on{display:block}
#pop b{color:#fff}
#pop .r{display:flex; justify-content:space-between; gap:14px; font-variant-numeric:tabular-nums}
#pop .r span:last-child{white-space:nowrap}
#pop hr{border:0; border-top:1px solid rgba(255,255,255,.2); margin:7px 0}

/* ─── аккаунт ─── */
.ledger .row .nm{font-size:13px}
.ledger .val.plus{color:var(--green)}

/* ─── мобильная ─── */
@media(max-width:760px){
  .hrow{padding:0 var(--s4); gap:var(--s3); height:52px}
  .tabs{height:52px; gap:var(--s4)}
  .tabs button{height:52px; font-size:13px}
  .crumb .cur{max-width:140px}
  .crumb .sep,.crumb a{display:none}
  .wrap{padding:var(--s5) var(--s4) var(--s7)}
  .sec{padding:var(--s4)}
  .stickybar{position:fixed; left:0; right:0; bottom:0; border-radius:0; z-index:50}
  table.grid th:first-child,table.grid td:first-child{width:200px; min-width:200px; max-width:200px}
  table.grid th{width:88px}
  .tbar select{min-width:0; flex:1}
  .row{flex-wrap:wrap}
  .row input[type=number]{width:120px}
  .filerow{flex-wrap:wrap}
  .filerow .nm{flex-basis:100%; white-space:normal}
}
@media(max-width:480px){
  .tabs{gap:var(--s3)}
  .tabs button{font-size:12px}
  .brand{font-size:15px}
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}