/* Colorful paper atelier: vivid framing, clean artwork surfaces. */
:root {
  --navy:#0f3d2e; --ink:#0f3d2e; --muted:#66718a; --orange:#f16c61; --orange-2:#de4d53;
  --lime:#ffdd67; --blue:#0f5c43; --cream:#edf3ee; --white:#fff;
  --line:#e3dccb; --gold:#ffc969;
  --shadow:0 24px 70px rgba(40,30,10,.10);
}
body {
  background-color:#edf3ee;
  background-image:url('../assets/backgrounds/studio-vibrant-v1.png');
  background-position:center top;
  background-size:cover;
  background-attachment:fixed;
  color:var(--ink);
}
button:focus-visible,textarea:focus-visible,summary:focus-visible {outline:3px solid #ffb936;outline-offset:3px}
.nav {height:74px;background:rgba(255,255,255,.91);border-bottom:1px solid rgba(40,30,10,.65);box-shadow:0 6px 20px rgba(40,30,10,.05);backdrop-filter:blur(15px)}
.nav-in {max-width:1480px}
.brand {font-size:17px;letter-spacing:.01em}
.brandmark {width:42px;height:42px;border-radius:12px;background:linear-gradient(145deg,#0f5c43,#0f5c43);box-shadow:0 6px 16px rgba(15,92,67,.23);transform:none}
.brandmark svg {width:30px;height:30px}
.logo-fold,.logo-spark {stroke:#ffdc72}.logo-pencil {fill:#ff816b}
.navlinks {gap:3px;padding:4px;background:#efe9dc;border-radius:12px}
.navlink {border-radius:9px;font-weight:800;padding:8px 17px}
.navlink.on,.navlink:hover {background:#fffdf9;box-shadow:0 2px 9px rgba(29,28,49,.07)}
.pillinfo,.service-state {background:#fffdf9;border-color:#e8e3df;color:#777989}
.service-state i,.result-state i {background:#65a693;box-shadow:0 0 0 4px rgba(40,30,10,.15)}
.app-shell {max-width:1480px;padding-top:28px}
.intro {
  display:grid;grid-template-columns:minmax(0,1fr) minmax(390px,46%);
  position:relative;isolation:isolate;min-height:360px;margin:0 0 22px;padding:35px 3.8% 35px 5%;
  align-items:center;gap:34px;border-radius:30px;overflow:hidden;
  background:linear-gradient(118deg,#fffefa 0%,#fffefa 46%,#edf3ee 100%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 26px 65px rgba(15,92,67,.13);
}
.intro::before {content:"";position:absolute;width:210px;height:210px;left:-116px;top:-132px;border:30px solid #ffdf67;border-radius:50%;z-index:-1}
.intro::after {content:"";position:absolute;width:145px;height:145px;left:48%;bottom:-118px;border:26px solid #ff806f;border-radius:50%;z-index:-1}
.intro>div:first-child {max-width:670px;z-index:2}
.intro .eyebrow {display:flex;align-items:center;gap:10px;color:#0f5c43;letter-spacing:.08em;font-size:11px;font-weight:900;margin-bottom:20px}
.hero-eyebrow-mark {display:grid;place-items:center;width:25px;height:25px;background:#ffdc6c;border-radius:8px;color:#0b4834;font-size:15px}
.intro .eyebrow i {width:18px;background:#e3dccb}.intro .eyebrow span:last-child {color:#9a6a47}
.intro h1 {color:#1d1b16;font-family:"Microsoft YaHei","微软雅黑","PingFang SC",sans-serif;font-weight:900;font-size:clamp(43px,4vw,61px);line-height:1.15;letter-spacing:-.045em;text-wrap:balance}
.intro h1 em {color:#ee6357;font-weight:900;font-style:normal;position:relative;white-space:nowrap}
.intro h1 em::after {content:"";position:absolute;left:2%;right:1%;bottom:-7px;height:9px;border-radius:8px;background:#ffda70;z-index:-1;transform:rotate(-1deg)}
.intro p {max-width:560px;color:#6f6a5e;font-size:14px;line-height:1.9;margin-top:20px}
.hero-features {display:flex;flex-wrap:wrap;gap:7px;margin-top:17px}.hero-features span {padding:6px 11px;border-radius:100px;background:#edf3ee;color:#0b4834;font-size:11px;font-weight:800}
.hero-cta {display:inline-flex;align-items:center;gap:22px;margin-top:21px;padding:11px 17px 11px 20px;background:#0b4834;border-radius:12px;color:#fff;font-size:13px;font-weight:900;box-shadow:0 9px 20px rgba(15,92,67,.18)}
.hero-cta:hover {background:#1d1b16;transform:translateY(-1px)}.hero-cta span {font-size:19px;line-height:1}
.hero-gallery {position:relative;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:10px;flex:none;width:100%;height:294px;margin:0;padding:15px;background:linear-gradient(140deg,#0f5c43,#6f6a5e);border-radius:23px;z-index:1;box-shadow:0 16px 32px rgba(15,92,67,.20)}
.hero-gallery-head {grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;margin:0 2px;color:#fff;font-size:10px;font-weight:850;letter-spacing:.07em}.hero-gallery-head b {color:#ffde81;font:900 11px Georgia,serif}
.hero-art {position:relative;width:auto;aspect-ratio:auto;overflow:hidden;background:#fff;border:4px solid #fff;border-radius:10px;box-shadow:0 5px 14px rgba(40,30,10,.2);transform:none;opacity:1}
.hero-art img {width:100%;height:100%;object-fit:contain;display:block}
.hero-art span {position:absolute;left:8px;bottom:8px;padding:4px 7px;background:rgba(255,255,255,.92);color:#2a2720;border-radius:6px;font-size:9px;font-weight:850}
.hero-art-front {height:100%;box-shadow:0 8px 19px rgba(40,30,10,.25)}
.hero-mini-row {display:grid;grid-template-rows:1fr 1fr;gap:10px;min-height:0}.hero-mini-row .hero-art {height:100%;min-height:0}.hero-mini-row .hero-art span {font-size:8px}
.hero-art-back,.hero-art-mid {top:auto;left:auto;right:auto}
.studio {grid-template-columns:minmax(310px,386px) minmax(0,1fr);gap:20px}
.panel,.stagecol {border-radius:26px;box-shadow:0 15px 48px rgba(15,92,67,.12)}
.panel {
  top:89px;background:rgba(255,255,255,.97);color:var(--ink);border:1px solid #e3dccb;
  padding:26px;scrollbar-color:#d2c9bd transparent;
}
.panel-head h2 {font-size:22px;color:#0f3d2e}.panel-head p {color:#888896}
.step-no {border:1px solid #d9d0c1;color:#a97556;background:#f9f3e9}
.prompt-field textarea {background:#f7f4ef;color:#0f3d2e;border:1px solid #e3ddd5;border-radius:15px}
.prompt-field textarea:focus {background:#fff;border-color:#c9a56a;box-shadow:0 0 0 4px rgba(201,165,106,.12)}
.prompt-field textarea::placeholder,.input-count {color:#9999a2}
.quick-row>span {color:#8b8c98}
.quick-row button {background:#f5f1eb;color:#696d82;border:1px solid #e9e2d8}
.quick-row button:hover {background:#f4dfbd;color:#0f3d2e}
.setting-block {padding-top:21px}
.plabel {color:#0f3d2e;font-weight:850}.plabel b {color:#b88355}.plabel em {color:#9c9ba4}
.language-grid {display:grid;grid-template-columns:1fr 1fr;gap:9px}.language-grid button {padding:12px 10px;border:1px solid #e3dccb;border-radius:13px;background:#edf3ee;color:#6f6a5e;text-align:left}.language-grid button b,.language-grid button small {display:block}.language-grid button b {font-size:12px}.language-grid button small {margin-top:3px;color:#6f6a5e;font-size:9.5px}.language-grid button.on {border-color:#0f5c43;background:#efe9dc;color:#0b4834;box-shadow:inset 0 0 0 1px #0f5c43}.language-grid button.on small {color:#6f6a5e}
.seg {background:#f1eee9}.seg button {color:#777988}.seg button.on {background:#0f3d2e;color:#fff;box-shadow:0 3px 10px rgba(30,30,55,.13)}
.pnote {color:#92919a}
.type-grid button {background:#f7f4ef;color:#6e7182;border:1px solid #e8e1d7}
.type-grid button.on {background:#fff5df;border-color:#d9b77d;color:#0f3d2e;box-shadow:inset 0 0 0 1px #d9b77d}
.quality-grid button {background:#f7f4ef;color:#6c6f81;border:1px solid #e8e1d7}
.quality-grid button.on {background:#0f5c43;color:#fff;border-color:#0f5c43;box-shadow:0 7px 16px rgba(15,92,67,.22)}
.quality-grid button.on span {color:#f1d4a0}
.ratio-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ratio-grid button {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:78px;padding:8px 4px;text-align:center;border:1px solid #e3dccb;border-radius:13px;background:#edf3ee;color:#6f6a5e;text-align:left}
.ratio-grid button.on {border-color:#0f5c43;background:#efe9dc;color:#0b4834;box-shadow:inset 0 0 0 1px #0f5c43}
.ratio-grid button b,.ratio-grid button small {display:block;white-space:nowrap}.ratio-grid button b {font-size:12px}.ratio-grid button small {font-size:10px;margin-top:2px;color:#6f6a5e}
.ratio-icon {display:block;flex:none;border:2px solid currentColor;border-radius:3px;background:#fff;box-shadow:2px 2px 0 rgba(15,92,67,.13)}.ratio-icon {height:20px}[data-ratio="3:2"] .ratio-icon {width:30px}[data-ratio="4:3"] .ratio-icon {width:27px}[data-ratio="16:9"] .ratio-icon {width:35px}[data-ratio="2:3"] .ratio-icon,[data-ratio="3:4"] .ratio-icon,[data-ratio="9:16"] .ratio-icon {width:18px}[data-ratio="2:3"] .ratio-icon {height:27px}[data-ratio="3:4"] .ratio-icon {height:24px}[data-ratio="9:16"] .ratio-icon {height:32px}
.ratio-hint {margin-top:8px;color:#79849a;font-size:10px;line-height:1.5}
.price-line {color:#a55f45;font-size:11.5px}
.price-disclaimer {color:#92919a}
.advanced {border-color:#e6dfd4}.advanced summary {color:#5f6276}.advanced summary::after,.advanced summary span {color:#aaa5a4}
.advanced .plabel {color:#0f3d2e}.lcard {background:#f7f4ef;border-color:#e6e0d6}.lcard .ln {color:#727689}.lcard.on {border-color:#cda66f;background:#fff8e9}.lcard.on .ln {color:#9f6443}
.sw {box-shadow:0 0 0 1px #ddd7cf}.sw.on {box-shadow:0 0 0 2px #fff,0 0 0 4px #b77c5e}
.generate-btn {background:linear-gradient(105deg,#f15b63,#ff8a4c);border-radius:14px;box-shadow:0 12px 24px rgba(234,87,96,.23)}
.generate-btn:hover {background:linear-gradient(105deg,#e94c58,#f4773d)}.generate-btn small {color:#fff4ec}.safe-note {color:#9997a1}.safe-note span {color:#5b9b81}
.typo-note {display:flex;align-items:flex-start;gap:7px;margin-top:12px;padding:10px 12px;border-radius:10px;background:#fff1f0;color:#b42318;font-size:11px;line-height:1.65;border:1px solid #fda29b;font-weight:600}.typo-note a {color:#b42318;text-decoration:underline;font-weight:800}
.panel>.typo-note {grid-column:1/-1}
.typo-note>span:first-child {display:grid;place-items:center;flex:none;width:15px;height:15px;margin-top:1px;border-radius:50%;background:#d92d20;color:#fff;font-size:10px;font-weight:900}.typo-note .typo-copy {display:inline;width:auto;height:auto;margin:0;background:none;color:inherit;border-radius:0;font:inherit}
.preview-typo {margin-top:15px}
.stagecol {background:rgba(255,255,255,.97);border:1px solid #e3dccb;padding:25px}
.preview-head h2 {font-size:24px}.result-state {color:#568c79}.metaline {color:#898b97}
.icon-btn {background:#f2eee8}.icon-btn:hover {background:#0f3d2e}
.result-tabs {background:#f2eee8;border-radius:12px}.result-tab {color:#777a8b}.result-tab.on {background:#fffdfa;box-shadow:0 3px 10px rgba(32,29,48,.08)}
.canvas-shell {background:#ece9e5;border:1px solid #e9e3dd;border-radius:17px}
.canvas-toolbar {color:#797987;border-bottom-color:#ded9d3}.canvas-card {box-shadow:0 16px 39px rgba(27,25,40,.14)}
.poster-pending {background:linear-gradient(145deg,#fcf8ef,#e3dccb);border-color:#d5c4ae}.pending-mark {background:#0f3d2e;color:#e8c987}
.generation-cover {background:rgba(244,241,235,.95)}.gen-orbit i:nth-child(3) {background:#d6ad68}
.tool-btn,.btn {background:#f2eee8;color:#4f5267}.tool-btn:hover,.btn:hover {background:#e9e3db}
.btn.primary {background:#0f5c43;color:#fff}.btn.primary:hover {background:#0b4834}
.btn.color-action {background:#f9e9e3;color:#a85e49}
.pack {background:#faf7f3;border-color:#e7e0d8}.value-strip {background:#e6e0d8;border-color:#e6e0d8;border-radius:22px}
.value-strip>div {background:#fffdfa}.value-strip span {color:#b77b5e}.value-strip b {color:#0f3d2e}
.gcard {border:1px solid #e6e0d8}.gthumb {background:#f5f1ed}
.gallery-head {max-width:1320px;margin:26px auto 20px;padding:37px 4% 32px;min-height:220px;align-items:center;background:linear-gradient(108deg,#efe9dc,#fffefa 65%);border:1px solid #fff;border-radius:25px;box-shadow:0 15px 40px rgba(40,30,10,.08)}
.gallery-head .eyebrow {color:#0f5c43;font-weight:900}.gallery-head h1 {font-family:"Microsoft YaHei","微软雅黑",sans-serif;font-size:clamp(31px,3.6vw,46px);font-weight:900;color:#1d1b16;line-height:1.18}.gallery-head p {max-width:650px;font-size:14px;line-height:1.8}
.gallery-head-art {flex:none;width:175px;height:175px;padding:7px;margin-right:4%;background:#fff;border:6px solid #ffdb70;border-radius:24px;transform:rotate(7deg);box-shadow:0 13px 26px rgba(40,30,10,.16)}.gallery-head-art img {width:100%;height:100%;object-fit:contain}
.color-create {display:grid;grid-template-columns:1fr 1fr;gap:17px;margin-bottom:39px}.create-card {display:flex;flex-direction:column;gap:9px;min-width:0;min-height:225px;padding:23px;background:#fff;border:1px solid #e3dccb;border-radius:21px;box-shadow:0 12px 31px rgba(40,30,10,.08)}
.create-card:first-child {background:linear-gradient(135deg,#fff,#edf3ee)}.upload-card {background:linear-gradient(135deg,#fff,#fff7e8)}
.create-icon {display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:#0f5c43;color:#fff;font-size:18px}.upload-card .create-icon {background:#ef8a41}
.create-kicker,.section-kicker {color:#0f5c43;font-size:10px;font-weight:900;letter-spacing:.09em}.upload-card .create-kicker {color:#c87338}.create-card h2 {margin-top:5px;color:#2a2720;font-size:20px;font-weight:900}.create-card p {margin-top:5px;color:#6f6a5e;font-size:12px;line-height:1.6}.create-card small {color:#6f6a5e;font-size:10px;line-height:1.5}
.create-control {display:flex;gap:8px;margin-top:auto}.create-control input {min-width:0;flex:1;border:1px solid #e3dccb;background:#fff;border-radius:10px;padding:11px 12px;color:#0f3d2e;font-size:12px}.create-control button {flex:none;padding:0 14px;border-radius:10px;background:#0f5c43;color:#fff;font-size:12px;font-weight:900}.create-control button:hover {background:#0b4834}
.upload-control {display:flex;align-items:center;justify-content:space-between;gap:7px;margin-top:auto;padding:9px 10px 9px 13px;background:#fff;border:1px dashed #e2bb80;border-radius:11px;color:#7d8291;font-size:11px}.upload-control button {padding:8px 12px;border-radius:8px;background:#f18b48;color:#fff;font-size:11px;font-weight:900;white-space:nowrap}.upload-control button:hover {background:#df713a}.upload-control:hover {border-color:#e88741}
.outline-mode-label {display:flex;align-items:center;justify-content:space-between;gap:12px;color:#6b7590;font-size:11px;font-weight:800}.outline-mode-label select {max-width:72%;padding:8px 10px;background:#fff;border:1px solid #e1c897;border-radius:9px;color:#2a2720;font:inherit}
.gallery-nav {display:flex;align-items:end;justify-content:space-between;gap:22px;margin-bottom:21px}.gallery-nav h2 {margin-top:5px;color:#1d1b16;font-size:26px;font-weight:900}.gallery-nav p {margin-top:3px;color:#6f6a5e;font-size:12px}.gallery-filters {display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}.gallery-filters button {padding:8px 12px;border-radius:99px;border:1px solid #e3dccb;background:#fff;color:#6f6a5e;font-size:11px;font-weight:800}.gallery-filters button.on {background:#0f5c43;border-color:#0f5c43;color:#fff}
.ggroup {margin-bottom:30px}.ggroup h3 {color:#2a2720}.ggroup .gd {color:#6f6a5e}.gcard {text-align:left;box-shadow:0 7px 21px rgba(40,30,10,.07)}.gthumb {background:#fff;border:1px solid #efe9dc}.gthumb img {border-radius:10px}.gname {color:#2a2720}.gmeta {display:block;margin-top:3px;color:#6f6a5e;font-size:10px}.gcard[data-source="ai"] {border-color:#e3dccb}.gcard[data-source="ai"] .gmeta {color:#0f5c43}
.colorstage {border-color:#e6e0d8}.ctools {background:linear-gradient(145deg,#0f3d2e,#0f3d2e);box-shadow:0 20px 50px rgba(32,31,51,.15)}
.colorstage canvas {width:auto;max-width:100%;height:auto;margin:0 auto}
.ctools .btn.primary {background:#d2856d}.ctools .btn.primary:hover {background:#b96850}
.cfrom,.chelp {color:#c2c0cb}.crayon.on {box-shadow:0 0 0 2px #0f3d2e,0 0 0 4px #e6c18a}
#toast {background:rgba(34,36,58,.96)}
@media(max-width:1100px) {.intro {grid-template-columns:minmax(0,1fr) minmax(325px,43%);gap:18px}.intro h1 {font-size:clamp(39px,4.2vw,54px)}.hero-gallery {height:245px}}
@media(max-width:900px) {.intro {display:block;min-height:0;padding:35px}.hero-gallery {display:none}.studio {grid-template-columns:1fr}.panel {top:auto;max-height:none}.intro h1 {font-size:clamp(40px,6vw,56px)}}
@media(max-width:720px) {
  .nav {height:60px}.nav-in {gap:10px}.brandmark {width:37px;height:37px}.brand {font-size:14px}.brand span:last-child {display:inline}
  .app-shell {padding-top:14px}.intro {padding:29px 25px 30px;margin-bottom:14px;border-radius:22px}.intro::before {left:-150px;top:-140px}
  .intro h1 {font-size:clamp(35px,9vw,49px)}.intro p {font-size:12.5px;margin-top:13px;line-height:1.75}
  .intro h1 em {white-space:normal}.hero-features {margin-top:13px}.hero-cta {margin-top:17px}
  .gallery-head {margin:14px 14px 18px;padding:27px 23px;min-height:0}.gallery-head-art {display:none}.color-create {grid-template-columns:1fr}.gallery-nav {display:block}.gallery-filters {justify-content:flex-start;margin-top:15px}
  .eyebrow {font-size:9px;letter-spacing:.09em}.panel,.stagecol {border-radius:19px;padding:18px}.value-strip {border-radius:17px}
  .navlinks {margin-left:auto}.navlink {padding:7px 9px;font-size:12px}.service-state {display:none}
}
@media(max-width:390px) {.brand span:last-child {display:none}.navlink {padding:7px 6px}.intro h1 {font-size:34px}.intro {padding:27px 21px}.quality-grid button b {font-size:16px}.create-control {flex-direction:column}.create-control button {min-height:38px}}