body { background-color: #f4f6f9; color: #2d3748; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
        .navbar-brand { font-weight: 800; color: #0d6efd !important; letter-spacing: -0.5px; }
        .navbar-nav .nav-link { color: #334155; font-weight: 600; border-radius: 8px; padding-left: .8rem; padding-right: .8rem; }
        .navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color: #0d6efd; background: #eff6ff; }
        .card { border: none; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.03); }
        .hero-section { background: linear-gradient(135deg, #1e3a8a, #3b82f6); color: white; padding: 50px 0; border-radius: 0 0 24px 24px; }
        .table { background: white; border-radius: 8px; overflow: hidden; }
        .autocomplete-suggestions { position: absolute; border: 1px solid #e2e8f0; background: white; z-index: 1000; width: 100%; border-radius: 8px; max-height: 250px; overflow-y: auto; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }
        .suggestion-item { padding: 10px 15px; cursor: pointer; border-bottom: 1px solid #f1f5f9; }
        .suggestion-item:hover, .suggestion-item.suggestion-active { background-color: #f8fafc; color: #0d6efd; }
        .autocomplete-hint { display: block; }
        .rank-note { display:block; margin-top: 2px; font-size: 0.72rem; line-height: 1.15; color: #6c757d; font-weight: 500; }
        .score-stats { display:block; margin-top: 3px; font-size: 0.72rem; line-height: 1.25; color: #6c757d; font-weight: 500; white-space: normal; }
        .score-stats .stat-item { white-space: nowrap; }
        .winner-icon { display: inline-block; margin-left: .2rem; font-size: 1rem; line-height: 1; vertical-align: baseline; }
        .history-icon { display: inline-block; font-size: .72rem; opacity: .75; margin-left: .2rem; vertical-align: 1px; }
        /* Komórka "pokaż więcej" istnieje tylko po to, by na mobile dało się zwinąć/rozwinąć
           kartę - na desktopie (poza media query niżej) jest zawsze ukryta, żeby nie
           dokładać niepasującej kolumny do zwykłej tabeli. */
        table.table-mobile-cards .cell-toggle { display: none; }
        .highlight-school-row { outline: 2px solid #ffc107; outline-offset: -2px; --bs-table-bg: #fff8db; }
        .pagination { flex-wrap: wrap; gap: .25rem; }
        .btn-xs { --bs-btn-padding-y: .15rem; --bs-btn-padding-x: .45rem; --bs-btn-font-size: .75rem; }
        .subject-chart-wrap { position: relative; min-height: 420px; }
        .subject-chart-note { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; }
        .chart-filter-panel { background: linear-gradient(135deg, #f8fbff, #eef5ff); border: 1px solid #cfe2ff; border-radius: 14px; padding: 1rem; }
        .chart-filter-group { background: rgba(255,255,255,.88); border: 1px solid #dbe7f5; border-radius: 12px; padding: .9rem; height: 100%; }
        .chart-filter-value { font-variant-numeric: tabular-nums; }
        .chart-filter-counter { background: #fff; border: 1px solid #cfe2ff; border-radius: 999px; padding: .35rem .7rem; white-space: nowrap; }
        @media (max-width: 767.98px) {
            .subject-chart-wrap { min-height: 360px; }
            .chart-filter-panel { padding: .75rem; }
        }
        @media (max-width: 767.98px) {
            .hero-section { padding: 32px 0; border-radius: 0 0 16px 16px; }
            .hero-section .display-4 { font-size: 2rem; }
            .hero-section .display-5 { font-size: 1.6rem; }
            .card { border-radius: 10px; }
            .card.p-4 { padding: 1rem !important; }
            .table { font-size: .875rem; }
            .table th, .table td { white-space: nowrap; }
            .rank-note { font-size: .68rem; }
            .navbar .container, .container { padding-left: 14px; padding-right: 14px; }
            .list-group-item .badge { white-space: normal; text-align: left; }
            .mobile-full { width: 100%; }
            /* Min. 16px zapobiega automatycznemu przybliżaniu strony przez Safari na iOS przy focusie na polu */
            .form-control, .form-select { font-size: 16px; }
            .suggestion-item { padding: 12px 15px; }
            .autocomplete-suggestions { max-height: 200px; }

            /* Tabele z klasą .table-mobile-cards przestają się przewijać w poziomie -
               każdy wiersz staje się osobną kartą, komórki z .cell-primary/.cell-full
               (np. wynik łączny) zajmują całą szerokość, a pozostałe dane układają się
               w siatce po dwie kolumny, z etykietą pola nad wartością.
               Używamy flexbox (nie inline-block) celowo: przy inline-block białe znaki
               (nowa linia, wcięcie) między sąsiednimi <td> w kodzie HTML liczą się jako
               spacja, więc 50% + 50% + ta spacja przekracza 100% szerokości wiersza
               i druga komórka ląduje w nowej linii - stąd wrażenie "pustej prawej kolumny". */
            table.table-mobile-cards { border: none; }
            table.table-mobile-cards thead { display: none; }
            table.table-mobile-cards, table.table-mobile-cards tbody { display: block; width: 100%; }
            table.table-mobile-cards tr {
                display: flex; flex-wrap: wrap; border: 1px solid #e2e8f0; border-radius: 10px;
                margin-bottom: .6rem; padding: .7rem .8rem .15rem; background: #fff;
            }
            table.table-mobile-cards tr.highlight-school-row { background: #fff8db; }
            table.table-mobile-cards td {
                flex: 0 0 50%; max-width: 50%; box-sizing: border-box;
                border: none !important; background: transparent !important;
                padding: 0 .4rem .55rem 0 !important; text-align: left !important;
                white-space: normal !important; font-size: .83rem;
            }
            table.table-mobile-cards td[data-label]::before {
                content: attr(data-label); display: block; font-size: .64rem; text-transform: uppercase;
                letter-spacing: .02em; color: #94a3b8; font-weight: 700; margin-bottom: .1rem;
            }
            table.table-mobile-cards td.cell-primary {
                flex: 0 0 100%; max-width: 100%; font-size: 1rem;
                padding: 0 0 .5rem 0 !important; margin-bottom: .4rem; border-bottom: 1px solid #f1f5f9 !important;
            }
            table.table-mobile-cards td.cell-primary::before { display: none; }
            table.table-mobile-cards td.cell-full {
                flex: 0 0 100%; max-width: 100%;
            }

            /* Zwijane karty: pola z .cell-collapsible są domyślnie ukryte i pokazują
               się dopiero po kliknięciu przycisku "Pokaż więcej" w danej karcie
               (przełącza klasę .expanded na wierszu - patrz JS w stopce strony). */
            table.table-mobile-cards td.cell-collapsible { display: none; }
            table.table-mobile-cards tr.expanded td.cell-collapsible { display: block; }
            table.table-mobile-cards td.cell-toggle {
                display: block; flex: 0 0 100%; max-width: 100%;
                padding: .3rem 0 0 0 !important; margin-top: .1rem;
                border-top: 1px dashed #e2e8f0;
            }
            table.table-mobile-cards .toggle-details {
                display: block; width: 100%; background: none; border: none;
                color: #0d6efd; font-size: .78rem; font-weight: 600;
                padding: .35rem 0 .1rem; text-align: center; cursor: pointer;
            }
        }