/* Details chevron rotation */
        details summary .lucide-chevron-down,details summary .lucide-chevron-right{transition:transform .2s ease;}
        details[open]>summary .lucide-chevron-down{transform:rotate(180deg);}
        details[open]>summary .lucide-chevron-right{transform:rotate(90deg);}
        details summary [data-lucide="chevron-down"],details summary [data-lucide="chevron-right"]{transition:transform .2s ease;}
        details[open]>summary [data-lucide="chevron-down"]{transform:rotate(180deg);}
        details[open]>summary [data-lucide="chevron-right"]{transform:rotate(90deg);}
        details summary{list-style:none;}
        details summary::-webkit-details-marker{display:none;}
        /* Custom tooltips */
        .tip-box{position:fixed;z-index:99999;background:#1e293b;color:#fff;font-size:12px;line-height:1.4;padding:5px 10px;border-radius:5px;max-width:320px;word-break:break-word;pointer-events:none;opacity:0;transition:opacity .05s;white-space:pre-line;}
        .tip-box.show{opacity:1;}
        .tip-box::before{content:'';position:absolute;top:-5px;left:16px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #1e293b;}
        .gran-pills{background:#f1f5f9;}
        [data-theme="dark"] .gran-pills{background:#0f172a;}
        @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .gran-pills{background:#0f172a;} }
        [data-theme="dark"] .tip-box{background:#334155;color:#e2e8f0;}
        [data-theme="dark"] .tip-box::before{border-bottom-color:#334155;}
        * { margin: 0; padding: 0; box-sizing: border-box; }
        html, body { overflow-x: hidden; }
        .lucide { width: 16px; height: 16px; vertical-align: middle; }
        h1 .lucide { width: 22px; height: 22px; }
        :root {
            --primary: #0ea5e9;
            --primary-dark: #0284c7;
            --accent: #f97316;
            --accent-dark: #ea580c;
            --bg: #f8fafc;
            --bg-card: #ffffff;
            --text: #1e293b;
            --text-muted: #64748b;
            --border: #e2e8f0;
            --success: #22c55e;
            --danger: #ef4444;
            --code-bg: #1e293b;
            --code-text: #e2e8f0;
            --tracking-agent-bg-enabled: #f0fdf4;
            --tracking-agent-bg-disabled: #fff7ed;
            --tracking-cloud-bg-enabled: #f0fdf4;
            --tracking-cloud-bg-disabled: #f0f9ff;
        }
        [data-theme="dark"] {
            --primary: #38bdf8;
            --primary-dark: #0ea5e9;
            --accent: #fb923c;
            --accent-dark: #f97316;
            --bg: #0f172a;
            --bg-card: #1e293b;
            --text: #e2e8f0;
            --text-muted: #94a3b8;
            --border: #334155;
            --success: #4ade80;
            --danger: #f87171;
            --code-bg: #0f172a;
            --code-text: #e2e8f0;
            --tracking-agent-bg-enabled: rgba(74, 222, 128, 0.12);
            --tracking-agent-bg-disabled: rgba(251, 146, 60, 0.10);
            --tracking-cloud-bg-enabled: rgba(74, 222, 128, 0.12);
            --tracking-cloud-bg-disabled: rgba(56, 189, 248, 0.10);
        }
        @media (prefers-color-scheme: dark) {
            :root:not([data-theme="light"]) {
                --primary: #38bdf8;
                --primary-dark: #0ea5e9;
                --accent: #fb923c;
                --accent-dark: #f97316;
                --bg: #0f172a;
                --bg-card: #1e293b;
                --text: #e2e8f0;
                --text-muted: #94a3b8;
                --border: #334155;
                --success: #4ade80;
                --danger: #f87171;
                --code-bg: #0f172a;
                --code-text: #e2e8f0;
                --tracking-agent-bg-enabled: rgba(74, 222, 128, 0.12);
                --tracking-agent-bg-disabled: rgba(251, 146, 60, 0.10);
                --tracking-cloud-bg-enabled: rgba(74, 222, 128, 0.12);
                --tracking-cloud-bg-disabled: rgba(56, 189, 248, 0.10);
            }
        }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; min-height: 100vh; }

        /* Login */
        .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); }
        .login-box { background: var(--bg-card); padding: 30px 25px; border-radius: 16px; width: 100%; max-width: 380px; box-shadow: 0 20px 40px rgba(0,0,0,0.15); }
        .login-box h1 { text-align: center; color: var(--primary); margin-bottom: 5px; font-size: 24px; }
        .login-box .subtitle { text-align: center; color: var(--text-muted); margin-bottom: 25px; font-size: 14px; }
        .oauth-accept-note a { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
        .oauth-accept-note a:hover { color: var(--primary); }
        .form-group { margin-bottom: 15px; }
        .form-group label { display: block; margin-bottom: 5px; font-weight: 500; font-size: 14px; }
        .form-group input { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; font-size: 13px; background: var(--bg); color: var(--text); }
        .form-group input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(14,165,233,0.1); }
        /* Browser autocomplete fix — Chrome wymusza biale tlo via -webkit-autofill, override przez box-shadow inset */
        .form-group input:-webkit-autofill,
        .form-group input:-webkit-autofill:hover,
        .form-group input:-webkit-autofill:focus,
        input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus {
            -webkit-text-fill-color: var(--text);
            -webkit-box-shadow: 0 0 0 1000px var(--bg) inset;
            transition: background-color 5000s ease-in-out 0s;
        }
        .btn { display: block; width: 100%; padding: 14px; background: var(--primary); color: white; border: none; border-radius: 10px; font-size: 16px; font-weight: 600; cursor: pointer; }
        .btn:active { transform: scale(0.98); }
        .error { background: #fef2f2; color: var(--danger); padding: 12px; border-radius: 10px; margin-bottom: 15px; text-align: center; font-size: 14px; }

        /* App Layout */
        .app { display: flex; min-height: 100vh; }

        /* Sidebar */
        .sidebar { width: 250px; background: var(--bg-card); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 200; overflow-y: auto; }
        .sidebar-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
        .sidebar-logo { font-size: 22px; font-weight: 700; color: var(--primary); text-decoration: none; }
        .sidebar-close { display: none; background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 4px; }
        .sidebar-site { padding: 8px 16px 4px; }
        .sidebar-site select { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; background: var(--bg); cursor: pointer; }
        .sidebar-site select:focus { outline: none; border-color: var(--primary); }
        .sidebar-nav { flex: 1; padding: 1px 0; overflow-y: auto; }
        .nav-section { padding: 6px 20px 3px; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
        .nav-section:not(:first-child) { margin-top: 6px; }
        .nav-link { display: flex; align-items: center; gap: 10px; padding: 3px 20px; color: var(--text-muted); text-decoration: none; font-size: 14px; transition: background 0.1s, color 0.1s; border-right: 3px solid transparent; }
        .nav-link:hover { background: var(--bg); color: var(--text); }
        .nav-link.active { background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); font-weight: 600; border-right-color: var(--primary); }
        .nav-link .lucide { width: 18px; height: 18px; }
        .limit-tip { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; margin-left:6px; border-radius:999px; border:1px solid var(--border); color:var(--text-muted); font-size:11px; font-weight:700; cursor:help; vertical-align:middle; background:var(--bg); }
        .limit-tip:hover { color:var(--primary); border-color:var(--primary); }
        .sidebar-footer { border-top: 1px solid var(--border); padding: 8px 0; }
        .sidebar-user { display: flex; align-items: center; gap: 10px; padding: 6px 20px; }
        .user-avatar { width: 32px; height: 32px; background: var(--primary); color: white; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
        .sidebar-user-name { font-size: 14px; font-weight: 600; line-height: 1.2; }
        .sidebar-user-plan { font-size: 12px; color: var(--text-muted); }
        .logout-link:hover { color: var(--danger) !important; }
        .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 199; }
        .sidebar-overlay.open { display: block; }

        /* Main wrap */
        .main-wrap { flex: 1; margin-left: 250px; min-height: 100vh; display: flex; flex-direction: column; min-width: 0; }
        .topbar { display: none; align-items: center; gap: 12px; padding: 12px 16px; background: var(--bg-card); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; }
        .hamburger { background: none; border: none; cursor: pointer; color: var(--text); padding: 4px; }
        .hamburger .lucide { width: 24px; height: 24px; }
        .topbar-title { font-size: 16px; font-weight: 600; }
        .alert-banner { padding: 10px 16px; font-size: 14px; text-align: center; }
        .alert-banner.alert-warning { background: #fffbeb; border-bottom: 1px solid #fde68a; color: #92400e; }
        .alert-banner.alert-danger { background: #fef2f2; border-bottom: 1px solid #fecaca; color: #991b1b; }
        .alert-banner a { color: inherit; font-weight: 600; }
        .notice-card { display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border-radius:10px; border:1px solid var(--border); background:var(--bg-card); margin-bottom:14px; }
        .notice-card.success { background:#f0fdf4; border-color:#bbf7d0; color:#166534; }
        .notice-card.error { background:#fef2f2; border-color:#fecaca; color:#991b1b; }
        /* Dark mode override — adaptive opacity-based bg + brand color text (Plan_poprawa_cennik 2026-05-08) */
        [data-theme="dark"] .notice-card.success {
            background: color-mix(in srgb, var(--success) 14%, transparent);
            border-color: color-mix(in srgb, var(--success) 40%, transparent);
            color: var(--success);
        }
        [data-theme="dark"] .notice-card.error {
            background: color-mix(in srgb, var(--danger) 14%, transparent);
            border-color: color-mix(in srgb, var(--danger) 40%, transparent);
            color: var(--danger);
        }
        .notice-card .lucide { width:16px; height:16px; margin-top:1px; flex-shrink:0; }
        .notice-card strong { display:block; margin-bottom:2px; color:inherit; }

        /* Main Content */
        .main { padding: 20px; width: 100%; overflow-x: hidden; min-width: 0; }

        /* Stats Cards */
        .stats-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
        .stat-card { background: var(--bg-card); border-radius: 10px; padding: 12px 14px; border: 1px solid var(--border); }
        .stat-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; }
        .stat-value { font-size: 22px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .stat-change { font-size: 12px; margin-top: 2px; }
        .stat-change.up { color: var(--success); }
        .stat-change.down { color: var(--danger); }
        .stat-change.neutral { color: var(--text-muted); }
        .stat-toggle { transition: opacity 0.2s, border-color 0.2s; }
        .stat-toggle:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
        .info-dot { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: var(--border, #e2e8f0); color: var(--text-muted, #64748b); font-size: 9px; font-weight: 700; cursor: help; transition: all 0.2s; line-height: 1; vertical-align: middle; }
        .info-dot:hover { background: var(--primary, #0ea5e9); color: white; }
        .stat-card .info-dot { position: absolute; top: 6px; right: 6px; }

        /* Active visitors */
        .active-visitors-bar { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; margin-bottom: 14px; font-size: 14px; font-weight: 500; color: #166534; }
        .active-dot { width: 10px; height: 10px; background: var(--success); border-radius: 50%; animation: pulse-dot 2s infinite; }
        @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

        /* Shared links table */
        .share-table { width: 100%; border-collapse: collapse; font-size: 13px; }
        .share-table th { text-align: left; padding: 8px 10px; border-bottom: 2px solid var(--border); color: var(--text-muted); font-size: 12px; text-transform: uppercase; }
        .share-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
        .share-table tr:last-child td { border-bottom: none; }
        .share-link-url { font-family: monospace; font-size: 12px; word-break: break-all; max-width: 280px; display:inline-block; }
        @media(max-width:600px) {
            .share-table thead { display: none; }
            .share-table, .share-table tbody, .share-table tr, .share-table td { display: block; width: 100%; }
            .share-table tr { border: 1px solid var(--border); border-radius: 8px; padding: 8px; margin-bottom: 8px; }
            .share-table td { border-bottom: none; padding: 3px 0; font-size: 12px; }
            .share-table td::before { content: attr(data-label); font-size: 10px; color: var(--text-muted); text-transform: uppercase; display: block; margin-bottom: 1px; }
            .share-link-url { max-width: 100%; font-size: 11px; }
        }
        .share-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
        .share-badge.active { background: #dcfce7; color: #166534; }
        .share-badge.inactive { background: #fef2f2; color: #991b1b; }
        .share-actions .share-actions-inner { display: flex; gap: 4px; align-items: center; }
        .share-actions form { display: inline; }
        .share-actions button { padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 11px; cursor: pointer; background: var(--bg-card); }
        .share-actions button:hover { background: var(--bg); }
        .share-actions button.btn-del { color: var(--danger); border-color: #fecaca; }
        .share-actions button.btn-del:hover { background: #fef2f2; }

        /* Funnel */
        .funnel-visual { display: flex; flex-direction: column; gap: 0; margin: 16px 0; }
        .funnel-step { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--bg-card); border: 1px solid var(--border); position: relative; }
        .funnel-step:first-child { border-radius: 10px 10px 0 0; }
        .funnel-step:last-child { border-radius: 0 0 10px 10px; }
        .funnel-step:not(:last-child) { border-bottom: none; }
        .funnel-step-num { width: 28px; height: 28px; background: var(--primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }
        .funnel-step-info { flex: 1; min-width: 0; }
        .funnel-step-name { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .funnel-step-type { font-size: 11px; color: var(--text-muted); }
        .funnel-step-count { font-size: 18px; font-weight: 700; text-align: right; min-width: 60px; }
        .funnel-step-bar { position: absolute; bottom: 0; left: 0; height: 3px; background: var(--primary); }
        .funnel-drop { text-align: center; padding: 4px; font-size: 12px; color: var(--danger); }
        .funnel-drop-good { color: var(--success); }

        /* Hour/weekday heatmap table */
        .hw-table { width: 100%; border-collapse: collapse; font-size: 12px; }
        .hw-table th { padding: 4px 6px; text-align: center; font-weight: 500; color: var(--text-muted); font-size: 11px; }
        .hw-table td { padding: 4px; text-align: center; }
        .hw-cell { display: inline-block; width: 100%; padding: 4px 0; border-radius: 4px; font-size: 11px; color: var(--text); min-width: 28px; transition: opacity 0.15s, box-shadow 0.15s; }
        .hw-clickable:hover { opacity: 0.8; box-shadow: 0 0 0 2px var(--primary, #0ea5e9); }
        .hw-active { box-shadow: 0 0 0 2px var(--primary, #0ea5e9) !important; opacity: 1 !important; }
        .sort-arrow { font-size: 10px; color: var(--text-muted); }

        /* Channel badges */
        .channel-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
        .channel-badge.direct { background: #e2e8f0; color: #475569; }
        .channel-badge.organic { background: #dcfce7; color: #166534; }
        .channel-badge.social { background: #dbeafe; color: #1e40af; }
        .channel-badge.referral { background: #fef3c7; color: #92400e; }
        .channel-badge.email { background: #fce7f3; color: #9d174d; }
        .channel-badge.paid { background: #fef2f2; color: #991b1b; }
        .channel-badge.ai { background: #ede9fe; color: #5b21b6; }

        /* Wykres kanalow (section=channels): legenda obok wykresu, ponizej 1024px pod spodem */
        .ch-chart-grid { display: grid; grid-template-columns: minmax(300px, 345px) 1fr; gap: 20px; align-items: start; }
        /* Ikonki lucide w legendzie nie moga byc celem kursora — inaczej dymek [data-tip] miga */
        .ch-legend-row svg { pointer-events: none; }
        @media (max-width: 1024px) {
            .ch-chart-grid { grid-template-columns: 1fr; gap: 16px; }
            .ch-chart-plot { order: 1; }
            .ch-chart-legend { order: 2; }
        }

        /* Chart */
        .chart-card { background: var(--bg-card); border-radius: 12px; padding: 16px; border: 1px solid var(--border); margin-bottom: 16px; }
        .chart-title { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
        .chart { display: flex; align-items: flex-end; gap: 4px; height: 100px; }
        .chart-bar { flex: 1; background: linear-gradient(180deg, var(--primary), var(--primary-dark)); border-radius: 4px 4px 0 0; min-height: 4px; position: relative; transition: opacity 0.15s; }
        .chart-bar:hover { opacity: 0.8; }
        .chart-bar-visitors { background: linear-gradient(180deg, var(--accent), var(--accent-dark)); }
        .chart-labels { display: flex; gap: 4px; margin-top: 8px; }
        .chart-labels span { flex: 1; text-align: center; font-size: 10px; color: var(--text-muted); }

        /* Annotation dot on chart bar */
        .chart-bar.has-annotation { position: relative; }
        .ann-dot { position: absolute; top: -4px; left: 50%; transform: translateX(-50%); width: 8px; height: 8px; background: var(--accent); border-radius: 50%; border: 1px solid var(--bg-card); pointer-events: auto; }

        /* Annotation panel */
        .ann-panel { background: var(--bg-card); border-radius: 12px; border: 1px solid var(--border); margin-bottom: 16px; overflow: hidden; }
        .ann-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; cursor: pointer; font-weight: 600; font-size: 13px; color: var(--text-muted); user-select: none; }
        .ann-header:hover { background: var(--bg); }
        .ann-list { list-style: none; margin: 0; padding: 0; }
        .ann-item { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-top: 1px solid var(--border); font-size: 13px; }
        .ann-date { font-weight: 600; color: var(--accent); white-space: nowrap; font-size: 12px; }
        .ann-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .ann-del { background: none; border: none; color: var(--danger); cursor: pointer; padding: 2px; line-height: 1; display: flex; align-items: center; }
        .ann-del:hover { opacity: 0.7; }
        .ann-empty { padding: 12px 16px; color: var(--text-muted); font-size: 13px; margin: 0; border-top: 1px solid var(--border); }
        .ann-form { padding: 10px 16px; border-top: 1px solid var(--border); }
        .ann-form-row { display: flex; gap: 8px; align-items: center; }
        .ann-form-row input[type="date"] { padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; background: var(--bg); color: var(--text); font-family: inherit; min-width: 130px; }
        .ann-form-row input[type="date"]::-webkit-calendar-picker-indicator { filter: var(--date-picker-filter, none); cursor: pointer; opacity: 0.6; }
        .ann-form-row input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
        [data-theme="dark"] { --date-picker-filter: invert(0.8); }
        .ann-form-row input[type="text"] { padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; background: var(--bg); color: var(--text); }
        .ann-add-btn { padding: 6px 14px; background: var(--primary); color: white; border: none; border-radius: 6px; font-size: 13px; cursor: pointer; white-space: nowrap; }
        .ann-add-btn:hover { background: var(--primary-dark); }

        /* Data Cards */
        .heatmap-tip-wrap:hover .heatmap-tip { display:block!important; }
        .data-card { background: var(--bg-card); border-radius: 12px; border: 1px solid var(--border); margin-bottom: 16px; overflow: hidden; }
        .data-card-header { padding: 14px 16px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 14px; }
        .data-list { list-style: none; }
        /* Karty na przegladzie pokazuja TOP 5. Kanaly to jedyna lista bez limitu (kanalow jest ~7-9 i user
           chce widziec komplet), wiec bez tego rosla ponad sasiednie karty i rozjezdzala siatke.
           225px = dokladnie 5 wierszy: (12+12 padding) + ~20 tekst + 1 border = 45px na wiersz. */
        .data-list-scroll5 { max-height: 225px; overflow-y: auto; }
        .data-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); }
        .data-item:last-child { border-bottom: none; }
        .data-name { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 70%; }
        .data-value { font-weight: 600; color: var(--primary); font-size: 14px; }

        /* Tracking Code */
        .tracking-box { background: var(--bg-card); border-radius: 12px; padding: 16px; border: 1px solid var(--border); margin-bottom: 16px; }
        .tracking-box h3 { font-size: 14px; margin-bottom: 10px; }
        .tracking-code { background: var(--code-bg); color: var(--code-text); padding: 12px; border-radius: 8px; font-family: monospace; font-size: 12px; overflow-x: auto; white-space: pre; word-break: break-all; max-width: 100%; }
        .copy-btn { margin-top: 10px; padding: 10px; background: var(--primary); color: white; border: none; border-radius: 8px; width: 100%; font-size: 14px; cursor: pointer; }

        /* Empty State */
        .empty-state { text-align: center; padding: 40px 20px; color: var(--text-muted); }
        .empty-state .icon { font-size: 48px; margin-bottom: 10px; }
        .empty-state h3 { color: var(--text); margin-bottom: 5px; }

        /* Settings */
        .page-title { margin-bottom: 20px; }
        .page-title h1 { font-size: 24px; margin-bottom: 4px; }
        .page-title p { color: var(--text-muted); font-size: 14px; }
        .settings-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
        .settings-grid .settings-card { margin-bottom: 0; }
        @media (max-width: 700px) { .settings-grid { grid-template-columns: 1fr; } }
        .settings-card { background: var(--bg-card); border-radius: 12px; border: 1px solid var(--border); margin-bottom: 16px; overflow: hidden; }
        .settings-card-header { padding: 14px 16px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 15px; background: var(--bg); }
        .settings-card-body { padding: 16px; }
        .settings-card-body .form-group { margin-bottom: 14px; }
        .settings-card-body .form-group:last-of-type { margin-bottom: 16px; }
        .info-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); }
        .info-row:last-child { border-bottom: none; padding-bottom: 0; }
        .info-row:first-child { padding-top: 0; }
        .info-label { color: var(--text-muted); font-size: 14px; }
        .info-value { font-weight: 500; font-size: 14px; text-align: right; }
        .badge-plan { background: var(--primary); color: white; padding: 4px 10px; border-radius: 12px; font-size: 13px; }
        .alert { padding: 14px 16px; border-radius: 12px; margin-bottom: 16px; font-size: 14px; }
        .alert-success { background: #dcfce7; color: #166534; }
        .alert-error { background: #fef2f2; color: #dc2626; }
        .alert-warning { background: #fef3c7; color: #92400e; }

        /* Toast notification */
        .toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%) translateY(-100px); background: #10b981; color: white; padding: 10px 20px; border-radius: 8px; font-size: 13px; font-weight: 500; z-index: 9999; box-shadow: 0 4px 16px rgba(0,0,0,0.15); transition: transform 0.3s ease; pointer-events: none; }
        .toast.show { transform: translateX(-50%) translateY(0); }
        .toast.toast-error { background: #dc2626; }

        /* Pricing cards */
        /* Pricing CSS — loaded from src/partials/pricing.php */

        /* Dev notice */
        .dev-notice { background: #fef3c7; border: 1px solid #f59e0b; border-radius: 10px; padding: 14px; margin-bottom: 16px; font-size: 14px; color: #92400e; }
        .dev-notice strong { display: block; margin-bottom: 8px; }
        .confirm-link { display: block; margin-top: 8px; padding: 10px 14px; background: #f59e0b; color: white; text-decoration: none; border-radius: 8px; text-align: center; font-weight: 600; }
        .confirm-link:hover { background: #d97706; }

        /* Toggle switch */
        .toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
        .toggle input { display: none; }
        .toggle-slider { position: absolute; inset: 0; background: #cbd5e1; border-radius: 12px; cursor: pointer; transition: 0.2s; }
        .toggle-slider::before { content: ''; position: absolute; width: 18px; height: 18px; background: white; border-radius: 50%; top: 3px; left: 3px; transition: 0.2s; }
        .toggle input:checked + .toggle-slider { background: var(--primary); }
        .toggle input:checked + .toggle-slider::before { left: 23px; }

        /* Tracking settings */
        .setting-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); gap: 12px; }
        .setting-row:last-of-type { border-bottom: none; }
        .setting-label { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
        .setting-desc { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
        .setting-select { padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; background: var(--bg-card); color: var(--text); cursor: pointer; }
        .code-block { background: var(--code-bg); color: var(--code-text); padding: 12px 14px; border-radius: 8px; font-family: 'Consolas', 'Monaco', monospace; font-size: 12px; overflow-x: auto; white-space: pre-wrap; word-break: break-all; line-height: 1.6; margin: 8px 0; max-width: 100%; }
        .code-inline { background: var(--border); color: var(--text); padding: 2px 6px; border-radius: 4px; font-family: 'Consolas', monospace; font-size: 12px; }
        /* Soft badges adapting to dark/light mode (Plan_poprawa_cennik 2026-05-08) */
        .badge-soft { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: 500; }
        .badge-soft-info { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); }
        .badge-soft-warn { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #f59e0b; }
        .guide-step { padding: 10px 0; border-bottom: 1px solid var(--border); }
        .guide-step:last-child { border-bottom: none; }
        .guide-step-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: var(--primary); color: white; border-radius: 50%; font-size: 12px; font-weight: 700; margin-right: 6px; }
        .guide-step h4 { font-size: 14px; margin-bottom: 6px; }
        .guide-step p { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
        /* Platform Tabs */
        .platform-tabs { display:flex; border:1px solid var(--border); border-radius:10px 10px 0 0; overflow:hidden; background:var(--bg-card); }
        .platform-tab { flex:1; padding:14px 8px; border:none; border-left:1px solid var(--border); cursor:pointer; font-size:12px; font-weight:600; display:flex; flex-direction:column; align-items:center; gap:6px; background:var(--bg-card); color:var(--text-muted); transition:all 0.15s; }
        .platform-tab:first-child { border-left:none; }
        .platform-tab:hover { background:var(--bg); color:var(--text); }
        .platform-tab.active { background:var(--primary); color:white; }
        .platform-tab.active .lucide { color:white; }
        .platform-panel { margin-bottom:0; }
        @media (max-width: 768px) {
            .platform-tabs { overflow-x:auto; -webkit-overflow-scrolling:touch; }
            .platform-tab { min-width:100px; flex:0 0 auto; }
        }
        .data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
        .data-table th { text-align: left; padding: 8px 10px; background: var(--bg); border-bottom: 1px solid var(--border); font-weight: 600; font-size: 12px; color: var(--text-muted); text-transform: uppercase; }
        .data-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); }
        .data-table tr:last-child td { border-bottom: none; }

        /* Date range dropdown */
        .date-dropdown { position: relative; }
        .date-btn { display: flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--text); font-size: 13px; font-family: inherit; cursor: pointer; white-space: nowrap; }
        .date-btn:hover { border-color: var(--primary); }
        .date-btn .lucide { width: 15px; height: 15px; }
        .date-menu { display: none; position: absolute; top: calc(100% + 4px); right: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.1); z-index: 300; min-width: 280px; overflow: visible; }
        .date-menu.open { display: block; }
        .date-menu-custom { padding: 12px 16px; border-top: 1px solid var(--border); }
        .date-menu-custom label { font-size: 12px; font-weight: 600; color: var(--text-muted); display: block; margin-bottom: 4px; }
        .date-menu-custom input[type="date"] { width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; font-family: inherit; background: var(--bg); color: var(--text); margin-bottom: 8px; }
        .date-menu-custom input[type="date"]:focus { outline: none; border-color: var(--primary); }
        .date-menu-custom button { width: 100%; padding: 8px; border: none; border-radius: 6px; background: var(--primary); color: white; font-size: 13px; font-family: inherit; font-weight: 600; cursor: pointer; }
        .date-menu-custom button:hover { background: var(--primary-dark); }
        .date-quick-row { display:flex; align-items:center; gap:8px; flex-wrap:nowrap; margin-bottom:10px; }
        .date-quick-label { font-size:12px; font-weight:600; color:var(--text-muted); white-space:nowrap; }
        .date-quick-options { display:flex; align-items:center; gap:6px; flex-wrap:nowrap; white-space:nowrap; }
        .date-quick-btn { padding:4px 9px; border:1px solid var(--border); border-radius:999px; background:var(--bg-card); color:var(--text); font-size:12px; font-family:inherit; font-weight:600; line-height:1; cursor:pointer; }
        .date-quick-btn:hover { border-color:var(--primary); color:var(--primary); }
        .date-quick-btn.active { border-color:var(--primary); background:color-mix(in srgb, var(--primary) 10%, transparent); color:var(--primary); }
        .date-compare-toggle { display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 10px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--bg); }
        .date-compare-toggle input[type="checkbox"] { margin:0; accent-color:var(--primary); }
        .date-compare-label { display:inline-flex; align-items:center; gap:8px; min-width:0; margin-right:10px; }
        .date-compare-toggle strong { display:inline; font-size:12px; color:var(--text); line-height:1.3; font-weight:600; white-space:nowrap; }
        .date-compare-tip { position:relative; display:inline-flex; align-items:center; color:var(--text-muted); cursor:help; }
        .date-compare-bubble { display:none; position:absolute; top:calc(100% + 8px); right:0; width:220px; padding:8px 10px; background:#1e293b; color:#fff; border-radius:8px; font-size:11px; line-height:1.45; z-index:400; box-shadow:0 4px 12px rgba(0,0,0,.25); }
        .date-compare-tip:hover .date-compare-bubble { display:block; }

        /* Responsive table */
        .resp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
        .resp-table th { text-align: left; padding: 10px 12px; background: var(--bg); border-bottom: 1px solid var(--border); font-weight: 600; font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; }
        .resp-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); }
        .resp-table tr:last-child td { border-bottom: none; }
        .resp-table tr:hover { background: var(--bg); }

        /* Mobile */
        @media (max-width: 768px) {
            .sidebar { transform: translateX(-100%); transition: transform 0.2s ease; }
            .sidebar.open { transform: translateX(0); }
            .sidebar-close { display: block; }
            .main-wrap { margin-left: 0; }
            .topbar { display: flex; }
            .main { padding: 12px; }
            .stats-row { gap: 6px; grid-template-columns: repeat(3, 1fr) !important; }
            .stat-value { font-size: 18px; }
            .stat-card { padding: 8px 10px; }
            .stat-label { font-size: 10px; }
            .charts-grid { grid-template-columns: 1fr !important; }
            .data-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
            .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
            .page-title h1 { font-size: 20px; }
            .settings-card-body { padding: 12px; }
            .setting-row { flex-direction: column; align-items: flex-start; gap: 8px; }
            .tracking-box { overflow: hidden; }
            .tracking-code { font-size: 11px; white-space: pre-wrap; word-break: break-all; }
            .code-block { font-size: 11px; }
            .chart-labels span { font-size: 9px; }
            .data-name { max-width: 60%; }
        }

        /* Tablet — mini sidebar (only icons) */
        @media (min-width: 769px) and (max-width: 1024px) {
            .sidebar { width: 56px; overflow-x: hidden; overflow-y: auto; }
            .sidebar .nav-text, .sidebar .nav-section, .sidebar .sidebar-user-name,
            .sidebar .sidebar-user-plan, .sidebar .sidebar-header h1 span,
            .sidebar .dev-links, .sidebar .theme-toggle { display: none !important; }
            .sidebar .sidebar-site { padding: 4px !important; }
            .sidebar .sidebar-site select { font-size: 11px; padding: 4px 2px; }
            .sidebar .sidebar-header h1 { font-size: 14px; justify-content: center; }
            .sidebar .sidebar-header h1 a { margin: 0 !important; }
            .sidebar .nav-link { padding: 10px 0; justify-content: center; }
            .sidebar .nav-link .lucide { margin: 0; }
            .sidebar .sidebar-footer { padding: 6px; }
            .sidebar .sidebar-user { justify-content: center; }
            .sidebar .user-avatar { margin: 0; }
            .sidebar .sidebar-actions-row { padding: 6px 0; justify-content: center; flex-direction: column; }
            .sidebar .logout-link { justify-content: center; padding: 8px 0 !important; }
            .sidebar .logout-link span { display: none; }
            .sidebar .notification-panel { left: 64px; bottom: 12px; }
            .main-wrap { margin-left: 56px; }
        }

        /* Desktop */
        @media (min-width: 769px) {
            .stats-row { grid-template-columns: repeat(4, 1fr); }
            .data-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
            .settings-card { max-width: 100%; }
        }
        @media (min-width: 1200px) {
            .data-grid { grid-template-columns: repeat(4, 1fr); }
        }

        /* Dark mode overrides for hard-coded colors */
        [data-theme="dark"] .form-group input,
        [data-theme="dark"] .form-group select,
        [data-theme="dark"] .form-group textarea,
        [data-theme="dark"] input[type="text"],
        [data-theme="dark"] input[type="email"],
        [data-theme="dark"] input[type="password"],
        [data-theme="dark"] input[type="date"],
        [data-theme="dark"] input[type="file"],
        [data-theme="dark"] select,
        [data-theme="dark"] textarea { background: var(--bg); color: var(--text); border-color: var(--border); }
        [data-theme="dark"] .error { background: #451a1a; }
        [data-theme="dark"] .alert-success { background: #14532d; color: #bbf7d0; }
        [data-theme="dark"] .alert-error { background: #450a0a; color: #fca5a5; }
        [data-theme="dark"] .alert-warning { background: #451a03; color: #fde68a; }
        [data-theme="dark"] .alert-banner.alert-warning { background: #451a03; border-color: #92400e; color: #fde68a; }
        [data-theme="dark"] .alert-banner.alert-danger { background: #450a0a; border-color: #991b1b; color: #fca5a5; }
        [data-theme="dark"] .notice-card.success { background: rgba(74, 222, 128, 0.12); border-color: #166534; color: #bbf7d0; }
        [data-theme="dark"] .notice-card.error { background: rgba(248, 113, 113, 0.12); border-color: #991b1b; color: #fecaca; }
        [data-theme="dark"] .active-visitors-bar { background: #14532d; border-color: #166534; color: #bbf7d0; }
        [data-theme="dark"] .dev-notice { background: #451a03; border-color: #92400e; color: #fde68a; }
        [data-theme="dark"] .resp-table th,
        [data-theme="dark"] .data-table th,
        [data-theme="dark"] .settings-card-header { background: var(--bg); }
        [data-theme="dark"] .sidebar-site select { background: var(--bg); color: var(--text); }
        [data-theme="dark"] .toggle-slider { background: #475569; }
        [data-theme="dark"] .hw-cell { color: var(--text); }
        [data-theme="dark"] .ann-form-row input[type="date"],
        [data-theme="dark"] .ann-form-row input[type="text"] { background: #0f172a; color: #e2e8f0; border-color: #334155; }
        [data-theme="dark"] .notification-body a { color:#7dd3fc; }
        [data-theme="dark"] .notification-body a:hover,
        [data-theme="dark"] .notification-body a:focus { color:#bae6fd; }

        /* Dark mode toggle button */
        .theme-toggle { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--text-muted); cursor: pointer; border: 1px solid var(--border); background: var(--bg); border-radius: 6px; flex-shrink: 0; padding: 0; }
        .theme-toggle:hover { background: var(--border); color: var(--text); }
        .sidebar-actions-row { display:flex; align-items:center; gap:6px; padding:4px 20px 8px; }
        .sidebar-actions-row .logout-link { flex:1; min-width:0; padding:6px 0 !important; border-right:0; }
        .notification-wrap { position:relative; flex-shrink:0; }
        .notification-bell { position:relative; display:flex; align-items:center; justify-content:center; width:28px; height:28px; border:1px solid var(--border); border-radius:6px; background:var(--bg); color:var(--text-muted); cursor:pointer; }
        .notification-bell:hover { background:var(--border); color:var(--text); }
        .notification-bell.has-unread { color:var(--primary); border-color:color-mix(in srgb, var(--primary) 45%, var(--border)); }
        .notification-bell.is-important, .notification-bell.is-critical { color:#dc2626; border-color:#dc2626; background:rgba(220,38,38,0.08); }
        .notification-bell.is-critical { transform:scale(1.06); box-shadow:0 0 0 3px rgba(220,38,38,0.12); }
        .notification-badge { position:absolute; top:-7px; right:-8px; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--primary); color:#fff; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; line-height:1; }
        .notification-bell.is-important .notification-badge, .notification-bell.is-critical .notification-badge { background:#dc2626; }
        .notification-panel { display:none; position:fixed; left:12px; bottom:52px; width:min(360px, calc(100vw - 24px)); max-height:70vh; overflow:auto; background:var(--bg-card); border:1px solid var(--border); border-radius:12px; box-shadow:0 18px 45px rgba(15,23,42,0.22); z-index:500; }
        .notification-panel.open { display:block; }
        .notification-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 14px; border-bottom:1px solid var(--border); }
        .notification-title { font-size:14px; font-weight:800; color:var(--text); }
        .notification-empty { padding:18px 14px; color:var(--text-muted); font-size:13px; text-align:center; }
        .notification-item { padding:12px 14px; border-bottom:1px solid var(--border); background:var(--bg-card); }
        .notification-item.is-unread { background:color-mix(in srgb, var(--primary) 5%, var(--bg-card)); }
        .notification-item.is-important, .notification-item.is-critical { border-left:3px solid #dc2626; }
        .notification-item-title { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:800; color:var(--text); margin-bottom:6px; }
        .notification-priority { font-size:10px; font-weight:800; border-radius:999px; padding:2px 6px; background:#dbeafe; color:#1d4ed8; text-transform:uppercase; }
        .notification-priority.important, .notification-priority.critical { background:#fee2e2; color:#b91c1c; }
        .notification-body { font-size:13px; color:var(--text-muted); line-height:1.55; }
        .notification-body p { margin:0 0 8px; }
        .notification-body ul, .notification-body ol { padding-left:18px; margin:6px 0; }
        .notification-body a { color:var(--primary); font-weight:700; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; }
        .notification-body a:hover, .notification-body a:focus { color:var(--primary-dark); }
        .notification-meta { margin-top:8px; font-size:11px; color:var(--text-muted); }
        .notification-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:10px; }
        .notification-actions button, .notification-actions a, .notification-head button { min-height:30px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:7px; background:var(--bg); color:var(--text); font-size:12px; font-weight:700; padding:6px 10px; cursor:pointer; text-decoration:none; line-height:1.2; }
        .notification-actions button:hover, .notification-head button:hover { border-color:var(--primary); color:var(--primary); }
        .notification-actions a { background:var(--primary); border-color:var(--primary); color:#fff; }
        .notification-actions a:hover { filter:brightness(.95); color:#fff; }
        .notifications-page { width:100%; max-width:none; }
        .notifications-page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
        .notifications-mark-all { border:1px solid var(--border); border-radius:8px; background:var(--bg-card); color:var(--text-muted); font-size:12px; font-weight:700; padding:7px 10px; cursor:pointer; }
        .notifications-mark-all:hover { border-color:var(--primary); color:var(--primary); background:var(--bg); }
        .notifications-page-list { display:grid; gap:12px; }
        .notifications-page-item { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:16px; }
        .notifications-page-item.is-unread { border-color:color-mix(in srgb, var(--primary) 45%, var(--border)); background:color-mix(in srgb, var(--primary) 5%, var(--bg-card)); }
        .notifications-page-item.is-important, .notifications-page-item.is-critical { border-left:4px solid #dc2626; }
        .notifications-page-item-title { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; color:var(--text); font-weight:800; }
        .notifications-page-empty { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:28px; text-align:center; color:var(--text-muted); }
        .notification-body table { width:100%; border-collapse:collapse; margin:10px 0; }
        .notification-body th, .notification-body td { border:1px solid var(--border); padding:7px 9px; vertical-align:top; }
        .notification-body th { background:var(--bg); color:var(--text); font-weight:800; }
        .notifications-page .notification-body { max-height:560px; overflow:auto; overflow-wrap:anywhere; }
        .notification-body div, .notification-body span, .notification-body p { max-width:100%; }

        @media (prefers-color-scheme: dark) {
            :root:not([data-theme="light"]) .form-group input,
            :root:not([data-theme="light"]) .form-group select,
            :root:not([data-theme="light"]) .form-group textarea,
            :root:not([data-theme="light"]) input[type="text"],
            :root:not([data-theme="light"]) input[type="email"],
            :root:not([data-theme="light"]) input[type="password"],
            :root:not([data-theme="light"]) input[type="date"],
            :root:not([data-theme="light"]) input[type="file"],
            :root:not([data-theme="light"]) select,
            :root:not([data-theme="light"]) textarea { background: #0f172a; color: #e2e8f0; border-color: #334155; }
            :root:not([data-theme="light"]) .error { background: #451a1a; }
            :root:not([data-theme="light"]) .alert-success { background: #14532d; color: #bbf7d0; }
            :root:not([data-theme="light"]) .alert-error { background: #450a0a; color: #fca5a5; }
            :root:not([data-theme="light"]) .alert-warning { background: #451a03; color: #fde68a; }
            :root:not([data-theme="light"]) .alert-banner.alert-warning { background: #451a03; border-color: #92400e; color: #fde68a; }
            :root:not([data-theme="light"]) .alert-banner.alert-danger { background: #450a0a; border-color: #991b1b; color: #fca5a5; }
            :root:not([data-theme="light"]) .notice-card.success { background: rgba(74, 222, 128, 0.12); border-color: #166534; color: #bbf7d0; }
            :root:not([data-theme="light"]) .notice-card.error { background: rgba(248, 113, 113, 0.12); border-color: #991b1b; color: #fecaca; }
            :root:not([data-theme="light"]) .active-visitors-bar { background: #14532d; border-color: #166534; color: #bbf7d0; }
            :root:not([data-theme="light"]) .dev-notice { background: #451a03; border-color: #92400e; color: #fde68a; }
            :root:not([data-theme="light"]) .resp-table th,
            :root:not([data-theme="light"]) .data-table th,
            :root:not([data-theme="light"]) .settings-card-header { background: #0f172a; }
            :root:not([data-theme="light"]) .sidebar-site select { background: #0f172a; color: #e2e8f0; }
            :root:not([data-theme="light"]) .toggle-slider { background: #475569; }
            :root:not([data-theme="light"]) .ann-form-row input[type="date"],
            :root:not([data-theme="light"]) .ann-form-row input[type="text"] { background: #0f172a; color: #e2e8f0; border-color: #334155; }
            :root:not([data-theme="light"]) .notification-body a { color:#7dd3fc; }
            :root:not([data-theme="light"]) .notification-body a:hover,
            :root:not([data-theme="light"]) .notification-body a:focus { color:#bae6fd; }
        }