:root {
  color-scheme: light;
  --bg: #fff;
  --bg2: #f8f9fb;
  --surface: #fff;
  --elevated: #fff;
  --hover: #f8f9fb;
  --text: #111318;
  --muted: #666b76;
  --tertiary: #9aa0aa;
  --border: #e8eaef;
  --border-hover: #d9dde5;
  --purple: #673de6;
  --purple2: #7350e8;
  --purple3: #6b45df;
  --soft: #f1edff;
  --good: #23865b;
  --warn: #a96a13;
  --bad: #c84b58;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #fff;
  color: #111318;
}

html { background: #fff; color-scheme: light; }
body.admin-theme { color-scheme: dark; }
body { background: #fff; color: #111318; }
body:before { display: none; }
.marketing button, .auth-view button, .customer-dashboard button { min-height: 40px; border-color: #e8eaef; background: #fff; color: #111318; box-shadow: none; transition: color 180ms ease, background 180ms ease, border-color 180ms ease; }
.marketing button:hover, .auth-view button:hover, .customer-dashboard button:hover { transform: none; border-color: #cfd4df; }
.marketing button.primary, .auth-view button.primary, .customer-dashboard button.primary { background: #673de6; border-color: #673de6; color: #fff; box-shadow: none; }
.marketing button.primary:hover, .auth-view button.primary:hover, .customer-dashboard button.primary:hover { background: #5832ce; box-shadow: none; }
.marketing button.secondary, .auth-view button.secondary, .customer-dashboard button.secondary { background: #fff; color: #111318; border-color: #e8eaef; }
.marketing button.secondary:hover, .auth-view button.secondary:hover, .marketing button.ghost:hover, .auth-view button.ghost:hover, .customer-dashboard button.secondary:hover { background: #f8f9fb; }
.marketing { background: #fff; }
.marketing-nav { top: 12px; height: 64px; margin: 12px auto 0; width: min(1180px, calc(100% - 32px)); padding: 0 14px 0 18px; border: 1px solid rgba(255,255,255,.78); border-radius: 20px; background: rgba(255,255,255,.74); backdrop-filter: blur(24px) saturate(1.55); -webkit-backdrop-filter: blur(24px) saturate(1.55); box-shadow: 0 8px 28px rgba(18,25,38,.075), 0 1px 3px rgba(18,25,38,.045); }
.brand { color: #111318; }
.brand-mark { display: none; }
.marketing-links { color: #666b76; gap: 28px; }
.marketing-links a:hover { color: #111318; }
.hero { display: block; width: min(900px, calc(100% - 48px)); padding: 132px 0 112px; }
.hero-copy { max-width: 760px; }
.hero-copy .eyebrow { color: #673de6; letter-spacing: .12em; }
.hero-copy h1 { max-width: 740px; margin: 22px 0 24px; font-size: clamp(48px, 8vw, 76px); line-height: 1.12; font-weight: 620; letter-spacing: -.06em; }
.hero-copy h1 .accent { color: #111318; }
.hero-copy p { color: #666b76; font-size: 18px; line-height: 1.8; white-space: pre-line; }
.hero-actions { margin-top: 30px; }
.hero-actions .secondary { min-height: 40px; display: inline-flex; align-items: center; padding: 9px 13px; border: 1px solid #e8eaef; border-radius: 8px; }
.hero-note { margin-top: 36px; color: #9aa0aa; }
.hero-note:before { display: none !important; }
.network, .hero-visual, .ticker { display: none !important; }
.section { width: min(1120px, calc(100% - 48px)); padding: 82px 0; }
.section-rule { border-color: #e8eaef; }
.section-head { max-width: 680px; margin-bottom: 26px; }
.section-head h2 { color: #111318; font-weight: 620; }
.section-head p { color: #666b76; }
.story-grid { grid-template-columns: 1fr; gap: 0; }
.story-card, .feature-card, .pricing-card, .flow-box, .card, .metric, .auth-panel, .model-row, .code-panel {
  border-color: #e8eaef; border-radius: 12px; background: #fff; box-shadow: none;
}
.story-card, .feature-card, .pricing-card { padding: 20px 0; border: 0; border-bottom: 1px solid #e8eaef; border-radius: 0; }
.story-card:hover, .feature-card:hover, .pricing-card:hover, .model-row:hover { transform: none; background: #fff; }
.story-card h3, .feature-card h3 { margin-top: 12px; color: #111318; }
.story-card p, .feature-card p { color: #666b76; }
.flow { grid-template-columns: 1fr auto 1fr auto 1fr; gap: 12px; }
.flow-arrow { color: #9aa0aa; }
.flow-box { padding: 18px; }
.model-strip { gap: 10px; }
.model-chip { padding: 8px 12px; border-color: #e8eaef; border-radius: 8px; background: #fff; color: #444a55; }
.developer-grid { grid-template-columns: 1fr 1.15fr; gap: 36px; }
.code-panel { background: #f8f9fb; }
.code-top { border-color: #e8eaef; color: #666b76; }
.code-panel pre, .code { background: #f8f9fb; color: #303642; }
.recharge-panel { border: 1px solid #e8eaef; border-radius: 12px; background: #fff; }
.marketing-cta { padding: 90px 0 100px; }
.marketing-cta h2 { font-weight: 620; }
.footer { border-color: #e8eaef; color: #9aa0aa; }
.auth-view { background: #fff; }
.auth-panel { padding: 24px; }
.auth-view .field input, .auth-view .field textarea, .auth-view .field select, .customer-dashboard .field input, .customer-dashboard .field textarea, .customer-dashboard .field select, .customer-dashboard .toolbar input, .customer-dashboard .toolbar select { border-color: #e8eaef; background: #fff; color: #111318; }
.app-shell { background: #fff; color: #111318; }
.customer-dashboard .sidebar { background: #fff; border-color: #e8eaef; }
.customer-dashboard .topbar { background: rgba(255,255,255,.96); border-color: #e8eaef; backdrop-filter: none; }
.customer-dashboard .nav a { color: #666b76; }
.customer-dashboard .nav a.active { background: #f1edff; color: #4024a2; }
.customer-dashboard .content { max-width: 1264px; margin: 0 auto; padding: 24px 32px; }
.customer-dashboard .metric, .customer-dashboard .card { border-color: #e8eaef; border-radius: 12px; background: #fff; box-shadow: none; }
.customer-dashboard .beginner-start-card { border-color: #e8eaef; border-radius: 12px; background: #fff; }
.customer-dashboard .beginner-step { border-color: #e8eaef; border-radius: 8px; background: #fff; }
.customer-dashboard .beginner-step.current { border-color: #c9bdfa; background: #f8f6ff; }
.customer-dashboard td { border-color: #eef0f4; }
.customer-dashboard tbody tr:hover { background: #f8f9fb; }
.customer-dashboard .code { border-color: #e8eaef; background: #f8f9fb; color: #303642; }
.customer-dashboard .page-header h1 { color: #111318; }
.page-header-note { display: block; margin-top: 8px; color: #9aa0aa; font-size: 12px; }
.empty-state { max-width: 560px; margin: 0 auto; padding: 44px 20px; text-align: center; }
.empty-state h2 { margin: 14px 0 6px; font-size: 18px; color: #111318; }
.empty-state p { margin: 0 0 18px; color: #666b76; }
.status-hint { display: block; margin-top: 3px; color: #9aa0aa; font-size: 11px; }
.theme-light { color-scheme: light; }
.theme-light body, .theme-light .customer-dashboard .sidebar { background: #fff; color: #111318; }
.theme-light .customer-dashboard .sidebar { background: #fff; }
.theme-light .customer-dashboard .topbar { background: #fff; }
.theme-light .customer-dashboard .nav a, .theme-light .customer-dashboard .topbar-links { color: #666b76; }
.theme-light .customer-dashboard .nav a.active { background: #f1edff; color: #4024a2; }
.theme-light .customer-dashboard .metric, .theme-light .customer-dashboard .card { background: #fff; }
.theme-light .customer-dashboard .search-trigger { background: #f8f9fb; color: #666b76; }
.theme-dark { color-scheme: dark; --bg: #111318; --bg2: #171a20; --surface: #191d24; --elevated: #20242c; --hover: #272c35; --text: #f3f4f6; --muted: #b0b5bf; --tertiary: #858c99; --border: #303640; --border-hover: #424a57; --purple: #8b6af0; --purple2: #9b7cf4; --purple3: #b19cff; --soft: rgba(139,106,240,.16); --good: #54c894; --warn: #edb454; --bad: #f07d88; }
.theme-dark body, .theme-dark .app-shell { background: #111318; color: #f3f4f6; }
.theme-dark .customer-dashboard .sidebar { background: #171a20; border-color: #303640; }
.theme-dark .customer-dashboard .topbar { background: rgba(17,19,24,.96); border-color: #303640; }
.theme-dark .customer-dashboard .nav a { color: #b0b5bf; }
.theme-dark .customer-dashboard .nav a.active { background: rgba(139,106,240,.18); color: #f3f4f6; }
.theme-dark .customer-dashboard .metric, .theme-dark .customer-dashboard .card { background: #191d24; border-color: #303640; }
.theme-dark .customer-dashboard .page-header h1, .theme-dark .customer-dashboard .metric strong, .theme-dark .customer-dashboard .card h3 { color: #f3f4f6; }
.theme-dark .customer-dashboard .search-trigger { background: #20242c; color: #b0b5bf; border-color: #303640; }
.theme-dark .customer-dashboard .beginner-start-card, .theme-dark .customer-dashboard .beginner-step { background: #191d24; border-color: #303640; }
.theme-dark .customer-dashboard .beginner-step.current { background: rgba(139,106,240,.16); border-color: #6650ad; }
.theme-dark .customer-dashboard .code { background: #171a20; color: #e2e5ea; border-color: #303640; }
.theme-dark .customer-dashboard td { border-color: #303640; }
.theme-dark .customer-dashboard tbody tr:hover { background: #20242c; }
.theme-dark .customer-dashboard button.secondary, .theme-dark .customer-dashboard .field input, .theme-dark .customer-dashboard .field select, .theme-dark .customer-dashboard .toolbar input { background: #20242c; color: #f3f4f6; border-color: #303640; }
/* Keep the site-wide action shape consistent across the public, auth, and console views. */
#marketing-view button, #marketing-view .primary, #marketing-view .secondary, #marketing-view .ghost,
.auth-view button, .auth-view .primary, .auth-view .secondary, .auth-view .ghost,
#app-view button, #app-view .primary, #app-view .secondary, #app-view .ghost, #app-view .danger { border-radius: 999px; }
#marketing-view .hero-actions .primary.primary, #marketing-view .hero-actions .secondary.secondary, #marketing-view .marketing-cta .primary.primary { border-radius: 999px; }
/* A compact floating glass nav that wins over the dynamically loaded dark hero theme. */
#marketing-view .marketing-nav.marketing-nav { position: sticky; top: 12px; height: 64px; margin: 12px auto 0; width: min(1180px, calc(100% - 32px)); padding: 0 14px 0 18px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(16,19,31,.62); -webkit-backdrop-filter: blur(24px) saturate(1.55); backdrop-filter: blur(24px) saturate(1.55); box-shadow: 0 10px 32px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.08); }
#marketing-view .marketing-nav .brand { color: #f3f5fb; }
@media (max-width: 720px) {
  #marketing-view .marketing-nav.marketing-nav { top: 8px; width: calc(100% - 24px); height: 60px; margin-top: 8px; padding: 0 10px 0 12px; }
  .marketing-links { display: none; }
  .hero { padding: 88px 0 72px; }
  .hero-copy h1 { font-size: clamp(42px, 11vw, 58px); }
  .section { padding: 62px 0; }
  .flow { grid-template-columns: 1fr; }
  .flow-arrow { transform: rotate(90deg); }
  .developer-grid { grid-template-columns: 1fr; gap: 22px; }
  .footer { gap: 12px; }
  .customer-dashboard .content { padding: 20px 15px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}