@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap";:root{--bg-dark:#0f111a;--bg-panel:#1a1d2d;--bg-panel-glass:#1a1d2dbf;--text-main:#f0f2f5;--text-muted:#8b92a5;--accent:#5e6ad2;--accent-hover:#7b86f0;--accent-glow:#5e6ad266;--danger:#e25563;--success:#3ab07e;--border:#ffffff14;--sidebar-width:300px;--radius-sm:8px;--radius-md:12px;--radius-lg:20px;--transition:.25s cubic-bezier(.25, .8, .25, 1)}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-dark);color:var(--text-main);-webkit-font-smoothing:antialiased;min-height:100vh;font-family:Inter,sans-serif;overflow-x:hidden}.glass-panel{background:var(--bg-panel-glass);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:0 8px 32px #00000059}.app-layout{width:100vw;height:100vh;display:flex;overflow:hidden}.sidebar{width:var(--sidebar-width);min-width:var(--sidebar-width);border-right:1px solid var(--border);transition:width var(--transition), min-width var(--transition);flex-direction:column;display:flex;overflow:hidden}.main-content{background:radial-gradient(circle at 40% 40%, #161825 0%, var(--bg-dark) 100%);flex-direction:column;flex:1;display:flex;position:relative;overflow:hidden}.topbar{border-bottom:1px solid var(--border);z-index:10;justify-content:space-between;align-items:center;gap:12px;height:60px;min-height:60px;padding:0 20px;display:flex}.workspace{flex:1;justify-content:center;align-items:center;padding:24px;display:flex;position:relative;overflow:auto}.canvas-container{border-radius:4px;flex-shrink:0;box-shadow:0 24px 60px #0000008c,0 0 0 1px #ffffff14}.control-group{border-bottom:1px solid var(--border);padding:16px 20px}.control-label{text-transform:uppercase;letter-spacing:1.2px;color:var(--text-muted);margin-bottom:10px;font-size:11px;font-weight:700;display:block}.input-field{border:1px solid var(--border);width:100%;color:var(--text-main);border-radius:var(--radius-sm);transition:all var(--transition);background:#00000040;padding:10px 14px;font-family:inherit;font-size:14px}.input-field:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);background:#5e6ad20d;outline:none}.btn{border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition);white-space:nowrap;border:none;justify-content:center;align-items:center;gap:7px;padding:9px 18px;font-family:inherit;font-size:14px;font-weight:600;display:inline-flex}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--accent);color:#fff;box-shadow:0 4px 14px 0 var(--accent-glow)}.btn-primary:hover:not(:disabled){background:var(--accent-hover);box-shadow:0 8px 24px 0 var(--accent-glow);transform:translateY(-2px)}.btn-secondary{color:var(--text-main);border:1px solid var(--border);background:0 0}.btn-secondary:hover{background:#ffffff0f}.flex-row{align-items:center;display:flex}.gap-2{gap:8px}.gap-4{gap:16px}.options-grid{grid-template-columns:repeat(2,1fr);gap:8px;display:grid}.option-box{border:1px solid var(--border);border-radius:var(--radius-sm);text-align:center;cursor:pointer;transition:all var(--transition);color:var(--text-muted);background:#0003;padding:10px 8px;font-size:12px;font-weight:600}.option-box:hover{color:var(--text-main);background:#ffffff0d}.option-box.active{border-color:var(--accent);color:var(--accent);background:#5e6ad21f}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#fff3}.sidebar-toggle{z-index:200;background:var(--accent);color:#fff;cursor:pointer;width:52px;height:52px;box-shadow:0 8px 24px var(--accent-glow);border:none;border-radius:50%;justify-content:center;align-items:center;font-size:22px;display:none;position:fixed;bottom:20px;left:20px}@media (width<=768px){:root{--sidebar-width:280px}.sidebar-toggle{display:flex}.sidebar{z-index:150;height:100vh;transition:transform var(--transition);background:var(--bg-panel);position:fixed;top:0;left:0;transform:translate(-100%)}.sidebar.open{transform:translate(0);box-shadow:4px 0 32px #0009}.sidebar-overlay{z-index:140;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#00000080;display:none;position:fixed;inset:0}.sidebar-overlay.open{display:block}.topbar{height:56px;min-height:56px;padding:0 12px}.topbar .btn span{display:none}.workspace{padding:12px}.canvas-container{transform-origin:top}.glass-panel{max-width:400px;width:90vw!important;padding:32px 24px!important}.projects-grid{grid-template-columns:1fr!important}}@media (width<=480px){.topbar .flex-row.gap-4>span{display:none}.topbar .flex-row.gap-4>button:first-child{padding:6px 10px;font-size:12px}}