:root {
    --bg: #14141d;
    --bg-elevated: #1c1c28;
    --bg-card: rgba(28, 28, 40, 0.85);
    --border: color-mix(in srgb, var(--purple) 22%, transparent);
    --border-strong: color-mix(in srgb, var(--purple) 40%, transparent);
    --text: #e2e8ef;
    --text-muted: #9aa3b2;
    --purple: #7d5ea8;
    --purple-soft: color-mix(in srgb, var(--purple) 15%, transparent);
    --purple-glow: color-mix(in srgb, var(--purple) 35%, transparent);
    --purple-light: color-mix(in srgb, var(--purple) 72%, #ffffff);
    --orange: #f4792e;
    --orange-glow: color-mix(in srgb, var(--orange) 35%, transparent);
    --font-title: "Space Grotesk", sans-serif;
    --font-body: "Raleway", sans-serif;
    --sidebar-width: 260px;
    --toolbar-height: 60px;
    --success: #34d399;
    --success-bg: rgba(52, 211, 153, 0.12);
    --error: #f87171;
    --error-bg: rgba(248, 113, 113, 0.12);
    --warn: #fbbf24;
    --warn-bg: rgba(251, 191, 36, 0.12);
    --ambient-opacity: 0.45;
    --sidebar-bg: rgba(20, 20, 29, 0.97);
    --toolbar-bg: rgba(20, 20, 29, 0.85);
    --input-bg: rgba(20, 20, 29, 0.8);
    --toggle-bg: var(--bg-elevated);
    --toggle-icon: var(--text);
    --modal-bg: #2c2c40;
    --modal-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), 0 0 0 1px color-mix(in srgb, var(--purple) 28%, transparent);
    --surface-2: rgba(33, 33, 47, 0.9);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--purple) 45%, transparent);
}

html[data-theme="light"] {
    --bg: #f0f1f6;
    --bg-elevated: #ffffff;
    --bg-card: rgba(255, 255, 255, 0.95);
    --border: color-mix(in srgb, var(--purple) 18%, transparent);
    --border-strong: color-mix(in srgb, var(--purple) 35%, transparent);
    --text: #1a1a24;
    --text-muted: #5c6470;
    --purple: #6b4f94;
    --purple-soft: color-mix(in srgb, var(--purple) 10%, transparent);
    --purple-glow: color-mix(in srgb, var(--purple) 15%, transparent);
    --purple-light: color-mix(in srgb, var(--purple) 55%, #1a1a24);
    --orange-glow: color-mix(in srgb, var(--orange) 12%, transparent);
    --success-bg: rgba(16, 185, 129, 0.1);
    --error-bg: rgba(239, 68, 68, 0.1);
    --warn-bg: rgba(245, 158, 11, 0.1);
    --ambient-opacity: 0.22;
    --sidebar-bg: rgba(255, 255, 255, 0.98);
    --toolbar-bg: rgba(255, 255, 255, 0.92);
    --input-bg: #ffffff;
    --toggle-bg: #ffffff;
    --toggle-icon: #1a1a24;
    --modal-bg: #ffffff;
    --modal-shadow: 0 24px 64px rgba(26, 26, 36, 0.14), 0 0 0 1px color-mix(in srgb, var(--purple) 12%, transparent);
    --surface-2: rgba(255, 255, 255, 0.92);
}

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
}

h1, h2, h3, h4, legend, .toolbar-title, .page-heading {
    font-family: var(--font-title);
}

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

a:hover:not(.btn):not(.btn-primary):not(.btn-secondary):not(.btn-danger):not(.status-pill) {
    color: var(--purple-light);
}

a.btn-primary:hover,
a.btn-primary:focus-visible {
    color: #fff;
}

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

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

/* ── Ambient background ── */

.ambient {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.ambient-auth {
    z-index: 0;
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: var(--ambient-opacity);
    animation: drift 20s ease-in-out infinite;
}

.orb-purple {
    width: min(50vw, 480px);
    height: min(50vw, 480px);
    background: var(--purple-glow);
    top: -10%;
    left: -6%;
}

.orb-orange {
    width: min(38vw, 360px);
    height: min(38vw, 360px);
    background: var(--orange-glow);
    bottom: -6%;
    right: -4%;
    animation-delay: -8s;
}

.grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(color-mix(in srgb, var(--purple) 3.5%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--purple) 3.5%, transparent) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, black 15%, transparent 70%);
}

@keyframes drift {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(2%, 3%); }
}

/* ── App shell ── */

.admin-app {
    min-height: 100vh;
}

.admin-main {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin-left: 0;
    transition: margin-left 0.25s ease;
}

@media (min-width: 900px) {
    .admin-main {
        margin-left: var(--sidebar-width);
    }

    body.sidebar-collapsed .admin-main {
        margin-left: 0;
    }
}

/* ── Sidebar ── */

.sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border);
    backdrop-filter: blur(12px);
    transform: translateX(-100%);
    transition: transform 0.25s ease, background 0.2s ease;
}

body.sidebar-open .sidebar {
    transform: translateX(0);
}

@media (min-width: 900px) {
    .sidebar {
        transform: translateX(0);
    }
}

body.sidebar-collapsed .sidebar {
    transform: translateX(-100%);
}

.sidebar-brand {
    padding: 1.5rem 1.25rem 1rem;
    border-bottom: 1px solid var(--border);
}

.sidebar-logo-link {
    display: block;
}

.brand-logo-wrap,
.sidebar-logo-link {
    position: relative;
}

.brand-logo,
.sidebar-logo,
.auth-logo {
    display: block;
    width: 100%;
    max-width: 200px;
    height: auto;
    margin: 0 auto;
}

.auth-logo {
    max-width: 240px;
    margin-bottom: 1.5rem;
}

html[data-theme="dark"] .brand-logo--light,
html[data-theme="light"] .brand-logo--dark {
    display: none;
}

html[data-theme="dark"] .brand-logo--dark,
html[data-theme="light"] .brand-logo--light {
    display: block;
}

.sidebar-logo {
    max-width: 200px;
}

.sidebar-nav {
    flex: 1;
    padding: 1rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sidebar-footer {
    padding: 0.75rem 0.75rem 1.25rem;
    border-top: 1px solid var(--border);
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.7rem 0.85rem;
    border-radius: 10px;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.sidebar-link:hover {
    background: var(--purple-soft);
    color: var(--text);
}

.sidebar-link.is-active {
    background: var(--purple-soft);
    color: var(--text);
    box-shadow: inset 3px 0 0 var(--purple);
}

.sidebar-link-nested {
    padding-left: 2.25rem;
    font-size: 0.9rem;
}

.sidebar-link-button {
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
}

.sidebar-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    opacity: 0.85;
}

.sidebar-logout {
    margin: 0;
}

/* ── Toolbar ── */

.admin-toolbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 1rem;
    height: var(--toolbar-height);
    padding: 0 1.25rem;
    background: var(--toolbar-bg);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(10px);
}

.toolbar-title {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text);
}

.toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.toolbar-notifications-menu {
    position: relative;
}

.toolbar-notifications-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--toggle-bg);
    color: var(--text);
    cursor: pointer;
    list-style: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.toolbar-notifications-btn::-webkit-details-marker {
    display: none;
}

.toolbar-notifications-btn::marker {
    content: '';
}

.toolbar-notifications-btn:hover,
.toolbar-notifications-menu[open] .toolbar-notifications-btn {
    background: var(--purple-soft);
    border-color: var(--border-strong);
}

.toolbar-notifications-icon {
    font-size: 1rem;
}

.toolbar-notifications-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background: var(--orange);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.1rem;
    text-align: center;
}

.toolbar-notifications-dropdown {
    position: absolute;
    top: calc(100% + 0.45rem);
    right: 0;
    z-index: 60;
    width: min(22rem, calc(100vw - 2rem));
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--modal-bg);
    box-shadow: var(--modal-shadow);
    overflow: hidden;
}

.toolbar-notifications-dropdown-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border);
}

.toolbar-notifications-list {
    max-height: 22rem;
    overflow-y: auto;
}

.toolbar-notifications-empty,
.toolbar-notifications-loading {
    padding: 1rem;
    margin: 0;
}

.toolbar-notification-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s ease;
}

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

.toolbar-notification-item:hover {
    background: var(--purple-soft);
}

.toolbar-notification-icon {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--purple);
}

.toolbar-notification-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.toolbar-notification-title {
    font-weight: 600;
    line-height: 1.35;
}

.toolbar-notification-body {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.4;
}

.toolbar-notification-time {
    font-size: 0.8125rem;
}

.toolbar-notifications-footer {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
}

.toolbar-notifications-view-all {
    display: block;
    text-align: center;
    font-weight: 600;
    color: var(--purple);
    text-decoration: none;
}

.toolbar-notifications-view-all:hover {
    color: var(--purple-light);
}

.notifications-empty {
    padding: 2rem;
    text-align: center;
}

.notifications-empty-title {
    margin: 0 0 0.35rem;
    font-family: var(--font-title);
    font-size: 1.125rem;
}

.notifications-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.notification-item {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--bg-card);
}

.notification-item.is-unread {
    border-color: var(--border-strong);
    box-shadow: inset 3px 0 0 var(--purple);
}

.transfers-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.transfer-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.transfer-card-body h4 {
    margin: 0 0 0.25rem;
}

.transfer-card-body p {
    margin: 0.15rem 0;
}

.transfer-card-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.notification-item-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--purple-soft);
    color: var(--purple);
    font-size: 1rem;
}

.notification-item-body {
    min-width: 0;
    flex: 1;
}

.notification-item-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 0.35rem;
}

.notification-item-title {
    margin: 0;
    font-size: 1rem;
    font-family: var(--font-title);
}

.notification-item-message {
    margin: 0 0 0.75rem;
}

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

.toolbar-profile-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 40px;
    padding: 0 0.7rem 0 0.45rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--toggle-bg);
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.toolbar-profile-chip::-webkit-details-marker {
    display: none;
}

.toolbar-profile-chip::marker {
    content: '';
}

.toolbar-profile-chip:hover {
    border-color: var(--border-strong);
    background: var(--purple-soft);
}

.toolbar-profile-menu {
    position: relative;
}

.toolbar-profile-menu[open] .toolbar-profile-chip {
    border-color: var(--border-strong);
    background: var(--purple-soft);
}

.toolbar-profile-avatar-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.toolbar-profile-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
}

.toolbar-profile-avatar-placeholder {
    display: grid;
    place-items: center;
    font-size: 0.82rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--purple), var(--orange));
}

.toolbar-profile-caret-badge {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid var(--border-strong);
    background: var(--bg-elevated);
    color: var(--text-muted);
    font-size: 0.5rem;
    line-height: 1;
}

.toolbar-profile-name {
    font-size: 0.86rem;
    font-weight: 600;
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.toolbar-profile-dropdown {
    position: absolute;
    top: calc(100% + 0.45rem);
    right: 0;
    min-width: 180px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
    overflow: hidden;
    z-index: 50;
}

.toolbar-profile-item {
    display: block;
    width: 100%;
    padding: 0.65rem 0.8rem;
    color: var(--text);
    text-decoration: none;
    font-size: 0.88rem;
    border: 0;
    background: transparent;
    text-align: left;
}

.toolbar-profile-item:hover {
    background: var(--purple-soft);
}

.toolbar-profile-section-label {
    padding: 0.55rem 0.8rem 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.toolbar-studio-search-wrap {
    padding: 0 0.75rem 0.45rem;
}

.toolbar-studio-search-input {
    width: 100%;
    font-family: var(--font-body);
    font-size: 0.84rem;
    color: var(--text);
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.45rem 0.6rem;
}

.toolbar-studio-search-input:focus {
    outline: none;
    border-color: var(--border-strong);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--purple) 20%, transparent);
}

.toolbar-studio-search-empty {
    margin: 0;
    padding: 0.45rem 0.8rem 0.65rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.toolbar-profile-switch {
    margin: 0;
}

.toolbar-profile-separator {
    height: 1px;
    margin: 0.25rem 0;
    background: var(--border);
}

.toolbar-profile-item.is-active,
.toolbar-profile-item.is-active:hover {
    color: var(--purple-light);
    background: color-mix(in srgb, var(--purple) 15%, transparent);
    cursor: default;
}

.toolbar-profile-item:disabled {
    opacity: 1;
}

.toolbar-profile-logout {
    margin: 0;
    border-top: 1px solid var(--border);
}

.toolbar-profile-item-button {
    cursor: pointer;
    font-family: var(--font-body);
}

.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--toggle-bg);
    color: var(--toggle-icon);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.theme-toggle:hover {
    border-color: var(--border-strong);
    background: var(--purple-soft);
    color: var(--purple);
}

.theme-icon {
    width: 20px;
    height: 20px;
}

html[data-theme="dark"] .theme-icon-moon,
html[data-theme="light"] .theme-icon-sun {
    display: none;
}

.auth-theme-slot {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 10;
}

.sidebar-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--toggle-bg);
    cursor: pointer;
    flex-shrink: 0;
}

.sidebar-toggle-bar {
    display: block;
    width: 18px;
    height: 2px;
    margin: 0 auto;
    background: var(--text);
    border-radius: 1px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.admin-content {
    flex: 1 0 auto;
    padding: 1.5rem 1.25rem 2.5rem;
}

/* Immersive studio screens — full remaining viewport, no page chrome padding */
.admin-content.admin-content--flush {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: calc(100vh - var(--toolbar-height));
    max-height: calc(100vh - var(--toolbar-height));
    padding: 0;
    overflow: hidden;
}

body.is-studio-screen .admin-main {
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
}

body.is-studio-screen .admin-toolbar {
    flex-shrink: 0;
}

:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) {
    box-shadow: none;
}

/* Native checkbox styled as a switch */
.switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    cursor: pointer;
    user-select: none;
}

.switch input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}

.switch-track {
    position: relative;
    width: 2.5rem;
    height: 1.4rem;
    flex-shrink: 0;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--text-muted) 35%, transparent);
    transition: background 0.18s ease;
}

.switch-track::after {
    content: "";
    position: absolute;
    top: 0.15rem;
    left: 0.15rem;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.18s ease;
}

.switch input:checked + .switch-track {
    background: var(--purple);
}

.switch input:checked + .switch-track::after {
    transform: translateX(1.1rem);
}

.switch input:focus-visible + .switch-track {
    box-shadow: var(--focus-ring);
}

.switch-label {
    font-size: 0.9rem;
    color: var(--text);
}

/* Global toast stack */
.toast-stack {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1400;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: min(22rem, calc(100vw - 2rem));
    pointer-events: none;
}

.toast {
    pointer-events: auto;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
    font-size: 0.9rem;
    line-height: 1.4;
    animation: toast-in 0.22s ease;
}

.toast.is-leaving {
    animation: toast-out 0.18s ease forwards;
}

.toast-success {
    border-color: color-mix(in srgb, var(--success) 45%, transparent);
    background: color-mix(in srgb, var(--success-bg) 80%, var(--bg-elevated));
}

.toast-error {
    border-color: color-mix(in srgb, var(--error) 45%, transparent);
    background: color-mix(in srgb, var(--error-bg) 80%, var(--bg-elevated));
}

.toast-info {
    border-color: color-mix(in srgb, var(--purple) 40%, transparent);
}

@keyframes toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes toast-out {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
    .toast,
    .toast.is-leaving {
        animation: none;
    }
}

/* ── Client app footer ── */

.client-app-footer {
    flex-shrink: 0;
    margin-top: auto;
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--toolbar-bg) 92%, transparent);
    backdrop-filter: blur(8px);
}

.client-app-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem 1.25rem;
    padding: 0.7rem 1.25rem 0.85rem;
    font-family: var(--font-body);
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--text-muted);
}

.client-app-footer-usage {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.45rem;
    min-width: 0;
}

.client-app-footer-plan {
    color: var(--text);
    font-weight: 600;
}

.client-app-footer-muted,
.client-app-footer-sep {
    color: var(--text-muted);
    opacity: 0.85;
}

.client-app-footer-link,
.client-app-footer-credit a {
    color: var(--text-muted);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--text-muted) 45%, transparent);
    text-underline-offset: 0.15em;
    transition: color 0.15s ease;
}

.client-app-footer-link:hover,
.client-app-footer-credit a:hover {
    color: var(--text);
}

.client-app-footer-credit {
    margin: 0;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .client-app-footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ── Page content ── */

.page,
.page-wide {
    max-width: 1080px;
}

.page.page-wide {
    max-width: 90%;
    margin: 0 auto;
}

.hero {
    margin-bottom: 1.5rem;
}

.page-heading {
    margin: 0 0 0.35rem;
    font-size: clamp(1.35rem, 3vw, 1.75rem);
    font-weight: 600;
}

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.card,
.form-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.25rem;
    backdrop-filter: blur(8px);
}

.card h2,
.card h3 {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
}

.card strong {
    color: var(--text);
}

.studio-index-grid {
    align-items: stretch;
}

.studio-index-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.studio-index-card.is-current {
    border-color: var(--border-strong);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--purple) 16%, transparent);
}

.studio-index-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.studio-index-card-header h3 {
    margin-bottom: 0.2rem;
}

.studio-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

.studio-stat-card {
    display: grid;
    gap: 0.2rem;
    padding: 0.65rem 0.75rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--purple) 6%, transparent);
}

.studio-stat-label {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.studio-stat-value {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--text);
}

.studio-index-meta {
    display: grid;
    gap: 0.35rem;
}

.studio-index-meta p {
    margin: 0;
}

.studio-index-open-form {
    margin-top: auto;
}

.studio-index-open-link {
    display: inline-flex;
    margin-top: auto;
    text-decoration: none;
}

.studio-index-actions {
    display: grid;
    gap: 0.65rem;
    margin-top: auto;
}

.studio-index-leave-form,
.studio-index-leave-note {
    margin: 0;
}

.studio-index-leave-note {
    font-size: 0.82rem;
}

/* ── Client dashboard home ── */

.dashboard-home .hero {
    margin-bottom: 1.25rem;
}

.dashboard-attention {
    margin: 0 0 1.25rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--warn);
    background: var(--warn-bg);
}

.dashboard-attention p {
    margin: 0;
}

.dashboard-overview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.dashboard-panel {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1rem 1.1rem 1.1rem;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--bg-card);
}

.dashboard-panel-usage {
    grid-column: 1 / -1;
}

.dashboard-empty {
    margin: 0;
}

.dashboard-event-list,
.dashboard-gallery-list,
.dashboard-workspace-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.65rem;
}

.dashboard-event-item {
    display: grid;
    grid-template-columns: minmax(7rem, 8.5rem) minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.7rem 0.8rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--purple) 5%, transparent);
}

.dashboard-event-item.is-today {
    border-color: var(--border-strong);
}

.dashboard-event-when {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
}

.dashboard-event-body {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.dashboard-event-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.65rem;
    font-size: 0.82rem;
}

.dashboard-gallery-link {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.7rem 0.8rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.dashboard-gallery-link:hover {
    border-color: var(--border-strong);
    background: color-mix(in srgb, var(--purple) 6%, transparent);
}

.dashboard-gallery-name {
    font-weight: 600;
}

.dashboard-gallery-meta {
    font-size: 0.82rem;
}

.dashboard-usage-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
}

.dashboard-usage-list > div {
    display: grid;
    gap: 0.25rem;
    padding: 0.65rem 0.75rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--purple) 5%, transparent);
}

.dashboard-usage-list dt {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.dashboard-usage-list dd {
    margin: 0;
    font-weight: 600;
}

.dashboard-workspaces {
    margin-top: 0.25rem;
}

.dashboard-workspace-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding: 0.85rem 0.95rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg-card);
}

.dashboard-workspace-row.is-current {
    border-color: var(--border-strong);
}

.dashboard-workspace-info {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.dashboard-workspace-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

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

    .dashboard-usage-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.plan-change-wizard {
    display: grid;
    gap: 1rem;
}

.plan-change-compare {
    margin: 1.1rem 0 1.35rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: color-mix(in srgb, var(--surface, #fff) 92%, transparent);
}

.plan-change-compare-head,
.plan-change-compare-row {
    display: grid;
    grid-template-columns: minmax(7rem, 1.2fr) 1fr 1fr;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    align-items: center;
}

.plan-change-compare-head {
    background: color-mix(in srgb, var(--text, #111) 6%, transparent);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--muted, #667);
}

.plan-change-compare-row {
    border-top: 1px solid var(--border);
    font-size: 0.95rem;
}

.plan-change-compare-row.is-improved {
    background: color-mix(in srgb, var(--primary, var(--purple)) 7%, transparent);
}

.plan-change-compare-label {
    color: var(--muted, #667);
}

.plan-change-compare-from {
    color: var(--muted, #667);
}

.plan-change-compare-to {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    font-weight: 600;
}

.plan-change-compare-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--primary, var(--purple));
    background: color-mix(in srgb, var(--primary, var(--purple)) 14%, transparent);
}

@media (max-width: 640px) {
    .plan-change-compare-head,
    .plan-change-compare-row {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .plan-change-compare-head span:nth-child(1) {
        display: none;
    }

    .plan-change-compare-from::before {
        content: 'Now: ';
        font-weight: 500;
    }

    .plan-change-compare-to::before {
        content: 'New: ';
        font-weight: 500;
        color: var(--muted, #667);
    }
}

.plan-change-step h3 {
    margin: 0 0 0.5rem;
}

.plan-change-gallery-row {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.plan-change-gallery-row .checkbox-label {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
}

.plan-change-manage-btn {
    flex-shrink: 0;
    white-space: nowrap;
}

.plan-change-gallery-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
}

.plan-change-keep-pack-pick {
    margin: 0;
}

.plan-change-keep-pack-select {
    max-width: 14rem;
    font-size: 0.85rem;
}

.plan-change-pack-badge {
    display: inline-block;
    margin-top: 0.25rem;
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
    background: color-mix(in srgb, var(--success, #16a34a) 14%, transparent);
    color: var(--success, #15803d);
    font-size: 0.78rem;
    font-weight: 600;
}

.plan-change-gallery-row.is-pack-covered {
    border-color: color-mix(in srgb, var(--success, #16a34a) 40%, var(--border));
}

.plan-change-trim-status {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.82rem;
}

.plan-change-kept-meta .is-over {
    color: var(--error);
    font-weight: 600;
}

.plan-change-kept-meta.is-invalid {
    color: var(--error);
}

.plan-change-gallery-row.is-too-large {
    border-color: color-mix(in srgb, var(--error) 45%, var(--border));
    background: var(--error-bg);
}

.plan-change-too-large-note {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.82rem;
    color: var(--error);
    font-weight: 600;
}

.plan-change-storage-alert {
    margin-bottom: 0.85rem;
}

.plan-change-trim-panel {
    width: min(880px, 100%);
}

.plan-change-trim-meter {
    margin: 0 0 0.85rem;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    background: var(--surface-2, var(--bg-muted, #f3f4f6));
    font-size: 0.9rem;
}

.plan-change-trim-meter.is-ok {
    background: color-mix(in srgb, var(--success, #16a34a) 12%, transparent);
    color: var(--success, #15803d);
}

.plan-change-trim-meter.is-over {
    background: var(--error-bg);
    color: var(--error);
    font-weight: 600;
}

.plan-change-trim-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.65rem;
    max-height: min(55vh, 420px);
    overflow: auto;
    padding: 0.15rem;
}

.plan-change-trim-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
    padding: 0.4rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    background: var(--surface, #fff);
}

.plan-change-trim-tile.is-selected {
    border-color: color-mix(in srgb, var(--error) 55%, var(--border));
    background: var(--error-bg);
}

.plan-change-trim-check {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 1;
}

.plan-change-trim-thumb {
    display: block;
    position: relative;
    aspect-ratio: 1;
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-muted, #e5e7eb);
}

.plan-change-trim-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.plan-change-trim-badge {
    position: absolute;
    right: 0.35rem;
    bottom: 0.35rem;
    padding: 0.12rem 0.4rem;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.plan-change-trim-meta {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.plan-change-trim-name {
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 640px) {
    .plan-change-gallery-row {
        flex-direction: column;
        align-items: stretch;
    }

    .plan-change-manage-btn,
    .plan-change-gallery-actions {
        align-self: flex-start;
    }

    .plan-change-keep-pack-select {
        max-width: 100%;
    }
}

.plan-change-domain-card {
    margin: 0 0 0.85rem;
    padding: 0.85rem 1rem 1rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    display: grid;
    gap: 0.65rem;
}

.plan-change-domain-card legend {
    padding: 0 0.25rem;
    font-weight: 600;
}

@media (max-width: 760px) {
    .studio-stat-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Forms ── */

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

:is(.form, .modal-body, .bulk-tag, .upload-tag-field) input[type="text"],
:is(.form, .modal-body, .bulk-tag, .upload-tag-field) input[type="email"],
:is(.form, .modal-body, .bulk-tag, .upload-tag-field) input[type="password"],
:is(.form, .modal-body, .bulk-tag, .upload-tag-field) input[type="url"],
:is(.form, .modal-body, .bulk-tag, .upload-tag-field) input[type="file"],
:is(.form, .modal-body, .bulk-tag, .upload-tag-field) input[type="number"],
:is(.form, .modal-body, .bulk-tag, .upload-tag-field) input[type="tel"],
:is(.form, .modal-body, .bulk-tag, .upload-tag-field) input[type="search"],
:is(.form, .modal-body, .bulk-tag, .upload-tag-field) input[type="datetime-local"],
:is(.form, .modal-body, .bulk-tag, .upload-tag-field) input[type="date"],
:is(.form, .modal-body, .bulk-tag, .upload-tag-field) input[type="time"],
:is(.form, .modal-body, .bulk-tag, .upload-tag-field) select,
:is(.form, .modal-body, .bulk-tag, .upload-tag-field) textarea,
.confirm-modal-guard-input,
.input-copy-row input[type="text"] {
    display: block;
    width: 100%;
    margin-top: 0.35rem;
    padding: 0.65rem 0.75rem;
    min-height: 2.75rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    font: inherit;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--text);
    background: var(--input-bg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

:is(.form, .modal-body, .bulk-tag, .upload-tag-field) select {
    appearance: none;
    cursor: pointer;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa3b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
}

:is(.form, .modal-body, .bulk-tag, .upload-tag-field) textarea {
    min-height: 6.5rem;
    resize: vertical;
}

:is(.form, .modal-body, .bulk-tag, .upload-tag-field) input[type="datetime-local"],
:is(.form, .modal-body, .bulk-tag, .upload-tag-field) input[type="date"],
:is(.form, .modal-body, .bulk-tag, .upload-tag-field) input[type="time"] {
    color-scheme: dark;
}

html[data-theme="light"] :is(.form, .modal-body, .bulk-tag, .upload-tag-field) input[type="datetime-local"],
html[data-theme="light"] :is(.form, .modal-body, .bulk-tag, .upload-tag-field) input[type="date"],
html[data-theme="light"] :is(.form, .modal-body, .bulk-tag, .upload-tag-field) input[type="time"] {
    color-scheme: light;
}

:is(.form, .modal-body, .bulk-tag, .upload-tag-field) input[type="datetime-local"]::-webkit-calendar-picker-indicator,
:is(.form, .modal-body, .bulk-tag, .upload-tag-field) input[type="date"]::-webkit-calendar-picker-indicator,
:is(.form, .modal-body, .bulk-tag, .upload-tag-field) input[type="time"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.75;
    padding: 0.2rem;
}

html[data-theme="dark"] :is(.form, .modal-body, .bulk-tag, .upload-tag-field) input[type="datetime-local"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] :is(.form, .modal-body, .bulk-tag, .upload-tag-field) input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] :is(.form, .modal-body, .bulk-tag, .upload-tag-field) input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(0.85);
}

:is(.form, .modal-body, .bulk-tag, .upload-tag-field) input:focus,
:is(.form, .modal-body, .bulk-tag, .upload-tag-field) select:focus,
:is(.form, .modal-body, .bulk-tag, .upload-tag-field) textarea:focus,
.confirm-modal-guard-input:focus,
.input-copy-row input[type="text"]:focus {
    outline: none;
    border-color: var(--purple);
    box-shadow: 0 0 0 3px var(--purple-soft);
}

.modal-body label:not(.checkbox-label):not(.checkbox-label-inline):not(.checkbox-inline):not(.upload-tag-field) {
    display: block;
    margin-bottom: 1rem;
    font-weight: 500;
    color: var(--text);
}

.upload-tag-field {
    display: block;
    margin-bottom: 1rem;
    font-weight: 500;
    color: var(--text);
}

.bulk-tag select,
.bulk-tag .ts-wrapper {
    margin-top: 0;
    min-width: 11rem;
}

.upload-tag-field select,
.upload-tag-field .ts-wrapper {
    margin-top: 0.35rem;
    max-width: none;
}

.input-copy-row input[type="text"] {
    margin-top: 0;
}

.confirm-modal-guard-input {
    margin-top: 0;
}

:is(.form, .modal-body) input::placeholder {
    color: #6b7280;
}

fieldset {
    border: none;
    margin: 0 0 1.75rem;
    padding: 0 0 1.75rem;
    border-bottom: 1px solid var(--border);
}

fieldset:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 1.25rem;
}

legend {
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: 0.75rem;
    color: var(--text);
}

.settings-logo-preview {
    display: block;
    max-height: 64px;
    margin: 0.5rem 0;
    border-radius: 8px;
}

.settings-logo-preview--on-light {
    padding: 0.75rem 1rem;
    background: #f4f4f8;
    border: 1px solid rgba(15, 23, 42, 0.08);
}

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

.form-row-3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 800px) {
    .form-row-3 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

.form-inline-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem 1.5rem;
    margin-bottom: 1.5rem;
}

.form-inline-filters label {
    margin: 0;
}

.meta-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 1rem;
    margin: 0;
}

.meta-list dt {
    margin: 0;
    color: var(--text-muted);
    font-weight: 500;
}

.meta-list dd {
    margin: 0;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

.checkbox-label input {
    width: auto;
    margin: 0;
    accent-color: var(--purple);
}

/* ── Buttons ── */

.btn {
    display: inline-block;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 0.65rem 1.1rem;
    margin: 0;
    border-radius: 10px;
    border: none;
    box-shadow: none;
    background: transparent;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
    transition: background 0.15s ease, transform 0.15s ease;
}

.btn-primary {
    background: linear-gradient(
        135deg,
        var(--orange) 0%,
        color-mix(in srgb, var(--orange) 72%, #1a1a24) 100%
    );
    color: #fff;
}

.btn-primary:hover {
    filter: brightness(1.08);
}

.btn-secondary {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border-strong);
}

.btn-secondary:hover {
    background: var(--purple-soft);
    border-color: var(--purple);
    color: var(--text);
}

a.btn-secondary:hover,
a.btn-secondary:focus-visible {
    color: var(--text);
}

.btn-link {
    background: transparent;
    color: var(--purple);
    padding: 0;
}

a.btn-link:hover {
    color: var(--purple-light);
}

.inline-form {
    display: inline;
    margin: 0;
}

/* ── Alerts ── */

.alert {
    padding: 0.75rem 1rem;
    border-radius: 10px;
    margin-bottom: 1rem;
    border: 1px solid transparent;
}

.alert-error {
    background: var(--error-bg);
    color: var(--error);
    border-color: rgba(248, 113, 113, 0.25);
}

.alert-warning,
.alert-warn {
    background: var(--warn-bg);
    color: var(--warn);
    border-color: rgba(251, 191, 36, 0.25);
}

.alert-success {
    background: var(--success-bg);
    color: var(--success);
    border-color: rgba(52, 211, 153, 0.25);
}

.alert-info {
    background: color-mix(in srgb, var(--purple) 10%, transparent);
    color: var(--text);
    border-color: color-mix(in srgb, var(--purple) 30%, transparent);
}

/* ── Auth (login) ── */

.auth-page {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 2rem;
    backdrop-filter: blur(12px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.auth-card h1 {
    margin: 0 0 0.25rem;
    font-size: 1.5rem;
    text-align: center;
}

.auth-card .muted {
    text-align: center;
    margin-bottom: 1.5rem;
}

.auth-card .form {
    margin-top: 1rem;
}

/* ── Signup (package enrollment) ── */

.auth-page-signup {
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.25rem;
}

.auth-card-signup {
    max-width: 440px;
    height: auto;
    align-self: center;
}

.auth-card-signup.has-plan {
    max-width: 960px;
    padding: 0;
    overflow: hidden;
}

.auth-logo.signup-logo {
    display: block;
    width: auto;
    max-width: min(100%, 320px);
    height: auto;
    max-height: none;
    margin: 0 auto 1.5rem;
    object-fit: contain;
}

.signup-shell {
    display: grid;
    grid-template-columns: minmax(17.5rem, 0.92fr) minmax(0, 1.08fr);
    align-items: stretch;
}

.signup-plan-panel {
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
    padding: 2.15rem 1.65rem 1.85rem;
    background:
        radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--purple) 18%, transparent), transparent 55%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 42%),
        rgba(0, 0, 0, 0.18);
    border-right: 1px solid var(--border);
    text-align: left;
}

html[data-theme="light"] .signup-plan-panel {
    background:
        radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--purple) 10%, transparent), transparent 55%),
        linear-gradient(180deg, color-mix(in srgb, var(--purple) 4%, transparent), transparent 42%),
        rgba(255, 255, 255, 0.55);
}

.signup-plan-intro {
    display: grid;
    gap: 0.85rem;
}

.signup-kicker {
    margin: 0;
    font-family: var(--font-title);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.signup-promo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.7rem;
    padding: 0.7rem 0.85rem;
    border-radius: 12px;
    border: 1px solid rgba(52, 211, 153, 0.28);
    background: var(--success-bg);
}

.signup-promo[hidden] {
    display: none !important;
}

.signup-promo-code {
    font-family: var(--font-title);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--success);
}

.signup-promo-label {
    font-size: 0.9rem;
    color: var(--text);
}

.signup-plan-cost {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35rem 0.45rem;
    font-family: var(--font-title);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text-muted);
    transition: font-size 0.22s ease, color 0.22s ease;
}

.signup-plan-was {
    font-size: 0.86em;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: line-through;
    opacity: 0.75;
}

.signup-plan-was[hidden] {
    display: none !important;
}

.signup-plan.has-discount .signup-plan-amount {
    color: var(--success);
}

.signup-plan-suffix {
    font-size: 0.78em;
    opacity: 0.8;
}

.signup-plan.is-active .signup-plan-cost {
    margin-top: 0.15rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text);
}

.signup-plan-bonus {
    margin: 0.65rem 0 0;
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--orange) 28%, transparent);
    background: color-mix(in srgb, var(--orange) 10%, transparent);
    color: var(--text);
    font-size: 0.88rem;
    line-height: 1.35;
}

.signup-plan-bonus[hidden] {
    display: none !important;
}

.signup-code-field {
    display: grid;
    gap: 0.4rem;
    margin: 0.85rem 0 0.35rem;
}

.signup-code-label {
    font-size: 0.92rem;
    font-weight: 600;
}

.signup-code-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.55rem;
    align-items: stretch;
}

.signup-code-row input {
    width: 100%;
}

.signup-code-row .btn {
    white-space: nowrap;
}

#signup-discount-hint.is-error {
    color: var(--error);
}

#signup-discount-hint.is-ok {
    color: var(--success);
}

.signup-plan-stack {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    flex: 1;
}

.signup-plan {
    position: relative;
    border-radius: 16px;
    transition: background 0.22s ease, box-shadow 0.22s ease;
}

.signup-plan.is-active {
    background: color-mix(in srgb, var(--purple) 12%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--purple) 38%, transparent);
}

html[data-theme="light"] .signup-plan.is-active {
    background: color-mix(in srgb, var(--purple) 8%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--purple) 28%, transparent);
}

.signup-plan-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    margin: 0;
    padding: 0.85rem 0.95rem;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    font: inherit;
    transition: background 0.18s ease;
}

.signup-plan:not(.is-active) .signup-plan-head:hover {
    background: color-mix(in srgb, var(--purple) 8%, transparent);
}

.signup-plan.is-active .signup-plan-head {
    padding: 1.15rem 1.1rem 0.55rem;
    cursor: default;
}

.signup-plan-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.8rem;
    background: color-mix(in srgb, var(--purple) 14%, transparent);
    color: var(--purple);
    font-size: 1rem;
    transition: transform 0.22s ease, background 0.22s ease, color 0.22s ease;
}

.signup-plan.is-active .signup-plan-icon {
    width: 2.75rem;
    height: 2.75rem;
    background: color-mix(in srgb, var(--orange) 14%, transparent);
    color: var(--orange);
    transform: scale(1.02);
}

.signup-plan-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    min-width: 0;
}

.signup-plan-title {
    font-family: var(--font-title);
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--text);
    transition: font-size 0.22s ease, color 0.22s ease;
}

.signup-plan.is-active .signup-plan-title {
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.signup-plan-indicator {
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 999px;
    border: 1.5px solid rgba(154, 163, 178, 0.55);
    background: transparent;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.signup-plan.is-active .signup-plan-indicator {
    border-color: var(--orange);
    background: var(--orange);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 20%, transparent);
}

.signup-plan-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.signup-plan-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.28s ease;
}

.signup-plan.is-active .signup-plan-body {
    grid-template-rows: 1fr;
}

.signup-plan-body-inner {
    overflow: hidden;
    padding: 0 1.1rem;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.22s ease, transform 0.22s ease, padding 0.22s ease;
}

.signup-plan.is-active .signup-plan-body-inner {
    padding: 0 1.1rem 1.2rem;
    opacity: 1;
    transform: translateY(0);
}

.signup-plan-billing {
    margin: 0;
    font-size: 0.86rem;
    color: var(--text-muted);
}

.signup-highlights {
    list-style: none;
    margin: 0.9rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
}

.signup-highlights li {
    position: relative;
    padding: 0.1rem 0 0.1rem 1.2rem;
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--text);
}

.signup-highlights li::before {
    content: '';
    position: absolute;
    left: 0.1rem;
    top: 0.55rem;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: var(--purple);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--purple) 16%, transparent);
}

.signup-plan-footnote {
    margin: auto 0 0;
    padding-top: 0.35rem;
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.signup-form-panel {
    padding: 2.15rem 2rem 1.9rem;
    text-align: left;
}

.signup-form-panel-solo {
    padding: 0;
}

.signup-form-panel-solo h1,
.signup-form-title {
    font-family: var(--font-title);
    text-align: left;
}

.signup-form-lede {
    margin: 0 0 1.25rem;
    text-align: left;
    color: var(--text-muted);
    line-height: 1.45;
}

.signup-step {
    margin: 0 0 0.4rem;
    font-family: var(--font-title);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: center;
}

.signup-form-title {
    margin: 0 0 0.4rem;
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-align: center;
}

.signup-form-panel .signup-form-lede {
    text-align: center;
}

.signup-form {
    margin-top: 0.35rem;
}

.signup-form label .optional {
    margin-left: 0.25rem;
    font-size: 0.8em;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: lowercase;
}

.signup-form .btn-primary {
    width: 100%;
    margin-top: 0.55rem;
    min-height: 2.85rem;
    font-family: var(--font-title);
    font-weight: 600;
    letter-spacing: 0.01em;
}

.auth-card-signup .auth-footer {
    text-align: center;
    margin-top: 1.2rem;
}

@media (max-width: 820px) {
    .signup-shell {
        grid-template-columns: 1fr;
    }

    .signup-plan-panel {
        border-right: 0;
        border-bottom: 1px solid var(--border);
        padding: 1.5rem 1.25rem 1.25rem;
    }

    .signup-form-panel {
        padding: 1.5rem 1.25rem 1.7rem;
    }

    .signup-plan.is-active .signup-plan-title {
        font-size: 1.55rem;
    }

    .signup-plan-footnote {
        margin-top: 0.5rem;
    }
}

.onboarding-locked .sidebar,
.onboarding-locked .admin-toolbar {
    opacity: 0.55;
}

.admin-content-locked {
    pointer-events: none;
    min-height: calc(100vh - var(--toolbar-height));
}

.admin-content-locked .onboarding-gate {
    pointer-events: auto;
}

.onboarding-gate {
    min-height: calc(100vh - var(--toolbar-height) - 3.5rem);
    display: grid;
    place-items: center;
    padding: 1rem 0;
}

.onboarding-card {
    max-width: 560px;
    width: min(100%, 560px);
}

.cf-turnstile {
    margin: 1rem 0;
}

.altcha-wrap {
    margin: 0.35rem 0 0.15rem;
}

.altcha-wrap altcha-widget::part(logo),
.altcha-wrap .altcha-logo,
.altcha-wrap [class*="altcha-logo"] {
    display: none !important;
}

.altcha-powered-by {
    margin: 0.15rem 0 0;
    font-size: 0.78rem;
}

/* ── Settings extras ── */

.section-block {
    margin-top: 2rem;
}

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

.section-header h2,
.section-header h3 {
    margin: 0;
    font-size: 1.125rem;
}

.settings-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin: 0 0 1rem;
}

.settings-tab-button {
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    border-radius: 999px;
    padding: 0.5rem 0.9rem;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s, background 0.15s;
}

.settings-tab-button:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--purple) 45%, transparent);
}

.settings-tab-button.is-active {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, color-mix(in srgb, var(--purple) 95%, transparent), color-mix(in srgb, var(--orange) 78%, transparent));
}

.settings-subheading {
    margin: 1.1rem 0 0.6rem;
    font-size: 0.94rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.test-actions {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.test-actions h2 {
    margin: 0 0 0.35rem;
    font-size: 1.125rem;
}

.test-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.test-buttons form {
    margin: 0;
}

.integration-test-note {
    margin: 0.75rem 0 0;
    padding: 0.65rem 0.75rem;
    font-size: 0.875rem;
    background: color-mix(in srgb, var(--purple) 8%, transparent);
    border-radius: 8px;
    border-left: 3px solid var(--purple);
    color: var(--text-muted);
}

.server-panel {
    margin-bottom: 1.5rem;
}

.server-panel h2 {
    margin: 0 0 0.35rem;
    font-size: 1.125rem;
}

.server-panel-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-end;
    margin: 1rem 0 0.75rem;
}

.server-switch-form,
.server-add-form {
    display: flex;
    gap: 0.65rem;
    align-items: flex-end;
    margin: 0;
}

.server-switch-form label,
.server-add-form label {
    margin: 0;
}

.checkbox-label-inline {
    align-self: flex-end;
    white-space: nowrap;
}

.system-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.system-grid .form-card {
    margin: 0;
}

.metric-value {
    font-size: 2rem;
    font-weight: 700;
    margin: 0.25rem 0 0;
}

.kv-list {
    margin: 0.75rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.kv-list > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.55rem;
}

.kv-list > div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.kv-list dt {
    margin: 0;
    color: var(--text-muted);
}

.kv-list dd {
    margin: 0;
    text-align: right;
    font-weight: 600;
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    margin-bottom: 1.25rem;
}

.filter-bar label {
    margin: 0;
}

.btn-text {
    background: none;
    border: none;
    color: var(--text-muted);
    text-decoration: underline;
    padding: 0.5rem 0;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.25rem;
}

.pagination-status {
    font-size: 0.9375rem;
}

.nowrap {
    white-space: nowrap;
}

.audit-detail {
    margin-top: 0.25rem;
    font-size: 0.85rem;
}

/* ── Billing (client) ── */

.pay-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pay-buttons form {
    margin: 0;
}

.btn-paypal {
    background: #ffc439;
    color: #11181c;
    border: 1px solid #f0b400;
}

.btn-paypal:hover {
    background: #f0b400;
}

.billing-pastdue-action {
    margin: 0.75rem 0 0;
}

.billing-manage-action {
    margin: 0.5rem 0 0;
}

/* ── Analytics ── */

.metric-card {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.metric-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.metric-card .metric-value {
    margin: 0;
}

.chart-card h3 {
    margin-bottom: 1rem;
}

.bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    height: 160px;
}

.bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    height: 100%;
    justify-content: flex-end;
}

.bar-track {
    width: 100%;
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.bar-fill {
    width: 70%;
    min-height: 3px;
    background: linear-gradient(180deg, var(--purple), color-mix(in srgb, var(--purple) 55%, transparent));
    border-radius: 6px 6px 0 0;
}

.bar-value {
    font-size: 0.8rem;
    font-weight: 600;
}

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

.plan-bars {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.plan-bar-row {
    display: grid;
    grid-template-columns: 200px 1fr 2.5rem;
    align-items: center;
    gap: 1rem;
}

.plan-bar-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

.plan-bar-track {
    height: 12px;
    background: color-mix(in srgb, var(--purple) 12%, transparent);
    border-radius: 6px;
    overflow: hidden;
}

.plan-bar-fill {
    display: block;
    height: 100%;
    background: var(--purple);
    border-radius: 6px;
}

.plan-bar-count {
    text-align: right;
    font-weight: 700;
}

@media (max-width: 640px) {
    .plan-bar-row {
        grid-template-columns: 1fr 2.5rem;
    }
    .plan-bar-track {
        grid-column: 1 / -1;
    }
}

.status-badge {
    display: inline-block;
    margin: 0 0 0.35rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.status-ok { color: var(--success); }
.status-warn { color: var(--warn); }
.status-bad { color: var(--error); }
.status-neutral { color: var(--text-muted); }

.card-status .muted {
    font-size: 0.875rem;
}

/* ── Studio / support ── */

.auth-footer {
    margin-top: 1.25rem;
    text-align: center;
    font-size: 0.9rem;
}

.auth-footer a {
    color: var(--purple-light);
}

.sidebar-studio-name {
    margin: 0.35rem 0 0;
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1.3;
}

.support-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 1.25rem;
    background: rgba(232, 168, 56, 0.12);
    border-bottom: 1px solid rgba(232, 168, 56, 0.35);
    color: var(--text);
    font-size: 0.9rem;
}

.support-banner p {
    margin: 0;
}

.support-banner form {
    margin: 0;
}

.btn-sm {
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
}

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

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

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

.data-table th {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.data-table .block {
    display: block;
}

.inline-form {
    display: inline;
    margin: 0;
}

.page-narrow {
    max-width: 560px;
}

.hero-split {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

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

.gallery-public-link {
    font-size: 0.9rem;
    word-break: break-all;
}

.gallery-public-link a {
    color: var(--purple-light);
}

.status-pill {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}

.status-published { background: rgba(72, 187, 120, 0.15); color: var(--success); }
.status-draft { background: rgba(154, 156, 176, 0.15); color: var(--text-muted); }
.status-scheduled { background: rgba(232, 168, 56, 0.15); color: var(--warn); }
.status-hidden { background: rgba(232, 168, 56, 0.15); color: var(--warn); }
.status-pill.status-ok { background: var(--success-bg); color: var(--success); }
.status-pill.status-warn { background: var(--warn-bg); color: var(--warn); }
.status-pill.status-bad { background: var(--error-bg); color: var(--error); }
.status-pill.status-neutral { background: rgba(154, 156, 176, 0.15); color: var(--text-muted); }

.hosting-section {
    margin-top: 2.5rem;
}

.hosting-provision-form {
    margin-bottom: 1.5rem;
}

.hosting-host-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.9rem;
}

.host-chip {
    display: block;
}

.platform-theme-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1rem;
}

.platform-theme-preview {
    --preview-primary: var(--purple);
    --preview-accent: var(--orange);
    --preview-bg: #14141d;
    --preview-surface: #1c1c28;
    margin-top: 1rem;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--preview-primary) 35%, transparent);
    overflow: hidden;
    background: var(--preview-bg);
}

.platform-theme-preview.is-light {
    --preview-bg: #f0f1f6;
    --preview-surface: #ffffff;
}

.platform-theme-preview-chrome {
    display: flex;
    gap: 0.35rem;
    padding: 0.55rem 0.75rem;
    background: color-mix(in srgb, var(--preview-surface) 88%, var(--preview-primary));
    border-bottom: 1px solid color-mix(in srgb, var(--preview-primary) 22%, transparent);
}

.platform-theme-preview-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--preview-primary) 55%, #fff);
}

.platform-theme-preview-body {
    display: grid;
    grid-template-columns: 3.5rem 1fr;
    min-height: 5.5rem;
}

.platform-theme-preview-sidebar {
    background: color-mix(in srgb, var(--preview-surface) 70%, var(--preview-primary));
    border-right: 1px solid color-mix(in srgb, var(--preview-primary) 22%, transparent);
}

.platform-theme-preview-main {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 1rem;
    background: var(--preview-surface);
}

.platform-theme-preview-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    font-family: var(--font-title);
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
}

.platform-theme-preview-btn-primary {
    background: var(--preview-primary);
}

.platform-theme-preview-btn-accent {
    background: linear-gradient(
        135deg,
        var(--preview-accent) 0%,
        color-mix(in srgb, var(--preview-accent) 72%, #1a1a24) 100%
    );
}

.platform-theme-preview-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    font-family: var(--font-title);
    font-size: 0.72rem;
    font-weight: 600;
}

.settings-theme-block {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}

.platform-theme-color-row .gallery-design-color-control {
    gap: 0.65rem;
}

.platform-theme-hex {
    font-size: 0.8rem;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

.cpanel-domain-list {
    columns: 2;
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.9rem;
}

@media (max-width: 700px) {
    .cpanel-domain-list {
        columns: 1;
    }
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--photo-grid-min, 140px), var(--photo-grid-min, 140px)));
    justify-content: start;
    gap: 0.5rem;
    position: relative;
}

.gallery-grid-note kbd {
    display: inline-block;
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 0.78em;
    line-height: 1.35;
    font-family: inherit;
}

.photo-thumb {
    position: relative;
    margin: 0;
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface-2);
}

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

.photo-eye-button {
    position: absolute;
    bottom: 0.55rem;
    right: 0.55rem;
    z-index: 3;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    background: rgba(10, 10, 16, 0.62);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

.photo-eye-button:hover {
    background: color-mix(in srgb, var(--purple) 85%, transparent);
    transform: translateY(-1px);
}

.photo-thumb:hover .photo-eye-button,
.photo-thumb.is-selected .photo-eye-button {
    opacity: 1;
}

.face-badge {
    position: absolute;
    bottom: 0.35rem;
    left: 0.35rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
}

.face-likely_no_face { opacity: 0.75; }

/* Gallery management: details, selection, cover, tags */
.btn-text-danger { color: var(--danger, #d9534f); }

.gallery-details { margin-bottom: 1.5rem; }
.gallery-details > summary {
    cursor: pointer;
    font-weight: 600;
    padding: 0.25rem 0;
}
.gallery-details[open] > summary { margin-bottom: 1rem; }

.photo-grid.selectable .photo-thumb { cursor: pointer; }

.photo-select {
    position: absolute;
    top: 0.35rem;
    left: 0.35rem;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
}
.photo-thumb:hover .photo-select,
.photo-thumb.is-selected .photo-select { opacity: 1; pointer-events: auto; }
.photo-checkbox { width: 18px; height: 18px; cursor: pointer; }

.photo-thumb.is-selected { border-color: color-mix(in srgb, var(--purple) 90%, transparent); }

.cover-badge {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    background: var(--purple);
    color: #fff;
    z-index: 2;
}

.hero-badge {
    position: absolute;
    top: 0.35rem;
    left: 0.35rem;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    background: #2a9d8f;
    color: #fff;
    z-index: 2;
}

.photo-thumb-actions {
    position: absolute;
    top: 0.35rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 4;
}

.photo-thumb:hover .photo-thumb-actions,
.photo-thumb.is-selected .photo-thumb-actions {
    opacity: 1;
}

.photo-action-btn {
    border: 0;
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    background: rgba(10, 10, 16, 0.72);
    color: #fff;
    cursor: pointer;
}

.photo-action-btn:hover {
    background: color-mix(in srgb, var(--purple) 92%, transparent);
}

.gallery-active-filters[hidden],
.bulk-bar-dock[hidden] {
    display: none !important;
}

.gallery-active-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 0.5rem 0 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--purple) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--purple) 18%, transparent);
}

.gallery-active-filters-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    min-width: 0;
    flex: 1;
}

.gallery-active-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.45rem 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--purple) 28%, transparent);
    font-size: 0.82rem;
    line-height: 1.3;
    color: var(--text);
}

.gallery-active-filter-chip-label {
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gallery-active-filter-chip-remove {
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0 0.15rem;
}

.gallery-active-filter-chip-remove:hover {
    color: var(--text);
}

.gallery-approval-link-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.photo-tags {
    position: absolute;
    bottom: 0.35rem;
    right: 0.35rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    justify-content: flex-end;
    max-width: 80%;
}
.photo-tag-chip {
    font-size: 0.6rem;
    font-weight: 600;
    padding: 0.1rem 0.35rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--purple) 85%, transparent);
    color: #fff;
}

.bulk-bar-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Above the app sidebar (z-index 50) so actions stay clickable */
    z-index: 55;
    display: flex;
    justify-content: center;
    padding: 0.75rem clamp(0.85rem, 2.5vw, 1.5rem);
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
    pointer-events: none;
}

@media (min-width: 900px) {
    body:not(.sidebar-collapsed) .bulk-bar-dock {
        left: var(--sidebar-width);
    }
}

.bulk-bar-dock.is-active {
    pointer-events: auto;
}

.bulk-bar-dock-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    width: min(100%, 72rem);
    padding: 0.7rem 1rem;
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface-2) 92%, transparent);
    border: 1px solid var(--border);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(12px);
}

body.bulk-bar-visible #gallery-manage {
    padding-bottom: 5.75rem;
}

body.modal-open .bulk-bar-dock {
    display: none !important;
}

.bulk-count { font-weight: 600; white-space: nowrap; }
.bulk-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.bulk-tag {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
}
.bulk-tag-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}
.bulk-tag .ts-wrapper {
    width: 11rem;
    min-width: 11rem;
    max-width: 11rem;
    flex: 0 0 auto;
}

.tag-manager { display: flex; flex-direction: column; gap: 0.75rem; }
.tag-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.tag-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    cursor: grab;
}
.tag-row:active {
    cursor: grabbing;
}
.tag-row .tag-pill {
    max-width: 100%;
    font-weight: 600;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--purple) 18%, transparent);
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tag-row .tag-count { font-size: 0.85rem; }
.tag-row-actions { margin-left: auto; display: flex; gap: 0.25rem; align-items: center; flex-wrap: nowrap; }
.tag-action-btn {
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.tag-drag-handle {
    cursor: grab;
    color: var(--text-muted);
}
.tag-drag-handle:active {
    cursor: grabbing;
}
.tag-drag-handle:hover {
    color: var(--text);
}
.tag-color-swatch-btn {
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--tag-color, var(--purple));
    cursor: pointer;
    flex: 0 0 auto;
}

.tag-color-swatch-btn:hover {
    border-color: var(--border-strong);
}

.pcr-app {
    z-index: 1400;
}
.tag-add-form {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    min-width: 0;
}

.tag-add-form input {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
}

.tag-add-submit {
    flex: 0 0 auto;
    width: 2.1rem;
    min-width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    font-weight: 650;
    line-height: 1;
}

.gallery-hero {
    margin-bottom: 1.5rem;
}

.gallery-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.gallery-shell {
    --gallery-tags-width: 320px;
    display: grid;
    grid-template-columns: minmax(200px, var(--gallery-tags-width)) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
    transition: grid-template-columns 0.28s ease, gap 0.28s ease;
}

.gallery-shell.is-tags-resizing {
    transition: none;
    user-select: none;
}

.gallery-shell.is-tags-collapsed {
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: 0.65rem;
}

.gallery-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: sticky;
    top: 5rem;
    min-width: 0;
    overflow: visible;
}

.gallery-sidebar-resizer {
    position: absolute;
    top: 3.25rem;
    right: -0.55rem;
    bottom: 0;
    width: 0.7rem;
    z-index: 6;
    cursor: col-resize;
    touch-action: none;
}

.gallery-sidebar-resizer::after {
    content: '';
    position: absolute;
    top: 0.5rem;
    bottom: 0.5rem;
    left: 50%;
    width: 3px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: color-mix(in srgb, var(--border) 80%, transparent);
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.gallery-sidebar:hover .gallery-sidebar-resizer::after,
.gallery-shell.is-tags-resizing .gallery-sidebar-resizer::after,
.gallery-sidebar-resizer:focus-visible::after {
    opacity: 1;
}

.gallery-shell.is-tags-resizing .gallery-sidebar-resizer::after,
.gallery-sidebar-resizer:hover::after,
.gallery-sidebar-resizer:focus-visible::after {
    background: color-mix(in srgb, var(--purple, #7c5cbf) 70%, var(--border));
}

.gallery-shell.is-tags-collapsed .gallery-sidebar-resizer {
    display: none;
}

.gallery-shell:not(.is-tags-collapsed) .gallery-sidebar .gallery-panel {
    padding-right: 0.85rem;
}

.gallery-sidebar-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    overflow: hidden;
    transition: opacity 0.2s ease, transform 0.28s ease;
}

.gallery-shell.is-tags-collapsed .gallery-sidebar-body {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-0.5rem);
    height: 0;
    overflow: hidden;
}

.gallery-sidebar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 999px;
    background: #fff;
    color: #4b5563;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.gallery-sidebar-toggle:hover {
    background: #f8fafc;
    color: #111827;
    border-color: #cbd5e1;
}

.gallery-sidebar-toggle i {
    font-size: 0.85rem;
    transition: transform 0.28s ease;
}

.gallery-shell.is-tags-collapsed .gallery-sidebar-toggle {
    display: inline-flex;
}

.gallery-shell.is-tags-collapsed .gallery-sidebar-toggle i {
    transform: rotate(180deg);
}

@media (min-width: 1081px) {
    /* Keep the collapse control inside the panel so it never sits on the resize edge. */
    .gallery-sidebar-toggle {
        display: inline-flex;
        position: absolute;
        top: 0.7rem;
        right: 0.7rem;
        z-index: 4;
        transform: none;
    }

    .gallery-shell:not(.is-tags-collapsed) .gallery-sidebar .gallery-panel-header {
        padding-right: 2.75rem;
    }

    .gallery-shell.is-tags-collapsed .gallery-sidebar-toggle {
        position: static;
        transform: none;
        margin-top: 0.35rem;
    }
}

.gallery-selections-panel .gallery-selection-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gallery-selection-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.35rem 0.5rem;
    align-items: center;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    padding: 0.55rem 0.65rem;
    background: #fff;
}

.gallery-selection-row.is-active {
    border-color: var(--purple);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--purple) 18%, transparent);
}

.gallery-selection-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    border: 0;
    background: transparent;
    padding: 0;
    text-align: left;
    cursor: pointer;
    min-width: 0;
}

.gallery-selection-name {
    font-weight: 600;
    line-height: 1.3;
}

.gallery-selection-meta {
    font-size: 0.85rem;
}

.gallery-selection-status {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    white-space: nowrap;
}

.gallery-selection-status.is-complete {
    color: #047857;
}

.gallery-selection-actions {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

.gallery-selections-hint,
.gallery-selections-empty {
    margin: 0.75rem 0 0;
    font-size: 0.88rem;
}

.tag-row.is-filter-active {
    border-color: var(--purple);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--purple) 35%, transparent);
}

.tag-filter-pill {
    background-color: var(--tag-color, var(--purple)) !important;
    color: #fff !important;
    cursor: pointer;
}

.gallery-stage {
    min-width: 0;
}

.gallery-stage-card,
.gallery-panel {
    border-radius: 18px;
}

.gallery-panel {
    padding: 1.1rem;
}

.gallery-panel-accent {
    background: linear-gradient(180deg, color-mix(in srgb, var(--purple) 12%, transparent), color-mix(in srgb, var(--orange) 8%, transparent));
}

.gallery-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.gallery-panel-header h3,
.gallery-toolbar h3 {
    margin: 0;
}

.gallery-panel-caption {
    margin: 0.25rem 0 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.45;
}

.ai-index-card .gallery-panel-header {
    margin-bottom: 0.85rem;
}

.ai-index-live {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid color-mix(in srgb, var(--purple) 28%, var(--border));
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--purple) 8%, var(--bg-elevated, #fff));
}

.ai-index-live[hidden] {
    display: none !important;
}

.ai-index-live.is-complete {
    border-color: color-mix(in srgb, var(--success, #12b76a) 35%, var(--border));
    background: color-mix(in srgb, var(--success, #12b76a) 8%, var(--bg-elevated, #fff));
}

.ai-index-live-copy {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.ai-index-live-title {
    font-size: 0.95rem;
}

.ai-index-live-detail {
    font-size: 0.85rem;
}

.ai-index-live-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem 1.1rem;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

.ai-index-live-counts strong {
    font-weight: 650;
}

.ai-index-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0;
}

.ai-index-stat {
    display: inline-flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 4.5rem;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--border, rgba(0, 0, 0, 0.1));
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.55);
    line-height: 1.2;
}

.ai-index-stat strong {
    font-size: 0.98rem;
    font-weight: 650;
}

.ai-index-stat span {
    color: var(--text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ai-index-stat.is-warn {
    border-color: rgba(180, 60, 40, 0.35);
    background: rgba(180, 60, 40, 0.06);
}

.ai-index-details {
    margin-top: 0.15rem;
}

.ai-index-details[hidden] {
    display: none;
}

.ai-index-section {
    padding-top: 0.85rem;
    margin-top: 0.85rem;
    border-top: 1px solid var(--border, rgba(0, 0, 0, 0.1));
}

.ai-index-section-label {
    margin: 0 0 0.65rem;
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.ai-index-choices {
    display: grid;
    gap: 0.5rem;
}

.ai-index-choice-form {
    margin: 0;
}

.ai-index-choice {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    width: 100%;
    margin: 0;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--border, rgba(0, 0, 0, 0.12));
    border-radius: 12px;
    background: #fff;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.ai-index-choice:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--purple) 45%, transparent);
    box-shadow: 0 4px 14px rgba(40, 24, 60, 0.08);
    transform: translateY(-1px);
}

.ai-index-choice:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.ai-index-choice.is-best {
    border-color: color-mix(in srgb, var(--orange) 45%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--orange) 8%, transparent), rgba(255, 255, 255, 0.95));
}

.ai-index-choice-badge {
    position: absolute;
    top: 0.55rem;
    right: 0.65rem;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--orange) 16%, transparent);
    color: #9a4a16;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.ai-index-choice-title {
    font-size: 0.95rem;
    font-weight: 650;
}

.ai-index-choice-cost {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.ai-index-public-form {
    margin: 0;
}

.ai-index-toggle {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin: 0;
    cursor: pointer;
}

.ai-index-toggle input {
    margin-top: 0.2rem;
    flex: 0 0 auto;
}

.ai-index-toggle-copy {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.ai-index-toggle-title {
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.35;
}

.ai-index-toggle-hint {
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.4;
}

.ai-index-card .face-index-failures {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border, rgba(0, 0, 0, 0.1));
}

.gallery-videos-cdn-warn {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
}

.gallery-page-toast {
    margin: 0 0 1rem;
}

.gallery-settings-tabs {
    margin: 0;
}

.gallery-tabs {
    display: inline-flex;
    margin: 0 0 1.25rem;
}

.gallery-tab-panel {
    display: block;
}

.gallery-tab-panel[hidden] {
    display: none !important;
}

.gallery-tab-panel-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: var(--modal-bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
    margin: 0 0 1.5rem;
}

.gallery-tab-panel-card .modal-header {
    cursor: default;
}

.gallery-tab-panel-card .gallery-settings-modal-body {
    overflow: visible;
}

.gallery-publish-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 0.5rem;
}

.gallery-danger-zone {
    border-color: rgba(185, 28, 28, 0.35);
}

.gallery-settings-tabs-wrap {
    flex: 0 0 auto;
    padding: 1rem 1.5rem 0.8rem;
    border-bottom: 1px solid var(--border);
    background: var(--modal-bg);
}

.gallery-settings-form {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.gallery-settings-modal-body {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.gallery-settings-modal-footer {
    flex: 0 0 auto;
    background: var(--modal-bg);
    flex-wrap: wrap;
    border-top: 1px solid var(--border);
}

.gallery-settings-modal-footer .modal-footer-actions {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.gallery-settings-feedback {
    flex: 1 1 100%;
    margin: 0;
}

.gallery-settings-panel {
    display: grid;
    gap: 0.9rem;
}

.gallery-settings-panel[hidden] {
    display: none !important;
}

/* ── Gallery setup wizard ── */

.gallery-setup-modal .modal-backdrop {
    cursor: default;
}

.gallery-setup-modal.is-revealing .modal-backdrop {
    opacity: 0;
    transition: opacity 1.45s ease;
}

.gallery-setup-modal.is-revealing.is-visible .modal-backdrop {
    opacity: 1;
}

.gallery-setup-modal.is-revealing .gallery-setup-dialog {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
    transition:
        opacity 1.45s ease,
        transform 1.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.gallery-setup-modal.is-revealing.is-visible .gallery-setup-dialog {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.gallery-setup-dialog {
    width: min(640px, calc(100vw - 2rem));
    max-height: min(88vh, 760px);
    display: flex;
    flex-direction: column;
}

.gallery-setup-header {
    flex: 0 0 auto;
}

.gallery-setup-steps {
    list-style: none;
    margin: 0;
    padding: 1.5rem 1.5rem 1.5rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.gallery-setup-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.gallery-setup-step.is-active {
    color: var(--text);
}

.gallery-setup-step.is-done {
    color: var(--success);
}

.gallery-setup-step-num {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-strong);
    font-weight: 600;
    font-size: 0.8125rem;
}

.gallery-setup-step.is-active .gallery-setup-step-num {
    background: var(--purple-soft);
    border-color: var(--purple);
    color: var(--text);
}

.gallery-setup-step.is-done .gallery-setup-step-num {
    background: var(--success-bg);
    border-color: var(--success);
    color: var(--success);
}

.gallery-setup-panels {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
}

.gallery-setup-step-panel {
    display: grid;
    gap: 0.9rem;
}

.gallery-setup-step-panel[hidden] {
    display: none !important;
}

.gallery-setup-feedback {
    margin: 0 0 0.75rem;
}

.gallery-setup-complete {
    display: grid;
    gap: 1rem;
    justify-items: center;
    text-align: center;
    padding: 0.5rem 0 1rem;
}

.gallery-setup-complete-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--success);
    background: var(--success-bg);
    border: 1px solid color-mix(in srgb, var(--success) 35%, transparent);
}

.gallery-setup-complete-title {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1.35rem;
}

.gallery-setup-complete-copy {
    margin: 0;
    max-width: 28rem;
}

.gallery-setup-complete-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: center;
    width: 100%;
    margin-top: 0.25rem;
}

.gallery-setup-empty {
    display: grid;
    gap: 0.75rem;
    justify-items: start;
}

.gallery-setup-team-list {
    display: grid;
    gap: 0.65rem;
}

.gallery-setup-team-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
}

.gallery-setup-team-row.is-readonly {
    opacity: 0.85;
}

.gallery-setup-team-info {
    display: grid;
    gap: 0.15rem;
}

.gallery-setup-team-check {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9375rem;
    white-space: nowrap;
}

.gallery-setup-team-badge {
    font-size: 0.8125rem;
    white-space: nowrap;
}

.gallery-setup-engagement-all {
    padding: 0.85rem 1rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
}

.gallery-setup-engagement-all .hint {
    display: block;
    margin-top: 0.2rem;
    font-weight: 400;
}

.gallery-setup-engagement-options {
    margin: 0;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}

.gallery-setup-engagement-options legend {
    padding: 0 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
}

.gallery-setup-engagement-row {
    margin-bottom: 0.65rem;
}

.gallery-setup-engagement-row:last-child {
    margin-bottom: 0;
}

.gallery-setup-share-channels {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.gallery-setup-share-channels legend {
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0 0.25rem;
}

.gallery-setup-people-section {
    margin-bottom: 1.5rem;
}

.gallery-setup-people-section:last-child {
    margin-bottom: 0;
}

.gallery-setup-people-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.gallery-setup-people-heading {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.gallery-setup-approval-fieldset {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.gallery-setup-approval-fieldset legend {
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0 0.25rem;
}

.gallery-setup-footer {
    flex: 0 0 auto;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.gallery-setup-actions {
    margin-left: auto;
}

.gallery-setup-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.pending-workspace-invites {
    display: grid;
    gap: 0.75rem;
    padding: 0.75rem 1rem 0;
}

.pending-workspace-invite {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0;
}

.pending-workspace-invite-copy {
    flex: 1 1 16rem;
}

.pending-workspace-invites-auth {
    padding: 0;
    margin: 1.25rem 0;
}

.pending-workspace-invite-card {
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-card);
}

.pending-workspace-invite-card h2 {
    margin: 0 0 0.35rem;
    font-size: 1.125rem;
}

.pending-workspace-invite-card .btn {
    margin-top: 0.75rem;
}

.gallery-setup-panels .ts-wrapper {
    width: 100%;
    margin-top: 0.35rem;
}

.gallery-setup-panels .ts-wrapper.single .ts-control,
.gallery-setup-panels .ts-wrapper.multi .ts-control {
    min-height: 2.75rem;
    padding: 0.5rem 2.25rem 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    font: inherit;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--text);
    background: var(--input-bg);
    box-shadow: none;
}

@media (max-width: 640px) {
    .gallery-setup-steps {
        padding: 1.5rem 1rem 1.5rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gallery-setup-step-label {
        font-size: 0.75rem;
    }
}

/* ── Gallery template picker ── */

.gallery-template-picker {
    display: grid;
    gap: 1.25rem;
    margin-bottom: 0;
}

.gallery-template-group {
    display: grid;
    gap: 0.75rem;
}

.gallery-template-group-count {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted);
}

.gallery-template-group-toolbar {
    margin: 0;
}

.gallery-template-picker-feedback {
    margin: 0;
    font-size: 0.88rem;
}

.gallery-template-picker-feedback.is-error {
    color: #b42318;
}

.gallery-setup-design-editor {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.gallery-template-group-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
}

.gallery-template-group-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
}

.gallery-template-group-head .gallery-template-group-title {
    margin-bottom: 0;
}

.gallery-template-empty {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

.gallery-template-delete-form {
    margin-top: 0.35rem;
}

.gallery-save-template-modal {
    z-index: 260;
}

.gallery-studio-fonts-modal {
    z-index: 270;
}

.gallery-studio-fonts-lead {
    margin: 0 0 1rem;
    font-size: 0.9rem;
}

.gallery-design-font-library {
    margin-top: 0.35rem;
}

.gallery-design-font-library .hint {
    margin: 0.35rem 0 0;
}

.gallery-studio-fonts-upload-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: end;
}

.gallery-studio-fonts-file-label {
    grid-column: 1 / -1;
}

.gallery-studio-fonts-upload-actions {
    grid-column: 1 / -1;
}

.gallery-studio-fonts-hint {
    margin: 0.5rem 0 0;
}

.gallery-studio-fonts-list-title {
    margin: 1.25rem 0 0.65rem;
    font-size: 0.95rem;
    font-weight: 600;
}

.gallery-studio-fonts-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gallery-studio-fonts-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
}

.gallery-studio-fonts-item-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.gallery-studio-fonts-item-label {
    font-size: 1rem;
    line-height: 1.3;
}

.gallery-studio-fonts-item-meta {
    font-size: 0.8rem;
}

@media (max-width: 640px) {
    .gallery-studio-fonts-upload-grid {
        grid-template-columns: 1fr;
    }
}

.gallery-save-template-lead {
    margin: 0 0 1rem;
    font-size: 0.9rem;
}

.gallery-template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.85rem;
}

.gallery-template-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gallery-template-card.is-active {
    border-color: var(--purple);
    box-shadow: 0 0 0 1px var(--purple-soft);
}

.gallery-template-preview {
    background: var(--tpl-bg, #14141d);
    color: var(--tpl-text, #f0f1f6);
    padding: 0.85rem;
    min-height: 108px;
}

.gallery-template-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.65rem;
}

.gallery-template-preview-title {
    font-size: 1.125rem;
    font-weight: 600;
}

.gallery-template-preview-chip {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 999px;
    background: var(--purple);
}

.gallery-template-preview-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.35rem;
}

.gallery-template-preview-grid span {
    display: block;
    aspect-ratio: 1;
    border-radius: 3px;
    background: color-mix(in srgb, var(--tpl-text) 18%, var(--tpl-bg));
}

.gallery-template-card-body {
    padding: 0.85rem;
    display: grid;
    gap: 0.55rem;
}

.gallery-template-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.gallery-template-card-head h3,
.gallery-template-card-head h4 {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.35;
}

.gallery-template-scenario {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    white-space: nowrap;
}

.gallery-template-description {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
}

.gallery-template-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.gallery-design-current {
    margin: 0 0 0.75rem;
}

.gallery-design-fields {
    display: grid;
    gap: 0.85rem;
}

.gallery-design-colors legend {
    padding: 0 0.35rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.gallery-design-color-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
}

.gallery-design-color-control {
    display: flex;
    align-items: center;
    margin-top: 0.35rem;
}

.gallery-design-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

.gallery-design-section {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    margin: 0;
}

.gallery-design-section legend {
    padding: 0 0.35rem;
    font-weight: 600;
}

.gallery-design-branding-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.85rem;
}

.gallery-design-brand-upload {
    display: grid;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px dashed var(--border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface-2) 80%, transparent);
}

.gallery-design-brand-upload.is-uploading {
    opacity: 0.65;
    pointer-events: none;
}

.gallery-design-brand-label {
    font-size: 0.9rem;
    font-weight: 600;
}

.gallery-design-brand-preview,
.gallery-design-hero-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 72px;
    padding: 0.5rem;
    border-radius: 8px;
    background: var(--surface-1);
}

.gallery-design-brand-preview img,
.gallery-design-hero-preview img {
    max-width: 100%;
    max-height: 120px;
    object-fit: contain;
}

.gallery-design-favicon-preview {
    width: 72px;
    min-height: 72px;
    padding: 0.4rem;
}

.gallery-design-favicon-preview img {
    max-width: 56px;
    max-height: 56px;
}

.gallery-design-file-input {
    font-size: 0.85rem;
}

.gallery-design-preview-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.gallery-design-preview-actions .hint {
    margin: 0;
    flex: 1 1 220px;
}

.gallery-design-inline-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.gallery-logo-placement-editor {
    display: grid;
    gap: 0.65rem;
    margin-top: 0.75rem;
}

.gallery-logo-placement-board {
    display: grid;
    gap: 0.45rem;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-1);
}

.gallery-logo-placement-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    align-items: stretch;
}

.gallery-logo-placement-hero-mock {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 4.5rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--modal-bg) 88%, var(--accent) 6%), var(--modal-bg));
    padding: 0.85rem;
    font-weight: 600;
    text-align: center;
    color: var(--text-muted);
}

.gallery-logo-placement-zone {
    font: inherit;
    cursor: pointer;
    border: 1px dashed var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text-muted);
    padding: 0.55rem 0.45rem;
    min-height: 2.5rem;
}

.gallery-logo-placement-zone.is-active,
.gallery-logo-placement-zone.is-drag-over {
    border-color: var(--accent);
    color: var(--text);
    background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
}

.gallery-logo-placement-zone.is-active-studio {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
}

.gallery-logo-placement-zone.is-active-event {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--purple) 45%, transparent);
}

.gallery-logo-placement-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.gallery-logo-placement-chip {
    font: inherit;
    cursor: grab;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    padding: 0.35rem 0.75rem;
}

.gallery-logo-placement-chip.is-selected {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
}

.gallery-design-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0 0 1rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--border);
}

.gallery-design-tab {
    font: inherit;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    padding: 0.45rem 0.85rem;
}

.gallery-design-tab:hover {
    color: var(--text);
    background: var(--surface-2);
}

.gallery-design-tab.is-active {
    color: var(--text);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
    background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
}

.gallery-design-tabpanels {
    display: grid;
    gap: 0;
}

.gallery-design-tabpanel[hidden] {
    display: none !important;
}

.gallery-design-footer-section .hint {
    margin-top: 0.35rem;
}

.gallery-design-footer-options {
    display: grid;
    gap: 1rem;
    margin-top: 0.75rem;
}

.gallery-design-footer-options[hidden] {
    display: none !important;
}

.gallery-feature-collage-options {
    display: grid;
    gap: 1rem;
    margin-top: 0.85rem;
}

.gallery-feature-collage-options[hidden] {
    display: none !important;
}

.gallery-collage-editor {
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--surface-2) 80%, transparent);
    padding: 0.85rem;
    overflow: hidden;
}

.gallery-collage-editor__stage {
    position: relative;
    display: grid;
    gap: 0.55rem;
    width: 100%;
    min-height: 280px;
}

.gallery-collage-editor__slot {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: 0.65rem;
    background: color-mix(in srgb, var(--text) 6%, var(--surface));
    min-height: 4.5rem;
    transition: box-shadow 0.15s ease, transform 0.15s ease, filter 0.15s ease;
}

.gallery-collage-editor__slot--focal {
    overflow: visible;
    background: transparent;
}

.gallery-collage-editor__slot--support:hover,
.gallery-collage-editor__slot--support.is-highlighted {
    z-index: 2;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 70%, transparent);
    transform: scale(1.02);
    filter: brightness(1.06);
}

.gallery-collage-editor__pick {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    height: 100%;
    min-height: inherit;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.gallery-collage-editor__pick:hover,
.gallery-collage-editor__pick:focus-visible {
    color: var(--text);
    outline: none;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent);
}

.gallery-collage-editor__slot--support:hover .gallery-collage-editor__pick,
.gallery-collage-editor__slot--support.is-highlighted .gallery-collage-editor__pick {
    box-shadow: none;
}

.gallery-collage-editor__slot--focal .gallery-collage-editor__pick:hover,
.gallery-collage-editor__slot--focal .gallery-collage-editor__pick:focus-visible {
    box-shadow: none;
    filter: brightness(1.05);
}

.gallery-collage-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 1rem;
    margin: 0.75rem 0 0.5rem;
}

.gallery-collage-editor-toolbar .hint {
    margin: 0;
}

.gallery-collage-editor-captions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1rem 0;
    padding: 0.85rem 1rem;
    background: var(--surface-2, #f4f4f6);
    border: 1px solid var(--border-strong, #e2e2e8);
    border-radius: var(--radius-md, 8px);
}

.gallery-collage-editor-captions .hint {
    margin: 0 0 0.25rem;
}

.gallery-collage-caption-row {
    display: grid;
    grid-template-columns: minmax(6rem, 8rem) 1fr;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
}

.gallery-collage-caption-row span {
    color: var(--text-muted, #6b6b76);
}

.gallery-collage-caption-row input[type="text"] {
    width: 100%;
}

.gallery-collage-editor.is-focal-locked .gallery-collage-editor__slot--focal {
    pointer-events: none;
    opacity: 0.72;
    filter: saturate(0.85);
}

.gallery-collage-editor.is-focal-locked .gallery-collage-editor__slot--focal::after {
    content: 'Locked';
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 5;
    transform: translate(-50%, -50%);
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    pointer-events: none;
}

.gallery-collage-editor.is-focal-locked .gallery-collage-editor__slot--support {
    z-index: 3;
}

.gallery-collage-editor.is-focal-locked .gallery-collage-editor__slot--support:hover,
.gallery-collage-editor.is-focal-locked .gallery-collage-editor__slot--support.is-highlighted {
    z-index: 6;
}

.gallery-collage-editor__slot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-collage-editor__add {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    border: 1.5px dashed color-mix(in srgb, var(--text-muted) 55%, transparent);
    font-size: 1.35rem;
    line-height: 1;
}

.gallery-collage-editor__add-label {
    font-size: 0.75rem;
    letter-spacing: 0.02em;
}

.gallery-collage-editor__clear {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    z-index: 3;
    width: 1.6rem;
    height: 1.6rem;
    border: 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.gallery-collage-editor__clear:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* Editor layout mirrors public presets */
.gallery-collage-editor--magazine .gallery-collage-editor__stage {
    grid-template-columns: 1.15fr 0.85fr;
    grid-template-rows: repeat(4, minmax(3.5rem, 1fr));
    min-height: 320px;
}
.gallery-collage-editor--magazine .gallery-collage-editor__slot--0 { grid-column: 1; grid-row: 1 / -1; }
.gallery-collage-editor--magazine .gallery-collage-editor__slot--1 { grid-column: 2; grid-row: 1; }
.gallery-collage-editor--magazine .gallery-collage-editor__slot--2 { grid-column: 2; grid-row: 2; }
.gallery-collage-editor--magazine .gallery-collage-editor__slot--3 { grid-column: 2; grid-row: 3; }
.gallery-collage-editor--magazine .gallery-collage-editor__slot--4 { grid-column: 2; grid-row: 4; }

.gallery-collage-editor--spiral .gallery-collage-editor__stage {
    grid-template-columns: 1.4fr 0.8fr 0.8fr;
    grid-template-rows: 1.35fr 0.85fr;
    min-height: 300px;
}
.gallery-collage-editor--spiral .gallery-collage-editor__slot--0 { grid-column: 1; grid-row: 1 / -1; }
.gallery-collage-editor--spiral .gallery-collage-editor__slot--1 { grid-column: 2 / -1; grid-row: 1; }
.gallery-collage-editor--spiral .gallery-collage-editor__slot--2 { grid-column: 2; grid-row: 2; }
.gallery-collage-editor--spiral .gallery-collage-editor__slot--3 { grid-column: 3; grid-row: 2; }

.gallery-collage-editor--triptych .gallery-collage-editor__stage {
    grid-template-columns: 1fr;
    min-height: 240px;
}
.gallery-collage-editor--triptych .gallery-collage-editor__slot {
    min-height: 4.75rem;
}

.gallery-collage-editor--cascade .gallery-collage-editor__stage {
    min-height: 280px;
    padding: 1rem 0.75rem 1.5rem;
}
.gallery-collage-editor--cascade .gallery-collage-editor__slot--0 {
    width: 78%;
    margin: 0 auto;
    aspect-ratio: 16 / 10;
    min-height: 0;
    box-shadow: 0 12px 28px color-mix(in srgb, var(--text) 14%, transparent);
}
.gallery-collage-editor--cascade .gallery-collage-editor__slot--1,
.gallery-collage-editor--cascade .gallery-collage-editor__slot--2 {
    position: absolute;
    width: min(32%, 140px);
    aspect-ratio: 3 / 4;
    min-height: 0;
    z-index: 2;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--text) 18%, transparent);
}
.gallery-collage-editor--cascade .gallery-collage-editor__slot--1 {
    left: 4%;
    bottom: 0.35rem;
    transform: rotate(-4deg);
}
.gallery-collage-editor--cascade .gallery-collage-editor__slot--2 {
    right: 4%;
    top: 0.5rem;
    transform: rotate(3deg);
}

/* Heart / Star / Diamond — denser NxN surround grids */
.gallery-collage-editor--heart .gallery-collage-editor__stage,
.gallery-collage-editor--star .gallery-collage-editor__stage,
.gallery-collage-editor--diamond .gallery-collage-editor__stage {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--collage-surround-n, 2), minmax(0, 1fr));
    grid-template-rows: repeat(var(--collage-surround-n, 2), minmax(0, 1fr));
    gap: 0.3rem;
    aspect-ratio: 1;
    max-width: var(--collage-editor-stage-max, 420px);
    width: 100%;
    margin-inline: auto;
    min-height: 0;
}

.gallery-collage-editor--density-2 {
    --collage-editor-stage-max: 420px;
}

.gallery-collage-editor--density-3 {
    --collage-editor-stage-max: 520px;
}

.gallery-collage-editor--density-4 {
    --collage-editor-stage-max: 640px;
}

.gallery-collage-editor--heart .gallery-collage-editor__slot--support,
.gallery-collage-editor--star .gallery-collage-editor__slot--support,
.gallery-collage-editor--diamond .gallery-collage-editor__slot--support {
    aspect-ratio: 1;
    min-height: 0;
    border-radius: 0.85rem;
}

.gallery-collage-editor--star .gallery-collage-editor__slot--support {
    filter: saturate(0.72) brightness(0.92);
}

.gallery-collage-editor--density-3 .gallery-collage-editor__slot--support,
.gallery-collage-editor--density-4 .gallery-collage-editor__slot--support {
    border-radius: 0.55rem;
}

.gallery-collage-editor--density-4 .gallery-collage-editor__add-label {
    font-size: 0.65rem;
}

.gallery-collage-editor--heart .gallery-collage-editor__slot--0 {
    position: absolute;
    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%);
    width: var(--collage-focal-size, 58%);
    aspect-ratio: 1;
    min-height: 0;
    z-index: 4;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}

.gallery-collage-editor--heart .gallery-collage-editor__slot--0 .gallery-collage-editor__pick {
    border-radius: 0;
    overflow: hidden;
    min-height: 0;
    height: 100%;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23000' d='M50 88 C20 68 6 48 6 32 C6 18 16 10 28 10 C38 10 46 16 50 24 C54 16 62 10 72 10 C84 10 94 18 94 32 C94 48 80 68 50 88Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23000' d='M50 88 C20 68 6 48 6 32 C6 18 16 10 28 10 C38 10 46 16 50 24 C54 16 62 10 72 10 C84 10 94 18 94 32 C94 48 80 68 50 88Z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.gallery-collage-editor--star .gallery-collage-editor__slot--0,
.gallery-collage-editor--diamond .gallery-collage-editor__slot--0 {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 4;
    min-height: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}

.gallery-collage-editor--star .gallery-collage-editor__slot--0 {
    transform: translate(-50%, -50%);
    width: var(--collage-focal-size, 56%);
    aspect-ratio: 1;
}

.gallery-collage-editor--star .gallery-collage-editor__slot--0 .gallery-collage-editor__pick {
    border-radius: 0;
    overflow: hidden;
    min-height: 0;
    height: 100%;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.gallery-collage-editor--diamond .gallery-collage-editor__slot--0 {
    transform: translate(-50%, -50%) rotate(45deg);
    width: var(--collage-focal-size, 46%);
    aspect-ratio: 1;
}

.gallery-collage-editor--diamond .gallery-collage-editor__slot--0 .gallery-collage-editor__pick {
    border-radius: 0.35rem;
    overflow: hidden;
    min-height: 0;
    height: 100%;
}

.gallery-collage-editor--diamond .gallery-collage-editor__slot--0 img {
    transform: rotate(-45deg) scale(1.42);
}

.gallery-collage-editor--diamond .gallery-collage-editor__slot--0 .gallery-collage-editor__clear {
    transform: rotate(-45deg);
}

.gallery-collage-editor--diamond .gallery-collage-editor__slot--0 .gallery-collage-editor__add,
.gallery-collage-editor--diamond .gallery-collage-editor__slot--0 .gallery-collage-editor__add-label {
    transform: rotate(-45deg);
}

.gallery-collage-editor__slot--focal {
    --collage-focal-border: ;
    --collage-focal-shadow: ;
}

.gallery-collage-editor--border-thin .gallery-collage-editor__slot--focal {
    --collage-focal-border: drop-shadow(0 0 0.6px var(--collage-focal-border-color, #fff)) drop-shadow(0 0 1.2px var(--collage-focal-border-color, #fff));
}

.gallery-collage-editor--border-thick .gallery-collage-editor__slot--focal {
    --collage-focal-border: drop-shadow(0 0 1px var(--collage-focal-border-color, #fff)) drop-shadow(0 0 2.5px var(--collage-focal-border-color, #fff)) drop-shadow(0 0 4px var(--collage-focal-border-color, #fff));
}

.gallery-collage-editor--shadow-soft .gallery-collage-editor__slot--focal {
    --collage-focal-shadow: drop-shadow(0 10px 18px color-mix(in srgb, var(--text) 28%, transparent));
}

.gallery-collage-editor--shadow-strong .gallery-collage-editor__slot--focal {
    --collage-focal-shadow: drop-shadow(0 14px 28px color-mix(in srgb, var(--text) 40%, transparent));
}

.gallery-collage-editor--border-thin .gallery-collage-editor__slot--focal,
.gallery-collage-editor--border-thick .gallery-collage-editor__slot--focal,
.gallery-collage-editor--shadow-soft .gallery-collage-editor__slot--focal,
.gallery-collage-editor--shadow-strong .gallery-collage-editor__slot--focal {
    filter: var(--collage-focal-border) var(--collage-focal-shadow);
}

.gallery-collage-editor--chevron .gallery-collage-editor__stage {
    grid-template-columns: 1.2fr 1fr 1fr 1.1fr;
    min-height: 200px;
}
.gallery-collage-editor--chevron .gallery-collage-editor__slot {
    border-radius: 0;
}
.gallery-collage-editor--chevron .gallery-collage-editor__slot--0,
.gallery-collage-editor--chevron .gallery-collage-editor__slot--1,
.gallery-collage-editor--chevron .gallery-collage-editor__slot--2 {
    clip-path: polygon(0 0, 88% 0, 100% 100%, 12% 100%);
}
.gallery-collage-editor--chevron .gallery-collage-editor__slot--3 {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 12% 100%);
}

.gallery-collage-picker-modal {
    z-index: 2800;
}

.gallery-collage-picker-panel {
    width: min(720px, calc(100vw - 2rem));
    max-height: min(80vh, 720px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.gallery-collage-picker-panel > .modal-body.gallery-collage-picker-body,
.gallery-collage-picker-body {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.gallery-collage-picker-body > .empty-state,
.gallery-collage-picker-body > .muted {
    flex: 0 0 auto;
}

.gallery-collage-picker-search {
    flex: 0 0 auto;
}

.gallery-collage-picker-search input {
    width: 100%;
}

.gallery-collage-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    grid-auto-rows: max-content;
    align-content: start;
    gap: 0.65rem;
    flex: 1 1 auto;
    min-height: 14rem;
    max-height: min(52vh, 460px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.15rem;
    -webkit-overflow-scrolling: touch;
}

.gallery-collage-picker-item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 0.7rem;
    background: var(--surface, var(--modal-bg, #fff));
    overflow: hidden;
    cursor: pointer;
    text-align: left;
    color: var(--text);
    min-width: 0;
    /* Never let flex/grid compression squash thumbs to 0 height */
    min-height: max-content;
    height: auto;
    align-self: start;
}

.gallery-collage-picker-item:hover,
.gallery-collage-picker-item:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
    outline: none;
}

.gallery-collage-picker-thumb {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 7.5rem;
    background: color-mix(in srgb, var(--text) 8%, transparent);
    overflow: hidden;
    flex: 0 0 auto;
}

.gallery-collage-picker-thumb.is-broken {
    display: grid;
    place-items: center;
    color: var(--text-muted, #64748b);
    font-size: 0.7rem;
}

.gallery-collage-picker-thumb.is-broken::after {
    content: "Unavailable";
}

.gallery-collage-picker-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
}

.gallery-collage-picker-name {
    display: block;
    padding: 0 0.45rem 0.45rem;
    font-size: 0.72rem;
    line-height: 1.25;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 0 auto;
}

body.gallery-collage-picker-open .studio-collage-toolbar,
body.gallery-collage-picker-open .studio-builder-popover {
    visibility: hidden;
    pointer-events: none;
}

@media (max-width: 640px) {
    .gallery-collage-editor--magazine .gallery-collage-editor__stage,
    .gallery-collage-editor--spiral .gallery-collage-editor__stage,
    .gallery-collage-editor--chevron .gallery-collage-editor__stage {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        min-height: 0;
    }

    .gallery-collage-editor--magazine .gallery-collage-editor__slot--0,
    .gallery-collage-editor--spiral .gallery-collage-editor__slot--0 {
        grid-column: 1 / -1;
        grid-row: auto;
        width: 100%;
        transform: none;
        clip-path: none;
        mask-image: none;
        -webkit-mask-image: none;
        aspect-ratio: 16 / 10;
    }

    .gallery-collage-editor--heart .gallery-collage-editor__stage,
    .gallery-collage-editor--star .gallery-collage-editor__stage,
    .gallery-collage-editor--diamond .gallery-collage-editor__stage {
        max-width: 100%;
    }

    .gallery-collage-editor--cascade .gallery-collage-editor__slot--1,
    .gallery-collage-editor--cascade .gallery-collage-editor__slot--2 {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        width: 100%;
        transform: none;
    }
}

.gallery-hero-text-placement-editor {
    display: grid;
    gap: 0.65rem;
    margin: 0.75rem 0;
}

.gallery-hero-text-placement-board {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-1);
}

.gallery-hero-text-placement-zone {
    font: inherit;
    cursor: pointer;
    border: 1px dashed var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text-muted);
    padding: 0.55rem 0.35rem;
    min-height: 2.5rem;
    font-size: 0.82rem;
}

.gallery-hero-text-placement-zone.is-active,
.gallery-hero-text-placement-zone:hover {
    border-color: var(--accent);
    color: var(--text);
    background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
}

.design-font-option,
.design-icon-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.design-font-option {
    font-size: 1.05rem;
    line-height: 1.35;
    padding: 0.15rem 0;
}

.ts-dropdown .option .design-font-option {
    min-height: 1.75rem;
    font-size: 1.05rem;
}

.ts-control .design-font-option {
    font-size: 0.95rem;
}

.ts-dropdown .option.active .design-font-option,
.ts-dropdown .option:hover .design-font-option {
    color: inherit;
}

.design-icon-glyph {
    display: inline-flex;
    width: 1.25rem;
    justify-content: center;
    font-weight: 700;
}


.gallery-settings-panel fieldset {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.75rem 0.85rem;
    margin: 0;
}

.gallery-settings-panel legend {
    padding: 0 0.35rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.gallery-details-form {
    display: grid;
    gap: 0.9rem;
}

.gallery-scan-card {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.gallery-scan-card strong {
    display: block;
    font-family: var(--font-display);
    font-size: 2rem;
    line-height: 1;
}

.gallery-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.gallery-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.gallery-search {
    display: block;
    min-width: 240px;
}

.gallery-search input {
    width: 100%;
}

.gallery-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color, #e5e7eb);
}

.gallery-grid-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem 1.25rem;
    margin: 0 0 0.95rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 14px;
    background: #f8fafc;
}

.gallery-grid-toolbar-range {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 0.9rem;
    min-width: 0;
}

.gallery-pagination-range {
    margin: 0;
    font-size: 0.92rem;
}

.gallery-pagination-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.gallery-pagination-status {
    white-space: nowrap;
    font-size: 0.86rem;
}

.gallery-pagination-controls .btn.is-disabled,
.gallery-pagination-nav .btn.is-disabled {
    opacity: 0.5;
    pointer-events: none;
}

.gallery-grid-toolbar-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem 1.15rem;
    margin-left: auto;
}

.gallery-grid-toolbar-label {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7280;
}

.gallery-grid-size {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.gallery-grid-size-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    margin: 0;
    padding: 0;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    background: #fff;
    color: #374151;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.gallery-grid-size-btn:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.gallery-grid-size-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.gallery-grid-size-value {
    min-width: 3.1rem;
    text-align: center;
    font-size: 0.92rem;
    font-weight: 600;
    color: #111827;
    font-variant-numeric: tabular-nums;
}

.gallery-grid-per-page {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
}

.gallery-grid-per-page select {
    min-width: 4.5rem;
    padding: 0.35rem 0.55rem;
    border-radius: 10px;
    border: 1px solid #d1d5db;
    background: #fff;
    font-size: 0.92rem;
}

.gallery-pagination-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.gallery-pagination-per-page {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.gallery-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.filter-pill {
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    border-radius: 999px;
    padding: 0.5rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}

.filter-pill:hover {
    border-color: color-mix(in srgb, var(--purple) 50%, transparent);
    transform: translateY(-1px);
}

.filter-pill.is-active {
    background: linear-gradient(135deg, color-mix(in srgb, var(--purple) 92%, transparent), color-mix(in srgb, var(--orange) 72%, transparent));
    border-color: transparent;
    color: #fff;
}

.gallery-grid-note {
    margin: 0 0 0.9rem;
    color: var(--text-muted);
    font-size: 0.88rem;
}

.gallery-empty-state {
    padding: 2rem;
    border: 1px dashed var(--border-strong);
    border-radius: 18px;
    background: color-mix(in srgb, var(--purple) 4%, transparent);
}

.gallery-empty-state h4 {
    margin-top: 0;
}

.gallery-empty-filter {
    margin-top: 1rem;
}

.photo-grid.is-loading {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.photo-thumb {
    position: relative;
    margin: 0;
    aspect-ratio: 0.95;
    border-radius: 16px;
    overflow: hidden;
    background: var(--surface-2);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.16);
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.photo-thumb:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.22);
    border-color: color-mix(in srgb, var(--purple) 35%, transparent);
}

.photo-thumb.is-dragging {
    opacity: 0.65;
}

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

.photo-thumb.video-thumb {
    cursor: pointer;
}

.video-thumb-fallback {
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--purple) 35%, transparent), transparent 55%),
        linear-gradient(160deg, #1a1524 0%, #0d0b12 100%);
}

.video-media-badge {
    position: absolute;
    top: 0.55rem;
    left: 0.55rem;
    z-index: 2;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.82);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.video-processing-badge {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    z-index: 2;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    background: rgba(234, 179, 8, 0.92);
    color: #1a1a1a;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    max-width: calc(100% - 1.1rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.video-processing-badge.is-failed {
    background: rgba(185, 28, 28, 0.92);
    color: #fff;
}

.photo-thumb.video-thumb.is-processing .video-thumb-fallback {
    opacity: 0.55;
}

.photo-thumb.video-thumb.is-processing {
    cursor: default;
}

.photo-thumb.video-thumb.is-failed {
    outline: 2px solid rgba(185, 28, 28, 0.55);
}

.video-thumb-hover-preview {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.photo-thumb.video-thumb.is-hover-preview .video-thumb-hover-preview {
    opacity: 1;
}

.photo-thumb.video-thumb.is-hover-preview img {
    opacity: 0;
}

.video-play-hit {
    z-index: 3;
}

.gallery-video-preview-player {
    display: block;
    width: 100%;
    max-height: min(70vh, 720px);
    background: #0b0b0b;
    border-radius: 12px;
}

.video-preview-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

.video-preview-actions .checkbox-label {
    margin-right: auto;
}

.photo-meta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.7rem;
    background: linear-gradient(180deg, rgba(10, 10, 16, 0) 0%, rgba(10, 10, 16, 0.82) 100%);
}

.photo-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.photo-tags {
    position: static;
    max-width: none;
    justify-content: flex-start;
}

.face-badge {
    top: 0.55rem;
    left: 0.55rem;
    bottom: auto;
    background: rgba(17, 24, 39, 0.8);
}

.face-likely_face {
    color: #b7f4c7;
}

.face-likely_no_face {
    color: #f6d794;
    opacity: 1;
}

.photo-grid.selectable .photo-thumb {
    cursor: grab;
}

.photo-grid.selectable .photo-thumb:active {
    cursor: grabbing;
}

.photo-select {
    top: 0.55rem;
    left: 0.55rem;
    opacity: 0;
    pointer-events: none;
}

.photo-thumb:hover .photo-select,
.photo-thumb.is-selected .photo-select {
    opacity: 1;
    pointer-events: auto;
}

.photo-checkbox {
    width: 18px;
    height: 18px;
}

.photo-thumb.is-selected {
    border-color: color-mix(in srgb, var(--purple) 95%, transparent);
    transform: translateY(-3px);
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--purple) 55%, transparent),
        0 22px 42px rgba(40, 24, 60, 0.28);
}

.photo-thumb.is-selected:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--purple) 100%, transparent);
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--purple) 65%, transparent),
        0 26px 48px rgba(40, 24, 60, 0.32);
}

.cover-badge {
    top: 0.55rem;
    right: 0.55rem;
}

.lightbox-modal {
    z-index: 260;
}

.lightbox-panel {
    width: min(1100px, 94vw);
    max-height: calc(100vh - 2rem);
}

.lightbox-body {
    padding: 0.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(8, 8, 12, 0.95);
}

#gallery-lightbox-image {
    max-width: 100%;
    max-height: calc(100vh - 14rem);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
    transition: transform 0.15s ease;
}

.lightbox-image-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 240px;
    position: relative;
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.72);
    color: #fff;
    font-size: 1.85rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.lightbox-nav:hover {
    background: rgba(17, 24, 39, 0.92);
    border-color: rgba(255, 255, 255, 0.4);
}

.lightbox-nav:disabled {
    opacity: 0.35;
    cursor: default;
}

.lightbox-nav-prev {
    left: 0.65rem;
}

.lightbox-nav-next {
    right: 0.65rem;
}

.lightbox-nav-status {
    position: absolute;
    left: 50%;
    bottom: 0.65rem;
    transform: translateX(-50%);
    z-index: 3;
    margin: 0;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.72);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.lightbox-nav[hidden],
.lightbox-nav-status[hidden] {
    display: none !important;
}

.lightbox-saving-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: rgba(8, 8, 12, 0.72);
    border-radius: 10px;
    z-index: 2;
}

.lightbox-saving-overlay[hidden] {
    display: none !important;
}

.lightbox-saving-overlay p {
    margin: 0;
    color: #fff;
    font-size: 0.95rem;
}

.lightbox-saving-spinner {
    width: 2.25rem;
    height: 2.25rem;
    border: 3px solid rgba(255, 255, 255, 0.25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: lightbox-spin 0.8s linear infinite;
}

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

.lightbox-image-wrap.is-saving #gallery-lightbox-image {
    opacity: 0.45;
}

.lightbox-orient-actions .btn.is-loading {
    pointer-events: none;
    opacity: 0.85;
}

.lightbox-orient-footer,
.lightbox-photo-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
}

.lightbox-photo-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem 1rem;
    width: 100%;
}

.lightbox-photo-actions-primary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.lightbox-photo-actions-primary .btn.is-active {
    border-color: color-mix(in srgb, var(--purple, #7c5cbf) 55%, var(--border));
    background: color-mix(in srgb, var(--purple, #7c5cbf) 14%, transparent);
}

.lightbox-orient-hint {
    margin: 0;
    font-size: 0.9rem;
}

.lightbox-orient-actions {
    display: flex;
    width: auto;
    justify-content: flex-end;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.lightbox-orient-footer .alert,
.lightbox-photo-footer .alert {
    margin: 0;
}

body.is-gallery-tags-resizing {
  cursor: col-resize !important;
  user-select: none !important;
}

body.is-gallery-tags-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}

.tag-row {
    transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

.tag-row.is-dragging {
    opacity: 0.65;
}

.tag-row.is-drop-target {
    border-color: color-mix(in srgb, var(--purple) 65%, transparent);
    background: color-mix(in srgb, var(--purple) 14%, transparent);
    transform: translateY(-1px);
}

.tag-row.is-reorder-target {
    border-color: color-mix(in srgb, var(--orange) 65%, transparent);
    background: color-mix(in srgb, var(--orange) 12%, transparent);
}

.face-scan-modal-body {
    display: grid;
    gap: 1rem;
}

.face-scan-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.face-scan-progress-wrap {
    display: grid;
    gap: 0.5rem;
}

.face-scan-progress-bar {
    height: 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--purple) 14%, transparent);
    overflow: hidden;
}

.face-scan-progress-bar span {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(135deg, var(--purple), var(--orange));
    transition: width 0.2s ease;
}

.face-scan-preview-wrap {
    min-height: 240px;
    border-radius: 18px;
    border: 1px dashed var(--border-strong);
    background: color-mix(in srgb, var(--purple) 5%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.face-scan-preview-wrap img {
    width: 100%;
    max-height: 340px;
    object-fit: contain;
    display: block;
}

.face-scan-preview-empty {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: center;
    text-align: center;
    padding: 2rem;
}

.face-scan-filename {
    margin: 0;
    font-weight: 600;
    word-break: break-word;
}

@media (max-width: 1080px) {
    .gallery-shell,
    .gallery-shell.is-tags-collapsed {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .gallery-sidebar {
        position: static;
    }

    .gallery-sidebar-toggle,
    .gallery-sidebar-resizer {
        display: none !important;
    }

    .gallery-shell.is-tags-collapsed .gallery-sidebar-body {
        opacity: 1;
        pointer-events: auto;
        transform: none;
        height: auto;
        overflow: visible;
    }
}

@media (max-width: 720px) {
    .gallery-overview,
    .face-scan-summary {
        grid-template-columns: 1fr 1fr;
    }

    .gallery-search {
        min-width: 100%;
    }

    .photo-grid {
        grid-template-columns: repeat(auto-fill, minmax(var(--photo-grid-min, 140px), var(--photo-grid-min, 140px)));
        justify-content: start;
    }
}

@media (max-width: 560px) {
    .gallery-overview,
    .face-scan-summary {
        grid-template-columns: 1fr;
    }
}

.upload-panel { margin-bottom: 1.5rem; }

.upload-modal-body .upload-panel {
    margin-bottom: 0;
}

.upload-tag-field .hint {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.upload-tag-empty {
    margin: 0 0 1rem;
    font-size: 0.9rem;
}

.profile-page .hero {
    align-items: center;
}

.profile-identity {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.8rem 1rem;
}

.profile-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
}

.profile-avatar-placeholder {
    display: grid;
    place-items: center;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--purple), var(--orange));
}

.profile-email {
    margin: 0.15rem 0 0;
}

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

.profile-notifications-card {
    max-width: 760px;
}

.profile-custom-domain-card {
    margin-top: 1.25rem;
    max-width: 760px;
}

.custom-domain-list {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.custom-domain-list-item {
    padding: 0.9rem 1rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface, #fff);
}

.custom-domain-list-item.is-primary {
    border-color: color-mix(in srgb, var(--accent, #7D5EA8) 45%, var(--border));
}

.custom-domain-list-item .badge {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--accent, #7D5EA8);
    color: #fff;
    vertical-align: middle;
}

.custom-domain-list-item .badge-muted {
    background: #e2e8f0;
    color: #334155;
}

.custom-domain-list-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.75rem;
}

.custom-domain-add-form {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.custom-domain-dns-box {
    margin: 1rem 0;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2, rgba(0, 0, 0, 0.03));
}

.custom-domain-dns-box h4 {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
}

.custom-domain-dns-table {
    width: 100%;
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
}

.custom-domain-help {
    margin: 0.75rem 0 1rem;
}

.custom-domain-help summary {
    cursor: pointer;
    font-weight: 600;
}

.custom-domain-help-body {
    margin-top: 0.65rem;
}

.custom-domain-help-body p {
    margin: 0.4rem 0;
}

.form-inline-actions {
    margin: 0.75rem 0;
}

.profile-activity-block {
    margin-top: 1.1rem;
}

.profile-last-login {
    margin: 0.9rem 0 0;
}

.upload-dropzone {
    border: 2px dashed var(--border-strong);
    border-radius: 12px;
    padding: 2.5rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.upload-dropzone-label {
    display: block;
    cursor: pointer;
    margin: 0;
}

.upload-dropzone-label p {
    margin: 0;
}

.upload-dropzone-label p + p {
    margin-top: 0.35rem;
}

.upload-dropzone:hover,
.upload-dropzone.is-dragover {
    border-color: var(--purple);
    background: color-mix(in srgb, var(--purple) 6%, transparent);
}

.upload-progress {
    margin: 1rem 0 0;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background: var(--bg-elevated, rgba(0, 0, 0, 0.02));
}

.upload-progress[hidden] {
    display: none !important;
}

.upload-progress-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}

.upload-progress-count {
    margin: 0;
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

.upload-progress-sep {
    margin: 0 0.15rem;
    color: var(--text-muted);
    font-weight: 400;
}

.upload-progress-label {
    margin: 0;
    font-size: 0.85rem;
    text-align: right;
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upload-progress-track {
    height: 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--border) 85%, transparent);
    overflow: hidden;
}

.upload-progress-fill {
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: var(--purple);
    transition: width 0.2s ease;
}

.upload-progress.is-complete .upload-progress-fill {
    background: var(--success, #12b76a);
}

.upload-progress.is-error .upload-progress-fill {
    background: var(--error, #b42318);
}

.upload-progress-errors {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    max-height: 7.5rem;
    overflow-y: auto;
    font-size: 0.82rem;
    color: var(--error, #b42318);
    border-top: 1px solid var(--border);
    padding-top: 0.65rem;
}

.upload-progress-errors[hidden] {
    display: none !important;
}

.upload-progress-errors li {
    padding: 0.2rem 0;
    word-break: break-word;
}

.upload-progress-actions {
    margin-top: 0.75rem;
}

.bulk-delete-progress {
    margin-top: 1rem;
}

#bulk-delete-progress-modal .modal-panel {
    pointer-events: auto;
}

#bulk-delete-progress-modal .modal-backdrop {
    cursor: default;
}

.upload-dock {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    z-index: 190;
    transform: translateX(-50%);
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    width: min(460px, calc(100vw - 2rem));
    margin: 0;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    background: var(--bg-elevated, #fff);
    color: inherit;
    box-shadow: 0 12px 36px rgba(15, 18, 28, 0.16);
    cursor: pointer;
    text-align: left;
    font: inherit;
}

.upload-dock[hidden] {
    display: none !important;
}

body.bulk-bar-visible .upload-dock {
    bottom: 5.5rem;
}

.upload-dock:hover,
.upload-dock:focus-visible {
    border-color: color-mix(in srgb, var(--purple) 55%, var(--border));
    outline: none;
}

.upload-dock-main {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    flex: 1 1 auto;
    min-width: 0;
}

.upload-dock-text {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.upload-dock-title {
    font-weight: 600;
    font-size: 0.92rem;
}

.upload-dock-count {
    font-variant-numeric: tabular-nums;
    font-size: 1rem;
}

.upload-dock-track {
    display: block;
    height: 0.45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--border) 85%, transparent);
    overflow: hidden;
}

.upload-dock-fill {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: var(--purple);
    transition: width 0.2s ease;
}

.upload-dock.is-complete .upload-dock-fill {
    background: var(--success, #12b76a);
}

.upload-dock.is-error .upload-dock-fill {
    background: var(--error, #b42318);
}

.upload-dock-hint {
    font-size: 0.78rem;
}

.upload-dock-cancel {
    align-self: center;
    flex: 0 0 auto;
    cursor: pointer;
}

.schedule-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.schedule-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.schedule-legend-swatch {
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 999px;
}

.schedule-legend-swatch-tentative { background: var(--text-muted); }
.schedule-legend-swatch-confirmed { background: var(--purple); }
.schedule-legend-swatch-completed { background: var(--success); }
.schedule-legend-swatch-cancelled { background: var(--error); }

.schedule-calendar-wrap {
    padding: 1rem;
    overflow: hidden;
}

#schedule-calendar {
    --fc-border-color: var(--border);
    --fc-page-bg-color: transparent;
    --fc-neutral-bg-color: var(--bg-elevated);
    --fc-list-event-hover-bg-color: color-mix(in srgb, var(--purple) 8%, transparent);
    --fc-today-bg-color: color-mix(in srgb, var(--purple) 8%, transparent);
}

#schedule-calendar .fc-toolbar-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
}

#schedule-calendar .fc-button-primary {
    background: var(--purple);
    border-color: var(--purple);
    color: #fff;
}

#schedule-calendar .fc-button-primary:hover,
#schedule-calendar .fc-button-primary:focus-visible {
    background: color-mix(in srgb, var(--purple) 88%, #fff);
    border-color: color-mix(in srgb, var(--purple) 88%, #fff);
    color: #fff;
}

#schedule-calendar .fc-button-primary:disabled {
    background: color-mix(in srgb, var(--purple) 45%, transparent);
    border-color: transparent;
}

#schedule-calendar .fc-button-primary:not(:disabled).fc-button-active,
#schedule-calendar .fc-button-primary:not(:disabled):active {
    background: color-mix(in srgb, var(--purple) 82%, #000);
    border-color: color-mix(in srgb, var(--purple) 82%, #000);
    color: #fff;
}

#schedule-calendar .fc-daygrid-day-number,
#schedule-calendar .fc-col-header-cell-cushion,
#schedule-calendar .fc-timegrid-slot-label-cushion {
    color: var(--text-muted);
}

#schedule-calendar .fc-event {
    border-radius: 6px;
    padding: 1px 2px;
    font-size: 0.82rem;
}

.schedule-event-gallery-link {
    margin: 0.5rem 0 0;
}

.schedule-event-modal-panel {
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
}

.schedule-event-tabs-wrap {
    padding: 0 1.5rem 0.8rem;
    border-bottom: 1px solid var(--border);
    background: var(--modal-bg);
}

.schedule-event-tabs {
    margin: 0;
    flex-wrap: wrap;
}

.schedule-event-modal-body {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.schedule-event-panel {
    display: grid;
    gap: 0.9rem;
}

.schedule-event-panel[hidden] {
    display: none !important;
}

.schedule-team-placeholder {
    padding: 0.5rem 0;
}

.schedule-team-placeholder h3 {
    margin: 0 0 0.75rem;
    font-size: 1rem;
}

.schedule-team-placeholder p {
    margin: 0 0 0.75rem;
}

.schedule-team-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.schedule-team-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 8px);
    background: var(--surface-2);
}

.schedule-team-row-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.schedule-team-row-info strong {
    font-size: 0.9375rem;
}

.schedule-team-row-info .muted {
    font-size: 0.8125rem;
}

.schedule-team-row-role {
    flex-shrink: 0;
    margin: 0;
}

.schedule-team-row-role select {
    min-width: 12rem;
}

.schedule-team-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

/* ── Tom Select (searchable dropdowns) ── */

.form .ts-wrapper,
.modal-body .ts-wrapper,
.gallery-settings-modal-body .ts-wrapper,
.upload-tag-field .ts-wrapper {
    width: 100%;
    margin-top: 0.35rem;
}

.bulk-tag .ts-wrapper {
    width: 11rem;
    min-width: 11rem;
    max-width: 11rem;
    margin-top: 0;
    flex: 0 0 auto;
}

.form .ts-wrapper.single .ts-control,
.form .ts-wrapper.multi .ts-control,
.modal-body .ts-wrapper.single .ts-control,
.modal-body .ts-wrapper.multi .ts-control,
.gallery-settings-modal-body .ts-wrapper.single .ts-control,
.gallery-settings-modal-body .ts-wrapper.multi .ts-control,
.bulk-tag .ts-wrapper.single .ts-control,
.bulk-tag .ts-wrapper.multi .ts-control,
.upload-tag-field .ts-wrapper.single .ts-control,
.upload-tag-field .ts-wrapper.multi .ts-control {
    min-height: 2.75rem;
    padding: 0.5rem 2.25rem 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    font: inherit;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--text);
    background: var(--input-bg);
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form .ts-wrapper.single.input-active .ts-control,
.form .ts-wrapper.single.focus .ts-control,
.form .ts-wrapper.multi.input-active .ts-control,
.form .ts-wrapper.multi.focus .ts-control,
.modal-body .ts-wrapper.single.input-active .ts-control,
.modal-body .ts-wrapper.single.focus .ts-control,
.modal-body .ts-wrapper.multi.input-active .ts-control,
.modal-body .ts-wrapper.multi.focus .ts-control,
.gallery-settings-modal-body .ts-wrapper.single.input-active .ts-control,
.gallery-settings-modal-body .ts-wrapper.single.focus .ts-control,
.gallery-settings-modal-body .ts-wrapper.multi.input-active .ts-control,
.gallery-settings-modal-body .ts-wrapper.multi.focus .ts-control,
.bulk-tag .ts-wrapper.single.input-active .ts-control,
.bulk-tag .ts-wrapper.single.focus .ts-control,
.upload-tag-field .ts-wrapper.single.input-active .ts-control,
.upload-tag-field .ts-wrapper.single.focus .ts-control {
    border-color: var(--purple);
    box-shadow: 0 0 0 3px var(--purple-soft);
}

:is(.form, .modal-body, .gallery-settings-modal-body, .bulk-tag, .upload-tag-field) .ts-wrapper.single .ts-control .item,
:is(.form, .modal-body, .gallery-settings-modal-body, .bulk-tag, .upload-tag-field) .ts-wrapper.multi .ts-control .item {
    font-size: 1rem;
    color: var(--text);
}

:is(.form, .modal-body, .gallery-settings-modal-body, .bulk-tag, .upload-tag-field) .ts-wrapper .ts-control input {
    font: inherit;
    font-size: 1rem;
    color: var(--text);
}

:is(.form, .modal-body, .gallery-settings-modal-body, .bulk-tag, .upload-tag-field) .ts-wrapper .ts-control input::placeholder {
    color: var(--text-muted);
}

:is(.form, .modal-body, .gallery-settings-modal-body, .bulk-tag, .upload-tag-field) .ts-wrapper.single .ts-control::after {
    border-color: var(--text-muted) transparent transparent;
    right: 0.85rem;
}

.ts-dropdown {
    margin-top: 0.35rem;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: var(--modal-bg);
    color: var(--text);
    box-shadow: var(--modal-shadow);
    /* Sit above modals (design section modal 1200) and toasts / colour picker
       (1400), since the dropdown is a transient overlay for whatever opened it. */
    z-index: 1500;
    overflow: hidden;
}

.ts-dropdown .ts-dropdown-content {
    max-height: min(240px, 45vh);
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: smooth;
    background: var(--modal-bg);
}

.ts-dropdown .dropdown-input {
    background: var(--input-bg);
    border-bottom: 1px solid var(--border);
    padding: 0.65rem 0.75rem;
}

.ts-dropdown .dropdown-input input {
    font: inherit;
    font-size: 1rem;
    color: var(--text);
    background: transparent;
}

.ts-dropdown .option,
.ts-dropdown .no-results,
.ts-dropdown .create {
    font-size: 0.9375rem;
    padding: 0.55rem 0.75rem;
    color: var(--text);
}

.ts-dropdown .option.active {
    background: var(--purple-soft);
    color: var(--text);
}

.ts-dropdown .option:hover,
.ts-dropdown .option.active:hover {
    background: var(--purple-soft);
}

.ts-dropdown .optgroup-header {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 0.65rem 0.75rem 0.35rem;
    background: var(--bg-elevated);
    border-top: 1px solid var(--border);
    pointer-events: none;
}

.ts-dropdown .optgroup:first-child .optgroup-header {
    border-top: none;
}

.ts-dropdown .optgroup .option {
    padding-left: 1.25rem;
}

.schedule-team-row .ts-wrapper {
    margin-top: 0;
    min-width: 12rem;
}

.dashboard-client-filter .ts-wrapper {
    margin-top: 0;
    min-width: 14rem;
}

.plan-cards {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.plan-card.is-current {
    border-color: var(--purple);
    box-shadow: 0 0 0 1px var(--purple);
}

.plan-price {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0.5rem 0;
}

.plan-features {
    margin: 0 0 1rem;
    padding-left: 1.1rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.btn-danger {
    background: rgba(239, 68, 68, 0.15);
    color: var(--error);
    border: 1px solid rgba(239, 68, 68, 0.35);
}

.danger-zone {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.danger-zone h3 {
    color: var(--error);
    font-size: 0.95rem;
}

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

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

.limit-field {
    padding: 0.75rem 0;
}

.limit-unlimited {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.limit-field input:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.product-limits span {
    display: block;
}

.row-inactive {
    opacity: 0.55;
}

.entitlement-list {
    margin: 0;
    padding-left: 1.2rem;
}

.product-desc {
    font-size: 0.9rem;
    margin: 0.35rem 0 0.75rem;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.platform-switcher {
    display: flex;
    align-items: center;
    margin-right: 0.75rem;
}

.platform-switcher-select {
    font-family: var(--font-body);
    font-size: 0.875rem;
    padding: 0.4rem 2rem 0.4rem 0.65rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text);
    max-width: 220px;
}

.data-table td.table-actions {
    vertical-align: middle;
    text-align: right;
    white-space: nowrap;
}

.data-table td.table-actions .btn,
.data-table td.table-actions .inline-form {
    vertical-align: middle;
}

.table-actions > * + * {
    margin-left: 0.35rem;
}

.table-actions-wrap {
    min-width: 10rem;
}

.segmented {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
}

.segmented-btn {
    font-family: var(--font-body);
    font-size: 0.875rem;
    padding: 0.45rem 0.85rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.segmented-btn.is-active {
    background: var(--purple);
    color: #fff;
}

.form-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.75rem 1rem;
}

.input-copy-row {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.input-copy-row input {
    flex: 1;
    min-width: 0;
}

.checkout-result {
    margin-top: 0.5rem;
    padding: 0.75rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
}

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

.detail-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 0 0 0.25rem;
}

.product-tabs,
.user-tabs,
.hosting-tabs {
    margin: 1.25rem 0 1rem;
    flex-wrap: wrap;
    max-width: 100%;
}

.hosting-tabpanel[hidden] {
    display: none;
}

.hosting-tabpanel {
    margin-top: 0.25rem;
}

.user-tabpanel[hidden] {
    display: none;
}

.user-tabpanel .section-header {
    align-items: flex-start;
}

.integration-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: 1rem;
}

.integration-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.integration-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}

.integration-head h3 {
    margin: 0 0 0.15rem;
}

.integration-head .muted {
    margin: 0;
    font-size: 0.85rem;
}

.integration-meta {
    margin: 0;
    font-size: 0.82rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.integration-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.5rem;
    align-items: center;
}

.integration-test-note {
    margin: 0;
}

.danger-zone {
    border: 1px solid var(--error);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    background: var(--error-bg);
}

.danger-zone .form-card {
    max-width: 28rem;
}

.tab-count {
    display: inline-block;
    min-width: 1.4rem;
    padding: 0 0.4rem;
    margin-left: 0.35rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--purple) 25%, transparent);
    font-size: 0.75rem;
    line-height: 1.4rem;
    text-align: center;
}

.segmented-btn.is-active .tab-count {
    background: rgba(255, 255, 255, 0.3);
}

.product-tabpanel[hidden] {
    display: none;
}

.product-tabpanel .section-header {
    align-items: flex-start;
}

.stripe-link-status {
    margin: 0.5rem 0 0;
    padding: 0.55rem 0.7rem;
    background: color-mix(in srgb, var(--purple) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--purple) 18%, transparent);
    border-radius: 8px;
    font-size: 0.82rem;
    line-height: 1.4;
}

.block {
    display: block;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Modals ── */

body.modal-open {
    overflow: hidden;
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 1rem;
    overflow-y: auto;
}

.modal[hidden] {
    display: none !important;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

.modal-panel {
    position: relative;
    z-index: 1;
    width: min(720px, 100%);
    max-height: calc(100vh - 4rem);
    display: flex;
    flex-direction: column;
    background: var(--modal-bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--modal-shadow);
}

.modal-panel-sm {
    width: min(480px, 100%);
}

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

.modal-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
}

.modal-header {
    cursor: grab;
}

.modal-panel.is-dragging .modal-header {
    cursor: grabbing;
}

.modal-header button,
.modal-header a,
.modal-header input,
.modal-header select,
.modal-header textarea {
    cursor: pointer;
}

@media (max-width: 900px) {
    .modal {
        align-items: flex-start;
        padding-top: 1rem;
    }

    .modal-header {
        cursor: default;
    }
}

.modal-header h2 {
    margin: 0;
    font-size: 1.15rem;
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
}

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

.modal-reset-position {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
}

.modal-reset-position:hover {
    color: var(--text);
}

.modal-body {
    padding: 1.25rem 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.modal-body fieldset {
    margin-bottom: 1.25rem;
}

.modal-alert {
    margin: 0 1.5rem;
    margin-top: 1rem;
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
}

.modal-footer-actions {
    display: flex;
    gap: 0.75rem;
    margin-left: auto;
}

.modal-footer-danger {
    display: flex;
    gap: 0.75rem;
}

.modal--confirm {
    z-index: 300;
}

.modal--confirm #confirm-modal-cancel[hidden],
.modal--confirm .confirm-modal-guard[hidden],
.modal--confirm .confirm-modal-guard-label[hidden],
.modal--confirm .confirm-modal-guard-hint[hidden],
.modal--confirm .confirm-modal-message[hidden] {
    display: none !important;
}

.confirm-modal-message {
    margin: 0;
    color: var(--text);
    line-height: 1.55;
    white-space: pre-wrap;
}

.confirm-modal-guard {
    margin-top: 0.85rem;
}

.confirm-modal-guard-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text);
}

.confirm-modal-guard-hint {
    margin: 0.35rem 0 0;
    font-size: 0.82rem;
    color: var(--text-muted);
}

/* ── Phase B: clients & approval ── */

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

.dashboard-client-filter select {
    min-width: 11rem;
}

.photo-approval-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 2;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: rgba(234, 179, 8, 0.92);
    color: #1a1a1a;
}

.photo-face-index-badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 2;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: rgba(185, 28, 28, 0.92);
    color: #fff;
}

.photo-face-index-badge.is-indexed {
    background: rgba(21, 128, 61, 0.92);
}

.photo-face-index-badge.is-queued {
    background: rgba(37, 99, 235, 0.92);
}

.photo-thumb.has-face-index-failed {
    outline: 2px solid rgba(185, 28, 28, 0.55);
}

.photo-thumb.has-face-indexed {
    outline: 2px solid rgba(21, 128, 61, 0.35);
}

.photo-thumb.is-face-index-highlight {
    outline: 3px solid rgba(185, 28, 28, 0.95);
    box-shadow: 0 0 0 4px rgba(185, 28, 28, 0.2);
}

.face-index-failures {
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.face-index-failures-title {
    margin: 0 0 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.face-index-failure-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    max-height: 12rem;
    overflow: auto;
}

.face-index-failure-list li {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    align-items: flex-start;
}

.face-index-failure-link {
    padding: 0;
    text-align: left;
    font-weight: 600;
}

.face-index-failure-error {
    font-size: 0.75rem;
    line-height: 1.35;
    word-break: break-word;
}

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

.approval-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    cursor: pointer;
}

.approval-card input {
    align-self: flex-start;
}

.approval-thumb {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius-sm, 8px);
    background: var(--surface-2, #222);
}

.approval-filename {
    font-size: 0.75rem;
    line-height: 1.3;
    word-break: break-word;
}

.approval-review .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ── Team & billing read-only ── */

.billing-readonly-banner {
    margin: 0;
    border-radius: 0;
    text-align: center;
}

.billing-readonly-banner a {
    margin-left: 0.35rem;
}

.team-custom-perms,
.team-gallery-assign {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.75rem 0 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    border-radius: var(--radius-sm, 8px);
    background: var(--surface-2, rgba(255, 255, 255, 0.03));
}

.checkbox-inline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
}

.gallery-slug-preview {
    margin: 0.35rem 0 0;
    font-size: 0.875rem;
    word-break: break-all;
}

.gallery-slug-alternatives {
    margin-top: 0.35rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

.hint.is-ok {
    color: var(--success, #3d9a6a);
}

.hint.is-error {
    color: var(--danger, #e05c5c);
}

.input-narrow {
    width: 5rem;
}

/* ── Email admin ── */

.email-password-flash-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.email-password-address,
.email-password-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.9rem;
}

.email-mailbox-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: flex-end;
}

.input-with-suffix {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.input-with-suffix input {
    flex: 1;
    min-width: 0;
}

.input-suffix {
    color: var(--text-muted);
    font-size: 0.9rem;
    white-space: nowrap;
}

.email-create-form .checkbox-label {
    margin: 0.5rem 0 1rem;
}

.password-field {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
}

.password-field input {
    flex: 1;
    min-width: 0;
    padding-right: 2.75rem;
}

.password-field-inline {
    flex: 1 1 14rem;
    min-width: 12rem;
    max-width: 20rem;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 0.35rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.password-toggle:hover,
.password-toggle:focus-visible {
    color: var(--text);
    background: var(--purple-soft);
    outline: none;
}

.password-field .email-password-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.9rem;
}

.email-poll-error {
    font-size: 0.8rem;
    color: var(--warn);
}

/* ── Business hub ── */

.admin-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: var(--muted);
}

.admin-breadcrumb a {
    color: var(--text-soft);
    text-decoration: none;
}

.admin-breadcrumb a:hover {
    color: var(--purple);
}

.admin-breadcrumb-sep {
    opacity: 0.5;
}

.hub-totals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.platform-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: 1rem;
}

.platform-hub-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
}

.platform-hub-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.platform-hub-card-title {
    margin: 0;
    font-size: 1.05rem;
}

.platform-hub-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.875rem;
}

.platform-hub-stats dt {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.platform-hub-stats dd {
    margin: 0.15rem 0 0;
}

.platform-hub-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.25rem;
}

.platform-workspace-links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.platform-workspace-link {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.85rem 1rem;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease;
}

.platform-workspace-link:hover {
    border-color: var(--purple);
}

.settings-layout {
    display: grid;
    grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
    margin-top: 1rem;
}

.settings-nav {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.settings-nav-link {
    display: block;
    padding: 0.55rem 0.75rem;
    border-radius: 0.5rem;
    text-decoration: none;
    color: inherit;
    border: 1px solid transparent;
}

.settings-nav-link:hover {
    border-color: var(--border);
    background: var(--surface-2, rgba(255, 255, 255, 0.03));
}

.settings-nav-link.is-active {
    border-color: var(--purple);
    background: color-mix(in srgb, var(--purple) 12%, transparent);
    font-weight: 600;
}

.settings-panel .hint code {
    margin-right: 0.35rem;
}

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

    .settings-nav {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* ── Workspace portfolio branding editor ── */

.profile-portfolio-card .section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

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

.portfolio-branding-form fieldset {
    border: 1px solid var(--border);
    border-radius: 0.85rem;
    padding: 1rem 1.1rem 1.1rem;
    margin: 0;
}

.portfolio-branding-form .gallery-design-tabs {
    margin-top: 0.25rem;
}

.portfolio-branding-form .gallery-design-tabpanel fieldset {
    box-shadow: none;
}

.portfolio-branding-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    position: sticky;
    bottom: 0;
    background: color-mix(in srgb, var(--surface, #fff) 92%, transparent);
    backdrop-filter: blur(8px);
    z-index: 2;
}

.portfolio-branding-form legend {
    padding: 0 0.35rem;
    font-weight: 600;
}

.portfolio-color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.85rem;
    margin-bottom: 0.85rem;
}

.portfolio-color-grid input[type="color"] {
    width: 100%;
    min-height: 2.5rem;
    padding: 0.2rem;
    border: 1px solid var(--border);
    border-radius: 0.55rem;
    background: var(--surface);
}

.portfolio-asset-upload {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
}

.portfolio-asset-preview {
    width: 100%;
    margin-bottom: 0.35rem;
}

.portfolio-asset-preview img {
    display: block;
    max-width: 220px;
    max-height: 96px;
    object-fit: contain;
    border-radius: 0.5rem;
    background: var(--surface-2);
    padding: 0.35rem;
}

.portfolio-asset-preview--wide img {
    max-width: 100%;
    width: min(100%, 520px);
    max-height: 180px;
    object-fit: cover;
}

.portfolio-asset-preview--favicon img {
    max-width: 48px;
    max-height: 48px;
    padding: 0.25rem;
}

.portfolio-footer-row,
.portfolio-footer-social .portfolio-footer-row {
    display: grid;
    grid-template-columns: minmax(140px, 180px) 1fr auto;
    gap: 0.75rem;
    align-items: end;
    margin-bottom: 0.75rem;
}

.portfolio-footer-row-grow {
    min-width: 0;
}

.portfolio-hero-options {
    margin: 0.75rem 0 1rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--border);
}

.portfolio-hero-live-preview {
    width: 100%;
    margin-bottom: 0.75rem;
}

.portfolio-hero-live-preview-stage {
    position: relative;
    width: 100%;
    min-height: 180px;
    aspect-ratio: 16 / 7;
    max-height: 240px;
    border-radius: 0;
    overflow: hidden;
    background-color: #1a1a1f;
    background-image: var(--hero-preview-image);
    background-size: cover;
    background-position: var(--hero-preview-position, 50% 50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.portfolio-hero-live-preview-stage::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #000;
    opacity: var(--hero-preview-overlay, 0.35);
    pointer-events: none;
}

.portfolio-hero-live-preview-copy {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 1rem;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.portfolio-hero-live-preview-kicker {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.9;
    margin-bottom: 0.35rem;
}

.portfolio-hero-live-preview-title {
    display: block;
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    font-weight: 700;
    line-height: 1.2;
}

.portfolio-hero-position-controls {
    display: grid;
    gap: 0.85rem;
    margin: 0.85rem 0;
}

.portfolio-hero-position-controls input[type="range"] {
    width: 100%;
}

.portfolio-hero-layout-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.85rem;
    margin-top: 0.85rem;
}

.portfolio-hero-live-preview-stage.is-rounded {
    border-radius: 1rem;
}

.portfolio-hero-live-preview-stage.is-inset {
    width: var(--hero-preview-width, 100%);
    margin-left: auto;
    margin-right: auto;
}

.portfolio-footer-options {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--border);
}

/* ── Accessibility ── */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

.gallery-removals-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.gallery-removal-item {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--border, rgba(0,0,0,0.1));
}

.gallery-removal-item:last-child {
    border-bottom: 0;
}

.gallery-removal-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
}

.gallery-removal-reason {
    margin: 0 0 0.65rem;
    white-space: pre-wrap;
    line-height: 1.45;
}

.gallery-removal-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.65rem;
}

.gallery-removal-thumbs img {
    width: 3.5rem;
    height: 3.5rem;
    object-fit: cover;
    border-radius: 4px;
    background: #eee;
}

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

.gallery-removal-badge {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--text, #222) 10%, transparent);
}

.gallery-removal-badge--minor {
    background: #f3e0b5;
    color: #6a4b00;
}

.gallery-removal-badge--escalated {
    background: #f2c7c7;
    color: #7a1c1c;
}

/* Onboarding Checklist */
.onboarding-checklist {
    margin-bottom: 2rem;
    background: linear-gradient(135deg, var(--purple-soft), color-mix(in srgb, var(--purple) 8%, transparent));
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    animation: onboarding-fade-in 0.3s ease;
}

@keyframes onboarding-fade-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.onboarding-checklist-inner {
    max-width: 100%;
}

.onboarding-checklist-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.25rem;
}

.onboarding-checklist-header h3 {
    margin: 0 0 0.25rem 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.onboarding-checklist-header p {
    margin: 0;
    font-size: 0.9rem;
}

.onboarding-dismiss-btn {
    flex-shrink: 0;
    padding: 0.5rem;
    min-width: auto;
    font-size: 1.2rem;
    line-height: 1;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.onboarding-dismiss-btn:hover {
    opacity: 1;
}

.onboarding-progress {
    margin-bottom: 1.5rem;
}

.progress-bar {
    width: 100%;
    height: 6px;
    background: var(--border);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--purple), var(--orange));
    transition: width 0.4s ease;
    border-radius: 999px;
}

.progress-text {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

.onboarding-tasks {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.onboarding-task {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    transition: all 0.2s ease;
}

html[data-theme="light"] .onboarding-task {
    background: rgba(0, 0, 0, 0.03);
}

.onboarding-task.is-complete {
    opacity: 0.7;
}

.onboarding-task.is-complete .task-icon {
    color: var(--success);
}

.task-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: color 0.2s ease;
}

.task-icon .icon {
    width: 100%;
    height: 100%;
}

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

.task-label {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}

.onboarding-task.is-complete .task-label {
    text-decoration: line-through;
    opacity: 0.8;
}

.task-hint {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.onboarding-task .btn {
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .onboarding-checklist {
        padding: 1rem;
    }

    .onboarding-checklist-header {
        flex-direction: column;
        gap: 0.5rem;
    }

    .onboarding-dismiss-btn {
        align-self: flex-end;
        margin-top: -0.5rem;
    }

    .onboarding-task {
        flex-direction: column;
    }

    .onboarding-task .btn {
        width: 100%;
    }
}

/* ── Client store ── */

.store-icon-preview-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    justify-content: flex-end;
}

.store-icon-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    background: rgba(154, 156, 176, 0.12);
    border: 1px solid var(--border);
}

.store-icon-preview-glyph {
    font-size: 1.25rem;
}

.store-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.25rem 0 1.5rem;
}

.store-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(154, 156, 176, 0.08);
    color: var(--text);
    cursor: pointer;
    font: inherit;
}

.store-tab.is-active {
    border-color: var(--purple);
    background: color-mix(in srgb, var(--purple) 14%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--purple) 25%, transparent);
}

.store-panel[hidden] {
    display: none !important;
}

.store-card-head {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 0.5rem;
}

.store-card-head h4 {
    margin: 0;
}

.store-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.7rem;
    background: color-mix(in srgb, var(--purple) 12%, transparent);
    color: var(--purple);
    flex-shrink: 0;
}

.store-pass-card {
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 1.25rem 1.35rem;
    margin-bottom: 1rem;
    background: rgba(154, 156, 176, 0.05);
}

.store-pass-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.store-pass-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.store-pass-title h3 {
    margin: 0;
}

.store-feature-grid {
    list-style: none;
    margin: 1rem 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem 1.25rem;
}

.store-feature-grid li {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.store-feature-grid .fa-check {
    color: var(--success);
    margin-top: 0.2rem;
}

.store-pass-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.store-save-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.75rem 0 1.25rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.78rem;
}

.store-save-divider::before,
.store-save-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.store-save-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.store-save-features {
    min-height: 3rem;
}

.store-compare-wrap {
    margin: 1rem 0 0;
    text-align: center;
}

@media (max-width: 720px) {
    .store-feature-grid,
    .store-save-grid {
        grid-template-columns: 1fr;
    }

    .store-tab {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* Feedback inbox */
.feedback-ticket-list li {
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--border);
}

.feedback-ticket-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.feedback-ticket-link:hover strong {
    text-decoration: underline;
}

.feedback-thread {
    display: grid;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.feedback-message {
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface, transparent);
}

.feedback-message.is-admin {
    border-color: color-mix(in srgb, var(--accent, var(--purple)) 35%, var(--border));
}

.feedback-message header {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
}

.feedback-message-body {
    white-space: normal;
    line-height: 1.45;
}

.feedback-context-panel {
    margin-bottom: 1rem;
}

.feedback-context-dl {
    display: grid;
    grid-template-columns: minmax(7rem, 10rem) 1fr;
    gap: 0.35rem 0.75rem;
    margin: 0.5rem 0 0;
}

.feedback-context-dl dt {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.feedback-context-dl dd {
    margin: 0;
    word-break: break-word;
}

.feedback-modal-page {
    font-size: 0.85rem;
}

.feedback-context-line code,
.feedback-context-dl code {
    font-size: 0.85rem;
}