:root{--spruce-950:#102822;--spruce-900:#173b31;--spruce-800:#245542;--moss-500:#70a47b;--moss-200:#dcebd8;--amber-400:#f0bf5a;--paper-50:#fcfbf4;--paper-100:#f4f1e3;--paper-200:#e9e3cf;--ink-950:#14211e;--ink-600:#65736d;--line:#d9d7c9;--shadow:0 16px 45px rgba(31,48,39,.12)}*{box-sizing:border-box}body{min-height:100vh;background:var(--paper-100);color:var(--ink-950);font-family:"Microsoft YaHei","PingFang SC","Segoe UI",sans-serif}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.42;background-image:linear-gradient(90deg,rgba(23,59,49,.028) 1px,transparent 1px),linear-gradient(rgba(23,59,49,.022) 1px,transparent 1px);background-size:24px 24px;mask-image:linear-gradient(to bottom,black,transparent 78%)}header{position:fixed;z-index:30;inset:0 auto 0 0;width:242px;height:100vh;padding:34px 18px;display:flex;flex-direction:column;align-items:stretch;gap:34px;background:linear-gradient(165deg,var(--spruce-950),var(--spruce-900));border:0;color:#f7f4e8;box-shadow:8px 0 28px rgba(8,27,22,.18)}header>strong{margin:0;font-size:22px;letter-spacing:.04em;line-height:1.25;color:#fff}header>strong:after{content:"像素素材工作台";display:block;margin-top:8px;color:#a8c4ad;font-size:11px;font-weight:500;letter-spacing:.1em}header nav{position:static;transform:none;display:grid;gap:8px;margin:0}header .nav{display:flex;align-items:center;gap:10px;justify-content:flex-start;width:100%;min-height:44px;padding:0 13px;border:1px solid transparent;border-radius:9px;background:transparent;color:#bfd4c0;font-weight:650;box-shadow:none;transition:background .18s ease,color .18s ease,transform .18s ease}header .nav:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.5}header .nav:hover{background:rgba(222,240,220,.08);color:#fff;transform:translateX(3px)}header .nav.active{background:var(--paper-50);color:var(--spruce-900);box-shadow:0 8px 18px rgba(0,0,0,.14)}header .nav.active:before{background:var(--amber-400);opacity:1}.wide{position:relative;z-index:1;width:auto!important;max-width:none!important;margin:0 0 0 242px!important;padding:34px 44px 56px!important}.page.active{animation:page-in .38s cubic-bezier(.22,.75,.22,1) both}.workflow{max-width:1420px;margin:0 auto 22px!important}.workflow-head{height:auto;margin:0 0 12px!important;padding:0 2px;color:var(--ink-600);font-weight:650;letter-spacing:.12em}.workflow-head strong:before{content:"WORKFLOW /";margin:0 8px 0 0;color:var(--moss-500);font-size:10px}.remove-workflow{border:0!important;background:transparent!important;color:#9b756c!important;font-size:20px!important}.generate-workspace{display:grid!important;grid-template-columns:minmax(360px,1.03fr) minmax(330px,.94fr) minmax(285px,.74fr)!important;gap:0!important;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--paper-50);box-shadow:var(--shadow)}.generate-workspace>.panel{height:610px!important;min-height:0!important;margin:0!important;padding:25px!important;overflow:auto;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;animation:none!important}.generate-workspace>.panel+.panel{border-left:1px solid var(--line)}.form-panel{background:linear-gradient(165deg,#fffef8,#f6f3e7)!important}.candidate-panel{background:var(--paper-50)!important}.processed-panel{background:linear-gradient(155deg,#f1f6ee,#faf9f1)!important}.form-panel form{gap:16px}.form-panel .two{gap:10px}.form-panel label,.form-panel .label{font-size:12px;letter-spacing:.04em}.form-panel input,.form-panel textarea{border:1px solid #d5d5c7;border-radius:7px;background:#fffef9;box-shadow:none}.form-panel input:focus,.form-panel textarea:focus{border-color:var(--moss-500);box-shadow:0 0 0 3px rgba(112,164,123,.12)}.field-title{font-size:13px!important}.polish{border-color:#e7c86e!important;background:#fff8dd!important;color:#7c5f1a!important}.form-panel fieldset{padding:12px!important;border-color:#d7ddce!important;border-radius:9px!important;background:rgba(255,255,255,.45)}.form-panel legend{color:var(--ink-600);font-size:11px;letter-spacing:.1em}.preset-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}.preset{min-height:48px!important;display:flex!important;align-items:center;padding:8px!important;border-color:#d6ddcf!important;border-radius:7px!important;background:#fffef9!important}.preset:has(input:checked){background:#edf5eb!important;border-color:var(--moss-500)!important;box-shadow:inset 0 0 0 1px var(--moss-500)}.preset strong{font-size:12px!important}.dropzone{padding:10px!important;border-color:#b9d1bb!important;background:#f3f8f0!important}.generate{min-height:46px;border-radius:8px!important;background:var(--spruce-800)!important;border-color:var(--spruce-800)!important;box-shadow:0 8px 15px rgba(36,85,66,.16)}.heading{margin:0 0 18px!important;padding:0 0 14px!important;border-bottom:1px solid var(--line)!important}.heading h2{font-size:17px!important}.workflow-status{color:var(--ink-600)!important}.candidate-panel .candidates.empty{height:510px!important;border:0!important;background:transparent!important;place-content:center}.candidate-panel .candidates.empty:before{content:""!important;width:58px;height:58px;border:1px solid var(--moss-200);border-radius:50%;background:conic-gradient(var(--moss-500) 0 25%,transparent 25% 100%);mask:radial-gradient(transparent 55%,#000 57%);animation:orbit 1.5s linear infinite}.candidate-panel .candidate img{max-height:410px;object-fit:contain;border:1px solid #e0e2d7;border-radius:10px;background-color:#f5f5ef;box-shadow:0 12px 24px rgba(34,53,42,.12)}.transform-actions{gap:6px!important}.transform-actions button{border-radius:7px!important;font-size:11px!important}.candidate .process{height:42px;border-radius:7px!important;background:var(--spruce-800)!important}.processed-panel{display:flex!important;flex-direction:column}.processed-panel .export-result{margin:auto 0!important}.processed-panel .preview{width:min(100%,260px)!important;margin:0 auto 16px!important;border:1px solid #d5dfd2!important;border-radius:11px!important;box-shadow:0 10px 21px rgba(45,79,60,.11)!important}.processed-panel .actions{justify-content:center!important}.processed-panel .actions button{border-radius:7px!important;font-size:12px!important}.add-workflow{max-width:1420px!important;height:48px!important;margin:16px auto 0!important;border:1px dashed #a6c5a8!important;border-radius:10px!important;background:rgba(252,251,244,.7)!important;color:var(--spruce-800)!important;transition:background .2s ease,transform .2s ease}.add-workflow:hover{background:#fffef9!important;transform:translateY(-2px)}.centered-panel{max-width:1420px!important;margin:0 auto!important;border:1px solid var(--line)!important;border-radius:16px!important;background:var(--paper-50)!important;box-shadow:var(--shadow)!important}.centered-panel .heading{display:flex;align-items:center;justify-content:space-between}.centered-panel .heading h1{font-size:24px;letter-spacing:.02em}.asset-library{grid-template-columns:repeat(auto-fill,minmax(var(--asset-size,168px),1fr))!important;gap:13px!important}.asset-library article{padding:0!important;border:1px solid #d8ddd2!important;border-radius:10px!important;background:#f8f9f1!important;overflow:hidden;box-shadow:none!important}.asset-library article:hover{transform:translateY(-3px)!important;border-color:var(--moss-500)!important;box-shadow:0 12px 24px rgba(38,79,57,.12)!important}.asset-library img{padding:13px!important;background:linear-gradient(135deg,#f3f4e9,#fffdf7)!important}.asset-library strong{padding:0 11px 11px;font-size:12px}.composer-panel{max-width:1420px!important;min-height:710px!important}.composer-toolbar{display:flex!important;align-items:end!important;gap:12px!important;padding:14px!important;border:1px solid #dce3d8!important;border-radius:10px!important;background:#f7f8f0!important}.composer-toolbar label{width:118px!important}.composer-toolbar .zoom-control{width:220px!important}.composer{height:570px!important;grid-template-columns:280px minmax(0,1fr)!important;gap:14px!important}.composer aside{padding:14px!important;border:1px solid #dce3d8!important;border-radius:10px!important;background:#f5f8f1!important}.atlas-wrap{min-height:0!important;padding:20px!important;border:1px solid #dce3d8!important;border-radius:10px!important;background-size:32px 32px!important}.atlas-grid{box-shadow:0 10px 30px rgba(38,67,48,.09)}#pixel-editor{border:1px solid var(--line)!important;border-radius:15px!important;box-shadow:0 30px 70px rgba(12,30,23,.28)!important}.editor-head{border-color:var(--line)!important}.swatch{transition:transform .12s ease}.swatch:hover{transform:scale(1.18)}@keyframes page-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes orbit{to{transform:rotate(360deg)}}@media(max-width:1120px){header{width:74px;padding:22px 10px}header>strong{font-size:0;text-align:center}header>strong:before{content:"喵";font-size:23px}header>strong:after{display:none}header .nav{justify-content:center;padding:0;font-size:0}header .nav:before{width:11px;height:11px}.wide{margin-left:74px!important;padding:26px!important}.generate-workspace{grid-template-columns:1fr 1fr!important}.processed-panel{grid-column:1/-1!important}.composer{grid-template-columns:230px minmax(0,1fr)!important}}@media(max-width:720px){header{position:sticky;top:0;width:100%;height:62px;padding:0 14px;flex-direction:row;gap:14px}header>strong{font-size:17px;white-space:nowrap}header>strong:before{display:none}header>strong:after{display:none}header nav{display:flex;gap:4px;margin-left:auto}header .nav{width:auto;min-height:34px;padding:0 8px;font-size:11px}header .nav:before{display:none}.wide{margin:0!important;padding:16px!important}.generate-workspace{grid-template-columns:1fr!important}.generate-workspace>.panel{height:auto!important;min-height:460px!important}.generate-workspace>.panel+.panel{border-left:0!important;border-top:1px solid var(--line)}.composer{height:auto!important;grid-template-columns:1fr!important}.atlas-wrap{min-height:440px!important}}
/* Full-width desktop work surface: keep interaction on the page, not inside nested scroll panes. */
@media (min-width: 1121px) {
  .wide {
    display: block !important;
    grid-template-columns: none !important;
    width: calc(100vw - 242px) !important;
    max-width: none !important;
    margin: 0 0 0 242px !important;
    padding: 34px 38px 56px !important;
  }

  #page-generate, #workflow-list, #workflow-list .workflow {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  #workflow-list .workflow { margin: 0 0 22px !important; }

  .generate-workspace {
    width: 100% !important;
    max-width: none !important;
    grid-template-columns: minmax(360px, .72fr) minmax(420px, 1.06fr) minmax(320px, .82fr) !important;
    align-items: stretch !important;
  }

  .generate-workspace > .panel, .form-panel, .candidate-panel, .processed-panel, .form-panel form {
    height: auto !important;
    min-height: 0 !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .generate-workspace > .panel { min-height: 610px !important; }
  .candidate-panel .candidates.empty { height: auto !important; min-height: 430px !important; }
  .add-workflow { width: 100% !important; max-width: none !important; }
}

@media (min-width: 1121px) and (max-width: 1450px) {
  .generate-workspace {
    grid-template-columns: minmax(310px, .72fr) minmax(340px, 1.06fr) minmax(270px, .82fr) !important;
  }
}

/* At browser zoom levels that enter the compact breakpoint, preserve the three-stage workflow. */
@media (min-width: 721px) and (max-width: 1120px) {
  .wide {
    display: block !important;
    grid-template-columns: none !important;
  }

  .generate-workspace {
    grid-template-columns: minmax(290px, .72fr) minmax(320px, 1.06fr) minmax(260px, .82fr) !important;
  }

  .generate-workspace > .panel {
    height: auto !important;
    min-height: 610px !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .processed-panel { grid-column: auto !important; }
}

/* Workbench switcher in the left studio rail. */
header > strong{display:none}.workbench-brand{position:relative;margin:0;color:#fff}.workbench-brand:after{content:attr(data-subtitle);display:block;margin-top:8px;color:#a8c4ad;font-size:11px;font-weight:500;letter-spacing:.1em}.workbench-switch{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0;border:0;background:transparent;color:#fff;font:inherit;font-size:22px;font-weight:700;letter-spacing:.04em;line-height:1.25;text-align:left;cursor:pointer}.workbench-switch-mark{font-size:16px;color:#b6d0ba;transition:transform .16s ease}.workbench-switch[aria-expanded="true"] .workbench-switch-mark{transform:rotate(180deg)}.workbench-menu{position:absolute;z-index:40;top:calc(100% + 14px);left:0;width:206px;padding:6px;border:1px solid rgba(185,211,188,.2);border-radius:10px;background:#fbfbf6;box-shadow:0 18px 38px rgba(4,19,14,.3)}.workbench-menu button{display:grid;width:100%;gap:3px;padding:10px;border:0;border-radius:7px;background:transparent;color:#214031;text-align:left;cursor:pointer}.workbench-menu button:hover,.workbench-menu button.active{background:#e7f0e5}.workbench-menu b{font-size:13px}.workbench-menu small{color:#69806d;font-size:11px}
header > strong{display:none}.workbench-brand{position:relative;margin:0;color:#fff}.workbench-brand:after{content:none}.workbench-switch{display:grid;grid-template-columns:36px minmax(0,1fr) 20px;align-items:center;gap:10px;width:100%;min-height:76px;padding:10px;border:1px solid rgba(183,211,190,.16);border-radius:11px;background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.025));color:#fff;text-align:left;cursor:pointer;transition:border-color .16s ease,background .16s ease,transform .16s ease}.workbench-switch:hover,.workbench-switch[aria-expanded="true"]{border-color:rgba(209,232,213,.38);background:linear-gradient(135deg,rgba(142,184,150,.18),rgba(255,255,255,.055));transform:translateY(-1px)}.workbench-switch-glyph{display:grid;grid-template-columns:repeat(2,1fr);gap:3px;width:34px;height:34px;padding:5px;border-radius:9px;background:#d6af54;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 5px 13px rgba(0,0,0,.16)}.workbench-switch-glyph i{display:block;border-radius:2px;background:#244836}.workbench-switch-copy{display:grid;gap:2px;min-width:0}.workbench-switch-copy small{color:#a9c5af;font-size:10px;font-weight:700;letter-spacing:.12em}.workbench-switch-copy b{overflow:hidden;color:#fff;font-size:15px;letter-spacing:.01em;text-overflow:ellipsis;white-space:nowrap}.workbench-switch-copy em{overflow:hidden;color:#bed0c1;font-size:11px;font-style:normal;text-overflow:ellipsis;white-space:nowrap}.workbench-switch-mark{justify-self:end;color:#d5e6d6;font-size:15px;transition:transform .16s ease}.workbench-switch[aria-expanded="true"] .workbench-switch-mark{transform:rotate(180deg)}.workbench-menu{position:absolute;z-index:40;top:calc(100% + 10px);left:0;width:100%;padding:9px;border:1px solid rgba(185,211,188,.28);border-radius:12px;background:#f7f8f2;box-shadow:0 18px 38px rgba(4,19,14,.34)}.workbench-menu p{margin:2px 5px 7px;color:#718474;font-size:10px;font-weight:700;letter-spacing:.12em}.workbench-menu button{display:grid;grid-template-columns:30px minmax(0,1fr) 16px;align-items:center;gap:8px;width:100%;min-height:56px;padding:8px;border:1px solid transparent;border-radius:8px;background:transparent;color:#214031;text-align:left;cursor:pointer;transition:background .14s ease,border-color .14s ease}.workbench-menu button+button{margin-top:3px}.workbench-menu button:hover{background:#edf3ea}.workbench-menu button.active{border-color:#b7d0b9;background:#e2eee0}.workbench-menu button>span:nth-child(2){display:grid;gap:3px;min-width:0}.workbench-menu b{font-size:12px}.workbench-menu small{overflow:hidden;color:#6c806f;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.workbench-menu strong{visibility:hidden;justify-self:end;color:#397052;font-size:13px}.workbench-menu button.active strong{visibility:visible}.workbench-option-icon{display:grid;place-items:center;width:28px;height:28px;border-radius:7px;background:#dcebd9}.workbench-option-icon.pixel{grid-template-columns:repeat(2,1fr);gap:2px;padding:5px;background:#e8cf91}.workbench-option-icon.pixel i{width:100%;height:100%;border-radius:1px;background:#416c50}.workbench-option-icon.image:before{content:"";width:15px;height:12px;border:2px solid #3e7357;border-radius:3px;background:linear-gradient(145deg,transparent 46%,#6fa77a 47% 61%,transparent 62%)}