/**
 * Props Finder - Standalone CSS
 * Version: 1.0.0
 * Independent from AI Tips Pro
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-tap-highlight-color: transparent;
}

:root {
    --bg-primary: #000000;
    --bg-secondary: #0a0a0a;
    --bg-card: #111111;
    --bg-input: #1a1a1a;
    --bg-hover: #1f1f1f;

    --text-primary: #FFFFFF;
    --text-secondary: #999999;
    --text-tertiary: #666666;
    --text-disabled: #444444;

    --green: #00D26A;
    --green-dark: #00B058;
    --red: #FF4444;
    --red-dark: #CC3333;
    --yellow: #FFB800;
    --gray: #555555;

    --border: #1a1a1a;
    --border-light: #222222;
}

body {
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
}

/* ========== HEADER ========== */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border);
    padding: 12px 16px;
}

.header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
}

.logo-icon {
    color: var(--green);
    font-size: 20px;
}

.logo-text {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
}

.header-btn:hover, .header-btn.active {
    color: var(--green);
}

/* Search Bar */
.search-bar {
    position: relative;
    margin-bottom: 12px;
}

.search-bar input {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 16px 10px 40px;
    color: var(--text-primary);
    font-size: 14px;
}

.search-bar input::placeholder {
    color: var(--text-tertiary);
}

.search-bar input:focus {
    outline: none;
    border-color: var(--green);
}

.search-bar i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    font-size: 14px;
}

/* ========== FILTER DROPDOWNS ROW (estilo Props.Cash) ========== */
.filter-dropdowns-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}

.filter-dropdowns-row > * {
    flex: 1;
}

.filter-dropdown-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-dropdown-btn:hover:not(:disabled) {
    border-color: var(--green);
    color: var(--text-primary);
}

.filter-dropdown-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.filter-dropdown-btn.has-selection {
    border-color: var(--green);
    color: var(--green);
}

.filter-dropdown-btn i:first-child {
    font-size: 11px;
}

.filter-dropdown-btn i:last-child {
    font-size: 9px;
    margin-left: auto;
}

.filter-dropdown-btn span {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ========== GAME SELECTOR - Dropdown Compacto ========== */
.game-selector {
    display: flex;
    align-items: center;
    padding: 0;
}

.game-dropdown-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
}

.game-dropdown-btn:hover {
    border-color: var(--green);
    color: var(--text-primary);
}

.game-dropdown-btn.has-selection {
    border-color: var(--green);
    color: var(--green);
}

.game-dropdown-btn i:first-child {
    font-size: 11px;
}

.game-dropdown-btn span {
    flex: 1;
    text-align: left;
}

.game-dropdown-btn i:last-child {
    font-size: 9px;
}

/* ========== SORT MODAL OPTIONS ========== */
.sort-options-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 0;
}

.sort-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
}

.sort-option:hover {
    border-color: var(--green);
    background: var(--bg-hover);
}

.sort-option.selected {
    border-color: var(--green);
    background: rgba(0, 230, 118, 0.1);
}

.sort-option-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 16px;
}

.sort-option.selected .sort-option-icon {
    background: var(--green);
    color: var(--bg-primary);
}

.sort-option-info {
    flex: 1;
}

.sort-option-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.sort-option-desc {
    font-size: 11px;
    color: var(--text-secondary);
}

.sort-option-check {
    color: var(--green);
    font-size: 16px;
}

/* Game tag para lista mista de múltiplos jogos */
.game-tag {
    display: inline-block;
    padding: 2px 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 9px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-left: 4px;
    vertical-align: middle;
}

.mixed-games .player-row {
    border-bottom: 1px solid var(--border-light);
}

/* Legacy game selector styles */
.game-selector-old {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}

.game-selector::-webkit-scrollbar { display: none; }

.game-selector:empty {
    display: none;
}

.game-selector-btn {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 1px solid var(--border-light);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}

.game-selector-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.game-selector-btn.active {
    background: var(--green);
    color: var(--bg-primary);
    border-color: var(--green);
}

/* Game Status Badges */
.game-selector-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-direction: column;
}

.game-status-badge {
    font-size: 8px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.game-status-badge.live {
    background: var(--red);
    color: white;
    animation: pulse-live 1.5s infinite;
}

.game-status-badge.finished {
    background: var(--gray);
    color: var(--text-secondary);
}

.game-status-badge.scheduled {
    background: rgba(29, 185, 84, 0.15);
    color: var(--green);
    font-weight: 600;
}

.game-selector-btn.game-live {
    border-color: var(--red);
}

.game-selector-btn.game-finished {
    opacity: 0.6;
}

.game-selector-btn.game-finished:hover {
    opacity: 0.8;
}

@keyframes pulse-live {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ========== GAME SELECTOR MODAL ========== */
.game-selector-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2000;
}

.game-selector-overlay.active {
    display: block;
}

.game-selector-modal {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-primary);
    border-radius: 16px 16px 0 0;
    z-index: 2001;
    max-height: 80vh;
    overflow: hidden;
    animation: slideUp 0.3s ease;
}

.game-selector-modal.active {
    display: block;
}

.game-selector-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.game-selector-modal-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.game-selector-modal-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.game-selector-modal-content {
    padding: 16px 20px;
    overflow-y: auto;
    max-height: calc(80vh - 60px);
}

.game-checkbox-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    background: var(--bg-secondary);
    margin-bottom: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.game-checkbox-item:hover {
    background: var(--bg-hover);
}

.game-checkbox-item.selected {
    background: rgba(29, 185, 84, 0.15);
    border: 1px solid var(--green);
}

.game-checkbox {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
}

.game-checkbox-item.selected .game-checkbox {
    background: var(--green);
    border-color: var(--green);
}

.game-checkbox-item.selected .game-checkbox::after {
    content: '✓';
    color: var(--bg-primary);
    font-size: 12px;
    font-weight: bold;
}

.game-checkbox-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.game-checkbox-teams {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.game-checkbox-time {
    font-size: 11px;
    color: var(--text-secondary);
}

.game-checkbox-status {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}

/* All Games item */
.game-checkbox-item.all-games {
    background: transparent;
    border: 1px solid var(--border);
    margin-bottom: 16px;
}

.game-checkbox-item.all-games .all-games-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

/* Date Header */
.game-date-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    margin-top: 8px;
}

.game-date-header span {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.game-date-header .game-checkbox {
    width: 18px;
    height: 18px;
    border-radius: 50%;
}

.game-date-header.selected .game-checkbox {
    background: var(--green);
    border-color: var(--green);
}

.game-date-header.selected .game-checkbox::after {
    content: '✓';
    color: var(--bg-primary);
    font-size: 10px;
    font-weight: bold;
}

/* Games Grid (2 columns) */
.game-date-games {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 12px 0;
}

.game-date-games .game-checkbox-item {
    padding: 10px;
    margin-bottom: 0;
    background: transparent;
    border: none;
}

.game-date-games .game-checkbox-item.selected {
    background: transparent;
    border: none;
}

.game-date-games .game-checkbox {
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

.game-date-games .game-checkbox-teams {
    font-size: 13px;
}

.game-date-games .game-checkbox-time {
    font-size: 10px;
}

.game-date-games .game-checkbox-time .live {
    color: var(--red);
    font-weight: 600;
}

.game-date-games .game-checkbox-time .finished {
    color: var(--text-tertiary);
}

.game-checkbox-status.live {
    background: var(--red);
    color: white;
}

.game-checkbox-status.finished {
    background: var(--gray);
    color: var(--text-secondary);
}

.game-checkbox-status.scheduled {
    background: rgba(29, 185, 84, 0.15);
    color: var(--green);
}

/* Date Card Style */
.game-selector-btn.date-card {
    flex-direction: column;
    gap: 2px;
    min-width: 65px;
    text-align: center;
}

.date-card-day {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-tertiary);
    text-transform: uppercase;
}

.date-card-date {
    font-size: 13px;
    font-weight: 700;
}

.date-card-count {
    font-size: 9px;
    color: var(--text-tertiary);
}

.game-selector-btn.date-card.active .date-card-day,
.game-selector-btn.date-card.active .date-card-date,
.game-selector-btn.date-card.active .date-card-count {
    color: var(--bg-primary);
}

.game-selector-btn.date-card.has-selection {
    border-color: var(--green);
    background: rgba(29, 185, 84, 0.1);
}

.game-selector-btn.date-card.has-selection .date-card-day,
.game-selector-btn.date-card.has-selection .date-card-count {
    color: var(--green);
}

/* ========== INFO MODAL (Bottom Sheet) ========== */
.info-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 3000;
}

.info-modal-overlay.active {
    display: block;
}

.info-modal {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--card-bg);
    border-radius: 16px 16px 0 0;
    z-index: 3001;
    max-height: 70vh;
    overflow: hidden;
    animation: slideUp 0.3s ease;
}

.info-modal.active {
    display: block;
}

.info-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.info-modal-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.info-modal-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.info-modal-content {
    padding: 20px;
    overflow-y: auto;
    max-height: calc(70vh - 60px);
}

/* Info Modal Content Styles */
.info-section {
    margin-bottom: 20px;
}

.info-section:last-child {
    margin-bottom: 0;
}

.info-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.info-section-title i {
    color: var(--green);
    font-size: 16px;
}

.info-text {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 10px;
}

.info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.info-list-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: 8px;
    margin-bottom: 8px;
}

.info-list-item:last-child {
    margin-bottom: 0;
}

.info-list-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
}

.info-list-icon.green {
    background: rgba(29, 185, 84, 0.15);
    color: var(--green);
}

.info-list-icon.red {
    background: rgba(255, 68, 68, 0.15);
    color: var(--red);
}

.info-list-icon.orange {
    background: rgba(255, 152, 0, 0.15);
    color: #ff9800;
}

.info-list-icon.blue {
    background: rgba(33, 150, 243, 0.15);
    color: #2196f3;
}

.info-list-content {
    flex: 1;
}

.info-list-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.info-list-desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Impact Stats in Info Modal */
.info-impact-stats {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.info-impact-stat {
    flex: 1;
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 12px;
    text-align: center;
}

.info-impact-value {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
}

.info-impact-value.up {
    color: var(--green);
}

.info-impact-value.down {
    color: var(--red);
}

.info-impact-label {
    font-size: 11px;
    color: var(--text-tertiary);
    text-transform: uppercase;
}

/* ========== LEAGUE TABS ========== */
.league-tabs {
    display: flex;
    gap: 24px;
    padding: 0 16px;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.league-tabs::-webkit-scrollbar { display: none; }

.league-tab {
    padding: 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
}

.league-tab.active {
    color: var(--green);
}

.league-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--green);
}

/* ========== MARKET PILLS ========== */
.filter-section {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

.market-pills {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
}

.market-pills::-webkit-scrollbar { display: none; }

.market-pill {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-light);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
    flex-shrink: 0;
}

.market-pill:hover {
    background: var(--bg-hover);
}

.market-pill.active {
    background: var(--green);
    color: #000;
    border-color: var(--green);
}

/* Esportiva Pills - Cor diferenciada (roxo) */
.market-pill.esportiva {
    border-color: rgba(139, 92, 246, 0.4);
    color: rgba(139, 92, 246, 0.9);
}

.market-pill.esportiva:hover {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.6);
}

.market-pill.esportiva.active {
    background: rgba(139, 92, 246, 0.9);
    color: #fff;
    border-color: rgba(139, 92, 246, 1);
}

/* Q1 Pills - Cor ciano/azul */
.market-pill.q1 {
    border-color: rgba(6, 182, 212, 0.4);
    color: rgba(6, 182, 212, 0.9);
}

.market-pill.q1:hover {
    background: rgba(6, 182, 212, 0.15);
    border-color: rgba(6, 182, 212, 0.6);
}

.market-pill.q1.active {
    background: rgba(6, 182, 212, 0.9);
    color: #000;
    border-color: rgba(6, 182, 212, 1);
}

/* Team Pills - Cor dourada */
.market-pill.esportiva.team {
    border-color: rgba(245, 158, 11, 0.4);
    color: rgba(245, 158, 11, 0.9);
}

.market-pill.esportiva.team:hover {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.6);
}

.market-pill.esportiva.team.active {
    background: rgba(245, 158, 11, 0.9);
    color: #000;
    border-color: rgba(245, 158, 11, 1);
}

/* Pill Divider */
.pill-divider {
    color: var(--text-secondary);
    font-size: 16px;
    opacity: 0.3;
    display: flex;
    align-items: center;
    padding: 0 4px;
    flex-shrink: 0;
}

/* ========== QUICK FILTERS - TOP PROPS ========== */
.quick-filters-section {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
}

.quick-filters-pills {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.quick-filters-pills::-webkit-scrollbar { display: none; }

.quick-filter-pill {
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    background: #000;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.quick-filter-pill .pill-emoji {
    font-size: 16px;
    line-height: 1;
}

.quick-filter-pill .pill-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-style: italic;
}

.quick-filter-pill .pill-highlight {
    color: #00d4aa;
    font-weight: 900;
}

.quick-filter-pill:hover {
    background: #111;
    border-color: rgba(0, 212, 170, 0.5);
    transform: translateY(-1px);
}

.quick-filter-pill.active {
    background: #000;
    border-color: #00d4aa;
    box-shadow: 0 0 12px rgba(0, 212, 170, 0.3);
}

.quick-filter-pill.active .pill-highlight {
    color: #00ffcc;
}

/* Melhor do Dia - Destaque especial dourado */
.quick-filter-pill.best-of-day {
    background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
    border: 1px solid rgba(255, 215, 0, 0.4);
}

.quick-filter-pill.best-of-day .pill-highlight {
    color: #ffd700;
}

.quick-filter-pill.best-of-day .pill-emoji {
    filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.5));
}

.quick-filter-pill.best-of-day:hover {
    border-color: rgba(255, 215, 0, 0.7);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.2);
}

.quick-filter-pill.best-of-day.active {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 165, 0, 0.1) 100%);
    border-color: #ffd700;
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.3);
}

.quick-filter-pill.best-of-day.active .pill-highlight {
    color: #ffec8b;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

/* Oportunidades - Destaque especial azul elétrico */
.quick-filter-pill.opportunities {
    background: linear-gradient(135deg, #1a1a2e 0%, #0d0d1a 100%);
    border: 1px solid rgba(0, 191, 255, 0.4);
}

.quick-filter-pill.opportunities .pill-highlight {
    color: #00bfff;
}

.quick-filter-pill.opportunities .pill-emoji {
    filter: drop-shadow(0 0 4px rgba(0, 191, 255, 0.5));
}

.quick-filter-pill.opportunities:hover {
    border-color: rgba(0, 191, 255, 0.7);
    box-shadow: 0 0 12px rgba(0, 191, 255, 0.2);
}

.quick-filter-pill.opportunities.active {
    background: linear-gradient(135deg, rgba(0, 191, 255, 0.15) 0%, rgba(0, 127, 255, 0.1) 100%);
    border-color: #00bfff;
    box-shadow: 0 0 16px rgba(0, 191, 255, 0.3);
}

.quick-filter-pill.opportunities.active .pill-highlight {
    color: #7fdbff;
    text-shadow: 0 0 8px rgba(0, 191, 255, 0.5);
}

/* Top Score - Verde esmeralda para pilares */
.quick-filter-pill.top-score {
    border-color: rgba(16, 185, 129, 0.4);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(5, 150, 105, 0.05) 100%);
}

.quick-filter-pill.top-score .pill-highlight {
    color: #10b981;
}

.quick-filter-pill.top-score .pill-emoji {
    filter: none;
}

.quick-filter-pill.top-score:hover {
    border-color: rgba(16, 185, 129, 0.6);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(5, 150, 105, 0.08) 100%);
}

.quick-filter-pill.top-score.active {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.1) 100%);
    border-color: #10b981;
    box-shadow: 0 0 16px rgba(16, 185, 129, 0.3);
}

.quick-filter-pill.top-score.active .pill-highlight {
    color: #34d399;
    text-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
}

/* Badge de Score (Pilares) nos cards */
.score-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    margin-left: 6px;
}

.score-badge.elite {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(220, 38, 38, 0.15) 100%);
    border: 1px solid rgba(239, 68, 68, 0.5);
    color: #f87171;
}

.score-badge.forte {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(245, 158, 11, 0.15) 100%);
    border: 1px solid rgba(251, 191, 36, 0.5);
    color: #fbbf24;
}

.score-badge.solido {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(5, 150, 105, 0.15) 100%);
    border: 1px solid rgba(16, 185, 129, 0.5);
    color: #34d399;
}

.score-badge.marginal {
    background: linear-gradient(135deg, rgba(156, 163, 175, 0.2) 0%, rgba(107, 114, 128, 0.15) 100%);
    border: 1px solid rgba(156, 163, 175, 0.4);
    color: #9ca3af;
}

/* Badge de oportunidade nos cards */
.opportunity-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    background: linear-gradient(135deg, rgba(0, 191, 255, 0.2) 0%, rgba(0, 127, 255, 0.15) 100%);
    border: 1px solid rgba(0, 191, 255, 0.4);
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    color: #00bfff;
    text-transform: uppercase;
    margin-left: 6px;
}

.opportunity-badge .badge-icon {
    font-size: 10px;
}

/* Card de oportunidade vazio */
.no-opportunities-message {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-secondary);
}

.no-opportunities-message .empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.no-opportunities-message .empty-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.no-opportunities-message .empty-desc {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Indicador de boost nos outros cards */
.prop-opportunity-indicator {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    color: #00bfff;
    font-size: 12px;
}

/* ========== CARDS DE OPORTUNIDADES - Layout Expandido ========== */
.opportunities-view .player-row {
    padding: 16px 14px;
    margin-bottom: 12px;
    background: linear-gradient(135deg, rgba(0, 191, 255, 0.05) 0%, rgba(0, 127, 255, 0.02) 100%);
    border: 1px solid rgba(0, 191, 255, 0.15);
    border-radius: 12px;
}

.opportunities-view .player-row:hover {
    border-color: rgba(0, 191, 255, 0.4);
    background: linear-gradient(135deg, rgba(0, 191, 255, 0.08) 0%, rgba(0, 127, 255, 0.04) 100%);
}

.opportunities-view .player-info {
    flex: 1;
    padding-right: 16px;
}

.opportunities-view .player-name-row {
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 8px;
}

.opportunities-view .player-name {
    font-size: 15px;
    font-weight: 700;
}

.opportunities-view .player-team {
    font-size: 12px;
}

.opportunities-view .opportunity-badge {
    padding: 4px 10px;
    font-size: 10px;
    border-radius: 6px;
}

.opportunities-view .prop-line {
    margin-top: 6px;
    gap: 10px;
}

.opportunities-view .line-value {
    font-size: 16px;
    font-weight: 700;
}

.opportunities-view .market-type {
    font-size: 12px;
    padding: 3px 8px;
}

.opportunities-view .opportunity-stats {
    margin-top: 10px !important;
    padding: 10px 12px;
    background: rgba(0, 191, 255, 0.08);
    border-radius: 8px;
    font-size: 11px !important;
    gap: 16px !important;
    justify-content: space-between;
}

.opportunities-view .opportunity-stats span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.opportunities-view .opportunity-stats strong {
    font-size: 13px;
}

.opportunities-view .stats-cols {
    gap: 16px;
    padding-left: 12px;
}

.opportunities-view .edge-col,
.opportunities-view .conf-col {
    min-width: 55px;
}

.opportunities-view .edge-value,
.opportunities-view .conf-value {
    font-size: 15px;
}

.opportunities-view .mini-chart {
    margin-top: 8px;
}

/* Espaçamento do container de props em modo oportunidades */
.opportunities-view .game-section {
    gap: 12px;
}

/* ========== BEST OF DAY ANALYSIS (Inline) ========== */
.best-of-day-analysis {
    margin: 16px;
    padding: 0;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.08) 0%, rgba(255, 165, 0, 0.05) 100%);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 12px;
    overflow: hidden;
}

.best-analysis-header {
    padding: 12px 16px;
    background: rgba(255, 215, 0, 0.1);
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
}

.best-analysis-title {
    font-size: 14px;
    font-weight: 700;
    color: #ffd700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.best-analysis-content {
    padding: 16px;
}

/* Score breakdown */
.best-score-section {
    margin-bottom: 16px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
}

.best-score-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 10px;
    text-transform: uppercase;
}

.best-score-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.best-score-item {
    text-align: center;
    padding: 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
}

.best-score-label {
    font-size: 10px;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.best-score-value {
    font-size: 16px;
    font-weight: 700;
    color: #00d4aa;
}

.best-score-value.gold {
    color: #ffd700;
}

/* Hit rates section */
.best-hitrates {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    margin-bottom: 16px;
}

.best-hr-item {
    text-align: center;
    padding: 8px 4px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
}

.best-hr-label {
    font-size: 10px;
    color: var(--text-secondary);
    margin-bottom: 2px;
}

.best-hr-value {
    font-size: 14px;
    font-weight: 700;
}

.best-hr-value.high { color: #00d4aa; }
.best-hr-value.medium { color: #ffa500; }
.best-hr-value.low { color: #ff6b6b; }

/* Chart inline */
.best-chart-section {
    margin-top: 12px;
}

.best-chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 80px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.best-chart-bar {
    flex: 1;
    min-width: 8px;
    border-radius: 2px 2px 0 0;
    transition: all 0.2s;
}

.best-chart-bar.hit { background: #00d4aa; }
.best-chart-bar.miss { background: #ff6b6b; }

/* Recommendation */
.best-recommendation {
    margin-top: 16px;
    padding: 12px;
    background: rgba(0, 212, 170, 0.1);
    border: 1px solid rgba(0, 212, 170, 0.3);
    border-radius: 8px;
    text-align: center;
}

.best-rec-direction {
    font-size: 18px;
    font-weight: 800;
    color: #00d4aa;
    margin-bottom: 4px;
}

.best-rec-text {
    font-size: 12px;
    color: var(--text-secondary);
}

/* ========== ESPORTIVA PROPS STYLES ========== */
.esportiva-section {
    padding: 12px;
}

.esportiva-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: rgba(139, 92, 246, 0.1);
    border-radius: 8px;
    margin-bottom: 12px;
}

.esportiva-title {
    font-size: 14px;
    font-weight: 600;
    color: rgba(139, 92, 246, 1);
}

.esportiva-count {
    font-size: 12px;
    color: var(--text-secondary);
}

.esportiva-prop {
    border-left: 3px solid rgba(139, 92, 246, 0.6);
}

.esportiva-prop.team-prop {
    border-left-color: rgba(245, 158, 11, 0.6);
}

.esportiva-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    background: rgba(139, 92, 246, 0.2);
    color: rgba(139, 92, 246, 1);
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 4px;
    margin-left: 6px;
}

.team-prop .esportiva-badge {
    background: rgba(245, 158, 11, 0.2);
    color: rgba(245, 158, 11, 1);
}

.team-logo-container {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-input);
}

.team-logo-img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 50%;
}

.prop-stats {
    display: flex;
    gap: 12px;
    margin-left: auto;
    margin-right: 12px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.stat-label {
    font-size: 9px;
    font-weight: 500;
    color: var(--text-tertiary);
    text-transform: uppercase;
}

.stat-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.stat-value.high {
    color: var(--green);
}

.stat-value.medium {
    color: var(--yellow);
}

.stat-value.low {
    color: var(--red);
}

.stat-value.positive {
    color: var(--green);
}

.stat-value.negative {
    color: var(--red);
}

.stat-value.neutral {
    color: var(--text-secondary);
}

.odds-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 60px;
}

.odds-btn {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
}

.odds-btn.over {
    background: rgba(0, 217, 163, 0.1);
    color: var(--green);
}

.odds-btn.under {
    background: rgba(255, 68, 68, 0.1);
    color: var(--red);
}

.line-value {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 13px;
}

/* ========== ADVANCED FILTERS ========== */
.advanced-filters {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

.filter-dropdown {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    text-transform: uppercase;
}

.filter-dropdown i {
    font-size: 10px;
}

/* Alt Lines Control */
.alt-lines-control {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
}

/* Alt Lines in bottom filters */
.bottom-filters-row .alt-lines-control {
    margin-left: 0;
}

.alt-line-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}

.alt-line-btn:hover {
    background: var(--green);
    border-color: var(--green);
    color: var(--bg-primary);
}

.alt-line-btn:active {
    transform: scale(0.95);
}

.alt-line-label {
    min-width: 32px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--green);
}

.alt-line-label.negative {
    color: var(--red);
}

.alt-line-label.positive {
    color: var(--green);
}

.alt-line-reset {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all 0.15s;
    margin-left: 4px;
}

.alt-line-reset:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

/* Adjusted Line Display in Table */
.adjusted-line {
    color: var(--green);
    font-weight: 700;
}

.original-line {
    color: var(--text-tertiary);
    font-size: 10px;
    text-decoration: line-through;
}

.has-alt-line {
    background: rgba(0, 217, 163, 0.05) !important;
}

.has-alt-line:hover {
    background: rgba(0, 217, 163, 0.1) !important;
}

/* ========== PROPS LIST ========== */
.props-container {
    padding-bottom: 80px;
}

.game-section {
    margin-bottom: 2px;
}

.game-header {
    background: var(--bg-card);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
}

.game-teams {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.game-time {
    font-size: 11px;
    color: var(--text-tertiary);
}

/* Player Row - Props Cash style */
.player-row {
    display: grid;
    grid-template-columns: 40px 1fr 50px 150px;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    gap: 10px;
    transition: background 0.15s, opacity 0.3s;
}

.player-row:hover {
    background: var(--bg-card);
}

/* Skeleton loading state para cards */
.player-row.skeleton {
    pointer-events: none;
}

.player-row.skeleton * {
    color: transparent !important;
    background: var(--bg-input);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.player-row.skeleton *::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent 25%, var(--bg-hover) 50%, transparent 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.player-row.skeleton .player-photo {
    background: var(--bg-input);
}

.player-row.skeleton .mini-chart,
.player-row.skeleton .mini-bar {
    background: var(--bg-input) !important;
}

/* Player Photo - Card pequeno */
.player-photo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.player-photo.no-shimmer::before {
    display: none;
}

.player-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.player-photo img.loaded {
    opacity: 1;
}

/* Skeleton shimmer enquanto carrega */
.player-photo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, var(--bg-input) 25%, var(--bg-hover) 50%, var(--bg-input) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 50%;
    z-index: 0;
}

.player-photo img.loaded + .photo-fallback + .shimmer-bg,
.player-photo img.loaded ~ ::before {
    display: none;
}

.player-photo:has(img.loaded)::before {
    display: none;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.player-photo .photo-fallback {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Player Photo - Modal grande */
.player-photo-lg {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid var(--border-light);
}

.player-photo-lg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.player-photo-lg .photo-fallback {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.player-info {
    min-width: 0;
}

.player-name-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 4px;
}

.player-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.player-team {
    font-size: 11px;
    color: var(--text-tertiary);
}

.prop-line {
    display: flex;
    align-items: center;
    gap: 6px;
}

.direction {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
}

.direction.over {
    background: rgba(0, 217, 163, 0.15);
    color: var(--green);
}

.direction.under {
    background: rgba(255, 68, 68, 0.15);
    color: var(--red);
}

/* Container para linhas OVER/UNDER */
.prop-lines-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.prop-line.under-line {
    opacity: 0.85;
}

/* Badge de confiança inline */
.conf-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
}

.conf-badge.high {
    background: rgba(0, 210, 106, 0.15);
    color: #00D26A;
}

.conf-badge.medium {
    background: rgba(255, 165, 0, 0.15);
    color: #FFA500;
}

.conf-badge.low {
    background: rgba(255, 68, 68, 0.15);
    color: #FF4444;
}

.conf-badge.neutral {
    background: rgba(128, 128, 128, 0.15);
    color: var(--text-tertiary);
}

/* Container para dois círculos de confiança OVER/UNDER */
.confidence-circles-container {
    display: flex;
    gap: 8px;
}

.confidence-circles-container .confidence-circle {
    min-width: 60px;
}

.confidence-circles-container .confidence-circle.over .confidence-label {
    color: #00D26A;
}

.confidence-circles-container .confidence-circle.under .confidence-label {
    color: #FF6B6B;
}

/* Confidence badges na tabela (junto com odds) */
.table-odds {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.table-conf {
    font-size: 9px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 3px;
}

.table-conf.high {
    background: rgba(0, 210, 106, 0.2);
    color: #00D26A;
}

.table-conf.medium {
    background: rgba(255, 165, 0, 0.2);
    color: #FFA500;
}

.table-conf.low {
    background: rgba(255, 68, 68, 0.2);
    color: #FF4444;
}

.line-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.line-value.selectable {
    background: var(--bg-input);
    padding: 2px 8px;
    border-radius: 4px;
    min-width: 32px;
    text-align: center;
}

/* Line Selector Buttons (1Q props) */
.line-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 4px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.line-btn:hover:not(.disabled) {
    background: var(--green);
    color: #000;
}

.line-btn:active:not(.disabled) {
    transform: scale(0.95);
}

.line-btn.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.has-line-selector .prop-line {
    gap: 4px;
}

.market-type {
    font-size: 12px;
    color: var(--text-secondary);
}

.odds-value {
    font-size: 12px;
    color: var(--text-tertiary);
}

/* Stats Columns Container */
.stats-cols {
    display: flex;
    gap: 4px;
    align-items: center;
}

/* DVP Column */
.dvp-col {
    text-align: center;
    min-width: 40px;
}

.dvp-label {
    font-size: 9px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    margin-bottom: 2px;
    letter-spacing: 0.5px;
}

.dvp-value {
    font-size: 13px;
    font-weight: 600;
}

.dvp-value.green { color: #00D26A; }
.dvp-value.red { color: #FF4444; }
.dvp-value.neutral { color: var(--text-tertiary); }

/* Edge Column - Props Cash style */
.edge-col {
    text-align: center;
    min-width: 32px;
}

.edge-label {
    font-size: 8px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    margin-bottom: 1px;
    letter-spacing: 0.3px;
}

.edge-value {
    font-size: 12px;
    font-weight: 700;
}

.edge-value.positive { color: #00D26A; }
.edge-value.negative { color: #FF4444; }
.edge-value.neutral { color: var(--text-tertiary); }

/* Confidence Column */
.conf-col {
    text-align: center;
    min-width: 32px;
}

.conf-label {
    font-size: 8px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    margin-bottom: 1px;
    letter-spacing: 0.3px;
}

.conf-value {
    font-size: 11px;
    font-weight: 600;
}

.conf-value.high { color: #00D26A; }
.conf-value.medium { color: #FFA500; }
.conf-value.low { color: #FF4444; }
.conf-value.neutral { color: var(--text-tertiary); }

/* Mini Chart - Props Cash Style EXATO */
.mini-chart {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 2px;
    height: 40px;
    position: relative;
    padding: 0 4px;
    min-width: 140px;
}

/* Linha tracejada da prop line */
.mini-chart .prop-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    border-top: 1px dashed rgba(255, 255, 255, 0.3);
    z-index: 0;
}

.mini-bar {
    width: 10px;
    min-height: 4px;
    border-radius: 2px 2px 0 0;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.mini-bar.hit {
    background: var(--green);
}
.mini-bar.miss {
    background: var(--red);
}
.mini-bar.neutral {
    background: #555;
}
.mini-bar.zero {
    background: #666 !important;
    height: 3px !important;
    min-height: 3px;
}

/* ========== BOTTOM FILTERS ========== */
.bottom-filters {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-primary);
    border-top: 1px solid var(--border);
    padding: 8px 12px;
    /* Fallback for older browsers */
    padding-bottom: 34px;
    /* iOS PWA safe area - requires viewport-fit=cover */
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 22px));
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 100;
}

.bottom-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 8px 12px;
    transition: all 0.3s ease;
    max-height: 44px;
    overflow: hidden;
    opacity: 1;
}

.bottom-search-bar.hidden {
    max-height: 0;
    padding: 0 12px;
    margin-bottom: -8px;
    opacity: 0;
}

.bottom-search-bar i {
    color: var(--text-tertiary);
    font-size: 14px;
}

.bottom-search-bar input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
}

.bottom-search-bar input::placeholder {
    color: var(--text-tertiary);
}

.bottom-filters-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.period-filters {
    display: flex;
    gap: 4px;
}

.period-btn {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    background: transparent;
    color: var(--text-primary);
    border: none;
    cursor: pointer;
}

.period-btn.active {
    background: var(--green);
    color: #000;
}

.bottom-actions {
    display: flex;
    gap: 12px;
}

.bottom-action-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 18px;
    cursor: pointer;
}

/* ========== LOADING STATE ========== */
.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
}

.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border);
    border-top-color: var(--green);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-text {
    margin-top: 16px;
    color: var(--text-secondary);
    font-size: 14px;
}

.loading-progress {
    margin-top: 4px;
    color: var(--text-tertiary);
    font-size: 12px;
}

/* ========== EMPTY STATE ========== */
.empty-state {
    text-align: center;
    padding: 60px 20px;
}

.empty-state i {
    font-size: 48px;
    color: var(--text-disabled);
    margin-bottom: 16px;
}

.empty-state p {
    color: var(--text-secondary);
    font-size: 14px;
}

/* ========== PLAYER MODAL ========== */
.modal {
    position: fixed;
    inset: 0;
    background: var(--bg-primary);
    z-index: 200;
    overflow-y: auto;
    display: none;
}

.modal.open { display: block; }

.modal-header {
    position: sticky;
    top: 0;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 10;
}

.modal-back {
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 20px;
    cursor: pointer;
    padding: 4px;
}

.modal-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

/* Modal Injury Section */
.modal-injury {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 10px;
    padding: 10px 14px;
    margin: 12px 0;
}

.modal-injury.day-to-day {
    background: rgba(251, 191, 36, 0.1);
    border-color: rgba(251, 191, 36, 0.3);
}

.modal-injury.questionable {
    background: rgba(251, 146, 60, 0.1);
    border-color: rgba(251, 146, 60, 0.3);
}

.modal-injury.probable {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
}

.injury-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.injury-status-badge {
    background: #ef4444;
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 20px;
    text-transform: uppercase;
}

.injury-status-badge.day-to-day {
    background: #fbbf24;
    color: #1a1a1a;
}

.injury-status-badge.questionable {
    background: #fb923c;
}

.injury-status-badge.probable {
    background: #22c55e;
}

.injury-header .injury-type {
    font-size: 12px;
    color: var(--text-secondary);
}

.injury-return {
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.injury-return i {
    font-size: 10px;
    color: var(--accent-color);
}

.modal-actions {
    display: flex;
    gap: 16px;
}

.modal-action-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 18px;
    cursor: pointer;
}

/* Modal Market Tabs */
.modal-market-tabs {
    display: flex;
    gap: 16px;
    padding: 12px 16px;
    overflow-x: auto;
    border-bottom: 1px solid var(--border);
    -webkit-overflow-scrolling: touch;
}

.modal-market-tabs::-webkit-scrollbar { display: none; }

.modal-market-tab {
    padding: 8px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
}

.modal-market-tab.active {
    color: var(--green);
}

.modal-market-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--green);
}

/* Player Card */
.player-card {
    padding: 20px 16px;
    display: flex;
    gap: 16px;
    border-bottom: 1px solid var(--border);
    position: relative;
}

.player-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.player-details {
    flex: 1;
    min-width: 0;
}

.player-full-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.player-position-team {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.player-prop-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(0, 217, 163, 0.1);
    border-radius: 6px;
}

.player-prop-badge .prop-direction {
    font-size: 12px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
}

.player-prop-badge .prop-direction.over {
    color: var(--green);
    background: rgba(0, 217, 163, 0.2);
}

.player-prop-badge .prop-direction.under {
    color: var(--red);
    background: rgba(255, 68, 68, 0.2);
}

.player-prop-badge span {
    font-size: 13px;
    font-weight: 600;
    color: var(--green);
}

/* Toggle Direction Icon */
.player-prop-badge {
    cursor: pointer;
    transition: all 0.2s ease;
}

.player-prop-badge:hover {
    background: rgba(0, 217, 163, 0.2);
}

.player-prop-badge .direction-toggle-icon {
    font-size: 10px;
    color: var(--text-tertiary);
    margin-left: 4px;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.player-prop-badge:hover .direction-toggle-icon {
    opacity: 1;
}

/* Under Direction Styles */
.player-prop-badge.under {
    background: rgba(239, 68, 68, 0.1);
}

.player-prop-badge.under .prop-direction {
    color: var(--red);
    background: rgba(239, 68, 68, 0.2);
}

.player-prop-badge.under span {
    color: var(--red);
}

.player-prop-badge.under:hover {
    background: rgba(239, 68, 68, 0.2);
}

/* Share Card Under Direction Styles */
.share-prop-badge.under {
    background: rgba(239, 68, 68, 0.1) !important;
}

.share-prop-badge.under .share-prop-direction {
    color: var(--red) !important;
    background: rgba(239, 68, 68, 0.2) !important;
}

.share-prop-badge.under span {
    color: var(--red) !important;
}

/* Player Game Info (OPP, GAME TIME) */
.player-game-info {
    display: flex;
    gap: 20px;
    margin-top: 10px;
}

.player-game-info .info-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.player-game-info .info-label {
    font-size: 10px;
    color: var(--text-tertiary);
    text-transform: uppercase;
}

.player-game-info .info-value {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

/* DEF RANK colors */
.player-game-info .info-value.dvp-hard { color: #FF4444; }
.player-game-info .info-value.dvp-medium { color: #FFA500; }
.player-game-info .info-value.dvp-neutral { color: var(--text-secondary); }
.player-game-info .info-value.dvp-easy { color: #90EE90; }
.player-game-info .info-value.dvp-cake { color: #00D26A; }

/* MATCHUP Circle - Props Cash Style */
.matchup-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    margin-left: auto;
}

.matchup-circle .matchup-label {
    font-size: 9px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    margin-bottom: 6px;
}

.matchup-circle .matchup-grade {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    border: 3px solid var(--gray);
    background: var(--bg-secondary);
}

.matchup-circle .matchup-grade.hard {
    border-color: #FF4444;
    color: #FF4444;
}

.matchup-circle .matchup-grade.medium {
    border-color: #FFA500;
    color: #FFA500;
}

.matchup-circle .matchup-grade.easy {
    border-color: #00D26A;
    color: #00D26A;
}

/* AVG Badge */
.avg-badge-row {
    padding: 8px 16px;
}

.avg-badge {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(0, 217, 163, 0.1);
    border-radius: 6px;
    font-size: 13px;
    color: var(--text-secondary);
}

.avg-badge strong {
    color: var(--green);
    font-weight: 700;
}

.matchup-widget {
    text-align: center;
    min-width: 70px;
}

.matchup-label {
    font-size: 9px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.matchup-grade {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.matchup-dots {
    display: flex;
    gap: 3px;
    justify-content: center;
}

.matchup-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gray);
}

.matchup-dot.filled { background: var(--green); }
.matchup-dot.half { background: linear-gradient(90deg, var(--green) 50%, var(--gray) 50%); }

/* Game Info Row */
.game-info-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 12px 16px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    gap: 12px;
}

.game-info-item {
    text-align: center;
}

.game-info-label {
    font-size: 10px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.game-info-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.def-rank.good { color: var(--green); }
.def-rank.bad { color: var(--red); }
.def-rank.neutral { color: var(--text-secondary); }

/* Average Row */
.avg-row {
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.avg-row span {
    font-size: 13px;
    color: var(--text-secondary);
}

.avg-row strong {
    color: var(--text-primary);
    font-weight: 600;
}

.avg-games {
    font-size: 11px;
    color: var(--text-tertiary);
}

/* Chart Empty State */
.chart-empty {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
    color: var(--text-tertiary);
    font-size: 13px;
    width: 100%;
}

/* Heat Map */
.heatmap-section {
    padding: 16px;
    border-bottom: 1px solid var(--border);
}

.heatmap-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.heatmap-teams {
    display: flex;
    align-items: center;
    gap: 12px;
}

.heatmap-team {
    display: flex;
    align-items: center;
    gap: 6px;
}

.team-logo {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
}

.heatmap-legend {
    display: flex;
    gap: 12px;
    font-size: 10px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.legend-arrow.up { color: var(--green); }
.legend-arrow.down { color: var(--red); }
.legend-arrow.neutral { color: var(--gray); }

/* Chart Section - Props Cash Style EXATO */
.chart-section {
    padding: 16px;
    border-bottom: 1px solid var(--border);
}

.chart-wrapper {
    display: flex;
    gap: 8px;
}

.chart-y-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    height: 140px;
    min-width: 35px;
    padding-right: 4px;
}

.y-label {
    font-size: 11px;
    color: var(--text-tertiary);
    font-weight: 500;
}

.y-label.y-line-label {
    color: rgba(255, 255, 255, 0.8);
}

.chart-area {
    flex: 1;
    position: relative;
    height: 140px;
}

/* Linha horizontal branca do prop */
.prop-line-horizontal {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.5);
    z-index: 5;
}

.bars-container {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 140px;
    gap: 4px;
}

.bar-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 40px;
}

.bar {
    width: 100%;
    max-width: 30px;
    min-height: 15px;
    border-radius: 3px 3px 0 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.bar.hit { background: #00D26A; }
.bar.miss { background: #FF4444; }

.bar-val {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    padding-bottom: 3px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.bar-date {
    font-size: 9px;
    color: var(--text-tertiary);
    white-space: nowrap;
    margin-top: 4px;
}

.bar-opp {
    font-size: 9px;
    color: var(--text-secondary);
    margin-top: 1px;
}

/* Period-specific bar container styles */
.bars-container.period-l5 {
    gap: 12px;
    justify-content: center;
}

.bars-container.period-l5 .bar-column {
    min-width: 40px;
    max-width: 55px;
    flex: 0 0 auto;
}

.bars-container.period-l5 .bar {
    max-width: 40px;
}

.bars-container.period-l20 {
    gap: 2px;
    justify-content: space-between;
}

.bars-container.period-l20 .bar-column {
    flex: 1;
    min-width: 6px;
    max-width: 14px;
}

.bars-container.period-l20 .bar {
    max-width: unset;
    border-radius: 0; /* Barras retas */
}

.bars-container.period-l20 .bar-val {
    display: none; /* Esconder valor dentro da barra no L20 */
}

.bars-container.period-l20 .bar-date {
    display: none;
}

.bars-container.period-l20 .bar-opp {
    display: none;
}

/* L30 / Season - barras ainda mais finas */
.bars-container.period-l30 {
    gap: 1px;
    justify-content: space-between;
}

.bars-container.period-l30 .bar-column {
    flex: 1;
    min-width: 4px;
    max-width: 10px;
}

.bars-container.period-l30 .bar {
    max-width: unset;
    border-radius: 0; /* Barras retas */
}

.bars-container.period-l30 .bar-val {
    display: none; /* Esconder valor dentro da barra no L30 */
}

.bars-container.period-l30 .bar-date {
    display: none;
}

.bars-container.period-l30 .bar-opp {
    display: none;
}

.chart-empty {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    color: var(--text-tertiary);
    font-size: 13px;
    width: 100%;
}

/* Chart Loading State */
.chart-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.chart-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border);
    border-top-color: var(--green);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.chart-loading span {
    font-size: 11px;
    color: var(--text-tertiary);
}

/* Potential Assists Toggle Button */
.potential-assists-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.potential-assists-toggle:hover {
    background: var(--bg-hover);
    border-color: var(--green);
}

.potential-assists-toggle.active {
    background: rgba(0, 217, 163, 0.15);
    border-color: var(--green);
    color: var(--green);
}

.potential-assists-toggle i {
    font-size: 11px;
}

/* Chart Legend Row (for dual bars) */
.chart-legend-row {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 8px 16px;
    margin-bottom: 8px;
}

.chart-legend-row .legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-secondary);
}

.legend-bar {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.legend-bar.assists {
    background: #00D26A;
}

.legend-bar.potential {
    background: #6366F1;
}

/* Dual Bars Container */
.bars-container.dual-bars {
    gap: 2px;
}

.bars-container.dual-bars .bar-column {
    max-width: 60px;
}

.bar-column.with-potential {
    max-width: 60px;
}

/* Bar Group for dual bars */
.bar-group {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    width: 100%;
    justify-content: center;
}

.bar-group .bar {
    max-width: 14px;
    flex: 1;
}

.bar.assists-bar {
    /* Uses the same hit/miss colors */
}

.bar.potential-bar {
    background: #6366F1 !important;
}

.bar-val.potential-val {
    font-size: 9px;
    font-weight: 600;
}

/* FGA Overlay on bars */
.fga-overlay {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 3px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    pointer-events: none;
    z-index: 5;
}

.fga-overlay-val {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    background: rgba(0, 0, 0, 0.7);
    padding: 1px 4px;
    border-radius: 3px;
    white-space: nowrap;
}

/* AVG Badge Row with toggle */
.avg-badge-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
}

/* Toast Notification */
.props-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-primary);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    z-index: 10001;
    opacity: 0;
    transition: all 0.3s ease;
}

.props-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.props-toast.warning {
    border-color: #f59e0b;
}

.props-toast.warning i {
    color: #f59e0b;
}

.props-toast.info i {
    color: #3b82f6;
}

/* Percentage Filters - Props Cash Style */
.pct-filters {
    display: flex;
    gap: 0;
    padding: 0 16px;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    background: var(--bg-secondary);
}

.pct-filters::-webkit-scrollbar { display: none; }

.pct-filter {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-right: 1px solid var(--border);
    cursor: pointer;
    min-width: 65px;
}

.pct-filter:last-child {
    border-right: none;
}

.pct-filter:hover {
    background: rgba(255, 255, 255, 0.03);
}

.pct-filter.active {
    background: rgba(0, 210, 106, 0.08);
    border-bottom: 2px solid #00D26A;
}

.pct-filter-label {
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 4px;
    font-weight: 500;
}

.pct-filter-value {
    font-size: 15px;
    font-weight: 700;
}

.pct-filter-value.good { color: #00D26A; }
.pct-filter-value.bad { color: #FF4444; }

/* Trending Filters */
.trending-section {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

.trending-title {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-bottom: 8px;
}

.trending-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.trending-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
}

.trending-pill i {
    color: var(--green);
}

/* Books Section - Props Cash Style */
.books-section {
    padding: 16px;
    border-bottom: 1px solid var(--border);
}

.books-header {
    display: grid;
    grid-template-columns: 1fr 70px 70px 70px 30px;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}

.books-header span {
    font-size: 11px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    font-weight: 500;
}

.book-row {
    display: grid;
    grid-template-columns: 1fr 70px 70px 70px 30px;
    gap: 8px;
    padding: 12px 0;
    align-items: center;
    border-bottom: 1px solid var(--border);
}

.book-row:last-child {
    border-bottom: none;
}

.book-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.book-line {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
}

.book-over {
    font-size: 14px;
    font-weight: 600;
    color: #00D26A;
    text-align: center;
}

.book-under {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
}

.book-best-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #00D26A;
    margin: 0 auto;
}

.book-best-indicator.inactive {
    background: var(--border);
}


/* Roster Activity */
.roster-section {
    padding: 16px;
}

.roster-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.roster-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: var(--bg-card);
    border-radius: 8px;
}

.roster-status {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.roster-status.out { background: var(--red); }
.roster-status.questionable { background: var(--yellow); }
.roster-status.available { background: var(--green); }

.roster-text {
    font-size: 13px;
    color: var(--text-primary);
}

/* Bet Button */
.bet-button {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    background: var(--bg-primary);
    border-top: 1px solid var(--border);
}

.bet-btn {
    width: 100%;
    padding: 16px;
    background: var(--green);
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    color: #000;
    cursor: pointer;
}

.bet-btn:hover {
    background: var(--green-dark);
}

/* Play Types Table */
.playtypes-section {
    padding: 16px;
    border-bottom: 1px solid var(--border);
}

.playtypes-table {
    width: 100%;
}

.playtypes-header {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
}

.playtypes-header span {
    font-size: 10px;
    color: var(--text-tertiary);
    text-transform: uppercase;
}

.playtype-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 8px;
    padding: 8px 0;
    align-items: center;
}

.playtype-name {
    font-size: 13px;
    color: var(--text-primary);
}

.playtype-pts {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.playtype-pct {
    font-size: 13px;
    color: var(--text-secondary);
}

.playtype-rank {
    font-size: 12px;
    font-weight: 600;
}

.playtype-rank.good { color: var(--green); }
.playtype-rank.bad { color: var(--red); }
.playtype-rank.neutral { color: var(--text-secondary); }

.more-playtypes {
    padding: 10px;
    text-align: center;
    font-size: 12px;
    color: var(--text-tertiary);
    cursor: pointer;
}

/* Responsive */
@media (max-width: 400px) {
    .player-row {
        grid-template-columns: 1fr 45px 120px;
        gap: 6px;
        padding: 10px 12px;
    }

    /* Cards fixados usam o mesmo estilo da página principal */
    /* Nenhum override necessário - herda .player-row */

    .mini-chart {
        min-width: 110px;
        gap: 1px;
    }

    .mini-bar {
        width: 8px;
    }

    .edge-col {
        min-width: 40px;
    }

    .edge-value {
        font-size: 13px;
    }
}

/* ========== DVP BADGE ========== */
.dvp-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    margin-left: 8px;
    text-transform: uppercase;
    cursor: help;
}

/* DVP Colors - Based on rank (1=best defense, 30=worst) */
.dvp-hard {
    /* Rank 1-5: Good defense = hard for Over */
    background: rgba(255, 68, 68, 0.2);
    color: #FF6666;
}

.dvp-medium {
    /* Rank 6-10 */
    background: rgba(255, 184, 0, 0.2);
    color: #FFB800;
}

.dvp-neutral {
    /* Rank 11-20 */
    background: rgba(153, 153, 153, 0.15);
    color: #999999;
}

.dvp-easy {
    /* Rank 21-25 */
    background: rgba(0, 217, 163, 0.15);
    color: #00D9A3;
}

.dvp-cake {
    /* Rank 26-30: Bad defense = easy for Over */
    background: rgba(0, 217, 163, 0.25);
    color: #00FFBB;
    animation: pulse-dvp 2s infinite;
}

@keyframes pulse-dvp {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Player name row with DVP */
.player-name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

/* ========== SELECT ODDS MODAL ========== */
.odds-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2000;
    justify-content: center;
    align-items: flex-end;
}

.odds-modal.open {
    display: flex;
}

.odds-modal-content {
    background: var(--card-bg);
    width: 100%;
    max-width: 500px;
    border-radius: 16px 16px 0 0;
    padding: 20px;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.odds-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border);
}

.odds-modal-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.odds-modal-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

/* Toggle Option */
.toggle-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 15px;
    color: var(--text-primary);
    font-size: 15px;
}

.toggle-switch {
    position: relative;
    width: 50px;
    height: 26px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--gray);
    border-radius: 26px;
    transition: 0.3s;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: 0.3s;
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--accent);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(24px);
}

/* Odds Options */
.odds-modal-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.odds-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.2s;
}

.odds-option:hover {
    background: rgba(255, 255, 255, 0.05);
}

.odds-option input {
    display: none;
}

.option-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--gray);
    transition: all 0.2s;
}

.odds-option input:checked + .option-dot {
    border-color: var(--accent);
    background: var(--accent);
}

.option-label {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    flex: 1;
}

.option-desc {
    font-size: 13px;
    color: var(--text-tertiary);
}

/* Custom Range */
.odds-modal-range {
    padding-top: 15px;
    border-top: 1px solid var(--border);
}

.range-title {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 15px;
    display: block;
}

.range-slider-container {
    position: relative;
    height: 30px;
    margin-bottom: 10px;
}

.range-slider-container input[type="range"] {
    position: absolute;
    width: 100%;
    height: 4px;
    background: transparent;
    -webkit-appearance: none;
    pointer-events: none;
}

.range-slider-container input[type="range"]::-webkit-slider-track {
    height: 4px;
    background: var(--accent);
    border-radius: 2px;
}

.range-slider-container input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    margin-top: -8px;
}

.range-values {
    display: flex;
    justify-content: space-between;
    color: var(--text-secondary);
    font-size: 13px;
}

/* ========== GO GAMES PLAYED (Visual Calendar) ========== */
.go-games-section {
    background: var(--bg-input);
    border-radius: 12px;
    padding: 16px;
    margin-top: 20px;
}

.go-games-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.go-games-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.go-games-range {
    font-size: 11px;
    color: var(--text-tertiary);
}

.go-games-dots {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.go-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.go-dot:hover {
    transform: scale(1.3);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

.go-dot.hit {
    background: var(--green);
    box-shadow: 0 0 4px rgba(0, 217, 163, 0.4);
}

.go-dot.miss {
    background: var(--red);
    box-shadow: 0 0 4px rgba(255, 68, 68, 0.4);
}

.go-games-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.legend-dot.hit {
    background: var(--green);
}

.legend-dot.miss {
    background: var(--red);
}

.legend-count {
    margin-left: auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--green);
}

/* ========== GAME DETAIL MODAL ========== */
.game-detail-header {
    border-bottom: 1px solid var(--border);
}

/* Game Score Header */
.game-score-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 16px;
    background: var(--bg-input);
    border-bottom: 1px solid var(--border);
}

.team-side {
    display: flex;
    align-items: center;
    gap: 12px;
}

.team-side.away {
    flex-direction: row;
}

.team-side.home {
    flex-direction: row-reverse;
}

.team-abbr {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    background: var(--bg-hover);
    padding: 8px 12px;
    border-radius: 8px;
}

.team-side .team-score {
    font-size: 28px;
    font-weight: 800;
    color: var(--text-primary);
}

.game-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.status-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--green);
    background: rgba(0, 217, 163, 0.15);
    padding: 4px 10px;
    border-radius: 4px;
}

.game-date {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Player Stats Section */
.player-stats-section {
    padding: 16px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
}

.player-stats-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.player-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.player-name-lg {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.player-pos-lg {
    font-size: 13px;
    color: var(--text-secondary);
}

.main-stat-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.main-stat {
    flex: 1;
    background: var(--bg-input);
    padding: 12px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.main-stat-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
}

.main-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.main-stat-value.hit {
    color: var(--green);
}

.main-stat-value.miss {
    color: var(--red);
}

.main-stat-value i {
    margin-right: 4px;
}

/* Props Grid */
.props-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.prop-cell {
    background: var(--bg-input);
    padding: 10px 8px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--border);
}

.prop-cell.hit {
    border-color: var(--green);
    background: rgba(0, 217, 163, 0.08);
}

.prop-cell.miss {
    border-color: var(--red);
    background: rgba(255, 68, 68, 0.08);
}

.prop-cell-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
}

.prop-cell-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.prop-cell.hit .prop-cell-value {
    color: var(--green);
}

.prop-cell.miss .prop-cell-value {
    color: var(--red);
}

.prop-cell-value i {
    margin-right: 2px;
    font-size: 12px;
}

.prop-cell-line {
    font-size: 9px;
    color: var(--text-tertiary);
}

/* Box Score Section */
.boxscore-section {
    padding: 16px;
}

.section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 16px;
    text-transform: uppercase;
}

.boxscore-team {
    margin-bottom: 20px;
    background: var(--bg-card);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.boxscore-team .team-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: var(--bg-input);
    border-bottom: 1px solid var(--border);
}

.boxscore-team .team-logo {
    font-size: 14px;
    font-weight: 700;
    color: var(--green);
    background: rgba(0, 217, 163, 0.15);
    padding: 6px 10px;
    border-radius: 6px;
}

.boxscore-team .team-name {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.boxscore-team .team-score {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-primary);
}

.boxscore-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.boxscore-table thead th {
    padding: 8px 6px;
    text-align: center;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-tertiary);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}

.boxscore-table thead th:first-child {
    text-align: left;
    padding-left: 12px;
}

.boxscore-table tbody td {
    padding: 10px 6px;
    text-align: center;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
}

.boxscore-table tbody tr:last-child td {
    border-bottom: none;
}

.boxscore-table tbody tr.current-player {
    background: rgba(0, 217, 163, 0.1);
}

.boxscore-table tbody tr.current-player td {
    color: var(--green);
    font-weight: 600;
}

.player-name-cell {
    text-align: left !important;
    padding-left: 12px !important;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.player-name-cell .player-name {
    font-weight: 500;
    color: var(--text-primary);
}

.player-name-cell .player-pos {
    font-size: 10px;
    color: var(--text-tertiary);
}

.bench-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    transition: background 0.2s;
}

.bench-toggle:hover {
    background: var(--bg-hover);
    color: var(--green);
}

.bench-table {
    border-top: 1px solid var(--border);
}

.boxscore-loading {
    padding: 40px;
    text-align: center;
    color: var(--text-tertiary);
}

/* Bar column clickable state */
.bar-column {
    transition: transform 0.15s ease;
}

.bar-column:hover {
    transform: scale(1.05);
}

.bar-column:active {
    transform: scale(0.98);
}

/* ========== GAME DETAIL IMPROVEMENTS ========== */

/* Team Logo Box */
.team-logo-box {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-primary);
    background: var(--bg-hover);
    padding: 12px 16px;
    border-radius: 10px;
    min-width: 60px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.team-logo-box img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.team-logo-box .team-abbr {
    font-size: 20px;
    font-weight: 800;
}

/* Player Avatar with Photo */
.player-avatar-lg {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #00a896);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    overflow: hidden;
}

.player-avatar-lg.has-photo {
    background: var(--bg-hover);
}

.player-avatar-lg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.player-avatar-lg .fallback-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Game Detail Tabs */
.game-detail-tabs {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
}

.game-detail-tabs::-webkit-scrollbar {
    display: none;
}

.gd-tab {
    padding: 8px 16px;
    border: none;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-input);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.gd-tab:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.gd-tab.active {
    background: var(--green);
    color: var(--bg-primary);
}

/* Main Stat Highlight */
.main-stat-highlight {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-input);
    border-radius: 12px;
    padding: 16px 20px;
    margin: 16px 0;
    border: 2px solid var(--border);
}

.main-stat-highlight.hit {
    border-color: var(--green);
    background: rgba(0, 217, 163, 0.08);
}

.main-stat-highlight.miss {
    border-color: var(--red);
    background: rgba(255, 68, 68, 0.08);
}

.main-stat-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.main-stat-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.main-stat-big {
    font-size: 36px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
}

.main-stat-highlight.hit .main-stat-big {
    color: var(--green);
}

.main-stat-highlight.miss .main-stat-big {
    color: var(--red);
}

.main-stat-type {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
}

/* Line Indicator */
.line-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 24px;
    font-weight: 700;
}

.line-indicator.hit {
    color: var(--green);
}

.line-indicator.miss {
    color: var(--red);
}

.line-indicator i {
    font-size: 20px;
}

/* Prop Cell No Line */
.prop-cell.no-line {
    border-color: var(--border);
    background: var(--bg-input);
    opacity: 0.7;
}

.prop-cell.no-line .prop-cell-value {
    color: var(--text-secondary);
}

/* Fix team score header for better layout */
.game-score-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
}

.team-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.game-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.status-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--green);
    background: rgba(0, 217, 163, 0.15);
    padding: 4px 12px;
    border-radius: 4px;
}

.game-date {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

/* ========== BOX SCORE SECTION ========== */

.box-score-section {
    padding: 16px;
    background: var(--bg-primary);
}

.box-score-loading,
.box-score-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    color: var(--text-secondary);
}

.box-score-loading .spinner-small {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border);
    border-top-color: var(--green);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.box-score-empty i {
    font-size: 32px;
    color: var(--text-muted);
}

/* Team Box Score */
.team-box-score {
    background: var(--bg-card);
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.team-box-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-input);
    border-bottom: 1px solid var(--border);
}

.team-box-logo {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.team-box-logo img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.team-abbr-fallback {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.team-box-name {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.team-box-score-val {
    font-size: 20px;
    font-weight: 800;
    color: var(--green);
}

/* Box Score Table */
.box-score-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--text-muted) var(--bg-input);
    padding-bottom: 8px;
}

.box-score-table-container::-webkit-scrollbar {
    height: 6px;
}

.box-score-table-container::-webkit-scrollbar-track {
    background: var(--bg-input);
    border-radius: 3px;
}

.box-score-table-container::-webkit-scrollbar-thumb {
    background: var(--text-muted);
    border-radius: 3px;
}

.box-score-table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.box-score-table thead {
    background: var(--bg-input);
}

.box-score-table th {
    padding: 10px 8px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
}

.box-score-table th.stat-col {
    text-align: center;
    min-width: 42px;
    padding: 10px 6px;
}

.box-score-table th.player-col {
    position: sticky;
    left: 0;
    background: var(--bg-input);
    z-index: 1;
    min-width: 130px;
}

.box-score-table th i {
    font-size: 10px;
    margin-left: 4px;
    color: var(--text-muted);
}

.box-score-row {
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}

.box-score-row:hover {
    background: var(--bg-hover);
}

.box-score-row:hover .player-name-cell {
    background: var(--bg-hover);
}

.box-score-row:last-child {
    border-bottom: none;
}

.player-name-cell {
    padding: 10px 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    position: sticky;
    left: 0;
    background: var(--bg-card);
    z-index: 1;
}

.player-name-cell .player-name {
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.player-name-cell .player-pos {
    font-size: 11px;
    color: var(--text-muted);
    background: var(--bg-input);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
}

.stat-cell {
    padding: 10px 6px;
    text-align: center;
    font-weight: 500;
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Bench Toggle */
.bench-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--bg-input);
    cursor: pointer;
    transition: background 0.2s;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    border-top: 1px solid var(--border);
}

.bench-toggle:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.bench-toggle i {
    font-size: 10px;
    transition: transform 0.2s;
}

.bench-container {
    border-top: 1px solid var(--border);
}

/* Bench Table Styling */
.bench-table tbody .box-score-row {
    opacity: 0.85;
}

.bench-table thead {
    background: var(--bg-primary);
}

/* ========== HIT RATE MODE ========== */
.player-row.hitrates-mode {
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto auto;
    gap: 10px;
}

.player-row.hitrates-mode > .player-photo {
    grid-row: 1;
    grid-column: 1;
}

.player-row.hitrates-mode > .player-info {
    grid-row: 1;
    grid-column: 2;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.player-row.hitrates-mode > .stats-cols {
    display: none;
}

.player-row.hitrates-mode > .hitrate-badges {
    grid-row: 2;
    grid-column: 1 / -1;
}

/* ========== HIT RATE BADGES ========== */
.hitrate-badges {
    display: flex;
    flex-direction: row;
    gap: 8px;
    width: 100%;
    overflow-x: auto;
    padding: 4px 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.hitrate-badges::-webkit-scrollbar {
    display: none;
}

.hitrate-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
    min-width: 52px;
    flex-shrink: 0;
}

.hitrate-badge .hr-label {
    font-size: 9px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    margin-bottom: 2px;
}

.hitrate-badge .hr-value {
    font-size: 13px;
    font-weight: 700;
}

.hitrate-badge.green .hr-value { color: var(--green); }
.hitrate-badge.yellow .hr-value { color: #f59e0b; }
.hitrate-badge.red .hr-value { color: var(--red); }
.hitrate-badge.neutral .hr-value { color: var(--text-secondary); }

/* Odds column for hit rates view */
.odds-col {
    text-align: center;
    min-width: 50px;
}

.odds-col .odds-label {
    font-size: 9px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    margin-bottom: 2px;
}

.odds-col .odds-val {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

/* ========== TRENDING FILTERS ========== */
.trending-filters-section {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.trending-filters-section::-webkit-scrollbar { display: none; }

.trending-label {
    color: var(--text-tertiary);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.trending-buttons {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.trending-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-light);
    border-radius: 20px;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.trending-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--text-tertiary);
}

.trending-btn.active {
    background: rgba(0, 217, 163, 0.15);
    border-color: var(--green);
    color: var(--green);
}

.trending-btn .toggle-icon {
    font-weight: 700;
    transition: transform 0.2s;
}

.trending-btn.active .toggle-icon {
    transform: rotate(45deg);
}

/* Filter Sliders */
.filter-slider {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin: 0;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--border);
}

.slider-name {
    color: var(--text-tertiary);
    font-size: 12px;
    min-width: 60px;
    font-weight: 500;
}

.slider-container {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.slider-container input[type="range"] {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    outline: none;
}

.slider-container input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: var(--green);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.slider-container input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--green);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.slider-value {
    color: var(--green);
    font-weight: 600;
    font-size: 14px;
    min-width: 28px;
    text-align: center;
}

/* Bar Overlay for Trending Stats */
.bar-with-overlay {
    position: relative;
}

.bar-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px dashed rgba(255, 255, 255, 0.5);
    border-bottom: none;
    border-radius: 3px 3px 0 0;
    pointer-events: none;
}

.bar-overlay-label {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

/* Minutes Top Bar (Props.Cash style - black box with white border on top) */
.minutes-top-bar {
    width: 100%;
    max-width: 32px;
    min-height: 18px;
    background: #0a0a0a;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: -1px;
    padding: 2px 4px;
}

.minutes-top-val {
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    line-height: 1;
}

/* Bar Minutes Box (Props.Cash style - quadradinho preto acima da barra) */
.bar-minutes-box {
    width: 100%;
    max-width: 24px;
    min-height: 16px;
    background: #111;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    border-bottom: none;
    border-radius: 3px 3px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto -1px auto;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

/* FGA Top Bar (Props.Cash style - yellow/orange bar on top) */
.fga-top-bar {
    width: 100%;
    max-width: 28px;
    background: linear-gradient(to bottom, #cc9900 0%, #996600 100%);
    border: 1px solid #ffcc00;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: -1px;
}

.fga-top-val {
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

/* When top bars are present, adjust the stat bar */
.bar-column:has(.minutes-top-bar) .bar,
.bar-column:has(.fga-top-bar) .bar {
    border-radius: 0 0 4px 4px;
}

/* When both filters active, minutes on top of fga */
.bar-column:has(.minutes-top-bar):has(.fga-top-bar) .minutes-top-bar {
    border-radius: 4px 4px 0 0;
}

.bar-column:has(.minutes-top-bar):has(.fga-top-bar) .fga-top-bar {
    border-radius: 0;
}

/* Multiple avg badges */
.avg-badges-container {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 16px;
}

.avg-badges-container .avg-badge {
    margin: 0;
}

/* ========== DESKTOP RESPONSIVE LAYOUT ========== */

/* Tablet and up (768px+) */
@media (min-width: 768px) {
    body {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .header,
    .game-selector,
    .league-tabs,
    .filter-section,
    .advanced-filters,
    .props-container,
    .bottom-filters {
        width: 100%;
        max-width: 1400px;
    }

    .header {
        padding: 16px 24px;
    }

    .logo-icon {
        font-size: 24px;
    }

    .logo-text {
        font-size: 22px;
    }

    .search-bar input {
        font-size: 16px;
        padding: 12px 18px 12px 45px;
    }

    .game-selector {
        padding: 16px 24px;
        gap: 12px;
    }

    .game-selector-btn {
        padding: 10px 18px;
        font-size: 14px;
    }

    .league-tabs {
        padding: 0 24px;
        gap: 32px;
    }

    .league-tab {
        font-size: 16px;
        padding: 14px 0;
    }

    .filter-section {
        padding: 16px 24px;
    }

    .market-pills {
        gap: 10px;
    }

    .market-pill {
        padding: 10px 20px;
        font-size: 14px;
    }

    .advanced-filters {
        padding: 16px 24px;
        gap: 12px;
    }

    .filter-dropdown {
        padding: 10px 16px;
        font-size: 13px;
    }

    /* Props List Grid Layout */
    .props-container {
        padding: 0 24px 100px;
    }

    .game-header {
        padding: 16px 20px;
    }

    .game-teams {
        font-size: 16px;
    }

    .game-time {
        font-size: 13px;
    }

    /* Player Row - Desktop */
    .player-row {
        grid-template-columns: 50px 1fr 60px 200px;
        padding: 16px 20px;
        gap: 16px;
    }

    .player-photo {
        width: 50px;
        height: 50px;
    }

    .player-photo .photo-fallback {
        font-size: 18px;
    }

    .player-name {
        font-size: 16px;
    }

    .player-team {
        font-size: 13px;
    }

    .direction {
        font-size: 11px;
        padding: 3px 8px;
    }

    .line-value {
        font-size: 15px;
    }

    .market-type {
        font-size: 14px;
    }

    .edge-col {
        min-width: 50px;
    }

    .edge-label {
        font-size: 10px;
    }

    .edge-value {
        font-size: 18px;
    }

    .mini-chart {
        min-width: 180px;
        height: 50px;
        gap: 3px;
    }

    .mini-bar {
        width: 14px;
    }

    /* Bottom Filters */
    .bottom-filters {
        padding: 16px 24px;
    }

    .period-btn {
        padding: 10px 16px;
        font-size: 14px;
    }

    .bottom-action-btn {
        font-size: 20px;
    }

    /* Modal - Desktop */
    .modal {
        display: flex !important;
        visibility: hidden;
        opacity: 0;
        justify-content: center;
        align-items: center;
        background: rgba(0, 0, 0, 0.8);
        padding: 40px;
    }

    .modal.open {
        visibility: visible;
        opacity: 1;
    }

    .modal #modalContent {
        max-width: 900px;
        width: 100%;
        max-height: 90vh;
        overflow-y: auto;
        background: var(--bg-primary);
        border-radius: 16px;
        border: 1px solid var(--border-light);
    }

    /* Player Card in Modal */
    .player-card {
        padding: 24px;
        gap: 20px;
    }

    .player-full-name {
        font-size: 22px;
    }

    .player-position-team {
        font-size: 15px;
    }

    /* Chart Section */
    .chart-section {
        padding: 20px 24px;
    }

    .chart-area {
        height: 180px;
    }

    .chart-y-axis {
        height: 180px;
        min-width: 45px;
    }

    .bars-container {
        height: 180px;
    }

    .bar-column {
        max-width: 50px;
    }

    .bar {
        max-width: 40px;
    }

    .bar-val {
        font-size: 13px;
    }

    .bar-date {
        font-size: 11px;
    }

    .bar-opp {
        font-size: 11px;
    }

    /* Pct Filters */
    .pct-filters {
        padding: 0 24px;
    }

    .pct-filter {
        padding: 14px 20px;
        min-width: 80px;
    }

    .pct-filter-label {
        font-size: 13px;
    }

    .pct-filter-value {
        font-size: 18px;
    }

    /* Books Section */
    .books-section {
        padding: 20px 24px;
    }

    .books-header {
        grid-template-columns: 1fr 80px 80px 80px 40px;
    }

    .books-header span {
        font-size: 12px;
    }

    .book-row {
        grid-template-columns: 1fr 80px 80px 80px 40px;
        padding: 14px 0;
    }

    .book-name {
        font-size: 16px;
    }

    .book-line,
    .book-over,
    .book-under {
        font-size: 16px;
    }

    /* Hit Rate Mode - Desktop */
    .player-row.hitrates-mode {
        grid-template-columns: 50px 1fr;
    }

    .hitrate-badges {
        gap: 10px;
    }

    .hitrate-badge {
        padding: 8px 16px;
        min-width: 60px;
    }

    .hitrate-badge .hr-label {
        font-size: 10px;
    }

    .hitrate-badge .hr-value {
        font-size: 15px;
    }

    /* Odds Modal */
    .odds-modal-content {
        max-width: 600px;
        border-radius: 16px;
        margin: auto;
    }

    /* Loading State */
    .loading-state {
        padding: 80px 20px;
    }

    .spinner {
        width: 40px;
        height: 40px;
    }

    .loading-text {
        font-size: 16px;
    }
}

/* Large Desktop (1024px+) */
@media (min-width: 1024px) {
    .header {
        padding: 20px 32px;
    }

    .logo-icon {
        font-size: 26px;
    }

    .logo-text {
        font-size: 24px;
    }

    .header-btn {
        font-size: 20px;
        padding: 6px;
    }

    .search-bar {
        max-width: 600px;
    }

    .game-selector {
        padding: 20px 32px;
        gap: 16px;
    }

    .game-selector-btn {
        padding: 12px 24px;
        font-size: 15px;
    }

    .league-tabs {
        padding: 0 32px;
        gap: 40px;
    }

    .league-tab {
        font-size: 17px;
        padding: 16px 0;
    }

    .filter-section {
        padding: 20px 32px;
    }

    .market-pill {
        padding: 12px 24px;
        font-size: 15px;
    }

    .advanced-filters {
        padding: 20px 32px;
    }

    .filter-dropdown {
        padding: 12px 20px;
        font-size: 14px;
    }

    .props-container {
        padding: 0 32px 120px;
    }

    /* Player Row - Large Desktop */
    .player-row {
        grid-template-columns: 60px 1fr 70px 250px;
        padding: 18px 24px;
        gap: 20px;
    }

    .player-photo {
        width: 60px;
        height: 60px;
    }

    .player-photo .photo-fallback {
        font-size: 22px;
    }

    .player-name {
        font-size: 18px;
    }

    .player-team {
        font-size: 14px;
    }

    .direction {
        font-size: 12px;
        padding: 4px 10px;
    }

    .line-value {
        font-size: 17px;
    }

    .market-type {
        font-size: 15px;
    }

    .edge-col {
        min-width: 60px;
    }

    .edge-value {
        font-size: 20px;
    }

    .mini-chart {
        min-width: 220px;
        height: 55px;
        gap: 4px;
    }

    .mini-bar {
        width: 16px;
    }

    /* Bottom Filters */
    .bottom-filters {
        padding: 20px 32px;
    }

    .period-btn {
        padding: 12px 20px;
        font-size: 15px;
    }

    /* Modal */
    .modal #modalContent {
        max-width: 1000px;
    }

    .player-card {
        padding: 28px 32px;
    }

    .player-full-name {
        font-size: 24px;
    }

    .chart-section {
        padding: 24px 32px;
    }

    .chart-area {
        height: 200px;
    }

    .chart-y-axis {
        height: 200px;
    }

    .bars-container {
        height: 200px;
    }

    .pct-filter {
        padding: 16px 24px;
        min-width: 90px;
    }

    .pct-filter-value {
        font-size: 20px;
    }

    /* Hit Rate - Large Desktop */
    .player-row.hitrates-mode {
        grid-template-columns: 60px 1fr;
    }

    .hitrate-badge {
        padding: 10px 20px;
        min-width: 70px;
    }

    .hitrate-badge .hr-label {
        font-size: 11px;
    }

    .hitrate-badge .hr-value {
        font-size: 17px;
    }
}

/* Extra Large Desktop (1400px+) */
@media (min-width: 1400px) {
    .header,
    .game-selector,
    .league-tabs,
    .filter-section,
    .advanced-filters,
    .props-container,
    .bottom-filters {
        max-width: 1600px;
    }

    .player-row {
        grid-template-columns: 70px 1fr 80px 300px;
        padding: 20px 28px;
    }

    .player-photo {
        width: 70px;
        height: 70px;
    }

    .player-photo .photo-fallback {
        font-size: 26px;
    }

    .player-name {
        font-size: 20px;
    }

    .player-team {
        font-size: 15px;
    }

    .line-value {
        font-size: 18px;
    }

    .edge-value {
        font-size: 22px;
    }

    .mini-chart {
        min-width: 270px;
        height: 60px;
    }

    .mini-bar {
        width: 18px;
    }
}

/* ========== ROSTER ACTIVITY (INJURIES) ========== */
.roster-activity {
    margin: 16px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid var(--border);
}

.roster-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.injury-team-badge {
    background: var(--bg-hover);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    color: var(--text-primary);
}

.injury-card {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    align-items: flex-start;
}

.injury-card:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.injury-status {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 70px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-out .status-dot {
    background: var(--red);
}

.status-out {
    color: var(--red);
}

.status-dtd .status-dot {
    background: var(--yellow);
}

.status-dtd {
    color: var(--yellow);
}

.status-questionable .status-dot {
    background: #f59e0b;
}

.status-questionable {
    color: #f59e0b;
}

.injury-info {
    flex: 1;
}

.injury-player {
    display: flex;
    align-items: center;
    gap: 8px;
}

.injury-player strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.injury-pos {
    color: var(--text-tertiary);
    font-size: 11px;
}

.injury-type {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.no-injuries {
    color: var(--green);
    font-size: 13px;
    padding: 4px 0;
}

.loading-injuries {
    color: var(--text-secondary);
    font-size: 13px;
    padding: 8px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.loading-injuries i {
    color: var(--green);
}

.injury-impact {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 6px;
    line-height: 1.4;
}

.injury-impact .green {
    color: var(--green);
    font-weight: 600;
}

.injury-impact .red {
    color: var(--red);
    font-weight: 600;
}

/* View Selector Modal (Charts/Hit Rates toggle) */
.view-selector-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

.view-selector-overlay.active {
    display: block;
}

.view-selector-modal {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #1a1a2e;
    border-radius: 20px 20px 0 0;
    padding: 20px;
    z-index: 1000;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.view-selector-modal.active {
    display: block;
    transform: translateY(0);
}

.view-selector-handle {
    width: 40px;
    height: 4px;
    background: #444;
    border-radius: 2px;
    margin: 0 auto 15px;
}

.view-selector-header {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 20px;
    text-align: center;
}

.view-option {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s;
}

.view-option:hover {
    background: rgba(255, 255, 255, 0.05);
}

.view-option-radio {
    width: 22px;
    height: 22px;
    border: 2px solid #555;
    border-radius: 50%;
    position: relative;
}

.view-option-radio.active {
    border-color: #00dc82;
}

.view-option-radio.active::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: #00dc82;
    border-radius: 50%;
}

.view-option-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.view-option-title {
    font-size: 16px;
    font-weight: 500;
    color: #fff;
}

.view-option-desc {
    font-size: 13px;
    color: #888;
}

/* New Injury Card with Impact Value */
.injury-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.injury-card:last-child {
    border-bottom: none;
}

.injury-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.injury-player-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.injury-team {
    font-size: 12px;
    color: var(--text-tertiary);
}

.injury-impact-value {
    font-size: 14px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    white-space: nowrap;
}

.injury-impact-value.positive {
    color: var(--green);
    background: rgba(0, 220, 130, 0.1);
}

.injury-impact-value.negative {
    color: var(--red);
    background: rgba(239, 68, 68, 0.1);
}

/* Setas coloridas */
.arrow-up {
    color: #1DB954;
    font-weight: bold;
}

.arrow-down {
    color: #ff4444;
    font-weight: bold;
}

/* DvP Section - Defense vs Position */
.dvp-section {
    background: #1a1a2e;
    border-radius: 12px;
    padding: 16px;
    margin-top: 20px;
}

.dvp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.dvp-team-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dvp-team-name {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}

.dvp-game-date {
    color: #888;
    font-size: 12px;
}

.dvp-rank-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 3px solid;
}

.dvp-rank-circle.rank-good {
    border-color: #1DB954;
    background: rgba(29, 185, 84, 0.1);
}

.dvp-rank-circle.rank-bad {
    border-color: #ff4444;
    background: rgba(255, 68, 68, 0.1);
}

.dvp-rank-circle.rank-neutral {
    border-color: #ff9800;
    background: rgba(255, 152, 0, 0.1);
}

.rank-label {
    color: #888;
    font-size: 8px;
    text-transform: uppercase;
}

.rank-value {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
}

.dvp-stats {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    margin-bottom: 12px;
}

.dvp-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.dvp-stat-label {
    color: #888;
    font-size: 10px;
    text-transform: uppercase;
}

.dvp-stat-value {
    font-size: 14px;
    font-weight: 600;
}

.dvp-stat-value.stat-up {
    color: #1DB954;
}

.dvp-stat-value.stat-down {
    color: #ff4444;
}

.dvp-stat-value.rank-good {
    color: #1DB954;
}

.dvp-stat-value.rank-bad {
    color: #ff4444;
}

.dvp-stat-value.rank-neutral {
    color: #ff9800;
}

.dvp-matchup-btn {
    width: 100%;
    background: #222;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 12px;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}

.dvp-matchup-btn:hover {
    background: #333;
}

.dvp-matchup-btn i {
    color: #1DB954;
}

/* Roster Activity V2 - Props.Cash Style */
.roster-activity-v2 {
    background: transparent;
    padding: 16px 0;
    margin-top: 20px;
    border-top: 1px solid #333;
}

.roster-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.roster-header .roster-title {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
}

.roster-info {
    color: #666;
    cursor: pointer;
}

.injury-card-v2 {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid #222;
}

.injury-status-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 60px;
}

.injury-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.injury-dot.status-out {
    background: #ff4444;
}

.injury-dot.status-dtd {
    background: #ff9800;
}

.injury-status-text {
    color: #888;
    font-size: 11px;
}

.injury-content {
    flex: 1;
}

.injury-player-name {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 6px;
}

.injury-player-pos {
    color: #666;
    font-size: 12px;
    font-weight: 400;
}

.injury-impact-message {
    color: #999;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 10px;
}

.injury-stats-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #222;
    border: 1px solid #333;
    border-radius: 16px;
    padding: 6px 12px;
    color: #fff;
    font-size: 11px;
    cursor: pointer;
}

.injury-stats-btn i {
    color: #1DB954;
}

/* ========== ROSTER ACTIVITY V3 (Props Finder Style) ========== */
.roster-activity-v3 {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.roster-header-v3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.roster-title-v3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.roster-info-v3 {
    color: var(--text-tertiary);
    cursor: pointer;
    font-size: 14px;
    transition: color 0.15s;
}

.roster-info-v3:hover {
    color: var(--text-secondary);
}

.injury-cards-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.injury-card-v3 {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-secondary);
    border-radius: 10px;
    padding: 12px;
    border: 1px solid var(--border);
}

.injury-card-left {
    flex-shrink: 0;
}

.injury-status-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.injury-status-icon.injury-status-out {
    background: rgba(255, 68, 68, 0.15);
    color: var(--red);
}

.injury-status-icon.injury-status-dtd {
    background: rgba(255, 152, 0, 0.15);
    color: #ff9800;
}

.injury-card-center {
    flex: 1;
    min-width: 0;
}

.injury-player-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.injury-player-name-v3 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.injury-status-badge {
    font-size: 9px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    flex-shrink: 0;
}

.injury-status-badge.injury-status-out {
    background: rgba(255, 68, 68, 0.15);
    color: var(--red);
}

.injury-status-badge.injury-status-dtd {
    background: rgba(255, 152, 0, 0.15);
    color: #ff9800;
}

.injury-impact-text {
    font-size: 11px;
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.injury-card-right {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.injury-impact-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 40px;
    padding: 6px 8px;
    border-radius: 6px;
    background: var(--bg-primary);
}

.injury-impact-stat.impact-positive {
    border: 1px solid rgba(29, 185, 84, 0.3);
}

.injury-impact-stat.impact-negative {
    border: 1px solid rgba(255, 68, 68, 0.3);
}

.injury-impact-stat .impact-arrow {
    font-size: 10px;
    font-weight: 700;
}

.injury-impact-stat.impact-positive .impact-arrow {
    color: var(--green);
}

.injury-impact-stat.impact-negative .impact-arrow {
    color: var(--red);
}

.injury-impact-stat .impact-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.injury-impact-stat .impact-label {
    font-size: 8px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    font-weight: 500;
}

/* ========================================
   TABLE VIEW (Props.Cash Style)
   ======================================== */

/* Table Container */
.props-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0;
    padding: 0;
}

.props-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 900px;
}

.props-table th,
.props-table td {
    padding: 10px 8px;
    text-align: center;
    white-space: nowrap;
    border-bottom: 1px solid #222;
}

.props-table th {
    background: #111;
    color: #888;
    font-weight: 500;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.props-table th.sortable {
    cursor: pointer;
    user-select: none;
}

.props-table th.sortable:hover {
    color: #1DB954;
}

.props-table th .sort-icon {
    margin-left: 4px;
    opacity: 0.5;
}

.props-table th.sorted .sort-icon,
.props-table th.sort-asc .sort-icon,
.props-table th.sort-desc .sort-icon {
    opacity: 1;
    color: #1DB954;
}

.props-table th.sort-asc,
.props-table th.sort-desc {
    color: #1DB954;
}

/* Player Column */
.props-table td.player-col {
    text-align: left;
    min-width: 180px;
    position: sticky;
    left: 0;
    background: #0a0a0a;
    z-index: 5;
}

.props-table th.player-col {
    text-align: left;
    min-width: 180px;
    position: sticky;
    left: 0;
    z-index: 15;
}

.table-player-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.table-player-photo {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #222;
    object-fit: cover;
}

.table-player-details {
    display: flex;
    flex-direction: column;
}

.table-player-name {
    color: #fff;
    font-weight: 500;
    font-size: 13px;
}

.table-player-team {
    color: #666;
    font-size: 11px;
}

/* OUT Badge */
.out-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #ff4444;
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    margin-left: 6px;
}

.out-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
}

/* DTD Badge (Day-To-Day) */
.dtd-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #ff9800;
    color: #000;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    margin-left: 6px;
}

/* Line Column */
.table-line {
    font-weight: 600;
    color: #fff;
}

/* Odds Columns */
.table-odds {
    font-family: 'SF Mono', 'Monaco', monospace;
    font-size: 12px;
}

.table-odds.over {
    color: #1DB954;
}

.table-odds.under {
    color: #ff6b6b;
}

/* Streak Column */
.table-streak {
    font-weight: 600;
}

.table-streak.positive {
    color: #1DB954;
}

.table-streak.negative {
    color: #ff6b6b;
}

/* Hit Rate Columns */
.table-hitrate {
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 500;
    font-size: 12px;
    min-width: 45px;
}

.table-hitrate.hr-green {
    background: rgba(29, 185, 84, 0.2);
    color: #1DB954;
}

.table-hitrate.hr-yellow {
    background: rgba(255, 193, 7, 0.2);
    color: #ffc107;
}

.table-hitrate.hr-red {
    background: rgba(255, 107, 107, 0.2);
    color: #ff6b6b;
}

.table-hitrate.hr-neutral {
    background: rgba(136, 136, 136, 0.1);
    color: #666;
}

/* PROJ/DIFF Columns */
.table-proj {
    color: #888;
    font-size: 12px;
}

.table-diff {
    font-weight: 600;
    font-size: 12px;
}

.table-diff.positive {
    color: #1DB954;
}

.table-diff.negative {
    color: #ff6b6b;
}

/* DVP Column */
.table-dvp {
    font-weight: 500;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
}

.table-dvp.dvp-good {
    background: rgba(29, 185, 84, 0.2);
    color: #1DB954;
}

.table-dvp.dvp-neutral {
    background: rgba(136, 136, 136, 0.1);
    color: #888;
}

.table-dvp.dvp-bad {
    background: rgba(255, 107, 107, 0.2);
    color: #ff6b6b;
}

/* Table Row Hover */
.props-table tbody tr {
    cursor: pointer;
    transition: background 0.15s ease;
}

.props-table tbody tr:hover {
    background: rgba(29, 185, 84, 0.05);
}

/* Game Header Row in Table */
.props-table .game-header-row td {
    background: #111;
    padding: 12px 8px;
    font-weight: 500;
    color: #1DB954;
    text-align: left;
    border-bottom: 2px solid #1DB954;
}

.props-table .game-header-row td .game-time {
    color: #666;
    font-weight: 400;
    margin-left: 12px;
    font-size: 11px;
}

/* View Mode Selector Update */
.view-option[data-view="table"] .view-option-title::before {
    content: "\f0ce"; /* Font Awesome table icon */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 8px;
}

/* Mobile Adjustments for Table */
@media (max-width: 768px) {
    .props-table {
        font-size: 11px;
        min-width: 700px;
    }

    .props-table th,
    .props-table td {
        padding: 8px 4px;
    }

    .table-player-photo {
        width: 24px;
        height: 24px;
    }

    .table-player-name {
        font-size: 11px;
    }

    .props-table td.player-col {
        min-width: 140px;
    }

    /* Hide some columns on mobile */
    .props-table .hide-mobile {
        display: none;
    }
}

/* ========== SHARE CARD STYLES ========== */

.share-card-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.share-card-modal.open {
    opacity: 1;
    visibility: visible;
}

.share-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
}

.share-card-container {
    position: relative;
    z-index: 1;
    max-width: 380px;
    width: 90%;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.share-card-modal.open .share-card-container {
    transform: scale(1);
}

.share-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    color: white;
    font-size: 16px;
    font-weight: 600;
}

.share-card-close {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
}

.share-card {
    background: #0a0a0a;
    border-radius: 16px;
    overflow: hidden;
    padding: 24px 20px;
}

/* Card Quadrado otimizado para 1080x1080 (Telegram/Instagram) */
.share-card.share-card-square {
    width: 360px;
    height: auto;
    min-height: 440px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

/* Header Row: Logo + Photo lado a lado */
.share-card-header-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    margin-bottom: 8px;
}

/* Logo Duarte */
.share-card-logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.share-card-header-row .share-card-logo {
    margin-bottom: 0;
}

.share-logo-img {
    height: 65px;
    width: 65px;
    object-fit: contain;
    border-radius: 50%;
}

/* Player Photo */
.share-card-photo {
    display: flex;
    justify-content: center;
}

.share-card-header-row .share-card-photo {
    margin-bottom: 0;
}

.share-card-photo img,
.share-card-photo .player-photo-placeholder,
.share-card-photo .player-photo,
.share-card-photo .player-photo-large {
    width: 65px !important;
    height: 65px !important;
    min-width: 65px !important;
    min-height: 65px !important;
    border-radius: 50%;
    border: 2px solid #4ade80;
    object-fit: cover;
    background: #1a1a1a;
}

.share-card-photo .player-photo-placeholder {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    font-size: 24px;
    color: #555;
}

.share-card-name {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: white;
    margin-bottom: 2px;
}

.share-card-team {
    text-align: center;
    font-size: 12px;
    color: #4ade80;
    margin-bottom: 10px;
}

.share-card-square .share-card-team {
    margin-bottom: 6px;
}

.share-card-line-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
    padding: 8px 12px;
    background: rgba(30, 30, 30, 0.9);
    border-radius: 8px;
    position: relative;
    z-index: 2;
}

.share-card-line,
.share-card-odds,
.share-card-avg,
.share-card-conf {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.share-line-label,
.share-odds-label,
.share-avg-label,
.share-conf-label {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.share-conf-value {
    font-size: 18px;
    font-weight: 700;
}

.share-conf-value.good {
    color: #4ade80;
}

.share-conf-value.bad {
    color: #ef4444;
}

.share-line-value {
    font-size: 16px;
    font-weight: 600;
    color: white;
}

.share-over-indicator {
    color: #4ade80;
    font-weight: 700;
    margin-right: 4px;
}

.share-odds-value,
.share-avg-value {
    font-size: 18px;
    font-weight: 700;
    color: white;
}

.share-card-period {
    text-align: center;
    font-size: 11px;
    color: #4ade80;
    font-weight: 600;
    margin-bottom: 8px;
    padding: 3px 10px;
    background: rgba(74, 222, 128, 0.1);
    border-radius: 10px;
    display: inline-block;
    margin-left: 50%;
    transform: translateX(-50%);
}

/* Chart Section - REDESIGNED */
.share-card-chart {
    position: relative;
    margin-bottom: 12px;
    padding: 0 4px;
}

/* Chart menor para card quadrado */
.share-card-square .share-card-chart {
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
    overflow: visible;
}

.share-card-square .share-chart-area {
    min-height: 140px;
    max-height: 140px;
    position: relative;
    overflow: visible;
}

.share-card-square .share-bars {
    height: 120px;
    overflow: visible;
}

.share-card-square .share-bar {
    max-height: 100px;
}

.share-card-square .share-chart-y-axis {
    bottom: 34px;
}

/* Mostrar valores das barras no card quadrado */
.share-card-square .share-bar-val {
    display: block !important;
    font-size: 9px;
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 3px rgba(0,0,0,0.9);
    position: relative;
    z-index: 10;
}

.share-chart-y-axis {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 44px;
    width: 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 10px;
    color: #555;
    text-align: right;
    padding-right: 4px;
    z-index: 2;
}

.share-chart-y-axis span {
    line-height: 1;
}

.share-line-marker {
    color: #fff;
    font-weight: 700;
    font-size: 11px;
}

.share-chart-area {
    margin-left: 32px;
    position: relative;
    min-height: 140px;
}

.share-prop-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.5);
    z-index: 5;
    pointer-events: none;
}

.share-bars {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: 3px;
    height: 120px;
    padding: 0;
}

.share-bar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    max-width: 30px;
}

.share-bar {
    width: 100%;
    max-width: 24px;
    border-radius: 4px 4px 0 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 3px;
    min-height: 14px;
    position: relative;
}

.share-bar.hit {
    background: linear-gradient(180deg, #4ade80 0%, #22c55e 100%);
}

.share-bar.miss {
    background: linear-gradient(180deg, #f87171 0%, #ef4444 100%);
}

.share-bar-val {
    font-size: 9px;
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

.share-bar-date {
    font-size: 8px;
    color: #777;
    margin-top: 5px;
    white-space: nowrap;
}

.share-bar-opp {
    font-size: 7px;
    color: #555;
    white-space: nowrap;
}

.share-card-analysis {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    flex: 1;
    overflow: hidden;
}

.share-card-analysis i {
    color: #4ade80;
    font-size: 14px;
    margin-top: 1px;
    flex-shrink: 0;
}

.share-card-analysis span {
    font-size: 11px;
    color: #e0e0e0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ========== SHARE CARD INJURIES ========== */
.share-card-injuries {
    background: linear-gradient(135deg, #2d1b1b 0%, #1a1a2e 100%);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    border-left: 3px solid #ef4444;
}

.share-injuries-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 11px;
    color: #ef4444;
    font-weight: 600;
}

.share-injuries-header i {
    font-size: 12px;
}

.share-injuries-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.share-injury-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: #e0e0e0;
}

.share-injury-status {
    font-size: 8px;
}

.share-injury-status.out {
    color: #ef4444;
}

.share-injury-status.dtd {
    color: #f59e0b;
}

.share-injury-name {
    flex: 1;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.share-injury-impact {
    font-weight: 600;
    font-size: 10px;
}

.share-injury-impact.up {
    color: #4ade80;
}

.share-injury-impact.down {
    color: #ef4444;
}

.share-card-footer {
    background: #4ade80;
    margin: 0 -20px -24px -20px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Footer para card quadrado */
.share-card-square .share-card-footer {
    margin: 0 -16px -16px -16px;
    padding: 10px 16px;
    margin-top: auto;
}

.share-card-footer span:first-child {
    font-size: 11px;
    color: rgba(0, 0, 0, 0.6);
    font-weight: 500;
}

.share-footer-brand {
    font-size: 14px;
    font-weight: 700;
    color: #000;
}

/* Share Card Actions */
.share-card-actions {
    display: flex;
    justify-content: center;
    padding: 16px;
    gap: 12px;
}

.share-save-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #4ade80, #22c55e);
    color: #000;
    border: none;
    border-radius: 12px;
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 180px;
}

.share-save-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 20px rgba(74, 222, 128, 0.4);
}

.share-save-btn:active {
    transform: scale(0.98);
}

.share-save-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.share-save-btn i {
    font-size: 16px;
}

/* Image Save Overlay (iOS fallback) */
.image-save-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10001;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.image-save-overlay.open {
    opacity: 1;
}

.image-save-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 95vw;
    max-height: 95vh;
}

.image-save-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 16px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}

.image-save-header button {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
}

.image-save-img {
    max-width: 90vw;
    max-height: 70vh;
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
    -webkit-touch-callout: default !important;
}

.image-save-tip {
    margin-top: 20px;
    padding: 12px 24px;
    background: rgba(74, 222, 128, 0.2);
    border-radius: 12px;
    color: #4ade80;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
}

.image-save-tip i {
    margin-right: 8px;
}

/* Screenshot Overlay - Tela cheia para print */
.screenshot-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    z-index: 10002;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.screenshot-overlay.open {
    opacity: 1;
}

.screenshot-hint-top {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    text-align: center;
    color: #4ade80;
    font-size: 18px;
    font-weight: 600;
    animation: pulse-hint 1.5s ease-in-out infinite;
}

.screenshot-hint-top i {
    margin-right: 8px;
}

@keyframes pulse-hint {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.05); }
}

.screenshot-card-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.screenshot-card-wrapper .share-card {
    transform: scale(1);
    box-shadow: 0 0 60px rgba(74, 222, 128, 0.3);
}

.screenshot-hint-bottom {
    position: absolute;
    bottom: 60px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
}

.screenshot-close-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 14px 32px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.screenshot-close-btn:active {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(0.95);
}

.screenshot-close-btn i {
    margin-right: 8px;
}

/* Mobile adjustments for share card */
@media (max-width: 380px) {
    .share-card {
        padding: 20px 16px;
    }

    .share-card-photo img,
    .share-card-photo .player-photo-placeholder,
    .share-card-photo .player-photo,
    .share-card-photo .player-photo-large {
        width: 80px !important;
        height: 80px !important;
        min-width: 80px !important;
        min-height: 80px !important;
    }

    .share-card-name {
        font-size: 20px;
    }

    .share-bars {
        gap: 2px;
        height: 100px;
    }

    .share-bar-col {
        max-width: 26px;
    }

    .share-bar {
        max-width: 20px;
    }

    .share-bar-val {
        font-size: 8px;
    }

    .share-bar-date {
        font-size: 7px;
    }

    .share-bar-opp {
        font-size: 6px;
    }

    .share-card-analysis span {
        font-size: 12px;
    }

    .share-card-footer {
        margin: 0 -16px -20px -16px;
    }
}

/* ========== TEAMMATE INJURY IMPACT STYLES ========== */
.teammate-injury-section {
    margin: 12px 16px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 12px;
    border: 1px solid rgba(74, 144, 226, 0.3);
    overflow: hidden;
}

.injury-impact-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(74, 144, 226, 0.15);
    color: #4a90e2;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.injury-impact-header i {
    font-size: 14px;
}

.injury-impact-content {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.injury-impact-boost {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: bold;
}

.injury-impact-boost.positive {
    color: #00d97e;
}

.injury-impact-boost.negative {
    color: #e63946;
}

.boost-arrow {
    font-size: 20px;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.boost-value {
    font-size: 22px;
    font-weight: 700;
}

.boost-stat {
    font-size: 12px;
    opacity: 0.8;
    text-transform: uppercase;
}

.injury-impact-desc {
    font-size: 12px;
    color: #a0a0b0;
    line-height: 1.4;
}

.injury-loading {
    padding: 16px;
    text-align: center;
    color: #666;
    font-size: 13px;
}

.injury-loading i {
    margin-right: 8px;
}

#teammateInjuryContainer:empty {
    display: none;
}

/* ========== INJURY IMPACT V2 STYLES ========== */
.injury-impact-stats {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
}

.impact-stat {
    flex: 1;
    text-align: center;
    padding: 8px;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
}

.impact-stat.highlight {
    background: rgba(74, 144, 226, 0.2);
}

.impact-stat.highlight.positive {
    background: rgba(0, 217, 126, 0.2);
}

.impact-stat.highlight.negative {
    background: rgba(230, 57, 70, 0.2);
}

.impact-label {
    display: block;
    font-size: 10px;
    color: #888;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.impact-value {
    display: block;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
}

.highlight.positive .impact-value {
    color: #00d97e;
}

.highlight.negative .impact-value {
    color: #e63946;
}

.injury-impact-desc {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
}

.rec-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
}

.rec-badge.positive {
    background: rgba(0, 217, 126, 0.2);
    color: #00d97e;
}

.rec-badge.negative {
    background: rgba(230, 57, 70, 0.2);
    color: #e63946;
}

.rec-badge.neutral {
    background: rgba(255,255,255,0.1);
    color: #888;
}

.games-info {
    color: #666;
}

/* Injury Games List */
.injury-games-list {
    margin-top: 12px;
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
    padding: 8px;
    max-height: 200px;
    overflow-y: auto;
}

.injury-games-header {
    display: grid;
    grid-template-columns: 50px 70px 45px 1fr;
    gap: 8px;
    padding: 6px 8px;
    font-size: 10px;
    color: #888;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 4px;
}

.injury-game-row {
    display: grid;
    grid-template-columns: 50px 70px 45px 1fr;
    gap: 8px;
    padding: 6px 8px;
    font-size: 12px;
    border-radius: 4px;
    transition: background 0.2s;
}

.injury-game-row:hover {
    background: rgba(255,255,255,0.05);
}

.injury-game-date {
    color: #888;
    font-size: 11px;
}

.injury-game-opp {
    color: #ccc;
    font-size: 11px;
}

.injury-game-stat {
    color: var(--primary);
    font-weight: 600;
    text-align: center;
}

.injury-game-details {
    color: #666;
    font-size: 10px;
    text-align: right;
}

/* Desktop Injury Impact Section */
.teammate-injury-section.desktop {
    background: var(--card-bg);
    border-radius: 12px;
    margin: 16px 0;
    overflow: hidden;
}

.teammate-injury-section.desktop .injury-impact-header {
    background: linear-gradient(135deg, #e74c3c33 0%, #c0392b22 100%);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #e74c3c;
    font-size: 13px;
    text-transform: uppercase;
}

.teammate-injury-section.desktop .injury-impact-header i {
    font-size: 16px;
}

.teammate-injury-section.desktop .injury-impact-content {
    padding: 16px;
}

.teammate-injury-section.desktop .injury-impact-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
}

.teammate-injury-section.desktop .impact-stat {
    flex: 1;
    text-align: center;
    padding: 12px;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
}

.teammate-injury-section.desktop .impact-stat .impact-label {
    display: block;
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.teammate-injury-section.desktop .impact-stat .impact-value {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.teammate-injury-section.desktop .impact-stat.highlight.positive .impact-value {
    color: var(--success);
}

.teammate-injury-section.desktop .impact-stat.highlight.negative .impact-value {
    color: var(--danger);
}

.teammate-injury-section.desktop .injury-impact-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.teammate-injury-section.desktop .rec-badge {
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
}

.teammate-injury-section.desktop .rec-badge.positive {
    background: var(--success);
    color: #000;
}

.teammate-injury-section.desktop .rec-badge.negative {
    background: var(--danger);
    color: #fff;
}

.teammate-injury-section.desktop .games-info {
    color: var(--text-secondary);
    font-size: 12px;
}

.teammate-injury-section.desktop .injury-games-list {
    background: rgba(0,0,0,0.2);
    border-top: 1px solid rgba(255,255,255,0.05);
    max-height: 250px;
    overflow-y: auto;
}

.teammate-injury-section.desktop .injury-games-header {
    display: grid;
    grid-template-columns: 60px 80px 60px 1fr;
    gap: 10px;
    padding: 10px 16px;
    font-size: 10px;
    color: var(--text-secondary);
    text-transform: uppercase;
    background: rgba(0,0,0,0.3);
    position: sticky;
    top: 0;
}

.teammate-injury-section.desktop .injury-game-row {
    display: grid;
    grid-template-columns: 60px 80px 60px 1fr;
    gap: 10px;
    padding: 10px 16px;
    font-size: 13px;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}

.teammate-injury-section.desktop .injury-game-row:hover {
    background: rgba(255,255,255,0.02);
}

.teammate-injury-section.desktop .injury-game-stat {
    font-weight: 600;
    color: var(--primary);
}

/* Injury Impact Loading Bar */
.teammate-injury-section.loading {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.05));
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 12px;
    padding: 16px;
    margin: 16px 0;
}

.injury-loading-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 12px;
}

.injury-loading-progress {
    height: 100%;
    width: 30%;
    background: linear-gradient(90deg, #10b981, #34d399);
    border-radius: 2px;
    animation: loadingSlide 1.2s ease-in-out infinite;
}

@keyframes loadingSlide {
    0% { transform: translateX(-100%); width: 30%; }
    50% { width: 50%; }
    100% { transform: translateX(400%); width: 30%; }
}

/* ========================================
   INJURY IMPACT V3 - New Layout with All Players
   ======================================== */

.injury-impact-section-v3 {
    background: #0f0f23;
    border-radius: 12px;
    padding: 16px;
    margin: 12px 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.injury-section-title {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.injury-section-title i {
    color: #f59e0b;
}

/* Boost Summary Cards */
.boost-summary {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.boost-card {
    flex: 1;
    background: #1a1a2e;
    border-radius: 8px;
    padding: 12px 8px;
    text-align: center;
}

.boost-card .boost-label {
    display: block;
    font-size: 10px;
    color: #888;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.boost-card .boost-value {
    font-size: 20px;
    font-weight: bold;
    color: #fff;
}

.boost-card .boost-value.dim {
    color: #555;
}

.boost-card .boost-value.highlight {
    color: #fff;
}

.boost-card .boost-value.green {
    color: #00ff88;
}

.boost-card.boost-total {
    background: linear-gradient(135deg, #1a472a, #0f0f23);
    border: 1px solid rgba(0, 255, 136, 0.25);
}

/* Injured Players List */
.injured-list-v3 {
    margin-bottom: 12px;
}

.injured-list-title {
    font-size: 11px;
    color: #888;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.injured-item-v3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.injured-item-v3:last-child {
    border-bottom: none;
}

.injured-player-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.injured-name {
    color: #fff;
    font-size: 13px;
    font-weight: 500;
}

.injured-avg {
    color: #666;
    font-size: 11px;
}

.injured-boost {
    color: #00ff88;
    font-weight: bold;
    font-size: 14px;
}

.injured-boost.negative {
    color: #ff4757;
}

/* History Section - Collapsible */
.injury-history-section {
    margin-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 12px;
}

.injury-history-section summary {
    color: #888;
    cursor: pointer;
    font-size: 12px;
    padding: 6px 0;
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}

.injury-history-section summary:hover {
    color: #aaa;
}

.injury-history-section summary::marker {
    color: #555;
}

.injury-history-section[open] summary {
    color: #00ff88;
    margin-bottom: 10px;
}

.injury-history-content {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 8px;
    max-height: 200px;
    overflow-y: auto;
}

.injury-history-header {
    display: grid;
    grid-template-columns: 50px 70px 50px 1fr;
    gap: 8px;
    padding: 6px 8px;
    font-size: 10px;
    color: #666;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 4px;
}

.injury-history-row {
    display: grid;
    grid-template-columns: 50px 70px 50px 1fr;
    gap: 8px;
    padding: 6px 8px;
    font-size: 12px;
    color: #ccc;
    border-radius: 4px;
}

.injury-history-row:hover {
    background: rgba(255, 255, 255, 0.05);
}

.injury-history-row .stat-value {
    font-weight: 600;
    color: #00ff88;
}

.injury-history-row .stat-value.miss {
    color: #ff4757;
}

.injury-hit-rate {
    margin-top: 10px;
    padding: 10px 12px;
    background: rgba(0, 255, 136, 0.1);
    border-radius: 6px;
    font-size: 12px;
    color: #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.injury-hit-rate .rate-value {
    font-weight: bold;
    color: #00ff88;
}

.injury-hit-rate .rate-value.low {
    color: #ff4757;
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .injury-impact-section-v3 {
        margin: 12px;
        padding: 14px;
    }

    .boost-card .boost-value {
        font-size: 18px;
    }

    .boost-card .boost-label {
        font-size: 9px;
    }
}

/* ========================================
   SHOT ZONES - Basketball Court Visualization
   ======================================== */

.shot-zones-section {
    background: var(--bg-card);
    border-radius: 12px;
    margin: 16px 0;
    overflow: hidden;
}

.shot-zones-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    cursor: pointer;
    transition: background 0.2s;
}

.shot-zones-header:hover {
    background: var(--bg-hover);
}

.shot-zones-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}

.shot-zones-title i {
    color: var(--green);
    font-size: 16px;
}

.shot-zones-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
}

.shot-zones-badge {
    background: rgba(0, 217, 163, 0.15);
    color: var(--green);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}

.shot-zones-icon {
    color: var(--text-tertiary);
    font-size: 12px;
    transition: transform 0.3s ease;
}

.shot-zones-content {
    padding: 0 16px 16px;
}

.shot-zones-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--text-tertiary);
    gap: 12px;
}

.shot-zones-loading .spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--border);
    border-top-color: var(--green);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.shot-zones-error,
.shot-zones-empty {
    text-align: center;
    padding: 30px 20px;
    color: var(--text-tertiary);
    font-size: 13px;
}

.shot-zones-chart {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.court-svg {
    width: 100%;
    max-width: 320px;
    height: auto;
    border-radius: 8px;
    overflow: hidden;
}

.court-svg .zone-pct {
    fill: white;
    font-size: 12px;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.court-svg .zone-count {
    fill: rgba(255, 255, 255, 0.75);
    font-size: 9px;
    font-weight: 500;
}

.shot-zone:hover rect {
    stroke: white;
    stroke-width: 2;
}

.shot-zones-summary {
    display: flex;
    justify-content: center;
    gap: 24px;
    padding: 12px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    width: 100%;
}

.shot-zones-summary .summary-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.shot-zones-summary .stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.shot-zones-summary .stat-label {
    font-size: 11px;
    color: var(--text-tertiary);
    text-transform: uppercase;
}

.shot-zones-summary .summary-stat.good .stat-value {
    color: var(--green);
}

.shot-zones-summary .summary-stat.bad .stat-value {
    color: var(--red);
}

.shot-zones-legend {
    display: flex;
    justify-content: center;
    gap: 16px;
    font-size: 11px;
    color: var(--text-secondary);
}

.shot-zones-legend .legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.shot-zones-legend .dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.shot-zones-legend .dot.good {
    background: rgba(46, 204, 113, 0.7);
}

.shot-zones-legend .dot.mid {
    background: rgba(241, 196, 15, 0.7);
}

.shot-zones-legend .dot.bad {
    background: rgba(231, 76, 60, 0.7);
}

/* Desktop adjustments */
@media (min-width: 1024px) {
    .shot-zones-section {
        margin: 20px 0;
    }

    .court-svg {
        max-width: 360px;
    }

    .shot-zones-summary .stat-value {
        font-size: 24px;
    }
}

/* ========== SHOT CHARTS SECTION (NEW) ========== */
.shot-charts-section {
    margin: 20px 16px;
    background: var(--bg-card);
    border-radius: 12px;
    padding: 16px;
}

.shot-charts-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.shot-charts-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.shot-charts-info {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--text-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--text-tertiary);
    cursor: pointer;
}

/* Shot Charts Tabs (Player, Edge, Defense) */
.shot-charts-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 12px;
    background: var(--bg-input);
    border-radius: 8px;
    padding: 3px;
}

.shot-chart-tab {
    flex: 1;
    padding: 10px 12px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.shot-chart-tab.active {
    background: var(--green);
    color: #000;
    font-weight: 600;
}

.shot-chart-tab:hover:not(.active) {
    color: var(--text-primary);
}

/* Period Filters (SZN, L5, L10, L20, H2H) */
.shot-period-filters {
    display: flex;
    gap: 0;
    margin-bottom: 16px;
    background: var(--bg-input);
    border-radius: 8px;
    padding: 3px;
}

.shot-period-btn {
    flex: 1;
    padding: 8px 8px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.2s ease;
}

.shot-period-btn.active {
    background: var(--green);
    color: #000;
    font-weight: 600;
}

.shot-period-btn:hover:not(.active) {
    color: var(--text-primary);
}

/* Court Visual Container */
.shot-court-container {
    position: relative;
    background: var(--bg-input);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

/* Matchup Header (Player vs Team) */
.shot-matchup-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: 16px;
}

.shot-player-avatar,
.shot-team-logo {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-hover);
}

.shot-vs-text {
    font-size: 11px;
    color: var(--text-tertiary);
    font-weight: 500;
}

/* Legend */
.shot-legend {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 11px;
}

.shot-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
}

.shot-legend-item .shot-arrow {
    font-size: 10px;
    width: 14px;
    text-align: center;
}

.shot-legend-icon {
    width: 0;
    height: 0;
}

.shot-legend-icon.adv-player {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid var(--green);
}

.shot-legend-icon.neutral {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-tertiary);
}

.shot-legend-icon.adv-def {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 8px solid var(--red);
}

/* Basketball Court */
.shot-court {
    position: relative;
    width: 100%;
    aspect-ratio: 1.1;
    max-width: 320px;
    margin: 0 auto;
}

/* Court SVG Background */
.shot-court-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Zone Stats */
.shot-zone {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    z-index: 2;
}

.shot-zone-label {
    font-size: 9px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.shot-zone-value {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 16px;
    font-weight: 700;
}

.shot-zone-value.adv-player {
    color: var(--green);
}

.shot-zone-value.neutral {
    color: var(--text-secondary);
}

.shot-zone-value.adv-def {
    color: var(--red);
}

/* Shot Arrow Icons (Unicode triangles) */
.shot-arrow {
    font-size: 12px;
    margin-right: 2px;
}

.shot-arrow.up {
    color: var(--green);
}

.shot-arrow.neutral {
    color: var(--text-tertiary);
    font-size: 8px;
}

.shot-arrow.down {
    color: var(--red);
}

/* Legacy indicator styles (kept for compatibility) */
.shot-zone-indicator {
    width: 0;
    height: 0;
}

.shot-zone-indicator.up {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 7px solid var(--green);
}

.shot-zone-indicator.neutral {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-tertiary);
}

.shot-zone-indicator.down {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid var(--red);
}

/* Zone Positions */
.shot-zone.three {
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
}

.shot-zone.mid-range {
    top: 35%;
    left: 50%;
    transform: translateX(-50%);
}

.shot-zone.paint {
    top: 55%;
    left: 50%;
    transform: translateX(-50%);
}

.shot-zone.corner-left {
    bottom: 15%;
    left: 8%;
}

.shot-zone.corner-right {
    bottom: 15%;
    right: 8%;
}

.shot-zone.net {
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
}

/* Play Types Table */
.play-types-section {
    margin-top: 16px;
}

.play-types-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 10px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
}

.play-type-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    align-items: center;
}

.play-type-row:last-child {
    border-bottom: none;
}

.play-type-name {
    color: var(--text-primary);
    font-weight: 500;
}

.play-type-pts,
.play-type-pct {
    color: var(--text-secondary);
}

.play-type-rank {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
}

.play-type-rank.good {
    color: var(--green);
}

.play-type-rank.bad {
    color: var(--red);
}

.play-type-rank.neutral {
    color: var(--text-secondary);
}

.play-type-rank i {
    font-size: 10px;
}

/* Responsive adjustments for Shot Charts */
@media (max-width: 360px) {
    .shot-chart-tab {
        padding: 8px 8px;
        font-size: 12px;
    }

    .shot-period-btn {
        padding: 6px 4px;
        font-size: 11px;
    }

    .shot-zone-value {
        font-size: 14px;
    }

    .shot-zone-label {
        font-size: 8px;
    }
}

/* ========== CONFIDENCE ANALYSIS SECTION ========== */
.confidence-analysis-section {
    margin: 16px;
    background: var(--bg-card);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-light);
}

.confidence-analysis-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    cursor: pointer;
    transition: background 0.2s;
}

.confidence-analysis-header:hover {
    background: var(--bg-hover);
}

.confidence-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.confidence-header-left i {
    color: var(--green);
    font-size: 18px;
}

.confidence-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}

.confidence-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.confidence-total {
    font-weight: 700;
    font-size: 18px;
    padding: 4px 10px;
    border-radius: 6px;
}

.confidence-total.high {
    color: var(--green);
    background: rgba(0, 217, 163, 0.15);
}

.confidence-total.medium {
    color: var(--yellow);
    background: rgba(255, 184, 0, 0.15);
}

.confidence-total.low {
    color: var(--red);
    background: rgba(255, 68, 68, 0.15);
}

.confidence-header-right i {
    color: var(--text-secondary);
    font-size: 12px;
    transition: transform 0.3s;
}

.confidence-details {
    border-top: 1px solid var(--border-light);
    padding: 16px;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.confidence-explanation {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 16px;
    line-height: 1.5;
}

.confidence-pilares {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.confidence-pilar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-input);
    border-radius: 8px;
}

.confidence-pilar .pilar-info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 140px;
}

.confidence-pilar .pilar-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-hover);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 12px;
}

.confidence-pilar .pilar-nome {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
}

.confidence-pilar .pilar-barra {
    flex: 1;
    height: 6px;
    background: var(--bg-hover);
    border-radius: 3px;
    overflow: hidden;
}

.confidence-pilar .pilar-progresso {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.confidence-pilar .pilar-valor {
    min-width: 50px;
    text-align: right;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.pilar-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    background: var(--bg-input);
    border-radius: 8px;
}

.pilar-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pilar-nome {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
}

.pilar-explicacao {
    font-size: 11px;
    color: var(--text-tertiary);
}

.pilar-stats {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

.pilar-valor {
    font-weight: 600;
    font-size: 12px;
    min-width: 80px;
}

.pilar-valor.green {
    color: var(--green);
}

.pilar-valor.yellow {
    color: var(--yellow);
}

.pilar-valor.red {
    color: var(--red);
}

.pilar-barra {
    flex: 1;
    height: 6px;
    background: var(--bg-secondary);
    border-radius: 3px;
    overflow: hidden;
}

.pilar-barra-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}

.pilar-barra-fill.green {
    background: var(--green);
}

.pilar-barra-fill.yellow {
    background: var(--yellow);
}

.pilar-barra-fill.red {
    background: var(--red);
}

.pilar-pontos {
    font-size: 11px;
    color: var(--text-secondary);
    min-width: 40px;
    text-align: right;
}

.confidence-total-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
}

.total-label {
    font-weight: 700;
    font-size: 12px;
    color: var(--text-primary);
    min-width: 120px;
}

.total-barra {
    flex: 1;
    height: 10px;
    background: var(--bg-secondary);
    border-radius: 5px;
    overflow: hidden;
}

.total-barra-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.5s ease;
}

.total-barra-fill.high {
    background: linear-gradient(90deg, var(--green-dark), var(--green));
}

.total-barra-fill.medium {
    background: linear-gradient(90deg, #CC9400, var(--yellow));
}

.total-barra-fill.low {
    background: linear-gradient(90deg, var(--red-dark), var(--red));
}

.total-valor {
    font-weight: 700;
    font-size: 14px;
    min-width: 55px;
    text-align: right;
}

.total-valor.high {
    color: var(--green);
}

.total-valor.medium {
    color: var(--yellow);
}

.total-valor.low {
    color: var(--red);
}

/* ========== CONFIDENCE CIRCLE (ao lado do Confronto) ========== */
.matchup-confidence-row {
    display: flex;
    gap: 12px;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}

.confidence-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s;
}

.confidence-circle:hover {
    transform: scale(1.05);
}

.confidence-circle:active {
    transform: scale(0.95);
}

.confidence-label {
    font-size: 9px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.confidence-grade {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    border: 3px solid;
    position: relative;
}

/* Info icon indicator that it's clickable */
.confidence-grade::after {
    content: 'ⓘ';
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 12px;
    background: var(--bg-primary);
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
}

.confidence-grade.high {
    color: var(--green);
    border-color: var(--green);
    background: rgba(0, 217, 163, 0.1);
}

.confidence-grade.high::after {
    color: var(--green);
}

.confidence-grade.medium {
    color: var(--yellow);
    border-color: var(--yellow);
    background: rgba(255, 184, 0, 0.1);
}

.confidence-grade.medium::after {
    color: var(--yellow);
}

.confidence-grade.low {
    color: var(--red);
    border-color: var(--red);
    background: rgba(255, 68, 68, 0.1);
}

.confidence-grade.low::after {
    color: var(--red);
}

/* ========== CONFIDENCE MODAL (Popup) ========== */
.confidence-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
}

.confidence-modal.open {
    display: block;
}

.confidence-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
}

.confidence-modal-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 85vh;
    background: var(--bg-card);
    border-radius: 20px 20px 0 0;
    padding: 20px;
    overflow-y: auto;
    animation: slideUpModal 0.3s ease;
}

@keyframes slideUpModal {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

.confidence-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.confidence-modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.confidence-modal-title i {
    color: var(--green);
}

.confidence-modal-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-input);
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.confidence-modal-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.confidence-modal-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.score-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 4px solid;
    margin-bottom: 8px;
}

.score-circle.high {
    border-color: var(--green);
    background: rgba(0, 217, 163, 0.1);
}

.score-circle.medium {
    border-color: var(--yellow);
    background: rgba(255, 184, 0, 0.1);
}

.score-circle.low {
    border-color: var(--red);
    background: rgba(255, 68, 68, 0.1);
}

.score-value {
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
}

.score-circle.high .score-value { color: var(--green); }
.score-circle.medium .score-value { color: var(--yellow); }
.score-circle.low .score-value { color: var(--red); }

.score-max {
    font-size: 14px;
    color: var(--text-secondary);
}

.score-label {
    font-size: 14px;
    font-weight: 600;
}

.confidence-modal-score.high .score-label { color: var(--green); }
.confidence-modal-score.medium .score-label { color: var(--yellow); }
.confidence-modal-score.low .score-label { color: var(--red); }

.confidence-modal-explanation {
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 20px;
    line-height: 1.5;
}

.confidence-modal-pilares {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
}

.pilar-item {
    background: var(--bg-input);
    border-radius: 12px;
    padding: 14px;
}

.pilar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.pilar-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.pilar-score {
    font-size: 13px;
    font-weight: 700;
}

.pilar-score.green { color: var(--green); }
.pilar-score.yellow { color: var(--yellow); }
.pilar-score.red { color: var(--red); }

.pilar-bar-container {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}

.pilar-bar-bg {
    flex: 1;
    height: 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
    overflow: hidden;
}

.pilar-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.pilar-bar-fill.green { background: var(--green); }
.pilar-bar-fill.yellow { background: var(--yellow); }
.pilar-bar-fill.red { background: var(--red); }

.pilar-value {
    font-size: 12px;
    font-weight: 600;
    min-width: 70px;
    text-align: right;
}

.pilar-value.green { color: var(--green); }
.pilar-value.yellow { color: var(--yellow); }
.pilar-value.red { color: var(--red); }

.pilar-desc {
    font-size: 11px;
    color: var(--text-tertiary);
    line-height: 1.4;
}

.confidence-modal-total {
    background: var(--bg-input);
    border-radius: 12px;
    padding: 16px;
}

.total-bar-container {
    margin-bottom: 10px;
}

.total-bar-bg {
    height: 12px;
    background: var(--bg-secondary);
    border-radius: 6px;
    overflow: hidden;
}

.total-bar-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.5s ease;
}

.total-bar-fill.high { background: linear-gradient(90deg, var(--green-dark), var(--green)); }
.total-bar-fill.medium { background: linear-gradient(90deg, #CC9400, var(--yellow)); }
.total-bar-fill.low { background: linear-gradient(90deg, var(--red-dark), var(--red)); }

.total-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.total-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
}

.total-value {
    font-size: 18px;
    font-weight: 800;
}

.total-value.high { color: var(--green); }
.total-value.medium { color: var(--yellow); }
.total-value.low { color: var(--red); }

/* Desktop adjustments */
@media (min-width: 1024px) {
    .confidence-modal-content {
        position: absolute;
        bottom: auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 500px;
        max-height: 80vh;
        border-radius: 20px;
        animation: fadeInModal 0.3s ease;
    }

    @keyframes fadeInModal {
        from {
            opacity: 0;
            transform: translate(-50%, -50%) scale(0.9);
        }
        to {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }
    }
}

/* ========== MATCHUP MODAL (Props.Cash style) ========== */
.matchup-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10001;
}

.matchup-modal.open {
    display: block;
}

.matchup-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
}

.matchup-modal-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border-radius: 20px 20px 0 0;
    max-height: 85vh;
    overflow-y: auto;
    animation: slideUpMatchup 0.3s ease;
}

@keyframes slideUpMatchup {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.matchup-modal-header {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--bg-card);
    z-index: 10;
}

.matchup-modal-back {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-input);
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}

.matchup-modal-back:hover {
    background: var(--bg-hover);
}

.matchup-modal-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    flex: 1;
}

.matchup-modal-spacer {
    width: 36px;
}

/* Team Section */
.matchup-team-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--border);
}

.matchup-team-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.matchup-team-logo {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.matchup-team-logo img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.matchup-team-details {
    display: flex;
    flex-direction: column;
}

.matchup-team-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.matchup-team-conf {
    font-size: 11px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.matchup-team-standing {
    font-size: 13px;
    color: var(--text-secondary);
}

/* Rank Circle (large) */
.matchup-rank-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 16px;
    border-radius: 16px;
    border: 2px solid var(--border);
    background: var(--bg-input);
    min-width: 80px;
}

.matchup-rank-label {
    font-size: 9px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.matchup-rank-value {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-primary);
}

.matchup-rank-circle.rank-hard { border-color: var(--red); }
.matchup-rank-circle.rank-hard .matchup-rank-value { color: var(--red); }

.matchup-rank-circle.rank-medium { border-color: var(--yellow); }
.matchup-rank-circle.rank-medium .matchup-rank-value { color: var(--yellow); }

.matchup-rank-circle.rank-easy { border-color: var(--green); }
.matchup-rank-circle.rank-easy .matchup-rank-value { color: var(--green); }

.matchup-rank-circle.rank-cake { border-color: #00D26A; }
.matchup-rank-circle.rank-cake .matchup-rank-value { color: #00D26A; }

.matchup-rank-circle.rank-neutral { border-color: var(--text-secondary); }

/* Stats Row */
.matchup-stats-row {
    display: flex;
    justify-content: space-around;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.matchup-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.matchup-stat-label {
    font-size: 10px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}

.matchup-stat-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.matchup-stat-value.stat-good { color: var(--green); }
.matchup-stat-value.stat-bad { color: var(--red); }

/* DVP Table */
.matchup-dvp-table {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.dvp-table-header {
    display: grid;
    grid-template-columns: 80px 1fr 1fr 1fr 1fr;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
}

.dvp-table-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
}

.dvp-col-header {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-align: center;
    text-transform: uppercase;
}

.dvp-table-row {
    display: grid;
    grid-template-columns: 80px 1fr 1fr 1fr 1fr;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.dvp-table-row.current-pos {
    background: rgba(0, 217, 163, 0.1);
    margin: 0 -20px;
    padding: 10px 20px;
    border-radius: 8px;
}

.dvp-row-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.dvp-cell {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
}

.dvp-cell.highlight {
    background: var(--green);
    color: var(--bg-primary);
    border-radius: 4px;
    padding: 2px 4px;
}

.dvp-cell.rank-hard { color: var(--red); }
.dvp-cell.rank-medium { color: var(--yellow); }
.dvp-cell.rank-easy { color: var(--green); }
.dvp-cell.rank-cake { color: #00D26A; }

/* H2H Section */
.matchup-h2h-section {
    padding: 16px 20px;
}

.h2h-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.h2h-games-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.h2h-game-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-input);
    border-radius: 8px;
}

.h2h-game-date {
    font-size: 12px;
    color: var(--text-tertiary);
    min-width: 50px;
}

.h2h-game-result {
    font-size: 14px;
    font-weight: 700;
}

.h2h-game-result.hit { color: var(--green); }
.h2h-game-result.miss { color: var(--red); }

.h2h-game-line {
    font-size: 12px;
    color: var(--text-secondary);
    min-width: 40px;
    text-align: right;
}

.h2h-no-data {
    text-align: center;
    color: var(--text-tertiary);
    font-size: 13px;
    padding: 20px;
}

/* Make matchup circle clickable */
.matchup-circle {
    cursor: pointer;
    transition: transform 0.2s;
}

.matchup-circle:hover {
    transform: scale(1.05);
}

.matchup-circle:active {
    transform: scale(0.95);
}

/* Info icon for matchup circle */
.matchup-grade::after {
    content: 'ⓘ';
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 12px;
    background: var(--bg-primary);
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
}

.matchup-grade {
    position: relative;
}

.matchup-grade.easy::after { color: var(--green); }
.matchup-grade.medium::after { color: var(--yellow); }
.matchup-grade.hard::after { color: var(--red); }

/* Desktop adjustments for matchup modal */
@media (min-width: 1024px) {
    .matchup-modal-content {
        position: absolute;
        bottom: auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 500px;
        max-height: 80vh;
        border-radius: 20px;
        animation: fadeInMatchup 0.3s ease;
    }

    @keyframes fadeInMatchup {
        from {
            opacity: 0;
            transform: translate(-50%, -50%) scale(0.9);
        }
        to {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }
    }
}

/* ====== B2B (Back-to-Back) Badge ====== */
.b2b-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    animation: b2bPulse 2s ease-in-out infinite;
}

.b2b-badge.b2b-first {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.2), rgba(255, 193, 7, 0.1));
    color: #ffc107;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.b2b-badge.b2b-second {
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.2), rgba(244, 67, 54, 0.1));
    color: #f44336;
    border: 1px solid rgba(244, 67, 54, 0.3);
}

@keyframes b2bPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* B2B badge in game info row */
.info-item.b2b-info {
    flex: 0 0 auto;
}

.player-game-info .b2b-badge {
    margin-left: 0;
    font-size: 10px;
    padding: 3px 8px;
}

/* B2B badge in desktop view */
.center-game-info .b2b-badge {
    margin-left: 8px;
    vertical-align: middle;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .b2b-badge {
        font-size: 9px;
        padding: 2px 6px;
    }
}

/* ========== SHARE CARD WITH CONFIDENCE ANALYSIS ========== */
.share-card-confidence-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.share-card-confidence-modal.open {
    opacity: 1;
    pointer-events: auto;
}

.share-card-confidence-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
}

.share-card-confidence-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
    padding-bottom: 20px;
}

.share-card-confidence-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 12px 16px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}

.share-card-confidence-close {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.2s;
}

.share-card-confidence-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* The Card Container - usa quase toda a tela no mobile */
.share-card-confidence {
    width: 92vw;
    max-width: 420px;
    background: linear-gradient(180deg, #0a0a0a 0%, #111 100%);
    border-radius: 20px;
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

/* Card Header with Player Info */
.share-conf-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 16px 16px;
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.1), rgba(59, 130, 246, 0.1));
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.share-conf-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 12px;
}

.share-conf-logo-img {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    object-fit: contain;
    flex-shrink: 0;
}

.share-conf-player-img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(74, 222, 128, 0.6);
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.1);
}

.share-conf-player-fallback {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4ade80, #22c55e);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    color: #000;
    flex-shrink: 0;
}

.share-conf-player-info {
    text-align: center;
    width: 100%;
}

.share-conf-player-name {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2px;
}

.share-conf-player-details {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

/* Game Info Row - Opponent and Time */
.share-conf-game-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: linear-gradient(90deg, rgba(74, 222, 128, 0.15) 0%, rgba(74, 222, 128, 0.05) 100%);
    border-top: 1px solid rgba(74, 222, 128, 0.2);
    border-bottom: 1px solid rgba(74, 222, 128, 0.2);
}

.share-conf-matchup {
    display: flex;
    align-items: center;
    gap: 8px;
}

.share-conf-vs-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}

.share-conf-opponent {
    font-size: 16px;
    font-weight: 700;
    color: #4ade80;
}

.share-conf-game-time {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    gap: 5px;
}

.share-conf-game-time i {
    color: rgba(255, 255, 255, 0.5);
    font-size: 10px;
}

/* Stats Row - Line and Confidence */
.share-conf-stats-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.3);
}

.share-conf-line {
    text-align: left;
}

.share-conf-line-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    margin-bottom: 4px;
}

.share-conf-line-value {
    font-size: 24px;
    font-weight: 700;
    color: #4ade80;
}

.share-conf-line-type {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    margin-left: 4px;
}

.share-conf-confidence {
    text-align: right;
}

.share-conf-confidence-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    margin-bottom: 4px;
}

.share-conf-confidence-value {
    font-size: 28px;
    font-weight: 800;
}

.share-conf-confidence-value.high { color: #4ade80; }
.share-conf-confidence-value.medium { color: #facc15; }
.share-conf-confidence-value.low { color: #f87171; }

/* Confidence Bar */
.share-conf-bar-container {
    padding: 0 16px 16px;
}

.share-conf-bar {
    height: 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    overflow: hidden;
}

.share-conf-bar-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.5s ease;
}

.share-conf-bar-fill.high {
    background: linear-gradient(90deg, #22c55e, #4ade80);
}

.share-conf-bar-fill.medium {
    background: linear-gradient(90deg, #eab308, #facc15);
}

.share-conf-bar-fill.low {
    background: linear-gradient(90deg, #dc2626, #f87171);
}

/* Pillars Section */
.share-conf-pillars-section {
    padding: 14px 16px;
}

.share-conf-pillars-title {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 12px;
    font-weight: 600;
}

.share-conf-pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.share-conf-pillar {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 12px 8px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.share-conf-pillar-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    font-size: 14px;
}

.share-conf-pillar-icon.high {
    background: rgba(74, 222, 128, 0.2);
    color: #4ade80;
}

.share-conf-pillar-icon.medium {
    background: rgba(250, 204, 21, 0.2);
    color: #facc15;
}

.share-conf-pillar-icon.low {
    background: rgba(248, 113, 113, 0.2);
    color: #f87171;
}

.share-conf-pillar-name {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
}

.share-conf-pillar-value {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2px;
}

.share-conf-pillar-subtitle {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
}

/* Chart Section */
.share-conf-chart-section {
    padding: 14px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.share-conf-chart-title {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.share-conf-chart-empty {
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
    padding: 20px;
}

.share-conf-chart-container {
    padding-top: 10px;
}

.share-conf-bars-area {
    position: relative;
    height: 70px;
    margin-bottom: 26px; /* Espaço para labels e datas */
    margin-left: 28px; /* Espaço para o label da linha */
}

.share-conf-mini-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 100%;
    gap: 4px;
}

.share-conf-bar-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    height: 100%;
    z-index: 2;
}

.share-conf-chart-bar {
    width: 100%;
    border-radius: 4px 4px 0 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 4px;
    min-height: 20px;
    position: relative;
    z-index: 2;
}

.share-conf-chart-bar.hit {
    background: linear-gradient(180deg, #4ade80, #22c55e);
}

.share-conf-chart-bar.miss {
    background: linear-gradient(180deg, #f87171, #dc2626);
}

.share-conf-bar-value {
    font-size: 10px;
    font-weight: 700;
    color: #000;
}

.share-conf-bar-label {
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 7px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
    white-space: nowrap;
}

.share-conf-bar-date {
    position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 6px;
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
}

.share-conf-chart-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.9);
    z-index: 1;
    display: flex;
    align-items: center;
}

.share-conf-line-label {
    position: absolute;
    left: -24px;
    background: rgba(255, 255, 255, 0.95);
    color: #000;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 3px;
    transform: translateY(-50%);
    z-index: 3;
}

/* Analysis Text Section */
.share-conf-analysis-section {
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.share-conf-analysis-box {
    background: rgba(74, 222, 128, 0.08);
    border: 1px solid rgba(74, 222, 128, 0.2);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.share-conf-analysis-box.high {
    background: rgba(74, 222, 128, 0.08);
    border-color: rgba(74, 222, 128, 0.2);
}

.share-conf-analysis-box.medium {
    background: rgba(250, 204, 21, 0.08);
    border-color: rgba(250, 204, 21, 0.2);
}

.share-conf-analysis-box.low {
    background: rgba(248, 113, 113, 0.08);
    border-color: rgba(248, 113, 113, 0.2);
}

.share-conf-analysis-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.share-conf-analysis-icon.high { color: #4ade80; }
.share-conf-analysis-icon.medium { color: #facc15; }
.share-conf-analysis-icon.low { color: #f87171; }

.share-conf-analysis-text {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
}

/* Footer */
.share-conf-footer {
    padding: 12px 16px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.3);
}

.share-conf-footer-brand {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}

.share-conf-footer-brand span {
    color: #4ade80;
    font-weight: 600;
}

/* Download Button */
.share-conf-download-btn {
    margin-top: 16px;
    padding: 14px 32px;
    background: linear-gradient(135deg, #4ade80, #22c55e);
    border: none;
    border-radius: 12px;
    color: #000;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.share-conf-download-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 20px rgba(74, 222, 128, 0.4);
}

.share-conf-download-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.share-conf-download-btn i {
    font-size: 16px;
}

/* Loading state for download */
.share-conf-download-btn.loading {
    background: rgba(74, 222, 128, 0.3);
    color: #4ade80;
}

.share-conf-download-btn.loading i {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ========== SHARE CARD REDESIGN (MODAL-LIKE) ========== */
.share-modal-logo {
    padding: 16px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.share-modal-logo img {
    height: 40px;
    width: auto;
}

.share-player-card {
    display: flex;
    align-items: flex-start;
    padding: 16px;
    gap: 12px;
    flex-wrap: wrap;
}

.share-player-photo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #374151, #1f2937);
    border: 2px solid #fbbf24;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.share-player-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.share-player-photo span {
    font-size: 22px;
    font-weight: 700;
    color: #fbbf24;
}

/* Row com foto do jogador e logo lado a lado */
.share-photos-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* Logo com mesmo tamanho da foto do jogador - redondo sem fundo */
.share-logo-photo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.share-logo-photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.share-player-details {
    flex: 1;
    min-width: 140px;
}

.share-player-name {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2px;
}

.share-player-team {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 8px;
}

.share-prop-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #22c55e, #4ade80);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #000;
    margin-bottom: 8px;
}

.share-prop-direction {
    background: #000;
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
}

.share-game-info {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.share-info-item {
    display: flex;
    flex-direction: column;
}

.share-info-label {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.share-info-value {
    font-size: 11px;
    color: #fff;
    font-weight: 600;
}

.share-circles {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.share-circle {
    text-align: center;
}

.share-circle-label {
    font-size: 8px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    display: block;
    margin-bottom: 4px;
}

.share-circle-value {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    border: 2px solid;
}

.share-circle.matchup .share-circle-value {
    border-color: #facc15;
    color: #facc15;
}

.share-circle.confidence .share-circle-value {
    border-color: #4ade80;
    color: #4ade80;
}

.share-circle.confidence.high .share-circle-value { border-color: #4ade80; color: #4ade80; }
.share-circle.confidence.medium .share-circle-value { border-color: #facc15; color: #facc15; }
.share-circle.confidence.low .share-circle-value { border-color: #f87171; color: #f87171; }

.share-avg-badge {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.05);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.share-avg-badge span {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.share-avg-badge strong {
    color: #fff;
}

.share-chart-section {
    padding: 12px 16px;
}

.share-chart-wrapper {
    display: flex;
    gap: 8px;
}

.share-chart-y-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    text-align: right;
    height: 100px;
    padding: 0 4px;
}

.share-y-line {
    color: #fff;
    font-weight: 600;
}

.share-chart-area {
    flex: 1;
    position: relative;
    height: 100px;
}

.share-chart-line-h {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: #fbbf24 !important;
    z-index: 10;
    box-shadow: 0 0 4px rgba(251, 191, 36, 0.5);
}

.share-bars-container {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 100%;
    gap: 3px;
    position: relative;
    z-index: 2;
}

.share-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
}

.share-bar {
    width: 100%;
    border-radius: 3px 3px 0 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 2px;
    min-height: 15px;
}

.share-bar.hit {
    background: linear-gradient(180deg, #4ade80, #22c55e);
}

.share-bar.miss {
    background: linear-gradient(180deg, #f87171, #dc2626);
}

.share-bar-val {
    font-size: 9px;
    font-weight: 700;
    color: #000;
}

.share-bar-date {
    font-size: 7px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 2px;
}

.share-bar-opp {
    font-size: 6px;
    color: rgba(255, 255, 255, 0.4);
}

.share-chart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
}

.share-games-section {
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.share-games-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.share-games-pct {
    color: #4ade80;
    font-weight: 600;
}

.share-games-dots {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.share-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.share-dot.hit {
    background: #4ade80;
}

.share-dot.miss {
    background: #f87171;
}

.share-games-legend {
    display: flex;
    gap: 12px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
}

.share-games-legend span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.share-games-legend .share-dot {
    width: 8px;
    height: 8px;
}

/* Análise de Confiança no Share Card */
.share-analysis-section {
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.share-analysis-text {
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    text-align: left;
}

.share-footer {
    padding: 10px 16px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
}

.share-footer-brand {
    font-weight: 600;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 12px;
    letter-spacing: 1px;
}

/* Análise completa fora do card (no-export = não vai na imagem) */
.share-analysis-section.no-export {
    margin: 16px 0 8px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.share-analysis-section.no-export .share-analysis-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: #fbbf24;
    font-weight: 600;
    font-size: 13px;
}

.share-analysis-section.no-export .share-analysis-header i {
    font-size: 14px;
}

.share-analysis-section.no-export .share-analysis-text {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    text-align: left;
}

/* Image Save Modal (for iOS long-press) */
.share-conf-image-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10002;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.95);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.share-conf-image-modal.open {
    opacity: 1;
    pointer-events: auto;
}

.share-conf-image-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 400px;
    padding: 16px;
    color: #fff;
}

.share-conf-image-modal-close {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
}

.share-conf-image-preview {
    max-width: 90vw;
    max-height: 70vh;
    border-radius: 16px;
    -webkit-touch-callout: default !important;
}

.share-conf-image-tip {
    margin-top: 20px;
    padding: 12px 24px;
    background: rgba(74, 222, 128, 0.2);
    border-radius: 12px;
    color: #4ade80;
    font-size: 14px;
    font-weight: 500;
}

.share-conf-image-tip i {
    margin-right: 8px;
}

/* Mobile Responsive */
@media (max-width: 400px) {
    .share-card-confidence {
        width: 340px;
    }

    .share-conf-player-name {
        font-size: 16px;
    }

    .share-conf-line-value {
        font-size: 22px;
    }

    .share-conf-confidence-value {
        font-size: 24px;
    }

    .share-conf-pillar {
        padding: 8px 6px;
    }

    .share-conf-pillar-value {
        font-size: 13px;
    }
}

/* ============================================================ */
/* ==================== EPL STYLES ============================ */
/* ============================================================ */

/* EPL League Tab */
.league-tab[data-league="epl"] {
    background: transparent;
}

.league-tab[data-league="epl"].active {
    color: #9c27b0; /* Purple for EPL */
    border-bottom-color: #9c27b0;
}

/* EPL Avatar */
.player-avatar.epl {
    background: linear-gradient(135deg, #9c27b0, #7b1fa2);
    border: 2px solid #9c27b0;
}

/* EPL Market Badge */
.market-badge.epl {
    background: linear-gradient(135deg, #9c27b0, #7b1fa2);
    color: white;
}

/* EPL Prop Card - slight purple tint on hover */
.prop-card:has(.player-avatar.epl):hover {
    border-color: rgba(156, 39, 176, 0.3);
}

/* EPL Empty State */
.empty-state .fa-futbol {
    font-size: 48px;
    color: #9c27b0;
    margin-bottom: 16px;
}

/* EPL Mini Chart */
.mini-chart-container {
    position: relative;
    height: 40px;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    padding: 4px 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
    margin-top: 8px;
}

.mini-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 100%;
    width: 100%;
}

.mini-bar {
    border-radius: 2px 2px 0 0;
    transition: height 0.2s ease;
}

.mini-bar.hit {
    background: var(--green);
}

.mini-bar.miss {
    background: var(--red);
}

.mini-line {
    position: absolute;
    left: 8px;
    right: 8px;
    height: 1px;
    background: var(--yellow);
    opacity: 0.7;
}

/* EPL Prop Stats */
.prop-stats .stat-value.good {
    color: var(--green);
}

.prop-stats .stat-value.neutral {
    color: var(--yellow);
}

.prop-stats .stat-value.bad {
    color: var(--red);
}

.prop-stats .stat-value.positive {
    color: var(--green);
}

.prop-stats .stat-value.negative {
    color: var(--red);
}

/* EPL Confidence */
.prop-confidence .confidence-value.high {
    color: var(--green);
}

.prop-confidence .confidence-value.medium {
    color: var(--yellow);
}

.prop-confidence .confidence-value.low {
    color: var(--red);
}

/* EPL Game Info */
.prop-game-info {
    text-align: right;
}

.prop-game-info .game-matchup {
    display: block;
    font-size: 11px;
    color: var(--text-secondary);
}

.prop-game-info .game-time {
    display: block;
    font-size: 10px;
    color: var(--text-tertiary);
}

/* EPL Player Row (using same layout as NBA) */
.player-row.epl-prop {
    border-left: 3px solid #9c27b0;
}

.player-row.epl-prop:hover {
    border-left-color: #ba68c8;
}

/* EPL Avatar (letter initial style) */
.epl-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #9c27b0, #7b1fa2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}

.epl-avatar .player-initial {
    font-size: 18px;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
}

/* EPL Market Type Badge */
.market-type.epl-market {
    background: linear-gradient(135deg, #9c27b0, #7b1fa2);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
}

/* Mini chart placeholder */
.mini-chart-placeholder {
    width: 60px;
    height: 32px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    opacity: 0.3;
}

/* EPL Game Header */
.game-section .game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border-radius: 8px 8px 0 0;
    margin-bottom: 2px;
}

.game-header .game-teams {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.game-header .game-teams .vs {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 400;
}

.game-header .game-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.game-header .game-date {
    font-size: 11px;
    color: var(--text-secondary);
}

.game-header .game-time {
    font-size: 10px;
    color: var(--text-tertiary);
}

/* ========== PINNED PROPS ========== */

/* Badge no botão do header */
.pinned-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--green);
    color: #000;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.header-btn {
    position: relative;
}

/* Modal de Props Fixadas */
.pinned-props-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-primary);
    z-index: 1000;
    display: none;
    flex-direction: column;
}

.pinned-props-modal.open {
    display: flex;
}

.pinned-props-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pinned-props-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
}

.pinned-props-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.pinned-clear-btn {
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    font-size: 16px;
    padding: 8px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s;
}

.pinned-clear-btn:hover {
    background: rgba(255, 68, 68, 0.1);
    color: var(--red);
}

.pinned-props-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

/* Estado vazio */
.pinned-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-tertiary);
    text-align: center;
    padding: 40px 20px;
}

.pinned-empty i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.3;
}

.pinned-empty p {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.pinned-empty span {
    font-size: 13px;
    color: var(--text-tertiary);
}

/* Card de prop fixada - Layout Simples */
.pinned-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-card);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid var(--border);
    position: relative;
}

/* Pinned Card - Green/Red Result States */
.pinned-card.green {
    border-color: var(--green);
    background: rgba(0, 200, 83, 0.08);
}

.pinned-card.red {
    border-color: var(--red);
    background: rgba(255, 107, 107, 0.08);
}

.pinned-card.push {
    border-color: var(--text-tertiary);
    background: rgba(128, 128, 128, 0.08);
}

/* Result Badge */
.pinned-result {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    z-index: 1;
}

.pinned-result.green {
    background: var(--green);
    color: #000;
}

.pinned-result.red {
    background: var(--red);
    color: #fff;
}

.pinned-result.push {
    background: var(--text-tertiary);
    color: #fff;
}

.pinned-result .result-icon {
    font-size: 10px;
}

.pinned-result .result-actual {
    font-weight: 800;
}

.pinned-remove-x {
    position: absolute;
    top: 6px;
    right: 6px;
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    font-size: 12px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    opacity: 0.6;
}

.pinned-remove-x:hover {
    background: rgba(255, 107, 107, 0.15);
    color: var(--red);
    opacity: 1;
}

.pinned-card:hover {
    background: var(--bg-hover);
    border-color: var(--border-light);
}

.pinned-card:active {
    transform: scale(0.98);
}

.pinned-pin {
    color: var(--green);
    font-size: 14px;
    flex-shrink: 0;
}

.pinned-info {
    flex: 1;
    min-width: 0;
}

.pinned-player {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.pinned-line {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.pinned-line .direction {
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
}

.pinned-line .direction.over {
    color: var(--green);
    background: rgba(0, 212, 170, 0.15);
}

.pinned-line .direction.under {
    color: var(--red);
    background: rgba(255, 107, 107, 0.15);
}

.pinned-line .line-value {
    font-weight: 600;
    color: var(--text-primary);
}

.pinned-line .market-type {
    color: var(--text-secondary);
}

.pinned-line .odds-value {
    color: var(--text-tertiary);
}

.pinned-card .pinned-edge {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 50px;
    flex-shrink: 0;
    text-align: center;
    margin-right: 8px;
}

.pinned-card .pinned-edge .edge-label {
    font-size: 10px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    margin-bottom: 2px;
}

.pinned-card .pinned-edge .edge-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary);
}

.pinned-card .pinned-edge .edge-value.positive {
    color: var(--green);
}

.pinned-card .pinned-edge .edge-value.negative {
    color: var(--red);
}

.pinned-card .mini-chart {
    width: 100px;
    min-width: 100px;
    flex-shrink: 0;
    margin-left: auto;
}

/* Mobile adjustments for pinned cards */
@media (max-width: 480px) {
    .pinned-card .mini-chart {
        width: 80px;
    }

    .pinned-edge {
        min-width: 40px;
    }
}

/* Card de prop fixada - Layout Antigo */
.pinned-prop-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    border: 1px solid var(--border);
}

.pinned-prop-card:hover {
    background: var(--bg-hover);
    border-color: var(--border-light);
}

.pinned-prop-card:active {
    transform: scale(0.98);
}

.pinned-prop-info {
    flex: 1;
    min-width: 0;
}

.pinned-prop-player {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.pinned-icon {
    color: var(--green);
    font-size: 12px;
}

.pinned-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}

.pinned-team {
    font-size: 12px;
    color: var(--text-tertiary);
}

.pinned-prop-line {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pinned-direction {
    font-weight: 700;
    font-size: 13px;
}

.pinned-direction.over {
    color: var(--green);
}

.pinned-direction.under {
    color: var(--red);
}

.pinned-line-value {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}

.pinned-market {
    font-size: 13px;
    color: var(--text-secondary);
}

.pinned-odds {
    font-size: 13px;
    color: var(--text-tertiary);
}

.pinned-prop-stats {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pinned-edge {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 45px;
}

.pinned-edge .edge-label {
    font-size: 9px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pinned-edge .edge-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
}

.pinned-edge.positive .edge-value {
    color: var(--green);
}

.pinned-edge.negative .edge-value {
    color: var(--red);
}

.pinned-mini-chart {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 35px;
    min-width: 100px;
}

.pinned-mini-chart .mini-bar {
    flex: 1;
    min-width: 6px;
    max-width: 10px;
    border-radius: 2px 2px 0 0;
}

.pinned-remove-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    font-size: 12px;
    padding: 4px;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s;
}

.pinned-prop-card:hover .pinned-remove-btn {
    opacity: 1;
}

.pinned-remove-btn:hover {
    color: var(--red);
}

/* Botão de pin no modal */
.modal-action-btn.pin-btn.pinned {
    color: var(--green);
}

.modal-action-btn.pin-btn.pinned i {
    transform: rotate(45deg);
}

/* Toast Notifications */
.toast-notification {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--bg-card);
    color: var(--text-primary);
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    z-index: 10000;
    opacity: 0;
    transition: all 0.3s ease;
    border: 1px solid var(--border);
}

.toast-notification.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.toast-notification.toast-success {
    border-color: var(--green);
}

.toast-notification.toast-success::before {
    content: '✓';
    color: var(--green);
    margin-right: 8px;
}

.toast-notification.toast-info {
    border-color: #3498db;
}

.toast-notification.toast-info::before {
    content: 'ℹ';
    color: #3498db;
    margin-right: 8px;
}

.toast-notification.toast-warning {
    border-color: var(--yellow);
}

.toast-notification.toast-warning::before {
    content: '⚠';
    color: var(--yellow);
    margin-right: 8px;
}

/* ========== PINNED PROPS LOGIN ========== */
.pinned-user-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
}

.user-email {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--green);
}

.user-email i {
    font-size: 16px;
}

.logout-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.logout-btn:hover {
    background: var(--card-bg-hover);
    color: var(--text);
}

.login-prompt-btn {
    width: 100%;
    background: transparent;
    border: 1px dashed var(--border);
    color: var(--text-secondary);
    padding: 12px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.login-prompt-btn:hover {
    border-color: var(--green);
    color: var(--green);
}

.pinned-login-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
}

.pinned-login-form input {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 14px;
    color: var(--text);
    outline: none;
}

.pinned-login-form input:focus {
    border-color: var(--green);
}

.pinned-login-form input::placeholder {
    color: var(--text-muted);
}

.login-submit-btn {
    background: var(--green);
    border: none;
    border-radius: 8px;
    padding: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--bg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}

.login-submit-btn:hover {
    filter: brightness(1.1);
}

.login-error {
    background: rgba(255, 77, 77, 0.15);
    border: 1px solid rgba(255, 77, 77, 0.3);
    color: #ff6b6b;
    padding: 10px;
    border-radius: 6px;
    font-size: 12px;
    text-align: center;
}

/* ==========================================
   PINNED PROPS MODAL - REDESIGN MOBILE-FIRST
   ========================================== */

.pinned-header-actions {
    display: flex;
    gap: 8px;
}

.pinned-share-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 18px;
    padding: 8px;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 8px;
}

.pinned-share-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--green);
}

/* Filtros Section */
.pinned-filters-section {
    padding: 10px 12px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}

.pinned-date-filters {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}

.pinned-date-filters .filter-pill {
    flex: 1;
    padding: 8px 6px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.pinned-date-filters .filter-pill:hover {
    border-color: var(--green);
    color: var(--green);
}

.pinned-date-filters .filter-pill.active {
    background: var(--green);
    border-color: var(--green);
    color: var(--bg);
}

.pinned-custom-date {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 8px;
    background: var(--bg-card);
    border-radius: 8px;
}

.pinned-custom-date input[type="date"] {
    flex: 1;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px;
    color: var(--text-primary);
    font-size: 12px;
}

.pinned-custom-date span {
    color: var(--text-tertiary);
    font-size: 12px;
}

/* Pinned Stats Bar */
.pinned-stats-bar {
    display: flex;
    justify-content: space-around;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    gap: 8px;
}

.pinned-stats-bar .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.pinned-stats-bar .stat-label {
    font-size: 10px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    font-weight: 500;
}

.pinned-stats-bar .stat-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.pinned-stats-bar .stat-item.green .stat-value {
    color: var(--green);
}

.pinned-stats-bar .stat-item.red .stat-value {
    color: var(--red);
}

.pinned-stats-bar .stat-item.highlight .stat-value {
    color: var(--accent);
    font-size: 18px;
}

.pinned-market-filters {
    display: flex;
    gap: 5px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.market-pill {
    padding: 6px 0;
    font-size: 11px;
    min-width: calc(25% - 4px);
}

/* Toggle Apostadas */
.pinned-bets-toggle {
    display: flex;
    align-items: center;
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-secondary);
}

.toggle-label input {
    display: none;
}

.toggle-slider {
    width: 36px;
    height: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    position: relative;
    transition: all 0.2s;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    background: var(--text-tertiary);
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: all 0.2s;
}

.toggle-label input:checked + .toggle-slider {
    background: var(--green);
    border-color: var(--green);
}

.toggle-label input:checked + .toggle-slider::before {
    background: var(--bg);
    left: 18px;
}

/* Stats Bar */
.pinned-stats-bar {
    display: flex;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-label {
    font-size: 9px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-item.stat-hit .stat-value {
    color: var(--green);
}

.stat-item.stat-miss .stat-value {
    color: var(--red);
}

/* ==========================================
   CARD DOS FIXADOS - Grid específico para modal
   ========================================== */

/* Override do grid para incluir checkbox e actions */
.pinned-props-modal .player-row {
    grid-template-columns: 22px 40px 1fr 50px 100px 90px;
    padding: 10px 12px;
}

/* Card resultado */
.pinned-props-modal .player-row.result-hit {
    border-left: 3px solid var(--green);
}

.pinned-props-modal .player-row.result-miss {
    border-left: 3px solid var(--red);
}

/* Checkbox de apostada */
.pinned-props-modal .bet-checkbox {
    position: relative;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.pinned-props-modal .bet-checkbox input {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 1;
}

.pinned-props-modal .bet-checkmark {
    position: absolute;
    top: 0;
    left: 0;
    width: 22px;
    height: 22px;
    background: var(--bg);
    border: 2px solid var(--border);
    border-radius: 6px;
    transition: all 0.2s;
}

.pinned-props-modal .bet-checkbox input:checked + .bet-checkmark {
    background: var(--green);
    border-color: var(--green);
}

.pinned-props-modal .bet-checkmark::after {
    content: '';
    position: absolute;
    display: none;
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid var(--bg);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.pinned-props-modal .bet-checkbox input:checked + .bet-checkmark::after {
    display: block;
}

/* Botões de ação */
.pinned-props-modal .pinned-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.pinned-props-modal .action-btn {
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 11px;
}

.pinned-props-modal .action-btn.hit {
    background: rgba(0, 200, 117, 0.15);
    color: var(--green);
}

.pinned-props-modal .action-btn.miss {
    background: rgba(255, 77, 77, 0.15);
    color: var(--red);
}

.pinned-props-modal .action-btn.clear {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-tertiary);
}

.pinned-props-modal .action-btn.delete {
    background: rgba(255, 77, 77, 0.1);
    color: var(--red);
}

/* Share Card Styles */
.share-card-container {
    position: fixed;
    left: -9999px;
    top: 0;
}

.share-card {
    width: 400px;
    background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 100%);
    border-radius: 16px;
    padding: 20px;
    font-family: 'Inter', sans-serif;
}

.share-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.share-logo {
    font-size: 18px;
    font-weight: 800;
    color: #00c875;
    letter-spacing: 1px;
}

.share-date {
    font-size: 12px;
    color: #888;
}

.share-card-title {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #333;
}

.share-card-props {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.share-prop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    padding: 10px 12px;
    border-radius: 8px;
    border-left: 3px solid #00c875;
}

.share-prop.hit {
    border-left-color: #00c875;
    background: rgba(0, 200, 117, 0.1);
}

.share-prop.miss {
    border-left-color: #ff4d4d;
    background: rgba(255, 77, 77, 0.1);
}

.share-player {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

.share-line {
    font-size: 12px;
    color: #aaa;
}

.share-result {
    font-size: 14px;
}

.share-card-footer {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #333;
    text-align: center;
}

.share-card-footer span {
    font-size: 11px;
    color: #666;
}

/* Mobile Adjustments */
@media (max-width: 480px) {
    .pinned-date-filters {
        gap: 6px;
    }

    .pinned-date-filters .filter-pill {
        padding: 5px 10px;
        font-size: 11px;
    }

    .pinned-stats-bar {
        padding: 10px 12px;
    }

    .stat-value {
        font-size: 16px;
    }

    .stat-label {
        font-size: 9px;
    }

    .pinned-prop-card {
        padding: 10px;
    }

    .pinned-name {
        font-size: 13px;
    }

    .result-btn {
        width: 26px;
        height: 26px;
        font-size: 11px;
    }

    /* Forçar grid de 6 colunas para cards fixados no mobile */
    .pinned-props-modal .player-row {
        grid-template-columns: 22px 40px 1fr auto 80px auto !important;
        gap: 8px;
    }

    .pinned-props-modal .stats-cols {
        display: flex;
        flex-direction: row;
        gap: 6px;
    }

    .pinned-props-modal .mini-chart {
        min-width: 80px;
    }

    .pinned-props-modal .pinned-actions {
        display: flex;
        flex-shrink: 0;
    }
}

/* ========== PINNED LOADING INDICATOR ========== */
.pinned-loading {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    padding: 12px 16px;
    background: linear-gradient(180deg, var(--bg-primary) 0%, transparent 100%);
}

.pinned-loading-content {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-secondary);
    padding: 10px 16px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.pinned-loading-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: pinned-spin 0.8s linear infinite;
}

@keyframes pinned-spin {
    to { transform: rotate(360deg); }
}

.pinned-loading-text {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

/* ========== PINNED RESULT LIVE ========== */
.pinned-result.live {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.pinned-result.live .result-icon {
    color: #ff4444;
    font-size: 8px;
    animation: live-pulse 1.5s ease-in-out infinite;
}

@keyframes live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.pinned-result .result-status {
    font-size: 9px;
    opacity: 0.7;
    margin-left: 2px;
}

/* ========== PINNED REFRESH BUTTON ========== */
.pinned-refresh-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 16px;
    padding: 8px;
    cursor: pointer;
    transition: color 0.2s, transform 0.2s;
}

.pinned-refresh-btn:hover {
    color: var(--accent);
}

.pinned-refresh-btn:active {
    transform: scale(0.95);
}

/* ========== STYLIZED FONT - PROPS FINDER STYLE ========== */

/* Logo/Title - Estilo carrossel */
.logo-text {
    font-weight: 900 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-style: italic;
    background: linear-gradient(135deg, #00d4aa 0%, #00ffcc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
}

/* Odds nos cards - Estilo destacado */
.odds-btn {
    font-weight: 900 !important;
    font-style: italic;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.odds-btn.over {
    background: rgba(0, 212, 170, 0.15);
    color: #00ffcc;
    border: 1px solid rgba(0, 212, 170, 0.3);
}

.odds-btn.under {
    background: rgba(255, 68, 68, 0.15);
    color: #ff6b6b;
    border: 1px solid rgba(255, 68, 68, 0.3);
}

/* Odds value nos cards fixados */
.pinned-line .odds-value,
.prop-line .odds-value {
    font-weight: 800;
    font-style: italic;
    color: var(--accent) !important;
}

/* Reverter logo-text para o original */
.logo-text {
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-style: normal !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    background-clip: unset !important;
    color: var(--text-primary) !important;
}

/* Odds - Verde para Over, Vermelho para Under (sem fundo) */
.odds-btn.over,
.odds-btn.under {
    background: transparent !important;
    border: none !important;
}

.odds-btn.over {
    color: #00D9A3 !important;
}

.odds-btn.under {
    color: #ff6b6b !important;
}

.odds-btn.over:hover,
.odds-btn.under:hover {
    background: transparent !important;
    border: none !important;
}

.pinned-line .odds-value,
.prop-line .odds-value {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* ===== SAFE PARLAYS STYLES (Jan 2026) ===== */
.safe-parlays-container {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 100%;
}

.safe-parlays-header {
    text-align: center;
    padding: 16px 0;
    margin-bottom: 8px;
}

.safe-parlays-title {
    font-size: 22px;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 6px;
    letter-spacing: -0.3px;
}

.safe-parlays-subtitle {
    font-size: 13px;
    color: #999999;
    font-weight: 400;
}

.safe-parlay-card {
    background: #111111;
    border-radius: 16px;
    padding: 0;
    border: 1px solid #222222;
    overflow: hidden;
}

.parlay-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-bottom: 1px solid #222222;
}

.parlay-type {
    font-size: 14px;
    font-weight: 600;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    gap: 6px;
}

.parlay-odds-info {
    display: flex;
    gap: 8px;
    align-items: center;
}

.parlay-combined-odds {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #000000;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.3px;
}

.parlay-combined-rate {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #FFFFFF;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
}

.parlay-players {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.parlay-player-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: #0a0a0a;
    border-bottom: 1px solid #1a1a1a;
}

.parlay-player-row:last-child {
    border-bottom: none;
}

.parlay-player-info {
    flex: 1;
    min-width: 0;
}

.parlay-player-name {
    font-size: 15px;
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.parlay-player-team {
    font-size: 11px;
    color: #666666;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.parlay-line-info {
    text-align: right;
    flex-shrink: 0;
    margin-left: 12px;
}

.parlay-stat-type {
    font-size: 12px;
    font-weight: 700;
    color: #00D9A3;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.parlay-lines {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    font-size: 13px;
    margin-bottom: 6px;
}

.safe-line {
    color: #10b981;
    font-weight: 700;
    font-size: 14px;
    background: rgba(16, 185, 129, 0.15);
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.leg-odds {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.parlay-hitrate {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
}

.hitrate-value {
    font-size: 13px;
    font-weight: 700;
    color: #10b981;
}

.hitrate-label {
    font-size: 10px;
    color: #666666;
    font-weight: 500;
}

.parlay-footer {
    padding: 12px 16px;
    background: #0d0d0d;
    border-top: 1px solid #1a1a1a;
}

.parlay-note {
    font-size: 11px;
    color: #666666;
    text-align: center;
    font-weight: 500;
}

/* Quick filter pill style for safe-parlays */
.quick-filter-pill.safe-parlays {
    background: linear-gradient(135deg, #10b981, #059669);
}

.quick-filter-pill.safe-parlays:hover {
    background: linear-gradient(135deg, #059669, #047857);
}

.quick-filter-pill.safe-parlays.active {
    background: linear-gradient(135deg, #047857, #065f46);
    box-shadow: 0 0 0 2px #10b981;
}

/* Responsive adjustments for mobile */
@media (max-width: 400px) {
    .parlay-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .parlay-odds-info {
        width: 100%;
        justify-content: flex-start;
    }

    .parlay-player-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 12px 14px;
    }

    .parlay-line-info {
        text-align: left;
        width: 100%;
        margin-left: 0;
    }

    .parlay-lines {
        justify-content: flex-start;
    }

    .parlay-hitrate {
        justify-content: flex-start;
    }

    .parlay-player-name {
        font-size: 14px;
    }
}