:root{--primary-green: #00A86B;--primary-green-dark: #008F5F;--primary-green-light: #4CAF50;--primary-blue: #2196F3;--primary-blue-dark: #1976D2;--primary-blue-light: #64B5F6;--primary-pink: #FF6B6B;--primary-pink-dark: #FF5252;--primary-pink-light: #FF8A8A;--bg-dark: #0A1929;--bg-light: #0F2A40;--bg-card: rgba(18, 34, 64, .95);--border-color: rgba(0, 168, 107, .3);--text-primary: #FFFFFF;--text-secondary: #B0BEC5;--text-tertiary: #6B7A8F;--success: #00A86B;--warning: #FFA500;--error: #FF6B6B;--info: #2196F3;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--shadow-md: 0 4px 6px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .2);--shadow-xl: 0 20px 25px rgba(0, 0, 0, .25);--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 20px;--transition-fast: .2s;--transition-normal: .3s;--transition-slow: .5s}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Inter,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg-dark);color:var(--text-primary);overflow-x:hidden}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-light);border-radius:10px}::-webkit-scrollbar-thumb{background:var(--primary-green);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:var(--primary-green-light)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.portal-container{min-height:100vh;background:radial-gradient(circle at 10% 20%,#00a86b1a,#2196f30d,#ff6b6b0d);animation:fadeIn .5s ease-out}.portal-header{background:var(--bg-card);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--border-color);position:sticky;top:0;z-index:1000;animation:fadeInDown .5s ease-out}.header-content{max-width:1400px;margin:0 auto;padding:16px 32px;display:flex;justify-content:space-between;align-items:center}.logo-section{display:flex;align-items:center;gap:16px}.logo-icon{width:40px;height:40px;background:linear-gradient(135deg,var(--primary-green),var(--primary-blue));border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;color:#fff;box-shadow:var(--shadow-md)}.logo-text{font-size:20px;font-weight:600;background:linear-gradient(135deg,var(--primary-green),var(--primary-blue),var(--primary-pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.version-badge{background:#00a86b33;padding:4px 12px;border-radius:20px;font-size:11px;border:1px solid var(--primary-green);color:var(--primary-green)}.header-links{display:flex;gap:32px}.nav-link{color:var(--text-secondary);text-decoration:none;font-size:14px;font-weight:500;transition:color var(--transition-fast);position:relative}.nav-link:hover{color:var(--primary-green)}.nav-link:after{content:"";position:absolute;bottom:-4px;left:0;width:0;height:2px;background:linear-gradient(90deg,var(--primary-green),var(--primary-blue));transition:width var(--transition-normal)}.nav-link:hover:after{width:100%}.hero-section{text-align:center;padding:80px 20px;background:linear-gradient(135deg,#00a86b26,#2196f31a);margin-bottom:20px}.hero-section h1{font-size:56px;font-weight:700;margin-bottom:16px;background:linear-gradient(135deg,var(--primary-green),var(--primary-blue),var(--primary-pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:fadeInUp .6s ease-out}.hero-section p{font-size:18px;color:var(--text-secondary);margin-bottom:32px;max-width:600px;margin-left:auto;margin-right:auto;animation:fadeInUp .6s ease-out .1s backwards}.hero-buttons{display:flex;gap:16px;justify-content:center;animation:fadeInUp .6s ease-out .2s backwards}.btn-primary,.btn-secondary{padding:12px 32px;border-radius:var(--radius-md);font-size:16px;font-weight:600;cursor:pointer;transition:all var(--transition-normal);border:none}.btn-primary{background:linear-gradient(135deg,var(--primary-green),var(--primary-blue));color:#fff;box-shadow:var(--shadow-sm)}.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.btn-secondary{background:transparent;border:1px solid var(--primary-green);color:var(--primary-green)}.btn-secondary:hover{background:#00a86b1a;transform:translateY(-2px)}.tabs-container{display:flex;justify-content:center;gap:8px;padding:16px 20px;background:var(--bg-card);border-bottom:1px solid var(--border-color);position:sticky;top:72px;z-index:100}.tab{padding:10px 24px;background:transparent;border:none;color:var(--text-secondary);font-size:14px;font-weight:500;cursor:pointer;border-radius:var(--radius-md);transition:all var(--transition-fast)}.tab:hover{background:#00a86b1a;color:var(--primary-green)}.tab.active{background:#00a86b33;color:var(--primary-green);border-bottom:2px solid var(--primary-green)}.content-container{max-width:1200px;margin:40px auto;padding:0 20px;animation:fadeIn .5s ease-out}.overview-content h2{font-size:28px;margin-bottom:16px;background:linear-gradient(135deg,var(--primary-green),var(--primary-blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.overview-content>p{color:var(--text-secondary);line-height:1.6;margin-bottom:40px}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin:48px 0}.feature-card{background:var(--bg-card);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:28px;border-radius:var(--radius-lg);border:1px solid var(--border-color);transition:all var(--transition-normal)}.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--primary-green)}.feature-icon{font-size:40px;margin-bottom:20px}.feature-card h3{font-size:18px;margin-bottom:12px;color:var(--primary-green)}.feature-card p{color:var(--text-secondary);font-size:14px;line-height:1.5}.code-section{background:#0006;border-radius:var(--radius-lg);padding:24px;margin:48px 0;border:1px solid var(--border-color)}.code-section h3{margin-bottom:16px;color:var(--primary-green)}.code-section pre{background:#1e1e1e;padding:20px;border-radius:var(--radius-md);overflow-x:auto;margin-top:16px}.code-section code{font-family:Courier New,Monaco,monospace;font-size:13px;color:#d4d4d4;line-height:1.5}.api-info{background:#00a86b1a;border-radius:var(--radius-lg);padding:20px;margin-top:40px;border:1px solid var(--border-color)}.api-info h3{margin-bottom:12px;font-size:16px}.api-url{display:flex;align-items:center;gap:12px;margin-top:12px}.api-url code{background:#0006;padding:10px 16px;border-radius:var(--radius-md);flex:1;font-family:monospace;font-size:14px}.api-url button{padding:8px 16px;background:var(--primary-green);border:none;border-radius:var(--radius-md);color:#fff;cursor:pointer;font-weight:500;transition:all var(--transition-fast)}.api-url button:hover{background:var(--primary-green-dark)}.endpoints-content h2{font-size:28px;margin-bottom:16px;background:linear-gradient(135deg,var(--primary-green),var(--primary-blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.endpoints-content>p{color:var(--text-secondary);margin-bottom:24px}.endpoints-table{overflow-x:auto;background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border-color)}.endpoints-table table{width:100%;border-collapse:collapse}.endpoints-table th,.endpoints-table td{padding:16px;text-align:left;border-bottom:1px solid var(--border-color)}.endpoints-table th{color:var(--text-secondary);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.5px;background:#0003}.endpoints-table tr:hover{background:#00a86b0d}.method-badge{display:inline-block;padding:4px 10px;border-radius:var(--radius-sm);font-size:11px;font-weight:700;text-transform:uppercase}.method-get{background:var(--primary-blue);color:#fff}.method-post{background:var(--primary-green);color:#fff}.method-put{background:orange;color:#fff}.method-delete{background:var(--primary-pink);color:#fff}.endpoints-table code{font-family:monospace;font-size:13px;color:var(--primary-green-light)}.apikeys-content h2{font-size:28px;margin-bottom:16px;background:linear-gradient(135deg,var(--primary-green),var(--primary-blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.apikeys-content>p{color:var(--text-secondary);margin-bottom:32px}.generated-key{background:#00a86b26;border:1px solid var(--primary-green);border-radius:var(--radius-lg);padding:24px;margin-bottom:32px;animation:fadeIn .3s ease-out}.generated-key h3{margin-bottom:16px;color:var(--primary-green)}.key-display{display:flex;gap:12px;align-items:center;margin:16px 0}.key-display code{background:#1e1e1e;padding:12px 16px;border-radius:var(--radius-md);flex:1;font-family:monospace;font-size:14px;word-break:break-all}.key-display button{padding:8px 20px;background:var(--primary-green);border:none;border-radius:var(--radius-md);color:#fff;cursor:pointer;font-weight:500;transition:all var(--transition-fast)}.key-display button:hover{background:var(--primary-green-dark)}.warning{color:var(--warning);font-size:12px;margin-top:12px}.create-key-form{background:var(--bg-card);border-radius:var(--radius-lg);padding:24px;margin-bottom:32px;border:1px solid var(--border-color)}.create-key-form h3{margin-bottom:20px;color:var(--primary-green)}.form-group{display:flex;gap:12px}.form-group input{flex:1;padding:12px 16px;background:#ffffff1a;border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-size:14px;transition:all var(--transition-fast)}.form-group input:focus{outline:none;border-color:var(--primary-green);box-shadow:0 0 0 2px #00a86b33}.form-group input::placeholder{color:var(--text-tertiary)}.form-group button{padding:12px 24px;background:linear-gradient(135deg,var(--primary-green),var(--primary-blue));border:none;border-radius:var(--radius-md);color:#fff;font-weight:600;cursor:pointer;transition:all var(--transition-fast)}.form-group button:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--shadow-md)}.form-group button:disabled{opacity:.6;cursor:not-allowed}.keys-list{margin-bottom:32px}.keys-list h3{margin-bottom:20px;color:var(--primary-green)}.key-item{background:var(--bg-card);border-radius:var(--radius-md);padding:16px 20px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;border:1px solid var(--border-color);transition:all var(--transition-fast)}.key-item:hover{border-color:var(--primary-green)}.key-info{display:flex;flex-direction:column;gap:6px}.key-info strong{font-size:14px}.key-info code{background:#0006;padding:4px 8px;border-radius:var(--radius-sm);font-family:monospace;font-size:12px;color:var(--text-secondary)}.key-date{font-size:11px;color:var(--text-tertiary)}.key-actions{display:flex;gap:8px}.key-actions button{padding:6px 12px;border:none;border-radius:var(--radius-sm);cursor:pointer;font-size:12px;font-weight:500;transition:all var(--transition-fast)}.key-actions button:first-child{background:var(--primary-blue);color:#fff}.key-actions button:first-child:hover{background:var(--primary-blue-dark)}.key-actions button.danger{background:var(--primary-pink);color:#fff}.key-actions button.danger:hover{background:var(--primary-pink-dark)}.permissions-info{background:var(--bg-card);border-radius:var(--radius-lg);padding:24px;border:1px solid var(--border-color)}.permissions-info h3{margin-bottom:16px;color:var(--primary-green)}.permissions-info ul{list-style:none}.permissions-info li{padding:8px 0;color:var(--text-secondary);font-size:13px;display:flex;align-items:center;gap:8px}.permissions-info li code{background:#0006;padding:2px 6px;border-radius:var(--radius-sm);font-family:monospace;font-size:11px;color:var(--primary-green)}.webhooks-content h2{font-size:28px;margin-bottom:16px;background:linear-gradient(135deg,var(--primary-green),var(--primary-blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.webhooks-content>p{color:var(--text-secondary);margin-bottom:32px}.webhook-form{background:var(--bg-card);border-radius:var(--radius-lg);padding:24px;margin-bottom:40px;border:1px solid var(--border-color)}.webhook-form h3{margin-bottom:20px;color:var(--primary-green)}.webhook-form .form-group{display:flex;gap:12px;flex-wrap:wrap}.webhook-form input,.webhook-form select{flex:1;min-width:200px;padding:12px 16px;background:#ffffff1a;border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-size:14px}.webhook-form input:focus,.webhook-form select:focus{outline:none;border-color:var(--primary-green)}.webhook-form button{padding:12px 24px;background:linear-gradient(135deg,var(--primary-green),var(--primary-blue));border:none;border-radius:var(--radius-md);color:#fff;font-weight:600;cursor:pointer;transition:all var(--transition-fast)}.webhook-form button:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--shadow-md)}.webhook-events h3{margin-bottom:20px;color:var(--primary-green)}.events-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}.event-item{background:var(--bg-card);border-radius:var(--radius-md);padding:16px;border:1px solid var(--border-color);transition:all var(--transition-fast)}.event-item:hover{border-color:var(--primary-green)}.event-item code{display:block;margin-bottom:8px;font-family:monospace;font-size:13px;color:var(--primary-green)}.event-item span{font-size:12px;color:var(--text-secondary)}.no-keys{text-align:center;padding:60px;color:var(--text-tertiary);background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border-color)}.portal-footer{background:var(--bg-card);border-top:1px solid var(--border-color);margin-top:60px;padding:40px 20px}.footer-content{max-width:1200px;margin:0 auto;text-align:center}.footer-content p{color:var(--text-secondary);font-size:12px;margin-bottom:16px}.footer-links{display:flex;justify-content:center;gap:24px;flex-wrap:wrap}.footer-links a{color:var(--text-secondary);text-decoration:none;font-size:12px;transition:color var(--transition-fast)}.footer-links a:hover{color:var(--primary-green)}.loading-spinner{width:40px;height:40px;border:3px solid rgba(0,168,107,.2);border-top-color:var(--primary-green);border-right-color:var(--primary-blue);border-bottom-color:var(--primary-pink);border-radius:50%;animation:spin .8s linear infinite}@media (max-width: 768px){.header-content{flex-direction:column;gap:16px;padding:16px}.header-links{gap:20px}.hero-section h1{font-size:32px}.hero-section p{font-size:16px}.hero-buttons{flex-direction:column;align-items:center}.tabs-container{flex-wrap:wrap;top:120px}.tab{padding:8px 16px;font-size:12px}.features-grid{grid-template-columns:1fr}.form-group{flex-direction:column}.key-item{flex-direction:column;gap:12px;align-items:flex-start}.key-actions{width:100%;justify-content:flex-end}.endpoints-table th,.endpoints-table td{padding:12px 8px;font-size:12px}.events-grid{grid-template-columns:1fr}}@media (max-width: 480px){.header-links{flex-wrap:wrap;justify-content:center}.hero-section{padding:40px 16px}.hero-section h1{font-size:28px}.content-container{padding:0 16px}.endpoints-table{font-size:11px}.endpoints-table th,.endpoints-table td{padding:8px 4px}}button.nav-link{background:none;border:none;cursor:pointer;font:inherit}.App{min-height:100vh}:root{--primary-green: #00A86B;--primary-blue: #2196F3;--primary-pink: #FF6B6B;--bg-dark: #0A1929;--bg-light: #0F2A40;--text-primary: #FFFFFF;--text-secondary: #B0BEC5}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg-dark);color:var(--text-primary)}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}