@import "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap";
:root{--bg-primary:#0b0e13;--bg-secondary:#12151c;--bg-tertiary:#1b1e28;--bg-elevated:#212530;--bg-glass:#0f1219bf;--border-subtle:#22262f;--border-medium:#303441;--border-focus:#f14164;--text-primary:#f9fafb;--text-secondary:#afb5c0;--text-muted:#6e7687;--text-inverse:#0b0e13;--accent-primary:#f14164;--accent-primary-hover:#f35e7c;--accent-primary-glow:#f1416440;--accent-secondary:#f9761f;--success:#26c57b;--success-bg:#26c57b1f;--warning:#f5a314;--warning-bg:#f5a3141f;--error:#e94949;--error-bg:#e949491f;--info:#2c8ff2;--info-bg:#2c8ff21f;--font-sans:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono:"JetBrains Mono", monospace;--shadow-sm:0 1px 2px 0 #00000059;--shadow-md:0 4px 12px -2px #00000073;--shadow-lg:0 12px 28px -4px #0009;--shadow-glow:0 0 24px var(--accent-primary-glow);--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;--radius-full:9999px;--transition-fast:.15s cubic-bezier(.4, 0, .2, 1);--transition-normal:.25s cubic-bezier(.4, 0, .2, 1);--transition-slow:.35s cubic-bezier(.4, 0, .2, 1)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{background-color:var(--bg-primary);min-height:100vh;color:var(--text-primary);font-family:var(--font-sans);letter-spacing:-.01em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:15px;line-height:1.55}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer;color:inherit;background:0 0;border:none}input,textarea,select{font:inherit;color:inherit}.app-container{background:radial-gradient(circle at 50% 0%, #f141640a 0%, transparent 60%), radial-gradient(circle at 100% 100%, #171b26cc 0%, transparent 50%), var(--bg-primary);min-height:100vh;display:flex}.main-content{flex-direction:column;flex:1;min-width:0;display:flex}.page-wrapper{width:100%;max-width:1360px;margin:0 auto;padding:2rem 1.5rem}.top-nav{z-index:40;background:var(--bg-glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;padding:.875rem 2rem;display:flex;position:sticky;top:0}.brand-logo{letter-spacing:-.02em;color:var(--text-primary);align-items:center;gap:.625rem;font-size:1.25rem;font-weight:700;display:flex}.brand-icon{border-radius:var(--radius-md);background:linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));color:#fff;width:32px;height:32px;box-shadow:0 2px 10px var(--accent-primary-glow);justify-content:center;align-items:center;display:flex}.nav-links{align-items:center;gap:.5rem;display:flex}.nav-item{border-radius:var(--radius-md);color:var(--text-secondary);transition:all var(--transition-fast);align-items:center;gap:.5rem;padding:.5rem .875rem;font-size:.875rem;font-weight:500;display:flex}.nav-item:hover{color:var(--text-primary);background:var(--bg-tertiary)}.nav-item.active{color:var(--text-primary);background:var(--bg-elevated);border:1px solid var(--border-medium)}.btn{border-radius:var(--radius-md);transition:all var(--transition-fast);white-space:nowrap;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;gap:.5rem;padding:.625rem 1.125rem;font-size:.875rem;font-weight:600;display:inline-flex}.btn-primary{background:linear-gradient(135deg, var(--accent-primary), #ef254d);color:#fff;box-shadow:0 2px 12px var(--accent-primary-glow);border:1px solid #f4718b4d}.btn-primary:hover:not(:disabled){background:linear-gradient(135deg, var(--accent-primary-hover), var(--accent-primary));transform:translateY(-1px);box-shadow:0 4px 18px #f1416466}.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-medium)}.btn-secondary:hover:not(:disabled){background:var(--bg-elevated);border-color:var(--text-muted)}.btn-ghost{color:var(--text-secondary)}.btn-ghost:hover:not(:disabled){color:var(--text-primary);background:var(--bg-tertiary)}.btn-danger{background:var(--error-bg);color:var(--error);border:1px solid #e949494d}.btn-danger:hover:not(:disabled){background:var(--error);color:#fff}.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none!important;transform:none!important}.card{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:all var(--transition-normal);padding:1.5rem}.card-interactive{cursor:pointer}.card-interactive:hover{border-color:var(--border-medium);background:var(--bg-tertiary);box-shadow:var(--shadow-md);transform:translateY(-2px)}.form-group{flex-direction:column;gap:.375rem;margin-bottom:1.25rem;display:flex}.form-label{color:var(--text-primary);justify-content:space-between;align-items:center;font-size:.875rem;font-weight:600;display:flex}.form-label-help{color:var(--text-muted);font-size:.75rem;font-weight:400}.input-text,.input-textarea,.input-select{background:var(--bg-tertiary);border:1px solid var(--border-medium);border-radius:var(--radius-md);width:100%;color:var(--text-primary);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);padding:.625rem .875rem;font-size:.875rem}.input-text:focus,.input-textarea:focus,.input-select:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--accent-primary-glow);outline:none}.input-textarea{resize:vertical;min-height:90px;line-height:1.5}.slider-container{align-items:center;gap:1rem;display:flex}.slider-range{-webkit-appearance:none;background:var(--bg-elevated);border-radius:var(--radius-full);outline:none;flex:1;height:6px}.slider-range::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent-primary);cursor:pointer;width:18px;height:18px;box-shadow:0 0 8px var(--accent-primary-glow);transition:transform var(--transition-fast);border-radius:50%}.slider-range::-webkit-slider-thumb:hover{transform:scale(1.15)}.slider-value{font-family:var(--font-mono);text-align:right;min-width:48px;color:var(--accent-primary);font-size:.875rem;font-weight:600}.badge{border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.04em;align-items:center;gap:.375rem;padding:.25rem .625rem;font-size:.75rem;font-weight:600;display:inline-flex}.badge-success{background:var(--success-bg);color:var(--success)}.badge-warning{background:var(--warning-bg);color:var(--warning)}.badge-error{background:var(--error-bg);color:var(--error)}.badge-info{background:var(--info-bg);color:var(--info)}.badge-neutral{background:var(--bg-elevated);color:var(--text-secondary)}.progress-bar-track{background:var(--bg-tertiary);border-radius:var(--radius-full);width:100%;height:8px;overflow:hidden}.progress-bar-fill{background:linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));border-radius:var(--radius-full);height:100%;transition:width .2s ease-out}.grid-responsive{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;display:grid}@media (min-width:1024px){.grid-responsive{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}}@keyframes pulse-subtle{0%,to{opacity:1}50%{opacity:.6}}.animate-pulse{animation:2s cubic-bezier(.4,0,.6,1) infinite pulse-subtle}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-spin{animation:1s linear infinite spin}