.nav-btn { padding: 4px 12px; border-radius: 4px; font-size: 14px; color: #9CA3AF; cursor: pointer; background: none; border: none; transition: color 0.2s; }
.nav-btn:hover { color: #00FFFF; }
.nav-btn.active { color: #00FFFF; border-bottom: 2px solid #00FFFF; }
.stat-card { background: #0A0A1A; border: 1px solid #1A1A3A; border-radius: 8px; padding: 16px; }
.stat-value { font-size: 30px; font-weight: bold; color: #00FFFF; }
.stat-label { font-size: 14px; color: #9CA3AF; margin-top: 4px; }
.data-table { width: 100%; font-size: 14px; border-collapse: collapse; }
.data-table th { text-align: left; color: #9CA3AF; padding-bottom: 8px; border-bottom: 1px solid #1A1A3A; font-weight: normal; }
.data-table td { padding: 8px 4px; border-bottom: 1px solid rgba(26,26,58,0.5); }
.data-table tr:hover td { background: rgba(0,255,255,0.03); }
.action-btn { padding: 4px 12px; font-size: 12px; border-radius: 4px; border: 1px solid #00FFFF; color: #00FFFF; background: none; cursor: pointer; transition: all 0.2s; }
.action-btn:hover { background: #00FFFF; color: #050510; }
.action-btn-danger { padding: 4px 12px; font-size: 12px; border-radius: 4px; border: 1px solid #EF4444; color: #F87171; background: none; cursor: pointer; transition: all 0.2s; }
.action-btn-danger:hover { background: #EF4444; color: white; }
.badge { padding: 2px 8px; font-size: 12px; border-radius: 9999px; display: inline-block; }
.badge-common { background: #374151; color: #D1D5DB; }
.badge-uncommon { background: #064E3B; color: #6EE7B7; }
.badge-rare { background: #1E3A5F; color: #93C5FD; }
.badge-epic { background: #4C1D95; color: #C4B5FD; }
.badge-legendary { background: #78350F; color: #FCD34D; }
.player-card { background: #0A0A1A; border: 1px solid #1A1A3A; border-radius: 8px; padding: 20px; margin-bottom: 16px; }
.section-title { font-size: 16px; font-weight: 600; color: #00FFFF; margin-bottom: 12px; border-bottom: 1px solid #1A1A3A; padding-bottom: 8px; }
.form-input { background: #050510; border: 1px solid #1A1A3A; border-radius: 6px; padding: 8px 12px; color: #E5E7EB; width: 100%; outline: none; }
.form-input:focus { border-color: #00FFFF; }
.form-select { background: #050510; border: 1px solid #1A1A3A; border-radius: 6px; padding: 8px 12px; color: #E5E7EB; width: 100%; outline: none; }
.form-label { font-size: 13px; color: #9CA3AF; margin-bottom: 4px; display: block; }
.toast { position: fixed; bottom: 20px; right: 20px; padding: 12px 20px; border-radius: 8px; font-size: 14px; z-index: 100; animation: slideIn 0.3s ease; }
.toast-success { background: #064E3B; color: #6EE7B7; border: 1px solid #059669; }
.toast-error { background: #7F1D1D; color: #FCA5A5; border: 1px solid #DC2626; }
@keyframes slideIn { from { transform: translateX(100px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.clickable { cursor: pointer; }
.clickable:hover { background: rgba(0,255,255,0.05); }
.hidden { display: none; }