@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
:root{--bg:#090a12;--panel:#111321;--panel2:#191b2d;--panel3:#20233a;--border:#30334b;--ink:#f4f1ff;--sub:#a4a4bd;--violet:#a78bfa;--blue:#65c4ff;--red:#ff6b99;--good:#7ce6c3;--grad:linear-gradient(125deg,#9575fa,#4ca9ff 55%,#f778ac);font-family:'DM Sans',system-ui,sans-serif;color-scheme:dark}
:root[data-skin=light]{--bg:#e9e9f4;--panel:#fcfcff;--panel2:#f0effa;--panel3:#e4e3f3;--border:#d1cee4;--ink:#191b35;--sub:#646681;--violet:#7155d1;--blue:#217cc2;--red:#c74a84;--good:#168e6a;color-scheme:light}
:root[data-skin=crimson]{--bg:#120a14;--panel:#20121f;--panel2:#30172d;--panel3:#3a1c33;--border:#583047;--ink:#fff1f7;--sub:#c8a5bb;--violet:#c18cff;--blue:#ec9ab5;--red:#ff6487;--good:#ebc191}
:root[data-skin=aurora]{--bg:#061418;--panel:#102328;--panel2:#183239;--panel3:#1f3c45;--border:#31525b;--ink:#e7fff9;--sub:#92c8c2;--violet:#b6a8ff;--blue:#70dced;--red:#ff83b1;--good:#72edb4}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink)}body{overflow:hidden}button,input,select,textarea{font:inherit}button,select,input[type=number],input[type=text],textarea{color:var(--ink)}button{cursor:pointer;border:1px solid var(--border);background:var(--panel2);border-radius:10px;padding:9px 11px;transition:background .15s,border-color .15s,transform .15s}button:hover{border-color:var(--violet);background:var(--panel3)}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--blue);outline-offset:2px}.primary{background:var(--grad);border:0;color:#080914;font-weight:800}.primary:hover{filter:brightness(1.12);background:var(--grad)}.ghost{background:transparent}.danger{color:var(--red)}.small{font-size:12px;color:var(--sub);line-height:1.55}.caps{text-transform:uppercase;letter-spacing:.12em;font-size:10px;font-weight:800;color:var(--sub)}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:'Space Grotesk',system-ui,sans-serif}.muted{color:var(--sub)}a{color:inherit;text-decoration:none}.app{height:100dvh;display:grid;grid-template-rows:64px minmax(0,1fr) 34px}.top{display:flex;align-items:center;gap:11px;padding:9px 18px;border-bottom:1px solid var(--border);background:var(--panel);min-width:0;z-index:3}.brand{display:flex;align-items:center;gap:10px;margin-right:12px;white-space:nowrap}.brand img{width:34px;height:34px;border-radius:10px}.brand b{font-family:'Space Grotesk';letter-spacing:-.03em;font-size:16px}.brand small{display:block;font-size:10px;letter-spacing:.12em;color:var(--sub)}.top-center{display:flex;align-items:center;gap:7px;margin:0 auto}.top-right{display:flex;align-items:center;gap:6px}.pill{background:var(--panel2);border:1px solid var(--border);border-radius:9px;padding:8px 11px;font-size:12px;color:var(--sub)}.pill strong{color:var(--ink)}.work{display:grid;grid-template-columns:62px minmax(225px,284px) minmax(340px,1fr) minmax(255px,286px);min-height:0;min-width:0}.tools{background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;gap:7px;padding:13px 8px;overflow:auto}.tool{width:43px;min-height:43px;padding:6px;border-radius:12px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:20px;line-height:1.1}.tool span{font-size:9px;margin-top:4px}.tool.active{background:#795ee844;border-color:var(--violet);color:var(--blue)}.sidebar{min-height:0;background:var(--panel);border-right:1px solid var(--border);overflow:auto;padding:17px 13px;scrollbar-width:thin}.sidebar.right{border-left:1px solid var(--border);border-right:0}.side-head{font-size:18px;margin:2px 0 5px}.section{border:1px solid var(--border);background:var(--panel2);border-radius:15px;padding:13px;margin-bottom:12px}.section h3{font-size:12px;margin:0 0 12px;text-transform:uppercase;letter-spacing:.06em}.section summary{cursor:pointer;font-weight:700;font-size:13px}.section details{padding-top:10px}.control{display:flex;align-items:center;gap:10px;margin:10px 0}.control>label{font-size:12px;color:var(--sub);width:77px;flex:none}.control>input[type=range]{flex:1;min-width:0;accent-color:var(--violet)}.control output{width:34px;font-size:11px;text-align:right;font-variant-numeric:tabular-nums}.control>select,.control>input[type=number],.control>input[type=text]{min-width:0;width:100%;padding:8px;border-radius:8px;background:var(--panel3);border:1px solid var(--border)}.field{width:100%;padding:10px 11px;border:1px solid var(--border);border-radius:9px;background:var(--panel3);color:var(--ink)}.bgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.bgrid button{font-size:11px;min-height:38px}.bgrid.cols3{grid-template-columns:repeat(3,minmax(0,1fr))}.bgrid.cols3 button{min-height:40px}.stage{min-width:0;min-height:0;background:radial-gradient(ellipse at 50% 20%,#30304b66,transparent 70%),var(--bg);display:flex;flex-direction:column}.stagebar{background:var(--panel);display:flex;align-items:center;gap:8px;padding:10px 15px;border-bottom:1px solid var(--border);font-size:11px}.stagebar .spacer{flex:1}.viewport{position:relative;flex:1;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:26px;min-height:0}.canvas-holder{position:relative;line-height:0;filter:drop-shadow(0 20px 40px #0007)}.canvas-holder:before{content:"";position:absolute;inset:-1px;border:1px solid #aeb0d477;pointer-events:none;z-index:1}canvas#artboard{display:block;touch-action:none;cursor:crosshair;max-width:100%}.drop-overlay{position:absolute;inset:22px;display:none;place-items:center;border:2px dashed var(--blue);border-radius:20px;background:#253251dd;z-index:2;font-size:21px;font-weight:700}.drop-overlay.visible{display:grid}.blank{position:absolute;max-width:360px;text-align:center;line-height:1.7;background:var(--panel);border:1px solid var(--border);padding:22px;border-radius:18px;box-shadow:0 22px 70px #0004}.blank h2{font-size:23px}.status{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:8px 16px;background:var(--panel);border-top:1px solid var(--border);color:var(--sub);font-size:11px}.layers{display:flex;flex-direction:column;gap:6px}.layer{padding:9px;display:flex;align-items:center;gap:8px;background:var(--panel3);border:1px solid transparent;border-radius:9px;cursor:pointer;text-align:left}.layer.active{border-color:var(--violet);background:#926cfc23}.layer .ico{background:var(--panel);border-radius:7px;padding:7px}.layer .title{font-size:12px;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.layer .flags{font-size:10px;color:var(--sub)}.layer button{padding:3px 5px;font-size:10px}.swatch{width:100%;height:36px;border-radius:9px;border:1px solid var(--border);background:var(--panel3)}.swatch input{width:100%;height:100%;border:0;background:transparent;cursor:pointer}.chip{padding:5px 8px;border:1px solid var(--border);border-radius:20px;color:var(--sub);font-size:10px}.toast{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);padding:12px 20px;background:var(--panel);border:1px solid var(--violet);border-radius:11px;z-index:20;box-shadow:0 15px 35px #0008;font-size:13px;pointer-events:none;max-width:80vw}.hide{display:none!important}.divider{border-top:1px solid var(--border);margin:12px 0}.foot{height:34px;background:var(--panel);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 16px;font-size:11px;color:var(--sub)}.guide{color:var(--blue)}.hide-on-narrow{display:inline}.switch{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--sub)}
@media(max-width:1120px){.work{grid-template-columns:56px 225px minmax(280px,1fr) 236px}.brand small,.hide-on-narrow{display:none}.top-center{margin-left:0}}
@media(max-width:840px){.app{grid-template-rows:auto minmax(0,1fr) 32px}.top{flex-wrap:wrap}.top-center{order:3;width:100%;justify-content:center}.work{grid-template-columns:54px minmax(0,1fr)}.sidebar.left{display:none}.sidebar.right{position:absolute;right:0;top:112px;bottom:32px;width:min(320px,85vw);z-index:4;box-shadow:-10px 5px 25px #0009;display:none}.sidebar.right.open{display:block}.tools{padding:8px 5px}.viewport{padding:8px}.stagebar{flex-wrap:wrap}.layer-toggle{display:block!important}}
/* VoughtLTE NEXT cyberpunk warmth, accessible mobile controls */
:root{--bg:#0b0b19;--panel:#16152b;--panel2:#211b35;--panel3:#29223f;--violet:#bb94fa;--blue:#8dbbff;--border:#423653}
.app .top{background:linear-gradient(105deg,#19132c,#101b30 75%,#21152a);border-bottom:1px solid #6b4d89}.brand b{color:#f4e9ff}.tool .lucide,.top .lucide{width:18px;height:18px}.tool{font-size:17px}.tool svg{width:20px;height:20px}.tool.active{background:#7e54c447;outline:1px solid #a688fc}.sidebar .section{box-shadow:inset 0 1px #ffffff09}.help-fab{position:fixed;right:24px;bottom:54px;z-index:13;background:linear-gradient(125deg,#917fff,#e1a1d4);color:#18112e;font-weight:800;border:0;border-radius:30px;padding:12px 16px;box-shadow:0 9px 32px #09091bbc;display:flex;gap:6px;align-items:center}.help-fab svg{width:18px;height:18px}.vlt-help-dialog{width:min(490px,94vw);background:#171428;border:1px solid #5a427d;border-radius:20px;color:#f2eaff;padding:24px}.vlt-help-dialog::backdrop{background:#070710df}.vlt-help-dialog h2{margin:0 0 10px}.vlt-help-dialog p{color:#bcb2d0;font-size:13px;line-height:1.7}.vlt-help-dialog .close{float:right}.vlt-help-dialog #helpMessages{height:180px;overflow:auto;background:#211b34;border-radius:9px;padding:10px;margin:15px 0}.vlt-help-dialog #helpForm{display:flex;gap:6px}.vlt-help-dialog input{min-width:0;flex:1;border:1px solid #6e5a8b;background:#26213a;padding:10px;border-radius:7px;color:white}
@media(max-width:840px){.work{grid-template-columns:52px minmax(0,1fr)}.sidebar.left{display:block;position:fixed;left:52px;top:88px;bottom:36px;width:min(300px,85vw);z-index:11;transform:translateX(-125%);transition:transform .18s ease;box-shadow:16px 4px 40px #0009}.sidebar.left.open{transform:translateX(0)}.sidebar.right{top:88px;bottom:36px}.tools{padding-top:14px}.top .brand small{display:none}.top{min-height:75px}.viewport{padding:10px}.help-fab{right:12px;bottom:52px}.tool span{font-size:9px}.stagebar .caps{display:none}}
@media(max-width:480px){.top{gap:5px;padding:6px}.top>button{padding:7px}.top-center{gap:4px}.top-center .pill{padding:4px}.top-right{gap:3px}.top-right select{width:74px!important;font-size:10px}.top-right>.primary{font-size:10px}.foot{font-size:9px}}
/* Lucide icons: compact and coherent professional toolbar. */
.tools .tool>svg,.top button svg,.top a svg,.sidebar button svg{width:17px;height:17px;stroke-width:1.8;vertical-align:middle;flex-shrink:0}
.tools .tool>svg{height:20px;width:20px;display:block;margin:auto auto 4px}