/* NetMon POLTESA — tema "rak jaringan": baja rak, LED status, aksen oranye T568B */
:root{
  --rack:#141e29; --panel:#1b2836; --panel-2:#223244; --line:#2c3e52; --line-2:#3a5068;
  --ink:#e8eef4; --ink-2:#a9b8c8; --ink-3:#73879c;
  --ok:#39d98a; --warn:#ffb547; --crit:#ff5a5f; --down:#ff5a5f; --idle:#5b6f84; --info:#6cb6ff;
  --accent:#f08a24;
  --f-head:"Bahnschrift","DIN Alternate","DIN 2014","Roboto Condensed","Arial Narrow",system-ui,sans-serif;
  --f-body:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;
  --r-s:4px; --r-m:8px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--rack);color:var(--ink);font:15px/1.55 var(--f-body);font-variant-numeric:tabular-nums}
a{color:var(--ink);text-decoration-color:var(--accent);text-underline-offset:3px}
a:hover{color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
h1,h2,h3{font-family:var(--f-head);font-weight:600;letter-spacing:.01em;line-height:1.15;margin:0 0 .5em}
h1{font-size:1.9rem} h2{font-size:1.25rem} h3{font-size:1.05rem}
small,.muted{color:var(--ink-3)}
code,kbd{font-family:ui-monospace,Consolas,monospace;font-size:.9em;background:var(--panel-2);padding:.1em .35em;border-radius:3px}
.hidden{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- tombol & form ---------- */
.btn,button.btn{display:inline-flex;align-items:center;gap:.4em;font:600 .92rem var(--f-body);padding:.55em 1.05em;border-radius:var(--r-s);
  border:1px solid var(--line-2);background:var(--panel-2);color:var(--ink);cursor:pointer;text-decoration:none}
.btn:hover{border-color:var(--ink-3)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#1a1006}
.btn-primary:hover{background:#ff9c3d;color:#1a1006}
.btn-danger{border-color:#7a2f33;color:#ffb3b5}
.btn-danger:hover{background:#3a1d22}
.btn-sm{padding:.3em .7em;font-size:.82rem}
.btn-link{background:none;border:0;color:var(--ink-2);cursor:pointer;font:inherit;padding:0;text-decoration:underline;text-decoration-color:var(--line-2)}
form.inline{display:inline}
label{display:block;font-size:.85rem;color:var(--ink-2);margin:0 0 .3em}
input[type=text],input[type=password],input[type=number],input[type=email],select,textarea{
  width:100%;font:inherit;color:var(--ink);background:#0f1821;border:1px solid var(--line);border-radius:var(--r-s);padding:.55em .7em}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none}
textarea{min-height:5em;resize:vertical}
.field{margin-bottom:1rem}
.field .hint{font-size:.8rem;color:var(--ink-3);margin-top:.25em}
.check{display:flex;gap:.5em;align-items:center;color:var(--ink)}
.check input{width:auto}
.grid-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 1.2rem}
.hp{position:absolute;left:-9999px}

/* ---------- app shell ---------- */
.topbar{display:flex;align-items:center;gap:1.5rem;padding:.6rem 1.4rem;background:#101922;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;font-family:var(--f-head);font-size:1.1rem;white-space:nowrap}
.brand b{color:var(--accent);font-weight:600}
.logo{width:28px;height:28px;color:var(--ink-2)}
.logo-led{fill:var(--ok)}
.nav{display:flex;gap:.2rem;flex-wrap:wrap;flex:1}
.nav a{padding:.4em .75em;border-radius:var(--r-s);text-decoration:none;color:var(--ink-2);font-size:.92rem}
.nav a:hover{background:var(--panel)}
.nav a[aria-current=page]{color:var(--ink);background:var(--panel-2);box-shadow:inset 0 -2px 0 var(--accent)}
.userbox{display:flex;gap:1rem;align-items:center;font-size:.9rem;white-space:nowrap}
.userbox a{text-decoration:none}
.userbox small{border:1px solid var(--line-2);border-radius:3px;padding:0 .35em;margin-left:.2em}
.page{padding:1.4rem;max-width:1600px;margin:0 auto}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.page-head p{margin:.2em 0 0;color:var(--ink-3)}
.box{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m);padding:1.1rem 1.2rem;margin-bottom:1.2rem}
.box > h2:first-child{margin-top:0}
.flash{padding:.7em 1em;border-radius:var(--r-s);margin-bottom:1rem;border-left:4px solid var(--info);background:#16273a}
.flash-success{border-color:var(--ok);background:#13291f}
.flash-error{border-color:var(--crit);background:#2e171b}
.flash-warning{border-color:var(--warn);background:#2e2414}
.secret-reveal{font:600 1.05rem ui-monospace,Consolas,monospace;word-break:break-all;background:#0f1821;border:1px dashed var(--accent);padding:.7em;border-radius:var(--r-s)}

table.tbl{width:100%;border-collapse:collapse;font-size:.9rem}
.tbl th{text-align:left;font-weight:600;color:var(--ink-3);border-bottom:1px solid var(--line-2);padding:.55em .6em;white-space:nowrap}
.tbl td{border-bottom:1px solid var(--line);padding:.55em .6em;vertical-align:top}
.tbl tr:hover td{background:#1f2e3e}
.tbl .num{text-align:right}
.tbl-wrap{overflow-x:auto}
.pager{display:flex;gap:.3rem;margin-top:1rem}
.pager a,.pager span{padding:.25em .65em;border:1px solid var(--line);border-radius:3px;text-decoration:none}
.pager span{background:var(--accent);color:#1a1006;border-color:var(--accent)}
.filters{display:flex;gap:.6rem;flex-wrap:wrap;align-items:end;margin-bottom:1rem}
.filters .field{margin:0;min-width:150px}

/* status pill / LED */
.led{display:inline-block;width:.62em;height:.62em;border-radius:50%;background:var(--idle);vertical-align:.05em;flex:none}
.s-up > .led,.led.s-up{background:var(--ok);box-shadow:0 0 6px rgba(57,217,138,.7)}
.s-warning > .led,.led.s-warning{background:var(--warn);box-shadow:0 0 6px rgba(255,181,71,.7)}
.s-critical > .led,.led.s-critical,.s-down > .led,.led.s-down{background:var(--crit);box-shadow:0 0 8px rgba(255,90,95,.8)}
.s-unreach > .led,.led.s-unreach{background:#8c4a52}
.pill{display:inline-flex;align-items:center;gap:.4em;font-size:.8rem;padding:.12em .6em;border-radius:99px;border:1px solid var(--line-2);white-space:nowrap}
.sev-critical{color:#ffc2c4;border-color:#8d3439}
.sev-warning{color:#ffdca6;border-color:#80602b}
.sev-info{color:#b9dcff;border-color:#2f5679}
.tag{font:600 .72rem var(--f-head);letter-spacing:.04em;padding:.15em .5em;border-radius:3px;background:var(--panel-2);color:var(--ink-2)}

/* ---------- auth ---------- */
body.auth{min-height:100vh;display:flex;background:var(--rack)}
.auth-wrap{margin:auto;padding:2rem 1rem;width:100%;max-width:420px}
.auth-card{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:var(--r-m);padding:2rem}
.auth-card .brand{margin-bottom:1.4rem}
.auth-card h1{font-size:1.45rem}
.auth-card .btn-primary{width:100%;justify-content:center;padding:.75em}
.auth-foot{text-align:center;font-size:.82rem;color:var(--ink-3);margin-top:1rem}
.otp-input{font:600 1.6rem/1 var(--f-head)!important;letter-spacing:.4em;text-align:center}

/* ---------- landing ---------- */
body.landing{background:var(--rack)}
.l-nav{display:flex;justify-content:space-between;align-items:center;padding:1.1rem clamp(1rem,5vw,4rem)}
.l-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:3rem;align-items:center;padding:3rem clamp(1rem,5vw,4rem) 4rem;max-width:1400px;margin:0 auto}
.l-hero h1{font-size:clamp(2.3rem,5vw,4.1rem);line-height:1.02;font-weight:600;letter-spacing:-.005em;margin-bottom:.4em;max-width:13ch}
.l-hero p.lead{font-size:1.15rem;color:var(--ink-2);max-width:46ch;margin:0 0 1.8rem}
.l-hero .cta{display:flex;gap:.8rem;flex-wrap:wrap}
.l-hero .cta .btn{padding:.75em 1.4em;font-size:1rem}

/* patch panel */
.patch{margin:0;background:linear-gradient(#26384b,#1d2b3a);border:1px solid var(--line-2);border-radius:6px;padding:1.1rem 1.2rem 1rem;box-shadow:0 30px 60px -30px #000}
.patch-head{display:flex;justify-content:space-between;font:600 .8rem var(--f-head);color:var(--ink-3);margin-bottom:.8rem}
.patch-screws{display:flex;justify-content:space-between}
.patch-row{display:grid;grid-template-columns:repeat(8,1fr);gap:.55rem}
.port{position:relative;text-align:center}
.port .jack{height:clamp(44px,4.4vw,64px);background:#0c131a;border-radius:3px;position:relative;border:1px solid #33475c}
.port .jack::after{content:"";position:absolute;left:28%;right:28%;bottom:0;height:9px;background:#1c2834;border-radius:2px 2px 0 0}
.port .leds{display:flex;justify-content:space-between;padding:0 5px;position:absolute;top:4px;left:0;right:0}
.port .leds i{width:7px;height:5px;border-radius:1px;background:#2a3a28}
.port .leds i.l{background:var(--ok);box-shadow:0 0 5px var(--ok)}
.port .leds i.a{background:var(--warn);animation:blink 1.1s steps(2) infinite}
.port:nth-child(3n) .leds i.a{animation-duration:.7s}
.port:nth-child(4n+1) .leds i.a{animation-duration:1.6s}
.port span{display:block;font:500 .68rem var(--f-head);color:var(--ink-3);margin-top:.35rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.port.fault .leds i{background:#2a1a1c;box-shadow:none;animation:none}
.port.fault .jack{border-color:var(--crit);box-shadow:0 0 0 2px rgba(255,90,95,.25)}
.port.fault span{color:#ffb3b5}
.patch-diag{margin-top:1rem;background:#0f1821;border:1px solid #6a2c31;border-left:4px solid var(--crit);border-radius:4px;padding:.8rem 1rem;font-size:.9rem}
.patch-diag b{font-family:var(--f-head);font-size:1rem;color:#ffc2c4;display:block;margin-bottom:.25rem}
.patch-diag p{margin:.25rem 0;color:var(--ink-2)}
.hero-ready .port.fault-anim .leds i{animation:faultout 0s 2.6s forwards}
.hero-ready .port.fault-anim .jack{animation:faultjack .3s 2.6s both}
.hero-ready .patch-diag{animation:diagin .4s 2.9s both}
@keyframes blink{50%{opacity:.15}}
@keyframes faultout{to{background:#2a1a1c;box-shadow:none;opacity:1}}
@keyframes faultjack{from{border-color:#33475c}to{border-color:var(--crit);box-shadow:0 0 0 2px rgba(255,90,95,.25)}}
@keyframes diagin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.l-sec{padding:4rem clamp(1rem,5vw,4rem);max-width:1400px;margin:0 auto;border-top:1px solid var(--line)}
.l-sec > h2{font-size:clamp(1.6rem,3vw,2.3rem);max-width:24ch}
.l-sec > p.sub{color:var(--ink-2);max-width:60ch;margin:0 0 2rem}
.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden}
.role{padding:1.4rem 1.5rem;background:var(--panel)}
.role + .role{border-left:1px solid var(--line)}
.role h3{font-size:1.2rem;display:flex;gap:.5rem;align-items:center}
.role p{color:var(--ink-2);margin:.3rem 0 .8rem;font-size:.95rem}
.role ul{margin:0;padding-left:1.1rem;color:var(--ink-2);font-size:.9rem}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;counter-reset:s}
.steps li{counter-increment:s;border-top:2px solid var(--line-2);padding-top:1rem}
.steps li::before{content:counter(s);font:600 1.6rem var(--f-head);color:var(--accent);display:block;margin-bottom:.4rem}
.steps h3{margin-bottom:.3rem}
.steps p{margin:0;color:var(--ink-2);font-size:.93rem}
.detects{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.8rem 2rem;margin:0;padding:0;list-style:none}
.detects li{padding:.7rem 0;border-bottom:1px solid var(--line)}
.detects b{font-family:var(--f-head);font-size:1.02rem;display:block}
.detects span{color:var(--ink-2);font-size:.9rem}
.layers{display:grid;grid-template-columns:1fr 1fr;gap:.6rem 2.5rem}
.layer{display:flex;gap:.9rem;padding:.8rem 0;border-bottom:1px solid var(--line)}
.layer .lv{font:600 .82rem var(--f-head);color:var(--accent);min-width:4.2em;padding-top:.15rem}
.layer p{margin:.1rem 0 0;color:var(--ink-2);font-size:.9rem}
.l-foot{padding:2rem clamp(1rem,5vw,4rem);border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;color:var(--ink-3);font-size:.88rem}

/* ---------- monitor (dashboard & layar NOC) ---------- */
body.noc{overflow-x:hidden}
.noc-top{display:flex;align-items:center;gap:1.2rem;padding:.7rem 1.2rem;background:#101922;border-bottom:1px solid var(--line)}
.noc-top .brand{font-size:1.3rem}
.overall{display:flex;align-items:center;gap:.6rem;font:600 1.15rem var(--f-head);padding:.35em .9em;border-radius:var(--r-s);border:1px solid var(--line-2)}
.overall.s-up{color:var(--ok);border-color:#21613f}
.overall.s-warning{color:var(--warn);border-color:#7c5a20}
.overall.s-critical{color:#ffd0d1;background:#4a1c21;border-color:var(--crit)}
.noc-stats{display:flex;gap:1.4rem;font-size:.9rem;color:var(--ink-2)}
.noc-stats b{font:600 1.15rem var(--f-head);color:var(--ink);margin-right:.25em}
.noc-right{margin-left:auto;display:flex;align-items:center;gap:1rem}
.clock{font:600 1.6rem var(--f-head);letter-spacing:.02em}
.clock small{display:block;font:500 .75rem var(--f-body);color:var(--ink-3);text-align:right}
.hb{font-size:.82rem;color:var(--ink-3);display:flex;gap:.4em;align-items:center}
.icon-btn{background:var(--panel);border:1px solid var(--line);color:var(--ink-2);border-radius:var(--r-s);padding:.4em .7em;cursor:pointer;font:inherit;font-size:.85rem}
.icon-btn[aria-pressed=true]{color:var(--accent);border-color:var(--accent)}

.alarm{display:flex;gap:1.2rem;align-items:center;padding:.9rem 1.2rem;background:#3d1519;border-bottom:2px solid var(--crit);animation:alarm 1.6s ease-in-out infinite}
.alarm .big{font:600 1.6rem/1.15 var(--f-head);color:#fff}
.alarm .where{color:#ffc2c4;font-size:1rem;margin-top:.2rem}
.alarm .tag{background:var(--crit);color:#2a0608;font-size:.9rem}
.alarm .count{margin-left:auto;font:600 1rem var(--f-head);color:#ffc2c4;white-space:nowrap}
.alarm.stale{background:#3a2a10;border-color:var(--warn);animation:none}
.alarm.stale .tag{background:var(--warn)}
@keyframes alarm{50%{background:#55181e}}

.mon{display:grid;gap:1rem;padding:1rem 1.2rem;grid-template-columns:minmax(0,1.6fr) minmax(360px,1fr);grid-template-areas:"topo inc" "routers inc" "servers traffic"}
.page .mon{padding:0}
.p{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m);padding:.9rem 1rem;min-width:0}
.p > h2{font-size:1rem;color:var(--ink-2);display:flex;justify-content:space-between;align-items:center;margin-bottom:.7rem}
.p > h2 small{font:500 .8rem var(--f-body)}
.p-topo{grid-area:topo}
.p-inc{grid-area:inc;display:flex;flex-direction:column;max-height:calc(100vh - 150px);position:sticky;top:.5rem}
.p-routers{grid-area:routers;background:none;border:0;padding:0}
.p-servers{grid-area:servers}
.p-traffic{grid-area:traffic}

#topo{width:100%;height:auto;display:block}
.t-link{fill:none;stroke-width:3}
.t-link.up{stroke:#2f8f62}
.t-link.flow{stroke:var(--ok);stroke-width:2;stroke-dasharray:4 14;animation:flow 1.4s linear infinite;opacity:.8}
.t-link.warning{stroke:var(--warn)}
.t-link.down{stroke:var(--crit);stroke-dasharray:8 7}
.t-link.unreach{stroke:#6b3a40;stroke-dasharray:3 6}
@keyframes flow{to{stroke-dashoffset:-36}}
.t-port{font:500 11px var(--f-head);fill:var(--ink-3)}
.t-port.down{fill:#ff9a9d;font-weight:600}
.t-node rect{fill:#203041;stroke:var(--line-2);stroke-width:1.5}
.t-node.router rect{fill:#24384c}
.t-node .nm{font:600 14px var(--f-head);fill:var(--ink)}
.t-node .sub{font:12px var(--f-body);fill:var(--ink-3)}
.t-node.s-warning rect{stroke:var(--warn)}
.t-node.s-critical rect,.t-node.s-down rect{stroke:var(--crit);stroke-width:2.5}
.t-node.s-down rect{fill:#3b1a1f;animation:nodepulse 1.2s ease-in-out infinite}
.t-node.s-unreach rect{fill:#2a2026;stroke:#6b3a40;stroke-dasharray:4 4}
.t-node.s-unreach .nm{fill:#b39aa0}
.t-node circle.st{fill:var(--idle)}
.t-node.s-up circle.st{fill:var(--ok)}
.t-node.s-warning circle.st{fill:var(--warn)}
.t-node.s-critical circle.st,.t-node.s-down circle.st{fill:var(--crit)}
.t-cloud{fill:#1a2a3a;stroke:var(--line-2)}
.t-cloud-t{font:600 13px var(--f-head);fill:var(--ink-2)}
@keyframes nodepulse{50%{fill:#5a1c23}}

.routers{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1rem}
.rc{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--idle);border-radius:var(--r-m);padding:.85rem 1rem}
.rc.s-up{border-top-color:var(--ok)} .rc.s-warning{border-top-color:var(--warn)} .rc.s-critical,.rc.s-down{border-top-color:var(--crit)}
.rc.s-down{background:#2c181d}
.rc-head{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}
.rc-head h3{margin:0;font-size:1.15rem}
.rc-head a{text-decoration:none}
.rc-role{color:var(--ink-3);font-size:.82rem}
.rc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin:.7rem 0}
.st-k{font-size:.72rem;color:var(--ink-3)}
.st-v{font:600 1.15rem var(--f-head)}
.bar{height:4px;background:#0f1821;border-radius:2px;margin-top:.2rem;overflow:hidden}
.bar i{display:block;height:100%;background:var(--ok);width:0}
.bar i.warn{background:var(--warn)} .bar i.crit{background:var(--crit)}
.chips{display:flex;flex-wrap:wrap;gap:.35rem}
.chip{display:inline-flex;align-items:center;gap:.4em;font-size:.78rem;padding:.2em .55em;background:#152230;border:1px solid var(--line);border-radius:3px;white-space:nowrap}
.chip.s-down{border-color:#8d3439;background:#30181c;color:#ffc2c4}
.chip.s-warning{border-color:#7c5a20}
.chip.s-critical{border-color:#8d3439}
.chip em{font-style:normal;color:var(--ink-3)}
.rc-sec{font-size:.75rem;color:var(--ink-3);margin:.6rem 0 .3rem}
.rc-err{font-size:.82rem;color:#ffb3b5;margin-top:.5rem}

.servers{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.5rem}
.sv{display:block;text-decoration:none;background:#16222f;border:1px solid var(--line);border-left:3px solid var(--idle);border-radius:var(--r-s);padding:.5rem .65rem}
.sv.s-up{border-left-color:var(--ok)} .sv.s-warning{border-left-color:var(--warn)} .sv.s-critical,.sv.s-down{border-left-color:var(--crit);background:#2c181d}
.sv.s-unreach{border-left-color:#6b3a40;opacity:.75}
.sv b{display:block;font:600 .95rem var(--f-head);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv span{display:block;font-size:.75rem;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv .ms{font:600 .85rem var(--f-head);color:var(--ink-2)}

.inc-list{overflow-y:auto;display:flex;flex-direction:column;gap:.6rem;padding-right:.2rem;min-height:120px}
.inc{background:#16222f;border:1px solid var(--line);border-left:4px solid var(--warn);border-radius:var(--r-s);padding:.7rem .85rem}
.inc.sev-critical{border-left-color:var(--crit);background:#25171c}
.inc.sev-info{border-left-color:#3e5a76;opacity:.85}
.inc-top{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.inc-top .dur{margin-left:auto;font:600 .85rem var(--f-head);color:var(--ink-2)}
.inc.sev-critical .tag{background:#5a1c23;color:#ffd0d1}
.inc h3{font-size:1.02rem;margin:.4rem 0 .15rem}
.inc .path{font-size:.82rem;color:var(--accent);margin-bottom:.35rem}
.inc .an{font-size:.85rem;color:var(--ink-2);white-space:pre-line;margin:0}
.inc details{margin-top:.4rem;font-size:.85rem}
.inc summary{cursor:pointer;color:var(--ink-2)}
.inc ul{margin:.3rem 0 0;padding-left:1.1rem;color:var(--ink)}
.inc .acts{display:flex;gap:.4rem;margin-top:.5rem;align-items:center}
.inc .acked{font-size:.78rem;color:var(--ink-3)}
.inc-group{font-size:.8rem;color:var(--ink-3);margin:.4rem 0 0}
.empty{color:var(--ink-3);text-align:center;padding:1.5rem .5rem}
.empty b{display:block;color:var(--ok);font:600 1.2rem var(--f-head);margin-bottom:.2rem}

.traffic{display:grid;gap:.55rem}
.tr{display:grid;grid-template-columns:minmax(0,1.2fr) 110px minmax(0,1fr);gap:.6rem;align-items:center;font-size:.82rem}
.tr .nm b{display:block;font:600 .9rem var(--f-head);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr .nm span{color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.tr canvas{width:110px;height:30px}
.tr .rates{text-align:right;white-space:nowrap}
.tr .rates i{font-style:normal;color:var(--ink-3)}
.conn-lost{position:fixed;inset:auto 1rem 1rem auto;background:#3a2a10;border:1px solid var(--warn);color:#ffe2b0;padding:.7rem 1rem;border-radius:var(--r-s);z-index:50}

/* layar NOC besar: font lebih besar */
body.noc.kiosk{font-size:15px}
.kiosk .mon{padding:.8rem 1rem;gap:.8rem}
.kiosk .rc{padding:.7rem .9rem}
.kiosk .rc-stats{margin:.45rem 0}
.kiosk .p{padding:.7rem .9rem}
@media (min-width:2200px){body.noc.kiosk{font-size:19px} .clock{font-size:2rem}}

/* ---------- detail perangkat ---------- */
.kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.8rem}
.kv div span{display:block;font-size:.75rem;color:var(--ink-3)}
.kv div b{font:600 1.1rem var(--f-head)}
.charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:1rem}
.chart-box canvas{width:100%;height:200px;display:block}
.chart-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.4rem}
.chart-head h3{margin:0;font-size:.95rem}
.legend{font-size:.78rem;color:var(--ink-3);display:flex;gap:.8rem}
.legend i{display:inline-block;width:10px;height:3px;margin-right:.3em;vertical-align:middle}

/* ---------- responsif ---------- */
@media (max-width:1200px){
  .mon{grid-template-columns:1fr;grid-template-areas:"inc" "topo" "routers" "servers" "traffic"}
  .p-inc{position:static;max-height:none}
  .l-hero{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .topbar{flex-wrap:wrap;gap:.6rem;padding:.6rem 1rem}
  .nav{order:3;width:100%;overflow-x:auto;flex-wrap:nowrap}
  .page{padding:1rem}
  .noc-top{flex-wrap:wrap}
  .noc-stats{display:none}
  .roles{grid-template-columns:1fr}
  .role + .role{border-left:0;border-top:1px solid var(--line)}
  .steps,.layers{grid-template-columns:1fr}
  .patch-row{grid-template-columns:repeat(4,1fr)}
  .alarm{flex-wrap:wrap}
  .alarm .big{font-size:1.2rem}
  .tr{grid-template-columns:minmax(0,1fr) 90px}
  .tr .rates{grid-column:1/-1;text-align:left}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
.inc-stack{display:flex;flex-direction:column;gap:.7rem}
.inc .acts input[type=text]{width:auto;min-width:240px;padding:.3em .5em;font-size:.85rem}
.lg-rx{background:var(--ok)} .lg-tx{background:var(--info)}
.mt{margin-top:1.2rem}
.t-port.up{fill:var(--ok)}
.kiosk #topo{max-height:31vh}
@media (min-width:1201px){
  .kiosk .mon{grid-template-columns:minmax(0,1fr) minmax(0,.85fr) minmax(400px,1fr);grid-template-areas:"topo topo inc" "routers routers inc" "servers traffic inc";grid-template-rows:auto auto minmax(0,1fr);flex:1;min-height:0}
  body.kiosk{height:100vh;display:flex;flex-direction:column;overflow:hidden}
  .kiosk #mon-app{flex:1;min-height:0;display:flex;flex-direction:column}
  .kiosk .p-inc{max-height:none;position:static;min-height:0}
  .kiosk .p-servers,.kiosk .p-traffic{overflow:hidden}
  .kiosk .tr{grid-template-columns:minmax(0,1fr) 90px}
  .kiosk .tr .rates{grid-column:1/-1;text-align:left;margin-top:-.2rem}
}
.tr .rates{font-size:.8rem}
.tr .rates .muted{font-size:.75rem}
@media (min-width:1201px){
  .kiosk .rc-sec{display:none}
  .kiosk .rc .chips{margin-top:.45rem}
  .kiosk .servers{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:.4rem}
  .kiosk .sv{padding:.35rem .55rem}
  .kiosk .sv span:not(.ms){font-size:.7rem}
  .kiosk .traffic{gap:.35rem}
}