:root{--bg:#f4f5f7;--card:#fff;--tx:#1b2430;--mut:#6b7684;--br:#dfe4ea;--ac:#1f6feb;--ac-d:#1558c0;--err:#c62828;--ok:#2e7d32;--warn-bg:#fff1cc;--warn-br:#e09a00;--warn-tx:#5e3a00;color-scheme:light}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font:13px/1.4 "Segoe UI",system-ui,sans-serif;background:var(--bg);color:var(--tx)}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}

/* каркас */
#app{display:flex;flex-direction:column;height:100vh}
.top{display:flex;align-items:center;gap:8px;padding:8px 14px;background:var(--card);border-bottom:1px solid var(--br)}
.brand{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600}
.top-space{flex:1}
.who{color:var(--mut);margin-right:6px}
.layout{flex:1;display:grid;grid-template-columns:360px 1fr;min-height:0}
.left{background:var(--card);border-right:1px solid var(--br);overflow:auto;padding:4px 16px 24px}
.main{display:flex;flex-direction:column;min-width:0;min-height:0;padding:10px 12px 6px}
.tabs{display:flex;flex-wrap:wrap;gap:2px;border-bottom:1px solid var(--br)}
.tab{padding:7px 14px;background:#eef1f5;border:1px solid var(--br);border-bottom:0;border-radius:6px 6px 0 0;cursor:pointer;color:var(--mut)}
.tab.on{background:var(--card);color:var(--tx);font-weight:600}
.view{flex:1;min-height:0;overflow:auto;background:var(--card);border:1px solid var(--br);border-top:0;padding:10px}
.status{padding:6px 14px;background:#eaecef;color:#333;font-size:12px}

/* кнопки и поля */
.btn{padding:6px 12px;background:#fff;border:1px solid #c6ccd5;border-radius:5px;cursor:pointer}
.btn:hover{background:#f0f3f7}
.btn:disabled{opacity:.5;cursor:default}
.btn.primary{background:var(--ac);border-color:var(--ac);color:#fff;font-weight:600}
.btn.primary:hover{background:var(--ac-d)}
.btn.danger{color:var(--err)}
.btn.sm{padding:3px 9px}
.row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
input[type=text],input[type=email],input[type=number],input[type=password],input[type=date],select,textarea{width:100%;padding:6px 8px;border:1px solid #c6ccd5;border-radius:5px;background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(31,111,235,.35);border-color:var(--ac)}
input:disabled,select:disabled{background:#f3f4f6;color:#9aa3ae}
label.cb{display:flex;gap:6px;align-items:center;margin-top:6px;cursor:pointer}
label.cb input{margin:0}
.lbl{display:block;margin:9px 0 2px;color:#555}
.hint{color:#777;font-size:11px;margin-top:2px}
.pair{display:grid;grid-template-columns:1fr 20px 1fr;align-items:center;gap:0}
.pair .x{text-align:center;color:#555}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.radios{display:flex;gap:14px;margin-top:2px}
.radios label{display:flex;gap:4px;align-items:center;cursor:pointer}
.sep{height:1px;background:var(--br);margin:14px 0 6px}
h4.sec{margin:12px 0 4px;font-size:12px;text-transform:none;color:#555;font-weight:600}
.warn{background:var(--warn-bg);border:1px solid var(--warn-br);border-left-width:4px;border-radius:3px;padding:5px 8px;margin:5px 0 2px;color:var(--warn-tx);font-size:12px;font-weight:600;white-space:pre-wrap}

/* таблицы */
table.t{width:100%;border-collapse:collapse}
table.t th{position:sticky;top:-10px;background:#f1f3f6;text-align:left;font-weight:600;padding:6px 8px;border-bottom:1px solid var(--br);white-space:nowrap;z-index:1}
table.t td{padding:5px 8px;border-bottom:1px solid #eef0f3;vertical-align:top}
table.t tr.click{cursor:pointer}
table.t tr.click:hover{background:rgba(31,111,235,.07)}
table.t tr.sel{background:rgba(31,111,235,.14)}
table.t tr.grp td{background:#f4f5f7;font-weight:600}
table.t td.num,table.t th.num{text-align:right;white-space:nowrap}
.tag{display:inline-block;padding:1px 8px;border-radius:10px;font-size:11px;background:#eef1f5;border:1px solid var(--br)}
.tag.ok{color:var(--ok);border-color:#b7dcb9;background:#eef8ef}
.tag.bad{color:var(--err);border-color:#f0b9b9;background:#fdf0f0}
.mut{color:var(--mut)}
.total{margin-top:10px;font-size:15px;font-weight:600}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* схемы */
.svgbox{background:#fff;border:1px solid var(--br);overflow:auto;text-align:center}
.svgbox svg{width:100%;height:auto;max-width:100%}
.svgbox.fit svg{max-height:68vh}
.layers{display:flex;flex-wrap:wrap;gap:4px 16px;margin-bottom:6px}
.hide-mod .ly-mod,.hide-rx .ly-rx,.hide-psu .ly-psu,.hide-dim .ly-dim,.hide-lbl .lbl{display:none}

/* окна */
.overlay{position:fixed;inset:0;background:rgba(15,23,42,.5);display:flex;align-items:center;justify-content:center;z-index:50;padding:12px}
.modal{background:#fff;border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,.3);max-width:96vw;max-height:94vh;display:flex;flex-direction:column;min-width:380px}
.modal.wide{width:1100px}
.modal.xl{width:1380px;height:92vh}
.m-head{padding:12px 16px;border-bottom:1px solid var(--br);display:flex;align-items:center;gap:10px}
.m-head h3{margin:0;font-size:16px;flex:1}
.m-body{padding:14px 16px;overflow:auto;flex:1;min-height:0}
.m-foot{padding:10px 16px;border-top:1px solid var(--br);display:flex;gap:8px;justify-content:flex-end;align-items:center}
.x-btn{border:0;background:none;font-size:22px;line-height:1;cursor:pointer;color:#888}
.md h1{font-size:22px;margin:6px 0}.md h2{font-size:18px;margin:16px 0 6px}.md h3{font-size:15px;margin:12px 0 4px}
.md p{margin:6px 0}.md ul,.md ol{margin:4px 0 8px 18px;padding:0}.md hr{border:0;border-top:1px solid var(--br);margin:12px 0}

/* вход */
.login-card{background:#fff;border-radius:12px;padding:22px 24px;width:360px;box-shadow:0 12px 40px rgba(0,0,0,.3)}
.login-card h2{margin:0 0 2px;font-size:20px}
.login-head{display:flex;gap:12px;align-items:center;margin-bottom:8px}
.err{color:var(--err);margin-top:8px;min-height:18px}

/* КП */
.modal.kpm .m-body{padding:0;overflow:hidden;display:flex}
.kp-body{display:grid;grid-template-columns:430px 1fr;gap:0;width:100%;min-height:0}
.kp-left{overflow:auto;padding:12px 14px;border-right:1px solid var(--br);min-height:0}
.kp-right{background:#e4e7ec;overflow:auto;padding:8px;min-height:0}
.kp-pages{display:flex;flex-direction:column;align-items:center;gap:10px}
.kp-page img{width:100%;max-width:700px;background:#fff;border:1px solid #999;display:block}
.kp-pane{margin-top:10px}
.kp-grp{margin-bottom:8px}.cb.sub{margin-left:22px;margin-top:2px;font-size:13px}
.kp-custom{border:1px solid var(--br);border-radius:6px;padding:8px;margin-bottom:8px}
.grid4{display:grid;grid-template-columns:1.6fr 1fr .7fr 1fr;gap:8px;margin-top:6px}
.tabs.small .tab{padding:5px 10px;font-size:13px}
.modal.login{padding:22px 26px;width:360px;min-width:0}
.modal.login .lbl{margin-top:10px}
.sec{margin:14px 0 6px}
.kp-tabs{display:flex;gap:2px;margin-bottom:8px;border-bottom:1px solid var(--br)}
.box{border:1px solid var(--br);border-radius:6px;padding:8px 10px;margin-bottom:10px}
.box>b{display:block;margin-bottom:4px}
.tree details{margin:2px 0}.tree summary{cursor:pointer;padding:2px 0}
.tree .it{display:flex;gap:6px;align-items:center;padding:1px 0 1px 22px}
.tree .it .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tree .it .sm{color:var(--mut);white-space:nowrap}

.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);background:#1b2430;color:#fff;padding:9px 16px;border-radius:6px;z-index:80;max-width:90vw}
.spin{display:inline-block;width:12px;height:12px;border:2px solid #b9c3d1;border-top-color:var(--ac);border-radius:50%;animation:sp .8s linear infinite;vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}

@media (max-width:980px){
  #app{height:auto;min-height:100vh}
  .layout{grid-template-columns:1fr}
  .left{border-right:0;border-bottom:1px solid var(--br)}
  .cols2,.kp-body{grid-template-columns:1fr}
  .modal.wide,.modal.xl{width:96vw}
}

/* переключатель вида расчёта */
.seg{display:flex;background:#e9edf3;border-radius:9px;padding:3px;gap:3px}
.seg button{flex:1;border:0;background:none;padding:7px 8px;border-radius:7px;cursor:pointer;font:inherit;font-weight:600;color:#5b6678}
.seg button.on{background:#fff;color:#1558c0;box-shadow:0 1px 3px rgba(0,0,0,.18)}

/* левая панель: сворачиваемые разделы */
.acc{border:1px solid var(--br);border-radius:10px;margin-top:8px;background:#fff;overflow:hidden}
.acc-head{display:flex;align-items:center;gap:8px;width:100%;border:0;background:#f6f8fb;padding:9px 10px;cursor:pointer;font:inherit;text-align:left}
.acc-head:hover{background:#eef2f9}
.acc-title{font-weight:600;color:#1b2430;white-space:nowrap}
.acc-head .chev{display:inline-block;transition:transform .2s;color:#6b7686;font-size:18px;line-height:1;width:12px}
.acc.open>.acc-head .chev{transform:rotate(90deg)}
.sec-sum{margin-left:auto;font-size:12px;color:#7a8596;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.acc.open>.acc-head .sec-sum{opacity:0}
.sec-warn{color:#c77700;font-size:13px}
.acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease;visibility:hidden}
.acc.open>.acc-body{grid-template-rows:1fr;visibility:visible}
.acc-inner{overflow:hidden;min-height:0;padding:0 12px}
.acc.open>.acc-body>.acc-inner{padding:6px 12px 12px}
.acc-inner .sec.first{margin-top:4px}
.live{margin-top:10px;padding:8px 10px;border-radius:8px;background:#eef4ff;color:#1558c0;font-weight:600;font-size:13px;text-align:center}
.live.bump{animation:bump .45s ease}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.03);background:#dbe8ff}100%{transform:scale(1)}}
.panel-foot{position:sticky;bottom:0;margin:12px -2px 0;padding:10px 2px 8px;background:linear-gradient(to top,#fff 70%,rgba(255,255,255,0))}
.btn.big{width:100%;padding:11px;font-size:15px}
.pw-card{border:1px solid var(--br);border-radius:10px;padding:12px 14px;margin-bottom:12px;background:#f9fbfe}
.pw-card h4{margin:0 0 8px}
.pw-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}

/* ================= ТЁМНАЯ ТЕМА (графит, оранжевый — как на главной) ================= */
.theme-btn{min-width:38px;padding:6px 10px}
html[data-theme="dark"]{--bg:#25282c;--card:#2b2e33;--tx:#f0f0f0;--mut:#a2a6ad;--br:#3a3e45;--ac:#4cc9f0;--ac-d:#3bb5db;--err:#ff7468;--ok:#5fd38d;--warn-bg:#3a2e1a;--warn-br:#ffb347;--warn-tx:#ffd9a0;
  --sh:#17191c;--hi:#3d4147;color-scheme:dark}
html[data-theme="dark"] .top{box-shadow:0 6px 18px rgba(0,0,0,.35);border-bottom-color:transparent}
html[data-theme="dark"] .left{border-right-color:transparent;box-shadow:6px 0 18px rgba(0,0,0,.25)}
html[data-theme="dark"] .tab{background:var(--bg);border-color:transparent;color:var(--mut)}
html[data-theme="dark"] .tab.on{background:var(--card);color:var(--ac);text-shadow:0 0 10px rgba(76,201,240,.45)}
html[data-theme="dark"] .view{border-color:var(--br);box-shadow:inset 4px 4px 12px rgba(0,0,0,.35)}
html[data-theme="dark"] .status{background:#1d1f23;color:#7fb8cc;font-family:"Cascadia Mono",Consolas,monospace}
html[data-theme="dark"] .btn{background:var(--card);border:0;color:var(--tx);border-radius:10px;box-shadow:4px 4px 10px var(--sh),-4px -4px 10px var(--hi)}
html[data-theme="dark"] .btn:hover{background:var(--card);color:#a8e6fb}
html[data-theme="dark"] .btn:active{box-shadow:inset 3px 3px 8px var(--sh),inset -3px -3px 8px var(--hi)}
html[data-theme="dark"] .btn.primary{background:var(--ac);color:#06141a;box-shadow:0 0 14px rgba(76,201,240,.45),3px 3px 8px var(--sh)}
html[data-theme="dark"] .btn.primary:hover{background:var(--ac-d);color:#06141a}
html[data-theme="dark"] .btn.danger{color:var(--err)}
html[data-theme="dark"] input[type=text],html[data-theme="dark"] input[type=email],html[data-theme="dark"] input[type=number],html[data-theme="dark"] input[type=password],html[data-theme="dark"] input[type=date],html[data-theme="dark"] select,html[data-theme="dark"] textarea{background:#1f2226;border:0;color:var(--tx);border-radius:8px;box-shadow:inset 3px 3px 8px #000,inset -2px -2px 6px var(--hi)}
html[data-theme="dark"] input:focus,html[data-theme="dark"] select:focus,html[data-theme="dark"] textarea:focus{outline:2px solid rgba(76,201,240,.55)}
html[data-theme="dark"] input:disabled,html[data-theme="dark"] select:disabled{background:#222529;color:#6f747d}
html[data-theme="dark"] option{background:#2b2e33;color:var(--tx)}
html[data-theme="dark"] .lbl,html[data-theme="dark"] h4.sec,html[data-theme="dark"] .pair .x{color:#c3c6cc}
html[data-theme="dark"] .hint{color:#8a8f98}
html[data-theme="dark"] table.t th{background:#33373d;color:#a8e6fb}
html[data-theme="dark"] table.t td{border-bottom-color:#373b42}
html[data-theme="dark"] table.t tr.click:hover{background:rgba(76,201,240,.1)}
html[data-theme="dark"] table.t tr.sel{background:rgba(76,201,240,.2)}
html[data-theme="dark"] table.t tr.grp td{background:#30343a}
html[data-theme="dark"] .tag{background:#33373d;border-color:#454a52}
html[data-theme="dark"] .tag.ok{background:#1f3a2a;border-color:#2f6a47}
html[data-theme="dark"] .tag.bad{background:#40231f;border-color:#7a3a33}
html[data-theme="dark"] .svgbox{background:#14171a;border:0;border-radius:10px;box-shadow:inset 4px 4px 10px rgba(0,0,0,.45)}
/* схемы нарисованы тёмными линиями на светлом: инвертируем яркость, оттенки сохраняем; реалистичные детали (платы, БП) возвращаем как есть */
html[data-theme="dark"] .svgbox svg{filter:invert(1) hue-rotate(180deg)}
html[data-theme="dark"] .svgbox svg .real{filter:invert(1) hue-rotate(180deg)}
html[data-theme="dark"] .overlay{background:rgba(8,9,11,.7)}
html[data-theme="dark"] .modal,html[data-theme="dark"] .login-card{background:var(--card);box-shadow:12px 12px 30px rgba(0,0,0,.55),-6px -6px 18px rgba(255,255,255,.04)}
html[data-theme="dark"] .x-btn{color:#9aa0aa}
html[data-theme="dark"] .kp-right{background:#1d1f23}
html[data-theme="dark"] .box,html[data-theme="dark"] .kp-custom{border-color:var(--br)}
html[data-theme="dark"] .toast{background:#0f1113;color:#a8e6fb;box-shadow:0 0 0 1px #3a3e45}
html[data-theme="dark"] .spin{border-color:#4a4f58;border-top-color:var(--ac)}
html[data-theme="dark"] .seg{background:#1f2226;box-shadow:inset 3px 3px 8px #000,inset -2px -2px 6px var(--hi)}
html[data-theme="dark"] .seg button{color:var(--mut)}
html[data-theme="dark"] .seg button.on{background:var(--card);color:var(--ac);box-shadow:3px 3px 8px var(--sh),-2px -2px 6px var(--hi)}
html[data-theme="dark"] .acc{background:var(--card);border:0;box-shadow:5px 5px 12px var(--sh),-4px -4px 10px var(--hi)}
html[data-theme="dark"] .acc-head{background:transparent}
html[data-theme="dark"] .acc-head:hover{background:rgba(255,255,255,.04)}
html[data-theme="dark"] .acc-title{color:var(--tx)}
html[data-theme="dark"] .acc-head .chev{color:var(--ac)}
html[data-theme="dark"] .sec-sum{color:#7fb8cc}
html[data-theme="dark"] .sec-warn{color:#ffb347}
html[data-theme="dark"] .live{background:#1f2226;color:#a8e6fb;box-shadow:inset 3px 3px 8px #000,inset -2px -2px 6px var(--hi);font-family:"Cascadia Mono",Consolas,monospace;text-shadow:0 0 10px rgba(168,230,251,.5)}
html[data-theme="dark"] .panel-foot{background:linear-gradient(to top,var(--card) 70%,rgba(43,46,51,0))}
html[data-theme="dark"] .pw-card{background:#2f3338;border-color:var(--br)}
#who{cursor:pointer}
.lc-wm-on svg{-webkit-user-select:none;user-select:none}

/* уведомление о cookies (js/metrika.js) */
.cookie-note{position:fixed;left:16px;right:16px;bottom:16px;margin:0 auto;max-width:720px;display:flex;gap:14px;align-items:center;background:#1b2430;color:#fff;padding:12px 16px;border-radius:8px;z-index:90;font-size:13px;line-height:1.45;box-shadow:0 6px 24px rgba(0,0,0,.25)}
.cookie-note .btn{flex:none}
.cookie-note a{color:inherit;text-decoration:underline}
html[data-theme="dark"] .cookie-note{background:#0f1113;color:#cfd6dd;box-shadow:0 0 0 1px #3a3e45}
@media (max-width:560px){.cookie-note{flex-direction:column;align-items:stretch}}
