:root{--bg:#f4f5f7;--panel:#fff;--ink:#07080a;--muted:#667085;--line:#e5e7eb;--soft:#f8fafc;--accent:#000;--danger:#d92d20;--radius:18px;--shadow:0 22px 70px rgba(15,23,42,.12);--rail:82px;--top:78px;--left:310px;--right:390px}*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--ink);overflow:hidden}button,input,textarea,select{font:inherit}.btn,.icon-btn,.mini-btn,.select-small{border:1px solid var(--line);background:#fff;color:#101828;font-weight:900;border-radius:16px;padding:12px 18px;cursor:pointer;transition:.16s;box-shadow:0 1px 0 rgba(0,0,0,.03)}.btn:hover,.icon-btn:hover,.mini-btn:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(0,0,0,.08)}.btn.primary{background:#000;color:#fff;border-color:#000}.btn.ghost{background:#f8fafc}.btn.full{width:100%}.btn.danger,.mini-btn.danger{background:#fff1f1;color:var(--danger);border-color:#ffd8d8}.icon-btn{width:46px;height:46px;padding:0}.mini-btn{padding:9px 13px;border-radius:13px;font-size:13px}.select-small{padding:11px 14px}.device-select{min-width:154px}.login-screen{min-height:100vh;display:grid;grid-template-columns:1.18fr .82fr;background:#050505;color:#fff;overflow:hidden}.login-brand{padding:58px;display:flex;flex-direction:column;justify-content:center;background:radial-gradient(circle at 20% 20%,#2b2b2b,transparent 32%),linear-gradient(135deg,#050505,#141414)}.brand-badge{width:84px;height:84px;border-radius:24px;background:#000;border:1px solid #333;display:grid;place-items:center;margin-bottom:38px}.brand-badge img{width:58px}.eyebrow{letter-spacing:.35em;color:#9aa4b2;font-weight:950;font-size:13px}.login-brand h1{font-size:72px;line-height:.94;margin:12px 0 22px;letter-spacing:-.06em}.login-copy{font-size:20px;line-height:1.7;color:#cdd5df;max-width:760px}.login-features{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.login-features span{background:#fff;color:#000;border-radius:999px;padding:12px 18px;font-weight:950}.login-card{align-self:center;justify-self:center;width:min(430px,90%);background:#fff;color:#111;border-radius:34px;padding:36px;box-shadow:var(--shadow)}.login-logo{width:68px;border-radius:18px;background:#000;padding:10px}.login-card h2{font-size:32px;margin:20px 0 6px}.login-card p{color:var(--muted);line-height:1.5}.login-card label{display:block;font-weight:900;margin:18px 0 8px}.login-card input{width:100%;border:1px solid var(--line);border-radius:18px;padding:15px;margin-top:8px}.hint{background:#f6f7f9;border:1px solid var(--line);padding:14px;border-radius:18px;margin-top:20px;color:#667085;font-size:13px}.app-shell{min-height:100vh}.rail{position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:50;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;padding:16px 10px;gap:8px}.rail-logo{width:58px;height:58px;border-radius:18px;background:#000;display:grid;place-items:center;margin-bottom:16px}.rail-logo img{width:42px}.rail-btn{width:58px;height:52px;border:0;background:transparent;border-radius:16px;font-size:20px;font-weight:950;cursor:pointer;color:#667085;position:relative}.rail-btn span{display:none;position:absolute;left:66px;top:10px;z-index:1000;background:#000;color:#fff;border-radius:12px;padding:8px 10px;font-size:12px;white-space:nowrap}.rail-btn:hover span{display:block}.rail-btn.active{background:#000;color:#fff}.rail-btn.bottom{margin-top:auto}.topbar{position:fixed;left:var(--rail);right:0;top:0;height:var(--top);z-index:40;background:rgba(255,255,255,.96);backdrop-filter:blur(22px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 24px}.top-title{flex:1;min-width:0}.top-title p{margin:0 0 2px;color:#7b8798;letter-spacing:.34em;font-size:11px;font-weight:950}.top-title h1{margin:0;font-size:24px;letter-spacing:-.045em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.top-actions{display:flex;align-items:center;gap:9px}.left-panel{position:fixed;left:var(--rail);top:var(--top);bottom:0;width:var(--left);z-index:30;background:#fff;border-right:1px solid var(--line);padding:22px;overflow:auto;transition:transform .22s,box-shadow .22s}.left-hidden .left-panel{transform:translateX(calc(-1 * var(--left)))}.right-panel{position:fixed;right:0;top:var(--top);bottom:0;width:var(--right);z-index:30;background:#fff;border-left:1px solid var(--line);padding:18px;overflow:auto;transition:transform .22s,box-shadow .22s}.right-hidden .right-panel{transform:translateX(var(--right))}.canvas-area{position:fixed;left:var(--rail);right:0;top:var(--top);bottom:0;z-index:1;padding:12px 16px 16px 16px;transition:none}.focus-mode .left-panel,.focus-mode .right-panel{transform:translateX(-120%)!important}.focus-mode .right-panel{transform:translateX(120%)!important}.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.panel-head h2,.panel-head h3{margin:0;font-size:24px;letter-spacing:-.045em}.panel-head.small{margin-top:26px}.panel-head.small h3{font-size:12px;color:#718096;letter-spacing:.25em;text-transform:uppercase}.upload-drop{border:2px dashed #cbd5e1;border-radius:22px;display:block;text-align:center;padding:22px;cursor:pointer;background:#fbfcfe;color:#344054;margin-bottom:18px}.upload-drop strong{display:block;font-size:17px}.upload-drop span{display:block;color:#667085;margin-top:6px}.project-card,.file-card{border:1px solid var(--line);background:#fff;border-radius:18px;padding:14px;margin-bottom:10px;cursor:pointer;font-weight:900;line-height:1.2;overflow:hidden;text-overflow:ellipsis}.project-card.active,.file-card.active{background:#000;color:#fff;border-color:#000}.project-card small,.file-card small{display:block;color:#667085;font-weight:700;margin-top:5px}.project-card.active small,.file-card.active small{color:#d0d5dd}.canvas-toolbar{height:50px;display:flex;justify-content:center;align-items:center;margin-bottom:10px;position:relative;z-index:2;pointer-events:none}.crumb{background:#fff;border:1px solid var(--line);border-radius:16px;padding:11px 15px;font-weight:900;box-shadow:0 8px 26px rgba(0,0,0,.06);max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:auto}.canvas-actions{position:absolute;right:8px;display:flex;gap:8px;pointer-events:auto}.canvas-stage{position:relative;height:calc(100vh - var(--top) - 88px);min-height:0;border-radius:26px;background:#e9edf2;overflow:auto;padding:24px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);scrollbar-gutter:stable;display:block;text-align:left}.empty-state{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:#333}.empty-state img{width:92px;border-radius:26px;background:#000;padding:14px}.empty-state h2{font-size:40px;margin:24px 0 4px}.empty-state p{max-width:560px;line-height:1.7;color:#667085}.site-frame{display:none;background:#fff;border:0;margin:0;transform-origin:top left;box-shadow:0 18px 80px rgba(15,23,42,.20);border-radius:12px;max-width:none;min-height:780px}.site-frame.loaded{display:block}.device-desktop .site-frame{width:1440px;min-width:1440px}.device-tablet .site-frame{width:820px;min-width:820px;border-radius:22px}.device-mobile .site-frame{width:390px;min-width:390px;border-radius:28px}.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;background:#f2f4f7;padding:6px;border-radius:18px;margin-bottom:16px}.tab{border:0;border-radius:13px;background:transparent;padding:11px 4px;font-size:12px;font-weight:950;cursor:pointer;color:#667085}.tab.active{background:#fff;color:#000;box-shadow:0 8px 20px rgba(0,0,0,.06)}.tool-panel h2{font-size:22px;letter-spacing:-.045em;margin:0 0 14px}.tool-panel h3{font-size:12px;color:#667085;text-transform:uppercase;letter-spacing:.18em;margin:22px 0 10px}.selected-head{border:1px solid var(--line);border-radius:22px;background:#f8fafc;padding:14px;margin-bottom:14px}.selected-head strong{display:block;font-size:16px}.selected-head small{display:block;color:#667085;margin-top:4px;line-height:1.4}.field{display:block;margin:11px 0}.field span{display:block;font-size:11px;font-weight:950;color:#667085;text-transform:uppercase;letter-spacing:.12em;margin-bottom:6px}.field input,.field textarea,.field select{width:100%;border:1px solid var(--line);border-radius:15px;padding:11px;background:#fff;min-width:0}.field textarea{min-height:88px;resize:vertical}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}.tool-row{display:flex;gap:8px;flex-wrap:wrap}.scope-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:10px 0 14px;background:#f2f4f7;border-radius:16px;padding:5px}.scope-btn{border:0;background:transparent;border-radius:12px;padding:8px 4px;font-size:11px;font-weight:950;color:#667085;cursor:pointer}.scope-btn.active{background:#000;color:#fff}.template-grid{display:grid;gap:10px}.template-card{border:1px solid var(--line);border-radius:20px;background:#fff;padding:15px;cursor:pointer;transition:.15s}.template-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.template-card strong{display:block}.template-card small{display:block;color:#667085;line-height:1.4;margin-top:5px}.template-cat{display:inline-block;font-size:10px;font-weight:950;letter-spacing:.12em;text-transform:uppercase;background:#f2f4f7;color:#667085;padding:5px 8px;border-radius:999px;margin-bottom:8px}.media-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.media-item{border:1px solid var(--line);border-radius:18px;padding:8px;background:#fff;cursor:pointer}.media-item img{width:100%;height:90px;object-fit:cover;border-radius:12px;background:#f2f4f7}.media-item small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:6px;color:#667085}.export-box,.info-box{border:1px solid var(--line);background:#f7f7f8;border-radius:22px;padding:16px;margin:14px 0;line-height:1.6;color:#475467}.toast{position:fixed;right:24px;top:90px;background:#000;color:#fff;border-radius:16px;padding:14px 18px;font-weight:900;box-shadow:var(--shadow);opacity:0;pointer-events:none;transform:translateY(-8px);transition:.2s;z-index:99}.toast.show{opacity:1;transform:translateY(0)}@media(max-width:1100px){body{overflow:auto}.rail{width:72px}.topbar{left:72px}.canvas-area{left:72px}.left-panel,.right-panel{z-index:60}.top-actions{gap:6px}.btn{padding:10px 12px}.top-title h1{font-size:20px}.login-screen{grid-template-columns:1fr}.login-brand{display:none}}