/* ==========================================================================
   THEMES — dark neutral backgrounds, one saturated accent for highlights only.
   Backgrounds stay calm: --bg-dark < --surface (cards) < --surface-2 (inputs, chips).
   Bright = only what must stand out: primary buttons, active tabs/chips, key text.
   Picker list: CRM_THEMES in admin.js.
   ========================================================================== */
:root { /* Nordic Ice */
    --bg-dark: #0d0e0f;
    --bg-rgb: 13, 14, 15;
    --surface-rgb: 22, 24, 27;
    --surface-solid: #141518;
    --surface-2: #202327;
    --surface-2-rgb: 32, 35, 39;
    --card-bg: rgba(22, 24, 27, 0.95);
    --glass-bg: rgba(32, 35, 39, 0.9);
    --glass-border: rgba(255, 255, 255, 0.09);
    --border-color: rgba(255, 255, 255, 0.1);
    --text: #f3f4f6;
    --text-main: #f3f4f6;
    --text-muted: #9ca3ae;
    --primary: #38a8ff;
    --primary-rgb: 56, 168, 255;
    --primary-glow: rgba(56, 168, 255, 0.35);
    --accent: #256393;
    --accent-rgb: 37, 99, 147;
    --on-primary: #03121f;
    --pos: #34d399;
    --pos-rgb: 52, 211, 153;
    --neg: #ff6363;
    --neg-rgb: 255, 99, 99;
}

body.theme-bordeaux { /* Bordeaux */
    --bg-dark: #0f0d0d;
    --bg-rgb: 15, 13, 13;
    --surface-rgb: 27, 22, 23;
    --surface-solid: #181415;
    --surface-2: #272022;
    --surface-2-rgb: 39, 32, 34;
    --card-bg: rgba(27, 22, 23, 0.95);
    --glass-bg: rgba(39, 32, 34, 0.9);
    --glass-border: rgba(255, 255, 255, 0.09);
    --border-color: rgba(255, 255, 255, 0.1);
    --text: #f3f4f6;
    --text-main: #f3f4f6;
    --text-muted: #9ca3ae;
    --primary: #f55c8c;
    --primary-rgb: 245, 92, 140;
    --primary-glow: rgba(245, 92, 140, 0.35);
    --accent: #8e3853;
    --accent-rgb: 142, 56, 83;
    --on-primary: #1f0510;
    --pos: #34d399;
    --pos-rgb: 52, 211, 153;
    --neg: #ff6363;
    --neg-rgb: 255, 99, 99;
}

body.theme-forest { /* Emerald */
    --bg-dark: #0d0f0e;
    --bg-rgb: 13, 15, 14;
    --surface-rgb: 22, 27, 24;
    --surface-solid: #141816;
    --surface-2: #202724;
    --surface-2-rgb: 32, 39, 36;
    --card-bg: rgba(22, 27, 24, 0.95);
    --glass-bg: rgba(32, 39, 36, 0.9);
    --glass-border: rgba(255, 255, 255, 0.09);
    --border-color: rgba(255, 255, 255, 0.1);
    --text: #f3f4f6;
    --text-main: #f3f4f6;
    --text-muted: #9ca3ae;
    --primary: #28d68c;
    --primary-rgb: 40, 214, 140;
    --primary-glow: rgba(40, 214, 140, 0.35);
    --accent: #1c7c53;
    --accent-rgb: 28, 124, 83;
    --on-primary: #03170d;
    --pos: #34d399;
    --pos-rgb: 52, 211, 153;
    --neg: #ff6363;
    --neg-rgb: 255, 99, 99;
}

body.theme-amber { /* Amber */
    --bg-dark: #0f0e0d;
    --bg-rgb: 15, 14, 13;
    --surface-rgb: 27, 25, 22;
    --surface-solid: #181614;
    --surface-2: #272520;
    --surface-2-rgb: 39, 37, 32;
    --card-bg: rgba(27, 25, 22, 0.95);
    --glass-bg: rgba(39, 37, 32, 0.9);
    --glass-border: rgba(255, 255, 255, 0.09);
    --border-color: rgba(255, 255, 255, 0.1);
    --text: #f3f4f6;
    --text-main: #f3f4f6;
    --text-muted: #9ca3ae;
    --primary: #ffb020;
    --primary-rgb: 255, 176, 32;
    --primary-glow: rgba(255, 176, 32, 0.35);
    --accent: #936717;
    --accent-rgb: 147, 103, 23;
    --on-primary: #1f1300;
    --pos: #34d399;
    --pos-rgb: 52, 211, 153;
    --neg: #ff6363;
    --neg-rgb: 255, 99, 99;
}

body.theme-indigo { /* Indigo */
    --bg-dark: #0d0d0f;
    --bg-rgb: 13, 13, 15;
    --surface-rgb: 22, 22, 27;
    --surface-solid: #141418;
    --surface-2: #202127;
    --surface-2-rgb: 32, 33, 39;
    --card-bg: rgba(22, 22, 27, 0.95);
    --glass-bg: rgba(32, 33, 39, 0.9);
    --glass-border: rgba(255, 255, 255, 0.09);
    --border-color: rgba(255, 255, 255, 0.1);
    --text: #f3f4f6;
    --text-main: #f3f4f6;
    --text-muted: #9ca3ae;
    --primary: #8c8cff;
    --primary-rgb: 140, 140, 255;
    --primary-glow: rgba(140, 140, 255, 0.35);
    --accent: #535393;
    --accent-rgb: 83, 83, 147;
    --on-primary: #0b0b26;
    --pos: #34d399;
    --pos-rgb: 52, 211, 153;
    --neg: #ff6363;
    --neg-rgb: 255, 99, 99;
}

body.theme-synthwave { /* Orchid */
    --bg-dark: #0f0d0f;
    --bg-rgb: 15, 13, 15;
    --surface-rgb: 26, 22, 27;
    --surface-solid: #171418;
    --surface-2: #262027;
    --surface-2-rgb: 38, 32, 39;
    --card-bg: rgba(26, 22, 27, 0.95);
    --glass-bg: rgba(38, 32, 39, 0.9);
    --glass-border: rgba(255, 255, 255, 0.09);
    --border-color: rgba(255, 255, 255, 0.1);
    --text: #f3f4f6;
    --text-main: #f3f4f6;
    --text-muted: #9ca3ae;
    --primary: #d666ff;
    --primary-rgb: 214, 102, 255;
    --primary-glow: rgba(214, 102, 255, 0.35);
    --accent: #7c3e93;
    --accent-rgb: 124, 62, 147;
    --on-primary: #1a0524;
    --pos: #34d399;
    --pos-rgb: 52, 211, 153;
    --neg: #ff6363;
    --neg-rgb: 255, 99, 99;
}

body.theme-slate { /* Mono */
    --bg-dark: #0e0e0e;
    --bg-rgb: 14, 14, 14;
    --surface-rgb: 24, 24, 24;
    --surface-solid: #161616;
    --surface-2: #242424;
    --surface-2-rgb: 36, 36, 36;
    --card-bg: rgba(24, 24, 24, 0.95);
    --glass-bg: rgba(36, 36, 36, 0.9);
    --glass-border: rgba(255, 255, 255, 0.09);
    --border-color: rgba(255, 255, 255, 0.1);
    --text: #f3f4f6;
    --text-main: #f3f4f6;
    --text-muted: #9ca3ae;
    --primary: #f5f5f7;
    --primary-rgb: 245, 245, 247;
    --primary-glow: rgba(245, 245, 247, 0.35);
    --accent: #8d8d8e;
    --accent-rgb: 141, 141, 142;
    --on-primary: #0b0b0c;
    --pos: #34d399;
    --pos-rgb: 52, 211, 153;
    --neg: #ff6363;
    --neg-rgb: 255, 99, 99;
}

body.theme-royal { /* Copper */
    --bg-dark: #0f0e0d;
    --bg-rgb: 15, 14, 13;
    --surface-rgb: 27, 23, 22;
    --surface-solid: #181514;
    --surface-2: #272320;
    --surface-2-rgb: 39, 35, 32;
    --card-bg: rgba(27, 23, 22, 0.95);
    --glass-bg: rgba(39, 35, 32, 0.9);
    --glass-border: rgba(255, 255, 255, 0.09);
    --border-color: rgba(255, 255, 255, 0.1);
    --text: #f3f4f6;
    --text-main: #f3f4f6;
    --text-muted: #9ca3ae;
    --primary: #ff7a3d;
    --primary-rgb: 255, 122, 61;
    --primary-glow: rgba(255, 122, 61, 0.35);
    --accent: #934927;
    --accent-rgb: 147, 73, 39;
    --on-primary: #1f0b02;
    --pos: #34d399;
    --pos-rgb: 52, 211, 153;
    --neg: #ff6363;
    --neg-rgb: 255, 99, 99;
}

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

body {
    font-family: 'Inter', 'Outfit', system-ui, -apple-system, sans-serif;
    background-color: var(--bg-dark);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
}

.app-container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Header */
.app-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    gap: 1rem;
}

.logo-nav-group {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.logo-section {
    min-width: 225px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.logo-section h1 {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
}

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

.search-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.glass-input,
.glass-input-small {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.9rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-input-small {
    width: 140px;
}

.glass-input-small:focus {
    width: 200px;
}

.glass-input {
    width: 100%;
}

.glass-input:focus,
.glass-input-small:focus {
    outline: none;
    border-color: var(--primary);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.15);
}

/* Beautiful custom select styles */
select.glass-input,
select.glass-input-small {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1em;
    padding-right: 2.5rem;
    cursor: pointer;
}

/* Fix option dark theme readability */
select.glass-input option,
select.glass-input-small option {
    background-color: var(--bg-dark);
    color: var(--text-main);
}

.header-stats {
    background: rgba(var(--primary-rgb), 0.08);
    border: 1px solid rgba(var(--primary-rgb), 0.15);
    padding: 0.25rem 0.6rem;
    border-radius: 20px;
    font-size: 0.78rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.header-stats span {
    color: var(--primary);
    font-weight: 600;
}

.header-actions-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

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

.app-header .btn-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.app-header .btn-icon:hover {
    color: var(--primary);
    border-color: var(--primary);
    background: rgba(var(--primary-rgb), 0.05);
}

/* Common Elements */
.btn {
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    border: none;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-primary {
    background-color: var(--primary);
    color: #000000;
    box-shadow: 0 4px 14px 0 var(--primary-glow);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px 0 var(--primary-glow);
    opacity: 0.9;
}

.btn-secondary {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-main);
}

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

.btn-text {
    background: transparent;
    color: var(--text-muted);
}

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

.glass {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
}

.glass-textarea {
    width: 100%;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 1rem;
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.95rem;
    resize: vertical;
    min-height: 200px;
}

/* Main Table Layout */
.app-main.full-width {
    width: 100%;
}

.content-area {
    background: var(--card-bg);
    backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    overflow: hidden;
}

/* Multi-Column Grid Definition */
.account-row,
.accounts-grid-header {
    display: grid;
    grid-template-columns: 35px 60px 1.2fr 1fr 1fr 220px 80px 100px;
    padding: 0.8rem 1.2rem;
    border-bottom: 1px solid var(--glass-border);
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.select-col {
    display: flex;
    justify-content: center;
}

.select-col input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--primary);
}

.bulk-action-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(30, 41, 59, 0.9);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--primary);
    padding: 0.8rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

.bulk-stats {
    font-size: 0.9rem;
    font-weight: 600;
}

.bulk-stats span {
    color: var(--primary);
}

.bulk-buttons {
    display: flex;
    gap: 0.8rem;
    align-items: center;
}

.btn-small {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
}

.tag-dropdown-container {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    background: var(--card-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 0.5rem;
    min-width: 150px;
    z-index: 200;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.dropdown-item {
    padding: 0.5rem 0.8rem;
    font-size: 0.85rem;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.2s;
}

.dropdown-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.accounts-grid-header {
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.account-row:hover {
    background: rgba(255, 255, 255, 0.02);
}

/* Column Specifics */
.acc-seq {
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.85rem;
}

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

.account-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    overflow: hidden;
    min-width: 0;
}

.account-main-id {
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.9rem;
}

.field-pill {
    background: rgba(255, 255, 255, 0.05);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detail-item label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}

.detail-field-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    gap: 0.8rem;
}

.detail-value {
    font-size: 0.95rem;
    color: var(--text-main);
    word-break: break-all;
    flex: 1;
}

.btn-field-copy {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-field-copy:hover {
    color: var(--primary);
    background: rgba(var(--primary-rgb), 0.1);
}

/* Notes Input */
.note-input {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    color: var(--text-main);
    font-size: 0.85rem;
    width: 100%;
    font-family: inherit;
    transition: all 0.2s;
}

.note-input:focus {
    outline: none;
    border-color: var(--primary);
    background: rgba(0, 0, 0, 0.3);
}

.feature-field {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.copy-group {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.btn-mini-copy {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.7rem;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 3px;
}

.btn-mini-copy:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.tfa-indicator {
    display: flex;
    justify-content: center;
}

.tfa-badge {
    color: #10b981;
}

.tfa-badge.none {
    color: var(--text-muted);
    opacity: 0.2;
}

/* Actions */
.action-btns {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.btn-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--glass-border);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-icon:hover {
    color: var(--text-main);
    border-color: var(--primary);
}

.btn-icon.delete:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border-color: #ef4444;
}

/* Modal Overlay & Details */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    transition: opacity 0.3s;
}

/* Confirm modal should be above other modals */
#confirm-modal {
    z-index: 1100;
}


.modal-content {
    width: 90%;
    max-width: 600px;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.confirm-modal {
    max-width: 400px !important;
    text-align: center;
    padding: 2.5rem !important;
}

.modal-icon-header {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
    animation: scaleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes scaleIn {
    from {
        transform: scale(0.5);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.confirm-modal h2 {
    margin-bottom: 0.8rem;
    font-size: 1.6rem;
    color: var(--text-main);
}

.confirm-modal .modal-hint {
    margin-bottom: 2rem;
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.delete-btn {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: white !important;
    box-shadow: 0 4px 14px 0 rgba(239, 68, 68, 0.4) !important;
    border: none !important;
}

.delete-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px 0 rgba(239, 68, 68, 0.5) !important;
}

.detail-modal {
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
}

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

.detail-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 0;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.detail-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Tag Management */
.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.3rem;
}

.tag-badge {
    padding: 1px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.tag-modal {
    max-width: 480px !important;
    max-height: 85vh !important;
    padding: 0 !important;
    background: rgba(var(--surface-rgb), 0.7) !important;
    backdrop-filter: blur(40px) saturate(150%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    overflow: hidden;
}

.tag-modal .modal-header {
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
}

.tag-modal .modal-header h2 {
    font-size: 1.1rem;
    font-weight: 600;
}

.tag-creator {
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.tag-search-container {
    padding: 1rem 1.5rem 0.8rem 1.5rem;
    background: rgba(0, 0, 0, 0.15);
}

.search-input-wrapper {
    position: relative;
    width: 100%;
}

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
    opacity: 0.5;
}

.search-input {
    padding-left: 38px !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.search-input:focus {
    background: rgba(0, 0, 0, 0.4) !important;
    border-color: var(--primary) !important;
}

.tag-search-container .glass-input-small {
    width: 100%;
}

.tags-manager-list {
    max-height: 400px;
    overflow-y: auto;
    padding: 0.5rem 0;
}

.tags-manager-list::-webkit-scrollbar {
    width: 6px;
}

.tags-manager-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.tags-manager-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.15);
}

.tags-manager-list::-webkit-scrollbar-track {
    background: transparent;
}

.tag-manager-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    transition: all 0.2s;
}

.tag-manager-row:hover {
    background: rgba(255, 255, 255, 0.04);
}

.tag-manager-row:last-child {
    border-bottom: none;
}

.tag-info {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex: 1;
}

.tag-usage-count {
    font-size: 0.75rem;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 8px;
    border-radius: 12px;
}

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

.btn-icon.edit {
    color: var(--text-muted);
}

.btn-icon.edit:hover {
    color: var(--primary);
    border-color: var(--primary);
    background: rgba(var(--primary-rgb), 0.1);
}

.tag-manager-row .btn-icon.delete {
    width: 24px;
    height: 24px;
    padding: 0;
    min-width: 24px;
    font-size: 0.75rem;
    opacity: 0.6;
}

.tag-manager-row .btn-icon.delete:hover {
    opacity: 1;
}

.inline-tag-editor {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--glass-border);
    animation: slideDown 0.2s ease-out;
    flex-wrap: wrap;
}

.inline-tag-editor input[type="text"] {
    height: 28px;
    padding: 0.3rem 0.6rem;
    font-size: 0.85rem;
}


.color-presets-mini {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.color-preset-mini {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s;
}

.color-preset-mini:hover {
    transform: scale(1.1);
    border-color: var(--primary);
}

.inline-color-picker {
    width: 32px;
    height: 24px;
    padding: 0;
    border: 2px solid var(--glass-border);
    background: none;
    cursor: pointer;
    border-radius: 4px;
}


.tag-creator {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--glass-border);
}

.tag-input-group {
    display: flex;
    gap: 0.6rem;
    align-items: center;
}

.tag-input-group input[type="text"] {
    flex: 1;
    height: 36px;
}

.color-picker-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.color-picker-wrapper input[type="color"] {
    width: 36px;
    height: 36px;
    border: 2px solid var(--glass-border);
    border-radius: 6px;
    cursor: pointer;
    background: none;
    transition: all 0.2s;
    padding: 2px;
}

.color-picker-wrapper input[type="color"]:hover {
    border-color: var(--primary);
    transform: scale(1.05);
}

.color-presets-compact {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    display: none;
    background: var(--card-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 10px;
    gap: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    z-index: 100;
    display: flex;
    flex-wrap: wrap;
    width: 180px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.color-picker-wrapper:hover .color-presets-compact {
    opacity: 1;
    pointer-events: all;
}

.color-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s;
}

.color-dot:hover {
    transform: scale(1.15);
    border-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.color-dot.active {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-glow);
}

.tag-input-group button {
    width: 36px;
    height: 36px;
    padding: 0;
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Quick Tag Menu */
.quick-tag-menu {
    background: var(--card-bg);
    backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 0.5rem;
    min-width: 140px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.quick-tag-item {
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s;
    color: var(--text-main);
}

.quick-tag-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.quick-tag-search {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    padding: 6px 10px;
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.85rem;
    margin-bottom: 6px;
    transition: all 0.2s;
}

.quick-tag-search:focus {
    outline: none;
    border-color: var(--primary);
    background: rgba(255, 255, 255, 0.08);
}

.quick-tag-search::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
}

.quick-tags-container {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 300px;
    overflow-y: auto;
}

.quick-tags-container::-webkit-scrollbar {
    width: 4px;
}

.quick-tags-container::-webkit-scrollbar-thumb {
    background: var(--glass-border);
    border-radius: 2px;
}


.btn-add-tag {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    opacity: 0.5;
}

.account-row:hover .btn-add-tag {
    opacity: 1;
}

.btn-add-tag:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* Filter Panel & Search */
.search-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-panel {
    background: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--glass-border);
    padding: 1.5rem;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 0.5fr;
    gap: 2rem;
    animation: slideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.filter-group label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 0.5px;
}

.filter-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.filter-tag-pill {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    cursor: pointer;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    transition: all 0.2s;
    user-select: none;
}

.filter-tag-pill.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    box-shadow: 0 2px 8px var(--primary-glow);
}

.filter-checks {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.check-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    cursor: pointer;
    color: var(--text-main);
}

.date-inputs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.glass-input-mini {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.85rem;
}

.filter-actions {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

/* Dropdown Menu Enhancements */
.dropdown-section-title {
    padding: 8px 12px 4px;
    font-size: 0.7rem;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 600;
}

.dropdown-divider {
    height: 1px;
    background: var(--glass-border);
    margin: 4px 0;
}

.bulk-tag-search {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    padding: 6px 10px;
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.bulk-tag-search:focus {
    outline: none;
    border-color: var(--primary);
    background: rgba(255, 255, 255, 0.08);
}

.bulk-tag-search::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
}


.tags-col {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    min-height: 24px;
}

.tag-badge {
    transition: all 0.2s ease;
}

.tag-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.detail-value {
    background: rgba(0, 0, 0, 0.2);
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    font-family: monospace;
    font-size: 0.85rem;
    word-break: break-all;
    max-height: 12rem;
    overflow-y: auto;
}

.detail-value.json {
    color: #ffd8a8;
}

.detail-value.ua {
    color: #a5d8ff;
}

.detail-value::-webkit-scrollbar {
    width: 4px;
}

.detail-value::-webkit-scrollbar-thumb {
    background: var(--glass-border);
    border-radius: 2px;
}

.hidden {
    display: none;
    opacity: 0;
    pointer-events: none;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

/* Toast */
#toast-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 99999;
}

.toast {
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    padding: 0.8rem 1.2rem;
    border-radius: 8px;
    color: var(--text-main);
    border-left: 4px solid var(--primary);
    animation: toastIn 0.3s forwards;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

@keyframes toastIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes modalSlide {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-content {
    animation: modalSlide 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.empty-state {
    padding: 4rem;
    text-align: center;
    color: var(--text-muted);
}

/* Drop Zone */
.drop-zone {
    border: 2px dashed var(--glass-border);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    color: var(--text-muted);
    transition: all 0.3s;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.02);
}

.drop-zone:hover,
.drop-zone.dragover {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb), 0.05);
    color: var(--text-main);
}

.drop-zone svg {
    opacity: 0.5;
    transition: transform 0.3s;
}

.drop-zone:hover svg {
    transform: translateY(-5px);
    opacity: 1;
    color: var(--primary);
}

.upload-link {
    color: var(--primary);
    text-decoration: underline;
    font-weight: 600;
}

.import-area {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--glass-border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Module Navigation */
.module-nav {
    display: flex;
    gap: 0.4rem;
    padding: 0.35rem;
    background: rgba(var(--surface-rgb), 0.6);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
}

.module-tab,
.module-tab-link {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: #94a3b8;
    font-family: inherit;
    font-weight: 500;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    text-decoration: none;
}

.module-tab:hover,
.module-tab-link:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #f8fafc;
    border-color: rgba(255, 255, 255, 0.08);
}

.module-tab.active {
    background: rgba(var(--primary-rgb), 0.15);
    color: var(--primary);
    border-color: rgba(var(--primary-rgb), 0.35);
    box-shadow: 0 0 16px var(--primary-glow);
}

.module-tab svg {
    width: 16px;
    height: 16px;
}

.module-content {
    transition: opacity 0.3s ease;
}

.module-content.hidden {
    display: none;
}

/* Fan Pages Grid */
.fanpage-row,
.fanpages-grid-header {
    display: grid;
    grid-template-columns: 40px 50px 2fr 100px 2fr 1.5fr 120px 1.5fr 100px;
    padding: 0.8rem 1.2rem;
    border-bottom: 1px solid var(--glass-border);
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.fanpages-grid-header {
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fanpages-grid-header .header-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fanpage-row:hover {
    background: rgba(255, 255, 255, 0.02);
}

.fanpage-name {
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.9rem;
}

.country-badge {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
}

.country-flag {
    font-size: 1.2rem;
}

.country-code {
    font-weight: 600;
    color: var(--text-muted);
}

.fanpage-url {
    color: var(--primary);
    text-decoration: none;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s;
}

.fanpage-url:hover {
    color: var(--text-main);
    text-decoration: underline;
}

.account-link-badge {
    background: rgba(var(--primary-rgb), 0.1);
    border: 1px solid var(--primary);
    color: var(--primary);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.antik-id-badge {
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-family: monospace;
}

/* Form Groups */
.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 0.5rem;
}

.form-group input:focus {
    outline: none;
    border-color: var(--primary);
    background: rgba(255, 255, 255, 0.05);
}

/* Search Results Dropdown */
#account-search-results .dropdown-item {
    padding: 0.6rem 0.8rem;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s;
}

#account-search-results .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Utility Classes */
.hidden {
    display: none !important;
}

.search-wrapper {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Fan Pages Controls */
.fanpages-controls {
    padding: 1rem 1.2rem;
    background: rgba(255, 255, 255, 0.01);
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.group-controls {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.group-controls label {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Group Headers */
.group-header {
    padding: 0.8rem 1.2rem;
    background: rgba(var(--primary-rgb), 0.1);
    border-bottom: 1px solid var(--primary);
    border-left: 3px solid var(--primary);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.group-header .group-count {
    background: var(--primary);
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Country Editor */
.country-badge.editable {
    cursor: pointer;
    transition: all 0.2s;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    border: 1px solid transparent;
}

.country-badge.editable:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--glass-border);
}

.country-editor {
    display: flex;
    gap: 0.3rem;
    align-items: center;
}

.country-editor select {
    background: var(--glass-bg);
    border: 1px solid var(--primary);
    border-radius: 4px;
    padding: 0.2rem 0.4rem;
    color: var(--text-main);
    font-size: 0.8rem;
    font-family: inherit;
}

.country-editor button {
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 4px;
}
/* Clickable elements */
.account-link-badge.clickable {
    cursor: pointer;
    transition: all 0.2s;
}

.account-link-badge.clickable:hover {
    background: var(--primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.3);
}

.fanpage-url {
    cursor: pointer;
    text-decoration: none;
    color: var(--primary);
    transition: all 0.2s;
}

.fanpage-url:hover {
    color: var(--primary-light);
    text-decoration: underline;
}

/* ============================================================================
   CATALOG MODULE
   ============================================================================ */
#catalog-module {
    padding: 0;
}

.catalog-layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    min-height: calc(100vh - 140px);
}

/* ===== SIDEBAR ===== */
.catalog-sidebar {
    background: rgba(var(--surface-rgb), 0.5);
    border-right: 1px solid var(--glass-border);
    padding: 1.2rem 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.catalog-sidebar-section {}

.catalog-sidebar-title {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    padding: 0 0.6rem;
    margin-bottom: 0.5rem;
}

.catalog-filter-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    margin-bottom: 0.2rem;
}

.catalog-filter-btn:hover {
    background: rgba(255,255,255,0.05);
    color: var(--text-main);
}

.catalog-filter-btn.active {
    background: rgba(var(--primary-rgb), 0.15);
    color: #ffffff;
}

.catalog-filter-count {
    margin-left: auto;
    background: rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
}

.catalog-filter-btn.active .catalog-filter-count {
    background: rgba(var(--primary-rgb),0.25);
    color: #ffffff;
}

/* Storage bar */
.catalog-storage-bar {
    height: 4px;
    background: rgba(255,255,255,0.07);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 0.4rem;
}

.catalog-storage-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #888888);
    border-radius: 2px;
    transition: width 0.5s ease;
}

.catalog-storage-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    padding: 0 0.1rem;
}

/* ===== MAIN AREA ===== */
.catalog-main {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ===== TOOLBAR ===== */
.catalog-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.9rem 1.2rem;
    border-bottom: 1px solid var(--glass-border);
    background: rgba(var(--surface-rgb), 0.4);
    flex-shrink: 0;
}

.catalog-search-wrap {
    position: relative;
    flex: 1 1 260px;
    min-width: 200px;
    max-width: 440px;
}

.catalog-search-wrap svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
    transition: color 0.2s;
}

.catalog-search-input {
    width: 100%;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 0.45rem 1rem 0.45rem 2.2rem;
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.87rem;
    transition: all 0.25s;
}

/* Toolbar search: same 38px height as the buttons next to it */
.catalog-search-wrap .catalog-search-input {
    height: 38px;
    box-sizing: border-box;
    padding: 0 0.9rem 0 2.35rem;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
    font-size: 0.85rem;
}
.catalog-search-wrap .catalog-search-input::placeholder { color: var(--text-muted); opacity: 0.75; }
.catalog-search-wrap:focus-within svg { color: var(--primary); }

.catalog-search-input:focus {
    outline: none;
    border-color: var(--primary);
    background: rgba(255,255,255,0.05);
}
.catalog-search-wrap .catalog-search-input:focus { box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15); }

.catalog-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    flex-shrink: 0;
}
.catalog-toolbar-divider {
    width: 1px;
    height: 22px;
    background: var(--glass-border);
    margin: 0 0.15rem;
}
.catalog-tool-btn {
    width: 38px;
    height: 38px;
    box-sizing: border-box;
    border-radius: 10px;
    border: 1px solid var(--glass-border);
    background: rgba(255,255,255,0.04);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}
.catalog-tool-btn:hover { color: var(--text-main); border-color: rgba(var(--primary-rgb),0.35); background: rgba(var(--primary-rgb),0.1); }

.catalog-btn-secondary {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--glass-border);
    color: var(--text-main);
}
.catalog-btn-secondary:hover { background: rgba(255,255,255,0.09); border-color: rgba(var(--primary-rgb),0.35); }

.catalog-view-toggle {
    display: flex;
    gap: 0.2rem;
    height: 38px;
    box-sizing: border-box;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 3px;
}

.catalog-view-btn {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

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

.catalog-upload-btn {
    cursor: pointer;
    gap: 0.5rem;
    height: 38px;
    border-radius: 10px;
    padding: 0 1.1rem;
    font-size: 0.85rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

/* ===== DROP ZONE ===== */
.catalog-drop-zone {
    border: 2px dashed rgba(var(--primary-rgb),0.2);
    border-radius: 16px;
    margin: 1.5rem;
    padding: 3rem 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s;
    background: rgba(var(--primary-rgb),0.02);
}

.catalog-drop-zone.hidden {
    display: none;
}

.catalog-drop-zone.drag-over {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb),0.07);
    transform: scale(1.01);
}

.catalog-drop-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    color: var(--text-muted);
}

.catalog-drop-content p {
    font-size: 0.95rem;
}

.catalog-drop-hint {
    font-size: 0.8rem !important;
    opacity: 0.6;
}

/* ===== UPLOAD PROGRESS ===== */
.catalog-upload-progress {
    margin: 1rem 1.5rem 0;
    background: rgba(var(--primary-rgb),0.08);
    border: 1px solid rgba(var(--primary-rgb),0.2);
    border-radius: 10px;
    padding: 0.8rem 1rem;
}

.catalog-progress-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.catalog-progress-bar-wrap {
    height: 4px;
    background: rgba(255,255,255,0.07);
    border-radius: 2px;
    overflow: hidden;
}

.catalog-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #888888);
    border-radius: 2px;
    transition: width 0.15s ease;
}

/* ===== FILES GRID ===== */
.catalog-files-grid {
    padding: 1.2rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 190px));
    gap: 0.85rem;
    overflow-y: auto;
    flex: 1;
    align-content: start;
    align-items: start;
}

/* Folder header spans full grid width */
.catalog-folder-header {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.9rem;
    margin: 0.6rem 0 0.2rem;
    background: rgba(var(--primary-rgb), 0.06);
    border: 1px solid rgba(var(--primary-rgb), 0.18);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    user-select: none;
}

.catalog-folder-header:hover {
    background: rgba(var(--primary-rgb), 0.12);
    border-color: rgba(var(--primary-rgb), 0.35);
}

.catalog-folder-header svg {
    color: #818cf8;
    flex-shrink: 0;
}

.catalog-folder-header span {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 600;
    background: rgba(var(--primary-rgb),0.2);
    color: #ffffff;
    padding: 1px 8px;
    border-radius: 10px;
    text-transform: none;
    letter-spacing: 0;
}

/* Copy folder links button */
.catalog-copy-folder-btn {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: 0.6rem;
    padding: 3px 8px;
    border: 1px solid rgba(var(--primary-rgb),0.3);
    border-radius: 6px;
    background: rgba(var(--primary-rgb),0.1);
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.catalog-copy-folder-btn:hover {
    background: rgba(var(--primary-rgb),0.25);
    border-color: rgba(var(--primary-rgb),0.6);
    color: white;
}


.catalog-files-grid.list-view {
    grid-template-columns: 1fr;
    gap: 0.4rem;
}

/* ===== FILE CARD (Grid) ===== */
.catalog-card {
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    overflow: hidden;
    cursor: copy;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    position: relative;
    /* Fix: don't let cards stretch vertically */
    align-self: start;
    height: fit-content;
}

.catalog-card:hover {
    border-color: rgba(var(--primary-rgb),0.35);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    transform: translateY(-2px);
}

.catalog-card-thumb {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    background: rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.catalog-card-thumb img,
.catalog-card-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.catalog-card-thumb .catalog-type-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-muted);
    opacity: 0.5;
}

.catalog-card-info {
    padding: 0.55rem 0.7rem 0.6rem;
    /* No flex:1 — let content define height naturally */
}

.catalog-card-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.2rem;
}

.catalog-card-meta {
    font-size: 0.68rem;
    color: var(--text-muted);
    display: flex;
    gap: 0.5rem;
}

.catalog-shared-badge {
    display: inline-block;
    font-size: 0.6rem;
    padding: 1px 6px;
    border-radius: 6px;
    background: rgba(16,185,129,0.15);
    color: #6ee7b7;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.catalog-card-actions {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    display: flex;
    gap: 0.3rem;
    opacity: 0;
    transition: opacity 0.18s;
}

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

.catalog-action-btn {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: none;
    background: rgba(var(--surface-rgb), 0.85);
    backdrop-filter: blur(8px);
    color: #e2e8f0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.catalog-action-btn:hover {
    background: var(--primary);
}

.catalog-action-btn.delete:hover {
    background: #ef4444;
}

.catalog-ext-badge {
    position: absolute;
    top: 0.35rem;
    left: 0.35rem;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
    color: white;
    font-size: 0.62rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    z-index: 5;
    pointer-events: none;
    border: 1px solid rgba(255,255,255,0.1);
}

/* ===== FILE ROW (List view) ===== */
.catalog-row {
    display: grid;
    grid-template-columns: 36px 1fr auto auto auto;
    align-items: center;
    gap: 0.8rem;
    padding: 0.55rem 0.8rem;
    border-radius: 8px;
    background: rgba(255,255,255,0.02);
    border: 1px solid transparent;
    transition: all 0.18s;
    cursor: pointer;
}

.catalog-row:hover {
    background: rgba(255,255,255,0.04);
    border-color: var(--glass-border);
}

.catalog-row-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.catalog-row-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.catalog-row-name {
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.catalog-row-size {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.catalog-row-date {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.catalog-row-actions {
    display: flex;
    gap: 0.3rem;
}

/* ===== LANG HEADER (inside folder group) ===== */
.catalog-lang-header {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.9rem 0.35rem 2rem;
    margin: 0.25rem 0 0.15rem;
    background: rgba(var(--primary-rgb), 0.05);
    border-left: 2px solid rgba(var(--primary-rgb), 0.3);
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.catalog-lang-header:hover {
    background: rgba(var(--primary-rgb), 0.1);
    border-color: rgba(var(--primary-rgb), 0.5);
    color: #c4b5fd;
}
.catalog-lang-header span {
    margin-left: auto;
    font-size: 0.68rem;
    background: rgba(var(--primary-rgb),0.15);
    color: #c4b5fd;
    padding: 1px 6px;
    border-radius: 8px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}
.catalog-lang-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(var(--primary-rgb),0.15);
    color: #c4b5fd;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-left: 0.3rem;
    vertical-align: middle;
}

/* ===== SIDEBAR FOLDER TREE ===== */
.catalog-folder-group {
    margin-bottom: 0.15rem;
}
.catalog-folder-item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    padding: 0.45rem 0.6rem;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    text-align: left;
}
.catalog-folder-item:hover {
    background: rgba(255,255,255,0.05);
    color: var(--text-main);
}
.catalog-folder-item.active {
    background: rgba(var(--primary-rgb),0.15);
    color: #ffffff;
}
.catalog-folder-item .folder-rename-btn,
.catalog-lang-sub .catalog-filter-btn .folder-rename-btn {
    margin-left: auto;
    opacity: 0;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 0.75rem;
    line-height: 1;
    transition: all 0.15s;
    flex-shrink: 0;
}
.catalog-folder-item:hover .folder-rename-btn,
.catalog-lang-sub .catalog-filter-btn:hover .folder-rename-btn {
    opacity: 1;
}
.catalog-folder-item .folder-rename-btn:hover,
.catalog-lang-sub .catalog-filter-btn .folder-rename-btn:hover {
    color: #ffffff;
    background: rgba(var(--primary-rgb),0.15);
}
.catalog-lang-sub {
    padding-left: 0.9rem;
}
.catalog-lang-sub .catalog-filter-btn {
    font-size: 0.77rem;
    padding: 0.3rem 0.5rem;
    margin-bottom: 0.1rem;
}
.catalog-lang-sub .catalog-filter-btn svg {
    opacity: 0.6;
}

/* ===== EMPTY STATE ===== */
.catalog-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    opacity: 0.6;
}

/* ===== SHARE MODAL shared users list ===== */
.catalog-shared-user-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    background: rgba(255,255,255,0.03);
    margin-bottom: 0.3rem;
    font-size: 0.82rem;
}

.catalog-revoke-btn {
    background: none;
    border: none;
    color: #f87171;
    cursor: pointer;
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    transition: background 0.15s;
}

.catalog-revoke-btn:hover {
    background: rgba(239,68,68,0.12);
}

@media (max-width: 768px) {
    .catalog-layout {
        grid-template-columns: 1fr;
    }
    .catalog-sidebar {
        border-right: none;
        border-bottom: 1px solid var(--glass-border);
        flex-direction: row;
        flex-wrap: wrap;
        padding: 0.8rem;
        gap: 1rem;
    }
    .catalog-files-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}

/* ============================================================
   CATALOG BUILDER
   ============================================================ */
.catalog-builder-dialog {
    width: 820px; max-width: 95vw; max-height: 90vh; height: auto;
    display: flex; flex-direction: column;
    border-radius: 18px; overflow: hidden; margin: auto;
    background: var(--card-bg); border: 1px solid var(--glass-border);
}
/* inner must be flex column to keep footer pinned */
#catalog-builder-inner {
    display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden;
}
.cb-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--glass-border); flex-shrink: 0;
}
.cb-header h2 { font-size: 1rem; font-weight: 700; }
.cb-steps { display: flex; gap: 0.25rem; align-items: center; }
.cb-step-dot {
    width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid var(--glass-border); display: flex;
    align-items: center; justify-content: center;
    font-size: 0.68rem; font-weight: 700; color: var(--text-muted); transition: all 0.2s;
}
.cb-step-dot.active { border-color: var(--primary); color: var(--primary); background: rgba(var(--primary-rgb),0.1); }
.cb-step-dot.done { border-color: #10b981; background: rgba(16,185,129,0.15); color: #10b981; }
.cb-step-line { width: 20px; height: 2px; background: var(--glass-border); border-radius: 1px; }
.cb-body { padding: 1.4rem 1.5rem; overflow-y: auto; flex: 1; }
.cb-footer {
    padding: 1rem 1.5rem; border-top: 1px solid var(--glass-border);
    display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;
}

/* Type selector */
.cb-type-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 0.9rem; margin-top: 0.8rem; }
.cb-type-card {
    border: 2px solid var(--glass-border); border-radius: 14px;
    padding: 1.4rem 1rem; cursor: pointer; transition: all 0.2s;
    text-align: center; background: rgba(255,255,255,0.02); position: relative;
}
.cb-type-card:hover:not(.disabled) { border-color: var(--primary); background: rgba(var(--primary-rgb),0.07); transform: translateY(-2px); }
.cb-type-card.selected { border-color: var(--primary); background: rgba(var(--primary-rgb),0.1); }
.cb-type-card.disabled { opacity: 0.4; cursor: not-allowed; }
.cb-type-card .cb-soon {
    position: absolute; top: 8px; right: 8px; font-size: 0.6rem; font-weight: 700;
    background: rgba(255,255,255,0.08); color: var(--text-muted);
    padding: 2px 6px; border-radius: 6px; text-transform: uppercase;
}
.cb-type-icon { font-size: 2rem; margin-bottom: 0.6rem; }
.cb-type-name { font-size: 0.88rem; font-weight: 700; color: var(--text-main); margin-bottom: 0.3rem; }
.cb-type-desc { font-size: 0.72rem; color: var(--text-muted); line-height: 1.4; }

/* Country picker */
.cb-countries-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px,1fr)); gap: 0.45rem; margin-top: 0.7rem; }
.cb-country-chip {
    display: flex; align-items: center; gap: 0.45rem;
    padding: 0.45rem 0.7rem; border: 1px solid var(--glass-border);
    border-radius: 8px; cursor: pointer; transition: all 0.15s;
    background: rgba(255,255,255,0.02); font-size: 0.81rem; font-weight: 500;
    color: var(--text-muted); user-select: none;
}
.cb-country-chip:hover { border-color: rgba(var(--primary-rgb),0.4); color: var(--text-main); }
.cb-country-chip.selected { border-color: var(--primary); background: rgba(var(--primary-rgb),0.12); color: #ffffff; font-weight: 600; }
.cb-country-flag { font-size: 1.1rem; }

/* Form */
.cb-form { display: flex; flex-direction: column; gap: 1rem; }
.cb-field { display: flex; flex-direction: column; gap: 0.35rem; position: relative; }
.cb-label { font-size: 0.72rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.cb-input-row { display: flex; gap: 0.5rem; align-items: flex-start; }
.cb-input, .cb-textarea {
    flex: 1; background: var(--glass-bg); border: 1px solid var(--glass-border);
    border-radius: 8px; padding: 0.5rem 0.8rem;
    color: var(--text-main); font-family: inherit; font-size: 0.86rem; transition: border-color 0.2s;
}
.cb-input:focus, .cb-textarea:focus { outline: none; border-color: var(--primary); }
.cb-textarea { resize: vertical; min-height: 64px; }
.cb-saved-btn {
    background: rgba(255,255,255,0.05); border: 1px solid var(--glass-border);
    border-radius: 8px; color: var(--text-muted);
    padding: 0.45rem 0.65rem; cursor: pointer; font-size: 0.76rem;
    transition: all 0.15s; white-space: nowrap;
    display: flex; align-items: center; gap: 0.3rem; flex-shrink: 0;
}
.cb-saved-btn:hover { border-color: var(--primary); color: #ffffff; }
.cb-saved-dropdown {
    position: absolute; top: 100%; right: 0; z-index: 200;
    background: #0f172a; border: 1px solid var(--glass-border);
    border-radius: 10px; padding: 0.4rem; min-width: 320px; max-width: 450px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6); max-height: 220px; overflow-y: auto;
}
.cb-saved-item {
    padding: 0.4rem 0.65rem; border-radius: 6px; cursor: pointer;
    font-size: 0.81rem; color: var(--text-muted); transition: all 0.15s;
    display: flex; align-items: center; justify-content: space-between;
}
.cb-saved-item:hover { background: rgba(255,255,255,0.05); color: var(--text-main); }
.cb-save-link {
    font-size: 0.71rem; color: #818cf8; cursor: pointer; margin-top: 0.25rem;
    display: inline-flex; align-items: center; gap: 0.2rem;
    opacity: 0.7; transition: opacity 0.15s; background: none; border: none; padding: 0;
}
.cb-save-link:hover { opacity: 1; }
.cb-del-saved { background: none; border: none; color: #f87171; cursor: pointer; opacity: 0.5; font-size: 0.8rem; padding: 0 0.2rem; }
.cb-del-saved:hover { opacity: 1; }

/* Image picker */
.cb-folder-row { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.6rem; align-items: center; }
.cb-folder-chip {
    padding: 0.28rem 0.75rem; border-radius: 20px;
    border: 1px solid var(--glass-border); background: transparent;
    color: var(--text-muted); font-size: 0.76rem; font-weight: 600;
    cursor: pointer; transition: all 0.15s;
}
.cb-folder-chip:hover { border-color: var(--primary); color: #ffffff; }
.cb-folder-chip.active { border-color: var(--primary); background: rgba(var(--primary-rgb),0.15); color: #ffffff; }
.cb-folder-search-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.cb-folder-search-icon {
    position: absolute;
    left: 8px;
    font-size: 0.7rem;
    color: var(--text-muted);
    pointer-events: none;
    line-height: 1;
}
.cb-folder-search-input {
    padding: 0.22rem 1.6rem 0.22rem 1.6rem;
    font-size: 0.74rem;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    width: 140px;
    outline: none;
    transition: all 0.15s ease;
}
.cb-folder-search-input:focus {
    border-color: var(--primary);
    background: rgba(255, 255, 255, 0.09);
    width: 170px;
}
.cb-folder-search-input::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}
.cb-folder-search-clear {
    position: absolute;
    right: 6px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.72rem;
    padding: 0;
    line-height: 1;
    display: none;
}
.cb-folder-search-clear:hover {
    color: #ffffff;
}
.cb-img-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(82px,1fr));
    gap: 0.4rem; max-height: 200px; overflow-y: auto; padding: 0.15rem;
}
.cb-img-item {
    position: relative; cursor: pointer; border-radius: 7px; overflow: hidden;
    border: 2px solid transparent; transition: all 0.15s; aspect-ratio: 1;
    background: rgba(0,0,0,0.2);
}
.cb-img-item:hover { border-color: rgba(var(--primary-rgb),0.4); }
.cb-img-item.selected { border-color: var(--primary); }
.cb-img-item img, .cb-img-item video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cb-img-check {
    position: absolute; top: 3px; right: 3px; width: 17px; height: 17px;
    border-radius: 50%; background: var(--primary); display: none;
    align-items: center; justify-content: center;
}
.cb-img-item.selected .cb-img-check { display: flex; }
.cb-img-check::after { content: '✓'; font-size: 0.6rem; color: white; font-weight: 700; }
.cb-img-name { font-size: 0.6rem; color: var(--text-muted); padding: 2px 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-select-bar { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.5rem; font-size: 0.76rem; color: var(--text-muted); }
.cb-select-count { font-weight: 700; color: #ffffff; }

/* Preview table */
.cb-preview-wrap { overflow-x: auto; }
.cb-preview-table { width: 100%; border-collapse: collapse; font-size: 0.77rem; }
.cb-preview-table th {
    background: rgba(var(--primary-rgb),0.1); color: #ffffff; font-weight: 700;
    padding: 0.5rem 0.8rem; text-align: left;
    border-bottom: 1px solid var(--glass-border); white-space: nowrap;
    font-size: 0.7rem; text-transform: uppercase;
}
.cb-preview-table td {
    padding: 0.38rem 0.8rem; border-bottom: 1px solid rgba(255,255,255,0.04);
    color: var(--text-muted); max-width: 200px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cb-preview-table tr:hover td { background: rgba(255,255,255,0.02); }
.cb-thumb-cell { display: flex; align-items: center; gap: 0.45rem; }
.cb-thumb-cell img { width: 26px; height: 26px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
.cb-country-badge-sm {
    display: inline-block; font-size: 0.62rem; font-weight: 700;
    padding: 1px 5px; border-radius: 4px;
    background: rgba(var(--primary-rgb),0.15); color: #ffffff;
}

/* ---- Tag input for country codes ---- */
.cb-tag-input-wrap {
    display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center;
    padding: 0.45rem 0.6rem; min-height: 42px;
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    border-radius: 8px; cursor: text; transition: border-color 0.2s;
}
.cb-tag-input-wrap:focus-within { border-color: var(--primary); }
.cb-tag {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 2px 8px; border-radius: 6px;
    background: rgba(var(--primary-rgb),0.18); color: #c4b5fd;
    font-size: 0.78rem; font-weight: 700; white-space: nowrap;
}
.cb-tag-del {
    background: none; border: none; color: #c4b5fd; cursor: pointer;
    font-size: 0.75rem; padding: 0 0 0 2px; opacity: 0.6; line-height: 1;
}
.cb-tag-del:hover { opacity: 1; }
.cb-tag-input {
    border: none; background: transparent; color: var(--text-main);
    font-family: inherit; font-size: 0.86rem; outline: none;
    min-width: 120px; flex: 1;
}

/* Catalog Feed Editor */
.editor-table {
    width: 100%;
    border-collapse: collapse;
}
.editor-table th {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border-color);
    padding: 0.6rem 0.8rem;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(5px);
}
.editor-table td {
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--border-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
    transition: background 0.2s;
}
.editor-table td:focus {
    outline: 2px solid var(--primary);
    background: rgba(255, 255, 255, 0.08);
    white-space: normal;
    word-break: break-all;
    overflow: visible;
}
.editor-table tr:hover {
    background: rgba(255, 255, 255, 0.02) !important;
}

/* Disabled button global styling */
.btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Catalog Home View ─────────────────────────────────────── */

.catalog-page-toggle {
    display: flex;
    gap: 0.3rem;
    padding: 1rem 1.2rem 0;
    border-bottom: 1px solid var(--glass-border);
    margin-bottom: 0;
}

.catalog-page-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.1rem 0.6rem;
    border-radius: 0;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    margin-bottom: -1px;
}

.catalog-page-btn:hover { color: var(--text-main); }

.catalog-page-btn.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    font-weight: 600;
}

#catalog-home-view { padding: 0; }

/* CTA bar */
.chome-cta-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1.2rem 1.4rem;
    border-bottom: 1px solid var(--glass-border);
}

.chome-cta-left { display: flex; gap: 0.5rem; }

.chome-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 1.2rem;
    border-radius: 8px;
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid transparent;
}

.chome-cta-btn.primary {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.chome-cta-btn.primary:hover { filter: brightness(1.12); }

.chome-cta-btn.secondary {
    background: rgba(255,255,255,0.05);
    color: var(--text-muted);
    border-color: var(--glass-border);
}

.chome-cta-btn.secondary:hover {
    background: rgba(255,255,255,0.09);
    color: var(--text-main);
}

.chome-cta-stats {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.chome-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.chome-stat-num {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1;
}

.chome-stat-label {
    font-size: 0.66rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.chome-stat-sep {
    width: 1px;
    height: 28px;
    background: var(--glass-border);
}

/* Language filter */
.chome-filters {
    padding: 0.9rem 1.4rem;
    border-bottom: 1px solid var(--glass-border);
}

.chome-filters-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    margin-bottom: 0.55rem;
}

.chome-pills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.chome-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.7rem;
    border-radius: 20px;
    border: 1px solid var(--glass-border);
    background: transparent;
    color: var(--text-muted);
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.chome-pill:hover {
    border-color: var(--pill-color, var(--primary));
    color: var(--text-main);
    background: color-mix(in srgb, var(--pill-color, var(--primary)) 10%, transparent);
}

.chome-pill.active {
    border-color: var(--pill-color, var(--primary));
    background: color-mix(in srgb, var(--pill-color, var(--primary)) 18%, transparent);
    color: var(--pill-color, var(--primary));
    font-weight: 600;
}

.chome-pill-flag { font-size: 0.95rem; line-height: 1; }
.chome-pill-name { font-weight: 600; font-size: 0.78rem; }
.chome-pill-count {
    font-size: 0.64rem;
    background: rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 1px 5px;
    color: var(--text-muted);
}

.chome-pill.active .chome-pill-count {
    background: color-mix(in srgb, var(--pill-color, var(--primary)) 25%, transparent);
    color: var(--pill-color, var(--primary));
}

.chome-clear-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.65rem;
    border-radius: 20px;
    border: 1px solid rgba(248,113,113,0.35);
    background: rgba(248,113,113,0.06);
    color: #f87171;
    font-size: 0.74rem;
    cursor: pointer;
    transition: all 0.15s;
}

.chome-clear-btn:hover { background: rgba(248,113,113,0.14); }

/* Sections */
.chome-sections { padding: 1rem 1.4rem; display: flex; flex-direction: column; gap: 1.8rem; }

.chome-section {}
    margin-bottom: 0.75rem;
}

/* Accordions container */
.chome-accordions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-bottom: 2rem;
    transition: opacity 0.3s;
}

/* Accordion Item */
.chome-acc {
    background: rgba(var(--surface-rgb), 0.4);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

/* Focus mode: dim closed items when container has open items */
.chome-accordions.has-focus .chome-acc:not(.is-open) {
    opacity: 0.4;
    transform: scale(0.99);
}
.chome-accordions.has-focus .chome-acc:not(.is-open):hover {
    opacity: 0.8;
}

.chome-acc.is-open {
    background: rgba(var(--surface-rgb), 0.7);
    border-color: var(--acc-color, var(--glass-border));
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    transform: translateY(-2px);
    margin: 0.25rem 0;
}

/* Header */
.chome-acc-header {
    padding: 0.9rem 1.25rem;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    user-select: none;
}

/* Visual weight background */
.chome-acc-bg {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    opacity: 0.05;
    transition: opacity 0.3s, width 0.5s;
    pointer-events: none;
}
.chome-acc:hover .chome-acc-bg {
    opacity: 0.1;
}
.chome-acc.is-open .chome-acc-bg {
    opacity: 0.02; /* Dim the background bar when open so it's less distracting */
}

.chome-acc-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

.chome-acc-flag {
    font-size: 1.2rem;
    line-height: 1;
}

.chome-acc-lang {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-main);
}

.chome-acc-stats {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-left: 0.5rem;
}
.cas-num {
    font-weight: 700;
    color: var(--text-main);
}
.cas-sep {
    opacity: 0.5;
}

/* Quick Create Button */
.chome-acc-create {
    margin-left: auto;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-main);
    padding: 0.3rem 0.8rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.2s;
}
.chome-acc-create:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}
.chome-acc-header:hover .chome-acc-create,
.chome-acc.is-open .chome-acc-create {
    opacity: 1;
    transform: translateX(0);
}

.chome-acc-chevron {
    margin-left: auto;
    color: var(--text-muted);
    transition: transform 0.3s;
    display: flex;
}
.chome-acc.is-open .chome-acc-chevron {
    transform: rotate(180deg);
    color: var(--acc-color, var(--primary));
}

/* Body / Expandable section */
.chome-acc-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.chome-acc.is-open .chome-acc-body {
    grid-template-rows: 1fr;
}

.chome-acc-body-inner {
    overflow: hidden;
    padding: 0 1.25rem;
    transition: padding 0.3s;
}
.chome-acc.is-open .chome-acc-body-inner {
    padding: 0.25rem 1.25rem 1.25rem;
}

/* Linear-style dense grid */
.chome-mini-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.chome-mini-folder {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.65rem;
    background: rgba(255,255,255,0.02);
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
}
.chome-mini-folder:hover {
    background: rgba(255,255,255,0.05);
    border-color: var(--glass-border);
}

.cmf-icon {
    flex-shrink: 0;
    opacity: 0.8;
}

.cmf-name {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.cmf-count {
    font-size: 0.72rem;
    font-family: monospace;
    color: var(--text-muted);
    background: rgba(0,0,0,0.2);
    padding: 1px 6px;
    border-radius: 10px;
}

.cmf-open {
    position: absolute;
    right: 0.65rem;
    top: 50%;
    transform: translateY(-50%) translateX(5px);
    opacity: 0;
    background: none;
    border: none;
    color: var(--text-main);
    font-weight: bold;
    transition: all 0.2s;
    pointer-events: none;
}
.chome-mini-folder:hover .cmf-open {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}
.chome-mini-folder:hover .cmf-count {
    opacity: 0;
}

/* Empty state */
.chome-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem 1rem;
    color: var(--text-muted);
    font-size: 0.88rem;
}

/* ============================================================================
   STRUCTURE OCR IMPORT STYLES
   ============================================================================ */
.ocr-dropzone.dragover {
    border-color: #3b82f6 !important;
    background: rgba(59, 130, 246, 0.15) !important;
    transform: scale(1.01);
}

.ocr-row-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 0.4rem 0.6rem;
    transition: background 0.15s ease;
}

.ocr-row-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
}

.ocr-row-index {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    min-width: 24px;
    text-align: center;
}

.ocr-row-input {
    flex: 2;
    font-family: monospace;
    font-size: 0.85rem;
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.25);
    color: #60a5fa;
}

.ocr-row-input:focus {
    border-color: #3b82f6;
    outline: none;
    background: rgba(0, 0, 0, 0.4);
}

.ocr-row-notes {
    flex: 2;
    font-size: 0.8rem;
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
    color: var(--text-main);
}

.ocr-row-notes:focus {
    border-color: var(--primary);
    outline: none;
}

.ocr-disabled-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 6px;
    padding: 0.35rem 0.6rem;
    font-size: 0.8rem;
}

/* ==========================================================================
   SOURCES MODULE STYLES
   ========================================================================== */
.sources-content-area {
    padding: 1rem 1.5rem;
    max-width: 100%;
}

.sources-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.6rem 0.8rem;
    backdrop-filter: blur(12px);
}

.sources-toolbar-left,
.sources-toolbar-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.sources-interval-chips {
    display: inline-flex;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}

.sources-interval-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 0.35rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.sources-interval-btn:hover {
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.05);
}

.sources-interval-btn.active {
    background: var(--primary);
    color: var(--on-primary);
    font-weight: 600;
    box-shadow: 0 1px 4px var(--primary-glow);
}

.sources-custom-range {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(0, 0, 0, 0.2);
    padding: 2px 6px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.sources-range-separator {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.sources-search-wrapper {
    min-width: 260px;
}

.sources-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.65rem;
    margin-bottom: 1rem;
}

.sources-stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
    backdrop-filter: blur(10px);
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.sources-stat-card:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

.sources-stat-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    font-weight: 600;
}

.sources-stat-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-main);
    margin-top: 0.2rem;
    letter-spacing: -0.2px;
}

.sources-subbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.5rem 0.8rem;
    backdrop-filter: blur(10px);
}

.sources-subbar-left,
.sources-subbar-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.sources-subbar-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sources-group-chips {
    display: inline-flex;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}

.sources-group-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 0.3rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.sources-group-btn:hover {
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.05);
}

.sources-group-btn.active {
    background: var(--primary);
    color: var(--on-primary);
    font-weight: 600;
    box-shadow: 0 1px 4px var(--primary-glow);
}

.sources-min-clicks-box,
.sources-sort-box {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.sources-country-dd {
    position: relative;
    display: inline-flex;
}

.sources-country-dd-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-main);
    padding: 0.35rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    min-width: 150px;
    justify-content: space-between;
}

.sources-country-dd-btn.active-filter {
    border-color: var(--primary);
    color: var(--primary);
}

.sources-country-dd-pop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 200;
    width: 250px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
}

.sources-country-dd-pop input {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 0.4rem;
}

.sources-country-dd-list {
    max-height: 280px;
    overflow-y: auto;
}

.sources-country-dd-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    font-size: 0.78rem;
    color: var(--text-main);
    cursor: pointer;
}

.sources-country-dd-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.sources-country-dd-item.selected {
    color: var(--primary);
    font-weight: 600;
}

.sources-country-dd-item .cnt {
    color: var(--text-muted);
    font-size: 0.7rem;
}

.sources-country-dd-sep {
    height: 1px;
    background: var(--border-color);
    margin: 0.3rem 0;
}

.sources-cgroup-box {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-right: 0.4rem;
}

.sources-cgroup-select {
    padding: 0.35rem 0.6rem;
    font-size: 0.78rem;
    min-width: 140px;
    max-width: 220px;
}

.sources-cgroup-select.active-filter {
    border-color: var(--primary);
    color: var(--primary);
}

.sources-sort-select {
    padding: 0.35rem 0.6rem;
    font-size: 0.78rem;
    min-width: 175px;
}

.sources-table-container {
    position: relative;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow-x: auto;
    min-height: 280px;
    max-height: calc(100vh - 270px);
    overflow-y: auto;
}

.sources-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    text-align: left;
}

.sources-table th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--surface-solid);
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
    user-select: none;
}

.sources-table th.sortable {
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}

.sources-table th.sortable:hover {
    color: var(--primary);
    background: rgba(255, 255, 255, 0.03);
}

.sources-table th.active-sort {
    color: #ffffff;
    background: rgba(var(--primary-rgb), 0.08);
}

.th-content {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.sort-icon-box {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    vertical-align: middle;
    width: 10px;
}

.sort-arrow {
    display: block;
    width: 7px;
    height: 6px;
    opacity: 0.3;
    transition: opacity 0.15s, color 0.15s;
    color: var(--text-muted);
}

.sources-table th.sortable:hover .sort-arrow {
    opacity: 0.6;
}

.sort-arrow.active {
    opacity: 1 !important;
    color: var(--primary) !important;
}

.sources-table td {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: var(--text-main);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.sources-table tbody tr {
    transition: background 0.12s ease;
}

.sources-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.04);
}

.sources-table tfoot td {
    position: sticky;
    bottom: 0;
    z-index: 4;
    background: var(--surface-solid);
    font-weight: 700;
    border-top: 2px solid var(--border-color);
    color: #ffffff;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.3);
}

.sources-table .text-right {
    text-align: right;
}

.sources-profit-positive {
    color: var(--pos) !important;
    font-weight: 600;
}

.sources-profit-negative {
    color: var(--neg) !important;
    font-weight: 600;
}

.sources-profit-zero {
    color: var(--text-muted) !important;
}

.sources-cell-badge {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    font-size: 0.72rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.sources-copyable {
    cursor: pointer;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
    transition: color 0.15s, border-color 0.15s;
}

.sources-copyable:hover {
    color: var(--primary);
    border-color: var(--primary);
}

.sources-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(var(--bg-rgb), 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    z-index: 20;
    color: var(--text-main);
    font-size: 0.85rem;
}

.sources-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* Toggle Switch for Merge Offers */
.sources-toggle-box {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    user-select: none;
    background: rgba(0, 0, 0, 0.25);
    padding: 0.25rem 0.6rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.sources-switch {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 16px;
    cursor: pointer;
    margin: 0;
}

.sources-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.sources-slider {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    transition: 0.2s ease;
}

.sources-slider:before {
    position: absolute;
    content: "";
    height: 10px;
    width: 10px;
    left: 3px;
    bottom: 3px;
    background-color: #cbd5e1;
    border-radius: 50%;
    transition: 0.2s ease;
}

.sources-switch input:checked + .sources-slider {
    background-color: var(--primary);
}

.sources-switch input:checked + .sources-slider:before {
    transform: translateX(12px);
    background-color: var(--on-primary);
}

/* TH Header Actions & Filter Button */
.th-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    width: 100%;
}

.th-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    flex-shrink: 0;
}

.th-filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    padding: 0;
    border-radius: 4px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0.35;
    transition: all 0.15s ease;
}

.th-filter-btn:hover {
    opacity: 1;
    color: var(--primary);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
}

.th-filter-btn.active-filter {
    opacity: 1 !important;
    color: var(--on-primary) !important;
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 6px var(--primary-glow);
}

/* Active Column Filters Bar */
.sources-active-filters-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.4rem 0.8rem;
    background: rgba(59, 130, 246, 0.08);
    border: 1px dashed rgba(59, 130, 246, 0.35);
    border-radius: 8px;
    margin-bottom: 0.75rem;
}

.sources-active-filters-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.sources-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(59, 130, 246, 0.4);
    color: #e0f2fe;
    font-size: 0.72rem;
    font-weight: 500;
    padding: 0.2rem 0.55rem;
    border-radius: 12px;
}

.sources-filter-tag-label {
    color: #93c5fd;
    font-weight: 600;
}

.sources-filter-tag-remove {
    cursor: pointer;
    color: #cbd5e1;
    font-weight: bold;
    font-size: 0.8rem;
    line-height: 1;
    margin-left: 0.2rem;
    transition: color 0.12s;
}

.sources-filter-tag-remove:hover {
    color: #f87171;
}

.sources-reset-all-filters-btn {
    background: transparent;
    border: none;
    color: #f87171;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.sources-reset-all-filters-btn:hover {
    background: rgba(248, 113, 113, 0.15);
    text-decoration: underline;
}

/* Column Filter Popover */
.sources-col-filter-popover {
    position: fixed;
    z-index: 1000;
    width: 290px;
    max-width: 92vw;
    background: #0d1424;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.08);
    padding: 0.95rem;
    backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    animation: fadeInScale 0.15s ease;
}

.sources-col-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    font-weight: 600;
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 0.5rem;
    letter-spacing: -0.2px;
}

.sources-col-filter-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0.15rem 0.4rem;
    border-radius: 5px;
    transition: all 0.15s ease;
}

.sources-col-filter-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.sources-col-filter-body {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.sources-col-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.sources-col-filter-field-label {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sources-col-filter-mode-select {
    width: 100%;
    padding: 0.45rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 500;
    font-family: inherit;
    border-radius: 7px;
    background-color: #172033;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #f1f5f9;
    outline: none;
    cursor: pointer;
    transition: all 0.15s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.65rem center;
    padding-right: 1.8rem;
}

.sources-col-filter-mode-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
}

.sources-col-filter-mode-select option {
    background: #0f172a;
    color: #f1f5f9;
    padding: 0.4rem;
}

.sources-col-filter-input {
    width: 100%;
    padding: 0.45rem 0.65rem;
    font-size: 0.8rem;
    font-family: inherit;
    color: #ffffff;
    background: #172033;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 7px;
    outline: none;
    transition: all 0.15s ease;
    box-sizing: border-box;
}

.sources-col-filter-input:focus {
    border-color: var(--primary);
    background: #1c273e;
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.25);
}

.sources-col-filter-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.sources-col-filter-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 0.65rem;
    margin-top: 0.15rem;
}

.sources-col-filter-btn-clear {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    padding: 0.38rem 0.75rem;
    border-radius: 6px;
    font-size: 0.76rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.sources-col-filter-btn-clear:hover {
    background: rgba(248, 113, 113, 0.12);
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.3);
}

.sources-col-filter-btn-apply {
    background: var(--primary);
    border: none;
    color: var(--on-primary);
    padding: 0.38rem 1rem;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 1px 4px var(--primary-glow);
}

.sources-col-filter-btn-apply:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}

.sources-filter-list-box {
    max-height: 160px;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 7px;
    background: #141c2e;
    padding: 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sources-filter-list-item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.74rem;
    color: var(--text-main);
    padding: 0.25rem 0.35rem;
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s ease;
}

.sources-filter-list-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.sources-filter-list-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.7rem;
    padding: 0 0.15rem;
}

.sources-filter-list-action-btn {
    background: transparent;
    border: none;
    color: var(--primary);
    cursor: pointer;
    padding: 0;
    font-size: 0.7rem;
    font-weight: 500;
}

.sources-filter-list-action-btn:hover {
    text-decoration: underline;
}

.sources-sub-count-badge {
    display: inline-block;
    padding: 0.1rem 0.35rem;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 700;
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #fbbf24;
    margin-left: 0.3rem;
    vertical-align: middle;
}

/* ============================================================
   SOURCES OPTICS (PARTNER FEEDBACKS & PAYOUT COMPARISONS)
   ============================================================ */
.sources-optics-btn-box {
    display: flex;
    align-items: center;
}

.sources-optics-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary);
    background: rgba(var(--primary-rgb), 0.12);
    border: 1px solid rgba(var(--primary-rgb), 0.35);
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sources-optics-btn:hover {
    background: rgba(var(--primary-rgb), 0.22);
    border-color: var(--primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 10px rgba(var(--primary-rgb), 0.25);
}

.sources-optics-btn.has-data {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.2), rgba(var(--accent-rgb), 0.1));
    border-color: rgba(var(--primary-rgb), 0.5);
}

.sources-optics-count-badge {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 700;
    background: var(--primary);
    color: var(--on-primary);
}

.sources-optics-tab-btn {
    padding: 0.4rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.sources-optics-tab-btn:hover {
    color: #ffffff;
}

.sources-optics-tab-btn.active {
    color: #fbbf24;
    border-bottom-color: #fbbf24;
}

.sources-nav-tab-badge {
    display: inline-block;
    padding: 0.05rem 0.35rem;
    border-radius: 8px;
    font-size: 0.65rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

/* Optics Mini Stat Cards inside Modal */
.sources-optics-stat-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.sources-optics-stat-card.card-raise {
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.05);
}

.sources-optics-stat-card.card-lower {
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.05);
}

.sources-optics-stat-card.card-pause {
    border-color: rgba(220, 38, 38, 0.5);
    background: rgba(220, 38, 38, 0.1);
}

.sources-optics-stat-card.card-traffic {
    border-color: rgba(96, 165, 250, 0.3);
    background: rgba(96, 165, 250, 0.05);
}

.sources-optics-stat-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sources-optics-stat-val {
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
}

/* Optics Badges (both in modal and in main sources table) */
.sources-optic-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.2;
    transition: all 0.15s ease;
    cursor: pointer;
}

.sources-optic-badge.optic-raise {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.35);
}

.sources-optic-badge.optic-raise:hover {
    background: rgba(34, 197, 94, 0.25);
    border-color: #4ade80;
}

.sources-optic-badge.optic-lower {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.35);
}

.sources-optic-badge.optic-lower:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: #f87171;
}

.sources-optic-badge.optic-pause {
    background: rgba(220, 38, 38, 0.3);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.6);
    font-weight: 700;
}

.sources-optic-badge.optic-pause:hover {
    background: rgba(220, 38, 38, 0.45);
    border-color: #ef4444;
}

.sources-optic-badge.optic-maintain {
    background: rgba(148, 163, 184, 0.12);
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.25);
}

.sources-optic-badge.optic-maintain:hover {
    background: rgba(148, 163, 184, 0.2);
}

/* Optics Modal Table Styling */
.sources-optics-dual-container {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding-right: 0.35rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) rgba(0, 0, 0, 0.2);
}

.sources-optics-block {
    background: rgba(var(--surface-rgb), 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.sources-optics-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0.85rem;
    background: #0f172a;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: sticky;
    top: 0;
    z-index: 6;
}

.sources-table-container.sources-optics-table-container {
    min-height: auto;
    max-height: 380px;
    overflow-y: auto;
    overflow-x: auto;
    background: transparent;
    border: none;
    border-radius: 0 0 10px 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) rgba(0, 0, 0, 0.15);
}

.sources-optics-block.single-view .sources-table-container.sources-optics-table-container {
    max-height: calc(96vh - 200px);
}

.sources-optics-subtabs {
    display: inline-flex;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 2px;
    gap: 2px;
}

.sources-optics-subtab-btn {
    padding: 0.25rem 0.65rem;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.sources-optics-subtab-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
}

.sources-optics-subtab-btn.active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.14);
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

#sources-optics-active-table th,
#sources-optics-inactive-table th {
    position: sticky;
    top: 0;
    background: #0d1424;
    z-index: 5;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    padding: 0.65rem 0.75rem;
    font-size: 0.72rem;
}

#sources-optics-active-table td,
#sources-optics-inactive-table td {
    padding: 0.55rem 0.75rem;
    font-size: 0.8rem;
}

#sources-optics-active-table tbody tr:hover,
#sources-optics-inactive-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.04);
}

.optic-diff-pos {
    color: #4ade80;
    font-weight: 600;
}

.optic-diff-neg {
    color: #f87171;
    font-weight: 600;
}

.optic-diff-zero {
    color: var(--text-muted);
}

/* Copy dropdown item */
.dropdown-item {
    display: block;
    padding: 0.45rem 0.85rem;
    font-size: 0.78rem;
    color: var(--text-main);
    text-decoration: none;
    transition: background 0.12s ease;
}

.dropdown-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Keitaro Campaign Link */
.sources-campaign-link {
    color: #f1f5f9;
    text-decoration: none;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.35);
    transition: color 0.15s ease, border-color 0.15s ease, text-shadow 0.15s ease;
    cursor: pointer;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.sources-campaign-link:hover {
    color: #60a5fa;
    border-bottom-color: #60a5fa;
    text-shadow: 0 0 8px rgba(96, 165, 250, 0.4);
    text-decoration: none;
}

/* ==========================================================================
   SYNC KEITARO MODULE (COST SYNC MANAGER)
   ========================================================================== */

:root {
    --sync-accent-tj: #6366f1;
    --sync-accent-ts: #f59e0b;
    --sync-accent-mi: #10b981;
    --sync-accent-ad: #018ef5;
    --sync-accent-rp: #f97316;
}

.sync-content-area {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 1300px;
    margin: 0 auto;
    width: 100%;
}

/* Toolbar */
.sync-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.sync-tab-bar {
    display: flex;
    gap: 4px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 4px;
    width: fit-content;
}

.sync-tab-btn {
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    padding: 7px 18px;
    border-radius: 7px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.18s ease;
}

.sync-tab-btn:hover {
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.03);
}

.sync-tab-pip {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    opacity: 0.4;
    transition: opacity 0.18s;
}

.sync-tab-btn-tj .sync-tab-pip { background: var(--sync-accent-tj); }
.sync-tab-btn-ts .sync-tab-pip { background: var(--sync-accent-ts); }
.sync-tab-btn-mi .sync-tab-pip { background: var(--sync-accent-mi); }
.sync-tab-btn-ad .sync-tab-pip { background: var(--sync-accent-ad); }
.sync-tab-btn-rp .sync-tab-pip { background: var(--sync-accent-rp); }

.sync-tab-btn.active {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.sync-tab-btn.active .sync-tab-pip { opacity: 1; }
.sync-tab-btn-tj.active { border-color: rgba(99, 102, 241, 0.3); color: #a5b4fc; }
.sync-tab-btn-ts.active { border-color: rgba(245, 158, 11, 0.3); color: #fde68a; }
.sync-tab-btn-mi.active { border-color: rgba(16, 185, 129, 0.3); color: #a7f3d0; }
.sync-tab-btn-ad.active { border-color: rgba(1, 142, 245, 0.3); color: #70c4ff; }
.sync-tab-btn-rp.active { border-color: rgba(249, 115, 22, 0.3); color: #fdba74; }

.sync-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.sync-btn-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    transition: all 0.18s ease;
}

.sync-btn-tj {
    background: var(--sync-accent-tj) !important;
    border-color: var(--sync-accent-tj) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.25);
}
.sync-btn-tj:hover { background: #4f46e5 !important; border-color: #4f46e5 !important; transform: translateY(-1px); }

.sync-btn-ts {
    background: var(--sync-accent-ts) !important;
    border-color: var(--sync-accent-ts) !important;
    color: #000 !important;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.25);
}
.sync-btn-ts:hover { background: #d97706 !important; border-color: #d97706 !important; transform: translateY(-1px); }

.sync-btn-mi {
    background: var(--sync-accent-mi) !important;
    border-color: var(--sync-accent-mi) !important;
    color: #000 !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25);
}
.sync-btn-mi:hover { background: #059669 !important; border-color: #059669 !important; transform: translateY(-1px); }

.sync-btn-ad {
    background: var(--sync-accent-ad) !important;
    border-color: var(--sync-accent-ad) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(1, 142, 245, 0.25);
}
.sync-btn-ad:hover { background: #0175cc !important; border-color: #0175cc !important; transform: translateY(-1px); }

.sync-btn-rp {
    background: var(--sync-accent-rp) !important;
    border-color: var(--sync-accent-rp) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.25);
}
.sync-btn-rp:hover { background: #ea580c !important; border-color: #ea580c !important; transform: translateY(-1px); }

/* Panels & Grid */
.sync-tab-panel {
    display: none;
}

.sync-tab-panel.active {
    display: block;
}

.sync-dash-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

@media (max-width: 900px) {
    .sync-dash-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.sync-section-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sync-count-badge {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}

/* Connection Cards */
.sync-connection-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sync-conn-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
}

.sync-conn-card:hover {
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.sync-conn-side {
    flex: 1;
    min-width: 0;
}

.sync-conn-name {
    font-size: 0.88rem;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sync-conn-id {
    font-size: 0.72rem;
    font-family: monospace;
    color: var(--text-muted);
    margin-top: 3px;
}

.sync-conn-arrow {
    color: rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.sync-btn-danger {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    transition: all 0.15s;
    flex-shrink: 0;
}

.sync-btn-danger:hover {
    color: #f87171;
    background: rgba(248, 113, 113, 0.12);
}

/* Activity Feed */
.sync-feed {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px 18px;
    max-height: 520px;
    overflow-y: auto;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.sync-feed::-webkit-scrollbar { width: 4px; }
.sync-feed::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 2px; }

.sync-log-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    font-size: 0.8rem;
}

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

.sync-log-pip {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
}

.sync-log-time {
    font-family: monospace;
    color: var(--text-muted);
    font-size: 0.72rem;
    width: 44px;
    flex-shrink: 0;
    margin-top: 1px;
}

.sync-log-msg {
    color: #cbd5e1;
    line-height: 1.45;
    word-break: break-word;
}

/* Modal columns and dropdown picker */
.sync-modal-content {
    max-width: 620px !important;
    padding: 1.5rem 1.75rem !important;
    gap: 1rem !important;
}

.sync-modal-content .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    margin-bottom: 0.2rem;
}

.sync-modal-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 0;
}

@media (max-width: 580px) {
    .sync-modal-cols {
        grid-template-columns: 1fr;
    }
}

.sync-modal-col {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    transition: all 0.2s ease;
}

.sync-modal-col:focus-within {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.035);
}

.sync-col-divider {
    position: relative;
}

.sync-col-divider::after {
    display: none;
}

.sync-col-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    min-width: 0;
}

.sync-col-label {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex-shrink: 0;
}

.sync-fetch-btn {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    font-size: 0.71rem !important;
    padding: 4px 9px !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #cbd5e1 !important;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    line-height: 1.2 !important;
    transition: all 0.15s ease;
}

.sync-fetch-btn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
}

.sync-fetch-btn span {
    white-space: nowrap !important;
}

.sync-modal-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 0;
}

.sync-modal-field label {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
}

.sync-modal-field input {
    width: 100%;
    border-radius: 8px;
    font-size: 0.86rem;
    padding: 7px 11px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: #ffffff;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
}

.sync-modal-field input:focus {
    border-color: var(--primary);
    background: rgba(0, 0, 0, 0.4);
}

.sync-campaign-picker {
    margin-top: 8px;
}

.sync-campaign-list {
    max-height: 160px;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.4);
}

.sync-campaign-list::-webkit-scrollbar { width: 4px; }
.sync-campaign-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 2px; }

.sync-camp-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.12s;
    font-size: 0.8rem;
}

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

.sync-camp-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.sync-camp-item-id {
    font-family: monospace;
    font-size: 0.68rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Skeleton loader */
.sync-skeleton-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(var(--surface-rgb), 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
    height: 68px;
}

.sync-skeleton-card::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.06) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: syncShimmer 1.4s infinite;
}

@keyframes syncShimmer {
    100% { transform: translateX(100%); }
}

.sync-skeleton-side {
    display: flex;
    flex-direction: column;
    width: 42%;
}

.sync-skeleton-line {
    background: rgba(255, 255, 255, 0.07);
    border-radius: 4px;
}





/* ============================================================================
   SETTINGS TAB (admin)
   ============================================================================ */
.settings-area { padding: 1.5rem; }
.settings-header h2 { margin: 0 0 0.25rem; font-size: 1.25rem; color: var(--text-main); }
.settings-header p { margin: 0 0 1.25rem; font-size: 0.85rem; color: var(--text-muted); }
.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
    align-items: start;
}
.settings-card {
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 1.1rem 1.2rem;
}
.settings-card-title {
    display: flex; align-items: center; gap: 0.5rem;
    margin: 0 0 0.3rem; font-size: 0.95rem; color: var(--text-main);
}
.settings-card-desc { margin: 0 0 0.9rem; font-size: 0.78rem; color: var(--text-muted); }

.module-tab.module-tab-icon { padding-left: 0.7rem; padding-right: 0.7rem; }

/* ============================================================================
   CREATIVES: page tabs (Home / Browse All / All Catalogs) + All Catalogs view
   ============================================================================ */
.catalog-page-toggle { gap: 0.15rem; padding: 0.85rem 1.2rem 0; align-items: flex-end; }
.catalog-page-btn { height: 38px; padding: 0 1rem; border-radius: 8px 8px 0 0; }
.catalog-page-btn:hover { background: rgba(255,255,255,0.03); }
.catalog-page-btn.active { background: rgba(var(--primary-rgb), 0.07); }
.catalog-page-btn svg { opacity: 0.85; }
.catalog-page-count {
    min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
    border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.66rem; font-weight: 700; line-height: 1;
    color: var(--text-muted); background: rgba(255,255,255,0.07); border: 1px solid var(--glass-border);
}
.catalog-page-count:empty { display: none; }
.catalog-page-btn.active .catalog-page-count { color: #000; background: var(--primary); border-color: var(--primary); }

#catalog-sheets-view { display: flex; flex-direction: column; min-height: 0; overflow: auto; }
.csh-chips { display: flex; gap: 0.25rem; padding: 3px; height: 38px; box-sizing: border-box; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid var(--glass-border); }
.csh-chip {
    height: 30px; padding: 0 0.7rem; border: none; border-radius: 7px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: transparent; color: var(--text-muted); font-family: inherit; font-size: 0.78rem; font-weight: 600;
    transition: all 0.15s;
}
.csh-chip:hover { color: var(--text-main); }
.csh-chip.active { background: var(--primary); color: #000; }
.csh-chip-n { font-size: 0.68rem; opacity: 0.65; font-variant-numeric: tabular-nums; }

.csh-body { padding: 1rem 1.2rem 1.5rem; }
.csh-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.83rem; background: var(--card-bg); border: 1px solid var(--glass-border); border-radius: 12px; overflow: hidden; }
.csh-table th {
    text-align: left; padding: 0.7rem 0.9rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--text-muted); background: rgba(255,255,255,0.025); border-bottom: 1px solid var(--glass-border);
}
.csh-table td { padding: 0.65rem 0.9rem; border-bottom: 1px solid rgba(255,255,255,0.04); vertical-align: middle; }
.csh-table tbody tr:last-child td { border-bottom: none; }
.csh-table tbody tr:hover td { background: rgba(var(--primary-rgb), 0.05); }
.csh-name { font-weight: 600; color: var(--text-main); word-break: break-word; }
.csh-muted { color: var(--text-muted); }
.csh-time { opacity: 0.65; margin-left: 0.25rem; }
.csh-nowrap { white-space: nowrap; }
.csh-right { text-align: right !important; }
.csh-type { display: inline-flex; align-items: center; height: 22px; padding: 0 0.55rem; border-radius: 6px; font-size: 0.7rem; font-weight: 700; border: 1px solid transparent; }
.csh-type-base { color: #a5b4fc; background: rgba(99,102,241,0.12); border-color: rgba(99,102,241,0.28); }
.csh-type-country { color: #6ee7b7; background: rgba(16,185,129,0.12); border-color: rgba(16,185,129,0.28); }
.csh-type-lang { color: #fcd34d; background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.28); }
.csh-type-override { color: #f9a8d4; background: rgba(236,72,153,0.12); border-color: rgba(236,72,153,0.28); }
.csh-act, .csh-open {
    height: 30px; box-sizing: border-box; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
    font-family: inherit; font-size: 0.76rem; font-weight: 600; cursor: pointer; text-decoration: none; vertical-align: middle; transition: all 0.15s;
}
.csh-act { width: 30px; border: 1px solid var(--glass-border); background: rgba(255,255,255,0.04); color: var(--text-muted); margin-right: 0.3rem; }
.csh-act:hover { color: var(--text-main); border-color: rgba(var(--primary-rgb),0.35); }
.csh-open { padding: 0 0.75rem; border: 1px solid rgba(var(--primary-rgb),0.3); background: rgba(var(--primary-rgb),0.1); color: var(--text-main); }
.csh-open:hover { background: var(--primary); color: #000; border-color: var(--primary); }
.csh-empty { padding: 3rem 1rem; text-align: center; color: var(--text-muted); font-size: 0.85rem; border: 1px dashed var(--glass-border); border-radius: 12px; }

/* Sync: auto-map modal */
.automap-content { max-height: 60vh; overflow: auto; }
.automap-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.automap-table th { text-align: left; color: var(--text-muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--border-color); position: sticky; top: 0; background: var(--bg-card, #111); }
.automap-table td { padding: 7px 8px; border-bottom: 1px solid rgba(255,255,255,0.05); vertical-align: top; }
.automap-badge { display: inline-block; border: 1px solid; border-radius: 6px; padding: 1px 6px; font-size: 0.72rem; white-space: nowrap; }
.automap-id { color: var(--text-muted); font-family: monospace; font-size: 0.72rem; }
.automap-note { color: var(--text-muted); font-size: 0.72rem; margin-top: 2px; }


/* Theme picker in the user menu (admin.js renderThemeSwatches) */
.theme-swatches { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3px; }
.theme-swatch {
    display: flex; align-items: center; gap: 7px; padding: 5px 6px;
    border-radius: 7px; border: 1px solid transparent; background: transparent;
    color: var(--text-muted); font-family: inherit; font-size: 0.72rem; text-align: left; cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.theme-swatch:hover { background: rgba(255, 255, 255, 0.05); color: var(--text-main); }
.theme-swatch.active { border-color: rgba(var(--primary-rgb), 0.45); background: rgba(var(--primary-rgb), 0.08); color: var(--text-main); }
.theme-swatch-chip {
    position: relative; flex-shrink: 0; width: 24px; height: 18px; border-radius: 5px; overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
}
.theme-swatch-chip i { position: absolute; left: 0; right: 0; bottom: 0; height: 45%; }
.theme-swatch-chip b { position: absolute; right: 3px; top: 3px; width: 7px; height: 7px; border-radius: 50%; }
.theme-swatch-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ==========================================================================
   DEPTH & EMPHASIS — must stay at the end of style.css (overrides older rules)
   ========================================================================== */
.module-nav { background: rgba(var(--surface-rgb), 0.95); border-color: var(--border-color); }
html body.layout-rail .module-nav { background: var(--surface-solid); }
.module-tab, .module-tab-link { color: var(--text-muted); }
.module-tab:hover, .module-tab-link:hover { background: rgba(var(--surface-2-rgb), 0.9); color: var(--text-main); border-color: var(--border-color); }
.module-tab.active {
    background: rgba(var(--primary-rgb), 0.16);
    color: var(--primary);
    border-color: rgba(var(--primary-rgb), 0.7);
    box-shadow: 0 0 14px rgba(var(--primary-rgb), 0.18);
    font-weight: 600;
}
.logo-section h1 { background: none; -webkit-text-fill-color: currentColor; color: var(--primary); }
.btn-primary { color: var(--on-primary); }
.btn-secondary:hover { background: rgba(var(--primary-rgb), 0.1); border-color: rgba(var(--primary-rgb), 0.35); }
.glass-input:focus, .glass-input-small:focus { background: var(--surface-2); border-color: rgba(var(--primary-rgb), 0.7); }
.sources-table th, .sources-table tfoot td { background: var(--surface-2); }
.sources-stat-card { background: var(--card-bg); }
.sources-interval-chips, .sources-group-chips { background: rgba(var(--bg-rgb), 0.6); border-color: var(--border-color); }
/* Page panel sits half a step above the page, so the cards inside it stand out */
.content-area { background: rgba(var(--surface-rgb), 0.45); border-color: var(--border-color); }
.sources-toolbar, .sources-subbar, .sources-stat-card, .sources-table-container { border-color: var(--border-color); }
/* Highlights: saturated accent on dark backgrounds */
.btn-primary { background-color: var(--primary); font-weight: 600; }
.sources-interval-btn.active, .sources-group-btn.active { background: var(--primary); color: var(--on-primary); font-weight: 700; }
.sources-src-tab.active { border-color: rgba(var(--primary-rgb), 0.6); color: var(--text-main); }