/* ================================================================
   Планировщик поставок Ozon — оформление (тестовая версия)
   Тема, акцент и положение меню переключаются атрибутами на <html>:
   data-theme="light|dark", data-accent="blue|violet|teal", data-nav="side|top"
   ================================================================ */

:root{
  color-scheme:light;
  --bg:#F5F6F8; --panel:#FFFFFF; --side-bg:#FBFBFC; --surface-2:#F1F3F6; --row-hover:#F6F8FB;
  --border:#E3E6EB; --border-soft:#EDEFF3; --border-strong:#C9CED8;
  --text:#171B26; --text-soft:#5E6675; --text-faint:#8A92A0;

  --accent:#2563EB; --accent-hover:#1D4FD0; --accent-soft:#E8EFFD; --accent-text:#1E4FCB;
  --danger:#D13438; --danger-hover:#B92B2F;

  --green-bg:#E3F4E9; --green-fg:#1F7A3D;
  --red-bg:#FCE8E6;   --red-fg:#B3261E;
  --amber-bg:#FDF1DC; --amber-fg:#8A5A0F; --amber-border:#F0D9AF;
  --blue-bg:var(--accent-soft); --blue-fg:var(--accent-text);
  --gray-bg:#EEF0F3;  --gray-fg:#5B6472;

  --macro-1:#3B82C4; --macro-2:#3F9B63; --macro-3:#C7772E; --macro-4:#8A63C9;

  --shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --shadow-lg:0 12px 32px rgba(16,24,40,.14),0 2px 6px rgba(16,24,40,.06);
  --radius:.875rem; --radius-sm:.5625rem;
  --side-w:15.5rem;

  --mono:ui-monospace,"Cascadia Mono","JetBrains Mono",Consolas,monospace;
  --sans:"Inter","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;

  /* имена из прежней версии — на них ссылается app.js */
  --navy:var(--text); --navy-2:var(--text); --amber:var(--accent); --amber-dark:var(--accent-hover);

  /* таблицы: фон области и закреплённых ячеек */
  --table-bg:var(--panel); --sticky-bg:var(--panel); --sticky-head:var(--surface-2); --sticky-hover:var(--row-hover);
}
:root[data-accent="violet"]{--accent:#6741D9;--accent-hover:#5733C4;--accent-soft:#EFEAFD;--accent-text:#5733C4}
:root[data-accent="teal"]{--accent:#0B7F70;--accent-hover:#086B5E;--accent-soft:#DFF3EF;--accent-text:#086B5E}

:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0F1218; --panel:#171B23; --side-bg:#131720; --surface-2:#1E232D; --row-hover:#1C212B;
  --border:#2A303C; --border-soft:#222834; --border-strong:#3A4252;
  --text:#E6E9EF; --text-soft:#9AA3B2; --text-faint:#6F7887;

  --accent:#3B73E6; --accent-hover:#4F83EE; --accent-soft:rgba(91,141,239,.17); --accent-text:#8FB2F7;
  --danger:#D13438; --danger-hover:#E0474B;

  --green-bg:rgba(52,168,83,.17);  --green-fg:#6FD08C;
  --red-bg:rgba(234,67,53,.17);    --red-fg:#F28B82;
  --amber-bg:rgba(240,170,60,.15); --amber-fg:#F2C56B; --amber-border:rgba(240,170,60,.32);
  --gray-bg:#252B36;               --gray-fg:#A2ABBA;

  --shadow-sm:none;
  --shadow-lg:0 16px 40px rgba(0,0,0,.55);
}
:root[data-theme="dark"][data-accent="violet"]{--accent:#7557E8;--accent-hover:#8A70EE;--accent-soft:rgba(155,133,245,.18);--accent-text:#B5A4F8}
:root[data-theme="dark"][data-accent="teal"]{--accent:#0C8474;--accent-hover:#109886;--accent-soft:rgba(53,191,169,.16);--accent-text:#5FD0BD}

*{box-sizing:border-box}
*{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:.875rem;line-height:1.45;
  -webkit-font-smoothing:antialiased}
h1,h2,h3{font-weight:650;margin:0 0 .5rem}
b{font-weight:650}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ------------------------------------------------------------ каркас */
.app{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);min-height:100vh}
.content{min-width:0;display:flex;flex-direction:column}

.sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:.25rem;
  background:var(--side-bg);border-right:1px solid var(--border);padding:.875rem .625rem;overflow-y:auto}
.brand{display:flex;align-items:center;gap:.625rem;padding:2px .5rem .625rem}
.brand .logo{width:2.125rem;height:2.125rem;flex:none;border-radius:.625rem;background:var(--accent);color:#fff;
  display:grid;place-items:center}
.brand .logo svg{width:1.1875rem;height:1.1875rem;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.brand .title{font-size:.9062rem;font-weight:650;line-height:1.2;white-space:nowrap}
.brand .subtitle{font-size:.75rem;color:var(--text-faint);white-space:nowrap}
.testpill{margin-left:auto;font-size:.6562rem;font-weight:650;letter-spacing:.04em;text-transform:uppercase;
  padding:2px .4375rem;border-radius:62.4375rem;background:var(--amber-bg);color:var(--amber-fg)}

nav.tabs{display:flex;flex-direction:column;gap:2px}
.nav-group{font-size:.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-faint);padding:.875rem .625rem .375rem;white-space:nowrap}
nav.tabs button{display:flex;align-items:center;gap:.625rem;width:100%;border:0;background:transparent;
  padding:.5rem .625rem;border-radius:.5rem;font-family:var(--sans);font-size:.8438rem;font-weight:500;
  color:var(--text-soft);cursor:pointer;text-align:left;white-space:nowrap;
  transition:background .12s,color .12s}
nav.tabs button svg{width:1.0625rem;height:1.0625rem;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
nav.tabs button:hover{background:var(--surface-2);color:var(--text)}
nav.tabs button.active{background:var(--accent-soft);color:var(--accent-text);font-weight:600}

/* --------------------------------------------------- шапка страницы */
header.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:.875rem 1.25rem;flex-wrap:wrap;
  padding:.75rem 1.75rem;background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.pagehead{min-width:0}
.pagehead .crumb{font-size:.75rem;color:var(--text-faint);line-height:1.3}
.pagehead h1{font-size:1.25rem;letter-spacing:-.01em;margin:0;line-height:1.25}
.topbar .kpi{display:flex;margin-left:auto;background:var(--panel);border:1px solid var(--border);
  border-radius:.75rem;box-shadow:var(--shadow-sm)}
.topbar .kpi .box{padding:.4375rem 1rem;border-left:1px solid var(--border-soft);text-align:left}
.topbar .kpi .box:first-child{border-left:0}
.topbar .kpi .lbl{font-size:.6875rem;color:var(--text-soft);white-space:nowrap}
.topbar .kpi .num{font-size:1.0625rem;font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.25}
.topbar .kpi .box.main .num{color:var(--accent-text)}

.viewmenu{position:relative}
.iconbtn{width:2.375rem;height:2.375rem;display:grid;place-items:center;border-radius:.625rem;cursor:pointer;
  background:var(--panel);border:1px solid var(--border);color:var(--text-soft);box-shadow:var(--shadow-sm)}
.iconbtn:hover{color:var(--text);background:var(--surface-2)}
.iconbtn svg{width:1.125rem;height:1.125rem;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.popover{position:absolute;right:0;top:2.875rem;z-index:60;width:21.25rem;background:var(--panel);
  border:1px solid var(--border);border-radius:.75rem;box-shadow:var(--shadow-lg);padding:.375rem .875rem}
.popover[hidden]{display:none}
.pop-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.5625rem 0;
  font-size:.8125rem;color:var(--text-soft)}
.pop-row + .pop-row{border-top:1px solid var(--border-soft)}
.seg{display:inline-flex;background:var(--surface-2);border-radius:.5rem;padding:2px}
.seg button{border:0;background:transparent;font-family:var(--sans);font-size:.7812rem;font-weight:500;
  color:var(--text-soft);padding:.3125rem .6875rem;border-radius:.375rem;cursor:pointer}
.seg button.on{background:var(--panel);color:var(--text);font-weight:600;box-shadow:var(--shadow-sm)}
:root[data-theme="dark"] .seg button.on{background:var(--border-strong)}
.swatches{display:flex;gap:.5rem}
.swatches button{width:1.375rem;height:1.375rem;border-radius:50%;border:2px solid var(--panel);cursor:pointer;
  background:var(--sw);box-shadow:0 0 0 1px var(--border)}
.swatches button.on{box-shadow:0 0 0 2px var(--sw)}

main{width:100%;max-width:107.5rem;margin:0 auto;padding:1.25rem 1.75rem 2.5rem;flex:1}
.tabpanel{display:none}.tabpanel.active{display:block}
footer.appfooter{text-align:center;color:var(--text-faint);font-size:.75rem;padding:1rem}

/* --------------------------------------------------------- карточки */
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.125rem 1.25rem;margin-bottom:1rem;box-shadow:var(--shadow-sm)}
.card h2{font-size:.9375rem;color:var(--text);margin-bottom:.375rem}
.card .hint{color:var(--text-soft);font-size:.8125rem;margin:0 0 .875rem;line-height:1.55;max-width:68.75rem}
.card .hint b{color:var(--text)}
.row{display:flex;gap:.875rem 1rem;flex-wrap:wrap;align-items:flex-end}
.field{display:flex;flex-direction:column;gap:.3125rem;min-width:9.375rem}
.field label{font-size:.7812rem;font-weight:500;color:var(--text-soft)}
.field.wide{min-width:20rem;flex:1}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(23.75rem,1fr));gap:1rem}
.toolbar{display:flex;gap:.625rem;align-items:center;flex-wrap:wrap;margin-bottom:.75rem}
.spacer{flex:1}
.small-note{font-size:.7812rem;color:var(--text-soft)}
.mono{font-family:var(--mono)}
div.mono,span.mono{font-family:var(--sans);font-variant-numeric:tabular-nums}

/* ------------------------------------------------- поля и кнопки */
input[type=number],input[type=text],input[type=password],input[type=date],select,textarea{
  font-family:var(--sans);font-size:.8438rem;height:2.25rem;padding:0 .6875rem;border:1px solid var(--border);
  border-radius:var(--radius-sm);background:var(--panel);color:var(--text);
  transition:border-color .12s,box-shadow .12s}
textarea{height:auto;padding:.5rem .6875rem}
input.mono{font-family:var(--mono);font-size:.8125rem}
input.mono[type=number]{font-family:var(--sans);font-size:.8438rem;font-variant-numeric:tabular-nums}
input::placeholder{color:var(--text-faint)}
input[type=number]:hover,input[type=text]:hover,input[type=password]:hover,input[type=date]:hover,select:hover{
  border-color:var(--border-strong)}
input[type=number]:focus,input[type=text]:focus,input[type=password]:focus,input[type=date]:focus,
select:focus,textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
:root[data-theme="dark"] input[type=number],:root[data-theme="dark"] input[type=text],
:root[data-theme="dark"] input[type=password],:root[data-theme="dark"] input[type=date],
:root[data-theme="dark"] select,:root[data-theme="dark"] textarea{background:var(--bg)}
input[type=checkbox],input[type=radio]{accent-color:var(--accent);width:.9375rem;height:.9375rem;margin:0;flex:none}
input[type=range]{width:100%;accent-color:var(--accent)}
.checkbox-row{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;font-weight:500;color:var(--text)}
.field label.checkbox-row{color:var(--text);min-height:2.25rem}

button.btn{font-family:var(--sans);font-weight:600;font-size:.8125rem;height:2.25rem;padding:0 .9375rem;
  border-radius:var(--radius-sm);border:1px solid transparent;cursor:pointer;background:var(--accent);
  color:#fff;white-space:nowrap;transition:background .12s,border-color .12s}
button.btn:hover{background:var(--accent-hover)}
button.btn.secondary{background:var(--panel);border-color:var(--border);color:var(--text)}
button.btn.secondary:hover{background:var(--surface-2);border-color:var(--border-strong)}
button.btn.danger{background:var(--danger)}
button.btn.danger:hover{background:var(--danger-hover)}
button.btn.small{height:1.75rem;padding:0 .625rem;font-size:.7812rem;border-radius:.4375rem}
button.btn:disabled{opacity:.45;cursor:not-allowed}

/* ------------------------------------------------- метки статусов */
.status-pill,.badge{display:inline-block;padding:2px .5625rem;border-radius:62.4375rem;font-size:.7188rem;
  font-weight:600;white-space:nowrap;line-height:1.5}
.status-ok,.b-green{background:var(--green-bg);color:var(--green-fg)}
.status-warn,.b-red{background:var(--red-bg);color:var(--red-fg)}
.status-neutral,.b-gray{background:var(--gray-bg);color:var(--gray-fg)}
.status-info,.b-blue{background:var(--blue-bg);color:var(--blue-fg)}
.b-amber{background:var(--amber-bg);color:var(--amber-fg)}

/* ---------------------------------------------------------- таблицы */
.table-scroll{max-height:calc(100vh - 14.375rem);min-height:7.5rem;overflow:auto;border:1px solid var(--border);
  border-radius:.75rem;background:var(--table-bg)}
table.datatable{border-collapse:separate;border-spacing:0;width:100%;font-size:.8125rem}
table.datatable th{position:sticky;top:0;z-index:2;background:var(--sticky-head);color:var(--text-soft);
  text-align:left;padding:.5625rem .625rem;font-size:.7188rem;font-weight:600;white-space:nowrap;
  border-bottom:1px solid var(--border)}
table.datatable td{padding:.375rem .625rem;border-bottom:1px solid var(--border-soft);white-space:nowrap}
table.datatable tbody tr:last-child td{border-bottom:0}
table.datatable td.num,table.datatable th.num{text-align:right;font-variant-numeric:tabular-nums}
table.datatable td.mono{font-size:.7812rem}
table.datatable tbody tr:hover td{background:var(--row-hover)}
table.datatable tr.dim td{color:var(--text-faint)}
table.datatable tr.dim td > *{opacity:.55}
/* первая колонка остаётся на месте при прокрутке вбок */
table.datatable th:first-child,table.datatable td:first-child{position:sticky;left:0}
table.datatable th:first-child{z-index:3}
table.datatable td:first-child{z-index:1;font-weight:500;background:var(--sticky-bg);
  box-shadow:1px 0 0 var(--border-soft),-2px 0 0 var(--sticky-bg)}
table.datatable tbody tr:hover td:first-child{background:var(--sticky-hover)}
table.datatable th:first-child{box-shadow:1px 0 0 var(--border),-2px 0 0 var(--sticky-head)}
table.datatable input[type=number],table.datatable input[type=text]{height:1.75rem;padding:0 .5rem;
  font-size:.7812rem;width:5.25rem;border-radius:.4375rem}
table.datatable input[type=number]{text-align:right}
table.datatable select{height:1.75rem;padding:0 .375rem;font-size:.7812rem;border-radius:.4375rem}

/* --------------------------------------------------------- кластеры */
.cluster-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(16.25rem,1fr));gap:.625rem}
.cluster-card{border:1px solid var(--border);border-radius:.625rem;padding:.5625rem .75rem;display:flex;
  align-items:center;gap:.625rem;border-left:4px solid var(--gray-fg);background:var(--panel);
  transition:border-color .12s,background .12s}
label.cluster-card{cursor:pointer}
label.cluster-card:hover{background:var(--row-hover)}
.cluster-card.off{opacity:.5}
.cluster-card .name{font-weight:550;font-size:.8125rem;flex:1}
.cluster-card .share{font-size:.7188rem;color:var(--text-soft);font-variant-numeric:tabular-nums}
.cluster-card input[type=number]{width:3.875rem;height:1.875rem;padding:0 .5rem;text-align:right}
.macro-block{margin-bottom:1.125rem}
.macro-title{font-weight:600;font-size:.8438rem;margin:.25rem 0 .625rem 2px;display:flex;align-items:center;gap:.5rem}
.macro-dot{width:.625rem;height:.625rem;border-radius:.1875rem;display:inline-block}

/* ---------------------------------------------- ползунки, журнал */
.slider-box{min-width:16.25rem;flex:1}
.slider-box .head{display:flex;justify-content:space-between;font-size:.7812rem;font-weight:500;color:var(--text-soft)}
.slider-box .val{font-weight:650;color:var(--accent-text);font-variant-numeric:tabular-nums}
.slider-box .note{font-size:.75rem;color:var(--text-soft);margin-top:2px;line-height:1.45}

.joblog{font-family:var(--mono);font-size:.75rem;background:#0F1726;color:#C8D4E6;border-radius:.625rem;
  padding:.75rem .875rem;max-height:15rem;overflow:auto;white-space:pre-wrap;border:1px solid transparent}
:root[data-theme="dark"] .joblog{background:#0B0E13;border-color:var(--border)}
.warnbox{background:var(--amber-bg);border:1px solid var(--amber-border);border-radius:.625rem;padding:.6875rem .875rem;
  font-size:.8125rem;line-height:1.6;margin-bottom:.75rem}
.warnbox b{color:var(--amber-fg)}

/* ------------------------------------------------- полоски, график */
.bars{display:flex;flex-direction:column;gap:.375rem}
.bar-row{display:flex;align-items:center;gap:.625rem;font-size:.8125rem}
.bar-row .lbl{width:13.125rem;flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-soft)}
.bar-row .track{flex:1;background:var(--surface-2);border-radius:62.4375rem;height:.625rem;overflow:hidden}
.bar-row .fill{display:block;height:100%;background:var(--accent);border-radius:62.4375rem}
.bar-row .v{width:4.875rem;text-align:right;flex:none;font-variant-numeric:tabular-nums}
.spark{display:flex;align-items:flex-end;gap:2px;height:5.625rem}
.spark div{flex:1;background:var(--accent);opacity:.8;min-height:1px;border-radius:2px 2px 0 0}
.spark div:hover{opacity:1}

/* ------------------------------------------------------------ окно */
.overlay{position:fixed;inset:0;background:rgba(10,14,22,.55);display:none;align-items:center;
  justify-content:center;z-index:80;padding:1.25rem}
.overlay.on{display:flex}
.overlay .box{background:var(--panel);border:1px solid var(--border);border-radius:1rem;padding:1.375rem 1.5rem;
  min-width:min(26.25rem,100%);max-width:47.5rem;max-height:90vh;overflow:auto;box-shadow:var(--shadow-lg)}
.overlay .box h2{font-size:1.0625rem;margin-bottom:.625rem}

@media (min-width:761px){
/* ============================================== меню сверху (вариант) */
:root[data-nav="top"] .app{display:block}
:root[data-nav="top"] .sidebar{position:sticky;top:0;z-index:40;height:auto;flex-direction:row;
  align-items:center;gap:.875rem;padding:.5rem 1.25rem;border-right:0;border-bottom:1px solid var(--border);
  overflow:visible}
:root[data-nav="top"] .brand{padding:0}
:root[data-nav="top"] .brand .subtitle{display:none}
:root[data-nav="top"] .testpill{margin-left:.25rem}
:root[data-nav="top"] nav.tabs{flex-direction:row;flex-wrap:wrap;align-items:center;flex:1;min-width:0;gap:2px 1px}
:root[data-nav="top"] .nav-group{font-size:0;padding:0;margin:0 .4375rem;width:1px;height:1.25rem;flex:none;
  background:var(--border)}
:root[data-nav="top"] .nav-group:first-child{display:none}
:root[data-nav="top"] nav.tabs button{width:auto;padding:.375rem .5625rem;font-size:.8125rem}
:root[data-nav="top"] nav.tabs button svg{display:none}
:root[data-nav="top"] header.topbar{position:static;background:transparent;backdrop-filter:none;border-bottom:0;
  padding-bottom:0}
:root[data-nav="top"] .table-scroll{max-height:calc(100vh - 18.75rem)}
}

/* ================================================= шрифт Century Gothic */
:root[data-font="gothic"]{
  --sans:"Century Gothic","CenturyGothic","Avenir Next","Futura","URW Gothic","Segoe UI",system-ui,sans-serif}
/* у Century Gothic только обычное и жирное начертание: промежуточные веса приводим к ним */
:root[data-font="gothic"] body{font-size:.8438rem}
:root[data-font="gothic"] nav.tabs button{font-size:.8125rem;font-weight:400}
:root[data-font="gothic"] nav.tabs button.active{font-weight:700}
:root[data-font="gothic"] .field label,
:root[data-font="gothic"] .checkbox-row,
:root[data-font="gothic"] .slider-box .head,
:root[data-font="gothic"] .seg button,
:root[data-font="gothic"] table.datatable td:first-child,
:root[data-font="gothic"] .cluster-card .name{font-weight:400}
:root[data-font="gothic"] .seg button.on{font-weight:700}
:root[data-font="gothic"] table.datatable{font-size:.7812rem}
:root[data-font="gothic"] table.datatable th{font-size:.6875rem;letter-spacing:.02em}
:root[data-font="gothic"] .pagehead h1{font-size:1.3125rem;letter-spacing:0}
:root[data-font="gothic"] .card h2{font-size:.9688rem}
:root[data-font="gothic"] .brand .title{font-size:.875rem}

/* ====================================================== стиль «стекло» */
:root[data-style="glass"]{
  --bg:#E7ECF6;
  --glass:rgba(255,255,255,.50); --glass-strong:rgba(255,255,255,.78); --glass-border:rgba(255,255,255,.80);
  --glass-shadow:0 10px 36px rgba(40,52,100,.12),inset 0 1px 0 rgba(255,255,255,.65);
  --blur:blur(22px) saturate(170%);
  --glow-1:color-mix(in srgb,var(--accent) 36%,transparent); --glow-2:rgba(190,120,255,.30);
  --glow-3:rgba(60,200,235,.30); --glow-4:rgba(255,170,120,.22);

  --panel:rgba(255,255,255,.68); --side-bg:var(--glass);
  --surface-2:rgba(110,125,165,.13); --row-hover:rgba(255,255,255,.60);
  --border:rgba(40,55,95,.15); --border-soft:rgba(40,55,95,.08); --border-strong:rgba(40,55,95,.30);
  --text-soft:#4C566E; --text-faint:#77819A;
  --table-bg:rgba(255,255,255,.72); --sticky-bg:#F7F9FD; --sticky-head:#E9EDF6; --sticky-hover:#FDFEFF;
  --pop-bg:#FFFFFF;
  --radius:1.25rem; --radius-sm:.6875rem;
}
:root[data-style="glass"][data-theme="dark"]{
  --bg:#090D17;
  --glass:rgba(30,37,58,.48); --glass-strong:rgba(255,255,255,.12); --glass-border:rgba(255,255,255,.12);
  --glass-shadow:0 14px 40px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.07);
  --glow-1:color-mix(in srgb,var(--accent) 46%,transparent); --glow-2:rgba(140,80,255,.30);
  --glow-3:rgba(30,170,220,.22); --glow-4:rgba(255,120,90,.10);

  --panel:rgba(255,255,255,.08);
  --surface-2:rgba(255,255,255,.08); --row-hover:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.12); --border-soft:rgba(255,255,255,.07); --border-strong:rgba(255,255,255,.26);
  --text-soft:#AEB7C9; --text-faint:#7E889D;
  --table-bg:rgba(10,14,24,.42); --sticky-bg:#181D2C; --sticky-head:#20263A; --sticky-hover:#222940;
  --pop-bg:#181D2B;
}
:root[data-style="glass"] body{
  background:
    radial-gradient(900px 620px at 4% 0%,var(--glow-1),transparent 62%),
    radial-gradient(820px 600px at 98% 6%,var(--glow-2),transparent 60%),
    radial-gradient(900px 680px at 62% 108%,var(--glow-3),transparent 62%),
    radial-gradient(700px 520px at 18% 96%,var(--glow-4),transparent 60%),
    var(--bg);
  background-attachment:fixed}

:root[data-style="glass"] .card,
:root[data-style="glass"] .sidebar,
:root[data-style="glass"] header.topbar,
:root[data-style="glass"] .overlay .box{
  background:var(--glass);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
:root[data-style="glass"] .overlay{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
:root[data-style="glass"] .overlay .box{background:var(--pop-bg)}

/* плавающие панели */
:root[data-style="glass"] .app{grid-template-columns:calc(var(--side-w) + .875rem) minmax(0,1fr)}
:root[data-style="glass"] .sidebar{margin:.875rem 0 .875rem .875rem;top:.875rem;height:calc(100vh - 1.75rem);border-radius:1.375rem}
:root[data-style="glass"] header.topbar{margin:.875rem 1.375rem 0;top:.875rem;border-radius:1.125rem;padding:.5625rem .75rem .5625rem 1.25rem}
:root[data-style="glass"] main{padding:1.125rem 1.375rem 2.5rem}
:root[data-style="glass"] .topbar .kpi{background:transparent;border:0;box-shadow:none}
:root[data-style="glass"] .iconbtn{border-color:var(--glass-border)}
:root[data-style="glass"] .popover{background:var(--pop-bg);border-color:var(--glass-border);border-radius:1rem;top:3.125rem}
:root[data-style="glass"] .seg button.on{background:#fff}
:root[data-style="glass"][data-theme="dark"] .seg button.on{background:rgba(255,255,255,.22)}

:root[data-style="glass"] nav.tabs button{border-radius:.6875rem}
:root[data-style="glass"] nav.tabs button.active{background:var(--glass-strong);
  box-shadow:0 3px 12px rgba(40,52,100,.10),inset 0 1px 0 rgba(255,255,255,.5)}
:root[data-style="glass"][data-theme="dark"] nav.tabs button.active{box-shadow:inset 0 1px 0 rgba(255,255,255,.10)}
:root[data-style="glass"] .brand .logo{
  background:linear-gradient(140deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#B36BFF));
  box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 38%,transparent)}

:root[data-style="glass"] button.btn:not(.secondary):not(.danger){
  background:linear-gradient(140deg,var(--accent),color-mix(in srgb,var(--accent) 62%,#B36BFF));
  box-shadow:0 5px 14px color-mix(in srgb,var(--accent) 32%,transparent)}
:root[data-style="glass"] button.btn:not(.secondary):not(.danger):hover{filter:brightness(1.08)}
:root[data-style="glass"] button.btn.secondary{border-color:var(--glass-border);
  box-shadow:0 2px 8px rgba(40,52,100,.07)}
:root[data-style="glass"][data-theme="dark"] button.btn.secondary{box-shadow:none}
:root[data-style="glass"] button.btn:disabled{box-shadow:none}

:root[data-style="glass"][data-theme="dark"] input[type=number],
:root[data-style="glass"][data-theme="dark"] input[type=text],
:root[data-style="glass"][data-theme="dark"] input[type=password],
:root[data-style="glass"][data-theme="dark"] input[type=date],
:root[data-style="glass"][data-theme="dark"] select,
:root[data-style="glass"][data-theme="dark"] textarea{background:rgba(6,9,16,.40)}
:root[data-style="glass"][data-theme="dark"] select option{background:#181D2C}

:root[data-style="glass"] .table-scroll{border-radius:.875rem}
:root[data-style="glass"] .cluster-card{background:var(--panel);border-radius:.75rem}
:root[data-style="glass"] .warnbox{border-radius:.875rem}

@media (min-width:761px){
/* стекло + меню сверху */
:root[data-style="glass"][data-nav="top"] .sidebar{margin:.875rem 1.375rem 0;top:.875rem;height:auto;border-radius:1.125rem;padding:.5rem .875rem}
:root[data-style="glass"][data-nav="top"] header.topbar{margin:.5rem 1.375rem 0;padding:.375rem .25rem 0;background:transparent;
  border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
:root[data-style="glass"][data-nav="top"] .topbar .kpi{background:var(--glass);border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-radius:1rem}
}

/* ================================================================
   АВТОПОДСТРОЙКА под экран и устройство
   Размеры интерфейса заданы в rem, поэтому общий масштаб целиком
   управляется размером шрифта у <html>: он плавно растёт с шириной
   окна (ноутбук → большой монитор) и умножается на ручной «Размер».
   ================================================================ */
html{font-size:calc(clamp(15px,13px + .21vw,19px)*var(--zoom,1));-webkit-text-size-adjust:100%}
:root[data-scale="s"]{--zoom:.9}
:root[data-scale="l"]{--zoom:1.12}

main{max-width:137.5rem}
.iconbtn.menu-btn,.scrim{display:none}

/* ---- невысокие экраны (ноутбук 1366×768 и подобные): плотнее по вертикали */
@media (max-height:800px){
  .sidebar{padding-top:.6rem;padding-bottom:.6rem}
  .brand{padding-bottom:.35rem}
  .nav-group{padding-top:.6rem;padding-bottom:.25rem}
  nav.tabs button{padding-top:.4rem;padding-bottom:.4rem}
  .card{padding:.9rem 1.1rem;margin-bottom:.8rem}
  .card .hint{margin-bottom:.6rem}
}

/* ---- планшет и узкое окно: меню сворачивается до значков */
@media (min-width:761px) and (max-width:1180px){
  :root:not([data-nav="top"]){--side-w:3.9rem}
  :root:not([data-nav="top"]) .brand{padding:.125rem .25rem .6rem;justify-content:center}
  :root:not([data-nav="top"]) .brand .names,
  :root:not([data-nav="top"]) .testpill,
  :root:not([data-nav="top"]) nav.tabs button span{display:none}
  :root:not([data-nav="top"]) .nav-group{font-size:0;padding:0;height:1px;margin:.5rem;background:var(--border)}
  :root:not([data-nav="top"]) .nav-group:first-child{display:none}
  :root:not([data-nav="top"]) nav.tabs button{justify-content:center;padding:.6rem 0}
  :root[data-nav="top"] nav.tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  header.topbar{padding:.6rem 1.1rem}
  main{padding:1rem 1.1rem 2rem}
  .topbar .kpi .box{padding:.4rem .75rem}
  :root[data-style="glass"] header.topbar{margin:.75rem .9rem 0}
  :root[data-style="glass"] main{padding:.9rem .9rem 2rem}
  :root[data-style="glass"]:not([data-nav="top"]) .sidebar{margin:.75rem 0 .75rem .6rem;border-radius:1.1rem;padding:.75rem .35rem}
  :root[data-style="glass"][data-nav="top"] .sidebar{margin:.75rem .9rem 0}
}

/* ---- телефон: меню выезжает сбоку по кнопке, поля в две колонки */
@media (max-width:760px){
  html{font-size:calc(15px*var(--zoom,1))}
  .app{display:block}
  .iconbtn.menu-btn{display:grid}

  :root[data-style][data-nav] .sidebar{position:fixed;inset:0 auto 0 0;z-index:70;width:min(84vw,19rem);
    height:100vh;height:100dvh;margin:0;border-radius:0 1.25rem 1.25rem 0;padding:.9rem .6rem;overflow-y:auto;
    transform:translateX(-105%);transition:transform .22s ease}
  :root[data-style="glass"][data-nav] .sidebar{background:var(--pop-bg)}
  :root[data-menu="open"][data-style][data-nav] .sidebar{transform:none;box-shadow:var(--shadow-lg)}
  :root[data-menu="open"] .scrim{display:block;position:fixed;inset:0;z-index:65;background:rgba(10,14,22,.45)}

  :root[data-style][data-nav] header.topbar{position:sticky;top:0;margin:0;border-radius:0;border-width:0 0 1px;
    padding:.5rem .7rem;gap:.45rem .6rem}
  .pagehead{flex:1}
  .pagehead .crumb{display:none}
  :root[data-font] .pagehead h1{font-size:1.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  :root[data-style][data-nav] .topbar .kpi{order:3;width:100%;margin:0;overflow-x:auto;scrollbar-width:none;
    background:transparent;border:0;box-shadow:none;border-radius:0}
  .topbar .kpi .box{flex:1 0 auto;padding:0 .9rem 0 0;border-left:0}
  .topbar .kpi .lbl{font-size:.68rem}
  .topbar .kpi .num{font-size:.98rem}
  .popover{width:min(21.25rem,calc(100vw - 1.4rem))}

  :root[data-style][data-nav] main{padding:.7rem .55rem 2rem}
  .card{padding:.9rem .8rem;border-radius:1rem;margin-bottom:.7rem}
  .row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem .6rem;align-items:end}
  .field{min-width:0!important}
  .field.wide,.slider-box,.row > .field:has(.checkbox-row){grid-column:1/-1}
  .slider-box{min-width:0}
  .field input:not([type=checkbox]):not([type=radio]),.field select,.field button.btn{width:100%;min-width:0}
  .toolbar{gap:.5rem}
  .toolbar > input[type=text],.toolbar > select{min-width:0!important;flex:1 1 100%}
  .toolbar .spacer{display:none}
  .grid2,.cluster-grid{grid-template-columns:1fr}
  .bar-row .lbl{width:38%}
  .bar-row .v{width:auto;min-width:3rem}
  .bar-row .status-pill{white-space:normal;min-width:0;border-radius:.7rem}
  table.datatable td:first-child{max-width:9.5rem;overflow:hidden;text-overflow:ellipsis}
  .overlay{padding:.6rem;align-items:flex-end}
  .overlay .box{width:100%;min-width:0;border-radius:1.1rem;padding:1.1rem}
  footer.appfooter{padding:.75rem}
}

/* ---- сенсорный экран: крупнее всё, во что попадают пальцем */
@media (pointer:coarse){
  button.btn,input[type=number],input[type=text],input[type=password],input[type=date],select{min-height:2.75rem}
  button.btn.small{min-height:2.25rem;padding:0 .8rem}
  table.datatable input[type=number],table.datatable input[type=text],table.datatable select{height:2.25rem;min-height:2.25rem}
  input[type=checkbox],input[type=radio]{width:1.25rem;height:1.25rem}
  input[type=range]{height:2rem}
  nav.tabs button{padding-top:.7rem;padding-bottom:.7rem}
  .seg button{padding:.55rem .9rem}
  .swatches button{width:1.9rem;height:1.9rem}
  .iconbtn{width:2.75rem;height:2.75rem}
  .cluster-card{padding:.7rem .8rem}
}

/* ---- системные настройки устройства */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}
@media (prefers-reduced-transparency:reduce){
  :root[data-style="glass"]{--glass:rgba(255,255,255,.93);--blur:none}
  :root[data-style="glass"][data-theme="dark"]{--glass:rgba(24,29,43,.95)}
}