/* User-approved adjustments: tighter menu, centered search, credit colors, lighter/smaller dock, inline task progress, voice picker. */
.sidebar .nav{padding:7px 12px;margin-bottom:1px}
.sidebar .navtitle{margin:14px 0 6px}
/* Search in the middle of the header */
.rcShell .topbar{display:grid;grid-template-columns:1fr minmax(240px,440px) 1fr;align-items:center}
.rcShell .searchBox{grid-column:2;width:100%}
.rcShell .headerRight{grid-column:3;justify-self:end}
@media(max-width:900px){.rcShell .topbar{display:flex}.rcShell .searchBox{width:auto}}
/* Credits: no frame; apricot at 30 or less, red at 10 or less, blue-cyan above 30 */
.headerRight .creditPill{border:0;background:none;box-shadow:none;padding:0 6px;height:auto;font-size:14px}
.headerRight .creditPill.mid{color:#ffa94d}
.headerRight .creditPill.low{color:#ef4444}
.headerRight .creditPill.high svg{color:#38bdf8}
.headerRight .creditPill.high b{background:linear-gradient(90deg,#3b82f6,#22d3ee 55%,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent}
/* Bottom dock: smaller and lighter */
.taskDock{right:18px;bottom:18px;gap:10px}
.dockButtons{gap:8px}
.historyToggle{padding:7px 12px;font-size:11px;background:#2a2540;border-color:#4a4066;color:#e4dcf5;box-shadow:0 4px 14px #0003}
.progressBubble{width:48px;height:48px;padding:4px;box-shadow:0 4px 14px #0003;background:conic-gradient(from -90deg,#43dbef 0%,#a374ff var(--percent),#4a4066 var(--percent),#4a4066 100%)}
.progressBubble>span{width:40px;height:40px;font-size:11.5px;background:#2e2842;color:#fff}
.progressBubble[hidden]{display:none}
.progressBubble.idle{opacity:.42;filter:saturate(.35);transition:opacity .2s,filter .2s}.progressBubble.idle:hover{opacity:.85;filter:none}
.assistBtn{width:42px;height:42px;margin-right:2px;box-shadow:0 4px 14px #ff7a2f40}
.assistBtn svg{width:19px;height:19px}
.theme-light .historyToggle{background:#fff;border-color:#e3e5ea;color:#1c2230}
.theme-light .progressBubble{background:conic-gradient(from -90deg,#43dbef 0%,#a374ff var(--percent),#e3e5ea var(--percent),#e3e5ea 100%)}
.theme-light .progressBubble>span{background:#fff;color:#1c2230}
@media(max-width:600px){.progressBubble{width:44px;height:44px}.progressBubble>span{width:36px;height:36px}}
/* Task progress shown inside its own page */
.inlineJob{margin-top:18px;padding:16px 18px}
.inlineHead{display:flex;align-items:center;gap:10px}
.inlineHead b{flex:1;font-size:13.5px;color:var(--text)}
.inlineHead em{font-style:normal;font-weight:700;color:#7c3aed}
.inlineSpin{width:16px;height:16px;border-radius:50%;border:2px solid #7c3aed33;border-top-color:#7c3aed;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.inlineBar{height:8px;border-radius:999px;background:var(--line);overflow:hidden;margin:10px 0 8px}
.inlineBar span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#43dbef,#a374ff);transition:width .5s}
.inlineJob small{font-size:12px;color:var(--muted)}
.resultActions a{display:inline-flex;align-items:center;gap:6px}
/* Voice button (Text To Speech) */
.voiceBtn{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--text);text-align:left}
.voiceBtn:hover{border-color:#7c3aed}
.voiceBtnText{flex:1;min-width:0}
.voiceBtnText b{display:block;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.voiceBtnText small{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.voiceChevron{color:var(--muted)}
/* Voice picker, ElevenLabs-style (dark) */
.vpBack{position:fixed;inset:0;z-index:90;background:#0009;display:grid;place-items:center;padding:16px}
.vpPanel{width:min(1220px,100%);height:min(780px,calc(100vh - 32px));display:grid;grid-template-columns:320px 1fr;background:#0e0e10;color:#f5f5f5;border:1px solid #26262b;border-radius:14px;overflow:hidden;color-scheme:dark;grid-template-rows:minmax(0,1fr)}
.vpFilters{padding:18px 14px;border-right:1px solid #232327;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.vpLabel,.vpSection span{font-size:14px;font-weight:600;margin:4px 0}
.vpSection{margin-top:14px}
.vpSelect{height:40px;border-radius:10px;border:1px solid #2c2c32;background:#141417;color:#f5f5f5;padding:0 10px;font-weight:600}
.vpChips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 4px}
.vpChips button{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:10px;border:1px solid #2c2c32;background:#141417;color:#eaeaea;font-size:13px;font-weight:600}
.vpChips button svg{width:15px;height:15px}
.vpChips button.on{background:#f5f5f5;color:#0e0e10;border-color:#f5f5f5}
.vpGroup{border-top:1px solid #1d1d21;padding:10px 0}
.vpGroup summary{cursor:pointer;font-size:14px;font-weight:600;list-style:none;display:flex;justify-content:space-between}
.vpGroup summary:after{content:"›";color:#9a9aa3;font-size:18px;line-height:1}
.vpGroup[open] summary:after{transform:rotate(90deg)}
.vpReset{margin-top:10px;align-self:flex-start;color:#9a9aa3;font-size:12.5px;text-decoration:underline}
.vpMain{display:flex;flex-direction:column;min-width:0;min-height:0}
.vpTop{display:flex;align-items:center;gap:12px;padding:12px 14px}
.vpTabs{display:flex;gap:4px;background:#18181b;border-radius:10px;padding:4px}
.vpTabs button{padding:7px 14px;border-radius:8px;font-weight:600;font-size:13.5px;color:#9a9aa3}
.vpTabs button.on{background:#2a2a30;color:#fff}
.vpTabs button:disabled{cursor:not-allowed}
.vpSearch{flex:1;max-width:380px;margin-left:auto;display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border-radius:10px;border:1px solid #d9d9de;background:#0e0e10}
.vpSearch input{flex:1;background:none;border:0;outline:0;color:#fff;font-size:14px}
.vpClose{width:36px;height:36px;border-radius:9px;border:1px solid #2c2c32;font-size:22px;color:#cfcfd6}
.vpList{flex:1;overflow-y:auto;padding:4px 10px 14px}
.vpRow{display:grid;grid-template-columns:40px minmax(0,1.4fr) minmax(0,1fr) auto 24px;align-items:center;gap:14px;padding:8px 10px;border-radius:12px;cursor:pointer}
.vpRow:hover{background:#18181b}
.vpRow.on{background:#1f1f24}
.vpOrb{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;position:relative;flex-shrink:0}
.vpOrb span{width:16px;height:16px;border-radius:50%;background:#fff;color:#111;font-size:8px;display:grid;place-items:center;position:absolute;top:-3px;right:-3px;box-shadow:0 1px 4px #0006}
.vpOrb.small{width:30px;height:30px}
.vpName{min-width:0}
.vpName b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vpName small{display:block;font-size:11.5px;color:#9a9aa3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vpLang{display:flex;align-items:center;gap:8px;font-size:13.5px;white-space:nowrap}
.vpAccent{color:#9a9aa3}
.vpLang em{font-style:normal;font-size:11px;font-weight:700;background:#26262b;border-radius:6px;padding:2px 6px;color:#cfcfd6}
.vpTags{display:flex;gap:6px}
.vpTags span{font-size:11px;padding:3px 8px;border-radius:999px;background:#1d1d21;color:#bdbdc4}
.vpCheck svg{width:18px;height:18px;color:#22c55e}
.vpEmpty{color:#9a9aa3;padding:24px;text-align:center;line-height:1.6}
@media(max-width:900px){.vpPanel{grid-template-columns:1fr}.vpFilters{display:none}.vpRow{grid-template-columns:36px 1fr auto}.vpTags,.vpCheck{display:none}}
.vpFlagSvg{width:18px;height:12px;border-radius:2px;flex-shrink:0;box-shadow:0 0 0 1px #0003}
.vpCode{font-size:10px;font-weight:700;padding:1px 4px;border-radius:3px;background:#26262b;color:#cfcfd6}
.voiceBtnText .vpLang{display:flex;gap:6px;font-size:11.5px;color:var(--muted)}

/* Same page format on every tab */
html{scrollbar-gutter:stable}
.helpWrap{max-width:none;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:0 18px;align-items:start}
.helpWrap>.helpHero,.helpWrap>.helpCard{grid-column:1}
.helpWrap>.helpAsk{grid-column:2;width:100%;margin:0 0 14px}
.helpWrap>.helpAsk:first-of-type{grid-row:1}
.policyDoc{max-width:none}
.pagehead.supportHead h1{font-size:27px}
.rcHead h1{font-size:27px}
@media(max-width:900px){.pagehead.supportHead h1,.rcHead h1{font-size:23px}}
.upHero{padding-top:0}.upHero h1{font-size:34px;margin-top:14px}
.muHero{padding:26px 28px}
@media(max-width:900px){.helpWrap{grid-template-columns:1fr}.helpWrap>.helpAsk{grid-column:1;grid-row:auto}}
/* Text To Speech settings: violet like the Generate button instead of orange */
.sliderRow input[type=range]{accent-color:#8b5cf6}
.costLine{background:#8b5cf614;border-color:#8b5cf640}
.vpOrb.playing{box-shadow:0 0 0 2px #fff,0 0 14px #8b5cf6}
.vpOrb.playing span{background:#8b5cf6;color:#fff}
.styleImg{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;margin-bottom:6px;display:block;background:var(--line)}
.inlineCancel{padding:6px 12px;font-size:12px;margin-left:6px}
html:not(.theme-light) textarea{scrollbar-width:thin;scrollbar-color:#3a3552 transparent}
.statePill.cancelled{color:#9a9fb0;background:#2a2b36}.theme-light .statePill.cancelled{color:#5b6272;background:#eceef3}
/* Help: both side cards sit at the top of the right column (no gap next to the hero) */
@media(min-width:901px){.helpWrap{grid-template-rows:auto auto 1fr}.helpWrap>.helpHero{grid-row:1/span 3}.helpWrap>.helpAsk~.helpAsk{grid-row:2}.helpWrap>.helpCard{grid-row:4}}
/* Music covers: a note icon shows while a cover loads or when the official site has none */
.muMain>img{background:var(--line) center/22px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa0b4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E")}
/* Phones: header icons on the first row, page picker full width below (nothing cut off) */
@media(max-width:600px){.topbar{height:auto!important;padding:10px 14px!important}.topbar .headerRight{flex-wrap:wrap;justify-content:flex-end;gap:8px;width:100%}.topbar .mobileNav{order:9;flex:1 1 100%;max-width:none}}

/* Plans: any card can be selected; the selected one gets the Growth highlight in its own color */
.upCard[data-plan]{cursor:pointer;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.upCard[data-plan]:hover{transform:translateY(-3px)}
.upCard.popular:not(.picked){border:1px solid var(--line);box-shadow:none}
.upCard.picked{border:2px solid var(--plan);box-shadow:0 14px 36px color-mix(in srgb,var(--plan) 24%,transparent);transform:translateY(-8px)}
.theme-light .upCard.picked[style*="#1c2230"]{border-color:#1c2230}
html:not(.theme-light) .upCard.picked[style*="#1c2230"]{border-color:#a78bfa}
.upBtn{transition:transform .15s ease,filter .15s ease,box-shadow .2s ease}
.upBtn:not(:disabled):hover{filter:brightness(1.08);box-shadow:0 8px 20px color-mix(in srgb,var(--plan) 35%,transparent)}
.upBtn:not(:disabled):active,.upBtn.going{transform:scale(.96)}
/* Credits in the header: same soft cyan frame as the 1 Click Video VIP entry */
.creditPill{border:1px solid #7fe3ff59!important;border-radius:10px!important;padding:5px 11px!important;animation:vipGlow 3.2s ease-in-out infinite}
.rcSpin{opacity:.6;cursor:wait}
/* Flow Bulk Image: the 16:9 format badge stays readable in light mode */
.theme-light .flowPreset .pill{background:#e6f7fc;color:#0e7490;border-color:#a5e3f3;font-size:11px;font-weight:650;padding:5px 10px}
/* An old ".popular" badge rule (style.css) pushed the Growth card 20px down and shrank its text */
.upCard.popular{top:auto;right:auto;font-size:inherit;color:inherit;margin-bottom:0;padding:22px;border-radius:18px}
/* Dark mode: thin dark scrollbars everywhere (tables, lists, text areas) instead of the white system bar */
html:not(.theme-light) *{scrollbar-width:thin;scrollbar-color:#3a3552 transparent}
/* Credit top-ups */
.upPacks{margin:34px 0 8px}
.upPacksHead{text-align:center;margin-bottom:18px}.upPacksHead h2{margin:0 0 6px;font-size:22px;color:var(--text)}.upPacksHead p{margin:0 auto;max-width:620px;color:var(--muted);font-size:13.5px}
.upPackGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:900px;margin:0 auto}
.upPack[data-pack]{cursor:pointer;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.upPack[data-pack]:hover{transform:translateY(-3px)}
.upPack .upPackOnce{align-self:flex-start;font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--plan);background:color-mix(in srgb,var(--plan) 12%,transparent);padding:3px 8px;border-radius:999px;margin-bottom:10px}
.upPack .upAlt{margin-bottom:16px}.upPack .upAlt em{font-style:normal;color:#16a34a;font-weight:650}
.upPacksNote{text-align:center;margin-top:12px}
@media(max-width:800px){.upPackGrid{grid-template-columns:1fr}}
.expiryNote{color:#d97706;font-weight:600}
#retentionNote{margin:0 0 16px}
/* Password fields: eye button to show / hide */
.pwWrap{position:relative}.pwWrap input{padding-right:44px!important;width:100%}
.pwEye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:32px;height:32px;display:grid;place-items:center;border:0;background:none;color:var(--muted);border-radius:8px;cursor:pointer}
.pwEye:hover{color:var(--text);background:color-mix(in srgb,var(--muted) 14%,transparent)}.pwEye svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* Video editor options */
.edBlock{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}.edBlock input[type=range]{width:100%;margin:6px 0 4px}.edRow{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;grid-auto-flow:column;gap:4px 10px}
.edRow .formlabel{align-self:end}.edFind{display:block;margin:6px 0 4px;font-size:12px}
.rateNote.free{color:#16a34a;font-weight:600}
/* Hover: any price card (offers and credit packs) takes its own color outline, like the selected one */
.upCard[data-plan]:not(.picked):hover,.upPack[data-pack]:not(.picked):hover{border-color:var(--plan);box-shadow:0 0 0 1px var(--plan),0 12px 30px color-mix(in srgb,var(--plan) 22%,transparent)}
/* No bounce when switching tabs or re-rendering a page (it looked like a refresh) */
#content.livePage{animation:none}
/* Laptops: the app was designed on a big screen, so it scales down with the window (phones keep their own layout). */
html{--z:1}
@media(min-width:901px) and (max-width:1680px){html{--z:.92;zoom:.92}}
@media(min-width:901px) and (max-width:1500px){html{--z:.86;zoom:.86}}
@media(min-width:901px) and (max-width:1340px){html{--z:.8;zoom:.8}}
.app{min-height:calc(100vh / var(--z))}
.sidebar{height:calc(100vh / var(--z))!important}
.sessionLoader{height:calc(100vh / var(--z))}
/* Video editor: the settings column gets more room when there is space (e.g. menu collapsed), so its fields don't squeeze */
@media(min-width:1201px){.workspace .editor{grid-template-columns:250px minmax(310px,1fr) minmax(235px,290px)}}
/* Video editor, settings across the full width (window ≤ 1200 px): three top-aligned columns
   Format · Audio tracks · Look, with the Generate button underneath (it used to sit at the bottom with a big gap). */
@media(max-width:1200px){
 .workspace .editor .settings .panelbody{align-items:flex-start}
 .workspace .editor .settings .panelbody>div:last-child{flex:2;display:grid;grid-template-columns:1fr 1fr;gap:0 22px;align-items:start}
 .workspace .editor .settings .panelbody>div:last-child>:not(.edBlock){grid-column:1/-1}
}
@media(max-width:760px){.workspace .editor .settings .panelbody>div:last-child{grid-template-columns:1fr}}