:root{
  --bg:#0c0d0f;--panel:#15171b;--panel2:#1c1f24;--line:#30343b;
  --text:#f5f6f7;--muted:#aeb4bd;--accent:#f4c542;--danger:#ff5d5d;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif}
button,input,select{font:inherit}
button{border:0;border-radius:9px;background:var(--accent);color:#171717;padding:10px 14px;font-weight:700;cursor:pointer}
button:hover{filter:brightness(1.06)}
button.ghost{background:#252a31;color:var(--text);border:1px solid var(--line)}
button.danger{color:#ffb1b1}
.hidden{display:none!important}
.login-gate{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at top,#262019 0,#0c0d0f 55%)}
.login-card{width:min(420px,100%);background:rgba(21,23,27,.96);border:1px solid #403824;border-radius:22px;padding:28px;box-shadow:0 30px 90px #0008}
.brand-mark{width:62px;height:62px;border-radius:18px;display:grid;place-items:center;background:var(--accent);color:#111;font-size:24px;font-weight:900}
.login-card h1{margin-bottom:5px}
.login-card p{color:var(--muted);line-height:1.5}
label{display:grid;gap:7px;color:var(--muted);font-size:13px}
input,select{width:100%;border:1px solid var(--line);background:#0e1013;color:var(--text);border-radius:9px;padding:10px}
input[type=range]{padding:0}
input[type=color]{height:42px;padding:4px}
.login-card button{width:100%;margin-top:18px}
.msg{min-height:22px;color:#ff9090;padding-top:10px}
.topbar{height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid var(--line);background:#111317;position:sticky;top:0;z-index:20}
.topbar strong{font-size:20px}.tag{margin-left:12px;color:var(--muted);font-size:12px}
.top-actions{display:flex;gap:8px}
.parameter-prompt{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:13px 18px;background:#211e14;border-bottom:1px solid #4b4022}
.parameter-prompt small{display:block;color:#c9bea1;margin-top:4px}
.prompt-actions{display:flex;gap:8px;flex-wrap:wrap}
.workspace{display:grid;grid-template-columns:390px 1fr;min-height:calc(100vh - 120px)}
.panel{background:var(--panel);border-right:1px solid var(--line);padding:16px;overflow:auto;max-height:calc(100vh - 120px)}
.panel section{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:12px}
h2{font-size:15px;margin:0 0 13px}
.two,.three{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.three{grid-template-columns:repeat(3,1fr)}
.upload{border:1px dashed #555d68;padding:12px;border-radius:10px}
.mode-switch button{font-size:11px;padding:8px}
.mode-switch .active,.tabs .active{outline:2px solid var(--accent)}
.palette{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.palette span{text-align:center;font-size:11px}
.stage{min-width:0;padding:16px;display:flex;flex-direction:column;gap:10px}
.tabs{display:flex;gap:8px}
.view{display:none;min-height:560px;background:#070809;border:1px solid var(--line);border-radius:16px;overflow:hidden;position:relative}
.view.active{display:grid;place-items:center}
#designCanvas{width:min(72vh,100%);height:auto;max-height:72vh;background:#16181b}
#threeCanvas{width:100%;height:100%;min-height:560px}
.view-controls{position:absolute;left:12px;bottom:12px;display:flex;gap:7px;flex-wrap:wrap}
.view-controls button{background:#20242a;color:#fff;border:1px solid #3b414a;font-size:12px}
.statusbar,.export-panel{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px}
.export-panel{justify-content:flex-start;flex-wrap:wrap}.export-panel h2{margin:0 8px 0 0}
dialog{border:0;background:transparent;color:var(--text);width:min(700px,90vw)}
dialog::backdrop{background:#000a}
.dialog-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:15px}
.dialog-card header{display:flex;justify-content:space-between;align-items:center}
.history-item{padding:12px;border:1px solid var(--line);border-radius:10px;margin:8px 0;background:#111317;display:flex;justify-content:space-between;gap:12px}
@media(max-width:980px){
  .workspace{grid-template-columns:1fr}.panel{max-height:none;border-right:0}.view{min-height:440px}.tag{display:none}
}