/* Kid Type-inspired galaxy skin. All application structure and controls stay in app.css. */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #fff7ff;
  --muted: #aaa5c4;
  --paper: #090719;
  --card: #17132b;
  --field: #211b39;
  --line: #393153;
  --purple: #f05295;
  --purple-dark: #ff87bb;
  --purple-hover: #dc397f;
  --purple-soft: #442142;
  --coral: #ff9754;
  --gold: #ffcd57;
  --green: #4cdaaa;
  --red: #ff7288;
  --shadow: 0 18px 55px rgba(3, 2, 14, .4);
  --topbar: rgba(12, 9, 31, .82);
  --surface-hover: #302647;
  --surface-warm: #29203d;
  --surface-banner: #292141;
  --surface-approved: #183c3b;
  --surface-danger: #462538;
  --surface-consent: #443043;
  --surface-chip: #2b2441;
  --surface-ready: #1d423f;
  --track: #352d4c;
  --button-dark-bg: #38b9ee;
  --button-dark-text: #fff;
  --final-bg: #211439;
  --final-text: #fff7ff;
  --final-muted: #c3b3dc;
  --page-glow: rgba(174, 63, 216, .26);
}

:root[data-theme="light"] {
  color-scheme: light;
  --ink: #281c41;
  --muted: #696079;
  --paper: #f9f4ff;
  --card: #fffaff;
  --field: #fff;
  --line: #e3d6ee;
  --purple: #e0448d;
  --purple-dark: #b82a72;
  --purple-hover: #c72f78;
  --purple-soft: #ffe3f1;
  --coral: #e97944;
  --gold: #e4a91d;
  --green: #238766;
  --red: #c85066;
  --shadow: 0 18px 50px rgba(96, 58, 130, .13);
  --topbar: rgba(255, 250, 255, .88);
  --surface-hover: #f4e7f7;
  --surface-warm: #f5e8fa;
  --surface-banner: #f2e7fa;
  --surface-approved: #e0f4eb;
  --surface-danger: #ffe9ec;
  --surface-consent: #ffede6;
  --surface-chip: #f2e9f7;
  --surface-ready: #e0f4eb;
  --track: #eadced;
  --button-dark-bg: #25a5dc;
  --button-dark-text: #fff;
  --final-bg: #35214f;
  --final-text: #fff;
  --final-muted: #ded0ed;
  --page-glow: rgba(232, 94, 169, .14);
}

html { background: var(--paper); }
body {
  font-family: "Fredoka", sans-serif;
  background: radial-gradient(ellipse at 42% 16%, rgba(126, 38, 151, .34), transparent 36%),
    radial-gradient(ellipse at 84% 55%, rgba(183, 30, 101, .22), transparent 34%),
    radial-gradient(ellipse at 8% 80%, rgba(14, 100, 157, .2), transparent 38%), var(--paper);
  background-attachment: fixed;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .48;
  background-image: radial-gradient(circle, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle, #ffe9ac 0 1px, transparent 1.5px),
    radial-gradient(circle, #a5c8ff 0 1px, transparent 1.5px);
  background-size: 137px 131px, 211px 197px, 289px 251px;
  background-position: 18px 37px, 75px 111px, 149px 54px;
}
:root[data-theme="light"] body::before { opacity: .13; }
:root[data-theme="light"] body {
  background: radial-gradient(ellipse at 30% 14%, rgba(244, 132, 207, .25), transparent 37%),
    radial-gradient(ellipse at 85% 68%, rgba(89, 180, 245, .18), transparent 34%), var(--paper);
}
.noise { opacity: .055; }
.topbar { border-color: color-mix(in srgb, var(--line) 75%, transparent); }
.brand { font: 700 24px "Fredoka", sans-serif; letter-spacing: -.03em; }
.brand-mark {
  width: 40px; height: 40px; border-radius: 14px;
  background: linear-gradient(135deg, #f05295, #a855db);
  box-shadow: 0 0 24px rgba(240, 82, 149, .4), 3px 4px 0 #3a204e;
}
.button, .theme-toggle, .director-toggle, .navbar-credits, .language-control,
.library-controls > label, .community-filters > label:not(.language-control) { border-radius: 999px; }
.button { min-height: 40px; padding: 10px 19px; font-weight: 700; }
.button:hover:not(:disabled), .navbar-credits:hover { transform: translateY(-2px) scale(1.02); }
.button:active:not(:disabled) { transform: translateY(0) scale(.98); }
.button-primary { color: #fff; background: #f05295; box-shadow: 0 0 24px rgba(240, 82, 149, .33); }
.button-primary:hover { background: #e33b85; box-shadow: 0 0 32px rgba(240, 82, 149, .5); }
.button-dark { color: #fff; background: #38b9ee; box-shadow: 0 0 24px rgba(56, 185, 238, .32); }
.button-secondary { color: var(--ink); background: var(--purple-soft); }
.button-ghost { background: color-mix(in srgb, var(--card) 75%, transparent); }
.button:focus-visible, .topbar button:focus-visible, .steps button:focus-visible,
.project-item:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.theme-toggle { background: var(--surface-chip); }
.status-pill { font-weight: 600; }
.sidebar { background: rgba(12, 9, 29, .35); }
:root[data-theme="light"] .sidebar { background: rgba(255, 255, 255, .3); }
.project-item { border-radius: 16px; }
.project-item.active { box-shadow: inset 3px 0 var(--purple), 0 0 18px rgba(240, 82, 149, .12); }
.project-thumb, .account-avatar { border-radius: 14px; background: linear-gradient(135deg, #f05295, #a855db, #38b9ee); }
.studio-main { position: relative; }

.atlas-home { isolation: isolate; padding-top: clamp(40px, 6vw, 82px); }
.atlas-home::before {
  content: "✦"; position: absolute; z-index: -1; left: 6%; top: 9%; color: var(--gold);
  font-size: 30px; opacity: .6; text-shadow: 0 0 24px currentColor; pointer-events: none;
}
.atlas-home::after {
  content: "⭐  🚀  ✨  🌈"; position: absolute; z-index: -1; right: 5%; top: 30px;
  max-width: 40%; color: var(--ink); font-size: clamp(23px, 3vw, 44px); letter-spacing: 1.2em;
  line-height: 2.6; opacity: .16; transform: rotate(-11deg); pointer-events: none;
}
.atlas-intro { position: relative; min-height: 250px; align-items: center; margin-bottom: 44px; }
.atlas-intro::before {
  content: ""; position: absolute; z-index: -1; width: min(70vw, 740px); height: 370px;
  left: 8%; top: -90px; border-radius: 50%; background: radial-gradient(ellipse, rgba(143, 46, 169, .22), transparent 70%);
  filter: blur(12px); pointer-events: none;
}
.atlas-intro::after {
  content: ""; position: absolute; z-index: -1; width: 560px; height: 560px;
  right: 1%; top: -200px; border: 1px solid rgba(255, 205, 87, .3); border-radius: 50%;
  box-shadow: 0 0 0 75px rgba(255, 205, 87, .035), 0 0 0 145px rgba(255, 205, 87, .025);
  transform: rotate(-17deg); pointer-events: none;
}
.atlas-intro h1 { max-width: 800px; font-size: clamp(48px, 6.4vw, 88px); line-height: 1.04; letter-spacing: -.035em; text-shadow: 0 0 40px rgba(240, 82, 149, .24); }
.atlas-intro-copy p { font-size: 18px; line-height: 1.55; }
.atlas-intro-actions .button { min-height: 54px; padding-inline: 25px; font-size: 17px; }
.kicker { color: var(--gold); font-size: 12px; letter-spacing: .12em; }
.home-production-step { border-radius: 24px; background: color-mix(in srgb, var(--card) 88%, transparent); box-shadow: var(--shadow); }
.home-production-visual { border-radius: 22px; }
.home-production-step-story .home-production-visual { background: #4e224f; color: #ff91c2; }
.home-production-step-cast .home-production-visual { background: #4a2940; color: #ffac73; }
.home-production-step-generate .home-production-visual { background: #1c444a; color: #72e4c6; }
:root[data-theme="light"] .home-production-step-story .home-production-visual { background: #ffe3f1; color: #c12d79; }
:root[data-theme="light"] .home-production-step-cast .home-production-visual { background: #ffece0; color: #c65d2e; }
:root[data-theme="light"] .home-production-step-generate .home-production-visual { background: #def7ef; color: #238766; }
.home-production-flow strong { font-size: 17px; }
.home-production-flow small { font-size: 12px; }
.cartoon-library, .community-section, .missing-story {
  border-radius: 28px; border-color: color-mix(in srgb, var(--line) 84%, transparent);
  background: color-mix(in srgb, var(--card) 91%, transparent); backdrop-filter: blur(12px);
}
.cartoon-library, .community-section { box-shadow: 0 20px 55px rgba(3, 2, 14, .25); }
.library-heading h2, .community-heading h2 { font-size: clamp(27px, 3vw, 40px); line-height: 1.1; }
.cartoon-card, .community-card, .panel, .scene-card, .character-card {
  border-radius: 22px; background: var(--field); box-shadow: 0 10px 26px rgba(3, 2, 14, .16);
}
.cartoon-card:hover, .community-card:hover { box-shadow: 0 18px 38px rgba(3, 2, 14, .36), 0 0 0 1px rgba(240, 82, 149, .2); }
.cartoon-cover, .community-placeholder { background: linear-gradient(135deg, #673b9d, #c23986 55%, #26a8db); }
.cartoon-card-title h3 { font-size: 23px; }
.library-empty { border-radius: 22px; }
.library-empty > span { color: var(--gold); background: var(--surface-chip); }
.missing-story { background: linear-gradient(105deg, var(--surface-warm), var(--card)); }
.missing-orbit { border-color: var(--gold); color: var(--gold); }
.missing-orbit span { background: var(--surface-chip); }

.project-view { padding-top: 4px; }
.project-header h1 { font-size: clamp(27px, 2.8vw, 38px); letter-spacing: -.025em; }
.budget-card { border-radius: 18px; box-shadow: var(--shadow); }
.steps { gap: 8px; padding: 5px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); }
.steps button { border-radius: 999px; }
.steps button.active { color: #fff; background: var(--purple); box-shadow: 0 0 18px rgba(240, 82, 149, .25); }
.steps button.active::after { display: none; }
.steps button.active b { border-color: rgba(255, 255, 255, .7); }
.section-heading h2 { font-size: 30px; }
.director-pane, .director-panel, .director-chat-header { background: color-mix(in srgb, var(--card) 95%, transparent); }
.director-heading strong { font-size: 21px; }
.director-message, .account-menu, .modal-card, .toast { border-radius: 20px; }
.modal-card { border: 1px solid var(--line); }
.field input, .field textarea, .field select, input[type="text"], textarea, select {
  border-radius: 14px;
}
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible { outline-color: var(--gold); }
.final-card { border: 1px solid var(--line); border-radius: 22px; background: radial-gradient(circle at 80% 10%, #572667, transparent 55%), var(--final-bg); }
.site-footer { background: var(--card); }
.legal-page { background: var(--paper); }
.legal-document h1, .legal-document h2 { font-family: "Fredoka", sans-serif; }

@media (max-width: 820px) {
  .atlas-intro { min-height: 0; }
  .atlas-intro::after { right: -340px; opacity: .4; }
  .atlas-home::after { top: 12px; right: 0; opacity: .1; }
}
@media (max-width: 650px) {
  .atlas-home { padding-top: 38px; }
  .atlas-intro h1 { font-size: clamp(41px, 12vw, 56px); }
  .atlas-intro-copy p { font-size: 16px; }
  .atlas-intro-actions .button { min-height: 48px; font-size: 15px; }
  .steps { gap: 2px; }
  .steps button { padding-inline: 5px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .button, .cartoon-card, .community-card { transition: none; }
}