@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');
:root { --ink:#12213a; --muted:#617089; --line:#dbe3ee; --panel:#f8fafc; --blue:#2463eb; --blue-dark:#164fc7; --danger:#c43934; --good:#16794d; }
* { box-sizing:border-box; } body { margin:0; background:#f4f6f8; color:var(--ink); font-family:'Noto Sans SC','Manrope',sans-serif; } .shell { min-height:100vh; display:grid; place-items:center; padding:12px 24px; background:radial-gradient(circle at 50% -40%, #fff 0, transparent 46%),#f4f6f8; }
.card { width:min(880px,100%); background:#fff; border:1px solid #dfe6ee; border-radius:22px; box-shadow:0 18px 44px rgba(36,51,75,.08); padding:20px 27px; } header { margin-bottom:11px; } .eyebrow { margin:0 0 5px; color:#7890b1; font:500 11px/1 'DM Mono',monospace; letter-spacing:.14em; } h1 { margin:0; font:800 25px/1.2 'Manrope','Noto Sans SC',sans-serif; letter-spacing:-.04em; } .subtitle { margin:5px 0 0; color:var(--muted); font-size:13px; }
.field { display:flex; flex-direction:column; gap:5px; font-size:14px; font-weight:700; } .field > span { color:#294260; } em { font-style:normal; font-weight:500; color:#6b7f9b; margin-left:4px; } input, select, textarea { width:100%; border:1px solid var(--line); border-radius:10px; padding:9px 12px; color:var(--ink); background:#fff; font:500 15px 'Noto Sans SC',sans-serif; outline:none; transition:border-color .16s,box-shadow .16s; } input:focus,select:focus,textarea:focus { border-color:#6d9df7; box-shadow:0 0 0 3px rgba(36,99,235,.12); } textarea { min-height:80px; resize:vertical; line-height:1.55; }
.upload-section { position:relative; margin:10px 0; } .label-line { display:flex; justify-content:space-between; color:#294260; } .label-line small { color:#6d7f97; font:500 12px 'DM Mono',monospace; } .dropzone { min-height:74px; display:grid; place-content:center; justify-items:center; gap:2px; cursor:pointer; border:1.5px dashed #b8cae2; border-radius:15px; color:#60738e; background:#fbfcfe; transition:.16s; } .dropzone:hover { border-color:#4d81e9; background:#f6f9ff; } .dropzone strong { color:#27456d; font-size:14px; } .dropzone span:last-child { font-size:12px; } .upload-icon { width:21px; height:21px; display:grid; place-items:center; border-radius:50%; color:white; background:#4c7de0; font-size:17px; font-weight:400; line-height:1; }
.previews { position:absolute; z-index:1; left:11px; top:31px; display:flex; gap:7px; max-width:348px; overflow:hidden; } .upload-section:has(.preview) .dropzone { padding-left:370px; } .preview { flex:0 0 52px; height:52px; position:relative; overflow:hidden; margin:0; border:1px solid var(--line); border-radius:8px; background:var(--panel); } .preview img { width:100%; height:100%; object-fit:cover; } .remove { position:absolute; top:2px; right:2px; width:17px; height:17px; border:0; border-radius:50%; color:#fff; background:rgba(18,33,58,.8); cursor:pointer; font-size:15px; line-height:14px; }
.settings { display:grid; grid-template-columns:1fr 1fr; gap:11px; padding:11px 15px; margin-bottom:12px; border:1px solid #dce5f0; border-radius:15px; background:var(--panel); } .settings small { color:#71839d; font-size:12px; font-weight:500; line-height:1.4; } .reference-note { grid-column:1/-1; padding:0; margin:0; color:#587192; font-size:13px; } .hidden { display:none!important; }.prompt-field { margin-bottom:9px; } .status { min-height:18px; margin:0 0 7px; color:var(--muted); font-size:14px; } .status.error { color:var(--danger); } .status.success { color:var(--good); } .status.loading { color:#3a68bd; }
#submit { width:100%; border:0; border-radius:11px; padding:11px; cursor:pointer; color:white; background:var(--blue); box-shadow:0 6px 12px rgba(36,99,235,.2); font:800 16px 'Noto Sans SC',sans-serif; transition:background .16s,transform .16s; } #submit:hover:not(:disabled) { background:var(--blue-dark); transform:translateY(-1px); } #submit:disabled { opacity:.68; cursor:wait; }
.results { margin-top:27px; padding-top:25px; border-top:1px solid #e3e9f0; } .results-heading { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:13px; } h2 { margin:0; font-size:18px; } .results-heading span { color:#71839d; font:500 12px 'DM Mono',monospace; } .results-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; } .result { overflow:hidden; border:1px solid var(--line); border-radius:12px; background:#fff; } .result img { display:block; width:100%; aspect-ratio:1; object-fit:cover; cursor:zoom-in; background:#f1f4f8; } .result a { display:block; padding:10px; text-align:center; color:#285cc8; text-decoration:none; font-size:13px; font-weight:700; } #image-dialog { max-width:min(96vw,1000px); max-height:94vh; padding:0; border:0; background:transparent; } #image-dialog::backdrop { background:rgba(8,15,28,.76); } #image-dialog img { display:block; max-width:96vw; max-height:90vh; } #close-dialog { position:fixed; top:18px; right:24px; z-index:2; border:0; border-radius:50%; width:36px; height:36px; color:#fff; background:#25334a; cursor:pointer; font-size:25px; }
@media (max-width:620px) { .shell{padding:20px 12px;place-items:start center}.card{padding:25px 18px;border-radius:16px}.settings{grid-template-columns:1fr;padding:15px}h1{font-size:25px}.dropzone{min-height:112px}.previews{position:static;flex-wrap:wrap;max-width:none;margin-top:10px}.preview{flex-basis:72px;height:72px} }