* { box-sizing: border-box; }
body { font-family: 'Inter', -apple-system, sans-serif; background: #0a0a0a; color: #f0f0f0; margin: 0; padding: 0; }
.page { display: none; }
#page-login.active { display: flex; min-height: 100vh; align-items: center; justify-content: center; background: radial-gradient(ellipse at 60% 40%, #1a0000 0%, #0a0a0a 70%); }
#page-app.active { display: flex; height: 100vh; overflow: hidden; }
.view { display: none; }
.view.active { display: block; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.animate-in { animation: fadeUp 0.25s ease; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 8px; cursor: pointer; color: #777; font-size: 14px; font-weight: 500; transition: all 0.15s; }
.nav-item:hover { background: #1e1e1e; color: #f0f0f0; }
.nav-item.active { background: #DD0000; color: #fff; }
.card { background: #161616; border: 1px solid #242424; border-radius: 12px; }
.input-field { width: 100%; background: #0d0d0d; border: 1px solid #2a2a2a; border-radius: 10px; padding: 12px 16px; color: #f0f0f0; font-size: 14px; outline: none; transition: border-color 0.15s; font-family: inherit; }
.input-field:focus { border-color: #DD0000; }
.input-field::placeholder { color: #444; }
.btn-orange { background: #DD0000; border: none; color: white; border-radius: 10px; padding: 12px 20px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.15s; font-family: inherit; }
.btn-orange:hover { background: #BB0000; }
.avatar { border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; }
.badge-orange { background: rgba(221,0,0,0.12); color: #DD0000; border: 1px solid rgba(221,0,0,0.25); }
.badge-green { background: rgba(34,197,94,0.1); color: #22c55e; border: 1px solid rgba(34,197,94,0.2); }
.badge-red { background: rgba(239,68,68,0.1); color: #ef4444; border: 1px solid rgba(239,68,68,0.2); }
.badge-blue { background: rgba(59,130,246,0.1); color: #3b82f6; border: 1px solid rgba(59,130,246,0.2); }
.badge-purple { background: rgba(168,85,247,0.1); color: #a855f7; border: 1px solid rgba(168,85,247,0.2); }
.progress-bar { height: 5px; background: #222; border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; background: #DD0000; border-radius: 3px; transition: width 0.6s ease; }
#main-scroll { flex: 1; overflow-y: auto; }
#main-scroll::-webkit-scrollbar { width: 5px; }
#main-scroll::-webkit-scrollbar-track { background: #0a0a0a; }
#main-scroll::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 3px; }
.stats-table { width: 100%; border-collapse: collapse; }
.stats-table th { background: #0d0d0d; padding: 10px 14px; text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #666; cursor: pointer; user-select: none; white-space: nowrap; }
.stats-table th:hover { color: #DD0000; }
.stats-table td { padding: 12px 14px; border-bottom: 1px solid #1a1a1a; font-size: 14px; }
.stats-table tbody tr:hover td { background: #161616; }
.stats-table tbody tr.me td { background: rgba(221,0,0,0.06); }
.film-card { background: #161616; border: 1px solid #242424; border-radius: 10px; overflow: hidden; cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
.film-card:hover { border-color: #DD0000; transform: translateY(-2px); }
.play-btn { width: 44px; height: 44px; background: rgba(221,0,0,0.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform 0.15s; flex-shrink: 0; }
.film-card:hover .play-btn { transform: scale(1.1); }
.tab-btn { padding: 7px 16px; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; border: none; background: none; color: #666; font-family: inherit; transition: all 0.15s; }
.tab-btn:hover:not(.active) { color: #ccc; }
.tab-btn.active { background: #DD0000; color: #fff; }
.game-row { background: #161616; border: 1px solid #242424; border-radius: 10px; padding: 14px 18px; display: flex; align-items: center; gap: 14px; margin-bottom: 8px; transition: border-color 0.15s; }
.game-row:hover { border-color: #333; }
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.88); display: none; align-items: center; justify-content: center; z-index: 1000; }
.modal-overlay.open { display: flex; }
.modal-box { background: #161616; border: 1px solid #2a2a2a; border-radius: 16px; overflow: hidden; }
#toast { position: fixed; bottom: 24px; right: 24px; background: #1e1e1e; border: 1px solid #333; border-radius: 10px; padding: 13px 20px; font-size: 14px; z-index: 9999; transform: translateY(80px); opacity: 0; transition: all 0.3s; pointer-events: none; }
#toast.show { transform: translateY(0); opacity: 1; }
.demo-card { background: #0d0d0d; border: 1px solid #242424; border-radius: 8px; padding: 9px 12px; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: border-color 0.15s; }
.demo-card:hover { border-color: #DD0000; }