/* Cr8te: shared web/mobile design. Palette values are supplied by admin settings. */
html[data-brand-design="cr8te"][data-theme] {
  background: #0b0b0f;
  color-scheme: dark;
  body {
    --ink: var(--brand-text, #f7f7fa);
    --surface: var(--brand-background, #0b0b0f);
    --cream: var(--brand-surface, #1e1e24);
    --muted: color-mix(in srgb, var(--ink) 68%, var(--surface));
    --line: color-mix(in srgb, var(--ink) 13%, var(--surface));
    --accent-dark: var(--accent);
    --coral: var(--accent);
    --violet: var(--accent);
    --brand-gradient: linear-gradient(110deg, var(--accent), var(--cyan));
    --button-gradient: var(--brand-gradient);
    background: var(--surface);
    color: var(--ink);
    font-family: Inter, "Avenir Next", system-ui, -apple-system, "Segoe UI", sans-serif;
    line-height: 1.45;
  }
  &[data-theme="light"] { color-scheme: light; }
  &[data-theme="light"] body { --ink: var(--brand-background, #0b0b0f); --surface: var(--brand-text, #f7f7fa); --cream: var(--brand-text, #f7f7fa); }
  body :is(.app-shell,.create-shell,.auth-shell,.welcome-shell,.desktop-navigation) { background: var(--surface); color: var(--ink); box-shadow: none; }
  body .brand-identity { color: var(--ink); }
  body .brand-copy strong { font-size: 24px; letter-spacing: -.065em; }
  body .brand-copy small { color: var(--muted); font-size: 8px; letter-spacing: .13em; font-weight: 500; }
  body .logo-mark { width: 38px; height: 48px; background: transparent; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; }
  body .cr8te-mark { width: 100%; height: 100%; fill: none; stroke: none; filter: drop-shadow(0 2px 10px color-mix(in srgb,var(--accent) 30%,transparent)); }
  body .cr8te-wordmark { display: inline-flex; align-items: center; font-weight: 850; line-height: 1; letter-spacing: -.065em; }
  body .cr8te-wordmark .wordmark-eight { width: .83em; height: 1.12em; margin: 0 .025em; flex: none; }
  body :is(.section-kicker,.hero-kicker,.create-intro .create-kicker,.auth-heading .section-kicker) { color: var(--accent-dark); letter-spacing: .14em; }
  body .create-intro > p:last-child { color: var(--muted); }
  body :is(.flow-brand-bar,.create-brand-area,.auth-brand) { background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--line); }
  body :is(.flow-title small,.create-title p) { color: var(--muted); }
  body :is(.flow-back,.flow-close,.close-create,.auth-back,.auth-step-label) { border-color: var(--line); background: var(--cream); color: var(--ink); box-shadow: none; }
  body .auth-shell::before { display: none; }
  body :is(.primary-flow-button,.primary-gradient-button,.login-submit,.ai-genie-button,.cr8te-cta,.welcome-actions a.primary,.player-main-action,.avatar-create-card button[type="submit"],.admin-add-content) {
    background: var(--button-gradient); color: var(--brand-text, #F7F7FA); border-color: transparent; border-radius: 12px;
    box-shadow: 0 8px 24px color-mix(in srgb,var(--accent) 16%,transparent); animation: none;
  }
  body :is(.primary-flow-button,.primary-gradient-button,.login-submit,.cr8te-cta):hover { filter: brightness(1.12); }
  body :is(a,button,input,summary,textarea,select):focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
  body :is(.idea-search,.idea-card,.chosen-theme-card,.prompt-field,.reference-section,.choice-group,.sound-option,.review-card,.generation-progress,.generation-success,.account-profile,.account-menu-link,.profile-summary-card,.account-detail-list,.membership-current-card,.plan-options,.settings-card,.video-library-card,.video-library-empty,.player-video-info,.share-panel,.avatar-card,.avatar-create-card,.avatar-dialog,.avatar-picker,.admin-settings-group,.admin-content-editor,.admin-record,.admin-metrics article,.admin-integration-form) {
    background: var(--cream); color: var(--ink); border-color: var(--line); box-shadow: none;
  }
  body :is(.prompt-field textarea,.support-field input,.support-field textarea,.support-field select,.login-form input,.avatar-create-card input,.admin-field input,.admin-field textarea,.admin-field select,.admin-form input,.admin-form select,.admin-search input,.admin-search select,.select-field select,.support-select-trigger,.support-select-menu) {
    background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: none;
  }
  body :is(input,textarea)::placeholder { color: var(--muted); opacity: .8; }
  body :is(.idea-filters button,.choice-grid button,.theme-options button,.plan-choice,.social-share-grid a,.secondary-action-button,.copy-video-link,.generation-success-actions a,.video-library-empty a,.avatar-picker-item,.avatar-dialog-actions button,.admin-row-actions button,.admin-pagination button,.frame-upload,.reference-add,.avatar-image-button,.circle-control,.demo-account,.demo-account button,.prompt-tools button,.account-menu-icon,.settings-symbol,.auth-step-label,.review-prompt,.admin-audit-details,.admin-record summary b) {
    background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: none;
  }
  body :is(.choice-grid button.active,.idea-filters button.active,.theme-options button[aria-checked="true"],.plan-choice:has(input:checked),.support-select-menu button[aria-selected="true"],.video-library-card.selected) {
    background: color-mix(in srgb,var(--accent) 16%,var(--surface)); color: var(--accent-dark); border-color: var(--accent); box-shadow: none;
  }
  body :is(.field-label,.login-form label,.avatar-create-card label,.avatar-picker-item strong,.avatar-dialog h2,.settings-row-heading strong,.plan-choice strong) { color: var(--ink); }
  body :is(.flow-heading p,.auth-heading p,.subpage-heading > p:last-child,.subsection-heading p,.idea-description,.account-profile small,.account-menu-link small,.account-detail-row small,.profile-summary-card small,.settings-row-heading small,.membership-price span,.membership-current-card li,.plan-choice small,.choice-grid button small,.video-library-copy > p,.player-video-info > p,.reference-content > p,.reference-heading small,.avatar-card small,.avatar-create-card p,.avatar-create-card small,.avatar-picker p,.avatar-picker a,.demo-account small,.login-prototype-note,.auth-switch,.frame-upload small,.reference-name,.creation-journey li small) { color: var(--muted); }
  body :is(.auth-switch a,.text-button,.idea-arrow,.avatar-card-actions a,.account-menu-link > svg,.choice-group > summary small,.reference-heading h2 span) { color: var(--accent-dark); }
  body :is(.video-library-tags span,.account-menu-icon,.settings-symbol,.avatar-image-button,.step-marker) { background: color-mix(in srgb,var(--accent) 13%,var(--surface)); color: var(--accent-dark); border-color: var(--line); }
  body .creation-journey { border-color: var(--line); }
  body .creation-journey li::after { background: var(--line); }
  body .creation-journey :is(.current,.complete) .step-marker { background: var(--brand-gradient); color: var(--brand-text, #F7F7FA); border-color: var(--accent); box-shadow: none; }
  body .bottom-nav { border-top: 1px solid var(--line); background: var(--surface); box-shadow: none; }
  body .bottom-nav a { color: var(--muted); }
  body .bottom-nav a.active { color: var(--accent-dark); }
  body .bottom-nav a.create-action .nav-icon { background: var(--brand-gradient); color: var(--brand-text, #F7F7FA); border: 0; border-radius: 14px; animation: none; transform: none; box-shadow: none; width: 46px; height: 42px; margin-bottom: 3px; }
  body .bottom-nav a.create-action .nav-icon::before { display: none; }
  body .bottom-nav a.create-action:active .nav-icon { transform: scale(.97); }
  body .brand-area { background: radial-gradient(ellipse at 86% 85%,color-mix(in srgb,var(--accent) 19%,transparent),transparent 62%),var(--surface); border: 1px solid var(--line); border-radius: 24px; margin: 12px 12px 0; }
  body .brand-area::after { display: none; }
  body .campaign-hero { min-height: 340px; }
  body .hero-slide { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 12px; inset: 0 18px 24px; }
  body .campaign-hero h1 { font-size: clamp(30px,7vw,42px); max-width: none; line-height: 1.08; letter-spacing: -.055em; color: var(--ink); }
  body :is(.hero-highlight,.rotating-word,.welcome-content em,.desktop-introduction em) { color: var(--accent); background: var(--brand-gradient); background-clip: text; -webkit-text-fill-color: transparent; font-style: normal; }
  body .hero-kicker { font-size: 8px; line-height: 1.5; }
  body .hero-description { max-width: 300px; color: var(--muted); font-size: 11px; line-height: 1.6; margin: 16px 0 22px; }
  body .cr8te-cta { display: inline-flex; align-items: center; justify-content: center; gap: 20px; min-height: 42px; padding: 10px 15px; font-size: 11px; font-weight: 650; }
  body .character-collage { display: block; position: relative; width: 100%; height: 290px; margin: 0; transform: none; }
  body .character-shot { position: absolute; overflow: hidden; border: 1px solid rgb(255 255 255 / 15%); border-radius: 16px; box-shadow: 0 10px 40px rgb(0 0 0 / 25%); background: var(--cream); }
  body .character-shot img { display: block; height: 100%; width: 100%; object-fit: cover; }
  body .character-main { width: 83%; height: 83%; top: 5%; left: 0; transform: rotate(4deg); }
  body .character-main img { object-position: center 40%; }
  body .character-detail { width: 49%; height: 40%; bottom: 0; right: 0; transform: rotate(-6deg); }
  body .character-adventure { width: 39%; height: 34%; top: 0; right: -3%; transform: rotate(9deg); }
  body .collage-play { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgb(255 255 255 / 60%); border-radius: 50%; background: rgb(11 11 15 / 65%); color: var(--brand-text, #F7F7FA); font-size: 15px; transform: translate(-50%,-50%); padding-left: 2px; }
  body .collage-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 26px 10px 10px; background: linear-gradient(transparent,rgb(11 11 15 / 85%)); color: var(--brand-text, #F7F7FA); font-size: 8px; }
  body .hero-dots { justify-content: flex-start; padding-inline: 30px; }
  body :is(.hero-dots button,.promo-dots button) { background: var(--line); }
  body :is(.hero-dots button.active,.promo-dots button.active,.category-progress span) { background: var(--accent); }
  body .category-icon { border: 2px solid var(--line); border-radius: 20px; box-shadow: none; }
  body .category-card small { color: var(--muted); }
  body :is(.promo-orange,.promo-purple,.promo-teal) { background: linear-gradient(135deg,color-mix(in srgb,var(--accent) 13%,var(--cream)),var(--cream)); color: var(--ink); border: 1px solid var(--line); }
  body :is(.promo-copy p,.promo-copy h3) { color: var(--ink); }
  body .promo-copy h3 strong { color: var(--accent-dark); }
  body :is(.promo-copy a,.promo-pill,.mini-card) { background: color-mix(in srgb,var(--accent) 18%,var(--surface)); color: var(--ink); }
  body .promo-visual .plate { background: var(--surface); box-shadow: none; }
  body :is(.video-stage,.video-player-shell,.admin-video-preview) { background: #0b0b0f; }
  body .player-controls { background: #1e1e24; }
  body .video-overlay-play { background: var(--brand-gradient); color: var(--brand-text, #F7F7FA); box-shadow: none; }
  body :is(.player-volume,.player-seek-row input) { accent-color: var(--accent); }
  body :is(.progress-orb,.generation-success > span) { background: var(--brand-gradient); color: var(--brand-text, #F7F7FA); box-shadow: none; animation: none; }
  body .generation-success > span::before { display: none; }
  body :is(.video-delete-dialog,.logout-dialog,.avatar-dialog) { background: var(--cream); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 20px 80px rgb(0 0 0 / 50%); }
  body :is(.video-delete-dialog,.logout-dialog,.avatar-dialog)::backdrop { background: rgb(11 11 15 / 75%); backdrop-filter: blur(8px); }
  body .admin-tabs button[aria-pressed="true"] { background: var(--brand-gradient); color: var(--brand-text, #F7F7FA); }
  body .admin-save-bar { background: var(--surface); }
  body .admin-brand-preset { grid-column: 1 / -1; justify-self: start; padding: 12px 18px; border: 1px solid var(--accent); border-radius: 12px; background: var(--button-gradient); color: var(--brand-text, #F7F7FA); font-size: 12px; font-weight: 650; }
  body .prompt-field { overflow: hidden; border-radius: 16px; border: 1px solid var(--line); }
  body :is(.avatar-use,.avatar-remove-confirm,.account-avatar,.download-video-button,.generation-success-actions .preview-view,.reference-add span,.video-library-empty > span,.share-heading > button,.delete-video-button,.runtime-error button) { background: var(--button-gradient); color: var(--brand-text, #F7F7FA); box-shadow: none; }
  body :is(.idea-copy i,.avatar-placeholder) { background: color-mix(in srgb,var(--accent) 15%,var(--surface)); color: var(--accent-dark); }
  body :is(.idea-copy small,.avatar-remove,.avatar-help) { color: var(--muted); }
  body :is(.avatar-empty,.avatar-dialog-close) { background: var(--cream); color: var(--ink); border-color: var(--line); }
  body input[type="checkbox"] { accent-color: var(--accent); }
  body .avatar-create-card input::file-selector-button { background: var(--button-gradient); color: var(--brand-text, #F7F7FA); }
  body .studio-confirm-dialog { background: var(--cream); color: var(--ink); border-color: var(--line); box-shadow: 0 20px 80px rgb(0 0 0 / 50%); }
  body .studio-confirm-dialog::backdrop { background: rgb(11 11 15 / 75%); backdrop-filter: blur(8px); }
  body .confirm-dialog-delete { background: var(--brand-gradient); color: var(--brand-text, #F7F7FA); border-color: transparent; }
  body .logout-section { background: var(--cream); border-color: var(--line); }
  body .logout-section :is(button,small) { background: var(--surface); color: var(--muted); border-color: var(--line); }
  body :is(.player-video-tags span,.reference-add,.frame-upload,.sound-icon,.auth-switch a,.avatar-create-mark) { color: var(--accent-dark); }
  body .player-video-tags span { background: color-mix(in srgb,var(--accent) 13%,var(--surface)); }
  body .app-announcement { background: var(--cream); color: var(--ink); border-color: var(--line); }
  body .desktop-navigation nav a[aria-current="page"] { background: color-mix(in srgb,var(--accent) 16%,var(--surface)); color: var(--accent-dark); }
  body .desktop-studio-note { border-color: var(--line); background: radial-gradient(ellipse at 0 0,color-mix(in srgb,var(--accent) 20%,transparent),transparent),var(--cream); color: var(--ink); }
  body .desktop-studio-note p { color: var(--muted); }
  body .desktop-user > span:first-child { background: color-mix(in srgb,var(--accent) 15%,var(--surface)); color: var(--accent-dark); }
  body .desktop-introduction { background: var(--surface); color: var(--ink); }
  body .desktop-introduction h2 { color: var(--ink); letter-spacing: -.06em; }
  body .desktop-introduction p { color: var(--muted); }
  body .desktop-introduction .character-collage { max-width: 340px; height: 320px; margin: 32px 0; }
  body .desktop-intro-caption { color: var(--muted); }
  body .welcome-shell { position: relative; width: 100%; max-width: 460px; min-height: 100dvh; margin-inline: auto; overflow: hidden; background: radial-gradient(ellipse at 80% 30%,color-mix(in srgb,var(--accent) 15%,transparent),transparent 65%),var(--surface); }
  body .welcome-brand { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding-top: max(22px,env(safe-area-inset-top)); }
  body .welcome-skip { font-size: 12px; color: var(--muted); }
  body .welcome-workspace { padding: 15px 22px 0; }
  body .welcome-collage { height: 280px; width: 82%; margin: 20px auto 26px; }
  body .welcome-content { position: relative; inset: auto; width: auto; transform: none; padding: 0 0 24px; }
  body .welcome-content h1 { margin: 12px 0 18px; color: var(--ink); font-size: 44px; line-height: 1.08; letter-spacing: -.06em; text-shadow: none; }
  body .welcome-content > p:not(.section-kicker) { max-width: 340px; color: var(--muted); font-size: 14px; line-height: 1.65; margin: 0 0 24px; }
  body .welcome-actions { display: block; margin: 0; }
  body .welcome-actions a.primary { display: flex; min-height: 50px; justify-content: space-between; align-items: center; padding: 13px 20px; border-radius: 12px; font-size: 14px; }
  body .welcome-login { display: block; margin-top: 18px; color: var(--muted); font-size: 12px; text-align: center; }
  body .welcome-footer { padding: 20px; color: var(--muted); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; text-align: center; }
  @media (max-width: 380px) {
    body .campaign-hero { min-height: 350px; }
    body .hero-slide { grid-template-columns: 1.1fr 1fr; gap: 8px; inset-inline: 14px; }
    body .campaign-hero h1 { font-size: 28px; }
    body .hero-description { font-size: 10px; }
    body .hero-art { height: 220px; }
    body .welcome-content h1 { font-size: 38px; }
  }
  @media (min-width: 769px) {
    body .desktop-brand .logo-mark { width: 32px; height: 42px; }
    body .desktop-brand strong { font-size: 23px; }
    body .desktop-brand small { font-size: 7px; letter-spacing: .06em; }
    body .brand-area { margin: 28px 28px 0; }
    body .campaign-hero { min-height: 430px; }
    body .hero-slide { grid-template-columns: 1.15fr 1fr; gap: 24px; inset: 24px 32px 34px; }
    body .campaign-hero h1 { font-size: clamp(40px,4.5vw,72px); }
    body .hero-kicker { font-size: 10px; }
    body .hero-description { max-width: 350px; font-size: 14px; }
    body .cr8te-cta { min-height: 46px; padding-inline: 20px; font-size: 13px; }
    body .hero-art { height: 340px; max-width: 390px; justify-self: end; }
    body .hero-dots { padding-inline: 32px; padding-bottom: 24px; }
    body .category-card { background: var(--cream); border-color: var(--line); }
    body .studio-public-layout:has(.welcome-shell) { display: block; }
    body .welcome-shell { max-width: 1440px; min-height: 100dvh; padding: 0 5%; }
    body .welcome-brand { padding-top: 38px; }
    body .welcome-workspace { display: grid; grid-template-columns: 1.1fr 1fr; gap: 65px; align-items: center; padding: 50px 18px 60px; min-height: calc(100dvh - 190px); }
    body .welcome-collage { grid-column: 2; grid-row: 1; width: 100%; max-width: 470px; height: 470px; margin: 0; }
    body .welcome-content { grid-column: 1; grid-row: 1; padding: 0; }
    body .welcome-content h1 { font-size: clamp(48px,5.5vw,80px); }
    body .welcome-content > p:not(.section-kicker) { font-size: 17px; max-width: 390px; }
    body .welcome-actions { max-width: 260px; }
    body .welcome-login { text-align: start; }
    body .collage-caption { font-size: 11px; padding: 40px 18px 14px; }
    body .collage-play { width: 46px; height: 46px; font-size: 18px; }
  }
  @media (min-width: 1200px) { body .campaign-hero { min-height: 470px; } body .hero-art { height: 390px; max-width: 440px; } }
}

/* Latest Cr8te home mockup: compact neon banner, two-row gallery and templates. */
html[data-brand-design="cr8te"][data-theme] body {
  .compact-wordmark { display: inline-flex; align-items: baseline; white-space: nowrap; line-height: 1; font-weight: 900; letter-spacing: -.055em; }
  .compact-wordmark > span { color: var(--accent); background: linear-gradient(165deg,var(--accent) 20%,var(--cyan) 80%); background-clip: text; -webkit-text-fill-color: transparent; }
  .cr8te-home { --page-padding: 18px; --home-cyan: color-mix(in srgb,var(--cyan) 70%,#00ffe5); background: radial-gradient(ellipse at 60% 0%,color-mix(in srgb,var(--cyan) 9%,transparent),transparent 46%),var(--surface); }
  .cr8te-home .brand-area { overflow: visible; margin: 0; border: 0; border-radius: 0; background: transparent; }
  .cr8te-home .brand-header { display: flex; align-items: center; justify-content: space-between; min-height: 70px; padding-block: 12px 8px; }
  .cr8te-home .brand-copy { display: flex; flex-direction: column; gap: 2px; }
  .cr8te-home .brand-copy strong { font-size: 32px; letter-spacing: -.055em; }
  .cr8te-home .brand-copy small { color: var(--ink); font-size: 10px; font-weight: 400; line-height: 1.2; letter-spacing: -.02em; }
  .home-notifications { position: relative; z-index: 10; }
  .home-notifications summary { display: grid; width: 38px; height: 38px; place-items: center; cursor: pointer; list-style: none; border-radius: 50%; }
  .home-notifications summary::-webkit-details-marker { display: none; }
  .home-notifications svg { width: 24px; height: 24px; fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .home-notifications > div { position: absolute; right: 0; top: 44px; width: min(300px,calc(100vw - 36px)); padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--cream); box-shadow: 0 16px 48px rgb(0 0 0 / 45%); font-size: 13px; }
  .home-notifications p { color: var(--muted); margin: 10px 0 16px; }
  .home-notifications a { color: var(--accent); font-weight: 650; }
  .cr8te-home .campaign-hero { position: relative; overflow: hidden; min-height: 0; height: 186px; margin-inline: var(--page-padding); padding: 0; isolation: isolate; border-radius: 20px;
    background: radial-gradient(ellipse at 110% 1%,var(--home-cyan),transparent 29%),radial-gradient(ellipse at -18% 120%,color-mix(in srgb,var(--accent) 50%,#6700ff),transparent 54%),radial-gradient(ellipse at -10% -20%,color-mix(in srgb,var(--accent) 40%,#5700ff),transparent 43%),linear-gradient(125deg,#16024b,#02063e 64%,#0b0632); }
  .cr8te-home .campaign-hero::before { content: ''; position: absolute; width: 165px; height: 165px; border-radius: 50%; right: -87px; top: -111px; background: linear-gradient(100deg,var(--accent),var(--home-cyan)); box-shadow: -2px 12px 35px rgb(10 5 100 / 40%); }
  .cr8te-home .hero-slide { inset: 22px 20px 20px; display: block; opacity: 0; transform: translateX(12px); color: var(--brand-text); }
  .cr8te-home .hero-slide.active { opacity: 1; transform: none; }
  .cr8te-home .hero-copy { position: relative; z-index: 2; width: 77%; }
  .cr8te-home .hero-kicker { color: var(--home-cyan); font-size: 11px; font-weight: 800; line-height: 1.2; margin: 4px 0 10px; letter-spacing: -.01em; }
  .cr8te-home .campaign-hero h1 { font-family: Arial,Helvetica,sans-serif; margin: 0; color: var(--brand-text); font-size: 35px; line-height: .96; letter-spacing: -.05em; font-weight: 900; }
  .cr8te-home .hero-title { display: block; }
  .cr8te-home .hero-title .compact-wordmark > span { background: linear-gradient(180deg,var(--accent),var(--home-cyan)); background-clip: text; }
  .cr8te-home .hero-highlight { display: block; margin-top: 3px; white-space: normal; color: var(--brand-text); font-size: 20px; line-height: 1.08; background: none; -webkit-text-fill-color: currentColor; }
  .cr8te-home .hero-highlight em { color: var(--home-cyan); font-style: normal; }
  .cr8te-home .hero-description { max-width: 192px; margin: 8px 0 0; color: var(--brand-text); font-size: 12px; line-height: 1.22; letter-spacing: -.01em; }
  .cr8te-home .neon-clapper { position: absolute; z-index: 1; right: -22px; top: 14px; width: 142px; height: 145px; object-fit: contain; pointer-events: none; }
  .cr8te-home .hero-dots { justify-content: center; margin-top: -15px; padding: 0 0 9px; height: 15px; gap: 5px; }
  .cr8te-home .hero-dots button { width: 6px; height: 6px; background: rgb(247 247 250 / 24%); }
  .cr8te-home .hero-dots button.active { width: 17px; background: var(--accent); box-shadow: 0 0 8px color-mix(in srgb,var(--accent) 70%,transparent); }
  .cr8te-home .section-block { padding-top: 16px; }
  .cr8te-home .section-heading { align-items: center; gap: 6px; margin-bottom: 13px; }
  .cr8te-home .section-heading h2 { margin: 0; font-family: Arial,Helvetica,sans-serif; font-size: clamp(13px,3.7vw,17px); font-weight: 850; line-height: 1.2; letter-spacing: -.045em; text-transform: uppercase; }
  .cr8te-home .section-heading h2 .compact-wordmark { font-size: 1.3em; }
  .cr8te-home .carousel-controls { gap: 6px; flex: none; }
  .cr8te-home .circle-control { display: grid; place-items: center; width: 32px; height: 32px; padding: 0 0 2px; font-size: 27px; border: 2px solid var(--line); color: var(--ink); background: transparent; box-shadow: inset 0 0 8px rgb(255 255 255 / 4%); }
  .cr8te-home .circle-control:disabled { opacity: .4; cursor: default; }
  .cr8te-home .category-scroller { scroll-padding-inline: var(--page-padding); }
  .cr8te-home .category-page { width: 100%; max-width: 424px; flex: 0 0 100%; gap: 12px 12px; }
  .cr8te-home .category-card { gap: 0; padding: 0; border: 0; background: transparent; border-radius: 0; }
  .cr8te-home .category-icon { width: 100%; height: auto; aspect-ratio: 1 / 1; max-width: clamp(64px,18.45vw,80px); margin-bottom: 8px; border: 1.5px solid color-mix(in srgb,var(--accent) 72%,#ffb6ef); border-radius: 20px; background-position: center; background-size: 110% 110%; background-repeat: no-repeat; overflow: hidden; box-shadow: 0 0 4px color-mix(in srgb,var(--accent) 85%,transparent),0 0 11px color-mix(in srgb,var(--accent) 30%,transparent); }
  .cr8te-home .category-card:nth-child(n+5) .category-icon { border-color: var(--home-cyan); box-shadow: 0 0 4px color-mix(in srgb,var(--cyan) 80%,transparent),0 0 10px color-mix(in srgb,var(--cyan) 25%,transparent); }
  .cr8te-home .category-card > span:nth-child(2) { font-family: Arial,Helvetica,sans-serif; min-height: 13px; font-size: 9px; font-weight: 800; line-height: 1.2; text-transform: uppercase; white-space: nowrap; letter-spacing: -.03em; }
  .cr8te-home .category-card small { display: none; }
  .cr8te-home .category-progress { position: relative; height: 7px; margin: 13px var(--page-padding) 0; padding: 0; border-radius: 10px; background: var(--line); }
  .cr8te-home .category-progress span { background: var(--brand-gradient); }
  .cr8te-home .promotions { padding-top: 20px; }
  .cr8te-home .promotions .section-heading { margin-bottom: 12px; }
  .cr8te-home .promotions .section-heading h2 { font-size: 17px; }
  .cr8te-home .text-button { color: var(--accent); font-size: 10px; text-transform: uppercase; white-space: nowrap; }
  .cr8te-home .promo-scroller { gap: 10px; }
  .cr8te-home .promo-card { width: calc(100vw - 64px); max-width: 396px; min-height: 173px; padding: 12px 16px; border: 0; border-radius: 14px; color: var(--brand-text); background: radial-gradient(ellipse at 54% 0%,color-mix(in srgb,var(--cyan) 70%,#1300fa),transparent 46%),linear-gradient(130deg,color-mix(in srgb,var(--accent) 80%,#4700ff),#260260 65%,color-mix(in srgb,var(--accent) 80%,#7200ff)); }
  .cr8te-home .promo-card::before { right: -37px; bottom: -57px; width: 188px; height: 188px; border: 21px solid rgb(0 0 0 / 22%); background: transparent; }
  .cr8te-home .promo-card::after { right: 36px; top: -93px; width: 114px; height: 145px; background: linear-gradient(140deg,var(--cyan),color-mix(in srgb,var(--accent) 75%,#6b00ff)); }
  .cr8te-home .promo-copy { width: 66%; }
  .cr8te-home .promo-pill { padding: 4px 10px; border: 0; border-radius: 12px; background: linear-gradient(90deg,color-mix(in srgb,var(--cyan) 90%,#001fff),var(--cyan)); color: var(--brand-text); font-size: 8px; line-height: 1.2; letter-spacing: 0; }
  .cr8te-home .promo-copy h3 { margin: 7px 0 6px; color: var(--brand-text); font-family: Arial,Helvetica,sans-serif; font-size: 16px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; text-transform: uppercase; }
  .cr8te-home .promo-copy h3 .compact-wordmark { font-size: 27px; }
  .cr8te-home .promo-copy h3 strong { color: color-mix(in srgb,var(--accent) 64%,white); font-size: 20px; font-weight: 800; }
  .cr8te-home .promo-copy p { max-width: 166px; color: var(--brand-text); font-size: 10px; line-height: 1.25; }
  .cr8te-home .promo-copy > a { margin-top: 9px; padding: 9px 12px; border-radius: 10px; color: color-mix(in srgb,var(--accent) 65%,#4b00ba); background: var(--brand-text); font-size: 9px; font-weight: 800; text-transform: uppercase; box-shadow: 0 0 9px rgb(247 247 250 / 28%); }
  .cr8te-home .promo-copy > a span { color: inherit; font-size: 15px; margin-left: 7px; line-height: 8px; }
  .cr8te-home .promo-visual { right: 7px; bottom: 0; width: 38%; height: 89%; }
  .cr8te-home .promo-visual .plate { right: -8px; bottom: -9px; width: 117px; height: 117px; border: 0; color: #0b0b0f; background: var(--brand-text); box-shadow: none; font-size: 58px; transform: rotate(-4deg); }
  .cr8te-home .template-clapper { width: 95px; height: 95px; }
  .cr8te-home .promo-visual .mini-card { right: 11px; top: 6px; width: 48px; height: 49px; background: #000; color: #f7f7fa; border-radius: 14px; transform: none; font-size: 17px; line-height: 1; }
  .cr8te-home .mini-card span { color: #f7f7fa; font-size: 10px; margin-top: 2px; }
  .cr8te-home .promo-dots { display: none; }
  .cr8te-home .safe-bottom-space { height: 102px; }
  .bottom-nav { min-height: 74px; padding: 6px 25px calc(8px + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; background: color-mix(in srgb,var(--cyan) 4%,var(--surface)); border-top: 0; }
  .bottom-nav a { grid-template-rows: 35px 12px; gap: 6px; color: var(--muted); font-size: 10px; }
  .bottom-nav a.active::before { display: none; }
  .bottom-nav svg, .bottom-nav a.active svg { filter: none; }
  .bottom-nav a.create-action { color: var(--ink); }
  .bottom-nav a.create-action .nav-icon { width: 45px; height: 45px; margin-bottom: 0; border-radius: 50%; background: linear-gradient(110deg,color-mix(in srgb,var(--accent) 75%,#6c00ff),var(--cyan)); box-shadow: 0 0 16px color-mix(in srgb,var(--accent) 18%,transparent); }
  .bottom-nav .create-action svg { width: 25px; height: 25px; stroke-width: 2; filter: none; }
  .bottom-nav .create-action svg rect { display: none; }
  .bottom-nav .account-cutout { fill: var(--surface); }
  @media (max-width: 359px) {
    .cr8te-home { --page-padding: 14px; }
    .cr8te-home .hero-slide { inset-inline: 15px; }
    .cr8te-home .hero-highlight { font-size: 14.5px; }
    .cr8te-home .hero-description { max-width: 150px; font-size: 10.5px; }
    .cr8te-home .neon-clapper { right: -18px; top: 25px; width: 110px; }
    .cr8te-home .section-heading h2 { font-size: 11.5px; }
    .cr8te-home .category-page { width: calc(100vw - 28px); gap: 13px 8px; }
    .cr8te-home .category-card > span:nth-child(2) { font-size: 8px; }
    .cr8te-home .promotions .section-heading h2 { font-size: 15px; }
    .cr8te-home .promo-copy h3 { font-size: 14px; }
    .cr8te-home .promo-copy { width: 72%; }
    .cr8te-home .promo-copy h3 .compact-wordmark { font-size: 23px; }
    .cr8te-home .promo-visual .plate { width: 102px; height: 102px; }
  }
  @media (min-width: 769px) {
    .cr8te-home { --page-padding: 28px; }
    .cr8te-home .brand-header { min-height: 96px; padding-top: 25px; }
    .cr8te-home .brand-copy strong { font-size: 35px; }
    .cr8te-home .brand-copy small { font-size: 11px; }
    .cr8te-home .campaign-hero { height: 300px; border-radius: 24px; }
    .cr8te-home .hero-slide { inset: 42px 38px 35px; }
    .cr8te-home .hero-copy { width: 68%; }
    .cr8te-home .campaign-hero h1 { font-size: clamp(48px,5vw,72px); }
    .cr8te-home .hero-highlight { font-size: clamp(25px,2.8vw,40px); }
    .cr8te-home .hero-kicker { font-size: 14px; margin-bottom: 18px; }
    .cr8te-home .hero-description { max-width: 310px; font-size: 17px; margin-top: 16px; }
    .cr8te-home .neon-clapper { width: 300px; height: 270px; right: -6px; top: -26px; }
    .cr8te-home .hero-dots { margin-top: -22px; height: 22px; padding-bottom: 15px; }
    .cr8te-home .section-block { padding-top: 30px; }
    .cr8te-home .section-heading h2, .cr8te-home .promotions .section-heading h2 { font-size: 23px; }
    .cr8te-home .category-scroller { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px 12px; }
    .cr8te-home .category-card { padding: 12px 8px; }
    .cr8te-home .category-icon { max-width: 105px; border-radius: 24px; }
    .cr8te-home .category-card > span:nth-child(2) { font-size: 11px; }
    .cr8te-home .promo-scroller { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
    .cr8te-home .promo-card { width: 100%; max-width: none; min-height: 215px; padding: 18px 20px; }
    .cr8te-home .promo-card:last-child { min-height: 215px; grid-column: auto; }
    .cr8te-home .promo-copy h3 { font-size: 19px; }
    .cr8te-home .promo-copy h3 .compact-wordmark { font-size: 32px; }
    .cr8te-home .promo-copy h3 strong { font-size: 25px; }
    .cr8te-home .promo-copy p { font-size: 12px; max-width: 220px; }
    .cr8te-home .promo-copy > a { font-size: 11px; }
    .cr8te-home .promo-visual .plate { width: 145px; height: 145px; }
    .cr8te-home .template-clapper { width: 115px; height: 115px; }
    .cr8te-home .text-button { font-size: 12px; }
  }
  @media (min-width: 1200px) {
    .cr8te-home .category-scroller { grid-template-columns: repeat(8,minmax(0,1fr)); }
    .cr8te-home .category-icon { max-width: 94px; }
    .cr8te-home .category-card > span:nth-child(2) { font-size: 10px; }
    .cr8te-home .promo-scroller { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .cr8te-home .promo-copy h3 { font-size: 16px; }
    .cr8te-home .promo-copy h3 .compact-wordmark { font-size: 27px; }
    .cr8te-home .promo-copy h3 strong { font-size: 20px; }
    .cr8te-home .promo-visual .plate { width: 115px; height: 115px; }
  }
  @media (min-width: 769px) and (max-width: 1023px) {
    .cr8te-home .hero-slide { inset-inline: 28px; }
    .cr8te-home .campaign-hero h1 { font-size: 48px; }
    .cr8te-home .hero-highlight { font-size: 21px; }
    .cr8te-home .hero-description { max-width: 210px; font-size: 14px; }
    .cr8te-home .neon-clapper { width: 200px; height: 200px; top: 12px; right: -15px; }
    .cr8te-home .promo-scroller { grid-template-columns: 1fr; }
  }
}
@media (max-width: 768px) {
  html[data-brand-design="cr8te"] { scrollbar-width: none; }
  html[data-brand-design="cr8te"]::-webkit-scrollbar { display: none; }
}