@font-face { font-family: 'Montserrat'; src: url('assets/fonts/Montserrat-Regular.ttf') format('truetype'); font-weight: 400; }
@font-face { font-family: 'Montserrat'; src: url('assets/fonts/Montserrat-Medium.ttf') format('truetype'); font-weight: 500; }
@font-face { font-family: 'Montserrat'; src: url('assets/fonts/Montserrat-SemiBold.ttf') format('truetype'); font-weight: 600; }
@font-face { font-family: 'Montserrat'; src: url('assets/fonts/Montserrat-Bold.ttf') format('truetype'); font-weight: 700; }
@font-face { font-family: 'Montserrat'; src: url('assets/fonts/Montserrat-ExtraBold.ttf') format('truetype'); font-weight: 800; }

:root {
  --navy: #1B365D; --navy2: #22406E; --deep: #0B1728; --sun: #FFC72C; --blue: #426DA9; --corn: #8BB8E8;
  --mis: #E5E1E6; --gray: #A7A8A9; --bg: #EEF1F6; --ink: #16243A; --ok: #1E8E4E; --bad: #C0392B; --warn: #D98E04;
  --mxg: #2E6E48; --mxr: #A3261E;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--deep); font-family: 'Montserrat', Verdana, sans-serif; color: var(--ink); }
button { font-family: inherit; cursor: pointer; }
button:disabled { opacity: .38; cursor: default; }
#stage { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; transform-origin: 0 0; background: var(--bg); overflow: hidden; }

/* ── шапка ── */
.hdr { position: absolute; left: 0; top: 0; width: 1600px; height: 58px; display: flex; align-items: center; gap: 18px; padding: 0 16px;
  background: radial-gradient(120% 260% at 82% -70%, #22406E 0%, #1B365D 42%, #0B1728 100%); color: #fff; border-bottom: 3px solid var(--sun); }
.brand { display: flex; align-items: center; gap: 12px; min-width: 300px; }
.brand img { height: 30px; }
.bt { font-weight: 800; font-size: 17px; letter-spacing: 1.6px; }
.bs { font-size: 11px; opacity: .8; font-weight: 500; }
.tabs { display: flex; gap: 6px; flex: 1; }
.tab { display: flex; align-items: center; gap: 7px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: #fff; padding: 6px 10px; border-radius: 9px; font-size: 11.5px; font-weight: 600; max-width: 196px; text-align: left; line-height: 1.15; }
.tab b { background: rgba(255,255,255,.16); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; flex: none; }
.tab.on { background: var(--sun); color: var(--navy); border-color: var(--sun); }
.tab.on b { background: var(--navy); color: #fff; }
.hright { display: flex; align-items: center; gap: 8px; }
.seg { display: flex; background: rgba(255,255,255,.1); border-radius: 9px; padding: 3px; }
.seg button { background: none; border: 0; color: #fff; font-weight: 700; font-size: 12px; padding: 6px 10px; border-radius: 7px; }
.seg button.on { background: #fff; color: var(--navy); }
.fs { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); color: #fff; font-weight: 700; font-size: 12px; padding: 7px 10px; border-radius: 8px; }

/* ── строка сценария ── */
.bar { position: absolute; left: 8px; top: 64px; width: 1584px; height: 66px; display: flex; align-items: center; gap: 14px; padding: 0 14px;
  background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(11,23,40,.12); }
.bl { flex: 1; min-width: 0; }
.sct { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; overflow: hidden; }
.sct .kick { font-size: 11px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--blue); }
.sct .nm { font-size: 19px; font-weight: 800; color: var(--navy); }
.sct .eq { font-size: 13px; font-weight: 600; color: #4A5A70; overflow: hidden; text-overflow: ellipsis; }
.sctask { font-size: 13px; color: #33445C; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmds { display: flex; gap: 6px; align-items: center; }
.views { display: flex; background: var(--bg); border-radius: 9px; padding: 3px; margin-right: 4px; }
.vbtn { border: 0; background: none; font-size: 11.5px; font-weight: 700; color: #4A5A70; padding: 6px 8px; border-radius: 7px; }
.vbtn.on { background: var(--navy); color: #fff; }
.cbtn { border: 1.5px solid #CBD3DF; background: #fff; color: var(--navy); font-weight: 700; font-size: 12.5px; padding: 8px 10px; border-radius: 9px; white-space: nowrap; }
.cbtn i { font-style: normal; background: var(--bg); border-radius: 6px; padding: 0 5px; font-size: 11px; }
.cbtn.primary { background: var(--sun); border-color: var(--sun); font-size: 14px; padding: 9px 16px; }
.cbtn:not(:disabled):hover { border-color: var(--navy); }

/* ── рабочая зона ── */
.main { position: absolute; left: 8px; top: 138px; width: 1584px; height: 528px; display: grid; gap: 8px; grid-template-columns: 850px 726px; }
.main.view-scheme { grid-template-columns: 1584px 0; }
.main.view-scheme .pmatrix { display: none; }
.main.view-matrix { grid-template-columns: 0 1584px; }
.main.view-matrix .pscheme { display: none; }
.panel { background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(11,23,40,.12); position: relative; overflow: hidden; }
.schemebox { position: absolute; inset: 4px 4px 40px 4px; display: flex; align-items: center; justify-content: center; }
.scheme { width: 100%; height: 100%; }
.hintbar { position: absolute; left: 8px; right: 8px; bottom: 6px; height: 30px; border-radius: 8px; background: #EAF2FD; color: var(--navy); font-size: 13px; font-weight: 600;
  display: flex; align-items: center; padding: 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 5px solid var(--blue); }
.hintbar b { margin-right: 4px; font-weight: 800; }
.hintbar.fix { background: #FDECEA; border-left-color: var(--bad); color: #7A1A12; }
.hintbar.ok { background: #E7F6EE; border-left-color: var(--ok); color: #0F5A31; }
.hintbar.hide { background: none; border: 0; }

/* SVG-схема */
.pipe-o { fill: none; stroke: #1B365D; stroke-width: 13; stroke-linejoin: round; }
.pipe { fill: none; stroke-width: 8; stroke-linejoin: round; }
.pipe.live { stroke: #E39B2D; }
.flowov { fill: none; stroke: #FFE7B0; stroke-width: 3; stroke-dasharray: 10 16; animation: flow .9s linear infinite; }
.pipe.res { stroke: #E39B2D; animation: resp 1.4s ease-in-out infinite; }
.pipe.empty { stroke: #D5DAE2; }
.pipe.inert { stroke: #8BB8E8; }
.pipe.h2zero { stroke: #F3D27A; stroke-dasharray: 4 4; }
@keyframes flow { to { stroke-dashoffset: -26; } }
@keyframes resp { 50% { stroke: #C0392B; } }
.lnlbl { font-size: 15px; font-weight: 700; fill: #33445C; }
.lnlbl.n2 { fill: var(--blue); font-size: 14px; }
.eqtag { font-size: 15px; font-weight: 800; fill: var(--navy); }
.motor { font-size: 20px; font-weight: 800; fill: var(--navy); }
.msub { font-size: 11px; font-weight: 700; fill: #4A5A70; }
.imp.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.gval { font-size: 15px; font-weight: 800; fill: var(--navy); }
.gval.res { fill: var(--bad); } .gval.zero { fill: var(--ok); }
.gsub { font-size: 11.5px; font-weight: 700; fill: #4A5A70; text-transform: uppercase; letter-spacing: .5px; }
.gsub.res { fill: var(--bad); } .gsub.zero { fill: var(--ok); }
.epill rect { fill: #EEF1F6; stroke: #A7A8A9; stroke-width: 1.5; }
.epill text { font-size: 12.5px; font-weight: 700; fill: #4A5A70; }
.epill.e-live rect { fill: #FFF3C4; stroke: #E0A800; } .epill.e-live text { fill: #7A5600; }
.epill.e-ok rect { fill: #E7F6EE; stroke: var(--ok); } .epill.e-ok text { fill: #0F5A31; }
.psub { font-size: 11.5px; font-weight: 700; fill: #4A5A70; text-transform: uppercase; letter-spacing: .6px; }
.pb { fill: #F2F4F8; stroke: #A7A8A9; stroke-width: 1.5; }
.pb-run.on { fill: #2E9D5B; stroke: #1E7A44; }
.pb-stop.on { fill: #C0392B; stroke: #8E2419; }
.pbt { font-size: 10.5px; font-weight: 800; fill: var(--navy); pointer-events: none; }
.pb.on + .pbt { fill: #fff; }
.tpname { font-size: 15px; font-weight: 800; fill: var(--navy); }
.tpsub { font-size: 11.5px; font-weight: 700; fill: #4A5A70; }
.cell { fill: #fff; stroke: #8F9BB0; stroke-width: 1.5; }
.cpre { font-size: 10px; font-weight: 600; fill: #6A788C; }
.ccode { font-size: 14.5px; font-weight: 800; fill: var(--navy); }
.csw-on { fill: #2E9D5B; } .csw-off { fill: #A7A8A9; }
.cswt { font-size: 8.5px; font-weight: 800; fill: #fff; pointer-events: none; }
.num { font-size: 14px; font-weight: 800; fill: #fff; text-anchor: middle; pointer-events: none; }
.vlbl { font-size: 12px; font-weight: 800; letter-spacing: .6px; }
.vlbl.is-open { fill: #1E7A44; } .vlbl.is-closed { fill: var(--navy); }
.ring { fill: none; stroke: #D63B3B; stroke-width: 2.5; }
.hit { fill: transparent; }
.obj { cursor: pointer; }
.obj:hover .ring { stroke-width: 4; }
.obj.sel .ring { stroke: var(--sun); stroke-width: 6; }
.cellg:hover .cell { stroke: var(--navy); stroke-width: 2.5; }
.cellg.sel .cell { stroke: var(--sun); stroke-width: 5; fill: #FFFBEA; }
.hint .ring, .hint .cell, .case.hint rect:first-child, .post.hint > rect:first-child { animation: hintp 1.1s ease-in-out infinite; }
@keyframes hintp { 50% { stroke: #426DA9; stroke-width: 7; } }
.ga rect { stroke-width: 2; }
.ga-none rect { fill: #F2F4F8; stroke: #A7A8A9; } .ga-h2 rect { fill: #FDECEA; stroke: var(--bad); } .ga-ok rect { fill: #E7F6EE; stroke: var(--ok); }
.gat { font-size: 12px; font-weight: 800; fill: #4A5A70; text-transform: uppercase; letter-spacing: .6px; }
.gav { font-size: 15px; font-weight: 800; fill: var(--navy); }
.ga-h2 .gav { fill: var(--bad); } .ga-ok .gav { fill: var(--ok); }
.caset { font-size: 13px; font-weight: 800; fill: var(--navy); }
.casek { font-size: 12.5px; font-weight: 700; fill: var(--navy); }
.legend text { font-size: 12.5px; font-weight: 600; fill: #4A5A70; }
.legend .lg2 { font-size: 11px; }

/* матрица */
.matrixbox { position: absolute; inset: 0; overflow: auto; padding: 10px 12px 8px; }
.mx-title { text-align: center; font-weight: 800; font-size: 16px; color: var(--navy); margin-bottom: 4px; }
.mx td.c { text-align: center; }
.mx-list .mrow td:nth-child(2) { white-space: nowrap; }
.mx { width: 100%; border-collapse: collapse; font-size: 11px; margin-bottom: 6px; }
.mx th, .mx td { border: 1px solid #9AA4B4; padding: 3px 6px; vertical-align: top; text-align: left; line-height: 1.3; }
.mx th.g { background: var(--mxg); color: #fff; font-weight: 800; text-align: center; }
.mx tr.r th, .mx td.r-head { background: var(--mxr); color: #fff; font-weight: 800; text-align: center; }
.mx-head td { text-align: center; }
.mx-en td:first-child { font-weight: 700; }
.mx-list .sub th { background: #F3E3E1; color: var(--mxr); font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; }
.mrow { cursor: pointer; }
.mrow td { font-size: 12.5px; }
.mrow td.c { text-align: center; font-weight: 800; width: 40px; }
.mrow td.x { font-size: 10.5px; color: #4A5A70; line-height: 1.2; }
.mrow:hover td { background: #F6F8FB; }
.mrow.on td { background: #FFF3C4; }
.mrow.on td:first-child { box-shadow: inset 5px 0 0 var(--sun); }
.mrow.dn td.c { color: var(--ok); }
.mx-note { font-size: 10.5px; color: #6A788C; }
.view-matrix .mx { font-size: 15px; } .view-matrix .mrow td { font-size: 16px; } .view-matrix .mrow td.x { font-size: 14px; } .view-matrix .mx-title { font-size: 22px; }

/* низ: инспектор и действия */
.bottom { position: absolute; left: 8px; top: 674px; width: 1584px; height: 204px; display: grid; grid-template-columns: 930px 646px; gap: 8px; }
.insp { padding: 9px 12px; }
.insp-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #6A788C; font-weight: 700; font-size: 16px; gap: 6px; }
.ie-ico { font-size: 30px; }
.ih { display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--navy); margin-bottom: 7px; }
.ih-n { width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.ih-s { font-size: 13px; font-weight: 700; color: #6A788C; }
.irow { display: grid; grid-template-columns: 104px 1fr; align-items: center; gap: 8px; margin-bottom: 6px; }
.irow.two { grid-template-columns: 104px auto 60px auto; justify-content: start; }
.irow label { font-size: 11.5px; font-weight: 800; color: #4A5A70; text-transform: uppercase; letter-spacing: .6px; }
.irow .l2 { text-align: right; }
.ibtns { display: flex; gap: 5px; flex-wrap: nowrap; }
.tb { border: 1.5px solid #CBD3DF; background: #fff; color: var(--navy); font-weight: 800; font-size: 13.5px; padding: 6px 16px; border-radius: 8px; }
.tb.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.dev { width: 88px; height: 58px; border: 1.5px solid #CBD3DF; background: #fff; border-radius: 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 3px; }
.dev span { font-size: 11px; font-weight: 700; color: var(--navy); line-height: 1.12; text-align: center; }
.dev.on, .lk.on { border-color: var(--sun); background: #FFF6D6; box-shadow: 0 0 0 2px var(--sun); }
.lk { height: 38px; border: 1.5px solid #CBD3DF; background: #fff; border-radius: 8px; display: flex; align-items: center; gap: 5px; padding: 0 9px 0 6px; }
.lk span { font-size: 11.5px; font-weight: 700; color: var(--navy); white-space: nowrap; }
.rm { border: 1.5px dashed #B9C2D0; background: #fff; color: #6A788C; font-weight: 800; font-size: 11.5px; border-radius: 8px; padding: 0 9px; }
.acts { padding: 9px 12px; }
.at { font-size: 11.5px; font-weight: 800; color: #4A5A70; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 8px; }
.abs { display: flex; flex-wrap: wrap; gap: 7px; }
.ab { border: 1.5px solid var(--navy); background: #fff; color: var(--navy); font-weight: 800; font-size: 14px; padding: 10px 14px; border-radius: 9px; }
.ab.done { background: #E7F6EE; border-color: var(--ok); color: #0F5A31; }
.ab.go { background: var(--navy); color: #fff; }
.ab.go.done { background: #E7F6EE; color: #0F5A31; }
.ab.hint { animation: hintb 1.1s ease-in-out infinite; }
@keyframes hintb { 50% { box-shadow: 0 0 0 4px var(--corn); } }
.prog { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-weight: 800; color: var(--navy); font-size: 13px; }
.pbar { flex: 1; height: 10px; background: var(--bg); border-radius: 6px; overflow: hidden; }
.pbar i { display: block; height: 100%; background: var(--sun); }
.crew { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.wrow { display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
.wrow b { color: var(--navy); width: 150px; flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wrow .ws { font-weight: 700; color: #4A5A70; width: 100px; flex: none; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wrow.off .ws { color: var(--ok); }
.wbs { display: flex; gap: 4px; }
.wb { border: 1.5px solid #CBD3DF; background: #fff; color: var(--navy); font-weight: 700; font-size: 10.5px; flex: none; padding: 3px 6px; border-radius: 7px; white-space: nowrap; }
.wb.warn { color: #8A5A00; } .wb.danger { color: var(--bad); border-color: #E7B4AE; }
.acts .abs .ab { font-size: 13px; padding: 8px 11px; }
.acts .crew + .abs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.acts .crew + .abs .ab { font-size: 11.5px; padding: 7px 8px; white-space: nowrap; }
.foot { position: absolute; left: 0; bottom: 3px; width: 1600px; text-align: center; font-size: 10.5px; color: #6A788C; font-weight: 600; }

/* тост */
.toast { position: absolute; left: 50%; top: 150px; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; background: var(--navy); color: #fff; font-weight: 700; font-size: 16px;
  padding: 12px 22px; border-radius: 12px; max-width: 900px; text-align: center; box-shadow: 0 8px 24px rgba(11,23,40,.3); transition: .25s; border-left: 6px solid var(--sun); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { background: #8E2419; border-left-color: #FFB4A9; }
.toast.warn { background: #6B5300; border-left-color: var(--sun); }

/* модальные окна */
.modal { position: absolute; inset: 0; background: rgba(11,23,40,.62); display: none; align-items: center; justify-content: center; z-index: 50; }
.modal.show { display: flex; }
.mbox { background: #fff; border-radius: 16px; width: 980px; max-height: 820px; overflow: auto; padding: 26px 32px; box-shadow: 0 20px 60px rgba(0,0,0,.4); border-top: 6px solid var(--sun); }
.mbox h2 { margin: 2px 0 4px; font-size: 28px; color: var(--navy); font-weight: 800; }
.mk { font-size: 12px; font-weight: 800; color: var(--blue); letter-spacing: 1.8px; text-transform: uppercase; }
.meq { font-weight: 700; color: #4A5A70; font-size: 15px; margin-bottom: 14px; }
.mblock { background: var(--bg); border-radius: 12px; padding: 12px 16px; margin-bottom: 10px; }
.mblock.task { background: #FFF6D6; }
.mblock h4, .mmode h4, .rcol h4 { margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: #4A5A70; }
.mblock p { margin: 0; font-size: 18px; line-height: 1.45; font-weight: 500; }
.mmode { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.mmode h4 { grid-column: 1 / -1; }
.mm { text-align: left; border: 2px solid #CBD3DF; background: #fff; border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.mm b { font-size: 17px; color: var(--navy); } .mm span { font-size: 13px; color: #4A5A70; font-weight: 600; }
.mm.on { border-color: var(--navy); box-shadow: 0 0 0 2px var(--navy); }
.mfoot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.big { background: var(--sun); border: 0; color: var(--navy); font-weight: 800; font-size: 17px; padding: 13px 28px; border-radius: 11px; }
.sec { background: #fff; border: 1.5px solid #CBD3DF; color: var(--navy); font-weight: 800; font-size: 15px; padding: 12px 20px; border-radius: 11px; }
.keys { margin: 0; padding-left: 20px; font-size: 16px; line-height: 1.45; font-weight: 600; }
.keys li { margin-bottom: 6px; }
.keys em, .rcol em { display: block; font-style: normal; font-size: 12.5px; color: var(--blue); font-weight: 700; }
.rbanner { border-radius: 12px; padding: 14px 18px; display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; color: #fff; }
.rbanner b { font-size: 26px; font-weight: 800; } .rbanner span { font-size: 15px; font-weight: 600; opacity: .95; }
.rbanner.ok { background: var(--ok); } .rbanner.partial { background: var(--warn); } .rbanner.wrong { background: var(--bad); }
.rcols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rcol { background: var(--bg); border-radius: 12px; padding: 12px 14px; }
.rcol ul { list-style: none; margin: 0; padding: 0; }
.rcol li { display: flex; gap: 9px; font-size: 14px; font-weight: 600; line-height: 1.35; margin-bottom: 7px; }
.rcol li i { font-style: normal; font-weight: 800; width: 18px; flex: none; }
.rcol li.g i { color: var(--ok); } .rcol li.b i { color: var(--bad); } .rcol li.m i { color: #8F9BB0; } .rcol li.w i { color: var(--warn); }
.rcol u { text-decoration: none; display: inline-block; margin-top: 2px; background: var(--bad); color: #fff; font-size: 10.5px; font-weight: 800; padding: 1px 6px; border-radius: 5px; text-transform: uppercase; }
.rcol small { display: block; font-size: 11.5px; font-weight: 800; color: #4A5A70; text-transform: uppercase; }
.log { list-style: none; padding: 0; margin: 0; }
.log li { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid #E3E7EE; font-size: 15px; }
.log li i { font-style: normal; font-weight: 800; color: var(--blue); width: 26px; }
.log li span { display: block; font-size: 13px; color: #4A5A70; font-weight: 500; }
.log li em { display: block; font-style: normal; font-size: 13px; color: var(--bad); font-weight: 700; }
.log li.b b { color: #8E2419; }