body > .topbar > .in { max-width:1400px; }
.workspace { display:grid; grid-template-columns:154px minmax(0,1fr); max-width:1400px; margin:auto; }
.workspace > .page { width:100%; max-width:none; min-width:0; margin:0; padding:16px 20px 60px; }
.head.page-header { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:var(--space-2) var(--space-4); min-height:var(--control-height); margin:0 0 var(--panel-gap); }
.page-header .page-header-copy { gap:var(--space-1); }
.page-header h1 { min-height:var(--control-height); }
.page-header .sub { margin:0; font-size:13px; line-height:1.5; color:var(--slate-500); overflow-wrap:anywhere; }
.page-header-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:var(--control-gap); }
.page-header-actions .btn { min-height:var(--control-height); margin:0; white-space:nowrap; }
@media (max-width:599px) {
  .head.page-header { grid-template-columns:minmax(0,1fr); }
  .page-header-actions { justify-content:flex-start; }
}
.context-nav { padding:16px 8px; border-right:1px solid var(--line); min-height:calc(100vh - 35px); background:#f9fafb; }
.context-nav .section-nav { display:flex; flex-direction:column; gap:3px; margin:0; padding:0; border:0; background:transparent; position:sticky; top:51px; }
.context-nav .section-nav a { display:flex; align-items:center; min-height:34px; padding:6px 10px; margin:0; border:0; border-radius:var(--panel-radius); font-size:13px; color:var(--slate-700); white-space:normal; }
.context-nav .section-nav a.on { background:var(--brand-50); color:var(--brand-600); box-shadow:inset 3px 0 var(--brand-600); font-weight:700; }
.context-nav .section-nav a:hover { background:var(--brand-50); text-decoration:none; }
.nav-status { margin-left:6px; color:var(--slate-500); font-size:11px; white-space:nowrap; }
.feature-pending { display:flex; align-items:center; gap:var(--space-3); padding:var(--panel-padding); }
.feature-pending p { margin:0; color:var(--slate-600); }
.opt[aria-disabled="true"] { color:var(--slate-600); background:var(--head); cursor:default; }
.nav-caption { padding:12px 10px 4px; color:var(--slate-500); font-size:11px; }
.nav-caption:first-child { padding-top:0; }
.toolbar,.access-toolbar { display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--control-gap); padding:var(--panel-padding); margin:0 0 var(--panel-gap); background:#fff; border:1px solid var(--line); border-radius:var(--panel-radius); }
.toolbar > label,.access-toolbar > label { display:flex; flex-direction:column; gap:var(--space-1); min-width:0; font-size:12px; color:var(--slate-600); }
.toolbar select { min-width:130px; }
.access-toolbar > input { flex:1 1 240px; max-width:480px; }
.access-toolbar > select { width:auto; max-width:100%; }
.local-switch { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-1); margin:0 0 var(--panel-gap); }
.local-switch a, .local-switch button { display:inline-flex; align-items:center; justify-content:center; min-height:var(--control-height); padding:0 12px; border:1px solid var(--line); border-radius:var(--panel-radius); background:#fff; color:var(--slate-700); font-size:13px; line-height:1.25; }
.local-switch .on { border-color:var(--brand-600); color:var(--brand-600); background:var(--brand-50); font-weight:600; }
.account-tools { display:flex; align-items:center; margin-left:auto; position:relative; }
.account-tools .me { margin-left:0; }
.account-divider { color:var(--brand-100); opacity:.5; margin:0 4px; }
.account-tools .operations-tools, .account-tools .notifications { position:static; }
.me.operations-tools .drop { width:210px; }
.notifications .drop { width:360px; max-width:calc(100vw - 21px); max-height:min(480px,70vh); overflow-y:auto; overflow-wrap:anywhere; }
.notification-empty { padding:16px 10px; color:var(--slate-500); font-size:13px; }
.keys-table td { overflow-wrap:anywhere; }
.keys-table td:last-child { min-width:160px; }
.access-details { scroll-margin-top:85px; }
.access-facts { display:grid; grid-template-columns:110px minmax(0,1fr); gap:var(--space-2) var(--space-4); padding:var(--panel-padding); margin:0; font-size:13px; }
.access-facts dt { color:var(--slate-500); }
.access-facts dd { margin:0; overflow-wrap:anywhere; }
.access-details .mono { overflow-wrap:anywhere; }
.callout .mono { overflow-wrap:anywhere; }
.users-table { min-width:780px; }
.users-table td { white-space:nowrap; }
.users-table th:first-child { min-width:80px; }
.users-table .selected-row td { background:var(--brand-50); }
#user-details, #vpn-owner { scroll-margin-top:85px; }
#user-details h2 { overflow-wrap:anywhere; }
#user-details h2 a { white-space:nowrap; }
#user-details .toolbar { padding:0; border:0; background:transparent; }
#key-editor .access-toolbar { padding:0; border:0; background:transparent; }
#key-editor .access-toolbar label { flex:1 1 240px; }
.legacy-links { display:flex; flex-wrap:wrap; gap:var(--control-gap); }
.user-key-table { table-layout:fixed; }
.user-key-table th:first-child { width:50%; }
.user-key-table th:nth-child(2) { width:20%; }
.user-key-table td { overflow-wrap:anywhere; }
.user-key-table td:nth-child(2) { white-space:nowrap; }
.key-fingerprint { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vpn-table { min-width:860px; }
.vpn-table td { white-space:nowrap; }
.service-accounts-table { table-layout:fixed; }
.service-accounts-table th:nth-child(2) { width:80px; }
.service-accounts-table td { overflow-wrap:anywhere; }
.service-accounts-table td:nth-child(2) { white-space:nowrap; }
.account-choice { flex-basis:100%; min-width:0; }
.account-choice label { display:block; margin-bottom:4px; }
.account-choice select { width:100%; min-width:0; max-width:100%; }
.account-choice p { margin:6px 0; }
.account-confirmation { overflow-wrap:anywhere; }
.keys-table { min-width:900px; }
.keys-table td { white-space:nowrap; }
.keys-table td:first-child { min-width:200px; white-space:normal; }
@media(max-width:600px) {
  .topbar .in { height:auto; flex-wrap:wrap; }
  .topbar .menu { order:3; flex-basis:100%; }
}
@media(max-width:1000px) { .cols { grid-template-columns:minmax(0,1fr); } }
@media(max-width:760px) {
  :root { --panel-padding:var(--space-3); }
  .workspace { display:block; }
  .context-nav { min-height:0; border-right:0; border-bottom:1px solid var(--line); padding:6px 10px; }
  .context-nav .section-nav { position:static; flex-direction:row; flex-wrap:wrap; gap:2px; }
  .context-nav .section-nav a { min-height:30px; padding:5px 8px; font-size:12px; }
  .context-nav .section-nav a.on { box-shadow:inset 0 -2px var(--brand-600); }
  .nav-caption { display:none; }
  .workspace > .page { padding:12px 10px 48px; }
  .cols.half { grid-template-columns:minmax(0,1fr); }
  .toolbar > label { flex:1 1 130px; }
  .toolbar select { width:100%; }
  .access-toolbar > input { flex-basis:100%; max-width:none; }
}

.vpn-table th, .vpn-table td { padding:10px 12px; vertical-align:middle; }
.vpn-table td:first-child { white-space:normal; min-width:130px; max-width:220px; overflow-wrap:anywhere; }
.vpn-actions { flex-direction:row; align-items:center; flex-wrap:wrap; gap:6px 12px; padding:0; min-width:310px; }
.vpn-actions > a, .vpn-actions > form button, .vpn-actions > details > summary { min-height:32px; display:inline-flex; align-items:center; margin:0; }
.vpn-actions > details { align-self:center; }
.vpn-actions > details[open] { flex-basis:100%; }
.vpn-actions > details > form { max-width:360px; white-space:normal; }

.vpn-table td:first-child { white-space:nowrap; max-width:none; }
.vpn-table th, .vpn-table td { padding:8px 12px; }
.vpn-actions { flex-wrap:nowrap; min-width:280px; gap:14px; }
.vpn-actions > a, .vpn-actions > form button, .vpn-actions > details > summary { padding:0; min-height:28px; border:0; background:none; box-shadow:none; color:var(--brand-600); font-size:12px; font-weight:400; line-height:20px; border-radius:0; }
.vpn-actions > form button:hover, .vpn-actions > a:hover, .vpn-actions > details > summary:hover { text-decoration:underline; background:none; }
.vpn-actions:has(details[open]) { flex-wrap:wrap; }

.vpn-table td .dim.small { display:inline; margin-left:8px; }
.vpn-table { min-width:1100px; }
.vpn-table.vpn-devices-table { min-width:900px; }
[data-period] > .field { margin-bottom:0; min-width:0; }
form:not(.form) > [data-period] { margin-bottom:var(--space-3); }
.vpn-install .body { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px 24px; padding:12px 16px; align-items:start; }
.vpn-install .check { margin:0; padding-left:20px; }
.vpn-install .check li { padding:0; line-height:1.65; }
.vpn-install .check li + li { margin-top:6px; }
.vpn-platforms { min-width:0; }
.vpn-platforms > details { border-bottom:1px solid var(--line); }
.vpn-platforms > details:last-child { border-bottom:0; }
.vpn-platforms > details > summary { padding:6px 0; min-height:32px; line-height:20px; }
.vpn-platforms > details > p { margin:2px 0 10px; line-height:1.65; overflow-wrap:anywhere; }
.vpn-install-notes { grid-column:1/-1; padding-top:10px; border-top:1px solid var(--line); }
.vpn-install-notes p { margin:0; }
.vpn-install-notes p + p { margin-top:4px; }
@media(max-width:760px) { .vpn-install .body { grid-template-columns:minmax(0,1fr); gap:12px; padding:12px; } }
@media(max-width:600px) { .vpn-actions > a, .vpn-actions > form button, .vpn-actions > details > summary { min-height:40px; } .vpn-platforms > details > summary { min-height:40px; padding:10px 0; } }

.management-tabs { display:flex; flex-wrap:wrap; gap:4px; margin:0 0 16px; padding:0 0 8px; border-bottom:1px solid var(--slate-200); }
.management-tabs a { padding:7px 12px; border-radius:var(--panel-radius); color:var(--slate-700); font-size:13px; white-space:nowrap; }
.management-tabs a.on { background:var(--brand-50); color:var(--brand-600); font-weight:700; }
.management-tabs a:hover { background:var(--brand-50); text-decoration:none; }

[data-period-date] input:disabled { background:#f2f4f7; color:#667085; border-color:#d0d5dd; cursor:not-allowed; opacity:1; }