:root {
    --podcast-ink: #142b4e;
    --podcast-muted: #6b7d97;
    --podcast-line: #dfe8f3;
    --podcast-blue: #0b6ff2;
    --podcast-soft: #f4f8ff;
    --podcast-warm: #f07c56;
}

.podcast-app [hidden] { display: none !important; }
.podcast-app { background: #f7faff; }
.podcast-main { width: min(1180px, calc(100% - 80px)); padding-top: 20px; }
html body #creation-app.podcast-app .podcast-main { padding-top: 16px !important; }
.podcast-hero { display: flex; align-items: center; gap: 20px; margin: 0 0 30px; }
.podcast-hero-mark { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; gap: 3px; border-radius: 18px; background: #14345e; color: #fff; box-shadow: 0 8px 18px rgba(20, 52, 94, .16); }
.podcast-wave { width: 4px; height: 18px; border-radius: 3px; background: #8ed9db; }
.podcast-wave:nth-child(2) { height: 31px; background: #fff; }
.podcast-wave:nth-child(3) { height: 42px; background: #f7a27c; }
.podcast-wave:nth-child(4) { height: 26px; background: #fff; }
.podcast-wave:nth-child(5) { height: 14px; background: #8ed9db; }
.podcast-eyebrow { color: var(--podcast-blue); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.podcast-hero h1 { margin: 0; color: var(--podcast-ink); font-size: 30px; line-height: 1.2; }
.podcast-hero p { margin: 7px 0 0; color: var(--podcast-muted); font-size: 15px; }
.podcast-workspace-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 20px; align-items: start; }
.podcast-panel { min-width: 0; border: 1px solid var(--podcast-line); border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(43, 85, 135, .06); }
.podcast-input-panel { padding: 25px 26px 24px; }
.podcast-result-panel { min-height: 640px; padding: 25px 26px 24px; }
.podcast-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.podcast-panel-heading > div { display: flex; align-items: baseline; gap: 10px; }
.podcast-step { color: var(--podcast-blue); font-size: 12px; font-weight: 800; letter-spacing: .06em; }
.podcast-panel h2 { margin: 0; color: var(--podcast-ink); font-size: 20px; line-height: 1.25; }
.podcast-panel-hint { color: #93a1b5; font-size: 12px; }
.podcast-source-tabs { display: flex; gap: 20px; margin-bottom: 17px; border-bottom: 1px solid var(--podcast-line); }
.podcast-source-tabs button { min-height: 35px; padding: 0 1px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--podcast-muted); font-size: 14px; cursor: pointer; }
.podcast-source-tabs button.is-active { border-bottom-color: var(--podcast-blue); color: var(--podcast-blue); font-weight: 700; }
.podcast-label, .podcast-control > span { display: block; margin-bottom: 8px; color: #50627c; font-size: 13px; font-weight: 700; }
.podcast-source-pane textarea { width: 100%; min-height: 176px; padding: 14px; border: 1px solid #cfdae8; border-radius: 9px; outline: 0; resize: vertical; color: var(--podcast-ink); font: inherit; font-size: 14px; line-height: 1.65; background: #fbfdff; box-sizing: border-box; }
.podcast-source-pane textarea:focus { border-color: #75aaf4; box-shadow: 0 0 0 3px rgba(11, 111, 242, .1); }
.podcast-field-foot { display: flex; justify-content: space-between; margin-top: 7px; color: #9aa8ba; font-size: 12px; }
.podcast-sample { padding: 0; border: 0; background: transparent; color: var(--podcast-blue); cursor: pointer; font-size: 12px; }
.podcast-upload { min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 1px dashed #b6cae3; border-radius: 10px; color: var(--podcast-ink); background: #fbfdff; cursor: pointer; text-align: center; }
.podcast-upload:hover { border-color: var(--podcast-blue); background: var(--podcast-soft); }
.podcast-upload-icon { width: 35px; height: 35px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; background: var(--podcast-blue); font-size: 22px; font-weight: 300; }
.podcast-upload strong { font-size: 14px; }
.podcast-upload small { color: var(--podcast-muted); font-size: 12px; }
.podcast-file-name { margin: 10px 0 0; color: var(--podcast-blue); font-size: 13px; }
.podcast-settings-heading { display: flex; align-items: baseline; gap: 10px; margin: 23px 0 14px; }
.podcast-settings-heading h2 { font-size: 16px; }
.podcast-settings-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.podcast-control-wide { grid-column: span 2; }
.podcast-control select { min-height: 42px; }
.podcast-audio-native { display: none !important; }
.podcast-audio-download { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.podcast-control select { width: 100%; height: 41px; padding: 0 10px; border: 1px solid #cfdae8; border-radius: 8px; color: var(--podcast-ink); background: #fff; font: inherit; font-size: 13px; }
.podcast-control select:focus { outline: 2px solid rgba(11, 111, 242, .2); border-color: var(--podcast-blue); }
.podcast-checkbox { display: flex; align-items: center; gap: 9px; margin: 17px 0 21px; color: var(--podcast-muted); font-size: 13px; cursor: pointer; }
.podcast-checkbox input { position: absolute; opacity: 0; pointer-events: none; }
.podcast-checkbox span { width: 17px; height: 17px; border: 1px solid #b8c7da; border-radius: 4px; background: #fff; }
.podcast-checkbox input:checked + span { border-color: var(--podcast-blue); background: var(--podcast-blue); box-shadow: inset 0 0 0 3px #fff; }
.podcast-generate { width: 100%; gap: 8px; }
.podcast-button-icon { font-size: 17px; line-height: 1; }
.podcast-form-status { min-height: 18px; margin: 10px 0 0; color: var(--podcast-muted); font-size: 12px; text-align: center; }
.podcast-form-status[data-state="error"] { color: #d35c4e; }
.podcast-status-badge { padding: 4px 8px; border-radius: 5px; color: #75849a; background: #f1f5f9; font-size: 11px; font-weight: 700; }
.podcast-status-badge.is-ready { color: #12765e; background: #e8f7f1; }
.podcast-status-badge.is-working { color: #9c6413; background: #fff5dc; }
.podcast-empty { min-height: 520px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center; }
.podcast-empty-disc { width: 98px; height: 98px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #eaf2fc; }
.podcast-empty-bars { width: 54px; height: 38px; display: block; background: #7caef0; opacity: .85; clip-path: polygon(0 45%, 7% 45%, 7% 22%, 14% 22%, 14% 67%, 21% 67%, 21% 7%, 28% 7%, 28% 84%, 35% 84%, 35% 30%, 42% 30%, 42% 74%, 49% 74%, 49% 14%, 56% 14%, 56% 88%, 63% 88%, 63% 40%, 70% 40%, 70% 69%, 77% 69%, 77% 22%, 84% 22%, 84% 58%, 91% 58%, 91% 32%, 100% 32%, 100% 100%, 0 100%); }
.podcast-empty strong { margin-top: 22px; color: var(--podcast-ink); font-size: 16px; }
.podcast-empty p { max-width: 300px; margin: 8px 0 0; color: var(--podcast-muted); font-size: 13px; line-height: 1.55; }
.podcast-result { min-height: 520px; }
.podcast-result-title { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 13px; align-items: center; padding: 14px; border: 1px solid var(--podcast-line); border-radius: 10px; background: #fbfdff; }
.podcast-cover { width: 58px; height: 58px; position: relative; display: flex; align-items: center; justify-content: center; gap: 2px; overflow: hidden; border-radius: 9px; color: #fff; background: #15335c; font-size: 12px; font-weight: 800; }
.podcast-cover span { position: absolute; top: 7px; left: 8px; z-index: 1; font-size: 10px; }
.podcast-cover i { width: 3px; border-radius: 2px; background: #8ed9db; }
.podcast-cover i:nth-of-type(1) { height: 19px; }.podcast-cover i:nth-of-type(2) { height: 33px; background: #f7a27c; }.podcast-cover i:nth-of-type(3) { height: 25px; background: #fff; }
.podcast-result-title h3 { margin: 0; color: var(--podcast-ink); font-size: 16px; }.podcast-result-title p { margin: 5px 0 0; color: var(--podcast-muted); font-size: 12px; }
.podcast-icon-button { width: 32px; height: 32px; border: 1px solid #ccd9e8; border-radius: 7px; color: var(--podcast-blue); background: #fff; cursor: pointer; font-size: 16px; }
.podcast-icon-button:hover { border-color: var(--podcast-blue); background: var(--podcast-soft); }
.podcast-player { display: flex; align-items: center; gap: 12px; margin: 16px 0; padding: 13px 14px; border-radius: 10px; background: #14345e; color: #fff; }
.podcast-play { width: 36px; height: 36px; flex: 0 0 36px; border: 0; border-radius: 50%; color: #14345e; background: #fff; cursor: pointer; font-size: 14px; }
.podcast-track { min-width: 0; flex: 1; }.podcast-track-line { height: 4px; overflow: hidden; border-radius: 4px; background: rgba(255,255,255,.27); }.podcast-track-line span { display: block; width: 0; height: 100%; border-radius: inherit; background: #f7a27c; }.podcast-track-meta { display: flex; justify-content: space-between; margin-top: 6px; color: #b8cde8; font-size: 10px; }.podcast-speaker-mark { color: #8ed9db; font-size: 18px; }
.podcast-script { display: grid; gap: 10px; max-height: 310px; overflow: auto; padding: 2px 4px 2px 0; }
.podcast-line { padding: 11px 13px; border-left: 3px solid #8ed9db; border-radius: 0 8px 8px 0; background: #f6f9fd; }.podcast-line.is-host-b { border-left-color: #f7a27c; }.podcast-line strong { display: block; margin-bottom: 4px; color: var(--podcast-ink); font-size: 12px; }.podcast-line p { margin: 0; color: #536781; font-size: 13px; line-height: 1.58; }
.podcast-result-actions { display: flex; gap: 10px; margin-top: 17px; }.podcast-result-actions button { flex: 1; }
.podcast-note { margin: 17px 0 0; color: #8190a3; font-size: 12px; text-align: center; }
.podcast-app.is-generating .podcast-generate { opacity: .7; cursor: wait; }
@media (max-width: 980px) { .podcast-main { width: min(calc(100% - 42px), 760px); }.podcast-workspace-grid { grid-template-columns: 1fr; }.podcast-result-panel { min-height: 0; }.podcast-empty { min-height: 360px; } }
@media (max-width: 620px) { .podcast-main { width: calc(100% - 28px); padding-top: 14px; } html body #creation-app.podcast-app .podcast-main { padding-top: 12px !important; }.podcast-hero { align-items: flex-start; margin-bottom: 20px; }.podcast-hero-mark { width: 52px; height: 52px; border-radius: 14px; }.podcast-hero h1 { font-size: 26px; }.podcast-hero p { font-size: 14px; line-height: 1.5; }.podcast-input-panel, .podcast-result-panel { padding: 19px 16px; }.podcast-settings-grid { grid-template-columns: 1fr; gap: 13px; }.podcast-control-wide { grid-column: auto; }.podcast-result-title { grid-template-columns: 50px minmax(0, 1fr) auto; }.podcast-cover { width: 50px; height: 50px; }.podcast-result-actions { flex-direction: column; }.podcast-note { line-height: 1.5; } }

html[data-ui-theme="dark"] .podcast-app, body[data-ui-theme="dark"] .podcast-app { background: #111c2b; --podcast-ink: #eff5ff; --podcast-muted: #aebdd1; --podcast-line: #2e4057; --podcast-soft: #182a42; }
html[data-ui-theme="dark"] .podcast-panel, body[data-ui-theme="dark"] .podcast-panel { background: #17263a; box-shadow: none; }
html[data-ui-theme="dark"] .podcast-app[data-creation-page="ai-podcast"] .podcast-source-pane textarea,
body[data-ui-theme="dark"] .podcast-app[data-creation-page="ai-podcast"] .podcast-source-pane textarea,
html[data-ui-theme="dark"] .podcast-control select,
body[data-ui-theme="dark"] .podcast-control select,
html[data-ui-theme="dark"] .podcast-result-title,
body[data-ui-theme="dark"] .podcast-result-title { background: #122033; color: var(--podcast-ink); }
html[data-ui-theme="dark"] .podcast-app[data-creation-page="ai-podcast"] .podcast-upload,
body[data-ui-theme="dark"] .podcast-app[data-creation-page="ai-podcast"] .podcast-upload { background: #122033; }
html[data-ui-theme="dark"] .podcast-app[data-creation-page="ai-podcast"] .podcast-line,
body[data-ui-theme="dark"] .podcast-app[data-creation-page="ai-podcast"] .podcast-line { background: #1c3049; }
html[data-ui-theme="dark"] .podcast-app[data-creation-page="ai-podcast"] .podcast-line p,
body[data-ui-theme="dark"] .podcast-app[data-creation-page="ai-podcast"] .podcast-line p { color: #c0cedf; }