/* SCAIL Studio — dark workspace. UI only; state remains owned by existing modules. */
:root {
  color-scheme: dark;
  --bg: #101116; --surface: #191b24; --line: #303444;
  --text: #f1f2f7; --muted: #a1a6b7; --accent: #8b7af5;
  --studio-soft: #29233f; --studio-success: #79d7af;
}
body.atelier { background: var(--bg); color: var(--text); font: 14px/1.55 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
body.atelier * { scrollbar-color: #494e61 transparent; }
body.atelier ::selection { background: #29233f; color: #c2b7ff; }
body.atelier :is(button,a,input,select,textarea,summary):focus-visible { outline: 3px solid #65548b; 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: #191b24; 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: #c2b7ff; font-size: 19px; letter-spacing: -.65px; }
body.atelier .atelier-sidebar .brand small { color: #a1a6b7; font-size: 9px; letter-spacing: 1.6px; margin-top: 3px; }
body.atelier .atelier-sidebar .logo { width: 38px; height: 42px; color: #f1f2f7; background: #7862eb; border-radius: 12px; box-shadow: 0 4px 9px #00000018; }
body.atelier .atelier-nav-label { color: #a1a6b7; 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: #d6d9e5 !important; font-size: 13px; font-weight: 500; text-align: left; }
body.atelier .atelier-sidebar .atelier-create[aria-current=page] { background: #20232e !important; color: #c2b7ff !important; }
body.atelier .atelier-sidebar .history-toggle[aria-current=page] { background: #20232e !important; color: #c2b7ff !important; }
body.atelier .atelier-sidebar button:hover { background: #20232e !important; color: #c2b7ff !important; }
body.atelier .atelier-sidebar :is(#historyToggle,#billingTop,#adminUsersTop)::before { content: none; }
body.atelier .atelier-sidebar #logoutBtn { display: flex; border: 0 !important; color: #a1a6b7 !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 #303444; }
body.atelier .atelier-sidebar-note > span { color: #a1a6b7; font-size: 9px; font-weight: 600; letter-spacing: 1px; }
body.atelier .atelier-sidebar-note b { display: block; font-size: 12px; color: #c2b7ff; margin-top: 10px; }
body.atelier .atelier-sidebar-note p { font-family: inherit; font-size: 12px; font-style: normal; line-height: 1.75; color: #a1a6b7; 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 #303444; }
body.atelier .atelier-breadcrumb { display: block; color: #a1a6b7; font-size: 12px; margin-right: auto; }
body.atelier .atelier-header-tag { display: none; }
body.atelier .shell > header .runpod-balance { background: #191b24; color: #c2b7ff; border: 1px solid #303444; border-radius: 10px; padding: 9px 14px; box-shadow: 0 2px 3px #00000003; }
body.atelier .runpod-balance :is(span,small) { color: #a1a6b7; }
body.atelier .runpod-balance strong { color: #c2b7ff; }
body.atelier .page-intro { padding: 32px 0 24px; min-height: 0; background: none; }
body.atelier .page-intro .eyebrow { color: #a1a6b7; 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: #c2b7ff; margin: 0 0 10px; }
body.atelier .page-intro p:last-child { color: #a1a6b7; 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 #303444; border-radius: 12px; background: #191b24; color: #c2b7ff; text-align: left; box-shadow: 0 2px 4px #00000002; position: relative; }
body.atelier .workflow-switch-options button:hover { background: #20232e; border-color: #65548b; }
body.atelier .workflow-switch-options button[aria-pressed=true] { color: #c2b7ff; background: #20232e; border: 1px solid #65548b; box-shadow: inset 0 0 0 1px #0000001a; }
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: #7862eb; }
body.atelier .workflow-switch-icon { display: grid; place-items: center; width: 38px; height: 40px; flex: 0 0 38px; border-radius: 10px; color: #a1a6b7; background: #20232e; border: 1px solid #303444; }
body.atelier [aria-pressed=true] .workflow-switch-icon { color: #c2b7ff; background: #20232e; border-color: #303444; }
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: #a1a6b7; 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: #191b24; color: var(--text); border: 1px solid #303444; border-radius: 16px; box-shadow: 0 3px 6px #00000003; }
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: #c2b7ff; 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: #20232e; color: #c2b7ff; font: 10px/1 ui-monospace,monospace; }
body.atelier .section-label { font-size: 9px; letter-spacing: 1px; color: #a1a6b7; }
body.atelier .lead { font-size: 12px; line-height: 1.75; color: #a1a6b7; 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 #303444; border-radius: 11px; background: #20232e; gap: 13px; }
body.atelier .uploads .upload:hover { border-color: #65548b; background: #20232e; }
body.atelier .uploads .upload.ready { border-style: solid; background: #20232e; border-color: #356351; }
body.atelier .uploads .upload-icon { width: 38px; height: 40px; flex-basis: 38px; background: #20232e; border: 0; color: #c2b7ff; border-radius: 9px; }
body.atelier .uploads .upload b { font-size: 13px; font-weight: 550; color: #c2b7ff; }
body.atelier .uploads .upload small { color: #a1a6b7; font-size: 11px; margin-top: 4px; }
body.atelier .uploads .upload-add { display: block; color: #a1a6b7; }
body.atelier .upload-preview { height: 140px; background: #20232e; }
body.atelier .gpu-box, body.atelier .workflow-choice { margin-top: 24px; padding-top: 22px; border-color: #303444; background: transparent; }
body.atelier .cincong-gpu-time { color: #c2b7ff; 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 #303444; border-radius: 8px; color: #c2b7ff; background: #20232e; font-size: 12px; text-overflow: ellipsis; }
body.atelier :is(.cincong-gpu-time small,#videoGpuStatus) { color: #a1a6b7; font-size: 11px; line-height: 1.6; }
body.atelier :is(#videoGpuRefresh,#cincongGpuRefresh) { padding: 7px 0; border: 0; border-radius: 4px; color: #c2b7ff; background: transparent; font-size: 11px; font-weight: 500; }
body.atelier :is(#videoGpuRefresh,#cincongGpuRefresh):hover { color: #c2b7ff; text-decoration: underline; }
body.atelier .video-length { padding: 14px; border: 1px solid #303444; border-radius: 10px; background: #20232e; gap: 10px; }
body.atelier .video-length b { color: #d6d9e5; font-size: 12px; }
body.atelier .video-length small { color: #a1a6b7; font-size: 11px; line-height: 1.6; }
body.atelier #videoLength { color: #c2b7ff; background: #191b24; border-color: #303444; border-radius: 7px; width: 70px; }
body.atelier .video-length output { color: #c2b7ff; background: #20232e; border-color: #303444; }
body.atelier .duration-save-status { font-size: 11px; color: #a1a6b7; }
body.atelier .start, body.atelier .cincong-start { background: #7862eb; color: #f1f2f7; border: 1px solid #65548b; border-radius: 10px; min-height: 49px; font-size: 13px; font-weight: 600; padding: 15px 17px; box-shadow: 0 4px 8px #00000013; }
body.atelier .start:hover:not(:disabled), body.atelier .cincong-start:hover:not(:disabled) { background: #7862eb; border-color: #65548b; transform: none; box-shadow: 0 4px 10px #00000026; }
body.atelier .cincong-start :is(small,i) { color: #f1f2f7; }
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: #191b24; }
body.atelier .output-panel .section-heading h2 { font: 600 15px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color: #c2b7ff; }
body.atelier .output-panel .eyebrow { color: #a1a6b7; 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: #20232e; border: 1px solid #303444; border-radius: 12px; }
body.atelier .video-slide { padding: 30px; background: radial-gradient(ellipse at 50% 48%,#20232e70,transparent 68%),radial-gradient(#20232e26 .7px,transparent .7px),#20232e; background-size: auto,18px 18px,auto; }
body.atelier .video-slide:after { inset: 22px; border-color: #30344460; border-radius: 8px; pointer-events: none; }
body.atelier .preview-symbol { width: 76px; height: 90px; border-radius: 12px; background: #191b24; color: #c2b7ff; border: 1px solid #303444; box-shadow: 9px -9px 0 -1px #00000024,9px -9px 0 0 #00000024,0 10px 20px #00000019; 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: #c2b7ff; }
body.atelier .video-slide p { font-size: 12px; line-height: 1.7; color: #a1a6b7; max-width: 270px; }
body.atelier .video-slide .download-link { color: #f1f2f7; border-color: #65548b; background: #7862ebee; 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: #a1a6b7; }
body.atelier .slide-nav button.active, body.atelier .cincong-tabs button.active { background: #20232e; color: #c2b7ff; border: 0; }
body.atelier .side { padding: 18px 22px; background: #191b24; border-color: #303444; }
body.atelier .progress-title .eyebrow { color: #a1a6b7; font-size: 9px; }
body.atelier .progress-title > span { color: #a1a6b7; background: #20232e; padding: 3px 7px; font-size: 10px; }
body.atelier .side ol { margin: 17px 0; }
body.atelier .side li { color: #a1a6b7; font-size: 11px; }
body.atelier .side li i { background: #20232e; border: 1px solid #303444; color: #a1a6b7; }
body.atelier .side li:not(:last-child):after { background: #20232e; }
body.atelier .side li:nth-last-child(1 of :not([hidden]))::after { display: none; }
body.atelier .side li.done { color: #79d7af; }
body.atelier .side li.done i { background: #20232e; border-color: #356351; color: #79d7af; }
body.atelier .shutdown { display: block; border-top: 1px solid #303444; padding-top: 12px; }
body.atelier .shutdown b { color: #a1a6b7; font-size: 11px; font-weight: 600; }
body.atelier .shutdown p { color: #a1a6b7; 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: #a1a6b7; font-size: 9px; }
body.atelier .cincong-panel-title em { background: #20232e; border: 1px solid #303444; color: #a1a6b7; font-size: 10px; }
body.atelier .cincong-prompt > span { color: #d6d9e5; font-size: 12px; }
body.atelier .cincong-prompt textarea { min-height: 178px; width: 100%; padding: 15px; border: 1px solid #303444; border-radius: 9px; background: #20232e; color: #c2b7ff; font-size: 13px; line-height: 1.75; resize: vertical; }
body.atelier .cincong-prompt textarea::placeholder { color: #a1a6b7; opacity: 1; }
body.atelier .cincong-prompt > small { color: #a1a6b7; font-size: 10px; }
body.atelier .cincong-settings > div { padding: 12px 8px; background: #20232e; border-color: #303444; border-radius: 8px; }
body.atelier .cincong-settings :is(small,span) { color: #a1a6b7; font-size: 10px; }
body.atelier .cincong-settings b { color: #d6d9e5; font-size: 12px; }
body.atelier .cincong-seed, body.atelier .cincong-model-slot { background: #20232e; border-color: #303444; color: #d6d9e5; border-radius: 9px; }
body.atelier .cincong-seed b { color: #d6d9e5; font-size: 11px; }
body.atelier .cincong-seed small { color: #a1a6b7; font-size: 9px; }
body.atelier .cincong-seed-controls :is(button,input) { background: #191b24; color: #a1a6b7; border-color: #303444; font-size: 11px; }
body.atelier .cincong-seed-controls button[aria-pressed=true] { background: #20232e; border-color: #303444; color: #c2b7ff; }
body.atelier .cincong-seed-controls button span { background: #7862eb; }
body.atelier .cincong-model-slot :is(b,small,em) { color: #a1a6b7; }
body.atelier .cincong-model-slot b { font-size: 12px; }
body.atelier .cincong-model-slot em { font-size: 11px; color: #a1a6b7; }
body.atelier .cincong-model-plus { background: #20232e; color: #a1a6b7; }
body.atelier .cincong-model-slot.has-file .cincong-model-plus { background: #20232e; border-color: #303444; color: #79d7af; }
body.atelier .cincong-run-status { font-size: 12px; color: #a1a6b7; }
body.atelier .cincong-output { position: sticky; top: 22px; }
body.atelier .cincong-canvas { min-height: 440px; border: 1px solid #303444; border-radius: 12px; background: radial-gradient(ellipse at 50% 48%,#20232e70,transparent 68%),radial-gradient(#20232e26 .7px,transparent .7px),#20232e; background-size: auto,18px 18px,auto; }
body.atelier .cincong-canvas-orbit { width: 76px; height: 90px; border-radius: 12px; background: #191b24; color: #c2b7ff; border: 1px solid #303444; box-shadow: 9px -9px 0 -1px #00000024,9px -9px 0 0 #00000024,0 10px 20px #00000019; }
body.atelier .cincong-canvas-orbit span { color: #a1a6b7; font-size: 29px; }
body.atelier .cincong-canvas b { font: 550 15px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color: #c2b7ff; }
body.atelier .cincong-canvas p { font-size: 12px; color: #a1a6b7; line-height: 1.7; }
body.atelier .cincong-output-meta span { background: #20232e; border-color: #303444; color: #a1a6b7; font-size: 10px; }
body.atelier .cincong-result-image { background: #20232e; border-radius: 10px; }
body.atelier .cincong-downloads button { color: #c2b7ff; background: #20232e; border-color: #303444; border-radius: 8px; font-size: 12px; }
body.atelier .adam-workflow-preview { background: #20232e; border: 1px solid #303444; }
body.atelier .adam-workflow-preview :is(h2,p) { color: #d6d9e5; }
body.atelier .adam-workflow-preview :is(button,.adam-preview-flow span) { background: #20232e; border-color: #303444; color: #a1a6b7; }
body.atelier .adam-preview-badge { background: #20232e; color: #c2b7ff; }
body.atelier .adam-preview-symbol { color: #a1a6b7; }
body.atelier .atelier-logs, body.atelier .atelier-markets { border-color: #303444; }
body.atelier .atelier-logs > summary, body.atelier .atelier-markets > summary { color: #a1a6b7; font-size: 12px; }
body.atelier .atelier-photo-log { color: #d6d9e5; border-color: #303444; background: #20232e; 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: #303444; font-size: 10px; }
body.atelier .site-footer span { color: #a1a6b7; }
body.atelier .site-footer .site-footer-brand { color: #a1a6b7 !important; }
body.atelier .solana-widget { background: #191b24; border-color: #303444; }
body.atelier .solana-widget :is(.solana-title,.solana-meta,.solana-note) { color: #a1a6b7; }
/* 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: #20232e; 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: #c2b7ff; }
.login-wordmark span { display: inline-block; margin-left: 12px; vertical-align: middle; color: #a1a6b7; 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 #303444; box-shadow: 0 16px 40px #0000000e; }
.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: #20232e; color: #a1a6b7; transform: rotate(-10deg); }
.login-art-front { left: 172px; top: 40px !important; background: #191b24; color: #a1a6b7; transform: rotate(8deg); }
.login-art-front div { position: absolute; bottom: 20px; left: 18px; right: 18px; height: 5px; background: #20232e; border-radius: 5px; }
.login-overview h2 { color: #f1f2f7; font-size: 31px; letter-spacing: -.8px; font-weight: 550; line-height: 1.3; }
.login-overview > p { max-width: 360px; margin: 16px 0 24px; color: #a1a6b7; 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 #303444; border-radius: 6px; color: #a1a6b7; background: #20232e; font-size: 10px; }
body.atelier .login-card { width: 100%; max-width: 430px; padding: 38px; border-radius: 18px; background: #191b24; border: 1px solid #303444; box-shadow: 0 15px 55px #00000006; }
body.atelier .login-card .login-kicker { margin: 0 0 12px; color: #a1a6b7; font-size: 9px; letter-spacing: 2px; }
body.atelier .login-card h1 { color: #f1f2f7; font: 600 30px/1.3 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; letter-spacing: -.8px; }
body.atelier .login-card p { color: #a1a6b7; font-size: 13px; margin-bottom: 30px; }
body.atelier .login-card label { display: block; font-size: 12px; color: #a1a6b7; margin: 20px 0 7px; }
body.atelier .login-card input { margin: 0; min-height: 48px; background: #20232e; border-color: #303444; border-radius: 9px; font-size: 13px; color: #d6d9e5; }
body.atelier .login-card input::placeholder { color: #a1a6b7; opacity: 1; }
body.atelier .login-card button { display: flex; justify-content: center; gap: 13px; margin-top: 26px; min-height: 48px; color: #f1f2f7; background: #7862eb; border-radius: 9px; font-size: 13px; }
body.atelier .login-card button:hover { background: #7862eb; }
body.atelier .login-card #loginError { color: #ff9ca9; font-size: 12px; }
.login-privacy { color: #a1a6b7; font-size: 10px; line-height: 1.7; text-align: center; margin-top: 26px; }
/* Small functional text keeps adequate contrast on the dark 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: #a1a6b7; }
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: #a1a6b7; }
body.atelier :is(.shutdown p,.side li,.cincong-panel-title small,.output-panel .eyebrow,.cincong-seed small,.cincong-panel-title em) { color: #a1a6b7; }
body.atelier .login-card p, .login-overview > p, .login-privacy { color: #a1a6b7; }
body.atelier .login-card input::placeholder { color: #a1a6b7; }
.login-features span { color: #a1a6b7; }
@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 #303444; }
  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: #20232e; border: 1px solid #303444; color: #a1a6b7; 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; } }

/* Graphite surfaces, quiet violet accents; image and video colors stay untouched. */
body.atelier .atelier-sidebar { background: #15161d; }
body.atelier .atelier-sidebar :is(.atelier-create,.history-toggle)[aria-current=page] { background: #29233f !important; color: #c2b7ff !important; }
body.atelier .atelier-sidebar button:hover { background: #24212f !important; color: #e5dfff !important; }
body.atelier .workflow-switch-options button[aria-pressed=true] { background: #252134; color: #d2c7ff; border-color: #7762ae; }
body.atelier .workflow-switch-options button:hover { background: #22242f; }
body.atelier .workflow-switch-icon { background: #232631; color: #a1a6b7; }
body.atelier [aria-pressed=true] .workflow-switch-icon { background: #332944; color: #c2b7ff; }
body.atelier .uploads .upload { background: #15171f; border-color: #3b3e51; }
body.atelier .uploads .upload:hover { background: #211d30; border-color: #7d6bc0; }
body.atelier .uploads .upload.ready { background: #17352c; border-color: #356351; }
body.atelier :is(.cincong-prompt textarea,.cincong-gpu-time select,#videoGpuType,#videoLength,.login-card input,.cincong-seed-controls input) { background: #12141c; color: #e8eaf2; border-color: #343848; }
body.atelier :is(.cincong-prompt textarea,.login-card input)::placeholder { color: #898fa3; }
body.atelier .start,body.atelier .cincong-start,body.atelier .login-card button { background: #7862eb; border-color: #917bf8; color: #fff; }
body.atelier .start:hover:not(:disabled),body.atelier .cincong-start:hover:not(:disabled),body.atelier .login-card button:hover { background: #6953da; }
body.atelier :is(.video-track,.cincong-canvas,.upload-preview,.cincong-result-image) { background-color: #12141b; }
body.atelier .video-slide,body.atelier .cincong-canvas { background: radial-gradient(ellipse at 50% 48%,#37284545,transparent 68%),radial-gradient(#b8adcf1a .7px,transparent .7px),#13151d; background-size: auto,18px 18px,auto; }
body.atelier :is(.preview-symbol,.cincong-canvas-orbit) { background: #24212f; color: #b9a6e8; border-color: #504162; box-shadow: 9px -9px 0 -1px #1d1c27,9px -9px 0 0 #3b334e,0 12px 28px #0003; }
body.atelier :is(.video-slide b,.cincong-canvas b) { color: #d6cced; }
body.atelier .slide-nav button.active,body.atelier .cincong-tabs button.active { background: #29233f; color: #c2b7ff; }
body.atelier .login-gate { background: radial-gradient(ellipse at 15% 30%,#29213980,transparent 55%),#101116; }
body.atelier .login-card { background: #191b24; border-color: #303444; box-shadow: 0 24px 70px #0004; }
.login-art-back { background: #29233f; color: #b7a2dc; }
.login-art-front { background: #20232e; color: #c8b5e7; }
.login-wordmark,.login-overview h2 { color: #f1f2f7; }
body.atelier .side li.done { color: #79d7af; }
body.atelier .login-card #loginError { color: #ff9ca9; }