[hidden]{display:none!important}
:root{--bg:#07111f;--panel:#0d1b2d;--panel2:#10243a;--line:#1e3853;--text:#eaf4ff;--muted:#8fa8c0;--primary:#20b7ff;--blue:#2764ff;--green:#25d987;--red:#ff5575;--orange:#ffb84d;--shadow:0 18px 50px rgba(0,0,0,.22)}*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:radial-gradient(circle at 70% 0,#10365a 0,#07111f 38%,#050b14 100%);color:var(--text)}a{color:inherit;text-decoration:none}.app-shell{display:flex;min-height:100vh}.sidebar{width:270px;background:rgba(5,13,24,.94);border-right:1px solid var(--line);padding:20px 16px;position:fixed;inset:0 auto 0 0;height:100vh;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column}.brand{display:flex;gap:12px;align-items:center;padding:4px 6px 20px}.brand img{width:54px;height:54px;border-radius:16px;object-fit:cover;border:1px solid #2a70ff66}.brand strong{display:block;font-size:18px}.brand small,.user-chip small,.device-cell small{display:block;color:var(--muted);margin-top:3px}.network-switch{padding:12px;border:1px solid var(--line);background:linear-gradient(180deg,#0c1e33,#091626);border-radius:16px;margin-bottom:16px}.switch-label,.eyebrow{font-size:10px;letter-spacing:2px;color:#66caff;font-weight:800}.net-btn,.net-add{display:flex;align-items:center;gap:9px;padding:10px;border-radius:10px;margin-top:6px;color:#b8cce0}.net-btn.active{background:linear-gradient(90deg,#1257b9,#0a2949);color:#fff}.net-add{font-size:12px;border-top:1px solid var(--line);margin-top:10px;padding-top:12px}.net-dot{width:10px;height:10px;border-radius:50%;display:inline-block;background:var(--primary);box-shadow:0 0 12px currentColor}.net-dot.crazy_network{color:#29d5ff;background:#29d5ff}.net-dot.smile_broadband{color:#ff5bc8;background:#ff5bc8}.sidebar nav{display:grid;gap:5px}.sidebar nav a{padding:12px 13px;border-radius:10px;color:#9bb2c9}.sidebar nav a:hover,.sidebar nav a.active{background:#102d49;color:#fff}.sidebar-bottom{position:static;left:auto;right:auto;bottom:auto;margin-top:22px;padding-bottom:4px}.user-chip{display:flex;gap:10px;align-items:center;border-top:1px solid var(--line);padding-top:14px}.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#2368ff,#18c5ff);font-weight:800}.logout{display:block;margin-top:12px;color:#ff8ca1}.main{margin-left:270px;width:calc(100% - 270px);padding:24px 28px 60px}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.topbar h1{margin:5px 0 0;font-size:28px}.top-actions{display:flex;gap:9px;align-items:center;color:var(--muted);font-size:13px}.live-dot{width:9px;height:9px;background:var(--green);border-radius:50%;box-shadow:0 0 12px var(--green)}.role-pill{padding:6px 9px;border:1px solid var(--line);border-radius:999px;background:#0b1d30;color:#bfeaff;font-size:11px}.hero{display:flex;justify-content:space-between;align-items:center;padding:24px;border:1px solid var(--line);background:linear-gradient(120deg,#0b2340,#0b1728);border-radius:20px;box-shadow:var(--shadow);margin-bottom:18px}.hero h2{margin:8px 0 4px;font-size:32px}.hero p{margin:0;color:var(--muted)}.hero-badge{padding:9px 12px;border-radius:999px;background:#0c382c;color:#6ff2b4}.hero-badge span{display:inline-block;width:8px;height:8px;background:var(--green);border-radius:50%;margin-right:7px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}.stat,.panel{background:linear-gradient(180deg,rgba(14,31,51,.96),rgba(9,22,37,.96));border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}.stat{padding:18px}.stat .label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}.num{font-size:27px;font-weight:800;margin-top:8px}.num.up{color:var(--green)}.num.down{color:var(--red)}.primary-text{color:var(--primary)}.num.compact{font-size:15px}.panel{padding:18px;margin-bottom:18px}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:15px}.panel-head h2{margin:0;font-size:18px}.muted{color:var(--muted);font-size:12px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:#10243a;color:#dff4ff;padding:9px 13px;border-radius:10px;cursor:pointer}.btn.primary{background:linear-gradient(135deg,#1169ff,#16b9ff);border-color:#299dff;color:#fff}.btn.danger{color:#ff91a5}.btn.small{padding:6px 8px;font-size:11px}.btn.full{width:100%;padding:12px}.filters{display:grid;grid-template-columns:170px minmax(220px,1fr) 155px 155px auto;gap:8px;margin-bottom:15px}.filters select,.filters input,.form-grid input,.form-grid select,.form-grid textarea,.inline input{width:100%;background:#071626;border:1px solid var(--line);color:#eaf4ff;border-radius:10px;padding:10px;outline:none}.filters select:focus,.filters input:focus,.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{border-color:#2ab7ff}.search-box{position:relative}.suggestions{position:absolute;z-index:20;left:0;right:0;top:45px;background:#0a192b;border:1px solid #245173;border-radius:12px;box-shadow:var(--shadow);overflow:hidden}.suggestions a{display:block;padding:10px 12px;border-bottom:1px solid #17324a}.suggestions a:hover{background:#123451}.suggestions span{display:block;color:var(--muted);font-size:11px;margin-top:2px}.suggest-empty{padding:12px;color:var(--muted)}.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse;min-width:880px}.table th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#7792ab;padding:11px;border-bottom:1px solid var(--line)}.table td{padding:12px 11px;border-bottom:1px solid rgba(30,56,83,.55);font-size:13px}.table tr:hover td{background:rgba(30,93,141,.08)}.device-cell{display:flex;align-items:center;gap:10px}.device-cell.big{gap:15px}.device-link{font-weight:750}.device-link:hover,.ip-link:hover{color:#53caff}.ip-link{color:#80d8ff}.devicon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-weight:900;font-size:20px;border:1px solid #ffffff20}.devicon.xl{width:62px;height:62px;font-size:32px;border-radius:18px}.devicon.wireless{background:#082f52;color:#28d9ff}.devicon.mikrotik{background:#30220a;color:#ffb94f}.devicon.switch{background:#102a25;color:#42e7a0}.devicon.olt{background:#281442;color:#d48bff}.devicon.router{background:#11244b;color:#72a5ff}.devicon.server{background:#2a1730;color:#ff78d3}.devicon.onu{background:#102d39;color:#49e0ff}.devicon.other{background:#1e2b3b;color:#d5e5f2}.status{display:inline-flex;padding:5px 8px;border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.6px}.status.up{background:#083a2a;color:#5af0a9}.status.down{background:#431626;color:#ff8198}.status.nodata{background:#293746;color:#aab9c8}.tag{font-size:11px;color:#a6c2da;background:#10263d;border:1px solid var(--line);padding:5px 7px;border-radius:7px}.down-t{color:#ff8198}.empty{text-align:center;padding:30px!important;color:var(--muted)}.device-hero{display:flex;justify-content:space-between;align-items:center;padding:20px;background:linear-gradient(120deg,#0d2945,#0a1727);border:1px solid var(--line);border-radius:20px;margin-bottom:18px}.device-hero h2{margin:5px 0;font-size:28px}.device-hero>div:last-child{display:flex;gap:10px;align-items:center}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.detail-grid div{padding:12px;border:1px solid var(--line);border-radius:12px;background:#091827}.detail-grid span{display:block;color:var(--muted);font-size:11px;margin-bottom:5px}.detail-grid b{font-size:13px}.form-panel{max-width:900px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.form-grid label{font-size:12px;color:#9fb7cb}.form-grid label input,.form-grid label select,.form-grid label textarea{display:block;margin-top:6px}.form-grid textarea{min-height:100px;resize:vertical}.wide{grid-column:1/-1}.check-list{display:flex;gap:15px;flex-wrap:wrap}.check-list label{display:flex;gap:6px;align-items:center}.inline{display:inline-flex;gap:5px;margin:2px}.inline input{width:130px;padding:6px}.network-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.network-card{padding:16px;border:1px solid var(--line);border-radius:14px;background:#0a192a}.network-card h3{display:inline;margin-left:7px}.network-card p{color:var(--muted);min-height:20px}.login-page{display:grid;place-items:center;min-height:100vh}.login-card{width:min(420px,92vw);padding:28px;background:linear-gradient(180deg,#0e243b,#071321);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);text-align:center}.login-logo{width:120px;height:120px;object-fit:cover;border-radius:30px;margin-bottom:8px}.login-card h1{margin:6px 0}.login-card p{color:var(--muted);margin-bottom:22px}.login-card form{display:grid;gap:13px;text-align:left}.login-card label{font-size:12px;color:#9fb7cb}.login-card input{display:block;width:100%;margin-top:6px;padding:11px;border:1px solid var(--line);background:#071626;color:#fff;border-radius:10px}.login-card small{display:block;color:#708aa1;margin-top:15px}.flash{padding:11px 13px;border-radius:10px;margin-bottom:14px;border:1px solid var(--line)}.flash.success{background:#073527;color:#72f0b6}.flash.error{background:#421624;color:#ff8ea3}@media(max-width:1050px){.stats{grid-template-columns:repeat(2,1fr)}.filters{grid-template-columns:1fr 2fr 1fr 1fr}.filters .btn{grid-column:1/-1}.grid-2{grid-template-columns:1fr}.network-cards{grid-template-columns:1fr}}@media(max-width:760px){.sidebar{position:static;width:100%;height:auto;min-height:auto;display:block;overflow:visible}.app-shell{display:block}.main{margin:0;width:100%;padding:16px}.sidebar-bottom{position:static;margin-top:18px}.stats{grid-template-columns:1fr 1fr}.filters,.form-grid{grid-template-columns:1fr}.wide{grid-column:auto}.topbar{align-items:flex-start}.top-actions{display:none}.hero,.device-hero{display:block}.device-hero>div:last-child{margin-top:14px}.network-cards{grid-template-columns:1fr}}

.theme-toggle{border:1px solid var(--line);background:#10243a;color:#dff4ff;padding:7px 10px;border-radius:999px;cursor:pointer;font-size:11px}.theme-toggle:hover{border-color:#39bfff}
.disabled-card{opacity:.72}
.action-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
:root[data-theme="light"]{--bg:#f4f8fc;--panel:#ffffff;--panel2:#f0f6fb;--line:#d7e2ec;--text:#152638;--muted:#64798d;--primary:#087fd0;--blue:#2459d8;--green:#0b9d61;--red:#d93455;--orange:#d98900;--shadow:0 12px 35px rgba(31,62,90,.10)}
:root[data-theme="light"] body{background:linear-gradient(135deg,#f7fbff,#eef5fb);color:var(--text)}
:root[data-theme="light"] .sidebar{background:rgba(255,255,255,.96);border-color:var(--line)}
:root[data-theme="light"] .brand strong{color:#17304a}:root[data-theme="light"] .network-switch{background:#f4f8fc;border-color:var(--line)}
:root[data-theme="light"] .net-btn{color:#526b80}:root[data-theme="light"] .net-btn.active{background:linear-gradient(90deg,#dceeff,#edf8ff);color:#0c4c7a}
:root[data-theme="light"] .sidebar nav a{color:#60768b}:root[data-theme="light"] .sidebar nav a:hover,:root[data-theme="light"] .sidebar nav a.active{background:#e7f2fb;color:#123e61}
:root[data-theme="light"] .topbar h1,:root[data-theme="light"] h2,:root[data-theme="light"] h3{color:#18344d}
:root[data-theme="light"] .hero,:root[data-theme="light"] .stat,:root[data-theme="light"] .panel{background:#fff;border-color:var(--line);box-shadow:var(--shadow)}
:root[data-theme="light"] .hero{background:linear-gradient(120deg,#fff,#f2f8fd)}
:root[data-theme="light"] .filters select,:root[data-theme="light"] .filters input,:root[data-theme="light"] .form-grid input,:root[data-theme="light"] .form-grid select,:root[data-theme="light"] .form-grid textarea,:root[data-theme="light"] .inline input{background:#fff;color:#1b3146;border-color:var(--line)}
:root[data-theme="light"] .table th{color:#6d8295}:root[data-theme="light"] .table td{border-color:#e5edf4}:root[data-theme="light"] .table tr:hover td{background:#f4f9fd}
:root[data-theme="light"] .suggestions{background:#fff;border-color:#c8dbe9}:root[data-theme="light"] .suggestions a{border-color:#e4edf4}:root[data-theme="light"] .suggestions a:hover{background:#eef7fd}
:root[data-theme="light"] .suggestions span,:root[data-theme="light"] .muted{color:#6b8093}:root[data-theme="light"] .btn{background:#f4f8fc;color:#1b405d;border-color:#d4e1eb}:root[data-theme="light"] .btn.primary{background:linear-gradient(135deg,#176fe0,#0ca9df);color:#fff}
:root[data-theme="light"] .detail-grid div,:root[data-theme="light"] .network-card{background:#f7fbfe;border-color:var(--line)}
:root[data-theme="light"] .device-hero{background:linear-gradient(120deg,#fff,#eef7fd);border-color:var(--line)}
:root[data-theme="light"] .login-page{background:linear-gradient(135deg,#f7fbff,#eaf3fa)}:root[data-theme="light"] .login-card{background:#fff;border-color:var(--line)}:root[data-theme="light"] .login-card input{background:#fff;color:#17304a;border-color:var(--line)}
:root[data-theme="light"] .role-pill{background:#edf6fc;color:#19567e;border-color:#d3e4ef}.theme-toggle{white-space:nowrap}

/* v3.2 layout/click fixes */
.sidebar nav{flex:0 0 auto}.sidebar .network-switch{flex:0 0 auto}.sidebar-bottom{flex:0 0 auto}.top-actions{position:relative;z-index:50}.theme-toggle{position:relative;z-index:60;pointer-events:auto;user-select:none}.main,.topbar{position:relative}.sidebar a,.sidebar button{position:relative;z-index:2}

/* v3.3 dashboard refresh + clickable device cards */
.stat-click{
  width:100%;
  text-align:left;
  color:inherit;
  cursor:pointer;
  font:inherit;
  transition:transform .15s ease,border-color .15s ease,background .15s ease;
}
.stat-click:hover{transform:translateY(-2px);border-color:#2b83bd;background:linear-gradient(180deg,rgba(16,39,64,.98),rgba(10,27,45,.98))}
.stat-hint{display:block;margin-top:6px;color:var(--muted);font-size:10px}
.refresh-control{position:relative}
.refresh-toggle{border:1px solid var(--line);background:#10243a;color:#dff4ff;padding:7px 10px;border-radius:999px;cursor:pointer;font-size:11px;white-space:nowrap}
.refresh-toggle:hover{border-color:#39bfff}
.refresh-menu{position:absolute;right:0;top:40px;z-index:100;min-width:150px;padding:6px;background:#0a192b;border:1px solid #245173;border-radius:12px;box-shadow:var(--shadow)}
.refresh-menu button{display:block;width:100%;padding:9px 10px;border:0;border-radius:8px;background:transparent;color:#dff4ff;text-align:left;cursor:pointer}
.refresh-menu button:hover{background:#123451}
.device-list-modal[hidden]{display:none}
.device-list-modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px}
.device-list-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.68);backdrop-filter:blur(3px)}
.device-list-dialog{position:relative;width:min(720px,94vw);max-height:80vh;overflow:hidden;padding:18px;background:linear-gradient(180deg,#0e2136,#091827);border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 80px rgba(0,0,0,.45)}
.device-list-body{max-height:62vh;overflow:auto}
.device-list-items{display:grid;gap:7px}
.device-list-item{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:12px;background:#0a192a}
.device-list-item:hover{background:#102d49;border-color:#2b83bd}
.device-list-main{flex:1;min-width:0}
.device-list-main b,.device-list-main small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.device-list-main small{color:var(--muted);margin-top:3px}
body.modal-open{overflow:hidden}
:root[data-theme="light"] .refresh-toggle{background:#edf6fc;color:#19567e;border-color:#d3e4ef}
:root[data-theme="light"] .refresh-menu{background:#fff;border-color:var(--line)}
:root[data-theme="light"] .refresh-menu button{color:#24445d}
:root[data-theme="light"] .refresh-menu button:hover{background:#eef7fd}
:root[data-theme="light"] .device-list-dialog{background:#fff}
:root[data-theme="light"] .device-list-item{background:#f7fbfe}
:root[data-theme="light"] .device-list-item:hover{background:#eef7fd}
@media(max-width:760px){
  .device-list-modal{padding:12px}
  .device-list-dialog{max-height:88vh}
}
/* v4 live monitoring, activity log and Telegram */
.status-led{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:6px;background:currentColor;box-shadow:0 0 8px currentColor;vertical-align:middle}
.status.disabled{background:#46370d;color:#ffd35a}.status.disabled .status-led{color:#ffd35a;background:#ffd35a}
.status.up .status-led{color:#36ed9b;background:#36ed9b}.status.down .status-led{color:#ff4f70;background:#ff4f70}.status.nodata .status-led{color:#aab9c8;background:#aab9c8}
.notification-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:36px;height:32px;border:1px solid var(--line);border-radius:999px;background:#0b1d30;color:#dff4ff;font-size:15px}.notification-btn:hover{border-color:#39bfff}.notification-badge{position:absolute;right:-4px;top:-5px;min-width:16px;height:16px;padding:0 4px;border-radius:99px;background:#1a3549;color:#9db6ca;font-size:9px;display:grid;place-items:center}.notification-badge.has-unread{background:#ef365a;color:#fff;box-shadow:0 0 12px #ef365a}
.ping-btn{min-width:68px}.event-pill{display:inline-flex;padding:5px 8px;border-radius:8px;font-size:10px;font-weight:800;text-transform:uppercase}.event-pill.down,.event-pill.down_reminder{background:#421624;color:#ff8198}.event-pill.up{background:#073527;color:#72f0b6}.activity-message{margin:0;white-space:pre-wrap;font:11px/1.45 Segoe UI,Arial,sans-serif;color:#bcd1e3;max-width:360px}.activity-table{min-width:1120px}.activity-filters{grid-template-columns:minmax(220px,1fr) 140px 145px 125px 145px 125px auto auto}
.telegram-token{font-family:Consolas,monospace}
@media(max-width:1050px){.activity-filters{grid-template-columns:1fr 1fr 1fr 1fr}.activity-filters .btn{grid-column:auto}}
:root[data-theme="light"] .notification-btn{background:#edf6fc;color:#19567e;border-color:#d3e4ef}:root[data-theme="light"] .notification-badge{background:#dbeaf4;color:#567187}:root[data-theme="light"] .notification-badge.has-unread{background:#ef365a;color:#fff}:root[data-theme="light"] .activity-message{color:#38536a}