/* Zabrání blikaniu SVG sprite pri načítaní */
        svg[style*="display: none"] { display: none !important; }

/* 1. GLOBÁLNY DIZAJNOVÝ JAZYK A PREMENNÉ PRE DARK MODE */
        :root {
            --bg-body: #f8f9fa;
            --bg-card: #ffffff;
            --text-main: #1a1a1a;
            --text-muted: #7f8c8d;
            --border-color: #e2e8f0;
            --navbar-bg: #ffffff;
            --input-bg: #ffffff;
            --shadow: rgba(0, 0, 0, 0.02);
            --shadow-hover: rgba(0, 0, 0, 0.06);
            --bg-float-card: rgba(255, 255, 255, 0.85);
            --category-row-bg: #f8f9fa;
            
            /* Jemné podfarbenie pre aktívnych smajlíkov */
            --bg-smiley-neg: rgba(231, 76, 60, 0.04);
            --border-smiley-neg: rgba(231, 76, 60, 0.25);
            --bg-smiley-neu: rgba(52, 152, 219, 0.04);
            --border-smiley-neu: rgba(52, 152, 219, 0.25);
            --bg-smiley-pos: rgba(46, 204, 113, 0.04);
            --border-smiley-pos: rgba(46, 204, 113, 0.25);
        }

        [data-theme="dark"] {
            --bg-body: #0f172a;
            --bg-card: #1e293b;
            --text-main: #f8fafc;
            --text-muted: #94a3b8;
            --border-color: #334155;
            --navbar-bg: #1e293b;
            --input-bg: #0f172a;
            --shadow: rgba(0, 0, 0, 0.2);
            --shadow-hover: rgba(0, 0, 0, 0.4);
            --bg-float-card: rgba(30, 41, 59, 0.7);
            --category-row-bg: #111827;
            
            --bg-smiley-neg: rgba(231, 76, 60, 0.08);
            --bg-smiley-neu: rgba(52, 152, 219, 0.08);
            --bg-smiley-pos: rgba(46, 204, 113, 0.08);
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
            transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
        }

        body {
            background-color: var(--bg-body);
            color: var(--text-main);
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
            min-height: 100vh;
            overflow-x: hidden;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
        }
		/* Hlavný obsah - roztiahne sa, aby odtlačil pätičku dole */
		main {
			flex: 1; 
			padding: 20px;
		}
		
				/* Tmavomodrá pätička */
		footer {
			background-color: #002244; /* Tmavomodrá */
			color: #f0f0f0; /* Svetlé písmo */
			text-align: center;
			padding: 20px;
			width: 100%;
		}
        .footer-content { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; font-size: 0.9rem; }
        .footer-banner-link {
            display: inline-block; margin-top: 16px; line-height: 0;
            opacity: 0.92; transition: opacity 0.15s;
        }
        .footer-banner-link:hover { opacity: 1; }
        .footer-banner-img { max-width: 100%; height: auto; border-radius: 6px; }
        .coffee-btn {
            display: inline-flex; align-items: center; gap: 7px; padding: 7px 15px; border-radius: 20px;
            background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2);
            color: #f0f0f0; text-decoration: none; font-size: 0.82rem; font-weight: 600; transition: background 0.2s, border-color 0.2s;
        }
        .coffee-btn:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.35); }
        .coffee-icon { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
        .footer-admin-link { color: rgba(255, 255, 255, 0.35); font-size: 0.75rem; text-decoration: none; }
        .footer-admin-link:hover { color: rgba(255, 255, 255, 0.7); }

        /* Kontakt + sociálne siete v pätičke - rovnaký princíp ako .coffee-icon
           (stroke: currentColor), takže automaticky preberajú farbu textu pätičky
           a nikdy nebudú "kričať" farbou nesediacou s celkovým dizajnom. */
        .footer-contact { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
        .footer-contact a {
            color: #f0f0f0; opacity: 0.8; transition: opacity 0.15s;
            display: inline-flex; align-items: center; gap: 6px;
            text-decoration: none; font-size: 0.85rem;
        }
        .footer-contact a:hover { opacity: 1; }
        .footer-social-icon { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
        .footer-email-icon { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

        /* Výzva na podporu projektu po odoslaní recenzie (ďakovná obrazovka) */
        .support-box {
            background: var(--bg-smiley-neu); border: 1px dashed var(--border-smiley-neu); border-radius: 16px;
            padding: 28px 24px; margin-top: 28px; text-align: center;
        }
        .support-coffee-icon { width: 40px; height: 40px; stroke: #3498db; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 12px; }
        .support-box p { font-size: 0.95rem; line-height: 1.6; margin-bottom: 20px; color: var(--text-main); }
        .btn-support {
            display: inline-block; background: #ffdd00; color: #1a1a1a; font-weight: 700; padding: 12px 28px;
            border-radius: 12px; text-decoration: none; box-shadow: 0 4px 14px rgba(255, 221, 0, 0.35); border: none;
        }
        .btn-support:hover { background: #ffd000; }
        .support-skip-btn {
            display: block; width: 100%; margin-top: 18px; background: none; border: none; cursor: pointer;
            color: var(--text-muted); font-size: 0.85rem; text-decoration: underline;
        }
        .support-skip-btn:hover { color: var(--text-main); }
        .app-page { display: none; min-height: 100vh; width: 100%; }
        .app-page.active { display: block; }
        @media (max-width: 800px) {
            .app-page { min-height: 0; }
        }

        /* HLAVIČKY (NAVBARS) */
        .navbar {
            background-color: var(--navbar-bg);
            border-bottom: 1px solid var(--border-color);
            padding: 15px 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .navbar-actions { display: flex; align-items: center; gap: 20px; }
        .navbar-actions .btn,
        .navbar-actions .auth-nav-pill {
            padding: 8px 20px; font-size: 0.9rem;
        }
        .auth-nav-widget { display: flex; align-items: center; gap: 10px; }
        .auth-nav-pill {
            display: inline-flex; align-items: center; white-space: nowrap;
            font-size: 1rem; font-weight: 600; color: var(--text-main);
            border: 2px solid var(--border-color); border-radius: 12px;
            padding: 14px 24px;
        }
        .auth-nav-pill-credits { color: #2ecc71; border-color: #2ecc71; }
        .logo { font-size: 1.4rem; font-weight: 800; color: var(--text-main); text-decoration: none; cursor: pointer; }
        .logo span { color: #3498db; }

        .theme-toggle {
            background: none; border: none; cursor: pointer;
            padding: 8px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
            order: 999;
        }
        .theme-toggle:hover { background-color: var(--border-color); }
        .theme-icon { width: 20px; height: 20px; stroke: var(--text-main); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

        /* Burger menu v hornom navbare (nahrádza tlačidlá Môj profil/Admin/Odhlásiť) */
        .navbar-burger-wrapper { position: relative; }
        .navbar-burger-btn {
            background: none; border: none; cursor: pointer;
            padding: 8px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
        }
        .navbar-burger-btn:hover { background-color: var(--border-color); }
        .navbar-burger-btn svg { width: 20px; height: 20px; stroke: var(--text-main); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
        .navbar-burger-menu {
            position: absolute; top: calc(100% + 8px); right: 0; z-index: 300;
            background: var(--bg-card); border: 1px solid var(--border-color);
            border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.15);
            min-width: 200px; padding: 8px; display: none; flex-direction: column; gap: 2px;
            max-height: calc(100vh - 90px); overflow-y: auto;
        }
        .navbar-burger-menu.open { display: flex; }
        .navbar-burger-menu-userline {
            font-size: 0.82rem; font-weight: 700; color: var(--text-muted);
            padding: 8px 12px 6px; border-bottom: 1px solid var(--border-color); margin-bottom: 4px;
        }
        .navbar-burger-menu a, .navbar-burger-menu button {
            display: block; width: 100%; text-align: left; background: none; border: none;
            font: inherit; font-size: 0.92rem; color: var(--text-main); text-decoration: none;
            padding: 10px 12px; border-radius: 8px; cursor: pointer;
        }
        .navbar-burger-menu a:hover, .navbar-burger-menu button:hover { background-color: var(--border-color); }

        /* Mobilné zobrazenie navbaru – zabráni horizontálnemu pretečeniu stránky:
           logo sa zmenší, akcie sa zalomia do ďalšieho riadku, medzery a padding sa zmenšia.
           Prepínač témy sa presunie do pravého horného rohu (mimo tok tlačidiel),
           takže nezaberá vlastný riadok. */
        @media (max-width: 700px) {
            .navbar {
                padding: 12px 16px;
                padding-right: 56px;
                flex-wrap: wrap;
                row-gap: 10px;
                position: relative;
            }
            .logo { font-size: 1.05rem; }
            .navbar-actions {
                gap: 8px;
                flex-wrap: wrap;
                width: 100%;
                justify-content: flex-start;
            }
            .navbar-actions .btn,
            .navbar-actions .auth-nav-pill {
                padding: 6px 12px; font-size: 0.78rem;
            }
            .auth-nav-widget { gap: 6px; flex-wrap: wrap; }
            /* Tlačidlo Odhlásiť je najčastejšie to, čo sa nezmestí na prvý riadok -
               o niečo kompaktnejšie ako ostatné pilulky, aby malo lepšiu šancu sa
               zmestiť vedľa nich namiesto zalomenia na vlastný riadok. */
            .navbar-logout-btn {
                padding: 6px 9px !important; font-size: 0.74rem !important;
            }
            .theme-toggle {
                position: absolute; top: 12px; right: 12px; order: initial;
            }
            /* Stránky s novým burger menu (trieda navbar-lean) majú oveľa
               menej obsahu v navbare (len kredity + burger tlačidlo) - preto
               tu prepínač témy NEVYŤAHUJEME z toku, ale necháme ho prirodzene
               v jednom riadku spolu s nimi (inak by burger menu, ktoré sa
               pozicuje voči svojmu tlačidlu, mohlo vyjsť mimo obrazovku). */
            .navbar-lean .theme-toggle {
                position: static; top: auto; right: auto;
            }
            .navbar-lean .navbar-actions {
                flex-wrap: nowrap; justify-content: flex-end;
            }
            .navbar-lean.navbar { padding-right: 16px; }
        }
        @media (max-width: 400px) {
            /* Na veľmi úzkych obrazovkách skryjeme meno (pilulka bez triedy credits),
               aby sa dôležitejšie prvky (kredity, Môj profil, Odhlásiť sa) zmestili
               na jeden riadok s logom. auth-nav-info sa už skrýva vyššie (800px). */
            .auth-nav-pill:not(.auth-nav-pill-credits) { display: none; }
            #admin-whoami { display: none; }
        }

        .btn { display: inline-block; padding: 14px 24px; border-radius: 12px; font-weight: 600; text-decoration: none; text-align: center; cursor: pointer; border: none; font-size: 1rem; }
        .btn-primary { background-color: #3498db; color: white; }
        .btn-primary:hover { background-color: #2980b9; }
        .btn-secondary { background-color: transparent; color: var(--text-main); border: 2px solid var(--border-color); }
        .btn-secondary:hover { background-color: var(--border-color); }
        .btn-danger { background-color: transparent; color: #e74c3c; border: 2px solid var(--border-smiley-neg); }
        .btn-danger:hover { background-color: var(--bg-smiley-neg); }
        .btn-small { padding: 6px 12px; font-size: 0.78rem; }

        /* Administrátorské tabuľky */
        .admin-table-wrapper { overflow-x: auto; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; padding: 8px 20px 20px 20px; box-shadow: 0 4px 20px var(--shadow); }

        /* Na mobile sa tabuľka Používatelia/Firmy premení na kartičky (jedna
           karta = jeden riadok) namiesto vodorovného posúvania tabuľky. */
        @media (max-width: 700px) {
            .admin-table-wrapper { overflow-x: visible; padding: 10px; }
            .admin-table thead { display: none; }
            .admin-table, .admin-table tbody, .admin-table tr, .admin-table td { display: block; width: 100%; box-sizing: border-box; }
            .admin-table tr {
                margin-bottom: 14px; border: 1px solid var(--border-color); border-radius: 12px;
                padding: 4px 14px; background: var(--category-row-bg);
            }
            .admin-table tr:last-child { margin-bottom: 0; }
            .admin-table td {
                padding: 9px 0; border: none; border-bottom: 1px solid var(--border-color);
                display: flex; justify-content: flex-end; align-items: center; gap: 10px; text-align: right;
            }
            .admin-table td:last-child { border-bottom: none; }
            .admin-table td[data-label] { justify-content: space-between; }
            .admin-table td[data-label]::before {
                content: attr(data-label); font-weight: 700; color: var(--text-muted); font-size: 0.78rem;
                text-align: left; flex-shrink: 0;
            }

            /* Používatelia - kompaktnejšia karta (max 2 riadky, bez popisov).
               Menej dôležité polia (ID, Kredit, Recenzie, Odomknuté) sa na
               mobile skryjú - stále dostupné na desktope. */
            .admin-table-users tr {
                display: grid; grid-template-columns: auto 1fr auto;
                column-gap: 10px; row-gap: 2px; align-items: center; padding: 10px 14px;
            }
            .admin-table-users td { display: block; border: none !important; padding: 0 !important; text-align: left; }
            .admin-table-users td::before { content: none !important; } /* žiadne popisy na tejto tabuľke */
            .admin-table-users td:nth-child(1) { grid-row: 1 / 3; grid-column: 1; }
            .admin-table-users td:nth-child(2),
            .admin-table-users td:nth-child(6),
            .admin-table-users td:nth-child(7),
            .admin-table-users td:nth-child(8),
            .admin-table-users td:nth-child(10) { display: none; }
            .admin-table-users td:nth-child(3) { grid-row: 1; grid-column: 2; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
            .admin-table-users td:nth-child(4) { grid-row: 2; grid-column: 2; font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
            .admin-table-users td:nth-child(5) { grid-row: 1; grid-column: 3; text-align: right; }
            .admin-table-users td:nth-child(9) { grid-row: 2; grid-column: 3; text-align: right; }
        }
        .admin-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
        .admin-table th { text-align: left; color: var(--text-muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; padding: 14px 10px 10px 10px; border-bottom: 1px solid var(--border-color); white-space: nowrap; }
        .admin-table td { padding: 12px 10px; border-bottom: 1px solid var(--border-color); vertical-align: middle; }
        .admin-table tr:last-child td { border-bottom: none; }
        .admin-status-active { color: #2ecc71; font-weight: 600; }
        .admin-status-banned { color: #e74c3c; font-weight: 600; }
        .admin-status-free { color: var(--text-muted); }
        .admin-source-tag { font-size: 0.68rem; font-weight: 600; color: var(--text-muted); background: var(--category-row-bg); padding: 2px 8px; border-radius: 20px; margin-left: 6px; vertical-align: middle; }
        .admin-manual-tag {
            font-size: 0.68rem; font-weight: 700; color: #e67e22;
            background: rgba(230, 126, 34, 0.1); border: 1px solid rgba(230, 126, 34, 0.3);
            padding: 2px 8px; border-radius: 20px; margin-left: 6px; vertical-align: middle; white-space: nowrap;
        }

        /* Administrátorské upozornenia */
        .admin-alert-item {
            display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
            border-radius: 14px; padding: 16px 20px; margin-bottom: 10px;
            border: 1px solid; transition: filter 0.15s; cursor: pointer;
        }
        .admin-alert-item:hover { filter: brightness(0.97); }
        .admin-alert-critical {
            background: var(--bg-smiley-neg);
            border-color: var(--border-smiley-neg);
        }
        .admin-alert-warning {
            background: rgba(230, 126, 34, 0.08);
            border-color: rgba(230, 126, 34, 0.3);
        }
        .admin-alert-info {
            background: var(--bg-smiley-neu);
            border-color: var(--border-smiley-neu);
        }
        .admin-alert-ok {
            background: var(--bg-smiley-pos);
            border-color: var(--border-smiley-pos);
        }
        .admin-alert-left { display: flex; align-items: flex-start; gap: 14px; flex: 1; min-width: 0; }
        .admin-alert-icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
        .admin-alert-body { min-width: 0; }
        .admin-alert-title { font-weight: 700; font-size: 0.9rem; margin-bottom: 3px; }
        .admin-alert-detail { font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; }
        .admin-alert-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
        .admin-alert-count {
            display: inline-flex; align-items: center; justify-content: center;
            min-width: 26px; height: 26px; border-radius: 20px;
            color: #fff; font-weight: 700; font-size: 0.82rem; padding: 0 8px;
        }
        .admin-alert-action { font-size: 0.8rem; font-weight: 600; color: #3498db; white-space: nowrap; }
        .admin-alert-dismiss {
            background: none; border: none; cursor: pointer; padding: 4px 6px; border-radius: 6px;
            color: var(--text-muted); font-size: 1rem; line-height: 1; flex-shrink: 0;
            opacity: 0.5;
        }
        .admin-alert-dismiss:hover { opacity: 1; background: var(--border-color); }

        /* Na mobile sa text upozornenia a akcia prekrývali (vedľa seba v úzkom
           priestore) - vynútené zvislé usporiadanie, akcia pod textom. */
        @media (max-width: 700px) {
            .admin-alert-item { flex-direction: column; align-items: stretch; }
            .admin-alert-right { justify-content: flex-end; margin-top: 4px; }
        }
        .admin-role-admin { color: #e67e22; font-weight: 700; font-size: 0.8rem; }
        .admin-role-user { color: var(--text-muted); font-size: 0.8rem; }
        .admin-actions { display: flex; gap: 6px; flex-wrap: wrap; }
        .admin-result-count { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 14px; }
        .admin-create-box { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; padding: 20px; margin-bottom: 24px; box-shadow: 0 4px 20px var(--shadow); }
        .admin-create-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
        .admin-create-row .input-field { flex: 1 1 140px; min-width: 120px; }
        .admin-create-row select { padding: 10px 12px; }

        /* Hromadné akcie nad označenými riadkami */
        .bulk-actions-bar {
            display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
            background: var(--category-row-bg); border: 1px solid var(--border-color); border-radius: 12px;
            padding: 12px 16px; margin-bottom: 16px; opacity: 0.55; transition: opacity 0.2s, border-color 0.2s;
        }
        .bulk-actions-bar.bulk-active { opacity: 1; border-color: #3498db; background: var(--bg-smiley-neu); }
        .bulk-selected-count { font-size: 0.82rem; font-weight: 700; color: var(--text-main); white-space: nowrap; }
        .bulk-actions-buttons { display: flex; gap: 8px; flex-wrap: wrap; }

        /* Moderátor vidí "osekané" rozhranie - tieto prvky (tvorba/mazanie/blokovanie
           používateľov a firemných účtov) vyžadujú na serveri administrátora
           (Auth::requireAdmin), takže ich moderátorovi vôbec neponúkame - inak by
           len klikol a dostal maticu chybu 403 namiesto jasného očakávania. */
        body.moderator-view .admin-only-ui,
        body.moderator-view .bulk-row-checkbox,
        body.moderator-view #bulk-select-all {
            display: none !important;
        }

        /* Klientska zóna firiem - Editor a Prezerajúci nevidia úpravu profilu
           (fotky, popis...) ani správu tímu/balíčka - tie sú vyhradené role
           Administrátor (rovnaký princíp ako moderator-view vyššie).
           DÔLEŽITÉ: rola sa na <body> pridáva až po asynchrónnom načítaní
           dát (viď initDashboard) - keby tieto prvky boli defaultne
           VIDITEĽNÉ a skrývali sa až keď je rola Editor/Prezerajúci, každý
           by ich pri každom otvorení stránky na okamih uvidel a hneď by mu
           "zmizli" (frustrujúce, vyzerá to ako chyba). Preto je to teraz
           opačne: defaultne SKRYTÉ, zobrazia sa až keď je rola potvrdená
           ako Administrátor - žiadne zablikanie pre nikoho. */
        .employer-admin-only:not(.dashboard-section):not(#team-bulk-actions-panel):not(#team-invite-panel) { display: none !important; }
        body.employer-role-admin .employer-admin-only:not(.dashboard-section):not(#team-bulk-actions-panel):not(#team-invite-panel) { display: revert !important; }
        /* Explicitná (nie "revert") hodnota priamo pre položku menu - istota,
           že sa naozaj zobrazí presne tak, ako ostatné položky menu vedľa nej. */
        body.employer-role-admin li.sidebar-item.employer-admin-only:not(.dashboard-section):not(#team-bulk-actions-panel):not(#team-invite-panel) { display: flex !important; }
        /* Odpovedanie na recenzie smie Administrátor aj Editor - nesmie len
           Prezerajúci. Rovnaký princíp - defaultne skryté, zobrazí sa len
           pre potvrdenú rolu Administrátor alebo Editor. */
        .employer-can-edit { display: none !important; }
        body.employer-role-admin .employer-can-edit,
        body.employer-role-editor .employer-can-edit { display: revert !important; }

        /* Rozbaľovací pill s popisom oprávnení rolí (admin.html, sekcia Používatelia) -
           rovnaký princíp ako .sample-notice-toggle-btn, len v modrej farbe (aby sa
           vizuálne nezamieňal s oranžovým upozornením na ukážkový obsah). */
        .role-info-collapsible { margin-bottom: 18px; }
        .role-info-toggle-btn {
            display: inline-flex; align-items: center; gap: 6px;
            background: rgba(52, 152, 219, 0.1); border: 1px dashed rgba(52, 152, 219, 0.4);
            border-radius: 20px; padding: 5px 14px; cursor: pointer;
            font-size: 0.8rem; font-weight: 600; color: #2980b9;
            transition: background 0.15s;
        }
        .role-info-toggle-btn:hover { background: rgba(52, 152, 219, 0.18); }
        .role-info-toggle-btn .detail-toggle-icon { width: 12px; height: 12px; stroke: #2980b9; transition: transform 0.2s; }
        .role-info-toggle-btn .detail-toggle-icon.expanded { transform: rotate(180deg); }
        .role-info-content {
            background: rgba(52, 152, 219, 0.07); border: 1px dashed rgba(52, 152, 219, 0.3);
            border-radius: 10px; padding: 14px 16px; margin-top: 8px;
            font-size: 0.85rem; line-height: 1.6; color: var(--text-muted);
        }
        .role-info-content h4 { color: var(--text-main); font-size: 0.85rem; margin: 12px 0 4px; }
        .role-info-content h4:first-child { margin-top: 0; }
        .role-info-content ul { margin: 4px 0 0; padding-left: 20px; }
        .role-info-content li { margin-bottom: 3px; }

        /* Jemné farebné odlíšenie akcií podľa typu operácie */
        .bulk-actions-buttons .btn { background: var(--bg-card); }
        .bulk-btn-role { border-color: rgba(230, 126, 34, 0.35); color: #e67e22; }
        .bulk-btn-role:hover { background: rgba(230, 126, 34, 0.1); }
        .bulk-btn-status { border-color: var(--border-smiley-neu); color: #3498db; }
        .bulk-btn-status:hover { background: var(--bg-smiley-neu); }
        .bulk-btn-neutral { border-color: var(--border-color); color: var(--text-muted); }
        .bulk-btn-neutral:hover { background: var(--category-row-bg); }
        .admin-table tr.row-selected { background: var(--bg-smiley-neu); }
        .admin-table input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
        .admin-row-id { color: var(--text-muted); font-size: 0.8rem; white-space: nowrap; }
        .admin-link { color: #3498db; text-decoration: none; font-weight: 600; }
        .admin-link:hover { text-decoration: underline; }

        /* Roly používateľov */
        .admin-role-admin { color: #e67e22; font-weight: 700; font-size: 0.8rem; }
        .admin-role-moderator { color: #9b59b6; font-weight: 700; font-size: 0.8rem; }
        .admin-role-user { color: var(--text-muted); font-size: 0.8rem; }

        /* Moderácia obsahu - vulgarizmy */
        .vulgar-badges-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 4px; }
        .vulgar-hit-badge {
            font-size: 0.72rem; font-weight: 700; padding: 3px 9px; border-radius: 20px;
            background: var(--bg-smiley-neg); color: #e74c3c; border: 1px solid var(--border-smiley-neg);
        }
        .vulgar-hits-count {
            min-width: 28px; height: 28px; border-radius: 50%; background: #e74c3c;
            color: #fff; font-weight: 700; font-size: 0.85rem;
            display: flex; align-items: center; justify-content: center; flex-shrink: 0;
        }
        .vulgar-context { font-size: 0.82rem; color: var(--text-muted); font-style: italic; margin: 4px 0 0; }
        .admin-scan-result-box {
            background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px;
            padding: 16px 20px; margin-bottom: 20px;
        }
        .admin-scan-result-box.admin-scan-ok { color: #2ecc71; font-size: 0.9rem; font-weight: 600; border-color: var(--border-smiley-pos); background: var(--bg-smiley-pos); }

        /* ─── Galéria (lightbox) ─── */
        #gallery-overlay {
            display: none; position: fixed; inset: 0; z-index: 9999;
            background: rgba(0,0,0,0.92); align-items: center; justify-content: center;
            flex-direction: column; gap: 16px;
        }
        .gallery-img-wrap {
            max-width: 90vw; max-height: 80vh; display: flex; align-items: center; justify-content: center;
        }
        #gallery-img {
            max-width: 90vw; max-height: 80vh; border-radius: 12px;
            object-fit: contain; box-shadow: 0 8px 40px rgba(0,0,0,0.6);
            transition: opacity 0.2s;
        }
        .gallery-close {
            position: absolute; top: 16px; right: 20px;
            background: rgba(255,255,255,0.1); border: none; color: #fff;
            font-size: 1.5rem; width: 40px; height: 40px; border-radius: 50%;
            cursor: pointer; display: flex; align-items: center; justify-content: center;
            transition: background 0.15s;
        }
        .gallery-close:hover { background: rgba(255,255,255,0.25); }
        .gallery-arrow {
            position: absolute; top: 50%; transform: translateY(-50%);
            background: rgba(255,255,255,0.1); border: none; color: #fff;
            font-size: 2rem; width: 48px; height: 48px; border-radius: 50%;
            cursor: pointer; display: flex; align-items: center; justify-content: center;
            transition: background 0.15s; z-index: 1;
        }
        .gallery-arrow:hover { background: rgba(255,255,255,0.25); }
        .gallery-prev { left: 16px; }
        .gallery-next { right: 16px; }
        .gallery-dots { display: flex; gap: 8px; }
        .gallery-dot {
            width: 8px; height: 8px; border-radius: 50%;
            background: rgba(255,255,255,0.35); cursor: pointer; transition: background 0.15s;
        }
        .gallery-dot.active { background: #fff; }

        /* ─── Location autocomplete ─── */
        .location-autocomplete-wrap { position: relative; }
        .location-dropdown {
            position: absolute; top: 100%; left: 0; right: 0; z-index: 200;
            background: var(--bg-card); border: 1px solid var(--border-color);
            border-radius: 10px; box-shadow: 0 8px 24px var(--shadow);
            max-height: 240px; overflow-y: auto; margin-top: 4px;
        }
        .location-option {
            display: flex; justify-content: space-between; align-items: center;
            padding: 9px 14px; cursor: pointer; gap: 12px; transition: background 0.1s;
        }
        .location-option:hover { background: var(--category-row-bg); }
        .location-option-name { font-size: 0.88rem; font-weight: 600; }
        .location-option-sub { font-size: 0.74rem; color: var(--text-muted); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
        /* Úzky displej: okres a kraj pod názvom obce (nie vedľa), nech sa nič neoreže */
        @media (max-width: 600px) {
            .location-option { flex-direction: column; align-items: flex-start !important; gap: 1px !important; }
            .location-option-sub { white-space: normal; }
        }

        /* ─── Predplatné karty (klientska zóna) ─── */
        .subscription-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-bottom: 24px; }
        .subscription-plan-card {
            background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 18px;
            padding: 28px 24px; position: relative; display: flex; flex-direction: column; gap: 16px;
        }
        .subscription-plan-featured { border-color: #3498db; box-shadow: 0 0 0 2px rgba(52,152,219,0.15); }
        .subscription-plan-active { border-color: #2ecc71; box-shadow: 0 0 0 2px rgba(46,204,113,0.2); }
        .subscription-plan-badge {
            position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
            background: #3498db; color: #fff; font-size: 0.72rem; font-weight: 700;
            padding: 3px 14px; border-radius: 20px; white-space: nowrap;
        }
        .subscription-plan-badge-active { background: #2ecc71; }
        .subscription-plan-name { font-weight: 700; font-size: 1.15rem; }
        .subscription-plan-price { font-size: 1.5rem; font-weight: 800; color: #3498db; }
        .subscription-plan-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; flex: 1; }
        .subscription-plan-features li { font-size: 0.85rem; color: var(--text-main); padding-left: 20px; position: relative; }
        .subscription-plan-features li::before { content: ''; position: absolute; left: 0; top: 0.2em; width: 13px; height: 13px; background: #2ecc71; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat; }
        .subscription-plan-btn { width: 100%; text-align: center; margin-top: auto; }
        .subscription-plan-btn:disabled { opacity: 0.6; cursor: default; }
        .subscription-plan-dev-btn { width: 100%; text-align: center; color: var(--text-muted); }
        .subscription-note { font-size: 0.78rem; color: var(--text-muted); line-height: 1.6; }

        /* Uzamknutý stav sekcie fotiek - zobrazí sa firmám bez aktívneho balíčka */
        .photo-locked-box {
            background: var(--category-row-bg); border: 1px dashed var(--border-color); border-radius: 14px;
            padding: 32px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px;
        }
        .photo-locked-box .btn-icon { width: 28px; height: 28px; stroke: var(--text-muted); }
        .photo-locked-box p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; margin: 0; }

        /* ─── Rozšírený filter ─── */

        /* Celkové hodnotenie nahor */
        .filter-overall-header {
            display: flex; flex-direction: column; align-items: center;
            gap: 10px; padding: 4px 0 20px;
        }
        .filter-overall-label {
            font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
            color: var(--text-muted); text-transform: uppercase;
        }
        .filter-smiley-center { justify-content: center; gap: 20px; }
        .filter-smiley-center .filter-smiley-btn { width: 44px; height: 44px; }
        .filter-smiley-center .filter-smiley-btn .custom-smiley { width: 34px; height: 34px; }

        /* 2 stĺpce */
        .af-two-col {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0 40px;
        }
        .af-col { display: flex; flex-direction: column; }
        .af-col-header {
            font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
            color: var(--text-muted); text-transform: uppercase; text-align: center;
            height: 32px; display: flex; align-items: center; justify-content: center;
            margin-bottom: 4px;
        }
        /* Každý riadok má pevnú výšku 42px – zarovnanie cez stĺpce */
        .af-row {
            display: grid;
            grid-template-columns: 110px 1fr;
            align-items: center;
            gap: 8px;
            height: 42px;
        }
        .af-row label { font-size: 0.82rem; font-weight: 600; margin: 0; white-space: nowrap; }
        .af-row select { font-size: 0.82rem; padding: 5px 8px; width: 100%; box-sizing: border-box; }
        .af-row-empty { visibility: hidden; }
        .af-row-rating { grid-template-columns: 1fr 90px; }
        .af-row-rating label { font-size: 0.82rem; font-weight: 600; }
        .af-row-rating .filter-smiley-group { display: flex; gap: 4px; justify-content: flex-end; }

        @media (max-width: 600px) {
            .af-two-col { grid-template-columns: 1fr; }
            .af-row { height: auto; padding: 6px 0; }
            .af-row-empty { display: none; }
        }
        .admin-scan-header { font-size: 0.88rem; color: var(--text-muted); margin: 0 0 14px; }
        .admin-scan-item { border-top: 1px solid var(--border-color); padding: 12px 0; }
        .admin-scan-item:first-of-type { border-top: none; padding-top: 0; }
        .admin-scan-meta { font-size: 0.82rem; margin-bottom: 6px; }

        /* Prémiový účet */
        .premium-upsell-box {
            background: var(--bg-card); border: 1px solid rgba(230,126,34,0.3); border-radius: 16px;
            padding: 28px;
        }
        .premium-upsell-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
        .premium-upsell-header h3 { margin: 0; font-size: 1.1rem; }
        .premium-upsell-desc { font-size: 0.88rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 20px; }
        .premium-features-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
        /* Rovnaké kartové pozadie ako .premium-upsell-box - používa sa keď
           používateľ balíček/prémium už vlastní (predtým bol tento zoznam
           holý text bez pozadia, na rozdiel od stavu pred kúpou). */
        .premium-features-box {
            background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px;
            padding: 20px; margin-bottom: 0;
        }
        .premium-feature-item { display: flex; gap: 12px; align-items: flex-start; font-size: 0.88rem; line-height: 1.5; }
        .premium-feature-check { color: #2ecc71; font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
        .premium-feature-lock { color: #e67e22; font-size: 1rem; flex-shrink: 0; margin-top: 2px; }
        .premium-upsell-actions { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }
        .premium-coffee-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 0.95rem; font-weight: 700; background: #FFDD00; color: #1a1a1a; border: none; }
        .premium-coffee-btn:hover { filter: brightness(0.95); background: #FFDD00; }
        .premium-upsell-note { font-size: 0.75rem; color: var(--text-muted); line-height: 1.5; margin: 0; }

        /* Rozšírené zobrazenie recenzií (prémiový režim) */
        .review-list-item-expanded { border-left: 3px solid #e67e22; }
        .emp-meta-grid {
            display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 16px;
            background: var(--category-row-bg); border-radius: 10px; padding: 12px 14px; margin: 12px 0;
        }
        @media (max-width: 480px) {
            /* Na mobile radšej pevné 2 stĺpce ako auto-fill, ktoré by pri úzkej obrazovke
               spadlo na 1 stĺpec a spravilo z Ďalších informácií dlhý zoznam. */
            .emp-meta-grid { grid-template-columns: repeat(2, 1fr); }
        }
        .emp-meta-item { display: flex; flex-direction: column; gap: 2px; font-size: 0.82rem; }
        .emp-meta-label { font-size: 0.66rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
        .emp-ratings-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
        .emp-rating-chip { font-size: 0.72rem; font-weight: 600; padding: 3px 9px; border-radius: 20px; }
        .emp-rating-pos { background: var(--bg-smiley-pos); color: #2ecc71; border: 1px solid var(--border-smiley-pos); }
        .emp-rating-neu { background: var(--bg-smiley-neu); color: #3498db; border: 1px solid var(--border-smiley-neu); }
        .emp-rating-neg { background: var(--bg-smiley-neg); color: #e74c3c; border: 1px solid var(--border-smiley-neg); }

        /* Krátke zvýraznenie riadku po preskočení z recenzie na používateľa */
        .admin-table tr.row-highlight { animation: rowHighlightFade 2s ease-out; }
        @keyframes rowHighlightFade {
            0% { background: rgba(52, 152, 219, 0.35); }
            100% { background: transparent; }
        }

        /* Prepínač kompaktného/rozšíreného zobrazenia */
        .view-mode-switch { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 0.8rem; color: var(--text-muted); }
        .view-mode-btn {
            background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 20px;
            padding: 5px 14px; cursor: pointer; font-size: 0.8rem; font-weight: 600; color: var(--text-muted);
        }
        .view-mode-btn:hover { background: var(--category-row-bg); }
        .view-mode-btn.active { background: #3498db; border-color: #3498db; color: #fff; }

        /* Rozšírené zobrazenie recenzie v administrácii */
        .admin-meta-grid {
            display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px;
            margin: 14px 0; padding: 14px; background: var(--category-row-bg); border-radius: 10px;
        }
        .admin-meta-field { display: flex; flex-direction: column; gap: 2px; font-size: 0.85rem; word-break: break-word; overflow-wrap: anywhere; }
        .admin-meta-label { font-size: 0.68rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
        .admin-ratings-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
        .admin-rating-chip { font-size: 0.75rem; font-weight: 600; padding: 4px 10px; border-radius: 20px; }
        .admin-rating-pos { background: var(--bg-smiley-pos); color: #2ecc71; border: 1px solid var(--border-smiley-pos); }
        .admin-rating-neu { background: var(--bg-smiley-neu); color: #3498db; border: 1px solid var(--border-smiley-neu); }
        .admin-rating-neg { background: var(--bg-smiley-neg); color: #e74c3c; border: 1px solid var(--border-smiley-neg); }
        .admin-text-block { margin-bottom: 10px; word-break: break-word; overflow-wrap: anywhere; }
        .admin-text-block p { margin: 4px 0 0 0; font-size: 0.85rem; line-height: 1.5; color: var(--text-main); background: var(--category-row-bg); padding: 10px 12px; border-radius: 8px; word-break: break-word; overflow-wrap: anywhere; }
        .admin-text-block-bg { background: var(--category-row-bg); padding: 10px 12px; border-radius: 8px; }
        .btn-success { background-color: #2ecc71; color: white; }
        .btn-success:hover { background-color: #27ae60; }
        .btn-dev { background-color: var(--border-color); color: var(--text-muted); border: 1px dashed var(--text-muted); }

        .input-field, select, textarea { width: 100%; padding: 14px; border-radius: 12px; border: 1px solid var(--border-color); font-size: 1rem; outline: none; background: var(--input-bg); color: var(--text-main); }
        .input-field:focus, select:focus, textarea:focus { border-color: #3498db; }

        /* ==========================================================================
           STRÁNKA 1: ÚVODNÁ STRÁNKA (RÁZCESTIE)
           ========================================================================== */
        #page-home { position: relative; display: flex; flex-direction: column; min-height: 100vh; overflow: hidden; }
        .home-wrapper { display: flex; justify-content: center; align-items: flex-start; padding: 20px; padding-top: 9vh; }
        .home-theme-pos { position: absolute; top: 16px; right: 16px; z-index: 100; }
        @media (min-width: 500px) {
            .home-theme-pos { top: 20px; right: 40px; }
        }

        /* Zóna vyplní zvyšný priestor medzi obsahom a pätičkou - pás sa v nej automaticky vycentruje */
        /* padding = vždy medzera nad aj pod pásom (aj keď nie je voľné miesto), inak by karty "lepili" na pätičku */
        .home-lane-zone { flex: 1; display: flex; align-items: center; overflow: hidden; width: 100%; min-height: 80px; padding: 32px 0 40px; box-sizing: border-box; }

        .marquee-lane { width: 100%; overflow: hidden; }
        .marquee-track { display: flex; gap: 40px; width: max-content; animation: marqueeScroll linear infinite; }

        .bg-card {
            flex: 0 0 auto; background: var(--bg-float-card); padding: 18px 22px; border-radius: 14px;
            box-shadow: 0 10px 25px var(--shadow); border: 1px solid var(--border-color); width: 320px;
            backdrop-filter: blur(6px); opacity: 0.55;
        }
        .bg-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; gap: 8px; }
        .bg-card-header > div:first-child { width: 0; flex: 1; overflow: hidden; }
        .bg-card-title { font-weight: 700; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; width: 100%; }
        .bg-card-sub { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; width: 100%; }
        .bg-card-text {
            font-size: 0.85rem; line-height: 1.5; color: var(--text-main); margin-top: 6px;
            display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* Vizuálne odlíšenie karty s vtipnou príhodou zo zamestnania (rovnaká modrá ako neutrálny smajlík) */
        .bg-card-anecdote  { border-color: var(--border-smiley-neu); }
        .bg-card-interview { border-color: rgba(52,152,219,0.3); }

        /* Karty vtipných príhod v gride zamestnaneckého portálu - jemné modré podfarbenie */
        .review-card-anecdote { background: var(--bg-smiley-neu); border-color: var(--border-smiley-neu); }

        @keyframes marqueeScroll {
            from { transform: translateX(0); }
            to { transform: translateX(-50%); }
        }

        .home-container { position: relative; z-index: 10; max-width: 900px; width: 100%; text-align: center; }
        .home-title { font-size: clamp(1.8rem, 8vw, 3rem); font-weight: 800; margin-bottom: 10px; white-space: nowrap; }
        .home-title span { color: #3498db; }
        .home-subtitle { font-size: 1.2rem; color: var(--text-muted); margin-bottom: 50px; }

        .choices-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
        @media (max-width: 650px) { .choices-grid { grid-template-columns: 1fr; } }
        .choice-card {
            background: var(--bg-card); padding: 45px 35px; border-radius: 16px; box-shadow: 0 10px 30px var(--shadow);
            border: 1px solid var(--border-color); transition: transform 0.3s, box-shadow 0.3s;
            display: flex; flex-direction: column; justify-content: space-between; align-items: center;
        }
        .choice-card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px var(--shadow-hover); }
        .icon-box { margin-bottom: 20px; }
        .icon-box svg { width: 60px; height: 60px; stroke: var(--text-main); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
        .choice-card h2 { font-size: 1.5rem; margin-bottom: 15px; }
        .choice-card p { font-size: 0.95rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 35px; min-height: 60px; }

        /* ==========================================================================
           STRÁNKA 2: PORTÁL ZAMESTNANCA
           ========================================================================== */
        .hero-search-section { max-width: 1200px; margin: 50px auto 32px auto; text-align: center; padding: 0 20px; }
        .hero-search-section h1 { font-size: 2.3rem; margin-bottom: 25px; font-weight: 700; }
        .search-area-box { max-width: 1200px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
        .hero-main-buttons-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
        .hero-main-buttons-row .btn { min-width: 0; }
        .hero-main-buttons-row-wide { max-width: 1200px; width: 100%; margin: 0 auto; }
        @media (max-width: 550px) { .hero-main-buttons-row { grid-template-columns: 1fr; } }

        .search-wrapper { background: var(--bg-card); border-radius: 12px; box-shadow: 0 6px 20px var(--shadow); border: 1px solid var(--border-color); display: flex; align-items: center; padding: 4px; }

        .hero-search-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: stretch; }
        .hero-search-row .search-wrapper { grid-column: 1 / 3; min-width: 0; }
        .hero-search-row #advanced-search-toggle { grid-column: 3 / 4; min-width: 0; white-space: nowrap; }
        @media (max-width: 650px) {
            .hero-search-row { grid-template-columns: 1fr; }
            .hero-search-row .search-wrapper, .hero-search-row #advanced-search-toggle { grid-column: 1; }
        }
        .search-wrapper .input-field { border: none; padding: 12px; }
        .btn-block-search { width: 100%; display: block; box-shadow: 0 4px 15px var(--shadow); }

        .main-content { max-width: 1200px; margin: 0 auto; padding: 0 20px; padding-bottom: 60px; }
        .section-title { font-size: 1.2rem; color: var(--text-muted); margin-bottom: 25px; font-weight: 600; }

        .search-results-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 25px; }
        .sort-controls { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text-muted); }
        .sort-controls select { padding: 8px 12px; }

        /* Mriežka kde JS naťahá dáta z DB */
        .reviews-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-auto-rows: 1fr; /* všetky riadky rovnakej výšky */
            gap: 18px;
            width: 100%;
            align-items: stretch;
        }
        @media (min-width: 1000px) { .reviews-grid { grid-template-columns: repeat(3, 1fr); } }
        @media (max-width: 480px) { .reviews-grid { grid-template-columns: 1fr; } }

        /* Phantom kartičky – rovnaká výška ako reálne, ale neviditeľné */
        .review-card-phantom {
            visibility: hidden;
            pointer-events: none;
            box-shadow: none !important;
            border-color: transparent !important;
            background: transparent !important;
        }

        /* Fixná výška grid wrapperov – bodky a sekcie nikdy neskáču */
        .reviews-grid-wrap {
            min-height: 480px;
            display: flex;
            flex-direction: column;
        }
        .reviews-grid-wrap .reviews-grid {
            flex: 1;
            align-content: start;
        }

        /* Sekcie s presne jedným riadkom kartičiek (responsiveGrid na
           employee.html) - žiadna umelá min-height kalibrovaná pre 2 riadky,
           inak by sa jediný riadok naťahoval na dvojnásobnú výšku. */
        .reviews-grid-wrap-single-row { min-height: 0; }
        .reviews-grid-wrap-single-row .reviews-grid { grid-auto-rows: auto; flex: none; }

        .reviews-grid-wrap .pagination-dots {
            margin-top: auto;
            padding-top: 16px;
        }
        .reviews-grid::after { content: none; }

        .reviews-list { display: flex; flex-direction: column; gap: 20px; width: 100%; }
        .review-list-item {
            background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px;
            padding: 28px; box-shadow: 0 4px 20px var(--shadow); transition: transform 0.2s, box-shadow 0.2s;
            display: flex; flex-direction: column;
        }
        .review-list-item .card-footer { margin-top: auto; padding-top: 12px; }
        .review-list-item:hover { transform: translateY(-3px); box-shadow: 0 15px 40px var(--shadow-hover); }
        .review-list-anecdote {
            background: var(--bg-smiley-neu); border: 1px dashed var(--border-smiley-neu); border-radius: 10px;
            padding: 12px 16px; margin: 12px 0; font-size: 0.9rem; line-height: 1.5;
        }
        .review-list-anecdote p { margin: 6px 0 0 0; color: var(--text-main); }

        .pagination-dots { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 24px; flex-wrap: wrap; padding: 10px 6px; }
        .pagination-dot { width: 10px; height: 10px; border-radius: 50%; border: none; padding: 0; cursor: pointer; background: var(--border-color); transition: transform 0.2s, background 0.2s; }
        .pagination-dot.active { background: #3498db; transform: scale(1.35); }
        /* Priblíženie myšou k CELEJ skupine zväčší všetky bodky naraz - nielen
           tú, na ktorej presne stojí kurzor - takže sa dá ľahšie trafiť. */
        .pagination-dots:hover .pagination-dot { transform: scale(1.3); }
        .pagination-dots:hover .pagination-dot:hover { background: var(--text-muted); transform: scale(1.5); }
        .pagination-dots:hover .pagination-dot.active { transform: scale(1.4); }

        /* Klasické číslované stránkovanie so šípkami (pre dlhé zoznamy, napr. stovky recenzií) */
        .pagination-classic { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 24px; flex-wrap: wrap; }
        .pagination-arrow, .pagination-number {
            min-width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border-color);
            background: var(--bg-card); color: var(--text-main); cursor: pointer; font-size: 0.9rem; font-weight: 600;
            display: flex; align-items: center; justify-content: center; padding: 0 8px; transition: background 0.2s, border-color 0.2s;
        }
        .pagination-arrow { font-size: 1.2rem; }
        .pagination-arrow:hover:not(:disabled), .pagination-number:hover { background: var(--category-row-bg); }
        .pagination-arrow:disabled { opacity: 0.35; cursor: default; }
        .pagination-number.active { background: #3498db; border-color: #3498db; color: #fff; }
        .pagination-ellipsis { color: var(--text-muted); padding: 0 4px; }
        .pagination-page-label { width: 100%; text-align: center; font-size: 0.8rem; color: var(--text-muted); margin-top: 8px; }
        
        .review-card { background: var(--bg-card); border-radius: 16px; padding: 22px; box-shadow: 0 4px 20px var(--shadow); border: 1px solid var(--border-color); display: flex; flex-direction: column; transition: transform 0.3s, box-shadow 0.3s; height: 100%; box-sizing: border-box; }
        .review-card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px var(--shadow-hover); }
        .card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; gap: 8px; }
        .card-header > div:first-child { width: 0; flex: 1; overflow: hidden; }
        .company-name {
            font-weight: 700; font-size: 1.1rem;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
            display: block; width: 100%;
        }
        .company-name-link { color: var(--text-main); text-decoration: none; }
        .company-name-link:hover { color: #3498db; }
        .job-title {
            font-size: 0.85rem; color: var(--text-muted); margin-top: 2px; word-break: break-word; overflow-wrap: anywhere;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
            line-height: 1.4;
        }
        
        .custom-smiley { width: 32px; height: 32px; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.18s ease; }
        .card-header:hover .custom-smiley { transform: scale(1.1); }

        /* Smajlíci v popup upozornení pred písaním recenzie (na employee.html, company-profile.html, my-profile.html) */
        .write-notice-smiley {
            width: 40px; height: 40px; fill: none; stroke-width: 2.5;
            stroke-linecap: round; stroke-linejoin: round;
            transition: transform 0.18s ease;
        }
        .write-notice-smiley:hover { transform: scale(1.15); }
        .write-notice-smiley-pos { stroke: #2ecc71; }
        .write-notice-smiley-neu { stroke: #3498db; }
        .write-notice-smiley-neg { stroke: #e74c3c; }
        .smiley-positive { stroke: #2ecc71; }
        .smiley-neutral { stroke: #3498db; }
        .smiley-negative { stroke: #e74c3c; }
        .anecdote-badge {
            display: inline-block; white-space: nowrap; font-size: 0.7rem; font-weight: 700;
            background: var(--bg-smiley-neu); color: #3498db; border: 1px solid var(--border-smiley-neu);
            padding: 5px 10px; border-radius: 20px;
        }

        /* Označenie ukážkových ("na inšpiráciu") príspevkov - odlíšené jantárovou,
           aby ich nikto nezamieňal s reálnou spätnou väzbou od zamestnancov */
        .sample-badge {
            display: inline-block; white-space: nowrap; font-size: 0.68rem; font-weight: 700;
            background: rgba(230, 126, 34, 0.1); color: #e67e22; border: 1px solid rgba(230, 126, 34, 0.3);
            padding: 3px 9px; border-radius: 20px; vertical-align: middle; margin-left: 4px;
        }
        .interview-badge {
            display: inline-block; white-space: nowrap; font-size: 0.68rem; font-weight: 700;
            background: rgba(52, 152, 219, 0.1); color: #2980b9; border: 1px solid rgba(52, 152, 219, 0.3);
            padding: 3px 9px; border-radius: 20px; vertical-align: middle; margin-left: 4px;
        }
        /* Zakladajúci partner - zámerne NEUTRÁLNY (sivý), aby nepôsobil ako
           hodnotenie kvality firmy a nezamieňal sa s oranžovým "Na inšpiráciu". */
        .founder-partner-badge {
            display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
            font-size: 0.72rem; font-weight: 600; color: var(--text-muted);
            background: var(--category-row-bg); border: 1px solid var(--border-color);
            padding: 3px 10px; border-radius: 20px; vertical-align: middle;
        }
        .founder-partner-badge svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }
        .sample-info-bar {
            display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
            background: rgba(230, 126, 34, 0.07); border: 1px dashed rgba(230, 126, 34, 0.35);
            border-radius: 12px; padding: 12px 16px; margin-bottom: 28px;
            font-size: 0.82rem; line-height: 1.5; color: var(--text-muted);
        }
        .sample-info-bar .sample-badge { margin-left: 0; flex-shrink: 0; }
        .sample-notice {
            background: rgba(230, 126, 34, 0.07); border: 1px dashed rgba(230, 126, 34, 0.35);
            border-radius: 10px; padding: 12px 14px; margin-bottom: 18px;
            font-size: 0.82rem; line-height: 1.5; color: var(--text-muted);
        }

        /* Ukážkový príspevok – rozbaľovacia pilulka (šetrí miesto, hlavne na mobile) */
        .sample-notice-collapsible { margin-bottom: 18px; }
        .sample-notice-toggle-btn {
            display: inline-flex; align-items: center; gap: 6px;
            background: rgba(230, 126, 34, 0.1); border: 1px dashed rgba(230, 126, 34, 0.4);
            border-radius: 20px; padding: 5px 14px; cursor: pointer;
            font-size: 0.8rem; font-weight: 600; color: #e67e22;
            transition: background 0.15s;
        }
        .sample-notice-toggle-btn:hover { background: rgba(230, 126, 34, 0.18); }
        .sample-notice-toggle-btn .detail-toggle-icon { width: 12px; height: 12px; stroke: #e67e22; transition: transform 0.2s; }
        .sample-notice-toggle-btn .detail-toggle-icon.expanded { transform: rotate(180deg); }
        .sample-notice-content {
            background: rgba(230, 126, 34, 0.07); border: 1px dashed rgba(230, 126, 34, 0.35);
            border-radius: 10px; padding: 12px 14px; margin-top: 8px;
            font-size: 0.82rem; line-height: 1.5; color: var(--text-muted);
        }

        .review-text {
            font-size: 0.95rem; line-height: 1.6; margin-bottom: 16px; color: var(--text-main);
            display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;
            overflow: hidden;
            height: calc(1.6em * 5); /* fixná výška = presne 5 riadkov vždy */
            word-break: break-word; overflow-wrap: anywhere; white-space: pre-wrap;
        }
        /* V zozname (search výsledky) nechceme fixnú výšku */
        .reviews-list .review-text { height: auto; min-height: 0; word-break: break-word; overflow-wrap: anywhere; white-space: pre-wrap; }
        .card-footer {
            border-top: 1px solid var(--border-color); padding-top: 12px;
            display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
            font-size: 0.82rem; gap: 8px 10px; flex-shrink: 0;
            /* Rezervovaná výška počíta s "najhorším prípadom" (dátum + tlačidlo
               Odpoveď firmy na dvoch riadkoch) - platí pre VŠETKY kartičky
               rovnako, aj tie čo dva riadky nepotrebujú, inak by mali kartičky
               v jednom riadku rôznu výšku podľa toho, ktorá recenzia má
               odpoveď firmy a ktorá nie. */
            min-height: 38px;
        }
        .card-footer-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; flex-wrap: wrap; }
        .review-card .review-date { white-space: nowrap; }

        /* Admin - recenzie: na mobile sa e-mail a tlačidlá Upraviť/Zmazať
           tlačili na jeden riadok. Tlačidlá sa presunú pod e-mail, ale medzi
           sebou zostanú vedľa seba. */
        @media (max-width: 600px) {
            .admin-review-footer { flex-direction: column; align-items: flex-start; min-height: 0; }
        }

        /* Odpoveď firmy pod kartičkou recenzie - rozbaliteľná za tlačidlom */
        .company-reply-block {
            background: var(--bg-smiley-neu); border: 1px solid var(--border-smiley-neu); border-radius: 12px;
            padding: 12px 14px; margin-top: 8px; font-size: 0.85rem; line-height: 1.5;
        }
        .company-reply-label { display: block; font-size: 0.72rem; font-weight: 700; color: #3498db; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 4px; }
        .company-reply-block p { margin: 0; color: var(--text-main); }
        /* Odpoveď firmy – rozbaľovacie tlačidlo (kompaktné/rozšírené kartičky) */
        .company-reply-collapsible { margin: 10px 0 6px; }
        .company-reply-toggle-btn {
            display: inline-flex; align-items: center; gap: 6px;
            background: var(--category-row-bg); border: 1px solid var(--border-color);
            border-radius: 20px; padding: 5px 14px; cursor: pointer;
            font-size: 0.8rem; font-weight: 600; color: #3498db;
            transition: background 0.15s;
        }
        .company-reply-toggle-btn:hover { background: var(--border-color); }
        .company-reply-toggle-btn .btn-icon { width: 13px; height: 13px; stroke: #3498db; }
        .company-reply-toggle-btn .detail-toggle-icon { width: 11px; height: 11px; stroke: #3498db; }
        /* Inline verzia pre malé kartičky */
        .company-reply-inline {
            background: transparent; border: none; border-radius: 0; padding: 0;
            font-size: 0.82rem;
        }
        .company-reply-inline:hover { background: transparent; opacity: 0.75; }

        @keyframes replyPulse {
            0%   { box-shadow: 0 0 0 0 rgba(52,152,219,0.4); background: rgba(52,152,219,0.08); }
            60%  { box-shadow: 0 0 0 10px rgba(52,152,219,0); background: transparent; }
            100% { box-shadow: 0 0 0 0 rgba(52,152,219,0); background: transparent; }
        }
        .reply-pulse { animation: replyPulse 0.7s ease 3; border-radius: 10px; }

        .edit-status-badge { font-size: 0.75rem; font-weight: 600; padding: 5px 12px; border-radius: 20px; white-space: nowrap; }
        .edit-status-free { background: var(--bg-smiley-pos); color: #2ecc71; border: 1px solid var(--border-smiley-pos); }
        .edit-status-paid { background: var(--bg-smiley-neu); color: #3498db; border: 1px solid var(--border-smiley-neu); }

        /* Používateľský profil */
        .profile-info-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; padding: 24px; box-shadow: 0 4px 20px var(--shadow); margin-top: 24px; }
        .sidebar-badge {
            display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px;
            background: #3498db; color: #fff; border-radius: 20px; font-size: 0.7rem; font-weight: 700; padding: 0 6px; margin-left: auto;
        }
        .notification-new-tag {
            display: inline-block; background: var(--bg-smiley-neu); color: #3498db; border: 1px solid var(--border-smiley-neu);
            font-size: 0.68rem; font-weight: 700; padding: 2px 8px; border-radius: 20px; margin-left: 8px; vertical-align: middle;
        }
        .review-date { color: var(--text-muted); }
        .profile-link { color: #3498db; text-decoration: none; font-weight: 600; }

        /* ==========================================================================
           STRÁNKA 3: FORMULÁR RECENZIE (ZAROVNANÉ A ČISTÉ SMAJLÍKY)
           ========================================================================== */
        .form-page-body { padding: 40px 20px; display: flex; justify-content: center; }
        .form-container { max-width: 860px; width: 100%; background: var(--bg-card); padding: 40px 48px; border-radius: 20px; box-shadow: 0 10px 30px var(--shadow); border: 1px solid var(--border-color); }
        .form-container h2 { font-size: 1.8rem; margin-bottom: 10px; }
        .form-container p { color: var(--text-muted); margin-bottom: 30px; font-size: 0.95rem; }

        /* Úprava profilu firmy - širšie rozloženie na dvoch stĺpcoch */
        .edit-profile-container { max-width: 1100px; }
        .edit-profile-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 36px; align-items: start; }
        @media (max-width: 900px) { .edit-profile-grid { grid-template-columns: 1fr; } }
        .edit-profile-col { display: flex; flex-direction: column; }
        .form-group { margin-bottom: 25px; }
        /* Zvýraznenie polí, ktoré zlyhali pri validácii (frontend alebo backend) */
        .field-error-highlight { border: 2px solid #e74c3c !important; border-radius: 12px !important; }
        .field-error-message { color: #e74c3c; font-size: 0.82rem; font-weight: 600; margin-top: 8px; text-align: left; }
        .smiley-selector.field-error-highlight { padding: 10px; }
        .form-group label { display: block; font-weight: 600; margin-bottom: 10px; font-size: 0.95rem; text-align: center; } /* Zarovnanie Labelu nad smajlíkmi na stred */
        
        .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
        @media (max-width: 900px) {
            .hero-search-section { margin: 30px auto 20px auto; }
            .hero-search-section h1 { font-size: 1.75rem; }
            .form-container { padding: 28px 20px; border-radius: 14px; }
        }
        @media (max-width: 550px) {
            .hero-search-section { margin: 20px auto 16px auto; }
            .hero-search-section h1 { font-size: 1.4rem; margin-bottom: 16px; }
            .search-area-box { gap: 8px; }
            .form-container { padding: 20px 14px; border-radius: 10px; }
            .review-list-item { padding: 16px; }
            .form-row { grid-template-columns: 1fr; gap: 0; }
            .topup-option { font-size: 0.78rem; padding: 12px 4px; }
            .topup-option span { font-size: 0.7rem; }
            .hero-ranking-buttons { flex-direction: column; }
            .hero-ranking-buttons .btn { font-size: 0.85rem; padding: 10px 12px; }
        }

        /* ZJEDNOTENÝ ŠTÝL PRE VŠETKY SMAJLÍKOVÉ VÝBERY */
        .smiley-selector {
            display: flex;
            justify-content: center;
            gap: 12px;
            margin-top: 5px;
        }

        .smiley-option {
            background: transparent;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 48px;
            height: 48px;
            transition: background 0.15s;
        }
        .smiley-option .custom-smiley {
            width: 32px; height: 32px;
            stroke: var(--text-muted);
            transition: stroke 0.18s ease, transform 0.18s ease;
        }

        /* Hover – farebný smajlík + jemné zväčšenie */
        .smiley-option:hover .custom-smiley { transform: scale(1.15); }
        .smiley-option[data-type="neg"]:hover .custom-smiley { stroke: #e74c3c; }
        .smiley-option[data-type="neu"]:hover .custom-smiley { stroke: #3498db; }
        .smiley-option[data-type="pos"]:hover .custom-smiley { stroke: #2ecc71; }

        /* Selected – iba SVG zmení farbu, žiadne pozadie */
        .smiley-option[data-type="neg"].selected .custom-smiley { stroke: #e74c3c; }
        .smiley-option[data-type="neu"].selected .custom-smiley { stroke: #3498db; }
        .smiley-option[data-type="pos"].selected .custom-smiley { stroke: #2ecc71; }

        .category-rating-box { padding: 8px 0; }
        
        .rating-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 0;
            border-bottom: 1px solid var(--border-color);
            gap: 12px;
        }
        .rating-row:last-child { border-bottom: none; padding-bottom: 0; }
        .rating-row-label { flex: 1; font-size: 0.88rem; font-weight: 600; line-height: 1.4; }
        .rating-row-label small { font-weight: 400; color: var(--text-muted); display: block; font-size: 0.78rem; }
        /* Smajlíky sú vždy zarovnané doprava v pevnej šírke */
        .rating-row .smiley-selector { flex-shrink: 0; width: 120px; justify-content: flex-end; }

        #nickname-wrapper { display: none; margin-top: 15px; }

        /* Dropdown s návrhmi firiem z centrálneho registra (prevencia duplicít) */
        .company-suggestions {
            display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
            background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px;
            box-shadow: 0 10px 25px var(--shadow-hover); margin-top: 6px; overflow: hidden;
        }
        .company-suggestion-item { padding: 12px 16px; cursor: pointer; font-size: 0.95rem; text-align: left; }
        .company-suggestion-item:hover { background: var(--category-row-bg); }
        .company-suggestion-item + .company-suggestion-item { border-top: 1px solid var(--border-color); }

        /* Záložný postup pri výpadku registra RPO */
        .company-fallback-box {
            background: rgba(230, 126, 34, 0.07); border: 1px dashed rgba(230, 126, 34, 0.4);
            border-radius: 12px; padding: 14px 16px; margin-top: 10px; text-align: left;
        }
        .company-fallback-text { font-size: 0.82rem; line-height: 1.55; color: var(--text-main); margin: 0 0 12px 0; }
        .company-fallback-actions { display: flex; gap: 10px; flex-wrap: wrap; }
        .company-unverified-notice {
            background: rgba(230, 126, 34, 0.07); border: 1px solid rgba(230, 126, 34, 0.3);
            border-radius: 10px; padding: 10px 14px; margin-top: 10px;
            font-size: 0.8rem; line-height: 1.5; color: #e67e22; text-align: left;
        }
        .company-unverified-cancel {
            display: block; margin-top: 6px; background: none; border: none; padding: 0;
            color: var(--text-muted); font-size: 0.78rem; text-decoration: underline; cursor: pointer;
        }
        .company-unverified-cancel:hover { color: var(--text-main); }

        .advanced-filters-panel {
            background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px;
            padding: 18px 20px; box-shadow: 0 6px 20px var(--shadow); text-align: left;
        }
        .btn-icon { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; margin-right: 4px; }

        /* Modálne okno - needitovateľný detail recenzie */
        @keyframes modalOverlayFadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes modalBoxScaleIn { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }

        /* Rovnaký princíp aj pre rozbaľovacie panely (Filtre, Akcie, Rozšírené
           hľadanie, Rebríčky a pod.) - jemný fade-in + zosun namiesto
           okamžitého "vyskočenia" pri prepnutí display:none → viditeľný. */
        @keyframes collapsiblePanelFadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
        .dashboard-filter-bar,
        .bulk-actions-bar,
        .advanced-filters-panel,
        .hero-ranking-buttons,
        .team-invite-row {
            animation: collapsiblePanelFadeIn 0.3s ease;
        }
        .modal-overlay {
            position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); z-index: 200;
            display: flex; align-items: center; justify-content: center; padding: 20px;
            animation: modalOverlayFadeIn 0.35s ease;
        }
        .modal-overlay .modal-dialog {
            animation: modalBoxScaleIn 0.35s ease;
        }
        @media (max-width: 800px) {
            /* Menší okraj na mobile - uvoľní extra miesto pre samotný obsah modálu,
               kde je priestor omnoho vzácnejší než na desktope. */
            .modal-overlay { padding: 10px; }
        }
        .modal-dialog {
            position: relative; max-width: 640px; width: 100%;
            background: var(--bg-card); border-radius: 20px;
            padding: 36px 32px; box-shadow: 0 20px 60px rgba(0,0,0,0.2);
        }
        /* Kedykoľvek modal-dialog obsahuje modal-box (t.j. modal má vlastný
           scrollovateľný "box" s pozadím/tieňom), vonkajší modal-dialog sa musí
           spriehľadniť - inak vznikne vizuálne "krabica v krabici" (dvojité
           pozadie/padding/tieň). Predtým bolo toto pravidlo naviazané len na
           #review-detail-modal, čo spôsobilo rovnaký bug pri reply-modal aj
           employer-interest-modal (obe tiež kombinujú modal-dialog+modal-box). */
        .modal-dialog:has(> .modal-box) {
            background: transparent; padding: 0; box-shadow: none;
        }
        /* Detail recenzie – modal-dialog bez vlastného pozadia/paddingu, modal-box je celý obsah */
        #review-detail-modal .modal-dialog {
            max-width: 860px;
        }
        @media (min-width: 900px) {
            #review-detail-modal .modal-dialog { max-width: min(1400px, 94vw); }
        }
        @media (min-width: 1300px) {
            #review-detail-modal .modal-dialog { max-width: 1500px; }
        }
        .modal-box {
            background: var(--bg-card); border-radius: 20px; box-shadow: 0 20px 50px var(--shadow-hover);
            border: 1px solid var(--border-color); width: 100%;
            max-height: 85vh; max-height: 85dvh; overflow: hidden; position: relative;
        }
        @media (max-width: 800px) {
            /* Väčšia výška na mobile (90dvh namiesto pôvodných 78vh) - predošlá
               hodnota bola príliš malá na to, aby sa dnu zmestil formulár aj s
               tlačidlom, aj keby scroll fungoval bezchybne. dvh namiesto vh -
               na mobile sa vh počíta podľa najväčšej možnej výšky (lišta
               prehliadača schovaná), zatiaľ čo dvh správne reflektuje AKTUÁLNE
               viditeľný priestor (lišta môže byť viditeľná pri otvorení modálu). */
            .modal-box { max-height: 78vh; max-height: 90dvh; }
            .modal-scroll-content { max-height: 78vh; max-height: 90dvh; }
        }
        /* Detail recenzie na počítačoch/notebookoch - využiť viac vertikálneho priestoru
           (menší okraj od okraja obrazovky ako predtým, ale stále zachovaný, nie na nulu).
           Horný okraj je fixný (align-items:flex-start namiesto center), takže sa modál
           pri prepínaní medzi recenziami rôznej dĺžky vždy začína v rovnakej výške obrazovky -
           mení sa len voľné miesto pod ním, nie skáče celý modál hore/dole. */
        @media (min-width: 800px) {
            #review-detail-modal {
                align-items: flex-start; padding-top: 30px; padding-bottom: 10px;
            }
            #review-detail-modal .modal-box { max-height: 94vh; }
            #review-detail-modal .modal-scroll-content { max-height: 94vh; }
        }

        /* Vlastný, zaoblený scrollbar v modáloch namiesto štandardného vzhľadu prehliadača.
           border-radius je na TOMTO elemente (nie len na rodičovi s overflow:hidden),
           lebo len tak sa natívny scrollbar sám orežе presne podľa zaoblenia rohov modálu -
           spoliehať sa len na overflow:hidden rodiča scrollbar niekedy nechá presahovať. */
        .modal-scroll-content {
            scrollbar-width: thin; scrollbar-color: var(--border-color) transparent;
            border-radius: 20px;
        }
        .modal-scroll-content::-webkit-scrollbar { width: 25px; }
        .modal-scroll-content::-webkit-scrollbar-track { background: transparent; margin: 20px 0; }
        .modal-scroll-content::-webkit-scrollbar-thumb {
            background-color: var(--border-color); border-radius: 10px;
            border: 8px solid var(--bg-card); background-clip: padding-box;
        }
        .modal-scroll-content::-webkit-scrollbar-thumb:hover { background-color: var(--text-muted); }
        /* Editačné modály v administrácii (recenzie, používatelia, firmy...) -
           širšie na desktope pre pohodlnejšiu prácu s dvojstĺpcovým formulárom,
           na mobile zostávajú na celú šírku s menším paddingom. */
        .admin-edit-dialog { max-width: 640px; }
        @media (min-width: 900px) {
            .admin-edit-dialog { max-width: 820px; }
        }
        @media (max-width: 640px) {
            .admin-edit-dialog { max-width: 100%; }
            .admin-edit-dialog .modal-scroll-content { padding: 24px 20px; }
            .admin-edit-dialog .form-row { grid-template-columns: 1fr; gap: 0; }
        }
        .modal-scroll-content { max-height: 85vh; max-height: 85dvh; overflow-y: auto; overflow-x: hidden; padding: 40px; text-align: left; word-break: break-word; overflow-wrap: anywhere; }

        /* Vlastný alert/confirm modál (customAlert/customConfirm v common.js) -
           keď je obsah zložený z HTML (nadpis + zoznam), potrebuje vlastné
           odsadenie/medzery, keďže #custom-dialog-message inak počíta len
           s jednoduchým odstavcom textu. */
        #custom-dialog-message strong { display: block; margin-bottom: 10px; font-size: 1.02rem; }
        #custom-dialog-message ul { margin: 10px 0 14px; padding-left: 22px; }
        #custom-dialog-message li { margin-bottom: 6px; line-height: 1.5; }
        #custom-dialog-message p { margin: 0 0 12px; line-height: 1.6; }
        #custom-dialog-message p:last-child { margin-bottom: 0; }

        @media (max-width: 600px) {
            .modal-scroll-content { padding: 24px 18px; }
        }
        @media (max-width: 800px) {
            /* Extra miesto na konci, aby posledná časť obsahu nebola skrytá pod
               pevne umiestnenými šípkami (detail-nav-btn) na spodku obrazovky. */
            #review-detail-modal .modal-scroll-content { padding-bottom: 90px; }
        }
        /* Na mobile je 25px scrollbar (vhodný pre myš na desktope) neprimerane veľký
           a mohol prispievať k horizontálnemu presahu obsahu - na malých obrazovkách
           preto tenší, klasický "mobilný" scrollbar. */
        @media (max-width: 800px) {
            .modal-scroll-content::-webkit-scrollbar { width: 8px; }
            .modal-scroll-content::-webkit-scrollbar-track { margin: 12px 0; }
            .modal-scroll-content::-webkit-scrollbar-thumb { border-width: 2px; }
        }

        /* Na malých obrazovkách sa sidebar (mzda, pracovná náplň, procesy, ponuky práce)
           jednoducho zobrazí pod hlavným obsahom - žiadna zmena oproti pôvodnému poradiu.
           Na širších obrazovkách sa modál rozšíri a sidebar sa presunie vedľa, aby bolo
           vidieť viac informácií naraz bez zbytočného scrollovania. */
        .detail-layout { display: block; }
        @media (min-width: 900px) {
            .modal-dialog { max-width: 920px; }
            /* Experiment: zrkadlovo prehodené stĺpce - sidebar (profil firmy, pozícia,
               indexy šťastia, mzda) je teraz prvý/vľavo (užší), texty recenzie sú
               druhé/vpravo (širšie) a môžu začínať hneď od hornej hrany detailu. */
            .detail-layout { display: grid; grid-template-columns: 320px 1fr; gap: 48px; align-items: start; }
        }
        .modal-close {
            position: absolute; top: 0; right: -54px; background: var(--bg-card); border: 1px solid var(--border-color);
            width: 38px; height: 38px; border-radius: 50%; cursor: pointer; font-size: 1rem; color: var(--text-muted);
            z-index: 2; box-shadow: 0 6px 16px var(--shadow-hover);
            transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
        }
        .modal-close:hover { background: var(--category-row-bg); color: var(--text-main); transform: scale(1.08); }
        @media (max-width: 800px) {
            .modal-close {
                position: fixed; top: 12px; right: 12px; z-index: 300;
            }
        }
        /* Detail recenzie má vlastný, širší modál (max-width sa mení podľa obrazovky),
           preto jeho zatváracie tlačidlo aj šípky riadi JS (positionDetailModalControls
           v common.js) podľa skutočnej šírky modálu - pevný CSS offset by ho na
           notebookoch/stredných obrazovkách vytlačil mimo viditeľnú oblasť. */
        #review-detail-modal .modal-close {
            position: fixed; top: 20px; right: 20px; z-index: 300;
        }
        .detail-nav-btn {
            position: fixed; top: 50%; transform: translateY(-50%);
            background: var(--bg-card); border: 1px solid var(--border-color);
            width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            color: var(--text-muted); z-index: 300; box-shadow: 0 6px 16px var(--shadow-hover);
            transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
        }
        .detail-nav-btn:hover { background: var(--category-row-bg); color: var(--text-main); transform: translateY(-50%) scale(1.08); }
        .detail-nav-btn svg { width: 20px; height: 20px; }
        /* left/right sa nastavujú priamo JS-om (positionDetailNavButtons v common.js) podľa
           skutočnej šírky modálu, aby šípky boli vždy viditeľné bez ohľadu na veľkosť obrazovky
           (na notebookoch je modál takmer na celú šírku okna, takže pevný CSS offset mimo
           modál by ich vytlačil za okraj viewportu). Tieto hodnoty sú len núdzový fallback. */
        .detail-nav-prev { left: 12px; }
        .detail-nav-next { right: 12px; }
        @media (max-width: 800px) {
            .detail-nav-btn {
                top: auto; transform: none;
                bottom: max(16px, env(safe-area-inset-bottom, 16px));
            }
        }
        .modal-box h2 { font-size: 1.6rem; margin-bottom: 4px; }
        /* Profil recenzie v ľavom stĺpci - názov firmy + smajlík vedľa seba, pozícia pod tým.
           Dlhý názov firmy sa zalomí na viac riadkov (žiadny orežaný ellipsis), smajlík
           má flex-shrink:0 aby sa nikdy nezmenšil ani nezmizol. */
        .detail-profile-header { margin-bottom: 20px; }
        .detail-profile-title-row { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 4px; }
        .detail-profile-title-row h2 { flex: 1; min-width: 0; word-break: break-word; margin-bottom: 0; }
        .detail-profile-title-row .detail-overall-feel-box { flex-shrink: 0; margin-top: 2px; }
        .detail-company-link { color: var(--text-main); text-decoration: none; transition: color 0.2s; }
        .detail-company-link:hover { color: #3498db; }
        .detail-subtitle { color: var(--text-muted); margin-bottom: 0; font-size: 0.95rem; }
        .detail-overall-feel-box { display: flex; align-items: center; flex-shrink: 0; }
        .detail-overall-feel-box .custom-smiley { width: 40px; height: 40px; transition: transform 0.18s ease; }
        .detail-overall-feel-box:hover .custom-smiley { transform: scale(1.1); }
        .detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 8px; }
        @media (max-width: 480px) {
            .detail-grid { grid-template-columns: repeat(2, 1fr); }
            /* Meno + e-mail (my-profile.html) sa na mobile stláčali do 2
               stĺpcov, čo pri dlhších e-mailoch spôsobovalo nečitateľné
               zalamovanie - táto karta má vždy stĺpec jeden pod druhým. */
            .profile-info-card .detail-grid { grid-template-columns: 1fr !important; }
        }
        .detail-field { background: var(--category-row-bg); border-radius: 10px; padding: 10px 14px; word-break: break-word; overflow-wrap: anywhere; }
        .detail-label { display: block; font-size: 0.75rem; color: var(--text-muted); font-weight: 600; margin-bottom: 3px; text-transform: uppercase; letter-spacing: 0.03em; }
        .detail-field-full { margin-bottom: 20px; }
        .detail-field-full .detail-label { margin-bottom: 8px; }
        .detail-ratings { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; background: var(--category-row-bg); border-radius: 12px; padding: 12px 16px; }
        .detail-happiness-block { margin-bottom: 20px; }
        .detail-happiness-block .detail-label { display: block; margin-bottom: 8px; }
        .detail-extra-info-section { margin-top: 40px; }
        .detail-job-offers-section { margin-top: 0; }
        #detail-job-offers-wrapper { margin-top: 14px; }
        .detail-rating-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; }
        .detail-rating-row .custom-smiley { width: 24px; height: 24px; transition: transform 0.18s ease; }
        .detail-rating-row:hover .custom-smiley { transform: scale(1.15); }
        .detail-text-block { background: var(--category-row-bg); border-radius: 10px; padding: 14px 16px; line-height: 1.6; font-size: 0.95rem; white-space: pre-wrap; }
        .detail-anecdote-block {
            background: var(--bg-smiley-neu); border: 1px dashed var(--border-smiley-neu); border-radius: 10px;
            padding: 14px 16px; line-height: 1.6; font-size: 0.95rem; display: flex; gap: 10px;
            align-items: flex-start; text-align: left; width: 100%; box-sizing: border-box;
        }
        .detail-anecdote-block .custom-smiley { width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; }
        .detail-anecdote-block span { text-align: left; white-space: pre-wrap; }

        .detail-company-reply-block {
            background: var(--bg-smiley-neu); border: 1px solid var(--border-smiley-neu); border-radius: 12px;
            padding: 14px 16px; line-height: 1.6; font-size: 0.95rem; text-align: left;
        }
        /* pre-wrap len na samotnom texte - na obale by sa zobrazili aj medzery a
           odriadkovanie zo šablóny (veľké odsadenie a prázdne miesto hore/dole) */
        .detail-company-reply-block span { white-space: pre-wrap; }

        /* Profil firmy - "O firme", fotky, benefity, procesy */
        .company-about-section {
            background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px;
            padding: 30px; box-shadow: 0 4px 20px var(--shadow); margin-bottom: 40px;
        }
        .company-about-text { font-size: 0.98rem; line-height: 1.7; color: var(--text-main); margin-bottom: 24px; }
        .company-photo-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 28px; }
        .company-photo-gallery img, .company-photo-thumb {
            width: 100%; height: 160px; object-fit: cover; border-radius: 12px;
            border: 1px solid var(--border-color); cursor: zoom-in;
            transition: transform 0.15s, box-shadow 0.15s;
        }
        .company-photo-thumb:hover { transform: scale(1.02); box-shadow: 0 6px 24px var(--shadow); }
        @media (max-width: 650px) { .company-photo-gallery { grid-template-columns: 1fr; } }

        /* Nahrávanie fotiek v úprave profilu */
        .image-upload-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
        @media (max-width: 650px) { .image-upload-row { grid-template-columns: 1fr; } }
        .image-upload-slot { position: relative; }
        .image-upload-slot img { width: 100%; height: 130px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border-color); display: block; }
        .image-upload-placeholder {
            width: 100%; height: 130px; border: 2px dashed var(--border-color); border-radius: 10px;
            display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
            cursor: pointer; color: var(--text-muted); font-size: 0.8rem; text-align: center; transition: border-color 0.2s, color 0.2s;
        }
        .image-upload-placeholder span:first-child { font-size: 1.6rem; line-height: 1; }
        .image-upload-placeholder:hover { border-color: #3498db; color: #3498db; }
        .image-remove-btn {
            width: 100%; margin-top: 6px; background: var(--bg-smiley-neg); border: 1px solid var(--border-smiley-neg);
            color: #e74c3c; border-radius: 8px; padding: 6px; font-size: 0.78rem; cursor: pointer;
        }
        .image-remove-btn:hover { background: var(--border-smiley-neg); }
        .company-benefits-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 28px; }
        .company-benefit-chip { background: var(--bg-smiley-pos); border: 1px solid var(--border-smiley-pos); border-radius: 20px; padding: 8px 16px; font-size: 0.88rem; display: flex; align-items: center; gap: 8px; }
        .company-benefit-chip::before { content: ''; flex-shrink: 0; width: 13px; height: 13px; background: #2ecc71; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat; }
        .company-process-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
        @media (max-width: 650px) { .company-process-grid { grid-template-columns: 1fr; } }
        .company-process-card { background: var(--category-row-bg); border-radius: 12px; padding: 18px; }
        .company-process-card h4 { font-size: 0.9rem; margin-bottom: 8px; }
        .company-process-card p { font-size: 0.88rem; line-height: 1.6; color: var(--text-muted); margin: 0; }
        .company-about-section h2 { margin-bottom: 4px; }
        .company-about-subtitle { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 18px; }

        /* Pracovné ponuky v detaile recenzie (dynamický feed - viď obchodný model) */
        .job-offers-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        @media (max-width: 600px) {
            .job-offers-list { grid-template-columns: 1fr; }
        }
        .job-offer-card {
            display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
            background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px;
            padding: 14px 16px; text-decoration: none; color: inherit; transition: transform 0.2s, box-shadow 0.2s;
        }
        .job-offer-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px var(--shadow); }
        .job-offer-title { font-weight: 600; font-size: 0.92rem; margin-bottom: 3px; }
        .job-offer-meta { font-size: 0.78rem; color: var(--text-muted); }
        .job-offer-source {
            font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
            background: var(--bg-smiley-neu); color: #3498db; padding: 4px 9px; border-radius: 20px; white-space: nowrap;
        }
        .job-offers-note { font-size: 0.75rem; color: var(--text-muted); margin-top: 8px; }

        .detail-salary-box { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
        .detail-salary-item { background: var(--category-row-bg); border-radius: 10px; padding: 14px; text-align: center; }
        .detail-salary-item-net { background: var(--bg-smiley-pos); border: 1px solid var(--border-smiley-pos); }

        .detail-salary-label { display: block; font-size: 0.75rem; color: var(--text-muted); font-weight: 600; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.03em; }
        .detail-salary-label-tooltip {
            cursor: help; display: inline-block;
            position: relative;
        }
        .detail-salary-label-tooltip::after {
            content: attr(data-tooltip);
            position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
            background: #1a1a1a; color: #fff; padding: 8px 12px; border-radius: 8px;
            font-size: 0.72rem; font-weight: 400; text-transform: none; letter-spacing: normal;
            line-height: 1.4; width: 220px; text-align: left;
            opacity: 0; pointer-events: none; transition: opacity 0.15s ease;
            z-index: 50; box-shadow: 0 4px 12px rgba(0,0,0,0.25);
        }
        .detail-salary-label-tooltip::before {
            content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
            border: 6px solid transparent; border-top-color: #1a1a1a;
            opacity: 0; pointer-events: none; transition: opacity 0.15s ease; z-index: 50;
        }
        .detail-salary-label-tooltip:hover::after,
        .detail-salary-label-tooltip:hover::before { opacity: 1; }
        .detail-salary-value { font-size: 1.3rem; font-weight: 700; }

        .detail-toggle-btn {
            display: flex; align-items: center; justify-content: space-between; width: 100%;
            background: var(--category-row-bg); border: 1px solid var(--border-color); border-radius: 12px;
            padding: 12px 16px; cursor: pointer; font-size: 0.9rem; font-weight: 600; color: var(--text-main);
            margin-top: 20px; transition: background 0.2s;
        }
        .detail-toggle-btn:hover { background: var(--border-color); }
        .detail-toggle-icon {
            width: 18px; height: 18px; stroke: var(--text-muted); fill: none; stroke-width: 2;
            stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s;
        }
        .detail-toggle-icon.expanded { transform: rotate(180deg); }
        .detail-extra-info { margin-top: 14px; }
        .filter-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
        .filter-row:last-of-type { margin-bottom: 0; }
        .filter-label { font-size: 0.9rem; font-weight: 600; min-width: 110px; }
        .filter-row select { padding: 8px 12px; }
        .filter-smiley-group { display: flex; gap: 8px; }
        .filter-smiley-btn {
            background: transparent; border: none; border-radius: 8px;
            padding: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center;
            transition: background 0.15s;
        }
        .filter-smiley-btn .custom-smiley { width: 26px; height: 26px; stroke: var(--text-muted); transition: stroke 0.18s ease, transform 0.18s ease; }

        /* Hover – SVG zmení farbu + jemné (menšie ako inde) zväčšenie */
        .filter-smiley-btn:hover .custom-smiley { transform: scale(1.08); }
        .filter-smiley-btn[data-feel="neg"]:hover .custom-smiley { stroke: #e74c3c; }
        .filter-smiley-btn[data-feel="neu"]:hover .custom-smiley { stroke: #3498db; }
        .filter-smiley-btn[data-feel="pos"]:hover .custom-smiley { stroke: #2ecc71; }

        /* Active – farba zostane, žiadne pozadie */
        .filter-smiley-btn[data-feel="neg"].active .custom-smiley { stroke: #e74c3c; }
        .filter-smiley-btn[data-feel="neu"].active .custom-smiley { stroke: #3498db; }
        .filter-smiley-btn[data-feel="pos"].active .custom-smiley { stroke: #2ecc71; }

        /* ==========================================================================
           STRÁNKA 4 & 5: ZAMESTNAVATEĽ & DASHBOARD
           ========================================================================== */
        .login-page-body { padding: 60px 20px; display: flex; flex-direction: column; align-items: center; }
        .login-box { max-width: 440px; width: 100%; background: var(--bg-card); padding: 40px; border-radius: 20px; box-shadow: 0 10px 30px var(--shadow); border: 1px solid var(--border-color); }
        .login-box h2 { font-size: 1.7rem; margin-bottom: 10px; text-align: center; }
        .login-box p { font-size: 0.9rem; color: var(--text-muted); text-align: center; margin-bottom: 30px; }

        .topup-quick-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 24px; }
        .topup-option {
            background: var(--category-row-bg); border: 2px solid transparent; border-radius: 12px; padding: 14px 8px;
            cursor: pointer; font-weight: 700; font-size: 0.9rem; display: flex; flex-direction: column; align-items: center; gap: 4px;
            color: var(--text-main); min-width: 0; box-sizing: border-box;
        }
        .topup-option span { font-weight: 500; font-size: 0.78rem; color: var(--text-muted); }
        .topup-option.active { border-color: #3498db; background: var(--bg-smiley-neu); }
        .topup-option:hover { border-color: var(--border-color); }

        .employer-layout { display: grid; grid-template-columns: 260px 1fr; min-height: calc(100vh - 71px); align-items: start; position: relative; transition: grid-template-columns 0.25s ease; }
        @media (max-width: 800px) {
            .employer-layout { grid-template-columns: 1fr; min-height: 0; }
        }

        /* Tlačidlo na zbalenie/rozbalenie bočného panela (len desktop - na
           mobile toto rieši sidebar-hamburger). Rovnaký dizajnový jazyk ako
           .detail-toggle-icon (rotujúci chevron) - len otočený o 90° pre
           vodorovné zbaľovanie namiesto zvislého rozbaľovania. */
        .sidebar-collapse-btn {
            position: fixed; top: 50%; left: 274px; transform: translateY(-50%); z-index: 20;
            width: 28px; height: 28px; border-radius: 50%;
            background: var(--bg-card); border: 1px solid var(--border-color);
            display: flex; align-items: center; justify-content: center; cursor: pointer;
            box-shadow: 0 2px 6px var(--shadow); transition: left 0.25s ease;
        }
        .sidebar-collapse-btn:hover { background-color: var(--border-color); }
        .sidebar-collapse-btn svg {
            width: 14px; height: 14px; stroke: var(--text-muted); fill: none; stroke-width: 2;
            stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); transition: transform 0.25s;
        }
        .employer-layout.sidebar-collapsed { grid-template-columns: 0px 1fr; }
        .employer-layout.sidebar-collapsed .sidebar-collapse-btn { left: 14px; }
        .employer-layout.sidebar-collapsed .sidebar-collapse-btn svg { transform: rotate(-90deg); }
        .employer-layout.sidebar-collapsed .sidebar { padding-left: 0; padding-right: 0; overflow: hidden; border-right: none; }
        .employer-layout.sidebar-collapsed .sidebar-menu { opacity: 0; pointer-events: none; }
        /* Desktop: počas zbaľovania/rozbaľovania má menu stále rovnakú šírku
           (260 px panel - 2 x 20 px odsadenie), panel ho len oreže. Bez toho sa
           texty a ikony počas animácie zalamovali a stláčali a vyzeralo to ako
           nenačítané CSS. */
        @media (min-width: 801px) {
            .employer-layout > .sidebar { overflow-x: hidden; min-width: 0; transition: padding 0.25s ease, border-color 0.25s ease; }
            .employer-layout > .sidebar .sidebar-menu { width: 220px; transition: opacity 0.2s ease; }
            .employer-layout.sidebar-no-anim, .employer-layout.sidebar-no-anim > .sidebar,
            .employer-layout.sidebar-no-anim .sidebar-menu, .employer-layout.sidebar-no-anim .sidebar-collapse-btn,
            .employer-layout.sidebar-no-anim .sidebar-collapse-btn svg { transition: none !important; }
        }
        @media (max-width: 800px) {
            .sidebar-collapse-btn { display: none; }
            .employer-layout.sidebar-collapsed { grid-template-columns: 1fr; }
            .employer-layout.sidebar-collapsed .sidebar-menu { opacity: 1; pointer-events: auto; }
        }

        /* Hamburger tlačidlo pre zobrazenie/skrytie bočného menu na mobile */
        .sidebar-hamburger {
            display: none; align-items: center; gap: 10px;
            flex: 1; padding: 14px 16px; background: var(--bg-card);
            border: none;
            font-weight: 700; font-size: 0.95rem; color: var(--text-main); cursor: pointer;
            text-align: left;
        }
        .sidebar-hamburger svg { width: 20px; height: 20px; stroke: var(--text-main); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
        .sidebar-hamburger .active-section-label { color: var(--text-muted); font-weight: 600; }

        /* Tlačidlo "Späť" (skutočný krok späť v histórii, nie presmerovanie) -
           na desktope pod logom, na mobile v rovnakom riadku ako hamburger. */
        .back-button {
            display: none; align-items: center; gap: 6px;
            background: none; border: none; cursor: pointer;
            color: var(--text-muted); font-weight: 600; font-size: 0.85rem; padding: 4px 0;
        }
        .back-button:hover { color: var(--text-main); }
        .back-button svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }


        .mobile-toolbar-row { display: none; }
        @media (max-width: 800px) {
            .mobile-toolbar-row {
                display: flex; align-items: stretch; background: var(--bg-card);
                border-bottom: 1px solid var(--border-color);
            }
            .mobile-toolbar-row .back-button { flex-shrink: 0; padding: 14px 16px; }
        }

        .sidebar {
            background: var(--bg-card); border-right: 1px solid var(--border-color); padding: 30px 20px;
            position: sticky; top: 0; align-self: stretch;
        }
        /* Sidebar sa na mobile skrýva/zobrazuje plynulou výškovou animáciou namiesto
           zaberania polovice obrazovky natrvalo - vďaka tomu je možné scrollovať
           celú stránku hneď ako si používateľ zvolí položku menu. Tieto pravidlá musia
           byť definované AŽ PO základnej .sidebar definícii vyššie, inak by ju prepísala. */
        @media (max-width: 800px) {
            .sidebar-hamburger { display: flex; }
            .sidebar {
                max-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; overflow: hidden;
                transition: max-height 0.45s ease, padding 0.45s ease;
                position: static;
                border-right: none; border-bottom: 1px solid var(--border-color);
            }
            .sidebar.open {
                max-height: 600px !important; padding-top: 16px !important; padding-bottom: 16px !important;
                overflow-y: auto;
            }
        }
        .sidebar-menu { list-style: none; }
        .sidebar-item { padding: 12px 16px; border-radius: 10px; margin-bottom: 8px; font-weight: 600; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; gap: 8px; }
        /* Prvá, neklikateľná položka menu - meno a počet kreditov. Odlíšená
           od bežných položiek (bez hover efektu, jemné pozadie, oddeľovač pod ňou). */
        .sidebar-user-info {
            justify-content: space-between; background: var(--category-row-bg);
            margin-bottom: 14px; border-radius: 10px;
        }
        .sidebar-user-name { color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .sidebar-user-credits { font-weight: 700; font-size: 0.85rem; flex-shrink: 0; }
        .sidebar-item:hover { background: #ebf8ff; color: #2b6cb0; }
        .sidebar-item.active { background: #ebf8ff; color: #2b6cb0; }
        [data-theme="dark"] .sidebar-item:hover { background: #1e3a8a; color: #93c5fd; }
        /* Informačná položka mena/kreditov nesmie reagovať na hover ako
           bežné klikateľné položky - musí byť AŽ ZA .sidebar-item:hover
           pravidlami vyššie, inak by ich prebili (rovnaká špecifickosť). */
        .sidebar-user-info:hover,
        [data-theme="dark"] .sidebar-user-info:hover { background: var(--category-row-bg); color: inherit; }
        [data-theme="dark"] .sidebar-item.active { background: #1e3a8a; color: #93c5fd; }

        /* Drag & drop zoradenie menu */
        .sidebar-item[draggable="true"] { cursor: grab; }
        .sidebar-item[draggable="true"]:active { cursor: grabbing; }
        .sidebar-item.sidebar-dragging {
            opacity: 0.4; background: var(--category-row-bg);
        }
        .sidebar-item.sidebar-drag-over {
            box-shadow: 0 -2px 0 #3498db;
            background: var(--bg-smiley-neu);
        }
        
        .dashboard-content { padding: 40px; max-width: 1200px; width: 100%; margin: 0 auto; }
        .dashboard-section { display: none; }
        .dashboard-section.active-section { display: block; }

        /* Upozornenia sa zobrazujú ako samostatná sekcia v hlavnom obsahu (počítadlo je v menu) */

        /* Vtipy v sidebari */
        /* Vtipy sa zobrazujú v hlavnom obsahu (rovnaký štýl ako .reviews-list), sidebar slúži len ako filter */

        /* Filter bar nad recenziami */
        .dashboard-filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
        .dashboard-filter-bar .input-field { flex: 1 1 220px; }
        .dashboard-filter-bar select { padding: 10px 12px; }

        /* Export tlačidlá */
        .export-buttons { display: flex; gap: 12px; flex-wrap: wrap; }

        /* Analytika */
        .analytics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 20px; }
        .analytics-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; padding: 22px; box-shadow: 0 4px 20px var(--shadow); }
        .analytics-card h3 { font-size: 0.95rem; margin-bottom: 16px; }

        .satisfaction-chart { overflow-x: auto; overflow-y: hidden; padding-bottom: 8px; }
        .chart-bars { display: flex; align-items: flex-end; gap: 8px; height: 140px; }
        .chart-bar-col { flex: 0 0 32px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
        .chart-bar { width: 100%; background: linear-gradient(180deg, #3498db, #2980b9); border-radius: 6px 6px 0 0; min-height: 4px; }
        .chart-bar-label { font-size: 0.68rem; color: var(--text-muted); margin-top: 6px; white-space: nowrap; }

        .position-row, .benchmark-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 0.85rem; }
        .position-row-label, .benchmark-label { flex: 0 0 110px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .position-row-bar-track { flex: 1; background: var(--category-row-bg); border-radius: 20px; height: 10px; overflow: hidden; }
        .position-row-bar { height: 100%; background: #2ecc71; border-radius: 20px; }
        .position-row-count, .benchmark-value { flex: 0 0 30px; text-align: right; font-weight: 700; }

        .reply-rate-value { font-size: 2.4rem; font-weight: 800; color: #3498db; }

        /* Tím */
        .team-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; padding: 24px; box-shadow: 0 4px 20px var(--shadow); }
        .team-members-list { margin-bottom: 20px; }
        .team-member-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-color); font-size: 0.9rem; }
        .team-member-role { margin-left: auto; font-size: 0.78rem; color: var(--text-muted); background: var(--category-row-bg); padding: 4px 10px; border-radius: 20px; }
        .team-invite-row { display: flex; flex-wrap: wrap; gap: 10px; }
        .team-invite-row .input-field { flex: 1 1 200px; }
        .team-invite-row select { padding: 10px 12px; }

        /* Pravidelné platby firiem sú riešené externe cez Gumroad (mimo klientskej zóny) */

        /* Tlač reportu - skryje všetko okrem hlavného obsahu */
        @media print {
            .navbar, .sidebar, .btn, .dashboard-filter-bar, footer, .modal-overlay { display: none !important; }
            .employer-layout { display: block; }
            .dashboard-content { padding: 0; max-width: 100%; }
        }
        .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 40px; }
        @media (max-width: 600px) { .stats-grid { grid-template-columns: 1fr; } }
        .stats-grid-4 { grid-template-columns: repeat(4, 1fr); }
        .stats-grid-3 { grid-template-columns: repeat(3, 1fr); }
        .stats-grid-2 { grid-template-columns: repeat(2, 1fr); }
        @media (max-width: 700px) {
            .stats-grid-4 { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 600px) {
            .stats-grid-4, .stats-grid-3, .stats-grid-2 { grid-template-columns: 1fr; }
        }
        .stat-card { background: var(--bg-card); padding: 25px; border-radius: 16px; border: 1px solid var(--border-color); transition: transform 0.3s, box-shadow 0.3s; box-shadow: 0 4px 20px var(--shadow); }
        .stat-card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px var(--shadow-hover); }
        .stat-label { font-size: 0.85rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; margin-bottom: 5px; }
        .stat-value { font-size: 1.8rem; font-weight: 700; display: flex; align-items: center; gap: 10px; }

        /* Pohovory firmy v detaile recenzie */
        .detail-company-interview-item {
            background: var(--category-row-bg); border-radius: 10px;
            padding: 12px 14px; margin-bottom: 10px;
        }
        .detail-company-interview-item:last-child { margin-bottom: 0; }
        .detail-company-interview-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }

        /* ─── Zdieľanie recenzií ─── */
        .share-btn {
            display: inline-flex; align-items: center; justify-content: center;
            background: transparent; border: none; cursor: pointer;
            padding: 2px 4px; color: var(--text-muted); transition: color 0.15s;
        }
        .share-btn:hover { color: #3498db; }
        .share-btn svg { width: 15px; height: 15px; }

        .share-dropdown {
            background: var(--bg-card); border: 1px solid var(--border-color);
            border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.15);
            min-width: 200px; overflow: hidden; z-index: 9999;
        }
        .share-option {
            display: flex; align-items: center; gap: 10px;
            padding: 11px 16px; font-size: 0.88rem; font-weight: 500;
            color: var(--text-main); text-decoration: none;
            background: transparent; border: none; width: 100%; cursor: pointer;
            transition: background 0.1s;
        }
        .share-option:hover { background: var(--category-row-bg); }
        .share-option svg { width: 18px; height: 18px; flex-shrink: 0; }

        /* Priebeh pohovoru – blur efekt v kartičkách */
        .interview-blur-wrap {
            position: relative;
            width: 100%;
            box-sizing: border-box;
            font-size: 0.95rem; /* rovnaký základ ako .review-text - inak calc(1.6em*5) nižšie počíta z iného základu a výška sa mierne líši */
            height: calc(1.6em * 5); /* presne rovnaká výška ako .review-text inde */
            overflow: hidden;
            margin-bottom: 16px; /* zhoduje sa s .review-text margin-bottom */
        }
        .interview-blur-wrap .review-text {
            height: auto;
            -webkit-line-clamp: unset;
            overflow: visible;
            margin-bottom: 0;
        }
        /* Rozšírený/Plný pohľad v zozname (employee.html) - text pohovoru tu má
           zobrazovať CELÝ obsah (rovnako ako bežný text recenzie vedľa neho),
           nie orezaný na 5 riadkov ako v malej kartičke. */
        .expanded-interview-text .review-text {
            height: auto;
            -webkit-line-clamp: unset;
            overflow: visible;
        }


/* Mobilné odsadenie pre .dashboard-content - CIELENÁ trieda, nie plošné
   pravidlo na .dashboard-content samotnú. Tá je zdieľaná aj stránkami,
   ktoré majú zámerne inline padding:0 (employee.html, login.html,
   register.html, satisfaction-map.html, rankings.html, company-profile.html)
   - !important na plošnom pravidle by prepísalo aj ich zámerné nastavenie.
   Táto trieda sa pridáva len na stránky, ktoré desktopové odsadenie 40px
   naozaj potrebujú zmenšiť (my-profile.html, admin.html, employer-dashboard.html). */
@media (max-width: 800px) {
    .dashboard-content-mobile-pad { padding: 20px 16px; }
}

/* Firmy - kompaktnejšia mobilná karta (rovnaký vzor ako pri Používateľoch).
   Bez @media obalu (predtým chýbal) by sa tento kompaktný grid layout
   aplikoval aj na desktop, kde by rozbil normálne zobrazenie tabuľky. */
@media (max-width: 700px) {
    .admin-table-companies tr {
        display: grid; grid-template-columns: auto 1fr auto;
        column-gap: 10px; row-gap: 2px; align-items: center; padding: 10px 14px;
    }
    .admin-table-companies td { display: block; border: none !important; padding: 0 !important; text-align: left; }
    .admin-table-companies td::before { content: none !important; }
    .admin-table-companies td:nth-child(1) { grid-row: 1 / 3; grid-column: 1; }
    .admin-table-companies td:nth-child(2) { grid-row: 1; grid-column: 2; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .admin-table-companies td:nth-child(3) { grid-row: 2; grid-column: 2; font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .admin-table-companies td:nth-child(4) { grid-row: 1; grid-column: 3; text-align: right; }
    .admin-table-companies td:nth-child(5) { grid-row: 2; grid-column: 3; text-align: right; }
}

/* Skrytie šípok na number input (pridávanie/uberanie po jednotkách) -
   používateľ zadáva číslo priamo, šípky sú tu zbytočné a rušivé. */
.no-spinner::-webkit-outer-spin-button,
.no-spinner::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.no-spinner[type="number"] {
    -moz-appearance: textfield;
}

/* Cookie súhlas - spodný banner */
.cookie-consent-banner {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 500;
    background: var(--bg-card); border-top: 1px solid var(--border-color);
    box-shadow: 0 -4px 20px var(--shadow);
    animation: collapsiblePanelFadeIn 0.3s ease;
}
.cookie-consent-content {
    max-width: 1000px; margin: 0 auto; padding: 16px 20px;
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.cookie-consent-content p { flex: 1; min-width: 260px; font-size: 0.85rem; color: var(--text-muted); margin: 0; line-height: 1.5; }
.cookie-consent-buttons { display: flex; gap: 10px; flex-shrink: 0; }
@media (max-width: 600px) {
    .cookie-consent-content { padding: 14px 16px; }
    .cookie-consent-buttons { width: 100%; }
    .cookie-consent-buttons .btn { flex: 1; }
}

        /* ─── Rebríčky firiem (rankings.html) ─────────────────────────────── */
        .company-rank-card { margin-bottom: 20px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; padding: 28px; box-shadow: 0 4px 20px var(--shadow); }
        .rank-card-link { text-decoration: none; color: var(--text-main); }
        .rank-card-name { margin-bottom: 16px; }
        .rank-stats { margin-bottom: 0; }
        .rank-financials { margin-top: 16px; }
        .rank-financials-title { margin-bottom: 10px; }
        .rank-yoy { font-size: 0.8rem; font-weight: 600; }
        .company-rank-card .lbl-short { display: none; }
        .rank-fin-line { display: none; }

        /* Smartfón: kompaktná karta - poradie firiem musí byť čitateľné na
           prvý pohľad (na obrazovke sú naraz aspoň 3 firmy), štatistiky
           v jednom riadku so skrátenými popismi namiesto 6 veľkých
           kartičiek pod sebou. */
        @media (max-width: 600px) {
            #rankings-title { margin-bottom: 14px !important; font-size: 1.35rem; }
            #rankings-title svg { width: 34px !important; height: 34px !important; }
            .company-rank-card { padding: 12px 12px 10px; margin-bottom: 10px; border-radius: 12px; box-shadow: 0 2px 10px var(--shadow); }
            /* Skracuje sa len názov - štítok "Na inšpiráciu" ostáva vždy viditeľný */
            .rank-card-name { font-size: 1.02rem; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
            .rank-name-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
            .rank-card-name .sample-badge { flex-shrink: 0; margin-left: 0; font-size: 0.6rem; padding: 2px 7px; }
            .company-rank-card .lbl-long { display: none; }
            .company-rank-card .lbl-short { display: inline; }
            .company-rank-card .stats-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
            .company-rank-card .stats-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .company-rank-card .stats-grid { gap: 6px; }
            .company-rank-card .stat-card { padding: 7px 4px; border-radius: 9px; box-shadow: none; text-align: center; min-width: 0; }
            .company-rank-card .stat-card:hover { transform: none; box-shadow: none; }
            .company-rank-card .stat-label { font-size: 0.6rem; margin-bottom: 2px; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
            .company-rank-card .stat-value { font-size: 0.9rem; justify-content: center; gap: 4px; white-space: nowrap; }
            .company-rank-card .stat-label { text-transform: none; font-size: 0.66rem; }
            /* Finančné údaje: namiesto dvoch ďalších boxov len jeden tenký riadok */
            .rank-financials { margin-top: 7px; }
            .rank-financials-title, .rank-financials .stats-grid { display: none; }
            .rank-fin-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; font-size: 0.74rem; color: var(--text-muted); padding: 0 2px; }
            .rank-fin-line strong { color: var(--text-main); }
            .rank-fin-line .rank-yoy { font-size: 0.7rem; }
        }
        @media (max-width: 360px) {
            .company-rank-card .stats-grid { gap: 4px; }
            .company-rank-card .stat-card { padding: 6px 2px; }
            .company-rank-card .stat-label { font-size: 0.6rem; }
            .company-rank-card .stat-value { font-size: 0.84rem; }
        }

        /* ─── Box s ikonou a nadpisom ─────────────────────────────────────
           Ikona a nadpis sú v jednom riadku, text pod nimi ide na CELÚ šírku
           boxu (nie odsadený o šírku ikony). Obsah zostáva v pôvodnom <div>,
           ktorý sa vďaka display:contents "rozpustí" do mriežky:
             [ikona][nadpis]
             [text na celú šírku ...............] */
        .icon-block { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; }
        .icon-block > svg { grid-column: 1; grid-row: 1; width: 22px !important; height: 22px !important; margin-top: 0 !important; }
        .icon-block > div { display: contents; }
        .icon-block > div > :first-child { grid-column: 2; grid-row: 1; margin: 0; }
        .icon-block > div > :not(:first-child) { grid-column: 1 / -1; }
        /* Rovnaký princíp pre boxy upozornení (admin, Zakúpené balíčky) */
        .admin-alert-left { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; }
        .admin-alert-left > .admin-alert-icon { grid-column: 1; grid-row: 1; margin-top: 0; }
        .admin-alert-left > .admin-alert-body { display: contents; }
        .admin-alert-left > .admin-alert-body > .admin-alert-title { grid-column: 2; grid-row: 1; margin-bottom: 0; }
        .admin-alert-left > .admin-alert-body > :not(.admin-alert-title) { grid-column: 1 / -1; margin-top: 4px; }
        /* Súvislý text bez nadpisu: ikona na začiatku, ďalšie riadky pod ňou */
        .icon-inline-text > svg { float: left; margin: 1px 8px 0 0; }

        /* ─── Vyhľadávanie na employee.html (výsledky zo servera) ─────────── */
        .search-results-count { font-size: 0.82rem; color: var(--text-muted); margin-top: 4px; }
        #search-results-list { transition: opacity 0.15s ease; }
        /* Počas načítavania ďalšej strany/filtra ostanú staré výsledky, len stlmené */
        #search-results-list.search-results-loading { opacity: 0.45; pointer-events: none; }

        /* ================================================================
           ZDIEĽANIE (share sheet) a NAHLÁSENIE RECENZIE - common.js
           ================================================================ */
        .share-sheet-dialog, .report-dialog { max-width: 560px !important; width: calc(100% - 32px); }
        .share-sheet, .report-form { padding: 28px 28px 24px; text-align: left; }
        .share-sheet-title { font-size: 1.25rem; margin: 0 0 4px; }
        .share-sheet-sub { color: var(--text-muted); font-size: 0.9rem; margin: 0 0 18px; overflow-wrap: anywhere; }
        .share-variant-tabs { display: flex; gap: 6px; flex-wrap: wrap; background: var(--category-row-bg); padding: 4px; border-radius: 12px; margin-bottom: 16px; }
        .share-variant-tab { flex: 1 1 auto; border: none; background: transparent; color: var(--text-muted); font: inherit; font-size: 0.85rem; font-weight: 600; padding: 8px 12px; border-radius: 9px; cursor: pointer; }
        .share-variant-tab.active { background: var(--bg-card); color: var(--text-main); box-shadow: 0 1px 4px var(--shadow-hover); }
        .share-preview { border-radius: 12px; overflow: hidden; border: 1px solid var(--border-color); background: #002244; aspect-ratio: 1200 / 630; margin-bottom: 18px; }
        .share-preview img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.2s; }
        .share-preview img.loading { opacity: 0.35; }
        .share-targets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
        .share-target { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-card); color: var(--text-main); font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: background 0.12s, border-color 0.12s; min-width: 0; }
        .share-target span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .share-target:hover { background: var(--category-row-bg); }
        .share-copy-btn.done { background: #2ecc71; }
        .share-link-row { display: flex; gap: 8px; margin-top: 12px; }
        .share-link-row .input-field { flex: 1; min-width: 0; margin: 0; padding: 10px 12px; font-size: 0.85rem; color: var(--text-muted); }
        .share-copy-btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex-shrink: 0; }
        .share-copy-btn svg { width: 15px; height: 15px; }
        .share-target svg { width: 20px; height: 20px; flex-shrink: 0; }
        .share-ig-panel { margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: var(--category-row-bg); font-size: 0.88rem; line-height: 1.55; }
        .share-ig-panel p { margin: 0 0 12px; }
        .share-ig-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
        .share-ig-buttons .btn { display: inline-flex; align-items: center; gap: 6px; }
        .share-ig-buttons svg { width: 15px; height: 15px; }
        .share-sheet-note { color: var(--text-muted); font-size: 0.78rem; margin: 16px 0 0; line-height: 1.5; }
        @media (max-width: 520px) {
            .share-sheet, .report-form { padding: 22px 18px 18px; }
            .share-targets { grid-template-columns: repeat(2, 1fr); }
            .share-variant-tabs { flex-wrap: nowrap; }
            .share-variant-tab { flex: 1 1 0; padding: 8px 4px; font-size: 0.8rem; white-space: nowrap; }
        }

        .report-intro { font-size: 0.86rem; line-height: 1.55; color: var(--text-muted); margin: 0 0 18px; }
        .report-intro a { color: #3498db; }
        .report-form .form-group { margin-bottom: 16px; }
        .report-form .form-group > label { text-align: left; margin-bottom: 6px; font-size: 0.88rem; }
        .report-form textarea.input-field { resize: vertical; min-height: 96px; font-family: inherit; }
        .report-reasons { display: grid; gap: 6px; }
        .report-reason { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border: 1px solid var(--border-color); border-radius: 10px; cursor: pointer; font-weight: 400 !important; text-align: left !important; margin: 0 !important; }
        .report-reason:has(input:checked) { border-color: #3498db; background: rgba(52, 152, 219, 0.06); }
        .report-reason input { margin-top: 3px; flex-shrink: 0; }
        .report-reason strong { display: block; font-size: 0.88rem; }
        .report-reason small { display: block; color: var(--text-muted); font-size: 0.78rem; line-height: 1.4; margin-top: 2px; }
        .report-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
        @media (max-width: 520px) { .report-row { grid-template-columns: 1fr; gap: 0; } }
        .report-check { display: flex; gap: 10px; align-items: flex-start; font-size: 0.84rem; line-height: 1.5; cursor: pointer; }
        .report-check input { margin-top: 4px; flex-shrink: 0; }
        .report-error { color: #e74c3c; font-size: 0.86rem; min-height: 1.2em; margin: 10px 0 4px; }
        .report-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

        /* Detail recenzie - Zdieľať / Nahlásiť */
        .detail-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
        .detail-action-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-card); color: var(--text-main); font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; }
        .detail-action-btn:hover { background: var(--category-row-bg); }
        .detail-action-btn svg { width: 15px; height: 15px; }
        .detail-action-muted { color: var(--text-muted); border-color: transparent; background: transparent; }
        /* Nahlásiť recenziu - rovnaký vizuál ako "Nahlásiť" na profile firmy (.btn-danger) */
        .detail-action-danger { color: #e74c3c; border-color: var(--border-smiley-neg); background: var(--bg-smiley-neg); }
        .detail-action-danger:hover { background: rgba(231, 76, 60, 0.12); }
        .detail-label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 3px; }
        .detail-label-row .detail-label { margin-bottom: 0; }
        .detail-inline-share { display: inline-flex; align-items: center; gap: 5px; border: none; background: transparent; color: #3498db; font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer; padding: 2px 0; white-space: nowrap; }
        .detail-inline-share svg { width: 13px; height: 13px; }
        .detail-inline-share:hover { text-decoration: underline; }

        /* Admin - nahlásené recenzie */
        .admin-report-highlight { border-left: 3px solid #e74c3c; padding-left: 12px; }
        .admin-report-list { display: grid; gap: 10px; margin-top: 14px; }
        .admin-report-item { background: var(--category-row-bg); border-radius: 10px; padding: 12px 14px; }
        .admin-report-head { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 0.9rem; }
        .admin-report-details { margin: 8px 0 6px; font-size: 0.9rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
        .admin-report-meta { font-size: 0.8rem; color: var(--text-muted); overflow-wrap: anywhere; }
        .admin-report-meta a { color: inherit; }
        .admin-report-decision { margin-top: 16px; }
        .admin-report-decision textarea { width: 100%; box-sizing: border-box; font-family: inherit; resize: vertical; }
        .footer-inline-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
        .company-dir-link { color: var(--text-main); font-weight: 600; text-decoration: none; }
        .company-dir-link:hover { color: #3498db; text-decoration: underline; }

        /* Obsah vedľa bočného menu sa nesmie roztiahnuť podľa najširšej tabuľky
           (grid položka má predvolene min-width: auto) - tabuľka sa má posúvať
           vo svojom rámčeku, nie celá stránka. */
        .employer-layout > .dashboard-content { min-width: 0; }

        /* ================================================================
           Detail recenzie - šípky a X vždy MIMO modálu
           Tlačidlá sú priamo v overlay (nie v animovanom .modal-dialog, viď
           ensureReviewDetailModal v common.js) a ich poloha je čisto v CSS:
           overlay má po stranách (desktop) alebo hore/dole (mobil) vyhradený
           pás, do ktorého sa modál nikdy nerozšíri. Žiadne prepočítavanie v JS,
           takže nič neodskakuje.
           ================================================================ */
        @media (min-width: 801px) {
            #review-detail-modal { padding-left: 72px; padding-right: 72px; }
            #review-detail-modal .modal-dialog { max-width: 1500px; }
            #review-detail-modal .detail-nav-btn { top: 50%; bottom: auto; transform: translateY(-50%); }
            #review-detail-modal .detail-nav-prev { left: max(17px, calc((100vw - 1500px) / 2 - 54px)); right: auto; }
            #review-detail-modal .detail-nav-next { right: max(17px, calc((100vw - 1500px) / 2 - 54px)); left: auto; }
            #review-detail-modal .modal-close { position: fixed; top: 30px; right: max(17px, calc((100vw - 1500px) / 2 - 54px)); left: auto; }
        }
        @media (max-width: 800px) {
            #review-detail-modal { padding: 60px 10px 72px; align-items: center; }
            #review-detail-modal .modal-box,
            #review-detail-modal .modal-scroll-content { max-height: calc(100vh - 132px); max-height: calc(100dvh - 132px); }
            #review-detail-modal .modal-scroll-content { padding-bottom: 24px; }
            #review-detail-modal .modal-close { position: fixed; top: 11px; right: 10px; left: auto; }
            #review-detail-modal .detail-nav-btn { top: auto; transform: none; bottom: max(16px, env(safe-area-inset-bottom, 16px)); }
            #review-detail-modal .detail-nav-prev { left: 10px; right: auto; }
            #review-detail-modal .detail-nav-next { right: 10px; left: auto; }
        }
        /* Zdieľanie / nahlásenie na mobile: X v rohu karty (nie position:fixed -
           vnútri animovaného dialógu by pri otvorení odskočilo) */
        @media (max-width: 800px) {
            #share-sheet-modal .modal-close,
            #report-review-modal .modal-close { position: absolute; top: 14px; right: 14px; left: auto; z-index: 3; box-shadow: none; }
            #share-sheet-modal .share-sheet-title,
            #report-review-modal .share-sheet-title { padding-right: 44px; }
        }

        /* Admin - Propagácia (generátor príspevkov) */
        .promo-grid { display: grid; gap: 28px; }
        @media (min-width: 1000px) { .promo-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
        .promo-field { margin-bottom: 16px; }
        .promo-field > label { display: block; font-weight: 600; font-size: 0.88rem; margin-bottom: 6px; }
        .promo-field .input-field { width: 100%; box-sizing: border-box; margin: 0; }
        .promo-field textarea.input-field { resize: vertical; font-family: inherit; }
        .promo-hint { color: var(--text-muted); font-weight: 400; font-size: 0.8rem; }
        .promo-swatches { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
        .promo-swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--bg-card); box-shadow: 0 0 0 1px var(--border-color); cursor: pointer; padding: 0; position: relative; overflow: hidden; }
        .promo-swatch.active { box-shadow: 0 0 0 2px var(--text-main); }
        .promo-swatch-custom { background: conic-gradient(#e74c3c, #f39c12, #2ecc71, #3498db, #8e44ad, #e74c3c); }
        .promo-swatch-custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
        .promo-preview-col { position: sticky; top: 20px; }
        .promo-preview { margin: 14px 0; border-radius: 14px; overflow: hidden; background: #002244; display: flex; justify-content: center; }
        .promo-preview img { display: block; max-width: 100%; max-height: 70vh; transition: opacity 0.15s; }
        .promo-preview img.loading { opacity: 0.4; }
        .promo-actions, .promo-publish-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
        .promo-actions .btn { display: inline-flex; align-items: center; gap: 8px; }
        .promo-publish { margin-top: 18px; padding: 16px; border: 1px solid var(--border-color); border-radius: 14px; }
        .promo-publish-title { font-weight: 700; font-size: 0.9rem; margin-bottom: 10px; }
        .promo-publish p { margin: 10px 0 0; }
        .promo-ig-box { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-color); }
        .promo-ig-box:empty { display: none; }
        .promo-ig-row { display: flex; justify-content: space-between; gap: 12px; font-size: 0.88rem; margin-bottom: 4px; }
        .promo-ig-box .btn { margin-top: 10px; }
        .promo-ig-box .promo-inline .btn { margin-top: 0; white-space: nowrap; }
        .promo-ig-box .promo-inline .input-field { flex: 1; min-width: 0; width: auto; }
        .promo-disabled { opacity: 0.6; }
        #promo-icon-tabs .share-variant-tab, #promo-format-tabs .share-variant-tab { font-size: 0.8rem; }
        .promo-inline { display: flex; gap: 8px; }
        .promo-field .promo-inline .input-field { flex: 1; min-width: 0; width: auto; }
        .promo-inline .btn { flex-shrink: 0; }
        .promo-grid > * { min-width: 0; }
        #promo-section .share-variant-tabs { flex-wrap: wrap; }
        #promo-section .share-variant-tab { flex: 1 1 auto; white-space: nowrap; }
        .promo-publish-buttons .btn { padding: 9px 14px; font-size: 0.88rem; }

        /* Právne dokumenty (podmienky.html, ochrana-udajov.html) */
        .legal-doc { max-width: 820px; }
        .legal-doc h3 { font-size: 1.1rem; margin: 30px 0 12px; }
        .legal-doc h4 { font-size: 0.98rem; margin: 20px 0 8px; }
        .legal-doc p, .legal-doc li { font-size: 0.93rem; line-height: 1.7; }
        .legal-doc p { margin: 0 0 10px; }
        .legal-doc ul { padding-left: 22px; margin: 0 0 12px; }
        .legal-doc li { margin-bottom: 6px; }
        .legal-doc a { color: #3498db; }
        .legal-meta { color: var(--text-muted); font-size: 0.85rem !important; margin-bottom: 20px !important; }
        .legal-notice { margin-bottom: 8px; border-color: #f39c12 !important; }
        .legal-notice p { margin: 6px 0 0; color: var(--text-muted); }
        .legal-consent { font-size: 0.78rem; color: var(--text-muted); text-align: center; line-height: 1.5; margin: 10px 0 12px; }
        .legal-consent a { color: #3498db; }
        @media print {
            .navbar, .sidebar, .sidebar-collapse-btn, .mobile-toolbar-row, footer, .cookie-consent-banner, .legal-meta a { display: none !important; }
            .employer-layout { display: block !important; }
            .dashboard-content { padding: 0 !important; }
            body { background: #fff !important; color: #000 !important; }
            .legal-doc { max-width: none; }
        }

        /* Prihlásenie cez Google - naše tlačidlo + neviditeľná vrstva Google nad ním */
        .google-btn-wrap { position: relative; width: 100%; }
        .google-btn-face { width: 100%; display: flex !important; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box; white-space: nowrap; padding-left: 12px; padding-right: 12px; line-height: 1.2; }
        .google-btn-face .google-g { width: 20px; height: 20px; flex-shrink: 0; }
        .google-btn-overlay { position: absolute; top: 0; left: 0; transform-origin: 0 0; opacity: 0.01; overflow: hidden; }
        .google-btn-wrap.google-ready:hover .google-btn-face { background: var(--category-row-bg); }
        /* Skryté políčko proti botom (honeypot) - človek ho nevidí ani ho nevyplní */
        .hp-field { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

        /* Prepínač počtu záznamov na stránku (10 / 25 / 50) */
        .per-page-control { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; font-size: 0.85rem; color: var(--text-muted); }
        .per-page-control[hidden] { display: none; }
        .per-page-options { display: inline-flex; border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; background: var(--bg-card); }
        .per-page-option { border: 0; background: transparent; color: var(--text-main); font: inherit; font-weight: 600; min-width: 42px; height: 32px; padding: 0 10px; cursor: pointer; transition: background 0.2s, color 0.2s; }
        .per-page-option + .per-page-option { border-left: 1px solid var(--border-color); }
        .per-page-option:hover:not(.active) { background: var(--category-row-bg); }
        .per-page-option.active { background: #3498db; color: #fff; cursor: default; }

        /* ============================================================
           Zamknutá mzda a pohovor - JEDEN spoločný vizuál:
           rozmazaný obsah + v strede rovnaké tlačidlo "Odkryť"
           ============================================================ */
        .lock-area { position: relative; }
        .lock-area.is-locked .lock-content { filter: blur(5px); -webkit-filter: blur(5px); user-select: none; pointer-events: none; }
        .lock-overlay {
            position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
            padding: 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.22);
        }
        [data-theme="dark"] .lock-overlay { background: rgba(15, 23, 42, 0.28); }
        .lock-area:not(.is-locked) > .lock-overlay { display: none !important; }
        .lock-block { display: block; min-height: 5.6em; border-radius: 10px; }
        .lock-block .lock-content { display: block; }
        .unlock-pill {
            display: inline-flex; align-items: center; justify-content: center; gap: 7px; max-width: 100%;
            padding: 8px 16px; border-radius: 20px; border: 1px solid #3498db; background: var(--bg-card);
            color: #3498db; font: inherit; font-size: 0.82rem; font-weight: 700; line-height: 1.3; text-align: center;
            cursor: pointer; box-shadow: 0 4px 14px rgba(52, 152, 219, 0.18); transition: background 0.15s, color 0.15s;
            filter: none; -webkit-filter: none;
        }
        .unlock-pill:hover { background: #3498db; color: #fff; }
        .unlock-pill svg { width: 15px; height: 15px; flex-shrink: 0; }
        .unlock-pill.small { padding: 5px 12px; font-size: 0.76rem; gap: 6px; }
        .unlock-pill.small svg { width: 13px; height: 13px; }
        .detail-interview-locked { margin: 0; }
        /* mzda v zozname: rozmazaná suma + tlačidlo vedľa */
        .salary-inline-lock { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
        .salary-inline-lock .lock-area { display: inline-block; }
        /* Rozšírený pohľad v zozname: blok pohovoru podľa dĺžky, nie 5 riadkov */
        .expanded-interview-text .interview-blur-wrap { height: auto; min-height: calc(1.6em * 3); }

        /* Formulár príspevku - výber typu (pohovor / súčasný / bývalý zamestnanec) */
        .post-type-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
        .post-type-option {
            display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
            padding: 16px 10px; border: 2px solid var(--border-color); border-radius: 12px;
            background: var(--bg-card); color: var(--text-main); font: inherit; cursor: pointer;
            transition: border-color 0.15s, background 0.15s;
        }
        .post-type-option svg { width: 26px; height: 26px; fill: none; stroke: var(--text-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 4px; }
        .post-type-option:hover { border-color: #3498db; }
        .post-type-option.selected { border-color: #3498db; background: var(--bg-smiley-neu); }
        .post-type-option.selected svg { stroke: #3498db; }
        .post-type-title { font-weight: 700; font-size: 0.92rem; }
        .post-type-desc { font-size: 0.78rem; color: var(--text-muted); }
        .post-type-options.field-error-highlight { padding: 6px; }
        @media (max-width: 600px) {
            .post-type-options { grid-template-columns: 1fr; gap: 8px; }
            .post-type-option { display: grid; grid-template-columns: 26px 1fr; column-gap: 12px; row-gap: 0; align-items: center; text-align: left; padding: 12px 14px; }
            .post-type-option svg { grid-row: 1 / span 2; margin-bottom: 0; }
        }

        /* Vlastné výberové menu (enhanceSelect v common.js) - rovnaký dizajn ako návrhy miest */
        .hp-select { position: relative; }
        .hp-select-native { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; pointer-events: none; }
        .hp-select-btn {
            position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px;
            text-align: left; cursor: pointer; font: inherit; font-size: 1rem; line-height: 1.2;
        }
        .hp-select-btn:focus-visible, .hp-select.open .hp-select-btn { border-color: #3498db; }
        .hp-select-btn.hp-select-placeholder .hp-select-text { color: var(--text-muted); }
        .hp-select-btn.hp-select-invalid { border-color: #e74c3c; }
        .hp-select-btn:disabled { opacity: 0.6; cursor: default; }
        .hp-select-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
        .hp-select-chevron { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: var(--text-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s; }
        .hp-select.open .hp-select-chevron { transform: rotate(180deg); }
        .hp-select-list { max-height: 260px; }
        .hp-select-option.selected .location-option-name { color: #3498db; }
        .hp-select-option.active { background: var(--category-row-bg); }
        @media (max-width: 600px) { .hp-select-option { flex-direction: row !important; } }

        /* ============================================================
           Formulár príspevku (write-review.html) - šírka a vzhľad ako
           ostatné stránky portálu: obsah do 1200 px, sekcie ako karty
           ============================================================ */
        .wr-body { padding: 0; display: block; }
        .wr-container { max-width: none; padding: 0; background: none; border: none; box-shadow: none; border-radius: 0; }
        .wr-container #form-intro-text { margin-bottom: 28px; }
        .wr-section {
            background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px;
            padding: 24px 28px 8px; margin-bottom: 20px;
        }
        .wr-section-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
        .wr-section-icon {
            width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
            background: var(--bg-smiley-neu); border: 1px solid var(--border-smiley-neu);
        }
        .wr-section-icon svg { width: 20px; height: 20px; fill: none; stroke: #3498db; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
        .wr-section-head h3 { font-size: 1.05rem; margin: 0 0 2px; }
        .wr-section-head p { font-size: 0.85rem; color: var(--text-muted); margin: 0 !important; }
        .wr-section .post-type-group { margin-bottom: 16px; }
        /* Hodnotenie oblastí - dva stĺpce */
        .wr-section .category-rating-box { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; padding: 0; background: none; border: none; }
        .wr-section .category-rating-box .rating-row { padding: 12px 0; }
        .wr-section .category-rating-box .rating-row:last-child,
        .wr-section .category-rating-box .rating-row:nth-last-child(2):nth-child(odd) { border-bottom: none; }
        /* Vstupný / výstupný proces vedľa seba; ak je výstupný skrytý, vstupný na celú šírku */
        .wr-pair:has(> [style*="display: none"]) { grid-template-columns: 1fr; }
        #overall-feel-label { font-size: 1rem; }
        .wr-container #form-submit-btn { font-size: 1.05rem; border-radius: 12px; }
        @media (max-width: 1000px) {
            .wr-section .category-rating-box { grid-template-columns: 1fr; }
            .wr-pair { grid-template-columns: 1fr; gap: 0; }
            .wr-section .category-rating-box .rating-row:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--border-color); }
        }
        @media (max-width: 600px) {
            .wr-section { padding: 18px 16px 4px; border-radius: 14px; margin-bottom: 14px; }
            .wr-section-head { margin-bottom: 16px; }
            .wr-section-icon { width: 34px; height: 34px; }
        }

        /* Prepínač zoznam / kartičky na portáli - vždy jeden riadok, aby tlačidlo nemenilo výšku */
        .btn-toggle-list { display: grid; align-items: center; border: 2px solid transparent; }
        .btn-toggle-list.btn-secondary { border-color: var(--border-color); }
        .btn-toggle-list > span { grid-area: 1 / 1; }
        .btn-toggle-list .tgl-cards, .btn-toggle-list.is-list .tgl-list { visibility: hidden; }
        .btn-toggle-list.is-list .tgl-cards { visibility: visible; }
        /* Stredné šírky (tablet so sidebarom) - tlačidlá v hlavičke portálu sa inak nezmestia */
        @media (min-width: 551px) and (max-width: 1100px) {
            .hero-main-buttons-row .btn, .hero-search-row #advanced-search-toggle { padding: 12px 10px; font-size: 0.92rem; }
            .hero-search-row #advanced-search-toggle { overflow: hidden; text-overflow: ellipsis; }
        }

        /* ============================================================
           Founder fáza - fialový výrazný prvok (pill na úvode a v klientskej
           zóne, karty v "Ako to funguje")
           ============================================================ */
        /* Founder fáza - rovnaká modrá ako hlavné tlačidlá (.btn-primary), biely text */
        :root, [data-theme="dark"] { --founder-bg: #3498db; --founder-border: #3498db; --founder-accent: #ffffff; --founder-hover: rgba(255, 255, 255, 0.14); }
        .founder-pill {
            width: 100%; box-sizing: border-box; margin-bottom: 20px; text-align: left;
            background: var(--founder-bg); border: 1px solid var(--founder-border); color: #fff;
            border-radius: 14px; overflow: hidden; box-shadow: 0 4px 14px rgba(52, 152, 219, 0.25);
        }
        .founder-pill-toggle {
            width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 16px;
            background: transparent; border: none; color: #fff; font: inherit; font-weight: 700; font-size: 0.95rem;
            cursor: pointer; text-align: left;
        }
        .founder-pill-toggle > span { flex: 1; }
        .founder-pill-toggle:hover { background: var(--founder-hover); }
        .founder-pill-toggle:focus-visible { outline: 2px solid #fff; outline-offset: -3px; border-radius: 14px; }
        .founder-pill-star { width: 18px; height: 18px; flex-shrink: 0; fill: rgba(255, 255, 255, 0.25); stroke: #fff; stroke-width: 2; stroke-linejoin: round; }
        .founder-pill-chevron { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s; }
        .founder-pill.open .founder-pill-chevron { transform: rotate(180deg); }
        .founder-pill-content { padding: 0 16px 14px 44px; }
        .founder-pill-content p { margin: 0; font-size: 0.86rem; line-height: 1.55; color: #fff !important; text-align: left; }
        .founder-pill-content strong { color: #fff; }
        .founder-pill-remaining:not(:empty) { margin-top: 8px !important; font-weight: 700; color: #fff !important; }

        .premium-features-box.founder-box, .founder-box { background: var(--founder-bg); border-color: var(--founder-border) !important; color: #fff; }
        .founder-box strong, .founder-box h3 { color: #fff; }
        .founder-box p { color: rgba(255, 255, 255, 0.92) !important; }
        .founder-box .btn-icon { stroke: #fff !important; }
        .founder-box a { color: #fff; text-decoration: underline; }
        .founder-box a.btn, .founder-box a.btn-white { color: var(--text-main); text-decoration: none; }
        .admin-alert-item.founder-alert { background: var(--founder-bg) !important; border-color: var(--founder-border) !important; }
        .founder-alert .admin-alert-title, .founder-alert .admin-alert-detail, .founder-alert .admin-alert-detail strong { color: #fff !important; }
        .founder-alert .admin-alert-icon { stroke: #fff !important; }

        /* Moje balíčky - ako bol balíček získaný */
        .pkg-source { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; margin-bottom: 18px; border-radius: 10px;
            background: var(--category-row-bg); border: 1px solid var(--border-color); font-size: 0.86rem; line-height: 1.5; color: var(--text-main); }
        .pkg-source svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; fill: none; stroke: var(--text-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
        .pkg-source-founder { background: var(--founder-bg); border-color: var(--founder-border); color: #fff; }
        .pkg-source-founder svg { stroke: #fff; fill: rgba(255, 255, 255, 0.25); }
        @media (max-width: 600px) {
            .founder-pill-toggle { font-size: 0.86rem; padding: 11px 12px; gap: 8px; }
            .founder-pill-content { padding: 0 14px 12px; }
        }

        /* Štatistické karty: hodnota vždy na jeden riadok (karty nemenia výšku) */
        .stat-value-nowrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .stat-value-empty { color: var(--text-muted) !important; cursor: help; }
        /* Rebríčky: 4 štatistiky vždy v jednom rade, popisy aj hodnoty na jeden
           riadok (karty rovnako vysoké), na užších obrazovkách skrátené popisy */
        .company-rank-card .stats-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
        .company-rank-card .stat-card { min-width: 0; }
        .company-rank-card .stat-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        @media (min-width: 601px) and (max-width: 1100px) {
            .company-rank-card .lbl-long { display: none; }
            .company-rank-card .lbl-short { display: inline; }
            .company-rank-card .stats-grid { gap: 12px; }
            .company-rank-card .stat-card { padding: 16px 14px; }
            .company-rank-card .stat-value { font-size: 1.5rem; }
        }

        /* Pätička: odkazy (Firmy A–Z, Podmienky, Ochrana údajov) ako pill tlačidlá pod bannerom */
        .footer-pills { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
        .footer-pill {
            display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 20px;
            background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2);
            color: #f0f0f0; text-decoration: none; font-size: 0.8rem; font-weight: 600; white-space: nowrap;
            transition: background 0.2s, border-color 0.2s;
        }
        .footer-pill:hover, .footer-pill:focus-visible { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.4); }
        @media (max-width: 600px) {
            .footer-pills { gap: 6px; margin-top: 14px; }
            .footer-pill { padding: 5px 10px; font-size: 0.74rem; }
        }

        /* Biele tlačidlá s čiernym textom (Rebríčky, Rozšírené hľadanie, rebríčkové skratky) */
        .btn-white { background-color: var(--bg-card); color: var(--text-main); border: 2px solid var(--border-color); box-shadow: 0 2px 8px var(--shadow); transition: border-color 0.15s, background-color 0.15s, transform 0.15s; }
        /* Biele tlačidlá: pri kurzore výrazne tmavšie (nielen jemný odtieň) */
        :root { --btn-white-hover-bg: #dfe3e8; --btn-white-hover-border: #b9c0c9; }
        [data-theme="dark"] { --btn-white-hover-bg: #0b1120; --btn-white-hover-border: #475569; }
        .btn-white:hover, .founder-box a.btn-white:hover { background-color: var(--btn-white-hover-bg); border-color: var(--btn-white-hover-border); color: var(--text-main); }
        .btn-white:active { transform: translateY(1px); }
        .btn-white .detail-toggle-icon { stroke: var(--text-main); }
        .hero-ranking-buttons .rank-btn { display: flex; align-items: center; justify-content: center; }
        .rank-btn-map { color: #3498db; }
        .rank-btn-best:hover { border-color: #2ecc71; background-color: var(--bg-smiley-pos); }
        .rank-btn-map:hover { border-color: #3498db; background-color: var(--bg-smiley-neu); }
        .rank-btn-worst:hover { border-color: #e74c3c; background-color: var(--bg-smiley-neg); }
        .hero-ranking-buttons .rank-btn:hover svg { transform: scale(1.1); }
        .hero-ranking-buttons .rank-btn svg { transition: transform 0.15s; }

        /* Rozšírené hľadanie - obsah panelu nie je roztiahnutý po okraje (panel áno) */
        .advanced-filters-panel { padding: 22px 24px; }
        .advanced-filters-panel .filter-overall-header,
        .advanced-filters-panel .af-two-col,
        .advanced-filters-panel .af-actions { max-width: 940px; margin-left: auto; margin-right: auto; }
        .advanced-filters-panel .af-two-col { gap: 20px; align-items: start; }
        .advanced-filters-panel .af-col-header { justify-content: flex-start; height: auto; margin-bottom: 8px; }
        .advanced-filters-panel .af-row { height: auto; min-height: 44px; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; }
        .advanced-filters-panel .af-row + .af-row { border-top: 1px solid var(--border-color); }
        .advanced-filters-panel .af-row-rating { grid-template-columns: minmax(0, 1fr) auto; }
        .advanced-filters-panel .af-row .hp-select-btn { padding: 7px 10px; font-size: 0.85rem; border-radius: 8px; background: var(--bg-card); }
        .advanced-filters-panel .af-row .hp-select-list { z-index: 250; }
        .advanced-filters-panel .af-row .hp-select-list .location-option-name { font-size: 0.85rem; font-weight: 500; }
        .advanced-filters-panel .af-actions { display: flex; justify-content: center; margin-top: 16px; }
        .advanced-filters-panel .af-reset-btn { padding: 9px 22px; font-size: 0.88rem; border-radius: 10px; display: inline-flex; align-items: center; gap: 4px; }
        @media (max-width: 800px) {
            .advanced-filters-panel .af-two-col { grid-template-columns: 1fr; gap: 12px; }
        }
        @media (max-width: 600px) {
            .advanced-filters-panel { padding: 14px 12px; }
            .advanced-filters-panel .af-row { grid-template-columns: 105px minmax(0, 1fr); padding: 4px 0; }
        }
        .hero-ranking-buttons .rank-btn { min-height: 46px; }
        @media (max-width: 600px) {
            .hero-ranking-buttons { flex-direction: row !important; }
            .hero-ranking-buttons .rank-btn { min-height: 42px; padding: 8px 10px; }
            .advanced-filters-panel .af-row label { white-space: normal; line-height: 1.2; }
        }

/* Statické texty o Founder fáze - skryté, keď je fáza v admin Nástrojoch vypnutá */
[data-founder-phase][hidden] { display: none !important; }

/* Admin -> Vývoj portálu: stĺpcový graf balíkov podľa dní a prehľad zmien */
.dev-chart { position: relative; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 36px 16px 12px; overflow-x: auto; }
.dev-chart-bars { display: flex; align-items: flex-end; gap: 2px; min-width: 560px; height: 170px; border-bottom: 1px solid var(--border-color); }
.dev-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; cursor: default; outline: none; position: relative; }
.dev-bar { width: 100%; max-width: 22px; background: #3498db; border-radius: 4px 4px 0 0; transition: background-color 0.15s; }
.dev-bar-col:hover .dev-bar, .dev-bar-col:focus .dev-bar { background: #1f6fa8; }
.dev-bar-label { position: absolute; bottom: -22px; font-size: 0.62rem; color: var(--text-muted); white-space: nowrap; }
.dev-chart-bars { margin-bottom: 26px; }
.dev-tip { position: absolute; top: 8px; background: var(--text-main); color: var(--bg-card); font-size: 0.8rem; padding: 5px 10px; border-radius: 8px; white-space: nowrap; pointer-events: none; }
.dev-log-day { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 14px 18px; margin-bottom: 10px; }
.dev-log-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; margin-bottom: 6px; }
.dev-log-head span { font-size: 0.82rem; color: var(--text-muted); }
.dev-log-day ul { margin: 0 0 6px 18px; padding: 0; line-height: 1.6; font-size: 0.92rem; }
.dev-log-day details { font-size: 0.8rem; color: var(--text-muted); }
.dev-log-day details summary { cursor: pointer; }
.dev-log-day details p { margin: 6px 0 0; word-break: break-word; }
@media (max-width: 700px) { .dev-bar-label { display: none; } .dev-chart-bars { margin-bottom: 6px; } }

/* Odkrytie stránky po načítaní štýlov (pozri <style> s hp-reveal v <head> stránok) */
html body { visibility: visible; animation: none; }