:root{--bg:#080a0e;--panel:#0d1016;--panel2:#121722;--line:#252b36;--text:#edf0f4;--muted:#8f98a8;--accent:#d8a33c;--accent2:#f0c765;--danger:#ef5f68;--good:#52c28b;--blue:#4da3ff;--radius:10px;--shadow:0 18px 60px rgba(0,0,0,.45)}*{box-sizing:border-box}html,body,#app{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;overflow:hidden}button,input,select,textarea{font:inherit}button{border:1px solid var(--line);background:#11161f;color:var(--text);border-radius:7px;padding:8px 11px;cursor:pointer}button:hover{border-color:#3a4353;background:#151c27}button.primary{background:linear-gradient(#e0ad47,#c88a1d);color:#15100a;border-color:#e4b353;font-weight:700}button.danger{color:#ff939a;border-color:#65343a}button:disabled{opacity:.4;cursor:not-allowed}.topbar{height:58px;background:#0b0e13;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:7px 10px;position:relative;z-index:20}.brand{display:flex;align-items:center;gap:8px;width:210px}.brand-mark{width:34px;height:34px;border:1px solid #765a24;background:linear-gradient(135deg,#d4a342,#7d5b1f);display:grid;place-items:center;border-radius:8px;font-weight:900;color:#0a0c10}.brand div{display:grid}.brand strong{font-size:12px;letter-spacing:.13em}.brand small{font-size:8px;color:var(--muted);letter-spacing:.08em}.project-name{height:36px;width:min(280px,25vw);background:transparent;color:var(--text);border:1px solid transparent;border-radius:7px;padding:0 9px}.project-name:focus{outline:none;border-color:var(--accent)}.top-center{display:flex;margin:auto;background:#11151d;border:1px solid var(--line);padding:2px;border-radius:8px}.seg{padding:5px 10px;border:none;background:transparent;color:var(--muted)}.seg.active{background:#e9ebee;color:#11151d}.top-actions{display:flex;gap:5px}.workspace{height:calc(100% - 58px);display:grid;grid-template-columns:68px 235px minmax(380px,1fr) 310px;min-height:0}.panel{background:var(--panel);min-height:0}.tool-rail{background:#0b0e13;border-right:1px solid var(--line);overflow:auto;padding:7px 4px;display:flex;flex-direction:column;gap:2px}.tool{height:54px;padding:4px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#c2c8d2;background:transparent;border-color:transparent;font-size:17px}.tool span{font-size:8px;color:#9aa3b2}.tool:hover,.tool.active{color:var(--accent2);background:#121722}.layers-panel{border-right:1px solid var(--line);display:grid;grid-template-rows:42px 1fr;min-width:0}.panel-title{height:42px;display:flex;align-items:center;justify-content:space-between;padding:0 11px;border-bottom:1px solid var(--line);font:600 9px 'IBM Plex Mono',monospace;letter-spacing:.13em;color:#8f98a8}.panel-title button{font-size:9px;padding:4px 7px}.layers-list{overflow:auto;padding:6px}.layer-row{display:grid;grid-template-columns:24px 26px minmax(0,1fr) 25px;align-items:center;min-height:48px;border:1px solid transparent;border-radius:7px;padding:2px 4px;margin-bottom:2px;cursor:default}.layer-row:hover{background:#111722}.layer-row.selected{background:rgba(216,163,60,.1);border-color:rgba(216,163,60,.38)}.layer-row .eye,.layer-row .lock{border:0;background:transparent;padding:3px;color:#8892a1}.layer-type{height:22px;width:22px;border:1px solid rgba(216,163,60,.35);border-radius:5px;display:grid;place-items:center;color:var(--accent2);font-size:8px;font-weight:700}.layer-row .name{overflow:hidden}.layer-row b{font-size:11px;font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.layer-row small{font-size:7px;color:#697486}.stage-wrap{position:relative;background-color:#07090d;background-image:linear-gradient(#171b23 1px,transparent 1px),linear-gradient(90deg,#171b23 1px,transparent 1px);background-size:28px 28px;min-width:0;min-height:0;overflow:hidden}.stage-toolbar{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:12;background:rgba(14,18,25,.94);border:1px solid var(--line);border-radius:9px;padding:4px;display:flex;align-items:center;gap:4px;box-shadow:var(--shadow)}.stage-toolbar button{padding:5px 8px}.stage-toolbar span{font:500 9px 'IBM Plex Mono';color:#9aa3b2;min-width:42px;text-align:center}.stage-toolbar label{display:flex;align-items:center;gap:5px;font-size:8px;color:#8993a2}.stage-toolbar input[type=time]{width:98px;background:#0b0f15;color:#ddd;border:1px solid var(--line);padding:5px;border-radius:5px}.stage-toolbar input[type=range]{width:80px}.stage-viewport{position:absolute;inset:0;display:grid;place-items:center;overflow:auto;touch-action:none;padding:80px 40px}.device-frame{width:474px;height:474px;border-radius:50%;background:#15191f;border:12px solid #2a2e35;box-shadow:0 20px 80px rgba(0,0,0,.6),0 0 0 2px #171a20;display:grid;place-items:center;transform-origin:center}.device-frame.ultra{border-radius:34%;border-width:14px}.device-frame.classic{border-width:18px}.watch-canvas{width:450px;height:450px;position:relative;border-radius:50%;overflow:hidden;background:#060708;touch-action:none}.watch-canvas.guides:before,.watch-canvas.guides:after{content:"";position:absolute;z-index:1000;pointer-events:none;background:rgba(216,163,60,.4)}.watch-canvas.guides:before{width:1px;top:0;bottom:0;left:225px}.watch-canvas.guides:after{height:1px;left:0;right:0;top:225px}.safe-ring{position:absolute;border:1px dashed rgba(216,163,60,.45);border-radius:50%;pointer-events:none;z-index:999}.stage-footer{position:absolute;left:12px;right:12px;bottom:8px;display:flex;justify-content:space-between;color:#687386;font:500 8px 'IBM Plex Mono';pointer-events:none}.layer-el{position:absolute;user-select:none;touch-action:none;transform-origin:center;will-change:transform}.layer-el img{width:100%;height:100%;display:block;pointer-events:none}.layer-el.selected{outline:1px solid var(--accent2)}.handle{position:absolute;width:10px;height:10px;border-radius:2px;background:#dca43b;border:1px solid #17100a;z-index:10}.handle.nw{left:-5px;top:-5px;cursor:nwse-resize}.handle.ne{right:-5px;top:-5px;cursor:nesw-resize}.handle.sw{left:-5px;bottom:-5px;cursor:nesw-resize}.handle.se{right:-5px;bottom:-5px;cursor:nwse-resize}.rotate-handle{position:absolute;width:12px;height:12px;border-radius:50%;background:#58a7ff;left:50%;top:-28px;transform:translateX(-50%);cursor:grab;border:2px solid #071321}.pivot-dot{position:absolute;width:12px;height:12px;border-radius:50%;border:2px solid #fff;background:#ef4150;transform:translate(-50%,-50%);z-index:30;box-shadow:0 0 0 3px rgba(239,65,80,.25)}.pivot-line{position:absolute;left:50%;top:50%;width:1px;height:1px;background:transparent}.text-layer{display:flex;align-items:center;justify-content:center;width:100%;height:100%;white-space:pre;overflow:hidden}.shape{width:100%;height:100%}.marker-host{position:absolute;inset:0}.marker{position:absolute;display:flex;align-items:center;justify-content:center;transform-origin:center}.progress-svg{width:100%;height:100%;overflow:visible}.complication{width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;border-radius:8px;overflow:hidden}.light-layer{width:100%;height:100%;border-radius:50%;pointer-events:none}.inspector{border-left:1px solid var(--line);overflow:auto;padding:0 14px 30px}.field{display:grid;gap:6px;margin-top:13px}.field>span,.field>label{font:500 9px 'IBM Plex Mono';letter-spacing:.07em;color:#8993a2}.field input,.field select,.field textarea{width:100%;height:35px;border-radius:6px;border:1px solid var(--line);background:#f5f4f2;color:#16191f;padding:0 9px}.field input[type=color]{padding:2px;height:35px}.field input[type=range]{padding:0;background:transparent}.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}.color-row{display:grid;grid-template-columns:42px 1fr;gap:7px}.inspector-section{border-top:1px solid var(--line);margin-top:18px;padding-top:12px}.inspector-section h3{font-size:10px;margin:0 0 8px;color:#d3d7df;text-transform:uppercase;letter-spacing:.09em}.inspector-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:15px}.font-select option{font-size:16px}.font-preview{font-size:25px;padding:8px 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}.badge{display:inline-flex;padding:3px 6px;border-radius:999px;font-size:8px;border:1px solid var(--line);color:#9ea7b6}.good{color:var(--good)}.warn{color:#f1bd59}.bad{color:#ff737b}.help{font-size:10px;color:#7f8999;line-height:1.5;margin-top:7px}.divider{border-top:1px solid var(--line);margin:15px 0}dialog{background:#0d1118;color:var(--text);border:1px solid #313948;border-radius:12px;width:min(760px,calc(100vw - 30px));max-height:86vh;box-shadow:var(--shadow);padding:0}dialog::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(4px)}.modal-head{height:50px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 15px}.modal-head h2{font-size:16px}.modal-head button{border:0;background:transparent;font-size:22px}.health-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:14px}.health-card{border:1px solid var(--line);border-radius:8px;padding:12px}.health-card strong{font-size:22px;display:block}.issue-list{padding:0 14px 16px;display:grid;gap:6px}.issue{border:1px solid var(--line);border-radius:7px;padding:10px;display:grid;grid-template-columns:70px 1fr;gap:9px}.issue .sev{font:600 8px 'IBM Plex Mono'}.export-content{padding:15px}.export-options{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}.export-options button{height:70px}.image-lab{padding:14px;display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:14px}.image-lab canvas{width:100%;max-height:68vh;background:#1a1f29;border:1px solid var(--line);object-fit:contain}.lab-controls{display:flex;flex-direction:column;gap:9px}.toast{position:fixed;right:18px;bottom:18px;padding:11px 14px;background:#171d27;color:#fff;border:1px solid #364053;border-radius:8px;z-index:9999;box-shadow:var(--shadow);font-size:12px}.motion-swing{animation:wfSwing var(--motion-duration,2s) ease-in-out infinite alternate}.motion-pulse{animation:wfPulse var(--motion-duration,2s) ease-in-out infinite}.motion-float{animation:wfFloat var(--motion-duration,2.5s) ease-in-out infinite alternate}.motion-spin{animation:wfSpin var(--motion-duration,4s) linear infinite}.motion-fade{animation:wfFade var(--motion-duration,2s) ease-in-out infinite alternate}@keyframes wfSwing{from{rotate:calc(var(--motion-amp,10)*-1deg)}to{rotate:calc(var(--motion-amp,10)*1deg)}}@keyframes wfPulse{0%,100%{scale:1}50%{scale:calc(1 + var(--motion-amp,.08))}}@keyframes wfFloat{from{translate:0 calc(var(--motion-amp,8)*-1px)}to{translate:0 calc(var(--motion-amp,8)*1px)}}@keyframes wfSpin{to{rotate:360deg}}@keyframes wfFade{from{opacity:.35}to{opacity:1}}@media(max-width:1050px){.workspace{grid-template-columns:62px 190px minmax(360px,1fr)}.inspector{position:absolute;right:0;top:58px;bottom:0;width:300px;z-index:30;box-shadow:-16px 0 42px rgba(0,0,0,.45)}.top-actions button{padding:7px}.brand{width:170px}.project-name{width:180px}}@media(max-width:760px){html,body,#app{overflow:auto}.topbar{height:auto;min-height:58px;flex-wrap:wrap;position:sticky;top:0}.brand{width:140px}.project-name{width:45vw}.top-center{order:3;margin:0}.top-actions{overflow:auto;max-width:100%;order:4}.workspace{height:auto;min-height:calc(100vh - 58px);grid-template-columns:52px 1fr;grid-template-rows:620px auto}.tool-rail{grid-column:1;grid-row:1}.layers-panel{display:none}.stage-wrap{grid-column:2;grid-row:1;min-height:620px}.inspector{position:static;grid-column:1/3;grid-row:2;width:auto;border-top:1px solid var(--line);box-shadow:none}.stage-toolbar{left:8px;right:8px;transform:none;overflow:auto;justify-content:flex-start}.device-frame{transform:scale(.72)}.image-lab{grid-template-columns:1fr}.export-options{grid-template-columns:1fr}}
.dashboard-actions{display:flex;gap:8px;margin-bottom:18px}.template-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:8px 0 20px}.template-card{border:1px solid var(--line);background:#111722;border-radius:9px;padding:10px;cursor:pointer}.template-card:hover{border-color:var(--accent)}.template-card b{display:block;font-size:12px}.template-card span{font-size:9px;color:var(--muted)}.template-preview{height:100px;border-radius:50%;width:100px;margin:8px auto;background:#08090b;border:6px solid #2b3038;position:relative;display:grid;place-items:center;overflow:hidden}.template-preview:after{content:'10:08';font-weight:700;color:#f3f3f3}.cloud-projects{display:grid;gap:7px}.cloud-project-row{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:8px;padding:9px}.cloud-project-row div{display:grid}.cloud-project-row small{color:var(--muted);font-size:9px}.auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.auth-grid section{border:1px solid var(--line);border-radius:9px;padding:14px}.auth-grid h3,.export-content h3{font-size:12px;letter-spacing:.06em;text-transform:uppercase}.account-ok{border:1px solid #285943;background:#0e2018;border-radius:9px;padding:14px;margin-bottom:14px}.account-ok b{display:block}.account-ok span{color:#9fd8bc;font-size:11px}@media(max-width:760px){.template-grid{grid-template-columns:1fr 1fr}.auth-grid{grid-template-columns:1fr}}