:root{--bg-color:#fff;--panel-bg:#fff;--panel-border:#e2e8f0;--text-primary:#0f172a;--text-secondary:#64748b;--accent:#3b82f6;--accent-hover:#2563eb;--font-sans:"Inter", system-ui, sans-serif;--font-mono:"Fira Code", monospace;--grid-color:#00000008}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);background-image:linear-gradient(var(--grid-color) 1px, transparent 1px), linear-gradient(90deg, var(--grid-color) 1px, transparent 1px), radial-gradient(circle at 10% 10%, #3b82f61a 0%, transparent 40%), radial-gradient(circle at 90% 80%, #a855f71a 0%, transparent 40%);color:var(--text-primary);font-family:var(--font-sans);background-size:40px 40px,40px 40px,100% 100%,100% 100%;justify-content:center;align-items:center;min-height:100vh;display:flex}.app-container{flex-direction:column;gap:1.5rem;width:98%;max-width:1600px;height:96vh;display:flex}.header{text-align:center;padding:1rem 0}.header h1{color:var(--text-primary);letter-spacing:-.5px;margin-bottom:.5rem;font-size:2.5rem;font-weight:700}.header p{color:var(--text-secondary);font-size:1.1rem}.workspace{flex:1;gap:2rem;min-height:0;display:flex}.panel{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:20px;flex-direction:column;transition:transform .3s,box-shadow .3s;display:flex;overflow:hidden;box-shadow:0 10px 30px -10px #00000014}.panel:hover{transform:translateY(-2px);box-shadow:0 15px 35px -10px #0000001f}.editor-panel{flex:1.4;min-width:520px}.render-panel{flex:1.25;position:relative}.panel-header{border-bottom:1px solid var(--panel-border);background:#f8fafc;justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;display:flex}.panel-header h2{color:var(--text-primary);font-size:1.1rem;font-weight:600}.controls{color:var(--text-secondary);align-items:center;gap:.5rem;font-size:.9rem;display:flex}select{color:var(--text-primary);border:1px solid var(--panel-border);font-family:var(--font-sans);cursor:pointer;background:#fff;border-radius:8px;outline:none;padding:.4rem .6rem;font-size:.9rem;box-shadow:0 1px 2px #0000000d}#xml-editor{background:0 0;flex:1;overflow:auto}.cm-editor{height:100%;font-family:var(--font-mono);font-size:.95rem}.cm-scroller{font-family:var(--font-mono);padding:1rem 0}.primary-btn{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:12px;margin:1.5rem;padding:1rem;font-size:1rem;font-weight:600;transition:all .2s;box-shadow:0 4px 14px #3b82f640}.primary-btn:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 6px 20px #3b82f659}.primary-btn:disabled{cursor:not-allowed;box-shadow:none;background:#cbd5e1;transform:none}.secondary-btn{color:var(--text-primary);border:1px solid var(--panel-border);cursor:pointer;background:#fff;border-radius:6px;padding:.4rem .8rem;font-size:.85rem;font-weight:600;transition:all .2s}.secondary-btn:hover:not(:disabled){background:#f8fafc;box-shadow:0 2px 5px #0000000d}.secondary-btn:disabled{opacity:.5;cursor:not-allowed}.canvas-container{background:#f1f5f9;flex:1;justify-content:center;align-items:center;padding:2rem;display:flex;position:relative;overflow:hidden}.floating-btn{z-index:20;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid var(--panel-border);cursor:pointer;width:40px;height:40px;color:var(--text-primary);background:#fffc;border-radius:8px;justify-content:center;align-items:center;transition:all .2s;display:flex;position:absolute;top:1rem;right:1rem;box-shadow:0 4px 10px #0000001a}.floating-btn:hover{background:#fff;transform:scale(1.05);box-shadow:0 6px 14px #00000026}.canvas-container:fullscreen{background:#0f172a;border-radius:0;padding:0}.canvas-container:fullscreen canvas{object-fit:contain;width:100vw;max-width:none;height:100vh;max-height:none;box-shadow:none;border-radius:0}.canvas-container:-webkit-full-screen{background:#0f172a;border-radius:0;padding:0}.canvas-container:-webkit-full-screen canvas{object-fit:contain;width:100vw;max-width:none;height:100vh;max-height:none;box-shadow:none;border-radius:0}canvas{object-fit:contain;border-radius:12px;max-width:100%;max-height:100%;box-shadow:0 15px 35px #0000001a}.progress-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10;background:#fffc;flex-direction:column;justify-content:center;align-items:center;gap:1.5rem;display:none;position:absolute;inset:0}.progress-bar-container{background:#e2e8f0;border-radius:6px;width:60%;height:12px;overflow:hidden;box-shadow:inset 0 2px 4px #0000000d}.progress-bar{background:linear-gradient(90deg,#3b82f6,#8b5cf6);border-radius:6px;width:0%;height:100%;transition:width .1s linear}.progress-text{color:var(--text-primary);font-size:1.5rem;font-weight:700}.badge{text-transform:uppercase;letter-spacing:.5px;border-radius:20px;padding:.4rem 1rem;font-size:.75rem;font-weight:700}.badge.idle{color:var(--text-secondary);background:#f1f5f9}.badge.active{color:#3b82f6;background:#eff6ff;animation:2s infinite pulse}.badge.success{color:#22c55e;background:#f0fdf4}.badge.error{color:#ef4444;background:#fef2f2}@keyframes pulse{0%{opacity:1}50%{opacity:.7}to{opacity:1}}@media (width<=900px){.workspace{flex-direction:column}.app-container{height:auto;padding:2rem 0}.editor-panel,.render-panel{min-height:500px}}