/* Демонстратор «Прогноз СН» — стили поверх kit.css (тёмная тема ПРОСТОР) */

/* ---------- плотность интерфейса ---------- */
.density-compact .pl-content{padding:16px;gap:12px;}
.density-compact .pl-panel{padding:13px;}
.density-comfy .pl-content{padding:32px;gap:24px;}
.density-comfy .pl-panel{padding:24px;}

/* ---------- боковая карточка ---------- */
.sn-side-card{margin-top:14px;background:var(--n-950);border:1px solid var(--border);border-radius:var(--r-3);padding:14px;}
.sn-side-big{font-family:var(--font-display);font-weight:500;font-size:30px;line-height:1;margin:8px 0 4px;color:var(--accent);}
.sn-side-big small{font-size:15px;color:var(--fg-2);}
.sn-side-sub{font-size:11.5px;color:var(--fg-3);}

/* ---------- верхняя панель: сценарий ---------- */
.pl-top{gap:18px;height:68px;}
.sn-scn{display:flex;align-items:center;gap:11px;margin-left:6px;}
.sn-scn-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--fg-3);font-weight:700;}
.sn-scn-seg{display:flex;gap:3px;background:var(--n-950);border:1px solid var(--border);border-radius:var(--r-2);padding:3px;}
.sn-scn-btn{display:flex;align-items:center;gap:7px;background:none;border:none;color:var(--fg-2);
  font-family:var(--font-body);font-size:13px;font-weight:600;padding:7px 13px;border-radius:var(--r-1);cursor:pointer;
  white-space:nowrap;transition:all .16s cubic-bezier(.2,.7,.3,1);}
.sn-scn-btn svg{width:15px;height:15px;}
.sn-scn-btn:hover{color:var(--fg-1);background:var(--n-800);}
.sn-scn-btn.on{background:var(--accent);color:#fff;}
.sn-scn-btn.on svg{color:#fff;}

/* часы + поток */
.sn-clock{display:flex;align-items:center;gap:8px;padding-right:4px;}
.sn-clock svg{width:16px;height:16px;color:var(--fg-3);}
.sn-clock-time{font-family:var(--font-display);font-weight:500;font-size:18px;font-variant-numeric:tabular-nums;letter-spacing:.02em;}
.sn-clock-date{font-size:11px;color:var(--fg-3);font-family:var(--font-mono);}
.sn-livebtn{display:inline-flex;align-items:center;gap:7px;background:var(--n-800);border:1px solid var(--border);
  color:var(--fg-2);font-family:var(--font-body);font-weight:700;font-size:12px;padding:7px 12px;border-radius:var(--r-pill);cursor:pointer;}
.sn-livebtn .d{width:7px;height:7px;border-radius:50%;background:var(--fg-3);}
.sn-livebtn.on{color:var(--ok);border-color:rgba(61,190,120,.4);background:var(--ok-bg);}
.sn-livebtn.on .d{background:var(--ok);animation:snpulse 1.6s infinite;}

/* ---------- заголовок страницы ---------- */
.sn-head-right{display:flex;align-items:center;gap:14px;}
.sn-updated{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--fg-3);font-family:var(--font-mono);}
.sn-updated svg{width:14px;height:14px;}
.spin{animation:snspin 2.4s linear infinite;}

/* ---------- KPI ---------- */
.sn-kpi-big{background:linear-gradient(180deg,var(--n-800),var(--n-900));border-color:var(--border-strong);}
.sn-kpi-big .pl-kpi-val{font-size:40px;}
.pl-kpi-val.acc{color:var(--accent);}
.pl-kpi-val.ok{color:var(--ok);}
.sn-kpi-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:2px;}
.pl-kpi-delta.flat{color:var(--fg-3);}
.sn-kpi-hint{font-size:11.5px;color:var(--fg-3);}

/* ---------- панель ---------- */
.sn-panel-sub{font-size:12px;color:var(--fg-3);margin-top:4px;}

/* ---------- легенда графика ---------- */
.sn-legend{display:flex;gap:16px;align-items:center;}
.sn-legend span{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--fg-2);font-weight:600;}
.sw{width:14px;height:0;border-radius:2px;display:inline-block;}
.sw-forecast{border-top:2.5px solid var(--accent);}
.sw-fact{border-top:2.5px solid var(--fg-1);}
.sw-corridor{width:14px;height:11px;border:1px dashed rgba(61,190,120,.7);background:rgba(61,190,120,.14);border-radius:2px;}

/* ====================== ГРАФИКИ (SVG) ====================== */
.sn-chart{width:100%;height:auto;display:block;}
.sn-chart line,.sn-chart polyline,.sn-chart polygon{vector-effect:non-scaling-stroke;}
.sn-grid{stroke:var(--border);stroke-width:1;opacity:.6;}
.sn-zero{stroke:var(--border-strong);stroke-width:1.4;}
.sn-axis{fill:var(--fg-3);font-family:var(--font-mono);font-size:10px;}
.sn-axis.acc-d{fill:var(--accent);font-weight:700;}
.sn-axis.ok-d{fill:var(--ok);font-weight:700;}
.sn-corridor{fill:rgba(61,190,120,.10);stroke:none;}
.sn-corridor-edge{fill:none;stroke:rgba(61,190,120,.55);stroke-width:1;stroke-dasharray:4 4;}
.sn-future{fill:rgba(8,8,7,.34);}
.sn-forecast{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round;}
.sn-forecast.draw{animation:sndraw 1.1s cubic-bezier(.2,.7,.3,1) forwards;}
.sn-fact{fill:none;stroke:var(--fg-1);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round;}
.sn-fact-dot{fill:var(--fg-1);}
.sn-now{stroke:var(--accent);stroke-width:1.4;stroke-dasharray:3 3;opacity:.8;}
.sn-now-dot{fill:var(--accent);}
.sn-now-pulse{fill:none;stroke:var(--accent);stroke-width:1.5;transform-origin:center;transform-box:fill-box;animation:snring 1.8s ease-out infinite;}
.sn-now-lbl{fill:var(--accent);font-family:var(--font-display);font-size:9px;font-weight:700;letter-spacing:.14em;}
.sn-thresh{stroke:var(--danger);stroke-width:1.2;stroke-dasharray:5 4;opacity:.7;}
.sn-goal{stroke:var(--ok);stroke-width:1.2;stroke-dasharray:5 4;opacity:.7;}

/* ---------- SHAP ---------- */
.sn-shap{display:flex;flex-direction:column;gap:9px;}
.sn-shap-base{display:flex;align-items:center;gap:12px;padding:11px 14px;background:var(--n-950);border:1px solid var(--border);
  border-radius:var(--r-2);margin-bottom:6px;flex-wrap:wrap;}
.sn-shap-base b{font-family:var(--font-display);font-weight:500;font-size:21px;}
.sn-shap-base b small{font-size:12px;color:var(--fg-3);}
.sn-shap-base b.acc{color:var(--accent);}
.sn-shap-arrow{font-size:12px;color:var(--fg-3);font-weight:600;}
.sn-shap-row{display:grid;grid-template-columns:240px 1fr 56px;align-items:center;gap:14px;}
.sn-shap-name{font-size:13.5px;color:var(--fg-1);text-align:right;}
.sn-shap-track{position:relative;height:18px;background:var(--n-950);border-radius:var(--r-1);overflow:hidden;}
.sn-shap-mid{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--border-strong);}
.sn-shap-bar{position:absolute;top:3px;bottom:3px;border-radius:2px;animation:sngrow .5s ease-out;}
.sn-shap-bar.pos{background:var(--accent);}
.sn-shap-bar.neg{background:var(--info);}
.sn-shap-val{font-family:var(--font-mono);font-size:13px;font-weight:700;text-align:left;}
.sn-shap-val.pos{color:var(--accent);}
.sn-shap-val.neg{color:var(--info);}

/* мини-SHAP на дашборде */
.sn-mini-shap{display:flex;flex-direction:column;gap:13px;}
.sn-mini-row{display:grid;grid-template-columns:1fr 70px 42px;align-items:center;gap:10px;}
.sn-mini-name{font-size:12.5px;color:var(--fg-2);line-height:1.25;}
.sn-mini-track{height:8px;background:var(--n-950);border-radius:var(--r-pill);overflow:hidden;}
.sn-mini-track span{display:block;height:100%;border-radius:var(--r-pill);}
.sn-mini-track span.pos{background:var(--accent);}
.sn-mini-track span.neg{background:var(--info);}
.sn-mini-val{font-family:var(--font-mono);font-size:12.5px;font-weight:700;text-align:right;}
.sn-mini-val.pos{color:var(--accent);}.sn-mini-val.neg{color:var(--info);}
.sn-mini-foot{font-size:11.5px;color:var(--fg-3);margin-top:4px;border-top:1px solid var(--border);padding-top:10px;}

/* значимость признаков */
.sn-imp{display:flex;flex-direction:column;gap:11px;}
.sn-imp-row{display:grid;grid-template-columns:250px 1fr 40px;align-items:center;gap:14px;}
.sn-imp-name{font-size:13px;color:var(--fg-1);}
.sn-imp-track{height:9px;background:var(--n-950);border-radius:var(--r-pill);overflow:hidden;}
.sn-imp-track span{display:block;height:100%;border-radius:var(--r-pill);}
.sn-imp-track span.pos{background:var(--accent);}.sn-imp-track span.neg{background:var(--info);}
.sn-imp-val{font-family:var(--font-mono);font-size:12.5px;color:var(--fg-2);text-align:right;}

/* объяснимость */
.sn-explain p{font-size:13.5px;color:var(--fg-2);margin:0 0 12px;}
.sn-explain ul{list-style:none;padding:0;margin:0 0 14px;display:flex;flex-direction:column;gap:9px;}
.sn-explain li{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--fg-1);}
.sn-explain li svg{width:15px;height:15px;color:var(--ok);flex:none;}
.sn-explain-lib{display:flex;gap:6px;flex-wrap:wrap;}

/* ---------- кольцо доли СН ---------- */
.sn-share{display:flex;align-items:center;gap:20px;}
.sn-donut svg{width:100%;height:auto;}
.sn-donut-bg{fill:none;stroke:var(--n-950);stroke-width:11;}
.sn-donut-fg{fill:none;stroke:var(--accent);stroke-width:11;stroke-linecap:round;transition:stroke-dashoffset .6s cubic-bezier(.2,.7,.3,1);}
.sn-donut-val{fill:var(--fg-1);font-family:var(--font-display);font-weight:500;font-size:26px;}
.sn-donut-unit{fill:var(--fg-3);font-family:var(--font-body);font-size:8.5px;text-transform:uppercase;letter-spacing:.08em;}
.sn-share-stats{display:flex;flex-direction:column;gap:13px;flex:1;}
.sn-share-stats>div{display:flex;flex-direction:column;gap:3px;}
.sn-unit-k{font-size:11px;color:var(--fg-3);text-transform:uppercase;letter-spacing:.06em;font-weight:600;}
.sn-share-stats b{font-family:var(--font-display);font-weight:500;font-size:20px;}
.sn-share-stats b small,.sn-unit-vals b small{font-size:12px;color:var(--fg-3);}
.acc{color:var(--accent);}

/* ---------- энергоблоки ---------- */
.sn-units-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.sn-unit{background:var(--n-900);border:1px solid var(--border);border-radius:var(--r-2);padding:14px;}
.sn-unit-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:12px;}
.sn-unit-id{font-family:var(--font-display);font-weight:600;font-size:17px;letter-spacing:.02em;}
.sn-unit-type{font-size:11px;color:var(--fg-3);font-weight:600;margin-top:2px;}
.sn-unit-bar{height:5px;background:var(--n-950);border-radius:var(--r-pill);overflow:hidden;margin-bottom:12px;}
.sn-unit-bar span{display:block;height:100%;border-radius:var(--r-pill);background:var(--ok);transition:width .5s;}
.sn-unit-bar span.tone-info{background:var(--info);}.sn-unit-bar span.tone-warn{background:var(--warn);}
.sn-unit-bar span.tone-danger{background:var(--danger);}.sn-unit-bar span.tone-ok{background:var(--ok);}
.sn-unit-vals{display:flex;justify-content:space-between;gap:10px;}
.sn-unit-vals>div{display:flex;flex-direction:column;gap:3px;}
.sn-unit-vals b{font-family:var(--font-display);font-weight:500;font-size:18px;}
.sn-unit.tone-danger{border-color:rgba(229,72,77,.35);}
.sn-unit.tone-warn{border-color:rgba(232,163,61,.35);}

/* ---------- факторы режима ---------- */
.sn-factors{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.sn-factor{display:flex;align-items:center;gap:13px;background:var(--n-900);border:1px solid var(--border);border-radius:var(--r-2);padding:14px 16px;}
.sn-factor>svg{width:24px;height:24px;color:var(--fg-2);flex:none;}
.sn-factor svg.fc-info{color:var(--info);}.sn-factor svg.fc-warn{color:var(--warn);}.sn-factor svg.fc-danger{color:var(--danger);}
.sn-factor-v{font-family:var(--font-display);font-weight:500;font-size:23px;line-height:1;}
.sn-factor-v small{font-size:13px;color:var(--fg-3);}
.sn-factor-l{font-size:12px;color:var(--fg-3);margin-top:4px;}

/* ---------- гистограмма ошибки ---------- */
.sn-hist{display:flex;align-items:flex-end;gap:10px;height:160px;padding:0 6px;}
.sn-hist-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end;}
.sn-hist-bar{width:100%;background:linear-gradient(180deg,var(--accent),var(--prostor-orange-600));border-radius:3px 3px 0 0;
  position:relative;min-height:3px;display:flex;justify-content:center;align-items:flex-start;transition:height .5s;}
.sn-hist-bar span{position:absolute;top:-18px;font-family:var(--font-mono);font-size:11px;color:var(--fg-2);}
.sn-hist-k{font-family:var(--font-mono);font-size:10.5px;color:var(--fg-3);}
.sn-hist-note{font-size:12px;color:var(--fg-3);margin-top:12px;text-align:center;}

/* ---------- нормативный коридор / пробои ---------- */
.sn-norm{display:flex;flex-direction:column;gap:12px;margin-bottom:14px;}
.sn-norm-row{display:flex;gap:11px;align-items:flex-start;}
.sn-norm-row svg{width:18px;height:18px;color:var(--accent);flex:none;margin-top:2px;}
.sn-norm-row b{font-size:13.5px;display:block;}
.sn-norm-row span{font-size:12px;color:var(--fg-3);display:block;margin-top:2px;}
.sn-norm-ok{display:flex;align-items:center;gap:9px;background:var(--ok-bg);color:var(--ok);font-size:13px;font-weight:600;
  padding:12px 14px;border-radius:var(--r-2);}
.sn-norm-ok svg{width:18px;height:18px;}
.sn-breach-list{border-top:1px solid var(--border);padding-top:12px;display:flex;flex-direction:column;gap:8px;}
.sn-breach{display:flex;justify-content:space-between;align-items:center;font-size:13px;}
.sn-breach-v{font-family:var(--font-mono);font-weight:700;color:var(--danger);}

/* ---------- экспорт заявок ---------- */
.sn-export-btns{display:flex;gap:8px;}
.pl-btn-sm.done{background:var(--ok);border-color:var(--ok);}
.sn-bidtable-wrap{max-height:430px;overflow-y:auto;border-radius:var(--r-2);}
.sn-bidtable thead th{position:sticky;top:0;background:var(--surface);z-index:2;}
.sn-dim{color:var(--fg-3)!important;}
.sn-gtpp{font-family:var(--font-mono);font-size:16px;letter-spacing:-.02em;}
.sn-code{background:var(--n-950);border:1px solid var(--border);border-radius:var(--r-2);padding:14px;
  font-family:var(--font-mono);font-size:11.5px;color:var(--ok);white-space:pre;overflow-x:auto;line-height:1.6;margin:0 0 14px;}
.sn-export-meta{display:flex;flex-direction:column;gap:10px;}
.sn-export-meta>div{display:flex;justify-content:space-between;align-items:center;font-size:13px;}
.sn-export-meta b{font-weight:600;}
.sn-toast{display:flex;align-items:center;gap:9px;margin-top:14px;background:var(--ok-bg);color:var(--ok);
  font-size:13px;font-weight:600;padding:12px 14px;border-radius:var(--r-2);animation:snfade .4s ease-out;}
.sn-toast svg{width:18px;height:18px;}

/* ---------- tweaks: сценарий ---------- */
.sn-tw-scn{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:4px 0 8px;}
.sn-tw-btn{display:flex;align-items:center;gap:8px;background:var(--n-800);border:1px solid var(--border);color:var(--fg-2);
  font-family:var(--font-body);font-size:13px;font-weight:600;padding:9px 11px;border-radius:var(--r-2);cursor:pointer;}
.sn-tw-btn svg{width:15px;height:15px;}
.sn-tw-btn.on{background:var(--accent);color:#fff;border-color:var(--accent);}

/* ---------- анимации ---------- */
@keyframes sndraw{from{stroke-dasharray:1;stroke-dashoffset:1;}to{stroke-dasharray:1;stroke-dashoffset:0;}}
@keyframes sngrow{from{transform:scaleX(.2);opacity:.4;}to{transform:scaleX(1);opacity:1;}}
@keyframes snpulse{0%{box-shadow:0 0 0 0 rgba(61,190,120,.6);}70%{box-shadow:0 0 0 6px rgba(61,190,120,0);}100%{box-shadow:0 0 0 0 rgba(61,190,120,0);}}
@keyframes snring{0%{r:5;opacity:.7;}100%{r:16;opacity:0;}}
@keyframes snspin{to{transform:rotate(360deg);}}
@keyframes snfade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
@media (prefers-reduced-motion:reduce){.sn-forecast.draw,.sn-now-pulse,.spin,.sn-livebtn.on .d{animation:none;}}

/* responsive */
@media (max-width:1280px){
  .sn-scn-btn span{display:none;}
  .sn-scn-btn{padding:8px 10px;}
}