:root{--bg: #f3f4f6;--bg-elevated: #ffffff;--surface: #ffffff;--surface-soft: #f9fafb;--border-subtle: rgba(148, 163, 184, .4);--border-strong: rgba(148, 163, 184, .8);--primary: #111827;--primary-soft: rgba(17, 24, 39, .05);--primary-strong: #000000;--status-online: #22c55e;--status-offline: #ef4444;--danger: #ef4444;--danger-soft: rgba(239, 68, 68, .08);--warning: #f59e0b;--warning-soft: rgba(245, 158, 11, .1);--info: #2563eb;--info-soft: rgba(37, 99, 235, .12);--text: #111827;--text-muted: #6b7280;--shadow-soft: 0 16px 40px rgba(15, 23, 42, .08);--radius-lg: 16px}.topology-body{padding:6px 6px 8px;overflow:hidden;position:relative}.topology-svg{width:100%;height:auto;display:block}.topology-node-label{opacity:0;transition:opacity .18s ease;-webkit-user-select:none;user-select:none;pointer-events:none;paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}.topology-node:hover .topology-node-label{opacity:.92}.topology-node-label.show{opacity:.9;pointer-events:auto}.topology-group-box rect{filter:drop-shadow(0 10px 22px rgba(15,23,42,.1))}.topology-group-box-title{-webkit-user-select:none;user-select:none;pointer-events:none;paint-order:stroke;stroke:#fffffff2;stroke-width:4px}.topology-zoom-controls{position:absolute;right:10px;top:8px;display:flex;gap:6px;z-index:2}.topology-zoom-controls .btn-ghost{padding:4px 10px;font-weight:600}.topology-fullscreen{position:fixed;top:0;right:0;bottom:0;left:0;background:#fffffffa;z-index:50;display:flex;flex-direction:column;padding:10px 12px 12px}.topology-fullscreen-controls{display:flex;gap:8px;align-items:center;justify-content:flex-end;padding-bottom:8px}.topology-fullscreen .topology-svg{width:100%;height:100%;flex:1 1 auto}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:var(--text);background:radial-gradient(circle at top left,rgba(255,255,255,.16),transparent 55%),radial-gradient(circle at bottom right,rgba(129,140,248,.14),transparent 55%),var(--bg)}.app-shell{min-height:100vh;max-width:100%;margin:0;padding:24px 20px 32px;display:flex;flex-direction:column;gap:20px}.app-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;border-radius:20px;background:linear-gradient(120deg,#ffffffe6,#eff6fff2);border:1px solid rgba(209,213,219,.9);box-shadow:0 20px 45px #0f172a14}.brand{display:flex;align-items:center;gap:12px}.brand-logo-wrap{display:flex;align-items:center;justify-content:center;padding:0;border-radius:0;background:transparent;box-shadow:none}.brand-logo{width:180px;height:auto;display:block}.brand-copy{display:flex;flex-direction:column}.brand-title{margin:0;font-size:1.1rem;letter-spacing:.06em;text-transform:uppercase}.brand-subtitle{margin:0;font-size:.78rem;color:var(--text-muted)}.header-meta{display:flex;align-items:center;gap:10px}.refresh-control{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:999px;border:1px solid rgba(209,213,219,.9);background:#ffffffe6;font-size:.76rem}.refresh-input{width:52px;border:none;text-align:right;font-size:.8rem}.refresh-input:focus{outline:none}.refresh-suffix{font-size:.76rem;color:var(--text-muted)}.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid rgba(209,213,219,.9);background:#ffffffe6;font-size:.76rem}.pill-label{color:var(--text-muted)}.pill-value{font-weight:600;color:var(--primary)}.btn-primary{border-radius:999px;padding:8px 16px;border:none;font-size:.84rem;font-weight:600;cursor:pointer;color:#fff;background:linear-gradient(135deg,var(--text),#000000);border:1px solid var(--border-subtle);box-shadow:0 14px 35px #0000001a;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}.btn-primary:disabled{opacity:.7;cursor:default;box-shadow:none}.btn-primary:not(:disabled):hover{transform:translateY(-1px);filter:brightness(1.05)}.btn-ghost,.btn-outline{border-radius:999px;padding:6px 14px;font-size:.8rem;font-weight:500;cursor:pointer;background:#fff;border:1px solid rgba(209,213,219,.9);color:var(--text);transition:background-color .15s ease,border-color .15s ease,transform .15s ease}.btn-danger{border-radius:999px;padding:6px 14px;font-size:.8rem;font-weight:600;cursor:pointer;background:#fee2e2e6;border:1px solid rgba(239,68,68,.7);color:var(--danger);transition:background-color .15s ease,border-color .15s ease,transform .15s ease}.btn-danger:hover{background:#fecacaf2;transform:translateY(-1px)}.btn-danger:disabled{opacity:.7;cursor:default;transform:none}.btn-icon{width:34px;height:34px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;line-height:1}.btn-ghost:hover,.btn-outline:hover{background:#f9fafbe6;transform:translateY(-1px)}.banner{padding:10px 14px;border-radius:14px;margin:0 0 14px}.kpi-actions{display:flex;flex-direction:column;justify-content:stretch;align-items:stretch;gap:10px}.kpi-actions .btn-primary,.kpi-actions .btn-outline{width:100%;padding:6px 14px;box-shadow:0 8px 18px #0000001a}.kpi-add-host-btn{border-color:var(--border-strong);color:var(--text)}.kpi-add-host-btn:hover{background:var(--bg-elevated)}.banner-error{background:var(--danger-soft);border:1px solid rgba(239,68,68,.7)}.toast-stack{position:fixed;top:16px;right:16px;display:flex;flex-direction:column;gap:10px;z-index:9999;width:min(420px,calc(100vw - 32px))}.toast{position:relative;display:grid;grid-template-columns:1fr auto;gap:12px;padding:12px;border-radius:14px;border:1px solid rgba(226,232,240,.95);background:#ffffffeb;box-shadow:0 16px 32px #0f172a24;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.toast-success{border-color:var(--border-strong)}.toast-danger{border-color:#ef444480}.toast-body{min-width:0}.toast-title{font-weight:700;font-size:.86rem;color:var(--text);margin-bottom:4px}.toast-message{font-size:.78rem;color:var(--text-muted);line-height:1.35;white-space:pre-line;word-break:break-word}.toast-close{width:28px;height:28px;border-radius:10px;border:1px solid rgba(203,213,225,.9);background:#ffffffe6;cursor:pointer;color:var(--text-muted);font-size:18px;line-height:1;display:inline-flex;align-items:center;justify-content:center;transition:background-color .15s ease,border-color .15s ease,color .15s ease}.toast-close:hover{background:#f8fafc;border-color:#94a3b8cc;color:var(--text)}.app-main{display:flex;flex-direction:column;gap:18px}.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.card{border-radius:var(--radius-lg);background:linear-gradient(145deg,#fff,#f9fafb);border:1px solid rgba(209,213,219,.9);box-shadow:var(--shadow-soft)}.kpi-card{padding:14px 16px}.kpi-label{font-size:.78rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em}.kpi-value{margin-top:4px;font-size:1.6rem;font-weight:600}.kpi-extra{margin-top:6px;font-size:.76rem;color:#94a3b8f2}.kpi-success{border-color:var(--border-strong)}.kpi-danger{border-color:#ef4444b3}.kpi-warning{border-color:#f59e0bbf}.layout-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:18px}.layout-column{display:flex;flex-direction:column;gap:14px}.panel{padding:14px 16px 16px}.panel-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.panel-header-meta{display:flex;align-items:center;gap:8px}.panel-tag{padding:4px 10px;border-radius:999px;font-size:.72rem;background:var(--primary-soft);color:var(--primary-strong);border:1px solid var(--border-subtle)}.panel-eyebrow{font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;color:var(--primary)}.panel-title{margin:2px 0 0;font-size:.98rem}.panel-body{margin-top:6px}.empty-text{font-size:.82rem;color:var(--text-muted)}.error-text{color:#fecaca}.device-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.device-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px;border-radius:12px;background:#ffffffe6;border:1px solid rgba(209,213,219,.9)}.device-row-header{background:#f3f4f6f2;border-style:dashed}.device-row-selected{border-color:var(--primary);box-shadow:0 0 0 1px #2ecc71b3}.device-row-left{display:flex;align-items:flex-start;gap:10px;min-width:0}.device-select-checkbox{margin-top:2px;width:16px;height:16px;accent-color:var(--primary)}.device-row-meta{display:flex;align-items:center;gap:8px}.clickable{cursor:pointer}.device-row:hover{border-color:#94a3b8;box-shadow:0 6px 18px #0f172a14}.device-main{min-width:0}.device-name{font-size:.9rem;font-weight:500}.device-id{font-size:.78rem;color:var(--text-muted)}.status-pill{padding:4px 10px;border-radius:999px;font-size:.72rem;font-weight:600}.status-success{background:#22c55e1a;color:var(--status-online)}.status-danger{background:#ef44441a;color:var(--status-offline)}.status-muted{background:#e5e7ebcc;color:var(--text-muted)}.device-actions{display:flex;align-items:center;gap:4px}.devices-pagination{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:12px}.delete-preview-list{margin:0;padding-left:18px;color:var(--text)}.delete-preview-item{font-size:.84rem;line-height:1.25rem}.alert-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.alert-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;border-radius:12px;background:#fffffff5;border:1px solid rgba(209,213,219,.9)}.alert-row-selected{border-color:var(--primary);box-shadow:0 0 0 1px #2ecc71b3}.alert-main{min-width:0}.alert-title{font-size:.9rem;font-weight:500}.alert-meta{margin-top:4px;font-size:.78rem;color:var(--text-muted)}.alert-host-tag{margin-left:8px;padding:2px 8px;border-radius:999px;background:#dbeafee6;color:#1d4ed8;font-size:.72rem}.badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;font-size:.72rem;text-transform:capitalize}.badge-critical{background:var(--danger-soft);color:var(--danger)}.badge-warning{background:var(--warning-soft);color:var(--warning)}.badge-info{background:var(--info-soft);color:var(--info)}.analysis-body{display:flex;flex-direction:column;gap:10px}.analysis-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.analysis-card{padding:10px;border-radius:14px;background:#fffffff5;border:1px solid rgba(209,213,219,.9)}.analysis-grid .analysis-wide{grid-column:1 / -1}.analysis-label{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}.analysis-value{margin-top:6px;font-size:.86rem;white-space:pre-wrap;word-break:break-word}.analysis-value p{margin:6px 0 0}.analysis-value ol{margin:6px 0 0;padding-left:18px;list-style:decimal;list-style-position:outside}.analysis-value ol li{margin:4px 0;line-height:1.35}.analysis-confidence{grid-column:span 2}.confidence-row{display:flex;flex-direction:column;gap:6px}.confidence-value{font-size:1.1rem;font-weight:600;color:var(--primary)}.confidence-bar{position:relative;height:6px;border-radius:999px;background:#e5e7ebe6;overflow:hidden}.confidence-bar-fill{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:linear-gradient(90deg,var(--primary),var(--primary-strong));transition:width .3s ease}.device-detail-header-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.device-detail-name{font-size:1.05rem;font-weight:600}.graph-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:8px}.graph-card.full-span{grid-column:span 2}.graph-card{border-radius:14px;background:#fff;border:1px solid rgba(209,213,219,.9);box-shadow:0 10px 26px #0f172a0a;padding:10px 14px 14px}.graph-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:8px}.graph-legend{display:inline-flex;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:wrap;font-size:.72rem;color:var(--text-muted);-webkit-user-select:none;user-select:none}.graph-legend .legend-item{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:999px;border:1px solid rgba(226,232,240,.9);background:#f8fafce6}.graph-legend .legend-swatch{width:10px;height:10px;border-radius:3px;display:inline-block}.graph-title{font-size:.88rem;font-weight:600}.graph-subtitle{margin-top:2px;font-size:.75rem;color:var(--text-muted)}.graph-current{font-size:.9rem;font-weight:600;color:var(--primary-strong)}.graph-card-body{margin-top:6px}.metrics-chart{width:100%;height:auto;display:block}.axis text{font-size:.65rem;fill:#6b7280}.axis path,.axis line{stroke:#d1d5db}.grid line{stroke:#e5e7eb}.grid path{display:none}.graph-stats{display:flex;gap:12px;margin-top:6px;padding-top:6px;border-top:1px solid rgba(229,231,235,.9)}.graph-stats .stat{display:inline-flex;align-items:center;gap:6px;font-size:.7rem}.graph-stats .stat-label{color:var(--text-muted)}.graph-stats .stat-value{font-weight:600}.time-range-bar{margin:12px 0 14px;padding:14px;border-radius:14px;background:#ffffffd1;border:1px solid rgba(226,232,240,.95);box-shadow:0 12px 24px #0f172a0f;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:flex;flex-direction:column;gap:10px}.time-range-inputs{display:grid;grid-template-columns:minmax(200px,1fr) minmax(200px,1fr) auto;gap:10px;align-items:end}.time-label{display:flex;flex-direction:column;gap:6px;font-size:.72rem;color:var(--text-muted);letter-spacing:.02em}.time-label>span{font-weight:600;text-transform:uppercase;font-size:.68rem}.time-input{height:38px;border-radius:12px;border:1px solid rgba(209,213,219,.9);padding:8px 12px;font-size:.84rem;background:#fff;color:var(--text)}.time-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px #3b82f626}.time-range-inputs .btn-outline{height:38px;border-radius:12px;padding:0 14px;font-weight:600}.time-range-quick{display:flex;flex-wrap:wrap;gap:6px}@media (max-width: 720px){.time-range-inputs{grid-template-columns:1fr;align-items:stretch}.time-range-inputs .btn-outline{width:100%}}.time-chip{padding:4px 10px;border-radius:999px;border:1px solid rgba(209,213,219,.9);font-size:.74rem;cursor:pointer;background:#fff;color:var(--text-muted);transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .15s ease}.time-chip:hover{transform:translateY(-1px);background:#f9fafbe6}.time-chip-active{border-color:var(--primary);background:var(--primary-soft);color:var(--primary-strong)}.devices-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap}.filter-chips{display:flex;gap:6px;flex-wrap:wrap}.chip{border-radius:999px;border:1px solid rgba(209,213,219,.9);background:#fff;padding:4px 10px;font-size:.78rem;cursor:pointer;color:var(--text-muted);transition:background-color .15s ease,border-color .15s ease,color .15s ease}.chip:hover{background:#f3f4ff}.chip-active{border-color:var(--primary);background:var(--primary-soft);color:var(--primary-strong)}.search-input{min-width:200px;max-width:260px;padding:6px 10px;border-radius:999px;border:1px solid rgba(209,213,219,.9);font-size:.8rem}.search-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 1px var(--primary-soft)}.devices-toolbar-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.sort-label{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;color:var(--text-muted)}.sort-select{border-radius:999px;border:1px solid rgba(209,213,219,.9);padding:6px 10px;font-size:.8rem;background:#fff;color:var(--text)}.sort-select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 1px var(--primary-soft)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a4d;display:flex;align-items:center;justify-content:center;z-index:40}.modal-panel{width:100%;max-width:520px;background:#fff;border-radius:18px;border:1px solid rgba(209,213,219,.9);box-shadow:0 24px 55px #0f172a33;padding:16px 18px 18px}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.modal-title{margin:0;font-size:1rem}.modal-body{display:flex;flex-direction:column;gap:10px}.field-row{display:flex;flex-direction:column;gap:4px}.field-label{font-size:.8rem;color:var(--text-muted)}.field-input,.field-select{border-radius:999px;border:1px solid rgba(209,213,219,.9);padding:6px 12px;font-size:.8rem}.field-input:focus,.field-select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 1px var(--primary-soft)}.modal-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}.app-footer{margin-top:auto;font-size:.78rem;color:var(--text-muted);text-align:center}@media (max-width: 960px){.app-header{flex-direction:column;align-items:flex-start;border-radius:20px}.header-meta{align-self:stretch;justify-content:space-between;flex-wrap:wrap}.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.layout-grid,.graph-grid,.analysis-grid{grid-template-columns:minmax(0,1fr)}}@media (max-width: 640px){.app-shell{padding-inline:14px}.kpi-grid{grid-template-columns:minmax(0,1fr)}}