:root{font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif;color:#e9e9e3;background:#111313;font-size:16px;font-synthesis:none;--muted:#949b96;--accent:#d8ed9b;--border:#303633;--surface:#1a1e1c}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button,a,input,textarea,summary{-webkit-tap-highlight-color:transparent}button,a,summary{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.5;cursor:wait}a{color:inherit;text-decoration:none}[hidden]{display:none!important}header{height:84px;padding:0 36px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px}.brand-icon{display:grid;place-items:center;width:37px;height:37px;background:var(--accent);color:#182015;font-size:27px;font-style:italic;font-weight:900;border-radius:9px}.brand strong{font-size:23px;letter-spacing:2px}.brand strong span{font-size:11px;color:var(--muted);letter-spacing:2px;margin-left:12px}.top-right{display:flex;align-items:center;gap:22px}.connection{font-size:13px;display:flex;align-items:center;gap:8px;color:var(--muted)}.connection i{width:7px;height:7px;border-radius:50%;background:#87928a}.connection.online i{background:var(--accent);box-shadow:0 0 10px #d8ed9b44}main{display:grid;grid-template-columns:390px minmax(0,1fr);max-width:1680px;margin:auto}.controls{padding:35px 28px 28px 36px;border-right:1px solid var(--border);min-height:calc(100vh - 84px)}.eyebrow{font-size:11px;letter-spacing:1.8px;color:var(--accent);display:flex;align-items:center;gap:9px}.eyebrow span{padding:3px 5px;border:1px solid #3e4934;border-radius:4px;font-size:10px;letter-spacing:0}h1{font-size:25px;font-weight:550;letter-spacing:-.7px;margin:16px 0 9px}.intro{color:var(--muted);font-size:14px;margin:0 0 33px}label{display:flex;justify-content:space-between;font-size:14px;font-weight:500;margin:0 0 11px}label span{color:#7f8782;font-size:12px}textarea,input{background:#171b19;color:#e9e9e3;border:1px solid #373e38;border-radius:9px;width:100%;outline:none}textarea{height:204px;padding:15px;resize:vertical;line-height:1.8;font-size:15px;min-height:130px}textarea::placeholder,input::placeholder{color:#747e77}textarea:focus,input:focus{border-color:var(--accent);box-shadow:0 0 0 2px #d8ed9b15}input{padding:10px 12px;height:43px}.helper{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#858e87;margin:8px 0 27px}.text-btn{background:transparent;border:0;color:var(--accent);padding:4px 0;font-size:13px}.size-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:22px}.preset{background:#171b19;border:1px solid var(--border);border-radius:9px;padding:12px 4px 10px;color:#a8afa8;display:flex;flex-direction:column;align-items:center;gap:7px}.preset strong{font-size:12px;font-weight:500}.preset span{font-size:10px;color:#889184}.preset.selected{background:#273024;border-color:#abc076;color:var(--accent)}.ratio{display:block;height:21px;border:1px solid currentColor;border-radius:2px;margin-bottom:1px}.portrait{width:12px}.square{width:21px}.landscape{width:29px;height:18px;margin:2px 0}.preset:hover{border-color:#809466}details{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:16px 0;margin-bottom:22px}summary{font-size:14px;cursor:pointer}summary span{float:right;font-size:12px;color:var(--muted)}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}.field-row>div{min-width:0}.field-note{font-size:12px;line-height:1.7;color:var(--muted);margin-bottom:0}.primary{border:0;border-radius:8px;background:var(--accent);color:#20281a;font-weight:650;font-size:15px;display:flex;align-items:center;justify-content:center;gap:12px;padding:15px 17px;width:100%;transition:background .15s}.primary:hover{background:#e5f7b1}.shortcut{font-size:12px;margin-left:auto;color:#55633d;font-weight:400}#generate>span:first-child{font-size:20px}.privacy{font-size:11px;text-align:center;color:#808980;margin-top:13px}.workspace{padding:26px 30px 30px;min-width:0}.canvas-toolbar{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#9ba39d;margin-bottom:15px}.canvas-toolbar>span:first-child{display:flex;align-items:center;gap:8px}.tiny-square{width:11px;height:11px;border:1px solid #939c95;border-radius:2px}#canvas-meta{font-size:12px}.canvas{height:calc(100vh - 302px);min-height:430px;max-height:850px;border:1px solid var(--border);border-radius:12px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background-color:#171a18;background-image:radial-gradient(#35403666 .6px,transparent .6px);background-size:20px 20px}.empty{text-align:center;color:var(--muted);padding:26px}.empty-frame{position:relative;margin:auto auto 34px;width:86px;height:107px;border:1px solid #6a7656;border-radius:8px;transform:rotate(-9deg);display:grid;place-items:center;background:#20271e;box-shadow:12px 8px 0 -1px #171b18,12px 8px 0 0 #3b4833}.empty-frame span{font-size:38px;color:var(--accent)}.empty h2,.progress-panel h2,.failure-panel h2{font-size:20px;font-weight:500;color:#dce2d6;margin:0 0 12px}.empty p{font-size:14px;margin:0}.empty-tags{display:flex;gap:9px;justify-content:center;margin-top:24px}.empty-tags span{font-size:11px;border:1px solid #3a4139;padding:5px 9px;border-radius:20px;color:#87957f}#result{width:100%;height:100%;object-fit:contain;background:#101210}.progress-panel,.failure-panel{text-align:center;padding:30px;max-width:450px}.progress-panel p,.failure-panel p{color:var(--muted);font-size:14px;line-height:1.8}.spinner{width:40px;height:40px;border:2px solid #414c36;border-top-color:var(--accent);border-radius:50%;animation:spin 1.2s linear infinite;margin:0 auto 25px}@keyframes spin{to{transform:rotate(360deg)}}progress{appearance:none;width:240px;max-width:100%;height:4px;border:0;border-radius:10px;background:#3a4135}progress::-webkit-progress-bar{background:#3a4135;border-radius:10px}progress::-webkit-progress-value{background:var(--accent);border-radius:10px}.load-note{font-size:12px!important}.failure-panel>span{font-size:42px;color:#e8b495}.failure-panel .secondary{margin-top:10px}.result-actions{display:flex;justify-content:space-between;align-items:center;padding:15px 2px;gap:15px}.result-actions strong{font-size:14px;display:block;font-weight:500}.result-actions span{display:block;color:var(--muted);font-size:12px;margin-top:5px}.action-buttons{display:flex;gap:8px}.secondary{background:#232924;border:1px solid #434d40;border-radius:7px;color:#d6dfcc;font-size:13px;padding:10px 14px;white-space:nowrap}.small{width:auto;padding:10px 15px;font-size:13px;white-space:nowrap}.section-title{display:flex;justify-content:space-between;align-items:center;margin:24px 0 13px}.section-title h2{font-weight:500;font-size:14px;margin:0}.section-title span{font-size:12px;color:var(--muted)}.history{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;min-height:97px}.history-empty{color:#79837b;font-size:13px;margin:15px 0}.history-card{flex:none;width:82px;height:95px;padding:0;position:relative;border:1px solid #46523e;border-radius:7px;overflow:hidden;background:#242b23;color:#a9b39f}.history-card img{width:100%;height:100%;object-fit:cover}.history-card.active{outline:2px solid var(--accent);outline-offset:2px}.history-card .badge{position:absolute;bottom:0;left:0;right:0;background:#101710df;font-size:10px;padding:4px}.history-card .pending-icon{font-size:25px}.error{font-size:13px;line-height:1.7;color:#f3b3a0;background:#412721;padding:10px;border-radius:7px;margin-bottom:14px}dialog{background:#1b211c;color:#e7ecdf;border:1px solid #46503c;border-radius:16px;width:420px;max-width:calc(100vw - 30px);padding:32px;box-shadow:0 30px 100px #0009}dialog::backdrop{background:#080c08b8;backdrop-filter:blur(8px)}dialog h2{font-size:22px;font-weight:500;margin:25px 0 8px}dialog p{font-size:14px;color:#a4af9e;line-height:1.7}dialog label{margin-top:25px}dialog input{margin-bottom:20px}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#d8ed9b;color:#26301c;padding:12px 22px;border-radius:8px;z-index:5;font-size:14px;box-shadow:0 5px 25px #0007}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}@media(min-width:1500px){main{grid-template-columns:420px minmax(0,1fr)}.controls{padding-right:35px}}@media(max-width:850px){header{height:70px;padding:0 20px}main{grid-template-columns:320px minmax(0,1fr)}.controls{padding:25px 20px;min-height:0}.workspace{padding:24px 18px}.canvas{min-height:430px}.brand strong span{display:none}.canvas-toolbar #canvas-meta{max-width:65%;text-align:right}.result-actions{align-items:flex-start;flex-direction:column}.preset strong{font-size:11px}.shortcut{display:none}h1{font-size:22px}}@media(max-width:650px){main{display:flex;flex-direction:column}.controls{border-right:0;border-bottom:1px solid var(--border);padding:25px 20px}.intro{margin-bottom:23px}textarea{height:145px}.workspace{padding:20px}.canvas{height:60vh;min-height:370px;max-height:none}.size-grid{margin-bottom:18px}.preset strong{font-size:13px}.preset span{font-size:12px}.preset{padding:12px}header{position:sticky;top:0;background:#111313f5;z-index:3}.brand strong{font-size:20px}.top-right{gap:15px}.connection{font-size:12px}.result-actions{flex-direction:row;flex-wrap:wrap}.eyebrow{font-size:12px}.history-card{width:74px;height:92px}}@media(prefers-reduced-motion:reduce){.spinner{animation:none}}


.danger{color:#f3b3a0;border-color:#70463e}.danger:hover{background:#412721}.action-buttons{flex-wrap:wrap}

#result{cursor:zoom-in}#image-viewer{width:100vw;height:100dvh;max-width:100vw;max-height:100dvh;margin:0;padding:0;border:0;border-radius:0;background:#080a0bf5;overflow:hidden;color:#fff}#image-viewer::backdrop{background:#000}#zoom-stage{position:absolute;inset:64px 0 42px;overflow:hidden;touch-action:none;cursor:grab}#zoom-stage.dragging{cursor:grabbing}#zoom-image{position:absolute;left:50%;top:50%;max-width:none;max-height:none;transform-origin:0 0;user-select:none;pointer-events:none}.viewer-tools{height:64px;display:flex;align-items:center;justify-content:center;gap:12px;padding:8px;position:relative;z-index:1}.viewer-tools button{background:#252b29;color:#fff;border:1px solid #4a514e;padding:8px 12px;border-radius:7px}.viewer-hint{position:absolute;bottom:8px;width:100%;margin:0!important;text-align:center;font-size:12px!important;color:#abb3ae!important;pointer-events:none}#zoom-label{min-width:55px;text-align:center}