/* Dark is the starting theme; the original palette remains available as light. */
:root[data-theme="dark"]{color-scheme:dark;--paper:#0b1210;--ink:#ecf3e9;--line:#2a3d32}
:root[data-theme="dark"] body{background:#0b1210;color:#ecf3e9}
:root[data-theme="dark"] .topbar{border-color:#26372d}
:root[data-theme="dark"] .brand-mark span{background:#e9f1e4}
:root[data-theme="dark"] .brand-mark span:nth-child(2){background:#cde77e}
:root[data-theme="dark"] .topbar-label,:root[data-theme="dark"] .eyebrow,:root[data-theme="dark"] .section-kicker,:root[data-theme="dark"] .section-count,:root[data-theme="dark"] .result-kicker{color:#8fa694}
:root[data-theme="dark"] .intro h1 em{color:#b3d576}
:root[data-theme="dark"] .intro-copy,:root[data-theme="dark"] .intro-aside p,:root[data-theme="dark"] .section-help{color:#a4b5a5}
:root[data-theme="dark"] .intro-aside{border-color:#314536}
:root[data-theme="dark"] .server-pill{background:#17231b;border-color:#304934;color:#cadcc5}
:root[data-theme="dark"] .server-pill.ready i{box-shadow:0 0 0 3px #28472b}
:root[data-theme="dark"] .editor-panel{background:#15211a;border-color:#2c4032;box-shadow:0 16px 45px rgba(0,0,0,.18)}
:root[data-theme="dark"] .step-badge{background:#29402e;color:#c5df8a}
:root[data-theme="dark"] .field-heading p,:root[data-theme="dark"] .file-name{color:#8ba090}
:root[data-theme="dark"] .dropzone{background:#19291f;border-color:#48624a}
:root[data-theme="dark"] .dropzone:hover,:root[data-theme="dark"] .dropzone.dragging,:root[data-theme="dark"] .dropzone:focus-visible{background:#203725;border-color:#a0c46b}
.upload-preview{object-fit:contain;background:#19291f}
:root[data-theme="dark"] .upload-icon{background:#28442d;color:#cae58c}
:root[data-theme="dark"] .drop-empty strong{color:#dbebd7}
:root[data-theme="dark"] .drop-empty small{color:#8da58d}
:root[data-theme="dark"] .prompt-section,:root[data-theme="dark"] .size-section{border-color:#314637}
:root[data-theme="dark"] textarea{background:#19291f;border-color:#3b5540;color:#eff5eb}
:root[data-theme="dark"] textarea::placeholder{color:#829a84}
:root[data-theme="dark"] textarea:focus{border-color:#a6c875;box-shadow:0 0 0 4px rgba(166,200,117,.13)}
:root[data-theme="dark"] #char-count,:root[data-theme="dark"] .size-section>div:first-child span,:root[data-theme="dark"] .action-note{color:#8ba28d}
:root[data-theme="dark"] .size-options label span{background:#1b2a20;border-color:#3b5540;color:#ccdecb}
:root[data-theme="dark"] .size-options label small{color:#99b29b}
:root[data-theme="dark"] .size-options input:checked+span{background:#334b2d;border-color:#9cbe64;color:#e7f4cf}
:root[data-theme="dark"] .primary-button:disabled{background:#304133;border-color:#304133;color:#93a991}
:root[data-theme="dark"] .result-panel{background:#101c16;border:1px solid #2d4132;box-shadow:0 18px 50px rgba(0,0,0,.2)}
:root[data-theme="dark"] .footer{color:#6e8575}

.theme-toggle{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;border:1px solid #dce1d6;background:#fafbf7;color:#526b45;font-size:19px;line-height:1;transition:background .2s,border-color .2s}
.theme-toggle:hover{border-color:#9dbb77}
:root[data-theme="dark"] .theme-toggle{background:#1d3022;border-color:#3b5840;color:#d9ef9e}

.prompt-section{margin-top:16px;padding-top:0;border-top:0}
.prompt-toggle-row{display:flex;align-items:center;gap:10px;min-height:42px;cursor:pointer}
.prompt-toggle-row input{position:absolute;opacity:0;pointer-events:none}
.toggle-box{display:flex;align-items:center;width:31px;height:19px;border-radius:12px;background:#dce4d5;padding:3px;transition:background .2s}
.toggle-box span{display:block;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0002;transition:transform .2s}
.prompt-toggle-row input:checked+.toggle-box{background:#a7c866}
.prompt-toggle-row input:checked+.toggle-box span{transform:translateX(12px)}
.prompt-toggle-row input:focus-visible+.toggle-box{outline:2px solid #90b967;outline-offset:3px}
.prompt-toggle-text{display:flex;align-items:baseline;gap:9px;flex:1}
.prompt-toggle-text strong{font-family:Manrope,sans-serif;font-size:13px}
.prompt-toggle-text small{font-size:11px;color:#91a092}
.toggle-chevron{font-size:21px;color:#90a391;transition:transform .2s}
.prompt-section.expanded .toggle-chevron{transform:rotate(180deg)}
.prompt-section #prompt-body .section-help{margin:5px 0 10px}
.prompt-section textarea{min-height:74px}
:root[data-theme="dark"] .toggle-box{background:#405943}
:root[data-theme="dark"] .toggle-box span{background:#eaf2e2}
:root[data-theme="dark"] .prompt-toggle-text small{color:#8fa592}

/* Keep the full workflow visible without scrolling at common laptop sizes. */
.page-shell{max-width:1510px;padding:0 32px}
.topbar{height:62px}
.intro{padding:21px 0 18px}
.intro h1{font-size:clamp(32px,3.4vw,48px);letter-spacing:-2.7px;margin:9px 0 7px}
.intro h1 br{display:none}
.intro-copy{font-size:13px;line-height:1.45}
.intro-aside{margin:0}
.intro-aside p{font-size:12px;line-height:1.5;margin:5px 0 0}
.workspace{gap:14px}
.editor-panel{padding:20px}
.section-heading h2,.result-header h2{font-size:20px;margin-top:4px}
.section-help{margin:7px 0 12px;line-height:1.4}
.field-heading{min-height:32px;margin-bottom:7px}
.dropzone{height:166px}
.file-name{margin-top:5px}
.upload-icon{width:38px;height:38px;margin-bottom:0}
.upload-icon svg{width:22px}
.drop-empty{gap:5px}
.size-section{margin-top:11px;padding:10px 0}
.action-row{margin-top:12px}
.primary-button{padding:12px 15px}
.result-panel{min-height:0;height:100%;padding:19px}
.result-stage{flex:none;height:360px;min-height:360px;margin-top:14px}
.result-stage.has-result{display:flex;align-items:center;justify-content:center}
.result-stage.has-result .result-image{height:100%;min-height:0;max-height:100%;object-fit:contain}
.result-empty h3{font-size:17px}
.result-orbit{width:82px;height:82px;margin-bottom:15px}
.result-orbit:after{inset:25px}
.result-footer{min-height:46px}
.privacy-note{padding-top:10px}
.footer{padding:14px 0}

@media(max-width:850px){
  .result-panel:before{display:none}
  .result-stage.has-result{display:flex;align-items:center;justify-content:center}
  .result-stage.has-result .result-image{height:100%;min-height:0;max-height:100%;object-fit:contain}
  .page-shell{padding:0 16px}
  .topbar{height:52px}
  .brand{font-size:22px}
  .topbar-right{gap:7px}
  .server-pill{padding:6px 8px;font-size:10px}
  .theme-toggle{height:30px;width:30px;font-size:16px}
  .intro{padding:11px 0 10px}
  .eyebrow{display:none}
  .intro h1{font-size:27px;letter-spacing:-1.35px;margin:0;line-height:1.2}
  .intro-copy{display:none}
  .workspace{gap:9px}
  .editor-panel,.result-panel{padding:12px;border-radius:15px}
  .editor-panel .section-heading h2{font-size:16px}
  .section-kicker,.section-count{display:none}
  .section-help{font-size:10px;margin:4px 0 9px}
  .upload-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .field-heading{gap:6px;min-height:32px;margin-bottom:6px}
  .step-badge{width:24px;height:24px;min-width:24px;border-radius:7px;font-size:9px}
  .field-heading h3{font-size:10px;line-height:1.2;margin:0}
  .field-heading p{display:none}
  .dropzone{height:124px;border-radius:10px}
  .drop-empty{padding:7px;gap:4px}
  .drop-empty strong{font-size:10px;line-height:1.25}
  .drop-empty small{font-size:9px;line-height:1.2}
  .upload-icon{width:29px;height:29px;border-radius:8px}
  .upload-icon svg{width:18px}
  .replace-label{bottom:5px;right:5px;padding:5px 6px;font-size:9px}
  .file-name{font-size:9px;margin-top:3px;height:12px}
  .prompt-section{margin-top:5px}
  .prompt-toggle-row{min-height:31px}
  .prompt-toggle-text strong{font-size:11px}
  .prompt-toggle-text small{font-size:9px}
  .prompt-section #prompt-body .section-help{display:none}
  .prompt-section textarea{min-height:62px;height:62px;padding:8px 10px 18px;font-size:11px}
  .prompt-section .textarea-wrap{margin:2px 0 5px}
  .size-section{margin-top:4px;padding:6px 0;align-items:center;flex-direction:row}
  .size-section>div:first-child span{display:none}
  .size-section strong{font-size:10px}
  .size-options label span{padding:6px 7px;font-size:10px}
  .size-options label small{font-size:9px}
  .action-row{margin-top:8px}
  .action-note{display:none}
  .primary-button{padding:10px 12px;min-height:38px;font-size:12px}
  .result-panel{min-height:0;height:auto}
  .result-header h2{font-size:16px}
  .result-kicker{display:none}
  .result-status{padding:5px 8px;font-size:9px}
  .result-stage{flex:none;min-height:160px;height:160px;margin-top:8px;border-radius:10px}
  .result-orbit{width:44px;height:44px;margin-bottom:8px}
  .result-orbit:before{inset:8px}
  .result-orbit:after{inset:16px}
  .result-empty,.result-working{padding:8px}
  .result-empty h3,.result-working h3{font-size:12px;line-height:1.25;margin-bottom:3px}
  .result-empty p,.result-working p{font-size:10px}
  .working-ring{height:36px;width:36px;margin-bottom:8px}
  .progress-track{margin-top:8px;width:115px}
  .result-footer{min-height:28px;font-size:9px}
  .download-button{padding:5px 7px;font-size:9px}
  .privacy-note,.footer{display:none}
}

@media(max-width:410px){
  .page-shell{padding:0 10px}
  .intro h1{font-size:25px}
  .dropzone{height:112px}
  .result-stage{height:190px;min-height:190px}
}

@media(max-height:740px) and (max-width:850px){
  .intro{padding:7px 0}
  .intro h1{font-size:22px}
  .dropzone{height:95px}
  .result-stage{height:118px;min-height:118px}
  .result-empty p{display:none}
}