:root { --page:#f4f5f0; --surface:#fff; --ink:#20251e; --muted:#6f756b; --line:#dce1d7; --jade:#24755b; --jade-deep:#185742; --soft:#e8f1ea; --danger:#a4443f; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; min-width:320px; background:var(--page); color:var(--ink); font-family:"Microsoft YaHei", "Segoe UI", sans-serif; }
button, input, textarea, select { font:inherit; }
button { cursor:pointer; }
.app-shell { max-width:1360px; min-height:100vh; margin:0 auto; padding:24px 32px 40px; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:0 0 24px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:11px; font-size:18px; font-weight:700; }
.brand-mark { display:grid; place-items:center; width:31px; height:31px; border-radius:7px; color:#fff; background:var(--jade); font-size:16px; }
.connection { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13px; }.connection i { width:8px; height:8px; border-radius:50%; background:#55a969; }
.workspace { display:grid; grid-template-columns:minmax(350px, .88fr) minmax(480px, 1.12fr); gap:42px; padding-top:36px; }
.controls { min-width:0; }.section-heading h1 { margin:0; font-size:29px; font-weight:700; }.section-heading p { margin:8px 0 30px; color:var(--muted); font-size:14px; }
.field-label { display:block; margin:19px 0 8px; color:#343a32; font-weight:650; font-size:13px; }.field-label span { color:#899087; font-weight:400; }
input, textarea, select { width:100%; border:1px solid #cfd6ca; border-radius:6px; background:var(--surface); color:var(--ink); outline:none; transition:border .15s, box-shadow .15s; }
input, select { height:43px; padding:0 12px; } textarea { resize:vertical; min-height:130px; padding:12px; line-height:1.6; } input:focus, textarea:focus, select:focus { border-color:var(--jade); box-shadow:0 0 0 3px rgba(36,117,91,.12); }
.key-field { position:relative; }.key-field input { padding-right:45px; }.icon-button { position:absolute; right:4px; top:4px; width:35px; height:35px; border:0; border-radius:5px; color:#657064; background:transparent; }.icon-button:hover { background:#edf1eb; }.field-note { margin:7px 0 0; color:#7e857b; font-size:12px; }
.mode-tabs { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; margin-top:25px; border-radius:7px; background:#e7ebe4; }.mode-tab { height:38px; border:0; border-radius:5px; color:#667064; background:transparent; font-weight:650; font-size:13px; }.mode-tab.active { background:#fff; color:var(--jade-deep); box-shadow:0 1px 3px rgba(27,48,31,.12); }
.field-row { display:grid; grid-template-columns:1fr 1.3fr; gap:14px; }.upload-zone { display:flex; align-items:center; gap:13px; min-height:72px; padding:12px 14px; border:1px dashed #aeb9ad; border-radius:6px; background:#fafbf9; color:#677265; cursor:pointer; }.upload-zone:hover, .upload-zone.dragover { border-color:var(--jade); background:var(--soft); }.upload-zone input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }.upload-icon { display:grid; place-items:center; flex:0 0 34px; height:34px; border-radius:5px; color:var(--jade); background:#e7f1e9; font-size:21px; }.upload-zone strong, .upload-zone small { display:block; }.upload-zone strong { color:#445043; font-size:13px; }.upload-zone small { margin-top:3px; color:#899187; font-size:11px; }
.primary-button { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; height:48px; margin-top:28px; border:0; border-radius:6px; color:#fff; background:var(--jade); box-shadow:0 3px 8px rgba(24,87,66,.2); font-weight:700; }.primary-button:hover { background:var(--jade-deep); }.primary-button:disabled { cursor:wait; opacity:.65; }
.generation-actions { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; margin-top:28px; }.generation-actions .primary-button { margin-top:0; }.cancel-button { height:48px; padding:0; border:1px solid #ba5b55; border-radius:6px; color:#fff; background:#ba5b55; font-weight:700; }.cancel-button:hover { background:#a84943; }.cancel-button:disabled { cursor:not-allowed; color:#8e9690; border-color:#d8ddd7; background:#edf0eb; }
.preview-panel { min-width:0; }.preview-header { display:flex; justify-content:space-between; align-items:center; margin:4px 0 12px; }.preview-header h2 { margin:0; font-size:15px; }.preview-header span { color:var(--muted); font-size:12px; }
.result-frame { position:relative; display:grid; place-items:center; min-height:570px; overflow:hidden; border:1px solid var(--line); border-radius:8px; background:#e8ebe4; }.result-frame.empty { border-style:dashed; }.result-frame:not(.empty) { background:#17231d; }.result-frame img { display:block; max-width:100%; max-height:640px; object-fit:contain; }.empty-state { display:grid; justify-items:center; gap:8px; color:#727a70; }.empty-state strong { color:#4c554b; font-size:14px; }.empty-state span { font-size:12px; }.sparkle { display:grid; place-items:center; width:54px; height:54px; margin-bottom:5px; border-radius:50%; color:var(--jade); background:#e1ece2; font-size:25px; }
.loading-state { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:10px; color:#ecf2eb; background:rgba(20,33,26,.72); text-align:center; }.loading-state small { color:#c4cec5; }.spinner { width:35px; height:35px; border:3px solid #a7cdb4; border-top-color:#fff; border-radius:50%; animation:spin .8s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } }
.result-actions { display:flex; justify-content:flex-end; gap:10px; padding-top:13px; }.secondary-button, .text-button { height:37px; padding:0 14px; border-radius:5px; font-size:13px; font-weight:650; }.secondary-button { border:1px solid #b9c5b8; color:#365443; background:#fff; }.secondary-button:hover { background:#f2f7f2; }.secondary-button:disabled { color:#9fa79e; border-color:#d9ded8; cursor:not-allowed; }.text-button { border:0; color:#647265; background:transparent; }.text-button:hover { color:var(--jade); }
.remember-key { display:flex; align-items:center; gap:7px; width:max-content; margin-top:10px; color:#596356; font-size:12px; cursor:pointer; }.remember-key input { width:14px; height:14px; accent-color:var(--jade); }
.upload-thumb { width:48px; height:48px; margin-left:auto; border:1px solid #cbd5ca; border-radius:4px; object-fit:cover; }.result-frame.comparing img { position:absolute; max-width:100%; max-height:640px; object-fit:contain; }.result-frame.comparing #result-image { clip-path:inset(0 0 0 var(--compare-split, 50%)); }.compare-controls { display:flex; align-items:center; gap:10px; padding-top:13px; color:#657065; font-size:12px; }.compare-controls input { height:5px; padding:0; accent-color:var(--jade); }
@media (max-width:850px) { .app-shell { padding:18px 18px 30px; }.workspace { grid-template-columns:1fr; gap:32px; padding-top:27px; }.result-frame { min-height:420px; }.preview-panel { order:-1; }.field-row { grid-template-columns:1fr; gap:0; } }
.final-prompt-panel { margin-top:18px; }.final-prompt-panel label { display:block; margin-bottom:7px; color:#4c584b; font-size:13px; font-weight:650; }.final-prompt-panel textarea { min-height:104px; resize:vertical; color:#5b6659; background:#fbfcfa; font-size:12px; line-height:1.55; }