:root { --bg:#09090b; --card:#121216; --sidebar:#020617; --accent:#22c55e; --text-main:#fafafa; --text-muted:#a1a1aa; --border:#27272a; --font:'Plus Jakarta Sans', sans-serif; }
* { margin:0; padding:0; box-sizing:border-box; -webkit-font-smoothing:antialiased; }
body { background:var(--bg); color:var(--text-main); font-family:var(--font); height:100vh; overflow:hidden; }
.app-container { display:flex; height:100vh; }
.sidebar { width:260px; background:var(--sidebar); border-right:1px solid var(--border); padding:32px 24px; overflow-y:auto; flex-shrink: 0; }
.brand { display:flex; align-items:center; gap:12px; margin-bottom:40px; font-size:20px; font-weight:800; }
.logo-icon { width:32px; height:32px; background:var(--accent); color:#000; display:flex; align-items:center; justify-content:center; border-radius:8px; font-weight:800; }
.nav-label { font-size:10px; color:var(--text-muted); text-transform:uppercase; margin-bottom:15px; font-weight:700; }
.nav-list { list-style:none; display:flex; flex-direction:column; gap:8px; }
.nav-item { display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:12px; color:var(--text-muted); text-decoration:none; font-size:14px; font-weight:600; transition:0.2s; cursor:pointer; }
.nav-item:hover { background:rgba(255,255,255,0.05); color:#fff; }
.nav-item.active { background:var(--accent); color:#000; }
.nav-item.pro { border:1px solid #fbbf24; color:#fbbf24; margin-top:8px; }
.main-content { flex:1; overflow-y:auto; padding:40px; position:relative; }
header { display:flex; justify-content:space-between; align-items:center; margin-bottom:40px; }
.btn-auth { background:var(--accent); color:#000; border:none; padding:10px 20px; border-radius:10px; font-weight:800; cursor:pointer; transition:0.3s; }
.btn-auth:hover { transform:scale(1.05); }
.accuracy-card { background:rgba(34,197,94,0.1); border:1px solid rgba(34,197,94,0.2); padding:12px 20px; border-radius:16px; display:flex; align-items:center; gap:12px; }
.accuracy-label { font-size:10px; color:var(--text-muted); font-weight:700; text-transform:uppercase; }
.accuracy-value { color:var(--accent); font-weight:800; font-size:18px; }
.plan-tag { background:rgba(34,197,94,0.1); color:var(--accent); padding:6px 14px; border-radius:20px; font-size:11px; font-weight:800; border:1px solid rgba(34,197,94,0.2); }
.cards-container { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:24px; }
.game-card { background:var(--card); border:1px solid var(--border); border-radius:24px; padding:24px; text-align:center; transition:0.3s; }
.game-card:hover { border-color:var(--accent); transform:translateY(-4px); }
.team-logo { width:45px; height:45px; margin-bottom:8px; object-fit:contain; }
.btn-analyze { width:100%; padding:12px; background:#ffffff05; border:1px solid var(--border); border-radius:12px; color:#fff; cursor:pointer; font-weight:700; margin-top: 15px; font-size: 11px; }
.btn-analyze:hover { background:var(--accent); color:#000; }
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.85); backdrop-filter:blur(15px); justify-content:center; align-items:center; z-index:999; }
.mvd-box { background: #121216; border: 1px solid #27272a; padding: 30px; border-radius: 20px; width: 90%; max-width: 400px; text-align: center; }
.mvd-input { width: 100%; padding: 14px; margin: 10px 0; background: #09090b; border: 1px solid #27272a; border-radius: 10px; color: #fff; outline: none; }

.mobile-nav { display:none; position:fixed; bottom:0; left:0; right:0; background:#020617; border-top:1px solid #27272a; padding:12px 0; z-index:100; justify-content:space-around; }
.mobile-nav-item { background:none; border:none; color:#a1a1aa; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:10px; font-weight:700; cursor:pointer; }
.mobile-nav-item.active { color:var(--accent); }

@media (max-width: 768px) {
    .sidebar { display:none; }
    .mobile-nav { display:flex; }
    .main-content { padding:20px 20px 100px 20px; }
    .cards-container { grid-template-columns:1fr; }
}

/* EFEITOS DE ANIMAÇÃO LIVE */
@keyframes pulseLive { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } }
.live-blink { animation: pulseLive 1.5s infinite; color: #ef4444; font-weight: 900; font-size: 10px; display: flex; align-items: center; gap: 4px; justify-content: center; text-transform: uppercase; }
.live-score { font-size: 24px; font-weight: 900; color: #fff; margin: 5px 0; }
.live-card { border-color: #ef4444 !important; box-shadow: 0 0 15px rgba(239,68,68,0.1); }