/* ══════════════════════════════════════════════════════════════
   PlanckVPN Account — design system
   Layout & component metrics follow the Proton account app
   (open-source WebClients); colors are PlanckVPN brand tokens.
   Base UI text: 14px / 1.4286 Inter. Radii: 4/8/12/16/24.
═══════════════════════════════════════════════════════════════ */
:root {
  /* Brand palette — planckvpn.com "g99" design system (2026-07 marketing
     relift): warm near-black neutrals, hairline white-alpha borders,
     orange accent, lime for live state. --spectrum mirrors the marketing
     site's progress-rail gradient (violet → pink → orange). */
  --bg-shell:    #0C0B0B;                 /* sidebar + header + page frame   */
  --bg-content:  #121111;                 /* main content pane               */
  --bg-elevated: #1B1B1B;                 /* dropdowns, menus (opaque)       */
  --bg-lowered:  #0A0909;                 /* auth page backdrop base         */

  --spectrum: linear-gradient(90deg, #9D8BFF 0%, #F899F2 34%, #FF9AF1 70%, #FF9C5E 100%);

  --accent:        #F66A34;
  --accent-hover:  #F47920;               /* dark theme: hovers go brighter  */
  --accent-active: #E85F2B;
  --accent-bright: #F49565;               /* accents/links on dark           */
  --accent-dim:    rgba(246,106,52,.13);
  --accent-border: rgba(246,106,52,.30);

  --text-1:      #FFFFFF;
  --text-2:      #A8A8A8;
  --text-3:      rgba(255,255,255,.50);
  --text-4:      rgba(255,255,255,.30);

  --border-weak: rgba(255,255,255,.08);   /* hairline dividers               */
  --border-norm: rgba(255,255,255,.14);   /* visible outlines                */
  --border-3:    rgba(255,255,255,.28);   /* legacy alias — still referenced
                                             by inline styles in register.php */
  --field-border:       rgba(255,255,255,.18);  /* inputs read stronger than cards */
  --field-border-hover: rgba(255,255,255,.34);

  --red:         #f87171;
  --green:       #10b981;
  --lime:        #B1EF4A;                 /* live/protected state            */
  --amber:       #f59e0b;

  --hover-wash:  rgba(255,255,255,.06);   /* ghost/nav hover                 */
  --active-wash: rgba(255,255,255,.11);

  --card-bg:     rgba(255,255,255,.03);   /* glass cards over the pane       */
  --card-border: rgba(255,255,255,.07);
  --card-inset:  inset 0 0 0 1px rgba(255,255,255,.04);

  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;

  --radius-sm:   4px;
  --radius:      8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-xxl:  24px;

  --focus-ring:  0 0 0 3px rgba(246,106,52,.28);
  --shadow-norm:   0 1px 4px rgba(0,0,0,.5);
  --shadow-lifted: 0 8px 24px rgba(0,0,0,.55);

  --ease-quint:  cubic-bezier(.22, 1, .36, 1);
  --sidebar-w:   280px;
  --header-h:    60px;
}

/* ── Reset & base ────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { height: 100%; font-size: 100%; }

body {
  min-height: 100%;
  background: var(--bg-shell);
  color: var(--text-1);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.4286;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
button { cursor: pointer; border: none; background: none; color: inherit; }
h1, h2, h3, h4 { font-weight: 700; }
::selection { background: var(--accent); color: #fff; }

:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

/* Thin custom scrollbars, Proton-style */
* { scrollbar-width: thin; scrollbar-color: var(--border-norm) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--border-norm);
  border: 2px solid transparent;
  border-radius: 5px;
  background-clip: padding-box;
}
*::-webkit-scrollbar-track { background: transparent; }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 9999px;                   /* g99: buttons are pills */
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  padding: 7px 17px;                       /* 36px total height */
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: .15s var(--ease-quint), background-position 0s;
}
.btn-lg    { font-size: 16px; line-height: 24px; padding: 9px 21px; }   /* 44px */
.btn-sm    { padding: 3px 13px; }                                       /* 28px */
.btn-block { width: 100%; }

/* g99 primary: white pill, black text */
.btn-solid {
  background: #fff;
  color: #000;
}
.btn-solid:hover  { background: rgba(255,255,255,.82); }
.btn-solid:active { background: rgba(255,255,255,.72); }

.btn-outline { border-color: var(--field-border); color: var(--text-1); background: transparent; }
.btn-outline:hover  { border-color: var(--field-border-hover); background: var(--hover-wash); }
.btn-outline:active { background: var(--active-wash); }

.btn-ghost { color: var(--text-2); background: transparent; }
.btn-ghost:hover  { color: var(--text-1); background: var(--hover-wash); }
.btn-ghost:active { background: var(--active-wash); }

.btn-weak { background: #171615; border-color: rgba(255,255,255,.10); color: var(--text-1); }
.btn-weak:hover  { background: #1D1B1A; }
.btn-weak:active { background: #232223; }

.btn-danger-line { border-color: var(--border-norm); color: var(--text-2); background: transparent; }
.btn-danger-line:hover {
  border-color: rgba(248,113,113,.4);
  color: var(--red);
  background: rgba(248,113,113,.06);
}

.btn:disabled, .btn[disabled] {
  pointer-events: none;
  opacity: .5;
}

/* Promotion button — upgrade pill with the brand rail-gradient border */
.btn-promo {
  position: relative;
  border: 1px solid transparent;
  border-radius: 9999px;
  background:
    linear-gradient(var(--bg-shell), var(--bg-shell)) padding-box,
    var(--spectrum) border-box;
  color: var(--text-1);
}
.btn-promo:hover {
  background:
    linear-gradient(#161514, #161514) padding-box,
    var(--spectrum) border-box;
}
.btn-promo svg { color: var(--accent-bright); }

/* ── Form fields (shared with auth pages) ────────────────────── */
.fg { display: flex; flex-direction: column; }
.fg-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fg-row .text-link { font-size: 12px; }

label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 4px;
}
label .req { color: var(--accent-bright); margin-left: 2px; }

input[type="text"],
input[type="email"],
input[type="password"] {
  width: 100%;
  background: transparent;
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  color: var(--text-1);
  font-size: 14px;
  line-height: 20px;
  padding: 11px 12px;                      /* 44px — Proton "bigger" fields */
  outline: none;
  transition: border-color .15s var(--ease-quint), box-shadow .15s var(--ease-quint);
  -webkit-appearance: none;
  appearance: none;
}
input::placeholder { color: var(--text-3); }
input:hover:not(:focus) { border-color: var(--field-border-hover); }
input:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
input:-webkit-autofill {
  -webkit-text-fill-color: var(--text-1);
  -webkit-box-shadow: 0 0 0 100px var(--bg-content) inset;
  caret-color: var(--text-1);
}
@media (max-width: 680px) {
  input[type="text"], input[type="email"], input[type="password"] {
    font-size: 16px;                       /* iOS zoom guard */
    padding: 9px 12px;
  }
}

.hint {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 4px;
  min-height: 17px;                        /* reserve the assistive line */
}

.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 44px; }
.pw-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  transition: color .15s, background .15s;
}
.pw-toggle:hover { color: var(--text-1); background: var(--hover-wash); }

.text-link { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; transition: color .15s; }
.text-link:hover { color: var(--accent-bright); }

/* Checkbox — 20px box, 4px radius */
.cb {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-1);
  position: relative;
  margin-bottom: 0;
}
.cb input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.cb .box {
  width: 20px; height: 20px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--field-border);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0;
  transition: border-color .15s, background .15s;
}
.cb:hover .box { border-color: var(--accent); }
.cb .box svg { opacity: 0; transform: scale(0); color: #fff; transition: .15s cubic-bezier(.34,1.56,.64,1) .05s; }
.cb input:checked + .box { background: var(--accent); border-color: var(--accent); }
.cb input:checked + .box svg { opacity: 1; transform: scale(1); }
.cb input:focus-visible + .box { box-shadow: var(--focus-ring); border-color: var(--accent); }

/* ── Badges & status pills ───────────────────────────────────── */
/* g99 chips: mono uppercase, hairline border, quiet fill */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-transform: uppercase;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .1px;
  line-height: 20px;
  padding: 0 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.badge-primary { color: var(--accent-bright); background: var(--accent-dim);      border: 1px solid var(--accent-border); }
.badge-success { color: var(--lime);  background: rgba(177,239,74,.08); border: 1px solid rgba(177,239,74,.26); }
.badge-danger  { color: var(--red);   background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.28); }
.badge-neutral { color: var(--text-2); background: var(--hover-wash);   border: 1px solid var(--border-norm); }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pv-pulse-dot 2s cubic-bezier(0,0,.2,1) infinite; }
@keyframes pv-pulse-dot {
  0%   { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  70%  { box-shadow: 0 0 0 5px transparent; opacity: .85; }
  100% { box-shadow: 0 0 0 0 transparent; opacity: 1; }
}

/* ── Inline banners (success / error) ────────────────────────── */
.form-error, .form-success {
  display: none;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 14px;
}
.form-error {
  background: rgba(248,113,113,.08);
  border: 1px solid rgba(248,113,113,.25);
  color: var(--red);
}
.form-success {
  background: rgba(16,185,129,.08);
  border: 1px solid rgba(16,185,129,.25);
  color: var(--green);
}
.form-error.is-visible, .form-success.is-visible { display: flex; }
.form-error svg, .form-success svg { flex-shrink: 0; margin-top: 3px; }

@keyframes spin { to { transform: rotate(360deg); } }
.spinner { width: 14px; height: 14px; animation: spin .7s linear infinite; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════
   AUTH PAGES — Proton sign-in anatomy
═══════════════════════════════════════════════════════════════ */
body.auth {
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(90% 60% at 50% -8%, rgba(157,139,255,.20) 10%, rgba(32,28,26,.5) 45%, transparent 78%),
    radial-gradient(44% 38% at 0% 0%,   rgba(248,153,242,.08), transparent 70%),
    radial-gradient(56% 48% at 102% 106%, rgba(255,156,94,.09), transparent 74%),
    linear-gradient(180deg, #171413 0%, var(--bg-lowered) 60%);
}

.auth-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
}
.auth-head .site-logo { display: flex; align-items: center; gap: 10px; }
.auth-head .site-logo img { height: 26px; width: auto; }
.account-badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-bright);
  border: 1px solid var(--accent-border);
  background: var(--accent-dim);
  border-radius: 9999em;
  padding: 2px 8px;
}
.header-back {
  font-size: 14px;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .15s;
}
.header-back:hover { color: var(--text-1); }

body.auth main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 16px 32px;
}

.auth-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
  background: var(--bg-content);
  border: 1px solid var(--border-weak);
  border-radius: var(--radius-xxl);
  box-shadow: var(--shadow-lifted), inset 0 1px 0 rgba(255,255,255,.04);
  padding: 44px;
  overflow: hidden;
}
/* Signature: the iOS app's ring gradient as a hairline crowning the card */
.auth-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--spectrum);
  opacity: .9;
}

.auth-intro { margin-bottom: 24px; }
.auth-intro h1 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.2;
  font-weight: 300;
  letter-spacing: -.02em;
}
.auth-intro p { margin-top: 8px; color: var(--text-2); font-size: 14px; }

.form-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.form-body .form-error, .form-body .form-success { margin-bottom: 6px; }
.form-body .cb { margin-block: 6px 2px; }

.btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 9999px;
  font-size: 16px;
  line-height: 24px;
  padding: 9px 19px;                       /* 44px */
  background: #fff;
  color: #000;
  margin-top: 14px;
  transition: background .15s var(--ease-quint);
}
.btn-submit:hover  { background: rgba(255,255,255,.82); }
.btn-submit:active { background: rgba(255,255,255,.72); }
.btn-submit:disabled { opacity: .55; cursor: not-allowed; }

.auth-alt {
  text-align: center;
  font-size: 14px;
  color: var(--text-2);
  margin-top: 16px;
}
.auth-alt a { color: var(--accent-bright); font-weight: 600; margin-left: 4px; }
.auth-alt a:hover { text-decoration: underline; text-underline-offset: 2px; }

.auth-sep {
  border: none;
  height: 1px;
  background: var(--border-weak);
  margin: 16px 0;
}
.auth-trouble { text-align: center; }
.auth-trouble a {
  font-size: 14px;
  color: var(--text-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.auth-trouble a:hover { color: var(--text-1); }

.auth-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-top: 32px;
  color: var(--text-3);
}
.auth-logos svg { width: 22px; height: 22px; }

.auth-foot {
  text-align: center;
  padding: 16px;
  font-size: 12px;
  color: var(--text-3);
}
.auth-foot a { text-decoration: underline; text-underline-offset: 2px; }
.auth-foot a:hover { color: var(--text-2); }
.auth-foot .pipe { margin: 0 8px; color: var(--text-4); }
.auth-foot .foot-links { margin-top: 8px; }

@media (min-width: 680px) {
  .auth-head { padding: 20px 24px 40px; }
  body.auth main { padding-top: 16px; }
}
@media (min-width: 1100px) {
  .auth-head { padding-inline: 48px; }
}
@media (max-width: 680px) {
  .auth-card { padding: 28px 20px; }
  .auth-intro h1 { font-size: 24px; }
}
@media (max-width: 450px) {
  body.auth { background: var(--bg-lowered); }
  .auth-card { border: none; box-shadow: none; background: transparent; padding: 16px 4px; border-radius: 0; overflow: visible; }
  .auth-card::before { display: none; } /* card is transparent here — no edge to crown */
  /* card is transparent here — match autofill fill to the page backdrop */
  input:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px var(--bg-lowered) inset; }
}

/* ══════════════════════════════════════════════════════════════
   APP SHELL — dark frame, 280px sidebar, 60px topbar,
   content pane raised with a rounded top-left corner
═══════════════════════════════════════════════════════════════ */
body.app { height: 100%; overflow: hidden; }

.shell {
  display: flex;
  height: 100%;
  background: var(--bg-shell);
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.side-logo {
  height: var(--header-h);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  padding-inline: 16px;
}
.side-logo a { display: flex; align-items: center; gap: 10px; border-radius: var(--radius); }
.side-logo img { height: 26px; width: auto; }

.side-nav {
  flex: 1;
  overflow-y: auto;
  margin-top: 8px;
  padding-bottom: 8px;
}
.nav-list { list-style: none; padding-top: 3px; }
.nav-list:last-child { padding-bottom: 20px; }
.nav-list + .nav-list { margin-top: 16px; padding-top: 0; }

.nav-heading {
  display: flex;
  align-items: center;
  height: 36px;
  padding-inline: 23px 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .1px;
  color: var(--text-3);
}
.nav-heading h3 { font-size: inherit; font-weight: inherit; }

.nav-item { padding-inline: 12px; margin-bottom: 2px; }
.nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding-inline: 12px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  width: 100%;
  color: var(--text-2);
  font-size: 14px;
  transition: .15s var(--ease-quint);
}
.nav-link svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-3); transition: color .15s; }
.nav-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-link:hover { background: var(--hover-wash); color: var(--text-1); }
.nav-link:hover svg { color: var(--text-2); }
.nav-link:active { background: var(--active-wash); }
.nav-link[aria-current="page"] {
  background: var(--accent-dim);
  color: var(--text-1);
  font-weight: 500;
}
.nav-link[aria-current="page"] svg { color: var(--accent-bright); }

.side-foot {
  flex-shrink: 0;
  border-top: 1px solid var(--border-weak);
  text-align: center;
  padding: 8px 12px;
  font-size: 10px;
  color: var(--text-3);
}

/* ── Main column ─────────────────────────────────────────────── */
.main-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.topbar {
  height: var(--header-h);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 12px 10px 12px 8px;
  gap: 8px;
}
.topbar-action { flex: 1; display: flex; align-items: center; min-width: 0; }
.topbar-logo { display: none; }

.topnav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  list-style: none;
}

/* Hamburger (mobile only) */
.nav-toggle {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.hamburger {
  display: none;
  margin-bottom: 0;
  font-weight: 400;
  width: 36px; height: 36px;
  border-radius: var(--radius);
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.hamburger:hover { background: var(--hover-wash); color: var(--text-1); }
.nav-backdrop { display: none; }

/* User dropdown (native <details>, no JS required) */
.acct { position: relative; }
.acct > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .15s;
}
.acct > summary::-webkit-details-marker { display: none; }
.acct > summary::marker { content: ""; }
.acct > summary:hover, .acct[open] > summary { background: var(--hover-wash); }

.user-text {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  max-width: 200px;
  line-height: 1.3;
}
.user-text .nm { font-size: 12px; color: var(--text-1); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-text .em { font-size: 12px; color: var(--text-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.avatar {
  min-width: 32px;
  min-height: 32px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: #232223;
  flex-shrink: 0;
  user-select: none;
}

.acct-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 276px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-norm);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lifted);
  max-height: calc(100vh - 76px);
  max-height: calc(100dvh - 76px);
  overflow: hidden auto;
  z-index: 900;
  transform-origin: top right;
  animation: menu-pop .15s cubic-bezier(.33,1,.68,1) both;
}
@keyframes menu-pop {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: none; }
}
.acct-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px;
  gap: 4px;
}
.acct-tile {
  width: 54px; height: 54px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--accent-border);
  background: var(--accent-dim);
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 600;
  color: var(--accent-bright);
  margin-bottom: 4px;
}
.acct-head .nm { font-size: 14px; color: var(--text-1); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-head .em { font-size: 12px; color: var(--text-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-head .badge { margin-top: 6px; }
.acct-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 16px 12px;
}
.acct-foot {
  text-align: center;
  padding: 4px 16px 16px;
  font-size: 12px;
  color: var(--text-3);
}
.acct-foot a { text-decoration: underline; text-underline-offset: 2px; }
.acct-foot a:hover { color: var(--text-2); }
.acct-foot .pipe { margin: 0 6px; color: var(--text-4); }

/* ── Content pane — raised, rounded top-left ─────────────────── */
.main-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background:
    radial-gradient(70% 420px at 68% 0%, rgba(157,139,255,.09), transparent 70%),
    radial-gradient(42% 320px at 6% 0%,  rgba(255,156,94,.05), transparent 70%),
    var(--bg-content);
  border-top: 1px solid var(--border-weak);
  border-left: 1px solid var(--border-weak);
  border-top-left-radius: var(--radius-lg);
}
/* Signature: the app's ring gradient pinned as a hairline across the pane top */
.main-area::before {
  content: "";
  display: block;
  position: sticky;
  top: 0;
  height: 2px;
  margin-bottom: -2px;
  background: var(--spectrum);
  opacity: .8;
  z-index: 10;
}

/* ══════════════════════════════════════════════════════════════
   PAGE CONTAINERS
═══════════════════════════════════════════════════════════════ */
/* Settings-style page (title + 80px-rhythm sections) */
.page {
  width: 100%;
  max-width: 840px;
  margin-inline: auto;
  padding-inline: 28px;
  padding-bottom: 96px;
}
.page-title {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1.15;
  font-weight: 300;
  letter-spacing: -.02em;
  margin: 56px 0;
}
.page-title.has-desc { margin-bottom: 20px; }
.page-desc { color: var(--text-2); max-width: 602px; margin-bottom: 24px; }

/* Dashboard (card variant) */
.dash {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding: 32px 28px 96px;
}

.dash-sec { margin-bottom: 40px; scroll-margin-top: 24px; }
.dash-cols > .dash-sec { margin-bottom: 0; }
.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.sec-head h2 {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: -.01em;
}
.sec-head .sub { color: var(--text-2); font-size: 14px; margin-top: 2px; }
.sec-head .aside { color: var(--text-2); font-size: 14px; white-space: nowrap; }

.dash-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

/* Card — g99 glass: near-transparent fill, hairline border, inset ring */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--card-inset);
  padding: 24px;
  overflow: hidden;
  scroll-margin-top: 24px;
}
.card + .card { margin-top: 16px; }
.card-divider { border: none; height: 1px; background: var(--border-weak); margin: 20px -24px; }

/* ── VPN connection-status strip (topbar / auth header) ──────── */
.vpn-strip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 14px;
  padding: 5px 12px;
  border-radius: 99px;
  border: 1px solid var(--border-weak);
  background: var(--bg-content);
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
  min-width: 0;
}
.vpn-strip b { color: var(--text-1); font-weight: 600; }
.vpn-strip .sep { color: var(--text-4); }
.vpn-strip .vdot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.vpn-strip.is-off .vdot { background: var(--red);  box-shadow: 0 0 6px rgba(248,113,113,.7); }
.vpn-strip.is-on  .vdot { background: var(--lime); box-shadow: 0 0 5px rgba(177,239,74,.55); animation: pv-pulse-dot 2s cubic-bezier(0,0,.2,1) infinite; }
.vpn-strip.is-off .st { color: var(--red);  font-weight: 600; }
.vpn-strip.is-on  .st { color: var(--lime); font-weight: 600; }
.vpn-strip .vpn-cta {
  margin-left: 4px;
  color: var(--accent-bright);
  font-weight: 600;
  text-decoration: none;
}
.vpn-strip .vpn-cta:hover { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 960px) { .vpn-strip .vpn-isp, .vpn-strip .vpn-isp + .sep { display: none; } }
@media (max-width: 720px) { .vpn-strip { display: none; } }

/* ── Overview link-cards (dashboard) ─────────────────────────── */
.ov-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 880px) { .ov-grid { grid-template-columns: 1fr; } }
.ov-grid .card + .card { margin-top: 0; }  /* grid gap handles spacing */
.ov-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  transition: border-color .15s var(--ease-quint), transform .15s var(--ease-quint);
}
.ov-card:hover { border-color: var(--border-norm); transform: translateY(-2px); }
.ov-card .k {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .1px;
  text-transform: uppercase;
  color: var(--text-3);
}
.ov-card .v { font-size: 20px; font-weight: 600; color: var(--text-1); display: flex; align-items: center; gap: 8px; min-height: 28px; }
.ov-card .m { font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-card .lnk { margin-top: 8px; font-size: 13px; font-weight: 500; color: var(--accent-bright); }

/* ── Plan card internals ─────────────────────────────────────── */
.plan-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px 48px;
}
.plan-id { min-width: 0; flex: 1 1 260px; }
.plan-name-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plan-name-line .nm { font-size: 18px; font-weight: 600; }
.plan-meta { color: var(--text-2); font-size: 14px; margin-top: 4px; }
.plan-meta b { color: var(--text-1); font-weight: 600; font-variant-numeric: tabular-nums; }
.plan-cta { display: flex; gap: 8px; flex-wrap: wrap; }

.plan-stats {
  display: flex;
  gap: 16px 40px;
  flex-wrap: wrap;
}
.stat .k { font-size: 12px; color: var(--text-2); margin-bottom: 2px; }
.stat .v { font-size: 14px; font-weight: 600; color: var(--text-1); font-variant-numeric: tabular-nums; }

.meter { margin-top: 20px; max-width: 420px; }
.meter-track { height: 6px; border-radius: 9999em; background: var(--hover-wash); overflow: hidden; }
.meter-fill  { height: 100%; border-radius: 9999em; background: var(--accent); width: var(--pct, 0%); }
.meter-cap {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-3);
}

/* ── List rows (devices, payments, key/value) ────────────────── */
.row-list { display: flex; flex-direction: column; }
.li-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-weak);
}
.li-row:first-child { padding-top: 0; }
.li-row:last-child { border-bottom: none; padding-bottom: 0; }

.li-ic {
  width: 36px; height: 36px;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  background: var(--hover-wash);
  border: 1px solid var(--border-weak);
  color: var(--text-1);
  flex-shrink: 0;
}
.li-body { flex: 1; min-width: 0; }
.li-title { font-size: 14px; font-weight: 500; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.li-meta  { font-size: 12.5px; color: var(--text-2); margin-top: 2px; }
/* ── Breach cards (Personal Security) ────────────────────────── */
.breach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 12px;
  align-items: start;
}
.breach-card {
  border: 1px solid var(--border-norm);
  border-radius: var(--radius);
  background: var(--hover-wash);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-width: 0;
}
.breach-card.is-danger { border-color: rgba(248,113,113,.32); }

.bc-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bc-ic {
  width: 34px; height: 34px;
  flex-shrink: 0;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  background: var(--card-bg, rgba(255,255,255,.04));
  border: 1px solid var(--border-weak);
  color: var(--text-2);
}
.breach-card.is-danger .bc-ic { color: var(--red); border-color: rgba(248,113,113,.28); background: rgba(248,113,113,.08); }
.bc-id { min-width: 0; }
.bc-site {
  font-size: 14px; font-weight: 600; color: var(--text-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bc-kind { font-size: 12px; color: var(--text-2); margin-top: 2px; }

.bc-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.bc-chip {
  font-size: 11px; font-weight: 500;
  color: var(--text-2);
  border: 1px solid var(--border-norm);
  border-radius: 999px;
  padding: 2px 8px;
  background: transparent;
}
.bc-chip.is-danger { color: var(--red); border-color: rgba(248,113,113,.32); background: rgba(248,113,113,.08); }

.bc-rows {
  border-top: 1px solid var(--border-weak);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: auto;
}
.bc-kv { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bc-kv .k { font-size: 12px; color: var(--text-3); flex-shrink: 0; width: 76px; }
.bc-kv .v {
  font-size: 12.5px; color: var(--text-1);
  display: flex; align-items: center; gap: 6px;
  min-width: 0; overflow-wrap: anywhere;
}
.bc-secret {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--text-1);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border-norm);
  border-radius: 5px;
  padding: 2px 7px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: filter .18s ease;
}
.bc-secret.is-blurred { filter: blur(4.5px); user-select: none; }
@media (prefers-reduced-motion: reduce) { .bc-secret { transition: none; } }

.bc-eye {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  flex-shrink: 0;
  border: 1px solid var(--border-norm);
  border-radius: 6px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}
.bc-eye:hover { color: var(--text-1); background: var(--hover-wash); }
.bc-eye:focus-visible { box-shadow: var(--focus-ring); border-color: var(--accent); }
.bc-eye .eye-closed { display: none; }
.bc-eye.is-open .eye-open { display: none; }
.bc-eye.is-open .eye-closed { display: block; }

.tier-badge { margin-left: 8px; vertical-align: 2px; }

.bc-more {
  display: inline-flex; align-items: center; gap: 5px;
  align-self: flex-start;
  font-size: 12px; font-weight: 500;
  color: var(--text-2);
  background: transparent; border: none; padding: 0;
  cursor: pointer;
}
.bc-more:hover { color: var(--text-1); }
.bc-more:focus-visible { box-shadow: var(--focus-ring); border-radius: 4px; }
.bc-more svg { transition: transform .15s ease; }
.bc-more.is-open svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .bc-more svg { transition: none; } }

.bc-info {
  border-top: 1px solid var(--border-weak);
  padding-top: 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.bc-info[hidden] { display: none; }
.bc-info p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-2); }
.bc-info b { color: var(--text-1); font-weight: 600; }
.bc-info .bc-tip {
  border-left: 2px solid var(--accent);
  padding: 2px 0 2px 10px;
}
.bc-info a { color: var(--accent-bright); text-decoration: none; }
.bc-info a:hover { text-decoration: underline; }

/* ── Premium protection card ─────────────────────────────────── */
.prem-card { margin-top: 12px; }
.prem-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-weak);
}
.prem-title { font-size: 15px; font-weight: 600; color: var(--text-1); }
.prem-sub { font-size: 13px; color: var(--text-2); margin-top: 3px; }
.prem-list { display: flex; flex-direction: column; }
.prem-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border-weak);
}
.prem-row:last-child { border-bottom: none; padding-bottom: 0; }
.prem-ic {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: var(--radius);
  display: grid; place-items: center;
  background: var(--hover-wash);
  border: 1px solid var(--border-weak);
  color: var(--text-1);
}
.prem-body { flex: 1; min-width: 0; }
.prem-t { display: block; font-size: 14px; font-weight: 500; color: var(--text-1); }
.prem-s { display: block; font-size: 12.5px; color: var(--text-2); margin-top: 2px; line-height: 1.5; }
.prem-lock { flex-shrink: 0; }

/* Toggle switch (breach alerts). An <a> for free users (routes to pricing),
   a submit <button> for premium — same look, knob slides right when on. */
.pv-switch {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: 42px; height: 24px;
  padding: 0 2px;
  border-radius: 999em;
  background: var(--hover-wash);
  border: 1px solid var(--border-norm);
  cursor: pointer;
  text-decoration: none;
  appearance: none;
  transition: background .15s ease, border-color .15s ease;
}
.pv-knob {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--text-2);
  transition: transform .18s ease, background .15s ease;
}
.pv-switch:hover { border-color: var(--field-border-hover); }
.pv-switch:hover .pv-knob { background: var(--text-1); }
.pv-switch:focus-visible { box-shadow: var(--focus-ring); border-color: var(--accent); }
.pv-switch.is-on { background: var(--accent); border-color: var(--accent); }
.pv-switch.is-on .pv-knob { transform: translateX(18px); background: #fff; }
@media (prefers-reduced-motion: reduce) { .pv-switch, .pv-knob { transition: none; } }
@media (max-width: 560px) {
  .prem-row { flex-wrap: wrap; }
  .prem-body { flex-basis: calc(100% - 46px); }
  .prem-row form, .prem-lock { margin-left: 46px; }
}

.card-foot {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-weak);
  font-size: 13px;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 6px;
}
.card-foot b { color: var(--text-2); font-weight: 600; }

.empty { text-align: center; padding: 20px 8px; }
.empty .ic { color: var(--text-4); display: flex; justify-content: center; margin-bottom: 10px; }
.empty .t { color: var(--text-1); font-size: 14px; font-weight: 500; }
.empty .s { color: var(--text-2); font-size: 13px; margin-top: 4px; line-height: 1.5; }
.empty .a { margin-top: 14px; }

/* Key/value settings rows */
.kv-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-weak);
  font-size: 14px;
}
.kv-row:first-child { padding-top: 0; }
.kv-row:last-child { border-bottom: none; }
.kv-row .k { color: var(--text-2); width: 130px; flex-shrink: 0; }
.kv-row .v {
  flex: 1;
  min-width: 0;
  color: var(--text-1);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}
.card-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }

/* ── Download client cards ───────────────────────────────────── */
.dl-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.dl-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-weak);
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-norm);
  padding: 28px 20px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* Soft per-OS glow bleeding from the top of the card */
.dl-card::before {
  content: "";
  position: absolute;
  left: 50%; top: -40px;
  width: 200px; height: 120px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, var(--os-dim, transparent), transparent);
  pointer-events: none;
}
.dl-card .ic {
  width: 48px; height: 48px;
  border-radius: var(--radius-lg);
  display: grid;
  place-items: center;
  background: var(--os-dim, var(--hover-wash));
  border: 1px solid var(--os-border, var(--border-weak));
  color: var(--os-c, var(--text-1));
  margin-bottom: 12px;
}
/* Per-OS accents — stay inside the brand rail (violet → pink → orange) + lime */
.dl-card.os-ios, .dl-card.os-macos {
  --os-c: #9D8BFF; --os-dim: rgba(157,139,255,.11); --os-border: rgba(157,139,255,.32);
}
.dl-card.os-windows { --os-c: #F49565; --os-dim: rgba(244,149,101,.10); --os-border: rgba(244,149,101,.32); }
.dl-card.os-android { --os-c: #B1EF4A; --os-dim: rgba(177,239,74,.09);  --os-border: rgba(177,239,74,.30); }
.dl-card.os-linux   { --os-c: #FBBF24; --os-dim: rgba(251,191,36,.10);  --os-border: rgba(251,191,36,.32); }
.dl-card.is-soon .ic { opacity: .45; }
.dl-card .nm { font-size: 14px; font-weight: 600; }
.dl-card .mt { font-size: 12px; color: var(--text-3); margin-top: 2px; margin-bottom: 18px; }
.dl-card .btn, .dl-card .badge { margin-top: auto; }

/* ── Table (billing history) ─────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .1px;
  color: var(--text-3);
  padding: 0 8px 8px;
  border-bottom: 1px solid var(--border-weak);
}
.table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--border-weak);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.table tr:last-child td { border-bottom: none; }
.table .num { text-align: right; }
.table a { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--border-norm); text-underline-offset: 2px; }
.table a:hover { color: var(--accent-bright); }

/* ── Pricing / plan selection ────────────────────────────────── */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
}
.plan-card {
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--border-norm);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-norm);
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: border-color .15s var(--ease-quint);
}
.plan-card:hover { border-color: var(--field-border-hover); }
.plan-card.is-highlighted { border-color: var(--accent); }
.plan-card.is-highlighted:hover { border-color: var(--accent-hover); }
.plan-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 20px;
  padding: 0 10px;
  border-radius: 9999em;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}
.plan-title { font-size: 20px; font-weight: 600; margin-bottom: 12px; }
.plan-price-main { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.plan-price { font-size: 32px; line-height: 1.1; font-weight: 700; font-variant-numeric: tabular-nums; }
.plan-cycle { color: var(--text-2); font-size: 14px; }
.plan-meta-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; flex-wrap: wrap; }
.plan-strike { color: var(--text-4); text-decoration: line-through; }
.plan-billed { color: var(--text-3); font-size: 12px; margin-top: 6px; }
.plan-divider { border: none; height: 1px; background: var(--border-weak); margin: 16px 0; }
.plan-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
.plan-features li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.45;
}
.plan-features svg { color: var(--green); flex-shrink: 0; margin-top: 3px; }
.plan-card > form, .plan-card > .btn { margin-top: auto; }
.plan-card form .btn { margin-top: 0; }

.plans-note {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  color: var(--text-3);
  font-size: 12px;
  max-width: 640px;
  margin: 24px auto 0;
  text-align: center;
  line-height: 1.5;
}
.plans-note svg { flex-shrink: 0; margin-top: 2px; color: var(--text-2); }

.page-wide { max-width: 1000px; }

.trust-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-size: 13px;
  color: var(--text-3);
  margin-bottom: 32px;
}
.trust-row > span { display: inline-flex; align-items: center; gap: 6px; }
.trust-row svg { color: var(--text-2); flex-shrink: 0; }

/* Upgrade banner (Proton card banner) */
.banner-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--accent-border);
  border-radius: var(--radius);
  background: var(--accent-dim);
  margin-bottom: 24px;
}
.banner-card p { flex: 1; min-width: 200px; }
.banner-card b { font-weight: 600; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .dash-cols { grid-template-columns: 1fr; }
  .dl-grid { grid-template-columns: repeat(2, 1fr); }
  .user-text { display: none; }
}

@media (max-width: 910px) {
  .plans-grid { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
}

@media (max-width: 680px) {
  :root { --header-h: 48px; }

  .topbar { padding: 4px 8px 4px 8px; gap: 4px; }
  .hamburger { display: inline-flex; }
  .topbar-logo { display: flex; align-items: center; margin-left: 4px; min-width: 0; }
  .topbar-logo img { height: 22px; width: auto; }

  /* Sidebar becomes a drawer */
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 100%;
    max-width: 272px;
    z-index: 800;
    background: var(--bg-shell);
    border-right: 1px solid var(--border-weak);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s;
  }
  .nav-toggle:checked ~ .shell .sidebar {
    transform: none;
    visibility: visible;
    transition: transform .25s ease;
  }
  .nav-backdrop {
    display: block;
    margin: 0;
    position: fixed;
    inset: 0;
    z-index: 799;
    background: rgba(6,7,8,.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
  }
  .nav-toggle:checked ~ .shell .nav-backdrop { opacity: 1; pointer-events: auto; }

  .main-area { border-left: none; border-top-left-radius: 0; }

  .dash { padding: 20px 16px 64px; }
  .page { padding-inline: 16px; }
  .page-title { font-size: 28px; margin: 32px 0; }
  .card { padding: 16px; }
  .card-divider { margin-inline: -16px; }
  .dl-grid, .dl-group .dl-grid--2 { grid-template-columns: 1fr; }
  .plan-row { gap: 16px; }
  .plan-stats { gap: 12px 24px; }
  .kv-row .k { width: 105px; }

  /* comfortable tap targets */
  .btn-sm { padding: 5px 11px; }
}

@media (max-width: 450px) {
  .dash { padding: 16px 12px 56px; }
  .sec-head { flex-wrap: wrap; }
  .plan-cta .btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ── Print: unlock the app-shell scroll trap and flip to light ink ── */
@media print {
  :root {
    --bg-shell: #fff; --bg-content: #fff; --bg-elevated: #fff; --bg-lowered: #fff;
    --text-1: #111; --text-2: #444; --text-3: #666; --text-4: #999;
    --border-weak: #ddd; --border-norm: #bbb;
    --hover-wash: #f2f2f2;
  }
  body.app { height: auto; overflow: visible; }
  .shell, .main-col { display: block; height: auto; overflow: visible; }
  .sidebar, .topbar, .nav-backdrop, .hamburger { display: none !important; }
  .main-area { overflow: visible; border: none; border-radius: 0; }
  .card, .dl-card, .plan-card { box-shadow: none; }
}

/* ══════════════════════════════════════════════════════════════
   APP FOOTER — bottom of the content pane on every app page
═══════════════════════════════════════════════════════════════ */
.app-footer {
  margin-top: auto;
  border-top: 1px solid var(--border-weak);
}
.app-footer-inner {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding: 48px 28px 32px;
}
.app-footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
}
.app-footer-brand img { height: 26px; width: auto; display: block; }
.app-footer-brand p { margin-top: 14px; font-size: 13px; color: var(--text-3); }
.app-footer-nav { display: flex; flex-direction: column; gap: 10px; }
.app-footer-nav a {
  font-size: 13px;
  color: var(--text-3);
  transition: color .15s ease;
}
.app-footer-nav a:hover { color: var(--text-2); }
.app-footer-legal {
  border-top: 1px solid var(--border-weak);
  margin-top: 40px;
  padding-top: 24px;
}
.app-footer-legal p { font-size: 12px; color: var(--text-4); }
@media (max-width: 768px) {
  .app-footer-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ══════════════════════════════════════════════════════════════
   LOCATIONS — mirror of planckvpn.com/locations
═══════════════════════════════════════════════════════════════ */
.loc-hero { max-width: 720px; margin-top: 24px; }
.loc-hero h1 {
  margin-top: 14px;
  font-size: 34px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -.02em;
}
.loc-hero .loc-sub { margin-top: 18px; font-size: 16px; color: var(--text-2); }

.loc-eyebrow {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--text-3);
}

.loc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 1100px) { .loc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .loc-grid { grid-template-columns: 1fr; } }

.loc-card {
  border: 1px solid var(--border-weak);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: border-color .15s ease;
}
.loc-card:hover { border-color: var(--border-norm); }
.loc-head { display: flex; align-items: center; gap: 12px; }
.loc-head img { border-radius: 3px; flex-shrink: 0; }
.loc-country { font-size: 14px; font-weight: 500; color: var(--text-1); }
.loc-city { font-size: 12px; color: var(--text-2); }
.loc-divider { border-top: 1px solid var(--border-weak); margin: 20px 0 16px; }
.loc-card .loc-eyebrow { margin-bottom: 12px; }
.loc-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.loc-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-2);
}
.loc-list .dash-mark { color: var(--accent); flex-shrink: 0; }

/* ── Download groups (apps page): titled cards wrapping platform tiles ── */
.dl-group {
  background: var(--bg-elevated);
  border: 1px solid var(--border-weak);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-norm);
  padding: 20px;
  margin-bottom: 20px;
}
.dl-group .grp-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 16px;
}
.dl-group .grp-head h2 { font-size: 16px; font-weight: 600; }
.dl-group .grp-head .sub { color: var(--text-3); font-size: 13px; margin-top: 3px; }
.dl-group .grp-head .aside { color: var(--text-2); font-size: 13px; white-space: nowrap; }
.dl-group .dl-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.dl-group .dl-grid--2 { grid-template-columns: repeat(2, 1fr); }
.dl-group .dl-card { background: var(--bg-content); box-shadow: none; }
.dl-group .grp-note { margin-top: 14px; font-size: 12.5px; color: var(--text-3); }
.dl-group .grp-note a { color: var(--accent-bright); }
.dl-group .grp-note a:hover { text-decoration: underline; }

/* Collapsible dl-group (OpenVPN / WireGuard fallback clients) */
.dl-group .grp-head h2 { display: flex; align-items: center; gap: 9px; }
.dl-group .grp-head h2 .mini-logo { width: 20px; height: 20px; border-radius: 5px; }
details.dl-group > summary.grp-head { cursor: pointer; list-style: none; margin-bottom: 0; }
details.dl-group > summary.grp-head::-webkit-details-marker { display: none; }
details.dl-group[open] > summary.grp-head { margin-bottom: 16px; }
.dl-group .grp-head .chev {
  flex-shrink: 0;
  color: var(--text-3);
  transition: transform .15s ease;
  align-self: center;
}
details.dl-group[open] .grp-head .chev { transform: rotate(180deg); }
details.dl-group > summary.grp-head:hover h2 { color: var(--accent-bright); }

/* ── Referral-code claim strip (/pricing) ───────────────────── */
.ref-strip {
  max-width: 640px;
  background: var(--accent-dim);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  margin-bottom: 24px;
  color: var(--text-1);
  font-size: 14px;
}
.ref-strip.is-applied {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--green);
  background: rgba(16,185,129,.08);
  border-color: rgba(16,185,129,.3);
}
.ref-strip summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ref-strip summary::-webkit-details-marker { display: none; }
.ref-strip summary svg { flex-shrink: 0; color: var(--accent-bright); }
.ref-strip summary span { flex: 1; }
.ref-strip summary b { color: var(--accent-bright); font-weight: 600; }
.ref-strip-hide {
  flex-shrink: 0;
  color: var(--text-3);
  font-size: 18px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}
.ref-strip-hide:hover { color: var(--text-1); background: var(--hover-wash); }
.ref-strip-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.ref-strip-form input[type="text"] {
  background: var(--bg-content);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  color: var(--text-1);
  padding: 8px 12px;
  width: 180px;
  font-size: 14px;
}
.ref-strip-form input[type="text"]::placeholder { text-transform: none; }
.ref-strip-form input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
.ref-strip-err { color: var(--red); font-size: 13px; }

/* ── Connect page (/connect) ─────────────────────────────────── */
/* Two-path fork */
.cn-paths {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: stretch;
}
.cn-paths .card + .card { margin-top: 0; }
.cn-path {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  transition: border-color .15s var(--ease-quint), transform .15s var(--ease-quint);
}
.cn-path:hover { border-color: var(--border-norm); transform: translateY(-2px); }
.cn-path-top { display: flex; align-items: center; justify-content: space-between; }
.cn-path-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: var(--radius-lg);
  background: var(--accent-dim);
  border: 1px solid var(--accent-border);
  color: var(--accent-bright);
}
.cn-path h3 { font-size: 16px; font-weight: 600; }
.cn-path p { color: var(--text-2); font-size: 13.5px; flex: 1; }
.cn-path-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-bright);
  font-weight: 600;
  font-size: 14px;
}
.cn-path:hover .cn-path-cta svg { transform: translateX(2px); }
.cn-path--manual .cn-path-ic { background: rgba(157,139,255,.10); border-color: rgba(157,139,255,.30); color: #9D8BFF; }
.cn-path-cta svg { transition: transform .15s var(--ease-quint); }
button.cn-path { text-align: left; font: inherit; }

/* Manual-setup modal */
.cn-modal {
  width: min(1060px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--border-norm);
  border-radius: var(--radius-xl);
  background: var(--bg-content);
  color: var(--text-1);
  box-shadow: var(--shadow-lifted);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.cn-modal::backdrop {
  background: rgba(11,13,19,.72);
  backdrop-filter: blur(3px);
}
.cn-modal-head {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 24px 16px;
  background: var(--bg-content);
  border-bottom: 1px solid var(--border-weak);
}
.cn-modal-head > div { flex: 1; min-width: 0; }
.cn-modal-head h2 { font-size: 18px; }
.cn-modal-head .sub { color: var(--text-2); font-size: 13px; margin-top: 2px; }
.cn-modal-head .badge { margin-top: 4px; }
.cn-modal-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--radius);
  color: var(--text-3);
  transition: background .15s var(--ease-quint), color .15s var(--ease-quint);
}
.cn-modal-close:hover { background: var(--hover-wash); color: var(--text-1); }
.cn-modal .cn-layout { padding: 20px 24px 24px; }
.cn-modal .cn-sheet { top: 88px; }

/* Manual-setup wizard (location → name) */
.cn-modal--wiz { width: min(680px, calc(100vw - 32px)); }
.cn-wiz { padding: 20px 24px 24px; }
.cn-wiz-err { margin-bottom: 14px; }
.cn-wstep[hidden] { display: none; }
.cn-wiz-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}
.cn-wiz-foot .cn-note { margin-top: 0; }
.cn-wiz-chosen {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  color: var(--text-2);
  font-size: 13.5px;
  margin-bottom: 16px;
}
.cn-wiz-chosen img { border-radius: 2px; }
.cn-wiz-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1px;
  color: var(--text-3);
  margin-bottom: 6px;
}

/* Step 3 — name & save */
.cn-name {
  width: 100%;
  max-width: 420px;
  padding: 9px 13px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: var(--bg-content);
  color: var(--text-1);
}
.cn-name:hover { border-color: var(--field-border-hover); }
.cn-name:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.cn-name::placeholder { color: var(--text-4); }
.cn-error { color: var(--red); font-size: 13px; margin-top: 10px; }
#cn-save:disabled { opacity: .45; cursor: not-allowed; }

/* Saved configurations */
.cn-cfg-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cn-cfg-list .card + .card { margin-top: 0; }
.cn-cfg {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  grid-template-areas: "flag name view" "flag srv view" "date date date";
  align-items: center;
  column-gap: 12px;
  text-align: left;
  padding: 14px 18px;
  transition: border-color .15s var(--ease-quint), transform .15s var(--ease-quint);
}
.cn-cfg:hover { border-color: var(--border-norm); transform: translateY(-1px); }
.cn-cfg img { grid-area: flag; border-radius: 2px; }
.cn-cfg-name { grid-area: name; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-cfg-srv { grid-area: srv; color: var(--text-3); font-size: 12.5px; }
.cn-cfg-date { grid-area: date; color: var(--text-4); font-size: 12px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border-weak); }
.cn-cfg-view {
  grid-area: view;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--accent-bright);
  font-weight: 600;
  font-size: 13px;
}

/* Saved-configuration viewer dialog */
.cn-modal--cfg { width: min(560px, calc(100vw - 32px)); }
.cn-cfgview-body { padding: 4px 24px 24px; }
/* Value + its own Copy button on one line */
.cn-cfgview-body .cn-row dd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cn-cfgview-body .cn-row dd code { min-width: 0; overflow-wrap: anywhere; }
.cn-cfgview-body .cn-copy { flex-shrink: 0; }
.cn-cfgview-how { font-size: 14px; font-weight: 600; margin: 20px 0 10px; }
.cn-cfg-delete { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--border-weak); text-align: right; }

/* Steps + sheet layout */
.cn-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}
.cn-steps .card + .card { margin-top: 16px; }
.cn-step-head { display: flex; gap: 14px; margin-bottom: 16px; }
.cn-step-n {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--accent-border);
  background: var(--accent-dim);
  color: var(--accent-bright);
  font-weight: 700;
  font-size: 13px;
}
.cn-step-head h3 { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.cn-step-sub { color: var(--text-2); font-size: 13px; max-width: 560px; }
.cn-note { color: var(--text-3); font-size: 12.5px; margin-top: 10px; }
.cn-note a { color: var(--accent-bright); }

/* Step 1 — generated credentials */
.cn-creds {
  border: 1px solid var(--border-weak);
  border-radius: var(--radius-lg);
  background: var(--bg-content);
  padding: 14px 16px;
  margin-bottom: 4px;
}
.cn-creds--locked p { color: var(--text-2); font-size: 13.5px; }
.cn-creds--locked a { color: var(--accent-bright); font-weight: 600; }
.cn-kv {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
.cn-kv + .cn-kv { border-top: 1px dashed var(--border-weak); }
.cn-kv .k { color: var(--text-3); font-size: 12.5px; }
.cn-kv .v,
.cn-sheet code,
.cn-srv-ip code {
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--text-1);
  overflow-wrap: anywhere;
}
.cn-copy {
  padding: 3px 10px;
  border: 1px solid var(--border-norm);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text-2);
  transition: .15s var(--ease-quint);
}
.cn-copy:hover { border-color: var(--field-border-hover); color: var(--text-1); }
.cn-copy.is-done, .btn.is-done { color: var(--green); border-color: rgba(16,185,129,.45); }

/* Step 2 — server list */
.cn-srv-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.cn-srv {
  width: 100%;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  grid-template-areas: "flag name check" "flag city check" "ip ip ip";
  align-items: center;
  column-gap: 10px;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--border-weak);
  border-radius: var(--radius-lg);
  background: var(--bg-content);
  transition: border-color .15s var(--ease-quint), background .15s var(--ease-quint);
}
.cn-srv:hover { border-color: var(--border-norm); }
.cn-srv img { grid-area: flag; border-radius: 2px; }
.cn-srv-name { grid-area: name; font-weight: 600; font-size: 13.5px; }
.cn-srv-city { grid-area: city; color: var(--text-3); font-size: 12px; }
.cn-srv-check {
  grid-area: check;
  display: none;
  color: var(--green);
}
.cn-srv-ip {
  grid-area: ip;
  display: none;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-weak);
}
.cn-srv-ip code { color: var(--accent-bright); }
.cn-srv.is-sel {
  border-color: rgba(246,106,52,.42);
  background: rgba(246,106,52,.05);
}
.cn-srv.is-sel .cn-srv-check, .cn-srv.is-sel .cn-srv-ip { display: block; }

/* Step 3 — per-OS guides */
.cn-os {
  border: 1px solid var(--border-weak);
  border-radius: var(--radius-lg);
  background: var(--bg-content);
}
.cn-os + .cn-os { margin-top: 8px; }
.cn-os summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 16px;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cn-os summary::-webkit-details-marker { display: none; }
.cn-os summary::after {
  content: '';
  width: 8px; height: 8px;
  border-right: 1.6px solid var(--text-3);
  border-bottom: 1.6px solid var(--text-3);
  transform: rotate(45deg);
  transition: transform .15s var(--ease-quint);
}
.cn-os[open] summary::after { transform: rotate(225deg); }
.cn-os ol {
  padding: 0 16px 14px 34px;
  color: var(--text-2);
  font-size: 13.5px;
  display: grid;
  gap: 6px;
}
.cn-os ol b { color: var(--text-1); font-weight: 600; }
.cn-os .cn-note { padding: 0 16px 14px; margin-top: -4px; }

/* Connection sheet — the artifact you type into your device */
.cn-sheet {
  position: sticky;
  top: 24px;
  padding: 0;
  overflow: hidden;
}
.cn-sheet::before {
  content: '';
  display: block;
  height: 3px;
  background: var(--spectrum);
}
.cn-sheet-head { padding: 18px 20px 0; }
.cn-sheet-head h3 { font-size: 15px; font-weight: 600; }
.cn-sheet-head p { color: var(--text-3); font-size: 12.5px; margin-top: 2px; }
.cn-sheet-body { padding: 14px 20px 4px; }
.cn-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 0;
}
.cn-row + .cn-row { border-top: 1px dashed var(--border-weak); }
.cn-row dt { color: var(--text-3); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1px; }
.cn-row dd code.cn-blank { color: var(--text-4); font-style: italic; font-family: 'Inter', system-ui, sans-serif; }
.cn-sheet .btn { margin: 12px 20px 0; width: calc(100% - 40px); }
.cn-sheet .cn-note { padding: 0 20px 16px; text-align: center; }
.cn-sheet .cn-note[hidden] { display: none; }
.cn-sheet .btn:disabled { opacity: .45; cursor: not-allowed; }
.cn-sheet > .btn + .cn-note { margin-top: 10px; }
.cn-sheet::after { content: ''; display: block; height: 16px; }

@media (max-width: 1000px) {
  .cn-layout { grid-template-columns: 1fr; }
  .cn-sheet { position: static; }
}
@media (max-width: 720px) {
  .cn-srv-list { grid-template-columns: 1fr; }
  .cn-cfg-list { grid-template-columns: 1fr; }
  .cn-modal {
    width: 100vw;
    max-height: 100dvh;
    border: none;
    border-radius: 0;
  }
  .cn-modal-head { padding: 16px; }
  .cn-modal .cn-layout { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .cn-path, .cn-path:hover, .cn-path-cta svg, .cn-creds.cn-flash { transition: none; animation: none; transform: none; }
}

/* ── Dedicated IP page (/dedicated-ip) ───────────────────────── */
.dd-benefits {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.dd-benefits li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "ic title" "ic body";
  column-gap: 12px;
  row-gap: 2px;
  padding: 16px 18px;
  border: 1px solid var(--border-weak);
  border-radius: var(--radius-xl);
  background: var(--bg-elevated);
}
.dd-benefits .ic {
  grid-area: ic;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--radius);
  background: var(--accent-dim);
  border: 1px solid var(--accent-border);
  color: var(--accent-bright);
}
.dd-benefits b { grid-area: title; font-size: 14px; font-weight: 600; }
.dd-benefits span:not(.ic) { grid-area: body; color: var(--text-3); font-size: 12.5px; }

.dd-opt { color: var(--text-3); font-weight: 400; font-size: 13px; }
.dd-name {
  width: 100%;
  max-width: 420px;
  padding: 9px 13px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: var(--bg-content);
  color: var(--text-1);
}
.dd-name:hover { border-color: var(--field-border-hover); }
.dd-name::placeholder { color: var(--text-4); }

/* Preview card */
.dd-led-row { display: flex; align-items: center; gap: 9px; }
.dd-led {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--text-4);
  transition: background .2s, box-shadow .2s;
}
.dd-led.is-ready { background: var(--amber);  box-shadow: 0 0 7px rgba(245,158,11,.6); }
.dd-led.is-prov  { background: var(--amber);  box-shadow: 0 0 7px rgba(245,158,11,.6); animation: dd-blink 1s infinite; }
.dd-led.is-on    { background: var(--green);  box-shadow: 0 0 7px rgba(16,185,129,.7); }
@keyframes dd-blink { 50% { opacity: .35; } }
.dd-host { color: var(--text-3); font-size: 12px; }
.dd-preview .cn-sheet-head p { margin-top: 6px; overflow-wrap: anywhere; }
.dd-price {
  padding: 14px 20px 0;
  border-top: 1px dashed var(--border-weak);
  margin-top: 8px;
}
.dd-price .amount { font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
.dd-price .per { color: var(--text-3); font-size: 13px; margin-left: 4px; }
.dd-price p { color: var(--text-3); font-size: 12px; margin-top: 4px; }
.dd-preview .btn:disabled { opacity: .45; cursor: not-allowed; }
.dd-preview .cn-note { text-align: center; padding: 0 20px 16px; }

/* Owned server cards */
.dd-units { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.dd-units .card + .card { margin-top: 0; }
.dd-unit { padding: 18px 20px; }
.dd-unit-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--border-weak);
}
.dd-unit-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dd-unit-id b { font-size: 14.5px; }
.dd-unit-id .dd-host { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-unit-body { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; padding: 12px 0 2px; }
.dd-unit-body dt { color: var(--text-3); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1px; }
.dd-unit-body dd {
  margin-top: 2px;
  font-size: 13.5px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.dd-unit-body dd img { display: inline-block; border-radius: 2px; }
.dd-unit-body dd code {
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
  font-size: 13px;
}
.dd-unit-foot { display: flex; justify-content: flex-end; margin-top: 12px; }

@media (max-width: 880px) {
  .dd-benefits { grid-template-columns: 1fr; }
  .dd-units { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .badge .dot, .vpn-strip .vdot { animation: none !important; }
}