*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --accent: var(--accent);
    --accent-rgb: 0,168,255;
    --bg-base: #0d1117;
    --bg-surface: #161b22;
    --bg-elevated: #1a1f36;
    --bg-card: rgba(255,255,255,0.04);
    --bg-card-hover: rgba(255,255,255,0.07);
    --border: rgba(255,255,255,0.06);
    --border-hover: rgba(255,255,255,0.15);
    --text-primary: #e6edf3;
    --text-secondary: rgba(255,255,255,0.55);
    --text-muted: rgba(255,255,255,0.35);
    --input-bg: rgba(255,255,255,0.08);
    --input-border: rgba(255,255,255,0.15);
    --sidebar-bg: rgba(255,255,255,0.03);
}

[data-theme="light"] {
    --bg-base: #f0f2f5;
    --bg-surface: #ffffff;
    --bg-elevated: #f8f9fa;
    --bg-card: rgba(0,0,0,0.03);
    --bg-card-hover: rgba(0,0,0,0.06);
    --border: rgba(0,0,0,0.08);
    --border-hover: rgba(0,0,0,0.2);
    --text-primary: #1a1a2e;
    --text-secondary: rgba(0,0,0,0.55);
    --text-muted: rgba(0,0,0,0.35);
    --input-bg: rgba(0,0,0,0.04);
    --input-border: rgba(0,0,0,0.12);
    --sidebar-bg: #ffffff;
}

html, body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    margin: 0;
    padding: 0;
    background: var(--bg-base);
    color: var(--text-primary);
}

/* Global toggle switch for all checkboxes */
input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 36px;
    height: 20px;
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
    margin: 0;
}

input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: rgba(255,255,255,0.4);
    border-radius: 50%;
    transition: transform 0.2s, background 0.2s;
}

input[type="checkbox"]:checked {
    background: var(--accent);
}

input[type="checkbox"]:checked::after {
    transform: translateX(16px);
    background: #fff;
}

select, select option {
    background: #1a1f36;
    color: var(--text-primary);
}

h1:focus { outline: none; }

input, textarea, select, button {
    font-family: inherit;
}

#app {
    min-height: 100vh;
}

/* Quill WYSIWYG dark theme overrides */
.rich-editor { min-height: 225px; }
.ql-toolbar.ql-snow {
    border-color: var(--border) !important;
    background: var(--bg-card) !important;
    border-radius: 8px 8px 0 0;
}
.ql-container.ql-snow {
    border-color: var(--border) !important;
    background: var(--input-bg) !important;
    border-radius: 0 0 8px 8px;
    color: var(--text-primary) !important;
    font-family: inherit !important;
    font-size: 0.9rem !important;
}
.ql-editor { min-height: 180px; line-height: 1.7; }
.ql-editor p { margin-bottom: 0.75em !important; }
.ql-editor p:last-child { margin-bottom: 0 !important; }
.ql-editor.ql-blank::before { color: var(--text-muted) !important; font-style: normal !important; }
.ql-snow .ql-stroke { stroke: var(--text-secondary) !important; }
.ql-snow .ql-fill { fill: var(--text-secondary) !important; }
.ql-snow .ql-picker-label { color: var(--text-secondary) !important; }
.ql-snow .ql-picker-options { background: var(--bg-surface) !important; border-color: var(--border) !important; }
.ql-snow .ql-picker-item { color: var(--text-primary) !important; }
.ql-snow .ql-active .ql-stroke { stroke: var(--accent) !important; }
.ql-snow .ql-active .ql-fill { fill: var(--accent) !important; }
.ql-snow .ql-active { color: var(--accent) !important; }
.ql-snow a { color: var(--accent) !important; }

/* ===== Auth Pages (Login, Register, Forgot Password, Reset) ===== */

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    padding: 1rem;
}

.login-container {
    width: 100%;
    max-width: 420px;
    text-align: center;
}

.login-logo { margin-bottom: 2.5rem; }
.login-logo img { width: 100%; max-width: 360px; height: auto; }

.login-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    text-align: left;
}

.login-card h2 {
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 1.5rem 0;
    text-align: center;
}

.form-group { margin-bottom: 1.25rem; }

.form-group label {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 0.4rem;
    letter-spacing: 0.03em;
}

.form-input {
    width: 100%;
    padding: 0.6rem 0.85rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 7px;
    color: var(--text-primary);
    font-size: 0.875rem;
    transition: border-color 0.2s, background 0.2s;
    box-sizing: border-box;
}

.form-input::placeholder { color: rgba(255, 255, 255, 0.3); }
textarea.form-input { min-height: 100px; line-height: 1.5; resize: vertical; }
/* Bare textareas without a wrapper class still get a usable default height. */
textarea { min-height: 100px; line-height: 1.5; }

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

.form-row { display: flex; gap: 0.75rem; }
.form-group.half { flex: 1; }

.btn-signin {
    width: 100%;
    padding: 0.8rem;
    background: rgba(var(--accent-rgb),0.15);
    border: 1px solid rgba(var(--accent-rgb),0.3);
    border-radius: 8px;
    color: var(--accent);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    margin-top: 0.5rem;
    letter-spacing: 0.03em;
}

.btn-signin:hover { opacity: 0.9; }
.btn-signin:active { transform: scale(0.98); }
.btn-signin:disabled { opacity: 0.6; cursor: not-allowed; }

.login-error {
    background: rgba(220, 53, 69, 0.15);
    border: 1px solid rgba(220, 53, 69, 0.3);
    color: #ff6b7a;
    padding: 0.65rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    margin-bottom: 1.25rem;
    text-align: center;
}

.login-success {
    background: rgba(63, 185, 80, 0.12);
    border: 1px solid rgba(63, 185, 80, 0.25);
    color: #3fb950;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    text-align: center;
}

.login-subtitle {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    margin: 0 0 1.25rem;
}

.login-footer {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.85rem;
}

.login-footer a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: color 0.2s;
}

.login-footer a:hover { color: var(--accent); }

.login-footer .divider {
    color: rgba(255, 255, 255, 0.2);
    margin: 0 0.75rem;
}

.login-tagline {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-top: 2rem;
}

/* ===== App Layout (Midnight Glass) ===== */

.app-page {
    display: flex;
    min-height: 100vh;
    background: linear-gradient(160deg, var(--bg-base) 0%, var(--bg-surface) 40%, var(--bg-elevated) 100%);
    color: var(--text-primary);
}

.app-sidebar {
    width: 260px;
    height: 100vh;
    position: sticky;
    top: 0;
    background: var(--sidebar-bg);
    overflow: hidden;
    z-index: 10;
    border-right: 1px solid var(--border);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.app-logo { text-align: center; }
.app-logo img { width: 160px; margin-bottom: 1.25rem; display: inline-block; }

.app-nav-items {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.08) transparent;
}
.app-nav-items::-webkit-scrollbar { width: 4px; }
.app-nav-items::-webkit-scrollbar-track { background: transparent; }
.app-nav-items::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }
.app-nav-items::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }

.app-nav-item,
.app-nav-item:link,
.app-nav-item:visited {
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.app-nav-item:hover { color: var(--text-primary); background: var(--bg-card-hover); }
.app-nav-item.active { color: var(--accent) !important; background: rgba(var(--accent-rgb),0.1); }
.app-nav-icon { font-size: 0.78rem; width: 16px; text-align: center; }

/* Submenu flyout */
.app-nav-submenu-trigger { cursor: pointer; display: flex; align-items: center; }
.app-nav-flyout {
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 0.3rem;
    margin: 0.15rem 0.5rem 0.15rem 1.5rem;
    animation: flyoutIn 0.15s ease-out;
}
@keyframes flyoutIn { from { opacity: 0; transform: translateX(-5px); } to { opacity: 1; transform: translateX(0); } }
.app-nav-flyout-item {
    display: block;
    padding: 0.4rem 0.75rem;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.1s;
}
.app-nav-flyout-item:hover { color: var(--text-primary); background: var(--bg-card-hover); }
.app-nav-flyout-item.active { color: var(--accent) !important; background: rgba(var(--accent-rgb),0.1); }

.app-brand-select {
    width: 100%;
    padding: 0.45rem 0.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 1rem;
    cursor: pointer;
}
.app-brand-select:focus { outline: none; border-color: var(--accent); }

.app-brand-label {
    font-size: 0.8rem; font-weight: 600;
    color: var(--text-secondary);
    padding: 0.3rem 0;
    margin-bottom: 0.75rem;
}

.app-nav-group-label {
    font-size: 0.55rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--text-muted);
    padding: 0.4rem 0.8rem 0.1rem;
    margin-top: 0.15rem;
}

.app-sidebar-footer {
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

/* Nav overflow "More" button */
.app-nav-more {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: none;
    border: none;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    width: 100%;
    text-align: left;
    flex-shrink: 0;
    transition: color 0.15s;
}
.app-nav-more:hover { color: var(--accent); }

/* Overflow slide-out panel */
.app-nav-overflow-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
}

.app-nav-overflow {
    position: fixed;
    left: 260px;
    bottom: 4.5rem;
    width: 240px;
    max-height: calc(100vh - 6rem);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    box-shadow: 4px 4px 24px rgba(0,0,0,0.4);
}

.app-nav-overflow-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.app-nav-overflow-items {
    flex: 1;
    overflow-y: auto;
    padding: 0 0.5rem 1rem;
}

[data-sidebar="compact"] .app-nav-overflow { left: 200px; }

.app-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.app-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent));
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; font-weight: 700; color: var(--text-primary);
    flex-shrink: 0;
}

.app-avatar-img {
    width: 36px; height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.app-username { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); }

/* Profile photo in settings */
.profile-photo-section {
    display: flex; align-items: center; gap: 1.25rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.profile-photo-preview {
    width: 80px; height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent));
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; flex-shrink: 0;
}

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

.profile-photo-initials {
    font-size: 1.5rem; font-weight: 700; color: var(--text-primary);
}

.brand-logo-preview {
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.brand-logo-preview img { height: 60px; width: auto; }

.profile-photo-actions {
    display: flex; flex-direction: column; gap: 0.4rem;
}

.profile-photo-btn {
    cursor: pointer; display: inline-block; text-align: center;
}

/* Annie AI Icon */
.annie-icon {
    width: 20px; height: 20px; border-radius: 50%; object-fit: cover;
    vertical-align: middle; margin-right: 0.2rem;
}

/* Annie Advice Panel */
.annie-advice-panel {
    background: linear-gradient(135deg, rgba(0,168,255,0.08), rgba(0,168,255,0.03));
    border: 1px solid rgba(0,168,255,0.25);
    border-radius: 12px;
    padding: 1.2rem 1.4rem;
    margin: 1rem 0;
    position: relative;
    animation: annieSlideIn 0.3s ease-out;
}
@keyframes annieSlideIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
.annie-advice-close {
    position: absolute; top: 0.6rem; right: 0.8rem;
    background: none; border: none; color: #8899aa; font-size: 1.4rem;
    cursor: pointer; line-height: 1; padding: 0.2rem;
}
.annie-advice-close:hover { color: #fff; }
.annie-advice-header {
    display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.8rem;
}
.annie-advice-img {
    width: 48px; height: 48px; border-radius: 10px; object-fit: cover;
}
.annie-advice-header strong { color: #00a8ff; font-size: 1rem; display: block; }
.annie-advice-sub { color: #6688aa; font-size: 0.75rem; }
.annie-advice-body p {
    color: #c8d8e8; font-size: 0.9rem; line-height: 1.6;
    margin: 0 0 0.4rem;
}
.annie-advice-body p:first-child { color: #fff; font-weight: 600; font-size: 1rem; }

/* ===== Marketing Engine ===== */
.mkt-score-banner {
    display: flex; align-items: center; gap: 2rem; padding: 1.5rem;
    background: linear-gradient(135deg, rgba(0,168,255,0.06), rgba(0,168,255,0.02));
    border: 1px solid rgba(0,168,255,0.15); border-radius: 12px; margin-bottom: 1.5rem;
}
.mkt-score-ring-wrap {
    position: relative; width: 130px; height: 130px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.mkt-score-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.mkt-score-track { fill: none; stroke: rgba(255,255,255,0.06); stroke-width: 4; }
.mkt-score-fill {
    fill: none; stroke: #00a8ff; stroke-width: 4; stroke-linecap: round;
    transition: stroke-dasharray 0.6s ease-out;
    filter: drop-shadow(0 0 6px rgba(0,168,255,0.4));
}
.mkt-score-value {
    position: absolute; font-size: 2rem; font-weight: 700; color: #fff;
}
.mkt-score-info { display: flex; flex-direction: column; gap: 0.2rem; }
.mkt-level-badge {
    display: inline-block; padding: 0.2rem 0.75rem; border-radius: 20px;
    background: rgba(0,168,255,0.15); color: #00a8ff; font-weight: 600;
    font-size: 0.82rem; width: fit-content;
}
.mkt-xp { color: rgba(255,255,255,0.4); font-size: 0.8rem; }
.mkt-score-label { color: rgba(255,255,255,0.3); font-size: 0.75rem; }
.mkt-score-breakdown { margin-left: auto; display: flex; flex-direction: column; gap: 0.4rem; min-width: 220px; }
.mkt-score-bar { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: rgba(255,255,255,0.5); }
.mkt-score-bar span:first-child { width: 70px; text-align: right; }
.mkt-score-bar span:last-child { width: 35px; font-family: monospace; }
.mkt-bar { flex: 1; height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; }
.mkt-bar-fill { height: 100%; background: linear-gradient(90deg, #00a8ff, #00d4ff); border-radius: 3px; transition: width 0.4s ease; }

/* Action cards */
.mkt-action-card {
    display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.75rem;
    background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px; cursor: pointer; transition: border-color 0.2s;
}
.mkt-action-card:hover { border-color: rgba(0,168,255,0.3); }
/* Confirm Dialog */
.confirm-overlay {
    position: fixed; inset: 0; z-index: 100000;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    animation: fadeIn 0.15s ease-out;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.confirm-dialog {
    background: #1a1a2e; border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px; padding: 0; min-width: 360px; max-width: 440px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    animation: confirmSlide 0.2s ease-out;
}
@keyframes confirmSlide { from { opacity: 0; transform: scale(0.95) translateY(-10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.confirm-body {
    padding: 1.75rem 1.5rem 1rem; text-align: center;
}
.confirm-annie {
    width: 64px; height: 64px; border-radius: 12px; object-fit: cover;
    margin-bottom: 0.75rem;
}
.confirm-body p {
    color: rgba(255,255,255,0.8); font-size: 0.95rem; line-height: 1.5; margin: 0;
}
.confirm-actions {
    display: flex; gap: 0.5rem; padding: 1rem 1.5rem 1.25rem;
    justify-content: flex-end; border-top: 1px solid rgba(255,255,255,0.06);
}
.confirm-btn-danger {
    background: rgba(255,68,68,0.15); color: #ff6666; border: 1px solid rgba(255,68,68,0.3);
    padding: 0.45rem 1.25rem; border-radius: 8px; font-size: 0.85rem; font-weight: 600;
    cursor: pointer; transition: background 0.2s;
}
.confirm-btn-danger:hover { background: rgba(255,68,68,0.25); }

/* Annie pulse animation for campaign generation */
.annie-pulse-wrap {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 100px; height: 100px; margin-bottom: 1.25rem;
}
.annie-pulse-img {
    width: 64px; height: 64px; border-radius: 50%; position: relative; z-index: 1;
    animation: logoPulse 1.5s ease-in-out infinite;
}
.annie-pulse-ring {
    position: absolute; top: 50%; left: 50%; width: 64px; height: 64px;
    transform: translate(-50%, -50%);
    border: 2px solid #00a8ff; border-radius: 50%;
    animation: anniePulseExpand 2s ease-out infinite;
}
.annie-pulse-ring.delay { animation-delay: 1s; }
@keyframes anniePulseExpand {
    0% { width: 64px; height: 64px; opacity: 0.6; }
    100% { width: 140px; height: 140px; opacity: 0; }
}

.mkt-action-circle {
    width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
    border: 2px solid #00a8ff; margin-top: 2px;
}

/* Activity feed */
.mkt-feed-item { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.4rem 0; }
.mkt-feed-avatar { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; }
.mkt-feed-title { font-size: 0.82rem; color: rgba(255,255,255,0.8); }
.mkt-feed-time { font-size: 0.7rem; color: rgba(255,255,255,0.25); }
.mkt-xp-badge {
    display: inline-block; font-size: 0.65rem; padding: 0.1rem 0.4rem;
    background: rgba(0,168,255,0.15); color: #00a8ff; border-radius: 10px;
    margin-left: 0.3rem; font-weight: 600;
}

/* Quick cards */
.mkt-quick-card {
    display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
    padding: 1.25rem; background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06); border-radius: 10px;
    text-decoration: none; color: #fff; transition: border-color 0.2s, transform 0.2s;
}
.mkt-quick-card:hover { border-color: rgba(0,168,255,0.3); transform: translateY(-2px); }
.mkt-quick-card strong { font-size: 0.85rem; }
.mkt-quick-card span { font-size: 0.72rem; color: rgba(255,255,255,0.35); }
.mkt-quick-icon { font-size: 1.5rem; }

/* Content cards */
.mkt-content-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1rem; }
.mkt-content-card {
    background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px; padding: 1rem;
}
.mkt-content-header { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.3rem; }
.mkt-content-body { font-size: 0.85rem; color: rgba(255,255,255,0.7); line-height: 1.5; white-space: pre-line; }
.mkt-hashtags { font-size: 0.78rem; color: rgba(0,168,255,0.7); margin-top: 0.4rem; word-break: break-all; }
.mkt-content-actions { display: flex; gap: 0.3rem; margin-top: 0.75rem; padding-top: 0.5rem; border-top: 1px solid rgba(255,255,255,0.04); }

/* Playbook cards */
.mkt-playbook-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.mkt-playbook-card {
    background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px; padding: 1.25rem; cursor: pointer; transition: border-color 0.2s;
}
.mkt-playbook-card:hover { border-color: rgba(0,168,255,0.3); }
.mkt-playbook-card.completed { border-color: rgba(63,185,80,0.3); }
.mkt-playbook-card h3 { margin: 0.5rem 0 0.3rem; font-size: 1rem; }
.mkt-playbook-card p { font-size: 0.82rem; color: rgba(255,255,255,0.5); margin: 0 0 0.5rem; }
.mkt-playbook-badge { display: inline-block; font-size: 0.65rem; padding: 0.15rem 0.5rem; border-radius: 10px; background: rgba(0,168,255,0.1); color: #00a8ff; }
.mkt-playbook-meta { display: flex; gap: 1rem; font-size: 0.72rem; color: rgba(255,255,255,0.35); }

/* Playbook steps */
.mkt-step { display: flex; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.mkt-step-num {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 600;
    background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.3);
}
.mkt-step.done .mkt-step-num { background: rgba(63,185,80,0.2); color: #3fb950; }
.mkt-step.current .mkt-step-num { background: rgba(0,168,255,0.2); color: #00a8ff; }
.mkt-step-body { flex: 1; }

/* Achievement grid */
.mkt-achievement-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.mkt-achievement {
    background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px; padding: 1rem; text-align: center; position: relative;
    transition: transform 0.2s;
}
.mkt-achievement.earned { border-color: rgba(0,168,255,0.25); }
.mkt-achievement.locked { opacity: 0.4; }
.mkt-achievement:hover { transform: translateY(-2px); }
.mkt-achievement-icon { font-size: 2rem; margin-bottom: 0.3rem; }
.mkt-achievement strong { display: block; font-size: 0.85rem; margin-bottom: 0.2rem; }
.mkt-achievement p { font-size: 0.75rem; color: rgba(255,255,255,0.4); margin: 0; }
.mkt-achievement-xp { display: block; font-size: 0.7rem; color: #00a8ff; margin-top: 0.3rem; }
.mkt-achievement-earned {
    position: absolute; top: 0.5rem; right: 0.5rem; font-size: 0.6rem;
    padding: 0.1rem 0.4rem; border-radius: 8px; background: rgba(63,185,80,0.2); color: #3fb950;
}

@media (max-width: 768px) {
    .mkt-score-banner { flex-direction: column; text-align: center; }
    .mkt-score-breakdown { margin-left: 0; min-width: 0; width: 100%; }
    .mkt-content-grid { grid-template-columns: 1fr; }
    .mkt-quick-card { padding: 0.75rem; }
}

/* Campaign Calendar */
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    overflow: hidden;
}
.cal-header {
    padding: 0.6rem;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.02);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cal-day {
    min-height: 100px;
    padding: 0.4rem;
    border-right: 1px solid rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    position: relative;
}
.cal-day:nth-child(7n) { border-right: none; }
.cal-day-num {
    font-size: 0.78rem;
    font-weight: 500;
    color: rgba(255,255,255,0.5);
    margin-bottom: 0.3rem;
}
.cal-today { background: rgba(0,168,255,0.04); }
.cal-today .cal-day-num { color: #00a8ff; font-weight: 700; }
.cal-other-month { opacity: 0.3; }
.cal-event {
    font-size: 0.65rem;
    padding: 0.15rem 0.35rem;
    border-radius: 4px;
    margin-bottom: 0.15rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background: rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.7);
    transition: background 0.15s;
}
.cal-event:hover { background: rgba(255,255,255,0.08); }
.cal-event-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}
.cal-campaign { border-left: 2px solid #e8833a; }
.cal-content { border-left: 2px solid #00a8ff; }
.cal-post { border-left: 2px solid #3fb950; }
.cal-more { color: rgba(255,255,255,0.3); font-style: italic; }

@media (max-width: 768px) {
    .cal-day { min-height: 60px; }
    .cal-event { font-size: 0.55rem; }
}

/* Billing Tiers */
.billing-tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; padding: 1rem; }
.billing-tier {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px; padding: 1.25rem; text-align: center; cursor: pointer;
    transition: border-color 0.15s, transform 0.15s; position: relative;
}
.billing-tier:hover { border-color: rgba(var(--accent-rgb),0.3); transform: translateY(-1px); }
.billing-tier.current { border-color: var(--accent); background: rgba(var(--accent-rgb),0.06); }
.billing-tier.loading { opacity: 0.6; pointer-events: none; }
.billing-tier-badge {
    position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
    background: var(--accent); color: #fff; font-size: 0.6rem; font-weight: 700;
    padding: 0.15rem 0.5rem; border-radius: 4px; text-transform: uppercase;
}
.billing-tier-name { font-size: 0.85rem; font-weight: 700; margin-bottom: 0.3rem; }
.billing-tier-price { font-size: 1.5rem; font-weight: 800; margin-bottom: 0.5rem; }
.billing-tier-period { font-size: 0.75rem; font-weight: 400; color: rgba(255,255,255,0.4); }
.billing-tier-features { font-size: 0.72rem; color: rgba(255,255,255,0.4); line-height: 1.8; }
.billing-tier-btn {
    margin-top: 0.75rem; width: 100%; padding: 0.4rem; border-radius: 6px;
    background: rgba(var(--accent-rgb),0.15); border: 1px solid rgba(var(--accent-rgb),0.3);
    color: var(--accent); font-size: 0.78rem; font-weight: 600; cursor: pointer;
}
.billing-tier-btn:hover { background: rgba(var(--accent-rgb),0.25); }
@media (max-width: 768px) { .billing-tiers { grid-template-columns: repeat(2, 1fr); } }

/* Global Search */
.app-search-wrap { position: relative; padding: 0 0 0.75rem; }
.app-search-input {
    width: 100%; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px; padding: 0.4rem 0.6rem; color: var(--text-primary);
    font-size: 0.8rem; outline: none;
}
.app-search-input:focus { border-color: rgba(var(--accent-rgb),0.4); }
.app-search-input::placeholder { color: rgba(255,255,255,0.25); }
.app-search-results {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 100;
    background: #161b22; border: 1px solid var(--border); border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6); max-height: 300px; overflow-y: auto;
}
.app-search-result {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem;
    text-decoration: none; color: var(--text-primary); font-size: 0.82rem;
    border-bottom: 1px solid rgba(255,255,255,0.03); transition: background 0.1s;
}
.app-search-result:hover { background: rgba(255,255,255,0.04); }
.app-search-type {
    font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--accent); background: rgba(var(--accent-rgb),0.1);
    padding: 0.1rem 0.3rem; border-radius: 3px; flex-shrink: 0;
}

/* Notification Center (floating bottom-right) */
.notif-fab {
    position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 900;
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--accent); color: #fff; font-size: 1.2rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: 0 4px 16px rgba(0,168,255,0.3);
    transition: transform 0.15s, box-shadow 0.15s;
}
.notif-fab:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(0,168,255,0.4); }
.notif-fab-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.notif-fab-badge {
    position: absolute; top: -4px; right: -4px;
    background: #f85149; color: #fff; font-size: 0.6rem; font-weight: 700;
    min-width: 18px; height: 18px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.notif-backdrop { position: fixed; inset: 0; z-index: 9998; }
.notif-center {
    position: fixed; bottom: 5rem; right: 1.5rem; width: 380px; max-height: 480px;
    background: #161b22; border: 1px solid var(--border); border-radius: 14px;
    box-shadow: 0 12px 48px rgba(0,0,0,0.5); z-index: 9999;
    display: flex; flex-direction: column;
}
.notif-center-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.notif-center-header h4 { margin: 0; font-size: 1rem; font-weight: 600; }
.notif-center-body { overflow-y: auto; flex: 1; }
.notif-item {
    padding: 0.75rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,0.03);
    cursor: pointer; transition: background 0.1s;
    display: flex; gap: 0.75rem; align-items: flex-start;
}
.notif-item:hover { background: rgba(255,255,255,0.03); }
.notif-item.unread { border-left: 3px solid var(--accent); }
.notif-item-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; margin-top: 0.1rem; }
.notif-item-content { min-width: 0; }
.notif-item-title { font-size: 0.85rem; font-weight: 600; }
.notif-item-body { font-size: 0.78rem; color: rgba(255,255,255,0.4); margin-top: 0.2rem; }
.notif-item-time { font-size: 0.7rem; color: rgba(255,255,255,0.25); margin-top: 0.25rem; }

@media (max-width: 768px) {
    .notif-center { right: 0.75rem; left: 0.75rem; width: auto; bottom: 4.5rem; }
    .notif-fab { bottom: 1rem; right: 1rem; width: 42px; height: 42px; }
    .msg-fab { bottom: 1rem; right: 4rem; width: 42px; height: 42px; }
}

/* Messages FAB + Panel */
.msg-fab {
    position: fixed; bottom: 1.5rem; right: 5rem; z-index: 900;
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    transition: transform 0.15s, box-shadow 0.15s;
}
.msg-fab:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(0,0,0,0.4); border-color: var(--accent); }
.msg-panel {
    position: fixed; bottom: 5rem; right: 5rem; width: 380px; height: 520px;
    background: var(--bg-surface); border: 1px solid var(--border); border-radius: 14px;
    box-shadow: 0 12px 48px rgba(0,0,0,0.5); z-index: 9999;
    display: flex; flex-direction: column; overflow: hidden;
}

/* Dropup user menu */
.dropup-container { position: relative; }

.app-user-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
}

.app-user-btn:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.15);
}

.app-user-info { flex: 1; min-width: 0; }

.dropup-chevron {
    font-size: 0.6rem;
    color: rgba(255,255,255,0.3);
}

.dropup-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.dropup-menu {
    position: absolute;
    bottom: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    background: #1e2030;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 0.35rem;
    z-index: 100;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.4);
}

.dropup-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.55rem 0.75rem;
    background: none;
    border: none;
    border-radius: 6px;
    color: rgba(255,255,255,0.7);
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.12s;
}

.dropup-item:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

.dropup-admin { color: #3fb950; }
.dropup-admin:hover { background: rgba(63,185,80,0.1); color: #56d364; }

.dropup-logout:hover {
    background: rgba(220,53,69,0.1);
    color: #ff6b7a;
}

.dropup-icon {
    font-size: 0.85rem;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.dropup-divider {
    height: 1px;
    background: var(--bg-card-hover);
    margin: 0.2rem 0.5rem;
}

.app-main {
    flex: 1;
    padding: 2rem 2.5rem;
    overflow-y: auto;
    position: relative;
    z-index: 1;
}

[data-sidebar="compact"] .app-sidebar { width: 200px; padding: 1rem; }
[data-sidebar="compact"] .app-logo img { width: 130px; margin-bottom: 0.85rem; }
[data-sidebar="compact"] .app-nav-item { padding: 0.35rem 0.65rem; font-size: 0.74rem; }

[data-theme="light"] .login-page {
    background: linear-gradient(135deg, #e8edf2 0%, #d5dde6 50%, #c2cdd8 100%);
}
[data-theme="light"] .login-card {
    background: rgba(255,255,255,0.8);
    border-color: rgba(0,0,0,0.1);
}
[data-theme="light"] .form-input { color: #1a1a2e; }
[data-theme="light"] .form-input::placeholder { color: rgba(0,0,0,0.35); }
[data-theme="light"] .dropup-menu { background: #fff; border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .dropup-item { color: rgba(0,0,0,0.7); }
[data-theme="light"] .dropup-item:hover { background: rgba(0,0,0,0.04); color: #1a1a2e; }
[data-theme="light"] .appear-panel { background: #fff; border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .appear-option { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08); color: rgba(0,0,0,0.6); }
[data-theme="light"] .appear-option:hover { color: #1a1a2e; }
[data-theme="light"] select, [data-theme="light"] select option { background: #fff; color: #1a1a2e; }
[data-theme="light"] input[type="checkbox"] { background: rgba(0,0,0,0.1); }
[data-theme="light"] input[type="checkbox"]::after { background: rgba(0,0,0,0.3); }
[data-theme="light"] .admin-table td { color: rgba(0,0,0,0.6); }
[data-theme="light"] .admin-table th { color: rgba(0,0,0,0.45); }

/* ===== API offline overlay =====
   Shown when ApiHealthState says the API is unreachable. Covers the whole viewport
   so the user can't keep clicking into broken screens; auto-dismisses on reconnect. */
.api-offline-backdrop {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,0.75);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    padding: 1.5rem;
    animation: api-offline-fade 0.2s ease-out;
}
@keyframes api-offline-fade { from { opacity: 0; } to { opacity: 1; } }

.api-offline-card {
    max-width: 420px;
    background: #0d1117;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    color: var(--text-primary);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
[data-theme="light"] .api-offline-card { background: #fff; color: #1a1a2e; }

.api-offline-spinner {
    width: 48px; height: 48px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.1);
    border-top-color: var(--accent);
    animation: api-offline-spin 0.9s linear infinite;
}
[data-theme="light"] .api-offline-spinner { border-color: rgba(0,0,0,0.08); border-top-color: var(--accent); }
@keyframes api-offline-spin { to { transform: rotate(360deg); } }

.api-offline-title { margin: 0 0 0.5rem; font-size: 1.15rem; font-weight: 600; }
.api-offline-body { margin: 0; font-size: 0.85rem; line-height: 1.55; color: var(--text-secondary); }

/* ===== Light theme: logo swap + button & text visibility =====
   Many components hard-code rgba(255,255,255,*) for borders, backgrounds, and especially
   text — which goes invisible on white. This block restates the same shapes against black
   so the dark-mode styles don't need to be rewritten. */

/* Logo: show black variant in light mode, hide the white one. Use chained selectors
   so specificity beats the .app-logo img / .app-mobile-logo rules that set display. */
img.app-logo-light { display: none; }
[data-theme="light"] img.app-logo-dark { display: none; }
[data-theme="light"] img.app-logo-light { display: inline-block; }

/* Outline buttons — primary offender, used everywhere */
[data-theme="light"] .artd-btn-outline {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.12);
    color: rgba(0,0,0,0.6);
}
[data-theme="light"] .artd-btn-outline:hover {
    background: rgba(0,0,0,0.08);
    border-color: rgba(0,0,0,0.2);
    color: rgba(0,0,0,0.85);
}

/* User-menu button and other "ghost" buttons that mirror outline styling */
[data-theme="light"] .app-user-btn {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.08);
    color: rgba(0,0,0,0.7);
}
[data-theme="light"] .app-user-btn:hover { background: rgba(0,0,0,0.06); }

/* Subtitles / muted text — hard-coded white in many spots */
[data-theme="light"] .art-subtitle,
[data-theme="light"] .dash-subtitle,
[data-theme="light"] .mkt-feed-title,
[data-theme="light"] .mkt-content-body,
[data-theme="light"] .mkt-achievement p,
[data-theme="light"] .mkt-playbook-card p,
[data-theme="light"] .billing-tier-features { color: rgba(0,0,0,0.55); }

[data-theme="light"] .artd-breadcrumb span,
[data-theme="light"] .mkt-xp,
[data-theme="light"] .mkt-feed-time,
[data-theme="light"] .mkt-quick-card span,
[data-theme="light"] .mkt-playbook-meta,
[data-theme="light"] .billing-tier-period,
[data-theme="light"] .notif-item-body,
[data-theme="light"] .notif-item-time,
[data-theme="light"] .cal-more { color: rgba(0,0,0,0.4); }

[data-theme="light"] .mkt-score-label,
[data-theme="light"] .mkt-score-bar { color: rgba(0,0,0,0.5); }

[data-theme="light"] .app-search-input::placeholder { color: rgba(0,0,0,0.3); }

/* Form & card surfaces that hard-code white backgrounds with low alpha */
[data-theme="light"] .form-input,
[data-theme="light"] .admin-card,
[data-theme="light"] .settings-card { background: var(--bg-surface); border-color: var(--border); color: var(--text-primary); }

/* ===== Dashboard ===== */

.dash-header {
    display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2rem;
}
.dash-header h1 { font-size: 1.6rem; font-weight: 700; margin: 0; color: var(--text-primary); }
.dash-subtitle { color: var(--text-muted); margin: 0.3rem 0 0; font-size: 0.9rem; }

.dash-btn-primary {
    padding: 0.5rem 1rem;
    background: rgba(var(--accent-rgb),0.15);
    border: 1px solid rgba(var(--accent-rgb),0.3); border-radius: 8px;
    color: var(--accent); font-weight: 500; font-size: 0.8rem;
    cursor: pointer; white-space: nowrap;
    transition: background 0.15s;
}
.dash-btn-primary:hover { background: rgba(var(--accent-rgb),0.25); }

.dash-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; margin-bottom: 2rem; }

.dash-stat-card {
    background: var(--bg-card);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem;
}

.dash-stat-value { font-size: 1.75rem; font-weight: 700; color: var(--text-primary); }
.dash-stat-label { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.15rem; }
.dash-quick-action {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.75rem;
    background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px; color: var(--text-secondary); text-decoration: none;
    font-size: 0.82rem; transition: all 0.15s; cursor: pointer;
}
.dash-quick-action:hover { background: rgba(0,168,255,0.08); border-color: rgba(0,168,255,0.15); color: #00a8ff; }
.dash-qa-icon { font-size: 0.9rem; width: 18px; text-align: center; }

.dash-card {
    background: var(--bg-card);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
}
.dash-card h3 { font-size: 1rem; font-weight: 600; margin: 0 0 0.5rem; color: var(--text-primary); }
.dash-muted { color: var(--text-muted); font-size: 0.9rem; margin: 0; }
.dash-activity-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.dash-activity-row:last-child { border-bottom: none; }
.dash-activity-date { font-size: 0.72rem; color: rgba(255,255,255,0.3); margin-left: 0.5rem; }
.dash-activity-meta { font-size: 0.75rem; color: rgba(255,255,255,0.35); margin-left: 0.4rem; }

/* ===== Settings ===== */

.settings-header { margin-bottom: 2rem; }
.settings-header h1 { font-size: 1.6rem; font-weight: 700; margin: 0; color: var(--text-primary); }

.settings-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

.settings-card-stack { display: flex; flex-direction: column; gap: 1.5rem; }

.settings-card {
    background: var(--bg-card);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
}

.settings-card h3 { font-size: 1rem; font-weight: 600; margin: 0 0 1.25rem; color: var(--text-primary); }

.settings-field { margin-bottom: 1rem; }

.settings-field label {
    display: block;
    color: rgba(255,255,255,0.6);
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 0.55rem;
}

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

.settings-form-row { display: flex; gap: 1rem; }
.settings-form-row .settings-field { flex: 1; }

.settings-btn-primary {
    padding: 0.5rem 1rem;
    background: rgba(var(--accent-rgb),0.15);
    border: 1px solid rgba(var(--accent-rgb),0.3); border-radius: 8px;
    color: var(--accent); font-weight: 500; font-size: 0.8rem;
    cursor: pointer; margin-top: 0.5rem;
}
.settings-btn-primary:hover { background: rgba(var(--accent-rgb),0.25); }
.settings-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

.settings-info-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border);
}
.settings-info-row:last-of-type { border-bottom: none; }
.settings-label { font-size: 0.85rem; color: rgba(255,255,255,0.5); }
.settings-value { font-size: 0.85rem; color: rgba(255,255,255,0.8); }

.settings-badge {
    font-size: 0.75rem; font-weight: 600;
    padding: 0.2rem 0.75rem; border-radius: 12px;
    background: rgba(var(--accent-rgb),0.15); color: var(--accent);
}
.settings-badge.admin { background: rgba(63,185,80,0.15); color: #3fb950; }
.settings-badge.ai-on { background: rgba(var(--accent-rgb),0.15); color: var(--accent); }
.settings-badge.ai-off { background: var(--bg-card-hover); color: rgba(255,255,255,0.3); }

.admin-row-disabled { opacity: 0.4; }
.admin-cell-subtext { display: block; font-size: 0.7rem; color: rgba(255,255,255,0.3); font-weight: 400; }

.admin-inline-select {
    background: var(--bg-card-hover); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px; color: rgba(255,255,255,0.7); font-size: 0.8rem;
    padding: 0.2rem 0.4rem; cursor: pointer;
}
.admin-inline-select:focus { outline: none; border-color: var(--accent); }

.settings-success {
    background: rgba(63,185,80,0.12); border: 1px solid rgba(63,185,80,0.25);
    color: #3fb950; padding: 0.6rem 1rem; border-radius: 8px;
    font-size: 0.85rem; margin-bottom: 1rem;
}

.settings-error {
    background: rgba(220,53,69,0.15); border: 1px solid rgba(220,53,69,0.3);
    color: #ff6b7a; padding: 0.6rem 1rem; border-radius: 8px;
    font-size: 0.85rem; margin-bottom: 1rem;
}

/* ===== Admin ===== */

.app-nav-admin,
.app-nav-admin:link,
.app-nav-admin:visited {
    color: #3fb950;
    border-top: 1px solid var(--border);
    padding-top: 0.75rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
.app-nav-admin:hover { color: #56d364; background: rgba(63,185,80,0.08); }
.app-nav-admin.active { color: #3fb950 !important; background: rgba(63,185,80,0.1); }

.admin-stats {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.admin-stat-card {
    background: var(--bg-card);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem;
    text-align: center;
}

.admin-stat-value { font-size: 1.75rem; font-weight: 700; color: var(--text-primary); }
.admin-stat-label { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.15rem; text-transform: uppercase; letter-spacing: 0.05em; }

.admin-card {
    background: var(--bg-card);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
}

.admin-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.admin-card-header h3 { font-size: 1rem; font-weight: 600; margin: 0; color: var(--text-primary); }
.admin-count { font-size: 0.8rem; color: rgba(255,255,255,0.4); }

.admin-table-wrap { overflow-x: auto; }

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.admin-table th {
    text-align: left;
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.admin-table td {
    padding: 0.7rem 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.7);
}

.admin-table tbody tr:hover {
    background: var(--sidebar-bg);
}
.admin-row-clickable { cursor: pointer; }
.admin-row-clickable:hover { background: rgba(var(--accent-rgb),0.06) !important; }

.admin-cell-name {
    font-weight: 600;
    color: #fff !important;
}

.admin-view-all {
    font-size: 0.8rem;
    color: var(--accent);
    text-decoration: none;
}
.admin-view-all:hover { color: #33bbff; }

.admin-mgmt-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.admin-mgmt-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--sidebar-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem;
    text-decoration: none;
    transition: all 0.15s;
    cursor: pointer;
}

.admin-mgmt-card:hover {
    background: rgba(var(--accent-rgb),0.04);
    border-color: rgba(var(--accent-rgb),0.2);
    transform: translateY(-1px);
}

.admin-mgmt-icon {
    font-size: 1.5rem;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--accent-rgb),0.08);
    border-radius: 10px;
    flex-shrink: 0;
    color: var(--accent);
}

.admin-mgmt-body { flex: 1; min-width: 0; }

.admin-mgmt-body h4 {
    margin: 0 0 0.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.admin-mgmt-body p {
    margin: 0;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.4);
    line-height: 1.4;
}

.admin-mgmt-arrow {
    font-size: 1rem;
    color: rgba(255,255,255,0.15);
    flex-shrink: 0;
    transition: color 0.15s;
}

.admin-mgmt-card:hover .admin-mgmt-arrow {
    color: var(--accent);
}

/* ===== Platform Settings ===== */

.psettings-columns {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem;
    margin-bottom: 1.25rem;
}
.psettings-grid {
    display: grid; grid-template-columns: 1fr; gap: 0.75rem;
    padding: 1rem;
}
.psettings-field { display: flex; flex-direction: column; gap: 0.45rem; }
.psettings-field label {
    font-size: 0.72rem; font-weight: 600; color: rgba(255,255,255,0.5);
    letter-spacing: 0.01em;
}
.psettings-field input,
.psettings-field select,
.psettings-field textarea {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px; padding: 0.4rem 0.6rem;
    color: var(--text-primary); font-size: 0.8rem;
    font-family: inherit;
}
.psettings-field textarea { min-height: 100px; line-height: 1.5; }
.psettings-field input:focus,
.psettings-field select:focus,
.psettings-field textarea:focus {
    border-color: rgba(var(--accent-rgb),0.4);
    outline: none;
}
.psettings-hint {
    font-size: 0.68rem; color: rgba(255,255,255,0.25); line-height: 1.3;
}
.psettings-actions {
    display: flex; align-items: center; gap: 1rem; margin-top: 0.5rem; margin-bottom: 2rem;
}
.psettings-saved-at {
    font-size: 0.78rem; color: rgba(255,255,255,0.3);
}

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

/* ===== Blog Upload Zone ===== */

.blog-upload-zone {
    display: block; position: relative; width: 100%;
    aspect-ratio: 16/9; border: 2px dashed rgba(255,255,255,0.12);
    border-radius: 10px; overflow: hidden; cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    background: rgba(255,255,255,0.02);
}
.blog-upload-zone:hover { border-color: var(--accent); background: rgba(var(--accent-rgb),0.03); }
.blog-upload-preview { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-upload-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.5); color: #fff;
    font-size: 0.82rem; font-weight: 500;
    opacity: 0; transition: opacity 0.2s;
}
.blog-upload-zone:hover .blog-upload-overlay { opacity: 1; }
.blog-upload-placeholder {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 100%; color: rgba(255,255,255,0.35); gap: 0.3rem; font-size: 0.8rem;
}

/* ===== Admin Email Templates ===== */

.admin-email-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1.25rem;
}
.admin-email-meta {
    display: flex; gap: 1rem; font-size: 0.75rem; color: rgba(255,255,255,0.35);
    margin-bottom: 0.6rem;
}
.admin-email-meta strong { color: rgba(255,255,255,0.55); }
.admin-email-preview {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05);
    border-radius: 6px; padding: 0.5rem 0.6rem;
}
.admin-email-preview-label { font-size: 0.65rem; color: rgba(255,255,255,0.3); text-transform: uppercase; letter-spacing: 0.04em; }
.admin-email-preview-val { font-size: 0.8rem; color: rgba(255,255,255,0.6); margin-top: 0.15rem; }

/* ===== My Submissions ===== */

.mysub-stats {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-bottom: 1.5rem;
}
.mysub-stat {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
    padding: 1rem; text-align: center;
}
.mysub-stat-val { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); }
.mysub-stat-val.accepted { color: #3fb950; }
.mysub-stat-val.rejected { color: #f85149; }
.mysub-stat-label { font-size: 0.7rem; color: rgba(255,255,255,0.35); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.2rem; }

.mysub-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1.25rem;
}
.mysub-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
    overflow: hidden; transition: border-color 0.15s;
}
.mysub-card:hover { border-color: rgba(var(--accent-rgb),0.2); }
.mysub-card-banner {
    width: 100%; aspect-ratio: 16/7;
    background: linear-gradient(135deg, rgba(var(--accent-rgb),0.08), rgba(255,255,255,0.02));
    overflow: hidden;
}
.mysub-card-banner img { width: 100%; height: 100%; object-fit: cover; }
.mysub-card-body { padding: 1.25rem; }
.mysub-card-badges { display: flex; gap: 0.4rem; margin-bottom: 0.5rem; }
.mysub-status {
    font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    padding: 0.2rem 0.5rem; border-radius: 4px;
}
.mysub-status.pending { background: rgba(232,131,58,0.15); color: #e8833a; }
.mysub-status.accepted { background: rgba(63,185,80,0.15); color: #3fb950; }
.mysub-status.rejected { background: rgba(248,81,73,0.15); color: #f85149; }
.mysub-status.cancelled { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.4); }
.mysub-card-body h3 { font-size: 1rem; font-weight: 600; margin-bottom: 0.25rem; }
.mysub-date { font-size: 0.78rem; color: rgba(255,255,255,0.35); margin-bottom: 0.6rem; }
.mysub-entry-summary {
    display: flex; gap: 0.75rem; font-size: 0.78rem; color: rgba(255,255,255,0.4);
    margin-bottom: 0.75rem; flex-wrap: wrap;
}
.mysub-accepted { color: #3fb950; }
.mysub-rejected { color: #f85149; }
.mysub-fee { color: var(--accent); }
.mysub-entries {
    border-top: 1px solid rgba(255,255,255,0.04); padding-top: 0.5rem;
}
.mysub-entry {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.3rem 0; font-size: 0.8rem;
}
.mysub-entry-title { color: rgba(255,255,255,0.6); }
.mysub-entry-status { font-size: 0.72rem; font-weight: 600; }
.mysub-entry-status.pending { color: #e8833a; }
.mysub-entry-status.accepted { color: #3fb950; }
.mysub-entry-status.rejected { color: #f85149; }
.mysub-card-actions { margin-top: 0.75rem; }

@media (max-width: 768px) {
    .mysub-stats { grid-template-columns: repeat(3, 1fr); }
    .mysub-grid { grid-template-columns: 1fr; }
}

/* ===== Exhibition Submit ===== */

.submit-artwork-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem; padding: 1rem;
}
.submit-artwork-card {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px; overflow: hidden; cursor: pointer;
    transition: border-color 0.15s, transform 0.15s; position: relative;
}
.submit-artwork-card:hover { border-color: rgba(255,255,255,0.15); transform: translateY(-1px); }
.submit-artwork-card.selected { border-color: rgba(var(--accent-rgb),0.5); background: rgba(var(--accent-rgb),0.05); }
.submit-artwork-img {
    width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
}
.submit-artwork-placeholder {
    background: linear-gradient(135deg, rgba(var(--accent-rgb),0.08), rgba(255,255,255,0.02));
}
.submit-artwork-info { padding: 0.5rem 0.6rem; }
.submit-artwork-title { font-size: 0.78rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.submit-artwork-meta { font-size: 0.7rem; color: rgba(255,255,255,0.35); margin-top: 0.15rem; }
.submit-artwork-check {
    position: absolute; top: 0.5rem; right: 0.5rem;
}
.submit-check-on {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--accent); color: #fff; font-size: 0.7rem;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
}
.submit-summary-row {
    display: flex; justify-content: space-between; padding: 0.4rem 0;
    font-size: 0.85rem; color: rgba(255,255,255,0.5);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.submit-summary-total {
    font-weight: 700; color: var(--text-primary);
    border-bottom: none; padding-top: 0.6rem;
}

/* ===== Artworks ===== */

.art-header {
    display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2rem;
}
.art-header h1 { font-size: 1.6rem; font-weight: 700; margin: 0; color: var(--text-primary); }
.art-subtitle { color: rgba(255,255,255,0.4); margin: 0.3rem 0 0; font-size: 0.85rem; }

.art-btn-primary {
    padding: 0.5rem 1rem;
    background: rgba(var(--accent-rgb),0.15);
    border: 1px solid rgba(var(--accent-rgb),0.3); border-radius: 8px;
    color: var(--accent); font-weight: 500; font-size: 0.8rem;
    text-decoration: none;
    cursor: pointer; white-space: nowrap;
}
.art-btn-primary:hover { background: rgba(var(--accent-rgb),0.25); }
.art-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.art-filters {
    display: flex; gap: 0.75rem; align-items: center; margin-bottom: 1.5rem;
}
.art-search { flex: 1; }
.art-filter-select { width: 160px; }

.art-batch-bar {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.75rem 1rem; margin-bottom: 1rem;
    background: rgba(var(--accent-rgb), 0.06);
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    border-radius: 10px; font-size: 0.85rem; color: var(--accent);
}

.art-card-select {
    position: absolute; top: 0.5rem; right: 0.5rem; z-index: 2;
}
/* Opt out of the global toggle-pill styling — we want a square checkbox on the
   thumbnail, not a sliding knob that escapes the card. */
.art-card-select input[type="checkbox"] {
    width: 22px; height: 22px;
    background: rgba(0,0,0,0.55);
    border: 2px solid rgba(255,255,255,0.9);
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.art-card-select input[type="checkbox"]::after { display: none; }
.art-card-select input[type="checkbox"]:checked {
    background: var(--accent);
    border-color: var(--accent);
}
.art-card-select input[type="checkbox"]:checked::before {
    content: '✓';
    position: absolute;
    inset: 0;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}
.art-card { position: relative; }
.art-card-selected { border-color: var(--accent) !important; }

.art-view-toggle { display: flex; gap: 0.25rem; }
.art-view-toggle .artd-img-btn { font-size: 1rem; padding: 0.3rem 0.5rem; }
.art-view-toggle .artd-img-btn.active { background: rgba(var(--accent-rgb), 0.15); color: var(--accent); }

.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.compare-img { width: 100%; max-height: 250px; object-fit: contain; border-radius: 8px; }
.compare-stats { margin-top: 1rem; }
.compare-row { display: flex; justify-content: space-between; padding: 0.4rem 0; border-bottom: 1px solid var(--border); font-size: 0.85rem; }
.compare-row span { color: var(--text-muted); }
.compare-row strong { color: var(--text-primary); }
.compare-divider { height: 1px; background: var(--accent); opacity: 0.2; margin: 0.5rem 0; }

/* Upload card */
.art-upload-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}
.art-upload-card h3 { font-size: 1rem; font-weight: 600; margin: 0 0 1.25rem; color: var(--text-primary); }

.art-upload-zone {
    border: 2px dashed rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s;
    margin-bottom: 1.25rem;
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.art-upload-zone:hover { border-color: rgba(var(--accent-rgb),0.3); }

.art-upload-placeholder { color: rgba(255,255,255,0.35); }
.art-upload-icon { font-size: 2rem; display: block; margin-bottom: 0.5rem; color: var(--accent); }
.art-upload-placeholder p { margin: 0; font-size: 0.9rem; }
.art-upload-hint { font-size: 0.75rem; color: rgba(255,255,255,0.25); }

.art-upload-preview {
    max-height: 200px;
    max-width: 100%;
    border-radius: 8px;
    object-fit: contain;
}

/* Annie's result modal — fullscreen overlay that surfaces an AI suggestion and stays
   put until the user dismisses it. Replaces toasts for anything the user actually
   needs to read carefully. */
.annie-modal-backdrop {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,0.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
    animation: annie-modal-fade-in 0.18s ease-out;
}
@keyframes annie-modal-fade-in { from { opacity: 0; } to { opacity: 1; } }
.annie-modal {
    position: relative;
    width: 100%; max-width: 520px;
    background: #161b22; border: 1px solid rgba(var(--accent-rgb), 0.25);
    border-radius: 16px; padding: 1.5rem;
    box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 60px rgba(var(--accent-rgb),0.08);
    animation: annie-modal-pop-in 0.22s ease-out;
}
@keyframes annie-modal-pop-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}
.annie-modal-close {
    position: absolute; top: 0.75rem; right: 0.75rem;
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255,255,255,0.06); border: none; color: rgba(255,255,255,0.65);
    font-size: 1.4rem; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.annie-modal-close:hover { background: rgba(255,255,255,0.12); color: #fff; }
.annie-modal-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.annie-modal-img {
    width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
    border: 2px solid rgba(var(--accent-rgb), 0.35);
    background: rgba(0,0,0,0.25);
}
.annie-modal-title { font-size: 1.1rem; font-weight: 700; color: #fff; display: block; }
.annie-modal-sub   { font-size: 0.85rem; color: var(--accent); margin-top: 0.15rem; display: block; }
.annie-modal-body  { color: rgba(255,255,255,0.82); font-size: 0.92rem; line-height: 1.55; margin: 0.25rem 0 1.25rem; }
.annie-modal-body p { margin: 0 0 0.65rem; white-space: pre-wrap; }
.annie-modal-body p:last-child { margin-bottom: 0; }
.annie-modal-actions { display: flex; gap: 0.6rem; justify-content: flex-end; }
[data-theme="light"] .annie-modal { background: #ffffff; border-color: rgba(var(--accent-rgb), 0.25); box-shadow: 0 24px 60px rgba(0,0,0,0.18); }
[data-theme="light"] .annie-modal-title { color: rgba(0,0,0,0.88) !important; }
[data-theme="light"] .annie-modal-body  { color: rgba(0,0,0,0.7) !important; }
[data-theme="light"] .annie-modal-close { background: rgba(0,0,0,0.06); color: rgba(0,0,0,0.6); }

/* Annie thinking — small bouncing dot used inside menu buttons when she's working. */
.annie-thinking-dot {
    display: inline-block; width: 14px; height: 14px;
    border-radius: 50%; background: var(--accent);
    margin-right: 0.55rem; vertical-align: middle;
    animation: annie-pulse 1.1s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.6);
}
@keyframes annie-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(var(--accent-rgb), 0.5); opacity: 1; }
    70%  { box-shadow: 0 0 0 8px rgba(var(--accent-rgb), 0);   opacity: 0.85; }
    100% { box-shadow: 0 0 0 0   rgba(var(--accent-rgb), 0);   opacity: 1; }
}

/* Annie's "working on it" card — floats just under the artwork header so the user
   never wonders if anything is happening. Auto-hides the second any in-flight
   request completes. */
.annie-working {
    display: flex; align-items: center; gap: 1rem;
    background: linear-gradient(135deg, rgba(var(--accent-rgb),0.10), rgba(232,131,58,0.06));
    border: 1px solid rgba(var(--accent-rgb),0.22);
    border-radius: 12px; padding: 0.85rem 1rem;
    margin: 0.75rem 0 1.25rem;
    animation: annie-working-in 0.25s ease-out;
}
@keyframes annie-working-in { from { opacity:0; transform: translateY(-4px); } to { opacity:1; transform:none; } }
.annie-working-img {
    width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
    animation: annie-working-float 2.4s ease-in-out infinite;
}
@keyframes annie-working-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}
.annie-working-title { font-weight: 600; font-size: 0.95rem; color: rgba(255,255,255,0.92); }
.annie-working-sub   { font-size: 0.82rem; color: rgba(255,255,255,0.6); margin-top: 0.15rem; display: flex; align-items: center; gap: 0.4rem; }
.annie-working-dots  { display: inline-flex; gap: 3px; margin-left: 0.25rem; }
.annie-working-dots span {
    width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
    animation: annie-working-dot 1.4s ease-in-out infinite both;
}
.annie-working-dots span:nth-child(2) { animation-delay: 0.18s; }
.annie-working-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes annie-working-dot {
    0%, 60%, 100% { transform: translateY(0);   opacity: 0.35; }
    30%           { transform: translateY(-3px); opacity: 1; }
}
[data-theme="light"] .annie-working-title { color: rgba(0,0,0,0.85) !important; }
[data-theme="light"] .annie-working-sub   { color: rgba(0,0,0,0.55) !important; }

/* Upload progress UI — shown while bytes are being streamed up. */
.art-upload-progress {
    display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
    padding: 0.5rem 1rem; width: 100%; max-width: 360px;
}
.art-upload-spinner {
    width: 36px; height: 36px; border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.08);
    border-top-color: var(--accent);
    animation: art-upload-spin 0.8s linear infinite;
}
@keyframes art-upload-spin { to { transform: rotate(360deg); } }
.art-upload-progress-label {
    margin: 0; font-size: 0.85rem; color: rgba(255,255,255,0.7);
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.art-upload-progress-bar {
    width: 100%; height: 6px; border-radius: 999px;
    background: rgba(255,255,255,0.08); overflow: hidden;
}
.art-upload-progress-fill {
    height: 100%; background: var(--accent); border-radius: 999px;
    transition: width 0.15s ease-out;
}
.art-upload-progress-text {
    font-size: 0.72rem; color: rgba(255,255,255,0.45);
    font-variant-numeric: tabular-nums;
}
[data-theme="light"] .art-upload-spinner { border-color: rgba(0,0,0,0.08); border-top-color: var(--accent); }
[data-theme="light"] .art-upload-progress-label { color: rgba(0,0,0,0.7) !important; }
[data-theme="light"] .art-upload-progress-bar  { background: rgba(0,0,0,0.08) !important; }
[data-theme="light"] .art-upload-progress-text { color: rgba(0,0,0,0.45) !important; }

.art-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
}
.art-form-full { grid-column: 1 / -1; }

.art-upload-actions {
    display: flex; align-items: center; gap: 1rem; margin-top: 0.5rem;
}

/* Empty state */
.art-empty {
    text-align: center;
    padding: 4rem 2rem;
}
.art-empty-icon { font-size: 3rem; color: rgba(255,255,255,0.1); margin-bottom: 1rem; }
.art-empty h3 { font-size: 1.2rem; color: var(--text-primary); margin: 0 0 0.5rem; }
.art-empty p { color: rgba(255,255,255,0.4); margin: 0 0 1.5rem; font-size: 0.9rem; }

/* Artwork grid */
.art-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
}

.art-card {
    background: var(--sidebar-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.15s;
}
.art-card:hover {
    border-color: rgba(var(--accent-rgb),0.2);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.art-card-image {
    position: relative;
    aspect-ratio: 1;
    background: rgba(255,255,255,0.02);
    overflow: hidden;
}
.art-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.art-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: rgba(255,255,255,0.06);
}

.art-card-badges {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    display: flex;
    gap: 0.35rem;
}

.art-badge {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.art-badge.draft { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.6); }
.art-badge.active { background: rgba(var(--accent-rgb),0.2); color: var(--accent); }
.art-badge.sold { background: rgba(63,185,80,0.2); color: #3fb950; }
.art-badge.reserved { background: rgba(232,131,58,0.2); color: #e8833a; }
.art-badge.archived { background: var(--input-bg); color: rgba(255,255,255,0.35); }
.art-badge.pending { background: rgba(232,131,58,0.2); color: #e8833a; }
.art-badge.accepted { background: rgba(63,185,80,0.2); color: #3fb950; }
.art-badge.declined { background: rgba(220,53,69,0.2); color: #ff6b7a; }
.art-badge.countered { background: rgba(139,92,246,0.2); color: #8b5cf6; }
.art-badge.available { background: rgba(var(--accent-rgb),0.2); color: var(--accent); }
.art-badge.price { background: rgba(0,0,0,0.6); color: var(--text-primary); backdrop-filter: blur(4px); }

/* Exhibition badges */
.art-badge.callforentries { background: rgba(139,92,246,0.2); color: #8b5cf6; }
.art-badge.reviewing { background: rgba(232,131,58,0.2); color: #e8833a; }
.art-badge.virtual { background: rgba(6,182,212,0.2); color: #06b6d4; }

/* Exhibition card grid */
.exh-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important; }

.exh-card .exh-card-header {
    padding: 0.75rem 0.75rem 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* Exhibition card banner */
.exh-card-banner {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 10px 10px 0 0;
    background: var(--bg-elevated);
}

.exh-card-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.exh-card-banner-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(var(--accent-rgb),0.08), rgba(var(--accent-rgb),0.02));
}

.exh-card-badges {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.exh-card-desc {
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0.35rem 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.exh-card-stats {
    display: flex;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

.exh-deadline {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: #e8833a;
    font-weight: 500;
}

.exh-date-cell { white-space: nowrap; font-size: 0.85rem; }

.exh-banner-section {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

/* Exhibition banner upload */
.exh-banner-zone {
    display: block;
    position: relative;
    width: 100%;
    max-width: 640px;
    aspect-ratio: 16 / 9;
    border: 2px dashed rgba(255,255,255,0.15);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    background: var(--bg-card);
}

.exh-banner-zone:hover {
    border-color: var(--accent);
    background: var(--bg-card-hover);
}

.exh-banner-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.exh-banner-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.2s;
}

.exh-banner-zone:hover .exh-banner-overlay { opacity: 1; }

.exh-banner-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    gap: 0.3rem;
}

.exh-banner-placeholder p { margin: 0; font-size: 0.9rem; }

/* Exhibition stat cards */
.exh-stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

.exh-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', monospace;
}

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

.art-image-count {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    background: rgba(0,0,0,0.6);
    color: rgba(255,255,255,0.8);
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    backdrop-filter: blur(4px);
}
.art-image-count::before { content: "\25A0 "; font-size: 0.5rem; }

.art-card-body { padding: 0.85rem; }
.art-card-body h4 { margin: 0 0 0.3rem; font-size: 0.9rem; font-weight: 600; color: var(--text-primary); }

.art-card-meta {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.4);
    display: flex;
    gap: 0.3rem;
}

.art-card-tags { display: flex; gap: 0.3rem; margin-top: 0.5rem; flex-wrap: wrap; }
.art-tag {
    font-size: 0.65rem;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    background: rgba(var(--accent-rgb),0.08);
    color: rgba(var(--accent-rgb),0.7);
}

/* ===== Collections ===== */

.folio-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
}

.folio-card {
    background: var(--sidebar-bg); border: 1px solid var(--border);
    border-radius: 12px; overflow: hidden; cursor: pointer; transition: all 0.15s;
}
.folio-card:hover {
    border-color: rgba(var(--accent-rgb),0.2); transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.folio-preview {
    display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
    aspect-ratio: 2; background: rgba(255,255,255,0.02); overflow: hidden;
}
.folio-thumb { overflow: hidden; }
.folio-thumb img { width: 100%; height: 100%; object-fit: cover; }
.folio-empty-preview {
    grid-column: 1 / -1; display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem; color: rgba(255,255,255,0.06);
}

.folio-card-body { padding: 0.85rem; }
.folio-card-title { display: flex; align-items: center; gap: 0.5rem; }
.folio-card-title h4 { margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--text-primary); }
.folio-private { font-size: 0.65rem; color: rgba(255,255,255,0.35); background: var(--bg-card-hover); padding: 0.15rem 0.4rem; border-radius: 3px; }

/* Collection picker in artwork detail */
.folio-picker-search {
    position: relative; margin-bottom: 1rem; max-width: 480px;
}
.folio-picker-search .form-input { padding-right: 2.25rem; }
.folio-picker-search-spin {
    position: absolute; top: 50%; right: 0.75rem; transform: translateY(-50%);
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.1); border-top-color: var(--accent);
    animation: art-upload-spin 0.8s linear infinite;
}
.folio-picker-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
}
.folio-picker-item {
    display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
    padding: 0.5rem; border-radius: 8px; border: 1px solid var(--border);
    cursor: pointer; transition: all 0.15s; position: relative;
}
.folio-picker-item:hover { border-color: rgba(var(--accent-rgb),0.2); }
.folio-picker-item.selected { border-color: var(--accent); background: rgba(var(--accent-rgb),0.06); }
.folio-picker-thumb { width: 100%; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: var(--sidebar-bg); }
.folio-picker-thumb img { width: 100%; height: 100%; object-fit: cover; }
.folio-picker-title { font-size: 0.75rem; color: rgba(255,255,255,0.6); text-align: center; }
.folio-picker-check {
    position: absolute; top: 0.4rem; right: 0.4rem;
    font-size: 0.8rem; color: var(--accent); font-weight: 700;
}

/* Collection toggles in artwork detail */
.folio-toggle-list { display: flex; flex-direction: column; gap: 0.4rem; }
.folio-toggle-item {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.65rem 1rem; border-radius: 8px;
    border: 1px solid var(--border);
    cursor: pointer; transition: all 0.15s;
}
.folio-toggle-item:hover { border-color: rgba(var(--accent-rgb),0.2); background: rgba(var(--accent-rgb),0.03); }
.folio-toggle-item.active { border-color: rgba(var(--accent-rgb),0.3); background: rgba(var(--accent-rgb),0.06); }
.folio-toggle-check { width: 20px; font-size: 0.9rem; color: var(--accent); font-weight: 700; text-align: center; }
.folio-toggle-name { font-size: 0.85rem; color: rgba(255,255,255,0.7); }
.folio-toggle-item.active .folio-toggle-name { color: var(--text-primary); }

/* ===== Artwork Detail ===== */

.artd-hero {
    margin-bottom: 1.25rem;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 360px;
}
.artd-hero img {
    max-width: 100%;
    max-height: 360px;
    object-fit: contain;
}

.artd-label-row {
    display: flex; align-items: center; justify-content: space-between;
    color: rgba(255,255,255,0.7); font-size: 0.85rem; font-weight: 500;
    margin-bottom: 0.4rem;
}

.artd-suggest-btn {
    background: none; border: 1px solid var(--border);
    border-radius: 6px; padding: 0.15rem 0.5rem;
    color: var(--accent); font-size: 0.7rem; font-weight: 500;
    cursor: pointer; transition: all 0.15s;
}
.artd-suggest-btn:hover { background: rgba(var(--accent-rgb), 0.08); border-color: var(--accent); }
.artd-suggest-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.artd-suggest-hint { font-size: 0.7rem; color: var(--text-muted); font-weight: 400; }

.artd-breadcrumb {
    font-size: 0.8rem; margin-bottom: 0.5rem;
    display: flex; align-items: center; gap: 0.4rem;
}
.artd-breadcrumb span { color: rgba(255,255,255,0.3); }
.artd-back { color: var(--accent); text-decoration: none; }
.artd-back:hover { color: #33bbff; }

.artd-actions { display: flex; gap: 0.5rem; align-items: flex-start; flex-wrap: nowrap; }

.artd-btn-outline {
    padding: 0.5rem 1rem; background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12); border-radius: 8px;
    color: rgba(255,255,255,0.6); font-size: 0.8rem; font-weight: 500;
    cursor: pointer; transition: all 0.15s; text-decoration: none;
    white-space: nowrap;
}
.artd-btn-outline:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.8); text-decoration: none; }

.artd-btn-accent {
    padding: 0.5rem 1rem; background: rgba(var(--accent-rgb),0.15);
    border: 1px solid rgba(var(--accent-rgb),0.3); border-radius: 8px;
    color: var(--accent); font-size: 0.8rem; font-weight: 500;
    text-decoration: none;
    cursor: pointer; transition: all 0.15s; white-space: nowrap; text-decoration: none;
}
.artd-btn-accent:hover { background: rgba(var(--accent-rgb),0.25); border-color: rgba(var(--accent-rgb),0.4); text-decoration: none; }

.artd-btn-danger {
    padding: 0.5rem 1rem; background: rgba(239,68,68,0.15);
    border: 1px solid rgba(239,68,68,0.3); border-radius: 8px;
    color: #ef4444; font-size: 0.8rem; font-weight: 500;
    cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.artd-btn-danger:hover { background: rgba(239,68,68,0.25); }

/* "More actions" dropdown — collapses the long row of secondary actions into a
   single overflow menu so the header doesn't wrap on narrow viewports. */
.artd-more-wrap { position: relative; }
.artd-more-btn { white-space: nowrap; }
.artd-more-menu {
    position: absolute; top: calc(100% + 4px); right: 0; z-index: 50;
    min-width: 220px;
    background: rgba(20, 24, 31, 0.98); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.12); border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.45);
    padding: 0.35rem; display: flex; flex-direction: column;
}
.artd-more-item {
    display: flex; align-items: center; gap: 0.55rem;
    background: transparent; border: none; color: rgba(255,255,255,0.8);
    font-size: 0.85rem; padding: 0.55rem 0.75rem; border-radius: 6px;
    text-align: left; cursor: pointer; white-space: nowrap;
    transition: background 0.12s;
}
.artd-more-item:hover:not(:disabled) { background: rgba(255,255,255,0.08); }
.artd-more-item:disabled { opacity: 0.5; cursor: not-allowed; }
.artd-more-sep { height: 1px; background: rgba(255,255,255,0.08); margin: 0.25rem 0; }
[data-theme="light"] .artd-more-menu { background: rgba(255,255,255,0.98); border-color: rgba(0,0,0,0.1); box-shadow: 0 12px 28px rgba(0,0,0,0.12); }
[data-theme="light"] .artd-more-item { color: rgba(0,0,0,0.78); }
[data-theme="light"] .artd-more-item:hover:not(:disabled) { background: rgba(0,0,0,0.05); }
[data-theme="light"] .artd-more-sep { background: rgba(0,0,0,0.08); }

/* Tabs */
.artd-tabs {
    display: flex; gap: 0; margin-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.artd-tab {
    padding: 0.7rem 1.25rem; background: none; border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted); font-size: 0.85rem; font-weight: 500;
    cursor: pointer; transition: all 0.15s;
}
.artd-tab:hover { color: rgba(255,255,255,0.7); }
.artd-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.artd-panel { }

.artd-checkbox {
    display: flex; align-items: center; gap: 0.5rem;
    color: rgba(255,255,255,0.7); font-size: 0.85rem;
    cursor: pointer; margin-bottom: 0.5rem;
}
.artd-checkbox input { accent-color: var(--accent); }

.artd-ai-card {
    border-color: rgba(var(--accent-rgb), 0.15) !important;
    background: rgba(var(--accent-rgb), 0.03) !important;
}
.artd-ai-card h3::before { content: "\2728 "; }

.artd-ai-text {
    margin: 0; font-size: 0.8rem; color: var(--text-secondary);
    line-height: 1.5;
}

/* Images tab */
.artd-images-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

.artd-image-card {
    border-radius: 10px; overflow: hidden;
    border: 1px solid var(--border);
    background: var(--sidebar-bg);
}
.artd-image-card.primary { border-color: rgba(var(--accent-rgb),0.3); }
.artd-image-card.drag-over { border-color: var(--accent); background: rgba(var(--accent-rgb),0.08); }
.art-card.drag-over { outline: 2px solid var(--accent); outline-offset: -2px; opacity: 0.7; }
.art-card[draggable="true"] { cursor: grab; }
.art-card[draggable="true"]:active { cursor: grabbing; }
.artd-drag-handle { cursor: grab; }
.artd-drag-handle:active { cursor: grabbing; }
.artd-drag-handle img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; pointer-events: none; }
.artd-image-card img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }

.artd-image-actions {
    padding: 0.5rem 0.4rem; display: flex; flex-direction: column; gap: 0.3rem; align-items: center;
}
.artd-img-btn {
    padding: 0.25rem 0.45rem; background: var(--bg-card-hover);
    border: none; border-radius: 4px; color: rgba(255,255,255,0.6);
    font-size: 0.65rem; cursor: pointer; white-space: nowrap;
}
.artd-img-btn:hover { background: rgba(var(--accent-rgb),0.1); color: var(--accent); }
.artd-img-btn.danger:hover { background: rgba(220,53,69,0.1); color: #ff6b7a; }
.artd-img-btn.active { background: rgba(var(--accent-rgb),0.15); color: var(--accent); }
.artd-img-btn:disabled { opacity: 0.5; cursor: default; }
.artd-img-order { display: flex; gap: 0.2rem; justify-content: center; }
.artd-img-actions-row { display: flex; gap: 0.2rem; justify-content: center; flex-wrap: wrap; }

.artd-img-primary-badge {
    font-size: 0.7rem; color: var(--accent); font-weight: 600;
}

.artd-image-add {
    border: 2px dashed rgba(255,255,255,0.08); border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    min-height: 180px; cursor: pointer; transition: border-color 0.2s;
}
.artd-image-add:hover { border-color: rgba(var(--accent-rgb),0.3); }

/* Editions tab */
.artd-section-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 1rem;
}
.artd-section-header h3 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--text-primary); }

.artd-edition-card {
    background: var(--sidebar-bg); border: 1px solid var(--border);
    border-radius: 10px; padding: 1rem 1.25rem; margin-bottom: 0.75rem;
}
.artd-edition-header {
    display: flex; justify-content: space-between; align-items: flex-start;
}
.artd-edition-header h4 { margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--text-primary); }
.artd-edition-stats { display: flex; gap: 1rem; align-items: center; }
.artd-edition-qty {
    font-size: 0.8rem; color: rgba(255,255,255,0.5);
    background: var(--bg-card-hover); padding: 0.2rem 0.6rem; border-radius: 4px;
}
.artd-edition-price { font-size: 0.9rem; font-weight: 700; color: var(--accent); }
.artd-edition-serial { font-size: 0.7rem; color: rgba(255,255,255,0.25); margin-top: 0.5rem; font-family: monospace; }

.artd-edition-edit-actions {
    display: flex; gap: 0.5rem; align-items: center; margin-top: 0.75rem;
}

/* Works within editions */
.artd-works-section {
    margin-top: 0.75rem; padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

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

.artd-works-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }

.artd-work-form {
    background: rgba(var(--accent-rgb), 0.03);
    border: 1px solid rgba(var(--accent-rgb), 0.1);
    border-radius: 8px; padding: 0.75rem; margin-bottom: 0.75rem;
}

.artd-work-row {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.8rem;
}
.artd-work-row:last-child { border-bottom: none; }

.artd-work-num { font-weight: 700; color: var(--text-primary); min-width: 30px; }
.artd-work-serial { font-family: monospace; font-size: 0.7rem; color: var(--text-muted); }
.artd-work-signed { font-size: 0.7rem; color: var(--accent); font-weight: 500; }
.artd-work-location { font-size: 0.7rem; color: var(--text-muted); margin-left: auto; }
.artd-work-actions { display: flex; gap: 0.3rem; margin-left: auto; align-items: center; }

.artd-edition-doc-links {
    display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
    margin-top: 0.5rem; padding-top: 0.5rem;
    border-top: 1px dashed var(--border);
}

.artd-doc-link {
    font-size: 0.7rem; padding: 0.2rem 0.5rem;
    background: rgba(var(--accent-rgb), 0.08);
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    border-radius: 4px; color: var(--accent);
    text-decoration: none; font-weight: 500;
}
.artd-doc-link:hover { background: rgba(var(--accent-rgb), 0.15); }

.artd-tag-input {
    display: flex; gap: 0.5rem; margin-bottom: 1rem;
}

.artd-tags-list {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
}

.artd-tag-chip {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.3rem 0.65rem;
    background: rgba(var(--accent-rgb), 0.1);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: 6px;
    font-size: 0.8rem;
    color: var(--accent);
}

.artd-tag-remove {
    background: none; border: none;
    color: rgba(var(--accent-rgb), 0.5);
    font-size: 1rem; line-height: 1;
    cursor: pointer; padding: 0;
}
.artd-tag-remove:hover { color: #ff6b7a; }

/* ===== Artwork Stat Boxes ===== */
.artd-stat-boxes {
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem; margin-bottom: 1rem;
}
.artd-stat-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.75rem 0.5rem;
    text-align: center;
}
.artd-stat-box-value {
    font-size: 1.25rem; font-weight: 700;
    color: var(--text-primary);
}
.artd-stat-box-label {
    font-size: 0.65rem; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.05em;
    margin-top: 0.1rem;
}

/* ===== Activity Timeline ===== */
.artd-timeline { display: flex; flex-direction: column; gap: 0; }

.artd-timeline-item {
    display: flex; gap: 0.75rem; padding: 0.6rem 0;
    border-left: 2px solid var(--border);
    padding-left: 1rem; position: relative;
}

.artd-timeline-dot {
    position: absolute; left: -5px; top: 0.85rem;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent);
}

.artd-timeline-content { display: flex; flex-direction: column; gap: 0.15rem; }
.artd-timeline-action { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); }
.artd-timeline-desc { font-size: 0.8rem; color: var(--text-secondary); }
.artd-timeline-change { font-size: 0.75rem; color: var(--accent); font-family: monospace; }
.artd-timeline-date { font-size: 0.7rem; color: var(--text-muted); }

/* ===== CRM Contacts ===== */
.crm-contact-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.75rem 1rem; cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background 0.1s;
}
.crm-contact-row:hover { background: var(--bg-card-hover); }
.crm-contact-row:last-child { border-bottom: none; }
.crm-needs-followup { border-left: 3px solid #e8833a; }

.crm-contact-main { flex: 1; min-width: 0; }
.crm-contact-name { font-weight: 600; color: var(--text-primary); font-size: 0.9rem; }

.crm-contact-stats { display: flex; gap: 1.25rem; align-items: center; flex-shrink: 0; }
.crm-stat-item { display: flex; flex-direction: column; align-items: flex-end; font-size: 0.8rem; color: var(--text-secondary); }
.crm-stat-label { font-size: 0.6rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }

.crm-followup-badge {
    font-size: 0.65rem; font-weight: 700;
    padding: 0.2rem 0.5rem; border-radius: 4px;
    background: rgba(232,131,58,0.15); color: #e8833a;
    text-transform: uppercase; letter-spacing: 0.05em;
}

.art-badge.collector { background: rgba(var(--accent-rgb),0.15); color: var(--accent); }
.art-badge.gallery { background: rgba(139,92,246,0.15); color: #8b5cf6; }
.art-badge.museum { background: rgba(6,182,212,0.15); color: #06b6d4; }
.art-badge.agent { background: rgba(232,131,58,0.15); color: #e8833a; }
.art-badge.curator { background: rgba(63,185,80,0.15); color: #3fb950; }
.art-badge.other { background: var(--input-bg); color: var(--text-muted); }

.art-badge.inquiry { background: rgba(var(--accent-rgb),0.15); color: var(--accent); }
.art-badge.offer { background: rgba(232,131,58,0.15); color: #e8833a; }
.art-badge.purchase { background: rgba(63,185,80,0.15); color: #3fb950; }
.art-badge.followup { background: rgba(139,92,246,0.15); color: #8b5cf6; }
.art-badge.note { background: var(--input-bg); color: var(--text-muted); }
.art-badge.meeting { background: rgba(6,182,212,0.15); color: #06b6d4; }
.art-badge.studiovisit { background: rgba(232,131,58,0.15); color: #e8833a; }
.art-badge.email { background: rgba(var(--accent-rgb),0.15); color: var(--accent); }
.art-badge.sms { background: rgba(63,185,80,0.15); color: #3fb950; }
.art-badge.sent { background: rgba(63,185,80,0.15); color: #3fb950; }
.art-badge.failed { background: rgba(220,53,69,0.15); color: #ff6b7a; }

.crm-quick-actions {
    display: flex; gap: 0.4rem; margin-top: 0.5rem;
}
.crm-action-btn {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.3rem 0.65rem; border-radius: 6px;
    background: rgba(var(--accent-rgb),0.08); border: 1px solid rgba(var(--accent-rgb),0.2);
    color: var(--accent); text-decoration: none;
    font-size: 0.75rem; font-weight: 600;
    transition: all 0.15s;
}
.crm-action-btn:hover { background: rgba(var(--accent-rgb),0.15); }

/* ── Modal ── */
.modal-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,0.85); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    animation: fadeIn 0.15s ease;
}
.modal-content {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 12px; width: 90%; max-width: 540px; max-height: 90vh;
    display: flex; flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    animation: slideUp 0.2s ease;
}
.modal-lg { max-width: 640px; }
.modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border);
}
.modal-header h3 { margin: 0; font-size: 1.1rem; color: var(--text-primary); }
.modal-close {
    background: none; border: none; font-size: 1.5rem; cursor: pointer;
    color: var(--text-muted); line-height: 1; padding: 0;
}
.modal-close:hover { color: var(--text-primary); }
.modal-body { padding: 1.5rem; overflow-y: auto; flex: 1; }
.modal-footer {
    display: flex; justify-content: flex-end; gap: 0.75rem;
    padding: 1rem 1.5rem; border-top: 1px solid var(--border);
}
.push-history-item {
    padding: 0.6rem 0.75rem; background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06); border-radius: 6px;
}
/* Provenance Timeline */
.provenance-timeline { display: flex; flex-direction: column; gap: 0; padding-left: 1rem; }
.provenance-event {
    display: flex; gap: 1rem; position: relative;
    padding: 0.75rem 0; border-left: 2px solid rgba(255,255,255,0.08);
    margin-left: 6px;
}
.provenance-dot {
    width: 14px; height: 14px; border-radius: 50%;
    background: rgba(255,255,255,0.15); border: 2px solid rgba(255,255,255,0.2);
    position: absolute; left: -8px; top: 0.85rem; flex-shrink: 0;
}
.provenance-dot.created { background: #00a8ff; border-color: #00a8ff; }
.provenance-dot.sold { background: #22c55e; border-color: #22c55e; }
.provenance-dot.transferred { background: #e8833a; border-color: #e8833a; }
.provenance-dot.exhibited { background: #a78bfa; border-color: #a78bfa; }
.provenance-dot.authenticated { background: #00a8ff; border-color: #00a8ff; }
.provenance-dot.consigned { background: #f59e0b; border-color: #f59e0b; }
.provenance-dot.loaned { background: #06b6d4; border-color: #06b6d4; }
.provenance-dot.acquired { background: #22c55e; border-color: #22c55e; }
.provenance-dot.restored, .provenance-dot.appraised { background: #8b5cf6; border-color: #8b5cf6; }
.provenance-content { padding-left: 0.75rem; flex: 1; }

/* Developer Portal */
.dev-pre {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px; padding: 1rem; font-size: 0.8rem; font-family: 'Courier New', monospace;
    overflow-x: auto; color: rgba(255,255,255,0.6); line-height: 1.5; white-space: pre; margin: 0;
}
.dev-code {
    background: rgba(255,255,255,0.06); padding: 0.1rem 0.4rem; border-radius: 4px;
    font-family: 'Courier New', monospace; font-size: 0.82rem;
}
.dev-method {
    font-family: monospace; font-size: 0.65rem; font-weight: 700; padding: 0.2rem 0.5rem;
    border-radius: 4px; min-width: 40px; text-align: center; display: inline-block;
}
.dev-method.active { background: rgba(34,197,94,0.15); color: #22c55e; }
.dev-step {
    display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.dev-step:last-child { border-bottom: none; }
.dev-step-num {
    width: 32px; height: 32px; border-radius: 50%; background: rgba(0,168,255,0.15);
    color: #00a8ff; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.9rem; flex-shrink: 0;
}
.dev-step-desc { color: rgba(255,255,255,0.5); font-size: 0.85rem; margin-top: 0.25rem; }

/* Messaging - FB Messenger Style */
.msg-container { display: flex; height: calc(100vh - 120px); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--bg-surface); }
.msg-sidebar { width: 320px; border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; }
.msg-sidebar-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1rem 0.75rem; border-bottom: 1px solid var(--border); }
.msg-sidebar-header h2 { margin: 0; font-size: 1.1rem; }
.msg-convo-list { flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.06) transparent; }
.msg-convo-list::-webkit-scrollbar { width: 4px; }
.msg-convo-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 4px; }
.msg-convo-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; cursor: pointer; transition: background 0.1s; border-bottom: 1px solid rgba(255,255,255,0.03); }
.msg-convo-item:hover { background: rgba(255,255,255,0.03); }
.msg-convo-item.active { background: rgba(0,168,255,0.08); }
.msg-convo-item.unread .msg-convo-name { font-weight: 700; color: #fff; }
.msg-convo-info { flex: 1; min-width: 0; }
.msg-convo-name { font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-convo-preview { font-size: 0.75rem; color: rgba(255,255,255,0.35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 0.1rem; }
.msg-convo-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; flex-shrink: 0; }
.msg-convo-time { font-size: 0.65rem; color: rgba(255,255,255,0.25); }
.msg-unread-badge { background: #00a8ff; color: #fff; font-size: 0.6rem; font-weight: 700; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.msg-avatar { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,0.06); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; overflow: hidden; }
.msg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.msg-avatar-sm { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,0.06); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; overflow: hidden; }
.msg-avatar-sm img { width: 100%; height: 100%; object-fit: cover; }
.msg-thread { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.msg-thread-header { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.msg-messages { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.4rem; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.06) transparent; }
.msg-messages::-webkit-scrollbar { width: 4px; }
.msg-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 4px; }
.msg-bubble-row { display: flex; gap: 0.5rem; align-items: flex-end; }
.msg-bubble-row.mine { justify-content: flex-end; }
.msg-bubble { max-width: 65%; padding: 0.5rem 0.75rem; border-radius: 12px; font-size: 0.88rem; line-height: 1.4; }
.msg-bubble.sent { background: rgba(0,168,255,0.2); border-bottom-right-radius: 4px; }
.msg-bubble.received { background: rgba(255,255,255,0.06); border-bottom-left-radius: 4px; }
.msg-bubble-sender { font-size: 0.7rem; font-weight: 600; color: #00a8ff; margin-bottom: 0.15rem; }
.msg-bubble-body { word-wrap: break-word; }
.msg-bubble-context { font-size: 0.72rem; color: rgba(255,255,255,0.3); margin-top: 0.2rem; font-style: italic; }
.msg-bubble-time { font-size: 0.6rem; color: rgba(255,255,255,0.2); margin-top: 0.15rem; text-align: right; }
.msg-compose { display: flex; gap: 0.5rem; padding: 0.75rem 1rem; border-top: 1px solid var(--border); flex-shrink: 0; }
.msg-compose .form-input { flex: 1; }
.msg-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: rgba(255,255,255,0.3); }
.msg-new-convo { padding: 0.5rem 1rem; border-bottom: 1px solid var(--border); }
.msg-new-convo .form-input { margin-bottom: 0.25rem; font-size: 0.82rem; }
.msg-person-result { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.5rem; cursor: pointer; border-radius: 6px; font-size: 0.85rem; }
.msg-person-result:hover { background: rgba(255,255,255,0.05); }
@media (max-width: 768px) {
    .msg-sidebar { width: 100%; }
    .msg-thread { display: none; }
}
.modal-followup-section {
    margin-top: 1rem; padding-top: 1rem;
    border-top: 1px solid var(--border);
}
.modal-followup-section .toggle-label {
    display: flex; align-items: center; gap: 0.5rem;
    color: var(--text-secondary); font-size: 0.9rem; cursor: pointer;
}
.msg-channel-toggles {
    display: flex; gap: 1.5rem; margin-bottom: 1rem;
    padding-bottom: 0.75rem; border-bottom: 1px solid var(--border);
}
.msg-channel-toggles .toggle-label { font-size: 0.95rem; font-weight: 600; }
.msg-channel-section {
    padding: 1rem 0; border-bottom: 1px solid var(--border);
}
.msg-channel-section:last-of-type { border-bottom: none; }
.msg-section-label {
    font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--accent); margin: 0 0 0.75rem 0;
}
/* ── Pipeline Board ── */
.pipeline-board {
    display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 1rem;
    min-height: 300px;
}
.pipeline-column {
    flex: 0 0 260px; background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: 10px; display: flex; flex-direction: column; max-height: 70vh;
}
.pipeline-column-header {
    padding: 0.75rem 1rem; display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid var(--border); border-radius: 10px 10px 0 0;
}
.pipeline-column-title { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); }
.pipeline-column-count {
    background: rgba(var(--accent-rgb),0.15); color: var(--accent);
    font-size: 0.75rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 10px;
}
.pipeline-column-body { padding: 0.5rem; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 0.5rem; }
.pipeline-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
    padding: 0.75rem; cursor: pointer; transition: border-color 0.15s;
}
.pipeline-card:hover { border-color: var(--accent); }
.pipeline-card[draggable="true"] { cursor: pointer; }
.pipeline-card-move-btn {
    background: none; border: 1px solid var(--border); border-radius: 4px;
    color: var(--text-muted); font-size: 0.75rem; padding: 0.1rem 0.35rem;
    cursor: pointer; line-height: 1;
}
.pipeline-card-move-btn:hover { color: var(--accent); border-color: var(--accent); }
.pipeline-card[draggable="true"]:active { cursor: grabbing; opacity: 0.6; }
.pipeline-column-dragover { background: rgba(var(--accent-rgb),0.08); border-color: var(--accent); }
.pipeline-unassigned.pipeline-column-dragover { background: rgba(var(--accent-rgb),0.06); border-radius: 10px; }
.pipeline-card-name { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); margin-bottom: 0.25rem; }
.pipeline-stage-row {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
}
.pipeline-stage-row:last-child { border-bottom: none; }
.pipeline-stage-row[draggable="true"] { cursor: grab; }
.pipeline-stage-row[draggable="true"]:active { cursor: grabbing; }
.pipeline-stage-row-dragover { background: rgba(var(--accent-rgb),0.1); border-radius: 6px; }
.pipeline-stage-grip { color: var(--text-muted); font-size: 0.9rem; cursor: grab; user-select: none; }
.pipeline-stage-badge {
    display: inline-block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.03em; padding: 0.15rem 0.5rem; border-radius: 10px;
    color: #fff; line-height: 1.3;
}
.pipeline-move-btn {
    display: flex; justify-content: space-between; align-items: center; width: 100%;
    background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px;
    padding: 0.75rem 1rem; color: var(--text-primary); cursor: pointer;
    font-size: 0.9rem; margin-bottom: 0.5rem; transition: background 0.15s;
}
.pipeline-move-btn:hover { background: rgba(var(--accent-rgb),0.1); }
.pipeline-move-btn.active { background: rgba(var(--accent-rgb),0.15); border-color: var(--accent); }
.artd-btn-danger-sm {
    background: none; border: 1px solid rgba(239,68,68,0.3); color: #ef4444;
    border-radius: 6px; padding: 0.25rem 0.5rem; cursor: pointer; font-size: 0.8rem;
}
.artd-btn-danger-sm:hover { background: rgba(239,68,68,0.1); }

/* ── Integrations ── */
.integrations-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}
.integration-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
    display: flex; flex-direction: column; overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.integration-card:hover { border-color: var(--accent); box-shadow: 0 4px 20px rgba(0,0,0,0.15); }
.integration-card-icon {
    display: flex; align-items: center; justify-content: center;
    height: 80px; color: #fff;
}
.integration-card-body { padding: 1.25rem 1.5rem; flex: 1; }
.integration-card-body h3 { margin: 0 0 0.5rem; font-size: 1.15rem; color: var(--text-primary); }
.integration-card-desc { color: var(--text-secondary); font-size: 0.88rem; line-height: 1.5; margin: 0 0 1rem; }
.integration-card-features {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.integration-card-features span {
    font-size: 0.72rem; padding: 0.2rem 0.5rem; border-radius: 6px;
    background: rgba(var(--accent-rgb),0.1); color: var(--accent); font-weight: 500;
}
.integration-card-footer {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 1.5rem; border-top: 1px solid var(--border);
}
.integration-status {
    font-size: 0.8rem; font-weight: 600; padding: 0.25rem 0.6rem; border-radius: 8px;
}
.integration-status-available { background: rgba(107,114,128,0.15); color: #9ca3af; }
.integration-status-platform { background: rgba(0,168,255,0.12); color: #00a8ff; }
.integration-status-connected { background: rgba(16,185,129,0.15); color: #10b981; }
.integration-status-error { background: rgba(239,68,68,0.15); color: #ef4444; }

/* ── Autocomplete ── */
.autocomplete-wrap { position: relative; }
.autocomplete-dropdown {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
    max-height: 220px; overflow-y: auto; margin-top: 2px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.autocomplete-option {
    padding: 0.6rem 0.75rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid var(--border); transition: background 0.1s;
}
.autocomplete-option:last-child { border-bottom: none; }
.autocomplete-option:hover { background: rgba(var(--accent-rgb),0.1); }
.autocomplete-option span:first-child { color: var(--text-primary); font-weight: 500; }
.autocomplete-selected {
    display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem;
    padding: 0.35rem 0.6rem; background: rgba(var(--accent-rgb),0.12); border-radius: 6px;
    color: var(--accent); font-size: 0.85rem; font-weight: 600; width: fit-content;
}
.autocomplete-clear {
    background: none; border: none; color: var(--text-muted); cursor: pointer;
    font-size: 1rem; line-height: 1; padding: 0;
}
.autocomplete-clear:hover { color: var(--text-primary); }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 768px) {
    .modal-content { width: 95%; max-height: 95vh; }
}

@media (max-width: 768px) {
    .crm-contact-row { flex-direction: column; gap: 0.5rem; align-items: flex-start; }
    .crm-contact-stats { flex-wrap: wrap; gap: 0.75rem; }
}

/* ===== Appearance Panel ===== */

.appear-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    z-index: 200;
}

.appear-panel {
    position: fixed;
    right: 0; top: 0; bottom: 0;
    width: 320px;
    background: #161b22;
    border-left: 1px solid rgba(255,255,255,0.08);
    z-index: 201;
    padding: 1.5rem;
    overflow-y: auto;
    animation: appear-slide-in 0.2s ease-out;
}

@keyframes appear-slide-in {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.appear-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 1.5rem;
}
.appear-header h3 { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--text-primary); }

.appear-section { margin-bottom: 1.5rem; }

.appear-label {
    display: block; font-size: 0.8rem; font-weight: 500;
    color: rgba(255,255,255,0.5); margin-bottom: 0.6rem;
    text-transform: uppercase; letter-spacing: 0.05em;
}

.appear-options { display: flex; gap: 0.5rem; }

.appear-option {
    flex: 1; padding: 0.6rem; background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.08); border-radius: 8px;
    color: rgba(255,255,255,0.6); font-size: 0.8rem; font-weight: 500;
    cursor: pointer; transition: all 0.15s; text-align: center;
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
}
.appear-option:hover { border-color: rgba(255,255,255,0.15); color: var(--text-primary); }
.appear-option.active { border-color: var(--accent); color: var(--accent); background: rgba(var(--accent-rgb),0.06); }

.appear-swatch {
    width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0;
}
.appear-swatch-dark { background: #0d1117; border: 1px solid var(--input-border); }
.appear-swatch-light { background: #f0f2f5; border: 1px solid rgba(0,0,0,0.1); }

.appear-colors { display: flex; gap: 0.5rem; }

.appear-color {
    width: 32px; height: 32px; border-radius: 50%; border: 2px solid transparent;
    cursor: pointer; transition: all 0.15s; padding: 0;
}
.appear-color:hover { transform: scale(1.15); }
.appear-color.active { border-color: var(--text-primary); box-shadow: 0 0 0 2px rgba(255,255,255,0.2); }

.appear-note {
    font-size: 0.7rem; color: rgba(255,255,255,0.25); margin-top: 2rem; line-height: 1.5;
}

/* ===== Toast Notifications ===== */

.toast-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 9999;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5rem;
    max-width: 400px;
}

.toast-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    backdrop-filter: blur(20px);
    animation: toast-in 0.3s ease-out;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}

.toast-exit {
    animation: toast-out 0.2s ease-in forwards;
}

.toast-success {
    background: rgba(63,185,80,0.15);
    border-color: rgba(63,185,80,0.25);
}
.toast-success .toast-icon { color: #3fb950; }

.toast-error {
    background: rgba(220,53,69,0.15);
    border-color: rgba(220,53,69,0.25);
}
.toast-error .toast-icon { color: #ff6b7a; }

.toast-info {
    background: rgba(var(--accent-rgb),0.12);
    border-color: rgba(var(--accent-rgb),0.2);
}
.toast-info .toast-icon { color: var(--accent); }

.toast-warning {
    background: rgba(232,131,58,0.15);
    border-color: rgba(232,131,58,0.25);
}
.toast-warning .toast-icon { color: #e8833a; }

.toast-icon {
    font-size: 1rem;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

/* Annie's avatar — branding mark on every toast. The status icon sits as a small
   badge over the lower-right so the success/error/info hint is still readable. */
.toast-annie {
    width: 32px; height: 32px; flex-shrink: 0;
    border-radius: 50%; object-fit: cover;
    border: 2px solid rgba(255,255,255,0.18);
    background: rgba(0,0,0,0.25);
}
.toast-status-icon {
    position: absolute;
    margin-left: 18px; margin-top: 18px;
    width: 16px; height: 16px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 0.65rem; line-height: 1;
    background: #161b22; border: 1px solid rgba(255,255,255,0.14);
}
.toast-status-success { color: #3fb950; }
.toast-status-error   { color: #ff6b7a; }
.toast-status-info    { color: var(--accent); }
.toast-status-warning { color: #e8833a; }
[data-theme="light"] .toast-status-icon { background: #ffffff; border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .toast-annie { border-color: rgba(0,0,0,0.12); background: rgba(0,0,0,0.04); }

.toast-message {
    flex: 1;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.85);
    line-height: 1.4;
}

.toast-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.3);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
}
.toast-close:hover { color: rgba(255,255,255,0.7); }

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

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

/* ===== Blazor Defaults ===== */

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

/* Loading Screen */
#particles {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0; pointer-events: none;
}
.loading-center {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    z-index: 1;
}
.loading-ring-wrap {
    position: relative; width: min(320px, 60vw); height: min(320px, 60vw);
    display: flex; align-items: center; justify-content: center;
}
.loading-progress {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    animation: loadingSpin 3s linear infinite;
}
@keyframes loadingSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.loading-progress circle {
    fill: none;
    stroke: rgba(255,255,255,0.06);
    stroke-width: 3;
    cx: 60; cy: 60; r: 52;
}
.loading-progress-arc {
    stroke: #00a8ff !important;
    stroke-width: 3;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 1.04), 500%;
    stroke-linecap: round;
    filter: drop-shadow(0 0 6px rgba(0,168,255,0.5));
    transition: stroke-dasharray 0.15s ease-out;
}
.loading-logo {
    width: min(180px, 34vw); height: auto; object-fit: contain;
    filter: drop-shadow(0 0 20px rgba(0,168,255,0.3));
    animation: logoPulse 2s ease-in-out infinite;
}
@keyframes logoPulse {
    0%, 100% { opacity: 0.85; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.04); }
}
.loading-progress-text {
    margin-top: 1.2rem;
    text-align: center;
    font-weight: 500;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.35);
    letter-spacing: 0.05em;
}
.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

/* ===== Mobile Header ===== */
.app-mobile-header {
    display: none;
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    padding: 0.6rem 1rem;
    align-items: center; gap: 0.75rem;
}
.app-hamburger {
    background: none; border: none; color: var(--text-primary);
    font-size: 1.4rem; cursor: pointer; padding: 0; line-height: 1;
}
.app-mobile-logo { height: 22px; }

.app-sidebar-backdrop {
    display: none;
    position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 59;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .app-mobile-header { display: flex; }
    .app-sidebar-backdrop { display: block; }

    .app-page { flex-direction: column; padding-top: 52px; }

    .app-sidebar {
        position: fixed; top: 0; left: -280px; bottom: 0;
        width: 280px; z-index: 60;
        transition: left 0.25s ease;
        overflow-y: auto;
        background: rgba(13, 17, 23, 0.95);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-right: 1px solid rgba(255,255,255,0.08);
    }
    .app-sidebar.open { left: 0; }

    /* Dropup menu opens upward but needs to be visible on mobile */
    .dropup-menu {
        bottom: calc(100% + 0.5rem);
        top: auto;
        max-height: 60vh;
        overflow-y: auto;
    }

    .app-main { padding: 1rem; }

    /* Headers stack */
    .art-header { flex-direction: column; gap: 0.75rem; }
    .artd-actions { flex-wrap: wrap; }
    .dash-header { flex-direction: column; gap: 0.75rem; }

    /* Stats grids — 2 columns on mobile */
    .dash-stats { grid-template-columns: repeat(2, 1fr); }
    .admin-stats { grid-template-columns: repeat(2, 1fr); }
    .artd-stat-boxes { grid-template-columns: repeat(3, 1fr); }

    /* Content grids stack */
    .settings-grid { grid-template-columns: 1fr; }
    .compare-grid { grid-template-columns: 1fr; }
    .admin-mgmt-grid { grid-template-columns: 1fr; }

    /* Form rows stack */
    .settings-form-row { flex-direction: column; gap: 0; }
    .art-form-grid { grid-template-columns: 1fr; }

    /* Art grid — 2 columns */
    .art-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
    .folio-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }

    /* Images grid */
    .artd-images-grid { grid-template-columns: repeat(2, 1fr); }

    /* Tabs scroll horizontally */
    .artd-tabs { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
    .artd-tab { flex-shrink: 0; }

    /* Filters stack */
    .art-filters { flex-direction: column; }
    .art-filter-select { width: 100%; }

    /* Batch bar wrap */
    .art-batch-bar { flex-wrap: wrap; }

    /* Table scroll */
    .admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Login page */
    .login-container { max-width: 100%; padding: 0 0.5rem; }
    .login-card { padding: 1.5rem 1.25rem; }

    /* Dropup menu — keep opening upward on mobile */

    /* Appearance panel */
    .appear-panel { width: 100%; }

    /* Toast */
    .toast-container { left: 1rem; right: 1rem; max-width: none; }

    /* Hero image */
    .artd-hero { max-height: 250px; }
}

@media (max-width: 480px) {
    .art-grid { grid-template-columns: 1fr; }
    .folio-grid { grid-template-columns: 1fr; }
    .artd-stat-boxes { grid-template-columns: repeat(2, 1fr); }
    .dash-stats { grid-template-columns: 1fr 1fr; }
    .admin-stats { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    [data-theme="light"] .app-sidebar {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }
}

/* ============================================================
   PUBLIC SITE STYLES — Midnight Gradient Theme
   ============================================================ */

.pub-page {
    background: #0d1117;
    color: #e6edf3;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    min-height: 100vh;
}

/* Public Nav */
.pub-nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; justify-content: space-between; align-items: center;
    padding: 1.25rem 3rem;
    background: rgba(13,17,23,0.8);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.pub-logo {
    display: flex; align-items: center; text-decoration: none;
}
.pub-logo img {
    height: 32px; width: auto;
}
.pub-nav-links { display: flex; gap: 2rem; align-items: center; }
.pub-nav-links a {
    color: rgba(255,255,255,0.45); text-decoration: none;
    font-size: 0.85rem; font-weight: 500; transition: color 0.2s;
}
.pub-nav-links a:hover { color: #e6edf3; }
.pub-nav-cta {
    padding: 0.5rem 1.25rem !important;
    background: rgba(0,168,255,0.15); border: 1px solid rgba(0,168,255,0.3);
    border-radius: 8px !important;
    color: #00a8ff !important; font-weight: 600 !important;
    transition: background 0.15s;
}
.pub-nav-cta:hover { background: rgba(0,168,255,0.25) !important; }
.pub-nav-links a.pub-nav-btn-green,
.pub-nav-btn-green {
    padding: 0.5rem 1.25rem !important;
    background: rgba(46,160,67,0.15) !important; border: 1px solid rgba(46,160,67,0.3) !important;
    border-radius: 8px !important;
    color: #3fb950 !important; font-weight: 600 !important;
    transition: background 0.15s; text-decoration: none !important;
}
.pub-nav-links a.pub-nav-btn-green:hover,
.pub-nav-btn-green:hover { background: rgba(46,160,67,0.25) !important; border-color: rgba(46,160,67,0.4) !important; color: #3fb950 !important; }
.pub-nav-links button.pub-nav-btn-red,
.pub-nav-btn-red {
    padding: 0.5rem 1.25rem !important;
    background: rgba(248,81,73,0.15) !important; border: 1px solid rgba(248,81,73,0.3) !important;
    border-radius: 8px !important;
    color: #f85149 !important; font-weight: 600 !important;
    cursor: pointer; transition: background 0.15s; font-size: 0.85rem;
}
.pub-nav-links button.pub-nav-btn-red:hover,
.pub-nav-btn-red:hover { background: rgba(248,81,73,0.25) !important; border-color: rgba(248,81,73,0.4) !important; }
.pub-hamburger {
    display: none; background: none; border: none;
    color: #e6edf3; font-size: 1.4rem; cursor: pointer;
}
.pub-mobile-menu {
    display: none; position: fixed; top: 60px; left: 0; right: 0; z-index: 99;
    background: rgba(13,17,23,0.95); backdrop-filter: blur(20px);
    flex-direction: column; padding: 1rem 2rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.pub-mobile-menu.open { display: flex; }
.pub-mobile-menu a {
    padding: 0.75rem 0; color: rgba(255,255,255,0.6);
    text-decoration: none; font-size: 0.9rem; border-bottom: 1px solid rgba(255,255,255,0.04);
}

.pub-main { padding-top: 60px; }

/* Public Hero */
.pub-hero {
    min-height: calc(100vh - 60px);
    display: flex; align-items: center; justify-content: center;
    text-align: center; padding: 4rem 2rem;
    position: relative; overflow: hidden;
}
.pub-hero-glow {
    position: absolute; border-radius: 50%;
    filter: blur(120px); opacity: 0.15; pointer-events: none;
}
.pub-hero-content { position: relative; max-width: 800px; }
.pub-hero h1 {
    font-size: 4.5rem; font-weight: 800; line-height: 1.05;
    letter-spacing: -0.03em; margin-bottom: 1.5rem;
}
.pub-grad {
    background: linear-gradient(135deg, #00a8ff, #e8833a);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.pub-hero p {
    font-size: 1.15rem; color: rgba(255,255,255,0.45);
    line-height: 1.7; margin-bottom: 2.5rem;
    max-width: 580px; margin-left: auto; margin-right: auto;
}
.pub-hero-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* Buttons */
.pub-btn {
    padding: 0.8rem 2.5rem; border-radius: 10px;
    font-size: 0.9rem; font-weight: 600; cursor: pointer;
    transition: background 0.15s, transform 0.15s; text-decoration: none; display: inline-block;
    text-align: center;
}
.pub-btn-primary {
    background: rgba(0,168,255,0.15); border: 1px solid rgba(0,168,255,0.3);
    color: #00a8ff;
}
.pub-btn-primary:hover { background: rgba(0,168,255,0.25); border-color: rgba(0,168,255,0.4); transform: translateY(-1px); }
.pub-btn-glass {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.6);
}
.pub-btn-glass:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.8); }

/* Metrics bar */
.pub-metrics {
    display: grid; grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.pub-metric {
    padding: 3rem 2rem; text-align: center;
    border-right: 1px solid rgba(255,255,255,0.04);
}
.pub-metric:last-child { border-right: none; }
.pub-metric-val {
    font-size: 2.5rem; font-weight: 800;
    background: linear-gradient(135deg, #00a8ff, #e8833a);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.pub-metric-label {
    font-size: 0.75rem; color: rgba(255,255,255,0.3);
    text-transform: uppercase; letter-spacing: 0.08em; margin-top: 0.3rem;
}

/* Section */
.pub-section {
    padding: 5rem 3rem; max-width: 1100px; margin: 0 auto;
}
.pub-section-label {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.15em;
    color: #00a8ff; font-weight: 700; margin-bottom: 0.75rem;
}
.pub-section h2 {
    font-size: 2.5rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 1rem;
}
.pub-section > p {
    color: rgba(255,255,255,0.4); font-size: 1rem; max-width: 550px; margin-bottom: 3rem; line-height: 1.6;
}
.pub-section-center { text-align: center; }
.pub-section-center > p { margin-left: auto; margin-right: auto; }

/* Glass card grid */
.pub-glass-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.pub-glass-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px; padding: 2rem;
    backdrop-filter: blur(10px);
    transition: border-color 0.2s, transform 0.2s;
}
.pub-glass-card:hover { border-color: rgba(0,168,255,0.15); transform: translateY(-2px); }
.pub-glass-icon {
    width: 48px; height: 48px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; margin-bottom: 1.25rem;
}
.pub-glass-icon.blue { background: rgba(0,168,255,0.08); color: #00a8ff; }
.pub-glass-icon.orange { background: rgba(232,131,58,0.08); color: #e8833a; }
.pub-glass-icon.purple { background: rgba(139,92,246,0.08); color: #8b5cf6; }
.pub-glass-icon.green { background: rgba(63,185,80,0.08); color: #3fb950; }
.pub-glass-icon.cyan { background: rgba(6,182,212,0.08); color: #06b6d4; }
.pub-glass-icon.pink { background: rgba(244,63,94,0.08); color: #f43f5e; }
.pub-glass-card h3 { font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; }
.pub-glass-card p { font-size: 0.82rem; color: rgba(255,255,255,0.4); line-height: 1.6; }

/* Timeline */
.pub-timeline { position: relative; padding-left: 3rem; max-width: 700px; }
.pub-timeline::before {
    content: ''; position: absolute; left: 11px; top: 0; bottom: 0;
    width: 2px; background: linear-gradient(180deg, #00a8ff, #e8833a, #8b5cf6);
    border-radius: 1px;
}
.pub-timeline-item { position: relative; padding-bottom: 3rem; }
.pub-timeline-item:last-child { padding-bottom: 0; }
.pub-timeline-dot {
    position: absolute; left: -3rem; top: 0.2rem;
    width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.65rem; font-weight: 700; color: #fff;
}
.pub-timeline-item:nth-child(1) .pub-timeline-dot { background: #00a8ff; }
.pub-timeline-item:nth-child(2) .pub-timeline-dot { background: #e8833a; }
.pub-timeline-item:nth-child(3) .pub-timeline-dot { background: #8b5cf6; }
.pub-timeline-item:nth-child(4) .pub-timeline-dot { background: #3fb950; }
.pub-timeline-item h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem; }
.pub-timeline-item p { color: rgba(255,255,255,0.4); font-size: 0.9rem; line-height: 1.6; }

/* Floating preview cards */
.pub-preview-row {
    display: flex; justify-content: center; gap: 1.5rem; padding: 2rem 3rem 4rem; flex-wrap: wrap;
}
.pub-preview-card {
    width: 220px; background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px; overflow: hidden; backdrop-filter: blur(10px);
    transition: transform 0.3s, border-color 0.2s;
}
.pub-preview-card:hover { transform: translateY(-4px); border-color: rgba(0,168,255,0.2); }
.pub-preview-card:nth-child(2) { transform: translateY(-20px); }
.pub-preview-card:nth-child(4) { transform: translateY(-10px); }
.pub-preview-img {
    width: 100%; aspect-ratio: 1;
    object-fit: cover; display: block;
    background: linear-gradient(135deg, rgba(0,168,255,0.08), rgba(232,131,58,0.05));
}
.pub-preview-info { padding: 1rem; }
.pub-preview-title { font-size: 0.85rem; font-weight: 600; }
.pub-preview-meta { font-size: 0.75rem; color: rgba(255,255,255,0.35); margin-top: 0.2rem; }
.pub-preview-price { font-size: 0.8rem; color: #00a8ff; margin-top: 0.4rem; font-weight: 500; }

/* CTA section */
.pub-cta {
    padding: 5rem 3rem; text-align: center;
    position: relative; overflow: hidden;
}
.pub-cta-glow {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at center, rgba(0,168,255,0.08), transparent 70%);
    pointer-events: none;
}
.pub-cta-content { position: relative; }
.pub-cta h2 { font-size: 2.8rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 1rem; }
.pub-cta p { color: rgba(255,255,255,0.4); font-size: 1rem; margin-bottom: 2.5rem; max-width: 480px; margin-left: auto; margin-right: auto; }

/* Split section */
.pub-split {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4rem;
    align-items: center; padding: 5rem 3rem;
    max-width: 1100px; margin: 0 auto;
}
.pub-split-visual {
    aspect-ratio: 4/3; border-radius: 16px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    display: flex; align-items: center; justify-content: center;
    font-size: 4rem; color: rgba(255,255,255,0.06);
    overflow: hidden;
}
.pub-split-visual img { width: 100%; height: 100%; object-fit: contain; padding: 1.5rem; box-sizing: border-box; }

/* Hero product mockup — sits below the CTA buttons inside .pub-hero-content. The SVG
   has its own card chrome, so we don't need an extra background here, just sizing. */
.pub-hero-mockup {
    margin-top: 3rem; max-width: 720px; margin-left: auto; margin-right: auto;
    border-radius: 14px; overflow: hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,0.4), 0 0 80px rgba(0,168,255,0.08);
    border: 1px solid rgba(255,255,255,0.08);
}
.pub-hero-mockup img { width: 100%; display: block; }
@media (max-width: 720px) { .pub-hero-mockup { margin-top: 2rem; } }
.pub-split h2 { font-size: 2rem; font-weight: 700; margin-bottom: 1rem; line-height: 1.2; }
.pub-split p { color: rgba(255,255,255,0.4); line-height: 1.7; margin-bottom: 1rem; }
.pub-split-list { list-style: none; padding: 0; }
.pub-split-list li {
    padding: 0.5rem 0; color: rgba(255,255,255,0.5); font-size: 0.9rem;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    display: flex; align-items: center; gap: 0.5rem;
}
.pub-split-list li::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: #00a8ff; flex-shrink: 0;
}

/* Pricing cards */
.pub-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 1000px; margin: 0 auto; }
.pub-price-card {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px; padding: 2.5rem 2rem;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: border-color 0.2s;
}
.pub-price-card.featured { border-color: rgba(0,168,255,0.3); box-shadow: 0 0 40px rgba(0,168,255,0.08); }
.pub-price-name {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em;
    color: #00a8ff; font-weight: 700; margin-bottom: 0.75rem;
}
.pub-price-amount { font-size: 2.5rem; font-weight: 800; margin-bottom: 0.5rem; }
.pub-price-amount span { font-size: 0.85rem; color: rgba(255,255,255,0.35); font-weight: 400; }
.pub-price-desc { font-size: 0.85rem; color: rgba(255,255,255,0.4); margin-bottom: 1.5rem; line-height: 1.5; }
.pub-price-features { list-style: none; padding: 0; margin-bottom: 2rem; }
.pub-price-features li {
    font-size: 0.85rem; color: rgba(255,255,255,0.5);
    padding: 0.4rem 0; border-bottom: 1px solid rgba(255,255,255,0.04);
}

/* Divider */
.pub-divider { border: none; border-top: 1px solid rgba(255,255,255,0.04); margin: 0; }

/* Content page (About, Terms, etc) */
.pub-content { max-width: 760px; margin: 0 auto; padding: 4rem 2rem; }
.pub-content h1 { font-size: 2.5rem; font-weight: 700; margin-bottom: 1.5rem; }
.pub-content h2 { font-size: 1.5rem; font-weight: 600; margin: 2rem 0 0.75rem; }
.pub-content p { color: rgba(255,255,255,0.5); line-height: 1.8; margin-bottom: 1rem; font-size: 0.95rem; }
.pub-content ul { color: rgba(255,255,255,0.5); padding-left: 1.5rem; margin-bottom: 1rem; }
.pub-content li { margin-bottom: 0.5rem; line-height: 1.6; }
.pub-content a { color: #00a8ff; }

/* Footer */
.pub-footer {
    border-top: 1px solid rgba(255,255,255,0.04);
    padding: 4rem 3rem 2rem;
}
.pub-footer-grid {
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem; max-width: 1100px; margin: 0 auto;
}
.pub-footer-logo {
    margin-bottom: 0.75rem;
}
.pub-footer-logo img {
    height: 28px; width: auto;
}
.pub-footer-brand p { color: rgba(255,255,255,0.35); font-size: 0.85rem; line-height: 1.6; margin-bottom: 1rem; }
.pub-footer-social { display: flex; gap: 0.75rem; }
.pub-footer-social a {
    color: rgba(255,255,255,0.3); transition: color 0.2s;
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 8px;
    background: rgba(255,255,255,0.04);
}
.pub-footer-social a:hover { color: #00a8ff; background: rgba(0,168,255,0.08); }
.pub-footer-col h4 {
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em;
    color: rgba(255,255,255,0.5); margin-bottom: 1rem; font-weight: 600;
}
.pub-footer-col a {
    display: block; color: rgba(255,255,255,0.35); text-decoration: none;
    font-size: 0.85rem; padding: 0.3rem 0; transition: color 0.2s;
}
.pub-footer-col a:hover { color: #e6edf3; }
.pub-footer-bottom {
    text-align: center; padding-top: 2rem; margin-top: 3rem;
    border-top: 1px solid rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.2); font-size: 0.8rem;
}

/* ── Public Exhibition Browse ── */

.pub-exhibit-controls {
    display: flex; gap: 1rem; align-items: center; justify-content: center;
    padding: 0 3rem 2rem; flex-wrap: wrap;
}
.pub-exhibit-search {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px; padding: 0.6rem 1rem; color: #e6edf3; font-size: 0.85rem;
    width: 300px; outline: none;
}
.pub-exhibit-search:focus { border-color: rgba(0,168,255,0.3); }
.pub-exhibit-search::placeholder { color: rgba(255,255,255,0.25); }
.pub-exhibit-filters { display: flex; gap: 0.75rem; align-items: center; }
.pub-exhibit-filters select {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px; padding: 0.5rem 0.75rem; color: #e6edf3; font-size: 0.8rem;
}
.pub-exhibit-toggle {
    font-size: 0.8rem; color: rgba(255,255,255,0.45);
    display: flex; align-items: center; gap: 0.4rem; cursor: pointer;
}
.pub-exhibit-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem; padding: 0 3rem 4rem; max-width: 1200px; margin: 0 auto;
}
.pub-exhibit-card {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit;
    transition: border-color 0.2s, transform 0.2s;
}
.pub-exhibit-card:hover { border-color: rgba(0,168,255,0.2); transform: translateY(-3px); }
.pub-exhibit-banner {
    width: 100%; aspect-ratio: 16/9;
    background: linear-gradient(135deg, rgba(0,168,255,0.08), rgba(232,131,58,0.05));
    overflow: hidden;
}
.pub-exhibit-banner img { width: 100%; height: 100%; object-fit: cover; }
.pub-exhibit-body { padding: 1.25rem; }
.pub-exhibit-status-row { display: flex; gap: 0.4rem; margin-bottom: 0.6rem; }
.pub-exhibit-badge {
    font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    padding: 0.2rem 0.5rem; border-radius: 4px; display: inline-block;
}
.pub-exhibit-badge.callforentries { background: rgba(0,168,255,0.15); color: #00a8ff; }
.pub-exhibit-badge.active { background: rgba(63,185,80,0.15); color: #3fb950; }
.pub-exhibit-badge.reviewing { background: rgba(232,131,58,0.15); color: #e8833a; }
.pub-exhibit-badge.closed { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.4); }
.pub-exhibit-badge.virtual { background: rgba(139,92,246,0.15); color: #8b5cf6; }
.pub-exhibit-card h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.3rem; }
.pub-exhibit-org { font-size: 0.8rem; color: rgba(255,255,255,0.4); }
.pub-exhibit-loc { font-size: 0.78rem; color: rgba(255,255,255,0.3); margin-top: 0.15rem; }
.pub-exhibit-meta { font-size: 0.78rem; color: rgba(255,255,255,0.35); margin-top: 0.5rem; }
.pub-exhibit-footer {
    display: flex; justify-content: space-between; margin-top: 0.75rem;
    font-size: 0.78rem; color: rgba(255,255,255,0.35);
    padding-top: 0.6rem; border-top: 1px solid rgba(255,255,255,0.04);
}
.pub-exhibit-free { color: #3fb950; font-weight: 600; }

/* ── Public Exhibition Detail ── */

.pubex-hero {
    position: relative; width: 100%; aspect-ratio: 3/1; min-height: 250px; max-height: 400px;
    background: linear-gradient(135deg, rgba(0,168,255,0.1), rgba(232,131,58,0.05));
    overflow: hidden;
}
.pubex-hero-img { width: 100%; height: 100%; object-fit: cover; }
.pubex-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(13,17,23,0.95) 0%, rgba(13,17,23,0.3) 100%);
    display: flex; align-items: flex-end; justify-content: space-between; padding: 2rem 3rem;
}
.pubex-hero-content h1 { font-size: 2.5rem; font-weight: 700; margin: 0; }
.pubex-hero-org { color: rgba(255,255,255,0.45); font-size: 0.9rem; margin-top: 0.3rem; }

.pubex-fav-btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: rgba(0,0,0,0.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.18); color: rgba(255,255,255,0.85);
    border-radius: 999px; padding: 0.55rem 1rem;
    font-size: 0.9rem; cursor: pointer; transition: all 0.18s;
    align-self: flex-end;
}
.pubex-fav-btn:hover:not(:disabled) { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.35); }
.pubex-fav-btn:disabled { opacity: 0.6; cursor: wait; }
.pubex-fav-btn .pubex-fav-icon { font-size: 1.1rem; line-height: 1; }
.pubex-fav-btn.active { background: rgba(255, 64, 96, 0.18); border-color: rgba(255, 64, 96, 0.55); color: #ff5577; }
.pubex-fav-btn.active:hover:not(:disabled) { background: rgba(255, 64, 96, 0.28); }
.pubex-fav-count { font-size: 0.8rem; opacity: 0.75; padding-left: 0.4rem; border-left: 1px solid rgba(255,255,255,0.18); margin-left: 0.2rem; }
[data-theme="light"] .pubex-fav-btn { background: rgba(255,255,255,0.85); color: #333; border-color: rgba(0,0,0,0.12); }
[data-theme="light"] .pubex-fav-btn.active { background: rgba(255, 64, 96, 0.12); color: #d63a5a; border-color: rgba(214, 58, 90, 0.4); }

.pubex-layout {
    display: grid; grid-template-columns: 1fr 340px; gap: 1.5rem;
    max-width: 1100px; margin: 0 auto; padding: 2rem 3rem 4rem;
}
.pubex-main { min-width: 0; }
.pubex-card {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px; padding: 1.5rem; margin-bottom: 1.25rem;
}
.pubex-card h3 { font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem; }
.pubex-description { color: rgba(255,255,255,0.7); font-size: 0.9rem; line-height: 1.7; }
.pubex-description p { margin: 0 0 1em !important; }
.pubex-description p:last-child { margin-bottom: 0 !important; }
.pubex-description p br:only-child { display: none; }
.pubex-description br { content: ''; display: block; margin: 0; }
.pubex-cta-card { border-color: rgba(0,168,255,0.2); }
.pubex-cta-card p { font-size: 0.85rem; color: rgba(255,255,255,0.45); line-height: 1.5; }

.pubex-detail-list { display: flex; flex-direction: column; gap: 0.5rem; }
.pubex-detail-row {
    display: flex; justify-content: space-between;
    font-size: 0.82rem; padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.pubex-detail-label { color: rgba(255,255,255,0.35); }
.pubex-detail-row span:last-child { color: rgba(255,255,255,0.7); text-align: right; }

.pubex-link-list { display: flex; flex-direction: column; gap: 0.4rem; }
.pubex-link-list a {
    color: #00a8ff; font-size: 0.82rem; text-decoration: none;
}
.pubex-link-list a:hover { text-decoration: underline; }

/* Gallery grid */
.pubex-gallery-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem;
    margin-top: 0.5rem;
}
.pubex-gallery-item {
    border-radius: 10px; overflow: hidden;
    background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05);
}
.pubex-gallery-img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.pubex-gallery-placeholder { background: linear-gradient(135deg, rgba(0,168,255,0.06), rgba(255,255,255,0.02)); }
.pubex-gallery-info { padding: 0.6rem; }
.pubex-gallery-title { font-size: 0.8rem; font-weight: 600; }
.pubex-gallery-artist { font-size: 0.72rem; color: rgba(255,255,255,0.4); margin-top: 0.1rem; }
.pubex-gallery-medium { font-size: 0.68rem; color: rgba(255,255,255,0.3); }
.pubex-gallery-price { font-size: 0.75rem; margin-top: 0.3rem; color: #00a8ff; }
.pubex-sold { color: #f85149; font-weight: 600; }
.pubex-award { font-size: 0.65rem; color: #e8833a; margin-left: 0.3rem; }

/* ── Exhibit Gallery ── */

.gal-filters {
    display: flex; gap: 0.75rem; align-items: center; justify-content: center;
    padding: 0 3rem 2rem; flex-wrap: wrap;
}
.gal-filter-select {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px; padding: 0.5rem 0.75rem; color: #e6edf3; font-size: 0.8rem;
}
.gal-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem; padding: 0 3rem 2rem; max-width: 1400px; margin: 0 auto;
}
.gal-card {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px; overflow: hidden; cursor: pointer;
    transition: border-color 0.2s, transform 0.2s;
}
.gal-card:hover { border-color: rgba(0,168,255,0.2); transform: translateY(-2px); }
.gal-card-img {
    width: 100%; aspect-ratio: 1; overflow: hidden; position: relative;
    background: linear-gradient(135deg, rgba(0,168,255,0.05), rgba(255,255,255,0.02));
}
.gal-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal-sold-badge {
    position: absolute; top: 0.5rem; right: 0.5rem;
    background: rgba(248,81,73,0.9); color: #fff; font-size: 0.65rem; font-weight: 700;
    padding: 0.15rem 0.4rem; border-radius: 4px; text-transform: uppercase;
}
.gal-card-body { padding: 0.75rem; }
.gal-card-body h3 { font-size: 0.85rem; font-weight: 600; margin: 0 0 0.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gal-card-brand { font-size: 0.72rem; color: #00a8ff; text-decoration: none; display: block; margin-bottom: 0.25rem; }
.gal-card-brand:hover { text-decoration: underline; }
.gal-card-meta { font-size: 0.7rem; color: rgba(255,255,255,0.3); display: flex; gap: 0.3rem; }
.gal-card-price { font-size: 0.82rem; font-weight: 600; color: var(--text-primary); margin-top: 0.4rem; }

/* ── Brand Profile ── */

.bp-header {
    padding: 3rem 3rem 2rem; border-bottom: 1px solid rgba(255,255,255,0.04);
    max-width: 1200px; margin: 0 auto;
}
.bp-header-content { display: flex; align-items: center; gap: 1.5rem; }
.bp-logo { height: 70px; width: auto; }
.bp-header-info h1 { font-size: 2rem; font-weight: 700; margin: 0; }
.bp-header-meta { display: flex; gap: 0.75rem; align-items: center; font-size: 0.82rem; color: rgba(255,255,255,0.4); margin-top: 0.3rem; }
.bp-header-links { display: flex; gap: 0.75rem; margin-top: 0.5rem; }
.bp-header-links a { color: #00a8ff; font-size: 0.82rem; text-decoration: none; }
.bp-header-links a:hover { text-decoration: underline; }
.bp-about {
    max-width: 1200px; margin: 0 auto; padding: 2rem 3rem;
    display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;
}
.bp-about-section h3 { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.5rem; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.05em; }
.bp-section { max-width: 1400px; margin: 0 auto; padding: 2rem 3rem; }
.bp-section h2 { font-size: 1.3rem; font-weight: 700; margin-bottom: 1rem; }
.bp-collections { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.bp-collection-chip {
    padding: 0.35rem 0.75rem; border-radius: 6px; font-size: 0.78rem;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.5); cursor: pointer; transition: all 0.15s;
}
.bp-collection-chip:hover { border-color: rgba(0,168,255,0.3); color: #00a8ff; }
.bp-collection-chip.active { background: rgba(0,168,255,0.15); border-color: rgba(0,168,255,0.3); color: #00a8ff; }
.bp-collection-count { font-size: 0.65rem; color: rgba(255,255,255,0.3); margin-left: 0.25rem; }

/* ── Artwork Detail ── */

.aw-layout {
    display: grid; grid-template-columns: 1fr 400px; gap: 2.5rem;
    max-width: 1200px; margin: 0 auto; padding: 2rem 3rem 4rem;
}
.aw-gallery { min-width: 0; }
.aw-main-image {
    width: 100%; aspect-ratio: auto; border-radius: 12px; overflow: hidden;
    background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
}
.aw-main-image img { width: 100%; display: block; }
.aw-thumbs { display: flex; gap: 0.5rem; margin-top: 0.75rem; overflow-x: auto; }
.aw-thumb {
    width: 64px; height: 64px; border-radius: 6px; overflow: hidden;
    border: 2px solid transparent; cursor: pointer; flex-shrink: 0;
    transition: border-color 0.15s;
}
.aw-thumb img { width: 100%; height: 100%; object-fit: cover; }
.aw-thumb.active, .aw-thumb:hover { border-color: #00a8ff; }

.aw-details { padding-top: 0.5rem; }
.aw-brand-link {
    display: flex; align-items: center; gap: 0.5rem; text-decoration: none;
    color: #00a8ff; font-size: 0.85rem; font-weight: 500; margin-bottom: 0.5rem;
}
.aw-brand-link:hover { text-decoration: underline; }
.aw-brand-logo { height: 28px; width: auto; }
.aw-details h1 { font-size: 1.8rem; font-weight: 700; margin: 0 0 0.5rem; line-height: 1.2; }
.aw-meta { font-size: 0.85rem; color: rgba(255,255,255,0.4); display: flex; gap: 0.4rem; }
.aw-dimensions { font-size: 0.82rem; color: rgba(255,255,255,0.35); margin-top: 0.3rem; }
.aw-price { font-size: 1.5rem; font-weight: 700; margin: 1rem 0; }
.aw-price.inquire { font-size: 1rem; color: rgba(255,255,255,0.5); font-weight: 500; }
.aw-editions { margin: 1rem 0; }
.aw-editions h4 { font-size: 0.8rem; font-weight: 600; margin-bottom: 0.5rem; color: rgba(255,255,255,0.5); }
.aw-edition-row {
    display: flex; justify-content: space-between; padding: 0.5rem 0.75rem;
    font-size: 0.82rem; border-bottom: 1px solid rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.5); border-radius: 6px; transition: all 0.15s;
}
.aw-edition-row:hover { background: rgba(255,255,255,0.03); }
.aw-edition-selected {
    background: rgba(0,168,255,0.08) !important; border-color: rgba(0,168,255,0.2);
    color: var(--text-primary);
}
.aw-options { padding: 0.25rem 0 0.5rem 1rem; }
.aw-option-row {
    display: flex; justify-content: space-between; padding: 0.35rem 0.6rem;
    font-size: 0.78rem; border-radius: 5px; cursor: pointer;
    color: rgba(255,255,255,0.45); transition: all 0.15s; margin-bottom: 0.2rem;
}
.aw-option-row:hover { background: rgba(255,255,255,0.03); }
.aw-option-selected { background: rgba(139,92,246,0.1); color: var(--text-primary); }
.aw-actions { margin: 1.5rem 0; }
.aw-section { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.04); }
.aw-section h4 { font-size: 0.8rem; font-weight: 600; color: rgba(255,255,255,0.5); margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.04em; }
.aw-award { font-size: 0.85rem; color: #e8833a; margin-bottom: 0.3rem; }
.aw-award span { color: rgba(255,255,255,0.4); }
.aw-views { font-size: 0.75rem; color: rgba(255,255,255,0.2); margin-top: 1.5rem; }

/* ── Invoice Editor ── */

.inv-fullscreen {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999;
    background: #0d1117;
    display: flex; flex-direction: column;
    overflow: hidden;
}
/* Hide sidebar when invoice editor is open */
.app-page:has(.inv-fullscreen) .app-sidebar { display: none; }
.app-page:has(.inv-fullscreen) .app-main { padding: 0; overflow: hidden; }
.inv-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.75rem 1.5rem;
    background: var(--bg-card); border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.inv-toolbar h2 { font-size: 1rem; font-weight: 600; margin: 0; }
.inv-split {
    display: grid; grid-template-columns: 1fr 420px;
    flex: 1; overflow: hidden;
}
.inv-form {
    overflow-y: auto; padding: 1.5rem;
    display: flex; flex-direction: column; gap: 0;
}
.inv-section {
    padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.inv-section h3 {
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: rgba(255,255,255,0.4); margin: 0 0 0.75rem;
}
.inv-section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.inv-section-head h3 { margin: 0; }
.inv-contact-select {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px; padding: 0.3rem 0.5rem; color: var(--text-primary);
    font-size: 0.75rem; max-width: 280px;
}
.inv-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 0.5rem; }
.inv-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; }

.inv-items-header {
    display: flex; gap: 0.5rem; padding: 0.3rem 0; margin-bottom: 0.3rem;
    font-size: 0.65rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.04em; color: rgba(255,255,255,0.3);
}
.inv-item-row {
    display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.4rem;
}
.inv-item-row select, .inv-item-row input {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px; padding: 0.4rem 0.5rem; color: var(--text-primary); font-size: 0.8rem;
}
.inv-line-card {
    background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05);
    border-radius: 8px; padding: 0.75rem; margin-bottom: 0.5rem;
}
.inv-add-item {
    background: none; border: 1px dashed rgba(255,255,255,0.1);
    border-radius: 6px; padding: 0.5rem; color: rgba(255,255,255,0.35);
    font-size: 0.78rem; cursor: pointer; width: 100%; margin-top: 0.3rem;
    transition: border-color 0.15s, color 0.15s;
}
.inv-add-item:hover { border-color: var(--accent); color: var(--accent); }

/* Invoice Preview */
.inv-preview {
    background: rgba(255,255,255,0.02); border-left: 1px solid var(--border);
    overflow-y: auto; padding: 1.5rem;
}
.inv-preview-card {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px; padding: 2rem;
}
.inv-preview-accent {
    height: 4px; border-radius: 4px 4px 0 0; margin: -2rem -2rem 1.5rem;
    background: linear-gradient(135deg, #00a8ff, #e8833a);
}
.inv-preview-header { display: flex; justify-content: space-between; margin-bottom: 1.25rem; }
.inv-preview-title { font-size: 1.8rem; font-weight: 800; letter-spacing: 0.08em; color: rgba(255,255,255,0.15); }
.inv-preview-subtitle { font-size: 0.82rem; color: rgba(255,255,255,0.35); margin-top: 0.2rem; font-family: monospace; }
.inv-preview-dates { display: flex; gap: 2rem; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,0.04); }
.inv-preview-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; }
.inv-preview-label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.3); margin-bottom: 0.2rem; }
.inv-preview-value { font-size: 0.9rem; font-weight: 600; }
.inv-preview-small { font-size: 0.78rem; color: rgba(255,255,255,0.4); }

.inv-preview-table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.inv-preview-table th {
    font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; color: rgba(255,255,255,0.3);
    padding: 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.08);
    text-align: left;
}
.inv-preview-table td {
    font-size: 0.82rem; padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.6);
}

.inv-preview-totals { padding-top: 0.5rem; }
.inv-preview-total-row {
    display: flex; justify-content: space-between;
    font-size: 0.82rem; padding: 0.3rem 0;
    color: rgba(255,255,255,0.5);
}
.inv-grand-total {
    font-size: 1.1rem; font-weight: 700; color: var(--text-primary);
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 0.6rem; margin-top: 0.3rem;
}
.inv-preview-notes {
    margin-top: 1.5rem; padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.04);
}

@media (max-width: 900px) {
    .inv-split { grid-template-columns: 1fr; }
    .inv-preview { border-left: none; border-top: 1px solid var(--border); }
}
@media print {
    body, .app-page, .app-main, .inv-fullscreen { background: #fff !important; color: #000 !important; }
    .app-sidebar, .inv-toolbar, .inv-form, .app-mobile-header { display: none !important; }
    .inv-split { grid-template-columns: 1fr !important; }
    .inv-preview { border: none !important; background: #fff !important; padding: 0 !important; }
    .inv-preview-card { background: #fff !important; border: none !important; color: #000 !important; box-shadow: none !important; }
    .inv-preview-title, .inv-preview-value, .inv-grand-total { color: #000 !important; }
    .inv-preview-label, .inv-preview-small, .inv-preview-subtitle { color: #666 !important; }
    .inv-preview-table th { color: #333 !important; border-bottom-color: #ccc !important; }
    .inv-preview-table td { color: #333 !important; border-bottom-color: #eee !important; }
    .inv-preview-total-row { color: #333 !important; }
    .inv-preview-notes { border-top-color: #eee !important; }
}

/* ── My Orders / My Offers ── */

.myorder-card {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px; padding: 1.25rem; margin-bottom: 1rem;
}
.myorder-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 0.75rem;
}
.myorder-number { font-family: monospace; font-size: 0.8rem; font-weight: 600; }
.myorder-date { font-size: 0.78rem; color: rgba(255,255,255,0.35); margin-left: 0.75rem; }
.myorder-body { display: flex; gap: 1rem; align-items: center; }
.myorder-img { width: 72px; height: 72px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.myorder-info h3 { font-size: 1rem; font-weight: 600; margin: 0 0 0.15rem; }
.myorder-items { font-size: 0.78rem; color: rgba(255,255,255,0.35); margin: 0; }
.myorder-price { font-size: 1.1rem; font-weight: 700; margin-top: 0.25rem; }
.myorder-tracking {
    margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid rgba(255,255,255,0.04);
    font-size: 0.82rem;
}
.myorder-shipping { font-size: 0.78rem; color: rgba(255,255,255,0.4); margin-top: 0.4rem; }
.myorder-tracking-label { color: rgba(255,255,255,0.35); margin-right: 0.5rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.myorder-tracking-number { font-family: monospace; }

.myorder-timeline {
    display: flex; gap: 2rem; margin-top: 0.75rem; padding-top: 0.75rem;
    border-top: 1px solid rgba(255,255,255,0.04);
}
.myorder-step { display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; color: rgba(255,255,255,0.3); }
.myorder-step-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.15); }
.myorder-step.done .myorder-step-dot { background: #3fb950; }
.myorder-step.done { color: #3fb950; }

.myoffer-actions {
    display: flex; gap: 0.5rem; margin-top: 0.75rem; padding-top: 0.75rem;
    border-top: 1px solid rgba(255,255,255,0.04);
}

/* ── Artist Directory ── */

.artist-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem; padding: 0 3rem 4rem; max-width: 1200px; margin: 0 auto;
}
.artist-card {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px; padding: 1.5rem; text-decoration: none; color: inherit;
    transition: border-color 0.2s, transform 0.2s;
    display: flex; gap: 1rem; align-items: flex-start;
}
.artist-card:hover { border-color: rgba(0,168,255,0.2); transform: translateY(-2px); }
.artist-card-logo {
    width: 56px; height: 56px; border-radius: 10px; flex-shrink: 0;
    overflow: hidden; display: flex; align-items: center; justify-content: center;
    background: rgba(0,168,255,0.08);
}
.artist-card-logo img { width: 100%; height: 100%; object-fit: contain; }
.artist-card-initials { font-size: 1rem; font-weight: 700; color: #00a8ff; }
.artist-card-body { min-width: 0; }
.artist-card-body h3 { font-size: 1rem; font-weight: 600; margin: 0 0 0.25rem; }
.artist-card-loc { font-size: 0.75rem; color: rgba(255,255,255,0.35); margin: 0.15rem 0; }
.artist-card-meta { font-size: 0.72rem; color: rgba(255,255,255,0.3); display: flex; gap: 0.3rem; margin-top: 0.2rem; }
.artist-card-bio { font-size: 0.78rem; color: rgba(255,255,255,0.4); line-height: 1.5; margin-top: 0.4rem; }

@media (max-width: 1200px) { .artist-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .artist-grid { grid-template-columns: 1fr; padding: 0 1.5rem 3rem; } }

.pub-cart-btn { position: relative; }
.pub-cart-badge {
    position: absolute; top: -6px; right: -6px;
    background: #f85149; color: #fff; font-size: 0.6rem; font-weight: 700;
    min-width: 16px; height: 16px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 4px;
}

/* ── Shopping Cart ── */

.cart-items { margin-bottom: 2rem; }
.cart-item {
    display: flex; align-items: center; gap: 1rem; padding: 1rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.cart-item-img { width: 80px; height: 80px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.cart-item-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-info h3 { font-size: 0.95rem; font-weight: 600; margin: 0 0 0.2rem; }
.cart-item-brand { font-size: 0.78rem; color: #00a8ff; margin: 0; }
.cart-item-edition { font-size: 0.75rem; color: rgba(255,255,255,0.35); margin: 0; }
.cart-item-price { font-size: 1rem; font-weight: 700; white-space: nowrap; }
.cart-summary {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px; padding: 1.5rem;
}
.cart-total {
    display: flex; justify-content: space-between;
    font-size: 1.3rem; font-weight: 700;
}

/* ── Offer Form ── */

.aw-offer-form {
    margin-top: 0.75rem; padding: 1rem;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
}

/* ── Virtual Exhibit ── */

.vex-header {
    text-align: center; padding: 3rem 2rem 1.5rem;
    background: linear-gradient(180deg, rgba(0,168,255,0.05), transparent);
}
.vex-header h1 { font-size: 2.5rem; font-weight: 700; margin: 0; }
.vex-header p { color: rgba(255,255,255,0.4); font-size: 0.9rem; margin-top: 0.3rem; }
.vex-music-btn {
    margin-top: 0.75rem; padding: 0.35rem 1rem; border-radius: 6px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.5); font-size: 0.78rem; cursor: pointer;
}

.vex-gallery {
    display: flex; gap: 2rem; overflow-x: auto; padding: 2rem 3rem 3rem;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.vex-artwork {
    flex-shrink: 0; width: 320px; scroll-snap-align: center;
    cursor: pointer; transition: transform 0.2s;
}
.vex-artwork:hover { transform: scale(1.02); }
.vex-artwork.selected { transform: scale(1.02); }
.vex-frame {
    width: 100%; aspect-ratio: 3/4; border-radius: 4px; overflow: hidden;
    background: #1a1a2e;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 0 0 3px rgba(255,255,255,0.06);
}
.vex-frame img { width: 100%; height: 100%; object-fit: contain; background: #0d0d15; }
.vex-label { padding: 0.75rem 0; text-align: center; }
.vex-label-title { font-size: 0.85rem; font-weight: 600; }
.vex-label-artist { font-size: 0.75rem; color: rgba(255,255,255,0.4); }
.vex-award { font-size: 0.72rem; color: #e8833a; margin-top: 0.15rem; }

.vex-detail-overlay {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(0,0,0,0.85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    display: flex; align-items: center; justify-content: center;
    padding: 2rem;
}
.vex-detail {
    background: #161b22; border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px; max-width: 800px; width: 100%; overflow: hidden;
    display: grid; grid-template-columns: 1fr 1fr;
    position: relative;
}
.vex-close {
    position: absolute; top: 1rem; right: 1rem; z-index: 1;
    background: rgba(0,0,0,0.5); border: none; color: #fff;
    width: 32px; height: 32px; border-radius: 50%; font-size: 1.2rem;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.vex-detail-img { width: 100%; height: 100%; object-fit: contain; background: #0d0d15; }
.vex-detail-info { padding: 2rem; display: flex; flex-direction: column; justify-content: center; }
.vex-detail-info h2 { font-size: 1.5rem; font-weight: 700; margin: 0 0 0.3rem; }
.vex-detail-artist { color: rgba(255,255,255,0.5); font-size: 0.9rem; }
.vex-detail-medium { color: rgba(255,255,255,0.35); font-size: 0.82rem; margin-top: 0.2rem; }
.vex-detail-price { font-size: 1.3rem; font-weight: 700; margin-top: 1rem; }

.vex-stream-section {
    max-width: 800px; margin: 0 auto; padding: 2rem 3rem;
    text-align: center;
}
.vex-media { margin-top: 1rem; }
.vex-audio-player { display: none; }

/* ── Public Blog ── */

.pub-blog-controls {
    display: flex; gap: 1rem; align-items: center; justify-content: center;
    padding: 0 3rem 2rem; flex-wrap: wrap;
}

.pub-blog-featured {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    max-width: 1100px; margin: 0 auto 2rem;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit;
    transition: border-color 0.2s;
}
.pub-blog-featured:hover { border-color: rgba(0,168,255,0.2); }
.pub-blog-featured-img {
    width: 100%; height: 100%; min-height: 280px;
    background: linear-gradient(135deg, rgba(0,168,255,0.08), rgba(232,131,58,0.05));
    overflow: hidden;
}
.pub-blog-featured-img img { width: 100%; height: 100%; object-fit: cover; }
.pub-blog-featured-body {
    padding: 2.5rem; display: flex; flex-direction: column; justify-content: center;
}
.pub-blog-featured-body h2 { font-size: 1.8rem; font-weight: 700; margin: 0.5rem 0 0.75rem; line-height: 1.2; }
.pub-blog-featured-body p { color: rgba(255,255,255,0.45); font-size: 0.9rem; line-height: 1.7; }

.pub-blog-cat {
    font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
    color: #00a8ff; text-decoration: none;
}

.pub-blog-meta {
    display: flex; gap: 0.4rem; font-size: 0.78rem; color: rgba(255,255,255,0.3);
    margin-top: 0.75rem; flex-wrap: wrap;
}

.pub-blog-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem; padding: 0 3rem 4rem; max-width: 1400px; margin: 0 auto;
}
.pub-blog-pagination {
    display: flex; justify-content: center; gap: 0.5rem;
    padding: 0 3rem 4rem; max-width: 1400px; margin: 0 auto;
}
.pub-blog-page-btn {
    padding: 0.4rem 0.8rem; border-radius: 6px; font-size: 0.8rem; font-weight: 600;
    cursor: pointer; transition: all 0.15s; text-decoration: none; display: inline-block;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.5);
}
.pub-blog-page-btn:hover { border-color: rgba(0,168,255,0.3); color: #00a8ff; }
.pub-blog-page-btn.active { background: rgba(0,168,255,0.15); border-color: rgba(0,168,255,0.3); color: #00a8ff; }
.pub-blog-card {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit;
    transition: border-color 0.2s, transform 0.2s;
}
.pub-blog-card:hover { border-color: rgba(0,168,255,0.2); transform: translateY(-2px); }
.pub-blog-card-img {
    width: 100%; aspect-ratio: 16/9;
    background: linear-gradient(135deg, rgba(0,168,255,0.06), rgba(255,255,255,0.02));
    overflow: hidden;
}
.pub-blog-card-img img { width: 100%; height: 100%; object-fit: cover; }
.pub-blog-card-body { padding: 1.25rem; }
.pub-blog-card-body h3 { font-size: 1.05rem; font-weight: 600; margin: 0.4rem 0 0.5rem; line-height: 1.3; }
.pub-blog-card-body p { color: rgba(255,255,255,0.4); font-size: 0.82rem; line-height: 1.6; }

/* ── Blog Post Detail ── */

.pub-blogpost-hero {
    position: relative; width: 100%; max-height: 420px; overflow: hidden;
}
.pub-blogpost-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pub-blogpost-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(13,17,23,1) 0%, rgba(13,17,23,0) 60%);
}

.pub-blogpost {
    max-width: 720px; margin: 0 auto; padding: 2rem 2rem 4rem;
}
.pub-blogpost-header { text-align: center; margin-bottom: 2.5rem; }
.pub-blogpost-header h1 {
    font-size: 2.5rem; font-weight: 700; line-height: 1.15;
    letter-spacing: -0.02em; margin: 0.75rem 0 0;
}
.pub-blogpost-content {
    font-size: 1.05rem; line-height: 1.85; color: rgba(255,255,255,0.7);
}
.pub-blogpost-content strong { color: #e6edf3; }

.pub-blogpost-tags {
    display: flex; gap: 0.5rem; flex-wrap: wrap;
    margin-top: 2rem; padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.pub-blogpost-tag {
    font-size: 0.72rem; padding: 0.25rem 0.6rem;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px; color: rgba(255,255,255,0.4);
}
.pub-blogpost-nav {
    margin-top: 2rem; text-align: center;
}

/* Public responsive */
@media (max-width: 1200px) {
    .pub-blog-grid { grid-template-columns: repeat(3, 1fr); }
    .gal-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
    .pub-blog-grid { grid-template-columns: repeat(2, 1fr); }
    .pub-blog-featured { grid-template-columns: 1fr; }
    .gal-grid { grid-template-columns: repeat(2, 1fr); }
    .aw-layout { grid-template-columns: 1fr; }
    .bp-about { grid-template-columns: 1fr; }
    .bp-header { padding: 2rem 1.5rem; }
    .bp-section { padding: 1.5rem; }
}
@media (max-width: 768px) {
    .pub-nav { padding: 1rem 1.5rem; }
    .pub-nav-links { display: none; }
    .pub-hamburger { display: block; }
    .pub-hero h1 { font-size: 2.8rem; }
    .pub-metrics { grid-template-columns: repeat(2, 1fr); }
    .pub-glass-grid { grid-template-columns: 1fr; }
    .pub-split { grid-template-columns: 1fr; gap: 2rem; }
    .pub-pricing-grid { grid-template-columns: 1fr; }
    .pub-preview-row { flex-direction: column; align-items: center; }
    .pub-preview-card:nth-child(2), .pub-preview-card:nth-child(4) { transform: none; }
    .pub-footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .pub-section { padding: 3rem 1.5rem; }
    .pub-cta h2 { font-size: 2rem; }
    .pub-exhibit-controls { padding: 0 1.5rem 1.5rem; flex-direction: column; }
    .pub-exhibit-search { width: 100%; }
    .pub-exhibit-grid { grid-template-columns: 1fr; padding: 0 1.5rem 3rem; }
    .pubex-hero-content h1 { font-size: 1.8rem; }
    .pubex-hero-overlay { padding: 1.5rem; }
    .pubex-layout { grid-template-columns: 1fr; padding: 1.5rem; }
    .pub-blog-featured { grid-template-columns: 1fr; }
    .pub-blog-featured-body { padding: 1.5rem; }
    .pub-blog-featured-body h2 { font-size: 1.4rem; }
    .pub-blog-grid { grid-template-columns: 1fr; padding: 0 1.5rem 3rem; }
    .pub-blog-controls { padding: 0 1.5rem 1.5rem; }
    .pub-blogpost-header h1 { font-size: 1.8rem; }
    .pub-blog-pagination { padding: 0 1.5rem 3rem; }
    .gal-grid { grid-template-columns: repeat(2, 1fr); padding: 0 1.5rem 2rem; }
    .gal-filters { padding: 0 1.5rem 1.5rem; flex-direction: column; }
    .aw-layout { padding: 1.5rem; }
    .aw-details h1 { font-size: 1.4rem; }
    .bp-header-content { flex-direction: column; align-items: flex-start; }
}

/* Flatpickr dark theme overrides */
.flatpickr-calendar {
    background: #0d1117 !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5) !important;
    font-family: inherit !important;
}
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months {
    background: #0d1117 !important;
    color: var(--text-primary) !important;
}
.flatpickr-current-month input.cur-year { color: var(--text-primary) !important; }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month {
    fill: var(--text-primary) !important;
    color: var(--text-primary) !important;
}
.flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover {
    fill: var(--accent) !important;
}
span.flatpickr-weekday { color: rgba(255,255,255,0.4) !important; font-size: 0.72rem !important; }
.flatpickr-day {
    color: var(--text-primary) !important;
    border-radius: 6px !important;
}
.flatpickr-day:hover { background: rgba(var(--accent-rgb),0.15) !important; border-color: transparent !important; }
.flatpickr-day.selected, .flatpickr-day.selected:hover {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}
.flatpickr-day.today { border-color: var(--accent) !important; }
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: rgba(255,255,255,0.2) !important; }
.flatpickr-time { border-top: 1px solid rgba(255,255,255,0.08) !important; }
.flatpickr-time input, .flatpickr-time .flatpickr-am-pm {
    color: var(--text-primary) !important;
    background: transparent !important;
}
.flatpickr-time input:hover, .flatpickr-time .flatpickr-am-pm:hover {
    background: rgba(var(--accent-rgb),0.1) !important;
}
.numInputWrapper span { border-color: rgba(255,255,255,0.08) !important; }
.numInputWrapper span:hover { background: rgba(var(--accent-rgb),0.15) !important; }
.numInputWrapper span svg path { fill: rgba(255,255,255,0.5) !important; }
.flatpickr-innerContainer { border-bottom: none !important; }

/* ============================================================
   MOBILE POLISH — global fixes for touch targets and overflow
   ============================================================ */

@media (max-width: 768px) {
    /* Prevent iOS auto-zoom on form focus */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="date"],
    input[type="datetime-local"],
    select,
    textarea,
    .form-input { font-size: 16px !important; }

    /* Touch targets — buttons and toggles minimum 40px */
    button:not(.modal-close):not(.app-hamburger):not(.pub-hamburger):not(.app-search-result),
    .btn,
    .dash-btn-primary,
    .settings-btn-primary,
    .pub-nav-cta { min-height: 40px; }

    /* Modal panels — ensure inline-styled modal panels fit mobile */
    [style*="background:rgba(0,0,0,0.85)"] > div,
    [style*="background:rgba(0,0,0,.85)"] > div {
        max-width: calc(100vw - 1.5rem) !important;
        max-height: calc(100vh - 1.5rem) !important;
        width: 100% !important;
        margin: 0.75rem !important;
        overflow-y: auto !important;
    }

    /* Any raw table inside admin pages gets a horizontal scroll wrapper feel */
    table:not(.cal-grid) {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    /* Page headers with action buttons — wrap & stack */
    .dash-header,
    .art-header,
    .settings-header,
    .admin-header,
    .crm-header { flex-wrap: wrap; gap: 0.75rem; }
    .dash-header > *,
    .art-header > * { min-width: 0; }

    /* Tab strips become horizontally scrollable */
    .artd-tabs,
    .admin-tabs,
    .nav-tabs,
    .tab-strip {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        white-space: nowrap;
        scrollbar-width: thin;
    }
    .artd-tabs::-webkit-scrollbar,
    .admin-tabs::-webkit-scrollbar { height: 3px; }

    /* Generic stat grid collapse */
    .dash-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 0.6rem !important; }
    .dash-stat-card { padding: 0.85rem !important; }
    .dash-stat-value { font-size: 1.25rem !important; }

    /* Settings: switch to single column */
    .settings-grid { grid-template-columns: 1fr !important; gap: 1rem !important; }

    /* Sidebar takes full width when open on small phones */
    .app-sidebar { width: min(280px, 85vw); }
    .app-main { padding: 1rem 0.85rem !important; }

    /* Toast notifications — full-width safer placement */
    .toast-container { left: 0.75rem !important; right: 0.75rem !important; bottom: 0.75rem !important; max-width: none !important; }

    /* Calendars (FullCalendar / cal-grid) */
    .cal-day { min-height: 56px !important; padding: 0.25rem !important; }
    .cal-day-num { font-size: 0.7rem !important; }
    .cal-event { font-size: 0.55rem !important; padding: 0.1rem 0.25rem !important; }

    /* Modal footer buttons — full width stack */
    .modal-footer { flex-direction: column-reverse; align-items: stretch; }
    .modal-footer > button { width: 100%; }

    /* Help center / Public hero spacing */
    .help-hero h1, .help-section h2 { font-size: 1.4rem !important; }

    /* Avoid horizontal page scroll */
    body, html, .app-page, .app-main { overflow-x: hidden; }
}

/* Extra-small phones */
@media (max-width: 420px) {
    .app-main { padding: 0.85rem 0.6rem !important; }
    .modal-content,
    [style*="background:rgba(0,0,0,0.85)"] > div { border-radius: 10px !important; }
    .billing-tiers { grid-template-columns: 1fr !important; }
    .pub-nav { padding: 0.85rem 1rem !important; }
}
/* Auto-generated light-theme overrides. For every CSS rule that uses
   literal rgba(255,255,255, X) for color / background / border-color,
   this restates the same shape against black so the dark-mode styles
   don't need to be rewritten. Re-run scripts/gen-light-overrides.py
   to refresh after changes. !important wins over inline-styled rules
   that hard-code colors in components. */
[data-theme="light"] /* Global toggle switch for all checkboxes */ input[type="checkbox"] { background: rgba(0,0,0,0.1) !important; }
[data-theme="light"] input[type="checkbox"]::after { background: rgba(0,0,0,0.4) !important; }
[data-theme="light"] .login-card { background: rgba(0,0,0,0.05) !important; border-color: rgba(0,0,0,0.1) !important; }
[data-theme="light"] .form-group label { color: rgba(0,0,0,0.7) !important; }
[data-theme="light"] .form-input { background: rgba(0,0,0,0.08) !important; border-color: rgba(0,0,0,0.15) !important; }
[data-theme="light"] .form-input::placeholder { color: rgba(0,0,0,0.3) !important; }
[data-theme="light"] .form-input:focus { background: rgba(0,0,0,0.12) !important; }
[data-theme="light"] .login-subtitle { color: rgba(0,0,0,0.5) !important; }
[data-theme="light"] .login-footer a { color: rgba(0,0,0,0.5) !important; }
[data-theme="light"] .login-footer .divider { color: rgba(0,0,0,0.2) !important; }
[data-theme="light"] .login-tagline { color: rgba(0,0,0,0.35) !important; }
[data-theme="light"] .app-nav-items::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.08) !important; }
[data-theme="light"] .app-nav-items::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.15) !important; }
[data-theme="light"] .app-nav-flyout { border-color: rgba(0,0,0,0.08) !important; }
[data-theme="light"] .app-nav-flyout-item { color: rgba(0,0,0,0.5) !important; }
[data-theme="light"] /* Profile photo in settings */ .profile-photo-section { border-color: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .mkt-xp { color: rgba(0,0,0,0.4) !important; }
[data-theme="light"] .mkt-score-label { color: rgba(0,0,0,0.3) !important; }
[data-theme="light"] .mkt-score-bar { color: rgba(0,0,0,0.5) !important; }
[data-theme="light"] .mkt-bar { background: rgba(0,0,0,0.06) !important; }
[data-theme="light"] /* Action cards */ .mkt-action-card { background: rgba(0,0,0,0.02) !important; border-color: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .confirm-dialog { border-color: rgba(0,0,0,0.1) !important; }
[data-theme="light"] .confirm-body p { color: rgba(0,0,0,0.8) !important; }
[data-theme="light"] .confirm-actions { border-color: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .mkt-feed-title { color: rgba(0,0,0,0.8) !important; }
[data-theme="light"] .mkt-feed-time { color: rgba(0,0,0,0.25) !important; }
[data-theme="light"] /* Quick cards */ .mkt-quick-card { background: rgba(0,0,0,0.02) !important; border-color: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .mkt-quick-card span { color: rgba(0,0,0,0.35) !important; }
[data-theme="light"] .mkt-content-card { background: rgba(0,0,0,0.02) !important; border-color: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .mkt-content-body { color: rgba(0,0,0,0.7) !important; }
[data-theme="light"] .mkt-content-actions { border-color: rgba(0,0,0,0.04) !important; }
[data-theme="light"] .mkt-playbook-card { background: rgba(0,0,0,0.02) !important; border-color: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .mkt-playbook-card p { color: rgba(0,0,0,0.5) !important; }
[data-theme="light"] .mkt-playbook-meta { color: rgba(0,0,0,0.35) !important; }
[data-theme="light"] /* Playbook steps */ .mkt-step { border-color: rgba(0,0,0,0.04) !important; }
[data-theme="light"] .mkt-step-num { color: rgba(0,0,0,0.3) !important; background: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .mkt-achievement { background: rgba(0,0,0,0.02) !important; border-color: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .mkt-achievement p { color: rgba(0,0,0,0.4) !important; }
[data-theme="light"] /* Campaign Calendar */ .cal-grid { border-color: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .cal-header { color: rgba(0,0,0,0.4) !important; background: rgba(0,0,0,0.02) !important; border-color: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .cal-day { border-color: rgba(0,0,0,0.04) !important; }
[data-theme="light"] .cal-day-num { color: rgba(0,0,0,0.5) !important; }
[data-theme="light"] .cal-event { color: rgba(0,0,0,0.7) !important; background: rgba(0,0,0,0.03) !important; }
[data-theme="light"] .cal-event:hover { background: rgba(0,0,0,0.08) !important; }
[data-theme="light"] .cal-more { color: rgba(0,0,0,0.3) !important; }
[data-theme="light"] .billing-tier { background: rgba(0,0,0,0.03) !important; border-color: rgba(0,0,0,0.08) !important; }
[data-theme="light"] .billing-tier-period { color: rgba(0,0,0,0.4) !important; }
[data-theme="light"] .billing-tier-features { color: rgba(0,0,0,0.4) !important; }
[data-theme="light"] .app-search-input { background: rgba(0,0,0,0.04) !important; border-color: rgba(0,0,0,0.08) !important; }
[data-theme="light"] .app-search-input::placeholder { color: rgba(0,0,0,0.25) !important; }
[data-theme="light"] .app-search-result { border-color: rgba(0,0,0,0.03) !important; }
[data-theme="light"] .app-search-result:hover { background: rgba(0,0,0,0.04) !important; }
[data-theme="light"] .notif-item { border-color: rgba(0,0,0,0.03) !important; }
[data-theme="light"] .notif-item:hover { background: rgba(0,0,0,0.03) !important; }
[data-theme="light"] .notif-item-body { color: rgba(0,0,0,0.4) !important; }
[data-theme="light"] .notif-item-time { color: rgba(0,0,0,0.25) !important; }
[data-theme="light"] .app-user-btn { border-color: rgba(0,0,0,0.08) !important; }
[data-theme="light"] .app-user-btn:hover { background: rgba(0,0,0,0.07) !important; border-color: rgba(0,0,0,0.15) !important; }
[data-theme="light"] .dropup-chevron { color: rgba(0,0,0,0.3) !important; }
[data-theme="light"] .dropup-menu { border-color: rgba(0,0,0,0.1) !important; }
[data-theme="light"] .dropup-item { color: rgba(0,0,0,0.7) !important; }
[data-theme="light"] .dash-quick-action { background: rgba(0,0,0,0.02) !important; border-color: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .dash-activity-row { border-color: rgba(0,0,0,0.04) !important; }
[data-theme="light"] .dash-activity-date { color: rgba(0,0,0,0.3) !important; }
[data-theme="light"] .dash-activity-meta { color: rgba(0,0,0,0.35) !important; }
[data-theme="light"] .settings-field label { color: rgba(0,0,0,0.6) !important; }
[data-theme="light"] .settings-label { color: rgba(0,0,0,0.5) !important; }
[data-theme="light"] .settings-value { color: rgba(0,0,0,0.8) !important; }
[data-theme="light"] .settings-badge.ai-off { color: rgba(0,0,0,0.3) !important; }
[data-theme="light"] .admin-cell-subtext { color: rgba(0,0,0,0.3) !important; }
[data-theme="light"] .admin-inline-select { color: rgba(0,0,0,0.7) !important; border-color: rgba(0,0,0,0.1) !important; }
[data-theme="light"] .admin-count { color: rgba(0,0,0,0.4) !important; }
[data-theme="light"] .admin-table th { border-color: rgba(0,0,0,0.08) !important; }
[data-theme="light"] .admin-table td { color: rgba(0,0,0,0.7) !important; border-color: rgba(0,0,0,0.04) !important; }
[data-theme="light"] .admin-mgmt-body p { color: rgba(0,0,0,0.4) !important; }
[data-theme="light"] .admin-mgmt-arrow { color: rgba(0,0,0,0.15) !important; }
[data-theme="light"] .psettings-field label { color: rgba(0,0,0,0.5) !important; }
[data-theme="light"] .psettings-field input, [data-theme="light"] .psettings-field select, [data-theme="light"] .psettings-field textarea { background: rgba(0,0,0,0.04) !important; border-color: rgba(0,0,0,0.08) !important; }
[data-theme="light"] .psettings-hint { color: rgba(0,0,0,0.25) !important; }
[data-theme="light"] .psettings-saved-at { color: rgba(0,0,0,0.3) !important; }
[data-theme="light"] /* ===== Blog Upload Zone ===== */ .blog-upload-zone { background: rgba(0,0,0,0.02) !important; border-color: rgba(0,0,0,0.12) !important; }
[data-theme="light"] .blog-upload-placeholder { color: rgba(0,0,0,0.35) !important; }
[data-theme="light"] .admin-email-meta { color: rgba(0,0,0,0.35) !important; }
[data-theme="light"] .admin-email-meta strong { color: rgba(0,0,0,0.55) !important; }
[data-theme="light"] .admin-email-preview { background: rgba(0,0,0,0.03) !important; border-color: rgba(0,0,0,0.05) !important; }
[data-theme="light"] .admin-email-preview-label { color: rgba(0,0,0,0.3) !important; }
[data-theme="light"] .admin-email-preview-val { color: rgba(0,0,0,0.6) !important; }
[data-theme="light"] .mysub-stat-label { color: rgba(0,0,0,0.35) !important; }
[data-theme="light"] .mysub-status.cancelled { color: rgba(0,0,0,0.4) !important; background: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .mysub-date { color: rgba(0,0,0,0.35) !important; }
[data-theme="light"] .mysub-entry-summary { color: rgba(0,0,0,0.4) !important; }
[data-theme="light"] .mysub-entries { border-color: rgba(0,0,0,0.04) !important; }
[data-theme="light"] .mysub-entry-title { color: rgba(0,0,0,0.6) !important; }
[data-theme="light"] .submit-artwork-card { background: rgba(0,0,0,0.03) !important; border-color: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .submit-artwork-card:hover { border-color: rgba(0,0,0,0.15) !important; }
[data-theme="light"] .submit-artwork-meta { color: rgba(0,0,0,0.35) !important; }
[data-theme="light"] .submit-summary-row { color: rgba(0,0,0,0.5) !important; border-color: rgba(0,0,0,0.04) !important; }
[data-theme="light"] .art-subtitle { color: rgba(0,0,0,0.4) !important; }
[data-theme="light"] /* Opt out of the global toggle-pill styling — we want a square checkbox on the thumbnail, [data-theme="light"] not a sliding knob that escapes the card. */ .art-card-select input[type="checkbox"] { border-color: rgba(0,0,0,0.9) !important; }
[data-theme="light"] .art-upload-zone { border-color: rgba(0,0,0,0.1) !important; }
[data-theme="light"] .art-upload-placeholder { color: rgba(0,0,0,0.35) !important; }
[data-theme="light"] .art-upload-hint { color: rgba(0,0,0,0.25) !important; }
[data-theme="light"] .art-empty-icon { color: rgba(0,0,0,0.1) !important; }
[data-theme="light"] .art-empty p { color: rgba(0,0,0,0.4) !important; }
[data-theme="light"] .art-card-image { background: rgba(0,0,0,0.02) !important; }
[data-theme="light"] .art-card-placeholder { color: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .art-badge.draft { color: rgba(0,0,0,0.6) !important; background: rgba(0,0,0,0.15) !important; }
[data-theme="light"] .art-badge.archived { color: rgba(0,0,0,0.35) !important; }
[data-theme="light"] /* Exhibition banner upload */ .exh-banner-zone { border-color: rgba(0,0,0,0.15) !important; }
[data-theme="light"] .art-image-count { color: rgba(0,0,0,0.8) !important; }
[data-theme="light"] .art-card-meta { color: rgba(0,0,0,0.4) !important; }
[data-theme="light"] .folio-preview { background: rgba(0,0,0,0.02) !important; }
[data-theme="light"] .folio-empty-preview { color: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .folio-private { color: rgba(0,0,0,0.35) !important; }
[data-theme="light"] .folio-picker-title { color: rgba(0,0,0,0.6) !important; }
[data-theme="light"] .folio-toggle-name { color: rgba(0,0,0,0.7) !important; }
[data-theme="light"] .artd-label-row { color: rgba(0,0,0,0.7) !important; }
[data-theme="light"] .artd-breadcrumb span { color: rgba(0,0,0,0.3) !important; }
[data-theme="light"] .artd-btn-outline { color: rgba(0,0,0,0.6) !important; background: rgba(0,0,0,0.04) !important; border-color: rgba(0,0,0,0.12) !important; }
[data-theme="light"] .artd-btn-outline:hover { color: rgba(0,0,0,0.8) !important; background: rgba(0,0,0,0.08) !important; border-color: rgba(0,0,0,0.2) !important; }
[data-theme="light"] /* Tabs */ .artd-tabs { border-color: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .artd-tab:hover { color: rgba(0,0,0,0.7) !important; }
[data-theme="light"] .artd-checkbox { color: rgba(0,0,0,0.7) !important; }
[data-theme="light"] .artd-img-btn { color: rgba(0,0,0,0.6) !important; }
[data-theme="light"] .artd-image-add { border-color: rgba(0,0,0,0.08) !important; }
[data-theme="light"] .artd-edition-qty { color: rgba(0,0,0,0.5) !important; }
[data-theme="light"] .artd-edition-serial { color: rgba(0,0,0,0.25) !important; }
[data-theme="light"] .push-history-item { background: rgba(0,0,0,0.02) !important; border-color: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .provenance-event { border-color: rgba(0,0,0,0.08) !important; }
[data-theme="light"] .provenance-dot { background: rgba(0,0,0,0.15) !important; border-color: rgba(0,0,0,0.2) !important; }
[data-theme="light"] /* Developer Portal */ .dev-pre { color: rgba(0,0,0,0.6) !important; background: rgba(0,0,0,0.03) !important; border-color: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .dev-code { background: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .dev-step { border-color: rgba(0,0,0,0.04) !important; }
[data-theme="light"] .dev-step-desc { color: rgba(0,0,0,0.5) !important; }
[data-theme="light"] .msg-convo-list::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .msg-convo-item { border-color: rgba(0,0,0,0.03) !important; }
[data-theme="light"] .msg-convo-item:hover { background: rgba(0,0,0,0.03) !important; }
[data-theme="light"] .msg-convo-preview { color: rgba(0,0,0,0.35) !important; }
[data-theme="light"] .msg-convo-time { color: rgba(0,0,0,0.25) !important; }
[data-theme="light"] .msg-avatar { background: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .msg-avatar-sm { background: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .msg-messages::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .msg-bubble.received { background: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .msg-bubble-context { color: rgba(0,0,0,0.3) !important; }
[data-theme="light"] .msg-bubble-time { color: rgba(0,0,0,0.2) !important; }
[data-theme="light"] .msg-empty { color: rgba(0,0,0,0.3) !important; }
[data-theme="light"] .msg-person-result:hover { background: rgba(0,0,0,0.05) !important; }
[data-theme="light"] .appear-panel { border-color: rgba(0,0,0,0.08) !important; }
[data-theme="light"] .appear-label { color: rgba(0,0,0,0.5) !important; }
[data-theme="light"] .appear-option { color: rgba(0,0,0,0.6) !important; border-color: rgba(0,0,0,0.08) !important; }
[data-theme="light"] .appear-option:hover { border-color: rgba(0,0,0,0.15) !important; }
[data-theme="light"] .appear-note { color: rgba(0,0,0,0.25) !important; }
[data-theme="light"] .toast-item { border-color: rgba(0,0,0,0.08) !important; }
[data-theme="light"] .toast-message { color: rgba(0,0,0,0.85) !important; }
[data-theme="light"] .toast-close { color: rgba(0,0,0,0.3) !important; }
[data-theme="light"] .toast-close:hover { color: rgba(0,0,0,0.7) !important; }
[data-theme="light"] .loading-progress-text { color: rgba(0,0,0,0.35) !important; }
[data-theme="light"] .app-sidebar { border-color: rgba(0,0,0,0.08) !important; }
[data-theme="light"] /* Public Nav */ .pub-nav { border-color: rgba(0,0,0,0.04) !important; }
[data-theme="light"] .pub-nav-links a { color: rgba(0,0,0,0.45) !important; }
[data-theme="light"] .pub-mobile-menu { border-color: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .pub-mobile-menu a { color: rgba(0,0,0,0.6) !important; border-color: rgba(0,0,0,0.04) !important; }
[data-theme="light"] .pub-hero p { color: rgba(0,0,0,0.45) !important; }
[data-theme="light"] .pub-btn-glass { color: rgba(0,0,0,0.6) !important; background: rgba(0,0,0,0.04) !important; border-color: rgba(0,0,0,0.12) !important; }
[data-theme="light"] .pub-btn-glass:hover { color: rgba(0,0,0,0.8) !important; background: rgba(0,0,0,0.08) !important; border-color: rgba(0,0,0,0.2) !important; }
[data-theme="light"] /* Metrics bar */ .pub-metrics { border-color: rgba(0,0,0,0.04) !important; }
[data-theme="light"] .pub-metric { border-color: rgba(0,0,0,0.04) !important; }
[data-theme="light"] .pub-metric-label { color: rgba(0,0,0,0.3) !important; }
[data-theme="light"] .pub-section > p { color: rgba(0,0,0,0.4) !important; }
[data-theme="light"] .pub-glass-card { background: rgba(0,0,0,0.03) !important; border-color: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .pub-glass-card p { color: rgba(0,0,0,0.4) !important; }
[data-theme="light"] .pub-timeline-item p { color: rgba(0,0,0,0.4) !important; }
[data-theme="light"] .pub-preview-card { background: rgba(0,0,0,0.03) !important; border-color: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .pub-preview-meta { color: rgba(0,0,0,0.35) !important; }
[data-theme="light"] .pub-cta p { color: rgba(0,0,0,0.4) !important; }
[data-theme="light"] .pub-split-visual { color: rgba(0,0,0,0.06) !important; background: rgba(0,0,0,0.03) !important; border-color: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .pub-split p { color: rgba(0,0,0,0.4) !important; }
[data-theme="light"] .pub-split-list li { color: rgba(0,0,0,0.5) !important; border-color: rgba(0,0,0,0.04) !important; }
[data-theme="light"] .pub-price-card { background: rgba(0,0,0,0.03) !important; border-color: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .pub-price-amount span { color: rgba(0,0,0,0.35) !important; }
[data-theme="light"] .pub-price-desc { color: rgba(0,0,0,0.4) !important; }
[data-theme="light"] .pub-price-features li { color: rgba(0,0,0,0.5) !important; border-color: rgba(0,0,0,0.04) !important; }
[data-theme="light"] /* Divider */ .pub-divider { border-color: rgba(0,0,0,0.04) !important; }
[data-theme="light"] .pub-content p { color: rgba(0,0,0,0.5) !important; }
[data-theme="light"] .pub-content ul { color: rgba(0,0,0,0.5) !important; }
[data-theme="light"] /* Footer */ .pub-footer { border-color: rgba(0,0,0,0.04) !important; }
[data-theme="light"] .pub-footer-brand p { color: rgba(0,0,0,0.35) !important; }
[data-theme="light"] .pub-footer-social a { color: rgba(0,0,0,0.3) !important; background: rgba(0,0,0,0.04) !important; }
[data-theme="light"] .pub-footer-col h4 { color: rgba(0,0,0,0.5) !important; }
[data-theme="light"] .pub-footer-col a { color: rgba(0,0,0,0.35) !important; }
[data-theme="light"] .pub-footer-bottom { color: rgba(0,0,0,0.2) !important; border-color: rgba(0,0,0,0.04) !important; }
[data-theme="light"] .pub-exhibit-search { background: rgba(0,0,0,0.04) !important; border-color: rgba(0,0,0,0.08) !important; }
[data-theme="light"] .pub-exhibit-search::placeholder { color: rgba(0,0,0,0.25) !important; }
[data-theme="light"] .pub-exhibit-filters select { background: rgba(0,0,0,0.04) !important; border-color: rgba(0,0,0,0.08) !important; }
[data-theme="light"] .pub-exhibit-toggle { color: rgba(0,0,0,0.45) !important; }
[data-theme="light"] .pub-exhibit-card { background: rgba(0,0,0,0.03) !important; border-color: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .pub-exhibit-badge.closed { color: rgba(0,0,0,0.4) !important; background: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .pub-exhibit-org { color: rgba(0,0,0,0.4) !important; }
[data-theme="light"] .pub-exhibit-loc { color: rgba(0,0,0,0.3) !important; }
[data-theme="light"] .pub-exhibit-meta { color: rgba(0,0,0,0.35) !important; }
[data-theme="light"] .pub-exhibit-footer { color: rgba(0,0,0,0.35) !important; border-color: rgba(0,0,0,0.04) !important; }
[data-theme="light"] .pubex-hero-org { color: rgba(0,0,0,0.45) !important; }
[data-theme="light"] .pubex-card { background: rgba(0,0,0,0.03) !important; border-color: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .pubex-description { color: rgba(0,0,0,0.7) !important; }
[data-theme="light"] .pubex-cta-card p { color: rgba(0,0,0,0.45) !important; }
[data-theme="light"] .pubex-detail-row { border-color: rgba(0,0,0,0.04) !important; }
[data-theme="light"] .pubex-detail-label { color: rgba(0,0,0,0.35) !important; }
[data-theme="light"] .pubex-detail-row span:last-child { color: rgba(0,0,0,0.7) !important; }
[data-theme="light"] .pubex-gallery-item { background: rgba(0,0,0,0.02) !important; border-color: rgba(0,0,0,0.05) !important; }
[data-theme="light"] .pubex-gallery-artist { color: rgba(0,0,0,0.4) !important; }
[data-theme="light"] .pubex-gallery-medium { color: rgba(0,0,0,0.3) !important; }
[data-theme="light"] .gal-filter-select { background: rgba(0,0,0,0.04) !important; border-color: rgba(0,0,0,0.08) !important; }
[data-theme="light"] .gal-card { background: rgba(0,0,0,0.03) !important; border-color: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .gal-card-meta { color: rgba(0,0,0,0.3) !important; }
[data-theme="light"] /* ── Brand Profile ── */ .bp-header { border-color: rgba(0,0,0,0.04) !important; }
[data-theme="light"] .bp-header-meta { color: rgba(0,0,0,0.4) !important; }
[data-theme="light"] .bp-about-section h3 { color: rgba(0,0,0,0.5) !important; }
[data-theme="light"] .bp-collection-chip { color: rgba(0,0,0,0.5) !important; background: rgba(0,0,0,0.04) !important; border-color: rgba(0,0,0,0.08) !important; }
[data-theme="light"] .bp-collection-count { color: rgba(0,0,0,0.3) !important; }
[data-theme="light"] .aw-main-image { background: rgba(0,0,0,0.02) !important; border-color: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .aw-meta { color: rgba(0,0,0,0.4) !important; }
[data-theme="light"] .aw-dimensions { color: rgba(0,0,0,0.35) !important; }
[data-theme="light"] .aw-price.inquire { color: rgba(0,0,0,0.5) !important; }
[data-theme="light"] .aw-editions h4 { color: rgba(0,0,0,0.5) !important; }
[data-theme="light"] .aw-edition-row { color: rgba(0,0,0,0.5) !important; border-color: rgba(0,0,0,0.04) !important; }
[data-theme="light"] .aw-edition-row:hover { background: rgba(0,0,0,0.03) !important; }
[data-theme="light"] .aw-option-row { color: rgba(0,0,0,0.45) !important; }
[data-theme="light"] .aw-option-row:hover { background: rgba(0,0,0,0.03) !important; }
[data-theme="light"] .aw-section { border-color: rgba(0,0,0,0.04) !important; }
[data-theme="light"] .aw-section h4 { color: rgba(0,0,0,0.5) !important; }
[data-theme="light"] .aw-award span { color: rgba(0,0,0,0.4) !important; }
[data-theme="light"] .aw-views { color: rgba(0,0,0,0.2) !important; }
[data-theme="light"] .inv-section { border-color: rgba(0,0,0,0.04) !important; }
[data-theme="light"] .inv-section h3 { color: rgba(0,0,0,0.4) !important; }
[data-theme="light"] .inv-contact-select { background: rgba(0,0,0,0.04) !important; border-color: rgba(0,0,0,0.08) !important; }
[data-theme="light"] .inv-items-header { color: rgba(0,0,0,0.3) !important; }
[data-theme="light"] .inv-item-row select, [data-theme="light"] .inv-item-row input { background: rgba(0,0,0,0.04) !important; border-color: rgba(0,0,0,0.08) !important; }
[data-theme="light"] .inv-line-card { background: rgba(0,0,0,0.02) !important; border-color: rgba(0,0,0,0.05) !important; }
[data-theme="light"] .inv-add-item { color: rgba(0,0,0,0.35) !important; border-color: rgba(0,0,0,0.1) !important; }
[data-theme="light"] /* Invoice Preview */ .inv-preview { background: rgba(0,0,0,0.02) !important; }
[data-theme="light"] .inv-preview-card { background: rgba(0,0,0,0.03) !important; border-color: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .inv-preview-title { color: rgba(0,0,0,0.15) !important; }
[data-theme="light"] .inv-preview-subtitle { color: rgba(0,0,0,0.35) !important; }
[data-theme="light"] .inv-preview-dates { border-color: rgba(0,0,0,0.04) !important; }
[data-theme="light"] .inv-preview-label { color: rgba(0,0,0,0.3) !important; }
[data-theme="light"] .inv-preview-small { color: rgba(0,0,0,0.4) !important; }
[data-theme="light"] .inv-preview-table th { color: rgba(0,0,0,0.3) !important; border-color: rgba(0,0,0,0.08) !important; }
[data-theme="light"] .inv-preview-table td { color: rgba(0,0,0,0.6) !important; border-color: rgba(0,0,0,0.04) !important; }
[data-theme="light"] .inv-preview-total-row { color: rgba(0,0,0,0.5) !important; }
[data-theme="light"] .inv-grand-total { border-color: rgba(0,0,0,0.08) !important; }
[data-theme="light"] .inv-preview-notes { border-color: rgba(0,0,0,0.04) !important; }
[data-theme="light"] /* ── My Orders / My Offers ── */ .myorder-card { background: rgba(0,0,0,0.03) !important; border-color: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .myorder-date { color: rgba(0,0,0,0.35) !important; }
[data-theme="light"] .myorder-items { color: rgba(0,0,0,0.35) !important; }
[data-theme="light"] .myorder-tracking { border-color: rgba(0,0,0,0.04) !important; }
[data-theme="light"] .myorder-shipping { color: rgba(0,0,0,0.4) !important; }
[data-theme="light"] .myorder-tracking-label { color: rgba(0,0,0,0.35) !important; }
[data-theme="light"] .myorder-timeline { border-color: rgba(0,0,0,0.04) !important; }
[data-theme="light"] .myorder-step { color: rgba(0,0,0,0.3) !important; }
[data-theme="light"] .myorder-step-dot { background: rgba(0,0,0,0.15) !important; }
[data-theme="light"] .myoffer-actions { border-color: rgba(0,0,0,0.04) !important; }
[data-theme="light"] .artist-card { background: rgba(0,0,0,0.03) !important; border-color: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .artist-card-loc { color: rgba(0,0,0,0.35) !important; }
[data-theme="light"] .artist-card-meta { color: rgba(0,0,0,0.3) !important; }
[data-theme="light"] .artist-card-bio { color: rgba(0,0,0,0.4) !important; }
[data-theme="light"] .cart-item { border-color: rgba(0,0,0,0.04) !important; }
[data-theme="light"] .cart-item-edition { color: rgba(0,0,0,0.35) !important; }
[data-theme="light"] .cart-summary { background: rgba(0,0,0,0.03) !important; border-color: rgba(0,0,0,0.06) !important; }
[data-theme="light"] /* ── Offer Form ── */ .aw-offer-form { background: rgba(0,0,0,0.03) !important; border-color: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .vex-header p { color: rgba(0,0,0,0.4) !important; }
[data-theme="light"] .vex-music-btn { color: rgba(0,0,0,0.5) !important; background: rgba(0,0,0,0.04) !important; border-color: rgba(0,0,0,0.08) !important; }
[data-theme="light"] .vex-label-artist { color: rgba(0,0,0,0.4) !important; }
[data-theme="light"] .vex-detail { border-color: rgba(0,0,0,0.08) !important; }
[data-theme="light"] .vex-detail-artist { color: rgba(0,0,0,0.5) !important; }
[data-theme="light"] .vex-detail-medium { color: rgba(0,0,0,0.35) !important; }
[data-theme="light"] .pub-blog-featured { background: rgba(0,0,0,0.03) !important; border-color: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .pub-blog-featured-body p { color: rgba(0,0,0,0.45) !important; }
[data-theme="light"] .pub-blog-meta { color: rgba(0,0,0,0.3) !important; }
[data-theme="light"] .pub-blog-page-btn { color: rgba(0,0,0,0.5) !important; background: rgba(0,0,0,0.04) !important; border-color: rgba(0,0,0,0.08) !important; }
[data-theme="light"] .pub-blog-card { background: rgba(0,0,0,0.03) !important; border-color: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .pub-blog-card-body p { color: rgba(0,0,0,0.4) !important; }
[data-theme="light"] .pub-blogpost-content { color: rgba(0,0,0,0.7) !important; }
[data-theme="light"] .pub-blogpost-tags { border-color: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .pub-blogpost-tag { color: rgba(0,0,0,0.4) !important; background: rgba(0,0,0,0.04) !important; border-color: rgba(0,0,0,0.08) !important; }
[data-theme="light"] /* Flatpickr dark theme overrides */ .flatpickr-calendar { border-color: rgba(0,0,0,0.1) !important; }
[data-theme="light"] span.flatpickr-weekday { color: rgba(0,0,0,0.4) !important; }
[data-theme="light"] .flatpickr-day.prevMonthDay, [data-theme="light"] .flatpickr-day.nextMonthDay { color: rgba(0,0,0,0.2) !important; }
[data-theme="light"] .flatpickr-time { border-color: rgba(0,0,0,0.08) !important; }
[data-theme="light"] .numInputWrapper span { border-color: rgba(0,0,0,0.08) !important; }

/* Provenance timeline */
.provenance-timeline { list-style: none; padding: 0; margin: 0; }
.provenance-event {
    display: grid; grid-template-columns: 140px 1fr; gap: 1.5rem;
    padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.provenance-event:last-child { border-bottom: none; }
.provenance-event-date { color: rgba(255,255,255,0.5); font-size: 0.85rem; }
.provenance-event-title { font-weight: 600; }
.provenance-event-detail { color: rgba(255,255,255,0.6); font-size: 0.9rem; margin-top: 0.2rem; }
.provenance-event-party { color: rgba(255,255,255,0.5); font-size: 0.85rem; margin-top: 0.2rem; }
.provenance-event-status { color: #00a8ff; font-size: 0.8rem; margin-top: 0.3rem; }
[data-theme="light"] .provenance-event { border-color: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .provenance-event-date,
[data-theme="light"] .provenance-event-detail,
[data-theme="light"] .provenance-event-party { color: rgba(0,0,0,0.5) !important; }