/* Interaction states, accessible controls, media previews and the evening palette. */
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.modal-open { overflow:hidden; }
.title-dot { color:#a5b951; }
.brand-ai { font-weight:500; margin-left:3px; color:#7b8870; }
.icon { pointer-events:none; }
.small-text { font-size:12px; }
.switch-input { appearance:none!important;position:relative;flex:none;width:42px!important;height:25px!important;min-height:25px!important;padding:0!important;border:1px solid var(--line-strong)!important;border-radius:30px!important;background:var(--surface-soft)!important;cursor:pointer;transition:background .2s; }
.switch-input::after { content:'';position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:var(--surface-strong);box-shadow:0 1px 4px #0002;transition:transform .2s; }
.switch-input:checked { background:#c7e965!important;border-color:#bbdb62!important; }
.switch-input:checked::after { transform:translateX(17px);background:#24331f; }
.switch-input:focus-visible { outline:3px solid #8fae48;outline-offset:4px; }
.model-avatar.lime { color:#526821;background:#eef6d5; }
.model-avatar.peach { color:#93684c;background:#f5e5d9; }
.model-avatar.mint { color:#39735e;background:#dfede5; }
.model-avatar.blue { color:#527188;background:#e4edf3; }
.model-avatar.pink { color:#936371;background:#f0e2e7; }
.visual-image.peach img { filter:sepia(.3) hue-rotate(330deg);transform:scale(1.25); }
.model-card { display:flex;flex-direction:column;padding:0; }
.model-visual { width:100%;flex-shrink:0; }
.model-card-body { display:flex;flex-direction:column;flex:1;width:100%; }
.model-description { flex:1; }
.visual-video img { object-position:70% center;filter:hue-rotate(28deg) saturate(.7); }
.visual-video.peach img { filter:sepia(.3); }
.visual-category { position:absolute;left:12px;bottom:11px;padding:4px 7px;font-size:10px;color:white;background:#18241c55;border:1px solid #ffffff28;border-radius:6px;backdrop-filter:blur(8px); }
.visual-play { display:grid;place-items:center;position:absolute;inset:0;margin:auto;width:39px;height:39px;background:#ffffff2b;color:white;border:1px solid #ffffff5c;border-radius:50%;backdrop-filter:blur(6px); }
.visual-play svg { width:16px;height:16px; }
.visual-music .visual-category,.visual-text .visual-category { color:#4b5b45;background:#ffffff45;border-color:#ffffff65; }
.visual-text::before { display:none; }
.text-orbit { display:grid;place-items:center;width:85px;height:85px;border:1px solid #ffffffa3;border-radius:50%;font-size:58px;color:#50694d;box-shadow:0 0 0 16px #ffffff24,0 0 0 32px #ffffff1a;transform:rotate(-12deg); }
.visual-text.blue { background:#dae3e5; }
.visual-text.peach { background:#f0d9c6; }
.model-visual .waveform { position:relative;inset:auto; }
.waveform { display:flex;align-items:center;justify-content:center;gap:3px;height:76px; }
.waveform i { display:block;width:3px;height:var(--h,26px);border-radius:5px;background:currentColor;opacity:.7; }
.visual-music { color:#77698c;background:#e9e1ed; }
.visual-music.mint { color:#528478;background:#d9e9e1; }
.work-thumbnail { width:100%;border:0;padding:0; }
.work-type { position:absolute;top:12px;left:12px;bottom:auto;right:auto;display:flex;align-items:center;gap:5px;padding:5px 8px;border-radius:7px;background:#ffffffde;color:#42533d;font-size:10px;backdrop-filter:blur(8px); }
.work-type svg { width:13px;height:13px; }
.sample-tag { position:absolute;bottom:10px;right:10px;top:auto;left:auto;padding:2px 6px;background:#ffffffc4;border-radius:4px;color:#5f6c5b;font-size:10px; }
.thumb-music { background:#e6e0ed;color:#877198; }
.thumb-music .waveform { width:100%;padding:10px; }
.music-disc { display:grid;place-items:center;position:absolute;width:47px;height:47px;border-radius:50%;background:#f8f4fa;box-shadow:0 0 0 8px #ffffff22;color:#806a8d; }
.music-disc svg { width:20px;height:20px; }
.text-preview { padding:24px;display:flex;flex-direction:column;gap:12px; }
.work-title { padding:0;border:0;background:transparent;text-align:left;display:block;max-width:100%; }
.work-meta { display:flex;align-items:center;justify-content:space-between;gap:8px; }
.work-meta>div { min-width:0; }
.work-info { justify-content:flex-start; }
.play-button { display:grid;place-items:center;width:48px;height:48px;border:1px solid #fff8;border-radius:50%;background:#ffffff38;color:#fff;backdrop-filter:blur(10px); }
.play-button svg { width:20px;height:20px; }
.work-thumbnail>.play-button { position:absolute;inset:0;margin:auto; }
.result-image { width:100%;max-height:390px;object-fit:cover;border-radius:15px; }
.result-meta { display:flex;align-items:center;gap:13px;flex-wrap:wrap;padding:17px 0;color:var(--muted-strong);font-size:12px; }
.result-meta>.badge { font-size:11px; }
.result-meta>span:last-child { margin-left:auto; }
.result-prompt { padding:18px;border:1px solid var(--line);border-radius:12px; }
.result-prompt .eyebrow { margin-bottom:8px;font-size:10px; }
.result-prompt p { font-size:13px;line-height:1.8;color:var(--muted-strong);overflow-wrap:anywhere; }
.result-video { position:relative;overflow:hidden;aspect-ratio:16/9;border-radius:15px;background:#25312b; }
.result-video>img { width:100%;height:100%;object-fit:cover; }
.result-video>.play-button { position:absolute;inset:0;margin:auto; }
.result-video.playing>img { animation:camera-pan 8s ease-in-out infinite alternate; }
@keyframes camera-pan { from{transform:scale(1.03) translateX(-1%);filter:hue-rotate(0deg)}to{transform:scale(1.2) translateX(3%);filter:hue-rotate(30deg)} }
.video-caption { position:absolute;bottom:14px;left:17px;font-size:11px;color:#fff9; }
.result-music { display:flex;position:relative;min-height:270px;overflow:hidden;flex-direction:column;align-items:center;justify-content:center;gap:12px;border-radius:15px;background:#e8e1ef;color:#786184;text-align:center;padding:30px 20px; }
.result-music>.waveform { position:absolute;inset:30px 0 auto;height:160px;opacity:.25;gap:7px; }
.result-music>.waveform i { width:5px;height:calc(var(--h)*2); }
.result-music>.play-button { position:relative;margin-bottom:7px;width:62px;height:62px;background:#796284;color:white; }
.result-music h3,.result-music p { position:relative;max-width:440px; }
.result-music h3 { color:#685172;font-size:20px; }
.result-music p { font-size:12px; }
.result-music.playing .waveform i { animation:wave-pulse 1s calc(var(--i)*-.06s) ease-in-out infinite alternate; }
@keyframes wave-pulse { to{transform:scaleY(.35);opacity:.5} }
.result-text { padding:24px;background:var(--surface-soft);border-radius:14px;font-size:14px;line-height:1.9; }
.demo-notice { display:flex;align-items:flex-start;gap:9px;padding:14px 0 0;color:var(--muted-strong);font-size:11px;line-height:1.7; }
.demo-notice>svg { margin-top:1px;width:16px;height:16px;flex-shrink:0; }
.demo-notice p { margin:0; }
.attachment-chip { display:inline-flex;align-items:center;gap:6px;padding:5px 8px;margin:0 0 13px;border:1px solid var(--line);border-radius:7px;max-width:100%;font-size:11px;overflow-wrap:anywhere; }
.attachment-chip>svg { width:14px;height:14px; }
.attachment-chip button { display:flex;align-items:center;background:transparent;padding:0;color:var(--muted); }
.attachment-chip button svg { width:14px;height:14px; }
.parameter-options { display:grid;gap:18px; }
.notification-empty { text-align:center;padding:16px 0 24px; }
.notification-empty>svg { width:42px;height:42px;color:#a5b388;margin-bottom:20px; }
.notification-empty h3 { font-size:21px;margin-bottom:10px; }
.notification-empty p { font-size:13px;color:var(--muted-strong);line-height:1.8; }
.insufficient-art { display:grid;place-items:center;width:64px;height:64px;margin:0 auto 22px;background:var(--lime-soft);border-radius:20px; }
.insufficient-art svg { width:28px;height:28px; }
.support-input { width:100%;resize:vertical; }
#support-form>.button { margin-top:20px; }
:root:not([data-theme="dark"]) .model-description,:root:not([data-theme="dark"]) .page-subtitle,:root:not([data-theme="dark"]) .section-subtitle { color:#697362; }
:root:not([data-theme="dark"]) .work-info,:root:not([data-theme="dark"]) .model-meta small,:root:not([data-theme="dark"]) .prompt-chip { color:#748065; }
.hero-copy>p { color:#c0c9b9; }
.hero-chips span { color:#d9e0d0; }
.reduce-motion *, .reduce-motion *::before,.reduce-motion *::after { animation:none!important;transition:none!important;scroll-behavior:auto!important; }
:root[data-theme="dark"] { --canvas:#12191a;--surface:#1b2425;--surface-strong:#263233;--surface-soft:#222e2e;--ink:#eef2e8;--ink-deep:#eef2e8;--muted:#a3b09c;--muted-strong:#bdc8b6;--line:#34413e;--line-strong:#52624c;--lime-soft:#344329;color-scheme:dark; }
[data-theme="dark"] .sidebar { background:#151e1e;border-color:#2c3734; }
[data-theme="dark"] .workspace { background:radial-gradient(ellipse 720px 500px at 75% 0, #c4f56107, transparent 80%); }
[data-theme="dark"] .studio-hero { border:1px solid #b5d94d30;box-shadow:0 18px 70px -30px #bad5502b; }
[data-theme="dark"] .creation-panel { box-shadow:0 16px 50px -25px #0008,0 0 0 1px #eaffb503; }
[data-theme="dark"] .creation-panel:focus-within { border-color:#96b94a80;box-shadow:0 0 0 3px #c1f06608,0 16px 50px -25px #0008; }
[data-theme="dark"] .model-card:hover { border-color:#acc66588;box-shadow:0 10px 35px -18px #c4e87138; }
[data-theme="dark"] .nav-item { color:#aebba7; }
[data-theme="dark"] .nav-item:hover { background:#2d382a; }
[data-theme="dark"] .nav-item.active { background:#d7f76b;color:#23301b; }
[data-theme="dark"] .nav-item.active svg { color:#344725; }
[data-theme="dark"] .nav-caption,[data-theme="dark"] .brand-tag,[data-theme="dark"] .eyebrow { color:#b0bd9c; }
[data-theme="dark"] .sidebar-create,[data-theme="dark"] .upgrade-card { background:#2b3826;border-color:#445738;color:#d6e7c2; }
[data-theme="dark"] .upgrade-card p { color:#b4c0a8; }
[data-theme="dark"] .upgrade-card a { color:#d9eead; }
[data-theme="dark"] .upgrade-card::after { border-color:#53673c; }
[data-theme="dark"] .credit-pill,[data-theme="dark"] .button.secondary,[data-theme="dark"] .model-select,[data-theme="dark"] .mode-badge,[data-theme="dark"] .prompt-tools button,[data-theme="dark"] .modal,[data-theme="dark"] .input,[data-theme="dark"] .select,[data-theme="dark"] .field input,[data-theme="dark"] .field select,[data-theme="dark"] .field textarea,[data-theme="dark"] .search-box { background:var(--surface);color:var(--ink);border-color:var(--line); }
[data-theme="dark"] .button.dark { background:#d7f76b;color:#23301b;border-color:#d7f76b; }
[data-theme="dark"] .model-card,[data-theme="dark"] .work-card,[data-theme="dark"] .panel,[data-theme="dark"] .creation-panel,[data-theme="dark"] .plan-card,[data-theme="dark"] .package-card,[data-theme="dark"] .stat-card,[data-theme="dark"] .chat-main { background:var(--surface);border-color:var(--line); }
[data-theme="dark"] .model-description,[data-theme="dark"] .model-provider,[data-theme="dark"] .work-info,[data-theme="dark"] .page-subtitle,[data-theme="dark"] .section-subtitle,[data-theme="dark"] .model-meta small,[data-theme="dark"] .faq-list p,[data-theme="dark"] .setting-row small,[data-theme="dark"] .modal-lead { color:#b2bea8; }
[data-theme="dark"] .category-tab { background:var(--surface);border-color:var(--line);color:#c1ccb6; }
[data-theme="dark"] .category-tab.active { background:#d7f76b;border-color:#d7f76b;color:#27371b; }
[data-theme="dark"] .category-tab.active small { color:#54663b; }
[data-theme="dark"] .category-tab small,[data-theme="dark"] .prompt-input::placeholder,[data-theme="dark"] .prompt-chip { color:#9fad94; }
[data-theme="dark"] .prompt-chip:hover { background:#34422d;border-color:#70865a; }
[data-theme="dark"] .work-title,[data-theme="dark"] .plan-card h2,[data-theme="dark"] .plan-price,[data-theme="dark"] .package-credits,[data-theme="dark"] .package-price,[data-theme="dark"] .stat-card strong,[data-theme="dark"] .faq-list summary,[data-theme="dark"] .profile-summary h2,[data-theme="dark"] .settings-title,[data-theme="dark"] .message-content,[data-theme="dark"] .modal-header h2 { color:#e0e9d8; }
[data-theme="dark"] .plan-card.featured,[data-theme="dark"] .package-card.featured,[data-theme="dark"] .model-option.selected,[data-theme="dark"] .pack-selector button.selected,[data-theme="dark"] .payment-method.selected { background:#304126;border-color:#8ba957; }
[data-theme="dark"] .badge,[data-theme="dark"] .tag,[data-theme="dark"] .notice,[data-theme="dark"] .demo-badge,[data-theme="dark"] .order-summary { background:#314029;border-color:#485e38;color:#c1d6a7; }
[data-theme="dark"] .modal-header,[data-theme="dark"] .modal-footer,[data-theme="dark"] .transaction-row,[data-theme="dark"] .faq-list details,[data-theme="dark"] .setting-row { border-color:var(--line); }
[data-theme="dark"] .model-option,[data-theme="dark"] .payment-method,[data-theme="dark"] .pack-selector button { background:var(--surface);border-color:var(--line);color:var(--ink); }
[data-theme="dark"] .model-option-info>span,[data-theme="dark"] .payment-method small { color:#a7b59a; }
[data-theme="dark"] .chat-sidebar,[data-theme="dark"] .chat-header,[data-theme="dark"] .chat-composer,[data-theme="dark"] .help-card,[data-theme="dark"] .pricing-note { background:var(--surface-soft);border-color:var(--line); }
[data-theme="dark"] .chat-composer textarea,[data-theme="dark"] .search-box input { color:var(--ink); }
[data-theme="dark"] .chat-empty h2,[data-theme="dark"] .help-card h2 { color:#dceacb; }
[data-theme="dark"] .message.user .message-content { background:#34442b; }
[data-theme="dark"] .breadcrumbs>strong { color:#c7d1bb; }
[data-theme="dark"] .avatar { background:#415333;color:#d9edbd; }
[data-theme="dark"] .model-title h3,[data-theme="dark"] .section-heading h2,[data-theme="dark"] .page-title,[data-theme="dark"] .settings-title h2,[data-theme="dark"] .help-card h2 { color:#e8efdf; }
[data-theme="dark"] .model-provider,[data-theme="dark"] .model-price,[data-theme="dark"] .work-info,[data-theme="dark"] .transaction-name,[data-theme="dark"] .profile-balance { color:#b7c4a8; }
[data-theme="dark"] .icon-btn,[data-theme="dark"] .notification-btn { background:#222d2b;border-color:#34413a;color:#b9c6ab; }
[data-theme="dark"] .profile-btn,[data-theme="dark"] .workspace-footer { border-color:#2c3933; }
[data-theme="dark"] .profile-btn strong { color:#d9e2ce; }
[data-theme="dark"] .stat-icon,[data-theme="dark"] .plan-icon { background:#34432b;color:#d7f76b; }
[data-theme="dark"] .plan-stars,[data-theme="dark"] .plan-features,[data-theme="dark"] .plan-card p,[data-theme="dark"] .plan-card>p,[data-theme="dark"] .package-card>p,[data-theme="dark"] .package-name,[data-theme="dark"] .package-price small,[data-theme="dark"] .package-cta,[data-theme="dark"] .help-card p,[data-theme="dark"] .faq-list p,[data-theme="dark"] .setting-row small { color:#acbba1; }
[data-theme="dark"] .chat-suggestions button,[data-theme="dark"] .conversation-item.active { color:#d0dfbc;background:#34432b;border-color:#536343; }
[data-theme="dark"] .chat-sidebar-hint,[data-theme="dark"] .chat-empty p,[data-theme="dark"] .chat-disclaimer,[data-theme="dark"] .model-option-info em,[data-theme="dark"] .model-option-info strong small { color:#a0b292; }
@media(max-width:650px){
 .result-meta { gap:9px;font-size:11px; }.result-meta>span:last-child { margin-left:0; }.result-prompt { padding:14px; }.result-prompt p { font-size:12px; }
 .modal-footer { flex-wrap:wrap; }.modal-footer>.button { flex:1;min-width:130px;font-size:12px; }
 .waveform { gap:2px; }.result-music .waveform { gap:4px; }.result-music .waveform i { width:3px; }
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;}}
