:root { --accent: #55e6bc; --accent-strong: #25c999; --accent-soft: rgba(85,230,188,.12); --ink: #f4f7fb; --muted: #93a0b8; --canvas: #080b14; --line: rgba(172,191,222,.13); }
* { -webkit-font-smoothing: antialiased; }
body { background: radial-gradient(900px 500px at 3% -13%,rgba(85,230,188,.11),transparent 60%),radial-gradient(850px 450px at 96% 0%,rgba(88,106,236,.13),transparent 62%),var(--canvas); color: var(--ink); }
body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.25; background-image:linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(to bottom,black,transparent 65%); }
.app-navbar { min-height:72px; border-bottom-color:var(--line)!important; background:rgba(8,11,20,.82)!important; box-shadow:0 8px 28px rgba(0,0,0,.14); }
.navbar-brand { display:flex; align-items:center; gap:.65rem; letter-spacing:-.04em; }.navbar-brand small { margin-left:.15rem; color:var(--muted); font-size:.56rem; font-weight:800; letter-spacing:.13em; }.brand-mark { display:grid; place-items:center; width:32px; height:32px; color:#07130f; background:linear-gradient(145deg,#7affd4,var(--accent-strong)); border-radius:10px; box-shadow:0 5px 16px rgba(85,230,188,.22); }.brand-mark i { color:inherit!important; font-size:1rem; }
.app-nav-list { gap:.18rem; }.app-navbar .nav-link { color:#aeb9ce!important; font-size:.79rem; padding:.52rem .66rem!important; }.app-navbar .nav-link i { color:var(--muted); margin-right:.34rem; }.app-navbar .nav-link:hover { color:var(--ink)!important; background:rgba(255,255,255,.055); }.app-navbar .nav-link.active { color:var(--accent)!important; background:var(--accent-soft); }.app-navbar .nav-link.active i { color:var(--accent); }.navbar-toggler { border-color:var(--line); }.navbar-toggler-icon { filter:invert(1); }
.app-main { min-height:calc(100vh - 173px); padding-top:2.35rem; padding-bottom:3rem; }.dashboard-hero { display:flex; align-items:end; justify-content:space-between; gap:1.5rem; padding:2rem; border:1px solid var(--line); border-radius:18px; background:linear-gradient(110deg,rgba(18,27,46,.94),rgba(16,26,40,.9) 58%,rgba(18,65,59,.62)); box-shadow:0 18px 42px rgba(0,0,0,.15); }.dashboard-hero h1 { font-size:clamp(1.85rem,4vw,2.6rem); font-weight:780; }.dashboard-hero p { max-width:650px; }.hero-status { flex:0 0 auto; padding:.54rem .75rem; color:#c6f9e8; background:rgba(85,230,188,.1); border:1px solid rgba(85,230,188,.2); border-radius:999px; font-size:.78rem; font-weight:700; }.hero-status span { display:inline-block; width:7px; height:7px; margin-right:.35rem; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(85,230,188,.12); }
h1,h2,h3,h4,h5,h6 { letter-spacing:-.035em; }h1.display-5,h1.display-6 { font-weight:750; }.text-muted,.text-secondary { color:var(--muted)!important; }.text-nba { color:var(--accent)!important; }.bg-nba { background:var(--accent)!important; color:#052119!important; }
.card,.prediction-card { border:1px solid var(--line); border-radius:16px; background:linear-gradient(145deg,rgba(23,29,45,.94),rgba(14,19,31,.96)); box-shadow:0 12px 30px rgba(0,0,0,.12); }.card:hover { box-shadow:0 16px 38px rgba(0,0,0,.2); }.card-header { padding:1rem 1.25rem; border-bottom-color:var(--line); color:var(--ink); }.card-body { padding:1.25rem; }
.stat-card { position:relative; overflow:hidden; min-height:148px; text-align:left; border:1px solid var(--line); border-radius:16px; background:linear-gradient(135deg,rgba(22,29,46,.96),rgba(13,18,29,.96)); box-shadow:0 12px 30px rgba(0,0,0,.12); }.stat-card::after { content:""; position:absolute; width:96px; height:96px; top:-42px; right:-25px; border:1px solid rgba(85,230,188,.25); border-radius:50%; box-shadow:0 0 0 18px rgba(85,230,188,.035); }.stat-card .stat-value { position:relative; font-size:2.65rem; color:var(--ink); line-height:1.05; }.stat-card .stat-label { position:relative; margin-top:.55rem; font-size:.67rem; font-weight:750; color:var(--muted); letter-spacing:.12em; }
.btn { border-radius:10px; font-weight:650; }.btn-nba { background:linear-gradient(135deg,#70f1c8,var(--accent-strong)); box-shadow:0 8px 18px rgba(37,201,153,.18); }.btn-nba:hover { box-shadow:0 10px 24px rgba(37,201,153,.3); }.btn-outline-nba { border-color:rgba(85,230,188,.65); color:var(--accent); }.btn-outline-nba:hover { background:var(--accent); border-color:var(--accent); }.btn-outline-secondary { border-color:var(--line); }
.alert { border-radius:13px; border-color:var(--line); }.alert-custom { background:rgba(85,230,188,.075); border-color:rgba(85,230,188,.22); color:#d6fbef; }.badge { border-radius:7px; padding:.42em .62em; font-weight:650; }.table { --bs-table-hover-bg:rgba(255,255,255,.035); --bs-table-border-color:var(--line); }.table thead th { padding:.85rem .75rem; border-bottom-color:rgba(85,230,188,.5); color:#bdc7d8; }.table td { vertical-align:middle; padding:.85rem .75rem; }.form-control,.form-select { color:var(--ink); background:rgba(6,10,18,.52); border-color:var(--line); border-radius:10px; }.form-control:focus,.form-select:focus { color:var(--ink); background:rgba(6,10,18,.8); border-color:var(--accent); box-shadow:0 0 0 .2rem rgba(85,230,188,.12); }.form-select option { background:#121827; }.progress { background:rgba(255,255,255,.08); border-radius:999px; }.progress-bar { background:linear-gradient(90deg,var(--accent-strong),#7affd4); }
.team-logo-lg { object-fit:contain; filter:drop-shadow(0 8px 10px rgba(0,0,0,.24)); }.game-card { overflow:hidden; border-left:3px solid var(--accent)!important; }.game-card .bg-dark,.game-card .bg-gradient-dark { background:rgba(4,8,15,.25)!important; }.game-card .border-secondary { border-color:var(--line)!important; }.factor-card,.prediction-stat { border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.028); }footer { background:rgba(10,14,24,.8); border-top-color:var(--line); margin-top:0; }
@media (max-width:1199px) { .app-navbar .nav-link { padding:.48rem!important; } }@media (max-width:991px) { .app-nav-list { padding:.8rem 0 .35rem; gap:.2rem; }.app-navbar .nav-link { padding:.68rem .7rem!important; } }@media (max-width:575px) { .app-main { padding-top:1.35rem; }.navbar-brand small { display:none; }.card-body { padding:1rem; }.dashboard-hero { align-items:flex-start; flex-direction:column; padding:1.4rem; } }