:root { color-scheme: dark; --bg:#090b13; --panel:#111522; --panel2:#171c2c; --line:#293148; --text:#f5f7ff; --muted:#929bb4; --violet:#9c4dff; --cyan:#46d8ff; --danger:#ff607d; }
* { box-sizing: border-box; }
html, body { width:100%; height:100%; margin:0; overflow:hidden; background:var(--bg); color:var(--text); font:600 13px Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; }
button, input, select, textarea { font:inherit; }
button, .button { border:1px solid var(--line); border-radius:8px; padding:8px 11px; color:var(--text); background:#171c29; cursor:pointer; transition:.15s ease; }
button:hover, .button:hover { border-color:#7351a8; transform:translateY(-1px); }
.primary { border-color:#a066ff; background:linear-gradient(135deg,#7e34e8,#ab5dff); }
.ghost { background:#151927; }
.danger-ghost { color:#ff9aad; border-color:#713244; background:#25141c; }
.mini { padding:5px 8px; font-size:11px; }
.full { width:100%; margin-top:10px; }
.topbar { height:64px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:0 18px; border-bottom:1px solid var(--line); background:#0e111b; }
.brand { display:flex; align-items:center; gap:10px; }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; background:linear-gradient(145deg,var(--violet),#5232b9); font-size:12px; box-shadow:0 0 25px #8d45ff55; }
.brand div { display:flex; flex-direction:column; }
.brand strong { font-size:16px; }
.brand small { color:var(--muted); font-weight:500; }
.top-actions { display:flex; gap:8px; align-items:center; }
.workspace { height:calc(100% - 64px); display:grid; grid-template-columns:230px minmax(0,1fr) 390px; gap:1px; background:var(--line); }
.panel { background:var(--panel); }
.library-panel, .inspector-panel { min-height:0; overflow:auto; }
.inspector-panel { position:relative; z-index:4; min-width:0; }
.library-panel { display:flex; flex-direction:column; padding:14px 10px 10px; }
.panel-heading, .row-title { display:flex; align-items:center; justify-content:space-between; }
.panel-heading { padding:0 4px 12px; text-transform:uppercase; letter-spacing:.08em; font-size:11px; color:#cbd2e7; }
.badge { display:inline-flex; align-items:center; padding:4px 8px; border:1px solid #3b4560; border-radius:999px; color:#c9d1e8; background:#111725aa; font-size:10px; }
.search, input, select, textarea { width:100%; color:var(--text); background:#0c101a; border:1px solid var(--line); border-radius:7px; padding:8px; outline:none; }
input:focus, select:focus, textarea:focus { border-color:var(--violet); box-shadow:0 0 0 2px #9c4dff22; }
.effect-list { flex:1; min-height:120px; overflow:auto; margin-top:10px; }
.effect-item, .emitter-item { width:100%; text-align:left; border-color:transparent; background:transparent; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.effect-item:hover, .effect-item.active, .emitter-item:hover, .emitter-item.active { transform:none; border-color:#623f91; background:#211932; }
.effect-item.active, .emitter-item.active { box-shadow:inset 3px 0 var(--violet); }
.draft-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; padding-top:10px; border-top:1px solid var(--line); }
.primitive-library { flex:0 0 220px; min-height:0; display:flex; flex-direction:column; margin-top:8px; padding-top:10px; border-top:1px solid var(--line); }
.primitive-heading { display:flex; align-items:center; justify-content:space-between; padding:0 4px 7px; text-transform:uppercase; letter-spacing:.08em; font-size:11px; color:#cbd2e7; }
.primitive-list { min-height:0; overflow:auto; display:grid; grid-template-columns:1fr 1fr; gap:5px; padding:2px; }
.primitive-card { min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:3px; padding:8px; border-color:#303850; background:#141927; cursor:grab; }
.primitive-card:hover, .primitive-card.active { transform:none; border-color:#8f55e8; background:#241a35; }
.primitive-card strong { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.primitive-card small { color:var(--muted); text-transform:uppercase; font-size:9px; }
.drag-hint { margin:6px 4px 8px; color:var(--muted); font-size:9px; font-weight:500; }
.stage-column { position:relative; z-index:1; width:100%; max-width:100%; min-width:0; overflow:hidden; display:grid; grid-template-rows:minmax(300px,1fr) auto; background:#070910; }
.stage { position:relative; min-height:0; overflow:hidden; background:radial-gradient(circle,#222b4e 0,#0b0e19 68%); }
.stage[data-background="light"] { background:radial-gradient(circle,#fafaff,#c9cddd); }
.stage[data-background="grid"] { background-color:#c8ccd5; background-image:linear-gradient(45deg,#aeb3bf 25%,transparent 25%),linear-gradient(-45deg,#aeb3bf 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#aeb3bf 75%),linear-gradient(-45deg,transparent 75%,#aeb3bf 75%); background-position:0 0,0 12px,12px -12px,-12px 0; background-size:24px 24px; }
.stage canvas { position:absolute; inset:0; width:100%; height:100%; }
.drop-guide { position:absolute; inset:28px; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; border:2px dashed #a45cff; border-radius:18px; background:#32195dbb; opacity:0; pointer-events:none; transition:.16s ease; }
.drop-guide strong { font-size:18px; }
.drop-guide span { color:#d8c8ef; }
.stage.drag-over .drop-guide { opacity:1; }
.stage-badges { position:absolute; top:12px; left:12px; display:flex; gap:6px; pointer-events:none; }
.burst-button { position:absolute; right:12px; bottom:12px; background:#111522aa; backdrop-filter:blur(8px); }
.transport { min-height:72px; display:grid; grid-template-columns:36px 36px minmax(80px,1fr) 112px auto auto auto; align-items:center; gap:7px; padding:10px; border-top:1px solid var(--line); }
.transport-button { width:38px; height:38px; padding:0; font-size:16px; }
.transport label { display:flex; align-items:center; gap:4px; min-width:0; white-space:nowrap; color:var(--muted); font-size:10px; }
.transport select { width:auto; }
.time-editor { display:flex !important; flex-direction:row !important; align-items:center; gap:5px !important; color:#dce2f5 !important; }
.time-editor input { width:58px; padding:7px 5px; text-align:right; }
.time-editor span { white-space:nowrap; color:var(--muted); }
input[type="color"] { width:28px; height:28px; padding:2px; cursor:pointer; }
input[type="range"] { padding:0; accent-color:var(--violet); }
.inspector-panel { padding-bottom:22px; }
.tabs { position:sticky; top:0; z-index:2; display:grid; grid-template-columns:repeat(5,1fr); background:#0f1320; border-bottom:1px solid var(--line); }
.tab { border:0; border-radius:0; padding:13px 5px; background:transparent; color:var(--muted); }
.tab:hover { transform:none; }
.tab.active { color:white; box-shadow:inset 0 -2px var(--violet); }
.tab-page { display:none; padding:15px; }
.tab-page.active { display:block; }
.tab-page label { display:flex; flex-direction:column; gap:6px; margin:10px 0; color:var(--muted); font-size:11px; }
.section-title { margin:6px 0 10px; color:#e4e8f6; font-size:12px; text-transform:uppercase; letter-spacing:.07em; }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.field-grid.three { grid-template-columns:.7fr .9fr 1.4fr; }
.emitter-list { display:flex; flex-direction:column; gap:3px; }
.emitter-row { display:grid; grid-template-columns:minmax(0,1fr) 34px 34px; gap:4px; align-items:center; border-radius:8px; }
.emitter-row .emitter-item { min-width:0; }
.emitter-row .emitter-visibility, .emitter-row .emitter-remove { height:31px; padding:4px; }
.emitter-row .emitter-visibility { color:#8ff3df; background:#112821; }
.emitter-row.is-hidden .emitter-item { opacity:.48; text-decoration:line-through; }
.emitter-row.is-hidden .emitter-visibility { color:#8d96aa; background:#151925; }
.range-row { display:grid; grid-template-columns:90px 1fr 1fr; gap:7px; align-items:end; margin:8px 0; }
.range-row span { align-self:center; color:var(--muted); font-size:11px; }
.range-row label { margin:0; }
.atlas-preview { position:relative; height:160px; display:grid; place-items:center; overflow:hidden; margin:10px 0; border:1px solid var(--line); border-radius:9px; background-color:#c7cbd4; background-image:linear-gradient(45deg,#aab0bd 25%,transparent 25%),linear-gradient(-45deg,#aab0bd 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#aab0bd 75%),linear-gradient(-45deg,transparent 75%,#aab0bd 75%); background-position:0 0,0 8px,8px -8px,-8px 0; background-size:16px 16px; }
.atlas-preview img { max-width:100%; max-height:100%; object-fit:contain; }
.button-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.json-editor { min-height:440px; resize:vertical; font:500 11px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; tab-size:2; }
.hint { color:var(--muted); font-weight:500; font-size:11px; line-height:1.5; }
.parameter-help { margin:0 0 13px; padding:9px 10px; border:1px solid var(--line); border-radius:8px; background:#0d111b; color:var(--muted); font-weight:500; font-size:11px; line-height:1.5; }
.parameter-help summary { color:#d8def0; cursor:pointer; font-weight:700; }
.parameter-help p { margin:8px 0 0; }
.check-row { display:flex; align-items:center; gap:8px; color:#d8def0; }
.check-row input[type="checkbox"] { width:auto; margin:0; accent-color:var(--accent); }
.path-motion-fields { margin:8px 0 13px; padding:10px; border:1px solid var(--line); border-radius:8px; background:#0d111b; }
.inline-actions { display:flex; gap:5px; }
.primitive-preview-wrap { position:relative; height:180px; overflow:hidden; margin-bottom:12px; border:1px solid var(--line); border-radius:10px; background:radial-gradient(circle,#29335b,#090c16 70%); }
.primitive-preview-wrap canvas { width:100%; height:100%; }
.primitive-preview-wrap > span { position:absolute; top:8px; left:9px; padding:3px 7px; border:1px solid #48516d; border-radius:999px; color:#bfc7dd; background:#0c1019aa; font-size:9px; text-transform:uppercase; }
.custom-shape-fields { margin:12px 0; padding:10px; border:1px solid #5b3a82; border-radius:9px; background:#171122; }
.custom-shape-fields[hidden] { display:none; }
.atlas-builder-actions { display:flex; gap:7px; margin:8px 0 12px; }
.atlas-builder { margin-bottom:16px; padding:10px; border:1px solid #5b3a82; border-radius:10px; background:#141020; }
.atlas-grid-preview { height:210px; margin-bottom:10px; overflow:hidden; border:1px solid var(--line); border-radius:8px; background-color:#c7cbd4; background-image:linear-gradient(45deg,#aab0bd 25%,transparent 25%),linear-gradient(-45deg,#aab0bd 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#aab0bd 75%),linear-gradient(-45deg,transparent 75%,#aab0bd 75%); background-position:0 0,0 8px,8px -8px,-8px 0; background-size:16px 16px; }
.atlas-grid-preview canvas { width:100%; height:100%; }
.builder-status { display:block; min-height:34px; margin-top:8px; color:#c8d1e7; font-size:10px; line-height:1.45; }
.paint-launch { margin:0 0 14px; border-color:#36cbb2; color:#bafff2; background:linear-gradient(135deg,#12352f,#17253f); }
.atlas-painter-dialog { width:min(1380px,96vw); height:min(900px,94vh); max-width:none; max-height:none; padding:0; overflow:hidden; border:1px solid #4e5d7c; border-radius:14px; color:var(--text); background:#0b0e17; box-shadow:0 30px 100px #000c; }
.atlas-painter-dialog::backdrop { background:#03050bd9; backdrop-filter:blur(5px); }
.atlas-painter-shell { height:100%; display:grid; grid-template-rows:auto auto minmax(0,1fr); }
.atlas-painter-header { display:flex; align-items:center; justify-content:space-between; padding:12px 15px; border-bottom:1px solid var(--line); background:#111624; }
.atlas-painter-header div:first-child { display:flex; flex-direction:column; gap:2px; }
.atlas-painter-header strong { font-size:16px; }
.atlas-painter-header small { color:var(--muted); font-weight:500; }
.atlas-painter-settings { display:grid; grid-template-columns:1.25fr 1.1fr repeat(6,.65fr) 1.2fr; gap:8px; align-items:end; padding:10px 13px; border-bottom:1px solid var(--line); background:#0e121d; }
.atlas-painter-settings label { margin:0; font-size:9px; }
.atlas-painter-settings input { padding:7px; }
.paint-capacity { align-self:center; color:#9ff7e7; font-size:10px; line-height:1.4; }
.atlas-painter-body { min-height:0; display:grid; grid-template-columns:82px minmax(420px,1fr) 230px; }
.paint-tools { display:flex; flex-direction:column; gap:6px; padding:10px; overflow:auto; border-right:1px solid var(--line); background:#0d111b; }
.paint-tool { min-height:56px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:5px; font-size:20px; }
.paint-tool span { color:var(--muted); font-size:9px; }
.paint-tool.active { border-color:#52e5c9; color:#8effe9; background:#17352f; box-shadow:inset 0 0 18px #31d9b522; }
.paint-main { min-width:0; min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr) auto; background:#090c14; }
.paint-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:7px 9px; padding:9px 11px; overflow:visible; border-bottom:1px solid var(--line); background:#121724; }
.paint-toolbar label { display:flex; flex-direction:row; align-items:center; gap:6px; margin:0; white-space:nowrap; color:#cbd3e6; font-size:10px; }
.paint-toolbar input[type="color"] { width:42px; height:32px; padding:2px; }
.paint-toolbar input[type="range"] { width:105px; padding:0; }
.paint-toolbar select { width:76px; }
.paint-toolbar output { min-width:34px; color:#aef7e8; font-size:9px; }
.paint-transform-group { display:inline-flex; align-items:center; gap:5px; padding-left:7px; border-left:1px solid var(--line); }
.paint-transform-group button { height:34px; padding:6px 9px; white-space:nowrap; }
.paint-transform-group input[type="number"] { width:62px; padding:7px 5px; }
.paint-viewport { position:relative; min-height:0; overflow:auto; display:grid; place-items:center; padding:42px; background-color:#c8ccd5; background-image:linear-gradient(45deg,#aeb3bf 25%,transparent 25%),linear-gradient(-45deg,#aeb3bf 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#aeb3bf 75%),linear-gradient(-45deg,transparent 75%,#aeb3bf 75%); background-position:0 0,0 12px,12px -12px,-12px 0; background-size:24px 24px; }
#paintCanvas { display:block; flex:none; border:1px solid #63708b; background:transparent; box-shadow:0 10px 35px #0009; cursor:crosshair; touch-action:none; image-rendering:auto; }
.paint-frame-status { display:flex; justify-content:space-between; padding:7px 11px; border-top:1px solid var(--line); color:var(--muted); background:#111522; font-size:10px; }
.paint-frames-panel { min-height:0; display:flex; flex-direction:column; padding:10px; border-left:1px solid var(--line); background:#0e121c; }
.paint-frame-actions { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:6px; margin-bottom:7px; }
.paint-frame-list { flex:1; min-height:80px; display:grid; grid-template-columns:1fr 1fr; align-content:start; gap:7px; overflow:auto; padding:2px; }
.paint-frame-card { position:relative; min-width:0; padding:5px; border:1px solid var(--line); border-radius:8px; color:var(--muted); background:#141927; cursor:pointer; }
.paint-frame-card.active { border-color:#52e5c9; color:#dffff8; background:#17312e; }
.paint-frame-card canvas { width:100%; aspect-ratio:1; display:block; object-fit:contain; border-radius:4px; background-color:#c8ccd5; background-image:linear-gradient(45deg,#aeb3bf 25%,transparent 25%),linear-gradient(-45deg,#aeb3bf 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#aeb3bf 75%),linear-gradient(-45deg,transparent 75%,#aeb3bf 75%); background-position:0 0,0 5px,5px -5px,-5px 0; background-size:10px 10px; }
.paint-frame-card span { display:block; overflow:hidden; margin-top:4px; text-overflow:ellipsis; white-space:nowrap; font-size:9px; text-align:center; }
.paint-frames-panel > .full { margin-top:9px; }
@media (max-width:1100px) { .atlas-painter-settings { grid-template-columns:repeat(5,1fr); } .atlas-painter-body { grid-template-columns:70px minmax(360px,1fr) 190px; } }
.toast { position:fixed; left:50%; bottom:22px; z-index:10; transform:translate(-50%,18px); padding:9px 14px; border:1px solid #66469a; border-radius:9px; background:#20172e; opacity:0; pointer-events:none; transition:.2s ease; }
.toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width:1050px) { .workspace { grid-template-columns:190px minmax(360px,1fr) 340px; } .top-actions .ghost:nth-child(2) { display:none; } }