:root {
  --bg: #07101c;
  --panel: #0b1726;
  --panel-2: #0e1c2d;
  --panel-3: #132337;
  --line: #1a3048;
  --line-soft: rgba(119, 158, 194, .14);
  --text: #e9f2fb;
  --muted: #8298ad;
  --muted-2: #5f768e;
  --cyan: #20c5e8;
  --cyan-2: #0a91bc;
  --green: #34d399;
  --orange: #f59e0b;
  --red: #fb5b68;
  --purple: #a78bfa;
  --shadow: 0 18px 60px rgba(0, 0, 0, .32);
  --radius: 12px;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.danger-text { color: var(--red); }
.success-text { color: var(--green); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.nowrap { white-space: nowrap; }

.login-view { min-height: 100vh; display: grid; grid-template-columns: minmax(440px, 580px) 1fr; overflow: hidden; background: radial-gradient(circle at 75% 45%, #0a2d43 0, #081625 30%, #060d17 70%); position: relative; }
.login-panel { min-height: 100vh; padding: 48px clamp(42px, 6vw, 92px); display: flex; flex-direction: column; justify-content: center; background: rgba(6, 15, 27, .9); border-right: 1px solid rgba(67, 139, 177, .16); z-index: 2; }
.brand { height: 48px; display: flex; align-items: center; gap: 12px; letter-spacing: 1.6px; font-size: 20px; font-weight: 300; }
.brand strong { color: var(--cyan); font-weight: 800; }
.brand small { display: block; font-size: 7px; color: #607a91; letter-spacing: 2px; margin-top: -2px; }
.brand-mark { width: 31px; height: 31px; display: inline-flex; align-items: flex-end; justify-content: center; gap: 3px; padding: 6px; border: 1px solid #167797; transform: rotate(45deg); border-radius: 6px; box-shadow: 0 0 22px rgba(32,197,232,.14); }
.brand-mark i { display: block; width: 3px; background: var(--cyan); border-radius: 2px; transform: rotate(-45deg); }
.brand-mark i:nth-child(1) { height: 8px; }.brand-mark i:nth-child(2) { height: 17px; }.brand-mark i:nth-child(3) { height: 12px; }
.brand-login { position: absolute; top: 46px; left: clamp(42px, 6vw, 92px); }
.login-copy { margin: 40px 0 34px; }
.eyebrow { display: block; color: var(--cyan); font-size: 10px; font-weight: 800; letter-spacing: 2.3px; margin-bottom: 10px; }
.login-copy h1 { font-size: clamp(34px, 4vw, 50px); line-height: 1.08; letter-spacing: -2px; margin: 0 0 20px; font-weight: 760; }
.login-copy h1 em { color: var(--cyan); font-style: normal; }
.login-copy p { max-width: 420px; color: var(--muted); font-size: 15px; }
.login-form { display: grid; gap: 18px; max-width: 390px; }
.login-form label, .form-grid label { display: grid; gap: 7px; color: #9cb0c2; font-size: 11px; font-weight: 700; letter-spacing: .45px; }
input, select, textarea { width: 100%; border: 1px solid var(--line); color: var(--text); background: #081523; border-radius: 8px; outline: none; padding: 11px 12px; transition: border-color .18s, box-shadow .18s; }
textarea { min-height: 88px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--cyan-2); box-shadow: 0 0 0 3px rgba(32,197,232,.1); }
input::placeholder, textarea::placeholder { color: #536a80; }
input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--cyan); box-shadow: none; }
.login-form input { height: 46px; background: #0a1726; }
.form-error { color: var(--red); min-height: 20px; margin: -6px 0 0; }
.login-panel > footer { position: absolute; bottom: 34px; color: #425a70; font-size: 10px; letter-spacing: 1.1px; }
.login-visual { position: relative; display: grid; place-items: center; }
.radar { width: min(44vw, 540px); aspect-ratio: 1; border: 1px solid rgba(32,197,232,.2); border-radius: 50%; position: relative; background: repeating-radial-gradient(circle, transparent 0 16%, rgba(32,197,232,.07) 16.3% 16.7%, transparent 17% 32%); box-shadow: 0 0 120px rgba(19,129,162,.11), inset 0 0 70px rgba(5,17,28,.8); }
.radar::before, .radar::after { content: ""; position: absolute; background: rgba(32,197,232,.13); }
.radar::before { width: 100%; height: 1px; top: 50%; }.radar::after { height: 100%; width: 1px; left: 50%; }
.radar > i { position: absolute; inset: 50% 0 0 50%; transform-origin: left top; border-top: 1px solid var(--cyan); background: linear-gradient(25deg, rgba(32,197,232,.16), transparent 48%); animation: sweep 8s linear infinite; }
.radar span { position: absolute; width: 7px; height: 7px; background: var(--cyan); border-radius: 50%; box-shadow: 0 0 16px var(--cyan); }
.radar span:nth-child(1){left:28%;top:34%}.radar span:nth-child(2){left:67%;top:56%}.radar span:nth-child(3){left:46%;top:74%}
@keyframes sweep { to { transform: rotate(360deg); } }
.visual-stat { position: absolute; min-width: 154px; padding: 15px 18px; background: rgba(9,25,40,.88); border: 1px solid rgba(32,197,232,.18); border-radius: 9px; box-shadow: var(--shadow); backdrop-filter: blur(12px); }
.visual-stat b { display: block; font-size: 24px; color: var(--cyan); }.visual-stat small { color: #6d8ba4; font-size: 8px; letter-spacing: 1.3px; }
.stat-a { left: 12%; top: 28%; }.stat-b { right: 10%; bottom: 27%; }
.visual-node { position: absolute; width: 12px; height: 12px; border: 2px solid var(--cyan); border-radius: 50%; box-shadow: 0 0 22px var(--cyan); }.node-a{left:21%;bottom:21%}.node-b{right:20%;top:22%}.node-c{right:27%;top:56%}

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 232px 1fr; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 232px; display: flex; flex-direction: column; background: #071321; border-right: 1px solid var(--line-soft); z-index: 30; }
.sidebar .brand { padding: 22px 24px 16px; height: 76px; }
.main-nav { padding: 12px; overflow-y: auto; flex: 1; }
.nav-label { display: block; color: #435a70; font-size: 8px; letter-spacing: 1.6px; font-weight: 800; padding: 17px 12px 7px; }
.main-nav a { height: 39px; display: flex; align-items: center; gap: 11px; padding: 0 12px; margin: 2px 0; border-radius: 7px; color: #8096aa; font-size: 12px; font-weight: 600; position: relative; transition: all .16s; }
.main-nav a svg { width: 17px; height: 17px; stroke-width: 1.8; }
.main-nav a:hover { color: #c8d7e4; background: rgba(32,197,232,.045); }
.main-nav a.active { color: #dffaff; background: linear-gradient(90deg, rgba(24,174,210,.17), rgba(24,174,210,.04)); }
.main-nav a.active::before { content:""; position: absolute; left: -12px; width: 3px; height: 24px; background: var(--cyan); border-radius: 0 4px 4px 0; box-shadow: 0 0 12px var(--cyan); }
.nav-badge { margin-left: auto; color: #6ce6fa; background: rgba(32,197,232,.12); border: 1px solid rgba(32,197,232,.2); border-radius: 10px; padding: 1px 6px; font-size: 9px; }.nav-badge.danger { color:#ff8590;background:rgba(251,91,104,.12);border-color:rgba(251,91,104,.22)}
.sidebar-foot { height: 64px; display:flex; align-items:center; gap:10px; padding:0 20px; border-top:1px solid var(--line-soft); color:#8fa4b7; }
.sidebar-foot span:nth-child(2){display:grid}.sidebar-foot b{font-size:10px}.sidebar-foot small{font-size:9px;color:#536c82}.health-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}
.workspace { grid-column: 2; min-width: 0; }
.topbar { height: 76px; position: sticky; top: 0; z-index: 20; display: flex; align-items: center; padding: 0 28px; background: rgba(7,16,28,.9); border-bottom: 1px solid var(--line-soft); backdrop-filter: blur(14px); }
.page-heading { min-width: 0; }.page-heading span { color: #536e84; font-size: 8px; letter-spacing: 1.5px; font-weight:800 }.page-heading h1 { margin: 2px 0 0; font-size: 19px; letter-spacing: -.3px; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 9px; }.last-refresh{font-size:9px;color:#4e687e;margin-right:6px}
.icon-button { width: 36px; height: 36px; border: 1px solid var(--line); background: #0b1929; border-radius: 8px; display: inline-grid; place-items: center; cursor: pointer; transition: .16s; }
.icon-button:hover { border-color: #28516e; color: var(--cyan); }.icon-button svg{width:16px;height:16px}
.user-menu-wrap { position: relative; }.user-button { display:flex;align-items:center;gap:9px;border:0;background:transparent;padding:4px 6px;cursor:pointer;text-align:left }.user-button>span:first-child{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;background:linear-gradient(135deg,#0c789c,#21c7e7);font-weight:800;color:white}.user-button>span:nth-child(2){display:grid;min-width:100px}.user-button b{font-size:11px}.user-button small{color:#5f7890;font-size:9px;text-transform:uppercase}.user-button i{color:#546d82;font-style:normal}
.user-menu { position:absolute;right:0;top:48px;width:180px;padding:7px;background:#0c1a2a;border:1px solid var(--line);border-radius:9px;box-shadow:var(--shadow) }.user-menu button{width:100%;height:36px;border:0;background:transparent;color:#9db0c1;text-align:left;border-radius:6px;display:flex;align-items:center;gap:9px;cursor:pointer}.user-menu button:hover{background:#11243a;color:white}.user-menu svg{width:15px}
.content { padding: 26px 28px 60px; max-width: 1900px; margin: auto; }
.page-loader { min-height: 420px; display:grid;place-items:center;align-content:center;gap:14px;color:#61788c }.page-loader i{width:28px;height:28px;border:2px solid #17334a;border-top-color:var(--cyan);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}

.page-tools { min-height: 40px; display:flex; align-items:center; gap:9px; margin-bottom:18px; flex-wrap:wrap }.page-tools .spacer{flex:1}.search-box{position:relative;min-width:240px}.search-box input{padding-left:36px;height:38px}.search-box svg{position:absolute;left:12px;top:11px;width:16px;color:#587087}.filter-select{width:auto;min-width:145px;height:38px;padding:8px 30px 8px 11px}
.button { min-height: 38px; padding: 0 15px; border: 1px solid var(--line); background:#102137; color:#c4d4e2; border-radius:8px; display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:11px;cursor:pointer;transition:.16s;white-space:nowrap }.button svg{width:15px;height:15px}.button:hover{border-color:#315a75;background:#142940;color:white}.button.primary{border-color:#17a6c9;background:linear-gradient(135deg,#0aa2c8,#16bddc);color:#03131b;box-shadow:0 8px 22px rgba(18,174,211,.16)}.button.primary:hover{filter:brightness(1.08)}.button.danger{color:#ff8490;border-color:rgba(251,91,104,.35);background:rgba(251,91,104,.08)}.button.ghost{background:transparent}.button.wide{width:100%;height:45px}.button:disabled{opacity:.45;cursor:not-allowed}.button.small{min-height:30px;padding:0 10px;font-size:10px}.button b{font-size:18px;line-height:1}
.segmented{display:flex;background:#081522;border:1px solid var(--line);padding:3px;border-radius:8px}.segmented button{border:0;background:transparent;color:#617c92;height:29px;padding:0 11px;border-radius:5px;font-size:10px;cursor:pointer}.segmented button.active{color:#daf9ff;background:#12334a}

.stats-grid { display:grid; grid-template-columns:repeat(4,minmax(150px,1fr)); gap:13px; margin-bottom:18px; }.stat-card { min-height:116px;padding:17px 18px;background:linear-gradient(145deg,#0d1b2c,#0a1726);border:1px solid var(--line-soft);border-radius:var(--radius);position:relative;overflow:hidden}.stat-card::after{content:"";position:absolute;right:-24px;bottom:-30px;width:90px;height:90px;border-radius:50%;background:var(--accent, var(--cyan));opacity:.045}.stat-card header{display:flex;align-items:center;gap:8px;color:#7d93a7;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px}.stat-card header svg{width:15px;color:var(--accent,var(--cyan))}.stat-card strong{font-size:31px;line-height:1.25;display:block;margin-top:12px;letter-spacing:-1px}.stat-card footer{color:#597187;font-size:9px}.stat-card.cyan{--accent:var(--cyan)}.stat-card.green{--accent:var(--green)}.stat-card.orange{--accent:var(--orange)}.stat-card.red{--accent:var(--red)}
.dashboard-grid { display:grid;grid-template-columns:1.55fr 1fr;gap:14px }.dashboard-grid .full{grid-column:1/-1}.dashboard-grid.configurable{align-items:start}.dashboard-widget{min-height:calc(150px + (var(--widget-height,1) - 1)*70px)}.dashboard-summary{min-width:0}.single-value,.gauge-value{min-height:130px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;text-align:center}.single-value strong,.gauge-value strong{font-size:42px;line-height:1;color:#eefaff}.single-value span,.gauge-value span{font-size:15px;color:#85a3b8}.single-value small,.gauge-value small{flex-basis:100%;color:#6f879a}.gauge-value.ok strong{color:var(--green)}.gauge-value.warning strong{color:var(--orange)}.gauge-value.critical strong{color:var(--red)}.panel { background:#0b1828;border:1px solid var(--line-soft);border-radius:var(--radius);min-width:0;overflow:hidden }.panel>header{min-height:52px;padding:0 17px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;gap:10px}.panel>header h2{font-size:12px;margin:0}.panel>header small{color:#587187}.panel>header .spacer{flex:1}.panel-body{padding:17px}.panel.no-pad .panel-body{padding:0}
.status-bars{display:grid;gap:13px}.status-bar{display:grid;grid-template-columns:75px 1fr 36px;align-items:center;gap:10px;font-size:10px;color:#8ba0b3}.bar-track{height:6px;background:#13263a;border-radius:5px;overflow:hidden}.bar-track i{display:block;height:100%;background:var(--bar);border-radius:5px;box-shadow:0 0 9px color-mix(in srgb,var(--bar) 50%,transparent)}
.ring-wrap{display:flex;align-items:center;justify-content:center;gap:26px;min-height:175px}.ring{--value:75;--ring:var(--green);width:124px;height:124px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--ring) calc(var(--value)*1%),#14283c 0);position:relative}.ring::before{content:"";position:absolute;inset:9px;border-radius:50%;background:#0b1828}.ring span{position:relative;text-align:center}.ring b{display:block;font-size:24px}.ring small{font-size:8px;color:#61788d;letter-spacing:1px}.legend{display:grid;gap:9px}.legend span{display:flex;align-items:center;gap:8px;color:#8097aa;font-size:10px}.legend i{width:7px;height:7px;border-radius:50%;background:var(--dot)}
.sparkline{height:180px;width:100%;display:block}.sparkline .grid{stroke:#173048;stroke-width:1}.sparkline .line{fill:none;stroke:var(--cyan);stroke-width:2}.sparkline .area{fill:url(#area-gradient)}.sparkline .dot{fill:var(--cyan)}

.data-table-wrap { overflow:auto }.data-table{width:100%;border-collapse:collapse;white-space:nowrap}.data-table th{text-align:left;color:#536c83;font-size:8px;letter-spacing:1px;text-transform:uppercase;padding:12px 14px;border-bottom:1px solid var(--line-soft);font-weight:800}.data-table td{padding:12px 14px;border-bottom:1px solid rgba(82,112,139,.1);color:#a7bacb;font-size:11px;vertical-align:middle}.data-table tbody tr{transition:.14s}.data-table tbody tr:hover{background:rgba(32,197,232,.025)}.data-table tr:last-child td{border-bottom:0}.data-table .name-cell{display:flex;align-items:center;gap:10px;color:#d7e5f1}.device-icon{width:31px;height:31px;display:grid;place-items:center;border:1px solid #1b3a51;background:#0d2133;border-radius:7px;color:#5e93b2}.device-icon svg{width:16px}.row-actions{display:flex;gap:5px;justify-content:flex-end}.row-actions button,.row-actions a{width:28px;height:28px;border:1px solid transparent;background:transparent;border-radius:6px;display:grid;place-items:center;color:#637c91;cursor:pointer}.row-actions button:hover,.row-actions a:hover{background:#13263a;color:#cde8f5;border-color:#1d3850}.row-actions svg{width:14px}
.badge { display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:10px;font-size:8px;text-transform:uppercase;letter-spacing:.5px;font-weight:800;background:rgba(107,130,149,.1);color:#8298aa;border:1px solid rgba(107,130,149,.16) }.badge::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}.badge.ok,.badge.online,.badge.completed,.badge.closed{color:var(--green);background:rgba(52,211,153,.08);border-color:rgba(52,211,153,.16)}.badge.warning,.badge.running,.badge.acknowledged{color:var(--orange);background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.16)}.badge.critical,.badge.failed,.badge.open{color:var(--red);background:rgba(251,91,104,.08);border-color:rgba(251,91,104,.16)}.badge.unknown,.badge.pending{color:#8094a7}.badge.disabled{color:#607386}.severity-line{width:3px;height:26px;border-radius:2px;background:var(--red)}
.value-main{font-size:13px;color:#dceaf4}.value-unit{font-size:9px;color:#637a8e;margin-left:3px}
.progress{width:100%;height:5px;background:#14283c;border-radius:4px;overflow:hidden}.progress i{height:100%;display:block;background:var(--green)}
.empty-state{min-height:280px;display:grid;place-items:center;align-content:center;text-align:center;padding:30px;color:#5b7388}.empty-state>span svg,.empty-state>svg{width:38px;height:38px;opacity:.55}.empty-state h3{color:#91a5b6;margin:14px 0 4px;font-size:14px}.empty-state p{margin:0;font-size:11px}

.detail-hero{display:flex;align-items:center;gap:15px;padding:18px;background:linear-gradient(110deg,#0c1d2e,#0a1726);border:1px solid var(--line-soft);border-radius:var(--radius);margin-bottom:14px}.detail-hero .device-icon{width:48px;height:48px}.detail-hero .device-icon svg{width:24px}.detail-hero h2{margin:0 0 3px;font-size:18px}.detail-hero p{margin:0;color:#698197;font-size:11px}.detail-hero .hero-actions{margin-left:auto;display:flex;gap:7px}.detail-meta{display:flex;gap:24px;margin-top:10px;flex-wrap:wrap}.detail-meta span{display:grid;color:#546e84;font-size:8px;text-transform:uppercase;letter-spacing:.7px}.detail-meta b{color:#a9bdcd;font-size:10px;margin-top:3px;text-transform:none;letter-spacing:0}.tabs{display:flex;gap:3px;border-bottom:1px solid var(--line-soft);margin-bottom:14px}.tabs button{height:39px;padding:0 14px;border:0;background:transparent;color:#657f94;font-size:10px;font-weight:700;cursor:pointer;border-bottom:2px solid transparent}.tabs button.active{color:var(--cyan);border-bottom-color:var(--cyan)}
.chart-tooltip{position:fixed;pointer-events:none;background:#07131f;border:1px solid #23435a;border-radius:6px;padding:7px 9px;font-size:9px;box-shadow:var(--shadow);z-index:100}

.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}.item-card{padding:16px;background:#0b1929;border:1px solid var(--line-soft);border-radius:10px;position:relative}.item-card:hover{border-color:#22445e}.item-card header{display:flex;gap:10px;align-items:flex-start}.item-card h3{margin:0;font-size:12px}.item-card p{color:#61798f;font-size:10px;margin:5px 0 14px;min-height:29px}.item-card footer{display:flex;align-items:center;gap:6px;color:#536b80;font-size:9px}.item-card footer .spacer{flex:1}.item-card .card-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:8px;background:rgba(32,197,232,.08);color:var(--cyan)}.item-card .card-icon svg{width:18px}.item-card .row-actions{position:absolute;right:8px;top:8px}
.imported-asset{display:block;max-width:100%;max-height:100%;object-fit:contain}.device-icon .imported-asset,.card-icon .imported-asset{width:100%;height:100%;padding:3px}.card-icon .imported-asset{padding:2px}
.widget-imported-icon{width:38px;height:38px;display:grid;place-items:center;margin-bottom:5px}.widget-imported-icon .imported-asset{width:100%;height:100%;object-fit:contain}.widget-imported-icon svg{width:24px}
.tag{display:inline-flex;padding:3px 7px;border-radius:5px;background:#11263a;color:#7290a7;font-size:8px;border:1px solid #18364d}

.form-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px }.form-grid .full{grid-column:1/-1}.form-grid .third{grid-column:span 1}.form-section{grid-column:1/-1;border-top:1px solid var(--line-soft);padding-top:15px;margin-top:5px}.form-section h3{margin:0 0 3px;font-size:11px}.form-section p{margin:0;color:#5d758b;font-size:9px}.check-label{display:flex!important;grid-column:auto!important;align-items:center;gap:8px!important;align-self:end;min-height:41px;color:#9db0c1!important}.inline-fields{display:flex;gap:8px;align-items:end}.help-text{font-size:9px;color:#597188;margin-top:5px}.code-output{background:#050c14;border:1px solid #162b3d;border-radius:8px;padding:13px;color:#9fc5d8;font:10px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;max-height:350px;overflow:auto;white-space:pre-wrap}.key-display{padding:13px;background:#06111d;border:1px dashed #2181a1;border-radius:8px;color:#80e8f8;word-break:break-all;font:11px ui-monospace,SFMono-Regular,Menlo,monospace}.warning-box{padding:11px 13px;border:1px solid rgba(245,158,11,.25);background:rgba(245,158,11,.06);border-radius:7px;color:#d5ad63;font-size:10px}.danger-box{padding:11px 13px;border:1px solid rgba(251,91,104,.25);background:rgba(251,91,104,.06);border-radius:7px;color:#e78991;font-size:10px}

.modal { position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px }.modal-backdrop{position:absolute;inset:0;border:0;background:rgba(2,8,14,.78);backdrop-filter:blur(5px)}.modal-card{position:relative;width:min(720px,100%);max-height:calc(100vh - 48px);display:flex;flex-direction:column;background:#0b1828;border:1px solid #1d3a52;border-radius:13px;box-shadow:0 28px 100px rgba(0,0,0,.55)}.modal-card.wide{width:min(980px,100%)}.modal-card>header{min-height:67px;display:flex;align-items:center;padding:0 20px;border-bottom:1px solid var(--line-soft)}.modal-card>header h2{margin:0;font-size:16px}.modal-card>header .icon-button{margin-left:auto}.modal-card>header .eyebrow{margin:0 0 2px}.modal-body{padding:20px;overflow-y:auto}.modal-footer{min-height:62px;padding:12px 20px;display:flex;align-items:center;justify-content:flex-end;gap:8px;border-top:1px solid var(--line-soft)}
.toast-stack{position:fixed;right:20px;bottom:20px;z-index:200;display:grid;gap:8px}.toast{width:min(360px,calc(100vw - 40px));padding:12px 14px;background:#102238;border:1px solid #24445d;border-radius:9px;box-shadow:var(--shadow);display:flex;align-items:flex-start;gap:10px;animation:toast-in .2s ease-out}.toast i{width:8px;height:8px;border-radius:50%;background:var(--cyan);margin-top:5px}.toast.error i{background:var(--red)}.toast.success i{background:var(--green)}.toast span{font-size:11px;color:#b6c7d5}.toast b{display:block;color:white;font-size:11px;margin-bottom:2px}@keyframes toast-in{from{transform:translateY(10px);opacity:0}}

.map-stage{position:relative;min-height:540px;background-color:#07131f;background-image:linear-gradient(rgba(41,94,125,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(41,94,125,.11) 1px,transparent 1px);background-size:30px 30px;overflow:auto}.map-stage svg.links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.map-node{position:absolute;width:130px;min-height:64px;transform:translate(-50%,-50%);background:#0e2234;border:1px solid #24506b;border-radius:9px;display:grid;place-items:center;align-content:center;cursor:move;box-shadow:0 9px 25px rgba(0,0,0,.26)}.map-node.status-critical{border-color:var(--red);box-shadow:0 0 20px rgba(251,91,104,.12)}.map-node.status-ok{border-color:rgba(52,211,153,.45)}.map-node b{font-size:10px}.map-node small{font-size:8px;color:#638098}.map-node .node-status{position:absolute;right:6px;top:6px;width:6px;height:6px;border-radius:50%;background:#6a8195}.map-node.status-ok .node-status{background:var(--green)}.map-node.status-critical .node-status{background:var(--red)}
.report-bars{display:grid;gap:10px}.report-row{display:grid;grid-template-columns:minmax(140px,240px) 1fr 68px;gap:12px;align-items:center}.report-row b{font-size:10px}.report-row>span{text-align:right;font-size:10px;color:#91a7b8}
.split-layout{display:grid;grid-template-columns:260px 1fr;gap:14px}.side-list{padding:7px}.side-list button{width:100%;border:0;background:transparent;color:#758ea3;padding:11px;border-radius:7px;text-align:left;cursor:pointer;font-size:10px}.side-list button.active,.side-list button:hover{background:#11253a;color:#d4e7f3}.settings-pane{min-height:440px}
.mobile-only{display:none}

@media(max-width:1100px){.stats-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr}.dashboard-grid .full{grid-column:auto}.login-view{grid-template-columns:minmax(400px,520px) 1fr}.visual-stat{display:none}}
@media(max-width:780px){.app-shell{display:block}.sidebar{transform:translateX(-100%);transition:.2s}.sidebar.open{transform:none;box-shadow:20px 0 60px rgba(0,0,0,.5)}.workspace{margin:0}.topbar{padding:0 14px}.content{padding:18px 14px 50px}.mobile-only{display:inline-grid}.last-refresh,.user-button>span:nth-child(2),.user-button>i{display:none}.user-button>span:first-child{width:36px}.login-view{display:block}.login-panel{padding:38px 28px}.login-visual{display:none}.brand-login{left:28px}.login-copy h1{font-size:36px}.stats-grid{grid-template-columns:1fr 1fr}.page-tools .search-box{width:100%;order:5}.dashboard-grid{display:block}.dashboard-grid>.panel{margin-bottom:12px}.form-grid{grid-template-columns:1fr}.form-grid .full,.form-section{grid-column:auto}.detail-hero{align-items:flex-start;flex-wrap:wrap}.detail-hero .hero-actions{width:100%;margin-left:0}.split-layout{grid-template-columns:1fr}.side-list{display:flex;overflow:auto}.side-list button{white-space:nowrap;width:auto}.report-row{grid-template-columns:110px 1fr 55px}}
@media(max-width:480px){.stats-grid{grid-template-columns:1fr}.page-heading span{display:none}.top-actions{gap:3px}.modal{padding:10px}.modal-card{max-height:calc(100vh - 20px)}.row-actions button{width:32px;height:32px}.login-panel>footer{position:static;margin-top:50px}.brand-login{top:28px}.login-copy{margin-top:72px}}

/* Tema operacional claro — FSNET Monitoramento */
:root {
  --bg: #f3f5f7;
  --panel: #ffffff;
  --panel-2: #f7f9fa;
  --panel-3: #eef2f4;
  --line: #d8e0e6;
  --line-soft: rgba(51, 70, 86, .12);
  --text: #263446;
  --muted: #7a8998;
  --muted-2: #9aa6b2;
  --cyan: #0b846f;
  --cyan-2: #08725f;
  --green: #08a973;
  --orange: #f59e0b;
  --red: #f04452;
  --purple: #7567d9;
  --shadow: 0 12px 32px rgba(42, 57, 68, .12);
  --radius: 10px;
}

body { background: var(--bg); color: var(--text); }
.brand { color: #334155; font-size: 17px; letter-spacing: -.15px; font-weight: 400; white-space: nowrap; }
.brand strong { color: #162033; font-weight: 850; }
.brand small { color: #8b98a5; letter-spacing: 1.6px; }
.brand-mark { border-color: var(--cyan); background: var(--cyan); box-shadow: 0 7px 18px rgba(11,132,111,.18); }
.brand-mark i { background: white; }
.eyebrow { color: var(--cyan); }

input, select, textarea { background: #fff; color: var(--text); border-color: var(--line); }
input:focus, select:focus, textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(11,132,111,.11); }
input::placeholder, textarea::placeholder { color: #a2adb8; }
input[type="checkbox"] { accent-color: var(--cyan); }
.login-form label, .form-grid label { color: #5e6d7c; }

.login-view { background: radial-gradient(circle at 75% 45%, #d9eee9 0, #edf4f2 35%, #f7f9fa 72%); }
.login-panel { background: rgba(255,255,255,.94); border-right-color: #dce7e4; }
.login-form input { background: #fff; }
.login-copy h1 { color: #223043; }
.login-copy h1 em { color: var(--cyan); }
.login-copy p { color: #728091; }
.login-panel > footer { color: #9aa6b2; }
.radar { border-color: rgba(11,132,111,.2); background: repeating-radial-gradient(circle, transparent 0 16%, rgba(11,132,111,.08) 16.3% 16.7%, transparent 17% 32%); box-shadow: 0 0 100px rgba(11,132,111,.08), inset 0 0 70px rgba(255,255,255,.65); }
.radar::before, .radar::after { background: rgba(11,132,111,.16); }
.radar > i { border-top-color: var(--cyan); background: linear-gradient(25deg, rgba(11,132,111,.16), transparent 48%); }
.visual-stat { background: rgba(255,255,255,.92); border-color: rgba(11,132,111,.2); }
.visual-stat small { color: #82918f; }

.app-shell { display: block; min-height: 100vh; }
.sidebar { position: sticky; inset: auto; top: 0; width: 100%; height: 70px; flex-direction: row; align-items: stretch; background: #fff; border: 0; border-bottom: 1px solid #e1e6ea; box-shadow: 0 2px 10px rgba(31,45,55,.04); z-index: 40; }
.sidebar .brand { height: 70px; padding: 0 28px; flex: 0 0 auto; border-right: 1px solid #edf0f2; }
.main-nav { display: flex; align-items: stretch; gap: 2px; min-width: 0; padding: 0 12px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; flex: 1; }
.nav-label { display: none; }
.main-nav a { height: 70px; flex: 0 0 auto; margin: 0; padding: 0 12px; border-radius: 0; color: #697789; font-size: 11px; font-weight: 700; }
.main-nav a svg { width: 17px; color: #647486; }
.main-nav a:hover { color: var(--cyan); background: #f7faf9; }
.main-nav a.active { color: #243244; background: transparent; }
.main-nav a.active svg { color: var(--cyan); }
.main-nav a.active::before { left: 10px; right: 10px; bottom: 0; top: auto; width: auto; height: 3px; border-radius: 3px 3px 0 0; background: var(--cyan); box-shadow: none; }
.nav-badge { color: var(--cyan); background: #e8f6f2; border-color: #ccebe3; }
.nav-badge.danger { color: var(--red); background: #fff0f1; border-color: #ffd6da; }
.sidebar .header-actions { flex:0 0 auto; min-height:70px; margin-left:0; padding:0 18px 0 12px; border-left:1px solid #edf0f2; background:#fff; }
.sidebar .header-actions .icon-button { width:34px; height:34px; }
.sidebar .header-actions .user-menu { top:54px; }
.sidebar-foot { display: none; }
.workspace { min-width: 0; }
.topbar { height: 58px; top: 70px; padding: 0 28px; background: rgba(255,255,255,.96); border-bottom: 1px solid #e1e6ea; backdrop-filter: blur(14px); }
.page-heading span { color: #9aa5b1; }
.page-heading h1 { color: #263446; font-size: 17px; }
.last-refresh { color: #909ca8; }
.icon-button { background: #fff; border-color: var(--line); color: #607080; }
.icon-button:hover { border-color: #9ccdc2; color: var(--cyan); background: #f3faf8; }
.user-button { color: #334155; }
.user-button>span:first-child { background: linear-gradient(135deg,#08725f,#0ea889); }
.user-button small, .user-button i { color: #8794a1; }
.user-menu { background: #fff; border-color: var(--line); }
.user-menu button { color: #526273; }
.user-menu button:hover { background: #f0f7f5; color: var(--cyan); }
.content { max-width: 2048px; padding: 20px 24px 48px; }
.page-loader { color: #7e8d9c; }
.page-loader i { border-color: #dbe4e8; border-top-color: var(--cyan); }

.page-tools { margin-bottom: 14px; }
.search-box input { background: #fff; }
.search-box svg { color: #8d9aa7; }
.filter-select { background-color: #fff; }
.button { background: #fff; color: #4f6071; border-color: var(--line); box-shadow: 0 1px 2px rgba(25,38,48,.03); }
.button:hover { color: #233244; background: #f8fafb; border-color: #b8c4cd; }
.button.primary { border-color: #0a936f; background: linear-gradient(135deg,#0e9f72,#07845f); color: #fff; box-shadow: 0 7px 17px rgba(8,132,95,.2); }
.button.danger { color: var(--red); border-color: #f7c8cd; background: #fff6f7; }
.button.ghost { background: transparent; }
.segmented { background: #fff; border-color: var(--line); }
.segmented button { color: #647386; }
.segmented button.active { color: #fff; background: #26364a; }

.panel { background: #fff; border-color: #e0e6ea; box-shadow: 0 2px 8px rgba(29,44,54,.035); }
.panel>header { border-bottom-color: #e8ecef; }
.panel>header h2 { color: #344255; }
.panel>header small { color: #8995a1; }
.stat-card { background: #fff; border-color: #e0e6ea; box-shadow: 0 3px 12px rgba(30,45,55,.045); }
.stat-card header { color: #758392; }
.stat-card strong { color: #253346; }
.stat-card footer { color: #8b97a3; }
.single-value strong, .gauge-value strong { color: #263446; }
.single-value span, .gauge-value span { color: #6e7e8f; }
.single-value small, .gauge-value small { color: #8b97a4; }
.ring { background: conic-gradient(var(--ring) calc(var(--value)*1%),#e7ecef 0); }
.ring::before { background: #fff; }
.ring small, .legend span { color: #7f8d9a; }
.bar-track, .progress { background: #e7ecef; }
.sparkline .grid { stroke: #e4e9ec; }

.data-table th { color: #82909e; background: #fafbfc; border-bottom-color: #e4e9ec; }
.data-table td { color: #536273; border-bottom-color: #edf0f2; }
.data-table tbody tr:hover { background: #f7faf9; }
.data-table .name-cell { color: #263446; }
.device-icon { border-color: #dbe7e4; background: #edf7f4; color: var(--cyan); }
.row-actions button, .row-actions a { color: #778695; }
.row-actions button:hover, .row-actions a:hover { background: #edf7f4; color: var(--cyan); border-color: #cce8e1; }
.value-main { color: #2c3b4d; }
.value-unit { color: #8996a3; }
.badge { background: #f3f5f7; border-color: #e1e6ea; color: #778492; }
.badge.ok,.badge.online,.badge.completed,.badge.closed { background: #eaf9f3; border-color: #c8eddd; }
.badge.warning,.badge.alert,.badge.running,.badge.acknowledged { color: #d98606; background: #fff7e8; border-color: #fce2b4; }
.badge.critical,.badge.offline,.badge.failed,.badge.open { background: #fff0f1; border-color: #ffd4d8; }
.badge.maintenance { color: #66788d; background: #eef2f6; border-color: #d9e1e8; }
.badge.disabled { color: #8b96a1; background: #f2f4f5; }
.empty-state { color: #9aa6b2; }
.empty-state h3 { color: #48576a; }
.empty-state p { color: #8c99a5; }
.detail-hero { background: linear-gradient(110deg,#fff,#f4f8f7); border-color: #dfe6e9; }
.detail-hero h2 { color: #273547; }
.detail-hero p { color: #7b8998; }
.detail-meta span { color: #8995a2; }
.detail-meta b { color: #4c5b6c; }
.tabs button { color: #7c8996; }
.tabs button.active { color: var(--cyan); }
.chart-tooltip { background: #263446; border-color: #3e4f61; color: #fff; }

.item-card { background: #fff; border-color: #e0e6ea; }
.item-card:hover { border-color: #a9d3ca; box-shadow: 0 8px 22px rgba(35,58,54,.07); }
.item-card h3 { color: #2b394b; }
.item-card p, .item-card footer { color: #7c8a98; }
.item-card .card-icon { background: #e9f6f2; color: var(--cyan); }
.tag { background: #f0f4f5; color: #657587; border-color: #dde4e8; }
.form-section { border-top-color: #e7ebee; }
.form-section h3 { color: #344255; }
.form-section p, .help-text { color: #84919e; }
.check-label { color: #586878!important; }
.code-output { background: #f5f7f8; border-color: #dce3e7; color: #40566a; }
.key-display { background: #f0faf7; border-color: #73bbaa; color: #08725f; }
.warning-box { background: #fff9ec; color: #9b6a12; }
.danger-box { background: #fff3f4; color: #b33a45; }
.modal-backdrop { background: rgba(31,42,50,.48); }
.modal-card { background: #fff; border-color: #dce3e7; box-shadow: 0 24px 80px rgba(34,48,58,.28); }
.modal-card>header, .modal-footer { border-color: #e5e9ec; }
.modal-card>header h2 { color: #263446; }
.toast { background: #fff; border-color: #d9e1e6; }
.toast span { color: #566677; }
.toast b { color: #263446; }
.map-stage { background-color: #f8fafb; background-image: linear-gradient(rgba(55,88,100,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(55,88,100,.09) 1px,transparent 1px); }
.map-node { background: #fff; border-color: #9bc9be; box-shadow: 0 7px 20px rgba(33,51,61,.12); }
.map-node b { color: #344255; }
.map-node small { color: #84919e; }
.side-list button { color: #6f7f8f; }
.side-list button.active,.side-list button:hover { background: #eaf5f2; color: var(--cyan); }

.dashboard-commandbar { display: flex; align-items: center; gap: 28px; padding: 20px 22px; margin-bottom: 14px; background: linear-gradient(105deg,#fff 30%,#f0f8f6); border: 1px solid #dfe7e6; border-radius: 11px; }
.dashboard-commandbar h2 { margin: 0; color: #253346; font-size: 22px; }
.dashboard-commandbar p { margin: 4px 0 0; color: #7d8995; font-size: 11px; }
.dashboard-commandbar .eyebrow { margin: 0 0 4px; }
.dashboard-counters { margin-left: auto; }
.dashboard-tools { padding: 0 3px; }

.device-commandbar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 12px 14px; margin: -20px -24px 0; background: #fff; border-bottom: 1px solid #dfe5e9; box-shadow: 0 3px 10px rgba(36,49,58,.035); }
.view-switch { display: flex; gap: 6px; }
.view-switch button { width: 39px; height: 39px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: #758493; cursor: pointer; }
.view-switch button svg { width: 17px; }
.view-switch button.active { color: #fff; background: #2468e8; border-color: #2468e8; box-shadow: 0 5px 14px rgba(36,104,232,.18); }
.device-filter-pills { min-height: 39px; }
.device-filter-pills button { height: 31px; font-size: 10px; }
.device-search { flex: 1 1 260px; min-width: 220px; }
.device-search input { height: 39px; }
.ops-counters { display: flex; align-items: center; gap: 13px; margin-left: auto; }
.ops-counters>span,.ops-counters>a { display: inline-flex; align-items: center; gap: 7px; color: #536273; font-size: 10px; white-space: nowrap; }
.ops-counters i { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: #fff; font-style: normal; }
.ops-counters i svg { width: 16px; height: 16px; }
.ops-counters b { color: #263446; font-size: 12px; }
.ops-counters .online i { background: var(--green); }
.ops-counters .alert i { background: var(--orange); }
.ops-counters .offline i { background: var(--red); }
.ops-counters .maintenance i { background: #65788e; }
.ops-counters .events i { background: #725fc8; }
.inventory-heading { display: flex; align-items: center; justify-content: space-between; min-height: 50px; margin: 0 -24px; padding: 0 28px; border-bottom: 1px solid #dce3e7; color: #3f4d60; text-transform: uppercase; letter-spacing: 1.5px; font-size: 9px; font-weight: 800; }
.inventory-heading span { color: #8b97a3; text-transform: none; letter-spacing: 0; font-weight: 500; }
.inventory-heading i { font-style: normal; }
.inventory-surface { min-height: 440px; margin: 0 -24px; padding: 28px 24px; background: #f2f4f6; border-bottom: 1px solid #dce3e7; }
.inventory-surface>#device-table { min-height: 380px; }
.inventory-surface .data-table-wrap { background: #fff; border: 1px solid #dfe5e9; border-radius: 10px; }
.inventory-empty { min-height: 370px; border: 1px dashed #cdd6dc; border-radius: 12px; background: #fff; }
.inventory-empty .button { margin-top: 26px; }
.inventory-footer { display: flex; align-items: center; justify-content: space-between; min-height: 48px; margin: 0 -24px -48px; padding: 0 24px; color: #8794a1; font-size: 9px; }
.inventory-footer b { color: #4a596b; }
.device-card-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(310px,1fr)); gap: 14px; }
.device-card { background: #fff; border: 1px solid #dfe5e9; border-top: 3px solid #b8c3ca; border-radius: 10px; box-shadow: 0 3px 12px rgba(35,48,57,.045); overflow: hidden; transition: transform .16s,box-shadow .16s,border-color .16s; }
.device-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(35,48,57,.09); }
.device-card.state-online { border-top-color: var(--green); }
.device-card.state-alert { border-top-color: var(--orange); }
.device-card.state-offline { border-top-color: var(--red); }
.device-card.state-maintenance { border-top-color: #65788e; }
.device-card.state-disabled { border-top-color: #a8b2ba; }
.device-card>header { min-height: 68px; padding: 13px 14px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #edf0f2; }
.device-card-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.device-card-title>span:last-child { display: grid; min-width: 0; }
.device-card-title b { color: #29374a; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.device-card-title small { color: #7e8b98; font-size: 9px; }
.device-card-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 20px; padding: 15px; }
.device-card-metrics span { display: grid; color: #8a96a2; font-size: 8px; text-transform: uppercase; letter-spacing: .7px; }
.device-card-metrics b { margin-top: 3px; color: #4c5b6c; font-size: 10px; text-transform: none; letter-spacing: 0; }
.device-card-foot { min-height: 48px; padding: 8px 11px 8px 15px; display: flex; align-items: center; gap: 12px; background: #fafbfc; border-top: 1px solid #edf0f2; color: #84919e; font-size: 8px; }
.device-card-foot .row-actions { margin-left: auto; }

.snmp-test-panel { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 5px 16px; padding: 14px 15px; margin-top: 5px; border: 1px solid #cce5df; border-radius: 9px; background: #f2faf8; }
.snmp-test-panel>div:first-child { display: grid; }
.snmp-test-panel>div:first-child b { color: #2d4c45; font-size: 11px; }
.snmp-test-panel>div:first-child span { color: #728b85; font-size: 9px; }
.snmp-test-button { grid-column: 2; grid-row: 1; }
.snmp-test-result { grid-column: 1/-1; display: grid; gap: 5px; margin-top: 8px; padding: 12px; border-radius: 8px; background: #fff; border: 1px solid #dce5e2; color: #536770; }
.snmp-test-result b { display: flex; align-items: center; gap: 7px; font-size: 11px; }
.snmp-test-result b svg { width: 16px; }
.snmp-test-result span { font: 9px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; overflow-wrap: anywhere; }
.snmp-test-result small { color: #7f8e98; font-size: 8px; }
.snmp-test-result.testing { color: #617384; }
.snmp-test-result.success { color: #08795a; border-color: #bfe6d7; background: #f5fcf9; }
.snmp-test-result.error { color: #b3323e; border-color: #f2c5ca; background: #fff7f8; }

.template-monitor-picker { padding: 0; border: 1px solid #d7e2e0; border-radius: 10px; background: #f8fbfa; overflow: hidden; }
.template-monitor-picker.loading { min-height: 95px; display: grid; place-items: center; }
.template-monitor-picker.error { padding: 12px; }
.template-native-result { margin: 10px 13px; }
.template-picker-head { display: flex; align-items: center; gap: 16px; padding: 12px 14px; border-bottom: 1px solid #dde7e4; background: #eef7f4; }
.template-picker-head>span { display: grid; }
.template-picker-head b { color: #2d4b45; font-size: 10px; }
.template-picker-head small { color: #738a85; font-size: 8px; }
.template-picker-head>div { display: flex; gap: 6px; margin-left: auto; }
.template-monitor-list { max-height: 330px; overflow: auto; }
.template-monitor-row { display: grid!important; grid-template-columns: auto minmax(0,1fr) auto!important; align-items: center!important; gap: 11px!important; min-height: 58px!important; padding: 9px 13px; border-bottom: 1px solid #e8eeec; color: #52636a!important; cursor: pointer; }
.template-monitor-row:last-child { border-bottom: 0; }
.template-monitor-row:hover { background: #f0f8f5; }
.template-monitor-row>span { display: grid; min-width: 0; }
.template-monitor-copy { display: flex!important; align-items: center; gap: 10px; }
.template-monitor-copy>span { display: grid; min-width: 0; }
.template-monitor-icon { width: 32px; height: 32px; flex: 0 0 32px; object-fit: contain; }
.template-monitor-row b { color: #34474c; font-size: 10px; }
.template-monitor-row small { margin-top: 3px; color: #7c8e92; font-size: 8px; line-height: 1.45; }
.template-monitor-row.unsupported { cursor: not-allowed; background: #f6f6f6; opacity: .76; }
.import-status { display: inline-flex; align-items: center; justify-content: center; min-height: 20px; padding: 2px 7px; border: 1px solid #cce6dd; border-radius: 999px; color: #16815f; background: #ebf8f3; font-size: 7px; font-style: normal; font-weight: 800; white-space: nowrap; text-transform: uppercase; letter-spacing: .35px; }
.import-status.adapted { color: #a56807; border-color: #f0d59d; background: #fff7e7; }
.import-status.unsupported { color: #aa3e48; border-color: #efc6ca; background: #fff1f2; }

@media(max-width:1450px){
  .sidebar .brand{padding:0 18px}.main-nav a{padding:0 9px;font-size:10px}.main-nav a svg{width:15px}.header-actions .last-refresh{display:none}.ops-counters{width:100%;justify-content:flex-end}.device-search{flex-grow:1}.dashboard-commandbar{align-items:flex-start;flex-direction:column}.dashboard-counters{margin-left:0}
}

@media(max-width:1120px){.sidebar .header-actions{padding:0 10px}.header-actions .user-button>span:nth-child(2),.header-actions .user-button>i{display:none}}

@media(max-width:900px){
  .sidebar{position:fixed;inset:0 auto 0 0;width:286px;height:100vh;display:flex;flex-direction:column;align-items:stretch;transform:translateX(-100%);transition:.2s;box-shadow:none;border-right:1px solid #dce3e7}.sidebar.open{transform:none;box-shadow:20px 0 60px rgba(35,47,55,.2)}.sidebar .brand{height:70px;padding:0 22px;border-bottom:1px solid #e8ecef}.main-nav{display:block;padding:10px;overflow-y:auto}.nav-label{display:block;color:#9aa6b2}.main-nav a{height:42px;padding:0 12px;border-radius:7px}.main-nav a.active{background:#eaf6f3;color:var(--cyan)}.main-nav a.active::before{left:0;right:auto;top:9px;bottom:9px;width:3px;height:auto;border-radius:0 3px 3px 0}.sidebar .header-actions{min-height:58px;padding:8px 12px;border-left:0;border-top:1px solid #e8ecef}.header-actions .user-button>span:nth-child(2){display:grid}.header-actions .user-button>i{display:inline}.sidebar .header-actions .user-menu{top:auto;right:8px;bottom:52px}.sidebar-foot{display:flex;margin-top:0}.topbar{top:0;height:60px}.mobile-only{display:inline-grid}.content{padding:16px 14px 42px}.device-commandbar{margin:-16px -14px 0;padding:11px}.device-filter-pills{order:5;width:100%;overflow-x:auto}.device-search{order:6;width:100%;flex-basis:100%}.ops-counters{order:7;justify-content:flex-start;overflow-x:auto;padding-bottom:3px}.inventory-heading{margin:0 -14px;padding:0 16px}.inventory-heading span{display:none}.inventory-surface{margin:0 -14px;padding:16px 14px}.inventory-footer{margin:0 -14px -42px;padding:0 14px}.device-card-grid{grid-template-columns:1fr}.dashboard-commandbar{padding:16px}.dashboard-counters{width:100%;overflow-x:auto}.snmp-test-panel{grid-template-columns:1fr}.snmp-test-button{grid-column:1;grid-row:auto;justify-self:start}.template-picker-head{align-items:flex-start;flex-direction:column}.template-picker-head>div{margin-left:0}.template-monitor-row{grid-template-columns:auto minmax(0,1fr)!important}.template-monitor-row .import-status{grid-column:2;justify-self:start}
}

/* Bandeja global inferior, conforme o fluxo operacional do inventário. */
#device-table>.device-quick-drawer{
  position:fixed;left:0;right:0;bottom:0;z-index:38;width:100vw;max-width:none;
  margin:0;border-width:2px 0 0;border-color:#44a36c;border-radius:0;
  box-shadow:0 -16px 46px rgba(18,27,25,.28);animation:drawer-rise .22s ease-out;
}
@keyframes drawer-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
body:has(#device-table>.device-quick-drawer) #content{padding-bottom:340px}
@media(max-width:900px){
  #device-table>.device-quick-drawer{left:0;right:0;width:100vw;max-height:65vh;margin:0;border-width:2px 0 0;border-radius:0;overflow:auto}
  body:has(#device-table>.device-quick-drawer) #content{padding-bottom:min(65vh,430px)}
}

@media(max-width:540px){
  .stats-grid{grid-template-columns:1fr}.ops-counters i{width:30px;height:30px}.ops-counters>span,.ops-counters>a{font-size:9px}.device-filter-pills button{padding:0 9px}.device-card-metrics{grid-template-columns:1fr 1fr}.device-card-foot{align-items:flex-start;flex-wrap:wrap}.device-card-foot .row-actions{width:100%;justify-content:flex-end}.dashboard-commandbar h2{font-size:19px}.modal-card{max-height:calc(100vh - 20px)}
}

/* Componentes operacionais da versão 0.4 */
.release-card { display:flex; align-items:center; gap:14px; margin:-2px 0 14px; padding:12px 15px; border:1px solid #cce5dd; border-radius:10px; background:linear-gradient(105deg,#effaf6,#fff); box-shadow:0 3px 10px rgba(29,74,62,.04); }
.release-card>div { min-width:0; flex:1; }
.release-card b { display:block; color:#29433d; font-size:11px; }
.release-card p { margin:3px 0 0; color:#71857f; font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.release-version { padding:5px 8px; border-radius:999px; color:#08795a; background:#dff5ec; font-size:8px; font-weight:850; letter-spacing:.5px; white-space:nowrap; }
.changelog-list { display:grid; gap:12px; }
.changelog-release { padding:16px 18px; border:1px solid #e0e6e9; border-radius:9px; background:#fafbfc; }
.changelog-release>header { display:flex; align-items:center; gap:9px; color:#83909c; font-size:8px; }
.changelog-release>header em { margin-left:auto; padding:3px 7px; border-radius:999px; color:#08795a; background:#e1f6ee; font-size:7px; font-style:normal; font-weight:800; text-transform:uppercase; }
.changelog-release h3 { margin:11px 0 7px; color:#304052; font-size:12px; }
.changelog-release ul { display:grid; gap:5px; margin:0; padding-left:18px; color:#657483; font-size:9px; line-height:1.45; }

.template-monitor-row { grid-template-columns:auto minmax(0,1fr) minmax(170px,260px) auto!important; }
.template-instance-select { width:100%; min-width:0; height:34px; padding:6px 30px 6px 9px; background:#fff; color:#425466; font-size:9px; }
.template-instance-select:disabled { color:#9ba7b0; background:#f1f3f4; }

.device-card-title,.device-card-metrics,.device-table-expand,.monitor-name-button { appearance:none; border:0; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; }
[data-device-open-surface] { cursor:pointer; }
.device-card-title { padding:0; flex:1; }
.device-card-metrics { width:100%; }
.device-card-metrics:hover { background:#f7fbfa; }
.device-table-expand { padding:0; }
.monitor-name-button { padding:0; }
.monitor-name-button:hover b { color:var(--cyan); }
.device-card.expanded { border-color:#60ad99; box-shadow:0 0 0 2px rgba(11,132,111,.09),0 12px 28px rgba(32,56,49,.12); transform:none; }

.device-card-grid>.device-quick-drawer { grid-column:1/-1; }
.device-quick-drawer { min-width:0; overflow:hidden; border:1px solid #121a1d; border-radius:5px; background:#222628; color:#e7ecea; box-shadow:0 18px 45px rgba(24,34,34,.22); animation:drawer-open .2s ease-out; }
@keyframes drawer-open { from{opacity:0;transform:translateY(-8px)} }
.device-quick-drawer.loading { min-height:220px; }
.device-quick-drawer.loading .page-loader { min-height:220px; color:#8a9995; }
.device-quick-drawer>header { min-height:58px; display:flex; align-items:center; gap:18px; padding:8px 14px; border-bottom:1px solid #3b4241; background:#1a1e1f; }
.drawer-device-identity { min-width:245px; display:flex; align-items:center; gap:10px; }
.drawer-device-identity .device-icon { width:41px; height:41px; border-color:#3d6659; background:#f5faf8; }
.drawer-device-identity>span:last-child { display:grid; min-width:0; }
.drawer-device-identity b { color:#fff; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.drawer-device-identity small { color:#9eaaa7; font-size:8px; }
.drawer-device-identity em { margin-top:3px; font-style:normal; }
.device-quick-drawer .badge { height:18px; padding:0 6px; border-color:#4d5754; background:#303635; }
.drawer-status-counts { display:flex; gap:8px; margin-left:auto; }
.drawer-status-counts span { min-width:68px; display:grid; place-items:center; padding:5px 9px; border:1px solid #414948; border-radius:20px; color:#aeb8b5; font-size:7px; text-transform:uppercase; }
.drawer-status-counts b { color:#fff; font-size:13px; line-height:1; }
.drawer-status-counts .ok { border-color:#337858; }.drawer-status-counts .ok b{color:#55d697}
.drawer-status-counts .warning { border-color:#8a631f; }.drawer-status-counts .warning b{color:#ffb43b}
.drawer-status-counts .critical { border-color:#8c383e; }.drawer-status-counts .critical b{color:#ff6570}
.drawer-device-actions { display:flex; gap:4px; }
.drawer-action { width:32px; height:32px; display:grid; place-items:center; border:1px solid #414a48; border-radius:6px; background:#2a302f; color:#b8c2bf; cursor:pointer; }
.drawer-action:hover { color:#fff; border-color:#5c6a66; background:#353d3b; }.drawer-action svg{width:14px}
.drawer-device-actions .device-http-action{width:32px;height:32px;display:grid;place-items:center;border:1px solid #414a48;border-radius:6px;background:#2a302f;color:#b8c2bf}.drawer-device-actions .device-http-action:hover{color:#fff;border-color:#5c6a66;background:#353d3b}.drawer-device-actions .device-http-action svg{width:14px}
.device-drawer-body { display:grid; grid-template-columns:225px minmax(0,1fr); min-height:195px; }
.device-drawer-body>aside { padding:15px 16px; border-right:1px solid #414746; background:#202425; }
.device-drawer-body>aside label,.device-drawer-body>aside>span { display:block; margin-bottom:7px; color:#ccd4d1; font-size:9px; font-weight:700; }
.drawer-monitor-search { position:relative; margin-top:6px; }.drawer-monitor-search svg{position:absolute;left:9px;top:9px;width:14px;color:#879590}.drawer-monitor-search input{height:34px;padding:6px 28px 6px 30px;border-color:#4b5553;background:#2b3030;color:#fff;font-size:9px}
.drawer-state-filters { display:flex; gap:6px; margin:8px 0 14px; }
.drawer-state-filters button { width:34px; height:31px; display:grid; place-items:center; border:1px solid #46504e; border-radius:16px; background:#2d3332; color:#a6b0ad; font-size:8px; cursor:pointer; }.drawer-state-filters button:first-child{width:auto;padding:0 10px}.drawer-state-filters button.active{border-color:#34b886;color:#79e7bd;background:#263d35}.drawer-state-filters svg{width:13px}
.drawer-uptime-summary { display:grid; gap:3px; padding:10px; border:1px solid #3d4644; border-radius:7px; background:#282d2d; }.drawer-uptime-summary span{color:#899893;font-size:7px;text-transform:uppercase;letter-spacing:.6px}.drawer-uptime-summary b{font-size:10px;color:#e9efed}.drawer-uptime-summary small{color:#8e9a97;font-size:8px;line-height:1.4;overflow-wrap:anywhere}
.device-drawer-body>main { display:grid; grid-template-columns:repeat(auto-fill,minmax(116px,1fr)); align-content:start; gap:9px; padding:15px; overflow:auto; }
.device-summary-tile,.device-monitor-tile,.device-monitor-add { min-height:78px; min-width:0; display:grid; place-items:center; align-content:center; gap:4px; padding:8px; border:1px solid #4a5351; border-radius:6px; background:#333938; color:#ecf2ef; text-align:center; }
.device-summary-tile>span,.device-monitor-icon { width:28px;height:28px;display:grid;place-items:center;color:#90ded0}.device-summary-tile svg,.device-monitor-icon svg{width:23px}.device-monitor-icon .imported-asset{width:28px;height:28px;object-fit:contain}
.device-summary-tile b,.device-monitor-tile b { font-size:9px; line-height:1.15; }.device-summary-tile small,.device-monitor-tile small{display:block;color:#b1bcb8;font-size:7px;line-height:1.25}.device-monitor-tile em{display:block;max-width:100%;margin-top:3px;color:#ffb1b7;font-size:7px;font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.device-monitor-tile { position:relative; appearance:none; cursor:pointer; }.device-monitor-tile:hover{border-color:#7d8d88;background:#3c4542;transform:translateY(-1px)}.device-monitor-tile .badge{position:absolute;right:5px;top:5px;width:9px;height:9px;padding:0;border:0;font-size:0}.device-monitor-tile .badge::before{width:7px;height:7px}
.device-monitor-tile.state-ok{border-color:#40855f;background:#2e573f}.device-monitor-tile.state-warning{border-color:#9d7123;background:#554423}.device-monitor-tile.state-critical{border-color:#a9444c;background:#5c3034}.device-monitor-tile.state-unknown{border-color:#5b6461}
.device-monitor-add { border-style:dashed; color:#9ba7a3; cursor:pointer; }.device-monitor-add:hover{color:#fff;border-color:#73817d}.device-monitor-add svg{width:22px}.device-monitor-add span{font-size:8px}.drawer-no-monitors{grid-column:1/-1;color:#8a9692;font-size:9px}

.modal-card.wide { width:min(1180px,calc(100vw - 32px)); }
.monitor-editor-form { min-height:600px; display:grid; grid-template-columns:175px minmax(0,1fr); margin:-20px; }
.monitor-editor-tabs { display:flex; flex-direction:column; padding:16px 0; border-right:1px solid #e1e6e9; background:#f7f9fa; }
.monitor-editor-tabs button { min-height:47px; padding:0 18px; border:0; border-left:3px solid transparent; background:transparent; color:#697886; font-size:10px; font-weight:700; text-align:left; cursor:pointer; }
.monitor-editor-tabs button:hover { color:#315146; background:#f0f6f4; }
.monitor-editor-tabs button.active { color:var(--cyan); border-left-color:#378bef; background:#edf7f4; }
.monitor-editor-panels { min-width:0; max-height:calc(100vh - 190px); overflow:auto; background:#fff; }
.monitor-editor-panel { display:none; padding:24px; }.monitor-editor-panel.active{display:block}
.monitor-identity { display:grid; grid-template-columns:74px minmax(170px,.8fr) minmax(240px,1.4fr) 110px; gap:14px; align-items:end; padding:12px; border:1px solid #e2e7ea; border-radius:9px; background:#fafbfc; }
.monitor-color-preview { width:64px;height:64px;display:grid;place-items:center;border-radius:8px;background:var(--metric-color);color:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08) }.monitor-color-preview svg{width:26px}.monitor-color-preview .imported-asset{max-width:48px;max-height:48px}
.monitor-settings-stack { display:grid; gap:12px; }
.switch-row { min-height:64px; display:flex; align-items:center; gap:16px; padding:13px 15px; border:1px solid #e0e6e9; border-radius:8px; background:#fafbfc; }.switch-row>span{display:grid;flex:1}.switch-row b{font-size:11px}.switch-row small{margin-top:3px;color:#85929e;font-size:9px}.switch-row input{width:19px;height:19px}
.monitor-channel-list { display:grid; gap:8px; }.monitor-channel-list>label{display:flex;align-items:center;gap:10px;padding:11px;border:1px solid #e2e7ea;border-radius:7px}.monitor-channel-list>label>span{display:grid;grid-template-columns:24px 1fr;align-items:center}.monitor-channel-list svg{grid-row:1/3;width:17px;color:var(--cyan)}.monitor-channel-list b{font-size:10px}.monitor-channel-list small{font-size:8px;color:#8795a0}
.monitor-sound-grid { display:grid; gap:12px; margin-bottom:15px; }.monitor-sound-grid>label{max-width:700px}.monitor-sound-grid .inline-fields select{flex:1}
.uptime-monitor-options { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:14px;border:1px solid #bee5d8;border-radius:9px;background:#f0faf6}.uptime-monitor-options .check-label{grid-column:1/-1!important;border-bottom:1px solid #d4ebe4;padding-bottom:10px;align-self:auto}
.monitor-json { min-height:200px; }
.monitor-error-log .empty-state { min-height:340px; }.monitor-error-log .data-table{white-space:normal}.monitor-error-log .data-table small{display:block;max-width:460px;margin-top:3px;line-height:1.4}.monitor-error-log>.danger-box{margin-bottom:14px;overflow-wrap:anywhere}

.metric-editor-layout { display:grid;grid-template-columns:225px minmax(0,1fr);min-height:510px;border:1px solid #e0e5e8;border-radius:9px;overflow:hidden }
.metric-list { padding:14px 0;background:#f7f9fa;border-right:1px solid #e0e5e8 }.metric-list>span{display:block;padding:0 14px 10px;color:#87939e;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.7px}.metric-list>button{width:100%;display:flex;align-items:center;gap:10px;padding:12px 14px;border:0;border-left:3px solid var(--cyan);background:#eaf5f2;color:#334454;text-align:left}.metric-list>button i{width:9px;height:42px;border-radius:3px;background:var(--metric-color)}.metric-list>button span{display:grid;min-width:0}.metric-list b{font-size:10px}.metric-list small{margin-top:3px;color:#7c8b97;font-size:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.metric-list p{padding:12px 14px;margin:0;color:#8a96a1;font-size:8px;line-height:1.5}
.metric-source-editor { min-width:0; padding:18px; }.metric-source-editor>header{display:flex;align-items:center;gap:15px;padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid #e5e9ec}.metric-source-editor>header>div{flex:1}.metric-source-editor h3{margin:2px 0 0;font-size:15px;color:#293849}.metric-source{min-height:260px}.metric-source textarea{min-height:105px}.metric-source-editor>.snmp-test-result{margin-top:15px}
.monitor-error-inline { display:block;max-width:320px;margin-top:4px;white-space:normal;overflow-wrap:anywhere;line-height:1.35; }

.topology-toolbar { display:flex;align-items:center;gap:16px;margin-bottom:14px;padding:16px 18px;border:1px solid #dfe6e9;border-radius:10px;background:#fff }.topology-toolbar>div:first-child{flex:1}.topology-toolbar h2{margin:2px 0;color:#29384a;font-size:17px}.topology-toolbar p{margin:3px 0 0;color:#81909d;font-size:9px}.topology-viewport{min-height:570px;overflow:auto;padding:48px 30px;border:1px solid #dfe5e8;border-radius:10px;background:#fff;background-image:radial-gradient(#dfe6e8 1px,transparent 1px);background-size:22px 22px}.device-tree{width:max-content;min-width:100%;transform:scale(var(--tree-zoom,1));transform-origin:top center;transition:transform .18s}.device-tree ul{position:relative;display:flex;justify-content:center;padding-top:28px;margin:0}.device-tree li{position:relative;display:flex;flex-direction:column;align-items:center;padding:28px 7px 0;list-style:none}.device-tree li::before,.device-tree li::after{content:"";position:absolute;top:0;width:50%;height:28px;border-top:1px solid #93c9b8}.device-tree li::before{right:50%}.device-tree li::after{left:50%;border-left:1px solid #93c9b8}.device-tree li:only-child::before,.device-tree li:only-child::after{display:none}.device-tree li:first-child::before,.device-tree li:last-child::after{border:0}.device-tree li:last-child::before{border-right:1px solid #93c9b8;border-radius:0 5px 0 0}.device-tree li:first-child::after{border-radius:5px 0 0 0}.device-tree ul ul::before{content:"";position:absolute;top:0;left:50%;height:28px;border-left:1px solid #93c9b8}.device-tree>ul>li{padding-top:0}.device-tree>ul>li::before,.device-tree>ul>li::after{display:none}.device-tree ul.collapsed{display:none}.topology-node{position:relative;min-width:170px;max-width:220px;display:flex;align-items:center;border:1px solid #dce4e6;border-top:3px solid #8a9aa5;border-radius:9px;background:#fff;box-shadow:0 7px 20px rgba(32,52,47,.08)}.topology-node.state-online{border-top-color:var(--green)}.topology-node.state-alert{border-top-color:var(--orange)}.topology-node.state-offline{border-top-color:var(--red)}.topology-node>a{min-width:0;display:flex;align-items:center;gap:8px;padding:10px;color:#354456}.topology-node>a>span:nth-child(2){min-width:0;display:grid}.topology-node b{font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.topology-node small{font-size:7px;color:#80909d}.topology-node em{font-size:7px;color:#7d8d98;font-style:normal}.topology-node .badge{position:absolute;right:5px;top:5px;width:8px;height:8px;padding:0;font-size:0;border:0}.topology-node .badge::before{width:7px;height:7px}.topology-toggle{position:absolute;left:50%;bottom:-16px;z-index:2;width:29px;height:29px;display:grid;place-items:center;border:1px solid #bcd8cf;border-radius:50%;background:#f0f8f5;color:var(--cyan);cursor:pointer;transform:translateX(-50%)}.topology-toggle svg{width:13px}.topology-toggle b{position:absolute;right:-5px;top:-5px;min-width:15px;height:15px;display:grid;place-items:center;border-radius:8px;background:#344656;color:#fff;font-size:7px}.topology-dim{opacity:.18}.topology-match{box-shadow:0 0 0 3px rgba(36,104,232,.18),0 7px 20px rgba(32,52,47,.08)}.topology-cycle{padding:6px;color:var(--red);font-size:8px}

@media(max-width:900px){
  .template-monitor-row{grid-template-columns:auto minmax(0,1fr)!important}.template-instance-select{grid-column:2}.template-monitor-row .import-status{grid-column:2}.device-quick-drawer{grid-column:1!important}.device-quick-drawer>header{align-items:flex-start;flex-wrap:wrap}.drawer-device-identity{min-width:0;flex:1}.drawer-status-counts{order:3;width:100%;margin:0}.drawer-device-actions{margin-left:auto}.device-drawer-body{grid-template-columns:1fr}.device-drawer-body>aside{border-right:0;border-bottom:1px solid #414746}.drawer-uptime-summary{display:none}.monitor-editor-form{grid-template-columns:1fr;margin:-20px}.monitor-editor-tabs{position:sticky;top:0;z-index:2;flex-direction:row;overflow:auto;padding:0;border-right:0;border-bottom:1px solid #e1e6e9}.monitor-editor-tabs button{min-width:max-content;min-height:43px;border-left:0;border-bottom:3px solid transparent}.monitor-editor-tabs button.active{border-left:0;border-bottom-color:#378bef}.monitor-editor-panels{max-height:calc(100vh - 230px)}.monitor-identity{grid-template-columns:64px 1fr}.monitor-identity label:nth-of-type(2){grid-column:2}.metric-editor-layout{grid-template-columns:1fr}.metric-list{border-right:0;border-bottom:1px solid #e0e5e8}.metric-list p{display:none}.topology-toolbar{align-items:flex-start;flex-wrap:wrap}.topology-toolbar .search-box{order:3;width:100%}
}
@media(max-width:560px){
  .release-card{align-items:flex-start;flex-wrap:wrap}.release-card p{white-space:normal}.release-card .button{margin-left:auto}.drawer-status-counts{overflow:auto}.drawer-status-counts span{min-width:62px}.device-drawer-body>main{grid-template-columns:repeat(2,minmax(0,1fr))}.monitor-editor-panel{padding:15px}.monitor-identity{display:grid;grid-template-columns:1fr}.monitor-color-preview{width:52px;height:52px}.monitor-identity label:nth-of-type(2){grid-column:auto}.uptime-monitor-options{grid-template-columns:1fr}.metric-source-editor{padding:13px}.metric-source-editor>header{align-items:flex-start;flex-direction:column}.topology-viewport{padding:36px 15px}.topology-toolbar .view-switch{margin-left:auto}
}

/* FSNET Monitoramento 0.5 — inventário compacto e resultados operacionais */
@media(min-width:901px){
  .sidebar{height:56px}.sidebar .brand{height:56px;padding:0 20px}.main-nav a{height:56px;padding:0 13px}.sidebar .header-actions{min-height:56px}.sidebar .header-actions .user-menu{top:47px}.topbar{top:56px;height:48px;padding:0 22px}.page-heading h1{font-size:15px}.page-heading span{font-size:7px}.content{padding-top:15px}
}

.device-card-grid.compact{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:9px}.device-card.compact{display:grid;grid-template-columns:minmax(0,1fr) auto;border-radius:7px}.device-card.compact>header{min-height:57px;padding:9px 7px 9px 10px;border:0}.device-card.compact .device-icon{width:35px;height:35px}.device-card.compact .device-card-title b{font-size:10px}.device-card.compact .device-card-title small{font-size:8px}.device-card.compact .badge{height:18px;padding:0 5px;font-size:0}.device-card.compact .badge::before{width:7px;height:7px}.device-card.compact .device-card-foot{min-height:57px;padding:8px 7px;border:0;border-left:1px solid #edf0f2;background:#fff}.device-card.compact .row-actions{height:100%;align-items:center}.device-card.compact .row-actions button{width:25px;height:25px}.compact-device-table .data-table td{padding-top:8px;padding-bottom:8px}

.device-quick-drawer>header{min-height:44px;padding:5px 9px}.drawer-device-identity{min-width:180px}.drawer-device-identity .device-icon{width:31px;height:31px}.drawer-status-counts span{min-width:54px;padding:2px 6px}.drawer-status-counts b{font-size:10px}.drawer-action{width:27px;height:27px}.device-drawer-body{grid-template-columns:160px minmax(0,1fr);min-height:131px}.device-drawer-body>aside{padding:8px 9px}.drawer-monitor-search input{height:29px}.drawer-monitor-search svg{top:7px}.drawer-state-filters{margin:5px 0 1px}.drawer-state-filters button{height:27px}.device-drawer-body>main{display:block;min-width:0;padding:7px 8px;overflow:hidden}.drawer-monitor-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));grid-template-rows:repeat(2,46px);grid-auto-rows:46px;gap:5px;min-height:97px;max-height:97px;overflow:hidden;align-content:start}.drawer-monitor-grid>[hidden]{display:none!important}.device-summary-tile,.device-monitor-tile,.device-monitor-add{min-height:46px;height:46px;padding:3px;gap:1px;border-radius:4px;overflow:hidden}.device-summary-tile>span,.device-monitor-icon{width:16px;height:16px}.device-summary-tile svg,.device-monitor-icon svg{width:14px}.device-monitor-icon .imported-asset{width:16px;height:16px}.device-monitor-tile>span:nth-child(2){display:grid;min-width:0;width:100%}.device-summary-tile b,.device-monitor-tile b{font-size:6.5px;line-height:1.05;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.device-summary-tile small,.device-monitor-tile small{max-width:100%;font-size:5.5px;line-height:1.05;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.device-monitor-tile .badge{right:2px;top:2px}.device-monitor-add svg{width:14px}.device-monitor-add span{font-size:6px}.drawer-more-row{min-height:27px;display:flex;align-items:center;gap:8px;margin-top:4px;padding-top:3px;border-top:1px solid #414746}.drawer-more-row button{display:flex;align-items:center;gap:5px;padding:0;border:0;background:transparent;color:#9ee2d2;font-size:7px;font-weight:750;cursor:pointer}.drawer-more-row button:hover{color:#fff}.drawer-more-row svg{width:11px}.drawer-more-row small{margin-left:auto;color:#75827e;font-size:6px}.drawer-pager{display:flex;align-items:center;gap:3px;flex:0 0 auto}.drawer-pager button{width:22px;height:21px;display:grid;place-items:center;border:1px solid #4b5753;border-radius:4px;background:#2d3432;color:#dce5e2;font-size:14px;line-height:1}.drawer-pager button:disabled{opacity:.3;cursor:default}.drawer-pager b{min-width:31px;color:#d5ddda;font-size:6.5px;text-align:center}

.monitor-summary-head,.template-apply-head{display:flex;align-items:center;gap:11px;padding:11px 13px;margin-bottom:10px;border:1px solid #dfe6e9;border-radius:8px;background:#fff}.monitor-summary-head>.device-icon,.template-apply-head>.device-icon{width:39px;height:39px}.monitor-summary-head h2,.template-apply-head h2{margin:0;color:#2d3a4c;font-size:14px}.monitor-summary-head p,.template-apply-head p{margin:2px 0 0;color:#7e8c99;font-size:8px}.monitor-summary-head .spacer,.template-apply-head .spacer,.monitor-summary-toolbar .spacer{flex:1}.monitor-summary-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:10px}.summary-ranges button{min-width:40px}.monitor-summary-toolbar .search-box{min-width:310px}.monitor-result-board{border:1px solid #dfe5e9;border-radius:8px;background:#fff;overflow:hidden}.monitor-result-head,.monitor-result-row{display:grid;grid-template-columns:minmax(250px,1.15fr) minmax(220px,.85fr) minmax(310px,1.4fr) 70px;align-items:center;gap:12px}.monitor-result-head{min-height:34px;padding:0 12px;background:#f7f9fa;color:#8a96a2;font-size:7px;font-weight:800;text-transform:uppercase;letter-spacing:.7px}.monitor-result-row{min-height:82px;padding:8px 12px;border-top:1px solid #edf0f2}.monitor-result-row:hover{background:#fafcfb}.monitor-result-name{min-width:0;display:flex;align-items:center;gap:9px;padding:0;border:0;background:transparent;color:#344255;text-align:left;cursor:pointer}.monitor-result-name>span:nth-child(2){min-width:0;display:grid;flex:1}.monitor-result-name b{font-size:9px}.monitor-result-name small{color:#82909c;font-size:7px}.monitor-result-name em{margin-top:2px;color:#bd3c48;font-size:7px;font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.monitor-result-name .badge{height:17px;padding:0 5px;font-size:0}.monitor-result-values{display:grid;gap:4px}.monitor-result-values span{display:grid;grid-template-columns:7px 1fr auto;align-items:center;gap:6px}.monitor-result-values i{width:6px;height:6px;border-radius:50%;background:var(--metric)}.monitor-result-values b{color:#5c6a78;font-size:7px}.monitor-result-values em{color:#263547;font-size:9px;font-style:normal;font-weight:750}.monitor-result-chart .monitor-chart.compact,.monitor-result-chart .sparkline{height:54px}.monitor-result-actions{display:flex;justify-content:flex-end;gap:4px}.monitor-result-actions button{width:28px;height:28px;display:grid;place-items:center;border:1px solid #e1e7ea;border-radius:6px;background:#fff;color:#71808f;cursor:pointer}.monitor-result-actions button:hover{color:var(--cyan);background:#eef8f5}.monitor-result-actions svg{width:14px}.monitor-result-board>footer{height:46px;display:flex;align-items:center;justify-content:center;gap:18px;border-top:1px solid #e4e9ec;color:#536273;font-size:9px}.compact-loader{min-height:170px}

.monitor-chart{min-width:0}.monitor-chart .series-line{fill:none;stroke-width:2;vector-effect:non-scaling-stroke}.monitor-chart .series-area{stroke:none}.monitor-chart.compact{height:58px}.monitor-chart.compact .sparkline{height:58px}.monitor-chart-legend{display:flex;align-items:center;gap:14px;margin-bottom:7px;color:#526274;font-size:8px}.monitor-chart-legend span{display:flex;align-items:center;gap:5px}.monitor-chart-legend i{width:8px;height:8px;border-radius:50%;background:var(--series)}.monitor-chart-legend small{color:#8b97a2}.monitor-chart-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:7px;margin-top:9px}.monitor-chart-stats span{display:grid;padding:8px 10px;border-left:3px solid var(--series);border-radius:4px;background:#f7f9fa}.monitor-chart-stats b{color:#344255;font-size:8px}.monitor-chart-stats em{color:#253547;font-size:10px;font-style:normal}.monitor-chart-stats small{color:#86929d;font-size:7px}.mini-chart-empty{height:55px;display:grid;place-items:center;color:#a0abb4;font-size:7px;border-bottom:1px solid #edf0f2}

.monitor-results-panel{min-height:500px}.monitor-results-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:12px}.monitor-results-toolbar>label{display:flex;align-items:center;gap:7px;color:#687787;font-size:8px}.monitor-results-toolbar select{width:125px;height:34px;padding:5px 28px 5px 8px}.monitor-results-toolbar .spacer{flex:1}.monitor-current-results{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px;margin-bottom:12px}.monitor-current-results article{display:grid;padding:10px 12px;border:1px solid #e1e7ea;border-top:3px solid var(--metric);border-radius:7px;background:#fafbfc}.monitor-current-results span{color:#788694;font-size:8px}.monitor-current-results strong{margin-top:2px;color:#28384a;font-size:18px}.monitor-current-results small{margin-top:4px;color:#8a96a2;font-size:7px}.monitor-current-results em{margin-top:5px;color:#bd3c48;font-size:7px;font-style:normal;overflow-wrap:anywhere}.monitor-results-chart{padding:14px;border:1px solid #e1e6e9;border-radius:8px}.monitor-results-chart>header{display:flex;align-items:center;margin-bottom:8px}.monitor-results-chart h3{margin:0;color:#2c3b4d;font-size:13px}.monitor-results-chart>header>span{margin-left:auto;color:#85919c;font-size:8px}.metric-list>button svg{width:13px;margin-left:auto;color:#799088}
.monitor-results-chart>header>span.monitor-live-label{display:flex;align-items:center;gap:5px;color:#08795a;font-weight:750}.monitor-live-label i{width:7px;height:7px;border-radius:50%;background:#0fa968;box-shadow:0 0 0 0 rgba(15,169,104,.45);animation:monitor-live-pulse 1.8s infinite}@keyframes monitor-live-pulse{70%{box-shadow:0 0 0 6px rgba(15,169,104,0)}100%{box-shadow:0 0 0 0 rgba(15,169,104,0)}}

.template-apply-layout{min-height:650px;display:grid;grid-template-columns:260px minmax(0,1fr);border:1px solid #dce4e7;border-radius:8px;background:#fff;overflow:hidden}.template-apply-layout>aside{padding:12px 0;border-right:1px solid #dfe5e8;background:#f7f9fa}.template-apply-layout>aside>span{display:block;padding:0 13px 9px;color:#8a96a1;font-size:7px;font-weight:800;text-transform:uppercase;letter-spacing:.8px}.template-apply-layout>aside button{width:100%;display:flex;align-items:center;gap:9px;padding:10px 13px;border:0;border-left:3px solid transparent;background:transparent;color:#536273;text-align:left;cursor:pointer}.template-apply-layout>aside button.active{border-left-color:#3c8ff0;background:#eaf5f2;color:#283b3a}.template-apply-layout>aside button>svg,.template-apply-layout>aside button>.imported-asset{width:25px;height:25px;object-fit:contain}.template-apply-layout>aside button span{display:grid;min-width:0}.template-apply-layout>aside b{font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.template-apply-layout>aside small{color:#8996a0;font-size:7px}.template-apply-layout>main{min-width:0}.template-apply-layout>main>header{min-height:82px;display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid #e2e7ea}.template-apply-layout>main>header h2{margin:0;color:#2c3b4d;font-size:15px}.template-apply-layout>main>header p{margin:3px 0 0;color:#7e8b97;font-size:8px}.template-apply-layout>main>header .eyebrow{margin-bottom:2px}.automatic-discovery-status{min-height:38px;display:flex;align-items:center;gap:7px;padding:7px 15px;border-bottom:1px solid #e3e8eb;color:#697887;background:#f7f9fa;font-size:8px}.automatic-discovery-status svg{width:14px}.automatic-discovery-status.success{color:#08795a;background:#effaf6}.automatic-discovery-status.warning{color:#a16b0b;background:#fff9ec}.automatic-discovery-status.error{color:#b33a45;background:#fff3f4}.automatic-discovery-status.testing svg{animation:spin 1s linear infinite}.template-apply-rows{max-height:540px;overflow:auto}.template-apply-row{min-height:57px;display:grid;grid-template-columns:20px 34px minmax(220px,1fr) minmax(220px,360px) 30px;align-items:center;gap:10px;padding:7px 13px;border-bottom:1px solid #e8ecef;color:#526273}.template-apply-row:hover{background:#f7fbfa}.template-apply-row.unsupported{opacity:.55}.template-apply-row>.template-monitor-icon{width:32px;height:32px;display:grid;place-items:center}.template-apply-row>.template-monitor-icon svg,.template-apply-row>.template-monitor-icon img{max-width:29px;max-height:29px}.template-apply-copy{display:grid;min-width:0}.template-apply-copy>b{color:#334255;font-size:9px}.template-apply-copy>small{color:#8996a1;font-size:7px}.template-metric-chips{display:flex!important;align-items:center;gap:4px;flex-wrap:wrap;margin-top:4px}.template-metric-chips i{padding:2px 5px;border-radius:8px;background:#eaf3f1;color:#3f6f65;font-size:6px;font-style:normal;font-weight:750}.template-apply-row select{height:34px;padding:6px 28px 6px 8px;font-size:8px}.template-apply-row>em{color:#688177;font-size:7px;font-style:normal}.template-apply-row>button{width:28px;height:28px;display:grid;place-items:center;border:0;background:transparent;color:#8a96a0;cursor:pointer}.template-apply-row>button svg{width:14px}.template-apply-layout>main>footer{height:54px;display:flex;align-items:center;gap:10px;padding:0 14px;border-top:1px solid #dfe5e8;color:#687787;font-size:8px}.template-apply-layout>main>footer .spacer{flex:1}
.template-apply-modal-tools{min-height:48px;display:flex;align-items:center;gap:9px;margin-bottom:9px;padding:6px 9px;border:1px solid #dfe6e9;border-radius:7px;background:#f8faf9}.template-apply-modal-tools>.device-icon{width:32px;height:32px}.template-apply-modal-tools>span:nth-child(2){display:grid}.template-apply-modal-tools b{color:#314052;font-size:9px}.template-apply-modal-tools small{color:#7e8c98;font-size:7px}.template-apply-modal-tools .spacer{flex:1}.modal-template-apply{height:min(650px,calc(100vh - 230px));min-height:430px}.modal-template-apply .template-apply-rows{max-height:calc(100vh - 430px)}

.configuration-head{padding:6px 4px 18px}.configuration-head h2{margin:0;color:#29384a;font-size:23px}.configuration-head p{margin:4px 0 0;color:#7c8996;font-size:10px}.configuration-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}.configuration-tile{min-height:175px;display:grid;place-items:center;align-content:center;gap:10px;padding:18px;border:1px solid #dfe5e9;border-radius:10px;background:#fff;color:#334255;text-align:center;cursor:pointer}.configuration-tile:hover{border-color:#9bcfc2;box-shadow:0 10px 26px rgba(35,58,54,.08);transform:translateY(-2px)}button.configuration-tile{width:100%;font:inherit}.configuration-tile>span{width:58px;height:58px;display:grid;place-items:center;border-radius:15px;background:#eaf5f2;color:#3d8ced}.configuration-tile svg{width:31px;height:31px}.configuration-tile b{font-size:12px}.configuration-tile small{max-width:170px;color:#7c8995;font-size:8px;line-height:1.4}.widget-advanced{padding:10px 12px;border:1px solid #e1e6e9;border-radius:7px}.widget-advanced summary{color:#667687;font-size:9px;font-weight:750;cursor:pointer}.widget-advanced label{margin-top:10px}

@media(max-width:1100px){.monitor-result-head,.monitor-result-row{grid-template-columns:minmax(220px,1fr) minmax(180px,.7fr) minmax(250px,1fr) 60px}.template-apply-layout{grid-template-columns:210px minmax(0,1fr)}.template-apply-row{grid-template-columns:20px 32px minmax(180px,1fr) minmax(180px,280px) 28px}}
@media(max-width:900px){.device-drawer-body>main{display:block}.drawer-monitor-grid{grid-template-columns:repeat(5,minmax(70px,1fr));max-height:123px}.monitor-result-head{display:none}.monitor-result-row{grid-template-columns:minmax(210px,1fr) minmax(180px,1fr) 60px}.monitor-result-chart{grid-column:1/-1;grid-row:2}.template-apply-layout{grid-template-columns:1fr}.template-apply-layout>aside{border-right:0;border-bottom:1px solid #dfe5e8}.template-apply-layout>aside>div{display:flex;overflow:auto}.template-apply-layout>aside button{min-width:190px}.template-apply-row{grid-template-columns:20px 32px minmax(0,1fr) 28px}.template-apply-row select{grid-column:3}.template-apply-row>em{grid-column:3}.monitor-summary-toolbar{align-items:stretch;flex-wrap:wrap}.monitor-summary-toolbar .search-box{width:100%;min-width:0}}
@media(max-width:560px){.device-card-grid.compact{grid-template-columns:1fr}.drawer-monitor-grid{grid-template-columns:repeat(3,minmax(68px,1fr))}.drawer-more-row small{display:none}.monitor-summary-head,.template-apply-head{flex-wrap:wrap}.monitor-summary-head .spacer,.template-apply-head .spacer{display:none}.monitor-result-row{grid-template-columns:1fr 52px}.monitor-result-values{grid-column:1}.monitor-result-chart{grid-column:1/-1}.template-apply-row{grid-template-columns:20px 30px minmax(0,1fr)}.template-apply-row select,.template-apply-row>em{grid-column:2/-1}.template-apply-row>button{display:none}.configuration-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.configuration-tile{min-height:145px;padding:12px}.configuration-tile>span{width:46px;height:46px}.configuration-tile svg{width:25px}.monitor-current-results{grid-template-columns:1fr}}

/* Bandeja de monitoramento: ocupa a largura real da tela e preserva leitura. */
.device-card-grid>.device-quick-drawer{
  position:relative;left:50%;width:100vw;max-width:none;margin-left:-50vw;
  border-left:0;border-right:0;border-radius:0;
}
.device-quick-drawer>header{min-height:64px;padding:10px 24px}
.drawer-device-identity{min-width:260px}.drawer-device-identity .device-icon{width:42px;height:42px}
.drawer-device-identity b{font-size:13px}.drawer-device-identity small{font-size:10px}
.drawer-status-counts span{min-width:78px;padding:6px 11px;font-size:9px}.drawer-status-counts b{font-size:16px}
.drawer-action{width:36px;height:36px}.drawer-action svg{width:17px}
.device-drawer-body{grid-template-columns:220px minmax(0,1fr);min-height:225px}
.device-drawer-body>aside{padding:17px 18px}.device-drawer-body>aside label,.device-drawer-body>aside>span{font-size:11px}
.drawer-monitor-search input{height:38px;font-size:11px}.drawer-monitor-search svg{top:11px}
.drawer-state-filters{margin:9px 0 14px}.drawer-state-filters button{height:34px;font-size:10px}
.device-drawer-body>main{display:block;padding:16px 22px;overflow:hidden}
.drawer-monitor-grid{grid-template-columns:repeat(auto-fill,minmax(145px,1fr));grid-template-rows:repeat(2,82px);grid-auto-rows:82px;gap:10px;min-height:174px;max-height:174px}
.device-summary-tile,.device-monitor-tile,.device-monitor-add{height:82px;min-height:82px;padding:9px;gap:4px;border-radius:7px}
.device-summary-tile>span,.device-monitor-icon{width:27px;height:27px}.device-summary-tile svg,.device-monitor-icon svg{width:23px}
.device-monitor-icon .imported-asset{width:27px;height:27px}
.device-summary-tile b,.device-monitor-tile b{font-size:10px;line-height:1.25;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.device-summary-tile small,.device-monitor-tile small{font-size:8.5px;line-height:1.2}.device-monitor-add span{font-size:10px}
.drawer-more-row{min-height:38px;margin-top:8px;padding-top:7px}.drawer-more-row button{font-size:9px}.drawer-more-row small,.drawer-pager b{font-size:8px}
@media(max-width:900px){
  .device-card-grid>.device-quick-drawer{left:auto;width:100%;margin-left:0;border-left:1px solid #121a1d;border-right:1px solid #121a1d;border-radius:5px}
  .device-quick-drawer>header{padding:9px 12px}.device-drawer-body{grid-template-columns:1fr}.drawer-monitor-grid{grid-template-columns:repeat(3,minmax(100px,1fr));grid-template-rows:repeat(2,76px);grid-auto-rows:76px;min-height:162px;max-height:162px}.device-summary-tile,.device-monitor-tile,.device-monitor-add{height:76px;min-height:76px}
}

.inline-topology{min-width:0}.inline-topology>header{min-height:43px;display:flex;align-items:center;gap:12px;padding:6px 10px;border-bottom:1px solid #e2e7e9;background:#f8faf9}.inline-topology>header>div:first-child{display:grid}.inline-topology>header b{color:#344456;font-size:10px}.inline-topology>header small{color:#84928e;font-size:7px}.inline-topology>header .topology-zoom{margin-left:auto}.inline-topology-viewport{min-height:520px;border:0;border-radius:0;padding:42px 24px}.inventory-tree-device{min-width:0;display:flex;align-items:center;gap:7px;padding:7px;border:0;background:transparent;color:#354456;font:inherit;text-align:left;cursor:pointer}.inventory-tree-device>span:nth-child(2){min-width:0;display:grid}.inventory-tree-device:hover b{color:var(--cyan)}.inventory-tree-device .device-icon{width:31px;height:31px}.inventory-tree-device .badge{pointer-events:none}.inventory-surface #device-table>.device-quick-drawer{margin:9px}

/* Editor completo do dispositivo em abas */
.device-editor-form{margin:-20px}.device-editor-shell{display:grid;grid-template-columns:190px minmax(0,1fr);min-height:min(720px,calc(100vh - 180px))}.device-editor-tabs{padding:18px 0;border-right:1px solid #e1e6e9;background:#f8faf9}.device-editor-tabs button{width:100%;min-height:48px;display:flex;align-items:center;gap:10px;padding:0 18px;border:0;border-left:4px solid transparent;background:transparent;color:#697887;font:inherit;font-size:10px;font-weight:750;text-align:left;cursor:pointer}.device-editor-tabs button:hover{background:#f0f6f4;color:#3d5266}.device-editor-tabs button.active{border-left-color:#3b8df0;background:#eef7f5;color:#2678dc}.device-editor-tabs svg{width:17px}.device-editor-content{min-width:0;max-height:calc(100vh - 180px);overflow:auto}.device-editor-panel{display:none;padding:24px 28px}.device-editor-panel.active{display:block}.device-editor-heading{margin-bottom:20px}.device-editor-heading h3{margin:2px 0 4px;color:#2d3c4e;font-size:17px}.device-editor-heading p{margin:0;color:#83909c;font-size:9px}.device-details-layout{display:grid;grid-template-columns:180px minmax(0,1fr);gap:28px}.device-icon-editor{display:grid;align-content:start;gap:14px}.device-icon-editor>span{width:150px;height:150px;display:grid;place-items:center;border:1px solid #cfe0dc;border-radius:12px;background:repeating-linear-gradient(135deg,#e4f4f1,#e4f4f1 9px,#d9eeea 9px,#d9eeea 18px);color:#3c8be9}.device-icon-editor>span svg,.device-icon-editor>span img{width:92px;height:92px;object-fit:contain}.device-icon-editor label{display:grid;gap:6px;color:#657586;font-size:9px;font-weight:750}.device-details-fields{align-content:start}.device-parent-preview{min-height:330px;display:flex;align-items:center;justify-content:center;gap:26px;margin-top:18px;border:1px solid #e0e6e9;border-radius:9px;background:#fbfcfc}.device-parent-preview>span{min-width:155px;max-width:230px;display:grid;gap:3px;padding:18px;border:2px solid #83b28d;border-radius:18px;background:#f2faf5;color:#32473a;text-align:center}.device-parent-preview>span.current{border-color:#3b8df0;background:#eff6ff}.device-parent-preview>span.root{min-width:250px}.device-parent-preview b{font-size:11px}.device-parent-preview small{color:#77868b;font-size:8px}.device-parent-preview em{color:#3b8df0;font-size:7px;font-style:normal;text-transform:uppercase}.device-parent-preview>i{width:42px;color:#65a173}.device-parent-preview>i svg{width:42px}.applied-template-list{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px}.applied-template-list>span{min-width:190px;display:grid;grid-template-columns:28px 1fr;align-items:center;gap:2px 8px;padding:10px 12px;border:1px solid #dfe6e9;border-radius:8px;background:#fafcfc}.applied-template-list svg{grid-row:1/3;width:22px;color:#3e8cea}.applied-template-list b{color:#344456;font-size:9px}.applied-template-list small{color:#84919c;font-size:7px}.empty-inline{padding:12px;color:#8b97a1;font-size:9px}.group-choice-preview{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.group-choice-preview>span{display:flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid #e0e6e8;border-radius:7px;color:#5d6d7c;font-size:8px}.group-choice-preview i{width:8px;height:8px;border-radius:50%;background:var(--group-color)}.device-alert-channel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:9px;margin-top:17px}.device-alert-channel-grid>label{display:block}.device-alert-channel-grid>label>input{position:absolute;opacity:0}.device-alert-channel-grid>label>span{min-height:68px;display:grid;grid-template-columns:34px 1fr;align-items:center;gap:2px 9px;padding:10px 12px;border:1px solid #dfe5e8;border-radius:8px;background:#fff;color:#687787;cursor:pointer}.device-alert-channel-grid>label>input:checked+span{border-color:#58af99;background:#eef9f5;box-shadow:0 0 0 2px rgba(67,157,135,.1)}.device-alert-channel-grid>label>input:disabled+span{opacity:.55;cursor:default}.device-alert-channel-grid svg{grid-row:1/3;width:24px;color:#3d8cf0}.device-alert-channel-grid b{color:#344456;font-size:9px}.device-alert-channel-grid small{font-size:7px}.device-editor-panel .switch-row{border:1px solid #e0e6e9;border-radius:8px;padding:10px 12px;background:#fafcfc}

@media(max-width:850px){.device-editor-shell{grid-template-columns:1fr}.device-editor-tabs{position:sticky;top:0;z-index:3;display:flex;overflow:auto;padding:0;border-right:0;border-bottom:1px solid #e1e6e9}.device-editor-tabs button{min-width:max-content;min-height:44px;padding:0 13px;border-left:0;border-bottom:3px solid transparent}.device-editor-tabs button.active{border-left:0;border-bottom-color:#3b8df0}.device-editor-content{max-height:calc(100vh - 225px)}.device-editor-panel{padding:18px}.device-details-layout{grid-template-columns:1fr}.device-icon-editor{grid-template-columns:92px minmax(0,1fr);align-items:center}.device-icon-editor>span{width:88px;height:88px}.device-icon-editor>span svg,.device-icon-editor>span img{width:55px;height:55px}.device-parent-preview{min-height:240px;flex-direction:column}.device-parent-preview>i{transform:rotate(90deg)}}

/* Modelos editáveis do Telegram */
.telegram-template-editor{overflow:hidden;border:1px solid #dce4e8;border-radius:10px;background:#f9fbfb}.telegram-template-editor>header{display:flex;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid #e1e7e9;background:#fff}.telegram-template-editor>header>div{min-width:0;flex:1}.telegram-template-editor h3{margin:2px 0;color:#2d3c4e;font-size:14px}.telegram-template-editor p{margin:2px 0 0;color:#7b8995;font-size:8px}.telegram-template-tokens{display:flex;gap:6px;flex-wrap:wrap;padding:11px 14px;border-bottom:1px solid #e2e8ea}.telegram-template-tokens button{display:flex;align-items:center;gap:5px;min-height:30px;padding:5px 8px;border:1px solid #d8e1e4;border-radius:6px;background:#fff;color:#516172;cursor:pointer}.telegram-template-tokens button:hover{border-color:#62ae9b;background:#eef8f5}.telegram-template-tokens b{font-size:7px}.telegram-template-tokens code{color:#27806b;font-size:7px}.telegram-template-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px}.telegram-template-fields textarea{min-height:225px;resize:vertical;font:9px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace}.telegram-template-preview-result{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 14px 14px;padding:12px;border:1px solid #cde1db;border-radius:8px;background:#eef8f5}.telegram-template-preview-result article{min-width:0}.telegram-template-preview-result span{display:block;margin-bottom:5px;color:#28816b;font-size:7px;font-weight:850;letter-spacing:.7px}.telegram-template-preview-result pre{margin:0;overflow:auto;white-space:pre-wrap;color:#344455;font:8px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}.telegram-template-editor>footer{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid #e1e7e9;background:#fff}.telegram-template-editor>footer span{color:#7d8b96;font-size:7px}

/* Construtor visual de painéis */
.dashboard-builder{min-width:0}.dashboard-builder.editing{display:grid;grid-template-columns:235px minmax(0,1fr);gap:12px;align-items:start}.dashboard-builder>main{min-width:0}.dashboard-builder-sidebar{position:sticky;top:72px;display:grid;gap:6px;padding:14px;border:1px solid #dce4e7;border-radius:9px;background:#fff}.dashboard-builder-sidebar h3{margin:1px 0;color:#2d3b4c;font-size:13px}.dashboard-builder-sidebar>p{margin:0 0 8px;color:#7e8b96;font-size:8px;line-height:1.45}.dashboard-builder-sidebar>button{min-height:38px;display:grid;grid-template-columns:23px 1fr 15px;align-items:center;gap:7px;padding:6px 9px;border:1px solid transparent;border-radius:6px;background:#f7f9fa;color:#536273;font:inherit;text-align:left;cursor:pointer}.dashboard-builder-sidebar>button:hover{border-color:#b9dcd3;background:#eef8f5;color:#287b68}.dashboard-builder-sidebar>button svg{width:16px}.dashboard-builder-sidebar>button svg:last-child{width:12px}.dashboard-builder-sidebar>button span{font-size:8px;font-weight:750}.dashboard-builder-help{display:flex;align-items:flex-start;gap:7px;margin-top:8px;padding:9px;border:1px solid #dce8e4;border-radius:6px;background:#f2f9f7;color:#698078;font-size:7px;line-height:1.45}.dashboard-builder-help svg{width:15px;flex:0 0 auto;color:#38927d}.dashboard-grid.configurable{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.dashboard-grid.layout-editing{padding:9px;border:1px dashed #a8c8bf;border-radius:10px;background:linear-gradient(#f8fbfa 1px,transparent 1px),linear-gradient(90deg,#f8fbfa 1px,transparent 1px);background-size:18px 18px}.dashboard-widget{position:relative}.dashboard-grid.layout-editing>.dashboard-widget{overflow:visible;border:1px dashed #65a994;box-shadow:0 0 0 2px rgba(72,153,130,.06)}.dashboard-grid.layout-editing>.dashboard-widget.dragging{opacity:.5}.dashboard-grid.layout-editing>.dashboard-widget.drag-over{box-shadow:0 0 0 3px rgba(42,139,113,.28)}.dashboard-widget-editor{position:absolute;z-index:4;top:-13px;right:9px;display:flex;align-items:center;gap:3px;padding:3px;border:1px solid #cbdad6;border-radius:7px;background:#fff;box-shadow:0 5px 13px rgba(35,61,53,.13)}.dashboard-widget-editor>button,.dashboard-drag-handle{width:25px;height:25px;display:grid;place-items:center;border:0;border-radius:4px;background:transparent;color:#65756f;font:700 11px/1 sans-serif;cursor:pointer}.dashboard-widget-editor>button:hover,.dashboard-drag-handle:hover{background:#eaf6f2;color:#29816b}.dashboard-widget-editor>button:last-child:hover{background:#fff0f1;color:#c93d4d}.dashboard-widget-editor svg{width:13px}.dashboard-drag-handle{cursor:grab}.dashboard-drag-handle:active{cursor:grabbing}.dashboard-widget-size{padding:0 5px;color:#839089;font-size:7px;font-weight:800}.dashboard-add-tile{min-height:140px;display:grid;place-items:center;align-content:center;gap:6px;border:2px dashed #b9cbc6;border-radius:9px;background:rgba(255,255,255,.78);color:#75857f;cursor:pointer}.dashboard-add-tile:hover{border-color:#4caa91;background:#eff9f6;color:#2d8a71}.dashboard-add-tile svg{width:25px}.dashboard-add-tile b{font-size:9px}.dashboard-add-tile span{font-size:7px}.empty-action{display:flex;justify-content:center;margin-top:12px}

/* Seleção de várias métricas por gráfico */
.widget-builder-form{align-items:start}.widget-layout-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:10px;border:1px solid #e0e6e9;border-radius:8px;background:#f8faf9}.widget-metrics-option{overflow:hidden;border:1px solid #dce4e7;border-radius:9px;background:#f9fbfb}.widget-metrics-option>header{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid #e1e7e9;background:#fff}.widget-metrics-option>header>div{min-width:0;flex:1}.widget-metrics-option h3{margin:2px 0;color:#2d3c4e;font-size:13px}.widget-metrics-option p{margin:2px 0 0;color:#7d8995;font-size:8px}.widget-metric-rows{display:grid}.widget-metric-row{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(190px,1.15fr) 64px minmax(140px,.8fr) 94px;align-items:end;gap:8px;padding:10px 12px;border-top:1px solid #e4e9eb;background:#fff}.widget-metric-row:first-child{border-top:0}.widget-metric-row:hover{background:#f7fbf9}.widget-metric-row label{gap:4px;font-size:7px}.widget-metric-row select,.widget-metric-row input{height:34px;padding-top:5px;padding-bottom:5px}.widget-metric-color input{width:100%;padding:3px}.widget-metric-actions{height:34px;display:flex;align-items:center;justify-content:flex-end;gap:3px}.widget-metric-actions button{width:28px;height:28px;display:grid;place-items:center;border:1px solid #dce3e6;border-radius:5px;background:#fff;color:#667581;cursor:pointer}.widget-metric-actions button:hover{background:#edf7f4;color:#27816a}.widget-metric-actions button:last-child:hover{background:#fff0f1;color:#c83d4d}.widget-metric-actions button:disabled{opacity:.35;cursor:default}.widget-metric-actions svg{width:13px}

@media(max-width:1050px){.dashboard-builder.editing{grid-template-columns:190px minmax(0,1fr)}.widget-metric-row{grid-template-columns:1fr 1.2fr 58px}.widget-metric-row>label:nth-of-type(4){grid-column:1/3}.widget-metric-actions{grid-column:3;grid-row:1/3}}
@media(max-width:780px){.telegram-template-fields,.telegram-template-preview-result{grid-template-columns:1fr}.dashboard-builder.editing{display:block}.dashboard-builder-sidebar{position:static;grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:12px}.dashboard-builder-sidebar>.eyebrow,.dashboard-builder-sidebar>h3,.dashboard-builder-sidebar>p,.dashboard-builder-help{grid-column:1/-1}.dashboard-grid.configurable{display:grid;grid-template-columns:1fr}.dashboard-grid.configurable>*{grid-column:1!important}.widget-layout-fields{grid-template-columns:1fr}.widget-metric-row{grid-template-columns:1fr 1fr}.widget-metric-row>label:nth-of-type(3){grid-column:1}.widget-metric-row>label:nth-of-type(4){grid-column:2}.widget-metric-actions{grid-column:1/-1;grid-row:auto}.telegram-template-editor>header{align-items:flex-start;flex-direction:column}}

/* Gerenciamento de monitores dentro do dispositivo */
.device-active-monitor-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px;padding:10px 12px;border:1px solid #dfe6e9;border-radius:8px;background:#f8faf9;color:#657585;font-size:8px}.device-active-monitor-toolbar>label{display:flex;align-items:center;gap:7px;font-weight:750}.device-active-monitor-toolbar>span:not(.spacer){color:#82909b}.device-active-monitor-list{overflow:hidden;border:1px solid #dfe5e8;border-radius:9px;background:#fff}.device-active-monitor-row{min-height:62px;display:grid;grid-template-columns:24px 36px minmax(0,1fr) auto 31px;align-items:center;gap:10px;padding:8px 11px;border-top:1px solid #e7ebed}.device-active-monitor-row:first-child{border-top:0}.device-active-monitor-row:hover{background:#f7fbfa}.device-active-monitor-select{display:grid;place-items:center}.device-active-monitor-select input{width:16px;height:16px}.device-active-monitor-icon{width:34px;height:34px;display:grid;place-items:center;color:#2e8b73}.device-active-monitor-icon svg,.device-active-monitor-icon img{max-width:31px;max-height:31px}.device-active-monitor-row>div{min-width:0;display:grid;gap:2px}.device-active-monitor-row>div>b{color:#344355;font-size:9px}.device-active-monitor-row>div>small{overflow:hidden;color:#71808c;font-size:7px;text-overflow:ellipsis;white-space:nowrap}.device-active-monitor-row>div>em{color:#93a09f;font-size:6px;font-style:normal}.device-active-monitor-row>.icon-button{width:29px;height:29px;display:grid;place-items:center;border:1px solid #dce3e5;border-radius:5px;background:#fff;color:#637380;cursor:pointer}.device-active-monitor-row>.icon-button:hover{border-color:#9fcec1;color:#27816b}.device-active-monitor-row>.icon-button svg{width:13px}

/* Conversão de velocidade do monitor */
.speed-conversion-editor{overflow:hidden;border:1px solid #dbe5e2;border-radius:9px;background:#f7fbfa}.speed-conversion-editor>header{display:flex;align-items:center;gap:12px;padding:10px 12px;border-bottom:1px solid #e0e8e5;background:#fff}.speed-conversion-editor>header>div{min-width:0;flex:1;display:grid;gap:2px}.speed-conversion-editor>header b{color:#344456;font-size:9px}.speed-conversion-editor>header small{color:#7d8c96;font-size:7px}.speed-conversion-editor>header .switch-row{width:auto;min-width:160px;margin:0;padding:6px 8px}.speed-conversion-fields{display:grid;grid-template-columns:minmax(150px,1fr) 24px minmax(150px,1fr) minmax(180px,.85fr);align-items:end;gap:9px;padding:11px 12px}.speed-conversion-fields>span{align-self:center;color:#438d79}.speed-conversion-fields>span svg{width:18px}.speed-conversion-fields output{min-height:36px;display:flex;align-items:center;padding:7px 9px;border:1px solid #cfe1dc;border-radius:6px;background:#eef8f5;color:#317764;font-size:7px;font-weight:750}
.speed-conversion-chain{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,.7fr);align-items:center;gap:12px;padding:11px 12px}.speed-conversion-chain>span{min-width:0;display:grid;gap:3px}.speed-conversion-chain>span b{color:#2e6155;font-size:9px}.speed-conversion-chain>span small{color:#748781;font-size:7px;line-height:1.45}.speed-conversion-chain output{min-height:36px;display:flex;align-items:center;padding:7px 9px;border:1px solid #cfe1dc;border-radius:6px;background:#e8f7f2;color:#25735f;font-size:7px;font-weight:750}

/* Leitura precisa ao passar o mouse nos gráficos */
.chart-hover-capture{fill:transparent;pointer-events:all;cursor:crosshair}.chart-hover-cursor{stroke:#334155;stroke-width:1;stroke-dasharray:4 3;vector-effect:non-scaling-stroke;pointer-events:none}.chart-hover-tooltip{position:fixed;z-index:9999;min-width:190px;max-width:330px;padding:9px 10px;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:rgba(20,31,43,.96);box-shadow:0 10px 28px rgba(15,23,42,.3);color:#fff;pointer-events:none}.chart-hover-tooltip header{margin-bottom:6px;padding-bottom:5px;border-bottom:1px solid rgba(255,255,255,.13);color:#cbd5e1;font-size:7px;font-weight:750}.chart-hover-tooltip span{display:grid;grid-template-columns:8px minmax(0,1fr) auto;align-items:center;gap:7px;margin-top:4px;font-size:8px}.chart-hover-tooltip i{width:7px;height:7px;border-radius:50%;background:var(--series)}.chart-hover-tooltip b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chart-hover-tooltip strong{color:#fff;font-size:8px;white-space:nowrap}

@media(max-width:760px){.device-active-monitor-toolbar .spacer{display:none}.device-active-monitor-toolbar .button{flex:1}.device-active-monitor-row{grid-template-columns:22px 30px minmax(0,1fr) 28px}.device-active-monitor-row>.badge{grid-column:3}.speed-conversion-fields,.speed-conversion-chain{grid-template-columns:1fr}.speed-conversion-fields>span{display:none}.speed-conversion-editor>header{align-items:flex-start;flex-direction:column}.speed-conversion-editor>header .switch-row{width:100%}}