/* NordLine website: tokens → primitives → surfaces → responsive layouts.
   Mini App retains its exact previous cascade in mini_base.css + mini.css. */
:root {
  --nl-night: #0a0b0d; --nl-deep: #121417; --nl-panel: #17191d; --nl-panel-2: #202329;
  --nl-line: #272b31; --nl-line-strong: #343840; --nl-text: #f4f3ef; --nl-muted: #a5a8af;
  --nl-dim: #9297a0; --nl-blue: #5b9de2; --nl-blue-hover: #70a8e0;
  --nl-safe: #79c9a5; --nl-warm: #e5b978; --nl-danger: #e77d8d;
  --nl-radius-surface: 16px; --nl-radius-control: 999px; --nl-radius-field: 12px;
  --nl-body: Manrope, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --dash-text: var(--nl-text); --dash-muted: var(--nl-muted); --dash-dim: var(--nl-dim);
  --dash-border: var(--nl-line-strong); --dash-border-soft: var(--nl-line);
  --dash-soft: var(--nl-panel-2); --dash-surface: var(--nl-panel); --dash-accent: var(--nl-blue);
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--nl-night); scroll-padding-top: 110px; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--nl-night); color: var(--nl-text); font: 15px/1.6 var(--nl-body); -webkit-text-size-adjust: 100%; }
body:has(dialog[open]), .dashboard-modal-open { overflow: hidden; }
[hidden] { display: none !important; }
main, section, div, span, header, aside, form, dl { min-width: 0; }
a { color: var(--nl-blue); text-decoration: none; text-underline-offset: 4px; }
a:hover { color: var(--nl-blue-hover); }
button, input, select, textarea { font: inherit; max-width: 100%; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
button, summary { cursor: pointer; }
button { color: inherit; }
button:disabled { opacity: .55; cursor: default; }
:where(input:not([type=hidden]):not([type=checkbox]):not([type=radio])), select, textarea { width: 100%; min-width: 0; min-height: 50px; padding: 12px 14px; border: 1px solid var(--nl-line-strong); border-radius: 12px; background: var(--nl-deep); color: var(--nl-text); font-size: 16px; }
input::placeholder { color: var(--nl-dim); opacity: 1; }
input[type=checkbox], input[type=radio] { accent-color: var(--nl-blue); flex-shrink: 0; width: 18px; height: 18px; }
label { display: block; margin-bottom: 8px; color: var(--nl-muted); font-size: 14px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { color: var(--nl-text); font-weight: 650; letter-spacing: -.035em; line-height: 1.25; }
h1 { font-size: clamp(30px,3.5vw,48px); } h2 { font-size: 24px; } h3 { font-size: 17px; }
p { color: var(--nl-muted); } strong { font-weight: 650; } small { font-size: 12px; }
svg { width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
img { max-width: 100%; }
summary { list-style: none; } summary::-webkit-details-marker { display: none; }
:is(a,button,summary):focus-visible { outline: 2px solid var(--nl-text); outline-offset: 4px; }
:is(input,select,textarea):focus-visible { outline: 2px solid var(--nl-blue); outline-offset: 4px; }
/* Copy fallback and dialog focus restoration must not leave pointer focus rings. */
html[data-web-input="pointer"] :is(a,button,summary):focus { outline: none; }
:is(main,section,header)[tabindex="-1"]:focus { outline: none; }
.visually-hidden, .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 10px; left: 12px; z-index: 1000; padding: 12px 18px; border-radius: 12px; background: var(--nl-text); color: var(--nl-night); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.grid-bg, .glow-top, .signal-rail, .crystal-border, .glow, .orbit { display: none; }
.brand-row, .landing-logo, .brand, .logo, .password-reset-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--nl-text); }
.brand-mark, .logo-mark, .mark { position: relative; display: inline-grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border: 0; background: transparent; }
.brand-mark img, .logo-mark img, .mark img { position: absolute; width: 145%; max-width: none; height: 145%; object-fit: contain; }
.brand-name, .landing-logo-copy, .brand, .logo { font: 650 22px/1.25 var(--nl-body); letter-spacing: -.055em; }
.brand-name b, .landing-logo b, .logo b, .auth-brand-accent { color: var(--nl-blue); font-weight: inherit; }
.brand-sub { margin-top: 4px; color: var(--nl-dim); font-size: 12px; letter-spacing: 0; }
.btn, .btn-primary, .btn-trial, .btn-happ, .dashboard-primary-btn, .landing-primary-btn, .primary-btn, .subscription-checkout-submit, .btn-pay-continue, .btn-telegram, .btn-plan, .button, .cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 12px 22px; border: 0; border-radius: 999px; background: var(--nl-text); color: var(--nl-night); text-align: center; font-weight: 650; line-height: 1.5; text-decoration: none; transition: background 140ms, transform 140ms; }
:is(.btn,.btn-primary,.btn-trial,.btn-happ,.landing-primary-btn,.primary-btn,.subscription-checkout-submit,.mobile-primary-action,.button,.cta):hover { background: #fff; color: var(--nl-night); }
.btn-ghost, .btn-secondary, .btn-telegram, .btn-plan, .button.secondary, .button.incy, .device-retry-btn, .device-confirm-cancel, .subscription-plan-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border: 0; border-radius: 999px; background: var(--nl-panel-2); color: var(--nl-text); font-weight: 600; text-decoration: none; }
.btn-ghost:hover, .btn-secondary:hover, .btn-telegram:hover, .btn-plan:hover, .subscription-plan-trigger:hover { background: var(--nl-line); color: var(--nl-text); }
.btn-primary { width: 100%; }
.field { margin-bottom: 20px; } .password-field { position: relative; }
.password-field input { padding-right: 54px; }
.password-toggle { position: absolute; top: 3px; right: 4px; display: grid; place-items: center; width: 44px; height: 44px; padding: 10px; border: 0; border-radius: 50%; background: transparent; color: var(--nl-muted); }
.form-hint { font-size: 12px; line-height: 1.6; margin-top: 12px; }
.terms-check, .terms-consent { display: block; margin: 20px 0; color: var(--nl-muted); font-size: 12px; line-height: 1.8; }
.terms-check input, .terms-consent input { margin: 2px 6px 0 0; vertical-align: top; } .terms-check a, .terms-consent a { text-decoration: underline; }
.banner { padding: 16px 18px; margin-bottom: 18px; border: 1px solid var(--nl-line-strong); border-radius: 16px; background: var(--nl-panel); color: var(--nl-muted); overflow-wrap: anywhere; }
.banner.error, .auth-recovery-error, .device-confirm-error, [data-state=error], [data-device-state=error] strong { color: var(--nl-danger); }
.banner.success { color: var(--nl-safe); } .banner.notice { color: var(--nl-muted); }
.is-loading::after { content: ''; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Public homepage */
.landing-header, .landing-main, .landing-footer { width: min(1248px,calc(100% - 80px)); margin-inline: auto; }
.landing-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 96px; }
.landing-nav { display: flex; gap: 32px; }
.landing-nav a { display: flex; align-items: center; min-height: 44px; color: var(--nl-muted); font-size: 14px; }
.landing-login { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; padding: 10px 22px; border-radius: 999px; background: var(--nl-panel-2); color: var(--nl-text); }
.landing-account-indicator { display: inline-flex; align-items: center; justify-content: center; min-width: 0; max-width: 240px; min-height: 44px; padding: 10px 18px; border-radius: 999px; background: var(--nl-panel-2); color: var(--nl-text); font-size: 13px; }
.landing-account-indicator > span { min-width: 0; overflow-wrap: anywhere; } .landing-account-caption { display: none; }
.landing-hero { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); align-items: center; gap: 80px; padding: 88px 0 96px; }
.landing-eyebrow, .landing-kicker, .landing-section-heading > span { display: block; margin-bottom: 18px; color: var(--nl-muted); font-size: 14px; }
.landing-hero h1 { max-width: 720px; font-size: clamp(38px,4.2vw,62px); line-height: 1.12; letter-spacing: -.05em; }
.landing-hero h1 span { color: var(--nl-blue); }
.landing-hero-copy > p { max-width: 540px; margin-top: 24px; font-size: 16px; line-height: 1.75; }
.landing-hero-action { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-top: 32px; }
.landing-hero-action p { font-size: 12px; } .landing-hero-action p strong, .landing-hero-action p span { display: block; }
.landing-hero-action p strong { font-weight: 500; color: var(--nl-text); }
.landing-hero-copy > .landing-session-note { margin-top: 12px; font-size: 12px; } .landing-session-note:empty { display: none; }
.landing-text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 16px; font-size: 14px; }
.landing-route { padding: 28px; background: var(--nl-panel); border: 1px solid var(--nl-line-strong); border-radius: 16px; }
.landing-route ol { list-style: none; margin: 0; padding: 0; }
.landing-route li { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--nl-line); }
.landing-route li > span { display: grid; place-items: center; align-self: flex-start; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 12px; background: var(--nl-panel-2); color: var(--nl-blue); font-size: 13px; }
.landing-route strong { font-size: 15px; } .landing-route p { margin-top: 4px; font-size: 13px; } .landing-route .landing-text-link { margin-top: 20px; }
.landing-section { padding: 72px 0; border-top: 1px solid var(--nl-line); scroll-margin-top: 28px; }
.landing-section-heading { margin-bottom: 32px; } .landing-section-heading h2 { font-size: clamp(28px,3.2vw,42px); } .landing-section-heading p { margin-top: 14px; }
.landing-plan-common { display: flex; flex-wrap: wrap; gap: 12px 24px; color: var(--nl-muted); font-size: 13px; }
.landing-plan-common i { color: var(--nl-safe); font-style: normal; margin-right: 5px; }
.landing-plan-fair-use { margin: 10px 0 24px; font-size: 12px; }
.landing-plans { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.landing-plan { position: relative; display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--nl-line-strong); border-radius: 16px; background: var(--nl-panel); }
.landing-plan.recommended { border-color: var(--nl-blue); }
.landing-plan-period { font-size: 17px; } .landing-plan-price { display: flex; align-items: baseline; gap: 8px; margin: 22px 0 6px; }
.landing-plan-price strong { font-size: 42px; line-height: 1.2; letter-spacing: -.045em; } .landing-plan-price > span { color: var(--nl-muted); }
.landing-plan p { font-size: 13px; margin-bottom: 28px; }
.landing-plan > a { display: grid; place-items: center; min-height: 46px; margin-top: auto; border-radius: 999px; background: var(--nl-panel-2); color: var(--nl-text); font-size: 14px; font-weight: 600; }
.landing-plan.recommended > a { background: var(--nl-text); color: var(--nl-night); }
.landing-plan-badge { position: absolute; top: 16px; right: 18px; color: var(--nl-blue); font-size: 11px; }
.landing-payment-note { max-width: 820px; margin-top: 22px; font-size: 12px; line-height: 1.8; }
.landing-steps { list-style: none; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; padding: 0; margin: 40px 0; }
.landing-steps li { display: flex; gap: 16px; padding: 20px 0; border-top: 1px solid var(--nl-line-strong); }
.landing-steps b { color: var(--nl-blue); font-weight: 500; } .landing-steps strong { display: block; margin-bottom: 8px; }
.landing-steps p, .landing-connection-note p { font-size: 14px; } .landing-connection-note { max-width: 690px; } .landing-connection-note p { margin-top: 8px; }
.landing-network { padding: 32px; border-radius: 16px; background: var(--nl-panel); }
.landing-network h2 { font-size: 20px; } .landing-network p { margin-top: 10px; } .landing-network small { display: block; margin-top: 6px; color: var(--nl-dim); }
.landing-inbounds { margin-top: 24px; }
.landing-inbounds-collapse, .landing-inbounds-disclosure[open] .landing-inbounds-expand { display: none; }
.landing-inbounds-disclosure[open] .landing-inbounds-collapse { display: inline; }
.landing-inbound-row > strong { margin-left: auto; font-size: 11px; font-weight: 500; }
.landing-inbounds-heading { display: flex; align-items: center; gap: 12px; min-height: 50px; border-top: 1px solid var(--nl-line); color: var(--nl-muted); font-size: 13px; }
.landing-inbounds-heading strong { margin-left: auto; color: var(--nl-text); } .landing-inbounds-heading em { color: var(--nl-blue); font-style: normal; }
.landing-inbounds-list { list-style: none; padding: 0; margin: 0; }
.landing-inbound-row { display: flex; align-items: center; gap: 10px; padding: 14px 0; border-top: 1px solid var(--nl-line); color: var(--nl-muted); font-size: 13px; }
.landing-inbound-name { display: inline-flex; align-items: center; gap: 10px; min-width: 0; overflow-wrap: anywhere; } .landing-inbound-name-text { min-width: 0; }
.landing-inbound-row i { width: 6px; height: 6px; margin-left: auto; background: var(--nl-dim); border-radius: 50%; } .landing-inbound-row i.active { background: var(--nl-safe); }
.landing-inbound-status { font-size: 12px; }
.landing-faq { margin-top: 72px; display: grid; grid-template-columns: .75fr 1.25fr; gap: 80px; }
.landing-faq-list details { border-bottom: 1px solid var(--nl-line); }
.landing-faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; }
.landing-faq-list summary::after { content: '+'; color: var(--nl-dim); font-size: 22px; } .landing-faq-list details[open] summary::after { content: '−'; }
.landing-faq-list details p { padding-bottom: 22px; font-size: 14px; line-height: 1.8; }
.landing-final-cta { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin: 24px 0 72px; padding: 36px; border-radius: 16px; background: var(--nl-panel); }
.landing-final-cta h2 { margin: 8px 0 12px; } .landing-final-cta > div > span { color: var(--nl-muted); font-size: 13px; } .landing-final-cta p { font-size: 14px; }
.landing-final-cta small { display: block; margin-top: 10px; text-align: center; color: var(--nl-muted); }
.landing-final-actions { display: grid; justify-items: center; gap: 8px; flex-shrink: 0; max-width: 100%; }
.landing-final-actions .landing-text-link { margin-top: 0; font-size: 12px; }
.landing-footer { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 30px 0 40px; border-top: 1px solid var(--nl-line); color: var(--nl-dim); font-size: 12px; }
.landing-footer .landing-logo { margin-right: auto; } .landing-footer .landing-logo-copy { font-size: 18px; }

.landing-country-flag { width: 21px; height: 14px; flex: 0 0 21px; display: inline-block; overflow: hidden; border: 0px solid rgba(255,255,255,.2); border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,.28); }
.landing-country-flag.flag-fi { background: linear-gradient(90deg,transparent 28%,#003580 28% 43%,transparent 43%),linear-gradient(transparent 36%,#003580 36% 59%,transparent 59%),#fff; }
.landing-country-flag.flag-nl { background: linear-gradient(#ae1c28 0 33.333%,#fff 33.333% 66.666%,#21468b 66.666%); }
.landing-country-flag.flag-pl { background: linear-gradient(#fff 0 50%,#dc143c 50%); }
.landing-country-flag.flag-de { background: linear-gradient(#111 0 33.333%,#dd0000 33.333% 66.666%,#ffce00 66.666%); }
.landing-country-flag.flag-fm { background: radial-gradient(circle at 50% 18%,#fff 0 1px,transparent 1.3px),radial-gradient(circle at 28% 50%,#fff 0 1px,transparent 1.3px),radial-gradient(circle at 72% 50%,#fff 0 1px,transparent 1.3px),radial-gradient(circle at 50% 82%,#fff 0 1px,transparent 1.3px),#75b2dd; }
.landing-country-flag.flag-us { background: linear-gradient(#3c3b6e,#3c3b6e) 0 0/45% 54% no-repeat,repeating-linear-gradient(#b22234 0 1.08px,#fff 1.08px 2.16px); }
.landing-country-flag.flag-gb { background: #012169 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Cpath fill='%23012169' d='M0 0h60v40H0z'/%3E%3Cpath stroke='%23fff' stroke-width='9' d='m0 0 60 40m0-40L0 40'/%3E%3Cpath stroke='%23c8102e' stroke-width='4' d='m0 0 60 40m0-40L0 40'/%3E%3Cpath stroke='%23fff' stroke-width='13' d='M30 0v40M0 20h60'/%3E%3Cpath stroke='%23c8102e' stroke-width='7' d='M30 0v40M0 20h60'/%3E%3C/svg%3E") center/cover no-repeat; }
.landing-country-flag.flag-ch { background: #d52b1e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Cpath fill='%23d52b1e' d='M0 0h60v40H0z'/%3E%3Cpath fill='%23fff' d='M26 8h8v8h8v8h-8v8h-8v-8h-8v-8h8z'/%3E%3C/svg%3E") center/cover no-repeat; }
.landing-country-flag.flag-se { background: linear-gradient(90deg,transparent 30%,#fecb00 30% 43%,transparent 43%),linear-gradient(transparent 41%,#fecb00 41% 58%,transparent 58%),#006aa7; }
.landing-country-flag.flag-ee { background: linear-gradient(#4891d9 0 33.333%,#111 33.333% 66.666%,#fff 66.666%); }
.landing-country-flag.flag-lt { background: linear-gradient(#fdb913 0 33.333%,#006a44 33.333% 66.666%,#c1272d 66.666%); }
.landing-country-flag.flag-cy { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Cpath fill='%23d57800' d='m19 15 6-5 8 1 3-2 6 4-3 3-7 1-5 4-8-2z'/%3E%3Cpath fill='none' stroke='%234e7a35' stroke-width='2' d='M19 27q11 8 22 0M21 25l3 5m0-7 3 8m12-6-3 5m0-7-3 8'/%3E%3C/svg%3E") center/cover no-repeat; }


.landing-country-flag.flag-fr { background: linear-gradient(90deg,#002395 0 33.333%,#fff 33.333% 66.666%,#ed2939 66.666%); }
.landing-country-flag.flag-ru { background: linear-gradient(#fff 0 33.333%,#0039a6 33.333% 66.666%,#d52b1e 66.666%); }
.landing-country-flag.flag-no { background: linear-gradient(90deg,transparent 28%,#00205b 28% 38%,transparent 38%),linear-gradient(transparent 42%,#00205b 42% 58%,transparent 58%),linear-gradient(90deg,transparent 23%,#fff 23% 43%,transparent 43%),linear-gradient(transparent 33%,#fff 33% 67%,transparent 67%),#ba0c2f; }
.landing-country-flag.flag-eu { background: #003399 url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2060%2040%22%3E%3Cpolygon%20fill%3D%22%23fc0%22%20points%3D%2230.00%2C5.80%2030.53%2C7.27%2032.09%2C7.32%2030.86%2C8.28%2031.29%2C9.78%2030.00%2C8.90%2028.71%2C9.78%2029.14%2C8.28%2027.91%2C7.32%2029.47%2C7.27%22%2F%3E%3Cpolygon%20fill%3D%22%23fc0%22%20points%3D%2236.00%2C7.41%2036.53%2C8.88%2038.09%2C8.93%2036.86%2C9.89%2037.29%2C11.39%2036.00%2C10.51%2034.71%2C11.39%2035.14%2C9.89%2033.91%2C8.93%2035.47%2C8.88%22%2F%3E%3Cpolygon%20fill%3D%22%23fc0%22%20points%3D%2240.39%2C11.80%2040.92%2C13.27%2042.48%2C13.32%2041.25%2C14.28%2041.69%2C15.78%2040.39%2C14.90%2039.10%2C15.78%2039.54%2C14.28%2038.30%2C13.32%2039.86%2C13.27%22%2F%3E%3Cpolygon%20fill%3D%22%23fc0%22%20points%3D%2242.00%2C17.80%2042.53%2C19.27%2044.09%2C19.32%2042.86%2C20.28%2043.29%2C21.78%2042.00%2C20.90%2040.71%2C21.78%2041.14%2C20.28%2039.91%2C19.32%2041.47%2C19.27%22%2F%3E%3Cpolygon%20fill%3D%22%23fc0%22%20points%3D%2240.39%2C23.80%2040.92%2C25.27%2042.48%2C25.32%2041.25%2C26.28%2041.69%2C27.78%2040.39%2C26.90%2039.10%2C27.78%2039.54%2C26.28%2038.30%2C25.32%2039.86%2C25.27%22%2F%3E%3Cpolygon%20fill%3D%22%23fc0%22%20points%3D%2236.00%2C28.19%2036.53%2C29.66%2038.09%2C29.71%2036.86%2C30.67%2037.29%2C32.17%2036.00%2C31.29%2034.71%2C32.17%2035.14%2C30.67%2033.91%2C29.71%2035.47%2C29.66%22%2F%3E%3Cpolygon%20fill%3D%22%23fc0%22%20points%3D%2230.00%2C29.80%2030.53%2C31.27%2032.09%2C31.32%2030.86%2C32.28%2031.29%2C33.78%2030.00%2C32.90%2028.71%2C33.78%2029.14%2C32.28%2027.91%2C31.32%2029.47%2C31.27%22%2F%3E%3Cpolygon%20fill%3D%22%23fc0%22%20points%3D%2224.00%2C28.19%2024.53%2C29.66%2026.09%2C29.71%2024.86%2C30.67%2025.29%2C32.17%2024.00%2C31.29%2022.71%2C32.17%2023.14%2C30.67%2021.91%2C29.71%2023.47%2C29.66%22%2F%3E%3Cpolygon%20fill%3D%22%23fc0%22%20points%3D%2219.61%2C23.80%2020.14%2C25.27%2021.70%2C25.32%2020.46%2C26.28%2020.90%2C27.78%2019.61%2C26.90%2018.31%2C27.78%2018.75%2C26.28%2017.52%2C25.32%2019.08%2C25.27%22%2F%3E%3Cpolygon%20fill%3D%22%23fc0%22%20points%3D%2218.00%2C17.80%2018.53%2C19.27%2020.09%2C19.32%2018.86%2C20.28%2019.29%2C21.78%2018.00%2C20.90%2016.71%2C21.78%2017.14%2C20.28%2015.91%2C19.32%2017.47%2C19.27%22%2F%3E%3Cpolygon%20fill%3D%22%23fc0%22%20points%3D%2219.61%2C11.80%2020.14%2C13.27%2021.70%2C13.32%2020.46%2C14.28%2020.90%2C15.78%2019.61%2C14.90%2018.31%2C15.78%2018.75%2C14.28%2017.52%2C13.32%2019.08%2C13.27%22%2F%3E%3Cpolygon%20fill%3D%22%23fc0%22%20points%3D%2224.00%2C7.41%2024.53%2C8.88%2026.09%2C8.93%2024.86%2C9.89%2025.29%2C11.39%2024.00%2C10.51%2022.71%2C11.39%2023.14%2C9.89%2021.91%2C8.93%2023.47%2C8.88%22%2F%3E%3C%2Fsvg%3E") center/cover no-repeat; }

/* Authentication */
.auth-screen { min-height: calc(100dvh - 100px); display: grid; align-items: center; padding: 48px 40px; }
.auth-wrap { display: grid; grid-template-columns: 1fr 440px; align-items: center; gap: 100px; width: min(1120px,100%); margin: 0 auto; }
.auth-brand-link { margin-bottom: 64px; } .auth-kicker { margin-bottom: 18px; color: var(--nl-muted); font-size: 14px; }
.auth-hero h1 { font-size: clamp(34px,3.5vw,50px); } .auth-hero h1 span { color: var(--nl-blue); }
.auth-hero h1 .auth-title-desktop, .auth-hero h1 .auth-title-mobile { color: inherit; }
.auth-title-mobile { display: none; }
.auth-hero p { max-width: 480px; margin-top: 22px; font-size: 15px; line-height: 1.85; } .auth-hero-short { display: none; }
.auth-benefits { display: grid; margin-top: 36px; } .auth-benefits span { padding: 14px 0; border-top: 1px solid var(--nl-line); color: var(--nl-muted); font-size: 14px; }
.auth-card { padding: 28px; border: 1px solid var(--nl-line-strong); border-radius: 16px; background: var(--nl-panel); }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 5px; margin-bottom: 28px; border-radius: 999px; background: var(--nl-deep); }
.auth-tab { min-height: 44px; padding: 8px 12px; border: 0; border-radius: 999px; background: transparent; color: var(--nl-muted); font-size: 14px; }
.auth-tab.active { background: #30343a; color: var(--nl-text); font-weight: 700; box-shadow: inset 0 0 0 1px var(--nl-line-strong); }
.auth-forgot-trigger, .auth-recovery-secondary, .verify-email-resend button { min-height: 44px; padding: 8px 0; border: 0; background: transparent; color: var(--nl-blue); }
.forgot-hint { margin: 4px 0 0; text-align: center; }
.telegram-login-block { margin-top: 20px; padding-top: 22px; border-top: 1px solid var(--nl-line); }
.btn-telegram { width: 100%; min-height: 50px; font-size: 14px; } .telegram-plane { color: var(--nl-blue); }
.auth-page-footer { width: min(1120px,calc(100% - 80px)); margin: 0 auto; padding: 24px 0; display: flex; gap: 24px; border-top: 1px solid var(--nl-line); font-size: 12px; }
.auth-page-footer a { color: var(--nl-muted); } .auth-page-footer a:first-child { margin-right: auto; }
.verify-email-wrap, .password-reset-screen { width: min(480px,calc(100% - 32px)); margin: 56px auto; }
.verify-email-brand, .password-reset-brand { margin-bottom: 40px; }
.verify-email-card, .password-reset-card, .auth-error-card, .device-order-confirmation { padding: 32px; background: var(--nl-panel); border: 1px solid var(--nl-line-strong); border-radius: 16px; }
.verify-email-icon, .auth-recovery-success-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 24px; border-radius: 16px; color: var(--nl-blue); background: var(--nl-panel-2); }
.verify-email-kicker, .password-reset-kicker, .auth-recovery-kicker { display: block; margin-bottom: 12px; font-size: 13px; color: var(--nl-muted); }
.verify-email-card h1, .password-reset-card h1, .auth-error-card h1 { font-size: 28px; }
.verify-email-lead, .password-reset-lead { margin: 18px 0 28px; font-size: 14px; overflow-wrap: anywhere; }
.verify-email-lead strong, .password-reset-lead strong { color: var(--nl-text); }
.verification-code-input { font-size: 28px; letter-spacing: .25em; text-align: center; font-variant-numeric: tabular-nums; }
.verify-email-form .btn-primary { margin-top: 20px; }
.verify-email-divider { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--nl-line); text-align: center; color: var(--nl-muted); font-size: 12px; }
.verify-email-resend { text-align: center; } .verify-email-security { margin: 24px 16px 0; text-align: center; font-size: 12px; }
.password-reset-brand strong { display: block; font-size: 21px; letter-spacing: -.04em; } .password-reset-brand small { display: block; margin-top: 4px; color: var(--nl-muted); }
.password-reset-card .auth-body { display: grid; gap: 12px; }
.password-reset-session-note { display: flex; gap: 12px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--nl-line); color: var(--nl-muted); }
.password-reset-session-note p { font-size: 12px; } .password-reset-session-note span { display: block; margin-top: 5px; }
.auth-error-shell { display: grid; place-items: center; min-height: 100dvh; padding: 24px 16px; } .auth-error-card { width: min(480px,100%); }
.auth-error-status { margin-bottom: 16px; color: var(--nl-muted); } .auth-error-copy, .auth-error-note { margin-top: 20px; font-size: 14px; } .auth-error-action { margin-top: 28px; }
.telegram-confirm-card { width: min(480px,calc(100% - 32px)); margin: 64px auto; padding: 32px; border-radius: 16px; background: var(--nl-panel); }

/* Browser cabinet: wide workspace and compact management column. */
.dashboard-shell { width: min(1248px,calc(100% - 80px)); margin-inline: auto; padding-bottom: 32px; }
.dash-topline { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 96px; background: var(--nl-night); border-bottom: 1px solid var(--nl-line); }
.dashboard-brand .brand-sub { display: none; } .dashboard-brand-copy { display: grid; }
.dash-nav { display: flex; gap: 8px; padding: 5px; border-radius: 999px; background: var(--nl-panel); }
.dash-nav a { display: flex; align-items: center; justify-content: center; min-height: 42px; padding: 8px 18px; border-radius: 999px; color: var(--nl-muted); font-size: 13px; }
.dash-nav a:hover, .dash-nav a[aria-current] { background: var(--nl-panel-2); color: var(--nl-blue); }
.dashboard-account-shortcut { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--nl-muted); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); align-items: start; gap: 32px; padding-top: 36px; }
.dashboard-page-heading { margin-bottom: 24px; } .dashboard-title { color: var(--nl-text); font-size: 28px; font-weight: 650; letter-spacing: -.035em; line-height: 1.25; }
.dashboard-page-heading > h1 + p { margin-top: 6px; font-size: 13px; }
.dashboard-section { scroll-margin-top: 120px; margin-top: 32px; } .dashboard-side-column > .dashboard-section:first-child { margin-top: 0; }
.dashboard-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.dashboard-section-heading h2 { font-size: 21px; } .dashboard-section-heading p { max-width: 400px; font-size: 12px; } .dashboard-section-kicker { display: none; }
.access-passport { padding: 28px; border: 1px solid var(--nl-line-strong); border-radius: 16px; background: var(--nl-panel); }
.access-passport-heading { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.subscription-copy h2 { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; letter-spacing: -.02em; }
.access-passport.active .subscription-copy h2 { color: var(--nl-safe); }
.subscription-lead { margin-top: 8px; font-size: 13px; } .subscription-lead:empty { display: none; }
.access-passport.active:not(.expiring) .subscription-lead { display: none; }
.access-plan-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--nl-panel-2); font-size: 12px; white-space: nowrap; } .access-plan-badge svg { width: 14px; height: 14px; }
.passport-expiry { display: grid; gap: 4px; margin: 28px 0 24px; } .passport-expiry > span { color: var(--nl-muted); font-size: 13px; }
.passport-expiry > strong { font-size: clamp(28px,2.8vw,38px); line-height: 1.3; letter-spacing: -.045em; } .passport-expiry-date { color: var(--nl-muted); } .passport-expiry-empty { display: none; }
.access-passport-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; padding-top: 20px; border-top: 1px solid var(--nl-line); }
:is(.subscription-traffic-used, .subscription-device-stat) { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 10px; align-items: start; }
:is(.subscription-traffic-used, .subscription-device-stat) svg { display: block; margin-top: 8px; color: var(--nl-blue); width: 20px; height: 20px; }
.subscription-traffic-used > div, .subscription-device-limit { display: grid; min-width: 0; gap: 0; margin: 0; }
:is(.subscription-traffic-used, .subscription-device-limit) strong { font-size: 26px; line-height: 1.4; }
:is(.subscription-traffic-used, .subscription-device-limit) span { display: block; color: var(--nl-muted); font-size: 12px; line-height: 1.5; }
.subscription-traffic-summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 14px 0 8px; color: var(--nl-muted); font-size: 11px; }
.subscription-traffic-summary h2 { font-size: 12px; color: var(--nl-muted); font-weight: 400; letter-spacing: 0; }
.subscription-traffic-track { height: 4px; border-radius: 4px; background: var(--nl-night); overflow: hidden; } .subscription-traffic-track > span { display: block; height: 100%; background: var(--nl-blue); border-radius: inherit; }
.subscription-traffic-stats { display: flex; gap: 24px; margin: 12px 0 0; } .subscription-traffic-stats dt { color: var(--nl-dim); font-size: 11px; } .subscription-traffic-stats dd { margin: 4px 0 0; font-size: 12px; }
.access-passport :is(.subscription-traffic-summary, .subscription-traffic-track, .subscription-traffic-stats) { display: none; }
.subscription-meta { margin: 0; padding-left: 24px; border-left: 1px solid var(--nl-line); }
.subscription-device-limit small { color: var(--nl-dim); }
.subscription-traffic-note, .subscription-traffic-notice, .traffic-notice { margin-top: 16px; font-size: 12px; color: var(--nl-muted); }
.access-passport-details > p { margin-top: 16px; font-size: 12px; line-height: 1.8; }
.subscription-primary-action { margin-top: 24px; } .subscription-primary-action > :is(a,button,form), .subscription-primary-action form button { width: 100%; }
.dashboard-primary-btn:hover { background: #fff; color: var(--nl-night); }
.access-passport:not(:has(.subscription-traffic)) .access-passport-details { display: none; }
.access-passport:not(:has(.subscription-traffic,.passport-expiry.history)) :is(.access-plan-badge,.passport-expiry) { display: none; }
.subscription-primary-action .btn-ghost { background: var(--nl-text); color: var(--nl-night); } .subscription-primary-action a svg { width: 18px; }
.access-connection:not(dialog) { margin-top: 12px; } .access-connection-disclosure { border-radius: 16px; background: var(--nl-panel); }
.access-connection-summary { display: flex; gap: 12px; align-items: center; min-height: 76px; padding: 16px 20px; }
.access-connection-summary-icon { color: var(--nl-muted); } .access-connection-summary-copy { flex: 1; }
.access-connection-summary strong { display: block; font-size: 14px; font-weight: 500; } .access-connection-summary small { display: block; margin-top: 3px; color: var(--nl-muted); font-size: 12px; }
.access-connection-chevron { width: 18px; color: var(--nl-dim); }
details[open] > summary .access-connection-chevron, details[open] > summary .renewal-action-chevron { transform: rotate(180deg); }
.access-connection-panel { padding: 4px 20px 20px; container: connection / inline-size; }
.connect-app-actions, .connect-secondary-methods { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.connect-app-actions .btn-happ { display: grid; grid-template-columns: 20px minmax(0,1fr); grid-template-rows: auto auto; align-content: center; align-items: center; gap: 3px 12px; min-height: 72px; padding: 14px 24px; text-align: left; font-size: 14px; line-height: 1.35; }
.connect-app-actions .btn-happ > svg { grid-column: 1; grid-row: 1 / span 2; align-self: center; width: 20px; height: 20px; }
.connect-app-actions .connect-recommended { grid-column: 2; grid-row: 2; color: var(--nl-night); opacity: .65; font-size: 11px; font-weight: 400; }
.connect-app-actions .btn-incy { grid-template-rows: auto; background: var(--nl-panel-2); color: var(--nl-text); }
.connect-app-actions .btn-incy > svg { grid-row: 1; }
.connect-app-action { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; border-radius: 12px; background: var(--nl-panel-2); color: var(--nl-text); }
.connect-app-action strong { display: block; font-size: 14px; } .connect-app-action small { display: block; color: var(--nl-muted); }
.connect-secondary-methods { margin-top: 20px; } .connect-method-index { display: block; margin-bottom: 8px; color: var(--nl-muted); font-size: 11px; }
.connect-secondary-btn, .copy-subscription-btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 60px; padding: 12px 14px; text-align: left; border: 0; border-radius: 12px; background: var(--nl-panel-2); color: var(--nl-text); }
.connect-secondary-btn strong, .connect-secondary-btn small { display: block; } .connect-secondary-btn strong { font-size: 13px; font-weight: 500; } .connect-secondary-btn small { color: var(--nl-muted); font-size: 11px; }
.copy-subscription-copy { flex: 1; text-align: left; } .copy-subscription-copy strong, .copy-subscription-copy small { display: block; }
.copy-subscription-copy strong { font-size: 13px; font-weight: 550; } .copy-subscription-copy small { margin-top: 4px; color: var(--nl-muted); font-size: 11px; font-weight: 400; }
.copy-label-slot { display: grid; }
.copy-label-slot > strong { grid-area: 1 / 1; }
.copy-label-reserve { visibility: hidden; }
.subscription-secret-warning, .qr-secret-note { display: flex; align-items: start; gap: 10px; margin-top: 18px; color: var(--nl-muted); font-size: 11px; }
.subscription-secret-warning svg, .qr-secret-note svg { width: 16px; height: 16px; } .subscription-secret-warning strong { font-weight: 500; }
.dashboard-compact-panel, .subscription-plan-entry { background: var(--nl-panel); border: 0; border-radius: 16px; }
.dashboard-addon-stack { margin-top: 8px; } .dashboard-addon-stack > * + * { margin-top: 8px; }
.dashboard-compact-row, .subscription-plan-entry, .telegram-status-row, .referral-entry { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 18px; }
.dashboard-compact-main { display: flex; align-items: center; gap: 12px; flex: 1; }
.dashboard-compact-icon, .account-row-icon { display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 32px; color: var(--nl-muted); }
.dashboard-compact-copy { display: block; } .dashboard-compact-copy strong { display: block; font-size: 13px; font-weight: 550; line-height: 1.5; }
.dashboard-compact-copy small, .dashboard-compact-copy > span { display: block; margin-top: 4px; color: var(--nl-muted); font-size: 11px; } .dashboard-compact-copy > span { display: none; }
.dashboard-compact-aside { flex-shrink: 0; font-size: 12px; }
.subscription-plan-trigger { min-height: 40px; padding: 8px 14px; color: var(--nl-blue); background: var(--nl-panel-2); font-size: 12px; }
.renewal-summary-action { display: flex; align-items: center; gap: 5px; color: var(--nl-blue); } .dashboard-compact-toggle svg { width: 18px; height: 18px; }
.traffic-action-open, details[open] .traffic-action-closed { display: none; } details[open] .traffic-action-open { display: inline; }
.renewal-options { padding: 4px 18px 20px; }
.device-management-surface { padding: 0 20px; border: 1px solid var(--nl-line-strong); border-radius: 16px; background: var(--nl-panel); } .device-management-state { padding-block: 20px; }
.device-management-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 0 14px; } [data-device-count] { color: var(--nl-muted); font-size: 12px; font-weight: 400; }
.device-clear-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 0 8px 8px; border: 0; background: transparent; color: var(--nl-muted); font-size: 12px; }
.device-clear-icon { width: 16px; height: 16px; background: currentColor; mask: var(--device-delete-icon) center/contain no-repeat; }
.device-management-list { list-style: none; margin: 0; padding: 0; }
.device-management-row { display: grid; grid-template-columns: 24px minmax(0,1fr) 44px; gap: 4px 14px; align-items: center; padding: 18px 0; border-top: 1px solid var(--nl-line); }
.device-management-icon { grid-column: 1; grid-row: 1 / span 2; color: var(--nl-muted); }
.device-management-copy { grid-column: 2; grid-row: 1; overflow-wrap: anywhere; font-size: 14px; } .device-management-copy strong { font-weight: 550; }
.device-management-activity { grid-column: 2; grid-row: 2; color: var(--nl-muted); font-size: 12px; } .device-activity-item { display: block; } .device-activity-item small { display: inline; font: inherit; }
.device-row-delete { grid-column: 3; grid-row: 1 / span 2; display: grid; place-items: center; width: 44px; min-height: 44px; padding: 10px; border: 0; border-radius: 50%; background: transparent; color: var(--nl-muted); }
.device-row-delete:hover { background: var(--nl-panel-2); color: var(--nl-danger); }
.device-row-delete-icon { display: block; width: 20px; height: 20px; background: currentColor; mask: var(--device-delete-icon) center/contain no-repeat; }
.device-management-empty { display: flex; gap: 16px; align-items: center; min-height: 130px; } .device-management-empty strong { font-size: 14px; }
.device-management-empty p, .device-management-error p { margin-top: 8px; font-size: 12px; } .device-empty-icon { color: var(--nl-muted); } .device-retry-btn { margin-top: 16px; }
.device-management-status { display: block; color: var(--nl-muted); font-size: 13px; } .device-skeleton { display: block; height: 44px; margin-top: 14px; background: var(--nl-panel-2); border-radius: 12px; }
.account-surface { padding: 0 18px; background: var(--nl-panel); border-radius: 16px; }
.account-email-row { display: flex; align-items: center; gap: 12px; padding: 20px 0; } .account-row-copy { flex: 1; overflow-wrap: anywhere; }
.account-row-copy small { display: block; color: var(--nl-muted); } .account-row-copy strong { display: block; font-size: 13px; font-weight: 500; } .account-verified { color: var(--nl-safe); font-size: 10px; }
.account-surface .telegram-status-row, .account-surface .telegram-link-panel, .referral-entry { padding: 20px 0; background: transparent; border: 0; border-top: 1px solid var(--nl-line); border-radius: 0; text-align: left; }
.telegram-sync-state { color: var(--nl-safe); font-size: 11px; } .telegram-status-short { display: none; }
.referral-entry-action { font-size: 0; color: var(--nl-blue); } .referral-entry-action svg { width: 18px; }
.account-actions { padding: 12px 0; border-top: 1px solid var(--nl-line); }
.tg-panel { display: flex; align-items: start; gap: 12px; padding: 20px 0; border-top: 1px solid var(--nl-line); }
.tg-icon { color: var(--nl-muted); } .tg-content h2 { font-size: 14px; letter-spacing: 0; } .tg-content p { margin-top: 6px; font-size: 12px; } .btn-telegram-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; font-size: 12px; }
.logout-btn { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 0; border: 0; background: transparent; color: var(--nl-muted); font-size: 12px; } .logout-btn svg { width: 16px; }
.dashboard-footer { display: flex; align-items: center; justify-content: center; gap: 20px; padding-top: 56px; color: var(--nl-dim); font-size: 12px; }
.footer-shield { color: var(--nl-muted); } .footer-shield svg { width: 18px; height: 20px; } .dashboard-footer .footer-shield { display: none; }
.dashboard-toast { position: fixed; z-index: 100; bottom: 24px; left: 50%; transform: translate(-50%,20px); max-width: calc(100% - 32px); padding: 12px 20px; border: 1px solid var(--nl-line-strong); border-radius: 16px; background: var(--nl-panel-2); color: var(--nl-text); font-size: 13px; opacity: 0; pointer-events: none; overflow-wrap: anywhere; }
.dashboard-toast.show, .dashboard-toast.visible, .dashboard-toast.is-visible { opacity: 1; transform: translate(-50%,0); }
.mobile-primary-btn { display: none; }
.trial-block { padding: 24px; border-radius: 16px; background: var(--nl-panel); margin-bottom: 12px; } .trial-block h3 { margin: 12px 0 8px; font-size: 20px; } .trial-block p { font-size: 13px; } .trial-icon { color: var(--nl-blue); }
.trial-block form { margin-top: 20px; } .trial-block .btn-trial { width: 100%; }
.trial-restriction-banner { display: grid; grid-template-columns: 22px minmax(0,1fr); align-items: start; gap: 12px; padding: 18px; margin-bottom: 16px; background: var(--nl-panel); border: 1px solid var(--nl-line-strong); border-radius: 16px; color: var(--nl-muted); }
.trial-restriction-copy { overflow-wrap: anywhere; } .trial-restriction-copy > span { display: block; margin-top: 8px; font-size: 13px; }
.trial-restriction-banner h2, .trial-restriction-banner strong { font-size: 14px; color: var(--nl-text); } .trial-restriction-banner p { margin-top: 6px; font-size: 13px; }
.trial-restriction-actions { grid-column: 2; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.trial-restriction-primary { min-height: 44px; padding: 10px 16px; border: 0; border-radius: 999px; background: var(--nl-panel-2); font-size: 12px; }
.trial-restriction-secondary { display: inline-flex; min-height: 44px; align-items: center; font-size: 12px; }
.payment-pending, .pending-payment, .purchase-progress { position: relative; padding: 20px; margin-top: 16px; border-radius: 16px; background: var(--nl-panel); font-size: 13px; overflow-wrap: anywhere; }
.payment-pending h3, .purchase-progress h2 { font-size: 17px; margin-bottom: 10px; } .payment-pending .btn, .payment-pending .btn-primary { margin-top: 16px; } .purchase-progress p { margin-top: 8px; }
.pending-payment-main { display: flex; align-items: start; gap: 14px; } .pending-payment-icon { color: var(--nl-muted); } .pending-info h2 { font-size: 18px; margin-bottom: 10px; } .btn-pay-continue { margin-top: 18px; background: var(--nl-panel-2); color: var(--nl-blue); font-size: 13px; }
.purchase-progress button { min-width: 44px; min-height: 44px; border: 0; border-radius: 999px; background: var(--nl-panel-2); }

/* Optional purchases reuse server quotes and existing forms. */
.device-purchase-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin: 12px 0 20px; } .device-purchase-heading strong { display: block; font-size: 14px; }
.device-purchase-kicker { display: block; color: var(--nl-muted); font-size: 11px; margin-bottom: 6px; } .device-unit-price { color: var(--nl-text); font-size: 16px; white-space: nowrap; } .device-unit-price small { display: block; color: var(--nl-muted); font-size: 11px; }
.device-custom-card { display: grid; gap: 14px; margin: 18px 0 0; } .device-custom-copy label { margin-bottom: 3px; color: var(--nl-text); font-size: 13px; } .device-custom-copy small { display: block; color: var(--nl-muted); font-size: 11px; }
.device-custom-controls { display: grid; grid-template-columns: minmax(0,192px) auto; justify-content: start; gap: 10px; } .device-custom-controls button { font-size: 12px; }
.device-slider-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.device-slider-controls output { display: grid; place-items: center; min-width: 0; min-height: 64px; color: var(--nl-text); font-size: 48px; line-height: 1.1; font-weight: 600; font-variant-numeric: tabular-nums; }
.device-slider-controls { display: grid; grid-template-columns: 52px minmax(64px,96px) 52px; justify-content: center; align-items: center; gap: 16px; }
.device-slider-scale { min-width: 0; }
button.device-slider-step { display: grid; place-items: center; width: 52px; height: 52px; min-height: 52px; padding: 0; border: 1px solid var(--nl-line-strong); border-radius: 50%; background: var(--nl-panel-2); color: var(--nl-text); }
.device-slider-step svg { width: 18px; height: 18px; stroke-width: 1.8; }
.device-slider-step:disabled { opacity: .35; }
/* A range has its own track and thumb; field and focus surfaces stay transparent. */
input.device-slider, input.device-slider:focus { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 48px; min-height: 48px; margin: 4px 0 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none; cursor: pointer; touch-action: pan-y; }
.device-slider::-webkit-slider-runnable-track { height: 12px; border-radius: 999px; background: linear-gradient(to right, var(--nl-blue) 0 var(--device-slider-fill, 0%), var(--nl-line-strong) var(--device-slider-fill, 0%) 100%); }
.device-slider::-moz-range-track { height: 12px; border-radius: 999px; background: var(--nl-line-strong); }
.device-slider::-moz-range-progress { height: 12px; border-radius: 999px; background: var(--nl-blue); }
.device-slider::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 28px; height: 28px; margin-top: -8px; border: 0; border-radius: 50%; background: var(--nl-text); transition: transform 120ms ease; }
.device-slider::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--nl-text); transition: transform 120ms ease; }
.device-slider:active::-webkit-slider-thumb { transform: scale(1.12); }
.device-slider:active::-moz-range-thumb { transform: scale(1.12); }
.device-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--nl-panel), 0 0 0 5px var(--nl-blue); }
.device-slider:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--nl-panel), 0 0 0 5px var(--nl-blue); }
.device-slider-bounds { display: flex; justify-content: space-between; margin: 0 14px; color: var(--nl-muted); font-size: 11px; font-variant-numeric: tabular-nums; pointer-events: none; }
.device-slider-bounds span { position: relative; flex: 0 0 24px; margin: 0 -12px; text-align: center; }
.device-slider-bounds span::before { content: ''; position: absolute; top: -26px; left: 10px; width: 4px; height: 4px; border-radius: 50%; background: var(--nl-muted); }
.device-slider-bounds .is-filled::before { background: color-mix(in srgb, var(--nl-text) 65%, transparent); }
.device-slider-bounds [aria-current="true"] { color: var(--nl-blue); font-weight: 700; }
.device-slider-bounds [aria-current="true"]::before { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .device-slider::-webkit-slider-thumb { transition: none; }
  .device-slider::-moz-range-thumb { transition: none; }
  .device-slider:active::-webkit-slider-thumb { transform: none; }
  .device-slider:active::-moz-range-thumb { transform: none; }
}
.device-change-summary { color: var(--nl-muted); font-size: 12px; } .device-quote-row { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; } .device-quote-row strong { color: var(--nl-text); white-space: nowrap; font-size: 14px; }
.device-quote-timing { display: block; margin-top: 10px; font-size: 11px; } .device-custom-card > [type=submit] { justify-self: start; width: 192px; }
.device-selection-status { margin: 16px 0; } .device-selection-facts { margin: 0; font-size: 12px; } .device-selection-facts > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; }
.device-selection-facts dt { color: var(--nl-muted); } .device-selection-facts dd { max-width: 55%; margin: 0; text-align: right; font-weight: 600; } .device-selection-reason { margin-top: 12px; color: var(--nl-muted); font-size: 12px; }
.device-lifecycle-note { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--nl-line); } .device-lifecycle-note p { margin: 6px 0 0; font-size: 11px; } .device-topup-options > .device-selection-status { max-width: 360px; }
/* Keep the expanded device task together, including in narrow desktop columns. */
.device-topup-options { container: device-change / inline-size; }
.device-topup-options > .device-selection-status { margin: 0 0 16px; }
.device-topup-options .device-selection-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.device-topup-options .device-selection-facts > div { align-items: center; padding: 0; }
.device-topup-options .device-selection-facts > div + div { padding-left: 16px; border-left: 1px solid var(--nl-line); }
.device-topup-options .device-custom-card { max-width: 432px; margin: 0; gap: 12px; }
.device-change-field { display: grid; gap: 8px; }
.device-change-field .device-custom-copy label { display: block; margin: 0 0 4px; }
.device-change-actions { display: grid; grid-template-columns: minmax(0,1fr); width: 100%; }
.device-change-actions .btn-plan { min-height: 44px; padding: 10px 12px; font-size: 13px; }
.device-change-actions [data-device-quote] { background: transparent; color: var(--nl-blue); }
.device-change-actions [data-device-quote]:hover { background: var(--nl-panel-2); }
.device-topup-options > .device-lifecycle-note { max-width: 432px; margin-top: 12px; padding-top: 12px; }
.device-topup-options > .device-lifecycle-note p { margin: 0; line-height: 1.6; }
.traffic-topup-options .device-custom-card { max-width: 432px; margin: 0; gap: 12px; }
.traffic-quick-options { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.traffic-quick-option { display: grid; place-items: center; min-width: 0; min-height: 52px; padding: 6px 4px; border: 1px solid var(--nl-line); border-radius: 12px; background: var(--nl-panel-2); font-size: 12px; }
.traffic-quick-option small { color: var(--nl-muted); font-size: 11px; }
.traffic-quick-option[aria-pressed="true"] { border-color: var(--nl-blue); color: var(--nl-blue); }
.traffic-selection-total { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--nl-muted); font-variant-numeric: tabular-nums; }
.traffic-selection-total strong { color: var(--nl-text); white-space: nowrap; font-size: 17px; }
.traffic-price-note { font-size: 11px; }
.traffic-slider-ticks { position: relative; height: 20px; margin: 0 14px; color: var(--nl-muted); font-size: 11px; font-variant-numeric: tabular-nums; pointer-events: none; }
.traffic-slider-ticks span { position: absolute; transform: translateX(-50%); }
.traffic-slider-ticks span::before { content: ''; position: absolute; left: 50%; top: -26px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--nl-muted); }
.traffic-slider-ticks [aria-current="true"] { color: var(--nl-blue); font-weight: 700; }
.traffic-slider-ticks [aria-current="true"]::before { visibility: hidden; }
.device-order-confirmation { width: min(560px,calc(100% - 32px)); margin: 48px auto; overflow-wrap: anywhere; } .device-order-confirmation h1 { font-size: 26px; }
.device-order-details { display: grid; gap: 16px; margin: 28px 0; } .device-order-details > div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 20px; }
.device-order-details dt { flex: 1 1 180px; color: var(--nl-muted); font-size: 13px; } .device-order-details dd { margin: 0; font-size: 14px; } .device-order-total { border-top: 1px solid var(--nl-line); padding-top: 20px; } .device-order-total dd { font-size: 24px; }
.device-order-note { margin-bottom: 24px; font-size: 12px; } .device-order-confirmation .btn { width: 100%; } .device-order-back { display: block; padding: 12px; margin-top: 8px; text-align: center; font-size: 13px; }

/* Native dialogs: a single task, scrollable content, sticky checkout footer. */
dialog { width: min(520px,calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 64px); margin: auto; padding: 0; border: 1px solid var(--nl-line-strong); border-radius: 18px; background: var(--nl-panel); color: var(--nl-text); overscroll-behavior: contain; }
dialog::backdrop { background: rgba(0,0,0,.68); } dialog[open] { animation: sheet-in 180ms ease-out; }
dialog.access-connection { width: min(620px,calc(100% - 40px)); margin: auto; padding: 0; box-shadow: 0 24px 80px rgba(0,0,0,.35); }
dialog.access-connection::backdrop, .subscription-plan-dialog::backdrop { background: rgba(5,7,10,.65); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.access-connection-header { position: sticky; z-index: 1; top: 0; padding: 32px 76px 24px 32px; background: var(--nl-panel); }
.access-connection-kicker { display: block; margin-bottom: 10px; color: var(--nl-muted); font-size: 12px; }
.access-connection-header h2 { margin-bottom: 8px; padding: 0; font-size: 26px; line-height: 1.25; }
.access-connection-header p { color: var(--nl-muted); line-height: 1.6; }
.access-connection-close { position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 44px; height: 44px; padding: 12px; border: 0; border-radius: 50%; background: var(--nl-panel-2); color: var(--nl-muted); }
.access-connection-close:hover { color: var(--nl-text); }
dialog.access-connection .access-connection-summary { display: none; }
dialog.access-connection .access-connection-panel { padding: 0 32px 32px; }
dialog.access-connection .connect-app-actions .btn-happ:not(.btn-incy) { grid-column: 1 / -1; }
dialog.access-connection .connect-secondary-methods { padding-top: 20px; border-top: 1px solid var(--nl-line); }
dialog.access-connection .connect-secondary-method { display: flex; flex-direction: column; }
dialog.access-connection .connect-secondary-method > button { flex: 1; }
dialog.access-connection .subscription-secret-warning { padding-top: 20px; border-top: 1px solid var(--nl-line); line-height: 1.7; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.subscription-plan-card, .auth-recovery-card, .referral-dialog-card, .qr-dialog-card, .device-confirm-card { position: relative; padding: 32px; }
:is(.subscription-plan-close,.auth-recovery-close,.referral-dialog-close,.qr-dialog-close,.device-dialog-close) { position: absolute; z-index: 2; top: 14px; right: 14px; display: grid; place-items: center; min-width: 44px; height: 44px; padding: 10px; border: 0; border-radius: 50%; background: var(--nl-panel-2); color: var(--nl-muted); }
dialog h2 { padding-right: 24px; margin-bottom: 14px; font-size: 25px; } dialog p { font-size: 13px; line-height: 1.8; }
.subscription-plan-kicker, .referral-dialog-kicker, .qr-dialog-kicker, .device-confirm-kicker { display: block; color: var(--nl-muted); font-size: 12px; margin: 0 0 14px; }
.subscription-plan-dialog { width: min(600px,calc(100% - 32px)); max-height: min(calc(100dvh - 64px),calc(var(--checkout-height,100dvh) - 32px)); padding: 6px; overflow: hidden; }
.subscription-plan-dialog[open] { display: flex; flex-direction: column; }
.subscription-plan-card { min-height: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; border-radius: 12px; scrollbar-width: thin; scrollbar-color: var(--nl-line-strong) transparent; }
.subscription-sheet-heading { position: sticky; z-index: 1; top: 0; padding: 22px 70px 20px 28px; border-bottom: 1px solid var(--nl-line); background: var(--nl-panel); border-radius: 18px 18px 0 0; color: var(--nl-muted); font-size: 13px; }
.subscription-plan-close { position: sticky; float: right; top: 12px; margin: -54px 14px 0 0; }
.subscription-plan-scroll { padding: 28px; } .subscription-includes { margin: 24px 0 28px; } .subscription-includes h3 { font-size: 14px; margin-bottom: 12px; }
.subscription-benefits { display: grid; grid-template-columns: 1fr 1fr; list-style: none; padding: 0; margin: 0; gap: 18px 20px; } .subscription-benefits li { display: flex; align-items: start; gap: 10px; }
.subscription-benefits svg { width: 18px; height: 18px; color: var(--nl-muted); } .subscription-benefits strong { display: block; font-size: 12px; font-weight: 550; } .subscription-benefits small { display: block; margin-top: 4px; color: var(--nl-muted); font-size: 11px; }
.subscription-duration-fieldset { padding: 0; margin: 0; border: 0; min-width: 0; } .subscription-duration-fieldset legend { margin-bottom: 14px; font-size: 14px; font-weight: 600; }
.plans-grid { display: grid; gap: 10px; }
.plan-card { position: relative; display: block; margin: 0; padding: 16px 18px 16px 46px; border: 1px solid var(--nl-line-strong); border-radius: 12px; background: transparent; color: var(--nl-text); cursor: pointer; }
.plan-card:has(.plan-choice-input:checked) { border-color: var(--nl-blue); background: var(--nl-panel-2); }
.plan-choice-input { position: absolute; width: 18px !important; height: 18px !important; left: 16px; top: 18px; margin: 0; } .plan-choice-marker { display: none; }
.plan-meta { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; } .plan-name, .plan-price { font-size: 16px; font-weight: 600; } .plan-monthly, .plan-saving { font-size: 11px; color: var(--nl-muted); } .plan-saving { text-align: right; } .plan-saving-empty { visibility: hidden; } .recommended-badge { display: none; }
.subscription-device-selection { margin: 24px 0; } .subscription-checkout-details { margin-top: 20px; }
.subscription-promo label { color: var(--nl-text); font-size: 13px; } .subscription-promo label span { color: var(--nl-muted); }
.subscription-promo-controls { display: flex; gap: 10px; } .subscription-promo-controls input { flex: 1; } .subscription-promo-controls button { min-height: 44px; padding: 8px 14px; border: 0; border-radius: 12px; background: var(--nl-panel-2); color: var(--nl-blue); font-size: 12px; }
.subscription-promo > small { display: block; margin-top: 10px; color: var(--nl-muted); font-size: 11px; }
.subscription-order-summary { margin-top: 24px; } .subscription-order-summary > div { display: flex; justify-content: space-between; gap: 18px; margin: 8px 0; color: var(--nl-muted); font-size: 12px; }
.subscription-order-summary [data-order-effective] { margin: 10px 0; font-size: 11px; } .subscription-order-summary .subscription-order-total { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--nl-line); font-size: 19px; color: var(--nl-text); }
.subscription-checkout-footer { position: sticky; bottom: 0; z-index: 1; padding: 18px 28px 24px; border-top: 1px solid var(--nl-line); background: var(--nl-panel); }
.subscription-checkout-meta { margin-bottom: 14px; color: var(--nl-muted); font-size: 12px; } .subscription-checkout-meta small { display: block; margin-top: 4px; font-size: 10px; } .subscription-checkout-submit { width: 100%; }
.subscription-device-control { display: grid; gap: 8px; } .subscription-device-control label { margin: 0; color: var(--nl-text); font-size: 13px; } .subscription-device-control small { color: var(--nl-muted); font-size: 11px; }
.auth-recovery-card { padding-top: 58px; } .auth-recovery-card form { margin-top: 24px; } .auth-recovery-card .auth-recovery-error { margin: 12px 0; } .auth-recovery-success .btn-primary { margin-top: 24px; } .auth-recovery-secondary { display: block; width: 100%; margin-top: 8px; } .auth-recovery-telegram-hint { margin-top: 14px; }
.referral-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin: 28px 0; padding-bottom: 24px; border-bottom: 1px solid var(--nl-line); }
.referral-stats dt { font-size: 11px; color: var(--nl-muted); } .referral-stats dd { margin: 8px 0 0; font-size: 24px; font-weight: 600; } .referral-stats dd small { font-size: 11px; color: var(--nl-muted); }
.referral-content h3 { margin-bottom: 10px; font-size: 17px; } .referral-link-row { display: flex; align-items: center; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--nl-line); }
.referral-link-copy { flex: 1; overflow-wrap: anywhere; font-size: 12px; } .referral-link-copy small { display: block; margin-bottom: 6px; color: var(--nl-muted); }
.referral-copy-btn { min-width: 44px; min-height: 44px; display: grid; place-items: center; padding: 8px; border: 0; border-radius: 12px; background: var(--nl-panel-2); color: var(--nl-blue); }
.referral-copy-btn .copy-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.referral-conditions { margin-top: 28px; } .referral-conditions ol { padding-left: 20px; color: var(--nl-muted); font-size: 12px; } .referral-conditions li { margin-top: 12px; }
.qr-dialog-card, .device-confirm-card { padding-top: 58px; } .qr-image-frame { display: grid; place-items: center; min-height: 240px; margin: 24px 0; } .qr-image-frame img { width: 240px; height: 240px; padding: 12px; border-radius: 12px; background: #fff; }
.device-confirm-actions { display: flex; gap: 12px; margin-top: 24px; } .device-confirm-actions > * { flex: 1; }
.qr-dialog-actions { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; margin-top: 24px; }
.qr-dialog-actions .copy-subscription-btn { min-height: 64px; border-radius: 12px; }
.qr-dialog-actions [data-qr-close] { background: transparent; color: var(--nl-blue); }
.device-confirm-submit { min-height: 48px; padding: 10px 16px; border: 0; border-radius: 999px; background: var(--nl-danger); color: var(--nl-night); font-weight: 600; } .device-confirm-error { margin-top: 16px; }

/* Connection, instructions, and terms use the same stylesheet. */
.public-page .page, .public-page .shell, .terms-page .page { width: min(1248px,calc(100% - 80px)); margin-inline: auto; }
.public-page .header, .public-page .site-header, .terms-page .topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 96px; border-bottom: 1px solid var(--nl-line); }
.public-page .brand-icon { width: 36px; height: 36px; color: var(--nl-blue); } .public-page .ready { color: var(--nl-muted); font-size: 12px; }
.public-page .hero { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); align-items: center; gap: 80px; padding: 72px 0 88px; }
.public-page .eyebrow { margin-bottom: 18px; color: var(--nl-muted); font-size: 13px; } .public-page h1 { font-size: clamp(36px,4vw,56px); line-height: 1.12; letter-spacing: -.045em; } .public-page h1 span { color: var(--nl-blue); }
.public-page .lead, .public-page .hero-copy > p { margin-top: 24px; font-size: 16px; line-height: 1.8; }
.public-page .connect-flow { list-style: none; margin: 28px 0; padding: 0; color: var(--nl-muted); font-size: 14px; }
.public-page .connect-flow li { display: flex; gap: 16px; padding: 18px 0; border-top: 1px solid var(--nl-line); }
.public-page .connect-flow b { color: var(--nl-blue); font-size: 12px; font-weight: 500; padding-top: 3px; }
.public-page .connect-flow strong, .public-page .connect-flow small { display: block; } .public-page .connect-flow strong { color: var(--nl-text); font-size: 14px; font-weight: 550; } .public-page .connect-flow small { margin-top: 6px; color: var(--nl-muted); font-size: 12px; }
.public-page .actions { display: grid; gap: 12px; max-width: 440px; margin-top: 28px; }
.public-page .button { justify-content: flex-start; text-align: left; padding: 16px 20px; } .public-page .button-text { flex: 1; } .public-page .button-title, .public-page .button-sub { display: block; }
.public-page .button-title { font-size: 14px; } .public-page .button-sub { font-size: 11px; font-weight: 400; opacity: .75; } .public-page .arrow { width: 18px; }
.public-page .button.secondary { justify-content: center; background: transparent; color: var(--nl-blue); }
.public-page .secret-note { display: flex; gap: 12px; margin-top: 22px; font-size: 12px; } .public-page .secret-note > span:first-child { display: none; }
.public-page .connect-card, .public-page .route-card { padding: 28px; background: var(--nl-panel); border: 1px solid var(--nl-line-strong); border-radius: 16px; }
.public-page .connect-card > h2 { margin-bottom: 14px; font-size: 23px; } .public-page .connect-card > p { font-size: 13px; }
.public-page .card-top, .public-page .route-top { display: flex; align-items: center; gap: 14px; padding-bottom: 24px; border-bottom: 1px solid var(--nl-line); } .public-page .card-device, .public-page .route-icon { color: var(--nl-blue); }
.public-page .card-top-copy { flex: 1; } .public-page .card-top-copy small, .public-page .route-top small { display: block; color: var(--nl-muted); font-size: 12px; } .public-page .card-top strong, .public-page .route-top strong { display: block; font-size: 14px; } .public-page .card-status { color: var(--nl-safe); font-size: 11px; }
.public-page .ready-state { padding: 32px 0; } .public-page .shield { color: var(--nl-safe); margin-bottom: 20px; } .public-page .shield svg { width: 40px; height: 46px; }
.public-page .ready-label, .public-page .card-detail { color: var(--nl-muted); font-size: 12px; } .public-page .card-title { display: block; font-size: 28px; margin: 8px 0; }
.public-page .route { display: flex; justify-content: space-between; gap: 20px; padding-top: 20px; border-top: 1px solid var(--nl-line); color: var(--nl-muted); font-size: 12px; }
.public-page .footer, .public-page .site-footer { display: flex; gap: 24px; justify-content: space-between; padding: 28px 0 36px; border-top: 1px solid var(--nl-line); color: var(--nl-dim); font-size: 12px; } .public-page .privacy { display: inline-flex; gap: 8px; }
.public-page .site-footer code { font: inherit; overflow-wrap: anywhere; }
.public-page .hero-actions { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-top: 28px; } .public-page .hero-hint { font-size: 12px; color: var(--nl-muted); } .public-page .hero-hint strong { display: block; color: var(--nl-text); margin-bottom: 5px; }
.public-page .route-list { list-style: none; margin: 12px 0 0; padding: 0; } .public-page .route-list li { display: flex; align-items: center; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--nl-line); } .public-page .route-list li:last-child { border: 0; }
.public-page .route-list b { color: var(--nl-blue); font-size: 12px; font-weight: 500; } .public-page .route-list strong, .public-page .route-list small { display: block; font-size: 13px; } .public-page .route-list small { margin-top: 4px; color: var(--nl-muted); font-size: 11px; } .public-page .route-check { margin-left: auto; color: var(--nl-blue); font-size: 11px; } .public-page .secure-chip { display: none; }
.public-page .guide-nav { display: flex; gap: 24px; padding-block: 20px 0; font-size: 12px; } .public-page .guide-nav a { min-height: 44px; display: flex; align-items: center; }
.public-page .guide-nav > span { align-self: center; color: var(--nl-muted); }
.public-page .content-section { padding: 64px 0; border-top: 1px solid var(--nl-line); } .public-page .section-heading { margin-bottom: 32px; } .public-page .section-heading > span { color: var(--nl-muted); font-size: 13px; } .public-page .section-heading h2 { margin: 12px 0; font-size: 32px; } .public-page .section-heading p { font-size: 14px; }
.public-page .steps, .public-page .guide-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; list-style: none; margin: 0; padding: 0; } .public-page .step, .public-page .guide-card { padding-top: 24px; border-top: 1px solid var(--nl-line-strong); }
.public-page .step-num, .public-page .platform { display: block; margin-bottom: 24px; color: var(--nl-blue); font-size: 13px; } .public-page .step h3, .public-page .guide-card h3 { margin-bottom: 12px; font-size: 18px; } .public-page .step p, .public-page .guide-card p { font-size: 14px; line-height: 1.8; }
.public-page .check-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } .public-page .check-item { display: flex; gap: 14px; padding: 24px 0; border-top: 1px solid var(--nl-line); } .public-page .check-icon { color: var(--nl-safe); } .public-page .check-item p { margin-top: 10px; font-size: 14px; }
.public-page .support-note { padding: 22px; margin-top: 20px; border-radius: 16px; background: var(--nl-panel); color: var(--nl-muted); font-size: 13px; } .public-page .support-note > span { display: none; }
.terms-page .hero { margin: 64px 0; max-width: 960px; } .terms-page .hero h1 { font-size: clamp(32px,4vw,52px); overflow-wrap: anywhere; } .terms-page .hero h1 span { color: var(--nl-text); }
.terms-page .eyebrow { margin-bottom: 18px; font-size: 13px; color: var(--nl-muted); } .terms-page .lead { max-width: 700px; margin-top: 24px; font-size: 14px; }
.terms-page .pill-row { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 20px; } .terms-page .pill { color: var(--nl-dim); font-size: 12px; } .terms-page .terms-shield, .terms-page .progress-bar { display: none; }
.terms-page .layout { display: grid; grid-template-columns: 240px minmax(0,1fr); align-items: start; gap: 64px; }
.terms-page .toc { position: sticky; top: 24px; display: grid; padding: 16px; background: var(--nl-panel); border-radius: 16px; } .terms-page .toc-title { padding: 8px 12px 14px; color: var(--nl-muted); font-size: 13px; }
.terms-page .toc a { padding: 12px; min-height: 44px; border-radius: 12px; color: var(--nl-muted); font-size: 12px; } .terms-page .toc a.active, .terms-page .toc a:hover { background: var(--nl-panel-2); color: var(--nl-blue); }
.terms-page .notice-card { display: flex; align-items: start; gap: 16px; padding: 24px; background: var(--nl-panel); border-radius: 16px; } .terms-page .notice-icon { color: var(--nl-muted); } .terms-page .notice-text { font-size: 13px; }
.terms-page .content > section { padding: 40px 0; border-bottom: 1px solid var(--nl-line); scroll-margin-top: 24px; } .terms-page .sec-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 24px; } .terms-page .sec-num { flex: 0 0 28px; color: var(--nl-blue); font-size: 12px; } .terms-page h2 { font-size: 24px; }
.terms-page ul { padding-left: 20px; margin: 0; } .terms-page li { padding-left: 4px; margin: 14px 0; color: var(--nl-muted); font-size: 14px; line-height: 1.8; } .terms-page li strong { color: var(--nl-text); font-weight: 550; }
.terms-page .fair-use-intro { font-size: 14px; } .terms-page .fair-use-threshold { margin: 20px 0; font-size: 14px; } .terms-page .fair-use-threshold strong { font-weight: 550; color: var(--nl-text); }
.terms-page .fair-use-details { margin: 0; } .terms-page .fair-use-details > div { padding: 20px 0; border-top: 1px solid var(--nl-line); } .terms-page .fair-use-details dt { margin-bottom: 8px; font-size: 14px; font-weight: 600; } .terms-page .fair-use-details dd { margin: 0; color: var(--nl-muted); font-size: 14px; line-height: 1.8; }
.terms-page .cta { margin-top: 32px; } .terms-page footer { display: flex; gap: 24px; justify-content: space-between; padding: 48px 0; color: var(--nl-dim); font-size: 12px; }
.back-btn, .back-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13px; }

/* Responsive compositions, not an additional visual theme. */
@container connection (max-width: 520px) {
  .connect-app-actions, .connect-secondary-methods { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 1100px) {
  .auth-wrap { grid-template-columns: 1fr 420px; gap: 48px; }
  .landing-hero, .public-page .hero { gap: 40px; }
  .dashboard-grid { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 24px; }
  .dashboard-shell { width: calc(100% - 48px); }
  .dashboard-compact-row, .subscription-plan-entry { flex-wrap: wrap; }
  .subscription-plan-trigger { margin-left: 36px; }
  .device-custom-controls { grid-template-columns: 1fr; }
  .device-custom-controls [data-device-quote] { justify-self: start; }
  .account-email-row { flex-wrap: wrap; } .account-verified { margin-left: 36px; }
  .landing-hero h1 br { display: none; }
}
@media (max-width: 900px) {
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-side-column { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 24px; }
  .dashboard-side-column > .dashboard-section { margin-top: 0; }
  .auth-wrap { grid-template-columns: 1fr 400px; gap: 32px; } .auth-screen { padding-inline: 24px; } .auth-hero h1 { font-size: 32px; }
  .landing-header, .landing-main, .landing-footer, .public-page .page, .public-page .shell, .terms-page .page { width: calc(100% - 48px); }
  .landing-header { flex-wrap: wrap; gap: 16px; padding-block: 16px; }
  .landing-nav { order: 3; width: 100%; justify-content: center; }
  .landing-hero, .public-page .hero { grid-template-columns: 1fr 1fr; gap: 28px; }
  .landing-route, .landing-plan { padding: 22px; } .landing-hero h1, .public-page h1 { font-size: 38px; }
  .landing-hero-action { align-items: start; } .landing-hero-action p { width: 100%; } .landing-faq { gap: 40px; }
  .terms-page .layout { grid-template-columns: 200px minmax(0,1fr); gap: 32px; } .terms-page .hero h1 { font-size: 42px; }
}
@media (max-width: 767px) {
  html { scroll-padding-top: 24px; }
  .landing-header, .landing-main, .landing-footer, .public-page .page, .public-page .shell, .terms-page .page { width: calc(100% - 32px); }
  .landing-header { min-height: 80px; gap: 12px; padding-block: 0; flex-wrap: wrap; } .landing-logo-copy, .brand-name { font-size: 21px; }
  .landing-account-indicator { padding: 10px 16px; }
  .landing-account-indicator > span:not(.landing-account-caption) { display: none; }
  .landing-account-indicator > .landing-account-caption { display: inline; }
  .landing-nav { order: 3; width: 100%; justify-content: space-between; gap: 16px; padding: 0 0 10px; border-bottom: 1px solid var(--nl-line); } .landing-nav a { font-size: 12px; min-height: 36px; }
  .landing-login { min-height: 40px; font-size: 13px; padding: 8px 18px; }
  .landing-hero, .public-page .hero { grid-template-columns: 1fr; padding: 44px 0 56px; gap: 36px; }
  .landing-eyebrow { margin-bottom: 16px; font-size: 12px; } .landing-hero h1 { font-size: clamp(34px,9.6vw,48px); line-height: 1.15; }
  .landing-hero-copy > p { font-size: 14px; margin-top: 20px; } .landing-hero-action { margin-top: 24px; gap: 14px; } .landing-hero-action > a { width: 100%; } .landing-hero-action p { font-size: 12px; }
  .landing-route { padding: 22px; } .landing-route li { padding: 16px 0; }
  .landing-section { padding: 48px 0; } .landing-section-heading h2 { font-size: 30px; } .landing-section-heading h2 br { display: none; } .landing-section-heading > span { margin-bottom: 12px; font-size: 12px; } .landing-section-heading p { font-size: 14px; }
  .landing-plan-common { display: grid; gap: 10px; font-size: 12px; } .landing-plans { grid-template-columns: 1fr; gap: 12px; }
  .landing-plan { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; padding: 22px; } .landing-plan-period { font-size: 16px; }
  .landing-plan-price { margin: 0; grid-column: 2; grid-row: 1 / 3; align-self: center; } .landing-plan-price strong { font-size: 32px; }
  .landing-plan p { grid-column: 1; margin: 0 0 8px; font-size: 11px; } .landing-plan > a { grid-column: 1 / -1; margin-top: 6px; min-height: 44px; }
  .landing-plan-badge { position: static; grid-column: 1 / -1; grid-row: 1; margin-bottom: 8px; } .landing-plan.recommended .landing-plan-price { grid-row: 2 / 4; }
  .landing-steps { grid-template-columns: 1fr; gap: 8px; margin: 28px 0; }
  .landing-network { padding: 22px; } .landing-network h2 { font-size: 19px; } .landing-network p { font-size: 13px; } .landing-network small { font-size: 11px; }
  .landing-faq { display: block; margin-top: 48px; } .landing-faq-list summary { font-size: 14px; } .landing-faq-list details p { font-size: 13px; }
  .landing-final-cta { flex-direction: column; align-items: stretch; padding: 24px; margin: 0 0 48px; gap: 24px; } .landing-final-cta h2 { font-size: 25px; } .landing-final-cta .landing-primary-btn { width: 100%; }
  .landing-footer { gap: 16px 24px; } .landing-footer .landing-logo { width: 100%; }
  .auth-screen { display: block; padding: 28px 16px 32px; min-height: auto; } .auth-wrap { display: block; max-width: 480px; }
  .auth-brand-link { margin-bottom: 24px; } .auth-brand-link .brand-sub, .auth-kicker, .auth-benefits { display: none; }
  .auth-hero { margin: 0 4px 20px; } .auth-hero h1 { font-size: 26px; } .auth-hero h1 br { display: none; } .auth-title-desktop, .auth-hero p { display: none; } .auth-title-mobile { display: inline; }
  .auth-card { padding: 22px 20px; } .auth-tabs { margin-bottom: 24px; }
  .auth-page-footer { width: calc(100% - 40px); flex-wrap: wrap; gap: 10px 20px; font-size: 11px; } .auth-page-footer a:first-child { flex-basis: 100%; }
  .verify-email-wrap, .password-reset-screen { margin: 28px auto; } .verify-email-brand, .password-reset-brand { margin-bottom: 28px; }
  .verify-email-card, .password-reset-card, .auth-error-card { padding: 24px 20px; } .verify-email-card h1, .password-reset-card h1 { font-size: 25px; }
  .dashboard-shell { width: calc(100% - 32px); padding-bottom: calc(186px + env(safe-area-inset-bottom)); }
  .dash-topline { position: relative; min-height: 78px; border: 0; gap: 12px; } .dashboard-brand .brand-name { font-size: 21px; }
  .dash-nav { position: fixed; z-index: 40; left: 50%; bottom: max(12px,env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); width: min(528px,calc(100% - 32px)); gap: 0; padding: 8px; border: 1px solid var(--nl-line-strong); border-radius: 999px; background: var(--nl-deep); }
  .dash-nav a { min-height: 48px; padding: 8px 3px; font-size: 11px; }
  .dash-nav:not(:has(a[href="#devices"])) { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .dashboard-grid { display: block; padding-top: 8px; } .dashboard-page-heading { margin: 10px 2px 22px; } .dashboard-title { font-size: 25px; } .dashboard-page-heading > h1 + p { font-size: 12px; }
  .dashboard-side-column { display: block; } .dashboard-side-column > .dashboard-section { margin-top: 32px; } .dashboard-section { scroll-margin-top: 24px; }
  .dashboard-section-heading { align-items: start; margin-bottom: 16px; } .dashboard-section-heading h2 { font-size: 21px; } .dashboard-section-heading p { display: none; }
  .access-passport { padding: 20px 18px; } .access-passport-heading { gap: 10px; } .subscription-copy h2 { font-size: 15px; }
  .access-plan-badge { padding: 4px 10px; font-size: 11px; } .access-plan-badge svg { display: none; }
  .passport-expiry { margin-top: 24px; } .passport-expiry strong { font-size: 30px; } .passport-expiry-date { font-size: 11px; }
  .access-passport-facts { gap: 16px; } .subscription-meta { padding-left: 16px; } .subscription-device-stat { gap: 8px; }
  .subscription-traffic-used strong, .subscription-device-limit strong { font-size: 23px; } .subscription-traffic-used { gap: 8px; } .subscription-traffic-stats { gap: 14px; } .subscription-traffic-stats dt { font-size: 10px; }
  .subscription-traffic-note { font-size: 11px; } .subscription-primary-action > a, .subscription-primary-action form button { font-size: 14px; }
  .dashboard-compact-row, .subscription-plan-entry { flex-wrap: nowrap; padding: 18px 16px; } .subscription-plan-trigger { margin-left: 0; } .renewal-summary-action > span { display: none; }
  .device-management-surface { padding-inline: 16px; } .device-management-row { gap: 4px 10px; } .device-management-copy { font-size: 13px; } .device-management-activity, .device-clear-btn { font-size: 11px; }
  .account-email-row { flex-wrap: nowrap; } .account-verified { margin: 0; }
  .device-custom-controls { grid-template-columns: minmax(0,192px) auto; } .device-custom-card > [type=submit] { width: 100%; justify-self: stretch; }
  .mobile-primary-btn { position: fixed; z-index: 35; bottom: calc(94px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; width: min(496px,calc(100% - 64px)); box-shadow: 0 4px 24px rgba(0,0,0,.3); font-size: 14px; }
  .mobile-primary-btn svg { width: 18px; height: 18px; } body:has(dialog[open]) .mobile-primary-btn, .mobile-primary-btn.is-covered { visibility: hidden; }
  .dashboard-toast { bottom: calc(158px + env(safe-area-inset-bottom)); } .dashboard-footer { flex-wrap: wrap; gap: 12px 20px; padding-top: 40px; font-size: 11px; }
  dialog { width: 100%; max-height: calc(100dvh - 20px); margin: auto 0 0; border-radius: 18px 18px 0 0; border-bottom: 0; } .subscription-plan-dialog { width: 100%; }
  .access-connection-header { padding: 28px 72px 24px 24px; }
  .access-connection-header h2 { font-size: 24px; }
  dialog.access-connection .access-connection-panel { padding: 0 24px max(28px,env(safe-area-inset-bottom)); }
  .subscription-plan-scroll { padding: 24px 20px; } .subscription-sheet-heading { padding-left: 20px; } .subscription-checkout-footer { padding: 16px 20px max(20px,env(safe-area-inset-bottom)); }
  .referral-dialog-card { padding: 60px 20px 28px; } .auth-recovery-card, .qr-dialog-card, .device-confirm-card { padding: 62px 24px 28px; } dialog h2 { font-size: 24px; }
  .subscription-benefits { gap: 16px; } .subscription-benefits li { gap: 8px; } .subscription-benefits strong { font-size: 11px; }
  .plan-card { padding: 16px 14px 16px 44px; } .plan-name, .plan-price { font-size: 15px; } .plan-meta { gap: 6px 10px; } .plan-monthly, .plan-saving { font-size: 10px; }
  .referral-stats { gap: 12px; } .referral-stats dt { font-size: 10px; } .referral-stats dd { font-size: 22px; }
  .qr-dialog-actions { grid-template-columns: 1fr; gap: 4px; }
  .public-page .header, .public-page .site-header, .terms-page .topbar { min-height: 80px; gap: 16px; } .public-page .brand, .public-page .logo, .terms-page .brand { font-size: 20px; } .public-page .ready { font-size: 11px; }
  .public-page h1 { font-size: 36px; } .public-page .lead, .public-page .hero-copy > p { font-size: 14px; }
  .public-page .connect-card, .public-page .route-card { padding: 22px; } .public-page .guide-nav { gap: 16px; flex-wrap: wrap; font-size: 11px; }
  .public-page .hero-actions { display: block; } .public-page .hero-actions .primary-btn { width: 100%; } .public-page .hero-hint { margin-top: 16px; }
  .public-page .content-section { padding: 48px 0; } .public-page .section-heading h2 { font-size: 27px; } .public-page .steps, .public-page .guide-grid, .public-page .check-panel { grid-template-columns: 1fr; gap: 24px; }
  .public-page .footer, .public-page .site-footer { flex-direction: column; gap: 12px; font-size: 11px; } .public-page .back-link { font-size: 11px; }
  .terms-page .hero { margin: 40px 0; } .terms-page .hero h1 { font-size: 31px; } .terms-page .hero h1 br { display: none; }
  .terms-page .layout { display: block; } .terms-page .toc { position: static; margin-bottom: 28px; grid-template-columns: 1fr 1fr; padding: 12px; } .terms-page .toc-title { grid-column: 1 / -1; } .terms-page .toc a { font-size: 11px; }
  .terms-page .notice-card { padding: 20px; } .terms-page .content > section { padding: 32px 0; } .terms-page .sec-head { gap: 12px; } .terms-page h2 { font-size: 22px; } .terms-page li { font-size: 13px; } .terms-page footer { flex-wrap: wrap; gap: 12px; font-size: 11px; }
}
@media (max-width: 359px) {
  .account-email-row { flex-wrap: wrap; } .account-verified { margin-left: 36px; }
  .dashboard-compact-row, .subscription-plan-entry { gap: 10px; } .subscription-plan-entry { flex-wrap: wrap; } .subscription-plan-trigger { margin-left: 36px; } .dashboard-compact-icon { flex-basis: 20px; width: 20px; }
  .device-custom-controls { grid-template-columns: 1fr; } .device-custom-controls [data-device-quote] { justify-self: stretch; }
  .access-passport-facts { gap: 12px; } .subscription-device-limit small { font-size: 10px; }
  .subscription-benefits { grid-template-columns: 1fr; gap: 14px; } .subscription-benefits strong { font-size: 12px; } .qr-dialog-actions, .device-confirm-actions { flex-direction: column; }
}
/* Shared control feedback: individual scale preserves dock positioning. */
:is(button,a[class*="btn"],a.button,a.cta,summary) { transition: background-color 140ms ease, color 140ms ease, filter 140ms ease, scale 120ms ease, opacity 140ms ease, box-shadow 140ms ease; }
@media (hover: hover) and (pointer: fine) {
  :is(button,a[class*="btn"],a.button,a.cta,summary):not(:disabled):not([aria-disabled="true"]):not(.is-loading):not([aria-busy="true"]):hover { filter: brightness(1.12); }
}
:is(button,a[class*="btn"],a.button,a.cta,summary):not(:disabled):not([aria-disabled="true"]):not(.is-loading):not([aria-busy="true"]):is(:active,.web-pressed) { scale: .975; filter: brightness(.86); box-shadow: inset 0 1px 3px rgba(0,0,0,.2); }
:is(button,a[class*="btn"],a.button,a.cta,summary):is(:disabled,[aria-disabled="true"]) { cursor: not-allowed; }
:is(button,a[class*="btn"],a.button,a.cta,summary):is(.is-loading,[aria-busy="true"]) { cursor: progress; opacity: .78; }
.is-loading::after { flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  :is(button,a[class*="btn"],a.button,a.cta,summary) { scale: 1 !important; }
}
@media (prefers-reduced-transparency: reduce) { dialog::backdrop, dialog.access-connection::backdrop, .subscription-plan-dialog::backdrop { background: rgba(0,0,0,.9); backdrop-filter: none; -webkit-backdrop-filter: none; } }
/* Product choice uses the existing checkout surface and native radio semantics. */
.subscription-products, .landing-product-terms { display:flex; flex-wrap:wrap; gap:8px; padding:0; border:0; margin:16px 0; min-width:0; }
.subscription-products legend, .landing-product-terms legend { margin-bottom:8px; }
.subscription-products label, .landing-product-terms label { display:flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:8px 16px; border:1px solid var(--dash-border, #41454e); border-radius:12px; cursor:pointer; }
.subscription-products label { flex:1; }
.subscription-products label:has(:checked), .landing-product-terms label:has(:checked) { border-color:var(--nl-blue, #7eb4ff); }
.subscription-products input, .landing-product-terms input { width:18px; height:18px; margin:0; accent-color:var(--nl-blue, #7eb4ff); }
.product-servers-trigger { min-height:44px; padding:8px 0; background:transparent; border:0; color:var(--nl-blue, #7eb4ff); text-align:left; }
[data-product-servers-view] li { padding:8px 0; overflow-wrap:anywhere; }
[data-product-description] { overflow-wrap:anywhere; }
[data-product-servers-view][hidden], [data-checkout-selection][hidden], .subscription-checkout-footer[hidden] { display:none; }
.subscription-device-controls:not(.device-slider-controls) { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.subscription-device-controls:not(.device-slider-controls) button { width:44px; height:44px; border:1px solid var(--dash-border, #41454e); border-radius:12px; background:var(--nl-panel-2, #23262c); color:inherit; }
.subscription-device-controls:not(.device-slider-controls) output { font-weight:650; text-align:center; }
.subscription-device-selection input[type=range]:not(.device-slider) { width:100%; min-height:48px; margin:0; padding:0; accent-color:var(--nl-blue, #7eb4ff); background:transparent; }
.landing-product-plans { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.landing-product-plans .landing-plan { min-width:0; }
.landing-product-plans .landing-plan > p { min-height:3em; overflow-wrap:anywhere; }
.landing-product-plans .landing-plan-price strong { font-size:clamp(28px,4vw,44px); overflow-wrap:anywhere; }
.subscription-plan-dialog[open] { height:min(880px,calc(var(--checkout-height,100dvh) - 32px)); }
.subscription-plan-dialog .subscription-plan-card { display:flex; flex:1; flex-direction:column; min-height:0; height:100%; overflow:hidden; }
.subscription-plan-dialog .subscription-sheet-heading { flex-shrink:0; }
.subscription-plan-dialog .subscription-plan-close { position:absolute; top:12px; right:14px; margin:0; }
.subscription-plan-dialog .subscription-checkout-form { display:flex; flex:1; flex-direction:column; min-height:0; overflow:hidden; margin:0; }
.subscription-plan-dialog .subscription-plan-scroll { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; scroll-padding-bottom:20px; }
.subscription-plan-dialog .subscription-checkout-footer { position:relative; flex-shrink:0; bottom:auto; }
@media(max-width:600px) { .landing-product-plans { grid-template-columns:1fr; gap:16px; } }

.subscription-product-traffic { display:none; }
.subscription-order-summary > div[hidden] { display:none; }
.product-switch-entry { margin-top:8px; flex-wrap:nowrap; }
.product-switch-entry .dashboard-compact-main { min-width:0; }
.product-switch-entry .product-switch-action { min-height:44px; margin:0; white-space:nowrap; }
.product-switch-dialog { max-width:560px; }
.product-switch-dialog[open] { height:fit-content; max-height:calc(100dvh - 32px); }
.product-switch-dialog .subscription-plan-card { height:auto; }
.product-switch-dialog form { display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.product-switch-dialog .subscription-plan-scroll { padding-top:48px; }
.product-switch-dialog .subscription-checkout-footer { display:grid; gap:12px; }
.product-switch-dialog .btn { min-height:48px; white-space:normal; }
.product-switch-summary { line-height:1.55; overflow-wrap:anywhere; }