:root {
  --cyan: #32b5c6;
  --nav: #ffffff;
  --nav-muted: #748391;
  --page-bg: #f5f7f9;
  --card-head: #fafbfc;
  --line: #e6ebef;
  --text: #213243;
  --muted: #8593a0;
  --purple-a: #4227a5;
  --purple-b: #10043b;
  --purple-c: #32218d;
}

/* SDK5 feature pages */
.feature-page { padding: 16px 16px 70px; }
.feature-shell { width: min(1180px, 100%); margin: 0 auto; }
.feature-head { min-height: 108px; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 12px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 5px 16px rgba(33,50,67,.05); }
.feature-head h1 { margin: 3px 0 7px; font-size: 26px; color: #203241; }
.feature-head p:not(.eyebrow) { margin: 0; color: #71818e; font-size: 16px; }
.feature-card { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 5px 16px rgba(33,50,67,.045); }
.primary-action,.secondary-action { min-height: 36px; padding: 0 16px; border-radius: 6px; font-size: 15px; font-weight: 700; }
.primary-action { border: 1px solid var(--cyan); background: var(--cyan); color: #fff; }
.secondary-action { border: 1px solid #d7e0e6; background: #fff; color: #49606f; }
.head-actions { display: flex; align-items: center; gap: 9px; }
.mode-banner { min-height: 74px; display: flex; align-items: center; gap: 13px; margin-bottom: 12px; padding: 14px 18px; border: 1px solid #c9ecef; border-radius: 8px; background: #effafb; }
.mode-banner .mode-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--cyan); color: #fff; font-weight: 800; }
.mode-banner div { display: grid; gap: 4px; }
.mode-banner strong { font-size: 16px; }
.mode-banner small { color: #6e828e; font-size: 14px; }
.mode-banner .text-action { margin-left: auto; }
.mesh-canvas { min-height: 430px; display: flex; align-items: center; justify-content: center; padding: 52px; background: radial-gradient(circle at 50% 45%,#f2fbfc 0,#fff 52%); }
.mesh-node { width: 190px; min-height: 205px; display: grid; justify-items: center; align-content: center; gap: 8px; padding: 18px; border: 1px solid #dfe8ed; border-radius: 10px; background: #fff; box-shadow: 0 8px 24px rgba(33,50,67,.08); }
.mesh-node img { width: 132px; height: 78px; object-fit: contain; mix-blend-mode: multiply; }
.mesh-node .node-art { width: 82px; height: 72px; display: grid; place-items: center; border-radius: 12px; background: #eaf7f8; color: var(--cyan); font-size: 34px; }
.mesh-node strong { font-size: 17px; }.mesh-node span,.mesh-node small { color: #788995; font-size: 14px; }.mesh-node span i,.online-dot { width: 7px; height: 7px; display: inline-block; margin-right: 4px; border-radius: 50%; background: #2fbd86; }
.mesh-link { width: 180px; height: 2px; position: relative; background: linear-gradient(90deg,var(--cyan),#8edce5); }.mesh-link span { position: absolute; left: 50%; bottom: 10px; padding: 4px 8px; border-radius: 12px; background: #eaf8fa; color: #3d8d97; font-size: 13px; transform: translateX(-50%); white-space: nowrap; }
.pending-node { margin-left: 28px; border-style: dashed; }.pending-node span i { background: #e7a93d; }
.metric-strip { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 12px; }.metric-strip article { min-height: 104px; display: grid; align-content: center; gap: 7px; padding: 17px 19px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }.metric-strip span { color: #7d8c98; font-size: 14px; font-weight: 700; }.metric-strip strong { overflow: hidden; color: #213243; font-size: 20px; text-overflow: ellipsis; white-space: nowrap; }.metric-strip small { color: #94a0aa; font-size: 13px; }
.section-head { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 17px; border-bottom: 1px solid var(--line); background: #fafbfc; }.section-head>div { display: flex; align-items: center; gap: 9px; }.section-head h2 { margin: 0; font-size: 17px; }.count-badge,.beta-chip,.success-chip,.neutral-chip { display: inline-grid; place-items: center; min-height: 20px; padding: 0 7px; border-radius: 10px; font-size: 12px; font-weight: 800; }.count-badge,.neutral-chip { background: #eef2f5; color: #71818e; }.beta-chip { vertical-align: middle; background: #f7b84b; color: #fff; }.success-chip { background: #e3f7ef; color: #279c70; }
.compact-search { width: 260px; height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid #dae2e7; border-radius: 6px; background: #fff; color: #93a0a9; }.compact-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: #314452; font-size: 14px; }
.data-table { width: 100%; overflow-x: auto; }.table-row { min-width: 880px; min-height: 64px; display: grid; align-items: center; gap: 16px; padding: 10px 17px; border-bottom: 1px solid #edf0f2; color: #627582; font-size: 14px; }.table-row:last-child { border-bottom: 0; }.table-labels { min-height: 42px; background: #fff; color: #8996a0; font-size: 13px; font-weight: 800; }.client-table .table-row { grid-template-columns: 1.55fr .8fr 1.25fr 1fr .65fr 34px; }.device-cell { display: flex; align-items: center; gap: 10px; }.device-cell>span,.table-row>span { min-width: 0; }.device-cell strong,.table-row span strong,.table-row span small { display: block; }.device-cell small,.table-row span small { margin-top: 4px; color: #9aa5ad; font-size: 12px; }.device-avatar { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 34px; border-radius: 8px; background: #e9f7f9; color: #339baa; font-size: 13px; }.row-more { width: 28px; height: 28px; padding: 0; border: 0; background: transparent; color: #84939d; }.mini-toggle { width: 35px; height: 19px; position: relative; border: 0; border-radius: 10px; background: #c9d1d7; }.mini-toggle::after { content:""; width: 15px; height: 15px; position: absolute; left: 2px; top: 2px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: .2s; }.mini-toggle.is-on { background: var(--cyan); }.mini-toggle.is-on::after { left: 18px; }.table-empty { padding: 48px; text-align: center; color: #8b99a4; font-size: 15px; }
/* Clients: preserve the device data while making controls easier to scan and use. */
.client-page-head { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; position: relative; z-index: 12; padding: 10px 4px; }
.client-title { display: flex; align-items: center; gap: 10px; }
.client-title h1 { margin: 0; color: #203241; font-size: 24px; }
.client-title>span { color: #7c8c97; font-size: 13px; }
.client-title>span strong { color: #435867; }
.client-title>button { width: 16px; height: 16px; display: grid; place-items: center; padding: 0; border: 1px solid #87949d; border-radius: 50%; background: transparent; color: #71818d; font-size: 12px; font-weight: 800; }
.client-search { width: 286px; transition: border-color .2s,box-shadow .2s; }
.client-search:focus-within { border-color: #7ccfd9; box-shadow: 0 0 0 3px rgba(50,181,198,.11); }
.client-search button { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: #eef3f5; color: #71818d; line-height: 20px; }
.client-menu-wrap,.client-row-actions { position: relative; }
.client-settings-trigger { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.client-settings-trigger>span { color: #728490; font-size: 16px; }
.client-settings-trigger i { width: 6px; height: 6px; margin: -3px 0 0 2px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.client-settings-trigger[aria-expanded="true"] i { margin-top: 3px; transform: rotate(225deg); }
.client-settings-menu { width: 286px; position: absolute; z-index: 30; top: calc(100% + 8px); right: 0; padding: 7px; border: 1px solid #dfe6ea; border-radius: 8px; background: #fff; box-shadow: 0 14px 34px rgba(31,51,66,.16); }
.client-settings-menu::before { content:""; width: 10px; height: 10px; position: absolute; top: -6px; right: 24px; border-top: 1px solid #dfe6ea; border-left: 1px solid #dfe6ea; background: #fff; transform: rotate(45deg); }
.client-settings-menu>button,.client-menu-toggle { width: 100%; min-height: 56px; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 9px; padding: 8px 10px; border: 0; border-radius: 6px; background: transparent; color: #405462; text-align: left; }
.client-settings-menu>button:hover,.client-menu-toggle:hover { background: #f3f8f9; }
.client-action-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 7px; background: #eaf7f8; color: #319cab; font-size: 18px; }
.client-settings-menu strong { display: block; font-size: 14px; }
.client-settings-menu small { display: block; margin-top: 4px; color: #8a98a3; font-size: 12px; font-weight: 400; }
.client-menu-toggle>.mini-toggle { justify-self: end; }
.client-metrics article { position: relative; overflow: hidden; }
.client-metrics article::after { content:""; width: 42px; height: 42px; position: absolute; top: -20px; right: -15px; border: 10px solid rgba(50,181,198,.08); border-radius: 50%; }
.client-metrics article:first-child { border-left: 3px solid var(--cyan); }
.client-directory { overflow: visible; }
.client-directory-head { min-height: 54px; display: flex; align-items: center; padding: 0 17px; border-bottom: 1px solid var(--line); }
.client-group-toggle { width: 100%; min-height: 52px; display: flex; align-items: center; gap: 7px; padding: 0; border: 0; background: transparent; color: #314654; text-align: left; }
.client-group-toggle span { font-size: 15px; font-weight: 700; }
.client-group-toggle b { min-width: 20px; height: 20px; display: inline-grid; place-items: center; padding: 0 5px; border-radius: 10px; background: #eaf7f8; color: #2b99a8; font-size: 12px; }
.client-group-toggle i { width: 7px; height: 7px; margin-left: 2px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); }
.client-group-toggle[aria-expanded="true"] i { margin-top: 5px; transform: rotate(225deg); }
.client-status-tabs { height: 66px; display: flex; align-items: stretch; gap: 22px; }
.client-status-tabs button { position: relative; padding: 0 2px; border: 0; background: transparent; color: #7b8b96; font-size: 15px; font-weight: 700; }
.client-status-tabs button::after { content:""; height: 2px; position: absolute; right: 0; bottom: -1px; left: 0; border-radius: 2px; background: transparent; }
.client-status-tabs button.active { color: #233746; }
.client-status-tabs button.active::after { background: var(--cyan); }
.client-status-tabs button span { min-width: 22px; height: 20px; display: inline-grid; place-items: center; margin-left: 5px; padding: 0 6px; border-radius: 10px; background: #eef3f5; color: #71818d; font-size: 12px; }
.client-status-tabs button.active span { background: #e4f7f9; color: #2a9aaa; }
.client-view-tools { display: flex; align-items: center; gap: 11px; }
.client-filters { display: flex; padding: 3px; border-radius: 6px; background: #eef2f4; }
.client-filters button { min-height: 28px; padding: 0 12px; border: 0; border-radius: 4px; background: transparent; color: #798a95; font-size: 13px; }
.client-filters button.active { background: #fff; color: #2c9dac; box-shadow: 0 1px 3px rgba(32,50,65,.12); }
.client-sort-label { height: 34px; display: flex; align-items: center; gap: 6px; padding-left: 10px; border: 1px solid #dce4e8; border-radius: 6px; color: #8996a0; font-size: 12px; }
.client-sort-label select { height: 100%; padding: 0 26px 0 0; border: 0; outline: 0; background: transparent; color: #536876; font-size: 13px; }
.client-list-summary { min-height: 34px; display: flex; align-items: center; justify-content: space-between; padding: 0 17px; border-bottom: 1px solid #edf1f3; background: #fafcfc; color: #8a98a2; font-size: 12px; }
.client-list-summary span:last-child { display: flex; align-items: center; gap: 5px; }
.client-list-summary i,.online-mark { width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: #2fbd86; }
.client-table { max-height: 570px; overflow: auto; }
.client-table .table-row { min-width: 1060px; grid-template-columns: minmax(170px,1.35fr) minmax(145px,1fr) minmax(170px,1.2fr) minmax(116px,.85fr) minmax(110px,.8fr) 72px 72px; }
.client-table .client-row { min-height: 76px; transition: background .15s,box-shadow .15s; }
.client-table .client-row:hover { position: relative; z-index: 1; background: #fbfefe; box-shadow: inset 3px 0 var(--cyan); }
.client-table .table-labels { min-height: 38px; position: sticky; z-index: 4; top: 0; background: #fff; box-shadow: 0 1px #edf0f2; }
.client-row>span:nth-child(2)>strong { color: #536876; font-size: 13px; }
.client-rate strong { color: #304957; }
.client-rate strong:first-child { color: #2d8f9c; }
.client-traffic strong { color: #526674; }
.client-row>span:nth-child(6),.client-row>span:nth-child(7) { display: flex; justify-content: center; }
.client-block-toggle.is-on { background: #df6464; }
.device-avatar { width: 38px; height: 38px; flex-basis: 38px; border-radius: 10px; }
.row-more { border-radius: 6px; font-size: 14px; letter-spacing: 1px; }
.row-more:hover,.row-more[aria-expanded="true"] { background: #eaf7f8; color: #2798a7; }
.client-offline-group { margin-top: 12px; padding: 0 17px; }
.client-offline-panel { min-height: 0; }
.client-offline-panel[hidden] { display: none; }
.offline-client-table { max-height: 390px; margin: 0 -17px; width: calc(100% + 34px); overflow: auto; border-top: 1px solid var(--line); }
.offline-client-table .table-row { min-width: 820px; grid-template-columns: minmax(180px,1.25fr) minmax(150px,1fr) minmax(190px,1.2fr) 110px minmax(120px,.8fr); }
.offline-client-table .table-labels { min-height: 38px; position: sticky; z-index: 4; top: 0; background: #fff; box-shadow: 0 1px #edf0f2; }
.offline-client-row { min-height: 70px; color: #758590; }
.offline-client-row .device-avatar.offline { background: #eef2f4; color: #8997a0; filter: grayscale(1); }
.offline-time { color: #8b99a3; font-size: 13px; }
.client-offline-panel p { margin: 0 0 10px; color: #8b99a3; font-size: 13px; }
.client-offline-icon { width: 50px; height: 50px; display: grid; place-items: center; margin-bottom: 4px; border-radius: 50%; background: #eff5f6; color: #7d919d; font-size: 25px; }
.client-row-menu { width: 166px; position: fixed; z-index: 80; padding: 6px; border: 1px solid #dfe6ea; border-radius: 7px; background: #fff; box-shadow: 0 12px 28px rgba(31,51,66,.17); }
.client-row-menu button { width: 100%; min-height: 34px; padding: 0 10px; border: 0; border-radius: 5px; background: transparent; color: #506572; font-size: 13px; text-align: left; }
.client-row-menu button:hover { background: #eff7f8; }
.client-row-menu button.danger { color: #c05d5d; }
.client-toast { position: fixed; z-index: 100; right: 26px; bottom: 24px; min-width: 220px; padding: 12px 16px; border-radius: 7px; background: #253947; color: #fff; box-shadow: 0 10px 26px rgba(28,47,60,.22); font-size: 14px; }
.table-empty { min-height: 270px; display: grid; place-items: center; align-content: center; gap: 7px; }
.table-empty[hidden] { display: none; }
.table-empty div { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: #eff5f6; color: #7e919d; font-size: 19px; }
.table-empty strong { color: #536775; }
.table-empty span { color: #9aa5ad; font-size: 12px; }

.vpn-hero { min-height: 260px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; margin-bottom: 12px; padding: 34px 42px; overflow: hidden; border-radius: 8px; background: linear-gradient(135deg,#283e73,#29315f); color: #fff; }.vpn-kicker { color: #74dce7; font-size: 14px; font-weight: 800; }.vpn-hero h2 { max-width: 470px; margin: 10px 0; font-size: 26px; }.vpn-hero p { max-width: 520px; margin: 0 0 22px; color: #bdc8df; font-size: 15px; line-height: 1.7; }.vpn-visual { display: flex; align-items: center; justify-content: center; }.vpn-visual span { width: 100px; border-top: 2px dashed #5fe0d4; }.vpn-globe,.vpn-router { width: 116px; height: 116px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; background: rgba(255,255,255,.08); color: #6be1df; font-size: 50px; }.vpn-router { border-radius: 20px; font-size: 32px; }.vpn-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 12px; }.vpn-profile { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 14px; padding: 20px; }.vpn-profile>div:not(.vpn-power) { display: grid; gap: 5px; }.vpn-profile span { color: #8997a2; font-size: 13px; }.vpn-power { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: #e4f8f1; color: #2aa477; font-size: 22px; }.disconnect-button { padding: 8px 13px; border: 1px solid #e5a6a6; border-radius: 6px; background: #fff; color: #c85b5b; font-size: 13px; }.detail-list { margin: 0; padding: 0 20px 18px; }.detail-list div { display: flex; justify-content: space-between; padding: 10px 0; border-top: 1px solid #edf0f2; font-size: 13px; }.detail-list dt { color: #8a98a3; }.detail-list dd { margin: 0; font-weight: 700; }.empty-compact { min-height: 220px; display: grid; place-items: center; align-content: center; gap: 8px; padding: 22px; text-align: center; }.empty-compact p { margin: 0 0 6px; color: #8997a2; font-size: 13px; }.round-symbol { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: #ecf7f8; color: var(--cyan); font-size: 20px; }
.wan-card { margin-top: 0; }.segmented { display: flex; padding: 3px; border-radius: 6px; background: #edf2f4; }.segmented button { min-height: 28px; padding: 0 11px; border: 0; border-radius: 4px; background: transparent; color: #788894; font-size: 13px; }.segmented button.active { background: #fff; color: var(--cyan); box-shadow: 0 1px 3px rgba(32,50,65,.12); }.wan-list { padding: 0 18px; }.wan-row { min-height: 70px; display: grid; grid-template-columns: 40px 1.4fr .7fr .8fr 30px; align-items: center; gap: 14px; border-bottom: 1px solid #edf0f2; font-size: 14px; }.wan-row:last-child { border-bottom: 0; }.wan-row>span:nth-child(2),.wan-row>span:nth-child(4) { display: grid; gap: 4px; }.wan-row small { color: #8d9aa4; font-size: 12px; }.priority { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid #dae2e7; border-radius: 6px; color: #85939d; }.wan-row.active { color: #263947; }.wan-state { color: #28a476; font-weight: 800; }.wan-row.muted { opacity: .55; }
.period-select { height: 36px; padding: 0 32px 0 11px; border: 1px solid #d8e1e6; border-radius: 6px; background: #fff; color: #536977; font-size: 14px; }.chart-card { margin-bottom: 12px; }.chart-legend { color: #82919c; font-size: 12px; }.chart-legend i { width: 8px; height: 8px; display: inline-block; margin: 0 4px 0 8px; border-radius: 50%; background: #32b5c6; }.chart-legend i:nth-child(2) { background: #6c75da; }.traffic-chart { height: 310px; position: relative; padding: 24px 24px 34px 58px; }.traffic-chart svg { width: 100%; height: 230px; overflow: visible; }.grid-lines path { fill: none; stroke: #e8edf0; stroke-width: 1; }.area-line { fill: none; stroke-width: 3; vector-effect: non-scaling-stroke; }.download-line { stroke: #32b5c6; }.upload-line { stroke: #6c75da; }.chart-y { position: absolute; left: 20px; top: 23px; bottom: 48px; display: flex; flex-direction: column; justify-content: space-between; color: #9aa5ad; font-size: 12px; }.chart-x { display: flex; justify-content: space-between; color: #9aa5ad; font-size: 12px; }.app-traffic .table-row { grid-template-columns: 1.5fr 1fr 1fr 1fr 1.1fr; min-width: 720px; }.app-cell { display: flex; align-items: center; gap: 9px; }.app-cell b { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px; background: #e9f7f9; color: #3299a8; font-size: 12px; }.usage-bar { width: 64px; height: 5px; display: inline-block; margin-right: 7px; overflow: hidden; border-radius: 4px; background: linear-gradient(90deg,var(--cyan) var(--usage),#edf1f3 var(--usage)); vertical-align: middle; }

@media (max-width: 900px) {
  .feature-head { align-items: flex-start; flex-direction: column; }
  .head-actions { width: 100%; }.compact-search { width: 100%; }
  .metric-strip { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .mesh-canvas { flex-direction: column; padding: 28px; }.mesh-link { width: 2px; height: 70px; }.mesh-link span { left: 12px; bottom: 50%; transform: translateY(50%); }.pending-node { margin: 24px 0 0; }
  .vpn-hero,.vpn-grid { grid-template-columns: 1fr; }.vpn-visual { display: none; }
  .client-page-head { align-items: stretch; flex-direction: column; padding: 12px 0; }
  .client-page-head .head-actions { flex-wrap: wrap; }
}

@media (max-width: 620px) {
  .feature-page { padding: 12px 12px 70px; }.metric-strip { grid-template-columns: 1fr; }.vpn-hero { padding: 28px 22px; }.vpn-hero h2 { font-size: 22px; }.head-actions { align-items: stretch; flex-direction: column; }.wan-row { grid-template-columns: 34px 1fr auto; }.wan-row>span:nth-child(4),.wan-row .row-more { display: none; }
  .client-search { width: 100%; }
  .client-menu-wrap,.client-settings-trigger { width: 100%; }
  .client-settings-trigger { justify-content: center; }
  .client-settings-menu { width: 100%; }
  .client-view-tools { align-items: stretch; flex-direction: column; }
  .client-sort-label { justify-content: space-between; }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Arial, Helvetica, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--page-bg);
  color: var(--text);
}

.init-body {
  min-height: 100vh;
  background: #eef3f6;
}

button {
  font: inherit;
  cursor: pointer;
}

.init-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px;
}

.init-panel {
  width: min(980px, 100%);
  border: 1px solid #dfe7eb;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 46px rgba(33, 50, 67, .12);
  overflow: hidden;
}

.init-header {
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
}

.init-header p {
  margin: 0;
  color: #687987;
  font-size: 16px;
  font-weight: 700;
}

.init-hero {
  min-height: 190px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 28px;
  align-items: center;
  padding: 28px 32px;
  background: #f8fbfc;
}

.init-hero h1 {
  margin: 0;
  color: #203241;
  font-size: 30px;
  line-height: 1.2;
}

.init-hero p:not(.eyebrow) {
  max-width: 560px;
  margin: 12px 0 0;
  color: #6f7f8d;
  font-size: 17px;
  line-height: 1.65;
}

.init-router-art {
  height: 130px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #263746;
}

.init-router-art span {
  width: 112px;
  height: 58px;
  border-radius: 8px;
  background: #3b5263;
  position: relative;
}

.init-router-art span::before {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: -18px;
  height: 7px;
  border-radius: 5px;
  background: #3b5263;
}

.init-router-art span::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  left: 18px;
  top: 25px;
  border-radius: 50%;
  background: #2fbf88;
  box-shadow: 18px 0 #32b5c6, 36px 0 #e5a52b;
}

.init-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.init-step {
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  background: #fff;
  color: #7a8996;
}

.init-step b {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #edf2f5;
  font-size: 16px;
}

.init-step.active b {
  background: var(--cyan);
  color: #fff;
}

.init-step.done b {
  background: #e8f8f1;
  color: #249d6b;
}

.init-step span {
  font-size: 16px;
  font-weight: 700;
}

.init-step.active span,
.init-step.done span {
  color: #263746;
}

.init-form {
  padding: 30px 32px 28px;
}

.init-screen {
  display: none;
  max-width: 560px;
}

.init-screen.active {
  display: block;
}

.init-screen h2 {
  margin: 0;
  color: #203241;
  font-size: 22px;
}

.init-screen p {
  margin: 10px 0 22px;
  color: #70808e;
  font-size: 16px;
  line-height: 1.6;
}

.init-screen label {
  display: block;
  margin: 16px 0 8px;
  color: #405564;
  font-size: 15px;
  font-weight: 700;
}

.init-screen input:not([type="checkbox"]) {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #cfdade;
  border-radius: 6px;
  color: #263746;
  font-size: 16px;
}

.init-check {
  display: flex !important;
  align-items: center;
  gap: 8px;
  font-weight: 500 !important;
}

.init-summary {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.init-summary div {
  min-height: 42px;
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: center;
  padding: 0 12px;
  border: 1px solid #edf1f3;
  border-radius: 6px;
  color: #70808e;
  font-size: 15px;
}

.init-summary strong {
  color: #263746;
  text-align: right;
}

.init-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.init-actions button:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.admin-frame {
  width: 100%;
  max-width: 1600px;
  min-height: 100vh;
  margin: 0 auto;
  background: var(--page-bg);
  position: relative;
}

.admin-topbar {
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.top-left,
.top-tools {
  display: flex;
  align-items: center;
}

.gl-logo {
  width: 62px;
  color: #45455b;
  font-size: 16px;
  font-weight: 700;
}

.gl-logo span {
  display: inline-block;
  width: 4px;
}

.top-separator {
  width: 1px;
  height: 20px;
  margin: 0 14px;
  background: #8b8b98;
}

.panel-title {
  color: #363646;
  font-size: 17px;
}

.panel-title small {
  display: inline-block;
  margin-left: 6px;
  padding: 3px 7px;
  border-radius: 8px;
  color: #249bad;
  background: #e9f8fa;
  font-size: 13px;
}

.top-tools {
  gap: 14px;
  color: #8c8d98;
}

.experience-switch,
.topology-switch {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid #dce6ea;
  border-radius: 8px;
  background: #f4f7f8;
}

.experience-switch {
  margin-right: 4px;
}

.experience-switch button,
.topology-switch button {
  min-height: 28px;
  padding: 0 11px;
  border: 0;
  border-radius: 6px;
  color: #71818c;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
}

.experience-switch button.active,
.topology-switch button.active {
  color: #168f9f;
  background: #fff;
  box-shadow: 0 1px 4px rgba(31, 58, 72, .12);
}

body:not([data-experience="expert"]) [data-expert-only] {
  display: none !important;
}

.minimal-home {
  display: none;
}

body:not([data-experience="minimal"]) .minimal-nav {
  display: none;
}

body[data-experience="minimal"]:not([data-travel-advanced="true"]) .admin-body {
  grid-template-columns: 1fr;
}

body[data-experience="minimal"]:not([data-travel-advanced="true"]) .sidebar,
body[data-experience="minimal"]:not([data-travel-advanced="true"]) .router-home {
  display: none;
}

body[data-experience="minimal"]:not([data-travel-advanced="true"]) .main {
  grid-column: 1;
}

body[data-experience="minimal"]:not([data-travel-advanced="true"]) .minimal-home {
  display: block;
}

body[data-experience="expert"] .home-status-grid,
body[data-experience="expert"] .home-main-grid,
body[data-experience="expert"] .home-shortcuts {
  display: none;
}

.tool {
  width: 14px;
  height: 14px;
  display: inline-block;
  position: relative;
}

.tool.cloud::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 9px;
  left: 0;
  top: 4px;
  border-radius: 10px;
  background: #8f9299;
}

.tool.cloud::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  right: -1px;
  bottom: -1px;
  border-radius: 50%;
  background: #ffb323;
}

.tool.help {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #888a93;
  color: #fff;
  font-size: 14px;
  line-height: 15px;
  text-align: center;
  font-weight: 700;
}

.tool.power {
  border: 2px solid #8b8d97;
  border-top-color: transparent;
  border-radius: 50%;
}

.tool.power::before {
  content: "";
  position: absolute;
  width: 2px;
  height: 8px;
  left: 4px;
  top: -3px;
  background: #8b8d97;
}

.tool.logout::before {
  content: "";
  position: absolute;
  width: 9px;
  height: 8px;
  left: 0;
  top: 3px;
  border: 2px solid #8b8d97;
  border-right: 0;
}

.tool.logout::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  right: 0;
  top: 3px;
  border-top: 2px solid #8b8d97;
  border-right: 2px solid #8b8d97;
  transform: rotate(45deg);
}

.tool.palette {
  border-radius: 50%;
  border: 2px solid #8b8d97;
}

.tool.palette::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  right: 0;
  bottom: 1px;
  border-radius: 50%;
  background: #fff;
}

.top-tools::before,
.top-tools::after {
  content: "";
  width: 1px;
  height: 17px;
  background: #8b8d97;
}

.lang-button {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 2px;
  background: #858891;
  color: #fff;
  font-size: 13px;
  line-height: 20px;
  padding: 0;
}

.admin-body {
  min-height: calc(100vh - 58px);
  display: grid;
  grid-template-columns: 180px 1fr;
}

.sidebar {
  grid-column: 1;
  grid-row: 1;
  background: var(--nav);
  min-height: calc(100vh - 58px);
  border-right: 1px solid var(--line);
}

.main {
  grid-column: 2;
  grid-row: 1;
}

.menu {
  padding-top: 10px;
}

.menu-item {
  width: 100%;
  height: 45px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 0 16px;
  border: 0;
  background: transparent;
  color: var(--nav-muted);
  font-size: 15px;
  font-weight: 700;
  text-align: left;
  position: relative;
}

.menu-item.active {
  color: var(--cyan);
  background: #e9f8fa;
}

.menu-item.has-arrow::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: auto;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  opacity: .65;
}

.menu-icon {
  width: 17px;
  height: 17px;
  display: inline-block;
  position: relative;
  color: currentColor;
}

.menu-icon.globe {
  border: 2px solid currentColor;
  border-radius: 50%;
}

.menu-icon.globe::before,
.menu-icon.globe::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-left: 1px solid currentColor;
  border-right: 1px solid currentColor;
  border-radius: 50%;
}

.menu-icon.globe::after {
  inset: 6px 0;
  border: 0;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
}

.menu-icon.wifi::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  left: 0;
  top: 2px;
  border: 2px solid currentColor;
  border-color: currentColor transparent transparent transparent;
  border-radius: 50%;
}

.menu-icon.wifi::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  left: 6px;
  bottom: 1px;
  border-radius: 50%;
  background: currentColor;
}

.menu-icon.clients::before,
.menu-icon.clients::after {
  content: "";
  position: absolute;
  border: 2px solid currentColor;
}

.menu-icon.clients::before {
  width: 9px;
  height: 7px;
  left: 0;
  top: 4px;
}

.menu-icon.clients::after {
  width: 6px;
  height: 5px;
  right: 0;
  bottom: 3px;
}

.menu-icon.astromesh::before,
.menu-icon.astromesh::after {
  content: "";
  position: absolute;
  border: 2px solid currentColor;
}

.menu-icon.mesh::before,
.menu-icon.mesh::after {
  content: "";
  position: absolute;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.menu-icon.mesh::before {
  width: 7px;
  height: 7px;
  left: 1px;
  top: 1px;
  box-shadow: 7px 7px 0 -1px var(--nav);
}

.menu-item.active .menu-icon.mesh::before {
  box-shadow: 7px 7px 0 -1px #e9f8fa;
}

.menu-icon.mesh::after {
  width: 5px;
  height: 5px;
  right: 0;
  bottom: 0;
}

.menu-icon.astromesh::before {
  width: 12px;
  height: 6px;
  left: 2px;
  top: 2px;
  border-bottom: 0;
}

.menu-icon.astromesh::after {
  width: 6px;
  height: 8px;
  left: 5px;
  bottom: 1px;
  border-top: 0;
}

.menu-icon.cloud-icon::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 9px;
  left: 0;
  top: 5px;
  border-radius: 12px;
  background: currentColor;
}

.menu-icon.shield::before {
  content: "";
  position: absolute;
  inset: 1px 2px;
  background: currentColor;
  clip-path: polygon(50% 0, 92% 18%, 84% 72%, 50% 100%, 16% 72%, 8% 18%);
}

.menu-icon.apps::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  left: 1px;
  top: 1px;
  background: currentColor;
  box-shadow: 9px 0 currentColor, 0 9px currentColor, 9px 9px currentColor;
}

.menu-icon.network::before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  left: 6px;
  top: 1px;
  background: currentColor;
  box-shadow: -5px 10px currentColor, 5px 10px currentColor;
}

.menu-icon.network::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 10px;
  left: 1px;
  top: 5px;
  border-top: 1px solid currentColor;
  border-left: 1px solid currentColor;
  border-right: 1px solid currentColor;
}

.menu-icon.flow::before {
  content: "";
  position: absolute;
  inset: 1px;
  border: 2px solid currentColor;
  border-radius: 3px;
}

.menu-icon.flow::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 4px;
  width: 11px;
  height: 8px;
  border-left: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: skewX(-16deg);
}

.menu-icon.security::before {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  left: 2px;
  top: 2px;
  border: 2px solid currentColor;
  border-radius: 3px;
}

.menu-icon.security::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  left: 6px;
  top: 6px;
  background: currentColor;
  box-shadow: -4px -4px currentColor, 4px -4px currentColor, -4px 4px currentColor, 4px 4px currentColor;
}

.menu-icon.system::before {
  content: "";
  position: absolute;
  inset: 2px;
  border: 4px dotted currentColor;
  border-radius: 50%;
}

.main {
  min-width: 0;
  min-height: calc(100vh - 58px);
  position: relative;
  padding-bottom: 44px;
}

.page {
  display: none;
}

.page.is-visible {
  display: block;
}

.hero-map {
  height: 290px;
  margin: 16px 16px 0;
  border-radius: 12px;
  background: #213243;
  overflow: hidden;
}

.hero-map img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content-area {
  padding: 16px 16px 70px;
}

.router-home {
  padding: 16px 16px 70px;
}

.home-summary {
  min-height: 132px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(33, 50, 67, .05);
}

.home-summary h1 {
  margin: 0;
  color: #203241;
  font-size: 28px;
}

.home-summary h1 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mode-badge {
  padding: 4px 8px;
  border-radius: 12px;
  color: #178f9e;
  background: #e7f7f8;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
}

.home-summary-copy {
  margin: 10px 0 0;
  color: #70808e;
  font-size: 16px;
}

.home-device-panel {
  display: flex;
  align-items: center;
  gap: 18px;
}

.home-device-image {
  width: 168px;
  height: 96px;
  display: block;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.home-device-status {
  min-width: 150px;
  display: grid;
  justify-items: end;
  gap: 5px;
  color: #70808e;
  font-size: 15px;
}

.home-device-status strong {
  color: #203241;
  font-size: 18px;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2fbf88;
  box-shadow: 0 0 0 5px rgba(47, 191, 136, .12);
}

.home-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.home-status-card {
  min-height: 142px;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(33, 50, 67, .04);
}

.home-status-card.online {
  border-color: #cdeee4;
}

.home-status-card.attention {
  border-color: #f1d9a8;
}

.home-status-card p {
  margin: 4px 0 0;
  color: #7a8996;
  font-size: 15px;
  font-weight: 700;
}

.home-status-card strong {
  color: #203241;
  font-size: 20px;
}

.home-status-card small {
  color: #8a98a4;
  font-size: 15px;
}

.home-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 12px;
  margin-top: 12px;
}

/* The large Mesh view uses the cleared header area for the topology and selected-device details. */
.home-summary.is-hidden-for-mesh { display: none; }
.home-main-grid.is-mesh-focus { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
.home-main-grid.is-mesh-focus .home-side-stack { display: none; }
.home-main-grid.is-mesh-focus .network-card {
  grid-column: 1 / span 3;
  width: 100%;
  min-height: 0;
  margin: 0;
}
.home-main-grid.is-mesh-focus .mesh-home-topology {
  height: auto;
  min-height: 420px;
  aspect-ratio: var(--floor-plan-ratio, 1.45);
}
.home-main-grid.is-mesh-focus .mesh-home-node { width: 108px; min-height: 102px; padding: 9px; }
.home-main-grid.is-mesh-focus .mesh-home-node img { width: 72px; height: 39px; }

.mesh-device-details { display: none; }
.home-main-grid.is-mesh-focus .mesh-device-details {
  grid-column: 4;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 420px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(33, 50, 67, .04);
}
.mesh-detail-kicker { margin: 0; color: #81919b; font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.mesh-detail-device { display: flex; align-items: center; gap: 11px; }
.mesh-detail-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: #168f9f; background: #e7f7f8; font-size: 13px; font-weight: 800; }
.mesh-detail-device h2 { margin: 0; color: #203241; font-size: 18px; }
.mesh-detail-device p, .mesh-detail-note { margin: 4px 0 0; color: #81919b; font-size: 12px; line-height: 1.5; }
.mesh-detail-status { display: inline-flex; align-items: center; gap: 6px; color: #258c71; font-size: 13px; font-weight: 700; }
.mesh-detail-status i { width: 7px; height: 7px; border-radius: 50%; background: #2fbd86; }
.mesh-detail-list { display: grid; gap: 0; margin: 0; border-top: 1px solid #edf1f3; }
.mesh-detail-list div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid #edf1f3; }
.mesh-detail-list dt { color: #81919b; font-size: 12px; }
.mesh-detail-list dd { margin: 0; color: #344b58; font-size: 12px; font-weight: 700; text-align: right; }
.mesh-device-health { padding: 1px 0 0; }
.mesh-device-health > p { margin: 0 0 10px; color: #81919b; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.mesh-health-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mesh-health-grid span { display: grid; gap: 4px; padding: 9px 10px; border: 1px solid #e7f0f2; border-radius: 7px; background: #f8fbfc; }
.mesh-health-grid small { color: #81919b; font-size: 11px; }
.mesh-health-grid strong { color: #286b76; font-size: 14px; line-height: 1; }
.mesh-detail-note { margin-top: auto; }
.draggable-mesh-node.is-selected { border-color: #38b8c5; box-shadow: 0 0 0 3px rgba(56, 184, 197, .16), 0 8px 24px rgba(29, 114, 124, .18); }
.draggable-mesh-node:focus-visible { outline: 2px solid #38b8c5; outline-offset: 3px; }

@media (max-width: 1180px) {
  .home-main-grid.is-mesh-focus { grid-template-columns: 1fr; }
  .home-main-grid.is-mesh-focus .network-card,
  .home-main-grid.is-mesh-focus .mesh-device-details { grid-column: 1; }
  .home-main-grid.is-mesh-focus .mesh-device-details { min-height: 0; }
}

@media (max-width: 720px) {
  .home-main-grid.is-mesh-focus { grid-template-columns: 1fr; }
  .home-main-grid.is-mesh-focus .mesh-home-topology { min-height: 340px; }
  .home-main-grid.is-mesh-focus .mesh-home-node { width: 88px; min-height: 86px; padding: 6px; }
  .home-main-grid.is-mesh-focus .mesh-home-node img { width: 58px; height: 32px; }
  .home-main-grid.is-mesh-focus .mesh-device-details { min-height: 0; }
}

/* The compact demo keeps the original Mesh floor plan alongside home status cards. */
.home-main-grid.is-mesh-compact .network-card { min-height: 430px; }
.home-main-grid.is-mesh-compact .mesh-home-topology {
  height: 430px;
  min-height: 430px;
  /* A compact preview must show the complete saved layout without cropping or distortion. */
  background-size: auto, contain;
}
.home-main-grid.is-mesh-compact .mesh-home-topology.has-custom-floor-plan {
  background-size: auto, contain;
}

.network-card {
  min-height: 314px;
}

.network-overview {
  padding: 20px;
}

.dynamic-topology {
  padding: 22px 24px 24px;
}

.dynamic-topology[hidden] {
  display: none;
}

.single-device-visual {
  display: grid;
  grid-template-columns: 160px minmax(180px, 1fr) 170px;
  align-items: center;
  gap: 26px;
  min-height: 224px;
  padding: 12px 38px;
}

.topology-uplink-list { display: grid; gap: 5px; padding-right: 17px; position: relative; }
.topology-uplink-list > div { min-height: 31px; display: flex; align-items: center; justify-content: flex-end; gap: 7px; position: relative; color: #8997a1; font-size: 12px; font-weight: 700; text-align: right; }
.topology-uplink-list > div::after { content: ""; position: absolute; left: calc(100% + 17px); width: 34px; border-top: 1px dashed #bdd1d7; }
.topology-uplink-list > div.is-active { color: #138e9c; }
.topology-uplink-list > div.is-active::after { border-color: #53c6d0; }
.topology-uplink-list i { color: currentColor; font-size: 17px; font-style: normal; }
.topology-uplink-list span { display: grid; gap: 1px; }
.topology-uplink-list small { color: #a0abb2; font-size: 10px; font-weight: 500; }

.topology-router-core { display: grid; place-items: center; align-content: center; gap: 5px; position: relative; }
.topology-router-core::before,.topology-router-core::after { content: ""; width: 44px; position: absolute; top: 50%; border-top: 1px solid #55c5ce; }
.topology-router-core::before { right: calc(100% + 13px); }
.topology-router-core::after { left: calc(100% + 13px); }
.topology-router-core > img { width: 102px; height: 58px; object-fit: contain; mix-blend-mode: multiply; }
.topology-router-core > strong { color: #293e4c; font-size: 15px; }
.topology-router-core > small { color: #7a8c97; font-size: 11px; }
.topology-router-core > small i { width: 6px; height: 6px; display: inline-block; margin-right: 4px; border-radius: 50%; background: #2fbd86; }
.topology-live-rate { display: grid; gap: 2px; margin-top: 1px; color: #72848f; font-size: 10px; }
.topology-live-rate span { display: flex; align-items: center; gap: 4px; }
.topology-live-rate i { color: #23a7b6; font-size: 13px; font-style: normal; line-height: 1; }
.topology-live-rate span:last-child i { color: #2fbd86; }
.topology-service-list { display: flex; gap: 12px; margin-top: 4px; }
.topology-service-list span { display: grid; justify-items: center; gap: 3px; color: #758792; font-size: 10px; }
.topology-service-list i { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: #368b98; background: #e9f6f7; font-size: 11px; font-style: normal; }
.topology-band-list { display: flex; gap: 5px; margin-top: 2px; }
.topology-band-list span { padding: 3px 6px; border-radius: 5px; color: #168f9f; background: #e6f7f8; font-size: 10px; font-weight: 800; }

.topology-client-list { display: grid; gap: 22px; padding-left: 17px; position: relative; }
.topology-client-list::before { content: ""; position: absolute; top: 25px; left: 0; bottom: 25px; border-left: 1px solid #61c9d2; }
.topology-client-list > div { min-height: 31px; display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 7px; position: relative; color: #526b78; font-size: 12px; font-weight: 700; }
.topology-client-list > div::before { content: ""; position: absolute; right: calc(100% + 17px); width: 34px; border-top: 1px solid #61c9d2; }
.topology-client-list i { color: #269aab; font-size: 18px; font-style: normal; }
.topology-client-list strong { padding: 3px 6px; border: 1px solid currentColor; border-radius: 12px; color: #249db0; font-size: 12px; }
.topology-client-list .lan strong { color: #258c71; }

/* Keep the single-device view in the dashboard's existing compact card language. */
.single-device-visual { display: flex; justify-content: center; gap: 0; min-height: 154px; padding: 10px 20px 2px; }
.internet-node,.router-node { width: 132px; min-height: 100px; display: grid; place-items: center; align-content: center; gap: 4px; border: 1px solid #dce7eb; border-radius: 10px; background: #fff; }
.internet-node span { color: #1597a8; font-size: 12px; font-weight: 800; }
.internet-node strong,.router-node strong { color: #293e4c; font-size: 16px; }
.internet-node small,.router-node small { color: #7a8c97; font-size: 12px; }
.router-node img { width: 72px; height: 40px; object-fit: contain; mix-blend-mode: multiply; }
.router-node > small i { width: 6px; height: 6px; display: inline-block; margin-right: 4px; border-radius: 50%; background: #2fbd86; }
.router-node .topology-live-rate { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 2px; font-size: 9px; }
.router-node .topology-live-rate i { font-size: 11px; }
.topology-line { width: 86px; height: 2px; position: relative; background: #bed0d7; }
.topology-line.online { background: linear-gradient(90deg, #35bf8a, #5ac9d4); }
.topology-line.online::after { content: ""; width: 6px; height: 6px; position: absolute; right: 30%; top: -2px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #45c5b0; animation: topology-pulse 2s ease-in-out infinite; }
.topology-line.client-link::after { display: none; }
@keyframes topology-pulse { 0%, 100% { transform: translateX(-30px); opacity: .45; } 50% { transform: translateX(30px); opacity: 1; } }
.client-group-list { width: 154px; display: grid; gap: 9px; position: relative; }
.client-group-list::before { content: ""; position: absolute; left: 0; top: 26px; bottom: 26px; width: 1px; background: #68cbd4; }
.client-summary-node { min-height: 44px; display: flex; align-items: center; justify-content: space-between; margin-left: 15px; padding: 0 12px; position: relative; border: 1px solid #dce7eb; border-radius: 8px; background: #fff; }
.client-summary-node::before { content: ""; position: absolute; right: 100%; width: 15px; border-top: 1px solid #68cbd4; }
.client-summary-node span { color: #526b78; font-size: 12px; font-weight: 700; }
.client-summary-node strong { color: #258c71; font-size: 16px; }
.client-summary-node.wifi { border-color: #cdebf0; background: #f6fcfd; }.client-summary-node.wifi strong { color: #249db0; }.client-summary-node.lan { border-color: #bfe8d8; background: #f4fcf9; }
.single-device-context { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px 18px; margin: 1px 18px 12px; color: #8997a1; font-size: 11px; }
.single-device-context span { white-space: nowrap; }.single-device-context b { margin-right: 5px; color: #4c6875; font-weight: 800; }
.service-quick-list { display: inline-flex; align-items: center; gap: 6px; }
.service-quick-list b { align-self: center; }
.service-quick-list i { display: inline-grid; grid-template-columns: 17px auto; align-items: center; gap: 3px; font-style: normal; }
.service-quick-list em { width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; color: #348a98; background: #e8f6f7; font-size: 11px; font-style: normal; }
.service-quick-list small { color: #667b87; font-size: 10px; font-style: normal; }

/* Backup links live in the topology: active is solid, configuration entries are dashed. */
.single-device-visual { display: grid; grid-template-columns: 170px 70px 132px 70px 154px; justify-content: center; align-items: center; gap: 0; min-height: 214px; padding: 10px 20px 2px; }
.topology-uplink-list { display: grid; gap: 5px; padding-right: 17px; position: relative; }
.topology-uplink-list::before { content: ""; position: absolute; top: 19px; right: 0; bottom: 19px; border-right: 1px dashed #c5d5da; }
.topology-uplink-list > div,.topology-uplink-list > button { min-height: 32px; display: flex; align-items: center; justify-content: flex-end; gap: 7px; padding: 0; position: relative; border: 0; background: transparent; color: #8997a1; font: inherit; text-align: right; }
.topology-uplink-list > button { width: 100%; cursor: pointer; }
.topology-uplink-list > div::after,.topology-uplink-list > button::after { content: ""; position: absolute; left: calc(100% + 17px); width: 30px; border-top: 1px dashed #c5d5da; }
.topology-uplink-list > div.is-active { color: #148f9d; }
.topology-uplink-list > div.is-active::after { border-color: #50c4ce; }
.topology-uplink-list > button:hover,.topology-uplink-list > button:focus-visible { color: #168f9f; outline: 0; }
.topology-uplink-list > button:hover::after,.topology-uplink-list > button:focus-visible::after { border-color: #67bdc7; }
.topology-uplink-list i { color: currentColor; font-size: 17px; font-style: normal; }
.topology-uplink-list span { display: grid; gap: 1px; }
.topology-uplink-list strong { font-size: 12px; }.topology-uplink-list small { color: #a0abb2; font-size: 10px; font-weight: 500; }
.topology-line.uplink-line { width: 70px; }
.single-device-context { margin-top: 0; }

/* Refined single-device topology: stronger hierarchy, balanced scale and clearer paths. */
.network-card:has([data-topology-panel="single"]:not([hidden])) { min-height: 372px; }
.dynamic-topology[data-topology-panel="single"] {
  padding: 18px 28px 20px;
  background: radial-gradient(circle at 50% 48%, rgba(76, 196, 197, .07), transparent 29%), linear-gradient(180deg, #fff 0%, #fbfdfd 100%);
}
.single-device-visual {
  grid-template-columns: 196px 54px 158px 54px 190px;
  min-height: 238px;
  padding: 4px 0 2px;
}
.topology-column-title {
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 3px;
  color: #344c59;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  text-align: left;
}
.topology-column-title small {
  padding: 3px 7px;
  border-radius: 999px;
  color: #168f9f;
  background: #eaf8f9;
  font-size: 9px;
  font-weight: 800;
}
.topology-uplink-list { gap: 6px; padding-right: 18px; }
.topology-uplink-list::before { top: 49px; right: 0; bottom: 20px; border-color: #cbdde1; }
.topology-uplink-list > div,
.topology-uplink-list > button {
  min-height: 36px;
  justify-content: flex-start;
  gap: 9px;
  padding: 0 10px;
  border: 1px solid #e0e9ec;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 3px 9px rgba(39, 85, 98, .035);
  text-align: left;
  transition: color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.topology-uplink-list > div.is-active {
  border-color: #9fddd8;
  background: linear-gradient(90deg, #f4fcfa, #ecf9f7);
  box-shadow: 0 5px 12px rgba(47, 166, 148, .08);
}
.topology-uplink-list > button:hover,
.topology-uplink-list > button:focus-visible {
  border-color: #b8d9de;
  background: #f7fbfb;
  box-shadow: 0 5px 12px rgba(39, 85, 98, .07);
}
.topology-uplink-list > div::after,
.topology-uplink-list > button::after { left: calc(100% + 10px); width: 27px; }
.topology-uplink-list i {
  width: 23px;
  height: 23px;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 7px;
  color: #7f919a;
  background: #f0f4f5;
  font-size: 13px;
}
.topology-uplink-list .is-active i { color: #188f91; background: #dff4ef; }
.topology-uplink-list strong { font-size: 12px; }
.topology-uplink-list small { font-size: 10px; }
.topology-line,
.topology-line.uplink-line { width: 54px; height: 1px; }
.topology-line.online { background: linear-gradient(90deg, #35bd89, #45bdc9); }
.topology-line.online::before {
  content: "";
  width: 7px;
  height: 7px;
  position: absolute;
  top: -3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(69, 192, 177, .23);
}
.uplink-line::before { left: 0; }
.client-link::before { right: 0; }
.router-node {
  width: 158px;
  min-height: 164px;
  gap: 5px;
  padding: 14px 12px 11px;
  position: relative;
  border-color: #cfe2e6;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff, #f9fcfc);
  box-shadow: 0 12px 28px rgba(39, 85, 98, .09), 0 2px 6px rgba(39, 85, 98, .05);
}
.router-node-label {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 7px;
  border-radius: 999px;
  color: #27818d;
  background: #eaf7f8;
  font-size: 9px;
  font-weight: 800;
}
.router-node img { width: 88px; height: 48px; margin-top: 8px; }
.router-node strong { font-size: 15px; }
.router-node > small { color: #65808a; font-size: 10px; }
.router-node .topology-live-rate {
  width: 100%;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid #e7eef0;
}
.router-node .topology-live-rate span { display: grid; grid-template-columns: auto 1fr; gap: 0 4px; padding: 0 7px; }
.router-node .topology-live-rate span + span { border-left: 1px solid #e7eef0; }
.router-node .topology-live-rate i { grid-row: 1 / span 2; align-self: center; font-size: 13px; }
.router-node .topology-live-rate b { color: #425c68; font-size: 10px; font-weight: 800; }
.router-node .topology-live-rate small { color: #98a7ad; font-size: 8px; }
.client-group-list { width: 190px; gap: 12px; }
.client-group-list::before { top: 69px; bottom: 32px; background: #8bd3d9; }
.client-summary-node {
  min-height: 66px;
  margin-left: 16px;
  padding: 0 14px;
  border-radius: 10px;
  box-shadow: 0 5px 14px rgba(39, 85, 98, .06);
}
.client-summary-node::before { width: 16px; }
.client-summary-node span { display: grid; grid-template-columns: 18px 1fr; align-items: center; font-size: 11px; }
.client-summary-node span i { color: #299eae; font-size: 15px; font-style: normal; }
.client-summary-node.lan span i { color: #329276; }
.client-summary-node strong { font-size: 20px; }
.client-summary-node strong small { font-size: 9px; font-weight: 700; }
.single-device-context {
  width: fit-content;
  margin: 11px auto 0;
  padding: 7px 10px;
  border: 1px solid #e4edef;
  border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 4px 12px rgba(39, 85, 98, .04);
}
.service-quick-list { gap: 9px; }
.service-quick-list b { margin-right: 3px; color: #435d69; font-size: 10px; }
.service-quick-list i { grid-template-columns: 18px auto; gap: 4px; }
.service-quick-list em { width: 18px; height: 18px; background: #e7f6f7; font-size: 10px; }
.service-quick-list small { color: #657b86; font-size: 9px; }

/* With the helper labels removed, let the topology itself fill the card. */
.dynamic-topology[data-topology-panel="single"] { padding: 24px 22px 26px; }
.single-device-visual {
  grid-template-columns: 212px 52px 174px 52px 208px;
  min-height: 260px;
  padding: 0;
}
.topology-uplink-list { gap: 7px; }
.topology-uplink-list::before { top: 22px; bottom: 22px; }
.topology-uplink-list > div,
.topology-uplink-list > button { min-height: 44px; gap: 10px; padding: 0 11px; }
.topology-uplink-list i { width: 28px; height: 28px; font-size: 15px; }
.topology-uplink-list strong { font-size: 13px; }
.router-node {
  width: 174px;
  min-height: 184px;
  gap: 6px;
  padding: 16px 14px 13px;
}
.router-node-label { top: 11px; left: 11px; padding: 4px 8px; font-size: 10px; }
.router-node img { width: 100px; height: 55px; margin-top: 10px; }
.router-node strong { font-size: 17px; }
.router-node > small { font-size: 11px; }
.router-node .topology-live-rate { margin-top: 5px; padding-top: 9px; }
.router-node .topology-live-rate i { font-size: 14px; }
.router-node .topology-live-rate b { font-size: 11px; }
.router-node .topology-live-rate small { font-size: 9px; }
.client-group-list { width: 208px; gap: 14px; }
.client-group-list::before { top: 39px; bottom: 39px; }
.client-summary-node {
  min-height: 78px;
  margin-left: 18px;
  padding: 0 16px;
  border-radius: 12px;
}
.client-summary-node::before { width: 18px; }
.client-summary-node span { grid-template-columns: 22px 1fr; font-size: 12px; }
.client-summary-node span i { font-size: 17px; }
.client-summary-node strong { font-size: 23px; }
.client-summary-node strong small { font-size: 10px; }

@media (max-width: 1080px) {
  .single-device-visual { grid-template-columns: 196px 42px 164px 42px 192px; }
  .topology-line,
  .topology-line.uplink-line { width: 44px; }
  .router-node { width: 164px; }
  .client-group-list { width: 192px; }
}

@media (max-width: 1180px) and (min-width: 761px) {
  .home-main-grid { grid-template-columns: minmax(0, 1fr); }
  .home-side-stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

@media (max-width: 760px) {
  .dynamic-topology[data-topology-panel="single"] { padding: 20px 16px 24px; }
  .single-device-visual {
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
    gap: 14px;
  }
  .topology-uplink-list,
  .client-group-list {
    width: min(100%, 320px);
    justify-self: center;
  }
  .topology-uplink-list { padding-right: 0; }
  .topology-uplink-list::before,
  .topology-uplink-list > div::after,
  .topology-uplink-list > button::after,
  .client-group-list::before,
  .client-summary-node::before { display: none; }
  .topology-uplink-list > div,
  .topology-uplink-list > button { justify-content: flex-start; text-align: left; }
  .router-node { justify-self: center; }
  .topology-line,
  .topology-line.uplink-line { width: 1px; height: 24px; justify-self: center; }
  .topology-line.online { background: linear-gradient(180deg, #35bd89, #45bdc9); }
  .topology-line.online::before { left: -3px; top: 0; }
  .client-summary-node { margin-left: 0; }
  .home-side-stack { grid-template-columns: 1fr; }
  .single-device-context { max-width: 100%; border-radius: 12px; }
  .service-quick-list { flex-wrap: wrap; justify-content: center; }
}

/* Single-device overview: responsive tracks and continuous connection paths. */
.network-card:has([data-topology-panel="single"]:not([hidden])) { min-height: 0; }
.dynamic-topology[data-topology-panel="single"] { padding: 28px 30px; }
.single-device-visual {
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
  grid-template-columns: minmax(150px, 1fr) minmax(30px, .3fr) 184px minmax(30px, .3fr) minmax(170px, 1fr);
  min-height: 272px;
}
.topology-uplink-list { padding-right: 24px; gap: 8px; }
.topology-uplink-list::before { top: 24px; bottom: 24px; }
.topology-uplink-list > div,
.topology-uplink-list > button { min-height: 48px; border-radius: 8px; box-shadow: none; }
.topology-uplink-list > div::after,
.topology-uplink-list > button::after { left: 100%; top: 50%; width: 24px; }
.topology-uplink-list > div.is-active::after { border-top-style: solid; border-color: #27b3ad; }
.topology-uplink-list > div.is-active::before {
  content: ""; position: absolute; left: calc(100% + 24px); top: 50%;
  height: 112px; border-left: 1px solid #27b3ad;
}
.topology-uplink-list small { color: #768995; font-size: 11px; }
.topology-uplink-list > button:focus-visible { outline: 2px solid #159cad; outline-offset: 3px; }
.topology-line, .topology-line.uplink-line { width: 100%; }
.topology-line.online::after { display: none; }
.router-node { width: 184px; min-height: 212px; padding: 18px 14px 14px; border-radius: 14px; box-shadow: 0 6px 20px rgba(39,85,98,.08); }
.router-node img { width: 120px; height: 72px; margin-top: 12px; }
.router-node > strong { font-size: 18px; letter-spacing: .01em; }
.router-node > small { font-size: 12px; }
.router-node .topology-live-rate { margin-top: 8px; padding-top: 12px; }
.router-node .topology-live-rate b { font-size: 13px; font-variant-numeric: tabular-nums; }
.router-node .topology-live-rate small { font-size: 10px; color: #708591; }
.client-group-list { width: 100%; gap: 16px; }
.client-group-list::before { top: 42px; bottom: 42px; }
.client-summary-node { min-height: 84px; padding: 12px; box-shadow: none; gap: 8px; }
.client-summary-node span { grid-template-columns: 18px 1fr; gap: 4px; font-size: 12px; }
.client-summary-node strong { font-size: 26px; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (min-width: 761px) and (max-width: 1080px) {
  .dynamic-topology[data-topology-panel="single"] { padding: 24px 18px; }
  .single-device-visual { grid-template-columns: minmax(140px, 1fr) 28px 164px 28px minmax(154px, 1fr); }
  .router-node { width: 164px; }
}
@media (max-width: 760px) {
  .dynamic-topology[data-topology-panel="single"] { padding: 20px 16px; }
  .single-device-visual { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .topology-uplink-list { padding-right: 0; }
  .topology-uplink-list > div.is-active::before { display: none; }
  .topology-line, .topology-line.uplink-line { width: 1px; height: 24px; }
  .client-group-list { width: min(100%, 320px); }
}

.mesh-home-topology {
  min-height: 430px;
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 0 0 8px 8px;
  background-image: linear-gradient(rgba(247, 251, 252, .48), rgba(247, 251, 252, .48)), var(--floor-plan-image, url("./assets/mesh-floor-plan.png"));
  background-position: center;
  /* Preserve every edge of uploaded or pasted floor plans instead of cropping them to the topology canvas. */
  background-size: auto, contain;
  background-repeat: no-repeat;
  background-color: #f7fbfc;
}

.mesh-home-topology::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 36px rgba(255, 255, 255, .78);
}

.mesh-home-topology > * {
  z-index: 1;
}

.floor-plan-toolbar {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 5px 6px 5px 12px;
  border: 1px solid rgba(207, 220, 226, .92);
  border-radius: 8px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 4px 14px rgba(41, 66, 79, .1);
  backdrop-filter: blur(7px);
}

.floor-plan-toolbar button,
.floor-plan-upload,
.floor-plan-toolbar select { height: 31px; padding: 7px 9px; border: 0; border-radius: 6px; color: #387e88; background: #eaf7f8; cursor: pointer; font-size: 12px; font-weight: 700; }
.floor-plan-toolbar select { max-width: 156px; border: 1px solid #d2e9eb; background: #fff; }
.floor-plan-toolbar button:disabled { cursor: not-allowed; opacity: .5; }
.floor-plan-upload input { display: none; }
.card-title .floor-plan-status { color: #8a99a3; font-size: 11px; font-weight: 500; white-space: nowrap; }

.mesh-home-topology.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  width: 100vw;
  height: 100vh;
  min-height: 0;
  aspect-ratio: auto;
  border-radius: 0;
  background-size: auto, contain;
  background-color: #eef4f5;
}
.mesh-home-topology.is-fullscreen .floor-plan-toolbar {
  top: 18px;
  right: 18px;
  max-width: calc(100vw - 36px);
}
.mesh-home-topology.is-fullscreen .mesh-home-node {
  width: 150px;
  min-height: 136px;
  padding: 14px;
}
.mesh-home-topology.is-fullscreen .mesh-home-node img { width: 104px; height: 58px; }

@media (max-width: 720px) {
  .mesh-home-topology.is-fullscreen .floor-plan-toolbar { left: 10px; right: 10px; top: 10px; gap: 5px; padding: 5px; }
  .mesh-home-topology.is-fullscreen #floorPlanDelete,
  .mesh-home-topology.is-fullscreen #floorPlanReset { display: none; }
  .mesh-home-topology.is-fullscreen .floor-plan-toolbar button,
  .mesh-home-topology.is-fullscreen .floor-plan-upload,
  .mesh-home-topology.is-fullscreen .floor-plan-toolbar select { font-size: 11px; }
  .mesh-home-topology.is-fullscreen .mesh-home-node { width: 116px; min-height: 108px; padding: 9px; }
  .mesh-home-topology.is-fullscreen .mesh-home-node img { width: 78px; height: 42px; }
}

.mesh-home-node {
  width: 132px;
  min-height: 124px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 5px;
  padding: 12px;
  border: 1px solid #dce7eb;
  border-radius: 10px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(5px);
  box-shadow: 0 5px 14px rgba(37, 63, 77, .06);
}

.draggable-mesh-node {
  position: absolute;
  left: var(--node-x);
  top: var(--node-y);
  z-index: 3;
  cursor: grab;
  touch-action: none;
  transform: translate(-50%, -50%);
  user-select: none;
  transition: box-shadow .16s ease, border-color .16s ease;
}

.draggable-mesh-node:hover,
.draggable-mesh-node.is-dragging {
  border-color: #62c6cf;
  box-shadow: 0 8px 24px rgba(29, 114, 124, .2);
}

.draggable-mesh-node.is-dragging { cursor: grabbing; }

.mesh-link-layer {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  z-index: 2 !important;
  pointer-events: none;
}

.mesh-link-layer line {
  stroke: rgba(24, 166, 180, .78);
  stroke-width: 2;
  stroke-dasharray: 7 5;
  vector-effect: non-scaling-stroke;
}

.mesh-home-node img { width: 88px; height: 48px; object-fit: contain; mix-blend-mode: multiply; }
.mesh-home-node b { width: 34px; height: 28px; display: grid; place-items: center; border-radius: 7px; color: #168f9f; background: #e7f7f8; font-size: 13px; }
.mesh-home-node strong { color: #304552; font-size: 14px; }
.mesh-home-node small, .mesh-home-node span { color: #81919b; font-size: 12px; }
.mesh-home-node small i { width: 6px; height: 6px; display: inline-block; margin-right: 3px; border-radius: 50%; background: #31b985; }
.mesh-home-link { height: 2px; position: relative; background: linear-gradient(90deg, #45c8d3, #a5dee3); }
.mesh-home-link span { position: absolute; left: 50%; bottom: 9px; color: #5a9098; font-size: 12px; white-space: nowrap; transform: translateX(-50%); }
.mesh-home-branches { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-left: 12px; border-left: 2px solid #a5dee3; }

.expert-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.expert-metrics article {
  display: grid;
  gap: 7px;
  padding: 16px;
  border: 1px solid #dbe5e9;
  border-radius: 8px;
  background: #fff;
}

.expert-metrics span { color: #788a96; font-size: 13px; font-weight: 700; }
.expert-metrics strong { color: #293f4d; font-size: 19px; }
.expert-metrics small { color: #83939d; font-size: 12px; }

/* Minimal mode — a deliberately reduced network-map experience. */
.minimal-home {
  min-height: calc(100vh - 58px);
  background: #f3f6f8;
}

.minimal-nav {
  min-height: 112px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 18px;
  padding: 12px 24px 0;
  background: linear-gradient(115deg, #16aebc, #45c8d1);
}

.minimal-nav button {
  width: 126px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 7px;
  position: relative;
  border: 0;
  color: rgba(255,255,255,.88);
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
}

.minimal-nav button span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255,255,255,.84);
  border-radius: 50%;
  font-size: 19px;
}

.minimal-nav button.active::after {
  content: "";
  height: 4px;
  position: absolute;
  right: 20px;
  bottom: 0;
  left: 20px;
  border-radius: 4px 4px 0 0;
  background: #ffd034;
}

.minimal-nav button.active span { border-color: #ffd034; color: #ffd034; }

.minimal-canvas {
  max-width: 1160px;
  min-height: 600px;
  margin: 18px auto 0;
  padding: 42px 7% 60px;
  border-radius: 10px 10px 0 0;
  background: #fff;
  box-shadow: 0 3px 18px rgba(35, 61, 73, .06);
}

.minimal-map {
  display: grid;
  grid-template-columns: 120px minmax(45px, 1fr) 180px minmax(45px, 1fr) 120px 1px 120px;
  align-items: center;
  gap: 12px;
}

.minimal-map-node {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 5px;
  position: relative;
  border: 0;
  color: #38515e;
  background: transparent;
  cursor: pointer;
}

.minimal-map-node > span {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 2px solid #53c6cf;
  border-radius: 50%;
  color: #29aeba;
  font-size: 27px;
}

.minimal-map-node b {
  min-width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  position: absolute;
  top: -4px;
  right: 20px;
  z-index: 2;
  padding: 0 5px;
  border-radius: 10px;
  color: #fff;
  background: #f7b91e;
  font-size: 12px;
}

.minimal-map-node strong { font-size: 15px; }
.minimal-map-node small { color: #82939c; font-size: 12px; }
.minimal-map-node.is-online strong { color: #19aab6; }
.minimal-map-line { height: 1px; background: #aebbc1; }
.minimal-map-divider { width: 1px; height: 68px; background: #d9e1e4; }

.minimal-router-node {
  display: grid;
  justify-items: center;
  gap: 4px;
}

.minimal-router-node > div { display: flex; gap: 5px; }
.minimal-router-node > div small { padding: 3px 5px; border-radius: 7px; color: #16a9b6; background: #e5f8f9; font-size: 11px; font-weight: 800; }
.minimal-router-node img { width: 148px; height: 82px; object-fit: contain; mix-blend-mode: multiply; }
.minimal-router-node strong { color: #273e4b; font-size: 17px; }
.minimal-router-node > small { color: #36af8b; font-size: 12px; }

.minimal-status-card {
  margin: 44px auto 0;
  padding: 20px 24px 24px;
  border-radius: 10px;
  background: #f4f7f9;
}

.minimal-status-card h2 { margin: 0 0 18px; color: #263d49; font-size: 17px; }
.minimal-status-card > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.minimal-status-card span { display: grid; gap: 8px; padding: 0 18px; border-right: 1px solid #dbe4e7; color: #7b8c95; font-size: 13px; }
.minimal-status-card span:first-child { padding-left: 0; }
.minimal-status-card span:last-child { border: 0; }
.minimal-status-card strong { color: #263d49; font-size: 15px; }
.minimal-quick-actions { display: flex; justify-content: center; gap: 10px; margin-top: 24px; }
.minimal-quick-actions button { min-height: 34px; padding: 0 16px; border: 1px solid #bcdde1; border-radius: 7px; color: #248f9a; background: #fff; cursor: pointer; font-size: 13px; font-weight: 700; }

/* Expert mode — operational data replaces convenience cards. */
body[data-experience="expert"] .router-home { background: #eef2f5; }
body[data-experience="expert"] .home-summary { border-color: #233847; color: #fff; background: linear-gradient(125deg, #122836, #203f4e); }
body[data-experience="expert"] .home-summary h1,
body[data-experience="expert"] .home-device-status strong { color: #f2f8fa; }
body[data-experience="expert"] .home-summary-copy,
body[data-experience="expert"] .home-device-status { color: #a9bdc7; }
body[data-experience="expert"] .mode-badge { color: #71e3d3; background: rgba(69, 207, 188, .14); }

.expert-operations {
  margin-top: 14px;
  padding: 18px;
  border-radius: 9px;
  color: #dbe7eb;
  background: #112430;
  box-shadow: 0 10px 30px rgba(20, 43, 55, .16);
}

.expert-operations > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.expert-operations > header p { margin: 0 0 3px; color: #57d5c5; font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.expert-operations > header h2 { margin: 0; color: #f2f8fa; font-size: 17px; }
.expert-operations > header > span { color: #87a0ab; font-size: 12px; }
.expert-operations > header i { width: 6px; height: 6px; display: inline-block; margin-right: 5px; border-radius: 50%; background: #54d5a0; }
.ops-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(230px, .7fr); gap: 12px; }
.ops-grid article { min-width: 0; padding: 16px; border: 1px solid #29414e; border-radius: 8px; background: #182f3c; }
.ops-card-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ops-card-title strong { color: #eaf2f5; font-size: 14px; }
.ops-card-title span { color: #78919c; font-size: 11px; }
.ops-card-title button { border: 0; color: #58cfca; background: transparent; cursor: pointer; font-size: 11px; }
.traffic-legend { display: flex; gap: 20px; color: #83dcd5; font-size: 12px; }
.traffic-legend span:last-child { color: #7aa9e7; }
.traffic-chart { height: 130px; display: flex; align-items: end; gap: 6px; position: relative; margin-top: 16px; border-bottom: 1px solid #38515d; background: repeating-linear-gradient(0deg, transparent 0 31px, rgba(92,124,138,.14) 32px); }
.traffic-chart i { flex: 1; height: var(--h, 45%); border-radius: 3px 3px 0 0; background: linear-gradient(#4fd3c7, rgba(79,211,199,.18)); }
.traffic-chart i:nth-child(2n) { --h: 62%; }.traffic-chart i:nth-child(3n) { --h: 38%; }.traffic-chart i:nth-child(4n) { --h: 81%; }.traffic-chart i:nth-child(5n) { --h: 70%; }
.health-score { display: flex; align-items: baseline; justify-content: center; margin: 24px 0; }.health-score b { color: #60d8b1; font-size: 46px; }.health-score span { color: #6f8995; font-size: 13px; }
.ops-health dl { margin: 0; }.ops-health dl div { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid #29414e; font-size: 12px; }.ops-health dt { color: #7f98a3; }.ops-health dd { margin: 0; color: #d8e4e8; }
.ops-interfaces { grid-column: 1; }.interface-table { display: grid; }.interface-table > div { display: grid; grid-template-columns: 1.2fr .7fr 1fr 1fr; gap: 8px; padding: 9px 5px; border-top: 1px solid #29414e; color: #9eb0b8; font-size: 12px; }.interface-table > div:first-child { border: 0; color: #69838f; }.interface-table em { color: #59d6aa; font-size: 11px; font-style: normal; font-weight: 800; }.interface-table em.down { color: #ef8f8f; }
.ops-events { grid-column: 2; grid-row: 2; }.ops-events ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }.ops-events li { display: grid; grid-template-columns: 34px 1fr; gap: 8px; }.ops-events time { color: #66818d; font-size: 11px; }.ops-events li div { display: grid; gap: 3px; padding-left: 8px; border-left: 2px solid #3cbf9b; }.ops-events li.warning div { border-color: #dda746; }.ops-events li strong { color: #ccdade; font-size: 12px; }.ops-events li small { color: #718a95; font-size: 11px; }

.network-path {
  min-height: 128px;
  display: grid;
  grid-template-columns: 110px 1fr 140px 1fr 110px;
  align-items: center;
  gap: 12px;
  padding: 18px;
  border-radius: 8px;
  background: #f5fafb;
}

.network-path span,
.network-path strong {
  min-height: 54px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #fff;
  color: #263746;
  font-size: 16px;
  box-shadow: inset 0 0 0 1px #dce8ec;
}

.network-path strong {
  min-height: 72px;
  background: #263746;
  color: #fff;
}

.network-path i {
  height: 3px;
  border-radius: 3px;
  background: var(--cyan);
}

.home-side-stack {
  display: grid;
  gap: 12px;
}

.wifi-home-list {
  display: grid;
  gap: 10px;
  padding: 16px 18px;
}

.wifi-home-list div {
  min-height: 36px;
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #edf1f3;
}

.wifi-home-list span {
  color: var(--cyan);
  font-size: 15px;
  font-weight: 800;
}

.wifi-home-list strong {
  min-width: 0;
  color: #263746;
  font-size: 15px;
  overflow-wrap: anywhere;
}

.backup-wan-body {
  display: grid;
  gap: 14px;
  padding: 18px;
  color: #70808e;
  font-size: 15px;
  line-height: 1.55;
}

.backup-wan-body p {
  margin: 0;
}

.home-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.home-shortcuts button {
  min-width: 92px;
  height: 32px;
  padding: 0 14px;
  border: 1px solid #cbd8dd;
  border-radius: 16px;
  background: #fff;
  color: #405564;
  font-size: 15px;
  font-weight: 700;
}

.home-wizard {
  padding: 16px 16px 70px;
}

.setup-hero {
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 5px 16px rgba(33, 50, 67, .05);
}

.setup-hero h1 {
  max-width: 680px;
  margin: 0;
  color: #203241;
  font-size: 30px;
  line-height: 1.22;
}

.setup-copy {
  max-width: 680px;
  margin: 12px 0 0;
  color: #6f7f8d;
  font-size: 17px;
  line-height: 1.6;
}

.setup-device {
  width: 168px;
  height: 108px;
  flex: 0 0 168px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  border-radius: 8px;
  background: #263746;
  color: #fff;
}

.setup-device span {
  width: 78px;
  height: 40px;
  display: block;
  border-radius: 7px;
  background: #3b5263;
  position: relative;
}

.setup-device span::before {
  content: "";
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: -14px;
  height: 6px;
  border-radius: 4px;
  background: #3b5263;
}

.setup-device span::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  left: 12px;
  top: 16px;
  border-radius: 50%;
  background: #2fbf88;
  box-shadow: 15px 0 #32b5c6, 30px 0 #e5a52b;
}

.setup-device strong {
  margin-top: 12px;
  color: #bceee8;
  font-size: 15px;
}

.setup-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.setup-step {
  min-height: 92px;
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(33, 50, 67, .04);
}

.setup-step b {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #edf2f5;
  color: #70808e;
}

.setup-step.done b {
  background: #e8f8f1;
  color: #249d6b;
}

.setup-step.active {
  border-color: #bde6ec;
  background: #f7fcfd;
}

.setup-step.active b {
  background: var(--cyan);
  color: #fff;
}

.setup-step strong {
  display: block;
  color: #263746;
  font-size: 18px;
}

.setup-step span {
  display: block;
  margin-top: 6px;
  color: #788794;
  font-size: 15px;
  line-height: 1.45;
}

.home-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 12px;
  margin-top: 12px;
}

.guide-card {
  min-height: 288px;
}

.guide-body {
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: 28px;
}

.guide-main {
  display: flex;
  align-items: flex-start;
  gap: 22px;
}

.guide-icon,
.quick-icon {
  display: inline-block;
  position: relative;
  flex: 0 0 auto;
}

.guide-icon {
  width: 92px;
  height: 92px;
  border-radius: 8px;
  background: #eef9fb;
  color: var(--cyan);
}

.guide-icon.wifi::before,
.quick-icon.wifi::before,
.quick-icon.repeater::before {
  content: "";
  position: absolute;
  left: 50%;
  border: 3px solid currentColor;
  border-color: currentColor transparent transparent transparent;
  border-radius: 50%;
  transform: translateX(-50%);
}

.guide-icon.wifi::before {
  top: 27px;
  width: 50px;
  height: 50px;
}

.guide-icon.wifi::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  left: 41px;
  top: 57px;
  border-radius: 50%;
  background: currentColor;
}

.guide-main h3 {
  margin: 5px 0 10px;
  color: #203241;
  font-size: 24px;
}

.guide-main p {
  max-width: 560px;
  margin: 0;
  color: #6f7f8d;
  font-size: 17px;
  line-height: 1.7;
}

.guide-actions {
  display: flex;
  gap: 10px;
}

.status-stack {
  display: grid;
  gap: 12px;
}

.connection-list {
  padding: 12px 18px 18px;
}

.connection-list div {
  min-height: 44px;
  display: grid;
  grid-template-columns: 84px 1fr;
  align-items: center;
  border-bottom: 1px solid #edf1f3;
  color: #738391;
  font-size: 15px;
}

.connection-list strong {
  min-width: 0;
  color: #263746;
  text-align: right;
  overflow-wrap: anywhere;
}

.tip-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 18px 20px 20px 34px;
  color: #687987;
  font-size: 15px;
  line-height: 1.55;
}

.quick-setup-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.quick-setup-card {
  min-height: 178px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(33, 50, 67, .04);
  position: relative;
}

.quick-setup-card.recommended {
  border-color: #bde6ec;
  background: #f7fcfd;
}

.quick-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #eef9fb;
  color: var(--cyan);
}

.quick-icon.wifi::before,
.quick-icon.repeater::before {
  top: 13px;
  width: 22px;
  height: 22px;
}

.quick-icon.wan::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 14px;
  left: 10px;
  top: 10px;
  border: 3px solid currentColor;
  border-radius: 3px 3px 7px 7px;
}

.quick-icon.wan::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 5px;
  left: 14px;
  bottom: 9px;
  border: 3px solid currentColor;
  border-top: 0;
}

.quick-icon.wifi::after,
.quick-icon.repeater::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  left: 17px;
  top: 25px;
  border-radius: 50%;
  background: currentColor;
}

.quick-icon.clients::before,
.quick-icon.clients::after {
  content: "";
  position: absolute;
  border: 3px solid currentColor;
  border-radius: 3px;
}

.quick-icon.clients::before {
  width: 17px;
  height: 12px;
  left: 7px;
  top: 10px;
}

.quick-icon.clients::after {
  width: 12px;
  height: 9px;
  right: 7px;
  bottom: 9px;
}

.quick-icon.shield::before {
  content: "";
  position: absolute;
  inset: 8px 10px;
  background: currentColor;
  clip-path: polygon(50% 0, 92% 18%, 84% 72%, 50% 100%, 16% 72%, 8% 18%);
}

.quick-setup-card h3 {
  margin: 0 0 8px;
  color: #263746;
  font-size: 19px;
}

.quick-setup-card p {
  margin: 0;
  color: #748391;
  font-size: 15px;
  line-height: 1.5;
}

.quick-setup-card > button:not(.gear) {
  width: fit-content;
  min-width: 72px;
  height: 30px;
  padding: 0 14px;
  border: 1px solid #cbd8dd;
  border-radius: 15px;
  background: #fff;
  color: #405564;
  font-size: 15px;
  font-weight: 700;
}

.quick-setup-card.recommended > button:not(.gear) {
  border-color: var(--cyan);
  background: var(--cyan);
  color: #fff;
}

.quick-setup-card .gear {
  position: absolute;
  right: 15px;
  top: 15px;
}

.dashboard-board {
  padding: 16px 16px 70px;
}

.dashboard-hero {
  min-height: 118px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(135deg, #ffffff 0%, #f4fbfc 54%, #eef7f3 100%);
  box-shadow: 0 5px 16px rgba(33, 50, 67, .05);
}

.device-summary {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 18px;
}

.device-mark {
  width: 70px;
  height: 70px;
  flex: 0 0 70px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #263746;
  color: #ffffff;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0;
  box-shadow: inset 0 -12px 24px rgba(0, 0, 0, .14);
}

.eyebrow {
  margin: 0 0 5px;
  color: var(--cyan);
  font-size: 15px;
  font-weight: 700;
}

.dashboard-hero h1 {
  margin: 0;
  color: #1f2f3d;
  font-size: 28px;
  line-height: 1.1;
}

.device-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.device-meta span {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border: 1px solid #dce7ea;
  border-radius: 4px;
  background: #fff;
  color: #697987;
  font-size: 15px;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.primary-button,
.ghost-button {
  height: 34px;
  padding: 0 16px;
  border-radius: 17px;
  font-size: 15px;
  font-weight: 700;
}

.primary-button {
  border: 0;
  background: var(--cyan);
  color: #fff;
}

.ghost-button {
  border: 1px solid #cbd8dd;
  background: #fff;
  color: #405564;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.metric-tile {
  min-height: 104px;
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(33, 50, 67, .04);
}

.metric-tile p {
  margin: 0 0 5px;
  color: #7a8996;
  font-size: 15px;
  font-weight: 700;
}

.metric-tile strong {
  display: block;
  color: #223342;
  font-size: 20px;
  line-height: 1.15;
}

.metric-tile small {
  display: block;
  margin-top: 6px;
  color: #8b98a3;
  font-size: 14px;
}

.metric-icon {
  width: 42px;
  height: 42px;
  display: inline-block;
  position: relative;
  border-radius: 8px;
  background: #edf7f8;
  color: var(--cyan);
}

.metric-tile.good .metric-icon {
  background: #e9f8f4;
  color: #20a77e;
}

.metric-tile.warning .metric-icon {
  background: #fff4df;
  color: #e49b20;
}

.metric-icon.wan::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 14px;
  left: 11px;
  top: 12px;
  border: 3px solid currentColor;
  border-radius: 3px 3px 7px 7px;
}

.metric-icon.wan::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 5px;
  left: 15px;
  bottom: 9px;
  border: 3px solid currentColor;
  border-top: 0;
}

.metric-icon.clients-mini::before,
.metric-icon.clients-mini::after {
  content: "";
  position: absolute;
  border: 3px solid currentColor;
  border-radius: 3px;
}

.metric-icon.clients-mini::before {
  width: 17px;
  height: 12px;
  left: 9px;
  top: 11px;
}

.metric-icon.clients-mini::after {
  width: 12px;
  height: 9px;
  right: 8px;
  bottom: 10px;
}

.metric-icon.speed::before {
  content: "";
  position: absolute;
  width: 23px;
  height: 23px;
  left: 9px;
  top: 10px;
  border: 3px solid currentColor;
  border-bottom-color: transparent;
  border-radius: 50%;
}

.metric-icon.speed::after {
  content: "";
  position: absolute;
  width: 13px;
  height: 3px;
  left: 20px;
  top: 22px;
  border-radius: 2px;
  background: currentColor;
  transform: rotate(-34deg);
  transform-origin: left center;
}

.metric-icon.update::before {
  content: "";
  position: absolute;
  width: 21px;
  height: 21px;
  left: 10px;
  top: 10px;
  border: 3px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
}

.metric-icon.update::after {
  content: "";
  position: absolute;
  right: 9px;
  top: 8px;
  border-left: 7px solid currentColor;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  transform: rotate(28deg);
}

.dashboard-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 12px;
  margin-top: 12px;
}

.topology-card {
  min-height: 384px;
}

.topology-stage {
  height: 334px;
  display: grid;
  place-items: center;
  padding: 16px;
  background: #f0f6f8;
}

.topology-stage img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 6px;
}

.status-column {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 12px;
}

.health-body {
  padding: 20px;
}

.health-score {
  height: 108px;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 8px;
  background: #edf8f4;
  color: #1c8c70;
}

.health-score strong {
  font-size: 40px;
  line-height: 1;
}

.health-score span {
  margin-top: 7px;
  font-size: 15px;
  font-weight: 700;
}

.health-bars {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.health-bars div {
  display: grid;
  grid-template-columns: 58px 1fr 42px;
  align-items: center;
  gap: 10px;
  color: #697987;
  font-size: 15px;
}

.health-bars i {
  height: 7px;
  border-radius: 5px;
  background: #e4ecef;
  overflow: hidden;
}

.health-bars i::before {
  content: "";
  display: block;
  width: var(--value);
  height: 100%;
  border-radius: inherit;
  background: var(--cyan);
}

.health-bars strong {
  color: #2b3b49;
  text-align: right;
}

.ownership-stack {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.ownership-stack div {
  min-height: 66px;
  padding: 12px;
  border: 1px solid #dce6ea;
  border-radius: 6px;
  background: #fbfdfe;
}

.ownership-stack strong {
  display: block;
  margin-bottom: 6px;
  color: #263746;
  font-size: 16px;
}

.ownership-stack span {
  display: block;
  color: #778694;
  font-size: 15px;
  line-height: 1.45;
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 16px;
}

.quick-actions button {
  min-height: 36px;
  border: 1px solid #dce6ea;
  border-radius: 6px;
  background: #fff;
  color: #405564;
  font-size: 15px;
  font-weight: 700;
}

.dashboard-bottom-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.dashboard-card {
  min-height: 224px;
}

.dashboard-card.ethernet-card {
  height: auto;
}

.compact-info-table {
  padding: 10px 18px 16px;
}

.compact-info-table div {
  min-height: 39px;
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  align-items: center;
  border-bottom: 1px solid #edf1f3;
  color: #697987;
  font-size: 15px;
}

.compact-info-table strong {
  min-width: 0;
  color: #223342;
  font-size: 15px;
  text-align: right;
  overflow-wrap: anywhere;
}

.service-card-body {
  min-height: 174px;
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  color: #25274d;
  font-size: 15px;
  font-weight: 500;
}

.wifi-overview-list {
  display: grid;
  gap: 10px;
  padding: 16px 18px;
}

.wifi-overview-list div {
  min-height: 44px;
  display: grid;
  grid-template-columns: 58px 1fr;
  column-gap: 10px;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid #edf1f3;
}

.wifi-overview-list span {
  color: var(--cyan);
  font-size: 15px;
  font-weight: 800;
}

.wifi-overview-list strong {
  min-width: 0;
  color: #223342;
  font-size: 15px;
  overflow-wrap: anywhere;
}

.wifi-overview-list small {
  grid-column: 2;
  color: #8b98a3;
  font-size: 14px;
}

.capability-domain-panel {
  margin-top: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(33, 50, 67, .04);
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.section-head h2 {
  margin: 0;
  color: #263746;
  font-size: 18px;
}

.section-head > span {
  color: #7e8c98;
  font-size: 15px;
  font-weight: 700;
}

.capability-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.capability-card {
  min-height: 178px;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 8px;
  padding: 13px;
  border: 1px solid #e0e7eb;
  border-radius: 8px;
  background: #fbfdfe;
}

.capability-card b {
  color: #9aa8b3;
  font-size: 15px;
}

.capability-card h3 {
  margin: 0;
  color: #233442;
  font-size: 17px;
  line-height: 1.25;
}

.capability-card p {
  margin: 0;
  color: #697987;
  font-size: 15px;
  line-height: 1.45;
}

.capability-card > span {
  width: fit-content;
  max-width: 100%;
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 800;
}

.capability-card.gateway > span {
  background: #eaf7f8;
  color: #16899a;
}

.capability-card.whole > span {
  background: #eef7f0;
  color: #2c8b55;
}

.capability-card.mixed > span {
  background: #fff4df;
  color: #b47613;
}

.capability-card.device > span {
  background: #f1f2f6;
  color: #59667a;
}

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 5px 16px rgba(33, 50, 67, .05);
  overflow: hidden;
}

.card-head {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  background: var(--card-head);
  border-bottom: 1px solid var(--line);
}

.card-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d5d5de;
}

.dot.active {
  background: var(--cyan);
}

.card h2 {
  margin: 0;
  color: #373850;
  font-size: 19px;
  font-weight: 700;
}

.wan-badge {
  height: 20px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 4px;
  background: #17b9d2;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.gear {
  width: 17px;
  height: 17px;
  border: 0;
  background: transparent;
  position: relative;
}

.gear::before {
  content: "";
  position: absolute;
  inset: 1px;
  border: 4px dotted #8e9099;
  border-radius: 50%;
}

.ethernet-card {
  height: 270px;
}

.ethernet-body {
  height: 222px;
  display: grid;
  grid-template-columns: 1fr 270px;
  align-items: center;
  padding: 24px 40px 22px 28px;
}

.info-table {
  align-self: start;
  padding-top: 2px;
}

.info-table div {
  height: 37px;
  display: grid;
  grid-template-columns: 170px 1fr;
  align-items: center;
  border-bottom: 1px solid #e5e5ec;
  color: #535671;
  font-size: 15px;
}

.info-table strong {
  font-weight: 700;
  text-align: right;
}

.modify-button {
  width: 100px;
  height: 30px;
  display: block;
  margin: 16px auto 0;
  border: 1px solid #62658d;
  border-radius: 18px;
  background: #fff;
  color: #43466d;
  font-size: 15px;
}

.ethernet-illustration {
  display: grid;
  place-items: center;
}

.port-icon {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #f0f0f6;
  position: relative;
}

.port-icon::before {
  content: "";
  position: absolute;
  width: 34px;
  height: 48px;
  left: 43px;
  top: 28px;
  border: 5px solid #373860;
  border-radius: 3px 3px 9px 9px;
}

.port-icon::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 28px;
  left: 51px;
  top: 78px;
  border: 5px solid #373860;
  border-top: 0;
}

.small-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.small-card-grid.has-connecting-repeater {
  grid-template-columns: repeat(2, 1fr);
}

.small-card {
  height: 183px;
}

.small-body {
  height: 135px;
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  color: #4c4f76;
  font-size: 15px;
  font-weight: 600;
}

.small-body p {
  margin: 0;
}

.repeater-card {
  border-radius: 4px;
}

.repeater-card .card-head {
  height: 48px;
  padding: 0 20px;
  background: #f3f3f7;
}

.repeater-card .card-title {
  gap: 13px;
}

.repeater-card .dot {
  width: 7px;
  height: 7px;
  background: #d3d3db;
}

.repeater-card h2 {
  color: #1f213f;
  font-size: 19px;
  font-weight: 500;
}

.repeater-card .gear {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  color: #8e8f98;
}

.repeater-card .gear::before {
  content: "\2699";
  position: static;
  inset: auto;
  border: 0;
  border-radius: 0;
  font-size: 19px;
  line-height: 1;
}

.repeater-body {
  grid-template-columns: 78px 1fr;
  gap: 20px;
  padding: 0 20px;
  color: #25274d;
  font-size: 15px;
  font-weight: 500;
}

.repeater-body p {
  margin-top: 1px;
  line-height: 1.25;
}

.repeater-card.is-connecting {
  grid-column: 1 / -1;
  height: 216px;
}

.repeater-card.is-connected {
  grid-column: 1 / -1;
  height: 316px;
}

.repeater-card.is-connecting .card-head {
  height: 48px;
}

.repeater-card.is-connected .card-head {
  height: 56px;
}

.repeater-card.is-connecting .dot {
  background: #ffad20;
}

.repeater-card.is-connected .dot {
  background: #11c7bb;
}

.selected-band-badge {
  min-width: 48px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border: 1px solid #343865;
  border-radius: 4px;
  color: #292d5f;
  font-size: 16px;
  line-height: 1;
}

.connected-band-badge {
  min-width: 48px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 8px;
  border-radius: 4px;
  background: #14b8ce;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

.connected-wifi-mark {
  width: 11px;
  height: 9px;
  display: inline-block;
  position: relative;
  color: #fff;
}

.connected-wifi-mark::before,
.connected-wifi-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  border: 1px solid currentColor;
  border-color: currentColor transparent transparent transparent;
  border-radius: 50%;
  transform: translateX(-50%);
}

.connected-wifi-mark::before {
  top: 0;
  width: 11px;
  height: 11px;
}

.connected-wifi-mark::after {
  top: 4px;
  width: 6px;
  height: 6px;
}

.repeater-connecting-body {
  height: 168px;
  display: grid;
  grid-template-columns: 1fr 170px;
  align-items: center;
  gap: 24px;
  padding: 22px 44px 22px 24px;
}

.repeater-connecting-main {
  min-width: 0;
}

.repeater-connected-body {
  height: 260px;
  display: grid;
  grid-template-columns: 1fr 170px;
  align-items: center;
  gap: 24px;
  padding: 18px 44px 22px 24px;
}

.repeater-connected-main {
  min-width: 0;
}

.connected-info-table {
  padding-right: 4px;
}

.connected-info-table div {
  min-height: 36px;
  display: grid;
  grid-template-columns: 165px 1fr;
  align-items: center;
  border-bottom: 1px solid #e5e5ec;
  color: #535671;
  font-size: 15px;
}

.connected-info-table strong {
  color: #242643;
  font-weight: 700;
  text-align: right;
}

.connecting-alert {
  height: 38px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 4px;
  background: #fff5e5;
  color: #ff9f1c;
  font-size: 15px;
  font-weight: 600;
}

.connecting-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 22px;
}

.connected-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
}

.abort-button {
  width: 100px;
  height: 30px;
  border: 0;
  border-radius: 18px;
  background: #e44582;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}

.switch-network-button {
  min-width: 116px;
  height: 30px;
  padding: 0 16px;
  border: 1px solid #62658d;
  border-radius: 18px;
  background: #fff;
  color: #43466d;
  font-size: 15px;
}

.repeater-connecting-icon {
  justify-self: center;
  width: 118px;
  height: 118px;
}

.repeater-connecting-icon.wifi-large::before {
  left: 26px;
  top: 53px;
  font-size: 28px;
}

.repeater-connecting-icon.wifi-large::after {
  width: 66px;
  height: 66px;
  left: 25px;
  top: 24px;
}

.round-icon {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #f0f0f6;
  position: relative;
}

.wifi-large::before {
  content: "Wi-Fi";
  position: absolute;
  left: 12px;
  top: 25px;
  color: #38395f;
  font-size: 18px;
  font-weight: 700;
}

.wifi-large::after {
  content: "";
  position: absolute;
  width: 35px;
  height: 35px;
  left: 13px;
  top: 12px;
  border: 3px solid #38395f;
  border-color: #38395f transparent transparent transparent;
  border-radius: 50%;
}

.usb-large::before,
.usb-large::after {
  content: "";
  position: absolute;
  border: 3px solid #38395f;
}

.usb-large::before {
  width: 15px;
  height: 28px;
  left: 16px;
  top: 18px;
  border-radius: 3px;
}

.usb-large::after {
  width: 15px;
  height: 34px;
  right: 15px;
  top: 14px;
  border-radius: 3px;
}

.tower-large::before {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  left: 16px;
  top: 16px;
  border: 4px solid #38395f;
  border-bottom-color: transparent;
  border-radius: 50%;
}

.tower-large::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 34px;
  left: 29px;
  top: 17px;
  background: #38395f;
}

.outline-button {
  width: 100px;
  height: 30px;
  margin-top: 10px;
  border: 1px solid #62658d;
  border-radius: 18px;
  background: #fff;
  color: #43466d;
  font-size: 15px;
}

.repeater-card .outline-button {
  width: 100px;
  height: 30px;
  margin-top: 11px;
  border-color: #38395f;
  color: #25274d;
}

.wireless-content {
  width: 100%;
  max-width: 1035px;
  min-height: 1396px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  padding: 28px 20px 78px;
}

.wireless-title {
  margin: 0 0 16px 14px;
  color: #292b5c;
  font-size: 24px;
  line-height: 1;
  font-weight: 700;
}

.wireless-panel {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(33, 50, 67, .05);
}

.wireless-panel-head {
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  background: #f3f3f7;
  border-bottom: 1px solid #e5e5ec;
}

.wireless-panel-head h2 {
  margin: 0;
  color: #171936;
  font-size: 18px;
  line-height: 1;
  font-weight: 500;
}

.mlo-panel {
  aspect-ratio: 1051 / 319;
  height: auto;
  background: transparent;
  box-shadow: none;
  margin-bottom: 20px;
}

.mlo-full-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.main-network-panel {
  min-height: 668px;
  margin-bottom: 20px;
}

.wifi-card-list {
  display: grid;
  gap: 20px;
  padding: 20px;
}

.wifi-card {
  min-height: 177px;
  padding: 18px 16px 18px 32px;
  border: 1px solid #cfd0d8;
  border-radius: 4px;
  background: #fff;
}

.wifi-card-top {
  height: 38px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid #d7d8df;
}

.wifi-band {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #202248;
  font-size: 17px;
}

.wifi-dot {
  width: 24px;
  height: 24px;
  display: inline-block;
  border-radius: 50%;
  background: #10c3b7;
  position: relative;
}

.wifi-dot::before {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  left: 5px;
  top: 7px;
  border: 2px solid #fff;
  border-color: #fff transparent transparent transparent;
  border-radius: 50%;
}

.wifi-dot::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  left: 10px;
  top: 13px;
  border-radius: 50%;
  background: #fff;
}

.wifi-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tiny-toggle {
  width: 36px;
  height: 22px;
  border: 0;
  border-radius: 999px;
  padding: 0;
  background: #cbd0d8;
  position: relative;
}

.tiny-toggle::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 2px;
  top: 2px;
  border-radius: 50%;
  background: #fff;
}

.tiny-toggle.is-on {
  background: #10c3b7;
}

.tiny-toggle.is-on::after {
  transform: translateX(14px);
}

.tiny-gear {
  width: 18px;
  height: 18px;
  border: 0;
  background: transparent;
  position: relative;
}

.tiny-gear::before {
  content: "";
  position: absolute;
  inset: 1px;
  border: 4px dotted #8b8d97;
  border-radius: 50%;
}

.wifi-card-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 200px) 78px;
  align-items: center;
  gap: 16px;
  min-height: 102px;
  padding-top: 13px;
}

.wifi-card-body > div:first-child {
  min-width: 0;
}

.wifi-card h3 {
  margin: 0 0 18px;
  color: #181a2f;
  font-size: 19px;
  overflow-wrap: anywhere;
}

.wifi-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.wifi-tags span {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  border-radius: 3px;
  background: #e4fbff;
  color: #00a4d6;
  font-size: 15px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.wifi-tags span:nth-child(3) {
  background: #eceeff;
  color: #526cff;
}

.wifi-password {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #40425a;
  font-size: 15px;
}

.wifi-password span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eye {
  width: 14px;
  height: 10px;
  border: 2px solid #8d9099;
  border-radius: 50%;
  position: relative;
}

.eye::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  left: 3px;
  top: 1px;
  border-radius: 50%;
  background: #8d9099;
}

.qr-code {
  width: 73px;
  height: 73px;
  background: url("./assets/wifi-qr.svg") center / contain no-repeat;
  image-rendering: pixelated;
}

.halow-network-panel {
  min-height: 184px;
}

.network-empty {
  padding: 20px;
}

.halow-card-list {
  display: none;
  padding: 0 20px 20px;
}

.halow-network-panel.has-halow .network-empty {
  display: none;
}

.halow-network-panel.has-halow .halow-card-list {
  display: grid;
  padding-top: 20px;
}

.network-notice {
  min-height: 64px;
  display: grid;
  grid-template-columns: 18px 1fr 125px;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border-radius: 4px;
  background: #eef2ff;
}

.mlo-info {
  width: 14px;
  height: 14px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: #22346d;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.network-notice p {
  margin: 0;
  color: #11235e;
  font-size: 17px;
  line-height: 1.45;
}

.add-button {
  width: 124px;
  height: 36px;
  border: 0;
  border-radius: 20px;
  background: #5572f5;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
}

.drawer-layer {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 40;
}

.drawer-layer.is-open {
  display: block;
}

.drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .5);
}

.network-drawer {
  position: absolute;
  top: 0;
  right: 0;
  width: 755px;
  max-width: calc(100vw - 220px);
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: -5px 0 18px rgba(0, 0, 0, .18);
  transform: translateX(100%);
  transition: transform .18s ease;
}

.drawer-layer.is-open .network-drawer {
  transform: translateX(0);
}

.drawer-head {
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px 0 26px;
  background: #f6f6fb;
  border-bottom: 1px solid #e0e1e8;
}

.drawer-head h2 {
  margin: 0;
  color: #22243f;
  font-size: 20px;
  font-weight: 600;
}

.drawer-close {
  width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
  position: relative;
}

.drawer-close::before,
.drawer-close::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 2px;
  width: 1px;
  height: 18px;
  background: #9a9ca8;
}

.drawer-close::before {
  transform: rotate(45deg);
}

.drawer-close::after {
  transform: rotate(-45deg);
}

.drawer-body {
  flex: 1;
  padding: 32px 46px 24px 32px;
}

.drawer-row {
  min-height: 56px;
  display: grid;
  grid-template-columns: 260px 1fr;
  align-items: center;
  border-bottom: 1px solid #e6e7ee;
}

.drawer-row label {
  color: #35376a;
  font-size: 17px;
}

.drawer-row input,
.drawer-row select {
  width: 200px;
  height: 36px;
  justify-self: end;
  border: 1px solid #d7d8df;
  border-radius: 3px;
  background: #fff;
  color: #30324a;
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  padding: 0 14px;
}

.drawer-row select {
  appearance: none;
  background:
    linear-gradient(45deg, transparent 50%, #c4c6d1 50%) right 14px center / 6px 6px no-repeat,
    linear-gradient(135deg, #c4c6d1 50%, transparent 50%) right 10px center / 6px 6px no-repeat,
    #fff;
}

.drawer-radios {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 18px;
}

.radio-chip {
  width: 112px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #d6d7df;
  border-radius: 4px;
  background: #fff;
  color: #36384f;
  font-size: 17px;
  font-weight: 600;
}

.radio-chip.active {
  border-color: #14b8ce;
  background: #e8fbff;
}

.radio-chip input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #14b8ce;
}

.password-field {
  justify-self: end;
  width: 200px;
  position: relative;
}

.password-field input {
  width: 100%;
  padding-right: 36px;
}

.password-field .eye {
  position: absolute;
  right: 11px;
  top: 13px;
}

.drawer-toggle {
  justify-self: end;
}

.drawer-value {
  justify-self: end;
  color: #35376a;
  font-size: 17px;
}

.wifi-settings-layer {
  z-index: 46;
}

.wifi-settings-drawer {
  width: 608px;
  max-width: min(608px, calc(100vw - 220px));
  box-shadow: -4px 0 14px rgba(0, 0, 0, .16);
}

.wifi-settings-head {
  height: 48px;
  padding: 0 24px;
}

.wifi-settings-head h2 {
  font-size: 19px;
  font-weight: 500;
}

.wifi-settings-body {
  padding: 28px 26px 24px;
  overflow-y: auto;
}

.wifi-settings-body .drawer-row {
  min-height: 48px;
  grid-template-columns: 220px 1fr;
}

.wifi-settings-body .drawer-row label {
  color: #444979;
  font-size: 15px;
  font-weight: 600;
}

.wifi-settings-body .drawer-row input,
.wifi-settings-body .drawer-row select,
.wifi-settings-body .password-field {
  width: 160px;
}

.wifi-settings-body .drawer-row input,
.wifi-settings-body .drawer-row select {
  height: 30px;
  font-size: 15px;
  font-weight: 500;
  color: #33354a;
}

.wifi-settings-body .password-field .eye {
  top: 10px;
}

.disabled-band-chip {
  justify-self: end;
  min-width: 80px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: #ededf2;
  color: #aaaebd;
  font-size: 15px;
  font-weight: 600;
}

.disabled-band-chip::before {
  content: "";
  width: 12px;
  height: 12px;
  margin-right: 7px;
  border-radius: 50%;
  border: 3px solid #d4d6df;
}

.radio-config-section {
  margin-top: 10px;
}

.radio-config-section h3 {
  height: 36px;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 12px;
  border-radius: 4px;
  background: #f0f1f6;
  color: #5d6070;
  font-size: 15px;
  font-weight: 700;
}

.radio-config-notice {
  min-height: 40px;
  display: grid;
  grid-template-columns: 16px 1fr;
  align-items: center;
  gap: 10px;
  margin: 12px 0 4px;
  padding: 10px 12px;
  border-radius: 4px;
  background: #eef2ff;
}

.radio-config-notice p {
  margin: 0;
  color: #526085;
  font-size: 15px;
  font-weight: 600;
}

.drawer-actions {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  border-top: 1px solid #e0e1e8;
  background: #f6f6fb;
}

.drawer-button {
  width: 125px;
  height: 36px;
  border-radius: 19px;
  font-size: 17px;
  font-weight: 600;
}

.drawer-button.cancel {
  border: 1px solid #323562;
  background: transparent;
  color: #333660;
}

.drawer-button.apply {
  border: 0;
  background: #5572f5;
  color: #fff;
}

.repeater-join-layer {
  z-index: 45;
}

.repeater-join-drawer {
  width: 608px;
  max-width: min(608px, calc(100vw - 220px));
  box-shadow: none;
}

.repeater-join-head {
  height: 48px;
  padding: 0 24px;
}

.repeater-join-head h2 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #20233d;
  font-size: 19px;
  font-weight: 500;
}

.verified-icon {
  width: 13px;
  height: 13px;
  display: inline-block;
  border-radius: 50%;
  background: #8d909d;
  position: relative;
}

.verified-icon::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 3px;
  width: 4px;
  height: 7px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.drawer-exit,
.text-action {
  border: 0;
  background: transparent;
  color: #5572f5;
  font-size: 15px;
}

.drawer-exit {
  padding: 8px 0;
}

.repeater-join-body {
  flex: 1;
  padding: 26px 24px 0;
  background: #fff;
  overflow-y: auto;
}

.wifi-support-notice {
  min-height: 78px;
  display: grid;
  grid-template-columns: 16px 1fr 18px;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 4px;
  background: #eef1ff;
  color: #596083;
}

.notice-info {
  width: 11px;
  height: 11px;
  display: inline-grid;
  place-items: center;
  align-self: center;
  justify-self: center;
  border-radius: 50%;
  background: #4a5682;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.wifi-support-notice p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 600;
}

.band-pill {
  min-width: 44px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 4px;
  padding: 0 8px;
  border: 1px solid #586192;
  border-radius: 4px;
  background: #f7f8ff;
  color: #2d315f;
  font-weight: 500;
  line-height: 1;
}

.notice-close {
  width: 18px;
  height: 18px;
  border: 0;
  background: transparent;
  position: relative;
}

.notice-close::before,
.notice-close::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 3px;
  width: 2px;
  height: 12px;
  border-radius: 2px;
  background: #8b8d99;
}

.notice-close::before {
  transform: rotate(45deg);
}

.notice-close::after {
  transform: rotate(-45deg);
}

.wifi-scan-state {
  height: 176px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  color: #404678;
  font-size: 17px;
  font-weight: 600;
}

.wifi-scan-state p {
  margin: 0;
}

.scan-spinner {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #17bfd0 0 36deg, transparent 36deg 72deg, #17bfd0 72deg 108deg, transparent 108deg 144deg, #17bfd0 144deg 180deg, transparent 180deg 216deg, #17bfd0 216deg 252deg, transparent 252deg 288deg, #17bfd0 288deg 324deg, transparent 324deg 360deg);
  -webkit-mask: radial-gradient(circle, transparent 0 9px, #000 10px);
  mask: radial-gradient(circle, transparent 0 9px, #000 10px);
  animation: scan-spin 1s linear infinite;
}

@keyframes scan-spin {
  to {
    transform: rotate(360deg);
  }
}

.wifi-other-row {
  height: 66px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  border-bottom: 1px solid #e6e7ee;
  padding-bottom: 11px;
}

.available-networks {
  display: none;
  margin-top: 20px;
}

.repeater-join-layer.has-networks .wifi-scan-state,
.repeater-join-layer.has-networks .wifi-other-row {
  display: none;
}

.repeater-join-layer.has-networks .available-networks {
  display: block;
}

.available-head {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  border-radius: 4px;
  background: #f0f0f4;
}

.available-head h3 {
  margin: 0;
  color: #595a66;
  font-size: 17px;
  font-weight: 700;
}

.network-list {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.network-list li {
  min-height: 42px;
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 10px;
  color: #14172e;
  font-size: 19px;
}

.network-wifi-icon {
  width: 22px;
  height: 18px;
  position: relative;
  display: inline-block;
  color: #08b7d0;
}

.network-wifi-icon::before,
.network-wifi-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  border: 2px solid currentColor;
  border-color: currentColor transparent transparent transparent;
  border-radius: 50%;
  transform: translateX(-50%);
}

.network-wifi-icon::before {
  top: 0;
  width: 22px;
  height: 22px;
}

.network-wifi-icon::after {
  top: 6px;
  width: 13px;
  height: 13px;
}

.network-wifi-icon {
  background: radial-gradient(circle at 50% 92%, currentColor 0 3px, transparent 3.5px);
}

.network-band {
  min-width: 56px;
  height: 23px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #25295c;
  border-radius: 4px;
  color: #24275b;
  font-size: 17px;
  line-height: 1;
}

.repeater-join-actions {
  height: 52px;
}

.refresh-button {
  width: 124px;
  background: #5a72f6;
}

.copyright {
  position: absolute;
  right: 42px;
  bottom: 14px;
  color: #666986;
  font-size: 14px;
}

.copyright a {
  color: #5578ff;
  text-decoration: none;
}

.modal-layer {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 30;
}

.modal-layer.is-open {
  display: flex;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .54);
}

.repeater-modal {
  position: relative;
  width: 592px;
  height: 400px;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .28);
  overflow: hidden;
  color: #171a3c;
}

.modal-head {
  height: 52px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: #f6f6fb;
  border-bottom: 1px solid #e6e6ee;
}

.modal-head h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1;
  font-weight: 500;
}

.modal-body {
  height: 290px;
  padding: 36px 24px 0;
}

.inline-info {
  display: inline-grid;
  place-items: center;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #353664;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  font-style: normal;
  vertical-align: 2px;
}

.repeater-option-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  align-items: center;
  gap: 22px;
  margin-bottom: 26px;
}

.repeater-option-row label {
  color: #303165;
  font-size: 17px;
  line-height: 1.2;
}

.toggle-switch {
  justify-self: end;
  width: 36px;
  height: 22px;
  border: 0;
  border-radius: 999px;
  background: #d2d4dd;
  position: relative;
  padding: 0;
}

.toggle-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .22);
  transition: transform .16s ease;
}

.toggle-switch.is-on {
  background: #10c3b7;
}

.toggle-switch.is-on::after {
  transform: translateX(14px);
}

.band-row-option {
  align-items: start;
}

.band-segment {
  width: 318px;
  height: 38px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1.12fr;
  align-items: stretch;
  padding: 2px;
  border: 1px solid #cfd0d8;
  border-radius: 4px;
  background: #eeeef3;
}

.band-segment button {
  min-width: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #17182f;
  font-size: 17px;
  line-height: 1;
  white-space: nowrap;
}

.band-segment button.active {
  background: #14b8ce;
  color: #fff;
}

.band-segment button[role="radio"]:focus-visible,
.toggle-switch:focus-visible {
  outline: 2px solid #526fff;
  outline-offset: 2px;
}

.modal-actions {
  height: 58px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  background: #f2f2f7;
  border-top: 1px solid #e1e1e8;
}

.modal-button {
  width: 125px;
  height: 36px;
  border-radius: 19px;
  font-size: 17px;
}

.modal-button.cancel {
  border: 1px solid #30345f;
  background: transparent;
  color: #202449;
}

.modal-button.apply {
  border: 0;
  background: #5470f2;
  color: #fff;
  font-weight: 600;
}

@media (max-width: 1180px) {
  .wifi-card-body {
    grid-template-columns: minmax(0, 1fr) 78px;
  }

  .wifi-password {
    grid-column: 1;
    grid-row: 2;
  }

  .qr-code {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

@media (max-width: 1040px) {
  .admin-frame {
    width: 100%;
  }

  .metric-grid,
  .dashboard-bottom-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .capability-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-main-grid {
    grid-template-columns: 1fr;
  }

  .status-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
  }

  .expert-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ops-grid {
    grid-template-columns: 1fr;
  }

  .ops-interfaces,
  .ops-events {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 760px) {
  .experience-switch button {
    padding: 0 7px;
    font-size: 13px;
  }

  .top-tools .tool,
  .top-tools::before,
  .top-tools::after {
    display: none;
  }

  .admin-body {
    grid-template-columns: 72px 1fr;
  }

  .menu-item {
    justify-content: center;
    padding: 0;
  }

  .menu-item span:last-child,
  .menu-item.has-arrow::after {
    display: none;
  }

  .init-page {
    padding: 16px;
  }

  .init-hero {
    grid-template-columns: 1fr;
    padding: 22px;
  }

  .init-router-art {
    height: 104px;
  }

  .init-steps {
    grid-template-columns: 1fr;
  }

  .init-form {
    padding: 24px 22px;
  }

  .home-summary,
  .home-main-grid {
    grid-template-columns: 1fr;
  }

  .home-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .home-device-status {
    justify-items: start;
  }

  .home-device-panel {
    width: 100%;
    justify-content: space-between;
  }

  .home-device-image {
    width: 142px;
    height: 82px;
  }

  .home-status-grid {
    grid-template-columns: 1fr;
  }

  .minimal-nav {
    min-height: 88px;
    justify-content: flex-start;
    gap: 4px;
    padding: 8px 10px 0;
    overflow-x: auto;
  }

  .minimal-nav button {
    min-width: 86px;
    width: 86px;
    font-size: 12px;
  }

  .minimal-nav button span {
    width: 30px;
    height: 30px;
    font-size: 18px;
  }

  .minimal-canvas {
    margin-top: 10px;
    padding: 28px 22px 44px;
  }

  .minimal-map {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .minimal-map-line {
    width: 1px;
    height: 28px;
    justify-self: center;
  }

  .minimal-map-divider {
    width: 70%;
    height: 1px;
    justify-self: center;
  }

  .minimal-status-card > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 0;
  }

  .minimal-quick-actions {
    flex-wrap: wrap;
  }

  .wifi-card {
    padding: 16px;
  }

  .wifi-card-body {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .wifi-password,
  .qr-code {
    grid-column: 1;
    grid-row: auto;
  }

  .card-head:has(.topology-switch) {
    min-height: 92px;
    align-items: flex-start;
    flex-direction: column;
    padding: 14px 16px;
  }

  .expert-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mesh-home-topology { min-height: 520px; }
  .floor-plan-toolbar { left: 10px; right: 10px; justify-content: flex-end; }
  .floor-plan-toolbar > span { display: none; }

  .network-path {
    grid-template-columns: 1fr;
  }

  .dashboard-board {
    padding: 12px 12px 70px;
  }

  .dashboard-hero {
    align-items: flex-start;
    flex-direction: column;
    padding: 18px;
  }

  .device-summary {
    align-items: flex-start;
  }

  .device-mark {
    width: 54px;
    height: 54px;
    flex-basis: 54px;
    font-size: 19px;
  }

  .dashboard-hero h1 {
    font-size: 23px;
  }

  .hero-actions,
  .hero-actions button {
    width: 100%;
  }

  .metric-grid,
  .dashboard-bottom-grid,
  .status-column,
  .capability-grid {
    grid-template-columns: 1fr;
  }

  .section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .topology-card {
    min-height: 300px;
  }

  .topology-stage {
    height: 250px;
    padding: 10px;
  }

  .network-drawer,
  .repeater-join-drawer {
    width: 100vw;
    max-width: 100vw;
  }

  .repeater-join-body {
    padding: 20px 16px 0;
  }

  .wifi-support-notice {
    grid-template-columns: 16px 1fr 18px;
    align-items: start;
  }
}

/* Keep feature card headers compact after legacy dashboard rules. */
.feature-card > .section-head {
  min-height: 58px;
  align-items: center;
  margin-bottom: 0;
  padding: 0 17px;
  border-bottom: 1px solid var(--line);
  background: #fafbfc;
}

.feature-card > .section-head h2 {
  font-size: 17px;
}

/* Independent interface editions share the same visual language. */
.edition-details { margin: 16px 0; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.edition-details summary { color: #47727d; font-size: 16px; cursor: pointer; }
.edition-details[open] summary { margin-bottom: 16px; }
.edition-static-section { margin: 16px 0; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.edition-section-title { margin-bottom: 16px; color: #47727d; font-size: 16px; }
.edition-static-section .client-metrics { margin-bottom: 0; }
body[data-experience="expert"] .feature-shell { max-width: none; }
body[data-experience="expert"] .feature-card { border-radius: 6px; box-shadow: none; }
body[data-experience="expert"] .table-row { font-variant-numeric: tabular-nums; }
body[data-experience="expert"] .feature-head { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.settings-directory { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.settings-directory button { display: grid; gap: 10px; padding: 24px; text-align: left; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: #294451; cursor: pointer; }
.settings-directory button:hover { border-color: #39b8c4; background: #f4fcfc; }
.settings-directory strong { font-size: 18px; }
.settings-directory span { color: #718591; font-size: 15px; }
body[data-experience="minimal"]:not([data-travel-advanced="true"]) .feature-page,
body[data-experience="minimal"]:not([data-travel-advanced="true"]) .wireless-content { max-width: 1080px; margin: 24px auto; padding: 28px; background: #fff; border-radius: 12px; }
body[data-experience="minimal"]:not([data-travel-advanced="true"]) .feature-layout { grid-template-columns: 1fr; }
body[data-experience="minimal"]:not([data-travel-advanced="true"]) .wireless-title,
body[data-experience="minimal"]:not([data-travel-advanced="true"]) .feature-head h1 { font-size: 24px; color: #294451; }
body[data-experience="minimal"]:not([data-travel-advanced="true"]) .wifi-card-body { grid-template-columns: minmax(0, 1fr) 140px 78px; }
body[data-experience="minimal"]:not([data-travel-advanced="true"]) .minimal-nav { background: #e9f8fa; border-bottom: 1px solid #cfe9ec; }
body[data-experience="minimal"]:not([data-travel-advanced="true"]) .minimal-nav button { color: #47727d; }
body[data-experience="minimal"]:not([data-travel-advanced="true"]) .minimal-nav button span { border-color: #8fcdd3; }
body[data-experience="minimal"]:not([data-travel-advanced="true"]) .minimal-nav button.active span { border-color: #1aa8b6; color: #1aa8b6; }
body[data-experience="minimal"]:not([data-travel-advanced="true"]) .minimal-nav button.active::after { background: #1aa8b6; }
body[data-experience="expert"] .router-home { display: flex; flex-direction: column; gap: 16px; background: var(--page-bg); }
body[data-experience="expert"] .home-summary { min-height: 100px; background: #fff; border-color: var(--line); order: 0; }
body[data-experience="expert"] .home-summary h1,
body[data-experience="expert"] .home-device-status strong { color: #203241; }
body[data-experience="expert"] .home-summary-copy,
body[data-experience="expert"] .home-device-status { color: #70808e; }
body[data-experience="expert"] .mode-badge { background: #e7f7f8; color: #178f9e; }
body[data-experience="expert"] .home-device-image { width: 110px; height: 64px; }
body[data-experience="expert"] .expert-metrics { order: 1; margin: 0; }
body[data-experience="expert"] .expert-operations { order: 2; margin: 0; }
body[data-experience="expert"] .home-main-grid { display: grid; order: 3; margin: 0; grid-template-columns: 1fr; }
body[data-experience="expert"] .home-side-stack { display: none; }
.expert-operations { color: #294451; background: #fff; border: 1px solid var(--line); box-shadow: none; }
.expert-operations > header h2 { color: #203241; }
.expert-operations > header p { color: #199cab; }
.ops-grid article { background: #f8fbfc; border-color: #dce7eb; }
.ops-card-title strong, .ops-health dd, .ops-events li strong { color: #294451; }
.ops-card-title span, .expert-operations > header > span, .ops-health dt, .ops-events time, .ops-events li small { color: #70808e; }
.ops-card-title button { color: #178f9e; }
.traffic-legend { color: #1595a3; }
.traffic-legend span:last-child { color: #4978b5; }
.health-score b { color: #20a17e; }
.ops-health dl div, .interface-table > div { border-color: #dce7eb; }
.interface-table > div { color: #405b68; }
.interface-table em { color: #188d70; }
.interface-table em.down { color: #bc6262; }
@media (max-width: 760px) {
  .settings-directory { grid-template-columns: 1fr; }
  body[data-experience="minimal"]:not([data-travel-advanced="true"]) .feature-page,
  body[data-experience="minimal"]:not([data-travel-advanced="true"]) .wireless-content { margin: 12px; padding: 16px; }
  body[data-experience="minimal"]:not([data-travel-advanced="true"]) .wifi-card-body { grid-template-columns: minmax(0, 1fr); }
}

/* Wireless follows the shared feature-page language instead of the legacy demo layout. */
.wireless-content { max-width: 1180px; min-height: 0; padding: 22px 24px 72px; gap: 14px; }
.wireless-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 2px; }
.wireless-page-head .wireless-title { margin: 0 0 6px; color: var(--text); font-size: 26px; line-height: 1.1; }
.wireless-page-head > div > p:last-child { margin: 0; color: var(--muted); font-size: 16px; }
.wireless-health { display: flex; align-items: center; gap: 7px; padding-bottom: 9px; color: #2a9f78; font-size: 14px; font-weight: 700; }
.wireless-health i { width: 7px; height: 7px; border-radius: 50%; background: #31bd88; box-shadow: 0 0 0 4px rgba(49,189,136,.12); }
.wireless-panel { border-radius: 8px; box-shadow: 0 5px 16px rgba(33,50,67,.045); }
.wireless-panel-head { height: 62px; padding: 0 18px; background: #fafbfc; border-bottom-color: var(--line); }
.wireless-panel-head > div { display: grid; gap: 4px; }
.wireless-panel-head h2 { color: var(--text); font-size: 17px; font-weight: 700; }
.wireless-panel-head p { margin: 0; color: var(--muted); font-size: 13px; }
.main-network-panel { min-height: 0; margin-bottom: 0; }
.wifi-card-list { gap: 10px; padding: 14px; }
.wifi-card { min-height: 134px; padding: 13px 14px; border-color: #dfe7eb; border-radius: 7px; }
.wifi-card-top { height: 34px; }
.wifi-band { gap: 7px; color: var(--text); font-size: 14px; }
.wifi-band small { margin-left: 3px; color: var(--muted); font-size: 12px; font-weight: 400; }
.wifi-dot { width: 20px; height: 20px; }
.wifi-dot::before { width: 11px; height: 11px; left: 4px; top: 6px; }
.wifi-dot::after { width: 3px; height: 3px; left: 9px; top: 11px; }
.wifi-actions { gap: 9px; }
.tiny-toggle { width: 35px; height: 19px; }
.tiny-toggle::after { width: 15px; height: 15px; }
.tiny-toggle.is-on::after { transform: translateX(14px); }
.wifi-card-body { grid-template-columns: minmax(0, 1fr) 160px 62px; min-height: 76px; gap: 12px; padding-top: 9px; }
.wifi-card h3 { margin: 0 0 10px; color: #294451; font-size: 15px; }
.wifi-tags { gap: 5px; }
.wifi-tags span { min-height: 19px; padding: 0 6px; border-radius: 4px; font-size: 12px; }
.wifi-password { color: #71818e; font-size: 13px; }
.qr-code { width: 62px; height: 62px; }
.wireless-secondary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.wireless-optional-panel .wireless-panel-head { justify-content: space-between; }
.wireless-optional-panel .outline-button { width: auto; height: 30px; margin: 0; padding: 0 11px; border-color: #badce0; color: #168f9f; font-size: 13px; }
.wireless-notice { min-height: 76px; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 14px; padding: 12px; border-radius: 6px; background: #eef7f8; }
.wireless-notice p { margin: 0; color: #617983; font-size: 13px; line-height: 1.5; }
.wireless-notice .primary-action { min-height: 30px; padding: 0 12px; border-radius: 6px; font-size: 13px; }
.halow-network-panel { display: none; }
body[data-experience="minimal"]:not([data-travel-advanced="true"]) .wireless-content { max-width: 1180px; margin: 0; padding: 22px 24px 72px; background: transparent; border-radius: 0; }
body[data-experience="minimal"]:not([data-travel-advanced="true"]) .wireless-title { color: var(--text); font-size: 26px; }
@media (max-width: 760px) {
  .wireless-content, body[data-experience="minimal"]:not([data-travel-advanced="true"]) .wireless-content { padding: 16px 14px 60px; }
  .wireless-page-head { align-items: flex-start; flex-direction: column; gap: 7px; }
  .wireless-health { padding-bottom: 0; }
  .wireless-secondary-grid { grid-template-columns: 1fr; }
  .wireless-notice { grid-template-columns: 18px minmax(0, 1fr); }
  .wireless-notice .primary-action { grid-column: 2; justify-self: start; }
}


/* Travel advanced settings reuse the full settings layout, without its home. */
.travel-settings-return { display: none; }
body[data-travel-advanced="true"] .minimal-nav,
body[data-travel-advanced="true"] .sidebar [data-page="internet"],
body[data-travel-advanced="true"] [data-view="internet"] { display: none; }
body[data-travel-advanced="true"] .travel-settings-return {
  display: flex; width: calc(100% - 20px); align-items: center; gap: 8px;
  margin: 16px 10px 8px; padding: 10px; border: 1px solid var(--line);
  border-radius: 6px; background: #fff; color: #168f9f; cursor: pointer; font: inherit;
}
.travel-settings-return:focus-visible { outline: 2px solid #168f9f; outline-offset: 2px; }