:root{--bg:#07111f;--panel:#0c1829;--panel2:#101f34;--border:#1e314a;--text:#edf5ff;--muted:#86a0bd;--cyan:#33d6ff;--green:#42df9b;--red:#ff6c7a;--amber:#ffc861;--shadow:0 16px 50px rgba(0,0,0,.22)}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}body{min-height:100vh}.app{display:grid;grid-template-columns:270px minmax(0,1fr);min-height:100vh}.sidebar{border-right:1px solid var(--border);background:#081424;padding:18px;position:sticky;top:0;height:100vh;overflow:auto}.brand{display:flex;gap:12px;align-items:center;padding:8px 6px 20px}.logo{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#1d9bf0,#35dfb4);display:grid;place-items:center;font-weight:900;color:#02101d}.brand h1{font-size:17px;margin:0}.brand small{color:var(--muted)}.section-label{font-size:11px;letter-spacing:.12em;color:#617996;text-transform:uppercase;margin:20px 8px 8px}.device-btn{width:100%;display:flex;align-items:center;gap:10px;border:1px solid transparent;background:transparent;color:var(--text);padding:11px 10px;border-radius:11px;cursor:pointer;text-align:left}.device-btn:hover,.device-btn.active{background:#10233b;border-color:#24415f}.dot{width:9px;height:9px;border-radius:50%;background:#53677d}.dot.online{background:var(--green);box-shadow:0 0 14px rgba(66,223,155,.5)}.dot.offline{background:var(--red)}.device-meta{margin-left:auto;color:var(--muted);font-size:12px}.main{min-width:0;padding:24px}.topbar{display:flex;gap:14px;align-items:center;justify-content:space-between;margin-bottom:20px}.title h2{margin:0;font-size:24px}.title p{margin:5px 0 0;color:var(--muted);font-size:13px}.status-pill{border:1px solid var(--border);background:var(--panel);padding:8px 11px;border-radius:999px;font-size:12px;color:var(--muted)}.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:14px}.card,.chart-card{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow)}.card{padding:16px}.card span{display:block;color:var(--muted);font-size:12px;margin-bottom:8px}.value{font-size:26px;font-weight:750;letter-spacing:-.03em}.sub{margin-top:6px;color:#6f8aa8;font-size:12px}.chart-card{padding:16px}.chart-head{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:12px}.chart-head h3{margin:0;font-size:15px}.ranges{display:flex;gap:6px;flex-wrap:wrap}.range{border:1px solid var(--border);background:#0a1626;color:var(--muted);border-radius:9px;padding:7px 10px;cursor:pointer}.range.active{background:#17304d;color:white;border-color:#2f5378}.chart-wrap{height:390px;position:relative}.chart-wrap canvas{width:100%;height:100%;display:block}.legend{display:flex;gap:16px;color:var(--muted);font-size:12px;margin-top:10px}.legend b{display:inline-block;width:10px;height:3px;border-radius:4px;margin-right:6px;vertical-align:middle}.rx{background:var(--cyan)}.tx{background:var(--green)}.empty{color:var(--muted);display:grid;place-items:center;height:100%;font-size:13px}.footer-note{color:#607896;font-size:12px;margin-top:12px}.skeleton{opacity:.65}@media(max-width:1000px){.app{grid-template-columns:86px minmax(0,1fr)}.brand h1,.brand small,.section-label,.device-btn .name,.device-meta{display:none}.device-btn{justify-content:center}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.app{display:block}.sidebar{position:relative;height:auto;border-right:0;border-bottom:1px solid var(--border);display:flex;gap:8px;overflow-x:auto;padding:10px}.brand{padding:0;margin-right:8px}.brand h1,.brand small,.section-label{display:none}.device-btn{width:auto;min-width:48px}.main{padding:16px}.cards{grid-template-columns:1fr 1fr}.topbar{align-items:flex-start}.chart-wrap{height:300px}.value{font-size:21px}}

.section-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:20px}.section-head .section-label{margin:0 8px 8px}.add-device-btn{border:1px solid #284664;background:#0f2238;color:#9fdcff;border-radius:8px;padding:5px 8px;font-size:11px;font-weight:700;cursor:pointer;margin:0 2px 8px}.add-device-btn:hover{background:#17314e;color:#fff}.add-device-full{width:100%;border:1px dashed #284664;background:#0b1a2c;color:#9fb6cf;border-radius:11px;padding:10px;margin:0 0 7px;display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer}.add-device-full:hover{background:#10233b;color:#fff;border-style:solid}.add-device-full .plus{font-size:17px;line-height:1;color:#41d3ff}.modal[hidden]{display:none}.modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px}.modal-backdrop{position:absolute;inset:0;background:rgba(2,8,18,.78);backdrop-filter:blur(4px)}.modal-panel{position:relative;width:min(760px,100%);max-height:calc(100vh - 40px);overflow:auto;background:#0d1929;border:1px solid #29415f;border-radius:18px;box-shadow:0 24px 80px rgba(0,0,0,.5);padding:20px}.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}.modal-head h3{margin:0;font-size:20px}.modal-head p{margin:5px 0 0;color:var(--muted);font-size:13px}.icon-btn{width:38px;height:38px;border:1px solid var(--border);background:#0a1626;color:#bcd0e6;border-radius:10px;font-size:24px;line-height:1;cursor:pointer}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-grid label{display:flex;flex-direction:column;gap:7px;color:#a9bdd2;font-size:12px}.form-grid label small{color:#6f89a5}.form-grid input,.form-grid select{width:100%;border:1px solid #2a4260;background:#071322;color:#edf5ff;border-radius:10px;padding:11px 12px;font:inherit;font-size:14px;outline:none}.form-grid input:focus,.form-grid select:focus{border-color:#3c7cad;box-shadow:0 0 0 3px rgba(51,214,255,.08)}.form-wide{grid-column:1/-1}.form-grid .check-row{flex-direction:row;align-items:center;align-self:end;min-height:43px;border:1px solid #263d59;background:#091727;border-radius:10px;padding:10px 12px}.form-grid .check-row input{width:auto}.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}.primary-btn,.secondary-btn{border-radius:10px;padding:10px 14px;font-weight:750;cursor:pointer}.primary-btn{border:1px solid #1da7d0;background:#1597be;color:white}.primary-btn:hover{background:#18a9d4}.primary-btn:disabled{opacity:.6;cursor:wait}.secondary-btn{border:1px solid var(--border);background:#0a1626;color:#b8cbe0}.form-message{margin-bottom:14px;border-radius:10px;padding:10px 12px;font-size:13px}.form-message.error{background:#321720;border:1px solid #713044;color:#ffd7dc}.form-message.success{background:#103122;border:1px solid #286848;color:#c9f7df}.modal-open{overflow:hidden}
@media(max-width:1000px){.section-head{justify-content:center}.add-device-btn{display:none}.add-device-full{padding:9px}.add-device-full span:last-child{display:none}.add-device-full .plus{font-size:20px}}
@media(max-width:640px){.section-head{display:none}.add-device-full{width:auto;min-width:48px;margin:0}.add-device-full span:last-child{display:none}.modal{padding:10px}.modal-panel{max-height:calc(100vh - 20px);padding:16px}.form-grid{grid-template-columns:1fr}.form-wide{grid-column:auto}.modal-actions{position:sticky;bottom:-16px;background:#0d1929;padding:12px 0 2px}}

/* v1.0.4 — MikroTik + SNMP status in sidebar */
.device-btn{display:block;padding:10px 10px 9px}
.device-top{display:flex;align-items:center;gap:9px;min-width:0;width:100%}
.device-top .name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:650}
.device-status-row{display:flex;align-items:center;gap:6px;margin:7px 0 0 19px;flex-wrap:wrap}
.mini-status{display:inline-flex;align-items:center;gap:5px;border:1px solid #243a54;background:#0a1727;color:#7088a3;border-radius:999px;padding:3px 6px;font-size:9px;line-height:1;font-weight:750;letter-spacing:.02em;white-space:nowrap}
.mini-status i{display:block;width:6px;height:6px;border-radius:50%;background:#53677d}
.mini-status.online{color:#9aefc8;border-color:rgba(66,223,155,.28);background:rgba(66,223,155,.07)}
.mini-status.online i{background:var(--green);box-shadow:0 0 8px rgba(66,223,155,.45)}
.mini-status.offline{color:#ffadb6;border-color:rgba(255,108,122,.28);background:rgba(255,108,122,.07)}
.mini-status.offline i{background:var(--red)}
.mini-status.unknown{color:#8ea5bd}
@media(max-width:1000px) and (min-width:641px){.device-btn{display:flex;justify-content:center;padding:11px}.device-top{width:auto}.device-top .name,.device-top .device-meta,.device-status-row{display:none}}
@media(max-width:640px){.device-btn{display:block;min-width:170px}.device-top .name,.device-top .device-meta{display:inline}.device-status-row{display:flex;margin-left:18px}}


/* v1.0.5 — separate MikroTik Server management page */
.brand-link{text-decoration:none;color:inherit}.side-nav{display:grid;gap:6px;margin:4px 0 18px}.side-nav-item{display:flex;align-items:center;gap:10px;text-decoration:none;color:#9bb1c9;border:1px solid transparent;border-radius:11px;padding:10px 11px;font-size:13px;font-weight:700}.side-nav-item:hover,.side-nav-item.active{background:#10233b;border-color:#24415f;color:#fff}.nav-icon{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:#0b1b2e;color:#55d6fa;font-size:13px}.sidebar-help{margin:20px 8px 0;color:#607896;font-size:12px;line-height:1.55;border-top:1px solid #152941;padding-top:16px}.page-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.page-head .title p{max-width:720px}.server-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}.server-summary>div{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--border);border-radius:14px;padding:14px}.server-summary span{display:block;color:var(--muted);font-size:11px;margin-bottom:5px}.server-summary strong{font-size:23px}.table-card{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:16px}.table-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:13px}.table-head h3{margin:0;font-size:15px}.table-head p{margin:5px 0 0;color:var(--muted);font-size:12px}.table-scroll{overflow:auto;border:1px solid #1b3048;border-radius:12px}.server-table{width:100%;border-collapse:collapse;min-width:930px}.server-table th,.server-table td{padding:12px 13px;border-bottom:1px solid #172b42;text-align:left;vertical-align:middle}.server-table th{background:#0a1727;color:#7088a3;font-size:10px;text-transform:uppercase;letter-spacing:.09em;position:sticky;top:0}.server-table tbody tr:last-child td{border-bottom:0}.server-table tbody tr:hover{background:rgba(31,58,87,.18)}.server-name{font-weight:750;font-size:13px}.server-host,.server-sub{display:block;margin-top:4px;color:#718aa6;font-size:11px}.status-badge{display:inline-flex;align-items:center;gap:6px;border:1px solid #263d59;border-radius:999px;padding:5px 8px;font-size:10px;font-weight:800;white-space:nowrap}.status-badge i{width:7px;height:7px;border-radius:50%;background:#53677d}.status-badge.online{color:#a2f0cc;border-color:rgba(66,223,155,.3);background:rgba(66,223,155,.07)}.status-badge.online i{background:var(--green);box-shadow:0 0 8px rgba(66,223,155,.4)}.status-badge.offline{color:#ffb0b9;border-color:rgba(255,108,122,.3);background:rgba(255,108,122,.07)}.status-badge.offline i{background:var(--red)}.status-badge.unknown{color:#9aadc1}.traffic-cell{font-variant-numeric:tabular-nums;font-size:11px;line-height:1.55}.traffic-cell .rx-text{color:#73e4ff}.traffic-cell .tx-text{color:#7ce9b7}.action-row{display:flex;gap:6px;flex-wrap:wrap}.small-btn{border:1px solid #2a4563;background:#0b1a2c;color:#a9c1d9;border-radius:8px;padding:6px 8px;font-size:10px;font-weight:800;cursor:pointer}.small-btn:hover{background:#17304d;color:#fff}.small-btn.test{color:#8be6ff}.table-empty{text-align:center!important;color:#7088a3;padding:28px!important}.table-note{color:#6f89a5;font-size:10px}.primary-btn{font:inherit}.secondary-btn{font:inherit}
@media(max-width:1000px){.side-nav-item span:last-child{display:none}.side-nav-item{justify-content:center;padding:10px}.sidebar-help{display:none}.server-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.page-head{align-items:flex-start}}
@media(max-width:640px){.side-nav{display:flex;margin:0;gap:6px}.side-nav-item{min-width:46px}.page-head{flex-direction:column}.page-head .primary-btn{width:100%}.server-summary{grid-template-columns:1fr 1fr}.table-card{padding:12px}.table-head{align-items:flex-start}.main{padding-top:14px}}

/* v1.0.6 — interface discovery + multi-interface monitoring */
.small-btn.view{color:#9ef3c9;border-color:#2c5c4b}.small-btn.view:hover{background:#123629}.no-monitor{color:#d69b73}.if-chip-row{display:flex;gap:5px;flex-wrap:wrap;max-width:230px}.if-chip,.if-more,.type-pill{display:inline-flex;align-items:center;border:1px solid #29435f;background:#0a1828;color:#a9c7e3;border-radius:999px;padding:3px 7px;font-size:9px;font-weight:750;line-height:1.2}.if-more{color:#7fe3ff}.interface-panel{width:min(920px,100%)}.interface-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.interface-statuses{display:flex;gap:7px;flex-wrap:wrap}.interface-table-wrap{overflow:auto;border:1px solid #1b3048;border-radius:12px;max-height:52vh}.interface-table{width:100%;border-collapse:collapse;min-width:690px}.interface-table th,.interface-table td{padding:11px 12px;border-bottom:1px solid #172b42;text-align:left;vertical-align:middle}.interface-table th{position:sticky;top:0;z-index:2;background:#0a1727;color:#7088a3;font-size:10px;text-transform:uppercase;letter-spacing:.08em}.interface-table tr:last-child td{border-bottom:0}.interface-table tbody tr:hover{background:rgba(31,58,87,.18)}.monitor-check{display:inline-grid;place-items:center;width:34px;height:34px;cursor:pointer}.monitor-check input{width:17px;height:17px;accent-color:#25b9e7}.monitor-check input:disabled{cursor:not-allowed;opacity:.45}.link-state{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:800;color:#8ea4bb}.link-state i{width:7px;height:7px;border-radius:50%;background:#566a80}.link-state.up{color:#9aefc8}.link-state.up i{background:var(--green);box-shadow:0 0 8px rgba(66,223,155,.4)}.link-state.down{color:#d9a6aa}.link-state.down i{background:#8c5660}.interface-hint{color:#7088a3;font-size:11px;line-height:1.55;margin-top:11px}.type-pill{color:#a6dcf3}.status-badge.unknown{color:#9aadc1}
@media(max-width:640px){.interface-toolbar{align-items:flex-start}.interface-panel{padding:14px}.interface-table-wrap{max-height:46vh}}
.chart-title-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.chart-title-tools h3{margin:0}.interface-select{border:1px solid #29435f;background:#0a1727;color:#c7d9ea;border-radius:9px;padding:7px 10px;font-size:11px;max-width:260px;outline:none}.interface-select:focus{border-color:#3c7cad;box-shadow:0 0 0 3px rgba(51,214,255,.08)}.interface-select:disabled{opacity:.6}
@media(max-width:640px){.chart-title-tools{width:100%}.interface-select{max-width:100%;width:100%}}

/* v1.0.7 — collector health + consistent live status */
.top-statuses{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.collector-pill{display:inline-flex;align-items:center;gap:6px;border:1px solid #263d59;background:#0a1626;color:#9aadc1;border-radius:999px;padding:8px 10px;font-size:11px;font-weight:750}.collector-pill i{width:7px;height:7px;border-radius:50%;background:#53677d}.collector-pill.running{color:#9aefc8;border-color:rgba(66,223,155,.28);background:rgba(66,223,155,.07)}.collector-pill.running i{background:var(--green);box-shadow:0 0 8px rgba(66,223,155,.45)}.collector-pill.stopped{color:#ffd08b;border-color:rgba(255,200,97,.28);background:rgba(255,200,97,.07)}.collector-pill.stopped i{background:var(--amber)}.worker-note{display:flex;align-items:flex-start;gap:10px;border:1px solid #2b4360;background:#091726;border-radius:12px;padding:11px 12px;margin:0 0 14px;color:#9bb1c9;font-size:12px;line-height:1.5}.worker-note strong{color:#edf5ff}.worker-note .worker-dot{width:8px;height:8px;border-radius:50%;margin-top:5px;background:var(--amber);flex:0 0 auto}.worker-note.running .worker-dot{background:var(--green);box-shadow:0 0 8px rgba(66,223,155,.4)}.worker-note.error{border-color:#6a3340;background:#24131a;color:#ffc6cc}.collector-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#9fdcff;word-break:break-all}
@media(max-width:640px){.top-statuses{justify-content:flex-start}.topbar{flex-direction:column}.collector-pill,.status-pill{font-size:10px}}


/* v1.0.8 — MRTG-style per-second bars + clickable exact sample tooltip */
.chart-wrap canvas{cursor:crosshair;touch-action:manipulation;outline:none}
.chart-wrap canvas:focus{box-shadow:inset 0 0 0 1px rgba(74,155,255,.45);border-radius:8px}
.legend .rx{background:#2f74ff}.legend .tx{background:#ff3f5e}
.traffic-tooltip{position:absolute;z-index:6;min-width:170px;padding:10px 11px;border:1px solid #375574;border-radius:10px;background:rgba(5,15,27,.96);box-shadow:0 10px 28px rgba(0,0,0,.35);pointer-events:none;color:#dcecff;font-size:11px;font-variant-numeric:tabular-nums}
.traffic-tooltip[hidden]{display:none}.traffic-tooltip.show{display:block}
.traffic-tip-time{font-size:10px;color:#8fa9c4;margin-bottom:7px;padding-bottom:7px;border-bottom:1px solid #1f354d}
.traffic-tip-row{display:grid;grid-template-columns:8px 24px 1fr;align-items:center;gap:7px;margin:5px 0}.traffic-tip-row i{width:8px;height:8px;border-radius:2px}.traffic-tip-row .rx-dot{background:#2f74ff}.traffic-tip-row .tx-dot{background:#ff3f5e}.traffic-tip-row span{color:#90a9c1;font-weight:700}.traffic-tip-row strong{text-align:right;color:#f3f8ff;font-size:12px}.traffic-tip-foot{margin-top:7px;color:#627f9d;font-size:9px}
@media(max-width:640px){.traffic-tooltip{min-width:155px;padding:9px}}

/* v1.0.9 — premium six-panel customizable monitoring dashboard */
.dashboard-premium{background:radial-gradient(circle at 78% -10%,rgba(35,112,187,.12),transparent 31%),var(--bg)}
.premium-main{padding:24px 26px 34px}
.premium-topbar{margin-bottom:14px;padding:2px 2px 0}
.eyebrow{font-size:10px;letter-spacing:.17em;font-weight:850;color:#4ccff7;margin-bottom:6px}
.premium-topbar .title h2{font-size:27px;letter-spacing:-.025em}.premium-topbar .title p{max-width:820px}
.premium-status{background:rgba(11,25,42,.84);backdrop-filter:blur(8px)}
.workspace-banner{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:14px;padding:14px 16px;border:1px solid #203a57;border-radius:15px;background:linear-gradient(110deg,rgba(16,39,65,.92),rgba(9,25,43,.86));box-shadow:0 16px 42px rgba(0,0,0,.16)}
.workspace-banner>div:first-child{min-width:0}.workspace-kicker{display:block;font-size:9px;letter-spacing:.15em;color:#67d9fb;font-weight:850;margin-bottom:4px}.workspace-banner strong{font-size:15px}.workspace-banner p{margin:4px 0 0;color:#7893af;font-size:11px;line-height:1.45}
.workspace-legend{display:flex;align-items:center;gap:13px;flex-wrap:wrap;color:#91a8c0;font-size:10px;white-space:nowrap}.workspace-legend span{display:inline-flex;align-items:center;gap:6px}.workspace-legend i{display:inline-block}.rx-swatch,.tx-swatch{width:12px;height:4px;border-radius:4px}.rx-swatch{background:#2f74ff}.tx-swatch{background:#ff4262}.live-indicator i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 9px rgba(66,223,155,.45)}
.monitor-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.monitor-panel{position:relative;min-width:0;overflow:hidden;border:1px solid #203852;border-radius:17px;background:linear-gradient(180deg,rgba(16,33,55,.97),rgba(9,23,40,.98));box-shadow:0 18px 46px rgba(0,0,0,.2)}
.monitor-panel:before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,rgba(47,116,255,.85),rgba(51,214,255,.34),transparent 75%);pointer-events:none}
.monitor-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 14px 10px;border-bottom:1px solid rgba(35,57,82,.72)}
.panel-heading{display:flex;align-items:center;gap:10px;min-width:0}.panel-number{width:30px;height:30px;display:grid;place-items:center;border:1px solid #294866;border-radius:9px;background:#091a2c;color:#5ed9ff;font-size:10px;font-weight:900;letter-spacing:.04em}.panel-heading h3{margin:0;font-size:13px;letter-spacing:.01em}.panel-interface-name{margin-top:3px;color:#7892ae;font-size:10px;max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panel-interface-select{min-width:210px;max-width:300px;border:1px solid #2c4867;background:#08182a;color:#d8e7f6;border-radius:10px;padding:8px 30px 8px 10px;font-size:10px;font-weight:720;outline:none}.panel-interface-select:focus{border-color:#4c87ba;box-shadow:0 0 0 3px rgba(51,214,255,.07)}
.panel-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:10px 12px 8px}.metric-box{min-width:0;padding:9px 10px;border:1px solid #1c344e;border-radius:11px;background:rgba(7,20,35,.74)}.metric-box span{display:block;color:#7390ad;font-size:9px;text-transform:uppercase;letter-spacing:.08em;font-weight:800}.metric-box strong{display:block;margin-top:5px;color:#f0f7ff;font-size:16px;line-height:1.05;letter-spacing:-.025em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.metric-box small{display:block;margin-top:5px;color:#55718f;font-size:8px}.metric-rx{box-shadow:inset 0 2px 0 rgba(47,116,255,.65)}.metric-tx{box-shadow:inset 0 2px 0 rgba(255,66,98,.58)}
.panel-chart-toolbar{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:1px 12px 7px}.panel-ranges{display:flex;gap:4px;flex-wrap:wrap}.panel-range{border:1px solid #243d58;background:#081727;color:#7894b1;border-radius:7px;padding:5px 7px;font-size:9px;font-weight:800;cursor:pointer}.panel-range:hover{color:#dcecff;border-color:#355c82}.panel-range.active{background:#153555;color:#fff;border-color:#3471a4;box-shadow:inset 0 0 0 1px rgba(66,179,255,.08)}.panel-sample-state{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#5f7e9e;font-size:9px;text-align:right}
.panel-chart-wrap{height:250px;position:relative;margin:0 4px}.panel-chart-wrap canvas{width:100%;height:100%;display:block;cursor:crosshair;touch-action:manipulation;outline:none}.panel-chart-wrap canvas:focus{box-shadow:inset 0 0 0 1px rgba(74,155,255,.42);border-radius:8px}.panel-empty{position:absolute;inset:0;display:grid;place-items:center;color:#607d99;font-size:10px;pointer-events:none}.panel-empty[hidden]{display:none}
.panel-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 13px 11px;color:#58738f;font-size:9px;border-top:1px solid rgba(30,52,76,.48)}.panel-foot .legend{margin:0;font-size:9px}.panel-foot .legend b{width:9px}.panel-foot .legend .rx{background:#2f74ff}.panel-foot .legend .tx{background:#ff4262}
.monitor-panel .traffic-tooltip{min-width:158px;font-size:10px}.monitor-panel .traffic-tip-row strong{font-size:11px}
@media(max-width:1250px){.monitor-grid{grid-template-columns:1fr}.panel-chart-wrap{height:270px}.panel-interface-select{max-width:360px}}
@media(max-width:760px){.premium-main{padding:15px}.workspace-banner{align-items:flex-start;flex-direction:column}.workspace-legend{white-space:normal}.monitor-panel-head{align-items:flex-start;flex-direction:column}.panel-interface-select{width:100%;max-width:none}.panel-metrics{grid-template-columns:1fr 1fr}.panel-chart-toolbar{align-items:flex-start;flex-direction:column}.panel-sample-state{text-align:left}.panel-chart-wrap{height:245px}.panel-foot{align-items:flex-start;flex-direction:column}.premium-topbar .title h2{font-size:23px}}
@media(max-width:430px){.panel-metrics{grid-template-columns:1fr 1fr}.metric-box strong{font-size:14px}.panel-chart-wrap{height:230px}}

/* v1.0.10 — independent MikroTik + interface selectors per traffic panel */
.panel-selectors{display:grid;grid-template-columns:minmax(145px,.8fr) minmax(190px,1.2fr);gap:7px;min-width:390px;max-width:540px;flex:1;justify-content:end}
.panel-device-select,.panel-interface-select{width:100%;min-width:0;max-width:none;border:1px solid #2c4867;background:#08182a;color:#d8e7f6;border-radius:10px;padding:8px 30px 8px 10px;font-size:10px;font-weight:720;outline:none}
.panel-device-select:focus,.panel-interface-select:focus{border-color:#4c87ba;box-shadow:0 0 0 3px rgba(51,214,255,.07)}
.panel-device-select{border-color:#2d597a;background:linear-gradient(180deg,#0a1d31,#08182a)}
.panel-device-select:disabled,.panel-interface-select:disabled{opacity:.58;cursor:not-allowed}
@media(max-width:1250px){.panel-selectors{max-width:620px}}
@media(max-width:880px){.monitor-panel-head{align-items:flex-start;flex-direction:column}.panel-selectors{width:100%;min-width:0;max-width:none}}
@media(max-width:560px){.panel-selectors{grid-template-columns:1fr}}