:root {--primary-green: #198754; --light-green: #d1e7dd; --dark-green: #0f5132; --bottom-nav-h: 60px; --footer-bg: #0b3d26; --bs-primary: #198754; --bs-primary-rgb: 25, 135, 84; --bs-link-color: #198754; --bs-link-color-rgb: 25, 135, 84; --bs-link-hover-color: #0f5132; --bs-link-hover-color-rgb: 15, 81, 50;}
[data-bs-theme="dark"] {--light-green: #0f5132; --dark-green: #75b798; --bs-link-color: #75b798; --bs-link-color-rgb: 117, 183, 152; --bs-link-hover-color: #a3cfbb; --bs-link-hover-color-rgb: 163, 207, 187;}
.btn-primary {--bs-btn-bg: #198754; --bs-btn-border-color: #198754; --bs-btn-hover-bg: #157347; --bs-btn-hover-border-color: #146c43; --bs-btn-active-bg: #146c43; --bs-btn-active-border-color: #13653f; --bs-btn-disabled-bg: #198754; --bs-btn-disabled-border-color: #198754;}
.btn-outline-primary {--bs-btn-color: #198754; --bs-btn-border-color: #198754; --bs-btn-hover-bg: #198754; --bs-btn-hover-border-color: #198754; --bs-btn-active-bg: #198754; --bs-btn-active-border-color: #198754;}
.form-control:focus, .form-select:focus {border-color: #198754; box-shadow: 0 0 0 .25rem rgba(25, 135, 84, .25);}
.form-check-input:checked {background-color: #198754; border-color: #198754;}
.nav-pills {--bs-nav-pills-link-active-bg: #198754;}
.badge {font-size: 0.75em;}
.bg-green-soft {background-color: var(--light-green);}
.text-green-dark {color: var(--dark-green);}
body {padding-top: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));}
#app {min-height: 60vh; outline: none;}
#top-nav .nav-link.active {color: var(--primary-green); font-weight: 600;}
#top-nav {position: fixed; top: 0; left: 0; right: 0; z-index: 1030; display: flex; height: calc(var(--bottom-nav-h) + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); background-color: var(--bs-body-bg); border-top: 1px solid var(--bs-border-color); box-shadow: 0 -2px 8px rgba(0, 0, 0, .06);}
#navMenu {background-color: var(--bs-body-bg); }
.bottom-nav {position: fixed; bottom: 0; left: 0; right: 0; z-index: 1030; display: flex; height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background-color: var(--bs-body-bg); border-top: 1px solid var(--bs-border-color); box-shadow: 0 -2px 8px rgba(0, 0, 0, .06);}
.bottom-nav a {flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 0.75rem; color: var(--bs-secondary-color); text-decoration: none;}
.bottom-nav a i {font-size: 1.35rem; line-height: 1;}
.bottom-nav a.active {color: var(--primary-green); font-weight: 600;}
.site-footer {background-color: var(--footer-bg);}
.site-footer a {color: rgba(255, 255, 255, .75); text-decoration: none; display: inline-block; padding: .2rem 0;}
.site-footer a:hover {color: #fff;}
.footer-muted {color: rgba(255, 255, 255, .65);}
.toast-container {margin-top: 56px; z-index: 1090;}
@media (min-width: 992px) {#app {min-height: 70vh;}}
.auth-hero {background: linear-gradient(135deg, #0f5132 0%, #198754 100%); color: #fff;}
.strength {height: 6px; border-radius: 3px; background-color: var(--bs-secondary-bg); overflow: hidden;}
.strength span {display: block; height: 100%; width: 0; transition: width .25s, background-color .25s;}
.input-group .btn-outline-secondary {border-color: var(--bs-border-color);}
.date-strip {display: flex; gap: .5rem; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: .5rem; -webkit-overflow-scrolling: touch;}
.date-strip .btn {flex: 0 0 auto; min-width: 4.5rem; line-height: 1.2; scroll-snap-align: center;}
.crest{width:28px;height:28px;border-radius:50%;object-fit:contain;flex:0 0 auto}
.crest-lg{width:54px;height:54px}
.crest-fb{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;font-size:.7rem;font-weight:700;color:#fff}
.match-card{transition:.15s}
.match-card:hover{border-color:var(--bs-success)}
.team{font-size:.95rem;line-height:1.2}
.match-time{min-width:4rem;font-weight:600;font-size:.85rem}
.league-title{font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;color:var(--bs-secondary-color)}
.tip-box{margin-top:.5rem;padding:.75rem;border:1px solid var(--bs-border-color);border-radius:.5rem;background:var(--bs-tertiary-bg)}
.tip-box.vip{border-color:#ffc107}
.prob-bar{height:7px}
.market-value{font-weight:600}
.no-capture {position: relative; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;}
.capture-mark {position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; pointer-events: none; background-repeat: repeat;}
.capture-hide .no-capture > *:not(.capture-mark) {filter: blur(14px);}
@media print {.no-capture {display: none !important;}}
.plan-card {height: 100%;}
.plan-card.featured {border: 2px solid var(--primary-green);}
.price {font-size: 2.25rem; font-weight: 700; line-height: 1.1;}
.feature-list li {padding: .25rem 0;}
.avatar {display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background-color: var(--light-green); color: var(--dark-green); font-size: 1.4rem; font-weight: 700;}
.link-box {word-break: break-all;}
.stat-num {font-size: 1.75rem; font-weight: 700; line-height: 1.1;}
.admin-table th {white-space: nowrap; cursor: pointer; user-select: none;}
.admin-table td {max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.admin-tabs {flex-wrap: nowrap; overflow-x: auto; padding-bottom: .25rem;}
.admin-tabs .nav-link {white-space: nowrap;}
.help-fab {position: fixed; right: 1rem; bottom: calc(var(--bottom-nav-h) + 1rem + env(safe-area-inset-bottom)); z-index: 1040; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 0; border-radius: 50%; background-color: var(--primary-green); color: #fff; font-size: 1.4rem; box-shadow: 0 4px 12px rgba(0, 0, 0, .25);}
.help-fab:hover {background-color: #157347;}
.help-panel {position: fixed; right: 1rem; bottom: calc(var(--bottom-nav-h) + 4.5rem + env(safe-area-inset-bottom)); z-index: 1050; width: min(380px, calc(100vw - 2rem)); max-height: calc(100vh - var(--bottom-nav-h) - 7rem); overflow-y: auto;}