:root{color-scheme:dark;--bg:#0b0d12;--card:#151820;--line:#272b36;--text:#f4f6fb;--muted:#969dab;--accent:#f2b45c;--ok:#56d68b;--danger:#ff7272}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.shell{width:min(100%,560px);margin:auto;padding:28px 18px 64px}.hero{text-align:center;padding-top:70px}.logo{width:72px;height:72px;border-radius:22px;margin:0 auto 20px;display:grid;place-items:center;background:var(--card);border:1px solid var(--line);font-size:32px;font-weight:800;color:var(--accent)}
h1{font-size:30px;line-height:1.08;margin:6px 0 12px}h2{font-size:18px;margin:26px 0 12px}.muted,.hint{color:var(--muted)}.hint{font-size:13px}.eyebrow{font-size:12px;letter-spacing:.16em;color:var(--accent);font-weight:700}
.status,.server{display:inline-flex;align-items:center;gap:8px;color:var(--muted)}.status{margin-top:18px}.status span,.server span{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px #56d68b1a}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.top h1{font-size:27px}.server{margin-top:8px;font-weight:700}
.card,.device{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px}.card{margin-top:20px}.list{display:grid;gap:12px}
.metric-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}.metric-row>div{padding:15px;border:1px solid var(--line);border-radius:16px}.metric-row strong,.metric-row span{display:block}.metric-row span{font-size:12px;color:var(--muted);margin-top:3px}
.device-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.device small{display:block;color:var(--muted);margin-top:3px}.traffic{color:var(--muted);font-size:13px;margin:12px 0}
.pill{font-size:11px;padding:5px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}.pill.ok{color:var(--ok);border-color:#56d68b55}
label{display:block;color:var(--muted);font-size:13px;margin:12px 0 7px}input,select,textarea{width:100%;border:1px solid var(--line);background:#0f1218;color:var(--text);border-radius:14px;padding:13px 14px;font:inherit;outline:none}input:focus,select:focus,textarea:focus{border-color:var(--accent)}
button,.linkbtn{min-height:48px;border-radius:14px;border:0;padding:12px 16px;font:inherit;font-weight:700;cursor:pointer;text-align:center;text-decoration:none;display:block;width:100%;margin-top:12px}
.primary{background:var(--accent);color:#16120b}.secondary{background:#272b36;color:var(--text)}.ghost{background:transparent;border:1px solid var(--line);color:var(--text)}button.ghost{width:auto;min-height:38px;padding:8px 12px}.danger{color:var(--danger)}
.created{text-align:center;padding-top:26px}.check{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px;background:#56d68b18;color:var(--ok);font-size:30px}.qr-wrap{background:white;border-radius:20px;padding:12px;margin:22px auto;max-width:360px}.qr{width:100%;display:block}.secret{height:86px;font:11px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace;margin-top:12px;word-break:break-all}.warning{margin:18px 0;padding:14px;border:1px solid #f2b45c44;background:#f2b45c0d;border-radius:14px;text-align:left;color:#d9d2c7;font-size:13px}.warning strong{display:block;color:var(--accent);margin-bottom:3px}.error{color:var(--danger)}
.center{text-align:center}.admin-login{margin-top:70px}
@media(max-width:360px){.shell{padding-left:12px;padding-right:12px}.metric-row{grid-template-columns:1fr}.top{align-items:center}.top h1{font-size:24px}}

.protocol-bar{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 18px}
.proto{font-size:12px;padding:7px 10px;border:1px solid var(--line);border-radius:999px;color:var(--muted)}
.proto.ok{border-color:#56d68b55;color:var(--ok)}.proto.bad{border-color:#ff727255;color:var(--danger)}
.protocol-card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:17px;margin:18px 0}
.protocol-card.primary-proto{border-color:#f2b45c66}.proto-title{display:flex;gap:11px;align-items:center;text-align:left}
.proto-title strong,.proto-title small{display:block}.proto-title small{color:var(--muted);margin-top:2px}
.badge{width:30px;height:30px;display:grid;place-items:center;border-radius:10px;background:#272b36;color:var(--accent);font-weight:800}
.left{text-align:left}

.router-box{margin-top:14px;padding:14px;border:1px dashed #f2b45c66;border-radius:14px;text-align:left}.router-secret{height:180px}

.conf-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.secret-hidden{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;left:-9999px!important}
.router-mode-note{margin:12px 0 0}
@media(max-width:640px){
  .conf-actions{grid-template-columns:1fr}
}

.one-action{grid-template-columns:1fr}
.keenetic-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.keenetic-facts div{border:1px solid #ffffff18;border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:4px}
.keenetic-facts span{font-size:12px;color:#98a0b3}
.keenetic-facts strong{font-size:14px}
@media(max-width:640px){.keenetic-facts{grid-template-columns:1fr}}

/* V3.4 monitoring */
.monitor-card{margin-bottom:24px}.monitor-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.monitor-head h2{margin:4px 0 0}.pill.warn{color:var(--accent);border-color:#f2b45c55}.monitor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:16px 0}.monitor-metric{padding:12px;border:1px solid var(--line);border-radius:14px}.monitor-metric span,.monitor-metric strong{display:block}.monitor-metric span{font-size:11px;color:var(--muted)}.monitor-metric strong{font-size:16px;margin-top:3px}.monitor-section-title{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:16px 0 7px}.monitor-status-list{display:grid;gap:6px}.monitor-status-list>div,.dns-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;padding:9px 10px;border:1px solid #ffffff10;border-radius:12px}.monitor-status-list strong,.dns-row strong{font-size:12px}.dns-row{grid-template-columns:1fr auto}.dns-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dot{width:8px;height:8px;border-radius:50%;background:var(--muted)}.dot.ok{background:var(--ok);box-shadow:0 0 0 3px #56d68b12}.dot.bad{background:var(--danger)}.monitor-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}.monitor-actions .linkbtn{margin:0;min-height:42px;padding:10px;font-size:13px}@media(max-width:520px){.monitor-grid{grid-template-columns:repeat(2,1fr)}.monitor-actions{grid-template-columns:1fr}.monitor-status-list strong{font-size:11px}}


/* V3.4.1 unified admin dashboard */
.admin-shell{width:min(100%,980px)}
.admin-top{margin-bottom:4px}.admin-subtitle{color:var(--muted);font-size:13px;margin-top:6px}
.dashboard-card{padding:20px}.dashboard-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.dashboard-head h2{margin:4px 0 0;font-size:22px}.dashboard-pills{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px}
.metric-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;margin:18px 0}
.metric-card{min-width:0;padding:13px 12px;border:1px solid var(--line);background:#10131a;border-radius:14px}
.metric-card span,.metric-card strong,.metric-card small{display:block}.metric-card span{font-size:11px;color:var(--muted);margin-bottom:4px}
.metric-card strong{font-size:17px;white-space:nowrap}.metric-card small{font-size:10px;color:var(--muted);margin-top:3px}
.dashboard-columns{display:grid;grid-template-columns:1fr 1fr;gap:12px}.dash-block{border:1px solid var(--line);border-radius:16px;padding:13px;background:#10131a}
.dash-title{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:800;margin-bottom:9px}
.status-table{display:grid;gap:6px}.status-row{display:grid;grid-template-columns:10px minmax(0,1fr) auto;align-items:center;gap:9px;padding:8px 9px;border-radius:10px;background:#ffffff05}
.status-row>span:nth-child(2){min-width:0}.status-row strong{font-size:12px}.status-row small{display:block;color:var(--muted);font-size:10px;margin-top:1px}
.state-ok{color:var(--ok)!important}.state-bad{color:var(--danger)!important}
.automation-title{margin-top:17px}.automation-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.automation-card{border:1px solid var(--line);border-radius:16px;padding:13px;background:#10131a;min-width:0}
.automation-top{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:9px}
.automation-icon{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:#f2b45c12;border:1px solid #f2b45c33;color:var(--accent);font-weight:900}
.automation-top strong,.automation-top small{display:block}.automation-top small{font-size:10px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-state{font-size:10px;font-weight:900;padding:5px 7px;border-radius:999px;border:1px solid var(--line)}.mini-state.ok{color:var(--ok);border-color:#56d68b44}.mini-state.bad{color:var(--danger);border-color:#ff727244}
.automation-info{display:grid;grid-template-columns:1fr auto;gap:6px 8px;margin-top:11px;padding-top:10px;border-top:1px solid #ffffff0c}
.automation-info span{font-size:10px;color:var(--muted)}.automation-info strong{font-size:10px;text-align:right}
.lower-dashboard{margin-top:12px}.compact-block{min-height:145px}.info-pairs{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px 10px;align-items:center}
.info-pairs span{font-size:11px;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.info-pairs strong{font-size:11px;text-align:right}
.pair-wide{color:var(--text)!important}.backup-name{font-size:11px;color:var(--text);padding:8px 9px;background:#ffffff05;border-radius:10px;margin-bottom:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dashboard-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}.dashboard-actions .linkbtn{margin:0;min-height:42px;padding:10px;font-size:13px}
.admin-content-grid{display:grid;grid-template-columns:330px minmax(0,1fr);gap:14px;align-items:start}.admin-content-grid .card{margin-top:14px}
.invite-card h2,.access-card h2{margin:4px 0 12px}.access-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.admin-device{padding:13px;border-radius:15px;background:#10131a}.admin-device button.ghost{margin-top:9px}
@media(max-width:820px){
  .admin-shell{width:min(100%,640px)}
  .metric-grid{grid-template-columns:repeat(3,1fr)}
  .automation-grid{grid-template-columns:1fr}
  .admin-content-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .dashboard-card{padding:15px}
  .dashboard-head{display:block}.dashboard-pills{justify-content:flex-start;margin-top:10px}
  .metric-grid{grid-template-columns:repeat(2,1fr)}
  .dashboard-columns{grid-template-columns:1fr}
  .dashboard-actions{grid-template-columns:1fr}
  .admin-top{align-items:center}.admin-top h1{font-size:24px}
}

/* V3.4.2 user cleanup */
.admin-device form{display:inline-block;margin-right:7px}
.admin-device .delete-user{margin-top:9px;color:#ff9d9d;border-color:#ff727233;background:#ff727208}
.admin-device .delete-user:hover{border-color:#ff727266;background:#ff727212}


/* PWA 1.0 */
[hidden]{display:none!important}
.pwa-top{align-items:center}.pwa-subtitle{font-size:13px;color:var(--muted);margin-top:5px}.top-action{margin:0}
.pwa-summary{margin:18px 0 12px;border:1px solid var(--line);background:var(--card);border-radius:20px;padding:16px}
.pwa-summary-main{display:flex;align-items:center;gap:11px}.pwa-summary-main strong,.pwa-summary-main small{display:block}.pwa-summary-main small{color:var(--muted);font-size:12px;margin-top:2px}
.pwa-summary-metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.pwa-summary-metrics>div{padding:10px 12px;border-radius:13px;background:#10131a;border:1px solid #ffffff0d}
.pwa-summary-metrics strong,.pwa-summary-metrics span{display:block}.pwa-summary-metrics strong{font-size:17px}.pwa-summary-metrics span{font-size:10px;color:var(--muted);margin-top:2px}
.pwa-protocols{margin-top:0}.pwa-install{margin:0 0 18px}.section-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.section-heading h2{margin:4px 0 12px}
.pwa-device{padding:16px}.device-facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:13px}
.device-facts>div{padding:9px 10px;border-radius:11px;background:#10131a;border:1px solid #ffffff0d;min-width:0}
.device-facts span,.device-facts strong{display:block}.device-facts span{font-size:10px;color:var(--muted)}.device-facts strong{font-size:11px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pwa-note{font-size:10px;color:var(--muted);margin:10px 0 0}.add-device-card{margin-top:22px}.add-device-card h2{margin:4px 0 8px}
.empty-state{text-align:center}.empty-icon{width:44px;height:44px;display:grid;place-items:center;margin:0 auto;border-radius:14px;border:1px solid #f2b45c33;color:var(--accent);font-size:24px}
.empty-state h2{margin:10px 0 4px}
@media(max-width:420px){.device-facts{grid-template-columns:1fr}.pwa-top h1{font-size:24px}}

/* PWA 1.0 admin user manager */
.compact-copy{font-size:12px;margin:-4px 0 8px}.mini-help{font-size:10px;color:var(--muted);line-height:1.45;margin-top:12px;padding-top:11px;border-top:1px solid #ffffff0d}
.user-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:12px 0}
.user-stats>div{padding:9px;border:1px solid #ffffff0d;background:#10131a;border-radius:11px;text-align:center}.user-stats strong,.user-stats span{display:block}.user-stats strong{font-size:15px}.user-stats span{font-size:9px;color:var(--muted);margin-top:1px}
.user-toolbar{display:grid;gap:8px;margin-bottom:12px}.user-toolbar input{padding:11px 12px;border-radius:12px}
.filter-chips{display:flex;gap:6px;flex-wrap:wrap}.filter-chip{display:inline-flex;width:auto;min-height:32px;margin:0;padding:6px 9px;border-radius:999px;background:transparent;color:var(--muted);border:1px solid var(--line);font-size:10px}
.filter-chip.active{color:var(--accent);border-color:#f2b45c55;background:#f2b45c0b}
.user-card{min-width:0}.user-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.user-main{min-width:0}.user-main strong,.user-main small{display:block}.user-main small{font-size:10px}
.user-badges{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}.user-actions{display:flex;gap:7px;flex-wrap:wrap;align-items:flex-start;margin-top:10px}.user-actions form{display:block;margin:0}.user-actions button.ghost{margin:0}
.inline-tools{display:inline-block}.inline-tools>summary{list-style:none;cursor:pointer;min-height:38px;padding:8px 12px;border:1px solid var(--line);border-radius:14px;font-size:13px;font-weight:700}.inline-tools>summary::-webkit-details-marker{display:none}
.inline-tools[open]{width:100%}.inline-tools[open]>summary{width:max-content}.compact-form{margin-top:9px;padding:12px;border-radius:14px;border:1px solid #ffffff12;background:#0f1218}.compact-form label{margin-top:8px}.compact-form button{margin-bottom:0}
.device-details{margin-top:10px;border-top:1px solid #ffffff0d;padding-top:10px}.device-details>summary{cursor:pointer;color:var(--muted);font-size:11px;display:flex;justify-content:space-between;align-items:center}.device-details>summary span{color:var(--text)}
.admin-device-list{display:grid;gap:7px;margin-top:9px}.admin-device-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:9px 10px;border-radius:12px;background:#0d1016;border:1px solid #ffffff0d}
.device-state{display:grid;grid-template-columns:8px minmax(0,1fr);gap:8px;align-items:center}.device-state strong,.device-state small{display:block}.device-state strong{font-size:11px}.device-state small{font-size:9px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.device-meta{display:grid;gap:2px;text-align:right}.device-meta span{font-size:9px;color:var(--muted);white-space:nowrap}.mini-button{margin:0!important;min-height:32px!important;padding:6px 8px!important;font-size:10px!important}
.no-users-found{text-align:center;color:var(--muted);font-size:12px;padding:18px}
@media(max-width:820px){
  .user-stats{grid-template-columns:repeat(2,1fr)}
  .admin-device-row{grid-template-columns:minmax(0,1fr) auto}.device-meta{grid-column:1/2;text-align:left}.admin-device-row form{grid-column:2;grid-row:1/3}
}
@media(max-width:480px){
  .user-card-head{display:block}.user-badges{justify-content:flex-start;margin-top:7px}
  .user-actions{display:grid;grid-template-columns:1fr 1fr}.user-actions>*{width:100%}.user-actions button,.inline-tools>summary{width:100%!important;text-align:center}
  .inline-tools[open]{grid-column:1/-1}.inline-tools[open]>summary{width:100%}
  .admin-device-row{grid-template-columns:1fr}.device-meta{text-align:left}.admin-device-row form{grid-column:auto;grid-row:auto}.mini-button{width:100%!important}
}


/* Smart VPN 1.0 */
.smart-vpn-card{margin-top:14px}.smart-vpn-card h2,.smart-admin-card h2{margin:4px 0 8px}
.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:12px}
.mode-card{padding:13px;border:1px solid var(--line);border-radius:15px;background:#10131a;min-width:0}
.mode-card.mode-full{border-color:#56d68b35}.mode-head{display:grid;gap:8px}.mode-head strong{font-size:13px;line-height:1.25}
.mode-badge{display:inline-flex;width:max-content;padding:5px 8px;border-radius:999px;border:1px solid #f2b45c44;background:#f2b45c0d;color:var(--accent);font-size:9px;font-weight:900;letter-spacing:.08em}
.mode-card p{font-size:10px;color:var(--muted);line-height:1.5;min-height:46px}.mode-card .linkbtn,.mode-card button{margin:6px 0 0;font-size:11px;min-height:38px}
.mode-card button:disabled{opacity:.45;cursor:not-allowed}.mode-foot{display:flex;align-items:center;gap:7px;font-size:10px;color:var(--ok);margin-top:13px}
.smart-help{margin-top:11px;border-top:1px solid #ffffff0d;padding-top:10px}.smart-help>summary{cursor:pointer;color:var(--muted);font-size:11px;font-weight:700}
.smart-help-body{padding-top:8px}.smart-help-body p{font-size:10px;line-height:1.5;margin:5px 0}
.smart-admin-card{margin-top:14px}.smart-admin-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.smart-admin-head p{font-size:11px;max-width:650px;margin:0}.smart-mode-counters{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.smart-admin-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:13px 0}
.smart-mini-mode{padding:11px;border:1px solid #ffffff0d;background:#10131a;border-radius:13px}.smart-mini-mode strong,.smart-mini-mode small{display:block}.smart-mini-mode strong{font-size:11px;margin-top:7px}.smart-mini-mode small{font-size:9px;color:var(--muted);margin-top:2px}
.smart-rule-columns{display:grid;grid-template-columns:1fr 1fr;gap:10px}.rules-editor{min-height:160px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;line-height:1.45;resize:vertical}
.smart-rule-columns small{display:block;color:var(--muted);font-size:9px;margin-top:5px}.smart-form-actions{display:flex;justify-content:flex-end}.smart-form-actions .primary{width:auto;min-width:210px}
.smart-reset{width:auto;margin-top:8px;font-size:11px}.smart-warning{font-size:10px;color:var(--muted);line-height:1.5;margin-top:10px;padding:10px 11px;border-radius:12px;background:#f2b45c08;border:1px solid #f2b45c20}
@media(max-width:820px){.mode-grid,.smart-admin-modes,.smart-rule-columns{grid-template-columns:1fr}.smart-admin-head{display:block}.smart-mode-counters{justify-content:flex-start;margin-top:9px}.mode-card p{min-height:0}.smart-form-actions .primary{width:100%}}

/* Smart VPN 1.0.1 compatibility export */
.smart-downloads{display:grid;grid-template-columns:1fr;gap:6px;margin-top:7px}
.smart-downloads .linkbtn{margin:0!important;min-height:36px!important;padding:8px 9px!important;font-size:10px!important}
.smart-warning b{color:var(--text)}


/* Smart VPN 1.1 — SAFE-first */
.mode-safe,.smart-mini-mode.preferred{border-color:#56d68b45;background:#56d68b08}
.safe-summary{display:grid;grid-template-columns:auto auto 1fr;gap:8px 12px;align-items:center;margin-top:11px;padding:10px 12px;border:1px solid #56d68b25;background:#56d68b07;border-radius:12px}
.safe-summary span,.safe-summary small{font-size:10px;color:var(--muted)}.safe-summary strong{font-size:11px;color:var(--ok)}
.safe-catalog-block{margin:12px 0}.safe-category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.safe-category-card{position:relative;display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:9px;align-items:center;padding:11px;border:1px solid #ffffff10;background:#10131a;border-radius:13px;cursor:pointer}
.safe-category-card input[type=checkbox]{position:absolute;opacity:0;pointer-events:none}.safe-check{width:18px;height:18px;border-radius:6px;border:1px solid var(--line);display:grid;place-items:center}
.safe-category-card input:checked~.safe-check{background:#56d68b18;border-color:#56d68b66}.safe-category-card input:checked~.safe-check:after{content:"✓";font-size:11px;color:var(--ok);font-weight:900}
.safe-category-card strong,.safe-category-card small{display:block}.safe-category-card strong{font-size:11px}.safe-category-card small{font-size:9px;color:var(--muted);margin-top:2px;line-height:1.35}.safe-category-card em{font-size:9px;color:var(--muted);font-style:normal}
.safe-category-card.locked{cursor:default}.traffic-mode-line{display:flex;justify-content:space-between;gap:10px;padding:9px 10px;margin-top:10px;border:1px solid #ffffff0d;background:#10131a;border-radius:11px}
.traffic-mode-line span{font-size:10px;color:var(--muted)}.traffic-mode-line strong{font-size:10px;color:var(--accent)}
.device-mode-editor{margin-top:8px;border:1px solid #ffffff0d;border-radius:11px;padding:9px 10px}.device-mode-editor>summary{cursor:pointer;font-size:10px;color:var(--muted);font-weight:700}.device-mode-editor form{margin-top:8px}.device-mode-editor select{margin-top:0}.device-mode-editor button{margin-bottom:0}.device-mode-editor>small{display:block;color:var(--muted);font-size:9px;line-height:1.4;margin-top:7px}
.form-hint{font-size:9px;color:var(--muted);line-height:1.4;margin:-4px 0 12px}.traffic-created-card{border-color:#f2b45c33}
@media(max-width:820px){.safe-category-grid{grid-template-columns:1fr 1fr}.safe-summary{grid-template-columns:1fr auto}.safe-summary small{grid-column:1/-1}}
@media(max-width:520px){.safe-category-grid{grid-template-columns:1fr}.safe-summary{grid-template-columns:1fr}.safe-summary strong{margin-top:-4px}}

/* Smart VPN 1.1.1 — only SAFE/SMART for user */
.smart-vpn-card .mode-grid{grid-template-columns:repeat(2,1fr)}
.smart-admin-card .smart-admin-modes{grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){
  .smart-vpn-card .mode-grid,
  .smart-admin-card .smart-admin-modes{grid-template-columns:1fr}
}


/* Account 2.0 + tariff foundation */
.account-plan-card{margin:18px 0 12px;padding:16px;border:1px solid #f2b45c2d;background:linear-gradient(180deg,#f2b45c08,#11141b);border-radius:20px}
.account-plan-main{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.plan-name{font-size:24px;font-weight:900;letter-spacing:.03em;margin-top:3px}.plan-title{font-size:11px;color:var(--muted);margin-top:2px}
.subscription-state{display:inline-flex;padding:6px 9px;border-radius:999px;border:1px solid var(--line);font-size:10px;font-weight:900}.subscription-state.ok{color:var(--ok);border-color:#56d68b44}.subscription-state.warn{color:var(--accent);border-color:#f2b45c44}.subscription-state.bad{color:var(--danger);border-color:#ff727244}
.account-plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}.account-plan-grid>div{padding:10px 11px;background:#0f1218;border:1px solid #ffffff0d;border-radius:12px}.account-plan-grid span,.account-plan-grid strong{display:block}.account-plan-grid span{font-size:9px;color:var(--muted)}.account-plan-grid strong{font-size:12px;margin-top:2px}
.plan-features{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}.plan-features span{padding:5px 7px;border-radius:999px;background:#ffffff08;border:1px solid #ffffff0d;color:var(--muted);font-size:9px}
.subscription-warning{margin-top:11px;padding:10px 11px;border-radius:12px;background:#f2b45c08;border:1px solid #f2b45c22;color:var(--muted);font-size:10px;line-height:1.45}.renew-coming{margin:11px 0 0;opacity:.55}
.subscription-stats{grid-template-columns:repeat(6,1fr)}
.plan-pill{color:var(--accent);border-color:#f2b45c33}.pill.warn{color:var(--accent);border-color:#f2b45c44}.pill.bad{color:var(--danger);border-color:#ff727244}
.subscription-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:10px}.subscription-strip>div{padding:8px 9px;border:1px solid #ffffff0d;background:#0f1218;border-radius:10px}.subscription-strip span,.subscription-strip strong{display:block}.subscription-strip span{font-size:9px;color:var(--muted)}.subscription-strip strong{font-size:10px;margin-top:2px}
.subscription-tools{margin-top:9px;padding:9px 10px;border:1px solid #ffffff0d;border-radius:11px}.subscription-tools>summary{cursor:pointer;font-size:10px;font-weight:800;color:var(--muted)}.subscription-form small{display:block;font-size:9px;color:var(--muted);margin-top:5px}.extend-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.extend-actions form{margin:0}.extend-actions .mini-button{margin:0!important}
@media(max-width:820px){.subscription-stats{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.account-plan-grid,.subscription-strip{grid-template-columns:1fr}.subscription-stats{grid-template-columns:repeat(2,1fr)}}


/* Account 2.1 — setup wizard + SAFE/SMART version tracking */
.setup-guide-card{margin-top:14px}.setup-guide-card h2{margin:4px 0 10px}
.setup-steps{display:grid;gap:8px}.setup-step{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 11px;background:#10131a;border:1px solid #ffffff0d;border-radius:13px}
.setup-number{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;border:1px solid #f2b45c33;background:#f2b45c0c;color:var(--accent);font-size:11px;font-weight:900}
.setup-step strong,.setup-step small{display:block}.setup-step strong{font-size:11px}.setup-step small{font-size:9px;color:var(--muted);margin-top:2px;line-height:1.35}
.mini-link{margin:0!important;min-height:32px!important;padding:6px 9px!important;font-size:9px!important;width:auto!important}.setup-state{font-size:9px;color:var(--muted);font-weight:800}.setup-state.ok{color:var(--ok)}
.rules-version-box{margin-top:8px;padding:10px;border-radius:12px;border:1px solid #ffffff0e;background:#0f1218}.rules-version-box.needs-update{border-color:#f2b45c33;background:#f2b45c07}.rules-version-box.ready{border-color:#56d68b24;background:#56d68b05}
.rules-version-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.rules-version-head span,.rules-version-head strong{display:block}.rules-version-head span{font-size:9px;color:var(--muted)}.rules-version-head strong{font-size:10px;margin-top:2px}
.rules-state{display:inline-flex!important;padding:5px 7px;border-radius:999px;border:1px solid var(--line);font-size:8px!important;font-weight:900;white-space:nowrap}.rules-state.ok{color:var(--ok);border-color:#56d68b44}.rules-state.warn{color:var(--accent);border-color:#f2b45c44}
.rules-update-note{font-size:9px;color:var(--muted);line-height:1.4;margin-top:8px}.rules-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px}.rules-actions form{margin:0}.rules-actions .linkbtn,.rules-actions button{margin:0!important;min-height:36px!important;font-size:10px!important;padding:8px 9px!important;width:100%}
@media(max-width:520px){.setup-step{grid-template-columns:30px 1fr}.setup-step>.mini-link,.setup-step>.setup-state{grid-column:2}.rules-actions{grid-template-columns:1fr}}


/* Smart VPN 1.2 categories */
.smart-category-block{margin:14px 0}
.smart-category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.smart-category-card{position:relative;display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:9px;align-items:center;padding:12px;border:1px solid #ffffff10;background:#10131a;border-radius:13px;cursor:pointer}
.smart-category-card input[type=checkbox]{position:absolute;opacity:0;pointer-events:none}
.smart-category-card input:checked~.safe-check{background:#56d68b18;border-color:#56d68b66}
.smart-category-card input:checked~.safe-check:after{content:"✓";font-size:11px;color:var(--ok);font-weight:900}
.smart-category-card strong,.smart-category-card small,.smart-category-card em{display:block}
.smart-category-card strong{font-size:11px}
.smart-category-card small{font-size:9px;color:var(--muted);line-height:1.35;margin-top:2px}
.smart-category-card em{font-size:8px;color:var(--accent);font-style:normal;margin-top:4px}
.smart-category-card b{font-size:9px;color:var(--muted)}
.smart-effective-preview{display:grid;grid-template-columns:auto auto 1fr;gap:8px 12px;align-items:center;margin-top:10px;padding:10px 12px;border:1px solid #56d68b25;background:#56d68b07;border-radius:12px}
.smart-effective-preview span,.smart-effective-preview small{font-size:10px;color:var(--muted)}
.smart-effective-preview strong{font-size:11px;color:var(--ok)}
.smart-category-chips{display:flex;gap:5px;flex-wrap:wrap;margin:7px 0}
.smart-category-chips span{padding:4px 6px;border-radius:999px;background:#ffffff08;border:1px solid #ffffff0d;font-size:8px;color:var(--muted)}
.smart-category-chips .muted-chip{opacity:.65}
@media(max-width:820px){.smart-category-grid{grid-template-columns:1fr}.smart-effective-preview{grid-template-columns:1fr auto}}


/* Connection Wizard 1.3 */
body.modal-open{overflow:hidden}
.connection-modal{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:18px}
.connection-modal-backdrop{position:absolute;inset:0;background:#05070bd9;backdrop-filter:blur(6px)}
.connection-modal-panel{position:relative;width:min(760px,100%);max-height:92vh;overflow:auto;background:#151820;border:1px solid #ffffff18;border-radius:22px;padding:18px;box-shadow:0 24px 80px #0009}
.connection-modal-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;padding-bottom:12px;border-bottom:1px solid #ffffff0d}
.connection-modal-head h2{margin:4px 0 0;font-size:21px}.modal-close{width:38px;height:38px;min-height:38px;padding:0;margin:0;border-radius:12px;border:1px solid var(--line);background:#0f1218;color:var(--muted);font-size:24px;line-height:1}
.wizard-section{padding:15px 0;border-bottom:1px solid #ffffff0d}.wizard-section-title{font-size:12px;font-weight:900;margin-bottom:9px}.wizard-section-subtitle{font-size:10px;color:var(--muted);font-weight:800;margin:12px 0 8px}
.choice-grid{display:grid;gap:8px}.choice-grid.three{grid-template-columns:repeat(3,1fr)}.choice-grid.two{grid-template-columns:repeat(2,1fr)}.choice-grid.one{grid-template-columns:1fr}
.choice-btn{min-height:58px;margin:0;padding:10px 12px;border-radius:13px;border:1px solid #ffffff12;background:#0f1218;color:var(--text);text-align:left}
.choice-btn strong,.choice-btn small{display:block}.choice-btn strong{font-size:12px}.choice-btn small{font-size:9px;color:var(--muted);margin-top:3px}.choice-btn.active{border-color:#f2b45c70;background:linear-gradient(135deg,#f2a33b25,#ef62761d);box-shadow:inset 0 0 0 1px #f2b45c16}.server-locked{cursor:default}
.smart-service-picker{margin-top:12px;padding:11px;border:1px solid #ffffff0d;background:#0f1218;border-radius:14px}.service-choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.service-choice{position:relative;display:grid;grid-template-columns:18px 1fr;gap:8px;padding:10px;border:1px solid #ffffff0d;border-radius:12px;cursor:pointer;background:#131720}.service-choice input{position:absolute;opacity:0}.service-check{width:18px;height:18px;border-radius:6px;border:1px solid var(--line)}.service-choice input:checked~.service-check{border-color:#56d68b66;background:#56d68b18}.service-choice input:checked~.service-check:after{content:"✓";display:grid;place-items:center;height:100%;font-size:11px;color:var(--ok);font-weight:900}.service-choice strong,.service-choice small{display:block}.service-choice strong{font-size:10px}.service-choice small{font-size:8px;color:var(--muted);margin-top:2px;line-height:1.3}.wizard-hint{font-size:9px;color:var(--muted);margin-top:8px;line-height:1.4}
.wizard-advanced{margin:14px 0;padding:11px 12px;border:1px solid #ffffff0d;border-radius:14px;background:#0f1218}.wizard-advanced>summary{cursor:pointer;font-size:11px;font-weight:900}.advanced-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.advanced-grid label{margin-top:0}.advanced-grid small{display:block;color:var(--muted);font-size:9px;margin-top:4px;line-height:1.35}.switch-setting{display:grid!important;grid-template-columns:38px 1fr;gap:10px;align-items:center;padding:10px;border:1px solid #ffffff0d;border-radius:12px}.switch-setting input{position:absolute;opacity:0}.toggle-ui{width:38px;height:22px;border-radius:999px;background:#2b303b;position:relative;transition:.2s}.toggle-ui:after{content:"";position:absolute;width:18px;height:18px;top:2px;left:2px;border-radius:50%;background:#fff;transition:.2s}.switch-setting input:checked+.toggle-ui{background:#f2a23f}.switch-setting input:checked+.toggle-ui:after{left:18px}.switch-setting strong,.switch-setting small{display:block}.switch-setting strong{font-size:10px}.locked-setting{padding:10px;border:1px solid #ffffff0d;border-radius:12px}.locked-setting>span,.locked-setting>strong,.locked-setting>small{display:block}.locked-setting>span{font-size:9px;color:var(--muted)}.locked-setting>strong{font-size:10px;margin-top:2px}
.wizard-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:12px}.wizard-summary>div{padding:9px 10px;border:1px solid #ffffff0d;background:#0f1218;border-radius:11px}.wizard-summary span,.wizard-summary strong{display:block}.wizard-summary span{font-size:8px;color:var(--muted)}.wizard-summary strong{font-size:10px;margin-top:2px;overflow:hidden;text-overflow:ellipsis}
.connection-modal-actions{display:grid;grid-template-columns:1fr 2fr;gap:8px;margin-top:14px}.connection-modal-actions button{margin:0}
.device-connection-facts{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}.device-connection-facts span{font-size:8px;color:var(--muted);padding:5px 6px;border:1px solid #ffffff0d;border-radius:999px}.device-connection-facts b{color:var(--text)}.device-connection-facts .wide{width:100%;border-radius:10px}
.connection-summary-card{border-color:#56d68b2d}.created-settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.created-settings-grid>div{padding:9px 10px;border:1px solid #ffffff0d;background:#0f1218;border-radius:11px}.created-settings-grid span,.created-settings-grid strong{display:block}.created-settings-grid span{font-size:9px;color:var(--muted)}.created-settings-grid strong{font-size:10px;margin-top:2px}.created-settings-grid .wide{grid-column:1/-1}
@media(max-width:620px){
  .connection-modal{padding:8px}.connection-modal-panel{border-radius:16px;padding:14px;max-height:96vh}
  .choice-grid.three,.choice-grid.two,.service-choice-grid,.advanced-grid,.wizard-summary{grid-template-columns:1fr 1fr}
  .connection-modal-actions{grid-template-columns:1fr}
}
@media(max-width:420px){
  .choice-grid.three,.choice-grid.two,.service-choice-grid,.advanced-grid,.wizard-summary,.created-settings-grid{grid-template-columns:1fr}
}

/* Connection Wizard 1.4 — expanded SMART categories */
.service-choice-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.service-choice{min-height:74px}
@media(max-width:720px){.service-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:430px){.service-choice-grid{grid-template-columns:1fr}}


/* Smart VPN 1.5 — AUTO Lists */
.autolist-panel{margin:12px 0 14px;padding:13px;border:1px solid #56d68b28;background:#56d68b06;border-radius:15px}
.autolist-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.autolist-head strong,.autolist-head small{display:block}.autolist-head strong{font-size:12px;margin-top:4px}.autolist-head small{font-size:9px;color:var(--muted);margin-top:3px;line-height:1.4}
.autolist-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:11px}
.autolist-stats>div{padding:8px 9px;border:1px solid #ffffff0d;background:#0f1218;border-radius:10px}.autolist-stats span,.autolist-stats strong{display:block}.autolist-stats span{font-size:8px;color:var(--muted)}.autolist-stats strong{font-size:10px;margin-top:2px}
.autolist-changes{display:flex;gap:5px;align-items:center;flex-wrap:wrap;font-size:9px;color:var(--muted);margin-top:9px}.autolist-changes span{padding:4px 6px;border:1px solid #f2b45c2c;border-radius:999px;color:var(--accent)}
.autolist-refresh{width:auto;margin:10px 0 0!important;font-size:10px}
.auto-user-status{display:flex;align-items:center;gap:6px;font-size:9px;color:var(--muted);margin:6px 0}
@media(max-width:900px){.autolist-stats{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.autolist-head{display:block}.autolist-head>.pill{margin-top:8px}.autolist-stats{grid-template-columns:repeat(2,1fr)}}


/* Account 2.2 — direct email/password login */
.auth-shell{width:min(460px,calc(100% - 24px));margin:9vh auto 30px}.auth-brand{display:flex;gap:12px;align-items:center;margin-bottom:14px}.auth-brand.compact{margin-bottom:12px}.auth-brand h1{margin:3px 0 0}.small-logo{width:46px!important;height:46px!important;font-size:20px!important;margin:0!important;flex:none}
.auth-card,.claim-modal{border:1px solid var(--line);background:#151820;border-radius:20px;padding:18px;box-shadow:0 24px 80px #0007}.auth-form{display:grid;gap:8px}.auth-form label{margin-top:5px}.auth-form button{margin-top:6px}.auth-foot{font-size:9px;color:var(--muted);text-align:center;margin:12px 0 0;line-height:1.4}.auth-info,.auth-error{padding:10px 11px;border-radius:11px;font-size:10px;line-height:1.4;margin-bottom:11px}.auth-info{border:1px solid #56d68b2c;background:#56d68b08;color:var(--muted)}.auth-error{border:1px solid #ff72723d;background:#ff72720a;color:#ff9a9a}.centered-card{text-align:center}.auth-main-link{display:block;text-align:center;margin-top:14px}
.claim-page{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;padding:14px}.claim-backdrop{position:absolute;inset:0;background:#06080dde;backdrop-filter:blur(7px)}.claim-modal{position:relative;width:min(500px,100%);max-height:94vh;overflow:auto}.claim-user{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:11px 0}.claim-user>div{padding:9px 10px;border:1px solid #ffffff0d;border-radius:11px;background:#0f1218}.claim-user span,.claim-user strong{display:block}.claim-user span{font-size:8px;color:var(--muted)}.claim-user strong{font-size:11px;margin-top:2px}.claim-copy{font-size:10px;line-height:1.5}.claim-security{display:flex;gap:8px;align-items:flex-start;margin-top:12px;padding-top:10px;border-top:1px solid #ffffff0d}.claim-security>span{color:var(--ok);font-weight:900}.claim-security p{font-size:9px;color:var(--muted);line-height:1.4;margin:0}
.welcome-banner{margin:12px 0;padding:11px 12px;border-radius:13px;border:1px solid #56d68b32;background:#56d68b08;font-size:10px;color:var(--muted)}.welcome-banner strong{color:var(--ok)}
.account-security-card{margin:12px 0;padding:15px;border:1px solid var(--line);border-radius:18px;background:#151820}.account-security-card h2{margin:4px 0 0}.account-login-info{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:11px}.account-login-info>div{padding:9px 10px;border:1px solid #ffffff0d;border-radius:11px;background:#0f1218;min-width:0}.account-login-info span,.account-login-info strong{display:block}.account-login-info span{font-size:8px;color:var(--muted)}.account-login-info strong{font-size:10px;margin-top:2px;overflow-wrap:anywhere}.password-change{margin-top:9px;padding:10px;border:1px solid #ffffff0d;border-radius:11px}.password-change>summary{cursor:pointer;font-size:10px;font-weight:800;color:var(--muted)}.password-change form{margin-top:9px}
.account-subscription-strip{grid-template-columns:repeat(4,1fr)!important}.auth-admin-tools{display:flex;gap:6px;align-items:center;margin-top:8px}.auth-admin-tools form{margin:0}.danger-soft{color:#ff8b8b!important;border-color:#ff72722c!important}.auth-admin-note{font-size:9px;color:var(--muted)}.invite-flow-info{margin-top:10px}
@media(max-width:620px){.account-login-info,.claim-user{grid-template-columns:1fr}.account-subscription-strip{grid-template-columns:1fr 1fr!important}.auth-shell{margin-top:4vh}}


/* ==========================================================
   Account 2.3 — section navigation + desktop workspace
   ========================================================== */
html{scroll-behavior:smooth}
.portal-shell,.admin-shell{
  width:min(100%,1680px);
  margin:auto;
  padding:24px 22px 72px;
}
section[id],div[id]{scroll-margin-top:86px}

/* Sticky horizontal section navigation */
.section-nav{
  position:sticky;
  top:10px;
  z-index:120;
  display:flex;
  gap:6px;
  align-items:center;
  overflow-x:auto;
  scrollbar-width:none;
  padding:7px;
  margin:12px 0 14px;
  border:1px solid #ffffff14;
  border-radius:15px;
  background:#10131aeF;
  backdrop-filter:blur(14px);
  box-shadow:0 10px 32px #0004;
}
.section-nav::-webkit-scrollbar{display:none}
.section-nav a{
  flex:0 0 auto;
  padding:8px 12px;
  border:1px solid transparent;
  border-radius:10px;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  text-decoration:none;
  white-space:nowrap;
}
.section-nav a:hover{color:var(--text);background:#ffffff08}
.section-nav a.active{
  color:var(--accent);
  background:#f2b45c0d;
  border-color:#f2b45c38;
}

/* Personal cabinet: three independent columns instead of one long feed */
.portal-desktop-layout{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  align-items:start;
}
.portal-column{
  min-width:0;
  display:grid;
  gap:14px;
  align-content:start;
}
.portal-column>.card,
.portal-column>.portal-card,
.portal-column>.pwa-summary,
.portal-column>.protocol-bar,
.portal-column>.pwa-install{
  margin:0;
}
.portal-card{min-width:0}
.portal-protocols{
  padding:12px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--card);
}
.portal-column .pwa-install{width:100%;margin:0}
.portal-column .smart-vpn-card .mode-grid{grid-template-columns:1fr}
.portal-column .smart-vpn-card .mode-card p{min-height:0}
.portal-column .smart-vpn-card .safe-summary{grid-template-columns:1fr}
.portal-column .smart-vpn-card .safe-summary small{grid-column:auto}
.portal-column .account-plan-grid{grid-template-columns:repeat(3,1fr)}
.portal-column .setup-step{grid-template-columns:30px minmax(0,1fr)}
.portal-column .setup-step>.mini-link,
.portal-column .setup-step>.setup-state{grid-column:2;justify-self:start}
.add-device-unavailable{margin:0!important}

/* Devices use the full desktop width and form a three-card grid */
.wide-section{margin-top:18px}
.pwa-devices>.list{
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:start;
}
.pwa-device{height:100%}

/* Admin: use the whole desktop viewport */
.admin-shell{width:min(100%,1680px)}
.admin-top{margin-bottom:0}

/* Server dashboard becomes a real three-column composition on PC */
@media(min-width:1201px){
  .dashboard-card{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    align-items:start;
  }
  .dashboard-card>.dashboard-head,
  .dashboard-card>.metric-grid,
  .dashboard-card>.automation-title,
  .dashboard-card>.automation-grid,
  .dashboard-card>.dashboard-actions{
    grid-column:1/-1;
  }
  .dashboard-card>.metric-grid{margin:6px 0 0}
  .dashboard-card>.dashboard-columns:not(.lower-dashboard){
    grid-column:1/span 2;
    grid-template-columns:repeat(2,minmax(0,1fr));
    margin:0;
  }
  .dashboard-card>.lower-dashboard{
    grid-column:3;
    grid-template-columns:1fr;
    margin:0;
  }
  .dashboard-card>.automation-title{margin-top:4px}
  .dashboard-card>.automation-grid{margin-top:0}

  /* Access management: 1 column for invitation + 2 columns for users */
  .admin-content-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
  }
  .admin-content-grid>.invite-card{grid-column:1}
  .admin-content-grid>.access-card{grid-column:2/4}
  .access-card .user-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:start;
  }
  .access-card .user-card{height:100%}

  /* Smart/Safe catalogs naturally fill three columns */
  .safe-category-grid,.smart-category-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

/* Medium desktop/tablet: two columns */
@media(min-width:761px) and (max-width:1200px){
  .portal-shell,.admin-shell{width:min(100%,1120px)}
  .portal-desktop-layout{grid-template-columns:repeat(2,minmax(0,1fr))}
  .portal-column-vpn{grid-column:1/-1}
  .portal-column-vpn .smart-vpn-card .mode-grid{grid-template-columns:repeat(2,1fr)}
  .pwa-devices>.list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .admin-content-grid{grid-template-columns:320px minmax(0,1fr)}
}

/* Mobile remains a simple readable one-column cabinet */
@media(max-width:760px){
  .portal-shell,.admin-shell{
    width:100%;
    padding:16px 12px 52px;
  }
  .section-nav{
    top:6px;
    margin:8px 0 12px;
    border-radius:13px;
  }
  .section-nav a{padding:7px 10px;font-size:10px}
  .portal-desktop-layout{grid-template-columns:1fr}
  .portal-column{gap:12px}
  .pwa-devices>.list{grid-template-columns:1fr}
  .admin-content-grid{grid-template-columns:1fr}
  .account-subscription-strip{grid-template-columns:1fr 1fr!important}
}


/* ==========================================================
   Account 2.4 — adaptive app navigation
   Desktop >=1200: left sidebar
   Tablet 761-1199: sticky top navigation
   Mobile <=760: fixed bottom navigation
   ========================================================== */

.portal-shell,.admin-shell{
  width:min(100%,1780px);
  max-width:none;
  padding:18px 18px 70px;
}

/* App frame */
.app-frame{
  display:grid;
  grid-template-columns:228px minmax(0,1fr);
  gap:18px;
  align-items:start;
}
.app-main{min-width:0}

/* Desktop sidebar */
.app-sidebar{
  position:sticky;
  top:18px;
  height:calc(100vh - 36px);
  min-height:560px;
  display:flex;
  flex-direction:column;
  padding:13px;
  border:1px solid #ffffff14;
  border-radius:20px;
  background:linear-gradient(180deg,#141820,#101319);
  box-shadow:0 18px 50px #0004;
  overflow:hidden;
}
.sidebar-brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:5px 5px 14px;
  border-bottom:1px solid #ffffff0d;
}
.sidebar-logo{
  width:38px;height:38px;flex:none;
  display:grid;place-items:center;
  border-radius:12px;
  border:1px solid #f2b45c40;
  background:linear-gradient(135deg,#f2a33b20,#ef627615);
  color:var(--accent);
  font-weight:950;
  font-size:17px;
}
.sidebar-brand strong,.sidebar-brand small,
.sidebar-profile strong,.sidebar-profile small,
.sidebar-footer strong,.sidebar-footer small,
.sidebar-server-state strong,.sidebar-server-state small{display:block}
.sidebar-brand strong{font-size:12px}
.sidebar-brand small{font-size:8px;color:var(--muted);margin-top:2px;letter-spacing:.08em;text-transform:uppercase}

.sidebar-profile,.sidebar-server-state{
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  gap:9px;
  align-items:center;
  margin:12px 0 8px;
  padding:10px;
  border:1px solid #ffffff0d;
  border-radius:13px;
  background:#0d1016;
}
.sidebar-avatar{
  width:36px;height:36px;
  display:grid;place-items:center;
  border-radius:11px;
  background:#ffffff09;
  border:1px solid #ffffff10;
  font-size:13px;font-weight:900;
}
.sidebar-profile strong,.sidebar-server-state strong{font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-profile small,.sidebar-server-state small{font-size:8px;color:var(--muted);margin-top:2px}

.sidebar-status-dot{
  width:9px;height:9px;border-radius:50%;
  background:var(--ok);
  box-shadow:0 0 0 4px #56d68b10;
}
.sidebar-status-dot.bad{background:var(--danger);box-shadow:0 0 0 4px #ff727210}

/* Override old horizontal nav rules on desktop */
.app-sidebar .section-nav{
  position:static;
  display:block;
  flex:1 1 auto;
  overflow-y:auto;
  overflow-x:hidden;
  margin:6px 0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
}
.sidebar-group{margin:0 0 8px}
.sidebar-group-toggle{
  width:100%;
  min-height:auto;
  margin:0;
  padding:7px 8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border:0;
  background:transparent;
  color:#697386;
  font-size:8px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
}
.sidebar-chevron{font-size:11px;transition:transform .18s ease}
.sidebar-group.collapsed .sidebar-chevron{transform:rotate(180deg)}
.sidebar-group.collapsed .sidebar-group-links{display:none}
.sidebar-group-links{display:grid;gap:3px}

.app-sidebar .section-nav a{
  width:100%;
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 11px;
  border-radius:11px;
  border:1px solid transparent;
  color:#a9b1bf;
  font-size:10px;
  font-weight:800;
}
.app-sidebar .section-nav a:hover{
  background:#ffffff07;
  border-color:#ffffff08;
  color:var(--text);
}
.app-sidebar .section-nav a.active{
  color:var(--accent);
  background:linear-gradient(90deg,#f2b45c14,#f2b45c05);
  border-color:#f2b45c2b;
}
.nav-icon{
  width:18px;height:18px;flex:none;
  display:grid;place-items:center;
  color:currentColor;
}
.nav-icon svg{width:17px;height:17px;fill:currentColor}
.nav-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.sidebar-footer{
  display:grid;
  grid-template-columns:10px minmax(0,1fr);
  gap:9px;
  align-items:center;
  padding:10px 7px 3px;
  border-top:1px solid #ffffff0d;
}
.sidebar-footer strong{font-size:9px}
.sidebar-footer small{font-size:8px;color:var(--muted);margin-top:1px}

/* Workspace headers */
.app-main>.top{
  margin:0 0 13px;
  min-height:62px;
  padding:2px 2px 11px;
  border-bottom:1px solid #ffffff0d;
}
.app-main>.top h1{margin-top:3px}
.portal-app-main .pwa-subtitle,.admin-app-main .admin-subtitle{max-width:720px}

/* Keep the three-column desktop information layout from 2.3 */
.portal-desktop-layout{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.pwa-devices>.list{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Slightly more app-like cards */
.portal-card,.dashboard-card,.smart-admin-card,.invite-card,.access-card,.pwa-device{
  box-shadow:0 10px 34px #0000001f;
}
.portal-card:hover,.pwa-device:hover{
  border-color:#ffffff1d;
}
.card,.portal-card,.account-plan-card,.account-security-card,.pwa-summary{
  scroll-margin-top:24px;
}

/* ----------------------------------------------------------
   Tablet: sidebar becomes a sticky top navigation.
   ---------------------------------------------------------- */
@media(min-width:761px) and (max-width:1199px){
  .portal-shell,.admin-shell{
    width:min(100%,1180px);
    padding:14px 14px 60px;
  }
  .app-frame{display:block}
  .app-sidebar{
    position:sticky;
    top:7px;
    z-index:150;
    height:auto;
    min-height:0;
    display:block;
    padding:7px;
    margin-bottom:12px;
    border-radius:15px;
    background:#10131af3;
    backdrop-filter:blur(14px);
    overflow:visible;
  }
  .sidebar-brand,.sidebar-profile,.sidebar-server-state,.sidebar-footer,
  .sidebar-group-toggle{display:none}
  .app-sidebar .section-nav{
    display:flex;
    align-items:center;
    gap:5px;
    overflow-x:auto;
    margin:0;
  }
  .sidebar-group{display:contents}
  .sidebar-group-links{display:contents!important}
  .app-sidebar .section-nav a{
    width:auto;
    flex:0 0 auto;
    gap:7px;
    padding:8px 10px;
    font-size:9px;
  }
  .nav-icon{width:16px;height:16px}
  .nav-icon svg{width:15px;height:15px}

  .portal-desktop-layout{grid-template-columns:repeat(2,minmax(0,1fr))}
  .portal-column-vpn{grid-column:1/-1}
  .portal-column-vpn .smart-vpn-card .mode-grid{grid-template-columns:repeat(2,1fr)}
  .pwa-devices>.list{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ----------------------------------------------------------
   Mobile: fixed bottom app bar with icon + short label.
   ---------------------------------------------------------- */
@media(max-width:760px){
  .portal-shell,.admin-shell{
    width:100%;
    padding:12px 10px calc(96px + env(safe-area-inset-bottom));
  }
  .app-frame{display:block}
  .app-sidebar{
    position:fixed;
    left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));
    top:auto;
    z-index:1000;
    height:auto;
    min-height:0;
    display:block;
    padding:6px;
    margin:0;
    border-radius:16px;
    background:#10131af7;
    backdrop-filter:blur(18px);
    box-shadow:0 12px 42px #0009;
    overflow:visible;
  }
  .sidebar-brand,.sidebar-profile,.sidebar-server-state,.sidebar-footer,
  .sidebar-group-toggle{display:none}
  .app-sidebar .section-nav{
    display:flex;
    align-items:stretch;
    justify-content:space-around;
    gap:2px;
    margin:0;
    overflow:visible;
  }
  .sidebar-group{display:contents}
  .sidebar-group-links{display:contents!important}
  .app-sidebar .section-nav a{
    min-width:0;
    width:auto;
    flex:1 1 0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:2px;
    padding:6px 3px;
    border-radius:10px;
    font-size:8px;
    text-align:center;
  }
  .nav-icon{width:19px;height:19px}
  .nav-icon svg{width:18px;height:18px}
  .nav-label{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .app-main>.top{
    min-height:54px;
    padding:0 1px 9px;
    margin-bottom:10px;
  }
  .app-main>.top h1{font-size:22px}
  .top-action,.admin-top .ghost{min-height:36px;padding:7px 10px}
  .portal-desktop-layout{grid-template-columns:1fr;gap:11px}
  .portal-column{gap:11px}
  .pwa-devices>.list{grid-template-columns:1fr}
  .account-subscription-strip{grid-template-columns:1fr 1fr!important}
}

/* Very narrow phones: hide text labels only if required to avoid overflow */
@media(max-width:370px){
  .app-sidebar .section-nav a{padding-left:2px;padding-right:2px}
  .nav-label{font-size:7px}
}

/* Large desktop refinement */
@media(min-width:1500px){
  .app-frame{grid-template-columns:240px minmax(0,1fr);gap:20px}
  .app-sidebar{padding:14px}
  .portal-desktop-layout{gap:16px}
  .pwa-devices>.list{gap:14px}
}


/* ==========================================================
   Account 2.5 — REAL TABS
   Only the selected navigation section is rendered visibly.
   ========================================================== */

.tab-workspace{min-width:0}
.tab-panel[hidden]{display:none!important}
.tab-panel{
  min-width:0;
  animation:tab-enter .16s ease-out;
}
@keyframes tab-enter{
  from{opacity:.45;transform:translateY(3px)}
  to{opacity:1;transform:none}
}
.tab-heading{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-end;
  min-height:58px;
  padding:2px 2px 13px;
  margin-bottom:13px;
  border-bottom:1px solid #ffffff0d;
}
.tab-heading h2{margin:3px 0 0;font-size:21px}
.tab-heading p{margin:5px 0 0;color:var(--muted);font-size:10px;line-height:1.45}

.tab-content-small{width:min(100%,680px)}
.tab-content-medium{width:min(100%,980px)}
.tab-content-wide{width:100%}

/* User overview: exactly three useful columns, no empty landing-page column. */
.overview-tab-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  align-items:start;
}
.overview-stack{
  min-width:0;
  display:grid;
  gap:14px;
  align-content:start;
}
.overview-stack>.portal-card,
.overview-stack>.pwa-summary,
.overview-stack>.portal-protocols,
.overview-stack>.pwa-install,
.overview-stack>.card{margin:0}

/* A tab owns the full workspace width. */
.portal-tab-panel>.tab-content-wide>.smart-vpn-card,
.admin-tab-panel>.smart-admin-card,
.admin-tab-panel>.dashboard-card,
.admin-tab-panel>.access-card{margin:0;width:100%}

/* Smart VPN gets room to breathe when it is its own page. */
.portal-tab-panel[data-tab-panel="smart"] .mode-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.portal-tab-panel[data-tab-panel="smart"] .smart-vpn-card{
  padding:18px;
}
.portal-tab-panel[data-tab-panel="smart"] .mode-card{
  min-height:210px;
}

/* Add device is no longer squeezed into one of three landing columns. */
.add-tab-content .add-device-card{
  margin:0;
  width:100%;
}
.add-tab-content .connection-modal{
  text-align:left;
}

/* Devices are a dedicated page. */
.devices-tab-content .pwa-devices,
.devices-tab-content .empty-state{
  margin:0;
}
.devices-tab-content .pwa-devices>.list{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

/* Admin users are a dedicated management page. */
.admin-tab-panel[data-tab-panel="users"] .access-card{
  padding:18px;
}
.admin-tab-panel[data-tab-panel="users"] .user-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  align-items:start;
}
.admin-tab-panel[data-tab-panel="users"] .user-card{
  height:100%;
}

/* Smart/admin screens use desktop width instead of nested landing columns. */
.admin-tab-panel[data-tab-panel="smart"] .safe-category-grid,
.admin-tab-panel[data-tab-panel="smart"] .smart-category-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

/* Invite is intentionally compact: full-screen empty form looks worse. */
.admin-tab-panel[data-tab-panel="invite"] .invite-card{
  margin:0;
  width:100%;
}

/* The old 2.3 landing-grid is no longer the main workspace. */
.portal-desktop-layout{display:none!important}

/* Desktop sidebar links behave like app tabs, not anchor links. */
.app-sidebar .section-nav a[aria-current="page"]{
  color:var(--accent);
  background:linear-gradient(90deg,#f2b45c18,#f2b45c06);
  border-color:#f2b45c3a;
}

/* Tablet */
@media(min-width:761px) and (max-width:1199px){
  .overview-tab-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .overview-tab-grid>.overview-stack:last-child{grid-column:1/-1}
  .devices-tab-content .pwa-devices>.list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .admin-tab-panel[data-tab-panel="users"] .user-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .portal-tab-panel[data-tab-panel="smart"] .mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Mobile */
@media(max-width:760px){
  .tab-heading{
    min-height:0;
    padding:0 1px 9px;
    margin-bottom:10px;
  }
  .tab-heading h2{font-size:19px}
  .tab-heading p{font-size:9px}
  .overview-tab-grid{grid-template-columns:1fr;gap:11px}
  .devices-tab-content .pwa-devices>.list{grid-template-columns:1fr}
  .admin-tab-panel[data-tab-panel="users"] .user-list{grid-template-columns:1fr}
  .portal-tab-panel[data-tab-panel="smart"] .mode-grid{grid-template-columns:1fr}
  .admin-tab-panel[data-tab-panel="smart"] .safe-category-grid,
  .admin-tab-panel[data-tab-panel="smart"] .smart-category-grid{grid-template-columns:1fr}
  .tab-content-small,.tab-content-medium{width:100%}
}

/* Wide desktop */
@media(min-width:1500px){
  .overview-tab-grid{gap:16px}
  .devices-tab-content .pwa-devices>.list{gap:14px}
  .admin-tab-panel[data-tab-panel="users"] .user-list{gap:14px}
}


/* ==========================================================
   Account 2.6 — guided connection wizard
   ========================================================== */
.wizard-tab-heading{margin-bottom:14px}
.connection-wizard-card{
  width:min(100%,1120px);
  padding:18px;
  border:1px solid var(--line);
  border-radius:20px;
  background:#151820;
  box-shadow:0 14px 44px #00000028;
}
.wizard-progress{
  display:grid;
  grid-template-columns:auto 1fr auto 1fr auto 1fr auto;
  align-items:center;
  gap:8px;
  padding:6px 4px 18px;
  border-bottom:1px solid #ffffff0d;
}
.wizard-progress>i{height:1px;background:#ffffff12}
.wizard-progress-step{
  display:flex;
  align-items:center;
  gap:7px;
  width:auto;
  min-height:0;
  margin:0;
  padding:5px;
  border:0;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
}
.wizard-progress-step>span{
  width:28px;height:28px;
  display:grid;place-items:center;
  border-radius:9px;
  border:1px solid #ffffff16;
  background:#0f1218;
  font-size:10px;font-weight:900;
}
.wizard-progress-step>strong{font-size:9px;white-space:nowrap}
.wizard-progress-step.active{color:var(--accent)}
.wizard-progress-step.active>span{
  border-color:#f2b45c55;
  background:#f2b45c12;
}
.wizard-progress-step.done{color:var(--ok)}
.wizard-progress-step.done>span{
  border-color:#56d68b42;
  background:#56d68b0d;
}
.wizard-progress-step.done>span::after{content:"✓"}
.wizard-progress-step.done>span{font-size:0}
.wizard-progress-step.done>span::after{font-size:11px}

.inline-wizard-form{margin-top:0}
.wizard-page{padding:20px 4px 10px;animation:tab-enter .16s ease-out}
.wizard-page[hidden]{display:none!important}
.wizard-page-head{max-width:720px;margin-bottom:16px}
.wizard-kicker{
  display:block;
  color:var(--accent);
  font-size:8px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.wizard-page-head h3{margin:4px 0 0;font-size:22px}
.wizard-page-head p{margin:6px 0 0;color:var(--muted);font-size:10px;line-height:1.45}

.device-type-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
}
.device-type-card{
  min-height:104px;
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  gap:10px;
  align-items:center;
  position:relative;
  margin:0;
  padding:13px;
  border:1px solid #ffffff10;
  border-radius:14px;
  background:#0f1218;
  color:var(--text);
  text-align:left;
}
.device-type-card.active{
  border-color:#f2b45c5a;
  background:linear-gradient(135deg,#f2b45c12,#0f1218);
  box-shadow:inset 0 0 0 1px #f2b45c10;
}
.device-type-card:disabled{opacity:.42;cursor:not-allowed}
.device-type-icon{
  width:38px;height:38px;
  display:grid;place-items:center;
  border:1px solid #ffffff12;
  border-radius:11px;
  background:#ffffff06;
  font-weight:900;
}
.device-type-card strong,.device-type-card small{display:block}
.device-type-card strong{font-size:11px}
.device-type-card small{font-size:8px;color:var(--muted);line-height:1.35;margin-top:3px}
.device-type-card>b{
  position:absolute;right:10px;top:9px;
  color:var(--accent);font-size:7px;
  text-transform:uppercase;letter-spacing:.08em
}
.device-type-card .locked-badge{color:var(--muted)}

.wizard-field{display:block;margin-top:16px}
.wizard-field>span{display:block;font-size:10px;font-weight:800;margin-bottom:6px}
.wizard-field>small{display:block;font-size:8px;color:var(--muted);margin-top:5px}
.wizard-field input{max-width:620px}

.mode-choice-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.wizard-mode-card{
  min-height:160px;
  margin:0;padding:14px;
  border:1px solid #ffffff10;
  border-radius:15px;
  background:#0f1218;
  color:var(--text);
  text-align:left;
}
.wizard-mode-card.active{
  border-color:#56d68b45;
  background:linear-gradient(135deg,#56d68b0a,#0f1218);
}
.mode-card-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.recommended-pill{
  padding:4px 7px;border-radius:999px;
  border:1px solid #56d68b35;
  color:var(--ok);
  font-size:7px;font-weight:900;
  text-transform:uppercase;
}
.wizard-mode-card>strong{display:block;font-size:12px;margin-top:13px}
.wizard-mode-card>p{font-size:9px;color:var(--muted);line-height:1.45;margin:5px 0 0}
.inline-smart-picker{margin-top:12px}
.keenetic-wizard-note{
  margin-top:12px;padding:12px;
  border:1px solid #f2b45c25;
  border-radius:13px;background:#f2b45c07
}
.keenetic-wizard-note strong{font-size:10px}
.keenetic-wizard-note p{font-size:9px;color:var(--muted);line-height:1.45;margin:4px 0 0}

.wizard-network-layout{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(260px,.8fr);
  gap:12px;
}
.wizard-setting-group{
  padding:13px;
  border:1px solid #ffffff0d;
  border-radius:14px;
  background:#0f1218;
}
.server-choice-card{
  min-height:58px;
  display:grid;
  grid-template-columns:40px minmax(0,1fr) auto;
  gap:9px;align-items:center;
  padding:9px 11px;
  border:1px solid #56d68b36;
  border-radius:12px;
  background:#56d68b06;
}
.server-flag{font-size:25px}
.server-choice-card strong,.server-choice-card small{display:block}
.server-choice-card strong{font-size:11px}
.server-choice-card small{font-size:8px;color:var(--muted);margin-top:2px}
.server-choice-card>b{color:var(--ok)}
.inline-advanced{margin-top:12px}

.wizard-review{
  border:1px solid #56d68b28;
  border-radius:16px;
  background:#56d68b05;
  padding:14px;
}
.review-main{
  display:grid;
  grid-template-columns:46px minmax(0,1fr);
  gap:11px;align-items:center;
  padding-bottom:12px;
  border-bottom:1px solid #ffffff0d;
}
.review-device-icon{
  width:46px;height:46px;
  display:grid;place-items:center;
  border-radius:13px;
  border:1px solid #f2b45c35;
  background:#f2b45c0b;
  color:var(--accent);
  font-weight:900;
}
.review-main span,.review-main strong,.review-main small{display:block}
.review-main span{font-size:8px;color:var(--muted)}
.review-main strong{font-size:14px;margin-top:2px}
.review-main small{font-size:9px;color:var(--muted);margin-top:2px}
.review-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:12px;
}
.review-grid>div{
  padding:9px 10px;
  border:1px solid #ffffff0d;
  border-radius:11px;
  background:#0f1218;
}
.review-grid span,.review-grid strong{display:block}
.review-grid span{font-size:8px;color:var(--muted)}
.review-grid strong{font-size:10px;margin-top:2px;overflow-wrap:anywhere}
.wizard-safe-note{
  display:flex;gap:8px;align-items:flex-start;
  margin-top:10px;padding:10px 11px;
  border:1px solid #ffffff0d;border-radius:11px
}
.wizard-safe-note>span{color:var(--ok);font-weight:900}
.wizard-safe-note p{margin:0;font-size:9px;color:var(--muted);line-height:1.45}

.inline-wizard-actions{
  position:sticky;
  bottom:8px;
  z-index:30;
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:14px;
  padding:9px;
  border:1px solid #ffffff12;
  border-radius:14px;
  background:#10131aef;
  backdrop-filter:blur(12px);
  box-shadow:0 10px 32px #0005;
}
.inline-wizard-actions button{margin:0;width:auto;min-width:150px}
.wizard-action-spacer{flex:1}
.wizard-unavailable-card{
  width:min(100%,760px);
  padding:18px;border:1px solid var(--line);
  border-radius:16px;background:#151820
}
.wizard-unavailable-card strong{font-size:13px}
.wizard-unavailable-card p{font-size:10px;color:var(--muted);line-height:1.45}

/* Created / onboarding result */
.created-flow{
  width:min(100%,720px);
  margin:14px auto 18px;
  display:grid;
  grid-template-columns:auto 1fr auto 1fr auto;
  gap:8px;align-items:center
}
.created-flow>i{height:1px;background:#ffffff14}
.created-flow>span{
  padding:6px 8px;border-radius:999px;
  border:1px solid #ffffff12;
  color:var(--muted);
  font-size:8px;font-weight:800
}
.created-flow>span.active{color:var(--ok);border-color:#56d68b3b;background:#56d68b08}
.reserve-protocol{
  margin:12px 0;padding:11px 12px;
  border:1px solid #ffffff0d;border-radius:14px;background:#11141b
}
.reserve-protocol>summary{
  cursor:pointer;font-size:10px;font-weight:900;color:var(--muted)
}
.reserve-protocol-body{margin-top:12px}
.connection-summary-details{
  margin:12px 0;padding:11px 12px;
  border:1px solid #ffffff0d;border-radius:14px;background:#11141b
}
.connection-summary-details>summary{
  cursor:pointer;font-size:10px;font-weight:900;color:var(--muted)
}
.connection-summary-details .connection-summary-card{margin:10px 0 0}
.created-done{margin-top:12px}

/* Tablet */
@media(min-width:761px) and (max-width:1199px){
  .device-type-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .device-type-grid>.device-type-card:last-child{grid-column:1/-1}
  .wizard-network-layout{grid-template-columns:1fr}
  .review-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Mobile */
@media(max-width:760px){
  .connection-wizard-card{padding:12px;border-radius:16px}
  .wizard-progress{
    grid-template-columns:repeat(4,1fr);
    gap:3px;
    padding:3px 0 12px;
  }
  .wizard-progress>i{display:none}
  .wizard-progress-step{
    flex-direction:column;
    justify-content:center;
    gap:3px;
    padding:4px 1px;
  }
  .wizard-progress-step>span{width:25px;height:25px}
  .wizard-progress-step>strong{font-size:7px}
  .wizard-page{padding:15px 0 6px}
  .wizard-page-head h3{font-size:19px}
  .device-type-grid,.mode-choice-grid,.wizard-network-layout,
  .review-grid{grid-template-columns:1fr}
  .device-type-card{min-height:88px}
  .wizard-mode-card{min-height:130px}
  .service-choice-grid{grid-template-columns:1fr}
  .inline-wizard-actions{
    bottom:calc(82px + env(safe-area-inset-bottom));
  }
  .inline-wizard-actions button{min-width:0;flex:1}
  .wizard-action-spacer{display:none}
  .created-flow{
    grid-template-columns:1fr;
    gap:5px
  }
  .created-flow>i{display:none}
  .created-flow>span{text-align:center}
}


/* ==========================================================
   Subscription Engine 2.7
   ========================================================== */
.engine-badge-row{
  display:flex;gap:7px;align-items:center;flex-wrap:wrap;
  margin:10px 0 0;padding-top:9px;border-top:1px solid #ffffff0d
}
.engine-badge-row small{font-size:8px;color:var(--muted)}
.engine-badge{
  display:inline-flex;padding:4px 7px;border-radius:999px;
  border:1px solid #56d68b3c;background:#56d68b09;
  color:var(--ok);font-size:7px;font-weight:950;letter-spacing:.08em
}
.engine-badge.legacy,.engine-badge-row.legacy .engine-badge{
  color:#9aa4b5;border-color:#ffffff16;background:#ffffff05
}
.subscription-warning-ok{border-color:#56d68b2d!important;background:#56d68b06!important}
.subscription-warning-warn{border-color:#f2b45c34!important;background:#f2b45c07!important}
.subscription-warning-bad{border-color:#ff727235!important;background:#ff727208!important}
.grace-progress{
  display:flex;justify-content:space-between;gap:8px;
  margin-top:8px;padding:8px 9px;border-radius:10px;
  border:1px solid #f2b45c2a;background:#f2b45c06;
  font-size:9px
}
.grace-progress span{color:var(--muted)}
.grace-progress strong{color:var(--accent)}

.subscription-engine-panel{
  margin:0 0 14px;padding:15px;
  border:1px solid #56d68b2a;
  border-radius:17px;background:linear-gradient(135deg,#56d68b07,#151820);
}
.subscription-engine-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.subscription-engine-head h3{margin:4px 0 0;font-size:15px}
.subscription-engine-head p{margin:5px 0 0;max-width:760px;color:var(--muted);font-size:9px;line-height:1.45}
.subscription-engine-stats{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:7px;margin-top:12px
}
.subscription-engine-stats>div{
  padding:9px;border:1px solid #ffffff0d;
  border-radius:10px;background:#0f1218
}
.subscription-engine-stats span,.subscription-engine-stats strong{display:block}
.subscription-engine-stats span{font-size:8px;color:var(--muted)}
.subscription-engine-stats strong{font-size:11px;margin-top:2px}
.engine-flow{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  margin-top:10px;padding:9px 10px;border:1px solid #ffffff0d;
  border-radius:11px;background:#0f1218
}
.engine-flow>span{
  padding:4px 7px;border-radius:999px;border:1px solid #ffffff14;
  font-size:8px;font-weight:900
}
.engine-flow>i{width:20px;height:1px;background:#ffffff18}
.engine-flow>small{margin-left:auto;font-size:8px;color:var(--muted)}
.engine-auto{color:var(--ok)!important;border-color:#56d68b35!important}
.engine-legacy{color:#9aa4b5!important}
.engine-form-note{
  margin:8px 0;padding:8px 9px;border-radius:9px;
  border:1px solid #56d68b25;background:#56d68b06;
  color:var(--muted);font-size:8px;line-height:1.45
}
.engine-form-note.legacy{border-color:#ffffff0d;background:#ffffff04}
.new-engine-user-note{
  display:flex;gap:8px;align-items:flex-start;
  margin:10px 0;padding:9px;border:1px solid #56d68b2d;
  border-radius:10px;background:#56d68b06
}
.new-engine-user-note>span{
  flex:none;padding:4px 6px;border:1px solid #56d68b36;border-radius:999px;
  color:var(--ok);font-size:7px;font-weight:950
}
.new-engine-user-note p{margin:0;color:var(--muted);font-size:8px;line-height:1.45}
.suspended-text{color:#ff8585}
.pwa-device .pill.bad{color:#ff8585;border-color:#ff727235;background:#ff727208}

@media(max-width:900px){
  .subscription-engine-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:600px){
  .subscription-engine-head{display:block}
  .subscription-engine-head>.pill{margin-top:8px}
  .subscription-engine-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .engine-flow>small{width:100%;margin-left:0}
}


/* Session Fix 2.7.2 */
.session-expired-info{
  border-color:#f2b45c35;
  background:#f2b45c08;
}


/* ==========================================================
   Billing 2.8 — DigiSeller / Plati
   ========================================================== */
.billing-public-shell{width:min(100%,1240px);margin:auto;padding:26px 18px 70px}
.billing-public{min-width:0}.billing-public-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:18px}.billing-public-head h1{margin:3px 0}.billing-public-head p{max-width:720px;color:var(--muted);font-size:10px;line-height:1.5}
.billing-product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.billing-product-card{padding:16px;border:1px solid var(--line);border-radius:18px;background:#151820;box-shadow:0 12px 36px #0002}.billing-product-top{display:flex;justify-content:space-between;gap:10px;align-items:center}.billing-product-top>strong{font-size:18px}.billing-product-card h2{font-size:16px;margin:12px 0 3px}.billing-product-card>p{color:var(--muted);font-size:9px}.billing-features{display:grid;gap:5px;margin:12px 0}.billing-features span{font-size:9px;color:#b8c0cf}.billing-product-card .linkbtn{display:block;text-align:center;margin-top:12px}.billing-not-ready,.billing-safety-copy{padding:13px;border:1px solid #ffffff0d;border-radius:14px;background:#11141b;margin:12px 0}.billing-not-ready p,.billing-safety-copy{font-size:9px;color:var(--muted);line-height:1.5}
.billing-checkout-shell form button{width:100%}.billing-activation-shell{width:min(100%,760px);margin:5vh auto 50px;padding:0 12px}.billing-activation-card{padding:20px;border:1px solid var(--line);border-radius:20px;background:#151820}.activation-success{width:46px;height:46px;display:grid;place-items:center;margin-bottom:10px;border-radius:50%;border:1px solid #56d68b45;background:#56d68b0b;color:var(--ok);font-size:22px;font-weight:900}.activation-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:14px 0}.activation-summary>div{padding:9px;border:1px solid #ffffff0d;border-radius:10px;background:#0f1218}.activation-summary span,.activation-summary strong{display:block}.activation-summary span{font-size:8px;color:var(--muted)}.activation-summary strong{font-size:10px;margin-top:2px;overflow-wrap:anywhere}.activation-choice{margin-top:12px;padding:13px;border:1px solid #ffffff0d;border-radius:14px;background:#0f1218}.activation-choice.highlighted{border-color:#56d68b28;background:#56d68b05}.activation-choice h2{font-size:13px;margin:0}.activation-choice p{font-size:9px;color:var(--muted);line-height:1.45}.activation-choice .linkbtn{display:block;text-align:center}.compact-summary{grid-template-columns:repeat(3,1fr)}
.billing-history-card{margin-top:12px}.billing-history-list{display:grid;gap:6px;margin-top:10px}.billing-history-row{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:9px;border:1px solid #ffffff0d;border-radius:10px;background:#0f1218}.billing-history-row strong,.billing-history-row small{display:block}.billing-history-row strong{font-size:10px}.billing-history-row small{font-size:8px;color:var(--muted);margin-top:2px}
.billing-admin-status{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;padding:14px;border:1px solid #56d68b25;border-radius:15px;background:#56d68b05}.billing-admin-status h3{margin:3px 0;font-size:14px}.billing-admin-status p{font-size:9px;color:var(--muted)}.billing-admin-actions{display:flex;gap:7px;flex-wrap:wrap}.billing-admin-actions form{margin:0}.billing-admin-actions button,.billing-admin-actions .linkbtn{margin:0}.billing-callback-box{margin-top:10px;padding:11px;border:1px solid #ffffff0d;border-radius:12px;background:#0f1218}.billing-callback-box span,.billing-callback-box strong,.billing-callback-box small{display:block}.billing-callback-box span{font-size:8px;color:var(--muted)}.billing-callback-box strong{font-size:10px;margin:3px 0;overflow-wrap:anywhere}.billing-callback-box small{font-size:8px;color:var(--muted);line-height:1.4}.billing-admin-grid{display:grid;grid-template-columns:minmax(300px,.8fr) minmax(0,1.2fr);gap:12px;margin-top:12px}.billing-admin-grid>.card{margin:0}.billing-mappings-list{display:grid;gap:7px;margin-top:10px}.billing-mapping-row{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:9px;border:1px solid #ffffff0d;border-radius:10px;background:#0f1218}.billing-mapping-row strong,.billing-mapping-row small{display:block}.billing-mapping-row strong{font-size:10px}.billing-mapping-row small{font-size:8px;color:var(--muted);line-height:1.4}.billing-order-dashboard{margin-top:12px}.billing-order-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.billing-order-stats>div{padding:9px;border:1px solid #ffffff0d;border-radius:10px;background:#0f1218}.billing-order-stats span,.billing-order-stats strong{display:block}.billing-order-stats span{font-size:8px;color:var(--muted)}.billing-order-stats strong{font-size:13px;margin-top:2px}.billing-orders-table-wrap{overflow:auto;margin-top:9px;border:1px solid #ffffff0d;border-radius:12px}.billing-orders-table{width:100%;border-collapse:collapse;min-width:760px}.billing-orders-table th,.billing-orders-table td{padding:9px;text-align:left;border-bottom:1px solid #ffffff0d;font-size:9px;vertical-align:top}.billing-orders-table th{color:var(--muted);font-size:8px}.billing-orders-table td small{display:block;color:var(--muted);font-size:8px;margin-top:2px;max-width:280px}
@media(max-width:900px){.billing-product-grid{grid-template-columns:repeat(2,1fr)}.activation-summary{grid-template-columns:repeat(2,1fr)}.billing-admin-grid{grid-template-columns:1fr}.billing-order-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.billing-public-shell{padding:14px 10px 55px}.billing-public-head,.billing-admin-status{display:block}.billing-public-head>.linkbtn,.billing-admin-actions{margin-top:9px}.billing-product-grid,.activation-summary,.compact-summary{grid-template-columns:1fr}.billing-activation-shell{margin-top:2vh}.billing-activation-card{padding:14px}.billing-order-stats{grid-template-columns:repeat(2,1fr)}}


/* ==========================================================
   Billing 2.8.1 — PWA install onboarding
   ========================================================== */
body.pwa-onboarding-open{overflow:hidden}
.pwa-onboarding{
  position:fixed;
  inset:0;
  z-index:12000;
  display:grid;
  place-items:center;
  padding:16px;
}
.pwa-onboarding[hidden]{display:none!important}
.pwa-onboarding-backdrop{
  position:absolute;
  inset:0;
  background:#05070bdd;
  backdrop-filter:blur(8px);
}
.pwa-onboarding-card{
  position:relative;
  width:min(460px,100%);
  max-height:min(760px,94vh);
  overflow:auto;
  padding:22px;
  border:1px solid #ffffff18;
  border-radius:22px;
  background:linear-gradient(180deg,#171b24,#11141b);
  box-shadow:0 30px 100px #000a;
  animation:pwa-onboarding-in .18s ease-out;
}
@keyframes pwa-onboarding-in{
  from{opacity:0;transform:translateY(8px) scale(.985)}
  to{opacity:1;transform:none}
}
.pwa-onboarding-close{
  position:absolute;
  top:11px;
  right:11px;
  width:36px;
  height:36px;
  min-height:36px;
  margin:0;
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid #ffffff10;
  border-radius:11px;
  background:#0d1016;
  color:var(--muted);
  font-size:22px;
}
.pwa-onboarding-icon{
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  margin-bottom:13px;
  border:1px solid #f2b45c45;
  border-radius:17px;
  background:linear-gradient(135deg,#f2a33b20,#ef627615);
  color:var(--accent);
  font-size:23px;
  font-weight:950;
  box-shadow:0 10px 28px #0004;
}
.pwa-onboarding-card h2{margin:4px 0 0;font-size:23px}
.pwa-onboarding-card>p{
  margin:8px 0 0;
  color:var(--muted);
  font-size:10px;
  line-height:1.55;
}
.pwa-install-benefits{
  display:grid;
  gap:7px;
  margin-top:15px;
}
.pwa-install-benefits>div{
  display:grid;
  grid-template-columns:20px minmax(0,1fr);
  column-gap:8px;
  padding:9px 10px;
  border:1px solid #ffffff0d;
  border-radius:11px;
  background:#0d1016;
}
.pwa-install-benefits>div>span{
  grid-row:1/3;
  color:var(--ok);
  font-weight:950;
}
.pwa-install-benefits strong,.pwa-install-benefits small{display:block}
.pwa-install-benefits strong{font-size:10px}
.pwa-install-benefits small{
  margin-top:2px;
  color:var(--muted);
  font-size:8px;
  line-height:1.35;
}
.pwa-ios-guide{
  display:grid;
  gap:6px;
  margin-top:13px;
  padding:10px;
  border:1px solid #f2b45c25;
  border-radius:12px;
  background:#f2b45c06;
}
.pwa-ios-step{
  display:grid;
  grid-template-columns:24px minmax(0,1fr);
  gap:8px;
  align-items:center;
  font-size:9px;
  color:var(--muted);
}
.pwa-ios-step>b{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:#0d1016;
  color:var(--accent);
  font-size:9px;
}
.pwa-browser-guide{
  margin-top:13px;
  padding:10px;
  border:1px solid #ffffff0d;
  border-radius:11px;
  background:#0d1016;
  color:var(--muted);
  font-size:9px;
  line-height:1.45;
}
.pwa-onboarding-actions{
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:8px;
  margin-top:15px;
}
.pwa-onboarding-actions button{margin:0}
.pwa-onboarding-foot{
  display:block;
  margin-top:10px;
  color:#727b8b;
  font-size:8px;
  text-align:center;
  line-height:1.4;
}

@media(max-width:760px){
  .pwa-onboarding{
    align-items:end;
    padding:8px 8px calc(8px + env(safe-area-inset-bottom));
  }
  .pwa-onboarding-card{
    width:100%;
    max-height:88vh;
    border-radius:20px;
    padding:18px;
  }
  .pwa-onboarding-card h2{font-size:21px}
}

@media(max-width:380px){
  .pwa-onboarding-actions{grid-template-columns:1fr}
}


/* Billing 2.8.3 — protocol compatibility */
.protocol-setting.wide{grid-column:1/-1}
.protocol-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.protocol-choice{margin:0;padding:10px;min-height:68px;text-align:left;border:1px solid #ffffff10;border-radius:11px;background:#10141b}
.protocol-choice strong,.protocol-choice small{display:block}
.protocol-choice strong{font-size:10px}
.protocol-choice small{margin-top:4px;color:var(--muted);font-size:8px;line-height:1.35}
.protocol-choice.active{border-color:#f2b45c55;background:#f2b45c08;box-shadow:0 0 0 1px #f2b45c14 inset}
.protocol-choice:disabled{opacity:.55;cursor:not-allowed}
.protocol-help{display:block;margin-top:7px!important}
.compat-success{margin:10px 0;padding:10px;border:1px solid #56d68b2c;border-radius:11px;background:#56d68b06}
.compat-success strong{font-size:10px}
@media(max-width:600px){.protocol-choice-grid{grid-template-columns:1fr}}


/* Billing 2.8.5 — payment recovery */
.billing-recovery-shell{
  min-height:calc(100vh - 40px);
  display:grid;
  place-items:center;
  padding:18px;
}
.billing-recovery-card{
  width:min(620px,100%);
  padding:22px;
  border:1px solid #ffffff14;
  border-radius:20px;
  background:#131720;
  box-shadow:0 24px 80px #0006;
}
.billing-recovery-card h1{margin:5px 0 8px;font-size:24px}
.billing-recovery-steps{
  display:grid;
  gap:7px;
  margin:15px 0;
}
.billing-recovery-steps>div{
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  gap:9px;
  align-items:center;
  padding:9px 10px;
  border:1px solid #ffffff0d;
  border-radius:11px;
  background:#0e1117;
}
.billing-recovery-steps b{
  width:28px;height:28px;display:grid;place-items:center;
  border-radius:9px;background:#f2b45c10;color:var(--accent);font-size:9px
}
.billing-recovery-steps span{font-size:9px;color:var(--muted);line-height:1.4}
.billing-recovery-form{margin-top:14px}
.billing-recovery-form input{
  text-transform:none;
  letter-spacing:.08em;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.billing-recovery-security{
  margin-top:12px;
  padding:9px 10px;
  border:1px solid #56d68b22;
  border-radius:10px;
  background:#56d68b05;
  color:var(--muted);
  font-size:8px;
  line-height:1.45;
}
.billing-recovery-links,.billing-error-actions{
  display:flex;gap:8px;flex-wrap:wrap;margin-top:13px
}
.billing-safety-copy a{color:var(--accent);font-weight:800}
@media(max-width:600px){
  .billing-recovery-shell{padding:8px;align-items:end}
  .billing-recovery-card{padding:17px;border-radius:18px}
  .billing-recovery-card h1{font-size:21px}
}


/* Billing 2.8.6 — guest checkout + refund watcher */
.guest-purchase-flow{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
  margin:13px 0;
}
.guest-purchase-flow span{
  padding:9px 10px;
  border:1px solid #ffffff0d;
  border-radius:10px;
  background:#0e1117;
  color:var(--muted);
  font-size:8px;
}
.guest-purchase-flow b{
  display:inline-grid;
  place-items:center;
  width:20px;height:20px;
  margin-right:5px;
  border-radius:7px;
  background:#f2b45c10;
  color:var(--accent);
}
.refund-watcher-strip{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:8px;
  padding:8px 10px;
  border:1px solid #ffffff0d;
  border-radius:10px;
  background:#0e1117;
  font-size:8px;
}
.refund-watcher-strip span{color:var(--muted)}
.refund-watcher-strip small{margin-left:auto;color:var(--muted)}
@media(max-width:650px){
  .guest-purchase-flow{grid-template-columns:1fr}
  .refund-watcher-strip small{width:100%;margin-left:0}
}


/* Billing 2.8.7 — quick purchase/recovery access */
.auth-quick-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:14px;
}
.auth-quick-actions .linkbtn{
  margin:0;
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.billing-public-head-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.billing-public-head-actions .linkbtn{
  margin:0;
  white-space:nowrap;
}
@media(max-width:650px){
  .auth-quick-actions{grid-template-columns:1fr}
  .billing-public-head-actions{
    width:100%;
    justify-content:stretch;
  }
  .billing-public-head-actions .linkbtn{
    flex:1 1 100%;
    text-align:center;
  }
}


/* Billing 2.8.8 — mobile payment UX */
.mobile-payment-notice{
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:10px;
  margin:14px 0;
  padding:12px;
  border:1px solid #f2b45c33;
  border-radius:13px;
  background:#f2b45c07;
}
.mobile-payment-notice-icon{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#f2b45c12;
  color:var(--accent);
  font-weight:950;
  font-size:14px;
}
.mobile-payment-notice strong{
  display:block;
  margin-bottom:4px;
  font-size:10px;
}
.mobile-payment-notice p{
  margin:3px 0 0;
  color:var(--muted);
  font-size:9px;
  line-height:1.45;
}
.mobile-payment-notice b{color:var(--text)}
.checkout-recovery-actions{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
  margin-top:10px;
}
.checkout-recovery-actions .linkbtn{margin:0}
.checkout-recovery-actions small{
  color:var(--muted);
  font-size:8px;
  line-height:1.4;
}
.buy-mobile-payment-hint{
  margin:10px 0 13px;
  padding:9px 10px;
  border:1px solid #f2b45c22;
  border-radius:10px;
  background:#f2b45c05;
  color:var(--muted);
  font-size:8px;
  line-height:1.45;
}
.buy-mobile-payment-hint strong{color:var(--text)}
@media(max-width:600px){
  .mobile-payment-notice{
    grid-template-columns:30px minmax(0,1fr);
    padding:10px;
  }
  .mobile-payment-notice-icon{
    width:30px;
    height:30px;
  }
  .checkout-recovery-actions{
    display:grid;
    grid-template-columns:1fr;
  }
}


/* ==========================================================
   UX 2.9.0 — subscription, guided setup, local help
   ========================================================== */
.subscription-time-hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:14px 0 8px;
  padding:14px;
  border:1px solid #ffffff10;
  border-radius:14px;
  background:#0e1117;
}
.subscription-time-hero span,.subscription-time-hero strong,.subscription-time-hero small{display:block}
.subscription-time-hero span{font-size:8px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.subscription-time-hero strong{margin-top:2px;font-size:25px;line-height:1}
.subscription-time-hero small{margin-top:5px;color:var(--muted);font-size:8px}
.subscription-time-hero small b{color:var(--text)}
.subscription-renew-main{margin:0;white-space:nowrap}
.subscription-progress-track{
  height:6px;
  overflow:hidden;
  margin:0 0 12px;
  border-radius:999px;
  background:#ffffff0a;
}
.subscription-progress-track span{
  display:block;
  height:100%;
  min-width:1%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--accent),#ffd27a);
  transition:width .4s ease;
}
.guided-plan-grid{grid-template-columns:repeat(3,1fr)}

.guided-target-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.client-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.client-choice-card{
  margin:0;padding:14px;text-align:left;min-height:130px;
  border:1px solid #ffffff10;border-radius:14px;background:#10141b
}
.client-choice-card.active{border-color:#f2b45c55;background:#f2b45c08;box-shadow:0 0 0 1px #f2b45c12 inset}
.client-choice-head{display:flex;justify-content:space-between;gap:8px;align-items:center}
.client-choice-head strong{font-size:13px}
.client-choice-head span{font-size:8px;color:var(--accent);font-weight:850}
.client-choice-card p{margin:9px 0 0;color:var(--text);font-size:10px;line-height:1.45}
.client-choice-card small{display:block;margin-top:7px;color:var(--muted);font-size:8px;line-height:1.4}
.router-client-note,.keenetic-mode-simple{
  padding:13px;border:1px solid #ffffff0d;border-radius:13px;background:#0e1117
}
.router-client-note strong,.keenetic-mode-simple strong{font-size:11px}
.router-client-note p,.keenetic-mode-simple p{margin:5px 0 0;color:var(--muted);font-size:9px;line-height:1.45}
.wizard-local-help{
  display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:9px;align-items:center;
  margin-top:12px;padding:10px;border:1px solid #ffffff0d;border-radius:12px;background:#0e1117
}
.wizard-local-help>span{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:#f2b45c10;color:var(--accent);font-weight:900}
.wizard-local-help strong,.wizard-local-help small{display:block}
.wizard-local-help strong{font-size:9px}.wizard-local-help small{margin-top:2px;color:var(--muted);font-size:8px}
.guided-advanced{margin-top:14px}
.guided-review .advanced-review-line{opacity:.7}

.device-help-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin:9px 0}
.device-help-actions button,.device-help-actions .linkbtn{margin:0}
.device-check-result{font-size:8px;color:var(--muted);line-height:1.4}
.device-check-result.ok{color:var(--ok)}.device-check-result.warn{color:var(--accent)}.device-check-result.bad{color:var(--danger)}

.created-simple-guide{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0
}
.created-simple-guide>div{
  display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;padding:10px;
  text-align:left;border:1px solid #ffffff0d;border-radius:12px;background:#0e1117
}
.created-simple-guide b{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:#f2b45c10;color:var(--accent)}
.created-simple-guide strong,.created-simple-guide small{display:block}
.created-simple-guide strong{font-size:9px}.created-simple-guide small{margin-top:3px;color:var(--muted);font-size:8px;line-height:1.4}
.created-check-card{text-align:left}.created-check-card button{margin-bottom:6px}
.created-final-actions{display:grid;grid-template-columns:1.4fr 1fr;gap:8px}.created-final-actions .linkbtn{margin:0}

.help-topic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.help-topic-card{
  display:grid;grid-template-columns:38px minmax(0,1fr);gap:8px;align-items:center;
  padding:11px;border:1px solid #ffffff0d;border-radius:13px;background:#11151c;text-decoration:none
}
.help-topic-card>span{grid-row:1/3;width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:#f2b45c0c;color:var(--accent);font-size:10px;font-weight:900}
.help-topic-card strong,.help-topic-card small{display:block}
.help-topic-card strong{font-size:10px;color:var(--text)}.help-topic-card small{font-size:8px;color:var(--muted)}
.help-articles{display:grid;gap:12px}
.help-article{padding:14px;border:1px solid #ffffff0d;border-radius:16px;background:#11151c;scroll-margin-top:18px}
.help-article-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:11px}
.help-article-head h3{margin:3px 0 0;font-size:15px}
.help-step-list{display:grid;gap:8px}
.help-step{
  display:grid;grid-template-columns:28px minmax(0,1fr) minmax(150px,250px);gap:10px;align-items:center;
  padding:9px;border:1px solid #ffffff0a;border-radius:12px;background:#0e1117
}
.help-step>b{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:#f2b45c10;color:var(--accent)}
.help-step strong,.help-step p{display:block}.help-step strong{font-size:10px}.help-step p{margin:3px 0 0;color:var(--muted);font-size:8px;line-height:1.4}
.help-step img{width:100%;max-height:155px;object-fit:contain;border-radius:10px;background:#090c11}
.help-mode-simple-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:9px}
.help-mode-simple-grid>div{padding:11px;border:1px solid #ffffff0d;border-radius:12px;background:#0e1117}
.help-mode-simple-grid strong,.help-mode-simple-grid span,.help-mode-simple-grid p{display:block}
.help-mode-simple-grid strong{font-size:10px}.help-mode-simple-grid span{margin-top:3px;color:var(--accent);font-size:8px}.help-mode-simple-grid p{margin:5px 0 0;color:var(--muted);font-size:8px}
.help-wide-shot{display:block;width:min(100%,640px);margin:0 auto;border-radius:12px}
.compact-help-steps{margin-bottom:10px}

@media(max-width:760px){
  .subscription-time-hero{display:block}
  .subscription-renew-main{display:block;text-align:center;margin-top:11px}
  .guided-plan-grid{grid-template-columns:1fr 1fr}
  .client-choice-grid,.created-simple-guide,.created-final-actions{grid-template-columns:1fr}
  .wizard-local-help{grid-template-columns:28px minmax(0,1fr)}
  .wizard-local-help .linkbtn{grid-column:1/-1;text-align:center}
  .help-topic-grid{grid-template-columns:1fr 1fr}
  .help-step{grid-template-columns:28px minmax(0,1fr)}
  .help-step img{grid-column:1/-1;max-height:220px}
  .help-mode-simple-grid{grid-template-columns:1fr}
}
@media(max-width:420px){
  .guided-target-grid,.help-topic-grid{grid-template-columns:1fr}
}

/* ==========================================================
   Growth 2.10.0 — referrals, upgrades, notifications
   ========================================================== */
.referral-motivation-card{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.9fr);gap:16px;
  padding:18px;border:1px solid #f2b45c2e;border-radius:18px;background:#f2b45c07;margin-bottom:12px
}
.referral-motivation-copy h3{margin:8px 0 5px;font-size:20px}
.referral-motivation-copy p{margin:0;color:var(--muted);font-size:9px;line-height:1.5}
.referral-link-box{display:grid;grid-template-columns:1fr auto auto;gap:7px;align-items:center}
.referral-link-box input{min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:8px}
.referral-link-box button{margin:0;white-space:nowrap}
.referral-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.referral-stats-grid>div{padding:14px;border:1px solid #ffffff0d;border-radius:14px;background:#11151c}
.referral-stats-grid span,.referral-stats-grid strong,.referral-stats-grid small{display:block}
.referral-stats-grid span{color:var(--muted);font-size:8px}.referral-stats-grid strong{margin-top:4px;font-size:26px}.referral-stats-grid small{color:var(--muted);font-size:8px}
.referral-rule-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.referral-rule-grid>div{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;padding:10px;border:1px solid #ffffff0a;border-radius:12px;background:#0e1117}
.referral-rule-grid b{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:#f2b45c10;color:var(--accent)}
.referral-rule-grid strong,.referral-rule-grid small{display:block}.referral-rule-grid strong{font-size:9px}.referral-rule-grid small{margin-top:3px;color:var(--muted);font-size:8px;line-height:1.4}
.referral-history-list{display:grid;gap:7px}.referral-history-row{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:9px 10px;border:1px solid #ffffff0a;border-radius:11px;background:#0e1117}
.referral-history-row strong,.referral-history-row small{display:block}.referral-history-row strong{font-size:9px}.referral-history-row small{margin-top:2px;color:var(--muted);font-size:8px}

.notification-channel-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.notification-channel-card{display:grid;grid-template-columns:auto 36px minmax(0,1fr) auto;gap:8px;align-items:center;padding:10px;border:1px solid #ffffff0d;border-radius:12px;background:#0e1117;cursor:pointer}
.notification-channel-card>input{width:auto;margin:0}.notification-channel-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:#f2b45c0c;color:var(--accent);font-size:9px;font-weight:900}
.notification-channel-card strong,.notification-channel-card small{display:block}.notification-channel-card strong{font-size:9px}.notification-channel-card small{margin-top:2px;color:var(--muted);font-size:8px}.notification-channel-card>b{font-size:7px;color:var(--muted)}
.notification-channel-card.channel-disabled{opacity:.65}
.notification-event-grid{display:grid;gap:6px;margin:10px 0}.notification-event-grid label{display:flex;align-items:center;gap:8px;padding:8px 9px;border:1px solid #ffffff0a;border-radius:10px;background:#0e1117;font-size:8px}.notification-event-grid input{width:auto;margin:0}
.telegram-connect-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;padding:10px;border:1px solid #ffffff0d;border-radius:12px;background:#0e1117}.telegram-connect-row strong,.telegram-connect-row small{display:block}.telegram-connect-row strong{font-size:9px}.telegram-connect-row small{margin-top:2px;color:var(--muted);font-size:8px}.telegram-connect-row form,.telegram-connect-row button{margin:0}

.plan-locked{opacity:.78;border-style:dashed}.plan-locked .locked-badge{color:var(--accent)}.device-type-card.upgrade-attention{border-color:#f2b45c99;box-shadow:0 0 0 2px #f2b45c16 inset}
.plan-upgrade-prompt{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:9px 0 13px;padding:11px;border:1px solid #f2b45c33;border-radius:13px;background:#f2b45c07}
.plan-upgrade-prompt>div{display:flex;align-items:center;gap:9px}.plan-upgrade-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#f2b45c12;color:var(--accent);font-weight:900}.plan-upgrade-prompt strong,.plan-upgrade-prompt small{display:block}.plan-upgrade-prompt strong{font-size:10px}.plan-upgrade-prompt small{margin-top:3px;color:var(--muted);font-size:8px}.plan-upgrade-prompt .linkbtn{margin:0;white-space:nowrap}
.billing-product-card.upgrade-recommended{border-color:#f2b45c66;box-shadow:0 0 0 1px #f2b45c18 inset}.upgrade-match-badge{margin-left:auto;padding:4px 6px;border-radius:999px;background:#f2b45c10;color:var(--accent);font-size:7px;font-weight:800}

.integration-status-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}.integration-status-strip>div{padding:10px;border:1px solid #ffffff0d;border-radius:11px;background:#0e1117}.integration-status-strip span,.integration-status-strip strong{display:block}.integration-status-strip span{font-size:8px;color:var(--muted)}.integration-status-strip strong{margin-top:3px;font-size:10px}
.integration-settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.integration-card{padding:15px}.integration-card-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:12px}.integration-card-head h3{margin:3px 0}.integration-card-head p{margin:3px 0 0;color:var(--muted);font-size:8px}.integration-toggle-row{display:grid!important;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:center;padding:9px;border:1px solid #ffffff0d;border-radius:11px;background:#0e1117}.integration-toggle-row input{width:auto;margin:0}.integration-toggle-row strong,.integration-toggle-row small{display:block}.integration-toggle-row small{margin-top:2px;color:var(--muted);font-size:8px}
.integration-two-col{display:grid;grid-template-columns:1fr 120px;gap:8px}.integration-two-col label{margin:0}.integration-test-form{margin-top:8px}.integration-test-form button{margin:0}.integration-readonly{display:flex;justify-content:space-between;gap:8px;padding:8px 9px;border:1px solid #ffffff0d;border-radius:10px;background:#0e1117;font-size:8px}.integration-security-note{margin-top:12px;padding:9px 10px;border:1px solid #56d68b22;border-radius:10px;background:#56d68b05;color:var(--muted);font-size:8px;line-height:1.45}

@media(max-width:820px){
  .referral-motivation-card,.integration-settings-grid{grid-template-columns:1fr}
  .referral-rule-grid{grid-template-columns:1fr 1fr}
  .integration-status-strip{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .referral-link-box{grid-template-columns:1fr}.referral-link-box input{grid-column:1/-1}
  .referral-stats-grid,.notification-channel-grid,.referral-rule-grid{grid-template-columns:1fr}
  .plan-upgrade-prompt,.telegram-connect-row{display:grid}
  .integration-two-col{grid-template-columns:1fr}
}
.email-verify-state{display:inline-block;margin-top:3px;font-size:7px}.email-verify-state.ok{color:var(--ok)}.email-verify-state.warn{color:var(--accent)}
.email-verify-action{display:flex;align-items:center;gap:8px;margin-top:9px}.email-verify-action button{margin:0}.email-verify-action small{color:var(--muted);font-size:8px}


/* ==========================================================
   Help Center 2.10.1 — detailed local import instructions
   ========================================================== */
.help-start-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:0 0 14px;
  padding:14px;
  border:1px solid #f2b45c28;
  border-radius:14px;
  background:#f2b45c06;
}
.help-start-banner strong{font-size:12px}
.help-start-banner p{margin:5px 0 0;color:var(--muted);font-size:9px;line-height:1.45}
.help-start-banner .linkbtn{margin:0;white-space:nowrap}
.help-article-detailed{scroll-margin-top:18px}
.help-install-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:8px 0 13px;
  padding:12px;
  border:1px solid #ffffff0e;
  border-radius:12px;
  background:#0e1117;
}
.help-install-row strong{font-size:10px}
.help-install-row p{margin:4px 0 0;color:var(--muted);font-size:8px;line-height:1.45}
.help-install-row .linkbtn{margin:0;white-space:nowrap}
.help-official-flow{
  display:block;
  width:100%;
  max-width:1160px;
  max-height:520px;
  object-fit:contain;
  margin:10px auto 13px;
  border:1px solid #ffffff0d;
  border-radius:14px;
  background:#0b0e13;
}
.help-step-list-rich{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:10px 0 13px;
}
.help-step-rich{
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  gap:9px;
  padding:10px;
  border:1px solid #ffffff0d;
  border-radius:12px;
  background:#0e1117;
}
.help-step-rich>b{
  width:30px;height:30px;
  display:grid;place-items:center;
  border-radius:9px;
  background:#f2b45c10;
  color:var(--accent);
  font-size:9px;
}
.help-step-rich strong{display:block;font-size:9px}
.help-step-rich p{margin:3px 0 0;color:var(--muted);font-size:8px;line-height:1.45}
.help-step-rich code{font-size:8px;color:var(--text)}
.compact-rich{grid-template-columns:repeat(2,1fr)}
.help-subtitle{margin:17px 0 7px;font-size:12px}
.help-callout,.help-danger-callout{
  padding:11px 12px;
  border-radius:11px;
  margin:10px 0 0;
}
.help-callout{
  border:1px solid #56d68b22;
  background:#56d68b05;
}
.help-danger-callout{
  border:1px solid #f06c6c2c;
  background:#f06c6c07;
}
.help-callout strong,.help-danger-callout strong{display:block;font-size:9px}
.help-callout p,.help-danger-callout p{margin:4px 0 0;color:var(--muted);font-size:8px;line-height:1.45}
.help-two-paths{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:10px 0;
}
.help-two-paths>div{
  padding:11px;
  border:1px solid #ffffff0d;
  border-radius:12px;
  background:#0e1117;
}
.help-two-paths strong{font-size:10px}
.help-two-paths p{margin:5px 0 0;color:var(--muted);font-size:8px;line-height:1.45}
.help-troubleshooting{
  margin-top:12px;
  border:1px solid #ffffff0d;
  border-radius:12px;
  background:#0e1117;
  overflow:hidden;
}
.help-troubleshooting summary{
  padding:11px 12px;
  cursor:pointer;
  font-size:9px;
  font-weight:850;
}
.help-troubleshooting>div{padding:0 12px 10px}
.help-troubleshooting p{margin:6px 0;color:var(--muted);font-size:8px;line-height:1.5}
.help-troubleshooting b{color:var(--text)}
.help-source-note{
  padding:12px;
  border:1px dashed #ffffff18;
  border-radius:12px;
  color:var(--muted);
  font-size:8px;
  line-height:1.5;
}
.help-source-note strong{color:var(--text);font-size:9px}
.help-source-note p{margin:5px 0 7px}
.help-source-note>div{display:flex;gap:9px;flex-wrap:wrap}
.help-source-note a{color:var(--accent)}
.detailed-help-topics{margin-bottom:16px}

@media(max-width:760px){
  .help-start-banner,.help-install-row{display:block}
  .help-start-banner .linkbtn,.help-install-row .linkbtn{
    display:block;
    margin-top:10px;
    text-align:center;
  }
  .help-step-list-rich,.compact-rich,.help-two-paths{grid-template-columns:1fr}
  .help-official-flow{max-height:none}
}


/* ==========================================================
   Production 3.0 — diagnostics / pilot / reconciliation
   ========================================================== */
.device-diagnostic-result{
  margin:9px 0;padding:10px;border:1px solid #ffffff0d;border-radius:12px;background:#0e1117
}
.diagnostic-title{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:8px}
.diagnostic-title strong{font-size:10px}.diagnostic-title small{font-size:8px;color:var(--muted)}
.diagnostic-table{display:grid;gap:5px}
.diagnostic-row{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:7px;align-items:center;font-size:8px}
.diagnostic-row strong{font-size:8px}
.diagnostic-loading{font-size:8px;color:var(--muted)}
.device-support-report{margin:7px 0 10px;border:1px solid #ffffff0d;border-radius:10px;background:#0e1117}
.device-support-report summary{padding:9px 10px;cursor:pointer;font-size:8px;font-weight:800}
.device-support-report form{padding:0 10px 10px}
.device-support-report textarea{resize:vertical;min-height:70px}
.support-center-card{margin:0 0 14px;padding:13px;border:1px solid #ffffff0d;border-radius:14px;background:#11151c}
.support-center-head{display:flex;justify-content:space-between;gap:12px;align-items:center}
.support-center-head h3{margin:3px 0;font-size:13px}
.support-center-head p{margin:0;color:var(--muted);font-size:8px;line-height:1.45}
.support-user-list{display:grid;gap:6px;margin-top:10px}
.support-user-list>div{display:grid;grid-template-columns:auto minmax(120px,.5fr) 1fr;gap:8px;align-items:center;padding:8px;border-radius:9px;background:#0e1117}
.support-user-list strong{font-size:8px}.support-user-list small{font-size:8px;color:var(--muted)}

.production-hero{display:grid;grid-template-columns:1.2fr 1fr;gap:10px;margin-bottom:10px}
.production-pilot,.production-health{padding:15px;border:1px solid #ffffff0d;border-radius:14px;background:#11151c}
.production-pilot span,.production-pilot strong,.production-pilot small{display:block}
.production-pilot span{font-size:8px;color:var(--muted);text-transform:uppercase}
.production-pilot strong{font-size:28px;margin-top:3px}.production-pilot small{font-size:8px;color:var(--muted)}
.production-progress{height:7px;margin-top:10px;border-radius:999px;background:#ffffff0a;overflow:hidden}
.production-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),#ffd27a)}
.production-health{display:flex;flex-direction:column;justify-content:center;gap:7px}
.production-health strong{font-size:12px}.production-health small{font-size:8px;color:var(--muted)}

.production-metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:10px}
.production-metrics-grid>div{padding:10px;border:1px solid #ffffff0d;border-radius:11px;background:#0e1117}
.production-metrics-grid span,.production-metrics-grid strong{display:block}
.production-metrics-grid span{font-size:7px;color:var(--muted);text-transform:uppercase}.production-metrics-grid strong{margin-top:3px;font-size:13px}

.production-grid-two{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.production-card{margin:0}
.production-card h3{margin:3px 0 10px;font-size:13px}
.production-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.funnel-table,.production-resource-list{display:grid;gap:5px}
.funnel-table>div,.production-resource-list>div{display:flex;justify-content:space-between;gap:10px;padding:7px 8px;border-radius:8px;background:#0e1117}
.funnel-table span,.production-resource-list span{font-size:8px;color:var(--muted)}
.funnel-table strong,.production-resource-list strong{font-size:9px}
.production-privacy-note{margin:9px 0 0;color:var(--muted);font-size:7px;line-height:1.45}

.production-issue-list{display:grid;gap:6px}
.production-issue{display:grid;grid-template-columns:10px minmax(0,1fr);gap:8px;align-items:start;padding:9px;border-radius:9px;background:#0e1117}
.production-issue strong,.production-issue small{display:block}.production-issue strong{font-size:9px}.production-issue small{margin-top:2px;color:var(--muted);font-size:8px}
.production-issue.critical{border:1px solid #ef6d6d26}.production-issue.warning{border:1px solid #f2b45c20}
.production-empty-ok{padding:10px;border-radius:9px;background:#56d68b07;color:var(--ok);font-size:8px}

.production-list{display:grid;gap:7px}
.production-list>div{padding:9px;border:1px solid #ffffff0d;border-radius:9px;background:#0e1117}
.production-list strong,.production-list small{display:block}
.production-list strong{margin-top:4px;font-size:9px}.production-list small{margin-top:3px;color:var(--muted);font-size:8px;line-height:1.4}
.support-admin-top{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.support-admin-list p{margin:6px 0;color:var(--text);font-size:8px;line-height:1.45}
.support-admin-list .is-resolved{opacity:.58}
.support-resolve-form{display:grid;grid-template-columns:1fr auto;gap:6px;margin-top:7px}
.support-resolve-form input,.support-resolve-form button{margin:0}
.production-privacy-box{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:10px 12px;border:1px dashed #ffffff18;border-radius:11px}
.production-privacy-box strong{font-size:8px}.production-privacy-box span{font-size:8px;color:var(--muted);line-height:1.45}

@media(max-width:900px){
  .production-metrics-grid{grid-template-columns:repeat(2,1fr)}
  .production-grid-two,.production-hero{grid-template-columns:1fr}
}
@media(max-width:650px){
  .production-metrics-grid{grid-template-columns:1fr 1fr}
  .support-center-head{display:block}.support-center-head .linkbtn{display:block;margin-top:9px;text-align:center}
  .support-user-list>div{grid-template-columns:1fr}
  .support-resolve-form{grid-template-columns:1fr}
  .production-privacy-box{grid-template-columns:1fr}
}


/* ==========================================================
   Production 3.0.1 — readability pass
   Larger typography without turning the dashboard into a landing page.
   ========================================================== */

/* Production page headings */
[data-tab-panel="production"] .eyebrow{
  font-size:10px;
  letter-spacing:.12em;
}
[data-tab-panel="production"] .tab-heading h2{
  font-size:24px;
  line-height:1.15;
}
[data-tab-panel="production"] .tab-heading p{
  font-size:11px;
  line-height:1.5;
  max-width:760px;
}

/* Hero */
.production-pilot span{
  font-size:9px;
}
.production-pilot strong{
  font-size:34px;
  line-height:1;
}
.production-pilot small{
  font-size:10px;
}
.production-health strong{
  font-size:14px;
}
.production-health small{
  font-size:10px;
  line-height:1.45;
}
.production-health .pill{
  font-size:9px;
}

/* Metric cards */
.production-metrics-grid span{
  font-size:9px;
  letter-spacing:.06em;
}
.production-metrics-grid strong{
  font-size:16px;
  line-height:1.15;
}

/* Cards */
.production-card h3{
  font-size:16px;
  line-height:1.2;
}
.production-card .eyebrow{
  font-size:10px;
}

/* Funnel and server data */
.funnel-table>div,
.production-resource-list>div{
  padding:9px 10px;
}
.funnel-table span,
.production-resource-list span{
  font-size:10px;
  line-height:1.4;
}
.funnel-table strong,
.production-resource-list strong{
  font-size:11px;
}

/* Health alerts */
.production-issue{
  padding:10px 11px;
}
.production-issue strong{
  font-size:11px;
}
.production-issue small{
  font-size:9px;
  line-height:1.45;
}
.production-empty-ok{
  font-size:10px;
  line-height:1.45;
}

/* Billing reconciliation + support */
.production-list strong{
  font-size:11px;
}
.production-list small{
  font-size:9px;
  line-height:1.45;
}
.support-admin-list p{
  font-size:10px;
  line-height:1.5;
}
.support-admin-top .pill,
.production-card-head .pill{
  font-size:9px;
}

/* Helper / privacy text */
.production-privacy-note{
  font-size:9px;
  line-height:1.5;
}
.production-privacy-box strong,
.production-privacy-box span{
  font-size:9px;
  line-height:1.5;
}

/* Left admin navigation */
.admin-shell .portal-sidebar .nav-label,
.admin-shell .portal-nav .nav-label{
  font-size:10px;
}
.admin-shell .portal-sidebar small,
.admin-shell .portal-nav small{
  font-size:8px;
}

/* Preserve compactness on laptop screens */
@media(max-width:1360px){
  [data-tab-panel="production"] .tab-heading h2{font-size:22px}
  .production-pilot strong{font-size:30px}
  .production-metrics-grid strong{font-size:15px}
  .production-card h3{font-size:15px}
}

/* Mobile remains readable */
@media(max-width:650px){
  [data-tab-panel="production"] .tab-heading h2{font-size:20px}
  [data-tab-panel="production"] .tab-heading p{font-size:10px}
  .production-pilot strong{font-size:28px}
  .production-metrics-grid span{font-size:8px}
  .production-metrics-grid strong{font-size:14px}
  .funnel-table span,
  .production-resource-list span{font-size:9px}
  .funnel-table strong,
  .production-resource-list strong{font-size:10px}
}


/* ==========================================================
   Production 3.0.2 — GLOBAL TYPOGRAPHY
   User requirement:
   - normal UI text: 14–16 px
   - headings: 18–24 px
   Applied across user cabinet, admin, billing, auth, help and PWA.
   ========================================================== */

html{
  font-size:16px;
}

body{
  font-size:14px !important;
  line-height:1.5;
}

/* Base text: never microscopic */
p,
li,
label,
small,
caption,
summary,
td,
th,
option,
.muted,
.auth-foot,
.wizard-hint,
.protocol-help,
.device-check-result,
.production-privacy-note,
.production-privacy-box span,
.help-source-note,
.help-step-rich p,
.help-callout p,
.help-danger-callout p,
.help-two-paths p,
.help-troubleshooting p,
.support-center-head p,
.support-user-list small,
.production-list small,
.production-issue small,
.funnel-table span,
.production-resource-list span,
.billing-recovery-steps span,
.billing-recovery-security,
.checkout-recovery-actions small,
.buy-mobile-payment-hint,
.client-choice-card small,
.wizard-local-help small,
.created-simple-guide small,
.help-topic-card small,
.help-step p,
.help-mode-simple-grid p{
  font-size:14px !important;
  line-height:1.5;
}

/* General controls */
button,
input,
select,
textarea,
.linkbtn,
.choice-btn,
.device-type-card,
.client-choice-card,
.wizard-mode-card,
.protocol-choice,
.service-choice{
  font-size:15px !important;
}

input,
select,
textarea{
  line-height:1.35;
}

button,
.linkbtn{
  line-height:1.2;
}

/* Normal emphasis / values */
strong,
b,
.account-plan-grid strong,
.review-grid strong,
.production-metrics-grid strong,
.funnel-table strong,
.production-resource-list strong,
.production-list strong,
.production-issue strong,
.help-step-rich strong,
.help-topic-card strong,
.help-two-paths strong,
.support-center-head strong,
.support-user-list strong,
.diagnostic-row strong,
.diagnostic-title strong{
  font-size:16px !important;
}

/* Navigation */
.portal-sidebar .nav-label,
.portal-nav .nav-label,
.admin-shell .portal-sidebar .nav-label,
.admin-shell .portal-nav .nav-label,
.bottom-nav .nav-label{
  font-size:14px !important;
}

.portal-sidebar small,
.portal-nav small,
.admin-shell .portal-sidebar small,
.admin-shell .portal-nav small{
  font-size:14px !important;
}

/* Eyebrows / badges / status labels */
.eyebrow,
.pill,
.badge,
.mode-badge,
.recommended-pill,
.locked-badge,
.client-choice-head span,
.subscription-time-hero span,
.production-pilot span,
.production-metrics-grid span{
  font-size:14px !important;
}

/* Headings */
h1,
.auth-card h1,
.billing-recovery-card h1{
  font-size:24px !important;
  line-height:1.2 !important;
}

h2,
.tab-heading h2,
[data-tab-panel="production"] .tab-heading h2{
  font-size:22px !important;
  line-height:1.2 !important;
}

h3,
.production-card h3,
.support-center-head h3,
.help-article-head h3,
.wizard-page-head h3{
  font-size:20px !important;
  line-height:1.25 !important;
}

h4,
.help-subtitle{
  font-size:18px !important;
  line-height:1.3 !important;
}

/* Important subscription / pilot values stay prominent but within 24px */
.subscription-time-hero strong,
.production-pilot strong{
  font-size:24px !important;
  line-height:1.1 !important;
}

/* Secondary UI titles */
.proto-title strong,
.client-choice-head strong,
.mode-choice-grid strong,
.review-main strong,
.device-card h3,
.card-title,
.section-title{
  font-size:18px !important;
}

/* Production dashboard */
[data-tab-panel="production"] .tab-heading p,
.production-health small,
.production-health .pill,
.production-card .eyebrow,
.production-empty-ok,
.support-admin-top .pill,
.production-card-head .pill{
  font-size:14px !important;
}

.production-health strong{
  font-size:16px !important;
}

/* Diagnostics */
.diagnostic-title small,
.diagnostic-loading,
.diagnostic-row{
  font-size:14px !important;
}

/* Wizard */
.wizard-kicker,
.wizard-field span,
.wizard-field small,
.mode-card-top span,
.wizard-page-head p,
.client-choice-card p,
.router-client-note p,
.keenetic-mode-simple p,
.wizard-local-help strong{
  font-size:14px !important;
}

.device-type-card strong,
.client-choice-card strong,
.wizard-mode-card strong,
.protocol-choice strong,
.service-choice strong{
  font-size:16px !important;
}

/* Help Center */
.help-install-row strong,
.help-callout strong,
.help-danger-callout strong,
.help-source-note strong,
.help-troubleshooting summary{
  font-size:16px !important;
}

.help-step-rich>b,
.help-step>b{
  font-size:14px !important;
}

/* Billing/auth text */
.billing-safety-copy,
.billing-recovery-card .muted,
.mobile-payment-notice p,
.mobile-payment-notice strong,
.auth-error,
.auth-info{
  font-size:14px !important;
}

/* Forms inside compact admin/support blocks */
.compact-form label,
.compact-form small,
.support-resolve-form input,
.support-resolve-form button{
  font-size:14px !important;
}

/* Desktop spacing so larger text has room */
.card,
.protocol-card,
.help-article,
.production-card,
.account-plan-card,
.connection-wizard-card{
  line-height:1.5;
}

/* Tablet/mobile: keep same readable floor; only headings step down slightly */
@media(max-width:760px){
  body{font-size:14px !important}

  h1,
  .auth-card h1,
  .billing-recovery-card h1{
    font-size:22px !important;
  }

  h2,
  .tab-heading h2,
  [data-tab-panel="production"] .tab-heading h2{
    font-size:20px !important;
  }

  h3,
  .production-card h3,
  .support-center-head h3,
  .help-article-head h3,
  .wizard-page-head h3{
    font-size:18px !important;
  }

  h4,
  .help-subtitle{
    font-size:18px !important;
  }

  .subscription-time-hero strong,
  .production-pilot strong{
    font-size:22px !important;
  }

  .portal-sidebar .nav-label,
  .portal-nav .nav-label,
  .bottom-nav .nav-label{
    font-size:14px !important;
  }
}

/* Very small phones: still do not go below 14px */
@media(max-width:420px){
  body,
  p,
  li,
  label,
  small,
  summary,
  button,
  input,
  select,
  textarea,
  .linkbtn{
    font-size:14px !important;
  }
}


/* ==========================================================
   Production 3.0.3 — users grid/list + subscription center
   ========================================================== */

/* Admin users */
.user-admin-controls{
  display:grid;
  gap:10px;
  margin:14px 0;
  padding:12px;
  border:1px solid #ffffff0d;
  border-radius:14px;
  background:#0e1117;
}
.user-toolbar-main{
  display:grid;
  grid-template-columns:minmax(260px,1fr) auto;
  gap:10px;
  align-items:end;
}
.user-search-box,
.user-filter-panel label{
  display:grid;
  gap:5px;
}
.user-search-box>span,
.user-filter-panel label>span{
  font-size:14px;
  color:var(--muted);
}
.user-view-toggle{
  display:flex;
  gap:6px;
  padding:4px;
  border:1px solid #ffffff10;
  border-radius:11px;
  background:#11151c;
}
.user-view-toggle button{
  min-height:40px;
  border:0;
  padding:8px 12px;
  border-radius:8px;
  background:transparent;
}
.user-view-toggle button.active{
  background:#f2b45c10;
  color:var(--accent);
  box-shadow:0 0 0 1px #f2b45c28 inset;
}
.user-filter-panel{
  display:grid;
  grid-template-columns:repeat(6,minmax(120px,1fr)) auto;
  gap:8px;
  align-items:end;
}
.user-filter-panel select,
.user-filter-panel button{
  min-height:42px;
  margin:0;
}
.user-filter-summary{
  display:flex;
  justify-content:flex-end;
  color:var(--muted);
}
.user-filter-summary strong{color:var(--text)}

.user-list.view-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.user-list.view-grid .user-card{
  margin:0;
  min-width:0;
}
.user-list.view-list{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}
.user-list.view-list .user-card{
  margin:0;
  padding:12px;
}
.user-list.view-list .user-card-head{
  display:grid;
  grid-template-columns:minmax(220px,.8fr) 1.2fr;
  gap:12px;
  align-items:center;
}
.user-list.view-list .user-main{
  min-width:0;
}
.user-list.view-list .user-card-email{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.user-list.view-list .subscription-strip{
  grid-template-columns:repeat(5,minmax(110px,1fr));
}
.user-list.view-list .auth-admin-tools,
.user-list.view-list .user-actions{
  margin-top:8px;
}
.user-list.view-list details{
  margin-top:8px;
}
.user-card[hidden]{display:none !important}

/* Subscription center */
.subscription-current-card{
  margin-bottom:12px;
}
.subscription-current-main{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.subscription-current-main h3{
  margin:4px 0;
}
.subscription-current-main p{
  margin:0;
  color:var(--muted);
}
.subscription-current-facts{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin-top:13px;
}
.subscription-current-facts>div{
  padding:10px;
  border-radius:11px;
  background:#0e1117;
  border:1px solid #ffffff0d;
}
.subscription-current-facts span,
.subscription-current-facts strong{
  display:block;
}
.subscription-current-facts span{
  color:var(--muted);
}
.subscription-current-facts strong{
  margin-top:3px;
}
.subscription-limit-banner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:12px;
  padding:12px;
  border:1px solid #f2b45c32;
  border-radius:12px;
  background:#f2b45c07;
}
.subscription-limit-banner>div{
  display:flex;
  align-items:center;
  gap:10px;
}
.subscription-limit-icon{
  width:38px;height:38px;
  display:grid;place-items:center;
  border-radius:11px;
  background:#f2b45c12;
  color:var(--accent);
  font-weight:900;
}
.subscription-limit-banner p{
  margin:3px 0 0;
  color:var(--muted);
}
.subscription-limit-banner .linkbtn{margin:0;white-space:nowrap}

.subscription-plan-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-bottom:12px;
}
.subscription-plan-card{
  padding:14px;
  border:1px solid #ffffff0f;
  border-radius:15px;
  background:#11151c;
  scroll-margin-top:18px;
}
.subscription-plan-card.is-current{
  border-color:#56d68b35;
  box-shadow:0 0 0 1px #56d68b12 inset;
}
.subscription-plan-card:target{
  border-color:#f2b45c70;
  box-shadow:0 0 0 2px #f2b45c18 inset;
}
.subscription-plan-top{
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:center;
}
.subscription-plan-top>div{
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:wrap;
}
.subscription-plan-card h3{
  margin:10px 0 7px;
}
.subscription-plan-features{
  display:grid;
  gap:4px;
  min-height:160px;
}
.subscription-plan-features span{
  color:var(--muted);
}
.subscription-change-note{
  margin:11px 0;
  padding:9px 10px;
  border:1px solid #ffffff0d;
  border-radius:10px;
  background:#0e1117;
}
.subscription-change-note strong,
.subscription-change-note span{
  display:block;
}
.subscription-change-note span{
  margin-top:3px;
  color:var(--muted);
}
.subscription-change-note.upgrade{
  border-color:#f2b45c28;
  background:#f2b45c05;
}
.subscription-change-note.current{
  border-color:#56d68b20;
  background:#56d68b04;
}
.subscription-products{
  display:grid;
  gap:7px;
}
.subscription-product-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  padding-top:8px;
  border-top:1px solid #ffffff0b;
}
.subscription-product-row strong,
.subscription-product-row small{
  display:block;
}
.subscription-product-row small{
  margin-top:2px;
  color:var(--muted);
}
.subscription-product-row .linkbtn,
.subscription-product-row button{
  margin:0;
  text-align:center;
}
.subscription-product-empty{
  padding:10px;
  border-radius:10px;
  background:#0e1117;
}
.subscription-product-empty strong,
.subscription-product-empty span{
  display:block;
}
.subscription-product-empty span{
  margin-top:3px;
  color:var(--muted);
}
.subscription-history-panel{
  margin-bottom:12px;
}
.subscription-explain{
  padding:12px;
  border:1px dashed #ffffff18;
  border-radius:12px;
}
.subscription-explain strong,
.subscription-explain p{
  display:block;
}
.subscription-explain p{
  margin:4px 0 0;
  color:var(--muted);
}
.wizard-unavailable-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}
.wizard-unavailable-actions .linkbtn{margin:0}
.device-limit-meter{
  height:7px;
  overflow:hidden;
  margin-top:10px;
  border-radius:999px;
  background:#ffffff0a;
}
.device-limit-meter span{
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--accent),#ffd27a);
}

@media(max-width:1280px){
  .user-filter-panel{
    grid-template-columns:repeat(3,minmax(140px,1fr)) auto;
  }
  .user-list.view-grid{
    grid-template-columns:1fr;
  }
}
@media(max-width:900px){
  .subscription-plan-grid{
    grid-template-columns:1fr;
  }
  .subscription-plan-features{min-height:auto}
  .subscription-current-facts{
    grid-template-columns:1fr 1fr;
  }
  .user-list.view-list .user-card-head{
    grid-template-columns:1fr;
  }
  .user-list.view-list .subscription-strip{
    grid-template-columns:1fr 1fr;
  }
}
@media(max-width:700px){
  .user-toolbar-main{
    grid-template-columns:1fr;
  }
  .user-view-toggle{
    width:100%;
  }
  .user-view-toggle button{
    flex:1;
  }
  .user-filter-panel{
    grid-template-columns:1fr 1fr;
  }
  .user-filter-panel>button{
    grid-column:1/-1;
  }
  .subscription-current-main,
  .subscription-limit-banner{
    display:block;
  }
  .subscription-limit-banner .linkbtn{
    display:block;
    margin-top:10px;
    text-align:center;
  }
  .subscription-product-row{
    grid-template-columns:1fr;
  }
  .subscription-product-row .linkbtn,
  .subscription-product-row button{
    width:100%;
  }
}
@media(max-width:460px){
  .user-filter-panel,
  .subscription-current-facts{
    grid-template-columns:1fr;
  }
}


/* ==========================================================
   Production 3.0.4 — reconnect device + Free VPN naming
   ========================================================== */
.device-reconnect-box{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin:10px 0;
  padding:11px 12px;
  border:1px solid #f2b45c22;
  border-radius:12px;
  background:#f2b45c05;
}
.device-reconnect-box strong,
.device-reconnect-box small{
  display:block;
}
.device-reconnect-box strong{
  font-size:16px !important;
}
.device-reconnect-box small{
  margin-top:3px;
  color:var(--muted);
  font-size:14px !important;
  line-height:1.5;
}
.device-reconnect-box form{
  margin:0;
}
.device-reconnect-box .reconnect-button{
  margin:0;
  white-space:nowrap;
}

.reconnect-warning{
  margin:12px 0 16px;
  padding:12px 14px;
  border:1px solid #f2b45c35;
  border-radius:12px;
  background:#f2b45c07;
  text-align:left;
}
.reconnect-warning strong{
  display:block;
  font-size:16px !important;
}
.reconnect-warning p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:14px !important;
  line-height:1.5;
}

@media(max-width:700px){
  .device-reconnect-box{
    display:block;
  }
  .device-reconnect-box form,
  .device-reconnect-box .reconnect-button{
    width:100%;
  }
  .device-reconnect-box .reconnect-button{
    display:block;
    margin-top:10px;
    text-align:center;
  }
}


/* ==========================================================
   Production 3.0.5 — Admin Users REAL list-view hotfix
   ========================================================== */

/* Old responsive rules have higher selector specificity, so explicitly
   override them with the same admin-tab scope. */
.admin-tab-panel[data-tab-panel="users"] .user-list.view-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.admin-tab-panel[data-tab-panel="users"] .user-list.view-list{
  display:grid;
  grid-template-columns:1fr !important;
  gap:7px;
}

/* In tile mode the extra row-expander is not needed. */
.user-list.view-grid .user-row-expand{
  display:none !important;
}

/* A real list row: compact horizontal summary. */
.admin-tab-panel[data-tab-panel="users"] .user-list.view-list .user-card{
  height:auto;
  min-height:0;
  padding:11px 12px;
  border-radius:12px;
}

.admin-tab-panel[data-tab-panel="users"] .user-list.view-list .user-card-head{
  display:grid;
  grid-template-columns:minmax(220px,1fr) minmax(360px,1.7fr) auto;
  gap:12px;
  align-items:center;
}

.user-list.view-list .user-main{
  display:grid;
  grid-template-columns:minmax(100px,.6fr) minmax(180px,1fr);
  column-gap:10px;
  align-items:center;
}
.user-list.view-list .user-main>strong{
  grid-row:1 / span 2;
}
.user-list.view-list .user-main>small{
  min-width:0;
}
.user-list.view-list .user-card-email{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.user-list.view-list .user-badges{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  gap:5px;
  margin:0;
}
.user-list.view-list .user-row-expand{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0;
  white-space:nowrap;
}

/* Hide the full management form in compact list until requested. */
.user-list.view-list .user-card > .subscription-strip,
.user-list.view-list .user-card > .subscription-tools,
.user-list.view-list .user-card > .auth-admin-tools,
.user-list.view-list .user-card > .user-actions,
.user-list.view-list .user-card > .device-details{
  display:none !important;
}

/* "Подробнее" expands only that selected user. */
.user-list.view-list .user-card.is-expanded{
  padding:14px;
  border-color:#f2b45c32;
}
.user-list.view-list .user-card.is-expanded > .subscription-strip{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(110px,1fr));
  margin-top:11px;
}
.user-list.view-list .user-card.is-expanded > .subscription-tools{
  display:block !important;
  margin-top:8px;
}
.user-list.view-list .user-card.is-expanded > .auth-admin-tools{
  display:flex !important;
  margin-top:8px;
}
.user-list.view-list .user-card.is-expanded > .user-actions{
  display:flex !important;
  margin-top:8px;
}
.user-list.view-list .user-card.is-expanded > .device-details{
  display:block !important;
  margin-top:8px;
}

/* Keep tiles on desktop, as requested. */
@media(min-width:1200px){
  .admin-tab-panel[data-tab-panel="users"] .user-list.view-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .admin-tab-panel[data-tab-panel="users"] .user-list.view-list{
    grid-template-columns:1fr !important;
  }
}

/* Tablet list stays one compact row where space permits. */
@media(min-width:761px) and (max-width:1199px){
  .admin-tab-panel[data-tab-panel="users"] .user-list.view-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .admin-tab-panel[data-tab-panel="users"] .user-list.view-list{
    grid-template-columns:1fr !important;
  }
  .admin-tab-panel[data-tab-panel="users"] .user-list.view-list .user-card-head{
    grid-template-columns:minmax(190px,1fr) minmax(260px,1.2fr) auto;
  }
  .user-list.view-list .user-main{
    grid-template-columns:1fr;
  }
  .user-list.view-list .user-main>strong{
    grid-row:auto;
  }
}

/* On mobile list means a single compact vertical row, not giant cards. */
@media(max-width:760px){
  .admin-tab-panel[data-tab-panel="users"] .user-list.view-grid,
  .admin-tab-panel[data-tab-panel="users"] .user-list.view-list{
    grid-template-columns:1fr !important;
  }

  .admin-tab-panel[data-tab-panel="users"] .user-list.view-list .user-card-head{
    grid-template-columns:1fr auto;
  }
  .user-list.view-list .user-main{
    grid-template-columns:1fr;
  }
  .user-list.view-list .user-main>strong{
    grid-row:auto;
  }
  .user-list.view-list .user-badges{
    grid-column:1/-1;
  }
  .user-list.view-list .user-card.is-expanded > .subscription-strip{
    grid-template-columns:1fr 1fr;
  }
}


/* ==========================================================
   Service Routing 3.1 — custom service analyzer / embedded SMART
   ========================================================== */
.custom-service-builder{
  margin-top:14px;
  padding:13px;
  border:1px solid #ffffff10;
  border-radius:13px;
  background:#0e1117;
}
.custom-service-head strong,
.custom-service-head small{
  display:block;
}
.custom-service-head strong{font-size:16px !important}
.custom-service-head small{
  margin-top:3px;
  color:var(--muted);
  font-size:14px !important;
}
.custom-service-form{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  margin-top:10px;
}
.custom-service-form input,
.custom-service-form button{
  margin:0;
}
.custom-service-status{
  margin-top:8px;
  padding:8px 10px;
  border-radius:9px;
  background:#ffffff06;
  color:var(--muted);
  font-size:14px;
}
.custom-service-status.ok{
  border:1px solid #56d68b28;
  color:var(--ok);
}
.custom-service-status.bad{
  border:1px solid #ef6d6d28;
  color:var(--danger);
}
.custom-service-list{
  display:grid;
  gap:7px;
  margin-top:9px;
}
.custom-service-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  padding:10px;
  border:1px solid #ffffff0d;
  border-radius:10px;
  background:#11151c;
}
.custom-service-item strong,
.custom-service-item small,
.custom-service-item code,
.custom-service-item p{
  display:block;
}
.custom-service-item strong{font-size:16px !important}
.custom-service-item small{
  margin-top:2px;
  color:var(--muted);
  font-size:14px !important;
}
.custom-service-item code{
  margin-top:6px;
  padding:6px 7px;
  overflow-wrap:anywhere;
  border-radius:7px;
  background:#090c11;
  color:#dfe6ef;
  font-size:13px;
}
.custom-service-item p{
  margin:6px 0 0;
  color:var(--accent);
  font-size:14px;
  line-height:1.45;
}
.custom-service-note{
  margin-top:9px;
  color:var(--muted);
  font-size:14px;
  line-height:1.45;
}
.embedded-routing-success{
  padding:12px;
  border:1px solid #56d68b2a;
  border-radius:12px;
  background:#56d68b06;
}
.embedded-routing-success strong{
  display:block;
  font-size:16px !important;
}
.embedded-routing-success p{
  margin:5px 0 0;
}
.embedded-routing-summary{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:9px;
  padding:8px 9px;
  border-radius:8px;
  background:#0e1117;
}
.embedded-routing-summary span,
.embedded-routing-summary b{
  font-size:14px;
}
.compat-route-download{
  margin-top:10px;
  padding:10px;
  border:1px solid #ffffff0d;
  border-radius:10px;
  background:#0e1117;
}
.compat-route-download summary{
  cursor:pointer;
  font-weight:800;
}

@media(max-width:650px){
  .custom-service-form,
  .custom-service-item{
    grid-template-columns:1fr;
  }
  .custom-service-form button,
  .custom-service-item button{
    width:100%;
  }
}


/* Service Routing 3.1.1 — oversized SMART QR hotfix */
.smart-conf-primary-note{
  margin:10px 0 12px;
  padding:12px;
  border:1px solid #56d68b2a;
  border-radius:12px;
  background:#56d68b06;
}
.smart-conf-primary-note strong{display:block;font-size:16px !important}
.smart-conf-primary-note p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:14px !important;
  line-height:1.5;
}

/* ==========================================================
   Mobile Navigation 3.1.2
   Service Routing remains 3.1.1. Desktop/tablet unchanged.
   Mobile <=760: 4 primary actions + "More" overflow sheet.
   ========================================================== */
.mobile-more-toggle,.mobile-more-sheet{display:none}

@media(max-width:760px){
  .app-sidebar .section-nav .mobile-overflow-nav{display:none!important}
  .app-sidebar .section-nav{
    justify-content:stretch;
    gap:3px;
  }
  .app-sidebar .section-nav a.mobile-primary-nav,
  .mobile-more-toggle{
    min-width:0;
    width:auto;
    flex:1 1 20%;
    min-height:52px;
    margin:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    padding:6px 2px;
    border:1px solid transparent;
    border-radius:11px;
    background:transparent;
    color:#a9b1bf;
    font:inherit;
    font-size:8px;
    font-weight:800;
    line-height:1.1;
    text-align:center;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .mobile-more-toggle .nav-icon{width:19px;height:19px}
  .mobile-more-toggle .nav-icon svg{width:18px;height:18px;fill:currentColor}
  .mobile-more-toggle.active,
  .mobile-more-toggle[aria-expanded="true"]{
    color:var(--accent);
    background:linear-gradient(180deg,#f2b45c14,#f2b45c06);
    border-color:#f2b45c24;
  }
  .mobile-more-sheet{
    position:absolute;
    left:0;
    right:0;
    bottom:calc(100% + 8px);
    z-index:1001;
    padding:10px;
    border:1px solid #ffffff16;
    border-radius:16px;
    background:#10131afb;
    box-shadow:0 18px 48px #000b;
    backdrop-filter:blur(18px);
  }
  .mobile-more-sheet:not([hidden]){display:block}
  .mobile-more-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:1px 2px 8px;
  }
  .mobile-more-head strong{font-size:11px}
  .mobile-more-close{
    width:30px;height:30px;min-height:0;margin:0;padding:0;
    display:grid;place-items:center;
    border:1px solid #ffffff12;
    border-radius:9px;
    background:#ffffff06;
    color:var(--muted);
    font-size:18px;
    line-height:1;
  }
  .mobile-more-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
  }
  .mobile-more-grid a{
    min-width:0;
    min-height:52px;
    display:flex;
    align-items:center;
    gap:9px;
    padding:9px 10px;
    border:1px solid #ffffff0d;
    border-radius:11px;
    background:#0d1016;
    color:#a9b1bf;
    font-size:9px;
    font-weight:800;
  }
  .mobile-more-grid a.active{
    color:var(--accent);
    border-color:#f2b45c2b;
    background:linear-gradient(90deg,#f2b45c14,#f2b45c05);
  }
  .mobile-more-grid .nav-label{
    font-size:9px;
    text-align:left;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
  }
  body.mobile-more-open{overflow:hidden}
}

@media(max-width:370px){
  .app-sidebar .section-nav a.mobile-primary-nav,
  .mobile-more-toggle{padding-left:1px;padding-right:1px}
  .app-sidebar .section-nav a.mobile-primary-nav .nav-label,
  .mobile-more-toggle .nav-label{font-size:7.5px}
}