/* UI 0.7.2: athletic color and typography layer. Fonts are hosted with the app. */
:root {
  --ink: #171d38; --muted: #626b82; --line: #e0e4f0;
  --accent: #4254dc; --accent-soft: #e9edff; --canvas: #f6f7fd;
  --blue: #4254dc; --paper: #f6f7fd; --navy: #171d38; --mint: #baf4f4;
  --violet: #7550d6; --cyan: #5fe0e4; --coral: #ffad99;
}
body { font-family: Manrope, 'Segoe UI', system-ui, sans-serif; background: var(--canvas); }
h1, h2, h3, .brand, .studio-stats strong, .family-mini-avatar {
  font-family: 'Space Grotesk', Manrope, system-ui, sans-serif;
}
.brand { font-weight: 700; letter-spacing: -1.1px; }
.brand > span > span { color: #5fe0e4 !important; }
h1, h2 { font-weight: 700; }
.heading h1 { font-size: clamp(32px, 3.4vw, 43px); letter-spacing: -1.65px; }
.eyebrow { color: #555f99; font-size: 10px; font-weight: 800; letter-spacing: 1.6px; }
.btn { border-radius: 13px; font-weight: 750; box-shadow: 0 4px 12px #4254dc14; }
.btn:not(.secondary):not(.ghost):not(.danger):not(.mint) { background: #4254dc; color: white; }
.btn.secondary { border-color: #d4daed; color: #283250; background: white; }
.btn.ghost { box-shadow: none; color: #4254dc; }
.btn.mint { background: #baf4f4; color: #1b3458; }
.btn.danger { color: #922f28; box-shadow: none; }
.btn:hover { filter: brightness(.98); }
:focus-visible { outline: 3px solid #7752d9; outline-offset: 3px; }
.badge.private, .access-active { background: #e9edff; color: #394697; }
.badge.demo { background: #ede8ff; color: #654299; }
.panel { border-color: var(--line); box-shadow: 0 7px 24px #25387005; }
.notice, .pilot-note { background: #eef1ff; border-color: #d9dff4; color: #4d5677; }
.notice.warning { background: #fff5e8; border-color: #f0dcb6; color: #735329; }
.input { border-color: #d1d8ec; border-radius: 12px; color: var(--ink); }
.input:focus { border-color: #6a71e1; }
.field { color: #37415f; font-weight: 750; }
.check { color: #49546f; }
.sidebar { background: linear-gradient(168deg, #19223e, #202341 68%, #322653); border-right: 1px solid #ffffff10; }
.sidebar .brand-mark { background: #baf4f4; color: #213b63; }
.sidebar .brand-tagline { color: #c6cce2; }
.side-label { color: #aab5d5; }
.nav-button { font-weight: 650; color: #dce1f4; border: 1px solid transparent; }
.nav-button.active { background: #4254dc; color: white; border-color: #7180ec; box-shadow: 0 5px 16px #060e2d33; }
.nav-button.active:hover { background: #4254dc; }
.nav-button.active svg { color: #baf4f4; }
.sidebar-note { background: #ffffff08; color: #c9d1ea; border-color: #ffffff17; }
.sidebar .avatar { background: #baf4f4; color: #253d61; }
.prototype-bar { background: #edf0fd; color: #4d5678; }
.prototype-bar b { color: #4d4289; }
.topbar { box-shadow: 0 4px 14px #24366b04; }
.top-actions .btn { min-height: 44px; }
.breadcrumb { color: #586681; }
.session-strip { color: #66718b; }
.family-studio-banner { border-color: #d8dff3; background: #eef2ff; }
.family-studio-banner strong { color: #34487f; }
.family-studio-banner p { color: #5e6c87; }
.home-hero {
  padding: 42px; border-radius: 28px; margin: 34px 0 24px; position: relative; overflow: hidden;
  background: radial-gradient(ellipse at 94% 12%, #7e5ce755, transparent 48%), radial-gradient(ellipse at 12% 100%, #336dad60, transparent 48%), #1c2448;
  grid-template-columns: minmax(0, 1.5fr) minmax(230px, .8fr);
  box-shadow: 0 18px 38px #2a3e7112; color: white;
}
.home-hero::after { content: ''; position: absolute; width: 300px; height: 300px; border: 1px solid #5fe0e428; border-radius: 60px; transform: rotate(25deg); right: -190px; top: -100px; pointer-events: none; }
.home-hero h1 { color: white; font-size: clamp(44px, 5vw, 68px); line-height: 1.03; letter-spacing: -2.6px; }
.home-hero h1 span { color: #5fe0e4; }
.home-hero .eyebrow { color: #bdc7fc; }
.home-hero p { color: #d8def5; font-size: 15px; }
.home-promise { padding: 23px; border: 1px solid #ffffff26; border-radius: 20px; background: #ffffff08; }
.home-promise svg { color: #5fe0e4; }
.home-promise strong { color: white; font-family: 'Space Grotesk', sans-serif; font-size: 21px; }
.home-promise p { color: #d2dbf6; font-size: 13px; }
.person-tile { border-radius: 20px; box-shadow: 0 8px 22px #29377409; transition: transform .18s, box-shadow .18s; }
.person-tile:hover { transform: translateY(-3px); box-shadow: 0 14px 26px #29377412; }
.person-cover { background: linear-gradient(115deg, #324cc8, #6552c6); height: 106px; color: white; }
.person-cover > svg { color: #aef3f3; }
.person-cover::after { border-color: #baf4f450; }
.person-cover > span { background: #17204140; color: white; border: 1px solid #ffffff26; border-radius: 20px; padding: 5px 10px; font-size: 10px; font-weight: 750; }
.person-body h3 { font-size: 22px; letter-spacing: -.8px; }
.person-body .avatar { background: #edeaff; color: #6350a9; border-color: white; font-family: 'Space Grotesk', sans-serif; }
.person-open { color: #4254dc; font-weight: 800; }
.account-model { background: #f0efff; border-color: #e2ddf5; border-radius: 20px; }
.account-model h3 { color: #302759; }
.account-model li strong { color: #7550b6; }
.account-model p, .account-model li { color: #62637e; }
.home-footer { color: #636e88; }
.studio-welcome {
  border-radius: 24px; padding: 34px; border: 1px solid #5967d16e;
  background: radial-gradient(ellipse at 95% 5%, #a27aeb48, transparent 45%), linear-gradient(120deg, #1e2e63, #333c89 62%, #514080);
  box-shadow: 0 14px 32px #37459012;
}
.studio-welcome h2 { font-size: clamp(32px, 3.6vw, 43px); line-height: 1.05; font-weight: 700; letter-spacing: -1.6px; }
.studio-welcome .eyebrow { color: #b9c9ff; }
.studio-welcome p { color: #dde2f8; }
.studio-stats > div { border-color: #ffffff28; }
.studio-stats strong { color: #baf4f4; font-size: 38px; font-weight: 700; }
.studio-stats span { color: #e0e3fa; }
.filter { color: #586585; font-weight: 750; border-radius: 12px; }
.filter.active { background: #e9edff; color: #354698; }
.search { border-color: #d9dff0; border-radius: 13px; }
.media-card { border-radius: 19px; box-shadow: 0 7px 22px #26396607; }
.card-body h3 { font-family: 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 700; }
.card-body p { color: #626d86; }
.media-type { background: #182744e6; color: white; border-color: #ffffff36; }
.play-button { background: #f1efffff; color: #4d47a9; box-shadow: 0 7px 20px #171d3828; }
.empty { border-color: #c8d1ef; background: #f9faff; border-radius: 19px; }
.empty-icon { background: #e9edff; color: #5b58b4; }
.empty h3 { font-size: 23px; }
.empty p, .studio-footer, .safety-note { color: #626d86; }
.link-box { background: #f1f3ff; border-color: #dce1f5; color: #4a5877; }
.access-empty { background: #f2f4ff; color: #5a6684; }
.student-state { background: #f0f2fc; color: #435276; }
.student-state span { color: #646e89; }
.viewer-strip { background: #edefff; color: #4b528e; }
.builder-status #design-status { color: #5563a7; }
.design-preview-bar i { background: #8274da; }
.design-group { border-color: #e0e4f2; }
.design-group summary { color: #2c3655; }
.design-group summary svg { color: #6459b0; }
.theme-option.selected, .layout-option.selected { background: #f0eeff; border-color: #8d7ddb; }
.preview-toggle button.active { background: #e9edff; color: #4051a1; }
.family-intro h1 { font-size: clamp(36px, 4.2vw, 52px); line-height: 1.08; letter-spacing: -1.8px; }
.family-intro h1 span { color: #6754c3; }
.family-form h2 { font-size: 28px; letter-spacing: -.9px; }
.family-type { border-radius: 16px; }
.family-type.chosen { border-color: #8c7ddc; background: #f3f1ff; box-shadow: 0 0 0 1px #8c7ddc30; }
.family-type-icon, .family-types .chosen .family-type-icon { background: #e9e6ff; color: #6650ad; }
.family-steps li.current { color: #4e4394; }
.family-steps li.current span, .family-steps li.complete span { background: #e8e4ff; color: #5a4696; border-color: #c7bdeb; }
.family-theme.selected { border-color: #8e7dde; background: #f0edff; }
.family-privacy-card { border-color: #dcd9f1; background: #f4f2fe; border-radius: 16px; }
.family-privacy-card > svg { color: #7056b9; }
.family-privacy-card p { color: #626480; }
.family-mini { border-color: #dde1f1; box-shadow: 0 12px 30px #26376a0a; }
.family-mini-empty { color: #5465ad; border-color: #d8def2; }
.family-mini-body blockquote { background: #f0effc; border-color: #9d8edb; color: #595091; }
.family-mini-facts span { background: #edf0ff; }
.family-preview-label { color: #5b6685; }
.upload-zone { border-color: #b5bced; background: #f5f6ff; }
.upload-zone svg { color: #6e5cca; }
.icon-button { background: #f0eff9; color: #57597c; }
#toast { background: #253465; color: white; }
.showcase[data-name-style=modern] h1 { font-family: 'Space Grotesk', Manrope, system-ui, sans-serif; font-weight: 700; }
.showcase { border-radius: 24px; box-shadow: 0 14px 38px #2337730d; }
.showcase .page-section-heading h2 { font-size: 24px; }
.showcase .feature-copy h3 { font-family: 'Space Grotesk', sans-serif; }
.showcase .featured-moment { border-radius: 20px; }
.showcase .page-moment { border-radius: 16px; }

@media (max-width: 1100px) {
  .studio-stats strong { font-size: 32px; }
  .home-hero { padding: 32px; grid-template-columns: minmax(0, 1.3fr) minmax(205px, .8fr); }
}
@media (max-width: 800px) {
  .home-hero { padding: 27px 23px; grid-template-columns: 1fr; gap: 23px; border-radius: 24px; margin-top: 28px; }
  .home-hero h1 { font-size: 45px; letter-spacing: -1.9px; }
  .home-hero p { font-size: 14px; }
  .home-promise { padding: 17px; background: #ffffff0a; border-color: #ffffff24; }
  .home-promise strong { font-size: 17px; }
  .home-promise p { font-size: 13px; }
  .home-promise svg { color: #5fe0e4; }
  .studio-welcome { padding: 28px 23px; border-radius: 22px; }
  .studio-welcome h2 { font-size: 34px; }
  .studio-stats strong { font-size: 31px; }
  .studio-stats span { font-size: 11px; }
  .heading h1 { font-size: 34px; }
  .person-cover { height: 96px; }
  .family-intro h1 { font-size: 37px; }
  .family-form h2 { font-size: 26px; }
  .sidebar nav { margin-top: 16px; }
}
@media (max-width: 380px) {
  .home-hero { padding: 24px 20px; }
  .home-hero h1 { font-size: 39px; }
  .home-promise { padding: 15px; }
  .home-promise strong { font-size: 16px; }
  .studio-welcome h2 { font-size: 31px; }
  .heading h1 { font-size: 31px; }
  .family-intro h1 { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .person-tile:hover { transform: none; }
}