:root{--ink:#102033;--muted:#6c7c90;--primary:#1769e0;--primary2:#14a3e2;--navy:#071727;--panel:#fff;--bg:#f4f7fb;--border:#e5ebf3;--green:#18a66a;--orange:#f59e0b;--purple:#7c3aed}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--bg);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}a{text-decoration:none}.brand{display:flex;align-items:center;gap:.7rem;color:inherit;font-weight:800;font-size:1.25rem}.brand small{display:block;font-size:.58rem;font-weight:600;color:#88a2bd;letter-spacing:.08em}.brand-mark{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary2));box-shadow:0 8px 24px #1769e045}.sidebar{position:fixed;inset:0 auto 0 0;width:260px;background:linear-gradient(180deg,#071827,#0b2237);padding:1.5rem 1rem;color:#dce9f8;flex-direction:column;z-index:1040}.sidebar .brand{padding:0 .6rem 1.3rem}.sidebar nav{overflow:auto;flex:1}.sidebar nav>a,.sidebar-bottom a{display:flex;align-items:center;gap:.75rem;color:#9db2c8;padding:.68rem .8rem;border-radius:10px;margin:.1rem 0;font-weight:600;font-size:.92rem}.sidebar nav>a:hover,.sidebar nav>a.active{color:#fff;background:#ffffff10}.sidebar i{font-size:1.05rem}.nav-label{font-size:.66rem;text-transform:uppercase;letter-spacing:.13em;color:#57728d;padding:1rem .8rem .35rem}.sidebar-bottom{border-top:1px solid #ffffff10;padding-top:.7rem}.main-content{margin-left:260px;padding:1.5rem 2rem 2rem;min-height:100vh}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.topbar h1{font-size:1.85rem;margin:.1rem 0;font-weight:800}.eyebrow{font-size:.68rem;letter-spacing:.11em;font-weight:800;color:#7890a8}.top-actions{display:flex;align-items:center;gap:.8rem}.subscription-pill{padding:.58rem .85rem;border-radius:999px;background:#eaf3ff;color:#1558b8;font-weight:700;font-size:.82rem}.subscription-pill.warning{background:#fff4df;color:#a86600}.avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#10263d;color:#fff;font-weight:800}.mobile-top{height:66px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:.7rem 1rem;position:sticky;top:0;z-index:1030}.mobile-nav{display:flex;flex-direction:column}.mobile-nav a{padding:.8rem;color:var(--ink);font-weight:650;border-bottom:1px solid var(--border)}.welcome-card{background:radial-gradient(circle at 85% 10%,#2caef8 0,#1769e0 34%,#102b55 100%);color:#fff;border-radius:22px;padding:1.7rem 1.8rem;display:flex;justify-content:space-between;align-items:center;box-shadow:0 18px 38px #163f7d2b}.welcome-card h2{font-size:1.65rem;margin:.25rem 0}.welcome-card p{margin:0;color:#d7e8ff}.quick-hero .btn{font-weight:700}.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-top:1.25rem}.metric-grid.one-line{grid-template-columns:minmax(280px,420px)}.metric-card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:1.2rem;display:flex;gap:1rem;align-items:center;box-shadow:0 8px 24px #1d3b5a0a}.metric-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:1.25rem}.metric-icon.green{background:#e6f7ef;color:var(--green)}.metric-icon.blue{background:#e9f2ff;color:var(--primary)}.metric-icon.orange{background:#fff4df;color:var(--orange)}.metric-icon.purple{background:#f1eaff;color:var(--purple)}.metric-card small,.metric-card em{display:block}.metric-card small{font-size:.66rem;font-weight:800;color:#8a9aab;letter-spacing:.08em}.metric-card strong{font-size:1.7rem;display:block;line-height:1.1;margin:.15rem 0}.metric-card em{font-size:.74rem;color:var(--muted);font-style:normal}.panel{background:#fff;border:1px solid var(--border);border-radius:18px;padding:1.25rem;box-shadow:0 8px 25px #1b3b590a}.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.panel h3,.panel-head h3{font-size:1.05rem;font-weight:800;margin:0}.panel p,.panel-head p{color:var(--muted);font-size:.86rem;margin:.25rem 0 0}.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.85rem}.quick-grid a{border:1px solid var(--border);border-radius:15px;padding:1rem;color:var(--ink);display:grid;grid-template-columns:40px 1fr;column-gap:.7rem;align-items:center}.quick-grid i{grid-row:1/3;font-size:1.2rem;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:#eef5ff;color:var(--primary)}.quick-grid b{font-size:.9rem}.quick-grid span{font-size:.72rem;color:var(--muted)}.status-row,.plan-rank,.router-card,.security-row{display:flex;align-items:center;gap:.75rem;padding:.75rem 0;border-bottom:1px solid var(--border)}.status-row span:first-child{flex:1;display:flex;gap:.6rem}.status-dot{font-size:.7rem;border-radius:999px;background:#f1f3f6;color:#68798a;padding:.35rem .55rem}.status-dot.online{background:#e4f7ee;color:#138453}.plan-rank{justify-content:space-between}.table{--bs-table-bg:transparent;margin-bottom:0}.table thead th{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:#7a8a9c;border-bottom-color:var(--border);white-space:nowrap}.table td{border-bottom-color:#edf1f5;font-size:.86rem}.voucher-code{background:#eef5ff;color:#165abb;padding:.35rem .5rem;border-radius:7px;font-weight:800}.empty-table{text-align:center!important;padding:2.5rem!important;color:var(--muted)!important}.page-actions{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;gap:1rem}.page-actions p{margin:0;color:var(--muted)}.form-panel label{font-size:.75rem;font-weight:750;margin:.75rem 0 .3rem}.form-panel input,.form-panel select{display:block;width:100%;padding:.7rem .8rem;border:1px solid #d8e1ec;border-radius:.65rem;background:#fff}.soft-panel{background:linear-gradient(145deg,#eef6ff,#fff)}.big-icon{width:60px;height:60px;border-radius:18px;display:grid;place-items:center;background:#dcecff;color:var(--primary);font-size:1.8rem;margin-bottom:1rem}.clean-list{padding-left:1.2rem;color:#506176}.clean-list li{margin:.55rem 0}.router-symbol{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#eef5ff;color:var(--primary)}.router-card span,.router-card small{display:block;color:var(--muted)}.live-badge{background:#e8f8f0;color:#138453;padding:.45rem .7rem;border-radius:999px;font-size:.75rem;font-weight:800}.live-badge i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#18a66a;margin-right:.4rem}.subscription-hero{border-radius:22px;background:linear-gradient(135deg,#0e2a4a,#1769e0);color:#fff;padding:1.8rem;display:flex;justify-content:space-between;align-items:center}.subscription-hero h2{font-weight:800;margin:.25rem 0}.subscription-hero p{margin:0;color:#d8e8ff}.subscription-hero>i{font-size:4rem;opacity:.7}.pricing-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin-top:1.25rem}.price-card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:1.2rem;position:relative}.price-card.featured{border:2px solid var(--primary);box-shadow:0 15px 35px #1769e020}.popular{position:absolute;right:12px;top:12px;font-size:.55rem;font-weight:800;color:#fff;background:var(--primary);padding:.3rem .45rem;border-radius:999px}.price-card h3{font-size:1rem}.price-card strong{font-size:1.7rem}.price-card p,.price-card li{font-size:.76rem;color:var(--muted)}.price-card ul{padding-left:1.1rem}.topology{text-align:center;padding:2rem}.topology-node{display:inline-flex;flex-direction:column;align-items:center;gap:.25rem;border:1px solid var(--border);border-radius:15px;padding:1rem 1.5rem;min-width:170px}.topology-node i{font-size:1.5rem;color:var(--primary)}.topology-node small,.topology-node em{font-size:.7rem;color:var(--muted);font-style:normal}.topology-line{width:2px;height:35px;background:#bccce0;margin:auto}.topology-branches{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}.topology-node.router{margin-top:35px}.good-state{text-align:center;padding:2.2rem;color:#49705f}.good-state i{display:block;font-size:2.2rem;color:var(--green);margin-bottom:.5rem}.good-state b,.good-state span{display:block}.security-row>div{flex:1}.security-row span{display:block;font-size:.75rem;color:var(--muted)}.settings-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.settings-grid div{padding:1rem;border:1px solid var(--border);border-radius:12px}.settings-grid small,.settings-grid b{display:block}.settings-grid small{color:var(--muted)}.support-card{height:100%;background:#fff;border:1px solid var(--border);border-radius:18px;padding:1.4rem}.support-card i{font-size:1.6rem;color:var(--primary)}.support-card h3{font-size:1rem;margin-top:1rem}.support-card p{font-size:.84rem;color:var(--muted)}.app-footer{display:flex;justify-content:space-between;color:#8a99a9;font-size:.7rem;padding:1.5rem .3rem 0}.landing{min-height:100vh;background:radial-gradient(circle at 78% 30%,#d7efff 0,#f7fbff 28%,#fff 65%)}.landing-nav{display:flex;justify-content:space-between;align-items:center;padding-top:1.2rem}.hero{padding-top:5.5rem;padding-bottom:5rem}.hero-badge,.trial-badge{display:inline-flex;gap:.4rem;align-items:center;background:#eaf3ff;color:#1558b8;border-radius:999px;padding:.45rem .7rem;font-size:.72rem;font-weight:800}.hero h1{font-size:clamp(3rem,6vw,5.5rem);line-height:.95;letter-spacing:-.055em;font-weight:850;margin:1.2rem 0}.hero h1 span{color:var(--primary)}.hero p{font-size:1.05rem;color:#607287;max-width:600px}.hero-checks{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.5rem;font-size:.8rem;color:#4d657c}.hero-checks i{color:var(--green)}.hero-dashboard{background:#071827;color:#fff;border-radius:24px;padding:1.25rem;transform:rotate(1.5deg);box-shadow:0 30px 70px #17395c35}.mini-head{display:flex;justify-content:space-between}.live-dot{font-size:.65rem;background:#1b513c;color:#a8f0cb;padding:.3rem .55rem;border-radius:999px}.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin:1rem 0}.mini-grid div{background:#0d2a43;border:1px solid #173955;border-radius:14px;padding:1rem}.mini-grid small,.mini-grid strong,.mini-grid em{display:block}.mini-grid small{font-size:.55rem;color:#79a1c2}.mini-grid strong{font-size:1.5rem}.mini-grid em{font-size:.65rem;color:#8db1cd;font-style:normal}.mini-chart{height:130px;display:flex;align-items:end;gap:.55rem;padding:.8rem;background:#0a2238;border-radius:14px}.mini-chart span{flex:1;border-radius:5px 5px 0 0;background:linear-gradient(#2aaeff,#1769e0)}.feature-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;padding-bottom:4rem}.feature-strip div{background:#fff;border:1px solid #e6edf5;border-radius:18px;padding:1.25rem}.feature-strip i{font-size:1.4rem;color:var(--primary);margin-right:.7rem}.feature-strip b{font-size:.95rem}.feature-strip span{display:block;margin-left:2.2rem;color:var(--muted);font-size:.76rem}.auth-page{min-height:100vh;display:grid;place-items:center;padding:2rem;background:radial-gradient(circle at 20% 10%,#dceeff,#f7faff 45%,#fff)}.auth-card{width:min(430px,100%);background:#fff;border:1px solid var(--border);border-radius:24px;padding:2rem;box-shadow:0 25px 60px #163d6720}.auth-card.wide{width:min(650px,100%)}.auth-card h2{text-align:center;font-weight:800}.auth-card>p{text-align:center;color:var(--muted)}.auth-card label{font-size:.75rem;font-weight:750;margin:.8rem 0 .3rem}.auth-bottom{text-align:center;margin-top:1rem;font-size:.82rem;color:var(--muted)}.auth-card input{border-radius:.7rem;padding:.75rem}.trial-badge{display:table;margin:0 auto 1rem}.empty-mini{color:var(--muted);font-size:.85rem;padding:1rem 0}.badge.text-bg-success-subtle{background:#e6f7ef!important;color:#138453!important}@media(max-width:1199px){.metric-grid{grid-template-columns:repeat(2,1fr)}.pricing-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:991px){.main-content{margin-left:0;padding:1rem}.topbar{margin-top:.5rem}.pricing-grid{grid-template-columns:repeat(2,1fr)}.hero{padding-top:3rem}.feature-strip{grid-template-columns:1fr}}@media(max-width:650px){.metric-grid,.quick-grid,.pricing-grid,.settings-grid{grid-template-columns:1fr}.welcome-card{align-items:flex-start;gap:1rem;flex-direction:column}.page-actions,.topbar{align-items:flex-start}.topbar h1{font-size:1.45rem}.subscription-pill{display:none}.main-content{padding:.85rem}.panel{padding:1rem}.hero h1{font-size:3rem}.hero-dashboard{transform:none}.app-footer{flex-direction:column;gap:.3rem}.page-actions{flex-direction:column}.feature-strip{padding-bottom:2rem}}

/* TapTap two-way sync + live physical topology */
.section-title{font-size:1.05rem;font-weight:850;margin:0 0 .2rem}.sync-btn i{margin-right:.35rem}.sync-explainer{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.sync-explainer>div{display:flex;gap:.9rem;align-items:flex-start;background:#fff;border:1px solid var(--border);border-radius:16px;padding:1rem}.sync-explainer>div>i{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#eaf3ff;color:var(--primary);font-size:1.2rem}.sync-explainer span{flex:1}.sync-explainer b,.sync-explainer small{display:block}.sync-explainer b{font-size:.86rem}.sync-explainer small{font-size:.72rem;color:var(--muted);margin-top:.15rem;line-height:1.4}.router-card-rich{align-items:flex-start}.router-main{flex:1;min-width:0}.router-title-line{display:flex;align-items:center;gap:.6rem}.router-title-line .status-dot{display:inline-block}.router-mini-stats{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.45rem}.router-mini-stats span{font-size:.68rem;color:#66798c}.router-mini-stats i{color:var(--primary);margin-right:.25rem}.router-error{color:#b45309!important;margin-top:.3rem}.router-actions{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}.router-actions form{margin:0}

.topology-actions{align-items:flex-end}.topology-router-panel{padding:1.35rem}.router-topology-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem}.router-identity{display:flex;align-items:center;gap:.9rem}.router-identity h3{font-size:1.2rem;margin:.1rem 0}.router-identity p{margin:0}.router-symbol.xl{width:54px;height:54px;border-radius:16px;font-size:1.35rem}.topology-health{text-align:right}.topology-health small{display:block;color:var(--muted);font-size:.7rem;margin-top:.35rem}.topology-health .status-dot i{font-size:.45rem;margin-right:.25rem}
.network-flow{display:flex;align-items:center;gap:.85rem;padding:1rem;background:linear-gradient(135deg,#f7fbff,#edf5ff);border:1px solid #dfeaf8;border-radius:18px;overflow:auto}.flow-node{min-width:130px;border:1px solid #dce7f3;background:#fff;border-radius:14px;padding:.8rem;text-align:center;box-shadow:0 7px 18px #17395b0a}.flow-node i{display:block;color:var(--primary);font-size:1.25rem;margin-bottom:.25rem}.flow-node b,.flow-node small,.flow-node em{display:block}.flow-node b{font-size:.76rem}.flow-node small,.flow-node em{font-size:.62rem;color:var(--muted);font-style:normal}.flow-line{min-width:44px;height:3px;background:#b8cae1;position:relative}.flow-line span{position:absolute;right:-3px;top:-3px;width:9px;height:9px;border-radius:50%;background:var(--primary)}.neighbor-flow{display:flex;gap:.65rem}.neighbor-node{min-width:145px}.neighbor-node.wifi i{color:#7c3aed}.neighbor-node.switch i{color:#f59e0b}.section-divider{display:flex;align-items:center;gap:.75rem;margin:1.25rem 0 .7rem;color:#6a7d90;font-size:.67rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em}.section-divider:before,.section-divider:after{content:"";height:1px;background:var(--border);flex:1}
.mikrotik-chassis{background:linear-gradient(180deg,#2d3540,#171d24);border:1px solid #0c1117;border-radius:18px;padding:1rem 1.1rem;box-shadow:inset 0 1px #ffffff18,0 18px 30px #10203318;color:#e6edf5}.chassis-brand{display:flex;align-items:center;gap:.6rem}.brand-mark.small{width:31px;height:31px;border-radius:9px}.chassis-brand b,.chassis-brand small{display:block}.chassis-brand small{color:#8fa2b5;font-size:.62rem}.chassis-leds{margin:.9rem 0 .35rem;display:flex;align-items:center;gap:.3rem;font-size:.55rem;color:#8fa2b5}.led{display:inline-block;width:8px;height:8px;border-radius:50%;background:#3b4652;box-shadow:inset 0 0 3px #000}.led.on{background:#4ade80;box-shadow:0 0 8px #4ade80aa}.port-bank{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.75rem}.router-port{background:#11171e;border:1px solid #46515d;border-radius:11px;padding:.65rem;min-height:150px;position:relative;transition:.2s}.router-port.active{border-color:#2bbf79;box-shadow:inset 0 0 0 1px #2bbf7935}.router-port.disabled{opacity:.45}.port-label{text-align:center;font-size:.65rem;font-weight:800;color:#becbd7;margin-bottom:.35rem}.rj45{height:45px;background:#05080b;border:2px solid #626e79;border-radius:5px 5px 9px 9px;padding:6px;display:flex;gap:2px;align-items:flex-start;justify-content:center;box-shadow:inset 0 5px 12px #000}.rj45 span{width:4px;height:13px;background:#c5a54b;border-radius:1px}.port-leds{display:flex;justify-content:space-between;margin:.35rem 5px 0}.port-leds i{width:6px;height:6px;border-radius:50%;background:#45515d}.router-port.active .port-leds i:first-child{background:#46e189;box-shadow:0 0 6px #46e189}.router-port.active .port-leds i:last-child{background:#f8ce46}.port-state{text-align:center;font-size:.57rem;text-transform:uppercase;letter-spacing:.05em;margin:.25rem 0 .45rem;color:#7f91a2}.router-port.active .port-state{color:#67dda0}.port-connected{display:flex;flex-direction:column;gap:.25rem}.device-pill{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#242e38;color:#b8c7d5;border-radius:7px;padding:.25rem .35rem;font-size:.58rem}.device-pill.network{background:#153a5d;color:#b9ddff}.device-pill i{margin-right:.25rem}.port-connected small{font-size:.55rem;color:#75889a;text-align:center}
.topology-subpanel{border:1px solid var(--border);border-radius:15px;padding:1rem;background:#fbfdff}.subpanel-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:.65rem}.subpanel-title h4{font-size:.88rem;font-weight:800;margin:0}.subpanel-title span{font-size:.62rem;background:#edf3fa;color:#60758a;padding:.3rem .45rem;border-radius:999px}.neighbor-row{display:flex;align-items:center;gap:.7rem;padding:.65rem 0;border-bottom:1px solid #edf1f5}.neighbor-row:last-child{border-bottom:0}.neighbor-row.offline{opacity:.6}.neighbor-icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:#edf5ff;color:var(--primary)}.neighbor-row b,.neighbor-row span,.neighbor-row small{display:block}.neighbor-row b{font-size:.78rem}.neighbor-row span,.neighbor-row small{font-size:.62rem;color:var(--muted)}.neighbor-connection{text-align:right}.neighbor-connection .status-dot{display:inline-block;color:#68798a}.neighbor-connection .status-dot.online{color:#138453}.neighbor-connection em{display:block;font-size:.55rem;color:#1769e0;font-style:normal;margin-top:.2rem}.wifi-client-row{display:flex;gap:.6rem;align-items:center;padding:.65rem 0;border-bottom:1px solid #edf1f5}.wifi-client-row>i{width:34px;height:34px;border-radius:10px;background:#f0ebff;color:#7c3aed;display:grid;place-items:center}.wifi-client-row>div{flex:1}.wifi-client-row b,.wifi-client-row small{display:block}.wifi-client-row b{font-size:.73rem}.wifi-client-row small,.wifi-client-row>span{font-size:.6rem;color:var(--muted)}.good-state.compact{padding:1.1rem}.good-state.compact i{font-size:1.5rem}.managed-link-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:.8rem}.managed-link-card{display:grid;grid-template-columns:1fr 110px 1fr;align-items:center;gap:.5rem;background:#f8fbff;border:1px solid var(--border);border-radius:14px;padding:.75rem}.node-chip{background:#fff;border:1px solid #dce6f0;border-radius:10px;padding:.55rem;font-size:.7rem;font-weight:750;text-align:center}.node-chip i{color:var(--primary);margin-right:.3rem}.link-wire{height:2px;background:#c7d3df;position:relative;text-align:center}.link-wire.live{background:#39b77b}.link-wire i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#f8fbff;color:#71859a;padding:0 .25rem}.link-wire small{position:absolute;left:50%;bottom:7px;transform:translateX(-50%);white-space:nowrap;font-size:.55rem;color:var(--muted)}
@media(max-width:1199px){.sync-explainer{grid-template-columns:1fr}.network-flow{align-items:stretch}.port-bank{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}}@media(max-width:700px){.router-card-rich{flex-wrap:wrap}.router-actions{width:100%;padding-left:59px}.router-topology-head{align-items:flex-start}.network-flow{flex-direction:column}.flow-line{height:28px;width:3px;min-width:3px;margin:auto}.flow-line span{right:-3px;top:auto;bottom:-3px}.neighbor-flow{width:100%;overflow:auto}.managed-link-card{grid-template-columns:1fr}.link-wire{width:2px;height:30px;margin:auto}.link-wire small{bottom:auto;left:10px;top:50%;transform:translateY(-50%)}.port-bank{grid-template-columns:repeat(2,minmax(0,1fr))}.topology-router-panel{padding:.9rem}}

/* =========================================================
   TapTap v3 — MikroTik Control Center / Network Studio
   ========================================================= */
.control-page-head{align-items:flex-end}.control-kicker{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .65rem;border-radius:999px;background:#eaf3ff;color:#1d63c6;font-size:.7rem;font-weight:800}.control-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.control-metrics>div{background:#fff;border:1px solid var(--border);border-radius:16px;padding:1rem;display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:.75rem;align-items:center}.control-metrics .metric-icon{grid-row:1/3;width:44px;height:44px;border-radius:13px;background:#edf5ff;color:var(--primary);display:grid;place-items:center;font-size:1.15rem}.control-metrics b{font-size:1rem}.control-metrics small{color:var(--muted);font-size:.68rem}
.lb-panel{overflow:hidden;background:linear-gradient(140deg,#fff 55%,#f2f8ff)}.lb-panel .panel-head h3 i{color:#6d28d9;margin-right:.4rem}.lb-method{border-radius:999px;background:#edf1f6;color:#5e7083;padding:.45rem .75rem;font-size:.7rem;font-weight:850}.lb-method.active{background:#e8f8ef;color:#148452}.lb-summary{display:grid;grid-template-columns:190px 1fr;gap:1.4rem;align-items:center;padding:1rem;border-radius:18px;background:#101927;color:#fff;position:relative;overflow:hidden}.lb-summary:after{content:"";position:absolute;width:240px;height:240px;border-radius:50%;background:#2775ff1a;right:-80px;top:-120px}.lb-core{position:relative;z-index:1;text-align:center;border:1px solid #ffffff20;border-radius:15px;padding:1rem;background:#ffffff0b}.lb-core>i{display:block;font-size:1.8rem;color:#5aa2ff;margin-bottom:.35rem}.lb-core b,.lb-core small{display:block}.lb-core small{font-size:.62rem;color:#93a8bd;margin-top:.25rem;line-height:1.45}.lb-paths{display:grid;gap:.75rem;position:relative;z-index:1}.wan-link{display:grid;grid-template-columns:90px 1fr;align-items:center}.traffic-wire{height:4px;background:#344257;position:relative;overflow:visible;border-radius:99px}.wan-link.online .traffic-wire{background:#1c5f4a}.traffic-pulse{position:absolute;width:9px;height:9px;top:-3px;left:0;border-radius:50%;background:#5ba6ff;box-shadow:0 0 8px #5ba6ff;opacity:.65;animation:trafficMove 2.2s linear infinite}.wan-link.online .traffic-pulse{background:#49dc93;box-shadow:0 0 8px #49dc93}.traffic-pulse.p2{animation-delay:.7s}.traffic-pulse.p3{animation-delay:1.4s}.wan-link:not(.busy) .traffic-pulse{animation-duration:4.5s;opacity:.25}.wan-link.busy .traffic-pulse{animation-duration:calc(2.3s / var(--traffic-scale,1));opacity:1}@keyframes trafficMove{0%{left:0;transform:scale(.75)}100%{left:calc(100% - 8px);transform:scale(1.15)}}.wan-card{display:grid;grid-template-columns:1fr auto;gap:.1rem .7rem;border:1px solid #ffffff16;background:#ffffff0c;border-radius:12px;padding:.65rem .75rem}.wan-card>div{display:flex;align-items:center;gap:.45rem}.wan-card b{font-size:.76rem}.wan-card i{color:#78b3ff}.wan-percent{grid-column:2;grid-row:1/3;font-size:1rem;font-weight:900;color:#79d9a8;align-self:center}.wan-card small{font-size:.59rem;color:#93a8bd}.wan-card em{grid-column:1/3;font-size:.55rem;color:#6f8194;font-style:normal}.lb-facts{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.75rem}.lb-facts span{background:#f2f6fa;border:1px solid #e2e9f0;border-radius:999px;padding:.35rem .55rem;font-size:.62rem;color:#66798b}.lb-facts b{color:#1e3349;margin-left:.25rem}
.visual-studio-head{align-items:flex-start}.studio-options{display:flex;gap:.65rem;align-items:center;flex-wrap:wrap}.studio-options .form-check{margin:0;background:#f5f8fb;border:1px solid var(--border);border-radius:10px;padding:.45rem .6rem .45rem 2.5rem;font-size:.68rem}.studio-options select{width:185px}.role-board{display:grid;grid-template-columns:repeat(4,minmax(180px,1fr));gap:.8rem}.role-zone{min-height:145px;border:1.5px dashed #cfd9e4;background:#f9fbfd;border-radius:15px;padding:.65rem;transition:.18s}.role-zone.drag-over{transform:translateY(-2px);border-color:#2672dc;background:#edf5ff;box-shadow:0 8px 24px #1d5fa214}.role-zone.saving{opacity:.5;pointer-events:none}.role-zone-head{display:flex;justify-content:space-between;align-items:center;padding:.2rem .15rem .55rem}.role-zone-head span{font-size:.7rem;font-weight:850}.role-zone-head span i{margin-right:.25rem}.role-zone-head small{font-size:.54rem;color:#9aa9b8}.role-wan{border-color:#77a7e0}.role-hotspot{border-color:#9674dc}.role-disabled{border-color:#d39191}.role-trunk{border-color:#d2a64f}.role-lan{border-color:#66b88e}.role-port-list{display:flex;flex-direction:column;gap:.45rem}.studio-port{display:grid;grid-template-columns:30px 1fr 8px;gap:.5rem;align-items:center;background:#fff;border:1px solid #dde6ee;border-radius:10px;padding:.5rem;cursor:grab;box-shadow:0 3px 10px #2748660b}.studio-port:active{cursor:grabbing}.studio-port.dragging{opacity:.4}.studio-port>i{width:30px;height:30px;border-radius:8px;background:#edf3f8;color:#5f7183;display:grid;place-items:center}.studio-port.running>i{background:#e6f8ef;color:#148452}.studio-port b,.studio-port small{display:block}.studio-port b{font-size:.69rem}.studio-port small{font-size:.55rem;color:var(--muted)}.studio-port>span{width:7px;height:7px;border-radius:50%;background:#bdc8d2}.studio-port.running>span{background:#32c27a;box-shadow:0 0 6px #32c27a99}.quick-recipes{display:flex;justify-content:space-between;gap:1rem;align-items:center;border-top:1px solid var(--border);padding-top:1rem}.quick-recipes form{display:flex;gap:.55rem;min-width:520px}.quick-recipes span{font-size:.62rem;color:var(--muted);max-width:420px;line-height:1.45}
.advanced-badge{background:#171d26;color:#fff;border-radius:999px;padding:.4rem .65rem;font-size:.64rem;font-weight:850}.resource-toolbar{display:grid;grid-template-columns:1.2fr 1.2fr auto;gap:.6rem}.resource-status{font-size:.65rem;color:var(--muted);margin:.65rem 0}.resource-table-wrap{max-height:450px;overflow:auto;border:1px solid var(--border);border-radius:12px;background:#fbfdff}.config-table{font-size:.64rem;margin:0}.config-table th{position:sticky;top:0;background:#f0f5fa!important;z-index:2;white-space:nowrap}.config-table td{max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.advanced-change{border-top:1px solid var(--border);padding-top:1rem}.advanced-change label{font-size:.64rem;font-weight:800;margin-bottom:.3rem}.advanced-warning{display:flex;gap:.7rem;align-items:flex-start;background:#fff7e8;border:1px solid #f2d69a;border-radius:12px;padding:.75rem;margin-bottom:1rem}.advanced-warning>i{font-size:1.2rem;color:#b7791f}.advanced-warning b,.advanced-warning span{display:block}.advanced-warning b{font-size:.72rem}.advanced-warning span{font-size:.62rem;color:#7c6238;line-height:1.45}.code-editor{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;background:#121924;color:#d8e6f4;border-color:#2d3947}.config-section-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}.config-section-card{border:1px solid var(--border);background:#f8fbfe;border-radius:11px;padding:.7rem;text-align:left;transition:.15s}.config-section-card:hover{border-color:#98b9dd;background:#edf5ff;transform:translateY(-1px)}.config-section-card span{float:right;background:#e2edf8;color:#35658f;border-radius:999px;padding:.15rem .35rem;font-size:.55rem}.config-section-card b,.config-section-card small{display:block}.config-section-card b{font-size:.68rem}.config-section-card small{font-size:.54rem;color:var(--muted);margin-top:.18rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.change-log>div{display:flex;gap:.65rem;padding:.65rem 0;border-bottom:1px solid #edf1f5}.change-log>div:last-child{border-bottom:0}.change-status{color:#b34b4b}.change-status.ok{color:#1f9b63}.change-log b,.change-log small,.change-log em{display:block}.change-log b{font-size:.68rem}.change-log small{font-size:.56rem;color:var(--muted)}.change-log em{font-size:.55rem;color:#ad4f4f;font-style:normal;margin-top:.2rem}.inventory-tabs{display:flex;flex-wrap:wrap;gap:.4rem}.inventory-tabs a{background:#fff;border:1px solid var(--border);border-radius:999px;padding:.4rem .65rem;text-decoration:none;color:#536b80;font-size:.65rem;font-weight:750}.inventory-tabs a:hover{background:#edf5ff;color:var(--primary)}
.network-blueprint{display:flex;align-items:center;gap:.8rem;background:linear-gradient(135deg,#0f1b2b,#14283d);border-radius:18px;padding:1rem;color:#fff;overflow:auto}.blueprint-lane{min-width:150px}.blueprint-lane.wide{min-width:420px;flex:1}.blueprint-label{display:block;font-size:.52rem;letter-spacing:.13em;color:#6f8daa;margin:0 0 .35rem .15rem}.blueprint-node{border:1px solid #ffffff19;background:#ffffff0b;border-radius:13px;padding:.7rem;text-align:center;min-width:135px}.blueprint-node>i{display:block;font-size:1.2rem;color:#66a9ff;margin-bottom:.25rem}.blueprint-node b,.blueprint-node small{display:block}.blueprint-node b{font-size:.7rem}.blueprint-node small{font-size:.55rem;color:#8ea6bc;margin-top:.12rem}.blueprint-node.child.wifi>i{color:#b79bff}.blueprint-node.child.switch>i{color:#ffca6b}.blueprint-node.child.router>i{color:#67dda0}.blueprint-arrow{color:#4f6f8d}.blueprint-children{display:flex;gap:.5rem;overflow:auto}.topology-wans{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin-top:.7rem;padding:.55rem .7rem;background:#f5f9fd;border:1px solid var(--border);border-radius:11px}.topology-wans>b{font-size:.67rem;margin-right:.3rem}.topology-wans>span{font-size:.6rem;background:#fff;border:1px solid #dbe5ef;border-radius:999px;padding:.28rem .5rem;color:#687c8e}.topology-wans>span i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#bbc6d0;margin-right:.25rem}.topology-wans>span.active i{background:#29b875}.topology-wans small{color:#9aa9b7}.port-role{display:inline-block;margin-left:.25rem;font-size:.46rem;padding:.15rem .25rem;border-radius:999px;background:#364451;color:#aebdcc;text-transform:uppercase;letter-spacing:.03em}.port-role.role-wan{background:#153c67;color:#9acbff}.port-role.role-lan{background:#173f31;color:#8de3b7}.port-role.role-hotspot{background:#35285d;color:#c9b7ff}.port-role.role-disabled{background:#4a2b2b;color:#e9a6a6}.device-path-table td,.device-path-table th{font-size:.64rem}.path-port{display:inline-flex;align-items:center;gap:.3rem;border-radius:8px;background:#edf4fb;padding:.25rem .4rem;color:#375e80;font-weight:750}
@media(max-width:1300px){.role-board{grid-template-columns:repeat(2,minmax(180px,1fr))}.config-section-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.control-metrics{grid-template-columns:repeat(2,1fr)}.lb-summary{grid-template-columns:1fr}.quick-recipes{align-items:stretch;flex-direction:column}.quick-recipes form{min-width:0}.resource-toolbar{grid-template-columns:1fr}.network-blueprint{align-items:stretch}.blueprint-arrow{display:grid;place-items:center}.blueprint-lane.wide{min-width:340px}}
@media(max-width:620px){.control-metrics,.role-board,.config-section-grid{grid-template-columns:1fr}.studio-options{width:100%}.studio-options select{width:100%}.quick-recipes form{flex-direction:column}.wan-link{grid-template-columns:55px 1fr}.blueprint-lane.wide{min-width:280px}}

/* v4 — bounded, scrollable data panels */
.panel .table-responsive:not(.no-scroll){max-height:min(62vh,620px);overflow:auto!important;scrollbar-gutter:stable;border-radius:10px}
.panel .table-responsive:not(.no-scroll) .table thead th{position:sticky;top:0;z-index:3;background:#fff!important;box-shadow:0 1px 0 var(--border)}
.scroll-list{max-height:min(58vh,560px);overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding-right:.25rem}
.scroll-list,.panel .table-responsive,.resource-table-wrap,.change-log,.role-port-list{scrollbar-width:thin;scrollbar-color:#b9c7d6 transparent}
.scroll-list::-webkit-scrollbar,.panel .table-responsive::-webkit-scrollbar,.resource-table-wrap::-webkit-scrollbar,.change-log::-webkit-scrollbar,.role-port-list::-webkit-scrollbar{width:8px;height:8px}
.scroll-list::-webkit-scrollbar-thumb,.panel .table-responsive::-webkit-scrollbar-thumb,.resource-table-wrap::-webkit-scrollbar-thumb,.change-log::-webkit-scrollbar-thumb,.role-port-list::-webkit-scrollbar-thumb{background:#b9c7d6;border-radius:999px}
.router-list-scroll{max-height:650px}.role-port-list{max-height:260px;overflow:auto;overscroll-behavior:contain}.change-log{max-height:430px;overflow:auto;overscroll-behavior:contain}

/* v4 — background synchronization monitor */
.sync-monitor{border-color:#d7e5f5;background:linear-gradient(180deg,#fff,#fbfdff)}
.sync-monitor-count{border:1px solid #dbe6f2;background:#f3f7fb;color:#536b82;border-radius:999px;padding:.35rem .65rem;font-size:.65rem;font-weight:850}
.sync-job-list{max-height:360px}.sync-job-row{display:grid;grid-template-columns:38px 1fr 48px;gap:.7rem;align-items:center;padding:.72rem .15rem;border-bottom:1px solid #edf2f6}.sync-job-row:last-child{border-bottom:0}.sync-job-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#edf4ff;color:#1769e0}.sync-job-row.status-running .sync-job-icon i,.sync-job-row.status-queued .sync-job-icon i{animation:syncSpin 1.25s linear infinite}.sync-job-row.status-success .sync-job-icon{background:#e6f8ef;color:#168857}.sync-job-row.status-failed .sync-job-icon{background:#fff0f0;color:#c44949}@keyframes syncSpin{to{transform:rotate(360deg)}}
.sync-job-main>div:first-child{display:flex;gap:.55rem;align-items:center}.sync-job-main b{font-size:.76rem}.sync-job-status{font-size:.56rem;font-weight:850;text-transform:uppercase;letter-spacing:.04em;color:#6f8397}.sync-job-phase{display:block;color:#6b7d8f;font-size:.62rem;margin:.13rem 0 .32rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sync-progress{height:5px;background:#e8eef5}.sync-progress .progress-bar{background:linear-gradient(90deg,#1769e0,#14a3e2)}.status-success .sync-progress .progress-bar{background:#22a76a}.status-failed .sync-progress .progress-bar{background:#d65353}.sync-job-percent{font-size:.68rem;text-align:right;color:#596f84}
.router-sync-pill{font-size:.54rem;font-weight:850;border-radius:999px;background:#f1f4f7;color:#718294;padding:.2rem .4rem;margin-left:.25rem}.router-sync-pill.active{background:#e8f2ff;color:#1769e0}.router-sync-pill.success{background:#e8f8f0;color:#168857}.router-sync-pill.failed{background:#fff0f0;color:#c44949}.router-sync-button:disabled{opacity:.62;cursor:wait}
@media(max-width:620px){.panel .table-responsive:not(.no-scroll){max-height:68vh}.scroll-list{max-height:62vh}.sync-job-row{grid-template-columns:32px 1fr 42px}.sync-job-phase{max-width:220px}}
.sync-global-pill{display:inline-flex;align-items:center;gap:.42rem;padding:.5rem .7rem;border-radius:999px;background:#eaf3ff;color:#1769e0;font-size:.7rem;font-weight:800}.sync-global-pill i{animation:syncSpin 1.25s linear infinite}.sync-global-pill:hover{background:#dcecff;color:#1258bd}