/* Absolute Strict Box Sizing & Edge-to-Edge Layout */
    .cobeg-f-dash, .cobeg-f-dash * { box-sizing: border-box !important; }
    
    .f-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-bottom: 24px !important;
        overflow: hidden !important;
    }
    
    @media(max-width: 640px) {
        .f-card {
            border-radius: 0 !important; 
            border-left: none !important;
            border-right: none !important;
            border-top: none !important;
            border-bottom: 8px solid var(--cobeg-surface-soft) !important; 
            box-shadow: none !important;
            margin-bottom: 0 !important;
        }
        .f-card:last-child { border-bottom: none !important; }
    }

    /* Header Section */
    .ranking-header {
        width: 100% !important;
        padding: 24px !important;
        background: var(--cobeg-surface) !important;
        border-bottom: 1px solid var(--cobeg-border) !important;
    }
    @media(max-width: 640px) {
        .ranking-header { padding: 20px 15px !important; }
    }

    .header-top {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        margin-bottom: 8px !important;
        gap: 12px !important;
        flex-wrap: wrap !important;
    }

    .title-group h1 {
        margin: 0 !important;
        font-size: 1.5rem !important;
        font-weight: 800 !important;
        color: var(--cobeg-text) !important;
    }

    .season-label {
        margin-top: 4px !important;
        color: var(--cobeg-text-muted) !important;
        font-size: 0.95rem !important;
        font-weight: 600 !important;
    }

    .subtitle {
        color: var(--cobeg-text-muted) !important;
        font-size: 0.95rem !important;
        font-weight: 500 !important;
        margin-top: 8px !important;
    }

    /* Search & Filter Form */
    .search-sort-wrap {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
    }

    .ranking-search-form {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        position: relative !important;
        flex-wrap: wrap !important;
        width: 100% !important;
    }

    .search-input-wrap {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
    }

    .ranking-search-form input[type="text"] {
        padding: 10px 14px !important;
        border: 1px solid var(--cobeg-border) !important;
        border-radius: 8px !important;
        outline: none !important;
        min-width: 240px !important;
        background: var(--cobeg-surface) !important;
        color: var(--cobeg-text) !important;
        font-size: 0.95rem !important;
        transition: border-color 0.2s ease !important;
    }

    .ranking-search-form input[type="text"]:focus {
        border-color: var(--cobeg-accent) !important;
    }

    .ranking-search-form select {
        padding: 10px 14px !important;
        border: 1px solid var(--cobeg-border) !important;
        border-radius: 8px !important;
        outline: none !important;
        background-color: var(--cobeg-surface-soft) !important;
        color: var(--cobeg-text) !important;
        font-size: 0.95rem !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        transition: border-color 0.2s ease !important;
    }

    .ranking-search-form select:focus {
        border-color: var(--cobeg-accent) !important;
    }

    .ranking-search-form button {
        padding: 10px 16px !important;
        border: 1px solid var(--cobeg-accent) !important;
        background: var(--cobeg-accent) !important;
        color: #fff !important;
        border-radius: 8px !important;
        cursor: pointer !important;
        font-weight: 800 !important;
        transition: opacity 0.2s ease !important;
    }

    .ranking-search-form button:hover {
        opacity: 0.8 !important;
    }

    .clear-search {
        position: absolute !important;
        right: 10px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 24px !important;
        height: 24px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        color: #fff !important;
        background: var(--cobeg-text-muted) !important;
        font-weight: 800 !important;
        line-height: 1 !important;
    }

    /* Autocomplete List */
    #autocomplete-list {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        background: var(--cobeg-surface) !important;
        border: 1px solid var(--cobeg-border) !important;
        border-radius: 8px !important;
        box-shadow: var(--cobeg-shadow-sm) !important;
        list-style: none !important;
        margin-top: 4px !important;
        padding: 0 !important;
        z-index: 1000 !important;
        max-height: 200px !important;
        overflow-y: auto !important;
        min-width: 100% !important;
    }

    #autocomplete-list li {
        padding: 10px 14px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        cursor: pointer !important;
        color: var(--cobeg-text) !important;
        font-weight: 600 !important;
        font-size: 13px !important;
    }

    #autocomplete-list li:hover {
        background: var(--cobeg-surface-soft) !important;
    }

    /* Table Container (Nuclear Anti-Blowout) */
    .table-responsive {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border: none !important;
        display: block !important; /* Forces container to scroll instead of pushing parent */
    }

    .ranking-table {
        width: 100% !important;
        border-collapse: collapse !important;
        font-size: 0.95rem !important;
        border: none !important;
        background: var(--cobeg-surface) !important;
    }

    .ranking-table th {
        padding: 14px 8px !important;
        text-align: center !important;
        border: none !important;
        white-space: nowrap !important;
    }

    .ranking-table td {
        padding: 10px 8px !important;
        text-align: center !important;
        border: none !important;
        border-bottom: 1px solid var(--cobeg-border) !important;
        vertical-align: middle !important;
        color: var(--cobeg-text) !important;
    }

    .ranking-table thead th {
        background: var(--cobeg-surface-soft) !important;
        color: var(--cobeg-text-muted) !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 2 !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        font-size: 12px !important;
    }

    .ranking-table tbody tr:nth-child(even) {
        background: color-mix(in srgb, var(--cobeg-surface-soft) 30%, transparent) !important;
    }

    .ranking-table tbody tr:hover td {
        background: var(--cobeg-surface-soft) !important;
    }

    .col-playerinfo { text-align: left !important; border-left: none !important; }
    .col-playerinfo a { color: inherit !important; text-decoration: none !important; transition: 0.2s !important;}
    .col-playerinfo a:hover { color: var(--cobeg-accent) !important; }

    .info-name { font-weight: 800 !important; color: var(--cobeg-text) !important; font-size: 14px !important;}
    .info-club { color: var(--cobeg-text-muted) !important; font-size: 11px !important; font-weight: 600 !important; margin-top: 2px !important; }
    .rank-number { font-weight: 900 !important; color: var(--cobeg-text-muted) !important;}
    .col-rating strong { color: var(--cobeg-accent) !important; font-weight: 900 !important; }

    .col-photo {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 56px !important;
        height: 64px !important;
        margin: auto !important;
    }

    .division-badge {
        position: absolute !important;
        left: 50% !important;
        bottom: 4px !important;
        transform: translateX(-50%) !important;
        min-width: 22px !important;
        height: 22px !important;
        padding: 0 6px !important;
        border-radius: 999px !important;
        background: var(--cobeg-accent) !important;
        color: #fff !important;
        font-size: 10px !important;
        font-weight: 900 !important;
        line-height: 22px !important;
        text-align: center !important;
        z-index: 2 !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.16) !important;
    }

    .col-photo .initials {
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-weight: 800 !important;
        font-size: 14px !important;
        color: var(--cobeg-text) !important;
        background: var(--cobeg-surface-soft) !important;
        border: 1px solid var(--cobeg-border) !important;
    }

    .col-photo img.avatar-img {
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        display: block !important;
        border: 1px solid var(--cobeg-border) !important;
        background: var(--cobeg-surface-soft) !important;
    }

    .empty-state { padding: 40px 20px !important; color: var(--cobeg-text-muted) !important; text-align: center !important; font-weight: 600 !important;}

    .pagination { text-align: center !important; padding: 24px !important; display: flex !important; justify-content: center !important; flex-wrap: wrap !important; gap: 8px !important; }
    .pagination .page-numbers { padding: 8px 14px !important; border: 1px solid var(--cobeg-border) !important; border-radius: 8px !important; color: var(--cobeg-text) !important; text-decoration: none !important; font-size: 12px !important; font-weight: 800 !important; background: var(--cobeg-surface) !important; transition: 0.2s !important;}
    .pagination .page-numbers:hover { background: var(--cobeg-surface-soft) !important; }
    .pagination .page-numbers.current { background: var(--cobeg-accent) !important; color: #fff !important; border-color: var(--cobeg-accent) !important; }

    .legend { padding: 16px 24px 24px 24px !important; color: var(--cobeg-text-muted) !important; font-size: 11px !important; font-weight: 500 !important; line-height: 1.5 !important;}
    @media(max-width: 640px) { .legend { padding: 16px 15px 20px 15px !important; } }

    /* Mobile Adaptations */
    @media (max-width: 768px) {
        .header-top { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; }
        .search-sort-wrap { width: 100% !important; justify-content: stretch !important; }
        .search-input-wrap { flex: 1 1 0 !important; min-width: 0 !important; width: 100% !important; }
        .ranking-search-form input[type="text"] { flex: 1 1 0 !important; width: 100% !important; min-width: 0 !important; }
        .ranking-search-form select { flex: 0 0 auto !important; min-width: 100px !important; }
        
        .col-photo { height: 50px !important; width: 44px !important;}
        .col-photo .initials, .col-photo img.avatar-img { width: 36px !important; height: 36px !important; }
        .division-badge { bottom: 0 !important; min-width: 18px !important; height: 18px !important; line-height: 18px !important; font-size: 9px !important; padding: 0 4px !important; }
        
        /* Hide extra columns on small screens to fit cleanly */
        .col-losses, .col-ga, .col-cs, .col-dht { display: none !important; }

        .ranking-table th { padding: 10px 4px !important; font-size: 10px !important; }
        .ranking-table td { padding: 8px 4px !important; font-size: 11px !important; }
        .info-name { font-size: 12px !important; }
        .info-club { font-size: 9px !important; }
    }

    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }