@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{--bg:#111315;--panel:#171a1d;--panel-2:#1d2125;--line:#30353a;--line-soft:#24292d;--text:#f3f2ed;--muted:#92989b;--muted-2:#6d7478;--accent:#d6f277;--accent-2:#b8dd58;--danger:#ff927b;--shadow:0 24px 70px rgba(0,0,0,.26)}
*{box-sizing:border-box}html{min-width:320px}body{margin:0;background:var(--bg);color:var(--text);font-family:Manrope,system-ui,sans-serif;-webkit-font-smoothing:antialiased}button,input,textarea,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.hidden{display:none!important}
.app-shell{min-height:100vh;background:radial-gradient(circle at 78% 14%,rgba(214,242,119,.07),transparent 26%),var(--bg)}.topbar{height:78px;padding:0 42px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line-soft)}.brand-lockup,.topbar-actions,.connection-status,.language-toggle,.mode-tab,.field-heading,.range-heading,.canvas-header,.result-toolbar,.result-meta,.history-heading,.modal-header,.modal-footer{display:flex;align-items:center}.brand-lockup{gap:11px}.brand-name{font-weight:800;letter-spacing:-.03em;font-size:15px}.brand-caption,.eyebrow{font-family:'DM Mono',monospace;letter-spacing:.16em;font-size:9px;color:var(--muted-2)}.brand-caption{margin-top:2px}.brand-mark{width:28px;height:28px;border-radius:8px;background:var(--accent);display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:7px 6px;transform:rotate(-8deg)}.brand-mark span{display:block;background:#151815;border-radius:2px}.brand-mark span:nth-child(2){height:75%;align-self:end}.brand-mark span:nth-child(3){height:50%;align-self:end}.topbar-actions{gap:16px}.connection-status{gap:7px;font-size:11px;color:var(--muted)}.connection-status i{width:6px;height:6px;border-radius:50%;background:#777;display:block}.connection-status.connected{color:var(--accent)}.connection-status.connected i{background:var(--accent);box-shadow:0 0 0 4px rgba(214,242,119,.1)}.icon-button{width:34px;height:34px;padding:0;border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:8px;font-size:15px;display:grid;place-items:center;position:relative}.icon-button:hover{border-color:var(--muted);color:var(--text)}.icon-button.small{width:30px;height:30px;font-size:14px}.icon-button[data-tooltip]:hover:after{content:attr(data-tooltip);position:absolute;top:calc(100% + 8px);right:0;background:#090a0b;color:var(--text);font-size:10px;padding:5px 7px;border:1px solid var(--line);border-radius:5px;white-space:nowrap;z-index:4}.language-toggle{gap:6px;background:transparent;border:0;color:var(--muted-2);font-size:11px;padding:4px}.language-toggle .active{color:var(--text);font-weight:700}.language-toggle b{font-weight:400;color:var(--line)}
.workspace{max-width:1420px;margin:0 auto;padding:58px 42px 44px;display:grid;grid-template-columns:minmax(340px,420px) minmax(0,1fr);gap:90px}.control-column{padding-top:5px}.eyebrow{color:var(--accent);margin-bottom:16px}.control-column h1{font-size:clamp(32px,3.5vw,51px);line-height:1.05;letter-spacing:-.06em;margin:0;max-width:390px}.intro{color:var(--muted);font-size:13px;line-height:1.7;max-width:350px;margin:17px 0 34px}.mode-switch{display:grid;grid-template-columns:1fr 1fr;padding:4px;border:1px solid var(--line);border-radius:10px;background:#141719;margin-bottom:28px}.mode-tab{justify-content:center;gap:8px;border:0;border-radius:7px;background:transparent;color:var(--muted);padding:11px 8px;font-size:12px;font-weight:600}.mode-tab.active{background:var(--panel-2);color:var(--text);box-shadow:0 2px 12px #0004}.mode-icon{color:var(--accent);font-size:14px}.controls{display:grid;gap:20px}.field-group{display:grid;gap:9px}.field-heading{justify-content:space-between}.field-heading label,.compact-field label,.range-heading label{font-size:11px;font-weight:700;color:#d9dbd5;letter-spacing:.01em}.field-hint,.input-note{font-size:10px;color:var(--muted-2)}textarea,input,select{width:100%;color:var(--text);background:#15181a;border:1px solid var(--line);border-radius:8px;padding:12px 13px;font-size:12px;transition:border-color .2s,background .2s}textarea{resize:vertical;line-height:1.65;min-height:122px}textarea::placeholder,input::placeholder{color:#5e6569}textarea:focus,input:focus,select:focus{border-color:#859a4b;background:#181d1c;outline:0}select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#8f9694 50%),linear-gradient(135deg,#8f9694 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 12px) 50%;background-size:4px 4px,4px 4px;background-repeat:no-repeat}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.range-heading{justify-content:space-between}.range-heading output{font-family:'DM Mono',monospace;font-size:10px;color:var(--accent)}input[type=range]{padding:0;height:4px;border:0;border-radius:3px;accent-color:var(--accent);background:var(--line)}.generate-button{height:48px;border:0;border-radius:8px;background:var(--accent);color:#14170f;font-weight:800;display:flex;align-items:center;justify-content:center;gap:10px;font-size:12px;transition:transform .2s,background .2s}.generate-button:hover{background:#e0fa8e;transform:translateY(-1px)}.generate-button:disabled{opacity:.55;cursor:wait;transform:none}.button-spark{font-size:16px}.shortcut{font-family:'DM Mono',monospace;font-size:9px;color:#687642;margin-left:12px}.secure-note{color:var(--muted-2);font-size:10px;text-align:center;margin:0;display:flex;align-items:center;justify-content:center;gap:7px}.secure-note span:first-child{font-size:16px;color:#8d9b59}
.canvas-column{min-width:0}.canvas-header{justify-content:space-between;margin-bottom:18px}.canvas-header h2{margin:0;font-size:17px;letter-spacing:-.03em}.ghost-button{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:7px;background:transparent;color:var(--muted);font-size:11px;padding:8px 11px}.ghost-button:hover{color:var(--text);border-color:#555d62}.output-frame{min-height:555px;border:1px solid var(--line);border-radius:12px;background:#141719;position:relative;overflow:hidden;box-shadow:var(--shadow);display:grid;place-items:center}.output-frame:before{content:'';position:absolute;inset:0;opacity:.4;background-image:linear-gradient(#252b2f 1px,transparent 1px),linear-gradient(90deg,#252b2f 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(to bottom,transparent,black 25%,black 75%,transparent)}.empty-state,.loading-state{position:relative;text-align:center;max-width:300px;padding:32px}.empty-glyph{width:62px;height:62px;border:1px solid #4c5552;border-radius:50%;margin:0 auto 22px;display:flex;align-items:center;justify-content:center;gap:5px;transform:rotate(-12deg)}.empty-glyph span{display:block;width:6px;height:20px;border-radius:3px;background:var(--accent)}.empty-glyph span:nth-child(2){height:31px;background:#8a9b52}.empty-glyph span:nth-child(3){height:14px;background:#506030}.empty-state h3,.loading-state h3{font-size:16px;margin:0 0 8px;letter-spacing:-.03em}.empty-state p,.loading-state p{color:var(--muted);font-size:11px;line-height:1.7;margin:0}.loader-ring{width:42px;height:42px;border:2px solid #343b3e;border-top-color:var(--accent);border-radius:50%;margin:0 auto 22px;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-bar{height:3px;border-radius:4px;background:#2a2f31;margin-top:25px;overflow:hidden}.loading-bar span{display:block;width:45%;height:100%;background:var(--accent);animation:load 1.4s ease-in-out infinite}@keyframes load{0%{transform:translateX(-100%)}100%{transform:translateX(240%)}}.result-state{position:absolute;inset:0;padding:17px;display:flex;flex-direction:column}.result-toolbar{justify-content:space-between}.result-label,.history-heading{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.15em;color:var(--muted-2)}.result-actions{display:flex;gap:7px}.result-image-wrap{flex:1;min-height:0;display:grid;place-items:center;margin:13px 0;overflow:hidden;border-radius:7px;background:#0b0d0d}.result-image-wrap img{max-width:100%;max-height:100%;object-fit:contain;display:block}.result-meta{justify-content:space-between;gap:20px;color:var(--muted);font-size:10px}.result-meta span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.result-meta span:last-child{font-family:'DM Mono',monospace;color:var(--muted-2);white-space:nowrap}.history-panel{margin-top:24px}.history-heading{justify-content:space-between;margin-bottom:11px}.history-heading span:last-child{letter-spacing:0;color:var(--muted-2)}.history-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;min-height:70px}.history-empty{grid-column:1/-1;border:1px dashed var(--line);border-radius:7px;color:var(--muted-2);font-size:10px;display:grid;place-items:center}.history-item{border:1px solid var(--line);border-radius:7px;aspect-ratio:1;overflow:hidden;padding:0;background:#171a1b}.history-item img{width:100%;height:100%;object-fit:cover;display:block}.history-item:hover{border-color:var(--accent)}
.upload-field{display:grid;gap:9px}.dropzone{border:1px dashed #4b5457;border-radius:8px;min-height:126px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:var(--muted);font-size:10px;cursor:pointer;background:#151819}.dropzone:hover{border-color:var(--accent);background:#181d1b}.dropzone strong{font-size:11px;color:#d8dcd0}.dropzone input{display:none}.upload-icon{font-size:22px;color:var(--accent);margin-bottom:4px}.reference-preview{position:relative;border:1px solid var(--line);border-radius:8px;padding:7px;display:flex;align-items:center;gap:9px;font-size:10px;color:var(--muted);overflow:hidden}.reference-preview img{height:47px;width:60px;object-fit:cover;border-radius:4px}.remove-reference{position:absolute;right:8px;top:8px;border:0;background:#1b1f20;color:var(--muted);border-radius:50%;width:20px;height:20px;line-height:1;font-size:16px}.remove-reference:hover{color:var(--danger)}
.modal-backdrop{position:fixed;inset:0;z-index:10;background:rgba(5,7,7,.78);display:grid;place-items:center;padding:20px}.settings-modal{width:min(100%,480px);background:#171a1d;border:1px solid var(--line);border-radius:12px;padding:26px;box-shadow:0 24px 80px #0009}.modal-header{justify-content:space-between;align-items:flex-start}.modal-header h2{margin:0;font-size:21px;letter-spacing:-.04em}.modal-copy{font-size:11px;line-height:1.7;color:var(--muted);margin:15px 0 25px}.modal-fields{display:grid;gap:17px}.modal-fields label{font-size:11px;font-weight:700}.input-note{margin-top:-3px}.modal-footer{justify-content:space-between;gap:15px;margin-top:26px}.modal-actions{display:flex;align-items:center;gap:9px}.modal-actions .ghost-button{height:40px}.settings-feedback{font-size:10px;color:var(--accent);min-height:15px}.small-button{height:40px;padding:0 15px;white-space:nowrap}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);z-index:20;background:#f1f2e9;color:#171a16;border-radius:6px;padding:10px 15px;font-size:11px;box-shadow:0 8px 35px #0008}.toast.error{background:#ffd3ca;color:#421912}
.model-picker{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.model-picker .ghost-button{padding:0 10px;white-space:nowrap}.model-picker .ghost-button:disabled{opacity:.55;cursor:wait}
@media (max-width:980px){.workspace{grid-template-columns:1fr;gap:52px;max-width:720px;padding-top:42px}.control-column h1{max-width:500px}.intro{max-width:480px}.output-frame{min-height:500px}.topbar{padding:0 24px}}@media (max-width:560px){.topbar{height:68px;padding:0 17px}.brand-caption{display:none}.connection-status{display:none}.workspace{padding:32px 17px 30px;gap:42px}.control-column h1{font-size:36px}.intro{font-size:12px;margin-bottom:25px}.output-frame{min-height:390px}.history-strip{gap:6px}.settings-modal{padding:21px}.modal-footer{align-items:flex-end;flex-direction:column}.modal-footer .generate-button{width:100%}.result-state{padding:12px}.result-meta{font-size:9px}}