:root{--bg: #040813;--panel: #0A1330;--panel2: #121D3D;--line: #243257;--text: #F6F7FB;--mute: #8A93A6;--accent: #18BCFD;--accent2: #4A48FE;--danger: #FF5E5B;--grad: linear-gradient(90deg, var(--accent), var(--accent2));--ui: "Plus Jakarta Sans", system-ui, sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font:500 14px/1.4 var(--ui);-webkit-tap-highlight-color:transparent;overscroll-behavior:none}button,input,select,textarea{font:inherit;color:inherit}button,.btn{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:8px 12px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px}button:hover,.btn:hover{border-color:#3a4c7d}button:disabled{opacity:.5;cursor:default}button.primary{background:var(--grad);border:0;font-weight:700;color:#fff;white-space:nowrap}button.big{width:100%;min-height:50px;font-size:16px;margin-top:16px}button.ghost{background:transparent;border-color:transparent}button.small{min-height:30px;padding:4px 8px;font-size:12px}button.danger{color:var(--danger)}input,select,textarea{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:9px 11px;outline:none}input:focus,select:focus,textarea:focus{border-color:var(--accent)}textarea{resize:vertical}h3{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--mute);margin:18px 0 8px;font-weight:700}h3 small{text-transform:none;letter-spacing:0;font-weight:500;opacity:.8;margin-left:4px}.muted{color:var(--mute)}.err{color:var(--danger)}.row{display:flex;align-items:center;justify-content:space-between;gap:8px}.row h3{margin:0}.app{height:100%;display:grid;grid-template:"top top top" 56px "left stage right" 1fr / 340px 1fr 300px}.top{grid-area:top;display:flex;align-items:center;gap:10px;padding:0 12px;border-bottom:1px solid var(--line);background:var(--bg)}.top .name{max-width:340px;background:transparent;border-color:transparent;font-weight:700;font-size:16px}.top .name:focus{border-color:var(--line)}.formats{margin-left:auto;display:flex;gap:4px}.formats button{min-height:32px;padding:4px 10px;font-size:12px}.formats button.on,.seg button.on,.tabs button.on,.bottom button.on{border-color:var(--accent);color:var(--accent)}.left,.right{overflow-y:auto;background:var(--panel);border-right:1px solid var(--line)}.left{grid-area:left}.right{grid-area:right;border-right:0;border-left:1px solid var(--line)}.panel{padding:4px 16px 24px;display:flex;flex-direction:column;gap:8px}.panel h3:first-child,.panel .row:first-child{margin-top:14px}.stagebox{grid-area:stage;position:relative;display:flex;flex-direction:column;min-width:0;min-height:0}.tools{display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid var(--line)}.tools button,.tools .btn{min-width:40px}.tools .sep{width:1px;height:24px;background:var(--line);margin:0 4px}.tools .grow{flex:1}.canvas-wrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:20px;overflow:hidden;background:radial-gradient(circle at 50% 40%,#0d1838,var(--bg) 70%)}.canvas-wrap .konvajs-content{box-shadow:0 20px 60px #0009}.canvas-wrap.empty .hint{color:var(--mute);text-align:center;max-width:320px;line-height:1.6}.canvas-wrap.empty b{color:var(--text);font-size:18px}.tabs{display:flex;gap:6px;padding:12px 16px 0}.tabs button{flex:1}.mobile-panel,.bottom{display:none}.thumbs{display:flex;flex-wrap:wrap;gap:8px}.thumb{position:relative;width:64px;height:64px;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:repeating-conic-gradient(#16224a 0,#16224a 25%,#0e1734 0,#0e1734 50%) 0 0 / 12px 12px}.thumb img{width:100%;height:100%;object-fit:cover}.thumb .idx{position:absolute;left:4px;bottom:3px;font-size:10px;background:#000a;padding:0 4px;border-radius:4px}.thumb button{position:absolute;top:2px;right:2px;min-height:0;width:20px;height:20px;padding:0;font-size:10px;border-radius:6px;background:#000b}.thumb.add{display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--mute);cursor:pointer;background:var(--bg);border-style:dashed}.seg{display:flex;gap:6px;flex-wrap:wrap}.seg button{flex:1;flex-direction:column;gap:0}.seg button small{font-size:10px;color:var(--mute);font-weight:500}.seg.small button{min-height:32px;font-size:12px;padding:4px 6px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.field{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--mute)}.field input,.field select{color:var(--text);padding:7px 9px;font-size:13px}.field.color{flex-direction:row;align-items:center;gap:8px}.field.color span{width:90px}.field.color input[type=color]{width:40px;height:34px;padding:2px;flex:none}.field input[type=range]{padding:0;accent-color:var(--accent)}.gradbox{border:1px solid var(--line);border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:6px}.check{display:flex;gap:8px;align-items:center}.check input{width:auto}.cost{font-size:12px;color:var(--mute);margin-top:14px;border-top:1px solid var(--line);padding-top:10px}.tip{font-size:12px;margin:0}.layers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}.layers li{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;border:1px solid transparent;cursor:pointer}.layers li:hover{background:var(--panel2)}.layers li.on{border-color:var(--accent);background:var(--panel2)}.layers .ic{width:22px;text-align:center;color:var(--mute)}.layers .nm{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.progress{position:absolute;left:50%;bottom:24px;transform:translate(-50%);display:flex;gap:12px;align-items:center;background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:12px 18px;box-shadow:0 10px 40px #000a;z-index:5;white-space:nowrap}.progress span{color:var(--mute);font-size:12px}.progress.queued{white-space:normal;width:min(440px,calc(100% - 24px))}.progress.queued i{color:var(--accent);font-style:normal}.seg button small{text-align:center}.spinner{width:22px;height:22px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.toast{position:fixed;left:50%;top:66px;transform:translate(-50%);background:var(--panel2);border:1px solid var(--line);padding:10px 16px;border-radius:12px;z-index:50;max-width:min(92vw,520px);box-shadow:0 10px 30px #0009}.drawer{position:fixed;top:0;right:0;bottom:0;left:0;background:#000a;z-index:40;display:flex}.sheet{width:min(360px,90vw);height:100%;background:var(--panel);border-right:1px solid var(--line);padding:16px;display:flex;flex-direction:column;gap:12px}.plist{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px}.pitem{display:flex;align-items:center;gap:10px;padding:6px;border-radius:10px;cursor:pointer;border:1px solid transparent}.pitem:hover{background:var(--panel2)}.pitem.on{border-color:var(--accent)}.pitem img,.pitem .noimg{width:48px;height:60px;object-fit:cover;border-radius:6px;background:var(--panel2)}.pitem span{flex:1}.login{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;max-width:360px;margin:0 auto;text-align:center}.login h1{margin:0;font-size:26px}.login img{border-radius:18px}@media (max-width: 899px){.app{grid-template:"top" 52px "stage" minmax(0,52vh) "panel" 1fr "bottom" auto / 100%;height:100dvh}.left,.right{display:none}.top{padding:0 6px;gap:4px}.top .name{font-size:15px;min-width:0}.formats button{padding:4px 7px}.tools{padding:6px;gap:4px;overflow-x:auto}.tools button,.tools .btn{min-width:38px;padding:6px 8px}.canvas-wrap{padding:10px}.mobile-panel{display:block;grid-area:panel;overflow-y:auto;background:var(--panel);border-top:1px solid var(--line)}.bottom{grid-area:bottom;display:flex;gap:6px;padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line)}.bottom button{flex:1;min-height:44px}.toast{top:58px}.progress{bottom:12px}}