webscout 8.3__py3-none-any.whl → 8.3.2__py3-none-any.whl

webscout/auth/templates/static/styles.css

@@ -0,0 +1,3353 @@
+/* ===== CSS VARIABLES ===== */
+:root {
+    /* Professional Color Palette */
+    --primary-color: #2563eb;
+    --primary-dark: #1d4ed8;
+    --primary-light: #3b82f6;
+    --primary-ultra-light: #dbeafe;
+    --secondary-color: #059669;
+    --secondary-dark: #047857;
+    --secondary-light: #10b981;
+    --accent-color: #dc2626;
+    --accent-dark: #b91c1c;
+    --accent-light: #ef4444;
+
+    /* Premium Background Colors */
+    --background-color: #0a0f1c;
+    --background-secondary: #0f172a;
+    --background-tertiary: #1a202c;
+    --surface-color: #1e293b;
+    --surface-light: #334155;
+    --surface-lighter: #475569;
+    --surface-glass: rgba(30, 41, 59, 0.85);
+    --surface-glass-light: rgba(51, 65, 85, 0.7);
+    --surface-glass-ultra: rgba(255, 255, 255, 0.05);
+    --surface-premium: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(51, 65, 85, 0.8) 100%);
+
+    /* Modern Text Colors */
+    --text-primary: #f8fafc;
+    --text-secondary: #cbd5e1;
+    --text-muted: #64748b;
+    --text-inverse: #0f172a;
+    --text-accent: #a78bfa;
+    --text-success: #34d399;
+    --text-warning: #fbbf24;
+    --text-error: #f87171;
+
+    /* Enhanced Border Colors */
+    --border-color: #334155;
+    --border-light: #475569;
+    --border-glass: rgba(255, 255, 255, 0.1);
+    --border-glow: rgba(99, 102, 241, 0.3);
+
+    /* Status Colors */
+    --success-color: #10b981;
+    --warning-color: #f59e0b;
+    --error-color: #ef4444;
+    --info-color: #3b82f6;
+
+    /* Simple Professional Gradients */
+    --gradient-primary: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
+    --gradient-secondary: linear-gradient(135deg, #059669 0%, #047857 100%);
+    --gradient-surface: linear-gradient(135deg, #1e293b 0%, #334155 100%);
+    --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
+
+    /* Simple Professional Shadows */
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
+    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+
+    /* Backdrop Filters */
+    --backdrop-blur: blur(16px);
+    --backdrop-blur-sm: blur(8px);
+    --backdrop-blur-lg: blur(24px);
+    
+    /* Spacing */
+    --spacing-xs: 0.25rem;
+    --spacing-sm: 0.5rem;
+    --spacing-md: 1rem;
+    --spacing-lg: 1.5rem;
+    --spacing-xl: 2rem;
+    --spacing-2xl: 3rem;
+    
+    /* Border Radius */
+    --radius-sm: 0.25rem;
+    --radius: 0.5rem;
+    --radius-md: 0.75rem;
+    --radius-lg: 1rem;
+    --radius-xl: 1.5rem;
+    --radius-full: 9999px;
+    
+    /* Typography */
+    --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    --font-family-mono: 'JetBrains Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    
+    /* Font Sizes */
+    --text-xs: 0.75rem;
+    --text-sm: 0.875rem;
+    --text-base: 1rem;
+    --text-lg: 1.125rem;
+    --text-xl: 1.25rem;
+    --text-2xl: 1.5rem;
+    --text-3xl: 1.875rem;
+    --text-4xl: 2.25rem;
+    --text-5xl: 3rem;
+    
+    /* Font Weights */
+    --font-light: 300;
+    --font-normal: 400;
+    --font-medium: 500;
+    --font-semibold: 600;
+    --font-bold: 700;
+    --font-extrabold: 800;
+    
+    /* Line Heights */
+    --leading-tight: 1.25;
+    --leading-normal: 1.5;
+    --leading-relaxed: 1.625;
+    --leading-loose: 2;
+    
+    /* Enhanced Transitions & Animations */
+    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-bounce: 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
+    --transition-elastic: 800ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
+
+    /* Modern Easing Functions */
+    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
+    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
+    --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
+    
+    /* Z-Index */
+    --z-dropdown: 1000;
+    --z-sticky: 1020;
+    --z-fixed: 1030;
+    --z-modal-backdrop: 1040;
+    --z-modal: 1050;
+    --z-popover: 1060;
+    --z-tooltip: 1070;
+    --z-toast: 1080;
+}
+
+/* ===== RESET & BASE STYLES ===== */
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+html {
+    scroll-behavior: smooth;
+    font-size: 16px;
+}
+
+body {
+    font-family: var(--font-family-sans);
+    font-size: var(--text-base);
+    font-weight: var(--font-normal);
+    line-height: var(--leading-normal);
+    color: var(--text-primary);
+    background: var(--background-color);
+    background-image:
+        radial-gradient(circle at 20% 80%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
+        radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
+        radial-gradient(circle at 40% 40%, rgba(16, 185, 129, 0.05) 0%, transparent 50%);
+    min-height: 100vh;
+    overflow-x: hidden;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    position: relative;
+}
+
+/* ===== MODERN LOADING SCREEN ===== */
+.loading-screen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--background-color);
+    background-image:
+        radial-gradient(circle at 20% 80%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
+        radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.15) 0%, transparent 50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: var(--z-modal);
+    transition: opacity var(--transition-slow), visibility var(--transition-slow);
+    backdrop-filter: var(--backdrop-blur);
+}
+
+.loading-screen.hidden {
+    opacity: 0;
+    visibility: hidden;
+}
+
+.loading-content {
+    text-align: center;
+    max-width: 400px;
+    padding: var(--spacing-xl);
+
+}
+
+.loading-spinner {
+    width: 80px;
+    height: 80px;
+    border: 4px solid transparent;
+    border-top: 4px solid var(--primary-color);
+    border-right: 4px solid var(--secondary-color);
+    border-radius: var(--radius-full);
+    animation: spin 1s linear infinite;
+    margin: 0 auto var(--spacing-lg);
+    position: relative;
+    box-shadow: var(--shadow-glow);
+}
+
+.loading-spinner::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 60%;
+    height: 60%;
+    border: 2px solid transparent;
+    border-bottom: 2px solid var(--accent-color);
+    border-radius: var(--radius-full);
+    transform: translate(-50%, -50%);
+    animation: modernSpin 1s linear infinite reverse;
+}
+
+@keyframes modernSpin {
+    0% {
+        transform: rotate(0deg) scale(1);
+        filter: hue-rotate(0deg);
+    }
+    50% {
+        transform: rotate(180deg) scale(1.1);
+        filter: hue-rotate(180deg);
+    }
+    100% {
+        transform: rotate(360deg) scale(1);
+        filter: hue-rotate(360deg);
+    }
+}
+
+.loading-content h2 {
+    font-size: var(--text-2xl);
+    font-weight: var(--font-bold);
+    color: var(--text-primary);
+    margin-bottom: var(--spacing-sm);
+}
+
+.loading-content p {
+    color: var(--text-secondary);
+    font-size: var(--text-base);
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* ===== APP LAYOUT ===== */
+.app {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.main-content {
+    flex: 1;
+    padding-top: var(--spacing-xl);
+    padding-bottom: var(--spacing-2xl);
+}
+
+.container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 0 var(--spacing-lg);
+}
+
+@media (max-width: 768px) {
+    .container {
+        padding: 0 var(--spacing-md);
+    }
+}
+
+/* ===== UTILITY CLASSES ===== */
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
+.text-center { text-align: center; }
+.text-left { text-align: left; }
+.text-right { text-align: right; }
+
+.font-mono { font-family: var(--font-family-mono); }
+.font-sans { font-family: var(--font-family-sans); }
+
+.truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.transition {
+    transition: all var(--transition-normal);
+}
+
+/* ===== MODERN ANIMATIONS ===== */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(20px) scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+@keyframes slideDown {
+    from {
+        opacity: 0;
+        max-height: 0;
+        transform: translateY(-20px);
+    }
+    to {
+        opacity: 1;
+        max-height: 1000px;
+        transform: translateY(0);
+    }
+}
+
+@keyframes slideUp {
+    from {
+        opacity: 1;
+        max-height: 1000px;
+        transform: translateY(0);
+    }
+    to {
+        opacity: 0;
+        max-height: 0;
+        transform: translateY(-20px);
+    }
+}
+
+@keyframes pulse {
+    0%, 100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+    50% {
+        opacity: 0.8;
+        transform: scale(1.05);
+    }
+}
+
+@keyframes bounce {
+    0%, 20%, 53%, 80%, 100% {
+        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+        transform: translate3d(0, 0, 0);
+    }
+    40%, 43% {
+        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+        transform: translate3d(0, -30px, 0);
+    }
+    70% {
+        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+        transform: translate3d(0, -15px, 0);
+    }
+    90% {
+        transform: translate3d(0, -4px, 0);
+    }
+}
+
+@keyframes morphing {
+    0%, 100% {
+        border-radius: var(--radius-lg);
+        transform: rotate(0deg);
+    }
+    25% {
+        border-radius: var(--radius-xl);
+        transform: rotate(1deg);
+    }
+    50% {
+        border-radius: var(--radius-lg);
+        transform: rotate(0deg);
+    }
+    75% {
+        border-radius: var(--radius-xl);
+        transform: rotate(-1deg);
+    }
+}
+
+@keyframes gradientShift {
+    0% {
+        background-position: 0% 50%;
+    }
+    50% {
+        background-position: 100% 50%;
+    }
+    100% {
+        background-position: 0% 50%;
+    }
+}
+
+@keyframes slideInFromLeft {
+    from {
+        opacity: 0;
+        transform: translateX(-50px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+@keyframes slideInFromRight {
+    from {
+        opacity: 0;
+        transform: translateX(50px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+@keyframes slideOutRight {
+    from {
+        opacity: 1;
+        transform: translateX(0);
+    }
+    to {
+        opacity: 0;
+        transform: translateX(50px);
+    }
+}
+
+@keyframes scaleIn {
+    from {
+        opacity: 0;
+        transform: scale(0.8);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+.animate-fadeIn {
+    animation: fadeIn var(--transition-normal) var(--ease-out-expo);
+}
+
+.animate-slideDown {
+    animation: slideDown var(--transition-normal) var(--ease-out-expo);
+}
+
+.animate-pulse {
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+.animate-bounce {
+    animation: bounce 1s infinite;
+}
+
+.animate-morphing {
+    animation: morphing 6s ease-in-out infinite;
+}
+
+.animate-gradient {
+    background-size: 200% 200%;
+    animation: gradientShift 3s ease infinite;
+}
+
+.animate-slideInLeft {
+    animation: slideInFromLeft var(--transition-normal) var(--ease-out-expo);
+}
+
+.animate-slideInRight {
+    animation: slideInFromRight var(--transition-normal) var(--ease-out-expo);
+}
+
+.animate-slideOutRight {
+    animation: slideOutRight var(--transition-normal) var(--ease-out-expo);
+}
+
+.animate-scaleIn {
+    animation: scaleIn var(--transition-normal) var(--ease-out-back);
+}
+
+/* Modern Utility Classes */
+.glass-effect {
+    background: var(--surface-glass);
+    backdrop-filter: var(--backdrop-blur);
+    border: 1px solid var(--border-glass);
+}
+
+.glow-effect {
+    box-shadow: var(--shadow-glow);
+}
+
+.hover-lift {
+    transition: transform var(--transition-bounce);
+}
+
+.hover-lift:hover {
+    transform: translateY(-4px) scale(1.02);
+}
+
+.gradient-text {
+    background: var(--gradient-primary);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.text-glow {
+    text-shadow: 0 0 20px rgba(99, 102, 241, 0.5);
+}
+
+/* ===== MODERN SCROLL INDICATOR ===== */
+.scroll-indicator {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 4px;
+    background: var(--surface-color);
+    z-index: var(--z-fixed);
+}
+
+.scroll-progress {
+    height: 100%;
+    background: var(--gradient-primary);
+    width: 0%;
+    transition: width 0.1s ease;
+    box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
+}
+
+/* ===== MODERN SCROLLBAR ===== */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--surface-color);
+    border-radius: var(--radius-sm);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--gradient-primary);
+    border-radius: var(--radius-sm);
+    transition: all var(--transition-normal);
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--gradient-secondary);
+    box-shadow: var(--shadow-glow);
+}
+
+/* Firefox scrollbar */
+* {
+    scrollbar-width: thin;
+    scrollbar-color: var(--primary-color) var(--surface-color);
+}
+
+/* ===== MODERN ICON SYSTEM ===== */
+.icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transition: all var(--transition-normal);
+}
+
+.icon svg {
+    width: 100%;
+    height: 100%;
+    stroke-width: 2;
+}
+
+.icon.emoji-replacement {
+    filter: drop-shadow(0 0 4px rgba(99, 102, 241, 0.3));
+}
+
+.nav-tab-icon .icon,
+.stat-icon .icon {
+    width: 20px;
+    height: 20px;
+}
+
+.header-icon .icon {
+    width: 32px;
+    height: 32px;
+    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
+}
+
+.footer-icon .icon {
+    width: 24px;
+    height: 24px;
+}
+
+/* Icon hover effects */
+.icon:hover {
+    transform: scale(1.1);
+    filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.5));
+}
+
+/* Status indicator with modern styling */
+.status-indicator {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: var(--success-color);
+    box-shadow: 0 0 10px var(--success-color);
+    animation: pulse 2s infinite;
+    position: relative;
+}
+
+.status-indicator::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background: var(--success-color);
+    animation: ping 2s infinite;
+}
+
+@keyframes ping {
+    0% {
+        transform: scale(1);
+        opacity: 1;
+    }
+    75%, 100% {
+        transform: scale(2);
+        opacity: 0;
+    }
+}
+
+/* ===== HEADER STYLES ===== */
+.header {
+    background: var(--gradient-cosmic);
+    padding: var(--spacing-2xl) 0;
+    position: relative;
+    overflow: hidden;
+    border-bottom: 1px solid var(--border-glass);
+    backdrop-filter: var(--backdrop-blur);
+    box-shadow: var(--shadow-glass);
+}
+
+.header::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background:
+        radial-gradient(circle at 25% 25%, rgba(255,255,255,0.1) 0%, transparent 50%),
+        radial-gradient(circle at 75% 75%, rgba(255,255,255,0.08) 0%, transparent 50%),
+        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="40" r="0.8" fill="rgba(255,255,255,0.08)"/><circle cx="40" cy="80" r="0.6" fill="rgba(255,255,255,0.06)"/><circle cx="60" cy="10" r="0.4" fill="rgba(255,255,255,0.04)"/></svg>');
+    animation: float 30s infinite linear;
+    opacity: 0.8;
+}
+
+.header::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.02) 50%, transparent 70%);
+    animation: shimmer 3s infinite;
+}
+
+@keyframes float {
+    0% { transform: translateY(0px) rotate(0deg); }
+    33% { transform: translateY(-30px) rotate(120deg); }
+    66% { transform: translateY(-60px) rotate(240deg); }
+    100% { transform: translateY(-100px) rotate(360deg); }
+}
+
+@keyframes shimmer {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(100%); }
+}
+
+@keyframes glow {
+    0%, 100% { box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); }
+    50% { box-shadow: 0 0 40px rgba(99, 102, 241, 0.6); }
+}
+
+.header-content {
+    position: relative;
+    z-index: 3;
+    text-align: center;
+}
+
+.header-title {
+    font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
+    font-weight: var(--font-extrabold);
+    margin-bottom: var(--spacing-sm);
+    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 25%, #e2e8f0 50%, #cbd5e1 75%, #ffffff 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    line-height: var(--leading-tight);
+    text-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
+    animation: titleGlow 4s ease-in-out infinite alternate;
+}
+
+@keyframes titleGlow {
+    0% { filter: brightness(1) drop-shadow(0 0 10px rgba(255,255,255,0.3)); }
+    100% { filter: brightness(1.1) drop-shadow(0 0 20px rgba(255,255,255,0.5)); }
+}
+
+.header-description {
+    font-size: var(--text-lg);
+    color: rgba(255, 255, 255, 0.9);
+    margin-bottom: var(--spacing-xl);
+    max-width: 600px;
+    margin-left: auto;
+    margin-right: auto;
+    line-height: var(--leading-relaxed);
+}
+
+.header-status {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    background: var(--surface-glass);
+    backdrop-filter: var(--backdrop-blur);
+    border: 1px solid var(--border-glass);
+    border-radius: var(--radius-full);
+    padding: var(--spacing-sm) var(--spacing-lg);
+    margin-bottom: var(--spacing-xl);
+    font-size: var(--text-sm);
+    font-weight: var(--font-medium);
+    box-shadow: var(--shadow-glass);
+    transition: all var(--transition-normal);
+    position: relative;
+    overflow: hidden;
+}
+
+.header-status::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
+    transition: left 0.6s;
+}
+
+.header-status:hover::before {
+    left: 100%;
+}
+
+.header-status:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-glow);
+    border-color: rgba(255, 255, 255, 0.3);
+}
+
+.status-indicator {
+    font-size: var(--text-lg);
+    animation: pulse 2s infinite;
+}
+
+/* ===== STATS GRID ===== */
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: var(--spacing-lg);
+    margin-top: var(--spacing-xl);
+    max-width: 800px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.stat-card {
+    background: var(--surface-glass);
+    backdrop-filter: var(--backdrop-blur);
+    border: 1px solid var(--border-glass);
+    border-radius: var(--radius-lg);
+    padding: var(--spacing-xl);
+    text-align: center;
+    transition: all var(--transition-bounce);
+    position: relative;
+    overflow: hidden;
+    box-shadow: var(--shadow-glass);
+}
+
+.stat-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
+    transition: left 0.6s var(--ease-out-expo);
+}
+
+.stat-card::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--gradient-glass);
+    opacity: 0;
+    transition: opacity var(--transition-normal);
+}
+
+.stat-card:hover {
+    transform: translateY(-6px) scale(1.02);
+    box-shadow: var(--shadow-glow-lg);
+    border-color: rgba(255, 255, 255, 0.4);
+}
+
+.stat-card:hover::before {
+    left: 100%;
+}
+
+.stat-card:hover::after {
+    opacity: 1;
+}
+
+.stat-value {
+    font-size: var(--text-3xl);
+    font-weight: var(--font-bold);
+    color: #ffffff;
+    display: block;
+    margin-bottom: var(--spacing-xs);
+}
+
+.stat-label {
+    font-size: var(--text-sm);
+    color: rgba(255, 255, 255, 0.8);
+    font-weight: var(--font-medium);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.stat-icon {
+    font-size: var(--text-2xl);
+    margin-bottom: var(--spacing-sm);
+    opacity: 0.8;
+}
+
+@media (max-width: 768px) {
+    .stats-grid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: var(--spacing-md);
+    }
+
+    .stat-card {
+        padding: var(--spacing-lg);
+    }
+
+    .stat-value {
+        font-size: var(--text-2xl);
+    }
+}
+
+/* ===== NAVIGATION STYLES ===== */
+.nav-tabs {
+    display: flex;
+    background: var(--surface-glass);
+    backdrop-filter: var(--backdrop-blur);
+    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+    overflow: hidden;
+    margin-bottom: 0;
+    border: 1px solid var(--border-glass);
+    border-bottom: none;
+    box-shadow: var(--shadow-glass);
+    position: relative;
+}
+
+.nav-tabs::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: var(--gradient-primary);
+    opacity: 0.6;
+}
+
+.nav-tab {
+    background: none;
+    border: none;
+    padding: var(--spacing-lg) var(--spacing-xl);
+    color: var(--text-secondary);
+    cursor: pointer;
+    font-size: var(--text-base);
+    font-weight: var(--font-semibold);
+    font-family: var(--font-family-sans);
+    transition: all var(--transition-bounce);
+    position: relative;
+    flex: 1;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-sm);
+    min-height: 60px;
+    overflow: hidden;
+}
+
+.nav-tab::before {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: var(--gradient-primary);
+    transform: scaleX(0);
+    transition: transform var(--transition-elastic);
+    border-radius: 2px 2px 0 0;
+}
+
+.nav-tab::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--gradient-glass);
+    opacity: 0;
+    transition: opacity var(--transition-normal);
+}
+
+.nav-tab:hover {
+    background: var(--surface-glass-light);
+    color: var(--text-primary);
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+}
+
+.nav-tab:hover::after {
+    opacity: 0.5;
+}
+
+.nav-tab.active {
+    background: var(--gradient-primary);
+    color: white;
+    box-shadow: var(--shadow-glow);
+    transform: translateY(-1px);
+}
+
+.nav-tab.active::before {
+    transform: scaleX(1);
+}
+
+.nav-tab.active::after {
+    opacity: 0.3;
+}
+
+.nav-tab-icon {
+    font-size: var(--text-lg);
+}
+
+@media (max-width: 768px) {
+    .nav-tabs {
+        flex-wrap: wrap;
+    }
+
+    .nav-tab {
+        flex: 1 1 50%;
+        padding: var(--spacing-md) var(--spacing-lg);
+        font-size: var(--text-sm);
+    }
+
+    .nav-tab-text {
+        display: none;
+    }
+}
+
+/* ===== MODERN TAB CONTENT STYLES ===== */
+.tab-container {
+    background: var(--surface-glass);
+    backdrop-filter: var(--backdrop-blur);
+    border: 1px solid var(--border-glass);
+    border-top: none;
+    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
+    min-height: 600px;
+    position: relative;
+    overflow: hidden;
+}
+
+.tab-container::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--gradient-glass);
+    opacity: 0.1;
+    pointer-events: none;
+}
+
+.tab-content {
+    display: none;
+    padding: var(--spacing-2xl);
+    animation: fadeIn var(--transition-normal) var(--ease-out-expo);
+    position: relative;
+    z-index: 2;
+}
+
+.tab-content.active {
+    display: block;
+}
+
+/* ===== PREMIUM SECTION STYLES ===== */
+.endpoint-section {
+    margin-bottom: var(--spacing-2xl);
+    padding: var(--spacing-2xl);
+    background: var(--surface-premium);
+    backdrop-filter: var(--backdrop-blur-lg);
+    border-radius: var(--radius-xl);
+    border: 1px solid transparent;
+    border-image: var(--gradient-border) 1;
+    position: relative;
+    overflow: hidden;
+    box-shadow: var(--shadow-premium);
+    animation: fadeIn 0.8s var(--ease-out-expo);
+}
+
+.endpoint-section::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: var(--gradient-premium);
+    opacity: 1;
+    z-index: 2;
+}
+
+.endpoint-section::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--gradient-glass);
+    opacity: 0.1;
+    pointer-events: none;
+    border-radius: var(--radius-xl);
+}
+
+.section-title {
+    font-size: var(--text-2xl);
+    font-weight: var(--font-bold);
+    color: var(--text-primary);
+    margin-bottom: var(--spacing-lg);
+    padding-bottom: var(--spacing-sm);
+    border-bottom: 2px solid var(--primary-color);
+}
+
+.section-title::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 60%;
+    height: 2px;
+    background: var(--gradient-secondary);
+    border-radius: var(--radius-sm);
+    animation: gradientShift 3s ease infinite;
+}
+
+.section-description {
+    color: var(--text-secondary);
+    font-size: var(--text-base);
+    line-height: var(--leading-relaxed);
+    margin-bottom: var(--spacing-lg);
+    max-width: 800px;
+}
+
+/* ===== SIMPLE SECTION ELEMENTS ===== */
+.endpoint-section {
+    margin-bottom: var(--spacing-2xl);
+}
+
+/* ===== SIMPLE ENDPOINT CARD STYLES ===== */
+.endpoint-card {
+    background: var(--surface-color);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-lg);
+    margin-bottom: var(--spacing-lg);
+    overflow: hidden;
+    transition: box-shadow var(--transition-normal);
+    box-shadow: var(--shadow);
+}
+
+.endpoint-card:hover {
+    box-shadow: var(--shadow-md);
+}
+
+.endpoint-header {
+    padding: var(--spacing-xl) var(--spacing-2xl);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: var(--surface-glass);
+    backdrop-filter: var(--backdrop-blur);
+    border: 1px solid var(--border-glass);
+    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
+    transition: all var(--transition-bounce);
+    position: relative;
+    overflow: hidden;
+}
+
+.endpoint-header::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.1), transparent);
+    transition: left 0.6s var(--ease-out-expo);
+}
+
+.endpoint-header::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: var(--gradient-primary);
+    transform: scaleX(0);
+    transition: transform var(--transition-elastic);
+}
+
+.endpoint-header:hover {
+    background: var(--surface-glass-light);
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-lg);
+}
+
+.endpoint-header:hover::before {
+    left: 100%;
+}
+
+.endpoint-header:hover::after {
+    transform: scaleX(1);
+}
+
+.endpoint-header.expanded {
+    background: var(--gradient-primary);
+    color: white;
+    box-shadow: var(--shadow-glow-lg);
+    border-color: var(--primary-color);
+}
+
+.endpoint-header.expanded::after {
+    transform: scaleX(1);
+    background: rgba(255, 255, 255, 0.3);
+}
+
+.endpoint-header.expanded .method-badge {
+    background: rgba(255, 255, 255, 0.2);
+    color: white;
+    border-color: rgba(255, 255, 255, 0.3);
+}
+
+.endpoint-header.expanded .endpoint-path {
+    color: rgba(255, 255, 255, 0.9);
+    font-weight: var(--font-bold);
+}
+
+.endpoint-header.expanded .endpoint-summary {
+    color: rgba(255, 255, 255, 0.8);
+}
+
+.endpoint-method {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-lg);
+    font-weight: var(--font-semibold);
+    flex: 1;
+}
+
+.method-badge {
+    padding: var(--spacing-sm) var(--spacing-md);
+    border-radius: var(--radius);
+    font-size: var(--text-xs);
+    font-weight: var(--font-bold);
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    min-width: 60px;
+    text-align: center;
+    color: white;
+}
+
+.method-get {
+    background: var(--secondary-color);
+}
+
+.method-post {
+    background: var(--primary-color);
+}
+
+.method-put {
+    background: #8b5cf6;
+}
+
+.method-delete {
+    background: var(--accent-color);
+}
+
+.endpoint-path {
+    font-family: var(--font-family-mono);
+    font-size: var(--text-lg);
+    color: var(--text-primary);
+    font-weight: var(--font-medium);
+    flex: 2;
+}
+
+.endpoint-summary {
+    color: var(--text-secondary);
+    font-size: var(--text-sm);
+    margin-left: var(--spacing-md);
+    flex: 1;
+    text-align: right;
+}
+
+.expand-icon {
+    transition: transform var(--transition-bounce);
+    color: var(--text-secondary);
+    margin-left: var(--spacing-md);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border-radius: var(--radius-full);
+    background: var(--surface-glass);
+    backdrop-filter: var(--backdrop-blur-sm);
+    border: 1px solid var(--border-glass);
+}
+
+.expand-icon svg {
+    width: 20px;
+    height: 20px;
+    transition: transform var(--transition-bounce);
+}
+
+.endpoint-header.expanded .expand-icon {
+    background: var(--gradient-primary);
+    color: white;
+    box-shadow: var(--shadow-glow);
+}
+
+.endpoint-header.expanded .expand-icon svg {
+    transform: rotate(180deg);
+}
+
+.expand-icon:hover {
+    background: var(--surface-glass-light);
+    transform: scale(1.1);
+}
+
+/* ===== MODERN ENDPOINT BODY STYLES ===== */
+.endpoint-body {
+    display: none;
+    padding: var(--spacing-2xl);
+    background: var(--surface-glass);
+    backdrop-filter: var(--backdrop-blur);
+    border: 1px solid var(--border-glass);
+    border-top: none;
+    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
+    position: relative;
+    overflow: hidden;
+}
+
+.endpoint-body::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--gradient-glass);
+    opacity: 0.05;
+    pointer-events: none;
+}
+
+.endpoint-body.expanded {
+    display: block;
+    animation: slideDown var(--transition-normal) var(--ease-out-expo);
+}
+
+.endpoint-description {
+    color: var(--text-secondary);
+    margin-bottom: var(--spacing-xl);
+    font-size: var(--text-base);
+    line-height: var(--leading-relaxed);
+    padding: var(--spacing-lg);
+    background: var(--surface-light);
+    border-radius: var(--radius);
+    border-left: 4px solid var(--primary-color);
+}
+
+@media (max-width: 768px) {
+    .endpoint-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--spacing-md);
+    }
+
+    .endpoint-method {
+        width: 100%;
+        justify-content: space-between;
+    }
+
+    .endpoint-summary {
+        text-align: left;
+        margin-left: 0;
+    }
+
+    .expand-icon {
+        margin-left: 0;
+    }
+}
+
+/* ===== PARAMETER STYLES ===== */
+.parameter-section, .response-section {
+    margin-bottom: var(--spacing-xl);
+}
+
+.parameter-section h4, .response-section h4 {
+    color: var(--text-primary);
+    font-weight: var(--font-semibold);
+    margin-bottom: var(--spacing-lg);
+    font-size: var(--text-lg);
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+}
+
+.parameter-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-md);
+}
+
+.parameter-item {
+    background: var(--surface-light);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius);
+    padding: var(--spacing-lg);
+    transition: all var(--transition-normal);
+    position: relative;
+}
+
+.parameter-item:hover {
+    border-color: var(--primary-color);
+    background: rgba(99, 102, 241, 0.05);
+    transform: translateX(4px);
+}
+
+.parameter-header {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-md);
+    margin-bottom: var(--spacing-sm);
+    flex-wrap: wrap;
+}
+
+.parameter-name {
+    font-weight: var(--font-semibold);
+    color: var(--text-primary);
+    font-family: var(--font-family-mono);
+    font-size: var(--text-base);
+    background: var(--background-color);
+    padding: var(--spacing-xs) var(--spacing-sm);
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--border-color);
+}
+
+.parameter-type {
+    color: var(--secondary-color);
+    font-size: var(--text-sm);
+    font-weight: var(--font-medium);
+    background: rgba(16, 185, 129, 0.1);
+    padding: var(--spacing-xs) var(--spacing-sm);
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--secondary-color);
+}
+
+.parameter-required {
+    background: var(--error-color);
+    color: white;
+    padding: var(--spacing-xs) var(--spacing-sm);
+    border-radius: var(--radius-sm);
+    font-size: var(--text-xs);
+    font-weight: var(--font-bold);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.parameter-optional {
+    background: var(--warning-color);
+    color: white;
+    padding: var(--spacing-xs) var(--spacing-sm);
+    border-radius: var(--radius-sm);
+    font-size: var(--text-xs);
+    font-weight: var(--font-bold);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.parameter-description {
+    color: var(--text-secondary);
+    font-size: var(--text-sm);
+    line-height: var(--leading-relaxed);
+    margin-top: var(--spacing-sm);
+}
+
+/* ===== SIMPLE TRY IT SECTION STYLES ===== */
+.try-it-section {
+    background: var(--surface-light);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-lg);
+    padding: var(--spacing-xl);
+    margin-top: var(--spacing-lg);
+    box-shadow: var(--shadow);
+}
+
+.try-it-title {
+    color: var(--text-primary);
+    font-weight: var(--font-bold);
+    margin-bottom: var(--spacing-lg);
+    font-size: var(--text-lg);
+}
+
+/* ===== FORM STYLES ===== */
+.form-group {
+    margin-bottom: var(--spacing-lg);
+}
+
+.form-row {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: var(--spacing-lg);
+    margin-bottom: var(--spacing-lg);
+}
+
+.form-label {
+    display: block;
+    color: var(--text-primary);
+    font-weight: var(--font-medium);
+    margin-bottom: var(--spacing-sm);
+    font-size: var(--text-sm);
+}
+
+.form-input, .form-textarea, .form-select {
+    width: 100%;
+    background: var(--surface-glass-ultra);
+    backdrop-filter: var(--backdrop-blur-sm);
+    border: 2px solid var(--border-glass);
+    border-radius: var(--radius-lg);
+    padding: var(--spacing-md) var(--spacing-lg);
+    color: var(--text-primary);
+    font-family: var(--font-family-mono);
+    font-size: var(--text-sm);
+    transition: all var(--transition-bounce);
+    line-height: var(--leading-normal);
+    box-shadow: var(--shadow-inner);
+    position: relative;
+}
+
+.form-textarea {
+    min-height: 120px;
+    resize: vertical;
+    font-family: var(--font-family-mono);
+}
+
+.form-input:focus, .form-textarea:focus, .form-select:focus {
+    outline: none;
+    border-color: var(--primary-glow);
+    box-shadow: var(--shadow-glow);
+    background: var(--surface-glass-light);
+    transform: translateY(-3px) scale(1.01);
+}
+
+.form-input:hover, .form-textarea:hover, .form-select:hover {
+    border-color: var(--border-light);
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+}
+
+.form-checkbox {
+    width: auto;
+    margin-right: var(--spacing-sm);
+    accent-color: var(--primary-color);
+}
+
+/* ===== SIMPLE FORM STYLES ===== */
+.form-input, .form-textarea, .form-select {
+    width: 100%;
+    background: var(--surface-color);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius);
+    padding: var(--spacing-md);
+    color: var(--text-primary);
+    font-family: var(--font-family-sans);
+    font-size: var(--text-sm);
+    transition: border-color var(--transition-normal);
+}
+
+.form-input:focus, .form-textarea:focus, .form-select:focus {
+    outline: none;
+    border-color: var(--primary-color);
+}
+
+.form-input:hover, .form-textarea:hover, .form-select:hover {
+    border-color: var(--border-light);
+}
+
+.form-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: var(--spacing-lg);
+    margin-bottom: var(--spacing-lg);
+}
+
+.checkbox-group {
+    margin: var(--spacing-xl) 0;
+}
+
+.modern-checkbox {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-md);
+    cursor: pointer;
+    padding: var(--spacing-md);
+    border-radius: var(--radius-lg);
+    transition: all var(--transition-normal);
+    background: var(--surface-glass);
+    border: 1px solid var(--border-glass);
+    backdrop-filter: var(--backdrop-blur-sm);
+}
+
+.modern-checkbox:hover {
+    background: var(--surface-glass-light);
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+}
+
+.modern-checkbox input[type="checkbox"] {
+    display: none;
+}
+
+.checkmark {
+    width: 24px;
+    height: 24px;
+    border: 2px solid var(--border-color);
+    border-radius: var(--radius-sm);
+    position: relative;
+    transition: all var(--transition-bounce);
+    background: var(--surface-color);
+}
+
+.checkmark::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 6px;
+    height: 10px;
+    border: solid white;
+    border-width: 0 2px 2px 0;
+    transform: translate(-50%, -60%) rotate(45deg);
+    opacity: 0;
+    transition: all var(--transition-normal);
+}
+
+.modern-checkbox input[type="checkbox"]:checked + .checkmark {
+    background: var(--gradient-primary);
+    border-color: var(--primary-color);
+    box-shadow: var(--shadow-glow);
+}
+
+.modern-checkbox input[type="checkbox"]:checked + .checkmark::after {
+    opacity: 1;
+}
+
+.checkbox-label {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    font-weight: var(--font-medium);
+    color: var(--text-primary);
+}
+
+.btn {
+    background: var(--primary-color);
+    border: none;
+    border-radius: var(--radius);
+    padding: var(--spacing-md) var(--spacing-lg);
+    font-weight: var(--font-semibold);
+    font-size: var(--text-sm);
+    color: white;
+    cursor: pointer;
+    transition: background-color var(--transition-normal);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-sm);
+}
+
+.btn:hover {
+    background: var(--primary-dark);
+}
+
+.btn:active {
+    background: var(--primary-dark);
+}
+
+.btn-primary {
+    background: var(--primary-color);
+}
+
+.btn-secondary {
+    background: var(--secondary-color);
+}
+
+.modern-response {
+    margin-top: var(--spacing-xl);
+    border-radius: var(--radius-xl);
+    overflow: hidden;
+    backdrop-filter: var(--backdrop-blur);
+    border: 1px solid var(--border-glass);
+}
+
+.form-label {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    color: var(--text-primary);
+    font-weight: var(--font-semibold);
+    margin-bottom: var(--spacing-md);
+    font-size: var(--text-sm);
+}
+
+.form-label .icon {
+    width: 16px;
+    height: 16px;
+    opacity: 0.7;
+}
+
+/* ===== ENHANCED SELECT STYLING ===== */
+.modern-select {
+    background: var(--surface-glass);
+    backdrop-filter: var(--backdrop-blur-sm);
+    border: 2px solid var(--border-glass);
+    border-radius: var(--radius-xl);
+    padding: var(--spacing-lg);
+    color: var(--text-primary);
+    font-family: var(--font-family-sans);
+    font-size: var(--text-sm);
+    transition: all var(--transition-bounce);
+    cursor: pointer;
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+    background-position: right 12px center;
+    background-repeat: no-repeat;
+    background-size: 16px;
+    padding-right: 48px;
+    position: relative;
+}
+
+.modern-select:focus {
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1), var(--shadow-glow);
+    transform: translateY(-2px);
+    outline: none;
+}
+
+.modern-select:hover {
+    border-color: var(--border-light);
+    transform: translateY(-1px);
+}
+
+.modern-select option {
+    background: var(--surface-color);
+    color: var(--text-primary);
+    padding: var(--spacing-md);
+}
+
+/* ===== FORM HINTS ===== */
+.form-hint {
+    display: block;
+    color: var(--text-muted);
+    font-size: var(--text-xs);
+    margin-top: var(--spacing-xs);
+    font-style: italic;
+    opacity: 0.8;
+}
+
+/* ===== ADVANCED PARAMETERS SECTION ===== */
+.advanced-section {
+    margin: var(--spacing-xl) 0;
+    border-top: 1px solid var(--border-glass);
+    padding-top: var(--spacing-xl);
+}
+
+.advanced-toggle {
+    background: var(--surface-glass);
+    backdrop-filter: var(--backdrop-blur-sm);
+    border: 1px solid var(--border-glass);
+    border-radius: var(--radius-lg);
+    padding: var(--spacing-md) var(--spacing-lg);
+    color: var(--text-primary);
+    font-weight: var(--font-semibold);
+    cursor: pointer;
+    transition: all var(--transition-bounce);
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    width: 100%;
+    justify-content: center;
+    font-size: var(--text-sm);
+}
+
+.advanced-toggle:hover {
+    background: var(--surface-glass-light);
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+}
+
+.advanced-toggle .icon {
+    width: 20px;
+    height: 20px;
+    transition: transform var(--transition-bounce);
+}
+
+.advanced-toggle.expanded .icon {
+    transform: rotate(180deg);
+}
+
+.advanced-params {
+    display: none;
+    margin-top: var(--spacing-lg);
+    padding: var(--spacing-lg);
+    background: var(--surface-glass-light);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--border-glass);
+    backdrop-filter: var(--backdrop-blur);
+}
+
+.advanced-params.show {
+    display: block;
+    animation: slideDown var(--transition-normal) var(--ease-out-expo);
+}
+
+/* ===== CHECKBOX GRID ===== */
+.checkbox-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: var(--spacing-md);
+    margin: var(--spacing-xl) 0;
+}
+
+/* ===== ENHANCED COLOR SCHEME ===== */
+:root {
+    /* Enhanced Primary Colors */
+    --primary-color: #6366f1;
+    --primary-dark: #4f46e5;
+    --primary-light: #818cf8;
+    --primary-glow: rgba(99, 102, 241, 0.4);
+
+    /* Enhanced Secondary Colors */
+    --secondary-color: #06b6d4;
+    --secondary-dark: #0891b2;
+    --secondary-light: #22d3ee;
+    --secondary-glow: rgba(6, 182, 212, 0.4);
+
+    /* Enhanced Accent Colors */
+    --accent-color: #f59e0b;
+    --accent-dark: #d97706;
+    --accent-light: #fbbf24;
+    --accent-glow: rgba(245, 158, 11, 0.4);
+
+    /* Success Colors */
+    --success-color: #10b981;
+    --success-dark: #059669;
+    --success-light: #34d399;
+    --success-glow: rgba(16, 185, 129, 0.4);
+
+    /* Enhanced Gradients */
+    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    --gradient-secondary: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
+    --gradient-accent: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
+    --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
+    --gradient-cosmic: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #4facfe 100%);
+
+    /* Enhanced Glass Effects */
+    --glass-bg: rgba(255, 255, 255, 0.1);
+    --glass-border: rgba(255, 255, 255, 0.2);
+    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+}
+
+/* ===== BUTTON STYLES ===== */
+.btn {
+    background: var(--gradient-primary);
+    color: white;
+    border: none;
+    border-radius: var(--radius-lg);
+    padding: var(--spacing-md) var(--spacing-xl);
+    font-weight: var(--font-semibold);
+    font-size: var(--text-sm);
+    cursor: pointer;
+    transition: all var(--transition-bounce);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-sm);
+    text-decoration: none;
+    font-family: var(--font-family-sans);
+    min-height: 44px;
+    position: relative;
+    overflow: hidden;
+    box-shadow: var(--shadow-md);
+    backdrop-filter: var(--backdrop-blur-sm);
+}
+
+.btn::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+    transition: left 0.6s var(--ease-out-expo);
+}
+
+.btn::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: radial-gradient(circle at center, rgba(255,255,255,0.1) 0%, transparent 70%);
+    opacity: 0;
+    transition: opacity var(--transition-normal);
+}
+
+.btn:hover {
+    transform: translateY(-3px) scale(1.02);
+    box-shadow: var(--shadow-glow-lg);
+}
+
+.btn:hover::before {
+    left: 100%;
+}
+
+.btn:hover::after {
+    opacity: 1;
+}
+
+.btn:active {
+    transform: translateY(-1px) scale(0.98);
+    transition: all 0.1s;
+}
+
+.btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    transform: none;
+    box-shadow: var(--shadow-sm);
+}
+
+.btn-secondary {
+    background: var(--gradient-secondary);
+}
+
+.btn-accent {
+    background: var(--gradient-accent);
+}
+
+.btn-outline {
+    background: transparent;
+    border: 2px solid var(--primary-color);
+    color: var(--primary-color);
+}
+
+.btn-outline:hover {
+    background: var(--primary-color);
+    color: white;
+}
+
+/* ===== PREMIUM AUTHENTICATION STYLES ===== */
+.auth-info-card {
+    background: var(--surface-premium);
+    backdrop-filter: var(--backdrop-blur-lg);
+    border: 1px solid transparent;
+    border-image: var(--gradient-border) 1;
+    border-radius: var(--radius-xl);
+    margin-bottom: var(--spacing-xl);
+    overflow: hidden;
+    box-shadow: var(--shadow-premium);
+    position: relative;
+}
+
+.auth-info-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: var(--gradient-premium);
+    z-index: 2;
+}
+
+.auth-info-header {
+    background: var(--gradient-premium);
+    padding: var(--spacing-xl) var(--spacing-2xl);
+    color: white;
+    position: relative;
+    overflow: hidden;
+}
+
+.auth-info-header::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--gradient-glass);
+    opacity: 0.2;
+    pointer-events: none;
+}
+
+.auth-title {
+    font-size: var(--text-xl);
+    font-weight: var(--font-bold);
+    margin: 0;
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-md);
+    position: relative;
+    z-index: 2;
+}
+
+.auth-icon {
+    width: 24px;
+    height: 24px;
+    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
+}
+
+.auth-info-content {
+    padding: var(--spacing-xl);
+}
+
+.auth-info-content p {
+    color: var(--text-secondary);
+    line-height: var(--leading-relaxed);
+    margin-bottom: var(--spacing-lg);
+}
+
+.code-block {
+    background: var(--background-color);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius);
+    margin: var(--spacing-lg) 0;
+    overflow: hidden;
+}
+
+.code-header {
+    background: var(--surface-light);
+    padding: var(--spacing-md) var(--spacing-lg);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.code-title {
+    color: var(--text-primary);
+    font-weight: var(--font-medium);
+    font-size: var(--text-sm);
+}
+
+.copy-btn {
+    background: var(--primary-color);
+    color: white;
+    border: none;
+    border-radius: var(--radius-sm);
+    padding: var(--spacing-xs) var(--spacing-sm);
+    font-size: var(--text-xs);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+}
+
+.copy-btn:hover {
+    background: var(--primary-dark);
+    transform: scale(1.05);
+}
+
+.code-block pre {
+    margin: 0;
+    padding: var(--spacing-lg);
+    color: var(--secondary-color);
+    font-family: var(--font-family-mono);
+    font-size: var(--text-sm);
+    line-height: var(--leading-relaxed);
+    overflow-x: auto;
+}
+
+.steps-container {
+    margin-top: var(--spacing-xl);
+}
+
+.steps-container h4 {
+    color: var(--text-primary);
+    font-weight: var(--font-semibold);
+    margin-bottom: var(--spacing-md);
+    font-size: var(--text-lg);
+}
+
+.steps-list {
+    color: var(--text-secondary);
+    margin-left: var(--spacing-xl);
+    line-height: var(--leading-loose);
+}
+
+.steps-list li {
+    margin-bottom: var(--spacing-sm);
+    position: relative;
+}
+
+.steps-list li::marker {
+    color: var(--primary-color);
+    font-weight: var(--font-bold);
+}
+
+/* ===== SECURITY TIPS STYLES ===== */
+.security-tips {
+    margin: var(--spacing-2xl) 0;
+    padding: var(--spacing-xl);
+    background: var(--surface-color);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--border-color);
+}
+
+.security-tips h3 {
+    color: var(--text-primary);
+    font-size: var(--text-xl);
+    font-weight: var(--font-bold);
+    margin-bottom: var(--spacing-lg);
+    text-align: center;
+}
+
+.tips-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: var(--spacing-lg);
+}
+
+.tip-card {
+    background: var(--background-color);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius);
+    padding: var(--spacing-lg);
+    text-align: center;
+    transition: all var(--transition-normal);
+}
+
+.tip-card:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--shadow-lg);
+    border-color: var(--primary-color);
+}
+
+.tip-icon {
+    font-size: var(--text-3xl);
+    margin-bottom: var(--spacing-md);
+}
+
+.tip-card h4 {
+    color: var(--text-primary);
+    font-weight: var(--font-semibold);
+    margin-bottom: var(--spacing-sm);
+    font-size: var(--text-base);
+}
+
+.tip-card p {
+    color: var(--text-secondary);
+    font-size: var(--text-sm);
+    line-height: var(--leading-relaxed);
+}
+
+/* ===== RATE LIMIT STYLES ===== */
+.rate-limit-info {
+    margin: var(--spacing-2xl) 0;
+    padding: var(--spacing-xl);
+    background: var(--surface-color);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--border-color);
+}
+
+.rate-limit-info h3 {
+    color: var(--text-primary);
+    font-size: var(--text-xl);
+    font-weight: var(--font-bold);
+    margin-bottom: var(--spacing-lg);
+}
+
+.rate-limit-content p {
+    color: var(--text-secondary);
+    line-height: var(--leading-relaxed);
+    margin-bottom: var(--spacing-lg);
+}
+
+.rate-limit-table {
+    background: var(--background-color);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius);
+    overflow: hidden;
+    margin: var(--spacing-lg) 0;
+}
+
+.table-header {
+    display: grid;
+    grid-template-columns: 1fr 1fr 2fr;
+    background: var(--surface-light);
+    font-weight: var(--font-semibold);
+    color: var(--text-primary);
+}
+
+.table-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr 2fr;
+    border-top: 1px solid var(--border-color);
+}
+
+.table-cell {
+    padding: var(--spacing-md) var(--spacing-lg);
+    color: var(--text-secondary);
+    font-size: var(--text-sm);
+}
+
+.table-header .table-cell {
+    color: var(--text-primary);
+    font-weight: var(--font-semibold);
+}
+
+.rate-limit-headers {
+    margin-top: var(--spacing-xl);
+}
+
+.rate-limit-headers h4 {
+    color: var(--text-primary);
+    font-weight: var(--font-semibold);
+    margin-bottom: var(--spacing-md);
+}
+
+.rate-limit-headers p {
+    color: var(--text-secondary);
+    margin-bottom: var(--spacing-md);
+}
+
+.rate-limit-headers ul {
+    color: var(--text-secondary);
+    margin-left: var(--spacing-lg);
+    line-height: var(--leading-loose);
+}
+
+.rate-limit-headers code {
+    background: var(--surface-light);
+    color: var(--secondary-color);
+    padding: var(--spacing-xs) var(--spacing-sm);
+    border-radius: var(--radius-sm);
+    font-family: var(--font-family-mono);
+    font-size: var(--text-sm);
+}
+
+/* ===== MODELS STYLES ===== */
+.models-controls {
+    display: flex;
+    gap: var(--spacing-lg);
+    margin-bottom: var(--spacing-xl);
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.search-container {
+    flex: 1;
+    min-width: 250px;
+}
+
+.search-input {
+    width: 100%;
+    background: var(--surface-color);
+    border: 2px solid var(--border-color);
+    border-radius: var(--radius-lg);
+    padding: var(--spacing-md) var(--spacing-lg);
+    color: var(--text-primary);
+    font-size: var(--text-base);
+    transition: all var(--transition-normal);
+}
+
+.search-input:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+}
+
+.filter-container {
+    min-width: 150px;
+}
+
+.filter-select {
+    width: 100%;
+    background: var(--surface-color);
+    border: 2px solid var(--border-color);
+    border-radius: var(--radius);
+    padding: var(--spacing-md);
+    color: var(--text-primary);
+    font-size: var(--text-sm);
+    cursor: pointer;
+}
+
+.view-toggle {
+    display: flex;
+    background: var(--surface-color);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius);
+    overflow: hidden;
+}
+
+.view-btn {
+    background: none;
+    border: none;
+    padding: var(--spacing-md);
+    color: var(--text-secondary);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    font-size: var(--text-lg);
+}
+
+.view-btn:hover {
+    background: var(--surface-light);
+    color: var(--text-primary);
+}
+
+.view-btn.active {
+    background: var(--primary-color);
+    color: white;
+}
+
+.models-stats {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: var(--spacing-lg);
+    margin-bottom: var(--spacing-xl);
+    padding: var(--spacing-lg);
+    background: var(--surface-color);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--border-color);
+}
+
+.stat-item {
+    text-align: center;
+    padding: var(--spacing-md);
+}
+
+.stat-number {
+    display: block;
+    font-size: var(--text-2xl);
+    font-weight: var(--font-bold);
+    color: var(--primary-color);
+    margin-bottom: var(--spacing-xs);
+}
+
+.stat-text {
+    font-size: var(--text-sm);
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    font-weight: var(--font-medium);
+}
+
+.loading-container, .error-container {
+    text-align: center;
+    padding: var(--spacing-2xl);
+    color: var(--text-secondary);
+}
+
+.error-container {
+    background: var(--surface-color);
+    border: 1px solid var(--error-color);
+    border-radius: var(--radius-lg);
+    color: var(--error-color);
+}
+
+.error-icon {
+    font-size: var(--text-4xl);
+    margin-bottom: var(--spacing-md);
+}
+
+.error-container h3 {
+    color: var(--text-primary);
+    margin-bottom: var(--spacing-sm);
+}
+
+.models-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: var(--spacing-lg);
+    margin-bottom: var(--spacing-xl);
+}
+
+.models-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-md);
+}
+
+.model-card {
+    background: var(--surface-color);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-lg);
+    padding: var(--spacing-xl);
+    transition: all var(--transition-normal);
+    position: relative;
+    overflow: hidden;
+}
+
+.model-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: var(--gradient-primary);
+    transform: scaleX(0);
+    transition: transform var(--transition-normal);
+}
+
+.model-card:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--shadow-lg);
+    border-color: var(--primary-color);
+}
+
+.model-card:hover::before {
+    transform: scaleX(1);
+}
+
+.model-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: var(--spacing-md);
+}
+
+.model-name {
+    font-size: var(--text-lg);
+    font-weight: var(--font-bold);
+    color: var(--text-primary);
+    font-family: var(--font-family-mono);
+    margin-bottom: var(--spacing-xs);
+}
+
+.model-provider {
+    font-size: var(--text-sm);
+    color: var(--text-muted);
+    font-weight: var(--font-medium);
+}
+
+.model-type {
+    background: var(--gradient-secondary);
+    color: white;
+    padding: var(--spacing-xs) var(--spacing-sm);
+    border-radius: var(--radius-full);
+    font-size: var(--text-xs);
+    font-weight: var(--font-bold);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.model-description {
+    color: var(--text-secondary);
+    font-size: var(--text-sm);
+    line-height: var(--leading-relaxed);
+    margin-bottom: var(--spacing-md);
+}
+
+.model-meta {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: var(--text-xs);
+    color: var(--text-muted);
+    margin-top: var(--spacing-md);
+    padding-top: var(--spacing-md);
+    border-top: 1px solid var(--border-color);
+}
+
+.model-created {
+    font-family: var(--font-family-mono);
+}
+
+.no-results {
+    text-align: center;
+    padding: var(--spacing-2xl);
+    color: var(--text-secondary);
+}
+
+.no-results-icon {
+    font-size: var(--text-4xl);
+    margin-bottom: var(--spacing-md);
+}
+
+.no-results h3 {
+    color: var(--text-primary);
+    margin-bottom: var(--spacing-sm);
+}
+
+/* ===== EXAMPLES STYLES ===== */
+.examples-nav {
+    display: flex;
+    gap: var(--spacing-sm);
+    margin-bottom: var(--spacing-xl);
+    background: var(--surface-color);
+    padding: var(--spacing-sm);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--border-color);
+    overflow-x: auto;
+}
+
+.example-tab {
+    background: none;
+    border: none;
+    padding: var(--spacing-md) var(--spacing-lg);
+    color: var(--text-secondary);
+    cursor: pointer;
+    font-size: var(--text-sm);
+    font-weight: var(--font-medium);
+    border-radius: var(--radius);
+    transition: all var(--transition-normal);
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    white-space: nowrap;
+    min-width: fit-content;
+}
+
+.example-tab:hover {
+    background: var(--surface-light);
+    color: var(--text-primary);
+}
+
+.example-tab.active {
+    background: var(--gradient-primary);
+    color: white;
+}
+
+.tab-icon {
+    font-size: var(--text-base);
+}
+
+.example-content {
+    position: relative;
+}
+
+.language-examples {
+    display: none;
+}
+
+.language-examples.active {
+    display: block;
+    animation: fadeIn var(--transition-normal) ease-in;
+}
+
+.example-card {
+    background: var(--surface-color);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-lg);
+    margin-bottom: var(--spacing-xl);
+    overflow: hidden;
+    box-shadow: var(--shadow);
+}
+
+.example-header {
+    background: var(--surface-light);
+    padding: var(--spacing-lg) var(--spacing-xl);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.example-header h3 {
+    color: var(--text-primary);
+    font-size: var(--text-lg);
+    font-weight: var(--font-semibold);
+    margin: 0;
+}
+
+.copy-code-btn {
+    background: var(--secondary-color);
+    color: white;
+    border: none;
+    border-radius: var(--radius);
+    padding: var(--spacing-sm) var(--spacing-md);
+    font-size: var(--text-xs);
+    font-weight: var(--font-medium);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+}
+
+.copy-code-btn:hover {
+    background: var(--secondary-dark);
+    transform: scale(1.05);
+}
+
+.code-block {
+    background: var(--background-color);
+    overflow-x: auto;
+}
+
+.code-block pre {
+    margin: 0;
+    padding: var(--spacing-xl);
+    color: var(--text-secondary);
+    font-family: var(--font-family-mono);
+    font-size: var(--text-sm);
+    line-height: var(--leading-relaxed);
+}
+
+.code-block code {
+    font-family: var(--font-family-mono);
+}
+
+/* Syntax highlighting */
+.language-python .hljs-keyword { color: #ff7b72; }
+.language-python .hljs-string { color: #a5d6ff; }
+.language-python .hljs-comment { color: #8b949e; }
+.language-python .hljs-function { color: #d2a8ff; }
+
+.language-javascript .hljs-keyword { color: #ff7b72; }
+.language-javascript .hljs-string { color: #a5d6ff; }
+.language-javascript .hljs-comment { color: #8b949e; }
+.language-javascript .hljs-function { color: #d2a8ff; }
+
+.integration-guides {
+    margin-top: var(--spacing-2xl);
+    padding: var(--spacing-xl);
+    background: var(--surface-color);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--border-color);
+}
+
+.guides-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: var(--spacing-lg);
+    margin-top: var(--spacing-lg);
+}
+
+.guide-card {
+    background: var(--background-color);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius);
+    padding: var(--spacing-xl);
+    transition: all var(--transition-normal);
+}
+
+.guide-card:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--shadow-lg);
+    border-color: var(--primary-color);
+}
+
+.guide-icon {
+    font-size: var(--text-3xl);
+    margin-bottom: var(--spacing-md);
+}
+
+.guide-card h3 {
+    color: var(--text-primary);
+    font-weight: var(--font-semibold);
+    margin-bottom: var(--spacing-sm);
+    font-size: var(--text-lg);
+}
+
+.guide-card p {
+    color: var(--text-secondary);
+    font-size: var(--text-sm);
+    line-height: var(--leading-relaxed);
+    margin-bottom: var(--spacing-md);
+}
+
+.guide-card ul {
+    color: var(--text-secondary);
+    font-size: var(--text-sm);
+    margin-left: var(--spacing-lg);
+}
+
+.guide-card li {
+    margin-bottom: var(--spacing-xs);
+}
+
+/* ===== SIMPLE FOOTER STYLES ===== */
+.footer {
+    background: var(--surface-color);
+    border-top: 1px solid var(--border-color);
+    margin-top: var(--spacing-2xl);
+    padding: var(--spacing-xl) 0;
+}
+
+.footer-content {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: var(--spacing-xl);
+    margin-bottom: var(--spacing-lg);
+}
+
+.footer-section {
+    color: var(--text-secondary);
+}
+
+.footer-title {
+    color: var(--text-primary);
+    font-size: var(--text-lg);
+    font-weight: var(--font-bold);
+    margin-bottom: var(--spacing-md);
+}
+
+.footer-description {
+    line-height: var(--leading-relaxed);
+    font-size: var(--text-sm);
+}
+
+
+
+.footer-subtitle {
+    color: var(--text-primary);
+    font-size: var(--text-base);
+    font-weight: var(--font-semibold);
+    margin-bottom: var(--spacing-md);
+}
+
+.footer-links {
+    list-style: none;
+}
+
+.footer-links li {
+    margin-bottom: var(--spacing-sm);
+}
+
+.footer-links a {
+    color: var(--text-secondary);
+    text-decoration: none;
+    font-size: var(--text-sm);
+    transition: color var(--transition-fast);
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+}
+
+.footer-links a:hover {
+    color: var(--primary-color);
+}
+
+.footer-bottom {
+    border-top: 1px solid var(--border-color);
+    padding-top: var(--spacing-lg);
+    margin-bottom: var(--spacing-lg);
+}
+
+.footer-bottom-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--spacing-lg);
+}
+
+.footer-copyright p {
+    color: var(--text-muted);
+    font-size: var(--text-sm);
+    margin-bottom: var(--spacing-xs);
+}
+
+.footer-version {
+    font-family: var(--font-family-mono);
+    font-size: var(--text-xs);
+}
+
+
+
+.footer-social {
+    display: flex;
+    gap: var(--spacing-md);
+}
+
+.social-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    background: var(--surface-light);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-full);
+    color: var(--text-secondary);
+    text-decoration: none;
+    transition: all var(--transition-normal);
+    font-size: var(--text-lg);
+}
+
+.social-link:hover {
+    background: var(--primary-color);
+    border-color: var(--primary-color);
+    color: white;
+    transform: translateY(-2px);
+}
+
+.footer-legal {
+    border-top: 1px solid var(--border-color);
+    padding-top: var(--spacing-lg);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--spacing-lg);
+}
+
+.legal-links {
+    display: flex;
+    gap: var(--spacing-lg);
+    flex-wrap: wrap;
+}
+
+.legal-links a {
+    color: var(--text-muted);
+    text-decoration: none;
+    font-size: var(--text-xs);
+    transition: color var(--transition-fast);
+}
+
+.legal-links a:hover {
+    color: var(--primary-color);
+}
+
+
+
+/* ===== MODERN RESPONSE DISPLAY STYLES ===== */
+.response-display {
+    background: var(--surface-glass);
+    backdrop-filter: var(--backdrop-blur);
+    border: 1px solid var(--border-glass);
+    border-radius: var(--radius-xl);
+    margin-top: var(--spacing-xl);
+    overflow: hidden;
+    box-shadow: var(--shadow-glass);
+    position: relative;
+}
+
+.response-display::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: var(--gradient-primary);
+    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
+}
+
+.response-display.show {
+    display: block;
+    animation: slideDown var(--transition-normal) var(--ease-out-expo);
+}
+
+.modern-response {
+    background: var(--surface-glass);
+    backdrop-filter: var(--backdrop-blur);
+    border: 1px solid var(--border-glass);
+    border-radius: var(--radius-xl);
+    overflow: hidden;
+    box-shadow: var(--shadow-glass);
+    position: relative;
+}
+
+.modern-response-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--spacing-lg) var(--spacing-xl);
+    background: var(--surface-glass-light);
+    border-bottom: 1px solid var(--border-glass);
+    backdrop-filter: var(--backdrop-blur);
+}
+
+.modern-response-header.error {
+    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(220, 38, 38, 0.1) 100%);
+    border-bottom-color: rgba(239, 68, 68, 0.2);
+}
+
+.response-status {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-md);
+}
+
+.modern-response-body {
+    padding: var(--spacing-xl);
+    background: var(--surface-color);
+    font-family: var(--font-family-mono);
+    font-size: var(--text-sm);
+    line-height: var(--leading-relaxed);
+    max-height: 500px;
+    overflow-y: auto;
+    position: relative;
+}
+
+.modern-response-body.error {
+    background: linear-gradient(135deg, rgba(239, 68, 68, 0.05) 0%, rgba(220, 38, 38, 0.05) 100%);
+}
+
+.error-content {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--spacing-lg);
+    color: var(--error-color);
+}
+
+.error-icon {
+    width: 24px;
+    height: 24px;
+    flex-shrink: 0;
+    margin-top: var(--spacing-xs);
+}
+
+.copy-btn {
+    background: var(--surface-glass);
+    border: 1px solid var(--border-glass);
+    border-radius: var(--radius-lg);
+    padding: var(--spacing-sm) var(--spacing-md);
+    color: var(--text-primary);
+    cursor: pointer;
+    transition: all var(--transition-bounce);
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    font-size: var(--text-sm);
+    backdrop-filter: var(--backdrop-blur-sm);
+}
+
+.copy-btn:hover {
+    background: var(--surface-glass-light);
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+}
+
+.copy-btn svg {
+    width: 16px;
+    height: 16px;
+}
+
+.modern-loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-md);
+    padding: var(--spacing-2xl);
+    color: var(--text-primary);
+    font-weight: var(--font-medium);
+}
+
+.loading-spinner {
+    width: 24px;
+    height: 24px;
+    border: 3px solid var(--border-glass);
+    border-top: 3px solid var(--primary-color);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+.response-header {
+    background: var(--surface-light);
+    padding: var(--spacing-md) var(--spacing-lg);
+    border-bottom: 1px solid var(--border-color);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.response-status {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+}
+
+.status-code {
+    padding: var(--spacing-xs) var(--spacing-sm);
+    border-radius: var(--radius-full);
+    font-weight: var(--font-bold);
+    font-size: var(--text-xs);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.status-200 {
+    background: var(--success-color);
+    color: white;
+}
+
+.status-400, .status-401, .status-403, .status-404 {
+    background: var(--error-color);
+    color: white;
+}
+
+.status-500 {
+    background: var(--warning-color);
+    color: white;
+}
+
+.response-time {
+    font-size: var(--text-xs);
+    color: var(--text-muted);
+    font-family: var(--font-family-mono);
+}
+
+.response-body {
+    padding: var(--spacing-lg);
+    max-height: 400px;
+    overflow-y: auto;
+}
+
+.response-body pre {
+    margin: 0;
+    color: var(--text-secondary);
+    font-family: var(--font-family-mono);
+    font-size: var(--text-sm);
+    line-height: var(--leading-relaxed);
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+
+.response-body .json-key {
+    color: var(--primary-color);
+}
+
+.response-body .json-string {
+    color: var(--secondary-color);
+}
+
+.response-body .json-number {
+    color: var(--warning-color);
+}
+
+.response-body .json-boolean {
+    color: var(--info-color);
+}
+
+.response-body .json-null {
+    color: var(--text-muted);
+}
+
+/* ===== STREAMING RESPONSE STYLES ===== */
+.streaming {
+    max-height: 500px;
+    overflow-y: auto;
+}
+
+.stream-content {
+    padding: 15px;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 8px;
+    margin-bottom: 10px;
+    min-height: 100px;
+}
+
+.stream-message {
+    margin-bottom: 15px;
+}
+
+.stream-text {
+    background: rgba(0, 0, 0, 0.3);
+    padding: 10px;
+    border-radius: 6px;
+    margin-top: 8px;
+    white-space: pre-wrap;
+    font-family: 'Fira Code', monospace;
+    line-height: 1.5;
+    color: #e2e8f0;
+}
+
+.stream-raw {
+    padding: 15px;
+    background: rgba(0, 0, 0, 0.4);
+    border-radius: 8px;
+    font-family: 'Fira Code', monospace;
+    font-size: 12px;
+    max-height: 400px;
+    overflow-y: auto;
+}
+
+.stream-chunk {
+    margin-bottom: 8px;
+    padding: 5px;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 4px;
+    border-left: 3px solid var(--accent-color);
+}
+
+.stream-controls {
+    display: flex;
+    justify-content: center;
+    margin-top: 10px;
+}
+
+.stream-toggle {
+    background: var(--accent-color);
+    color: white;
+    border: none;
+    padding: 8px 16px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 12px;
+    transition: all 0.3s ease;
+}
+
+.stream-toggle:hover {
+    background: var(--accent-hover);
+    transform: translateY(-1px);
+}
+
+.stream-done {
+    color: #10b981;
+    font-weight: 600;
+    text-align: center;
+    padding: 10px;
+    background: rgba(16, 185, 129, 0.1);
+    border-radius: 6px;
+    margin-top: 10px;
+}
+
+.stream-error {
+    color: #ef4444;
+    font-weight: 600;
+    text-align: center;
+    padding: 10px;
+    background: rgba(239, 68, 68, 0.1);
+    border-radius: 6px;
+    margin-top: 10px;
+}
+
+/* ===== TOAST NOTIFICATIONS ===== */
+.toast-container {
+    position: fixed;
+    top: var(--spacing-lg);
+    right: var(--spacing-lg);
+    z-index: var(--z-toast);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sm);
+    max-width: 400px;
+}
+
+.toast {
+    background: var(--surface-color);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius);
+    padding: var(--spacing-lg);
+    box-shadow: var(--shadow-lg);
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-md);
+    animation: slideInRight 0.3s ease-out;
+    position: relative;
+    overflow: hidden;
+}
+
+.toast::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 4px;
+    background: var(--primary-color);
+}
+
+.toast.success::before { background: var(--success-color); }
+.toast.error::before { background: var(--error-color); }
+.toast.warning::before { background: var(--warning-color); }
+.toast.info::before { background: var(--info-color); }
+
+.toast-icon {
+    font-size: var(--text-lg);
+    flex-shrink: 0;
+}
+
+.toast-content {
+    flex: 1;
+}
+
+.toast-title {
+    color: var(--text-primary);
+    font-weight: var(--font-semibold);
+    font-size: var(--text-sm);
+    margin-bottom: var(--spacing-xs);
+}
+
+.toast-message {
+    color: var(--text-secondary);
+    font-size: var(--text-sm);
+    line-height: var(--leading-normal);
+}
+
+.toast-close {
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    font-size: var(--text-lg);
+    padding: var(--spacing-xs);
+    border-radius: var(--radius-sm);
+    transition: all var(--transition-fast);
+}
+
+.toast-close:hover {
+    background: var(--surface-light);
+    color: var(--text-primary);
+}
+
+@keyframes slideInRight {
+    from {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+/* ===== MODERN RESPONSIVE DESIGN ===== */
+@media (max-width: 1024px) {
+    .container {
+        padding: 0 var(--spacing-md);
+    }
+
+    .stats-grid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: var(--spacing-md);
+    }
+
+    .models-controls {
+        flex-direction: column;
+        align-items: stretch;
+        gap: var(--spacing-md);
+    }
+
+    .search-container {
+        min-width: auto;
+    }
+
+    .header-title {
+        font-size: var(--text-3xl);
+    }
+
+    .nav-tabs {
+        border-radius: var(--radius-md);
+    }
+
+    .endpoint-card {
+        margin-bottom: var(--spacing-md);
+    }
+}
+
+@media (max-width: 768px) {
+    .header-title {
+        font-size: var(--text-3xl);
+    }
+
+    .header-description {
+        font-size: var(--text-base);
+        padding: var(--spacing-md);
+    }
+
+    .stats-grid {
+        grid-template-columns: 1fr;
+        gap: var(--spacing-md);
+    }
+
+    .stat-card {
+        padding: var(--spacing-lg);
+    }
+
+    .nav-tabs {
+        flex-wrap: wrap;
+        border-radius: var(--radius-lg);
+    }
+
+    .nav-tab {
+        flex: 1 1 50%;
+        min-width: 120px;
+        padding: var(--spacing-md);
+    }
+
+    .endpoint-section {
+        padding: var(--spacing-lg);
+        margin-bottom: var(--spacing-lg);
+    }
+
+    .endpoint-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--spacing-md);
+        padding: var(--spacing-lg);
+    }
+
+    .form-grid {
+        grid-template-columns: 1fr;
+        gap: var(--spacing-md);
+    }
+
+    .try-it-section {
+        padding: var(--spacing-lg);
+    }
+
+    .modern-btn {
+        width: 100%;
+        justify-content: center;
+        padding: var(--spacing-lg);
+    }
+
+    .footer-content {
+        grid-template-columns: 1fr;
+        gap: var(--spacing-xl);
+    }
+
+    .footer-bottom-content {
+        flex-direction: column;
+        text-align: center;
+    }
+
+    .footer-legal {
+        flex-direction: column;
+        text-align: center;
+    }
+
+    .examples-nav {
+        flex-wrap: wrap;
+    }
+
+    .guides-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .toast-container {
+        left: var(--spacing-md);
+        right: var(--spacing-md);
+        max-width: none;
+    }
+
+    .section-title {
+        font-size: var(--text-2xl);
+    }
+
+    .section-description {
+        font-size: var(--text-base);
+        padding: var(--spacing-md);
+    }
+
+    .expand-icon {
+        width: 28px;
+        height: 28px;
+    }
+
+    .expand-icon svg {
+        width: 16px;
+        height: 16px;
+    }
+}
+
+@media (max-width: 480px) {
+    .container {
+        padding: 0 var(--spacing-sm);
+    }
+
+    .header {
+        padding: var(--spacing-xl) 0;
+    }
+
+    .header-title {
+        font-size: var(--text-2xl);
+    }
+
+    .nav-tab {
+        padding: var(--spacing-sm) var(--spacing-md);
+        font-size: var(--text-sm);
+    }
+
+    .nav-tab-text {
+        display: none;
+    }
+
+    .endpoint-card {
+        margin-bottom: var(--spacing-md);
+    }
+
+    .endpoint-body {
+        padding: var(--spacing-md);
+    }
+
+    .try-it-section {
+        padding: var(--spacing-md);
+    }
+
+    .btn {
+        width: 100%;
+        justify-content: center;
+    }
+}