/* Letzte Cleaning Prüfung: 23.09.2026 */
/* Letztes Cleaning: 21.09.2026 */

.control-center-section{padding:54px 0 30px;border-top:1px solid #20222b}.factory-control-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.control-tool{position:relative;display:flex;min-height:148px;padding:18px;border:1px solid #292c37;border-radius:14px;background:linear-gradient(145deg,#14151d,#101117);color:#f7f7fa;text-align:left;cursor:pointer;transition:.18s ease}.control-tool:hover{transform:translateY(-2px);border-color:#ff3656;box-shadow:0 12px 28px rgba(0,0,0,.22)}.control-tool i{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;margin-right:14px;border-radius:10px;background:#32131d;color:#ff3656;font-size:20px}.control-tool strong{display:block;margin:2px 0 7px;font-size:13px}.control-tool small{display:block;color:#9296a7;font-size:11px;line-height:1.5}.control-tool b{position:absolute;right:14px;top:14px;color:#565b6b;font-size:10px}.cc-shell{max-width:930px;margin:auto;font-size:13px;line-height:1.45}.cc-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:18px}.cc-input,.cc-select,.cc-textarea{box-sizing:border-box;width:100%;border:1px solid #343744;border-radius:9px;background:#171922;color:#f7f7fa;padding:11px 13px;font:inherit}.cc-toolbar .cc-input,.cc-toolbar .cc-select{width:auto;min-width:180px}.cc-button{border:1px solid #3a3e4b;border-radius:9px;background:#1a1c25;color:#fff;padding:10px 14px;font-weight:700;cursor:pointer}.cc-button.primary{border-color:#ff284c;background:#ff284c;color:#090a0e}.cc-button:disabled{opacity:.5;cursor:wait}.cc-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:15px 0}.cc-metric,.cc-card{border:1px solid #292c37;border-radius:12px;background:#13141b;padding:15px}.cc-metric small{display:block;color:#858a9c;margin-bottom:8px}.cc-metric strong{font-size:24px}.cc-list{display:grid;gap:9px}.cc-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;border:1px solid #292c37;border-radius:11px;padding:11px;background:#12131a}.cc-row img{width:72px;aspect-ratio:16/9;object-fit:cover;border-radius:7px}.cc-row strong,.cc-row small{display:block}.cc-row small,.cc-muted{color:#878c9d}.cc-score{font-size:24px;color:#ff3656}.cc-progress{height:7px;border-radius:9px;background:#282b35;overflow:hidden}.cc-progress span{display:block;height:100%;background:#ff284c}.cc-empty,.cc-loading{padding:42px;text-align:center;color:#9196a7}.cc-chart{display:flex;align-items:flex-end;gap:3px;height:150px;padding-top:15px}.cc-chart span{flex:1;min-width:3px;background:linear-gradient(#ff3656,#72152a);border-radius:3px 3px 0 0}.cc-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.cc-form-grid .wide{grid-column:1/-1}.cc-pill{display:inline-flex;padding:4px 8px;border-radius:20px;background:#27131a;color:#ff6b83;font-size:11px}.cc-actions{display:flex;gap:8px;justify-content:flex-end}.factory-sidebar-control-group{border-top:1px solid #22242d;margin-top:10px;padding-top:10px}.factory-sidebar-control-group h3{color:#626778;font-size:9px;letter-spacing:.13em;text-transform:uppercase;padding:4px 15px}.factory-sidebar-control{display:flex;width:100%;align-items:center;gap:10px;border:0;background:transparent;color:#8d92a2;padding:8px 14px;text-align:left;cursor:pointer}.factory-sidebar-control:hover{color:#fff;background:#15161d}.factory-sidebar-control i{color:#ff3656}.factory-sidebar-control span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}@media(max-width:1000px){.factory-control-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.factory-control-grid,.cc-metrics,.cc-form-grid{grid-template-columns:1fr}.cc-form-grid .wide{grid-column:auto}}

.control-tool-group{margin:0 0 34px}.control-tool-group>header{display:flex;align-items:center;gap:11px;margin:0 0 12px}.control-tool-group>header>span{display:grid;place-items:center;width:34px;height:34px;border:1px solid #34232a;border-radius:9px;background:#1d1117;color:#ff3656}.control-tool-group>header h3{margin:0 0 2px;font-size:15px}.control-tool-group>header small{color:#686e7e;font-size:10px}.control-tool-group .factory-control-grid{gap:12px}.control-tool-group .control-tool{min-height:112px;padding:15px;border-radius:12px;text-align:left}.control-tool-group .control-tool>i{width:34px;height:34px;flex-basis:34px;margin-right:11px;border-radius:9px;font-size:18px}.control-tool-group .control-tool strong{font-size:12px}.control-tool-group .control-tool small{font-size:10px;line-height:1.42}.factory-sidebar-control-group{margin-top:7px;padding-top:7px}.factory-sidebar-control-group h3{margin:0;padding:6px 10px}.factory-sidebar-control{border-radius:8px;padding:7px 10px;font:600 11px/1.25 'DM Sans'}.factory-sidebar-control:hover{background:#181b24}.factory-sidebar-control i{width:19px;flex:none;text-align:center;font-size:16px}

#factory-control-tools{display:block}.control-tool-group .factory-control-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0;width:100%;padding-top:7px}.control-tool-group .control-tool{box-sizing:border-box;display:grid;grid-template-columns:42px minmax(0,1fr) 18px;align-items:center;gap:12px;width:100%;min-width:0;height:82px;min-height:82px;padding:12px 14px;border:0;border-bottom:1px solid #1e212a;border-radius:9px;background:transparent;text-align:left}.control-tool-group .control-tool::after{content:'\F0142';color:#596171;font:normal normal normal 19px/1 'Material Design Icons';transition:color .16s ease,transform .16s ease}.control-tool-group .control-tool:hover{transform:translateX(3px);border-color:#1e212a;background:#15171f;box-shadow:none}.control-tool-group .control-tool:hover::after{color:#ff304f;transform:translateX(2px)}.control-tool-group .control-tool>i{width:42px;height:42px;flex-basis:42px;margin:0;border:1px solid #3a1d26;border-radius:11px;background:#28131a;font-size:20px}.control-tool-group .control-tool span{min-width:0}.control-tool-group .control-tool strong{margin:0 0 5px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.control-tool-group .control-tool small{font-size:10px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.control-tool-group{margin-bottom:30px}.control-tool-group>header{display:flex;align-items:center;min-height:36px;padding:0 4px 10px;margin:0;border-bottom:1px solid #252832}.control-tool-group>header>span{display:none}.control-tool-group>header>div{display:flex;align-items:center;gap:9px}.control-tool-group>header h3{margin:0;color:#f4f5f8;font:650 13px/1.2 'Space Grotesk',sans-serif}.control-tool-group>header small{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#1b1d25;color:#777e8e;font-size:9px}.control-tool-group>header small::first-letter{font-size:9px}@media(max-width:650px){.control-tool-group .control-tool{height:82px;min-height:82px}.control-tool-group .control-tool small{display:-webkit-box;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}}

.cc-focus-card{padding:20px;background:linear-gradient(135deg,#1b1118,#12131a)}.cc-focus-card h3{margin:10px 0 14px}.cc-focus-card .cc-select{width:100%}.cc-optimizer-head{display:flex;align-items:center;gap:18px;margin:8px 0 18px}.cc-optimizer-head h3{margin:8px 0 5px}.cc-optimizer-head a{color:#ff667e;font-size:12px}.cc-score-ring{display:grid;place-items:center;width:82px;height:82px;flex:0 0 82px;border-radius:50%;background:radial-gradient(circle,#11131a 58%,transparent 60%),conic-gradient(#ff284c calc(var(--score)*1%),#292c36 0)}.cc-score-ring strong{font-size:25px}.cc-score-ring small{margin-top:-18px;color:#7f8493;font-size:9px}.cc-optimizer-columns{display:grid;grid-template-columns:.9fr 1.1fr;gap:12px;margin:12px 0}.cc-youtube-preview{display:grid;gap:7px;margin-top:12px}.cc-youtube-preview img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:9px}.cc-youtube-preview strong{font-size:13px}.cc-youtube-preview small{color:#7f8493}.cc-recommendation{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px;border:1px solid #282b35;border-radius:9px;background:#101117}.cc-recommendation>i{color:#ff3656}.cc-recommendation strong,.cc-recommendation small{display:block}.cc-recommendation small{color:#8e93a2;line-height:1.4}.cc-competitor-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px}.cc-competitor-head img{width:42px;height:42px;border-radius:50%}.cc-competitor-head strong,.cc-competitor-head small{display:block}.cc-competitor-head small{color:#878c9d}.cc-outliers{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}.cc-outliers a{padding:10px;border:1px solid #282b35;border-radius:8px;color:#fff;text-decoration:none}.cc-outliers strong,.cc-outliers small{display:block}.cc-outliers strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.cc-outliers small{margin-top:5px;color:#ff667e;font-size:9px}.cc-coach-intro{display:flex;gap:14px;align-items:center;margin-bottom:16px;padding:18px;border:1px solid #3b202a;border-radius:12px;background:linear-gradient(135deg,#211119,#12131a)}.cc-coach-intro>i{font-size:30px;color:#ff3656}.cc-coach-intro strong,.cc-coach-intro small{display:block}.cc-coach-intro small{margin-top:4px;color:#8e93a2}.cc-coach-result{margin-top:16px}.cc-action-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}@media(max-width:750px){.cc-optimizer-columns{grid-template-columns:1fr}.cc-outliers{grid-template-columns:1fr}}
.cc-optimizer-summary{display:flex;align-items:center;gap:20px;margin:18px 0;padding:20px;border:1px solid #3b202a;border-radius:14px;background:linear-gradient(135deg,#211119,#12131a)}.cc-optimizer-summary h3{margin:7px 0 5px;font-size:22px}.cc-optimizer-summary p{max-width:660px;margin:0 0 8px;color:#a0a4b2;line-height:1.55}.cc-optimizer-summary>div>small{color:#737888}.cc-optimizer-title{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:22px 0 12px}.cc-optimizer-title span{color:#ff6079;font-size:9px;font-weight:800;letter-spacing:.14em}.cc-optimizer-title h3{margin:5px 0 0}.cc-optimizer-scores{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}.cc-optimizer-scores article{display:flex;align-items:center;gap:10px;min-height:66px;padding:12px;border:1px solid #292c37;border-radius:11px;background:#13141b}.cc-optimizer-scores article>i{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:#25141b;color:#ff3656;font-size:17px}.cc-optimizer-scores small,.cc-optimizer-scores strong{display:block}.cc-optimizer-scores small{margin-bottom:4px;color:#878c9d;font-size:10px}.cc-optimizer-scores strong{font-size:19px}.cc-optimizer-scores em{margin-left:2px;color:#686d7c;font-size:9px;font-style:normal}.cc-optimizer-scores .good{border-color:#174f39}.cc-optimizer-scores .medium{border-color:#665020}.cc-optimizer-scores .weak{border-color:#6b2131}.cc-optimizer-scores .unavailable{opacity:.65}.cc-recommendation em{display:block;margin-top:5px;color:#ff7187;font-size:9px;font-style:normal}.cc-recommendation.info>i{color:#8990a2}.cc-method-note{display:flex;gap:7px;margin:12px 0 0;color:#7e8392;font-size:10px;line-height:1.5}.cc-retention-card>div:first-child{display:flex;justify-content:space-between}.cc-retention-card>div:first-child small{color:#7e8392}@media(max-width:900px){.cc-optimizer-scores{grid-template-columns:repeat(2,1fr)}}@media(max-width:750px){.cc-optimizer-summary{align-items:flex-start}.cc-optimizer-title{align-items:flex-start;flex-direction:column}.cc-optimizer-scores{grid-template-columns:1fr}}
.analytics-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px}.analytics-toolbar h3{margin:7px 0 4px;font-size:23px}.analytics-toolbar>div>small{color:#858a9b}.analytics-toolbar>div:last-child{display:flex;align-items:flex-end;gap:9px}.analytics-toolbar label{display:grid;gap:5px;color:#858a9b;font-size:10px}.analytics-toolbar .cc-select{min-width:120px}.analytics-warning{display:flex;align-items:center;gap:12px;margin:14px 0;padding:14px;border:1px solid #713044;border-radius:11px;background:#211118}.analytics-warning>i{color:#ff3656;font-size:22px}.analytics-warning span{flex:1}.analytics-warning strong,.analytics-warning small{display:block}.analytics-warning small{margin-top:4px;color:#999eac}.analytics-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.analytics-metrics article{display:grid;grid-template-columns:auto 1fr;column-gap:9px;align-items:center;padding:15px;border:1px solid #292c37;border-radius:12px;background:#13141b}.analytics-metrics article>i{grid-row:1/3;display:grid;place-items:center;width:36px;height:36px;border-radius:9px;background:#32131d;color:#ff3656;font-size:18px}.analytics-metrics article>small{color:#858a9b;font-size:10px}.analytics-metrics article>strong{font-size:22px}.analytics-metrics .analytics-delta{grid-column:1/-1;margin-top:12px}.analytics-delta.up{color:#3fd69b}.analytics-delta.down{color:#ff6b82}.analytics-delta.neutral{color:#777c8b}.analytics-insight{display:flex;align-items:center;gap:14px;margin:12px 0;padding:16px;border:1px solid #245742;border-radius:12px;background:#0f201a}.analytics-insight.negative{border-color:#713044;background:#211118}.analytics-insight.learning{border-color:#665020;background:#241d10}.analytics-insight>i{font-size:25px;color:#42d69e}.analytics-insight.negative>i{color:#ff5e78}.analytics-insight.learning>i{color:#e5ae42}.analytics-insight small,.analytics-insight strong{display:block}.analytics-insight small{color:#9297a5;font-size:9px;letter-spacing:.12em}.analytics-insight strong{margin:4px 0}.analytics-insight p{margin:0;color:#858a99;font-size:11px}.analytics-chart-card{margin-top:12px;padding:18px;border:1px solid #292c37;border-radius:13px;background:#13141b}.analytics-chart-card header{display:flex;justify-content:space-between;align-items:flex-end}.analytics-chart-card header small{color:#ff6079;font-size:9px;letter-spacing:.13em}.analytics-chart-card h3{margin:4px 0 0}.analytics-chart-card header>span{color:#777c8a;font-size:10px}.analytics-chart{display:flex;align-items:flex-end;gap:4px;height:210px;margin-top:18px;padding:0 2px;border-bottom:1px solid #313440}.analytics-chart span{flex:1;min-width:3px;border-radius:4px 4px 0 0;background:linear-gradient(180deg,#ff4260,#79182c);transition:.15s}.analytics-chart span:hover{filter:brightness(1.25)}.analytics-method{margin-top:12px}@media(max-width:850px){.analytics-metrics{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.analytics-toolbar{align-items:flex-start;flex-direction:column}.analytics-toolbar>div:last-child{width:100%}.analytics-metrics{grid-template-columns:1fr}.analytics-chart{height:150px}}
.analytics-warning-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.analytics-warning-actions .cc-button{white-space:nowrap;text-decoration:none}@media(max-width:750px){.analytics-warning{align-items:flex-start;flex-wrap:wrap}.analytics-warning-actions{width:100%;justify-content:flex-start}}


.trend-intro{display:flex;align-items:center;gap:16px;padding:19px 20px;border:1px solid #44202c;border-radius:14px;background:linear-gradient(135deg,#251019,#12131a)}.trend-intro>span{display:grid;place-items:center;width:52px;height:52px;flex:0 0 52px;border-radius:14px;background:#3b1220;color:#ff3656;font-size:25px}.trend-intro small,.trend-summary .cc-pill{font-size:9px;font-weight:800;letter-spacing:.14em}.trend-intro h3,.trend-summary h3{margin:5px 0 4px;font-size:22px}.trend-intro p,.trend-summary p{margin:0;color:#9297a7;font-size:12px;line-height:1.5}.trend-form{display:grid;grid-template-columns:minmax(240px,2fr) repeat(3,minmax(120px,1fr)) auto;align-items:end;gap:10px;margin:14px 0 18px;padding:14px;border:1px solid #292c37;border-radius:12px;background:#12131a}.trend-form label{display:grid;gap:6px;color:#a7abba;font-size:10px;font-weight:700}.trend-form .cc-button{height:42px;white-space:nowrap}.trend-summary{padding:4px 2px}.trend-quality{display:flex;align-items:center;gap:12px;margin:14px 0;padding:13px 15px;border:1px solid #3b3d49;border-radius:11px;background:#12131a}.trend-quality>i{font-size:23px}.trend-quality strong,.trend-quality small{display:block}.trend-quality small{margin-top:3px;color:#8d92a2}.trend-quality.reliable{border-color:#19563d;background:#0d1c16}.trend-quality.reliable>i{color:#3edb91}.trend-quality.learning{border-color:#6e4a20;background:#20180e}.trend-quality.learning>i{color:#f1ad4d}.trend-patterns{margin:18px 0}.trend-patterns>small{display:block;margin-bottom:8px;color:#ff5570;font-size:9px;font-weight:800;letter-spacing:.13em}.trend-patterns>div{display:flex;flex-wrap:wrap;gap:7px}.trend-patterns span{padding:7px 10px;border:1px solid #313440;border-radius:999px;background:#151720;color:#c8cad2;font-size:10px}.trend-patterns b{color:#ff5570}.trend-results>header{display:flex;align-items:end;justify-content:space-between;margin:20px 0 10px}.trend-results h3{margin:0}.trend-results>header small{color:#818697}.trend-result{display:grid;grid-template-columns:128px minmax(0,1fr) auto auto;align-items:center;gap:14px;margin-bottom:9px;padding:10px;border:1px solid #292c37;border-radius:12px;background:#12131a}.trend-result.breakout{border-color:#6a2333;background:linear-gradient(90deg,#1c1117,#12131a 42%)}.trend-result img,.trend-placeholder{width:128px;aspect-ratio:16/9;object-fit:cover;border-radius:8px}.trend-placeholder{display:grid;place-items:center;background:#1b1d25;color:#ff3656;font-size:24px}.trend-result-copy>div{display:flex;align-items:center;gap:8px}.trend-result-copy h4{margin:6px 0 5px;font-size:13px}.trend-result-copy p{margin:0;color:#858a9a;font-size:10px}.trend-signal{padding:3px 7px;border-radius:999px;background:#30141c;color:#ff5771;font-size:8px;font-weight:800;text-transform:uppercase}.trend-result-copy>div small{color:#777d8e;font-size:9px}.trend-scores{display:grid;grid-template-columns:repeat(3,58px);gap:5px}.trend-scores span{padding:7px 5px;border-left:1px solid #292c37;text-align:center}.trend-scores strong,.trend-scores small{display:block}.trend-scores strong{font-size:14px}.trend-scores small{margin-top:3px;color:#777d8e;font-size:7px;text-transform:uppercase}@media(max-width:900px){.trend-form{grid-template-columns:1fr 1fr}.trend-query{grid-column:1/-1}.trend-result{grid-template-columns:100px minmax(0,1fr) auto}.trend-result img,.trend-placeholder{width:100px}.trend-scores{grid-column:2/-1;justify-content:start}}@media(max-width:600px){.trend-form{grid-template-columns:1fr}.trend-query{grid-column:auto}.trend-result{grid-template-columns:80px minmax(0,1fr)}.trend-result img,.trend-placeholder{width:80px}.trend-result>a{position:absolute;right:10px}.trend-scores{grid-column:1/-1}.trend-intro{align-items:flex-start}}
.trend-decision{display:flex;align-items:center;gap:14px;margin:14px 0;padding:16px 18px;border:1px solid #393c48;border-radius:12px;background:#12131a}.trend-decision>i{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border-radius:11px;background:#252833;color:#a5a9b7;font-size:21px}.trend-decision small{color:#ff5871;font-size:8px;font-weight:800;letter-spacing:.14em}.trend-decision h3{margin:4px 0 3px;font-size:17px}.trend-decision p{margin:0;color:#9499a8;font-size:11px;line-height:1.45}.trend-decision.produce_now{border-color:#195b3f;background:#0d1b15}.trend-decision.produce_now>i{background:#123c2b;color:#45dc94}.trend-decision.watch_and_test{border-color:#6b4a20;background:#20180e}.trend-decision.watch_and_test>i{background:#3b2912;color:#f2b253}.trend-result.rising{border-color:#61451f}.trend-result.baseline{opacity:.82}
.audit-hero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px;padding:22px;border:1px solid #44202c;border-radius:15px;background:linear-gradient(135deg,#251019,#12131a 60%)}.audit-score{display:grid;place-items:center;width:92px;height:92px;border-radius:50%;background:radial-gradient(circle,#12131a 58%,transparent 60%),conic-gradient(#ff3656 calc(var(--score)*1%),#292c36 0)}.audit-score strong{font-size:27px}.audit-score small{margin-top:-22px;color:#7f8493}.audit-hero h2{margin:7px 0 5px}.audit-hero p{max-width:670px;margin:0;color:#959aa9;line-height:1.5}.audit-kpis>.cc-metrics{margin:13px 0}.audit-priorities{margin:20px 0}.audit-priorities>header,.audit-checks>header{display:flex;align-items:end;justify-content:space-between;margin-bottom:10px}.audit-priorities header small{color:#ff5871;font-size:8px;font-weight:800;letter-spacing:.14em}.audit-priorities h3,.audit-checks h3{margin:5px 0 0}.audit-priorities header em,.audit-checks header small{color:#7f8493;font-size:10px;font-style:normal}.audit-priorities article{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:13px;padding:13px 14px;border:1px solid #30333e;border-radius:11px;background:#12131a}.audit-priorities article+article{margin-top:8px}.audit-priorities article>b{display:grid;place-items:center;width:31px;height:31px;border-radius:9px;background:#33131d;color:#ff4f6b}.audit-priorities article strong,.audit-priorities article small{display:block}.audit-priorities article small{margin-top:3px;color:#898e9e}.audit-priorities article span>i{display:block;height:3px;margin-top:8px;border-radius:4px;background:#292c36}.audit-priorities article span>i>span{display:block;height:100%;border-radius:4px;background:#ff3656}.audit-strengths{margin:16px 0}.audit-strengths>small{color:#49d99a;font-size:8px;font-weight:800;letter-spacing:.14em}.audit-strengths>div{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}.audit-strengths span{padding:7px 10px;border:1px solid #235b44;border-radius:999px;background:#0e1d17;color:#ccebdd;font-size:10px}.audit-strengths i{margin-right:5px;color:#49d99a}.audit-checks{margin-top:22px}.audit-checks>div{display:grid;grid-template-columns:1fr 1fr;gap:8px}.audit-checks article{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:13px;border:1px solid #2b2e38;border-radius:10px;background:#12131a}.audit-checks article>i{font-size:20px;color:#ff5c75}.audit-checks article.good>i{color:#43d798}.audit-checks article.improve>i{color:#efb14d}.audit-checks strong,.audit-checks small{display:block}.audit-checks small{margin-top:3px;color:#858a99}.audit-checks article>b{color:#aeb2bf;font-size:11px}.audit-note{margin-top:16px}@media(max-width:750px){.audit-hero{grid-template-columns:auto 1fr}.audit-hero>.cc-button{grid-column:1/-1}.audit-checks>div{grid-template-columns:1fr}.audit-priorities article{grid-template-columns:auto 1fr}.audit-priorities article>.cc-button{grid-column:2;justify-self:start}}
.feedback-hero{display:flex;align-items:center;gap:16px;padding:20px;border:1px solid #44202c;border-radius:14px;background:linear-gradient(135deg,#251019,#12131a)}.feedback-hero>span{display:grid;place-items:center;width:52px;height:52px;flex:0 0 52px;border-radius:14px;background:#3b1220;color:#ff3656;font-size:25px}.feedback-hero small,.feedback-actions header small,.feedback-patterns>small{color:#ff5871;font-size:8px;font-weight:800;letter-spacing:.14em}.feedback-hero h2{margin:5px 0 4px}.feedback-hero p{margin:0;color:#9297a7}.feedback-actions{margin:20px 0}.feedback-actions>header{display:flex;align-items:end;justify-content:space-between;margin-bottom:10px}.feedback-actions h3,.feedback-patterns h3{margin:5px 0 0}.feedback-actions article{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:13px;padding:14px;border:1px solid #30333e;border-radius:11px;background:#12131a}.feedback-actions article+article{margin-top:8px}.feedback-actions article>b{display:grid;place-items:center;width:31px;height:31px;border-radius:9px;background:#33131d;color:#ff4f6b}.feedback-actions article strong,.feedback-actions article small{display:block}.feedback-actions article small{margin-top:4px;color:#8d92a1}.feedback-patterns{margin:22px 0}.feedback-patterns>div{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.feedback-patterns span{display:grid;grid-template-columns:auto auto;gap:2px 7px;padding:10px 12px;border:1px solid #315743;border-radius:10px;background:#0e1d17}.feedback-patterns i{grid-row:1/3;color:#48d995}.feedback-patterns strong,.feedback-patterns small{display:block}.feedback-patterns small{color:#8fa89d}.feedback-learning{display:flex;align-items:center;gap:12px;margin:18px 0;padding:14px;border:1px solid #684a22;border-radius:11px;background:#20180e}.feedback-learning>i{color:#efb04c;font-size:22px}.feedback-learning strong,.feedback-learning small{display:block}.feedback-learning small{margin-top:3px;color:#9d9384}.feedback-columns{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0}.feedback-columns>div>h3{margin:0 0 10px}.feedback-video{display:grid;grid-template-columns:112px minmax(0,1fr) auto auto;align-items:center;gap:11px;margin-bottom:8px;padding:9px;border:1px solid #2c2f39;border-radius:11px;background:#12131a}.feedback-video.winner{border-color:#23553f}.feedback-video.improve{border-color:#5b3038}.feedback-video img,.feedback-video>span{width:112px;aspect-ratio:16/9;object-fit:cover;border-radius:7px}.feedback-video>span{display:grid;place-items:center;background:#20222b}.feedback-video>div>small{color:#ff5871;font-size:8px;font-weight:800}.feedback-video>div>strong{display:block;margin:4px 0;font-size:11px}.feedback-video p{margin:0;color:#818697;font-size:9px}.feedback-video aside{text-align:right}.feedback-video aside strong,.feedback-video aside small{display:block}.feedback-video aside strong{font-size:17px}.feedback-video aside small{color:#777c8c;font-size:7px;text-transform:uppercase}@media(max-width:900px){.feedback-columns{grid-template-columns:1fr}}@media(max-width:650px){.feedback-actions article{grid-template-columns:auto 1fr}.feedback-actions article>.cc-button{grid-column:2;justify-self:start}.feedback-video{grid-template-columns:90px 1fr auto}.feedback-video img,.feedback-video>span{width:90px}.feedback-video>a{grid-column:2;justify-self:start}}
.coach-hero{display:flex;align-items:center;gap:16px;padding:20px;border:1px solid #44202c;border-radius:14px;background:linear-gradient(135deg,#251019,#12131a)}.coach-hero>span{display:grid;place-items:center;width:52px;height:52px;flex:0 0 52px;border-radius:14px;background:#3b1220;color:#ff3656;font-size:25px}.coach-hero small,.coach-result header small,.coach-evidence>small{color:#ff5871;font-size:8px;font-weight:800;letter-spacing:.14em}.coach-hero h2{margin:5px 0 4px}.coach-hero p{margin:0;color:#9297a7}.coach-prompts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}.coach-prompts button{display:flex;align-items:center;gap:8px;padding:12px;border:1px solid #2c2f39;border-radius:10px;background:#12131a;color:#b8bbc5;text-align:left;cursor:pointer}.coach-prompts button:hover{border-color:#ff3656;color:#fff}.coach-prompts i{color:#ff4f6b}.coach-form{padding:16px;border:1px solid #2c2f39;border-radius:12px;background:#12131a}.coach-form label{display:grid;gap:8px;font-weight:700}.coach-form footer{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:12px}.coach-form footer small{max-width:580px;color:#858a99}.coach-form footer i{margin-right:5px;color:#49d99a}.coach-result{margin-top:18px;padding:20px;border:1px solid #315743;border-radius:14px;background:linear-gradient(135deg,#0d1c16,#12131a 55%)}.coach-result>header{display:flex;align-items:flex-start;gap:13px}.coach-result>header>span{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:#143d2d;color:#48dc98;font-size:21px}.coach-result h2{margin:5px 0;font-size:20px;line-height:1.4}.coach-evidence{display:flex;flex-wrap:wrap;gap:7px;margin:15px 0;padding:12px 0;border-block:1px solid #284235}.coach-evidence>small{width:100%}.coach-evidence>span{padding:6px 9px;border-radius:999px;background:#15261f;color:#bcd5ca;font-size:9px}.coach-result section h3{margin:17px 0 9px}.coach-result section article{display:flex;gap:9px;padding:9px 0;border-bottom:1px solid #27342f;color:#b8bdc5}.coach-result section article i{color:#48d995}@media(max-width:650px){.coach-prompts{grid-template-columns:1fr}.coach-form footer{align-items:flex-start;flex-direction:column}}
.community-hero{display:flex;align-items:center;gap:16px;padding:20px;border:1px solid #2a3e58;border-radius:14px;background:linear-gradient(135deg,#101a2a,#12131a)}.community-hero>span{display:grid;place-items:center;width:52px;height:52px;flex:0 0 52px;border-radius:14px;background:#172b48;color:#6cabff;font-size:25px}.community-hero small,.community-summary small{color:#7fb6ff;font-size:8px;font-weight:800;letter-spacing:.14em}.community-hero h2{margin:5px 0 4px}.community-hero p,.community-control small{margin:0;color:#9297a7}.community-control{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:14px 0;padding:15px;border:1px solid #2c3544;border-radius:12px;background:#12131a}.community-control>div{display:grid;gap:8px;flex:1}.community-control label{display:grid;gap:7px;font-weight:700}.community-control small i{margin-right:5px;color:#48d995}.community-control aside{min-width:112px;padding-left:16px;border-left:1px solid #2a2d36}.community-control aside strong,.community-control aside span{display:block}.community-control aside strong{font-size:24px}.community-control aside span{color:#888e9e;font-size:10px}.community-inbox{margin-top:16px}.community-summary{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;margin-bottom:12px;padding:16px;border:1px solid #274936;border-radius:12px;background:linear-gradient(90deg,#0d1d17,#12131a)}.community-summary h3{margin:5px 0}.community-summary p{margin:0;color:#8e9a92;font-size:11px;line-height:1.45}.community-summary>span{min-width:72px;padding:8px 10px;border-left:1px solid #274936;text-align:center}.community-summary b,.community-summary span small{display:block}.community-summary b{font-size:20px;color:#48d995}.community-summary span small{color:#97ae9f;letter-spacing:0}.community-comment-list{display:grid;gap:10px}.community-comment-card{padding:15px;border:1px solid #2d303a;border-radius:12px;background:#12131a}.community-comment-card>header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center}.community-avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#263a57;color:#b7d6ff;font-weight:800}.community-comment-card header strong,.community-comment-card header small{display:block}.community-comment-card header small{margin-top:3px;color:#858b9b;font-size:10px}.community-comment-card header em{padding:5px 8px;border-radius:999px;font-size:9px;font-style:normal}.community-comment-card header em.open{background:#31141d;color:#ff7187}.community-comment-card header em.replied{background:#123525;color:#58dc9e}.community-comment-card>p{margin:13px 0;color:#e0e2e8;line-height:1.5}.community-existing-replies{margin:10px 0;border-left:2px solid #365d48;padding-left:10px;color:#aeb7b1}.community-existing-replies summary{cursor:pointer;font-size:10px;color:#69d8a0}.community-existing-replies div{display:grid;gap:3px;margin-top:8px;font-size:11px}.community-existing-replies b{font-size:10px}.community-reply-form{display:grid;gap:9px;margin-top:13px;padding-top:13px;border-top:1px solid #292c35}.community-reply-form label{display:grid;gap:7px;font-size:11px;font-weight:700}.community-reply-form .cc-textarea{resize:vertical;min-height:64px}.community-reply-form footer{display:flex;align-items:center;justify-content:space-between;gap:10px}.community-reply-form footer small{color:#848a9a;font-size:10px}.community-reply-form footer i{margin-right:4px;color:#6cabff}@media(max-width:650px){.community-hero{align-items:flex-start}.community-control{align-items:stretch;flex-direction:column}.community-control aside{border-left:0;border-top:1px solid #2a2d36;padding:10px 0 0}.community-summary{grid-template-columns:1fr 1fr}.community-summary>div{grid-column:1/-1}.community-comment-card>header{grid-template-columns:auto minmax(0,1fr)}.community-comment-card header em{grid-column:2;justify-self:start}.community-reply-form footer{align-items:flex-start;flex-direction:column}}
.trend-recommendation{display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:14px;margin:14px 0;padding:14px 16px;border:1px solid #315a48;border-radius:12px;background:linear-gradient(90deg,#0d1d17,#12131a)}.trend-recommendation>span{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:#133d2d;color:#48df99;font-size:21px}.trend-recommendation small{color:#48df99;font-size:8px;font-weight:800;letter-spacing:.14em}.trend-recommendation h3{margin:4px 0;font-size:15px}.trend-recommendation p{margin:0;color:#969baa;font-size:10px;line-height:1.45}.trend-filters{display:flex;flex-wrap:wrap;gap:7px;margin:20px 0 4px}.trend-filters button{padding:8px 11px;border:1px solid #30333e;border-radius:999px;background:#12131a;color:#9398a8;font-family:inherit;font-size:10px;font-weight:700;cursor:pointer}.trend-filters button:hover,.trend-filters button.active{border-color:#ff3656;background:#30131c;color:#fff}.trend-filters b{margin-left:5px;color:#ff5871}.trend-result.topic-only{border-style:dashed}.trend-result[hidden]{display:none}@media(max-width:700px){.trend-recommendation{grid-template-columns:42px minmax(0,1fr)}.trend-recommendation>a{grid-column:2;justify-self:start}}
.trend-action-plan{margin:16px 0;padding:20px;border:1px solid #315b48;border-radius:15px;background:linear-gradient(145deg,#0e1d17,#12131a 48%)}.trend-action-plan>header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.trend-action-plan>header small{color:#47de97;font-size:9px;font-weight:800;letter-spacing:.14em}.trend-action-plan>header h2{margin:6px 0 5px;font-size:23px}.trend-action-plan>header p{max-width:690px;margin:0;color:#a1a6b4;font-size:12px;line-height:1.55}.trend-action-plan>header>span{display:flex;align-items:center;gap:7px;flex:none;padding:9px 12px;border:1px solid #37614e;border-radius:999px;background:#123426;color:#52e3a0;font-size:10px;font-weight:800}.trend-action-plan>header>span.test{border-color:#725023;background:#2a1d0e;color:#f2b453}.trend-action-plan>header>span.wait{border-color:#3a3d49;background:#1b1d25;color:#a2a7b5}.trend-idea-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0}.trend-idea-grid article{position:relative;min-width:0;padding:16px;border:1px solid #2b3038;border-radius:12px;background:#11131a}.trend-idea-grid article>b{position:absolute;right:13px;top:11px;color:#343945;font-size:20px}.trend-idea-grid article>span{display:inline-flex;padding:4px 7px;border-radius:999px;background:#30151d;color:#ff5e76;font-size:8px;font-weight:800;text-transform:uppercase}.trend-idea-grid h3{min-height:42px;margin:11px 22px 9px 0;font-size:14px;line-height:1.4}.trend-idea-grid p{margin:0 0 9px;color:#c6c9d1;font-size:10px;line-height:1.5}.trend-idea-grid p strong{color:#fff}.trend-idea-grid article>small{display:block;color:#858b9b;font-size:9px;line-height:1.45}.trend-action-plan>footer{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.8fr) auto;align-items:center;gap:16px;padding-top:14px;border-top:1px solid #27342f}.trend-action-plan>footer>div strong,.trend-action-plan>footer>div span{display:block}.trend-action-plan>footer>div strong{margin-bottom:7px;font-size:10px}.trend-action-plan>footer>div span{margin-top:4px;color:#9ea4b2;font-size:9px}.trend-action-plan>footer>div i{margin-right:6px;color:#47dc97}.trend-action-plan>footer>p{display:flex;gap:7px;margin:0;color:#858b9a;font-size:9px;line-height:1.45}.trend-action-plan>footer>p i{flex:none;color:#ff5871}.trend-action-plan>footer>a{display:flex;align-items:center;gap:7px;color:#fff;font-size:10px;font-weight:700;white-space:nowrap}.trend-action-plan>footer>a i{color:#ff3656;font-size:16px}.trend-evidence{margin-top:18px;border-top:1px solid #262a33}.trend-evidence>summary{display:flex;align-items:center;justify-content:space-between;padding:16px 4px;cursor:pointer;list-style:none}.trend-evidence>summary::-webkit-details-marker{display:none}.trend-evidence>summary>span{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center}.trend-evidence>summary>span>i{grid-row:1/3;color:#ff4d69;font-size:21px}.trend-evidence>summary strong,.trend-evidence>summary small{display:block}.trend-evidence>summary strong{font-size:12px}.trend-evidence>summary small{margin-top:3px;color:#808596;font-size:9px}.trend-evidence>summary>i{transition:transform .18s}.trend-evidence[open]>summary>i{transform:rotate(180deg)}.trend-evidence .trend-results{padding-bottom:4px}@media(max-width:850px){.trend-idea-grid{grid-template-columns:1fr}.trend-idea-grid h3{min-height:0}.trend-action-plan>footer{grid-template-columns:1fr}.trend-action-plan>header{flex-direction:column}}@media(max-width:600px){.trend-action-plan{padding:15px}.trend-action-plan>header h2{font-size:20px}}
.video-generator-intro{display:flex;gap:18px;align-items:center;padding:22px;border:1px solid rgba(255,48,79,.35);border-radius:16px;background:linear-gradient(135deg,rgba(255,48,79,.12),rgba(20,21,30,.72));margin-bottom:18px}.video-generator-intro>span{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:#ff304f;color:#fff;font-size:24px}.video-generator-intro small{color:#ff304f;letter-spacing:.16em;font-weight:700}.video-generator-intro h3{margin:5px 0;font-size:22px}.video-generator-intro p{margin:0;color:var(--muted,#9aa0b4)}.video-generator-form{display:grid;gap:18px;padding:22px;border:1px solid var(--line,#2b2e3a);border-radius:16px;background:#11121a}.video-generator-form label{display:grid;gap:8px;color:#e5e7ef;font-weight:600}.video-generator-form .wide{grid-column:1/-1}.video-generator-form small{color:#858b9f;font-weight:400}.video-generator-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.video-generator-reference input{padding:14px;border:1px dashed #555b70;border-radius:10px}.video-generator-rights{display:flex!important;grid-template-columns:none!important;align-items:center;gap:10px!important;font-size:13px}.video-generator-rights input{width:18px;height:18px;accent-color:#ff304f}.video-generator-form footer{display:flex;justify-content:space-between;align-items:center;gap:18px;padding-top:6px}.video-generator-form footer small{max-width:60%}.video-generator-result{margin-top:18px;padding:22px;border:1px solid #2b2e3a;border-radius:16px;background:#11121a}.video-generator-result video{display:block;width:100%;max-height:520px;border-radius:12px;background:#050509;margin:16px 0}.video-generator-result .cc-button{display:inline-flex}@media(max-width:760px){.video-generator-grid{grid-template-columns:1fr 1fr}.video-generator-form footer{align-items:stretch;flex-direction:column}.video-generator-form footer small{max-width:none}}
.video-generator-model-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0;padding:14px;border:1px solid rgba(255,48,79,.35);border-radius:12px;background:rgba(255,48,79,.05)}.video-generator-model-options>strong{grid-column:1/-1;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#ff304f}.video-generator-model-options label{display:grid;gap:6px;font-size:12px;color:#a7adbd}.video-generator-model-options input[type=file]{font-size:12px}.video-generator-model-options .video-generator-audio{display:flex;align-items:center;gap:8px}.video-generator-model-options[hidden]{display:none}
.video-generator-history{margin:24px 0 28px;padding:0;border:0;background:transparent}.video-generator-history-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}.video-generator-history-heading small{color:#ff304f;letter-spacing:.14em;font-size:10px}.video-generator-history-heading h3{margin:0;font-size:21px}.video-generator-history-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:18px}.video-generator-history-stats article{display:flex;flex-direction:column;gap:8px;min-height:68px;padding:14px 16px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:#11131b}.video-generator-history-stats small{color:#8790a5;font-size:11px}.video-generator-history-stats strong{font-size:20px;color:#f4f6fb}.video-generator-history-list{border-top:1px solid rgba(255,255,255,.12)}.video-generator-history-row{display:grid;grid-template-columns:32px minmax(0,1fr) auto 18px;align-items:center;gap:12px;padding:14px 10px;border-bottom:1px solid rgba(255,255,255,.1);background:rgba(17,19,27,.72)}.video-generator-history-row:first-child{border-radius:10px 10px 0 0}.video-generator-history-row:last-child{border-radius:0 0 10px 10px}.video-history-status{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:rgba(0,215,140,.12);color:#00d78c}.video-history-status.pending{background:rgba(255,177,0,.12);color:#ffb100}.video-generator-history-row div{min-width:0;display:flex;flex-direction:column;gap:4px}.video-generator-history-row strong{font-size:13px;color:#f1f3f8}.video-generator-history-row small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#8991a4;font-size:11px}.video-generator-history-row>i{color:#697286}.video-generator-history-row>i:first-child{display:grid;place-items:center;width:30px;height:30px;border:1px solid rgba(255,48,79,.3);border-radius:9px;background:rgba(255,48,79,.12);color:#ff4966;font-size:16px}.video-generator-history-row>i:first-child.mdi-loading{animation:video-history-icon-pulse 1.6s ease-in-out infinite}.video-generator-history-row>i:first-child.mdi-alert-circle-outline{border-color:rgba(255,112,133,.35);background:rgba(255,112,133,.12);color:#ff7085}@keyframes video-history-icon-pulse{50%{box-shadow:0 0 0 4px rgba(255,48,79,.08)}}.video-history-badge{font-style:normal;font-size:10px;padding:5px 9px;border-radius:99px;color:#00d78c;background:rgba(0,215,140,.11)}.video-history-badge.pending{color:#ffb100;background:rgba(255,177,0,.11)}
.video-generator-history-row{position:relative;cursor:pointer;transition:background .16s ease,border-color .16s ease}.video-generator-history-row:hover,.video-generator-history-row:focus-visible{background:#171a24;border-color:#ff304f;outline:none}.video-generator-history-row.is-loading{opacity:.65;cursor:wait}.video-history-preview{grid-column:1/-1;display:grid;gap:10px;padding:12px 0 2px;border-top:1px solid rgba(255,255,255,.08)}.video-history-preview video{display:block;width:100%;max-height:360px;border-radius:10px;background:#050509}.video-history-preview .cc-button{justify-self:start;text-decoration:none}.video-history-error{grid-column:1/-1;color:#ff7085!important;white-space:normal!important}
.video-generator-history-heading{display:block;margin:32px 0 12px}.video-generator-history-heading small{display:block;margin-bottom:7px}.video-generator-history-heading h3{font-size:21px}.video-generator-history-stats{margin:0 0 28px}.video-generator-history-row{padding:14px 12px}.video-generator-history-row>div{display:flex!important;align-items:initial!important;justify-content:flex-start!important;margin:0!important}.video-generator-history-row small{letter-spacing:0!important}.video-generator-history{width:100%}.video-generator-intro{margin:0 0 16px}

/* Keep the native video studio in the same full-page visual system as every other Contentfactory tool. */
body.factory-page-active .cc-shell.cc-video-generator-shell{width:min(950px,calc(100% - 80px));max-width:none;margin:0 auto}
.cc-video-generator-shell .video-generator-tool-hero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px;min-height:96px;box-sizing:border-box;margin:0 0 16px;padding:18px 22px;border:1px solid #292c36;border-radius:18px;background:linear-gradient(135deg,#14151d,#0e0f15)}
.cc-video-generator-shell .video-generator-tool-hero>span{width:52px;height:52px;border-radius:15px;background:rgba(255,35,71,.14);color:#ff304f;font-size:25px}
.cc-video-generator-shell .video-generator-tool-hero>div{min-width:0}.cc-video-generator-shell .video-generator-tool-hero small{display:block;color:#ff4966;font-size:10px;font-weight:800;letter-spacing:.14em}.cc-video-generator-shell .video-generator-tool-hero h3{margin:5px 0;color:#f5f6f8;font:650 22px 'Space Grotesk',sans-serif}.cc-video-generator-shell .video-generator-tool-hero p{max-width:780px;color:#8b91a0;font-size:11px;line-height:1.5}
.cc-video-generator-shell .video-generator-history{margin:0 0 32px}.cc-video-generator-shell .video-generator-history-stats{margin:16px 0 34px}.cc-video-generator-shell .video-generator-history-heading{display:flex;margin:0;padding-bottom:16px}.cc-video-generator-shell .video-generator-history-heading small{display:block;margin:0;color:#ff304f;letter-spacing:.14em;font-size:10px}.cc-video-generator-shell .video-generator-history-heading h3{margin:7px 0 0;font:600 22px 'Space Grotesk',sans-serif}.cc-video-generator-shell .video-generator-history-row{width:100%;border-right:0;border-left:0;border-radius:0;background:transparent;font:inherit}.cc-video-generator-shell .video-generator-history-row>div{display:block!important}.cc-video-generator-shell .video-generator-history-row:hover{background:#11131a}.cc-video-generator-shell .video-generator-history-list{border-top:0}

/* Native Video-Verlauf: Vorschau bleibt kompakt und der Download ist nie Teil
   eines verschachtelten Buttons. */
.cc-video-generator-shell .video-generator-history-row{cursor:pointer}
.cc-video-generator-shell .video-history-preview{display:grid;grid-column:1/-1;gap:10px;min-width:0;margin:0;padding:12px 0 16px;overflow:visible}
.cc-video-generator-shell .video-history-preview video{display:block;width:100%;height:auto;max-height:300px;aspect-ratio:16/9;object-fit:contain;border-radius:10px;background:#050509}
.cc-video-generator-shell .video-history-preview .cc-button{display:inline-flex;align-items:center;justify-content:center;min-height:38px;margin:0;align-self:start;justify-self:start;overflow:visible;text-decoration:none}
.cc-video-generator-shell .video-history-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}.cc-video-generator-shell .video-history-actions .cc-button{justify-self:start;white-space:nowrap}.cc-video-generator-shell .video-history-actions .cc-button:not(.primary){border-color:#394153;background:#1a1e29;color:#dfe4ee}.cc-video-generator-shell .video-history-actions .cc-button:not(.primary):hover{border-color:#ff304f;color:#fff}
.cc-video-generator-shell .video-history-variants{grid-template-columns:1fr}.cc-video-generator-shell .video-history-variants>article{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px}.cc-video-generator-shell .video-history-variants>article>small{grid-column:1/-1}.cc-video-generator-shell .video-history-variants>article>video{grid-column:1;grid-row:2;width:100%;min-width:0}.cc-video-generator-shell .video-history-variants>article>.video-history-actions{grid-column:2;grid-row:2;display:grid;align-content:center;justify-items:stretch}.cc-video-generator-shell .video-history-variants>article>.video-history-actions .cc-button{width:100%}@media(max-width:700px){.cc-video-generator-shell .video-history-variants>article{grid-template-columns:1fr}.cc-video-generator-shell .video-history-variants>article>.video-history-actions{grid-column:1;grid-row:3;display:flex;justify-content:flex-start}}
.cc-video-generator-shell .video-history-variants{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.cc-video-generator-shell .video-history-variants>div{display:grid!important;gap:8px;min-width:0;padding:12px;border:1px solid rgba(255,255,255,.09);border-radius:10px;background:#090b11}
.cc-video-generator-shell .video-history-variants small{color:#ff526a;font-size:10px;letter-spacing:.1em}
.cc-video-generator-shell .video-history-variants video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;border-radius:8px;background:#050509}
.video-generator-variants{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}.video-generator-variants article{display:grid;gap:10px;padding:12px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:#0b0d13}.video-generator-variants article>small{color:#ff526a;font-size:10px;letter-spacing:.1em}.video-generator-variants video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;border-radius:10px;background:#050509}
.cc-video-generator-shell .video-history-preview-loading{display:flex;align-items:center;justify-content:center;gap:9px;min-height:150px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:#07080d;color:#9ba2b5;font-size:13px}
.cc-video-generator-shell .video-history-details{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr);gap:16px;padding:16px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:#0c0e15}
.cc-video-generator-shell .video-history-details small{display:block;margin-bottom:7px;color:#ff526a;font-size:10px;letter-spacing:.1em}
.cc-video-generator-shell .video-history-prompt p{max-width:100%;margin:0;color:#e5e8ef;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.cc-video-generator-shell .video-history-config{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cc-video-generator-shell .video-history-config div{display:block!important;min-width:0;padding:10px;border-radius:8px;background:#141722}
.cc-video-generator-shell .video-history-config small{margin-bottom:4px;color:#8e98ad;letter-spacing:0;font-size:10px}
.cc-video-generator-shell .video-history-config strong{display:block;overflow:hidden;color:#f4f6fa;font-size:12px;text-overflow:ellipsis;white-space:nowrap}
.video-history-variants>article{display:grid!important;grid-template-columns:minmax(0,1fr) 190px!important;grid-template-rows:auto 1fr!important;align-items:center;gap:10px 16px;min-width:0;padding:14px!important;border:1px solid #2b303b!important;border-radius:14px!important;background:linear-gradient(145deg,#151821,#101218)!important;box-shadow:0 14px 35px rgba(0,0,0,.2)}
.video-history-variants>article>small{grid-column:1/-1;grid-row:1;color:#ff526a;font-size:10px;letter-spacing:.12em}
.video-history-variants>article>video{grid-column:1!important;grid-row:2!important;width:100%!important;min-width:0;height:auto;aspect-ratio:16/9;max-height:520px;margin:0;border:1px solid rgba(255,48,79,.3);border-radius:12px;background:#07080d;box-shadow:0 12px 28px rgba(0,0,0,.28);color-scheme:dark}
.video-history-variants>article>.video-history-actions{grid-column:2!important;grid-row:2!important;display:grid!important;align-content:center;justify-items:stretch;gap:8px;min-width:0}
.video-history-variants>article>.video-history-actions .cc-button{width:100%;min-height:40px;justify-content:center;white-space:nowrap}
@media(max-width:700px){.video-history-variants>article{grid-template-columns:1fr!important;grid-template-rows:auto auto auto!important}.video-history-variants>article>video{grid-column:1!important;grid-row:2!important}.video-history-variants>article>.video-history-actions{grid-column:1!important;grid-row:3!important;display:flex!important;justify-content:flex-start}}
.cc-video-generator-shell .video-generator-form{margin-bottom:34px}

/* Prompt-Assistent fuer "Neues Video erstellen".
   Der Assistent steht als eigenstaendige Karte NEBEN dem Produktionsdialog,
   nicht darin: im Markup ist er ein Geschwister von .video-production-dialog
   direkt im Overlay. Das Overlay zentriert sonst ein einzelnes Kind
   (display:grid;place-items:center) - mit dem Assistenten daneben wird daraus
   eine zentrierte Zeile aus Dialog und Karte.

   Die Regeln haengen an :has(> .video-prompt-assistant), damit die geteilte
   Overlay-Regel fuer den Thumbnail-Dialog unberuehrt bleibt. */
.video-production-modal:has(>.video-prompt-assistant){display:flex;align-items:center;justify-content:center;gap:18px}
.video-production-modal:has(>.video-prompt-assistant)>.video-production-dialog{flex:1 1 auto;width:auto;min-width:0;max-width:900px}
/* Eine eigene, in sich geschlossene Karte - derselbe Rahmen/Hintergrund wie
   .video-generator-form im Dialog, damit beide gleich schwer wirken. Der
   innere Kopf (.script-assistant-panel, wiederverwendet aus dem
   Ideen-Assistenten) bringt von dort seinen eigenen Rahmen mit; der wird hier
   entfernt, sonst entstuende eine Box in der Box statt einer einzigen
   zusammenhaengenden Karte fuer Vorschlaege, Idee-Eingabe und Button. */
.video-production-modal>.video-prompt-assistant{display:grid;flex:0 0 380px;align-self:center;gap:11px;box-sizing:border-box;width:380px;max-height:calc(100vh - 2*clamp(12px,2.2vw,34px));overflow:auto;padding:20px;border:1px solid var(--line,#2b2e3a);border-radius:16px;background:#11121a}
/* Breiter, dafuer flacher: die Vorschlaege passen dank der groesseren Breite
   meist in zwei statt drei Zeilen, und das Idee-Feld braucht keine sechs
   Zeilen Hoehe. */
.video-production-modal>.video-prompt-assistant .script-assistant-suggestion{padding:8px 10px}
.video-production-modal>.video-prompt-assistant .script-refine-label textarea{min-height:76px}
.video-prompt-assistant .script-assistant-panel{padding:0;border:0;border-radius:0;background:transparent}
.video-prompt-assistant-intro{margin:0 0 2px;color:#9aa2b4;font-size:11px;line-height:1.5}
/* Zu schmal fuer zwei Spalten: Karte unter den Dialog, das Overlay selbst
   wird scrollbar - sonst waere die Karte bei voller Dialoghoehe nicht mehr
   erreichbar. */
/* Breakpoint zieht mit der Kartenbreite mit: 380px Karte + 18px Abstand +
   Aussenabstand brauchen mehr Platz als die frueheren 300px, sonst wuerde der
   Dialog daneben zu schmal. */
@media(max-width:1260px){
  .video-production-modal:has(>.video-prompt-assistant){flex-direction:column;justify-content:flex-start;overflow:auto}
  .video-production-modal:has(>.video-prompt-assistant)>.video-production-dialog{flex:0 0 auto;width:100%;max-height:none}
  .video-production-modal>.video-prompt-assistant{flex:0 0 auto;width:100%;max-height:none;overflow:visible}
}
@media(max-width:700px){.cc-video-generator-shell .video-history-preview video{max-height:220px}.cc-video-generator-shell .video-history-preview-loading{min-height:120px}.cc-video-generator-shell .video-history-details{grid-template-columns:1fr}.cc-video-generator-shell .video-history-config{grid-template-columns:repeat(2,minmax(0,1fr))}.cc-video-generator-shell .video-history-variants,.video-generator-variants{grid-template-columns:1fr}}
@media(max-width:700px){body.factory-page-active .cc-shell.cc-video-generator-shell{width:calc(100% - 32px)}.cc-video-generator-shell .video-generator-tool-hero{grid-template-columns:auto 1fr}.cc-video-generator-shell .video-generator-tool-hero .tool-new-run{grid-column:1/-1;width:100%}.cc-video-generator-shell .video-generator-history-stats{grid-template-columns:1fr}}
.video-generator-project{padding:14px 16px;border:1px solid rgba(255,48,79,.24);border-radius:12px;background:rgba(255,48,79,.045)}.video-generator-project select{max-width:520px}
.video-generator-project,[data-shorts-form] .shorts-actions>label{display:none!important}

/* Project hub: the shared home for a production, its brief, files and jobs. */
.project-hub-intro{display:flex;align-items:center;gap:18px;padding:24px;margin-bottom:18px;border:1px solid rgba(255,48,79,.3);border-radius:16px;background:linear-gradient(135deg,rgba(255,48,79,.12),rgba(18,19,27,.9))}.project-hub-intro>span{display:grid;place-items:center;width:54px;height:54px;border-radius:15px;background:rgba(255,48,79,.18);color:#ff4260;font-size:26px}.project-hub-intro small,.project-hub-list header small,.project-hero small,.project-brief header small,.project-detail-grid header small{display:block;color:#ff4966;font-size:10px;font-weight:800;letter-spacing:.14em}.project-hub-intro h3{margin:5px 0;font-size:23px}.project-hub-intro p{margin:0;color:#949bae}.project-create-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:12px;align-items:end;padding:16px;margin-bottom:28px;border:1px solid #2a2d38;border-radius:14px;background:#11131a}.project-create-form label,.project-edit-grid label,.project-asset-form label{display:grid;gap:7px;color:#e6e8ee;font-size:12px;font-weight:650}.project-create-form .cc-button{min-height:42px}.project-hub-list>header,.project-timeline>header,.project-assets>header,.project-brief>header{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:12px}.project-hub-list>header h3,.project-timeline>header h3,.project-assets>header h3,.project-brief>header h3{margin:5px 0 0;font-size:20px}.project-hub-list>header>span{color:#8f97a9;font-size:12px}.project-hub-list>div{display:grid;gap:9px}.project-card{display:grid;grid-template-columns:42px minmax(0,1fr) auto 18px;gap:12px;align-items:center;width:100%;padding:15px;border:1px solid #272a35;border-radius:12px;background:#101119;color:#e9ecf1;text-align:left;cursor:pointer;transition:border-color .15s ease,background .15s ease}.project-card:hover{border-color:#ff4260;background:#171821}.project-card>i:first-child{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:rgba(255,48,79,.12);color:#ff4966;font-size:19px}.project-card span{display:grid;gap:3px;min-width:0}.project-card small{color:#ff6178;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.project-card strong{overflow:hidden;font-size:14px;text-overflow:ellipsis;white-space:nowrap}.project-card em{overflow:hidden;color:#949bad;font-size:12px;font-style:normal;text-overflow:ellipsis;white-space:nowrap}.project-card time{color:#8991a4;font-size:11px}.project-card>i:last-child{color:#8790a5}.project-detail{display:grid;gap:18px}.project-detail-head{display:flex;justify-content:space-between;align-items:center}.project-status{padding:6px 10px;border-radius:999px;background:#212431;color:#b7becc;font-size:11px;font-weight:700}.project-status.production{background:rgba(255,177,0,.13);color:#ffb800}.project-status.review{background:rgba(80,160,255,.14);color:#7cb7ff}.project-status.published{background:rgba(0,215,140,.13);color:#15d998}.project-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:25px;border:1px solid #2b2e3a;border-radius:16px;background:linear-gradient(135deg,#151620,#0f1017)}.project-hero h2{margin:6px 0;font-size:27px}.project-hero p{max-width:620px;margin:0;color:#9ba2b3}.project-hero-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:9px}.project-brief{padding:18px;border:1px solid #292c36;border-radius:14px;background:#11131a}.project-brief p{margin:0;color:#c2c7d1;line-height:1.6;white-space:pre-wrap}.project-detail-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(310px,.8fr);gap:18px}.project-timeline,.project-assets{padding:18px;border:1px solid #292c36;border-radius:14px;background:#11131a}.project-timeline>div,.project-assets>div{display:grid;gap:0}.project-timeline article,.project-assets article{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px 0;border-top:1px solid rgba(255,255,255,.08)}.project-timeline article>i,.project-assets article>i{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#1b1e28;color:#a3adc0}.project-timeline article.completed>i,.project-timeline article.success>i{color:#0ed995;background:rgba(0,215,140,.11)}.project-timeline article.failed>i,.project-timeline article.error>i{color:#ff6379;background:rgba(255,48,79,.13)}.project-timeline span,.project-assets span{display:grid;gap:3px;min-width:0}.project-timeline strong,.project-assets strong{overflow:hidden;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.project-timeline small,.project-assets small{overflow:hidden;color:#8b93a6;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.project-timeline time{color:#8b93a6;font-size:10px}.project-assets .cc-button{padding:7px;min-width:auto}.project-empty{display:grid;justify-items:center;gap:8px;padding:25px 12px;color:#8790a5;text-align:center}.project-empty i{font-size:25px;color:#596174}.project-empty p{max-width:260px;margin:0;font-size:12px;line-height:1.5}.project-edit-form,.project-asset-form{display:grid;gap:14px;padding:18px;border:1px solid rgba(255,48,79,.36);border-radius:14px;background:#14151e}.project-edit-grid{display:grid;grid-template-columns:1fr 220px;gap:13px}.project-edit-grid .wide{grid-column:1/-1}.project-asset-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:end}.project-asset-form .cc-button{min-height:42px}@media(max-width:760px){.project-create-form,.project-asset-form{grid-template-columns:1fr}.project-create-form .cc-button,.project-asset-form .cc-button{width:100%}.project-hero{align-items:flex-start;flex-direction:column}.project-hero-actions{justify-content:flex-start}.project-detail-grid{grid-template-columns:1fr}.project-edit-grid{grid-template-columns:1fr}.project-card{grid-template-columns:40px minmax(0,1fr) 16px}.project-card time{display:none}}
/* Competitor discovery: search by channel name and choose a verified result. */
.cc-competitor-search{max-width:780px;margin:0 auto 26px}.cc-competitor-search form{position:relative;padding:18px;border:1px solid #2c3040;border-radius:15px;background:linear-gradient(135deg,#151720,#101117)}.cc-competitor-search-label{display:block;margin-bottom:8px;color:#f1f3f8;font-size:13px;font-weight:750}.cc-competitor-search-input{position:relative}.cc-competitor-search-input>i{position:absolute;z-index:1;top:50%;left:14px;transform:translateY(-50%);color:#9aa3b6;font-size:20px}.cc-competitor-search-input .cc-input{width:100%;padding-left:44px}.cc-competitor-results{position:absolute;z-index:6;top:86px;right:18px;left:18px;overflow:auto;max-height:390px;padding:6px;border:1px solid #394054;border-radius:12px;background:#171923;box-shadow:0 20px 45px rgba(0,0,0,.45)}.cc-competitor-result{display:grid;grid-template-columns:42px minmax(0,1fr) 22px;gap:11px;align-items:center;width:100%;padding:10px;border:0;border-radius:9px;background:transparent;color:#edf0f5;text-align:left;cursor:pointer}.cc-competitor-result:hover,.cc-competitor-result:focus{outline:0;background:rgba(255,48,79,.11)}.cc-competitor-result img,.cc-competitor-result>i:first-child{width:42px;height:42px;border-radius:50%;object-fit:cover}.cc-competitor-result>i:first-child{display:grid;place-items:center;background:#272b39;color:#aab2c4;font-size:24px}.cc-competitor-result span{display:grid;gap:2px;min-width:0}.cc-competitor-result strong{overflow:hidden;font-size:13px;text-overflow:ellipsis;white-space:nowrap}.cc-competitor-result small{color:#9aa3b5;font-size:11px}.cc-competitor-result>i:last-child{justify-self:end;color:#ff4965;font-size:20px}.cc-competitor-searching,.cc-competitor-no-results{padding:15px;color:#a6afc1;font-size:12px;text-align:center}.cc-competitor-searching i{margin-right:6px;color:#ff4965}.cc-competitor-search-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:13px}.cc-competitor-search-actions>small{color:#9098aa;font-size:11px}.cc-competitor-search-actions>span{display:flex;flex-wrap:wrap;gap:8px}.cc-competitor-search .cc-button[disabled]{cursor:not-allowed;opacity:.48}@media(max-width:620px){.cc-competitor-search-actions{align-items:flex-start;flex-direction:column}.cc-competitor-search-actions>span{width:100%}.cc-competitor-search-actions .cc-button{flex:1}.cc-competitor-results{top:87px}}
.cc-radar{display:grid;gap:14px;margin-bottom:24px}.cc-radar-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:18px;border:1px solid #2d3040;border-radius:14px;background:linear-gradient(135deg,#17131b,#111219)}.cc-radar-toolbar h3{margin:7px 0 4px;font-size:20px}.cc-radar-toolbar p{max-width:670px;margin:0;color:#9299aa;font-size:12px;line-height:1.5}.cc-radar-filters{display:flex;gap:8px;flex:0 0 auto}.cc-radar-filters label{display:grid;gap:6px;color:#a9afbf;font-size:10px;font-weight:700}.cc-radar-filters .cc-select{min-width:126px}.cc-radar-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.cc-radar-metrics article{min-width:0;padding:13px;border:1px solid #292d39;border-radius:11px;background:#11131a}.cc-radar-metrics small,.cc-radar-metrics strong,.cc-radar-metrics span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cc-radar-metrics small{color:#9ba2b3;font-size:10px}.cc-radar-metrics strong{margin:5px 0;font-size:16px}.cc-radar-metrics span{color:#ff6279;font-size:10px}.cc-radar-columns{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:14px}.cc-radar-panel{min-width:0;padding:16px;border:1px solid #292d39;border-radius:13px;background:#11131a}.cc-radar-panel header{display:flex;justify-content:space-between;gap:12px;margin-bottom:12px}.cc-radar-panel h3{margin:6px 0 0;font-size:16px}.cc-radar-video-list{display:grid;gap:7px;max-height:420px;overflow:auto}.cc-radar-video-list a{display:grid;grid-template-columns:38px minmax(0,1fr);gap:2px 9px;align-items:center;padding:8px;border:1px solid #262a35;border-radius:9px;color:#f0f2f7;text-decoration:none}.cc-radar-video-list a:hover{border-color:#ff3e5d;background:#17151d}.cc-radar-video-list a>span{grid-row:1/3}.cc-radar-video-list img,.cc-radar-video-list i{display:grid;width:38px;height:28px;place-items:center;border-radius:5px;background:#252936;color:#aab2c4;object-fit:cover}.cc-radar-video-list strong{overflow:hidden;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.cc-radar-video-list small{overflow:hidden;color:#9199aa;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.cc-pattern-list{display:grid;gap:8px}.cc-pattern-list article{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px;border:1px solid #252934;border-radius:9px}.cc-pattern-list strong,.cc-pattern-list small{display:block}.cc-pattern-list strong{font-size:11px}.cc-pattern-list small{margin-top:3px;color:#9299aa;font-size:10px;line-height:1.35}.cc-pattern-list b{display:grid;place-items:center;min-width:28px;height:28px;border-radius:50%;background:rgba(255,48,79,.12);color:#ff5570;font-size:12px}.cc-radar-gaps header p{margin:7px 0 0;color:#828b9e;font-size:10px}.cc-gap-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.cc-gap-grid article{display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid #34303b;border-radius:10px;background:linear-gradient(145deg,#17141c,#11131a)}.cc-gap-grid article>i{color:#ffb400;font-size:19px}.cc-gap-grid strong,.cc-gap-grid small{display:block}.cc-gap-grid strong{font-size:12px}.cc-gap-grid small{margin-top:5px;color:#9aa1b0;font-size:10px;line-height:1.4}.cc-gap-actions{display:flex;flex-wrap:wrap;gap:5px;margin-top:auto}.cc-gap-actions .cc-button{padding:6px 8px;font-size:10px}
.shorts-credit-button-cost .media-credit-button-popover{min-width:270px}
/* The production editor deliberately focuses on its configuration. */
.cc-video-generator-shell.is-video-production .video-generator-intro{display:none}
.media-credit-estimate{position:relative;display:flex;align-items:center;justify-content:flex-end;width:100%;min-height:0;margin:12px 0;padding:0;color:#f3f5f8;font-size:0}.media-credit-estimate>select,.media-credit-estimate>.legacy-credit-select{display:none!important}.media-credit-trigger{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:9px 12px;border:1px solid #343949;border-radius:10px;background:#202430;color:#fff;cursor:pointer;font:inherit;font-size:12px;font-weight:800;line-height:1;white-space:nowrap}.media-credit-trigger:hover,.media-credit-estimate.is-open .media-credit-trigger{border-color:#ff304f;box-shadow:0 6px 18px rgba(255,48,79,.2)}.media-credit-trigger>i:first-child{color:#ff4965;font-size:16px}.media-credit-trigger>i:last-child{color:#9da5b5;font-size:14px}.media-credit-popover{position:absolute;z-index:20;top:calc(100% + 8px);right:0;display:none;width:190px;min-width:190px;padding:13px 14px;border:1px solid #363b4a;border-radius:11px;background:#20232e;box-shadow:0 14px 30px rgba(0,0,0,.45)}.media-credit-estimate:hover .media-credit-popover,.media-credit-estimate.is-open .media-credit-popover{display:grid;gap:6px}.media-credit-popover strong{display:block;color:#fff;font-size:12px;line-height:1.25}.media-credit-popover small{display:block;margin:0;color:#aeb6c5;font-size:10px;line-height:1.4}
#workspace-body[data-tool="video-generator"] .tool-page-stats{display:none!important}
#workspace-body[data-tool="video-generator"] .media-credit-estimate{display:block}
/* Cost details are intentionally opened by click only; hovering empty layout space
   must not surface a detached tooltip. */
.media-credit-estimate:hover .media-credit-popover{display:none}.media-credit-estimate.is-open .media-credit-popover{display:grid!important;gap:6px}
.video-generator-prompt{display:grid!important;visibility:visible!important;order:-1}.video-generator-prompt textarea{display:block!important;min-height:148px!important}
.video-generator-result{display:block!important}.video-generator-feedback-idle{display:flex;gap:10px;align-items:flex-start;color:#aeb6c5}.video-generator-feedback-idle i{color:#ff4965;font-size:20px}.video-generator-feedback-idle strong,.video-generator-feedback-idle small{display:block}.video-generator-feedback-idle small{margin-top:3px;line-height:1.45}
.video-generation-state{display:flex;align-items:flex-start;gap:12px;padding:4px;color:#dfe3ed}.video-generation-state>i{color:#ff4965;font-size:23px}.video-generation-state>span{display:grid;gap:4px}.video-generation-state strong{font-size:14px}.video-generation-state small{color:#aeb6c5;line-height:1.45}.video-generation-state.error>i{color:#ff7085}.video-generation-state.error strong{color:#ffb4c1}

/* Credit-Mangel (31.08.2026): kein technischer Fehlerton, sondern eine ruhige
   Hinweiskarte mit direktem Weg zum Nachkauf und ins Credit-Center. */
.video-generation-state.video-credit-shortage{gap:13px;padding:6px 4px}
.video-credit-shortage-icon{display:flex;align-items:center;justify-content:center;flex:0 0 38px;width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,rgba(255,185,72,.22),rgba(255,73,101,.2));border:1px solid rgba(255,185,72,.4)}
.video-credit-shortage-icon i{color:#ffc86b;font-size:20px}
.video-generation-state.video-credit-shortage strong{color:#ffd9a1;font-size:14.5px}
.video-generation-state.video-credit-shortage small{color:#c3cad8}
.video-credit-shortage-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
.video-credit-shortage-actions .cc-button{display:inline-flex;align-items:center;gap:6px;min-height:0;margin:0;padding:7px 15px;border-radius:999px;font-size:12.5px;font-weight:600}
.video-credit-shortage-actions .cc-button i{font-size:15px}

/* Video production history: selected videos expand next to their run, not in
   the creation form.  This keeps the production view compact and legible. */
.cc-video-generator-shell .video-generator-result{margin-top:0;padding:16px;border-radius:12px}
.cc-video-generator-shell .video-ready-result>h3{margin:8px 0 0;font-size:18px}
.cc-video-generator-shell .video-generator-variants{grid-template-columns:minmax(0,980px);margin-top:14px}
.cc-video-generator-shell .video-generator-variants article{padding:0;border:0;background:transparent}
.cc-video-generator-shell .video-generator-variants video{margin:0;border-radius:10px}
.video-generator-variant-layout{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;margin-top:8px}
.video-generator-variant-layout video{display:block;width:100%;max-height:520px;aspect-ratio:16/9;object-fit:contain;margin:0;border:1px solid rgba(255,48,79,.28);border-radius:12px;background:linear-gradient(145deg,#0a0b10,#151722);color-scheme:dark;box-shadow:0 12px 28px rgba(0,0,0,.22)}
.video-generator-variant-actions{display:flex;align-items:center;justify-content:flex-end}
.video-generator-variant-actions .cc-button{min-height:40px;white-space:nowrap}
@media(max-width:700px){.video-generator-variant-layout{grid-template-columns:1fr;gap:10px}.video-generator-variant-actions{justify-content:flex-start}.video-generator-variant-actions .cc-button{width:100%;justify-content:center}}
.cc-video-generator-shell .video-generator-history{margin-top:30px}
.cc-video-generator-shell .video-generator-history>header{margin-bottom:10px}
.cc-video-generator-shell .video-generator-history>header small{display:block;color:#ff526a;font-size:10px;font-weight:800;letter-spacing:.14em}
.cc-video-generator-shell .video-generator-history>header h3{margin:7px 0 0;font-size:20px}
.cc-video-generator-shell .video-generator-history-row{grid-template-columns:28px minmax(0,1fr) auto 16px;padding:13px 8px;background:transparent;text-align:left}
.cc-video-generator-shell .video-generator-history-row>span{min-width:0}
.cc-video-generator-shell .video-generator-history-row{display:grid;width:100%;align-items:center;gap:10px;border:0;border-bottom:1px solid #2d3039;color:#f4f6fa;font:inherit;cursor:pointer}
.cc-video-generator-shell .video-generator-history-row strong{display:block;overflow:hidden;font-size:14px;text-overflow:ellipsis;white-space:nowrap}
.cc-video-generator-shell .video-generator-history-row small{display:block;margin-top:4px;font-size:12px}
.cc-video-generator-shell .video-generator-history-row time{color:#8790a5;font-size:12px}
.video-generator-history-delete{display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid #383d4b;border-radius:8px;background:#171a23;color:#aab2c1;cursor:pointer}
.video-generator-history-delete:hover{border-color:#ff304f;background:rgba(255,48,79,.14);color:#ff5b73}
.cc-video-generator-shell .video-generator-history-row{grid-template-columns:28px minmax(0,1fr) auto 30px 16px!important}
@media(max-width:700px){.cc-video-generator-shell .video-generator-history-row{grid-template-columns:24px minmax(0,1fr) 30px 14px!important}.cc-video-generator-shell .video-generator-history-row time{display:none}}
.cc-video-generator-shell .video-generator-history-row.is-selected{border-color:#ff304f;background:rgba(255,48,79,.06)}
.video-history-detail{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin:0 0 10px;padding:18px;border:1px solid rgba(255,48,79,.38);border-radius:12px;background:#11131a}
.video-history-detail>header{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:11px}
.video-history-detail>header>span{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(255,48,79,.14);color:#ff526a}
.video-history-detail small{display:block;color:#ff526a;font-size:9px;font-weight:800;letter-spacing:.12em}
.video-history-detail h3{margin:4px 0 0;overflow:hidden;font-size:14px;text-overflow:ellipsis;white-space:nowrap}
.video-history-detail p{margin:3px 0 0;color:#9198aa;font-size:10px}
.video-history-detail-close{width:32px;height:32px;border:0;border-radius:8px;background:#1b1e29;color:#a8b0c0;cursor:pointer}
.video-history-detail-close:hover{background:#2a1b22;color:#ff7186}
.video-history-detail-media{display:grid;grid-template-columns:minmax(0,640px);gap:11px}
.video-history-detail-media video{display:block;width:100%;border-radius:10px;background:#050509}
.video-history-detail-media .cc-button{justify-self:start}
.video-player-loading{display:flex;align-items:center;gap:8px;min-height:42px;padding:10px 12px;border-radius:9px;background:rgba(255,48,79,.08);color:#c9cfdd;font-size:12px}.video-player-loading i{color:#ff526a;font-size:17px}
@media(max-width:700px){.cc-video-generator-shell .video-generator-history-row{grid-template-columns:24px minmax(0,1fr) 14px}.cc-video-generator-shell .video-generator-history-row time{display:none}.video-history-detail{padding:14px}.video-history-detail-media{grid-template-columns:1fr}}

.cc-confirm-overlay{position:fixed;z-index:1000;inset:0;display:grid;place-items:center;padding:20px;background:rgba(3,4,9,.78);backdrop-filter:blur(6px)}.cc-confirm-dialog{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;width:min(440px,100%);padding:20px;border:1px solid #3b202d;border-radius:16px;background:linear-gradient(145deg,#19131b,#101219);box-shadow:0 24px 70px rgba(0,0,0,.55)}.cc-confirm-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:rgba(255,48,79,.13);color:#ff4965;font-size:20px}.cc-confirm-copy h3{margin:7px 0 5px;font-size:18px}.cc-confirm-copy p{margin:0;color:#9ba2b3;font-size:11px;line-height:1.5}.cc-confirm-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px;padding-top:5px;border-top:1px solid rgba(255,255,255,.08)}.cc-confirm-actions .danger{border-color:rgba(255,48,79,.45);background:#8f1732;color:#fff}.cc-confirm-actions .danger:hover{border-color:#ff4965;background:#b31d3e}@media(max-width:700px){.cc-confirm-dialog{grid-template-columns:1fr}.cc-confirm-actions{grid-column:auto}}

.media-credit-button-cost{position:relative;display:inline-flex;align-items:center;gap:4px;margin-left:7px;padding:5px 7px;border-radius:999px;background:rgba(20,20,30,.34);color:#fff;font-size:11px;line-height:1}.media-credit-button-cost>i:first-child{color:#ffd15a;font-size:14px}.media-credit-button-cost>i:nth-of-type(2){color:rgba(255,255,255,.72);font-size:12px}.media-credit-button-popover{position:absolute;z-index:30;right:0;bottom:calc(100% + 10px);display:none;min-width:190px;padding:13px 14px;border:1px solid #363b4a;border-radius:11px;background:#20232e;box-shadow:0 14px 30px rgba(0,0,0,.45);color:#fff;text-align:left;white-space:normal}.media-credit-button-cost:hover .media-credit-button-popover,.media-credit-button-cost:focus-within .media-credit-button-popover{display:grid;gap:6px}.media-credit-button-popover strong,.media-credit-button-popover small{display:block}.media-credit-button-popover strong{font-size:12px}.media-credit-button-popover small{color:#aeb6c5;font-size:10px;line-height:1.4}.video-generator-form footer>button,.shorts-actions button{position:relative;overflow:visible;display:inline-flex;align-items:center;gap:6px}

.video-production-status{display:flex;align-items:center;gap:13px;margin-bottom:18px;padding:13px 15px;border:1px solid #343949;border-radius:12px;background:linear-gradient(135deg,#171923,#11131a)}.video-production-status-icon{display:grid;width:34px;height:34px;place-items:center;border-radius:9px;background:rgba(255,48,79,.13);color:#ff4965;font-size:18px}.video-production-status div{display:grid;gap:3px}.video-production-status small{color:#ff4965;font-size:9px;font-weight:800;letter-spacing:.12em}.video-production-status strong{font-size:13px;color:#f4f5f8}.video-production-status [data-video-production-status-detail]{color:#929aaa;font-size:10px;line-height:1.4}.video-generator-form.is-video-processing .video-production-status{border-color:#80651d;background:linear-gradient(135deg,#211b10,#15140f)}.video-generator-form.is-video-processing .video-production-status-icon{background:rgba(255,184,0,.13);color:#ffc14b}.video-generator-form.is-video-processing .video-production-status small{color:#ffc14b}.video-generator-form.is-video-ready .video-production-status{border-color:#3e7b60;background:linear-gradient(135deg,#10231d,#111a18)}.video-generator-form.is-video-ready .video-production-status-icon{background:rgba(74,210,143,.14);color:#62e3a2}.video-generator-form.is-video-ready .video-production-status small{color:#62e3a2}.video-generator-form.is-video-error .video-production-status{border-color:#87354b;background:linear-gradient(135deg,#28141b,#161219)}.video-generator-form.is-video-error .video-production-status-icon{background:rgba(255,75,105,.14);color:#ff7188}.video-generator-form.is-video-error .video-production-status small{color:#ff7188}.video-generator-form.is-video-ready>.video-generator-prompt,.video-generator-form.is-video-ready>.video-generator-grid,.video-generator-form.is-video-ready>.video-generator-frames,.video-generator-form.is-video-ready>.video-generator-reference,.video-generator-form.is-video-ready>.video-generator-rights,.video-generator-form.is-video-ready>footer{display:none!important}.video-generator-form.is-video-ready>.video-generator-result{margin-top:0;border-color:#3e7b60;background:linear-gradient(145deg,#151b1b,#11131a)}.video-generator-form.is-video-ready .video-generator-result:before{content:'ERGEBNIS';display:block;margin-bottom:8px;color:#62e3a2;font-size:9px;font-weight:800;letter-spacing:.12em}.video-generator-form.is-video-processing>.video-generator-result{border-color:#80651d}.video-generator-form.is-video-error>.video-generator-result{border-color:#87354b}
 .factory-sidebar-control:hover,.factory-sidebar-control.active{background:#181b24;color:#fff}.factory-sidebar-control.active{box-shadow:inset 2px 0 #ff304f}.factory-sidebar-control.active i{color:#ff304f}
/* Video generator result: keep the player large and the actions beside it. */
.video-generator-variants > article.video-history-variant-card,
.video-history-variants > article.video-history-variant-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 190px !important;
  grid-template-rows: auto 1fr !important;
  align-items: center;
  gap: 10px 16px;
  min-width: 0;
  padding: 14px !important;
  border: 1px solid #2b303b !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, #151821, #101218) !important;
  box-shadow: 0 14px 35px rgba(0, 0, 0, .2);
}

.video-generator-variants > article.video-history-variant-card > small,
.video-history-variants > article.video-history-variant-card > small {
  grid-column: 1 / -1;
  grid-row: 1;
  margin: 0;
  color: #ff3154;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.video-generator-variants > article.video-history-variant-card .video-history-player,
.video-history-variants > article.video-history-variant-card .video-history-player {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 49, 84, .34);
  border-radius: 12px;
  background: #07080d;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .24);
}

.video-generator-variants > article.video-history-variant-card .video-history-player video,
.video-history-variants > article.video-history-variant-card .video-history-player video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #07080d;
  color-scheme: dark;
}

.video-generator-variants > article.video-history-variant-card > .video-history-actions,
.video-history-variants > article.video-history-variant-card > .video-history-actions {
  grid-column: 2;
  grid-row: 2;
  display: grid !important;
  align-content: center;
  gap: 8px;
  min-width: 0;
}

.video-generator-variants > article.video-history-variant-card > .video-history-actions .cc-button,
.video-history-variants > article.video-history-variant-card > .video-history-actions .cc-button {
  width: 100%;
  min-height: 40px;
  justify-content: center;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .video-generator-variants > article.video-history-variant-card,
  .video-history-variants > article.video-history-variant-card {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
  }

  .video-generator-variants > article.video-history-variant-card .video-history-player,
  .video-history-variants > article.video-history-variant-card .video-history-player {
    grid-column: 1;
    grid-row: 2;
  }

  .video-generator-variants > article.video-history-variant-card > .video-history-actions,
  .video-history-variants > article.video-history-variant-card > .video-history-actions {
    grid-column: 1;
    grid-row: 3;
    display: flex !important;
    flex-wrap: wrap;
  }

  .video-generator-variants > article.video-history-variant-card > .video-history-actions .cc-button,
  .video-history-variants > article.video-history-variant-card > .video-history-actions .cc-button {
    width: auto;
    flex: 1 1 180px;
  }
}

/* Text-to-Speech ist eine gleichförmige Audiogalerie. Im Gegensatz zu Videos
   muss sie keine Hochkant- oder Quadratmedien einrasten lassen: vier gleich
   große Karten nutzen deshalb die ganze Arbeitsfläche auf breiten Displays. */
body.factory-page-active #workspace-body[data-tool="text-to-speech"] {
  width: 100%;
  max-width: none;
}
body.factory-page-active #workspace-body[data-tool="text-to-speech"] .speech-gallery,
body.factory-page-active #workspace-body[data-tool="text-to-speech"] .speech-gallery .video-history-gallery-grid {
  width: 100%;
  max-width: none;
}
body.factory-page-active #workspace-body[data-tool="text-to-speech"] .speech-gallery .video-history-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 14px;
}
body.factory-page-active #workspace-body[data-tool="text-to-speech"] .speech-gallery .video-history-gallery-card {
  grid-column: auto;
  aspect-ratio: 16 / 9;
}
@media (max-width: 1320px) {
  body.factory-page-active #workspace-body[data-tool="text-to-speech"] .speech-gallery .video-history-gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 860px) {
  body.factory-page-active #workspace-body[data-tool="text-to-speech"] .speech-gallery .video-history-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  body.factory-page-active #workspace-body[data-tool="text-to-speech"] .speech-gallery .video-history-gallery-grid {
    grid-template-columns: 1fr;
  }
}
/* Final overrides for the active video generator card. */
.video-generator-variants > article.video-history-variant-card,
.video-history-variants > article.video-history-variant-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 190px !important;
  grid-template-rows: auto 1fr !important;
  align-items: center;
  gap: 10px 16px;
  min-width: 0;
  padding: 14px !important;
  border: 1px solid #2b303b !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, #151821, #101218) !important;
  box-shadow: 0 14px 35px rgba(0, 0, 0, .2);
}
.video-generator-variants > article.video-history-variant-card > small,
.video-history-variants > article.video-history-variant-card > small {
  grid-column: 1 / -1;
  grid-row: 1;
  margin: 0;
  color: #ff3154;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.video-generator-variants > article.video-history-variant-card .video-history-player,
.video-history-variants > article.video-history-variant-card .video-history-player {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 49, 84, .34);
  border-radius: 12px;
  background: #07080d;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .24);
}
.video-generator-variants > article.video-history-variant-card .video-history-player video,
.video-history-variants > article.video-history-variant-card .video-history-player video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #07080d;
  color-scheme: dark;
}
.video-generator-variants > article.video-history-variant-card > .video-history-actions,
.video-history-variants > article.video-history-variant-card > .video-history-actions {
  grid-column: 2;
  grid-row: 2;
  display: grid !important;
  align-content: center;
  gap: 8px;
  min-width: 0;
}
.video-generator-variants > article.video-history-variant-card > .video-history-actions .cc-button,
.video-history-variants > article.video-history-variant-card > .video-history-actions .cc-button {
  width: 100%;
  min-height: 40px;
  justify-content: center;
  white-space: nowrap;
}
@media (max-width: 700px) {
  .video-generator-variants > article.video-history-variant-card,
  .video-history-variants > article.video-history-variant-card {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
  }
  .video-generator-variants > article.video-history-variant-card .video-history-player,
  .video-history-variants > article.video-history-variant-card .video-history-player {
    grid-column: 1;
    grid-row: 2;
  }
  .video-generator-variants > article.video-history-variant-card > .video-history-actions,
  .video-history-variants > article.video-history-variant-card > .video-history-actions {
    grid-column: 1;
    grid-row: 3;
    display: flex !important;
    flex-wrap: wrap;
  }
  .video-generator-variants > article.video-history-variant-card > .video-history-actions .cc-button,
  .video-history-variants > article.video-history-variant-card > .video-history-actions .cc-button {
    width: auto;
    flex: 1 1 180px;
  }
}
/* Active video-generator rebuild renderer. */
.video-ready-result .video-generator-variants {
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100%;
}
.video-ready-result .video-generator-variants > article.video-rebuild-variant-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 200px !important;
  grid-template-rows: auto 1fr !important;
  align-items: center;
  gap: 10px 18px;
  width: 100%;
  min-width: 0;
  padding: 14px !important;
  border: 1px solid rgba(255, 48, 79, .45) !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, #151821, #101218) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .22);
}
.video-ready-result .video-rebuild-variant-card > small {
  grid-column: 1 / -1;
  grid-row: 1;
  margin: 0;
  color: #ff3154;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
}
.video-ready-result .video-rebuild-player,
.video-history-detail-media .video-rebuild-player {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 48, 79, .32);
  border-radius: 12px;
  background: #07080d;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .25);
}
.video-ready-result .video-rebuild-player video,
.video-history-detail-media .video-rebuild-player video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 560px;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #07080d;
  color-scheme: dark;
}
.video-ready-result .video-rebuild-actions,
.video-history-detail-media .video-rebuild-actions {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  align-content: center;
  gap: 8px;
  min-width: 0;
}
.video-ready-result .video-rebuild-actions .cc-button,
.video-history-detail-media .video-rebuild-actions .cc-button {
  width: 100%;
  min-height: 40px;
  justify-content: center;
  white-space: nowrap;
}
.video-history-detail-media {
  grid-template-columns: minmax(0, 860px) 200px !important;
  gap: 18px !important;
  width: 100%;
  justify-content: start;
}
.video-rebuild-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 1.15fr);
  gap: 12px;
  margin: 14px 0 16px;
}
.video-rebuild-prompt,
.video-rebuild-config {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid rgba(255, 48, 79, .22);
  border-radius: 10px;
  background: #11141c;
}
.video-rebuild-prompt small,
.video-rebuild-config small {
  display: block;
  margin-bottom: 7px;
  color: #ff526a;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.video-rebuild-prompt p {
  margin: 0;
  color: #e7eaf1;
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.video-rebuild-config {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  border-color: rgba(255, 255, 255, .08);
}
.video-rebuild-config div {
  min-width: 0;
  padding: 8px 9px;
  border-radius: 7px;
  background: #191d28;
}
.video-rebuild-config div small {
  margin-bottom: 3px;
  color: #8992a7;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.video-rebuild-config strong {
  display: block;
  overflow: hidden;
  color: #f2f4f8;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 700px) {
  .video-ready-result .video-generator-variants > article.video-rebuild-variant-card,
  .video-rebuild-info,
  .video-history-detail-media {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
  }
  .video-rebuild-config {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .video-ready-result .video-rebuild-player,
  .video-history-detail-media .video-rebuild-player {
    grid-column: 1;
    grid-row: 1;
  }
  .video-ready-result .video-rebuild-actions,
  .video-history-detail-media .video-rebuild-actions {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-wrap: wrap;
  }
  .video-ready-result .video-rebuild-actions .cc-button,
  .video-history-detail-media .video-rebuild-actions .cc-button {
    width: auto;
    flex: 1 1 180px;
  }
}

/* Image-first video overview, matching the Thumbnail Maker without affecting other tools. */
body.factory-page-active #workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-overview{width:min(1400px,calc(100% - 80px));margin:0 auto}
body.factory-page-active #workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production{width:min(950px,calc(100% - 80px));margin:0 auto}
body.factory-page-active #factory-workspace .workspace-header:has(.video-rebuild-header-action){position:sticky;border-bottom:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
body.factory-page-active #factory-workspace .video-rebuild-header-action{position:absolute;left:50%;top:50%;display:grid;grid-template-columns:42px auto 25px;align-items:center;gap:11px;min-width:210px;height:56px;padding:6px 9px 6px 7px;overflow:hidden;border:1px solid rgba(255,72,105,.38);border-radius:16px;background:linear-gradient(115deg,rgba(42,19,29,.96),rgba(20,22,30,.98) 58%,rgba(15,17,24,.98));color:#fff;text-align:left;cursor:pointer;box-shadow:0 14px 38px rgba(0,0,0,.38),0 5px 24px rgba(255,35,71,.12),inset 0 1px rgba(255,255,255,.07);transform:translate(-50%,-50%);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
body.factory-page-active #factory-workspace .video-rebuild-header-action:before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 28%,rgba(255,255,255,.09) 48%,transparent 68%);transform:translateX(-130%);transition:transform .5s ease;pointer-events:none}
body.factory-page-active #factory-workspace .video-rebuild-header-action-icon{position:relative;z-index:1;display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:radial-gradient(circle at 32% 25%,#ff5c78,#ff2347 55%,#c70e35);box-shadow:0 7px 20px rgba(255,35,71,.32),inset 0 1px 1px rgba(255,255,255,.28)}
body.factory-page-active #factory-workspace .video-rebuild-header-action-icon svg{width:27px;height:27px;overflow:visible}
body.factory-page-active #factory-workspace .video-rebuild-header-action-icon .video-action-play{fill:#fff}
body.factory-page-active #factory-workspace .video-rebuild-header-action-icon .video-action-plus{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round}
body.factory-page-active #factory-workspace .video-rebuild-header-action-icon .shorts-action-art{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
body.factory-page-active #factory-workspace .shorts-history .cc-section-heading{align-items:center;justify-content:flex-start}
body.factory-page-active #factory-workspace .shorts-history .cc-section-heading h2{display:flex;align-items:center;gap:9px;margin:4px 0 2px}
body.factory-page-active #factory-workspace .shorts-history-count{display:inline-grid;min-width:24px;height:24px;padding:0 7px;font-size:9px;line-height:1}
body.factory-page-active #factory-workspace .video-rebuild-header-action-copy{position:relative;z-index:1;display:grid;gap:2px;white-space:nowrap}
body.factory-page-active #factory-workspace .video-rebuild-header-action-copy strong{font:750 12px/1.15 'Space Grotesk',sans-serif;letter-spacing:.01em}
body.factory-page-active #factory-workspace .video-rebuild-header-action-copy small{color:#a9afbd;font:600 9px/1.1 'Inter',sans-serif;letter-spacing:.035em}
body.factory-page-active #factory-workspace .video-rebuild-header-action-arrow{position:relative;z-index:1;display:grid;place-items:center;width:25px;height:25px;border-radius:9px;background:rgba(255,255,255,.06);color:#d8dce5;font-size:14px;transition:background .2s ease,transform .2s ease}
body.factory-page-active #factory-workspace .video-rebuild-header-action:hover{border-color:rgba(255,76,108,.75);box-shadow:0 17px 44px rgba(0,0,0,.43),0 8px 30px rgba(255,35,71,.2),inset 0 1px rgba(255,255,255,.09);transform:translate(-50%,calc(-50% - 2px))}
body.factory-page-active #factory-workspace .video-rebuild-header-action:hover:before{transform:translateX(130%)}
body.factory-page-active #factory-workspace .video-rebuild-header-action:hover .video-rebuild-header-action-arrow{background:rgba(255,46,80,.2);transform:translateX(2px)}
body.factory-page-active #factory-workspace .video-rebuild-header-action:active{transform:translate(-50%,-50%) scale(.985);box-shadow:0 8px 22px rgba(0,0,0,.35)}
body.factory-page-active #factory-workspace .workspace-header:has([data-video-rebuild-header-action])>div:first-child{display:none}
body.factory-page-active #factory-workspace [data-video-rebuild-header-action]{grid-template-columns:54px minmax(0,1fr) 32px;gap:14px;min-width:290px;height:72px;padding:8px 12px 8px 9px;border-radius:19px}
body.factory-page-active #factory-workspace [data-video-rebuild-header-action] .video-rebuild-header-action-icon{width:54px;height:54px;border-radius:16px}
body.factory-page-active #factory-workspace [data-video-rebuild-header-action] .video-rebuild-header-action-icon svg{width:32px;height:32px}
body.factory-page-active #factory-workspace [data-video-rebuild-header-action] .video-rebuild-header-action-copy{gap:4px}
body.factory-page-active #factory-workspace [data-video-rebuild-header-action] .video-rebuild-header-action-copy strong{font-size:15px}
body.factory-page-active #factory-workspace [data-video-rebuild-header-action] .video-rebuild-header-action-copy small{font-size:10px}
body.factory-page-active #factory-workspace [data-video-rebuild-header-action] .video-rebuild-header-action-arrow{width:32px;height:32px;border-radius:11px;font-size:17px}
body.factory-page-active #factory-workspace .workspace-header:has([data-thumbnail-rebuild-header-action])>div:first-child{display:none}
body.factory-page-active #factory-workspace [data-thumbnail-rebuild-header-action]{grid-template-columns:54px minmax(0,1fr) 32px;gap:14px;min-width:290px;height:72px;padding:8px 12px 8px 9px;border-radius:19px}
body.factory-page-active #factory-workspace [data-thumbnail-rebuild-header-action] .video-rebuild-header-action-icon{width:54px;height:54px;border-radius:16px}
body.factory-page-active #factory-workspace [data-thumbnail-rebuild-header-action] .video-rebuild-header-action-icon svg{width:32px;height:32px}
body.factory-page-active #factory-workspace [data-thumbnail-rebuild-header-action] .video-rebuild-header-action-copy{gap:4px}
body.factory-page-active #factory-workspace [data-thumbnail-rebuild-header-action] .video-rebuild-header-action-copy strong{font-size:15px}
body.factory-page-active #factory-workspace [data-thumbnail-rebuild-header-action] .video-rebuild-header-action-copy small{font-size:10px}
body.factory-page-active #factory-workspace [data-thumbnail-rebuild-header-action] .video-rebuild-header-action-arrow{width:32px;height:32px;border-radius:11px;font-size:17px}
body.factory-page-active #factory-workspace .workspace-header:has([data-shorts-header-action])>div:first-child{display:none}
body.factory-page-active #factory-workspace [data-shorts-header-action]{grid-template-columns:54px minmax(0,1fr) 32px;gap:14px;min-width:290px;height:72px;padding:8px 12px 8px 9px;border-radius:19px}
body.factory-page-active #factory-workspace [data-shorts-header-action] .video-rebuild-header-action-icon{width:54px;height:54px;border-radius:16px}
body.factory-page-active #factory-workspace [data-shorts-header-action] .video-rebuild-header-action-icon svg{width:32px;height:32px}
body.factory-page-active #factory-workspace [data-shorts-header-action] .video-rebuild-header-action-copy{gap:4px}
body.factory-page-active #factory-workspace [data-shorts-header-action] .video-rebuild-header-action-copy strong{font-size:15px}
body.factory-page-active #factory-workspace [data-shorts-header-action] .video-rebuild-header-action-copy small{font-size:10px}
body.factory-page-active #factory-workspace [data-shorts-header-action] .video-rebuild-header-action-arrow{width:32px;height:32px;border-radius:11px;font-size:17px}
body.factory-page-active #factory-workspace .workspace-close[hidden]{display:none!important}
body.factory-page-active #factory-workspace .workspace-header:has([data-generic-production-header-action])>div:first-child{display:none}
body.factory-page-active #factory-workspace .workspace-header:has([data-kanal-header-action])>div:first-child{display:none}
body.factory-page-active #factory-workspace :is([data-generic-production-header-action],[data-kanal-header-action]){grid-template-columns:54px minmax(0,1fr) 32px;gap:14px;min-width:290px;height:72px;padding:8px 12px 8px 9px;border-radius:19px}
body.factory-page-active #factory-workspace :is([data-generic-production-header-action],[data-kanal-header-action]) .video-rebuild-header-action-icon{width:54px;height:54px;border-radius:16px}
body.factory-page-active #factory-workspace :is([data-generic-production-header-action],[data-kanal-header-action]) .video-rebuild-header-action-icon>i{color:#fff;font-size:29px;line-height:1}
body.factory-page-active #factory-workspace :is([data-generic-production-header-action],[data-kanal-header-action]) .video-rebuild-header-action-copy{gap:4px}
body.factory-page-active #factory-workspace :is([data-generic-production-header-action],[data-kanal-header-action]) .video-rebuild-header-action-copy strong{font-size:15px}
body.factory-page-active #factory-workspace :is([data-generic-production-header-action],[data-kanal-header-action]) .video-rebuild-header-action-copy small{font-size:10px}
body.factory-page-active #factory-workspace :is([data-generic-production-header-action],[data-kanal-header-action]) .video-rebuild-header-action-arrow{width:32px;height:32px;border-radius:11px;font-size:17px}
body.factory-page-active #workspace-body:is([data-tool="creator-content-ideas-generator"],[data-tool="youtube-keyword-research"],[data-tool="creator-content-calendar"],[data-tool="youtube-video-script-generator"],[data-tool="media-transcription-shared"],[data-tool="media-dubbing-shared"],[data-tool="youtube-publisher"])>.tool-page-hero,
body.factory-page-active #workspace-body:is([data-tool="creator-content-ideas-generator"],[data-tool="youtube-keyword-research"],[data-tool="creator-content-calendar"],[data-tool="youtube-video-script-generator"],[data-tool="media-transcription-shared"],[data-tool="media-dubbing-shared"],[data-tool="youtube-publisher"])>.tool-page-stats{display:none!important}
#workspace-body[data-tool="video-generator"] .is-video-overview .video-generator-tool-hero{margin-bottom:34px}
#workspace-body[data-tool="video-generator"] .is-video-overview .video-generator-tool-hero>span{display:grid;place-items:center}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"],[data-tool="text-to-speech"]) .video-history-gallery{margin:0}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"],[data-tool="text-to-speech"]) .video-history-gallery>header{display:flex;align-items:center;margin-bottom:20px}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"],[data-tool="text-to-speech"]) .video-history-gallery>header h3{display:flex;align-items:center;gap:10px;margin:0;color:#f5f6f8;font:650 22px/1.2 'Space Grotesk',sans-serif}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"],[data-tool="text-to-speech"]) .video-history-gallery [data-video-history-count]{display:inline-grid;place-items:center;min-width:28px;height:25px;padding:0 8px;border:1px solid #303542;border-radius:99px;background:#171b24;color:#c8ceda;font:800 11px/1 'Space Grotesk',sans-serif}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"],[data-tool="text-to-speech"]) .video-history-gallery-card{position:relative;overflow:hidden;border:1px solid #252a34;border-radius:14px;background:#0d1016;box-shadow:0 14px 32px rgba(0,0,0,.2);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"],[data-tool="text-to-speech"]) .video-history-gallery-open{display:block;width:100%;height:100%;padding:0;border:0;background:#090b10;color:#fff;cursor:pointer}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"],[data-tool="text-to-speech"]) .video-history-gallery-open video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;transition:transform .28s ease,filter .2s ease}
/* Poster-Vorschau (31.08.2026): das kleine JPEG liegt ueber dem (noch
   leeren) Video-Element und blendet aus, sobald die Hover-Vorschau laeuft. */
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"],[data-tool="text-to-speech"]) .video-history-gallery-open{position:relative}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"],[data-tool="text-to-speech"]) .video-history-poster{position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:cover;pointer-events:none;transition:opacity .2s ease}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"],[data-tool="text-to-speech"]) .video-history-poster[hidden]{display:none}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"],[data-tool="text-to-speech"]) .video-history-gallery-card.is-previewing .video-history-poster{opacity:0}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"],[data-tool="text-to-speech"]) .video-history-gallery-delete{position:absolute;z-index:2;top:10px;right:10px;display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid rgba(255,255,255,.14);border-radius:9px;background:rgba(8,10,15,.78);color:#c7ccd6;cursor:pointer;opacity:0;transition:opacity .18s ease,border-color .18s ease,color .18s ease;backdrop-filter:blur(8px)}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"],[data-tool="text-to-speech"]) .video-history-gallery-card:hover,#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"],[data-tool="text-to-speech"]) .video-history-gallery-card.is-selected,#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"],[data-tool="text-to-speech"]) .video-history-gallery-card:focus-within{border-color:rgba(255,48,79,.7);box-shadow:0 18px 38px rgba(0,0,0,.3),0 0 0 2px rgba(255,48,79,.12);transform:translateY(-2px)}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"],[data-tool="text-to-speech"]) .video-history-gallery-card:hover video,#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"],[data-tool="text-to-speech"]) .video-history-gallery-card:focus-within video{filter:brightness(.78);transform:scale(1.025)}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"],[data-tool="text-to-speech"]) .video-history-gallery-card:hover .video-history-gallery-delete,#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"],[data-tool="text-to-speech"]) .video-history-gallery-card:focus-within .video-history-gallery-delete{opacity:1;transform:none}
/* Herunterladen direkt aus dem Verlauf (01.09.2026): dieselbe Anordnung
   wie im Thumbnail-Verlauf - Muelleimer links, Download rechts. */
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"],[data-tool="text-to-speech"]) .video-history-gallery-delete{right:auto;left:10px}
/* Beide Knoepfe dauerhaft sichtbar wie im Thumbnail-Verlauf (01.09.2026):
   ein Knopf, den man erst beim Zeigen findet, ist auf Touch-Geraeten gar
   nicht auffindbar. */
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"],[data-tool="text-to-speech"]) .video-history-gallery-download{position:absolute;z-index:2;top:10px;right:10px;display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid rgba(255,255,255,.14);border-radius:9px;background:rgba(8,10,15,.78);color:#c7ccd6;font-size:17px;cursor:pointer;opacity:.82;transition:opacity .18s ease,border-color .18s ease,color .18s ease;backdrop-filter:blur(8px)}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"],[data-tool="text-to-speech"]) .video-history-gallery-card:hover .video-history-gallery-download,#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"],[data-tool="text-to-speech"]) .video-history-gallery-card:focus-within .video-history-gallery-download{opacity:1}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"],[data-tool="text-to-speech"]) .video-history-gallery-delete{opacity:.82}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"],[data-tool="text-to-speech"]) .video-history-gallery-download:hover{border-color:rgba(255,48,79,.7);color:#fff}
/* Waehrend des Ladens bleibt der Knopf sichtbar, auch ohne Mauszeiger. */
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"],[data-tool="text-to-speech"]) .video-history-gallery-download[data-loading]{opacity:1}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"],[data-tool="text-to-speech"]) .video-history-gallery-download .mdi-loading{font-size:15px}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"],[data-tool="text-to-speech"]) .video-history-gallery-delete:hover{border-color:#ff304f;color:#ff6078}
#workspace-body .video-history-gallery-empty,#workspace-body .tool-history-empty{display:grid;justify-items:center;gap:8px;padding:30px 20px;color:#818999;text-align:center}
#workspace-body .video-history-gallery.is-empty{margin:30px 0 0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
#workspace-body[data-tool="shorts-reels-cutter-briefing"] .shorts-history:has(>.cc-empty){margin:30px 0 0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
#workspace-body[data-tool="shorts-reels-cutter-briefing"] .shorts-history:has(>.cc-empty)>.cc-empty{display:grid;justify-items:center;gap:8px;padding:30px 20px;color:#818999;text-align:center}
#workspace-body[data-tool="shorts-reels-cutter-briefing"] .shorts-history:has(>.cc-empty)>.cc-empty i{color:#ff304f;font-size:34px}
#workspace-body[data-tool="shorts-reels-cutter-briefing"] .shorts-history:has(>.cc-empty)>.cc-empty h3{margin:0;color:#e4e7ed;font-size:14px}
#workspace-body[data-tool="shorts-reels-cutter-briefing"] .shorts-history:has(>.cc-empty)>.cc-empty p{margin:0;font-size:12px}
body.factory-page-active #factory-workspace .shorts-history:has(.cc-empty){margin:30px 0 0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
body.factory-page-active #workspace-body[data-tool="shorts-reels-cutter-briefing"] .shorts-history{border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
body.factory-page-active #workspace-body[data-tool="shorts-reels-cutter-briefing"] .cc-card,
body.factory-page-active #workspace-body[data-tool="shorts-reels-cutter-briefing"] .shorts-history,
body.factory-page-active #workspace-body[data-tool="shorts-reels-cutter-briefing"] .shorts-history .cc-empty{border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
body.factory-page-active #workspace-body[data-tool="thumbnail-banner-maker"]>.thumbnail-history,
body.factory-page-active #workspace-body[data-tool="thumbnail-banner-maker"]>.video-generator-history{margin:30px 0 0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
body.factory-page-active #workspace-body>.factory-empty-state-shell{width:min(1400px,calc(100% - 80px));max-width:none;margin:0 auto;padding-top:0}
body.factory-page-active #workspace-body>.factory-empty-state-shell>.factory-empty-state{margin:0!important;padding:30px 20px!important}
body.factory-page-active #workspace-body[data-tool="thumbnail-banner-maker"]>.factory-empty-state-shell,
body.factory-page-active #workspace-body[data-tool="social-media-post-banner-generator"]>.factory-empty-state-shell,
body.factory-page-active #workspace-body[data-tool="shorts-reels-cutter-briefing"]>.factory-empty-state-shell{transform:none}

/* Gemeinsame Empty-State-Vorlage fuer alle Produktionswerkzeuge. Die Regeln
   stehen bewusst am Ende, damit alte tool-spezifische Verlaufskarten keine
   abweichenden Margins, Boxen oder Schriftvererbung mehr durchsetzen. */
body.factory-page-active #workspace-body>.factory-empty-state-shell,
body.factory-page-active #workspace-body>.factory-empty-state-shell.cc-shell.cc-video-generator-shell{
  display:block!important;
  box-sizing:border-box!important;
  width:min(1400px,calc(100% - 80px))!important;
  max-width:none!important;
  min-height:0!important;
  margin:0 auto!important;
  padding:0!important;
  position:relative!important;
  top:0!important;
  transform:none!important;
  font:13px/1.45 'DM Sans',sans-serif!important;
}
body.factory-page-active #workspace-body>.factory-empty-state-shell>.factory-empty-state,
body.factory-page-active #workspace-body>.factory-empty-state-shell>.factory-empty-state.video-history-gallery.is-empty{
  display:grid!important;
  box-sizing:border-box!important;
  width:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:30px 20px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  justify-items:center!important;
  gap:8px!important;
  color:#818999!important;
  text-align:center!important;
}
body.factory-page-active #workspace-body>.factory-empty-state-shell .factory-empty-state .video-history-gallery-empty,
body.factory-page-active #workspace-body>.factory-empty-state-shell .factory-empty-state .tool-history-empty{
  display:grid!important;
  justify-items:center!important;
  gap:8px!important;
  margin:0!important;
  padding:0!important;
  color:#818999!important;
  text-align:center!important;
}
body.factory-page-active #workspace-body>.factory-empty-state-shell .factory-empty-state i{margin:0!important;color:#ff304f!important;font-size:34px!important;line-height:1!important}
body.factory-page-active #workspace-body>.factory-empty-state-shell .factory-empty-state strong{margin:0!important;color:#e4e7ed!important;font:700 14px/1.3 'DM Sans',sans-serif!important}
body.factory-page-active #workspace-body>.factory-empty-state-shell .factory-empty-state p{margin:0!important;color:#818999!important;font:400 12px/1.45 'DM Sans',sans-serif!important;white-space:nowrap!important}
@media(max-width:650px){body.factory-page-active #workspace-body>.factory-empty-state-shell .factory-empty-state p{white-space:normal!important}}
body.factory-page-active #workspace-body .speech-gallery:has(>.tool-history-empty),
body.factory-page-active #workspace-body [data-dubbing-history].is-empty{display:grid!important;box-sizing:border-box!important;width:min(1400px,calc(100% - 80px))!important;max-width:none!important;margin:0 auto!important;padding:30px 20px!important;border:0!important;background:transparent!important;box-shadow:none!important;justify-items:center!important;gap:8px!important;text-align:center!important}
body.factory-page-active #workspace-body .speech-gallery:has(>.tool-history-empty)>header{display:none!important}
body.factory-page-active #workspace-body .speech-gallery:has(>.tool-history-empty)>.tool-history-empty,
body.factory-page-active #workspace-body [data-dubbing-history].is-empty>.video-history-gallery-empty{display:grid!important;justify-items:center!important;gap:8px!important;margin:0!important;padding:0!important;color:#818999!important;text-align:center!important}
body.factory-page-active #factory-workspace .thumbnail-history.is-empty,
body.factory-page-active #factory-workspace .video-generator-history.is-empty,
body.factory-page-active #factory-workspace .video-history-gallery-empty{border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important}
#workspace-body .video-history-gallery-empty i,#workspace-body .tool-history-empty i{color:#ff304f;font-size:34px}
#workspace-body .video-history-gallery-empty strong,#workspace-body .tool-history-empty strong{color:#e4e7ed}
#workspace-body .video-history-gallery-empty h3{margin:0;color:#e4e7ed;font-size:14px}
#workspace-body .video-history-gallery-empty p,#workspace-body .tool-history-empty p{margin:0;font-size:12px}
#workspace-body[data-tool="video-generator"] .is-video-overview>.video-history-detail{margin:28px 0 0;padding:22px;border-radius:16px}
#workspace-body[data-tool="video-generator"] .is-video-overview .video-history-detail-media{grid-template-columns:minmax(0,900px) 220px;align-items:center}
#workspace-body[data-tool="video-generator"] .is-video-overview .video-history-detail-media .video-rebuild-actions{display:grid;gap:9px}
#workspace-body[data-tool="video-generator"] .is-video-overview .video-history-detail-media .cc-button{width:100%;justify-content:center}
@media(max-width:1050px){#workspace-body[data-tool="video-generator"] .is-video-overview .video-history-detail-media{grid-template-columns:1fr}}
@media(max-width:650px){body.factory-page-active #workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-overview,body.factory-page-active #workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production{width:calc(100% - 32px)}#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"],[data-tool="text-to-speech"]) .video-history-gallery-delete{opacity:1;transform:none}}

/* Model-aware video inputs */
#workspace-body[data-tool="video-generator"] .video-generator-grid label>small{min-height:16px;color:#8d96aa;font-size:10px;line-height:1.45}
#workspace-body[data-tool="video-generator"] .video-manual-images{display:grid;gap:14px;padding:16px;border:1px solid #303544;border-radius:13px;background:linear-gradient(145deg,rgba(255,48,79,.055),rgba(17,18,26,.92))}
#workspace-body[data-tool="video-generator"] .video-manual-images[hidden]{display:none!important}
#workspace-body[data-tool="video-generator"] .video-manual-images>header{display:grid;gap:4px}
#workspace-body[data-tool="video-generator"] .video-manual-images>header strong{color:#f6f7fb;font-size:13px}
#workspace-body[data-tool="video-generator"] .video-manual-images>header small{color:#929bad;font-size:10px;line-height:1.45}
#workspace-body[data-tool="video-generator"] .video-image-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
#workspace-body[data-tool="video-generator"] .video-image-choice-grid>button{display:grid;grid-template-columns:36px 1fr;column-gap:11px;align-items:center;padding:14px;border:1px solid #383d4c;border-radius:11px;background:#171923;color:#fff;text-align:left;cursor:pointer;transition:border-color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease}
#workspace-body[data-tool="video-generator"] .video-image-choice-grid>button:hover{border-color:#545b6e;transform:translateY(-1px)}
#workspace-body[data-tool="video-generator"] .video-image-choice-grid>button.is-selected{border-color:#ff304f;background:linear-gradient(135deg,rgba(255,48,79,.18),rgba(34,21,29,.95));box-shadow:0 8px 24px rgba(255,48,79,.11)}
#workspace-body[data-tool="video-generator"] .video-image-choice-grid>button>span{grid-row:1/3;display:grid;width:36px;height:36px;place-items:center;border-radius:10px;background:#242735;color:#aab2c3;font-size:18px}
#workspace-body[data-tool="video-generator"] .video-image-choice-grid>button.is-selected>span{background:#ff304f;color:#fff;box-shadow:0 6px 16px rgba(255,48,79,.25)}
#workspace-body[data-tool="video-generator"] .video-image-choice-grid b{font-size:12px;line-height:1.35}
#workspace-body[data-tool="video-generator"] .video-image-choice-grid small{margin-top:3px;color:#8f98aa;font-size:9px;line-height:1.4}
#workspace-body[data-tool="video-generator"] .video-generator-toggle{display:flex!important;align-items:center;gap:12px!important;cursor:pointer}
#workspace-body[data-tool="video-generator"] .video-generator-toggle input{width:20px;height:20px;flex:0 0 auto;accent-color:#ff304f}
#workspace-body[data-tool="video-generator"] .video-generator-toggle>span{display:grid;gap:3px}
#workspace-body[data-tool="video-generator"] .video-generator-toggle strong{color:#f5f6fa;font-size:13px}
#workspace-body[data-tool="video-generator"] .video-generator-toggle small{color:#929bad;font-size:11px}
#workspace-body[data-tool="video-generator"] .video-manual-images-panel{display:grid;gap:14px;padding-top:14px;border-top:1px solid #303544}
#workspace-body[data-tool="video-generator"] .video-manual-images-panel[hidden],#workspace-body[data-tool="video-generator"] .video-manual-image-fields[hidden]{display:none!important}
#workspace-body[data-tool="video-generator"] .video-manual-image-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
#workspace-body[data-tool="video-generator"] .video-manual-image-fields label{padding:14px;border:1px solid #303544;border-radius:11px;background:#151720}
#workspace-body[data-tool="video-generator"] .video-manual-image-fields input[type="file"]{width:100%;padding:11px;border:1px dashed #4a5062;border-radius:9px;background:#101119;color:#cbd1de;font-size:11px;font-weight:500}
#workspace-body[data-tool="video-generator"] .video-manual-image-fields input[type="file"]::file-selector-button{margin-right:10px;padding:7px 10px;border:0;border-radius:7px;background:#2a2e3b;color:#fff;cursor:pointer;font-weight:700}
#workspace-body[data-tool="video-generator"] .video-manual-image-preview{display:flex;flex-wrap:wrap;gap:9px}
#workspace-body[data-tool="video-generator"] .video-manual-image-preview:empty{display:none}
#workspace-body[data-tool="video-generator"] .video-manual-image-preview>span{display:grid;grid-template-columns:auto 1fr;column-gap:8px;min-width:170px;padding:10px 12px;border:1px solid rgba(255,48,79,.3);border-radius:9px;background:rgba(255,48,79,.07)}
#workspace-body[data-tool="video-generator"] .video-manual-image-preview i{grid-row:1/3;align-self:center;color:#ff4965;font-size:20px}
#workspace-body[data-tool="video-generator"] .video-manual-image-preview img{grid-row:1/3;align-self:center;width:38px;height:38px;border:1px solid rgba(255,255,255,.12);border-radius:7px;object-fit:cover}
#workspace-body[data-tool="video-generator"] .video-manual-image-preview b{color:#f7f8fb;font-size:11px}
#workspace-body[data-tool="video-generator"] .video-manual-image-preview small{overflow:hidden;max-width:210px;color:#9ba4b7;font-size:9px;text-overflow:ellipsis;white-space:nowrap}
#workspace-body[data-tool="video-generator"] .video-generator-rights-notice{display:flex;align-items:flex-start;gap:9px;margin:0;padding:11px 13px;border:1px solid #303544;border-radius:10px;background:#151720;color:#aeb6c6;font-size:10px;line-height:1.5}
#workspace-body[data-tool="video-generator"] .video-generator-rights-notice i{flex:0 0 auto;margin-top:1px;color:#ff4965;font-size:15px}
@media(max-width:760px){#workspace-body[data-tool="video-generator"] .video-image-choice-grid,#workspace-body[data-tool="video-generator"] .video-manual-image-fields{grid-template-columns:1fr}}

/* Compact video production form and animated prompt examples */
#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-generator-form{gap:12px;padding:16px;border-radius:14px}
#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-generator-form label{gap:5px}
#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-generator-prompt textarea{min-height:112px;padding:14px 15px;font-size:15px;line-height:1.55}
#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-generator-prompt textarea::placeholder{color:#aeb6c8;font-size:15px;font-weight:600;opacity:.9}
#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-generator-prompt>small{font-size:9px}
#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-generator-grid{gap:10px}
#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-generator-grid .cc-select{min-height:38px;padding-top:8px;padding-bottom:8px}
#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-generator-grid label>small{min-height:12px;font-size:9px}
#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-manual-images{gap:10px;padding:12px}
#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-image-choice-grid{gap:9px}
#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-image-choice-grid>button{grid-template-columns:30px 1fr;column-gap:9px;padding:10px 11px}
#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-image-choice-grid>button>span{width:30px;height:30px;border-radius:8px;font-size:16px}
#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-manual-images-panel{gap:10px;padding-top:10px}
#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-manual-image-fields label{padding:11px}
#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-generator-rights-notice{padding:8px 11px}
#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-generator-result{margin-top:0;padding:13px 15px;border-radius:12px}
#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-generator-form footer{padding-top:2px}

/* Denser video studio, keeping the production controls left aligned. */
body.factory-page-active #workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production{width:min(860px,calc(100% - 80px));margin-left:max(40px,calc((100% - 1400px)/2));margin-right:0}
#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .tool-run-toolbar{margin-bottom:10px}
#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-generator-form{gap:8px;padding:12px}
#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-generator-prompt textarea{min-height:86px;padding:11px 13px}
#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-generator-grid{gap:7px 8px}
#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-generator-grid .cc-select{min-height:34px;padding-top:6px;padding-bottom:6px}
#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-generator-grid label>small{min-height:9px;line-height:1.25}
#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-manual-images{gap:7px;padding:9px 10px;border-radius:11px}
#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-image-choice-grid{gap:7px}
#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-image-choice-grid>button{grid-template-columns:26px 1fr;column-gap:8px;padding:8px 9px}
#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-image-choice-grid>button>span{width:26px;height:26px;font-size:14px}
#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-image-choice-grid b{font-size:11px}
#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-image-choice-grid small{font-size:8px}
#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-generator-rights-notice{padding:7px 9px;line-height:1.35}
#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-generator-result{padding:9px 11px}
#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-generator-result .video-generator-feedback-idle{min-height:30px}
@media(max-width:950px){body.factory-page-active #workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production{width:calc(100% - 32px);margin:0 auto}}

/* Hard compact override: older textarea and shell rules use !important. */
body.factory-page-active #workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production{box-sizing:border-box;width:min(820px,calc(100% - 48px))!important;max-width:820px!important;margin:0 0 0 24px!important}
#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-generator-form{box-sizing:border-box;width:100%;gap:6px!important;padding:10px!important}
#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-generator-prompt textarea{height:78px!important;min-height:78px!important;max-height:150px;padding:10px 12px!important;resize:vertical}
#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-generator-grid{gap:5px 7px!important}
#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-generator-grid .cc-select{min-height:32px!important;padding:5px 10px!important}
#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-generator-grid label>small{min-height:0!important;margin-top:-2px;font-size:8px!important}
#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-manual-images{gap:5px!important;padding:7px 8px!important}
#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-manual-images>header{gap:1px}
#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-image-choice-grid>button{padding:6px 8px!important}
#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-generator-rights-notice{padding:6px 8px!important}
#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-generator-result:has(.video-generator-feedback-idle){display:none!important}
#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-generator-form footer{margin:0!important;padding:4px 0 0!important}
@media(max-width:870px){body.factory-page-active #workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production{width:calc(100% - 32px)!important;margin:0 auto!important}}

/* Video prompt composer: configuration opens from the icon summary like an AI chat box. */
#workspace-body[data-tool="video-generator"] .video-generator-form.is-chat-composer{position:relative;display:grid;gap:6px!important;padding:10px!important;border-color:#343947;border-radius:20px!important;background:#181b24;box-shadow:0 16px 36px rgba(0,0,0,.18);overflow:visible}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-generator-prompt{position:relative;font-size:0!important}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-generator-prompt>label{display:none}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-generator-prompt>small{display:none}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-generator-prompt textarea{height:96px!important;min-height:96px!important;max-height:180px;padding:12px 54px 12px 13px!important;border:0!important;border-radius:14px;background:transparent!important;box-shadow:none!important;font-size:15px!important;resize:vertical}
#workspace-body[data-tool="video-generator"] .video-prompt-optimize-button{position:absolute;z-index:2;top:8px;right:8px;display:grid;width:34px;height:34px;place-items:center;padding:0;border:1px solid #3a4151;border-radius:10px;background:#222631;color:#ff526c;font-size:17px;cursor:pointer;box-shadow:0 7px 18px rgba(0,0,0,.2);transition:border-color .18s ease,background .18s ease,transform .18s ease}
#workspace-body[data-tool="video-generator"] .video-prompt-optimize-button:hover{border-color:#ff526c;background:rgba(255,48,79,.12);transform:translateY(-1px)}
#workspace-body[data-tool="video-generator"] .video-prompt-optimize-button[aria-busy="true"]{cursor:wait;transform:none}
#workspace-body[data-tool="video-generator"] .video-prompt-optimize-button:after{position:absolute;top:50%;right:calc(100% + 9px);width:max-content;max-width:240px;padding:7px 9px;border:1px solid #3a4151;border-radius:8px;background:#171a22;color:#f1f3f7;content:attr(data-tooltip);font-size:10px;font-weight:650;line-height:1.35;opacity:0;pointer-events:none;transform:translate(5px,-50%);transition:opacity .16s ease,transform .16s ease}
#workspace-body[data-tool="video-generator"] .video-prompt-optimize-button:hover:after,#workspace-body[data-tool="video-generator"] .video-prompt-optimize-button:focus-visible:after{opacity:1;transform:translate(0,-50%)}
#workspace-body[data-tool="video-generator"] .video-prompt-optimize-feedback{position:absolute;z-index:2;top:48px;right:9px;max-width:260px;color:#aeb6c8;font-size:9px!important;line-height:1.35;text-align:right;pointer-events:none}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-chat-actions>[data-video-rebuild-start]:disabled{border-color:#343946;background:#262a35;color:#7f8797;box-shadow:none;cursor:not-allowed;opacity:.7}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-chat-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;padding-top:3px}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-config-trigger{display:flex;align-items:center;min-width:0;max-width:calc(100% - 150px);min-height:38px;padding:5px 8px 5px 10px;border:1px solid #303543;border-radius:999px;background:#222631;color:#eef1f6;cursor:pointer;font:inherit}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-config-trigger:hover,#workspace-body[data-tool="video-generator"] .is-chat-composer.is-config-open .video-config-trigger{border-color:#555d70;background:#292e3a}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-config-trigger>[data-video-config-summary]{display:flex;align-items:center;gap:8px;min-width:0}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-config-trigger span span{display:inline-flex;align-items:center;gap:4px;color:#d6dae4;font-size:10px;font-weight:700;white-space:nowrap}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-config-trigger span span:first-child{overflow:hidden;max-width:150px;text-overflow:ellipsis}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-config-trigger span i{color:#aeb6c8;font-size:14px}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-config-trigger>i{margin-left:7px;color:#9099ab;font-size:16px;transition:transform .18s ease}
#workspace-body[data-tool="video-generator"] .is-chat-composer.is-config-open .video-config-trigger>i{transform:rotate(180deg)}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-chat-actions>[data-video-rebuild-start]{min-height:38px;padding:8px 12px;border-radius:999px;white-space:nowrap}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-config-popover{position:absolute;z-index:20;left:10px;bottom:58px;display:grid;gap:10px;width:min(560px,calc(100% - 20px));max-height:min(620px,70vh);padding:12px;border:1px solid #373d4d;border-radius:18px;background:#1d202a;box-shadow:0 24px 60px rgba(0,0,0,.58);overflow:auto}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-config-popover[hidden]{display:none!important}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-config-popover>header{display:grid;grid-template-columns:32px minmax(0,1fr) 30px;align-items:center;gap:9px;padding-bottom:9px;border-bottom:1px solid #303542}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-config-popover>header>span{display:grid;width:32px;height:32px;place-items:center;border-radius:10px;background:rgba(255,48,79,.13);color:#ff4965;font-size:16px}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-config-popover>header div{display:grid;gap:2px}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-config-popover>header small{color:#ff526c;font-size:8px;font-weight:800;letter-spacing:.12em}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-config-popover>header strong{font-size:12px}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-config-popover>header button{display:grid;width:30px;height:30px;place-items:center;padding:0;border:1px solid #343947;border-radius:9px;background:#242833;color:#adb5c5;cursor:pointer}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-config-popover>.video-generator-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-config-popover .video-manual-images{margin:0}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-config-popover .video-generator-rights-notice{margin:0}
@media(max-width:650px){#workspace-body[data-tool="video-generator"] .is-chat-composer .video-config-trigger span span:nth-child(2),#workspace-body[data-tool="video-generator"] .is-chat-composer .video-config-trigger span span:nth-child(3){display:none}#workspace-body[data-tool="video-generator"] .is-chat-composer .video-config-popover{position:static;width:auto;max-height:none}#workspace-body[data-tool="video-generator"] .is-chat-composer .video-config-popover>.video-generator-grid{grid-template-columns:1fr}#workspace-body[data-tool="video-generator"] .is-chat-composer .video-config-trigger{max-width:calc(100% - 122px)}#workspace-body[data-tool="video-generator"] .is-chat-composer .video-chat-actions>[data-video-rebuild-start]{font-size:0}#workspace-body[data-tool="video-generator"] .is-chat-composer .video-chat-actions>[data-video-rebuild-start]>i,#workspace-body[data-tool="video-generator"] .is-chat-composer .video-chat-actions>[data-video-rebuild-start] .media-credit-button-cost{font-size:11px}}

/* Fehl- und Statusmeldungen im Chat-Composer (29.08.2026): Die Ergebnis-
   Sektion liegt im Formularfluss HINTER den unten angehefteten Bedienleisten
   (Frame-Dock, Einstellungen, Startknopf) - eine Fehlermeldung war dadurch
   teilweise verdeckt und unlesbar. Sobald sie Inhalt hat, schwebt sie wie
   das Einstellungs-Popover ueber den Leisten. */
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-generator-result:not(:empty){
  position:absolute;
  z-index:21;
  right:10px;
  bottom:58px;
  left:10px;
  margin:0;
  padding:12px 14px!important;
  border:1px solid rgba(255,73,101,.5);
  border-radius:14px!important;
  background:#1d202a;
  box-shadow:0 24px 60px rgba(0,0,0,.58);
}
/* Die Credit-Hinweiskarte soll nicht wie ein harter Fehler wirken - der
   Rahmen wechselt deshalb vom Alarmrot zu einem warmen Bernstein. */
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-generator-result:has(.video-credit-shortage){border-color:rgba(255,185,72,.45)}

/* Tall composer keeps the expanded configuration fully inside the chat box. */
#workspace-body[data-tool="video-generator"] .video-generator-form.is-chat-composer{min-height:250px}
#workspace-body[data-tool="video-generator"] .video-generator-form.is-chat-composer.is-config-open{min-height:390px}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-generator-prompt textarea{height:170px!important;min-height:170px!important;max-height:320px}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-chat-actions{align-self:end}
@media(max-width:650px){#workspace-body[data-tool="video-generator"] .video-generator-form.is-chat-composer{min-height:215px}#workspace-body[data-tool="video-generator"] .video-generator-form.is-chat-composer.is-config-open{min-height:280px}#workspace-body[data-tool="video-generator"] .is-chat-composer .video-generator-prompt textarea{height:150px!important;min-height:150px!important;max-height:340px}}

/* Model-aware frame tiles and vidIQ-like segmented switches inside the composer. */
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-chat-frame-dock{display:flex;align-items:stretch;gap:8px;padding:2px 2px 3px}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-chat-frame-dock[hidden]{display:none!important}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-chat-frame-tile{position:relative;display:grid!important;grid-template-columns:23px minmax(0,1fr);align-items:center;gap:7px;width:112px;height:42px;padding:6px 8px!important;border:1px solid rgba(137,147,169,.24);border-radius:12px;background:linear-gradient(145deg,rgba(42,47,60,.96),rgba(29,33,43,.98));color:#f5f7fb;box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 5px 14px rgba(0,0,0,.15);cursor:pointer;overflow:hidden;transition:border-color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-chat-frame-tile[hidden]{display:none!important}
/* Nicht unterstuetzte Kacheln (31.08.2026): sichtbar, aber halb transparent
   und ohne Interaktion - so ist erkennbar, dass das gewaehlte Modell z. B.
   kein Endbild oder keine Referenzbilder annimmt. */
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-chat-frame-tile.is-unsupported{opacity:.38;filter:saturate(.35);cursor:not-allowed}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-chat-frame-tile.is-unsupported:hover{border-color:rgba(137,147,169,.24);background:linear-gradient(145deg,rgba(42,47,60,.96),rgba(29,33,43,.98));box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 5px 14px rgba(0,0,0,.15);transform:none}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-chat-frame-tile.is-unsupported input[type="file"]{cursor:not-allowed}
/* Drag & Drop (31.08.2026): Die Kachel, ueber der gerade ein Bild oder eine
   andere Kachel schwebt, leuchtet als Abwurfziel auf. */
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-chat-frame-tile.is-drop-target{border-color:#ffb948;background:linear-gradient(145deg,rgba(255,185,72,.16),#242832);box-shadow:0 0 0 2px rgba(255,185,72,.32),0 6px 16px rgba(0,0,0,.18);transform:translateY(-1px)}
/* Die Miniatur IN der Kachel bleibt seit dem 07.09.2026 unsichtbar: die
   Bilder stehen als eigene Anhaenge unter den Kacheln (.video-chat-attachments,
   wie beim Thumbnail-Werkzeug). Das <img> bleibt im DOM, weil das Skript dort
   weiterhin die Adresse des gewaehlten Frames hinterlegt. */
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-chat-frame-thumb{display:none!important}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-chat-frame-tile:hover{border-color:rgba(255,64,94,.72);background:linear-gradient(145deg,rgba(255,48,79,.11),#252a36);box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 7px 18px rgba(0,0,0,.2);transform:translateY(-1px)}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-chat-frame-tile.has-file{border-color:#ff405e;background:linear-gradient(145deg,rgba(255,48,79,.17),#242832);box-shadow:0 0 0 1px rgba(255,48,79,.08),0 6px 16px rgba(0,0,0,.18)}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-chat-frame-tile>i{display:grid;width:23px;height:23px;place-items:center;border:1px solid rgba(255,78,105,.28);border-radius:8px;background:rgba(255,48,79,.1);color:#ff6078;font-size:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.045)}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-chat-frame-tile>i:before{content:"+";font-family:Arial,sans-serif;font-size:15px;font-style:normal;font-weight:500;line-height:1}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-chat-frame-tile.has-file>i{border-color:rgba(255,78,105,.55);background:#ff304f;color:#fff}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-chat-frame-tile.has-file>i:before{content:"\2713";font-size:12px;font-weight:800}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-chat-frame-tile>span{display:grid;min-width:0}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-chat-frame-tile strong{overflow:hidden;font-size:9.5px;font-weight:750;letter-spacing:.01em;line-height:1.1;text-overflow:ellipsis;white-space:nowrap}
/* Zweite Zeile der Kachel: Dateiname bzw. Anzahl der Referenzbilder - wie
   "2 Bilder" unter "Referenzbilder" beim Thumbnail-Werkzeug. Ohne Bild leer. */
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-chat-frame-tile small{display:none;overflow:hidden;color:#aeb6c8;font-size:9px;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-chat-frame-tile.has-file small{display:block}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-chat-frame-tile small:empty{display:none}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-chat-frame-tile input[type="file"]{position:absolute;inset:0;width:100%;height:100%;padding:0;opacity:0;cursor:pointer}
#workspace-body[data-tool="video-generator"] .is-chat-composer:has(.video-chat-frame-dock:not([hidden])) .video-generator-prompt textarea{height:140px!important;min-height:140px!important}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-config-popover>.video-manual-images{display:none!important}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-native-select{display:none!important}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-option-switch{display:flex;align-items:center;gap:4px;min-height:36px;padding:4px;border:1px solid #303543;border-radius:12px;background:#151821}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-option-switch button{display:inline-flex;flex:1;align-items:center;justify-content:center;gap:5px;min-width:0;min-height:28px;padding:5px 7px;border:0;border-radius:9px;background:transparent;color:#858ea1;cursor:pointer;font:inherit;font-size:9px;font-weight:750;white-space:nowrap}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-option-switch button:hover{color:#dfe3eb}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-option-switch button.is-selected{background:#292e3c;color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.22)}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-option-switch button.is-selected i{color:#ff526b}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-option-switch i{font-size:14px}
/* Hinweis, wenn die YouTube-Verbindung fehlt oder abgelaufen ist.
   Er steht oben im Werkzeug, weil der Kunde dort arbeitet - vorher sah er nur
   leere Auswahllisten und "Playlists konnten nicht geladen werden", ohne den
   Grund und ohne den Weg zurueck (06.09.2026). */
#workspace-body .youtube-connection-banner{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:12px 14px;border:1px solid rgba(255,48,79,.45);border-radius:12px;background:linear-gradient(145deg,rgba(255,48,79,.13),rgba(29,33,43,.98));color:#f5f7fb}
#workspace-body .youtube-connection-banner>i{flex:none;color:#ff6078;font-size:22px}
#workspace-body .youtube-connection-banner>div{display:grid;gap:2px;min-width:0}
#workspace-body .youtube-connection-banner strong{font-size:12.5px;font-weight:800}
#workspace-body .youtube-connection-banner span{color:#a9b1c2;font-size:11.5px;line-height:1.5}
#workspace-body .youtube-connection-banner .youtube-connect{flex:none;margin-left:auto;display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 14px;border:1px solid #ff2347;border-radius:9px;background:#ff2347;color:#fff;font:inherit;font-size:11px;font-weight:700;white-space:nowrap;cursor:pointer}
#workspace-body .youtube-connection-banner .youtube-connect:hover{background:#ff3d5c}
@media(max-width:650px){#workspace-body .youtube-connection-banner{flex-wrap:wrap}#workspace-body .youtube-connection-banner .youtube-connect{margin-left:0;width:100%;justify-content:center}}

/* Angehaengte Bilder (07.09.2026): jedes Bild steht UNTER seiner Kachel -
   das Startbild unter "Startframe", das Endbild unter "Endframe", alle
   Referenzbilder unter "Referenzbilder" (Wunsch des Betreibers). Vorschau
   oben, Dateiname darunter, Entfernen-Knopf in der Ecke: dieselbe Formsprache
   wie .tk-anhang beim Thumbnail-Werkzeug. Bis dahin wurde die Kachel selbst
   zur grossen Bildkarte, und die Referenzbilder standen als Raster in ihrem
   Inneren.

   Das Dock ist dafuer ein Raster mit drei Spalten (siehe die Dock-Regel
   weiter unten): Zeile 1 die Kacheln, Zeile 2 eine Haarlinie, Zeile 3 die
   Halter - jeder in der Spalte seiner Kachel. */
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-chat-attachments{
  display:flex;
  grid-row:3;
  flex-wrap:wrap;
  align-content:flex-start;
  gap:10px;
  min-width:0;
  padding:2px 0 4px;
}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-chat-attachments[data-video-attachments="first_frame"]{grid-column:1}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-chat-attachments[data-video-attachments="last_frame"]{grid-column:2}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-chat-attachments[data-video-attachments="reference"]{grid-column:3}
#workspace-body[data-tool="video-generator"] .video-chat-attachments[hidden]{display:none!important}
#workspace-body[data-tool="video-generator"] .video-chat-attachment{
  position:relative;
  width:148px;
  margin:0;
  border:1px solid #3a4050;
  border-radius:14px;
  background:#12141c;
  overflow:hidden;
  box-shadow:0 8px 22px rgba(0,0,0,.28);
  transition:border-color .15s ease,transform .15s ease;
}
#workspace-body[data-tool="video-generator"] .video-chat-attachment:hover{border-color:rgba(255,48,79,.65);transform:translateY(-1px)}
#workspace-body[data-tool="video-generator"] .video-chat-attachment img{display:block;width:100%;height:96px;object-fit:cover;background:#000}
#workspace-body[data-tool="video-generator"] .video-chat-attachment figcaption{display:block;overflow:hidden;padding:5px 8px;color:#9aa2b3;font-size:10px;text-overflow:ellipsis;white-space:nowrap}
#workspace-body[data-tool="video-generator"] .video-chat-attachment>button{position:absolute;top:5px;right:5px;display:grid;width:22px;height:22px;place-items:center;padding:0;border:0;border-radius:50%;background:rgba(9,11,16,.82);color:#e6e9f0;font-size:13px;cursor:pointer;line-height:1}
#workspace-body[data-tool="video-generator"] .video-chat-attachment>button:hover{background:#ff304f;color:#fff}
#workspace-body[data-tool="video-generator"] .video-chat-attachment>button i{font-size:13px}

/* Dauer als Schieberegler, sobald die Knopfreihe nicht mehr in die Karte
   passt (ab neun Stufen, siehe VIDEO_DAUER_REGLER_AB im Rebuild-Modul).
   Wan 3.0 meldet 24 Dauern - die Knoepfe liefen vorher aus der Karte
   heraus und waren nur durch seitliches Scrollen erreichbar. */
#workspace-body[data-tool="video-generator"] .video-duration-slider{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 10px;min-height:36px;padding:6px 10px;border:1px solid #303543;border-radius:12px;background:#151821}
#workspace-body[data-tool="video-generator"] .video-duration-slider input[type="range"]{width:100%;min-width:0;margin:0;accent-color:#ff526b;cursor:pointer}
#workspace-body[data-tool="video-generator"] .video-duration-slider output{justify-self:end;color:#dfe3eb;font-size:11px;font-weight:700;white-space:nowrap}
#workspace-body[data-tool="video-generator"] .video-duration-slider output strong{color:#fff;font-size:14px}
#workspace-body[data-tool="video-generator"] .video-duration-slider small{grid-column:1/-1;color:#6f7889;font-size:9px;letter-spacing:.04em}
@media(max-width:650px){#workspace-body[data-tool="video-generator"] .is-chat-composer .video-chat-frame-tile{width:112px;height:42px}#workspace-body[data-tool="video-generator"] .is-chat-composer:has(.video-chat-frame-dock:not([hidden])) .video-generator-prompt textarea{height:120px!important;min-height:120px!important}}

/* Frame-Zeile unter der Chatbox (29.08.2026): LETZTE Zeile der Box, unter
   Chips und Startknopf. order:99 stellt im Grid sicher, dass keine andere
   Zeile sie ueberlagert. Steht nach der Mobil-Media-Query und gilt damit auf
   jeder Breite.

   Seit 07.09.2026 ein Raster mit drei Spalten - Startframe, Endframe,
   Referenzbilder - damit jedes Bild unter seiner Kachel steht. Die dritte
   Spalte nimmt die Restbreite, weil dort mehrere Referenzbilder liegen
   koennen. Zeile 1 die Kacheln, Zeile 2 die Haarlinie (::before, nur mit
   Anhaengen), Zeile 3 die Halter aus .video-chat-attachments. */
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-chat-frame-dock{
  position:absolute;
  z-index:2;
  top:calc(100% + 12px);
  right:0;
  left:0;
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr);
  align-items:start;
  margin:0;
  padding:0;
  border:0;
}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-chat-frame-dock>.video-chat-frame-tile{grid-row:1;justify-self:start}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-chat-frame-dock.has-attachments::before{
  content:"";
  grid-row:2;
  grid-column:1/-1;
  height:0;
  margin:2px 0 0;
  border-top:1px solid rgba(255,255,255,.06);
}
/* Der absolute Streifen nimmt keinen Platz im Fluss ein - die Box reserviert
   ihn darunter, damit nichts ueberlappt. 78px reichen fuer die Kachelzeile;
   mit Anhaengen misst reserviereDockPlatz() die tatsaechliche Hoehe und setzt
   den Wert als Inline-Stil (die Reihe bricht je nach Breite um). */
#workspace-body[data-tool="video-generator"] .video-generator-form.is-chat-composer:has(.video-chat-frame-dock:not([hidden])){
  margin-bottom:78px;
}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-chat-frame-tile{
  position:relative;
  flex-direction:row;
  width:auto;
  min-width:190px;
  height:48px;
  padding:6px 14px;
  border-radius:13px;
  gap:9px;
}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-chat-frame-tile strong{
  font-size:10.5px;
}
/* Mit Bild bleibt die Kachel ein Chip, zeigt aber zwei Zeilen (Beschriftung
   und Dateiname bzw. Anzahl). ai-contentfactory-polish.css setzt die Kachel
   auf 38px fest - der Selektor hier fuehrt eine Klasse mehr und gewinnt. */
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-chat-frame-dock .video-chat-frame-tile.has-file{
  height:auto;
  min-height:48px;
}


/* Parameter-Chips (29.08.2026): jeder Erzeugungswert ist ein eigener
   klickbarer Chip. Format/Aufloesung/Stil schalten direkt durch, Ton ist
   ein Umschalter, Modell und Dauer oeffnen ein kompaktes Popover nach OBEN -
   die Frame-Zeile darunter bleibt sichtbar. Das Zahnrad oeffnet das
   vollstaendige Panel. */
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-param-chips{
  position:relative;
  display:flex;
  flex:1 1 auto;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  min-width:0;
}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-param-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:34px;
  padding:5px 11px;
  border:1px solid #303543;
  border-radius:999px;
  background:#222631;
  color:#dfe3eb;
  font:inherit;
  font-size:10px;
  font-weight:700;
  white-space:nowrap;
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease;
}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-param-chip i{color:#ff526b;font-size:14px}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-param-chip:hover{border-color:#555d70;background:#292e3a;color:#fff}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-param-chip span{overflow:hidden;max-width:130px;text-overflow:ellipsis}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-param-chip.is-muted i{color:#8a91a2}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-param-chip.is-locked{opacity:.55;cursor:not-allowed}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-param-popover{
  position:absolute;
  z-index:24;
  bottom:calc(100% + 10px);
  display:grid;
  gap:4px;
  min-width:190px;
  max-width:300px;
  max-height:320px;
  padding:8px;
  border:1px solid #373d4d;
  border-radius:14px;
  background:#1d202a;
  box-shadow:0 20px 50px rgba(0,0,0,.55);
  overflow:auto;
}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-param-popover button{
  display:flex;
  align-items:center;
  gap:7px;
  padding:8px 10px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:#cfd4e0;
  font:inherit;
  font-size:11px;
  font-weight:650;
  text-align:left;
  cursor:pointer;
}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-param-popover button:hover{background:#292e3c;color:#fff}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-param-popover button.is-selected{background:#2c3140;color:#fff}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-param-popover button i{color:#ff526b;font-size:14px}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-param-popover button[disabled]{opacity:.45;cursor:not-allowed}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-config-gear{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:38px;
  max-width:38px;
  min-height:38px;
  padding:0;
}
#workspace-body[data-tool="video-generator"] .is-chat-composer .video-config-gear>i{margin-left:0;font-size:16px}
/* Das vollstaendige Panel oeffnet wie gehabt ueber dem Boxinhalt
   (bottom:58px). Seit die Frame-Kacheln UNTER der Box liegen, verdeckt es
   sie nicht mehr - eine frühere bottom-Verschiebung hierfür quetschte das
   Panel zusammen und ist entfernt (Befund 29.08.2026). */

/* Calm AI-video introduction above the production composer. */
#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-generator-intro{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;margin:8px 0 24px;padding:18px 16px;border:0;background:transparent;text-align:center}
#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-generator-intro>span{display:grid;width:52px;height:52px;margin-bottom:16px;place-items:center;border:1px solid rgba(160,169,190,.16);border-radius:50%;background:linear-gradient(145deg,#252a35,#1a1e27);color:#f2f5fb;font-size:23px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 28px rgba(0,0,0,.22)}
#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-generator-intro small{display:none}
#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-generator-intro h3{margin:0;color:#f7f8fb;font:700 23px/1.25 'Space Grotesk',sans-serif;letter-spacing:-.02em}
#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-generator-intro p{max-width:590px;margin:8px auto 0;color:#929bb0;font-size:12.5px;line-height:1.55}
/* Produktionsfenster (31.08.2026): dieselbe schlichte Ueberschrift wie auf
   der Werkzeugseite bzw. beim Thumbnail-Dialog - Titel und Untertitel ohne
   rote Hinweisbox. Das Modal haengt nicht unter .is-video-production,
   deshalb braucht es die Regel hier ein zweites Mal. */
[data-video-production-modal] .video-generator-intro{flex-direction:column;align-items:center;justify-content:center;gap:0;margin:4px 0 20px;padding:10px 8px;border:0;background:transparent;text-align:center}
[data-video-production-modal] .video-generator-intro>span{display:none}
[data-video-production-modal] .video-generator-intro small{display:none}
[data-video-production-modal] .video-generator-intro h3{margin:0;color:#f7f8fb;font:700 24px/1.25 'Space Grotesk',sans-serif;letter-spacing:-.02em}
[data-video-production-modal] .video-generator-intro p{max-width:590px;margin:8px auto 0;color:#929bb0;font-size:12.5px;line-height:1.55}
@media(max-width:650px){[data-video-production-modal] .video-generator-intro{margin:2px 0 14px;padding:8px 6px}[data-video-production-modal] .video-generator-intro h3{font-size:20px}}
@media(max-width:650px){#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-generator-intro{margin:4px 0 18px;padding:12px 8px}#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-generator-intro>span{width:46px;height:46px;margin-bottom:13px;font-size:20px}#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-generator-intro h3{font-size:20px}}

/* Animated Creator Coach prompt examples. */
.coach-form textarea.is-coach-prompt-animating::placeholder{color:#aeb6c8;font-weight:600;opacity:.88}
body.factory-page-active #workspace-body>.cc-shell.is-coach-shell,body.factory-page-active #workspace-body>.cc-shell.is-coach-shell:has(.coach-form){box-sizing:border-box;width:min(640px,calc(100% - 32px))!important;max-width:640px!important;margin-right:auto!important;margin-left:auto!important}
.cc-shell:has(.coach-form) .coach-hero{display:block;margin:38px 0 24px;padding:0;border:0;background:transparent;text-align:center}
.cc-shell:has(.coach-form) .coach-hero>span,.cc-shell:has(.coach-form) .coach-hero small{display:none}
.cc-shell:has(.coach-form) .coach-hero h2{margin:0;color:#f7f8fb;font:700 28px/1.2 'Space Grotesk',sans-serif;letter-spacing:-.035em}
.cc-shell:has(.coach-form) .coach-hero p{max-width:580px;margin:10px auto 0;color:#8f98ad;font-size:12.5px;line-height:1.55}
.cc-shell:has(.coach-form) .coach-form{position:relative;margin:0;padding:0;border:0;border-radius:0;background:transparent}
.cc-shell:has(.coach-form) .coach-form>label{display:block;font-size:0}
.cc-shell:has(.coach-form) .coach-form textarea{box-sizing:border-box;width:100%;min-height:230px;padding:20px 20px 48px;border:1px solid #2c3140;border-radius:20px;background:linear-gradient(145deg,#1a1d26,#171a22);color:#f4f6fa;font-size:13px;line-height:1.55;box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 14px 38px rgba(0,0,0,.16);resize:none}
.cc-shell:has(.coach-form) .coach-form textarea:focus{border-color:rgba(255,48,79,.55);box-shadow:0 0 0 3px rgba(255,48,79,.07),0 16px 42px rgba(0,0,0,.2);outline:0}
.cc-shell:has(.coach-form) .coach-form footer{position:absolute;right:8px;bottom:6px;left:8px;display:flex;align-items:center;justify-content:flex-end;margin:0;padding:0;border:0;pointer-events:none}
.cc-shell:has(.coach-form) .coach-form footer>small{display:none}
.cc-shell:has(.coach-form) .coach-form footer .cc-button{min-height:38px;padding:9px 15px;border-radius:999px;pointer-events:auto}
.coach-prompts{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin:13px auto 15px}
.coach-prompts button{display:inline-flex;flex:0 0 auto;align-items:center;gap:6px;min-height:32px;padding:7px 11px;border:1px solid rgba(132,141,161,.2);border-radius:999px;background:linear-gradient(145deg,#1b1e27,#151820);color:#c3c9d6;font-size:10px;font-weight:650;line-height:1;box-shadow:inset 0 1px 0 rgba(255,255,255,.035);white-space:nowrap;transition:border-color .18s ease,background .18s ease,color .18s ease,transform .18s ease}
.coach-prompts button:hover{border-color:rgba(255,54,86,.65);background:linear-gradient(145deg,rgba(255,48,79,.13),#1b1e27);color:#fff;transform:translateY(-1px)}
.coach-prompts button i{color:#ff5871;font-size:13px}
@media(max-width:650px){body.factory-page-active #workspace-body>.cc-shell.is-coach-shell,body.factory-page-active #workspace-body>.cc-shell.is-coach-shell:has(.coach-form){width:calc(100% - 24px)!important;max-width:none!important}.cc-shell:has(.coach-form) .coach-hero{margin:24px 0 18px}.cc-shell:has(.coach-form) .coach-hero h2{font-size:23px}.cc-shell:has(.coach-form) .coach-form textarea{min-height:170px;padding:17px 17px 46px}.cc-shell:has(.coach-form) .coach-form footer{align-items:center;flex-direction:row}.coach-prompts{display:flex;justify-content:flex-start}.coach-prompts button{font-size:9px}}

/* Creator Coach reasoning levels with real credit prices. */
.cc-shell:has(.coach-form) .coach-form footer{justify-content:space-between}
.coach-mode-picker{position:relative;pointer-events:auto}
.coach-mode-picker>input{display:none}
.coach-mode-trigger{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:4px 9px;border:1px solid #303644;border-radius:999px;background:rgba(21,24,33,.96);color:#f1f3f8;font:inherit;font-size:10px;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);transition:border-color .18s ease,background .18s ease}
.coach-mode-trigger:hover,.coach-mode-trigger[aria-expanded="true"]{border-color:rgba(255,62,92,.6);background:#20242f}
.coach-mode-trigger>i:first-child{color:#ff5871;font-size:14px}
.coach-mode-trigger>span{display:inline-flex;align-items:center;gap:3px;padding-left:2px;color:#aab2c3}
.coach-mode-trigger>span i{color:#ffc34b;font-size:10px}
.coach-mode-trigger>span b{font-size:10px;font-weight:750}
.coach-mode-trigger>.mdi-chevron-up{color:#8992a5;font-size:14px;transition:transform .18s ease}
.coach-mode-trigger[aria-expanded="true"]>.mdi-chevron-up{transform:rotate(180deg)}
.coach-mode-popover{position:absolute;bottom:calc(100% + 10px);left:0;z-index:20;width:310px;padding:6px;border:1px solid #353b49;border-radius:15px;background:rgba(25,28,37,.985);box-shadow:0 22px 55px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.04);backdrop-filter:blur(18px)}
.coach-mode-popover[hidden]{display:none!important}
.coach-mode-option{display:grid;width:100%;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:9px;padding:10px;border:1px solid transparent;border-radius:11px;background:transparent;color:#e9ecf2;text-align:left;cursor:pointer;transition:border-color .16s ease,background .16s ease}
.coach-mode-option:hover,.coach-mode-option.is-selected{border-color:rgba(133,143,165,.22);background:#252936}
.coach-mode-option.is-selected{border-color:rgba(255,67,97,.32);background:linear-gradient(90deg,rgba(255,48,79,.13),#252936)}
.coach-mode-option>i{display:grid;width:28px;height:28px;place-items:center;border-radius:9px;background:#1b1e27;color:#dce1eb;font-size:15px}
.coach-mode-option.is-selected>i{background:rgba(255,48,79,.14);color:#ff6078}
.coach-mode-option>span{display:grid;gap:3px;min-width:0}
.coach-mode-option>span strong{font-size:11px;font-weight:750}
.coach-mode-option>span small{overflow:hidden;color:#8e97a9;font-size:8.5px;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
.coach-mode-option>em{display:inline-flex;align-items:center;gap:3px;color:#aab2c3;font-size:10px;font-style:normal;font-weight:750}
.coach-mode-option>em i{color:#ffc34b;font-size:10px}
.coach-mode-option.is-upgrade{cursor:not-allowed;opacity:.58}
.coach-mode-option.is-upgrade>em{padding:4px 7px;border-radius:999px;background:#383d4b;color:#fff;font-size:8.5px}
@media(max-width:650px){.coach-mode-popover{width:min(310px,calc(100vw - 48px))}.cc-shell:has(.coach-form) .coach-form footer .cc-button{padding-inline:12px}.coach-mode-trigger{padding-inline:9px}}

/* Match the real prompt field to the tall composer (beats the legacy compact override). */
#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-generator-form.is-chat-composer .video-generator-prompt textarea{box-sizing:border-box;height:170px!important;min-height:170px!important;max-height:320px!important}
#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-generator-form.is-chat-composer:has(.video-chat-frame-dock:not([hidden])) .video-generator-prompt textarea{height:140px!important;min-height:140px!important}
@media(max-width:650px){#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-generator-form.is-chat-composer .video-generator-prompt textarea{height:150px!important;min-height:150px!important;max-height:260px!important}#workspace-body[data-tool="video-generator"] .cc-video-generator-shell.is-video-production .video-generator-form.is-chat-composer:has(.video-chat-frame-dock:not([hidden])) .video-generator-prompt textarea{height:120px!important;min-height:120px!important}}

/* Preserve generated video orientation in the history gallery and detail player. */
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-gallery-grid{display:flex!important;flex-wrap:wrap}
/* Breite Bildschirme: drei Karten nebeneinander lassen auf WQHD und breiter
   riesige Kacheln und viel Leerraum entstehen. Ab 1500px kommen Spalten dazu,
   damit eine Karte bei rund 330-420px bleibt. Der Wert ist die flex-basis;
   der Abzug ist der anteilige Abstand (gap 22px). */
@media(min-width:2100px){#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-gallery-grid{--galerie-zeilenhoehe:clamp(230px,12vw,310px)}}
@media(min-width:2800px){#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-gallery-grid{--galerie-zeilenhoehe:clamp(260px,11vw,340px)}}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-generation-card{display:grid;place-items:center;border-color:rgba(255,48,79,.45);background:radial-gradient(circle at 50% 35%,rgba(255,48,79,.16),transparent 44%),linear-gradient(145deg,#12151d,#090b10);box-shadow:0 18px 42px rgba(0,0,0,.32),inset 0 0 42px rgba(255,48,79,.04)}
/* Dichtes Raster (31.08.2026, Kundenwunsch mit Skizze): Hochkant-Videos
   stehen doppelt so hoch ueber ZWEI Rasterzeilen, Querformate behalten ihre
   kompakte Hoehe und stapeln sich daneben; grid-auto-flow:dense fuellt die
   Luecken. Diese Regeln stehen NACH den aelteren Flex-Regeln und gewinnen
   deshalb; die Zeilen-Justierung (contentfactory-galerie-zeilen.js) ist
   fuer diese Galerie abgemeldet. */
/* Spalten in HOCHKANT-Breite, Querformate spannen ZWEI Spalten: so fuellt
   das Raster randlos ohne Schwimm-Luecken (Befund vom 31.08.2026 - die
   schmalen 9:16 standen sonst zentriert in landscape-breiten Spalten).
   Die Zeilenhoehe ist auf 16:9 der Doppel-Spaltenbreite abgestimmt:
   Querformate bleiben dadurch praktisch unbeschnitten und in ihrer alten
   Groesse; die 9:16 fuellen ihre Spalte und werden seitlich um rund 20 %
   angeschnitten (Motiv sitzt mittig - bewusster Tausch gegen die Luecken). */
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-gallery-grid{display:grid!important}
/* min-width/min-height:0 ist PFLICHT: Grid-Items weigern sich sonst,
   kleiner zu werden als die intrinsische Groesse ihres geladenen Videos
   (720x1280 nach dem ersten Hover) - und wachsen ueber die Nachbarkacheln
   (Befund vom 31.08.2026, ueberlappende 9:16-Kacheln). */
/* aspect-ratio MUSS hier abgeschaltet werden (!important): Die aelteren
   Flex-Regeln setzen 9/16 bzw. 1/1 mit hoeherer Spezifitaet. Im Raster
   bekommt die Kachel dann eine feste Zeilenhoehe (2 Zeilen) und rechnet
   daraus ihre BREITE (550 x 9/16 = 309px) - deutlich mehr als die Spalte,
   die Kachel ragte damit ueber ihre Nachbarn (Befund vom 31.08.2026).
   Im Raster bestimmt allein die Zelle die Groesse. */
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-gallery-card{overflow:hidden}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-gallery-open{width:100%;height:100%;min-width:0;min-height:0}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-gallery-open video,#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-poster{width:100%!important;height:100%!important;min-width:0;min-height:0;object-fit:cover}
@media(max-width:640px){}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-generation-visual{display:grid;width:min(86%,470px);place-items:center;gap:8px;text-align:center}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-generation-orbit{position:relative;display:grid;width:46px;height:46px;place-items:center;border:1px solid rgba(255,72,101,.28);border-radius:50%;background:rgba(255,48,79,.1);color:#ff4965;font-size:22px;box-shadow:0 0 26px rgba(255,48,79,.16)}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-generation-orbit::before{position:absolute;inset:-5px;content:"";border:1px solid transparent;border-top-color:#ff526c;border-radius:50%;animation:video-generation-orbit 1.9s linear infinite}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-generation-orbit::after{position:absolute;right:-4px;top:4px;width:5px;height:5px;content:"";border-radius:50%;background:#ff6d83;box-shadow:0 0 9px #ff3654;animation:video-generation-pulse 1.2s ease-in-out infinite}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-generation-visual>strong{font-size:14px;line-height:1.25}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-generation-visual>[data-video-generation-detail]{display:-webkit-box;overflow:hidden;max-width:100%;min-height:27px;color:#929bad;font-size:11px;line-height:1.4;-webkit-box-orient:vertical;-webkit-line-clamp:2}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-generation-steps{display:grid;width:100%;grid-template-columns:repeat(4,minmax(0,1fr));padding:0;margin:2px 0 0;list-style:none}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-generation-steps li{position:relative;display:grid;justify-items:center;gap:4px;color:#596172;font-size:9.5px;font-weight:700;line-height:1}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-generation-steps li::before{position:absolute;left:0;right:0;top:3px;height:1px;content:"";background:#303541}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-generation-steps li:first-child::before{left:50%}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-generation-steps li:last-child::before{right:50%}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-generation-steps li i{position:relative;z-index:1;width:7px;height:7px;border:1px solid #444b5a;border-radius:50%;background:#151821}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-generation-steps li.is-complete,#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-generation-steps li.is-current{color:#d7dce5}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-generation-steps li.is-complete i{border-color:#4ccd83;background:#4ccd83;box-shadow:0 0 8px rgba(76,205,131,.35)}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-generation-steps li.is-current i{border-color:#ff526c;background:#ff526c;box-shadow:0 0 10px rgba(255,48,79,.55);animation:video-generation-pulse 1.2s ease-in-out infinite}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-generation-progress{overflow:hidden;width:100%;height:6px;margin-top:5px;border-radius:99px;background:#272c37}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-generation-progress>span{position:relative;display:block;overflow:hidden;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ff284d,#ff6b82);box-shadow:0 0 14px rgba(255,48,79,.48);transition:width .8s ease}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-generation-progress>span::after{position:absolute;inset:0;width:45%;content:"";background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);animation:video-generation-shimmer 1.7s ease-in-out infinite}
/* Lesbarkeit (29.08.2026): Statuszeile groesser, und der Hinweistext bricht
   um statt abgeschnitten zu werden ("laenger als die ü…"). */
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-generation-status{display:flex;width:100%;align-items:flex-start;justify-content:space-between;gap:8px;color:#768094;font-size:11px;text-align:left}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-generation-status b{display:flex;align-items:baseline;gap:4px;color:#ff6077;font-size:13px;white-space:nowrap}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-generation-status b em{color:#9aa2b3;font-size:10px;font-style:normal;font-weight:600}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-generation-status small{color:#9aa2b3;font-size:11px;line-height:1.4;white-space:normal;overflow-wrap:anywhere}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-generation-card.is-connection-paused{border-color:rgba(255,180,58,.55)}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-generation-card.is-connection-paused .video-history-generation-orbit{color:#ffb43a;border-color:rgba(255,180,58,.35);background:rgba(255,180,58,.1)}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-generation-card.is-failed{border-color:rgba(230,71,96,.48);background:linear-gradient(145deg,#1b1116,#0a0b10)}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-generation-card.is-failed .video-history-failed-open{display:grid;width:100%;height:100%;padding:0;border:0;background:transparent;color:inherit;place-items:center;cursor:pointer}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-generation-card.is-failed .video-history-generation-orbit{color:#ff687f;border-color:rgba(255,77,106,.34);background:rgba(255,48,79,.1)}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-generation-card.is-failed .video-history-failed-action{display:inline-flex;align-items:center;gap:5px;margin-top:3px;color:#ff7187;font-size:8px;font-weight:800;transition:color .18s ease,transform .18s ease}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-generation-card.is-failed .video-history-failed-open:hover .video-history-failed-action{color:#fff;transform:translateX(2px)}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-generation-card.is-failed .video-history-gallery-delete{opacity:.72}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-generation-card.is-failed:hover .video-history-gallery-delete,#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-generation-card.is-failed:focus-within .video-history-gallery-delete{opacity:1}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-gallery-card.is-newly-completed{overflow:visible;border-color:rgba(255,65,96,.7);box-shadow:0 0 0 1px rgba(255,48,79,.11),0 18px 38px rgba(0,0,0,.3)}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-gallery-card.is-newly-completed .video-history-gallery-open{overflow:hidden;border-radius:inherit}
#workspace-body[data-tool="video-generator"] .video-history-new-sticker{position:absolute;z-index:5;left:17px;top:-12px;display:inline-flex;align-items:center;gap:5px;min-height:29px;padding:0 13px 0 10px;clip-path:polygon(5% 10%,92% 0,100% 72%,89% 100%,8% 92%,0 25%);background:linear-gradient(135deg,#ff234b,#e9083c 72%,#b9002b);color:#fff;font:900 9px/1 'Space Grotesk',sans-serif;letter-spacing:.16em;filter:drop-shadow(0 7px 10px rgba(0,0,0,.45)) drop-shadow(0 0 10px rgba(255,28,73,.2));transform:rotate(-4deg);animation:video-new-sticker-in .5s cubic-bezier(.16,1,.3,1) both;pointer-events:none}
#workspace-body[data-tool="video-generator"] .video-history-new-sticker::after{position:absolute;inset:0;content:"";background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.35) 0 1px,transparent 1.5px) 0 0/7px 7px;opacity:.18;mix-blend-mode:screen}
#workspace-body[data-tool="video-generator"] .video-history-new-sticker i{font-size:12px;letter-spacing:0}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-generation-card.is-video-portrait .video-history-generation-visual{width:calc(100% - 22px);gap:10px}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-generation-card.is-video-portrait .video-history-generation-orbit{width:52px;height:52px;font-size:24px}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-generation-card.is-video-portrait .video-history-generation-visual>strong{font-size:14px;white-space:nowrap}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-generation-card.is-video-portrait .video-history-generation-visual>[data-video-generation-detail]{display:-webkit-box;min-height:0;overflow:hidden;font-size:11px;line-height:1.4;-webkit-box-orient:vertical;-webkit-line-clamp:2}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-generation-card.is-video-portrait .video-history-generation-steps{grid-template-columns:repeat(4,minmax(0,1fr));min-height:22px;margin-bottom:1px}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-generation-card.is-video-portrait .video-history-generation-steps li span{display:none}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-generation-card.is-video-portrait .video-history-generation-steps li.is-current span{position:absolute;left:50%;top:13px;display:block;color:#dfe3ea;font-size:8.5px;white-space:nowrap;transform:translateX(-50%)}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-generation-card.is-video-portrait .video-history-generation-steps li:first-child.is-current span{left:0;transform:none}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-generation-card.is-video-portrait .video-history-generation-steps li:last-child.is-current span{left:auto;right:0;transform:none}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-generation-card.is-video-portrait .video-history-generation-progress{height:7px;margin-top:1px}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-generation-card.is-video-portrait .video-history-generation-status{display:grid;justify-items:start;gap:3px}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-generation-card.is-video-portrait .video-history-generation-status b{font-size:12px}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-generation-card.is-video-portrait .video-history-generation-status small{width:100%;font-size:8.5px;text-overflow:ellipsis;white-space:nowrap}
@keyframes video-generation-orbit{to{transform:rotate(360deg)}}
@keyframes video-generation-pulse{50%{opacity:.48;transform:scale(.82)}}
@keyframes video-generation-shimmer{0%{transform:translateX(-130%)}100%{transform:translateX(280%)}}
@keyframes video-new-sticker-in{from{opacity:0;transform:translateY(9px) rotate(-9deg) scale(.72)}to{opacity:1;transform:rotate(-4deg) scale(1)}}
@media(prefers-reduced-motion:reduce){#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-generation-orbit::before,#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-generation-orbit::after,#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-generation-steps li.is-current i,#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-generation-progress>span::after,#workspace-body[data-tool="video-generator"] .video-history-new-sticker{animation:none}}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-gallery-card.is-video-portrait .video-history-gallery-open video,#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-gallery-card.is-video-square .video-history-gallery-open video{object-fit:cover}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-detail.is-video-portrait .video-history-detail-media{grid-template-columns:minmax(300px,440px) 220px!important;align-items:center;gap:20px!important}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-detail.is-video-portrait .video-rebuild-player{width:min(100%,440px);justify-self:start;border-radius:16px;background:#050609}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-detail.is-video-portrait .video-rebuild-player video{width:100%;max-height:720px;aspect-ratio:9/16!important;object-fit:contain;background:#050609}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-detail.is-video-square .video-history-detail-media{grid-template-columns:minmax(280px,520px) 220px!important;align-items:center}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-detail.is-video-square .video-rebuild-player video{aspect-ratio:1/1!important;object-fit:contain}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-detail.is-video-portrait .video-rebuild-actions,#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-detail.is-video-square .video-rebuild-actions{align-self:center}
@media(max-width:1050px){#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-gallery-grid{--galerie-zeilenhoehe:clamp(140px,17vw,185px)}}
@media(max-width:760px){#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-gallery-grid{display:grid!important}#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-gallery-card.is-video-portrait{justify-self:start}#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-detail.is-video-portrait .video-history-detail-media,#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-detail.is-video-square .video-history-detail-media{grid-template-columns:1fr!important}#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-detail.is-video-portrait .video-rebuild-player{width:min(100%,390px)}}

/* Gallery-style active generation replaces the composer after submit. */
#workspace-body[data-tool="video-generator"] .video-generator-form[hidden]{display:none!important}
#workspace-body[data-tool="video-generator"] .video-active-generation{display:grid;gap:12px;width:min(820px,100%);padding:14px;border:1px solid #333947;border-radius:18px;background:#151821;box-shadow:0 18px 42px rgba(0,0,0,.25)}
#workspace-body[data-tool="video-generator"] .video-active-generation>header{display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:11px}
#workspace-body[data-tool="video-generator"] .video-active-generation>header>span{display:grid;width:38px;height:38px;place-items:center;border-radius:11px;background:rgba(255,48,79,.14);color:#ff526b;font-size:19px}
#workspace-body[data-tool="video-generator"] .video-active-generation>header div{display:grid;gap:2px}
#workspace-body[data-tool="video-generator"] .video-active-generation>header small{color:#ff526b;font-size:8px;font-weight:800;letter-spacing:.13em}
#workspace-body[data-tool="video-generator"] .video-active-generation>header strong{font-size:13px}
#workspace-body[data-tool="video-generator"] .video-active-generation>header p{margin:0;color:#8f98aa;font-size:10px}
#workspace-body[data-tool="video-generator"] .video-active-generation-preview{position:relative;overflow:hidden;width:100%;aspect-ratio:16/9;border:1px solid rgba(255,48,79,.3);border-radius:14px;background:#080a0f}
#workspace-body[data-tool="video-generator"] .video-active-generation.is-video-portrait{width:min(440px,100%)}
#workspace-body[data-tool="video-generator"] .video-active-generation.is-video-portrait .video-active-generation-preview{aspect-ratio:9/16}
#workspace-body[data-tool="video-generator"] .video-active-generation.is-video-square{width:min(580px,100%)}
#workspace-body[data-tool="video-generator"] .video-active-generation.is-video-square .video-active-generation-preview{aspect-ratio:1/1}
#workspace-body[data-tool="video-generator"] .video-active-generation-preview>img{display:block;width:100%;height:100%;object-fit:cover;filter:brightness(.68)}
#workspace-body[data-tool="video-generator"] .video-active-generation-placeholder{display:grid;width:100%;height:100%;place-content:center;justify-items:center;gap:9px;color:#8790a2}
#workspace-body[data-tool="video-generator"] .video-active-generation-placeholder i{color:#ff4965;font-size:38px}
#workspace-body[data-tool="video-generator"] .video-active-generation-placeholder span{font-size:11px}
#workspace-body[data-tool="video-generator"] .video-active-generation-badge{position:absolute;left:50%;top:50%;display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 13px;border:1px solid rgba(255,255,255,.15);border-radius:999px;background:rgba(7,9,14,.82);color:#fff;font-size:10px;font-weight:800;transform:translate(-50%,-50%);backdrop-filter:blur(9px)}
#workspace-body[data-tool="video-generator"] .video-active-generation-badge i{color:#ff526b;font-size:16px}
#workspace-body[data-tool="video-generator"] .video-active-generation-progress{overflow:hidden;height:7px;border-radius:99px;background:#292e3a}
#workspace-body[data-tool="video-generator"] .video-active-generation-progress>span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ff284d,#ff6880);box-shadow:0 0 14px rgba(255,48,79,.45);transition:width .4s ease}
#workspace-body[data-tool="video-generator"] .video-active-generation>footer{display:flex;align-items:center;justify-content:space-between;gap:10px}
#workspace-body[data-tool="video-generator"] .video-active-generation>footer>small{color:#ff6077;font-size:10px;font-weight:800}
#workspace-body[data-tool="video-generator"] .video-active-generation.is-error{border-color:#88364c}
#workspace-body[data-tool="video-generator"] .video-active-generation.is-error .video-active-generation-progress>span{background:#b62e49}
@media(max-width:650px){#workspace-body[data-tool="video-generator"] .video-active-generation{padding:10px;border-radius:14px}#workspace-body[data-tool="video-generator"] .video-active-generation.is-video-portrait{width:min(86vw,390px)}}

/* Compact opened-video detail. Keep this scoped away from the gallery and composer. */
#workspace-body[data-tool="video-generator"] .is-video-overview > .video-history-detail{
  grid-template-columns:minmax(0,600px) minmax(280px,340px);
  grid-template-areas:"detail-head detail-head" "detail-media detail-info";
  align-items:start;
  gap:14px 16px;
  width:min(980px,100%);
  margin:20px 0 0;
  padding:16px;
  border-color:rgba(255,48,79,.28);
  border-radius:14px;
  background:linear-gradient(145deg,#11131a,#0d0f15);
  box-shadow:0 16px 38px rgba(0,0,0,.2);
}
#workspace-body[data-tool="video-generator"] .is-video-overview > .video-history-detail > header{
  grid-area:detail-head;
  grid-template-columns:30px minmax(0,1fr) 30px;
  gap:9px;
  padding-bottom:11px;
  border-bottom:1px solid rgba(255,255,255,.075);
}
#workspace-body[data-tool="video-generator"] .is-video-overview > .video-history-detail > header > span{
  width:30px;
  height:30px;
  border-radius:9px;
}
#workspace-body[data-tool="video-generator"] .is-video-overview > .video-history-detail > header h3{
  margin-top:2px;
  font-size:13px;
}
#workspace-body[data-tool="video-generator"] .is-video-overview > .video-history-detail > header p{
  margin-top:2px;
  font-size:9px;
}
#workspace-body[data-tool="video-generator"] .is-video-overview > .video-history-detail .video-history-detail-close{
  width:30px;
  height:30px;
}
#workspace-body[data-tool="video-generator"] .is-video-overview > .video-history-detail .video-rebuild-info{
  grid-area:detail-info;
  grid-template-columns:1fr;
  align-content:start;
  gap:10px;
  margin:0;
}
#workspace-body[data-tool="video-generator"] .is-video-overview > .video-history-detail .video-rebuild-prompt,
#workspace-body[data-tool="video-generator"] .is-video-overview > .video-history-detail .video-rebuild-config{
  padding:11px;
  border-radius:10px;
}
#workspace-body[data-tool="video-generator"] .is-video-overview > .video-history-detail .video-rebuild-prompt p{
  max-height:92px;
  overflow:auto;
  font-size:11px;
  line-height:1.45;
  scrollbar-width:thin;
}
#workspace-body[data-tool="video-generator"] .is-video-overview > .video-history-detail .video-rebuild-config{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
}
#workspace-body[data-tool="video-generator"] .is-video-overview > .video-history-detail .video-rebuild-config div{
  padding:8px;
}
#workspace-body[data-tool="video-generator"] .is-video-overview > .video-history-detail .video-history-detail-media{
  grid-area:detail-media;
  grid-template-columns:1fr!important;
  grid-template-rows:auto auto;
  gap:10px!important;
  align-items:start;
}
#workspace-body[data-tool="video-generator"] .is-video-overview > .video-history-detail .video-history-detail-media .video-rebuild-player{
  grid-column:1;
  grid-row:1;
  width:100%;
  border-radius:11px;
}
#workspace-body[data-tool="video-generator"] .is-video-overview > .video-history-detail .video-history-detail-media .video-rebuild-player video{
  max-height:390px;
}
#workspace-body[data-tool="video-generator"] .is-video-overview > .video-history-detail .video-history-detail-media .video-rebuild-actions{
  grid-column:1;
  grid-row:2;
  display:flex;
  align-items:center;
  gap:8px;
}
#workspace-body[data-tool="video-generator"] .is-video-overview > .video-history-detail .video-history-detail-media .video-rebuild-actions .cc-button{
  width:auto;
  min-height:36px;
  padding:0 13px;
  border-radius:9px;
  font-size:10px;
  box-shadow:none;
}
#workspace-body[data-tool="video-generator"] .is-video-overview > .video-history-detail .video-history-detail-media .video-rebuild-actions .cc-button.primary{
  box-shadow:0 8px 18px rgba(255,48,79,.16);
}
#workspace-body[data-tool="video-generator"] .is-video-overview > .video-history-detail.is-video-portrait{
  grid-template-columns:minmax(260px,360px) minmax(280px,340px);
  width:min(750px,100%);
}
#workspace-body[data-tool="video-generator"] .is-video-overview > .video-history-detail.is-video-portrait .video-history-detail-media{
  grid-template-columns:1fr!important;
}
#workspace-body[data-tool="video-generator"] .is-video-overview > .video-history-detail.is-video-portrait .video-rebuild-player{
  width:min(100%,330px);
}
#workspace-body[data-tool="video-generator"] .is-video-overview > .video-history-detail.is-video-portrait .video-rebuild-player video{
  max-height:570px;
}
@media(max-width:900px){
  #workspace-body[data-tool="video-generator"] .is-video-overview > .video-history-detail,
  #workspace-body[data-tool="video-generator"] .is-video-overview > .video-history-detail.is-video-portrait{
    grid-template-columns:1fr;
    grid-template-areas:"detail-head" "detail-media" "detail-info";
    width:min(680px,100%);
  }
}

/* Expanded cinematic stage for the video history popup. */
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay > .video-history-detail{
  grid-template-columns:minmax(0,1fr) minmax(290px,340px);
  width:min(1720px,calc(100vw - 24px));
  max-height:calc(100vh - 20px);
  gap:20px;
  padding:20px;
  border-radius:22px;
  background:
    radial-gradient(ellipse at 32% 42%,rgba(255,45,77,.065),transparent 43%),
    radial-gradient(ellipse at 78% 16%,rgba(74,91,132,.075),transparent 34%),
    linear-gradient(145deg,#020306 0%,#07080d 58%,#030408 100%);
  box-shadow:0 54px 150px rgba(0,0,0,.94),0 0 110px rgba(0,0,0,.74);
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-history-detail > header{
  padding:0 2px 17px;
  border-bottom-color:rgba(255,255,255,.075);
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-rebuild-player{
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:#000;
  box-shadow:0 28px 80px rgba(0,0,0,.82),0 0 0 1px rgba(255,48,79,.07),0 0 58px rgba(255,38,73,.09);
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-rebuild-player video{
  max-height:min(850px,calc(100vh - 175px));
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-rebuild-info{
  padding:12px 12px 128px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(18,21,29,.9),rgba(8,10,15,.84));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 20px 55px rgba(0,0,0,.25);
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-rebuild-prompt,
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-rebuild-config{
  border:1px solid rgba(255,255,255,.065);
  background:rgba(20,23,32,.82);
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-history-detail-media .video-rebuild-actions{
  right:20px;
  bottom:20px;
  width:340px;
}
@media(max-width:1100px){
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay > .video-history-detail{
    grid-template-columns:minmax(0,1fr) minmax(280px,330px);
    width:calc(100vw - 32px);
    padding:18px;
  }
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-history-detail-media .video-rebuild-actions{right:18px;bottom:18px;width:330px}
}
@media(max-width:900px){
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay > .video-history-detail{width:calc(100vw - 24px)}
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-rebuild-info{padding-bottom:12px}
}

/* Give the actual movie canvas at least thirty percent more room. */
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay{
  padding:8px;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay > .video-history-detail:not(.is-video-portrait){
  grid-template-columns:minmax(0,1fr) minmax(280px,320px);
  width:min(1840px,calc(100vw - 16px));
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay > .video-history-detail:not(.is-video-portrait) .video-rebuild-player video{
  width:100%;
  max-height:min(900px,calc(100vh - 150px));
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-history-detail.is-video-portrait{
  grid-template-columns:minmax(560px,680px) minmax(310px,360px);
  width:min(1160px,calc(100vw - 16px));
  max-height:calc(100vh - 8px);
  padding-top:14px;
  padding-bottom:14px;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-history-detail.is-video-portrait .video-rebuild-player{
  width:min(100%,620px);
  margin-inline:auto;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-history-detail.is-video-portrait .video-rebuild-player video{
  width:100%;
  height:min(920px,calc(100vh - 105px));
  max-height:none;
  aspect-ratio:9/16;
  object-fit:contain;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-history-detail.is-video-portrait > header{
  padding-bottom:10px;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-history-detail.is-video-portrait .video-history-detail-media .video-rebuild-actions{
  width:280px;
}
@media(max-width:900px){
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-history-detail.is-video-portrait{
    grid-template-columns:1fr;
    width:min(620px,calc(100vw - 16px));
  }
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-history-detail.is-video-portrait .video-history-detail-media .video-rebuild-actions{width:100%}
}

/* Keep the action dock inside the metadata column after enlarging the player. */
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-history-detail-media .video-rebuild-actions{
  right:26px;
  bottom:22px;
  width:280px;
  padding-top:10px;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-history-detail-media .video-rebuild-actions .cc-button{
  min-height:40px;
  height:40px;
  padding:0 13px;
  align-items:center;
  justify-content:flex-start;
  line-height:1.1;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-history-detail-media .video-rebuild-actions .cc-button i{
  align-self:center;
  margin:0;
}
@media(max-width:900px){
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-history-detail-media .video-rebuild-actions{
    right:auto;
    bottom:auto;
    width:100%;
  }
}

/* Full-screen cinema overlay for an opened history video. */
body.video-cinema-open{overflow:hidden}
body.video-cinema-open::before{
  position:fixed;
  z-index:1190;
  inset:0;
  content:"";
  background:rgba(0,1,4,.82);
  backdrop-filter:blur(20px) brightness(.34) saturate(.52);
  -webkit-backdrop-filter:blur(20px) brightness(.34) saturate(.52);
  pointer-events:none;
}
body.video-cinema-open .factory-workspace.open{
  z-index:1195!important;
  inset:0!important;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay{
  position:fixed;
  z-index:1200;
  inset:0;
  display:grid;
  place-items:center;
  overflow:auto;
  padding:clamp(18px,3vw,46px);
  background:rgba(0,1,4,.91);
  opacity:0;
  backdrop-filter:blur(20px) brightness(.38) saturate(.58);
  -webkit-backdrop-filter:blur(20px) brightness(.38) saturate(.58);
  transition:opacity .16s ease;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay.is-open{opacity:1}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay.is-closing{opacity:0}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay > .video-history-detail{
  grid-template-columns:minmax(0,820px) minmax(320px,380px);
  grid-template-areas:"detail-head detail-head" "detail-media detail-info";
  align-items:start;
  gap:18px 20px;
  width:min(1240px,100%);
  max-height:calc(100vh - 48px);
  margin:auto;
  padding:20px;
  overflow:auto;
  border:0;
  border-radius:18px;
  background:radial-gradient(circle at 28% 44%,rgba(255,38,73,.045),transparent 40%),linear-gradient(145deg,rgba(2,3,6,.98),rgba(7,8,12,.985) 68%,rgba(3,4,7,.99));
  box-shadow:0 42px 130px rgba(0,0,0,.9),0 0 90px rgba(0,0,0,.72);
  transform:translateY(12px) scale(.985);
  transition:transform .2s ease;
  scrollbar-width:thin;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay.is-open > .video-history-detail{transform:none}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-history-detail > header{
  grid-area:detail-head;
  grid-template-columns:34px minmax(0,1fr) 34px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-history-detail > header h3{font-size:15px}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-rebuild-info{
  grid-area:detail-info;
  grid-template-columns:1fr;
  align-content:start;
  gap:10px;
  margin:0;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-rebuild-prompt,
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-rebuild-config{padding:11px;border-radius:10px;background:#11141c}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-rebuild-prompt p{max-height:110px;overflow:auto;font-size:11px;scrollbar-width:thin}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-rebuild-config{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-history-detail-media{
  grid-area:detail-media;
  grid-template-columns:1fr!important;
  grid-template-rows:auto auto;
  gap:11px!important;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-rebuild-player{grid-column:1;grid-row:1;width:100%;overflow:hidden;border-color:rgba(255,48,79,.52);border-radius:14px;background:#000;box-shadow:0 22px 55px rgba(0,0,0,.62)}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-rebuild-player video{width:100%;max-height:520px;aspect-ratio:16/9;object-fit:contain;background:#000}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-rebuild-actions{grid-column:1;grid-row:2;display:flex;gap:8px}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-rebuild-actions .cc-button{width:auto;min-height:40px;padding:0 16px;border-radius:10px;font-size:11px}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-rebuild-actions .primary{box-shadow:0 10px 25px rgba(255,48,79,.24)}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-history-detail.is-video-portrait{grid-template-columns:minmax(340px,450px) minmax(320px,380px);width:min(900px,100%)}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-history-detail.is-video-portrait .video-rebuild-player{width:min(100%,420px)}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-history-detail.is-video-portrait .video-rebuild-player video{max-height:720px;aspect-ratio:9/16}
@media(max-width:900px){
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay{place-items:start center;padding:16px}
  /* Senkrecht mittig statt oben kleben (CFAI-MOB-20260922-029). "safe":
     ist der Inhalt hoeher als der Bildschirm (Hochformat mit Infos), bleibt
     er oben ausgerichtet und nichts wird abgeschnitten. Browser ohne "safe"
     behalten die Zeile davor. */
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay{align-items:safe center;align-content:safe center}
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay > .video-history-detail,
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-history-detail.is-video-portrait{grid-template-columns:1fr;grid-template-areas:"detail-head" "detail-media" "detail-info";max-height:none}
}
@media(max-width:560px){
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay{padding:8px}
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay > .video-history-detail{padding:12px;border-radius:13px}
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-rebuild-actions{display:grid;grid-template-columns:1fr}
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-rebuild-actions .cc-button{width:100%}
}

/* Compact, vertically centered cinema actions. */
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-history-detail-media .video-rebuild-actions{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:8px;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-history-detail-media .video-rebuild-actions .cc-button{
  display:inline-flex;
  flex:0 0 auto;
  width:auto;
  min-width:0;
  min-height:38px;
  height:38px;
  padding:0 13px;
  align-items:center;
  justify-content:center;
  gap:7px;
  line-height:1;
  white-space:nowrap;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-history-detail-media .video-rebuild-actions .cc-button i{
  display:inline-grid;
  flex:0 0 20px;
  width:20px;
  height:20px;
  place-items:center;
  margin:0;
  line-height:1;
}
@media(max-width:560px){
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-history-detail-media .video-rebuild-actions{display:flex}
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-history-detail-media .video-rebuild-actions .cc-button{width:auto}
}

/* Branded cinema player controls (popup only). */
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-custom-player{position:relative;isolation:isolate;cursor:pointer}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-custom-player:after{position:absolute;z-index:1;inset:auto 0 0;height:34%;content:"";background:linear-gradient(transparent,rgba(0,0,0,.84));pointer-events:none}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-center{position:absolute;z-index:3;left:50%;top:50%;display:grid;width:64px;height:64px;padding:0;place-items:center;border:1px solid rgba(255,255,255,.23);border-radius:50%;background:rgba(8,9,14,.7);color:#fff;font-size:29px;cursor:pointer;transform:translate(-50%,-50%);box-shadow:0 15px 38px rgba(0,0,0,.4),0 0 28px rgba(255,48,79,.17);backdrop-filter:blur(10px);transition:opacity .16s ease,transform .16s ease,background .16s ease}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-center:hover{background:#ff304f;transform:translate(-50%,-50%) scale(1.06)}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-custom-player.is-playing .cinema-player-center{opacity:0;pointer-events:none}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-custom-player:hover.is-playing .cinema-player-center{opacity:.82;pointer-events:auto}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-controls{position:absolute;z-index:4;right:15px;bottom:12px;left:15px;display:grid;grid-template-columns:34px auto minmax(80px,1fr) 34px 34px;align-items:center;gap:9px;color:#fff;opacity:.92;transition:opacity .16s ease}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-custom-player:not(:hover).is-playing .cinema-player-controls{opacity:0}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-controls button{display:grid;width:34px;height:34px;padding:0;place-items:center;border:0;border-radius:9px;background:rgba(14,16,22,.66);color:#fff;font-size:17px;cursor:pointer;backdrop-filter:blur(8px)}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-controls button:hover{background:#ff304f}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-controls span{min-width:72px;color:#f5f6f8;font-size:10px;font-weight:750;font-variant-numeric:tabular-nums;white-space:nowrap;text-shadow:0 1px 5px #000}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-controls input[type="range"]{width:100%;height:4px;margin:0;appearance:none;border-radius:99px;background:linear-gradient(90deg,#ff304f var(--cinema-progress,0%),rgba(255,255,255,.28) var(--cinema-progress,0%));cursor:pointer}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-controls input[type="range"]::-webkit-slider-thumb{width:13px;height:13px;appearance:none;border:2px solid #fff;border-radius:50%;background:#ff304f;box-shadow:0 2px 8px rgba(0,0,0,.45)}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-controls input[type="range"]::-moz-range-thumb{width:10px;height:10px;border:2px solid #fff;border-radius:50%;background:#ff304f}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-custom-player:fullscreen{display:grid;place-items:center;background:#000}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-custom-player:fullscreen video{width:100%;height:100%;max-height:none;object-fit:contain}
/* Vollbild auf dem Telefon (CFAI-MOB-20260922-028): Ausgang oben rechts,
   Steuerleiste oberhalb der Gestenleiste und des Chrome-Hinweises. */
.cinema-player-exit{display:none}
.cinema-custom-player:fullscreen .cinema-player-exit{position:absolute;z-index:40;top:max(16px,env(safe-area-inset-top));right:16px;display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid rgba(255,255,255,.28);border-radius:14px;background:rgba(8,10,15,.72);color:#fff;font-size:26px;cursor:pointer}
.cinema-custom-player:fullscreen .cinema-player-controls{bottom:max(56px,calc(env(safe-area-inset-bottom) + 40px))!important;opacity:1!important}
@media(max-width:560px){
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-center{width:52px;height:52px;font-size:24px}
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-controls{right:9px;bottom:8px;left:9px;grid-template-columns:30px minmax(70px,1fr) 30px 30px;gap:5px}
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-controls span{display:none}
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-controls button{width:30px;height:30px}
}

/* Cinema action dock: visually connect actions to the metadata panel. */
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-history-detail{
  position:relative;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-history-detail-media{
  position:static;
  padding-bottom:0;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-rebuild-info{
  padding-bottom:116px;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-history-detail-media .video-rebuild-actions{
  position:absolute;
  right:20px;
  bottom:20px;
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  width:380px;
  padding-top:13px;
  border-top:1px solid rgba(255,255,255,.09);
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-history-detail-media .video-rebuild-actions .cc-button{
  display:flex;
  width:100%;
  min-height:42px;
  padding:0 15px;
  justify-content:flex-start;
  gap:9px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  background:#171a22;
  color:#e9ecf2;
  font-size:11px;
  font-weight:750;
  letter-spacing:0;
  box-shadow:none;
  transition:border-color .16s ease,background .16s ease,transform .16s ease;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-history-detail-media .video-rebuild-actions .cc-button i{
  display:grid;
  width:22px;
  height:22px;
  place-items:center;
  border-radius:7px;
  background:rgba(255,255,255,.065);
  font-size:14px;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-history-detail-media .video-rebuild-actions .cc-button.primary{
  border-color:#ff304f;
  background:linear-gradient(135deg,#ff2449,#f23859);
  color:#fff;
  box-shadow:0 10px 26px rgba(255,35,70,.24);
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-history-detail-media .video-rebuild-actions .cc-button.primary i{background:rgba(0,0,0,.13)}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-history-detail-media .video-rebuild-actions .cc-button:hover{
  border-color:rgba(255,75,102,.72);
  background:#20232d;
  transform:translateY(-1px);
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-history-detail-media .video-rebuild-actions .cc-button.primary:hover{
  border-color:#ff6a80;
  background:linear-gradient(135deg,#ff3154,#ff4f6d);
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-history-detail.is-video-portrait .video-rebuild-info{
  padding-bottom:116px;
}
@media(max-width:900px){
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-rebuild-info{padding-bottom:0}
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-history-detail-media{position:relative}
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-history-detail-media .video-rebuild-actions{
    position:static;
    width:100%;
    padding-top:2px;
    border-top:0;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:560px){
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-history-detail-media .video-rebuild-actions{grid-template-columns:1fr}
}
@media(max-width:560px){
  #workspace-body[data-tool="video-generator"] .is-video-overview > .video-history-detail{padding:12px}
  #workspace-body[data-tool="video-generator"] .is-video-overview > .video-history-detail .video-history-detail-media .video-rebuild-actions{display:grid;grid-template-columns:1fr}
  #workspace-body[data-tool="video-generator"] .is-video-overview > .video-history-detail .video-history-detail-media .video-rebuild-actions .cc-button{width:100%}
}

/* Cinema presentation for one opened video. */
#workspace-body[data-tool="video-generator"] .is-video-overview > .video-history-detail{
  grid-template-columns:minmax(0,820px) minmax(320px,380px);
  gap:18px 20px;
  width:min(1240px,100%);
  padding:20px;
  border-color:rgba(255,48,79,.42);
  border-radius:18px;
  background:
    radial-gradient(circle at 28% 48%,rgba(255,38,73,.075),transparent 38%),
    linear-gradient(145deg,#07080c 0%,#0b0c12 62%,#090a0f 100%);
  box-shadow:0 24px 70px rgba(0,0,0,.48),0 0 42px rgba(255,35,70,.055);
}
#workspace-body[data-tool="video-generator"] .is-video-overview > .video-history-detail > header{
  padding-bottom:14px;
  border-bottom-color:rgba(255,255,255,.1);
}
#workspace-body[data-tool="video-generator"] .is-video-overview > .video-history-detail > header h3{font-size:15px}
#workspace-body[data-tool="video-generator"] .is-video-overview > .video-history-detail .video-history-detail-media .video-rebuild-player{
  border-color:rgba(255,48,79,.5);
  border-radius:14px;
  background:#000;
  box-shadow:0 20px 48px rgba(0,0,0,.55),0 0 28px rgba(255,38,73,.07);
}
#workspace-body[data-tool="video-generator"] .is-video-overview > .video-history-detail .video-history-detail-media .video-rebuild-player video{
  max-height:520px;
  background:#000;
}
#workspace-body[data-tool="video-generator"] .is-video-overview > .video-history-detail .video-rebuild-prompt,
#workspace-body[data-tool="video-generator"] .is-video-overview > .video-history-detail .video-rebuild-config{
  border-color:rgba(255,255,255,.085);
  background:rgba(17,19,27,.88);
}
#workspace-body[data-tool="video-generator"] .is-video-overview > .video-history-detail .video-rebuild-prompt{
  border-color:rgba(255,48,79,.3);
}
#workspace-body[data-tool="video-generator"] .is-video-overview > .video-history-detail .video-rebuild-config div{
  background:#171a23;
}
#workspace-body[data-tool="video-generator"] .is-video-overview > .video-history-detail .video-history-detail-media .video-rebuild-actions{
  padding-top:2px;
}
#workspace-body[data-tool="video-generator"] .is-video-overview > .video-history-detail .video-history-detail-media .video-rebuild-actions .cc-button{
  min-height:40px;
  padding:0 16px;
  border-radius:10px;
  font-size:11px;
}
#workspace-body[data-tool="video-generator"] .is-video-overview > .video-history-detail .video-history-detail-media .video-rebuild-actions .cc-button.primary{
  box-shadow:0 10px 25px rgba(255,48,79,.24);
}
#workspace-body[data-tool="video-generator"] .is-video-overview > .video-history-detail.is-video-portrait{
  grid-template-columns:minmax(340px,460px) minmax(320px,380px);
  width:min(900px,100%);
}
#workspace-body[data-tool="video-generator"] .is-video-overview > .video-history-detail.is-video-portrait .video-rebuild-player{
  width:min(100%,420px);
}
#workspace-body[data-tool="video-generator"] .is-video-overview > .video-history-detail.is-video-portrait .video-rebuild-player video{
  max-height:720px;
}
@media(max-width:1100px){
  #workspace-body[data-tool="video-generator"] .is-video-overview > .video-history-detail{
    grid-template-columns:minmax(0,1fr) minmax(280px,330px);
  }
}
@media(max-width:900px){
  #workspace-body[data-tool="video-generator"] .is-video-overview > .video-history-detail,
  #workspace-body[data-tool="video-generator"] .is-video-overview > .video-history-detail.is-video-portrait{
    grid-template-columns:1fr;
    width:min(760px,100%);
  }
}

/* Final cinema sizing: portrait uses nearly the full viewport height; actions stay compact. */
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay{padding:8px}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay > .video-history-detail.is-video-portrait{
  grid-template-columns:minmax(0,calc((90vh - 94px) * .5625)) minmax(330px,390px);
  width:min(calc((90vh - 94px) * .5625 + 430px),calc(100vw - 16px));
  max-height:calc(100vh - 16px);
  padding:12px 16px;
  gap:14px 18px;
  overflow:hidden;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay > .video-history-detail.is-video-portrait .video-rebuild-player{
  width:auto;
  height:calc(90vh - 94px);
  max-height:none;
  margin:0 auto;
  aspect-ratio:9/16;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay > .video-history-detail.is-video-portrait .video-rebuild-player video{
  width:100%;height:100%;max-height:none;aspect-ratio:9/16;object-fit:contain;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay > .video-history-detail:not(.is-video-portrait) .video-rebuild-player{
  width:90%;
  margin-inline:auto;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-rebuild-info{padding-bottom:72px}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-history-detail-media .video-rebuild-actions{
  right:16px;bottom:14px;display:flex;width:auto;max-width:390px;padding-top:10px;
  align-items:center;justify-content:flex-end;gap:8px;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-history-detail-media .video-rebuild-actions .cc-button{
  display:inline-flex;flex:0 0 auto;width:auto;min-width:0;height:38px;min-height:38px;
  padding:0 13px;align-items:center;justify-content:center;line-height:1;
}
@media(max-width:900px){
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay > .video-history-detail.is-video-portrait{
    grid-template-columns:1fr;width:min(620px,calc(100vw - 16px));max-height:none;overflow:auto;
  }
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay > .video-history-detail.is-video-portrait .video-rebuild-player{
    height:min(calc(90vh - 117px),810px);
  }
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-rebuild-info{padding-bottom:0}
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-history-detail-media .video-rebuild-actions{
    position:static;width:auto;max-width:none;padding-top:0;border-top:0;justify-content:flex-start;
  }
}
/* Das Fenster waechst mit seinem Inhalt (07.09.2026): sobald die Zeitleiste unter dem Video aufklappt, wurde der Koerper hoeher als das Fenster und bekam eine eigene Rollleiste. Jetzt scrollt die Ueberlagerung als Ganzes; passt das Fenster hinein, steht es weiter mittig (safe center). Der Rand zum Bildschirm ist ein AUSSENABSTAND des Dialogs, kein Innenabstand der Ueberlagerung: den Innenabstand am Ende des Scrollbereichs zaehlt Chrome nicht mit, und der Dialog klebte oben und unten am Rand. */
.shorts-production-modal{position:fixed;inset:0;z-index:1700;display:flex;flex-direction:column;align-items:center;justify-content:safe center;overflow-y:auto;padding:0;background:rgba(2,3,8,.82);backdrop-filter:blur(16px) saturate(.72);-webkit-backdrop-filter:blur(16px) saturate(.72);opacity:0;transition:opacity .16s ease}
.shorts-production-modal.is-open{opacity:1}
.shorts-production-dialog{width:min(1180px,calc(100vw - 32px));flex:0 0 auto;margin:clamp(16px,3vw,44px) auto;display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(255,39,83,.22);border-radius:22px;background:linear-gradient(145deg,rgba(12,13,20,.99),rgba(6,7,12,.99));box-shadow:0 32px 100px rgba(0,0,0,.72),0 0 60px rgba(255,39,83,.08);transform:translateY(12px) scale(.985);transition:transform .16s ease}
.shorts-production-modal.is-open .shorts-production-dialog{transform:none}
.shorts-production-dialog>header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 22px;border-bottom:1px solid rgba(255,255,255,.08)}
.shorts-production-dialog>header small{display:block;color:#ff3158;font-size:10px;font-weight:900;letter-spacing:.16em}
.shorts-production-dialog>header h2{margin:4px 0 0;font-size:20px}
.shorts-production-close{width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.12);border-radius:11px;background:#171a24;color:#f6f7fb;cursor:pointer}
.shorts-production-close:hover{border-color:#ff3158;background:#25131a}
.shorts-production-body{min-height:0;overflow:auto;padding:20px 22px 24px}
/* Kompaktere Maske - wie beim Uebersetzungsfenster: engere Abstaende,
   flachere Auswahlfelder, zurueckhaltende Hilfetexte. */
.shorts-production-body .shorts-intro{margin-bottom:12px;padding:12px 14px}
.shorts-production-body .cc-card{margin-bottom:12px;padding:14px 15px}
.shorts-production-body .cc-card>header{margin-bottom:11px}
.shorts-production-body select,
.shorts-production-body input[type="text"],
.shorts-production-body input[type="url"]{min-height:38px;padding:0 11px;font-size:13px}
.shorts-production-body label>small,
.shorts-production-body .cc-hint{font-size:10px;line-height:1.35;color:#7f8798}

/* Shorts kompakt - derselbe Zuschnitt wie im Transkriptionsfenster.
   Zwei Dinge stecken darin:
     1. box-sizing und min-width:0 ueberall. Ohne das rechnen Felder ihre
        Polsterung auf die Breite drauf, das Raster wird breiter als der
        Dialog und unten erscheint ein Querbalken.
     2. Kleinere Abstaende, damit das Formular ohne Scrollen hineinpasst. */
.shorts-production-body,.shorts-production-body *{box-sizing:border-box}
.shorts-production-body{min-width:0;overflow-x:hidden;overflow-y:auto;padding:14px 18px 16px}
/* Der Koerper scrollt nie selbst (07.09.2026): ohne Hoehengrenze am Dialog braucht er keinen Ueberlauf, und ein Browser, der „safe center“ nicht kennt, darf ihn auch nicht mehr auf Fensterhoehe druecken. Gescrollt wird nur die Ueberlagerung. */
.shorts-production-dialog{max-height:none;height:auto}
.shorts-production-dialog .shorts-production-body{min-height:auto;overflow:visible}
.shorts-production-body>.cc-shell,.shorts-production-body .workspace-form{min-width:0;max-width:none}
.shorts-production-body .workspace-intro-card,.shorts-production-body .shorts-intro{margin-bottom:10px;padding:10px 12px}
.shorts-production-body .workspace-group{margin-bottom:10px}
.shorts-production-body .workspace-group legend{gap:10px;padding:0 0 10px}
.shorts-production-body .workspace-group legend b{font-size:17px}
.shorts-production-body .workspace-group legend small{font-size:11px}
.shorts-production-body .wizard-step-number{width:28px;height:28px;flex-basis:28px;border-radius:9px}
.shorts-production-body .workspace-group-grid,
.shorts-production-body .workspace-group[data-open] .workspace-group-grid{gap:9px 14px;padding:12px 14px;border-radius:12px}
.shorts-production-body .workspace-field{min-width:0;gap:4px}
.shorts-production-body .workspace-field label:not(.workspace-check){font-size:12px}
.shorts-production-body .workspace-field input,
.shorts-production-body .workspace-field textarea,
.shorts-production-body .workspace-field select{min-width:0;width:100%;min-height:38px;padding:0 11px;font-size:13px}
/* Die unsichtbaren Felder - Dateiwahl und Untertitel-Schalter - sind absolut
   gesetzt. Die Feldregel darueber machte auch sie 100 % breit, und zwar
   relativ zum Overlay (kein naeherer Vorfahr ist positioniert): 390 px ab
   x = 40 ragten rechts hinaus, und das Fenster liess sich auf dem Handy
   nach rechts scrollen (Befund 08.09.2026). Sie bleiben 1 x 1 Pixel; das
   Ueberlaufverbot am Overlay faengt ab, was sonst noch hinausragt. */
.shorts-production-body .workspace-field .video-file-picker input[type="file"],
.shorts-production-body .workspace-field .shorts-toggles input[type="checkbox"]{width:1px;height:1px;min-width:0;min-height:0;padding:0;overflow:hidden;clip:rect(0 0 0 0)}
/* Nichts im Produktionsfenster darf sich seitwaerts schieben lassen. Das
   Overlay klemmt den Ueberlauf ab, der Scrollbereich darunter ebenfalls -
   "clip" statt "hidden", damit dabei kein zweiter, per Skript scrollbarer
   Bereich entsteht. Die eigentliche Ursache wird jeweils an ihrer Stelle
   behoben; das hier ist die Sicherung dagegen, dass eine neue Regel die
   Seite wieder verschiebbar macht. */
.shorts-production-modal{overflow-x:hidden}
/* Jede Stufe der Kette klemmt ab, und zwar mit "clip": anders als "hidden"
   entsteht dabei kein zweiter Bereich, der sich per Geste doch noch
   verschieben laesst. Zusaetzlich wird das Dokument selbst gesperrt, solange
   das Fenster offen ist - auf Android genuegt "overflow:hidden" am body
   dafuer nicht, gescrollt wird dort das Wurzelelement. */
.shorts-production-modal .shorts-production-stage,
.shorts-production-modal .shorts-production-dialog,
.shorts-production-modal .shorts-production-body,
.shorts-production-modal .shorts-production-inner,
.shorts-production-modal .shorts-form{max-width:100%;overflow-x:clip}
/* "contain" haelt die Wischgeste im Fenster: findet sie dort nichts zu
   scrollen, reicht der Browser sie sonst an den naechsten scrollbaren
   Vorfahren weiter. */
.shorts-production-modal{overscroll-behavior:contain}
body.shorts-production-modal-open{overscroll-behavior-x:none}
/* Solange das Fenster offen ist, scrollt der Arbeitsbereich dahinter nicht
   mehr seitwaerts - er ist ein eigener Scroll-Container (overflow:auto). */
body.shorts-production-modal-open #workspace-body,
body.shorts-production-modal-open .workspace-body{overflow-x:clip}
html:has(body.shorts-production-modal-open){overflow-x:clip}
.shorts-production-body .workspace-field small{font-size:10px;line-height:1.3}
/* Der Medien-Aufnehmer sieht aus wie in den anderen Werkzeugen: eine Zeile
   mit Wolkensymbol, Titel und Dateiname - kein hoher Kasten. */
.shorts-production-body .video-file-picker{display:flex;align-items:center;gap:12px;width:auto;max-width:430px;min-height:0;padding:12px 14px;border-radius:12px}
.shorts-production-body .video-file-picker>i{font-size:22px}
.shorts-production-body .video-file-picker>span{display:grid;gap:2px;min-width:0}
.shorts-production-body .video-file-picker b{font-size:13px}
.shorts-production-body .video-file-picker small{overflow:hidden;font-size:11px;text-overflow:ellipsis;white-space:nowrap}
.shorts-production-body .workspace-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin:8px -18px -16px;padding:11px 18px}
.shorts-production-body .workspace-run,.shorts-production-body .wizard-primary{position:relative;display:inline-flex;width:auto;min-width:0;min-height:40px;overflow:visible;white-space:nowrap}
.shorts-production-body .shorts-dropzone{min-height:86px;padding:14px}

.shorts-production-inner{width:100%!important;max-width:none!important;margin:0!important;padding:0!important}
body.shorts-production-modal-open{overflow:hidden}
/* Nur noch das Video-Fenster hebt den Arbeitsbereich an - es haengt IN ihm.
   Das Shorts-Fenster stand hier bis zum 09.09.2026 mit dazu: seit es am
   08.09. an den <body> gewandert ist (Wischgeste), lag der auf 1700
   gehobene Arbeitsbereich UEBER dem Fenster (1600). Der Kunde sah nach
   "Neue Produktion" nichts - das Fenster war offen, nur verdeckt. */
body.video-production-modal-open .factory-workspace.open{z-index:1700 !important}
@media(max-width:720px){.shorts-production-modal{padding:0}.shorts-production-dialog{width:calc(100vw - 16px);margin:8px auto;border-radius:16px}.shorts-production-dialog>header,.shorts-production-body{padding:15px}

}

/* Production composers stay in context: all three media tools open above their gallery. */
.video-production-modal,.thumbnail-production-modal{position:fixed;inset:0;z-index:1700;display:grid;place-items:center;padding:clamp(12px,2.2vw,34px);background:rgba(1,2,7,.88);backdrop-filter:blur(18px) saturate(.68);-webkit-backdrop-filter:blur(18px) saturate(.68);opacity:0;transition:opacity .16s ease}
.video-production-modal.is-open,.thumbnail-production-modal.is-open{opacity:1}
.video-production-dialog,.thumbnail-production-dialog{display:flex;flex-direction:column;width:min(1280px,calc(100vw - 40px));max-height:calc(100vh - 40px);overflow:hidden;border:1px solid rgba(255,39,82,.24);border-radius:20px;background:linear-gradient(145deg,rgba(12,14,22,.99),rgba(6,8,14,.99));box-shadow:0 34px 100px rgba(0,0,0,.72),0 0 46px rgba(255,31,78,.08);transform:translateY(12px) scale(.985);transition:transform .18s ease}
.video-production-modal.is-open .video-production-dialog,.thumbnail-production-modal.is-open .thumbnail-production-dialog{transform:none}
.video-production-dialog>header,.thumbnail-production-dialog>header{display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;padding:18px 22px;border-bottom:1px solid rgba(135,145,170,.16)}
.video-production-dialog>header small,.thumbnail-production-dialog>header small{display:block;margin-bottom:3px;color:#ff315d;font-size:10px;font-weight:800;letter-spacing:.16em}
.video-production-dialog>header h2,.thumbnail-production-dialog>header h2{margin:0;color:#f7f8fc;font-size:20px}
.video-production-close,.thumbnail-production-close{display:grid;place-items:center;width:36px;height:36px;border:1px solid #343a49;border-radius:10px;background:#181c26;color:#f2f4fa;font-size:20px;cursor:pointer}
.video-production-close:hover,.thumbnail-production-close:hover{border-color:#ff315d;background:#27131b;color:#ff486c}
.video-production-body,.thumbnail-production-body{min-height:0;overflow:auto;padding:20px 22px 24px}
.video-production-inner,.thumbnail-production-body>.workspace-intro-card,.thumbnail-production-body>.workspace-profile-note,.thumbnail-production-body>.workspace-form,.thumbnail-production-body>#workspace-result{width:100%;max-width:none;margin-left:0;margin-right:0}
.video-production-inner{background:transparent}
.video-retry-context{display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:11px;margin:0 0 14px;padding:0 0 14px;border-bottom:1px solid rgba(255,83,109,.22)}
.video-retry-context>span{display:grid;width:38px;height:38px;place-items:center;border:1px solid rgba(255,73,101,.28);border-radius:50%;background:rgba(255,48,79,.09);color:#ff5d75;font-size:18px}
.video-retry-context>div{display:grid;gap:3px}.video-retry-context strong{color:#f4f6fa;font-size:12px}.video-retry-context p{margin:0;color:#939cad;font-size:10px;line-height:1.45}.video-retry-context small{display:flex;align-items:flex-start;gap:5px;margin-top:3px;color:#d9939f;font-size:9px;line-height:1.4}.video-retry-context small i{flex:0 0 auto;margin-top:1px;color:#ff6078}
body.video-production-modal-open,body.thumbnail-production-modal-open{overflow:hidden}
@media(max-width:720px){.video-production-modal,.thumbnail-production-modal{padding:8px}.video-production-dialog,.thumbnail-production-dialog{width:calc(100vw - 16px);max-height:calc(100vh - 16px);border-radius:15px}.video-production-dialog>header,.thumbnail-production-dialog>header{padding:14px 15px}.video-production-body,.thumbnail-production-body{padding:14px}}

/* The thumbnail wizard is moved out of the page workspace into this dialog.
   Reset the page-level width/padding rules here so the copied workspace fits
   inside the dialog instead of creating a horizontal scrollbar. */
.thumbnail-production-dialog{width:min(1420px,calc(100vw - 24px));max-height:calc(100dvh - 24px)}
.thumbnail-production-body{overflow-x:hidden;overflow-y:auto;box-sizing:border-box}
.thumbnail-production-body #workspace-body,
.thumbnail-production-body .workspace-panel,
.thumbnail-production-body .workspace-form{width:100% !important;max-width:none !important;min-width:0 !important;box-sizing:border-box}
.thumbnail-production-body #workspace-body{margin:0 !important;padding:24px 0 24px !important;overflow-x:hidden !important}
.thumbnail-production-body .workspace-panel{height:auto !important;max-height:none !important;overflow:visible !important}
.thumbnail-production-body .workspace-actions{width:100%;margin:0 !important;padding:16px 0 0;box-sizing:border-box;overflow:visible}

/* Transcription creation stays above the history instead of navigating away. */
/* Kein backdrop-filter auf dem Overlay: Sobald darin ein Video laeuft, zwingt
   jedes Bild Chromium, den geblurrten Hintergrund neu zu berechnen - der
   Hintergrund flackerte sichtbar (gemeldet am 07.09.2026). Dafuer ist das
   Overlay etwas dichter; die Seite dahinter ist ohnehin nur Kulisse. */
.transcription-production-modal{position:fixed;inset:0;z-index:1700;display:grid;place-items:center;padding:clamp(12px,2.2vw,34px);background:rgba(1,2,7,.94);opacity:0;transition:opacity .16s ease}
.transcription-production-modal.is-open{opacity:1}
.transcription-production-dialog{display:flex;flex-direction:column;width:min(1120px,calc(100vw - 40px));max-height:calc(100dvh - 24px);overflow:hidden;border:1px solid rgba(255,39,82,.24);border-radius:20px;background:linear-gradient(145deg,rgba(12,14,22,.99),rgba(6,8,14,.99));box-shadow:0 34px 100px rgba(0,0,0,.72),0 0 46px rgba(255,31,78,.08);transform:translateY(12px) scale(.985);transition:transform .18s ease}
.transcription-production-modal.is-open .transcription-production-dialog{transform:none}
.transcription-production-dialog>header{display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;padding:13px 18px;border-bottom:1px solid rgba(135,145,170,.16)}
.transcription-production-dialog>header small{display:block;margin-bottom:3px;color:#ff315d;font-size:10px;font-weight:800;letter-spacing:.16em}
.transcription-production-dialog>header h2{margin:0;color:#f7f8fc;font-size:18px}
.transcription-production-close{display:grid;place-items:center;width:36px;height:36px;border:1px solid #343a49;border-radius:10px;background:#181c26;color:#f2f4fa;font-size:20px;cursor:pointer}
.transcription-production-close:hover{border-color:#ff315d;background:#27131b;color:#ff486c}
.transcription-production-body{min-width:0;min-height:0;overflow-x:hidden;overflow-y:auto;padding:14px 18px 16px}
.transcription-production-body>.workspace-intro-card,.transcription-production-body>.workspace-profile-note,.transcription-production-body>.workspace-form,.transcription-production-body>#workspace-result{width:100%;max-width:none;margin-left:0;margin-right:0}
/* Compact modal-only wizard spacing; keep the regular tool pages unchanged. */
.transcription-production-body,.transcription-production-body *{box-sizing:border-box}
.transcription-production-body>.workspace-intro-card,.transcription-production-body>.workspace-profile-note,.transcription-production-body>.workspace-form,.transcription-production-body>#workspace-result{min-width:0}
.transcription-production-body .workspace-intro-card{margin-bottom:12px;padding:10px 12px}
.transcription-production-body .workspace-wizard-progress{gap:6px;padding:0 0 12px}
.transcription-production-body .workspace-form>.workspace-group[data-current]{padding:0;overflow:visible;scrollbar-gutter:auto}
.transcription-production-body .workspace-group legend{gap:10px;padding:0 0 12px}
.transcription-production-body .workspace-group legend b{font-size:18px}
.transcription-production-body .workspace-group legend small{font-size:11px}
.transcription-production-body .wizard-step-number{width:30px;height:30px;flex-basis:30px;border-radius:9px}
.transcription-production-body .workspace-group-grid,.transcription-production-body .workspace-group[data-open] .workspace-group-grid{gap:10px 14px;padding:13px 15px;border-radius:12px}
/* Das Feld ist ein Raster (Beschriftung, Auswahl, Hilfetext) und steht in einer
   Rasterzeile neben der 131px hohen Dateiauswahl. Ohne align-content:start
   verteilt CSS Grid den freien Platz auf die Zeilen des Feldes - die Auswahl
   "Eingangssprache" wurde dadurch 59px statt 43px hoch und sah anders aus als
   alle anderen (gemeldet am 07.09.2026, in Chrome nachgemessen). Dieselbe
   Ursache wie beim Sprachfeld der Video-Uebersetzung weiter unten. */
.transcription-production-body .workspace-field,
#workspace-body[data-tool="media-transcription-shared"] .workspace-field{align-content:start}
.transcription-production-body .workspace-field{min-width:0;gap:5px}
.transcription-production-body .workspace-field label:not(.workspace-check){font-size:12px}
.transcription-production-body .workspace-field input,.transcription-production-body .workspace-field textarea,.transcription-production-body .workspace-field select{min-width:0;min-height:40px;padding:9px 12px}
.transcription-production-body .workspace-field small{font-size:10px;line-height:1.25}
.transcription-production-body .workspace-actions{position:static;bottom:auto;z-index:auto;grid-template-columns:130px 1fr 170px;gap:12px;margin:10px -18px 0;padding:12px 18px}
.transcription-production-body .wizard-secondary,.transcription-production-body .wizard-primary{min-height:40px;padding:0 15px}
body.transcription-production-modal-open{overflow:hidden}
@media(max-width:720px){.transcription-production-modal{padding:8px}.transcription-production-dialog{width:calc(100vw - 16px);max-height:calc(100vh - 16px);border-radius:15px}.transcription-production-dialog>header{padding:14px 15px}.transcription-production-body{padding:14px}}

/* Video translation creation remains in context above its history. */
/* Wie beim Transkriptionsfenster: kein backdrop-filter, weil auch hier der
   Schnittplatz ein Video abspielt. */
.dubbing-production-modal{position:fixed;inset:0;z-index:1700;display:grid;place-items:center;padding:clamp(12px,2.2vw,34px);background:rgba(1,2,7,.94);opacity:0;transition:opacity .16s ease}
.dubbing-production-modal.is-open{opacity:1}
.dubbing-production-dialog{display:flex;flex-direction:column;width:min(1180px,calc(100vw - 40px));max-height:calc(100dvh - 24px);overflow:hidden;border:1px solid rgba(255,39,82,.24);border-radius:20px;background:linear-gradient(145deg,rgba(12,14,22,.99),rgba(6,8,14,.99));box-shadow:0 34px 100px rgba(0,0,0,.74),0 0 46px rgba(255,31,78,.08);transform:translateY(12px) scale(.985);transition:transform .18s ease}
.dubbing-production-modal.is-open .dubbing-production-dialog{transform:none}
.dubbing-production-dialog>header{display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;padding:13px 18px;border-bottom:1px solid rgba(135,145,170,.16)}
.dubbing-production-dialog>header small{display:block;margin-bottom:3px;color:#ff315d;font-size:10px;font-weight:800;letter-spacing:.16em}
.dubbing-production-dialog>header h2{margin:0;color:#f7f8fc;font-size:18px}
.dubbing-production-close{display:grid;place-items:center;width:36px;height:36px;border:1px solid #343a49;border-radius:10px;background:#181c26;color:#f2f4fa;font-size:20px;cursor:pointer}
.dubbing-production-close:hover{border-color:#ff315d;background:#27131b;color:#ff486c}
.dubbing-production-body{min-width:0;min-height:0;overflow-x:hidden;overflow-y:auto;padding:14px 18px 16px}
.dubbing-production-body>.workspace-intro-card,.dubbing-production-body>.workspace-profile-note,.dubbing-production-body>.workspace-form,.dubbing-production-body>#workspace-result{width:100%;max-width:none;margin-left:0;margin-right:0}
.dubbing-production-body,.dubbing-production-body *{box-sizing:border-box}
.dubbing-production-body .workspace-intro-card{margin-bottom:12px;padding:10px 12px}
.dubbing-production-body .workspace-wizard-progress{gap:6px;padding:0 0 12px}
.dubbing-production-body .workspace-form>.workspace-group[data-current]{padding:0;overflow:visible;scrollbar-gutter:auto}
.dubbing-production-body .workspace-group legend{gap:10px;padding:0 0 12px}
.dubbing-production-body .workspace-group-grid,.dubbing-production-body .workspace-group[data-open] .workspace-group-grid{gap:10px 14px;padding:13px 15px;border-radius:12px}
/* Die feste Breite von 170px schnitt den Knopf ab: die Credit-Plakette in
   ihm quoll rechts heraus und stand scheinbar daneben. Der Knopf richtet
   sich jetzt nach seinem Inhalt - dasselbe Vorgehen wie bei der
   Keyword-Recherche. Gilt fuer das Popup UND die Vollseite. */
.dubbing-production-body .workspace-actions,
#workspace-body[data-tool="media-dubbing-shared"] .workspace-actions{grid-template-columns:130px 1fr auto;gap:12px;margin:10px -18px -16px;padding:12px 18px}
.dubbing-production-body .workspace-run,
#workspace-body[data-tool="media-dubbing-shared"] .workspace-run{width:auto;min-width:0;max-width:none;justify-self:end;white-space:nowrap}
.dubbing-production-body .wizard-secondary,.dubbing-production-body .wizard-primary{min-height:40px;padding:0 15px}
/* Die Live-Produktionsansicht (.factory-processing) landet hier als
   verschobenes DOM-Fragment ausserhalb von #workspace-body - eine
   allgemeinere Regel mit gleicher Spezifitaet gewann bislang und liess kaum
   Innenabstand uebrig. Hier gezielt und unmissverstaendlich nachgeschaerft. */
.dubbing-production-body .factory-processing,.transcription-production-body .factory-processing{padding:36px 40px 28px!important}
.dubbing-production-body .factory-processing .processing-overview,.transcription-production-body .factory-processing .processing-overview{padding:4px 12px 4px 0}
.dubbing-production-body .factory-processing .processing-stages,.transcription-production-body .factory-processing .processing-stages{padding:4px 4px 4px 40px}
.dubbing-production-body .factory-processing .processing-steps li,.transcription-production-body .factory-processing .processing-steps li{padding:14px 16px}
.dubbing-production-body .factory-processing .processing-stages-head,.transcription-production-body .factory-processing .processing-stages-head{margin-bottom:2px}
/* Waehrend der Live-Produktion laufen im Dialog dauerhaft Animationen
   (Puls-Orb, Spinner). Liegt darunter ein Vollbild-backdrop-filter, muss der
   Browser den 20px-Blur bei JEDEM Animationsframe ueber den gesamten Viewport
   neu rechnen - minutenlang. Das saettigt den Compositor, waehrend die CPU
   niedrig bleibt: der Browser wirkt komplett eingefroren, obwohl kaum
   Rechenlast anliegt. Der Hintergrund ist ohnehin zu 90 % deckend, der Blur
   also kaum sichtbar - waehrend des Laufs wird er deshalb abgeschaltet.
   Fuer das Formular davor (kurzlebig, ohne Dauer-Animation) bleibt er. */
.dubbing-production-modal:has(.factory-processing),.transcription-production-modal:has(.factory-processing){backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(1,2,7,.97)}
/* Die Live-Ansicht bekommt eine eigene Compositor-Ebene, damit ihre
   Animationen nicht das ganze Fenster neu zeichnen lassen. */
.dubbing-production-body .factory-processing,.transcription-production-body .factory-processing{contain:paint}
/* Das Formular der Video-Uebersetzung steht auf einer Seite. Der
   Schrittbalken hat dort nichts mehr zu zeigen, und die Nummer vor der
   Ueberschrift zaehlt eine Reihenfolge, die es nicht mehr gibt. */
.dubbing-production-body .workspace-wizard-progress{display:none}
.dubbing-production-body .workspace-group legend .wizard-step-number{display:none}
.dubbing-production-body .workspace-group legend{padding-bottom:14px}
.dubbing-production-body .workspace-group legend b{font-size:16px}
/* Zwei Spalten fuer die kurzen Auswahlfelder, damit das Formular nicht
   unnoetig in die Laenge geht. */
.dubbing-production-body .workspace-group-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.dubbing-production-body .workspace-field-wide{grid-column:1/-1}
.dubbing-production-body .workspace-field label:not(.workspace-check){margin-bottom:3px;font-size:12px}
.dubbing-production-body .workspace-field small{color:#8d96aa;font-size:10px;line-height:1.4}
/* Die Rechtebestaetigung gehoert sichtbar zur Stimmauswahl, nicht als
   beliebiges Kaestchen daneben. */
.dubbing-production-body .workspace-check{display:flex;align-items:flex-start;gap:9px;margin-top:9px;padding:9px 11px;border:1px solid rgba(255,48,79,.3);border-radius:10px;background:rgba(255,48,79,.06);color:#e6e9f0;font-size:11px;line-height:1.4}
.dubbing-production-body .workspace-check input{margin-top:1px}
/* Aufklappbare Zusatzangaben ruhiger halten - sie sind der Ausnahmefall. */
.dubbing-production-body .workspace-optional-fields{grid-column:1/-1;margin-top:4px;border:1px solid #2a2f3c;border-radius:11px;background:#12141c}
.dubbing-production-body .workspace-optional-fields>summary{padding:11px 13px;font-size:12px}
.dubbing-production-body .workspace-optional-fields-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;padding:0 13px 13px}
@media(max-width:720px){
  .dubbing-production-body .workspace-group-grid,
  .dubbing-production-body .workspace-optional-fields-grid{grid-template-columns:1fr}
}
/* Das Formular steht auf einer Seite - der Hinweis "gehe anschliessend
   weiter" beschreibt einen Schritt, den es nicht mehr gibt. */
.dubbing-production-body [data-wizard-hint]{display:none}
/* Der Startknopf traegt die Credits als Plakette - wie bei "Video
   erstellen". Das Aufklapp-Menue dazu ist in ai-contentfactory-workspace.css
   dauerhaft eingeblendet und legte sich dadurch ueber den Knopf. Hier wird
   es auf das uebliche Verhalten gebracht: nur beim Ueberfahren, und ueber
   dem Knopf statt darauf. */
.dubbing-production-body .workspace-run-credit-popover{display:none}
.dubbing-production-body .workspace-run-credit:hover .workspace-run-credit-popover,
.dubbing-production-body .workspace-run-credit:focus-within .workspace-run-credit-popover{display:grid;gap:6px}
/* Die Plakette im Knopf deutlicher absetzen, damit die Zahl sofort lesbar
   ist - wie beim Videogenerator. */
.dubbing-production-body .workspace-run-credit{gap:5px;padding:4px 9px;border-radius:999px;background:rgba(12,12,20,.38);font-weight:700}
.dubbing-production-body .workspace-run-credit>i:first-child{color:#ffd166}
/* Kompaktere, ruhigere Maske: engere Abstaende, zurueckhaltende Hilfetexte
   und ein Rechtehinweis, der sich ueber beide Spalten legt, damit die
   Zeile darunter nicht verrutscht. */
.dubbing-production-body .workspace-group-grid{gap:11px 16px;padding:14px 15px}
.dubbing-production-body .workspace-field{gap:3px}
.dubbing-production-body .workspace-field small{margin-top:1px;font-size:10px;line-height:1.35;color:#7f8798}
.dubbing-production-body .workspace-field select,
.dubbing-production-body .workspace-field input[type="text"],
.dubbing-production-body .workspace-field input[type="number"]{min-height:38px;padding:0 11px;font-size:13px}
/* Das Stimmfeld hat einen Hilfetext, das Sprachfeld kann ohne Hilfetext
   geliefert werden. Im gleich hohen Rasterfeld verteilte CSS Grid den freien
   Platz dadurch oberhalb der rechten Auswahl. Beide Auswahlfelder beginnen
   nun an derselben Linie; Spalten, Feldgroessen und Abstaende bleiben gleich. */
.dubbing-production-body .workspace-field:has(:is([data-voice-source],[data-config-key="SOURCE_LANGUAGE"])),
#workspace-body[data-tool="media-dubbing-shared"] .workspace-field:has(:is([data-voice-source],[data-config-key="SOURCE_LANGUAGE"])){align-content:start}
.dubbing-production-body .workspace-check{grid-column:1/-1;margin-top:7px;padding:8px 10px;font-size:11px}
.dubbing-production-body .media-file-source{grid-column:1/-1}
/* Die Aufteilung gilt im Popup UND auf der Vollseite: Dateiauswahl und
   Rechtebestaetigung ueber beide Spalten, die vier Auswahlfelder paarweise
   daneben. Ohne die zweite Gruppe von Regeln stand "Stimme" auf der
   Vollseite allein in einer Zeile. */
#workspace-body[data-tool="media-dubbing-shared"] .workspace-group-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 16px}
#workspace-body[data-tool="media-dubbing-shared"] .media-file-source,
#workspace-body[data-tool="media-dubbing-shared"] .workspace-optional-fields{grid-column:1/-1}
#workspace-body[data-tool="media-dubbing-shared"] .workspace-check{grid-column:1/-1}
/* Dateiauswahl und Schere in einer Zeile: links die Auswahl, rechts die
   Schere. Die Schere ist verborgen, solange keine Datei gewaehlt ist -
   ohne Datei gibt es nichts zu schneiden. */
.medien-zeile{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.medien-zeile .video-file-picker{flex:1 1 260px;max-width:420px}
/* Der Dateiname bleibt in seiner Zeile. Vorher brach er um und die Auswahl
   wurde doppelt so hoch wie das Feld daneben. */
.medien-zeile .video-file-picker{min-width:0}
.medien-zeile .video-file-picker>span{min-width:0}
.medien-zeile .video-file-picker small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ausschnitt-schere{display:grid;place-items:center;width:44px;height:44px;flex:none;
border:1px solid #343a48;border-radius:12px;background:#171b24;color:#c9ced8;font-size:19px;cursor:pointer;
transition:border-color .15s ease,background .15s ease,color .15s ease}
.ausschnitt-schere[hidden]{display:none}
.ausschnitt-schere:hover{border-color:#ff304f;background:#221520;color:#fff}
.ausschnitt-schere[aria-pressed="true"]{border-color:#ff304f;background:#ff304f;color:#fff;box-shadow:0 8px 20px rgba(255,48,79,.25)}

/* Der Schnittplatz.
   Buehne mit grossem Bild, Bedienung darueber statt daneben, darunter eine
   Zeitleiste mit zwei Griffen. Zwei getrennte Schieberegler waren zwar
   bedienbar, sahen aber nach Formular aus - hier wird geschnitten. */
.medien-ausschnitt{grid-column:1/-1;display:grid;justify-items:center;gap:9px}
.medien-ausschnitt[hidden]{display:none}
.schnittplatz{box-sizing:border-box;display:grid;width:min(100%,980px);gap:10px;margin-inline:auto;padding:12px;
border:1px solid #2a2f3c;border-radius:16px;background:linear-gradient(160deg,#151922,#0c0f15);
box-shadow:0 18px 45px rgba(0,0,0,.2)}
.schnittplatz[hidden]{display:none}

/* Buehne: das Bild fuellt sie, Knopf und Uhr liegen darueber. */
.schnitt-buehne{position:relative;width:100%;aspect-ratio:16/9;max-height:min(48vh,420px);
overflow:hidden;border-radius:12px;background:#04050a}
.schnitt-bild,.schnitt-bild video{width:100%;height:100%}
.schnitt-bild video{display:block;object-fit:contain;background:#04050a}
.schnitt-bild audio{display:none}
/* Ohne Bild (reiner Ton) bleibt die Buehne flach - ein leeres 16:9-Feld
   waere verschenkter Platz. */
.schnitt-buehne:has(.schnitt-bild:empty),.schnitt-buehne:has(audio){aspect-ratio:auto;min-height:78px}
.schnitt-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
display:grid;place-items:center;width:60px;height:60px;padding:0;border:1px solid rgba(255,255,255,.16);
border-radius:50%;background:rgba(12,14,20,.78);color:#fff;font-size:28px;cursor:pointer;
box-shadow:0 12px 34px rgba(0,0,0,.45);transition:transform .15s ease,background .15s ease,border-color .15s ease}
.schnitt-play:hover{background:#ff2347;border-color:#ff2347;transform:translate(-50%,-50%) scale(1.06)}
.schnitt-play:active{transform:translate(-50%,-50%) scale(.97)}
.schnitt-play>i{margin-left:2px}
.schnitt-play .mdi-pause{margin-left:0}
.schnitt-uhr{position:absolute;right:10px;bottom:10px;padding:3px 8px;border-radius:7px;
background:rgba(6,8,12,.72);color:#e7eaf1;font:650 11px/1.2 'Space Grotesk',sans-serif;
font-variant-numeric:tabular-nums}

/* Zeitleiste: heller Streifen fuer die ganze Aufnahme, kraeftig fuer den
   gewaehlten Bereich. Aussen wird abgedunkelt - was nicht gewaehlt ist,
   wird auch nicht verarbeitet. */
.schnitt-leiste{position:relative;height:34px;margin-inline:5px;border-radius:9px;background:#171b24;
border:1px solid #2a3040;touch-action:none;user-select:none}
.schnitt-auswahl{position:absolute;top:0;bottom:0;border-radius:7px;
background:linear-gradient(180deg,rgba(255,48,79,.34),rgba(255,48,79,.16));
border-left:2px solid #ff304f;border-right:2px solid #ff304f;pointer-events:none}
.schnitt-kopf{position:absolute;top:-3px;bottom:-3px;width:2px;border-radius:2px;background:#fff;
box-shadow:0 0 10px rgba(255,255,255,.55);pointer-events:none}
.schnitt-kopf[hidden]{display:none}
.schnitt-griff{position:absolute;top:50%;width:16px;height:30px;margin-left:-8px;padding:0;
transform:translateY(-50%);border:1px solid #ff5c74;border-radius:6px;
background:linear-gradient(180deg,#ff4b64,#ff2347);cursor:ew-resize;
box-shadow:0 4px 14px rgba(255,48,79,.4)}
/* Zwei feine Rillen wie an einem Schnittgriff - sie zeigen, dass man hier
   anfassen kann. */
.schnitt-griff:before{content:"";position:absolute;inset:8px 6px;
background:repeating-linear-gradient(90deg,rgba(255,255,255,.75) 0 1px,transparent 1px 4px)}
.schnitt-griff:hover{filter:brightness(1.08)}
.schnitt-griff[data-zieht]{filter:brightness(1.14);box-shadow:0 6px 20px rgba(255,48,79,.55)}
.schnitt-griff:focus-visible{outline:2px solid #fff;outline-offset:2px}

.schnitt-fuss{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-inline:5px;flex-wrap:wrap}
.schnitt-hinweis{color:#6f7686;font-size:10px}
.schnitt-spanne{color:#e7eaf1;font:650 12px/1.2 'Space Grotesk',sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:720px){
 .schnitt-hinweis{display:none}
 .schnitt-play{width:52px;height:52px;font-size:24px}
}

/* Rechtebestaetigung beim Stimmklonen.
   Sie stand als hoher Kasten mit dem Haekchen unter dem Text: die Regeln
   dafuer lagen ueber drei Dateien verstreut (workspace, red, hier) und
   widersprachen sich. Hier steht sie vollstaendig an einer Stelle - mit der
   Kennung des Feldes, damit die verstreuten Regeln nicht dazwischenfunken,
   und in beiden Umgebungen: Produktionsfenster und Vollseite. */
.dubbing-production-body .workspace-check[data-voice-consent],
#workspace-body[data-tool="media-dubbing-shared"] .workspace-check[data-voice-consent]{
display:flex!important;align-items:center;gap:9px;min-height:0;margin-top:8px;padding:8px 11px;
border:1px solid rgba(255,48,79,.3);border-radius:10px;background:rgba(255,48,79,.06);
color:#dfe3ec;font:500 11px/1.35 'Inter',system-ui,sans-serif}
/* Die Darstellungsregel darueber ist absichtlich stark, darf aber das
   semantische hidden-Attribut nicht ueberstimmen. */
.dubbing-production-body .workspace-check[data-voice-consent][hidden],
#workspace-body[data-tool="media-dubbing-shared"] .workspace-check[data-voice-consent][hidden]{display:none!important}
.dubbing-production-body .workspace-check[data-voice-consent]>input[type="checkbox"],
#workspace-body[data-tool="media-dubbing-shared"] .workspace-check[data-voice-consent]>input[type="checkbox"]{
flex:0 0 auto;width:15px;height:15px;min-height:0;margin:0;padding:0;accent-color:#ff304f;cursor:pointer}
.dubbing-production-body .workspace-check[data-voice-consent]>span,
#workspace-body[data-tool="media-dubbing-shared"] .workspace-check[data-voice-consent]>span{min-width:0}
.dubbing-production-body .workspace-check[data-voice-consent]:hover,
#workspace-body[data-tool="media-dubbing-shared"] .workspace-check[data-voice-consent]:hover{border-color:rgba(255,48,79,.5)}
/* Die beiden Stimm-Felder und die beiden Sprachfelder bleiben je eine
   Spalte breit - auch wenn ein Feld ausgeblendet wird. */
.dubbing-production-body [data-voice-gender-field],
#workspace-body[data-tool="media-dubbing-shared"] [data-voice-gender-field]{grid-column:auto}
.dubbing-production-body .workspace-field:has([data-voice-source]),
#workspace-body[data-tool="media-dubbing-shared"] .workspace-field:has([data-voice-source]){grid-column:auto}
/* Eine konkrete Stimme statt einer technischen JSON-Option. */
.dubbing-production-body .dubbing-voice-field,
#workspace-body[data-tool="media-dubbing-shared"] .dubbing-voice-field{grid-column:1/-1}
.dubbing-voice-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.dubbing-voice-card{display:flex;align-items:center;justify-content:space-between;min-height:36px;padding:0 10px;border:1px solid #303746;border-radius:9px;background:#161a23;color:#bfc6d4;font:650 12px/1 'Inter',system-ui,sans-serif;cursor:pointer;transition:border-color .15s ease,background .15s ease,color .15s ease}
.dubbing-voice-card>i{opacity:0;color:#fff;font-size:14px}
.dubbing-voice-card:hover{border-color:#626b7d;color:#f5f7fb}
.dubbing-voice-card.active{border-color:#ff304f;background:rgba(255,48,79,.12);color:#fff}
.dubbing-voice-card.active>i{opacity:1}
.dubbing-voice-card:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(max-width:720px){.dubbing-voice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dubbing-voice-card{min-height:38px}}
@media(max-width:720px){
  #workspace-body[data-tool="media-dubbing-shared"] .workspace-group-grid{grid-template-columns:1fr}
}
/* Die Dateiauswahl nahm die ganze Breite ein und wirkte dadurch wie eine
   leere Flaeche. Sie richtet sich jetzt nach ihrem Inhalt und bleibt links
   stehen - auf schmalen Bildschirmen wieder voll breit. */
.dubbing-production-body .video-file-picker{gap:11px;min-height:0;padding:11px 15px;max-width:420px}
.dubbing-production-body .media-file-source>small{display:block;margin-top:5px}
@media(max-width:720px){.dubbing-production-body .video-file-picker{max-width:none}}
.dubbing-production-body .workspace-group legend{padding-bottom:11px}
.dubbing-production-body .workspace-intro-card{margin-bottom:10px}
body.dubbing-production-modal-open{overflow:hidden}
@media(max-width:720px){.dubbing-production-modal{padding:8px}.dubbing-production-dialog{width:calc(100vw - 16px);max-height:calc(100vh - 16px);border-radius:15px}.dubbing-production-dialog>header{padding:14px 15px}.dubbing-production-body{padding:14px}}
/* Wie das Shorts-Fenster (07.09.2026, Wunsch des Betreibers): der Dialog der
   Uebersetzung waechst mit seinem Inhalt, etwa wenn „Optionale Angaben“
   aufklappt. Gescrollt wird nur die Ueberlagerung, nie der Dialogkoerper.
   Der Rand zum Bildschirm ist ein Aussenabstand des Dialogs, weil Chrome den
   Innenabstand am Ende eines Scrollbereichs nicht mitzaehlt. */
.dubbing-production-modal{display:flex;flex-direction:column;align-items:center;justify-content:safe center;overflow-y:auto;padding:0}
.dubbing-production-dialog{flex:0 0 auto;margin:clamp(16px,3vw,44px) auto;max-height:none;height:auto}
.dubbing-production-dialog .dubbing-production-body{min-height:auto;overflow:visible}
@media(max-width:720px){.dubbing-production-modal{padding:0}.dubbing-production-dialog{margin:8px auto;max-height:none}}

/* Im mobilen Übersetzer trennt die Einführung die Eingaben nur noch mit einer
   Haarlinie. Der zweite Kartenrahmen nimmt sonst unnötig Höhe ein. */
@media(max-width:720px){
  .transcription-production-body .workspace-intro-card,
  #workspace-body[data-tool="media-transcription-shared"]>.workspace-intro-card{
    margin:0 0 14px!important;
    padding:0 0 12px!important;
    border:0!important;
    border-bottom:1px solid #2b303b!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .transcription-production-body .workspace-form>.workspace-group[data-current],
  #workspace-body[data-tool="media-transcription-shared"] .workspace-form>.workspace-group[data-current]{
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .transcription-production-body .workspace-group[data-current] .workspace-group-grid,
  #workspace-body[data-tool="media-transcription-shared"] .workspace-group[data-current] .workspace-group-grid{
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .transcription-production-body .workspace-optional-fields,
  #workspace-body[data-tool="media-transcription-shared"] .workspace-optional-fields{
    margin:8px 0 0!important;
    border:0!important;
    border-top:1px solid #2b303b!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .transcription-production-body .workspace-optional-fields>summary,
  #workspace-body[data-tool="media-transcription-shared"] .workspace-optional-fields>summary{
    padding:12px 0!important;
  }
  .transcription-production-body .workspace-optional-fields[open]>summary,
  #workspace-body[data-tool="media-transcription-shared"] .workspace-optional-fields[open]>summary{
    border-bottom:1px solid #2b303b;
  }
  .transcription-production-body .workspace-optional-fields-grid,
  #workspace-body[data-tool="media-transcription-shared"] .workspace-optional-fields-grid{
    padding:12px 0 0!important;
  }
  .dubbing-production-body .workspace-intro-card,
  #workspace-body[data-tool="media-dubbing-shared"]>.workspace-intro-card{
    margin:0 0 14px!important;
    padding:0 0 12px!important;
    border:0!important;
    border-bottom:1px solid #2b303b!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .dubbing-production-body .workspace-form>.workspace-group[data-current],
  #workspace-body[data-tool="media-dubbing-shared"] .workspace-form>.workspace-group[data-current]{
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .dubbing-production-body .workspace-group[data-current] .workspace-group-grid,
  #workspace-body[data-tool="media-dubbing-shared"] .workspace-group[data-current] .workspace-group-grid{
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .dubbing-production-body .workspace-actions .workspace-run,
  #workspace-body[data-tool="media-dubbing-shared"] .workspace-actions .workspace-run{
    grid-column:1/-1;
    justify-self:center;
    margin-inline:auto;
  }
  .dubbing-production-body .workspace-actions,
  #workspace-body[data-tool="media-dubbing-shared"] .workspace-actions{justify-content:center!important;}
}

/* Video-Übersetzung: Auf Tablet und Telefon folgt das Briefing dem
   Abschnittsraster. Der umschließende Kasten entfällt; eine Haarlinie trennt
   die Eingaben vom Schritt-Titel, während Auswahlkarten ihren Rahmen behalten. */
/* Die Transkription verwendet dieselbe Abschnittslogik. */
@media(max-width:1024px){
  .transcription-production-body .workspace-form>.workspace-group[data-current],
  #workspace-body[data-tool="media-transcription-shared"] .workspace-form>.workspace-group[data-current],
  .dubbing-production-body .workspace-form>.workspace-group[data-current],
  #workspace-body[data-tool="media-dubbing-shared"] .workspace-form>.workspace-group[data-current]{
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .transcription-production-body .workspace-group[data-current] .workspace-group-grid,
  #workspace-body[data-tool="media-transcription-shared"] .workspace-group[data-current] .workspace-group-grid,
  .dubbing-production-body .workspace-group[data-current] .workspace-group-grid,
  #workspace-body[data-tool="media-dubbing-shared"] .workspace-group[data-current] .workspace-group-grid{
    padding:14px 0 0!important;
    border:0!important;
    border-top:1px solid #2b303b!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
}

/* Cinema player actions and delayed information overlay. */
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay > .video-history-detail{
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-areas:"detail-head" "detail-media"!important;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-history-detail-media{
  grid-area:detail-media;
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:10px!important;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-rebuild-player{
  position:relative;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-download{
  position:absolute;
  z-index:8;
  top:16px;
  right:16px;
  display:grid;
  width:44px;
  height:44px;
  padding:0;
  place-items:center;
  border:1px solid rgba(255,255,255,.2);
  border-radius:13px;
  background:rgba(7,9,14,.72);
  color:#fff;
  font-size:21px;
  cursor:pointer;
  opacity:.82;
  box-shadow:0 10px 28px rgba(0,0,0,.32);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:opacity .18s ease,transform .18s ease,background .18s ease,border-color .18s ease;
}
/* Frame-Knoepfe (29.08.2026): unter dem Download-Knopf gestapelt.
   Kamera = aktueller Frame, Kamera mit Bild = Endframe, Film-Plus =
   neue Produktion mit dem Frame als Startbild. */
/* Bildschirmfoto (03.09.2026): direkt unter dem MP4-Download. */
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-frame-save{top:72px}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-frame-copy{top:128px}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-frame-continue{top:184px}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-frame-thumbnail{top:240px}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-audio-remix{top:296px}
/* Sound-Anpassung (29.08.2026): kompaktes Panel mittig im Overlay. */
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-audio-remix-panel{
  position:absolute;
  z-index:30;
  top:50%;
  left:50%;
  display:grid;
  gap:10px;
  width:min(360px,calc(100% - 28px));
  padding:14px;
  border:1px solid #3a4050;
  border-radius:16px;
  background:#171a23;
  box-shadow:0 28px 70px rgba(0,0,0,.6);
  transform:translate(-50%,-50%);
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-audio-remix-panel header{display:flex;align-items:center;justify-content:space-between;gap:8px}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-audio-remix-panel header strong{font-size:14px;color:#fff}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-audio-remix-panel header button{display:grid;width:28px;height:28px;place-items:center;padding:0;border:1px solid #343947;border-radius:9px;background:#242833;color:#adb5c5;cursor:pointer}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-audio-remix-panel label{display:grid;gap:5px;color:#aeb6c5;font-size:11px;font-weight:650}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-audio-remix-panel select{min-height:34px;padding:6px 9px;border:1px solid #303543;border-radius:10px;background:#12151d;color:#eef1f6;font:inherit;font-size:12px}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-audio-remix-panel .video-audio-remix-volume{display:flex;align-items:center;gap:10px}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-audio-remix-panel .video-audio-remix-volume input{flex:1 1 auto;accent-color:#ff304f}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-audio-remix-panel .video-audio-remix-volume output{min-width:44px;color:#fff;font-size:12px;text-align:right}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-audio-remix-panel .video-audio-remix-check{display:flex;align-items:center;gap:8px;font-size:12px}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-audio-remix-panel .video-audio-remix-check input{accent-color:#ff304f}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-audio-remix-panel [data-audio-start]{min-height:38px;border-radius:12px;font-weight:750}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-audio-remix-panel small{min-height:14px;color:#ff9fae;font-size:11px;line-height:1.4}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-download:hover,
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-download:focus-visible{
  opacity:1;
  transform:translateY(-2px);
  border-color:rgba(255,48,79,.72);
  background:#ff304f;
  outline:0;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-info{
  position:absolute!important;
  z-index:2;
  inset:0;
  display:grid!important;
  grid-template-columns:minmax(230px,.9fr) minmax(320px,1.1fr)!important;
  align-content:end;
  gap:14px!important;
  margin:0!important;
  padding:clamp(70px,10vw,150px) 78px 76px 22px!important;
  border:0!important;
  border-radius:inherit;
  background:linear-gradient(180deg,rgba(3,4,8,.1) 0%,rgba(3,4,8,.34) 35%,rgba(3,4,8,.94) 100%)!important;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(5px);
  transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-rebuild-player:hover .cinema-player-info{
  opacity:1;
  visibility:visible;
  transform:none;
  transition-delay:1s;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-info .video-rebuild-prompt,
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-info .video-rebuild-config{
  min-width:0;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:13px!important;
  background:rgba(10,12,18,.78)!important;
  box-shadow:0 12px 34px rgba(0,0,0,.24);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-info .video-rebuild-prompt{
  max-height:150px;
  overflow:auto;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-history-detail-media .video-rebuild-actions{
  position:static!important;
  display:flex!important;
  width:auto!important;
  max-width:none!important;
  padding:0!important;
  border:0!important;
  justify-content:flex-end!important;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-history-detail-media .video-rebuild-actions .cc-button{
  width:auto!important;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay > .video-history-detail.is-video-portrait .cinema-player-info{
  grid-template-columns:minmax(0,1fr)!important;
  align-content:end!important;
  padding:64px 14px 72px!important;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay > .video-history-detail.is-video-portrait .cinema-player-info .video-rebuild-config{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
@media(max-width:760px){
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-download{top:10px;right:10px;width:38px;height:38px}
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-frame-save{top:58px}
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-frame-copy{top:106px}
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-frame-continue{top:154px}
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-frame-thumbnail{top:202px}
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-audio-remix{top:250px}
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-info{grid-template-columns:1fr!important;padding:58px 12px 62px!important}
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-info .video-rebuild-config{display:none!important}
}

/* Keep delayed player information readable without card-like boxes. */
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-info{
  grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr)!important;
  align-items:end!important;
  background:linear-gradient(180deg,rgba(2,3,7,.08) 0%,rgba(2,3,7,.46) 42%,rgba(2,3,7,.96) 100%)!important;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-info .video-rebuild-prompt,
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-info .video-rebuild-config,
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-info .video-rebuild-config>div{
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-info .video-rebuild-prompt{
  max-height:none!important;
  overflow:visible!important;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-info .video-rebuild-prompt p{
  max-height:112px!important;
  margin-top:7px!important;
  overflow:auto!important;
  color:#fff!important;
  font-size:13px!important;
  line-height:1.55!important;
  text-shadow:0 2px 8px rgba(0,0,0,.9)!important;
  scrollbar-width:thin;
}
/* Der Scrollbalken des Prompts muss bedienbar sein (29.08.2026): das
   Hover-Overlay .cinema-player-info steht auf pointer-events:none, damit
   Klicks das Video darunter erreichen - beim Einblenden wurde das nie
   zurueckgenommen, also erreichte weder Mausrad noch Ziehen den scrollbaren
   Absatz. Nur der Absatz und der Kopierknopf holen sich ihre Ereignisse
   selbst zurueck; alles andere bleibt durchlaessig fuers Video. */
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-info .video-rebuild-prompt p,
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-info .video-prompt-copy{
  pointer-events:auto;
}
/* Kopfzeile des Prompt-Felds mit Kopierknopf (29.08.2026) */
.video-rebuild-prompt-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.video-rebuild-prompt-head small{margin-bottom:0!important}
.video-prompt-copy{
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:7px;
  background:rgba(10,12,18,.62);
  color:#fff;
  font-size:13px;
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease;
}
.video-prompt-copy:hover{
  border-color:rgba(255,48,79,.7);
  background:rgba(255,48,79,.18);
}
.video-prompt-copy.is-copied{
  border-color:rgba(70,200,120,.75);
  color:#5ee39a;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-info .video-rebuild-config{
  gap:10px 20px!important;
  padding-left:18px!important;
  border-left:1px solid rgba(255,255,255,.18)!important;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-info small{
  color:rgba(218,224,239,.68)!important;
  text-shadow:0 2px 7px rgba(0,0,0,.9)!important;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-info strong{
  color:#fff!important;
  text-shadow:0 2px 8px rgba(0,0,0,.9)!important;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay > .video-history-detail.is-video-portrait .cinema-player-info{
  grid-template-columns:minmax(0,1fr)!important;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay > .video-history-detail.is-video-portrait .cinema-player-info .video-rebuild-config{
  padding-top:12px!important;
  padding-left:0!important;
  border-top:1px solid rgba(255,255,255,.18)!important;
  border-left:0!important;
}

/* With all actions inside the player, keep the cinema player centered. */
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-history-detail-media{
  justify-items:center!important;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-rebuild-player{
  justify-self:center!important;
  margin-inline:auto!important;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay > .video-history-detail.is-video-portrait{
  width:min(calc((90vh - 94px) * .5625 + 32px),calc(100vw - 16px))!important;
}

/* Two concise, self-explanatory metadata lines inside the hover overlay. */
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-info .video-rebuild-config-compact{
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-end!important;
  gap:7px!important;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-info .video-rebuild-config-line{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:0!important;
  color:#fff!important;
  font-size:12px!important;
  line-height:1.35!important;
  text-shadow:0 2px 8px rgba(0,0,0,.9)!important;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-info .video-rebuild-config-line>*{
  display:inline-flex!important;
  align-items:center!important;
  gap:5px!important;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-info .video-rebuild-config-line>*+*::before{
  margin-left:2px;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-info .video-rebuild-config-line>*+*{
  margin-left:9px;
  padding-left:11px;
  border-left:1px solid rgba(255,255,255,.18);
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-info .video-rebuild-config-line>*::before{
  font-size:12px;
  font-weight:900;
  line-height:1;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-info .video-rebuild-config-line>*:nth-child(1)::before{
  content:"◆";
  color:#ff4266;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-info .video-rebuild-config-line>*:nth-child(2)::before{
  content:"▭";
  color:#67b7ff;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-info .video-rebuild-config-line>*:nth-child(3)::before{
  content:"▣";
  color:#8edb9b;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-info .video-rebuild-config-line>*:nth-child(4)::before{
  content:"◷";
  color:#ffc85b;
}
/* Compact cinema dialog: production metadata already lives in the player overlay. */
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay > .video-history-detail{
  position:relative;
  grid-template-areas:"detail-media"!important;
  width:min(1380px,calc(100vw - 88px))!important;
  max-height:calc(100vh - 64px)!important;
  padding:18px!important;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay > .video-history-detail > .cinema-detail-close{
  position:absolute;
  z-index:20;
  top:12px;
  right:12px;
}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay > .video-history-detail:not(.is-video-portrait) .video-rebuild-player{
  width:min(1320px,calc(100vw - 140px))!important;
  max-width:100%!important;
}
@media(max-width:760px){
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay > .video-history-detail{
    width:calc(100vw - 20px)!important;
    padding:10px!important;
  }
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay > .video-history-detail:not(.is-video-portrait) .video-rebuild-player{
    width:100%!important;
  }
}

#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-info .video-rebuild-config-line>*:nth-child(5)::before{
  content:"✦";
  color:#c99bff;
}

/* Shared modal treatment for the remaining form-based tools. */
body.generic-tool-modal-open{overflow:hidden!important}
.generic-tool-modal{position:fixed;inset:0;z-index:10050;display:grid;place-items:center;padding:18px;overflow:hidden;background:rgba(2,4,10,.88);-webkit-backdrop-filter:blur(18px) saturate(.7);backdrop-filter:blur(18px) saturate(.7);opacity:0;transition:opacity .16s ease}
.generic-tool-modal.is-open{opacity:1}
.generic-tool-modal-dialog{width:min(1180px,calc(100vw - 36px));max-height:calc(100dvh - 36px);display:flex;flex-direction:column;overflow:hidden;color:#f7f8fc;background:linear-gradient(145deg,rgba(11,13,21,.985),rgba(6,8,14,.99));border:1px solid rgba(255,40,82,.42);border-radius:18px;box-shadow:0 34px 100px rgba(0,0,0,.72),0 0 44px rgba(255,35,77,.08);transform:translateY(10px) scale(.985);transition:transform .16s ease}
.generic-tool-modal.is-open .generic-tool-modal-dialog{transform:none}
.generic-tool-modal-head{min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 16px 13px 20px;border-bottom:1px solid rgba(145,154,177,.2)}
.generic-tool-modal-head>div{min-width:0;display:grid;gap:3px}
.generic-tool-modal-head span{color:#ff3158;font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.generic-tool-modal-head strong{overflow:hidden;color:#fff;font-size:18px;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}
.generic-tool-modal-head button{width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;padding:0;color:#e8ebf4;background:#171b25;border:1px solid #343a49;border-radius:10px;cursor:pointer}
.generic-tool-modal-head button:hover{color:#fff;border-color:#ff3158;background:#24131a}
.generic-tool-modal-content{min-height:260px;padding:20px;overflow:auto;scrollbar-color:#4b5367 transparent;scrollbar-width:thin}
.generic-tool-modal-content>.factory-loading{min-height:220px;display:grid;place-items:center;align-content:center;gap:12px}
.generic-tool-modal-content .workspace-page,.generic-tool-modal-content .workspace-form,.generic-tool-modal-content .workspace-result{max-width:none;margin-inline:0}
@media(max-width:760px){.generic-tool-modal{padding:8px}.generic-tool-modal-dialog{width:100%;max-height:calc(100dvh - 16px);border-radius:14px}.generic-tool-modal-content{padding:12px}}

/* Keep copied wizard pages inside the generic production dialog. */
.generic-tool-modal-content{box-sizing:border-box;min-width:0;overflow-x:hidden}

/* Die zweite Seite des Skriptassistenten ist laenger als ein Viewport. Sie
   durfte deshalb kurzzeitig den ganzen Dialog wachsen lassen - damit stand
   der Dialog aber nicht mehr mittig und sein unteres Ende samt Aktionsleiste
   und Recherchehinweis lag ausserhalb des sichtbaren Bereichs. Der Dialog
   bleibt jetzt eine mittige Box in Viewport-Groesse; gescrollt wird der
   Inhalt, und die Aktionsleiste klebt dabei am unteren Rand der Box. */
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .generic-tool-modal-content{padding-bottom:0}
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-actions{grid-template-columns:auto 1fr auto;position:sticky;bottom:0;z-index:4}
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .wizard-secondary{width:auto;justify-self:start;padding-inline:18px}
.generic-tool-modal-content #workspace-body,
.generic-tool-modal-content .workspace-panel,
.generic-tool-modal-content .workspace-form{box-sizing:border-box!important;width:100%!important;max-width:none!important;min-width:0!important}
.generic-tool-modal-content #workspace-body{overflow-x:hidden!important;padding-left:0!important;padding-right:0!important}
.generic-tool-modal-content .workspace-actions{box-sizing:border-box!important;width:100%!important;min-width:0!important;margin-left:0!important;margin-right:0!important}
.generic-tool-modal-content #workspace-body[data-tool="youtube-keyword-research"]{padding-top:10px!important;padding-bottom:0!important}
.generic-tool-modal-content #workspace-body[data-tool="youtube-keyword-research"] .workspace-intro-card,
.generic-tool-modal-content #workspace-body[data-tool="youtube-keyword-research"] .workspace-profile-note{margin-bottom:8px!important;padding:9px 12px!important}
.generic-tool-modal-content #workspace-body[data-tool="youtube-keyword-research"] .workspace-form{padding-top:0!important}
.generic-tool-modal-content #workspace-body[data-tool="youtube-keyword-research"] .workspace-group-grid{gap:8px 12px!important;padding:12px 14px!important}
.generic-tool-modal-content #workspace-body[data-tool="youtube-keyword-research"] .workspace-field textarea{min-height:88px!important}
.generic-tool-modal-content #workspace-body[data-tool="youtube-keyword-research"] .workspace-field input,
.generic-tool-modal-content #workspace-body[data-tool="youtube-keyword-research"] .workspace-field select{min-height:40px!important;padding:8px 11px!important}
.generic-tool-modal-content #workspace-body[data-tool="youtube-keyword-research"] .workspace-actions{min-height:54px!important;padding-top:8px!important;padding-bottom:8px!important}
.generic-tool-modal-content #workspace-body[data-tool="youtube-keyword-research"] .keyword-research-mode-form{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px 12px!important;width:100%!important}
.generic-tool-modal-content #workspace-body[data-tool="youtube-keyword-research"] .workspace-group-grid>.keyword-research-mode-form{grid-column:1/-1!important}
.generic-tool-modal-content #workspace-body[data-tool="youtube-keyword-research"] .workspace-group-grid{font-size:11px!important}
.generic-tool-modal-content #workspace-body[data-tool="youtube-keyword-research"] .workspace-group-grid{display:block!important;width:100%!important}
.generic-tool-modal-content #workspace-body[data-tool="youtube-keyword-research"] .workspace-group-grid input,
.generic-tool-modal-content #workspace-body[data-tool="youtube-keyword-research"] .workspace-group-grid select,
.generic-tool-modal-content #workspace-body[data-tool="youtube-keyword-research"] .workspace-group-grid textarea{font-size:11px!important;line-height:1.35!important}
.generic-tool-modal-content #workspace-body[data-tool="youtube-keyword-research"] .keyword-research-mode-form>.workspace-field{grid-column:auto!important;min-width:0!important;gap:4px!important}
.generic-tool-modal-content #workspace-body[data-tool="youtube-keyword-research"] .keyword-research-mode-form>.keyword-research-mode-picker{grid-column:1/-1!important}
.generic-tool-modal-content #workspace-body[data-tool="youtube-keyword-research"] .keyword-research-mode-form>.workspace-field:has(textarea){grid-column:auto!important}
.generic-tool-modal-content #workspace-body[data-tool="youtube-keyword-research"] .keyword-research-mode-form .workspace-field label{font-size:11px!important}
.generic-tool-modal-content #workspace-body[data-tool="youtube-keyword-research"] .keyword-research-mode-form .workspace-field small{font-size:9px!important;line-height:1.25!important}
.generic-tool-modal-content #workspace-body[data-tool="youtube-keyword-research"] .keyword-research-mode-form .workspace-field textarea{min-height:72px!important}
.generic-tool-modal-content #workspace-body[data-tool="youtube-keyword-research"] .workspace-optional-fields{grid-column:1/-1!important}

/* The generic production modal receives the workspace children without the
   original #workspace-body wrapper, so scope the compact layout to the modal id. */
.generic-tool-modal[data-generic-tool-id="youtube-keyword-research"] .generic-tool-modal-content{font-size:11px!important;overflow-x:hidden}
.generic-tool-modal[data-generic-tool-id="youtube-keyword-research"] .workspace-group-grid{display:block!important;width:100%!important;max-width:none!important;padding:12px 14px!important;font-size:11px!important}
.generic-tool-modal[data-generic-tool-id="youtube-keyword-research"] .keyword-research-mode-form{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px 12px!important;width:100%!important;max-width:none!important}
.generic-tool-modal[data-generic-tool-id="youtube-keyword-research"] .keyword-research-mode-form>.workspace-field{grid-column:auto!important;min-width:0!important;gap:4px!important}
.generic-tool-modal[data-generic-tool-id="youtube-keyword-research"] .keyword-research-mode-form>.keyword-research-mode-picker{grid-column:1/-1!important}
.generic-tool-modal[data-generic-tool-id="youtube-keyword-research"] .keyword-research-mode-form>.workspace-field:has(textarea){grid-column:auto!important}
.generic-tool-modal[data-generic-tool-id="youtube-keyword-research"] .workspace-field label{font-size:11px!important}
.generic-tool-modal[data-generic-tool-id="youtube-keyword-research"] .workspace-field small{font-size:9px!important;line-height:1.25!important}
.generic-tool-modal[data-generic-tool-id="youtube-keyword-research"] .workspace-field textarea{min-height:72px!important;font-size:11px!important;line-height:1.35!important}
.generic-tool-modal[data-generic-tool-id="youtube-keyword-research"] .workspace-field input,
.generic-tool-modal[data-generic-tool-id="youtube-keyword-research"] .workspace-field select{min-height:38px!important;padding:7px 10px!important;font-size:11px!important}
.generic-tool-modal[data-generic-tool-id="youtube-keyword-research"] .workspace-optional-fields{grid-column:1/-1!important}
.generic-tool-modal[data-generic-tool-id="youtube-keyword-research"] .workspace-actions{min-height:54px!important;padding:8px 0!important;margin-left:0!important;margin-right:0!important}
.generic-tool-modal-open .factory-credit-float{display:none!important}
.generic-tool-modal[data-generic-tool-id="youtube-keyword-research"] .workspace-actions{grid-template-columns:minmax(0,1fr) auto!important;gap:12px!important}
.generic-tool-modal[data-generic-tool-id="youtube-keyword-research"] .workspace-run{width:auto!important;min-width:210px!important;max-width:none!important;white-space:nowrap!important;overflow:visible!important}
.generic-tool-modal[data-generic-tool-id="youtube-keyword-research"] .workspace-intro-card,
.generic-tool-modal[data-generic-tool-id="youtube-keyword-research"] .workspace-profile-note{display:none!important}
.generic-tool-modal[data-generic-tool-id="youtube-keyword-research"] .generic-tool-modal-content{padding-top:8px!important}

/* Creator Coach starts directly with its question hero instead of the generic tool header. */
body.factory-page-active #factory-workspace:has(#workspace-body > .cc-shell.is-coach-shell) .workspace-header{
  display:none!important;
}
body.factory-page-active #factory-workspace:has(#workspace-body > .cc-shell.is-coach-shell) .workspace-body{
  min-height:100%!important;
  padding-top:24px!important;
}

/* Coach result: give the answer room and make limited data explicit instead of
   presenting a generic fallback as a confident green success state. */
body.factory-page-active #workspace-body>.cc-shell.is-coach-shell,
body.factory-page-active #workspace-body>.cc-shell.is-coach-shell:has(.coach-form){
  width:min(920px,calc(100% - 48px))!important;
  max-width:920px!important;
}
@media(max-width:700px){body.factory-page-active #workspace-body>.cc-shell.is-coach-shell,body.factory-page-active #workspace-body>.cc-shell.is-coach-shell:has(.coach-form){width:calc(100% - 24px)!important}}

/* Optional compact navigation: retain every tool icon while freeing workspace width. */
.factory-sidebar-toggle{
  position:absolute;top:74px;right:10px;bottom:auto;z-index:2;width:28px;height:28px;display:grid;place-items:center;
  padding:0;border:1px solid #303544;border-radius:8px;background:#171b24;color:#aeb5c4;cursor:pointer;
}
.factory-sidebar-toggle:hover{color:#fff;border-color:#ff3656;background:#24131a}
body.factory-sidebar-collapsed .factory-sidebar{width:78px!important;padding-left:10px!important;padding-right:10px!important}
body.factory-sidebar-collapsed .factory-main{margin-left:78px!important}
body.factory-sidebar-state-ready .factory-sidebar{transition:width .28s ease,padding .28s ease}
body.factory-sidebar-state-ready .factory-main{transition:margin-left .28s ease}
body.factory-sidebar-collapsed .factory-brand{justify-content:center!important;padding:0!important}
body.factory-sidebar-collapsed .factory-sidebar-control em,
body.factory-sidebar-collapsed .factory-sidebar-tool em{
  opacity:0!important;visibility:hidden!important;width:0!important;max-width:0!important;overflow:hidden!important;
}
body.factory-sidebar-collapsed .factory-brand>span:last-child,
body.factory-sidebar-collapsed .factory-nav span,
body.factory-sidebar-collapsed .factory-sidebar-tools-head,
body.factory-sidebar-collapsed .factory-sidebar-control-group h3,
body.factory-sidebar-collapsed .factory-sidebar-tool-group h3,
body.factory-sidebar-collapsed .factory-sidebar-control span,
body.factory-sidebar-collapsed .factory-sidebar-tool span,
body.factory-sidebar-collapsed .factory-sidebar-control em,
body.factory-sidebar-collapsed .factory-sidebar-tool em{
  opacity:0!important;visibility:hidden!important;max-width:0!important;width:0!important;overflow:hidden!important;
  transition:opacity .16s ease,max-width .28s ease,width .28s ease,visibility .16s ease;
}
body:not(.factory-sidebar-collapsed) .factory-brand>span:last-child,
body:not(.factory-sidebar-collapsed) .factory-nav span,
body:not(.factory-sidebar-collapsed) .factory-sidebar-tools-head,
body:not(.factory-sidebar-collapsed) .factory-sidebar-control-group h3,
body:not(.factory-sidebar-collapsed) .factory-sidebar-tool-group h3,
body:not(.factory-sidebar-collapsed) .factory-sidebar-control span,
body:not(.factory-sidebar-collapsed) .factory-sidebar-tool span{
  transition:opacity .2s ease .08s,max-width .28s ease,width .28s ease,visibility .2s ease;
}
body.factory-sidebar-collapsed .factory-nav{margin-top:42px!important}
body.factory-sidebar-collapsed .factory-nav a,
body.factory-sidebar-collapsed .factory-nav a{justify-content:center!important;padding:7px 6px!important}
body.factory-sidebar-collapsed .factory-sidebar-control,
body.factory-sidebar-collapsed .factory-sidebar-tool{justify-content:center!important;padding:5px 6px!important}
body.factory-sidebar-collapsed .factory-nav a i,
body.factory-sidebar-collapsed .factory-sidebar-control i,
body.factory-sidebar-collapsed .factory-sidebar-tool i{margin:0!important}
body.factory-sidebar-collapsed .factory-sidebar-control-group,
body.factory-sidebar-collapsed .factory-sidebar-tool-group{margin-top:4px!important;padding-top:4px!important}
.video-history-cinema-overlay{position:relative}
.video-cinema-nav{position:fixed;top:50%;z-index:1810;display:grid;place-items:center;width:44px;height:44px;border:1px solid #3a4050;border-radius:50%;background:rgba(15,18,27,.92);color:#fff;box-shadow:0 8px 24px #0008;transform:translateY(-50%);cursor:pointer;transition:background .16s ease,border-color .16s ease,opacity .16s ease}
.video-cinema-nav:hover:not(:disabled){background:#ff304f;border-color:#ff304f}.video-cinema-nav:disabled{opacity:.28;cursor:default}
/* Am Player statt am Fenster (01.09.2026): Die Pfeile sind Kinder des
   Detail-Containers und stehen mit 12px Abstand direkt neben dem Video -
   bei 9:16 wie bei 16:9. Ist links kein Platz, ruecken sie nach innen. */
/* Die Pfeile stehen als eigene Spalten LINKS und RECHTS neben dem Player
   (Wunsch vom 01.09.2026, mit Skizze). Sie haengen am Overlay, nicht am
   Detail-Container: der hat overflow:auto bzw. overflow:hidden und schnitt
   alles daneben Stehende weg. Das Overlay wird dafuer zum Flex-Layout:
   [Pfeil] [Player] [Pfeil]. */
/* Beim Blaettern erscheint das Kino ohne Ein-/Ausblenden: sonst sieht man
   fuer den Moment der Ueberblendung den Verlauf durchscheinen. */
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay.is-instant,
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay.is-instant *{transition:none!important;animation:none!important}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay.is-instant{opacity:1!important}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay.is-instant>.video-history-detail{transform:none!important}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay.is-cinema-nav{display:flex!important;align-items:center;justify-content:center;gap:14px}
/* margin:0 ist PFLICHT: der Player traegt margin:auto, und das schiebt im
   Flex-Layout die Pfeile bis an den Bildschirmrand (Befund vom 01.09.2026). */
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay.is-cinema-nav>.video-history-detail{order:1;flex:0 1 auto;min-width:0;margin:0!important}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay.is-cinema-nav>.video-cinema-nav{position:static;flex:0 0 auto;transform:none}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay.is-cinema-nav>.video-cinema-nav-prev{order:0}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay.is-cinema-nav>.video-cinema-nav-next{order:2}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay.is-cinema-nav>.video-cinema-nav:hover{transform:scale(1.08)}
@media(max-width:700px){#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay.is-cinema-nav{gap:4px}}
@media(max-width:700px){.video-cinema-nav{width:36px;height:36px}.video-cinema-nav-prev{left:8px}.video-cinema-nav-next{right:8px}}
.factory-sidebar-toggle i{transition:transform .28s ease}
body.factory-sidebar-collapsed .factory-brand-mark{margin:auto}
@media(max-width:700px){.factory-sidebar-toggle{display:none}}

/* Mobiles Off-Canvas-Menue: Auf kleinen Bildschirmen bleibt die Sidebar
   erreichbar, statt nur ausgeblendet zu werden. */
.factory-mobile-menu-toggle,.factory-mobile-sidebar-backdrop{display:none}
@media(max-width:700px){
  .factory-mobile-menu-toggle{
    display:grid;place-items:center;flex:none;width:38px;height:38px;padding:0;
    border:1px solid #303544;border-radius:10px;background:#171b25;color:#f5f6fa;cursor:pointer;z-index:31;
  }
  .factory-mobile-menu-toggle:hover,.factory-mobile-menu-toggle:focus-visible{border-color:#ff3656;background:#24131a}
  .factory-mobile-menu-toggle:focus-visible{outline:2px solid #ff3656;outline-offset:2px}
  .factory-mobile-menu-toggle i{font-size:21px;line-height:1}
  .factory-sidebar{
    display:flex!important;inset:0 auto 0 0;width:min(86vw,300px)!important;max-width:300px;
    padding:24px 14px 18px!important;transform:translateX(-105%);overflow-y:auto!important;overflow-x:hidden;
    z-index:30;transition:transform .24s ease,box-shadow .24s ease;box-shadow:none;
  }
  body.factory-sidebar-mobile-open .factory-sidebar{transform:translateX(0);box-shadow:18px 0 45px rgba(0,0,0,.48)}
  .factory-mobile-sidebar-backdrop{position:fixed;inset:0;display:none;padding:0;border:0;background:rgba(3,5,9,.7);backdrop-filter:blur(2px);z-index:29}
  body.factory-sidebar-mobile-open .factory-mobile-sidebar-backdrop{display:block}
  /* Ein gespeicherter Desktop-Zustand darf das mobile Menue nicht auf Icons reduzieren. */
  body.factory-sidebar-collapsed .factory-sidebar{width:min(86vw,300px)!important;padding:24px 14px 18px!important}
  body.factory-sidebar-collapsed .factory-sidebar .factory-brand{width:auto!important;height:auto!important;justify-content:flex-start!important;padding:0 6px!important}
  body.factory-sidebar-collapsed .factory-sidebar .factory-brand-wordmark{display:block!important;width:156px!important;height:auto!important;visibility:visible!important}
  body.factory-sidebar-collapsed .factory-sidebar .factory-nav a,
  body.factory-sidebar-collapsed .factory-sidebar .factory-sidebar-control,
  body.factory-sidebar-collapsed .factory-sidebar .factory-sidebar-tool{width:100%!important;min-height:40px!important;margin:0!important;padding:8px 10px!important;justify-content:flex-start!important;border-radius:8px!important}
  body.factory-sidebar-collapsed .factory-sidebar .factory-nav span,
  body.factory-sidebar-collapsed .factory-sidebar .factory-sidebar-tools-head,
  body.factory-sidebar-collapsed .factory-sidebar .factory-sidebar-tool-group h3,
  body.factory-sidebar-collapsed .factory-sidebar .factory-sidebar-control-group h3,
  body.factory-sidebar-collapsed .factory-sidebar .factory-sidebar-control span,
  body.factory-sidebar-collapsed .factory-sidebar .factory-sidebar-tool span{display:block!important;visibility:visible!important}
  body.factory-sidebar-collapsed .factory-sidebar .factory-nav a i,
  body.factory-sidebar-collapsed .factory-sidebar .factory-sidebar-control i,
  body.factory-sidebar-collapsed .factory-sidebar .factory-sidebar-tool i{margin:0!important;width:19px!important;font-size:17px!important}
}
/* Video generation currently supports one output per run. Keep the legacy variants field out of the UI. */
#workspace-body[data-tool="video-generator"] .video-generator-form label:has(select[name="variants"]){display:none!important}
#workspace-body[data-tool="video-generator"] .video-generator-prompt textarea::placeholder{white-space:pre-wrap}
body.factory-page-active #factory-workspace .shorts-history .cc-empty{padding:30px 20px}

/* Live-Kachel im Verlauf von Video-Uebersetzung und Transkription. Zeigt an,
   dass ein Auftrag weiterlaeuft, nachdem das Produktionsfenster geschlossen
   wurde - dieselbe Rolle wie die Platzhalter bei "Video erstellen" und Shorts. */
.media-run-processing{display:grid;gap:12px;margin:0 0 22px}
.media-run-processing-card{display:flex;align-items:center;gap:16px;padding:16px 18px;border:1px solid rgba(255,48,79,.45);border-radius:14px;background:radial-gradient(circle at 12% 50%,rgba(255,48,79,.14),transparent 46%),linear-gradient(145deg,#12151d,#090b10)}
.media-run-processing-icon{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:13px;background:rgba(255,48,79,.14);color:#ff4965;font-size:23px}
.media-run-processing-copy{display:grid;gap:4px;min-width:0;flex:1 1 auto}
.media-run-processing-copy>small{color:#ff526d;font-size:10px;font-weight:800;letter-spacing:.12em}
.media-run-processing-copy>strong{color:#f2f4fa;font-size:14px}
.media-run-processing-copy>p{margin:0;color:#929bad;font-size:11px}
.media-run-processing-bar{display:block;overflow:hidden;width:100%;height:6px;margin-top:5px;border-radius:99px;background:#272c37}
.media-run-processing-bar>b{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ff284d,#ff6b82);transition:width .4s ease}
.media-run-processing-copy>em{color:#ff6077;font-size:10px;font-style:normal;font-weight:700}

/* Die laufende Uebersetzung im Verlauf laesst sich anklicken, um den
   Verarbeitungsstand zu sehen. Das soll man ihr ansehen. */
.video-history-generation-card.is-clickable{cursor:pointer;transition:border-color .16s ease,transform .16s ease}
.video-history-generation-card.is-clickable:hover,
.video-history-generation-card.is-clickable:focus-visible{border-color:rgba(255,48,79,.7);transform:translateY(-2px)}

/* Fehlgeschlagene Uebersetzung: sichtbar, aber ohne die rote Betriebsamkeit
   einer laufenden Produktion. */
.video-history-generation-card.is-failed{border-color:rgba(255,90,90,.45);background:radial-gradient(circle at 50% 40%,rgba(255,90,90,.1),transparent 45%),linear-gradient(145deg,#171216,#0b0a0c)}
.video-history-generation-card.is-failed .video-history-generation-visual>i{background:rgba(255,90,90,.14);color:#ff7d7d}

/* Nicht abrufbares Video: die Kachel bleibt stehen und sagt warum, statt
   wortlos zu verschwinden. */
.video-history-gallery-card.is-unavailable>.video-history-gallery-open{opacity:.25}
.video-history-unavailable{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;gap:5px;padding:12px;background:rgba(8,9,13,.82);color:#c9ced9;text-align:center;pointer-events:none}
.video-history-unavailable>i{color:#8d96aa;font-size:26px}
.video-history-unavailable>strong{font-size:13px}
.video-history-unavailable>small{color:#8d96aa;font-size:10px}

/* --- Abo und Passwort im Profil ---------------------------------------- */
.cf-account-dialog{position:fixed;inset:0;z-index:1800;display:grid;place-items:center;padding:clamp(12px,2.5vw,36px);background:rgba(1,2,7,.92)}
.cf-account-dialog-panel{display:flex;flex-direction:column;width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:hidden;border:1px solid rgba(255,39,82,.24);border-radius:18px;background:linear-gradient(145deg,rgba(13,15,23,.99),rgba(7,9,15,.99));box-shadow:0 30px 80px rgba(0,0,0,.7)}
.cf-account-dialog-panel>header{display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;padding:14px 18px;border-bottom:1px solid rgba(135,145,170,.16)}
.cf-account-dialog-panel>header small{display:block;margin-bottom:3px;color:#ff315d;font-size:10px;font-weight:800;letter-spacing:.16em}
.cf-account-dialog-panel>header h2{margin:0;color:#f7f8fc;font-size:17px}
.cf-account-dialog-close{display:grid;place-items:center;width:34px;height:34px;border:1px solid #343a49;border-radius:10px;background:#181c26;color:#f2f4fa;font-size:19px;cursor:pointer}
.cf-account-dialog-close:hover{border-color:#ff315d;background:#27131b;color:#ff486c}
.cf-account-dialog-body{overflow:auto;padding:16px 18px 20px}
body.cf-account-dialog-open{overflow:hidden}

.cf-account-loading,.cf-account-error{display:flex;align-items:center;gap:9px;padding:14px;border-radius:11px;background:#12141c;color:#c9ced9;font-size:12px}
.cf-account-error{border:1px solid rgba(255,90,90,.4);background:rgba(255,90,90,.08);color:#ffb3b3}

.cf-account-block{margin-bottom:16px}
.cf-account-block h4{margin:0 0 9px;color:#9aa2b4;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.cf-account-headline{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;padding:14px 15px;border:1px solid #262b37;border-radius:13px;background:#12141c}
.cf-account-headline h3{margin:6px 0 0;color:#f5f6f8;font-size:19px}
.cf-account-badge{display:inline-block;padding:3px 9px;border-radius:999px;background:#2a2f3c;color:#c2c8d4;font-size:10px;font-weight:800;letter-spacing:.08em}
.cf-account-badge.is-active{background:rgba(45,200,120,.16);color:#5fe0a0}
.cf-account-price{display:grid;color:#fff;font-size:20px;font-weight:800;text-align:right;white-space:nowrap}
.cf-account-price small{color:#8d96aa;font-size:10px;font-weight:600}

.cf-account-credit-bar{overflow:hidden;height:7px;border-radius:99px;background:#242833}
.cf-account-credit-bar>span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ff284d,#ff6b82)}
.cf-account-credit-legend{display:flex;justify-content:space-between;gap:12px;margin-top:7px;color:#8d96aa;font-size:11px}
.cf-account-credit-legend b{color:#e6e9f0}

.cf-account-list{display:grid;gap:1px;margin:0;padding:0;overflow:hidden;border:1px solid #262b37;border-radius:12px;background:#262b37}
.cf-account-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;padding:10px 13px;background:#101219}
.cf-account-row dt{color:#8d96aa;font-size:12px}
.cf-account-row dd{margin:0;color:#eef0f4;font-size:12px;font-weight:600;text-align:right}
.cf-account-note{margin:14px 0 0;color:#7f8798;font-size:11px;line-height:1.5}

.cf-account-form{display:grid;gap:12px}
.cf-account-form label{display:grid;gap:5px}
.cf-account-form label>span{color:#e6e9f0;font-size:12px;font-weight:600}
.cf-account-form input{min-height:40px;padding:0 12px;border:1px solid #303544;border-radius:10px;background:#0f1118;color:#f2f4fa;font-size:13px}
.cf-account-form input:focus{border-color:#ff315d;outline:none}
.cf-account-rules{display:grid;gap:4px;margin:0;padding:11px 13px;border:1px solid #262b37;border-radius:11px;background:#101219;list-style:none}
.cf-account-rules li{display:flex;align-items:center;gap:7px;color:#8d96aa;font-size:11px}
.cf-account-rules li.is-met{color:#5fe0a0}
.cf-account-rules li>i{font-size:15px}
.cf-account-form-message{padding:10px 12px;border-radius:10px;font-size:12px}
.cf-account-form-message.is-error{border:1px solid rgba(255,90,90,.4);background:rgba(255,90,90,.08);color:#ffb3b3}
.cf-account-form-message.is-success{border:1px solid rgba(45,200,120,.4);background:rgba(45,200,120,.1);color:#7fe8b4}
.cf-account-submit{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;border:0;border-radius:11px;background:linear-gradient(135deg,#ff284d,#ff5f7a);color:#fff;font-size:13px;font-weight:700;cursor:pointer}
.cf-account-submit:disabled{opacity:.6;cursor:default}

@media(max-width:560px){
  .cf-account-headline{flex-direction:column;align-items:flex-start}
  .cf-account-price{text-align:left}
}

/* Aeltere Uebersetzungen ohne Zusatzangaben: wenigstens Video und Download,
   statt einer Fehlermeldung. */
.dubbing-simple-result{display:grid;gap:12px;justify-items:start}
.dubbing-simple-result video{width:100%;border-radius:12px;background:#050609}
.dubbing-simple-result p{margin:0;color:#8d96aa;font-size:12px;line-height:1.5}
.dubbing-simple-result a{padding:0 16px;text-decoration:none}

/* --- Skript-Generator: eine Seite ohne Gequetsche ------------------------
   Der Assistent laeuft auf zwei Seiten, die erste passte trotzdem nicht auf
   einen Bildschirm. Der Platz ging nicht an die Inhalte, sondern an leere
   Flaeche: ein Textfeld war 118 Pixel hoch fuer einen Satz, und jedes
   Textfeld belegte eine ganze Zeile fuer sich.

   Bewusst NICHT geaendert: Schriftgroessen. Kleiner setzen wuerde genau das
   Gequetsche erzeugen, das hier vermieden werden soll - der Platz kommt aus
   der Hoehe der Felder und aus der zweiten Spalte.

   Zweimal notiert, weil das Formular in zwei Umgebungen erscheint: auf der
   Werkzeugseite unter #workspace-body und im Produktionsfenster, das die
   Kinder ohne diesen Rahmen uebernimmt. */
#workspace-body[data-tool="youtube-video-script-generator"] .workspace-group-grid,
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-group-grid{gap:12px 16px;padding:15px 16px}

/* Thema und Ziel nebeneinander. Ein Freitext ueber zwei bis drei Zeilen
   braucht keine eigene Zeile - die breiten Felder (Sprecherplan, die
   Ja/Nein-Karten) behalten ihre volle Breite ueber .workspace-field-wide. */
#workspace-body[data-tool="youtube-video-script-generator"] .workspace-field:has(textarea):not(.workspace-field-wide),
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-field:has(textarea):not(.workspace-field-wide){grid-column:auto}

#workspace-body[data-tool="youtube-video-script-generator"] .workspace-field textarea,
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-field textarea{min-height:74px;max-height:190px}
#workspace-body[data-tool="youtube-video-script-generator"] .workspace-field input,
#workspace-body[data-tool="youtube-video-script-generator"] .workspace-field select,
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-field input,
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-field select{min-height:42px}
#workspace-body[data-tool="youtube-video-script-generator"] .workspace-field,
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-field{gap:6px}

/* Kopfbereich: Beschreibung, Creator-Hinweis und Ueberschrift standen mit
   sehr viel Luft uebereinander, bevor das erste Feld kam. */
#workspace-body[data-tool="youtube-video-script-generator"] .workspace-intro-card,
#workspace-body[data-tool="youtube-video-script-generator"] .workspace-profile-note,
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-intro-card,
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-profile-note{margin-bottom:9px;padding:10px 13px}
#workspace-body[data-tool="youtube-video-script-generator"] .workspace-group>legend,
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-group>legend{margin-bottom:9px}
#workspace-body[data-tool="youtube-video-script-generator"] .workspace-wizard-progress,
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-wizard-progress{margin-bottom:9px}

/* Der aufklappbare Bereich und die breiten Felder bleiben ueber beide
   Spalten - sonst zerfaellt die Zuordnung von Karte und Zusatzfeldern. */
#workspace-body[data-tool="youtube-video-script-generator"] .workspace-optional-fields,
#workspace-body[data-tool="youtube-video-script-generator"] .workspace-field-wide,
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-optional-fields,
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-field-wide{grid-column:1/-1}

/* Der Startknopf traegt die Credits als Plakette im Knopf - wie bei der
   Video-Uebersetzung und bei "Video erstellen". Zuvor stand die Zahl neben
   dem Knopf auf dem dunklen Grund, weil der Knopf anderswo eine feste Breite
   bekommt und die Plakette herausrutschte.

   Dazu gehoert das Aufklapp-Menue: in ai-contentfactory-workspace.css steht
   `.workspace-run-credit-popover{display:grid}` ohne Bedingung, das Menue ist
   also dauerhaft sichtbar und legt sich ueber den Knopf. Hier bekommt es das
   uebliche Verhalten - nur beim Ueberfahren. */
#workspace-body[data-tool="youtube-video-script-generator"] .workspace-run,
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-run{width:auto;min-width:0;max-width:none;justify-self:end;white-space:nowrap;overflow:visible}
#workspace-body[data-tool="youtube-video-script-generator"] .workspace-run-credit-popover,
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-run-credit-popover{display:none}
#workspace-body[data-tool="youtube-video-script-generator"] .workspace-run-credit:hover .workspace-run-credit-popover,
#workspace-body[data-tool="youtube-video-script-generator"] .workspace-run-credit:focus-within .workspace-run-credit-popover,
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-run-credit:hover .workspace-run-credit-popover,
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-run-credit:focus-within .workspace-run-credit-popover{display:grid;gap:6px}
#workspace-body[data-tool="youtube-video-script-generator"] .workspace-run-credit,
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-run-credit{gap:5px;padding:4px 9px;border-radius:999px;background:rgba(12,12,20,.38);font-weight:700}
#workspace-body[data-tool="youtube-video-script-generator"] .workspace-run-credit>i:first-child,
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-run-credit>i:first-child{color:#ffd166}

@media(max-width:760px){
  #workspace-body[data-tool="youtube-video-script-generator"] .workspace-field:has(textarea):not(.workspace-field-wide),
  .generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-field:has(textarea):not(.workspace-field-wide){grid-column:1/-1}
}

/* --- Live-Produktion im allgemeinen Werkzeugfenster ----------------------
   Fuer die Video-Uebersetzung und die Transkription gibt es weiter oben schon
   grosszuegige Abstaende. Das allgemeine Produktionsfenster (Skript-Generator,
   Ideen, Keywords ...) bekam sie nicht und fiel auf die geschrumpfte Fassung
   aus ai-contentfactory-modal-v3.css zurueck: Schrittkarten mit 9px Polsterung
   und 10px Schrift. Das wirkte gequetscht.

   Das Attribut [data-generic-tool-modal] steht am Fenster selbst und hebt die
   Spezifitaet gerade so weit an, dass diese Regeln gewinnen - ohne !important. */
/* Live-Produktion: die Karte ist das Fenster.
   Vorher lagen zwei Rahmen ineinander - die Dialogbox mit Kopfzeile und
   darin die Karte der Live-Produktion (gemeldet 16.09.2026). Der
   Dialograhmen tritt zurueck, der Schliessknopf sitzt in der Ecke der
   Karte. Geschlossen wird weiterhin auch mit Escape und einem Klick neben
   die Karte. */
.generic-tool-modal[data-generic-tool-modal]:has(.factory-processing) .generic-tool-modal-dialog{position:relative;background:none;border:0;border-radius:0;box-shadow:none}
.generic-tool-modal[data-generic-tool-modal]:has(.factory-processing) .generic-tool-modal-content{min-height:0;padding:0;overflow:visible}
.generic-tool-modal[data-generic-tool-modal]:has(.factory-processing) .generic-tool-modal-head{position:absolute;top:0;right:0;z-index:3;min-height:0;padding:14px 16px;border:0;background:none}
.generic-tool-modal[data-generic-tool-modal]:has(.factory-processing) .generic-tool-modal-head>div{display:none}
/* Ohne Abbrechen-Knopf war die Fussleiste der Karte nur eine leere Linie. */
.generic-tool-modal[data-generic-tool-modal]:has(.factory-processing) .processing-actions:not(:has(.processing-cancel:not([hidden]))){display:none}
.generic-tool-modal[data-generic-tool-modal] .factory-processing{padding:30px 34px 24px}
.generic-tool-modal[data-generic-tool-modal] .factory-processing .processing-overview{align-self:center;padding:4px 14px 4px 0}
.generic-tool-modal[data-generic-tool-modal] .factory-processing .processing-stages{align-self:center;padding:4px 2px 4px 34px}
.generic-tool-modal[data-generic-tool-modal] .factory-processing .processing-stages-head{margin-bottom:8px}
.generic-tool-modal[data-generic-tool-modal] .factory-processing .processing-steps{gap:10px;margin-top:14px}
.generic-tool-modal[data-generic-tool-modal] .factory-processing .processing-steps li{gap:13px;padding:13px 16px}
.generic-tool-modal[data-generic-tool-modal] .factory-processing .processing-steps strong{font-size:13px}
.generic-tool-modal[data-generic-tool-modal] .factory-processing .processing-steps small{font-size:11px;line-height:1.4}
.generic-tool-modal[data-generic-tool-modal] .factory-processing .processing-orb{width:84px;height:84px;margin:4px auto 18px;border-radius:26px;font-size:36px}
.generic-tool-modal[data-generic-tool-modal] .factory-processing .processing-heading h3{margin:8px 0;font-size:27px}
.generic-tool-modal[data-generic-tool-modal] .factory-processing .processing-heading p{min-height:22px;font-size:13px}
.generic-tool-modal[data-generic-tool-modal] .factory-processing .processing-progress{margin:20px 0 10px}

/* --- Konto & Sicherheit im Creator-Profil -------------------------------
   Das Passwort steht bewusst AUSSERHALB des Profilformulars: es wird nicht
   mit den Kanaldaten gespeichert, sondern ueber einen eigenen Endpunkt
   geaendert.

   Die Zeile steht oben neben der YouTube-Verbindung, nicht unter den Knoepfen.
   Dort gehoeren die Kontosachen zusammen, und der Dialog endet - wie ueblich -
   mit der Knopfleiste statt mit einem Kasten dahinter. Masse und Rahmen sind
   bewusst dieselben wie bei .creator-youtube-card, damit beide Zeilen als
   Paar gelesen werden. */
.profile-security{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:64px;margin:0 0 22px;padding:14px 18px;border:1px solid #30333e;border-radius:14px;background:#111219}
.profile-security>div{display:grid;gap:3px;min-width:0}
.profile-security strong{color:#f2f4f8;font-size:14px}
.profile-security small{color:#98a0b0;font-size:11px;line-height:1.4}
.profile-security>button{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;white-space:nowrap}
@media(max-width:620px){
  .profile-security{flex-direction:column;align-items:stretch;gap:10px}
  .profile-security>button{width:100%}
}

/* --- Profilmenue schmaler ------------------------------------------------
   Die Karte richtete sich allein nach ihrem Inhalt und wurde dadurch breiter
   als noetig - die laengste Zeile war die E-Mail-Adresse in der Kopfzeile.
   Sie bekommt jetzt eine Obergrenze; die Adresse wird bei Bedarf gekuerzt,
   statt die ganze Karte zu dehnen. */
#factory-account-menu.factory-account-menu{min-width:0;width:236px;max-width:calc(100vw - 24px)}
#factory-account-menu .factory-account-head{min-width:0}
#factory-account-menu .factory-account-head>span,
#factory-account-menu .factory-account-head>small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* --- Seitenleiste: Umschalter und eingeklappte Breite --------------------

   1) Der Umschalter war ein eckiger 28px-Kasten am rechten Rand und sprang
      beim Ein- und Ausklappen von right:10px auf right:25px. Er ist jetzt
      rund, etwas groesser und in beiden Zustaenden mittig zur Leiste.

      Die Pfeilrichtung wird in content-factory-nav-state.js umgeschaltet
      (mdi-chevron-left / mdi-chevron-right). Hier deshalb bewusst KEINE
      Drehung - sonst kippte das Symbol zweimal und zeigte wieder falsch.

   2) Eingeklappt war die Leiste 78px breit, die Symbole aber nur 16-19px.
      Dadurch wirkte sie leer - so entsteht der Eindruck, die Symbole seien zu
      klein oder die Leiste zu breit. Jetzt 64px mit 20px-Symbolen in einer
      44x40-Flaeche, die auch die Hervorhebung des aktiven Werkzeugs traegt. */

.factory-sidebar-toggle{
  /* Auf der Kante, nicht in der Leiste. Frei schwebend im Innenraum wirkte der
     Knopf wie nachtraeglich angeklebt; auf der Trennlinie ist er dort, wo man
     ihn erwartet. Die Leiste hat overflow:hidden, deshalb position:fixed statt
     absolute - sonst wuerde er an der Kante abgeschnitten.

     Die Pfeilrichtung wird in content-factory-nav-state.js umgeschaltet
     (mdi-chevron-left / mdi-chevron-right). Hier deshalb bewusst KEINE
     Drehung - sonst kippte das Symbol zweimal und zeigte wieder falsch. */
  position:fixed;z-index:11;
  top:46px;left:calc(var(--sidebar) - 13px);right:auto;bottom:auto;
  width:26px;height:26px;display:grid;place-items:center;padding:0;
  border:1px solid #2b3040;border-radius:50%;background:#141821;color:#98a0b0;
  box-shadow:0 2px 10px rgba(0,0,0,.45);cursor:pointer;
  transition:left .28s ease,background .16s ease,border-color .16s ease,color .16s ease;
}
.factory-sidebar-toggle i{font-size:15px;line-height:1}
.factory-sidebar-toggle:hover{color:#fff;border-color:#ff3656;background:#24131a}
.factory-sidebar-toggle:focus-visible{outline:2px solid #ff3656;outline-offset:2px}

:root{--sidebar-collapsed:64px}
body.factory-sidebar-collapsed .factory-sidebar{width:var(--sidebar-collapsed)!important;padding-left:8px!important;padding-right:8px!important;overflow:visible}
body.factory-sidebar-collapsed .factory-main{margin-left:var(--sidebar-collapsed)!important}
/* Die Arbeitsflaeche liegt als eigene Ebene ueber der Seite und war mit
   `inset: 76px 0 0 var(--sidebar)` an die AUSGEKLAPPTE Breite gebunden
   (ai-contentfactory-pages.css). Eingeklappt blieb links ein leerer
   Streifen von rund 240 Pixeln stehen - auf jeder Werkzeugseite.
   Die zusaetzliche Klasse hebt die Spezifitaet ueber die Grundregel,
   ohne !important. */
body.factory-sidebar-collapsed.factory-page-active .factory-workspace.open{left:var(--sidebar-collapsed)}
body.factory-sidebar-state-ready.factory-page-active .factory-workspace.open{transition:left .28s ease}
/* Eingeklappt ist die Leiste 64px breit - der Knopf wandert mit auf ihre Kante. */
body.factory-sidebar-collapsed .factory-sidebar-toggle{left:calc(var(--sidebar-collapsed) - 13px);top:46px;right:auto}

body.factory-sidebar-collapsed .factory-nav a,
body.factory-sidebar-collapsed .factory-sidebar-control,
body.factory-sidebar-collapsed .factory-sidebar-tool{
  width:44px!important;min-height:40px!important;margin-left:auto!important;margin-right:auto!important;
  padding:0!important;border-radius:10px!important;justify-content:center!important;
}
body.factory-sidebar-collapsed .factory-nav a i,
body.factory-sidebar-collapsed .factory-sidebar-control i,
body.factory-sidebar-collapsed .factory-sidebar-tool i{width:auto!important;margin:0!important;font-size:20px!important}

/* Die Liste bleibt vertikal scrollbar, ihre Zeichenflaeche reicht aber bis
   ueber den Laufzaehler. Mehr rechter Innenabstand gleicht die zusaetzliche
   Breite aus, sodass alle Tool-Icons exakt an ihrer bisherigen Stelle bleiben. */
body.factory-sidebar-collapsed .factory-sidebar-tool-list{
  width:calc(100% + 12px);padding-right:15px;scrollbar-width:none;
}
body.factory-sidebar-collapsed .factory-sidebar-tool-list::-webkit-scrollbar{width:0;height:0}

/* Der Laufzaehler ist auch in der schmalen Leiste sichtbar. Er liegt absolut
   am Werkzeug und nimmt deshalb keinen Platz im Flex-Layout ein: Das Symbol
   bleibt exakt in der Mitte, unabhaengig davon, ob 1 oder 12 Laeufe aktiv sind. */
.factory-sidebar-control,
.factory-sidebar-tool{position:relative}
body.factory-sidebar-collapsed .factory-sidebar-control .factory-sidebar-tool-running,
body.factory-sidebar-collapsed .factory-sidebar-tool .factory-sidebar-tool-running{
  position:absolute;top:50%;left:calc(50% + 13px);right:auto;z-index:30;
  display:grid!important;place-items:center;
  width:19px!important;max-width:19px!important;min-width:19px!important;height:19px!important;
  margin:0!important;overflow:visible!important;
  opacity:1!important;visibility:visible!important;
  border-width:1px;font-size:10px;transform:translateY(-50%);
}
body.factory-sidebar-collapsed .factory-sidebar-tool-running::after{inset:-3px}
body.factory-sidebar-collapsed .factory-sidebar-tool-running b{font-size:10px;line-height:1}

/* --- Creator-Profil auf eine Seite ---------------------------------------
   Das Profil musste gescrollt werden. Der Platz ging nicht an die Inhalte,
   sondern an Fussabstaende (48px am Formular, 42px am Rahmen) und an vier
   Textfelder mit je 78px Hoehe fuer zwei bis drei Zeilen.

   Bewusst NICHT geaendert: Schriftgroessen - die sind hier ohnehin schon bei
   9 bis 11 Pixeln. Kleiner waere nicht mehr lesbar. Der Platz kommt aus den
   Abstaenden und den Feldhoehen.

   Die Regeln stehen hinter dem Kompaktblock in ai-contentfactory-profile.css
   und teilen dessen Selektor, gewinnen also ueber die Reihenfolge. */
body.factory-page-active #workspace-body:has(> .profile-hero){padding-top:14px;padding-bottom:14px}
body.factory-page-active #workspace-body:has(> .profile-hero) .profile-hero{padding:10px 14px;margin-bottom:10px}
body.factory-page-active #workspace-body:has(> .profile-hero) .creator-youtube-card{min-height:56px;margin-bottom:10px;padding:9px 13px}
body.factory-page-active #workspace-body:has(> .profile-hero) .profile-security{min-height:56px;margin:0 0 12px;padding:9px 13px}
body.factory-page-active #workspace-body:has(> .profile-hero) .creator-profile-form{gap:9px 16px;padding-bottom:0}
body.factory-page-active #workspace-body:has(> .profile-hero) .profile-field{gap:4px}
body.factory-page-active #workspace-body:has(> .profile-hero) .profile-field textarea{min-height:62px}
body.factory-page-active #workspace-body:has(> .profile-hero) .profile-field input,
body.factory-page-active #workspace-body:has(> .profile-hero) .profile-field select{min-height:36px;padding:7px 11px}
body.factory-page-active #workspace-body:has(> .profile-hero) .profile-actions{margin:6px -2px 0;padding:12px 0 0}

/* --- Abo & Vertrag: Karten statt Zeilenliste -----------------------------
   Vorher war der Dialog eine Folge gleich aussehender Beschriftung/Wert-Zeilen
   - dadurch wirkte er wie ein Baukasten, und das Wesentliche (Tarif, Preis,
   verfuegbare Credits) hob sich nicht ab.

   Jetzt: ein Kopfbereich fuer Tarif und Preis, die Zahlen als Kacheln, die
   Vertragsangaben in zwei Spalten. */

.cf-plan-hero{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  margin-bottom:16px;padding:18px 20px;border:1px solid #2c3140;border-radius:16px;
  background:linear-gradient(135deg,#171a24 0%,#14161f 55%,#191218 100%);
}
.cf-plan-hero.is-top{border-color:rgba(255,48,79,.4);box-shadow:inset 0 1px rgba(255,255,255,.05),0 10px 30px rgba(255,35,71,.08)}
.cf-plan-hero-copy{display:grid;gap:7px;min-width:0}
.cf-plan-hero-copy h3{margin:0;color:#f5f7fb;font:700 26px/1.1 'Space Grotesk',system-ui,sans-serif}
.cf-plan-hero-price{flex:0 0 auto;display:grid;gap:2px;text-align:right}
.cf-plan-hero-price strong{color:#fff;font:700 24px/1 'Space Grotesk',system-ui,sans-serif}
.cf-plan-hero-price small{color:#8d95a6;font-size:11px}
.cf-plan-top-note{display:flex;align-items:center;gap:6px;margin:0;color:#ff8098;font-size:11px}
.cf-plan-top-note i{font-size:14px}

.cf-plan-section{margin-bottom:14px}
.cf-plan-section>header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:9px}
.cf-plan-section>header h4{margin:0;color:#aeb5c4;font:700 10px/1 'DM Sans',system-ui,sans-serif;letter-spacing:.13em;text-transform:uppercase}
.cf-plan-share{color:#ff5a76;font:700 12px/1 'DM Sans',system-ui,sans-serif}

/* Zwei Spalten fuer die Zahlen, zwei fuer die Vertragsangaben. Bei schmalen
   Fenstern eine - vier enge Kacheln nebeneinander waeren unlesbar. */
.cf-plan-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
.cf-plan-tile{display:grid;gap:2px;padding:10px 12px;border:1px solid #262b38;border-radius:11px;background:#12141b;min-width:0}
.cf-plan-tile small{color:#858da0;font-size:10px;letter-spacing:.02em}
.cf-plan-tile strong{color:#f2f4f8;font:700 16px/1.15 'Space Grotesk',system-ui,sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cf-plan-tile em{color:#6f7789;font-size:9px;font-style:normal}
.cf-plan-tiles.is-contract .cf-plan-tile strong{font-size:13px;font-weight:600}

.cf-account-note{display:flex;align-items:flex-start;gap:8px;margin:14px 0 0;color:#8d95a6;font-size:11px;line-height:1.5}
.cf-account-note i{flex:0 0 auto;margin-top:1px;font-size:14px;color:#5f677a}

@media(max-width:520px){
  .cf-plan-hero{flex-direction:column;align-items:flex-start;gap:10px}
  .cf-plan-hero-price{text-align:left}
  .cf-plan-tiles{grid-template-columns:1fr}
}

/* Auf dem groessten Tarif fuehrt ein Upgrade-Knopf ins Leere. Die Klasse setzt
   content-factory-upgrade.js anhand der Portal-Antwort; sie deckt damit auch
   das Profilmenue ab, das erst beim Klick entsteht. */
body.portal-hoechster-tarif [data-factory-upgrade]{display:none!important}

/* --- Abo kuendigen -------------------------------------------------------
   Zwei Schritte: erst der Knopf, dann eine Bestaetigung mit Enddatum. Ein
   Kuendigungsknopf, der beim ersten Klick kuendigt, waere ein Fehlklick zu
   viel - und die Bestaetigung ist bei Vertraegen im Netz vorgeschrieben.

   Der Bereich sitzt bewusst am Ende des Dialogs und ist zurueckhaltend
   gestaltet: er soll auffindbar sein, aber nicht der auffaelligste Knopf. */
.cf-plan-cancel{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:16px;padding:13px 16px;border:1px solid #2a2f3c;border-radius:13px;background:#101219;
}
.cf-plan-cancel>div{display:grid;gap:3px;min-width:0}
.cf-plan-cancel strong{color:#e8ebf1;font-size:13px}
.cf-plan-cancel small{color:#868ea0;font-size:11px;line-height:1.45}
.cf-plan-cancel.is-done{border-color:rgba(255,168,80,.35);background:rgba(255,150,60,.05)}
.cf-plan-cancel.is-done strong{color:#ffc487}

.cf-account-button{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:36px;padding:0 14px;border:1px solid #343a49;border-radius:9px;
  background:#191d27;color:#dfe3ea;font:600 12px/1 'DM Sans',system-ui,sans-serif;cursor:pointer;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.cf-account-button:hover{background:#20252f;border-color:#454c5d}
.cf-account-button:focus-visible{outline:2px solid #ff304f;outline-offset:2px}
.cf-account-button[disabled]{opacity:.6;cursor:default}
.cf-account-button.is-danger{border-color:rgba(255,72,105,.42);color:#ff8ba1}
.cf-account-button.is-danger:hover{background:rgba(255,48,79,.12);border-color:#ff304f;color:#fff}

.cf-plan-cancel-error{margin:9px 0 0;color:#ff7b96;font-size:11px}

/* --- Rueckhaltefenster vor der Kuendigung --------------------------------
   Eigenes Popup UEBER dem Abo-Dialog (z-index 1900 gegen dessen 1800), mit
   eigenem abgedunkelten Hintergrund. Vorher war die Bestaetigung im Dialog
   eingebettet und ging zwischen den Vertragsangaben unter.

   Die Gewichtung ist Absicht: "Abo behalten" ist der auffaellige Knopf,
   "Trotzdem kuendigen" der zurueckhaltende. Wer wirklich kuendigen will,
   findet ihn - er steht direkt daneben und ist nicht versteckt. */
.cf-retention{position:fixed;inset:0;z-index:1900;display:grid;place-items:center;padding:clamp(12px,2.5vw,36px);background:rgba(1,2,7,.82);backdrop-filter:blur(2px)}
.cf-retention-panel{
  width:min(520px,100%);max-height:calc(100dvh - 48px);overflow:auto;
  border:1px solid #2f3442;border-radius:18px;
  background:linear-gradient(160deg,#171a23 0%,#13151c 60%,#191218 100%);
  box-shadow:0 30px 90px rgba(0,0,0,.6);
}
.cf-retention-panel>header{position:relative;padding:20px 22px 12px}
.cf-retention-panel>header small{display:block;margin-bottom:5px;color:#ff5a76;font:700 10px/1 'DM Sans',system-ui,sans-serif;letter-spacing:.15em}
.cf-retention-panel>header h3{margin:0;padding-right:38px;color:#f5f7fb;font:700 21px/1.25 'Space Grotesk',system-ui,sans-serif}
.cf-retention-panel>header .cf-account-dialog-close{position:absolute;top:16px;right:16px}

.cf-retention-body{padding:4px 22px 16px}
.cf-retention-facts{display:grid;gap:9px;margin:0 0 16px;padding:0;list-style:none}
.cf-retention-facts li{display:flex;gap:9px;color:#a8b0c0;font-size:12px;line-height:1.5}
.cf-retention-facts i{flex:0 0 auto;margin-top:1px;color:#6c7488}
.cf-retention-facts b{color:#e9ecf2}

.cf-retention-question{margin:0 0 8px;color:#e2e6ee;font:600 12px/1 'DM Sans',system-ui,sans-serif}
.cf-retention-reasons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:10px}
.cf-retention-reason{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid #292e3b;border-radius:9px;background:#12141b;color:#c3c9d6;font-size:11px;cursor:pointer;transition:border-color .16s ease,background .16s ease}
.cf-retention-reason:hover{border-color:#3b4254;background:#161922}
.cf-retention-reason:has(input:checked){border-color:#ff304f;background:rgba(255,48,79,.09);color:#fff}
.cf-retention-reason input{accent-color:#ff304f;margin:0}

.cf-retention-note{width:100%;min-height:56px;padding:9px 11px;border:1px solid #292e3b;border-radius:9px;background:#12141b;color:#e6e9f0;font:inherit;font-size:12px;resize:vertical}
.cf-retention-note::placeholder{color:#6d7488}
.cf-retention-offer{display:flex;gap:8px;margin:12px 0 0;padding:10px 12px;border:1px solid rgba(255,196,120,.28);border-radius:10px;background:rgba(255,180,90,.06);color:#e7c79a;font-size:11px;line-height:1.5}
.cf-retention-offer i{flex:0 0 auto;color:#ffc487;font-size:15px}

.cf-retention-panel>footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 22px 20px;border-top:1px solid #232833}
.cf-account-button.is-keep{min-height:40px;padding:0 20px;border:0;background:#ff304f;color:#fff;font-size:13px}
.cf-account-button.is-keep:hover{background:#ff1d40}
.cf-account-button.is-quiet{border-color:transparent;background:transparent;color:#8d95a6}
.cf-account-button.is-quiet:hover{border-color:#3a4152;background:#191d27;color:#dfe3ea}

@media(max-width:480px){
  .cf-retention-reasons{grid-template-columns:1fr}
  .cf-retention-panel>footer{flex-direction:column-reverse;align-items:stretch}
}

/* --- Creator Coach: Startbildschirm --------------------------------------
   Fuer den Coach hatten sich mehrere Ebenen uebereinandergelegt; Ueberschrift,
   Kasten und Knoepfe kamen aus verschiedenen Regeln und passten nicht
   zusammen. Dieser Block setzt den Startbildschirm geschlossen und
   ausdruecklich - inklusive Farben, damit nichts von aussen durchschlaegt.

   Der Aufbau folgt dem, was Kunden von Chat-Oberflaechen kennen: mittige
   Ueberschrift ohne Kasten, darunter EIN Eingabefeld mit Modus-Auswahl links
   und Absenden rechts, darunter die Vorschlaege.

   Die Selektoren tragen .cc-shell:has(.coach-form) und stehen am Dateiende -
   damit gewinnen sie gegen die aelteren Ebenen ohne !important. */

.cc-shell:has(.coach-form){padding-top:8px}
/* Eine gemeinsame Spaltenbreite fuer Ueberschrift, Eingabe und Vorschlaege.
   Ohne sie stehen die drei unterschiedlich breit untereinander - genau der
   Eindruck, dass nichts zusammengehoert. */
.cc-shell:has(.coach-form) .coach-hero,
.cc-shell:has(.coach-form) .coach-form,
.cc-shell:has(.coach-form) .coach-prompts{max-width:820px;margin-left:auto;margin-right:auto}

/* Ueberschrift: kein Kasten, mittig, klare Rangfolge. */
.cc-shell:has(.coach-form) .coach-hero{
  display:block!important;margin:26px auto 22px!important;padding:0!important;
  border:0!important;background:none!important;text-align:center!important;max-width:620px;
}
.cc-shell:has(.coach-form) .coach-hero>span,
.cc-shell:has(.coach-form) .coach-hero small{display:none!important}
.cc-shell:has(.coach-form) .coach-hero h2{
  margin:0!important;color:#f6f8fc!important;
  font:700 30px/1.18 'Space Grotesk',system-ui,sans-serif!important;letter-spacing:-.03em;text-align:center!important;
}
.cc-shell:has(.coach-form) .coach-hero p{
  max-width:520px;margin:11px auto 0!important;color:#8a93a7!important;
  font:400 13px/1.55 'DM Sans',system-ui,sans-serif!important;text-align:center!important;
}

/* Eingabefeld: ein Kasten, nicht mehrere. */
.cc-shell:has(.coach-form) .coach-form{position:relative;margin:0 auto;padding:0;border:0;background:none}
.cc-shell:has(.coach-form) .coach-form>label{display:block;font-size:0}
.cc-shell:has(.coach-form) .coach-form textarea{
  box-sizing:border-box;display:block;width:100%;min-height:146px;
  /* Die untere Polsterung laesst Platz fuer die Fusszeile im Feld; sie steht
     deshalb einzeln und nicht in der Kurzschreibweise versteckt. */
  padding:18px;padding-bottom:62px;border:1px solid #2b3040;border-radius:18px;
  background:#14161f;color:#eef1f6;
  font:400 15px/1.55 'DM Sans',system-ui,sans-serif;resize:vertical;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.cc-shell:has(.coach-form) .coach-form textarea::placeholder{color:#666e80}
.cc-shell:has(.coach-form) .coach-form textarea:focus{
  border-color:rgba(255,48,79,.5);box-shadow:0 0 0 3px rgba(255,48,79,.08);outline:0;
}

/* Fusszeile INNERHALB des Feldes - die untere Polsterung oben laesst dafuer
   Platz, damit der Text nicht unter die Knoepfe laeuft. */
.cc-shell:has(.coach-form) .coach-form footer{
  position:absolute;left:14px;right:14px;bottom:14px;
  display:flex!important;align-items:center;justify-content:space-between;
  gap:10px;margin:0;padding:0;border:0;pointer-events:none;
}
.cc-shell:has(.coach-form) .coach-form footer>small{display:none}
.cc-shell:has(.coach-form) .coach-mode-picker{pointer-events:auto}

/* Absenden. Farbe und Symbolfarbe stehen ausdruecklich hier: der Pfeil hatte
   sonst eine Farbe von aussen geerbt und erschien gruen. */
.cc-shell:has(.coach-form) .coach-send{
  flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;padding:0;
  border:0;border-radius:50%;background:#ff304f;color:#fff!important;cursor:pointer;
  pointer-events:auto;box-shadow:0 6px 18px rgba(255,48,79,.3);
  transition:background .16s ease,transform .16s ease;
}
.cc-shell:has(.coach-form) .coach-send>i{color:inherit!important;font-size:19px;line-height:1}
.cc-shell:has(.coach-form) .coach-send:hover:not([disabled]){background:#ff1d40;transform:translateY(-1px)}
.cc-shell:has(.coach-form) .coach-send:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* Gesperrt, aber sichtbar: sonst waere nicht erkennbar, wo abgeschickt wird. */
.cc-shell:has(.coach-form) .coach-send[disabled]{
  background:#232936;color:#6a7386!important;box-shadow:none;cursor:default;
}

/* Vorschlaege: mittig, gleichmaessig, mit Luft zum Eingabefeld. */
.cc-shell:has(.coach-form) .coach-prompts{
  display:flex!important;flex-wrap:wrap;justify-content:center;gap:8px;margin:16px auto 0;
}
.cc-shell:has(.coach-form) .coach-prompts button{
  display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 13px;
  border:1px solid #2b3040;border-radius:999px;background:#14161f;color:#c6ccd9;
  font:600 11.5px/1 'DM Sans',system-ui,sans-serif;cursor:pointer;
  transition:border-color .16s ease,background .16s ease,color .16s ease;
}
.cc-shell:has(.coach-form) .coach-prompts button:hover{border-color:#3d4557;background:#191c26;color:#fff}
.cc-shell:has(.coach-form) .coach-prompts button>i{color:#ff5871;font-size:14px}

@media(max-width:560px){
  .cc-shell:has(.coach-form) .coach-hero h2{font-size:24px!important}
  .cc-shell:has(.coach-form) .coach-form textarea{min-height:120px}
}

/* --- Creator Coach: Antwort ----------------------------------------------
   Ein Schriftstueck, kein Baukasten (08.09.2026). Vorher trug jede Antwort
   dieselben sechs Bloecke - Versal-Kicker "EMPFEHLUNG", eine Plakettenreihe
   "DATENBASIS", ein bernsteinfarbener Warnkasten, drei gleich grosse
   Plan-Kacheln, nummerierte Beobachtungen "01/02/03" und "DIREKT UMSETZEN" -
   egal, was gefragt war. Der Betreiber nannte das zu Recht "Baukasten".

   Jetzt liest sich die Karte von oben nach unten wie ein kurzes Gutachten:
     1. Kopfzeile: Zustand (Lernphase / belastbar) und Datenbasis in EINER
        ruhigen Zeile, mit Punkten getrennt
     2. die Entscheidung in einem Satz, die Begruendung als Absatz, die Frage
     3. bei duenner Datenlage ein Satz mit feinem Rand - kein farbiger Kasten
     4. die Beobachtungen als Liste mit haengendem Einzug, Zahlen betont
     5. der Plan als Liste - Titel, Test, Einstieg, Messgroesse
     6. der naechste Schritt: ein Knopf fuehrt, die anderen begleiten
   Eine Farbsprache: Rot ist der Akzent des Portals, Bernstein warnt, Gruen
   bestaetigt nur den Zustand "belastbar". Kein Blau, kein Verlauf, keine
   Kaesten in Kaesten. Alle Regeln tragen !important, weil aeltere Schichten
   (.cc-shell section, .cc-action-grid) sonst dazwischenfunken. */

.cc-shell .coach-result{
  position:relative;overflow:hidden;
  margin:22px auto 0!important;padding:0!important;
  border:1px solid #2a2f3d!important;border-radius:16px!important;
  background:#12141b!important;
  box-shadow:0 18px 50px rgba(0,0,0,.35)!important;
}
.cc-shell .coach-result::before{content:none!important}

/* Kopf: dieselbe Flaeche wie der Rest - kein eigener Verlauf, keine Trennlinie. */
.cc-shell .coach-result>header{
  display:block;margin:0;padding:24px 30px 4px;background:none;border:0;
}
.cc-shell .coach-result>header>span{display:none!important}
.cc-shell .coach-result .coach-kopfzeile{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;margin-bottom:14px;
}
.cc-shell .coach-result .coach-phase{
  display:inline-flex;align-items:center;gap:5px;margin:0;padding:0;border:0;background:none!important;
  font:600 11px/1.5 'DM Sans',system-ui,sans-serif!important;letter-spacing:.02em;
}
.cc-shell .coach-result .coach-phase>i{font-size:13px}
.cc-shell .coach-result .coach-phase.is-learning{color:#f3b251!important}
.cc-shell .coach-result .coach-phase.is-reliable{color:#5ecb8e!important}

/* Datenbasis: eine Zeile Text neben dem Zustand, mit Punkten getrennt. */
.cc-shell .coach-evidence{
  display:inline-flex!important;align-items:center;flex-wrap:wrap;gap:0;
  margin:0!important;padding:0!important;border:0!important;
  color:#6f7788!important;font:500 11px/1.5 'DM Sans',system-ui,sans-serif!important;
}
.cc-shell .coach-evidence>span{
  display:inline-flex!important;align-items:center;gap:4px;
  padding:0!important;border:0!important;border-radius:0!important;background:none!important;
  color:#8d95a8!important;font:500 11px/1.5 'DM Sans',system-ui,sans-serif!important;
}
.cc-shell .coach-evidence>span+span::before{content:"·";margin:0 8px;color:#3d4455}
.cc-shell .coach-evidence>span>i{font-size:12px;color:#5c6577;line-height:1}
.cc-shell .coach-evidence>span.ist-ki{color:#ff8497!important}
.cc-shell .coach-evidence>span.ist-ki>i{color:#ff5871}

/* Die Entscheidung: ein Satz, gut lesbar, kein Banner. */
.cc-shell .coach-result h2{
  max-width:56ch;margin:0!important;color:#f2f4f9!important;
  font:600 18px/1.45 'DM Sans',system-ui,sans-serif!important;letter-spacing:-.01em!important;
}
/* Die Begruendung: Absatz unter der Entscheidung, Zahlen hervorgehoben. */
.cc-shell .coach-result .coach-antwort{
  max-width:70ch;margin:12px 0 0!important;color:#aeb5c4!important;
  font:400 13.5px/1.72 'DM Sans',system-ui,sans-serif!important;
}
.cc-shell .coach-result .coach-antwort b{color:#e7eaf1!important;font-weight:600!important;font-variant-numeric:tabular-nums}

/* Die Frage bleibt bei ihrer Antwort - eine Zeile mit Kante, kein Kasten. */
.cc-shell .coach-result .coach-frage{
  display:flex;align-items:flex-start;gap:8px;
  margin:18px 0 0!important;padding:2px 0 2px 12px;
  border-left:2px solid #ff304f;border-radius:0;background:none;
  color:#7f8798!important;font:400 12px/1.5 'DM Sans',system-ui,sans-serif!important;
}
.cc-shell .coach-result .coach-frage>i{color:#5c6577;font-size:14px;line-height:1.3}

/* Alles unterhalb des Kopfes teilt die Innenabstaende. */
.cc-shell .coach-result>*:not(header){margin-left:30px!important;margin-right:30px!important}
.cc-shell .coach-result>*:last-child{margin-bottom:26px!important}

/* Duenne Datenlage: ein Satz mit feinem Rand - kein farbiger Kasten. */
.cc-shell .coach-result .coach-duenn{
  display:flex;align-items:flex-start;gap:9px;
  margin:18px 30px 0!important;padding:10px 12px;
  border:1px solid #2a2f3d;border-radius:10px;background:none;
  color:#b9a67e!important;font:400 12px/1.55 'DM Sans',system-ui,sans-serif!important;
}
.cc-shell .coach-result .coach-duenn>i{color:#f3b251;font-size:15px;line-height:1.3}

/* Zwischenueberschriften: Satzschrift, keine Versalien. */
.cc-shell .coach-result section h3{
  margin:24px 0 8px!important;color:#c9d0dd!important;
  font:600 13px/1.4 'DM Sans',system-ui,sans-serif!important;letter-spacing:0;text-transform:none;
}

/* Beobachtungen: Liste mit haengendem Einzug, die Zahl im Satz hebt sich ab. */
.cc-shell .coach-result section article{
  position:relative;display:block!important;margin:0!important;padding:7px 0 7px 16px!important;border:0!important;
  color:#9ba3b4!important;font:400 13px/1.65 'DM Sans',system-ui,sans-serif!important;
}
.cc-shell .coach-result section article::before{
  content:"";display:block!important;position:absolute;left:2px;top:.78em;width:5px;height:5px;border-radius:50%;background:#ff304f;
}
.cc-shell .coach-result section article i{display:none!important}
.cc-shell .coach-result section article span b{color:#e7eaf1!important;font-weight:600!important;font-variant-numeric:tabular-nums}

/* Der Plan: eine Liste, kein Kasten mit drei Kacheln. */
.cc-shell .cc-coach-plan{
  margin:26px 30px 0!important;padding:0 0 0 14px!important;
  border:0!important;border-left:2px solid #2a2f3d!important;border-radius:0!important;
  background:none!important;box-shadow:none!important;
}
.cc-shell .cc-coach-plan h3{margin:0 0 4px!important;color:#f2f4f9!important;font:600 14px/1.4 'DM Sans',system-ui,sans-serif!important;letter-spacing:-.01em}
.cc-shell .cc-coach-plan>p{margin:0;color:#98a1b3;font:400 12.5px/1.6 'DM Sans',system-ui,sans-serif;max-width:70ch}
.cc-shell .cc-coach-plan-liste{list-style:none;margin:12px 0 0;padding:0;counter-reset:plan}
.cc-shell .cc-coach-plan-liste li{
  position:relative;margin:0;padding:10px 0 10px 26px;border:0;background:none;
  counter-increment:plan;
}
.cc-shell .cc-coach-plan-liste li+li{border-top:1px solid #1e2330}
.cc-shell .cc-coach-plan-liste li::before{
  content:counter(plan);position:absolute;left:0;top:11px;
  color:#ff5871;font:700 11px/1.6 'Space Grotesk',system-ui,sans-serif;font-variant-numeric:tabular-nums;
}
.cc-shell .cc-coach-plan-liste strong{display:block;color:#fff;font:600 13px/1.45 'DM Sans',system-ui,sans-serif}
.cc-shell .cc-coach-plan-liste .cc-coach-plan-test{display:block;margin:3px 0 0;color:#c9d0dd;font:400 12px/1.55 'DM Sans',system-ui,sans-serif}
.cc-shell .cc-coach-plan-liste p,.cc-shell .cc-coach-plan-liste small{display:block;margin:4px 0 0;color:#98a1b3;font:400 12px/1.55 'DM Sans',system-ui,sans-serif}
.cc-shell .cc-coach-plan-liste em{color:#7f8798;font-style:normal;font-weight:600;margin-right:6px}
.cc-shell .cc-coach-plan-liste em::after{content:":"}

/* Naechster Schritt: einer fuehrt, die anderen begleiten. */
.cc-shell .coach-result .coach-aktionen h3{margin-top:26px!important}
.cc-shell .coach-result .cc-action-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px!important}
.cc-shell .coach-result .cc-action-grid .cc-button{
  min-height:38px;padding:0 15px;border:1px solid #303748!important;border-radius:10px!important;
  background:transparent!important;color:#c9d0dd!important;
  font:700 12px/1 'DM Sans',system-ui,sans-serif!important;box-shadow:none!important;
}
.cc-shell .coach-result .cc-action-grid .cc-button:hover{border-color:#454d60!important;background:#181c26!important;color:#fff!important}
.cc-shell .coach-result .cc-action-grid .cc-button:first-child{
  border-color:transparent!important;background:#ff304f!important;color:#fff!important;
  box-shadow:0 8px 22px rgba(255,48,79,.25)!important;
}
.cc-shell .coach-result .cc-action-grid .cc-button:first-child:hover{background:#ff1d40!important}

@media(max-width:560px){
  .cc-shell .coach-result>header{padding:18px 18px 2px}
  .cc-shell .coach-result>*:not(header){margin-left:18px!important;margin-right:18px!important}
  .cc-shell .coach-result .coach-duenn{margin:14px 18px 0!important}
  .cc-shell .cc-coach-plan{margin:20px 18px 0!important}
  .cc-shell .coach-result h2{font-size:16px!important}
}

/* --- Skript-Generator: noch etwas kompakter ------------------------------
   Die erste Seite passte knapp nicht in das Fenster - es blieb ein
   Scrollbalken. Der Platz kommt wieder aus Abstaenden und Feldhoehen, nicht
   aus kleinerer Schrift: die Beschriftungen liegen hier schon bei 9 bis 11
   Pixeln, kleiner waere nicht mehr lesbar.

   Die groessten Reserven waren die Einleitungskarte, der Abschnittskopf mit
   der grossen Nummer und die vier Textfelder. */
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-intro-card,
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-profile-note{margin-bottom:7px;padding:8px 12px}
#workspace-body[data-tool="youtube-video-script-generator"] .workspace-intro-card,
#workspace-body[data-tool="youtube-video-script-generator"] .workspace-profile-note{margin-bottom:7px;padding:8px 12px}
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-group>legend{margin-bottom:6px;padding-bottom:0}
#workspace-body[data-tool="youtube-video-script-generator"] .workspace-group>legend{margin-bottom:6px;padding-bottom:0}
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-group>legend .wizard-step-number{width:26px;height:26px;font-size:10px}
#workspace-body[data-tool="youtube-video-script-generator"] .workspace-group>legend .wizard-step-number{width:26px;height:26px;font-size:10px}
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-group>legend b{font-size:17px}
#workspace-body[data-tool="youtube-video-script-generator"] .workspace-group>legend b{font-size:17px}
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-group>legend small{font-size:10.5px}
#workspace-body[data-tool="youtube-video-script-generator"] .workspace-group>legend small{font-size:10.5px}
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-wizard-progress{margin-bottom:6px}
#workspace-body[data-tool="youtube-video-script-generator"] .workspace-wizard-progress{margin-bottom:6px}
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-group-grid{gap:9px 14px;padding:12px 14px}
#workspace-body[data-tool="youtube-video-script-generator"] .workspace-group-grid{gap:9px 14px;padding:12px 14px}
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-field{gap:4px}
#workspace-body[data-tool="youtube-video-script-generator"] .workspace-field{gap:4px}
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-field textarea{min-height:58px;max-height:170px}
#workspace-body[data-tool="youtube-video-script-generator"] .workspace-field textarea{min-height:58px;max-height:170px}
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-field-wide textarea{min-height:72px}
#workspace-body[data-tool="youtube-video-script-generator"] .workspace-field-wide textarea{min-height:72px}
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-field input,
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-field select{min-height:36px;padding:7px 10px}
#workspace-body[data-tool="youtube-video-script-generator"] .workspace-field input,
#workspace-body[data-tool="youtube-video-script-generator"] .workspace-field select{min-height:36px;padding:7px 10px}
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-optional-fields>summary{padding:8px 11px}
#workspace-body[data-tool="youtube-video-script-generator"] .workspace-optional-fields>summary{padding:8px 11px}
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-actions{min-height:52px;padding-top:8px;padding-bottom:8px}
#workspace-body[data-tool="youtube-video-script-generator"] .workspace-actions{min-height:52px;padding-top:8px;padding-bottom:8px}

/* --- Skript-Generator: Profilzeile weg, Schrift kleiner ------------------
   Auf ausdrueckliche Anweisung: die Schrift darf hier kleiner werden. Damit
   faellt meine frueher gesetzte Regel "nur Abstaende, keine Schriftgroessen"
   fuer dieses eine Formular - festgehalten, damit spaeter niemand raetselt,
   warum hier anders verfahren wurde als nebenan.

   Die Zeile "Verwendetes Creator-Profil" entfaellt: das Profil steht ein Feld
   weiter unten ohnehin drin, und geaendert wird es im Creator-Profil selbst. */
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-profile-note{display:none}
#workspace-body[data-tool="youtube-video-script-generator"] .workspace-profile-note{display:none}
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-intro-card{padding:7px 11px;margin-bottom:6px}
#workspace-body[data-tool="youtube-video-script-generator"] .workspace-intro-card{padding:7px 11px;margin-bottom:6px}
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-intro-card strong{font-size:12px}
#workspace-body[data-tool="youtube-video-script-generator"] .workspace-intro-card strong{font-size:12px}
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-intro-card p,
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-intro-card small{font-size:10px;line-height:1.4}
#workspace-body[data-tool="youtube-video-script-generator"] .workspace-intro-card p,
#workspace-body[data-tool="youtube-video-script-generator"] .workspace-intro-card small{font-size:10px;line-height:1.4}
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-group>legend b{font-size:15px}
#workspace-body[data-tool="youtube-video-script-generator"] .workspace-group>legend b{font-size:15px}
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-group>legend small{font-size:9.5px}
#workspace-body[data-tool="youtube-video-script-generator"] .workspace-group>legend small{font-size:9.5px}
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-group>legend .wizard-step-number{width:22px;height:22px;font-size:9px}
#workspace-body[data-tool="youtube-video-script-generator"] .workspace-group>legend .wizard-step-number{width:22px;height:22px;font-size:9px}
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-field label{font-size:10px}
#workspace-body[data-tool="youtube-video-script-generator"] .workspace-field label{font-size:10px}
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-field small{font-size:8.5px;line-height:1.3}
#workspace-body[data-tool="youtube-video-script-generator"] .workspace-field small{font-size:8.5px;line-height:1.3}
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-field input,
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-field select,
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-field textarea{font-size:11.5px}
#workspace-body[data-tool="youtube-video-script-generator"] .workspace-field input,
#workspace-body[data-tool="youtube-video-script-generator"] .workspace-field select,
#workspace-body[data-tool="youtube-video-script-generator"] .workspace-field textarea{font-size:11.5px}
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-field input,
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-field select{min-height:32px;padding:6px 9px}
#workspace-body[data-tool="youtube-video-script-generator"] .workspace-field input,
#workspace-body[data-tool="youtube-video-script-generator"] .workspace-field select{min-height:32px;padding:6px 9px}
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-field textarea{min-height:50px;padding:7px 9px}
#workspace-body[data-tool="youtube-video-script-generator"] .workspace-field textarea{min-height:50px;padding:7px 9px}
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-field-wide textarea{min-height:62px}
#workspace-body[data-tool="youtube-video-script-generator"] .workspace-field-wide textarea{min-height:62px}
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-group-grid{gap:8px 13px;padding:11px 13px}
#workspace-body[data-tool="youtube-video-script-generator"] .workspace-group-grid{gap:8px 13px;padding:11px 13px}
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-optional-fields>summary b{font-size:10.5px}
#workspace-body[data-tool="youtube-video-script-generator"] .workspace-optional-fields>summary b{font-size:10.5px}
.generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-optional-fields>summary small{font-size:8.5px}
#workspace-body[data-tool="youtube-video-script-generator"] .workspace-optional-fields>summary small{font-size:8.5px}

/* Der erste Skript-Schritt ist auf Tablet eine zusammenhängende Fläche. Die
   Begrenzung muss deshalb am Formular, Schritt und Raster greifen; nur die
   beiden letzten Felder zu begrenzen ließ sie bei langen Eingaben optisch aus
   dem Dialog herauslaufen. */
@media (min-width:701px) and (max-width:1024px) {
  .generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .generic-tool-modal-content,
  .generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-form,
  .generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-group[data-current],
  .generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-group-grid,
  #workspace-body[data-tool="youtube-video-script-generator"] .workspace-form,
  #workspace-body[data-tool="youtube-video-script-generator"] .workspace-group[data-current],
  #workspace-body[data-tool="youtube-video-script-generator"] .workspace-group-grid {
    box-sizing:border-box;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }
  .generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-group[data-current],
  #workspace-body[data-tool="youtube-video-script-generator"] .workspace-group[data-current] {
    overflow:visible!important;
  }
  .generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-group-grid,
  #workspace-body[data-tool="youtube-video-script-generator"] .workspace-group-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-auto-rows:auto!important;
    align-content:start;
  }
  .generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .youtube-script-speaker-plan,
  .generic-tool-modal[data-generic-tool-id="youtube-video-script-generator"] .workspace-optional-fields,
  #workspace-body[data-tool="youtube-video-script-generator"] .youtube-script-speaker-plan,
  #workspace-body[data-tool="youtube-video-script-generator"] .workspace-optional-fields {
    grid-column:1/-1!important;
    box-sizing:border-box;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }
}

/* --- Ideen-Generator: eine Seite, Knopf wie ueberall --------------------
   Drei Schritte fuer fuenf Felder waren zwei Klicks ohne Gewinn; das
   Zusammenlegen passiert in ai-contentfactory.js. Nur der Schrittbalken
   ("Schritt 1 von 1") bleibt verborgen - alles andere (Einleitungskarte,
   Schrittnummer, Abstaende, Feldhoehen) kommt seit dem 09.09.2026 aus der
   gemeinsamen Formular-Vorlage (ai-contentfactory-textwerkzeug.css). Vorher
   hatte dieses Werkzeug eigene Werte und sein Produktionsfenster sah anders
   aus als das der uebrigen Text-Werkzeuge.

   Der Startknopf bekommt dieselbe Behandlung wie bei der Video-Uebersetzung
   und dem Skript-Generator: die Credits als Plakette IM Knopf. Sonst
   bekommt er anderswo eine feste Breite und die Zahl rutscht daneben auf den
   dunklen Grund. Dazu das Aufklapp-Menue baendigen - in
   ai-contentfactory-workspace.css steht es ohne Bedingung auf sichtbar und
   legt sich sonst ueber den Knopf. */
.generic-tool-modal[data-generic-tool-id="creator-content-ideas-generator"] .workspace-run{width:auto;min-width:0;max-width:none;justify-self:end;white-space:nowrap;overflow:visible}
#workspace-body[data-tool="creator-content-ideas-generator"] .workspace-run{width:auto;min-width:0;max-width:none;justify-self:end;white-space:nowrap;overflow:visible}
.generic-tool-modal[data-generic-tool-id="creator-content-ideas-generator"] .workspace-run-credit-popover{display:none}
#workspace-body[data-tool="creator-content-ideas-generator"] .workspace-run-credit-popover{display:none}
.generic-tool-modal[data-generic-tool-id="creator-content-ideas-generator"] .workspace-run-credit:hover .workspace-run-credit-popover,
.generic-tool-modal[data-generic-tool-id="creator-content-ideas-generator"] .workspace-run-credit:focus-within .workspace-run-credit-popover{display:grid;gap:6px}
#workspace-body[data-tool="creator-content-ideas-generator"] .workspace-run-credit:hover .workspace-run-credit-popover,
#workspace-body[data-tool="creator-content-ideas-generator"] .workspace-run-credit:focus-within .workspace-run-credit-popover{display:grid;gap:6px}
.generic-tool-modal[data-generic-tool-id="creator-content-ideas-generator"] .workspace-run-credit{gap:5px;padding:4px 9px;border-radius:999px;background:rgba(12,12,20,.38);font-weight:700}
#workspace-body[data-tool="creator-content-ideas-generator"] .workspace-run-credit{gap:5px;padding:4px 9px;border-radius:999px;background:rgba(12,12,20,.38);font-weight:700}
.generic-tool-modal[data-generic-tool-id="creator-content-ideas-generator"] .workspace-run-credit>i:first-child{color:#ffd166}
#workspace-body[data-tool="creator-content-ideas-generator"] .workspace-run-credit>i:first-child{color:#ffd166}
.generic-tool-modal[data-generic-tool-id="creator-content-ideas-generator"] .workspace-wizard-progress{display:none}
#workspace-body[data-tool="creator-content-ideas-generator"] .workspace-wizard-progress{display:none}
/* Die Hoehe des Themenfokus (168px) steht bei der Textfeld-Regel in
   ai-contentfactory-textwerkzeug.css - als Ausnahme direkt hinter der
   Regel, die sie ausnimmt. Die Spaltenaufteilung steht in form-v2.css. */

/* Beste Veroeffentlichungszeit -------------------------------------------
   Ein Regelsatz fuer die ganze Ansicht. Vorher lagen die Regeln an zwei
   Stellen dieser Datei; zwei Saetze fuer dasselbe Element sind genau die
   Falle, die docs/ai-contentfactory-code-inventar.md beschreibt.

   Gestaltungsentscheidung: Die Ansicht bestand aus lauter gleich schweren
   Kaesten - Kopf, vier Kacheln, Termin, Hinweis, Raster, sechs Eintraege.
   Alles gerahmt heisst: nichts ist wichtig. Jetzt traegt ein einziges
   Element Gewicht (der naechste Termin, mit Akzentstrich), alles andere
   ordnet sich ueber Typografie, Abstand und Haarlinien.

   Alles ist auf .best-time-view begrenzt. .cc-metric und .cc-metrics teilen
   sich sechs Werkzeuge des Control-Centers - ohne diese Begrenzung wuerde
   die Aenderung dort mitwirken. */

/* --- Kopf: kein Kasten, die Seite hat schon eine Ueberschrift ---------- */
.best-time-view .best-time-intro{display:flex;align-items:flex-start;gap:14px;padding:0;border:0;border-radius:0;background:none}
.best-time-view .best-time-intro>span{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border-radius:11px;background:#2a1119;color:#ff4b68;font-size:19px}
.best-time-view .best-time-intro small{color:#ff4f6c;font-size:9px;font-weight:800;letter-spacing:.15em}
.best-time-view .best-time-intro h3{margin:5px 0 5px;font:650 21px/1.2 'Space Grotesk',sans-serif}
.best-time-view .best-time-intro p{max-width:70ch;margin:0;color:#8d92a2;font-size:12px;line-height:1.6}

/* --- Kennzahlen: eine Zeile mit Haarlinien statt vier Kacheln ---------- */
.best-time-view .cc-metrics{display:flex;flex-wrap:wrap;gap:0;margin:20px 0;padding:0;border-top:1px solid #22252f;border-bottom:1px solid #22252f}
.best-time-view .cc-metric{flex:1 1 150px;padding:13px 20px;border:0;border-radius:0;background:none;box-shadow:inset 1px 0 #22252f}
.best-time-view .cc-metric:first-child{box-shadow:none;padding-left:0}
.best-time-view .cc-metric small{margin-bottom:4px;color:#777c8d;font-size:10px}
.best-time-view .cc-metric strong{color:#eef0f5;font:600 19px/1.1 'Space Grotesk',sans-serif}

/* --- Der naechste Termin: das einzige hervorgehobene Element ----------- */
.best-time-next{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin:22px 0;padding:3px 0 3px 17px;border:0;border-left:2px solid #ff4b68;border-radius:0;background:none}
.best-time-next>div{display:grid;gap:2px}
.best-time-next small{color:#ff4f6c;font-size:9px;font-weight:800;letter-spacing:.15em}
.best-time-next strong{color:#f4f6fa;font:650 23px/1.15 'Space Grotesk',sans-serif}
.best-time-next b{color:#aab1c0;font-size:14px;font-weight:600}
.best-time-next p{max-width:34ch;margin:0;color:#7c8294;font-size:11px;line-height:1.5;text-align:right}
.best-time-next.is-test{border-left-color:#f3b251}
.best-time-next.is-test small{color:#f3b251}

/* --- Hinweis: leise Randnotiz, kein Warnkasten ------------------------- */
.best-time-quality{display:flex;align-items:flex-start;gap:10px;margin:18px 0;padding:0;border:0;border-radius:0;background:none}
.best-time-quality>i{flex:none;margin-top:1px;font-size:16px}
.best-time-quality strong,.best-time-quality small{display:block}
.best-time-quality strong{color:#c6ccd9;font-size:12px}
.best-time-quality small{margin-top:2px;color:#7c8294;font-size:11px;line-height:1.55}
.best-time-quality.reliable>i{color:#3edb91}
.best-time-quality.learning>i{color:#f3b251}

/* --- Abschnitte ------------------------------------------------------- */
.best-time-section{margin-top:26px}
.best-time-section>header{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:12px}
.best-time-section h3{margin:6px 0 0;font:650 16px/1.2 'Space Grotesk',sans-serif}
.best-time-coverage{color:#777c8d;font-size:11px;white-space:nowrap}

/* --- Wochenraster: ohne Rahmen, kompakte Zellen ----------------------- */
.best-time-heatmap{display:grid;gap:4px;padding:0;border:0;background:none;width:max-content;max-width:100%;overflow-x:auto}
.best-time-heatmap-head,.best-time-heatmap-row{display:grid;grid-template-columns:26px repeat(7,38px);gap:4px;align-items:center}
.best-time-heatmap-head span{color:#6b7183;font-size:9px;font-weight:700;letter-spacing:.06em;text-align:center;text-transform:uppercase}
.best-time-heatmap-hour{color:#5f6577;font-size:9px;text-align:right}
.best-time-cell{display:grid;place-items:center;height:22px;border-radius:4px;background:#171a22;color:#12140b;font-size:9px;font-weight:800}
/* Unerprobte Fenster bleiben ruhig - in der Lernphase ist ihre Menge die
   Aussage, nicht ihre Auffaelligkeit. */
.best-time-cell.leer{background:#15171e}
.best-time-cell.daten{background:#3b4050;color:#e6e9f0}
.best-time-cell.schwach{background:#4a2733;color:#ffd7de}
.best-time-cell.mittel{background:#5a5f72;color:#f2f4f8}
.best-time-cell.gut{background:#8fa63f;color:#12140b}
.best-time-cell.stark{background:#c8ff32;color:#12140b}
.best-time-legend{display:flex;align-items:center;gap:6px;margin-top:12px;color:#6b7183;font-size:10px}
.best-time-legend .best-time-cell{width:14px;height:11px;margin-left:10px}
.best-time-legend .best-time-cell:first-child{margin-left:0}

/* --- Rangliste: Zeilen mit Haarlinie statt sechs Karten ---------------- */
.best-time-window-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 34px}
/* Die Karte ist EINE Spalte: Kopfzeile, darunter die Videos. Das
   Dreispaltenraster steht in .best-time-window-kopf - hier stand es ein
   zweites Mal, aus der Zeit vor dieser Kopfzeile. Die Karte hat aber nur
   zwei Kinder, also landete die Videoliste in Spalte 2 NEBEN dem Kopf und
   schob ihr Standbild ueber den rechten Rand hinaus. */
.best-time-window{display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;gap:0;padding:12px 0;border:0;border-bottom:1px solid #1e212a;border-radius:0;background:none}
.best-time-window>b{width:auto;min-width:22px;background:none;color:#5f6577;font:700 11px/1 'Space Grotesk',sans-serif}
.best-time-window>div strong,.best-time-window>div small,.best-time-window>span strong,.best-time-window>span small{display:block}
.best-time-window>div strong{color:#e9ecf2;font-size:13px;font-weight:600}
.best-time-window>div small{margin-top:3px;color:#777c8d;font-size:10px}
.best-time-window>span{text-align:right}
.best-time-window>span small{color:#6b7183;font-size:9px}
/* Frueher stand hier immer eine rote Zahl mit der Bezeichnung "INDEX" -
   auch dann, wenn sie auf einem einzigen Video beruhte. */
.best-time-window>span.up strong{color:#c8ff32;font-size:17px}
.best-time-window>span.down strong{color:#ff6b82;font-size:17px}
.best-time-window>span.thin strong{color:#aab1c0;font-size:15px;font-weight:600}
.best-time-window>span.test{padding:4px 8px;border-radius:20px;background:#2a2010;color:#f3b251;font-size:9px;font-weight:800}
.best-time-window.test_window>div strong{color:#aab1c0}

.best-time-disclaimer{display:flex;align-items:flex-start;gap:7px;margin:20px 0 0;color:#6b7183;font-size:11px;line-height:1.5}
.best-time-disclaimer>i{margin-top:1px;font-size:14px}

@media(max-width:900px){
  .best-time-window-grid{grid-template-columns:1fr;gap:0}
}
@media(max-width:760px){
  .best-time-next{flex-direction:column;align-items:flex-start;gap:8px}
  .best-time-next p{max-width:none;text-align:left}
  .best-time-view .cc-metric{flex-basis:50%;padding-left:16px}
  .best-time-view .cc-metric:nth-child(odd){box-shadow:none;padding-left:0}
  .best-time-heatmap-head,.best-time-heatmap-row{grid-template-columns:24px repeat(7,minmax(0,1fr))}
  .best-time-heatmap{width:auto}
}

/* Beste Veroeffentlichungszeit: Grafik, Bilder, mitlaufende Zeit ----------
   Ergaenzt den Regelsatz weiter oben. Die Ansicht war ehrlich, aber leblos -
   nur Zahlen in Zeilen. Jetzt traegt sie drei sichtbare Ebenen: Countdown,
   Wochenverlauf als Balken, und die echten Videos hinter jeder Empfehlung. */

/* --- Termin mit Restzeit --- */
.best-time-next-haupt { display: grid; gap: 2px; }
.best-time-countdown { margin-top: 5px; color: #c8ff32; font: 700 12px/1 'Space Grotesk', sans-serif; letter-spacing: .02em; }
.best-time-next.is-test .best-time-countdown { color: #f3b251; }
.best-time-countdown.offen { color: #3edb91; }
.best-time-jetzt { display: block; margin-top: 6px; color: #5f6577; font-size: 10px; font-variant-numeric: tabular-nums; }

/* --- Wochenverlauf als Balken --- */
.best-time-chart { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; height: 132px; max-width: 460px; padding: 0; }
.best-time-bar { display: grid; grid-template-rows: auto 1fr auto; align-items: end; justify-items: center; gap: 4px; height: 100%; }
.best-time-bar-wert { color: #8d92a2; font: 700 9px/1 'Space Grotesk', sans-serif; }
.best-time-bar-saeule { width: 100%; max-width: 34px; min-height: 3px; border-radius: 5px 5px 2px 2px; background: #2a2e39; align-self: end; }
.best-time-bar small { color: #6b7183; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.best-time-bar.stark .best-time-bar-saeule { background: linear-gradient(180deg, #c8ff32, #8fa63f); }
.best-time-bar.mittel .best-time-bar-saeule { background: #5a5f72; }
.best-time-bar.schwach .best-time-bar-saeule { background: #4a2733; }
/* Ein Tag ohne Daten bekommt keine Saeule - eine Saeule der Hoehe null hiesse
   "gemessen und schlecht". */
.best-time-bar.leer .best-time-bar-saeule { height: 3px; background: #1c1f28; }
.best-time-bar.leer .best-time-bar-wert::after { content: "–"; color: #464c5c; }

/* --- Das empfohlene Fenster im Raster --- */
.best-time-cell.empfohlen { box-shadow: inset 0 0 0 2px #ff4b68; }

/* --- Die Videos hinter einer Empfehlung --- */
.best-time-window-kopf { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 13px; min-width: 0; }
/* Nichts in der Karte darf ueber ihren Rand hinausragen. */
.best-time-window, .best-time-window-kopf > div, .best-time-window-videos { min-width: 0; }
.best-time-window-videos { display: grid; gap: 6px; margin: 10px 0 2px; padding-left: 35px; }
.best-time-video { display: grid; grid-template-columns: 52px minmax(0,1fr); align-items: center; gap: 9px; padding: 4px; border-radius: 8px; color: inherit; text-decoration: none; transition: background .15s; }
.best-time-video:hover { background: #161922; }
.best-time-video-bild { display: block; overflow: hidden; width: 52px; height: 30px; border-radius: 5px; background: #1c1f28; }
.best-time-video-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.best-time-video-ohne-bild { display: grid; place-items: center; width: 100%; height: 100%; color: #4e5563; font-size: 14px; }
.best-time-video-text { min-width: 0; display: grid; gap: 1px; }
.best-time-video-text strong { overflow: hidden; color: #c6ccd9; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.best-time-video-text small { color: #6b7183; font-size: 9.5px; }

@media(max-width:760px){
  .best-time-chart { height: 110px; }
  .best-time-window-videos { padding-left: 0; }
}

/* Zu duenne Datenlage sichtbar machen -----------------------------------
   Ein Wert, der auf einem einzigen Video beruht, darf nicht aussehen wie eine
   Messung. Gestrichelt statt gefuellt, und der Wert bekommt ein Fragezeichen.
   Die Aussage steht damit an der Stelle, an der die Zahl steht - nicht nur im
   Hinweis weiter oben. */
.best-time-bar.unsicher .best-time-bar-saeule { background: repeating-linear-gradient(135deg, #333846 0 4px, transparent 4px 8px); border: 1px dashed #4a5162; }
.best-time-bar.unsicher .best-time-bar-wert { color: #5f6577; }
.best-time-bar.unsicher .best-time-bar-wert i { margin-left: 2px; font-size: 10px; vertical-align: -1px; }

.best-time-cell.unsicher { background: transparent; box-shadow: inset 0 0 0 1px #3b4050; color: #7c8294; }
.best-time-cell.unsicher.empfohlen { box-shadow: inset 0 0 0 1px #3b4050, inset 0 0 0 2px #ff4b68; }
.best-time-legend .best-time-cell.unsicher { background: transparent; }

/* --- Kanalentwicklung ------------------------------------------------------
   Zeitraum und Kennzahl sind umschaltbar. Der Zeitraum laedt neu, die Kennzahl
   blendet nur um: der Verlauf haelt alle drei Serien gleichzeitig im SVG. */
.audience-ranges, .audience-metrics { display: flex; flex-wrap: wrap; gap: 6px; }
.audience-metrics { margin: 18px 0 0; }
.audience-range, .audience-metric { padding: 6px 12px; border: 1px solid #2a2e39; border-radius: 20px; background: transparent; color: #8d92a2; font: 600 11px/1 'DM Sans', sans-serif; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.audience-range:hover, .audience-metric:hover { border-color: #3e4453; color: #c6ccd9; }
.audience-range.aktiv, .audience-metric.aktiv { border-color: #ff4b68; background: #2a1119; color: #ffb3c0; }

.audience-kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin: 16px 0 0; border-top: 1px solid #22252f; border-bottom: 1px solid #22252f; }
.audience-kennzahl { padding: 13px 20px; box-shadow: inset 1px 0 #22252f; }
.audience-kennzahl:first-child { box-shadow: none; padding-left: 0; }
.audience-kennzahl small { display: block; margin-bottom: 4px; color: #777c8d; font-size: 10px; }
.audience-kennzahl strong { display: block; color: #eef0f5; font: 600 19px/1.1 'Space Grotesk', sans-serif; }
.audience-delta { display: block; margin-top: 3px; font-size: 10px; }
.audience-delta.up { color: #8fa63f; }
.audience-delta.down { color: #ff6b82; }
.audience-delta.neutral { color: #5c6274; }

/* Der Satz, der die Zahlen erklaert. Er ist der Anker des Abschnitts und
   deshalb bewusst groesser als eine Fussnote. */
.audience-deutung { display: flex; align-items: flex-start; gap: 10px; max-width: 82ch; margin: 16px 0 0; padding: 13px 15px; border-radius: 9px; font-size: 12.5px; line-height: 1.6; }
.audience-deutung > i { margin-top: 1px; font-size: 16px; }
.audience-deutung.befund { border: 1px solid #2b3320; background: #171c12; color: #c3d49a; }
.audience-deutung.lernphase { border: 1px solid #33302a; background: #1a1814; color: #b3a98f; }

.audience-grafiken { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: start; margin: 16px 0 0; }
.audience-grafiken figcaption { margin: 0 0 10px; color: #8d92a2; font: 700 9px/1 'DM Sans', sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.audience-grafiken figcaption small { margin-left: 6px; color: #5c6274; font-weight: 600; letter-spacing: .04em; text-transform: none; }
.audience-verlauf, .audience-wochentage { margin: 0; padding: 14px 16px 12px; border: 1px solid #252936; border-radius: 8px; background: rgba(255, 255, 255, .012); }

/* --- Kanalentwicklung: Verlauf mit Skala, Zeitachse und Zeiger (08.09.2026) ---
   Vorher: eine auf 100x30 gezerrte Linie ohne Achsen, ohne Werte, ohne Zeiger.
   Das SVG traegt nur Gitter, Flaeche und Linie und darf gezerrt werden. Alles
   mit Text oder runder Form - Skala, Endmarke, Zeiger, Hinweis - ist HTML und
   liegt in Prozent darueber; sonst wuerden Punkte zu Ellipsen und Zahlen zu
   Zerrbildern. Aufbau in audienceVerlaufHtml(). */
.audience-verlauf-buehne { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 172px auto; gap: 8px 10px; }
.audience-verlauf-achse-y { position: relative; min-width: 30px; }
.audience-achse-y { display: none; position: absolute; inset: 0; }
.audience-achse-y span { position: absolute; right: 0; transform: translateY(-50%); color: #5f6577; font: 600 9.5px/1 'Space Grotesk', sans-serif; white-space: nowrap; }
.audience-verlauf-flaeche { position: relative; }
.audience-verlauf svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.audience-verlauf-serie { display: none; }
.audience-verlauf-serie .audience-raster { stroke: #232735; stroke-width: 1; }
.audience-verlauf-serie .audience-nulllinie { stroke: #4a5268; stroke-width: 1; stroke-dasharray: 3 3; }
.audience-verlauf-serie polygon { fill: url(#audience-verlauf-fuellung); }
.audience-verlauf-serie polyline { fill: none; stroke: #7d9bff; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
[data-audience-chart="views"] [data-serie="views"],
[data-audience-chart="minutes"] [data-serie="minutes"],
[data-audience-chart="subscribers"] [data-serie="subscribers"] { display: block; }
.audience-verlauf-punkte { position: absolute; inset: 0; }
.audience-verlauf-punkt { position: absolute; top: 0; bottom: 0; margin: 0; padding: 0; border: 0; background: transparent; transform: translateX(-50%); cursor: crosshair; }
.audience-verlauf-punkt:focus { outline: none; }
.audience-verlauf-marke { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed #4a5268; pointer-events: none; }
.audience-verlauf-marke[hidden], .audience-verlauf-tooltip[hidden] { display: none; }
.audience-verlauf-marke b, .audience-verlauf-ende { position: absolute; left: 0; width: 9px; height: 9px; box-sizing: border-box; border: 2px solid #7d9bff; border-radius: 50%; background: #0f1219; box-shadow: 0 0 0 3px rgba(125, 155, 255, .18); transform: translate(-50%, -50%); pointer-events: none; }
.audience-verlauf-marke b { background: #e4eaff; }
.audience-verlauf-tooltip { position: absolute; z-index: 2; padding: 7px 10px; border: 1px solid #2e3444; border-radius: 6px; background: #12151d; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); white-space: nowrap; pointer-events: none; transform: translate(-50%, calc(-100% - 12px)); }
.audience-verlauf-tooltip.links { transform: translate(-8px, calc(-100% - 12px)); }
.audience-verlauf-tooltip.rechts { transform: translate(calc(-100% + 8px), calc(-100% - 12px)); }
.audience-verlauf-tooltip.unten { transform: translate(-50%, 12px); }
.audience-verlauf-tooltip.unten.links { transform: translate(-8px, 12px); }
.audience-verlauf-tooltip.unten.rechts { transform: translate(calc(-100% + 8px), 12px); }
.audience-verlauf-tooltip small { display: block; color: #7c8294; font-size: 9.5px; }
.audience-verlauf-tooltip strong { display: block; margin-top: 2px; color: #f4f6fb; font: 600 13px/1.2 'Space Grotesk', sans-serif; }
.audience-verlauf-achse { grid-column: 2; position: relative; height: 12px; color: #5c6274; font-size: 9.5px; }
.audience-verlauf-achse span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.audience-verlauf-achse span:first-child { transform: none; }
.audience-verlauf-achse span:last-child { transform: translateX(-100%); }

/* Wochenverteilung: Schnittlinie und Spitzentag. Die Zeilen der Balken sind
   fest (Wert / Saeule / Tag / Anteil), damit die Lage der Schnittlinie als
   Anteil der Saeulenzeile berechenbar ist - siehe audienceSchnittCalc()
   und AUDIENCE_BALKEN_FUSS/-RAND in ai-contentfactory-control-center.js. */
.audience-wochentage .best-time-chart { position: relative; height: 172px; max-width: none; margin-top: 8px; padding: 0; gap: 8px; }
.audience-bar { grid-template-rows: 14px minmax(0, 1fr) 12px 12px; gap: 4px; }
.audience-bar .best-time-bar-saeule { background: linear-gradient(180deg, #7d9bff, #3a5399); }
.audience-bar .best-time-bar-wert { color: #8d92a2; }
.audience-bar.spitze .best-time-bar-saeule { background: linear-gradient(180deg, #ff5872, #c72040); box-shadow: 0 8px 20px rgba(255, 54, 86, .15); }
.audience-bar.spitze .best-time-bar-wert, .audience-bar.spitze > small { color: #ff8ca0; }
.audience-schnitt { border-color: #4a5268; }
.audience-schnitt > b { background: #0f1219; color: #8d92a2; }
/* Ein Wochentag mit zu wenigen Aufrufen bekommt dieselbe Schraffur wie oben:
   sichtbar, aber erkennbar keine Messung. */
.audience-bar.unsicher .best-time-bar-saeule { background: repeating-linear-gradient(135deg, #35405e 0 4px, #232a3d 4px 8px); }
.audience-bar.unsicher .best-time-bar-wert { color: #5f6577; }

.audience-fussnote { display: flex; align-items: flex-start; gap: 7px; max-width: 82ch; margin: 16px 0 0; color: #6b7183; font-size: 10.5px; line-height: 1.55; }
.audience-fussnote > i { margin-top: 1px; font-size: 13px; }

@media (max-width: 900px) {
  .audience-grafiken { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}

#workspace-body.is-loading { opacity: .55; transition: opacity .15s; }

/* Der Ergebnisbereich zeigt sich erst, wenn er etwas zu zeigen hat. */
#workspace-body[data-tool="video-generator"] .video-generator-result:empty{display:none!important;margin:0;padding:0;border:0;background:none}

/* --- Beste Veröffentlichungszeit: Steuerung, Filter, Bewegung -----------
   Anlass, 26.08.2026: Die Ansicht zeigte immer alles in derselben Reihenfolge
   und stand still. Jetzt lässt sie sich einstellen, sie sagt genauere Zahlen,
   und sie baut sich auf, statt einfach dazustehen. */

.best-time-steuerung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0 4px;
  padding-bottom: 14px;
  border-bottom: 1px solid #1c1f28;
}

/* Ein Segmentschalter: die Wahl liegt sichtbar auf einer Schiene, statt sich
   hinter einem Auswahlfeld zu verstecken. */
.bt-segment {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid #22252f;
  border-radius: 11px;
  background: #101219;
}
.bt-seg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: #777c8d;
  font: 600 11.5px/1 'DM Sans', sans-serif;
  white-space: nowrap;
  cursor: pointer;
  transition: color .16s ease, background .16s ease;
}
.bt-seg > i { font-size: 15px; }
.bt-seg:hover { color: #c6ccd9; background: #161922; }
.bt-seg.aktiv { background: #22252f; color: #f4f6fa; box-shadow: inset 0 0 0 1px #343a49; }
.bt-segment.klein .bt-seg { padding: 6px 11px; font-size: 11px; }

.bt-schalter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid #22252f;
  border-radius: 11px;
  background: #101219;
  color: #777c8d;
  font: 600 11.5px/1 'DM Sans', sans-serif;
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.bt-schalter > i { font-size: 15px; }
.bt-schalter:hover { border-color: #3e4453; color: #c6ccd9; }
.bt-schalter.aktiv { border-color: #ff4b68; background: #241119; color: #ffd7de; }

/* Der gesetzte Tag oder Zeitraum steht als Marke da und lässt sich mit einem
   Klick wieder abnehmen - ein Filter, den man nicht sieht, ist eine Falle. */
.best-time-filterzeile { margin: 12px 0 0; }
.bt-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 12px;
  border: 1px solid #343a49;
  border-radius: 20px;
  background: #161922;
  color: #c6ccd9;
  font: 600 11.5px/1 'DM Sans', sans-serif;
}
.bt-chip > i { color: #ff4b68; font-size: 14px; }
.bt-chip button {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: #22252f;
  color: #8d92a2;
  cursor: pointer;
}
.bt-chip button:hover { background: #ff4b68; color: #fff; }

/* Die vier Eckdaten als Zeile mit Sinnbildern statt als vier Kästen. */
.best-time-fakten {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin: 18px 0 2px;
}
.bt-fakt { display: inline-flex; align-items: baseline; gap: 7px; }
.bt-fakt > i {
  align-self: center;
  color: #5f6577;
  font-size: 15px;
  transition: color .16s ease;
}
.bt-fakt > b {
  color: #eef0f5;
  font: 600 17px/1 'Space Grotesk', sans-serif;
  font-variant-numeric: tabular-nums;
}
.bt-fakt > small { color: #777c8d; font-size: 11px; }
.bt-fakt.gut > i { color: #3edb91; }
.bt-fakt.gut > b { color: #c8ff32; }

/* "Noch 5" sagt weniger als "5 von 10". Schiene und Fuellung liegen in einem
   eigenen Element, die Zahl steht daneben - vorher lief die Schiene als
   ::before unter der Zahl durch und strich sie durch. */
.best-time-lernbalken {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 260px;
  margin-top: 9px;
}
.best-time-lernbalken-spur {
  position: relative;
  flex: 1 1 auto;
  height: 4px;
  overflow: hidden;
  border-radius: 3px;
  background: #22252f;
}
.best-time-lernbalken-spur > span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #f3b251, #c8ff32);
}
.best-time-lernbalken > b {
  flex: none;
  color: #8d92a2;
  font: 700 10px/1 'Space Grotesk', sans-serif;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.best-time-lead { margin: 5px 0 0; max-width: 60ch; color: #6b7183; font-size: 11px; }

/* --- Termin in den Kalender -------------------------------------------- */
.best-time-ics {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  justify-self: start;
  margin-top: 11px;
  padding: 8px 14px;
  border: 1px solid #343a49;
  border-radius: 10px;
  background: #161922;
  color: #c6ccd9;
  font: 600 11.5px/1 'DM Sans', sans-serif;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.best-time-ics > i { font-size: 15px; }
.best-time-ics:hover { border-color: #c8ff32; background: #1b2010; color: #c8ff32; }

/* --- Wochenverlauf: Kanalschnitt als Linie, Zahl je Balken -------------- */
.best-time-chart { position: relative; }
/* Ohne diese Linie sagt "187" nichts - sie ist der Bezug, gegen den gemessen
   wird. */
.best-time-schnitt {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px dashed #3e4453;
  pointer-events: none;
}
.best-time-schnitt > b {
  position: absolute;
  top: -7px;
  right: 0;
  padding: 0 5px;
  background: #0b0d13;
  color: #5f6577;
  font: 700 9px/1 'Space Grotesk', sans-serif;
}
button.best-time-bar {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  text-align: center;
}
.best-time-bar > em {
  color: #4f5566;
  font: 500 9px/1.2 'DM Sans', sans-serif;
  font-style: normal;
}
.best-time-bar-saeule {
  height: var(--bt-hoehe, 100%);
  transform-origin: bottom;
  animation: bt-saeule .52s cubic-bezier(.22,.7,.3,1) backwards;
  animation-delay: var(--bt-verzug, 0ms);
}
@keyframes bt-saeule { from { transform: scaleY(0); } to { transform: scaleY(1); } }
button.best-time-bar:hover .best-time-bar-saeule { filter: brightness(1.25); }
button.best-time-bar:hover .best-time-bar-wert { color: #f4f6fa; }
.best-time-bar.gewaehlt .best-time-bar-saeule { box-shadow: 0 0 0 2px #ff4b68; }
.best-time-bar.gewaehlt > small { color: #ff8ba0; }

/* --- Wochenraster: anklickbar, mit Abdeckungsbalken --------------------- */
button.best-time-cell { border: 0; padding: 0; font: inherit; cursor: pointer; }
.best-time-cell {
  animation: bt-zelle .3s ease backwards;
  animation-delay: var(--bt-verzug, 0ms);
  transition: transform .12s ease, box-shadow .12s ease;
}
@keyframes bt-zelle { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: scale(1); } }
button.best-time-cell:hover { transform: scale(1.14); box-shadow: 0 4px 12px rgba(0,0,0,.5); }
.best-time-cell.gewaehlt { box-shadow: inset 0 0 0 2px #6b8dff; }
.best-time-legend .best-time-cell { animation: none; }
.best-time-fortschritt {
  display: inline-block;
  width: 60px;
  height: 4px;
  margin: 0 7px;
  border-radius: 3px;
  background: #22252f;
  vertical-align: middle;
}
.best-time-fortschritt > span {
  display: block;
  height: 4px;
  border-radius: 3px;
  background: linear-gradient(90deg, #6b8dff, #c8ff32);
}
.best-time-coverage > b { color: #eef0f5; font-weight: 700; }
.best-time-coverage > i { margin-right: 5px; color: #3e4453; vertical-align: middle; }

/* --- Der Plan baut sich auf ------------------------------------------- */
.best-time-window {
  animation: bt-auf .4s cubic-bezier(.22,.7,.3,1) backwards;
  animation-delay: var(--bt-verzug, 0ms);
}
@keyframes bt-auf { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .best-time-bar-saeule, .best-time-cell, .best-time-window { animation: none; }
  button.best-time-cell:hover { transform: none; }
}

/* Mobile Vorrangregeln müssen am Ende stehen: Desktop-Collapse-Regeln weiter
   oben dürfen ein gespeichertes Icon-only-Profil nicht auf dem Handy vererben. */
@media (max-width:700px) {
  body.factory-sidebar-collapsed .factory-sidebar {
    width:min(86vw,300px)!important;
    padding:24px 14px 18px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }
  body.factory-sidebar-collapsed .factory-sidebar .factory-brand {
    width:auto!important;height:auto!important;justify-content:flex-start!important;padding:0 6px!important;
  }
  body.factory-sidebar-collapsed .factory-sidebar .factory-brand-wordmark,
  body.factory-sidebar-collapsed .factory-sidebar .factory-nav span,
  body.factory-sidebar-collapsed .factory-sidebar .factory-sidebar-tools-head,
  body.factory-sidebar-collapsed .factory-sidebar .factory-sidebar-tool-group h3,
  body.factory-sidebar-collapsed .factory-sidebar .factory-sidebar-control-group h3,
  body.factory-sidebar-collapsed .factory-sidebar .factory-sidebar-control span,
  body.factory-sidebar-collapsed .factory-sidebar .factory-sidebar-tool span {
    display:block!important;visibility:visible!important;
  }
  body.factory-sidebar-collapsed .factory-sidebar .factory-nav a,
  body.factory-sidebar-collapsed .factory-sidebar .factory-sidebar-control,
  body.factory-sidebar-collapsed .factory-sidebar .factory-sidebar-tool {
    width:100%!important;min-height:40px!important;margin:0!important;padding:8px 10px!important;justify-content:flex-start!important;
  }
}

@media (max-width: 900px) {
  .best-time-steuerung { align-items: stretch; }
  .bt-segment { overflow-x: auto; }
  .bt-seg > span { display: none; }
  .bt-segment.klein .bt-seg > span { display: inline; }
}

/* =======================================================================
   Best Time – kundenorientierte Analytics-Ansicht

   Diese abschließende Ebene vereinheitlicht die historische Best-Time-
   Gestaltung. Die Seite folgt jetzt einer klaren Reihenfolge: Empfehlung,
   Datenreife, Analyse und Plan. Flächen werden nur noch eingesetzt, wenn sie
   Inhalte wirklich gruppieren; die übrigen Bereiche trennt eine Haarlinie.
   ======================================================================= */

body.factory-page-active #workspace-body[data-tool="best-time"] .cc-shell {
  width: min(1240px, calc(100% - 64px));
  max-width: none;
  margin: 0 auto;
}

/* Kein Knopf im Kopf - weder Schliessen-X noch Zurueck-Pfeil (beides ist
   dasselbe Element, nur das Symbol wechselt je Modus). Die Seite ist eine
   Werkzeugseite mit Seitenleiste, kein Dialog: verlassen wird sie ueber die
   Navigation. */
#factory-workspace .workspace-panel:has(#workspace-body[data-tool="best-time"]) .workspace-close { display: none !important; }

.best-time-view {
  --bt-accent: #ff3656;
  --bt-accent-soft: rgba(255, 54, 86, .12);
  --bt-blue: #6f8cff;
  --bt-green: #52d69a;
  --bt-warning: #f2b84b;
  --bt-surface: #101219;
  --bt-surface-raised: #141720;
  --bt-border: #252936;
  --bt-border-soft: #1c202a;
  --bt-copy: #f4f6fb;
  --bt-muted: #8a92a5;
  --bt-dim: #60687a;
  color: var(--bt-copy);
}

/* Seitenauftakt: kein zweiter Hero, sondern eine kompakte Einordnung. */
.best-time-view .best-time-intro {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 2px 0 20px;
  border: 0;
  border-bottom: 1px solid var(--bt-border);
  border-radius: 0;
  background: transparent;
}
.best-time-view .best-time-intro > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(255, 54, 86, .28);
  border-radius: 50%;
  background: var(--bt-accent-soft);
  color: var(--bt-accent);
  font-size: 18px;
}
.best-time-view .best-time-intro small,
.best-time-view .best-time-readiness > header small,
.best-time-view .best-time-next small,
.best-time-view .cc-pill {
  color: var(--bt-accent);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .16em;
}
.best-time-view .best-time-intro h3 {
  margin: 4px 0 2px;
  color: var(--bt-copy);
  font-size: 19px;
}
.best-time-view .best-time-intro p {
  max-width: 78ch;
  margin: 0;
  color: var(--bt-muted);
  font-size: 11px;
  line-height: 1.55;
}

/* Navigation wie in einer Analytics-Oberfläche: ruhig, flach, eindeutig. */
.best-time-view .best-time-steuerung {
  align-items: center;
  margin: 26px 0 20px;
  padding: 0;
  border-bottom: 1px solid var(--bt-border);
}
.best-time-view .bt-segment {
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.best-time-view .bt-seg {
  position: relative;
  min-height: 43px;
  padding: 0 14px;
  border-radius: 0;
  color: var(--bt-muted);
}
.best-time-view .bt-seg:hover {
  background: rgba(255, 255, 255, .025);
  color: var(--bt-copy);
}
.best-time-view .bt-seg.aktiv {
  background: transparent;
  color: var(--bt-copy);
  box-shadow: none;
}
.best-time-view .bt-seg.aktiv::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: -1px;
  left: 10px;
  height: 2px;
  background: var(--bt-accent);
}
.best-time-view .bt-segment.klein .bt-seg {
  min-height: 30px;
  padding: 0 10px;
}
.best-time-view .bt-schalter {
  border-color: var(--bt-border);
  border-radius: 6px;
  background: transparent;
  color: var(--bt-muted);
}
.best-time-view .bt-schalter:hover,
.best-time-view .bt-schalter.aktiv {
  border-color: rgba(255, 54, 86, .48);
  background: var(--bt-accent-soft);
  color: #ffd9df;
}

/* Empfehlung und Datenreife bilden gemeinsam den operativen Überblick.
   Sie stehen direkt unter dem Auftakt; die Steuerleiste folgt erst danach,
   weil ihre Reiter nur die Auswertungen darunter schalten. */
.best-time-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
  gap: 20px;
  align-items: stretch;
  margin-top: 22px;
}
.best-time-view .best-time-next {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, .55fr);
  align-items: center;
  gap: 28px;
  overflow: hidden;
  margin: 0;
  padding: 24px 26px 23px;
  border: 1px solid #35212a;
  border-radius: 12px;
  background:
    linear-gradient(110deg, rgba(255, 54, 86, .13), transparent 46%),
    var(--bt-surface);
}
.best-time-view .best-time-next::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--bt-accent);
}
.best-time-view .best-time-next::after { display: none; }
.best-time-view .best-time-next-haupt { gap: 4px; }
.best-time-view .best-time-next strong {
  margin-top: 3px;
  color: var(--bt-copy);
  font-size: clamp(23px, 2.3vw, 32px);
  line-height: 1.12;
}
.best-time-view .best-time-next b {
  color: #bbc2d1;
  font-size: 14px;
  font-weight: 600;
}
.best-time-view .best-time-countdown {
  width: max-content;
  margin-top: 10px;
  padding: 5px 9px;
  border: 1px solid rgba(82, 214, 154, .24);
  border-radius: 4px;
  background: rgba(82, 214, 154, .08);
  color: var(--bt-green);
}
.best-time-view .best-time-countdown::before {
  width: 5px;
  height: 5px;
  background: currentColor;
}
.best-time-view .best-time-next.is-test .best-time-countdown {
  border-color: rgba(242, 184, 75, .26);
  background: rgba(242, 184, 75, .08);
  color: var(--bt-warning);
}
.best-time-view .best-time-next > p {
  max-width: 32ch;
  margin: 0;
  color: var(--bt-muted);
  font-size: 11px;
  line-height: 1.6;
  text-align: left;
}
.best-time-view .best-time-jetzt {
  margin-top: 8px;
  color: var(--bt-dim);
}
/* Die zwei Wege in die Tat: der Publisher ist der Hauptweg (gefuellt), der
   Kalender-Export der zweite (Umriss). */
.best-time-view .best-time-next-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  margin-top: 14px;
}
.best-time-view .best-time-plan-jetzt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border: 1px solid var(--bt-accent);
  border-radius: 6px;
  background: var(--bt-accent);
  color: #fff;
  font: 700 11.5px/1 'DM Sans', sans-serif;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.best-time-view .best-time-plan-jetzt > i { font-size: 15px; }
.best-time-view .best-time-plan-jetzt:hover {
  border-color: #ff5872;
  background: #ff5872;
  transform: translateY(-1px);
}
.best-time-view .best-time-ics {
  margin-top: 0;
  border-color: #3a4050;
  border-radius: 6px;
  background: transparent;
  color: #c6ccd9;
}
.best-time-view .best-time-ics:hover {
  border-color: rgba(255, 54, 86, .55);
  background: var(--bt-accent-soft);
  color: #ffd9df;
}

/* Die Datenreife ist eine Karte wie ihre Nachbarn - vorher hing sie als
   einziger Bereich nur zwischen zwei Linien. */
.best-time-readiness {
  display: grid;
  grid-template-rows: auto auto 1fr;
  min-width: 0;
  padding: 20px 22px;
  border: 1px solid var(--bt-border-soft);
  border-radius: 12px;
  background: var(--bt-surface);
}
.best-time-readiness > header {
  display: grid;
  gap: 5px;
}
.best-time-readiness > header strong {
  color: var(--bt-copy);
  font: 650 16px/1.25 var(--bt-anzeige);
}
.best-time-view .best-time-fakten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 15px 0 0;
  border-top: 1px solid var(--bt-border-soft);
}
.best-time-view .bt-fakt {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 8px;
  min-width: 0;
  padding: 11px 8px 10px 0;
  border-bottom: 1px solid var(--bt-border-soft);
}
.best-time-view .bt-fakt:nth-child(even) {
  padding-left: 13px;
  border-left: 1px solid var(--bt-border-soft);
}
.best-time-view .bt-fakt > i {
  grid-row: 1 / 3;
  align-self: center;
  color: var(--bt-dim);
}
.best-time-view .bt-fakt > b {
  overflow: hidden;
  color: var(--bt-copy);
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.best-time-view .bt-fakt > small {
  overflow: hidden;
  color: var(--bt-dim);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.best-time-view .bt-fakt.gut > b,
.best-time-view .bt-fakt.gut > i { color: var(--bt-green); }
.best-time-readiness .best-time-quality {
  align-self: end;
  margin: 14px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.best-time-readiness .best-time-quality > i { font-size: 15px; }
.best-time-readiness .best-time-quality strong { font-size: 11px; }
.best-time-readiness .best-time-quality small { font-size: 10px; }
.best-time-view .best-time-lernbalken {
  max-width: none;
  margin-top: 8px;
}
.best-time-view .best-time-lernbalken-spur > span {
  background: linear-gradient(90deg, var(--bt-warning), var(--bt-accent));
}

/* Analyse: jede Auswertung ist eine ruhige Karte im selben Raster - eine
   gemeinsame Formensprache statt loser, unterschiedlich breiter Blöcke. */
.best-time-analysis-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}
.best-time-analysis-grid > .best-time-section {
  min-width: 0;
  margin: 0;
  padding: 20px 22px 24px;
  border: 1px solid var(--bt-border-soft);
  border-radius: 12px;
  background: var(--bt-surface);
}
.best-time-analysis-grid > .best-time-section[data-best-time-part="kanal"] {
  grid-column: 1 / -1;
}
/* Der Wochenverlauf bekommt die breite Spalte: seine Balken wachsen mit.
   Uhr und Gitter sind fest ~330px breit - in der breiten Spalte stand die
   Zeitkarte in einem grossen leeren Feld. */
.best-time-analysis-grid > .best-time-section[data-best-time-part="woche"] {
  grid-column: span 7;
}
.best-time-analysis-grid > .best-time-section[data-best-time-part="raster"] {
  grid-column: span 5;
}
/* In der schmalen Spalte duerfen Umschalter und Abdeckung umbrechen. */
.best-time-analysis-grid > .best-time-section[data-best-time-part="raster"] > header { flex-wrap: wrap; }
.best-time-analysis-grid > .best-time-section[data-best-time-part="plan"] {
  grid-column: 1 / -1;
}

/* Erkenntnisse: anklickbare Karten, die Filter und Sprungziel in einem sind.
   Sie nutzen dieselben data-Attribute wie Balken und Rasterzellen und
   bekommen darum auch die Markierung "gewaehlt" geschenkt. */
.best-time-view .best-time-einblicke {
  margin-top: 20px;
  padding: 20px 22px;
  border: 1px solid var(--bt-border-soft);
  border-radius: 12px;
  background: var(--bt-surface);
}
.best-time-view .bt-einblick-leiste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.best-time-view .bt-einblick {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 11px;
  padding: 12px 13px;
  border: 1px solid var(--bt-border);
  border-radius: 11px;
  background: var(--bt-surface-raised);
  color: var(--bt-copy);
  font: inherit;
  text-align: left;
  cursor: pointer;
  animation: bt-auf .4s cubic-bezier(.22, .7, .3, 1) backwards;
  animation-delay: var(--bt-verzug, 0ms);
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.best-time-view .bt-einblick:hover {
  border-color: rgba(255, 54, 86, .5);
  background: #181420;
  transform: translateY(-2px);
}
.best-time-view .bt-einblick.gewaehlt { border-color: var(--bt-accent); }
.best-time-view .bt-einblick > i:first-child {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--bt-accent-soft);
  color: var(--bt-accent);
  font-size: 17px;
}
.best-time-view .bt-einblick > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.best-time-view .bt-einblick b {
  overflow: hidden;
  color: var(--bt-copy);
  font: 700 14px/1.15 'Space Grotesk', sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.best-time-view .bt-einblick strong { color: var(--bt-muted); font-size: 10px; font-weight: 600; }
.best-time-view .bt-einblick small {
  overflow: hidden;
  color: var(--bt-dim);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.best-time-view .bt-einblick-pfeil { color: var(--bt-dim); transition: color .16s ease, transform .16s ease; }
.best-time-view .bt-einblick:hover .bt-einblick-pfeil { color: var(--bt-accent); transform: translateX(2px); }
.best-time-view .best-time-section > header {
  align-items: flex-start;
  margin-bottom: 18px;
  padding: 0;
  border: 0;
}
.best-time-view .best-time-section h3 {
  margin-top: 5px;
  color: var(--bt-copy);
  font-size: 17px;
}
.best-time-view .best-time-lead,
.best-time-view .best-time-coverage {
  color: var(--bt-dim);
}

/* Kanalkennzahlen: große Zahlen mit Linien, ohne einzelne Karten. */
.best-time-view .audience-kennzahlen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  border: 1px solid var(--bt-border);
  border-radius: 6px;
  background: rgba(255, 255, 255, .012);
}
.best-time-view .audience-kennzahl,
.best-time-view .audience-kennzahl:first-child {
  padding: 15px 18px;
  border: 0;
  border-left: 1px solid var(--bt-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.best-time-view .audience-kennzahl:first-child { border-left: 0; }
.best-time-view .audience-kennzahl strong { font-size: 22px; }
.best-time-view .audience-deutung {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  margin-top: 12px;
  padding: 11px 13px;
  border-radius: 5px;
}
.best-time-view .audience-deutung.lernphase {
  border-color: rgba(242, 184, 75, .2);
  background: rgba(242, 184, 75, .06);
}
.best-time-view .audience-deutung.befund {
  border-color: rgba(82, 214, 154, .2);
  background: rgba(82, 214, 154, .06);
}
.best-time-view .audience-metric {
  border-radius: 4px;
}

/* Diagramme teilen sich dieselbe ruhige Farbwelt. */
.best-time-view .best-time-chart {
  width: 100%;
  max-width: none;
  height: 190px;
  gap: 9px;
  padding-top: 12px;
}
.best-time-view .best-time-schnitt { border-color: #394052; }
.best-time-view .audience-wochentage .best-time-chart { height: 172px; padding-top: 0; gap: 8px; }
.best-time-view .audience-schnitt { border-color: #4a5268; }
.best-time-view .audience-schnitt > b { background: #0f1219; }
.best-time-view .best-time-schnitt > b { background: #090b10; }
.best-time-view .best-time-bar-saeule { max-width: 38px; }
.best-time-view .best-time-bar.stark .best-time-bar-saeule {
  background: linear-gradient(180deg, #ff5872, #c72040);
  box-shadow: 0 8px 20px rgba(255, 54, 86, .15);
}
.best-time-view .best-time-bar.mittel .best-time-bar-saeule {
  background: linear-gradient(180deg, #8499ec, #4c5f9f);
}
.best-time-view .best-time-bar.schwach .best-time-bar-saeule {
  background: linear-gradient(180deg, #555d70, #343947);
}
.best-time-view .best-time-bar.stark > small { color: #ff8ca0; }
.best-time-view .best-time-bar.unsicher .best-time-bar-saeule {
  border-color: #596174;
  background: repeating-linear-gradient(135deg, #343a49 0 4px, transparent 4px 8px);
}

.best-time-view .bt-rasterwahl {
  border: 1px solid var(--bt-border);
  border-radius: 5px;
}
.best-time-view .bt-rasterwahl .bt-seg {
  min-height: 29px;
  border-radius: 4px;
}
.best-time-view .bt-rasterwahl .bt-seg.aktiv {
  background: #202430;
}
.best-time-view .bt-rasterwahl .bt-seg.aktiv::after { display: none; }
/* --- Wochenuhr und Gitter teilen sich eine Bühne ------------------------
   Der Umschalter setzt data-raster-ansicht auf der Bühne; sichtbar ist nur
   die gewählte Darstellung. Ohne diese Regeln standen Uhr UND Gitter
   untereinander und der Umschalter wirkte kaputt. */
.bt-raster-buehne[data-raster-ansicht="uhr"] .best-time-heatmap { display: none; }
.bt-raster-buehne[data-raster-ansicht="gitter"] .bt-uhr { display: none; }
/* Beide Darstellungen sitzen mittig - vorher war die Uhr zentriert und das
   Gitter klebte links, als gehoerten sie nicht zusammen. */
.bt-raster-buehne .best-time-heatmap { margin: 0 auto; }
.best-time-view .best-time-legend { justify-content: center; }

.bt-uhr {
  position: relative;
  width: min(340px, 100%);
  margin: 6px auto 0;
}
.bt-uhr svg { display: block; width: 100%; height: auto; }
.bt-uhr-bahn {
  stroke: #0a0c11;
  stroke-width: 1;
  animation: bt-bahn .45s ease backwards;
  animation-delay: var(--bt-verzug, 0ms);
}
@keyframes bt-bahn { from { opacity: 0; } to { opacity: 1; } }
.bt-uhr-bahn[data-best-time-slot] { cursor: pointer; }
.bt-uhr-bahn[data-best-time-slot]:hover { filter: brightness(1.4); }
.bt-uhr-bahn.gewaehlt { stroke: #6b8dff; stroke-width: 2; }
.bt-uhr-marke { fill: none; stroke-width: 2; pointer-events: none; }
.bt-uhr-achse { stroke: rgba(255, 255, 255, .13); stroke-dasharray: 3 4; }
.bt-uhr-tag { fill: #767e92; font: 700 8px 'DM Sans', sans-serif; letter-spacing: .05em; text-anchor: middle; }
.bt-uhr-stunde { fill: #4f5566; font: 700 9px 'Space Grotesk', sans-serif; text-anchor: middle; }
/* Die Mitte der Uhr gehört der Empfehlung - das Loch ist genau dafür da. */
.bt-uhr-mitte {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  gap: 1px;
  justify-items: center;
  margin: 0;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}
.bt-uhr-mitte small { color: #ff4f6c; font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.bt-uhr-mitte strong { color: #f4f6fb; font: 650 13px/1.15 'Space Grotesk', sans-serif; }
.bt-uhr-mitte b { font: 700 12px/1 'Space Grotesk', sans-serif; }

.best-time-view .bt-uhr {
  max-width: 330px;
  margin-top: 0;
}
.best-time-view .bt-uhr-grund {
  fill: #0a0c11;
  stroke: var(--bt-border-soft);
}
.best-time-view .bt-uhr-bahn.leer { fill: #151821; }
.best-time-view .bt-uhr-bahn.daten,
.best-time-view .bt-uhr-bahn.mittel { fill: #6375b3; }
.best-time-view .bt-uhr-bahn.schwach { fill: #3d4454; }
.best-time-view .bt-uhr-bahn.gut { fill: #d23a55; }
.best-time-view .bt-uhr-bahn.stark { fill: var(--bt-accent); }
.best-time-view .bt-uhr-bahn.unsicher {
  fill: #171a23;
  stroke: #4d5567;
}
.best-time-view .bt-uhr-marke { stroke: #fff; }
.best-time-view .bt-uhr-mitte b { color: #ff8ca0; }

.best-time-view .best-time-cell {
  border-radius: 3px;
  background: #171a22;
}
.best-time-view .best-time-cell.schwach { background: #343947; color: #d2d6df; }
.best-time-view .best-time-cell.mittel { background: #536496; color: #fff; }
.best-time-view .best-time-cell.gut { background: #b42e49; color: #fff; }
.best-time-view .best-time-cell.stark { background: var(--bt-accent); color: #fff; }
.best-time-view .best-time-cell.empfohlen { box-shadow: inset 0 0 0 2px #fff; }
.best-time-view .best-time-cell.unsicher.empfohlen {
  box-shadow: inset 0 0 0 1px #566073, inset 0 0 0 2px #fff;
}
.best-time-view .best-time-fortschritt > span {
  background: linear-gradient(90deg, var(--bt-blue), var(--bt-accent));
}

/* Plan als Kartenraster: volle Breitenzeilen ließen zwischen Titel links
   und Wert rechts ein großes leeres Feld. Karten nebeneinander nutzen die
   Breite, und die Planen-Knöpfe stehen bündig am Kartenboden. */
.best-time-view .best-time-window-grid {
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 14px;
}
.best-time-view .best-time-window {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 15px 16px 13px;
  border: 1px solid var(--bt-border-soft);
  border-radius: 12px;
  background: var(--bt-surface-raised);
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.best-time-view .best-time-window:hover {
  border-color: var(--bt-border);
  background: #171a24;
  transform: translateY(-2px);
}
/* Testfenster sehen nach Experiment aus, nicht nach Messung. */
.best-time-view .best-time-window.test_window { border-style: dashed; }
.best-time-view .best-time-window-kopf {
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-width: 0;
}
/* Der Rang als Siegel; Platz eins traegt es gefuellt. */
.best-time-view .best-time-window-kopf > b {
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border: 1px solid var(--bt-border);
  border-radius: 9px;
  background: var(--bt-surface-raised);
  color: var(--bt-accent);
  font: 700 11px/1 'Space Grotesk', sans-serif;
}
.best-time-view .best-time-window:first-child .best-time-window-kopf > b {
  border-color: var(--bt-accent);
  background: var(--bt-accent);
  color: #fff;
  box-shadow: 0 4px 14px rgba(255, 54, 86, .35);
}
/* Jedes Fenster fuehrt in die Tat: der naechste Termin laesst sich direkt
   im Publisher planen. margin-top:auto drueckt die Zeile an den
   Kartenboden, damit die Knoepfe aller Karten auf einer Linie stehen. */
.best-time-view .best-time-window-aktion {
  margin-top: auto;
  padding-top: 12px;
}
.best-time-view .best-time-window-aktion button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border: 1px solid var(--bt-border);
  border-radius: 7px;
  background: transparent;
  color: var(--bt-muted);
  font: 700 10px/1 'DM Sans', sans-serif;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.best-time-view .best-time-window-aktion button > i { color: var(--bt-accent); font-size: 13px; }
.best-time-view .best-time-window-aktion button:hover {
  border-color: rgba(255, 54, 86, .55);
  background: var(--bt-accent-soft);
  color: #ffd9df;
}

/* Bewegung, sparsam: der Countdown-Punkt pulsiert und die Empfehlungskarte
   atmet - ein Zeichen, dass hier live gerechnet wird. Nutzer mit
   reduzierter Bewegung sind ueber den Sammelblock am Ende ausgenommen. */
.best-time-view .best-time-countdown::before { animation: bt-puls 2.2s ease-in-out infinite; }
@keyframes bt-puls {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .4; transform: scale(1.55); }
}
.best-time-view .best-time-next { animation: bt-atmen 6s ease-in-out infinite; }
@keyframes bt-atmen {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 54, 86, 0); }
  50% { box-shadow: 0 0 36px rgba(255, 54, 86, .15); }
}
.best-time-view .best-time-window-kopf > div { min-width: 0; }
.best-time-view .best-time-window-kopf > div strong { color: var(--bt-copy); }
.best-time-view .best-time-window > span.up strong { color: var(--bt-green); }
.best-time-view .best-time-window > span.down strong { color: #ff7188; }
/* Eine Tendenz darf nicht so laut sein wie eine Messung: unterhalb hoher
   Sicherheit wird die Prozentzahl kleiner und leiser gesetzt. */
.best-time-view .best-time-window > span.gedaempft strong { font-size: 12.5px; opacity: .72; }

/* Die Erfolgskontrolle im Plan: gruen wenn die Fenster tragen, amber wenn
   nicht, neutral solange sie nicht messbar ist. */
.best-time-view .best-time-erfolg {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--bt-border);
  border-radius: 10px;
  background: var(--bt-surface-raised);
}
.best-time-view .best-time-erfolg > i { margin-top: 1px; font-size: 16px; color: var(--bt-dim); }
.best-time-view .best-time-erfolg strong { display: block; color: var(--bt-copy); font-size: 12px; }
.best-time-view .best-time-erfolg small { display: block; margin-top: 3px; max-width: 92ch; color: var(--bt-muted); font-size: 10px; line-height: 1.5; }
.best-time-view .best-time-erfolg.gut { border-color: rgba(82, 214, 154, .3); background: rgba(82, 214, 154, .06); }
.best-time-view .best-time-erfolg.gut > i { color: var(--bt-green); }
.best-time-view .best-time-erfolg.schlecht { border-color: rgba(242, 184, 75, .3); background: rgba(242, 184, 75, .06); }
.best-time-view .best-time-erfolg.schlecht > i { color: var(--bt-warning); }
.best-time-view .best-time-window-videos {
  min-width: 0;
  margin-top: 9px;
  padding-left: 37px;
}
.best-time-view .best-time-video {
  grid-template-columns: 52px minmax(0, 1fr);
  min-width: 0;
  max-width: 420px;
  border-radius: 4px;
}
.best-time-view .best-time-video-bild {
  width: 52px;
  border-radius: 3px;
}
.best-time-view .best-time-video-text { min-width: 0; }
.best-time-view .best-time-video:hover { background: rgba(255, 255, 255, .035); }
.best-time-view .best-time-section .cc-button {
  border-color: var(--bt-border);
  border-radius: 5px;
  background: transparent;
  color: #c6ccda;
}
.best-time-view .best-time-section .cc-button:hover {
  border-color: #42495b;
  background: #171a22;
}

.best-time-view .best-time-disclaimer {
  margin: 0;
  padding: 14px 0 0;
  border: 0;
  border-top: 1px solid var(--bt-border-soft);
  border-radius: 0;
  background: transparent;
  color: var(--bt-dim);
}

@media (max-width: 1100px) {
  body.factory-page-active #workspace-body[data-tool="best-time"] .cc-shell {
    width: min(100% - 40px, 980px);
  }
  .best-time-overview { grid-template-columns: minmax(0, 1fr); }
  .best-time-readiness { border: 1px solid var(--bt-border); }
  .best-time-analysis-grid > .best-time-section[data-best-time-part="woche"],
  .best-time-analysis-grid > .best-time-section[data-best-time-part="raster"] {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  body.factory-page-active #workspace-body[data-tool="best-time"] .cc-shell {
    width: calc(100% - 28px);
  }
  .best-time-view .best-time-intro {
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 16px;
  }
  .best-time-view .best-time-intro > span { display: none; }
  .best-time-view .best-time-steuerung {
    display: grid;
    gap: 8px;
    padding: 5px 0 10px;
  }
  .best-time-view .best-time-steuerung > .bt-segment { width: max-content; }
  .best-time-view .bt-schalter { width: max-content; }
  .best-time-view .bt-seg > span { display: inline; }
  .best-time-view .best-time-next {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 20px 19px;
  }
  .best-time-view .best-time-next > p { max-width: none; }
  .best-time-readiness { padding: 18px; }
  .best-time-analysis-grid { margin-top: 24px; }
  .best-time-view .best-time-section > header {
    display: grid;
    gap: 10px;
  }
  .best-time-view .audience-kennzahlen {
    grid-template-columns: minmax(0, 1fr);
  }
  .best-time-view .audience-kennzahl,
  .best-time-view .audience-kennzahl:first-child {
    border-left: 0;
    border-top: 1px solid var(--bt-border);
  }
  .best-time-view .audience-kennzahl:first-child { border-top: 0; }
  .best-time-view .best-time-chart { height: 155px; }
  .best-time-view .best-time-window-videos { padding-left: 0; }
  .best-time-view .best-time-legend {
    flex-wrap: wrap;
    line-height: 1.5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .best-time-view *,
  .best-time-view *::before,
  .best-time-view *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* === Mobile Nachbesserungen, 28.08.2026 ==================================
   Nur additive @media-Bloecke am Dateiende; keine Regel oberhalb wurde
   angefasst. Jede Regel schliesst eine konkrete Luecke der schmalen
   Ansichten (Tablet/Telefon), die von den bestehenden Bloecken nicht
   abgedeckt war. */

@media (max-width: 720px) {
  /* Fussleiste der Transkription: die festen Spalten (130px / 170px) sind
     zusammen breiter als ein schmales Telefon. Gleiches Verhalten wie im
     Werkzeugfenster (ai-contentfactory-modal-v3.css): zwei flexible
     Spalten, der Hinweis in der Mitte entfaellt. */
  .transcription-production-body .workspace-actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .transcription-production-body .workspace-actions .workspace-note { display: none; }

  /* Dieselbe Luecke bei der Video-Uebersetzung (Werkzeugseite und
     Produktionsfenster): 130px 1fr auto laeuft ueber den Rand. */
  #workspace-body[data-tool="media-dubbing-shared"] .workspace-actions,
  .dubbing-production-body .workspace-actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  #workspace-body[data-tool="media-dubbing-shared"] .workspace-actions .workspace-note,
  .dubbing-production-body .workspace-actions .workspace-note { display: none; }
}

@media (max-width: 760px) {
  /* Beste Zeit: die zwei Fensterspalten (1fr 1fr, 34px Abstand) quetschen
     die Empfehlungen unter 760px - untereinander bleiben sie lesbar. */
  .best-time-window-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  /* Modelloptionen des Videogenerators standen auch auf Telefonen
     zweispaltig; Dateifelder wurden dabei abgeschnitten. */
  .video-generator-model-options { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  /* Sehr schmale Telefone: die verbliebenen Zweierraster des
     Videogenerators fallen auf eine Spalte zurueck. */
  .video-generator-grid { grid-template-columns: 1fr; }
  .cc-video-generator-shell .video-history-config { grid-template-columns: 1fr; }
}

/* =======================================================================
   Mobiles Off-Canvas-Menue: vollstaendige Beschriftung im Normalzustand.

   Die Tablet-Regeln (max-width:1050px) verstecken saemtliche Sidebar-Texte
   fuer die 82px-Icon-Leiste. Der weiter oben stehende 700px-Block stellt
   die Texte aber nur fuer body.factory-sidebar-collapsed wieder her - im
   Normalzustand oeffnete sich der 300px-Drawer deshalb fast leer, nur mit
   Icons. Dieser Block gilt fuer BEIDE Zustaende und muss als letzte
   Sidebar-Regel der Datei stehen.
   ======================================================================= */
@media (max-width:700px) {
  .factory-sidebar .factory-brand { width:auto!important;height:auto!important;justify-content:flex-start!important;padding:0 6px!important;overflow:visible!important; }
  .factory-sidebar .factory-brand-wordmark { display:block!important;width:156px!important;height:auto!important;visibility:visible!important; }
  .factory-sidebar .factory-brand > span:last-child,
  .factory-sidebar .factory-nav span,
  .factory-sidebar .factory-sidebar-tools-head,
  .factory-sidebar .factory-sidebar-tool-group h3,
  .factory-sidebar .factory-sidebar-control-group h3,
  .factory-sidebar .factory-sidebar-control span,
  .factory-sidebar .factory-sidebar-tool span { display:block!important;visibility:visible!important; }
  .factory-sidebar .factory-sidebar-tools-head { display:flex!important; }
  .factory-sidebar .factory-sidebar-tool em { display:inline-block!important; }
  .factory-sidebar .engine-badge div { display:grid!important; }
  .factory-sidebar .back-link { display:block!important; }
  .factory-sidebar .factory-nav { margin-top:28px!important; }
  .factory-sidebar .factory-nav a { width:100%!important;min-height:40px!important;margin:0!important;padding:10px 12px!important;justify-content:flex-start!important;border-radius:9px!important; }
  .factory-sidebar .factory-sidebar-control,
  .factory-sidebar .factory-sidebar-tool { width:100%!important;min-height:40px!important;margin:0!important;padding:8px 10px!important;justify-content:flex-start!important;border-radius:8px!important; }
  .factory-sidebar .factory-nav a i,
  .factory-sidebar .factory-sidebar-control i,
  .factory-sidebar .factory-sidebar-tool i { width:19px!important;margin:0!important;font-size:17px!important; }
  .factory-sidebar .engine-badge { justify-content:flex-start!important; }
  .factory-sidebar .factory-sidebar-tool-list { padding:0 3px 10px!important; }

  /* Ein am Desktop gespeicherter Collapse-Zustand darf den Inhalt auf dem
     Handy nicht neben die (verborgene) Sidebar schieben. */
  body.factory-sidebar-collapsed .factory-main { margin-left:0!important; }
  body.factory-sidebar-collapsed.factory-page-active .factory-workspace.open { left:0!important; }
}

/* === Mobile Nachbesserungen aus der visuellen Pruefung, 28.08.2026 =======
   Befunde aus echten Browser-Screenshots (375px/768px), nur Mobil-Regeln. */
@media (max-width:700px) {
  /* Der Desktop-Einklapp-Knopf stand als runder Pfeil im mobilen Drawer.
     Die display:none-Regel weiter oben (Z.2317) verliert gegen die spaetere
     ungescopte Neudefinition des Knopfs - deshalb hier als letzte Regel. */
  .factory-sidebar-toggle { display:none!important; }
}
@media (max-width:560px) {
  /* Keyword-Recherche: die zweispaltige Briefing-Reihe (2x144px auf 375px)
     quetschte Textarea und Auswahl nebeneinander - untereinander ist beides
     bedienbar. Spezifitaet und !important muessen die 2199er-Regeln schlagen. */
  .generic-tool-modal-content #workspace-body[data-tool="youtube-keyword-research"] .keyword-research-mode-form,
  .generic-tool-modal[data-generic-tool-id="youtube-keyword-research"] .keyword-research-mode-form { grid-template-columns:1fr!important; }
}

/* === Sprachschalter auf Telefonen, 28.08.2026 ============================
   In der 375px-Kopfzeile verdeckte der DE/EN-Schalter die Marke. Unter
   700px verschwindet er aus der Kopfzeile und steht stattdessen unten im
   aufklappbaren Menue; die Umschalt-Logik haengt am document und gilt fuer
   jede [data-ui-language]-Instanz. */
.factory-sidebar-language { display:none; }
@media (max-width:700px) {
  .factory-topbar .factory-top-actions .factory-language-switch { display:none!important; }
  .factory-sidebar-language { display:block!important; flex:none; margin-top:10px; padding-top:12px; border-top:1px solid #1d212b; }
  .factory-sidebar-language .factory-language-switch { display:inline-flex; }
}

/* === Mobile Nachbesserungen, 28.08.2026 (Aufgabenliste) ==================
   1) "Neue Produktion"-Kopfknopf kompakter, 2) Coach-Vorschlaege ohne
   Scrollen, 4) Shorts-Produktionsfenster mit kleinerer, dichterer Schrift.
   Alles nur fuer schmale Viewports; Desktop unveraendert. */
@media (max-width:700px) {
  /* 1) Der Kopfknopf war mit 72px Hoehe und 54px-Icon fuer Telefone zu wuchtig. */
  body.factory-page-active #factory-workspace .video-rebuild-header-action{grid-template-columns:34px auto 20px!important;gap:9px!important;min-width:0!important;height:auto!important;padding:8px 12px!important}
  body.factory-page-active #factory-workspace .video-rebuild-header-action .video-rebuild-header-action-icon{width:34px!important;height:34px!important;border-radius:10px!important}
  body.factory-page-active #factory-workspace .video-rebuild-header-action .video-rebuild-header-action-icon svg{width:20px!important;height:20px!important}
  body.factory-page-active #factory-workspace .video-rebuild-header-action .video-rebuild-header-action-copy{gap:2px!important}
  body.factory-page-active #factory-workspace .video-rebuild-header-action .video-rebuild-header-action-copy strong{font-size:12px!important}
  body.factory-page-active #factory-workspace .video-rebuild-header-action .video-rebuild-header-action-copy small{font-size:8.5px!important}
  body.factory-page-active #factory-workspace .video-rebuild-header-action .video-rebuild-header-action-arrow{width:20px!important;height:20px!important;font-size:12px!important;border-radius:7px!important}

  /* 2) Coach-Startansicht: Kopf, Eingabe und Vorschlagsknoepfe so dicht,
     dass alles ohne Scrollen auf ein Telefon passt. */
  .cc-shell:has(.coach-form) .coach-hero{margin:12px auto 8px!important}
  .cc-shell:has(.coach-form) .coach-hero h2{font-size:19px!important}
  .cc-shell:has(.coach-form) .coach-hero p{font-size:11px!important;line-height:1.4!important}
  /* Die Schnellfragen bleiben kleine Chips in mehreren Reihen. Ihre Breite
     folgt dem Inhalt, damit kein Text abgeschnitten wird. */
  .cc-shell:has(.coach-form) .coach-form textarea{min-height:150px!important;height:150px!important;font-size:13px!important;line-height:1.45!important}
  html body .coach-prompts,
  html body .cc-shell:has(.coach-form) .coach-prompts{display:flex!important;flex-wrap:wrap!important;gap:6px!important;overflow:visible!important;margin:10px auto!important;padding:0!important;justify-content:center!important}
  html body .coach-prompts button,
  html body .cc-shell:has(.coach-form) .coach-prompts button{width:auto!important;max-width:100%!important;min-height:29px!important;flex:0 0 auto!important;justify-content:flex-start!important;padding:5px 8px!important;font-size:9px!important;gap:5px!important;overflow:visible!important}
  html body .coach-prompts button i{font-size:12px!important;flex:none!important}
  html body .coach-prompts button span{overflow:visible!important;text-overflow:clip!important;white-space:nowrap!important}
}
@media (max-width:560px) {
  /* 4) Shorts-Produktionsfenster: kleinere Schrift, engere Abstaende. */
  .shorts-production-dialog{border-radius:16px}
  .shorts-production-dialog>header{padding:11px 13px;gap:12px}
  .shorts-production-dialog>header small{font-size:8.5px}
  .shorts-production-dialog>header h2{font-size:16px}
  .shorts-production-close{width:32px;height:32px;border-radius:9px}
  .shorts-production-body{padding:12px 12px 16px}
  /* Die Fusszeile laeuft ueber die volle Breite: ihre negativen Raender
     heben den Innenabstand des Fensters auf. Der ist hier 12 statt 18 px -
     mit den festen -18 px ragte sie je 6 px hinaus, und das Fenster liess
     sich auf dem Handy nach rechts schieben (08.09.2026). Wer den
     Innenabstand oben aendert, aendert diese Zahl mit. */
  .shorts-production-body .workspace-actions{margin-inline:-12px;padding-inline:12px}
  .shorts-production-body .shorts-intro{margin-bottom:9px;padding:9px 11px}
  .shorts-production-body .shorts-intro strong{font-size:12.5px}
  .shorts-production-body .shorts-intro p,.shorts-production-body .shorts-intro span{font-size:10.5px;line-height:1.45}
  .shorts-production-body legend,.shorts-production-body .workspace-group legend{margin-bottom:6px;gap:8px;padding:0 0 6px}
  .shorts-production-body legend b,.shorts-production-body .workspace-group legend b{font-size:13.5px}
  .shorts-production-body legend small,.shorts-production-body .workspace-group legend small{font-size:9.5px}
  .shorts-production-body .workspace-group legend .wizard-step-number{width:22px;height:22px;font-size:10px}
  .shorts-production-body fieldset{margin-bottom:10px}
  .shorts-production-body .cc-card{margin-bottom:9px;padding:10px 11px}
  .shorts-production-body label{font-size:11px}
  .shorts-production-body label>span{font-size:11px}
  .shorts-production-body label>small,.shorts-production-body .shorts-range-hint{font-size:9px;line-height:1.35}
  .shorts-production-body .video-file-picker{padding:12px}
  .shorts-production-body .video-file-picker strong{font-size:12px}
  .shorts-production-body .video-file-picker small{font-size:9.5px}
  .shorts-production-body select,.shorts-production-body input[type="number"],.shorts-production-body input[type="text"]{min-height:38px;font-size:13px}
}

/* === Video-Chat-Composer auf Telefonen, 28.08.2026 =======================
   Das Konfigurations-Popover klappte unterhalb des Composers auf und ragte
   mehrere hundert Pixel unter den Viewport - die Einstellungen waren nicht
   bedienbar. Als fixiertes Bottom-Sheet mit eigenem Scrollbereich ist es
   immer erreichbar. Die html-Praefixe schlagen die !important-Regeln der
   spaeter geladenen polish.css ueber die Spezifitaet. */
@media (max-width:700px) {
  /* Die Parameter liegen auf dem Telefon direkt über dem Startknopf. Kleinere
     Chips halten die Auswahl kompakt, der Abstand zur Aktion bleibt klar. */
  html body.factory-page-active #workspace-body[data-tool="video-generator"] .is-chat-composer .video-chat-actions{gap:8px!important;padding:0 10px 4px!important}
  html body.factory-page-active #workspace-body[data-tool="video-generator"] .is-chat-composer .video-param-chips{gap:4px!important;margin-bottom:6px!important}
  html body.factory-page-active #workspace-body[data-tool="video-generator"] .is-chat-composer .video-param-chip{min-height:28px!important;padding:3px 7px!important;gap:4px!important;font-size:8.5px!important}
  html body.factory-page-active #workspace-body[data-tool="video-generator"] .is-chat-composer .video-param-chip i{font-size:11px!important}
  html body.factory-page-active #workspace-body[data-tool="video-generator"] .is-chat-composer .video-param-chip span{max-width:104px!important}
  html body.factory-page-active #workspace-body[data-tool="video-generator"] .is-chat-composer .video-config-gear{width:30px!important;max-width:30px!important;min-height:30px!important}
  body.factory-page-active #workspace-body[data-tool="video-generator"] .is-chat-composer .video-config-popover{
    position:fixed!important;left:10px!important;right:10px!important;top:auto!important;bottom:10px!important;
    width:auto!important;max-width:none!important;max-height:min(62dvh,440px)!important;overflow-y:auto!important;
    z-index:80!important;box-shadow:0 -18px 50px rgba(0,0,0,.6)!important;
  }
  html body.factory-page-active #workspace-body[data-tool="video-generator"] .workspace-intro-card h3{font-size:17px!important}
  html body.factory-page-active #workspace-body[data-tool="video-generator"] .workspace-intro-card p{font-size:11px!important;line-height:1.45!important}
  html body.factory-page-active #workspace-body[data-tool="video-generator"] .video-generator-form.is-chat-composer,
  html body.factory-page-active #workspace-body[data-tool="video-generator"] .video-generator-form.is-chat-composer.is-config-open{min-height:210px!important}
  html body.factory-page-active #workspace-body[data-tool="video-generator"] .is-chat-composer .video-generator-prompt textarea,
  html body.factory-page-active #workspace-body[data-tool="video-generator"] .is-chat-composer:has(.video-chat-frame-dock:not([hidden])) .video-generator-prompt textarea{height:208px!important;min-height:208px!important;max-height:208px!important}
  /* Einige Modelle liefern mehr Formate bzw. Auflösungen. Die Auswahl darf
     den Bottom-Sheet nie verbreitern: sie bricht kompakt in weitere Zeilen. */
  html body.factory-page-active #workspace-body[data-tool="video-generator"] .is-chat-composer .video-config-popover,
  html body.factory-page-active #workspace-body[data-tool="video-generator"] .is-chat-composer .video-config-popover *{box-sizing:border-box}
  html body.factory-page-active #workspace-body[data-tool="video-generator"] .is-chat-composer .video-config-popover{overflow-x:hidden!important}
  html body.factory-page-active #workspace-body[data-tool="video-generator"] .is-chat-composer .video-option-switch{flex-wrap:wrap;overflow:hidden}
  html body.factory-page-active #workspace-body[data-tool="video-generator"] .is-chat-composer .video-option-switch button{flex:1 1 calc(33.333% - 4px);white-space:normal;line-height:1.15}
  html body.factory-page-active #workspace-body[data-tool="video-generator"] .is-chat-composer .video-duration-slider{min-width:0}
}

/* === Mobile Nachbesserungen, 28.08.2026 (zweite Runde) ===================
   1) Die Kennzahlen-Kacheln der Startseite (Naechste Veroeffentlichung,
      Videos live, Produktionen, AI Credits) standen durch polish.css als
      riesige Einzelspalte (525px hoch). Als kompaktes 2x2-Raster mit
      kleinerer Schrift belegen sie ein Drittel davon. html-Praefix schlaegt
      die spaeter geladene polish.css ueber die Spezifitaet.
   2) Der Hinweistext neben dem Weiter-Knopf brach in der Wizard-Fusszeile
      unter die Knoepfe; auf Telefonen entfaellt er (wie bereits bei
      Transkription und Uebersetzung).
   3) Das generische Produktionsfenster (u. a. Content-Ideen) war fuer
      Telefone zu gross gesetzt - kleinere Schrift und engere Abstaende. */
@media (max-width:700px) {
  html body .factory-overview{grid-template-columns:repeat(2,1fr);margin-bottom:36px}
  html body .factory-overview article{padding:12px 14px;gap:2px;border:0}
  html body .factory-overview article:last-child{border:0}
  html body .factory-overview span{font-size:10px}
  html body .factory-overview strong{font-size:20px}
  html body .factory-overview small{font-size:9px}

  html body .workspace-actions .workspace-note{display:none}
}
@media (max-width:560px) {
  .generic-tool-modal-content h2{font-size:16px}
  .generic-tool-modal-content .workspace-group legend{gap:8px;padding-bottom:6px}
  .generic-tool-modal-content .workspace-group legend b{font-size:13.5px}
  .generic-tool-modal-content .workspace-group legend small{font-size:9.5px}
  .generic-tool-modal-content .workspace-group .wizard-step-number{width:22px;height:22px;font-size:10px}
  .generic-tool-modal-content .workspace-group-grid{padding:12px;gap:10px}
  .generic-tool-modal-content .workspace-field label{font-size:11px}
  .generic-tool-modal-content .workspace-field small{font-size:9px;line-height:1.35}
  .generic-tool-modal-content .workspace-field textarea,
  .generic-tool-modal-content .workspace-field input,
  .generic-tool-modal-content .workspace-field select{font-size:13px}
  .generic-tool-modal-content .workspace-group-grid button{font-size:11px;min-height:34px}
  .generic-tool-modal-content .workspace-intro-card{padding:10px 12px;gap:10px}
  .generic-tool-modal-content .workspace-intro-card strong{font-size:12.5px}
  .generic-tool-modal-content .workspace-intro-card p,
  .generic-tool-modal-content .workspace-intro-card span{font-size:10.5px;line-height:1.45}
}

/* === Best-Time auf Telefonen, 28.08.2026 (dritte Runde) ==================
   1) "Wie laeuft dein Kanal": die drei Kennzahlen standen oben im
      Mobil-Block bewusst einspaltig uebereinander und wirkten riesig -
      als kompakte Dreierreihe nebeneinander (html-Praefix schlaegt die
      fruehere Regel ueber die Spezifitaet).
   2) "Deine naechsten Veroeffentlichungsfenster": das Karten-Raster
      erzwingt 330px Mindestbreite, der Inhalt wurde rechts abgeschnitten
      - auf schmalen Viewports eine flexible Spalte. */
@media (max-width:700px) {
  html body .best-time-view .audience-kennzahlen{grid-template-columns:repeat(3,minmax(0,1fr))}
  html body .best-time-view .audience-kennzahl,
  html body .best-time-view .audience-kennzahl:first-child{border-top:0;border-left:1px solid var(--bt-border);padding:10px 8px}
  html body .best-time-view .audience-kennzahl:first-child{border-left:0}
  html body .best-time-view .audience-kennzahl b,
  html body .best-time-view .audience-kennzahl strong{font-size:17px}
  html body .best-time-view .audience-kennzahl span,
  html body .best-time-view .audience-kennzahl small{font-size:8.5px;overflow-wrap:anywhere}

  html body .best-time-view .best-time-window-grid{grid-template-columns:minmax(0,1fr);gap:10px}
  html body .best-time-view .best-time-window{min-width:0;padding:12px 12px 11px}
  html body .best-time-view .best-time-analysis-grid{grid-template-columns:minmax(0,1fr)}
  html body .best-time-view .best-time-analysis-grid>*{min-width:0}
  html body .best-time-view .best-time-einblicke,
  html body .best-time-view .best-time-analysis-grid>.best-time-section{
    margin:0!important;
    padding:18px 0!important;
    border:0!important;
    border-top:1px solid var(--bt-border-soft)!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  html body .best-time-view .best-time-analysis-grid{gap:0!important;margin-top:0!important;}
}

/* === Creator-Profil auf Telefonen, 28.08.2026 ============================
   Der Kopfbereich (Einrichtungshinweis, YouTube-Kontoauswahl, Konto &
   Sicherheit) war deutlich groesser gesetzt als der Rest des Profils.
   Kompakte Karten, kleinere Schrift, schlankere Knoepfe - inklusive des
   roten Speichern-Knopfs. */
@media (max-width:700px) {
  html body .profile-hero{padding:10px 12px;gap:10px}
  html body .profile-hero strong{font-size:13px}
  html body .profile-hero p{margin:3px 0 0;font-size:10.5px;line-height:1.4}
  html body .profile-hero .profile-hero-icon{width:34px;height:34px;font-size:17px;flex:none}

  html body .creator-youtube-card{padding:12px;gap:10px}
  html body .creator-youtube-card img,
  html body .creator-youtube-card .youtube-channel-avatar{width:34px;height:34px}
  html body .creator-youtube-card small{font-size:8.5px}
  html body .creator-youtube-card strong{font-size:13px}
  html body .creator-youtube-card .youtube-channel-copy{font-size:10.5px;line-height:1.4}
  html body .creator-youtube-card .youtube-channel-copy p{margin:3px 0 0;font-size:10.5px;line-height:1.4}
  html body .creator-youtube-card button{min-height:32px!important;padding:6px 10px!important;font-size:10.5px!important}

  html body .profile-security{padding:12px;gap:8px}
  html body .profile-security h3,
  html body .profile-security strong{font-size:13px}
  html body .profile-security p{margin:2px 0 0;font-size:10.5px}
  html body .profile-security>button{min-height:36px!important;padding:7px 12px!important;font-size:11.5px!important}

  /* Roter Speichern-Knopf: von 46px Hoehe auf schlanke 38px. Der
     Abbrechen-Knopf daneben bekommt dieselbe Hoehe - er blieb sonst bei
     seinen 46px aus ai-contentfactory-modal-v3.css und stand als hoeherer
     Kasten neben dem flachen Speichern-Knopf (Handy-Befund 07.09.2026). */
  html body .profile-actions .workspace-run,
  html body .profile-actions .wizard-secondary{min-height:38px!important;height:38px!important;padding:0 14px!important;font-size:12px!important}
}

/* =======================================================================
   Einheitliche Mobil-Typografie fuer alle Produktionsfenster, 28.08.2026

   Jedes Werkzeugfenster brachte bisher eigene Groessen mit: die
   Transkription setzte die Schrittueberschrift auf 18px, die
   Uebersetzung auf 16px, das Videoskript dagegen auf 10px kleine
   Feldbeschriftungen. Auf einem Telefon wirkte dasselbe Formular je nach
   Werkzeug mal riesig, mal winzig.

   Die Werte unten sind der gemeinsame Massstab (abgeleitet aus den schon
   abgenommenen Shorts- und Content-Ideen-Fenstern). Wer die Mobilgroessen
   kuenftig aendern will, aendert sie hier - einmal fuer alle Werkzeuge.

   Der Block steht bewusst am Dateiende: er muss die aelteren
   werkzeugeigenen Regeln weiter oben in der Kaskade schlagen.
   ======================================================================= */
@media (max-width: 700px) {
  .shorts-production-body,
  .transcription-production-body,
  .dubbing-production-body,
  .thumbnail-production-body,
  .video-production-dialog,
  .generic-tool-modal-content {
    --cf-mobil-titel: 16px;          /* Fenstertitel */
    --cf-mobil-schritt: 13.5px;      /* "01 Video auswaehlen" */
    --cf-mobil-schritt-hilfe: 9.5px; /* Zeile unter der Schrittueberschrift */
    --cf-mobil-label: 11.5px;        /* Feldbeschriftung */
    --cf-mobil-hilfe: 9.5px;         /* Hilfetext unter einem Feld */
    --cf-mobil-eingabe: 13px;        /* Text in Auswahl- und Eingabefeldern */
    --cf-mobil-intro-titel: 12.5px;  /* Einleitungskarte */
    --cf-mobil-intro-text: 10.5px;
    --cf-mobil-eingabe-hoehe: 38px;
  }

  .shorts-production-dialog > header h2,
  .transcription-production-dialog > header h2,
  .dubbing-production-dialog > header h2,
  .thumbnail-production-dialog > header h2,
  .generic-tool-modal-content h2 { font-size: var(--cf-mobil-titel, 16px); }

  .shorts-production-dialog > header small,
  .transcription-production-dialog > header small,
  .dubbing-production-dialog > header small,
  .thumbnail-production-dialog > header small { font-size: 8.5px; }

  .shorts-production-body .workspace-group legend b,
  .transcription-production-body .workspace-group legend b,
  .dubbing-production-body .workspace-group legend b,
  .thumbnail-production-body .workspace-group legend b,
  .video-production-dialog .workspace-group legend b,
  .generic-tool-modal-content .workspace-group legend b { font-size: var(--cf-mobil-schritt, 13.5px); }

  .shorts-production-body .workspace-group legend small,
  .transcription-production-body .workspace-group legend small,
  .dubbing-production-body .workspace-group legend small,
  .thumbnail-production-body .workspace-group legend small,
  .video-production-dialog .workspace-group legend small,
  .generic-tool-modal-content .workspace-group legend small { font-size: var(--cf-mobil-schritt-hilfe, 9.5px); }

  .shorts-production-body .workspace-group legend,
  .transcription-production-body .workspace-group legend,
  .dubbing-production-body .workspace-group legend,
  .thumbnail-production-body .workspace-group legend,
  .generic-tool-modal-content .workspace-group legend { gap: 8px; padding-bottom: 6px; }

  .shorts-production-body .workspace-group legend .wizard-step-number,
  .transcription-production-body .workspace-group legend .wizard-step-number,
  .dubbing-production-body .workspace-group legend .wizard-step-number,
  .thumbnail-production-body .workspace-group legend .wizard-step-number,
  .generic-tool-modal-content .workspace-group legend .wizard-step-number { width: 22px; height: 22px; font-size: 10px; }

  .shorts-production-body .workspace-field label,
  .transcription-production-body .workspace-field label,
  .dubbing-production-body .workspace-field label,
  .thumbnail-production-body .workspace-field label,
  .video-production-dialog .workspace-field label,
  .generic-tool-modal-content .workspace-field label,
  .shorts-production-body .workspace-field > span,
  .transcription-production-body .workspace-field > span,
  .dubbing-production-body .workspace-field > span,
  .generic-tool-modal-content .workspace-field > span { font-size: var(--cf-mobil-label, 11.5px); }

  .shorts-production-body .workspace-field small,
  .transcription-production-body .workspace-field small,
  .dubbing-production-body .workspace-field small,
  .thumbnail-production-body .workspace-field small,
  .video-production-dialog .workspace-field small,
  .generic-tool-modal-content .workspace-field small { font-size: var(--cf-mobil-hilfe, 9.5px); line-height: 1.4; }

  .shorts-production-body select, .shorts-production-body input, .shorts-production-body textarea,
  .transcription-production-body select, .transcription-production-body input, .transcription-production-body textarea,
  .dubbing-production-body select, .dubbing-production-body input, .dubbing-production-body textarea,
  .thumbnail-production-body select, .thumbnail-production-body input, .thumbnail-production-body textarea,
  .generic-tool-modal-content select, .generic-tool-modal-content input, .generic-tool-modal-content textarea {
    font-size: var(--cf-mobil-eingabe, 13px);
    min-height: var(--cf-mobil-eingabe-hoehe, 38px);
  }
  .shorts-production-body textarea,
  .transcription-production-body textarea,
  .dubbing-production-body textarea,
  .generic-tool-modal-content textarea { min-height: 76px; }

  .shorts-production-body .shorts-intro strong,
  .transcription-production-body .workspace-intro-card strong,
  .dubbing-production-body .workspace-intro-card strong,
  .thumbnail-production-body .workspace-intro-card strong,
  .generic-tool-modal-content .workspace-intro-card strong { font-size: var(--cf-mobil-intro-titel, 12.5px); }

  .shorts-production-body .shorts-intro p,
  .transcription-production-body .workspace-intro-card p,
  .dubbing-production-body .workspace-intro-card p,
  .thumbnail-production-body .workspace-intro-card p,
  .generic-tool-modal-content .workspace-intro-card p { font-size: var(--cf-mobil-intro-text, 10.5px); line-height: 1.45; }

  .transcription-production-body .workspace-intro-card,
  .dubbing-production-body .workspace-intro-card,
  .generic-tool-modal-content .workspace-intro-card { padding: 10px 12px; gap: 10px; }

  /* Einzelne Werkzeuge (z. B. das Videoskript) bringen eigene Groessen ueber
     [data-generic-tool-id] mit und schlagen die Klassenregeln oben. Dieselbe
     Selektorform - spaeter in der Datei - holt sie auf den Massstab zurueck. */
  .generic-tool-modal[data-generic-tool-id] .workspace-group>legend b { font-size: var(--cf-mobil-schritt, 13.5px); }
  .generic-tool-modal[data-generic-tool-id] .workspace-group>legend small { font-size: var(--cf-mobil-schritt-hilfe, 9.5px); }
  .generic-tool-modal[data-generic-tool-id] .workspace-group>legend .wizard-step-number { width: 22px; height: 22px; font-size: 10px; }
  .generic-tool-modal[data-generic-tool-id] .workspace-field label { font-size: var(--cf-mobil-label, 11.5px); }
  .generic-tool-modal[data-generic-tool-id] .workspace-field small { font-size: var(--cf-mobil-hilfe, 9.5px); line-height: 1.4; }
  .generic-tool-modal[data-generic-tool-id] .workspace-field select,
  .generic-tool-modal[data-generic-tool-id] .workspace-field input,
  .generic-tool-modal[data-generic-tool-id] .workspace-field textarea { font-size: var(--cf-mobil-eingabe, 13px); }
  .generic-tool-modal[data-generic-tool-id] .workspace-intro-card strong { font-size: var(--cf-mobil-intro-titel, 12.5px); }
  .generic-tool-modal[data-generic-tool-id] .workspace-intro-card p,
  .generic-tool-modal[data-generic-tool-id] .workspace-intro-card small { font-size: var(--cf-mobil-intro-text, 10.5px); line-height: 1.45; }
}

/* === Umbruchschutz fuer Ergebnistexte auf Telefonen, 28.08.2026 ==========
   In der Keyword-Recherche stand eine zusammenhaengende Zeichenkette ohne
   Leerzeichen (eine Kanal-ID) im Ergebnisdokument: sie brach nicht um und
   zog das Dokument auf 505px bei 331px Platz - der Text lief rechts aus
   dem Bild. Da Ergebnisse frei aus Modellen und Fremddaten kommen, kann
   das jederzeit wieder passieren; deshalb ein genereller Schutz fuer alle
   Ergebnis- und Dokumentflaechen statt einer Einzelkorrektur. */
@media (max-width: 700px) {
  .script-document-content,
  .script-document-content *,
  .tool-history-content,
  .factory-result-text,
  .workspace-result,
  .workspace-result *,
  .cc-result,
  .cc-result * { overflow-wrap: anywhere; word-break: normal; }
  .script-document-content pre,
  .workspace-result pre,
  .cc-result pre { white-space: pre-wrap; }
}

/* Gesprächsaktionen folgen der Breite des Coach-Eingabefelds. */
.cc-shell .coach-session-bar{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;max-width:820px;margin:18px auto 8px;padding:10px 0;border-top:1px solid #252a36;font:400 12px/1.4 'DM Sans',system-ui,sans-serif}
.cc-shell .coach-session-bar[hidden]{display:none}
.coach-session-note{display:inline-flex;align-items:center;gap:6px;color:#8a93a7}
.coach-session-note i{font-size:15px}
.cc-shell .coach-session-reset{display:inline-flex;align-items:center;justify-content:center;gap:7px;flex-shrink:0;min-height:34px;padding:7px 11px;border:1px solid #303647;border-radius:20px;background:#141720;color:#c7d1e3;font:500 12px/1.4 'DM Sans',system-ui,sans-serif;cursor:pointer}
.cc-shell .coach-session-reset:hover{background:#1e2330;border-color:#596279;color:#fff}
.cc-shell .coach-session-reset:focus-visible{outline:2px solid #ff3656;outline-offset:3px}
.cc-shell .coach-session-reset:disabled{opacity:.5;cursor:wait}
@media(max-width:480px){.cc-shell .coach-session-bar{flex-wrap:wrap;gap:8px}.coach-session-note{font-size:11px}.cc-shell .coach-session-reset{margin-left:auto}}

/* Nach der Antwort wird derselbe Composer zum Folgefrage-Feld. */
.cc-shell .coach-hero[hidden],.cc-shell .coach-prompts[hidden]{display:none!important}
.coach-followup-heading{box-sizing:border-box;max-width:820px;width:100%;margin:30px auto 12px;padding-top:20px;border-top:1px solid #252a36}
.coach-followup-heading h3{margin:0 0 6px;color:#edf0f7;font:600 17px/1.4 'Space Grotesk',system-ui,sans-serif}
.coach-followup-heading p{margin:0;color:#939eb3;font:400 12px/1.5 'DM Sans',system-ui,sans-serif}
.cc-shell:has(.coach-form) .coach-form.is-followup{margin-bottom:32px}

.best-time-history-label{margin:14px 0 7px;color:#929db1;font-size:11px;line-height:1.4}

/* Mitteilung unten rechts, wie man sie vom Betriebssystem kennt (13.09.2026).
   Der Hinweis im Werkzeug erreicht nur, wer gerade ein betroffenes Werkzeug
   oeffnet - eine abgerissene YouTube-Verbindung soll aber ueberall auffallen. */
.kanal-mitteilung{position:fixed;right:22px;bottom:92px;z-index:10100;display:flex;align-items:flex-start;gap:12px;width:min(360px,calc(100vw - 32px));padding:14px 14px 14px 15px;border:1px solid rgba(255,48,79,.45);border-radius:14px;background:linear-gradient(145deg,rgba(40,18,26,.99),rgba(18,20,27,.99));box-shadow:0 22px 60px rgba(0,0,0,.62);color:#f5f7fb;animation:kanal-mitteilung-auf .22s ease-out}
@keyframes kanal-mitteilung-auf{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.kanal-mitteilung{animation:none}}
.kanal-mitteilung-symbol{flex:none;display:grid;width:34px;height:34px;place-items:center;border-radius:10px;background:rgba(255,48,79,.16);color:#ff6078;font-size:19px}
.kanal-mitteilung-text{display:grid;gap:3px;min-width:0}
.kanal-mitteilung-text strong{font-size:12.5px;font-weight:800}
.kanal-mitteilung-text span{color:#a9b1c2;font-size:11.5px;line-height:1.5}
.kanal-mitteilung-knopf{justify-self:start;display:inline-flex;align-items:center;gap:6px;min-height:34px;margin-top:8px;padding:0 13px;border:1px solid #ff2347;border-radius:9px;background:#ff2347;color:#fff;font:inherit;font-size:11px;font-weight:700;cursor:pointer}
.kanal-mitteilung-knopf:hover{background:#ff3d5c}
.kanal-mitteilung-zu{flex:none;display:grid;width:26px;height:26px;place-items:center;margin-left:auto;border:0;border-radius:8px;background:transparent;color:#98a0b1;font-size:15px;cursor:pointer}
.kanal-mitteilung-zu:hover{background:rgba(255,255,255,.07);color:#fff}
@media(max-width:650px){.kanal-mitteilung{right:14px;left:14px;bottom:84px;width:auto}}


/* Aufgebrauchtes Tageskontingent ist kein Fehler des Kunden und keine kaputte
   Verbindung - deshalb bernsteinfarben statt rot (13.09.2026). */
#workspace-body .youtube-connection-banner.is-kontingent{border-color:rgba(255,176,32,.45);background:linear-gradient(145deg,rgba(255,176,32,.12),rgba(29,33,43,.98))}
#workspace-body .youtube-connection-banner.is-kontingent>i{color:#ffb020}
.kanal-mitteilung.ist-kontingent{border-color:rgba(255,176,32,.45);background:linear-gradient(145deg,rgba(42,32,14,.99),rgba(18,20,27,.99))}
.kanal-mitteilung.ist-kontingent .kanal-mitteilung-symbol{background:rgba(255,176,32,.16);color:#ffb020}

/* ---------------------------------------------------------------------------
   Kinoansicht des Videos auf dem Telefon und im Querformat.

   Gemeldet am 13.09.2026: "Icons sind übereinander. Ich kann kein Vollbild
   machen." Gemessen bei 390 px: die sechs Werkzeugknöpfe hängen einzeln am
   rechten Rand des Abspielers, mit fest einprogrammierten Abständen
   (16/72/128/184/240/296 px). Der Abspieler ist dort aber nur 196 px hoch -
   also lag der Schließen-Knopf auf dem Download-Knopf und der Pinsel auf dem
   Vollbild-Knopf des Abspielers. Vollbild war damit nicht erreichbar.

   Gemacht wird es jetzt wie bei YouTube auf dem Telefon: das Video oben, die
   Bedienung darin, und die Werkzeuge als Zeile DARUNTER. Am Schreibtisch
   bleibt alles wie es war - dort ist die Leiste display:contents, die Knöpfe
   hängen weiter einzeln am Rand.

   Die Abfrage fasst schmale Bildschirme UND flache mit: im Querformat ist das
   Telefon über 900 px breit, aber nur rund 410 px hoch - sechs gestapelte
   Knöpfe passen dort genauso wenig.
   --------------------------------------------------------------------------- */
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-tools{display:contents}
#workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-tools .cinema-player-download>span{display:none}

@media (max-width: 760px), (max-height: 560px) {
  /* Keine Pfeile neben dem Fenster: sie standen als eigene Spalten links und
     rechts und nahmen dem Video die Breite (gemeldet am 13.09.2026, "Das
     Video soll die volle Breite nehmen … am Handy kann man swipen"). Geblaettert
     wird jetzt durch Wischen - siehe mountVideoCinemaNavigation(). */
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-cinema-nav{display:none}
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay.is-cinema-nav{display:block!important}
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay.is-cinema-nav>.video-history-detail{width:calc(100vw - 12px)!important;max-width:none;margin:0 auto!important}
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay>.video-history-detail{width:calc(100vw - 12px)!important;padding:10px}
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay{padding:6px}

  /* Die Werkzeuge werden zur Zeile UNTER dem Abspieler - nicht in ihn hinein:
     die Bedienleiste (Abspielen, Zeit, Vollbild) haengt am unteren Rand des
     Abspielers, und ein Kind im Fluss haette sie mit nach unten geschoben und
     die Zeile ueberdeckt. Der Abspieler behaelt deshalb seine Groesse, die
     Zeile sitzt darunter, und der Platz dafuer kommt als Abstand. */
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-rebuild-player{
    position:relative;
    /* Der Abspieler schneidet sonst alles ab, was ueber seinen Rand hinausgeht -
       und damit genau die Zeile darunter. Die runden Ecken bringt das Video
       selbst mit. */
    overflow:visible;
    margin-bottom:112px;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
  }
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-rebuild-player video{border-radius:0!important}
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-tools{
    position:absolute;
    z-index:9;
    top:calc(100% + 10px);
    right:0;
    left:0;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
  }
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-tools .cinema-player-download{
    position:static;
    top:auto;
    right:auto;
    width:100%;
    height:44px;
    grid-template-columns:18px minmax(0,1fr);
    gap:5px;
    padding:0 7px;
    text-align:left;
    opacity:1;
  }
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-tools .cinema-player-download>span{display:block;overflow:hidden;font-size:8.5px;font-weight:700;line-height:1.12;text-overflow:ellipsis;white-space:normal}
  /* Das Video bekommt die Breite, die Bedienung bleibt darin. */
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay > .video-history-detail.video-history-detail .video-rebuild-player video{
    width:100%;
    max-height:min(58vh,420px);
    object-fit:contain;
  }
  /* Der Schliessen-Knopf sass auf dem ersten Werkzeugknopf. Er gehoert an den
     Rand des Fensters, nicht auf das Video. */
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-detail-close{
    z-index:12;
    top:8px;
    right:8px;
    width:38px;
    height:38px;
  }
}

/* Im Querformat ist die Hoehe knapp - bei 915 x 412 bleiben nach Kopfzeile und
   Raendern rund 300 px fuer Video UND Werkzeugzeile. Das Video wird deshalb
   flacher, die Knoepfe kleiner, und die Raender schrumpfen; sonst steht die
   Zeile unter dem Bildschirmrand. */
@media (max-height: 560px) and (orientation: landscape) {
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay{padding:4px}
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay > .video-history-detail{
    max-height:calc(100vh - 8px);
    padding:10px;
  }
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay > .video-history-detail.video-history-detail .video-rebuild-player video{
    max-height:min(52vh,230px);
  }
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .video-rebuild-player{margin-bottom:48px}
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-tools{top:calc(100% + 6px)}
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-tools{grid-template-columns:repeat(6,38px);justify-content:center;gap:6px}
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-tools .cinema-player-download{
    width:38px;
    height:38px;
    display:grid;
    padding:0;
    font-size:18px;
  }
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .cinema-player-tools .cinema-player-download>span{display:none}
}

/* Einheitliche Chatbox auf Mobilgeräten: Der Thumbnail-Maker und der
   Social-Post führen über eine einzelne Einstellungsaktion in die Details.
   Der Video-Composer hatte zusätzlich bis zu sechs verstreute Chips; sie
   machten dieselbe Eingabe unnötig unruhig. Die volle Auswahl bleibt hinter
   dem Einstellknopf verfügbar. */
@media (max-width: 700px) {
  html body.factory-page-active #workspace-body[data-tool="video-generator"] .is-chat-composer .video-chat-actions {
    display: flex !important;
    align-items: center;
    gap: 8px !important;
    padding: 0 10px 4px !important;
  }
  html body.factory-page-active #workspace-body[data-tool="video-generator"] .is-chat-composer .video-param-chips {
    display: none !important;
  }
  html body.factory-page-active #workspace-body[data-tool="video-generator"] .is-chat-composer .video-config-gear {
    width: 34px !important;
    max-width: 34px !important;
    min-height: 34px !important;
    border-radius: 999px;
  }
  html body.factory-page-active #workspace-body[data-tool="video-generator"] .is-chat-composer .video-chat-actions > [data-video-rebuild-start] {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
  }
}

/* Der Kalender besitzt bereits eine eigene Überschrift im Inhalt. */
body.factory-page-active #factory-workspace:has(#workspace-body[data-tool="creator-content-calendar"]) .workspace-header{display:none!important}

/* Verbindungen bleiben auf Tablet und Mobil als kompakte Liste lesbar. */
@media(max-width:1100px){
  html body .creator-connections{gap:0!important;border-top:1px solid #2a2e39}
  html body .creator-youtube-card{min-height:0!important;margin:0!important;padding:8px 12px!important;gap:10px!important;align-items:center!important;flex-wrap:nowrap!important;border:0!important;border-bottom:1px solid #2a2e39!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
  html body .creator-youtube-card .youtube-channel-avatar{width:34px!important;height:34px!important;min-width:34px!important;flex-basis:34px!important;font-size:16px!important}
  html body .creator-youtube-card .youtube-channel-copy{gap:0!important}
  html body .creator-youtube-card .youtube-channel-copy small{font-size:9px!important;line-height:1.2!important}
  html body .creator-youtube-card .youtube-channel-copy strong{font-size:13px!important;line-height:1.2!important}
  html body .creator-youtube-card .youtube-channel-copy span{font-size:10px!important;line-height:1.25!important}
  html body .creator-youtube-card button{min-height:34px!important;padding:5px 10px!important;font-size:10.5px!important}
}

/* Beste Zeit, 18.09.2026: Shorts und Langvideos getrennt, "kostenlos" und
   der Verbinden-Knopf bei fehlendem Kanal. Farben aus den vorhandenen
   Variablen der Ansicht. */
.best-time-view .best-time-formate {
  display: grid;
  gap: 4px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  color: var(--bt-dim);
  font-size: 12.5px;
}
.best-time-view .best-time-formate b { color: var(--bt-copy); font-weight: 600; }
.best-time-view .best-time-kostenlos { color: var(--bt-dim); }
.cc-empty[data-kanal-verbindung-fehlt] { display: grid; justify-items: center; gap: 12px; }

/* Gemeinsame Empty-State-Vorlage fuer jedes Contentfactory-Tool. Alle
   Werkzeugrouten rendern dieselbe Shell; deshalb werden Position, Typografie
   und Abstaende ausschliesslich hier und nicht pro data-tool gesetzt. */
html body.factory-page-active #workspace-body > .factory-empty-state-shell,
html body.factory-page-active #workspace-body[data-tool] > .factory-empty-state-shell,
html body.factory-page-active #workspace-body > .factory-empty-state-shell.cc-shell.cc-video-generator-shell {
  display: block !important;
  box-sizing: border-box !important;
  width: min(1400px, calc(100% - 80px)) !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: -40px auto 0 !important;
  padding: 0 !important;
  position: relative !important;
  top: 0 !important;
  transform: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body.factory-page-active #workspace-body > .factory-empty-state-shell > .factory-empty-state,
html body.factory-page-active #workspace-body[data-tool] > .factory-empty-state-shell > .factory-empty-state {
  display: grid !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 30px 20px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  justify-items: center !important;
  align-content: start !important;
  gap: 8px !important;
  color: #818999 !important;
  text-align: center !important;
}
html body.factory-page-active #workspace-body > .factory-empty-state-shell .factory-empty-state > .video-history-gallery-empty,
html body.factory-page-active #workspace-body > .factory-empty-state-shell .factory-empty-state > .tool-history-empty {
  display: grid !important;
  justify-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #818999 !important;
  text-align: center !important;
}
html body.factory-page-active #workspace-body > .factory-empty-state-shell .factory-empty-state i {
  margin: 0 !important;
  color: #ff304f !important;
  font: 400 34px/1 'Material Design Icons' !important;
}
html body.factory-page-active #workspace-body > .factory-empty-state-shell .factory-empty-state strong {
  margin: 0 !important;
  color: #e4e7ed !important;
  font: 700 14px/1.3 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
}
html body.factory-page-active #workspace-body > .factory-empty-state-shell .factory-empty-state p {
  margin: 0 !important;
  color: #818999 !important;
  font: 400 12px/1.45 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}
html body.factory-page-active #workspace-body > .factory-empty-state-shell .factory-empty-state .cc-button { margin-top: 4px !important; }
@media (max-width: 650px) {
  html body.factory-page-active #workspace-body > .factory-empty-state-shell .factory-empty-state p { white-space: normal !important; }
}

/* Manche Control-Center-Ansichten (z. B. Shorts) besitzen zusaetzlich eine
   .cc-shell-Huelle. Fuer einen Empty State bekommt diese Huelle exakt
   denselben Startpunkt wie eine direkte Shell; die innere Shell traegt keine
   eigene Vertikalverschiebung mehr. */
html body.factory-page-active #workspace-body > .cc-shell:has(> .factory-empty-state-shell) {
  display: block !important;
  box-sizing: border-box !important;
  width: min(1400px, calc(100% - 80px)) !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: -40px auto 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body.factory-page-active #workspace-body > .cc-shell:has(> .factory-empty-state-shell) > .factory-empty-state-shell,
html body.factory-page-active #workspace-body > .cc-shell > .factory-empty-state-shell {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}
html body.factory-page-active #workspace-body .factory-empty-state-shell .factory-empty-state {
  display: grid !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 30px 20px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  justify-items: center !important;
  align-content: start !important;
  gap: 8px !important;
  text-align: center !important;
}
html body.factory-page-active #workspace-body .factory-empty-state-shell .factory-empty-state > .video-history-gallery-empty,
html body.factory-page-active #workspace-body .factory-empty-state-shell .factory-empty-state > .tool-history-empty {
  display: grid !important;
  /* Titelzeile waechst mit, wenn der Titel umbricht (CFAI-MOB-20260922-033:
     bei 360 px lag die zweite Zeile ueber dem Text). Einzeilig unveraendert 18 px. */
  grid-template-rows: 38px minmax(18px, auto) minmax(17px, auto) auto !important;
  align-content: start !important;
  justify-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  min-height: 89px !important;
}
html body.factory-page-active #workspace-body .factory-empty-state-shell .factory-empty-state i {
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  color: #ff304f !important;
  font: 400 34px/1 'Material Design Icons' !important;
}
html body.factory-page-active #workspace-body .factory-empty-state-shell .factory-empty-state strong {
  display: block !important;
  min-height: 18px !important;
  margin: 0 !important;
  color: #e4e7ed !important;
  font: 700 14px/1.3 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
}
html body.factory-page-active #workspace-body .factory-empty-state-shell .factory-empty-state p {
  display: block !important;
  width: 100% !important;
  /* ai-contentfactory-pages.css begrenzt .tool-history-empty p auf 450px.
     Zusammen mit nowrap lief ein langer Text dadurch nach rechts ueber und
     stand nicht mehr mittig unter Icon und Ueberschrift (Content-Plan u. a.). */
  max-width: none !important;
  min-height: 17px !important;
  margin: 0 !important;
  color: #818999 !important;
  font: 400 12px/1.45 'DM Sans', sans-serif !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}
@media (max-width: 650px) {
  html body.factory-page-active #workspace-body .factory-empty-state-shell .factory-empty-state p { white-space: normal !important; }
}

/* Fehlt der YouTube-Kanal, steht der Verbinden-Knopf als Karte im Kopf
   (contentfactory-production-header.js) - wie „Neue Produktion" bei den
   uebrigen Werkzeugen. Der Kopf hat damit dieselbe Hoehe, eine eigene
   Vertikalverschiebung fuer Beste Veroeffentlichungszeit entfaellt. Der
   Knopf im Empty State bleibt als Rueckfall im DOM, solange die Karte fehlt. */
html body.factory-page-active #factory-workspace:has([data-kanal-header-action]) #workspace-body [data-kanal-verbindung-fehlt] > [data-youtube-connect] {
  display: none !important;
}

/* Die generischen Entdeckungswerkzeuge legen die gemeinsame Shell in
   .tool-history ab. Auch dieser Zwischencontainer darf keinen eigenen
   oberen Abstand in den Empty-State einbringen. */
html body.factory-page-active #workspace-body > .tool-history:has(> .factory-empty-state-shell) {
  margin-top: -40px !important;
  padding-top: 0 !important;
}
html body.factory-page-active #workspace-body > .tool-history > .factory-empty-state-shell {
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

/* Kanal-Hinweis im Creator Coach (CFAI-20260921-022): gleiche Gestalt wie der
   Hinweis ueber dem Content-Kalender, so breit wie das Eingabefeld (820 px). */
.cc-shell .coach-kanal-hinweis,
#workspace-body .coach-kanal-hinweis{box-sizing:border-box;width:820px;max-width:100%;margin:0 auto 12px}

/* Hochformat im Video-Kino auf dem Telefon (CFAI-MOB-20260922-030): Der
   Player war min(90vh - 117px, 810px) hoch; die zwei Reihen Aktionsknoepfe
   darunter lagen ausserhalb des Fensters (92vh) und waren nur nach innerem
   Scrollen erreichbar. 240px = zwei Knopfreihen, Abstaende, Fensterrand.
   Der Platz fuer die Knopfleiste wird unten am Player freigehalten. */
@media (max-width: 560px) {
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay > .video-history-detail.is-video-portrait .video-rebuild-player {
    height: min(calc(92dvh - 240px), 810px) !important;
    /* Die Knopfleiste (.cinema-player-tools) haengt absolut unter dem
       Player und belegt sonst keinen Platz - das Fenster schnitt sie ab. */
    margin-bottom: 112px;
  }
}

/* Video-Kino auf dem Telefon (CFAI-MOB-20260922-031, Nutzerwunsch): Infos
   unter dem Video statt als Einblendung, Aktionen im Drei-Punkte-Menue.
   Die Klassen setzt kinoFuerTelefon() in contentfactory-video-generator-
   rebuild.js - nur unter 700px. */
.cinema-menu-knopf{display:none}
@media (max-width: 700px) {
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .ist-telefon-kino .cinema-menu-knopf{position:absolute;z-index:6;top:10px;left:10px;display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid rgba(255,255,255,.22);border-radius:12px;background:rgba(8,10,15,.72);color:#fff;font-size:22px;cursor:pointer}
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .ist-telefon-kino .video-rebuild-player{margin-bottom:0!important}
  /* Untereinander statt Raster: die Infos erben sonst die Rasterflaeche
     "detail-info", der Bereich bekam drei Spalten und der Player 0px. */
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .ist-telefon-kino .video-history-detail-media{display:block!important}
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .ist-telefon-kino .cinema-player-info.ist-unter-video{grid-area:auto!important}
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .ist-telefon-kino:not(.is-video-portrait) .video-rebuild-player{width:100%!important}
  /* Menue: zu, bis der Knopf es oeffnet; dann eine Liste mit Beschriftung. */
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .ist-telefon-kino .cinema-player-tools{display:none!important}
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .ist-telefon-kino .video-rebuild-player.ist-menue-offen .cinema-player-tools{position:absolute!important;z-index:7;top:56px!important;left:10px!important;right:auto!important;bottom:auto!important;display:grid!important;grid-template-columns:1fr!important;gap:2px!important;width:min(240px,calc(100% - 20px))!important;padding:6px!important;border:1px solid #303440;border-radius:14px;background:#151820;box-shadow:0 16px 40px rgba(0,0,0,.5)}
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .ist-telefon-kino .video-rebuild-player.ist-menue-offen .cinema-player-tools .cinema-player-download{display:flex!important;align-items:center;justify-content:flex-start!important;gap:12px;width:100%!important;height:44px!important;min-height:44px;padding:0 12px!important;border:0!important;border-radius:10px!important;background:transparent!important;color:#f4f5f8;font-size:14px;text-align:left}
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .ist-telefon-kino .video-rebuild-player.ist-menue-offen .cinema-player-tools .cinema-player-download:active{background:#232733!important}
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .ist-telefon-kino .video-rebuild-player.ist-menue-offen .cinema-player-tools .cinema-player-download>i{font-size:20px;width:22px}
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .ist-telefon-kino .video-rebuild-player.ist-menue-offen .cinema-player-tools .cinema-player-download>span{display:block!important;overflow:visible;font-size:14px!important;font-weight:600;line-height:1.2;white-space:nowrap}
  /* Infos unter dem Video, immer sichtbar. */
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .ist-telefon-kino .cinema-player-info.ist-unter-video{position:static!important;inset:auto!important;display:block!important;margin:12px 0 0!important;padding:14px!important;border:1px solid #262a35!important;border-radius:14px!important;background:#11141b!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important;transition:none!important}
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .ist-telefon-kino .cinema-player-info.ist-unter-video .video-rebuild-prompt{display:block!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important}
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .ist-telefon-kino .cinema-player-info.ist-unter-video .video-rebuild-prompt-head{display:flex!important;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .ist-telefon-kino .cinema-player-info.ist-unter-video .video-rebuild-prompt-head small{color:#ff4968;font-size:10px;font-weight:800;letter-spacing:.12em}
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .ist-telefon-kino .cinema-player-info.ist-unter-video .video-rebuild-prompt p{display:-webkit-box!important;overflow:hidden;margin:0!important;color:#d8dce5!important;font-size:13px!important;line-height:1.5!important;writing-mode:horizontal-tb!important;white-space:normal!important;word-break:normal!important;-webkit-box-orient:vertical;-webkit-line-clamp:4}
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .ist-telefon-kino .cinema-player-info.ist-unter-video .video-prompt-copy{pointer-events:auto!important}
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .ist-telefon-kino .cinema-player-info.ist-unter-video .video-rebuild-config{display:block!important;margin:12px 0 0!important;padding:12px 0 0!important;border:0!important;border-top:1px solid #262a35!important;background:transparent!important}
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .ist-telefon-kino .cinema-player-info.ist-unter-video .video-rebuild-config-line{display:flex!important;flex-wrap:wrap;gap:6px!important}
  #workspace-body:is([data-tool="video-generator"],[data-tool="media-dubbing-shared"]) .video-history-cinema-overlay .ist-telefon-kino .cinema-player-info.ist-unter-video .video-rebuild-config-line>*{display:inline-flex!important;align-items:center;padding:4px 9px!important;border:1px solid #2b303c!important;border-radius:999px!important;background:#171b24!important;color:#cbd2df!important;font-size:12px!important;font-weight:600;white-space:nowrap}
}