/* Import after tokens.css. Components consume semantic colour roles. */
.rv-lockup { display: inline-flex; align-items: center; gap: var(--rv-space-8); text-decoration: none; color: var(--rv-text-primary); }
.rv-lockup > img { width: 40px; height: 40px; }
.rv-wordmark { display: inline-flex; align-items: center; gap: var(--rv-space-8); font: 700 24px/1 var(--rv-font-display); letter-spacing: -.03em; }
.rv-wordmark__pill, .rv-wordmark .vpn { font-size: .5em; letter-spacing: 0; line-height: 1; padding: 5px 7px; vertical-align: middle; font-weight: 700; border-radius: var(--rv-radius-6); background: var(--rv-gradient); color: var(--rv-text-on-accent); }
.rv-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--rv-space-8); min-height: 44px; padding: var(--rv-space-12) var(--rv-space-20); border: 1px solid transparent; border-radius: var(--rv-radius-10); background: var(--rv-bg-surface-2); color: var(--rv-text-primary); font-weight: 600; line-height: 1.25; text-decoration: none; cursor: pointer; transition: transform var(--rv-dur-120) var(--rv-easing-standard), filter var(--rv-dur-120) var(--rv-easing-standard); }
/* Primary uses the light end of the brand gradient so dark text clears 7:1 without a label backing. */
.rv-btn--primary { background: linear-gradient(135deg, var(--rv-green-400), var(--rv-green-300)); color: var(--rv-text-on-accent); font-weight: 600; }
/* A solid backing keeps body text above 4.5:1 across the signature gradient. */
.rv-btn--secondary { border-color: var(--rv-border-strong); }
.rv-btn--ghost { background: transparent; }
.rv-btn--danger { background: var(--rv-bg-surface); border-color: var(--rv-state-error); color: var(--rv-text-primary); }
.rv-btn--sm { padding: var(--rv-space-8) var(--rv-space-12); font-size: var(--rv-type-small); }
.rv-btn--md { min-height: 48px; }
.rv-btn--lg { min-height: 56px; padding-inline: var(--rv-space-32); }
@media (hover:hover) { .rv-btn:not(:disabled):not([aria-disabled="true"]):hover { filter: brightness(1.08); transform: translateY(-1px); } }
.rv-btn:not(:disabled):not([aria-disabled="true"]):active { transform: scale(.98); }
.rv-btn:disabled, .rv-btn[aria-disabled="true"] { cursor: not-allowed; opacity: .55; }
.rv-btn[aria-busy="true"] { cursor: progress; }
.rv-spinner { width: 16px; height: 16px; flex-shrink: 0; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: rv-spin var(--rv-dur-900) linear infinite; }
@keyframes rv-spin { to { transform: rotate(360deg); } }
.rv-toggle, .rv-check, .rv-radio { display: inline-flex; align-items: center; gap: var(--rv-space-12); min-height: 44px; cursor: pointer; position: relative; }
.rv-toggle input { position: absolute; left: 0; width: 48px; height: 28px; opacity: 0; margin: 0; }
.rv-toggle__track { display: inline-block; width: 48px; height: 28px; flex-shrink: 0; background: var(--rv-bg-surface-2); border: 1px solid var(--rv-border-strong); border-radius: var(--rv-radius-999); }
.rv-toggle__track::after { content: ''; display: block; width: 20px; height: 20px; margin: 3px; border-radius: 50%; background: var(--rv-text-primary); transition: transform var(--rv-dur-180) var(--rv-easing-standard); }
.rv-toggle input:checked + .rv-toggle__track { background: var(--rv-state-protected); border-color: var(--rv-accent-strong); }
.rv-toggle input:checked + .rv-toggle__track::after { transform: translateX(20px); background: var(--rv-text-on-accent); }
.rv-toggle input:focus-visible + .rv-toggle__track { outline: 2px solid var(--rv-border-focus); outline-offset: 2px; }
.rv-toggle:has(input:disabled), .rv-check:has(input:disabled), .rv-radio:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.rv-check input, .rv-radio input { width: 20px; height: 20px; margin: 0; accent-color: var(--rv-accent-strong); }
.rv-segmented { display: inline-flex; flex-wrap: wrap; padding: var(--rv-space-4); border: 1px solid var(--rv-border-subtle); border-radius: var(--rv-radius-14); background: var(--rv-bg-raised); gap: var(--rv-space-4); }
.rv-segmented label { position: relative; cursor: pointer; }
.rv-segmented input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; }
.rv-segmented span { display: flex; align-items: center; min-height: 44px; padding: var(--rv-space-8) var(--rv-space-16); border-radius: var(--rv-radius-10); color: var(--rv-text-secondary); }
.rv-segmented input:checked + span { background: var(--rv-bg-surface-2); color: var(--rv-text-primary); }
.rv-segmented input:focus-visible + span { outline: 2px solid var(--rv-border-focus); outline-offset: 2px; }
.rv-input, .rv-select { width: 100%; min-width: 0; min-height: 48px; padding: var(--rv-space-12) var(--rv-space-16); border: 1px solid var(--rv-border-strong); border-radius: var(--rv-radius-10); background: var(--rv-bg-surface); color: var(--rv-text-primary); }
.rv-input::placeholder { color: var(--rv-text-tertiary); opacity: 1; }
.rv-input[aria-invalid="true"] { border-color: var(--rv-state-error); }
.rv-input:disabled, .rv-select:disabled { cursor: not-allowed; opacity: .55; }
.rv-search { position: relative; }
.rv-search > svg { position: absolute; width: 20px; height: 20px; top: 14px; left: 16px; fill: none; stroke: var(--rv-icon-secondary); stroke-width: 1.8; pointer-events: none; }
.rv-input--search { padding-left: var(--rv-space-48); }
.rv-card { padding: var(--rv-space-24); background: var(--rv-bg-surface); border: 1px solid var(--rv-border-subtle); border-radius: var(--rv-radius-20); }
.rv-card--inverse { background: var(--rv-bg-inverse); color: var(--rv-text-inverse); }
.rv-card--inverse .rv-card__copy { color: inherit; }
.rv-card__copy { color: var(--rv-text-secondary); }
.rv-row { display: flex; align-items: center; gap: var(--rv-space-12); width: 100%; min-height: 56px; padding: var(--rv-space-12) var(--rv-space-16); border: 1px solid transparent; border-radius: var(--rv-radius-10); background: transparent; color: var(--rv-text-primary); text-align: left; cursor: pointer; }
.rv-row__body { flex: 1; min-width: 0; }
.rv-row__title, .rv-row__secondary { display: block; }
.rv-row__secondary, .rv-row__meta { color: var(--rv-text-secondary); font-size: var(--rv-type-small); }
.rv-row__meta { flex-shrink: 0; }
.rv-row:hover, .rv-row:active { background: var(--rv-bg-surface-2); }
.rv-row:active { transform: scale(.99); }
.rv-row[aria-pressed="true"], .rv-row[aria-selected="true"] { background: var(--rv-bg-surface-2); border-color: var(--rv-border-strong); }
.rv-flag { display: inline-flex; width: 30px; height: 20px; flex-shrink: 0; overflow: hidden; border-radius: 3px; outline: 1px solid var(--rv-border-subtle); }
.rv-flag svg { width: 100%; height: 100%; }
.rv-badge { display: inline-flex; align-items: center; gap: var(--rv-space-4); padding: var(--rv-space-4) var(--rv-space-8); border: 1px solid var(--rv-border-subtle); border-radius: var(--rv-radius-6); background: var(--rv-bg-surface-2); color: var(--rv-text-secondary); font-size: var(--rv-type-caption); font-weight: 600; }
.rv-badge--accent { border-color: var(--rv-state-protected); color: var(--rv-text-primary); }
.rv-badge--tor { border-style: dashed; }
.rv-badge--p2p { border-radius: var(--rv-radius-999); }
.rv-badge--premium { background: var(--rv-bg-inverse); color: var(--rv-text-inverse); }
.rv-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: var(--rv-space-8) var(--rv-space-16); border: 1px solid var(--rv-border-strong); border-radius: var(--rv-radius-999); background: transparent; color: var(--rv-text-primary); cursor: pointer; }
.rv-chip[aria-pressed="true"] { background: var(--rv-bg-inverse); color: var(--rv-text-inverse); }
.rv-scrim { position: fixed; inset: 0; background: var(--rv-overlay-scrim); z-index: 20; }
.rv-sheet, .rv-modal { padding: var(--rv-space-24); border: 1px solid var(--rv-border-subtle); background: var(--rv-bg-raised); color: var(--rv-text-primary); box-shadow: 0 20px 64px var(--rv-overlay-scrim); z-index: 21; }
.rv-sheet { position: fixed; bottom: 0; left: 0; right: 0; border-radius: var(--rv-radius-28) var(--rv-radius-28) 0 0; padding-bottom: max(var(--rv-space-24), env(safe-area-inset-bottom)); }
.rv-sheet__grabber { width: 40px; height: 4px; margin: 0 auto var(--rv-space-24); background: var(--rv-border-strong); border-radius: var(--rv-radius-999); }
.rv-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(480px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; border-radius: var(--rv-radius-20); }
.rv-toast { display: flex; align-items: center; gap: var(--rv-space-12); padding: var(--rv-space-16); border: 1px solid var(--rv-border-strong); border-radius: var(--rv-radius-14); background: var(--rv-bg-raised); color: var(--rv-text-primary); box-shadow: 0 8px 24px var(--rv-overlay-scrim); }
.rv-live-dot { display: inline-block; position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--rv-state-protected); flex-shrink: 0; }
.rv-live-dot::after { content: ''; position: absolute; inset: -4px; border: 1px solid var(--rv-state-protected); border-radius: inherit; animation: rv-pulse 1.8s ease-out infinite; }
@keyframes rv-pulse { 0% { transform: scale(.6); opacity: .6; } 100% { transform: scale(1.7); opacity: 0; } }
.rv-meter { display: block; width: 100%; height: 4px; appearance: none; border: 0; border-radius: var(--rv-radius-999); overflow: hidden; background: var(--rv-border-subtle); color: var(--rv-state-protected); }
.rv-meter::-webkit-progress-bar { background: var(--rv-border-subtle); }
.rv-meter::-webkit-progress-value { background: var(--rv-state-protected); }
.rv-meter::-moz-progress-bar { background: var(--rv-state-protected); }
.rv-stat__label { color: var(--rv-text-secondary); font-size: var(--rv-type-small); }
.rv-stat__value { display: block; margin-top: var(--rv-space-8); font: 600 var(--rv-type-h1)/1.1 var(--rv-font-display); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.rv-dial { --dial-size: 220px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--rv-space-12); }
.rv-dial__button { position: relative; display: grid; place-items: center; width: min(var(--dial-size), 100%); aspect-ratio: 1; flex-shrink: 0; padding: 0; background: var(--rv-bg-surface); color: var(--rv-icon-secondary); border: 0; border-radius: 50%; cursor: pointer; transition: transform var(--rv-dur-180) var(--rv-easing-standard), box-shadow var(--rv-dur-420) var(--rv-easing-standard); }
.rv-dial__button:active { transform: scale(.98); }
.rv-dial__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.rv-dial__track, .rv-dial__progress { fill: none; stroke-width: 4; }
.rv-dial__track { stroke: var(--rv-border-subtle); }
.rv-dial__progress { stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linecap: round; }
.rv-gradient-start { stop-color: var(--rv-green-500); }
.rv-gradient-end { stop-color: var(--rv-green-300); }
.rv-dial__power { width: 26%; height: 26%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.rv-dial__label { display: flex; align-items: center; justify-content: center; gap: var(--rv-space-12); font: 600 var(--rv-type-h3)/1.3 var(--rv-font-display); }
.rv-dial__sublabel { color: var(--rv-text-secondary); font-size: var(--rv-type-small); }
.rv-dial .rv-live-dot { display: none; }
.rv-dial[data-state="connecting"] .rv-dial__progress { animation: rv-sweep var(--rv-dur-900) var(--rv-easing-linear) infinite; }
.rv-dial[data-state="connecting"] .rv-dial__button { cursor: progress; }
@keyframes rv-sweep { from { stroke-dashoffset: 100; } to { stroke-dashoffset: -100; } }
.rv-dial[data-state="protected"] .rv-dial__progress { stroke-dashoffset: 0; }
.rv-dial[data-state="protected"] .rv-dial__button { color: var(--rv-state-protected); box-shadow: 0 0 32px color-mix(in srgb, var(--rv-state-protected) 20%, transparent); }
.rv-dial[data-state="protected"] .rv-live-dot { display: inline-block; }
.rv-dial[data-state="error"] .rv-dial__progress { stroke: var(--rv-state-error); stroke-dashoffset: 0; }
.rv-dial[data-state="error"] .rv-dial__button { color: var(--rv-state-error); }
.rv-route { display: block; width: 100%; height: auto; overflow: visible; }
.rv-route__track { stroke: var(--rv-border-strong); stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; fill: none; }
.rv-route__path { stroke-width: 3; stroke-linecap: round; fill: none; stroke-dasharray: 100; stroke-dashoffset: 100; }
.rv-route__mark { opacity: .45; filter: grayscale(1); transition: opacity var(--rv-dur-420), filter var(--rv-dur-420); }
[data-state="protected"] .rv-route__mark { opacity: 1; filter: none; }
[data-state="protected"] .rv-route__node--exit { stroke: var(--rv-state-protected); }
.rv-route--compact text { display: none; }
.rv-route__node { fill: var(--rv-bg-surface); stroke: var(--rv-icon-secondary); stroke-width: 1.5; }
.rv-route__icon { stroke: var(--rv-icon-primary); stroke-width: 1.5; fill: none; }
.rv-route text { fill: var(--rv-text-primary); font: 600 14px var(--rv-font-body); text-anchor: middle; }
.rv-route .rv-route__secondary { fill: var(--rv-text-secondary); font-size: 12px; font-weight: 400; }
.rv-route__live { fill: var(--rv-state-protected); opacity: 0; }
[data-state="protected"] .rv-route__path { stroke-dashoffset: 0; animation: rv-route-draw var(--rv-dur-900) var(--rv-easing-enter) both; }
[data-state="protected"] .rv-route__live { opacity: 1; }
@keyframes rv-route-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .rv-live-dot::after { animation: none; display: none; }
  .rv-dial[data-state="connecting"] .rv-dial__progress { animation: none; stroke-dashoffset: 35; }
  [data-state="protected"] .rv-route__path { animation: none; stroke-dashoffset: 0; }
  .rv-btn:hover, .rv-btn:active, .rv-row:active, .rv-dial__button:active { transform: none; }
}

/* A zero-length round-capped stroke still paints a dot: hide progress when idle. */
.rv-dial:not([data-state]) .rv-dial__progress, .rv-dial[data-state="idle"] .rv-dial__progress { opacity: 0; }