@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&family=Unbounded:wght@500;600;700&display=swap";:root{color-scheme:dark;font-family:Inter,system-ui,sans-serif;font-synthesis:none;--bg: #07080b;--panel: rgba(15, 17, 22, .88);--panel-strong: #111318;--surface: rgba(255, 255, 255, .055);--surface-hover: rgba(255, 255, 255, .09);--border: rgba(255, 255, 255, .1);--border-strong: rgba(173, 198, 255, .28);--text: #f6f7fb;--muted: #9298a8;--accent: #86a8ff;--cyan: #5de6ff;--violet: #8657ff;--green: #6df0b3;--shadow: 0 24px 80px rgba(0, 0, 0, .34)}*{box-sizing:border-box}html,body,#app{width:100%;min-width:1100px;height:100%;margin:0;overflow:hidden}button,input,select,textarea{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,canvas:focus-visible{outline:2px solid var(--accent);outline-offset:2px}body{color:var(--text);background:radial-gradient(circle at 52% -20%,rgba(69,87,180,.14),transparent 36%),var(--bg)}.app-shell{display:grid;grid-template-rows:68px minmax(0,1fr);width:100%;height:100%}.topbar{position:relative;z-index:5;display:grid;grid-template-columns:300px minmax(0,1fr) 300px;align-items:center;gap:20px;padding:0 20px;border-bottom:1px solid var(--border);background:#08090cd1;-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px)}.brand{display:flex;align-items:center;gap:14px;min-width:0}.brand__logo-wrap{display:grid;place-items:center;width:116px;height:34px;padding:6px 8px;overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:linear-gradient(135deg,#16acfa17,#732bf61a)}.brand__logo{width:96px;display:block}.brand__copy{display:flex;flex-direction:column;min-width:0}.brand__title{font-size:13px;font-weight:650;line-height:1.15}.brand__status{display:flex;align-items:center;gap:6px;margin-top:3px;color:var(--muted);font-size:10px;letter-spacing:.04em}.brand__status:before{width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 12px #6df0b3b3;content:""}.topbar__center{display:flex;align-items:center;justify-content:center;gap:8px}.topbar__actions{display:flex;align-items:center;justify-content:flex-end;gap:8px}.icon-btn,.toolbar-btn,.segmented__button,.align-btn,.template-card,.layer-row,.upload-card,.text-button{border:0;cursor:pointer}.icon-btn{display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid var(--border);border-radius:10px;background:var(--surface);transition:.16s ease}.icon-btn:hover:not(:disabled){border-color:var(--border-strong);background:var(--surface-hover)}.icon-btn:disabled{cursor:default;opacity:.28}.icon-btn svg,.toolbar-btn svg,.download-btn svg,.section-title svg,.upload-card svg,.layer-row svg{width:16px;height:16px;stroke-width:1.8}.save-state{min-width:92px;color:var(--muted);font-size:11px;text-align:center}.format-select,.select-control{height:36px;padding:0 34px 0 12px;border:1px solid var(--border);border-radius:10px;color:var(--text);background-color:#ffffff0e;cursor:pointer}.format-select{width:168px;font-size:12px;font-weight:550}.download-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 16px;border:0;border-radius:11px;color:#fff;background:linear-gradient(115deg,#3779f4,#7157ef 70%,#8a57ff);box-shadow:0 8px 24px #4e5fe83d,inset 0 1px #fff3;cursor:pointer;font-size:12px;font-weight:700;transition:.16s ease}.download-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}.download-btn:disabled{cursor:progress;filter:saturate(.7);opacity:.72;transform:none}.workspace{display:grid;grid-template-columns:240px minmax(520px,1fr) 294px;min-height:0}.sidebar{min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent;background:var(--panel);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}.sidebar--left{border-right:1px solid var(--border)}.sidebar--right{border-left:1px solid var(--border)}.sidebar__inner{padding:18px}.sidebar-heading{margin:0;font-family:Manrope,sans-serif;font-size:14px;font-weight:700}.sidebar-caption{margin:6px 0 16px;color:var(--muted);font-size:11px;line-height:1.5}.template-list{display:grid;gap:11px}.template-card{display:grid;grid-template-columns:66px minmax(0,1fr) 18px;align-items:center;gap:11px;width:100%;padding:8px;border:1px solid transparent;border-radius:14px;color:var(--text);background:#ffffff06;text-align:left;transition:.16s ease}.template-card:hover{border-color:#ffffff1c;background:#ffffff0e}.template-card.is-active{border-color:#7d9bff70;background:linear-gradient(110deg,#4973e626,#7145e014);box-shadow:inset 0 0 0 1px #7795ff14}.template-card canvas{display:block;width:66px;height:66px;border-radius:10px;background:#0a0b10;box-shadow:inset 0 0 0 1px #ffffff14}.template-card__title{display:block;margin-bottom:4px;font-size:12px;font-weight:650}.template-card__desc{display:-webkit-box;overflow:hidden;color:var(--muted);font-size:10px;line-height:1.35;-webkit-box-orient:vertical;-webkit-line-clamp:2}.template-card__check{display:grid;place-items:center;width:17px;height:17px;border:1px solid rgba(255,255,255,.12);border-radius:50%;color:transparent;font-size:10px}.template-card.is-active .template-card__check{border-color:transparent;color:#fff;background:linear-gradient(135deg,#4d8eff,#8657ff)}.sidebar-divider{height:1px;margin:18px 0;background:var(--border)}.saved-heading-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.saved-heading-row .sidebar-caption{margin-bottom:12px}.saved-template-card{position:relative}.saved-template-actions{display:grid;gap:4px}.saved-action{display:grid;place-items:center;width:20px;height:20px;border-radius:6px;color:#7f8798;transition:.14s ease}.saved-action:hover{color:#fff;background:#ffffff17}.saved-action--danger:hover{color:#ff91a7;background:#ff638217}.saved-action--danger.is-confirming{color:#fff;background:#d94866;box-shadow:0 0 0 3px #d948661f}.upload-card{display:flex;align-items:center;gap:10px;width:100%;padding:11px;border:1px dashed rgba(173,198,255,.24);border-radius:12px;color:#cdd8f9;background:#5b76c50e;text-align:left;transition:.16s ease}.upload-card:hover{border-color:#5de6ff70;background:#5b76c517}.upload-card__icon{display:grid;place-items:center;flex:0 0 auto;width:32px;height:32px;border-radius:9px;background:#ffffff12}.upload-card strong{display:block;font-size:11px}.upload-card small{display:block;margin-top:2px;color:var(--muted);font-size:9px}.stage{position:relative;display:grid;grid-template-rows:50px minmax(0,1fr) 38px;min-width:0;min-height:0;overflow:hidden;background:radial-gradient(circle at 50% 44%,rgba(57,68,112,.1),transparent 34%),#090a0d}.stage:before{position:absolute;inset:0;pointer-events:none;opacity:.28;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:24px 24px;content:"";-webkit-mask-image:radial-gradient(circle at center,black,transparent 76%);mask-image:radial-gradient(circle at center,black,transparent 76%)}.stage-toolbar{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid rgba(255,255,255,.055);background:#090a0d94}.stage-toolbar__group{display:flex;align-items:center;gap:7px}.format-chip{display:flex;align-items:center;gap:7px;color:#c4c9d7;font-size:10px}.format-chip__icon{display:inline-block;width:11px;height:14px;border:1px solid #7f879a;border-radius:2px}.toolbar-btn{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 9px;border:1px solid transparent;border-radius:8px;color:#aeb4c3;background:transparent;font-size:10px;transition:.16s ease}.toolbar-btn:hover,.toolbar-btn.is-active{color:var(--text);border-color:var(--border);background:var(--surface)}.toolbar-btn--orientation{color:#cbd6f5;border-color:#7d9bff2e;background:#4d8eff0e}.zoom-control{display:flex;align-items:center;gap:8px;padding:0 8px;color:var(--muted);font-size:10px}.zoom-control input{width:80px}.canvas-viewport{position:relative;z-index:1;display:grid;place-items:center;min-width:0;min-height:0;overflow:auto;padding:26px 30px}.canvas-wrap{position:relative;flex:0 0 auto;box-shadow:0 32px 100px #00000085,0 0 0 1px #ffffff21;transition:width .18s ease,height .18s ease}.canvas-wrap:before{position:absolute;inset:-1px;z-index:-1;border-radius:2px;background:linear-gradient(135deg,rgba(93,230,255,.32),transparent 28%,transparent 70%,rgba(134,87,255,.32));content:""}#design-canvas{display:block;width:100%;height:100%;background:#090b12;cursor:default;touch-action:none}#design-canvas.is-draggable{cursor:grab}#design-canvas.is-dragging{cursor:grabbing}.stage-footer{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-top:1px solid rgba(255,255,255,.055);color:#747b8b;background:#090a0db3;font-size:9px}.stage-footer__hint{display:flex;align-items:center;gap:10px}.kbd{padding:2px 5px;border:1px solid rgba(255,255,255,.12);border-bottom-color:#fff3;border-radius:4px;color:#aab0bf;background:#ffffff0b}.inspector-section{padding:16px 17px;border-bottom:1px solid var(--border)}.section-title{display:flex;align-items:center;justify-content:space-between;margin:0 0 13px;color:#d9dce5;font-size:11px;font-weight:650}.section-title__left{display:flex;align-items:center;gap:8px}.selected-label{max-width:130px;overflow:hidden;color:var(--accent);font-size:9px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.field{display:block;margin-bottom:11px}.field:last-child{margin-bottom:0}.property-hint{margin:2px 0 4px;color:var(--muted);font-size:9px;line-height:1.5}.field__label,.control-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;color:#9299a9;font-size:9px;font-weight:550}.field__value{color:#cfd3dd;font-variant-numeric:tabular-nums}.input-control,.textarea-control{width:100%;border:1px solid rgba(255,255,255,.09);border-radius:9px;color:var(--text);background:#ffffff09;transition:.16s ease}.input-control{height:35px;padding:0 10px;font-size:11px}.textarea-control{min-height:64px;padding:9px 10px;resize:vertical;font-size:11px;line-height:1.4}.input-control:hover,.textarea-control:hover,.select-control:hover{border-color:#ffffff29}.input-control:focus,.textarea-control:focus,.select-control:focus{border-color:#7d9bff9e;box-shadow:0 0 0 3px #4d8eff14;outline:none}.select-control{width:100%;font-size:11px}.control-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-bottom:11px}.control-row--two{grid-template-columns:1fr 1fr}.control-stack{min-width:0}.range-wrap{display:flex;align-items:center;height:35px;padding:0 9px;border:1px solid rgba(255,255,255,.09);border-radius:9px;background:#ffffff09}input[type=range]{width:100%;height:3px;border-radius:2px;accent-color:#7298ff;cursor:pointer}.segmented{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;padding:3px;border:1px solid rgba(255,255,255,.08);border-radius:9px;background:#ffffff06}.segmented__button,.align-btn{display:grid;place-items:center;min-height:27px;padding:0 7px;border-radius:6px;color:#8d94a4;background:transparent;font-size:10px}.segmented__button:hover,.align-btn:hover,.segmented__button.is-active,.align-btn.is-active{color:#fff;background:#ffffff16}.align-btn svg{width:14px;height:14px}.color-list{display:flex;align-items:center;gap:8px}.color-swatch{position:relative;width:23px;height:23px;padding:0;border:2px solid transparent;border-radius:50%;background:var(--swatch);box-shadow:inset 0 0 0 1px #ffffff29;cursor:pointer}.color-swatch[data-color=gradient]{background:linear-gradient(135deg,#5de6ff,#6e68ff 55%,#ad66ff)}.color-swatch.is-active:after{position:absolute;inset:-4px;border:1px solid #859fff;border-radius:50%;content:""}.switch-row{display:flex;align-items:center;justify-content:space-between;min-height:32px;color:#aeb4c3;font-size:10px}.switch{position:relative;display:inline-flex;width:34px;height:19px;cursor:pointer}.switch input{position:absolute;opacity:0}.switch__track{width:100%;height:100%;border-radius:99px;background:#ffffff1f;transition:.16s ease}.switch__track:after{position:absolute;top:3px;left:3px;width:13px;height:13px;border-radius:50%;background:#c8ccd6;content:"";transition:.16s ease}.switch input:checked+.switch__track{background:linear-gradient(90deg,#477ff0,#7158ef)}.switch input:checked+.switch__track:after{left:18px;background:#fff}.layers{display:grid;gap:4px}.layer-row{display:grid;grid-template-columns:25px minmax(0,1fr) 22px;align-items:center;gap:7px;width:100%;padding:6px;border:1px solid transparent;border-radius:8px;color:#969dac;background:transparent;text-align:left}.layer-row:hover,.layer-row.is-active{color:#e3e6ee;border-color:#ffffff13;background:#ffffff0a}.layer-row__icon{display:grid;place-items:center;width:25px;height:25px;border-radius:6px;background:#ffffff0d}.layer-row__name{overflow:hidden;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.layer-row__visibility{display:grid;place-items:center;padding:0;border:0;color:#717889;background:transparent}.text-button{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:33px;margin-top:9px;border:1px dashed rgba(255,255,255,.13);border-radius:8px;color:#a9afbd;background:transparent;font-size:9px}.text-button:hover{color:#fff;border-color:#7d9bff61;background:#7d9bff0f}.danger-button{width:100%;height:32px;margin-top:8px;border:1px solid rgba(255,99,130,.18);border-radius:8px;color:#ff91a7;background:#ff63820b;cursor:pointer;font-size:9px}.danger-button[hidden]{display:none}.danger-button--element{display:grid;grid-template-columns:16px minmax(0,1fr) auto;align-items:center;gap:8px;height:36px;margin-top:2px;padding:0 9px;text-align:left}.danger-button--element svg{width:14px;height:14px}.danger-button--element kbd{padding:2px 5px;border:1px solid rgba(255,145,167,.22);border-radius:5px;color:#d7a6b1;background:#ff63820e;font-size:8px;font-family:inherit}.toast{position:fixed;z-index:30;right:316px;bottom:54px;display:flex;align-items:center;gap:9px;max-width:320px;padding:11px 14px;border:1px solid rgba(109,240,179,.2);border-radius:11px;color:#dfffee;background:#12221ceb;box-shadow:var(--shadow);font-size:10px;opacity:0;pointer-events:none;transform:translateY(8px);transition:.18s ease}.toast.is-visible{opacity:1;transform:translateY(0)}.toast__dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 12px #6df0b380}.empty-state{color:var(--muted);font-size:10px;line-height:1.5}.template-dialog{width:min(420px,calc(100vw - 40px));padding:0;border:1px solid rgba(173,198,255,.18);border-radius:18px;color:var(--text);background:radial-gradient(circle at 14% 0%,rgba(77,142,255,.15),transparent 34%),#101217;box-shadow:0 30px 120px #000000a6}.template-dialog::backdrop{background:#020306c2;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}.template-dialog form{padding:25px}.template-dialog__icon{display:grid;place-items:center;width:40px;height:40px;margin-bottom:17px;border:1px solid rgba(173,198,255,.19);border-radius:12px;color:#bdd0ff;background:linear-gradient(135deg,#4d8eff29,#8657ff1c)}.template-dialog h2{margin:0;font-family:Manrope,sans-serif;font-size:19px}.template-dialog p{margin:8px 0 20px;color:var(--muted);font-size:11px;line-height:1.55}.template-dialog__actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.dialog-button{height:36px;padding:0 14px;border-radius:9px;cursor:pointer;font-size:11px;font-weight:650}.dialog-button--secondary{border:1px solid var(--border);color:#b9bfcc;background:#ffffff09}.dialog-button--primary{border:0;color:#fff;background:linear-gradient(115deg,#3779f4,#7157ef)}@media(max-width:1260px){html,body,#app{min-width:980px}.workspace{grid-template-columns:202px minmax(480px,1fr) 274px}.topbar{grid-template-columns:250px minmax(0,1fr) 270px}.brand__copy{display:none}.sidebar__inner{padding:14px}.template-card{grid-template-columns:56px minmax(0,1fr)}.template-card canvas{width:56px;height:56px}.template-card__check{display:none}}