@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap";:root{--bg-primary:#f5f7fc;--bg-secondary:#fff;--bg-tertiary:#f0f3fa;--glass-bg:#ffffff73;--glass-border:#fff9;--glass-shadow:#1f26870d;--text-primary:#0f172a;--text-secondary:#475569;--text-muted:#94a3b8;--accent-cyan:#00f0ff;--accent-cyan-glow:#00f0ff66;--accent-purple:#7f00ff;--accent-purple-glow:#7f00ff33;--accent-pink:#ff007f;--border-color:#e2e8f0cc;--border-accent:#7f00ff26;--radius-sm:8px;--radius-md:16px;--radius-lg:24px;--transition:all .3s cubic-bezier(.4, 0, .2, 1);--font-body:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-display:"Space Grotesk", "Inter", sans-serif}*{box-sizing:border-box;font-family:var(--font-body);margin:0;padding:0}body{background-color:var(--bg-primary);color:var(--text-primary);min-height:100vh;position:relative;overflow-x:hidden}body:before{content:"";background:radial-gradient(circle, var(--accent-purple-glow) 0%, #fff0 70%);z-index:-1;pointer-events:none;filter:blur(80px);width:50%;height:50%;position:absolute;top:-10%;left:-10%}body:after{content:"";z-index:-1;pointer-events:none;filter:blur(100px);background:radial-gradient(circle,#00f0ff14 0%,#fff0 70%);width:60%;height:60%;position:absolute;bottom:-10%;right:-10%}.glass-panel{background:var(--glass-bg);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:var(--radius-md);box-shadow:0 8px 32px 0 var(--glass-shadow);transition:var(--transition)}.glass-panel:hover{border-color:#7f00ff40;box-shadow:0 12px 40px #1f268714}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--text-muted);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}h1,h2,h3,h4,h5{font-family:var(--font-display);letter-spacing:-.02em;font-weight:700}.btn{border-radius:var(--radius-sm);font-family:var(--font-display);cursor:pointer;transition:var(--transition);border:1px solid #0000;outline:none;justify-content:center;align-items:center;gap:8px;padding:10px 20px;font-size:14px;font-weight:600;display:inline-flex}.btn-primary{background:linear-gradient(135deg, var(--accent-purple) 0%, #a855f7 100%);color:#fff;box-shadow:0 4px 14px #7f00ff4d}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #7f00ff73}.btn-secondary{background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover{border-color:var(--text-muted);background:var(--bg-tertiary)}.btn-accent{color:var(--accent-purple);border:1px solid var(--accent-purple);background:0 0}.btn-accent:hover{box-shadow:0 0 15px var(--border-accent);background:#7f00ff0d}.input-group{flex-direction:column;gap:6px;margin-bottom:16px;display:flex}.input-label{font-family:var(--font-display);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;font-size:13px;font-weight:600}.input-field{border-radius:var(--radius-sm);border:1px solid var(--border-color);color:var(--text-primary);transition:var(--transition);background:#fffc;width:100%;padding:10px 14px;font-size:14px}.input-field:focus{border-color:var(--accent-purple);box-shadow:0 0 0 3px var(--accent-purple-glow);background:#fff;outline:none}.input-checkbox{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;font-size:14px;display:flex}.input-checkbox input{width:16px;height:16px;accent-color:var(--accent-purple)}.app-container{min-height:100vh;display:flex}.sidebar{border-right:1px solid var(--border-color);flex-direction:column;gap:32px;width:260px;height:100vh;padding:24px;display:flex;position:sticky;top:0}.main-content{flex:1;width:100%;max-width:1400px;margin:0 auto;padding:40px;overflow-y:auto}.nav-list{flex-direction:column;gap:8px;list-style:none;display:flex}.nav-item{border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:var(--transition);align-items:center;gap:12px;padding:12px 16px;font-weight:500;text-decoration:none;display:flex}.nav-item:hover{background:var(--bg-tertiary);color:var(--text-primary)}.nav-item.active{color:var(--accent-purple);border-left:3px solid var(--accent-purple);background:linear-gradient(135deg,#7f00ff14 0%,#00f0ff0d 100%);font-weight:600}.builder-layout{grid-template-columns:240px 1fr 340px;gap:24px;height:calc(100vh - 120px);display:grid}.canvas-area{background:var(--bg-tertiary);border-radius:var(--radius-md);border:1px dashed var(--border-color);justify-content:center;align-items:center;padding:20px;display:flex;position:relative;overflow:auto}.canvas-container{background:#fff;border-radius:4px;flex-shrink:0;position:relative;overflow:hidden;box-shadow:0 20px 50px #00000026}.canvas-element{cursor:move;-webkit-user-select:none;user-select:none;white-space:nowrap;border:1px dashed #0000;padding:0;position:absolute}.canvas-element:hover{border-color:var(--accent-purple);background:#7f00ff0d}.canvas-element.active{border-color:var(--accent-purple);box-shadow:0 0 0 2px var(--accent-purple-glow);background:#7f00ff1a}.logo{font-family:var(--font-display);background:linear-gradient(135deg, var(--accent-purple) 0%, var(--accent-cyan) 100%);-webkit-text-fill-color:transparent;letter-spacing:-.03em;-webkit-background-clip:text;align-items:center;gap:10px;font-size:20px;font-weight:800;display:flex}.templates-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;margin-top:24px;display:grid}.template-card{flex-direction:column;display:flex;overflow:hidden}.template-preview-box{border-bottom:1px solid var(--border-color);background-position:50%;background-size:cover;height:160px;position:relative}.template-card-info{flex-direction:column;gap:12px;padding:16px;display:flex}@keyframes pulse{0%{opacity:.5;transform:scale(.95)}50%{opacity:1;transform:scale(1)}to{opacity:.5;transform:scale(.95)}}.pulse{animation:2s ease-in-out infinite pulse}