:root{--ink:#242522;--muted:#777972;--line:#deded7;--paper:#f5f4ef;--card:#fffefa;--accent:#ba5e3d;--accent-dark:#91462e;--olive:#67715f}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Georgia,"Songti SC",serif}.shell{width:min(1100px,calc(100% - 40px));margin:0 auto;padding:28px 0 42px}.topbar{display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--line);padding-bottom:20px}.brand-mark{width:42px;height:42px;border-radius:12px;background:var(--ink);color:#f3d0a5;display:grid;place-items:center;font-size:25px;font-weight:700}.eyebrow{font:600 11px/1.2 Arial,sans-serif;letter-spacing:2px;color:var(--accent);margin:0 0 7px}.topbar h1{font-size:21px;margin:0;letter-spacing:.2px}.top-status{margin-left:auto;color:var(--muted);font:12px Arial,sans-serif}.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#6f9a6b;margin-right:7px}.intro{display:flex;justify-content:space-between;align-items:end;padding:58px 0 46px}.intro h2{font-size:clamp(38px,5vw,65px);font-weight:400;line-height:1.06;margin:0;letter-spacing:-1px}.intro h2 em{font-style:normal;color:var(--accent)}.intro-copy{font:15px/1.8 Arial,sans-serif;color:var(--muted);max-width:470px;margin:23px 0 0}.intro-note{border-left:1px solid var(--accent);padding:8px 0 8px 18px;color:var(--muted);font:13px/1.7 Arial,sans-serif}.intro-note strong{color:var(--ink);font-size:18px}.workspace{display:grid;grid-template-columns:1fr 1.2fr;gap:18px;align-items:start}.panel{background:var(--card);border:1px solid var(--line);padding:25px;border-radius:4px}.upload-panel{min-height:340px}.prompt-panel{grid-column:1/-1}.section-heading{display:flex;gap:13px;margin-bottom:22px}.section-heading>span{font:11px Arial,sans-serif;color:var(--accent);padding-top:3px}.section-heading h3{font-size:19px;font-weight:500;margin:0 0 5px}.section-heading p{font:12px Arial,sans-serif;color:var(--muted);margin:0}.section-heading i{font:11px Arial,sans-serif;color:var(--accent);font-style:normal;border:1px solid #e7bcae;padding:3px 6px;margin-left:5px}.dropzone{display:block;border:1px dashed #c8c8bf;min-height:245px;cursor:pointer;background:#faf9f4;transition:.2s}.dropzone:hover,.dropzone.dragover{border-color:var(--accent);background:#fff7f1}.dropzone input{display:none}.upload-empty{height:245px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:9px;color:var(--muted);font:14px Arial,sans-serif}.upload-empty small,.upload-preview small{font-size:11px;color:#a0a19b}.upload-icon{font:34px Arial,sans-serif;color:var(--accent);font-weight:200}.upload-preview{height:245px;display:flex;align-items:center;justify-content:center;gap:16px;padding:18px;font:13px Arial,sans-serif}.upload-preview img{max-height:205px;max-width:58%;object-fit:contain}.upload-preview small{display:block;margin-top:8px}.hidden{display:none!important}fieldset{border:0;padding:0;margin:0 0 21px}legend{font:600 12px Arial,sans-serif;color:var(--muted);margin-bottom:9px}.choice-grid{display:grid;gap:8px}.choice-grid.two{grid-template-columns:repeat(2,1fr)}.choice-grid.three{grid-template-columns:repeat(3,1fr)}.choice{position:relative;border:1px solid var(--line);border-radius:3px;padding:12px 12px;cursor:pointer;background:#fff;transition:.18s}.choice:hover{border-color:#c98974}.choice.active{border-color:var(--accent);background:#fff7f2;box-shadow:inset 0 0 0 1px var(--accent)}.choice input{position:absolute;opacity:0}.choice span{font:14px Arial,sans-serif;display:block}.choice small{display:block;font:11px Arial,sans-serif;color:var(--muted);margin-top:7px}.choice b{font-weight:400;color:var(--muted);font-size:12px}.compact .choice{padding:10px 9px}.option-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}textarea{width:100%;min-height:126px;resize:vertical;border:1px solid var(--line);border-radius:3px;padding:14px;font:14px/1.7 Arial,sans-serif;color:var(--ink);background:#fff;outline:none}textarea:focus{border-color:var(--accent)}.prompt-footer{display:flex;justify-content:space-between;gap:16px;margin:9px 0 18px;color:#96978f;font:11px Arial,sans-serif}.generate-button{width:100%;display:flex;justify-content:space-between;align-items:center;border:0;border-radius:3px;background:var(--ink);color:white;padding:16px 18px;cursor:pointer;font:15px Arial,sans-serif}.generate-button:hover{background:var(--accent-dark)}.generate-button:disabled{opacity:.55;cursor:wait}.generate-button b{font-size:24px;font-weight:400}.form-message{min-height:18px;margin:12px 0 0;color:var(--accent);font:12px Arial,sans-serif}.results{margin-top:48px}.results-heading{display:flex;align-items:end;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:15px}.results-heading h2{font-weight:400;font-size:31px;margin:0}.results-heading>span{font:12px Arial,sans-serif;color:var(--muted)}.result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:18px}.result-card{background:var(--card);border:1px solid var(--line);padding:12px}.result-card img{width:100%;display:block;aspect-ratio:1/1;object-fit:contain;background:#f2f1ec}.result-card a{display:inline-block;color:var(--accent-dark);font:12px Arial,sans-serif;margin:13px 2px 3px;text-decoration:none}.preview-card{padding:30px;text-align:center;color:var(--muted);font:13px Arial,sans-serif}footer{text-align:center;color:#9a9b94;font:11px Arial,sans-serif;margin-top:45px}@media(max-width:760px){.shell{width:min(100% - 24px,600px);padding-top:18px}.top-status{display:none}.intro{padding:38px 0 30px}.intro h2{font-size:41px}.intro-note{display:none}.workspace{display:block}.panel{margin-bottom:14px;padding:20px}.prompt-panel{margin-top:0}.option-row{gap:10px}.choice-grid.three{gap:5px}.choice{padding:10px 7px}.choice span{font-size:12px}.result-grid{grid-template-columns:1fr}.prompt-footer{display:block}.prompt-footer span{display:block;margin-bottom:5px}}
@media(max-width:760px){html,body{overflow-x:hidden}.intro>div{min-width:0}.intro-copy{max-width:100%;word-break:break-word}.panel{min-width:0}}
@media(max-width:760px){html,body{overflow-x:hidden}.shell{width:calc(100vw - 24px)!important;max-width:none}.intro{display:block}.intro>div{min-width:0;max-width:100%}.intro-copy{width:100%;max-width:100%;overflow-wrap:anywhere}.workspace,.panel,.dropzone{min-width:0;max-width:100%}}

/* ---------- 设置面板 ---------- */
.settings-gear {
  background: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  font-size: 18px;
  cursor: pointer;
  color: var(--muted);
  display: grid;
  place-items: center;
  transition: .18s;
  margin-right: 8px;
}
.settings-gear:hover { border-color: var(--accent); color: var(--accent); }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.38);
  display: grid;
  place-items: center;
  z-index: 100;
}
.modal-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 5px;
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0,0,0,.12);
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 22px 0;
}
.modal-header h3 { font-size: 18px; font-weight: 500; margin: 0; }
.modal-close {
  background: none;
  border: 0;
  font-size: 26px;
  cursor: pointer;
  color: var(--muted);
  line-height: 1;
}
.modal-body {
  padding: 16px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.modal-note {
  color: var(--muted);
  font: 12px/1.6 Arial, sans-serif;
  margin: 0;
}
.modal-body label {
  font: 13px Arial, sans-serif;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.modal-body input {
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 9px 11px;
  font: 14px Arial, sans-serif;
  color: var(--ink);
  background: #fff;
  outline: none;
}
.modal-body input:focus { border-color: var(--accent); }
.modal-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
.btn-primary {
  background: var(--ink);
  color: #fff;
  border: 0;
  border-radius: 3px;
  padding: 10px 20px;
  font: 14px Arial, sans-serif;
  cursor: pointer;
}
.btn-primary:hover { background: var(--accent-dark); }
.settings-status {
  font: 12px Arial, sans-serif;
  color: var(--muted);
}
.settings-status.success { color: #4a7c3f; }
.settings-status.error { color: #b13e2d; }

.field-error { font: 11px Arial, sans-serif; color: #b13e2d; display: block; margin-top: 3px; min-height: 15px; }

/* ---------- 密码眼睛 ---------- */
.password-wrap { position: relative; display: flex; align-items: center; }
.password-wrap input { width: 100%; padding-right: 38px; }
.eye-toggle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 38px;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 16px;
  color: var(--muted);
  display: grid;
  place-items: center;
  opacity: .55;
}
.eye-toggle:hover { opacity: 1; color: var(--ink); }
.eye-toggle.reveal { opacity: 1; color: var(--accent); }