:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#222842;background:#f4f5fb;font-synthesis:none}
*{box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{margin:0;min-width:320px;background:#f4f5fb}
button,input,select{font:inherit}button{cursor:pointer}
.topbar{height:56px;background:#fff;border-bottom:1px solid #e8e9f2;display:flex;align-items:center;padding:0 20px}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{width:34px;height:34px;border-radius:11px;background:linear-gradient(145deg,#8068ef,#5343ba);box-shadow:inset 0 2px 3px #ffffff7a,0 5px 10px #7461cb42;display:grid;place-items:center;color:#fff;font-size:20px}
.brand strong,.brand small{display:block}
.brand strong{font-size:16px;line-height:17px}
.brand small{font-size:9px;letter-spacing:2.3px;font-weight:800;color:#777c98;margin-top:3px}
.layout{height:calc(100vh - 56px);display:grid;grid-template-columns:220px minmax(0,1fr) 340px;overflow:hidden}
.panel{background:#fff;min-height:0}
.left{border-right:1px solid #e8e9f2;padding:20px 16px;display:flex;flex-direction:column}
.right{border-left:1px solid #e8e9f2;padding:0 16px;display:flex;flex-direction:column;overflow:hidden}
.section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:16px}
.eyebrow{font-size:10px;font-weight:850;letter-spacing:2.2px;color:#8a88c0}
.section-head h1,.stage h2{margin:5px 0 0;font-size:22px;letter-spacing:-.8px;color:#27284a}
.count{font-size:11px;background:#efebff;border-radius:20px;color:#6b56cd;font-weight:800;padding:5px 9px}
.theme-list{display:grid;gap:9px;overflow:auto;padding:2px}
.theme-card{width:100%;min-height:66px;border:1px solid #e5e7f1;background:#fff;border-radius:15px;padding:9px;display:flex;align-items:center;gap:11px;text-align:left;color:inherit;transition:all .17s}
.theme-card:hover{border-color:#a89bea;transform:translateX(2px)}
.theme-card.active{border:2px solid #7966d6;background:#f6f3ff;box-shadow:0 4px 12px #7862c926;padding:8px}
.theme-thumb{width:48px;height:47px;flex:none;border-radius:11px;background:linear-gradient(var(--sky) 0 39%,var(--land) 39% 100%);overflow:hidden;position:relative;border:1px solid #ffffffa8}
.theme-thumb:before{content:"";position:absolute;width:43px;height:42px;left:15px;top:17px;transform:rotate(22deg);border-radius:50%;background:#efe1c2;box-shadow:inset 0 1px 3px #a7947a;opacity:.85}
.theme-thumb img{position:absolute;width:31px;height:39px;object-fit:contain;left:0;bottom:0;filter:drop-shadow(0 2px 1px #384e4d50)}
.theme-card strong{display:block;font-size:13px}
.theme-card .chev{margin-left:auto;color:#a6a2c6;font-size:16px}
.stage{min-width:0;min-height:0;padding:18px 20px 14px;display:flex;flex-direction:column;background:radial-gradient(circle at 55% 36%,#fff 0,#f5f6fc 55%,#eff0f7 100%)}
.stage-head{display:flex;justify-content:space-between;align-items:end;margin:0 0 12px}
.view-pill{border:1px solid #e1e3ee;border-radius:10px;padding:6px 12px;background:#ebe8fb;color:#5d4cbb;font-size:11px;font-weight:800}
.preview-wrap{flex:1;min-height:0;display:flex;justify-content:center;align-items:flex-start}
.device{height:100%;aspect-ratio:440/960;border:7px solid #26314f;border-radius:30px;overflow:hidden;background:#bfe8ff;box-shadow:0 20px 40px #3742683a,0 4px 15px #20254730}
.device canvas{display:block;width:100%;height:100%}
.preview-controls{display:flex;align-items:center;gap:10px;justify-content:center;margin:12px auto 0;width:min(320px,100%);font-size:11px;color:#9298a9}
.preview-controls label{white-space:nowrap;color:#69718b;font-weight:600}
.preview-controls strong{color:#5c4fc0;font-size:14px}
.preview-controls input{flex:1;accent-color:#7160ca}
.form-scroll{overflow:auto;min-height:0;flex:1;padding:0 1px}
.form-block{padding:16px 0;border-bottom:1px solid #eceef5}
.form-block.last{border-bottom:0}
.form-block label{font-size:11px;color:#626982;font-weight:700;display:block}
.form-block input:not([type=checkbox]):not([type=color]):not([type=range]),.form-block select{width:100%;height:34px;border:1px solid #dee1ed;background:#fff;border-radius:8px;padding:0 9px;color:#2d3354;font-size:12px;margin-top:7px;outline:none}
.form-block input:focus,.form-block select:focus{border-color:#9a89e4}
.two-fields{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.block-title{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.block-title span{width:23px;height:23px;border-radius:8px;background:#f0ecff;color:#7764d1;display:grid;place-items:center;font-size:10px;font-weight:900}
.block-title h3{font-size:13px;margin:0;color:#303454}
.color-field{display:flex;gap:5px}
.color-field input[type=color]{width:39px;height:34px;padding:2px;border:1px solid #dfe2ec;border-radius:7px;background:#fff;margin-top:7px}
.color-field input:not([type=color]){flex:1;min-width:0}
.check-row{display:flex!important;align-items:center;gap:7px;margin-top:12px}
.check-row input{accent-color:#7563d2}
.asset-picker{display:flex;gap:10px;align-items:center}
.asset-picker .asset-image{width:68px;height:56px;flex:none;border:1px solid #e4e6ef;border-radius:10px;background:repeating-conic-gradient(#f1f2f7 0 25%,white 0 50%) 50%/12px 12px;display:grid;place-items:center;overflow:hidden}
.asset-picker .asset-image img{max-width:100%;max-height:100%;object-fit:contain}
.asset-name{font-size:12px;font-weight:700;color:#4d5370}
.tree-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:0 0 12px}
.tree-slot{border:1px solid #dfe3ef;border-radius:12px;background:#f8f9fd;padding:7px 3px 8px;color:#545b7d;text-align:center;min-width:0}
.tree-slot.active{border:2px solid #7361d1;background:#f1edff;padding:6px 2px 7px;box-shadow:0 3px 9px #7964cf24}
.tree-slot img{display:block;width:52px;height:60px;max-width:95%;object-fit:contain;margin:auto;filter:drop-shadow(0 3px 2px #33425026)}
.tree-slot strong{display:block;font-size:11px;margin-top:3px}
.tree-filters{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 8px}
.tree-filters button{border:1px solid #e1def0;background:#fff;color:#74758f;border-radius:20px;padding:5px 9px;font-size:10px;font-weight:750}
.tree-filters button.active{background:#705dcc;border-color:#705dcc;color:#fff}
.tree-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;max-height:236px;overflow:auto;padding:3px;align-content:start}
.tree-art{position:relative;min-width:0;border:1px solid #e3e5ef;border-radius:10px;background:repeating-conic-gradient(#f2f3f8 0 25%,#fff 0 50%) 50%/12px 12px;padding:4px;height:84px;display:flex;align-items:center;justify-content:center}
.tree-art:hover{border-color:#ac9fe7}
.tree-art.inspected{outline:2px solid #7c68d6;outline-offset:-2px}
.tree-art img{width:100%;height:74px;object-fit:contain;filter:drop-shadow(0 2px 2px #1e324b2b)}
.tree-art .slot-tags{position:absolute;top:3px;left:3px;display:flex;gap:2px}
.tree-art .slot-tags b{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;font-size:9px;color:#fff;background:#6856c6;box-shadow:0 1px 3px #34325180}
.ground-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.ground-swatch{display:flex;align-items:center;gap:7px;min-width:0;padding:5px;text-align:left;border:1px solid #e1e3ee;border-radius:9px;background:#fff;color:#606883;font-size:11px;font-weight:700}
.ground-swatch:hover{border-color:#a99ce6}
.ground-swatch.active{border:2px solid #7662d3;background:#f4f1ff;padding:4px;color:#5947ad}
.ground-swatch img{width:39px;height:35px;flex:none;object-fit:cover;border-radius:5px}
.ground-swatch span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}