/* BLUFIN+ STILL v1.0. These tokens own every surface, control and state. */
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('./fonts/golos-text-latin.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('./fonts/golos-text-cyrillic.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
:root {
  color-scheme: dark;
  --bg: #0B0C0F; --surface: #14161B; --surface-raised: #1D2027;
  --surface-hover: #242831; --surface-selected: #1B2536;
  --text: #F0F1F3; --text-secondary: #A4A9B3; --text-muted: #8A909C; --text-disabled: #626977;
  --blue: #A9BFE8; --silver: #C6CBD4; --silver-action: #E2E5EB;
  --silver-hover: #F1F3F6; --silver-pressed: #CBD0D9;
  --line: #282C34; --line-hover: #363B46; --line-strong: #697181; --line-control: #8790A1;
  --success: #83C5A0; --success-bg: #16271E; --error: #E49B9E; --error-bg: #2B1B20;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-24: 96px;
  --radius-0: 0px; --radius-1: 6px; --radius-2: 10px; --radius-3: 14px; --radius-4: 20px;
  --pressed-duration: 100ms; --hover-duration: 160ms; --expand-duration: 200ms; --open-duration: 220ms; --result-duration: 240ms;
  --ease: cubic-bezier(.2,.7,.2,1); --sidebar-width: 224px; --topbar-height: 64px; --content-width: 1040px; --report-width: 720px;
  --background: var(--bg); --foreground: var(--text); --card: var(--surface); --card-foreground: var(--text);
  --popover: var(--surface-raised); --popover-foreground: var(--text); --primary: var(--silver-action); --primary-foreground: var(--bg);
  --secondary: var(--surface-raised); --secondary-foreground: var(--text); --muted: var(--surface); --muted-foreground: var(--text-secondary);
  --accent: var(--surface-selected); --accent-foreground: var(--blue); --border: var(--line); --input: var(--line-strong); --ring: var(--blue); --destructive: var(--error);
  --font-sans: 'Golos Text', system-ui, sans-serif; --control-height: 48px; --control-radius: 10px; --surface-radius: 14px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.5 var(--font-sans); overflow-x: clip; }
button, input, select, textarea { font: inherit; }
button, a, summary, input, select { -webkit-tap-highlight-color: transparent; }
button, a, input, select, summary { transition: color var(--hover-duration), background-color var(--hover-duration), border-color var(--hover-duration), opacity var(--hover-duration); }
button { cursor: pointer; }
button:disabled, [aria-disabled='true'] { cursor: not-allowed; opacity: .5; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
::selection { background: var(--surface-selected); color: var(--text); }
h1, h2, h3, p { overflow-wrap: break-word; }
h1, h2, h3, strong, b { font-weight: 600; }
h1 { font-size: 36px; line-height: 44px; letter-spacing: -.035em; }
h2 { font-size: 24px; line-height: 32px; letter-spacing: -.025em; }
h3 { font-size: 20px; line-height: 28px; }
small, .fine-print { font-size: 12px; line-height: 16px; color: var(--text-muted); }
.hidden, [hidden] { display: none !important; }
.ambient, .hero-trails, .hero-amounts, .hero-person, .hero-visual, .title-dot, .section-icon, .onboarding-star, .register-next { display: none; }
.app-shell { width: min(100% - 64px, var(--content-width)); max-width: none; margin: 0 auto; padding: 0; }
.site-header { position: relative; display: flex; height: var(--topbar-height); gap: 24px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: var(--bg); z-index: 40; }
.brand { flex: none; display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-size: 20px; font-weight: 600; letter-spacing: -.04em; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; background: transparent; border: none; border-radius: 0; box-shadow: none; }
.brand-mark svg { width: 26px; height: 26px; fill: none; stroke: var(--silver); stroke-width: 1.8; }
.brand-plus { color: var(--blue); }
.header-right, .header-actions { display: flex; gap: 12px; align-items: center; }
.header-actions { gap: 4px; }
.header-actions button { height: 44px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--text-secondary); font-size: 14px; font-weight: 500; }
.header-actions button:hover { background: var(--surface); color: var(--text); }
#public-navigation { margin-left: auto; }
.public-nav { position: relative; display: flex; gap: 24px; height: 64px; align-items: stretch; }
.public-nav a { display: flex; align-items: center; color: var(--text-secondary); font-size: 14px; text-decoration: none; }
.public-nav a:hover, .public-nav a[aria-current] { color: var(--text); }
.nav-underline { position: absolute; bottom: -1px; left: 0; height: 1px; background: var(--blue); transition: transform 220ms var(--ease), width 220ms var(--ease); }
body:not([data-view='landing']) #public-navigation { display: none; }
body[data-auth='active'] .public-login { display: none; }
.language-switch { display: flex; align-items: center; gap: 0; padding: 0; border: none; border-radius: 0; background: transparent; }
.language-switch button { width: 44px; height: 44px; padding: 0; color: var(--text-muted); background: none; border: none; border-radius: 6px; font-size: 12px; font-weight: 500; }
.language-switch button[aria-pressed='true'] { color: var(--text); background: var(--surface); }
.language-switch button:hover { color: var(--text); }
.site-menu-toggle { width: 44px; height: 44px; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: transparent; box-shadow: none; }
.site-menu-toggle span { background: var(--silver); height: 1px; }
.site-menu { padding: 12px; border: 1px solid var(--line-hover); border-radius: 10px; background: var(--surface-raised); box-shadow: 0 16px 40px #0006; backdrop-filter: none; }
.site-menu a, .site-menu button { display: flex; min-height: 44px; align-items: center; font-size: 14px; font-weight: 500; color: var(--text-secondary); border-radius: 6px; }
.site-menu a:hover, .site-menu button:hover { background: var(--surface-hover); color: var(--text); }
.drawer-heading, .drawer-public, .menu-backdrop { display: none; }
.button, .hero-cta .hero-submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; min-height: 48px; padding: 0 20px; border: 1px solid transparent; border-radius: 10px; font-size: 14px; line-height: 20px; font-weight: 500; text-decoration: none; box-shadow: none; transform: none; }
.button:hover, .hero-cta .hero-submit:hover { transform: none; box-shadow: none; }
.button.primary, .hero-cta .hero-submit, .tier-upgrade { color: var(--bg) !important; background: var(--silver-action) !important; border-color: var(--silver-action) !important; box-shadow: none !important; }
.button.primary:hover, .hero-cta .hero-submit:hover, .tier-upgrade:hover { background: var(--silver-hover) !important; border-color: var(--silver-hover) !important; }
.button.primary:active, .hero-cta .hero-submit:active { background: var(--silver-pressed) !important; transition-duration: 100ms; }
.button.secondary { background: var(--surface); border-color: var(--line-hover); color: var(--text); }
.button.secondary:hover { background: var(--surface-hover); border-color: var(--line-strong); }
.button.secondary:active { background: var(--surface-raised); transition-duration: 100ms; }
.button.large, .hero-cta .hero-submit { height: 52px; min-height: 52px; }
.text-link, .hero-register-link { color: var(--text-secondary); font-size: 14px; line-height: 20px; font-weight: 400; background: none; border: 0; min-height: 44px; padding: 8px 0; text-decoration: none; }
.text-link:hover, .hero-register-link:hover { color: var(--text); }
input:not([type='file']), select, textarea, .access-form input, .input-wrap input { min-height: 48px; padding: 12px 16px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--text); box-shadow: none; font-size: 16px; }
input::placeholder { color: var(--text-muted); }
input:hover, select:hover { border-color: var(--line-control); }
input:focus, select:focus { border-color: var(--blue); box-shadow: none; }
input:-webkit-autofill { -webkit-text-fill-color: var(--text); box-shadow: 0 0 0 1000px var(--surface) inset; }
progress { accent-color: var(--blue); height: 4px; border: 0; border-radius: 0; background: var(--line); }
progress::-webkit-progress-bar { background: var(--line); border-radius: 0; }
progress::-webkit-progress-value { background: var(--blue); border-radius: 0; }
progress::-moz-progress-bar { background: var(--blue); }
.landing { padding: 0; }
.hero-grid { position: relative; display: flex; align-items: center; min-height: 640px; padding: 96px 0; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero-copy { position: relative; z-index: 2; padding: 0; transform: none; width: min(100%, 760px); }
.hero-chip { display: inline-flex; gap: 10px; align-items: center; padding: 8px 12px; border: 1px solid var(--line-hover); border-radius: 6px; background: var(--bg); color: var(--text-secondary); font-size: 12px; line-height: 16px; }
.chip-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px #A9BFE80C; animation: chip-ping 3s ease-out 2; }
@keyframes chip-ping { 0%,100% { box-shadow: 0 0 0 4px #A9BFE80C; } 40% { box-shadow: 0 0 0 7px #A9BFE800; } }
.hero-copy h1 { margin: 24px 0; font-size: 72px; line-height: 76px; font-weight: 500; letter-spacing: -.05em; }
.hero-copy h1 span { color: var(--silver); }
.hero-lead { margin: 0; max-width: 440px; color: var(--text-secondary); font-size: 16px; line-height: 24px; }
.hero-actions { margin-top: 32px; max-width: none; display: block; }
.hero-cta { display: flex; align-items: center; gap: 24px; }
.hero-cta .hero-submit { width: auto; min-width: 176px; }
.hero-logo-row { display: flex; align-items: center; gap: 16px; margin-top: 48px; color: var(--text-muted); font-size: 12px; letter-spacing: .035em; }
.hero-binodex { color: var(--silver); font-size: 20px; font-weight: 500; letter-spacing: -.04em; }
.hero-logo-divider { width: 1px; height: 16px; background: var(--line-hover); }
.hero-field { position: absolute; z-index: 0; inset: 0; pointer-events: none; }
.filament-canvas { display: block; width: 100%; height: 100%; mask-image: linear-gradient(90deg, transparent 20%, #0004 45%, #000 75%); }
.motion-control { position: absolute; bottom: 24px; right: 0; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text-muted); pointer-events: auto; }
.motion-control:hover { border-color: var(--line-strong); color: var(--text); }
.landing-steps, .public-levels, .faq, .landing-final { width: 100%; margin: 0; padding: 96px 0; border-bottom: 1px solid var(--line); }
.landing-steps h2 { margin: 0 0 40px; font-size: 24px; line-height: 32px; }
.landing-steps > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.landing-steps p { display: flex; flex-direction: column; margin: 0; padding: 0; gap: 12px; border: 0; }
.landing-steps p span { color: var(--text-muted); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; }
.landing-steps p strong { font-size: 20px; line-height: 28px; font-weight: 500; }
.landing-steps p small { color: var(--text-secondary); font-size: 14px; line-height: 20px; max-width: 250px; }
.section-label { display: block; margin-bottom: 16px; color: var(--text-muted); font-size: 12px; line-height: 16px; }
.pricing-heading { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: end; margin-bottom: 40px; }
.pricing-heading h2 { max-width: 460px; margin: 0; font-size: 36px; line-height: 44px; font-weight: 500; }
.pricing-heading p { max-width: 400px; margin: 0; font-size: 14px; line-height: 24px; color: var(--text-secondary); }
.level-cards, .public-levels .level-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0; overflow: visible; }
.level-card, .public-levels .level-card, .deposit-card .level-card { display: flex; position: relative; flex-direction: column; min-width: 0; min-height: 0; padding: 24px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: none; }
.level-card::before { content: ''; width: 20px; height: 2px; background: var(--level-color); margin-bottom: 20px; }
.level-card:hover { border-color: var(--line-hover); }
.level-card h3 { margin: 0 0 8px; padding: 0; color: var(--level-color); font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .015em; }
.level-card .level-info { position: absolute; right: 8px; top: 8px; width: 44px; height: 44px; padding: 0; border: 0; background: none; border-radius: 6px; color: var(--text-muted); font-size: 14px; font-family: var(--font-sans); }
.level-info:hover { background: var(--surface-hover); color: var(--text); }
.level-detail { color: var(--text-secondary); min-height: 40px; margin: 0 0 24px; font-size: 12px; line-height: 16px; }
.level-deposit-label { display: block; font-size: 12px; line-height: 16px; color: var(--text-muted); }
.level-card .level-price { display: block; margin: 8px 0 24px; font-size: 36px; line-height: 44px; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
.level-features { padding-top: 20px; border-top: 1px solid var(--line); flex: 1; display: flex; flex-direction: column; gap: 12px; }
.level-card .level-signals, .level-card .level-extra, .level-card .level-modes { margin: 0; padding: 0; border: 0; font-size: 14px; line-height: 20px; color: var(--text-secondary); font-weight: 400; overflow-wrap: anywhere; }
.level-card .level-signals { color: var(--text); font-weight: 500; }
.level-modes { min-height: 40px; }
.level-card .level-choose { width: 100%; margin-top: 24px; padding-inline: 8px; height: 48px; min-height: 48px; background: var(--surface-raised); font-size: 14px; }
.level-card .level-details-link { text-align: center; font-size: 12px; margin-top: 4px; }
.pricing-note { margin: 20px 0 0; color: var(--text-muted); font-size: 12px; line-height: 20px; }
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; }
.faq h2 { margin: 0 0 16px; font-size: 36px; line-height: 44px; font-weight: 500; }
.faq-intro p { max-width: 280px; margin: 0 0 24px; color: var(--text-secondary); font-size: 16px; line-height: 24px; }
.faq-intro a { display: flex; align-items: center; min-height: 44px; width: fit-content; color: var(--blue); text-decoration: underline; text-underline-offset: 5px; font-size: 14px; }
.faq-accordions { display: flex; flex-direction: column; gap: 8px; }
.faq details { margin: 0; padding: 0 20px; border: 1px solid var(--line); border-radius: 10px; background: transparent; }
.faq details:hover { border-color: var(--line-hover); }
.faq details[open] { background: var(--surface); border-color: var(--line-hover); }
.faq summary { position: relative; padding: 20px 28px 20px 0; list-style: none; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text); cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; position: absolute; right: 2px; top: 50%; width: 8px; height: 8px; border-right: 1px solid var(--silver); border-bottom: 1px solid var(--silver); transform: translateY(-70%) rotate(45deg); transition: transform 200ms; }
.faq details[open] summary::after { transform: translateY(-20%) rotate(225deg); }
.faq details p { margin: 0 0 20px; color: var(--text-secondary); font-size: 14px; line-height: 24px; }
.landing-final { display: flex; flex-direction: column; gap: 20px; align-items: center; text-align: center; }
.landing-final h2 { margin: 0; width: 100%; font-size: 36px; line-height: 44px; font-weight: 500; }
.landing-final p { margin: 0; color: var(--text-secondary); flex: 1; font-size: 16px; }
.landing-final .button { margin: 0; }
.site-footer { display: flex; align-items: flex-start; gap: 48px; border: 0; margin: 0; padding: 32px 0; color: var(--text-muted); font-size: 12px; line-height: 20px; }
.site-footer span { flex: none; }
.site-footer p { max-width: 720px; margin: 0; color: var(--text-muted); font-size: 12px; }
.auth-loading { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 16px; background: var(--bg); color: var(--text-secondary); }
.loading-mark { font-size: 24px; font-weight: 500; color: var(--silver); }
.view-title { display: none; }
.access, .deposit { padding: 64px 0 96px; }
.access h1, .deposit h1 { font-size: 36px; line-height: 44px; margin: 0 0 24px; }
.access h1 span, .deposit h1 span { color: var(--silver); }
.step-caption, .aside-index, .eyebrow { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--text-muted); letter-spacing: .02em; }
.step-line, .eyebrow-line { height: 1px; background: var(--line-strong); }
.access-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; margin-top: 40px; }
.access-primary, .access-aside { min-width: 0; }
.section-lead, .access p, .deposit p { color: var(--text-secondary); font-size: 16px; line-height: 24px; }
.access-aside, #register .access-aside { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 32px; height: auto; margin: 0; box-shadow: none; }
.round-step, .round-step.active { border-color: var(--line-hover); background: var(--surface-raised); color: var(--silver); box-shadow: none; font-size: 14px; font-weight: 500; }
.aside-lines { margin: 24px 0 0; }
.aside-lines > div { min-height: 72px; }
.aside-lines > div::after { background: var(--line); }
.aside-lines p strong { color: var(--text); font-size: 16px; font-weight: 500; }
.aside-lines p small { color: var(--text-secondary); font-size: 14px; line-height: 20px; }
.aside-lines .round-step.active { background: var(--blue); border-color: var(--blue); color: var(--bg); font-weight: 600; box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 14%, transparent); }
.aside-lines > [aria-current='step'] p strong { color: var(--blue); font-weight: 600; }
#deposit > .step-caption[aria-current='step'] { color: var(--blue); font-weight: 600; }

.auth-surface { width: min(100%, 480px); padding: 32px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: none; }
.access-form { display: flex; flex-direction: column; gap: 12px; max-width: 480px; margin-top: 24px; }
.access-form label, .field-label { color: var(--text-secondary); font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: 0; text-transform: none; }
.access-form .button { width: 100%; margin-top: 12px; }
.access-primary > .button { width: min(100%, 400px); margin: 16px 0; }
.input-wrap { border: 0; padding: 0; background: transparent; }
.input-wrap > span { display: none; }
.input-wrap input { width: 100%; }
.auth-links, .setup-actions { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 16px; }
.setup-actions .button { flex: 1; }
.access-divider { color: var(--text-muted); font-size: 12px; }
.deposit-card { padding: 32px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: none; }
.deposit-card .level-cards { margin-top: 24px; }
.deposit-card .level-choose, .deposit-card .level-details-link { display: none; }
.deposit-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.status-note, .deposit-progress { background: var(--surface-raised); color: var(--text-secondary); border: 1px solid var(--line); border-radius: 10px; box-shadow: none; }
.form-message, .global-message { background: var(--error-bg); color: var(--error); border: 1px solid var(--error); border-radius: 6px; padding: 12px 16px; font-size: 14px; line-height: 20px; }
.form-message.success { background: var(--success-bg); border-color: var(--success); color: var(--success); }
.global-message { margin: 16px; }
.app-sidebar, .mobile-tabs { display: none; }
body[data-auth='active'] .app-shell { width: auto; max-width: none; margin: 0 40px 0 calc(var(--sidebar-width) + 40px); }
body[data-auth='active'] main, body[data-auth='active'] .site-footer { width: min(100%, var(--content-width)); margin: 0 auto; }
body[data-auth='active'] .site-header { height: 64px; }
body[data-auth='active'] .app-sidebar { position: fixed; z-index: 50; inset: 0 auto 0 0; width: 224px; display: flex; flex-direction: column; gap: 4px; padding: 24px 12px; border-right: 1px solid var(--line); background: var(--bg); }
.sidebar-label { padding: 0 12px; margin: 0 0 40px; color: var(--silver); font-size: 20px; letter-spacing: -.04em; font-weight: 500; }
.app-sidebar button { position: relative; display: flex; align-items: center; gap: 12px; height: 48px; min-height: 48px; padding: 0 12px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text-secondary); text-align: left; }
.app-sidebar button span { font-size: 14px; line-height: 20px; font-weight: 400; }
.nav-icon { display: grid; place-items: center; flex: none; }
.app-sidebar button:hover { background: var(--surface); color: var(--text); }
.app-sidebar button.active { background: var(--surface-selected); color: var(--blue); }
.app-sidebar button.active::before { content: ''; position: absolute; left: -13px; top: 14px; width: 2px; height: 20px; background: var(--blue); }
.app-sidebar .owner-nav { display: none; }
body[data-owner='true'] .app-sidebar .owner-nav { display: flex; }
.app-sidebar .sidebar-collapse { margin-top: auto; width: 48px; justify-content: center; }
body[data-auth='active'].sidebar-collapsed .app-sidebar { width: 72px; }
.sidebar-collapsed .app-sidebar button { justify-content: center; padding: 0; }
.sidebar-collapsed .app-sidebar button > span:not(.nav-icon), .sidebar-collapsed .sidebar-label { display: none; }
body[data-auth='active'].sidebar-collapsed .app-shell { margin-left: 112px; }
.dashboard, .history-page, .level-page, .account-page, .settings-page { padding: 48px 0 64px; }
.workspace-heading, .page-heading, .account-top { margin: 0 0 32px; }
.workspace-heading h1, .page-heading h1, .account-top h1 { margin: 0 0 8px; font-size: 36px; line-height: 44px; font-weight: 500; letter-spacing: -.035em; }
.workspace-heading p, .page-heading p { color: var(--text-secondary); font-size: 16px; }
.dashboard-tier-row { display: none; }
.terminal-grid { display: block; padding: 40px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.terminal-grid .upload-column, .terminal-grid .signal-panel { width: min(100%, 720px); margin: 0 auto; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; }
#dashboard[data-analysis-state='empty'] #signal-panel { display: none; }
#dashboard[data-analysis-state='processing'] .upload-column, #dashboard[data-analysis-state='result'] .upload-column { display: none; }
.upload-title { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; }
.help-button { min-height: 44px; color: var(--text-secondary); border: 0; background: transparent; font-size: 14px; font-weight: 400; }
.help-with-text { display: inline-flex; align-items: center; gap: 8px; }
.dropzone { display: grid; place-items: center; min-height: 320px; padding: 24px; border: 1px dashed var(--line-strong); border-radius: 10px; background: var(--bg); box-shadow: none; }
.dropzone:hover, .dropzone.dragging { border-color: var(--blue); background: var(--surface-selected); }
.dropzone #empty-upload { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.upload-icon { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 0 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--silver); box-shadow: none; }
.dropzone strong { font-size: 20px; line-height: 28px; font-weight: 500; color: var(--text); }
.dropzone span { color: var(--text-secondary); font-size: 14px; }
.image-preview { width: 100%; min-width: 0; }
#preview-img { max-width: 100%; max-height: 460px; object-fit: contain; }
#preview-name { display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.preview-actions { display: flex; gap: 12px; justify-content: center; align-items: center; }
#remove-file { min-width: 44px; min-height: 44px; color: var(--text-secondary); border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.mode-heading { margin: 24px 0 12px; }
.mode-select { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 12px 16px; background: var(--surface-raised); color: var(--text); border: 1px solid var(--line-strong); border-radius: 10px; text-align: left; font-size: 14px; }
.mode-select:hover, .mode-select[aria-expanded='true'] { border-color: var(--blue); }
.mode-options { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 8px; margin: 8px 0; border: 1px solid var(--line-hover); border-radius: 10px; background: var(--surface-raised); box-shadow: none; }
.mode-choice { display: flex; align-items: center; gap: 4px; width: 100%; min-width: 0; }
.mode-options .mode-card { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; width: 100%; min-height: 64px; padding: 12px; text-align: left; border: 1px solid transparent; border-radius: 6px; background: transparent; box-shadow: none; }
.mode-options .mode-card:hover { background: var(--surface-hover); }
.mode-options .mode-card.selected { background: var(--surface-selected); border: 1px solid var(--blue); box-shadow: none; }
.mode-card strong { color: var(--text); font-size: 14px; font-weight: 500; }
.mode-card span { color: var(--text-secondary); font-size: 12px; }
.mode-card small, .mode-card em { font-size: 12px; line-height: 16px; color: var(--text-muted); }
.mode-card.locked { opacity: .6; }
.mode-icon { width: 24px; height: 24px; color: var(--silver) !important; background: none; border: 0; }
.mode-info { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 0; background: transparent; color: var(--text-secondary); }
.expiry-heading { margin: 24px 0 12px; }
#expiry-options { display: flex; width: 100%; height: auto; min-height: 48px; margin: 0; padding: 4px; border: 1px solid var(--line-hover); border-radius: 10px; background: var(--bg); }
.expiry-options button { flex: 1; min-height: 44px; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--text-secondary); font-size: 14px; }
.expiry-options button.selected { background: var(--surface-selected); border-color: var(--blue); color: var(--blue); box-shadow: none; }
.analyze { width: 100%; margin-top: 24px; }
.analyze + .form-message { margin-top: 16px; }
.workflow-kicker, .workflow-foot { color: var(--text-secondary); font-size: 14px; letter-spacing: 0; }
.analysis-power { margin-block: 24px; color: var(--text-secondary); }
.analysis-power strong { color: var(--blue); }
.power-track { height: 4px; border-radius: 0; background: var(--line); }
.power-track i { background: var(--blue); box-shadow: none; }
.lattice-loader { min-height: 240px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; color: var(--text-secondary); }
.lattice-cells { display: grid; grid-template-columns: repeat(3, 8px); gap: 4px; }
.lattice-cells span { width: 8px; height: 8px; background: var(--silver); border-radius: 0; animation: lattice-wave 1.4s ease-in-out infinite; }
@keyframes lattice-wave { 0%,100% { opacity: .25; } 50% { opacity: 1; } }
.processing-steps { color: var(--text-secondary); font-size: 14px; }
.processing-steps li { border-color: var(--line); }
.processing-steps li.current { color: var(--blue); }
.processing-steps li.done { color: var(--success); }
.processing-steps li::before, .processing-steps li.current::before { background: var(--surface-raised); color: var(--blue); box-shadow: none; }
.signal-header { margin: 24px 0; color: var(--text-secondary); font-size: 14px; }
.signal-header > span:first-child { background: none; border: none; color: var(--text-muted); }
.signal-hero { padding: 24px 0 32px; display: flex; align-items: center; gap: 24px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none !important; box-shadow: none; }
.signal-hero strong { color: var(--text); font-size: 48px; line-height: 56px; letter-spacing: -.035em; font-weight: 500; }
.signal-hero span { font-size: 14px; color: var(--text-secondary); }
.signal-hero .direction-arrow { width: 40px; height: 40px; stroke: var(--success); stroke-width: 3px; fill: none; }
.signal-hero.down .direction-arrow { stroke: var(--error); }
.signal-hero.direction-down .direction-arrow { stroke: var(--error); transform: rotate(180deg); }
.signal-hero.direction-up .direction-arrow { stroke: var(--success); }
.signal-hero.wait .direction-arrow { stroke: var(--silver); }
.signal-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 32px 0; }
.signal-facts > div { padding: 0; border: 0; border-radius: 0; background: transparent; }
.signal-facts span { color: var(--text-muted); font-size: 12px; line-height: 16px; }
.signal-facts strong { color: var(--text); font-size: 20px; line-height: 28px; font-weight: 500; }
.signal-timer { background: none !important; border-color: var(--line) !important; }
.signal-timer .timer-progress { background: var(--blue); }
.signal-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.signal-analysis { margin-top: 32px; padding: 32px 0 0; border-top: 1px solid var(--line); max-width: 720px; }
.signal-analysis h3 { font-size: 24px; line-height: 32px; }
.signal-analysis dl > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 24px; border-bottom: 1px solid var(--line); padding: 20px 0; background: none; }
.signal-analysis dt { color: var(--text-muted); font-size: 14px; }
.signal-analysis dd { margin: 0; color: var(--text-secondary); font-size: 16px; line-height: 24px; font-weight: 400; overflow-wrap: anywhere; }
.result-preview { display: block; padding: 0; width: 100%; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--bg); }
.result-preview img { display: block; max-height: 320px; object-fit: contain; width: 100%; }
#terminal-result { animation: result-enter 240ms var(--ease); }
@keyframes result-enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.account-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; }
.account-primary { min-width: 0; }
.account-level, .account-info, .account-security, .settings-group, .level-summary, .owner-panel, .owner-users { padding: 32px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: none; }
.account-level > strong { font-size: 36px; line-height: 44px; font-weight: 500; }
.account-info { margin-top: 24px; }
.account-info dl > div, .level-detail-list > div { border-bottom: 1px solid var(--line); padding: 12px 0; }
.account-info dt, .level-detail-list dt { color: var(--text-secondary); font-size: 14px; }
.account-info dd, .level-detail-list dd { color: var(--text); font-size: 14px; font-weight: 500; }
.account-level-progress, .account-progress-label, .account-security p { color: var(--text-secondary); font-size: 14px; }
.account-security .button { width: 100%; margin-top: 12px; }
.account-status-title strong, .account-summary #summary-tier { color: var(--tier-color); }
.account-summary { min-width: 0; min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.account-summary strong, .account-summary span { font-size: 12px; font-weight: 500; }
.account-summary #summary-signals, .account-summary #summary-next { display: none; }
.account-popover { width: min(380px, calc(100vw - 32px)); padding: 24px; border: 1px solid var(--line-hover); border-radius: 14px; background: var(--surface-raised); box-shadow: 0 20px 60px #0006; backdrop-filter: none; }
.account-popover .account-status-grid { gap: 16px; }
.account-popover .account-status-grid > div { background: transparent; border: 0; padding: 0; }
.account-popover span, .account-popover p { color: var(--text-secondary); font-size: 12px; line-height: 20px; }
.account-popover strong { color: var(--text); font-size: 14px; font-weight: 500; }
.status-modes { background: var(--surface); border: 1px solid var(--line); color: var(--text-secondary); border-radius: 6px; }
.level-track { display: flex; gap: 0; margin: 32px 0; }
.track-step { flex: 1; color: var(--text-muted); font-size: 12px; min-width: 0; }
.track-step strong { font-size: 12px; font-weight: 500; }
.track-step::after { background: var(--line); }
.track-dot { background: var(--surface-raised); border-color: var(--line); box-shadow: none; }
.track-step.current .track-dot, .track-step.completed .track-dot { color: var(--bg); background: var(--track-color); border-color: var(--track-color); box-shadow: none; }
.track-step.current strong { color: var(--track-color); }
.level-view-benefits, .level-next, .level-view-progress { color: var(--text-secondary); background: transparent; border-color: var(--line); }
.settings-group { margin-bottom: 24px; }
.settings-row { padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.settings-row small { color: var(--text-secondary); }
.settings-row select { font-size: 14px; }
.history-toolbar { display: flex; gap: 12px; margin-bottom: 24px; }
.history-toolbar input { flex: 1; min-width: 0; }
.history-filters { display: flex; flex-wrap: wrap; gap: 16px; padding: 24px; margin-bottom: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.history-filters label { font-size: 14px; color: var(--text-secondary); }
.history-row, .history-group, .history-card { background: var(--surface); color: var(--text); border-color: var(--line); border-radius: 10px; box-shadow: none; }
.history-row { padding: 20px; }
.history-row:hover { background: var(--surface-hover); border-color: var(--line-hover); }
.history-row strong { font-weight: 500; }
.history-row span, .history-row small { color: var(--text-secondary); }
.history-empty { padding: 48px 24px; text-align: center; color: var(--text-secondary); border: 1px solid var(--line); border-radius: 14px; }
.history-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.history-page.detail-open .history-layout { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.history-master, .history-detail { min-width: 0; }
.history-search { flex: 1; min-width: 0; }
.history-search input { width: 100%; }
.history-filters { align-items: end; }
.history-filters label { display: grid; gap: 8px; flex: 1; min-width: 140px; }
.history-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.history-chips:empty { display: none; }
.history-chips span { background: var(--surface-raised); color: var(--text-secondary); padding: 8px 12px; border-radius: 6px; font-size: 12px; }
.history-list { border-top: 1px solid var(--line); }
.history-row { display: flex; flex-direction: column; gap: 8px; width: 100%; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; text-align: left; }
.history-date { color: var(--text-muted); font-size: 12px; }
.history-row-main { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; }
.history-row-main strong { font-size: 20px; line-height: 28px; }
.history-summary { color: var(--text-secondary); font-size: 14px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; }
.direction-up { color: var(--success); }
.direction-down { color: var(--error); }
.history-row .direction-up { color: var(--success); }
.history-row .direction-down { color: var(--error); }
#history-more { display: flex; margin: 24px auto; }
.history-detail { padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.history-detail-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; }
.history-detail-top button { color: var(--text-secondary); border: 0; background: transparent; min-height: 44px; min-width: 44px; }
.history-detail-top #history-back { display: none; }
.history-preview { display: block; max-width: 100%; width: 160px; max-height: 100px; object-fit: contain; border-radius: 6px; }
.history-detail-meta { color: var(--text-muted); font-size: 12px; line-height: 20px; }
.history-conclusion { color: var(--text); font-size: 16px; line-height: 24px; }
.history-report div { padding: 16px 0; border-top: 1px solid var(--line); }
.history-report dt { color: var(--text-muted); font-size: 14px; }
.history-report dd { margin: 8px 0 0; color: var(--text-secondary); font-size: 16px; line-height: 24px; white-space: pre-wrap; }
.level-overview { padding: 32px 0; border-top: 1px solid var(--line); }
.level-overview span, .level-overview p { color: var(--text-secondary); font-size: 14px; }
.level-overview strong { display: block; margin: 8px 0 16px; font-size: 48px; line-height: 56px; font-weight: 500; letter-spacing: -.035em; }
.level-overview progress { width: min(100%, 530px); }
.level-benefit { display: flex; align-items: center; gap: 24px; width: 100%; min-height: 64px; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--text); text-align: left; }
.level-benefit strong { width: 110px; color: var(--level-color); font-size: 14px; font-weight: 500; }
.level-benefit span:nth-child(2) { flex: 1; color: var(--text-secondary); font-size: 14px; }
.level-benefit:hover { background: var(--surface); }
#level-upgrade { margin-top: 32px; }
.settings-list { border-top: 1px solid var(--line); }
.settings-list button { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 64px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--text); font-size: 16px; text-align: left; }
.settings-list button span { color: var(--text-muted); }
.settings-list button:hover { background: var(--surface); }
.help-button { width: auto; height: auto; padding: 4px 0; border-radius: 6px; }
.mode-heading .field-label { font-size: 14px; color: var(--text-secondary); text-align: left; }
.signal-panel { min-height: 0; }
.dropzone #empty-upload small { font-size: 12px; line-height: 16px; color: var(--text-muted); }
.dropzone #empty-upload .button { min-height: 48px; }
.image-preview .preview-actions { position: static; margin-top: 16px; }
.image-preview .preview-actions button, .image-preview .preview-actions .button { height: 44px; min-height: 44px; border-radius: 6px; font-size: 14px; }
.image-preview .preview-actions #remove-file { width: 44px; height: 44px; border-radius: 6px; }
.signal-facts > div:nth-child(4) strong { color: var(--text); }
.account-level-progress progress::-webkit-progress-bar, .upgrade-dialog progress::-webkit-progress-bar { background: var(--line); }
.account-level-progress progress::-webkit-progress-value, .upgrade-dialog progress::-webkit-progress-value { background: var(--blue); border-radius: 0; }
.account-level-progress progress::-moz-progress-bar, .upgrade-dialog progress::-moz-progress-bar { background: var(--blue); border-radius: 0; }
.history-direction.up, .history-direction.call { color: var(--success); background: var(--success-bg); }
.history-direction.down, .history-direction.put { color: var(--error); background: var(--error-bg); }
.owner-stat-grid > div { background: var(--surface-raised); border: 1px solid var(--line); border-radius: 10px; }
.owner-stat-grid strong { color: var(--text); font-size: 24px; font-weight: 500; }
.owner-users { margin-top: 24px; overflow: auto; }
.owner-filters button { height: 44px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text-secondary); }
.owner-filters button.active { color: var(--blue); background: var(--surface-selected); border-color: var(--blue); }
.owner-table th, .owner-table td { border-color: var(--line); font-size: 14px; }
.owner-table th { color: var(--text-secondary); font-weight: 500; }
.owner-table tbody tr:hover { background: var(--surface-hover); }
.guide-dialog { width: min(480px, calc(100vw - 64px)); max-height: calc(100dvh - 64px); margin: auto; padding: 32px; border: 1px solid var(--line-hover); border-radius: 20px; background: var(--surface-raised); color: var(--text); box-shadow: 0 24px 80px #0006; backdrop-filter: none; overflow: auto; }
.guide-dialog[open] { animation: modal-enter 220ms var(--ease); }
@keyframes modal-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.guide-dialog::backdrop { background: rgb(0 0 0 / 64%); backdrop-filter: blur(4px); }
.guide-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
.guide-top h2 { margin: 8px 0 0; font-size: 24px; line-height: 32px; font-weight: 500; }
.guide-top > button, #preview-close { display: grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0; border: 0; border-radius: 6px; color: var(--text-secondary); background: transparent; }
.guide-top > button:hover { background: var(--surface-hover); color: var(--text); }
.guide-dialog p, .guide-dialog li { color: var(--text-secondary); font-size: 14px; line-height: 24px; }
.guide-examples > div, .upgrade-column, .upgrade-gain { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: none; }
.upgrade-dialog { width: min(640px, calc(100vw - 64px)); }
.upgrade-difference strong { color: var(--silver); font-size: 36px; line-height: 44px; font-weight: 500; }
.upgrade-gain strong { color: var(--text); font-weight: 500; }
.upgrade-column strong { font-weight: 500; color: var(--text); }
.preview-dialog { width: min(1040px, calc(100vw - 64px)); }
.preview-dialog img { max-width: 100%; max-height: calc(100dvh - 160px); object-fit: contain; }
.level-dialog #level-title { color: var(--level-color); }
.landing-final h2 { margin: 0; max-width: 640px; }
.landing-final .button { align-self: center; }
.level-dialog { width: min(600px, calc(100vw - 32px)); padding: 24px; text-align: left; }
.level-dialog .guide-top { position: sticky; top: -24px; z-index: 1; margin: -24px -24px 0; padding: 16px 24px; background: var(--surface-raised); border-bottom: 1px solid var(--line); }
.level-dialog .guide-top h2 { margin: 6px 0 0; }
.level-dialog .level-purpose { margin: 20px 0 8px; }
.level-dialog .level-detail-list { margin: 0; }
.level-dialog .level-detail-list > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 14px 0; }
.level-dialog .level-detail-list dt, .level-dialog .level-detail-list dd { margin: 0; text-align: left; line-height: 22px; overflow-wrap: anywhere; }
.level-dialog h3 { margin: 28px 0 12px; font-size: 18px; line-height: 26px; font-weight: 600; }
.level-mode-detail { margin: 10px 0 0; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.level-mode-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; }
.level-mode-heading h4 { margin: 0; color: var(--text); font-size: 15px; line-height: 24px; font-weight: 600; }
.level-mode-heading span { color: var(--level-color); font-size: 13px; line-height: 22px; font-variant-numeric: tabular-nums; }
.level-dialog .level-mode-detail p { margin: 8px 0 0; }
.level-dialog .level-mode-capacity { color: var(--text); font-size: 13px; line-height: 22px; }
.level-check-section ul { margin: 0; padding-left: 20px; }
.level-check-section li { padding-left: 2px; margin: 8px 0; }
.level-dialog .level-detail-note { margin: 16px 0 0; font-size: 13px; line-height: 22px; }
@media (max-width: 480px) {
  .level-dialog { padding: 20px; max-height: calc(100dvh - 32px); }
  .level-dialog .guide-top { top: -20px; margin: -20px -20px 0; padding: 12px 20px; }
  .level-dialog .level-detail-list > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@media (min-width: 1024px) { body[data-auth='active'] .brand { display: none; } body[data-auth='active'] .view-title { display: block; font-size: 14px; color: var(--text-secondary); order: -1; } }
@media (min-width: 768px) and (max-width: 1023px) {
  body[data-auth='active'] .app-sidebar { display: none; }
  body[data-auth='active'] .app-shell, body[data-auth='active'].sidebar-collapsed .app-shell { width: min(100% - 64px, 1040px); margin: 0 auto; }
  .level-cards, .public-levels .level-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .level-detail { min-height: 32px; }
  .hero-copy h1 { font-size: 64px; line-height: 72px; }
  .hero-grid { min-height: 600px; }
  .public-nav { gap: 16px; }
  .site-header, .header-right { gap: 8px; }
  .public-nav a { font-size: 12px; }
  .faq { gap: 32px; }
}
@media (max-width: 767px) {
  :root { --topbar-height: 56px; }
  html { scroll-padding-top: 80px; }
  .app-shell, body[data-auth='active'] .app-shell, body[data-auth='active'].sidebar-collapsed .app-shell { width: calc(100% - 32px); margin: 0 auto; padding: 0; }
  .site-header, body[data-auth='active'] .site-header { height: 56px; gap: 8px; }
  .brand { font-size: 18px; gap: 4px; }
  .brand-mark { width: 24px; }
  #public-navigation, #header-actions-root { display: none; }
  .header-right { gap: 4px; }
  .language-switch button { width: 36px; height: 44px; }
  .hero-grid { min-height: 600px; padding: 64px 0; }
  .hero-copy h1 { font-size: 44px; line-height: 48px; letter-spacing: -.04em; }
  .hero-lead { max-width: 320px; }
  .hero-cta { align-items: flex-start; flex-direction: column; gap: 8px; }
  .hero-logo-row { margin-top: 32px; gap: 12px; font-size: 12px; letter-spacing: 0; }
  .filament-canvas { mask-image: linear-gradient(90deg, transparent, #0003 70%, #0006); }
  .motion-control { bottom: 16px; }
  .landing-steps, .public-levels, .faq, .landing-final { padding: 64px 0; }
  .landing-steps h2 { margin-bottom: 32px; }
  .landing-steps > div { grid-template-columns: 1fr; gap: 32px; }
  .landing-steps p { position: relative; padding-left: 40px; gap: 8px; }
  .landing-steps p span { position: absolute; top: 6px; left: 0; }
  .landing-steps p small { max-width: none; }
  .pricing-heading { grid-template-columns: 1fr; gap: 24px; margin-bottom: 32px; }
  .pricing-heading h2, .faq h2, .landing-final h2 { font-size: 28px; line-height: 36px; }
  .level-cards, .public-levels .level-cards { grid-template-columns: 1fr; gap: 12px; }
  .level-card, .public-levels .level-card { padding: 24px; }
  .level-card h3 { font-size: 16px; }
  .level-detail { min-height: 0; margin-bottom: 24px; font-size: 14px; line-height: 20px; }
  .level-price { margin-bottom: 24px; }
  .level-signals, .level-extra, .level-modes { font-size: 14px; line-height: 20px; min-height: 0; }
  .level-card .level-choose, .level-card .level-details-link { font-size: 14px; }
  .faq { grid-template-columns: 1fr; gap: 32px; }
  .faq-intro p { max-width: none; }
  .faq-intro a { display: inline-flex; margin-right: 16px; }
  .faq details { padding: 0 16px; }
  .landing-final { display: flex; }
  .landing-final p { margin: 16px 0 24px; }
  .site-footer { flex-direction: column; gap: 16px; padding: 24px 0; }
  .access, .deposit { padding: 40px 0 64px; }
  .access h1, .deposit h1, .workspace-heading h1, .page-heading h1, .account-top h1 { font-size: 28px; line-height: 36px; }
  .access-grid { grid-template-columns: 1fr; gap: 32px; margin-top: 32px; }
  .access-aside, #register .access-aside, .auth-surface, .deposit-card { padding: 24px; }
  .setup-actions .button { flex: 1 1 120px; }
  .app-sidebar, body[data-auth='active'] .app-sidebar { display: none; }
  body[data-auth='active'] .mobile-tabs { position: fixed; inset: auto 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); height: calc(64px + env(safe-area-inset-bottom)); padding: 0 8px env(safe-area-inset-bottom); border-top: 1px solid var(--line); background: var(--bg); z-index: 55; }
  .mobile-tabs button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 64px; padding: 0; background: none; border: 0; color: var(--text-muted); font-size: 12px; line-height: 16px; font-weight: 400; }
  .mobile-tabs button.active { color: var(--blue); background: transparent; }
  body[data-auth='active'] { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .dashboard, .history-page, .level-page, .account-page, .settings-page { padding: 32px 0 48px; }
  .terminal-grid { padding: 24px 16px; }
  .dropzone { min-height: 280px; padding: 24px 16px; }
  .dropzone strong { font-size: 20px; }
  .upload-title { align-items: flex-start; flex-direction: column; gap: 4px; }
  .signal-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .signal-hero { gap: 16px; }
  .signal-hero strong { font-size: 36px; line-height: 44px; }
  .signal-hero .direction-arrow { width: 32px; height: 32px; }
  .signal-analysis dl > div { grid-template-columns: 1fr; gap: 8px; }
  .signal-actions .button { flex: 1 1 160px; }
  .account-layout { grid-template-columns: 1fr; gap: 24px; }
  .account-level, .account-info, .account-security, .settings-group, .level-summary, .owner-panel, .owner-users { padding: 24px; }
  .account-summary #summary-credits { display: none; }
  .account-summary { padding: 8px; }
  .account-popover { position: fixed; top: 64px; right: 16px; }
  .track-step strong { font-size: 10px; }
  .history-toolbar { flex-wrap: wrap; }
  .history-toolbar input { flex: 1 1 100%; }
  .history-filters { flex-direction: column; padding: 16px; }
  .history-filters label { min-width: 0; width: 100%; }
  .history-page.detail-open .history-layout { grid-template-columns: minmax(0, 1fr); }
  .history-page.detail-open .history-master { display: none; }
  .history-detail-top #history-back { display: inline-flex; }
  .level-benefit { flex-wrap: wrap; gap: 8px 16px; padding: 16px 0; }
  .level-benefit span:nth-child(2) { min-width: 120px; }
  .owner-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-menu { position: fixed; inset: 0 0 0 auto; width: min(360px, calc(100vw - 32px)); height: 100dvh; padding: 24px; border: 0; border-left: 1px solid var(--line-hover); border-radius: 0; background: var(--surface-raised); overflow-y: auto; z-index: 80; }
  .site-menu:not(.hidden) { animation: drawer-enter 220ms var(--ease); }
  @keyframes drawer-enter { from { transform: translateX(100%); } to { transform: translateX(0); } }
  .drawer-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; color: var(--silver); font-weight: 500; }
  .drawer-heading button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; }
  .drawer-public { display: block; padding-bottom: 24px; margin-bottom: 16px; border-bottom: 1px solid var(--line-hover); }
  body[data-auth='active'] .drawer-public { display: none; }
  .menu-backdrop { position: fixed; inset: 0; z-index: 70; border: 0; padding: 0; border-radius: 0; background: rgb(0 0 0 / 64%); }
  .menu-open .menu-backdrop { display: block; }
  .menu-open .site-header { z-index: 80; }
  body.menu-open { overflow: hidden; }
  .guide-dialog { width: 100%; max-width: 100%; max-height: calc(100dvh - 32px); padding: 24px 24px calc(24px + env(safe-area-inset-bottom)); margin: auto 0 0; border-radius: 20px 20px 0 0; border-bottom: 0; }
  .auth-dialog, .owner-user-dialog { max-height: 100dvh; }
  .preview-dialog { width: 100%; }
}
@media (min-width: 560px) and (max-width: 767px) { .level-cards, .public-levels .level-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0ms !important; }
}