/* =========================================================================
   Client Image Selection & Album module — portal stylesheet
   Standalone by design: the public website (frontend.css / royal-theme.css)
   and the admin panel (backenda.css) are completely untouched.

   Visual language mirrors the studio's royal theme:
     wine #B34A63 / #6E1F33 · antique gold #C9A05C · dark plum #150E12
     cream #F1E7DA  ·  Fraunces (display) · Pinyon Script (accents) · Manrope
   Theme system mirrors the project convention: <html data-theme="dark|light">
   ========================================================================= */

:root {
    --cp-font: 'Manrope', system-ui, -apple-system, sans-serif;
    --cp-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
    --cp-script: 'Pinyon Script', 'Great Vibes', cursive;
    --cp-radius: 16px;
    --cp-radius-sm: 12px;
    --cp-shadow: 0 18px 44px rgba(10, 5, 8, .45);
    --cp-shadow-soft: 0 8px 24px rgba(10, 5, 8, .28);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --cp-bg: #150e12;
    --cp-bg-soft: #1e141a;
    --cp-card: #251a22;
    --cp-card-2: #2c1c28;
    --cp-border: #3a2a33;
    --cp-border-soft: rgba(201, 160, 92, .22);
    --cp-text: #f1e7da;
    --cp-text-soft: #c4b2a4;
    --cp-muted: #93817a;
    --cp-accent: #c9a05c;
    --cp-accent-light: #e4c48a;
    --cp-accent-soft: rgba(201, 160, 92, .14);
    --cp-wine: #c05e77;
    --cp-wine-soft: rgba(179, 74, 99, .2);
    --cp-ok: #5cba8d;
    --cp-danger: #e0606a;
    --cp-warn: #e0a458;
    --cp-header: rgba(21, 14, 18, .86);
    --cp-on-accent: #241505;
    --cp-hero-grad: linear-gradient(135deg, #3a2028 0%, #241722 55%, #1e141a 100%);
    --cp-shadow: 0 18px 44px rgba(10, 5, 8, .45);
    --cp-shadow-soft: 0 8px 24px rgba(10, 5, 8, .28);
}

html[data-theme="light"] {
    color-scheme: light;
    --cp-bg: #f7f2ea;
    --cp-bg-soft: #efe7d9;
    --cp-card: #fffdf8;
    --cp-card-2: #f8f1e5;
    --cp-border: #e5d8c6;
    --cp-border-soft: rgba(168, 126, 62, .28);
    --cp-text: #2b1d24;
    --cp-text-soft: #6d5a51;
    --cp-muted: #a2907f;
    --cp-accent: #a87e3e;
    --cp-accent-light: #96703a;
    --cp-accent-soft: rgba(168, 126, 62, .12);
    --cp-wine: #a34459;
    --cp-wine-soft: rgba(163, 68, 89, .12);
    --cp-ok: #2f8f66;
    --cp-danger: #c94f5c;
    --cp-warn: #b97f2e;
    --cp-header: rgba(247, 242, 234, .88);
    --cp-on-accent: #fffaf1;
    --cp-hero-grad: linear-gradient(135deg, #6e1f33 0%, #57202f 55%, #46202c 100%);
    --cp-shadow: 0 18px 44px rgba(88, 55, 25, .18);
    --cp-shadow-soft: 0 8px 24px rgba(88, 55, 25, .12);
}

* { box-sizing: border-box; }

.cp-body {
    margin: 0;
    font-family: var(--cp-font);
    background: var(--cp-bg);
    color: var(--cp-text);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* Subtle vignette lives on .cp-shell (see the shell section below). */

img { max-width: 100%; display: block; }

a { color: var(--cp-accent); }

::selection { background: var(--cp-accent); color: var(--cp-on-accent); }

/* CRITICAL GUARD: the HTML `hidden` attribute must ALWAYS win over any
   author display rule in this stylesheet. Without this, a rule like
   `.cp-lightbox { display: flex }` silently overrides the browser's
   built-in [hidden] { display: none } and the viewer overlay would
   cover the WHOLE portal on load. Elements toggled with `hidden`:
   #cpLightbox, the viewer spinner/Select button, the load-more button,
   the limit-reached note and the page loader. */
[hidden] { display: none !important; }

/* Smooth LIGHT/DARK theme change. Kept BEFORE all component styles so any
   component with its own transition (buttons, inputs, photo cards, the
   theme toggle itself) wins the cascade and keeps its own feel. Only
   paint-related properties — never layout. */
.cp-body,
.cp-sidebar,
.cp-topbar,
.cp-card,
.cp-stat-card,
.cp-select-bar,
.cp-alert,
.cp-setup-note,
.cp-empty,
.cp-footer,
.cp-progress,
.cp-progress-bar {
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

/* --------------------------------- shell --------------------------------

   Signed-in shape:   [ fixed SIDEBAR 268px ][ topbar / main / footer ]
   Guest (login):     no sidebar — the topbar keeps the page focused.
   Under 1024px the sidebar turns into an off-canvas drawer with a
   dimming backdrop, opened by the hamburger in the topbar. */

.cp-shell {
    position: relative;
    min-height: 100vh;
    background:
        radial-gradient(1100px 420px at 85% -80px, var(--cp-wine-soft), transparent 70%),
        radial-gradient(900px 380px at -10% 110%, var(--cp-accent-soft), transparent 70%);
}

.cp-content { display: flex; flex-direction: column; min-height: 100vh; }
.cp-shell.cp-has-sidebar .cp-content { margin-left: 268px; }

/* --- the sidebar --------------------------------------------------------- */

.cp-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 70;
    width: 268px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    background:
        radial-gradient(420px 260px at 0% 0%, var(--cp-wine-soft), transparent 70%),
        linear-gradient(180deg, var(--cp-bg-soft) 0%, var(--cp-bg) 100%);
    border-right: 1px solid var(--cp-border);
    transition: transform .3s cubic-bezier(.22, .7, .35, 1), background-color .25s ease, border-color .25s ease;
}

.cp-sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 14px 14px;
    border-bottom: 1px solid var(--cp-border);
}
.cp-sidebar-brand .cp-brand-name { font-size: .95rem; }
.cp-sidebar-brand .cp-brand-tag { display: none; }
.cp-sidebar-close {
    display: none;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 10px;
    border: 1px solid var(--cp-border);
    background: var(--cp-card);
    color: var(--cp-text-soft);
    cursor: pointer;
    font-size: .95rem;
}
.cp-sidebar-close:hover { color: var(--cp-text); border-color: var(--cp-border-soft); }

.cp-sidebar-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 12px;
}
.cp-sidebar-label {
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--cp-muted);
    margin: 2px 12px 8px;
}
.cp-sidebar-nav .cp-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    border-radius: 12px;
    color: var(--cp-text-soft);
    text-decoration: none;
    font-size: .88rem;
    font-weight: 600;
    border: 1px solid transparent;
    transition: color .18s ease, background-color .18s ease, transform .18s ease, border-color .18s ease;
}
.cp-sidebar-nav .cp-nav-link i {
    width: 20px;
    flex: 0 0 auto;
    text-align: center;
    font-size: .98rem;
    color: var(--cp-muted);
    transition: color .18s ease, transform .18s ease;
}
.cp-sidebar-nav .cp-nav-link:hover {
    color: var(--cp-text);
    background: var(--cp-bg-soft);
    transform: translateX(3px);
}
.cp-sidebar-nav .cp-nav-link:hover i { color: var(--cp-accent); }
.cp-sidebar-nav .cp-nav-link.active {
    color: var(--cp-accent);
    background: linear-gradient(135deg, var(--cp-accent-soft), color-mix(in srgb, var(--cp-accent) 20%, transparent));
    border-color: var(--cp-border-soft);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cp-accent) 16%, transparent);
}
.cp-sidebar-nav .cp-nav-link.active i { color: var(--cp-accent-light); }
.cp-sidebar-nav .cp-nav-link.active::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 22%;
    bottom: 22%;
    width: 3px;
    border-radius: 99px;
    background: linear-gradient(180deg, var(--cp-accent-light), var(--cp-accent));
    box-shadow: 0 0 12px color-mix(in srgb, var(--cp-accent) 55%, transparent);
}
.cp-nav-count {
    margin-left: auto;
    background: var(--cp-accent);
    color: var(--cp-on-accent);
    font-size: .68rem;
    font-weight: 800;
    padding: 1px 8px;
    border-radius: 99px;
}

.cp-sidebar-foot {
    padding: 14px 12px 16px;
    border-top: 1px solid var(--cp-border);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* --- dimming backdrop behind the mobile drawer ---------------------------- */

.cp-sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 65;
    background: rgba(10, 5, 8, .62);
    backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
body.cp-sidebar-open .cp-sidebar-backdrop { opacity: 1; pointer-events: auto; }

/* --- the slim top action bar ---------------------------------------------- */

.cp-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 64px;
    padding: 10px clamp(16px, 3vw, 34px);
    background: var(--cp-header);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--cp-border);
}
.cp-header-tools { display: flex; align-items: center; gap: 12px; margin-left: auto; }

.cp-sidebar-toggle {
    display: none;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 11px;
    border: 1px solid var(--cp-border);
    background: var(--cp-card);
    color: var(--cp-text);
    font-size: 1rem;
    cursor: pointer;
}
.cp-sidebar-toggle:hover { border-color: var(--cp-border-soft); color: var(--cp-accent); }

.cp-topbar-title {
    font-family: var(--cp-script);
    font-size: 1.25rem;
    line-height: 1;
    color: var(--cp-accent);
    transform: translateY(-1px);
}

.cp-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--cp-text); }
.cp-brand img { height: 36px; width: auto; border-radius: 9px; }
.cp-brand-name {
    font-weight: 800;
    letter-spacing: .02em;
    font-size: 1.02rem;
}
.cp-brand-tag {
    font-family: var(--cp-script);
    font-size: 1.02rem;
    line-height: 1;
    color: var(--cp-accent);
    padding: 2px 4px 0;
    transform: translateY(-1px);
}

.cp-user { display: flex; align-items: center; gap: 11px; padding: 10px 12px; background: var(--cp-bg-soft); border: 1px solid var(--cp-border); border-radius: 12px; }
.cp-user-meta { display: flex; flex-direction: column; line-height: 1.25; text-align: left; min-width: 0; }
.cp-user-name { font-weight: 700; font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-user-event { font-size: .68rem; color: var(--cp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-logout-btn { width: 100%; justify-content: center; }

.cp-theme-form { display: flex; margin: 0; }

/* --- Light/Dark pill switch ----------------------------------------------
   A track with a sliding knob. The knob carries the icon of the CURRENT
   mode (moon while dark, sun while light) and a Dark/Light text label
   sits next to it on wide screens. Knob position and icon choice are
   pure CSS, driven by <html data-theme>, so the switch also mirrors the
   server-rendered theme after a full page load with JS disabled. */
.cp-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 4px 12px 4px 5px;
    border-radius: 99px;
    color: var(--cp-text-soft);
    background: var(--cp-card);
    border: 1px solid var(--cp-border);
    cursor: pointer;
    font-family: var(--cp-font);
    transition: border-color .18s ease, box-shadow .18s ease, background-color .25s ease;
}
.cp-theme-toggle:hover {
    border-color: var(--cp-border-soft);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--cp-accent) 25%, transparent);
}
.cp-theme-toggle:focus-visible { outline: 2px solid var(--cp-accent); outline-offset: 2px; }

.cp-theme-track {
    position: relative;
    box-sizing: border-box;
    width: 46px;
    height: 24px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5px;
    border-radius: 99px;
    background: var(--cp-bg-soft);
    border: 1px solid var(--cp-border);
}
.cp-theme-side { font-size: .58rem; color: var(--cp-muted); transition: color .2s ease; }
.cp-theme-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cp-accent-light), var(--cp-accent));
    color: var(--cp-on-accent);
    font-size: .6rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
    transition: transform .28s cubic-bezier(.34, 1.4, .64, 1);
}
/* DARK (default): knob slides RIGHT onto the moon; the sun side glows. */
html[data-theme="dark"] .cp-theme-knob { transform: translateX(22px); }
html[data-theme="dark"] .cp-theme-knob .cp-theme-knob-sun { display: none; }
html[data-theme="light"] .cp-theme-knob { transform: translateX(0); }
html[data-theme="light"] .cp-theme-knob .cp-theme-knob-moon { display: none; }
html[data-theme="dark"] .cp-theme-side-sun { color: var(--cp-accent-light); }
html[data-theme="light"] .cp-theme-side-moon { color: var(--cp-accent); }

.cp-theme-label {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}
@media (max-width: 640px) {
    .cp-theme-label { display: none; }
    .cp-theme-toggle { padding-right: 6px; }
}

.cp-main { flex: 1; width: 100%; max-width: 1280px; margin: 0 auto; padding: clamp(20px, 3vw, 36px) clamp(16px, 4vw, 40px); }

.cp-footer {
    padding: 20px clamp(16px, 4vw, 40px);
    border-top: 1px solid var(--cp-border);
    color: var(--cp-muted);
    font-size: .78rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.cp-footer-note { font-family: var(--cp-display); font-style: italic; color: var(--cp-text-soft); }

/* -------------------------------- typography ---------------------------- */

.cp-h1 {
    font-family: var(--cp-display);
    font-size: clamp(1.5rem, 2.8vw, 2rem);
    font-weight: 600;
    margin: 0 0 4px;
    letter-spacing: -.01em;
}
.cp-sub { color: var(--cp-text-soft); font-size: .88rem; margin: 0; }
.cp-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--cp-display);
    font-weight: 600;
    font-size: 1.12rem;
    margin: 30px 0 14px;
}
.cp-section-title::before {
    content: '';
    width: 26px;
    height: 1px;
    background: var(--cp-accent);
    flex: 0 0 auto;
}
.cp-section-title .cp-link { margin-left: 8px; font-family: var(--cp-font); }
.cp-link { color: var(--cp-accent); font-size: .78rem; text-decoration: none; font-weight: 700; }
.cp-link:hover { text-decoration: underline; }
.cp-muted { color: var(--cp-muted); }
.cp-ok { color: var(--cp-ok); }
.cp-danger { color: var(--cp-danger); }
.cp-accent-text { color: var(--cp-accent); }
.cp-lg { font-size: 1.4rem; }
.cp-text-danger { color: var(--cp-danger); }

.cp-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.cp-page-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* --------------------------------- cards -------------------------------- */

.cp-card {
    background: var(--cp-card);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    overflow: hidden;
    box-shadow: var(--cp-shadow-soft);
}
.cp-card-soft { background: var(--cp-card-2); }
.cp-card-body { padding: 22px; }
.cp-row-between { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

.cp-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.cp-stat-card {
    position: relative;
    background: var(--cp-card);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    padding: 20px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
}
.cp-stat-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--cp-accent), transparent);
    opacity: .55;
}
.cp-stat-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--cp-bg-soft);
    color: var(--cp-text-soft);
    font-size: .95rem;
    margin-bottom: 8px;
    border: 1px solid var(--cp-border);
}
.cp-stat-icon.cp-accent { background: var(--cp-accent-soft); color: var(--cp-accent); border-color: var(--cp-border-soft); }
.cp-stat-icon.cp-ok { background: color-mix(in srgb, var(--cp-ok) 14%, transparent); color: var(--cp-ok); }
.cp-stat-icon.cp-danger { background: color-mix(in srgb, var(--cp-danger) 14%, transparent); color: var(--cp-danger); }
.cp-stat-value {
    font-family: var(--cp-display);
    font-size: 2rem;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: lining-nums;
}
.cp-stat-label {
    font-size: .72rem;
    color: var(--cp-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
}

/* -------------------------------- progress ------------------------------ */

.cp-progress-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
.cp-progress-title { font-size: .95rem; color: var(--cp-text-soft); }
.cp-progress-title strong {
    font-family: var(--cp-display);
    font-size: 1.35rem;
    color: var(--cp-text);
    font-weight: 600;
}
.cp-progress-pct { font-weight: 800; color: var(--cp-accent); }
.cp-progress {
    height: 12px;
    background: var(--cp-bg-soft);
    border: 1px solid var(--cp-border);
    border-radius: 99px;
    overflow: hidden;
}
.cp-progress-bar {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--cp-accent), var(--cp-accent-light));
    transition: width .5s ease;
    box-shadow: 0 0 12px color-mix(in srgb, var(--cp-accent) 45%, transparent);
}
.cp-progress-bar.is-full { background: linear-gradient(90deg, var(--cp-warn), var(--cp-danger)); box-shadow: none; }
.cp-progress-note { font-size: .82rem; color: var(--cp-text-soft); margin: 12px 0 0; line-height: 1.55; }

/* --------------------------------- buttons ------------------------------ */

.cp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 99px;
    padding: 11px 22px;
    font-family: var(--cp-font);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .01em;
    cursor: pointer;
    text-decoration: none;
    transition: all .18s ease;
    white-space: nowrap;
}
.cp-btn:disabled { opacity: .55; cursor: not-allowed; }
.cp-btn-primary {
    background: linear-gradient(135deg, var(--cp-accent-light), var(--cp-accent));
    color: var(--cp-on-accent);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--cp-accent) 35%, transparent);
}
.cp-btn-primary:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); }
.cp-btn-outline { background: transparent; color: var(--cp-text); border-color: var(--cp-border); }
.cp-btn-outline:hover:not(:disabled) { border-color: var(--cp-accent); color: var(--cp-accent); }
.cp-btn-ghost { background: transparent; color: var(--cp-text-soft); }
.cp-btn-ghost:hover:not(:disabled) { color: var(--cp-text); background: var(--cp-bg-soft); }
.cp-btn-sm { padding: 7px 14px; font-size: .76rem; }
.cp-btn-block { width: 100%; }

.cp-btn-selected {
    background: color-mix(in srgb, var(--cp-ok) 15%, transparent);
    color: var(--cp-ok);
    border-color: color-mix(in srgb, var(--cp-ok) 40%, transparent);
    box-shadow: none;
}
.cp-btn-selected:hover:not(:disabled) { background: color-mix(in srgb, var(--cp-danger) 14%, transparent); color: var(--cp-danger); border-color: color-mix(in srgb, var(--cp-danger) 40%, transparent); }

/* --------------------------------- badges ------------------------------- */

.cp-badge { display: inline-block; font-size: .68rem; font-weight: 800; padding: 3px 10px; border-radius: 99px; letter-spacing: .04em; }
.cp-badge-ok { background: color-mix(in srgb, var(--cp-ok) 16%, transparent); color: var(--cp-ok); }
.cp-badge-soft { background: var(--cp-bg-soft); color: var(--cp-text-soft); }

.cp-count-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--cp-card);
    border: 1px solid var(--cp-border);
    border-radius: 99px;
    padding: 9px 18px;
    font-size: .85rem;
    font-weight: 600;
    box-shadow: var(--cp-shadow-soft);
}

/* --------------------------------- alerts ------------------------------- */

.cp-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--cp-card);
    border: 1px solid var(--cp-border);
    border-left: 4px solid var(--cp-muted);
    border-radius: var(--cp-radius-sm);
    padding: 15px 18px;
    font-size: .86rem;
    line-height: 1.55;
    margin-bottom: 16px;
}
.cp-alert i { margin-top: 2px; }
.cp-alert-success { border-left-color: var(--cp-ok); }
.cp-alert-success i { color: var(--cp-ok); }
.cp-alert-danger { border-left-color: var(--cp-danger); }
.cp-alert-danger i { color: var(--cp-danger); }
.cp-alert-warning { border-left-color: var(--cp-warn); }
.cp-alert-warning i { color: var(--cp-warn); }

/* ------------------------------- dashboard hero ------------------------- */

.cp-hero {
    position: relative;
    overflow: hidden;
    background: var(--cp-hero-grad);
    border: 1px solid var(--cp-border-soft);
    border-radius: 22px;
    padding: clamp(26px, 4vw, 44px);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    box-shadow: var(--cp-shadow-soft);
}
html[data-theme="light"] .cp-hero { color: #f9f1e4; }
.cp-hero::after {
    content: '';
    position: absolute;
    right: -70px;
    top: -90px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--cp-accent) 40%, transparent);
    opacity: .5;
    pointer-events: none;
}
.cp-hero::before {
    content: '';
    position: absolute;
    right: 30px;
    top: -130px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 1px dashed color-mix(in srgb, var(--cp-accent) 30%, transparent);
    opacity: .5;
    pointer-events: none;
}
.cp-hero-script {
    display: block;
    font-family: var(--cp-script);
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    line-height: 1.1;
    color: var(--cp-accent-light);
    margin-bottom: 2px;
}
.cp-hero-title {
    font-family: var(--cp-display);
    font-size: clamp(1.7rem, 3.4vw, 2.6rem);
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 0 0 10px;
    color: var(--cp-text);
}
.cp-hero-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cp-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--cp-text-soft);
    background: color-mix(in srgb, var(--cp-bg) 45%, transparent);
    border: 1px solid var(--cp-border-soft);
    border-radius: 99px;
    padding: 6px 14px;
    backdrop-filter: blur(6px);
}
html[data-theme="light"] .cp-hero-chip { color: #f1e7da; background: rgba(255, 250, 241, .12); border-color: rgba(228, 196, 138, .4); }
.cp-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; position: relative; z-index: 1; }
.cp-hero .cp-btn-primary { box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }

.cp-setup-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--cp-card);
    border: 1px dashed var(--cp-border-soft);
    border-radius: var(--cp-radius-sm);
    padding: 15px 18px;
    font-size: .86rem;
    line-height: 1.6;
    color: var(--cp-text-soft);
    margin-bottom: 18px;
}
.cp-setup-note i { color: var(--cp-warn); margin-top: 3px; }
.cp-setup-note strong { color: var(--cp-text); }

/* ------------------------------- select bar ----------------------------- */

.cp-select-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--cp-card);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-sm);
    padding: 13px 18px;
    margin-bottom: 16px;
    font-size: .86rem;
    position: sticky;
    top: 64px;
    z-index: 10;
    box-shadow: var(--cp-shadow-soft);
    backdrop-filter: blur(8px);
}
.cp-select-bar-note { color: var(--cp-warn); font-weight: 700; font-size: .8rem; }

/* -------------------------------- photo grid ---------------------------- */

.cp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 16px;
}
@media (max-width: 640px) { .cp-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } }

.cp-photo {
    margin: 0;
    background: var(--cp-card);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-sm);
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.cp-photo:hover { box-shadow: var(--cp-shadow); transform: translateY(-2px); }
.cp-photo.is-selected { border-color: color-mix(in srgb, var(--cp-ok) 55%, transparent); }

.cp-photo-frame { position: relative; }
.cp-photo-frame img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    background: var(--cp-bg-soft);
}
.cp-photo-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
    pointer-events: none;
}
.cp-photo-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    display: none;
    place-items: center;
    background: var(--cp-ok);
    color: #08130d;
    border-radius: 50%;
    font-size: .72rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
}
.cp-photo.is-selected .cp-photo-check { display: grid; }
.cp-photo-folder {
    position: absolute;
    left: 8px;
    bottom: 8px;
    max-width: 70%;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #f1e7da;
    background: rgba(21, 14, 18, .68);
    border: 1px solid rgba(228, 196, 138, .25);
    padding: 3px 9px;
    border-radius: 99px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    backdrop-filter: blur(4px);
}

.cp-photo-meta { padding: 11px 12px 13px; display: flex; flex-direction: column; gap: 8px; }
.cp-photo-name {
    font-size: .76rem;
    color: var(--cp-text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cp-photo-date { font-size: .68rem; color: var(--cp-muted); }
.cp-photo.is-selected .cp-photo-name { color: var(--cp-text); }

.cp-photo.is-busy { opacity: .6; pointer-events: none; }
.cp-photo.cp-flash-ok { animation: cpFlashOk .8s ease; }
@keyframes cpFlashOk {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cp-ok) 55%, transparent); }
    100% { box-shadow: 0 0 0 14px transparent; }
}

/* ------------------------------- load more ------------------------------ */

.cp-load-more { display: flex; justify-content: center; padding: 26px 0 8px; }
.cp-loader { color: var(--cp-muted); font-size: .85rem; }

/* --------------------------------- thumbs ------------------------------- */

.cp-thumb-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.cp-thumb {
    flex: 0 0 auto;
    width: 96px;
    border-radius: var(--cp-radius-sm);
    overflow: hidden;
    border: 1px solid var(--cp-border);
    position: relative;
    transition: transform .15s ease, border-color .15s ease;
}
.cp-thumb:hover { transform: translateY(-2px); border-color: var(--cp-border-soft); }
.cp-thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; }

/* --------------------------------- login --------------------------------
   Split-screen: left = brand panel (royal gradient + script), right = form.
   The whole unit is one rounded frame inside the page; on small screens the
   brand panel collapses away and only the form remains.
   ------------------------------------------------------------------------ */

.cp-login-wrap { display: grid; place-items: center; min-height: 72vh; padding: 10px 0 30px; }

.cp-login-shell {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    width: min(1080px, 100%);
    min-height: 620px;
    background: var(--cp-card);
    border: 1px solid var(--cp-border);
    border-radius: 26px;
    overflow: hidden;
    box-shadow: var(--cp-shadow);
}

.cp-login-aside {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cp-hero-grad);
    overflow: hidden;
}
.cp-login-aside::before {
    content: '';
    position: absolute;
    inset: 18px;
    border: 1px solid color-mix(in srgb, var(--cp-accent) 35%, transparent);
    border-radius: 18px;
    pointer-events: none;
}
.cp-login-aside::after {
    content: '';
    position: absolute;
    width: 340px;
    height: 340px;
    right: -120px;
    bottom: -120px;
    border-radius: 50%;
    border: 1px dashed color-mix(in srgb, var(--cp-accent) 30%, transparent);
    opacity: .6;
}
.cp-login-aside-inner {
    position: relative;
    padding: clamp(30px, 4vw, 54px);
    max-width: 460px;
}
.cp-login-ornament {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--cp-accent-light);
    font-size: .8rem;
    margin-bottom: 26px;
    letter-spacing: .34em;
    text-transform: uppercase;
}
.cp-login-ornament::before,
.cp-login-ornament::after {
    content: '';
    width: 34px;
    height: 1px;
    background: color-mix(in srgb, var(--cp-accent) 60%, transparent);
}
.cp-login-script {
    display: block;
    font-family: var(--cp-script);
    font-size: clamp(2.2rem, 4vw, 3rem);
    line-height: 1.15;
    color: var(--cp-accent-light);
    margin-bottom: 8px;
}
.cp-login-display {
    font-family: var(--cp-display);
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    font-weight: 600;
    line-height: 1.25;
    color: #f9f1e4;
    margin: 0 0 14px;
}
html[data-theme="light"] .cp-login-display { color: #f9f1e4; }
.cp-login-lede {
    color: rgba(241, 231, 218, .78);
    font-size: .92rem;
    line-height: 1.7;
    margin: 0 0 28px;
}
.cp-login-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.cp-login-points li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: rgba(241, 231, 218, .88);
    font-size: .86rem;
    line-height: 1.55;
}
.cp-login-points i {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--cp-accent) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--cp-accent) 40%, transparent);
    color: var(--cp-accent-light);
    font-size: .72rem;
    margin-top: 1px;
}

.cp-login-panel { display: grid; place-items: center; padding: clamp(26px, 4vw, 46px); background: var(--cp-card); }

.cp-login-card { width: 100%; max-width: 400px; }
.cp-login-head { text-align: center; margin-bottom: 26px; }
.cp-login-icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    margin: 0 auto 14px;
    border-radius: 50%;
    font-size: 1.3rem;
    color: var(--cp-accent);
    background: var(--cp-accent-soft);
    border: 1px solid var(--cp-border-soft);
}
.cp-login-head h1 {
    font-family: var(--cp-display);
    font-size: 1.65rem;
    font-weight: 600;
    margin: 0 0 8px;
}
.cp-login-head p { color: var(--cp-text-soft); font-size: .86rem; margin: 0; line-height: 1.6; }
.cp-login-note {
    text-align: center;
    color: var(--cp-muted);
    font-size: .76rem;
    margin-top: 20px;
    line-height: 1.6;
}
.cp-login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--cp-muted);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .18em;
    margin: 22px 0 16px;
}
.cp-login-divider::before,
.cp-login-divider::after { content: ''; flex: 1; height: 1px; background: var(--cp-border); }

@media (max-width: 920px) {
    .cp-login-shell { grid-template-columns: 1fr; min-height: 0; }
    .cp-login-aside { display: none; }
    .cp-login-panel { padding: clamp(22px, 5vw, 34px); }
}

/* --------------------------------- forms -------------------------------- */

.cp-form { display: flex; flex-direction: column; gap: 15px; }
.cp-field span {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--cp-text-soft);
    margin-bottom: 7px;
}
.cp-input, .cp-select {
    font-family: var(--cp-font);
    font-size: .9rem;
    color: var(--cp-text);
    background: var(--cp-bg-soft);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-sm);
    padding: 12px 15px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
    width: 100%;
}
.cp-input:focus, .cp-select:focus {
    border-color: var(--cp-accent);
    box-shadow: 0 0 0 3px var(--cp-accent-soft);
}
.cp-filter-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* --------------------------------- album -------------------------------- */

.cp-album-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.cp-album-name { font-family: var(--cp-display); font-weight: 600; font-size: 1.15rem; }
.cp-album-count {
    font-family: var(--cp-display);
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--cp-accent);
    text-align: right;
    line-height: 1;
}
.cp-album-count span {
    display: block;
    font-family: var(--cp-font);
    font-size: .64rem;
    color: var(--cp-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-top: 4px;
}
.cp-drive-icon { color: var(--cp-accent); font-size: 1.2rem; margin-right: 6px; }

/* --------------------------------- empty -------------------------------- */

.cp-empty {
    text-align: center;
    padding: 64px 20px;
    background: var(--cp-card);
    border: 1px dashed var(--cp-border-soft);
    border-radius: var(--cp-radius);
}
.cp-empty-icon { font-size: 2.2rem; color: var(--cp-muted); margin-bottom: 14px; }
.cp-empty-title { font-family: var(--cp-display); font-weight: 600; font-size: 1.25rem; margin-bottom: 8px; }
.cp-empty-desc { color: var(--cp-text-soft); font-size: .86rem; max-width: 440px; margin: 0 auto; line-height: 1.65; }

/* =========================================================================
   BILLING & PAYMENTS (client portal)
   Payment summary + receipts, reusing the existing Billing module data.
   ========================================================================= */

.cp-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 99px;
    border: 1px solid var(--cp-border);
    color: var(--cp-text-soft);
    background: var(--cp-bg-soft);
    white-space: nowrap;
}
.cp-badge.badge-success { color: var(--cp-ok); border-color: color-mix(in srgb, var(--cp-ok) 45%, transparent); background: color-mix(in srgb, var(--cp-ok) 10%, transparent); }
.cp-badge.badge-warning { color: var(--cp-warn); border-color: color-mix(in srgb, var(--cp-warn) 45%, transparent); background: color-mix(in srgb, var(--cp-warn) 10%, transparent); }
.cp-badge.badge-info    { color: var(--cp-accent); border-color: var(--cp-border-soft); background: var(--cp-accent-soft); }
.cp-badge.badge-danger  { color: var(--cp-danger); border-color: color-mix(in srgb, var(--cp-danger) 45%, transparent); background: color-mix(in srgb, var(--cp-danger) 10%, transparent); }

.cp-table { width: 100%; border-collapse: collapse; font-size: .82rem; margin-top: 6px; }
.cp-table th {
    text-align: left;
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cp-muted);
    padding: 8px 10px;
    border-bottom: 1px solid var(--cp-border);
}
.cp-table td { padding: 8px 10px; border-bottom: 1px solid var(--cp-border); color: var(--cp-text-soft); }
.cp-table tr:last-child td { border-bottom: none; }
.cp-ta-right { text-align: right; }

.cp-billing-card { margin-bottom: 16px; }
.cp-billing-dashboard { margin-top: 16px; }

.cp-billing-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.cp-billing-receipt { font-size: 1.02rem; color: var(--cp-text); }
.cp-billing-receipt strong { letter-spacing: .04em; }
.cp-billing-package { font-size: .8rem; color: var(--cp-text-soft); margin-top: 3px; }

.cp-billing-amounts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin: 4px 0 10px;
}
.cp-billing-amount {
    background: var(--cp-bg-soft);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-sm);
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.cp-billing-amount-label {
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--cp-muted);
}
.cp-billing-amount-value { font-size: 1.06rem; font-weight: 800; color: var(--cp-text); font-variant-numeric: tabular-nums; }

.cp-billing-due-date { font-size: .8rem; color: var(--cp-warn); margin: 0 0 8px; }

.cp-billing-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--cp-border);
}
.cp-billing-note { font-size: .72rem; color: var(--cp-muted); }

.cp-billing-footer-note {
    text-align: center;
    font-size: .76rem;
    color: var(--cp-muted);
    padding: 8px 0 4px;
}

@media (max-width: 640px) {
    .cp-table th:nth-child(3), .cp-table td:nth-child(3) { display: none; }
}

/* ------------------------------- responsive -----------------------------

   Under 1024px the sidebar becomes an off-canvas drawer:
     - parked off the left edge, slides in on body.cp-sidebar-open;
     - the hamburger (.cp-sidebar-toggle) appears in the topbar;
     - the backdrop dims the page and any tap on it closes the drawer. */

@media (max-width: 1024px) {
    .cp-shell.cp-has-sidebar .cp-content { margin-left: 0; }
    .cp-shell.cp-has-sidebar .cp-sidebar {
        transform: translateX(-105%);
        box-shadow: 0 0 60px rgba(0, 0, 0, .5);
    }
    body.cp-sidebar-open .cp-shell .cp-sidebar { transform: none; }
    .cp-shell.cp-has-sidebar .cp-sidebar-toggle { display: grid; }
    .cp-shell.cp-has-sidebar .cp-sidebar-close { display: grid; }
    .cp-select-bar { top: 64px; }
}

@media (max-width: 860px) {
    .cp-hero { align-items: flex-start; flex-direction: column; }
    .cp-topbar-title { display: none; }
}

@media (max-width: 640px) {
    .cp-user { padding: 9px 10px; }
}

/* =========================================================================
   THEME SWITCHING + VISUAL POLISH
   Light/Dark completeness fixes and shared micro-interactions.
   ========================================================================= */

/* Smooth theme change: only paint-related properties, never layout.
   (The shared transition group lives near the top of this stylesheet,
   before component rules, so component-specific transitions win.) */

/* --- light-mode completeness --------------------------------------------
   The hero and the login aside keep the royal wine gradient in BOTH
   themes, so their text must stay cream even when the rest of the
   portal flips to light. */
html[data-theme="light"] .cp-hero-title { color: #f9f1e4; }
html[data-theme="light"] .cp-hero-script { color: #e4c48a; }
html[data-theme="light"] .cp-brand-tag { color: #a87e3e; }

/* --- keyboard focus rings ----------------------------------------------- */
.cp-main a:focus-visible,
.cp-main button:focus-visible,
.cp-footer a:focus-visible {
    outline: 2px solid var(--cp-accent);
    outline-offset: 2px;
    border-radius: 6px;
}

/* --- slim gold scrollbars inside the portal ------------------------------ */
.cp-body { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--cp-accent) 45%, transparent) transparent; }
.cp-body *::-webkit-scrollbar { width: 9px; height: 9px; }
.cp-body *::-webkit-scrollbar-track { background: transparent; }
.cp-body *::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--cp-accent) 38%, var(--cp-bg-soft));
    border-radius: 99px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.cp-body *::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--cp-accent) 60%, var(--cp-bg-soft)); background-clip: padding-box; }

/* --- gentle entrance for the page sections ------------------------------- */
@keyframes cpRise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
    .cp-hero,
    .cp-card,
    .cp-alert,
    .cp-setup-note,
    .cp-stats-grid .cp-stat-card {
        animation: cpRise .45s cubic-bezier(.22, .7, .35, 1) both;
    }
    .cp-stats-grid .cp-stat-card:nth-child(2) { animation-delay: .05s; }
    .cp-stats-grid .cp-stat-card:nth-child(3) { animation-delay: .1s; }
    .cp-stats-grid .cp-stat-card:nth-child(4) { animation-delay: .15s; }
}

/* --- buttons: press feedback -------------------------------------------- */
.cp-btn:active:not(:disabled) { transform: translateY(0) scale(.97); }

/* --- cards: soft gold hover border --------------------------------------- */
.cp-billing-card, .cp-album-card { transition: border-color .18s ease, box-shadow .18s ease, background-color .25s ease; }
.cp-billing-card:hover, .cp-album-card:hover { border-color: var(--cp-border-soft); }

/* --- stat icon tiles: gradient accent variant ---------------------------- */
.cp-stat-icon.cp-accent {
    background: linear-gradient(135deg, var(--cp-accent-soft), color-mix(in srgb, var(--cp-accent) 26%, transparent));
}

/* --- billing amount tiles: gold hairline --------------------------------- */
.cp-billing-amount { border-left: 3px solid color-mix(in srgb, var(--cp-accent) 55%, transparent); }

/* --- tables: quiet row hover --------------------------------------------- */
.cp-table tbody tr { transition: background-color .15s ease; }
.cp-table tbody tr:hover td { background: color-mix(in srgb, var(--cp-accent) 6%, transparent); }

/* --- empty states: icon inside a soft dashed circle ----------------------- */
.cp-empty-icon {
    width: 78px;
    height: 78px;
    display: grid;
    place-items: center;
    margin: 0 auto 16px;
    background: var(--cp-bg-soft);
    border: 1px dashed var(--cp-border-soft);
    border-radius: 50%;
}

/* =========================================================================
   FULL-SCREEN IMAGE VIEWER (lightbox)
   Opens when a client clicks any photo frame. Shows a fast Drive-rendered
   large preview (?w=1600) — the untouched original is only fetched via the
   explicit "Original" link. Arrows / keyboard / swipe step through the
   whole gallery; Select works directly inside the viewer.
   ========================================================================= */

/* Clickable frames invite opening */
.cp-photo-frame[data-cp-open] { cursor: zoom-in; }
.cp-photo-frame[data-cp-open]:focus-visible {
    outline: 2px solid var(--cp-accent);
    outline-offset: 2px;
}

.cp-photo-zoom {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    color: #f1e7da;
    background: rgba(21, 14, 18, .68);
    border: 1px solid rgba(228, 196, 138, .25);
    border-radius: 50%;
    font-size: .7rem;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
    backdrop-filter: blur(4px);
}
.cp-photo:hover .cp-photo-zoom,
.cp-photo-frame[data-cp-open]:focus-visible .cp-photo-zoom {
    opacity: 1;
    transform: translateY(0);
}

/* Lock page scroll while the viewer is open */
body.cp-lightbox-open { overflow: hidden; }

.cp-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    animation: cpLbIn .22s ease;
}
@keyframes cpLbIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.cp-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 5, 8, .92);
    backdrop-filter: blur(14px);
}

/* --- top bar: name · counter · close ----------------------------------- */

.cp-lightbox-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    color: #f1e7da;
}
.cp-lightbox-name {
    flex: 1;
    min-width: 0;
    font-family: var(--cp-display);
    font-size: 1.02rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cp-lightbox-count {
    font-variant-numeric: tabular-nums;
    font-size: .86rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: #e4c48a;
    background: rgba(21, 14, 18, .6);
    border: 1px solid rgba(228, 196, 138, .3);
    padding: 5px 13px;
    border-radius: 99px;
    white-space: nowrap;
}
.cp-lightbox-iconbtn {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: #f1e7da;
    background: rgba(21, 14, 18, .6);
    border: 1px solid rgba(228, 196, 138, .3);
    border-radius: 50%;
    font-size: 1rem;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.cp-lightbox-iconbtn:hover { background: rgba(179, 74, 99, .55); transform: scale(1.06); }

/* --- stage: the big preview -------------------------------------------- */

.cp-lightbox-stage {
    position: relative;
    z-index: 1;
    flex: 1;
    min-height: 0;
    display: grid;
    place-items: center;
    padding: 8px 76px;
}
.cp-lightbox-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
    opacity: 0;
    transform: scale(.985);
    transition: opacity .25s ease, transform .25s ease;
}
.cp-lightbox-img.is-loaded { opacity: 1; transform: scale(1); }

.cp-lightbox-spinner {
    position: absolute;
    color: #e4c48a;
    font-size: 1.7rem;
    z-index: 1;
}

/* --- prev / next arrows -------------------------------------------------- */

.cp-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    color: #f1e7da;
    background: rgba(21, 14, 18, .62);
    border: 1px solid rgba(228, 196, 138, .3);
    border-radius: 50%;
    font-size: 1.05rem;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.cp-lightbox-nav:hover { background: rgba(179, 74, 99, .6); transform: translateY(-50%) scale(1.07); }
.cp-lightbox-nav-prev { left: 14px; }
.cp-lightbox-nav-next { right: 14px; }

/* --- bottom bar: actions + filmstrip ------------------------------------- */

.cp-lightbox-bar {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 20px 18px;
}
.cp-lightbox-bar-left { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

/* Buttons need light-on-dark colours inside the viewer */
.cp-lightbox .cp-btn-primary {
    background: linear-gradient(135deg, #c9a05c, #b3844a);
    color: #241505;
    border-color: transparent;
}
.cp-lightbox .cp-btn-selected {
    background: rgba(92, 186, 141, .16);
    color: #7fe0b2;
    border-color: rgba(92, 186, 141, .5);
}
.cp-lightbox .cp-btn-ghost {
    color: #e4c48a;
    border-color: rgba(228, 196, 138, .35);
    background: rgba(21, 14, 18, .5);
}
.cp-lightbox .cp-btn-ghost:hover { background: rgba(21, 14, 18, .8); }

.cp-lightbox-strip {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 6px 2px;
    scrollbar-width: thin;
    scrollbar-color: rgba(228, 196, 138, .4) transparent;
}
.cp-lightbox-strip::-webkit-scrollbar { height: 6px; }
.cp-lightbox-strip::-webkit-scrollbar-thumb { background: rgba(228, 196, 138, .35); border-radius: 99px; }

.cp-lightbox-thumb {
    flex: 0 0 auto;
    width: 58px;
    height: 40px;
    padding: 0;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid transparent;
    background: rgba(21, 14, 18, .5);
    cursor: pointer;
    opacity: .55;
    transition: opacity .15s ease, border-color .15s ease, transform .15s ease;
}
.cp-lightbox-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-lightbox-thumb:hover { opacity: 1; transform: translateY(-2px); }
.cp-lightbox-thumb.is-active { opacity: 1; border-color: #e4c48a; }

/* Toasts surfaced inside the viewer */
.cp-lightbox .cp-alert {
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    max-width: min(520px, 90vw);
    box-shadow: var(--cp-shadow);
    animation: cpLbIn .2s ease;
}

/* --- viewer on small screens --------------------------------------------- */

@media (max-width: 700px) {
    .cp-lightbox-stage { padding: 6px 12px; }
    .cp-lightbox-nav { width: 42px; height: 42px; font-size: .92rem; }
    .cp-lightbox-nav-prev { left: 8px; }
    .cp-lightbox-nav-next { right: 8px; }
    .cp-lightbox-bar { flex-direction: column; align-items: stretch; gap: 10px; }
    .cp-lightbox-bar-left { justify-content: center; }
    .cp-lightbox-strip { width: 100%; }
    .cp-lightbox-count { font-size: .78rem; padding: 4px 10px; }
    .cp-lightbox-top { padding: 12px 14px; }
    .cp-lightbox .cp-alert { top: 62px; }
}


/* =========================================================================
   ROUND 9 — CLIENT PANEL DESIGN POLISH
   Header gold hairline + avatar, richer nav active state, the upgraded
   login page (icon inputs, password reveal, floating ornaments, sheen),
   photo-card micro-interactions with a JS-gated fade-in, gilded hero
   title, stat-card hover lift, footer hairline and a softer cinematic
   viewer backdrop. Everything stays scoped to this portal stylesheet.
   ========================================================================= */

/* --- topbar: gold hairline under the sticky bar --------------------------- */
.cp-topbar::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cp-border-soft) 25%, var(--cp-accent) 50%, var(--cp-border-soft) 75%, transparent);
    opacity: .7;
    pointer-events: none;
}

/* --- brand: soft gold ring around the logo -------------------------------- */
.cp-brand img {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--cp-accent) 28%, transparent);
}

/* --- nav: gradient active pill -------------------------------------------- */
.cp-nav-link.active {
    background: linear-gradient(135deg, var(--cp-accent-soft), color-mix(in srgb, var(--cp-accent) 22%, transparent));
    box-shadow: inset 0 0 0 1px var(--cp-border-soft);
}

/* --- avatar circle with the client's initial ------------------------------- */
.cp-avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cp-wine), #6e1f33);
    color: #f9f1e4;
    font-family: var(--cp-display);
    font-weight: 700;
    font-size: .95rem;
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--cp-accent) 45%, transparent),
        0 4px 10px rgba(0, 0, 0, .25);
}

/* --- photo cards: zoom + JS-gated fade-in + selected glow ------------------ */
.cp-photo-frame { overflow: hidden; }

/* Fade-in is gated behind .cp-js (set before first paint by a tiny inline
   script). Without JS the opacity rule never applies, so every photo is
   still visible the old-fashioned way. */
.cp-js .cp-photo-frame img,
.cp-js .cp-thumb-strip img {
    opacity: 0;
    transform: scale(1.04);
    transition: opacity .5s ease, transform .6s cubic-bezier(.22, .7, .35, 1);
}
.cp-js .cp-photo-frame img.is-loaded,
.cp-js .cp-thumb-strip img.is-loaded {
    opacity: 1;
    transform: scale(1);
}
.cp-photo:hover .cp-photo-frame img,
.cp-photo-frame[data-cp-open]:focus-visible img {
    transform: scale(1.06);
}

.cp-photo.is-selected {
    border-color: color-mix(in srgb, var(--cp-ok) 55%, transparent);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--cp-ok) 35%, transparent),
        var(--cp-shadow-soft);
}
.cp-photo.is-selected .cp-photo-check {
    animation: cpPop .32s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes cpPop {
    from { transform: scale(.3); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Gentle staggered entrance for grid cards (replay on load-more too). */
@media (prefers-reduced-motion: no-preference) {
    .cp-js .cp-photo { animation: cpRise .4s cubic-bezier(.22, .7, .35, 1) both; }
    .cp-photo:nth-child(3n+2) { animation-delay: .05s; }
    .cp-photo:nth-child(3n+3) { animation-delay: .1s; }
}

/* --- dashboard hero: gilded display title ----------------------------------
   The hero keeps the royal wine gradient in BOTH themes, so a cream-to-gold
   gradient text always reads on it. */
.cp-hero-title {
    background: linear-gradient(115deg, #fdf6e9 15%, #eed9a8 55%, #d9b877 90%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #f9f1e4;
}

/* --- stat cards: quiet hover lift ------------------------------------------ */
.cp-stat-card {
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .25s ease;
}
.cp-stat-card:hover {
    transform: translateY(-3px);
    border-color: var(--cp-border-soft);
    box-shadow: var(--cp-shadow-soft);
}

/* --- billing amount tiles: matching hover ----------------------------------- */
.cp-billing-amount {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .25s ease;
}
.cp-billing-amount:hover {
    transform: translateY(-2px);
    box-shadow: var(--cp-shadow-soft);
    border-color: var(--cp-border-soft);
}

/* --- footer: gold hairline on top ------------------------------------------- */
.cp-footer { position: relative; }
.cp-footer::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cp-border-soft) 25%, var(--cp-accent) 50%, var(--cp-border-soft) 75%, transparent);
    opacity: .55;
    pointer-events: none;
}

/* --- viewer: softer cinematic backdrop ---------------------------------------
   Radial falloff keeps the edges darker than the centre so the photo pops. */
.cp-lightbox-backdrop {
    background: radial-gradient(1200px 720px at 50% 38%, rgba(46, 30, 38, .84), rgba(10, 5, 8, .97));
}

/* =========================================================================
   ROUND 9 — LOGIN PAGE UPGRADE
   Icon-adorned inputs, password reveal button, floating ornaments on the
   brand panel and a sheen on the sign-in button.
   ========================================================================= */

/* --- inputs with leading icons + trailing password reveal ------------------ */
.cp-input-wrap { position: relative; display: block; }
.cp-input-wrap input {
    width: 100%;
    padding-left: 42px;
}
.cp-input-wrap input[type="password"] { padding-right: 46px; }
.cp-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cp-muted);
    font-size: .85rem;
    pointer-events: none;
    transition: color .15s ease;
}
.cp-input-wrap:focus-within .cp-input-icon { color: var(--cp-accent); }

.cp-password-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--cp-muted);
    border-radius: 50%;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}
.cp-password-toggle:hover { color: var(--cp-accent); background: var(--cp-accent-soft); }
.cp-password-toggle:focus-visible { outline: 2px solid var(--cp-accent); outline-offset: 1px; }
/* Icon choice is CSS-driven: JS only flips .is-revealed on the button. */
.cp-password-toggle .fa-eye-slash { display: none; }
.cp-password-toggle.is-revealed .fa-eye { display: none; }
.cp-password-toggle.is-revealed .fa-eye-slash { display: inline-block; }

/* --- floating ornaments on the brand panel (decorative only) ---------------- */
.cp-login-float {
    position: absolute;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: var(--cp-accent-light);
    background: color-mix(in srgb, var(--cp-accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--cp-accent) 35%, transparent);
    backdrop-filter: blur(4px);
    opacity: .85;
    pointer-events: none;
    animation: cpFloat 7.5s ease-in-out infinite;
}
.cp-login-float-1 { width: 54px; height: 54px; top: 9%;  right: 10%; font-size: 1.15rem; }
.cp-login-float-2 { width: 44px; height: 44px; bottom: 14%; left: 7%; font-size: .95rem; border-radius: 50%; animation-duration: 8.5s; animation-delay: 1.2s; }
.cp-login-float-3 { width: 62px; height: 46px; top: 16%; left: 8%;  font-size: 1rem;  animation-duration: 9s;   animation-delay: .6s; }
.cp-login-float-4 { width: 40px; height: 40px; bottom: 22%; right: 8%; font-size: .85rem; border-radius: 50%; animation-duration: 7.6s; animation-delay: 2s; }
@keyframes cpFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-14px) rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) {
    .cp-login-float { animation: none; }
}

/* --- sign-in button: gentle gold sheen sweep --------------------------------- */
.cp-btn-signin { position: relative; overflow: hidden; }
.cp-btn-signin::after {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 50%;
    height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .45), transparent);
    transform: skewX(-20deg);
    animation: cpSheen 3.2s ease-in-out infinite;
    pointer-events: none;
}
@keyframes cpSheen {
    0% { left: -80%; }
    55%, 100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
    .cp-btn-signin::after { animation: none; display: none; }
}

/* --- login: keep the hero ring ornaments behind the form on tall screens ----- */
@media (max-height: 760px) and (min-width: 921px) {
    .cp-login-wrap { min-height: 60vh; }
}

/* =========================================================================
   ROUND 10 — SIDEBAR NAVIGATION + RESPONSIVE DASHBOARD
   All navigation moved out of the top bar into a fixed sidebar (signed-in
   pages only). Under 1024px it becomes an off-canvas drawer with a dimming
   backdrop. Dark remains the default theme; the topbar keeps the theme
   pill switch. Scoped to this portal stylesheet only.
   ========================================================================= */

/* --- keyboard focus rings: include the sidebar ---------------------------- */
.cp-sidebar a:focus-visible,
.cp-sidebar button:focus-visible,
.cp-topbar a:focus-visible,
.cp-topbar button:focus-visible {
    outline: 2px solid var(--cp-accent);
    outline-offset: 2px;
    border-radius: 8px;
}

/* --- drawer open: lock the page scroll (mobile only) ---------------------- */
body.cp-sidebar-open { overflow: hidden; }

/* --- sidebar: gentle entrance on first paint (JS-gated) ------------------- */
@keyframes cpSlideIn {
    from { opacity: 0; transform: translateX(-14px); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
    .cp-js .cp-sidebar {
        animation: cpSlideIn .4s cubic-bezier(.22, .7, .35, 1) both;
    }
    /* Keep the drawer transition winning on small screens (animation runs
       once on load, the transform transition must stay usable after it). */
    .cp-js .cp-sidebar { animation-fill-mode: backwards; }
}

/* --- sidebar nav: icon micro-lift on hover --------------------------------- */
.cp-sidebar-nav .cp-nav-link:hover i { transform: translateY(-1px); }

/* --- content column: slightly tighter max width next to the sidebar ------- */
.cp-shell.cp-has-sidebar .cp-main { max-width: 1240px; }

/* --- very short viewports: sidebar scrolls, brand row shrinks -------------- */
@media (max-height: 620px) {
    .cp-sidebar-brand { padding-top: 12px; padding-bottom: 10px; }
    .cp-sidebar-nav { padding-top: 10px; padding-bottom: 10px; }
}