* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Roboto, Arial, sans-serif; }
body { background: #0d0d12; color: #f0f0f0; overflow-x: hidden; }
.screen { display: none; min-height: 100vh; }
.screen.active { display: flex; }

#login-screen { align-items: center; justify-content: center; background: radial-gradient(circle at top, #1b1b2f, #0d0d12 70%); }
.login-box { background: #16161f; padding: 40px; border-radius: 12px; width: 380px; text-align: center; box-shadow: 0 0 30px rgba(0,0,0,0.5); }
.login-box h1 { color: #4dd0e1; margin-bottom: 4px; }
.subtitle { color: #999; font-size: 13px; margin-bottom: 20px; }
.login-box input { width: 100%; padding: 12px; margin-bottom: 12px; border: 1px solid #333; border-radius: 6px; background: #0d0d12; color: #fff; font-size: 14px; }
.login-box input:focus { outline: none; border-color: #4dd0e1; }
#btn-login { width: 100%; padding: 12px; border: none; border-radius: 6px; background: #4dd0e1; color: #0d0d12; font-weight: bold; font-size: 15px; cursor: pointer; }
#btn-login:hover { background: #26c6da; }
.error-msg { color: #ff5252; font-size: 13px; margin-top: 10px; min-height: 16px; }

#main-screen { flex-direction: column; width: 100%; }
#top-nav { display: flex; align-items: center; gap: 10px; padding: 14px 20px; background: #16161f; border-bottom: 1px solid #262636; }
.nav-btn { background: transparent; border: none; color: #999; font-size: 15px; padding: 8px 16px; border-radius: 6px; cursor: pointer; }
.nav-btn.active, .nav-btn:focus { background: #4dd0e1; color: #0d0d12; font-weight: bold; }
#account-info { display: flex; align-items: center; gap: 18px; margin-left: 20px; font-size: 12px; color: #999; }
.badge { padding: 4px 10px; border-radius: 12px; font-weight: bold; font-size: 11px; text-transform: uppercase; background: #333; color: #ccc; }
.badge.active { background: #1b5e20; color: #a5d6a7; }
.badge.expired { background: #5e1b1b; color: #ff8a80; }
.badge.expiring-soon { background: #5e4a1b; color: #ffd54f; }
#btn-logout { margin-left: auto; background: transparent; border: 1px solid #333; color: #ccc; padding: 8px 16px; border-radius: 6px; cursor: pointer; }

#content-body { display: flex; flex: 1; overflow: hidden; }
#categories-panel { width: 260px; background: #12121a; padding: 20px; overflow-y: auto; border-right: 1px solid #262636; }
#categories-panel h3, #streams-panel h3 { color: #4dd0e1; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 14px; }
#categories-list { list-style: none; }
#categories-list li { padding: 10px 12px; margin-bottom: 4px; border-radius: 6px; cursor: pointer; font-size: 14px; color: #ccc; }
#categories-list li:hover, #categories-list li.active, #categories-list li:focus { background: #262636; color: #4dd0e1; outline: none; }
#streams-panel { flex: 1; padding: 20px; overflow-y: auto; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.stream-card { background: #16161f; border-radius: 8px; padding: 14px; cursor: pointer; text-align: center; border: 2px solid transparent; }
.stream-card:hover, .stream-card:focus { border-color: #4dd0e1; transform: scale(1.03); outline: none; }
.stream-card img { width: 100%; height: 90px; object-fit: contain; margin-bottom: 8px; background: #0d0d12; border-radius: 4px; }
.stream-card span { font-size: 13px; color: #ddd; }

#player-screen { flex-direction: column; background: #000; padding: 20px; }
#btn-back-player, #btn-fullscreen { align-self: flex-start; background: #16161f; border: none; color: #4dd0e1; padding: 10px 18px; border-radius: 6px; cursor: pointer; margin-bottom: 12px; margin-right: 10px; display: inline-block; }
#player-title { color: #fff; margin-bottom: 12px; }
#video-player { width: 100%; max-height: 80vh; background: #000; border-radius: 8px; }
.debug-msg { color: #ffab40; font-size: 12px; margin-top: 10px; white-space: pre-wrap; word-break: break-all; }

.mkv-fallback { margin-top: 20px; padding: 20px; background: #16161f; border: 1px solid #333; border-radius: 8px; text-align: center; color: #ddd; }
.mkv-fallback p { margin-bottom: 14px; color: #ffab91; }
.mkv-btn { display: inline-block; margin: 0 6px; padding: 10px 18px; background: #4dd0e1; color: #0d0d12; border: none; border-radius: 6px; font-weight: bold; text-decoration: none; cursor: pointer; }
.mkv-btn:hover { background: #26c6da; }

:focus { outline: 3px solid #4dd0e1 !important; }