:root{color-scheme:dark;--bg:#111118;--panel:#191922;--deep:#15151e;--outline:#32313e;--soft:#a5a1b3;--text:#f6f3fa;--accent:#c2a3ff;--hover:#d9c7ff;--display:'Barlow Condensed',Impact,sans-serif;--sans:'DM Sans',Arial,sans-serif;--mono:'Space Mono',monospace}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.45 var(--sans)}
a{color:var(--accent);text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
button:disabled{opacity:.4;cursor:default}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.top{height:70px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:26px;padding:0 max(24px,calc((100vw - 1500px)/2));border-bottom:1px solid var(--outline);background:#14141c}
.brand{display:flex;align-items:center;gap:11px;white-space:nowrap;color:var(--text);font:800 21px/.9 var(--display);letter-spacing:.055em}
.brand-accent{color:var(--accent);margin:0 3px}
.brand-mark{width:34px;height:34px;border:1px solid #8a70bc;border-radius:9px;display:flex;align-items:center;justify-content:center;gap:3px;background:#251d37}
.brand-mark i{width:2px;background:var(--accent);height:9px;border-radius:2px}
.brand-mark i:nth-child(2),.brand-mark i:nth-child(4){height:15px}
.brand-mark i:nth-child(3){height:21px}
nav,.header-actions{display:flex;align-items:center;gap:10px}
.header-actions{justify-content:flex-end}
.nav-button,.sign-in{border:0;background:none;color:var(--soft);padding:8px 11px;white-space:nowrap}
.nav-button.active{color:var(--text);background:#262534;border-radius:7px}
.nav-button:hover,.sign-in:hover{color:var(--text)}
.primary,.secondary,.icon-button{border:1px solid transparent;border-radius:7px;min-height:36px;font-weight:700}
.primary{padding:8px 15px;background:var(--accent);color:#1b1226}
.primary:hover{background:var(--hover)}
.secondary,.icon-button{color:var(--text);background:#232331;border-color:var(--outline);padding:7px 11px}
.secondary:hover,.icon-button:hover{border-color:#6c5b88;background:#2c2838}
.icon-button{min-width:32px;min-height:30px;padding:3px 7px}
.full{width:100%}
.compact{min-height:30px;padding:4px 8px;font-size:12px}
main,.bottom{max-width:1548px;margin:auto;padding:0 24px}
.intro{display:flex;align-items:end;justify-content:space-between;gap:14px;margin:27px 0 19px}
h1{font:800 clamp(36px,4vw,55px)/.99 var(--display);letter-spacing:.012em;margin:0 0 7px}
p{margin:0;color:var(--soft)}
.resolution,.canvas-label,.sponsor>span{font:400 11px var(--mono);letter-spacing:.045em}
.resolution{border:1px solid #514064;color:var(--accent);border-radius:6px;background:#1f192b;padding:9px 11px;white-space:nowrap}
.resolution span{margin:0 4px}
.workbench{display:grid;grid-template-columns:minmax(215px,258px) minmax(320px,1fr) minmax(215px,260px);gap:12px;align-items:stretch}
.panel,.workspace{background:var(--panel);border:1px solid var(--outline);border-radius:12px;min-width:0}
.panel section{padding:17px 15px}
.panel section+section{border-top:1px solid var(--outline)}
.panel h2{font-size:14px;margin:0 0 13px;font-weight:800;display:flex;gap:8px;align-items:center}
.section-icon{color:var(--accent);font-size:16px;line-height:1}
label{display:block;color:#ddd9e5;font-size:12px;font-weight:700;margin:10px 0 5px}
input:not([type=file]),select,textarea{width:100%;min-width:0;color:var(--text);border:1px solid var(--outline);border-radius:7px;background:#13131c;padding:8px 9px}
input::placeholder,textarea::placeholder{color:#817d90}
input[type=color]{height:37px;padding:3px 6px}
input[type=range]{padding:0;accent-color:var(--accent)}
.optional{font-size:10px;font-weight:400;color:var(--soft);margin-left:4px}
.upload{display:grid;width:100%;gap:5px;justify-items:center;text-align:center;border:1px dashed #735b9a;border-radius:8px;background:#231b32;color:var(--text);padding:13px 3px}
.upload:hover,.upload.dragover{background:#35274a;border-color:var(--accent)}
.upload>span{color:var(--accent);font-size:22px}
.upload>small,.fine{color:var(--soft);font-size:11px}
.glow{border-color:#594379;color:var(--accent);background:#231b32}
.glow span{margin-right:4px}
.divider{display:flex;align-items:center;gap:8px;color:var(--soft);font-size:11px;margin:9px 0}
.divider::before,.divider::after{content:'';height:1px;background:var(--outline);flex:1}
.fine{margin-top:7px}
.workspace{display:grid;grid-template-rows:auto 1fr auto;overflow:hidden}
.canvas-toolbar,.canvas-footer{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;gap:8px}
.canvas-toolbar{border-bottom:1px solid var(--outline)}
.canvas-footer{font-size:11px;color:var(--soft);border-top:1px solid var(--outline)}
.canvas-footer u{display:inline-block;width:7px;height:7px;border:1px solid var(--accent);margin-right:4px}
.canvas-label{color:var(--soft)}
.history,.layer-add,.section-row,.layer-order,.field-row{display:flex;gap:6px;align-items:center}
.section-row{justify-content:space-between;margin-bottom:10px}
.section-row h2{margin:0}
.canvas-wrap{display:grid;place-items:center;min-width:0;padding:19px;background:radial-gradient(circle,#373043 1px,transparent 1px) 0 0/17px 17px,#12121a}
.stage{position:relative;width:min(100%,520px,calc(100dvh - 245px));min-width:min(100%,270px);aspect-ratio:1;box-shadow:0 0 0 1px #625171,0 12px 38px #0008;touch-action:none;overflow:hidden}
#artboard{width:100%;height:100%;display:block;touch-action:none}
#selection{position:absolute;pointer-events:none;outline:1px solid #ddc8ff;border:1px solid #5121a0}
#resize-handle{pointer-events:auto;position:absolute;right:-6px;bottom:-6px;width:13px;height:13px;padding:0;background:#f0e5ff;border:1px solid #6733ae;border-radius:2px;cursor:nwse-resize;touch-action:none}
#layers{list-style:none;padding:0;margin:0 0 8px;display:grid;gap:5px}
#layers li{display:flex;min-width:0;border:1px solid #343243;border-radius:6px;background:#211f2b;overflow:hidden}
#layers li.selected{border-color:#9474c6;background:#2a2139}
.layer-label{width:100%;display:flex;align-items:center;gap:7px;min-width:0;background:none;color:var(--text);border:0;text-align:left;padding:7px 6px}
.layer-label b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.layer-symbol{color:var(--accent);display:inline-grid;place-items:center;min-width:19px;height:19px;background:#342942;border-radius:4px;font-family:var(--mono)}
.layer-visibility{background:none;border:0;color:var(--soft);padding:0 7px;font-size:13px}
.field-row>*{width:50%}
.sponsor{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:9px 18px;padding:13px 17px;margin:16px 0;border:1px dashed var(--outline);border-radius:8px;background:#171720}
.sponsor>span{color:var(--soft);font-size:9px}
.sponsor p,.sponsor a,.bottom{font-size:12px}
.bottom{display:flex;justify-content:space-between;gap:10px;padding-bottom:18px;color:var(--soft)}
.bottom>div{display:flex;gap:14px;flex-wrap:wrap}
.bottom a{color:var(--soft)}
.bottom a:hover{color:var(--text)}
#notice{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:3;max-width:min(90vw,520px);padding:9px 14px;border-radius:7px;background:#29213a;color:var(--text);box-shadow:0 4px 18px #0008}
#notice:empty{display:none}
dialog{width:min(460px,calc(100% - 28px));border:1px solid #615075;border-radius:13px;background:#1d1c29;color:var(--text);padding:20px}
dialog::backdrop{background:#0c0a14c9}
.modal-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.modal-head h2{margin:0;font:800 30px var(--display)}
dialog .full{margin-top:15px}
dialog p+p{margin-top:10px}
#crop-preview{display:block;width:100%;max-height:350px;object-fit:contain;margin:12px auto;cursor:crosshair;touch-action:none}
.crop-controls{display:flex;justify-content:space-between}
.project-message{margin:18px 0}
#project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;margin:20px 0}
.project-card{display:grid;padding:0;background:var(--panel);border:1px solid var(--outline);border-radius:9px;overflow:hidden;text-align:left;color:var(--text)}
.project-card img,.project-cover{display:block;width:100%;width:100%;aspect-ratio:1;object-fit:cover;background:#302441}
.project-info{padding:10px 12px;display:grid;overflow-wrap:anywhere}
.project-info small{color:var(--soft)}
@media(max-width:1000px){.top{gap:10px;padding:0 15px}.brand{font-size:18px}main,.bottom{padding-right:14px;padding-left:14px}.workbench{grid-template-columns:minmax(190px,215px) minmax(275px,1fr) minmax(180px,210px)}.panel section{padding:13px 10px}}
@media(max-width:760px){.top{height:auto;min-height:62px;display:flex;flex-wrap:wrap;justify-content:space-between;padding:9px 12px;gap:6px}.top nav{order:3;width:100%;justify-content:center}.header-actions{gap:3px}.sign-in{font-size:11px;padding:6px}.brand{font-size:16px}.brand-mark{width:26px;height:26px}.intro{margin:17px 0 12px}.workbench{grid-template-columns:1fr 1fr}.workspace{grid-column:1/-1;grid-row:1}.stage{width:min(100%,490px,68vh)}.resolution{font-size:9px;padding:6px}.canvas-wrap{padding:12px}}
@media(max-width:430px){.workbench{grid-template-columns:1fr}.intro{align-items:start}.resolution{display:none}.brand{font-size:14px}.header-actions .primary{padding:5px 8px;min-height:31px}.panel section{padding:14px}.sponsor{justify-content:flex-start}.bottom{align-items:baseline}}
.prompt-builder{border:1px solid var(--outline);border-radius:7px;padding:8px 10px;margin:8px 0 12px}
.prompt-builder summary{color:var(--accent);font-weight:700;cursor:pointer}
#generate-dialog,#auth-dialog{max-height:90vh;overflow:auto}
#generation-status:not(:empty),#auth-status:not(:empty){margin-top:8px}