/**
 * Brazar.eu - Style CSS
 * Klasyczny portal ogłoszeniowy
 */

/* ================================
   RESET & PODSTAWY
   ================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* Kolory główne - styl OLX teal */
    --primary: #002f34;
    --primary-dark: #001a1d;
    --primary-light: #406367;
    --accent: #23e5db;
    --cta: #3a77ff;
    --cta-hover: #2860d8;

    /* Kolory akcji */
    --success: #16a34a;
    --warning: #ca8a04;
    --danger: #dc2626;
    --info: #0891b2;
    --favorite: #ff4444;
    --featured: #ffce32;
    --shop-badge-bg: #f472b6;

    /* Odcienie szarości */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    /* Inne */
    --white: #ffffff;
    --black: #000000;
    --shadow: rgba(0, 0, 0, 0.1);
    --shadow-md: rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);

    /* Globalne tokeny semantyczne (etap 1: neutralne) */
    --bg: var(--gray-100);
    --surface: var(--white);
    --surface-muted: var(--gray-50);
    --surface-subtle: var(--gray-100);
    --surface-strong: var(--gray-200);
    --text-strong: var(--gray-900);
    --text: var(--gray-800);
    --text-muted: var(--gray-600);
    --text-weak: var(--gray-500);
    --text-inverse: var(--white);
    --border: var(--gray-200);
    --border-strong: var(--gray-300);
    --link: var(--primary);
    --link-hover: var(--primary-light);
    --card-bg: var(--surface);
    --border-color: var(--border);
    --border-radius: var(--radius);
    --price-color: var(--primary);
    --logo-color: var(--primary);
    --logo-hover: var(--primary-light);
    --status-tab-active-text: var(--primary);
    --status-tab-active-border: var(--primary);
    --status-tab-active-bg: var(--primary);
    --status-tab-active-badge-bg: rgba(255,255,255,0.25);
    --status-tab-active-badge-text: var(--text-inverse);

    /* Warianty jasne (tła) */
    --success-light: #f0fdf4;
    --warning-light: #fefce8;
    --danger-light: #fee2e2;
    --info-light: #ecfeff;

    /* Statusy i etykiety */
    --state-success-text: #059669;
    --state-warning-text: #d97706;
    --state-danger-text: #dc2626;
    --state-info-text: #2563eb;
    --status-hidden-bg: #fae8ff;
    --status-hidden-text: #a855f7;
    --status-active-bg: var(--success-light);
    --status-active-text: var(--state-success-text);
    --status-pending-bg: var(--warning-light);
    --status-pending-text: var(--state-warning-text);
    --status-rejected-bg: var(--danger-light);
    --status-rejected-text: var(--state-danger-text);
    --status-closed-bg: var(--surface-strong);
    --status-closed-text: var(--text-muted);
    --status-expired-bg: var(--surface-subtle);
    --status-expired-text: var(--text-muted);
    --status-inactive-bg: var(--info-light);
    --status-inactive-text: var(--state-info-text);
    --status-draft-bg: var(--surface-subtle);
    --status-draft-text: var(--text-muted);
    --status-new-bg: var(--warning-light);
    --status-new-text: var(--state-warning-text);
    --status-brat-bg: var(--info-light);
    --status-brat-text: var(--state-info-text);
    --status-banned-bg: var(--danger-light);
    --status-banned-text: var(--state-danger-text);
    --status-deleted-bg: var(--surface-subtle);
    --status-deleted-text: var(--text-muted);

    /* Alerty */
    --alert-success-bg: var(--success-light);
    --alert-success-text: #166534;
    --alert-success-border: var(--success);
    --alert-danger-bg: var(--danger-light);
    --alert-danger-text: #991b1b;
    --alert-danger-border: #fecaca;
    --alert-warning-bg: var(--warning-light);
    --alert-warning-text: #854d0e;
    --alert-warning-border: #fef08a;
    --alert-info-bg: var(--success-light);
    --alert-info-text: #166534;
    --alert-info-border: var(--success);

    /* Badge */
    --badge-success-bg: var(--success);
    --badge-warning-bg: var(--warning);
    --badge-danger-bg: var(--danger);
    --badge-secondary-bg: var(--gray-400);
    --badge-secondary-text: var(--white);
    --badge-info-bg: var(--gray-500);
    --badge-options-bg: #059669;
    --badge-sell-bg: var(--info-light);
    --badge-sell-text: var(--state-info-text);
    --badge-buy-bg: var(--warning-light);
    --badge-buy-text: var(--state-warning-text);
    --badge-exchange-bg: var(--info-light);
    --badge-exchange-text: #4f46e5;
    --tag-warning-bg: var(--warning-light);
    --tag-warning-border: #f59e0b;
    --tag-warning-text: #92400e;
    --stat-positive-text: var(--state-success-text);
    --stat-negative-text: var(--state-danger-text);

    /* Tła i akcenty komponentów */
    --gallery-nav-bg: rgba(255,255,255,0.9);
    --gallery-nav-bg-hover: var(--surface);
    --image-thumb-remove-bg: rgba(0, 0, 0, 0.6);
    --image-thumb-badge-bg: rgba(0, 47, 52, 0.8);
    --dropzone-bg: #fafafa;
    --dropzone-hover-bg: #f5f5f5;
    --dropzone-active-bg: #f0f7ff;
    --action-favorite-bg: rgba(239, 68, 68, 0.05);
    --action-block-text: #3b82f6;
    --action-block-border: #3b82f6;
    --action-block-bg: rgba(59, 130, 246, 0.05);
    --conversation-unread-bg: #e8f4fd;
    --conversation-unread-hover-bg: #d6ebfa;
    --tab-bg: var(--surface);
    --tab-active-text: var(--text-inverse);
    --tab-badge-bg: rgba(255,255,255,0.2);
    --tab-badge-text: var(--text-inverse);
    --tab-badge-inactive-bg: var(--danger);
    --tab-badge-inactive-text: var(--text-inverse);
    --decision-card-bg: var(--surface);
    --vote-btn-bg: var(--surface);
    --vote-btn-active-text: var(--text-inverse);
    --role-option-bg: var(--surface);
    --role-option-hover-bg: var(--surface-muted);
    --role-option-current-bg: var(--surface-subtle);
    --loveblock-row-odd-bg: var(--surface);
    --loveblock-btn-bg: var(--surface);
    --loveblock-favorite-bg: var(--action-favorite-bg);
    --loveblock-block-text: var(--action-block-text);
    --loveblock-block-border: var(--action-block-border);
    --loveblock-block-bg: var(--action-block-bg);
    --info-box-blue-bg: #f8f9fa;
    --info-box-blue-border: #007bff;
    --info-box-yellow-border: #ffc107;
    --claude-love-bg: var(--surface);
    --claude-love-border: var(--info-box-blue-border);
    --error-trace-bg: #1a1a2e;
    --error-trace-text: #16db93;
    --stat-icon-yellow-text: var(--state-warning-text);
    --stat-icon-pink-bg: #fce7f3;
    --stat-icon-pink-text: #db2777;
    --stat-icon-green-text: var(--state-success-text);
    --stat-icon-indigo-text: #4f46e5;
    --auction-outbid-text: #a16207;
    --tooltip-bg: #333;
    --tooltip-text: var(--text-inverse);
    --btn-confirm-hover-bg: var(--success);

    /* Role */
    --role-admin-bg: var(--danger-light);
    --role-admin-text: var(--state-danger-text);
    --role-mod-bg: var(--info-light);
    --role-mod-text: var(--state-info-text);
    --role-user-bg: var(--surface-subtle);
    --role-user-text: var(--text-muted);

    /* Encje (badge) */
    --entity-user-bg: var(--info-light);
    --entity-user-text: #1e40af;
    --entity-ad-bg: var(--success-light);
    --entity-ad-text: #166534;
    --entity-category-bg: var(--warning-light);
    --entity-category-text: #92400e;
    --entity-comment-bg: #fce7f3;
    --entity-comment-text: #9d174d;
    --entity-message-bg: var(--info-light);
    --entity-message-text: #3730a3;
    --entity-favorite-bg: var(--danger-light);
    --entity-favorite-text: #991b1b;
    --entity-conversation-bg: #f3e8ff;
    --entity-conversation-text: #6b21a8;

    /* ═══════════════════════════════════════════════════════════════════
       BREAKPOINTS (reference - używane w @media)
       Mobile-first: min-width
       ═══════════════════════════════════════════════════════════════════
       --bp-xs: 375px;    iPhone 12 mini
       --bp-sm: 480px;    small phones
       --bp-md: 640px;    large phones
       --bp-lg: 768px;    tablets
       --bp-xl: 1024px;   small laptops
       --bp-2xl: 1280px;  desktops
       --bp-3xl: 1536px;  large desktops
       --bp-4k: 2560px;   4K monitors
       ═══════════════════════════════════════════════════════════════════ */

    /* Rozmiary */
    --max-width: 1200px;
    /* Fluid container - rośnie z ekranem */
    --container-max: clamp(100%, 90vw, 1800px);
    --header-height: 72px;
    --top-bar-height: 36px;

    /* ═══════════════════════════════════════════════════════════════════
       SPACING SYSTEM - 8px base scale
       Używaj tych zmiennych zamiast hardcoded wartości!
       ═══════════════════════════════════════════════════════════════════ */

    --space-0: 0;
    --space-1: 0.125rem;  /* 2px */
    --space-2: 0.25rem;   /* 4px */
    --space-3: 0.375rem;  /* 6px */
    --space-4: 0.5rem;    /* 8px - base unit */
    --space-5: 0.625rem;  /* 10px */
    --space-6: 0.75rem;   /* 12px */
    --space-8: 1rem;      /* 16px */
    --space-10: 1.25rem;  /* 20px */
    --space-12: 1.5rem;   /* 24px */
    --space-16: 2rem;     /* 32px */
    --space-20: 2.5rem;   /* 40px */
    --space-24: 3rem;     /* 48px */
    --space-32: 4rem;     /* 64px */
    --space-40: 5rem;     /* 80px */
    --space-48: 6rem;     /* 96px */

    /* Semantyczne aliasy (mapowane na scale) */
    --space-xs: var(--space-2);   /* 4px */
    --space-sm: var(--space-4);   /* 8px */
    --space-md: var(--space-8);   /* 16px */
    --space-lg: var(--space-12);  /* 24px */
    --space-xl: var(--space-16);  /* 32px */
    --space-2xl: var(--space-24); /* 48px */
    --space-3xl: var(--space-32); /* 64px */

    /* ═══════════════════════════════════════════════════════════════════
       BORDER RADIUS SYSTEM
       ═══════════════════════════════════════════════════════════════════ */

    --radius-none: 0;
    --radius-sm: 0.25rem;   /* 4px - small buttons, inputs */
    --radius-md: 0.5rem;    /* 8px - cards, panels */
    --radius-lg: 0.75rem;   /* 12px - modals, large cards */
    --radius-xl: 1rem;      /* 16px - hero sections */
    --radius-2xl: 1.5rem;   /* 24px - special elements */
    --radius-full: 9999px;  /* pills, avatars */

    /* Backwards compatibility alias */
    --radius: var(--radius-md);

    /* ═══════════════════════════════════════════════════════════════════
       FLUID TYPOGRAPHY
       Formula: clamp(min, preferred, max)
       Preferred: viewport-based scaling between min and max
       ═══════════════════════════════════════════════════════════════════ */

    /* Base: 14px @ 320px → 16px @ 1200px → 18px @ 3840px */
    --font-size-base: clamp(0.875rem, 0.8rem + 0.25vw, 1.125rem);

    /* Small: 12px @ 320px → 14px @ 1200px → 15px @ 3840px */
    --font-size-sm: clamp(0.75rem, 0.7rem + 0.2vw, 0.9375rem);

    /* Large: 16px @ 320px → 18px @ 1200px → 20px @ 3840px */
    --font-size-lg: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);

    /* XL: 18px @ 320px → 20px @ 1200px → 24px @ 3840px */
    --font-size-xl: clamp(1.125rem, 1rem + 0.4vw, 1.5rem);

    /* 2XL: 20px @ 320px → 24px @ 1200px → 30px @ 3840px */
    --font-size-2xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.875rem);

    /* 3XL: 24px @ 320px → 30px @ 1200px → 40px @ 3840px */
    --font-size-3xl: clamp(1.5rem, 1.2rem + 1vw, 2.5rem);

    /* Headings */
    --font-size-h1: clamp(1.75rem, 1.5rem + 1.5vw, 3rem);
    --font-size-h2: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
    --font-size-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.75rem);
    --font-size-h4: clamp(1.125rem, 1rem + 0.4vw, 1.5rem);
}

:root[data-theme="dark"] {
    --bg: #0f1116;
    --surface: #151b24;
    --surface-muted: #0f141b;
    --surface-subtle: #131923;
    --surface-strong: #1d2633;
    --text-strong: #f3f4f6;
    --text: #e5e7eb;
    --text-weak: #cbd5e1;
    --text-muted: #a1afc4;
    --text-inverse: #0b0f14;
    --border: #273244;
    --border-strong: #354256;
    --link: #7dd3fc;
    --link-hover: #bae6fd;
    --shadow: rgba(0, 0, 0, 0.45);
    --shadow-md: rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 6px 18px rgba(0, 0, 0, 0.55);

    --success-light: #0b2a1e;
    --warning-light: #2c240b;
    --danger-light: #2a0f12;
    --info-light: #0b2330;

    --state-success-text: #34d399;
    --state-warning-text: #fbbf24;
    --state-danger-text: #f87171;
    --state-info-text: #60a5fa;
    --status-hidden-bg: #2a1233;
    --status-hidden-text: #e879f9;

    --alert-success-text: #86efac;
    --alert-danger-text: #fca5a5;
    --alert-danger-border: #7f1d1d;
    --alert-warning-text: #fde68a;
    --alert-warning-border: #854d0e;
    --alert-info-bg: var(--success-light);
    --alert-info-text: #86efac;
    --alert-info-border: var(--success);
    --shop-badge-bg: var(--primary);

    --badge-secondary-bg: #3f4b5c;
    --badge-info-bg: #475569;
    --badge-options-bg: #15803d;
    --badge-exchange-text: #a5b4fc;

    --tag-warning-border: #a16207;
    --tag-warning-text: #facc15;

    --gallery-nav-bg: rgba(15, 17, 22, 0.85);
    --gallery-nav-bg-hover: rgba(21, 27, 36, 0.95);
    --image-thumb-remove-bg: rgba(0, 0, 0, 0.65);
    --image-thumb-badge-bg: rgba(0, 47, 52, 0.8);
    --dropzone-bg: #0f141b;
    --dropzone-hover-bg: #141a25;
    --dropzone-active-bg: #0b2330;
    --action-favorite-bg: rgba(239, 68, 68, 0.15);
    --action-block-text: #60a5fa;
    --action-block-border: #60a5fa;
    --action-block-bg: rgba(59, 130, 246, 0.18);
    --conversation-unread-bg: #0b2330;
    --conversation-unread-hover-bg: #0f2b3a;
    --tab-bg: #151b24;
    --tab-active-text: #0b0f14;
    --tab-badge-bg: rgba(15, 23, 42, 0.35);
    --tab-badge-text: #e5e7eb;
    --tab-badge-inactive-bg: #ef4444;
    --tab-badge-inactive-text: #0b0f14;
    --decision-card-bg: #151b24;
    --vote-btn-bg: #0f141b;
    --vote-btn-active-text: #0b0f14;
    --role-option-bg: #151b24;
    --role-option-hover-bg: #1b2330;
    --role-option-current-bg: #1a2230;
    --loveblock-row-odd-bg: #151b24;
    --loveblock-btn-bg: #151b24;
    --loveblock-favorite-bg: rgba(239, 68, 68, 0.15);
    --loveblock-block-text: #60a5fa;
    --loveblock-block-border: #60a5fa;
    --loveblock-block-bg: rgba(59, 130, 246, 0.18);
    --info-box-blue-bg: #0f141b;
    --info-box-blue-border: #38bdf8;
    --info-box-yellow-border: #f59e0b;
    --claude-love-bg: #151b24;
    --claude-love-border: #38bdf8;
    --error-trace-bg: #0b0f1a;
    --error-trace-text: #5eead4;
    --stat-icon-yellow-text: #fbbf24;
    --stat-icon-pink-bg: #3b1426;
    --stat-icon-pink-text: #f472b6;
    --stat-icon-green-text: #34d399;
    --stat-icon-indigo-text: #a5b4fc;
    --auction-outbid-text: #fcd34d;
    --tooltip-bg: #0b0f14;
    --tooltip-text: #e5e7eb;
    --price-color: #fb923c;
    --logo-color: #e5e7eb;
    --logo-hover: #bae6fd;
    --status-tab-active-text: #7dd3fc;
    --status-tab-active-border: #7dd3fc;
    --status-tab-active-bg: #1b2a3a;
    --status-tab-active-badge-bg: rgba(125, 211, 252, 0.2);
    --status-tab-active-badge-text: #e5e7eb;
}

html {
    font-size: 16px;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: var(--font-size-base);
    background-color: var(--bg);
    color: var(--text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a {
    color: var(--link);
    text-decoration: none;
}

a:hover,
.see-all:hover,
.partner-name:hover,
.select-actions a:hover,
.change-link:hover,
.btn-danger-link:hover,
.category-tag a:hover,
.toc a:hover {
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
}

/* ================================
   IKONY SVG
   ================================ */
.icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.125em;
    fill: currentColor;
    flex-shrink: 0;
}

.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 20px; height: 20px; }
.icon-lg { width: 24px; height: 24px; }
.icon-xl { width: 32px; height: 32px; }

/* Ikony w przyciskach i linkach */
.btn .icon,
a .icon {
    margin-right: 0.25em;
}

/* Ikony kategorii */
.category-icon {
    width: 20px;
    height: 20px;
    color: var(--text-muted);
}

.category-icon.active {
    color: var(--primary);
}

/* ================================
   HEADER / NAWIGACJA
   ================================ */
.header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow);
    --header-icon-size: 22px;
    --header-icon-hit: 40px;
    --header-icon-border: 1px solid var(--border);
    --header-icon-bg: var(--surface-strong);
}

.header-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-md) 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
}

.logo {
    font-size: 1.5rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    text-decoration: none;
}

.logo:hover {
    text-decoration: none;
}

.logo .logo-text {
    font-family: 'Arial Black', Arial, sans-serif;
    font-weight: 900;
    letter-spacing: 1px;
    transform: skewX(-12deg);
    display: inline-block;
    background: linear-gradient(180deg, #333 0%, #111 100%);
    padding: 0.1em 0.35em;
    border-radius: 5px;
    border: 2px solid;
    border-color: #888 #666 #444 #777;
    -webkit-text-stroke: 0.5px currentColor;
}

.logo .logo-braz {
    background: linear-gradient(180deg, #fff 0%, #c0c0c0 40%, #e0e0e0 60%, #808080 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.logo .logo-ar {
    background: linear-gradient(180deg, #ffe033 0%, #f5c800 35%, #e5a000 70%, #cc7a00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Search Bar (OLX-style) */
.search-bar-header {
    flex: 1;
    max-width: 700px;
    display: flex;
    align-items: center;
    background-color: var(--surface-strong);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.search-bar-header:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 47, 52, 0.1);
}

.search-bar-header input {
    border: none;
    background: transparent;
    padding: var(--space-md);
    font-size: 0.9375rem;
    outline: none;
    flex: 1;
    min-width: 0;
}

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

.search-bar-header .search-divider {
    width: 1px;
    height: 24px;
    background-color: var(--border-strong);
}

.search-bar-header .location-input {
    width: 120px;
    flex-shrink: 0;
}

.search-bar-header .search-btn {
    background-color: var(--primary);
    color: var(--white);
    padding: var(--space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
    border-radius: 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0;
}

.search-bar-header .search-btn svg,
.btn-add svg,
.nav-link svg,
.menu-toggle svg {
    width: var(--header-icon-size);
    height: var(--header-icon-size);
}

.search-bar-header .search-btn:hover {
    background-color: var(--primary-light);
}

/* Add Button (CTA) */
.btn-add {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background-color: var(--cta);
    color: var(--white);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.9375rem;
    transition: background-color 0.2s, transform 0.1s;
    border: 2px solid transparent;
    cursor: pointer;
}

.btn-add:hover {
    background-color: var(--cta-hover);
    text-decoration: none;
}

.btn-add:active {
    transform: scale(0.98);
}

.nav {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav-link {
    color: var(--text-weak);
    font-weight: 500;
    padding: 0.5rem;
    border-radius: var(--radius-sm);
    transition: color 0.2s, background 0.2s;
}

.nav-link:hover {
    color: var(--link);
    text-decoration: none;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-subtle);
    color: var(--text-weak);
    cursor: pointer;
    transition: all 0.2s;
}

.theme-toggle-inline {
    width: 36px;
    height: 36px;
}

.theme-toggle-with-label {
    width: auto;
    padding: 0 0.75rem;
    gap: 0.5rem;
}

.theme-toggle-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.theme-toggle:hover {
    background: var(--surface-muted);
    color: var(--text);
}

.theme-icon {
    display: none;
}

html[data-theme="light"] .theme-icon-moon {
    display: block;
}

html[data-theme="dark"] .theme-icon-sun {
    display: block;
}

.badge,
.brat-badge,
.shop-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    border-radius: var(--radius-full);
}

.badge {
    background: var(--badge-bg, var(--danger));
    color: var(--badge-text, var(--white));
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    min-width: 1.25rem;
    border: var(--badge-border, none);
}

.badge-success { --badge-bg: var(--badge-success-bg); }
.badge-warning { --badge-bg: var(--badge-warning-bg); }
.badge-danger { --badge-bg: var(--badge-danger-bg); }
.badge-secondary { --badge-bg: var(--badge-secondary-bg); --badge-text: var(--badge-secondary-text); }

.brat-badge {
    gap: 0.25rem;
    background: var(--success);
    color: var(--white);
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    min-height: 1.25rem;
    border: none;
}

.shop-badge {
    gap: 0.25rem;
    background: var(--shop-badge-bg);
    color: var(--white);
    font-size: 0.525rem;
    padding: 0.0875rem 0.35rem;
    min-height: 0.875rem;
    border: none;
}

.brat-badge-sm {
    font-size: 0.625rem;
    padding: 0.0625rem 0.375rem;
    min-height: 1rem;
}

.shop-badge-sm {
    font-size: 0.4375rem;
    padding: 0.04375rem 0.2625rem;
    min-height: 0.7rem;
}

.brat-badge-button {
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.brat-badge-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(22, 163, 74, 0.25);
}

.brat-badge-link {
    text-decoration: none;
    position: relative;
    z-index: 2;
}

.brat-badge-link:hover {
    text-decoration: none;
}

.brat-badge-button:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Login button */
.btn-login {
    display: flex;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.9375rem;
    transition: all 0.2s;
}

.btn-login:hover {
    background: var(--primary);
    color: var(--white);
    text-decoration: none;
}

html[data-theme="dark"] .btn-login {
    background: var(--white);
    color: var(--primary-dark);
    border-color: var(--white);
}

html[data-theme="dark"] .btn-login:hover {
    background: var(--gray-100);
    color: var(--primary-dark);
}

/* User dropdown */
.user-dropdown {
    position: relative;
}

.user-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-weak);
    font-size: 0.9375rem;
    border-radius: var(--radius);
    transition: background 0.2s;
}

.user-dropdown-toggle:hover {
    background: var(--surface-subtle);
}

.user-dropdown-toggle .user-name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-dropdown-toggle .dropdown-arrow {
    transition: transform 0.2s;
}

.user-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
}

.user-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: var(--space-xs);
    min-width: 180px;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s;
    z-index: 1000;
}

.user-dropdown.open .user-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-dropdown-menu a {
    display: block;
    padding: var(--space-sm) var(--space-md);
    color: var(--text-weak);
    font-size: 0.875rem;
    transition: background 0.2s;
}

.user-dropdown-menu a:hover {
    background: var(--surface-subtle);
    text-decoration: none;
}

.dropdown-divider {
    height: 1px;
    background: var(--surface-strong);
    margin: var(--space-xs) 0;
}

/* Menu mobilne */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: var(--text-weak);
}

@media (max-width: 900px) {
    .search-bar-header {
        max-width: 350px;
    }
    .search-bar-header .location-wrapper,
    .search-bar-header .search-divider,
    .btn-add span {
        display: none;
    }
    .btn-add {
        padding: var(--space-md);
    }
}

@media (max-width: 768px) {
    .header {
        --header-icon-hit: 40px;
    }

    .user-dropdown-toggle .user-name,
    .menu-toggle {
        display: none;
    }

    .logo {
        font-size: 1.2rem;
    }

    .header-inner {
        flex-wrap: wrap;
        padding: var(--space-sm) 0.75rem;
        gap: var(--space-md);
        justify-content: flex-start;
    }

    .search-bar-header {
        flex: 0 0 auto;
        min-width: 42px;
        width: 42px;
        border: none;
        background: transparent;
        box-shadow: none;
        margin-left: auto;
        order: 3;
    }

    .search-bar-header input,
    .search-bar-header .location-wrapper,
    .search-bar-header .search-divider {
        display: none;
    }

    .search-bar-header .search-btn {
        width: var(--header-icon-hit);
        height: var(--header-icon-hit);
        padding: 0;
        border-radius: var(--radius);
        background: var(--header-icon-bg);
        color: var(--text-weak);
        border: var(--header-icon-border);
    }

    .search-bar-header.is-open {
        flex: 1 1 100%;
        width: 100%;
        border: 2px solid var(--border);
        background: var(--surface-subtle);
        margin-top: var(--space-sm);
    }

    .search-bar-header.is-open:focus-within {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(0, 47, 52, 0.1);
    }

    .search-bar-header.is-open input {
        display: block;
    }

    .search-bar-header.is-open .search-btn {
        background: var(--primary);
        color: var(--white);
        border-radius: 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0;
        border: none;
    }

    .nav {
        display: flex;
        position: static;
        background: transparent;
        flex-direction: row;
        padding: 0;
        border-bottom: none;
        box-shadow: none;
        z-index: auto;
        gap: var(--space-sm);
    }

    .nav .btn-add {
        width: auto;
    }

    .nav .btn-add,
    .nav .nav-link,
    .user-dropdown-toggle {
        width: var(--header-icon-hit);
        height: var(--header-icon-hit);
        padding: 0;
        border-radius: var(--radius);
        border: var(--header-icon-border);
        background: var(--header-icon-bg);
        color: var(--text-weak);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        overflow: visible;
    }

    .nav .nav-link {
        position: relative;
    }

    .nav .badge {
        position: absolute;
        top: -4px;
        right: -4px;
    }

    .nav .btn-add:hover,
    .nav .nav-link:hover,
    .user-dropdown-toggle:hover,
    .search-bar-header .search-btn:hover {
        background: var(--surface-strong);
        text-decoration: none;
    }

    .header.search-open .logo,
    .header.search-open .nav .btn-add,
    .header.search-open .nav .nav-link,
    .header.search-open .nav .btn-login,
    .header.search-open .nav .user-dropdown {
        display: inline-flex;
    }

    .header.search-open .logo {
        display: flex;
    }

    .header.search-open .nav {
        display: flex;
    }

}

/* ================================
   GŁÓWNY KONTENER
   ================================ */
.main {
    flex: 1;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1.5rem 1rem;
    width: 100%;
}

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-md);
}

/* ================================
   KARTY I PANELE
   ================================ */
.card {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: 0 1px 3px var(--shadow);
    overflow: hidden;
}

.card-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface-muted);
    font-weight: 600;
    font-size: 1.125rem;
}

.card-body {
    padding: 1.5rem;
}

.card-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
    background: var(--surface-muted);
}

/* ================================
   PRZYCISKI
   ================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: var(--radius);
    border: 1px solid var(--btn-border, transparent);
    background: var(--btn-bg, transparent);
    color: var(--btn-text, inherit);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    white-space: nowrap;
}

.btn:hover {
    background: var(--btn-bg-hover, var(--btn-bg, transparent));
    color: var(--btn-text-hover, var(--btn-text, inherit));
    border-color: var(--btn-border-hover, var(--btn-border, transparent));
    text-decoration: none;
}

.btn-label-short {
    display: none;
}

@media (max-width: 600px) {
    .btn-label-long {
        display: none;
    }

    .btn-label-short {
        display: inline;
    }
}

.btn-primary {
    --btn-bg: var(--primary);
    --btn-text: var(--white);
    --btn-bg-hover: var(--primary-dark);
}

.btn-secondary {
    --btn-bg: var(--surface-subtle);
    --btn-text: var(--text-weak);
    --btn-border: var(--border-strong);
    --btn-bg-hover: var(--surface-strong);
}

.btn-success {
    --btn-bg: var(--success);
    --btn-text: var(--white);
}

.btn-danger {
    --btn-bg: var(--danger);
    --btn-text: var(--white);
}

.btn-outline {
    --btn-bg: transparent;
    --btn-text: var(--link);
    --btn-border: var(--link);
    --btn-bg-hover: var(--link);
    --btn-text-hover: var(--text-inverse);
}

.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}

.btn-lg {
    padding: 0.875rem 1.75rem;
    font-size: 1.0625rem;
}

.btn-block {
    width: 100%;
}

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

.btn-group {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.btn-group .btn {
    flex: 1;
}

.btn-group .btn-form {
    flex: 1;
    display: flex;
    margin: 0;
}

.btn-group .btn-form .btn {
    width: 100%;
}

/* ================================
   FORMULARZE
   ================================ */
.form-group {
    margin-bottom: 1.25rem;
}

.form-label {
    display: block;
    margin-bottom: 0.375rem;
    font-weight: 500;
    color: var(--text-weak);
}

.form-label-required::after {
    content: ' *';
    color: var(--danger);
}

.form-control {
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: 1rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control-compact {
    max-width: 150px;
}

input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"],
textarea,
select {
    color: var(--text);
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-control::placeholder {
    color: var(--gray-400);
    opacity: 0.7;
    font-style: italic;
}

textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}

.form-text {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.form-control.is-valid {
    border-color: var(--success);
}

.form-control.is-invalid,
select.form-control.is-invalid,
textarea.form-control.is-invalid {
    border-color: var(--danger);
}

.phone-feedback,
.email-feedback {
    font-size: 0.8125rem;
    margin-top: 0.25rem;
}

.valid-feedback {
    color: var(--success);
}

.form-control.is-invalid + .invalid-feedback,
.form-control.is-invalid ~ .invalid-feedback,
.form-select.is-invalid + .invalid-feedback,
.form-select.is-invalid ~ .invalid-feedback,
.invalid-feedback.server-error {
    display: block;
}

.invalid-feedback {
    color: var(--danger);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.form-errors-summary,
.js-errors-summary {
    text-align: center;
    font-weight: 500;
}

/* Grupa inputów (cena od-do) */
.input-group {
    display: flex;
    gap: 0.5rem;
}

.input-group .form-control {
    flex: 1;
}

.input-group-stack {
    flex-direction: row;
}

@media (max-width: 600px) {
    .input-group-stack {
        flex-direction: column;
    }
}

/* Ukryj strzałki w polach liczbowych */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

/* ================================
   LISTA OGŁOSZEŃ (OLX-style)
   ================================ */
.ogl-section {
    padding: var(--space-xl) 0 var(--space-2xl);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-lg);
}

.section-header h2 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-strong);
}

.see-all {
    color: var(--cta);
    font-weight: 500;
    font-size: 0.9375rem;
}

/* Przełącznik widoku */
.ads-header-row {
    align-items: center;
}

.ads-header-row h1 {
    display: flex;
    align-items: center;
    line-height: 1.1;
}

.ogl-view-toggle {
    display: flex;
    gap: 0.25rem;
    margin-left: 1rem;
}

.view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.view-btn:hover {
    border-color: var(--text-muted);
    color: var(--text-weak);
}

.view-btn.active {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--white);
}

/* Kontener ogłoszeń - widok grid */
.ogl-container[data-view="grid"] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
}

@media (max-width: 1024px) {
    .ogl-container[data-view="grid"] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .ogl-container[data-view="grid"] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .ogl-container[data-view="grid"] {
        grid-template-columns: 1fr;
    }
}

/* Kontener ogłoszeń - widok listy */
.ogl-container[data-view="list"] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ogl-container[data-view="list"] .ogl-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.ogl-container[data-view="list"] .ogl-card-link {
    flex-shrink: 0;
    width: 160px;
}

.ogl-container[data-view="list"] .ogl-card-image {
    width: 160px;
    height: 120px;
    aspect-ratio: auto;
}

.ogl-container[data-view="list"] .ogl-card-body {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 0 0.75rem;
    padding: 0.35rem 0.75rem;
    align-content: center;
}

.ogl-container[data-view="list"] .ogl-card-title {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    min-height: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ogl-container[data-view="list"] .ogl-card-price {
    grid-column: 2;
    grid-row: 1;
    font-size: 1.1rem;
    font-weight: 700;
    white-space: nowrap;
    text-align: right;
    color: var(--price-color);
    font-variant-numeric: tabular-nums;
}

.ogl-container[data-view="list"] .ogl-card-badge {
    top: 0.25rem;
    left: 0.25rem;
    font-size: 0.75rem;
    padding: 0.2rem 0.45rem;
}

/* Excerpt i details inline - widoczne tylko w widoku listy */
.ogl-container[data-view="list"] .ogl-card-meta,
.ogl-card-excerpt,
.ogl-card-details-inline {
    display: none;
}

.ogl-container[data-view="list"] .ogl-card-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    grid-column: 1;
    grid-row: 2;
    max-width: 80%;
    font-size: 0.8rem;
    color: var(--text-weak);
    line-height: 1.3;
    overflow: hidden;
}

.ogl-container[data-view="list"] .ogl-card-details-inline {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
    grid-column: 2;
    grid-row: 2;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.ogl-container[data-view="list"] .ogl-card-location-inline {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.ogl-container[data-view="list"] .ogl-card-date-inline {
    font-size: 0.75rem;
}

.ogl-container[data-view="list"] .ogl-card-badge.new {
    display: none;
}

.ogl-card-new-inline {
    color: #e74c3c;
    font-weight: 700;
    font-size: 0.65rem;
    line-height: 1;
}

.ogl-card-date-inline-row {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
}

.ogl-container[data-view="list"] .ogl-card-bids-seller {
    display: none;
}

.ogl-card-bids-inline {
    display: none;
}

.ogl-container[data-view="list"] .ogl-card-bids-inline {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.ogl-container[data-view="list"] .ogl-card-seller-row {
    display: contents;
}

.ogl-container[data-view="list"] .ogl-card-price {
    margin: 0;
}

.ogl-container[data-view="list"] .ogl-card-actions {
    right: 6rem;
}

@media (max-width: 600px) {
    .ogl-container[data-view="list"] .ogl-card-link {
        width: 100px;
    }
    .ogl-container[data-view="list"] .ogl-card-image {
        width: 100px;
        height: 75px;
    }
    .ogl-container[data-view="list"] .ogl-card-body {
        padding: 0.4rem 0.6rem;
        gap: 0.1rem 0.5rem;
    }
    .ogl-container[data-view="list"] .ogl-card-title {
        font-size: 0.85rem;
    }
    .ogl-container[data-view="list"] .ogl-card-price {
        font-size: 0.9rem;
    }
    .ogl-container[data-view="list"] .ogl-card-excerpt {
        font-size: 0.75rem;
        max-width: 100%;
    }
    .ogl-container[data-view="list"] .ogl-card-details-inline {
        font-size: 0.7rem;
    }
}

.ogl-card {
    position: relative;
    background: var(--surface);
    border-radius: var(--radius-md);
    box-shadow: 0 1px 3px var(--shadow), 0 1px 2px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
    border: 1px solid var(--border);
}

.ogl-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
    border-color: var(--border-strong);
}

.ogl-card.ad-relation-favorite,
.ogl-card:has(.relation-btn.favorite-btn.active[data-entity-type="ad"]) {
    box-shadow: 0 0 0 2px #ec4899, 0 1px 3px var(--shadow);
}

.ogl-card.ad-relation-favorite:hover,
.ogl-card:has(.relation-btn.favorite-btn.active[data-entity-type="ad"]):hover {
    box-shadow: 0 0 0 2px #ec4899, 0 4px 16px var(--shadow-md);
}

.ogl-card.ad-relation-blocked,
.ogl-card:has(.relation-btn.block-btn.active[data-entity-type="ad"]) {
    box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.9), 0 1px 3px var(--shadow);
}

.ogl-card.ad-relation-blocked:hover,
.ogl-card:has(.relation-btn.block-btn.active[data-entity-type="ad"]):hover {
    box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.95), 0 4px 16px var(--shadow-md);
}

.ogl-card.ad-relation-blocked::before,
.ogl-card:has(.relation-btn.block-btn.active[data-entity-type="ad"])::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(148, 163, 184, 0.22);
    z-index: 2;
    pointer-events: none;
}

.ogl-card.ad-relation-blocked .ogl-card-image img,
.ogl-card:has(.relation-btn.block-btn.active[data-entity-type="ad"]) .ogl-card-image img {
    filter: grayscale(0.85) brightness(0.85);
}

.ogl-card-actions {
    position: absolute;
    top: 0.45rem;
    right: 0.45rem;
    z-index: 4;
    display: flex;
    gap: 0.3rem;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.ogl-card:hover .ogl-card-actions,
.ogl-card:focus-within .ogl-card-actions {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.ogl-card-actions .ogl-action-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: var(--surface);
    box-shadow: 0 1px 3px var(--shadow);
}

.ogl-card-actions .ogl-action-icon svg {
    width: 14px;
    height: 14px;
}

.ogl-card.swipe-feedback-love {
    box-shadow: 0 0 0 2px #ec4899, 0 4px 16px var(--shadow-md);
}

.ogl-card.swipe-feedback-block {
    box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.95), 0 4px 16px var(--shadow-md);
}

@media (hover: none) {
    .ogl-card-actions {
        display: none;
    }
}

/* Stretched link - cała karta klikalna */
.ogl-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.ogl-card-link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

.ogl-card-link:hover {
    text-decoration: none;
}

.ogl-card-image {
    position: relative;
    aspect-ratio: 4/3;
    background: var(--surface-strong);
    overflow: hidden;
}

.ogl-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--surface-strong);
    transition: transform 0.3s;
}

.ogl-card:hover .ogl-card-image img {
    transform: scale(1.05);
}

/* === Carousel na liście ogłoszeń === */
/* z-index: 3 aby być ponad .ogl-card-link::after (z-index: 1) */
.carousel-btn {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    background: rgba(0,0,0,0.45);
    color: #fff;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.carousel-btn:hover { background: rgba(0,0,0,0.7); }
.carousel-prev { left: 6px; }
.carousel-next { right: 6px; }

/* hover na .ogl-card (article) bo .ogl-card-link::after przechwytuje hover na .has-carousel */
.ogl-card:hover .has-carousel .carousel-btn { display: flex; }

@media (hover: none) {
    .has-carousel .carousel-btn { display: flex; opacity: 0.7; }
}

.carousel-dots {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 4px;
    z-index: 3;
}
.carousel-dots .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    cursor: pointer;
}
.carousel-dots .dot.active {
    background: #fff;
    box-shadow: 0 0 2px rgba(0,0,0,0.5);
}

.ogl-card:hover .has-carousel img { transform: none; }

.ogl-container[data-view="list"] .carousel-btn {
    width: 22px; height: 22px; font-size: 16px;
}
.ogl-container[data-view="list"] .carousel-dots .dot {
    width: 4px; height: 4px;
}

.ogl-card-no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    font-size: 3rem;
}

.ogl-card-badge {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    background: rgba(220, 252, 231, 0.9);
    color: var(--text-strong);
    padding: 0.3rem 0.6rem;
    border: 1px solid rgba(15, 23, 42, 0.2);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 700;
}

.ogl-card-badge.new {
    background: transparent;
    border: none;
    color: #e74c3c;
    font-weight: 700;
    left: auto;
    right: var(--space-sm);
    top: var(--space-sm);
    padding: 0;
    font-size: 0.78rem;
    line-height: 1;
}

html[data-theme="dark"] .ogl-card-badge:not(.auction) {
    background: rgba(187, 247, 208, 0.95);
    color: var(--text-inverse);
    border-color: rgba(15, 23, 42, 0.35);
}

.ogl-card-badge.auction {
    background: var(--success);
    color: var(--white);
    font-size: 0.85rem;
    border-color: rgba(15, 23, 42, 0.2);
}

.ogl-card-badge.buy {
    background: #e5e7eb;
    color: #4b5563;
    border-color: rgba(75, 85, 99, 0.25);
}

html[data-theme="dark"] .ogl-card-badge.buy {
    background: rgba(30, 41, 59, 0.75);
    color: #e2e8f0;
    border-color: rgba(226, 232, 240, 0.5);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.ogl-card-body {
    padding: var(--space-md);
}

.ogl-card-title {
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--text-strong);
    margin-bottom: var(--space-sm);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    min-height: 2.8em;
}

.ogl-card-title a {
    color: inherit;
}

.ogl-card-title a:hover {
    color: var(--link);
    text-decoration: none;
}

.ogl-card-seller-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: var(--space-sm);
}

.ogl-card-seller {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-weak);
    margin-bottom: 0;
}

.ogl-card-seller-link {
    font-weight: 600;
    color: var(--text-weak);
    position: relative;
    z-index: 2;
}

.ogl-card-seller-link:hover {
    color: var(--link);
    text-decoration: none;
}

@media (max-width: 400px) {
    .ogl-container[data-view="list"] .ogl-card-seller-link {
        display: inline-block;
        max-width: 13ch;
        overflow: hidden;
        white-space: nowrap;
    }
}

.ogl-card-seller .brat-badge {
    font-size: 0.6875rem;
    padding: 0.1rem 0.45rem;
    position: relative;
    z-index: 2;
}

.ogl-card-price {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--price-color);
    margin-bottom: 0;
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

.ogl-card-bids-seller {
    display: none;
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.ogl-card-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.ogl-card-bids {
    font-size: 0.8125rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.ogl-card-date {
    margin-left: auto;
    white-space: nowrap;
}

.ogl-card-location {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.location-map-link {
    color: inherit;
    text-decoration: none;
    position: relative;
    z-index: 2;
}
.location-map-link:hover {
    color: var(--link);
    text-decoration: underline;
}
.location-tag.location-map-link:hover {
    text-decoration: none;
    background: var(--bg-tertiary, #e6e6e6);
}

/* ================================
   WIDOK OGŁOSZENIA
   ================================ */

/* Breadcrumbs */
.breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.875rem;
    margin-bottom: 1rem;
    color: var(--text-muted);
}

.breadcrumbs a {
    color: var(--text-weak);
    text-decoration: none;
}

.breadcrumbs a:hover {
    color: var(--link);
    text-decoration: underline;
}

.breadcrumb-sep {
    color: var(--text-muted);
}

.breadcrumb-current {
    color: var(--text);
    font-weight: 500;
}

.ogl-main-title {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 1rem 0;
    color: var(--text-strong);
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

@media (min-width: 768px) {
    .ogl-main-title {
        font-size: 2rem;
    }
}

/* Sekcja opisu */
.ogl-description-section {
    margin-top: 0;
    background: var(--surface);
    padding: 1.5rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.price-negotiable {
    font-size: 1rem;
    color: var(--text-weak);
}

.ogl-detail {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
}

.ogl-detail-main,
.ogl-detail-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.ogl-detail-sidebar .seller-card {
    margin-top: 0;
}

.ogl-detail-sidebar .auction-widget {
    margin: 0;
}

.ogl-detail > * {
    min-width: 0;
    overflow: hidden;
}

@media (max-width: 900px) {
    .ogl-detail {
        grid-template-columns: 1fr;
    }
}

.ogl-gallery {
    background: var(--surface);
    border-radius: var(--radius);
    overflow: hidden;
}

.ogl-gallery-main {
    background: var(--surface-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 400px;
    position: relative;
    overflow: hidden;
}

.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--gallery-nav-bg);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: opacity 0.2s;
    z-index: 10;
}
.gallery-nav:hover { opacity: 1; background: var(--gallery-nav-bg-hover); }
.gallery-prev { left: 10px; }
.gallery-next { right: 10px; }

.ogl-gallery-main img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.ogl-gallery-thumbs {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    overflow-x: auto;
}

.ogl-gallery-thumb {
    width: 80px;
    height: 60px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
}

.ogl-gallery-thumb.active {
    border-color: var(--primary);
}

.ogl-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Image Uploader */
.image-uploader {
    margin: 1rem 0;
}

.image-uploader-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: 8px;
}

.image-thumb {
    width: 120px;
    height: 90px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    position: relative;
    cursor: grab;
    overflow: hidden;
}

.image-thumb:active {
    cursor: grabbing;
}

.image-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: zoom-in;
}

.image-thumb-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: var(--image-thumb-remove-bg);
    color: var(--text-inverse);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.image-thumb:hover .image-thumb-remove {
    opacity: 1;
}

.image-thumb-remove:hover {
    background: var(--danger);
}

.image-thumb-badge {
    position: absolute;
    bottom: 4px;
    left: 4px;
    background: var(--image-thumb-badge-bg);
    color: var(--text-inverse);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
}

.image-uploader-dropzone {
    border: 2px dashed var(--border);
    border-radius: var(--radius-sm);
    padding: 20px;
    text-align: center;
    background: var(--dropzone-bg);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.image-uploader-dropzone:hover {
    border-color: var(--text-muted);
    background: var(--dropzone-hover-bg);
}

.image-uploader-dropzone.drag-over {
    border-color: var(--primary);
    background: var(--dropzone-active-bg);
}

.image-uploader-dropzone p {
    margin: 0;
    color: var(--text-muted);
}

.image-uploader-input {
    display: none;
}

.image-uploader-counter {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-top: 8px;
}

.image-thumb.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.image-thumb.drag-over {
    border: 2px solid var(--primary);
    background: rgba(0, 47, 52, 0.1);
}

.ogl-info {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.5rem;
}

.ad-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.ogl-price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--price-color);
    margin-bottom: 1rem;
}

.ogl-meta {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: 1rem;
}

.ogl-meta-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.9375rem;
}

.ogl-meta-value {
    font-weight: 500;
}

/* Action icons (favorite, block) */
.ogl-actions,
.profile-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
}

.ogl-action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.ogl-action-icon:hover {
    border-color: var(--border-strong);
    color: var(--text-weak);
    background: var(--surface-muted);
}

.ogl-action-icon:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.ogl-action-icon.favorite-btn:hover,
.ogl-action-icon.favorite-btn.active {
    color: var(--favorite);
    border-color: var(--favorite);
    background: var(--action-favorite-bg);
}

.ogl-action-icon.block-btn:hover {
    color: var(--text-weak);
    border-color: var(--text-muted);
    background: var(--surface-subtle);
}

.ogl-action-icon.block-btn.active {
    color: var(--action-block-text);
    border-color: var(--action-block-border);
    background: var(--action-block-bg);
}

.ogl-action-icon svg {
    width: 20px;
    height: 20px;
}

.ogl-actions .vote-widget,
.profile-actions .vote-widget,
.seller-actions .vote-widget {
    height: 44px;
    padding: 0 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}


.ogl-description {
    line-height: 1.7;
}

.ogl-description a {
    color: var(--cta);
    text-decoration: underline;
}

.ogl-description a:hover {
    color: var(--cta-hover);
    text-decoration: none;
}

.ogl-description ul,
.ogl-description ol {
    padding-left: 1.5rem;
    margin: 0.5rem 0;
}

.ogl-description p {
    margin: 0.5rem 0;
}

.ogl-description p:first-child {
    margin-top: 0;
}

.shop-offer-link {
    margin-top: 1rem;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.shop-offer-link a {
    color: var(--cta);
}

.shop-offer-link a:hover {
    color: var(--cta-hover);
}

.ogl-custom-fields {
    margin-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ogl-custom-field {
    flex: 1 1 100px;
    min-width: 100px;
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0.75rem;
    background: var(--surface-muted);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.ogl-custom-field .text-muted {
    font-size: 0.75rem;
    margin-bottom: 0.125rem;
}

.ogl-custom-field .font-weight-500 {
    font-size: 0.9rem;
}

/* Panel sprzedającego */
.seller-card {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.seller-header {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.seller-header .ogl-action-icon {
    margin-left: auto;
}

.seller-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    color: var(--text-strong);
    min-width: 0;
}

.seller-link:hover {
    color: var(--link);
}

.seller-link:hover .seller-avatar {
    background: var(--border-strong);
}

.seller-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--surface-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--text-weak);
    flex-shrink: 0;
    transition: background-color 0.2s;
}

.seller-name {
    font-weight: 600;
    font-size: 1.125rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.seller-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.seller-ads-count {
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* ================================
   KOMENTARZE
   ================================ */
.comments-section {
    margin-top: var(--space-sm);
    padding: 1rem 0;
    max-width: calc((100% - 1.5rem) * 2 / 3);
}

@media (max-width: 900px) {
    .comments-section {
        max-width: 100%;
    }
}

.comments-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.comments-title {
    font-weight: 600;
    color: var(--text-weak);
}

#komentarze,
.comments-list .comment[id^="c-"] {
    scroll-margin-top: 6rem;
}

@media (max-width: 768px) {
    #komentarze,
    .comments-list .comment[id^="c-"] {
        scroll-margin-top: 7.5rem;
    }
}

.comments-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.comment {
    padding: 0.75rem;
    background: var(--surface);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.comment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.comment-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.comment-user-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: inherit;
    text-decoration: none;
}

.comment-user-link:hover {
    text-decoration: underline;
}

.comment-content {
    line-height: 1.5;
    color: var(--text-weak);
    font-size: 0.9rem;
}

.comment-content a {
    color: var(--cta);
    text-decoration: underline;
}

.comment-content a:hover {
    color: var(--cta-hover);
    text-decoration: none;
}

.comment-form-wrapper {
    position: relative;
}

.comment-trigger {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text-muted);
    text-align: left;
    cursor: pointer;
    font-size: 0.9rem;
}

.comment-trigger:hover {
    border-color: var(--text-muted);
}

.comment-form-wrapper .comment-form,
.comment-form-wrapper.expanded .comment-trigger {
    display: none;
}

.comment-form-wrapper.expanded .comment-form {
    display: block;
}

.comment-form textarea {
    width: 100%;
    resize: none;
    margin-bottom: 0.5rem;
}

.comment-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

@media (max-width: 640px) {
    .comment-form-actions .comment-cancel {
        display: none;
    }
}

.text-sm {
    font-size: 0.8rem;
}

.btn-comment-action {
    background: var(--surface-subtle);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-weak);
    cursor: pointer;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    transition: all 0.2s;
}

.btn-comment-action:hover {
    background: var(--surface-strong);
    border-color: var(--text-muted);
    color: var(--text-weak);
}

.comment-hidden {
    opacity: 0.6;
    border-left: 3px solid var(--warning);
}

.comment-edit-actions {
    margin-top: 0.5rem;
    display: flex;
    gap: 0.5rem;
}

.comment-edit-textarea {
    font-size: 0.9rem;
}

/* ================================
   FILTRY I WYSZUKIWANIE
   ================================ */
.filters {
    background: var(--surface);
    padding: 1rem;
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
}

.filters-toggle {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--surface-subtle);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font: inherit;
    color: var(--text);
    margin-bottom: 1rem;
    transition: background 0.2s ease;
}

.filters-toggle:hover {
    background: var(--surface-strong);
}

.filters-toggle[data-expanded="true"] .filters-toggle-icon {
    transform: rotate(180deg);
}

.filters-toggle-icon {
    transition: transform 0.2s ease;
    font-size: 0.875rem;
}

.filters .filters-form {
    animation: slideDown 0.2s ease;
}

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

.filters-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.filters-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.filters-actions .filters-save-search-btn {
    width: 34px;
    height: 34px;
}

.filters-attributes {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
}

.filters-attributes > .form-group {
    flex: 0 1 calc(33.333% - 1rem);
    min-width: 200px;
}

.filters-grid > .form-group {
    flex: 0 1 200px;
}

.filters-grid > .filter-sm {
    flex: 0 1 155px;
    min-width: 110px;
}

.filters-grid > .filter-wide {
    flex: 0 1 350px;
}

.filter-label-with-tip {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.filter-tooltip-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.filter-tooltip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface-subtle);
    color: var(--text-muted);
    font-size: 0.7rem;
    cursor: help;
    padding: 0;
}

.filter-tooltip-text {
    position: absolute;
    bottom: calc(100% + 6px);
    right: 0;
    min-width: 200px;
    max-width: 260px;
    padding: 0.5rem 0.65rem;
    border-radius: var(--radius-sm);
    background: var(--tooltip-bg);
    color: var(--tooltip-text);
    font-size: 0.72rem;
    line-height: 1.3;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
    z-index: 20;
}

.filter-tooltip:hover + .filter-tooltip-text,
.filter-tooltip:focus + .filter-tooltip-text,
.filter-tooltip:focus-visible + .filter-tooltip-text {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.filter-tooltip:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.filter-type-buttons {
    display: flex;
    gap: 0.35rem;
    align-items: center;
}

.filter-type-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.filter-type-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 0.45rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-subtle);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.filter-type-btn:hover {
    background: var(--surface-strong);
}

.filter-type-input:checked + .filter-type-btn {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

.filter-type-input:focus-visible + .filter-type-btn {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.filter-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    max-height: 120px;
    overflow-y: auto;
    padding: 0.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.filter-checkbox {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    font-size: 0.8rem;
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
    cursor: pointer;
    user-select: none;
    transition: background 0.15s, color 0.15s;
}

.filter-checkbox:hover {
    background: var(--surface-strong);
}

.filter-checkbox:has(input:checked) {
    background: var(--primary);
    color: var(--white);
}

html[data-theme="dark"] .filter-type-input:checked + .filter-type-btn {
    background: #f59e0b;
    border-color: #fbbf24;
    color: #111827;
}

html[data-theme="dark"] .filter-checkbox:has(input:checked) {
    background: #f59e0b;
    color: #111827;
}

.filter-checkbox input {
    display: none;
}

.filter-checkbox span {
    white-space: nowrap;
}

.filter-options-more {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    font-size: 0.8rem;
    border-radius: var(--radius-sm);
    border: 1px dashed var(--border);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.filter-options-more:hover {
    color: var(--text);
    border-color: var(--text);
    background: var(--surface-subtle);
}

/* ================================
   PAGINACJA
   ================================ */
.pagination {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    margin-top: 2rem;
}

.pagination-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-weak);
    font-weight: 500;
    transition: all 0.2s;
}

.pagination-item:hover {
    background: var(--surface-subtle);
    text-decoration: none;
}

.pagination-item.active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

.pagination-item.disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* ================================
   ALERTY I KOMUNIKATY
   ================================ */
.alert {
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: var(--alert-bg, transparent);
    color: var(--alert-text, inherit);
    border: 1px solid var(--alert-border, transparent);
}

.alert-success {
    --alert-bg: var(--alert-success-bg);
    --alert-text: var(--alert-success-text);
    --alert-border: var(--alert-success-border);
}

.alert-danger {
    --alert-bg: var(--alert-danger-bg);
    --alert-text: var(--alert-danger-text);
    --alert-border: var(--alert-danger-border);
}

.alert-warning {
    --alert-bg: var(--alert-warning-bg);
    --alert-text: var(--alert-warning-text);
    --alert-border: var(--alert-warning-border);
}

.alert-info {
    --alert-bg: var(--alert-info-bg);
    --alert-text: var(--alert-info-text);
    --alert-border: var(--alert-info-border);
}

/* Moderation bar for pending ads */
.moderation-bar {
    margin-bottom: 1rem;
}
.moderation-bar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.moderation-bar-actions {
    display: flex;
    gap: 0.5rem;
}
.moderation-reject-form {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}
.moderation-reject-form textarea {
    width: 100%;
    margin-bottom: 0.5rem;
}
.moderation-reject-actions {
    display: flex;
    gap: 0.5rem;
}

.alert-dismissible {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
}

.alert-dismissible .alert-content {
    width: 100%;
}

.alert-dismissible .alert-content a {
    color: inherit;
    text-decoration: underline;
}

.alert-dismiss {
    background: transparent;
    border: 1px solid currentColor;
    border-radius: var(--radius-sm);
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    color: inherit;
    cursor: pointer;
    white-space: nowrap;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.alert-dismiss:hover {
    opacity: 1;
}

/* Animacja ukrywania */
.alert-dismissible.hiding {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s, transform 0.3s;
}

@media (max-width: 450px) {
    .preview-alert {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .preview-alert-text {
        display: block;
    }
}

/* ================================
   KATEGORIE (OLX-style)
   ================================ */
.filters.mb-3:has(~ .site-stats) {
    margin-bottom: 0;
}
.site-stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-md);
    font-size: 1.17rem;
    background: var(--primary);
    border-radius: var(--radius-md);
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
}
.site-stats-item {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
}
a.site-stats-item:hover {
    color: #fff;
}
.site-stats-item strong {
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.site-stats-sep {
    opacity: 0.35;
    color: rgba(255, 255, 255, 0.5);
}
html[data-theme="dark"] .site-stats {
    background: var(--primary-dark);
}

.categories-section {
    background-color: var(--surface);
    padding: var(--space-lg) 0 var(--space-md);
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
    gap: var(--space-sm);
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1rem;
}

.category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm);
    border-radius: var(--radius);
    transition: background-color 0.2s;
    text-decoration: none;
}

.category-item:hover {
    background-color: var(--surface-subtle);
    text-decoration: none;
}

.category-icon {
    font-size: 1.5rem;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--surface-subtle);
    border-radius: var(--radius-full);
    transition: transform 0.2s, box-shadow 0.2s;
}

.category-item:hover .category-icon {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Kolorowe tła ikon kategorii */
.category-item:nth-child(1) .category-icon { background: #fef3c7; color: #92400e; }  /* Broń palna */
.category-item:nth-child(2) .category-icon { background: #fce7f3; color: #9d174d; }  /* Amunicja */
.category-item:nth-child(3) .category-icon { background: #dbeafe; color: #1e40af; }  /* Optyka */
.category-item:nth-child(4) .category-icon { background: #d1fae5; color: #065f46; }  /* Akcesoria */
.category-item:nth-child(5) .category-icon { background: #e0e7ff; color: #3730a3; }  /* Części broni */
.category-item:nth-child(6) .category-icon { background: #e2e8f0; color: #475569; }  /* Sejfy */
.category-item:nth-child(7) .category-icon { background: #fef9c3; color: #854d0e; }  /* Ochrona */
.category-item:nth-child(8) .category-icon { background: #ede9fe; color: #5b21b6; }  /* Bezpozwolenia */
.category-item:nth-child(9) .category-icon { background: #fee2e2; color: #991b1b; }  /* Elaboracja */
.category-item:nth-child(10) .category-icon { background: #ccfbf1; color: #0f766e; } /* Usługi */
.category-item:nth-child(11) .category-icon { background: #ffedd5; color: #9a3412; } /* Pojazdy */
.category-item:nth-child(12) .category-icon { background: #f1f5f9; color: #64748b; } /* Inne */

html[data-theme="dark"] .category-item:nth-child(1) .category-icon { background: rgba(254, 243, 199, 0.15); color: #fbbf24; }
html[data-theme="dark"] .category-item:nth-child(2) .category-icon { background: rgba(252, 231, 243, 0.15); color: #f472b6; }
html[data-theme="dark"] .category-item:nth-child(3) .category-icon { background: rgba(219, 234, 254, 0.15); color: #60a5fa; }
html[data-theme="dark"] .category-item:nth-child(4) .category-icon { background: rgba(209, 250, 229, 0.15); color: #34d399; }
html[data-theme="dark"] .category-item:nth-child(5) .category-icon { background: rgba(224, 231, 255, 0.15); color: #818cf8; }
html[data-theme="dark"] .category-item:nth-child(6) .category-icon { background: rgba(226, 232, 240, 0.15); color: #94a3b8; }
html[data-theme="dark"] .category-item:nth-child(7) .category-icon { background: rgba(254, 249, 195, 0.15); color: #facc15; }
html[data-theme="dark"] .category-item:nth-child(8) .category-icon { background: rgba(237, 233, 254, 0.15); color: #a78bfa; }
html[data-theme="dark"] .category-item:nth-child(9) .category-icon { background: rgba(254, 226, 226, 0.15); color: #f87171; }
html[data-theme="dark"] .category-item:nth-child(10) .category-icon { background: rgba(204, 251, 241, 0.15); color: #2dd4bf; }
html[data-theme="dark"] .category-item:nth-child(11) .category-icon { background: rgba(255, 237, 213, 0.15); color: #fb923c; }
html[data-theme="dark"] .category-item:nth-child(12) .category-icon { background: rgba(241, 245, 249, 0.15); color: #94a3b8; }

.category-name {
    font-size: 0.75rem;
    color: var(--text-weak);
    text-align: center;
    font-weight: 500;
}

.category-item.active {
    background-color: var(--surface-subtle);
}

.category-item.active .category-icon {
    background-color: var(--primary);
    color: white;
}

@media (max-width: 768px) {
    .categories-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: var(--space-xs);
    }
    .category-item {
        padding: var(--space-xs);
    }
    .category-name {
        font-size: 0.6875rem;
    }
}

@media (max-width: 480px) {
    .categories-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 300px) {
    .categories-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ================================
   FOOTER (OLX-style)
   ================================ */
.footer {
    background: var(--primary);
    color: var(--white);
    padding: 0.75rem 0;
    margin-top: auto;
}

.footer-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.75rem;
}

.footer-brand {
    color: var(--white);
    font-weight: 600;
}

.footer-brand:hover {
    text-decoration: none;
}

.footer-nav {
    display: flex;
    gap: 1.5rem;
}

.footer-nav a {
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.2s;
}

.footer-nav a:hover {
    color: var(--white);
    text-decoration: none;
}

.footer-copy {
    color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 600px) {
    .footer-inner {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }
    .footer-nav {
        order: 3;
        width: 100%;
        justify-content: center;
        gap: 1rem;
        margin-top: 0.5rem;
    }
}

/* ================================
   ADMIN PANEL
   ================================ */
.admin-layout {
    display: flex;
    min-height: calc(100vh - var(--header-height));
}

.admin-sidebar {
    width: 250px;
    background: var(--gray-800);
    color: var(--white);
    padding: 1rem 0;
    flex-shrink: 0;
}

.admin-sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    color: var(--gray-300);
    transition: all 0.2s;
}

.admin-sidebar-link:hover,
.admin-sidebar-link.active {
    background: var(--gray-700);
    color: var(--white);
    text-decoration: none;
}

.admin-content {
    flex: 1;
    padding: 0 1.5rem 1.5rem 1.5rem;
    overflow-x: auto;
}

@media (max-width: 768px) {
    .admin-layout {
        flex-direction: column;
    }

    .admin-sidebar {
        width: 100%;
    }
}

/* Tabele w adminie */
.table,
.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 1px 3px var(--shadow);
}

.table th,
.table td,
.admin-table th,
.admin-table td {
    padding: 0.875rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.table th,
.admin-table th {
    background: var(--surface-muted);
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--text-weak);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.table tr:last-child td,
.admin-table tr:last-child td {
    border-bottom: none;
}

.table tr:hover,
.admin-table tbody tr:hover {
    background: var(--surface-muted);
}

.admin-table-filters {
    display: table-row;
}

.admin-table-filters th {
    background: var(--surface);
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    cursor: default;
}

.admin-table-filters th:hover { background: var(--surface); }

.admin-table-filter-input {
    width: 100%;
    min-width: 90px;
    padding: 0.35rem 0.5rem;
    font-size: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
}

.admin-filter-hidden {
    display: none;
}

.admin-table-wrap {
    overflow-x: auto;
    margin: 1rem 0;
}

/* Report details */
.report-details-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .report-details-grid {
        grid-template-columns: 1fr;
    }
}

.detail-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem 1rem;
}

.detail-list dt {
    font-weight: 600;
    color: var(--text-muted);
}

.detail-list dd {
    margin: 0;
}

.radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.radio-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

/* Status badges */
.status {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--status-bg, transparent);
    color: var(--status-text, inherit);
}

.status-active { --status-bg: var(--status-active-bg); --status-text: var(--status-active-text); }
.status-pending { --status-bg: var(--status-pending-bg); --status-text: var(--status-pending-text); }
.status-closed { --status-bg: var(--status-closed-bg); --status-text: var(--status-closed-text); }
.status-rejected { --status-bg: var(--status-rejected-bg); --status-text: var(--status-rejected-text); }
.status-expired { --status-bg: var(--status-expired-bg); --status-text: var(--status-expired-text); }
.status-inactive { --status-bg: var(--status-inactive-bg); --status-text: var(--status-inactive-text); }
.status-hidden { --status-bg: var(--status-hidden-bg); --status-text: var(--status-hidden-text); }
.status-draft { --status-bg: var(--status-draft-bg); --status-text: var(--status-draft-text); }
.status-new { --status-bg: var(--status-new-bg); --status-text: var(--status-new-text); }
.status-brat { --status-bg: var(--status-brat-bg); --status-text: var(--status-brat-text); }
.status-shop { --status-bg: var(--badge-options-bg); --status-text: var(--white); }
.status-banned { --status-bg: var(--status-banned-bg); --status-text: var(--status-banned-text); }
.status-deleted { --status-bg: var(--status-deleted-bg); --status-text: var(--status-deleted-text); }

/* ================================
   EMPTY STATE
   ================================ */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
}

.empty-state-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-state-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-weak);
    margin-bottom: 0.5rem;
}

/* ================================
   LOADING
   ================================ */
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

/* ================================
   AUDIT LOGS
   ================================ */

/* Filters bar */
.filters-bar {
    background: var(--surface);
    padding: 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px var(--shadow);
}

.filters-bar .filters-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.filters-bar .filter-group select,
.filters-bar .filter-group input {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    font-size: 0.875rem;
    background: var(--surface);
}

.filters-bar .filter-group select:focus,
.filters-bar .filter-group input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

.filters-bar .filter-checkboxes-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Entity badges */
.entity-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: var(--radius-full);
    text-transform: lowercase;
    background: var(--entity-bg, transparent);
    color: var(--entity-text, inherit);
}

.entity-user { --entity-bg: var(--entity-user-bg); --entity-text: var(--entity-user-text); }
.entity-ad { --entity-bg: var(--entity-ad-bg); --entity-text: var(--entity-ad-text); }
.entity-category { --entity-bg: var(--entity-category-bg); --entity-text: var(--entity-category-text); }
.entity-comment { --entity-bg: var(--entity-comment-bg); --entity-text: var(--entity-comment-text); }
.entity-message { --entity-bg: var(--entity-message-bg); --entity-text: var(--entity-message-text); }
.entity-favorite { --entity-bg: var(--entity-favorite-bg); --entity-text: var(--entity-favorite-text); }
.entity-conversation { --entity-bg: var(--entity-conversation-bg); --entity-text: var(--entity-conversation-text); }

/* Value cell */
.value-cell {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    font-family: ui-monospace, monospace;
    color: var(--text-weak);
}

.text-nowrap {
    white-space: nowrap;
}

.timeline-header h1 {
    margin: 1rem 0;
}

.entity-summary {
    background: var(--surface-muted);
    padding: 1rem;
    border-radius: var(--radius-md);
    margin-top: 1rem;
}

.entity-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.timeline {
    position: relative;
    padding-left: 2rem;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 0.5rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--surface-strong);
}

.timeline-item {
    position: relative;
    padding-bottom: 1.5rem;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-marker {
    position: absolute;
    left: -1.5rem;
    top: 0.25rem;
    width: 12px;
    height: 12px;
    background: var(--primary);
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--gray-200);
}

.timeline-content {
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1rem;
}

.timeline-header-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.timeline-date {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.timeline-field code {
    background: var(--surface-subtle);
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
}

.timeline-owner {
    font-size: 0.75rem;
}

.timeline-change {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    font-size: 0.875rem;
}

.change-old, .change-new {
    flex: 1;
    min-width: 0;
}

.change-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.change-value {
    display: block;
    word-break: break-word;
    background: var(--surface-muted);
    padding: 0.5rem;
    border-radius: var(--radius-sm);
    max-height: 100px;
    overflow-y: auto;
}

.change-old .change-value {
    background: var(--danger-light);
}

.change-new .change-value {
    background: var(--success-light);
}

.change-arrow {
    padding-top: 1.25rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .timeline-change {
        flex-direction: column;
    }
    .change-arrow {
        transform: rotate(90deg);
        padding: 0.5rem 0;
    }
}

/* ================================
   AVATAR (uniwersalny komponent)
   ================================ */

.avatar {
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: 600;
    text-transform: uppercase;
}

/* Avatar w formularzu uploadu */
.avatar-upload {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.avatar-upload .avatar {
    border: 3px solid var(--border);
}

.avatar-upload-controls {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.avatar-upload-controls input[type="file"] {
    font-size: 0.875rem;
}

.avatar-cropper {
    margin-top: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.avatar-cropper[hidden] {
    display: none;
}

.avatar-cropper-stage {
    width: min(100%, 260px);
    aspect-ratio: 1 / 1;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--surface-subtle);
    overflow: hidden;
    position: relative;
    cursor: grab;
    touch-action: none;
}

.avatar-cropper-stage.is-dragging {
    cursor: grabbing;
}

.avatar-cropper-image-wrap {
    position: absolute;
    inset: 0;
}

.avatar-cropper-image {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    user-select: none;
    pointer-events: none;
    max-width: none;
    max-height: none;
}

.avatar-cropper-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.6) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.6) 1px, transparent 1px);
    background-size: 33.333% 33.333%;
    opacity: 0;
}

.avatar-cropper.has-grid .avatar-cropper-grid {
    opacity: 0.6;
}

.avatar-cropper-controls {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.avatar-cropper-label {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.875rem;
    color: var(--text-weak);
}

.avatar-cropper-zoom {
    width: 140px;
}

.avatar-cropper-hint {
    display: block;
}

/* ================================
   DASHBOARD (Moje konto)
   ================================ */

/* Nagłówek z avatarem */
.dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.5rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    margin-bottom: var(--space-lg);
}

.dashboard-user {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.dashboard-user-info {
    min-width: 0;
}

.dashboard-username {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-strong);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.verified-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: var(--success);
    color: var(--white);
    border-radius: 50%;
    font-size: 0.75rem;
}

.dashboard-meta {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0.25rem 0 0;
}

/* Responsywność dashboard */
@media (max-width: 768px) {
    .dashboard-header {
        flex-direction: column;
        align-items: center;
        gap: var(--space-sm);
        text-align: center;
    }

    .dashboard-username {
        font-size: 1.125rem;
    }
}

/* ================================
   PROFIL (Edycja profilu)
   ================================ */

.profile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-lg);
}

.profile-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.profile-header h1 {
    margin: 0;
    font-size: 1.5rem;
}

.profile-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-md);
}

.profile-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 var(--space-md);
    padding-bottom: var(--space-sm);
    padding-left: 0.75rem;
    border-bottom: 1px solid var(--border);
    border-left: 3px solid var(--primary);
}

.profile-section-muted {
    background: var(--surface-muted);
}

.profile-section-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.profile-section-row .profile-section-title {
    border: none;
    padding: 0;
    margin: 0;
}

.profile-section-row p {
    margin: 0.25rem 0 0;
}

/* Preferencje - toggle buttons */
.pref-toggle {
    display: inline-flex;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    overflow: hidden;
}

.pref-btn {
    padding: 0.375rem 0.75rem;
    border: none;
    background: var(--surface);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.875rem;
    transition: background 0.15s, color 0.15s;
}

.pref-btn:not(:last-child) {
    border-right: 1px solid var(--border-strong);
}

.pref-btn:hover {
    background: var(--surface-subtle);
}

.pref-btn.active {
    background: var(--cta);
    color: var(--white);
}

.pref-toggle + .text-muted {
    display: block;
    margin-top: 0.25rem;
}

/* Profile edit grid (2 columns) */
.profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    align-items: stretch;
}

/* Verification status */
.verification-status {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border-radius: var(--radius);
}

.verification-status-verified {
    background: var(--success-light);
    border: 1px solid var(--success);
}

.verification-status-verified .verification-icon {
    color: var(--success);
}

.verification-status-unverified {
    background: var(--surface-subtle);
    border: 1px solid var(--border-strong);
}

.verification-icon {
    flex-shrink: 0;
}

.verification-info strong {
    display: block;
    margin-bottom: 0.25rem;
}

.verification-info p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* Checkbox group */
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

/* Form row dla profilu */
.form-row {
    display: flex;
    gap: var(--space-md);
}

.form-row .form-group {
    flex: 1;
}

@media (min-width: 769px) {
    .profile-form .form-group-inline {
        display: flex;
        gap: var(--space-md);
        align-items: flex-start;
    }

    .profile-form .form-label {
        margin-bottom: 0;
        min-width: 110px;
        padding-top: 0.5rem;
    }

    .profile-form .form-label-top {
        padding-top: 0;
    }

    .profile-form .form-field {
        flex: 1;
    }
}

.profile-form .form-static {
    padding: 0.625rem 0;
    color: var(--text-weak);
    font-weight: 500;
}

.profile-form .form-field small.text-muted {
    display: block;
    line-height: 1.2;
}

@media (max-width: 768px) {
    .profile-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .form-row {
        flex-direction: column;
        gap: 0;
    }

    .profile-section-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 450px) {
    .profile-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }

    .profile-header .btn {
        width: 100%;
        justify-content: center;
    }

    .avatar-upload {
        flex-direction: column;
        align-items: flex-start;
    }

    .avatar-upload-controls {
        width: 100%;
    }

    .avatar-upload-controls input[type="file"] {
        width: 100%;
    }

    .verification-status {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ================================
   STATUS TABS & MY ADS LIST
   ================================ */

.status-tabs {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    border-bottom: 2px solid var(--border);
    margin-bottom: var(--space-lg);
}

.status-tab {
    padding: 0.625rem 1rem;
    text-decoration: none;
    color: var(--text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
}

.status-tab:hover {
    color: var(--text-weak);
}

.status-tab.active {
    color: var(--status-tab-active-text);
    border-bottom-color: var(--status-tab-active-border);
}

.status-tab .badge {
    margin-left: 0.375rem;
}

/* Mobile: pill-style tabs */
@media (max-width: 600px) {
    .status-tabs {
        gap: 0.375rem;
        border-bottom: none;
        margin-bottom: var(--space-md);
    }

    .status-tab {
        background: var(--surface-subtle);
        border: 1px solid var(--border);
        border-radius: var(--radius-full);
        padding: 0.375rem 0.625rem;
        margin-bottom: 0;
        font-size: 0.8125rem;
    }

    .status-tab:hover {
        background: var(--surface-strong);
    }

    .status-tab.active {
        background: var(--status-tab-active-bg);
        border-color: var(--status-tab-active-border);
        color: var(--status-tab-active-text);
    }

    .status-tab.active .badge {
        background: var(--status-tab-active-badge-bg);
        color: var(--status-tab-active-badge-text);
    }

    .status-tab .badge {
        margin-left: 0.25rem;
        padding: 0.125rem 0.375rem;
        font-size: 0.75rem;
    }
}

@media (max-width: 600px) {
    html[data-theme="light"] .status-tab.active {
        color: var(--text-inverse);
    }

    html[data-theme="light"] .status-tab.active .badge {
        color: var(--text-inverse);
    }
}

/* My Ads List */
.my-ogl-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.my-ogl-card {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: border-color 0.15s;
}

.my-ogl-card:hover {
    border-color: var(--border-strong);
}

.my-ad-image {
    position: relative;
    width: 120px;
    height: 90px;
    flex-shrink: 0;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface-subtle);
}

.my-ad-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.my-ad-image .no-image {
    width: 100%;
    height: 100%;
    background: var(--surface-strong);
}

.my-ogl-content {
    flex: 1;
    min-width: 0;
}

.my-ad-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
}

.my-ad-title a {
    color: var(--text-strong);
    text-decoration: none;
}

.my-ad-title a:hover {
    color: var(--cta);
}

.my-ogl-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.8125rem;
    margin-bottom: 0.5rem;
}

.my-ad-rejection {
    font-size: 0.8125rem;
    color: var(--danger);
    background: var(--danger-light);
    padding: 0.375rem 0.5rem;
    border-radius: var(--radius);
    margin-bottom: 0.5rem;
}

.my-ogl-price {
    font-weight: 700;
    color: var(--price-color);
    white-space: nowrap;
}

.my-ad-stats {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.my-ad-stats span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.my-ad-stats span + span {
    margin-left: 5px;
}

.my-ogl-actions {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
    flex-shrink: 0;
}

.my-ogl-actions form {
    margin: 0;
}

.ogl-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.ogl-action-btn:hover {
    background: var(--surface-subtle);
    color: var(--text-weak);
    border-color: var(--text-muted);
}

.ogl-action-close {
    color: var(--danger);
    border-color: var(--danger);
}

.ogl-action-close:hover {
    background: var(--danger);
    color: var(--white);
}

.ogl-action-renew {
    color: var(--cta);
    border-color: var(--cta);
}

.ogl-action-renew:hover {
    background: var(--cta);
    color: var(--white);
}

/* ================================
   MODAL
   ================================ */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-box {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 400px;
    margin: var(--space-md);
    transform: scale(0.95) translateY(-10px);
    transition: transform 0.2s;
}

.modal-overlay.active .modal-box {
    transform: scale(1) translateY(0);
}

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

.modal-header h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    transition: color 0.15s;
}

.modal-close:hover {
    color: var(--text-weak);
}

.modal-body {
    padding: var(--space-lg);
}

.modal-body p {
    margin: 0;
    color: var(--text-weak);
    line-height: 1.5;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--border);
    background: var(--surface-muted);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.modal-footer form {
    margin: 0;
}

@media (max-width: 640px) {
    .my-ogl-card {
        flex-direction: column;
    }

    .my-ad-image {
        width: 100%;
        height: 160px;
    }

    .my-ogl-actions {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
    }
}

/* ================================
   PAGE HEADER (z linkiem powrotu)
   ================================ */

.page-header {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    margin-bottom: var(--space-md);
}

.page-header h1 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    color: var(--text-weak);
    text-decoration: none;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius);
    transition: background 0.15s, color 0.15s;
}

.back-link:hover {
    background: var(--surface-subtle);
    color: var(--link);
}

/* ================================
   MESSAGES PAGE
   ================================ */

.messages-page {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 0;
    height: calc(100vh - 180px);
    min-height: 500px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

html:has(.messages-page),
body:has(.messages-page) {
    overflow: hidden;
}

/* Sidebar - lista konwersacji */
.messages-sidebar {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border);
    background: var(--surface-muted);
    overflow: hidden;
}

.conversations-list {
    flex: 1;
    overflow-y: auto;
}

.conversation-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: var(--space-sm) var(--space-md);
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
    position: relative;
}

.conversation-item:hover {
    background: var(--surface-subtle);
}

.conversation-item.active {
    background: var(--surface);
    border-left: 3px solid var(--primary);
    padding-left: calc(var(--space-md) - 3px); /* compensate for border */
}

.conversation-item.unread {
    background: var(--conversation-unread-bg);
}

.conversation-item.unread:hover {
    background: var(--conversation-unread-hover-bg);
}

.conversation-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    flex-shrink: 0;
}

.conversation-content {
    flex: 1;
    min-width: 0;
}

.conversation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.conversation-user {
    font-weight: 600;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.verified-badge-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    background: var(--success);
    color: var(--white);
    font-size: 0.5rem;
    border-radius: 50%;
}

.conversation-time {
    font-size: 0.6875rem;
    color: var(--text-muted);
}

.conversation-preview {
    font-size: 0.8125rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.empty-conversations {
    padding: var(--space-xl);
    text-align: center;
    color: var(--text-muted);
}

/* Main - panel czatu */
.messages-main {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    min-width: 0;
    overflow: hidden;
}

.messages-main.empty {
    align-items: center;
    justify-content: center;
}

.no-conversation {
    text-align: center;
    color: var(--text-muted);
    padding: var(--space-xl);
}

.no-conversation-icon {
    color: var(--gray-300);
    margin-bottom: var(--space-md);
}

.no-conversation h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-weak);
}

.no-conversation p {
    font-size: 0.875rem;
}

.new-conversation-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    font-size: 0.875rem;
    text-align: center;
}

/* Chat header */
.chat-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.back-btn {
    display: none;
    width: 36px;
    height: 36px;
    border: none;
    background: var(--surface-subtle);
    border-radius: var(--radius);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: var(--text-weak);
}

.back-btn:hover {
    background: var(--surface-strong);
}

.chat-partner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.partner-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    flex-shrink: 0;
}

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

.partner-name {
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.chat-ad-link {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-ad-link:hover {
    color: var(--link);
    text-decoration: underline;
}

.chat-context-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
}

/* Chat messages - WhatsApp style background */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 6%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background-color: #efeae2;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23d1cfc4' fill-opacity='0.3'%3E%3Ccircle cx='3' cy='3' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
}

[data-theme="dark"] .chat-messages {
    background-color: #0b141a;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23182229' fill-opacity='0.5'%3E%3Ccircle cx='3' cy='3' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* WhatsApp-style message bubbles */
.message {
    display: flex;
    max-width: 65%;
    margin-bottom: 2px;
}

.message.sent {
    align-self: flex-end;
}

.message.received {
    align-self: flex-start;
}

.message-bubble {
    padding: 6px 7px 8px 9px;
    border-radius: 7.5px;
    position: relative;
    box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}

.message.sent .message-bubble {
    background: #d9fdd3;
    color: #111b21;
    border-top-right-radius: 7.5px;
    border-bottom-right-radius: 0;
}

.message.received .message-bubble {
    background: #ffffff;
    color: #111b21;
    border-top-left-radius: 7.5px;
    border-bottom-left-radius: 0;
}

.message-text {
    font-size: 14.2px;
    line-height: 19px;
    word-break: break-word;
    white-space: pre-wrap;
}

.message-text-edit-hidden {
    display: none;
}

.message-actions {
    margin-top: 4px;
    display: flex;
    justify-content: flex-end;
}

.message-edit-btn {
    border: none;
    background: transparent;
    color: #54656f;
    font-size: 12px;
    line-height: 1.2;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}

.message-edit-btn:hover {
    color: #1f2937;
}

.message.is-editing .message-actions {
    display: none;
}

.message-edit-form {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.message-edit-textarea {
    width: 100%;
    min-height: 78px;
    resize: vertical;
    border: 1px solid rgba(17, 27, 33, 0.2);
    border-radius: 6px;
    padding: 8px;
    font: inherit;
    line-height: 1.4;
    background: rgba(255, 255, 255, 0.92);
    color: #111b21;
}

.message-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

.message-edit-save,
.message-edit-cancel {
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.2;
    padding: 5px 9px;
    cursor: pointer;
}

.message-edit-save {
    background: #1f7f4c;
    color: #fff;
}

.message-edit-save:hover {
    background: #17683d;
}

.message-edit-cancel {
    background: transparent;
    border-color: rgba(17, 27, 33, 0.25);
    color: #111b21;
}

.message-edit-cancel:hover {
    background: rgba(17, 27, 33, 0.08);
}

.message-edit-save:disabled,
.message-edit-cancel:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.message-meta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    float: right;
    margin-left: 4px;
    margin-top: 3px;
    position: relative;
    top: 5px;
}

.message-time {
    font-size: 11px;
    color: #667781;
    white-space: nowrap;
}

.message.sent .message-time {
    color: #1d8352;
}

/* Dark mode WhatsApp */
[data-theme="dark"] .message.sent .message-bubble {
    background: #005c4b;
    color: #e9edef;
}

[data-theme="dark"] .message.received .message-bubble {
    background: #202c33;
    color: #e9edef;
}

[data-theme="dark"] .message-time {
    color: #8696a0;
}

[data-theme="dark"] .message.sent .message-time {
    color: #7ac4a1;
}

[data-theme="dark"] .message-edit-btn {
    color: #9fb0ba;
}

[data-theme="dark"] .message-edit-btn:hover {
    color: #d8e2e7;
}

[data-theme="dark"] .message-edit-textarea {
    border-color: #3d4f57;
    background: #0f1c22;
    color: #e9edef;
}

[data-theme="dark"] .message-edit-cancel {
    border-color: #4a5f68;
    color: #d5dee3;
}

[data-theme="dark"] .message-edit-cancel:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Chat input */
.chat-input {
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--border);
    background: var(--surface-muted);
}

.chat-input form {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.chat-input textarea {
    flex: 1;
    resize: none;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    padding: 0.625rem 1rem;
    font-size: 0.9375rem;
    line-height: 1.4;
    max-height: 120px;
    background: var(--surface);
}

.chat-input textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.send-btn {
    width: 44px;
    height: 44px;
    border: none;
    background: var(--primary);
    color: var(--white);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, transform 0.15s;
}

.send-btn:hover {
    background: var(--primary-dark);
    transform: scale(1.05);
}

.send-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Responsywność - mobile */
@media (max-width: 768px) {
    .messages-page {
        grid-template-columns: 1fr;
        height: calc(100vh - 120px);
        height: calc(100dvh - 120px);
        border-radius: 0;
        border: none;
    }

    .messages-sidebar {
        display: flex;
        border-right: none;
    }

    .messages-sidebar.has-active {
        display: none;
    }

    .messages-main {
        display: none;
        flex-direction: column;
        min-height: 0;
    }

    .messages-main:not(.empty) {
        display: flex;
    }

    .back-btn {
        display: flex;
    }

    .chat-header {
        padding: var(--space-sm) var(--space-md);
        flex-shrink: 0;
    }

    .chat-messages {
        padding: var(--space-md);
        flex: 1;
        min-height: 0;
        overflow-y: auto;
    }

    .chat-input {
        padding: var(--space-sm) var(--space-md);
        flex-shrink: 0;
        padding-bottom: calc(var(--space-sm) + env(safe-area-inset-bottom, 0px));
    }

    .message {
        max-width: 85%;
    }

    body.messages-keyboard-open .page-header {
        display: none;
    }

    body.messages-keyboard-open .messages-page {
        height: calc(var(--visual-viewport-height, 100dvh));
        height: calc(var(--visual-viewport-height, 100vh));
        border-radius: 0;
        min-height: auto;
    }

    body.messages-keyboard-open {
        overflow: hidden;
    }
}

/* ================================
   LOCATION FILTER
   ================================ */

.location-filter {
    display: flex;
    gap: var(--space-xs);
    position: relative;
}

.location-filter .location-wrapper {
    flex: 4;
    min-width: 0;
}

.location-filter select {
    flex: 1.3;
    min-width: 85px;
    max-width: 110px;
}

.location-wrapper {
    position: relative;
    display: flex;
    flex: 1;
}

.location-wrapper .location-input {
    width: 100%;
}

.autocomplete-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    background: white;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    max-height: 200px;
    overflow-y: auto;
    display: none;
}

.autocomplete-list.active {
    display: block;
}

.autocomplete-item {
    padding: var(--space-xs) var(--space-sm);
    cursor: pointer;
    border-bottom: 1px solid var(--border);
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.autocomplete-item:hover {
    background: var(--surface-subtle);
}

.autocomplete-item.selected {
    background: var(--primary);
    color: white;
}

.autocomplete-item .city-name {
    display: block;
    font-weight: 500;
}

.autocomplete-item.is-voivodeship {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--surface-muted);
}

.autocomplete-item.is-voivodeship.selected {
    background: var(--primary);
}

.autocomplete-item .item-badge {
    font-size: 0.65rem;
    color: var(--text-muted);
    background: var(--surface-strong);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.autocomplete-item.selected .item-badge {
    color: var(--primary);
    background: white;
}

.mention-input-wrap {
    position: relative;
}

.mention-autocomplete {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 30;
    max-height: 260px;
}

.mention-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mention-avatar {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    object-fit: cover;
    flex-shrink: 0;
}

.mention-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-strong);
    color: var(--text-strong);
    font-size: 0.8rem;
    font-weight: 700;
}

.mention-meta-wrap {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.mention-name {
    font-weight: 600;
    color: var(--text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mention-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.autocomplete-item.selected .mention-name,
.autocomplete-item.selected .mention-meta {
    color: inherit;
}

.mention-help {
    display: block;
    margin-top: 0.35rem;
}

.mention-link {
    color: var(--link);
    font-weight: 600;
    text-decoration: none;
}

.mention-link:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

html[data-theme="dark"] .autocomplete-list {
    background: var(--surface);
    color: var(--text-strong);
    border-color: var(--border);
}

html[data-theme="dark"] .autocomplete-item {
    border-bottom-color: var(--border);
}

html[data-theme="dark"] .autocomplete-item:hover {
    background: var(--surface-strong);
}

html[data-theme="dark"] .autocomplete-item .city-name {
    color: var(--text-strong);
}

html[data-theme="dark"] .autocomplete-item.is-voivodeship {
    background: var(--surface-strong);
}

html[data-theme="dark"] .autocomplete-item .item-badge {
    color: var(--text);
    background: var(--surface-subtle);
}

.location-row {
    flex-wrap: wrap;
}

.location-preview {
    width: 100%;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.location-preview:empty {
    display: none;
}

html[data-theme="dark"] .location-preview {
    color: #cbd5e1;
}

/* ==========================================================================
   Lightbox - pełnoekranowy podgląd zdjęć
   ========================================================================== */

.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

.lightbox.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-content {
    position: relative;
    max-width: 95vw;
    max-height: 95vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-content img {
    max-width: 95vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: var(--radius);
}

.lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    transition: background 0.2s;
    z-index: 10001;
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: background 0.2s;
    z-index: 10001;
}

.lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.2);
}

.lightbox-prev {
    left: 1rem;
}

.lightbox-next {
    right: 1rem;
}

.lightbox-counter {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    z-index: 10001;
}

/* Ukryj nawigację gdy tylko 1 zdjęcie */
.lightbox-nav.hidden,
.lightbox-counter.hidden {
    display: none;
}

/* Cursor na głównym zdjęciu galerii */
.ogl-gallery-main img {
    cursor: zoom-in;
}

/* ================================
   GŁOSOWANIE (vote widget)
   ================================ */
.vote-widget {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.vote-result {
    font-weight: 600;
    min-width: 2ch;
    text-align: right;
    font-size: 0.95rem;
}

.vote-result.positive {
    color: var(--success);
}

.vote-result.negative {
    color: var(--danger);
}

.vote-result.zero {
    color: var(--text-muted);
}

.vote-btn {
    cursor: pointer;
    padding: 0.25rem;
    border: none;
    background: transparent;
    color: var(--text-muted);
    transition: color 0.15s ease;
    line-height: 1;
    min-width: 1.5rem;
    min-height: 1.5rem;
}

.vote-btn svg {
    width: 18px;
    height: 18px;
    display: block;
    fill: currentColor;
}

.vote-btn:hover {
    color: var(--text-weak);
}

.vote-btn.active.up {
    color: var(--success);
}

.vote-btn.active.down {
    color: var(--danger);
}

.vote-btn:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Wersja kompaktowa (komentarze) */
.vote-widget.compact {
    gap: 10px;
}

.vote-widget.compact .vote-result {
    font-size: 0.85rem;
}

.vote-widget.compact .vote-btn {
    min-width: 1.25rem;
    min-height: 1.25rem;
}

.vote-widget.compact .vote-btn svg {
    width: 16px;
    height: 16px;
}


/* ================================
   ADMIN MODERATION
   ================================ */
.moderation-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.moderation-card {
    background: white;
    border-radius: var(--radius-sm);
    padding: 0.5rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.moderation-content {
    display: flex;
    gap: 0.75rem;
    align-items: stretch;
}

/* Miniaturka */
.ad-thumb-wrapper {
    display: block;
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface-subtle);
}

.ad-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Dane ogłoszenia */
.ad-info {
    flex: 0 0 auto;
    width: 360px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.25rem;
}

.moderation-card .ad-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
}

.moderation-card .ad-title .badge {
    flex-shrink: 0;
}

.moderation-card .ad-title a {
    color: var(--text-strong);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.moderation-card .ad-title a:hover {
    color: var(--link);
    text-decoration: underline;
}

.ad-meta {
    display: flex;
    gap: 0.375rem;
    color: var(--text-weak);
    flex-wrap: wrap;
    align-items: center;
    font-size: 0.75rem;
}

.ad-meta .price {
    font-weight: 600;
    color: var(--price-color);
}

.ad-footer {
    display: flex;
    gap: 0.375rem;
    align-items: center;
    flex-wrap: wrap;
    font-size: 0.75rem;
}

/* Opis */
.ad-description {
    flex: 1;
    color: var(--text-weak);
    font-size: 0.75rem;
    line-height: 1.4;
    padding: 0.25rem 0.5rem;
    background: var(--surface-muted);
    border-radius: 3px;
    overflow: hidden;
}

/* Akcje */
.moderation-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Style pomocnicze */
.user-link {
    color: var(--text-weak);
    text-decoration: none;
    font-weight: 500;
}

.user-link:hover {
    color: var(--link);
    text-decoration: underline;
}

.admin-link {
    color: var(--text-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.admin-link:hover {
    color: var(--link);
}

.separator {
    color: var(--text-muted);
}

.inline-form {
    display: inline;
}

.reject-form {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--surface-muted);
    border-radius: var(--radius-md);
}

.reject-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-weak);
}

.reject-form textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    resize: vertical;
    font-family: inherit;
}

.reject-form textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.reject-form .form-actions {
    display: flex;
    gap: 0.75rem;
}

.badge-sell {
    background: var(--badge-sell-bg);
    color: var(--badge-sell-text);
}

.badge-buy {
    background: var(--badge-buy-bg);
    color: var(--badge-buy-text);
}

.badge-exchange {
    background: var(--badge-exchange-bg);
    color: var(--badge-exchange-text);
}

.empty-state-large {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: var(--radius-md);
}

.empty-state-large svg {
    color: var(--gray-300);
    margin-bottom: 1rem;
}

.empty-state-large h2 {
    margin: 0 0 0.5rem;
    color: var(--text-weak);
}

.empty-state-large p {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

@media (max-width: 1024px) {
    .ad-info {
        width: 280px;
    }
}

@media (max-width: 768px) {
    .moderation-content {
        flex-direction: column;
    }

    .ad-info {
        width: 100%;
    }

    .ad-thumb-wrapper {
        width: 100%;
        height: 150px;
    }

    .moderation-actions {
        flex-direction: row;
    }
}

/* ================================
   ADMIN ACCEPT (Moderation Queue)
   ================================ */

/* Nagłówek z tabami */
.accept-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.accept-header h1 {
    margin: 0;
}

/* System zakładek */
.tabs {
    display: flex;
    gap: 0.5rem;
}

.tab {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-strong);
    background: var(--tab-bg);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tab:hover {
    background: var(--surface-muted);
}

.tab.active {
    background: var(--primary);
    color: var(--tab-active-text);
    border-color: var(--primary);
}

.tab .badge {
    background: var(--tab-badge-bg);
    color: var(--tab-badge-text);
    padding: 0.125rem 0.375rem;
    border-radius: 10px;
    font-size: 0.75rem;
}

.tab:not(.active) .badge {
    background: var(--tab-badge-inactive-bg);
    color: var(--tab-badge-inactive-text);
}

/* Zawartość zakładek */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Komentarze w kolejce */
.comment-row {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.comment-main {
    flex: 1;
    min-width: 0;
}

.comment-meta {
    font-size: 0.8rem;
    margin-bottom: 0.375rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.comment-ad-link {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-weak);
}

.comment-box {
    background: var(--surface-muted);
    padding: 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    line-height: 1.4;
}

/* Komentarze w profilu użytkownika */
.user-comments-section {
    padding: 0.5rem 0;
}

.user-comments-section h2 {
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

.user-comments-section h2 a {
    color: inherit;
    text-decoration: none;
}

.user-comments-section h2 a:hover {
    text-decoration: underline;
}

.user-comments-section .comment {
    margin-top: 0.25rem;
}

/* Link kategorii */
.category-link {
    color: var(--text-weak);
    text-decoration: none;
}

.category-link:hover {
    color: var(--link);
    text-decoration: underline;
}

/* ================================
   ADMIN AUDIT LOGS
   ================================ */

.quick-filters {
    background: white;
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.quick-filters-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.quick-filters-group:last-child {
    margin-bottom: 0;
}

.quick-filters-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width: 50px;
}

.quick-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: var(--surface-subtle);
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    color: var(--text-weak);
    text-decoration: none;
    transition: all 0.15s;
}

.quick-filter:hover {
    background: var(--surface-strong);
    color: var(--text-strong);
}

.quick-filter.active {
    background: var(--primary);
    color: white;
}

.quick-filter svg {
    opacity: 0.7;
}

.quick-filter.active svg {
    opacity: 1;
}

.advanced-filters {
    background: white;
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.advanced-filters summary {
    cursor: pointer;
    font-weight: 500;
    color: var(--text-weak);
    font-size: 0.875rem;
}

.advanced-filters summary:hover {
    color: var(--text-strong);
}

.advanced-filters[open] summary {
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.advanced-filters .filters-form {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
}

.advanced-filters .filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.advanced-filters .filter-group label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-weak);
}

.advanced-filters .filter-group select,
.advanced-filters .filter-group input {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    font-size: 0.875rem;
}

.results-count {
    margin: 1rem 0;
}

.field-link {
    text-decoration: none;
}

.field-link:hover code {
    background: var(--primary);
    color: white;
}

.field-link code {
    transition: all 0.15s;
}

@media (max-width: 768px) {
    .quick-filters-group {
        flex-direction: column;
        align-items: flex-start;
    }

    .quick-filters-label {
        margin-bottom: 0.25rem;
    }

    .advanced-filters .filters-form {
        flex-direction: column;
        align-items: stretch;
    }

    .advanced-filters .filter-group {
        width: 100%;
    }

    .advanced-filters .filter-group select,
    .advanced-filters .filter-group input {
        width: 100% !important;
    }

    .filters-attributes > .form-group {
        flex: 1 1 100%;
    }
}

/* ================================
   ADMIN CATEGORY FORM
   ================================ */

.attributes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.attribute-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.75rem;
    background: var(--surface-muted);
    transition: all 0.15s ease;
}

.attribute-item.assigned {
    border-color: var(--primary);
    background: rgba(37, 99, 235, 0.05);
}

.attribute-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.attribute-type {
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--surface-strong);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
}

.attribute-options {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.attr-checkboxes {
    display: flex;
    gap: 1rem;
}

.attr-options-section {
    width: 100%;
}

.options-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

.select-actions {
    font-size: 0.75rem;
}

.select-actions a {
    color: var(--link);
    text-decoration: none;
}

.options-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding: 0.5rem;
    background: var(--surface-subtle);
    border-radius: var(--radius-sm);
}

.attr-new-options textarea {
    font-size: 0.75rem;
    line-height: 1.4;
}

.ancestor-attributes-hint {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.hint-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    background: var(--tag-warning-bg);
    border: 1px solid var(--tag-warning-border);
    border-radius: 6px;
    font-size: 0.8125rem;
    color: var(--tag-warning-text);
}

.hint-tag small {
    font-size: 0.6875rem;
    opacity: 0.75;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.checkbox-label input {
    width: 16px;
    height: 16px;
}

.checkbox-label.small {
    font-size: 0.8125rem;
    color: var(--text-weak);
}

.checkbox-label.small input {
    width: 14px;
    height: 14px;
}

/* ================================
   ADMIN DASHBOARD
   ================================ */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.stat-card {
    background: white;
    border-radius: var(--radius-md);
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.stat-card-small {
    padding: 1rem;
    justify-content: space-between;
}

.stat-card-link {
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s, box-shadow 0.15s;
}

.stat-card-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--stat-icon-bg, var(--surface-subtle));
    color: var(--stat-icon-text, var(--text-weak));
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-strong);
}

.stat-value-small {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-strong);
}

.stat-label {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.admin-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

@media (max-width: 1024px) {
    .admin-grid {
        grid-template-columns: 1fr;
    }
}

.admin-section {
    background: white;
    border-radius: var(--radius-md);
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.admin-divider {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border);
}

.admin-section h2 {
    margin: 0 0 0.25rem;
}

.impersonate-link-input {
    font-family: monospace;
    font-size: 0.9rem;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.section-header h2 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.activity-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.activity-title {
    font-size: 0.875rem;
    color: var(--text-strong);
    margin-bottom: 0.25rem;
}

.activity-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.activity-time {
    color: var(--text-muted);
}

.status-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-full);
    font-size: 0.625rem;
    font-weight: 500;
    text-transform: uppercase;
    background: var(--status-bg, transparent);
    color: var(--status-text, inherit);
}

/* ================================
   ADMIN USER PROFILE
   ================================ */
.user-profile-header {
    background: white;
    padding: 1.5rem;
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.user-info h2 {
    margin: 0 0 0.25rem;
}

.user-badges {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.user-stats {
    display: flex;
    gap: 2rem;
}

.user-stats .stat {
    text-align: center;
}

.user-stats .stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-strong);
}

.user-stats .stat-value.stat-positive {
    color: var(--stat-positive-text);
}

.user-stats .stat-value.stat-negative {
    color: var(--stat-negative-text);
}

.user-stats .stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.two-column-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 1024px) {
    .two-column-layout {
        grid-template-columns: 1fr;
    }
    .user-profile-header {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    .user-stats {
        gap: 1rem;
    }
}

.info-list {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.info-list dt {
    font-weight: 500;
    color: var(--text-weak);
}

.info-list dd {
    margin: 0;
    font-family: monospace;
}

.change-link {
    margin-left: 0.5rem;
    font-size: 0.75rem;
    color: var(--link);
    text-decoration: none;
}

.role-badge {
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
}

.role-A { background: var(--role-admin-bg); color: var(--role-admin-text); }
.role-M { background: var(--role-mod-bg); color: var(--role-mod-text); }
.role-U { background: var(--role-user-bg); color: var(--role-user-text); }

/* ================================
   ADMIN ADS LIST
   ================================ */

/* Modal dla zmiany statusu */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background: var(--surface);
    color: var(--text);
    padding: 1.5rem;
    border-radius: var(--radius-md);
    width: 100%;
    max-width: 400px;
    border: 1px solid var(--border);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.modal-content h3 {
    margin: 0 0 1rem;
}

#report-modal label {
    color: var(--text-weak);
}

.modal-sm {
    max-width: 400px;
}

/* Admin ads - input szukania */
.filter-group input {
    min-width: 250px;
}

/* Admin ads - przyciski akcji inline */
.action-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Admin ads - miniatura w tabeli */
.admin-thumb-link {
    display: inline-flex;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface-subtle);
    border: 1px solid var(--border);
}

.admin-thumb-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.admin-thumb-placeholder {
    width: 100%;
    height: 100%;
    background: var(--surface-subtle);
}

.admin-ad-title {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.admin-ad-title-text {
    min-width: 0;
}

/* Admin tables - text truncation helpers */
.admin-text-truncate {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.admin-text-truncate-sm { max-width: 150px; }
.admin-text-truncate-md { max-width: 220px; }
.admin-text-truncate-lg { max-width: 320px; }

.admin-table .row-warning td {
    background: var(--warning-light);
}

/* ================================
   AUTH FORMS (Login/Register)
   ================================ */
.auth-form {
    max-width: 380px;
    margin: 2.5rem auto;
    padding: 2rem 2rem 1.5rem;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 1;
}
.auth-form h1 {
    font-size: 1.35rem;
    text-align: center;
    margin: 0 0 1.25rem;
    letter-spacing: -0.01em;
}

/* Tło strony logowania/rejestracji */
.main:has(.auth-form) {
    background: var(--surface-muted);
    min-height: calc(100vh - var(--header-height));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg) var(--space-md);
}
.main:has(.auth-form) .auth-form {
    margin: 0;
}
.auth-description {
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-weak);
    margin: 0 0 1rem;
}
.form-group-compact {
    margin-bottom: 0.75rem;
}
.form-group-compact .form-control {
    padding: 0.625rem 0.75rem;
    font-size: 0.9rem;
}
.auth-submit {
    text-align: center;
    margin-top: 1rem;
}
.auth-submit .btn {
    width: 75%;
}
.auth-link {
    text-align: center;
    font-size: 0.875rem;
    margin: 0.75rem 0 0;
}
.auth-link-login {
    margin-top: 1.25rem;
}
.terms-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.65rem;
    color: var(--text-weak);
    cursor: pointer;
    margin: 0.75rem 0;
}
.terms-checkbox input[type="checkbox"] {
    width: 0.85rem;
    height: 0.85rem;
    margin-top: 0;
    cursor: pointer;
    flex-shrink: 0;
}
.terms-checkbox a {
    color: var(--link);
}
.auth-divider {
    text-align: center;
    margin: 1rem 0;
    position: relative;
}
.auth-divider::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: var(--surface-strong);
}
.auth-divider span {
    background: var(--surface);
    padding: 0 0.75rem;
    position: relative;
    color: var(--text-muted);
    font-size: 0.75rem;
}
.member-note {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-align: center;
    margin: 0.5rem 0 0;
}

/* FAQ (Register page) */
.register-faq {
    width: 100%;
    max-width: 360px;
    margin: 2rem auto 1rem;
}
.register-faq h2 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-weak);
    margin-bottom: 0.75rem;
}
.faq-item {
    border-bottom: 1px solid var(--border);
}
.faq-item summary {
    padding: 0.75rem 0;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.faq-item summary::after {
    content: '+';
    font-size: 1.1rem;
    color: var(--text-muted);
    transition: transform 0.2s;
}
.faq-item[open] summary::after {
    content: '−';
}
.faq-item summary::-webkit-details-marker {
    display: none;
}
.faq-item p {
    font-size: 0.8rem;
    color: var(--text-weak);
    line-height: 1.5;
    padding: 0 0 0.75rem;
    margin: 0;
}

/* ================================
   ADMIN LOCATIONS
   ================================ */
.locations-list {
    max-height: 500px;
    overflow-y: auto;
}

.location-group h4 {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--link);
    text-transform: capitalize;
}

.location-group ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.location-group li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--border);
}

.btn-link {
    background: none;
    border: none;
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0;
}

.btn-danger-link {
    color: var(--state-danger-text);
}

/* ================================
   ADMIN USERS LIST
   ================================ */

/* Sortowanie w nagłówkach tabeli */
.admin-table th {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.admin-table th:hover { background: var(--surface-subtle); }
.admin-table th:last-child { cursor: default; }
.admin-table th:last-child:hover { background: var(--surface-muted); }

.sort-icon { opacity: 0.3; margin-left: 0.25rem; }
.sort-icon::after { content: '↕'; }
.admin-table th.asc .sort-icon { opacity: 1; }
.admin-table th.asc .sort-icon::after { content: '↑'; }
.admin-table th.desc .sort-icon { opacity: 1; }
.admin-table th.desc .sort-icon::after { content: '↓'; }

/* Komórka z userem */
.user-cell { display: flex; align-items: center; gap: 0.5rem; }

/* Badge jako okrągły icon (18x18px) */
.badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 0.625rem;
    font-weight: 600;
}

/* ================================
   ADMIN FORMS (Role/Status)
   ================================ */

/* Role/Status options list */
.role-options, .status-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.role-option-form, .status-option-form {
    margin: 0;
    padding: 0;
}

.role-option, .status-option {
    padding: 1rem;
    border: 2px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--role-option-bg);
    transition: all 0.2s;
}

.role-option.role-clickable, .status-option.status-clickable {
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.role-option.role-clickable:hover, .status-option.status-clickable:hover {
    border-color: var(--primary);
    background: var(--role-option-hover-bg);
}

.role-option.role-current, .status-option.status-current {
    background: var(--role-option-current-bg);
    border-color: var(--text-muted);
    cursor: default;
}

.role-label, .status-label {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.25rem;
    color: var(--text-strong);
}

.role-desc, .status-desc {
    font-size: 0.875rem;
    color: var(--text-weak);
}

/* ================================
   ADMIN ATTRIBUTES
   ================================ */

/* Category tags in attribute form */
.categories-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.category-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    background: var(--surface-subtle);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
}

.category-tag a {
    color: inherit;
    text-decoration: none;
}

.badge-info { --badge-bg: var(--badge-info-bg); }
.badge-options { --badge-bg: var(--badge-options-bg); }

/* Admin table code elements */
.admin-table code {
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--surface-subtle);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
}

/* ================================
   ADMIN CATEGORIES
   ================================ */

.indent {
    color: var(--text-muted);
    margin-right: 0.5rem;
    font-family: monospace;
}

/* Category row deleted state */
tr.deleted {
    opacity: 0.6;
    background: var(--surface-subtle);
}

/* ================================
   ADMIN DECISIONS
   ================================ */

/* Inline filters form */
.admin-layout .form-inline-filters .form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}

.admin-layout .form-inline-filters .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.admin-layout .form-inline-filters .form-group label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Review decisions */
.review-card {
    border-left: 4px solid var(--warning);
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.review-date {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-left: 0.5rem;
}

.review-karma {
    font-size: 1.5rem;
    font-weight: bold;
}

.review-karma small {
    font-size: 0.75rem;
    font-weight: normal;
}

.karma-negative {
    color: var(--danger);
}

.review-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.review-change h4 {
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.value-old {
    text-decoration: line-through;
    color: var(--text-muted);
    padding: 0.25rem 0.5rem;
    background: var(--surface-muted);
    border-radius: var(--radius-sm);
}

.value-new {
    color: var(--link);
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    background: rgba(37, 99, 235, 0.1);
    border-radius: var(--radius-sm);
}

.review-meta p {
    margin-bottom: 0.25rem;
}

.review-explanation {
    padding: 1rem;
    background: var(--surface-muted);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
}

.review-explanation h5 {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.review-explanation ul {
    margin-bottom: 0;
    padding-left: 1.25rem;
}

.review-explanation li {
    margin-bottom: 0.25rem;
}

.review-actions {
    display: flex;
    gap: 0.75rem;
}

.badge-outline {
    --badge-bg: transparent;
    --badge-text: var(--text-muted);
    --badge-border: 1px solid var(--border-strong);
}

@media (max-width: 768px) {
    .review-details {
        grid-template-columns: 1fr;
    }
    .review-actions {
        flex-direction: column;
    }
}

/* ================================
   USER PUBLIC PROFILE
   ================================ */
.profile-header.public {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    align-items: flex-start;
}
.profile-info { flex: 1; }
.profile-info h1 { margin-bottom: 0.25rem; font-size: 1.5rem; }
.profile-actions.user { align-self: flex-start; }

.brat-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
    display: none;
}

.brat-panel.is-open {
    display: block;
}

.brat-panel-header h2 {
    margin-bottom: 0.25rem;
}

.brat-panel-header p {
    margin-bottom: var(--space-md);
}

.brat-score-line {
    font-weight: 600;
    color: var(--text);
    margin-bottom: var(--space-sm);
}

.brat-score-value {
    font-weight: 600;
    color: var(--text-strong);
}

.brat-verification-status {
    font-weight: 600;
    color: var(--success);
    margin-bottom: 0.5rem;
}

.brat-verification-page h3 {
    margin-top: var(--space-md);
    margin-bottom: var(--space-sm);
}

.brat-verification-page ul {
    margin-left: 1.25rem;
}

.brat-verification-page .text-muted {
    margin-left: 1.25rem;
}

@media (max-width: 768px) {
    .profile-header.public { flex-direction: column; text-align: center; }
}

/* Loveblock page (unified favorites/blocked) */
.section-title { font-size: 1.25rem; margin-bottom: 0.5rem; }
.loveblock-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    overflow: hidden;
    background: white;
}
.loveblock-table th,
.loveblock-table td {
    padding: 0.875rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}
.loveblock-table th {
    background: var(--surface-strong);
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    border-bottom: 2px solid var(--border-strong);
}
.loveblock-table tbody tr:nth-child(odd) { background: var(--loveblock-row-odd-bg); }
.loveblock-table tbody tr:nth-child(even) { background: var(--surface-muted); }
.loveblock-table tbody tr:hover { background: var(--surface-subtle); }
.loveblock-table tr:last-child td { border-bottom: none; }
.loveblock-link { color: var(--text-strong); font-weight: 500; }
.loveblock-link:hover { color: var(--primary); text-decoration: none; }
.loveblock-link {
    display: inline-block;
    max-width: 100%;
    word-break: break-word;
}
.loveblock-meta {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
}
.loveblock-meta .separator {
    margin: 0 0.375rem;
}
.loveblock-date { font-size: 0.875rem; white-space: nowrap; width: 110px; }
.loveblock-actions { text-align: right; width: 60px; }
.loveblock-table-users .loveblock-date { width: auto; }
.loveblock-users-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 768px) {
    .loveblock-users-grid {
        grid-template-columns: 1fr;
    }
}
.loveblock-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--loveblock-btn-bg);
    cursor: pointer;
    transition: all 0.15s;
}
.loveblock-btn:hover { background: var(--surface-muted); }
.loveblock-btn-love { color: var(--text-muted); }
.loveblock-btn-love.active { color: var(--favorite); border-color: var(--favorite); background: rgba(239, 68, 68, 0.05); }
.loveblock-btn-love:hover { color: var(--favorite); border-color: var(--favorite); }
.loveblock-btn-block { color: var(--text-muted); }
.loveblock-btn-love.active { color: var(--favorite); border-color: var(--favorite); background: var(--loveblock-favorite-bg); }
.loveblock-btn-block.active { color: var(--loveblock-block-text); border-color: var(--loveblock-block-border); background: var(--loveblock-block-bg); }
.loveblock-btn-block:hover { color: var(--loveblock-block-text); border-color: var(--loveblock-block-border); }
.loveblock-btn-delete { color: var(--text-muted); }
.loveblock-btn-delete:hover { color: var(--danger); border-color: var(--danger); }
.saved-search-summary {
    max-width: 460px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.saved-search-summary code {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}
.saved-searches-table .loveblock-actions {
    width: 170px;
    white-space: nowrap;
}
.saved-searches-table .loveblock-actions .btn {
    margin-right: 0.4rem;
}

/* ================================
   CONTENT PAGES (Privacy, Terms)
   ================================ */

.content-page h1 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
    color: var(--text-strong);
}

.last-updated {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin-bottom: 2rem;
}

.toc {
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.toc h3 {
    margin: 0 0 1rem;
    font-size: 1rem;
}

.toc ol {
    margin: 0;
    padding-left: 1.5rem;
    line-height: 1.8;
}

.toc a {
    color: var(--link);
    text-decoration: none;
}

.content-page section {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
}

.content-page section:last-child {
    border-bottom: none;
}

.content-page h2 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: var(--text);
    padding-left: 0.75rem;
    border-left: 3px solid var(--primary);
}

.content-page h3 {
    font-size: 1rem;
    margin: 1rem 0 0.5rem;
    color: var(--text-weak);
}

.content-page ol {
    padding-left: 1.5rem;
}

.content-page li {
    margin-bottom: 0.75rem;
}

.content-page ul {
    padding-left: 1.5rem;
}

.content-page strong {
    color: var(--text);
}

.content-page a {
    color: var(--link);
}

.company-info {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 0.5rem 1rem;
    background: var(--surface-muted);
    padding: 1rem 1.25rem;
    border-radius: 6px;
    margin: 1rem 0;
}

.company-info dt {
    font-weight: 500;
    color: var(--text-weak);
}

.company-info dd {
    margin: 0;
}

/* ================================
   MODERATION HISTORY (PUBLIC)
   ================================ */
.form-inline-filters .form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}
.form-inline-filters .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.form-inline-filters .form-group label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.decisions-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.decision-item {
    background: var(--decision-card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
}

.decision-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}
.decision-meta {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    font-size: 0.9rem;
}
.decision-date {
    color: var(--text-muted);
}
.decision-date::before {
    content: "· ";
}

.decision-content {
    font-size: 0.95rem;
}
.decision-action {
    color: var(--text-muted);
}
.decision-action::after {
    content: ": ";
}
.decision-content a {
    color: var(--link);
    font-weight: 500;
}

/* Wyraźniejsze przyciski głosowania */
.decision-item .vote-widget {
    background: var(--surface-subtle);
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    gap: var(--space-4);
}
.decision-item .vote-btn {
    width: 26px;
    height: 26px;
    border-radius: var(--radius-sm);
    background: var(--vote-btn-bg);
    border: 1px solid var(--border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}
.decision-item .vote-btn:hover:not(:disabled) {
    background: var(--surface-strong);
}
.decision-item .vote-btn.active.up {
    background: var(--success);
    color: var(--vote-btn-active-text);
    border-color: var(--success);
}
.decision-item .vote-btn.active.down {
    background: var(--danger);
    color: var(--vote-btn-active-text);
    border-color: var(--danger);
}
.decision-reasons {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
}
.decision-note {
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: var(--bg-muted);
    border-left: 3px solid var(--border-color);
    border-radius: 0 4px 4px 0;
    font-size: 0.875rem;
}

.decision-descriptions {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
}

.reporter-comment {
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--border-color);
}

.reporter-comment:last-child {
    border-bottom: none;
}

.reporter-name {
    font-weight: 500;
    color: var(--text-muted);
    margin-right: 0.25rem;
}

.reporter-text {
    color: var(--text);
}

/* Reports table */
.reports-table {
    table-layout: fixed;
    width: 100%;
}

.reports-table .report-description {
    white-space: pre-wrap;
    word-wrap: break-word;
}

.reports-table .resolution-note {
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: var(--gray-100);
    border-radius: 4px;
    font-size: 0.8125rem;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Reports list table */
.reports-list-table {
    table-layout: fixed;
    width: 100%;
}

.reports-list-table td,
.reports-list-table th {
    padding: 0.55rem 0.5rem;
    vertical-align: top;
    line-height: 1.3;
}

.reports-list-table .report-info-cell {
    font-size: 0.75rem;
}

.reports-list-table .report-info-cell .badge {
    display: inline;
    margin-right: 0.125rem;
}

.reports-list-table .report-descriptions-cell {
    font-size: 0.75rem;
}

.reports-list-table .report-desc-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.reports-list-table .report-desc-link:hover {
    background: var(--gray-100);
}

.reports-list-table .report-desc-item {
    padding: 0.125rem 0;
}

.reports-list-table .resolution-note-item {
    padding: 0.125rem 0;
    color: var(--text-muted);
    font-style: italic;
}

/* Report details - ad preview */
.report-ad-preview {
    display: flex;
    gap: 1rem;
}

.report-ad-thumb {
    width: 120px;
    height: 90px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.report-ad-info {
    flex: 1;
    min-width: 0;
}

.report-ad-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.report-ad-title a {
    color: var(--text);
}

.report-ad-price {
    margin-left: 0.5rem;
    color: var(--success);
}

.report-ad-meta {
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
}

.report-ad-meta > * {
    margin-right: 0.5rem;
}

.report-ad-stats {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.report-ad-stats > span {
    margin-right: 0.75rem;
}

.report-ad-desc {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Button group toggle (radio as buttons) */
.btn-group-toggle {
    display: inline-flex;
    gap: 0.25rem;
}

.btn-group-toggle label {
    cursor: pointer;
    margin: 0;
}

.btn-group-toggle input[type="radio"] {
    display: none;
}

.btn-group-toggle input[type="radio"]:checked + label,
.btn-group-toggle label:has(input:checked) {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}

/* Report detail table (simple) */
.report-detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.report-detail-table th,
.report-detail-table td {
    padding: 0.375rem 0.5rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    vertical-align: top;
}

.report-detail-table th {
    font-weight: 600;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* ================================
   UTILITIES
   ================================ */
.d-inline { display: inline; }
.d-flex { display: flex; }
.hidden { display: none; }

.max-w-600 { max-width: 600px; }
.max-w-700 { max-width: 700px; }
.max-w-800 { max-width: 800px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.my-2 { margin-top: 1rem; margin-bottom: 1rem; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; }
.mb-1,
.attr-options-checkboxes,
.toc li,
.content-page ul li { margin-bottom: 0.5rem; }
.mb-2,
.reject-form .form-group,
.location-group,
.content-page p { margin-bottom: 1rem; }
.mb-3,
.empty-state-text,
.tabs.mb-4 { margin-bottom: 1.5rem; }
.mb-4,
.timeline-header,
.loveblock-section,
.auction-section { margin-bottom: 2rem; }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-muted-light { color: var(--text-weak); }
.text-muted,
.ogl-meta-label,
.verification-status-unverified .verification-icon,
.options-label { color: var(--text-muted); }

.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 0.5rem; }

.font-size-1-5 { font-size: 1.5rem; }
.font-size-1-2 { font-size: 1.2rem; }
.font-size-1-1 { font-size: 1.1rem; }
.font-size-4 { font-size: 4rem; }

.overflow-y-hidden { overflow-y: hidden; }
.resize-vertical { resize: vertical; }

.max-w-200 { max-width: 200px; }

/* Info boxes dla strony kontakt */
.info-box {
    padding: 1.5rem;
    border-radius: var(--radius-sm);
    border-left: 4px solid;
    background: var(--info-box-bg, transparent);
    border-left-color: var(--info-box-border, currentColor);
}
.info-box-blue {
    --info-box-bg: var(--info-box-blue-bg);
    --info-box-border: var(--info-box-blue-border);
}
.info-box-yellow {
    --info-box-bg: var(--warning-light);
    --info-box-border: var(--info-box-yellow-border);
}
.claude-love-box {
    background: var(--claude-love-bg);
    padding: 1rem;
    border-radius: var(--radius-sm);
    border: 2px solid var(--claude-love-border);
}

/* Error trace box */
.error-trace {
    padding: 1rem;
    background: var(--error-trace-bg);
    color: var(--error-trace-text);
    border-radius: var(--radius-md);
    font-family: monospace;
    font-size: 0.85rem;
    overflow-x: auto;
}

/* Stat icon colors */
.stat-icon-primary {
    --stat-icon-bg: var(--primary-light);
    --stat-icon-text: var(--link);
}
.stat-icon-yellow {
    --stat-icon-bg: var(--warning-light);
    --stat-icon-text: var(--stat-icon-yellow-text);
}
.stat-icon-pink {
    --stat-icon-bg: var(--stat-icon-pink-bg);
    --stat-icon-text: var(--stat-icon-pink-text);
}
.stat-icon-green {
    --stat-icon-bg: var(--success-light);
    --stat-icon-text: var(--stat-icon-green-text);
}
.stat-icon-indigo {
    --stat-icon-bg: var(--info-light);
    --stat-icon-text: var(--stat-icon-indigo-text);
}

/* ================================
   AUCTION WIDGET (compact)
   ================================ */
.auction-widget {
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    margin: 1rem 0;
    text-align: center;
}

.auction-widget .auction-timer {
    font-size: 0.9em;
    color: var(--text-weak);
    margin-bottom: 0.75rem;
}

.auction-widget .countdown {
    font-family: monospace;
    font-weight: bold;
    color: var(--warning);
}

.auction-widget .btn-bid {
    font-size: 1.1em;
    font-weight: bold;
}

.auction-widget .auction-status {
    padding: 0.5rem;
    margin: 0.5rem 0;
    border-radius: var(--radius-sm);
    font-size: 0.85em;
    font-weight: 600;
}

.auction-widget .auction-status.winning {
    background: var(--success-light);
    color: var(--success);
}

.auction-widget .auction-status.outbid {
    background: var(--warning-light);
    color: var(--auction-outbid-text);
}

.auction-widget .auction-status.owner {
    background: var(--surface-subtle);
    color: var(--text-weak);
}

.auction-widget .auction-status.restricted {
    background: var(--danger-light);
    color: var(--danger);
}

.auction-widget .auction-stats {
    font-size: 0.85em;
    color: var(--text-muted);
    margin-top: 0.75rem;
}

.bid-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85em;
    margin-top: 0.5rem;
}

.bid-table thead th {
    text-align: left;
    padding: 0.5rem;
    font-weight: 600;
    color: var(--text-weak);
    border-bottom: 2px solid var(--border-strong);
}

.bid-table tbody tr {
    border-bottom: 1px solid var(--border);
}

.bid-table tbody tr:nth-child(even) {
    background-color: var(--surface-subtle);
}

.bid-table tbody tr:hover {
    background-color: var(--surface-strong);
}

.bid-table td {
    padding: 0.5rem;
}

.bid-table .bid-user {
    font-weight: 500;
}

.bid-table .bid-amount {
    font-weight: bold;
    color: var(--price-color);
    white-space: nowrap;
}

.bid-table .bid-time {
    color: var(--text-muted);
    font-size: 0.9em;
    white-space: nowrap;
}

/* Bid Confirm Page */
.bid-confirm-page .card-header {
    position: relative;
}

.bid-confirm-page .back-link {
    display: block;
    color: var(--cta);
    text-decoration: none;
    font-size: 0.9em;
    margin-bottom: 0.5rem;
}

.bid-confirm-page .back-link:hover {
    color: var(--cta-hover);
}

.bid-min-step {
    font-size: 0.85em;
    color: var(--text-muted);
    padding: 0.25rem 0 0.5rem 0;
}

.bid-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
}

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

.bid-summary-row .label {
    color: var(--text-weak);
}

.bid-summary-row .value {
    font-weight: 600;
}

.bid-summary-row .value.price {
    font-size: 1.25em;
    color: var(--price-color);
}

.bid-input-row {
    margin-top: 0.5rem;
    padding: 0.75rem 0;
}

.bid-input-row .bid-input {
    width: auto;
    min-width: 100px;
    max-width: 150px;
    font-size: 1.1em;
    text-align: right;
    padding: 0.5rem;
}

/* Collapsible bid explanation */
.bid-explanation {
    margin: 1.5rem 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.bid-explanation summary {
    padding: 0.75rem 1rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--text-weak);
    background: var(--surface-muted);
}

.bid-explanation summary:hover {
    background: var(--surface-subtle);
}

.bid-explanation-content {
    padding: 1rem;
    font-size: 0.9em;
    line-height: 1.6;
}

.bid-explanation-content p {
    margin: 0.5rem 0;
}

.bid-explanation-content .example {
    background: var(--surface-muted);
    padding: 0.75rem;
    border-radius: var(--radius-sm);
    margin: 0.75rem 0;
}

.bid-explanation-content .warning {
    color: var(--danger);
    font-size: 0.85em;
}

.checkbox-label {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    cursor: pointer;
}

.checkbox-label input {
    margin-top: 0.25rem;
}

/* Bid form actions */
.bid-form-actions {
    display: flex;
    justify-content: flex-end;
}

.bid-form-actions .btn-confirm {
    width: auto;
    max-width: 150px;
    min-width: 100px;
}

.btn-confirm {
    flex: 2;
    background: var(--success);
    color: var(--white);
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: var(--radius);
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
}

.btn-confirm:hover {
    background: var(--btn-confirm-hover-bg);
}

/* ================================
   AUCTION DASHBOARD (user profile)
   ================================ */

/* Sekcje aukcji */
.auction-section .section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.auction-section .section-title h2 {
    margin: 0;
    font-size: 1.25rem;
}

/* Pusty stan inline */
.empty-state-inline {
    padding: 1.5rem;
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
}

/* Metadata aukcji */
.auction-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.875rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}

.auction-meta .countdown {
    font-weight: 600;
    color: var(--danger);
}

/* Wskaźniki statusu aukcji */
.my-ogl-card.auction-winning {
    border-left: 3px solid var(--success);
}

.my-ogl-card.auction-outbid {
    border-left: 3px solid var(--warning);
}

.my-ogl-card.auction-won {
    border-left: 3px solid var(--success);
}

.my-ogl-card.auction-lost {
    opacity: 0.7;
}

/* ===== Tap-tooltip (mobile: tap → tooltip dla [title]) ===== */
time[title] {
    color: var(--text-muted);
}

.tap-tooltip {
    background: var(--tooltip-bg);
    color: var(--tooltip-text);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    font-size: 12px;
    z-index: 9999;
    max-width: min(280px, calc(100vw - 16px));
    overflow-wrap: anywhere;
    pointer-events: none;
}

.tappable {
    cursor: help;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-color: var(--text-muted);
    text-underline-offset: 2px;
}

/* Read status (checkmarks) - WhatsApp style */
.message-status {
    font-size: 14px;
    color: #667781;
    margin-left: 3px;
    letter-spacing: -5px;
}

.message.sent .message-status {
    color: #1d8352;
}

.message-status.read {
    color: #53bdeb;
}

[data-theme="dark"] .message-status {
    color: #8696a0;
}

[data-theme="dark"] .message.sent .message-status {
    color: #7ac4a1;
}

[data-theme="dark"] .message-status.read {
    color: #53bdeb;
}

/* ═══════════════════════════════════════════════════════════════════
   4K ENHANCEMENT (min-width: 2560px)
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 2560px) {
    :root {
        --container-max: 1800px;
        --space-md: 1.25rem;
        --space-lg: 2rem;
    }

    .container {
        padding-inline: var(--space-lg);
    }

    /* Większe karty na 4K */
    .card, .ad-card {
        padding: var(--space-lg);
    }

    /* Większe przyciski */
    .btn {
        padding: var(--space-sm) var(--space-lg);
    }
}
/* Multi-location tags */
.location-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}
.location-tag {
    background: var(--bg-secondary, #f0f0f0);
    padding: 0.125rem 0.5rem;
    border-radius: 3px;
    font-size: 0.875rem;
}

/* Brat error page */
.brat-error {
    max-width: 600px;
    margin: 60px auto;
    text-align: center;
}

.brat-error p {
    font-size: 1.1em;
    margin: 24px 0;
    color: var(--text-secondary);
}

.brat-error-btn {
    font-size: 1.1em;
    padding: 12px 32px;
}

/* ==========================================================================
   Notifications Badge (in user menu)
   ========================================================================== */

/* Badge przy nazwie użytkownika */
.notifications-badge {
    background: #e74c3c;
    color: #fff;
    font-size: 0.65rem;
    padding: 0.1rem 0.35rem;
    border-radius: 8px;
    min-width: 0.9rem;
    text-align: center;
    margin-left: 0.25rem;
    font-weight: 600;
}

/* Badge w menu przy pozycji Powiadomienia */
.notifications-menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notifications-menu-badge {
    background: #e74c3c;
    color: #fff;
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    border-radius: 8px;
    min-width: 1rem;
    text-align: center;
    font-weight: 600;
}

/* ==========================================================================
   Notifications Page
   ========================================================================== */

.notifications-page-list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.notification-page-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem;
    position: relative;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
}

.notification-page-item.unread {
    background: var(--info-light);
    border-color: var(--border-strong);
}

.notification-page-date {
    --notification-page-date-width: clamp(100px, 11ch, 14ch);
    flex: 0 0 auto;
    min-inline-size: var(--notification-page-date-width);
    white-space: nowrap;
    color: var(--text-weak);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.notification-page-content {
    flex: 1 1 auto;
    min-width: 0;
}

.notification-page-text {
    color: var(--text-strong);
    line-height: 1.35;
}

.notification-page-message {
    color: var(--text-muted);
    line-height: 1.4;
}

.notification-page-separator {
    color: var(--text-muted);
}

.notification-page-link {
    white-space: nowrap;
    color: var(--link);
    margin-left: auto;
    text-decoration: none;
}

.notification-page-link:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

@media (max-width: 600px) {
    .notifications-panel {
        width: 280px;
    }

    .notification-page-item {
        flex-wrap: wrap;
        align-items: flex-start;
        padding-right: 4.8rem;
    }

    .notification-page-date {
        min-width: 0;
        min-inline-size: 0;
    }

    .notification-page-link {
        position: absolute;
        top: 0.3rem;
        right: 0.3rem;
        margin-left: 0;
    }
}

/* Contact reveal */
.contact-reveal-btn {
    font-size: 0.875rem;
}

.contact-reveal-btn .spinner-small {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid #ccc;
    border-top-color: #333;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 4px;
    vertical-align: middle;
}

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

.contact-reveal-btn .reveal-countdown {
    font-variant-numeric: tabular-nums;
    min-width: 2ch;
    display: inline-block;
}

.contact-restricted {
    color: #999;
    cursor: help;
    border-bottom: 1px dotted #999;
}

.contact-phone {
    font-family: monospace;
    letter-spacing: 0.5px;
}

.contact-email {
    word-break: break-all;
}

/* Back to top */
.back-to-top {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: var(--primary);
    color: var(--text-inverse);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
    z-index: 1000;
}

.back-to-top.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.back-to-top:hover {
    background: var(--primary-dark);
}

.back-to-top:focus-visible {
    outline: 2px solid var(--primary-light);
    outline-offset: 2px;
}

:root[data-theme="dark"] .back-to-top {
    background: var(--text);
    color: var(--bg);
}

:root[data-theme="dark"] .back-to-top:hover {
    background: var(--text-strong);
}

/* =============================================================================
   MESSAGE ATTACHMENTS
   ============================================================================= */

.attachment-preview {
    padding: 8px 12px;
    background: var(--bg-secondary, #f5f5f5);
    border-top: 1px solid var(--border, #e0e0e0);
}

.attachment-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.attachment-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--bg, #fff);
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 6px;
    font-size: 13px;
}

.attachment-item img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
}

.attachment-item .remove-attachment {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    background: var(--danger, #dc3545);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.attachment-item.uploading {
    opacity: 0.6;
}

.message-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

.attachment-image {
    display: block;
    max-width: 200px;
}

.attachment-image img {
    max-width: 100%;
    border-radius: 6px;
}

.attachment-file {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(0,0,0,0.05);
    border-radius: 6px;
    color: inherit;
    text-decoration: none;
    font-size: 13px;
}

.attachment-file:hover {
    background: rgba(0,0,0,0.1);
}

.attach-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    cursor: pointer;
    color: var(--text-muted, #6c757d);
    transition: color 0.2s;
    flex-shrink: 0;
}

.attach-btn:hover {
    color: var(--primary, #007bff);
}

.attach-btn input[type="file"] {
    display: none;
}

.message-input-row {
    display: flex;
    align-items: flex-end;
    gap: var(--space-sm);
    width: 100%;
}

/* Archive banner */
.archive-banner {
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-left: 4px solid #888;
    padding: 12px 16px;
    margin-bottom: 20px;
    color: #666;
    border-radius: 4px;
}

/* Similar ads section */
.similar-ads-section {
    max-width: 900px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.similar-ads-section .section-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--text-muted);
}

.similar-ads-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.similar-ad-card {
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s;
}

.similar-ad-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.similar-ad-img {
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--bg-muted, #f5f5f5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.similar-ad-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.similar-ad-noimg {
    font-size: 1.5rem;
    opacity: 0.4;
}

.similar-ad-title {
    padding: 0.4rem 0.5rem 0.2rem;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.similar-ad-price {
    padding: 0 0.5rem 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--price-color);
}

@media (max-width: 640px) {
    .similar-ads-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Posting restrictions checkbox grid */
.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 4px 8px;
}

.checkbox-grid .checkbox-inline {
    font-size: 0.85rem;
    white-space: nowrap;
}