.auth-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10000;background:#0000008c;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:16px}.auth-modal-card{position:relative;width:100%;max-width:420px;background:var(--bg-panel);border:1px solid var(--border-primary);border-radius:24px;padding:40px 36px 36px;box-shadow:0 32px 80px #0003,0 8px 24px #0000001f;animation:auth-modal-in .28s cubic-bezier(.34,1.56,.64,1)}@keyframes auth-modal-in{0%{opacity:0;transform:scale(.92) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}.auth-modal-close{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;border:none;background:var(--bg-tertiary);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,color .15s}.auth-modal-close:hover{background:var(--bg-input-hover);color:var(--text-primary)}.auth-modal-header{text-align:center;margin-bottom:28px}.auth-modal-icon-badge{width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,var(--color-primary),var(--color-purple));color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;box-shadow:0 8px 20px #5e5ce64d}.auth-modal-prompt{display:inline-block;background:var(--color-primary-light);color:var(--color-primary);font-size:12px;font-weight:600;padding:5px 12px;border-radius:20px;margin-bottom:10px}.auth-modal-title{font-size:1.4rem;font-weight:700;color:var(--text-primary);margin:0 0 6px;font-family:var(--font-heading)}.auth-modal-subtitle{font-size:.85rem;color:var(--text-secondary);margin:0;line-height:1.5}.auth-modal-dev-hint{background:#fef3c7;border:1px solid #f59e0b;border-radius:8px;padding:8px 12px;font-size:12px;color:#92400e;margin-bottom:14px;text-align:center}[data-theme=dark] .auth-modal-dev-hint{background:#451a03;border-color:#92400e;color:#fbbf24}.auth-modal-error{background:#ff3b3014;border:1px solid rgba(255,59,48,.2);border-radius:10px;padding:10px 14px;font-size:13px;color:var(--color-error);margin-bottom:14px}.auth-modal-form{display:flex;flex-direction:column;gap:14px}.auth-field{display:flex;flex-direction:column;gap:6px}.auth-field label{font-size:13px;font-weight:600;color:var(--text-primary)}.auth-field-input-wrapper{position:relative;display:flex;align-items:center}.auth-field-icon{position:absolute;left:12px;color:var(--text-tertiary);pointer-events:none}.auth-field-input-wrapper input{width:100%;height:40px;padding:8px 38px 8px 36px;border:1px solid var(--border-input);border-radius:10px;background:var(--bg-input);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--text-primary);font-size:13.5px;font-family:var(--font-family);transition:all .2s cubic-bezier(.16,1,.3,1);outline:none;box-shadow:var(--shadow-input)}.auth-field-input-wrapper input:focus{border-color:var(--border-input-focus);box-shadow:var(--shadow-input-focus);background:var(--bg-elevated)}.auth-field-eye{position:absolute;right:10px;background:none;border:none;cursor:pointer;color:var(--text-tertiary);padding:4px;display:flex;align-items:center;transition:color .15s}.auth-field-eye:hover{color:var(--text-primary)}.auth-modal-submit{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;border:1px solid rgba(67,56,202,.4);border-radius:12px;background:var(--gradient-primary);color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.16,1,.3,1);box-shadow:inset 0 1px #ffffff38,var(--gradient-glow);margin-top:4px}.auth-modal-submit:hover:not(:disabled){background:var(--gradient-primary-hover);transform:translateY(-1px);box-shadow:inset 0 1px #ffffff47,var(--gradient-glow-hover)}.auth-modal-submit:active:not(:disabled){transform:translateY(.5px) scale(.985)}.auth-modal-submit:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}.auth-spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:auth-spin .6s linear infinite}@keyframes auth-spin{to{transform:rotate(360deg)}}.auth-modal-divider{position:relative;text-align:center;color:var(--text-tertiary);font-size:12px;margin:2px 0}.auth-modal-divider:before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:var(--border-primary)}.auth-modal-divider span{position:relative;background:var(--bg-panel);padding:0 10px}.auth-modal-otp-btn{width:100%;padding:11px;border:1.5px solid var(--border-primary);border-radius:12px;background:var(--bg-panel);color:var(--text-secondary);font-size:13px;font-weight:500;cursor:pointer;transition:border-color .15s,color .15s,background .15s}.auth-modal-otp-btn:hover:not(:disabled){border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-light)}.auth-modal-otp-btn:disabled{opacity:.45;cursor:not-allowed}.auth-modal-terms{font-size:11.5px;color:var(--text-tertiary);text-align:center;line-height:1.5}.auth-modal-terms a{color:var(--color-primary);text-decoration:none}.auth-modal-switch{text-align:center;font-size:13px;color:var(--text-secondary)}.auth-modal-switch button{background:none;border:none;color:var(--color-primary);font-weight:600;cursor:pointer;text-decoration:underline;font-size:inherit;padding:0}.auth-otp-inputs{display:flex;justify-content:center}.auth-otp-input{width:100%;padding:16px;text-align:center;font-size:2rem;font-weight:700;letter-spacing:.5em;border:2px solid var(--border-input);border-radius:16px;background:var(--bg-input);color:var(--text-primary);font-family:var(--font-mono);outline:none;transition:border-color .15s,box-shadow .15s}.auth-otp-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #5e5ce61f}.auth-otp-hint{text-align:center;font-size:13px;color:var(--text-secondary);margin:0}.auth-modal-resend{background:none;border:none;color:var(--text-secondary);font-size:13px;cursor:pointer;text-decoration:underline;transition:color .15s}.auth-modal-resend:hover{color:var(--color-primary)}[data-theme=dark] .auth-modal-card{background:var(--bg-panel);border-color:var(--border-primary)}.google-auth-btn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:11px 16px;border:1px solid var(--border-secondary, #e2e8f0);border-radius:12px;background:var(--bg-panel, #ffffff);color:var(--text-primary, #0f172a);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.16,1,.3,1);box-shadow:0 1px 3px #0000000d}.google-auth-btn:hover:not(:disabled){background:var(--bg-hover, #f8fafc);border-color:var(--border-primary, #cbd5e1);box-shadow:0 4px 12px #00000014;transform:translateY(-1px)}.google-auth-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.google-icon{flex-shrink:0}.google-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a99;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:9999;padding:16px;animation:google-fade-in .2s ease-out}@keyframes google-fade-in{0%{opacity:0}to{opacity:1}}.google-modal-card{width:100%;max-width:400px;background:var(--bg-panel, #ffffff);border:1px solid var(--border-primary, #e2e8f0);border-radius:20px;box-shadow:0 20px 40px #0000002e;overflow:hidden;animation:google-scale-in .25s cubic-bezier(.16,1,.3,1)}@keyframes google-scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.google-modal-header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--border-subtle, #f1f5f9)}.google-modal-header-brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px;color:var(--text-primary, #0f172a)}.google-modal-close{background:transparent;border:none;color:var(--text-tertiary, #94a3b8);cursor:pointer;padding:4px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:all .15s}.google-modal-close:hover{background:var(--bg-hover, #f1f5f9);color:var(--text-primary, #0f172a)}.google-modal-body{padding:22px}.google-modal-sub{font-size:13.5px;color:var(--text-secondary, #64748b);margin-bottom:16px;line-height:1.5}.google-accounts-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.google-account-item{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--border-subtle, #e2e8f0);border-radius:12px;background:var(--bg-secondary, #f8fafc);cursor:pointer;transition:all .15s ease;text-align:left;width:100%}.google-account-item:hover{background:#eff6ff;border-color:#93c5fd;transform:translateY(-1px)}.google-account-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#4285f4,#34a853);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0}.google-account-info{display:flex;flex-direction:column;min-width:0}.google-account-name{font-size:13.5px;font-weight:600;color:var(--text-primary, #0f172a)}.google-account-email{font-size:12px;color:var(--text-tertiary, #64748b)}.google-modal-divider{position:relative;text-align:center;margin:18px 0}.google-modal-divider:before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:var(--border-subtle, #e2e8f0)}.google-modal-divider span{position:relative;background:var(--bg-panel, #ffffff);padding:0 10px;font-size:12px;color:var(--text-tertiary, #94a3b8)}.google-custom-form{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}.google-input-group{position:relative;display:flex;align-items:center}.google-input-icon{position:absolute;left:12px;color:var(--text-tertiary, #94a3b8);pointer-events:none}.google-input-group input{width:100%;padding:10px 12px 10px 36px;border:1px solid var(--border-secondary, #cbd5e1);border-radius:10px;background:var(--bg-input, #ffffff);color:var(--text-primary, #0f172a);font-size:13.5px;outline:none;transition:all .15s}.google-input-group input:focus{border-color:#4285f4;box-shadow:0 0 0 3px #4285f426}.google-submit-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:11px;border:none;border-radius:10px;background:#4285f4;color:#fff;font-weight:600;font-size:13.5px;cursor:pointer;transition:all .15s}.google-submit-btn:hover:not(:disabled){background:#3367d6;box-shadow:0 4px 12px #4285f44d}.google-submit-btn:disabled{opacity:.55;cursor:not-allowed}.google-modal-footer{font-size:11px;color:var(--text-tertiary, #94a3b8);line-height:1.5;text-align:center;margin:0}.header-fixed-container{position:fixed;top:12px;left:0;right:0;z-index:1000;display:flex;justify-content:center;pointer-events:none}.nav{pointer-events:auto;position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;width:min(1180px,calc(100% - 24px));padding:8px 12px 8px 14px;border-radius:22px;background:var(--glass);border:1px solid var(--brd);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);box-shadow:var(--shadow);transition:background .25s ease,border-color .25s ease,box-shadow .25s ease}.nav-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}.brand{display:flex;align-items:center;gap:10px;font:800 1.25rem Bricolage Grotesque,sans-serif;text-decoration:none;color:var(--ink);flex-shrink:0;transition:opacity .2s ease}.brand:hover{opacity:.95}.logo{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;color:#fff;font-size:1.15rem;font-weight:800;font-family:Bricolage Grotesque,sans-serif;background:linear-gradient(135deg,#7c4dff,#f0527a);box-shadow:0 6px 16px -4px #7c4dff99;flex-shrink:0;transition:transform .25s cubic-bezier(.16,1,.3,1)}.brand:hover .logo{transform:scale(1.05) rotate(-3deg)}.brand-text{font-family:Bricolage Grotesque,sans-serif;font-weight:800;font-size:1.25rem;letter-spacing:-.02em;color:var(--ink)}.menu{display:flex;align-items:center;gap:4px;margin-left:14px;flex:1}.nav-cat-item{position:relative;display:flex;align-items:center}.nav-cat-link{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;font-family:Figtree,system-ui,sans-serif;font-weight:500;font-size:.93rem;color:var(--muted);text-decoration:none;transition:all .18s ease;white-space:nowrap;background:transparent;border:1px solid transparent}.nav-cat-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--cc, var(--muted));transition:transform .2s ease}.nav-cat-link:hover .nav-cat-icon,.nav-cat-link.hovered .nav-cat-icon{transform:scale(1.12)}.nav-cat-link:hover,.nav-cat-link.hovered{background:var(--hover);color:var(--ink)}.nav-cat-link.active{color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);border-color:color-mix(in srgb,var(--accent) 25%,transparent);font-weight:600}.cat-chevron{transition:transform .2s cubic-bezier(.16,1,.3,1);opacity:.7}.cat-chevron.rotated{transform:rotate(180deg);opacity:1}.cat-dropdown.glass{position:absolute;top:calc(100% + 8px);left:0;min-width:330px;max-width:390px;padding:12px;border-radius:22px;background:#eceeff;border:1px solid rgba(200,200,230,.6);backdrop-filter:blur(60px) saturate(200%);-webkit-backdrop-filter:blur(60px) saturate(200%);box-shadow:0 16px 48px -8px #4628aa40,0 0 0 1px #fff9;z-index:120;animation:dropdownPop .2s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column;gap:6px}[data-theme=dark] .cat-dropdown.glass{background:#1a1730;border-color:#50467880;box-shadow:0 16px 48px -8px #00000080,0 0 0 1px #6450b433}@keyframes dropdownPop{0%{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.cat-dropdown-header{display:flex;justify-content:space-between;align-items:center;padding:4px 8px 8px;border-bottom:1px solid var(--brd);margin-bottom:4px}.cat-dropdown-title{font-weight:700;font-family:Bricolage Grotesque,sans-serif;font-size:.95rem;color:var(--ink)}.cat-dropdown-count{font-size:.78rem;color:var(--muted);font-weight:500}.cat-dropdown-list{display:flex;flex-direction:column;gap:4px;max-height:380px;overflow-y:auto;padding-right:2px}.cat-dropdown-tool{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:14px;text-decoration:none;font-weight:500;font-size:.92rem;color:var(--ink);transition:all .15s ease}.cat-dropdown-tool:hover{background:var(--hover);transform:translate(2px)}.cat-dropdown-tool-info{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.cat-tool-name{font-weight:600;font-size:.9rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cat-tool-desc{font-size:.76rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.cat-dropdown-footer{margin-top:4px;padding-top:8px;border-top:1px solid var(--brd)}.cat-view-all-link{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;border-radius:10px;font-size:.82rem;font-weight:600;color:var(--accent);text-decoration:none;transition:background .15s ease}.cat-view-all-link:hover{background:color-mix(in srgb,var(--accent) 10%,transparent)}.tile{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;color:var(--c, var(--accent));background:color-mix(in srgb,var(--c, var(--accent)) 16%,transparent);flex:none;transition:transform .2s ease}.tile.fill{color:#fff;background:linear-gradient(135deg,#7c4dff,#4f46e5)}.cat-dropdown-tool .tile{width:36px;height:36px;border-radius:11px}.cat-dropdown-tool:hover .tile{transform:scale(1.06)}.tag{margin-left:auto;padding:3px 9px;border-radius:999px;font-size:.72rem;font-weight:600;color:var(--c, var(--accent));background:color-mix(in srgb,var(--c, var(--accent)) 14%,transparent);white-space:nowrap}.tag.ess{color:#d97706;background:#f59e0b29}.nav-search-wrapper{position:relative;display:flex;align-items:center}.nav-search-form{display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:14px;background:var(--field);border:1px solid var(--brd);transition:all .22s ease;width:190px}.nav-search-form:focus-within{width:240px;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}.nav-search-icon{color:var(--muted);flex-shrink:0}.nav-search-input{border:0;background:none;font-family:Figtree,system-ui,sans-serif;font-size:.88rem;color:var(--ink);width:100%;outline:0}.nav-search-input::placeholder{color:var(--muted);opacity:.8}.nav-search-clear{border:0;background:none;color:var(--muted);cursor:pointer;padding:0;display:flex;align-items:center}.nav-search-dropdown{position:absolute;top:calc(100% + 8px);right:0;width:320px;padding:8px;border-radius:18px;background:var(--sheet);border:1px solid var(--brd);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);box-shadow:var(--shadow);z-index:130;animation:dropdownPop .18s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column;gap:4px}.nav-search-results-list{display:flex;flex-direction:column;gap:2px;max-height:280px;overflow-y:auto}.nav-search-item{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:12px;border:0;background:transparent;color:var(--ink);text-align:left;cursor:pointer;width:100%;transition:background .12s ease}.nav-search-item:hover,.nav-search-item.focused{background:var(--hover)}.nav-search-item .tile{width:32px;height:32px;border-radius:9px}.nav-search-item-info{display:flex;flex-direction:column;min-width:0;flex:1}.nav-search-item-title{font-weight:600;font-size:.88rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nav-search-item-cat{font-size:.72rem;color:var(--muted);text-transform:capitalize}.nav-search-all-btn{display:flex;align-items:center;justify-content:space-between;width:100%;padding:8px 10px;border:0;border-top:1px solid var(--brd);background:transparent;color:var(--accent);font-weight:600;font-size:.82rem;cursor:pointer;margin-top:4px;border-radius:0 0 10px 10px}.nav-search-all-btn:hover,.nav-search-all-btn.focused{background:color-mix(in srgb,var(--accent) 10%,transparent)}.iconbtn{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;border:1px solid var(--brd);background:var(--field);color:var(--ink);cursor:pointer;text-decoration:none;flex:none;transition:all .18s ease}.iconbtn:hover{background:var(--hover);border-color:color-mix(in srgb,var(--accent) 40%,transparent);color:var(--accent);transform:translateY(-1px)}.theme-icon{transition:transform .25s ease}.iconbtn:hover .theme-icon{transform:rotate(15deg)}.user-menu-wrapper{position:relative}.user{display:flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border-radius:999px;border:1px solid var(--brd);background:var(--field);font-weight:600;font-size:.92rem;cursor:pointer;color:var(--ink);transition:all .18s ease;font-family:inherit}.user:hover{background:var(--hover);border-color:var(--accent)}.avatar{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#38bdf8,#6366f1);color:#fff;font-size:.88rem;font-weight:700;overflow:hidden;flex-shrink:0}.avatar img{width:100%;height:100%;object-fit:cover}.avatar.large{width:40px;height:40px;font-size:1rem}.user-name{max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-chevron{transition:transform .2s ease;color:var(--muted)}.user-chevron.rotated{transform:rotate(180deg)}.user-dropdown{position:absolute;top:calc(100% + 8px);right:0;min-width:220px;padding:8px;border-radius:18px;background:var(--sheet);border:1px solid var(--brd);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);box-shadow:var(--shadow);z-index:130;animation:dropdownPop .18s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column;gap:2px}.user-dropdown-header{display:flex;align-items:center;gap:10px;padding:8px}.user-dropdown-info{display:flex;flex-direction:column;min-width:0}.user-dropdown-name{font-weight:700;font-size:.92rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-dropdown-email{font-size:.75rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-dropdown-divider{height:1px;background:var(--brd);margin:4px 0}.user-dropdown-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;text-decoration:none;font-weight:500;font-size:.88rem;color:var(--ink);background:transparent;border:0;width:100%;text-align:left;cursor:pointer;transition:background .15s ease;font-family:inherit}.user-dropdown-item:hover{background:var(--hover);color:var(--accent)}.user-dropdown-item.danger{color:#dc2626}.user-dropdown-item.danger:hover{background:#dc26261a}.auth-actions{display:flex;align-items:center;gap:8px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 18px;border-radius:14px;font-weight:600;font-size:.92rem;cursor:pointer;text-decoration:none;border:0;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 8px 20px -6px #7c3aed99;transition:transform .18s ease,box-shadow .18s ease;font-family:inherit}.btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px -6px #7c3aedb3}.ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 16px;border-radius:14px;font-weight:600;font-size:.92rem;cursor:pointer;text-decoration:none;border:1px solid var(--brd);background:var(--field);color:var(--ink);transition:all .18s ease;font-family:inherit}.ghost:hover{background:var(--hover);border-color:color-mix(in srgb,var(--accent) 30%,transparent);color:var(--accent)}.mobile-toggle{display:none}.bar{pointer-events:auto;position:relative;display:flex;align-items:center;gap:12px;width:min(1180px,calc(100% - 24px));padding:8px 10px;border-radius:22px;background:var(--glass);border:1px solid var(--brd);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);box-shadow:var(--shadow)}.ttl{display:flex;align-items:center;gap:12px;min-width:0}.ttl small{display:block;color:var(--muted);font-size:.78rem;font-family:Figtree,sans-serif;line-height:1.2}.ttl b{font:700 1.05rem Bricolage Grotesque,sans-serif;white-space:nowrap;color:var(--ink);line-height:1.2}.steps{display:flex;align-items:center;flex:1;justify-content:center;list-style:none;margin:0;padding:0;gap:4px}.st{display:flex;align-items:center;gap:8px;padding:5px 14px 5px 5px;border:0;border-radius:999px;background:none;color:var(--muted);font:500 .9rem Figtree,sans-serif;cursor:pointer;white-space:nowrap;transition:all .2s ease}.st:hover{background:var(--hover);color:var(--ink)}.st i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font-style:normal;font-size:.82rem;font-weight:600;background:var(--field);border:1px solid var(--brd);color:var(--ink);flex-shrink:0}.st.on{color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2))}.st.on i{background:#ffffff40;border-color:transparent;color:#fff}.st.done{color:var(--accent)}.st.done i{background:var(--accent);color:#fff;border-color:transparent}.line{width:20px;height:2px;border-radius:2px;background:var(--brd);flex-shrink:0}.save-btn{gap:6px;padding:8px 14px}.mobile-drawer-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0e0a2873;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:2000;display:flex;justify-content:flex-end}.mobile-drawer{width:min(340px,85vw);height:100%;padding:20px;background:var(--sheet);border-left:1px solid var(--brd);display:flex;flex-direction:column;gap:16px;overflow-y:auto;box-shadow:-10px 0 30px #0003;animation:slideLeft .25s cubic-bezier(.16,1,.3,1)}@keyframes slideLeft{0%{transform:translate(100%)}to{transform:translate(0)}}.mobile-drawer-header{display:flex;align-items:center;justify-content:space-between}.mobile-menu-categories{display:flex;flex-direction:column;gap:10px}.mobile-cat-group{border-radius:14px;background:var(--field);border:1px solid var(--brd);overflow:hidden}.mobile-cat-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px}.mobile-cat-title{font-weight:600;font-size:.95rem;color:var(--ink);text-decoration:none;font-family:Bricolage Grotesque,sans-serif}.mobile-cat-expand{border:0;background:none;color:var(--muted);cursor:pointer;padding:4px;display:flex;align-items:center}.mobile-cat-expand .rotated{transform:rotate(180deg)}.mobile-cat-tools{display:flex;flex-direction:column;padding:6px 10px 10px;gap:4px;border-top:1px solid var(--brd)}.mobile-tool-item{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:10px;text-decoration:none;color:var(--ink);font-size:.88rem}.mobile-tool-item:hover{background:var(--hover)}.mobile-tool-item .tile{width:28px;height:28px;border-radius:8px}.mobile-drawer-footer{margin-top:auto;padding-top:14px}.mobile-auth-btns{display:flex;flex-direction:column;gap:8px}@media (max-width: 960px){.nav{padding:6px 10px;gap:8px}.brand-text{display:none}.menu{display:flex;align-items:center;gap:6px;margin:0;justify-content:center}.nav-cat-text,.cat-chevron{display:none}.nav-cat-link{display:grid;place-items:center;width:38px;height:38px;padding:0;border-radius:12px;border:1px solid var(--brd);background:var(--field);color:var(--ink);flex-shrink:0}.nav-cat-link:hover,.nav-cat-link.hovered{background:var(--hover);border-color:color-mix(in srgb,var(--accent) 35%,transparent);color:var(--accent);transform:translateY(-1px)}.nav-cat-link.active{background:color-mix(in srgb,var(--accent) 15%,transparent);border-color:var(--accent);color:var(--accent)}.nav-cat-icon{display:grid;place-items:center}.nav-cat-icon svg{width:18px;height:18px}.cat-dropdown.glass{left:50%;transform:translate(-50%);min-width:min(340px,92vw);max-width:92vw}.mobile-toggle,.nav-search-wrapper{display:none}.bar{padding:6px 10px;gap:8px}.bar .ttl,.bar #theme{display:none!important}.bar .steps{flex:1;justify-content:center;align-items:flex-start;gap:4px}.save-btn{padding:8px 12px;height:40px;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.save-btn span{display:none}.st{display:flex;flex-direction:column;align-items:center;gap:3px;padding:2px 4px;background:none!important;border-radius:8px}.st i{width:26px;height:26px;font-size:.78rem}.st.on i{background:linear-gradient(135deg,var(--accent),var(--accent2))!important;color:#fff!important;border-color:transparent!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)!important}.st.done i{background:var(--accent)!important;color:#fff!important;border-color:transparent!important}.st span{display:block!important;font-size:.62rem;font-weight:500;line-height:1.1;color:var(--muted);text-align:center;max-width:48px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.st.on span{color:var(--ink);font-weight:700}.st.done span{color:var(--muted);font-weight:500}.line{width:8px;margin-top:12px;flex-shrink:0}.user-name{display:none}.user{padding:4px}}@media (max-width: 360px){.nav{padding:6px 8px;gap:4px}.menu{gap:4px}.nav-cat-link{width:34px;height:34px}.iconbtn{width:36px;height:36px}}@media (max-width: 320px){.menu{display:none}.mobile-toggle{display:grid}}.editor-confirm-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:99999;background:#0e0a28a6;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:16px;animation:editorConfirmFadeIn .2s ease}@keyframes editorConfirmFadeIn{0%{opacity:0}to{opacity:1}}.editor-confirm-card{position:relative;width:100%;max-width:310px;background:var(--sheet);border:1px solid var(--brd);border-radius:20px;padding:22px 18px 18px;text-align:center;box-shadow:0 20px 50px #00000073,0 0 0 1px #ffffff0f;animation:editorConfirmScaleIn .22s cubic-bezier(.16,1,.3,1)}@keyframes editorConfirmScaleIn{0%{opacity:0;transform:scale(.93) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}.editor-confirm-close{position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:50%;border:none;background:var(--field);color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:all .15s ease}.editor-confirm-close:hover{background:var(--hover);color:var(--ink)}.editor-confirm-icon-badge{width:44px;height:44px;border-radius:14px;background:#f59e0b1f;border:1px solid rgba(245,158,11,.25);color:#f59e0b;display:grid;place-items:center;margin:0 auto 12px;box-shadow:0 4px 14px -3px #f59e0b33}.editor-confirm-title{font-family:Bricolage Grotesque,sans-serif;font-size:1.05rem;font-weight:700;color:var(--ink);margin:0 0 6px;line-height:1.3;letter-spacing:-.01em}.editor-confirm-desc{font-family:Figtree,sans-serif;font-size:.82rem;color:var(--muted);margin:0 0 18px;line-height:1.4;padding:0 4px}.editor-confirm-actions{display:flex;flex-direction:column!important;gap:8px!important;width:100%!important}.editor-confirm-btn-cancel,.editor-confirm-btn-leave{display:inline-flex!important;align-items:center!important;justify-content:center!important;height:40px!important;min-height:40px!important;max-height:40px!important;padding:0 16px!important;border-radius:12px!important;font-size:.88rem!important;font-weight:600!important;box-sizing:border-box!important;width:100%!important;flex:none!important;text-decoration:none;cursor:pointer;transition:all .18s ease;line-height:normal!important;white-space:nowrap}.editor-confirm-btn-cancel{background:var(--field)!important;border:1px solid var(--brd)!important;color:var(--ink)!important}.editor-confirm-btn-cancel:hover{background:var(--hover)!important}.editor-confirm-btn-leave{background:linear-gradient(135deg,#ef4444,#dc2626)!important;box-shadow:0 6px 16px -4px #ef444473!important;border:none!important;color:#fff!important}.editor-confirm-btn-leave:hover{background:linear-gradient(135deg,#dc2626,#b91c1c)!important;box-shadow:0 8px 20px -4px #ef444499!important;transform:translateY(-1px)}.footer{position:relative;margin-top:auto;padding:0 0 24px;font-family:Figtree,system-ui,sans-serif}.footer-inner{width:min(1180px,calc(100% - 24px));margin:0 auto;padding:40px 32px 20px;border-radius:26px;background:var(--glass);border:1px solid var(--brd);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);box-shadow:var(--shadow)}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px;margin-bottom:32px}@media (max-width: 900px){.footer-grid{grid-template-columns:1fr 1fr;gap:28px}}@media (max-width: 600px){.footer-grid{grid-template-columns:1fr;gap:24px}}.footer-brand{display:flex;flex-direction:column;gap:10px}.footer-logo{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 1.25rem Bricolage Grotesque,sans-serif;color:var(--ink);margin-bottom:2px;transition:opacity .2s ease}.footer-logo:hover{opacity:.9}.footer-logo-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,#7c4dff,#f0527a);color:#fff;font-size:1rem;font-weight:800;font-family:Bricolage Grotesque,sans-serif;box-shadow:0 4px 12px -3px #7c4dff80;transition:transform .25s cubic-bezier(.16,1,.3,1)}.footer-logo:hover .footer-logo-icon{transform:scale(1.05) rotate(-3deg)}.footer-logo-text{font-family:Bricolage Grotesque,sans-serif;font-weight:800;font-size:1.2rem;letter-spacing:-.02em;color:var(--ink)}.footer-tagline{font-family:Bricolage Grotesque,sans-serif;font-size:1rem;font-weight:700;color:var(--ink);margin:0}.footer-description{font-size:.86rem;color:var(--muted);line-height:1.6;max-width:280px;margin:0}.footer-section{display:flex;flex-direction:column;gap:6px}.footer-heading{font-family:Bricolage Grotesque,sans-serif;font-size:.92rem;font-weight:700;color:var(--ink);margin:0 0 8px;letter-spacing:-.01em}.footer-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:5px}.footer-links li a{font-size:.86rem;color:var(--muted);text-decoration:none;transition:color .16s ease,transform .16s ease;display:inline-flex;align-items:center;gap:4px;padding:2px 0}.footer-links li a:hover{color:var(--accent);transform:translate(3px)}.footer-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:20px;border-top:1px solid var(--brd);gap:16px;flex-wrap:wrap}.footer-bottom-left{display:flex;align-items:center}.footer-copyright{font-size:.8rem;color:var(--muted);margin:0}.footer-bottom-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.footer-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:999px;background:var(--field);border:1px solid var(--brd);font-size:.78rem;font-weight:500;color:var(--muted);transition:all .18s ease}.footer-badge:hover{background:var(--hover);border-color:color-mix(in srgb,var(--accent) 30%,transparent);color:var(--accent)}.footer-badge svg{color:var(--accent);flex-shrink:0}.footer-heart{color:#f0527a!important;fill:#f0527a}@media (max-width: 600px){.footer-inner{padding:28px 20px 16px;border-radius:20px}.footer-bottom{flex-direction:column;align-items:flex-start;gap:12px}.footer-bottom-right{gap:8px}}.app-shell{display:flex;flex-direction:column;min-height:100vh;width:100%;position:relative}.main-wrapper{display:flex;flex-direction:column;flex:1;min-width:0;width:100%}.main-content{flex:1;display:flex;flex-direction:column;width:100%;padding-top:84px}.loading-fullpage{display:flex;align-items:center;justify-content:center;min-height:60vh}.loading-content{display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}.loading-inline{display:inline-flex;align-items:center;gap:var(--space-2)}.loading-label{font-size:var(--font-size-sm);color:var(--text-secondary)}:root{--ink: #16132e;--muted: #5d5a7a;--accent: #5b3df5;--accent2: #c026d3;--glass: rgba(255, 255, 255, .55);--brd: rgba(255, 255, 255, .8);--sheet: rgba(255, 255, 255, .68);--bg: #eceeff;--shadow: 0 12px 40px -14px rgba(70, 40, 170, .3);--hover: rgba(91, 61, 245, .08);--field: rgba(255, 255, 255, .82);--w1: rgba(255, 255, 255, .4);--color-primary: #5b3df5;--color-primary-hover: #4a2fe0;--color-primary-light: rgba(91, 61, 245, .1);--color-primary-dark: #3723a8;--color-secondary: #c026d3;--color-accent: #5b3df5;--color-success: #10b981;--color-warning: #f59e0b;--color-error: #ef4444;--color-info: #3b82f6;--color-purple: #7c4dff;--color-indigo: #4f46e5;--color-pink: #c026d3;--color-teal: #14b8a6;--color-coral: #FB7185;--color-amber: #FBBF24;--color-mint: #2DD4BF;--color-sky: #38BDF8;--color-lavender: #8B5CF6;--color-peach: #FB923C;--color-rose: #F472B6;--bg-primary: var(--bg);--bg-secondary: rgba(255, 255, 255, .7);--bg-tertiary: rgba(236, 238, 255, .8);--bg-elevated: var(--field);--bg-glass: var(--glass);--bg-glass-heavy: rgba(255, 255, 255, .85);--bg-overlay: rgba(14, 10, 40, .45);--bg-card: var(--glass);--bg-input: var(--field);--bg-input-hover: #ffffff;--bg-code: rgba(255, 255, 255, .7);--bg-workspace: transparent;--bg-canvas: #e2e5f8;--bg-panel: var(--field);--bg-panel-hover: #ffffff;--bg-toolbar: var(--glass);--bg-icon-rail: rgba(255, 255, 255, .6);--gradient-primary: linear-gradient(135deg, var(--accent), var(--accent2));--gradient-primary-hover: linear-gradient(135deg, #4d2fe0, #a81eb8);--gradient-accent: linear-gradient(135deg, #7c4dff, #4f46e5);--gradient-subtle: rgba(91, 61, 245, .08);--gradient-pill-active: linear-gradient(135deg, var(--accent), var(--accent2));--gradient-glow: 0 8px 24px -6px rgba(124, 58, 237, .5);--gradient-glow-hover: 0 12px 28px -6px rgba(124, 58, 237, .65);--bg-hero: transparent;--bg-gradient-glow: radial-gradient(circle at 50% 0%, rgba(139, 92, 246, .25) 0%, transparent 60%);--bg-creative-hero: transparent;--text-primary: var(--ink);--text-secondary: var(--muted);--text-tertiary: #8380a4;--text-inverse: #ffffff;--text-link: var(--accent);--text-code: #c026d3;--border-primary: var(--brd);--border-secondary: rgba(255, 255, 255, .5);--border-focus: var(--accent);--border-input: var(--brd);--border-input-hover: var(--accent);--border-glass: var(--brd);--shadow-xs: 0 1px 2px rgba(70, 40, 170, .06);--shadow-sm: 0 2px 6px rgba(70, 40, 170, .08);--shadow-md: 0 6px 16px -4px rgba(70, 40, 170, .14);--shadow-lg: 0 12px 32px -8px rgba(70, 40, 170, .22);--shadow-xl: 0 20px 48px -12px rgba(70, 40, 170, .3);--shadow-glow: 0 0 28px rgba(124, 58, 237, .35);--shadow-card: var(--shadow);--shadow-card-hover: 0 18px 48px -12px rgba(70, 40, 170, .38);--shadow-button: 0 8px 20px -6px rgba(124, 58, 237, .6);--shadow-canvas: 0 12px 40px -14px rgba(70, 40, 170, .3);--shadow-panel: var(--shadow);--shadow-float: 0 14px 42px -10px rgba(60, 30, 160, .4);--shadow-input: inset 0 1px 2px rgba(0, 0, 0, .04);--shadow-input-focus: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);--font-family: "Figtree", system-ui, -apple-system, sans-serif;--font-heading: "Bricolage Grotesque", sans-serif;--font-display: "Bricolage Grotesque", sans-serif;--font-creative: "Figtree", sans-serif;--font-mono: "SF Mono", "Fira Code", "Roboto Mono", monospace;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 2rem;--font-size-4xl: 2.5rem;--font-size-5xl: 3.5rem;--font-size-6xl: 4.5rem;--font-weight-light: 300;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--line-height-tight: 1.1;--line-height-snug: 1.3;--line-height-normal: 1.5;--line-height-relaxed: 1.7;--letter-spacing-tight: -.02em;--letter-spacing-normal: 0;--letter-spacing-wide: .02em;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--space-20: 5rem;--space-24: 6rem;--space-32: 8rem;--max-width: 1200px;--max-width-narrow: 840px;--max-width-wide: 1440px;--header-height: 64px;--radius-sm: 10px;--radius-md: 14px;--radius-lg: 18px;--radius-xl: 22px;--radius-2xl: 28px;--radius-full: 9999px;--transition-fast: .15s cubic-bezier(.16, 1, .3, 1);--transition-base: .24s cubic-bezier(.16, 1, .3, 1);--transition-slow: .38s cubic-bezier(.16, 1, .3, 1);--transition-spring: .5s cubic-bezier(.175, .885, .32, 1.275);--transition-smooth: .45s cubic-bezier(.4, 0, .2, 1);--transition-panel: .28s cubic-bezier(.4, 0, .2, 1);--z-dropdown: 100;--z-sticky: 100;--z-modal-backdrop: 300;--z-modal: 400;--z-toast: 500;--z-tooltip: 600;--z-studio-toolbar: 50;--z-studio-panel: 40}[data-theme=dark]{--ink: #f3f1ff;--muted: #a9a5cc;--accent: #8b7bff;--accent2: #c026d3;--glass: rgba(255, 255, 255, .07);--brd: rgba(255, 255, 255, .16);--sheet: rgba(12, 9, 32, .76);--bg: #0b0920;--shadow: 0 12px 40px -14px rgba(0, 0, 0, .7);--hover: rgba(255, 255, 255, .07);--field: rgba(255, 255, 255, .08);--w1: rgba(255, 255, 255, .05);--color-primary: #8b7bff;--color-primary-hover: #a193ff;--color-primary-light: rgba(139, 123, 255, .18);--color-secondary: #d946ef;--bg-primary: var(--bg);--bg-secondary: #131030;--bg-tertiary: #19163c;--bg-elevated: var(--field);--bg-glass: var(--glass);--bg-glass-heavy: rgba(20, 16, 48, .92);--bg-overlay: rgba(0, 0, 0, .75);--bg-card: var(--glass);--bg-input: var(--field);--bg-input-hover: rgba(255, 255, 255, .12);--bg-code: rgba(255, 255, 255, .08);--bg-workspace: transparent;--bg-canvas: #070518;--bg-panel: var(--sheet);--bg-panel-hover: rgba(255, 255, 255, .1);--bg-toolbar: var(--glass);--bg-icon-rail: rgba(255, 255, 255, .04);--text-primary: var(--ink);--text-secondary: var(--muted);--text-tertiary: #7d79a2;--text-link: #a597ff;--text-code: #f472b6;--border-primary: var(--brd);--border-secondary: rgba(255, 255, 255, .08);--border-input: var(--brd);--border-input-hover: var(--accent);--border-input-focus: var(--accent);--border-glass: var(--brd);--shadow-card: var(--shadow);--shadow-card-hover: 0 16px 40px -8px rgba(0, 0, 0, .85);--shadow-button: 0 8px 22px -6px rgba(139, 123, 255, .45);--shadow-glow: 0 0 32px rgba(139, 123, 255, .35);--shadow-canvas: var(--shadow);--shadow-panel: var(--shadow);--shadow-float: 0 16px 48px -10px rgba(0, 0, 0, .8);--shadow-input: inset 0 1px 2px rgba(0, 0, 0, .5);--shadow-input-focus: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);--color-primary-light: rgba(139, 123, 255, .16)}*{scrollbar-width:thin;scrollbar-color:rgba(124,92,255,.45) transparent}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#7c5cff66;border-radius:10px;border:3px solid transparent;background-clip:content-box}::-webkit-scrollbar-thumb:hover{background:#7c5cffb3;background-clip:content-box}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}body{font-family:var(--font-family);font-size:var(--font-size-base);line-height:var(--line-height-normal);color:var(--ink);min-height:100vh;background:radial-gradient(60vw 50vh at 10% 5%,rgba(139,92,246,.5),transparent 60%),radial-gradient(50vw 45vh at 92% 8%,rgba(251,113,133,.42),transparent 60%),radial-gradient(45vw 40vh at 72% 55%,rgba(45,212,191,.3),transparent 60%),radial-gradient(50vw 40vh at 4% 62%,rgba(251,191,36,.25),transparent 60%),var(--bg) fixed;transition:background-color var(--transition-smooth),color var(--transition-smooth)}[data-theme=dark] body:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:#0806188c;pointer-events:none;z-index:-1}.glass{background:var(--glass);border:1px solid var(--brd);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);box-shadow:var(--shadow)}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);letter-spacing:-.025em;color:var(--ink)}a{color:var(--text-link);text-decoration:none;transition:color var(--transition-fast),opacity var(--transition-fast)}a:hover{opacity:.8}img{max-width:100%;height:auto;display:block}button{font-family:inherit;cursor:pointer;border:none;background:none;outline:none}input,textarea,select{font-family:inherit;font-size:inherit}ul,ol{list-style:none}:focus-visible{outline:3px solid var(--color-primary-light);outline-offset:2px;border-radius:var(--radius-sm)}::selection{background:#5e5ce640;color:var(--text-primary)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-input);border-radius:var(--radius-full);border:2px solid var(--bg-primary)}::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary)}.container{width:min(1180px,calc(100% - 24px));margin:0 auto}@media (max-width: 768px){.container{width:calc(100% - 24px)}}@media (max-width: 480px){.container{width:calc(100% - 20px)}}.container-narrow,.container-wide{width:100%;padding:0 var(--space-6)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.text-gradient{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-purple) 50%,var(--color-pink) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 18px;font-size:.84rem;font-weight:600;line-height:1;border-radius:10px;transition:all .2s cubic-bezier(.16,1,.3,1);white-space:nowrap;-webkit-user-select:none;user-select:none;position:relative;overflow:hidden;border:1px solid transparent;cursor:pointer;text-decoration:none;font-family:var(--font-family)}.btn:active:not(:disabled){transform:translateY(.5px) scale(.985)!important}.btn-primary{background:var(--gradient-primary);color:#fff;border:1px solid rgba(67,56,202,.4);box-shadow:inset 0 1px #ffffff38,var(--gradient-glow)}.btn-primary:hover:not(:disabled){background:var(--gradient-primary-hover);transform:translateY(-1px);box-shadow:inset 0 1px #ffffff47,var(--gradient-glow-hover)}.btn-secondary{background:var(--bg-panel);color:var(--text-primary);border:1px solid var(--border-input);box-shadow:0 1px 2px #0000000a,inset 0 1px #ffffffd9;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.btn-secondary:hover:not(:disabled){background:var(--bg-panel-hover, #f8f8fb);border-color:#4f46e54d;color:var(--color-primary);transform:translateY(-1px);box-shadow:0 2px 8px #0000000f}.btn-ghost{color:var(--text-secondary);background:transparent;border:1px solid transparent}.btn-ghost:hover:not(:disabled){background:var(--color-primary-light);color:var(--color-primary)}.btn-danger{background:linear-gradient(180deg,#ef4444,#dc2626);color:#fff;border:1px solid rgba(185,28,28,.4);box-shadow:inset 0 1px #fff3,0 1px 2px #0f172a14,0 2px 6px #dc26262e}.btn-danger:hover:not(:disabled){background:linear-gradient(180deg,#dc2626,#b91c1c);transform:translateY(-1px);box-shadow:inset 0 1px #ffffff3d,0 3px 10px #dc26263d}.btn-sm{height:32px;padding:0 12px;font-size:.8rem;border-radius:8px;gap:5px}.btn-lg{height:44px;padding:0 24px;font-size:.95rem;border-radius:12px;gap:8px}.btn-icon{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;padding:0!important;border-radius:9px;display:inline-flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important}.btn-icon.btn-sm,.btn-sm.btn-icon{width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important;padding:0!important;border-radius:8px}button[class*=delete],button[class*=danger]:has(svg:only-child),.btn-danger.rounded-full{flex-shrink:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none!important}.card{background:var(--bg-card);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--border-primary);border-radius:14px;padding:var(--space-4) var(--space-5);box-shadow:var(--shadow-card);transition:border-color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast);position:relative;overflow:hidden;flex-shrink:0}@media (min-width: 768px){.card{padding:var(--space-5);border-radius:16px}}.card-interactive{cursor:pointer}.card-interactive:hover{box-shadow:0 12px 28px #6366f114,0 2px 6px #0000000a;border-color:#6366f140;transform:translateY(-3px)}.card-glass{background:var(--bg-glass);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--border-glass);box-shadow:0 8px 32px #0000000d,inset 0 1px #fff9}.input-group{display:flex;flex-direction:column;gap:5px;width:100%}.input-label{display:inline-flex;align-items:center;gap:5px;font-size:.8125rem;font-weight:600;color:var(--text-secondary);letter-spacing:.01em;-webkit-user-select:none;user-select:none;line-height:1.3}.label-required-asterisk{color:var(--color-error, #ff3b30);font-weight:700;margin-left:1px}.input{width:100%;height:38px;padding:8px 12px;font-size:.85rem;line-height:1.4;color:var(--text-primary);background:var(--bg-input);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--border-input);border-radius:10px;box-shadow:var(--shadow-input);transition:border-color var(--transition-fast),background-color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast);outline:none;font-family:var(--font-family);box-sizing:border-box}.input:hover{background:var(--bg-input-hover);border-color:var(--border-input-hover)}.input:focus{background:var(--bg-elevated);border-color:var(--border-input-focus);box-shadow:var(--shadow-input-focus)}.input::placeholder{color:var(--text-tertiary);font-weight:400;opacity:.8}.input-sm{height:32px;padding:5px 10px;font-size:.8rem;border-radius:8px}.input-lg{height:44px;padding:10px 14px;font-size:.95rem;border-radius:12px}textarea.input{height:auto;min-height:84px;padding:10px 12px;line-height:1.5;resize:vertical}.select-container{position:relative;width:100%;display:inline-flex;align-items:center}select.input,.select-custom{-moz-appearance:none;appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;background-size:13px 13px}select.input option{background:var(--bg-panel);color:var(--text-primary);padding:8px 12px}.select-chevron{position:absolute;right:12px;pointer-events:none;color:var(--color-primary);display:flex;align-items:center;justify-content:center;transition:transform var(--transition-fast)}.select-container:focus-within .select-chevron{transform:rotate(180deg)}.input[type=file]{height:auto;padding:4px 6px;font-size:.8125rem;cursor:pointer;display:flex;align-items:center}.input[type=file]::file-selector-button{background:linear-gradient(135deg,#6366f11a,#ec489914);border:1px solid rgba(99,102,241,.25);color:var(--color-primary);padding:5px 14px;border-radius:8px;font-weight:600;font-size:.8rem;cursor:pointer;margin-right:12px;transition:all var(--transition-fast);box-shadow:0 1px 3px #6366f114}.input[type=file]::file-selector-button:hover{background:linear-gradient(135deg,#6366f133,#ec489929);border-color:var(--color-primary);transform:translateY(-1px);box-shadow:0 3px 8px #6366f133}.input-error{border-color:var(--color-error);background:#ff3b300a}.input-error:focus{border-color:var(--color-error);box-shadow:0 0 0 3px #ff3b302e}.error-text{font-size:var(--font-size-xs);color:var(--color-error);margin-top:3px;font-weight:500}.badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);border-radius:var(--radius-full);background:var(--color-primary-light);color:var(--color-primary);text-transform:uppercase;letter-spacing:.05em}.badge-success{background:#34c75926;color:var(--color-success)}.badge-warning{background:#ff9f0a26;color:var(--color-warning)}.badge-error{background:#ff3b3026;color:var(--color-error)}.grid{display:grid;gap:var(--space-6)}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}.grid-auto-fill{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}.grid-auto-fill-sm{grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))}@media (max-width: 768px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}@media (min-width: 769px) and (max-width: 1024px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}.section{padding:var(--space-12) 0;position:relative}@media (min-width: 768px){.section{padding:var(--space-16) 0}}@media (min-width: 1024px){.section{padding:var(--space-20) 0}}.section-header{margin-bottom:var(--space-8);text-align:center}@media (min-width: 768px){.section-header{margin-bottom:var(--space-10)}}.section-title{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);color:var(--text-primary)}@media (min-width: 768px){.section-title{font-size:var(--font-size-3xl)}}.section-subtitle{font-size:var(--font-size-base);color:var(--text-secondary);margin-top:var(--space-2);max-width:600px;margin-left:auto;margin-right:auto}@media (min-width: 768px){.section-subtitle{font-size:var(--font-size-lg);margin-top:var(--space-3)}}.divider{height:1px;background:var(--border-primary);border:none;margin:var(--space-10) 0}.tabs{display:flex;gap:var(--space-2);border-bottom:1px solid var(--border-primary);overflow-x:auto;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.tab{padding:var(--space-3) var(--space-5);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--text-secondary);border-bottom:2px solid transparent;transition:all var(--transition-fast);white-space:nowrap}.tab:hover{color:var(--text-primary)}.tab-active{color:var(--text-primary);border-bottom-color:var(--text-primary)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--bg-overlay);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:var(--z-modal-backdrop);display:flex;align-items:center;justify-content:center;padding:var(--space-6);animation:fadeIn var(--transition-fast) ease-out}.modal{background:var(--bg-elevated);border-radius:var(--radius-2xl);box-shadow:var(--shadow-2xl);max-width:540px;width:100%;max-height:85vh;overflow-y:auto;animation:scaleSpring var(--transition-spring) forwards;z-index:var(--z-modal);border:1px solid var(--border-primary)}@media (max-width: 768px){.modal-backdrop{align-items:flex-end;padding:0}.modal{max-height:90vh;border-radius:var(--radius-2xl) var(--radius-2xl) 0 0;animation:slideUp var(--transition-spring) forwards}}.modal-header{padding:var(--space-6) var(--space-8);border-bottom:1px solid var(--border-primary);display:flex;align-items:center;justify-content:space-between}.modal-body{padding:var(--space-8)}.modal-footer{padding:var(--space-6) var(--space-8);border-top:1px solid var(--border-primary);display:flex;justify-content:flex-end;gap:var(--space-3);background:var(--bg-secondary)}.toast-container{position:fixed;bottom:var(--space-6);right:var(--space-6);z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--space-3)}.toast{background:var(--bg-elevated);border:1px solid var(--border-primary);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-6);box-shadow:var(--shadow-xl);display:flex;align-items:center;gap:var(--space-4);min-width:320px;max-width:420px;animation:slideInRight var(--transition-spring) forwards}.spinner{width:24px;height:24px;border:2px solid var(--border-secondary);border-top-color:var(--text-primary);border-radius:50%;animation:spin .8s cubic-bezier(.4,0,.2,1) infinite}.skeleton{background:linear-gradient(90deg,var(--bg-secondary) 25%,var(--bg-input-hover) 50%,var(--bg-secondary) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-md)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(30px) scale(.95)}to{opacity:1;transform:translate(0) scale(1)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes scaleSpring{0%{opacity:0;transform:scale(.9)}50%{transform:scale(1.02)}to{opacity:1;transform:scale(1)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.animate-fadeIn{animation:fadeIn var(--transition-base) ease-out forwards}.animate-slideUp{animation:slideUp var(--transition-base) ease-out forwards}.animate-slideDown{animation:slideDown var(--transition-base) ease-out forwards}.animate-scaleIn{animation:scaleIn var(--transition-base) ease-out forwards}.delay-100{animation-delay:.1s;opacity:0}.delay-200{animation-delay:.2s;opacity:0}.delay-300{animation-delay:.3s;opacity:0}.delay-400{animation-delay:.4s;opacity:0}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}html{scroll-behavior:auto}}@media print{.no-print{display:none!important}body{background:#fff;color:#000}.card{border:1px solid #ddd;box-shadow:none}}.quick-actions-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-5)}.quick-action-card{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-5);text-decoration:none;color:var(--text-primary);background:var(--bg-card);border:1px solid var(--border-primary);border-radius:var(--radius-xl);transition:all var(--transition-spring);box-shadow:var(--shadow-sm)}.quick-action-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--border-input)}.quick-action-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);flex-shrink:0;transition:background var(--transition-fast)}.quick-action-card:hover .quick-action-icon{background:var(--color-primary-light)}.quick-action-label{flex:1;font-weight:var(--font-weight-semibold);font-size:var(--font-size-base)}.quick-action-arrow{color:var(--text-tertiary);transition:transform var(--transition-spring),color var(--transition-fast)}.quick-action-card:hover .quick-action-arrow{transform:translate(4px);color:var(--text-primary)}.categories-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--space-6)}.category-card{display:flex;align-items:flex-start;gap:var(--space-5);text-decoration:none;color:var(--text-primary);padding:var(--space-6);background:var(--bg-card);border:1px solid var(--border-primary);border-radius:var(--radius-xl);transition:all var(--transition-spring);box-shadow:var(--shadow-sm)}.category-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--border-input)}.category-card-icon{width:56px;height:56px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-xl);flex-shrink:0;box-shadow:inset 0 0 0 1px #fff3,0 8px 16px #0000001a;transition:transform var(--transition-fast)}.category-card:hover .category-card-icon{transform:none}.category-card-info{flex:1;min-width:0}.category-card-name{font-size:var(--font-size-lg);font-family:var(--font-heading);font-weight:var(--font-weight-bold);margin-bottom:var(--space-2)}.category-card-desc{font-size:var(--font-size-sm);color:var(--text-secondary);margin-bottom:var(--space-3);line-height:var(--line-height-relaxed)}.category-card-count{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em}.tool-card{display:flex;flex-direction:column;gap:var(--space-4);text-decoration:none;color:var(--text-primary);background:var(--bg-card);border:1px solid rgba(150,150,200,.1);border-radius:var(--radius-2xl);padding:var(--space-6);transition:all .4s cubic-bezier(.16,1,.3,1);box-shadow:0 4px 20px #00000008;position:relative;overflow:hidden;z-index:1}[data-theme=dark] .tool-card{background:#19192399;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-color:#ffffff0d}.tool-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--color-primary),var(--color-lavender));opacity:0;transition:opacity .4s ease;z-index:2}.tool-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px -4px #00000014,0 2px 6px -1px #00000008;border-color:var(--color-primary-light);background:var(--bg-panel)}[data-theme=dark] .tool-card:hover{box-shadow:0 12px 28px -4px #0006,0 2px 6px -1px #0003;border-color:#ffffff26;background:var(--bg-panel)}.tool-card:hover:before{opacity:1}.tool-card-header{display:flex;align-items:flex-start;justify-content:space-between}.tool-card-icon-wrapper{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:14px;background:#5e5ce614;color:var(--color-primary);transition:background .18s ease,color .18s ease;box-shadow:inset 0 0 0 1px #5e5ce61a}.tool-card:hover .tool-card-icon-wrapper{background:var(--color-primary-light);color:var(--color-primary)}.tool-card-name{font-size:1.1rem;font-weight:700;letter-spacing:-.01em;margin-bottom:4px}.tool-card-desc{font-size:.9rem;color:var(--text-secondary);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.tool-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:var(--space-4);border-top:1px solid rgba(0,0,0,.04)}[data-theme=dark] .tool-card-footer{border-top:1px solid rgba(255,255,255,.05)}.tool-card-category{font-size:.75rem;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.15em;font-weight:600}.tool-card-local{font-size:.75rem;color:var(--color-success);font-weight:600;background:#34c7591a;padding:4px 10px;border-radius:var(--radius-full)}input[type=file]{color:var(--text-secondary);font-size:13px;cursor:pointer}input[type=file]::-webkit-file-upload-button,input[type=file]::file-selector-button{background:linear-gradient(135deg,#6366f11a,#ec489914);border:1px solid rgba(99,102,241,.25);color:var(--color-primary);padding:6px 14px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.16,1,.3,1);margin-right:12px;box-shadow:0 1px 3px #6366f114}input[type=file]::-webkit-file-upload-button:hover,input[type=file]::file-selector-button:hover{background:linear-gradient(135deg,#6366f133,#ec489929);border-color:var(--color-primary);color:var(--color-primary);transform:translateY(-1px);box-shadow:0 4px 12px #6366f133}input[type=file]::-webkit-file-upload-button:active,input[type=file]::file-selector-button:active{transform:scale(.97)}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:6px;background:var(--bg-input-hover);border-radius:var(--radius-full);outline:none;box-shadow:inset 0 1px 2px #00000014;transition:all var(--transition-base)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--color-primary);box-shadow:0 2px 8px #6366f159,inset 0 1px 1px #fff;cursor:pointer;transition:transform var(--transition-fast),box-shadow var(--transition-fast)}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.18);box-shadow:0 4px 12px #6366f180}input[type=range]::-webkit-slider-thumb:active{transform:scale(.95);background:var(--color-primary-light)}input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--color-primary);box-shadow:0 2px 8px #6366f159;cursor:pointer;transition:all var(--transition-fast)}input[type=range]::-moz-range-thumb:hover{transform:scale(1.18);box-shadow:0 4px 12px #6366f180}input[type=range]::-moz-range-thumb:active{transform:scale(.95);background:var(--color-primary-light)}.creator-container{display:grid;grid-template-columns:1fr 1.5fr;gap:var(--space-6);min-height:calc(100vh - 140px)}@media (max-width: 1024px){.creator-container{grid-template-columns:1fr;grid-template-rows:auto 1fr}}.creator-sidebar{background:var(--bg-card);border:1px solid var(--border-primary);border-radius:var(--radius-xl);padding:var(--space-6);box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:var(--space-6);max-height:calc(100vh - 140px);overflow-y:auto}.creator-sidebar>*{flex-shrink:0}.creator-sidebar-header{position:sticky;top:-24px;background:var(--bg-card);padding-top:var(--space-6);padding-bottom:var(--space-4);margin-top:calc(-1 * var(--space-6));border-bottom:1px solid var(--border-primary);z-index:10;display:flex;justify-content:space-between;align-items:center}.creator-sidebar-section{display:flex;flex-direction:column;gap:var(--space-4)}.creator-sidebar-title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin:0;color:var(--text-primary)}.creator-preview-container{flex:1;background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:var(--radius-xl);padding:var(--space-8);display:flex;align-items:center;justify-content:center;overflow-y:auto;box-shadow:inset 0 2px 10px #00000005;min-height:600px}.creator-preview-frame{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;position:relative;transition:all var(--transition-base)}.flex{display:flex}.flex-col{flex-direction:column}.flex-1{flex:1}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}.wrap{flex-wrap:wrap}.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}.gap-6{gap:var(--space-6)}.mt-0{margin-top:0}.mt-2{margin-top:var(--space-2)}.mt-4{margin-top:var(--space-4)}.mt-6{margin-top:var(--space-6)}.mt-auto{margin-top:auto}.mb-0{margin-bottom:0}.mb-2{margin-bottom:var(--space-2)}.mb-4{margin-bottom:var(--space-4)}.mb-6{margin-bottom:var(--space-6)}.ml-2{margin-left:var(--space-2)}.ml-4{margin-left:var(--space-4)}.ml-auto{margin-left:auto}.mr-2{margin-right:var(--space-2)}.mr-4{margin-right:var(--space-4)}.mr-auto{margin-right:auto}.p-0{padding:0}.p-2{padding:var(--space-2)}.p-4{padding:var(--space-4)}.p-6{padding:var(--space-6)}.pb-2{padding-bottom:var(--space-2)}.pb-4{padding-bottom:var(--space-4)}.pt-2{padding-top:var(--space-2)}.pt-4{padding-top:var(--space-4)}.w-full{width:100%}.h-full{height:100%}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}.text-sm{font-size:var(--font-size-sm)}.text-xs{font-size:var(--font-size-xs)}.font-bold{font-weight:var(--font-weight-bold)}.font-medium{font-weight:var(--font-weight-medium)}.border-b{border-bottom:1px solid var(--border-primary)}.border-t{border-top:1px solid var(--border-primary)}.bg-transparent{background:transparent}.cursor-pointer{cursor:pointer}.template-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--space-5)}.template-visual-card{position:relative;border-radius:var(--radius-xl);overflow:hidden;background:var(--bg-panel);border:1px solid var(--border-primary);transition:all var(--transition-spring);cursor:pointer;text-decoration:none;color:var(--text-primary);display:block}.template-visual-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-xl);border-color:var(--color-primary-light)}.template-visual-preview{aspect-ratio:3/4;background:var(--bg-tertiary);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.template-visual-preview-img{width:100%;height:100%;object-fit:cover}.template-visual-gradient{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);padding:var(--space-6)}.template-visual-emoji{font-size:48px}.template-visual-mini-text{width:60%;display:flex;flex-direction:column;gap:6px}.template-visual-mini-line{height:3px;background:#fff6;border-radius:3px}.template-visual-mini-line:first-child{width:50%;height:5px;margin-bottom:4px}.template-visual-mini-line:nth-child(2){width:80%}.template-visual-mini-line:nth-child(3){width:65%}.template-visual-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--transition-base)}.template-visual-card:hover .template-visual-overlay{opacity:1}.template-visual-use-btn{padding:10px 24px;background:#fff;color:#1d1d1f;border-radius:var(--radius-full);font-size:var(--font-size-sm);font-weight:600;cursor:pointer;border:none;transform:translateY(8px);transition:transform var(--transition-base);box-shadow:var(--shadow-md)}.template-visual-card:hover .template-visual-use-btn{transform:translateY(0)}.template-visual-info{padding:var(--space-3) var(--space-4)}.template-visual-name{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold)}.template-visual-category{font-size:11px;color:var(--text-tertiary);margin-top:2px;text-transform:capitalize}.template-visual-badge{position:absolute;top:var(--space-3);right:var(--space-3);padding:3px 10px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;border-radius:var(--radius-full);z-index:5}.template-visual-badge.free{background:#34c759e6;color:#fff}.template-visual-badge.pro{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff}