/* Shared visual layer. Forms, routing, constructor output and animation stay native. */
.onboarding-card .platform-select-form{display:block;margin:20px 0}.onboarding-select-grid>*{min-width:0}
.proxy-banner-section{padding:clamp(20px,3vw,36px);overflow:hidden}.proxy-banner-section>*{min-width:0}.proxy-banner-title,.proxy-banner-lead,.proxy-muted,.proxy-card{overflow-wrap:anywhere}.proxy-muted{margin-bottom:0}.proxy-grid{min-width:0}
.tip-item-info{background:var(--accent-soft);color:var(--accent-strong);border-color:var(--accent-line)}.tip-item-warning{background:#fff7df;color:#6e4b00;border-color:#dec57c}.tip-item-success{background:#eaf7ee;color:#185b30;border-color:#a4d9b5}
html[data-theme="dark"] .tip-item-warning{background:#392f1b;color:#f2d58a;border-color:#655129}html[data-theme="dark"] .tip-item-success{background:#1d3525;color:#a7ddb7;border-color:#355d41}html[data-theme="dark"] .tip-item-danger{background:#3c2428;color:#ffb5bc;border-color:#703940}
:root,html[data-theme="light"]{--bg:#f5f5f7;--bg-strong:#f5f5f7;--paper:#fff;--paper-strong:#fff;--ink:#1d1d1f;--muted:#626267;--line:#dedee3;--soft-line:#eeeef1;--accent:#006bd6;--accent-strong:#005bb5;--accent-soft:#edf5ff;--accent-line:#bbd7f6;--cta:#0071e3;--cta-hover:#0066cc;--cta-line:#0071e3;--radius:18px;--radius-sm:12px;--radius-lg:24px;--shadow:0 12px 34px rgba(0,0,0,.035);--shadow-soft:none}
html:root[data-theme="dark"]{--bg:#161618;--bg-strong:#161618;--paper:#212124;--paper-strong:#29292d;--ink:#f5f5f7;--muted:#b5b5be;--line:#3e3e45;--soft-line:#313137;--accent:#8ac4ff;--accent-strong:#b5daff;--accent-soft:#1b344e;--accent-line:#315775;--cta:#0071e3;--cta-hover:#147fea;--cta-line:#0071e3;--shadow:none;--shadow-soft:none}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body,html[data-theme="dark"] body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.55}
body::before,html[data-theme="dark"] body::before{display:none}
::selection{background:#b7dafb;color:#1d1d1f}
.page{width:min(1180px,calc(100% - 48px));padding-top:16px}
.topbar,html[data-theme="dark"] .topbar{background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(20px);border:1px solid var(--line);box-shadow:none;border-radius:18px;padding:12px 18px;gap:16px}
.brand-mark{width:32px;height:32px;border:0;box-shadow:none;background:transparent}
.brand-name strong{font-size:20px;letter-spacing:-.7px}.brand-name span{font-size:9px;letter-spacing:1px}
.nav{gap:20px}.nav a{font-size:13px;font-weight:500}.nav a:hover{color:var(--accent)}
.primary-btn,.cabinet-btn,.button:not(.secondary):not(.ghost),.auth-submit-btn,.nav-button,html[data-theme="dark"] .primary-btn,html[data-theme="dark"] .cabinet-btn,html[data-theme="dark"] .nav-button{color:#fff;background:var(--cta);border-color:var(--cta-line);box-shadow:none;border-radius:999px}
.primary-btn:hover,.cabinet-btn:hover{background:var(--cta-hover);color:#fff}
.button.secondary,.button.ghost{border-radius:999px;box-shadow:none;color:var(--accent);background:var(--accent-soft);border-color:transparent}
.button.ghost{background:transparent}.hero-actions .tariff-link{padding:10px 12px;background:none;color:var(--accent);font-weight:500;font-size:17px;gap:8px;display:inline-flex;align-items:center}.tariff-link span{font-size:25px;line-height:1;transition:transform .2s}.tariff-link:hover span{transform:translateX(3px)}
strong,b,h1,h2,h3,h4,html[data-theme="light"] strong,html[data-theme="light"] b,html[data-theme="light"] h1,html[data-theme="light"] h2,html[data-theme="light"] h3,html[data-theme="light"] h4{color:var(--ink)}
h1,h2,h3{letter-spacing:-.035em}.section-label,.eyebrow{text-transform:uppercase;letter-spacing:1.8px;font-size:11px;font-weight:600;color:var(--muted)}
.hero{display:flex;flex-direction:column;align-items:center;gap:36px;padding:70px 0 28px}.hero-copy{text-align:center;width:100%;padding:0;max-width:860px}.hero-title{font-size:clamp(40px,5.8vw,68px);line-height:1.06;font-weight:650;letter-spacing:-.055em;margin:14px 0 22px}.hero-title span{color:var(--ink)}.hero-lead{max-width:610px;margin:0 auto;color:var(--muted);font-size:20px}.hero-actions{justify-content:center;gap:14px;margin-top:26px}.hero-actions .primary-btn{padding:13px 24px}
.hero-visual,html[data-theme="dark"] .hero-visual{width:100%;max-width:900px;min-height:0;display:flex;flex-direction:column;align-items:center;padding:34px 28px 26px;background:var(--paper);border:0;border-radius:28px;box-shadow:none;overflow:hidden}.hero-visual::before,.hero-visual::after,html[data-theme="dark"] .hero-visual::before{display:none}.hero-symbol{display:none}.visual-note{text-align:center;max-width:620px;margin:0 0 24px}.visual-note strong{font-size:23px;letter-spacing:-.6px}.visual-note p{font-size:14px;color:var(--muted)}
.device-preview{width:min(390px,100%);border:1px solid var(--line);border-bottom:0;border-radius:26px 26px 0 0;padding:24px 24px 0;background:var(--bg);box-shadow:0 12px 28px rgba(0,0,0,.03)}.device-preview-top{display:flex;justify-content:space-between;align-items:center;font-size:12px;gap:12px}.device-preview-top strong{font-size:18px}.device-preview-status{color:var(--success-ink);background:var(--success-bg);padding:5px 9px;border-radius:99px}.device-preview h2{text-align:left;font-size:28px;line-height:1.15;margin:24px 0}.device-preview-row{display:flex;gap:12px;align-items:center;padding:17px 0;border-top:1px solid var(--line);font-size:13px}.device-preview-row svg{width:25px;height:25px;color:var(--accent);flex-shrink:0}.device-preview-row small{display:block;color:var(--muted);font-size:11px}
.device-platforms{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;padding:22px 0;color:var(--muted);font-size:12px}.device-platforms span{display:flex;align-items:center;gap:6px}.device-platforms svg{width:20px;height:20px}.status-card{position:static;width:100%;margin:10px 0 0;padding:20px 0 0;box-shadow:none;border:0;border-top:1px solid var(--line);background:transparent;border-radius:0}.status-card .metric{text-align:center;background:none;padding:8px}.metric strong{font-size:24px}.metric span{font-size:11px}
.content-stack{gap:40px}.benefits-surface,.scenario-card,.benefit-card,.tariff-preview-card,.proxy-banner-section,html[data-theme="dark"] .tariff-preview-card,html[data-theme="dark"] .benefits-surface{box-shadow:none;border-color:var(--line);background:var(--paper);border-radius:22px}.tariff-preview-card{padding:28px}.tariff-preview-card h3{font-size:27px}.tariff-preview-card.featured{border:1px solid var(--accent-line);background:var(--paper)}.tariff-badge{color:var(--accent);background:var(--accent-soft);border-radius:99px}.tariff-preview-card li{font-size:14px;color:var(--ink)}
.section-surface,.surface-card,.cabinet-card,.auth-card,.import-panel,.import-action-card,.import-guide-card,.setup-card,.faq-main-panel,html[data-theme="dark"] .surface-card,html[data-theme="dark"] .cabinet-card,html[data-theme="dark"] .import-panel,html[data-theme="dark"] .import-action-card,html[data-theme="dark"] .import-guide-card{background:var(--paper);border:1px solid var(--line);border-radius:22px;box-shadow:none}
.kb-hero,.faq-hero{text-align:center;display:block;padding:54px 0 36px;background:transparent;border:0}.kb-hero h1,.faq-hero h1{font-size:clamp(34px,4vw,50px);line-height:1.12}.kb-hero p,.faq-hero p{color:var(--muted)}
.kb-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.kb-card,html[data-theme="dark"] .kb-card{background:var(--bg);border:1px solid transparent;border-radius:20px;box-shadow:none;min-height:200px;padding:24px;transition:border-color .2s,transform .2s}.kb-card:hover{transform:translateY(-2px);border-color:var(--accent-line)}.kb-card-top{flex-direction:column;gap:6px}.kb-card h2{font-size:18px}.kb-chip{background:transparent;border:0;font-size:11px;color:var(--muted);padding:0}.kb-card-emblem{height:58px;width:58px;background:transparent;border:0;color:var(--ink);box-shadow:none}.kb-card-emblem svg{height:34px;width:34px}.kb-card-action{font-size:12px;color:var(--accent)}
.workspace-sidebar-panel,html[data-theme="dark"] .workspace-sidebar-panel{background:var(--paper);border-color:var(--line);box-shadow:none;border-radius:20px}.workspace-sidebar-link{border-radius:10px}.workspace-sidebar-link.is-active{background:var(--accent-soft);color:var(--accent)}
.faq-item,html[data-theme="dark"] .faq-item{border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none;margin:0}.faq-item summary{font-size:16px;padding:22px 0;color:var(--ink)}.faq-item-body{padding:0 0 24px}.faq-media-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.faq-media-gallery figure{margin:0}.faq-media-gallery img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line)}.faq-media-gallery figcaption{font-size:12px;color:var(--muted);padding-top:8px}
.auth-modal-panel,.import-qr-modal-panel{background:var(--paper);border-radius:24px;border-color:var(--line);box-shadow:0 24px 90px rgba(0,0,0,.18)}input,select,textarea{color:var(--ink)}.auth-modal input,.auth-field input,.platform-select,.import-platform-select,.import-application-select{border-radius:12px;border-color:var(--line);background:var(--bg)}.site-footer,html[data-theme="dark"] .site-footer{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none;margin-top:44px;padding:28px 0}
@media(max-width:1000px){.nav{gap:12px}.nav a{font-size:12px}.topbar{gap:10px}.brand-name span{display:none}.kb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.page{width:calc(100% - 28px);padding-top:10px}.topbar{padding:10px;top:8px;border-radius:14px}.brand-name strong{font-size:18px}.hero{padding:44px 0 20px;gap:28px}.hero-lead{font-size:17px}.hero-visual{padding:24px 16px 18px;border-radius:22px}.visual-note strong{font-size:20px}.device-preview{padding:20px 18px 0}.hero-actions{gap:8px;flex-wrap:wrap}.kb-grid{gap:10px}.kb-card{padding:18px;min-height:190px}.kb-card h2{font-size:16px}.faq-media-gallery{grid-template-columns:1fr}.status-card .metric strong{font-size:20px}.status-card .metric span{font-size:10px}.section-heading-row{display:block}.cabinet-card,.import-panel{padding:20px}.mobile-nav,html[data-theme="dark"] .mobile-nav{background:var(--paper);border-color:var(--line);border-radius:14px}}
.hero-title{max-width:none}.eyebrow::before{display:none}.visual-note{position:static;inset:auto;width:100%;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}.visual-note strong{text-transform:none;letter-spacing:-.03em}.status-card .metric{border:0}
.kb-hero-copy,.faq-hero-copy{width:100%;max-width:none}.page-title{color:var(--ink)}
.content-stack:has(> .workspace-layout){width:100%;margin-left:0;margin-right:0}
.content-stack:has(> .workspace-layout)>.workspace-layout{width:100%;grid-template-columns:220px minmax(0,1fr);gap:24px}
.content-stack:has(> .workspace-layout)>.workspace-layout.is-sidebar-collapsed{grid-template-columns:72px minmax(0,1fr)}
.content-stack:has(> .workspace-layout) .workspace-sidebar,.content-stack:has(> .workspace-layout) .workspace-layout.is-sidebar-collapsed .workspace-sidebar{position:sticky;inset:auto;top:100px;width:auto;height:auto;grid-column:1;grid-row:1}
.content-stack:has(> .workspace-layout) .workspace-sidebar-panel{min-height:0;height:auto;max-height:calc(100dvh - 120px);border:1px solid var(--line);border-radius:20px;color:var(--ink)}
.workspace-sidebar-scroll{overflow:auto}.faq-answer{padding:0 0 22px}.faq-main-panel{padding:28px}
@media(max-width:900px){.content-stack:has(> .workspace-layout)>.workspace-layout,.content-stack:has(> .workspace-layout)>.workspace-layout.is-sidebar-collapsed{grid-template-columns:1fr;gap:18px}.content-stack:has(> .workspace-layout) .workspace-sidebar,.content-stack:has(> .workspace-layout) .workspace-layout.is-sidebar-collapsed .workspace-sidebar{position:static;grid-column:auto;grid-row:auto}.content-stack:has(> .workspace-layout) .workspace-layout>:not(.workspace-sidebar){grid-column:auto;grid-row:auto}.content-stack:has(> .workspace-layout) .workspace-sidebar-panel{max-height:340px}.content-stack:has(> .workspace-layout) .is-sidebar-collapsed .workspace-sidebar-panel{max-height:54px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.kb-card,.tariff-link span{transition:none}}

html[data-theme] .faq-item[open]{background:transparent;box-shadow:none;border-color:var(--line)}
html[data-theme] .faq-item[open] .faq-question{color:var(--ink)}
html[data-theme] .hero-actions .tariff-link{background:none;border-color:transparent;box-shadow:none;width:auto}
@media(max-width:620px){.topbar .theme-switcher{position:relative;top:auto;right:auto}.topbar-controls{gap:6px}.cabinet-btn{padding:0 12px;min-height:40px}.theme-switcher__trigger{width:32px;height:32px}.brand-mark{width:28px;height:28px}.brand{gap:8px}}

/* Match the native page selectors: the visual layer must win in both themes. */
.content-stack:has(> .workspace-layout) .workspace-sidebar{justify-self:stretch;min-width:0}
html[data-theme] .tariff-preview-card.featured{background:var(--paper);border-color:var(--accent-line);box-shadow:none}
html[data-theme] .tariff-badge{background:var(--accent-soft);color:var(--accent)}
html[data-theme] .mobile-nav-link{background:var(--bg);border-color:var(--line);box-shadow:none;color:var(--ink)}
html[data-theme] .mobile-nav-link:hover{background:var(--accent-soft);color:var(--accent)}
html[data-theme] .account-panel{background:var(--paper-strong);border-color:var(--line);box-shadow:none}
html[data-theme] .summary-item,html[data-theme] .profile-status-row,html[data-theme] .profile-subsection,
html[data-theme] .account-metric,html[data-theme] .account-metric-bonus,html[data-theme] .account-inline-link,
html[data-theme] .account-action-bar,html[data-theme] .account-panel .account-action-link,
html[data-theme] .setting-tile,html[data-theme] .settings-choice,html[data-theme] .settings-toggle,
html[data-theme] .auto-profile-choice,html[data-theme] .referral-table-card{background:var(--bg);border-color:var(--line);box-shadow:none}
html[data-theme] .gate-form input,html[data-theme] .compact-form input,
html[data-theme] .auth-modal input,html[data-theme] .auth-field input,
html[data-theme] .platform-select,html[data-theme] .import-platform-select,
html[data-theme] .import-application-select{background:var(--bg);color:var(--ink);border-color:var(--line);border-radius:12px}
html[data-theme] .auth-modal-panel,html[data-theme] .import-qr-modal-panel{background:var(--paper);color:var(--ink);border-color:var(--line)}
html[data-theme] .section-list-panel,html[data-theme] .qr-modal-card{background:var(--paper);color:var(--ink);border-color:var(--line);box-shadow:none}
/* Compact instruction tiles: about 3:1, with a readable minimum height. */
.kb-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));width:100%;min-width:0}
html[data-theme] .kb-card{grid-template-columns:48px minmax(0,1fr);grid-template-rows:auto auto;gap:8px 16px;aspect-ratio:3/1;min-height:116px;width:100%;max-width:100%;padding:18px;align-content:center}
.kb-card .kb-card-emblem{grid-column:1;grid-row:1/3;width:48px;height:48px;min-height:0;border:0;background:none}
.kb-card .kb-card-emblem svg{width:36px;height:36px}
.kb-card .kb-card-top{grid-column:2;grid-row:1;display:block}
.kb-card .kb-card-top h2{font-size:17px;line-height:1.3}
.kb-card .kb-chip{display:inline-block;margin-top:4px;padding:0;border:0;background:none;font-size:11px}
.kb-card .kb-card-action{grid-column:2;grid-row:2;margin:0;font-size:12px}
.faq-question.has-icon::before,.faq-question.has-icon::after{display:none}
.faq-question-icon{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:var(--accent-soft)}
.faq-question-icon img{width:26px;height:26px;object-fit:contain}
/* Owner-scoped device cards: comfortable controls without horizontal overflow. */
.device-management { margin-block: 24px; }
.device-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.device-access-card { min-width: 0; padding: 22px; border: 1px solid var(--border-color, #d8d8df); border-radius: 22px; overflow-wrap: anywhere; }
.device-access-card h4 { font-size: 20px; margin: 0 0 10px; }
.device-access-card .button { max-width: 100%; white-space: normal; }
.device-access-card details { margin-top: 18px; }
.device-access-card summary { cursor: pointer; padding-block: 8px; }
.device-access-card form { display: grid; gap: 10px; margin-top: 10px; }
.device-access-card input { appearance: none; min-width: 0; width: 100%; box-sizing: border-box; min-height: 46px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); font: inherit; font-size: 16px; line-height: 1.35; box-shadow: none; transition: border-color .18s ease, box-shadow .18s ease; }
.device-access-card input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.device-access-card label { color: var(--muted); font-size: 13px; }
html[data-theme] .device-access-card input { background: var(--bg); color: var(--ink); border-color: var(--line); }
html[data-theme] .device-access-card input:focus-visible { border-color: var(--accent); }
.device-state { display: inline-block; padding: 6px 10px; border-radius: 12px; background: rgba(0,113,227,.10); font-size: 13px; }
.device-card-grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
.device-disclosure { padding: 0; border-color: var(--line); }
.device-access-card > .device-disclosure-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; list-style: none; }
.device-disclosure-summary::-webkit-details-marker { display: none; }
.device-disclosure-summary strong { display: block; font-size: 18px; }
.device-disclosure-summary small { display: block; margin-top: 6px; color: var(--muted); font-size: 14px; }
.device-disclosure-summary svg { flex-shrink: 0; transition: transform .15s; }
.device-disclosure[open] > summary svg { transform: rotate(180deg); }
.device-disclosure-body { padding: 0 22px 22px; }
.device-disclosure-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 22px; }
.connect-device-button { display: flex; width: 100%; min-height: 56px; gap: 12px; justify-content: center; margin-top: 22px; padding: 16px 20px; background: #007aff; color: #fff; border-color: #007aff; box-sizing: border-box; text-align: center; white-space: normal; }
.connect-device-button svg { flex-shrink: 0; }
@media(prefers-reduced-motion:reduce) { .device-disclosure-summary svg { transition: none; } }
.device-remove summary { color: #d43c3c; }
.device-trash-icon { display: inline-block; width: 18px; height: 18px; flex-shrink: 0; vertical-align: -3px; margin-right: 7px; }
/* A single auth surface; embedded forms don't add nested card borders. */
html[data-theme] body.site-embedded { background: transparent; }
html[data-theme] .cabinet-gate .gate-card { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
html[data-theme] body.site-embedded .cabinet-gate { padding: 20px 24px 24px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
body.site-embedded .cabinet-gate .gate-stack { margin-top: 0; gap: 18px; }
html[data-theme] .cabinet-gate .gate-trial-pitch { padding: 12px 14px; border-radius: 12px; background: var(--accent-soft); }
html[data-theme] .auth-modal-panel { width: min(500px, 100%); height: auto; max-height: calc(100dvh - 32px); grid-template-rows: auto auto; }
html[data-theme] .auth-modal-head { border: 0; padding: 18px 24px 0; }
html[data-theme] .auth-modal-frame { display: block; height: 410px; min-height: 0; }
.cabinet-gate .gate-form { gap: 10px; }
html[data-theme] .cabinet-gate .gate-form input { min-height: 48px; border-radius: 12px; background: var(--bg); font-size: 16px; }
.cabinet-gate .gate-meta { font-size: 13px; }
@media(max-width:600px) { html[data-theme] .auth-modal-panel { max-height: calc(100dvh - 16px); } html[data-theme] body.site-embedded .cabinet-gate { padding: 18px 20px 22px; } html[data-theme] .auth-modal-head { padding: 16px 20px 0; } }