[hidden] { display: none !important; }
:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;
  --space-20: 80px; --space-24: 96px;

  --color-bg: #060d19;
  --color-surface: #0b1628;
  --color-surface-2: #10203a;
  --color-surface-3: #16294a;
  --color-border: rgba(140, 180, 255, 0.13);
  --color-border-strong: rgba(140, 180, 255, 0.26);
  --color-text: #eaf2ff;
  --color-text-muted: #9cb0cf;
  --color-text-faint: #6d82a5;
  --color-primary: #2a8cff;
  --color-primary-hover: #4d9fff;
  --color-primary-ink: #04101f;
  --color-sky: #7cc7ff;
  --color-warn: #ffc857;
  --color-error: #ff7a7a;
  --color-ok: #5fe0a8;

  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px;
  --transition-interactive: 160ms cubic-bezier(0.2, 0.7, 0.2, 1);
  --font-display: 'Clash Display', 'Satoshi', system-ui, sans-serif;
  --font-body: 'Satoshi', 'Inter', system-ui, sans-serif;
  --shadow-lg: 0 24px 60px -24px rgba(0, 8, 24, 0.8);
  --header-h: 68px;
  color-scheme: dark;
}

body { background: var(--color-bg); }
a { color: inherit; }

.skip-link { position: absolute; left: -9999px; top: 8px; background: var(--color-primary); color: var(--color-primary-ink); padding: 8px 14px; border-radius: var(--radius-sm); z-index: 100; font-weight: 700; }
.skip-link:focus { left: 8px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  height: var(--header-h);
  background: rgba(6, 13, 25, 0.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}
.site-header .inner { height: 100%; display: flex; align-items: center; gap: var(--space-6); padding-inline: clamp(16px, 3vw, 40px); max-width: 1480px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; flex-shrink: 0; }
.brand img { height: 46px; width: auto; }
.brand .tag { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-sky); border-left: 1px solid var(--color-border-strong); padding-left: var(--space-3); line-height: 1.2; }
.nav { margin-left: auto; display: flex; gap: var(--space-1); align-items: center; }
.nav a { text-decoration: none; font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted); padding: 10px 14px; border-radius: var(--radius-sm); min-height: 44px; display: inline-flex; align-items: center; }
.nav a:hover { color: var(--color-text); background: var(--color-surface-2); }
.nav a[aria-current='page'] { color: var(--color-text); background: var(--color-surface-2); }
.nav a.cta { background: var(--color-primary); color: var(--color-primary-ink); font-weight: 700; margin-left: var(--space-2); }
.nav a.cta:hover { background: var(--color-primary-hover); }
.menu-btn { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: var(--radius-sm); align-items: center; justify-content: center; color: var(--color-text); }
.menu-btn:hover { background: var(--color-surface-2); }

/* Creations sidebar */
.creations { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--color-border); background: #08111f; }
.cr-head { padding: var(--space-5) var(--space-4) var(--space-3); display: flex; flex-direction: column; gap: 4px; }
.cr-count { font-size: var(--text-xs); color: var(--color-text-faint); }
.cr-search { margin: 0 var(--space-4) var(--space-3); display: flex; align-items: center; gap: 8px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0 12px; min-height: 42px; color: var(--color-text-faint); }
.cr-search:focus-within { border-color: var(--color-primary); }
.cr-search svg { width: 16px; height: 16px; flex: none; }
.cr-search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--color-text); font: inherit; font-size: var(--text-sm); }
.cr-list { flex: 1; overflow-y: auto; padding: 0 var(--space-2) var(--space-4); }
.cr-group + .cr-group { margin-top: var(--space-3); }
.cr-label { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-faint); padding: var(--space-2) var(--space-3); }
.cr-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cr-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-md); color: var(--color-text-muted); text-decoration: none; border: 1px solid transparent; transition: background 160ms, color 160ms, border-color 160ms; }
.cr-item:hover { background: rgba(124, 199, 255, .06); color: var(--color-text); }
.cr-item[aria-current=page] { background: rgba(42, 140, 255, .14); border-color: rgba(42, 140, 255, .45); color: var(--color-text); }
.cr-ic { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-sky, #7cc7ff); }
.cr-item[aria-current=page] .cr-ic { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.cr-ic svg { width: 20px; height: 20px; }
.cr-txt { display: flex; flex-direction: column; min-width: 0; }
.cr-txt b { font-size: var(--text-sm); font-weight: 700; line-height: 1.25; }
.cr-txt small { font-size: 12px; color: var(--color-text-faint); line-height: 1.3; }
.cr-empty { font-size: var(--text-sm); color: var(--color-text-faint); padding: var(--space-3); }
.cr-more { margin: 0; padding: var(--space-3) var(--space-4) var(--space-4); border-top: 1px solid var(--color-border); font-size: 12px; color: var(--color-text-faint); }
.cr-more a { color: var(--color-sky, #7cc7ff); }
@media (max-width: 1180px) and (min-width: 901px) {
  .studio { grid-template-columns: 76px minmax(320px, 360px) 1fr; }
  .creations .cr-head, .creations .cr-search, .creations .cr-label, .creations .cr-txt, .creations .cr-more { display: none; }
  .cr-list { padding-top: var(--space-3); }
  .cr-item { justify-content: center; padding: 8px; }
}
@media (max-width: 900px) {
  .brand .tag { display: none; }
  .menu-btn { display: inline-flex; }
  .nav { display: none; position: absolute; top: var(--header-h); left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--color-surface); border-bottom: 1px solid var(--color-border); padding: var(--space-3); gap: 2px; }
  .nav.open { display: flex; }
  .nav a.cta { margin: var(--space-2) 0 0; justify-content: center; }
}

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; padding: 12px 22px; border-radius: var(--radius-md); font-weight: 700; font-size: var(--text-sm); text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; }
.btn-primary { background: var(--color-primary); color: var(--color-primary-ink); }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-ghost { border-color: var(--color-border-strong); color: var(--color-text); background: transparent; }
.btn-ghost:hover { background: var(--color-surface-2); border-color: var(--color-sky); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ---------- Layout helpers ---------- */
.wrap { max-width: 1280px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 48px); }
.eyebrow { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-sky); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
.muted { color: var(--color-text-muted); }

/* ---------- Home ---------- */
.hero { position: relative; padding-block: clamp(40px, 7vw, 96px) clamp(48px, 7vw, 88px); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.hero-logo { width: min(560px, 100%); height: auto; margin-bottom: var(--space-6); margin-left: -2%; }
.hero h1 { font-size: var(--text-3xl); line-height: 1.02; margin-bottom: var(--space-5); }
.hero h1 span { color: var(--color-primary); }
.hero p.lead { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 34ch; margin-bottom: var(--space-8); line-height: 1.45; }
.hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.hero-meta { margin-top: var(--space-8); display: flex; gap: var(--space-6); flex-wrap: wrap; color: var(--color-text-muted); font-size: var(--text-sm); }
.hero-meta b { color: var(--color-text); font-weight: 700; }
.hero-art { position: relative; display: grid; grid-template-columns: 1fr 0.8fr; gap: var(--space-4); }
.hero-art figure { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); background: var(--color-surface); }
.hero-art img { width: 100%; height: 100%; object-fit: cover; }
.hero-art .a { aspect-ratio: 4 / 5; }
.hero-art .b { aspect-ratio: 3 / 5; margin-top: 18%; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } .hero-art { order: -1; } .hero-logo { width: min(420px, 100%); } }

.products { padding-block: var(--space-16) var(--space-20); }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: var(--space-6); margin-bottom: var(--space-8); flex-wrap: wrap; }
.section-head h2 { font-size: var(--text-2xl); line-height: 1.05; }
.section-head p { color: var(--color-text-muted); max-width: 46ch; }
.product-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--space-5); }
.product-card { position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: var(--radius-xl); overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); text-decoration: none; transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1), border-color 220ms; }
.product-card:hover { border-color: var(--color-primary); transform: translateY(-3px); }
.product-card .media { aspect-ratio: 16 / 10; overflow: hidden; }
.product-card .media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.product-card:hover .media img { transform: scale(1.03); }
.product-card .body { padding: var(--space-6) var(--space-6) var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); }
.product-card h3 { font-size: var(--text-xl); }
.product-card p { color: var(--color-text-muted); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.chip { font-size: var(--text-xs); font-weight: 600; padding: 5px 10px; border-radius: 999px; background: var(--color-surface-2); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.product-card .go { margin-top: auto; padding-top: var(--space-4); font-weight: 700; color: var(--color-primary); display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 860px) { .product-grid { grid-template-columns: 1fr; } }

.flow { padding-block: var(--space-20); border-top: 1px solid var(--color-border); }
.flow-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.flow h2 { font-size: var(--text-2xl); line-height: 1.05; margin-bottom: var(--space-4); }
.steps { list-style: none; counter-reset: s; display: flex; flex-direction: column; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 64px 1fr; gap: var(--space-4); padding-block: var(--space-6); border-bottom: 1px solid var(--color-border); }
.steps li:first-child { padding-top: 0; }
.steps li::before { content: counter(s, decimal-leading-zero); font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-primary); line-height: 1; }
.steps h3 { font-size: var(--text-lg); font-family: var(--font-body); font-weight: 700; margin-bottom: 4px; }
.steps p { color: var(--color-text-muted); }
@media (max-width: 860px) { .flow-grid { grid-template-columns: 1fr; } }

.kit { padding-block: var(--space-16); }
.kit-panel { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--radius-xl); overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); }
.kit-panel .media { min-height: 360px; }
.kit-panel .media img { width: 100%; height: 100%; object-fit: cover; }
.kit-panel .body { padding: clamp(24px, 4vw, 56px); }
.kit-panel h2 { font-size: var(--text-xl); margin-bottom: var(--space-4); }
.file-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-6); }
.file-list li { display: grid; grid-template-columns: 76px 1fr; gap: var(--space-3); align-items: baseline; }
.file-list code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: var(--text-xs); color: var(--color-sky); background: var(--color-surface-2); padding: 3px 8px; border-radius: var(--radius-sm); text-align: center; }
.file-list span { color: var(--color-text-muted); font-size: var(--text-sm); }
@media (max-width: 860px) { .kit-panel { grid-template-columns: 1fr; } .kit-panel .media { min-height: 220px; aspect-ratio: 16/9; } }

.member-band { padding-block: var(--space-16) var(--space-20); }
.member-inner { display: flex; justify-content: space-between; align-items: center; gap: var(--space-8); flex-wrap: wrap; padding: clamp(24px, 4vw, 48px); border-radius: var(--radius-xl); border: 1px dashed var(--color-border-strong); }
.member-inner h2 { font-size: var(--text-xl); margin-bottom: var(--space-2); }

.site-footer { border-top: 1px solid var(--color-border); padding-block: var(--space-10); color: var(--color-text-faint); font-size: var(--text-sm); }
.site-footer .wrap { display: flex; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; align-items: center; }
.site-footer nav { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.site-footer a { color: var(--color-text-muted); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.site-footer a:hover { color: var(--color-text); }
.site-footer img { height: 34px; width: auto; }

/* ---------- Content pages ---------- */
.page-head { padding-block: var(--space-16) var(--space-8); }
.page-head h1 { font-size: var(--text-2xl); line-height: 1.05; margin-block: var(--space-3) var(--space-4); }
.page-head p { color: var(--color-text-muted); font-size: var(--text-lg); max-width: 52ch; line-height: 1.45; }
.prose { padding-bottom: var(--space-20); display: grid; grid-template-columns: 220px 1fr; gap: clamp(24px, 5vw, 72px); }
.prose .toc { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; display: flex; flex-direction: column; gap: 2px; }
.prose .toc a { text-decoration: none; color: var(--color-text-muted); font-size: var(--text-sm); padding: 8px 12px; border-radius: var(--radius-sm); }
.prose .toc a:hover { color: var(--color-text); background: var(--color-surface-2); }
.prose article section { padding-bottom: var(--space-10); margin-bottom: var(--space-10); border-bottom: 1px solid var(--color-border); }
.prose article section:last-child { border-bottom: 0; }
.prose h2 { font-size: var(--text-xl); margin-bottom: var(--space-4); }
.prose h3 { font-size: var(--text-lg); font-family: var(--font-body); font-weight: 700; margin-block: var(--space-6) var(--space-2); }
.prose p, .prose li { color: var(--color-text-muted); }
.prose p + p { margin-top: var(--space-3); }
.prose ul, .prose ol { padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; margin-top: var(--space-3); }
.prose strong { color: var(--color-text); }
.settings-table { width: 100%; margin-top: var(--space-4); font-size: var(--text-sm); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; border-collapse: separate; border-spacing: 0; }
.settings-table th, .settings-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--color-border); }
.settings-table tr:last-child td { border-bottom: 0; }
.settings-table th { background: var(--color-surface-2); font-weight: 700; color: var(--color-text); }
.settings-table td { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.note { margin-top: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text-muted); font-size: var(--text-sm); }
@media (max-width: 860px) { .prose { grid-template-columns: 1fr; } .prose .toc { position: static; flex-direction: row; flex-wrap: wrap; } }

.perk-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-top: var(--space-6); }
.perk { padding: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.perk h3 { font-family: var(--font-body); font-weight: 700; font-size: var(--text-lg); margin-bottom: 6px; }
.perk p { color: var(--color-text-muted); }
.perk.wide { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); flex-wrap: wrap; background: var(--color-surface-2); }
@media (max-width: 700px) { .perk-list { grid-template-columns: 1fr; } }
.status-pill { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-warn); background: rgba(255, 200, 87, 0.1); border: 1px solid rgba(255, 200, 87, 0.3); padding: 6px 12px; border-radius: 999px; }

/* ---------- Studio ---------- */
.studio { display: grid; grid-template-columns: 248px minmax(320px, 380px) 1fr; height: calc(100dvh - var(--header-h)); }
.panel { overflow-y: auto; border-right: 1px solid var(--color-border); background: var(--color-surface); display: flex; flex-direction: column; }
.panel-head { padding: var(--space-6) var(--space-6) var(--space-4); }
.panel-head h1 { font-size: var(--text-xl); line-height: 1.1; margin-top: 6px; }
.panel-head p { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: 6px; }
.presets { display: flex; gap: var(--space-2); flex-wrap: wrap; padding: 0 var(--space-6) var(--space-4); }
.presets button { font-size: var(--text-xs); font-weight: 600; padding: 8px 12px; min-height: 36px; border-radius: 999px; border: 1px solid var(--color-border-strong); color: var(--color-text-muted); }
.presets button:hover { color: var(--color-text); border-color: var(--color-sky); }

.group { border-top: 1px solid var(--color-border); }
.group > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-6); font-weight: 700; font-size: var(--text-sm); min-height: 56px; user-select: none; }
.group > summary::-webkit-details-marker { display: none; }
.group > summary .num { font-family: var(--font-display); color: var(--color-primary); font-size: var(--text-sm); width: 22px; }
.group > summary .chev { margin-left: auto; transition: transform 200ms; color: var(--color-text-faint); }
.group[open] > summary .chev { transform: rotate(180deg); }
.group > summary:hover { background: var(--color-surface-2); }
.group-body { padding: 0 var(--space-6) var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }

.field { display: flex; flex-direction: column; gap: 8px; }
.field > label, .field > .label { font-size: var(--text-xs); font-weight: 700; color: var(--color-text-muted); letter-spacing: 0.04em; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.field output { font-variant-numeric: tabular-nums; color: var(--color-text); font-weight: 600; }
.field .hint { font-size: var(--text-xs); color: var(--color-text-faint); line-height: 1.4; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }

input[type='text'] { width: 100%; min-height: 46px; padding: 10px 14px; background: var(--color-bg); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); font-size: var(--text-base); font-weight: 600; }
input[type='text']:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(42, 140, 255, 0.25); }
input[type='range'] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; }
input[type='range']::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(to right, var(--color-primary) var(--fill, 50%), var(--color-surface-3) var(--fill, 50%)); }
input[type='range']::-moz-range-track { height: 4px; border-radius: 4px; background: var(--color-surface-3); }
input[type='range']::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--color-primary); }
input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--color-text); border: 3px solid var(--color-primary); margin-top: -8px; }
input[type='range']::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--color-text); border: 3px solid var(--color-primary); }

.seg { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 6px; }
.seg button { min-height: 44px; padding: 8px 6px; border-radius: var(--radius-md); background: var(--color-bg); border: 1px solid var(--color-border); font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; line-height: 1.2; text-align: center; }
.seg button svg { width: 26px; height: 26px; }
.seg button:hover { color: var(--color-text); border-color: var(--color-border-strong); }
.seg button[aria-checked='true'] { color: var(--color-text); border-color: var(--color-primary); background: rgba(42, 140, 255, 0.12); }

.fontgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.fontgrid button { min-height: 52px; border-radius: var(--radius-md); background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-text); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 6px 12px; text-align: left; }
.fontgrid button .s { font-size: 20px; line-height: 1.1; white-space: nowrap; overflow: hidden; max-width: 100%; }
.fontgrid button .n { font-size: 12px; color: var(--color-text-faint); font-weight: 600; }
.fontgrid button:hover { border-color: var(--color-border-strong); }
.fontgrid button[aria-checked='true'] { border-color: var(--color-primary); background: rgba(42, 140, 255, 0.12); }

.swatches { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.swatches button { width: 32px; height: 32px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.14); position: relative; }
.swatches button::after { content: ''; position: absolute; inset: -6px; }
.swatches button[aria-checked='true'] { box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-primary); }
.swatches label.custom { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; border: 2px dashed var(--color-border-strong); display: grid; place-items: center; cursor: pointer; position: relative; color: var(--color-text-muted); }
.swatches label.custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.color-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.color-row .label { display: flex; align-items: center; gap: 8px; }
.color-row .dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); }

.toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 44px; cursor: pointer; font-size: var(--text-sm); font-weight: 600; }
.toggle input { appearance: none; width: 44px; height: 26px; border-radius: 999px; background: var(--color-surface-3); position: relative; cursor: pointer; flex-shrink: 0; }
.toggle input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--color-text); transition: transform 180ms; }
.toggle input:checked { background: var(--color-primary); }
.toggle input:checked::after { transform: translateX(18px); }

.upload { border: 1.5px dashed var(--color-border-strong); border-radius: var(--radius-md); padding: var(--space-5); text-align: center; cursor: pointer; display: flex; flex-direction: column; gap: 6px; align-items: center; color: var(--color-text-muted); font-size: var(--text-sm); position: relative; }
.upload:hover, .upload.drag { border-color: var(--color-primary); background: rgba(42, 140, 255, 0.06); }
.upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload strong { color: var(--color-text); }
.mask-preview { display: none; gap: var(--space-3); align-items: center; padding: var(--space-3); background: var(--color-bg); border-radius: var(--radius-md); border: 1px solid var(--color-border); }
.mask-preview.on { display: flex; }
.mask-preview canvas { width: 96px; height: 72px; object-fit: contain; background: repeating-conic-gradient(#0f1d33 0 25%, #0b1628 0 50%) 0 0 / 12px 12px; border-radius: var(--radius-sm); }
.mask-preview .meta { font-size: var(--text-xs); color: var(--color-text-muted); flex: 1; min-width: 0; }
.mask-preview .meta strong { display: block; color: var(--color-text); font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linkbtn { font-size: var(--text-xs); font-weight: 700; color: var(--color-sky); text-decoration: underline; min-height: 32px; }

.download { margin-top: auto; padding: var(--space-6); border-top: 1px solid var(--color-border); background: var(--color-surface-2); display: flex; flex-direction: column; gap: var(--space-3); position: sticky; bottom: 0; }
.download .btn { width: 100%; }
.download .pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.download .pair .btn { min-height: 44px; padding: 10px; }
.download .fine { font-size: var(--text-xs); color: var(--color-text-faint); line-height: 1.45; }
.download .fine a { color: var(--color-text-muted); }

.stage { position: relative; background: radial-gradient(120% 90% at 50% 35%, #2a4573 0%, #142645 50%, #0a1529 100%); overflow: hidden; }
.viewport { position: absolute; inset: 0; }
.viewport canvas { display: block; touch-action: none; cursor: grab; }
.viewport canvas:active { cursor: grabbing; }
.stage-top { position: absolute; top: var(--space-4); left: var(--space-4); right: var(--space-4); display: flex; justify-content: space-between; gap: var(--space-3); pointer-events: none; flex-wrap: wrap; }
.stage-top > * { pointer-events: auto; }
.views { display: flex; gap: 2px; background: rgba(6, 13, 25, 0.75); backdrop-filter: blur(8px); padding: 4px; border-radius: var(--radius-md); border: 1px solid var(--color-border); }
.views button { min-height: 36px; min-width: 52px; padding: 6px 12px; border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 700; color: var(--color-text-muted); }
.views button:hover { color: var(--color-text); }
.views button[aria-pressed='true'] { background: var(--color-surface-3); color: var(--color-text); }
.status { display: inline-flex; align-items: center; gap: 8px; background: rgba(6, 13, 25, 0.75); backdrop-filter: blur(8px); padding: 8px 14px; border-radius: var(--radius-md); border: 1px solid var(--color-border); font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); min-height: 44px; }
.status .led { width: 8px; height: 8px; border-radius: 50%; background: var(--color-ok); }
.status.busy .led { background: var(--color-warn); animation: pulse 900ms infinite alternate; }
.status.err .led { background: var(--color-error); }
.status.err { color: var(--color-error); }
@keyframes pulse { from { opacity: 0.35; } to { opacity: 1; } }
.stage-bottom { position: absolute; bottom: var(--space-4); left: var(--space-4); right: var(--space-4); display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-3); pointer-events: none; flex-wrap: wrap; }
.readout { display: flex; gap: var(--space-5); background: rgba(6, 13, 25, 0.78); backdrop-filter: blur(8px); padding: 10px 16px; border-radius: var(--radius-md); border: 1px solid var(--color-border); font-size: var(--text-xs); color: var(--color-text-muted); pointer-events: auto; flex-wrap: wrap; }
.readout b { display: block; color: var(--color-text); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.legend { display: flex; gap: var(--space-3); background: rgba(6, 13, 25, 0.78); backdrop-filter: blur(8px); padding: 10px 14px; border-radius: var(--radius-md); border: 1px solid var(--color-border); font-size: var(--text-xs); color: var(--color-text-muted); flex-wrap: wrap; pointer-events: auto; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; border: 1px solid rgba(255,255,255,.25); }
.warnings { position: absolute; top: 72px; left: var(--space-4); max-width: 420px; display: flex; flex-direction: column; gap: 6px; }
.warnings div { background: rgba(40, 28, 6, 0.85); border: 1px solid rgba(255, 200, 87, 0.35); color: var(--color-warn); padding: 8px 12px; border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 600; }
.hint-drag { font-size: var(--text-xs); color: var(--color-text-faint); }

@media (max-width: 900px) {
  .studio { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 46vh auto; height: auto; }
  .studio > * { min-width: 0; }
  .creations { order: -2; border-right: 0; border-bottom: 1px solid var(--color-border); }
  .creations .cr-head, .creations .cr-search, .creations .cr-label, .creations .cr-more, .cr-txt small { display: none; }
  .cr-list { display: flex; gap: 8px; overflow-x: auto; padding: 10px var(--space-3); scrollbar-width: none; }
  .cr-group, .cr-group ul { display: contents; }
  .cr-item { flex: none; padding: 6px 12px 6px 6px; border-color: var(--color-border); border-radius: 999px; }
  .cr-ic { width: 30px; height: 30px; border-radius: 50%; }
  .cr-ic svg { width: 16px; height: 16px; }
  .stage { order: -1; position: sticky; top: var(--header-h); z-index: 5; border-bottom: 1px solid var(--color-border); }
  .panel { border-right: 0; overflow: visible; }
  .download { position: static; }
  .readout { gap: var(--space-3); padding: 6px 10px; flex-wrap: nowrap; font-size: 11px; }
  .readout b { font-size: 12px; }
  .readout > :nth-child(n+5) { display: none; }
  .stage-top { top: var(--space-2); left: var(--space-2); right: var(--space-2); flex-wrap: nowrap; }
  .stage-bottom { bottom: var(--space-2); left: var(--space-2); right: var(--space-2); }
  .status { padding: 6px 10px; min-height: 40px; max-width: 40%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .legend { display: none; }
  .hint-drag { display: none; }
  .warnings { top: 64px; right: var(--space-4); }
}
@media (max-width: 420px) {
  .views button { min-width: 44px; padding: 6px 8px; }
}

/* Home without photos */
.hero-solo { grid-template-columns: 1fr !important; max-width: 820px; text-align: center; justify-items: center; }
.hero-solo .hero-logo { margin-inline: auto; }
.hero-solo .lead { margin-inline: auto; }
.hero-solo .hero-actions, .hero-solo .hero-meta { justify-content: center; }
.kit-solo { grid-template-columns: 1fr !important; }

/* Home: all generators, grouped */
.gen-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); }
.gen-group ul { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.gen-card { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); text-decoration: none; color: var(--color-text); transition: border-color 180ms, transform 180ms; }
.gen-card:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.gen-card > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.gen-card b { font-size: var(--text-base); }
.gen-card small { color: var(--color-text-muted); font-size: var(--text-sm); }
.gen-card .arr { color: var(--color-primary); flex: none; }
.gen-card .cr-ic { flex: none; }
@media (max-width: 760px) { .gen-groups { grid-template-columns: 1fr; } }

/* Light side panels — header and 3D stage stay dark */
.creations, .panel {
  --color-bg: #f4f7fb;
  --color-surface: #ffffff;
  --color-surface-2: #f2f5fa;
  --color-surface-3: #e6ebf3;
  --color-border: #dfe5ee;
  --color-border-strong: #c3ccda;
  --color-text: #0f1b2d;
  --color-text-muted: #45536a;
  --color-text-faint: #6b778b;
  --color-primary: #1a6fe0;
  --color-primary-hover: #155cbb;
  --color-sky: #1a6fe0;
  --color-warn: #8a5a00;
  --color-error: #c62828;
  --color-ok: #17804f;
  background: #ffffff;
  color: var(--color-text);
  color-scheme: light;
}
.creations { background: #f7f9fc; }
.creations .cr-search { background: #ffffff; }
.creations .cr-item:hover { background: #eaf1fb; }
.creations .cr-item[aria-current=page] { background: #e3edfc; border-color: #9fc2f2; }
.creations .cr-ic { background: #ffffff; }
.panel .seg button[aria-checked='true'], .panel .fontgrid button[aria-checked='true'] { background: #e3edfc; }
.panel .swatches button { border-color: rgba(15, 27, 45, 0.18); }
.panel .color-row .dot { border-color: rgba(15, 27, 45, 0.3); }
.panel .upload:hover, .panel .upload.drag { background: #eef4fd; }
.panel .mask-preview canvas { background: repeating-conic-gradient(#e9edf3 0 25%, #ffffff 0 50%) 0 0 / 12px 12px; }
.panel input[type='range'] { accent-color: var(--color-primary); }
.panel input[type='range']::-webkit-slider-thumb { background: #ffffff; }
.panel input[type='range']::-moz-range-thumb { background: #ffffff; }
.panel .toggle input { background: #c9d2df; }
.panel .toggle input:checked { background: var(--color-primary); }
.panel .toggle input::after { background: #ffffff; box-shadow: 0 1px 3px rgba(15, 27, 45, .3); }
.panel .btn-primary { color: #ffffff; }
.panel .hint { font-size: var(--text-xs); color: var(--color-text-faint); line-height: 1.4; }
.panel .seg button:hover, .panel .fontgrid button:hover { border-color: var(--color-border-strong); background: #ffffff; }
/* Download type / Bambu printer selectors */
.download .dl-opts { display: grid; gap: var(--space-2); }
.download .dl-sel { display: grid; gap: 4px; font-size: var(--text-xs); font-weight: 700; color: var(--color-text-muted); }
.download .dl-sel[hidden] { display: none; }
.download .dl-sel select { width: 100%; min-height: 40px; padding: 8px 32px 8px 10px; border: 1px solid var(--color-border-strong); border-radius: 10px; background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2345536a' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 14px; color: var(--color-text); font: inherit; font-size: var(--text-sm); font-weight: 600; appearance: none; -webkit-appearance: none; cursor: pointer; }
.download .dl-sel select:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.download .dl-fit { color: var(--color-ok); }
.download .dl-fit.warn { color: var(--color-warn); font-weight: 600; }
.download:has(.dl-opts) { padding: var(--space-4) var(--space-6); gap: var(--space-2); }
.download .dl-opts { grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.download .dl-opts .dl-fit { grid-column: 1 / -1; margin: 0; }
.download .dl-sel { font-size: 11px; }
.download .dl-sel select { min-height: 38px; font-size: 13px; padding: 6px 26px 6px 8px; background-position: right 7px center; text-overflow: ellipsis; }
.download .pair .btn { min-height: 40px; }
.download .btn-primary { min-height: 46px; }

/* ---------- Account bar + sign-in dialog ---------- */
.account-bar { display: flex; align-items: center; gap: var(--space-2); margin-left: var(--space-2); }
.signin-btn, .pro-btn { min-height: 40px; padding: 8px 16px; border-radius: 999px; font: 700 var(--text-sm)/1 var(--font-body); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; white-space: nowrap; }
.signin-btn { background: transparent; color: var(--color-text); border: 1px solid var(--color-border-strong); }
.signin-btn:hover { border-color: var(--color-sky); background: var(--color-surface-2); }
.pro-btn { background: var(--color-primary); color: var(--color-primary-ink); border: 1px solid transparent; }
.pro-btn:hover { background: var(--color-primary-hover); }
@media (max-width: 900px) { .account-bar { margin-left: auto; } .menu-btn { order: 3; } }
@media (max-width: 420px) { .pro-btn { display: none; } }
.auth-dialog { margin: auto; inset: 0; max-height: calc(100dvh - 24px); overflow: auto; border: 0; padding: 0; background: transparent; max-width: min(440px, calc(100vw - 24px)); width: 100%; color: var(--color-text); }
.auth-dialog::backdrop { background: rgba(2, 6, 14, 0.72); backdrop-filter: blur(4px); }
.auth-card { position: relative; background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-xl); padding: var(--space-8); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: var(--space-4); }
.auth-x { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--color-surface-2); color: var(--color-text-muted); cursor: pointer; display: grid; place-items: center; }
.auth-x:hover { color: var(--color-text); }
.auth-logo { height: 40px; width: auto; align-self: flex-start; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 999px; padding: 4px; }
.auth-tabs button { border: 0; background: transparent; color: var(--color-text-muted); font: 700 var(--text-sm) var(--font-body); padding: 10px; border-radius: 999px; cursor: pointer; }
.auth-tabs button[aria-selected='true'] { background: var(--color-surface-3); color: var(--color-text); }
.auth-card h2 { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.1; margin: var(--space-2) 0 0; }
.auth-sub { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0; line-height: 1.45; }
.auth-fields { display: flex; flex-direction: column; gap: var(--space-3); }
.auth-fields[hidden] { display: none; }
.auth-fields label { display: flex; flex-direction: column; gap: 6px; font-size: var(--text-sm); font-weight: 700; }
.auth-fields label[hidden] { display: none; }
.auth-fields input { min-height: 46px; padding: 10px 14px; border-radius: var(--radius-md); border: 1px solid var(--color-border-strong); background: var(--color-bg); color: var(--color-text); font: 500 var(--text-base) var(--font-body); }
.auth-fields input:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; border-color: transparent; }
.auth-err { color: var(--color-error); font-size: var(--text-sm); margin: 0; }
.auth-soon { background: rgba(42, 140, 255, 0.1); border: 1px solid rgba(42, 140, 255, 0.35); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.auth-soon[hidden] { display: none; }
.auth-soon p { margin: 0 0 var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.5; }
.auth-foot { font-size: var(--text-xs); color: var(--color-text-faint); margin: 0; text-align: center; }
.auth-foot a { color: var(--color-sky); }

/* ---------- Pricing ---------- */
.price-head { text-align: center; display: flex; flex-direction: column; align-items: center; }
.price-head p { margin-inline: auto; }
.launch-note { display: inline-flex; gap: 10px; align-items: flex-start; text-align: left; max-width: 640px; margin-top: var(--space-6); padding: 12px 16px; border-radius: var(--radius-md); background: rgba(95, 224, 168, 0.08); border: 1px solid rgba(95, 224, 168, 0.3); color: var(--color-text); font-size: var(--text-sm); line-height: 1.45; }
.launch-note svg { color: var(--color-ok); flex: none; margin-top: 1px; }
.bill-toggle { display: inline-flex; margin-top: var(--space-8); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: 999px; padding: 4px; }
.bill-toggle button { border: 0; background: transparent; color: var(--color-text-muted); font: 700 var(--text-sm) var(--font-body); padding: 10px 20px; border-radius: 999px; cursor: pointer; min-height: 44px; display: inline-flex; gap: 8px; align-items: center; }
.bill-toggle button[aria-checked='true'] { background: var(--color-surface-3); color: var(--color-text); }
.save { font-size: var(--text-xs); color: var(--color-ok); }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); align-items: stretch; padding-block: var(--space-8) var(--space-16); }
.tier { position: relative; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); }
.tier h2 { font-family: var(--font-display); font-size: var(--text-xl); margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tier h2 small { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; color: var(--color-warn); letter-spacing: 0.08em; text-transform: uppercase; }
.tier-for { color: var(--color-text-muted); margin: 0; min-height: 2.9em; line-height: 1.45; }
.price { margin: var(--space-3) 0 0; display: flex; align-items: baseline; gap: 10px; }
.price b { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1; font-weight: 600; }
.price span { color: var(--color-text-muted); font-size: var(--text-sm); }
.price-note { color: var(--color-text-faint); font-size: var(--text-sm); margin: 0 0 var(--space-3); min-height: 1.5em; }
.tier .btn { width: 100%; }
.tier-pro { border: 2px solid var(--color-primary); background: linear-gradient(180deg, rgba(42, 140, 255, 0.12), var(--color-surface) 45%); box-shadow: 0 30px 80px -40px rgba(42, 140, 255, 0.6); }
.tier-founder { border-color: rgba(255, 200, 87, 0.4); }
.badge { position: absolute; top: -13px; left: var(--space-8); background: var(--color-primary); color: var(--color-primary-ink); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; }
.badge-gold { background: var(--color-warn); color: #1d1300; }
.btn-gold { background: var(--color-warn); color: #1d1300; }
.btn-gold:hover { background: #ffd77f; }
.ticks { list-style: none; padding: 0; margin: var(--space-4) 0 0; display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--color-border); padding-top: var(--space-5); }
.ticks li { position: relative; padding-left: 28px; font-size: var(--text-sm); line-height: 1.4; }
.ticks li::before { content: ''; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: rgba(95, 224, 168, 0.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235fe0a8' stroke-width='3'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat; }
.ticks li.dim { color: var(--color-text-muted); }
.ticks li.dim::before { background: var(--color-surface-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239cb0cf' stroke-width='3'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E") center/12px no-repeat; }
@media (max-width: 960px) { .tiers { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } .tier-for, .price-note { min-height: 0; } }
.compare-wrap, .faq-wrap { padding-bottom: var(--space-16); }
.compare-wrap h2, .faq-wrap h2 { font-family: var(--font-display); font-size: var(--text-xl); margin: 0 0 var(--space-6); }
.table-scroll { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.compare { width: 100%; border-collapse: collapse; min-width: 560px; font-size: var(--text-sm); }
.compare th, .compare td { padding: 14px 18px; border-bottom: 1px solid var(--color-border); text-align: center; }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare th[scope='row'] { text-align: left; font-weight: 500; color: var(--color-text); }
.compare thead th { font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; }
.compare .hl { background: rgba(42, 140, 255, 0.07); }
.compare td.y { color: var(--color-ok); font-weight: 700; }
.compare td.n { color: var(--color-text-faint); }
.faq { display: grid; gap: var(--space-3); max-width: 860px; }
.faq details { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.faq summary { cursor: pointer; padding: 16px 20px; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 12px; min-height: 44px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 1.4em; line-height: 1; color: var(--color-sky); }
.faq details[open] summary::after { content: '–'; }
.faq details p { margin: 0; padding: 0 20px 18px; color: var(--color-text-muted); line-height: 1.6; }

/* ---------- Signed-in account ---------- */
.acct-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 12px 4px 4px; border-radius: 999px; border: 1px solid var(--color-border-strong); color: var(--color-text); text-decoration: none; font-weight: 700; font-size: var(--text-sm); }
.acct-btn:hover { border-color: var(--color-sky); }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--color-primary); color: var(--color-primary-ink); font-weight: 700; }
.acct-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-chip { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--color-surface-3); color: var(--color-text-muted); }
.plan-chip.plan-pro { background: rgba(42, 140, 255, 0.18); color: var(--color-sky); }
.plan-chip.plan-founder { background: rgba(255, 200, 87, 0.18); color: var(--color-warn); }
@media (max-width: 520px) { .acct-name { display: none; } }
.linkish { background: none; border: 0; color: var(--color-sky); font: 500 var(--text-sm) var(--font-body); cursor: pointer; padding: 6px; align-self: center; text-decoration: underline; }
.auth-card .auth-soon .btn { align-self: flex-start; }
.muted { color: var(--color-text-muted); }
.acct-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
@media (max-width: 960px) { .acct-grid { grid-template-columns: 1fr; } }
.acct-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-2); }
.acct-card h2 { font-family: var(--font-display); font-size: var(--text-xl); margin: var(--space-1) 0 0; overflow-wrap: anywhere; }
.acct-card p { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
.acct-card .hero-actions { margin-top: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-3); }
.meter { height: 10px; border-radius: 999px; background: var(--color-surface-3); overflow: hidden; margin: var(--space-2) 0; }
.meter span { display: block; height: 100%; background: var(--color-primary); border-radius: inherit; }