@import url('/static/vendor/css/fonts.css?v=2026.05.22.1');
:root { --page:#f5f4f1; --panel:#ffffff; --card:#ffffff; --soft:#f2f1ee; --soft-2:#e8e7e3; --line:#e4e3df; --line-2:#cfcdc6; --text:#1a1917; --muted:#6b675f; --faint:#98948a; --strong:#1a1917; --strong-text:#f7f5f0; --accent:#8f6f2e; --accent-soft:#f3eddd; --accent-line:#d9c9a0; --danger:#b3372f; --danger-soft:#f9efec; --success:#35855a; --shadow:rgba(12,10,6,.12); --font-ui:"Inter","PingFang SC","Microsoft YaHei",sans-serif; --font-display:"Space Grotesk","Inter","PingFang SC","Microsoft YaHei",sans-serif; --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,monospace; --r-sm:3px; --r-md:6px; --r-lg:10px; }
.theme-dark { --page:#0b0b0d; --panel:#131316; --card:#1a1a1e; --soft:#202024; --soft-2:#28282e; --line:#2c2c33; --line-2:#45454e; --text:#f2efe8; --muted:#a8a294; --faint:#6f6a5e; --strong:#d8b878; --strong-text:#191510; --accent:#d4b57a; --accent-soft:rgba(212,181,122,.12); --accent-line:rgba(212,181,122,.30); --danger:#e07856; --danger-soft:rgba(224,120,86,.14); --success:#7fbf8e; --shadow:rgba(0,0,0,.4); }
*{box-sizing:border-box} body{margin:0;min-height:100vh;background:var(--page);color:var(--text);font-family:var(--font-ui);-webkit-font-smoothing:antialiased} button,input,textarea,select{font:inherit} button,a{-webkit-tap-highlight-color:transparent}
.playground-page{width:min(1380px,calc(100% - 48px));margin:0 auto;padding:25px 0 40px}.playground-topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:28px;padding:10px 0 25px;border-bottom:1px solid var(--line)}.playground-brand{display:flex;align-items:flex-start;gap:14px}.playground-back{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--muted)}.playground-back:hover{color:var(--accent);border-color:var(--accent-line)}.playground-back svg{width:17px;height:17px}.playground-eyebrow,.section-kicker{color:var(--accent);font-size:10px;font-weight:800;letter-spacing:.13em}.playground-brand h1{margin:3px 0 0;font:800 30px/1.15 var(--font-display)}.playground-brand p{margin:8px 0 0;color:var(--muted);font-size:13px}.playground-top-actions{display:flex;gap:8px}.playground-link-btn,.quiet-action,.upload-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--muted);font-size:12px;font-weight:700;text-decoration:none;cursor:pointer}.playground-link-btn:hover,.quiet-action:hover,.upload-btn:hover{color:var(--text);border-color:var(--line-2);background:var(--soft)}.playground-link-btn svg,.quiet-action svg,.upload-btn svg{width:15px;height:15px}
.playground-layout{display:grid;grid-template-columns:minmax(330px,420px) minmax(0,1fr);gap:18px;padding-top:18px}.playground-compose,.playground-results{min-width:0;border:1px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:0 7px 22px var(--shadow)}.playground-compose{padding:20px}.playground-results{padding:20px;min-height:610px}.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px}.section-head h2{margin:3px 0 0;font:800 22px/1.15 var(--font-display)}.provider-status,.result-meta{color:var(--faint);font-size:11px;padding-top:4px;text-align:right}.field-label{display:flex;flex-direction:column;gap:6px;margin-top:13px;color:var(--muted);font-size:12px;font-weight:700}.field-label select,.field-label textarea{width:100%;border:1px solid var(--line);border-radius:9px;outline:0;background:var(--soft);color:var(--text);padding:9px 10px;font-size:13px;font-weight:500}.field-label select:focus,.field-label textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.field-label textarea{line-height:1.55;resize:vertical}.prompt-input-wrap{position:relative}.prompt-input-wrap textarea{padding-right:44px;padding-bottom:44px}.prompt-optimize-btn{position:absolute;right:8px;bottom:8px;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:7px;background:var(--card);color:var(--accent);cursor:pointer}.prompt-optimize-btn:hover{border-color:var(--accent-line);background:var(--accent-soft)}.prompt-optimize-btn:focus-visible,.quiet-action:focus-visible,.playground-link-btn:focus-visible,.result-save-btn:focus-visible,.result-card-foot a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.prompt-optimize-btn:disabled{opacity:.6;cursor:wait}.prompt-optimize-btn.is-loading svg{animation:playground-spin .9s linear infinite}.prompt-optimize-btn svg{width:15px;height:15px}.prompt-tools{display:flex;align-items:center;justify-content:space-between;margin-top:5px;color:var(--faint);font-size:10px}.quiet-action{min-height:26px;padding:0 8px;font-size:10px}.settings-grid{display:grid;grid-template-columns:1.3fr 1fr .85fr;gap:8px}.settings-grid .field-label{margin-top:13px}.reference-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px}.reference-head .field-label{margin:0}.reference-head small{display:block;margin-top:3px;color:var(--faint);font-size:10px;font-weight:500}.upload-btn{min-height:30px;padding:0 9px;font-size:11px}.reference-list{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:9px;min-height:70px}.reference-empty{grid-column:1/-1;display:flex;align-items:center;justify-content:center;border:1px dashed var(--line-2);border-radius:9px;color:var(--faint);font-size:11px}.reference-item{position:relative;aspect-ratio:1;border:1px solid var(--line);border-radius:8px;background:var(--soft);overflow:hidden}.reference-item img{width:100%;height:100%;display:block;object-fit:cover}.reference-remove{position:absolute;top:4px;right:4px;width:22px;height:22px;border:0;border-radius:7px;background:rgba(22,26,22,.72);color:#fff;cursor:pointer}.reference-remove svg{width:13px;height:13px}.generate-btn{width:100%;height:43px;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:18px;border:1px solid var(--strong);border-radius:10px;background:var(--strong);color:var(--strong-text);cursor:pointer;font-size:13px;font-weight:800}.generate-btn:hover{filter:brightness(1.07);transform:translateY(-1px)}.generate-btn:disabled{opacity:.55;cursor:wait;transform:none}.generate-btn svg{width:17px;height:17px}.compose-error{margin-top:10px;padding:9px 11px;border-radius:8px;background:var(--danger-soft);color:var(--danger);font-size:11px;line-height:1.5}.task-strip{margin:-4px 0 15px;padding:9px 11px;border-radius:9px;background:var(--accent-soft);color:var(--accent);font-size:11px;font-weight:700}.result-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:12px}.result-empty{grid-column:1/-1;min-height:440px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;color:var(--faint);text-align:center}.result-empty svg{width:34px;height:34px;padding:7px;border-radius:11px;background:var(--accent-soft);color:var(--accent)}.result-empty strong{color:var(--text);font-size:14px}.result-empty span{font-size:11px}.result-card{overflow:hidden;border:1px solid var(--line);border-radius:11px;background:var(--card)}.result-card img{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:var(--soft);cursor:zoom-in}.result-card-foot{display:flex;align-items:center;justify-content:space-between;gap:7px;padding:8px 9px}.result-card-foot span{color:var(--muted);font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.result-card-actions{display:flex;align-items:center;gap:9px;flex-shrink:0}.result-card-foot a,.result-save-btn{display:inline-flex;align-items:center;justify-content:center;color:var(--accent)}.result-save-btn{padding:0;border:0;background:transparent;cursor:pointer}.result-save-btn:hover{color:var(--text)}.result-card-foot svg{width:14px;height:14px}.result-save-btn:disabled{opacity:.55;cursor:wait}.image-lightbox{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(22,26,22,.7)}.image-lightbox[hidden]{display:none}.lightbox-panel{position:relative;width:min(900px,94vw);max-height:92vh;padding:16px;border-radius:14px;background:var(--card)}.lightbox-panel>img{display:block;max-width:100%;max-height:78vh;margin:auto;object-fit:contain}.lightbox-close{position:absolute;top:10px;right:10px;width:32px;height:32px;border:1px solid rgba(255,255,255,.35);border-radius:8px;background:rgba(0,0,0,.5);color:#fff;cursor:pointer}.lightbox-close svg{width:16px;height:16px}.lightbox-actions{display:flex;justify-content:center;gap:8px;padding-top:12px;flex-wrap:wrap}.lightbox-actions .playground-link-btn:disabled{opacity:.55;cursor:wait}.playground-toast{position:fixed;left:50%;bottom:24px;z-index:40;transform:translate(-50%,12px);padding:10px 16px;border-radius:10px;opacity:0;pointer-events:none;background:var(--strong);color:var(--strong-text);box-shadow:0 12px 28px var(--shadow);font-size:12px;font-weight:700;transition:opacity .2s ease,transform .2s ease}.playground-toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:900px){.playground-page{width:min(100% - 30px,680px);padding-top:16px}.playground-topbar{flex-direction:column}.playground-top-actions{width:100%}.playground-top-actions>*{flex:1}.playground-layout{grid-template-columns:1fr}.playground-results{min-height:420px}.result-empty{min-height:280px}}
@media(max-width:520px){.settings-grid{grid-template-columns:1fr 1fr}.settings-grid .field-label:last-child{grid-column:1/-1}.playground-brand h1{font-size:25px}}

/* ============================================================
   曜黑鎏金 · Obsidian & Champagne 覆盖区（2026-09-01 重设计）
   设计系统见项目根 DESIGN.md。
   ============================================================ */
.playground-brand h1,.section-head h2 { font-weight:700; letter-spacing:-0.02em; }
.playground-eyebrow,.section-kicker { font-family:var(--font-display); font-weight:600; letter-spacing:.22em; text-transform:uppercase; }
.playground-back,.playground-link-btn,.quiet-action,.upload-btn,.generate-btn,.field-label select,.field-label textarea { border-radius:var(--r-md); }
.playground-compose,.playground-results { border-radius:var(--r-lg); box-shadow:0 14px 44px rgba(12,10,6,.12); }
.theme-dark .playground-compose,.theme-dark .playground-results { box-shadow:0 20px 60px rgba(0,0,0,.5); }
.result-card,.reference-item,.reference-empty { border-radius:8px; }
.result-card-foot span,.provider-status,.result-meta,#promptLength { font-family:var(--font-mono); }
.field-label select:focus,.field-label textarea:focus { box-shadow:0 0 0 3px rgba(212,181,122,.18); }
.image-lightbox { background:rgba(8,8,10,.72); backdrop-filter:blur(8px); }
.lightbox-panel { border-radius:12px; }
.reference-remove { background:rgba(8,8,10,.72); }
::selection { background:rgba(212,181,122,.28); }
@keyframes playground-spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }