:root {
  --ink:#15171e;
  --muted:#858894;
  --line:#e9e9ed;
  --soft:#f5f5f7;
  --card:#fff;
  --red:#e52d40;
  --red-dark:#b91d30;
  --violet:#7656e5;
  --blue:#2e7fd9;
  --green:#1aa470;
  --amber:#e2972d;
  --sidebar:#101117;
}

*{box-sizing:border-box}
html{min-height:100%;background:var(--soft);scroll-behavior:smooth}
body{min-height:100%;margin:0;color:var(--ink);background:var(--soft);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
button,input{font:inherit}
button{color:inherit}
button:focus-visible,input:focus-visible{outline:3px solid rgba(47,128,218,.3);outline-offset:2px}
[hidden]{display:none!important}
.noscript{padding:16px;color:#fff;background:#a51e2e;text-align:center}
.app-shell{min-height:100vh}

.sidebar{position:fixed;inset:0 auto 0 0;z-index:30;display:flex;width:260px;flex-direction:column;padding:25px 18px 18px;color:#fff;background:linear-gradient(180deg,#16171e 0%,#0b0c11 100%)}
.brand{display:flex;align-items:center;gap:12px;width:100%;padding:0 9px 28px;border:0;color:#fff;background:transparent;text-align:left;cursor:pointer}
.logo-mark,.mobile-brand>span,.dialog-logo{display:grid;width:42px;height:42px;place-items:center;border-radius:13px;color:#fff;background:linear-gradient(135deg,#f24757,#b51629);box-shadow:0 8px 22px rgba(229,45,64,.24);font-size:13px;font-weight:850;letter-spacing:-.04em}
.brand>span:last-child{display:flex;flex-direction:column}
.brand strong{font-size:19px;letter-spacing:-.04em}
.brand small{margin-top:2px;color:#7e818d;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.side-nav>p{margin:4px 12px 10px;color:#61646f;font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.side-nav button{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:47px;margin:3px 0;padding:0 12px;overflow:hidden;border:0;border-radius:12px;color:#999ca7;background:transparent;cursor:pointer;font-size:12px;font-weight:650;text-align:left;transition:color .18s,background .18s,transform .18s}
.side-nav button:hover{color:#fff;background:#1c1e26;transform:translateX(2px)}
.side-nav button.is-active{color:#fff;background:#242630;box-shadow:inset 0 0 0 1px rgba(255,255,255,.035)}
.side-nav button.is-active:before{content:"";position:absolute;inset:9px auto 9px 0;width:3px;border-radius:0 4px 4px 0;background:var(--red)}
.nav-icon{display:grid;width:26px;height:26px;flex:0 0 auto;place-items:center;border:1px solid #3a3c46;border-radius:8px;color:#c5c7d0;font-size:9px;font-weight:850}
.side-nav .is-active .nav-icon{border-color:rgba(229,45,64,.45);color:#ff7a87;background:rgba(229,45,64,.11)}
.side-nav em{min-width:23px;margin-left:auto;padding:3px 6px;border-radius:10px;color:#fff;background:#343642;font-size:8px;font-style:normal;text-align:center}
.alert-dot{width:6px;height:6px;margin-left:auto;border-radius:50%;background:var(--amber);box-shadow:0 0 0 3px rgba(226,151,45,.12)}
.sidebar-foot{margin-top:auto}
.connector-card{padding:15px;border:1px solid #2a2c35;border-radius:16px;background:linear-gradient(145deg,#1e2028,#15161d)}
.connector-symbol{float:right;color:#6f727e}
.connector-card strong{display:block;font-size:11px}
.connector-card p{margin:4px 0 12px;color:#777a86;font-size:9px}
.connector-card button{width:100%;padding:9px;border:0;border-radius:9px;color:#fff;background:#32343e;cursor:pointer;font-size:9px;font-weight:750}
.connector-card button:hover{background:#3b3d48}
.profile{display:flex;align-items:center;gap:9px;margin-top:10px;padding:10px 8px}
.profile>span{display:grid;width:34px;height:34px;place-items:center;border:1px solid #3a3c47;border-radius:10px;color:#e1e2e8;background:#24262e;font-size:9px;font-weight:800}
.profile>div{display:flex;min-width:0;flex:1;flex-direction:column}
.profile strong{font-size:10px}.profile small{margin-top:2px;color:#717480;font-size:8px}.profile b{color:#686b76;font-size:9px;letter-spacing:1px}

.workspace{min-height:100vh;margin-left:260px}
.topbar{position:sticky;top:0;z-index:20;display:flex;height:68px;align-items:center;justify-content:space-between;padding:0 clamp(24px,3vw,48px);border-bottom:1px solid rgba(20,20,27,.07);background:rgba(250,250,251,.88);backdrop-filter:blur(18px)}
.breadcrumb{display:flex;align-items:center;gap:10px;color:#8a8d97;font-size:10px}.breadcrumb b{color:#c8c9ce}.breadcrumb strong{color:#343640}
.top-actions{display:flex;align-items:center;gap:9px}
.status-pill{display:flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid #e4e5e9;border-radius:9px;color:#777a84;background:#fff;font-size:9px;font-weight:700}
.status-pill i,.green-dot,.live-label i{width:6px;height:6px;border-radius:50%;background:#9a9da6}
.status-pill.is-live{border-color:#d9eee4;color:#21815f;background:#f3fbf7}.status-pill.is-live i,.green-dot,.live-label i{background:var(--green);box-shadow:0 0 0 3px rgba(26,164,112,.11)}
.icon-btn{position:relative;width:35px;height:35px;border:1px solid #e2e3e7;border-radius:9px;color:#6f727c;background:#fff;cursor:pointer;font-size:10px}
.notification-btn{font-size:7px}.notification-btn i{position:absolute;top:7px;right:7px;width:5px;height:5px;border:1px solid #fff;border-radius:50%;background:var(--red)}
.dark-button,.audit-button{border:0;border-radius:10px;color:#fff;background:var(--ink);cursor:pointer;font-size:9px;font-weight:750;transition:background .18s,transform .18s}
.dark-button{height:35px;padding:0 14px}.dark-button:hover,.audit-button:hover{background:#292c34;transform:translateY(-1px)}
.mobile-brand{display:none}
.offline-banner{position:sticky;top:68px;z-index:19;padding:8px 18px;color:#785510;background:#fff2cb;font-size:9px;text-align:center}
.page-content{max-width:1540px;margin:0 auto;padding:28px clamp(24px,3vw,48px) 64px}
.view-panel{display:none;animation:panelIn .25s ease}.view-panel.is-visible{display:block}
@keyframes panelIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.demo-banner{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:23px;padding:10px 12px 10px 15px;border:1px solid #efdfe1;border-radius:12px;background:#fff7f8}
.demo-banner div{display:flex;align-items:center;gap:9px;color:#746568;font-size:10px}.demo-banner strong{color:var(--red-dark)}.demo-banner button{padding:7px 12px;border:0;border-radius:8px;color:#fff;background:var(--red);cursor:pointer;font-size:9px;font-weight:750}
.hero,.section-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:25px;margin-bottom:24px}
.hero>div,.section-hero>div{max-width:780px}
.eyebrow{margin:0 0 7px;color:#999ca5;font-size:9px;font-weight:750;letter-spacing:.1em;text-transform:uppercase}
.hero h1,.section-hero h1{margin:0;color:#191b22;font-size:clamp(28px,3vw,41px);font-weight:750;letter-spacing:-.05em;line-height:1.07}
.hero>div>p:last-child,.section-hero>div>p:last-child{margin:9px 0 0;color:#7a7d87;font-size:11px;line-height:1.65}
.audit-button{display:flex;height:40px;align-items:center;gap:8px;padding:0 15px;white-space:nowrap}.audit-button span{font-size:15px}.audit-button b{font-size:9px}

.card{min-width:0;border:1px solid rgba(25,26,33,.075);border-radius:17px;background:var(--card);box-shadow:0 8px 26px rgba(25,27,35,.035)}
.metrics-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:14px}
.metric-card{padding:18px}
.card-heading{display:flex;align-items:center;gap:10px}.metric-icon{display:grid;width:34px;height:34px;flex:0 0 auto;place-items:center;border-radius:10px;font-size:9px;font-weight:850}.metric-icon.red{color:#d8273a;background:#fff0f2}.metric-icon.violet{color:#7255da;background:#f2efff}.metric-icon.blue{color:#2877ce;background:#ebf4ff}
.card-heading>div{display:flex;min-width:0;flex-direction:column}.card-heading small,.panel-heading small{color:#9497a0;font-size:8px;font-weight:650}.card-heading strong{margin-top:2px;font-size:11px}
.card-heading>b,.good-badge,.neutral-badge{margin-left:auto;padding:5px 7px;border-radius:7px;font-size:7px;font-weight:800}.good-badge{color:#16865d;background:#edfaf4}.neutral-badge{color:#6c6f7c;background:#f2f2f5}
.speed-grid{display:grid;grid-template-columns:1fr 1fr;margin:18px 0 14px}.speed-grid>div+div{padding-left:16px;border-left:1px solid var(--line)}.speed-grid small{display:block;margin-bottom:3px;color:#9b9da5;font-size:7px}.speed-grid strong{font-size:26px;letter-spacing:-.055em}.speed-grid span{margin-left:4px;color:#7f828c;font-size:8px;font-weight:650}
.metric-card footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:11px;border-top:1px solid #f0f0f2;color:#92949d;font-size:7px}.metric-card footer span{display:flex;align-items:center;gap:5px}.metric-card footer strong{color:#3a3c45;font-size:8px}
.wifi-signal{display:flex;height:48px;align-items:flex-end;justify-content:center;gap:4px;padding-top:10px}.wifi-signal i{display:block;width:8px;border-radius:5px 5px 2px 2px;background:linear-gradient(#876ceb,#6d4fe0)}.wifi-signal i:nth-child(1){height:9px}.wifi-signal i:nth-child(2){height:15px}.wifi-signal i:nth-child(3){height:22px}.wifi-signal i:nth-child(4){height:30px}.wifi-signal i:nth-child(5){height:36px}.wifi-signal i.muted{opacity:.14}
.signal-value{display:flex;align-items:baseline;justify-content:center;gap:6px;margin-bottom:12px}.signal-value strong{font-size:17px}.signal-value span{color:#8e919b;font-size:8px}
.backup-status{display:flex;min-height:67px;align-items:center;justify-content:space-between}.backup-status>div:first-child{display:flex;flex-direction:column}.backup-status strong{font-size:21px;letter-spacing:-.04em}.backup-status small{color:#9598a1;font-size:7px}
.cell-signal{display:flex;height:28px;align-items:flex-end;gap:3px}.cell-signal i{display:block;width:5px;border-radius:2px;background:var(--blue)}.cell-signal i:nth-child(1){height:7px}.cell-signal i:nth-child(2){height:11px}.cell-signal i:nth-child(3){height:16px}.cell-signal i:nth-child(4){height:21px}.cell-signal i:nth-child(5){height:26px}.cell-signal i.muted{background:#e5e7ec}

.middle-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(255px,.72fr);gap:14px;margin-top:14px}.traffic-card,.health-card,.recommendations-card,.active-devices-card{padding:18px}
.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:15px}.panel-heading h2{margin:3px 0 0;font-size:13px;letter-spacing:-.025em}.panel-heading .dots-button{border:0;color:#8c8f98;background:transparent;font-size:9px}
.segmented{display:flex;padding:3px;border-radius:8px;background:#f3f3f5}.segmented button{padding:5px 8px;border:0;border-radius:6px;color:#8b8d96;background:transparent;cursor:pointer;font-size:7px;font-weight:700}.segmented button.is-active{color:#2e3038;background:#fff;box-shadow:0 2px 7px rgba(20,20,25,.08)}
.traffic-total{display:flex;align-items:baseline;gap:6px;margin-top:13px}.traffic-total strong{font-size:21px;letter-spacing:-.04em}.traffic-total span{color:#9698a1;font-size:7px}.traffic-total b{margin-left:auto;color:#16865d;font-size:8px}
.chart{display:flex;height:108px;align-items:flex-end;gap:clamp(3px,.65vw,8px);margin-top:11px;padding-top:8px;border-bottom:1px solid #eeeef1;background:linear-gradient(to bottom,transparent 32%,#f4f4f6 33%,transparent 34%,transparent 65%,#f4f4f6 66%,transparent 67%)}
.chart button{position:relative;flex:1;min-width:3px;height:var(--height);padding:0;border:0;border-radius:4px 4px 1px 1px;background:linear-gradient(180deg,#ef4655,#e32437);cursor:pointer;opacity:.85;transition:opacity .16s,transform .16s}.chart button:hover,.chart button:focus{opacity:1;transform:scaleY(1.035);transform-origin:bottom}
.chart-labels{display:flex;justify-content:space-between;margin-top:7px;color:#a4a6ad;font-size:6px}.chart-legend{display:flex;gap:24px;margin-top:11px;color:#8d9099;font-size:7px}.chart-legend span{display:flex;align-items:center;gap:5px}.chart-legend i{width:6px;height:6px;border-radius:2px}.red-key{background:var(--red)}.pink-key{background:#f5b4bc}.chart-legend strong{color:#444650}
.health-card{display:flex;flex-direction:column}.health-ring{--score:331deg;position:relative;display:grid;width:112px;height:112px;margin:17px auto 13px;place-items:center;border-radius:50%;background:conic-gradient(var(--green) var(--score),#ecedf0 0)}.health-ring:after{content:"";position:absolute;inset:10px;border-radius:50%;background:#fff}.health-ring>div{position:relative;z-index:1;display:flex;align-items:baseline}.health-ring strong{font-size:30px;letter-spacing:-.06em}.health-ring span{color:#8c8f98;font-size:8px}
.health-list{display:grid;gap:8px;margin-top:auto}.health-list span{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:7px;color:#777a84;font-size:7px}.health-list i{width:6px;height:6px;border-radius:50%}.health-list i.good{background:var(--green)}.health-list i.warn{background:var(--amber)}.health-list strong{color:#33363e;font-size:8px}
.lower-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.85fr);gap:14px;margin-top:14px}.link-button{padding:3px;border:0;color:#6f727c;background:transparent;cursor:pointer;font-size:8px;font-weight:700}
.recommendations{margin-top:10px}.recommendation{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;padding:12px 0;border-top:1px solid #f0f0f2}.rec-icon{display:grid;width:32px;height:32px;place-items:center;border-radius:9px;font-size:8px;font-weight:850}.rec-icon.amber{color:#b77616;background:#fff4e3}.rec-icon.violet{color:#6e50d4;background:#f2eeff}.rec-icon.blue{color:#2773c4;background:#eaf4ff}
.recommendation p{display:flex;align-items:center;gap:7px;margin:0 0 3px}.recommendation p b{font-size:6px;letter-spacing:.04em;text-transform:uppercase}.recommendation p b.amber{color:#bf7611}.recommendation p b.violet{color:#6f53d4}.recommendation p b.blue{color:#2772c1}.recommendation p span{color:#9a9ca5;font-size:6px}.recommendation h3{margin:0 0 3px;font-size:9px}.recommendation small{display:block;max-width:490px;color:#888b95;font-size:7px;line-height:1.45}.recommendation>button{padding:7px 9px;border:1px solid #e4e4e8;border-radius:8px;color:#50535d;background:#fff;cursor:pointer;font-size:7px;font-weight:700}.recommendation>button.is-added{border-color:#dceee6;color:#218360;background:#eff9f4}
.compact-devices{margin-top:10px}.compact-device{display:grid;width:100%;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;padding:10px 0;border-top:1px solid #f0f0f2}.device-avatar{display:grid;width:30px;height:30px;place-items:center;border-radius:8px;color:#555864;background:#f1f2f5;font-size:8px;font-weight:800}.compact-device>span{display:flex;min-width:0;flex-direction:column}.compact-device>span:last-child{text-align:right}.compact-device strong{overflow:hidden;font-size:8px;text-overflow:ellipsis;white-space:nowrap}.compact-device small{display:flex;align-items:center;gap:4px;margin-top:3px;color:#9698a1;font-size:6px}.compact-device>span:last-child small{justify-content:flex-end}.compact-device small i{width:5px;height:5px;border-radius:50%;background:var(--green)}

/* Internal views */
.section-hero{margin-bottom:27px}.section-hero h1{font-size:clamp(27px,3vw,38px)}
.detail-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:14px}.detail-card{padding:20px}.detail-card.wide{grid-column:1/-1}.live-label{display:flex;align-items:center;gap:7px;color:#1c825f;font-size:8px;font-weight:750}
.big-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:22px;border:1px solid var(--line);border-radius:13px;background:var(--line);overflow:hidden}.big-stats>div{display:flex;min-height:112px;flex-direction:column;justify-content:center;padding:17px;background:#fff}.big-stats span{color:#8d909a;font-size:8px}.big-stats strong{margin:7px 0 3px;font-size:26px;letter-spacing:-.05em}.big-stats strong small{font-size:9px;letter-spacing:0}.big-stats em{color:#27906a;font-size:7px;font-style:normal}
.quality-line{height:5px;margin-top:14px;overflow:hidden;border-radius:9px;background:#eceef1}.quality-line span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--green),#65c59f)}
.detail-card dl{display:grid;gap:0;margin:17px 0 14px}.detail-card dl div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #eeeef1}.detail-card dt{color:#858894;font-size:8px}.detail-card dd{margin:0;font-size:8px;font-weight:750}
.secondary-button,.primary-button{padding:10px 13px;border-radius:9px;cursor:pointer;font-size:8px;font-weight:750}.secondary-button{border:1px solid #e2e3e7;color:#525560;background:#fff}.secondary-button:hover{background:#f6f6f8}.primary-button{border:0;color:#fff;background:var(--red)}.primary-button:hover{background:var(--red-dark)}.secondary-button.compact{padding:7px 10px}
.change-plan-card{margin-top:14px;padding:20px}.change-plan-card>.panel-heading>span{color:#8b8e98;font-size:8px;font-weight:700}.change-plan-card>p{max-width:710px;color:#858894;font-size:9px;line-height:1.6}.empty-state{padding:25px;border:1px dashed #dfe0e5;border-radius:12px;color:#9a9ca5;background:#fafafb;font-size:8px;text-align:center}.change-plan-list{display:grid;gap:8px}.change-plan-item{display:flex;align-items:center;gap:10px;padding:11px;border:1px solid #e5e6e9;border-radius:11px}.change-plan-item>span{display:grid;width:28px;height:28px;place-items:center;border-radius:8px;color:#207c5d;background:#eaf8f1;font-size:9px;font-weight:800}.change-plan-item div{display:flex;flex:1;flex-direction:column}.change-plan-item strong{font-size:9px}.change-plan-item small{margin-top:3px;color:#8b8e98;font-size:7px}.change-plan-item button{border:0;color:#a04a55;background:transparent;cursor:pointer;font-size:7px}
.wifi-bands{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.band-card{position:relative;padding:20px;overflow:hidden}.band-card.featured{border-color:#ddd4ff;box-shadow:0 12px 32px rgba(118,86,229,.08)}.band-card.featured:after{content:"Recommandé";position:absolute;top:15px;right:15px;padding:5px 7px;border-radius:7px;color:#6849ce;background:#f0ecff;font-size:6px;font-weight:800;text-transform:uppercase}.band-name{display:block;color:#8c8f99;font-size:8px;font-weight:700}.band-card>strong{display:block;margin:7px 0 4px;font-size:18px}.band-card p{margin:0 0 17px;color:#858894;font-size:8px}.occupancy{height:6px;overflow:hidden;border-radius:8px;background:#ececf0}.occupancy span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#886ce9,#7052dc)}.band-card>small{display:block;margin-top:8px;color:#8e919a;font-size:7px}
.settings-table-card{margin-top:14px;padding:20px}.settings-table{margin-top:14px}.settings-table>div{display:grid;grid-template-columns:1.2fr 1fr auto;align-items:center;gap:12px;padding:13px 0;border-top:1px solid #ededf0}.settings-table span{color:#7f828d;font-size:8px}.settings-table strong{font-size:8px}.settings-table em{padding:5px 7px;border-radius:7px;font-size:6px;font-style:normal;font-weight:800}.state-on{color:#1f825f;background:#edf9f3}.state-warn{color:#a96b14;background:#fff4e4}
.search-box{display:flex;width:min(300px,100%);height:40px;align-items:center;gap:8px;padding:0 12px;border:1px solid #e0e1e5;border-radius:10px;background:#fff}.search-box span{color:#8d9099}.search-box input{width:100%;border:0;outline:0;color:#343640;background:transparent;font-size:9px}.search-box input::placeholder{color:#a1a3ab}
.devices-table-card{padding:0 18px;overflow:hidden}.device-table-head,.device-table-row{display:grid;grid-template-columns:1.5fr .8fr .8fr .7fr .45fr;align-items:center;gap:12px}.device-table-head{padding:14px 8px;color:#999ca5;font-size:7px;font-weight:750;text-transform:uppercase}.device-table-row{min-height:63px;padding:9px 8px;border-top:1px solid #eeeef1}.device-identity{display:flex;align-items:center;gap:10px;min-width:0}.device-identity>div{display:flex;min-width:0;flex-direction:column}.device-identity strong{overflow:hidden;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.device-identity small,.device-table-row>span{margin-top:3px;color:#8d9099;font-size:7px}.device-table-row>b{font-size:8px}.device-table-row em{display:flex;align-items:center;gap:5px;color:#278363;font-size:7px;font-style:normal;font-weight:700}.device-table-row em:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green)}.device-table-row.is-hidden{display:none}
.security-score{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;padding:24px}.security-number{display:flex;align-items:baseline}.security-number strong{font-size:45px;letter-spacing:-.07em}.security-number span{color:#92959f;font-size:10px}.security-score>div:nth-child(2)>small{color:#8e919b;font-size:8px}.security-score h2{margin:3px 0 5px;font-size:17px}.security-score p{margin:0;color:#858894;font-size:8px}.security-shield{display:grid;width:52px;height:52px;place-items:center;border-radius:16px;color:#fff;background:linear-gradient(135deg,#2ab983,#16865f);box-shadow:0 10px 26px rgba(26,164,112,.2);font-size:18px;font-weight:850}
.security-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}.security-item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:18px}.security-item>span{display:grid;width:34px;height:34px;place-items:center;border-radius:10px;font-size:10px;font-weight:850}.check-icon{color:#21805f;background:#eaf8f1}.warn-icon{color:#aa6d16;background:#fff4e3}.security-item h3{margin:0 0 4px;font-size:9px}.security-item p{margin:0;color:#898c96;font-size:7px}.security-item>b{color:#21805f;font-size:7px}.security-item>button{padding:7px 9px;border:1px solid #e4e4e8;border-radius:8px;background:#fff;cursor:pointer;font-size:7px;font-weight:700}
.storage-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.storage-card,.backup-card{padding:20px}.disk-visual{display:grid;height:140px;place-items:center}.disk-visual>div{--used:46%;display:grid;width:100px;height:100px;place-items:center;border-radius:50%;background:conic-gradient(var(--red) var(--used),#ebecf0 0);position:relative}.disk-visual>div:after{content:"";position:absolute;inset:10px;border-radius:50%;background:#fff}.disk-visual strong{position:relative;z-index:1;font-size:18px}.disk-visual.synology>div{background:conic-gradient(var(--violet) var(--used),#ebecf0 0)}.storage-card>p{margin:0 0 15px;color:#888b95;font-size:8px;text-align:center}.storage-card>p strong{color:#2d3038}.storage-details{display:flex;justify-content:space-between;gap:15px;padding-top:13px;border-top:1px solid #eeeef1}.storage-details span{display:flex;flex-direction:column;color:#9699a2;font-size:7px}.storage-details strong{margin-top:4px;color:#3a3d45;font-size:8px}.backup-card{grid-column:1/-1}.sync-timeline{display:grid;grid-template-columns:repeat(3,1fr);margin:25px 0}.sync-timeline span{position:relative;display:flex;align-items:center;gap:8px;color:#7e818b;font-size:8px}.sync-timeline span:not(:last-child):after{content:"";height:1px;flex:1;margin-right:8px;background:#d7ebe2}.sync-timeline i{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px #eaf7f1}.backup-card>p{margin:0;color:#858894;font-size:8px}

.mobile-nav{display:none}
.connector-dialog,.confirm-dialog{width:100%;height:100%;max-width:none;max-height:none;padding:0;border:0;background:rgba(6,7,11,.65);backdrop-filter:blur(8px)}.connector-dialog[open],.confirm-dialog[open]{display:grid;place-items:center}.connector-dialog::backdrop,.confirm-dialog::backdrop{background:transparent}
.dialog-shell,.confirm-shell{position:relative;width:min(470px,calc(100% - 30px));max-height:calc(100vh - 30px);overflow:auto;margin:0;padding:30px;border:1px solid rgba(255,255,255,.1);border-radius:23px;color:#fff;background:#15171e;box-shadow:0 30px 90px rgba(0,0,0,.45);animation:dialogIn .23s ease}.dialog-shell>*{box-sizing:border-box}.dialog-close{position:absolute;top:15px;right:15px;width:32px;height:32px;border:1px solid #343640;border-radius:9px;color:#a8abb5;background:#22242c;cursor:pointer;font-size:19px;line-height:1}.dialog-logo{margin-bottom:18px}.dialog-shell h2,.confirm-shell h2{margin:0;font-size:25px;letter-spacing:-.04em}.dialog-shell>p:not(.eyebrow),.confirm-shell>p:not(.eyebrow){margin:9px 0 18px;color:#999ca8;font-size:10px;line-height:1.6}
.connector-steps{display:grid;gap:7px;margin-bottom:16px}.connector-steps>div{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid #2c2e38;border-radius:11px;background:#1b1d25}.connector-steps>div>span{display:grid;width:26px;height:26px;flex:0 0 auto;place-items:center;border-radius:8px;color:#ff8792;background:rgba(229,45,64,.12);font-size:8px;font-weight:850}.connector-steps p{display:flex;flex-direction:column;margin:0}.connector-steps strong{font-size:9px}.connector-steps small{margin-top:3px;color:#858894;font-size:7px}
.dialog-shell>label:not(.remember-row){display:block;margin:10px 0 0;color:#c5c7cf;font-size:8px;font-weight:700}.dialog-shell input[type="url"],.dialog-shell input[type="password"],.dialog-shell input[type="text"]{width:100%;height:40px;margin-top:6px;padding:0 11px;border:1px solid #353741;border-radius:9px;outline:0;color:#fff;background:#1b1d25;font-size:9px}.dialog-shell input:focus{border-color:#7656e5}.password-field{position:relative;display:block}.password-field input{padding-right:55px!important}.password-field button{position:absolute;right:6px;bottom:6px;height:28px;padding:0 9px;border:0;border-radius:7px;color:#bbbfc8;background:#2a2c35;cursor:pointer;font-size:7px}
.remember-row{display:flex;align-items:center;gap:7px;margin:11px 0;color:#9699a4;font-size:8px}.remember-row input{accent-color:var(--red)}.dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:15px}.dialog-shell .secondary-button{border-color:#353741;color:#d0d2d9;background:#22242c}.dialog-note{display:block;margin-top:10px;color:#747783;font-size:7px;line-height:1.45;text-align:center}.dialog-note.is-error{color:#ff929d}.dialog-note.is-success{color:#65d3aa}
.authorize-button{width:100%;margin-top:9px;padding:11px;border:1px solid rgba(229,45,64,.38);border-radius:9px;color:#ff98a2;background:rgba(229,45,64,.1);cursor:pointer;font-size:8px;font-weight:800}.authorize-button:hover{background:rgba(229,45,64,.17)}
.confirm-shell{width:min(390px,calc(100% - 30px));text-align:center}.confirm-icon{display:grid;width:42px;height:42px;margin:0 auto 15px;place-items:center;border-radius:13px;color:#fff;background:linear-gradient(135deg,#2ab983,#16865f);font-size:14px;font-weight:850}.confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:17px}.confirm-shell .secondary-button{border-color:#353741;color:#d0d2d9;background:#22242c}
.toast{position:fixed;right:24px;bottom:24px;z-index:100;display:flex;align-items:center;gap:9px;padding:12px 16px;border-radius:11px;color:#fff;background:#171920;box-shadow:0 14px 40px rgba(0,0,0,.28);font-size:9px;font-weight:650;animation:toastIn .22s ease}.toast i{width:7px;height:7px;border-radius:50%;background:var(--green)}.chart-tooltip{position:fixed;z-index:120;padding:8px 10px;border-radius:8px;color:#fff;background:#171920;box-shadow:0 9px 26px rgba(0,0,0,.24);pointer-events:none;font-size:8px;white-space:nowrap}
@keyframes dialogIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media(min-width:1450px){
  .sidebar{width:280px;padding-inline:22px}.workspace{margin-left:280px}.topbar{height:74px}.card{border-radius:19px}.metric-card,.traffic-card,.health-card,.recommendations-card,.active-devices-card{padding:21px}.hero>div>p:last-child,.section-hero>div>p:last-child{font-size:12px}.card-heading strong{font-size:12px}.panel-heading h2{font-size:14px}
}
@media(max-width:1100px){
  .metrics-grid{grid-template-columns:1fr 1fr}.fibre-card{grid-column:1/-1}.middle-grid{grid-template-columns:1fr 280px}.lower-grid{grid-template-columns:1fr}.active-devices-card{display:none}.detail-grid{grid-template-columns:1fr}.security-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .sidebar{display:none}.workspace{margin-left:0;padding-bottom:76px}.topbar{height:62px;padding:0 15px}.mobile-brand{display:flex;align-items:center;gap:8px;border:0;background:transparent}.mobile-brand>span{width:31px;height:31px;border-radius:9px;font-size:8px}.mobile-brand strong{font-size:12px}.breadcrumb,.status-pill,.dark-button{display:none}.page-content{padding:18px 14px 37px}.offline-banner{top:62px}.demo-banner{align-items:flex-start}.demo-banner div{display:block;line-height:1.4}.demo-banner div span{display:block;margin-top:2px}.hero,.section-hero{align-items:flex-start}.hero h1,.section-hero h1{font-size:28px}.hero>div>p:last-child,.section-hero>div>p:last-child{font-size:10px}.audit-button{width:40px;height:40px;justify-content:center;padding:0;border-radius:11px}.audit-button b{display:none}.audit-button span{font-size:17px}.metrics-grid,.middle-grid,.detail-grid{grid-template-columns:1fr}.fibre-card{grid-column:auto}.health-card{display:none}.lower-grid,.wifi-bands,.storage-grid{grid-template-columns:1fr}.metric-card{padding:16px}.speed-grid strong{font-size:27px}.chart{gap:4px}.recommendation{grid-template-columns:auto 1fr}.recommendation>button{grid-column:2;justify-self:start}.recommendation small{font-size:7.5px}.big-stats{grid-template-columns:1fr}.big-stats>div{min-height:88px}.settings-table>div{grid-template-columns:1fr auto}.settings-table>div>strong{grid-column:1}.device-table-head{display:none}.devices-table-card{padding:0 14px}.device-table-row{grid-template-columns:1fr auto;padding:12px 0}.device-table-row>span:nth-child(2),.device-table-row>span:nth-child(3),.device-table-row>b{display:none}.security-score{grid-template-columns:auto 1fr}.security-shield{display:none}.security-grid{grid-template-columns:1fr}.storage-grid{grid-template-columns:1fr}.backup-card{grid-column:auto}.mobile-nav{position:fixed;inset:auto 8px max(8px,env(safe-area-inset-bottom)) 8px;z-index:40;display:grid;grid-template-columns:repeat(5,1fr);padding:7px;border:1px solid rgba(255,255,255,.08);border-radius:17px;background:rgba(18,19,25,.95);box-shadow:0 12px 40px rgba(0,0,0,.3);backdrop-filter:blur(18px)}.mobile-nav button{display:flex;min-width:0;flex-direction:column;align-items:center;gap:4px;padding:3px;border:0;color:#777b87;background:transparent;font-size:7px;font-weight:700}.mobile-nav button>span{display:grid;width:24px;height:22px;place-items:center;border-radius:7px;font-size:8px}.mobile-nav button.is-active{color:#fff}.mobile-nav button.is-active>span{color:#ff7280;background:rgba(229,45,64,.13)}.toast{right:14px;bottom:84px;left:14px;justify-content:center}.dialog-shell{padding:25px 20px}.dialog-shell h2{font-size:23px}.dialog-actions{grid-template-columns:1fr}.search-box{width:100%;margin-top:12px}.section-hero:has(.search-box){display:block}
}
@media(max-width:420px){
  .hero h1,.section-hero h1{font-size:25px}.metrics-grid{gap:10px}.middle-grid,.lower-grid{gap:10px;margin-top:10px}.speed-grid strong{font-size:24px}.metric-card footer{font-size:6px}.chart-legend{gap:12px}.demo-banner button{display:none}.dialog-shell{max-height:calc(100vh - 16px)}.security-score{gap:12px;padding:18px}.security-number strong{font-size:38px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}
}