@import './studio-materials.css';
/*
 * ShortsCraft legacy page adapter for the copied kopit design system.
 * Sources: https://github.com/skymoonlee/kopit/blob/main/design.md
 *          https://github.com/skymoonlee/kopit/blob/main/src/app/globals.css
 *          https://github.com/skymoonlee/kopit/blob/main/src/components/ui/Glass.tsx
 * New React surfaces use the Glass component. This layer bridges existing HTML
 * and compiled editors while preserving their composition/preview declarations.
 */
:root {
  --sc-foreground-rgb: 23 23 29;
  --sc-surface-rgb: 255 255 255;
  --sc-border-rgb: 227 228 234;
  --sc-accent-rgb: 255 92 56;
  --sc-muted-rgb: 103 104 114;
  --sc-success-rgb: 23 133 63;
  --sc-danger-rgb: 217 45 32;
  --sc-warning-rgb: 181 71 8;
  --sc-glass-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  --sc-glass-panel: var(--sc-glass-texture), linear-gradient(135deg, rgba(255,255,255,.66), rgba(255,255,255,.44) 60%);
  --sc-glass-deep: var(--sc-glass-texture), linear-gradient(150deg, rgba(255,255,255,.8), rgba(248,248,250,.68));
  --sc-glass-popover: var(--sc-glass-texture), linear-gradient(160deg, rgba(255,255,255,.88), rgba(250,250,252,.82));
  --sc-glass-border: rgba(23,23,29,.09);
  --sc-glass-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 10px 32px rgba(23,23,29,.08);
  --sc-font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}

html[data-theme="dark"] {
  --sc-foreground-rgb: 244 244 246;
  --sc-surface-rgb: 19 19 24;
  --sc-border-rgb: 38 38 47;
  --sc-muted-rgb: 155 155 166;
  --sc-success-rgb: 74 222 128;
  --sc-danger-rgb: 248 113 113;
  --sc-warning-rgb: 251 191 36;
  --sc-glass-panel: var(--sc-glass-texture), linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.05) 55%);
  --sc-glass-deep: var(--sc-glass-texture), linear-gradient(150deg, rgba(20,20,26,.62), rgba(10,10,13,.55));
  --sc-glass-popover: var(--sc-glass-texture), linear-gradient(160deg, rgba(25,25,32,.9), rgba(14,14,18,.86));
  --sc-glass-border: rgba(255,255,255,.15);
  --sc-glass-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 36px rgba(0,0,0,.28);
}

/* The adapter is isolated in one layer. Every UI selector explicitly excludes
 * media and live template previews so their original declarations stay intact. */
@layer studio-theme {
  html:has(body[data-studio-theme]):not(:where([title^="#"], .color-preset, .color-dot, .__remotion-player, .__remotion-player *, .remotion-player-wrapper, .remotion-player-wrapper *, #remotion-player-container, #remotion-player-container *, #ai-shorts-player-root, #ai-shorts-player-root *, [data-tutorial="preview"], [data-tutorial="preview"] *, .preview-panel, .preview-panel *, .caption-style-preview, .caption-style-preview *, .caption-preview, .caption-preview *, .bg-black.min-w-0.items-center.overflow-hidden, .bg-black.min-w-0.items-center.overflow-hidden *, [data-studio-preserve], [data-studio-preserve] *, [data-studio-page="text-story-create"] aside > div:not(:first-child), [data-studio-page="text-story-create"] aside > div:not(:first-child) *)) { background: var(--background) !important; }
  body[data-studio-theme]:not(:where([title^="#"], .color-preset, .color-dot, .__remotion-player, .__remotion-player *, .remotion-player-wrapper, .remotion-player-wrapper *, #remotion-player-container, #remotion-player-container *, #ai-shorts-player-root, #ai-shorts-player-root *, [data-tutorial="preview"], [data-tutorial="preview"] *, .preview-panel, .preview-panel *, .caption-style-preview, .caption-style-preview *, .caption-preview, .caption-preview *, .bg-black.min-w-0.items-center.overflow-hidden, .bg-black.min-w-0.items-center.overflow-hidden *, [data-studio-preserve], [data-studio-preserve] *, [data-studio-page="text-story-create"] aside > div:not(:first-child), [data-studio-page="text-story-create"] aside > div:not(:first-child) *)) {
    background: radial-gradient(ellipse at 85% 0, rgb(var(--sc-accent-rgb) / .07), transparent 42%), var(--background) !important;
    color: var(--foreground) !important;
    color-scheme: light;
    font-family: var(--sc-font-sans) !important;
    letter-spacing: -.01em;
  }
  html[data-theme="dark"] body[data-studio-theme]:not(:where([title^="#"], .color-preset, .color-dot, .__remotion-player, .__remotion-player *, .remotion-player-wrapper, .remotion-player-wrapper *, #remotion-player-container, #remotion-player-container *, #ai-shorts-player-root, #ai-shorts-player-root *, [data-tutorial="preview"], [data-tutorial="preview"] *, .preview-panel, .preview-panel *, .caption-style-preview, .caption-style-preview *, .caption-preview, .caption-preview *, .bg-black.min-w-0.items-center.overflow-hidden, .bg-black.min-w-0.items-center.overflow-hidden *, [data-studio-preserve], [data-studio-preserve] *, [data-studio-page="text-story-create"] aside > div:not(:first-child), [data-studio-page="text-story-create"] aside > div:not(:first-child) *)) { color-scheme: dark; }

  body[data-studio-theme] :is(.bg-sc-base, .bg-black, [class~="bg-[#0a0a0a]"],:where( #choice-ai-emulator-root), .loading-spinner):not(:where([title^="#"], .color-preset, .color-dot, .__remotion-player, .__remotion-player *, .remotion-player-wrapper, .remotion-player-wrapper *, #remotion-player-container, #remotion-player-container *, #ai-shorts-player-root, #ai-shorts-player-root *, [data-tutorial="preview"], [data-tutorial="preview"] *, .preview-panel, .preview-panel *, .caption-style-preview, .caption-style-preview *, .caption-preview, .caption-preview *, .bg-black.min-w-0.items-center.overflow-hidden, .bg-black.min-w-0.items-center.overflow-hidden *, [data-studio-preserve], [data-studio-preserve] *, [data-studio-page="text-story-create"] aside > div:not(:first-child), [data-studio-page="text-story-create"] aside > div:not(:first-child) *)) {
    background-color: var(--background) !important;
    color: var(--foreground) !important;
  }

  /* Panel material: headers, sidebars, settings, cards and ordinary inputs. */
  body[data-studio-theme] :is(
    header.navbar, header.header, header.bg-black, header.bg-sc-surface, .navbar-scrolled, .site-header, footer, .site-footer, [data-studio-material="panel"],:where(
    #root) > div > header,:where( #root) > main > header, .bg-sc-surface, .bg-sc-elevated, .bg-sc-input,
    .settings-panel, .settings-card, .center-panel, .script-editor-card, .effects-card,
    .left-panel-scrollable, .code-card, .stat-card, .withdrawal-card, .account-item,
    .blog-card, .blog-post, .featured-post, .blog-post-content, .related-posts, .post-card, .related-card, .sc-chat-panel, .sc-chat-welcome__card,
    .legal-container, .legal-section, .pricing-card, .feature-card, .testimonial-card,
    .login-container, .auth-card, .plan-card, .steps, .mobile-menu, .success-container, .fail-container, .error-container, .wrap,
    .bg-white\/5:not(button):not(a), [class~="bg-white/[0.035]"], [class~="bg-black/70"],
    [class~="bg-[#111]"], [class~="bg-[#1a1a1a]"], [class~="bg-[#222]"], [class~="bg-[#2a2a2a]"],
    [style*="background: rgb(17, 17, 17)"], [style*="background: rgb(26, 26, 26)"],
    [style*="background-color: rgb(17, 17, 17)"], [style*="background-color: rgb(26, 26, 26)"]
  ):not(:where([title^="#"], .color-preset, .color-dot, .__remotion-player, .__remotion-player *, .remotion-player-wrapper, .remotion-player-wrapper *, #remotion-player-container, #remotion-player-container *, #ai-shorts-player-root, #ai-shorts-player-root *, [data-tutorial="preview"], [data-tutorial="preview"] *, .preview-panel, .preview-panel *, .caption-style-preview, .caption-style-preview *, .caption-preview, .caption-preview *, .bg-black.min-w-0.items-center.overflow-hidden, .bg-black.min-w-0.items-center.overflow-hidden *, [data-studio-preserve], [data-studio-preserve] *, [data-studio-page="text-story-create"] aside > div:not(:first-child), [data-studio-page="text-story-create"] aside > div:not(:first-child) *)) {
    background-color: transparent !important;
    background-image: var(--sc-glass-panel) !important;
    border-color: var(--sc-glass-border) !important;
    backdrop-filter: blur(var(--blur-glass)) saturate(1.8) !important;
    box-shadow: var(--sc-glass-shadow) !important;
    color: var(--foreground) !important;
  }
  body[data-studio-theme] :is(header, .navbar, .header):not(.__remotion-player header):not(:where([title^="#"], .color-preset, .color-dot, .__remotion-player, .__remotion-player *, .remotion-player-wrapper, .remotion-player-wrapper *, #remotion-player-container, #remotion-player-container *, #ai-shorts-player-root, #ai-shorts-player-root *, [data-tutorial="preview"], [data-tutorial="preview"] *, .preview-panel, .preview-panel *, .caption-style-preview, .caption-style-preview *, .caption-preview, .caption-preview *, .bg-black.min-w-0.items-center.overflow-hidden, .bg-black.min-w-0.items-center.overflow-hidden *, [data-studio-preserve], [data-studio-preserve] *, [data-studio-page="text-story-create"] aside > div:not(:first-child), [data-studio-page="text-story-create"] aside > div:not(:first-child) *)) {
    border-color: var(--border-soft) !important;
  }
  body[data-studio-theme] :is(.settings-card, .code-card, .stat-card, .withdrawal-card, .blog-card, .blog-post, .featured-post, .legal-container, .legal-section, .steps):not(:where([title^="#"], .color-preset, .color-dot, .__remotion-player, .__remotion-player *, .remotion-player-wrapper, .remotion-player-wrapper *, #remotion-player-container, #remotion-player-container *, #ai-shorts-player-root, #ai-shorts-player-root *, [data-tutorial="preview"], [data-tutorial="preview"] *, .preview-panel, .preview-panel *, .caption-style-preview, .caption-style-preview *, .caption-preview, .caption-preview *, .bg-black.min-w-0.items-center.overflow-hidden, .bg-black.min-w-0.items-center.overflow-hidden *, [data-studio-preserve], [data-studio-preserve] *, [data-studio-page="text-story-create"] aside > div:not(:first-child), [data-studio-page="text-story-create"] aside > div:not(:first-child) *)) {
    border-radius: 16px !important;
  }
  body[data-studio-theme] :is(.legal-container, .blog-post-content):not(:where([title^="#"], .color-preset, .color-dot, .__remotion-player, .__remotion-player *, .remotion-player-wrapper, .remotion-player-wrapper *, #remotion-player-container, #remotion-player-container *, #ai-shorts-player-root, #ai-shorts-player-root *, [data-tutorial="preview"], [data-tutorial="preview"] *, .preview-panel, .preview-panel *, .caption-style-preview, .caption-style-preview *, .caption-preview, .caption-preview *, .bg-black.min-w-0.items-center.overflow-hidden, .bg-black.min-w-0.items-center.overflow-hidden *, [data-studio-preserve], [data-studio-preserve] *, [data-studio-page="text-story-create"] aside > div:not(:first-child), [data-studio-page="text-story-create"] aside > div:not(:first-child) *)) { margin-top: 24px; margin-bottom: 24px; }

  /* Portal dialogs use the deep material. Overlay blur is kept separate from
   * the panel: the existing overlay contains a light tint, without a filter. */
  body[data-studio-theme] :is(
    .modal-content, .login-modal-content,:where( #login-modal) > div, .color-modal-content, .ai-chat-container, [data-studio-material="deep"],
    .voice-modal-container, .voice-modal-content, [role="dialog"],
    .fixed.inset-0 > .rounded-xl, .fixed.inset-0 > .rounded-2xl,
    .fixed.inset-0 > .bg-sc-surface, .fixed.inset-0 > .bg-sc-elevated,
    .fixed.inset-0 > [class~="bg-[#111]"], .fixed.inset-0 > [class~="bg-[#1a1a1a]"]
  ):not(:where([title^="#"], .color-preset, .color-dot, .__remotion-player, .__remotion-player *, .remotion-player-wrapper, .remotion-player-wrapper *, #remotion-player-container, #remotion-player-container *, #ai-shorts-player-root, #ai-shorts-player-root *, [data-tutorial="preview"], [data-tutorial="preview"] *, .preview-panel, .preview-panel *, .caption-style-preview, .caption-style-preview *, .caption-preview, .caption-preview *, .bg-black.min-w-0.items-center.overflow-hidden, .bg-black.min-w-0.items-center.overflow-hidden *, [data-studio-preserve], [data-studio-preserve] *, [data-studio-page="text-story-create"] aside > div:not(:first-child), [data-studio-page="text-story-create"] aside > div:not(:first-child) *)) {
    background-color: transparent !important;
    background-image: var(--sc-glass-deep) !important;
    border-color: var(--sc-glass-border) !important;
    backdrop-filter: blur(var(--blur-glass)) saturate(1.8) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 14px 40px rgba(23,23,29,.1) !important;
    color: var(--foreground) !important;
  }
  body[data-studio-theme] :is(.modal, .login-modal, .mobile-menu-overlay, .color-modal, .fixed.inset-0.bg-black\/60, .fixed.inset-0.bg-black\/70, .fixed.inset-0.bg-black\/80, .fixed.inset-0.bg-black\/90, .fixed.inset-0.bg-black\/95):not(:where([title^="#"], .color-preset, .color-dot, .__remotion-player, .__remotion-player *, .remotion-player-wrapper, .remotion-player-wrapper *, #remotion-player-container, #remotion-player-container *, #ai-shorts-player-root, #ai-shorts-player-root *, [data-tutorial="preview"], [data-tutorial="preview"] *, .preview-panel, .preview-panel *, .caption-style-preview, .caption-style-preview *, .caption-preview, .caption-preview *, .bg-black.min-w-0.items-center.overflow-hidden, .bg-black.min-w-0.items-center.overflow-hidden *, [data-studio-preserve], [data-studio-preserve] *, [data-studio-page="text-story-create"] aside > div:not(:first-child), [data-studio-page="text-story-create"] aside > div:not(:first-child) *)) {
    background-color: rgba(23,23,29,.22) !important;
    background-image: none !important;
    backdrop-filter: none !important;
  }
  body[data-studio-theme] :is(.dropdown-menu, .context-menu, .voice-dropdown, .font-dropdown, [data-studio-material="menu"], [role="menu"], [role="listbox"]):not(:where([title^="#"], .color-preset, .color-dot, .__remotion-player, .__remotion-player *, .remotion-player-wrapper, .remotion-player-wrapper *, #remotion-player-container, #remotion-player-container *, #ai-shorts-player-root, #ai-shorts-player-root *, [data-tutorial="preview"], [data-tutorial="preview"] *, .preview-panel, .preview-panel *, .caption-style-preview, .caption-style-preview *, .caption-preview, .caption-preview *, .bg-black.min-w-0.items-center.overflow-hidden, .bg-black.min-w-0.items-center.overflow-hidden *, [data-studio-preserve], [data-studio-preserve] *, [data-studio-page="text-story-create"] aside > div:not(:first-child), [data-studio-page="text-story-create"] aside > div:not(:first-child) *)) {
    background-color: transparent !important;
    background-image: var(--sc-glass-popover) !important;
    border-color: var(--sc-glass-border) !important;
    backdrop-filter: blur(var(--blur-glass)) saturate(1.8) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 16px 44px rgba(23,23,29,.14) !important;
    color: var(--foreground) !important;
  }

  body[data-studio-theme] :is(.text-sc-text-primary, .text-sc-primary, .text-white, .text-sc-text-secondary, .text-sc-secondary,
    [class~="text-[#fff]"], [class~="text-[#ffffff]"], [class~="text-[#eee]"], [class~="text-[#ddd]"], [class~="text-[#ccc]"],
    .logo, .logo-text .craft, .logo-text .shorts, .nav-links a, .nav-link, .mobile-nav-link,
    .legal-section h3, .legal-container h1, .legal-container h2, .blog-title, .blog-card-title, .post-title, .post-title h2, .post-card h2, .post-card h2 a, .site-header nav a, .blog-index h1, .blog-post h1, .blog-content h2, .blog-content h3,:where( #login-modal) h2,
    .settings-card h3, .script-editor-card h3, .effects-card h3, .step-text, .stat-value,
    .modal-header h2, .modal-header h3, .color-modal-header h3, .withdrawal-card h3):not(:where([title^="#"], .color-preset, .color-dot, .__remotion-player, .__remotion-player *, .remotion-player-wrapper, .remotion-player-wrapper *, #remotion-player-container, #remotion-player-container *, #ai-shorts-player-root, #ai-shorts-player-root *, [data-tutorial="preview"], [data-tutorial="preview"] *, .preview-panel, .preview-panel *, .caption-style-preview, .caption-style-preview *, .caption-preview, .caption-preview *, .bg-black.min-w-0.items-center.overflow-hidden, .bg-black.min-w-0.items-center.overflow-hidden *, [data-studio-preserve], [data-studio-preserve] *, [data-studio-page="text-story-create"] aside > div:not(:first-child), [data-studio-page="text-story-create"] aside > div:not(:first-child) *)) {
    color: var(--foreground) !important;
    text-shadow: none !important;
  }
  body[data-studio-theme] :is(.text-sc-text-tertiary, .text-sc-tertiary, .text-sc-text-muted, .text-sc-muted, .text-sc-text-dim, .text-sc-text-disabled,
    [class~="text-[#888]"], [class~="text-[#999]"], [class~="text-[#aaa]"], [class~="text-[#666]"],
    [class~="text-white/60"], [class~="text-white/50"], [class~="text-white/40"],
    .tagline, .legal-date, .legal-section p, .legal-section ul, .legal-section td, .blog-excerpt,
    .blog-card-excerpt, .post-excerpt, .post-meta, .blog-meta, .stat-label, .subtitle,
    .steps h3, .footer-bottom, .footer-links a, .company-info p, .setting-item label, .blog-content p, .blog-content li, .blog-content td,:where( #login-modal) p,
    .loading-text, .empty-message, .save-status, .nav-link:not(.active)):not(:where([title^="#"], .color-preset, .color-dot, .__remotion-player, .__remotion-player *, .remotion-player-wrapper, .remotion-player-wrapper *, #remotion-player-container, #remotion-player-container *, #ai-shorts-player-root, #ai-shorts-player-root *, [data-tutorial="preview"], [data-tutorial="preview"] *, .preview-panel, .preview-panel *, .caption-style-preview, .caption-style-preview *, .caption-preview, .caption-preview *, .bg-black.min-w-0.items-center.overflow-hidden, .bg-black.min-w-0.items-center.overflow-hidden *, [data-studio-preserve], [data-studio-preserve] *, [data-studio-page="text-story-create"] aside > div:not(:first-child), [data-studio-page="text-story-create"] aside > div:not(:first-child) *)) {
    color: var(--muted) !important;
  }
  body[data-studio-theme] :is(.text-primary, .text-primary-hover, .logo-text .shorts, .blog-category, .post-category, .legal-header h1, .step-num, .code-display span):not(:where([title^="#"], .color-preset, .color-dot, .__remotion-player, .__remotion-player *, .remotion-player-wrapper, .remotion-player-wrapper *, #remotion-player-container, #remotion-player-container *, #ai-shorts-player-root, #ai-shorts-player-root *, [data-tutorial="preview"], [data-tutorial="preview"] *, .preview-panel, .preview-panel *, .caption-style-preview, .caption-style-preview *, .caption-preview, .caption-preview *, .bg-black.min-w-0.items-center.overflow-hidden, .bg-black.min-w-0.items-center.overflow-hidden *, [data-studio-preserve], [data-studio-preserve] *, [data-studio-page="text-story-create"] aside > div:not(:first-child), [data-studio-page="text-story-create"] aside > div:not(:first-child) *)) { color: var(--accent) !important; }
  body[data-studio-theme] :is(.logo-text, .logo-link):not(:where([title^="#"], .color-preset, .color-dot, .__remotion-player, .__remotion-player *, .remotion-player-wrapper, .remotion-player-wrapper *, #remotion-player-container, #remotion-player-container *, #ai-shorts-player-root, #ai-shorts-player-root *, [data-tutorial="preview"], [data-tutorial="preview"] *, .preview-panel, .preview-panel *, .caption-style-preview, .caption-style-preview *, .caption-preview, .caption-preview *, .bg-black.min-w-0.items-center.overflow-hidden, .bg-black.min-w-0.items-center.overflow-hidden *, [data-studio-preserve], [data-studio-preserve] *, [data-studio-page="text-story-create"] aside > div:not(:first-child), [data-studio-page="text-story-create"] aside > div:not(:first-child) *)) { filter: none !important; }
  body[data-studio-theme] :is(.border-sc-border, .border-sc-border-subtle, .border-sc-border-strong,
    [class~="border-white/5"], [class~="border-white/10"], [class~="border-white/15"], [class~="border-white/20"],
    [class~="border-white/[0.06]"], [class~="border-[#333]"], [class~="border-[#444]"],
    .legal-section table td, .legal-section table th, .step + .step, .status-bar, footer):not(:where([title^="#"], .color-preset, .color-dot, .__remotion-player, .__remotion-player *, .remotion-player-wrapper, .remotion-player-wrapper *, #remotion-player-container, #remotion-player-container *, #ai-shorts-player-root, #ai-shorts-player-root *, [data-tutorial="preview"], [data-tutorial="preview"] *, .preview-panel, .preview-panel *, .caption-style-preview, .caption-style-preview *, .caption-preview, .caption-preview *, .bg-black.min-w-0.items-center.overflow-hidden, .bg-black.min-w-0.items-center.overflow-hidden *, [data-studio-preserve], [data-studio-preserve] *, [data-studio-page="text-story-create"] aside > div:not(:first-child), [data-studio-page="text-story-create"] aside > div:not(:first-child) *)) { border-color: var(--border-soft) !important; }
  body[data-studio-theme] :is(.bg-sc-border, .bg-sc-border-subtle, .bg-sc-border-strong):not(:where([title^="#"], .color-preset, .color-dot, .__remotion-player, .__remotion-player *, .remotion-player-wrapper, .remotion-player-wrapper *, #remotion-player-container, #remotion-player-container *, #ai-shorts-player-root, #ai-shorts-player-root *, [data-tutorial="preview"], [data-tutorial="preview"] *, .preview-panel, .preview-panel *, .caption-style-preview, .caption-style-preview *, .caption-preview, .caption-preview *, .bg-black.min-w-0.items-center.overflow-hidden, .bg-black.min-w-0.items-center.overflow-hidden *, [data-studio-preserve], [data-studio-preserve] *, [data-studio-page="text-story-create"] aside > div:not(:first-child), [data-studio-page="text-story-create"] aside > div:not(:first-child) *)) { background-color: var(--border-soft) !important; }
  body[data-studio-theme] :is([class~="bg-white/5"], [class~="bg-white/10"], [class~="bg-white/[0.02]"], [class~="bg-white/[0.03]"], [class~="bg-white/[0.04]"], [class~="bg-white/[0.06]"]):not(:where([title^="#"], .color-preset, .color-dot, .__remotion-player, .__remotion-player *, .remotion-player-wrapper, .remotion-player-wrapper *, #remotion-player-container, #remotion-player-container *, #ai-shorts-player-root, #ai-shorts-player-root *, [data-tutorial="preview"], [data-tutorial="preview"] *, .preview-panel, .preview-panel *, .caption-style-preview, .caption-style-preview *, .caption-preview, .caption-preview *, .bg-black.min-w-0.items-center.overflow-hidden, .bg-black.min-w-0.items-center.overflow-hidden *, [data-studio-preserve], [data-studio-preserve] *, [data-studio-page="text-story-create"] aside > div:not(:first-child), [data-studio-page="text-story-create"] aside > div:not(:first-child) *)) {
    background-color: rgb(var(--sc-foreground-rgb) / .035) !important;
  }

  body[data-studio-theme] :is(input:not([type="color"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]), textarea, select):not(:where([title^="#"], .color-preset, .color-dot, .__remotion-player, .__remotion-player *, .remotion-player-wrapper, .remotion-player-wrapper *, #remotion-player-container, #remotion-player-container *, #ai-shorts-player-root, #ai-shorts-player-root *, [data-tutorial="preview"], [data-tutorial="preview"] *, .preview-panel, .preview-panel *, .caption-style-preview, .caption-style-preview *, .caption-preview, .caption-preview *, .bg-black.min-w-0.items-center.overflow-hidden, .bg-black.min-w-0.items-center.overflow-hidden *, [data-studio-preserve], [data-studio-preserve] *, [data-studio-page="text-story-create"] aside > div:not(:first-child), [data-studio-page="text-story-create"] aside > div:not(:first-child) *)) {
    background-color: rgb(var(--sc-surface-rgb) / .62) !important;
    color: var(--foreground) !important;
    border-color: var(--border-soft) !important;
    border-radius: 10px;
    accent-color: var(--foreground);
  }
  body[data-studio-theme] :is(input, textarea):not(:where([title^="#"], .color-preset, .color-dot, .__remotion-player, .__remotion-player *, .remotion-player-wrapper, .remotion-player-wrapper *, #remotion-player-container, #remotion-player-container *, #ai-shorts-player-root, #ai-shorts-player-root *, [data-tutorial="preview"], [data-tutorial="preview"] *, .preview-panel, .preview-panel *, .caption-style-preview, .caption-style-preview *, .caption-preview, .caption-preview *, .bg-black.min-w-0.items-center.overflow-hidden, .bg-black.min-w-0.items-center.overflow-hidden *, [data-studio-preserve], [data-studio-preserve] *, [data-studio-page="text-story-create"] aside > div:not(:first-child), [data-studio-page="text-story-create"] aside > div:not(:first-child) *))::placeholder { color: var(--muted) !important; opacity: .8; }
  body[data-studio-theme] :is(input[type="checkbox"], input[type="radio"], input[type="range"]):not(:where([title^="#"], .color-preset, .color-dot, .__remotion-player, .__remotion-player *, .remotion-player-wrapper, .remotion-player-wrapper *, #remotion-player-container, #remotion-player-container *, #ai-shorts-player-root, #ai-shorts-player-root *, [data-tutorial="preview"], [data-tutorial="preview"] *, .preview-panel, .preview-panel *, .caption-style-preview, .caption-style-preview *, .caption-preview, .caption-preview *, .bg-black.min-w-0.items-center.overflow-hidden, .bg-black.min-w-0.items-center.overflow-hidden *, [data-studio-preserve], [data-studio-preserve] *, [data-studio-page="text-story-create"] aside > div:not(:first-child), [data-studio-page="text-story-create"] aside > div:not(:first-child) *)) { accent-color: var(--foreground); }
  body[data-studio-theme] :is(a, button, input, textarea, select, [tabindex]):focus-visible:not(:where([title^="#"], .color-preset, .color-dot, .__remotion-player, .__remotion-player *, .remotion-player-wrapper, .remotion-player-wrapper *, #remotion-player-container, #remotion-player-container *, #ai-shorts-player-root, #ai-shorts-player-root *, [data-tutorial="preview"], [data-tutorial="preview"] *, .preview-panel, .preview-panel *, .caption-style-preview, .caption-style-preview *, .caption-preview, .caption-preview *, .bg-black.min-w-0.items-center.overflow-hidden, .bg-black.min-w-0.items-center.overflow-hidden *, [data-studio-preserve], [data-studio-preserve] *, [data-studio-page="text-story-create"] aside > div:not(:first-child), [data-studio-page="text-story-create"] aside > div:not(:first-child) *)) { outline: 2px solid var(--accent) !important; outline-offset: 3px; }

  /* Filled actions are black. Brand orange remains in labels and indicators. */
  body[data-studio-theme] :is(button, a, [role="button"]):is(
    .bg-primary, .bg-primary-hover, .bg-ai, .bg-clone, .bg-success, .bg-error, .bg-danger,
    .bg-red-500, .bg-green-500, .bg-blue-500, .bg-purple-500, .bg-indigo-600,
    .bg-gradient-to-br, .bg-gradient-to-r, .bg-white,
    [class~="bg-[#ff6b00]"], [class~="bg-[#ff8500]"], [class~="bg-[#9747FF]"],
    [class~="bg-white/10"], [class~="bg-white/15"],
    [style*="background: linear-gradient"], [style*="background: rgb(255, 107, 0)"],
    [style*="background-color: rgb(255, 107, 0)"]
  ):not(:where([title^="#"], .color-preset, .color-dot, .__remotion-player, .__remotion-player *, .remotion-player-wrapper, .remotion-player-wrapper *, #remotion-player-container, #remotion-player-container *, #ai-shorts-player-root, #ai-shorts-player-root *, [data-tutorial="preview"], [data-tutorial="preview"] *, .preview-panel, .preview-panel *, .caption-style-preview, .caption-style-preview *, .caption-preview, .caption-preview *, .bg-black.min-w-0.items-center.overflow-hidden, .bg-black.min-w-0.items-center.overflow-hidden *, [data-studio-preserve], [data-studio-preserve] *, [data-studio-page="text-story-create"] aside > div:not(:first-child), [data-studio-page="text-story-create"] aside > div:not(:first-child) *)), body[data-studio-theme] :is(.btn, .btn-primary, .login-btn, .mobile-login-btn, .google-login-btn, .submit-btn, .copy-btn, .add-btn, .share-btn,
    .generate-btn, .render-btn, .subscribe-btn, .checkout-btn, .cta-primary, .sc-chat-welcome__cta, .sc-chat-email-gate__submit,:where( #lm-google-btn),:where( #lm-logi-btn),:where( #lm-send-btn), .item-download-btn, .error-btn, .control-btn.primary,
    .category-btn.active, .legal-nav button.active, .legal-nav button:hover, .nav-btn):not(:where([title^="#"], .color-preset, .color-dot, .__remotion-player, .__remotion-player *, .remotion-player-wrapper, .remotion-player-wrapper *, #remotion-player-container, #remotion-player-container *, #ai-shorts-player-root, #ai-shorts-player-root *, [data-tutorial="preview"], [data-tutorial="preview"] *, .preview-panel, .preview-panel *, .caption-style-preview, .caption-style-preview *, .caption-preview, .caption-preview *, .bg-black.min-w-0.items-center.overflow-hidden, .bg-black.min-w-0.items-center.overflow-hidden *, [data-studio-preserve], [data-studio-preserve] *, [data-studio-page="text-story-create"] aside > div:not(:first-child), [data-studio-page="text-story-create"] aside > div:not(:first-child) *)) {
    background: var(--foreground) !important;
    color: var(--background) !important;
    border-color: var(--foreground) !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  body[data-studio-theme] :is(button, a):is(.bg-primary, .bg-ai, .bg-clone, .bg-gradient-to-br, .bg-gradient-to-r, .bg-white) :is(.text-white, .text-sc-text-primary, .text-primary):not(:where([title^="#"], .color-preset, .color-dot, .__remotion-player, .__remotion-player *, .remotion-player-wrapper, .remotion-player-wrapper *, #remotion-player-container, #remotion-player-container *, #ai-shorts-player-root, #ai-shorts-player-root *, [data-tutorial="preview"], [data-tutorial="preview"] *, .preview-panel, .preview-panel *, .caption-style-preview, .caption-style-preview *, .caption-preview, .caption-preview *, .bg-black.min-w-0.items-center.overflow-hidden, .bg-black.min-w-0.items-center.overflow-hidden *, [data-studio-preserve], [data-studio-preserve] *, [data-studio-page="text-story-create"] aside > div:not(:first-child), [data-studio-page="text-story-create"] aside > div:not(:first-child) *)) { color: var(--background) !important; }
  body[data-studio-theme] :is(.btn-secondary, .cta-secondary, .cancel-btn, .back-button, .legal-nav button,:where( #lm-back-btn),:where( #lm-resend-btn), .category-btn, .account-actions button):not(:where([title^="#"], .color-preset, .color-dot, .__remotion-player, .__remotion-player *, .remotion-player-wrapper, .remotion-player-wrapper *, #remotion-player-container, #remotion-player-container *, #ai-shorts-player-root, #ai-shorts-player-root *, [data-tutorial="preview"], [data-tutorial="preview"] *, .preview-panel, .preview-panel *, .caption-style-preview, .caption-style-preview *, .caption-preview, .caption-preview *, .bg-black.min-w-0.items-center.overflow-hidden, .bg-black.min-w-0.items-center.overflow-hidden *, [data-studio-preserve], [data-studio-preserve] *, [data-studio-page="text-story-create"] aside > div:not(:first-child), [data-studio-page="text-story-create"] aside > div:not(:first-child) *)) {
    background: rgb(var(--sc-surface-rgb) / .62) !important;
    color: var(--foreground) !important;
    border-color: var(--border-soft) !important;
    box-shadow: none !important;
  }
  body[data-studio-theme] :is(button, a):is(.bg-primary, .bg-ai, .bg-clone, .bg-gradient-to-br, .bg-gradient-to-r, .btn-primary, .login-btn, .submit-btn):hover:not(:disabled):not(:where([title^="#"], .color-preset, .color-dot, .__remotion-player, .__remotion-player *, .remotion-player-wrapper, .remotion-player-wrapper *, #remotion-player-container, #remotion-player-container *, #ai-shorts-player-root, #ai-shorts-player-root *, [data-tutorial="preview"], [data-tutorial="preview"] *, .preview-panel, .preview-panel *, .caption-style-preview, .caption-style-preview *, .caption-preview, .caption-preview *, .bg-black.min-w-0.items-center.overflow-hidden, .bg-black.min-w-0.items-center.overflow-hidden *, [data-studio-preserve], [data-studio-preserve] *, [data-studio-page="text-story-create"] aside > div:not(:first-child), [data-studio-page="text-story-create"] aside > div:not(:first-child) *)) { opacity: .85; }
  body[data-studio-theme] :is(button, a):is(.bg-transparent, .bg-primary-soft, [class~="bg-primary/10"], [class~="bg-primary/15"]):not(:where([title^="#"], .color-preset, .color-dot, .__remotion-player, .__remotion-player *, .remotion-player-wrapper, .remotion-player-wrapper *, #remotion-player-container, #remotion-player-container *, #ai-shorts-player-root, #ai-shorts-player-root *, [data-tutorial="preview"], [data-tutorial="preview"] *, .preview-panel, .preview-panel *, .caption-style-preview, .caption-style-preview *, .caption-preview, .caption-preview *, .bg-black.min-w-0.items-center.overflow-hidden, .bg-black.min-w-0.items-center.overflow-hidden *, [data-studio-preserve], [data-studio-preserve] *, [data-studio-page="text-story-create"] aside > div:not(:first-child), [data-studio-page="text-story-create"] aside > div:not(:first-child) *)) { color: var(--foreground) !important; }
  body[data-studio-theme] :is(.nav-link.active, .mobile-nav-link.active, .word-item.selected, .caption-style-card.active):not(:where([title^="#"], .color-preset, .color-dot, .__remotion-player, .__remotion-player *, .remotion-player-wrapper, .remotion-player-wrapper *, #remotion-player-container, #remotion-player-container *, #ai-shorts-player-root, #ai-shorts-player-root *, [data-tutorial="preview"], [data-tutorial="preview"] *, .preview-panel, .preview-panel *, .caption-style-preview, .caption-style-preview *, .caption-preview, .caption-preview *, .bg-black.min-w-0.items-center.overflow-hidden, .bg-black.min-w-0.items-center.overflow-hidden *, [data-studio-preserve], [data-studio-preserve] *, [data-studio-page="text-story-create"] aside > div:not(:first-child), [data-studio-page="text-story-create"] aside > div:not(:first-child) *)) { background-color: rgb(var(--sc-foreground-rgb) / .06) !important; color: var(--foreground) !important; }

  body[data-studio-theme] :is(.text-success, .save-status.saved, .status-badge.completed, .status-badge.paid, [class~="text-green-400"], [class~="text-green-500"], [class~="text-[#22c55e]"]):not(:where([title^="#"], .color-preset, .color-dot, .__remotion-player, .__remotion-player *, .remotion-player-wrapper, .remotion-player-wrapper *, #remotion-player-container, #remotion-player-container *, #ai-shorts-player-root, #ai-shorts-player-root *, [data-tutorial="preview"], [data-tutorial="preview"] *, .preview-panel, .preview-panel *, .caption-style-preview, .caption-style-preview *, .caption-preview, .caption-preview *, .bg-black.min-w-0.items-center.overflow-hidden, .bg-black.min-w-0.items-center.overflow-hidden *, [data-studio-preserve], [data-studio-preserve] *, [data-studio-page="text-story-create"] aside > div:not(:first-child), [data-studio-page="text-story-create"] aside > div:not(:first-child) *)) { color: var(--success) !important; }
  body[data-studio-theme] :is(.text-error, .text-danger, .save-status.error, .status-badge.failed, [class~="text-red-400"], [class~="text-red-500"], [class~="text-[#ef4444]"], [class~="text-[#ff6666]"]):not(:where([title^="#"], .color-preset, .color-dot, .__remotion-player, .__remotion-player *, .remotion-player-wrapper, .remotion-player-wrapper *, #remotion-player-container, #remotion-player-container *, #ai-shorts-player-root, #ai-shorts-player-root *, [data-tutorial="preview"], [data-tutorial="preview"] *, .preview-panel, .preview-panel *, .caption-style-preview, .caption-style-preview *, .caption-preview, .caption-preview *, .bg-black.min-w-0.items-center.overflow-hidden, .bg-black.min-w-0.items-center.overflow-hidden *, [data-studio-preserve], [data-studio-preserve] *, [data-studio-page="text-story-create"] aside > div:not(:first-child), [data-studio-page="text-story-create"] aside > div:not(:first-child) *)) { color: var(--danger) !important; }
  body[data-studio-theme] :is(.text-warning, .save-status.saving, .status-badge.pending):not(:where([title^="#"], .color-preset, .color-dot, .__remotion-player, .__remotion-player *, .remotion-player-wrapper, .remotion-player-wrapper *, #remotion-player-container, #remotion-player-container *, #ai-shorts-player-root, #ai-shorts-player-root *, [data-tutorial="preview"], [data-tutorial="preview"] *, .preview-panel, .preview-panel *, .caption-style-preview, .caption-style-preview *, .caption-preview, .caption-preview *, .bg-black.min-w-0.items-center.overflow-hidden, .bg-black.min-w-0.items-center.overflow-hidden *, [data-studio-preserve], [data-studio-preserve] *, [data-studio-page="text-story-create"] aside > div:not(:first-child), [data-studio-page="text-story-create"] aside > div:not(:first-child) *)) { color: var(--warning) !important; }
  body[data-studio-theme] :is(.highlight-box, .info-box):not(:where([title^="#"], .color-preset, .color-dot, .__remotion-player, .__remotion-player *, .remotion-player-wrapper, .remotion-player-wrapper *, #remotion-player-container, #remotion-player-container *, #ai-shorts-player-root, #ai-shorts-player-root *, [data-tutorial="preview"], [data-tutorial="preview"] *, .preview-panel, .preview-panel *, .caption-style-preview, .caption-style-preview *, .caption-preview, .caption-preview *, .bg-black.min-w-0.items-center.overflow-hidden, .bg-black.min-w-0.items-center.overflow-hidden *, [data-studio-preserve], [data-studio-preserve] *, [data-studio-page="text-story-create"] aside > div:not(:first-child), [data-studio-page="text-story-create"] aside > div:not(:first-child) *)) { background: rgb(var(--sc-accent-rgb) / .06) !important; color: var(--foreground) !important; border-color: var(--accent) !important; }
  body[data-studio-theme] .warning-box:not(:where([title^="#"], .color-preset, .color-dot, .__remotion-player, .__remotion-player *, .remotion-player-wrapper, .remotion-player-wrapper *, #remotion-player-container, #remotion-player-container *, #ai-shorts-player-root, #ai-shorts-player-root *, [data-tutorial="preview"], [data-tutorial="preview"] *, .preview-panel, .preview-panel *, .caption-style-preview, .caption-style-preview *, .caption-preview, .caption-preview *, .bg-black.min-w-0.items-center.overflow-hidden, .bg-black.min-w-0.items-center.overflow-hidden *, [data-studio-preserve], [data-studio-preserve] *, [data-studio-page="text-story-create"] aside > div:not(:first-child), [data-studio-page="text-story-create"] aside > div:not(:first-child) *)) { background: rgb(var(--sc-danger-rgb) / .06) !important; color: var(--danger) !important; border-color: var(--danger) !important; }
  body[data-studio-theme] .legal-section table th:not(:where([title^="#"], .color-preset, .color-dot, .__remotion-player, .__remotion-player *, .remotion-player-wrapper, .remotion-player-wrapper *, #remotion-player-container, #remotion-player-container *, #ai-shorts-player-root, #ai-shorts-player-root *, [data-tutorial="preview"], [data-tutorial="preview"] *, .preview-panel, .preview-panel *, .caption-style-preview, .caption-style-preview *, .caption-preview, .caption-preview *, .bg-black.min-w-0.items-center.overflow-hidden, .bg-black.min-w-0.items-center.overflow-hidden *, [data-studio-preserve], [data-studio-preserve] *, [data-studio-page="text-story-create"] aside > div:not(:first-child), [data-studio-page="text-story-create"] aside > div:not(:first-child) *)) { background: var(--surface-2) !important; color: var(--foreground) !important; }

  html[data-theme="dark"] body[data-studio-theme] :is(.bg-sc-surface, .bg-sc-elevated, .modal-content, .settings-panel, [role="dialog"], header.navbar):not(:where([title^="#"], .color-preset, .color-dot, .__remotion-player, .__remotion-player *, .remotion-player-wrapper, .remotion-player-wrapper *, #remotion-player-container, #remotion-player-container *, #ai-shorts-player-root, #ai-shorts-player-root *, [data-tutorial="preview"], [data-tutorial="preview"] *, .preview-panel, .preview-panel *, .caption-style-preview, .caption-style-preview *, .caption-preview, .caption-preview *, .bg-black.min-w-0.items-center.overflow-hidden, .bg-black.min-w-0.items-center.overflow-hidden *, [data-studio-preserve], [data-studio-preserve] *, [data-studio-page="text-story-create"] aside > div:not(:first-child), [data-studio-page="text-story-create"] aside > div:not(:first-child) *)) { backdrop-filter: blur(var(--blur-glass)) saturate(1.6) brightness(1.8) !important; }

  /* Media exclusions on every selector use verified existing roots: the default
 * @remotion/player class, host wrappers, caption samples and live chat previews.
 * data-studio-preserve is available for future custom composition hosts. */

  @media (prefers-reduced-motion: reduce) {
    body[data-studio-theme] :is(.navbar, .blog-card, .btn-primary, .btn-secondary, .nav-link):not(:where([title^="#"], .color-preset, .color-dot, .__remotion-player, .__remotion-player *, .remotion-player-wrapper, .remotion-player-wrapper *, #remotion-player-container, #remotion-player-container *, #ai-shorts-player-root, #ai-shorts-player-root *, [data-tutorial="preview"], [data-tutorial="preview"] *, .preview-panel, .preview-panel *, .caption-style-preview, .caption-style-preview *, .caption-preview, .caption-preview *, .bg-black.min-w-0.items-center.overflow-hidden, .bg-black.min-w-0.items-center.overflow-hidden *, [data-studio-preserve], [data-studio-preserve] *, [data-studio-page="text-story-create"] aside > div:not(:first-child), [data-studio-page="text-story-create"] aside > div:not(:first-child) *)) { transition: none !important; }
  }

  body[data-studio-theme] .toggle-slider:not(:where([title^="#"], .color-preset, .color-dot, .__remotion-player, .__remotion-player *, .remotion-player-wrapper, .remotion-player-wrapper *, #remotion-player-container, #remotion-player-container *, #ai-shorts-player-root, #ai-shorts-player-root *, [data-tutorial="preview"], [data-tutorial="preview"] *, .preview-panel, .preview-panel *, .caption-style-preview, .caption-style-preview *, .caption-preview, .caption-preview *, .bg-black.min-w-0.items-center.overflow-hidden, .bg-black.min-w-0.items-center.overflow-hidden *, [data-studio-preserve], [data-studio-preserve] *, [data-studio-page="text-story-create"] aside > div:not(:first-child), [data-studio-page="text-story-create"] aside > div:not(:first-child) *)){
    background: var(--surface-2) !important;
  }

  body[data-studio-theme] input:checked + .toggle-slider:not(:where([title^="#"], .color-preset, .color-dot, .__remotion-player, .__remotion-player *, .remotion-player-wrapper, .remotion-player-wrapper *, #remotion-player-container, #remotion-player-container *, #ai-shorts-player-root, #ai-shorts-player-root *, [data-tutorial="preview"], [data-tutorial="preview"] *, .preview-panel, .preview-panel *, .caption-style-preview, .caption-style-preview *, .caption-preview, .caption-preview *, .bg-black.min-w-0.items-center.overflow-hidden, .bg-black.min-w-0.items-center.overflow-hidden *, [data-studio-preserve], [data-studio-preserve] *, [data-studio-page="text-story-create"] aside > div:not(:first-child), [data-studio-page="text-story-create"] aside > div:not(:first-child) *)){
    background: var(--foreground) !important;
  }

  body[data-studio-theme] label .bg-primary:not(:where([title^="#"], .color-preset, .color-dot, .__remotion-player, .__remotion-player *, .remotion-player-wrapper, .remotion-player-wrapper *, #remotion-player-container, #remotion-player-container *, #ai-shorts-player-root, #ai-shorts-player-root *, [data-tutorial="preview"], [data-tutorial="preview"] *, .preview-panel, .preview-panel *, .caption-style-preview, .caption-style-preview *, .caption-preview, .caption-preview *, .bg-black.min-w-0.items-center.overflow-hidden, .bg-black.min-w-0.items-center.overflow-hidden *, [data-studio-preserve], [data-studio-preserve] *, [data-studio-page="text-story-create"] aside > div:not(:first-child), [data-studio-page="text-story-create"] aside > div:not(:first-child) *)){
    background: var(--foreground) !important;
    color: var(--background) !important;
  }

  body[data-studio-theme] input[type="range"]:not(:where([title^="#"], .color-preset, .color-dot, .__remotion-player, .__remotion-player *, .remotion-player-wrapper, .remotion-player-wrapper *, #remotion-player-container, #remotion-player-container *, #ai-shorts-player-root, #ai-shorts-player-root *, [data-tutorial="preview"], [data-tutorial="preview"] *, .preview-panel, .preview-panel *, .caption-style-preview, .caption-style-preview *, .caption-preview, .caption-preview *, .bg-black.min-w-0.items-center.overflow-hidden, .bg-black.min-w-0.items-center.overflow-hidden *, [data-studio-preserve], [data-studio-preserve] *, [data-studio-page="text-story-create"] aside > div:not(:first-child), [data-studio-page="text-story-create"] aside > div:not(:first-child) *))::-webkit-slider-thumb{
    background: var(--foreground) !important;
    box-shadow: none !important;
  }

  body[data-studio-theme] input[type="range"]:not(:where([title^="#"], .color-preset, .color-dot, .__remotion-player, .__remotion-player *, .remotion-player-wrapper, .remotion-player-wrapper *, #remotion-player-container, #remotion-player-container *, #ai-shorts-player-root, #ai-shorts-player-root *, [data-tutorial="preview"], [data-tutorial="preview"] *, .preview-panel, .preview-panel *, .caption-style-preview, .caption-style-preview *, .caption-preview, .caption-preview *, .bg-black.min-w-0.items-center.overflow-hidden, .bg-black.min-w-0.items-center.overflow-hidden *, [data-studio-preserve], [data-studio-preserve] *, [data-studio-page="text-story-create"] aside > div:not(:first-child), [data-studio-page="text-story-create"] aside > div:not(:first-child) *))::-moz-range-thumb{
    background: var(--foreground) !important;
    box-shadow: none !important;
  }

  body[data-studio-theme] button:disabled:not(:where([title^="#"], .color-preset, .color-dot, .__remotion-player, .__remotion-player *, .remotion-player-wrapper, .remotion-player-wrapper *, #remotion-player-container, #remotion-player-container *, #ai-shorts-player-root, #ai-shorts-player-root *, [data-tutorial="preview"], [data-tutorial="preview"] *, .preview-panel, .preview-panel *, .caption-style-preview, .caption-style-preview *, .caption-preview, .caption-preview *, .bg-black.min-w-0.items-center.overflow-hidden, .bg-black.min-w-0.items-center.overflow-hidden *, [data-studio-preserve], [data-studio-preserve] *, [data-studio-page="text-story-create"] aside > div:not(:first-child), [data-studio-page="text-story-create"] aside > div:not(:first-child) *)){
    opacity: .45 !important;
    cursor: not-allowed !important;
  }

  /*
 Shared legacy header and user-invoked native help dialog.
 */

  body[data-studio-theme] .studio-legacy-wordmark{
    color: var(--foreground) !important;
    font-size: 19px !important;
    font-weight: 750 !important;
    letter-spacing: -.03em !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    gap: 0 !important;
  }

  body[data-studio-theme] .studio-legacy-wordmark span{
    color: var(--accent) !important;
  }

  body[data-studio-theme] .studio-legacy-help-trigger{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
    min-height: 40px !important;
    padding: 8px 10px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--muted) !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
  }

  body[data-studio-theme] .studio-legacy-help-trigger:hover{
    background: rgb(var(--sc-foreground-rgb) / .06) !important;
    color: var(--foreground) !important;
  }

  body[data-studio-theme] .studio-legacy-help-floating{
    position: fixed !important;
    top: 16px !important;
    right: 16px !important;
    z-index: 500 !important;
    background-image: var(--sc-glass-panel) !important;
    backdrop-filter: blur(var(--blur-glass)) saturate(1.8) !important;
    border-color: var(--sc-glass-border) !important;
    box-shadow: var(--sc-glass-shadow) !important;
  }

  body[data-studio-theme] .studio-legacy-help-dialog{
    width: min(520px, calc(100vw - 32px)) !important;
    max-height: calc(100dvh - 32px) !important;
    padding: 0 !important;
    margin: auto !important;
    border: 0 !important;
    border-radius: 20px !important;
    background: transparent !important;
    color: var(--foreground) !important;
    overflow: auto !important;
  }

  body[data-studio-theme] .studio-legacy-help-dialog::backdrop{
    background: rgba(23, 23, 29, .22) !important;
  }

  body[data-studio-theme] .studio-legacy-help-panel{
    position: relative !important;
    padding: 36px !important;
    border-radius: 20px !important;
  }

  body[data-studio-theme] .studio-legacy-help-panel h2{
    color: var(--foreground) !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: -.02em !important;
    margin: 8px 0 24px !important;
  }

  body[data-studio-theme] .studio-legacy-help-eyebrow{
    color: var(--muted) !important;
    font-size: 12px !important;
    margin: 0 !important;
  }

  body[data-studio-theme] .studio-legacy-help-close{
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--muted) !important;
    cursor: pointer !important;
  }

  body[data-studio-theme] .studio-legacy-help-close:hover{
    background: rgb(var(--sc-foreground-rgb) / .06) !important;
    color: var(--foreground) !important;
  }

  body[data-studio-theme] .studio-legacy-help-steps{
    padding-left: 22px !important;
    margin: 0 !important;
    list-style: decimal !important;
  }

  body[data-studio-theme] .studio-legacy-help-steps li{
    padding-left: 4px !important;
    margin-bottom: 20px !important;
  }

  body[data-studio-theme] .studio-legacy-help-steps strong{
    color: var(--foreground) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
  }

  body[data-studio-theme] .studio-legacy-help-steps p{
    color: var(--muted) !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
    margin: 6px 0 0 !important;
  }

  body[data-studio-theme] .studio-legacy-help-confirm{
    width: 100% !important;
    min-height: 44px !important;
    padding: 12px 16px !important;
    margin-top: 8px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: var(--foreground) !important;
    color: var(--background) !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
  }

  body[data-studio-theme] .hamburger-line{
    background: var(--foreground) !important;
  }

  @media (max-width: 600px){
    body[data-studio-theme] .studio-legacy-help-panel{
      padding: 30px 24px !important;
    }
    body[data-studio-theme] .studio-legacy-wordmark{
      font-size: 16px !important;
    }
  }
}

/* The original message-template preview inherits this font from its editor. */
body[data-studio-page="text-story-create"] aside > div:not(:first-child) { font-family: "Noto Sans KR", -apple-system, BlinkMacSystemFont, sans-serif; }

/* Server-rendered payment and account result pages share the same readable surface. */
@layer studio-theme {
  body[data-studio-theme] > :is(.success-container, .fail-container, .error-container, .wrap) > p {
    color: var(--muted) !important;
  }
}