:root { --ink:#17201d; --muted:#68736d; --paper:#f3f0e8; --card:#fbfaf5; --line:#c9cec5; --accent:#df5b35; --green:#204d40; --shadow:0 18px 50px rgba(26,39,34,.09); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font:16px/1.55 "Microsoft YaHei UI","Noto Sans SC",sans-serif; min-height:100vh; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.25; background-image:linear-gradient(rgba(36,55,48,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(36,55,48,.05) 1px,transparent 1px); background-size:28px 28px; mask-image:linear-gradient(to bottom,#000,transparent 75%); }
.shell { width:min(1500px,calc(100% - 52px)); margin:auto; padding:38px 0 60px; position:relative; }
.masthead { display:flex; justify-content:space-between; align-items:flex-end; border-bottom:2px solid var(--ink); padding:0 2px 23px; margin-bottom:30px; }
.eyebrow { margin:0 0 8px; font:700 11px/1.2 Consolas,monospace; letter-spacing:.17em; color:var(--accent); }
h1 { font-family:Georgia,"Noto Serif SC",serif; font-size:clamp(34px,4vw,59px); line-height:.9; margin:0; letter-spacing:-.06em; }
h1 span { font-family:"Microsoft YaHei UI",sans-serif; font-size:.31em; letter-spacing:.2em; margin-left:18px; color:var(--muted); }
.privacy { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:14px; line-height:1.45; }
.privacy i { width:9px; height:9px; border-radius:50%; background:#3f8b6c; box-shadow:0 0 0 5px rgba(63,139,108,.13); }
main { display:grid; grid-template-columns:minmax(590px,1.07fr) minmax(430px,.93fr); gap:26px; align-items:start; }
.control-panel { display:grid; grid-template-columns:1fr .82fr; gap:20px; }
.card,.result-panel { background:rgba(251,250,245,.9); border:1px solid var(--line); box-shadow:var(--shadow); }
.card { padding:25px; }
.provider-card { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:17px 22px; }
.provider-card .section-heading { grid-column:1/-1; }
.prompt-card { min-width:0; }
.settings-card { min-width:0; }
.section-heading { display:flex; gap:13px; align-items:center; border-bottom:1px solid var(--line); padding-bottom:15px; margin-bottom:19px; }
.section-heading b { font:700 14px Consolas,monospace; color:#fff; background:var(--green); padding:8px; }
.section-heading h2,.result-head h2 { font:700 22px/1.2 "Microsoft YaHei UI",sans-serif; margin:0; }
.section-heading p { font:12px Consolas,monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:4px 0 0; }
.field { display:flex; flex-direction:column; gap:7px; min-width:0; }
.field.full { width:100%; }
label { font-size:15px; font-weight:700; letter-spacing:.03em; }
label em { font-size:13px; font-weight:400; color:var(--muted); float:right; font-style:normal; }
input,textarea,select { border:1px solid #b9c0b8; background:#fff; border-radius:0; width:100%; color:var(--ink); font:16px/1.6 inherit; padding:12px 13px; outline:none; transition:.18s; }
textarea { resize:vertical; }
select { cursor:pointer; }
input:focus,textarea:focus,select:focus { border-color:var(--green); box-shadow:inset 3px 0 var(--accent); }
small { color:var(--muted); font-size:13px; line-height:1.5; }
.secret-wrap { position:relative; }
.secret-wrap input { padding-right:60px; }
.text-button { position:absolute; right:8px; top:50%; transform:translateY(-50%); border:0; color:var(--green); background:transparent; font-weight:700; cursor:pointer; }
.credential-actions { display:flex; align-items:center; gap:8px; }
.credential-actions button { border:1px solid var(--line); background:transparent; padding:7px 10px; font-size:13px; cursor:pointer; }
.credential-actions span { margin-left:auto; color:#a33b24; font-size:13px; }
.credential-actions span.configured { color:#287253; }
.prompt-field { position:relative; }
.prompt-field textarea { min-height:190px; }
#prompt-count { align-self:flex-end; font:12px Consolas,monospace; color:var(--muted); margin-top:-29px; margin-right:10px; pointer-events:none; }
.detail-enhancer { border-top:1px solid var(--line); padding-top:15px; }
.detail-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.detail-head button { border:0; background:var(--accent); color:#fff; padding:9px 12px; font-size:13px; font-weight:700; cursor:pointer; }
.option-chips { display:flex; flex-wrap:wrap; gap:8px; }
.option-chip { border:1px solid #b7c5be; background:#e8f0ec; color:#24453a; padding:9px 12px; cursor:pointer; font-size:13px; font-weight:700; transition:.16s; }
.option-chip:hover { border-color:var(--green); transform:translateY(-1px); }
.option-chip.selected { border-color:var(--green); background:var(--green); color:#fff; box-shadow:0 3px 10px rgba(32,77,64,.18); }
.option-chips.warm .option-chip { background:#f5e8d7; border-color:#d8b891; color:#764327; }
.option-chips.warm .option-chip.selected { background:#b65a32; border-color:#b65a32; color:#fff; }
.option-chips.dark .option-chip { background:#e8e5df; border-color:#b8b1a8; color:#3f3b36; }
.option-chips.dark .option-chip.selected { background:#373d3a; border-color:#373d3a; color:#fff; }
.option-chips.cool .option-chip { background:#e5edf2; border-color:#afc4d1; color:#31596d; }
.option-chips.cool .option-chip.selected { background:#376d86; border-color:#376d86; color:#fff; }
.prompt-lab { margin-top:0; padding-top:15px; }
.prompt-lab > small { display:block; margin-top:10px; }
.preset-group { display:grid; gap:7px; margin-top:15px; }
.preset-group label em { float:none; margin-left:6px; color:var(--accent); }
.manual-negative { margin-top:0; }
.tag-search { border-top:1px solid var(--line); padding-top:15px; }
.tag-search-bar { display:grid; grid-template-columns:1fr auto; }
.tag-search-bar button { border:0; background:var(--green); color:#fff; padding:0 16px; font-size:14px; font-weight:700; cursor:pointer; }
.tag-results { display:flex; flex-wrap:wrap; gap:6px; max-height:142px; overflow:auto; }
.tag-result { min-width:0; border:1px solid var(--line); background:#fff; padding:6px 8px; color:var(--ink); cursor:pointer; display:grid; gap:2px; text-align:left; }
.tag-result:hover { border-color:var(--green); box-shadow:inset 2px 0 var(--accent); }
.tag-result span { max-width:200px; overflow:hidden; text-overflow:ellipsis; font:13px Consolas,monospace; }
.tag-result small { font-size:11px; }
.dimensions { display:grid; grid-template-columns:1fr 30px 1fr; gap:7px; align-items:end; }
.swap { width:30px; height:42px; border:0; background:transparent; color:var(--accent); font-size:21px; cursor:pointer; }
.presets { display:flex; gap:5px; margin:10px 0 18px; }
.presets button { flex:1; border:1px solid var(--line); padding:9px 4px; background:transparent; color:var(--muted); font-size:13px; cursor:pointer; }
.presets button.active { color:#fff; background:var(--green); border-color:var(--green); }
details { border-top:1px solid var(--line); margin-top:20px; padding-top:15px; }
summary { cursor:pointer; font-size:15px; font-weight:700; }
summary span { color:var(--muted); font:11px Consolas,monospace; letter-spacing:.1em; float:right; }
.advanced-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px 10px; padding-top:16px; }
.check { display:flex; align-items:center; gap:8px; font-weight:400; grid-column:1/-1; }
.check input { width:16px; height:16px; accent-color:var(--green); }
.generate { width:100%; margin-top:23px; border:0; background:var(--accent); color:#fff; padding:15px; cursor:pointer; display:flex; align-items:baseline; justify-content:center; gap:12px; transition:.2s; }
.generate:hover { background:#bf4425; transform:translateY(-1px); }
.generate:disabled { opacity:.58; cursor:wait; transform:none; }
.generate span { font-size:15px; font-weight:700; }
.generate small { color:rgba(255,255,255,.65); font:9px Consolas,monospace; letter-spacing:.13em; }
.result-panel { padding:25px; position:sticky; top:20px; }
.result-head { display:flex; align-items:end; justify-content:space-between; margin-bottom:17px; }
.download { border:1px solid var(--ink); background:transparent; padding:8px 14px; font-size:11px; cursor:pointer; color:var(--ink); text-decoration:none; }
.download.disabled { opacity:.3; pointer-events:none; }
.preview { min-height:620px; background:#1b2421; position:relative; display:grid; place-items:center; overflow:hidden; }
.preview::after { content:""; position:absolute; inset:11px; border:1px solid rgba(255,255,255,.15); pointer-events:none; }
.preview img { display:block; width:100%; height:100%; max-height:75vh; object-fit:contain; position:relative; z-index:1; }
.preview.empty img { display:none; }
.placeholder { color:#d5d9d3; text-align:center; }
.placeholder strong { font-family:Georgia,"Noto Serif SC",serif; font-size:23px; font-weight:400; }
.placeholder p { color:#819089; font-size:11px; line-height:1.7; }
.frame-mark { margin:0 auto 27px; width:58px; height:58px; border:1px solid #75817c; position:relative; transform:rotate(45deg); }
.frame-mark::before { content:""; position:absolute; inset:10px; border:1px solid var(--accent); }
.loading { display:none; position:absolute; inset:0; z-index:3; background:rgba(19,29,25,.92); color:#fff; place-content:center; text-align:center; }
.busy .loading { display:grid; }
.loading i { width:49px; height:49px; margin:0 auto 20px; border:2px solid rgba(255,255,255,.2); border-top-color:var(--accent); border-radius:50%; animation:spin 1s linear infinite; }
.loading strong { font:20px Georgia,"Noto Serif SC",serif; }
.loading span { font:12px Consolas,monospace; color:#9dab9f; margin-top:9px; }
@keyframes spin { to { transform:rotate(360deg); } }
.status { font:13px/1.5 Consolas,"Microsoft YaHei UI",sans-serif; color:var(--muted); padding:13px 3px 0; min-height:34px; word-break:break-word; }
.status.error { color:#b42318; }
.queue { border-top:1px solid var(--line); margin-top:10px; padding-top:10px; max-height:260px; overflow:auto; display:grid; gap:6px; }
.queue-empty { color:var(--muted); font-size:13px; text-align:center; }
.queue-item { text-align:left; border:1px solid var(--line); background:#fff; padding:10px 12px; cursor:pointer; display:grid; gap:4px; position:relative; }
.queue-item::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:#9ca3af; }
.queue-item.processing::before { background:#d97706; }
.queue-item.completed::before { background:#287253; }
.queue-item.failed::before { background:#b42318; }
.queue-item span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:13px; color:var(--ink); }
.queue-item small { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.queue-item:disabled { cursor:default; }
.login-shell { display:grid; place-items:center; min-height:100vh; width:min(460px,calc(100% - 32px)); }
.login-card { width:100%; padding:34px 30px; }
.login-card h1 { font-size:38px; margin-bottom:26px; }
.login-card h1 span { display:block; margin:10px 0 0; font-size:.34em; }
.login-card .generate { margin-top:20px; }
.login-card code { font:13px Consolas,monospace; background:#e8ece7; padding:1px 5px; }
.masthead-actions { display:flex; align-items:center; gap:12px; }
.masthead-actions button { border:1px solid var(--line); background:transparent; padding:8px 12px; font-size:13px; cursor:pointer; }
@media (max-width:1100px) { main { grid-template-columns:1fr; } .result-panel { position:static; } .preview { min-height:520px; } }
@media (max-width:680px) { .shell { width:calc(100% - 24px); padding-top:22px; } .masthead { align-items:flex-start; } h1 span,.privacy span { display:none; } .control-panel { display:block; } .card { margin-bottom:14px; padding:19px; } .provider-card { display:block; } .provider-card .field { margin-top:15px; } .option-chip { flex:1 1 calc(50% - 8px); } .preview { min-height:440px; } .result-panel { padding:16px; } }