:root{--bg:#f4f5f7;--panel:#fff;--ink:#202124;--muted:#73777f;--line:#e7e8ec;--brand:#7c3aed;--brand2:#ec4899;--dark:#16171a;--danger:#dc2626;--shadow:0 12px 35px rgba(20,21,26,.12);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink)}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--bg)}button,input,select,textarea{font:inherit}.hidden{display:none!important}.boot{height:100%;display:grid;place-content:center;justify-items:center;gap:10px;background:#f8f7fb}.boot-mark,.brand-gem{display:grid;place-items:center;background:linear-gradient(145deg,var(--brand),var(--brand2));color:white;border-radius:12px;font-weight:900;box-shadow:0 8px 25px rgba(124,58,237,.28)}.boot-mark{width:54px;height:54px;font-size:28px}.boot span{color:var(--muted)}.auth-view{height:100%;display:grid;place-items:center;background:radial-gradient(circle at 25% 20%,#eee4ff,transparent 36%),radial-gradient(circle at 80% 80%,#ffe3f1,transparent 34%),#f8f7fb}.auth-card{width:min(440px,calc(100vw - 36px));padding:36px;background:#fff;border-radius:24px;box-shadow:0 25px 70px rgba(62,39,100,.15)}.auth-brand{display:flex;gap:14px;align-items:center;margin-bottom:26px}.brand-gem{width:46px;height:46px;font-size:22px}.brand-gem.small{width:34px;height:34px;border-radius:9px}.auth-brand h1{margin:0;font-size:24px}.auth-brand p,.auth-note{margin:3px 0 0;color:var(--muted)}label{display:grid;gap:7px;font-size:12px;font-weight:700;color:#555b65;margin-bottom:14px}input,select,textarea{border:1px solid #dfe1e6;border-radius:10px;padding:10px 12px;background:#fff;color:var(--ink);outline:none}input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(124,58,237,.1)}.auth-status{font-size:13px;margin-bottom:12px;color:var(--danger)}.button,.icon-button,.avatar{border:0;cursor:pointer}.button{padding:9px 14px;border-radius:9px;font-weight:700;background:#eceef2;color:#373a40}.button:hover{filter:brightness(.97)}.button.primary{background:linear-gradient(135deg,var(--brand),#9446ef);color:#fff;box-shadow:0 5px 14px rgba(124,58,237,.22)}.button.ghost{background:white;border:1px solid var(--line)}.button.danger{background:#fee2e2;color:#991b1b}.button.wide{width:100%}.button.large{padding:13px 20px;font-size:15px}.icon-button{width:34px;height:34px;border-radius:8px;background:transparent;color:#555;display:grid;place-items:center;font-size:18px}.icon-button:hover{background:#eef0f3}.icon-button.danger:hover{background:#fee2e2;color:var(--danger)}.app{height:100%;display:grid;grid-template-rows:58px 1fr}.topbar{height:58px;background:var(--dark);color:#fff;display:grid;grid-template-columns:245px 1fr auto;align-items:center;padding:0 14px;gap:18px}.brand{display:flex;align-items:center;gap:10px}.brand>div,.project-switcher>div{display:grid}.brand small,.project-switcher small{color:#9ba0aa;font-size:11px}.project-switcher{display:flex;gap:10px;align-items:center;min-width:0}.project-switcher strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.top-actions{display:flex;align-items:center;gap:7px}.topbar .icon-button,.topbar .button.ghost{color:#e7e8ea;background:#25272c;border-color:#35383f}.topbar .icon-button:hover,.topbar .button.ghost:hover{background:#33363d}.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#f472b6,#7c3aed);color:white;font-size:11px;font-weight:800}.dashboard-view{overflow:auto;background:#f7f7f9;padding:42px clamp(24px,5vw,72px)}.dashboard-hero{background:linear-gradient(110deg,#1d1630,#33204e 60%,#5d2b75);color:#fff;border-radius:25px;padding:44px;display:flex;justify-content:space-between;align-items:end;box-shadow:var(--shadow)}.dashboard-hero h1{font-size:clamp(30px,4vw,50px);line-height:1.05;max-width:760px;margin:10px 0 16px}.dashboard-hero p{max-width:680px;color:#d6d0df;font-size:16px}.eyebrow{font-size:11px;letter-spacing:.16em;color:#d8b4fe;font-weight:800}.dashboard-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:26px;margin-top:34px}.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.section-heading h2{margin:0}.section-heading p{margin:4px 0;color:var(--muted)}.project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}.project-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;cursor:pointer;transition:.18s;box-shadow:0 4px 14px rgba(20,21,26,.04)}.project-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.project-thumb{height:190px;background:linear-gradient(145deg,#fcf7ec,#f6e4d8);display:grid;place-items:center}.mini-phone{width:84px;height:162px;border:5px solid #202126;border-radius:15px;background:#fff;box-shadow:0 8px 22px rgba(0,0,0,.2);overflow:hidden;display:grid;place-content:center;text-align:center;padding:8px}.mini-phone strong{font-family:Georgia,serif;font-size:12px}.project-meta{padding:14px}.project-meta strong{display:block}.project-meta small{color:var(--muted)}.empty-state{padding:48px;text-align:center;background:#fff;border:1px dashed #cdd0d6;border-radius:16px;color:var(--muted)}.dashboard-side{display:grid;align-content:start;gap:12px}.quick-card{border:1px solid var(--line);background:#fff;border-radius:14px;padding:17px;text-align:left;display:flex;gap:13px;align-items:center;cursor:pointer}.quick-card:hover{border-color:#c8b5f4;box-shadow:0 8px 20px rgba(124,58,237,.08)}.quick-card>span{width:42px;height:42px;border-radius:11px;background:#f0e9ff;color:var(--brand);display:grid;place-items:center;font-size:19px}.quick-card div{display:grid;gap:4px}.quick-card small{color:var(--muted)}.editor-view{min-height:0;display:grid;grid-template-columns:330px minmax(420px,1fr) 330px}.left-panel{display:grid;grid-template-columns:72px 1fr;background:#fff;border-right:1px solid var(--line);min-width:0}.tool-rail{background:#202126;padding:9px 7px;display:flex;flex-direction:column;gap:5px}.tool-rail button{border:0;background:transparent;color:#b8bbc2;border-radius:10px;padding:9px 3px;display:grid;justify-items:center;gap:3px;cursor:pointer}.tool-rail button span{font-size:19px}.tool-rail button small{font-size:10px}.tool-rail button:hover,.tool-rail button.active{background:#35323d;color:#fff}.drawer{min-width:0;display:grid;grid-template-rows:50px 1fr}.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:0 14px;border-bottom:1px solid var(--line)}.drawer-content{padding:14px;overflow:auto}.search-box{width:100%;margin-bottom:14px}.library-grid,.element-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.tile{border:1px solid var(--line);border-radius:12px;padding:12px;background:#fff;cursor:grab;text-align:center;display:grid;gap:7px;min-height:84px;place-content:center}.tile:hover{border-color:#bba2ed;background:#fbf9ff}.tile .tile-icon{font-size:22px}.tile small{font-size:11px;color:var(--muted)}.section-label{font-size:11px;color:#81858e;letter-spacing:.08em;font-weight:800;margin:18px 0 9px}.workspace{min-width:0;min-height:0;display:grid;grid-template-rows:50px 1fr 150px;background:#eceef1}.workspace-toolbar{background:#fff;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 14px}.phase-tabs{display:flex;gap:4px}.phase-tabs button{border:0;background:transparent;padding:9px 13px;border-radius:8px;cursor:pointer;font-weight:700;color:#646872}.phase-tabs button.active{background:#efe9ff;color:var(--brand)}.canvas-controls{display:flex;align-items:center;gap:7px}.canvas-controls select{padding:7px 9px}.stage{overflow:auto;display:grid;place-items:start center;padding:34px 40px;background-color:#e9eaed;background-image:linear-gradient(45deg,#e4e5e8 25%,transparent 25%),linear-gradient(-45deg,#e4e5e8 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e4e5e8 75%),linear-gradient(-45deg,transparent 75%,#e4e5e8 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}.phone-shell{position:relative;width:420px;border:10px solid #222429;border-radius:35px;background:#111;box-shadow:0 28px 55px rgba(30,31,35,.24);transform-origin:top center}.device-top{height:20px;background:#222429;display:grid;place-items:start center}.device-top span{width:92px;height:17px;background:#111;border-radius:0 0 12px 12px}.device-bottom{height:13px;background:#222429;border-radius:0 0 20px 20px}.canvas{position:relative;width:390px;min-height:740px;background:#fff;overflow:hidden;touch-action:none;outline:none}.canvas.interact-mode{overflow-y:auto;touch-action:auto}.canvas-element{position:absolute;min-width:20px;min-height:20px;cursor:move;user-select:none}.canvas-element.selected{outline:2px solid #7c3aed;outline-offset:2px}.canvas-element.locked{cursor:not-allowed}.canvas-element [contenteditable="true"]{outline:none;user-select:text}.resize-handle{position:absolute;width:10px;height:10px;background:white;border:2px solid #7c3aed;border-radius:50%;z-index:99}.resize-handle.se{right:-7px;bottom:-7px;cursor:nwse-resize}.resize-handle.e{right:-7px;top:50%;transform:translateY(-50%);cursor:ew-resize}.resize-handle.s{bottom:-7px;left:50%;transform:translateX(-50%);cursor:ns-resize}.element-label{position:absolute;left:-2px;top:-24px;background:#7c3aed;color:#fff;font-size:10px;padding:3px 6px;border-radius:4px;white-space:nowrap}.bottom-dock{background:#fff;border-top:1px solid var(--line);min-height:0}.bottom-tabs{height:37px;display:flex;gap:4px;padding:4px 10px;border-bottom:1px solid var(--line)}.bottom-tabs button{border:0;background:transparent;padding:5px 12px;border-radius:6px;cursor:pointer;font-size:12px}.bottom-tabs button.active{background:#f0eaff;color:var(--brand)}.bottom-panel{height:112px;overflow:auto;padding:9px 12px}.layer-list{display:flex;gap:8px;align-items:center}.layer-chip{border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 11px;min-width:110px;cursor:pointer;display:flex;align-items:center;gap:8px}.layer-chip.active{border-color:var(--brand);background:#f6f2ff}.right-panel{background:#fff;border-left:1px solid var(--line);display:grid;grid-template-rows:58px auto 1fr;min-width:0}.selection-head{display:flex;justify-content:space-between;align-items:center;padding:0 14px;border-bottom:1px solid var(--line)}.selection-head>div{display:grid;min-width:0}.selection-head strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.selection-head small{color:var(--muted)}.context-bar{display:flex;gap:4px;padding:8px 10px;border-bottom:1px solid var(--line);overflow:auto}.context-bar button{border:0;background:#f2f3f5;border-radius:7px;padding:7px 8px;cursor:pointer;font-size:12px}.inspector{overflow:auto;padding:14px}.inspector-empty{height:100%;display:grid;place-content:center;text-align:center;color:var(--muted);gap:8px}.prop-section{border-bottom:1px solid var(--line);padding-bottom:15px;margin-bottom:15px}.prop-section h3{font-size:12px;margin:0 0 11px;display:flex;justify-content:space-between}.prop-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.prop-grid.one{grid-template-columns:1fr}.prop-grid label{margin:0}.inline-input{display:flex;align-items:center;border:1px solid #dfe1e6;border-radius:9px;overflow:hidden}.inline-input input{border:0;min-width:0;width:100%;border-radius:0}.inline-input span{padding-right:9px;color:var(--muted);font-size:11px}.range-row{display:grid;grid-template-columns:1fr 60px;gap:8px;align-items:center}.range-row input[type=range]{padding:0;border:0}.color-input{height:38px;padding:4px}.textarea-code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;min-height:90px;resize:vertical}.switch-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;margin:9px 0}.dialog{border:0;border-radius:18px;padding:0;box-shadow:0 30px 90px rgba(0,0,0,.3);max-width:min(1100px,calc(100vw - 40px));width:900px}.dialog::backdrop{background:rgba(12,13,17,.62);backdrop-filter:blur(3px)}.dialog.small{width:430px}.dialog>header{height:62px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.dialog>header>div{display:grid}.dialog>header small{color:var(--muted)}.dialog-body{padding:20px;max-height:70vh;overflow:auto}.preview-dialog{width:auto}.preview-stage{min-width:500px;min-height:760px;padding:24px 60px;background:#dfe1e5;display:grid;place-items:start center}.preview-phone{width:410px;height:780px;border:10px solid #202126;border-radius:34px;overflow:hidden;background:#fff;box-shadow:0 25px 60px rgba(0,0,0,.25)}.preview-phone iframe{width:100%;height:100%;border:0}.library-dialog{width:min(1200px,calc(100vw - 30px))}.library-studio{display:grid;grid-template-columns:420px 1fr;height:720px}.library-form{padding:18px;border-right:1px solid var(--line);overflow:auto}.code-tabs{display:flex;gap:5px;margin-bottom:8px}.code-tabs button{border:0;padding:7px 10px;border-radius:7px;cursor:pointer}.code-tabs button.active{background:#ede7ff;color:var(--brand)}.code-editor{width:100%;height:300px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;resize:none}.library-preview{background:#e9eaed;padding:22px;display:grid;grid-template-rows:auto 1fr;gap:12px}.preview-toolbar{display:flex;justify-content:space-between}.component-phone{width:390px;height:650px;margin:auto;border:9px solid #202126;border-radius:30px;overflow:hidden;background:#fff}.component-phone iframe{width:100%;height:100%;border:0}.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#202126;color:#fff;padding:11px 16px;border-radius:9px;z-index:999;box-shadow:var(--shadow);animation:toast .25s ease}@keyframes toast{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}@media(max-width:1200px){.editor-view{grid-template-columns:290px minmax(400px,1fr) 300px}.topbar{grid-template-columns:200px 1fr auto}.dashboard-grid{grid-template-columns:1fr}.dashboard-side{grid-template-columns:repeat(3,1fr)}}

.button.is-loading{cursor:wait;opacity:.9}.button-spinner{display:inline-block;width:14px;height:14px;margin-right:8px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;vertical-align:-2px;animation:eicSpin .7s linear infinite}@keyframes eicSpin{to{transform:rotate(360deg)}}