.portal-main:has(.vpn-page),.portal-content:has(.vpn-page) { min-width:0; }
.vpn-page { max-width: 1560px; margin: 0 auto; min-width:0; }
.vpn-directory,.vpn-detail,.vpn-page label,.vpn-page fieldset { min-width:0; }
@media (max-width:760px) { .portal-shell:has(.vpn-page) { grid-template-columns:minmax(0,1fr); }.portal-shell:has(.vpn-page) .portal-sidebar { min-width:0; }.portal-shell:has(.vpn-page) .portal-sidebar nav a { white-space:nowrap; flex-shrink:0; } }
.vpn-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; margin:8px 0 28px; }
.vpn-heading h1 { font-size:32px; margin:8px 0; font-weight:650; }
.vpn-heading p,.vpn-page p { color:var(--muted); line-height:1.65; }
.vpn-heading p { margin:0; }
.vpn-actions { display:flex; gap:10px; flex-shrink:0; }
.vpn-health { display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:12px; background:var(--surface); padding:15px 18px; font-size:12px; flex-wrap:wrap; }
.vpn-health>span:not(.vpn-dot) { color:var(--muted); }
.vpn-health a { margin-left:auto; color:var(--primary-strong); }
.vpn-dot { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px #4fd6a015; }
.unhealthy .vpn-dot { background:var(--amber); }
.vpn-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:20px 0 26px; }
.vpn-stats article { background:linear-gradient(145deg,var(--surface-2),var(--surface)); border:1px solid var(--line-soft); border-radius:14px; padding:20px 22px; display:flex; flex-direction:column; gap:8px; }
.vpn-stats article>span { color:var(--muted); font-size:12px; font-weight:600; }
.vpn-stats strong { font-size:32px; font-weight:550; letter-spacing:-1px; }
.vpn-stats small { font-size:11px; color:var(--faint); }
.vpn-workspace { display:grid; grid-template-columns:310px minmax(0,1fr); gap:20px; align-items:start; }
.vpn-directory,.vpn-detail { border:1px solid var(--line); border-radius:16px; background:var(--surface); overflow:hidden; }
.vpn-directory-title { display:flex; align-items:center; justify-content:space-between; padding:22px 20px 0; }
.vpn-directory h2 { font-size:15px; margin:0; }.vpn-directory-title>span { color:var(--muted); font-size:12px; background:var(--surface-3); padding:3px 8px; border-radius:5px; }
.vpn-page label { display:flex; flex-direction:column; gap:8px; font-size:12px; font-weight:600; color:var(--text); }
.vpn-page input:not([type=checkbox]),.vpn-page select { width:100%; background:var(--bg-elevated); border:1px solid var(--line); border-radius:8px; color:var(--text); padding:11px 12px; min-height:42px; outline:none; }
.vpn-page input:focus,.vpn-page select:focus { border-color:var(--primary); box-shadow:var(--ring); }
.vpn-page input[readonly] { color:var(--muted); }
.vpn-page input[type=checkbox] { width:19px; height:19px; accent-color:var(--primary); cursor:pointer; }
.vpn-page label small { color:var(--muted); font-size:11px; font-weight:400; line-height:1.6; }
.vpn-directory>.vpn-search { margin:18px 16px; }
.vpn-computer-list { max-height:540px; overflow-y:auto; padding:0 10px 10px; }
.vpn-computer { width:100%; display:flex; align-items:center; gap:12px; padding:16px 12px; text-align:left; border:1px solid transparent; border-radius:10px; background:transparent; color:var(--text); cursor:pointer; margin-bottom:5px; }
.vpn-computer:hover { background:var(--surface-2); }.vpn-computer.selected { border-color:#286189; background:linear-gradient(110deg,#10304a,var(--surface-2)); }
.vpn-pc-icon { display:grid; place-items:center; width:34px; height:36px; flex-shrink:0; border:1px solid var(--line); border-radius:9px; color:var(--primary-strong); background:var(--surface); font-size:22px; }
.vpn-computer-body { display:flex; flex-direction:column; gap:6px; flex:1; min-width:0; }.vpn-computer-body strong { font-size:13px; overflow-wrap:anywhere; }.vpn-computer-body small { color:var(--muted); font-size:10px; overflow-wrap:anywhere; }
.vpn-tag { display:inline-flex; align-items:center; width:fit-content; padding:4px 8px; border-radius:5px; font-size:10px; font-weight:600; white-space:nowrap; background:#16304b; color:var(--primary-strong); }
.vpn-tag.online { color:var(--green); background:var(--green-dark); }.vpn-tag.muted { color:var(--muted); background:var(--surface-3); }.vpn-tag.warning { color:var(--amber); background:var(--amber-dark); }
.vpn-directory-note { padding:20px; border-top:1px solid var(--line-soft); background:var(--bg-elevated); }.vpn-directory-note strong { font-size:12px; }.vpn-directory-note p { font-size:11px; margin:7px 0 0; }
.vpn-list-empty { padding:28px 16px; color:var(--muted); font-size:12px; line-height:1.7; text-align:center; }
.vpn-detail-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:26px 28px 20px; }.vpn-detail-heading h2 { font-size:23px; margin:7px 0; overflow-wrap:anywhere; }.vpn-detail-heading p { margin:0; font-size:12px; }
.vpn-tabs { display:flex; padding:0 28px; border-bottom:1px solid var(--line); gap:24px; overflow-x:auto; }.vpn-tabs button { background:none; color:var(--muted); border:0; border-bottom:2px solid transparent; padding:14px 0; font-size:12px; cursor:pointer; white-space:nowrap; }.vpn-tabs button.active { color:var(--primary-strong); border-bottom-color:var(--primary); }.vpn-tabs button:disabled { opacity:.4; cursor:not-allowed; }
.vpn-editor { border:0; padding:26px 28px; margin:0; min-width:0; }.vpn-editor:disabled { opacity:.65; }
.vpn-section-title { display:flex; gap:12px; margin:0 0 20px; align-items:center; }.vpn-section-title>span { color:var(--primary-strong); font-size:11px; font-weight:700; padding:9px; border:1px solid var(--line); border-radius:8px; }.vpn-section-title h3 { margin:0; font-size:15px; }.vpn-section-title p { margin:4px 0 0; font-size:11px; }
.vpn-fields { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:20px; }.vpn-expiry { margin-top:20px; padding-bottom:25px; border-bottom:1px solid var(--line-soft); }
.vpn-mono,.vpn-page pre,.vpn-page code { font-family:Consolas,monospace; font-size:12px; }
.vpn-grants { overflow:auto; max-height:390px; border:1px solid var(--line); border-radius:10px; margin-top:14px; }.vpn-grants table { width:100%; border-collapse:collapse; }.vpn-grants th { position:sticky; top:0; background:var(--surface-2); color:var(--text); font-size:11px; padding:13px 16px; text-align:left; }.vpn-grants th small { display:block; font-weight:400; color:var(--muted); font-size:10px; padding-top:4px; }.vpn-grants th:not(:first-child),.vpn-grants td:not(:first-child) { text-align:center; width:110px; }.vpn-grants td { padding:14px 16px; border-top:1px solid var(--line-soft); }.vpn-grants td strong { display:block; font-size:12px; }.vpn-grants td span,.vpn-grants td small { display:block; color:var(--muted); font-size:11px; padding-top:3px; }.vpn-grants td small { color:var(--faint); font-size:10px; }
.vpn-summary { display:flex; justify-content:space-between; gap:10px; margin-top:14px; font-size:11px; }.vpn-summary>span { color:var(--muted); }
.vpn-note { font-size:11px; color:var(--muted); line-height:1.7; padding:14px 16px; border-left:2px solid var(--line); background:var(--bg-elevated); margin:20px 0 0; }
.vpn-savebar { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:20px 28px; border-top:1px solid var(--line); background:var(--surface-2); }.vpn-savebar>span { font-size:12px; }.vpn-savebar small { display:block; color:var(--muted); font-size:10px; margin-top:5px; }
.vpn-revoke { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 28px; border-top:1px solid var(--line-soft); font-size:11px; }.vpn-revoke>span { color:var(--muted); }.vpn-revoke p { margin:4px 0; }.vpn-revoke .button { flex-shrink:0; }
.vpn-welcome { padding:65px 32px; text-align:center; display:flex; flex-direction:column; align-items:center; min-height:420px; justify-content:center; }.vpn-welcome h2 { font-size:25px; margin:14px 0 0; }.vpn-welcome p { font-size:13px; max-width:420px; margin:14px auto 25px; }.vpn-welcome>a { color:var(--primary-strong); margin-top:20px; font-size:12px; }.vpn-emblem { background:radial-gradient(circle,#184f71,#0d2135); border:1px solid #285773; border-radius:22px; width:76px; height:76px; display:grid; place-items:center; color:var(--primary-strong); font-size:46px; margin-bottom:26px; box-shadow:0 0 60px #38a9e414; }.vpn-steps { display:flex; gap:24px; margin-top:46px; color:var(--muted); font-size:11px; }.vpn-steps b { display:block; color:var(--primary-strong); margin-bottom:8px; }
.vpn-setup,.vpn-history { padding:28px; }.vpn-setup h3,.vpn-history h3 { font-size:17px; margin:0; }.vpn-setup p,.vpn-history>p { font-size:12px; }.vpn-instruction { display:flex; align-items:start; gap:16px; margin-top:26px; }.vpn-instruction>b { border:1px solid var(--line); border-radius:50%; width:28px; height:28px; display:grid; place-items:center; flex-shrink:0; color:var(--primary-strong); font-size:12px; }.vpn-instruction>div { min-width:0; flex:1; }.vpn-instruction h4 { margin:4px 0; font-size:13px; }.vpn-page pre { white-space:pre-wrap; overflow-wrap:anywhere; background:var(--bg); padding:18px; border:1px solid var(--line); border-radius:9px; line-height:1.8; color:#b1d9f4; }.vpn-setup>.vpn-note { margin-bottom:28px; }.vpn-target { display:flex; gap:10px; flex-wrap:wrap; padding:16px 0; border-bottom:1px solid var(--line-soft); font-size:12px; }.vpn-target>span { width:100%; color:var(--muted); }.vpn-target code { margin-left:auto; color:var(--primary-strong); }
.vpn-history article { display:flex; align-items:start; gap:14px; padding:22px 0; border-bottom:1px solid var(--line-soft); }.vpn-history article strong { font-size:12px; }.vpn-history article p { margin:6px 0 0; font-size:11px; }.vpn-history time { margin-left:auto; color:var(--muted); font-size:10px; }.vpn-timeline-dot { width:8px; height:8px; border:2px solid var(--primary); border-radius:50%; margin-top:4px; }
.vpn-page .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:1250px) { .vpn-workspace { grid-template-columns:260px minmax(0,1fr); }.vpn-stats { gap:10px; }.vpn-stats article { padding:16px; }.vpn-summary { flex-direction:column; } }
@media (max-width:1050px) { .vpn-workspace { grid-template-columns:1fr; }.vpn-computer-list { max-height:230px; }.vpn-directory-note { display:none; }.vpn-heading { align-items:start; flex-direction:column; }.vpn-stats { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px) { .vpn-fields { grid-template-columns:1fr; }.vpn-editor,.vpn-setup,.vpn-history { padding:20px 16px; }.vpn-detail-heading { padding:20px 16px; flex-wrap:wrap; }.vpn-tabs { padding:0 16px; gap:18px; }.vpn-savebar,.vpn-revoke { padding:18px 16px; flex-wrap:wrap; }.vpn-health a { margin-left:0; width:100%; }.vpn-stats small { line-height:1.5; }.vpn-steps { gap:12px; }.vpn-welcome { padding:40px 20px; }.vpn-history article { flex-wrap:wrap; }.vpn-heading h1 { font-size:28px; } }