/* ============================================================
   SCADA-АРМ · многоэкранный комплект (слайд «Рабочее место»)
   Доп. экраны: Обзор · Мнемосхема · Тренды · Журнал · Протокол
   Палитра наследуется от .scada-vars (metal.css)
   ============================================================ */

/* ---------- общий каркас: рейл + колонка + стек экранов + шкала ---------- */
.scada-col { flex:1; min-width:0; display:flex; flex-direction:column; }
.scr-stack { flex:1; min-height:0; display:flex; }
.scr-view { display:none; flex:1; min-width:0; min-height:0; flex-direction:column; }
.scr-view.active { display:flex; }
.scada-rail [data-screen] { cursor:pointer; }

/* ---------- общая нижняя шкала времени ---------- */
.scl-tl { display:flex; align-items:center; gap:14px; padding:9px 18px 12px; background:#cfcfcf; border-top:2px solid #a9a9a9; flex-shrink:0; }
.scl-play { display:inline-flex; align-items:center; gap:7px; background:var(--s-orange); color:#fff; border:none; border-radius:6px; padding:9px 15px; font-family:'IBM Plex Sans',sans-serif; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; }
.scl-play:hover { background:#d44e26; }
.scl-clock { font-family:var(--s-mono); font-size:12px; color:#333; min-width:118px; }
.scl-clock b { font-size:15px; color:#111; }
.scl-tl .scl-track { flex:1; display:flex; flex-direction:column; gap:5px; }
.scl-jumps { display:flex; gap:6px; flex-wrap:wrap; }
.scl-jump { font-family:var(--s-mono); font-size:10px; color:#444; background:#bcbcbc; border:1px solid #9a9a9a; border-radius:5px; padding:3px 8px; cursor:pointer; }
.scl-jump:hover { background:var(--s-bg); border-color:var(--s-orange); color:var(--s-orange); }
.scl-jump.warn { color:#8a6100; border-color:#d4ad4e; }
.scl-jump.bad { color:#b71c1c; border-color:#d98a86; }
#scl-range { -webkit-appearance:none; appearance:none; width:100%; height:7px; border-radius:4px; background:#aeaeae; outline:none; cursor:pointer; border:1px solid #8f8f8f; }
#scl-range::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%; background:var(--s-orange); border:3px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.4); cursor:pointer; }
#scl-range::-moz-range-thumb { width:16px; height:16px; border-radius:50%; background:var(--s-orange); border:3px solid #fff; cursor:pointer; }
.scl-speed { font-family:var(--s-mono); font-size:13px; font-weight:700; background:#bcbcbc; color:#333; border:1px solid #9a9a9a; border-radius:6px; padding:8px 13px; cursor:pointer; min-width:46px; }
.scl-speed:hover { background:var(--s-bg); }

/* section title shown in sub-bar */
.scada-sub .s-screen { font-size:13px; color:var(--s-orange); font-weight:700; font-family:var(--s-mono); letter-spacing:.5px; text-transform:uppercase; }

/* ============================================================
   ОБЗОР ПУСКА
   ============================================================ */
.ov-grid { flex:1; min-height:0; display:grid; grid-template-columns:1.05fr 1.7fr; gap:12px; }
.ov-stepcard { background:linear-gradient(180deg,#2a3a49,#1b2937); color:#e7eef5; border-radius:7px; padding:16px 18px; display:flex; flex-direction:column; }
.ov-stepcard .ov-lab { font-family:var(--s-mono); font-size:11px; letter-spacing:2px; text-transform:uppercase; color:#7f95aa; }
.ov-stepcard .ov-bigstep { display:flex; align-items:baseline; gap:10px; margin-top:4px; }
.ov-stepcard .ov-n { font-family:var(--s-mono); font-size:46px; font-weight:700; color:var(--s-orange); line-height:1; }
.ov-stepcard .ov-of { font-family:var(--s-mono); font-size:14px; color:#7f95aa; }
.ov-stepcard .ov-name { font-size:21px; font-weight:700; margin-top:8px; line-height:1.15; }
.ov-stepcard .ov-short { font-size:13px; color:#aebccb; margin-top:5px; line-height:1.35; }
.ov-prog-wrap { margin-top:14px; }
.ov-prog-bar { height:12px; border-radius:6px; background:#0e1a25; border:1px solid #314a5f; overflow:hidden; }
.ov-prog-fill { height:100%; background:linear-gradient(90deg,var(--s-orange),#ff8a5f); border-radius:6px; transition:width .12s linear; }
.ov-prog-meta { display:flex; justify-content:space-between; font-family:var(--s-mono); font-size:11px; color:#9fb2c4; margin-top:5px; }
.ov-next { margin-top:14px; background:#0e1a25; border:1px solid #314a5f; border-radius:6px; padding:10px 12px; }
.ov-next .nl { font-family:var(--s-mono); font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:#7f95aa; }
.ov-next .nn { font-size:14px; font-weight:600; margin-top:3px; color:#dfe8f0; }
.ov-dots { margin-top:auto; display:flex; gap:4px; padding-top:14px; }
.ov-dots .od { flex:1; height:7px; border-radius:3px; background:#34495d; }
.ov-dots .od.done { background:var(--s-green); }
.ov-dots .od.cur { background:var(--s-orange); box-shadow:0 0 8px rgba(235,94,51,.7); }

.ov-right { display:flex; flex-direction:column; gap:8px; min-height:0; }
#ov-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.ov-tile { background:var(--s-tile); border:2px solid #8f8f8f; border-top-width:3px; border-radius:5px; padding:11px 13px; }
.ov-tile .ovt-top { display:flex; align-items:baseline; justify-content:space-between; }
.ov-tile .ovt-v { font-family:var(--s-mono); font-size:30px; font-weight:700; color:#1a1a1a; line-height:1; letter-spacing:-1px; }
.ov-tile .ovt-u { font-family:var(--s-mono); font-size:12px; color:#555; }
.ov-tile .ovt-l { font-size:12px; font-weight:600; color:#333; margin-top:6px; }
.ov-tile .ovt-d { font-family:var(--s-mono); font-size:10.5px; color:#666; margin-top:2px; }
.ov-tile.green  { border-top-color:var(--s-green); }
.ov-tile.yellow { border-top-color:var(--s-yellow); }
.ov-tile.red    { border-top-color:var(--s-red); }
.ov-tile.cyan   { border-top-color:var(--s-cyan); }
.ov-tile.orange { border-top-color:var(--s-orange); }
.ov-tile.green .ovt-v  { color:#1b5e20; }
.ov-tile.yellow .ovt-v { color:#7a5600; }
.ov-tile.red .ovt-v    { color:#b71c1c; }

/* ============================================================
   advisory (общий вид подсказки помощника) — для обзора/мнемо
   ============================================================ */
.sc-adv { display:flex; align-items:flex-start; gap:13px; padding:11px 15px; border-radius:6px; flex-shrink:0; margin-top:auto; }
.sc-adv .ai { width:34px; height:34px; border-radius:7px; display:grid; place-items:center; font-family:var(--s-mono); font-weight:700; font-size:20px; flex-shrink:0; }
.sc-adv .at { font-size:13px; line-height:1.4; color:#222; }
.sc-adv .at .att { font-weight:700; font-size:14px; margin-bottom:2px; }

/* ---- увеличенная рекомендация на экране «Обзор пуска» ---- */
#ov-advisory { padding:16px 20px; gap:16px; margin-top:0; }
#ov-advisory .ai { width:48px; height:48px; font-size:28px; border-radius:10px; }
#ov-advisory .at { font-size:15.5px; line-height:1.5; }
#ov-advisory .at .att { font-size:19px; margin-bottom:5px; }
#ov-advisory .at b { font-size:15px; }
.sc-adv.green  { background:var(--s-green-bg);  border:1px solid var(--s-green); }
.sc-adv.green  .ai { background:var(--s-green); color:#fff; }
.sc-adv.yellow { background:var(--s-yellow-bg); border:1px solid var(--s-yellow); }
.sc-adv.yellow .ai { background:var(--s-yellow); color:#fff; }
.sc-adv.red    { background:var(--s-red-bg);    border:1px solid var(--s-red); }
.sc-adv.red    .ai { background:var(--s-red); color:#fff; }

/* ============================================================
   ДЕЙСТВИЯ ОПЕРАТИВНОГО ПЕРСОНАЛА
   ============================================================ */
.ov-actions { background:var(--s-panel); border:1px solid #9a9a9a; border-radius:6px; padding:8px 12px; display:flex; flex-direction:column; gap:5px; flex:1; min-height:80px; }
.ov-act-hd { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ov-act-hd .oah-title { font-family:var(--s-mono); font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color:#555; font-weight:700; display:flex; align-items:center; gap:7px; }
.ov-act-hd .oah-title svg { color:var(--s-orange); }
.ov-act-hd .oah-right { display:flex; align-items:center; gap:8px; }
.ov-act-hd .oah-count { font-family:var(--s-mono); font-size:10px; color:#888; }
.ov-act-clear { font-family:var(--s-mono); font-size:9.5px; color:#777; background:none; border:1px solid #aaa; border-radius:3px; padding:2px 7px; cursor:pointer; }
.ov-act-clear:hover { color:var(--s-red); border-color:var(--s-red); }
.ov-act-input-row { display:flex; gap:5px; flex-shrink:0; }
.ov-act-input { flex:1; min-width:0; font-family:'IBM Plex Sans',sans-serif; font-size:12.5px; color:#222; background:#e8e8e8; border:1px solid #999; border-radius:5px; padding:8px 11px; outline:none; }
.ov-act-input:focus { border-color:var(--s-orange); background:#fff; box-shadow:0 0 0 2px rgba(235,94,51,.15); }
.ov-act-input::placeholder { color:#888; }
.ov-act-send { font-family:'IBM Plex Sans',sans-serif; font-size:12px; font-weight:700; color:#fff; background:var(--s-orange); border:none; border-radius:5px; padding:8px 14px; cursor:pointer; white-space:nowrap; display:flex; align-items:center; gap:6px; }
.ov-act-send:hover { background:#d44e26; }
.ov-act-mic { width:36px; height:36px; border-radius:5px; border:1px solid #999; background:#e0e0e0; cursor:pointer; display:grid; place-items:center; color:#555; flex-shrink:0; transition:all .15s; }
.ov-act-mic:hover { background:#d0d0d0; color:var(--s-orange); border-color:var(--s-orange); }
.ov-act-mic.recording { background:var(--s-red-bg); border-color:var(--s-red); color:var(--s-red); animation:mic-pulse 1s ease-in-out infinite; }
@keyframes mic-pulse { 0%,100%{opacity:1}50%{opacity:.55} }
.ov-act-log { flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:3px; }
.act-row { display:flex; align-items:flex-start; gap:7px; padding:5px 8px; background:rgba(255,255,255,.45); border-radius:4px; border-left:3px solid var(--s-orange); font-size:11.5px; }
.act-row.voice { border-left-color:var(--s-cyan); }
.act-row .act-time { font-family:var(--s-mono); font-size:10px; color:#555; font-weight:600; white-space:nowrap; min-width:54px; flex-shrink:0; line-height:1.5; }
.act-row .act-time small { color:#888; }
.act-row .act-ico { flex-shrink:0; color:#777; margin-top:1px; }
.act-row.voice .act-ico { color:var(--s-cyan); }
.act-row .act-text { color:#222; line-height:1.35; flex:1; min-width:0; word-break:break-word; }
.act-row .act-step { font-family:var(--s-mono); font-size:9px; color:#888; white-space:nowrap; flex-shrink:0; background:rgba(0,0,0,.06); border-radius:3px; padding:2px 5px; margin-top:0; }
.act-del { background:none; border:none; color:#aaa; font-size:14px; cursor:pointer; padding:0 2px; line-height:1; flex-shrink:0; }
.act-del:hover { color:var(--s-red); }
.ov-act-empty { font-family:var(--s-mono); font-size:10.5px; color:#888; text-align:center; padding:8px 12px; line-height:1.5; }

/* ============================================================
   МНЕМОСХЕМА
   ============================================================ */
.mn-wrap { flex:1; min-height:0; display:flex; gap:10px; }
.mn-scheme { flex:1; min-width:0; background:#c3c7c1; border:1px solid #9a9d97; border-radius:6px; padding:6px; display:flex; flex-direction:column; }
#mn-svg { width:100%; flex:1; min-height:0; }
.mn-side { width:248px; flex-shrink:0; display:flex; flex-direction:column; gap:8px; }
.mn-card { background:var(--s-panel); border:1px solid #9a9a9a; border-radius:6px; padding:10px 12px; }
.mn-card .mc-h { font-family:var(--s-mono); font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color:#555; font-weight:700; margin-bottom:8px; }
.mn-valve { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 0; border-bottom:1px solid #b3b3b3; }
.mn-valve:last-child { border-bottom:none; }
.mn-valve .vn { font-size:12px; font-weight:600; color:#2a2a2a; }
.mn-valve .vn small { display:block; font-family:var(--s-mono); font-size:9.5px; color:#666; font-weight:400; }
.mn-btn { font-family:var(--s-mono); font-size:11px; font-weight:700; border:1px solid #8f8f8f; border-radius:5px; padding:5px 10px; cursor:pointer; min-width:64px; text-align:center; }
.mn-btn.v-open  { background:var(--s-red-bg);   color:#b71c1c; border-color:var(--s-red); }
.mn-btn.v-closed{ background:var(--s-green-bg); color:#1b5e20; border-color:var(--s-green); }
.mn-btn:hover { filter:brightness(.96); }
.mn-leg { display:flex; flex-wrap:wrap; gap:4px 12px; }
.mn-leg span { font-family:var(--s-mono); font-size:10px; color:#444; display:flex; align-items:center; gap:5px; }
.mn-leg i { width:14px; height:4px; border-radius:2px; display:inline-block; }
.mn-leg-valve { margin-top:6px; padding-top:6px; border-top:1px solid #b3b3b3; }
.mn-leg-valve b { font-size:13px; line-height:1; }
.mn-flow { stroke-dasharray:7 7; animation:mnflow .9s linear infinite; }
@keyframes mnflow { to { stroke-dashoffset:-14; } }
#mn-svg text { font-family:'IBM Plex Mono','Courier New',monospace; }
.mn-badge-bg { fill:#fff; stroke:#9a9a9a; }
.mn-eq { fill:#dfe4e8; stroke:#7d8893; stroke-width:1.5; }
.mn-eq-lbl { fill:#2a3a47; font-weight:700; }

/* ============================================================
   ТРЕНДЫ
   ============================================================ */
.tr-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-bottom:8px; }
#tr-params { display:flex; flex-wrap:wrap; gap:5px 12px; }
.tr-par { display:flex; align-items:center; gap:5px; font-size:11.5px; color:#333; font-weight:600; cursor:pointer; }
.tr-par .trs { width:13px; height:4px; border-radius:2px; }
.tr-ranges { display:flex; gap:5px; }
.tr-rbtn { font-family:var(--s-mono); font-size:10.5px; color:#444; background:#bcbcbc; border:1px solid #9a9a9a; border-radius:5px; padding:4px 9px; cursor:pointer; }
.tr-rbtn.active { background:var(--s-orange); color:#fff; border-color:var(--s-orange); }
.tr-chart { flex:1; min-height:0; background:rgba(255,255,255,.5); border:1px solid #a9a9a9; border-radius:6px; padding:6px 8px 2px; display:flex; flex-direction:column; }
#tr-svg { width:100%; flex:1; min-height:0; }
.tr-readout { display:flex; flex-wrap:wrap; gap:6px 16px; padding:7px 10px; background:rgba(0,0,0,.05); border-radius:5px; margin-top:6px; }
.tr-ro { font-family:var(--s-mono); font-size:11.5px; color:#333; display:flex; align-items:center; gap:6px; }
.tr-ro b { color:#111; }
.tr-ro i { width:11px; height:11px; border-radius:2px; display:inline-block; }

/* ============================================================
   ЖУРНАЛ СОБЫТИЙ
   ============================================================ */
.jr-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:9px; flex-wrap:wrap; }
.jr-filters { display:flex; gap:5px; }
.jr-fbtn { font-family:'IBM Plex Sans',sans-serif; font-size:12px; font-weight:600; color:#444; background:#bcbcbc; border:1px solid #9a9a9a; border-radius:5px; padding:6px 12px; cursor:pointer; }
.jr-fbtn .c { font-family:var(--s-mono); font-size:10px; opacity:.7; margin-left:5px; }
.jr-fbtn.active { background:var(--s-orange); color:#fff; border-color:var(--s-orange); }
.jr-ackall { font-family:'IBM Plex Sans',sans-serif; font-size:12px; font-weight:600; color:#1b5e20; background:var(--s-green-bg); border:1px solid var(--s-green); border-radius:5px; padding:6px 14px; cursor:pointer; }
.jr-ackall:hover { filter:brightness(.97); }
.jr-ackall:disabled { opacity:.45; cursor:default; }
#jr-list { flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:5px; padding-right:4px; }
.jr-row { display:grid; grid-template-columns:62px 13px 1fr auto; gap:11px; align-items:start; background:var(--s-tile); border:1px solid #9a9a9a; border-left-width:4px; border-radius:5px; padding:9px 12px; }
.jr-row.bad  { border-left-color:var(--s-red); }
.jr-row.warn { border-left-color:var(--s-yellow); }
.jr-row.info { border-left-color:var(--s-blue); }
.jr-row.ok   { border-left-color:var(--s-green); }
.jr-row.acked { opacity:.55; }
.jr-time { font-family:var(--s-mono); font-size:12px; color:#333; font-weight:600; }
.jr-time small { display:block; color:#777; font-weight:400; font-size:9.5px; }
.jr-dot { width:11px; height:11px; border-radius:50%; margin-top:3px; }
.jr-dot.bad { background:var(--s-red); } .jr-dot.warn { background:var(--s-yellow); } .jr-dot.info { background:var(--s-blue); } .jr-dot.ok { background:var(--s-green); }
.jr-main .jm-t { font-size:13px; font-weight:700; color:#222; line-height:1.25; }
.jr-main .jm-b { font-size:11.5px; color:#555; margin-top:3px; line-height:1.35; }
.jr-main .jm-tag { font-family:var(--s-mono); font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin-top:5px; display:inline-block; }
.jr-side { display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.jr-ack { font-family:'IBM Plex Sans',sans-serif; font-size:11px; font-weight:600; color:#333; background:#cfcfcf; border:1px solid #8f8f8f; border-radius:5px; padding:5px 11px; cursor:pointer; white-space:nowrap; }
.jr-ack:hover { background:#fff; }
.jr-state { font-family:var(--s-mono); font-size:10px; font-weight:700; padding:3px 8px; border-radius:4px; }
.jr-state.active { background:var(--s-red-bg); color:#b71c1c; }
.jr-state.acked  { background:#cfcfcf; color:#555; }
.jr-empty { text-align:center; color:#777; font-size:13px; padding:30px; }

/* ============================================================
   ПРОТОКОЛ АНАЛИЗА
   ============================================================ */
.pr-stage { flex:1; min-height:0; display:flex; flex-direction:column; }
.pr-intro { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:16px; }
.pr-intro .pi-ico { width:74px; height:74px; border-radius:14px; background:var(--s-panel); border:1px solid #9a9a9a; display:grid; place-items:center; color:var(--s-orange); }
.pr-intro h3 { font-size:22px; color:#1a1a1a; font-weight:700; }
.pr-intro p { font-size:14px; color:#555; max-width:560px; line-height:1.5; }
.pr-genbtn { font-family:'IBM Plex Sans',sans-serif; font-size:15px; font-weight:700; color:#fff; background:var(--s-orange); border:none; border-radius:8px; padding:14px 28px; cursor:pointer; display:inline-flex; align-items:center; gap:10px; box-shadow:0 6px 18px rgba(235,94,51,.35); }
.pr-genbtn:hover { background:#d44e26; }
.pr-genbtn:disabled { opacity:.6; cursor:default; }
.pr-prog { width:340px; height:8px; border-radius:5px; background:#c4c4c4; overflow:hidden; }
.pr-prog i { display:block; height:100%; width:0; background:var(--s-orange); transition:width .1s linear; }
.pr-doc { flex:1; min-height:0; display:none; flex-direction:column; gap:9px; }
.pr-doc.show { display:flex; }
.pr-head { display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--s-panel); border:1px solid #9a9a9a; border-radius:6px; padding:11px 15px; flex-shrink:0; }
.pr-head .ph-l .ph-t { font-size:15px; font-weight:700; color:#1a1a1a; }
.pr-head .ph-l .ph-s { font-family:var(--s-mono); font-size:11px; color:#666; margin-top:2px; }
.pr-grade { font-family:var(--s-mono); font-weight:700; font-size:15px; padding:7px 16px; border-radius:6px; }
.pr-grade.ud { background:var(--s-yellow-bg); color:#8a6100; border:1px solid var(--s-yellow); }
.pr-actions { display:flex; gap:7px; }
.pr-abtn { font-family:'IBM Plex Sans',sans-serif; font-size:12px; font-weight:600; color:#333; background:#cfcfcf; border:1px solid #8f8f8f; border-radius:5px; padding:7px 13px; cursor:pointer; }
.pr-abtn:hover { background:#fff; }
.pr-cols { flex:1; min-height:0; display:grid; grid-template-columns:1fr 1.25fr; gap:9px; }
.pr-col { background:rgba(255,255,255,.5); border:1px solid #a9a9a9; border-radius:6px; padding:10px 13px; display:flex; flex-direction:column; min-height:0; }
.pr-col .pc-h { font-family:var(--s-mono); font-size:11px; letter-spacing:.5px; text-transform:uppercase; color:#333; font-weight:700; margin-bottom:6px; display:flex; justify-content:space-between; }
.pr-crits { overflow-y:auto; min-height:0; flex:1; padding-right:3px; }
.pr-crit { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid #c4c4c4; font-size:12.5px; color:#333; }
.pr-crit:last-child { border-bottom:none; }
.pr-crit.bad { background:var(--s-red-bg); border-radius:4px; padding-left:7px; margin:0 -7px; padding-right:7px; }
.pr-crit.bad span:first-child { color:#b71c1c; font-weight:600; }
.pr-g { font-family:var(--s-mono); font-size:11.5px; font-weight:700; white-space:nowrap; }
.pr-g.otl { color:#1b7a30; } .pr-g.hor { color:#5a8a1b; } .pr-g.ud { color:#8a6100; } .pr-g.neud { color:#b71c1c; } .pr-g.na { color:#777; font-weight:400; }
.pr-summary { background:var(--s-red-bg); border:1px solid var(--s-red); border-radius:6px; padding:11px 14px; display:flex; gap:12px; align-items:flex-start; flex-shrink:0; }
.pr-summary .ps-ico { width:36px; height:36px; border-radius:7px; background:var(--s-red); color:#fff; display:grid; place-items:center; font-family:var(--s-mono); font-weight:700; font-size:22px; flex-shrink:0; }
.pr-summary .ps-t { font-size:14px; font-weight:700; color:#b71c1c; }
.pr-summary .ps-b { font-size:12px; color:#444; margin-top:3px; line-height:1.4; }

/* ============================================================
   НСС · КОНТРОЛЬ ВЫРАБОТКИ ГТП
   ============================================================ */
.nss-grid { flex:1; min-height:0; display:grid; grid-template-columns:1.4fr 1fr; gap:12px; }
.nss-chart-wrap { background:rgba(255,255,255,.5); border:1px solid #a9a9a9; border-radius:6px; padding:8px 10px 2px; display:flex; flex-direction:column; overflow:hidden; min-height:0; }
.nss-chart-hd { font-family:var(--s-mono); font-size:11px; letter-spacing:.5px; text-transform:uppercase; color:#444; font-weight:700; display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
#nss-svg { width:100%; flex:1; min-height:0; }
.nss-legend { display:flex; gap:16px; padding:6px 8px 2px; font-size:11px; color:#555; font-family:var(--s-mono); }
.nss-legend i { display:inline-block; width:14px; height:10px; border-radius:2px; vertical-align:middle; margin-right:4px; }
.nss-panels { display:flex; flex-direction:column; gap:7px; min-height:0; overflow:hidden; }

/* blocks */
.nss-gtp { background:var(--s-panel); border:1px solid #9a9a9a; border-radius:6px; padding:8px 10px; }
.nss-gtp-hd { font-family:var(--s-mono); font-size:10px; letter-spacing:1px; text-transform:uppercase; color:#555; font-weight:700; margin-bottom:4px; display:flex; justify-content:space-between; }
.nb { padding:5px 0; border-bottom:1px solid #c4c4c4; }
.nb:last-child { border-bottom:none; }
.nb-top { display:flex; justify-content:space-between; align-items:center; }
.nb-n { font-size:12.5px; font-weight:700; color:#222; }
.nb-s { font-family:var(--s-mono); font-size:9.5px; font-weight:700; padding:2px 7px; border-radius:3px; text-transform:uppercase; letter-spacing:.5px; }
.nb-s.green { background:var(--s-green-bg); color:#1b5e20; }
.nb-s.orange { background:rgba(235,94,51,.15); color:#c84300; }
.nb-s.yellow { background:var(--s-yellow-bg); color:#8a6100; }
.nb-bar { height:5px; background:#d8d8d8; border-radius:3px; margin:3px 0; overflow:hidden; }
.nb-f { height:100%; border-radius:4px; transition:width .3s; }
.nb-v { display:flex; justify-content:space-between; font-family:var(--s-mono); font-size:11px; }
.nb-pw { color:#333; font-weight:600; }
.nb-pw small { color:#888; font-weight:400; }
.nb-res { color:#1b5e20; font-weight:600; font-size:10px; }
.nb-res.pusk { color:var(--s-orange); }

/* deviation */
.nss-dev { background:var(--s-panel); border:1px solid #9a9a9a; border-radius:6px; padding:8px 10px; }
.nss-dev-hd { font-family:var(--s-mono); font-size:10px; letter-spacing:1px; text-transform:uppercase; color:#555; font-weight:700; margin-bottom:2px; }
.nd-row { display:flex; justify-content:space-between; align-items:center; padding:3px 0; border-bottom:1px solid #c4c4c4; }
.nd-row:last-child { border-bottom:none; }
.nd-label { font-size:12px; color:#444; }
.nd-big { font-family:var(--s-mono); font-size:16px; font-weight:700; }
.nd-big.green { color:#1b5e20; } .nd-big.yellow { color:#8a6100; } .nd-big.red { color:#b71c1c; }
.nd-val { font-family:var(--s-mono); font-size:13px; font-weight:600; color:#333; }
.nd-pen { font-family:var(--s-mono); font-size:13px; font-weight:700; color:#b71c1c; }

/* recommendation */
.nss-rc { background:var(--s-panel); border:1px solid #9a9a9a; border-radius:6px; padding:8px 10px; display:flex; gap:8px; align-items:flex-start; flex:1; min-height:0; overflow:hidden; }
.nss-rc.green { background:var(--s-green-bg); border-color:var(--s-green); }
.nss-rc.yellow { background:var(--s-yellow-bg); border-color:var(--s-yellow); }
.nss-rc.red { background:var(--s-red-bg); border-color:var(--s-red); }
.rc-i { width:24px; height:24px; border-radius:5px; display:grid; place-items:center; font-family:var(--s-mono); font-weight:700; font-size:14px; flex-shrink:0; background:#9a9a9a; color:#fff; }
.nss-rc.green .rc-i { background:var(--s-green); }
.nss-rc.yellow .rc-i { background:var(--s-yellow); }
.nss-rc.red .rc-i { background:var(--s-red); }
.rc-b { min-width:0; }
.rc-t { font-size:13px; font-weight:700; color:#222; }
.rc-d { font-size:12px; color:#444; margin-top:2px; line-height:1.4; }
.rc-acts { margin-top:5px; display:flex; flex-direction:column; gap:3px; }
.rc-a { font-size:12px; color:#222; padding:4px 8px; background:rgba(255,255,255,.5); border-radius:4px; display:flex; align-items:center; gap:6px; }
.rc-a.warn { background:rgba(244,67,54,.1); color:#b71c1c; }
.rc-up { font-weight:700; color:#1b5e20; }
.rc-dt { font-family:var(--s-mono); font-size:10px; color:#1b5e20; font-weight:600; }
.rc-stats { margin-top:5px; font-family:var(--s-mono); font-size:11px; color:#555; display:flex; gap:14px; }
.rc-stats b { font-size:12px; }
.rc-stats b.green { color:#1b5e20; } .rc-stats b.yellow { color:#8a6100; } .rc-stats b.red { color:#b71c1c; }

/* enlarged advisory for НСС (same as overview) */
#nss-advisory { padding:14px 20px; gap:16px; }
#nss-advisory .ai { width:44px; height:44px; font-size:26px; border-radius:10px; }
#nss-advisory .at { font-size:15px; line-height:1.5; }
#nss-advisory .at .att { font-size:18px; margin-bottom:4px; }
#nss-advisory .at b { font-size:14.5px; }

/* toast */
.sc-toast { position:absolute; bottom:78px; left:50%; transform:translateX(-50%) translateY(10px); background:#1d2b39; color:#e7eef5; font-size:13px; font-weight:600; padding:11px 20px; border-radius:8px; box-shadow:0 10px 30px rgba(0,0,0,.4); opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; z-index:30; }
.sc-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }