/* ============================================================
   Nova — V2Board Theme
   大气 / 稳重 / 科技感 深色设计系统 (Akile 风格)
   ============================================================ */

:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --bg0: #070a12;
    --bg1: #0a0e18;
    --bg2: #0d1220;
    --panel: rgba(255, 255, 255, 0.028);
    --panel-solid: #0f1422;
    --panel-solid-2: #121828;
    --field-bg: #192232;
    --field-hover: #202b3d;
    --line: #667791;
    --line-soft: rgba(148, 163, 184, 0.07);

    --primary: #2f7bff;
    --primary-hi: #5b97ff;
    --primary-deep: #1e5fe0;
    --primary-action: #1e5fe0;
    --primary-grad: linear-gradient(135deg, #4a9eff 0%, #2f6bff 55%, #2a5be0 100%);
    --primary-soft: rgba(47, 123, 255, 0.12);
    --primary-glow: rgba(47, 123, 255, 0.35);
    --chart-b: #22d3ee;

    --text: #e8edf7;
    --text-2: #9aa5bb;
    --text-3: #98a4bc;

    --green: #34d399;
    --green-soft: rgba(52, 211, 153, 0.12);
    --amber: #fbbf24;
    --amber-soft: rgba(251, 191, 36, 0.12);
    --red: #f87171;
    --red-soft: rgba(248, 113, 113, 0.12);

    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 18px;
    --r-xl: 18px;
    --space-1: 4px; --space-2: 8px; --space-3: 12px;
    --space-4: 16px; --space-6: 24px; --space-8: 32px;

    --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-2: 0 12px 32px rgba(0, 0, 0, 0.45);
    --shadow-glow: 0 8px 28px rgba(47, 123, 255, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.18);

    --nav-h: 64px;
    --side-w: 240px;
    --font: "Inter", "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: "SFMono-Regular", "JetBrains Mono", Consolas, "Liberation Mono", monospace;
}

/* ---- accent variants (admin selectable) ---- */
.theme-cyan {
    --primary: #0bc5d4;
    --primary-hi: #3ee0ee;
    --primary-deep: #0899a6;
    --primary-action: #067580;
    --primary-grad: linear-gradient(135deg, #3ee0ee 0%, #0bc5d4 55%, #0793a8 100%);
    --primary-soft: rgba(11, 197, 212, 0.12);
    --primary-glow: rgba(11, 197, 212, 0.32);
    --chart-b: #818cf8;
}
.theme-violet {
    --primary: #8b5cf6;
    --primary-hi: #a78bfa;
    --primary-deep: #6d3ae8;
    --primary-action: #6d3ae8;
    --primary-grad: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 55%, #6d3ae8 100%);
    --primary-soft: rgba(139, 92, 246, 0.14);
    --primary-glow: rgba(139, 92, 246, 0.35);
    --chart-b: #22d3ee;
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg0);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
body.nova-boot { overflow: hidden; }
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
input, textarea, select { font-family: inherit; }
::selection { background: var(--primary-soft); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #232c42; border-radius: 8px; border: 2px solid var(--bg0); }
::-webkit-scrollbar-thumb:hover { background: #2e3a58; }
::-webkit-scrollbar-track { background: transparent; }

.nova-splash {
    position: fixed; inset: 0; z-index: 200;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
    background: var(--bg0);
    transition: opacity .18s ease, visibility .18s;
}
.nova-splash.is-hide { opacity: 0; visibility: hidden; pointer-events: none; }
.nova-splash-mark { animation: splashFloat 2.2s ease-in-out infinite; filter: drop-shadow(0 10px 30px rgba(47, 123, 255, .45)); }
@keyframes splashFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.nova-splash-bar { width: 148px; height: 3px; border-radius: 99px; background: rgba(148, 163, 184, 0.14); overflow: hidden; }
.nova-splash-bar i { display: block; width: 40%; height: 100%; border-radius: 99px; background: var(--primary-grad); animation: splashBar 1.1s ease-in-out infinite; }
@keyframes splashBar { 0% { transform: translateX(-110%); } 100% { transform: translateX(380%); } }

#app { min-height: 100vh; }
.n-hidden { display: none !important; }
.n-view { animation: viewIn .18s ease both; }
/* transform-only entrance: content stays fully visible even if animation never ticks */
@keyframes viewIn { from { transform: translateY(10px); } to { transform: none; } }

/* Guest hero is the only grid background. */
.l-hero { position: relative; isolation: isolate; }
.l-hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        linear-gradient(rgba(148, 163, 184, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.05) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(#000, transparent);
    -webkit-mask-image: linear-gradient(#000, transparent);
}

/* ============================================================
   Buttons / forms / misc
   ============================================================ */
.n-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 20px; border-radius: var(--r-sm); border: 1px solid transparent;
    font-size: 14px; font-weight: 600; line-height: 1.4; cursor: pointer;
    transition: background-color 180ms, color 180ms, border-color 180ms; white-space: nowrap; user-select: none;
    color: var(--text); background: transparent;
}
.n-btn svg { width: 20px; height: 20px; flex: none; }
.n-btn:active { transform: translateY(1px); }
.n-btn:disabled { opacity: .55; cursor: not-allowed; }
.n-btn-primary { background: var(--primary-action); color: #fff; box-shadow: 0 4px 14px rgba(47,123,255,.18); border: 1px solid var(--primary-action); }
.n-btn-primary:hover { background: var(--primary-action); border-color: var(--primary-action); }
.n-btn-ghost { background: rgba(148, 163, 184, 0.08); border-color: transparent; }
.n-btn-ghost:hover { background: rgba(148, 163, 184, 0.14); border-color: transparent; }
.n-btn-outline { border-color: rgba(47, 123, 255, 0.55); color: var(--primary-hi); background: var(--primary-soft); }
.n-btn-outline:hover { border-color: var(--primary); }
.n-btn-danger { background: var(--red-soft); color: var(--red); border-color: rgba(248, 113, 113, 0.3); }
.n-btn-danger:hover { background: rgba(248, 113, 113, 0.2); }
.n-btn-lg { padding: 13px 30px; font-size: 15px; border-radius: var(--r-sm); }
.n-btn-sm { padding: 6px 13px; font-size: 13px; border-radius: var(--r-sm); }
.n-btn-block { width: 100%; }

.n-field { margin-bottom: 18px; }
.n-field > label { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 8px; letter-spacing: .02em; }
.n-field > label a { color: var(--primary-hi); font-weight: 500; cursor: pointer; }
.n-input-wrap { position: relative; display: flex; align-items: center; }
.n-input-wrap > svg { position: absolute; left: 13px; width: 16px; height: 16px; color: var(--text-3); pointer-events: none; }
.n-input, .n-select, .n-textarea {
    width: 100%; min-height: 44px; background: var(--field-bg);
    border: 1px solid transparent; border-radius: 10px;
    color: var(--text); font-size: 14px; padding: 11px 13px;
    appearance: none; -webkit-appearance: none; outline: none; box-shadow: none;
    transition: box-shadow .18s, background-color .18s;
}
.n-input-wrap .n-input { padding-left: 38px; }
.n-input::placeholder, .n-textarea::placeholder { color: var(--text-3); }
.n-input:hover, .n-select:hover, .n-textarea:hover { background-color: var(--field-hover); }
.n-input:focus, .n-select:focus, .n-textarea:focus {
    background-color: var(--field-hover);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.n-textarea { min-height: 96px; resize: vertical; }
.n-select {
    cursor: pointer; color-scheme: dark; padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%239aa5bb' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 13px center; background-size: 18px 18px;
}
.n-select option, .n-select optgroup { background-color: var(--panel-solid); color: var(--text); }
.n-select option:checked { background-color: var(--primary-deep); color: #fff; }
.n-select option:disabled { color: var(--text-3); }
.n-select-wrap { position: relative; }

.n-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; line-height: 1.5; }
.n-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.n-badge-green { background: var(--green-soft); color: var(--green); }
.n-badge-amber { background: var(--amber-soft); color: var(--amber); }
.n-badge-red { background: var(--red-soft); color: var(--red); }
.n-badge-blue { background: var(--primary-soft); color: var(--primary-hi); }
.n-badge-gray { background: rgba(148, 163, 184, 0.12); color: var(--text-2); }

/* switch */
.n-switch { position: relative; width: 40px; height: 22px; border-radius: 99px; background: rgba(148, 163, 184, 0.2); cursor: pointer; transition: background .2s; flex: none; }
.n-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.n-switch.on { background: var(--primary-grad); }
.n-switch.on::after { transform: translateX(18px); }

/* tooltip-ish */
[data-tip] { position: relative; }
[data-tip]:hover::after {
    content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    background: #1a2236; border: 1px solid var(--line-soft); color: var(--text);
    padding: 5px 10px; border-radius: 8px; font-size: 12px; white-space: nowrap; z-index: 60;
    box-shadow: var(--shadow-2);
}

/* ============================================================
   Toasts / Modal
   ============================================================ */
.n-toasts { position: fixed; top: 18px; right: 18px; z-index: 160; display: flex; flex-direction: column; gap: 10px; width: min(360px, calc(100vw - 36px)); }
.n-toast {
    display: flex; gap: 10px; align-items: flex-start;
    background: rgba(16, 22, 38, 0.92); backdrop-filter: blur(14px);
    border: 1px solid var(--line-soft); border-radius: 12px; padding: 12px 14px;
    box-shadow: var(--shadow-2); font-size: 13.5px; line-height: 1.5;
    animation: toastIn .28s cubic-bezier(.21, 1.02, .73, 1) both;
}
/* transform-only entrances keep content visible even if animations never tick */
@keyframes toastIn { from { transform: translateX(30px); } to { transform: none; } }
.n-toast.is-out { opacity: 0; transform: translateX(24px); transition: all .18s ease; }
.n-toast svg { width: 17px; height: 17px; flex: none; margin-top: 2px; }
.n-toast-ok svg { color: var(--green); }
.n-toast-err svg { color: var(--red); }
.n-toast-info svg { color: var(--primary-hi); }

.n-modal-mask {
    position: fixed; inset: 0; z-index: 150;
    background: rgba(4, 7, 14, 0.7); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.n-modal-mask[hidden] { display: none; }
.n-modal {
    width: 100%; max-width: 520px; max-height: calc(100vh - 60px);
    display: flex; flex-direction: column;
    background: var(--panel-solid); border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: var(--r-lg); box-shadow: var(--shadow-2);
    animation: modalIn .26s cubic-bezier(.21, 1.02, .73, 1) both; overflow: hidden;
}
.n-modal.n-modal-lg { max-width: 720px; }
@keyframes modalIn { from { transform: translateY(18px) scale(.985); } to { transform: none; } }
.n-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line-soft); }
.n-modal-head h3 { margin: 0; font-size: 16px; font-weight: 700; }
.n-modal-close { width: 30px; height: 30px; border-radius: 8px; border: none; background: transparent; color: var(--text-3); cursor: pointer; display: grid; place-items: center; transition: all .15s; }
.n-modal-close:hover { background: rgba(148, 163, 184, 0.12); color: var(--text); }
.n-modal-close svg { width: 16px; height: 16px; }
.n-modal-body { padding: 20px; overflow-y: auto; }
.n-modal-foot { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--line-soft); }

/* ============================================================
   Landing — Navbar
   ============================================================ */
.l-nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-h);
    display: flex; align-items: center;
    background: rgba(7, 10, 18, 0.72);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid transparent;
    transition: border-color .18s, background .18s;
}
.l-nav.is-solid { border-bottom-color: var(--line-soft); background: rgba(7, 10, 18, 0.88); }
.l-nav-in { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 26px; }
.l-brand { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.l-brand img { width: 30px; height: 30px; border-radius: 8px; }
.l-brand .mark { width: 30px; height: 30px; flex: none; filter: drop-shadow(0 4px 14px rgba(47, 123, 255, .5)); }
.l-links { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.l-links a {
    padding: 7px 13px; border-radius: 9px; font-size: 14px; color: var(--text-2);
    font-weight: 500; transition: all .16s; cursor: pointer;
}
.l-links a:hover { color: var(--text); background: rgba(148, 163, 184, 0.09); }
.l-nav-cta { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.l-nav-cta .login { font-size: 14px; font-weight: 600; color: var(--text-2); padding: 8px 12px; border-radius: 9px; cursor: pointer; transition: color .15s; }
.l-nav-cta .login:hover { color: var(--text); }
.l-nav-burger { display: none; margin-left: auto; width: 38px; height: 38px; border: 0; background: transparent; border-radius: 10px; color: var(--text); cursor: pointer; place-items: center; }
.l-nav-burger svg { width: 18px; height: 18px; }
.l-mobile-menu {
    position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 99;
    background: rgba(8, 11, 20, 0.97); backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line-soft); padding: 10px 20px 18px;
    display: flex; flex-direction: column; gap: 2px;
    animation: viewIn .25s ease both;
}
.l-mobile-menu a { padding: 12px 10px; border-radius: 10px; font-size: 15px; color: var(--text-2); cursor: pointer; }
.l-mobile-menu a:active { background: rgba(148, 163, 184, 0.08); }
.l-mobile-menu .mm-cta { display: flex; gap: 10px; margin-top: 12px; }
.l-mobile-menu .mm-cta .n-btn { flex: 1; }

/* ============================================================
   Landing — Hero
   ============================================================ */
.l-hero { position: relative; padding: calc(var(--nav-h) + var(--safe-top) + 74px) 0 96px; overflow: hidden; }
.l-hero-in { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; align-items: center; }
.l-hero-copy .eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; border-radius: 99px; font-size: 13px; font-weight: 600; color: var(--primary-hi);
    background: var(--primary-soft); border: 1px solid rgba(47, 123, 255, 0.28);
    margin-bottom: 22px;
}
.l-hero-copy .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.l-hero-copy h1 {
    margin: 0 0 18px; font-size: clamp(34px, 4.6vw, 54px); line-height: 1.18;
    font-weight: 800; letter-spacing: -.015em;
}
.l-hero-copy h1 .grad {
    background: linear-gradient(92deg, #5ba2ff 0%, #2f7bff 45%, #7aa8ff 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.l-hero-copy .sub { font-size: 16.5px; color: var(--text-2); max-width: 560px; margin: 0 0 26px; }
.l-hero-checks { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-bottom: 34px; }
.l-hero-checks span { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); font-weight: 500; }
.l-hero-checks svg { width: 16px; height: 16px; color: var(--green); flex: none; }
.l-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* hero visual — layered glass cards */
.l-hero-art { position: relative; min-height: 460px; }
.ha-orbit {
    position: absolute; top: 50%; left: 50%; width: 560px; height: 560px;
    transform: translate(-50%, -50%); border-radius: 50%;
    border: 1px dashed rgba(148, 163, 184, 0.14);
    animation: spinSlow 60s linear infinite;
}
.ha-orbit::before, .ha-orbit::after {
    content: ""; position: absolute; width: 10px; height: 10px; border-radius: 50%;
    background: var(--primary); box-shadow: 0 0 14px var(--primary-glow);
}
.ha-orbit::before { top: -5px; left: 50%; }
.ha-orbit::after { bottom: 8%; right: 8%; background: var(--green); box-shadow: 0 0 12px rgba(52, 211, 153, .5); }
@keyframes spinSlow { to { transform: translate(-50%, -50%) rotate(360deg); } }
.ha-cards { position: absolute; inset: 0; }
.ha-card {
    position: absolute; border-radius: var(--r-lg);
    background: linear-gradient(160deg, rgba(20, 27, 46, 0.92), rgba(13, 18, 32, 0.94));
    border: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(8px);
    padding: 16px;
}
.ha-card.back1 { width: 250px; top: 8px; left: 16px; transform: rotate(-7deg); opacity: .8; }
.ha-card.back2 { width: 265px; top: 44px; right: 30px; transform: rotate(5deg); opacity: .9; }
.ha-card.main { width: 330px; left: 50%; top: 118px; transform: translateX(-50%); padding: 20px; z-index: 2; }
.ha-row { display: flex; align-items: center; gap: 10px; }
.ha-flag { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 18px; background: rgba(148, 163, 184, 0.1); border: 1px solid transparent; flex: none; }
.ha-name { font-weight: 700; font-size: 14px; }
.ha-region { font-size: 12px; color: var(--text-3); }
.ha-online { margin-left: auto; }
.ha-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.ha-spec { background: rgba(148, 163, 184, 0.06); border: 1px solid var(--line-soft); border-radius: 10px; padding: 8px 10px; }
.ha-spec b { display: block; font-size: 14px; letter-spacing: -.01em; }
.ha-spec span { font-size: 11px; color: var(--text-3); }
.ha-chart { margin-top: 14px; }
.ha-chart svg { display: block; width: 100%; }
.ha-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 12px; color: var(--text-3); }
.ha-meta b { color: var(--green); font-size: 14px; font-family: var(--mono); }
.ha-chip {
    position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px; border-radius: 99px; font-size: 13px; font-weight: 600;
    background: rgba(14, 19, 34, 0.9); border: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: var(--shadow-2); backdrop-filter: blur(10px);
    animation: chipFloat 5s ease-in-out infinite;
}
.ha-chip svg { width: 15px; height: 15px; }
.ha-chip.c1 { top: 12%; right: -2%; color: #8ab6ff; animation-delay: .4s; }
.ha-chip.c2 { bottom: -7%; left: 2%; color: #9fd6ff; }
.ha-chip.c3 { bottom: 16%; right: -3%; color: #a5f3d0; animation-delay: 1.2s; }
@keyframes chipFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.ha-favicon {
    position: absolute; z-index: 3; width: 40px; height: 40px; border-radius: 12px;
    display: grid; place-items: center; font-size: 17px; font-weight: 800;
    background: linear-gradient(150deg, #182238, #101830);
    border: 1px solid rgba(148, 163, 184, 0.22); box-shadow: var(--shadow-2);
    animation: chipFloat 6s ease-in-out infinite;
}
.ha-favicon.f1 { top: 24%; left: 2%; background: linear-gradient(150deg, #1d2c52, #13203c); color: #7fb0ff; }
.ha-favicon.f2 { top: 6%; right: 20%; background: linear-gradient(150deg, #2c1d52, #1d1338); color: #b39bff; animation-delay: .8s; }
.ha-favicon.f3 { bottom: 22%; right: 0; background: linear-gradient(150deg, #12303a, #0c2029); color: #5fd9c9; animation-delay: 1.6s; }

/* marquee of trust */
.l-trust { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: rgba(10, 14, 24, 0.5); }
.l-trust-in { max-width: 1200px; margin: 0 auto; padding: 22px 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 56px; }
.l-trust-item { display: flex; align-items: center; gap: 10px; color: var(--text-3); font-size: 13.5px; font-weight: 600; }
.l-trust-item svg { width: 17px; height: 17px; color: var(--text-3); opacity: .8; }

/* ============================================================
   Landing — sections
   ============================================================ */
.l-section { padding: 88px 0; position: relative; }
.l-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.l-head { text-align: center; max-width: 680px; margin: 0 auto 52px; }
.l-head .kicker { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .14em; color: var(--primary-hi); text-transform: uppercase; margin-bottom: 12px; }
.l-head h2 { margin: 0 0 14px; font-size: clamp(26px, 3.2vw, 38px); font-weight: 800; letter-spacing: -.015em; }
.l-head p { margin: 0; color: var(--text-2); font-size: 15.5px; }

/* stats */
.l-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.l-stat {
    text-align: center; padding: 28px 16px; border-radius: var(--r-lg);
    background: var(--panel); border: 1px solid var(--line-soft);
    transition: transform .2s, border-color .2s;
}
.l-stat:hover { transform: translateY(-3px); border-color: rgba(47, 123, 255, 0.35); }
.l-stat b { display: block; font-size: 34px; font-weight: 800; letter-spacing: -.02em; background: var(--primary-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: var(--mono); }
.l-stat span { font-size: 13.5px; color: var(--text-2); }

/* features */
.l-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.l-feat {
    padding: 26px; border-radius: var(--r-lg); position: relative; overflow: hidden;
    background: var(--panel); border: 1px solid var(--line-soft);
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.l-feat::before {
    content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(90, 156, 255, 0.55), transparent);
    opacity: 0; transition: opacity .18s;
}
.l-feat:hover { transform: translateY(-4px); border-color: rgba(47, 123, 255, 0.3); background: rgba(47, 123, 255, 0.04); }
.l-feat:hover::before { opacity: 1; }
.l-feat-ic {
    width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 18px;
    background: var(--primary-soft); border: 1px solid rgba(47, 123, 255, 0.3); color: var(--primary-hi);
    box-shadow: 0 6px 20px rgba(47, 123, 255, 0.16);
}
.l-feat-ic svg { width: 22px; height: 22px; }
.l-feat h3 { margin: 0 0 8px; font-size: 17px; font-weight: 700; }
.l-feat p { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.7; }

/* network map */
.l-net {
    border-radius: var(--r-xl); border: 1px solid var(--line-soft); position: relative; overflow: hidden;
    background:
        radial-gradient(700px 300px at 50% 120%, rgba(47, 123, 255, 0.10), transparent 70%),
        linear-gradient(180deg, rgba(13, 18, 32, 0.6), rgba(9, 12, 22, 0.9));
    padding: 30px 10px 18px;
}
.l-net svg.map { display: block; width: 100%; max-width: 980px; margin: 0 auto; }
.l-net .map-dot-label { font-size: 11px; fill: var(--text-2); font-family: var(--font); }
.l-net-regions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; padding: 18px 16px 8px; }
.l-net-regions span { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-2); }
.l-net-regions i { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 10px var(--primary-glow); }

/* pricing */
.l-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.l-plan {
    position: relative; display: flex; flex-direction: column;
    padding: 28px; border-radius: var(--r-lg);
    background: var(--panel); border: 1px solid var(--line-soft);
    transition: transform .18s, border-color .18s, box-shadow .18s;
}
.l-plan:hover { transform: translateY(-4px); border-color: rgba(47, 123, 255, 0.4); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4); }
.l-plan.hot { border-color: rgba(47, 123, 255, 0.55); background: linear-gradient(180deg, rgba(47, 123, 255, 0.08), rgba(47, 123, 255, 0.015) 46%), var(--panel); }
.l-plan .hot-tag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); }
.l-plan h3 { margin: 0; font-size: 18px; font-weight: 700; }
.l-plan .price { margin: 16px 0 4px; display: flex; align-items: baseline; gap: 6px; }
.l-plan .price b { font-size: 40px; font-weight: 800; letter-spacing: -.03em; font-family: var(--mono); }
.l-plan .price span { color: var(--text-3); font-size: 13px; }
.l-plan ul { list-style: none; margin: 20px 0 24px; padding: 0; display: grid; gap: 11px; flex: 1; }
.l-plan ul li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text-2); }
.l-plan ul svg { width: 16px; height: 16px; color: var(--primary-hi); flex: none; margin-top: 3px; }
.l-plans-empty {
    grid-column: 1 / -1; text-align: center; padding: 54px 24px; border-radius: var(--r-lg);
    border: 1px dashed rgba(148, 163, 184, 0.25); background: var(--panel);
}
.l-plans-empty h3 { margin: 14px 0 8px; font-size: 20px; }
.l-plans-empty p { color: var(--text-2); margin: 0 0 22px; }
.l-plans-empty .lock-ic { width: 52px; height: 52px; border-radius: 14px; display: inline-grid; place-items: center; background: var(--primary-soft); color: var(--primary-hi); border: 1px solid rgba(47, 123, 255, .3); }
.l-plans-empty .lock-ic svg { width: 24px; height: 24px; }

/* faq */
.l-faq { max-width: 780px; margin: 0 auto; display: grid; gap: 12px; }
.l-faq-item { border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--panel); overflow: hidden; transition: border-color .2s; }
.l-faq-item.open { border-color: rgba(47, 123, 255, 0.35); }
.l-faq-q {
    width: 100%; display: flex; align-items: center; gap: 14px; text-align: left;
    background: none; border: none; color: var(--text); cursor: pointer;
    padding: 17px 20px; font-size: 15px; font-weight: 600;
}
.l-faq-q .q-ic {
    width: 26px; height: 26px; border-radius: 8px; flex: none; display: grid; place-items: center;
    background: var(--primary-soft); color: var(--primary-hi); font-size: 14px; font-weight: 800;
}
.l-faq-q .arr { margin-left: auto; width: 16px; height: 16px; color: var(--text-3); transition: transform .18s; flex: none; }
.l-faq-item.open .arr { transform: rotate(180deg); }
.l-faq-a { max-height: 0; overflow: hidden; transition: max-height .18s ease; }
.l-faq-a > div { padding: 0 20px 18px 60px; color: var(--text-2); font-size: 14px; line-height: 1.75; }

/* CTA band */
.l-cta {
    position: relative; overflow: hidden; text-align: center;
    padding: 74px 28px; border-radius: var(--r-xl);
    border: 1px solid rgba(47, 123, 255, 0.3);
    background:
        radial-gradient(520px 240px at 50% -30%, rgba(47, 123, 255, 0.28), transparent 72%),
        radial-gradient(420px 260px at 86% 130%, rgba(124, 92, 246, 0.16), transparent 70%),
        var(--panel-solid);
}
.l-cta h2 { margin: 0 0 12px; font-size: clamp(24px, 3vw, 34px); font-weight: 800; letter-spacing: -.01em; }
.l-cta p { color: var(--text-2); margin: 0 0 28px; }

/* footer */
.l-footer { border-top: 1px solid var(--line-soft); background: rgba(8, 11, 19, 0.7); margin-top: 40px; }
.l-footer-in { max-width: 1200px; margin: 0 auto; padding: 54px 24px 30px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 34px; }
.l-footer .f-brand p { color: var(--text-3); font-size: 13.5px; max-width: 300px; margin: 14px 0 0; }
.l-footer h4 { margin: 0 0 16px; font-size: 13px; font-weight: 700; letter-spacing: .1em; color: var(--text-2); text-transform: uppercase; }
.l-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.l-footer ul a, .l-footer ul .faux { color: var(--text-3); font-size: 14px; cursor: pointer; transition: color .15s; }
.l-footer ul a:hover, .l-footer ul .faux:hover { color: var(--text); }
.l-footer-bar { border-top: 1px solid var(--line-soft); }
.l-footer-bar-in { max-width: 1200px; margin: 0 auto; padding: 18px 24px; display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; justify-content: space-between; color: var(--text-3); font-size: 13px; }
.l-tg-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; background: rgba(148, 163, 184, 0.08); border: 1px solid transparent; font-size: 13px; font-weight: 600; color: var(--text-2); transition: all .16s; }
.l-tg-btn:hover { color: var(--text); background: rgba(148, 163, 184, 0.14); }
.l-tg-btn svg { width: 15px; height: 15px; }

/* ============================================================
   Auth — split screen
   ============================================================ */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }
.auth-side {
    position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
    padding: 44px 52px;
    background:
        radial-gradient(760px 420px at 12% -8%, rgba(47, 123, 255, 0.22), transparent 66%),
        radial-gradient(560px 420px at 108% 86%, rgba(124, 92, 246, 0.14), transparent 66%),
        linear-gradient(200deg, #0c1122 0%, #070a12 70%);
    border-right: 1px solid var(--line-soft);
}
.auth-side::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(148, 163, 184, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 163, 184, 0.045) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(80% 70% at 40% 40%, #000, transparent 85%);
    -webkit-mask-image: radial-gradient(80% 70% at 40% 40%, #000, transparent 85%);
}
.auth-side .a-brand { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; }
.auth-side .a-brand img { width: 32px; height: 32px; border-radius: 9px; }
.auth-side .a-mid { position: relative; }
.auth-side .a-mid h2 { font-size: clamp(26px, 2.6vw, 36px); font-weight: 800; line-height: 1.3; letter-spacing: -.01em; margin: 0 0 16px; }
.auth-side .a-mid p { color: var(--text-2); font-size: 15px; margin: 0 0 30px; max-width: 420px; }
.auth-side .a-points { display: grid; gap: 14px; }
.auth-side .a-points span { display: flex; gap: 12px; align-items: center; color: var(--text-2); font-size: 14px; }
.auth-side .a-points svg { width: 18px; height: 18px; color: var(--primary-hi); flex: none; }
.auth-side .a-foot { color: var(--text-3); font-size: 12.5px; position: relative; }
.auth-main { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; position: relative; }
.auth-card { width: 100%; max-width: 412px; animation: viewIn .4s ease both; }
.auth-card .a-head { text-align: center; margin-bottom: 28px; }
.auth-card .a-head .m-logo { width: 46px; height: 46px; border-radius: 13px; margin: 0 auto 16px; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(47, 123, 255, .4); }
.auth-card .a-head .m-logo img { width: 46px; height: 46px; border-radius: 13px; }
.auth-card .a-head h1 { margin: 0 0 6px; font-size: 22px; font-weight: 800; }
.auth-card .a-head p { margin: 0; color: var(--text-3); font-size: 13.5px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; background: rgba(148, 163, 184, 0.07); border: 1px solid var(--line-soft); border-radius: 11px; padding: 4px; margin-bottom: 24px; }
.auth-tabs a { text-align: center; padding: 8px 0; font-size: 14px; font-weight: 600; color: var(--text-3); border-radius: 8px; cursor: pointer; transition: all .18s; }
.auth-tabs a.on { background: var(--primary-action); color: #fff; box-shadow: 0 4px 14px rgba(47, 123, 255, .35); }
.auth-alt { text-align: center; margin-top: 22px; font-size: 13.5px; color: var(--text-3); }
.auth-alt a { color: var(--primary-hi); font-weight: 600; cursor: pointer; }
.auth-back { position: absolute; top: 22px; left: 22px; display: inline-flex; align-items: center; gap: 7px; color: var(--text-3); font-size: 13.5px; cursor: pointer; padding: 8px 12px; border-radius: 9px; transition: all .15s; }
.auth-back:hover { color: var(--text); background: rgba(148, 163, 184, 0.08); }
.auth-back svg { width: 15px; height: 15px; }
.code-btn { position: absolute; right: 8px; font-size: 12.5px; font-weight: 600; color: var(--primary-hi); background: var(--primary-soft); border: none; border-radius: 7px; padding: 6px 10px; cursor: pointer; transition: all .15s; }
.code-btn:disabled { color: var(--text-3); background: rgba(148, 163, 184, 0.08); cursor: not-allowed; }
.g-recaptcha { margin: 4px 0 16px; }

/* ============================================================
   Panel — layout
   ============================================================ */
.panel { min-height: 100vh; display: flex; }
.p-side {
    position: fixed; top: 0; bottom: 0; left: 0; width: var(--side-w); z-index: 90;
    display: flex; flex-direction: column;
    background: linear-gradient(180deg, rgba(13, 17, 30, 0.96), rgba(9, 12, 21, 0.98));
    border-right: 1px solid var(--line-soft);
    backdrop-filter: blur(10px);
    transition: transform .18s ease;
}
.p-side-head { display: flex; align-items: center; gap: 10px; padding: 18px 20px 16px; font-weight: 800; font-size: 16px; letter-spacing: -.01em; }
.p-side-head img { width: 30px; height: 30px; border-radius: 8px; }
.p-side-head .mark { width: 30px; height: 30px; flex: none; }
.p-menu { flex: 1; overflow-y: auto; padding: 6px 12px 12px; display: flex; flex-direction: column; gap: 3px; }
.p-menu .m-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); padding: 16px 10px 7px; font-weight: 700; }
.p-menu a {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px;
    border-radius: 10px; color: var(--text-2); font-size: 14px; font-weight: 500;
    cursor: pointer; transition: background .16s, color .16s; position: relative;
}
.p-menu a svg { width: 20px; height: 20px; flex: none; opacity: .85; }
.p-menu a:hover { color: var(--text); background: rgba(148, 163, 184, 0.07); }
.p-menu a.on { color: #fff; background: linear-gradient(90deg, rgba(47, 123, 255, 0.2), rgba(47, 123, 255, 0.06)); }
.p-menu a.on svg { color: var(--primary-hi); opacity: 1; }
.p-menu a.on::before {
    content: ""; position: absolute; left: -12px; top: 22%; bottom: 22%; width: 3px;
    border-radius: 0 4px 4px 0; background: var(--primary); box-shadow: 0 0 10px var(--primary-glow);
}
.p-menu .m-sup { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: #b91c1c; color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.p-side-foot { border-top: 1px solid var(--line-soft); padding: 14px; }
.p-user-chip { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; background: rgba(148, 163, 184, 0.05); border: 1px solid var(--line-soft); }
.p-user-chip img { width: 34px; height: 34px; border-radius: 50%; }
.p-user-chip .u-meta { min-width: 0; flex: 1; }
.p-user-chip .u-meta b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-user-chip .u-meta span { display: block; font-size: 11.5px; line-height: 18px; color: var(--text-3); }
.p-user-chip .u-out { width: 30px; height: 30px; flex: none; border-radius: 8px; border: none; background: transparent; color: var(--text-3); cursor: pointer; display: grid; place-items: center; transition: background .15s, color .15s; }
.p-user-chip .u-out:hover { background: var(--red-soft); color: var(--red); }
.p-user-chip .u-out svg { width: 15px; height: 15px; }

.p-main { flex: 1; margin-left: var(--side-w); min-width: 0; display: flex; flex-direction: column; }
.p-bottom-nav { display: none; }
.account-shortcuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.account-shortcuts a { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 16px; background: var(--panel-solid); border: 1px solid rgba(148, 163, 184, 0.14); border-radius: var(--r-md); color: var(--text); font-size: 14px; transition: background .18s; }
.account-shortcuts a:hover { background: var(--panel-solid-2); }
.account-shortcuts a svg { flex: none; width: 20px; height: 20px; color: var(--primary-hi); }
.account-shortcuts a svg:last-child { margin-left: auto; color: var(--text-2); width: 16px; }
.p-top {
    position: sticky; top: 0; z-index: 80; height: 62px;
    display: flex; align-items: center; gap: 14px; padding: 0 26px;
    background: rgba(7, 10, 18, 0.78); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line-soft);
}
.p-top h1 { margin: 0; font-size: 17px; font-weight: 700; }
.p-top .p-burger { display: none; width: 36px; height: 36px; border: 0; background: transparent; border-radius: 10px; color: var(--text); cursor: pointer; place-items: center; }
.p-top .p-burger svg { width: 17px; height: 17px; }
.p-top-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.p-top-right .balance-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-2); background: rgba(148, 163, 184, 0.07); border: 1px solid var(--line-soft); padding: 7px 13px; border-radius: 99px; }
.p-top-right .balance-chip b { color: var(--text); font-family: var(--mono); }
.p-top-right .balance-chip svg { width: 14px; height: 14px; color: var(--amber); }
.p-top-right .avatar { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(47, 123, 255, 0.5); cursor: pointer; }
.p-announce {
    display: flex; gap: 10px; align-items: flex-start;
    margin: 20px 26px 0; padding: 12px 16px; border-radius: 12px;
    background: linear-gradient(90deg, rgba(47, 123, 255, 0.12), rgba(47, 123, 255, 0.03));
    border: 1px solid rgba(47, 123, 255, 0.3); font-size: 14px; line-height: 1.7; color: var(--text-2);
}
.p-announce svg { width: 16px; height: 16px; color: var(--primary-hi); flex: none; margin-top: 2px; }
.p-announce > div { flex: 1; min-width: 0; white-space: pre-line; overflow-wrap: anywhere; }
.p-announce-warning { background: var(--amber-soft); border-color: var(--amber); }
.p-announce-warning > svg { color: var(--amber); }
.p-announce-close { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--text-2); cursor: pointer; transition: background-color 180ms, color 180ms; }
.p-announce-close svg { color: inherit; margin: 0; }
.p-announce-close:hover { background: rgba(148, 163, 184, 0.12); color: var(--text); }
.p-content { padding: 22px 26px 24px; flex: 1; font-size: 14px; line-height: 1.7; }
.p-side-mask { display: none; }

/* ---- cards / grids ---- */
.p-card { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: var(--space-6); }
.p-card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.p-card-h h3 { margin: 0; font-size: 15.5px; font-weight: 700; }
.p-card-h .more { font-size: 13px; color: var(--primary-hi); cursor: pointer; font-weight: 600; }

.sub-hero {
    position: relative; overflow: hidden; border-radius: var(--r-lg);
    border: 1px solid rgba(47, 123, 255, 0.28);
    background: var(--panel-solid-2);
    padding: 26px;
}
.sub-hero-in { display: flex; flex-wrap: wrap; gap: 26px; align-items: center; }
.sub-hero .ring { position: relative; width: 132px; height: 132px; flex: none; }
.sub-hero .ring svg { transform: rotate(-90deg); }
.sub-hero .ring .ring-txt { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.sub-hero .ring .ring-txt b { font-size: 21px; font-family: var(--mono); letter-spacing: -.02em; }
.sub-hero .ring .ring-txt span { display: block; font-size: 11px; color: var(--text-3); margin-top: -2px; }
.sub-hero .sub-info { flex: 1; min-width: 240px; }
.sub-hero .sub-plan { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.sub-hero .sub-plan h2 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.sub-hero .sub-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; }
.sub-hero .sub-meta div { font-size: 12.5px; color: var(--text-3); }
.sub-hero .sub-meta div b { display: block; color: var(--text); font-size: 14.5px; font-weight: 700; margin-top: 2px; font-family: var(--mono); }
.sub-hero .sub-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sub-traffic-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.sub-traffic-nums > div { background: rgba(148, 163, 184, 0.05); border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px 12px; }
.sub-traffic-nums span { font-size: 11.5px; color: var(--text-3); display: block; }
.sub-traffic-nums b { font-size: 14.5px; font-family: var(--mono); letter-spacing: -.01em; }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 14px; }
.stat-cell { display: flex; gap: 14px; align-items: center; padding: 18px; background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--r-lg); transition: border-color .2s, transform .2s; }
.stat-cell:hover { border-color: rgba(47, 123, 255, 0.32); transform: translateY(-2px); }
.stat-cell .s-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.stat-cell .s-ic svg { width: 20px; height: 20px; }
.stat-cell .s-ic.blue { background: var(--primary-soft); color: var(--primary-hi); }
.stat-cell .s-ic.amber { background: var(--amber-soft); color: var(--amber); }
.stat-cell .s-ic.green { background: var(--green-soft); color: var(--green); }
.stat-cell .s-ic.violet { background: rgba(139, 92, 246, 0.14); color: #a78bfa; }
.stat-cell b { display: block; font-size: 21px; font-weight: 800; font-family: var(--mono); letter-spacing: -.02em; }
.stat-cell span { font-size: 12.5px; color: var(--text-3); }

.dash-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; margin-top: 14px; }

/* traffic chart */
.traffic-chart svg { display: block; width: 100%; }
.chart-empty { height: 170px; display: grid; place-items: center; color: var(--text-3); font-size: 13px; }
.chart-legend { display: flex; gap: 18px; margin-top: 10px; font-size: 12px; color: var(--text-3); }
.chart-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* copy field */
.copy-row { display: flex; gap: 10px; }
.copy-row .n-input { flex: 1; font-family: var(--mono); font-size: 12.5px; color: var(--text-2); }

/* ---- tables ---- */
.n-table-wrap { overflow-x: auto; }
.n-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.n-table th { text-align: left; padding: 11px 14px; color: var(--text-3); font-weight: 600; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.n-table td { padding: 13px 14px; border-bottom: 1px solid var(--line-soft); color: var(--text-2); white-space: nowrap; }
.n-table tr:last-child td { border-bottom: none; }
.n-table td b { color: var(--text); font-weight: 600; }
.n-table .mono { font-family: var(--mono); font-size: 12.5px; }
.n-table tbody tr { transition: background .15s; }
.n-table tbody tr:hover { background: rgba(148, 163, 184, 0.04); }

.n-empty { text-align: center; padding: 46px 20px; color: var(--text-3); }
.n-empty svg { width: 40px; height: 40px; opacity: .4; margin-bottom: 10px; }
.n-empty p { margin: 0; font-size: 13.5px; }

/* ---- shop ---- */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr)); gap: 16px; container-type: inline-size; }
.plan-card { display: flex; flex-direction: column; padding: 24px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line-soft); transition: all .2s; position: relative; }
.plan-card:hover { transform: translateY(-3px); border-color: rgba(47, 123, 255, 0.4); box-shadow: var(--shadow-2); }
.plan-card .pc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.plan-card .pc-detail-link { align-self: flex-start; }
.plan-card .pc-bottom { margin-top: auto; padding-top: 14px; }
.plan-card .period-tabs { margin: 0 0 12px; }
.plan-card .pc-ic { width: 42px; height: 42px; border-radius: 12px; background: var(--primary-grad); display: grid; place-items: center; color: #fff; box-shadow: 0 6px 18px rgba(47, 123, 255, .35); flex: none; }
.plan-card .pc-ic svg { width: 20px; height: 20px; }
.plan-card h3 { margin: 0; font-size: 17px; font-weight: 700; }
.plan-card .pc-cap { font-size: 12.5px; color: var(--text-3); }
.plan-card .pc-desc { font-size: 13px; color: var(--text-2); margin: 10px 0 0; white-space: pre-line; }
.period-tabs { display: flex; flex-wrap: wrap; gap: 6px; background: rgba(148, 163, 184, 0.06); border: 1px solid var(--line-soft); padding: 4px; border-radius: 11px; margin: 16px 0 14px; }
.period-tabs button { min-height: 44px; flex: 1 1 72px; border: none; background: transparent; color: var(--text-3); font-size: 12.5px; font-weight: 600; padding: 7px 6px; border-radius: 8px; cursor: pointer; white-space: nowrap; transition: all .16s; }
.period-tabs button.on { background: var(--primary-action); color: #fff; box-shadow: 0 4px 12px rgba(47, 123, 255, .3); }
.period-tabs button:disabled { opacity: .35; cursor: not-allowed; }
.plan-card .pc-price { font-variant-numeric: tabular-nums; text-align: left; margin-top: 14px; margin-bottom: 6px; }
.plan-card .pc-price b { font-size: 30px; font-weight: 800; font-family: var(--mono); letter-spacing: -.03em; }
.plan-card .pc-price s { color: var(--text-3); font-size: 13px; margin-left: 8px; }
.plan-card .pc-price span { color: var(--text-3); font-size: 12.5px; margin-left: 6px; }
.plan-card .n-btn { margin-top: 14px; }
.plan-card .pc-flag { position: absolute; top: 16px; right: 16px; }
.pc-detail-link {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
    font-size: 12.5px; font-weight: 600; color: var(--primary-hi); cursor: pointer;
    min-height: 44px; padding: 4px 10px; border-radius: 8px; background: var(--primary-soft);
    border: 1px solid rgba(47, 123, 255, 0.25); transition: all .16s;
}
.pc-detail-link svg { width: 13px; height: 13px; }
.pc-detail-link:hover { filter: brightness(1.15); border-color: rgba(47, 123, 255, 0.5); }

/* feature list + savings chip + ribbon */
.pc-feats { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.pc-feats li { display: flex; gap: 9px; font-size: 13px; color: var(--text-2); line-height: 1.5; }
.pc-feats svg { width: 14px; height: 14px; color: var(--primary-hi); flex: none; margin-top: 3px; }
.pt-save {
    font-style: normal; font-size: 10px; font-weight: 700; margin-left: 5px;
    padding: 1px 6px; border-radius: 99px;
    background: rgba(52, 211, 153, 0.16); color: var(--green); vertical-align: 1px;
}
.period-tabs button.on .pt-save { background: rgba(255, 255, 255, 0.24); color: #fff; }
.pc-per { display: block; font-style: normal; font-size: 12px; color: var(--text-3); margin-top: 3px; }
.reco-ribbon {
    position: absolute; top: 26px; right: -30px; transform: rotate(45deg); z-index: 2;
    background: var(--primary-grad); color: #fff; font-size: 11px; font-weight: 700;
    padding: 3px 34px; letter-spacing: .08em; box-shadow: 0 4px 14px rgba(47, 123, 255, 0.4);
    pointer-events: none;
}
.plan-card::before {
    content: ""; position: absolute; top: 0; left: 22px; right: 22px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(90, 156, 255, 0.6), transparent);
    opacity: 0; transition: opacity .18s;
}
.plan-card:hover::before { opacity: 1; }

/* deposit strip */
.deposit-details { max-width: 960px; }
.deposit-toggle { display: none; }
.deposit-details .dep-strip { margin-bottom: 0; }
.deposit-copy { flex: 1; min-width: 220px; }
.deposit-actions { max-width: 360px; flex: 1; min-width: 260px; }
@media(max-width:860px) {
    .deposit-toggle { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 8px 0; border: 0; background: transparent; color: var(--text); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
    .deposit-toggle::before { content: '▸'; }
    .deposit-toggle[aria-expanded="true"]::before { content: '▾'; }
    .deposit-details:not(.is-open) .dep-strip { display: none; }
    .deposit-details.is-open .dep-strip { padding: 12px 0; }
    .deposit-copy { min-width: 0; flex-basis: calc(100% - 56px); }
    .deposit-actions { min-width: 0; max-width: none; flex-basis: 100%; }
}

.dep-strip { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.dep-ic {
    width: 42px; height: 42px; border-radius: 12px; flex: none;
    display: grid; place-items: center;
    background: var(--amber-soft); color: var(--amber); border: 1px solid rgba(251, 191, 36, 0.25);
}
.dep-ic svg { width: 20px; height: 20px; }

/* mobile card lists for data tables */
.od-cards, .tf-cards { display: none; }
#od-list { container-type: inline-size; }
@container (max-width: 1000px) {
    #od-list .od-desktop { display: none; }
    #od-list .od-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr)); gap: 14px; }
    .od-card { display: flex; flex-direction: column; padding: 16px; border: 1px solid var(--line-soft); border-radius: var(--r-md); background: rgba(148,163,184,.04); }
    .od-card-top { display: flex; align-items: start; gap: 10px; margin-bottom: 8px; }
    .od-card-top b { flex: 1; font-size: 14.5px; }
    .od-card-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 14px; }
    .od-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
    .od-card-actions .n-btn { flex: 1; min-height: 44px; }
}
@media (max-width: 560px) {
    .od-desktop, .tf-desktop { display: none; }
    .od-cards { display: grid; gap: 10px; }
    .tf-cards { display: grid; gap: 10px; }
    .period-tabs button { font-size: 11.5px; padding: 6px 4px; }
    .pt-save { font-size: 9px; margin-left: 3px; padding: 0 4px; }
    .od-card, .tf-card {
        padding: 14px 16px; border-radius: var(--r-md);
        background: rgba(148, 163, 184, 0.04); border: 1px solid var(--line-soft);
    }
    .od-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
    .od-card-top b { flex: 1; min-width: 0; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .od-card-meta { display: flex; gap: 6px 16px; flex-wrap: wrap; font-size: 12px; color: var(--text-3); margin-bottom: 12px; }
    .od-card-meta .mono { font-family: var(--mono); color: var(--text-2); }
    .od-card-actions { display: flex; gap: 8px; }
    .od-card-actions .n-btn { flex: 1; }
    .tf-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
    .tf-card-top b { font-size: 14px; }
    .tf-card-top .tf-sum { margin-left: auto; font-family: var(--mono); font-weight: 700; }
    .tf-card-bar { height: 6px; border-radius: 99px; background: rgba(148, 163, 184, 0.12); overflow: hidden; margin-bottom: 8px; }
    .tf-card-bar i { display: block; height: 100%; background: var(--primary-grad); border-radius: 99px; }
    .tf-card-meta { display: flex; gap: 16px; font-size: 12px; color: var(--text-3); }
    .tf-card-meta .mono { font-family: var(--mono); }
}

/* plan detail modal */
.pd-desc { display: grid; gap: 10px; margin-bottom: 8px; }
.pd-desc-item { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text-2); }
.pd-desc-item svg { width: 16px; height: 16px; color: var(--primary-hi); flex: none; margin-top: 3px; }
.pd-content {
    margin-top: 14px; padding: 14px 18px;
    background: rgba(148, 163, 184, 0.04); border: 1px solid var(--line-soft); border-radius: 12px;
    font-size: 13.5px;
}
.pd-sec { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.pd-sec-title { font-size: 13px; font-weight: 700; color: var(--text-2); margin-bottom: 10px; }
.pd-periods { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.pd-period {
    text-align: left; padding: 12px 14px; border-radius: 12px; cursor: pointer;
    background: rgba(148, 163, 184, 0.05); border: 1px solid var(--line-soft);
    color: var(--text); transition: all .16s; display: grid; gap: 2px; font-family: inherit;
}
.pd-period:hover { border-color: rgba(47, 123, 255, 0.4); }
.pd-period.on {
    border-color: rgba(47, 123, 255, 0.65); background: var(--primary-soft);
    box-shadow: inset 0 0 0 1px rgba(47, 123, 255, 0.4);
}
.pd-p-name { font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.pd-period.on .pd-p-name { color: var(--primary-hi); }
.pd-period b { font-size: 19px; font-family: var(--mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pd-p-per { font-size: 11px; color: var(--text-3); }


.pc-content::-webkit-scrollbar-track { background: transparent; }

/* client import grid */
.imp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.imp-item {
    display: flex; align-items: center; gap: 12px; padding: 14px;
    border-radius: var(--r-md); background: rgba(148, 163, 184, 0.04);
    border: 1px solid var(--line-soft); transition: all .18s; cursor: pointer;
}
.imp-item:hover { border-color: rgba(47, 123, 255, 0.45); background: var(--primary-soft); transform: translateY(-2px); }
.imp-ic {
    width: 40px; height: 40px; border-radius: 11px; flex: none;
    display: grid; place-items: center; font-size: 16px; font-weight: 800; color: #fff;
    background: var(--primary-grad); box-shadow: 0 4px 14px rgba(47, 123, 255, .3);
}
.imp-ic svg { width: 21px; height: 21px; display: block; }
.imp-ic-img { background: rgba(148, 163, 184, 0.07); box-shadow: none; }
.imp-ic-img img { width: 34px; height: 34px; object-fit: contain; border-radius: 8px; display: block; }
.imp-meta { min-width: 0; }
.imp-meta b { display: block; font-size: 13.5px; }
.imp-meta span { display: block; font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- nodes ---- */
.node-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.node-card { padding: 18px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line-soft); transition: all .2s; }
.node-card:hover { border-color: rgba(47, 123, 255, 0.35); transform: translateY(-2px); }
.node-card .nd-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.node-card .nd-head b { font-size: 14.5px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.node-card .nd-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.node-tag { font-size: 11.5px; padding: 2.5px 9px; border-radius: 99px; background: rgba(148, 163, 184, 0.09); border: 1px solid var(--line-soft); color: var(--text-2); }
.node-tag.rate { background: var(--amber-soft); border-color: transparent; color: var(--amber); font-weight: 700; }
.node-card .node-tag.rate { font-size: 14px; }
.node-card .node-tag.node-protocol { color: var(--text-2); background: transparent; border-color: var(--line-soft); font-size: 13px; }
.od-card { min-width: 0; }
.od-card-meta { font-size: 14px; color: var(--text-2); }
.od-card-top { min-width: 0; }
.od-card-top > b { min-width: 0; overflow-wrap: anywhere; }
.od-card-top .n-badge { flex: none; }
.od-number { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); font-size: 14px; margin-top: 8px; }
.od-cancel { background: transparent; border-color: transparent; box-shadow: none; color: var(--text-2); }
.order-number { min-width: 0; margin-bottom: 12px; }
.order-number label { display: block; color: var(--text-2); font-size: 14px; margin-bottom: 8px; }
.order-number .copy-row { min-width: 0; }
.order-number .n-input { min-width: 0; width: 0; flex: 1; }
.order-number .n-btn { flex: none; }
.order-detail-fields .pf-row > b { min-width: 0; text-align: right; overflow-wrap: anywhere; }
.order-detail-fields .pf-label { flex: none; max-width: 55%; }

/* ---- ticket ---- */
.tk-list { display: grid; gap: 10px; }
.tk-item { width: 100%; color: var(--text); font: inherit; text-align: left; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--r-md); background: var(--panel); border: 1px solid var(--line-soft); cursor: pointer; transition: all .18s; }
.tk-item svg { width: 18px; height: 18px; }
.tk-item b { overflow-wrap: anywhere; }
.tk-item:hover { border-color: rgba(47, 123, 255, 0.4); transform: translateX(3px); }
.tk-item b { font-size: 14.5px; display: block; }
.tk-item .tk-time { font-size: 12px; color: var(--text-3); }
.tk-msgs { display: grid; gap: 14px; padding: 6px 0 16px; }
.tk-bubble { max-width: 76%; display: flex; gap: 10px; }
.tk-bubble.me { justify-self: end; flex-direction: row-reverse; }
.tk-bubble .b-ava { width: 32px; height: 32px; border-radius: 50%; flex: none; background: var(--primary-action); display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 800; }
.tk-bubble .b-ava.staff { background: #047857; }
.tk-bubble .b-body { background: rgba(148, 163, 184, 0.07); border: 1px solid var(--line-soft); border-radius: 4px 14px 14px 14px; padding: 11px 14px; font-size: 14px; line-height: 1.65; color: var(--text); }
.tk-bubble.me .b-body { background: linear-gradient(135deg, rgba(47, 123, 255, 0.24), rgba(47, 123, 255, 0.12)); border-color: rgba(47, 123, 255, 0.35); border-radius: 14px 4px 14px 14px; }
.tk-bubble .b-time { font-size: 11px; color: var(--text-3); margin-top: 5px; }

/* ---- knowledge ---- */
.kb-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.kb-cat { padding: 7px 16px; border-radius: 99px; font-size: 13px; font-weight: 600; color: var(--text-2); background: rgba(148, 163, 184, 0.07); border: 1px solid var(--line-soft); cursor: pointer; transition: all .16s; }
.kb-cat.on { background: var(--primary-action); color: #fff; border-color: transparent; box-shadow: 0 4px 14px rgba(47, 123, 255, .3); }
.kb-list { display: grid; gap: 10px; }
.kb-item { display: flex; align-items: center; gap: 14px; padding: 15px 18px; border-radius: var(--r-md); background: var(--panel); border: 1px solid var(--line-soft); cursor: pointer; transition: all .18s; }
.kb-item:hover { border-color: rgba(47, 123, 255, 0.4); transform: translateX(3px); }
.kb-item .kb-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--primary-soft); color: var(--primary-hi); display: grid; place-items: center; flex: none; }
.kb-item .kb-ic svg { width: 17px; height: 17px; }
.kb-item b { flex: 1; font-size: 14.5px; font-weight: 600; min-width: 0; }
.kb-item .tk-time { flex: none; }
.kb-item > span:last-child:has(> svg) { display: flex; flex: none; }
.kb-item > span:last-child > svg { width: 18px; height: 18px; }

/* ---- profile ---- */
.pf-grid { align-items: start; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.pf-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
.pf-row:last-child { border-bottom: none; }
.pf-row .pf-label { font-size: 14px; color: var(--text-2); }
.pf-row .pf-label small { display: block; color: var(--text-3); font-size: 12px; margin-top: 2px; }

/* invite */
.inv-hero { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 14px; }
.inv-stat { padding: 20px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line-soft); text-align: center; }
.inv-stat b { display: block; font-size: 25px; font-weight: 800; font-family: var(--mono); letter-spacing: -.02em; }
.inv-stat span { font-size: 12.5px; color: var(--text-3); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
    .l-hero-in { grid-template-columns: 1fr; }
    .l-hero-art { display: none; }
    .l-feats { grid-template-columns: repeat(2, 1fr); }
    .l-plans { grid-template-columns: repeat(2, 1fr); }
    .l-footer-in { grid-template-columns: 1fr 1fr; }
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .dash-grid { grid-template-columns: 1fr; }
    .auth { grid-template-columns: 1fr; }
    .auth-side { display: none; }
}
@media (max-width: 860px) {
    .l-links, .l-nav-cta .login { display: none; }
    .l-nav-burger { display: grid; }
    .l-nav-cta .n-btn { display: none; }
    .l-mobile-menu .n-btn { display: inline-flex; }
    .l-stats { grid-template-columns: repeat(2, 1fr); }
    .l-feats { grid-template-columns: 1fr; }
    .l-plans { grid-template-columns: 1fr; }
    .l-section { padding: 64px 0; }
    .p-side { transform: translateX(-100%); visibility: hidden; }
    .p-side.open { transform: none; visibility: visible; box-shadow: -20px 0 60px rgba(0, 0, 0, .5); }
    .p-side-mask.open { display: block; position: fixed; inset: 0; z-index: 85; background: rgba(4, 7, 14, 0.6); backdrop-filter: blur(3px); }
    .p-main { margin-left: 0; }
    .p-top { padding: 0 16px; }
    .p-top .p-burger { display: grid; }
    .p-content { padding: 16px 14px 40px; }
    .p-announce { margin: 14px 14px 0; }
    .pf-grid { align-items: start; grid-template-columns: 1fr; }
    .inv-hero { grid-template-columns: 1fr 1fr; }
    .imp-grid { grid-template-columns: repeat(2, 1fr); }
    .dash-row3 { grid-template-columns: 1fr; }
    .sub-traffic-nums { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
    .p-menu a, .p-user-chip .u-out { min-width: 44px; min-height: 44px; }
    .p-bottom-nav { position: fixed; inset: auto 0 0; z-index: 30; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 6px 8px calc(6px + var(--safe-bottom)); background: var(--panel-solid); border-top: 1px solid var(--line-soft); }
    .p-bottom-nav a { min-width: 44px; min-height: 48px; display: grid; place-items: center; align-content: center; gap: 4px; color: var(--text-2); font-size: 14px; border-radius: 10px; transition: background .18s, color .18s; }
    .p-bottom-nav a svg { width: 20px; height: 20px; }
    .p-bottom-nav a[aria-current="page"] { color: var(--primary-hi); background: var(--primary-soft); }
    .p-main { padding-bottom: calc(72px + var(--safe-bottom)); }
    .account-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
    .account-shortcuts a { gap: 8px; padding: 12px; }
    .account-shortcuts a svg:last-child { display: none; }
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .inv-hero { grid-template-columns: 1fr; }
    .plan-grid { grid-template-columns: 1fr; }
    .imp-grid { grid-template-columns: 1fr; }
    .sub-traffic-nums { grid-template-columns: 1fr 1fr; }
    .l-hero { padding-top: calc(var(--nav-h) + var(--safe-top) + 44px); }
}

/* ============================================================
   Micro-interactions: skeleton / stagger / ambient glow
   ============================================================ */
.n-skel { position: relative; overflow: hidden; background: rgba(148, 163, 184, 0.08); border-radius: 8px; }
.n-skel::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.16), transparent);
    animation: skelSweep 1.4s ease-in-out infinite;
}
@keyframes skelSweep { to { transform: translateX(100%); } }

.stagger > * { animation: cardIn .18s cubic-bezier(.21, 1.02, .73, 1) both; }
.stagger > *:nth-child(1) { animation-delay: .03s; }
.stagger > *:nth-child(2) { animation-delay: .09s; }
.stagger > *:nth-child(3) { animation-delay: .15s; }
.stagger > *:nth-child(4) { animation-delay: .21s; }
.stagger > *:nth-child(5) { animation-delay: .27s; }
.stagger > *:nth-child(6) { animation-delay: .33s; }
.stagger > *:nth-child(7) { animation-delay: .39s; }
.stagger > *:nth-child(8) { animation-delay: .45s; }
@keyframes cardIn { from { transform: translateY(14px); } to { transform: none; } }
/* JS-settled fallback: if animation clocks never tick (rare envs), snap to final state */
body.n-anim-settled .stagger > *, body.n-anim-settled .n-view { animation: none; }

.p-empty-icon { display: grid; place-items: center; margin: 0 auto 12px; color: var(--primary-hi); }
.p-empty-icon svg { width: 20px; height: 20px; }

/* empty-state illustration */
.n-empty .ill { position: relative; width: 92px; height: 92px; margin: 0 auto 14px; }
.n-empty .ill i {
    position: absolute; border-radius: 50%; display: block;
    border: 1px solid rgba(47, 123, 255, 0.2);
}
.n-empty .ill i:nth-child(1) { inset: 0; opacity: .45; }
.n-empty .ill i:nth-child(2) { inset: 13px; border-color: rgba(47, 123, 255, 0.35); }
.n-empty .ill .core {
    position: absolute; inset: 27px; border-radius: 15px; display: grid; place-items: center;
    background: var(--primary-grad); color: #fff;
    box-shadow: 0 10px 26px rgba(47, 123, 255, 0.35);
}
.n-empty .ill .core svg { width: 22px; height: 22px; }

/* numerals */
.stat-cell b, .inv-stat b, .n-table .mono, .sub-traffic-nums b, .sub-hero .ring .ring-txt b, .balance-chip b {
    font-variant-numeric: tabular-nums;
}
.stat-cell b, .inv-stat b { background: var(--primary-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* chart tooltip */
.traffic-chart { position: relative; }
.traffic-chart svg text { fill: var(--text-3); }
.chart-tip {
    position: absolute; z-index: 5; pointer-events: none; opacity: 0; transition: opacity .18s;
    background: rgba(14, 20, 36, 0.96); border: 1px solid var(--line-soft); border-radius: 9px;
    padding: 7px 11px; font-size: 12px; line-height: 1.6; white-space: nowrap;
    box-shadow: var(--shadow-2); transform: translate(-50%, -110%);
}
.chart-tip b { font-family: var(--mono); }
.chart-tip .tu { color: var(--primary-hi); }
.chart-tip .td { color: #22d3ee; }

/* ---- dashboard smart tips ---- */
.p-tip {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-bottom: 14px; padding: 12px 16px; border-radius: 12px;
    font-size: 13.5px; animation: cardIn .18s ease both;
}
.p-tip svg { width: 17px; height: 17px; flex: none; }
.p-tip .n-btn { margin-left: auto; }
.p-tip-warn { background: linear-gradient(90deg, rgba(251, 191, 36, 0.14), rgba(251, 191, 36, 0.03)); border: 1px solid rgba(251, 191, 36, 0.35); }
.p-tip-warn svg { color: var(--amber); }
.p-tip-info { background: linear-gradient(90deg, rgba(47, 123, 255, 0.14), rgba(47, 123, 255, 0.03)); border: 1px solid rgba(47, 123, 255, 0.35); }
.p-tip-info svg { color: var(--primary-hi); }

/* ---- dashboard bottom row ---- */
.dash-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; align-items: stretch; }
.dash-row3 .p-card { display: flex; flex-direction: column; }
.mini-list { display: grid; gap: 2px; flex: 1; align-content: start; }
.mini-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; cursor: pointer; transition: background .15s; }
.mini-item:hover { background: rgba(148, 163, 184, 0.06); }
.mini-item b { font-size: 13.5px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-item .m-meta { font-size: 12px; color: var(--text-3); font-family: var(--mono); white-space: nowrap; }
.region-list { display: grid; gap: 2px; flex: 1; align-content: start; }
.region-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; transition: background .15s; }
.region-row:hover { background: rgba(148, 163, 184, 0.06); }
.region-row .r-name { font-size: 13.5px; font-weight: 600; min-width: 58px; }
.region-row .r-bar { flex: 1; height: 6px; border-radius: 99px; background: rgba(148, 163, 184, 0.12); overflow: hidden; }
.region-row .r-bar i { display: block; height: 100%; background: linear-gradient(90deg, #34d399, #059669); border-radius: 99px; transition: width .6s ease; }
.region-row .r-cnt { font-size: 12px; color: var(--text-3); font-family: var(--mono); white-space: nowrap; }
.sup-body { flex: 1; }
.sup-notice {
    display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin-bottom: 12px;
    border-radius: 10px; background: rgba(148, 163, 184, 0.05); border: 1px solid var(--line-soft);
    cursor: pointer; transition: border-color .16s;
}
.sup-notice:hover { border-color: rgba(47, 123, 255, 0.4); }
.sup-notice svg { width: 15px; height: 15px; color: var(--primary-hi); flex: none; margin-top: 2px; }
.sup-notice b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-notice span { font-size: 11.5px; color: var(--text-3); }
.sup-actions { display: grid; gap: 8px; margin-top: 12px; }
.sup-actions .n-btn { justify-content: flex-start; }
.p-footer { padding: 20px 26px 26px; text-align: center; color: var(--text-3); font-size: 12px; }
.p-footer a { color: var(--text-3); border-bottom: 1px dotted var(--text-3); }

/* ---- plan card enhancements ---- */
.plan-card .pc-price b { background: var(--primary-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plan-card.reco {
    border-color: transparent;
    background: linear-gradient(var(--panel-solid-2), var(--panel-solid)) padding-box,
                linear-gradient(165deg, rgba(90, 156, 255, 0.7), rgba(90, 156, 255, 0.08) 52%, rgba(90, 156, 255, 0.45)) border-box;
    box-shadow: var(--shadow-1);
}
.plan-card.reco:hover { transform: translateY(-4px) scale(1.01); border-color: transparent; }

/* ---- ring glow ---- */
.sub-hero .ring svg .ring-prog { filter: drop-shadow(0 0 7px var(--primary-glow)); }

/* ---- node cards v2 ---- */
.node-card { position: relative; }
.node-card.off .nd-head b { color: var(--text-2); }
.nd-sig { display: flex; align-items: flex-end; gap: 3px; height: 24px; flex: none; }
.nd-sig i { width: 4px; border-radius: 2px; background: var(--green); box-shadow: 0 0 6px rgba(52, 211, 153, 0.4); }
.node-card.off .nd-sig i { background: var(--text-3); box-shadow: none; opacity: .4; }
.nd-group-head {
    display: flex; align-items: center; gap: 10px;
    margin: 24px 0 12px; font-size: 13.5px; font-weight: 700; color: var(--text-2);
}
.nd-group { grid-column: 1 / -1; }
.nd-group .node-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-top: 12px; }
.nd-group-head::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }
.nd-group-head .cnt { font-size: 12px; color: var(--text-3); font-weight: 500; }

/* protocol badge colors */
.node-tag.np-hysteria, .node-tag.np-hysteria2 { color: #34d399; background: rgba(52, 211, 153, 0.1); border-color: rgba(52, 211, 153, 0.28); }
.node-tag.np-vless { color: #5b97ff; background: rgba(47, 123, 255, 0.1); border-color: rgba(47, 123, 255, 0.28); }
.node-tag.np-vmess { color: #a78bfa; background: rgba(139, 92, 246, 0.1); border-color: rgba(139, 92, 246, 0.28); }
.node-tag.np-trojan { color: #fb7185; background: rgba(251, 113, 133, 0.1); border-color: rgba(251, 113, 133, 0.28); }
.node-tag.np-shadowsocks { color: #22d3ee; background: rgba(34, 211, 238, 0.1); border-color: rgba(34, 211, 238, 0.28); }
.node-tag.np-tuic { color: #fbbf24; background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.28); }
.node-tag.np-anytls { color: #94a3b8; background: rgba(148, 163, 184, 0.1); border-color: rgba(148, 163, 184, 0.28); }
.node-tag.np-v2node { color: #f97362; background: rgba(249, 115, 98, 0.1); border-color: rgba(249, 115, 98, 0.28); }

/* ---- chart draw-in ---- */
.traffic-chart svg .cl { stroke-dasharray: 2600; stroke-dashoffset: 2600; animation: drawIn 1.15s ease-out .12s forwards; }
.traffic-chart svg .cf { opacity: 0; animation: cfIn .7s ease-out .65s forwards; }
@keyframes drawIn { to { stroke-dashoffset: 0; } }
@keyframes cfIn { to { opacity: 1; } }
body.n-anim-settled .traffic-chart svg .cl { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
body.n-anim-settled .traffic-chart svg .cf { animation: none; opacity: 1; }

/* UX: shared controls, content, and final responsive rules (after component defaults). */
:focus-visible { outline: 2px solid var(--primary-hi); outline-offset: 4px; }
[hidden] { display: none !important; }
.n-switch { border: 0; padding: 0; }
.n-text-button, button.auth-back { background: none; border: 0; padding: 0; color: var(--primary-hi); font: inherit; cursor: pointer; }
button.auth-back { color: var(--text-2); }
.n-field-help, .auth-contact, .l-registration-note, .l-illustration-note, .n-illustration-note { color: var(--text-2); font-size: 13px; line-height: 1.7; }
.auth-contact { margin-top: 20px; text-align: center; }
.auth-contact a { color: var(--primary-hi); }
.n-password-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; border-radius: 6px; padding: 8px; background: transparent; color: var(--text); cursor: pointer; font-size: 13px; }
.n-input-wrap:has(.n-password-toggle) input { padding-right: 66px; }
.n-illustration-note { text-align: center; margin: 18px 0 0; }
.l-hero-illustration { min-width: 0; }
.p-main, .p-content, .p-card, .sub-info, .dash-grid > *, .dash-row3 > *, .stat-grid > *, .plan-grid > * { min-width: 0; }
.sub-plan { flex-wrap: wrap; }
.sub-traffic-nums b { overflow-wrap: anywhere; }
.p-card-h { gap: 12px; }
.p-card-h h3 { flex-shrink: 0; }
.n-modal-body { min-height: 0; }
.n-modal-foot { flex-wrap: wrap; }
.n-modal-close { min-width: 44px; min-height: 44px; }
.n-modal img[alt$="二维码"] { image-rendering: pixelated; }
.reco-ribbon { right: 12px; top: 12px; transform: none; width: auto; padding: 3px 10px; border-radius: 6px; }
.price-note, .traffic-note { font-size: 13px; color: var(--text-2); line-height: 1.7; }
.node-filters { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.node-filters label { display: grid; gap: 6px; flex: 1 1 150px; color: var(--text-2); font-size: 13px; }
.node-filters .n-input { min-width: 0; width: 100%; }
.setup-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0; counter-reset: setup; }
.setup-steps > * { padding: 16px; border: 1px solid var(--line-soft); border-radius: var(--r-md); list-style: none; }
.setup-platforms { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
.setup-guide { line-height: 1.8; }
.setup-guide a { color: var(--primary-hi); }
.chart-empty { min-height: 92px; height: auto; padding: 24px 14px; }
.traffic-chart:has(.chart-empty) { min-height: 0; height: auto; }
@media (max-width: 1080px) {
    .l-hero-illustration { display: none; }
    .dash-row3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
    .dash-row3 { grid-template-columns: minmax(0, 1fr); }
    .nd-group .node-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
    .p-tip { flex-wrap: wrap; }
    .p-tip > span { min-width: 180px; }
    .p-burger { width: 44px; height: 44px; }
}
@media (max-width: 560px) {
    .stat-grid { gap: 10px; }
    .stat-cell { padding: 14px 12px; gap: 10px; }
    .stat-cell .s-ic { width: 30px; height: 30px; border-radius: 9px; }
    .stat-cell b { font-size: 20px; }
    .stat-cell span { font-size: 12px; }
    .sub-hero-in { gap: 18px; }
    .sub-hero .ring { width: 100px; height: 100px; }
    .sub-actions { display: flex; flex-wrap: wrap; gap: 8px; }
    .sub-actions .n-btn { flex: 1 1 auto; }
    .sub-traffic-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .sub-traffic-nums > div { padding: 10px 8px; }
    .p-card-h:has(#od-filter) { flex-direction: column; align-items: flex-start; }
    #od-filter { width: 100%; gap: 6px; }
    #od-filter .kb-cat { padding: 7px 10px; white-space: nowrap; }
    .setup-steps { grid-template-columns: minmax(0, 1fr); }
    .node-filters { gap: 8px; }
    .node-filters > input { flex-basis: 100%; }
    .n-input, .n-select, .n-textarea, .copy-row .n-input { font-size: 16px; }
    .n-btn { min-height: 44px; min-width: 44px; }
    .p-top .p-burger, .p-top-right > a { min-width: 44px; min-height: 44px; display: grid; place-items: center; }
    .n-modal-mask { padding: 12px; }
    .n-modal { width: 100%; max-height: calc(100dvh - 24px); }
    .n-modal-head, .n-modal-body, .n-modal-foot { padding: 16px; }
    .n-modal-foot .n-btn-primary { flex: 1 1 auto; }
    .plan-card { padding: 20px; }
    .pc-head h3 { overflow-wrap: anywhere; padding-right: 28px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .traffic-chart svg .cl { stroke-dasharray: none; stroke-dashoffset: 0; }
    .traffic-chart svg .cf { opacity: 1; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}
/* Native buttons keep the theme's text and layout, with clear keyboard focus. */
button.kb-item, button.kb-cat, button.pc-detail-link { font: inherit; color: var(--text); text-align: left; }
button.kb-item { width: 100%; }
button.kb-cat { font-size: 13px; }
button.kb-cat.on { color: #fff; }
button.pc-detail-link { color: var(--primary-hi); font-size: 13px; }
.setup-guide { margin-top: 16px; }
.subscription-setup { margin-bottom: 16px; }
.setup-selectors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.setup-selectors label { display: block; margin-bottom: 8px; color: var(--text-2); }
.setup-selectors .n-select { width: 100%; }
.setup-recommendation { margin: 16px 0 12px; }
.setup-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.setup-alternatives { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.setup-alternatives .n-btn { min-height: 44px; border: 0; }
.setup-guide-dialog .setup-steps { grid-template-columns: minmax(0, 1fr); }
.setup-details { margin-top: 16px; }
.setup-details > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 8px; font-weight: 600; }
.setup-details > summary::before { content: '+'; color: var(--primary-hi); }
.setup-details[open] > summary::before { content: '−'; }
@media (max-width: 560px) {
    .setup-selectors { gap: 12px; }
    .subscription-setup .n-select, .subscription-setup .n-input { font-size: 16px; min-height: 44px; }
    .subscription-setup .n-btn { min-height: 44px; min-width: 44px; }
    .setup-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
    .setup-actions .n-btn { white-space: normal; text-align: center; }
}
.setup-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 18px; }
.setup-steps > li { counter-increment: setup; background: rgba(148,163,184,.025); }
.setup-steps > li::before { content: counter(setup); display: block; width: 28px; height: 28px; line-height: 28px; text-align: center; color: var(--primary-hi); background: var(--primary-soft); border-radius: 50%; margin-bottom: 12px; font-weight: 700; }
.setup-steps p { color: var(--text-2); font-size: 14px; line-height: 1.8; }
.setup-guide + .kb-cats { margin-top: 20px; }
details > summary { cursor: pointer; color: var(--text); font-weight: 600; }
details.p-card > summary { padding: 3px 0; }
details[open] > summary { margin-bottom: 18px; }
@media (max-width: 1080px) { .setup-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .setup-steps { grid-template-columns: minmax(0, 1fr); } }

/* Dashboard: core subscription and pending tasks precede optional details. */
.dashboard-summary .sub-info { min-width: 0; }
.dashboard-summary .sub-plan h2 { overflow-wrap: anywhere; }
.dashboard-summary .sub-actions { flex-direction: column; min-width: 160px; }
.dashboard-summary .sub-meta div, .dashboard-summary .sub-traffic-nums span { font-size: 14px; color: var(--text-2); }
.dashboard-summary .dashboard-remaining { background: rgba(148, 163, 184, 0.05); border-color: var(--line-soft); }
.dashboard-summary .dashboard-remaining b { font-size: 19px; color: var(--text); }
.dashboard-summary > h2 { margin: 0 0 8px; font-size: 20px; }
.dashboard-summary > p, .dashboard-status-note { font-size: 14px; color: var(--text-2); }
.dashboard-status-note { margin: 12px 0 0; }
.dashboard-tasks { margin-top: 24px; }
.dashboard-tasks h2 { font-size: 18px; margin: 0; }
.dashboard-tasks .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dashboard-tasks .stat-cell span { font-size: 14px; color: var(--text-2); }
.traffic-overview { display: flex; flex-direction: column; gap: 14px; }
.traffic-overview > #tf-stats { margin: 0; }
.tf-percent { min-width: 4ch; font-variant-numeric: tabular-nums; color: var(--text-2); }
@media (min-width: 761px) {
    .dashboard-tasks:not(.dashboard-tasks-empty) { display: flex; align-items: center; gap: 20px; margin-top: 16px; }
    .dashboard-tasks h2 { flex: none; font-size: 16px; }
    .dashboard-tasks .stat-grid { flex: 1; margin: 0; }
    .dashboard-tasks .stat-cell { padding: 12px 16px; }
    .dashboard-tasks .stat-cell .s-ic { width: 32px; height: 32px; }
    .dashboard-tasks .stat-cell > div:last-child { display: flex; align-items: center; gap: 12px; }
    .traffic-overview > #tf-stats { order: -1; }
    .dashboard-traffic details[data-dashboard-fold="traffic"] { padding: 18px 24px; }
    .dashboard-traffic [data-dashboard-fold] > summary { margin-bottom: 4px; }
    .dashboard-traffic [data-dashboard-fold] .chart-legend { margin-bottom: 4px; }
}
.dashboard-shortcuts { display: grid; gap: 10px; }
.dashboard-shortcuts .n-btn { justify-content: flex-start; }
.dash-grid details[data-dashboard-fold], .dash-row3 details[data-dashboard-fold] { display: block; }
[data-dashboard-fold] > summary { font-size: 16px; min-height: 44px; align-content: center; }
[data-dashboard-fold] .chart-legend { margin: 0 0 12px; font-size: 14px; color: var(--text-2); }
.dashboard-more { display: inline-block; padding: 10px 0; min-height: 44px; color: var(--primary-hi); font-size: 14px; }
[data-dashboard-fold] .r-summary { display: block; margin: 0 0 12px; font-size: 14px; color: var(--text-2); }
.dashboard-module-error p { color: var(--text-2); font-size: 14px; }
[data-dashboard-fold] .mini-item, [data-dashboard-fold] .region-row { min-height: 44px; }
@media (max-width: 560px) {
    .dashboard-summary { padding: 20px; }
    .dashboard-summary .sub-hero-in { display: block; }
    .dashboard-summary .ring { position: absolute; top: 16px; right: 16px; width: 64px; height: 64px; }
    .dashboard-summary .ring svg { width: 64px; height: 64px; }
    .dashboard-summary .ring .ring-txt b { font-size: 14px; }
    .dashboard-summary .ring .ring-txt span { display: none; }
    .dashboard-summary .sub-plan { padding-right: 68px; min-height: 40px; }
    .dashboard-summary .sub-plan h2 { font-size: 20px; }
    .dashboard-summary .sub-meta { gap: 12px 20px; }
    .dashboard-summary .sub-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 20px; gap: 8px; }
    .dashboard-summary .sub-actions .n-btn { padding: 10px 8px; }
    .dashboard-summary .sub-traffic-nums > div { padding: 10px 6px; }
    .dashboard-summary .sub-traffic-nums b { font-size: 14px; }
    .dashboard-summary .dashboard-remaining b { font-size: 15px; }
}
/* Compact account views with native disclosures. */
.p-card,.plan-card{border-color:var(--line-soft);border-radius:var(--r-md)}
.p-top h1{font-size:24px}.dash-row3{align-items:start}
[data-dashboard-fold]:not([open]){padding:6px 18px}
[data-dashboard-fold]:not([open])>summary{min-height:44px;padding:0}
.nd-group>summary,.renewal-rules>summary{min-height:44px;align-content:center}
.nd-group:not([open])>summary{margin-bottom:0}
.setup-store-note,.renewal-rules p{font-size:14px;line-height:1.7;color:var(--text-2)}
.pf-security-title{font-size:16px;padding-top:18px;border-top:1px solid var(--line-soft)}
.kb-item-copy{flex:1;min-width:0;display:grid;gap:6px}.kb-item-copy b{overflow-wrap:anywhere}.kb-item-copy .tk-time{margin:0}
#od-filter{flex-wrap:nowrap;overflow-x:auto;max-width:100%}#od-filter .kb-cat{flex-shrink:0;min-height:44px}
.current-plan-reset{margin-bottom:20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}.current-plan-reset p{margin:0;flex:1;color:var(--text-2)}
/* Desktop traffic management stays compact alongside the recharge section. */
@media (min-width: 861px) {
    .current-plan-reset { max-width: 960px; margin-top: 16px; padding: 20px 24px; gap: 16px 24px; }
    .current-plan-reset p { flex: 1; line-height: 1.65; }
    .current-plan-reset .n-btn { flex: 0 0 auto; margin-left: auto; background: var(--primary-action); border-color: var(--primary-action); color: #fff; box-shadow: 0 4px 14px rgba(47,123,255,.18); }
    .current-plan-reset .n-btn:hover { background: var(--primary-action); border-color: var(--primary-action); }
}
.dashboard-tasks-empty{padding:14px 18px;border:1px solid var(--line-soft);border-radius:var(--r-md)}.dashboard-tasks-empty h2{display:inline;font-size:16px;margin-right:12px}.dashboard-tasks-empty p{display:inline;margin:0;color:var(--text-2)}
@media(min-width:561px){.account-shortcuts a:nth-child(-n+4){display:none}.account-shortcuts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){
.p-top h1{font-size:22px}.subscription-summary{padding:16px}.subscription-summary .sub-hero-in{display:block}
.subscription-summary .ring{position:absolute;top:16px;right:16px;width:64px;height:64px}.subscription-summary .ring svg{width:64px;height:64px}.subscription-summary .ring-txt b{font-size:14px}.subscription-summary .ring-txt span{display:none}
.subscription-summary .sub-plan{padding-right:66px;min-height:40px}.subscription-summary .sub-plan h2{font-size:20px}.subscription-summary .sub-traffic-nums{margin-top:12px}.subscription-summary .sub-traffic-nums>div{padding:6px 4px}.subscription-summary .sub-traffic-nums b{font-size:16px}.subscription-summary .sub-meta{gap:6px 14px}.subscription-summary .sub-meta div{font-size:14px}
.subscription-summary .sub-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}.subscription-summary .sub-actions .n-btn{padding:8px;font-size:14px;white-space:normal}
.subscription-setup{padding:16px}.subscription-setup .p-card-h{margin-bottom:12px}.setup-selectors{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.setup-selectors label{font-size:14px;margin-bottom:6px}.setup-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.setup-actions .n-btn{padding:8px;font-size:14px}.setup-manual{margin-top:12px;padding-top:4px}
.plan-card{padding:16px}.plan-card .pc-head{margin-bottom:10px}.plan-card .pc-ic{width:36px;height:36px}.plan-card .pc-price b{font-size:28px}.plan-card .pc-price{margin-bottom:8px}.plan-card .price-note{margin:6px 0}.plan-card .pc-bottom{padding-top:8px}.plan-card .pc-detail-link{min-height:44px}.pf-grid .p-card{padding:16px}.pf-row{padding:12px 0}
}
.p-content details.p-card>summary{min-height:44px;align-content:center}
@media(max-width:860px){.p-content .n-btn,.p-content input,.p-content select{min-height:44px;min-width:44px}.p-content input,.p-content select{font-size:16px}}
@media(max-width:560px){
.subscription-summary .ring .ring-txt span{display:none}.subscription-summary .ring .ring-txt b{font-size:14px}
.plan-card .pc-head{margin:0}.plan-card .pc-price{margin:6px 0}.plan-card .pc-price b{font-size:26px}.plan-card .price-note{margin:0 0 6px}.plan-card .period-tabs{margin-bottom:6px;flex-wrap:nowrap;overflow-x:auto}.plan-card .period-tabs button{flex:1 0 70px}
.plan-card .pc-detail-link{margin-top:0}.plan-card .pc-bottom{padding-top:4px}.plan-card .pc-description{margin-top:0}.current-plan-reset{margin-top:16px}
}
@media(max-width:560px){
.plan-card{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 8px}.plan-card>*{grid-column:1/-1}.plan-card .pc-description:not([open]),.plan-card .pc-detail-link{grid-column:auto}.plan-card .pc-detail-link{align-self:center;justify-self:end;font-size:14px}.plan-card .pc-bottom .n-btn{padding:8px 12px}
}
@media(max-width:560px){.p-content>details.p-card:not([open]){padding:6px 18px}.p-content>details.p-card:not([open])>summary{padding:0}}
@media(max-width:860px){
#p-burger{min-width:44px;min-height:44px}
.p-content .n-switch{width:44px;height:44px;border-radius:0;background:transparent}
.p-content .n-switch::before{content:"";position:absolute;width:40px;height:22px;left:2px;top:11px;border-radius:99px;background:rgba(148,163,184,.2)}
.p-content .n-switch.on::before{background:var(--primary-grad)}
.p-content .n-switch::after{left:5px;top:14px}
}

/* Public entry and authentication: compact, branded task access. */
.l-section[id] { scroll-margin-top: calc(var(--nav-h) + var(--safe-top) + 20px); }
.l-hero { padding-bottom: 44px; padding-top: calc(var(--nav-h) + var(--safe-top) + 44px); }
.l-section { padding: 44px 0; }
.l-head { margin-bottom: 24px; }
.l-feats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.l-feat { padding: 24px; }
.l-start-art { padding: 30px; border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: var(--panel); }
.l-start-art > div { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line-soft); }
.l-start-art > div:last-child { border-bottom: 0; }
.l-start-art svg { width: 24px; height: 24px; color: var(--primary-hi); }
.l-net { max-width: 720px; margin: 0 auto; }
.l-nav-burger { width: 44px; height: 44px; }
.l-links a, .l-nav-cta .login, .l-footer a { display: inline-flex; align-items: center; min-height: 44px; }
.l-plans-empty .n-btn { margin: 6px; }
.auth { grid-template-columns: minmax(280px, .7fr) minmax(0, 1fr); }
.auth-side { padding: 36px; }
.auth-side .a-mid { max-width: 320px; }
.auth-side .a-points { gap: 12px; }
.auth-mobile-brand { display: none; }
.auth-card .a-head .m-logo { display: none; }
.auth-tabs a, .auth-alt a, .auth-contact a, .auth-alt .n-text-button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.auth-main button.auth-back { min-width: 44px; min-height: 44px; padding: 8px 12px; }
.auth .n-password-toggle { min-width: 44px; min-height: 44px; top: 50%; transform: translateY(-50%); }
.auth .code-btn { min-width: 44px; min-height: 44px; top: 50%; transform: translateY(-50%); }
.auth input { font-size: 16px; }
@media (max-width: 1080px) {
    .auth { grid-template-columns: 1fr; }
    .auth-main { justify-content: flex-start; padding: 96px 24px 32px; }
    .auth-mobile-brand { display: flex; position: absolute; top: 22px; left: 24px; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; }
    .auth-mobile-brand svg, .auth-mobile-brand img { width: 28px; height: 28px; }
    .auth-main .auth-back { left: auto; right: 12px; top: 14px; }
    .auth-card .a-head { margin-bottom: 20px; }
    .auth-tabs { margin-bottom: 20px; }
}
@media (max-width: 560px) {
    .l-hero { padding-top: calc(var(--nav-h) + var(--safe-top) + 28px); padding-bottom: 28px; }
    .l-hero-copy h1 { font-size: 32px; }
    .l-hero-copy .sub { margin-bottom: 16px; }
    .l-section { padding: 28px 0; }
    .l-feats { grid-template-columns: 1fr; gap: 12px; }
    .l-feat { padding: 18px; }
    .l-feat-ic { float: left; margin: 0 14px 8px 0; }
    .l-feat h3 { margin-top: 0; }
    .l-feat p { clear: both; }
    .l-plans-empty { padding: 24px 16px; }
    .l-plans-empty .lock-ic { display: none; }
    .l-plans-empty .n-btn { display: flex; margin: 8px 0 0; }
    .auth-main { padding: 88px 20px 24px; }
    .auth-mobile-brand { left: 20px; font-size: 16px; }
}
.auth .n-input { min-height: 44px; }
.l-brand { min-height: 44px; }
.l-nav-burger { flex-shrink: 0; }
.l-nav-cta .n-btn { min-height: 44px; }
@media (max-width: 768px) { .l-nav-cta .login { display: none; } }
/* Configured names and contacts must not widen public grid tracks. */
.l-footer-in > div, .l-nav-in > .l-brand, .auth-contact { min-width: 0; }
.l-footer a, .auth-contact a { max-width: 100%; overflow-wrap: anywhere; }
.l-brand > span:last-child, .auth-side .a-brand > span { min-width: 0; overflow-wrap: anywhere; }
.l-nav-in > .l-brand { flex: 1 1 auto; }
.l-nav-in > .l-brand > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-mobile-brand { max-width: calc(100% - 150px); }
.auth-mobile-brand > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-mobile-brand > svg, .auth-mobile-brand > img { flex-shrink: 0; }
.l-footer-bar-in > span { min-width: 0; overflow-wrap: anywhere; }

/* Navigation shortcuts: quiet surfaces with full-size interaction targets. */
.dashboard-shortcuts a.n-btn, .account-shortcuts a {
    min-height: 44px; border-color: transparent;
    background: rgba(148, 163, 184, 0.06);
}
.dashboard-shortcuts a.n-btn:hover, .account-shortcuts a:hover {
    border-color: transparent; background: rgba(148, 163, 184, 0.12);
}
.dashboard-shortcuts a.n-btn:active, .account-shortcuts a:active {
    background: rgba(148, 163, 184, 0.18);
}
.n-btn-ghost:not(.n-btn-sm) { min-height: 44px; }
.n-btn-ghost:active { background: rgba(148, 163, 184, 0.18); }

/* Complete front-end workflow components; all rules stay scoped to their owners. */
.n-read-state { max-width: 560px; margin: 100px auto; padding: 24px; }
.n-read-state .n-btn { margin: 8px 8px 0 0; }
.n-field-error { color: var(--red); font-size: 14px; margin: 8px 0 0; }
.n-field [aria-invalid="true"] { box-shadow: 0 0 0 1px var(--red); }
.subscription-summary.sub-hero { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 12px 16px; min-height: 56px; margin-bottom: 16px; background: var(--panel); border: 1px solid var(--line-soft); box-shadow: none; }
.subscription-plan-name { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
.subscription-summary > a { display: inline-flex; align-items: center; min-height: 44px; color: var(--primary-hi); font-size: 14px; }
.connection-unavailable { color: var(--text-2); font-size: 14px; line-height: 1.7; }
.connection-unavailable a { color: var(--primary-hi); }
.subscription-workspace { margin-top: 16px; }
.node-help-row { margin: -4px 0 12px; }
.node-help-row .setup-guide-link, .renewal-help { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--primary-hi); font: inherit; font-size: 14px; padding: 4px 8px; cursor: pointer; }
.order-summary { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line-soft); }
.order-summary h4 { font-size: 18px; margin: 12px 0 6px; overflow-wrap: anywhere; }
.order-summary p { margin: 0; color: var(--text-2); }
.order-summary b { font-size: 24px; color: var(--text); font-variant-numeric: tabular-nums; }
.pd-merchant { margin-top: 16px; }
.pd-merchant > h4 { font-size: 16px; margin: 0 0 8px; }
.pd-merchant .n-field-help { font-size: 14px; line-height: 1.7; }
.pd-terms > summary, .ticket-options > summary, .invite-records > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--primary-hi); font-size: 14px; }
.ticket-options { margin: 4px 0 12px; }
.invite-zero { display: block; }
.invite-records { padding: 0 16px; background: var(--panel); border-radius: var(--r-md); }
.renewal-rule-text { font-size: 14px; line-height: 1.8; color: var(--text-2); margin: 0; }
.pf-column { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pf-column > .p-card { margin: 0; }
/* Equal desktop cards follow the tallest content without fixed-height clipping. */
@media (min-width: 861px) {
    .pf-grid { grid-auto-rows: 1fr; align-items: stretch; }
    .pf-column { display: contents; }
    .pf-grid [data-profile-order="1"] { grid-area: 1 / 1; }
    .pf-grid [data-profile-order="2"] { grid-area: 1 / 2; }
    .pf-grid [data-profile-order="3"] { grid-area: 2 / 1; }
    .pf-grid [data-profile-order="4"] { grid-area: 2 / 2; }
}
.pf-subscription-card .pf-label { flex: 1; min-width: 0; }
.pf-subscription-card .renewal-help { display: flex; justify-content: flex-start; padding: 0; margin-top: 2px; font-size: 12px; }
.pf-subscription-card .pf-row { align-items: center; }
.pf-subscription-card .pf-row:last-child { padding-bottom: 0; }
.pf-traffic-reset-row .n-btn { flex-shrink: 0; }
@media (max-width: 860px) {
    .pf-column { display: contents; }
    .pf-grid [data-profile-order="1"] { order: 1; }
    .pf-grid [data-profile-order="2"] { order: 2; }
    .pf-grid [data-profile-order="3"] { order: 3; }
    .pf-grid [data-profile-order="4"] { order: 4; }
    .pf-traffic-reset-row { flex-wrap: wrap; }
    .pf-traffic-reset-row .pf-label { flex-basis: 100%; }
}
@media (max-width: 1080px) { .subscription-full-guide { display: none; } }
@media (max-width: 560px) {
    .subscription-summary.sub-hero { padding: 8px 12px; gap: 4px 8px; }
    .subscription-summary .n-badge { font-size: 12px; }
    .subscription-setup .setup-selectors { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
    .subscription-setup .setup-client-toggle { width: 100%; padding: 8px; }
    .subscription-setup .setup-actions { grid-template-columns: minmax(0, 1fr); }
    .plan-card .pc-detail-link { display: inline-flex; grid-column: auto; justify-self: stretch; justify-content: center; }
    .plan-card .pc-bottom { grid-column: auto; padding-top: 0; }
    .plan-card .pc-bottom .n-btn { min-height: 44px; padding: 8px; line-height: 1.5; font-size: 14px; }
    .plan-card .pc-quota-rule { font-size: 14px; margin: 4px 0; }
}

/* Mobile reading and navigation polish; retain original traffic semantics. */
.account-section-title { font-size: 15px; margin: 0 0 10px; color: var(--text-2); }
.account-overview { display: flex; align-items: center; gap: 24px; }
.account-identity { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.account-identity > img, .account-avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; }
.account-avatar { display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-hi); }
.account-avatar svg { width: 24px; height: 24px; }
.account-identity > div { min-width: 0; }
.account-identity h2 { font-size: 16px; line-height: 1.5; margin: 0; overflow-wrap: anywhere; }
.account-identity p, .account-last-login { color: var(--text-2); font-size: 13px; line-height: 1.6; margin: 4px 0 0; }
.account-balances { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 0; }
.account-balances dt { color: var(--text-2); font-size: 13px; }
.account-balances dd { font-size: 20px; line-height: 1.5; margin: 4px 0 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.account-commission { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; max-width: 100%; color: var(--text); border-radius: 8px; }
.account-commission > span { min-width: 0; overflow-wrap: anywhere; }
.account-commission svg { flex: none; width: 16px; height: 16px; color: var(--primary-hi); }
.account-commission:hover { color: var(--primary-hi); }
.account-actions, .p-title-phone { display: none; }
.account-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.shop-guidance, .setup-next-step { color: var(--text-2); font-size: 14px; line-height: 1.65; margin: 0 0 16px; }
.setup-next-step { margin: 10px 0 0; }
.pf-security-card { grid-column: 1 / -1; }
@media (min-width: 861px) {
    .account-overview { margin-bottom: 16px; }
    .pf-security-card { grid-column: auto; }
    .node-card { padding: 14px 16px; }
    .node-card .nd-head { margin-bottom: 8px; }
    .nd-group-head { margin: 12px 0 6px; }
    .nd-group .node-grid { margin-top: 6px; gap: 12px; }
    .p-content:has(#knowledge-article) > .n-btn { margin-left: max(0px, calc((100% - 800px) / 2)); }
    /* List pages follow the content column; detail views keep their reading width. */
    .p-content > .p-card:has(#nt-list), .p-content > .p-card:has(#tk-list),
    .p-content > .builtin-guide, #kb-cats, #kb-list, #iv-body { max-width: none; }
    #tkd-card { max-width: 1120px; }
}
.pf-grid .pf-row { gap: 12px; }
.pf-grid .pf-row > .mono, .plan-card .pc-price b, .sub-traffic-nums b { font-family: var(--font); font-variant-numeric: tabular-nums; }
.pf-grid .p-card > div > div { min-width: 0; overflow-wrap: anywhere; }
.chart-empty p { font-size: 14px; line-height: 1.6; margin: 8px 0; }
@media (max-width: 560px) {
    html { scroll-padding-top: 76px; scroll-padding-bottom: calc(88px + var(--safe-bottom)); }
    .p-main { padding-bottom: calc(88px + var(--safe-bottom)); }
    .p-content :is(a, button, input, select, summary) { scroll-margin-bottom: 16px; }
    .dashboard-summary .sub-traffic-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .dashboard-summary .dashboard-remaining { grid-column: 1 / -1; grid-row: 1; }
    .dashboard-summary .dashboard-remaining b { font-size: 24px; }
    .dashboard-summary .sub-actions { margin-top: 12px; }
    .dashboard-summary .sub-meta { margin-top: 10px; }
    .dashboard-summary .sub-meta b { font-family: var(--font); }
    .p-content :is(.pf-label small, .price-note, .setup-store-note) { color: var(--text-2); }
    .setup-actions .n-btn { white-space: normal; }
    .account-section-title { font-size: 14px; }
}

/* Purchase confirmation and recovery handoff. */
.purchase-summary { padding: 14px 16px; background: var(--primary-soft); border-radius: var(--r-sm); margin-bottom: 16px; }
.purchase-summary p, .checkout-fee { font-size: 14px; color: var(--text-2); line-height: 1.65; margin: 8px 0 0; }
.checkout-plan { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.checkout-result { padding: 20px 0; line-height: 1.7; }
.checkout-result h3 { font-size: 20px; margin: 0 0 12px; }
.checkout-result p { color: var(--text-2); }
.setup-help { display: flex; gap: 8px 16px; flex-wrap: wrap; margin: 8px 0; }
.setup-help a { min-height: 44px; display: inline-flex; align-items: center; font-size: 14px; }
.onboarding-guide { line-height: 1.7; color: var(--text-2); }
@media(max-width:560px) { .purchase-summary { padding: 12px; } .checkout-summary { min-width: 0; } }

.setup-help .setup-guide-link { min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--primary-hi); font: inherit; cursor: pointer; text-align: left; }
.connection-issues { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.connection-issues .n-btn { min-height: 44px; font-size: 14px; flex: 1 1 auto; }
.connection-issues [aria-pressed="true"] { background: var(--primary-soft); color: var(--primary-hi); }
.connection-resolution h4 { font-size: 16px; margin: 0 0 12px; }
.connection-resolution ol { padding-left: 22px; margin: 0 0 18px; color: var(--text-2); font-size: 14px; line-height: 1.7; }
.connection-resolution li + li { margin-top: 8px; }
.connection-resolution label { display: block; font-size: 14px; color: var(--text-2); margin-bottom: 8px; }
.connection-resolution > p { color: var(--text-2); font-size: 14px; line-height: 1.6; }
.connection-help-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.connection-help-actions .n-btn { min-height: 44px; white-space: normal; }
.connection-private-note { font-size: 13px; }
@media(max-width:860px) {
    .account-overview { flex-direction: column; align-items: stretch; gap: 16px; }
    .account-balances { gap: 12px; }
    .account-balances > div { padding: 12px; background: rgba(148,163,184,.06); border-radius: var(--r-sm); }
}
@media(max-width:560px) {
    .account-overview { padding: 16px; }
    .account-balances dd { font-size: 18px; }
    .account-desktop, .p-top-account .p-top-right, .p-title-desktop { display: none; }
    .p-title-phone { display: inline; }
    .account-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 16px 0; }
    .account-actions > a { display: flex; align-items: center; gap: 6px; min-height: 56px; padding: 12px; border: 0; border-radius: var(--r-md); background: rgba(148,163,184,.06); color: var(--text); font-size: 14px; }
    .account-actions > a:hover { background: rgba(148,163,184,.12); }
    .account-actions > a:active { background: rgba(148,163,184,.18); }
    .account-actions > a > svg { flex: none; width: 18px; height: 18px; color: var(--primary-hi); }
    .account-action-count { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; margin-left: auto; padding: 0 3px; border-radius: 99px; background: var(--primary-soft); color: var(--primary-hi); font-size: 12px; }
    .p-top .p-burger, .p-top h1, .p-top-right > a { flex-shrink: 0; }
    .p-top h1 { white-space: nowrap; }
    .p-top-right, .p-top-right .balance-chip, .p-top-right .balance-chip b { min-width: 0; }
    .p-top-right .balance-chip b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .p-top-right .balance-chip svg { flex-shrink: 0; }
    .connection-issues { display: grid; grid-template-columns: 1fr; gap: 6px; margin-bottom: 16px; }
    .connection-issues .n-btn { justify-content: flex-start; padding: 10px 12px; }
    .connection-help-actions .n-btn { flex: 1 1 auto; font-size: 14px; }
}
@media(max-width:360px) { .p-top-right .balance-chip { display: none; } }
.setup-details { scroll-margin-top: 80px; }

/* Mobile essentials first: status, connect, purchase, account. */
.mobile-home-help, .mobile-dashboard-notice, .dashboard-usage, .setup-client-toggle { display: none; }
@media(max-width:560px) {
    .dashboard-summary ~ .dash-grid, .dashboard-summary ~ .dash-row3,
    .dashboard-summary ~ #d-strips { display: none; }
    .dashboard-summary .sub-actions { grid-template-columns: 1fr; }
    .dashboard-summary .sub-actions .dashboard-renew { min-height: 44px; padding: 0; background: transparent; color: var(--primary-hi); }
    .dashboard-summary .sub-actions .dashboard-renew:hover { background: rgba(148,163,184,.06); }
    .dashboard-summary .sub-actions .dashboard-renew-redundant { display: none; }
    .dashboard-tasks-empty, .dashboard-tasks[data-mobile-empty="true"] { display: none; }
    .dashboard-tasks .stat-grid { grid-template-columns: 1fr; gap: 8px; }
    .dashboard-tasks .stat-cell { padding: 12px 14px; min-height: 56px; }
    .dashboard-tasks .stat-cell > div:last-child { display: flex; align-items: center; gap: 12px; }
    .dashboard-tasks .stat-cell .s-ic { width: 32px; height: 32px; }
    .dashboard-usage { display: block; margin-top: 8px; }
    .dashboard-summary .dashboard-remaining { position: relative; }
    .dashboard-summary .dashboard-remaining > span { padding-right: 76px; }
    .dashboard-usage-label { line-height: 1.6; }
    .dashboard-usage-label a { display: inline-flex; align-items: center; justify-content: flex-end; min-height: 44px; min-width: 76px; position: absolute; top: 4px; right: 12px; font-size: 14px; color: var(--primary-hi); }
    .dashboard-usage-meter { height: 6px; margin-top: 10px; overflow: hidden; border-radius: 99px; background: rgba(148,163,184,.2); }
    .dashboard-usage-meter i { display: block; height: 100%; background: var(--primary); border-radius: inherit; }
    .mobile-home-help, .mobile-dashboard-notice:not([hidden]) { display: block; margin: 16px 0 0; padding: 14px 16px; font-size: 14px; }
    .mobile-home-help .p-card-h, .mobile-dashboard-notice .p-card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
    .mobile-home-help h2, .mobile-dashboard-notice h2 { margin: 0; font-size: 16px; }
    .mobile-home-help .p-card-h a, .mobile-dashboard-notice .p-card-h a { display: inline-flex; align-items: center; min-height: 44px; color: var(--primary-hi); }
    .mobile-help-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
    .mobile-help-actions button, .mobile-notice-action { display: flex; align-items: center; min-height: 44px; gap: 8px; padding: 10px 12px; border: 0; border-radius: var(--r-sm); background: rgba(148,163,184,.06); color: var(--text); font: inherit; cursor: pointer; text-align: left; }
    .mobile-help-actions button:hover, .mobile-notice-action:hover { background: rgba(148,163,184,.12); }
    .mobile-help-actions button:active, .mobile-notice-action:active { background: rgba(148,163,184,.18); }
    .mobile-help-actions svg, .mobile-notice-action > svg { flex: none; width: 18px; height: 18px; color: var(--primary-hi); }
    .mobile-notice-action { width: 100%; }
    .mobile-notice-action > span { flex: 1; min-width: 0; }
    .mobile-notice-action b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 500; overflow-wrap: anywhere; }
    .mobile-notice-action time { display: block; margin-top: 4px; font-size: 14px; color: var(--text-2); }
    .setup-alternatives { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
    .setup-alternatives .n-btn { min-width: 0; padding: 10px 8px; white-space: normal; font-size: 14px; }
    .subscription-full-guide { display: none; }
    .subscription-summary { padding: 16px; }
    .subscription-summary .ring, .subscription-summary .sub-actions,
    .subscription-summary .sub-traffic-nums > div:first-child,
    .subscription-summary .sub-traffic-nums > div:last-child,
    .subscription-summary .sub-meta > div:not(:first-child) { display: none; }
    .subscription-summary .sub-plan { padding-right: 0; }
    .subscription-summary .sub-traffic-nums { display: block; margin-top: 8px; }
    .subscription-summary .sub-traffic-nums > div { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; }
    .subscription-summary .sub-meta { margin-top: 8px !important; }
    .subscription-summary .sub-meta > div:first-child { display: flex; gap: 12px; }
    .subscription-summary .sub-meta b { margin: 0; }
    .setup-selectors { grid-template-columns: minmax(0,1fr); }
    .setup-client-toggle { display: inline-flex; margin-top: 4px; }
    .setup-client-choice:not(.is-open) { display: none; }
    .setup-client-choice.is-open { margin-top: 8px; }
    .setup-recommendation { margin: 12px 0 8px; }
    .setup-actions { grid-template-columns: 1fr; }
    .setup-actions .n-btn { min-height: 44px; }
    .setup-help { gap: 0 12px; }
    .setup-store-note { margin: 6px 0; }
    .plan-card .period-tabs, .plan-card .pc-description { display: none; }
    .plan-card .pc-price { margin: 10px 0; }
    .account-shortcuts { grid-template-columns: 1fr; gap: 0; border-radius: var(--r-md); overflow: hidden; background: rgba(148,163,184,.04); }
    .account-shortcuts a { border-radius: 0; min-height: 48px; padding: 12px 14px; background: transparent; border-bottom-color: var(--line-soft); }
    .account-shortcuts a:last-child { border-bottom-color: transparent; }
    .account-shortcuts a svg:last-child { display: block; }
}

@media(max-width:560px) {
    .dashboard-tasks .stat-cell[data-empty="true"] { display: none; }
    .setup-guide-dialog .setup-steps { gap: 8px; }
    .setup-guide-dialog .setup-steps > li { padding: 12px; }
}

@media(max-width:560px) {
    .dashboard-summary .ring,
    .dashboard-summary .sub-traffic-nums > div:not(.dashboard-remaining) { display: none; }
    .dashboard-summary .sub-plan { padding-right: 0; }
    .dashboard-summary .sub-traffic-nums { display: block; }
    .dashboard-summary .dashboard-remaining { padding: 12px; }
}

.setup-guide p a { text-decoration: underline; text-underline-offset: 3px; }

/* Icon navigation uses surface feedback; keyboard focus remains explicit. */
.p-top .p-burger:hover, .l-nav-burger:hover { background: rgba(148, 163, 184, 0.1); }
.p-top .p-burger:active, .l-nav-burger:active, .p-announce-close:active { background: rgba(148, 163, 184, 0.18); }

/* Density polish: keep useful content and soften idle secondary controls. */
.pc-detail-link, #pf-tg-bind, .n-btn-danger, #od-filter .kb-cat:not(.on) {
    border-color: transparent;
}
.pc-detail-link, #pf-tg-bind { background: var(--primary-soft); }
.pc-detail-link:hover, #pf-tg-bind:hover { border-color: transparent; background: rgba(47,123,255,.18); }
.dashboard-tasks-empty { display: none; }
.dashboard-traffic { grid-template-columns: minmax(0,1fr); }
.dashboard-traffic .chart-empty { min-height: 0; padding: 12px; }
.pc-current { display: inline-flex; justify-self: start; align-self: start; margin-bottom: 8px; }
.node-filter-toggle { display: none; }
.node-advanced { display: flex; flex: 2 1 312px; gap: 12px; min-width: 0; }
.node-selected:not([hidden]) { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: -8px 0 12px; color: var(--text-2); font-size: 14px; }
.invite-no-code, .invite-transfer-empty { font-size: 14px; color: var(--text-2); line-height: 1.6; margin: 8px 0; }
.invite-details .n-empty { padding: 20px 12px; }
#tf-chart .chart-empty { min-height: 0; padding: 12px; }
@media(min-width:1081px) {
    .subscription-workspace { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: 14px; align-items: stretch; margin-top: 14px; }
    .subscription-workspace .subscription-setup, .subscription-workspace .subscription-full-guide { margin-top: 0; margin-bottom: 0; }
    .subscription-workspace [data-setup-guide] { display: none; }
    .subscription-full-guide .setup-steps { grid-template-columns: minmax(0,1fr); gap: 8px; }
    .subscription-full-guide .setup-steps > li { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 4px 12px; padding: 12px; }
    .subscription-full-guide .setup-steps > li::before { grid-row: 1 / 3; margin: 0; }
    .subscription-full-guide .setup-steps p { grid-column: 2; margin: 0; line-height: 1.6; }
}
@media(max-width:560px) {
    .dashboard-summary { padding: 16px; }
    .dashboard-summary .sub-plan { min-height: 32px; }
    .dashboard-summary .sub-actions { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); }
    .dashboard-summary .sub-actions .n-btn { min-width: 0; min-height: 44px; padding: 8px; white-space: normal; }
    .dashboard-summary .sub-actions .dashboard-renew { background: rgba(148,163,184,.06); }
    .dashboard-summary .sub-actions:has(.dashboard-renew-redundant) { grid-template-columns: minmax(0,1fr); }
    .mobile-home-help, .mobile-dashboard-notice:not([hidden]) { padding: 12px; margin-top: 12px; }
    .mobile-home-help .p-card-h, .mobile-dashboard-notice .p-card-h { margin-bottom: 4px; }
    .mobile-notice-action { padding: 8px 10px; }
    .plan-card { padding: 14px; }
    .plan-card .price-note { display: none; }
    .plan-card .pc-price { margin: 8px 0; }
    .plan-card .pc-per { margin-top: 4px; }
    .deposit-details { padding: 4px 12px; margin-top: 12px; }
    .node-filters { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; align-items: end; gap: 8px; margin-bottom: 12px; }
    .node-filters label { min-width: 0; font-size: 13px; }
    .node-filters select { min-width: 0; width: 100%; }
    .node-filter-toggle { display: inline-flex; min-height: 44px; padding: 8px 12px; }
    .node-advanced { display: none; grid-column: 1 / -1; }
    .node-advanced.is-open { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding: 12px; background: rgba(148,163,184,.04); border-radius: var(--r-sm); }
    .node-selected:not([hidden]) { margin-top: 0; }
    .nd-group .node-grid { grid-template-columns: minmax(0,1fr); gap: 6px; }
    .node-card { padding: 10px 12px; }
    .nd-head { gap: 8px; margin-bottom: 4px; }
    .nd-head b { font-size: 14px; }
    .nd-tags { gap: 4px; margin-top: 0; }
    .nd-tags .node-tag { font-size: 12px; padding: 2px 6px; }
    .inv-hero { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
    .inv-stat { padding: 12px 6px; border-radius: var(--r-md); }
    .inv-stat b { font-size: 20px; overflow-wrap: anywhere; }
    .inv-stat span { font-size: 12px; }
    .invite-link-card, .invite-transfer, .invite-details > .p-card { padding: 14px; }
    .invite-link-card .p-card-h { gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
    .invite-link-card .p-card-h h3 { font-size: 15px; }
    .invite-details { gap: 12px; }
    .pf-grid .p-card-h { margin-bottom: 8px; }
}
.dashboard-traffic details:has(.chart-empty) { padding: 12px 20px; }
.dashboard-traffic details:has(.chart-empty) > summary { margin-bottom: 4px; }
.dashboard-traffic .chart-empty p { margin: 4px 0; }
.dashboard-traffic details:has(.chart-empty) .chart-legend { display: none; }
.dashboard-traffic .chart-empty { display: block; padding: 4px 0; text-align: left; }
.chart-empty > a { display: inline-flex; align-items: center; min-height: 44px; color: var(--primary-hi); }
.invite-details .n-empty .ill { width: 64px; height: 64px; margin-bottom: 8px; }
@media(min-width:1081px) {
    .dashboard-summary ~ .dash-row3 > [data-dashboard-fold] { padding: 18px; }
}

/* Plan comparison and first-connection finishing. */
.plan-card .pc-head > div:last-child { min-width: 0; flex: 1; position: relative; }
.plan-card .pc-head h3 { min-height: 25px; padding-right: 76px; overflow-wrap: anywhere; }
.pc-title-badges { position: absolute; right: 0; top: 0; display: flex; flex-direction: column; gap: 3px; }
.plan-card .pc-title-badges .n-badge { position: static; margin: 0; font-size: 11px; padding: 3px 6px; }
.pc-quota-rule { margin: 4px 0 8px; color: var(--text-3); font-size: 12px; line-height: 1.5; }
.pc-custom .pc-head h3 { padding-right: 0; }
.pc-custom .pc-title-badges { position: static; flex-direction: row; flex-wrap: wrap; }
.subscription-workspace { margin-top: 14px; }
.subscription-workspace .subscription-full-guide { margin-top: 14px; }
.kb-cat { min-height: 44px; }
.builtin-guide > h2 { font-size: 17px; margin: 0 0 12px; }
#pricing .l-head { margin-bottom: 14px; }
#pricing .l-plans-empty { padding: 12px; background: transparent; border: 0; }
#pricing .l-plans-empty .n-btn { margin: 0; }
@media(min-width:1081px) { .subscription-workspace .subscription-full-guide { margin-top: 0; } }
@media (min-width: 1081px) {
    .subscription-workspace { grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); }
    .subscription-setup .setup-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
    .subscription-setup .setup-actions .n-btn { white-space: normal; min-height: 44px; text-align: center; }
}
@media(max-width:760px) {
 .setup-actions .n-btn { white-space: normal; overflow-wrap: anywhere; }
}

.knowledge-guide-actions { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.knowledge-guide-actions > div { flex: 1 1 200px; }
.knowledge-device-guide { margin-bottom: 14px; }
@media(max-width:560px) {
 .current-plan-reset { align-items: stretch; flex-direction: column; gap: 10px; }
 .current-plan-reset p { margin: 0; }
 .current-plan-reset .n-btn { width: 100%; }
}

/* Keep controls clear of display cutouts and the home indicator. */
#app, .panel, .auth { min-height: 100dvh; }
.p-top { height: calc(62px + var(--safe-top)); padding-top: var(--safe-top); flex-shrink: 0; padding-right: max(26px, calc(var(--safe-right) + 14px)); }
.p-content, .p-footer { padding-right: max(26px, calc(var(--safe-right) + 14px)); }
.p-side { padding-top: var(--safe-top); padding-bottom: var(--safe-bottom); padding-left: var(--safe-left); width: calc(var(--side-w) + var(--safe-left)); }
.p-main { margin-left: calc(var(--side-w) + var(--safe-left)); }
.p-bottom-nav { padding-left: max(8px, var(--safe-left)); padding-right: max(8px, var(--safe-right)); }
.n-toasts { top: calc(18px + var(--safe-top)); right: calc(18px + var(--safe-right)); width: min(360px, calc(100vw - 36px - var(--safe-left) - var(--safe-right))); }
.n-modal-mask { padding: calc(20px + var(--safe-top)) calc(20px + var(--safe-right)) calc(20px + var(--safe-bottom)) calc(20px + var(--safe-left)); }
.n-modal { max-height: calc(100dvh - 40px - var(--safe-top) - var(--safe-bottom)); }
.n-modal-head, .n-modal-foot { flex-shrink: 0; }
.n-modal-body { min-height: 0; }
.l-nav { height: calc(var(--nav-h) + var(--safe-top)); padding-top: var(--safe-top); }
.l-nav-in, .l-wrap { padding-left: calc(24px + var(--safe-left)); padding-right: calc(24px + var(--safe-right)); }
.l-mobile-menu { top: calc(var(--nav-h) + var(--safe-top)); padding-left: calc(20px + var(--safe-left)); padding-right: calc(20px + var(--safe-right)); max-height: calc(100dvh - var(--nav-h) - var(--safe-top) - var(--safe-bottom)); overflow-y: auto; }
.l-footer { padding-bottom: calc(24px + var(--safe-bottom)); }
@media (max-width: 1080px) {
    .auth-main { padding: calc(96px + var(--safe-top)) calc(24px + var(--safe-right)) calc(32px + var(--safe-bottom)) calc(24px + var(--safe-left)); }
    .auth-mobile-brand { top: calc(22px + var(--safe-top)); left: calc(24px + var(--safe-left)); }
    .auth-main .auth-back { top: calc(14px + var(--safe-top)); right: calc(12px + var(--safe-right)); }
}
@media (max-width: 860px) {
    .p-main { margin-left: 0; }
    .p-top { padding-left: calc(16px + var(--safe-left)); padding-right: calc(16px + var(--safe-right)); }
    .p-content { padding-left: calc(14px + var(--safe-left)); padding-right: calc(14px + var(--safe-right)); }
    .p-announce { margin-left: calc(14px + var(--safe-left)); margin-right: calc(14px + var(--safe-right)); }
    .p-footer { padding-left: calc(14px + var(--safe-left)); padding-right: calc(14px + var(--safe-right)); }
    html { scroll-padding-top: calc(76px + var(--safe-top)); scroll-padding-bottom: calc(88px + var(--safe-bottom)); }
    .n-modal-mask { padding: calc(12px + var(--safe-top)) calc(12px + var(--safe-right)) calc(12px + var(--safe-bottom)) calc(12px + var(--safe-left)); }
    .n-modal { max-height: calc(100dvh - 24px - var(--safe-top) - var(--safe-bottom)); }
}
@media (max-width: 560px) {
    .auth-main { padding: calc(88px + var(--safe-top)) calc(20px + var(--safe-right)) calc(24px + var(--safe-bottom)) calc(20px + var(--safe-left)); }
    .auth-mobile-brand { left: calc(20px + var(--safe-left)); }
}

@media (min-width: 561px) { .p-main { padding-bottom: var(--safe-bottom); } }

/* Nova landing / Connection, in order. Scoped to keep account pages unchanged. */
.l-page { --landing-ink:#0a0e15; --landing-paper:#e9e9e3; --landing-muted:#9ea8b9; color:#edf0f6; background:var(--landing-ink); overflow:clip; }
.l-page .l-wrap,.l-page .l-nav-in { max-width:1328px; padding-left:max(48px,var(--safe-left)); padding-right:max(48px,var(--safe-right)); margin:auto; }
.l-page .l-nav { background:rgba(10,14,21,.86); backdrop-filter:blur(16px); border-bottom:1px solid #ffffff0f; height:calc(88px + var(--safe-top)); padding-top:var(--safe-top); }
.l-page .l-nav-in { height:100%; }
.l-page .l-brand { font-weight:650; letter-spacing:-.04em; }
.l-page .l-brand .mark { filter:none; }
.l-page .l-links { margin-left:auto; gap:20px; }
.l-page .l-links a { font-size:13px; padding:12px 4px; border-radius:0; }
.l-page .l-links a:hover { background:transparent; }
.l-page .l-nav-cta { margin-left:42px; gap:20px; }
.l-page .n-btn { border-radius:4px; box-shadow:none; min-height:46px; font-weight:550; gap:24px; transition:background .2s,transform .2s; }
.l-page .n-btn-primary { background:#e6edff; border-color:#e6edff; color:#101624; }
.l-page .n-btn-primary:hover { background:#fff; border-color:#fff; transform:translateY(-2px); box-shadow:none; }
.l-page .n-btn-lg { padding:16px 22px; font-size:14px; }
.l-page .n-btn-primary svg { color:inherit; }
.l-page .n-btn-ghost { background:transparent; border-color:#ffffff40; color:#edf0f6; }
.l-page .l-text-link { display:inline-flex; align-items:center; gap:24px; font-size:14px; min-height:44px; color:inherit; text-decoration:none; }
.l-page .l-text-link span { font-size:20px; transition:transform .2s; }
.l-page .l-text-link:hover span { transform:translate(2px,-2px); }
.l-page a:focus-visible,.l-page button:focus-visible { outline:2px solid var(--primary-hi); outline-offset:6px; }
.l-page .l-skip { position:fixed; top:10px; left:20px; transform:translateY(-160%); z-index:999; padding:12px; background:#fff; color:#101624; }
.l-page .l-skip:focus { transform:none; }
.l-page main section { scroll-margin-top:calc(100px + var(--safe-top)); }
.l-page .l-section-index { display:flex; align-items:center; justify-content:space-between; gap:24px; font:11px/1.7 var(--mono); letter-spacing:.13em; text-transform:uppercase; color:var(--landing-muted); }
.l-page .l-section-index>span:first-child { display:flex; align-items:center; gap:10px; }
.l-page .l-section-index i { width:5px; height:5px; border-radius:100%; background:var(--primary-hi); box-shadow:0 0 16px var(--primary-hi); }
.l-page .l-hero { padding:calc(88px + var(--safe-top) + 58px) 0 0; overflow:visible; }
.l-page .l-hero::before { display:none; }
.l-page .l-hero-copy { position:relative; z-index:1; margin-top:50px; }
.l-page .l-hero-copy h1 { max-width:1000px; font-size:clamp(46px,6.5vw,94px); font-weight:500; line-height:1.16; letter-spacing:-.06em; margin:0; color:#f0f2f7; text-wrap:balance; overflow-wrap:anywhere; }
.l-page .l-hero-bottom { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:80px; margin-top:34px; align-items:start; }
.l-page .l-hero-copy .sub { max-width:560px; font-size:16px; line-height:1.9; color:#aab3c3; margin:0 0 24px; }
.l-page .l-hero-cta { display:flex; align-items:center; gap:28px; }
.l-page .l-registration-note { color:#9ba6b8; font-size:12px; margin:18px 0 0; }
.l-page .l-hero-side { border-left:1px solid #ffffff29; padding-left:25px; margin:0; font-size:17px; line-height:1.85; letter-spacing:.05em; color:#d6dce8; }
.l-page .l-hero-side span { display:block; margin-top:20px; color:#8d99ad; font:10px/1.8 var(--mono); letter-spacing:.16em; }
.l-page .l-signal-art { margin:-26px -50px -12px; position:relative; color:var(--primary-hi); }
.l-page .l-signal-art::before { content:""; position:absolute; inset:12% 15%; background:radial-gradient(ellipse,#4d82ff0a,transparent 68%); pointer-events:none; }
.l-page .l-signal-svg { display:block; width:100%; height:auto; max-height:425px; }
.l-page .l-signal-dot { animation:landing-signal 7s ease-in-out infinite; }
@keyframes landing-signal { 0%,100% { opacity:.35; } 50% { opacity:1; } }
.l-page .l-hero-caption { display:flex; justify-content:space-between; gap:20px; padding:24px 0 28px; border-top:1px solid #ffffff19; color:#9ba6b8; font-size:12px; }
.l-page .l-hero-caption a { color:#d5ddea; }
.l-page .l-hero-caption a span { margin-left:26px; }
.l-page .l-process { background:var(--landing-paper); color:#1a212b; padding:72px 0 82px; }
.l-page .l-process .l-section-index { color:#535b66; }
.l-page .l-section-heading { display:grid; grid-template-columns:1.3fr 1fr; gap:80px; align-items:end; margin:58px 0 54px; }
.l-page h2 { font-size:clamp(32px,4vw,58px); line-height:1.28; letter-spacing:-.05em; font-weight:500; margin:0; }
.l-page .l-section-heading>p { color:#525966; font-size:16px; line-height:1.9; margin:0 0 5px; }
.l-page .l-process-list { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid #1a212b40; }
.l-page .l-process-list li { padding:26px 34px 4px; border-right:1px solid #1a212b26; }
.l-page .l-process-list li:first-child { padding-left:0; }
.l-page .l-process-list li:last-child { border:0; padding-right:0; }
.l-page .l-step-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:40px; }
.l-page .l-step-top>span { font:18px/1 var(--mono); color:#626975; }
.l-page .l-step-top svg { width:22px; height:22px; color:#404b60; }
.l-page .l-process-list h3 { font-size:19px; line-height:1.5; font-weight:550; letter-spacing:-.025em; margin:0 0 14px; }
.l-page .l-process-list p { color:#525966; font-size:14px; line-height:1.9; margin:0; }
.l-page .l-step-note { display:block; font:10px/1.6 var(--mono); letter-spacing:.1em; color:#606975; margin-top:30px; }
.l-page .l-workspace { padding:72px 0 96px; }
.l-page .l-workspace-grid { display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:center; margin-top:64px; }
.l-page .l-workspace-copy h2 { font-size:clamp(30px,3.1vw,44px); }
.l-page .l-workspace-copy h2 span { color:#a1b1c9; }
.l-page .l-workspace-copy>p { color:#9ea8b9; font-size:15px; line-height:1.9; margin:25px 0; }
.l-page .l-workspace-copy ul { list-style:none; padding:0; margin:30px 0; border-top:1px solid #ffffff1c; }
.l-page .l-workspace-copy li { display:flex; align-items:baseline; justify-content:space-between; gap:20px; border-bottom:1px solid #ffffff1c; padding:16px 0; }
.l-page .l-workspace-copy li>span { font-size:14px; white-space:nowrap; }
.l-page .l-workspace-copy li>p { font-size:12px; color:#9ea8b9; margin:0; }
.l-page .l-console-figure { margin:0; position:relative; }
.l-page .l-console { position:relative; background:linear-gradient(140deg,#17202e,#0d131e 65%); border:1px solid #c4d8ff30; border-radius:10px; padding:22px 26px 0; box-shadow:0 35px 100px #0004,0 0 80px #3267be08; transform:perspective(1200px) rotateY(-5deg) rotateX(2deg); }
.l-page .l-console-top { display:flex; justify-content:space-between; color:#a2b0c6; font:10px/1.7 var(--mono); letter-spacing:.13em; border-bottom:1px solid #ffffff1c; padding-bottom:18px; }
.l-page .l-console-top i { display:inline-block; height:5px; width:5px; background:var(--primary-hi); border-radius:50%; margin-right:8px; }
.l-page .l-console-main { text-align:center; padding:18px 0 30px; font-size:15px; }
.l-page .l-console-orbit { width:190px; max-width:100%; margin:auto; color:var(--primary-hi); }
.l-page .l-console-orbit svg { width:100%; display:block; }
.l-page .l-console-row { display:flex; justify-content:space-between; gap:12px; padding:18px 0; border-top:1px solid #ffffff14; font-size:13px; }
.l-page .l-console-row>span:last-child { color:#97a7bf; font-size:12px; }
.l-page .l-console-bottom { margin:6px -26px 0; padding:20px 26px; border-top:1px solid #ffffff1c; display:flex; justify-content:space-between; background:#ffffff03; font-size:11px; color:#a0aec3; }
.l-page .l-console-figure figcaption { text-align:center; font-size:11px; color:#96a1b4; margin-top:22px; letter-spacing:.06em; }
.l-page .l-questions { padding:58px 0 82px; border-top:1px solid #ffffff19; }
.l-page .l-faq-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:100px; margin-top:54px; }
.l-page .l-faq-grid>div>p { color:#9ea8b9; font-size:14px; line-height:1.8; margin:24px 0 0; }
.l-page .l-faq { width:100%; max-width:none; margin:0; }
.l-page .l-faq-item { border:none; border-bottom:1px solid #ffffff24; border-radius:0; background:transparent; margin:0; }
.l-page .l-faq-item:first-child { border-top:1px solid #ffffff24; }
.l-page .l-faq-q { padding:24px 0; gap:14px; font-size:15px; line-height:1.6; font-weight:450; }
.l-page .l-faq-q .q-ic { display:none; }
.l-page .l-faq-q .arr { color:#aab6c9; }
.l-page .l-faq-a>div { padding:0 28px 24px 0; font-size:14px; line-height:1.9; color:#a7b2c4; }
.l-page .l-outro { border-top:1px solid #ffffff19; padding:78px 0 86px; background:radial-gradient(ellipse at 100% 100%,#27467425,transparent 65%); }
.l-page .l-outro-kicker { color:#a3b6d5; font:10px/1.7 var(--mono); letter-spacing:.17em; }
.l-page .l-outro h2 { font-size:clamp(38px,5.2vw,74px); margin:28px 0 36px; }
.l-page .l-outro h2 span { color:#9bacc7; }
.l-page .l-outro .l-wrap>div { display:flex; flex-wrap:wrap; align-items:center; gap:32px; }
.l-page .l-footer { background:#080c12; border-top:1px solid #ffffff19; padding:0; margin-top:0; }
.l-page .l-footer-in { max-width:none; padding:52px 0 44px; grid-template-columns:2fr 1fr 1fr 1.4fr; gap:40px; }
.l-page .l-footer h4 { font-size:12px; font-weight:500; color:#c4cddb; letter-spacing:0; margin:0 0 20px; }
.l-page .l-footer ul { gap:0; }
.l-page .l-footer ul li { font-size:12px; margin:0; overflow-wrap:anywhere; }
.l-page .l-footer ul a { font-size:12px; }
.l-page .l-footer .f-brand p { font-size:12px; margin-top:20px; color:#939fb3; }
.l-page .l-footer-bar { display:flex; justify-content:space-between; gap:20px; padding:24px 0 max(24px,var(--safe-bottom)); border-top:1px solid #ffffff14; font-size:11px; color:#8f9bb0; }
.l-page .l-mobile-menu { top:calc(88px + var(--safe-top)); background:#0c111bf5; border-bottom:1px solid #ffffff26; }
@media(min-width:861px) { .l-page .l-mobile-menu { display:none; } }
@media(max-width:1080px) {
 .l-page .l-wrap,.l-page .l-nav-in { padding-left:max(32px,var(--safe-left)); padding-right:max(32px,var(--safe-right)); }
 .l-page .l-links { gap:12px; }.l-page .l-nav-cta { margin-left:20px; }
 .l-page .l-workspace-grid,.l-page .l-faq-grid { gap:48px; }
 .l-page .l-workspace-copy li { display:block; }.l-page .l-workspace-copy li>p { margin-top:7px; }
}
@media(max-width:860px) {
 .l-page .l-nav { height:calc(72px + var(--safe-top)); }.l-page .l-nav-cta,.l-page .l-links { display:none; }
 .l-page .l-nav-burger { display:grid; min-width:44px; min-height:44px; }.l-page .l-mobile-menu { top:calc(72px + var(--safe-top)); }
 .l-page .l-hero { padding-top:calc(72px + var(--safe-top) + 36px); }
 .l-page .l-hero-bottom { grid-template-columns:minmax(0,1fr) 160px; gap:40px; }
 .l-page .l-hero-side { font-size:14px; }.l-page .l-hero-copy { margin-top:36px; }
 .l-page .l-section-heading { gap:40px; }.l-page .l-process-list li { padding-left:22px; padding-right:22px; }
 .l-page .l-workspace-grid { grid-template-columns:1fr; gap:44px; }.l-page .l-console-figure { width:100%; max-width:520px; margin:auto; }
 .l-page .l-workspace-copy li { display:flex; }.l-page .l-workspace-copy li>p { margin:0; }
 .l-page .l-faq-grid { grid-template-columns:1fr; gap:32px; }.l-page .l-faq-grid h2 br { display:none; }
 .l-page .l-footer-in { grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }.l-page .f-brand { grid-column:1/-1; }
}
@media(max-width:560px) {
 .l-page .l-wrap,.l-page .l-nav-in { padding-left:max(22px,var(--safe-left)); padding-right:max(22px,var(--safe-right)); }
 .l-page .l-section-index { font-size:9px; letter-spacing:.08em; gap:12px; }.l-page .l-section-index>span:last-child { font-size:10px; letter-spacing:0; }
 .l-page .l-hero-copy { margin-top:32px; }.l-page .l-hero-copy h1 { font-size:clamp(39px,10.8vw,58px); line-height:1.22; letter-spacing:-.06em; }
 .l-page .l-hero-bottom { display:block; margin-top:24px; }.l-page .l-hero-side { display:none; }
 .l-page .l-hero-copy .sub { font-size:14px; line-height:1.9; margin-bottom:23px; }.l-page .l-hero-cta { gap:20px; flex-wrap:wrap; }
 .l-page .n-btn-lg { padding:13px 17px; font-size:13px; }.l-page .l-text-link { font-size:13px; gap:14px; }
 .l-page .l-registration-note { font-size:11px; margin-top:16px; }
 .l-page .l-signal-art { margin:7px -60px -4px; }.l-page .l-signal-svg { min-height:190px; }
 .l-page .l-hero-caption { padding:18px 0 22px; font-size:10px; gap:12px; }.l-page .l-hero-caption a span { margin-left:8px; }
 .l-page .l-process { padding:36px 0 40px; }.l-page .l-section-heading { display:block; margin:32px 0; }.l-page h2 { font-size:34px; }
 .l-page .l-section-heading>p { font-size:13px; line-height:1.9; margin-top:20px; }
 .l-page .l-process-list { display:block; }.l-page .l-process-list li,.l-page .l-process-list li:first-child,.l-page .l-process-list li:last-child { padding:22px 0; border-right:0; border-bottom:1px solid #1a212b26; position:relative; padding-left:54px; }
 .l-page .l-process-list li:last-child { border-bottom:0; padding-bottom:0; }.l-page .l-step-top { position:absolute; left:0; top:27px; margin:0; }.l-page .l-step-top>span { font-size:13px; }.l-page .l-step-top svg { display:none; }
 .l-page .l-process-list h3 { font-size:16px; margin-bottom:10px; }.l-page .l-process-list p { font-size:13px; }.l-page .l-step-note { margin-top:14px; font-size:9px; }
 .l-page .l-workspace { padding:36px 0 42px; }.l-page .l-workspace-grid { margin-top:34px; gap:30px; }.l-page .l-workspace-copy h2 { font-size:30px; }
 .l-page .l-workspace-copy>p { font-size:13px; margin:20px 0; }.l-page .l-workspace-copy li { gap:12px; }.l-page .l-workspace-copy li>span { font-size:13px; }.l-page .l-workspace-copy li>p { font-size:11px; }
 .l-page .l-console { transform:none; padding:18px 20px 0; }.l-page .l-console-orbit { width:150px; }.l-page .l-console-main { padding:8px 0 24px; font-size:14px; }.l-page .l-console-row { padding:16px 0; font-size:12px; }.l-page .l-console-row>span:last-child { font-size:11px; }.l-page .l-console-bottom { margin-left:-20px; margin-right:-20px; padding:16px 20px; }.l-page .l-console-figure figcaption { margin-top:15px; font-size:10px; }
 .l-page .l-questions { padding:36px 0 42px; }.l-page .l-faq-grid { margin-top:30px; gap:28px; }.l-page .l-faq-grid>div>p { font-size:12px; margin-top:14px; }.l-page .l-faq-q { padding:20px 0; font-size:14px; }.l-page .l-faq-a>div { font-size:13px; }
 .l-page .l-outro { padding:42px 0 48px; }.l-page .l-outro h2 { font-size:40px; margin:22px 0 28px; }.l-page .l-outro .l-wrap>div { gap:18px; }
 .l-page .l-footer-in { padding:32px 0 20px; grid-template-columns:1fr 1fr; gap:24px; }.l-page .l-footer-in>div:last-child:nth-child(4) { grid-column:1/-1; }.l-page .l-footer h4 { margin-bottom:15px; }.l-page .l-footer .f-brand p { margin-top:12px; }.l-page .l-footer ul li { margin-bottom:0; }.l-page .l-footer-bar { font-size:10px; }
}
@media(prefers-reduced-motion:reduce) { .l-page *, .l-page *::before, .l-page *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

/* Progress is tied to real sections, and the artwork draws once without hiding content. */
.l-page .l-links a[aria-current="location"] { color:#f0f3fb; box-shadow:0 1px 0 currentColor; }
.l-page .l-signal-strands path { stroke-dasharray:1; animation:landing-strand-in 1.8s ease-out both; }
@keyframes landing-strand-in { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
@media(prefers-reduced-motion:reduce) { .l-page .l-signal-strands path { animation:none; stroke-dasharray:none; } }

/* Nova 1.11.1: clear actions and a compact, explicitly illustrative account preview. */
.l-page .l-hero-copy h1 { letter-spacing:-.035em; }
.l-page .l-hero-side { font-size:15px; line-height:2; letter-spacing:0; }
.l-page .l-workspace-copy>p { max-width:420px; margin:24px 0; }
.l-page .l-console { transform:none; padding:24px; background:linear-gradient(145deg,#17202e,#0e141f); }
.l-page .l-console-top { font-family:var(--font); font-size:12px; letter-spacing:0; align-items:center; padding-bottom:18px; }
.l-page .l-console-top>span:last-child { border:1px solid #ffffff30; border-radius:4px; padding:3px 8px; color:#c2cddd; }
.l-page .l-demo-summary { padding:24px 0 20px; }
.l-page .l-demo-label { font-size:13px; color:#b1bed1; }
.l-page .l-demo-value { font:500 52px/1.3 var(--mono); letter-spacing:-.04em; margin:6px 0 18px; color:#eef2fa; }
.l-page .l-demo-value>span { font-size:18px; color:#aebcd0; letter-spacing:0; }
.l-page .l-demo-meter { height:5px; border-radius:9px; background:#ffffff16; overflow:hidden; }
.l-page .l-demo-meter>span { display:block; width:68.5%; height:100%; background:#92b8ee; border-radius:inherit; }
.l-page .l-demo-summary>p { color:#aab8cc; font-size:12px; margin:12px 0 20px; }
.l-page .l-demo-facts { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:0; }
.l-page .l-demo-facts dt { color:#aab8cc; font-size:12px; margin-bottom:8px; }
.l-page .l-demo-facts dd { font-size:14px; margin:0; color:#e1e8f2; }
.l-page .l-demo-tools { display:grid; grid-template-columns:1fr 1fr; gap:18px; border-top:1px solid #ffffff20; padding-top:20px; }
.l-page .l-demo-tools>div { display:flex; align-items:flex-start; gap:10px; font-size:13px; color:#e1e8f2; }
.l-page .l-demo-tools svg { width:17px; height:17px; flex-shrink:0; color:#b1c5e2; margin-top:2px; }
.l-page .l-demo-tools small { display:block; font-size:12px; line-height:1.6; color:#aab8cc; margin-top:7px; }
.l-page .l-console-figure figcaption { font-size:12px; letter-spacing:0; line-height:1.7; margin-top:14px; }
@media(max-width:560px) {
 .l-page .l-hero-copy h1 { font-size:clamp(36px,10vw,54px); line-height:1.26; letter-spacing:-.025em; }
 .l-page .l-section-index { font-size:11px; letter-spacing:.03em; }
 .l-page .l-section-index>span:last-child { display:none; }
 .l-page .l-hero-cta { gap:16px; }
 .l-page .l-registration-note { font-size:12px; line-height:1.75; margin-top:12px; }
 .l-page .l-hero-caption { font-size:12px; }
 .l-page .l-hero-caption>span { max-width:190px; }
 .l-page .l-section-heading { margin:24px 0; }
 .l-page .l-section-heading>p,.l-page .l-process-list p { font-size:14px; line-height:1.8; }
 .l-page .l-step-note { display:none; }
 .l-page .l-process-list li,.l-page .l-process-list li:first-child,.l-page .l-process-list li:last-child { padding-top:18px; padding-bottom:18px; }
 .l-page .l-step-top { top:23px; }
 .l-page .l-workspace-grid { gap:24px; margin-top:26px; }
 .l-page .l-workspace-copy>p { font-size:14px; line-height:1.85; margin:16px 0 8px; }
 .l-page .l-console { padding:20px; }
 .l-page .l-demo-summary { padding:20px 0; }
 .l-page .l-demo-value { font-size:44px; }
 .l-page .l-demo-tools { gap:12px; }
 .l-page .l-demo-tools>div { gap:7px; }
 .l-page .l-faq-grid { margin-top:24px; gap:20px; }
 .l-page .l-faq-grid>div>p,.l-page .l-faq-a>div { font-size:14px; }
 .l-page .l-outro { padding:32px 0 36px; }
 .l-page .l-outro h2 { margin:18px 0 24px; }
 .l-page .l-footer-in { gap:18px; padding:26px 0 18px; }
 .l-page .l-footer h4 { margin-bottom:8px; }
 .l-page .l-footer-bar { font-size:12px; padding-top:18px; }
}

/* Nova 1.12.0 — technology storefront; all overrides stay within the landing page. */
.l-tech { --landing-ink:#14171f; --landing-muted:#aeb9cb; background:#14171f; }
.l-tech .l-wrap,.l-tech .l-nav-in { max-width:1320px; padding-left:max(40px,var(--safe-left)); padding-right:max(40px,var(--safe-right)); }
.l-tech .l-nav { height:calc(76px + var(--safe-top)); background:#13171fe8; border-bottom:1px solid #ffffff0e; }
.l-tech .l-mobile-menu { top:calc(76px + var(--safe-top)); background:#171d29f7; }
.l-tech .l-brand { letter-spacing:-.02em; }
.l-tech .n-btn { border-radius:9px; gap:14px; font-weight:600; min-height:46px; }
.l-tech .n-btn-primary { background:var(--primary-action); border-color:transparent; color:#fff; box-shadow:0 8px 24px #2563eb30; }
.l-tech .n-btn-primary:hover { background:var(--primary-action); color:#fff; box-shadow:0 10px 28px #2563eb40; }
.l-tech .n-btn-ghost { background:#ffffff05; border-color:#ffffff29; color:#e3e9f5; }
.l-tech .n-btn-ghost:hover { background:#ffffff0c; border-color:#ffffff45; }
.l-tech .l-hero { position:relative; padding:calc(76px + var(--safe-top) + 82px) 0 90px; isolation:isolate; }
.l-tech .l-hero::before { display:block; content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at 88% 20%,#3060a72b,transparent 55%),radial-gradient(ellipse at 5% 80%,#6c42a821,transparent 45%); }
.l-tech .l-hero::after { content:""; position:absolute; inset:76px 0 0; z-index:-1; pointer-events:none; background-image:linear-gradient(#ffffff03 1px,transparent 1px),linear-gradient(90deg,#ffffff03 1px,transparent 1px); background-size:64px 64px; mask-image:linear-gradient(transparent,#000 25%,#000 70%,transparent); }
.l-tech .l-tech-hero-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:58px; align-items:center; }
.l-tech .l-hero-copy { margin:0; }
.l-tech .l-tech-eyebrow { display:inline-flex; align-items:center; gap:9px; padding:7px 12px; background:#ffffff05; border:1px solid #ffffff15; border-radius:40px; font-size:12px; color:#c4cfe0; margin-bottom:25px; }
.l-tech .l-tech-eyebrow i { width:6px; height:6px; border-radius:50%; background:#75d9b3; box-shadow:0 0 14px #75d9b333; }
.l-tech .l-tech-brand { color:var(--primary-hi); font-size:20px; font-weight:600; margin:0 0 12px; overflow-wrap:anywhere; }
.l-tech .l-hero-copy h1 { max-width:660px; font-size:clamp(38px,3.7vw,56px); font-weight:650; line-height:1.27; letter-spacing:-.035em; text-wrap:balance; }
.l-tech .l-hero-copy .sub { font-size:15px; line-height:1.9; margin:24px 0; max-width:560px; color:#b3bed0; }
.l-tech .l-hero-points { display:flex; flex-wrap:wrap; gap:12px 18px; list-style:none; margin:0 0 30px; padding:0; }
.l-tech .l-hero-points li { display:flex; align-items:center; gap:6px; font-size:12px; color:#c2cddd; }
.l-tech .l-hero-points svg { width:17px; height:17px; padding:3px; border-radius:50%; color:#83dfbb; background:#79dfb715; }
.l-tech .l-hero-cta { gap:14px; flex-wrap:wrap; }
.l-tech .l-registration-note { line-height:1.8; margin:16px 0 0; max-width:500px; color:#a5b1c5; }
.l-tech .l-tech-art { position:relative; height:520px; margin:0; min-width:0; }
.l-tech .l-tech-orbit { width:440px; height:440px; position:absolute; top:25px; left:50%; transform:translateX(-50%) rotate(-25deg); border:1px solid #659bfa27; border-radius:50%; box-shadow:0 0 90px #396bda12,inset 0 0 80px #4869ee08; }
.l-tech .l-tech-orbit::before { content:""; position:absolute; top:68px; right:48px; width:9px; height:9px; border:3px solid #a6c9ff; border-radius:50%; box-shadow:0 0 18px #7cafff; }
.l-tech .l-tech-orbit.orbit-two { width:350px; height:480px; top:5px; transform:translateX(-50%) rotate(40deg); border-color:#9a83fa18; box-shadow:none; }
.l-tech .l-stack-card { position:absolute; width:330px; padding:22px; border:1px solid #c0d4ff26; border-radius:17px; background:linear-gradient(135deg,#252e40,#1b2230); box-shadow:0 24px 55px #0005; }
.l-tech .l-stack-back { top:14px; left:5px; transform:rotate(-10deg); width:300px; height:190px; opacity:.72; }
.l-tech .l-stack-mid { top:98px; right:4px; height:175px; transform:rotate(7deg); background:linear-gradient(130deg,#253446,#202436); }
.l-tech .l-stack-front { top:174px; left:50%; transform:translateX(-50%) rotate(-3deg); z-index:2; width:350px; background:linear-gradient(140deg,#293348f5,#202637fa); }
.l-tech .l-stack-head { display:flex; align-items:center; gap:11px; font-size:14px; font-weight:600; color:#edf2fc; }
.l-tech .l-stack-head small { display:block; margin-top:3px; font:9px/1.5 var(--mono); letter-spacing:.1em; color:#a5b5ce; }
.l-tech .l-stack-icon { width:36px; height:36px; display:grid; place-items:center; border-radius:10px; color:#a9c8ff; background:#87aaff12; flex-shrink:0; }
.l-tech .l-stack-icon svg { width:21px; height:21px; }
.l-tech .l-stack-status { font-size:10px; font-weight:400; color:#a8e5d0; background:#66c6a312; border:1px solid #8be6c329; border-radius:20px; padding:4px 9px; margin-left:auto; white-space:nowrap; }
.l-tech .l-device-tags { display:flex; gap:9px; margin-top:22px; }
.l-tech .l-device-tags span { padding:9px 17px; border:1px solid #ffffff15; border-radius:7px; font-size:12px; color:#c6d3e7; }
.l-tech .l-stack-balance { margin-top:23px; display:flex; justify-content:space-between; align-items:baseline; gap:15px; }
.l-tech .l-stack-balance>span { font-size:12px; color:#b7c4d8; }
.l-tech .l-stack-balance strong { font:500 34px/1.3 var(--mono); color:#f2f5ff; }
.l-tech .l-stack-balance strong small { font-size:13px; color:#b7c4d8; }
.l-tech .l-stack-chart { margin-top:15px; position:relative; }
.l-tech .l-stack-chart svg { width:100%; display:block; }
.l-tech .l-stack-chart>span { position:absolute; left:0; bottom:4px; font-size:10px; color:#b6c4da; }
.l-tech .l-stack-meta { display:flex; justify-content:space-between; border-top:1px solid #ffffff0c; padding-top:12px; font-size:11px; color:#aebed5; }
.l-tech .l-stack-meta b { font-weight:500; color:#e3ebfa; margin-left:6px; }
.l-tech .l-tech-float { display:flex; gap:9px; align-items:center; position:absolute; left:8px; bottom:24px; z-index:3; padding:12px 15px; border-radius:10px; border:1px solid #bdd2fa24; background:#1d2735; font-size:12px; color:#cfdaed; box-shadow:0 10px 35px #0003; }
.l-tech .l-tech-float svg { width:16px; height:16px; color:#81d9b5; }
.l-tech .l-tech-art figcaption { position:absolute; bottom:-13px; left:0; right:0; text-align:center; color:#a5b1c5; font-size:11px; line-height:1.7; }
.l-tech .l-benefits { padding:64px 0 72px; border-top:1px solid #ffffff09; background:radial-gradient(ellipse at 50% 100%,#4056a10c,transparent 65%); }
.l-tech .l-tech-heading { text-align:center; margin-bottom:38px; }
.l-tech .l-tech-kicker { color:#9dbbfb; font:11px/1.8 var(--mono); letter-spacing:.14em; }
.l-tech h2 { font-size:clamp(28px,3vw,40px); font-weight:600; line-height:1.4; letter-spacing:-.025em; }
.l-tech .l-tech-heading h2 { margin:12px 0; }
.l-tech .l-tech-heading p { color:#aab7cc; font-size:14px; margin:0; line-height:1.8; }
.l-tech .l-benefit-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.l-tech .l-benefit-grid article { border:1px solid #afc7ff19; border-radius:14px; padding:28px; background:linear-gradient(135deg,#202736,#191f2b); }
.l-tech .l-benefit-icon { width:44px; height:44px; display:grid; place-items:center; color:#a1c0ff; background:#608ef515; border:1px solid #8db0ff15; border-radius:12px; margin-bottom:22px; }
.l-tech .l-benefit-icon svg { width:23px; height:23px; }
.l-tech .l-benefit-grid h3 { font-size:18px; margin:0 0 13px; color:#edf2fc; }
.l-tech .l-benefit-grid p { font-size:14px; color:#b0bdd2; line-height:1.85; margin:0 0 16px; }
.l-tech .l-benefit-grid a { display:inline-flex; gap:8px; align-items:center; min-height:44px; color:#adc9ff; font-size:13px; }
.l-tech .l-benefit-grid a svg { width:15px; height:15px; }
.l-tech .l-process { background:transparent; color:#edf2fc; padding:64px 0 76px; }
.l-tech .l-process .l-section-index { color:#a8b6cc; }
.l-tech .l-section-index { font-size:11px; letter-spacing:.08em; color:#a8b6cc; }
.l-tech .l-section-heading { grid-template-columns:1fr 1fr; margin:30px 0 34px; }
.l-tech .l-section-heading h2 br { display:none; }
.l-tech .l-section-heading>p { color:#aebbd0; font-size:14px; margin-bottom:8px; }
.l-tech .l-process-list { border:0; gap:22px; }
.l-tech .l-process-list li,.l-tech .l-process-list li:first-child,.l-tech .l-process-list li:last-child { padding:24px; border:1px solid #b3c6f01a; border-radius:14px; background:#1b212d; }
.l-tech .l-step-top { margin-bottom:23px; }
.l-tech .l-step-top>span { color:#aac4fb; background:#82a6fa12; border:1px solid #8daefb1c; padding:9px 10px; border-radius:9px; font-size:15px; }
.l-tech .l-step-top svg { color:#9aaecb; width:20px; height:20px; }
.l-tech .l-process-list h3 { color:#e6eefb; font-size:17px; }
.l-tech .l-process-list p { color:#afbdd2; font-size:14px; line-height:1.85; }
.l-tech .l-step-note { display:none; }
.l-tech .l-workspace { padding:64px 0 80px; background:radial-gradient(ellipse at 92% 55%,#485bb71c,transparent 60%); border-top:1px solid #ffffff0a; }
.l-tech .l-workspace-grid { gap:80px; margin-top:38px; }
.l-tech .l-workspace-copy h2 { font-size:clamp(28px,3vw,40px); }
.l-tech .l-workspace-copy h2 span { color:#a8c4fc; }
.l-tech .l-workspace-copy>p { color:#b0bdd2; }
.l-tech .l-console { border-color:#b8cfff23; background:linear-gradient(130deg,#222b3c,#1a202d); border-radius:15px; box-shadow:0 25px 60px #0003; }
.l-tech .l-questions { padding:64px 0 76px; border-color:#ffffff0b; }
.l-tech .l-faq-grid { gap:80px; margin-top:36px; }
.l-tech .l-faq-item { border-color:#ffffff16; }
.l-tech .l-faq-item:first-child { border-color:#ffffff16; }
.l-tech .l-faq-q { font-size:15px; padding:23px 0; }
.l-tech .l-outro { margin:0; padding:70px 0; text-align:center; border-color:#ffffff0a; background:radial-gradient(ellipse at 20% 95%,#6553ae25,transparent 60%),radial-gradient(ellipse at 80% 10%,#2969b329,transparent 60%),#181d28; }
.l-tech .l-outro h2 { font-size:clamp(32px,3.7vw,48px); margin:20px 0 28px; }
.l-tech .l-outro h2 br { display:none; }
.l-tech .l-outro h2 span { color:#aac6ff; }
.l-tech .l-outro .l-wrap>div { justify-content:center; }
.l-tech .l-footer { background:#11151c; border-color:#ffffff0b; }
.l-tech .l-footer-in { padding-top:42px; padding-bottom:32px; }
@media(min-width:861px) {
 .l-tech .l-stack-front { animation:tech-card-enter .8s ease-out both; }
 @keyframes tech-card-enter { from { opacity:0; translate:0 16px; } to { opacity:1; translate:0 0; } }
}
@media(max-width:1080px) {
 .l-tech .l-wrap,.l-tech .l-nav-in { padding-left:max(30px,var(--safe-left)); padding-right:max(30px,var(--safe-right)); }
 .l-tech .l-tech-hero-grid { gap:30px; }
 .l-tech .l-hero-copy h1 { font-size:40px; }
 .l-tech .l-stack-card { width:290px; }
 .l-tech .l-stack-front { width:310px; }
 .l-tech .l-tech-orbit { width:340px; height:400px; }
 .l-tech .l-tech-orbit.orbit-two { width:280px; height:440px; }
 .l-tech .l-stack-status { font-size:9px; padding:4px 7px; }
 .l-tech .l-benefit-grid article { padding:24px; }
}
@media(max-width:860px) {
 .l-tech .l-nav { height:calc(72px + var(--safe-top)); }.l-tech .l-mobile-menu { top:calc(72px + var(--safe-top)); }
 .l-tech .l-hero { padding:calc(72px + var(--safe-top) + 44px) 0 50px; }
 .l-tech .l-tech-hero-grid { grid-template-columns:minmax(0,1fr); gap:34px; }
 .l-tech .l-hero-copy { max-width:650px; margin:auto; width:100%; }
 .l-tech .l-hero-copy h1 { font-size:clamp(34px,5.5vw,46px); }
 .l-tech .l-tech-art { width:480px; max-width:100%; height:485px; margin:auto; }
 .l-tech .l-stack-back { left:18px; }.l-tech .l-stack-mid { right:18px; }.l-tech .l-stack-front { top:157px; width:340px; }
 .l-tech .l-tech-float { bottom:19px; }
 .l-tech .l-benefit-grid { gap:14px; }.l-tech .l-benefit-grid article { padding:20px; }.l-tech .l-benefit-grid h3 { font-size:16px; }
 .l-tech .l-workspace-grid,.l-tech .l-faq-grid { gap:34px; }
 .l-tech .l-console-figure { max-width:560px; }
}
@media(max-width:560px) {
 .l-tech .l-wrap,.l-tech .l-nav-in { padding-left:max(22px,var(--safe-left)); padding-right:max(22px,var(--safe-right)); }
 .l-tech .l-tech-eyebrow { font-size:11px; margin-bottom:20px; }
 .l-tech .l-tech-brand { font-size:17px; margin-bottom:10px; }
 .l-tech .l-hero-copy h1 { font-size:clamp(31px,8.6vw,44px); line-height:1.3; }
 .l-tech .l-hero-copy .sub { font-size:14px; margin:20px 0; }
 .l-tech .l-hero-points { gap:9px 13px; margin-bottom:24px; }.l-tech .l-hero-points li { font-size:12px; }
 .l-tech .l-hero-cta { gap:10px; }.l-tech .n-btn-lg { font-size:13px; padding:13px 16px; }
 .l-tech .l-registration-note { margin-top:12px; font-size:12px; }
 .l-tech .l-tech-hero-grid { gap:34px; }
 .l-tech .l-tech-art { height:428px; }
 .l-tech .l-tech-orbit { width:290px; height:335px; top:25px; }.l-tech .l-tech-orbit.orbit-two { width:250px; height:355px; }
 .l-tech .l-stack-back { display:none; }
 .l-tech .l-stack-mid { top:22px; right:14px; left:14px; width:auto; height:150px; padding:18px; transform:rotate(4deg); }
 .l-tech .l-stack-front { top:112px; width:calc(100% - 12px); max-width:350px; padding:19px; transform:translateX(-50%) rotate(-2deg); }
 .l-tech .l-stack-head { font-size:13px; gap:9px; }.l-tech .l-stack-head small { font-size:9px; }
 .l-tech .l-stack-status { font-size:10px; }
 .l-tech .l-stack-balance { margin-top:20px; }.l-tech .l-stack-balance strong { font-size:32px; }
 .l-tech .l-tech-float { display:none; }
 .l-tech .l-tech-art figcaption { bottom:0; font-size:11px; }
 .l-tech .l-benefits { padding:34px 0 38px; }
 .l-tech .l-tech-heading { text-align:left; margin-bottom:24px; }.l-tech .l-tech-heading h2 { font-size:26px; }
 .l-tech .l-tech-kicker { font-size:10px; letter-spacing:.08em; }
 .l-tech .l-benefit-grid { grid-template-columns:1fr; gap:14px; }
 .l-tech .l-benefit-grid article { padding:22px; position:relative; }
 .l-tech .l-benefit-icon { width:36px; height:36px; margin-bottom:16px; }
 .l-tech .l-benefit-icon svg { width:20px; height:20px; }
 .l-tech .l-benefit-grid h3 { font-size:17px; }.l-tech .l-benefit-grid p { margin-bottom:8px; }
 .l-tech .l-process { padding:34px 0 42px; }
 .l-tech .l-section-heading { margin:24px 0; }.l-tech .l-section-heading h2 { font-size:28px; }.l-tech .l-section-heading>p { font-size:14px; margin-top:14px; }
 .l-tech .l-process-list { display:grid; grid-template-columns:1fr; gap:14px; }
 .l-tech .l-process-list li,.l-tech .l-process-list li:first-child,.l-tech .l-process-list li:last-child { padding:22px 22px 22px 70px; }
 .l-tech .l-step-top { top:23px; left:18px; margin:0; }.l-tech .l-step-top>span { font-size:12px; padding:7px; }.l-tech .l-step-top svg { display:none; }
 .l-tech .l-process-list h3 { font-size:16px; margin-bottom:8px; }
 .l-tech .l-workspace { padding:34px 0 42px; }.l-tech .l-workspace-grid { margin-top:26px; gap:28px; }.l-tech .l-workspace-copy h2 { font-size:28px; }
 .l-tech .l-questions { padding:34px 0 42px; }.l-tech .l-faq-grid { margin-top:26px; gap:20px; }.l-tech .l-faq-q { font-size:14px; padding:20px 0; }
 .l-tech .l-outro { padding:40px 0 44px; }.l-tech .l-outro h2 { font-size:31px; }.l-tech .l-outro h2 br { display:block; }
 .l-tech .l-footer-in { padding:30px 0 20px; }
}
@media(prefers-reduced-motion:reduce) { .l-tech .l-stack-front { animation:none; } }

@media(max-width:560px) {
 .l-tech .l-benefit-grid article { display:grid; grid-template-columns:36px minmax(0,1fr); column-gap:15px; }
 .l-tech .l-benefit-icon { grid-column:1; grid-row:1 / 4; margin:0; }
 .l-tech .l-benefit-grid h3,.l-tech .l-benefit-grid p,.l-tech .l-benefit-grid a { grid-column:2; }
 .l-tech .l-benefit-grid h3 { margin-bottom:9px; }
}

/* Nova 1.12.1: one message per section; compact guide and mobile artwork. */
.l-tech .l-value-strip { padding:24px 0; border-top:1px solid #ffffff0b; border-bottom:1px solid #ffffff0b; background:#1b22304d; }
.l-tech .l-value-strip ul { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); list-style:none; padding:0; margin:0; }
.l-tech .l-value-strip li { display:flex; align-items:center; justify-content:center; gap:12px; color:#c3cee0; font-size:14px; line-height:1.8; border-right:1px solid #ffffff12; }
.l-tech .l-value-strip li:last-child { border-right:0; }
.l-tech .l-value-strip svg { width:19px; height:19px; color:#a4c3ff; flex-shrink:0; }
.l-tech .l-guide-device { display:flex; align-items:center; gap:14px; margin:24px 0; }
.l-tech .l-guide-device>svg { width:40px; height:40px; padding:9px; background:#83aaff13; color:#afcaff; border-radius:10px; }
.l-tech .l-guide-device strong { display:block; font-size:15px; font-weight:550; color:#e4edfa; }
.l-tech .l-guide-device span { display:block; font-size:12px; color:#afbdd2; margin-top:6px; }
.l-tech .l-guide-steps { margin:0; padding:0; list-style:none; }
.l-tech .l-guide-steps li { display:flex; gap:14px; padding:18px 0; border-top:1px solid #ffffff12; }
.l-tech .l-guide-number { flex-shrink:0; display:grid; place-items:center; width:28px; height:28px; border-radius:8px; background:#83aaff12; color:#bed1f5; font:12px var(--mono); }
.l-tech .l-guide-steps h3 { font-size:14px; font-weight:550; color:#e7edf8; margin:3px 0 7px; }
.l-tech .l-guide-steps p { font-size:13px; color:#b1bfd3; line-height:1.8; margin:0; }
.l-tech .l-guide-note { margin:4px 0 0; padding-top:15px; border-top:1px solid #ffffff12; font-size:12px; color:#afbdd2; line-height:1.8; }
@media(max-width:560px) {
 .l-tech .l-hero { padding-bottom:32px; }
 .l-tech .l-tech-hero-grid { gap:24px; }
 .l-tech .l-tech-art { height:344px; }
 .l-tech .l-stack-mid { top:8px; height:125px; padding:15px 18px; }
 .l-tech .l-stack-front { top:76px; padding:17px 19px; }
 .l-tech .l-stack-balance { margin-top:15px; }
 .l-tech .l-stack-chart { margin-top:10px; }
 .l-tech .l-stack-chart svg { height:66px; }
 .l-tech .l-stack-meta { padding-top:9px; }
 .l-tech .l-tech-orbit { height:290px; top:8px; }
 .l-tech .l-tech-orbit.orbit-two { height:310px; }
 .l-tech .l-tech-art figcaption { font-size:11px; bottom:0; }
 .l-tech .l-value-strip { padding:18px 0; }
 .l-tech .l-value-strip ul { grid-template-columns:1fr; gap:12px; }
 .l-tech .l-value-strip li { border-right:0; justify-content:flex-start; font-size:13px; gap:10px; }
 .l-tech .l-value-strip svg { width:17px; height:17px; }
 .l-tech .l-guide-device { margin:20px 0; }
 .l-tech .l-guide-steps li { gap:12px; padding:15px 0; }
 .l-tech .l-guide-steps p { font-size:13px; }
 .l-tech .l-footer-in { padding:24px 0 16px; gap:14px 20px; }
 .l-tech .l-footer .f-brand p { margin-top:7px; }
 .l-tech .l-footer h4 { margin-bottom:4px; }
 .l-tech .l-footer-in>div:last-child:nth-child(4) ul { display:flex; flex-wrap:wrap; gap:0 18px; }
 .l-tech .l-footer ul a { min-height:44px; display:inline-flex; align-items:center; }
 .l-tech .l-footer-bar { padding-top:14px; padding-bottom:max(18px,var(--safe-bottom)); }
}

/* Desktop dashboard: equal cards fill available space above the footer. */
@media (min-width: 1081px) {
    .p-content:has(> .dashboard-summary):has(> .dash-row3) { display: flex; flex-direction: column; }
    .p-content:has(> .dashboard-summary) > :not(.dash-row3) { flex-shrink: 0; }
    .p-content:has(> .dashboard-summary) > .dash-row3 { flex: 1 0 auto; align-items: stretch; }
    .p-content:has(> .dashboard-summary) > .dash-row3 > .p-card { margin: 0; min-width: 0; padding: 18px; }
    .p-content:has(> .dashboard-summary) > .dash-row3 > .p-card > .p-card-h { min-height: 44px; margin-bottom: 18px; }
    .p-content:has(> .dashboard-summary) > .dash-row3 > .p-card > .p-card-h h3 { font-size: 16px; font-weight: 600; }
}