*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#f8f9fa;--surface:#fff;--text:#1a1a2e;--text2:#555;--border:#e0e0e0;--accent:#16213e;--accent2:#0f3460;--red:#c0392b;--shadow:0 2px 12px #00000014;--editor-bg:#1e1e1e;--editor-text:#d4d4d4;--radius:8px;--transition:.2s ease}.dark{--bg:#1a1a2e;--surface:#16213e;--text:#e0e0e0;--text2:#aaa;--border:#2a2a4a;--accent:#e94560;--accent2:#c23152;--shadow:0 2px 12px #0000004d}html,body{background:var(--bg);height:100%;color:var(--text);font-family:Segoe UI,system-ui,-apple-system,sans-serif;overflow:hidden}#app{height:100%;display:flex}#sidebar{background:var(--surface);border-right:1px solid var(--border);z-index:10;width:280px;transition:transform var(--transition);flex-direction:column;display:flex}#sidebar.collapsed{height:100%;position:absolute;transform:translate(-280px)}.sidebar-header{border-bottom:1px solid var(--border);align-items:center;gap:10px;padding:16px;display:flex}.sidebar-header h1{color:var(--accent);font-size:18px;font-weight:700}.sidebar-header .logo{font-size:24px}.sidebar-nav{flex:1;padding:8px;overflow-y:auto}.sidebar-nav .section-title{text-transform:uppercase;letter-spacing:1px;color:var(--text2);padding:12px 8px 6px;font-size:11px;font-weight:600}.example-card{cursor:pointer;transition:all var(--transition);color:var(--text);border:1px solid #0000;border-radius:6px;margin:2px 0;padding:10px 12px;text-decoration:none;display:block}.example-card:hover{background:var(--bg);border-color:var(--border)}.example-card.active{background:var(--accent);color:#fff;border-color:var(--accent)}.example-card .ex-title{font-size:13px;font-weight:600}.example-card .ex-meta{color:var(--text2);margin-top:2px;font-size:11px}.example-card.active .ex-meta{color:#ffffffb3}.room-lib-item{cursor:grab;transition:all var(--transition);border:1px solid #0000;border-radius:6px;align-items:center;gap:8px;margin:2px 0;padding:8px 10px;font-size:12px;display:flex}.room-lib-item:hover{background:var(--bg);border-color:var(--border)}.room-lib-item:active{cursor:grabbing}.room-lib-item .lib-icon{text-align:center;flex-shrink:0;width:28px;font-size:18px}.room-lib-item .lib-info{flex:1}.room-lib-item .lib-name{color:var(--text);font-weight:600}.room-lib-item .lib-size{color:var(--text2);font-size:10px}.room-lib-item .lib-add{opacity:0;color:var(--accent);transition:opacity var(--transition);font-size:16px}.room-lib-item:hover .lib-add{opacity:1}#sidebar-toggle{z-index:20;border:1px solid var(--border);background:var(--surface);cursor:pointer;width:28px;height:28px;color:var(--text);box-shadow:var(--shadow);border-radius:50%;justify-content:center;align-items:center;font-size:14px;display:flex;position:absolute;top:12px;left:288px}#sidebar.collapsed+#sidebar-toggle{left:8px}#main{flex-direction:column;flex:1;min-width:0;display:flex}#toolbar{background:var(--surface);border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:8px;padding:8px 14px;display:flex}#toolbar button{border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;transition:all var(--transition);white-space:nowrap;border-radius:5px;align-items:center;gap:4px;padding:6px 12px;font-size:12px;font-weight:500;display:inline-flex}#toolbar button:hover{background:var(--bg);border-color:var(--accent)}#toolbar button.primary{background:var(--accent);color:#fff;border-color:var(--accent)}#toolbar button.primary:hover{background:var(--accent2)}#toolbar .sep{background:var(--border);width:1px;height:20px;margin:0 4px}#toolbar select{border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;border-radius:5px;padding:6px 8px;font-size:12px}#file-name{color:var(--accent);margin-right:auto;font-size:13px;font-weight:600}#workspace{flex:1;display:flex;overflow:hidden}#editor-pane{background:var(--editor-bg);flex-direction:column;width:50%;min-width:300px;display:flex}#editor-pane .cm-header{display:none}#editor-wrap{flex:1;overflow:hidden}#editor-wrap .CodeMirror{font-family:JetBrains Mono,Cascadia Code,Fira Code,Consolas,monospace;font-size:13px;line-height:1.6;height:100%!important}#error-bar{color:#f88;white-space:pre-wrap;background:#441;border-top:1px solid #552;max-height:200px;padding:8px 14px;font-family:monospace;font-size:11px;display:none;overflow-y:auto}#error-bar.show{display:block}#error-bar.warning{color:#ffd54f;background:#3e3500;border-top-color:#6d5b00}#resize-handle{background:var(--border);cursor:col-resize;width:5px;transition:background var(--transition);flex-shrink:0}#resize-handle:hover{background:var(--accent)}#preview-pane{background:var(--bg);flex:1;justify-content:center;align-items:center;padding:20px;display:flex;position:relative;overflow:auto}#preview-pane svg{max-width:100%;max-height:100%;box-shadow:var(--shadow);border-radius:4px}#preview-pane svg [data-room-id]{cursor:grab;transition:opacity .15s}#preview-pane svg [data-room-id]:hover{opacity:.85}#preview-pane svg [data-room-id]:active{cursor:grabbing}#preview-pane .empty-state{text-align:center;color:var(--text2)}#preview-pane .empty-state .icon{margin-bottom:12px;font-size:64px}#zoom-controls{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:6px;gap:4px;padding:3px;display:flex;position:absolute;bottom:12px;right:12px}#zoom-controls button{width:30px;height:30px;color:var(--text);cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;font-size:16px;display:flex}#zoom-controls button:hover{background:var(--bg)}#zoom-level{color:var(--text2);justify-content:center;align-items:center;min-width:44px;padding:4px 6px;font-size:11px;display:flex}#toast{background:var(--accent);color:#fff;z-index:100;opacity:0;pointer-events:none;border-radius:8px;padding:10px 20px;font-size:13px;font-weight:500;transition:opacity .3s;position:fixed;bottom:20px;left:50%;transform:translate(-50%);box-shadow:0 4px 16px #0003}#toast.show{opacity:1}#summary-overlay{z-index:50;background:#00000080;justify-content:center;align-items:center;display:none;position:fixed;inset:0}#summary-overlay.show{display:flex}#summary-panel{background:var(--surface);border-radius:12px;width:90%;max-width:500px;max-height:80vh;padding:28px;overflow-y:auto;box-shadow:0 8px 40px #0000004d}#summary-panel h2{color:var(--accent);align-items:center;gap:8px;margin-bottom:16px;font-size:20px;display:flex}#summary-panel .stat-grid{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;display:grid}#summary-panel .stat-box{background:var(--bg);text-align:center;border-radius:8px;padding:12px}#summary-panel .stat-box .stat-value{color:var(--accent);font-size:24px;font-weight:700}#summary-panel .stat-box .stat-label{color:var(--text2);text-transform:uppercase;letter-spacing:1px;margin-top:2px;font-size:11px}#summary-panel table{border-collapse:collapse;width:100%;margin-bottom:12px;font-size:12px}#summary-panel table th,#summary-panel table td{text-align:left;border-bottom:1px solid var(--border);padding:6px 10px}#summary-panel table th{color:var(--text2);text-transform:uppercase;letter-spacing:1px;font-size:10px}#summary-panel .close-btn{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:6px;width:100%;margin-top:8px;padding:10px;font-size:13px;font-weight:600;display:block}#toolbar .qa-btn{cursor:pointer;transition:all var(--transition);white-space:nowrap;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:5px;align-items:center;gap:4px;padding:5px 10px;font-size:12px;font-weight:600;display:inline-flex}#toolbar .qa-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}#status-line{color:#ccc;background:#252526;border-top:1px solid #333;flex-shrink:0;align-items:center;gap:12px;padding:4px 12px;font-family:JetBrains Mono,Cascadia Code,Fira Code,Consolas,monospace;font-size:11px;display:flex}#status-line .status-pos{color:#888}#status-line .status-valid{color:#4caf50;font-weight:600}#status-line .status-error{color:#f44336;font-weight:600}#status-line .status-saved{color:#888;opacity:0;margin-left:auto;font-size:10px;transition:opacity .3s}#status-line .status-saved.visible{opacity:1}.CodeMirror .line-error{background:#ff00001f!important}@media (width<=768px){#sidebar{z-index:30;height:100%;position:absolute}#sidebar.collapsed{transform:translate(-100%)}#sidebar-toggle{top:8px;left:8px}#workspace{flex-direction:column}#editor-pane{width:100%;height:50%}#resize-handle{cursor:row-resize;width:100%;height:5px}#preview-pane{height:50%}#toolbar{gap:4px;padding:6px}#toolbar button{padding:4px 8px;font-size:11px}#file-name{display:none}}#mobile-block{display:none}.mb-card{text-align:center;max-width:340px;padding:32px 24px}.mb-icon{margin-bottom:12px;font-size:56px}#mobile-block h1{color:var(--text);margin:0 0 12px;font-size:20px;font-weight:700}#mobile-block p{color:var(--text2);margin:0 0 8px;font-size:14px;line-height:1.5}#mobile-block .mb-hint{color:var(--text2);opacity:.8;font-size:12px}@media (width<=900px){#app,#summary-overlay,#toast{display:none!important}#mobile-block{z-index:9999;background:var(--bg);justify-content:center;align-items:center;padding:24px;position:fixed;inset:0;display:flex!important}}