* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, #0c0c0c 0%, #1a1a1a 100%);
    color: #ffffff;
    min-height: 100vh;
}



/* LOGIN SCREEN */
.login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #0c0c0c 0%, #1a1a1a 100%);
}

.login-box {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 400px;
    text-align: center;
}

.login-title {
    font-size: 2.5rem;
    font-weight: 900;
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 30px;
    letter-spacing: -1px;
    line-height: 1.1;
}

.form-group {
    margin-bottom: 20px;
    text-align: left;
}

/* Form with icon style */
.form-group-with-icon {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    text-align: left;
}

/* Inline group for Year + Genre */
.form-group-inline {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.form-group-inline .form-group-with-icon {
    flex: 1;
    margin-bottom: 0;
}

.form-group-with-icon .icon-svg {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    fill: rgba(255, 255, 255, 0.6);
    transition: fill 0.2s ease;
}

.form-group-with-icon .form-content {
    flex: 1;
}

.form-group-with-icon:focus-within .icon-svg {
    fill: #ff6b6b;
}

/* === EDIT MODAL - COMPACT LAYOUT === */
.edit-layout-container {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
}

.edit-fields-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.edit-compact-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.edit-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
}

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

.edit-compact-input {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    padding: 8px 12px;
    color: white;
    font-size: 13px;
    flex: 1;
    transition: all 0.2s;
}

.edit-compact-input:focus {
    outline: none;
    border-color: rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.08);
}

.edit-compact-textarea {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    padding: 8px 12px;
    color: white;
    font-size: 13px;
    flex: 1;
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
}

.edit-compact-textarea:focus {
    outline: none;
    border-color: rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.08);
}

/* EDIT Modal Buttons - font styling matches settings-btn */
/* 🔧 FIX: Ensure label elements have same styling as buttons (labels inherit differently) */
label.edit-upload-btn,
label.edit-enrich-btn {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.edit-upload-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px !important;
    gap: 8px;
    white-space: nowrap;
    background: #4CAF50;
    color: white;
    flex: 1;
}

.edit-upload-btn:hover {
    background: #45a049;
}

.edit-enrich-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px !important;
    gap: 8px;
    white-space: nowrap;
    background: #f97316;
    color: white;
    flex: 1;
}

.edit-enrich-btn:hover {
    background: #ea580c;
}

.edit-link-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    font-weight: 500;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    gap: 8px;
    white-space: nowrap;
    background: #569ea6;
    color: white;
}

.edit-link-btn:hover {
    background: #6bb8c0;
}

/* Rating letters (G, H, R, L, I, M, D, C, S) */
.edit-rating-letter {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 600;
    font-size: 18px;
    min-width: 24px;
    text-align: center;
}

/* EDIT Modal - Podgląd plakatu/okładki */
.edit-poster-preview {
    width: 200px;
    height: 300px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 0;
}

.edit-poster-preview.music {
    width: 300px;
    height: 300px;
}

.edit-poster-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.edit-poster-preview.empty {
    font-size: 48px;
    color: rgba(255,255,255,0.2);
}

.form-label {
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    font-size: 14px;
}

.form-input {
    width: 100%;
    padding: 15px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: white;
    font-size: 16px;
    transition: all 0.3s;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
}

.form-input:focus {
    outline: none;
    border-color: #ff6b6b;
    box-shadow: 0 0 20px rgba(255, 107, 107, 0.2);
}

.form-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.btn {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 12px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-primary {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
    color: white;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(255, 107, 107, 0.4);
}

.btn-primary:active {
    transform: translateY(-1px);
    background: linear-gradient(135deg, #e55555 0%, #d44413 100%);
}

.btn.active {
    background: rgba(255,107,107,.2) !important;
    border-color: #ff6b6b !important;
    color: #ff6b6b !important;
}

.alert {
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: center;
    font-size: 14px;
}

.alert-error {
    background: rgba(239, 68, 68, 0.1);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.alert-success {
    background: rgba(16, 185, 129, 0.1);
    color: #6ee7b7;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

/* LOGIN SCREEN */
.login-container {
    background: linear-gradient(135deg, #0c0c0c 0%, #1a1a1a 100%);
    min-height: 100vh;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.login-container.show {
    display: flex;
}

.login-box {
    background: rgba(30, 30, 30, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 40px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(20px);
}

.login-header {
    text-align: center;
    margin-bottom: 30px;
}

.login-header h1 {
    font-size: 2.5rem;
    font-weight: 900;
    margin: 0 0 5px 0;
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -1px;
}

.login-header p {
    color: #9ca3af;
    font-size: 1rem;
    margin: 0;
}

.login-form {
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    color: #e5e7eb;
    font-weight: 500;
    margin-bottom: 8px;
}

.login-btn {
    width: 100%;
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.login-btn:hover {
    background: linear-gradient(135deg, #ee5a24, #d63031);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(238, 90, 36, 0.3);
}

.login-status {
    margin-top: 15px;
    padding: 12px;
    border-radius: 6px;
    text-align: center;
    font-size: 0.95rem;
    min-height: 24px;
    display: block;
    word-wrap: break-word;
    /* Better mobile visibility */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.login-status.error {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    border: 2px solid rgba(239, 68, 68, 0.3);
}

.login-status.success {
    background: rgba(16, 185, 129, 0.15);
    color: #6ee7b7;
    border: 2px solid rgba(16, 185, 129, 0.3);
}

.login-help {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    padding: 15px;
    margin-top: 20px;
}

.login-help p {
    color: #bfdbfe;
    margin: 5px 0;
    font-size: 0.9rem;
}

.login-help code {
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 6px;
    border-radius: 4px;
    color: #fbbf24;
    font-family: 'Courier New', monospace;
}

.remember-me {
    margin-bottom: 15px !important;
}

.remember-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.9rem;
    color: #d1d5db;
    user-select: none;
}

.remember-checkbox input[type="checkbox"] {
    display: none;
}

.remember-checkbox .checkmark {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    background: rgba(55, 65, 81, 0.8);
    border: 2px solid rgba(156, 163, 175, 0.5);
    border-radius: 4px;
    margin-right: 10px;
    position: relative;
    transition: all 0.3s ease;
    display: inline-block;
    flex-shrink: 0;
}

.remember-checkbox input[type="checkbox"]:checked + .checkmark {
    background: #ee5a24;
    border-color: #ee5a24;
}

.remember-checkbox input[type="checkbox"]:checked + .checkmark::after {
    content: '✓';
    position: absolute;
    color: white;
    font-size: 12px;
    font-weight: bold;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.remember-checkbox:hover .checkmark {
    border-color: #ee5a24;
    background: rgba(238, 90, 36, 0.1);
}

/* MAIN APP */
.app-container {
    background: linear-gradient(135deg, #0c0c0c 0%, #1a1a1a 100%);
    min-height: 100vh;
    display: none;
}

.app-container.show {
    display: block;
}

/* HEADER */
.header {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0 30px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-content {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
    gap: 20px;
}

.brand {
    font-size: 1.8rem;
    font-weight: 900;
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -1px;
    line-height: 1.1;
    text-align: left;
    flex-shrink: 0;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 32px; /* Równe odstępy między ikonami nawigacyjnymi */
    flex-shrink: 0;
}

/* Ikony w nav-menu - bez dodatkowego paddingu poziomego */
.nav-menu .nav-item {
    padding: 8px;
}

/* DESKTOP: Wszystkie ikony nawigacyjne mają identyczną WYSOKOŚĆ 35px */
.nav-menu .nav-item img,
.user-menu .nav-item img {
    width: auto !important;
    height: 35px !important;
}

/* Avatar użytkownika - większy (60px) */
#profileIconImage.user-avatar {
    height: 60px !important;
}

.nav-item {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-weight: 500;
    padding: 10px 15px;
    border-radius: 8px;
    transition: all 0.3s;
    cursor: pointer;
}

/* Hover - tylko pomarańczowa ikona, bez tła */
.nav-item:hover img {
    filter: brightness(0) saturate(100%) invert(58%) sepia(73%) saturate(3930%) hue-rotate(334deg) brightness(101%) contrast(102%);
}

/* Active - tylko pomarańczowa ikona, bez tła */
.nav-item.active {
    background: none;
}

.nav-item.active img {
    filter: brightness(0) saturate(100%) invert(58%) sepia(73%) saturate(3930%) hue-rotate(334deg) brightness(101%) contrast(102%);
}

/* Profile icon hover/active - pomarańczowy jak inne ikony */
#profileIconSpan:hover img[src*="profile.svg"],
#profileIconSpan.active img[src*="profile.svg"] {
    filter: brightness(0) saturate(100%) invert(58%) sepia(73%) saturate(3930%) hue-rotate(334deg) brightness(101%) contrast(102%);
}

/* Custom avatar (photo/selected) - pomarańczowa ramka 0.5px */
#profileIconSpan:hover img:not([src*="profile.svg"]),
#profileIconSpan.active img:not([src*="profile.svg"]) {
    border: 0.5px solid #ff6b6b;
    filter: none;
}

.search-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 200px;
  max-width: 350px;
}

.search-input {
  width: 100%;
  padding: 10px 15px 10px 40px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  color: white;
  font-size: 14px;
}

.search-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.search-icon {
    position: absolute;
    left: 15px;
    color: rgba(255, 255, 255, 0.4);
}

.user-menu {
    display: flex;
    align-items: center;
    gap: 32px;
    flex-shrink: 0;
}

/* Ikony w user-menu - bez dodatkowego paddingu poziomego */
.user-menu .nav-item {
    padding: 8px;
}

/* Removed .profile-icon and .settings-icon CSS - now using .nav-item like other icons */

.logout-btn {
    background: rgba(239, 68, 68, 0.1);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.2);
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 14px;
}

.logout-btn:hover {
    background: rgba(239, 68, 68, 0.2);
}

/* HAMBURGER MENU */
.hamburger-menu {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 18px;
    height: 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.mobile-search-btn {
    display: none !important;
}

.hamburger-menu span {
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 2px;
    transition: all 0.3s;
}

.hamburger-menu.active span:nth-child(1) {
    transform: rotate(45deg) translate(8px, 8px);
}

.hamburger-menu.active span:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}

/* Mobile Navigation Overlay */
.mobile-nav-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 105;
    padding: 80px 30px 30px;
    overflow-y: auto;
}

.mobile-nav-overlay.active {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.mobile-menu-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    z-index: 110;
}

.mobile-menu-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

.mobile-menu-close img {
    width: 24px;
    height: 24px;
    opacity: 0.8;
}

.mobile-nav-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s;
}

.mobile-nav-item:hover, .mobile-nav-item.active {
    background: rgba(255, 107, 107, 0.15);
    border-color: rgba(255, 107, 107, 0.3);
}

.mobile-nav-item img {
    width: 32px;
    height: 32px;
}

/* ROLE-BASED VISIBILITY */
/* Ukryj SETTINGS dla editor i guest (tylko admin ma dostęp) */
body:not(.is-admin) #settingsIconSpan {
    display: none;
}

body:not(.is-admin) #mobileSettingsLink {
    display: none !important;
}

/* Ukryj ikonę EDIT w WIKT dla guest (admin i editor mają dostęp) */
body.is-guest .wikt-edit-icon {
    display: none !important;
}
body.is-guest .edit-btn {
    display: none !important;
}

/* MAIN CONTENT */
.main-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 30px;
    min-height: calc(100vh - 80px);
}

.page {
    display: none;
}

.page.active {
    display: block;
}

/* PAGE HEADERS */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.page-title {
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
}

.page-actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px;
    flex-wrap: wrap;
}

/* WATCHLIST/FAVORITES/TOPLIST - wymuszenie flexbox w poziomie (desktop + mobile) */
#watchlistPage .page-actions,
#favoritesPage .page-actions,
#toplistPage .page-actions {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

/* WATCHLIST/FAVORITES - wysokość przycisków jak tytuł strony */
#watchlistPage .page-actions button,
#favoritesPage .page-actions button {
    padding: 8px 16px !important;
    font-size: 14px !important;
    height: auto !important;
    line-height: 1 !important;
    width: auto !important;
    flex: 0 0 auto !important;
}

/* TOPLIST - identyczne przyciski jak WATCHLIST/FAVORITES */
#toplistPage .page-actions button {
    padding: 8px 16px !important;
    font-size: 14px !important;
    height: auto !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    width: auto !important;
    flex: 0 0 auto !important;
    border-radius: 12px !important;
}

/* WATCHLIST/FAVORITES - ujednolicenie kolorów ALL z pozostałymi */
#watchlistFilterAll,
#favoritesFilterAll {
    background: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#watchlistFilterAll:hover,
#favoritesFilterAll:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

#watchlistFilterAll.active,
#favoritesFilterAll.active {
    background: rgba(255,107,107,.2) !important;
    color: #ff6b6b !important;
    border-color: #ff6b6b !important;
}

.btn-add {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 10px;
    cursor: pointer;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: all 0.3s;
}

.btn-add:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(16, 185, 129, 0.3);
}

.btn-add:active {
    transform: translateY(-1px);
    background: linear-gradient(135deg, #0d9665 0%, #047857 100%);
}

/* Loading states for buttons */
.btn-loading {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.btn-loading::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 8px;
    border: 2px solid transparent;
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* GRID LAYOUTS */
.items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.item-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s, background-color 0.3s;
    cursor: pointer;
}

.item-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 107, 107, 0.3);
}

/* === KOLORY TŁA WEDŁUG SPECYFIKACJI GRUPOWANIA === */
.item-card.bg-light {
    background: rgba(255, 255, 0, 0.15); /* Jasne żółte tło - multi-disc (TYP A) */
    border-color: transparent; /* Usuń jasną linię na krawędziach */
}

.item-card.bg-dark {
    background: rgba(255, 0, 0, 0.15); /* Ciemne czerwone tło - multi-format (TYP C) */
    border-color: transparent; /* Usuń jasną linię na krawędziach */
}

.item-card.bg-blue {
    background: rgba(100, 150, 255, 0.15); /* Niebieskie tło - multi-disc + multi-format (TYP D) */
    border-color: transparent; /* Usuń jasną linię na krawędziach */
}

/* TYP A/C/D hover: zachowaj kolory tła w WK, tylko rozjaśnij */
.item-card.bg-light:hover {
    background: rgba(255, 255, 0, 0.22);
}
.item-card.bg-dark:hover {
    background: rgba(255, 0, 0, 0.22);
}
.item-card.bg-blue:hover {
    background: rgba(100, 150, 255, 0.22);
}

.list-item.bg-light {
    background: rgba(255, 255, 0, 0.15); /* Jasne żółte tło - lista multi-disc */
}

.list-item.bg-dark {
    background: rgba(255, 0, 0, 0.15); /* Ciemne czerwone tło - lista multi-format */
}

.list-item.bg-blue {
    background: rgba(100, 150, 255, 0.15); /* Niebieskie tło - lista multi-disc + multi-format (TYP D) */
}

/* === KOLORY TŁA DLA WIKT (detail-page) === */
.detail-page.bg-light {
    background: rgba(255, 255, 0, 0.15); /* Jasne żółte tło - WIKT multi-disc (TYP A) */
}

.detail-page.bg-dark {
    background: rgba(255, 0, 0, 0.15); /* Ciemne czerwone tło - WIKT multi-format (TYP C) */
}

.detail-page.bg-blue {
    background: rgba(100, 150, 255, 0.15); /* Niebieskie tło - WIKT multi-disc + multi-format (TYP D) */
}


.item-poster {
    position: relative;
    max-height: 200px;
    overflow: hidden;
    /* Collapse: fast start to cut through dead zone, smooth end */
    transition: max-height 0.35s cubic-bezier(0.1, 0, 0.2, 1);
    background: linear-gradient(45deg, #333, #666);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: rgba(255, 255, 255, 0.3);
}

.item-poster img {
    width: 100%;
    height: auto;
}

/* Expanded posters - natural height (masonry) */
.items-grid.expanded-posters .item-poster,
.item-card.poster-expanded .item-poster {
    max-height: 800px;
    overflow: visible;
    /* Expand: smooth ease-in-out */
    transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.items-grid.expanded-posters .item-poster img,
.item-card.poster-expanded .item-poster img {
    object-fit: contain;
}

.item-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.3s;
}

.item-card:hover .item-actions {
    opacity: 1;
}

.action-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    backdrop-filter: blur(10px);
    font-size: 14px;
}

.edit-btn {
    background: rgba(59, 130, 246, 0.8);
    color: white;
}

.delete-btn {
    background: rgba(239, 68, 68, 0.8);
    color: white;
}

.add-link-btn {
    background: rgba(16, 185, 129, 0.8);
    color: white;
}

.item-info {
    padding: 15px;  /* 20px → 15px (-25%) */
}

.item-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;  /* 8px → 6px (-25%) */
    color: #ffffff;
    line-height: 1.3;
    min-height: 2.6em;  /* Miejsce na 2 linie tekstu (1.3 * 2 = 2.6) */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.item-subtitle {
    color: #b4b4b4;  /* DIRECTOR/ARTIST/AUTHOR: szary */
    font-size: 16px;  /* większy dla DIRECTOR/ARTIST */
    margin-bottom: 8px;  /* 10px → 8px (-20%, zaokrąglenie) */
}

.item-meta {
    color: #6F6E6E;  /* YEAR/GENRE/DURATION/TYPE/WHERE: ciemnoszary */
    font-size: 12px;
    margin-bottom: 6px;  /* równy margines: cast(6) → studio(6) → meta(6) */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.item-ratings {
    display: flex;
    gap: 8px;  /* 10px → 8px (-20%) */
    margin-bottom: 11px;  /* 15px → 11px (-25%) */
    flex-wrap: wrap;
}

.rating-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.rating-imdb {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.rating-rt {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.rating-metacritic {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.rating-rym {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.rating-meta {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.rating-discogs {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
}

.rating-critiquebrainz {
    background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%);
}

.rating-spotify {
    background: linear-gradient(135deg, #1db954 0%, #1ed760 100%);
}

.rating-user {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

.item-location {
    color: #6F6E6E;  /* TYPE/WHERE: ciemnoszary zgodnie ze specyfikacją */
    font-size: 11px;
    display: flex;
    justify-content: space-between;
}

/* Ikony akcji WK - taki sam styl jak w WIKT */
.item-action-row {
    display: flex;
    gap: 8px;
    justify-content: flex-start;
    align-items: center;
    margin-top: 10px;
}

/* Dolny rząd: rating lewa, ikony prawa */
.item-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 11px;
    gap: 8px;
}

.item-bottom-row .item-ratings {
    margin-bottom: 0;  /* usuń domyślny margin-bottom */
    flex-shrink: 1;
    min-width: 0;  /* pozwól na overflow w długich ratingach */
}

.item-bottom-row .item-action-row {
    margin-top: 0;  /* usuń domyślny margin-top */
    flex-shrink: 0;  /* ikony zawsze pełny rozmiar */
}

/* WK action buttons — styl identyczny z WIKT (.action-btn) */
.item-action-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Poster toggle (text ▼/▲) — identyczny odcień jak ikony IMG */
.item-action-btn.poster-toggle-btn {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.6);
    transition: opacity 0.2s ease;
    line-height: 1;
}

.item-action-btn.poster-toggle-btn:hover {
    color: rgba(255, 255, 255, 1);
}

/* Ikony IMG (rate, watchlist, fav) — kopiowane z WIKT .action-btn img */
.item-action-btn img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.item-action-btn:hover img {
    opacity: 1;
}

/* Gwiazdka (rate) mniejsza w SVG — boost jak w WIKT */
.item-action-btn .wk-rate-icon img {
    width: 23px;
    height: 23px;
}

/* Ikony wewnątrz spanów — centruj i blokuj kliknięcia */
.item-action-btn .wk-rate-icon,
.item-action-btn .wk-watchlist-icon,
.item-action-btn .wk-fav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.item-action-btn .wk-rate-icon img,
.item-action-btn .wk-watchlist-icon img,
.item-action-btn .wk-fav-icon img {
    pointer-events: none;
}

/* Aktywne ikony — kolory identyczne z WIKT */
.item-action-btn.active.watch-btn img {
    opacity: 1;
    filter: brightness(0) saturate(100%) invert(79%) sepia(73%) saturate(508%) hue-rotate(127deg) brightness(109%) contrast(101%);
}

.item-action-btn.active.fav-btn img {
    opacity: 1;
    filter: brightness(0) saturate(100%) invert(89%) sepia(28%) saturate(1058%) hue-rotate(280deg) brightness(102%) contrast(96%);
}

/* RECOMMENDATIONS */
.recommendations {
    margin-top: 15px;  /* zmienione na 15px dla spójności */
    padding-top: 15px; /* zmienione na 15px dla spójności */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;  /* Dla absolutnego pozycjonowania strzałek nawigacji */
    overflow: visible;   /* Strzałki nawigacji mogą wystawać poza kontener */
}

.recommendations h3 {
    color: #ff6b6b;
    margin-bottom: 15px;  /* zmienione z 20px na 15px dla spójności */
    font-size: 1.2rem;
}

.recommendations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));  /* auto-fit dla lepszej responsywności */
    gap: 15px;  /* zwiększony gap do 15px dla spójności */
    width: 100%;  /* zajmij całą szerokość */
}

.recommendation-card {
    background: rgba(255, 255, 255, 0.03);  /* Taki sam jak .item-card w WK/WL */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 13px;  /* pomniejszona czcionka */
}

.recommendation-card:hover {
    background: rgba(255, 255, 255, 0.06);  /* Hover jak .item-card */
    border-color: rgba(255, 107, 107, 0.3);
    transform: translateY(-2px);  /* subtelny hover jak w WK */
}

/* TYP A/C/D Colors for Recommendation Cards - spójne z .item-card */
.recommendation-card.bg-light {
    background: rgba(255, 255, 0, 0.15);  /* 🟡 żółty - TYP A (jak .item-card.bg-light) */
    border-color: transparent;
}

.recommendation-card.bg-light:hover {
    background: rgba(255, 255, 0, 0.20);
    border-color: rgba(255, 107, 107, 0.3);
}

.recommendation-card.bg-dark {
    background: rgba(255, 0, 0, 0.15);  /* 🔴 czerwony - TYP C (jak .item-card.bg-dark) */
    border-color: transparent;
}

.recommendation-card.bg-dark:hover {
    background: rgba(255, 0, 0, 0.20);
    border-color: rgba(255, 107, 107, 0.3);
}

.recommendation-card.bg-blue {
    background: rgba(100, 150, 255, 0.15);  /* 🔵 niebieski - TYP D (jak .item-card.bg-blue) */
    border-color: transparent;
}

.recommendation-card.bg-blue:hover {
    background: rgba(100, 150, 255, 0.20);
    border-color: rgba(255, 107, 107, 0.3);
}

/* PR w kolorowym WIKT — ciemne bazowe tło blokuje przeświecanie koloru WIKT przez karty PR */
.detail-page.bg-light .recommendation-card,
.detail-page.bg-dark .recommendation-card,
.detail-page.bg-blue .recommendation-card {
    background:
        linear-gradient(rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.03)),
        linear-gradient(135deg, #0c0c0c 0%, #1a1a1a 100%);
}

.detail-page.bg-light .recommendation-card:hover,
.detail-page.bg-dark .recommendation-card:hover,
.detail-page.bg-blue .recommendation-card:hover {
    background:
        linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06)),
        linear-gradient(135deg, #0c0c0c 0%, #1a1a1a 100%);
}

/* TYP A/C/D PR w kolorowym WIKT — własny kolor TYP na ciemnym bazowym tle */
.detail-page.bg-light .recommendation-card.bg-light,
.detail-page.bg-dark .recommendation-card.bg-light,
.detail-page.bg-blue .recommendation-card.bg-light {
    background:
        linear-gradient(rgba(255, 255, 0, 0.15), rgba(255, 255, 0, 0.15)),
        linear-gradient(135deg, #0c0c0c 0%, #1a1a1a 100%);
}

.detail-page.bg-light .recommendation-card.bg-dark,
.detail-page.bg-dark .recommendation-card.bg-dark,
.detail-page.bg-blue .recommendation-card.bg-dark {
    background:
        linear-gradient(rgba(255, 0, 0, 0.15), rgba(255, 0, 0, 0.15)),
        linear-gradient(135deg, #0c0c0c 0%, #1a1a1a 100%);
}

.detail-page.bg-light .recommendation-card.bg-blue,
.detail-page.bg-dark .recommendation-card.bg-blue,
.detail-page.bg-blue .recommendation-card.bg-blue {
    background:
        linear-gradient(rgba(100, 150, 255, 0.15), rgba(100, 150, 255, 0.15)),
        linear-gradient(135deg, #0c0c0c 0%, #1a1a1a 100%);
}

/* Recommendations Navigation Arrows */
.reco-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 107, 107, 0.9);
    border: none;
    color: white;
    font-size: 24px;
    font-weight: bold;
    width: 32px;
    height: 50px;
    cursor: pointer;
    z-index: 10;
    border-radius: 4px;
    transition: all 0.2s ease;
    line-height: 1;
    padding: 0;
}

.reco-nav-btn:hover {
    background: rgba(255, 107, 107, 1);
    transform: translateY(-50%) scale(1.05);
}

.reco-prev {
    left: 5px;
}

.reco-next {
    right: 5px;
}

.recommendation-card.reco-hidden {
    display: none !important;
}

@media (max-width: 768px) {
    .reco-nav-btn {
        display: none !important;
    }
    .recommendation-card.reco-hidden {
        display: block !important;  /* Show all on mobile */
    }
}

.rec-poster {
    width: 100%;
    height: 120px;  /* mniejszy plakat */
    background: linear-gradient(45deg, #333, #666);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;  /* mniejsze emoji */
    color: rgba(255, 255, 255, 0.3);
    position: relative;
}

.rec-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rec-content {
    padding: 15px;  /* zwiększony padding do 15px dla spójności */
}

.rec-title {
    font-size: 13px;  /* mniejsza czcionka tytułu */
    font-weight: 600;
    margin-bottom: 6px;  /* zwiększony margin do 6px dla spójności */
    color: #ffffff;
    line-height: 1.3;
    min-height: 33.8px;  /* ZAWSZE 2 rzędy (13px * 1.3 line-height * 2) */
    /* Ograniczenie do 2 linii jak w WK */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rec-subtitle {
    font-size: 11px;  /* mniejsza czcionka podtytułu */
    color: #b4b4b4;  /* szary jak director/artist w WK */
    margin-bottom: 6px;
    /* Ograniczenie do 1 linii */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rec-cast {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    margin-top: 2px;
    margin-bottom: 6px;
    min-height: 16px;  /* ZAWSZE 1 rząd (nawet pusty w Music) */
    line-height: 1.3;
    /* Ograniczenie do 1 linii */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rec-year-genre {
    font-size: 10px;  /* taka sama jak rec-reason */
    color: #6f6e6e;   /* kolor jak GENRE w WIKT (--meta-color) */
    font-weight: 400;
    letter-spacing: 0.2px;
    margin-bottom: 2px;
    /* Ograniczenie do 1 linii */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rec-reason {
    font-size: 10px;  /* mniejsza czcionka powodu */
    color: #569ea6;   /* kolor jak rec-reason */
    font-weight: 600;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    /* Ograniczenie do 1 linii */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* MODALS (WIKT-friendly: bez pustego headera, 1 scroll, stała wysokość) */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.8);
  backdrop-filter: blur(5px);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal.show { display: flex; }

/* kontener: bez wewnętrznego scrolla (żeby nie mieć 2 scrollbarów) */
.modal-content {
  background: rgba(26, 26, 26, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  width: min(1100px, 95vw);
  max-width: 1100px;
  /* max-height: 90vh; - USUNIĘTE dla auto-expansion jak w WIKT */
  /* overflow-y: auto; - USUNIĘTE dla auto-expansion jak w WIKT */
  box-shadow: 0 25px 50px rgba(0,0,0,.5);
  position: relative;
}

/* header jako overlay z samym „×”, bez linii i paddingu */
.modal-header{
  position:absolute;
  top:10px; right:10px;
  padding:0; border:0; background:none;
  display:flex; align-items:center; gap:8px;
  z-index: 2;
}
.modal-title{ display:none; }

.close-btn{
  background:none; border:none;
  color: rgba(255,255,255,.6);
  cursor:pointer; font-size:24px; line-height:1;
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  border-radius:8px; transition: color .2s, background .2s;
}
.close-btn:hover{ color:#fff; background: rgba(255,255,255,.06); }

/* MODAL BODY - ROZCIĄGNIJ W PIONIE */
.modal-body{
  padding: 30px;
  height: auto;                     /* rozciągnij w pionie */
}

/* Formularze – bez zmian, lekki lift responsywny */
.form-row{
  display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px;
}
@media (max-width: 720px){
  .form-row{ grid-template-columns:1fr; }
}

.form-select, .form-textarea, .form-input{
  width:100%; padding:12px 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px; color:#fff; font-size:14px;
  transition: border-color .2s;
}
.form-select option{ background:#1a1a1a; color:#fff; }
.form-input:focus, .form-select:focus, .form-textarea:focus{
  outline:none; border-color:#ff6b6b;
}
.form-textarea{ min-height:100px; resize:vertical; }
.form-input::placeholder, .form-textarea::placeholder{ color: rgba(255,255,255,.4); }

/* Force dark background for all select dropdowns */
select option {
  background: #1a1a1a !important;
  color: #ffffff !important;
}
select {
  background: rgba(255,255,255,0.05) !important;
  color: #ffffff !important;
}

.button-group{ display:flex; gap:15px; margin-top:25px; }

.btn-secondary{
  background: rgba(107,114,128,.3);
  color: rgba(255,255,255,.8);
  border: 1px solid rgba(255,255,255,.1);
}
.btn-secondary:hover{ background: rgba(107,114,128,.5); }
.btn-secondary:active{ background: rgba(75,85,99,.7); }

/* WATCHLIST/FAVORITES icon buttons */
.watchlist-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
}

.watchlist-icon-btn img {
  width: 20px;
  height: 20px;
  display: block;
  margin: 0 auto;
}

.watchlist-icon-btn {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.watchlist-icon-btn:hover {
  background: rgba(255,107,107,.2) !important;
  border-color: #ff6b6b !important;
}

.watchlist-icon-btn.active {
  background: rgba(255,107,107,.2) !important;
  border-color: #ff6b6b !important;
}

.watchlist-icon-btn img {
  filter: brightness(0) invert(1) opacity(0.7); /* Jasno szary OFF */
}

.watchlist-icon-btn:hover img,
.watchlist-icon-btn.active img {
  filter: brightness(0) saturate(100%) invert(58%) sepia(73%) saturate(3930%) hue-rotate(334deg) brightness(101%) contrast(102%); /* Pomarańczowy ON */
}

/* TOPLIST icon buttons - text + icon (styled like watchlist-icon-btn) */
.toplist-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.toplist-icon-btn:hover {
  background: rgba(255,107,107,.2) !important;
  border-color: #ff6b6b !important;
  color: #ff6b6b !important;
}

.toplist-icon-btn.active {
  background: rgba(255,107,107,.2) !important;
  border-color: #ff6b6b !important;
  color: #ff6b6b !important;
}

.toplist-icon-btn img {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  filter: brightness(0) invert(1) opacity(0.7);
}

.toplist-icon-btn:hover img,
.toplist-icon-btn.active img {
  filter: brightness(0) saturate(100%) invert(58%) sepia(73%) saturate(3930%) hue-rotate(334deg) brightness(101%) contrast(102%);
}

.btn-danger{
  background: linear-gradient(135deg,#ef4444 0%,#dc2626 100%);
  color:#fff;
}
.btn-danger:hover{
  transform:translateY(-2px);
  box-shadow: 0 10px 20px rgba(239,68,68,.3);
}
.btn-danger:active{
  transform:translateY(-1px);
  background: linear-gradient(135deg,#dc2626 0%,#b91c1c 100%);
}

/* USER RATING */
.user-rating {
    margin: 15px 0;
}

.rating-stars {
    display: flex;
    gap: 5px;
    margin-bottom: 10px;
}

.star {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: color 0.3s;
}

.star.active, .star:hover {
    color: #fbbf24;
}

.rating-display {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}


/* TABLES */
.data-table {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th, .table td {
    padding: 15px 20px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.table th {
    background: rgba(255, 255, 255, 0.05);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.table td {
    color: rgba(255, 255, 255, 0.8);
}

.role-badge {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.role-admin {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.role-user {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

/* LOADING & EMPTY STATES */
.loading-state, .empty-state {
    text-align: center;
    padding: 60px 20px;
    color: rgba(255, 255, 255, 0.5);
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top: 3px solid #ff6b6b;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

/* ALPHABET FILTER + CONTROLS */
.alphabet-filter {
    background: rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 20px; /* Większy padding */
    position: sticky;
    top: 80px;
    z-index: 99;
}

.alphabet-controls-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 0; /* Usunięty gap */
    flex-wrap: nowrap; /* Wymuszamy jeden rząd */
}

/* ABC Filter - Flexible width */
.alphabet-container {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap; /* Jeden rząd */
    gap: 2px; /* 1px z każdej strony */
    min-width: 0;
    overflow-x: auto; /* Scroll jeśli za dużo */
    overflow-y: hidden;
}

.alphabet-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  padding: 0 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  font-weight: 600;
  font-size: 14px;
  flex: 0 0 auto;
  min-width: 28px;
  max-width: 33px;
  height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.alphabet-btn img {
  height: 14px; width: auto;
  filter: brightness(0) invert(1) opacity(0.7);
  transition: all 0.3s;
}
.alphabet-btn:hover img, .alphabet-btn.active img {
  filter: brightness(0) saturate(100%) invert(58%) sepia(73%) saturate(3930%) hue-rotate(334deg) brightness(101%) contrast(102%);
}

.alphabet-btn:hover, .alphabet-btn.active {
    background: rgba(255, 107, 107, 0.2);
    border-color: #ff6b6b;
    color: #ff6b6b;
    z-index: 1;
}

.alphabet-btn:active {
    background: rgba(255, 107, 107, 0.3);
}

/* Action Buttons - Fixed width */
.filter-actions {
    display: flex;
    gap: 2px; /* 1px z każdej strony */
    flex-shrink: 0;
    margin-left: 4px; /* Minimalny odstęp od ABC */
}

.filter-actions .action-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    padding: 0 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    min-width: 28px;
    max-width: 33px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: none;
}

.filter-actions .action-btn:hover {
    background: rgba(255, 107, 107, 0.2);
    border-color: #ff6b6b;
    color: #ff6b6b;
    z-index: 1;
}

.filter-actions .action-btn.active {
    background: rgba(255, 107, 107, 0.25);
    border-color: #ff6b6b;
    color: #ff6b6b;
    z-index: 1;
}

/* reset-btn dziedziczy style z action-btn */

/* view-btn teraz używa <img> — styl ikon z .action-btn img */

/* Ikony w przyciskach akcji — wysokość jak font-size liter ABC */
.filter-actions .action-btn img {
    height: 14px;
    width: auto;
    opacity: 1;
    filter: brightness(0) invert(1) opacity(0.7);
    transition: all 0.3s;
}

.filter-actions .action-btn:hover img,
.filter-actions .action-btn.active img {
    opacity: 1;
    filter: brightness(0) saturate(100%) invert(58%) sepia(73%) saturate(3930%) hue-rotate(334deg) brightness(101%) contrast(102%);
}

/* VIEW TOGGLE */
.view-toggle {
    display: flex;
    gap: 5px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 5px;
}

.view-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
}

.view-btn:hover, .view-btn.active {
    background: rgba(255, 107, 107, 0.2);
    color: #ff6b6b;
}

.view-btn:active {
    background: rgba(255, 107, 107, 0.3);
}

/* LIST VIEW */
.items-list {
    display: none;
}

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

/* WL LIST VIEW - Specyfikacja użytkownika */
.list-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    margin-bottom: 15px;
    padding: 0;
    display: flex;
    align-items: stretch;
    gap: 0;
    transition: all 0.3s;
    cursor: pointer;
    position: relative;
    height: 180px; /* STAŁA WYSOKOŚĆ - nie min-height! */
    overflow: hidden;
}

.list-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 107, 107, 0.3);
}

/* TYP A/C/D hover: zachowaj kolory tła, tylko rozjaśnij */
.list-item.bg-light:hover {
    background: rgba(255, 255, 0, 0.20);
    border-color: rgba(255, 107, 107, 0.3);
}
.list-item.bg-dark:hover {
    background: rgba(255, 0, 0, 0.20);
    border-color: rgba(255, 107, 107, 0.3);
}
.list-item.bg-blue:hover {
    background: rgba(100, 150, 255, 0.20);
    border-color: rgba(255, 107, 107, 0.3);
}

/* POSTER/OKŁADKA - Kwadratowa 180x180px, PRZYCIĘTA do rozmiaru */
.list-poster {
    width: 180px;
    height: 180px; /* STAŁA WYSOKOŚĆ 180px */
    border-radius: 10px 0 0 10px;
    background: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.list-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* PRZYTNIJ plakat do kwadratu */
    object-position: center;
}

/* TYPE BADGE na posterze */
.list-type-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #000;
    z-index: 1;
}

.list-type-badge.type-a {
    background: #FFD700;
}

.list-type-badge.type-c {
    background: #FF69B4;
}

.list-type-badge.type-d {
    background: #00CED1;
}

/* CONTENT - wszystko pomiędzy posterem a ikonami */
.list-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px; /* Mniejszy gap dla 4 rzędów */
    padding: 20px;
    padding-right: 100px; /* Miejsce na pionowy pas ikon */
}

/* TITLE - pełna szerokość, biały */
.list-title {
    font-size: 20px;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.3;
    margin: 0;
}

/* ROW 1: ARTIST/DIRECTOR (lewo) + RATINGS (prawo) */
.list-row-1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.list-subtitle {
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 500;
}

.list-ratings {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.list-ratings .r {
    font-weight: 400;
    letter-spacing: .2px;
    font-size: 14px;
}

.list-ratings .r.imdb { color: var(--c-imdb); }
.list-ratings .r.rt { color: var(--c-rt); }
.list-ratings .r.meta { color: var(--c-meta); }
.list-ratings .r.disc { color: var(--c-disc); }
.list-ratings .r.crit { color: var(--c-crit); }
.list-ratings .r.spoti { color: var(--c-spotify); }
.list-ratings .r.hard { color: var(--c-hard); }
.list-ratings .r.goob { color: var(--c-goob); }
.list-ratings .r.rak { color: var(--c-rak); }
.list-ratings .r.lub { color: var(--c-lub); }
.list-ratings .r.you { color: var(--c-you) !important; }

/* ROW 2: CAST (lewo, tylko MOVIES) + DURATION (prawo) */
.list-row-2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    min-height: 20px; /* Żeby MUSIC miał taką samą wysokość mimo braku CAST */
}

.list-cast {
    color: #979595;
    font-size: 13px;
}

.list-studio {
    color: #838181;
    font-size: 13px;
    min-height: 16px;
    text-transform: uppercase;
}

.list-duration {
    color: #979595;
    font-size: 13px;
    text-align: right;
    flex-shrink: 0;
}

/* ROW 3: YEAR;GENRE (lewo) + TYPE;WHERE (prawo) */
.list-row-3 {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-top: auto; /* Przyklej do dołu */
}

.list-year-genre {
    color: #6F6E6E;
    font-size: 13px;
}

.list-meta {
    color: #6F6E6E;
    font-size: 13px;
    text-align: right;
    flex-shrink: 0;
}

/* ACTIONS - PIONOWY PASEK IKON PO PRAWEJ (SKRAJNIE) */
.list-actions {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    z-index: 10;
}

.list-action-btn {
    width: 40px; /* Dopasowane do WIKT - 40px x 40px */
    height: 40px;
    border: none;
    background: transparent; /* BEZ TŁA - czyste ikony */
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
    flex-shrink: 0;
}

.list-action-btn:hover {
    background: transparent; /* BEZ TŁA nawet przy hover */
    transform: scale(1.15); /* Tylko zoom */
}

/* Ikony WK w WL - PRAWDZIWE IKONY z DRIVE */
.list-action-btn .wk-rate-icon,
.list-action-btn .wk-watchlist-icon,
.list-action-btn .wk-fav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.list-action-btn .wk-rate-icon img,
.list-action-btn .wk-watchlist-icon img,
.list-action-btn .wk-fav-icon img {
    width: 20px; /* Dokładnie taki sam rozmiar jak w WIKT */
    height: 20px;
    object-fit: contain;
    filter: brightness(0.9); /* Lekko przyciemnione */
    transition: filter 0.2s;
}

/* Gwiazdka (rate) jest mniejsza w SVG - zwiększamy */
.list-action-btn .wk-rate-icon img {
    width: 23px;
    height: 23px;
}

.list-action-btn:hover .wk-rate-icon img,
.list-action-btn:hover .wk-watchlist-icon img,
.list-action-btn:hover .wk-fav-icon img {
    filter: brightness(1.1); /* Rozjaśnione przy hover */
}

/* Podświetlenie aktywnych przycisków - BEZ TŁA */
.list-action-btn.active {
    background: transparent;
}

.list-action-btn.active .wk-rate-icon img,
.list-action-btn.active .wk-watchlist-icon img,
.list-action-btn.active .wk-fav-icon img {
    filter: brightness(1.2) saturate(1.3); /* Jaśniejsze i bardziej kolorowe gdy aktywne */
}

/* Ikony wewnątrz przycisków nie mogą blokować kliknięć */
.list-action-btn .wk-rate-icon,
.list-action-btn .wk-watchlist-icon,
.list-action-btn .wk-fav-icon,
.list-action-btn .wk-rate-icon img,
.list-action-btn .wk-watchlist-icon img,
.list-action-btn .wk-fav-icon img {
    pointer-events: none;
}

/* FILTERS */
.filters {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.filter-group {
    display: flex;
    gap: 10px; /* Zmniejszono z 15px */
    flex-wrap: wrap;
}

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

.filter-select {
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: white;
    font-size: 13px;
    min-width: 100px;
    max-width: 150px;
}

/* Overlay na filtrze — pojawia się na hover gdy filtr aktywny */
.filter-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(40, 40, 40, 0.75);
    border-radius: 8px;
    display: none;
    z-index: 2;
    cursor: pointer;
}
.filter-wrapper.has-value:hover .filter-overlay {
    display: flex;
}
.filter-overlay-left,
.filter-overlay-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    transition: border-color 0.2s;
}
.filter-overlay-left {
    border-radius: 8px 0 0 8px;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
}
.filter-overlay-right {
    border-radius: 0 8px 8px 0;
}
.filter-overlay img {
    height: 14px; width: auto;
    filter: brightness(0) invert(1) opacity(0.7);
    transition: filter 0.2s;
}
.filter-overlay-left:hover {
    border-color: #ff6b6b;
}
.filter-overlay-left:hover img {
    filter: brightness(0) saturate(100%) invert(58%) sepia(73%) saturate(3930%) hue-rotate(334deg) brightness(101%) contrast(102%);
}
.filter-overlay-right:hover {
    border-color: #ff6b6b;
}
.filter-overlay-right:hover img {
    filter: brightness(0) saturate(100%) invert(58%) sepia(73%) saturate(3930%) hue-rotate(334deg) brightness(101%) contrast(102%);
}

.filter-select option {
    max-width: 300px; /* Dropdown może być szerszy */
}

/* API STATUS */
.api-status {
    margin: 20px 0;
    padding: 15px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
}

.api-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

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

.api-status-indicator {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.status-ok {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.status-error {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.status-pending {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

/* USER PROFILE SECTION */
.profile-section {
    margin-bottom: 30px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.profile-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 auto 20px;
    overflow: hidden;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* DESKTOP - Ukryj mobile elementy i overlaye */
@media (min-width: 769px) {
  .hamburger-menu,
  .mobile-search-btn,
  .mobile-description-btn,
  .mobile-recommendations-btn,
  .mobile-description-overlay,
  .mobile-recommendations-overlay,
  .mobile-search-overlay {
    display: none !important;
  }
}

/* Mobile nav overlay kontrolowany przez .active class */
.mobile-nav-overlay {
    display: none;
}

@media (min-width: 769px) {
    .mobile-nav-overlay {
        display: none !important;
    }

    /* DESKTOP HEADER - flex layout z równymi odstępami */
    .header-content {
      display: flex !important;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }

    .nav-menu {
      display: flex !important;
      gap: 32px;
    }

    .user-menu {
      display: flex !important;
      gap: 32px;
    }
}

/* RESPONSIVE */
@media (max-width: 768px) {
    /* HEADER MOBILE LAYOUT - CONSISTENT PADDING FOR ALL LAYERS */
    .header {
        padding: 0 20px;
    }

    .header-content {
        height: auto;
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto;
        gap: 12px;
        padding: 12px 0;
        align-items: center;
        max-width: 100%;
    }

    /* Równe odstępy wizualne: usuń poziome paddingi z ikon headera */
    .header .nav-item {
        padding-left: 0;
        padding-right: 0;
    }

    /* Ikony bez dodatkowych marginesów – odstępy daje tylko column-gap */
    .header .nav-item img {
        margin: 0;
        display: block;
    }

    /* Row 1: [LOGO - 1 linia] [Profile] [Hamburger] */
    .brand {
        grid-column: 1;
        grid-row: 1;
        font-size: 1.26rem;
        text-align: left;
        line-height: 1.1;
        justify-self: start;
        white-space: nowrap;
        margin-left: 0;
    }

    .brand br {
        display: none;
    }

    .user-menu {
        grid-column: 2;
        grid-row: 1;
        display: flex;
        align-items: center;
        gap: 12px;
        justify-self: end;
    }

    .hamburger-menu {
        display: flex !important;
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
    }

    #profileIconSpan {
        display: flex;
    }

    /* Hide desktop navigation and elements */
    .nav-menu {
        display: none !important;
    }

    #settingsIconSpan {
        display: none !important;
    }

    /* Hide FAV and WATCHLIST icons (they're in hamburger) */
    .header-content > a[onclick*="watchlist"],
    .header-content > a[onclick*="favorites"] {
        display: none !important;
    }

    /* Hide desktop search bar */
    .search-container {
        display: none !important;
    }

    /* Row 2: Mobile action buttons [SEARCH | RANDOM | A-Z | WK | WL | RESET] */
    .alphabet-filter {
        padding: 10px 20px;
        max-width: 100%;
    }

    .alphabet-controls-container {
        display: flex;
        gap: 6px;
        justify-content: space-between;
        max-width: 100%;
    }

    /* Hide alphabet on mobile */
    .alphabet-container {
        display: none !important;
    }

    .filter-actions {
        width: auto;
        display: grid !important;
        grid-template-columns: repeat(7, 1fr);
        gap: 6px;
        max-width: calc(100% - 40px); /* 20px padding z każdej strony */
        margin: 0 auto; /* Wyśrodkowanie */
        justify-self: center;
    }

    .hamburger-menu span {
        width: 100%;
        height: 2px;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 2px;
        transition: all 0.3s;
    }

    .hamburger-menu.active span:nth-child(1) {
        transform: rotate(45deg) translate(8px, 8px);
    }

    .hamburger-menu.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger-menu.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -7px);
    }

    /* Show mobile search button */
    .mobile-search-btn {
        display: flex !important;
        grid-column: 1;
    }

    #sortRandom {
        grid-column: 2;
    }

    #sortAlpha {
        grid-column: 3;
    }

    #viewGrid {
        grid-column: 4;
    }

    #viewList {
        grid-column: 5;
    }

    #scrollTopBtn {
        grid-column: 6;
    }

    #resetFilters {
        grid-column: 7;
    }

    .action-btn {
        width: 100%;
        height: 40px;
        padding: 6px;
        font-size: 11px;
    }
    
    /* Zmniejsz gap między przyciskami w WIKT na mobile */
    .action-row {
        gap: 4px !important;
    }

    .action-btn img {
        width: 18px;
        height: 18px;
    }

    /* Scale down header icons on mobile */
    .nav-item img, .user-menu img {
        width: 32px !important;
        height: 32px !important;
    }

    .search-icon {
        width: 20px !important;
        height: 20px !important;
    }

    /* MOBILE SEARCH OVERLAY */
    .mobile-search-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.95);
        z-index: 105;
        padding: 20px;
        align-items: flex-start;
        justify-content: center;
        padding-top: 60px;
    }

    .mobile-search-overlay.active {
        display: flex;
    }

    .mobile-search-container {
        width: 100%;
        max-width: 500px;
        position: relative;
    }

    .mobile-search-close {
        position: absolute;
        top: -45px;
        right: 0;
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .mobile-search-close img {
        width: 24px;
        height: 24px;
    }

    /* FILTERS MOBILE LAYOUT */
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 0 20px 15px 20px;
        margin-bottom: 20px;
        max-width: none; /* Pozwól na pełną szerokość na mobile */
    }

    .page-title {
        font-size: 1.5rem;
    }

    .page-actions {
        width: 100%;
        display: grid !important;
        gap: 6px !important;
        max-width: 100%;
    }

    /* WATCHLIST/FAVORITES/TOPLIST - przyciski w poziomie (flex) */
    #watchlistPage .page-actions,
    #favoritesPage .page-actions,
    #toplistPage .page-actions {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        width: auto !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    #watchlistPage .page-actions button,
    #favoritesPage .page-actions button,
    #toplistPage .page-actions button {
        width: auto !important;
        flex: 0 0 auto !important;
    }

    /* Movies: 2 rows (DIRECTOR+ACTOR | GENRE+YEAR+TYPE) */
    #moviesPage .page-actions {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .filter-wrapper:has(#movieDirectorFilter) {
        grid-column: 1 / 3;
        grid-row: 1;
    }

    .filter-wrapper:has(#movieActorFilter) {
        grid-column: 3;
        grid-row: 1;
    }

    .filter-wrapper:has(#movieGenreFilter) {
        grid-column: 1;
        grid-row: 2;
    }

    .filter-wrapper:has(#movieYearFilter) {
        grid-column: 2;
        grid-row: 2;
    }

    .filter-wrapper:has(#movieTypeFilter) {
        grid-column: 3;
        grid-row: 2;
    }

    /* Music: 2 rows (ARTIST full | GENRE+YEAR+TYPE) */
    #musicPage .page-actions {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .filter-wrapper:has(#musicArtistFilter) {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .filter-wrapper:has(#musicGenreFilter) {
        grid-column: 1;
        grid-row: 2;
    }

    .filter-wrapper:has(#musicYearFilter) {
        grid-column: 2;
        grid-row: 2;
    }

    .filter-wrapper:has(#musicTypeFilter) {
        grid-column: 3;
        grid-row: 2;
    }

    .filter-wrapper {
        width: 100%;
    }
    .filter-select {
        width: 100% !important;
        font-size: 10px !important;
        padding: 8px 6px !important;
        min-width: auto !important;
        max-width: none !important;
    }
    /* ikonka reset jest teraz obok selecta, nie wewnątrz */

    /* CONTENT */
    .main-content {
        padding: 15px 20px;
        max-width: 100%;
    }

    /* WIDOK LISTY (WL) NA MOBILE - 2 uproszczone karty pionowe */
    .items-list {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    
    /* Gdy widok list jest aktywny, wyświetl jako grid */
    .items-list[style*="display: block"] {
        display: grid !important;
    }

    .items-list .item-card {
        border-radius: 12px !important;
        background: rgba(0, 0, 0, 0.9) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* TYP A/C/D kolory tła na mobile - muszą nadpisać !important powyżej */
    .items-list .item-card.bg-light {
        background: rgba(255, 255, 0, 0.15) !important;
    }
    .items-list .item-card.bg-dark {
        background: rgba(255, 0, 0, 0.15) !important;
    }
    .items-list .item-card.bg-blue {
        background: rgba(100, 150, 255, 0.15) !important;
    }

    .items-list .item-poster {
        aspect-ratio: 2/3 !important;
        height: auto !important;
        width: 100% !important;
        border-radius: 0 !important;
        background: linear-gradient(45deg, #222, #444) !important;
    }

    .items-list .item-poster img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .items-list .item-info {
        padding: 10px 8px !important;
        background: #000 !important;
        text-align: center !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 4px !important;
    }

    .items-list .item-title {
        font-size: 13px !important;
        line-height: 1.25 !important;
        max-height: 2.5em !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        font-weight: 700 !important;
        color: #fff !important;
        margin: 0 !important;
    }

    .items-list .item-subtitle {
        font-size: 11px !important;
        line-height: 1.3 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        color: rgba(255, 255, 255, 0.75) !important;
        font-weight: 500 !important;
    }

    /* MOVIES/MUSIC/BOOKS/FAVORITES/WATCHLIST/TOPLIST - pojedyncze kafelki */
    #moviesPage .items-grid,
    #musicPage .items-grid,
    #booksPage .items-grid,
    #favoritesPage .items-grid,
    #watchlistPage .items-grid,
    #toplistPage .items-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .recommendations-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 8px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .detail-header {
        flex-direction: column;  /* zmiana na kolumny w mobile */
        gap: 12px;              /* mniejszy gap w mobile (15px * 0.8) */
        text-align: center;
    }
    
    .detail-page {
        padding: 12px;          /* mniejszy padding w mobile (15px * 0.8) */
    }

    .detail-poster {
        max-width: 250px;
        margin: 0 auto;
    }

    .recommendations-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }

    /* POSTER ZOOM OVERLAY - Mobile adjustments */
    .poster-zoom-overlay .poster-zoom-image {
        max-height: 80vh !important;
        max-width: 90vw !important;
    }

    /* WIKT MOBILE - Uproszczony, wycentrowany */
    .detail-page {
        text-align: center;
        padding: 10px !important;
    }

    .detail-main {
        padding: 8px !important;
    }

    .detail-header {
        gap: 8px !important;
        margin-bottom: 8px !important;
    }

    .detail-info {
        padding: 8px !important;
    }

    .meta-actions-row {
        margin-top: 8px !important;
        padding: 8px !important;
    }

    .detail-title {
        font-size: 17px !important;
        text-align: center;
        margin-bottom: 6px !important;
    }

    .title-slot {
        justify-content: center !important;
        text-align: center;
        margin-bottom: 6px !important;
    }

    .title-slot h1 {
        text-align: center !important;
        font-size: 17px !important;
        margin: 0 !important;
        line-height: 1.2 !important;
    }

    .ratings-row {
        justify-content: center !important;
        gap: 6px !important;
        margin: 6px 0 !important;
    }

    .subtitle-row,
    .cast-row,
    .meta-row {
        justify-content: center;
        text-align: center;
        font-size: 11px !important;
        margin: 4px 0 !important;
        line-height: 1.2 !important;
    }

    .credits-block,
    .meta-block {
        margin: 4px 0 !important;
    }

    /* Ukryj OPIS na mobile - będzie przycisk */
    .description-section {
        display: none !important;
    }

    /* Ukryj tri-row i detail-description na mobile WIKT */
    .tri-row {
        display: none !important;
    }

    .detail-description {
        display: none !important;
    }

    /* Ukryj translate button na mobile - opis jest w osobnym overlay */
    .translate-wrapper,
    .translate-btn,
    .translate-dropdown {
        display: none !important;
    }

    /* Ukryj recommendations na mobile WIKT - całkowicie */
    .recommendations-section {
        display: none !important;
    }
    
    .detail-footer {
        display: none !important;
    }
    
    /* Ukryj trzecią rekomendację (3 PR) w gridzie - pokaż tylko 2 */
    .recommendations-grid .recommendation-card:nth-child(3) {
        display: none !important;
    }
    
    /* WK mobile - HACK: renderuj ratings bez prefiksów tekstowych */
    /* Używamy JavaScript do dodania klasy .mobile-rating która zawiera tylko wartość */

    /* Mobile OPIS button - pokazuj tylko na mobile */
    .mobile-description-btn {
        display: block !important;
        width: calc(100% - 30px);
        margin: 15px auto 0;
        padding: 12px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 10px;
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s;
    }

    .mobile-description-btn:hover {
        background: rgba(255, 255, 255, 0.1);
    }

    /* Mobile description - full screen overlay */
    .mobile-description-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.95);
        z-index: 99999;
        padding: 60px 20px 60px;
    }

    .mobile-description-overlay.active {
        display: flex !important;
        flex-direction: column;
    }

    .mobile-description-wrapper {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        position: relative;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-description-content {
        color: #ffffff;
        font-size: 13px;
        line-height: 1.7;
        text-align: left;
    }

    /* Scroll arrow containers */
    .mobile-desc-arrow-container {
        position: absolute;
        left: 10px;
        z-index: 10;
    }

    .mobile-desc-arrow-up {
        top: 60px;
    }

    .mobile-desc-arrow-down {
        bottom: 20px;
    }

    /* Arrow buttons - triangle style like WIKT */
    .mobile-desc-arrow {
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.15);
        color: rgba(255, 255, 255, 0.6);
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        font-size: 16px;
        cursor: pointer;
        transition: all 0.2s;
    }

    .mobile-desc-arrow:active {
        background: rgba(255, 255, 255, 0.15);
        color: #fff;
    }

    .mobile-description-close {
        position: absolute;
        top: 10px;
        right: 10px;
        background: none;
        border: none;
        color: rgba(255,255,255,.6);
        cursor: pointer;
        font-size: 24px;
        line-height: 1;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        transition: color .2s, background .2s;
        z-index: 10;
    }

    .mobile-description-close:hover {
        color: #fff;
        background: rgba(255,255,255,.06);
    }

    .mobile-description-nav button {
        width: 36px;
        height: 36px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s;
    }

    .mobile-description-nav button:hover {
        background: rgba(255, 255, 255, 0.15);
    }

    .mobile-description-nav button img {
        width: 18px;
        height: 18px;
        opacity: 0.8;
    }

    /* Mobile recommendations overlay - similar to mobile description */
    .mobile-recommendations-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.95);
        z-index: 99999;
        padding: 60px 15px 20px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-recommendations-overlay.active {
        display: block !important;
    }

    .mobile-recommendations-close {
        position: absolute;
        top: 10px;
        right: 10px;
        background: none;
        border: none;
        color: rgba(255,255,255,.6);
        cursor: pointer;
        font-size: 24px;
        line-height: 1;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        transition: color .2s, background .2s;
        z-index: 10;
    }

    .mobile-recommendations-close:hover {
        color: #fff;
        background: rgba(255,255,255,.06);
    }

    .mobile-recommendations-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 0;
    }

    /* Mobile rec cards - IDENTYCZNE jak recommendation-card */
    .mobile-rec-card {
        background: rgba(40, 40, 40, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 10px;
        overflow: hidden;
        cursor: pointer;
        transition: all 0.3s;
        font-size: 13px;
    }

    .mobile-rec-card:active {
        background: rgba(50, 50, 50, 0.95);
        border-color: rgba(255, 107, 107, 0.3);
        transform: translateY(-2px);
    }

    /* TYP A/C/D Colors */
    .mobile-rec-card.bg-light {
        background: rgba(255, 235, 59, 0.18);
        border-color: rgba(255, 235, 59, 0.4);
    }

    .mobile-rec-card.bg-light:active {
        background: rgba(255, 235, 59, 0.25);
        border-color: rgba(255, 235, 59, 0.5);
    }

    .mobile-rec-card.bg-dark {
        background: rgba(255, 107, 107, 0.18);
        border-color: rgba(255, 107, 107, 0.4);
    }

    .mobile-rec-card.bg-dark:active {
        background: rgba(255, 107, 107, 0.25);
        border-color: rgba(255, 107, 107, 0.5);
    }

    .mobile-rec-card.bg-blue {
        background: rgba(33, 150, 243, 0.18);
        border-color: rgba(33, 150, 243, 0.4);
    }

    .mobile-rec-card.bg-blue:active {
        background: rgba(33, 150, 243, 0.25);
        border-color: rgba(33, 150, 243, 0.5);
    }

    .mobile-rec-card-poster {
        width: 100%;
        height: 120px;
        background: linear-gradient(45deg, #333, #666);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32px;
        color: rgba(255, 255, 255, 0.3);
        position: relative;
    }

    .mobile-rec-card-poster img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .mobile-rec-card-info {
        padding: 15px;
    }

    .mobile-rec-card-title {
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 6px;
        color: #ffffff;
        line-height: 1.3;
        min-height: 33.8px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .mobile-rec-card-subtitle {
        font-size: 11px;
        color: #ffffff;
        margin-bottom: 6px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-rec-card-cast {
        font-size: 12px;
        color: rgba(255,255,255,0.5);
        margin-top: 2px;
        margin-bottom: 6px;
        min-height: 16px;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-rec-card-reason {
        font-size: 10px;
        color: #569ea6;
        font-weight: 600;
        letter-spacing: 0.2px;
        text-transform: uppercase;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Mobile recommendations button - show only on mobile */
    .mobile-recommendations-btn {
        display: block !important;
        width: calc(100% - 30px);
        margin: 8px auto 0;
        padding: 12px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 10px;
        color: #fff;
        font-size: 13px;
        font-weight: 600;
        text-align: center;
        cursor: pointer;
        transition: all 0.2s;
    }

    .mobile-recommendations-btn:active {
        background: rgba(255, 255, 255, 0.1);
        transform: scale(0.98);
    }
}
    /* Watchlist button active state */
    .btn.active {
        background: rgba(255,107,107,.2) !important;
        border-color: #ff6b6b !important;
        color: #ff6b6b !important;
    }

    @keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

    @keyframes slideOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

/* Removed Add Movie/Music buttons - use SHEETS import only */


/* === WIKT (final layout) ================================================== */
:root{
  --wikt-max-w: min(90vw, 880px);  /* responsywna szerokość obszaru WIKT */

  --title-fs: 28px;
  --title-lh: 1.2;
  --title-slot-h: calc(2 * var(--title-fs) * var(--title-lh)); /* 2 wiersze na TITLE */

  /* Kolory zgodnie ze specyfikacją WIKT */
  --title-color:#ffffff;         /* TITLE: biały */
  --credit-color:#b4b4b4;        /* DIRECTOR / ARTIST / AUTHOR: szary */
  --cast-color:#979595;          /* CAST: szary */
  --meta-color:#6f6e6e;          /* YEAR/GENRE/DURATION/TYPE/WHERE: ciemnoszary */
  --desc-color:#979595;          /* OPIS (description): szary */
  --line:#6f6e6e33;

  /* Oceny - poprawione kolory zgodnie ze specyfikacją */
  --c-imdb:#F5C518; --c-rt:#FF4B3A; --c-meta:#00c117;
  --c-disc:#F7931E; --c-crit:#9557ff; --c-spotify:#00f5c5; --c-you:#2569CC;
  /* BOOKS ratings: Hardcover, Google Books, Rakuten, Lubimyczytac */
  --c-hard:#6AF4FF; --c-goob:#CA7FFF; --c-rak:#BF0005; --c-lub:#FF6A15;

  /* Ikony - stany ON/OFF */
  --icon:rgba(255,255,255,.85);
  --icon-dim:#979595;              /* Ikony OFF: szary */
  --icon-rate-on:#AFADFF;          /* RATE ON: fioletowy */
  --icon-watchlist-on:#93FFF1;     /* WATCHLIST ON: turkusowy */
  --icon-fav-on:#FCB8F9;           /* FAVOURITES ON: różowy */
  --icon-page-arrows:#6F6E6E;      /* PAGE UP/DOWN: ciemnoszary */

  --gap-v: 8px;  /* dopasowane do WK (8px jak subtitle i meta) */
  --g: 15px;      /* margines wewnętrzny WIKT - zredukowany z 30px do 15px (jak gap plakat-title) */
}

/* Kontener modala – brak scrolla wewn., stała wysokość */
#movieDetailModal .modal-content,
#musicDetailModal .modal-content,
#universalDetailModal .modal-content{
  width: var(--wikt-max-w);
  height: auto;               /* rozciągnij w pionie */
}
#movieDetailModal .modal-body,
#musicDetailModal .modal-body,
#universalDetailModal .modal-body{
  padding: 0;                 /* 🔧 ZMIANA: usunięto padding - teraz w .detail-page */
  height: auto;               /* rozciągnij w pionie */
}

/* 🔧 NOWE: Padding przeniesiony do .detail-page (żeby tło sięgało do brzegów) */
.detail-page {
  padding: var(--g);          /* 15px padding wewnętrzny */
}

/* Wyrównanie TYPE/WHERE na tej samej wysokości - kompensacja różnicy w wysokości plakatu */
/* MUSIC: plakat 240px (1:1), MOVIES: plakat 360px (2:3) = różnica 120px */
/* Przesuwamy TYPE/WHERE w MUSIC o połowę różnicy (60px) w dół */
#universalDetailModal .meta-actions-row.music-type {
  padding-top: 60px;  /* kompensuje różnicę w wysokości plakatu (120px/2 = 60px) */
}

/* Responsywność dla małych ekranów - WIKT ma być zawsze dynamiczny w pionie */
@media (max-width: 768px) {
  /* Avatar Gallery Mobile */
  #avatarGalleryModal .modal-content {
    max-width: 95vw !important;
    max-height: 90vh !important;
    padding: 15px !important;
  }
  
  #avatarGalleryModal .modal-header h2 {
    font-size: 18px !important;
  }
  
  #avatarGalleryGrid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
    padding: 10px !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
  }
  
  #avatarGalleryGrid .avatar-option img {
    width: 50px !important;
    height: 75px !important;
    border-radius: 4px !important;
  }
  
  /* Responsywność dla małych ekranów - WIKT ma być zawsze dynamiczny w pionie */
  :root {
    --wikt-max-w: 95vw;
    --g: 10px;
  }
  
  #movieDetailModal .modal-content,
  #musicDetailModal .modal-content,
  #universalDetailModal .modal-content {
    width: 95vw;
    height: auto;  /* dynamiczna wysokość w pionie */
    max-height: 85vh;  /* maksymalna wysokość z przewijaniem */
    overflow-y: auto;  /* przewijanie gdy przekroczy max-height */
  }
  
  .modal-content {
    width: 95vw;
    max-height: 85vh;
    border-radius: 15px;
  }
}

@media (max-width: 480px) {
  :root {
    --wikt-max-w: 98vw;
    --g: 8px;
  }

  /* Even smaller icons for very small screens */
  .nav-item img, .nav-menu img {
    width: 28px !important;
    height: 28px !important;
  }

  .search-icon {
    width: 18px !important;
    height: 18px !important;
  }

  .nav-menu {
    gap: 10px;
  }
  
  #movieDetailModal .modal-content,
  #musicDetailModal .modal-content,
  #universalDetailModal .modal-content {
    width: 98vw;
    height: auto;  /* dynamiczna wysokość w pionie */
    max-height: 90vh;  /* maksymalna wysokość z przewijaniem */
    overflow-y: auto;  /* przewijanie gdy przekroczy max-height */
  }
  
  .modal-content {
    width: 98vw;
    max-height: 90vh;
    border-radius: 10px;
  }
  
  /* === EDIT MODAL MOBILE - 480px === */
  #editLargeModal .modal-content {
    padding: 12px;
  }
  
  #editLargeModal .modal-header h2 {
    font-size: 16px;
    margin-bottom: 8px;
  }
  
  /* 📱 MOBILE BUTTON GRID SYSTEM */
  /* Hide all form fields and poster by default on mobile */
  #editLargeModal .edit-layout-container,
  #editLargeModal .edit-compact-line,
  #editLargeModal .edit-fields-container,
  #editLargeModal #editPosterPreview,
  #editLargeModal #editFileInfo,
  #editLargeModal hr {
    display: none !important;
  }
  
  /* Show button grid container */
  #editLargeModal #mobileEditButtonGrid {
    display: block !important;
  }
  
  /* Mobile field toggle button styles */
  .mobile-field-btn {
    padding: 8px 10px;
    font-size: 12px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    color: #ecf0f1;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    text-align: center;
    font-weight: 500;
  }
  
  .mobile-field-btn:active {
    background: rgba(255,255,255,0.15);
    transform: scale(0.98);
  }
  
  .mobile-field-btn.active {
    background: rgba(76, 175, 80, 0.25);
    border-color: rgba(76, 175, 80, 0.5);
    color: #4CAF50;
  }
  
  /* Mobile button rows */
  .mobile-btn-row {
    display: grid;
    gap: 6px;
    margin-bottom: 8px;
  }
  
  .mobile-btn-row.cols-2 {
    grid-template-columns: 1fr 1fr;
  }
  
  .mobile-btn-row.cols-3 {
    grid-template-columns: 1fr 1fr 1fr;
  }
  
  .mobile-btn-row.cols-1 {
    grid-template-columns: 1fr;
  }
  
  /* Section headers for mobile */
  .mobile-section-header {
    font-size: 13px;
    font-weight: bold;
    color: #2196F3;
    margin: 12px 0 8px 0;
    padding: 6px 8px;
    background: rgba(33, 150, 243, 0.1);
    border-left: 3px solid #2196F3;
    border-radius: 4px;
  }
  
  .mobile-section-header.enrichment {
    color: #4CAF50;
    background: rgba(76, 175, 80, 0.1);
    border-left-color: #4CAF50;
  }
  
  /* Expanded field containers */
  .mobile-field-expanded {
    margin: 8px 0;
    padding: 12px;
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    animation: slideDown 0.2s ease-out;
  }
  
  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
      max-height: 0;
    }
    to {
      opacity: 1;
      transform: translateY(0);
      max-height: 500px;
    }
  }
  
  /* Expanded field styles */
  .mobile-field-expanded input,
  .mobile-field-expanded textarea {
    width: 100%;
    padding: 10px;
    font-size: 13px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    color: #ecf0f1;
    margin-bottom: 8px;
  }
  
  .mobile-field-expanded textarea {
    min-height: 100px;
    resize: vertical;
  }
  
  .mobile-field-expanded label {
    display: block;
    font-size: 11px;
    color: rgba(255,255,255,0.6);
    margin-bottom: 4px;
    font-weight: 500;
  }
  
  /* Poster expanded view */
  #mobilePosterExpanded {
    text-align: center;
  }
  
  #mobilePosterExpanded img {
    max-width: 100%;
    max-height: 300px;
    border-radius: 8px;
    margin-bottom: 12px;
  }
  
  /* Hide desktop h3 headers on mobile */
  #editLargeModal h3 {
    display: none !important;
  }
  
  /* Action buttons stay visible */
  #editLargeModal .button-group {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
  }
  
  #editLargeModal .button-group .btn {
    padding: 10px !important;
    font-size: 13px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  }
  
  /* Ratings line - wszystkie inputy pełnej szerokości */
  #editRatingsLine .edit-compact-input {
    width: 100% !important;
  }
  
  /* Selective enrich modal - mniejszy */
  #selectiveEnrichModal {
    width: calc(100vw - 30px) !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 16px !important;
  }
}

@media (max-width: 768px) {
  /* === EDIT MODAL MOBILE - 768px === */
  #editLargeModal .modal-content {
    padding: 20px;
  }
  
  /* Layout plakatu - mniej szczelny ale nadal pionowy */
  .edit-poster-preview {
    width: 180px !important;
    height: 270px !important;
    margin: 0 auto 15px auto !important;
  }
  
  .edit-poster-preview.music {
    width: 240px !important;
    height: 240px !important;
  }
  
  /* Linie - 2 kolumny gdy możliwe */
  .edit-compact-line {
    flex-wrap: wrap !important;
  }
  
  .edit-compact-line .edit-compact-input[style*="flex: 1"] {
    flex: 1 1 calc(50% - 10px) !important;
    min-width: 120px !important;
  }
}

/* SHELL WIKT: main (nagłówek + dane) + footer (separator + rekomendacje) */
.detail-page{
  display:flex; flex-direction:column;
  height:100%;
  padding: 15px;  /* 15px jak nowy padding WK */
  box-sizing: border-box;
  border-radius: 20px;  /* Dopasuj do modal-content */
  overflow: hidden;  /* Ukryj wystające tło */
}
.detail-main{ flex:1 1 auto; display:block; }       /* wszystko nad rekomendacjami */
.detail-footer{ 
  flex:0 0 auto;                     /* stałe miejsce na reco */
  margin-top: 15px;                  /* zmienione z 11px na 15px dla spójności */
}

/* HEAD: plakat/okładka + prawa kolumna */
.detail-header{ display:flex; gap:15px; }  /* 15px gap plakat → treść (jak padding) pozostaje bez zmian */
.detail-poster{
  width:240px; min-width:240px; max-width:240px;
  border-radius:14px; border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  cursor: pointer; /* Klikalne plakaty w WIKT */
}
.detail-poster img{ width:100%; height:100%; object-fit:cover; }
.detail-poster.movie-poster{ height:360px; }   /* 2:3 (MOVIES) */
.detail-poster.music-poster{ height:240px; }   /* 1:1 (MUSIC) */
.detail-poster.book-poster{ height:360px; }    /* 2:3 (BOOKS - jak filmy) */

/* POSTER ZOOM OVERLAY (tylko w WIKT) */
.poster-zoom-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8); /* Czarne tło 80% nieprzezroczystości */
  z-index: 10000; /* Nad WIKT modal (9999) */
  justify-content: center;
  align-items: center;
  pointer-events: none; /* Nie blokuj kliknięć w tło */
}

.poster-zoom-overlay.active {
  display: flex;
}

.poster-zoom-image {
  height: 70vh; /* STAŁA wysokość dla wszystkich obrazów - mobile */
  width: auto; /* Szerokość dostosuje się automatycznie */
  max-width: 90vw; /* Nie wyjdź poza ekran */
  object-fit: contain;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
  pointer-events: auto; /* Obraz klikalny (ale nic nie robi) */
}

/* Desktop - powiększ o 20% */
@media (min-width: 769px) {
  .poster-zoom-image {
    height: 84vh; /* 70vh * 1.2 = 84vh */
  }
}

.poster-zoom-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none; /* Bez tła jak w WIKT */
  border: none;
  color: #ffffff;
  font-size: 32px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  z-index: 10001;
  pointer-events: auto; /* X klikalny */
}

.poster-zoom-close:hover {
  opacity: 0.7;
}

/* Prawa kolumna – stałe sloty, sztywne odstępy */
.detail-info{
  display:grid;
  row-gap: 0;  /* usuwamy gap, używamy marginów na elementach */
  grid-template-rows:
    minmax(var(--title-slot-h), var(--title-slot-h))  /* TITLE – zawsze 2 linie */
    auto      /* kredyty */
    auto      /* meta */
    22px      /* ratings – rezerwacja miejsca */
    auto      /* opis */
    10px;     /* nawigacja PgDown/PgUp pod opisem */
}

/* TITLE: zawsze 2 linie wysokości */
.title-slot{ min-height:var(--title-slot-h); display:flex; align-items:flex-start; margin-bottom: 6px; }
.title-slot h1{
  margin:0; color:var(--title-color); font-size:var(--title-fs); line-height:var(--title-lh);
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* Kolory danych */
.credits-block{ color: var(--credit-color); margin-bottom: 0; }
.detail-subtitle{ margin-bottom: 6px; }
.credits-block .cast{ color: var(--cast-color); }
.credits-block > *:not(:last-child) { margin-bottom: 6px; }
.cast{ color: var(--cast-color); font-size: 14px; margin-bottom: 6px; min-height: 17px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* v2: CAST zawsze rezerwuje 17px, 1 linia */
.item-studio{ color: #838181; font-size: 12px; margin-bottom: 6px; min-height: 15px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* BRAND: 1 linia */
.meta-block{ color: var(--meta-color); font-size: 14px; margin-bottom: 6px; }  /* 14px = identyczny rozmiar jak CREW (.cast) */
a.credit-link{ color: inherit; text-decoration:none; border:0; }
a.credit-link:hover{ color:#fc8b53; }

/* Oceny: stała min-wysokość -> nie skaczą */
.ratings-row{ display:flex; gap:16px; align-items:center; white-space:nowrap; min-height:22px; margin-bottom: 6px; }
.ratings-row .r{ font-weight:400; letter-spacing:.2px; font-size:14px; }
.ratings-row .r.imdb{color:var(--c-imdb)} .r.rt{color:var(--c-rt)} .r.meta{color:var(--c-meta)}
.ratings-row .r.disc{color:var(--c-disc)} .r.crit{color:var(--c-crit)} .r.spoti{color:var(--c-spotify)}
.ratings-row .r.hard{color:var(--c-hard)} .r.goob{color:var(--c-goob)} .r.rak{color:var(--c-rak)} .r.lub{color:var(--c-lub)}
.ratings-row .r.you{color:var(--c-you)!important}

/* Trójkąty nawigacji opisu – oba przyciski w jednym rzędzie pod opisem */
.tri-row{ height:10px; display:flex; align-items:center; margin-bottom: 0; }
.tri-row-nav{ gap: 12px; }  /* odstęp między PgDown a PgUp */
.wikt-more-up,.wikt-more-down{
  width:0;height:0;margin:0; border-left:8px solid transparent; border-right:8px solid transparent;
  opacity:.85; transition:opacity .2s;
}
.wikt-more-down{ border-top:10px solid var(--icon-page-arrows) }
.wikt-more-up{   border-bottom:10px solid var(--icon-page-arrows) }
.wikt-more-up:hover,.wikt-more-down:hover{ opacity:1 }

/* Opis - STAŁA WYSOKOŚĆ dla WIKT - dokładnie 8 linijek */
.detail-description{
  color:var(--desc-color);
  font-size: 15px !important;  /* Single font-size */
  line-height: 1.5 !important;  /* 15px × 1.5 = 22.5px na linię */
  min-height: 180px !important;  /* 8 linijek × 22.5px = 180px */
  max-height: 180px !important;  /* 8 linijek × 22.5px = 180px */
  overflow-y: hidden; /* Ukryj przewijanie - korzystamy z trójkątów */
  padding: 0;         /* Bez paddingu */
  margin-top: 12px;   /* odstęp od RATINGS — wizualna separacja */
  display: block;     /* Zapewnij block display */
}

/* Translate wrapper (for dropdown positioning) */
.translate-wrapper {
  position: relative;
  display: inline-flex;
}

/* Language dropdown */
.translate-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 5px;
  background: rgba(30, 30, 35, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 6px 0;
  display: none;
  flex-direction: column;
  min-width: 130px;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.translate-dropdown.show {
  display: flex;
}

.translate-dropdown button {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  padding: 8px 14px;
  text-align: left;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.translate-dropdown button:hover {
  background: rgba(255, 107, 107, 0.2);
  color: white;
}

/* Loading state for translate */
.translate-btn.loading img {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* TYPE/WHERE + IKONY – stały rząd nad rekomendacjami */
.meta-actions-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:0;  /* bez gapu — kompaktowy układ */
}
.meta-actions-row .detail-meta{
  color:var(--meta-color); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.action-row{ display:flex; gap:16px; }
.action-btn{ width:40px; height:40px; font-size:30px; border:none; background:transparent; color:var(--icon-dim); cursor:pointer; }
.action-btn:hover{ color:var(--icon) }

/* Ikony IMG w action-row - hover rozjaśnia do białego */
.action-btn img {
  filter: brightness(0) invert(1);
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.action-btn:hover img {
  opacity: 1;
}

.watch-btn.active{ color:var(--icon-watchlist-on) }
.fav-btn.active{ color:var(--icon-fav-on) }
.rate-btn.active{ color:var(--icon-rate-on) }

/* Kolory dla ikon IMG w WIKT modal */
.action-btn.active.watch-btn img {
    filter: brightness(0) saturate(100%) invert(79%) sepia(73%) saturate(508%) hue-rotate(127deg) brightness(109%) contrast(101%);
}

.action-btn.active.fav-btn img {
    filter: brightness(0) saturate(100%) invert(89%) sepia(28%) saturate(1058%) hue-rotate(280deg) brightness(102%) contrast(96%);
}

/* Gwiazdka (rate) jest mniejsza w SVG - zwiększamy też w WIKT */
.action-btn .wikt-rate-icon img {
    width: 23px !important;
    height: 23px !important;
}

/* Translate icon - dopasuj do wysokości pozostałych (20px jak edit, rate) */
.action-btn .wikt-translate-icon img {
    width: 20px !important;
    height: 20px !important;
}

/* Separator + rekomendacje — tylko nasz separator, bez dodatkowych bordera */
.detail-sep{ height:1px; background:var(--meta-color); opacity:.2; margin:4px 0 8px 0; }  /* 4px góra, 8px dół */
#movieDetailModal .recommendations,
#musicDetailModal .recommendations,
#universalDetailModal .recommendations{ border-top:none!important; padding-top:0!important; margin-top:8px!important; }
.reco-title{ color:var(--desc-color); font-weight:700; letter-spacing:.6px; text-transform:uppercase; margin-bottom:8px; }
.rec-reason{ color:#569ea6; font-weight:600; letter-spacing:.2px }
.rec-reason:hover{ color:#7bc0c8 }

/* Dropdowny filtrów: czarne tło, białe litery */
select.filter-select, .form-select, .filter-select{
  background:#0a0a0a !important; color:#fff !important;
  border-color:rgba(255,255,255,0.15) !important;
}
.filter-select option, .form-select option{ background:#0a0a0a; color:#fff; }

/* Icons System - Automatic SVG scaling and replacement */
.icon-svg {
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
}

/* GŁÓWNE MIEJSCA - BELKA NAWIGACYJNA - 40px wysokości */
.navbar .icon-svg,
.main-nav .icon-svg,
.header-nav .icon-svg,
.top-bar .icon-svg,
.nav-menu .icon-svg {
  width: auto;
  height: 40px;
}

/* EXPLICIT SIZE FOR NAVIGATION ICONS */
#moviesIcon .icon-svg,
#musicIcon .icon-svg,
#watchlistIcon .icon-svg,
#favoritesIcon .icon-svg,
#searchIcon .icon-svg,
#settingsIconSpan .icon-svg,
#profileIconSpan .icon-svg {
  width: auto !important;
  height: 40px !important;
}

/* POZOSTAŁE MIEJSCA - zróżnicowane rozmiary */
.settings-panel .icon-svg,
.btn .icon-svg {
  width: auto;
  height: 30px;
}

/* MODALS (WIKT, EDIT) - 25px wysokości */
.modal .icon-svg,
.form-group-with-icon .icon-svg {
  width: auto;
  height: 25px;
}

/* Małe ikony w settings-note (ARCHITECTURE) - 16px */
.settings-note .icon-svg {
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: middle;
}

/* SETTINGS Icons - 30px */
.settings-btn .icon-svg {
  width: auto;
  height: 30px;
  flex-shrink: 0;
  margin-right: 8px;
  vertical-align: middle;
}

/* SETTINGS Button Styles - RESPONSIVE LAYOUT */
.settings-actions {
  display: flex;
  gap: 12px;
  width: 100%;
}

.settings-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  font-weight: 500;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  gap: 8px;
  min-height: 48px;
  white-space: nowrap;
}

/* Orange buttons (primary actions) */
.settings-btn-orange {
  background: #FF6B35;
  color: white;
}
.settings-btn-orange:hover {
  background: #E55A2B;
  transform: translateY(-2px);
}
.settings-btn-orange .icon-svg {
  fill: white;
}

/* White buttons (secondary actions) */
.settings-btn-white {
  background: white;
  color: #333;
  border: 1px solid #ddd;
}
.settings-btn-white:hover {
  background: #f5f5f5;
  transform: translateY(-2px);
}
.settings-btn-white .icon-svg {
  fill: #333;
}

/* Gray buttons (tertiary actions) */
.settings-btn-gray {
  background: #6B7280;
  color: #D1D5DB;
}
.settings-btn-gray:hover {
  background: #4B5563;
  transform: translateY(-2px);
}
.settings-btn-gray .icon-svg {
  fill: #D1D5DB;
}

/* Green buttons (approve/confirm actions) */
.settings-btn-green {
  background: #10B981;
  color: white;
}
.settings-btn-green:hover {
  background: #059669;
  transform: translateY(-2px);
}
.settings-btn-green .icon-svg {
  fill: white;
}

/* Red buttons (cancel/reject actions) */
.settings-btn-red {
  background: #EF4444;
  color: white;
}
.settings-btn-red:hover {
  background: #DC2626;
  transform: translateY(-2px);
}
.settings-btn-red .icon-svg {
  fill: white;
}

/* Architecture header (non-clickable) */
.settings-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: #6B7280;
  color: #D1D5DB;
  cursor: default;
}
.settings-header .icon-svg {
  width: auto;
  height: 20px;
  flex-shrink: 0;
  margin-right: 8px;
  vertical-align: middle;
  fill: #D1D5DB;
}

/* Ikony w sekcji architecture info - małe 16px */
.settings-note .icon-svg {
  width: auto;
  height: 16px;
  margin-right: 6px;
  vertical-align: middle;
}

/* Modal Form Icons - 40px */
.form-group-with-icon .icon-svg {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  fill: rgba(255, 255, 255, 0.6);
  transition: fill 0.2s ease;
}

/* ACTION Icons w listach - 25px dla spójności */
.item-action-btn .icon-svg {
  width: auto;
  height: 25px;
}

/* WIKT Action Icons - 25px dla przycisków akcji w WIKT */
.action-btn .icon-svg {
  width: auto;
  height: 25px;
}

/* EDIT Icons - 24px dla małych przycisków */
.edit-btn .icon-svg {
  width: 24px;
  height: 24px;
}

/* LIST/VIEW Icons - 20px dla przełączników widoku */
.view-btn .icon-svg {
  width: 20px;
  height: 20px;
}

/* Placeholder Icons - 24px */
.list-poster .icon-svg {
  width: 24px;
  height: 24px;
}

/* TOP LIST PAGE - grouped items (directors/actors/artists) */
.toplist-grouped-list {
  padding: 20px;
  display: none;
}

.toplist-group {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
}

.toplist-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
}

.toplist-group-header:hover {
  background: rgba(255, 255, 255, 0.05);
}

.toplist-group-name {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}

.toplist-group-count {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
}

.toplist-group-avg {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 14px;
  margin-left: 8px;
}

.toplist-group-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  padding: 16px;
}

@media (max-width: 768px) {
  .toplist-group-items {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
}

/* TOP LIST - Collapsible groups */
.toplist-group-header {
  cursor: pointer;
}

.toplist-group-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.toplist-group-toggle {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  margin-left: 12px;
  transition: transform 0.2s ease;
}

.toplist-group-header:hover .toplist-group-toggle {
  color: #ff6b6b;
}

/* Collapsed state - hide items */
.toplist-group.collapsed .toplist-group-items {
  display: none;
}

/* Global toggle button for expand/collapse all */
#toplistToggleAll {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.7);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

#toplistToggleAll:hover {
  background: rgba(255, 107, 107, 0.2);
  border-color: #ff6b6b;
  color: #ff6b6b;
}

/* TOP LIST - Rating badge for TOP MOVIES/MUSIC cards */
.toplist-card-wrapper {
  position: relative;
}

.toplist-rating-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
  color: white;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 4px;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.toplist-list-wrapper {
  position: relative;
}

.toplist-list-wrapper .toplist-rating-badge {
  /* Position on poster's top-left corner in WL view */
  top: 8px;
  left: 8px;
  right: auto;
  transform: none;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* LOADING RECOMMENDATIONS OVERLAY                                            */
/* ═══════════════════════════════════════════════════════════════════════════ */

#loadingRecsOverlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(10, 10, 10, 0.92);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.6s ease;
  pointer-events: all;
}

#loadingRecsOverlay.fade-out {
  opacity: 0;
  pointer-events: none;
}

.loading-recs-grid {
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: flex-start;
  padding: 0 20px;
  max-width: 1100px;
}

.loading-recs-col {
  flex: 1;
  max-width: 320px;
  min-width: 200px;
  text-align: center;
}

.loading-recs-header {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 14px;
  white-space: nowrap;
}

.loading-rec-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 15px;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  opacity: 1;
  transition: opacity 0.4s ease;
}

.loading-rec-card.swap-out {
  opacity: 0;
}

.loading-rec-card .rec-poster {
  width: 100%;
  height: auto; /* override general .rec-poster height: 120px */
  min-height: 80px; /* fallback for emoji placeholder */
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.loading-rec-card .rec-poster img {
  width: 100%;
  height: auto; /* natural proportions: posters tall, album art square */
  display: block;
}

.loading-rec-card .rec-poster .rec-emoji {
  font-size: 48px;
  opacity: 0.3;
}

.loading-rec-card .rec-info {
  padding: 12px 14px 14px;
  text-align: left;
}

.loading-rec-card .rec-title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.loading-rec-card .rec-creator {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.loading-rec-card .rec-meta {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.loading-recs-status {
  margin-top: 28px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #ee5a24;
  text-align: center;
  animation: loadingPulse 2s ease-in-out infinite;
}

@keyframes loadingPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* Mobile: stack vertically or shrink */
@media (max-width: 768px) {
  .loading-recs-grid {
    flex-direction: row;
    gap: 10px;
    padding: 0 10px;
  }
  .loading-recs-col {
    min-width: 0;
    max-width: 33%;
  }
  .loading-recs-header {
    font-size: 9px;
    letter-spacing: 1px;
    margin-bottom: 8px;
  }
  .loading-rec-card .rec-info {
    padding: 8px 10px 10px;
  }
  .loading-rec-card .rec-title {
    font-size: 12px;
  }
  .loading-rec-card .rec-creator {
    font-size: 10px;
  }
  .loading-rec-card .rec-meta {
    font-size: 9px;
  }
  .loading-recs-status {
    font-size: 11px;
    letter-spacing: 2px;
    margin-top: 18px;
  }
}