/* Light theme: original studio-refresh.css, followed by original studio-panels.css. */
/* SCAIL Studio — light workspace. UI only; state remains owned by existing modules. */
:root {
  color-scheme: light;
  --bg: #f6f5f2; --surface: #fff; --line: #e5e5ec;
  --text: #202330; --muted: #656a78; --accent: #6657df;
  --studio-soft: #f0edff; --studio-success: #18745a;
}
body.atelier { background: var(--bg); color: var(--text); font: 14px/1.55 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
body.atelier * { scrollbar-color: #c8c7d2 transparent; }
body.atelier ::selection { background: #ddd6ff; color: #30215d; }
body.atelier :is(button,a,input,select,textarea,summary):focus-visible { outline: 3px solid #8778ee; outline-offset: 3px; }
body.atelier button { font-family: inherit; transition: background .16s ease, border-color .16s ease, box-shadow .16s ease; }
body.atelier button:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
body.atelier [hidden] { display: none !important; }
body.atelier:has(#loginGate:not([hidden])) { min-height: 100dvh; overflow: hidden; }
body.atelier:has(#loginGate:not([hidden])) > :is(.shell,.atelier-sidebar,.site-footer,.atelier-markets,.market-grid,.comfy-live-progress) { display: none !important; }
body.atelier .atelier-sidebar { width: 230px; padding: 30px 18px 22px; background: #fff; border-right: 1px solid var(--line); gap: 0; }
body.atelier .atelier-sidebar .brand { margin: 0 12px 42px; gap: 11px; }
body.atelier .atelier-sidebar .brand b { color: #252638; font-size: 19px; letter-spacing: -.65px; }
body.atelier .atelier-sidebar .brand small { color: #757987; font-size: 9px; letter-spacing: 1.6px; margin-top: 3px; }
body.atelier .atelier-sidebar .logo { width: 38px; height: 42px; color: #fff; background: #6657df; border-radius: 12px; box-shadow: 0 4px 9px #6657df18; }
body.atelier .atelier-nav-label { color: #747583; font-family: inherit; font-size: 9px; font-weight: 600; line-height: 1.5; letter-spacing: 1.4px; margin: 0 14px 15px; }
body.atelier .atelier-sidebar .top-nav { gap: 5px; margin: 6px 0; }
body.atelier .atelier-sidebar :is(.history-toggle,.atelier-create) { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 12px 14px !important; border: 1px solid transparent !important; border-radius: 10px; background: transparent !important; color: #626675 !important; font-size: 13px; font-weight: 500; text-align: left; }
body.atelier .atelier-sidebar .atelier-create[aria-current=page] { background: #efecff !important; color: #5c4cd1 !important; }
body.atelier .atelier-sidebar .history-toggle[aria-current=page] { background: #efecff !important; color: #5c4cd1 !important; }
body.atelier .atelier-sidebar button:hover { background: #f5f4fa !important; color: #493daf !important; }
body.atelier .atelier-sidebar :is(#historyToggle,#billingTop,#adminUsersTop)::before { content: none; }
body.atelier .atelier-sidebar #logoutBtn { display: flex; border: 0 !important; color: #777b89 !important; margin-top: 20px !important; }
.studio-nav-icon { display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; flex: 0 0 19px; }
.studio-nav-icon svg { width: 100%; height: 100%; }
body.atelier .atelier-sidebar-note { margin: auto 6px 0; padding: 22px 8px 0; border-bottom: 0; border-top: 1px solid #ecebf1; }
body.atelier .atelier-sidebar-note > span { color: #7a7e8c; font-size: 9px; font-weight: 600; letter-spacing: 1px; }
body.atelier .atelier-sidebar-note b { display: block; font-size: 12px; color: #424656; margin-top: 10px; }
body.atelier .atelier-sidebar-note p { font-family: inherit; font-size: 12px; font-style: normal; line-height: 1.75; color: #757986; margin: 6px 0 0; }
body.atelier .studio-menu { display: none; }
body.atelier .shell { margin-left: 230px; padding: 0 42px 35px; max-width: 1640px; }
body.atelier .shell > header { min-height: 78px; padding: 0; gap: 18px; border-bottom: 1px solid #e6e5e9; }
body.atelier .atelier-breadcrumb { display: block; color: #747887; font-size: 12px; margin-right: auto; }
body.atelier .atelier-header-tag { display: none; }
body.atelier .shell > header .runpod-balance { background: #fff; color: #303445; border: 1px solid #e5e4ec; border-radius: 10px; padding: 9px 14px; box-shadow: 0 2px 3px #24243803; }
body.atelier .runpod-balance :is(span,small) { color: #747889; }
body.atelier .runpod-balance strong { color: #343447; }
body.atelier .page-intro { padding: 32px 0 24px; min-height: 0; background: none; }
body.atelier .page-intro .eyebrow { color: #7f7e90; font-size: 9px; letter-spacing: 1.8px; font-weight: 600; margin-bottom: 9px; }
body.atelier .page-intro h1 { font-family: inherit; font-size: clamp(28px,2.6vw,36px); font-weight: 650; line-height: 1.16; letter-spacing: -1.2px; color: #242536; margin: 0 0 10px; }
body.atelier .page-intro p:last-child { color: #747786; font-size: 13px; line-height: 1.6; }
body.atelier .studio-workflow-switch { margin: 0 0 26px; padding: 0; border: 0; background: none; }
body.atelier .workflow-switch-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
body.atelier .workflow-switch-options button { display: flex; min-width: 0; width: 100%; min-height: 83px; padding: 16px; gap: 12px; border: 1px solid #e1e0e9; border-radius: 12px; background: #fff; color: #353747; text-align: left; box-shadow: 0 2px 4px #21243c02; position: relative; }
body.atelier .workflow-switch-options button:hover { background: #faf9ff; border-color: #b8afeb; }
body.atelier .workflow-switch-options button[aria-pressed=true] { color: #5144b5; background: #f6f3ff; border: 1px solid #a799eb; box-shadow: inset 0 0 0 1px #a799eb1a; }
body.atelier .workflow-switch-options button[aria-pressed=true]::after { content: ''; position: absolute; top: 12px; right: 12px; width: 5px; height: 5px; border-radius: 50%; background: #7563d9; }
body.atelier .workflow-switch-icon { display: grid; place-items: center; width: 38px; height: 40px; flex: 0 0 38px; border-radius: 10px; color: #7c7c92; background: #f4f4f7; border: 1px solid #ecebf3; }
body.atelier [aria-pressed=true] .workflow-switch-icon { color: #6a57d6; background: #e9e2ff; border-color: #e3dafa; }
body.atelier .workflow-switch-options button > span:nth-child(2) { min-width: 0; }
body.atelier .workflow-switch-options b { font-size: 13px; font-weight: 600; letter-spacing: -.15px; }
body.atelier .workflow-switch-options small { display: block; color: #81818e; font-size: 11px; line-height: 1.5; margin-top: 3px; }
body.atelier .workflow-switch-options em { display: none; }
body.atelier .layout, body.atelier .cincong-grid { grid-template-columns: minmax(315px,.86fr) minmax(0,1.14fr); gap: 22px; align-items: start; }
body.atelier .panel, body.atelier .cincong-panel { background: #fff; color: var(--text); border: 1px solid #e4e3eb; border-radius: 16px; box-shadow: 0 3px 6px #20233503; }
body.atelier .main, body.atelier .cincong-panel { padding: 24px; }
body.atelier .section-heading { gap: 9px; }
body.atelier .section-heading h2, body.atelier .cincong-panel-title h3 { color: #303244; font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: -.3px; }
body.atelier .section-number, body.atelier .cincong-panel-title > span { width: 24px; height: 24px; border: 0; border-radius: 7px; background: #f2effb; color: #7869bd; font: 10px/1 ui-monospace,monospace; }
body.atelier .section-label { font-size: 9px; letter-spacing: 1px; color: #8a879b; }
body.atelier .lead { font-size: 12px; line-height: 1.75; color: #7b7d8b; margin: 10px 0 22px; }
body.atelier .uploads { grid-template-columns: 1fr; gap: 11px; }
body.atelier .uploads .upload { min-height: 92px; padding: 17px; border: 1px dashed #d6d2e6; border-radius: 11px; background: #fbfafc; gap: 13px; }
body.atelier .uploads .upload:hover { border-color: #8975d7; background: #f6f3ff; }
body.atelier .uploads .upload.ready { border-style: solid; background: #f7fcf9; border-color: #a7c9b7; }
body.atelier .uploads .upload-icon { width: 38px; height: 40px; flex-basis: 38px; background: #efecf9; border: 0; color: #8172be; border-radius: 9px; }
body.atelier .uploads .upload b { font-size: 13px; font-weight: 550; color: #454154; }
body.atelier .uploads .upload small { color: #858091; font-size: 11px; margin-top: 4px; }
body.atelier .uploads .upload-add { display: block; color: #9d94b1; }
body.atelier .upload-preview { height: 140px; background: #eeedf2; }
body.atelier .gpu-box, body.atelier .workflow-choice { margin-top: 24px; padding-top: 22px; border-color: #ecebf1; background: transparent; }
body.atelier .cincong-gpu-time { color: #555363; font-size: 12px; }
body.atelier :is(.cincong-gpu-time select,#videoGpuType) { display: block; width: 100%; max-width: 100%; min-width: 0; min-height: 43px; padding: 10px 12px; border: 1px solid #dedbe7; border-radius: 8px; color: #454152; background: #faf9fc; font-size: 12px; text-overflow: ellipsis; }
body.atelier :is(.cincong-gpu-time small,#videoGpuStatus) { color: #7d788a; font-size: 11px; line-height: 1.6; }
body.atelier :is(#videoGpuRefresh,#cincongGpuRefresh) { padding: 7px 0; border: 0; border-radius: 4px; color: #7060b9; background: transparent; font-size: 11px; font-weight: 500; }
body.atelier :is(#videoGpuRefresh,#cincongGpuRefresh):hover { color: #504099; text-decoration: underline; }
body.atelier .video-length { padding: 14px; border: 1px solid #e7e4ed; border-radius: 10px; background: #faf9fc; gap: 10px; }
body.atelier .video-length b { color: #565061; font-size: 12px; }
body.atelier .video-length small { color: #858090; font-size: 11px; line-height: 1.6; }
body.atelier #videoLength { color: #57477f; background: #fff; border-color: #d9d3e4; border-radius: 7px; width: 70px; }
body.atelier .video-length output { color: #5b4b90; background: #eee8f8; border-color: #ded5ed; }
body.atelier .duration-save-status { font-size: 11px; color: #6e687d; }
body.atelier .start, body.atelier .cincong-start { background: #6657df; color: #fff; border: 1px solid #6657df; border-radius: 10px; min-height: 49px; font-size: 13px; font-weight: 600; padding: 15px 17px; box-shadow: 0 4px 8px #6657df13; }
body.atelier .start:hover:not(:disabled), body.atelier .cincong-start:hover:not(:disabled) { background: #5746cf; border-color: #5746cf; transform: none; box-shadow: 0 4px 10px #6657df26; }
body.atelier .cincong-start :is(small,i) { color: #eeebff; }
body.atelier .cincong-start small { font-size: 10px; line-height: 1.6; font-weight: 400; }
body.atelier .output-column { position: sticky; top: 22px; gap: 16px; }
body.atelier .output-panel { padding: 24px; background: #fff; }
body.atelier .output-panel .section-heading h2 { font: 600 15px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color: #333345; }
body.atelier .output-panel .eyebrow { color: #93909f; font-size: 9px; margin-bottom: 2px; letter-spacing: 1.4px; }
body.atelier .result { margin-top: 19px; }
body.atelier .video-track { aspect-ratio: 1.12; background: #f8f7fb; border: 1px solid #eeebf4; border-radius: 12px; }
body.atelier .video-slide { padding: 30px; background: radial-gradient(ellipse at 50% 48%,#f1edff70,transparent 68%),radial-gradient(#aaa2c326 .7px,transparent .7px),#faf9fc; background-size: auto,18px 18px,auto; }
body.atelier .video-slide:after { inset: 22px; border-color: #ddd4ed60; border-radius: 8px; pointer-events: none; }
body.atelier .preview-symbol { width: 76px; height: 90px; border-radius: 12px; background: #fff; color: #9786c6; border: 1px solid #ded5ee; box-shadow: 9px -9px 0 -1px #f1ecf9,9px -9px 0 0 #e1d8ed,0 10px 20px #b2a3cc19; margin: 15px 0 28px; }
body.atelier .preview-symbol svg { width: 30px; height: 30px; }
body.atelier .video-slide b { font: 550 15px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color: #655976; }
body.atelier .video-slide p { font-size: 12px; line-height: 1.7; color: #9588a2; max-width: 270px; }
body.atelier .video-slide .download-link { color: #fff; border-color: #7863bf; background: #6952bcee; border-radius: 8px; font-size: 12px; }
body.atelier .slide-nav, body.atelier .cincong-tabs { gap: 6px; padding: 0 0 14px; background: none; border: 0; }
body.atelier .slide-nav button, body.atelier .cincong-tabs button { padding: 8px 12px; border: 0; border-radius: 7px; font-size: 12px; background: transparent; color: #828091; }
body.atelier .slide-nav button.active, body.atelier .cincong-tabs button.active { background: #efecfa; color: #6a57b1; border: 0; }
body.atelier .side { padding: 18px 22px; background: #fff; border-color: #e4e3eb; }
body.atelier .progress-title .eyebrow { color: #777286; font-size: 9px; }
body.atelier .progress-title > span { color: #8b829e; background: #f3eff9; padding: 3px 7px; font-size: 10px; }
body.atelier .side ol { margin: 17px 0; }
body.atelier .side li { color: #8a8496; font-size: 11px; }
body.atelier .side li i { background: #f7f5fa; border: 1px solid #e0dbe8; color: #978ba9; }
body.atelier .side li:not(:last-child):after { background: #e4dfee; }
body.atelier .side li:nth-last-child(1 of :not([hidden]))::after { display: none; }
body.atelier .side li.done { color: #18745a; }
body.atelier .side li.done i { background: #e9f7f0; border-color: #a6d2bb; color: #18745a; }
body.atelier .shutdown { display: block; border-top: 1px solid #ece8f0; padding-top: 12px; }
body.atelier .shutdown b { color: #736a81; font-size: 11px; font-weight: 600; }
body.atelier .shutdown p { color: #8b8297; font-size: 11px; line-height: 1.7; margin: 3px 0 0; }
/* Photo mode uses the same grid, input language and output canvas. */
body.atelier .cincong-head { display: none; }
body.atelier .cincong-panel-title { margin-bottom: 20px; gap: 10px; }
body.atelier .cincong-panel-title small { color: #928b9e; font-size: 9px; }
body.atelier .cincong-panel-title em { background: #f8f6fb; border: 1px solid #e8e2ef; color: #94869e; font-size: 10px; }
body.atelier .cincong-prompt > span { color: #62596d; font-size: 12px; }
body.atelier .cincong-prompt textarea { min-height: 178px; width: 100%; padding: 15px; border: 1px solid #ded8e8; border-radius: 9px; background: #fbfafe; color: #393042; font-size: 13px; line-height: 1.75; resize: vertical; }
body.atelier .cincong-prompt textarea::placeholder { color: #a197ad; opacity: 1; }
body.atelier .cincong-prompt > small { color: #a096aa; font-size: 10px; }
body.atelier .cincong-settings > div { padding: 12px 8px; background: #faf8fc; border-color: #ebe5f0; border-radius: 8px; }
body.atelier .cincong-settings :is(small,span) { color: #92859f; font-size: 10px; }
body.atelier .cincong-settings b { color: #66566e; font-size: 12px; }
body.atelier .cincong-seed, body.atelier .cincong-model-slot { background: #faf8fc; border-color: #e5ddec; color: #685b76; border-radius: 9px; }
body.atelier .cincong-seed b { color: #72617d; font-size: 11px; }
body.atelier .cincong-seed small { color: #9c8aaa; font-size: 9px; }
body.atelier .cincong-seed-controls :is(button,input) { background: #fff; color: #756384; border-color: #ddcfe7; font-size: 11px; }
body.atelier .cincong-seed-controls button[aria-pressed=true] { background: #ede6f8; border-color: #c9b9dd; color: #6c4e91; }
body.atelier .cincong-seed-controls button span { background: #9784bc; }
body.atelier .cincong-model-slot :is(b,small,em) { color: #7a6689; }
body.atelier .cincong-model-slot b { font-size: 12px; }
body.atelier .cincong-model-slot em { font-size: 11px; color: #9a88a8; }
body.atelier .cincong-model-plus { background: #eee5f6; color: #a085b4; }
body.atelier .cincong-model-slot.has-file .cincong-model-plus { background: #e9f7f0; border-color: #b8d8c8; color: #18745a; }
body.atelier .cincong-run-status { font-size: 12px; color: #84718c; }
body.atelier .cincong-output { position: sticky; top: 22px; }
body.atelier .cincong-canvas { min-height: 440px; border: 1px solid #e8e1f0; border-radius: 12px; background: radial-gradient(ellipse at 50% 48%,#f1edff70,transparent 68%),radial-gradient(#aaa2c326 .7px,transparent .7px),#faf9fc; background-size: auto,18px 18px,auto; }
body.atelier .cincong-canvas-orbit { width: 76px; height: 90px; border-radius: 12px; background: #fff; color: #9786c6; border: 1px solid #ded5ee; box-shadow: 9px -9px 0 -1px #f1ecf9,9px -9px 0 0 #e1d8ed,0 10px 20px #b2a3cc19; }
body.atelier .cincong-canvas-orbit span { color: #aa8fb7; font-size: 29px; }
body.atelier .cincong-canvas b { font: 550 15px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color: #655976; }
body.atelier .cincong-canvas p { font-size: 12px; color: #9588a2; line-height: 1.7; }
body.atelier .cincong-output-meta span { background: #f8f3fc; border-color: #e6dbee; color: #9786a4; font-size: 10px; }
body.atelier .cincong-result-image { background: #f1ecf5; border-radius: 10px; }
body.atelier .cincong-downloads button { color: #795791; background: #f3eafa; border-color: #e2d0ec; border-radius: 8px; font-size: 12px; }
body.atelier .adam-workflow-preview { background: #faf8ff; border: 1px solid #e6dff2; }
body.atelier .adam-workflow-preview :is(h2,p) { color: #665874; }
body.atelier .adam-workflow-preview :is(button,.adam-preview-flow span) { background: #f0eaf8; border-color: #e0d5ed; color: #867195; }
body.atelier .adam-preview-badge { background: #eee6f7; color: #8c70a3; }
body.atelier .adam-preview-symbol { color: #b59bc7; }
body.atelier .atelier-logs, body.atelier .atelier-markets { border-color: #e4dde9; }
body.atelier .atelier-logs > summary, body.atelier .atelier-markets > summary { color: #8c7b96; font-size: 12px; }
body.atelier .atelier-photo-log { color: #71617e; border-color: #e0d7e8; background: #fbf9fc; font-size: 12px; }
body.atelier .atelier-markets, body.atelier .site-footer { margin-left: 272px; margin-right: 42px; }
body.atelier .site-footer { padding-top: 17px; border-color: #e8e3ed; font-size: 10px; }
body.atelier .site-footer span { color: #a097aa; }
body.atelier .site-footer .site-footer-brand { color: #777082 !important; }
body.atelier .solana-widget { background: #fff; border-color: #e5dfeb; }
body.atelier .solana-widget :is(.solana-title,.solana-meta,.solana-note) { color: #9a8da5; }
/* Sign-in is a distinct, quiet entry screen, not a promotional page. */
body.atelier .login-gate { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(40px,8vw,150px); padding: 60px max(50px,calc((100vw - 1110px)/2)); background: #faf9f6; overflow-y: auto; }
body.atelier .login-gate::before { content: none; }
.login-overview { align-self: center; max-width: 500px; }
.login-wordmark { font-size: 37px; font-weight: 750; line-height: 1; letter-spacing: -2px; color: #433556; }
.login-wordmark span { display: inline-block; margin-left: 12px; vertical-align: middle; color: #99879f; font-size: 10px; font-weight: 500; letter-spacing: 2.8px; }
.login-product-art { height: 260px; position: relative; margin: 24px 0 25px; }
.login-product-art > div { position: absolute; top: 24px; width: 172px; height: 213px; padding: 18px; border-radius: 17px; border: 1px solid #e4d9f0; box-shadow: 0 16px 40px #79678e0e; }
.login-product-art span { font-size: 8px; letter-spacing: 2px; }
.login-product-art svg { position: absolute; width: 54px; height: 54px; top: 76px; left: 58px; }
.login-art-back { left: 35px; background: #f0e9f7; color: #b09aca; transform: rotate(-10deg); }
.login-art-front { left: 172px; top: 40px !important; background: #fff; color: #a68db5; transform: rotate(8deg); }
.login-art-front div { position: absolute; bottom: 20px; left: 18px; right: 18px; height: 5px; background: #f0e6f5; border-radius: 5px; }
.login-overview h2 { color: #494050; font-size: 31px; letter-spacing: -.8px; font-weight: 550; line-height: 1.3; }
.login-overview > p { max-width: 360px; margin: 16px 0 24px; color: #938595; font-size: 14px; line-height: 1.8; }
.login-features { display: flex; flex-wrap: wrap; gap: 9px; }
.login-features span { padding: 6px 11px; border: 1px solid #e5dfea; border-radius: 6px; color: #958299; background: #f8f4fa; font-size: 10px; }
body.atelier .login-card { width: 100%; max-width: 430px; padding: 38px; border-radius: 18px; background: #fff; border: 1px solid #e7e1eb; box-shadow: 0 15px 55px #56436606; }
body.atelier .login-card .login-kicker { margin: 0 0 12px; color: #9b7bb2; font-size: 9px; letter-spacing: 2px; }
body.atelier .login-card h1 { color: #4b3e56; font: 600 30px/1.3 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; letter-spacing: -.8px; }
body.atelier .login-card p { color: #9b8c9e; font-size: 13px; margin-bottom: 30px; }
body.atelier .login-card label { display: block; font-size: 12px; color: #816c8e; margin: 20px 0 7px; }
body.atelier .login-card input { margin: 0; min-height: 48px; background: #fcfafe; border-color: #e6ddec; border-radius: 9px; font-size: 13px; color: #594765; }
body.atelier .login-card input::placeholder { color: #b7a7bc; opacity: 1; }
body.atelier .login-card button { display: flex; justify-content: center; gap: 13px; margin-top: 26px; min-height: 48px; color: #fff; background: #6657df; border-radius: 9px; font-size: 13px; }
body.atelier .login-card button:hover { background: #5847ca; }
body.atelier .login-card #loginError { color: #ac3c4f; font-size: 12px; }
.login-privacy { color: #af9db6; font-size: 10px; line-height: 1.7; text-align: center; margin-top: 26px; }
/* Small functional text keeps adequate contrast on the pale surfaces. */
body.atelier :is(.section-label,.workflow-switch-options small,.lead,.uploads .upload small,.duration-save-status,.video-length small,.cincong-gpu-time small,#videoGpuStatus) { color: #717080; }
body.atelier :is(.video-slide p,.cincong-canvas p,.cincong-output-meta span,.cincong-run-status,.cincong-settings small,.cincong-settings span,.cincong-model-slot em,.cincong-prompt > small) { color: #786783; }
body.atelier :is(.shutdown p,.side li,.cincong-panel-title small,.output-panel .eyebrow,.cincong-seed small,.cincong-panel-title em) { color: #787082; }
body.atelier .login-card p, .login-overview > p, .login-privacy { color: #7e6d86; }
body.atelier .login-card input::placeholder { color: #8c7d97; }
.login-features span { color: #806c89; }
@media (min-width: 1700px) { body.atelier .shell { padding-inline: 60px; } body.atelier .layout,body.atelier .cincong-grid { grid-template-columns: minmax(390px,.8fr) minmax(0,1.2fr); } body.atelier .video-track { aspect-ratio: 1.3; } }
@media (max-width: 1200px) { body.atelier .atelier-sidebar { width: 204px; padding-inline: 13px; } body.atelier .atelier-sidebar .brand { margin-inline: 8px; } body.atelier .shell { margin-left: 204px; padding-inline: 26px; } body.atelier .atelier-markets,body.atelier .site-footer { margin-left: 230px; margin-right: 26px; } body.atelier .workflow-switch-options { gap: 9px; } body.atelier .workflow-switch-options button { padding: 14px 11px; gap: 9px; } body.atelier .workflow-switch-icon { width: 32px; flex-basis: 32px; } body.atelier .workflow-switch-options b { font-size: 12px; } body.atelier .workflow-switch-options small { font-size: 10px; } body.atelier .main,body.atelier .cincong-panel,body.atelier .output-panel { padding: 20px; } body.atelier .layout,body.atelier .cincong-grid { gap: 18px; grid-template-columns: minmax(300px,.94fr) minmax(0,1.06fr); } }
@media (max-width: 1000px) { body.atelier .atelier-sidebar { width: 180px; padding-inline: 10px; } body.atelier .atelier-sidebar .brand b { font-size: 16px; } body.atelier .shell { margin-left: 180px; padding-inline: 22px; } body.atelier .layout,body.atelier .cincong-grid { grid-template-columns: 1fr; } body.atelier .output-column,body.atelier .cincong-output { position: static; } body.atelier .video-track { aspect-ratio: 1.3; } body.atelier .atelier-markets,body.atelier .site-footer { margin-left: 202px; margin-right: 22px; } body.atelier .workflow-switch-icon { display: none; } body.atelier .workflow-switch-options button { min-height: 70px; padding: 12px; } }
@media (max-width: 700px) {
  body.atelier .atelier-sidebar { display: grid; grid-template-columns: 1fr auto auto; position: relative; inset: auto; width: 100%; padding: 17px 20px 12px; gap: 12px; border-right: 0; border-bottom: 1px solid #e5e1eb; }
  body.atelier .atelier-sidebar .brand { margin: 0; grid-column: 1; grid-row: 1; }
  body.atelier .atelier-sidebar .brand b { font-size: 18px; }
  body.atelier .atelier-sidebar .logo { width: 30px; height: 34px; border-radius: 9px; }
  body.atelier .atelier-sidebar .brand small { font-size: 8px; letter-spacing: 1.2px; }
  body.atelier .atelier-sidebar .studio-menu { display: block; grid-column: 3; grid-row: 1; padding: 9px 12px; background: #f9f7fc; border: 1px solid #e9e1ef; color: #82718f; font-size: 11px; border-radius: 8px; min-height: 40px; }
  body.atelier .atelier-sidebar #logoutBtn { width: auto; grid-column: 2; grid-row: 1; margin: 0 !important; padding: 8px !important; font-size: 0; gap: 0; min-height: 40px; }
  body.atelier .atelier-sidebar #logoutBtn .studio-nav-icon { width: 17px; }
  body.atelier .atelier-sidebar .atelier-create { grid-column: 1/-1; grid-row: 2; min-height: 40px; padding: 9px 12px !important; font-size: 12px; }
  body.atelier .atelier-sidebar .top-nav { display: none; grid-row: 3; grid-column: 1/-1; grid-template-columns: 1fr 1fr; padding: 6px 0; }
  body.atelier .atelier-sidebar.studio-menu-open .top-nav { display: grid; }
  body.atelier .atelier-sidebar .top-nav .history-toggle { width: 100%; font-size: 12px; padding: 10px !important; }
  body.atelier .atelier-nav-label,body.atelier .atelier-sidebar-note { display: none; }
  body.atelier .shell { margin: 0; padding: 0 18px 25px; }
  body.atelier .shell > header { min-height: 60px; padding: 10px 0; gap: 10px; flex-wrap: nowrap; }
  body.atelier .atelier-breadcrumb { font-size: 10px; }
  body.atelier .shell > header .runpod-balance { padding: 7px 10px; }
  body.atelier .page-intro { padding: 25px 0 20px; }
  body.atelier .page-intro h1 { font-size: 28px; }
  body.atelier .page-intro p:last-child { font-size: 12px; }
  body.atelier .studio-workflow-switch { margin-bottom: 20px; }
  body.atelier .workflow-switch-options { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; overflow: visible; }
  body.atelier .workflow-switch-options button { min-height: 77px; flex-shrink: 1; padding: 13px 9px; }
  body.atelier .workflow-switch-options b { font-size: 11px; line-height: 1.35; display: block; }
  body.atelier .workflow-switch-options small { font-size: 9px; margin-top: 4px; }
  body.atelier .workflow-switch-options button[aria-pressed=true]::after { top: 7px; right: 7px; width: 4px; height: 4px; }
  body.atelier .main,body.atelier .cincong-panel,body.atelier .output-panel { padding: 19px; border-radius: 13px; }
  body.atelier .uploads { grid-template-columns: 1fr; }
  body.atelier .video-track { aspect-ratio: .97; }
  body.atelier .section-label { font-size: 8px; }
  body.atelier .cincong-canvas { min-height: 360px; }
  body.atelier .cincong-settings b { font-size: 11px; }
  body.atelier .cincong-settings { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
  body.atelier .cincong-settings > div { padding: 10px 7px; min-width: 0; }
  body.atelier .cincong-settings :is(small,span) { font-size: 9px; line-height: 1.5; }
  body.atelier .atelier-markets,body.atelier .site-footer { margin: 10px 18px 24px; }
  body.atelier .login-gate { display: flex; align-items: center; justify-content: center; padding: 25px; }
  .login-overview { display: none; }
  body.atelier .login-card { padding: 29px; }
}
@media (prefers-reduced-motion: reduce) { body.atelier *,body.atelier *::before,body.atelier *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Light surfaces for the panels created by the studio's existing controllers. */
body.atelier {
  --panel-ink: #202330;
  --panel-muted: #656a78;
  --panel-line: #e5e5ec;
  --panel-accent: #6657df;
  --panel-tint: #f0edff;
  --panel-danger: #b13e49;
  --panel-danger-bg: #fff0f1;
  --panel-font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* History is a workspace page, not a blocking overlay. */
body.atelier .shell #historyPanel {
  position: static;
  inset: auto;
  transform: none;
  width: 100%;
  min-width: 0;
  max-height: none;
  margin: 0;
  padding: 8px 0 28px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--panel-ink);
  box-shadow: none;
  font: 14px/1.6 var(--panel-font);
}
body.atelier #historyPanel .history-head {
  position: static;
  gap: 20px;
  margin: 0 0 24px;
  padding: 0 0 20px;
  border-color: var(--panel-line);
  background: transparent;
}
body.atelier #historyPanel .history-head h2 {
  margin: 5px 0 0;
  color: var(--panel-ink);
  font: 650 28px/1.25 var(--panel-font);
  letter-spacing: -.8px;
}
body.atelier #historyPanel .history-head .eyebrow {
  color: var(--panel-muted);
  font: 600 11px/1.4 var(--panel-font);
  letter-spacing: .1em;
}
body.atelier #historyPanel #historyClose {
  flex-shrink: 0;
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid var(--panel-line);
  border-radius: 10px;
  background: #fff;
  color: var(--panel-ink);
  font: 600 13px/1.4 var(--panel-font);
}
body.atelier .history-type-switch {
  gap: 4px;
  margin: 0 0 24px;
  padding: 4px;
  border-color: var(--panel-line);
  border-radius: 12px;
  background: #eeedf2;
}
body.atelier .history-type-switch button {
  min-height: 40px;
  min-width: 106px;
  padding: 9px 20px;
  border-color: transparent;
  border-radius: 8px;
  color: var(--panel-muted);
  background: transparent;
  font: 600 13px/1.4 var(--panel-font);
}
body.atelier .history-type-switch button[aria-pressed="true"] {
  background: #fff;
  border-color: #e3e1ed;
  color: var(--panel-accent);
  box-shadow: 0 2px 5px #20233008;
}
body.atelier #historyPanel :is(.history-list, .cincong-history-grid) {
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 20px;
  color: var(--panel-muted);
}
body.atelier #historyPanel :is(.history-list .history-card, .cincong-history-grid article) {
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--panel-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 3px 12px #20233003;
}
body.atelier .history-media {
  gap: 2px;
  background: #e8e7ee;
}
body.atelier .history-media a { height: 200px; }
body.atelier .history-media a > span {
  bottom: 10px;
  left: 10px;
  padding: 5px 8px;
  border: 1px solid #ffffff50;
  border-radius: 6px;
  background: #202330b8;
  color: #fff;
  font-size: 11px;
  letter-spacing: .05em;
}
body.atelier .history-no-video {
  padding: 16px;
  background: #f6f5f8;
  color: var(--panel-muted);
  font-size: 13px;
  text-align: center;
}
body.atelier .history-details { padding: 18px 18px 16px; }
body.atelier .history-card-heading { gap: 10px; flex-wrap: wrap; }
body.atelier .history-card-heading time { color: var(--panel-muted); font-size: 12px; }
body.atelier .history-state {
  border-color: #eadbbb;
  background: #fff7e6;
  color: #916322;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 9px;
}
body.atelier .history-state.is-finished {
  background: #e9f7f0;
  border-color: #c7e7d8;
  color: #18745a;
}
body.atelier .history-state.is-error {
  background: var(--panel-danger-bg);
  border-color: #f1d1d5;
  color: var(--panel-danger);
}
body.atelier .history-card .history-details h3 {
  color: var(--panel-ink);
  font: 600 16px/1.5 var(--panel-font);
  letter-spacing: -.2px;
}
body.atelier .history-card :is(.history-video-name, .history-user) {
  color: var(--panel-muted);
  font-size: 13px;
}
body.atelier .history-output-links a {
  border-color: #ded8fa;
  border-radius: 8px;
  background: var(--panel-tint);
  color: #5847cb;
  font-size: 13px;
  line-height: 1.5;
  padding: 9px 11px;
}
body.atelier .history-card .history-actions {
  gap: 10px;
  padding: 13px 18px;
  border-color: var(--panel-line);
  background: #fcfcfd;
}
body.atelier .history-saved { color: #18745a; font-size: 12px; }
body.atelier .history-actions .resume-job {
  min-height: 40px;
  background: var(--panel-accent);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--panel-accent);
}
body.atelier .history-actions .delete-job {
  min-height: 38px;
  border-color: #edd8db;
  color: var(--panel-danger);
  background: #fff;
  font-size: 13px;
}
body.atelier .history-card .history-error {
  background: var(--panel-danger-bg);
  color: var(--panel-danger) !important;
  font-size: 13px !important;
  line-height: 1.6;
}
body.atelier .history-empty {
  padding: 56px 24px;
  background: #fff;
  border-color: #d9d7e5;
  color: var(--panel-muted);
  font-size: 14px;
}
body.atelier .cincong-photo-history > h3 {
  margin: 0 0 20px;
  color: var(--panel-ink);
  font: 600 17px/1.5 var(--panel-font);
}
body.atelier .cincong-history-grid img {
  height: 250px;
  background: #f0eff4;
}
body.atelier .cincong-history-grid a {
  margin: 0;
  padding: 14px 16px;
  border-color: var(--panel-line);
  background: #fff;
  color: #5847cb;
  font-size: 13px;
  font-weight: 600;
}
body.atelier .cincong-history-grid button {
  margin: 0 16px 16px;
  padding: 8px 11px;
  min-height: 38px;
  border: 1px solid #edd8db;
  border-radius: 8px;
  background: #fff;
  color: var(--panel-danger);
  font-size: 13px;
}
body.atelier .cincong-photo-history > p {
  color: var(--panel-danger);
  font-size: 13px;
  line-height: 1.6;
}

/* Costs and calendar. */
body.atelier .billing-intro { margin: 0 0 22px; }
body.atelier .billing-intro > p { color: var(--panel-muted); font-size: 11px; letter-spacing: .1em; }
body.atelier .billing-intro h3 {
  color: var(--panel-ink);
  font: 600 22px/1.35 var(--panel-font);
  letter-spacing: -.4px;
}
body.atelier .billing-intro > span { color: var(--panel-muted); font-size: 14px; }
body.atelier .billing-people { gap: 9px; margin: 20px 0 24px; }
body.atelier .billing-people .billing-person {
  min-height: 46px;
  border-color: var(--panel-line);
  background: #fff;
  color: var(--panel-ink);
  font-size: 13px;
}
body.atelier .billing-people .billing-person.active {
  border-color: #b8aef2;
  background: var(--panel-tint);
  color: #5847cb;
}
body.atelier .billing-avatar { background: #eeecf7; color: #6657df; font-size: 13px; }
body.atelier .billing-person-check { color: #6657df; }
body.atelier :is(.billing-summary article, .billing-summary article + article, .billing-totals article, .billing-totals article:nth-child(2), .billing-totals article:nth-child(3)) {
  gap: 10px;
  padding: 23px 24px;
  border: 1px solid var(--panel-line);
  border-radius: 16px;
  background: #fff;
}
body.atelier .billing-summary article:first-child {
  border-color: #ddd7fa;
  background: var(--panel-tint);
}
body.atelier :is(.billing-summary strong, .billing-totals strong) {
  color: var(--panel-ink);
  font-family: var(--panel-font);
  font-weight: 650;
  letter-spacing: -1px;
}
body.atelier .billing-summary strong { font-size: 36px; }
body.atelier .billing-totals strong { font-size: 28px; }
body.atelier :is(.billing-summary small, .billing-totals small) {
  color: var(--panel-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
}
body.atelier .billing-summary :is(span, em) { color: var(--panel-muted); }
body.atelier .billing-summary span { font-size: 13px; }
body.atelier .full-calendar {
  padding: 24px;
  border-color: var(--panel-line);
  border-radius: 16px;
  background: #fff;
}
body.atelier .calendar-nav strong { color: var(--panel-ink); font-size: 18px; font-weight: 600; }
body.atelier .calendar-nav button {
  width: 40px;
  height: 40px;
  border-color: var(--panel-line);
  background: #fff;
  color: var(--panel-ink);
  font-size: 16px;
}
body.atelier .calendar-week { color: var(--panel-muted); font-size: 12px; font-weight: 600; }
body.atelier .calendar-grid .calendar-cell {
  min-height: 92px;
  padding: 12px;
  border-color: #ecebf1;
  border-radius: 10px;
  background: #faf9fc;
  color: var(--panel-muted);
  font-size: 13px;
}
body.atelier .calendar-grid .calendar-cell b { font-weight: 600; }
body.atelier .calendar-grid .calendar-cell small { font-size: 12px; color: var(--panel-muted); }
body.atelier .calendar-grid .calendar-cell.has-usage {
  border-color: #ded8fa;
  background: #f5f2ff;
  color: #5847cb;
}
body.atelier .calendar-grid .calendar-cell.has-usage small:last-child { color: #5847cb; }
body.atelier .calendar-grid .calendar-cell.today {
  border-color: #9183e9;
  background: var(--panel-tint);
  box-shadow: inset 0 0 0 1px #9183e924;
}
body.atelier .billing-footnote { font-size: 13px; color: var(--panel-muted); }
body.atelier :is(.calendar-total, .monthly-total) {
  border-color: #ddd7fa;
  background: var(--panel-tint);
  color: #5847cb;
  font-size: 14px;
}
body.atelier .billing-table { font-size: 13px; color: var(--panel-ink); }
body.atelier .billing-table :is(th, td) { padding: 13px 10px; border-color: var(--panel-line); }
body.atelier .billing-table th { color: var(--panel-muted); font-weight: 600; }
body.atelier .billing-total { color: var(--panel-ink); font-size: 15px; }

/* Shared account dialogs: keep display under the native dialog controller. */
body.atelier :is(.password-dialog, .admin-users-dialog, .balance-history, .account-notifications-dialog) {
  box-sizing: border-box;
  border: 1px solid var(--panel-line);
  border-radius: 18px;
  background: #fff;
  color: var(--panel-ink);
  box-shadow: 0 24px 80px #20233026, 0 3px 12px #20233008;
  font: 14px/1.6 var(--panel-font);
  scrollbar-color: #cecadf transparent;
  color-scheme: light;
}
body.atelier :is(.admin-users-dialog, .balance-history, .account-notifications-dialog, dialog:has(.password-dialog))::backdrop {
  background: #25263852;
  backdrop-filter: blur(6px);
}
body.atelier .admin-users-dialog::before { display: none; }
body.atelier :is(.password-dialog h2, .admin-users-head h2, .bh-heading h2, .account-notifications-form h2) {
  color: var(--panel-ink);
  font: 650 26px/1.25 var(--panel-font);
  letter-spacing: -.65px;
}
body.atelier :is(.password-dialog p, .admin-users-note, .admin-panel-subtitle, .bh-message, .bh-footnote, .account-notifications-intro, .account-notifications-help, .account-notifications-toggle small) {
  color: var(--panel-muted);
  font-size: 13px;
  line-height: 1.7;
}
body.atelier :is(.password-kicker, .admin-users-head .eyebrow, .bh-heading small, .account-notifications-kicker) {
  color: #7b718f;
  font: 600 11px/1.5 var(--panel-font);
  letter-spacing: .08em;
}
body.atelier :is(.password-dialog label, .admin-user-form label, .account-notifications-email) {
  gap: 8px;
  color: var(--panel-ink);
  font-size: 13px;
  font-weight: 600;
}
body.atelier :is(.password-dialog input, .admin-user-form input, .admin-user-form select, .admin-users-search, .account-notifications-email input) {
  min-height: 46px;
  padding: 12px 14px;
  border: 1px solid #dcdbe5;
  border-radius: 10px;
  background: #fff !important;
  color: var(--panel-ink);
  box-shadow: none !important;
  font: 400 14px/1.4 var(--panel-font);
}
body.atelier :is(.password-dialog input, .admin-user-form input, .admin-user-form select, .admin-users-search, .account-notifications-email input):hover {
  border-color: #bdb7d3;
}
body.atelier :is(.password-dialog input, .admin-user-form input, .admin-user-form select, .admin-users-search, .account-notifications-email input):focus {
  outline: 2px solid #a298ec;
  outline-offset: 2px;
  border-color: var(--panel-accent);
}
body.atelier :is(.password-dialog input, .admin-user-form input, .admin-users-search, .account-notifications-email input)::placeholder {
  color: #838594;
  opacity: 1;
}
body.atelier :is(.password-dialog small, .admin-user-form small, .account-notifications-message) {
  color: #18745a;
  font-size: 13px;
  line-height: 1.6;
}
body.atelier :is(.password-dialog small.error, .admin-user-form small.error, .account-notifications-message.error) {
  color: var(--panel-danger);
}
/* Password validation uses one message node without state classes. */
body.atelier .password-dialog #passwordMessage { color: var(--panel-muted); }
body.atelier :is(.password-actions button:last-child, .admin-save, .account-notifications-actions button[type="submit"]) {
  min-height: 44px;
  padding: 11px 17px;
  border: 1px solid var(--panel-accent);
  border-radius: 10px;
  background: var(--panel-accent);
  color: #fff;
  box-shadow: none;
  font: 600 13px/1.5 var(--panel-font);
}
body.atelier :is(.password-actions button:last-child, .admin-save, .account-notifications-actions button[type="submit"]):hover:not(:disabled) {
  background: #5746ce;
  border-color: #5746ce;
  box-shadow: none;
  transform: none;
}
body.atelier :is(.password-actions button:first-child, .admin-secondary, .account-notifications-actions button:not([type="submit"])) {
  min-height: 44px;
  padding: 11px 16px;
  border: 1px solid var(--panel-line);
  border-radius: 10px;
  background: #fff;
  color: var(--panel-muted);
  font: 600 13px/1.5 var(--panel-font);
}
body.atelier :is(.password-close, .admin-close, .bh-close, .admin-edit-close, .account-notifications-close) {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--panel-line);
  border-radius: 10px;
  background: #faf9fc;
  color: var(--panel-muted);
  line-height: 1;
  font-size: 24px;
}
body.atelier :is(.password-close, .admin-close, .bh-close, .admin-edit-close, .account-notifications-close):hover {
  background: #f0edf8;
  border-color: #d2cbe9;
  color: var(--panel-ink);
  transform: none;
}
body.atelier .admin-users-card { padding: 30px; scrollbar-color: #cecadf transparent; }
body.atelier .admin-users-card::-webkit-scrollbar-thumb { background: #cecadf; }
body.atelier .admin-users-list { gap: 10px; border-color: var(--panel-line); }
body.atelier .admin-user-row {
  gap: 12px;
  padding: 15px;
  border-color: var(--panel-line);
  border-radius: 12px;
  background: #fff;
  color: var(--panel-ink);
  box-shadow: none;
}
body.atelier .admin-user-row:hover,
body.atelier .admin-user-row:focus {
  background: #f8f6ff;
  border-color: #c6bdf0;
  transform: none;
  box-shadow: none;
}
body.atelier .admin-user-row b { font-size: 14px; overflow-wrap: anywhere; }
body.atelier .admin-user-row small { color: var(--panel-muted); font-size: 12px; }
body.atelier .admin-user-row span { color: #5847cb; font-size: 13px; }
body.atelier .admin-user-row.is-blocked { background: #fff5f5; border-color: #efd2d6; }
body.atelier .admin-user-row.is-blocked small { color: var(--panel-danger); }
body.atelier .admin-users-dialog.is-editing .admin-user-form {
  padding: 20px;
  border-color: #ddd7f5;
  background: #faf9fe;
  box-shadow: none;
}
body.atelier .admin-users-dialog.is-editing .admin-users-head { border-color: var(--panel-line); }
body.atelier .admin-users-dialog.is-editing .admin-users-head h2 { color: var(--panel-ink); }
body.atelier .admin-user-form label:first-of-type input[readonly] {
  background: #f0eff5 !important;
  border-color: var(--panel-line);
  color: var(--panel-muted);
}
body.atelier .admin-users-dialog.is-editing .admin-save { box-shadow: none; }
body.atelier .admin-user-form :is(#testRunpodKey, #changeRunpodKey),
body.atelier .admin-users-dialog.is-editing .admin-user-form :is(#testRunpodKey, #changeRunpodKey) {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid #d9d2f7;
  background: var(--panel-tint);
  color: #5847cb;
  box-shadow: none;
  font: 600 13px/1.5 var(--panel-font);
}
body.atelier .admin-user-form :is(#testRunpodKey, #changeRunpodKey):hover,
body.atelier .admin-users-dialog.is-editing .admin-user-form :is(#testRunpodKey, #changeRunpodKey):hover {
  border-color: #b8adef;
  background: #e7e1ff;
  color: #5847cb;
  transform: none;
}
body.atelier .admin-user-form #runpodKeyConsole {
  padding: 12px;
  border-color: var(--panel-line);
  background: #f5f4f8;
  color: var(--panel-muted);
  font-size: 12px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
body.atelier .account-notifications-toggle input { accent-color: var(--panel-accent); }
body.atelier .account-notifications-toggle strong { color: var(--panel-ink); font-size: 14px; }
body.atelier .account-notifications-delivery {
  padding: 14px;
  border-color: #ebd9b5;
  background: #fff7e6;
  color: #916322;
  font-size: 13px;
  line-height: 1.6;
}

/* Balance history and the SVG created by balance-history.js. */
body.atelier .balance-history { padding: 30px; }
body.atelier .bh-summary {
  padding: 22px;
  border-color: #dfdaf4;
  border-radius: 14px;
  background: #f6f3ff;
}
body.atelier .bh-summary span { color: var(--panel-muted); font-size: 13px; }
body.atelier .bh-current { color: #5847cb; font-size: 34px; font-weight: 650; }
body.atelier .bh-range { color: var(--panel-ink); font-size: 16px; }
body.atelier .bh-controls button {
  min-height: 42px;
  padding: 10px 14px;
  border-color: var(--panel-line);
  border-radius: 9px;
  background: #fff;
  color: var(--panel-muted);
  font: 600 13px/1.5 var(--panel-font);
}
body.atelier .bh-controls button[aria-pressed="true"] {
  border-color: var(--panel-accent);
  background: var(--panel-accent);
  color: #fff;
}
body.atelier .bh-controls button:hover { border-color: #aba0e5; }
body.atelier .bh-chart { padding: 12px; border: 1px solid var(--panel-line); background: #fcfcfe; }
body.atelier .bh-chart svg path { stroke: #6657df; }
body.atelier .bh-chart svg circle { fill: #6657df; }
body.atelier .bh-chart svg line { stroke: #e5e5ec; }
body.atelier .bh-chart svg text { fill: #656a78; }
body.atelier .bh-point { color: #5847cb; font-size: 13px; }
body.atelier .bh-footnote { border-color: var(--panel-line); }

/* The paired-video queue and its add-files dialog. */
body.atelier .batch-queue {
  padding: 20px;
  border-color: var(--panel-line);
  border-radius: 14px;
  background: #faf9fc;
  color: var(--panel-ink);
}
body.atelier :is(.batch-title > small, .batch-add-head small, .batch-order) {
  color: var(--panel-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
}
body.atelier .batch-title > b { font-size: 18px; font-weight: 650; }
body.atelier .batch-actions > span { color: var(--panel-muted); font-size: 13px; }
body.atelier .batch-actions button {
  min-height: 40px;
  border-color: #d9d2f7;
  background: var(--panel-tint);
  color: #5847cb;
  font-size: 13px;
}
body.atelier .batch-actions button:hover { background: #e7e1ff; }
body.atelier .batch-progress { height: 5px; background: #e7e3f4; }
body.atelier .batch-progress > div { background: var(--panel-accent); }
body.atelier .batch-hint { color: var(--panel-muted); font-size: 13px; }
body.atelier .batch-item { border-color: var(--panel-line); background: #fff; padding: 16px; }
body.atelier .batch-item.active { border-color: #c0b5f1; background: #faf8ff; box-shadow: inset 3px 0 #6657df; }
body.atelier .batch-item em { font-size: 12px; color: var(--panel-muted); background: #f4f3f7; border-color: var(--panel-line); }
body.atelier .batch-item.active em { color: #5847cb; background: var(--panel-tint); border-color: #d9d2f7; }
body.atelier .batch-item.done em { color: #18745a; background: #e9f7f0; border-color: #c7e7d8; }
body.atelier .batch-item.state-error em { color: var(--panel-danger); background: var(--panel-danger-bg); border-color: #f1d1d5; }
body.atelier .batch-item.state-stopped em { color: #916322; background: #fff7e6; border-color: #eadbbb; }
body.atelier .batch-pair-row > i { background: #f5f3fb; border-color: #e6e1f3; color: #82769f; }
body.atelier .batch-pair-row small { color: var(--panel-muted); font-size: 11px; letter-spacing: .05em; }
body.atelier .batch-pair-row b { color: var(--panel-ink); font-size: 13px; }
body.atelier .batch-item-foot { border-color: var(--panel-line); color: var(--panel-muted); font-size: 12px; }
body.atelier .batch-dot { background: #9e9aac; }
body.atelier .active .batch-dot { background: #6657df; }
body.atelier .done .batch-dot { background: #18745a; }
body.atelier .state-error .batch-dot { background: var(--panel-danger); }
body.atelier .batch-add-dialog { background: #25263852; backdrop-filter: blur(6px); }
body.atelier .batch-add-card {
  padding: 28px;
  border-color: var(--panel-line);
  border-radius: 18px;
  background: #fff;
  color: var(--panel-ink);
  box-shadow: 0 24px 80px #20233026;
  font-family: var(--panel-font);
}
body.atelier .batch-add-head h2 { color: var(--panel-ink); font: 650 25px/1.3 var(--panel-font); letter-spacing: -.6px; }
body.atelier .batch-add-head button {
  border-color: var(--panel-line);
  border-radius: 10px;
  background: #faf9fc;
  color: var(--panel-muted);
}
body.atelier .batch-add-card > p { color: var(--panel-muted); font-size: 13px; line-height: 1.7; }
body.atelier .batch-file { padding: 16px; border-color: #ddd7ec; background: #fcfbfe; }
body.atelier .batch-file:hover,
body.atelier .batch-file:focus-within { border-color: #a899e5; background: #faf8ff; }
body.atelier .batch-file-heading { color: var(--panel-ink); font-size: 13px; }
body.atelier .batch-file-heading > b { color: #83729f; font-size: 11px; }
body.atelier .batch-file-preview { background: #f0edf8; }
body.atelier .batch-file-symbol { color: #9284bb; }
body.atelier .batch-file input { color: var(--panel-muted); font-size: 12px; }
body.atelier .batch-file input::file-selector-button {
  padding: 8px 10px;
  border-color: #d9d2ec;
  background: #fff;
  color: #5847cb;
  font-size: 12px;
}
body.atelier .batch-file > small { color: var(--panel-muted); font-size: 12px; }
body.atelier .batch-duration { border-color: var(--panel-line); background: #faf9fc; }
body.atelier .batch-duration b { color: var(--panel-ink); font-size: 13px; }
body.atelier .batch-duration small { color: var(--panel-muted); font-size: 12px; }
body.atelier .batch-duration input { accent-color: var(--panel-accent); }
body.atelier .batch-duration output { color: #5847cb; font-size: 14px; }
body.atelier .batch-add-card > .batch-pair-note { color: var(--panel-muted); font-size: 13px; }
body.atelier .batch-add-submit { background: var(--panel-accent); color: #fff; min-height: 48px; font-size: 14px; }
body.atelier .batch-add-submit:hover:not(:disabled) { background: #5746ce; }
body.atelier .batch-add-card > #batchAddError { color: var(--panel-danger); font-size: 13px; }

/* Processing state remains legible against the white workspace. */
body.atelier .side { padding: 22px; border-color: var(--panel-line); background: #fff; border-radius: 16px; }
body.atelier .progress-title .eyebrow { color: var(--panel-muted); font-size: 11px; letter-spacing: .08em; }
body.atelier .progress-title > span { padding: 5px 9px; color: #5847cb; background: var(--panel-tint); font-size: 12px; }
body.atelier .side li { color: var(--panel-muted); font-size: 13px; line-height: 1.6; }
body.atelier .side li i { background: #f7f6fb; border-color: #dedbe9; color: #817997; }
body.atelier .side li:not(:last-child)::after { background: #e5e0f2; }
body.atelier .side li.done { color: var(--panel-ink); }
body.atelier .side li.done i { background: #e9f7f0; border-color: #c7e7d8; color: #18745a; }
body.atelier .shutdown { border-color: var(--panel-line); }
body.atelier .shutdown b { color: var(--panel-ink); font-size: 13px; }
body.atelier .shutdown p { color: var(--panel-muted); font-size: 13px; line-height: 1.6; }
body.atelier #status {
  padding: 18px;
  border-color: #ddd6f7;
  border-radius: 12px;
  background: #f7f4ff;
  color: var(--panel-ink);
}
body.atelier #status b { font-size: 14px; }
body.atelier #status span { color: #6657df; font-size: 13px; }
body.atelier #status p { color: var(--panel-muted); font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
body.atelier #status button { min-height: 40px; background: #fff; border-color: #efd1d6; color: var(--panel-danger); font-size: 13px; }
body.atelier .system-health {
  margin: 20px 0 0;
  padding: 22px;
  border-color: var(--panel-line);
  border-radius: 16px;
  background: #fff;
  color: var(--panel-ink);
}
body.atelier .system-health-head b { font-size: 14px; font-weight: 600; }
body.atelier .system-health-head span { color: #18745a; font: 500 12px/1.5 var(--panel-font); }
body.atelier .system-health-grid { gap: 12px; margin-top: 18px; }
body.atelier .system-health-grid > div { padding: 4px 15px; background: transparent; border-color: var(--panel-line); }
body.atelier .system-health-grid small { color: var(--panel-muted); font: 500 11px/1.5 var(--panel-font); letter-spacing: .04em; }
body.atelier .system-health-grid strong { color: var(--panel-ink); font-size: 14px; font-weight: 600; }
body.atelier .system-health-grid em { color: var(--panel-muted); font-size: 12px; line-height: 1.6; }
body.atelier .system-health.warning { border-color: #ead9b8; background: #fffaf0; }
body.atelier .system-health.warning .system-health-head span { color: #916322; }
body.atelier .system-health.warning .system-health-grid > div { border-color: #eddfc5; }
body.atelier #comfyLiveProgress {
  padding: 17px 20px;
  border-color: #d9d2f5;
  border-radius: 14px;
  background: #fffffff2;
  color: var(--panel-ink);
  box-shadow: 0 10px 40px #2023301f;
  backdrop-filter: blur(16px);
}
body.atelier #comfyLiveProgress .comfy-live-head { font-size: 13px !important; line-height: 1.5; }
body.atelier #comfyLiveProgress .comfy-live-head span { flex-shrink: 0; color: #6657df; font-size: 13px; }
body.atelier #comfyLiveProgress .comfy-live-track { height: 6px; background: #ece8fb; }
body.atelier #comfyLiveProgress .comfy-live-track span { background: #6657df; }

/* Keyboard access, disabled controls, and visibility stay explicit. */
body.atelier :is(#historyPanel, .admin-users-dialog, .balance-history, .password-dialog, .account-notifications-dialog, .batch-add-dialog, .batch-queue, #status) :is(button, a, input, select, [tabindex]):focus-visible {
  outline: 2px solid #8f80e5;
  outline-offset: 3px;
}
body.atelier :is(.admin-users-dialog, .password-dialog, .account-notifications-dialog, .batch-add-dialog, .batch-queue, #historyPanel, #status) :is(button, input, select):disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
body.atelier :is(#historyPanel, .batch-queue, .batch-add-dialog, #status, #comfyLiveProgress)[hidden],
body.atelier :is(#historyPanel, .admin-users-dialog, .password-dialog, .balance-history, .account-notifications-dialog, .batch-add-dialog, .batch-queue, .side) [hidden] {
  display: none !important;
}
body.atelier dialog:not([open]) { display: none !important; }

@media (max-width: 760px) {
  body.atelier .system-health-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.atelier .system-health-head { align-items: flex-start; }
  body.atelier .system-health-head span { text-align: right; }
  body.atelier .billing-totals { grid-template-columns: 1fr; }
  body.atelier .full-calendar { padding: 16px; }
  body.atelier .full-calendar .calendar-grid { gap: 5px; }
  body.atelier .calendar-grid .calendar-cell { min-height: 82px; padding: 8px 5px; }
}
@media (max-width: 560px) {
  body.atelier #historyPanel .history-head { gap: 12px; margin-bottom: 20px; }
  body.atelier #historyPanel .history-head h2 { font-size: 24px; }
  body.atelier #historyPanel #historyClose { padding: 9px 12px; }
  body.atelier #historyPanel :is(.history-list, .cincong-history-grid) { grid-template-columns: 1fr; gap: 16px; }
  body.atelier .history-media a { height: 190px; }
  body.atelier .billing-summary { gap: 10px; }
  body.atelier :is(.billing-summary article, .billing-summary article + article) { padding: 17px 14px; }
  body.atelier .billing-summary strong { font-size: 27px; letter-spacing: -.7px; }
  body.atelier .billing-summary em { font-size: 18px; }
  body.atelier .billing-summary small { font-size: 10px; letter-spacing: .03em; }
  body.atelier .full-calendar { padding: 12px; }
  body.atelier .full-calendar .calendar-grid { gap: 3px; }
  body.atelier .calendar-grid .calendar-cell { min-height: 78px; padding: 7px 2px; font-size: 12px; text-align: center; border-radius: 7px; }
  body.atelier .calendar-grid .calendar-cell small { font-size: 10px; letter-spacing: -.2px; }
  body.atelier .calendar-nav strong { font-size: 16px; }
  body.atelier .calendar-week { font-size: 11px; }
  body.atelier :is(.password-dialog h2, .admin-users-head h2, .bh-heading h2, .account-notifications-form h2) { font-size: 23px; }
  body.atelier :is(.admin-users-card, .password-dialog, .account-notifications-form) { padding: 26px 20px; }
  body.atelier .admin-users-dialog.is-editing .admin-user-form { padding: 16px; }
  body.atelier .admin-user-form { grid-template-columns: minmax(0, 1fr); }
  body.atelier .admin-user-row { flex-wrap: wrap; align-items: flex-start; }
  body.atelier .admin-user-row small { flex-basis: 100%; order: 3; }
  body.atelier .admin-form-actions { flex-wrap: wrap; }
  body.atelier .balance-history { padding: 24px 18px; }
  body.atelier .bh-heading { align-items: flex-start; }
  body.atelier .bh-close { flex-shrink: 0; }
  body.atelier .bh-summary { padding: 18px; flex-direction: column; gap: 18px; }
  body.atelier .bh-current { font-size: 29px; overflow-wrap: anywhere; }
  body.atelier .bh-controls { gap: 6px; }
  body.atelier .bh-controls button { padding: 9px 11px; font-size: 12px; }
  body.atelier .bh-controls .bh-refresh { margin-left: 0; }
  body.atelier .bh-chart { padding: 2px; }
  body.atelier .batch-add-dialog { padding: 12px; }
  body.atelier .batch-add-card { padding: 22px 18px; }
  body.atelier .batch-add-head h2 { font-size: 23px; }
  body.atelier .batch-pair-inputs { gap: 10px; }
  body.atelier .batch-file { padding: 11px; }
  body.atelier .batch-file-heading { flex-wrap: wrap; gap: 4px 7px; }
  body.atelier .batch-file input::file-selector-button { display: block; margin: 0 0 7px; }
  body.atelier .batch-duration { display: grid; gap: 12px; }
  body.atelier .batch-duration label { min-width: 0; }
  body.atelier .batch-queue { padding: 16px; }
  body.atelier .batch-head { align-items: flex-start; }
  body.atelier .batch-item-top { flex-wrap: wrap; }
  body.atelier .system-health { padding: 18px; }
  body.atelier .system-health-grid { gap: 16px 8px; }
  body.atelier .system-health-grid > div { padding: 2px 10px; }
  body.atelier #comfyLiveProgress { bottom: 12px; padding: 14px 16px; }
}
@media (max-width: 380px) {
  body.atelier .billing-summary { grid-template-columns: 1fr; }
  body.atelier .batch-pair-inputs { grid-template-columns: 1fr; }
  body.atelier .system-health-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  body.atelier :is(.batch-progress > div, #comfyLiveFill, .admin-user-row, .admin-save) { transition: none; }
}