:root{--bg:#eef1f7;--panel:#fff;--ink:#172033;--muted:#697386;--line:#dfe3ec;--brand:#5b4ee8;--brand2:#4035bd;--danger:#c43c4a;--shadow:0 16px 48px rgba(27,34,58,.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,#app{height:100%;margin:0}body{background:var(--bg);font-size:16px}button,input,textarea,select{font:inherit}button{cursor:pointer}.boot,.auth-page{min-height:100%;display:grid;place-items:center}.boot{align-content:center;color:var(--muted)}.spinner{width:28px;height:28px;border:3px solid #d8dbea;border-top-color:var(--brand);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.auth-card{width:min(440px,calc(100% - 32px));padding:42px;background:var(--panel);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}.brand-mark{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:linear-gradient(145deg,var(--brand),#8d7fff);color:#fff;font-weight:900;font-size:22px}.auth-card h1{font-size:28px;margin:24px 0 8px}.auth-card p{color:var(--muted);line-height:1.6}.field{display:grid;gap:7px;margin:18px 0}.field label{font-size:14px;font-weight:750}.field input,.field textarea,.field select{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 12px;background:#fff;color:var(--ink)}.field textarea{min-height:96px;resize:vertical}.field input:focus,.field textarea:focus,.field select:focus,button:focus-visible{outline:3px solid rgba(91,78,232,.22);outline-offset:1px;border-color:var(--brand)}
.btn{border:1px solid transparent;border-radius:9px;padding:10px 14px;font-weight:750;background:#fff;color:var(--ink)}.btn-primary{background:var(--brand);color:#fff}.btn-primary:hover{background:var(--brand2)}.btn-secondary{border-color:var(--line)}.btn-danger{color:var(--danger);border-color:#efcbd0}.btn-icon{display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid var(--line)}.btn:disabled{opacity:.45;cursor:not-allowed}.wide{width:100%}.error{padding:10px 12px;border-radius:9px;background:#fff0f1;color:#9f2634;font-size:14px}.muted{color:var(--muted)}
.dashboard{min-height:100%;display:grid;grid-template-columns:240px 1fr}.side{padding:26px 18px;background:#151927;color:#fff}.side-brand{display:flex;align-items:center;gap:12px;margin-bottom:36px}.side-brand .brand-mark{width:38px;height:38px;font-size:18px}.side-brand strong{font-size:15px}.nav{display:grid;gap:6px}.nav button{padding:11px 12px;border:0;border-radius:8px;background:transparent;color:#aeb7ca;text-align:left}.nav button.active,.nav button:hover{background:#272c3e;color:#fff}.side-footer{position:fixed;left:18px;bottom:22px}.main{padding:34px clamp(24px,4vw,58px)}.main-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:30px}.main-head h1{font-size:30px;margin:0}.actions{display:flex;gap:10px;flex-wrap:wrap}.projects{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}.project-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 5px 18px rgba(26,33,57,.05)}.thumb{height:150px;padding:20px;background:linear-gradient(135deg,#f5f6fb,#e4e7f3);display:flex;align-items:flex-end}.thumb span{font-size:34px;font-weight:900;color:#c1c6d5}.card-body{padding:18px}.card-body h2{font-size:18px;margin:0 0 6px}.card-body p{font-size:13px;color:var(--muted);margin:0 0 16px}.card-actions{display:flex;gap:7px;flex-wrap:wrap}.empty{grid-column:1/-1;padding:70px 30px;text-align:center;background:#fff;border:1px dashed #cbd0dc;border-radius:15px}.empty h2{margin-top:0}.file-input{display:none}
.editor{height:100%;display:grid;grid-template-rows:58px 42px 1fr;background:#dfe3ec;overflow:hidden}.topbar{display:flex;align-items:center;gap:10px;padding:0 12px;background:#171b28;color:#fff;border-bottom:1px solid #2d3346}.topbar .back{color:#fff;background:transparent;border-color:#3b435a}.project-title{min-width:130px;max-width:210px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.topbar-spacer{flex:1}.save-state{font-size:13px;color:#adb6ca;white-space:nowrap}.viewport-group,.mode-group{display:flex;background:#252b3b;border-radius:8px;padding:3px}.viewport-group button,.mode-group button{border:0;background:transparent;color:#b8c0d2;padding:7px 10px;border-radius:6px}.viewport-group button.active,.mode-group button.active{background:#fff;color:#161b29}.page-picker{display:flex;align-items:center;gap:6px;color:#adb6ca;font-size:12px}.page-picker select{max-width:170px;padding:7px 9px;border:1px solid #3b435a;border-radius:7px;background:#252b3b;color:#fff}.editor-tip{display:flex;align-items:center;padding:0 18px;background:#fff8d9;border-bottom:1px solid #eadc9b;color:#5a4a10;font-size:13px}.workspace{position:relative;min-height:0;display:grid;grid-template-columns:220px minmax(380px,1fr) 350px;gap:1px;background:#cdd2de}.panel{min-width:0;min-height:0;background:#fff;display:flex;flex-direction:column}.panel-head{height:45px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid var(--line);font-weight:800;font-size:14px}.panel-head.inset{margin:20px -14px 12px;border-top:1px solid var(--line)}.panel-scroll{overflow:auto;padding:14px}.palette{display:grid;grid-template-columns:1fr 1fr;gap:8px}.palette button{min-height:54px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);font-size:13px;font-weight:700}.palette button:hover{border-color:var(--brand);color:var(--brand)}.tool-stack{display:grid;gap:8px}.small{font-size:13px;line-height:1.5}.element-name{display:inline-block;margin:0 0 12px;padding:5px 8px;border-radius:6px;background:#eef0ff;color:var(--brand2);font:700 13px ui-monospace,monospace}.inspector-group{margin:0 -14px;border-top:1px solid var(--line)}.inspector-group:last-child{border-bottom:1px solid var(--line)}.inspector-group summary{padding:13px 14px;font-size:14px;font-weight:800;cursor:pointer;background:#fafbfe}.inspector-group summary:hover{background:#f3f4fa}.inspector-body{padding:2px 14px 16px}.style-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.style-grid .field{min-width:0}.inspector-secondary{margin-top:8px}.field input[type=range]{padding:7px 0}
.stage{min-width:0;min-height:0;display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:24px;background:#dfe3ea}.canvas-shell{height:100%;width:100%;max-width:1440px;background:#fff;box-shadow:var(--shadow);transition:width .2s}.canvas-shell.tablet{width:768px}.canvas-shell.mobile{width:390px}.canvas{display:block;width:100%;height:100%;border:0;background:#fff}.code-drawer{position:absolute;left:220px;right:350px;bottom:0;height:48%;min-height:280px;background:#101522;color:#e8edf8;box-shadow:0 -12px 35px rgba(16,21,34,.2);display:none;z-index:5}.code-drawer.open{display:grid;grid-template-rows:54px 1fr}.code-head{display:flex;align-items:center;gap:12px;padding:7px 12px;border-bottom:1px solid #2c3345}.code-head label{display:flex;align-items:center;gap:8px;font-size:13px}.code-head select{min-width:240px;max-width:420px;padding:7px;border-radius:7px;background:#202738;color:#fff;border:1px solid #3a4358}.code-head #file-kind{margin-right:auto}.code-head .back{color:#fff;background:transparent;border-color:#3b435a}.code-area{display:block;width:100%;height:100%;resize:none;border:0;outline:0;background:#101522;color:#d9e2f1;padding:18px;font:14px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;tab-size:2}.binary-note{display:none;place-items:center;color:#aab4c8}.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);padding:11px 16px;background:#171b28;color:#fff;border-radius:9px;box-shadow:var(--shadow);z-index:20}.modal-backdrop{position:fixed;inset:0;background:rgba(10,14,24,.55);display:grid;place-items:center;z-index:30}.modal{width:min(520px,calc(100% - 32px));max-height:85vh;overflow:auto;background:#fff;border-radius:16px;padding:24px;box-shadow:var(--shadow)}.modal h2{margin-top:0}.revision{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:13px}
@media(max-width:1200px){.workspace{grid-template-columns:190px minmax(340px,1fr) 300px}.code-drawer{left:190px;right:300px}.viewport-group{display:none}}@media(max-width:800px){.dashboard{grid-template-columns:1fr}.side{display:none}.workspace{grid-template-columns:1fr}.workspace>.panel{display:none}.stage{padding:12px}.topbar{overflow-x:auto}.project-title{min-width:120px}.code-drawer{left:0;right:0}.editor{min-width:720px}}