:root{--color-brand-fuchsia:#d846ef;--color-brand-indigo:#5147e6;--gradient-brand:linear-gradient(135deg, var(--color-brand-fuchsia), var(--color-brand-indigo));--gradient-brand-text:linear-gradient(90deg, var(--color-brand-fuchsia), var(--color-brand-indigo));--color-bg:#f4f6fb;--color-bg-subtle:#eef1f8;--color-surface:#fff;--color-primary:var(--color-brand-indigo);--color-primary-hover:#4338ca;--color-primary-subtle:#d446ef14;--color-text:#0f172a;--color-text-secondary:#64748b;--color-text-muted:#94a3b8;--color-border:#e2e8f0;--color-border-light:#f1f5f9;--color-error:#ef4444;--color-error-bg:#fef2f2;--color-success:#10b981;--color-success-bg:#ecfdf5;--color-primary-light:#d446ef0f;--color-warning:#f59e0b;--color-warning-bg:#fffbeb;--color-sidebar-bg:#0f172a;--color-sidebar-text:#94a3b8;--color-sidebar-active:#f8fafc;--color-sidebar-active-bg:#d446ef26;--color-sidebar-hover:#ffffff0d;--color-sidebar-border:#ffffff0f;--color-header-bg:#fffc;--color-header-border:#e2e8f0;--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;--font-sans:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;--font-mono:"JetBrains Mono", "SF Mono", "Cascadia Code", monospace;--text-xs:.75rem;--text-sm:.8125rem;--text-base:.9375rem;--text-lg:1.0625rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:1.875rem;--sidebar-width:264px;--header-height:64px;--radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-2xl:1.25rem;--shadow-xs:0 1px 2px #0000000a;--shadow-sm:0 1px 3px #0000000f, 0 1px 2px #0000000a;--shadow-md:0 4px 6px -1px #0000000f, 0 2px 4px -2px #0000000a;--shadow-lg:0 10px 15px -3px #0000000f, 0 4px 6px -4px #0000000a;--shadow-xl:0 20px 25px -5px #00000014, 0 8px 10px -6px #0000000a;--shadow-card:0 0 0 1px #00000008, 0 1px 3px #0000000a, 0 6px 16px #00000008;--shadow-card-hover:0 0 0 1px #6366f10f, 0 4px 12px #0000000f, 0 12px 28px #0000000a;--transition-fast:.15s cubic-bezier(.4, 0, .2, 1);--transition-base:.2s cubic-bezier(.4, 0, .2, 1);--transition-slow:.3s cubic-bezier(.4, 0, .2, 1)}[data-theme=dark]{--color-bg:#0c1220;--color-bg-subtle:#131b2e;--color-surface:#1a2236;--color-primary:#7c6bf5;--color-primary-hover:#6d5ce6;--color-primary-subtle:#d446ef1f;--color-text:#e8ecf4;--color-text-secondary:#8b95a9;--color-text-muted:#5c6a82;--color-border:#263048;--color-border-light:#1e2a40;--color-error:#f87171;--color-error-bg:#ef44441f;--color-success:#34d399;--color-success-bg:#10b9811f;--color-primary-light:#d446ef1a;--color-warning:#fbbf24;--color-warning-bg:#f59e0b1f;--color-sidebar-bg:#080d18;--color-sidebar-text:#7a8599;--color-sidebar-active:#f0f2f7;--color-sidebar-active-bg:#d446ef2e;--color-sidebar-hover:#ffffff0d;--color-sidebar-border:#ffffff0d;--color-header-bg:#0c1220d9;--color-header-border:#263048;--shadow-xs:0 1px 2px #0003;--shadow-sm:0 1px 3px #0000004d, 0 1px 2px #0003;--shadow-md:0 4px 6px -1px #0000004d, 0 2px 4px -2px #0003;--shadow-lg:0 10px 15px -3px #0000004d, 0 4px 6px -4px #0003;--shadow-xl:0 20px 25px -5px #00000059, 0 8px 10px -6px #0003;--shadow-card:0 0 0 1px #ffffff0a, 0 1px 3px #0003, 0 6px 16px #00000026;--shadow-card-hover:0 0 0 1px #d446ef1a, 0 4px 12px #00000040, 0 12px 28px #0003}html[data-theme] body,html[data-theme] .header,html[data-theme] .sidebar,html[data-theme] .card,html[data-theme] .page-placeholder,html[data-theme] .usage-stat-card,html[data-theme] .usage-tooltip,html[data-theme] .form-input,html[data-theme] .header-logout-btn,html[data-theme] .header-user-group,html[data-theme] .api-key-toggle,html[data-theme] .api-key-input,html[data-theme] .toggle-slider,html[data-theme] .alert,html[data-theme] .webhook-row-deleted,html[data-theme] .webhook-confirm-dialog,html[data-theme] .webhook-confirm-backdrop,html[data-theme] .subscription-detail-row,html[data-theme] .subscription-plan,html[data-theme] .btn--ghost,html[data-theme] .btn-icon,html[data-theme] .theme-toggle{transition:background-color .25s,border-color .25s,color .25s,box-shadow .25s}[data-theme=dark] .sidebar{background:linear-gradient(195deg,#0d1420 0%,#080d18 50%,#060a14 100%);border-right:1px solid #ffffff08}[data-theme=dark] .sidebar:after{background:linear-gradient(#d446ef33 0%,#5147e60f 40%,#0000 80%)}[data-theme=dark] .sidebar-brand{border-bottom:1px solid #ffffff0a}[data-theme=dark] .sidebar-nav-link:hover{color:#cbd5e1;background-color:#ffffff0a}[data-theme=dark] .sidebar-close-btn:hover{background:#ffffff0f}[data-theme=dark] .header{background:linear-gradient(#0c1220eb 0%,#0c1220d1 100%);border-bottom:1px solid #263048b3}[data-theme=dark] .app-layout-main:before{background:radial-gradient(circle at 20% 20%,#d446ef08 0%,#5147e604 50%,#0000 75%)}[data-theme=dark] .form-input:hover:not(:focus){border-color:#374663}[data-theme=dark] .api-key-input{background-color:#131b2e}[data-theme=dark] .api-key-toggle{background:linear-gradient(135deg,#131b2e 0%,#0f1726 100%)}[data-theme=dark] .toggle-slider{background-color:#374663}[data-theme=dark] .page-placeholder:before{background:linear-gradient(135deg,#6366f108 0%,#0000 50%,#10b98108 100%)}[data-theme=dark] .btn--ghost{border-color:var(--color-border);background-color:var(--color-surface)}[data-theme=dark] .btn--ghost:hover:not(:disabled){background-color:var(--color-bg-subtle);border-color:#374663}[data-theme=dark] .header-logout-btn{background:var(--color-surface);border-color:var(--color-border);color:var(--color-text-secondary)}[data-theme=dark] .header-logout-btn:hover{color:var(--color-text);border-color:#374663}[data-theme=dark] .mobile-menu-btn:hover{background:var(--color-bg-subtle)}[data-theme=dark] .webhook-confirm-backdrop{background:#0009}[data-theme=dark] .webhook-confirm-dialog{background:var(--color-surface);box-shadow:0 0 0 1px #ffffff0f, var(--shadow-xl)}[data-theme=dark] .loading-screen{background:var(--color-bg)}.theme-toggle{background-color:var(--color-bg-subtle);border-radius:var(--radius-lg);border:1px solid var(--color-border-light);align-items:center;gap:2px;padding:3px;display:flex}.theme-toggle-btn{border-radius:var(--radius-md);width:30px;height:26px;color:var(--color-text-muted);transition:all var(--transition-fast);justify-content:center;align-items:center;display:flex}.theme-toggle-btn:hover{color:var(--color-text-secondary);background-color:var(--color-surface)}.theme-toggle-btn--active{color:var(--color-text);background-color:var(--color-surface);box-shadow:var(--shadow-xs)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{font-family:var(--font-sans);color:var(--color-text);background-color:var(--color-bg);letter-spacing:-.011em;line-height:1.6}a{color:inherit;text-decoration:none}ul{list-style:none}button{font:inherit;cursor:pointer;letter-spacing:inherit;background:0 0;border:none}input{font:inherit;letter-spacing:inherit}.app-layout{min-height:100vh;display:flex}.app-layout-main{margin-left:var(--sidebar-width);background:var(--color-bg);flex-direction:column;flex:1;min-height:100vh;display:flex;position:relative}.app-layout-main:before{content:"";top:0;left:var(--sidebar-width);pointer-events:none;z-index:0;background:radial-gradient(circle at 20% 20%,#d446ef0a 0%,#5147e605 50%,#0000 75%);width:600px;height:600px;position:fixed}.app-layout-content{padding:var(--space-10) var(--space-12);z-index:1;flex:1;max-width:1200px;position:relative}.sidebar-backdrop{display:none}.sidebar{width:var(--sidebar-width);height:100vh;color:var(--color-sidebar-text);z-index:40;transition:transform var(--transition-slow);background:linear-gradient(195deg,#111827 0%,#0c1322 50%,#0a0f1e 100%);border-right:1px solid #ffffff0a;flex-direction:column;display:flex;position:fixed;top:0;left:0;overflow-y:auto}.sidebar:after{content:"";pointer-events:none;background:linear-gradient(#d446ef40 0%,#5147e614 40%,#0000 80%);width:1px;height:100%;position:absolute;top:0;right:0}.sidebar-brand{padding:var(--space-8) var(--space-6) var(--space-6);justify-content:space-between;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3);border-bottom:1px solid #ffffff0f;display:flex;position:relative}.sidebar-brand-lockup{align-items:center;gap:var(--space-3);display:flex}.sidebar-logo{border-radius:6px;flex-shrink:0}.sidebar-title{font-size:var(--text-xl);color:var(--color-brand-indigo);letter-spacing:-.03em;font-weight:700}.sidebar-close-btn{border-radius:var(--radius-md);width:32px;height:32px;color:var(--color-sidebar-text);transition:all var(--transition-fast);justify-content:center;align-items:center;display:none}.sidebar-close-btn:hover{color:var(--color-sidebar-active);background:#ffffff14}.sidebar-nav{padding:var(--space-2) var(--space-3);flex:1}.sidebar-nav-list{flex-direction:column;gap:2px;display:flex}.sidebar-nav-item{padding:0}.sidebar-nav-link{align-items:center;gap:var(--space-3);padding:10px var(--space-4);border-radius:var(--radius-md);font-size:var(--text-sm);transition:all var(--transition-fast);color:var(--color-sidebar-text);font-weight:450;display:flex;position:relative}.sidebar-nav-link svg{opacity:.7;transition:opacity var(--transition-fast);flex-shrink:0}.sidebar-nav-link:hover{color:#e2e8f0;background-color:#ffffff0f}.sidebar-nav-link:hover svg{opacity:1}.sidebar-nav-link--active{color:var(--color-sidebar-active);box-shadow:inset 3px 0 0 var(--color-brand-fuchsia);background:linear-gradient(135deg,#d446ef33 0%,#5147e614 100%);font-weight:550}.sidebar-nav-link--active svg{opacity:1}.sidebar-nav-link--active:after{content:"";border-radius:var(--radius-md);pointer-events:none;position:absolute;inset:0;box-shadow:0 0 12px #d446ef1f}.header{height:var(--header-height);-webkit-backdrop-filter:blur(20px)saturate(1.4);padding:0 var(--space-12);z-index:30;background:linear-gradient(#ffffffeb 0%,#ffffffd1 100%);border-bottom:1px solid #e2e8f0b3;align-items:center;display:flex;position:sticky;top:0}.header-content{justify-content:space-between;align-items:center;width:100%;display:flex}.header-left{align-items:center;gap:var(--space-3);display:flex}.header-title{font-size:var(--text-base);color:var(--color-text);letter-spacing:-.01em;font-weight:600}.header-actions{align-items:center;gap:var(--space-4);display:flex}.header-user-group{align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3) var(--space-1) var(--space-1);background:var(--color-bg-subtle);border-radius:var(--radius-xl);display:flex}.header-avatar{background:var(--gradient-brand);color:#fff;width:28px;height:28px;font-size:var(--text-xs);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-weight:600;display:flex}.header-user{font-size:var(--text-sm);color:var(--color-text-secondary);font-weight:450}.header-logout-btn{font-size:var(--text-sm);color:var(--color-text-secondary);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);border:1px solid var(--color-border);transition:all var(--transition-fast);background:var(--color-surface);font-weight:500}.header-logout-btn:hover{color:var(--color-text);border-color:var(--color-text-muted);box-shadow:var(--shadow-sm);transform:translateY(-.5px)}.mobile-menu-btn{border-radius:var(--radius-md);width:40px;height:40px;color:var(--color-text);transition:all var(--transition-fast);flex-shrink:0;justify-content:center;align-items:center;display:none}.mobile-menu-btn:hover{background:var(--color-bg-subtle)}.login-page{min-height:100vh;padding:var(--space-6);background:linear-gradient(145deg,#0f172a 0%,#1a1e3a 50%,#0f172a 100%);justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.login-page:before{content:"";pointer-events:none;background:radial-gradient(circle,#d446ef33 0%,#5147e60f 40%,#0000 70%);width:800px;height:800px;animation:20s ease-in-out infinite float-slow;position:absolute;top:-30%;right:-15%}.login-page:after{content:"";pointer-events:none;background:radial-gradient(circle,#10b9811f 0%,#10b98108 40%,#0000 70%);width:600px;height:600px;animation:25s ease-in-out infinite reverse float-slow;position:absolute;bottom:-25%;left:-10%}@keyframes float-slow{0%,to{transform:translate(0)}50%{transform:translate(20px,-20px)}}.login-card{border-radius:var(--radius-2xl);padding:var(--space-12) var(--space-10);-webkit-backdrop-filter:blur(24px)saturate(1.2);z-index:1;background:#ffffff0a;border:1px solid #ffffff14;width:100%;max-width:440px;position:relative;box-shadow:0 0 0 1px #ffffff0a,0 16px 48px #00000040,0 4px 12px #00000026}.login-header{text-align:center;margin-bottom:var(--space-8)}.login-logo{margin-bottom:var(--space-6);justify-content:center;display:flex}.login-logo svg{filter:drop-shadow(0 4px 12px #6366f14d)}.login-title{font-size:var(--text-2xl);text-align:center;margin-bottom:var(--space-2);color:#f8fafc;letter-spacing:-.03em;font-weight:700}.login-subtitle{font-size:var(--text-sm);color:#94a3b8;text-align:center;line-height:1.5}.login-form{gap:var(--space-5);flex-direction:column;display:flex}.login-page .form-label{color:#cbd5e1}.login-page .form-input{color:#f8fafc;background:#ffffff0d;border-color:#ffffff1a}.login-page .form-input::placeholder{color:#475569}.login-page .form-input:focus{border-color:var(--color-brand-fuchsia);background:#ffffff12;box-shadow:0 0 0 3px #d446ef40,0 0 16px #d446ef1f}.login-error{padding:var(--space-3) var(--space-4);color:#fca5a5;border-radius:var(--radius-md);font-size:var(--text-sm);background-color:#ef44441a;border:1px solid #ef444433;line-height:1.5}.login-message{padding:var(--space-3) var(--space-4);color:#6ee7b7;border-radius:var(--radius-md);font-size:var(--text-sm);background-color:#10b9811a;border:1px solid #10b98133;line-height:1.5}.login-submit-btn{width:100%;padding:12px var(--space-4);background:var(--gradient-brand);color:#fff;border-radius:var(--radius-md);font-size:var(--text-sm);transition:all var(--transition-base);letter-spacing:.01em;font-weight:600;box-shadow:0 1px 2px #0003,0 4px 12px #d446ef4d,inset 0 1px #ffffff26}.login-submit-btn:hover:not(:disabled){background:linear-gradient(135deg, #c23ae0 0%, var(--color-primary-hover) 100%);transform:translateY(-1px);box-shadow:0 4px 16px #d446ef80,0 8px 24px #5147e633,inset 0 1px #ffffff26}.login-submit-btn:active:not(:disabled){transform:translateY(0)}.login-submit-btn:disabled{opacity:.5;cursor:not-allowed}.form-actions-row{margin-top:calc(var(--space-1) * -1);justify-content:flex-end;display:flex}.link-btn{color:var(--color-brand-fuchsia);font-size:var(--text-sm);cursor:pointer;transition:color var(--transition-fast);background:0 0;border:none;padding:0;font-weight:500}.login-page .link-btn{color:var(--color-brand-fuchsia)}.link-btn:hover{color:var(--color-brand-indigo);text-decoration:underline}.login-page .link-btn:hover{color:#e879f7}.link-btn:disabled{opacity:.5;cursor:not-allowed}.auth-switch{text-align:center;font-size:var(--text-sm);color:var(--color-text-secondary)}.login-page .auth-switch{color:#64748b}.google-sign-in-btn{justify-content:center;align-items:center;gap:var(--space-3);width:100%;padding:12px var(--space-4);border-radius:var(--radius-md);color:#f1f5f9;font-size:var(--text-sm);cursor:pointer;transition:all var(--transition-base);letter-spacing:.01em;background:#ffffff0f;border:1px solid #ffffff1f;font-weight:500;display:flex}.google-sign-in-btn:hover:not(:disabled){background:#ffffff1a;border-color:#fff3;box-shadow:0 2px 8px #00000026}.google-sign-in-btn:active:not(:disabled){background:#ffffff14}.google-sign-in-btn:disabled{opacity:.5;cursor:not-allowed}.google-icon{flex-shrink:0}.login-divider{align-items:center;gap:var(--space-3);display:flex}.login-divider:before,.login-divider:after{content:"";background:#ffffff14;flex:1;height:1px}.login-divider-text{font-size:var(--text-xs);color:#64748b;text-transform:lowercase;letter-spacing:.05em}.form-description{font-size:var(--text-sm);color:var(--color-text-secondary);margin-bottom:var(--space-2);line-height:1.6}.login-page .form-description{color:#94a3b8}.form-description strong{color:var(--color-text);font-weight:600}.login-page .form-description strong{color:#f1f5f9}.password-requirements{margin-top:var(--space-2);gap:var(--space-1) var(--space-4);flex-wrap:wrap;padding:0;list-style:none;display:flex}.password-requirements li{font-size:var(--text-xs);align-items:center;gap:var(--space-1);display:flex}.requirement-met{color:var(--color-success)}.login-page .requirement-met{color:#6ee7b7}.requirement-unmet{color:var(--color-text-muted)}.login-page .requirement-unmet{color:#475569}.requirement-icon{font-size:.625rem;font-weight:700}.form-input--code{text-align:center;letter-spacing:.5em;font-size:var(--text-xl);font-weight:600;font-family:var(--font-mono);padding:var(--space-3) var(--space-4)}.form-field{gap:var(--space-2);flex-direction:column;display:flex}.form-label{font-size:var(--text-sm);color:var(--color-text);font-weight:500}.form-input{border:1.5px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--text-sm);transition:all var(--transition-fast);background:var(--color-surface);color:var(--color-text);padding:10px 14px}.form-input::placeholder{color:var(--color-text-muted)}.form-input:focus{border-color:var(--color-brand-fuchsia);outline:none;box-shadow:0 0 0 3px #d446ef14,0 1px 2px #0000000a}.form-input:hover:not(:focus){border-color:#cbd5e1}.page{max-width:880px}.page-header{margin-bottom:var(--space-10)}.page-header-row{justify-content:space-between;align-items:flex-start;gap:var(--space-4);display:flex}.page-header .page-description{margin-bottom:0}.page-title{font-size:var(--text-2xl);margin-bottom:var(--space-2);letter-spacing:-.03em;background:var(--gradient-brand-text);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-weight:700;display:inline-block;position:relative}.page-title:after{content:"";background:var(--gradient-brand);border-radius:2px;width:60px;height:4px;position:absolute;bottom:-6px;left:0}.page-description{color:var(--color-text-secondary);font-size:var(--text-sm);margin-bottom:var(--space-8);margin-top:var(--space-4);line-height:1.7}.page-placeholder{background:var(--color-surface);border:1px dashed var(--color-border);border-radius:var(--radius-xl);padding:var(--space-16) var(--space-8);text-align:center;min-height:200px;color:var(--color-text-muted);font-size:var(--text-sm);box-shadow:var(--shadow-card);justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.page-placeholder:before{content:"";pointer-events:none;background:linear-gradient(135deg,#6366f105 0%,#0000 50%,#10b98105 100%);position:absolute;inset:0}.page-placeholder p{z-index:1;position:relative}.loading-screen{min-height:100vh;color:var(--color-text-muted);background:var(--color-bg);justify-content:center;align-items:center;display:flex}.loading-spinner{justify-content:center;align-items:center;gap:var(--space-3);color:var(--color-text-muted);flex-direction:column;display:flex}.loading-spinner--sm{gap:var(--space-2)}.loading-spinner--lg{gap:var(--space-4)}.loading-spinner-svg{animation:.8s linear infinite spinner-rotate}.loading-spinner-track{opacity:.12}.loading-spinner-arc{opacity:1}.loading-spinner-label{font-size:var(--text-sm);letter-spacing:-.01em;color:var(--color-text-muted);font-weight:500}.loading-spinner--sm .loading-spinner-label{font-size:var(--text-xs)}.loading-spinner--lg .loading-spinner-label{font-size:var(--text-base)}.page-placeholder .loading-spinner{padding:var(--space-4) 0}@keyframes spinner-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.card{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-8);margin-bottom:var(--space-6);box-shadow:var(--shadow-card)}.card-title{font-size:var(--text-lg);margin-bottom:var(--space-1);letter-spacing:-.015em;color:var(--color-text);font-weight:600}.card-description{font-size:var(--text-sm);color:var(--color-text-secondary);margin-bottom:var(--space-5);line-height:1.6}.card-actions{justify-content:flex-end;gap:var(--space-3);margin-top:var(--space-6);padding-top:var(--space-5);border-top:1px solid var(--color-border-light);display:flex}.btn{justify-content:center;align-items:center;gap:var(--space-2);border-radius:var(--radius-md);font-size:var(--text-sm);transition:all var(--transition-fast);white-space:nowrap;padding:9px 18px;font-weight:500;display:inline-flex;position:relative}.btn:disabled{opacity:.4;cursor:not-allowed}.btn--sm{font-size:var(--text-xs);padding:5px 12px}.btn--primary{background:var(--gradient-brand);color:#fff;font-weight:550;box-shadow:0 1px 3px #d446ef40,inset 0 1px #ffffff26}.btn--primary:hover:not(:disabled){background:linear-gradient(135deg, #c23ae0 0%, var(--color-primary-hover) 100%);transform:translateY(-1px);box-shadow:0 4px 14px #d446ef59,inset 0 1px #ffffff26}.btn--primary:active:not(:disabled){transform:translateY(0);box-shadow:0 1px 2px #d446ef33,inset 0 1px #ffffff1a}.btn--ghost{color:var(--color-text-secondary);border:1.5px solid var(--color-border);background-color:var(--color-surface);font-weight:500}.btn--ghost:hover:not(:disabled){background-color:var(--color-bg);color:var(--color-text);box-shadow:var(--shadow-xs);border-color:#cbd5e1;transform:translateY(-.5px)}.btn--ghost:active:not(:disabled){transform:translateY(0)}.btn--danger{background:linear-gradient(135deg, var(--color-error) 0%, #f87171 100%);color:#fff;font-weight:550;box-shadow:0 1px 3px #ef444440}.btn--danger:hover:not(:disabled){background:linear-gradient(135deg,#dc2626 0%,#ef4444 100%);transform:translateY(-1px);box-shadow:0 4px 12px #ef44444d}.btn--danger:active:not(:disabled){transform:translateY(0)}.btn--danger-ghost{color:var(--color-error);font-weight:500;font-size:var(--text-sm);transition:all var(--transition-fast);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);background:0 0}.btn--danger-ghost:hover:not(:disabled){background-color:var(--color-error-bg)}.btn-icon{border-radius:var(--radius-md);width:36px;height:36px;transition:all var(--transition-fast);color:var(--color-text-muted);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.btn-icon:hover{background-color:var(--color-bg);color:var(--color-text-secondary)}.btn-icon--danger:hover{color:var(--color-error);background-color:var(--color-error-bg)}.alert{padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);font-size:var(--text-sm);margin-bottom:var(--space-6);justify-content:space-between;align-items:center;display:flex}.alert--error{background-color:var(--color-error-bg);color:var(--color-error);border:1px solid #ef44441f}.alert-dismiss{font-size:var(--text-lg);color:inherit;opacity:.5;padding:0 var(--space-1);transition:opacity var(--transition-fast);line-height:1}.alert-dismiss:hover{opacity:1}.api-key-display{margin-bottom:var(--space-5)}.api-key-row{gap:var(--space-3);margin-top:var(--space-2);display:flex}.api-key-input{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-text);letter-spacing:0;border:1.5px solid var(--color-border);background-color:#f8f9fd;flex:1}.api-key-counter{font-size:var(--text-sm);color:var(--color-brand-indigo);margin-bottom:var(--space-5);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);background:linear-gradient(135deg,#d446ef14,#5147e60a);border:1px solid #d446ef1f;font-weight:450;display:inline-block}.api-key-toggle{align-items:center;gap:var(--space-4);margin-bottom:var(--space-6);padding:var(--space-4) var(--space-5);border-radius:var(--radius-lg);border:1px solid var(--color-border);transition:box-shadow var(--transition-fast);background:linear-gradient(135deg,#f8f9fd 0%,#f1f3f9 100%);display:flex}.api-key-toggle:hover{box-shadow:var(--shadow-xs)}.toggle-label{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:1.5}.api-key-regenerate{justify-content:space-between;align-items:center;gap:var(--space-4);padding-top:var(--space-5);border-top:1px solid var(--color-border-light);display:flex}.api-key-regenerate .card-description{margin-bottom:0}.regenerate-confirm{align-items:flex-end;gap:var(--space-3);flex-direction:column;display:flex}.regenerate-warning{font-size:var(--text-sm);color:var(--color-error);font-weight:500}.regenerate-actions{gap:var(--space-2);display:flex}.toggle{flex-shrink:0;width:44px;height:24px;display:inline-block;position:relative}.toggle-input{opacity:0;width:0;height:0;position:absolute}.toggle-slider{cursor:pointer;transition:background-color var(--transition-base), box-shadow var(--transition-base);background-color:#cbd5e1;border-radius:12px;position:absolute;inset:0}.toggle-slider:before{content:"";width:18px;height:18px;transition:transform var(--transition-base);background-color:#fff;border-radius:50%;position:absolute;bottom:3px;left:3px;box-shadow:0 1px 3px #0000001f}.toggle-input:checked+.toggle-slider{background:var(--gradient-brand);box-shadow:0 0 8px #d446ef40}.toggle-input:checked+.toggle-slider:before{transform:translate(20px)}.toggle-input:focus-visible+.toggle-slider{box-shadow:0 0 0 3px #d446ef40}.origins-list{gap:var(--space-3);margin-bottom:var(--space-3);flex-direction:column;display:flex}.origin-row{gap:var(--space-2);align-items:center;display:flex}.origin-input{flex:1}.btn-add-origin{align-items:center;gap:var(--space-2);color:var(--color-brand-fuchsia);font-size:var(--text-sm);padding:var(--space-2) var(--space-3);transition:all var(--transition-fast);border-radius:var(--radius-sm);font-weight:500;display:inline-flex}.btn-add-origin:hover{color:var(--color-brand-indigo);background-color:#d446ef14}.webhooks-list{gap:var(--space-4);margin-bottom:var(--space-3);flex-direction:column;display:flex}.webhook-row{gap:var(--space-1);flex-direction:column;display:flex}.webhook-row-main{gap:var(--space-2);align-items:center;display:flex}.webhook-input{font-family:var(--font-mono);font-size:var(--text-sm);flex:1}.form-input--error{border-color:var(--color-error)}.form-input--error:focus{border-color:var(--color-error);box-shadow:0 0 0 3px #ef444414,0 1px 2px #0000000a}.webhook-error{font-size:var(--text-xs);color:var(--color-error);padding-left:var(--space-1)}.webhook-id{color:var(--color-text-muted);font-size:.6875rem;font-family:var(--font-mono);padding-left:var(--space-1)}.webhook-row-deleted{align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background-color:var(--color-error-bg);border-radius:var(--radius-md);border:1px solid #ef44441f;display:flex}.webhook-deleted-url{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-text-muted);text-overflow:ellipsis;white-space:nowrap;flex:1;text-decoration:line-through;overflow:hidden}.webhook-deleted-label{font-size:var(--text-xs);color:var(--color-error);white-space:nowrap}.btn-undo{font-size:var(--text-xs);color:var(--color-brand-fuchsia);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);transition:all var(--transition-fast);white-space:nowrap;font-weight:500}.btn-undo:hover{color:var(--color-brand-indigo);background-color:#d446ef14}.btn-add-webhook{align-items:center;gap:var(--space-2);color:var(--color-brand-fuchsia);font-size:var(--text-sm);padding:var(--space-2) var(--space-3);transition:all var(--transition-fast);border-radius:var(--radius-sm);font-weight:500;display:inline-flex}.btn-add-webhook:hover{color:var(--color-brand-indigo);background-color:#d446ef14}.webhooks-empty{align-items:center;gap:var(--space-4);padding:var(--space-10) var(--space-8);color:var(--color-text-muted);text-align:center;flex-direction:column;display:flex}.webhooks-empty svg{opacity:.4}.webhooks-empty p{font-size:var(--text-sm)}.webhook-confirm-backdrop{-webkit-backdrop-filter:blur(4px);z-index:100;animation:fade-in var(--transition-fast) ease-out;background:#0006;position:fixed;inset:0}.webhook-confirm-dialog{background:var(--color-surface);border-radius:var(--radius-xl);padding:var(--space-8);max-width:440px;width:calc(100% - var(--space-8));box-shadow:var(--shadow-xl);z-index:101;animation:slide-up var(--transition-base) ease-out;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.webhook-confirm-dialog .card-description{margin-bottom:var(--space-6)}.webhook-confirm-dialog .regenerate-actions{justify-content:flex-end}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes slide-up{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.usage-stats-row{gap:var(--space-4);margin-bottom:var(--space-6);grid-template-columns:repeat(3,1fr);display:grid}.usage-stat-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6) var(--space-6);gap:var(--space-1);box-shadow:var(--shadow-card);flex-direction:column;display:flex}.usage-stat-label{font-size:var(--text-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;font-weight:500}.usage-stat-value{font-size:var(--text-2xl);color:var(--color-text);letter-spacing:-.03em;font-weight:700;line-height:1.2}.usage-stat-detail{font-size:var(--text-xs);color:var(--color-text-secondary)}.card-header-row{justify-content:space-between;align-items:flex-start;gap:var(--space-4);display:flex}.card-header-row .card-description{margin-bottom:var(--space-4)}.usage-chart-container{height:400px;margin-top:var(--space-2)}.usage-empty{align-items:center;gap:var(--space-3);padding:var(--space-12) var(--space-4);color:var(--color-text-muted);text-align:center;flex-direction:column;display:flex}.usage-empty svg{opacity:.5}.usage-empty p{font-size:var(--text-sm);margin:0}.usage-empty-hint{font-size:var(--text-xs);color:var(--color-text-muted)}.usage-tooltip{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);box-shadow:var(--shadow-md)}.usage-tooltip-date{font-size:var(--text-xs);color:var(--color-text-secondary);margin:0 0 var(--space-1)}.usage-tooltip-value{font-size:var(--text-sm);color:var(--color-text);margin:0;font-weight:600}.subscription-details{gap:var(--space-4);margin-bottom:var(--space-2);flex-direction:column;display:flex}.subscription-detail-row{padding:var(--space-3) var(--space-4);background:var(--color-bg-subtle);border-radius:var(--radius-md);border:1px solid var(--color-border-light);justify-content:space-between;align-items:center;display:flex}.subscription-detail-label{font-size:var(--text-sm);color:var(--color-text-secondary);font-weight:500}.subscription-detail-value{font-size:var(--text-sm);color:var(--color-text);font-weight:600}.subscription-status-badge{font-size:var(--text-xs);padding:var(--space-1) var(--space-3);text-transform:capitalize;border-radius:999px;font-weight:600}.subscription-status-badge--active{background-color:var(--color-success-bg);color:var(--color-success);border:1px solid #10b98133}.subscription-status-badge--warning{background-color:var(--color-warning-bg);color:var(--color-warning);border:1px solid #f59e0b33}.subscription-status-badge--canceled{background-color:var(--color-error-bg);color:var(--color-error);border:1px solid #ef444426}.subscription-status-badge--neutral{background-color:var(--color-bg-subtle);color:var(--color-text-muted);border:1px solid var(--color-border)}.subscription-active-note{align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);background:var(--color-success-bg);border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--color-success);border:1px solid #10b98126;font-weight:500;display:flex}.subscription-warning-note{align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);background:var(--color-warning-bg);border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--color-warning);border:1px solid #f59e0b26;font-weight:500;display:flex}.subscription-plans{gap:var(--space-6);grid-template-columns:repeat(2,1fr);display:grid}.subscription-plan{padding:var(--space-6);border-radius:var(--radius-lg);border:1.5px solid var(--color-border);background:var(--color-surface);gap:var(--space-3);flex-direction:column;display:flex}.subscription-plan--current{opacity:.7}.subscription-plan--pro{border-color:var(--color-brand-fuchsia);box-shadow:0 0 0 1px #d446ef14,0 4px 16px #d446ef1a}.subscription-plan-header{justify-content:space-between;align-items:center;gap:var(--space-2);display:flex}.subscription-plan-name{font-size:var(--text-lg);color:var(--color-text);letter-spacing:-.02em;font-weight:700}.subscription-plan-badge{font-size:var(--text-xs);padding:2px var(--space-2);background:var(--color-bg-subtle);color:var(--color-text-muted);border:1px solid var(--color-border);border-radius:999px;font-weight:600}.subscription-plan-badge--pro{color:var(--color-brand-indigo);background:linear-gradient(135deg,#d446ef1f,#5147e614);border-color:#d446ef33}.subscription-plan-price{align-items:baseline;gap:var(--space-1);display:flex}.subscription-plan-amount{font-size:var(--text-2xl);color:var(--color-text);letter-spacing:-.03em;font-weight:700}.subscription-plan-period{font-size:var(--text-sm);color:var(--color-text-muted)}.subscription-plan-price-detail{font-size:var(--text-sm);color:var(--color-text-secondary);margin-top:calc(-1 * var(--space-2))}.subscription-plan-features{margin:var(--space-2) 0;gap:var(--space-2);flex-direction:column;padding:0;list-style:none;display:flex}.subscription-plan-features li{font-size:var(--text-sm);color:var(--color-text-secondary);padding-left:var(--space-5);position:relative}.subscription-plan-features li:before{content:"";background:var(--color-brand-fuchsia);opacity:.5;border-radius:50%;width:6px;height:6px;position:absolute;top:6px;left:0}.subscription-plan--pro .subscription-plan-features li:before{opacity:1;background:var(--gradient-brand)}.subscription-upgrade-btn{width:100%;padding:12px var(--space-4);margin-top:auto}.subscription-plan--enterprise{background:linear-gradient(var(--color-surface), var(--color-surface)) padding-box, linear-gradient(135deg, var(--color-brand-fuchsia), var(--color-brand-indigo), #0ea5e9) border-box;border:1.5px solid #0000;position:relative;overflow:hidden;box-shadow:0 0 0 1px #5147e60f,0 4px 24px #5147e614,0 8px 32px #d446ef0d}.subscription-plan--enterprise:before{content:"";background:linear-gradient(90deg, var(--color-brand-fuchsia), var(--color-brand-indigo), #0ea5e9);height:3px;position:absolute;top:0;left:0;right:0}.subscription-plan-badge--enterprise{color:var(--color-brand-indigo);background:linear-gradient(135deg,#5147e61a,#0ea5e914);border-color:#5147e633}.subscription-plan--enterprise .subscription-plan-features li:before{opacity:1;background:linear-gradient(135deg, var(--color-brand-indigo), #0ea5e9)}.btn--enterprise{background:linear-gradient(135deg, var(--color-brand-indigo), #3730a3);color:#fff;border-radius:var(--radius-md);font-weight:600;font-size:var(--text-sm);letter-spacing:-.01em;cursor:pointer;transition:all var(--transition-fast);border:none;justify-content:center;align-items:center;text-decoration:none;display:inline-flex}.btn--enterprise:hover{background:linear-gradient(135deg, var(--color-brand-fuchsia), var(--color-brand-indigo));transform:translateY(-1px);box-shadow:0 2px 8px #5147e640,0 4px 16px #d446ef26}.activation-card{text-align:center;padding:var(--space-8) var(--space-6)}.activation-steps{justify-content:center;align-items:flex-start;gap:var(--space-8);margin:var(--space-8) 0 var(--space-6);display:flex;position:relative}.activation-steps:before{content:"";background:var(--color-border);z-index:0;width:240px;height:2px;position:absolute;top:8px;left:calc(50% - 120px)}.activation-step{align-items:center;gap:var(--space-2);z-index:1;flex-direction:column;min-width:120px;display:flex}.activation-step-indicator{width:16px;height:16px;color:var(--color-text-muted);justify-content:center;align-items:center;display:flex}.activation-step--done .activation-step-indicator{color:var(--color-success)}.activation-step--active .activation-step-indicator{color:var(--color-brand-indigo)}.activation-step-label{font-size:var(--text-xs);color:var(--color-text-muted);white-space:nowrap;font-weight:500}.activation-step--done .activation-step-label{color:var(--color-success)}.activation-step--active .activation-step-label{color:var(--color-text);font-weight:600}.activation-step-pulse{background:var(--gradient-brand);border-radius:50%;width:10px;height:10px;animation:1.5s ease-in-out infinite pulse-ring;box-shadow:0 0 #d446ef66}@keyframes pulse-ring{0%{transform:scale(1);box-shadow:0 0 #d446ef66}70%{transform:scale(1.1);box-shadow:0 0 0 6px #d446ef00}to{transform:scale(1);box-shadow:0 0 #d446ef00}}.activation-step-dot{background:var(--color-border);border-radius:50%;width:8px;height:8px}.activation-elapsed{justify-content:center;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--color-text-muted);margin-top:var(--space-2);display:flex}.activation-card--success{border-color:#10b98133}.activation-success-icon{color:var(--color-success);margin-bottom:var(--space-4)}.alert--success{background-color:var(--color-success-bg);color:var(--color-success);border:1px solid #10b98126}.redirect-overlay{z-index:100;-webkit-backdrop-filter:blur(4px);background:#00000073;justify-content:center;align-items:center;animation:.2s redirect-overlay-fade-in;display:flex;position:fixed;inset:0}@keyframes redirect-overlay-fade-in{0%{opacity:0}to{opacity:1}}.redirect-overlay-content{align-items:center;gap:var(--space-4);padding:var(--space-8) var(--space-10);background:var(--color-surface);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);flex-direction:column;max-width:320px;display:flex}.redirect-overlay-message{font-size:var(--text-base);color:var(--color-text);letter-spacing:-.01em;margin:0;font-weight:600}.subscription-plans--single{grid-template-columns:1fr;max-width:400px}[data-theme=dark] .subscription-detail-row{background:var(--color-bg-subtle);border-color:var(--color-border)}[data-theme=dark] .subscription-plan--pro{border-color:#d446ef66;box-shadow:0 0 0 1px #d446ef26,0 4px 16px #d446ef14}[data-theme=dark] .redirect-overlay{background:#0009}[data-theme=dark] .redirect-overlay-content{box-shadow:0 0 0 1px #ffffff0f, var(--shadow-xl)}@media (width<=768px){.sidebar-backdrop{-webkit-backdrop-filter:blur(4px);z-index:39;opacity:0;pointer-events:none;transition:opacity var(--transition-slow);background:#00000080;display:block;position:fixed;inset:0}.sidebar-backdrop--visible{opacity:1;pointer-events:auto}.sidebar{box-shadow:none;transform:translate(-100%)}.sidebar--open{transform:translate(0);box-shadow:4px 0 24px #0000004d,16px 0 48px #00000026}.sidebar-close-btn{display:flex}.app-layout-main{margin-left:0}.app-layout-main:before{display:none}.app-layout-content{padding:var(--space-5) var(--space-4);max-width:100%}.header{padding:0 var(--space-4);height:56px}.header-title{font-size:var(--text-sm)}.header-user,.header-user-group{display:none}.header-logout-btn{padding:var(--space-2) var(--space-3);font-size:var(--text-xs)}.theme-toggle-btn{width:28px;height:24px}.theme-toggle-btn svg{width:14px;height:14px}.mobile-menu-btn{display:flex}.page{max-width:100%}.page-title{font-size:var(--text-xl)}.page-description{margin-bottom:var(--space-5)}.page-placeholder{padding:var(--space-10) var(--space-4);border-radius:var(--radius-lg)}.card{padding:var(--space-5);margin-bottom:var(--space-4);border-radius:var(--radius-lg)}.card-actions{gap:var(--space-2);flex-direction:column}.card-actions .btn{width:100%}.api-key-row{gap:var(--space-2);flex-direction:column}.api-key-row .btn{width:100%}.api-key-toggle{align-items:flex-start;gap:var(--space-3);padding:var(--space-3) var(--space-4);flex-direction:column}.api-key-counter{display:block}.api-key-regenerate{align-items:flex-start;gap:var(--space-3);flex-direction:column}.regenerate-confirm{align-items:stretch;width:100%}.regenerate-actions{flex-direction:column}.regenerate-actions .btn{width:100%}.origin-row{gap:var(--space-2);flex-direction:column;align-items:stretch}.origin-row .btn-icon{width:100%;height:44px}.webhook-row-main{gap:var(--space-2);flex-direction:column;align-items:stretch}.webhook-row-main .btn-icon{width:100%;height:44px}.webhook-row-deleted{gap:var(--space-2);flex-direction:column;align-items:flex-start}.webhook-confirm-dialog{padding:var(--space-5)}.webhook-confirm-dialog .regenerate-actions{flex-direction:column}.webhook-confirm-dialog .regenerate-actions .btn{width:100%}.usage-stats-row{gap:var(--space-3);grid-template-columns:1fr}.usage-stat-card{padding:var(--space-4) var(--space-5);flex-direction:row;justify-content:space-between;align-items:center}.usage-stat-value{font-size:var(--text-xl)}.card-header-row{gap:var(--space-3);flex-direction:column}.card-header-row .btn{align-self:flex-start}.page-header-row{gap:var(--space-3);flex-direction:column}.page-header-row .btn{align-self:flex-start}.usage-chart-container{height:280px}.subscription-plans{gap:var(--space-4);grid-template-columns:1fr}.login-card{padding:var(--space-6);border-radius:var(--radius-lg)}.login-title{font-size:var(--text-xl)}.btn{min-height:44px;padding:10px 18px}.login-submit-btn{min-height:48px;font-size:var(--text-base)}.header-logout-btn{min-height:44px}}@media (width<=400px){.app-layout-content{padding:var(--space-4) var(--space-3)}.card{padding:var(--space-4)}.login-card{padding:var(--space-5)}.page-title{font-size:var(--text-lg)}.password-requirements{gap:var(--space-1);flex-direction:column}}.error-boundary-fallback{min-height:100vh;padding:var(--space-6);text-align:center;background:var(--color-bg);color:var(--color-text);flex-direction:column;justify-content:center;align-items:center;display:flex}.error-boundary-title{font-size:var(--text-2xl);margin-bottom:var(--space-3);color:var(--color-error);font-weight:700}.error-boundary-message{font-size:var(--text-base);color:var(--color-text-secondary);margin-bottom:var(--space-5);max-width:480px}.error-boundary-details{margin-bottom:var(--space-5);text-align:left;width:100%;max-width:600px}.error-boundary-details summary{cursor:pointer;color:var(--color-text-secondary);font-size:var(--text-sm);margin-bottom:var(--space-2)}.error-boundary-stack{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3);font-size:var(--text-xs);white-space:pre-wrap;word-break:break-word;color:var(--color-error);overflow-x:auto}.error-boundary-retry{padding:var(--space-2) var(--space-5);background:var(--color-primary);color:#fff;border-radius:var(--radius-md);font-size:var(--text-sm);cursor:pointer;border:none;font-weight:600;transition:background .15s}.error-boundary-retry:hover{background:var(--color-primary-hover)}