@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
:root{--ink:#171a2b;--muted:#7c8298;--line:#e8eaf1;--surface:#fff;--canvas:#f8f9fc;--purple:#635bff;--purple-soft:#f0efff;--shadow:0 8px 30px rgba(37,40,73,.06)}*{box-sizing:border-box}body{margin:0;background:var(--canvas);color:var(--ink);font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:13px}button,a{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}.app-shell{display:flex;min-height:100vh}.sidebar{background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:27px 17px 19px;width:248px;flex-shrink:0}.brand{align-items:center;display:flex;font-size:17px;font-weight:800;gap:10px;letter-spacing:-.7px;padding:0 12px 43px}.brand-mark{align-items:center;background:var(--purple);border-radius:8px;color:white;display:flex;font-family:'DM Mono';font-size:12px;height:28px;justify-content:center;width:28px}.brand-accent{color:var(--purple)}.workspace-label{color:#a3a7b8;font-size:10px;font-weight:800;letter-spacing:1.3px;padding:0 13px 12px;text-transform:uppercase}.nav-list{display:grid;gap:4px}.nav-item{align-items:center;border-radius:9px;color:#697087;display:flex;font-weight:600;gap:12px;padding:11px 12px;transition:.2s}.nav-item:hover{background:#f6f6fb;color:var(--ink)}.nav-item.active{background:var(--purple-soft);color:var(--purple)}.nav-icon{font-size:16px;text-align:center;width:17px}.nav-count{background:#f1f1f7;border-radius:10px;color:#8c91a4;font-size:10px;margin-left:auto;padding:3px 7px}.sidebar-bottom{margin-top:auto}.sidebar-bottom>.nav-item{margin-bottom:23px}.upgrade-card{background:linear-gradient(145deg,#f5f2ff,#faf9ff);border:1px solid #eae6ff;border-radius:12px;margin:0 3px 22px;padding:16px}.upgrade-icon{background:#e4e0ff;border-radius:7px;color:var(--purple);display:grid;font-size:17px;height:27px;place-items:center;width:27px}.upgrade-card strong{display:block;font-size:11px;margin-top:12px}.upgrade-card p{color:#84899e;font-size:10px;line-height:1.55;margin:6px 0 12px}.upgrade-link{color:var(--purple);font-size:10px;font-weight:800}.upgrade-link span{font-size:15px;margin-left:5px}.profile{align-items:center;display:flex;gap:9px;padding:0 5px}.avatar{align-items:center;background:#f5c2a7;border-radius:50%;color:#8b4931;display:flex;font-size:10px;font-weight:800;height:30px;justify-content:center;width:30px}.profile strong,.profile span{display:block}.profile strong{font-size:10px}.profile span{color:#9599a9;font-size:9px;margin-top:3px}.more-button{background:none;border:0;color:#a5a9b8;margin-left:auto}.main-content{max-width:1600px;min-width:0;padding:0 4.5%;width:100%}.topbar{align-items:center;border-bottom:1px solid var(--line);display:flex;height:73px;justify-content:space-between}.breadcrumb{color:#a0a4b3;font-size:11px}.breadcrumb b{color:#c7cad4;font-weight:400;margin:0 9px}.breadcrumb strong{color:#4a5065;font-weight:600}.top-actions{align-items:center;display:flex;gap:20px}.icon-button{background:none;border:0;color:#777e93;font-size:18px;padding:5px}.help-link{color:#7c8298;font-size:11px;font-weight:600}.button{align-items:center;border:1px solid transparent;border-radius:7px;display:inline-flex;font-size:11px;font-weight:700;gap:8px;justify-content:center;padding:10px 14px}.button-primary{background:var(--purple);box-shadow:0 5px 12px #635bff2b;color:#fff}.button-primary:hover{background:#5149e8}.button-secondary{background:#fff;border-color:var(--line);color:#646b80}.page-heading{align-items:end;display:flex;justify-content:space-between;padding:41px 0 27px}.eyebrow{color:var(--purple);font-size:10px;font-weight:800;letter-spacing:1.2px}.live-dot{background:#4bc7a5;border-radius:50%;display:inline-block;height:6px;margin:0 4px 1px 7px;width:6px}.page-heading h1{font-size:30px;letter-spacing:-1.4px;margin:11px 0 7px}.page-heading p{color:#858a9c;font-size:12px;margin:0}.heading-actions{display:flex;gap:9px}.viewer-grid{display:grid;gap:18px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.panel{background:var(--surface);border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow);overflow:hidden}.panel-header{align-items:center;border-bottom:1px solid var(--line);display:flex;height:53px;justify-content:space-between;padding:0 17px}.panel-title{align-items:center;display:flex;gap:9px}.panel-title strong{font-size:11px}.code-icon,.preview-icon{color:var(--purple);font-family:'DM Mono';font-size:12px}.preview-icon{font-size:17px}.unsaved{color:#a8acb9;font-size:10px;margin-left:7px}.panel-tools,.preview-tools{align-items:center;display:flex;gap:11px}.language-badge{background:#f2f1ff;border-radius:4px;color:var(--purple);font-family:'DM Mono';font-size:9px;font-weight:500;padding:5px 7px}.dots{background:none;border:0;color:#9ca1b0;letter-spacing:2px}.editor-wrap{background:#fbfbfd;display:flex;height:485px;overflow:hidden;position:relative}.line-numbers{color:#b7bac7;display:flex;flex-direction:column;font:11px/1.75 'DM Mono',monospace;padding:18px 13px 18px 17px;text-align:right;user-select:none;width:50px}.line-numbers span{height:19px}.editor-wrap textarea{background:transparent;border:0;color:#3f455c;flex:1;font:11px/1.75 'DM Mono',monospace;outline:0;overflow:auto;padding:18px 14px 18px 0;resize:none;white-space:pre;tab-size:2}.editor-footer,.preview-footer{align-items:center;color:#9a9eaf;display:flex;font-size:10px;height:40px;justify-content:space-between;padding:0 17px}.status-dot,.pulse{background:#49c6a1;border-radius:50%;display:inline-block;height:6px;margin-right:6px;width:6px}.device-button{background:none;border:0;color:#adb1bd;font-size:13px;padding:4px}.device-button.active{color:var(--purple)}.preview-stage{align-items:center;background:#f1f2f7;display:flex;height:485px;justify-content:center;overflow:auto;padding:0}.preview-stage iframe{border:0;height:100%;max-width:100%;transition:max-width .25s;width:100%}.preview-footer{border-top:1px solid var(--line)}.text-button{background:none;border:0;color:var(--purple);font-size:10px;font-weight:700}.tips-row{display:grid;gap:18px;grid-template-columns:1fr 1fr;margin:22px 0 36px}.tip-card{align-items:center;background:#fff;border:1px solid var(--line);border-radius:10px;display:flex;gap:13px;padding:14px 17px}.tip-icon{align-items:center;border-radius:8px;display:flex;font-size:15px;font-weight:800;height:31px;justify-content:center;width:31px}.tip-icon.purple{background:#f0efff;color:var(--purple)}.tip-icon.orange{background:#fff2e8;color:#e38d4e}.tip-card strong{font-size:11px}.tip-card p{color:#858a9c;font-size:10px;margin:4px 0 0}.tip-link:hover{border-color:#d7d3ff}.tip-link p span{color:var(--purple);font-size:14px;margin-left:4px}kbd{background:#f2f3f7;border:1px solid #e2e4ea;border-radius:3px;color:#656b7c;font:9px 'DM Mono';padding:2px 4px}.toast{background:#202438;border-radius:7px;bottom:25px;color:#fff;font-size:11px;left:50%;opacity:0;padding:11px 16px;pointer-events:none;position:fixed;transform:translate(-50%,12px);transition:.25s;z-index:5}.toast.show{opacity:1;transform:translate(-50%,0)}body.dark{--ink:#f1f2f8;--muted:#a7acc0;--line:#303449;--surface:#202337;--canvas:#171a2a}body.dark .sidebar,body.dark .panel,body.dark .tip-card,body.dark .topbar{background:var(--surface)}body.dark .editor-wrap{background:#1b1e30}body.dark .editor-wrap textarea{color:#c6c9dc}body.dark .preview-stage{background:#111421}body.dark .button-secondary{background:#24283b;border-color:#363a50;color:#c1c5d5}body.dark .nav-item:hover{background:#2a2d42}body.dark .breadcrumb strong{color:#c7cbda}@media(max-width:900px){.sidebar{width:205px}.main-content{padding:0 24px}.viewer-grid{grid-template-columns:1fr}.editor-wrap,.preview-stage{height:400px}}@media(max-width:620px){.sidebar{display:none}.main-content{padding:0 15px}.topbar{height:62px}.help-link{display:none}.page-heading{align-items:start;flex-direction:column;gap:18px;padding:28px 0 22px}.page-heading h1{font-size:26px}.heading-actions{width:100%}.heading-actions .button{flex:1}.top-actions{gap:8px}.button-primary{padding:9px}.tips-row{grid-template-columns:1fr}.panel-header{padding:0 12px}.editor-wrap{height:390px}.preview-stage{height:390px}}