:root{--bg:#f4f7fb;--panel:#fff;--sidebar:#101828;--sidebar2:#172033;--text:#152033;--muted:#6c788c;--line:#e5eaf2;--accent:#4f6df5;--accent2:#18a67e;--danger:#e5484d;--warn:#d18b20;--shadow:0 12px 35px rgba(16,24,40,.08);--radius:18px}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text);background:var(--bg)}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.app-shell{display:flex;min-height:100vh}.sidebar{width:264px;background:linear-gradient(180deg,var(--sidebar),#0b1220);color:#dce4f1;position:fixed;inset:0 auto 0 0;padding:22px 16px;display:flex;flex-direction:column;z-index:20}.brand{display:flex;align-items:center;gap:11px;padding:5px 8px 22px}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,#6e82ff,#35c7a3);color:#fff;font-weight:800;box-shadow:0 8px 24px rgba(79,109,245,.25)}.brand b{display:block;color:#fff;font-size:18px;letter-spacing:.2px}.brand small{display:block;color:#8492aa;font-size:11px;margin-top:2px}.nav{display:flex;flex-direction:column;gap:5px;overflow:auto}.nav a{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:11px;color:#aeb9ca;font-size:14px;transition:.18s}.nav a span{width:20px;text-align:center;color:#7f8da5}.nav a:hover,.nav a.active{color:#fff;background:#1c2940}.nav a.active{box-shadow:inset 3px 0 0 #7185ff}.nav-label{text-transform:uppercase;font-size:10px;letter-spacing:1.5px;color:#59677e;padding:20px 13px 5px}.sidebar-user{margin-top:auto;border-top:1px solid #22304a;padding:17px 5px 0;display:flex;align-items:center;gap:10px}.avatar{width:36px;height:36px;border-radius:50%;background:#26344e;display:grid;place-items:center;font-weight:700}.sidebar-user b{font-size:12px;display:block;max-width:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-user small{font-size:10px;color:#7f8da5}.sidebar-user form{margin-left:auto}.sidebar-user button{border:0;background:transparent;color:#8794aa;font-size:20px;cursor:pointer}.main{margin-left:264px;min-width:0;width:calc(100% - 264px)}.topbar{height:92px;background:rgba(255,255,255,.84);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 32px;position:sticky;top:0;z-index:10}.topbar h1{margin:0;font-size:22px}.topbar p{margin:4px 0 0;color:var(--muted);font-size:12px}.top-status{margin-left:auto;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}.pulse{width:9px;height:9px;background:#22b784;border-radius:50%;box-shadow:0 0 0 5px rgba(34,183,132,.10)}.menu-btn{display:none}.content{padding:28px 32px 50px;max-width:1580px;margin:auto}.grid{display:grid;gap:18px}.grid.cards{grid-template-columns:repeat(4,minmax(0,1fr))}.grid.two{grid-template-columns:1.25fr .75fr}.metric{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}.metric-head{display:flex;justify-content:space-between;color:var(--muted);font-size:12px}.metric-value{font-size:30px;font-weight:800;margin:12px 0 4px;letter-spacing:-1px}.metric small{color:var(--muted)}.metric .bad{color:var(--danger);font-weight:700}.metric .good{color:var(--accent2);font-weight:700}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.panel-head{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}.panel-head h2,.panel-head h3{margin:0;font-size:15px}.panel-head p{margin:3px 0 0;color:var(--muted);font-size:12px}.panel-body{padding:20px}.toolbar{display:flex;align-items:center;gap:10px;margin-bottom:18px;flex-wrap:wrap}.toolbar .spacer{margin-left:auto}.btn{border:1px solid var(--line);background:#fff;color:#2d3a50;padding:9px 14px;border-radius:10px;cursor:pointer;font-weight:650;font-size:13px;display:inline-flex;align-items:center;justify-content:center;gap:7px}.btn:hover{transform:translateY(-1px);box-shadow:0 5px 18px rgba(16,24,40,.08)}.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn.danger{color:var(--danger)}.btn.small{padding:6px 10px;font-size:12px}.btn.wide{width:100%}.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse;font-size:13px}.table th{text-align:left;padding:10px 12px;color:#7a879a;font-weight:650;font-size:11px;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--line);white-space:nowrap}.table td{padding:13px 12px;border-bottom:1px solid #edf0f5;vertical-align:middle}.table tr:last-child td{border-bottom:0}.table tr:hover td{background:#fafbfe}.entity{display:flex;gap:10px;align-items:center}.entity-icon{width:36px;height:36px;border-radius:10px;background:#f0f3ff;color:#5269de;display:grid;place-items:center;font-weight:800}.entity b{display:block}.entity small{color:var(--muted)}.badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:700;background:#edf1f7;color:#637087}.badge:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}.badge.up,.badge.ok,.badge.operational,.badge.active,.badge.completed{background:#e9f8f2;color:#178361}.badge.down,.badge.failed,.badge.outage,.badge.offline,.badge.critical{background:#fdeeee;color:#c9363e}.badge.warning,.badge.degraded,.badge.high,.badge.in_progress{background:#fff5df;color:#a86b0f}.badge.unknown,.badge.paused,.badge.maintenance,.badge.draft{background:#eef1f5;color:#68758a}.badge.medium,.badge.planned,.badge.approved{background:#eef1ff;color:#536bd9}.filters{display:flex;gap:8px;flex-wrap:wrap}.filters input,.filters select{min-width:160px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.form-grid .full{grid-column:1/-1}label{display:block;font-size:12px;font-weight:650;color:#4c596c}input,select,textarea{width:100%;margin-top:6px;border:1px solid #dbe1eb;border-radius:10px;padding:10px 12px;background:#fff;color:var(--text);outline:none}input:focus,select:focus,textarea:focus{border-color:#8d9cff;box-shadow:0 0 0 3px rgba(79,109,245,.09)}textarea{min-height:110px;resize:vertical}.check{display:flex;align-items:center;gap:8px}.check input{width:auto;margin:0}.alert{padding:12px 15px;border-radius:12px;margin-bottom:16px;font-size:13px}.alert.success{background:#eaf8f3;color:#176f58}.alert.danger{background:#feeeee;color:#9d2930}.alert ul{margin:7px 0 0}.kv{display:grid;grid-template-columns:180px 1fr;border-top:1px solid var(--line)}.kv dt,.kv dd{margin:0;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}.kv dt{color:var(--muted)}.empty{padding:42px;text-align:center;color:var(--muted)}.section-gap{margin-top:20px}.service-card{padding:15px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px}.service-card:last-child{border-bottom:0}.service-card h3{font-size:13px;margin:0 0 4px}.service-card p{font-size:11px;color:var(--muted);margin:0}.mini-stats{display:flex;gap:16px;flex-wrap:wrap}.mini-stat b{display:block;font-size:18px}.mini-stat small{color:var(--muted);font-size:10px}.timeline{display:flex;flex-direction:column}.timeline-item{display:grid;grid-template-columns:18px 1fr;gap:10px;padding:10px 0}.timeline-dot{width:8px;height:8px;border-radius:50%;background:#6c7cf2;margin-top:6px;box-shadow:0 0 0 4px #eef0ff}.timeline-item p{margin:0;font-size:12px}.timeline-item small{color:var(--muted)}.secret-mask{letter-spacing:2px;font-family:ui-monospace,monospace}.modal{position:fixed;inset:0;background:rgba(6,12,23,.62);z-index:50;display:none;place-items:center;padding:20px}.modal.open{display:grid}.modal-card{background:#fff;width:min(620px,100%);border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.25);overflow:hidden}.modal-head{display:flex;justify-content:space-between;align-items:center;padding:17px 20px;border-bottom:1px solid var(--line)}.modal-head h3{margin:0}.modal-head button{border:0;background:none;font-size:26px;cursor:pointer}.secret-body{padding:20px}.secret-row{background:#f6f8fb;padding:12px;border-radius:10px;margin:8px 0}.secret-row small{display:block;color:var(--muted);margin-bottom:3px}.secret-row code{white-space:pre-wrap;word-break:break-all;font-size:13px}.modal-note{padding:12px 20px;background:#fff7e8;color:#8f651d;font-size:11px}.login-page{background:#0c1424;color:#fff}.login-wrap{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr;max-width:1200px;margin:auto;align-items:center;padding:40px;gap:80px}.login-info h1{font-size:52px;line-height:1.05;margin:40px 0 18px;letter-spacing:-2px}.login-info>p{color:#9dadc4;font-size:17px;line-height:1.7;max-width:630px}.login-brand{padding:0}.login-points{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}.login-points span{font-size:11px;color:#bdc8db;border:1px solid #253451;padding:8px 11px;border-radius:999px}.login-card{background:#fff;color:var(--text);padding:34px;border-radius:24px;box-shadow:0 30px 80px rgba(0,0,0,.3)}.login-card h2{margin:0 0 5px}.login-card>p{margin:0 0 25px;color:var(--muted)}.login-card label{margin:14px 0}.login-card .muted{display:block;margin-top:18px;line-height:1.5}.muted{color:var(--muted)}.danger-text{color:var(--danger)}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.page-actions{display:flex;gap:8px;margin-left:auto}@media(max-width:1050px){.grid.cards{grid-template-columns:repeat(2,1fr)}.grid.two{grid-template-columns:1fr}.sidebar{transform:translateX(-100%);transition:.2s}.nav-open .sidebar{transform:translateX(0)}.main{margin-left:0;width:100%}.menu-btn{display:block;border:0;background:none;font-size:22px;margin-right:14px}.topbar{padding:0 20px}.content{padding:22px 20px}.login-wrap{grid-template-columns:1fr;max-width:600px}.login-info{display:none}}@media(max-width:650px){.grid.cards{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.top-status{display:none}.content{padding:16px 12px}.topbar{height:78px}.login-wrap{padding:18px}.login-card{padding:24px}.kv{grid-template-columns:1fr}.kv dt{border-bottom:0;padding-bottom:2px}.kv dd{padding-top:2px}}

/* v0.2.0 base */
.nav-group{margin:3px 0}.nav-group summary{list-style:none;display:grid;grid-template-columns:24px 1fr 18px;align-items:center;padding:10px 12px;color:#aeb9cc;cursor:pointer;border-radius:10px;font-size:12px}.nav-group summary::-webkit-details-marker{display:none}.nav-group summary:hover{background:rgba(255,255,255,.04);color:#fff}.nav-group summary i{font-style:normal;transition:.18s}.nav-group[open] summary i{transform:rotate(180deg)}.nav-group>div{padding:2px 0 4px 14px}.nav-group>div a{font-size:12px}.nav-count{margin-left:auto;background:#e14950;color:#fff;min-width:20px;height:20px;border-radius:10px;display:inline-grid;place-items:center;font-size:10px;font-style:normal;padding:0 5px}.top-actions{margin-left:auto;display:flex;align-items:center;gap:14px}.notification-bell{height:36px;min-width:36px;border:1px solid var(--line);border-radius:10px;display:flex;align-items:center;justify-content:center;gap:4px;background:#fff;color:#536176;position:relative}.notification-bell b{font-size:9px;background:#e14850;color:#fff;border-radius:10px;padding:2px 5px}.notification-bell.has-unread{border-color:#f2c8cb;color:#c9363e}.type-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:10px;background:#f4f6fa;border:1px solid #e5e9f1;color:#536176;font-size:12px;font-weight:700}.row-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.row-actions form{margin:0}.empty.compact{padding:20px}.alert.info{background:#edf5ff;color:#285d91}.field-hint{display:block;margin-top:5px;color:var(--muted);font-weight:400;line-height:1.45}.favicon-preview{display:flex;gap:10px;align-items:center;background:#f7f8fb;border:1px solid var(--line);border-radius:10px;padding:10px}.favicon-preview img{width:36px;height:36px;object-fit:contain}.favicon-preview span{font-size:11px;color:var(--muted);word-break:break-all}.form-section-title{grid-column:1/-1;margin:10px 0 4px;padding-top:10px;border-top:1px solid var(--line);font-size:13px}.settings-tests{display:flex;gap:8px;flex-wrap:wrap;border-top:1px solid var(--line)}
.reference-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:20px}.reference-list{display:flex;flex-direction:column;padding:8px}.reference-list a{padding:11px 12px;border-radius:9px;display:flex;flex-direction:column;gap:2px;color:#4e5b6d}.reference-list a small{color:var(--muted);font-size:10px}.reference-list a.active{background:#eef1ff;color:#445bcc}.reference-row{display:grid;grid-template-columns:70px minmax(200px,1fr) 150px 100px 100px 90px;gap:8px;align-items:center}.reference-row input,.reference-row select{margin:0}.reference-row code{font-size:11px;color:#667085}.reference-row .icon-input{text-align:center;font-size:18px}.reference-delete{margin-top:6px;display:flex;justify-content:flex-end}
.inline-edit{display:grid;grid-template-columns:1.2fr 1fr .8fr 1fr 1.4fr auto;gap:8px;align-items:center}.inline-edit input,.inline-edit select{margin:0}.inline-delete{display:inline-block;margin-top:5px}.port-generator .check{align-self:end;padding-bottom:10px}.port-edit-cell{background:#fbfcfe!important}.port-row{display:grid;grid-template-columns:110px 130px 110px 120px 90px 80px 150px 170px;gap:8px;align-items:end}.port-row label{min-width:0}.port-row input,.port-row select{margin-top:3px;padding:7px 8px;font-size:11px}.port-row small{font-size:9px;color:var(--muted)}.port-row .wide2{grid-column:span 2}.port-check{padding-bottom:8px}.port-actions{align-self:end}.port-delete{margin-top:8px;display:flex;justify-content:flex-end}.port-readonly{display:grid;grid-template-columns:120px 140px 120px 160px 150px 1fr;gap:10px;align-items:center}
.notification-legend{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:12px}.notification-legend span{display:flex;align-items:center;gap:6px}.dot{width:8px;height:8px;border-radius:50%;display:inline-block}.dot.critical{background:#d93f47}.dot.warning{background:#d58a19}.dot.recovery{background:#21906e}.notification-list{display:flex;flex-direction:column}.notification-item{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:14px;padding:17px 20px;border-bottom:1px solid var(--line);align-items:start}.notification-item:last-child{border-bottom:0}.notification-item.read{opacity:.68}.notification-symbol{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-weight:800;background:#eef1f6;color:#68758a}.severity-critical .notification-symbol{background:#fdeeee;color:#c9363e}.severity-warning .notification-symbol{background:#fff5df;color:#a86b0f}.severity-recovery .notification-symbol{background:#e9f8f2;color:#178361}.notification-meta{display:flex;gap:10px;align-items:center;font-size:10px;color:var(--muted)}.notification-meta b{background:#eef1ff;color:#536bd9;border-radius:8px;padding:2px 6px}.notification-item h3{margin:5px 0 4px;font-size:13px}.notification-item p{margin:0;color:#667085;font-size:12px;line-height:1.5}.delivery-status{display:flex;gap:8px;margin-top:8px;font-size:10px}.delivery-status span{padding:3px 6px;border-radius:6px}.delivery-status .ok{background:#e9f8f2;color:#178361}.delivery-status .fail{background:#fdeeee;color:#c9363e}.notification-severity{font-size:10px;font-weight:700;padding:4px 7px;border-radius:8px;white-space:nowrap}.notification-severity.critical{background:#fdeeee;color:#c9363e}.notification-severity.warning{background:#fff5df;color:#a86b0f}.notification-severity.recovery{background:#e9f8f2;color:#178361}
@media(max-width:1250px){.port-row{grid-template-columns:repeat(4,minmax(130px,1fr))}.reference-row{grid-template-columns:60px 1fr 130px 90px 90px}.reference-row button{grid-column:5}.inline-edit{grid-template-columns:repeat(3,1fr)}}
@media(max-width:850px){.reference-layout{grid-template-columns:1fr}.reference-row{grid-template-columns:60px 1fr}.reference-row code,.reference-row input[type=number],.reference-row .check,.reference-row button{grid-column:auto}.port-row{grid-template-columns:repeat(2,minmax(0,1fr))}.port-row .wide2{grid-column:1/-1}.notification-item{grid-template-columns:36px 1fr}.notification-item>form{grid-column:2}.top-actions .top-status{display:none}.inline-edit{grid-template-columns:1fr 1fr}.port-readonly{grid-template-columns:1fr 1fr}}

/* v0.3.0: incidents, attachments, metrics, integrations */
.attachments-panel{grid-column:1/-1}.upload-box{border:1px dashed #cfd7e6;border-radius:14px;background:#fafbfe;overflow:hidden;margin-bottom:18px}.upload-drop{display:grid;grid-template-columns:44px 1fr minmax(220px,.8fr);gap:12px;align-items:center;padding:16px}.upload-symbol{width:40px;height:40px;border-radius:12px;background:#eef1ff;color:#536bd9;display:grid;place-items:center;font-size:22px;font-weight:800}.upload-drop b{font-size:13px}.upload-drop p{margin:3px 0 0;color:var(--muted);font-size:11px}.upload-drop input{margin:0}.upload-meta{padding:0 16px 12px}.upload-foot{border-top:1px solid var(--line);padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}.upload-foot small{color:var(--muted);font-size:10px;line-height:1.5}.attachment-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.attachment-card{border:1px solid var(--line);border-radius:13px;padding:12px;display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:11px;align-items:center;background:#fff}.file-icon{width:46px;height:52px;border-radius:10px;display:grid;place-items:center;position:relative;font-weight:800;font-size:10px;letter-spacing:.2px;background:#eef1f5;color:#68758a}.file-icon:after{content:"";position:absolute;right:0;top:0;border-left:9px solid transparent;border-bottom:9px solid rgba(255,255,255,.75)}.file-pdf{background:#fdecee;color:#c8323b}.file-word{background:#eaf1ff;color:#2f66c5}.file-excel{background:#e9f7ef;color:#238253}.file-powerpoint{background:#fff0e8;color:#c65b2c}.file-image{background:#f2ecff;color:#7452b7}.file-archive{background:#fff4df;color:#a66b13}.file-config{background:#eef1f5;color:#526174}.attachment-info{min-width:0}.attachment-info b{font-size:12px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.attachment-info small{display:block;color:var(--muted);font-size:10px;margin-top:4px}.attachment-info p{margin:5px 0 0;font-size:10px;color:#566277}.attachment-actions{display:flex;gap:5px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.attachment-actions form{margin:0}.preview-modal-card{width:min(1100px,96vw);height:min(820px,92vh);display:flex;flex-direction:column}.preview-body{flex:1;background:#10151f;display:grid;place-items:center;min-height:300px;overflow:auto}.preview-body img{max-width:100%;max-height:76vh;object-fit:contain}.preview-body iframe{width:100%;height:100%;min-height:70vh;border:0;background:#fff}.history-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.history-entry{padding:12px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:36px 1fr;gap:10px}.history-entry:last-child{border-bottom:0}.history-icon{width:32px;height:32px;border-radius:9px;background:#eef1ff;color:#536bd9;display:grid;place-items:center;font-weight:800}.history-entry h3{font-size:12px;margin:0 0 3px}.history-entry p{font-size:10px;color:var(--muted);margin:0}.metric-toolbar{display:flex;gap:8px;flex-wrap:wrap}.metric-chart{position:relative;height:260px;padding:15px}.metric-svg{width:100%;height:220px;overflow:visible}.metric-gridline{stroke:#e8edf5;stroke-width:1}.metric-line{fill:none;stroke:#5269de;stroke-width:2.5;vector-effect:non-scaling-stroke}.metric-area{fill:rgba(82,105,222,.08)}.metric-axis-label{fill:#7a879a;font-size:9px}.integration-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.integration-card{border:1px solid var(--line);border-radius:14px;padding:16px;background:#fff}.integration-card h3{margin:0 0 5px;font-size:14px}.integration-card p{font-size:11px;color:var(--muted);min-height:34px}.integration-status{display:flex;align-items:center;justify-content:space-between;margin-top:12px}.run-log{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;white-space:pre-wrap;max-height:180px;overflow:auto;background:#f7f8fb;border-radius:9px;padding:10px}.incident-summary{display:flex;gap:8px;flex-wrap:wrap}.badge.new{background:#eef1ff;color:#536bd9}.badge.resolved,.badge.closed{background:#e9f8f2;color:#178361}.badge.monitoring{background:#fff5df;color:#a86b0f}
@media(max-width:1050px){.attachment-grid,.history-grid{grid-template-columns:1fr}.integration-cards{grid-template-columns:1fr 1fr}}@media(max-width:700px){.upload-drop{grid-template-columns:44px 1fr}.upload-drop input{grid-column:1/-1}.upload-foot{align-items:flex-start;flex-direction:column}.attachment-card{grid-template-columns:44px 1fr}.attachment-actions{grid-column:2;justify-content:flex-start}.integration-cards{grid-template-columns:1fr}}
.file-policy-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.file-policy{border:1px solid var(--line);border-radius:10px;padding:8px;background:#fafbfe;font-size:11px}.mini-file{display:inline-grid;place-items:center;min-width:34px;height:24px;border-radius:6px;font-size:8px;font-weight:800;background:#eef1f5;color:#68758a}@media(max-width:900px){.file-policy-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:520px){.file-policy-grid{grid-template-columns:1fr}}
.metric-charts-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.metric-chart-card{border:1px solid var(--line);border-radius:13px;padding:12px;min-width:0}.metric-chart-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.metric-chart-head b{font-size:12px}.metric-chart-head small{display:block;font-size:9px;color:var(--muted);margin-top:2px}.metric-chart-head strong{font-size:16px;white-space:nowrap}.metric-point{fill:#5269de}@media(max-width:900px){.metric-charts-grid{grid-template-columns:1fr}}
.grid.cards{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}

/* 0.4.0 — Network / SNMPv3 */
.snmp-box{border:1px solid var(--line);border-radius:14px;padding:14px;background:#fafbfe}.network-summary .stat-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.stat-strip>div{border:1px solid var(--line);border-radius:12px;padding:12px;background:#fff}.stat-strip b{display:block;font-size:14px}.stat-strip small{display:block;color:var(--muted);font-size:9px;margin-top:4px}.channel-create{border-bottom:1px solid var(--line)}.channel-port-picker{margin-top:14px}.channel-port-picker>b{font-size:11px}.channel-port-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;margin-top:8px}.channel-port-grid .check{font-size:10px;padding:7px 8px;border:1px solid var(--line);border-radius:9px;background:#fff}.channel-list{display:grid;gap:10px}.channel-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;border:1px solid var(--line);border-radius:13px;padding:13px}.channel-main h3{margin:0;font-size:13px}.channel-main p{margin:4px 0 8px;color:var(--muted);font-size:10px}.channel-members{display:flex;gap:6px;flex-wrap:wrap}.channel-edit{min-width:120px}.channel-edit[open]{grid-column:1/-1;border-top:1px solid var(--line);padding-top:10px}.channel-edit summary{cursor:pointer;list-style:none}.port-telemetry{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;padding:8px 10px;background:#f5f7fb;border-radius:9px;font-size:9px;color:#667287}.port-telemetry span{border-right:1px solid #dde3ee;padding-right:8px}.port-telemetry span:last-child{border-right:0}.wide-telemetry{flex:1 1 280px}.text-ok{color:#16825f}.text-bad{color:#c33d49}.port-traffic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.port-traffic-card{border:1px solid var(--line);border-radius:13px;padding:12px;background:#fff}.port-traffic-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.port-traffic-head b{font-size:12px}.port-traffic-head small{display:block;color:var(--muted);font-size:9px;margin-top:3px}.traffic-now{font-size:9px;text-align:right}.traffic-now span{display:block;margin-bottom:2px}.port-traffic-svg{width:100%;height:150px;margin-top:7px}.port-traffic-svg line{stroke:#e7ebf2;stroke-width:1}.port-traffic-svg polyline{fill:none;stroke-width:2.2;vector-effect:non-scaling-stroke}.port-traffic-svg .rx-line{stroke:#4567dc}.port-traffic-svg .tx-line{stroke:#23a071}.traffic-legend{display:flex;gap:12px;align-items:center;font-size:9px;color:var(--muted)}.traffic-legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:3px}.rx-dot{background:#4567dc}.tx-dot{background:#23a071}
@media(max-width:1100px){.network-summary .stat-strip{grid-template-columns:repeat(3,1fr)}.channel-port-grid{grid-template-columns:repeat(4,1fr)}.port-traffic-grid{grid-template-columns:1fr}}
@media(max-width:700px){.network-summary .stat-strip{grid-template-columns:1fr 1fr}.channel-port-grid{grid-template-columns:1fr 1fr}.channel-card{grid-template-columns:1fr}.port-telemetry span{border-right:0}.port-traffic-head{flex-direction:column}.traffic-now{text-align:left}}

/* 0.4.1 — live monitoring, port map, compact sidebar */
.live-indicator{display:inline-flex;align-items:center;gap:7px;font-size:10px;color:var(--muted);white-space:nowrap}.live-indicator i{width:8px;height:8px;border-radius:50%;background:#22b784;box-shadow:0 0 0 4px rgba(34,183,132,.1);animation:livepulse 1.8s infinite}@keyframes livepulse{0%,100%{opacity:1}50%{opacity:.35}}.sidebar-collapse-btn{border:1px solid var(--line);background:#fff;width:34px;height:34px;border-radius:9px;cursor:pointer;color:#536176;margin-right:12px}.sidebar-compact .sidebar{width:78px;padding-left:10px;padding-right:10px}.sidebar-compact .main{margin-left:78px;width:calc(100% - 78px)}.sidebar-compact .brand{justify-content:center;padding-left:0;padding-right:0}.sidebar-compact .brand>span:last-child,.sidebar-compact .sidebar-user>div:not(.avatar),.sidebar-compact .nav-group summary b,.sidebar-compact .nav-group summary i{display:none}.sidebar-compact .sidebar-user{justify-content:center}.sidebar-compact .sidebar-user form{display:none}.sidebar-compact .nav a,.sidebar-compact .nav-group summary{font-size:0;justify-content:center;padding-left:8px;padding-right:8px}.sidebar-compact .nav a span,.sidebar-compact .nav-group summary>span{font-size:17px;width:28px}.sidebar-compact .nav-group>div{padding-left:0}.sidebar-compact .nav-group[open]>div{display:block}.sidebar-compact .nav-count{position:absolute;transform:translate(12px,-10px);font-size:8px}.sidebar-compact .nav a{position:relative}.port-map-panel{overflow:visible}.port-map-unit+.port-map-unit{margin-top:18px}.port-map-unit-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-size:11px;color:var(--muted)}.port-map-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:7px}.port-tile{min-height:48px;border:1px solid var(--line);border-radius:9px;padding:7px 5px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:10px;font-weight:700;transition:.15s;background:#f1f3f6;color:#566174;position:relative}.port-tile:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(16,24,40,.12)}.port-tile small{font-size:7px;font-weight:600;opacity:.85;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.port-tile.up{background:#eaf8f1;border-color:#a8dfc6;color:#157d5d}.port-tile.down{background:#f2f4f7;border-color:#dfe4eb;color:#7a8595}.port-tile.critical{background:#fdecee;border-color:#f2aab0;color:#b92f3a}.port-tile.warn{background:#fff4df;border-color:#efd08c;color:#96630f}.port-tile.lag:after{content:'LAG';position:absolute;right:3px;top:3px;font-size:6px;background:#536bd9;color:#fff;border-radius:4px;padding:1px 3px}.port-map-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:9px;color:var(--muted)}.port-map-legend span{display:flex;align-items:center;gap:5px}.port-map-legend i{width:10px;height:10px;border-radius:3px;background:#f2f4f7;border:1px solid #dfe4eb}.port-map-legend i.up{background:#eaf8f1;border-color:#a8dfc6}.port-map-legend i.critical{background:#fdecee;border-color:#f2aab0}.port-map-legend i.warn{background:#fff4df;border-color:#efd08c}.port-map-legend i.lag{background:#536bd9;border-color:#536bd9}.analysis-chip{font-size:9px;padding:5px 7px;border-radius:7px;background:#f5f7fb;margin:2px 0}.analysis-chip.warning{background:#fff4df;color:#8d5a0c}.analysis-chip.critical,.analysis-chip.high{background:#fdecee;color:#ae2f39}.profile-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.profile-card{border:1px solid var(--line);border-radius:13px;padding:13px;display:flex;flex-direction:column;gap:8px;background:#fff}.profile-card h3{margin:0;font-size:13px}.profile-card>small{color:var(--muted)}.profile-card label{font-size:10px}.metric-value-small{font-size:20px}.port-edit-cell:target,.ports-table tr:target td{outline:2px solid rgba(79,109,245,.35);outline-offset:-2px;background:#f8f9ff}
@media(max-width:1050px){.profile-grid{grid-template-columns:1fr 1fr}}@media(max-width:900px){.sidebar-collapse-btn{display:none}.sidebar-compact .sidebar{width:264px}.sidebar-compact .main{margin-left:0;width:100%}.port-map-grid{grid-template-columns:repeat(auto-fill,minmax(58px,1fr))}}@media(max-width:650px){.profile-grid{grid-template-columns:1fr}.port-map-grid{grid-template-columns:repeat(4,1fr)}}
.snapshot-compare{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.snapshot-compare>div{border:1px solid var(--line);border-radius:11px;padding:11px;background:#fafbfe}.snapshot-compare small{display:block;color:var(--muted);font-size:9px}.snapshot-compare b{display:block;font-size:13px;margin-top:4px}.snapshot-compare span{font-size:10px;color:var(--muted)}@media(max-width:800px){.snapshot-compare{grid-template-columns:1fr 1fr}}

/* v0.5.0 — topology / profile */
.sidebar-user-link{min-width:0;display:flex;flex-direction:column;gap:2px;color:inherit;text-decoration:none;overflow:hidden}.sidebar-user-link b,.sidebar-user-link small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sidebar-user-link:hover b{text-decoration:underline}
.password-strength{grid-column:1/-1;border:1px solid var(--line,#d9e0ea);border-radius:12px;padding:12px;background:var(--panel-soft,#f8fafc)}.password-strength>div{height:7px;background:#e5e7eb;border-radius:999px;overflow:hidden;margin-bottom:8px}.password-strength>div i{display:block;height:100%;width:0;background:#94a3b8;transition:.2s}.password-strength.weak>div i{width:30%;background:#dc2626}.password-strength.medium>div i{width:65%;background:#d97706}.password-strength.good>div i{width:100%;background:#16a34a}.password-strength b{display:block}.password-strength small{color:var(--muted,#64748b)}
.topology-wrap{overflow:auto}.topology-canvas{position:relative;min-height:420px;border:1px solid var(--line,#dbe3ec);border-radius:14px;background:linear-gradient(90deg,rgba(148,163,184,.08) 1px,transparent 1px),linear-gradient(rgba(148,163,184,.08) 1px,transparent 1px);background-size:24px 24px;overflow:hidden;padding:28px}.topology-canvas svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}.topology-nodes{position:relative;z-index:2;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:48px 72px;align-items:start}.topology-node{display:flex;flex-direction:column;gap:4px;padding:13px 15px;min-height:80px;background:var(--panel,#fff);border:2px solid #86c6a4;border-radius:12px;box-shadow:0 7px 20px rgba(15,23,42,.08);text-decoration:none;color:inherit}.topology-node.warning{border-color:#e8b04c}.topology-node.down{border-color:#dc6d6d}.topology-node small{color:var(--muted,#64748b)}.topology-node span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}.topology-line{stroke:#718096;stroke-width:3;opacity:.72}.topology-line.fiber{stroke:#7c3aed}.topology-line.copper{stroke:#2563eb}.topology-line.lag{stroke-width:6;stroke-dasharray:10 5}.topology-line.auto{opacity:.58}.topology-line.down{stroke:#dc2626!important;stroke-dasharray:5 5}.topology-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;color:var(--muted,#64748b);font-size:12px}.topology-legend span{display:inline-flex;align-items:center;gap:6px}.topology-legend i{display:inline-block;width:24px;height:3px;background:#718096}.topology-legend i.fiber{background:#7c3aed}.topology-legend i.copper{background:#2563eb}.topology-legend i.lag{height:5px;background:repeating-linear-gradient(90deg,#475569 0 7px,transparent 7px 11px)}.topology-legend i.auto{opacity:.45}
.network-link-mini{display:grid;grid-template-columns:minmax(180px,1fr) auto minmax(180px,1fr);gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line,#e2e8f0)}.network-link-mini:last-child{border-bottom:0}.network-link-mini .arrow{text-align:center;color:var(--muted,#64748b)}
@media(max-width:780px){.topology-nodes{grid-template-columns:1fr;gap:34px}.topology-canvas{min-height:640px}.network-link-mini{grid-template-columns:1fr}.network-link-mini .arrow{text-align:left}}
.monitor-edit{position:relative;display:inline-block}.monitor-edit summary{list-style:none;cursor:pointer}.monitor-edit summary::-webkit-details-marker{display:none}.monitor-edit-pop{position:absolute;right:0;top:36px;z-index:30;width:330px;padding:14px;background:var(--panel,#fff);border:1px solid var(--line,#dbe3ec);border-radius:12px;box-shadow:0 14px 36px rgba(15,23,42,.2);display:grid;gap:9px}.monitor-edit-pop label{display:grid;gap:4px;font-size:12px}.monitor-edit-pop input{width:100%}
/* 0.5.3 — router interface classification */
.interface-hint{margin:0 0 8px;padding:7px 9px;border-left:3px solid #9eb2ef;background:#f7f9ff;color:#5c6880;font-size:9px;border-radius:0 7px 7px 0}.hidden-interface-summary{border-top:1px dashed var(--line);padding-top:10px}.hidden-interface-summary summary{cursor:pointer;color:var(--muted);font-size:10px;font-weight:700}.hidden-interface-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}.hidden-interface-chips a{text-decoration:none}.alert.compact{padding:9px 11px;font-size:10px;margin-bottom:12px}

/* 0.5.4 — hardware profiles / router health */
.router-health-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.router-health-strip>div{border:1px solid var(--line);background:#fafbfe;border-radius:11px;padding:10px 11px;min-width:0}.router-health-strip b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.router-health-strip small{display:block;color:var(--muted);font-size:9px;margin-top:3px}.hardware-profile-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;color:#344054}.hardware-profile-title b{font-size:12px}.hardware-profile-title span{font-size:9px;color:var(--muted)}.g611-port-map{display:grid;grid-template-columns:repeat(11,minmax(76px,1fr));gap:7px;align-items:stretch;overflow-x:auto;padding-bottom:4px}.hardware-port{min-width:76px;min-height:92px;border:1px solid #dfe4eb;background:#f8fafc;border-radius:10px;padding:8px 6px;display:flex;flex-direction:column;gap:3px;align-items:center;text-align:center;position:relative;transition:.15s}.hardware-port:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(16,24,40,.11)}.hardware-port .port-no{width:23px;height:23px;display:grid;place-items:center;border-radius:7px;background:#e9edf4;color:#4c596c;font-weight:800;font-size:10px}.hardware-port b{font-size:9px}.hardware-port small{font-size:8px;color:var(--muted);line-height:1.2}.hardware-port em{font-size:7px;font-style:normal;color:#667085;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis}.hardware-port.up{background:#eaf8f1;border-color:#9edcc0;color:#157d5d}.hardware-port.up .port-no{background:#cceedd;color:#126d52}.hardware-port.down{background:#f2f4f7;border-color:#d9dfe8;color:#798495}.hardware-port.manual-active{background:#eef2ff;border-color:#b8c3f7;color:#4558b8}.hardware-port.manual-active .port-no{background:#dce3ff;color:#4054b3}.hardware-port.manual-state{background:#f8fafc;border-color:#dfe4eb;color:#566174}.port-map-legend i.manual{background:#eef2ff;border-color:#b8c3f7}.technical-interface-block{border-top:1px dashed var(--line);padding-top:10px}.technical-interface-block summary{cursor:pointer;font-size:10px;font-weight:700;color:var(--muted)}
@media(max-width:1150px){.router-health-strip{grid-template-columns:repeat(3,1fr)}.g611-port-map{grid-template-columns:repeat(6,minmax(76px,1fr))}}@media(max-width:700px){.router-health-strip{grid-template-columns:repeat(2,1fr)}.hardware-profile-title{align-items:flex-start;flex-direction:column}.g611-port-map{grid-template-columns:repeat(3,minmax(76px,1fr))}}
.hardware-layout-editor{border-top:1px dashed var(--line);padding-top:10px}.hardware-layout-editor summary{cursor:pointer;font-size:10px;font-weight:800;color:#52617a}.hardware-layout-editor form{margin-top:10px}.hardware-layout-grid{display:grid;gap:7px}.hardware-layout-row{display:grid;grid-template-columns:170px 150px 140px minmax(190px,1fr) minmax(180px,1fr);gap:8px;align-items:end;border:1px solid var(--line);background:#fafbfe;border-radius:10px;padding:8px}.hardware-layout-row label{font-size:9px}.hardware-layout-row input,.hardware-layout-row select{margin-top:3px;padding:7px 8px;font-size:10px}.hardware-layout-port{align-self:center}.hardware-layout-port b{display:block;font-size:11px}.hardware-layout-port small{font-size:8px;color:var(--muted)}
@media(max-width:1100px){.hardware-layout-row{grid-template-columns:130px 1fr 1fr}.hardware-layout-row .layout-connected,.hardware-layout-row .layout-notes{grid-column:auto}}@media(max-width:700px){.hardware-layout-row{grid-template-columns:1fr 1fr}.hardware-layout-port{grid-column:1/-1}.hardware-layout-row .layout-connected,.hardware-layout-row .layout-notes{grid-column:1/-1}}
.hardware-port.critical{background:#fdecee;border-color:#f2aab0;color:#b92f3a}.hardware-port.critical .port-no{background:#f9cfd3;color:#a92a34}

/* 0.5.7 — UX freshness / groups / system health */
.freshness{display:inline-flex;align-items:center;gap:5px;margin-top:3px;font-size:9px;font-weight:700;color:#68758a}.freshness:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}.freshness.fresh{color:#178361}.freshness.stale{color:#a86b0f}.freshness.old{color:#c9363e}.freshness.unknown{color:#7b8798}.status-context-panel{margin-bottom:18px}.status-context-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:start}.status-context-grid>div{border-right:1px solid var(--line);padding-right:12px;min-width:0}.status-context-grid>div:nth-child(4){border-right:0}.status-context-grid small{display:block;color:var(--muted);font-size:9px;margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}.status-why{grid-column:1/-1;border-top:1px dashed var(--line);padding-top:10px}.status-why summary{cursor:pointer;color:#52617a;font-size:10px;font-weight:800;list-style:none}.status-why summary::-webkit-details-marker{display:none}.status-why summary:before{content:"?";display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#eef2ff;color:#536bd9;margin-right:6px}.status-why ul{margin:9px 0 0 24px;padding:0;color:#5b6678;font-size:11px;line-height:1.5}.status-why.compact{grid-column:auto;border:0;padding:5px 0 0}.status-why.compact ul{min-width:260px;max-width:420px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 14px 10px 28px;margin:7px 0 0;box-shadow:none}.health-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.health-item{border:1px solid var(--line);border-left:4px solid #94a3b8;border-radius:11px;padding:10px 12px;background:#fafbfe;min-width:0}.health-item.ok{border-left-color:#22a779}.health-item.warning{border-left-color:#d18b20}.health-item.bad{border-left-color:#e5484d}.health-item.info{border-left-color:#7d8ba1}.health-item b{display:block;font-size:11px}.health-item span{display:block;margin-top:3px;font-size:10px;color:#475569}.health-item small{display:block;margin-top:5px;color:var(--muted);font-size:9px;line-height:1.35}.entity small{display:block}.view-switch{display:flex;gap:4px}.copyable[data-copy]:not([data-copy=""]){cursor:copy}.copyable[data-copy]:not([data-copy=""]):hover{text-decoration:underline;text-decoration-style:dotted}.group-path{color:var(--muted);font-size:10px}.asset-group-card{border:1px solid var(--line);border-radius:12px;padding:12px;background:#fafbfe}
@media(max-width:1100px){.status-context-grid,.health-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.status-context-grid>div{border-right:0}}@media(max-width:650px){.status-context-grid,.health-grid{grid-template-columns:1fr}.view-switch{width:100%}.view-switch .btn{flex:1}}