body { font-family: 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', sans-serif; background: #0f172a; color: #e2e8f0; }
::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: #1e293b; } ::-webkit-scrollbar-thumb { background: #f59e0b; border-radius: 3px; }
@keyframes pulse-red { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } 50% { box-shadow: 0 0 8px 2px rgba(239,68,68,0.5); } }
.big-money { animation: pulse-red 2s infinite; }
@keyframes fadeSlide { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
.fade-in { animation: fadeSlide 0.35s ease forwards; }
@keyframes confettiFall { 0% { transform: translateY(-20px) rotate(0deg); opacity:1; } 100% { transform: translateY(100vh) rotate(720deg); opacity:0; } }
.confetti-piece { position:fixed; width:8px; height:8px; border-radius:2px; pointer-events:none; z-index:9999; animation: confettiFall 2.5s ease-in forwards; }
@keyframes toastIn { from { transform: translateX(120%); opacity:0; } to { transform: translateX(0); opacity:1; } }
@keyframes toastOut { from { transform: translateX(0); opacity:1; } to { transform: translateX(120%); opacity:0; } }
.toast { animation: toastIn 0.3s ease forwards; }
.toast.hide { animation: toastOut 0.3s ease forwards; }
.rank-bar { transition: width 0.6s cubic-bezier(0.34,1.56,0.64,1); }
.detail-section { background: linear-gradient(to bottom, #1e293b, #0f172a); border-left: 3px solid #f59e0b; }
.badge-card { transition: transform 0.2s, box-shadow 0.2s; }
.badge-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(245,158,11,0.3); }
.gold { color: #f59e0b; }
.tab-active { background: #f59e0b; color: #0f172a; font-weight: 700; }
.tab-inactive { background: #1e293b; color: #94a3b8; }
input, select { background: #1e293b !important; color: #e2e8f0 !important; border-color: #334155 !important; }
input::placeholder { color: #64748b !important; }
input:focus { outline: none; border-color: #f59e0b !important; box-shadow: 0 0 0 2px rgba(245,158,11,0.2); }
.row-hover:hover { background: #1e293b; cursor: pointer; }
.spinner { border: 3px solid #1e293b; border-top-color: #f59e0b; border-radius: 50%; width: 24px; height: 24px; animation: spin 0.7s linear infinite; display:inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.timeline-bar { height: 6px; border-radius: 3px; background: #f59e0b; transition: width 0.5s ease; }