/* ==========================================================================
   ACCOUNTS PAGE - Passwordless Login & Account Dashboard
   clearTime Care — Version C: Split Layout
   ========================================================================== */

:root {
    --ct-acc-red: #EF5350;
    --ct-acc-red-hover: #E53935;
    --ct-acc-red-light: #FF8A80;
    --ct-acc-dark: #1a1a2e;
    --ct-acc-text: #374151;
    --ct-acc-gray: #6B7280;
    --ct-acc-muted: #9CA3AF;
    --ct-acc-gray-light: #F3F4F6;
    --ct-acc-border: #E5E7EB;
    --ct-acc-success: #10B981;
    --ct-acc-error: #EF4444;
    --ct-acc-font: var(--ct-font-display, 'Plus Jakarta Sans', sans-serif);
    --ct-acc-font-body: var(--ct-font-body, 'DM Sans', sans-serif);
    --ct-text-headline: clamp(2rem, 5vw, 3rem);
    --ct-text-headline-weight: 800;
    --ct-text-headline-lh: 1.2;
    --ct-text-body: 1.25rem;
    --ct-text-body-weight: 400;
    --ct-text-body-lh: 1.7;
    --ct-text-detail: 0.95rem;
    --ct-text-detail-weight: 400;
    --ct-text-detail-lh: 1.6;
    --ct-acc-radius: 16px;
    --ct-acc-radius-sm: 12px;
    --ct-acc-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ct-acc-bg: #ffffff;
    --ct-acc-bg-raised: #ffffff;
    --ct-acc-bg-inset: #F3F4F6;
    --ct-acc-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.04);
    --ct-acc-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
    --ct-acc-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);
    --ct-acc-overlay-bg: rgba(0, 0, 0, 0.5);
    color-scheme: light dark;
}

/* ---------- Dark Theme Variable Overrides ---------- */
[data-ct-theme="dark"] {
    --ct-acc-dark: #f1f5f9;
    --ct-acc-text: #cbd5e1;
    --ct-acc-gray: #94a3b8;
    --ct-acc-muted: #64748b;
    --ct-acc-gray-light: #1e293b;
    --ct-acc-border: #334155;
    --ct-acc-red: #f87171;
    --ct-acc-red-hover: #ef4444;
    --ct-acc-red-light: #fca5a5;
    --ct-acc-success: #34d399;
    --ct-acc-error: #f87171;
    --ct-acc-bg: #0f172a;
    --ct-acc-bg-raised: #1e293b;
    --ct-acc-bg-inset: #0f172a;
    --ct-acc-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.2);
    --ct-acc-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
    --ct-acc-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
    --ct-acc-overlay-bg: rgba(0, 0, 0, 0.7);
    color-scheme: dark;
}

/* ==========================================================================
   Page Layout — Split: Dark brand left, white form right
   ========================================================================== */

.ct-accounts-main {
    display: flex !important;
    min-height: 100vh !important;
    opacity: 1 !important;
    position: relative;
}

.ct-acc-version {
    position: fixed;
    bottom: 8px;
    right: 12px;
    font-size: 11px;
    color: rgba(0, 0, 0, 0.18);
    font-family: var(--ct-acc-font-body, 'DM Sans', sans-serif);
    pointer-events: none;
    user-select: none;
    z-index: 1;
}
.ct-acc-version__tag {
    background: #f59e0b;
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 4px;
    vertical-align: middle;
}

/* ==========================================================================
   Left Panel — Dark Branded
   ========================================================================== */

.ct-split-brand {
    flex: 0 0 40%;
    background: linear-gradient(160deg, #1A1A2E 0%, #2D2D44 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 48px;
    position: relative;
    overflow: hidden;
}

/* Subtle red radial glow behind text */
.ct-split-brand::before {
    content: '';
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(239, 83, 80, 0.15) 0%, transparent 60%);
    border-radius: 50%;
    pointer-events: none;
}

.ct-split-brand__content {
    position: relative;
    z-index: 1;
    text-align: left;
    max-width: 440px;
}

.ct-split-brand__video-wrap {
    width: 100%;
    max-width: 340px;
    border-radius: 20px;
    overflow: hidden;
    margin: 0 0 32px;
    animation: ct-acc-float 6s ease-in-out infinite;
}

.ct-split-brand__video {
    width: 100%;
    height: auto;
    display: block;
}

@keyframes ct-acc-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

.ct-split-brand__headline {
    font-family: var(--ct-acc-font);
    font-size: var(--ct-text-headline);
    font-weight: var(--ct-text-headline-weight);
    color: #fff;
    line-height: var(--ct-text-headline-lh);
    margin: 0 0 16px;
}

.ct-split-brand__subline {
    font-family: var(--ct-acc-font-body);
    font-size: var(--ct-text-body);
    color: rgba(255, 255, 255, 0.6);
    line-height: var(--ct-text-body-lh);
    margin: 0 0 48px;
}

/* Trust indicators */
.ct-split-brand__trust {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
    max-width: 480px;
    margin: 0;
}

.ct-split-brand__trust-item {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 20px rgba(239, 83, 80, 0.08);
    transition: transform 0.25s var(--ct-acc-ease), background 0.25s var(--ct-acc-ease), box-shadow 0.25s var(--ct-acc-ease);
}

.ct-split-brand__trust-item:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.10));
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2), 0 0 24px rgba(239, 83, 80, 0.12);
}

.ct-split-brand__trust-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(239, 83, 80, 0.25), rgba(239, 83, 80, 0.35));
    box-shadow: 0 2px 8px rgba(239, 83, 80, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ct-split-brand__trust-icon svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.ct-split-brand__trust-text {
    font-family: var(--ct-acc-font-body);
    font-size: var(--ct-text-detail);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}

/* ==========================================================================
   Right Panel — White Form Area
   ========================================================================== */

.ct-split-form {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 48px 80px;
    background: #fff;
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   Auth Container
   ========================================================================== */

.ct-acc-container {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
}

/* Card — no shadow, the white panel IS the container */
.ct-acc-card {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    position: relative;
    overflow: visible;
}

/* Icon — glassmorphism + breathe */
.ct-acc-card__icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(255, 240, 240, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(239, 83, 80, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    color: var(--ct-acc-red);
    position: relative;
    animation: ct-acc-breathe 4s ease-in-out infinite;
}

@keyframes ct-acc-breathe {
    0%, 100% { transform: scale(1); box-shadow: 0 4px 20px rgba(239, 83, 80, 0.12); }
    50% { transform: scale(1.03); box-shadow: 0 8px 30px rgba(239, 83, 80, 0.25); }
}

.ct-acc-card__icon svg {
    width: 28px;
    height: 28px;
}

/* Lock icon underglow */
.ct-acc-card__icon::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 20px;
    background: radial-gradient(circle, rgba(239, 83, 80, 0.2) 0%, transparent 70%);
    opacity: 0;
    animation: ct-acc-glow 4s ease-in-out infinite;
    z-index: -1;
}

@keyframes ct-acc-glow {
    0%, 100% { opacity: 0; transform: scale(0.95); }
    50% { opacity: 1; transform: scale(1.1); }
}

/* Lock shackle lift — synced with breathe peak */
.ct-acc-card__icon .lock-shackle {
    animation: ct-acc-unlock 4s ease-in-out infinite;
}

@keyframes ct-acc-unlock {
    0%, 100% { transform: translateY(0); }
    45% { transform: translateY(0); }
    55% { transform: translateY(-1.5px); }
    65% { transform: translateY(0); }
}

/* Title — centered */
.ct-acc-card__title {
    font-family: var(--ct-acc-font);
    font-size: var(--ct-text-headline);
    font-weight: var(--ct-text-headline-weight);
    color: var(--ct-acc-dark);
    text-align: center;
    margin: 0 0 8px;
    line-height: var(--ct-text-headline-lh);
}

/* Subtitle — centered */
.ct-acc-card__subtitle {
    font-family: var(--ct-acc-font-body);
    font-size: var(--ct-text-body);
    color: var(--ct-acc-gray);
    text-align: center;
    margin: 0 0 32px;
    line-height: var(--ct-text-body-lh);
}

/* ==========================================================================
   Form Elements
   ========================================================================== */

.ct-acc-form-group {
    margin-bottom: 24px;
}

.ct-acc-label {
    display: block;
    font-family: var(--ct-acc-font-body);
    font-size: var(--ct-text-detail);
    font-weight: 600;
    color: var(--ct-acc-dark);
    margin-bottom: 8px;
}

.ct-acc-input {
    width: 100%;
    padding: 14px 20px;
    font-family: var(--ct-acc-font-body);
    font-size: 16px;
    color: var(--ct-acc-dark);
    background: var(--ct-acc-gray-light);
    border: 2px solid transparent;
    border-radius: 50px;
    outline: none;
    transition: all 0.25s ease;
    box-sizing: border-box;
}

.ct-acc-input:focus {
    border-color: var(--ct-acc-red);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(239, 83, 80, 0.1),
                0 4px 12px rgba(239, 83, 80, 0.08);
}

.ct-acc-input::placeholder {
    color: var(--ct-acc-muted);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.ct-acc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 32px;
    font-family: var(--ct-acc-font-body);
    font-size: 17px;
    font-weight: 600;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    width: 100%;
    text-decoration: none;
}

.ct-acc-btn--primary {
    background: var(--ct-acc-red);
    color: #fff;
    box-shadow: 0 4px 16px rgba(239, 83, 80, 0.35),
                0 0 20px rgba(239, 83, 80, 0.15);
}

.ct-acc-btn--primary:hover {
    background: var(--ct-acc-red-hover);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(239, 83, 80, 0.5),
                0 0 30px rgba(239, 83, 80, 0.3);
}

.ct-acc-btn--primary:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 83, 80, 0.4);
}

.ct-acc-btn--primary:disabled {
    background: #D1D5DB;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.ct-acc-btn--secondary {
    background: var(--ct-acc-gray-light);
    color: var(--ct-acc-dark);
}

.ct-acc-btn--secondary:hover {
    background: #E5E7EB;
    transform: translateY(-2px);
}

.ct-acc-btn--outline {
    background: transparent;
    color: var(--ct-acc-red);
    border: 2px solid var(--ct-acc-red);
}

.ct-acc-btn--outline:hover {
    background: rgba(239, 83, 80, 0.05);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(239, 83, 80, 0.2);
}

/* ==========================================================================
   Code Input
   ========================================================================== */

.ct-acc-code-inputs {
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    margin-bottom: 24px;
}

.ct-acc-code-input {
    width: 52px;
    height: 60px;
    text-align: center;
    font-family: 'Courier New', monospace;
    font-size: 24px;
    font-weight: 700;
    color: var(--ct-acc-dark);
    background: var(--ct-acc-gray-light);
    border: 2px solid transparent;
    border-radius: var(--ct-acc-radius-sm);
    outline: none;
    transition: all 0.2s ease;
    -moz-appearance: textfield;
}

.ct-acc-code-input::-webkit-inner-spin-button,
.ct-acc-code-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.ct-acc-code-input:focus {
    border-color: var(--ct-acc-red);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(239, 83, 80, 0.1);
}

.ct-acc-code-input.filled {
    background: #FFF0F0;
    border-color: var(--ct-acc-red);
}

/* ==========================================================================
   Resend
   ========================================================================== */

.ct-acc-resend {
    text-align: left;
    margin-bottom: 24px;
    font-family: var(--ct-acc-font-body);
    font-size: 15px;
    color: var(--ct-acc-gray);
}

.ct-acc-resend__link {
    background: none;
    border: none;
    color: var(--ct-acc-red);
    font-family: var(--ct-acc-font-body);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ct-acc-resend__link:disabled {
    color: var(--ct-acc-gray);
    cursor: not-allowed;
    text-decoration: none;
}

.ct-acc-resend__countdown {
    color: var(--ct-acc-gray);
    margin-left: 4px;
}

/* ==========================================================================
   Login Mode Toggle (Code ↔ Password)
   ========================================================================== */

.ct-acc-mode-links {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 16px;
}

.ct-acc-mode-link {
    background: none;
    border: none;
    color: var(--ct-acc-red);
    font-family: var(--ct-acc-font-body);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
    transition: color 0.2s ease;
}

.ct-acc-mode-link:hover {
    color: var(--ct-acc-red-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ct-acc-mode-links--secondary {
    margin-top: 8px;
    margin-bottom: 64px;
}

.ct-acc-mode-links__dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--ct-acc-gray);
    flex-shrink: 0;
}

/* ==========================================================================
   Error Message
   ========================================================================== */

.ct-acc-error {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: var(--ct-acc-radius-sm);
    margin-bottom: 20px;
    font-family: var(--ct-acc-font-body);
    font-size: var(--ct-text-detail);
    color: #991B1B;
    animation: ct-acc-shake 0.4s ease;
}

.ct-acc-error.active {
    display: flex;
}

.ct-acc-error__icon {
    flex-shrink: 0;
    font-size: 16px;
}

.ct-acc-error__text {
    flex: 1;
}

.ct-acc-error__close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: #991B1B;
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

@keyframes ct-acc-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* ==========================================================================
   Loading Spinner
   ========================================================================== */

.ct-acc-loading {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.9);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    z-index: 10;
    border-radius: var(--ct-acc-radius);
}

.ct-acc-loading.active {
    display: flex;
}

.ct-acc-loading__spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--ct-acc-gray-light);
    border-top-color: var(--ct-acc-red);
    border-radius: 50%;
    animation: ct-acc-spin 0.7s linear infinite;
}

.ct-acc-loading__text {
    font-family: var(--ct-acc-font-body);
    font-size: 14px;
    color: var(--ct-acc-gray);
}

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

/* Panel-level loader — static flex, no absolute overlay */
.ct-acc-loading--panel {
    position: static;
    background: none;
    min-height: 200px;
}

/* Left panel loading state */
.ct-split-brand--loading {
    background: var(--ct-acc-bg, #FAFAFA) !important;
}

/* ── Loading Skeleton Shimmer (background layer) ── */
.ct-acc-loading-skel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px 20px;
    width: 100%;
    opacity: 0.5;
}
.ct-acc-loading-skel--right {
    padding: 32px;
    gap: 20px;
    max-width: 800px;
    margin: 0 auto;
}
.ct-acc-loading-skel__row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.ct-acc-loading-skel__block {
    width: 100%;
    height: 48px;
    border-radius: 12px;
}
.ct-acc-loading-skel__block--short {
    width: 65%;
    height: 32px;
}
.ct-acc-loading-skel__block--hero {
    height: 120px;
    border-radius: 16px;
}
.ct-acc-loading-skel__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}
.ct-acc-loading-skel__card {
    height: 80px;
    border-radius: 14px;
}
.ct-acc-loading-skel__card--tall {
    height: 110px;
}

/* ── Heartbeat ECG Loader (foreground overlay) ── */
.ct-acc-heartbeat {
    position: absolute;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.ct-acc-heartbeat__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 40px 48px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: 24px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 16px 64px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(255,255,255,0.5) inset;
}
.ct-acc-heartbeat__row {
    display: flex;
    align-items: center;
    gap: 16px;
}
.ct-acc-heartbeat__heart {
    width: 36px;
    height: 36px;
    color: var(--ct-acc-red, #EF5350);
    flex-shrink: 0;
    animation: ct-hb-beat 1.2s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(239, 83, 80, 0.3));
}
.ct-acc-heartbeat__ecg {
    width: 160px;
    height: 44px;
    overflow: hidden;
}
.ct-acc-heartbeat__ecg svg {
    width: 320px;
    height: 44px;
    animation: ct-hb-scroll 2s linear infinite;
}
.ct-acc-heartbeat__ecg-line {
    fill: none;
    stroke: var(--ct-acc-red, #EF5350);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 4px rgba(239, 83, 80, 0.3));
}
.ct-acc-heartbeat__text {
    font-family: var(--ct-acc-font, 'Plus Jakarta Sans', sans-serif);
    font-size: 13px;
    font-weight: 500;
    color: var(--ct-acc-gray, #6B7280);
    letter-spacing: 0.02em;
}
@keyframes ct-hb-beat {
    0%, 100% { transform: scale(1); }
    15% { transform: scale(1.25); }
    30% { transform: scale(1); }
    45% { transform: scale(1.15); }
    60% { transform: scale(1); }
}
@keyframes ct-hb-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ==========================================================================
   Skeleton – Login Form Placeholder
   ========================================================================== */

.ct-acc-skeleton {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 460px;
    width: 100%;
}

.ct-acc-skeleton__icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    margin-bottom: 8px;
}

.ct-acc-skeleton__title {
    width: 60%;
    height: 36px;
    border-radius: 8px;
}

.ct-acc-skeleton__subtitle {
    width: 80%;
    height: 16px;
    border-radius: 6px;
    margin-bottom: 8px;
}

.ct-acc-skeleton__label {
    width: 30%;
    height: 14px;
    border-radius: 4px;
    align-self: flex-start;
}

.ct-acc-skeleton__input {
    width: 100%;
    height: 52px;
    border-radius: var(--ct-acc-radius-sm, 12px);
}

.ct-acc-skeleton__btn {
    width: 100%;
    height: 56px;
    border-radius: var(--ct-acc-radius-sm, 12px);
    margin-top: 8px;
}

.ct-acc-skeleton__links {
    width: 50%;
    height: 14px;
    border-radius: 4px;
    margin-top: 4px;
}

/* ==========================================================================
   Back Link
   ========================================================================== */

.ct-acc-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--ct-acc-font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--ct-acc-gray);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-bottom: 20px;
    transition: color 0.2s ease;
}

.ct-acc-back:hover {
    color: var(--ct-acc-dark);
}

/* ==========================================================================
   Dashboard (Authenticated State)
   ========================================================================== */

.ct-acc-dashboard {
    text-align: left;
}

/* Header: avatar + name side by side */
.ct-acc-dashboard__header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
}

.ct-acc-dashboard__avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ct-acc-red), #FF7043);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--ct-acc-font);
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 0 0 4px rgba(239,83,80,0.12);
    transition: transform 0.25s var(--ct-acc-ease);
}

.ct-acc-dashboard__header-text {
    min-width: 0;
}

.ct-acc-dashboard__name {
    font-family: var(--ct-acc-font);
    font-size: var(--ct-text-headline);
    font-weight: var(--ct-text-headline-weight);
    color: var(--ct-acc-dark);
    margin: 0 0 2px;
    line-height: var(--ct-text-headline-lh);
}

.ct-acc-dashboard__greeting {
    font-family: var(--ct-acc-font-body);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ct-acc-dark);
    margin: 0 0 2px;
    line-height: var(--ct-text-body-lh);
}

.ct-acc-dashboard__welcome-sub {
    font-family: var(--ct-acc-font-body);
    font-size: var(--ct-text-detail);
    color: var(--ct-acc-gray);
    margin: 4px 0 0;
}

.ct-acc-dashboard__user-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ct-acc-border);
}

.ct-acc-dashboard__display-name {
    font-family: var(--ct-acc-font);
    font-size: 16px;
    font-weight: 700;
    color: var(--ct-acc-dark);
}

.ct-acc-dashboard__badge {
    font-family: var(--ct-acc-font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--ct-acc-red);
    background: #FFF0F0;
    padding: 4px 12px;
    border-radius: 20px;
}

.ct-acc-dashboard__email {
    font-family: var(--ct-acc-font-body);
    font-size: 14px;
    color: var(--ct-acc-gray);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Info rows */
.ct-acc-dashboard__info {
    background: rgba(255,255,255,0.6);
    border-radius: var(--ct-acc-radius-sm);
    padding: 4px 0;
    margin-bottom: 24px;
}

.ct-acc-dashboard__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid var(--ct-acc-border);
}

.ct-acc-dashboard__row:last-child {
    border-bottom: none;
}

.ct-acc-dashboard__row-label {
    font-family: var(--ct-acc-font-body);
    font-size: var(--ct-text-detail);
    font-weight: 500;
    color: var(--ct-acc-gray);
    flex-shrink: 0;
    margin-right: 16px;
}

.ct-acc-dashboard__row-value {
    font-family: var(--ct-acc-font-body);
    font-size: var(--ct-text-detail);
    font-weight: 600;
    color: var(--ct-acc-dark);
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ct-acc-dashboard__mono {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    font-weight: 400;
    color: var(--ct-acc-gray);
    letter-spacing: -0.3px;
}

/* Status dot */
/* Status/Verification Tags */
.ct-acc-tag {
    display: inline-block;
    font-family: var(--ct-acc-font-body);
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
    white-space: nowrap;
    vertical-align: middle;
    line-height: 1.4;
}

.ct-acc-tag--green {
    color: #065F46;
    background: #D1FAE5;
}

.ct-acc-tag--orange {
    color: #92400E;
    background: #FEF3C7;
}

.ct-acc-tag--red {
    color: #991B1B;
    background: #FEE2E2;
}

.ct-acc-dashboard__status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ct-acc-dashboard__status-dot--active {
    background: var(--ct-acc-success);
}

.ct-acc-dashboard__status-dot--inactive {
    background: var(--ct-acc-gray);
}

/* ==========================================================================
   No Account State
   ========================================================================== */

.ct-acc-no-account__icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: #FEF2F2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 24px;
    color: var(--ct-acc-error);
}

.ct-acc-no-account__icon svg {
    width: 32px;
    height: 32px;
}

/* ==========================================================================
   Email Display in Code Step
   ========================================================================== */

.ct-acc-email-display {
    font-weight: 600;
    color: var(--ct-acc-dark);
}

/* ==========================================================================
   Session-Detected Initial State (eliminates FOUC for authenticated users).
   .ct-acc-has-session is set by inline <head> script reading localStorage.
   ========================================================================== */

/* --- Viewport lock: no page scrollbar when authenticated --- */
html.ct-acc-has-session,
html.ct-acc-has-session body {
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}
html.ct-acc-has-session .jupiterx-site {
    height: 100%;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
}
html.ct-acc-has-session .ct-accounts-main {
    height: 100%;
    min-height: 0 !important;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
}
html.ct-acc-has-session .ct-accounts-main::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 30%, rgba(239,83,80,0.15), transparent 60%);
    pointer-events: none;
    z-index: 0;
}
html.ct-acc-has-session .ct-accounts-main::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 70%, rgba(99,102,241,0.12), transparent 60%);
    pointer-events: none;
    z-index: 0;
}
/* Hide WP admin bar in authenticated viewport lock */
html.ct-acc-has-session #wpadminbar { display: none !important; }

html.ct-acc-has-session #ct-acc-brand-content { display: none; }
html.ct-acc-has-session #ct-acc-profile { display: block !important; }
html.ct-acc-has-session .ct-footer { display: none !important; }
html.ct-acc-has-session .ct-header { display: none !important; }
html.ct-acc-has-session .ct-split-brand {
    flex: 0 0 340px;
    background: rgba(250, 250, 250, 0.55);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    justify-content: flex-start;
    padding: 120px 20px 80px;
    overflow: hidden;
    z-index: 1;
}
html.ct-acc-has-session .ct-split-brand::before { display: none; }

/* Right panel: flex column filling viewport, no scroll on form itself */
html.ct-acc-has-session .ct-split-form {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    z-index: 1;
}
html.ct-acc-has-session .ct-split-form .ct-acc-container {
    max-width: 100%;
    margin: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
html.ct-acc-has-session #ct-acc-app {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
html.ct-acc-has-session .ct-acc-tab-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    padding: 0;
    -webkit-overflow-scrolling: touch;
}
.ct-acc-sticky-top {
    position: sticky;
    top: 0;
    padding: 34px 32px 16px;
    background: rgba(255, 255, 255, 0.75);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    z-index: 2;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04);
}
.ct-acc-scroll-content {
    padding: 20px 32px 32px;
}

/* ==========================================================================
   Authenticated Left Panel
   ========================================================================== */

.ct-split-brand--authenticated {
    flex: 0 0 340px;
    background: rgba(250, 250, 250, 0.55);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    justify-content: flex-start;
    padding: 120px 20px 80px;
    transition: flex-basis 0.3s var(--ct-acc-ease), padding 0.3s var(--ct-acc-ease);
    overflow: hidden;
    z-index: 1;
}

.ct-split-brand--authenticated::before {
    display: none;
}

/* ==========================================================================
   Profile Card (Left Panel — Authenticated)
   ========================================================================== */

#ct-acc-profile {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    padding: 0;
    box-sizing: border-box;
}

.ct-acc-profile__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.ct-acc-profile__title {
    font-family: var(--ct-acc-font);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--ct-acc-gray);
    margin: 0;
}

.ct-acc-logout-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    font-family: var(--ct-acc-font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--ct-acc-gray);
    background: transparent;
    border: 1px solid var(--ct-acc-border);
    border-radius: 50px;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
    white-space: nowrap;
}

.ct-acc-logout-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.ct-acc-logout-btn:hover {
    color: var(--ct-acc-red);
    border-color: var(--ct-acc-red);
    background: rgba(239, 83, 80, 0.04);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 83, 80, 0.15);
}

/* ==========================================================================
   Collapse Toggle Button
   ========================================================================== */

.ct-acc-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--ct-acc-border);
    border-radius: 10px;
    color: var(--ct-acc-gray);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.3s var(--ct-acc-ease);
    flex-shrink: 0;
}

.ct-acc-collapse-btn:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--ct-acc-dark);
}

.ct-acc-collapse-btn svg {
    transition: transform 0.3s var(--ct-acc-ease);
}

/* ==========================================================================
   Collapsed Sidebar State
   ========================================================================== */

.ct-split-brand--collapsed {
    flex: 0 0 80px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.ct-split-brand--collapsed .ct-acc-collapse-btn svg {
    transform: rotate(180deg);
}

.ct-split-brand--collapsed .ct-acc-profile__topbar {
    justify-content: center;
    gap: 0;
}

.ct-split-brand--collapsed .ct-acc-logout-btn__text,
.ct-split-brand--collapsed .ct-acc-profile__header-text,
.ct-split-brand--collapsed .ct-acc-section-title {
    display: none;
}

.ct-split-brand--collapsed .ct-acc-logout-btn {
    display: none;
}

.ct-split-brand--collapsed .ct-acc-profile__header {
    justify-content: center;
}

.ct-split-brand--collapsed .ct-acc-dashboard__avatar {
    width: 44px;
    height: 44px;
    font-size: 1rem;
}

.ct-split-brand--collapsed .ct-acc-nav {
    align-items: center;
}

.ct-split-brand--collapsed .ct-acc-nav__item {
    justify-content: center;
    padding: 12px;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    gap: 0;
}

.ct-split-brand--collapsed .ct-acc-nav__item--active {
    padding-left: 12px;
    border-left: none;
    box-shadow: inset 0 0 0 1.5px rgba(239, 83, 80, 0.3);
}

.ct-split-brand--collapsed .ct-acc-nav__label {
    display: none;
}

.ct-split-brand--collapsed .ct-acc-nav__icon {
    margin: 0;
}

.ct-split-brand--collapsed .ct-acc-devices {
    display: none;
}

.ct-acc-profile__header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
}

.ct-acc-profile__header:hover .ct-acc-dashboard__avatar {
    transform: scale(1.04);
}

.ct-acc-profile__header-text {
    min-width: 0;
}

.ct-acc-profile .ct-acc-dashboard__info {
    background: #fff;
    border: 1px solid var(--ct-acc-border);
    border-radius: var(--ct-acc-radius-sm);
    padding: 4px 0;
    margin-bottom: 24px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.ct-acc-profile .ct-acc-dashboard__row {
    padding: 14px 20px;
    border-bottom-color: var(--ct-acc-gray-light);
}

/* ==========================================================================
   Subscription Card (Right Panel — Authenticated)
   ========================================================================== */

/* Right panel: top-align when authenticated to match left panel */
.ct-split-form--authenticated {
    align-items: flex-start;
    justify-content: flex-start;
    padding: 148px 48px 80px 40px;
}

.ct-split-form--authenticated .ct-acc-container {
    max-width: 100%;
    margin: 0;
}

.ct-acc-subscription {
    text-align: left;
}

.ct-acc-subscription__header {
    margin-bottom: 28px;
    text-align: left;
}

.ct-acc-subscription__header .ct-acc-card__title {
    margin-bottom: 0;
    text-align: left;
}

.ct-acc-subscription__status {
    font-family: var(--ct-acc-font-body);
    font-size: 13px;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
}

.ct-acc-subscription__status--free {
    color: var(--ct-acc-gray);
    background: var(--ct-acc-gray-light);
}

.ct-acc-subscription__status--active {
    color: #065F46;
    background: #D1FAE5;
}

.ct-acc-subscription__status--expired {
    color: #991B1B;
    background: #FEE2E2;
}

.ct-acc-subscription__plan-badge {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 24px;
    background: linear-gradient(135deg, #FFF5F5 0%, #FFF0E8 100%);
    border: 1px solid #FFE4DE;
    border-radius: var(--ct-acc-radius-sm);
    margin-bottom: 28px;
}

.ct-acc-subscription__plan-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--ct-acc-red), #FF7043);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
}

.ct-acc-subscription__plan-icon svg {
    width: 22px;
    height: 22px;
}

.ct-acc-subscription__plan-name {
    font-family: var(--ct-acc-font);
    font-size: 20px;
    font-weight: 800;
    color: var(--ct-acc-dark);
}

/* Testing banner — prominent alert below plan badge */
.ct-acc-subscription__testing-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    margin: 0 0 4px;
    background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
    border: 2px solid #FB923C;
    border-radius: var(--ct-acc-radius-sm);
    color: #9A3412;
    font-family: var(--ct-acc-font-body);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 8px rgba(251, 146, 60, 0.15);
}

.ct-acc-subscription__testing-banner svg {
    flex-shrink: 0;
    color: #EA580C;
}


/* Card expiry (subtle, inline) */
.ct-acc-card-expiry {
    font-size: 12px;
    color: var(--ct-acc-gray);
    margin-left: 4px;
}

/* Manage subscription button inside card */
.ct-acc-subscription__manage-wrap {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--ct-acc-border);
    margin-bottom: 16px;
}

.ct-acc-subscription__manage-wrap .ct-acc-btn--primary {
    font-size: 18px;
    padding: 18px 36px;
    box-shadow: 0 4px 14px rgba(239, 83, 80, 0.35);
}

.ct-acc-subscription__manage-wrap .ct-acc-btn--primary:hover {
    box-shadow: 0 6px 20px rgba(239, 83, 80, 0.45);
}

/* Invoice button below subscription info rows */
.ct-acc-subscription__invoice-btn-wrap {
    margin-top: 4px;
}

.ct-acc-subscription__invoice-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 14px 20px;
    background: #fff;
    border: 1px solid var(--ct-acc-border);
    border-radius: var(--ct-acc-radius-sm);
    cursor: pointer;
    font-family: var(--ct-acc-font-body);
    font-size: 15px;
    font-weight: 500;
    color: var(--ct-acc-dark);
    text-align: left;
    transition: background 0.2s ease;
    gap: 14px;
}

.ct-acc-subscription__invoice-btn:hover {
    background: var(--ct-acc-gray-light);
}

.ct-acc-subscription__invoice-btn__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #4F46E5;
}

.ct-acc-subscription__invoice-btn__icon svg {
    width: 18px;
    height: 18px;
}

.ct-acc-subscription__invoice-btn__text {
    flex: 1;
}

.ct-acc-subscription__invoice-btn__arrow {
    font-size: 20px;
    color: var(--ct-acc-gray);
    font-weight: 300;
    flex-shrink: 0;
}

/* Invoice list in overlay */
.ct-acc-invoice-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ct-acc-invoice-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--ct-acc-gray-light);
    border-radius: var(--ct-acc-radius-sm);
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
}

.ct-acc-invoice-item:hover {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.ct-acc-invoice-item__left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.ct-acc-invoice-item__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #4F46E5;
}

.ct-acc-invoice-item__icon svg {
    width: 18px;
    height: 18px;
}

.ct-acc-invoice-item__info {
    min-width: 0;
}

.ct-acc-invoice-item__number {
    font-family: var(--ct-acc-font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--ct-acc-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ct-acc-invoice-item__date {
    font-family: var(--ct-acc-font-body);
    font-size: 12px;
    color: var(--ct-acc-gray);
    margin-top: 2px;
}

.ct-acc-invoice-item__right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: 12px;
}

.ct-acc-invoice-item__amount {
    font-family: var(--ct-acc-font-body);
    font-size: 14px;
    font-weight: 700;
    color: var(--ct-acc-dark);
}

.ct-acc-invoice-item__download {
    color: var(--ct-acc-gray);
    flex-shrink: 0;
}

.ct-acc-invoice-item__download svg {
    width: 16px;
    height: 16px;
}

/* ==========================================================================
   Action Buttons (Profile Panel)
   ========================================================================== */

.ct-acc-profile__actions {
    background: #fff;
    border: 1px solid var(--ct-acc-border);
    border-radius: var(--ct-acc-radius-sm);
    overflow: hidden;
}

.ct-acc-action-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 16px 20px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--ct-acc-gray-light);
    cursor: pointer;
    font-family: var(--ct-acc-font-body);
    font-size: 15px;
    font-weight: 500;
    color: var(--ct-acc-dark);
    text-align: left;
    transition: background 0.2s ease;
    gap: 14px;
}

.ct-acc-action-btn:last-child {
    border-bottom: none;
}

.ct-acc-action-btn:hover {
    background: var(--ct-acc-gray-light);
}

.ct-acc-action-btn__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #FFF0F0 0%, #FFE0E0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--ct-acc-red);
}

.ct-acc-action-btn__icon svg {
    width: 18px;
    height: 18px;
}

.ct-acc-action-btn__text {
    flex: 1;
}

.ct-acc-action-btn__arrow {
    font-size: 20px;
    color: var(--ct-acc-gray);
    font-weight: 300;
    flex-shrink: 0;
}

/* ==========================================================================
   Device List ("Ihre Geräte")
   ========================================================================== */

.ct-acc-devices {
    margin-top: 24px;
}

.ct-acc-devices__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.ct-acc-devices__title {
    font-family: var(--ct-acc-font);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--ct-acc-gray);
    margin: 0;
}

.ct-acc-devices__refresh-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--ct-acc-gray);
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
}

.ct-acc-devices__refresh-btn:hover {
    color: var(--ct-acc-dark);
    background: var(--ct-acc-gray-light);
}

.ct-acc-devices__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Device card */
.ct-acc-device-card {
    background: #fff;
    border: 1px solid var(--ct-acc-border);
    border-radius: var(--ct-acc-radius-sm);
    padding: 14px 16px;
    transition: box-shadow 0.2s ease;
}

.ct-acc-device-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Assistant device accent */
.ct-acc-device-card--assistant {
    border-left: 3px solid var(--ct-acc-red);
}

.ct-acc-device-card__top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

/* Device avatar — 40px circle */
.ct-acc-device-card__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ct-acc-device-card__avatar--img {
    background: var(--ct-acc-gray-light);
}

.ct-acc-device-card__avatar--img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ct-acc-device-card__avatar--icon {
    background: linear-gradient(135deg, #FFF0F0 0%, #FFE0E0 100%);
    color: var(--ct-acc-red);
}

.ct-acc-device-card__avatar--assistant {
    background: linear-gradient(135deg, #FFF0F0 0%, #FFD6D6 100%);
    color: var(--ct-acc-red);
}

.ct-acc-device-card__avatar--icon svg,
.ct-acc-device-card__avatar--assistant svg {
    width: 20px;
    height: 20px;
}

/* Name + type badge wrapper */
.ct-acc-device-card__name-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ct-acc-device-card__icon {
    color: var(--ct-acc-red);
    flex-shrink: 0;
    display: flex;
}

.ct-acc-device-card__name {
    font-family: var(--ct-acc-font);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ct-acc-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Device type badge (shown for assistants) */
.ct-acc-device-card__type {
    font-family: var(--ct-acc-font-body);
    font-size: 11px;
    font-weight: 600;
    color: var(--ct-acc-red);
    line-height: 1.2;
}

.ct-acc-device-card__access {
    font-family: var(--ct-acc-font-body);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

.ct-acc-device-card__access--admin {
    color: #991B1B;
    background: #FEE2E2;
}

.ct-acc-device-card__access--user {
    color: #1E40AF;
    background: #DBEAFE;
}

.ct-acc-device-card__access--external {
    color: var(--ct-acc-gray);
    background: var(--ct-acc-gray-light);
}

.ct-acc-device-card__status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ct-acc-success);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
    flex-shrink: 0;
}

.ct-acc-device-card__info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-left: 50px; /* align with name (avatar 40px + gap 10px) */
    margin-top: 4px;
}

.ct-acc-device-card__info-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 18px;
}

.ct-acc-device-card__status-row {
    margin-top: 2px;
}

.ct-acc-device-card__sep {
    color: #D1D5DB;
    font-size: 10px;
}

.ct-acc-device-card__model {
    font-family: var(--ct-acc-font-body);
    font-size: 12px;
    color: var(--ct-acc-muted);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.ct-acc-device-card__model-icon {
    color: var(--ct-acc-muted);
}

.ct-acc-device-card__battery {
    font-family: var(--ct-acc-font-body);
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.ct-acc-device-card__battery--green {
    color: #059669;
}

.ct-acc-device-card__battery--orange {
    color: #D97706;
}

.ct-acc-device-card__battery--red {
    color: #DC2626;
}

.ct-acc-device-card__charging {
    font-size: 11px;
}

.ct-acc-device-card__wifi {
    font-family: var(--ct-acc-font-body);
    font-size: 12px;
    color: var(--ct-acc-gray);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.ct-acc-device-card__wifi--offline {
    color: var(--ct-acc-muted);
}

.ct-acc-device-card__wifi-band {
    font-size: 11px;
    color: var(--ct-acc-muted);
}

.ct-acc-device-card__wifi-icon--excellent {
    color: #059669;
}

.ct-acc-device-card__wifi-icon--good {
    color: #10B981;
}

.ct-acc-device-card__wifi-icon--mid {
    color: #D97706;
}

.ct-acc-device-card__wifi-icon--bad {
    color: #DC2626;
}

.ct-acc-device-card__android {
    font-family: var(--ct-acc-font-body);
    font-size: 12px;
    color: var(--ct-acc-muted);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.ct-acc-device-card__android-icon {
    color: var(--ct-acc-muted);
}

.ct-acc-device-card__app-version {
    font-family: var(--ct-acc-font-body);
    font-size: 12px;
    color: var(--ct-acc-muted);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.ct-acc-device-card__app-version-icon {
    color: var(--ct-acc-muted);
}

.ct-acc-device-card__time {
    font-family: var(--ct-acc-font-body);
    font-size: 12px;
    color: var(--ct-acc-muted);
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ct-acc-device-card__time--active {
    color: var(--ct-acc-success);
}

/* Empty & Error states */
.ct-acc-devices__empty {
    background: #fff;
    border: 1px solid var(--ct-acc-border);
    border-radius: var(--ct-acc-radius-sm);
    padding: 24px 16px;
    text-align: center;
}

.ct-acc-devices__empty p {
    font-family: var(--ct-acc-font-body);
    font-size: 14px;
    color: var(--ct-acc-gray);
    margin: 0 0 12px;
}

.ct-acc-devices__retry-btn {
    font-family: var(--ct-acc-font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--ct-acc-red);
    background: none;
    border: 1px solid var(--ct-acc-red);
    border-radius: 50px;
    padding: 6px 16px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.ct-acc-devices__retry-btn:hover {
    background: rgba(239, 83, 80, 0.05);
}

/* Skeleton loading */
.ct-acc-device-card--skeleton {
    pointer-events: none;
}

.ct-acc-skel {
    background: linear-gradient(90deg, #E5E7EB 25%, #F3F4F6 50%, #E5E7EB 75%);
    background-size: 200% 100%;
    animation: ct-acc-skel-pulse 1.5s ease-in-out infinite;
    border-radius: 6px;
}

.ct-acc-skel--circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ct-acc-skel--avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ct-acc-skel--line-lg {
    height: 14px;
    flex: 1;
}

.ct-acc-skel--line-md {
    height: 12px;
    width: 80px;
}

.ct-acc-skel--line-sm {
    height: 12px;
    width: 50px;
    flex-shrink: 0;
}

@keyframes ct-acc-skel-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ==========================================================================
   Overlay System
   ========================================================================== */

.ct-acc-overlay {
    position: fixed;
    inset: 0;
    z-index: 99998;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s var(--ct-acc-ease), visibility 0.3s;
}

.ct-acc-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.ct-acc-overlay__dialog {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #fff;
    display: flex;
    flex-direction: column;
    transform: translateY(20px) scale(0.98);
    opacity: 0;
    transition: transform 0.35s var(--ct-acc-ease), opacity 0.35s var(--ct-acc-ease);
}

.ct-acc-overlay.active .ct-acc-overlay__dialog {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.ct-acc-overlay__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--ct-acc-border);
    flex-shrink: 0;
    position: relative;
}

.ct-acc-overlay__back {
    width: 44px;
    height: 44px;
    border: none;
    background: var(--ct-acc-gray-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--ct-acc-gray);
    transition: all 0.2s;
    z-index: 1;
    padding: 0;
    flex-shrink: 0;
}

.ct-acc-overlay__back:hover {
    background: var(--ct-acc-red);
    color: #fff;
}

.ct-acc-overlay__back svg {
    width: 20px;
    height: 20px;
}

.ct-acc-overlay__title {
    font-family: var(--ct-acc-font);
    font-size: 18px;
    font-weight: 700;
    color: var(--ct-acc-dark);
    margin: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

.ct-acc-overlay__close {
    width: 44px;
    height: 44px;
    border: none;
    background: var(--ct-acc-gray-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--ct-acc-gray);
    font-size: 22px;
    line-height: 1;
    transition: all 0.2s;
    z-index: 1;
    padding: 0;
    flex-shrink: 0;
}

.ct-acc-overlay__close:hover {
    background: var(--ct-acc-red);
    color: #fff;
    transform: rotate(90deg);
}

/* Focus-visible styles for overlay accessibility */
.ct-acc-overlay__close:focus-visible,
.ct-acc-overlay__back:focus-visible {
    outline: 2px solid var(--ct-acc-red);
    outline-offset: 2px;
}

.ct-acc-overlay .ct-acc-btn:focus-visible {
    outline: 2px solid var(--ct-acc-red);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(239, 83, 80, 0.2);
}

.ct-acc-overlay__body {
    flex: 1;
    overflow-y: auto;
    padding: 32px 24px;
    -webkit-overflow-scrolling: touch;
}

.ct-acc-overlay__body-inner {
    max-width: 480px;
    margin: 0 auto;
}

.ct-acc-overlay__footer {
    padding: 20px 24px;
    border-top: 1px solid var(--ct-acc-border);
    flex-shrink: 0;
}

.ct-acc-overlay__footer:empty {
    display: none;
    padding: 0;
    border: none;
}

.ct-acc-overlay__footer .ct-acc-btn {
    max-width: 480px;
    margin: 0 auto;
    display: block;
}

/* ==========================================================================
   Password Reset Overlay
   ========================================================================== */

.ct-acc-pw-email {
    font-family: var(--ct-acc-font-body);
    font-size: 16px;
    font-weight: 600;
    color: var(--ct-acc-dark);
    background: var(--ct-acc-gray-light);
    padding: 14px 20px;
    border-radius: 50px;
    text-align: center;
    margin-bottom: 16px;
}

.ct-acc-pw-rules {
    list-style: none;
    padding: 0;
    margin: 16px 0 24px;
}

.ct-acc-pw-rules li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ct-acc-font-body);
    font-size: 15px;
    color: var(--ct-acc-gray);
    padding: 6px 0;
    transition: color 0.2s ease;
}

.ct-acc-pw-rules li.valid {
    color: var(--ct-acc-success);
}

.ct-acc-pw-check {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--ct-acc-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.ct-acc-pw-check svg {
    width: 10px;
    height: 10px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.ct-acc-pw-rules li.valid .ct-acc-pw-check {
    border-color: var(--ct-acc-success);
    background: var(--ct-acc-success);
}

.ct-acc-pw-rules li.valid .ct-acc-pw-check svg {
    opacity: 1;
}

.ct-acc-pw-input-wrap {
    position: relative;
    margin-bottom: 8px;
}

.ct-acc-pw-input-wrap .ct-acc-input {
    padding-right: 48px;
}

.ct-acc-pw-toggle {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--ct-acc-gray);
    cursor: pointer;
    padding: 4px;
}

.ct-acc-pw-toggle:hover {
    color: var(--ct-acc-dark);
}

.ct-acc-pw-toggle svg {
    width: 20px;
    height: 20px;
}

/* Success State */
.ct-acc-success-state {
    text-align: center;
    padding: 40px 0;
}

.ct-acc-success-state__icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #D1FAE5;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--ct-acc-success);
}

.ct-acc-success-state__icon svg {
    width: 32px;
    height: 32px;
}

.ct-acc-success-state__text {
    font-family: var(--ct-acc-font);
    font-size: 18px;
    font-weight: 700;
    color: var(--ct-acc-dark);
}

/* ==========================================================================
   Notification Settings Overlay
   ========================================================================== */

.ct-acc-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid var(--ct-acc-gray-light);
}

.ct-acc-toggle:last-child {
    border-bottom: none;
}

.ct-acc-toggle__label {
    font-family: var(--ct-acc-font-body);
    font-size: 15px;
    font-weight: 500;
    color: var(--ct-acc-dark);
}

.ct-acc-toggle__switch {
    width: 48px;
    height: 28px;
    border-radius: 14px;
    background: #D1D5DB;
    position: relative;
    cursor: pointer;
    transition: background 0.25s ease;
    border: none;
    padding: 0;
    flex-shrink: 0;
}

.ct-acc-toggle__switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.25s ease;
}

.ct-acc-toggle__switch.active {
    background: var(--ct-acc-red);
}

.ct-acc-toggle__switch.active::after {
    transform: translateX(20px);
}

.ct-acc-notif-features {
    padding: 8px 0;
}

.ct-acc-notif-section-title {
    font-family: var(--ct-acc-font);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ct-acc-gray);
    margin: 24px 0 8px;
}

/* Email Chips */
.ct-acc-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.ct-acc-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--ct-acc-gray-light);
    border-radius: 20px;
    font-family: var(--ct-acc-font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--ct-acc-dark);
}

.ct-acc-chip__remove {
    background: none;
    border: none;
    color: var(--ct-acc-gray);
    cursor: pointer;
    padding: 0;
    font-size: 16px;
    line-height: 1;
}

.ct-acc-chip__remove:hover {
    color: var(--ct-acc-red);
}

.ct-acc-add-receiver {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.ct-acc-add-receiver .ct-acc-input {
    flex: 1;
}

.ct-acc-add-receiver .ct-acc-btn {
    width: auto;
    flex-shrink: 0;
    padding: 12px 20px;
    font-size: 14px;
}

.ct-acc-field-error {
    font-family: var(--ct-acc-font-body);
    font-size: 13px;
    color: var(--ct-acc-error);
    margin-top: 6px;
    display: none;
}

.ct-acc-field-error.active {
    display: block;
}

/* Overlay loading (centered in body) */
.ct-acc-overlay__body .ct-acc-loading {
    position: relative;
    min-height: 200px;
}

/* ==========================================================================
   Device QR Code Overlay
   ========================================================================== */

.ct-acc-qr-wrap {
    text-align: center;
    padding: 20px 0;
}

.ct-acc-qr-wrap canvas,
.ct-acc-qr-wrap img {
    max-width: 240px;
    border-radius: var(--ct-acc-radius-sm);
    border: 1px solid var(--ct-acc-border);
    padding: 16px;
    background: #fff;
}

.ct-acc-qr-countdown {
    font-family: var(--ct-acc-font);
    font-size: 28px;
    font-weight: 700;
    color: var(--ct-acc-dark);
    margin: 16px 0 4px;
}

.ct-acc-qr-countdown.expired {
    color: var(--ct-acc-error);
}

.ct-acc-qr-countdown-label {
    font-family: var(--ct-acc-font-body);
    font-size: 14px;
    color: var(--ct-acc-gray);
    margin-bottom: 24px;
}

.ct-acc-qr-hint {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    border-radius: 10px;
    font-family: var(--ct-acc-font-body);
    font-size: 13px;
    line-height: 1.5;
    color: #1E40AF;
    margin-bottom: 16px;
}

.ct-acc-qr-hint svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: #3B82F6;
}

.ct-acc-qr-instructions {
    font-family: var(--ct-acc-font-body);
    font-size: 15px;
    color: var(--ct-acc-gray);
    line-height: 1.6;
    margin-bottom: 24px;
    text-align: center;
}

.ct-acc-qr-version-notice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #FEF3C7;
    border-radius: 8px;
    font-family: var(--ct-acc-font-body);
    font-size: 13px;
    font-weight: 500;
    color: #92400E;
    margin-top: 16px;
}

/* ==========================================================================
   Overlay — Inline Code Input (reused in password reset)
   ========================================================================== */

.ct-acc-overlay .ct-acc-code-inputs {
    justify-content: center;
}

/* Overlay — Code Verifying State */
.ct-acc-code-verifying {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 0;
    margin-bottom: 8px;
}

.ct-acc-code-verifying .ct-acc-loading__spinner {
    width: 22px;
    height: 22px;
    border-width: 2.5px;
}

.ct-acc-code-verifying span {
    font-family: var(--ct-acc-font-body);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--ct-acc-gray);
}

/* Overlay — Inline Error */
.ct-acc-overlay .ct-acc-error {
    margin-bottom: 16px;
}

/* ==========================================================================
   Mobile Nav Overrides — ensure hidden by default
   ========================================================================== */

/* Hide mobile nav completely when closed — prevents backdrop-filter bleed from header */
.ct-accounts-page .ct-header__mobile-nav {
    display: none !important;
}

.ct-accounts-page .ct-header__mobile-nav[data-ct-menu-open="true"] {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.ct-accounts-page .ct-header__mobile-close {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.ct-accounts-page .ct-header__mobile-nav[data-ct-menu-open="true"] .ct-header__mobile-close {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* ==========================================================================
   Responsive — Mobile: Stack vertically
   ========================================================================== */

@media (max-width: 900px) {
    .ct-accounts-main {
        flex-direction: column;
        min-height: auto !important;
    }

    .ct-split-brand {
        flex: none;
        padding: 32px 24px 32px;
    }

    /* Reduce glow effect on mobile */
    .ct-split-brand::before {
        width: 250px;
        height: 250px;
        opacity: 0.6;
    }

    .ct-split-brand__content {
        text-align: center;
    }

    .ct-split-brand__video-wrap {
        max-width: 200px;
        margin: 0 auto 16px;
    }

    .ct-split-brand__headline {
        font-size: clamp(1.5rem, 4vw, 2rem);
        margin-bottom: 8px;
    }

    .ct-split-brand__subline {
        font-size: 1.05rem;
        margin-bottom: 0;
    }

    .ct-acc-dashboard__name {
        font-size: clamp(1.5rem, 4vw, 2rem);
    }

    .ct-split-brand__trust {
        display: none;
    }

    .ct-split-form {
        flex: 1;
        padding: 24px 20px 60px;
        overflow: visible;
    }

    /* Authenticated mobile: hide sidebar, fit viewport */
    html.ct-acc-has-session .ct-header { display: none !important; }
    html.ct-acc-has-session .ct-split-brand { display: none !important; }
    html.ct-acc-has-session .ct-split-form {
        padding: 0;
        background: rgba(255, 255, 255, 0.55);
        -webkit-backdrop-filter: blur(24px) saturate(180%);
        backdrop-filter: blur(24px) saturate(180%);
    }
    html.ct-acc-has-session .ct-accounts-main { background: none; }
    html.ct-acc-has-session body { background: none; }
    html.ct-acc-has-session .jupiterx-site { background: none; }
    html.ct-acc-has-session .ct-acc-tab-content { padding: 0; }
    .ct-acc-sticky-top { padding: 10px 16px 8px; }
    .ct-acc-scroll-content { padding: 0 16px 0; }

    /* Disable collapse on mobile */
    .ct-acc-collapse-btn { display: none; }

    #ct-acc-profile {
        max-width: 100%;
        padding: 0;
        margin-top: 24px;
    }

    .ct-acc-subscription__header {
        text-align: center;
    }

    .ct-acc-device-card__info {
        padding-left: 0;
    }

    /* Overlay mobile adjustments */
    .ct-acc-overlay__body {
        padding: 24px 16px;
    }

    .ct-acc-overlay__header {
        padding: 16px;
    }

    .ct-acc-overlay__footer {
        padding: 16px;
    }

    .ct-acc-overlay__title {
        font-size: 16px;
    }
}

@media (max-width: 520px) {
    .ct-acc-card__title {
        font-size: clamp(1.5rem, 4vw, 2rem);
    }

    .ct-acc-card__subtitle {
        font-size: 1.05rem;
    }

    .ct-acc-code-input {
        width: 44px;
        height: 52px;
        font-size: 20px;
    }

    .ct-acc-code-inputs {
        gap: 6px;
    }
}

@media (max-width: 380px) {
    .ct-acc-code-input {
        width: 40px;
        height: 48px;
        font-size: 18px;
    }

    .ct-acc-code-inputs {
        gap: 4px;
    }
}

/* ======================================================================
   Subscription Purchase Flow
   ====================================================================== */

/* Subscribe Banner — Cinematic Video Card */
.ct-acc-subscribe-banner {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    margin-bottom: 24px;
    cursor: pointer;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    animation: ctAccFadeSlideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.ct-acc-subscribe-banner:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

@keyframes ctAccFadeSlideUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

.ct-acc-subscribe-banner video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ct-acc-subscribe-banner__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(26, 26, 46, 0.85) 0%,
        rgba(26, 26, 46, 0.4) 40%,
        rgba(26, 26, 46, 0.05) 100%
    );
    z-index: 1;
}

/* Bottom overlay — vertical: title, text, CTA */
.ct-acc-subscribe-banner__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.ct-acc-subscribe-banner__text h3 {
    font-family: var(--ct-acc-font);
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 4px;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
}

.ct-acc-subscribe-banner__text p {
    font-family: var(--ct-acc-font-body);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    max-width: 240px;
    margin: 0;
}

/* CTA button — full-width pill */
.ct-acc-subscribe-banner__btn {
    width: 100%;
    font-size: 14px !important;
    padding: 14px 28px !important;
    border-radius: 9999px !important;
}

/* Manage Banner */
.ct-acc-manage-banner {
    margin-bottom: 20px;
    text-align: right;
}

.ct-acc-manage-banner__btn {
    font-size: 0.875rem;
}

/* Step Indicator */
.ct-acc-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 32px;
    padding: 0 16px;
}

.ct-acc-steps__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.ct-acc-steps__circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
    border: 2px solid #d1d5db;
    color: var(--ct-acc-muted);
    background: #fff;
    transition: all 0.2s;
}

.ct-acc-steps__label {
    font-size: 0.875rem;
    color: var(--ct-acc-muted);
    font-weight: 500;
}

.ct-acc-steps__item--active .ct-acc-steps__circle {
    background: #c8102e;
    border-color: #c8102e;
    color: #fff;
}

.ct-acc-steps__item--active .ct-acc-steps__label {
    color: #c8102e;
    font-weight: 600;
}

.ct-acc-steps__item--completed .ct-acc-steps__circle {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}

.ct-acc-steps__item--completed .ct-acc-steps__label {
    color: #16a34a;
}

.ct-acc-steps__line {
    flex: 1;
    height: 2px;
    background: #e5e7eb;
    margin: 0 8px;
    margin-bottom: 22px;
    min-width: 24px;
}

/* Guidance text below step indicator */
.ct-acc-overlay-guidance {
    text-align: center;
    font-family: var(--ct-acc-font-body);
    font-size: 1rem;
    color: var(--ct-acc-gray);
    line-height: 1.6;
    margin-bottom: 24px;
}

/* Registration form — single-column flex layout */
.ct-acc-reg-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ct-acc-reg-form .ct-acc-form-group {
    margin-bottom: 16px;
}

.ct-acc-reg-form .ct-acc-edit-profile__field {
    margin-bottom: 16px;
}

.ct-acc-reg-form .ct-acc-edit-profile__row-pair {
    display: flex;
    gap: 12px;
}

.ct-acc-reg-form .ct-acc-edit-profile__row-pair .ct-acc-edit-profile__field {
    flex: 1;
}

.ct-acc-reg-form .ct-acc-pw-rules {
    margin-bottom: 8px;
}

/* No-account registration CTA section */
.ct-acc-no-account__register {
    margin-top: 32px;
}

.ct-acc-no-account__divider {
    height: 1px;
    background: var(--ct-acc-border);
    margin-bottom: 24px;
}

.ct-acc-no-account__register-text {
    font-family: var(--ct-acc-font-body);
    font-size: 0.95rem;
    color: var(--ct-acc-gray);
    margin-bottom: 12px;
}

/* 4-step indicator compact sizing */
.ct-acc-steps--4 .ct-acc-steps__circle {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
}

.ct-acc-steps--4 .ct-acc-steps__label {
    font-size: 0.78rem;
}

.ct-acc-steps--4 .ct-acc-steps__line {
    min-width: 16px;
    margin: 0 4px;
}

@media (max-width: 400px) {
    .ct-acc-steps--4 .ct-acc-steps__circle {
        width: 24px;
        height: 24px;
        font-size: 0.7rem;
    }

    .ct-acc-steps--4 .ct-acc-steps__label {
        font-size: 0.7rem;
    }

    .ct-acc-steps--4 .ct-acc-steps__line {
        min-width: 10px;
        margin: 0 2px;
    }
}

/* Wide body-inner for step 1 (side-by-side plan cards) */
.ct-acc-overlay__body-inner--wide {
    max-width: 720px;
}

/* Plan Selection Cards — side-by-side grid */
.ct-acc-plan-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.ct-acc-plan-card {
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
}

.ct-acc-plan-card:hover {
    border-color: #c8102e;
    box-shadow: 0 4px 16px rgba(200, 16, 46, 0.1);
    transform: translateY(-2px);
}

/* Video hero */
.ct-acc-plan-card__hero {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    margin-bottom: 16px;
    background: #f3f4f6;
}

.ct-acc-plan-card__hero video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ct-acc-plan-card__header {
    margin-bottom: 16px;
}

.ct-acc-plan-card__name {
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    font-weight: 800;
    color: var(--ct-acc-dark);
    margin: 0 0 4px;
}

.ct-acc-plan-card__price {
    font-size: clamp(1.1rem, 2.5vw, 1.25rem);
    font-weight: 700;
    color: #c8102e;
    margin: 0 0 8px;
}

.ct-acc-plan-card__tagline {
    font-size: var(--ct-text-detail);
    color: var(--ct-acc-gray);
    line-height: var(--ct-text-detail-lh);
    margin: 0;
}

.ct-acc-plan-card__btn {
    width: 100%;
    margin-bottom: 16px;
}

/* Feature list below button */
.ct-acc-plan-card__features {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
}

.ct-acc-plan-card__features li {
    display: flex;
    gap: 8px;
    padding: 5px 0;
    align-items: center;
}

.ct-acc-plan-card__features li svg {
    color: #c8102e;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.ct-acc-plan-card__feat-title {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--ct-acc-dark);
    margin: 0;
}

/* Billing Cycle Selector */
.ct-acc-cycle-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.ct-acc-cycle-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 24px;
    border: 2px solid #e5e7eb;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s;
    background: #fff;
}

.ct-acc-cycle-row:hover {
    border-color: #c8102e;
}

.ct-acc-cycle-row--selected {
    border-color: #c8102e;
    background: linear-gradient(135deg, rgba(200,16,46,0.02) 0%, rgba(200,16,46,0.06) 100%);
    border-left-width: 4px;
}

.ct-acc-cycle-row input[type="radio"] {
    accent-color: #c8102e;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.ct-acc-cycle-row__info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    flex-wrap: wrap;
}

.ct-acc-cycle-row__label {
    font-weight: 600;
    color: var(--ct-acc-dark);
    font-size: clamp(1rem, 2vw, 1.125rem);
}

.ct-acc-cycle-row__price {
    font-weight: 700;
    color: var(--ct-acc-dark);
    font-size: clamp(1.05rem, 2vw, 1.175rem);
    white-space: nowrap;
}

.ct-acc-cycle-row__price small {
    font-weight: 400;
    color: var(--ct-acc-gray);
    font-size: 0.875rem;
}

.ct-acc-cycle-row__save {
    font-size: 0.8rem;
    font-weight: 600;
    color: #065F46;
    background: #D1FAE5;
    padding: 3px 10px;
    border-radius: 10px;
}

.ct-acc-cycle-row__popular {
    font-size: 0.8rem;
    font-weight: 600;
    color: #c8102e;
    background: rgba(200,16,46,0.1);
    padding: 3px 10px;
    border-radius: 10px;
}

.ct-acc-cycle-total {
    text-align: center;
    padding: 12px 0 0;
    font-size: 0.95rem;
    color: var(--ct-acc-text);
}

.ct-acc-cycle-total strong {
    color: var(--ct-acc-dark);
}

/* Per-month sub-price in cycle row */
.ct-acc-cycle-row__price-monthly {
    display: block;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--ct-acc-gray);
    margin-top: 2px;
}

/* Reassurance chips */
.ct-acc-cycle-reassurance {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 24px 0 0;
    flex-wrap: wrap;
}

.ct-acc-cycle-reassurance__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ct-acc-text);
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 50px;
    padding: 8px 16px;
}

.ct-acc-cycle-reassurance__item svg {
    color: #16a34a;
    flex-shrink: 0;
}

/* Tag: red (popular badge) */
.ct-acc-tag--red {
    background: rgba(200, 16, 46, 0.1);
    color: #c8102e;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
}

/* Review Summary */
.ct-acc-review__summary {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 4px 0;
    margin-bottom: 20px;
}

/* Review — choice header */
.ct-acc-review__choice {
    text-align: center;
    margin-bottom: 24px;
}

.ct-acc-review__choice-plan {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 800;
    color: var(--ct-acc-dark);
    margin: 0 0 6px;
    line-height: 1.15;
}

.ct-acc-review__choice-price {
    font-size: clamp(1.1rem, 2.5vw, 1.35rem);
    font-weight: 600;
    color: #c8102e;
    margin: 0 0 16px;
}

.ct-acc-review__choice-note {
    font-size: clamp(0.9375rem, 2vw, 1.0625rem);
    color: var(--ct-acc-gray);
    line-height: 1.7;
    margin: 0 auto 28px;
    max-width: 480px;
}

.ct-acc-review__checkout-btn {
    max-width: 400px;
    margin: 0 auto;
    display: block;
}

.ct-acc-review .ct-acc-cycle-reassurance {
    padding-bottom: 36px;
    margin-bottom: 16px;
}

/* Review — two-column info grid */
.ct-acc-review__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.ct-acc-review__grid-col {
    min-width: 0;
}

.ct-acc-review__grid-title {
    font-family: var(--ct-acc-font);
    font-size: clamp(1.1rem, 2.5vw, 1.35rem);
    font-weight: 800;
    color: var(--ct-acc-dark);
    margin: 0 0 16px;
    line-height: 1.2;
}

/* Step cards (left column) */
.ct-acc-review__step-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ct-acc-review__step-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    transition: box-shadow 0.2s;
}

.ct-acc-review__step-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.ct-acc-review__step-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #dcfce7;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #16a34a;
}

.ct-acc-review__step-card span {
    font-family: var(--ct-acc-font-body);
    font-size: clamp(0.9375rem, 2vw, 1.0625rem);
    font-weight: 500;
    color: var(--ct-acc-dark);
    line-height: 1.4;
}

/* Benefits list (right column) */
.ct-acc-review__benefit-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ct-acc-review__benefit-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.15s;
}

.ct-acc-review__benefit-list li:last-child {
    border-bottom: none;
}

.ct-acc-review__benefit-list li:hover {
    background: #f9fafb;
    border-radius: 10px;
}

.ct-acc-review__benefit-list li svg {
    color: #16a34a;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
}

.ct-acc-review__benefit-list li span {
    font-family: var(--ct-acc-font-body);
    font-size: clamp(0.9375rem, 2vw, 1.0625rem);
    font-weight: 500;
    color: var(--ct-acc-text);
    line-height: 1.5;
}

.ct-acc-review__notice {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
}

.ct-acc-review__notice svg {
    color: #3b82f6;
    flex-shrink: 0;
    margin-top: 2px;
}

.ct-acc-review__notice p {
    margin: 0;
    font-size: 0.85rem;
    color: #1e40af;
    line-height: 1.5;
}

.ct-acc-review__trust {
    text-align: center;
    font-size: 0.8rem;
    color: var(--ct-acc-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 0;
    margin-top: 8px;
}

.ct-acc-review__trust svg {
    color: #16a34a;
}

/* Checkout Order Summary */
.ct-acc-checkout-summary {
    background: linear-gradient(135deg, rgba(200,16,46,0.03), rgba(200,16,46,0.07));
    border: 1px solid rgba(200,16,46,0.12);
    border-radius: var(--ct-acc-radius-sm);
    padding: 20px 24px;
    margin-bottom: 24px;
}

.ct-acc-checkout-summary__plan {
    font-family: var(--ct-acc-font);
    font-weight: 800;
    color: var(--ct-acc-dark);
    font-size: 1.25rem;
    line-height: 1.3;
}

.ct-acc-checkout-summary__price {
    font-family: var(--ct-acc-font-body);
    color: var(--ct-acc-red);
    font-weight: 600;
    font-size: 1rem;
    margin-top: 4px;
}

/* Read-only email input */
.ct-acc-input--readonly {
    background: #e5e7eb;
    color: var(--ct-acc-gray);
    cursor: not-allowed;
}

/* Checkout 2-column grid */
.ct-acc-checkout-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-top: 8px;
}

.ct-acc-checkout-grid__left,
.ct-acc-checkout-grid__right {
    min-width: 0;
}

/* Stripe Element containers */
.ct-acc-stripe-payment,
.ct-acc-stripe-address {
    min-height: 100px;
}

/* Section labels above Stripe elements */
.ct-acc-checkout-section-label {
    font-family: var(--ct-acc-font);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ct-acc-dark);
    margin-bottom: 12px;
    display: block;
}

/* Trust footer below pay button */
.ct-acc-checkout-trust {
    text-align: center;
    font-size: 0.8rem;
    color: var(--ct-acc-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 0;
    margin-top: 4px;
}

.ct-acc-checkout-trust svg {
    color: #16a34a;
}

/* Checkout Result (success/cancel) */
.ct-acc-checkout-result {
    text-align: center;
    padding: 32px 16px;
}

.ct-acc-checkout-result__icon {
    margin-bottom: 16px;
}

.ct-acc-checkout-result__icon--success svg {
    color: #16a34a;
}

.ct-acc-checkout-result__icon--info svg {
    color: #3b82f6;
}

.ct-acc-checkout-result__icon--error svg {
    color: #ef4444;
}

.ct-acc-checkout-result h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--ct-acc-dark);
}

.ct-acc-checkout-result p {
    color: var(--ct-acc-gray);
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.5;
}

/* Stripe mock elements — premium checkout (dummy page) */

/* --- Order summary with icon --- */
.ct-acc-stripe-mock__summary {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 24px;
}

.ct-acc-stripe-mock__summary-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--ct-acc-red), #c62828);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ct-acc-stripe-mock__summary-icon svg {
    width: 22px;
    height: 22px;
    color: #fff;
}

.ct-acc-stripe-mock__summary-plan {
    font-weight: 800;
    color: var(--ct-acc-dark);
    font-size: 1.05rem;
    line-height: 1.3;
}

.ct-acc-stripe-mock__summary-price {
    color: var(--ct-acc-red);
    font-weight: 600;
    font-size: 0.9rem;
    margin-top: 2px;
}

/* --- Individual field rows --- */
.ct-acc-stripe-mock__field {
    margin-bottom: 16px;
}

.ct-acc-stripe-mock__field-label {
    display: block;
    font-family: var(--ct-acc-font-body);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ct-acc-gray);
    margin-bottom: 6px;
}

.ct-acc-stripe-mock__field-input,
.ct-acc-stripe-mock__field-select {
    width: 100%;
    padding: 10px 14px;
    font-family: var(--ct-acc-font-body);
    font-size: 14px;
    color: #30313d;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.ct-acc-stripe-mock__field-input:focus,
.ct-acc-stripe-mock__field-select:focus {
    border-color: var(--ct-acc-red);
    box-shadow: 0 0 0 3px rgba(239, 83, 80, 0.1);
}

.ct-acc-stripe-mock__field-input::placeholder {
    color: var(--ct-acc-muted);
}

.ct-acc-stripe-mock__field-select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%236d6e78' stroke-width='2'%3e%3cpath d='M2 4l4 4 4-4'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.ct-acc-stripe-mock__field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.ct-acc-stripe-mock__field-error {
    font-family: var(--ct-acc-font-body);
    font-size: 12px;
    color: var(--ct-acc-error);
    margin-top: 4px;
    display: none;
}

.ct-acc-stripe-mock__input--error {
    border-color: var(--ct-acc-error) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
}

/* --- Payment method cards --- */
.ct-acc-stripe-mock__methods {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.ct-acc-stripe-mock__method {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fff;
    position: relative;
}

.ct-acc-stripe-mock__method:hover {
    border-color: #d1d5db;
    background: #fafafa;
}

.ct-acc-stripe-mock__method--selected {
    border-color: var(--ct-acc-red);
    background: linear-gradient(135deg, #fff, #FEF2F2);
    box-shadow: 0 0 0 3px rgba(239, 83, 80, 0.1);
}

.ct-acc-stripe-mock__method input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ct-acc-stripe-mock__method-radio {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #d1d5db;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 0.2s;
}

.ct-acc-stripe-mock__method--selected .ct-acc-stripe-mock__method-radio {
    border-color: var(--ct-acc-red);
}

.ct-acc-stripe-mock__method-radio::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ct-acc-red);
    transform: scale(0);
    transition: transform 0.15s ease;
}

.ct-acc-stripe-mock__method--selected .ct-acc-stripe-mock__method-radio::after {
    transform: scale(1);
}

.ct-acc-stripe-mock__method-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ct-acc-text);
}

.ct-acc-stripe-mock__method-icon svg {
    height: 20px;
    width: auto;
    max-width: 48px;
}

.ct-acc-stripe-mock__method-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ct-acc-stripe-mock__method-label {
    font-family: var(--ct-acc-font-body);
    font-weight: 600;
    font-size: 14px;
    color: var(--ct-acc-dark);
}

.ct-acc-stripe-mock__method-desc {
    font-family: var(--ct-acc-font-body);
    font-size: 12px;
    color: var(--ct-acc-muted);
    margin-top: 1px;
}

/* --- Card / SEPA containers --- */
.ct-acc-stripe-mock__card-fields,
.ct-acc-stripe-mock__sepa-fields {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    font-family: var(--ct-acc-font-body);
    font-size: 14px;
    margin-bottom: 20px;
}

.ct-acc-stripe-mock__card-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e0e0e0;
    position: relative;
}

.ct-acc-stripe-mock__card-row:last-child {
    border-bottom: none;
}

.ct-acc-stripe-mock__card-row input {
    width: 100%;
    padding: 12px 14px;
    border: none;
    outline: none;
    font-size: 14px;
    color: #30313d;
    background: transparent;
    box-sizing: border-box;
    font-family: inherit;
}

.ct-acc-stripe-mock__card-row input::placeholder {
    color: var(--ct-acc-muted);
}

.ct-acc-stripe-mock__card-row--split {
    display: flex;
}

.ct-acc-stripe-mock__card-row--split > div {
    flex: 1;
    display: flex;
    align-items: center;
    position: relative;
}

.ct-acc-stripe-mock__card-row--split > div:first-child {
    border-right: 1px solid #e0e0e0;
}

.ct-acc-stripe-mock__card-icon,
.ct-acc-stripe-mock__cvc-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    color: var(--ct-acc-muted);
    pointer-events: none;
}

.ct-acc-stripe-mock__card-icon svg,
.ct-acc-stripe-mock__cvc-icon svg {
    width: 18px;
    height: 18px;
}

.ct-acc-stripe-mock__card-row--split input {
    padding-right: 36px;
}

/* SEPA specific */
.ct-acc-stripe-mock__sepa-row {
    display: flex;
    align-items: center;
    position: relative;
}

.ct-acc-stripe-mock__sepa-row input {
    width: 100%;
    padding: 12px 14px;
    padding-right: 40px;
    border: none;
    outline: none;
    font-size: 14px;
    color: #30313d;
    background: transparent;
    box-sizing: border-box;
    font-family: inherit;
}

.ct-acc-stripe-mock__sepa-row input::placeholder {
    color: var(--ct-acc-muted);
}

.ct-acc-stripe-mock__sepa-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    color: var(--ct-acc-muted);
    pointer-events: none;
}

.ct-acc-stripe-mock__sepa-icon svg {
    width: 18px;
    height: 18px;
}

.ct-acc-stripe-mock__mandate {
    font-family: var(--ct-acc-font-body);
    font-size: 11px;
    color: var(--ct-acc-muted);
    line-height: 1.5;
    padding: 10px 14px;
    border-top: 1px solid #e0e0e0;
}

/* --- Trust bar --- */
.ct-acc-stripe-mock__trust-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 8px 0 0;
    margin-top: 4px;
}

.ct-acc-stripe-mock__trust-secure {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--ct-acc-font-body);
    font-size: 12px;
    color: #16a34a;
    font-weight: 500;
}

.ct-acc-stripe-mock__trust-secure svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.ct-acc-stripe-mock__trust-brands {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ct-acc-stripe-mock__trust-brands svg {
    height: 18px;
    width: auto;
    opacity: 0.5;
}

.ct-acc-stripe-mock__trust-cancel {
    font-family: var(--ct-acc-font-body);
    font-size: 12px;
    color: var(--ct-acc-muted);
}

/* --- Checkout 2-column grid --- */
.ct-acc-stripe-mock__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-top: 24px;
}

.ct-acc-stripe-mock__grid-left,
.ct-acc-stripe-mock__grid-right {
    min-width: 0;
}

/* --- Intro text --- */
.ct-acc-stripe-mock__intro {
    margin: 0 0 24px;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(239,68,68,0.04), rgba(239,68,68,0.08));
    border-left: 3px solid var(--ct-acc-red);
    border-radius: 8px;
}

.ct-acc-stripe-mock__intro p {
    margin: 0;
    font-family: var(--ct-acc-font-body);
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--ct-acc-text);
}

/* --- Redirect / wallet info boxes --- */
.ct-acc-stripe-mock__redirect-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 20px;
}

.ct-acc-stripe-mock__redirect-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    flex-shrink: 0;
}

.ct-acc-stripe-mock__redirect-icon svg {
    height: 24px;
    width: auto;
    max-width: 36px;
}

.ct-acc-stripe-mock__redirect-text {
    font-family: var(--ct-acc-font-body);
    font-size: 0.88rem;
    color: var(--ct-acc-gray);
    line-height: 1.5;
}

/* --- Shake animation --- */
@keyframes ct-acc-shake {
    0%, 100% { transform: translateX(0); }
    10%, 50%, 90% { transform: translateX(-4px); }
    30%, 70% { transform: translateX(4px); }
}

.ct-acc-stripe-mock__shake {
    animation: ct-acc-shake 0.4s ease;
}

/* Sub loading */
.ct-acc-sub-loading {
    text-align: center;
    padding: 48px 16px;
}

.ct-acc-sub-loading p {
    margin-top: 12px;
    color: var(--ct-acc-gray);
}

/* Spinner inside button */
.ct-acc-spinner--btn {
    width: 20px;
    height: 20px;
    border-width: 2px;
    display: inline-block;
    vertical-align: middle;
}

/* Footer row (back + next buttons) */
.ct-acc-overlay__footer-row {
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.ct-acc-overlay__footer-row .ct-acc-btn {
    flex: 1;
}

/* Timeline */
.ct-acc-timeline {
    margin-bottom: 32px;
}

.ct-acc-timeline__track {
    display: flex;
    align-items: flex-start;
}

.ct-acc-timeline__node {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex-shrink: 0;
    width: 130px;
}

.ct-acc-timeline__dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 0 4px #fff;
}

.ct-acc-timeline__dot--green {
    background: #16a34a;
    box-shadow: 0 0 0 4px #fff, 0 0 0 6px rgba(22, 163, 74, 0.2);
}

.ct-acc-timeline__dot--blue {
    background: #3b82f6;
    box-shadow: 0 0 0 4px #fff, 0 0 0 6px rgba(59, 130, 246, 0.2);
}

.ct-acc-timeline__label {
    font-family: var(--ct-acc-font);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ct-acc-dark);
    margin-bottom: 2px;
}

.ct-acc-timeline__date {
    font-family: var(--ct-acc-font-body);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ct-acc-text);
    margin-bottom: 4px;
}

.ct-acc-timeline__sub {
    font-family: var(--ct-acc-font-body);
    font-size: 0.8rem;
    color: var(--ct-acc-gray);
    line-height: 1.4;
    max-width: 120px;
}

.ct-acc-timeline__bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 6px;
    position: relative;
}

.ct-acc-timeline__bar::before {
    content: '';
    position: absolute;
    top: 13px;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #16a34a, #3b82f6);
    border-radius: 2px;
}

.ct-acc-timeline__bar-label {
    font-family: var(--ct-acc-font);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ct-acc-dark);
    background: #fff;
    padding: 2px 12px;
    position: relative;
    z-index: 1;
    margin-top: 20px;
}

.ct-acc-timeline__bar-sub {
    font-family: var(--ct-acc-font-body);
    font-size: 0.8rem;
    color: var(--ct-acc-gray);
    margin-top: 2px;
}

/* ==========================================================================
   Subscription Payment Timeline
   ========================================================================== */

.ct-acc-sub-tl {
    background: rgba(255,255,255,0.6);
    border-radius: 14px;
    padding: 20px 24px 22px;
    margin: 20px 0 28px;
}

.ct-acc-sub-tl__title {
    font-family: var(--ct-acc-font);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ct-acc-gray);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 20px;
}

.ct-acc-sub-tl__track {
    display: flex;
    align-items: flex-start;
}

/* Nodes (start / end) */
.ct-acc-sub-tl__node {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 110px;
    flex-shrink: 0;
    text-align: center;
    cursor: default;
}

.ct-acc-sub-tl__dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 3px solid var(--ct-acc-muted);
    background: #fff;
    position: relative;
    z-index: 2;
}

.ct-acc-sub-tl__dot--green { border-color: #16a34a; }
.ct-acc-sub-tl__dot--blue  { border-color: #3b82f6; }
.ct-acc-sub-tl__dot--orange { border-color: #f59e0b; }
.ct-acc-sub-tl__dot--red   { border-color: #EF5350; }
.ct-acc-sub-tl__dot--gray  { border-color: var(--ct-acc-muted); }

.ct-acc-sub-tl__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.ct-acc-sub-tl__label {
    font-family: var(--ct-acc-font-body);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ct-acc-text);
    line-height: 1.3;
}

.ct-acc-sub-tl__date {
    font-family: var(--ct-acc-font-body);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ct-acc-dark);
    margin-top: 2px;
}

.ct-acc-sub-tl__sub {
    font-family: var(--ct-acc-font-body);
    font-size: 0.75rem;
    color: var(--ct-acc-gray);
    line-height: 1.4;
    margin-top: 2px;
}

/* Bar track */
.ct-acc-sub-tl__bar {
    flex: 1;
    position: relative;
    min-height: 14px;
    margin: 0 -7px;
    cursor: default;
}

.ct-acc-sub-tl__bar::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 0;
    right: 0;
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
}

.ct-acc-sub-tl__bar:hover::before {
    filter: brightness(0.96);
}

/* Bar fill (gradient) */
.ct-acc-sub-tl__bar-fill {
    position: absolute;
    top: 5px;
    left: 0;
    height: 4px;
    border-radius: 2px;
    transition: width 1s ease;
}

.ct-acc-sub-tl__bar--active .ct-acc-sub-tl__bar-fill {
    background: linear-gradient(90deg, #16a34a, #3b82f6);
}

.ct-acc-sub-tl__bar--trialing .ct-acc-sub-tl__bar-fill {
    background: linear-gradient(90deg, #16a34a, #f59e0b);
}

.ct-acc-sub-tl__bar--canceled_active .ct-acc-sub-tl__bar-fill {
    background: linear-gradient(90deg, #16a34a, var(--ct-acc-muted));
}

.ct-acc-sub-tl__bar--canceled_expired .ct-acc-sub-tl__bar-fill {
    background: var(--ct-acc-muted);
}

.ct-acc-sub-tl__bar--past_due .ct-acc-sub-tl__bar-fill {
    background: linear-gradient(90deg, #16a34a, #EF5350);
}

.ct-acc-sub-tl__bar--trial_only .ct-acc-sub-tl__bar-fill {
    background: linear-gradient(90deg, #22c55e 0%, #f59e0b 100%);
}

/* Duration label centered under bar */
.ct-acc-sub-tl__bar-label {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--ct-acc-font);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ct-acc-muted);
    white-space: nowrap;
}

/* Today marker */
.ct-acc-sub-tl__today {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 3;
}

.ct-acc-sub-tl__today-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #3b82f6;
    border: 2px solid #fff;
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
    animation: subtl-pulse 2s ease-in-out infinite;
}

.ct-acc-sub-tl__today-dot--orange {
    background: #f59e0b;
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
    animation: subtl-pulse-orange 2s ease-in-out infinite;
}

.ct-acc-sub-tl__today-dot--red {
    background: #EF5350;
    box-shadow: 0 0 0 0 rgba(239, 83, 80, 0.4);
    animation: subtl-pulse-red 2s ease-in-out infinite;
}

.ct-acc-sub-tl__today-dot--gray {
    background: var(--ct-acc-muted);
    animation: none;
}

@keyframes subtl-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(59, 130, 246, 0); }
}

@keyframes subtl-pulse-orange {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0); }
}

@keyframes subtl-pulse-red {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 83, 80, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(239, 83, 80, 0); }
}

/* Today tooltip */
.ct-acc-sub-tl__today-tip {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 6px 12px;
    margin-top: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    white-space: nowrap;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.ct-acc-sub-tl__today:hover .ct-acc-sub-tl__today-tip {
    opacity: 1;
    transform: translateY(0);
}

.ct-acc-sub-tl__today-label {
    font-family: var(--ct-acc-font-body);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--ct-acc-gray);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ct-acc-sub-tl__today-date {
    font-family: var(--ct-acc-font);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ct-acc-dark);
}

.ct-acc-sub-tl__today-sub {
    font-family: var(--ct-acc-font-body);
    font-size: 0.75rem;
    color: var(--ct-acc-gray);
    margin-top: 1px;
}

/* Mobile: ≤480px — stacked vertical layout, tooltip always visible */
@media (max-width: 480px) {
    .ct-acc-sub-tl {
        padding: 16px 16px 18px;
    }

    .ct-acc-sub-tl__track {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .ct-acc-sub-tl__node {
        flex-direction: row;
        width: 100%;
        text-align: left;
        gap: 10px;
        padding: 6px 0;
    }

    .ct-acc-sub-tl__node .ct-acc-sub-tl__info {
        align-items: flex-start;
        margin-top: 0;
    }

    .ct-acc-sub-tl__bar {
        min-height: 30px;
        margin: 4px 0 4px 6px;
        padding-left: 20px;
    }

    .ct-acc-sub-tl__bar::before {
        top: 0;
        bottom: 0;
        left: 6px;
        right: auto;
        width: 4px;
        height: auto;
    }

    .ct-acc-sub-tl__bar-fill {
        top: 0;
        left: 6px;
        width: 4px !important;
        height: 100%;
    }

    .ct-acc-sub-tl__bar-label {
        position: static;
        transform: none;
        margin-top: 4px;
        margin-left: 10px;
    }

    .ct-acc-sub-tl__today {
        position: relative;
        top: auto;
        left: auto !important;
        transform: none;
        flex-direction: row;
        gap: 8px;
        padding: 4px 0;
        margin-left: 0;
    }

    .ct-acc-sub-tl__today-tip {
        opacity: 1;
        transform: none;
        flex-direction: row;
        gap: 6px;
        margin-top: 0;
        padding: 4px 10px;
        pointer-events: auto;
    }
}

/* ==========================================================================
   Edit Profile Form — 2-column overlay
   ========================================================================== */

.ct-acc-edit-profile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
}

.ct-acc-edit-profile__col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ct-acc-edit-profile__intro {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #f0f4ff;
    border: 1px solid #d0d9f0;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 20px;
}

.ct-acc-edit-profile__intro-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #4a6fa5;
    margin-top: 1px;
}

.ct-acc-edit-profile__intro p {
    font-family: var(--ct-acc-font-body);
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--ct-acc-dark);
    margin: 0;
}

.ct-acc-edit-profile__section-title {
    font-family: var(--ct-acc-font);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ct-acc-gray);
    margin: 0 0 2px;
    padding-bottom: 0;
    border-bottom: none;
}

.ct-acc-edit-profile__section-desc {
    font-family: var(--ct-acc-font-body);
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--ct-acc-gray);
    margin: 0 0 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ct-acc-border);
}

.ct-acc-edit-profile__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ct-acc-edit-profile__label {
    font-family: var(--ct-acc-font-body);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ct-acc-text);
}

.ct-acc-edit-profile__label--required::after {
    content: ' *';
    color: var(--ct-acc-error);
}

.ct-acc-edit-profile__input,
.ct-acc-edit-profile__select {
    font-family: var(--ct-acc-font-body);
    font-size: 0.9375rem;
    padding: 11px 14px;
    border: 1.5px solid var(--ct-acc-border);
    border-radius: 8px;
    background: #fff;
    color: var(--ct-acc-dark);
    transition: border-color 0.2s;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}

.ct-acc-edit-profile__input:focus,
.ct-acc-edit-profile__select:focus {
    border-color: var(--ct-acc-red);
}

.ct-acc-edit-profile__input[readonly] {
    background: var(--ct-acc-gray-light);
    color: var(--ct-acc-gray);
    cursor: not-allowed;
}

.ct-acc-edit-profile__input--error {
    border-color: var(--ct-acc-error);
}

.ct-acc-edit-profile__field-hint {
    font-family: var(--ct-acc-font-body);
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--ct-acc-gray);
    margin-top: 2px;
}

.ct-acc-edit-profile__field-error {
    font-family: var(--ct-acc-font-body);
    font-size: 0.82rem;
    color: var(--ct-acc-error);
    display: block;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.25s ease, opacity 0.2s ease, margin-top 0.25s ease;
    margin-top: 0;
}

.ct-acc-edit-profile__field-error.active {
    max-height: 40px;
    opacity: 1;
    margin-top: 4px;
}

.ct-acc-edit-profile__privacy {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--ct-acc-border);
}

.ct-acc-edit-profile__privacy svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--ct-acc-gray);
}

.ct-acc-edit-profile__privacy span {
    font-family: var(--ct-acc-font-body);
    font-size: 0.75rem;
    color: var(--ct-acc-gray);
}

.ct-acc-edit-profile__row-pair {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 12px;
}

@media (max-width: 768px) {
    .ct-acc-edit-profile {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .ct-acc-edit-profile__col:last-child {
        margin-top: 16px;
    }
}

/* ---- Responsive: Subscription Flow ---- */
@media (max-width: 600px) {
    .ct-acc-subscribe-banner__glass {
        margin: 14px;
        padding: 22px 18px 20px;
    }

    .ct-acc-subscribe-banner__orb--3 {
        display: none;
    }

    .ct-acc-steps__label {
        display: none;
    }

    .ct-acc-plan-grid {
        grid-template-columns: 1fr;
    }

    .ct-acc-overlay__body-inner--wide {
        max-width: 480px;
    }

    .ct-acc-cycle-row {
        padding: 14px 16px;
    }

    .ct-acc-cycle-row__info {
        gap: 4px;
    }

    .ct-acc-timeline__node {
        width: 100px;
    }

    .ct-acc-timeline__sub {
        font-size: 0.75rem;
        max-width: 90px;
    }

    .ct-acc-review__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .ct-acc-review__step-card {
        padding: 12px 14px;
    }

    .ct-acc-review__step-icon {
        width: 40px;
        height: 40px;
    }

    .ct-acc-checkout-grid,
    .ct-acc-stripe-mock__grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .ct-acc-stripe-mock__field-row {
        grid-template-columns: 1fr;
    }

    .ct-acc-stripe-mock__trust-bar {
        flex-direction: column;
        gap: 6px;
    }
}

/* ==========================================================================
   Action Button — Danger Variant (Delete Account)
   ========================================================================== */

.ct-acc-action-btn--danger {
    color: #991B1B;
}

.ct-acc-action-btn--danger:hover {
    background: #FEF2F2;
}

.ct-acc-action-btn__icon--danger {
    background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%);
    color: #DC2626;
}

/* ==========================================================================
   Device Card — Remove Button
   ========================================================================== */

.ct-acc-device-card__remove {
    width: 32px;
    height: 32px;
    border: 1px solid #FECACA;
    background: #FEF2F2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #DC2626;
    transition: all 0.2s ease;
    padding: 0;
    flex-shrink: 0;
    margin-left: auto;
}

.ct-acc-device-card__remove:hover {
    color: #fff;
    background: #DC2626;
    border-color: #DC2626;
    transform: scale(1.1);
}

.ct-acc-device-card__remove svg {
    width: 15px;
    height: 15px;
}

/* ==========================================================================
   Confirmation Dialog (inline in overlay)
   ========================================================================== */

.ct-acc-confirm-dialog {
    text-align: center;
    padding: 20px 0;
}

.ct-acc-confirm-dialog__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #FEF3C7;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: #D97706;
}

.ct-acc-confirm-dialog__icon svg {
    width: 28px;
    height: 28px;
}

.ct-acc-confirm-dialog__icon--danger {
    background: #FEE2E2;
    color: #DC2626;
}

.ct-acc-confirm-dialog__title {
    font-family: var(--ct-acc-font);
    font-size: 18px;
    font-weight: 700;
    color: var(--ct-acc-dark);
    margin: 0 0 12px;
}

.ct-acc-confirm-dialog__text {
    font-family: var(--ct-acc-font-body);
    font-size: 15px;
    color: var(--ct-acc-gray);
    line-height: 1.6;
    margin: 0 0 24px;
}

.ct-acc-confirm-dialog__actions {
    display: flex;
    gap: 12px;
}

.ct-acc-confirm-dialog__actions .ct-acc-btn {
    flex: 1;
}

/* Danger button variant */
.ct-acc-btn--danger {
    background: #DC2626;
    color: #fff;
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.3);
}

.ct-acc-btn--danger:hover {
    background: #B91C1C;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4);
}

.ct-acc-btn--danger:disabled {
    background: #D1D5DB;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Delete account confirmation input */
.ct-acc-confirm-input {
    width: 100%;
    padding: 12px 16px;
    font-family: var(--ct-acc-font-body);
    font-size: 15px;
    color: var(--ct-acc-dark);
    background: var(--ct-acc-gray-light);
    border: 2px solid transparent;
    border-radius: var(--ct-acc-radius-sm);
    outline: none;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
    text-align: center;
    letter-spacing: 2px;
    font-weight: 600;
    margin-bottom: 20px;
}

.ct-acc-confirm-input:focus {
    border-color: #DC2626;
    background: #fff;
}

/* Device card fade-out animation */
.ct-acc-device-card--removing {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.4s ease, transform 0.4s ease, max-height 0.4s ease, margin 0.4s ease, padding 0.4s ease;
    max-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: none;
}

/* ==========================================================================
   Device Card — Call Buttons
   ========================================================================== */

.ct-acc-device-card__call-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #D1FAE5;
    background: #ECFDF5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #059669;
    transition: all 0.2s ease;
    padding: 0;
    flex-shrink: 0;
}

.ct-acc-device-card__call-btn:hover {
    color: #fff;
    background: #059669;
    border-color: #059669;
    transform: scale(1.1);
}

.ct-acc-device-card__call-btn svg {
    width: 15px;
    height: 15px;
}

.ct-acc-device-card__call-btn--video {
    border-color: #BFDBFE;
    background: #EFF6FF;
    color: #2563EB;
}

.ct-acc-device-card__call-btn--video:hover {
    color: #fff;
    background: #2563EB;
    border-color: #2563EB;
}

/* Buttons group in device card top row */
.ct-acc-device-card__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
}

/* Edit button in device card actions */
.ct-acc-device-card__edit {
    width: 32px;
    height: 32px;
    border: 1px solid #BFDBFE;
    background: #EFF6FF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #2563EB;
    transition: all 0.2s ease;
    padding: 0;
    flex-shrink: 0;
}

.ct-acc-device-card__edit:hover {
    color: #fff;
    background: #2563EB;
    border-color: #2563EB;
    transform: scale(1.1);
}

.ct-acc-device-card__edit svg {
    width: 15px;
    height: 15px;
}

/* ==========================================================================
   Edit Device Overlay — V1 Soft Glass Design
   ========================================================================== */

/* Overlay overrides when showing device edit */
.ct-acc-overlay--edit-device .ct-acc-overlay__dialog {
    background: #FAFAFA;
}
.ct-acc-overlay--edit-device .ct-acc-overlay__header {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom-color: rgba(0,0,0,0.05);
}
.ct-acc-overlay--edit-device .ct-acc-overlay__footer {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top-color: rgba(0,0,0,0.05);
}
.ct-acc-overlay--edit-device .ct-acc-overlay__body {
    padding: 0;
}
.ct-acc-overlay--edit-device .ct-acc-overlay__body-inner {
    max-width: 720px;
    padding: 24px 24px 110px;
}

/* ── Spinning ring animation ── */
@property --ct-dev-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}
@keyframes ct-dev-ring-spin { to { --ct-dev-angle: 360deg; } }

/* ── Hero banner ── */
.ct-dev-hero {
    background: linear-gradient(160deg, rgba(255,245,245,0.95) 0%, rgba(255,240,232,0.95) 50%, rgba(255,237,213,0.95) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255,228,222,0.6);
    padding: 28px 24px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.ct-dev-hero__img-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}
.ct-dev-img-circle {
    position: relative;
    cursor: pointer;
    transition: transform 0.3s var(--ct-acc-ease);
    width: 100px;
    height: 100px;
    border-radius: 50%;
}
.ct-dev-img-circle:hover { transform: scale(1.05); }
.ct-dev-img-circle::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: conic-gradient(from var(--ct-dev-angle), var(--ct-acc-red), #FF7043, var(--ct-acc-red));
    animation: ct-dev-ring-spin 5s linear infinite;
    z-index: 0;
}
.ct-dev-img-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--ct-acc-red), #FF7043);
}
.ct-dev-img-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ct-dev-img-inner svg {
    width: 40px;
    height: 40px;
    color: #fff;
    opacity: 0.85;
}
.ct-dev-img-cam {
    position: absolute;
    z-index: 3;
    bottom: 0;
    right: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    border: 2.5px solid rgba(255,240,232,0.8);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s var(--ct-acc-ease);
}
.ct-dev-img-circle:hover .ct-dev-img-cam { transform: scale(1.1); }
.ct-dev-img-cam svg { width: 14px; height: 14px; color: var(--ct-acc-gray); }

.ct-dev-hero__name {
    font-family: var(--ct-acc-font);
    font-size: 20px;
    font-weight: 800;
    color: var(--ct-acc-dark);
    text-align: center;
}
.ct-dev-hero__sub {
    font-family: var(--ct-acc-font-body);
    font-size: 13px;
    color: var(--ct-acc-gray);
    margin-top: 2px;
    text-align: center;
}

/* ── Battery in hero sub ── */
.ct-dev-batt {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 13px;
}
.ct-dev-batt svg { width: 13px; height: 13px; }
.ct-dev-batt--green { color: var(--ct-acc-success); }
.ct-dev-batt--orange { color: #f59e0b; }
.ct-dev-batt--red { color: var(--ct-acc-error); }

/* ── 2-column grid ── */
.ct-dev-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start;
}

/* ── Frosted glass sections ── */
.ct-dev-sec {
    background: rgba(255,255,255,0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: var(--ct-acc-radius-sm);
    padding: 16px;
    margin-bottom: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.6);
}

/* ── Form primitives ── */
.ct-dev-label {
    font-family: var(--ct-acc-font-body);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ct-acc-text);
    margin-bottom: 0;
    display: block;
}
.ct-dev-label-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.ct-dev-input {
    width: 100%;
    font-family: var(--ct-acc-font-body);
    font-size: 0.9375rem;
    padding: 11px 14px;
    border: 1.5px solid var(--ct-acc-border);
    border-radius: 8px;
    background: #fff;
    color: var(--ct-acc-dark);
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.ct-dev-input:focus { border-color: var(--ct-acc-red); }
.ct-dev-textarea {
    resize: none;
    min-height: 64px;
    line-height: 1.5;
}
.ct-dev-charcount {
    font-family: var(--ct-acc-font-body);
    font-size: 0.8rem;
    color: var(--ct-acc-gray);
    text-align: right;
    margin-top: 4px;
}

/* ── Hint tooltips ── */
.ct-dev-hint-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ct-acc-gray-light);
    color: var(--ct-acc-gray);
    cursor: help;
    flex-shrink: 0;
    transition: all 0.2s;
}
.ct-dev-hint-trigger svg { width: 12px; height: 12px; }
.ct-dev-hint-trigger:hover { background: #DBEAFE; color: #2563EB; }
.ct-dev-hint-bubble {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--ct-acc-dark);
    color: #fff;
    font-family: var(--ct-acc-font-body);
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.5;
    padding: 10px 14px;
    border-radius: 10px;
    width: 240px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s var(--ct-acc-ease);
    z-index: 10;
}
.ct-dev-hint-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--ct-acc-dark);
}
.ct-dev-hint-trigger:hover .ct-dev-hint-bubble {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

/* ── Access level cards ── */
.ct-dev-ac-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.ct-dev-ac {
    background: rgba(255,255,255,0.7);
    border: 2px solid transparent;
    border-radius: 10px;
    padding: 14px 8px 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s var(--ct-acc-ease);
    position: relative;
}
.ct-dev-ac::after {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    opacity: 0.25;
    transition: opacity 0.25s;
}
.ct-dev-ac--admin::after { background: var(--ct-acc-red); }
.ct-dev-ac--member::after { background: #3B82F6; }
.ct-dev-ac--extern::after { background: var(--ct-acc-muted); }
.ct-dev-ac.ct-dev-ac--sel {
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.ct-dev-ac.ct-dev-ac--sel::after { opacity: 1; }
.ct-dev-ac--admin.ct-dev-ac--sel { border-color: rgba(239,83,80,0.25); }
.ct-dev-ac--member.ct-dev-ac--sel { border-color: rgba(59,130,246,0.25); }
.ct-dev-ac--extern.ct-dev-ac--sel { border-color: rgba(156,163,175,0.2); }
.ct-dev-ac__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    margin: 0 auto 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ct-dev-ac__icon svg { width: 18px; height: 18px; }
.ct-dev-ac--admin .ct-dev-ac__icon { background: #FEE2E2; color: #DC2626; }
.ct-dev-ac--member .ct-dev-ac__icon { background: #DBEAFE; color: #2563EB; }
.ct-dev-ac--extern .ct-dev-ac__icon { background: var(--ct-acc-gray-light); color: var(--ct-acc-gray); }
.ct-dev-ac__name {
    font-family: var(--ct-acc-font);
    font-size: 12px;
    font-weight: 700;
    color: var(--ct-acc-dark);
}
.ct-dev-ac__desc {
    font-family: var(--ct-acc-font-body);
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--ct-acc-gray);
    margin-top: 2px;
}

/* ── Access info box ── */
.ct-dev-access-info {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    margin-top: 12px;
    font-family: var(--ct-acc-font-body);
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--ct-acc-text);
    background: #f0f4ff;
    border: 1px solid #d0d9f0;
}
.ct-dev-access-info svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; color: #4a6fa5; }

/* ── Access detail description ── */
.ct-dev-access-detail {
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--ct-acc-gray-light);
    font-family: var(--ct-acc-font-body);
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--ct-acc-text);
}
.ct-dev-access-detail strong { font-weight: 700; color: var(--ct-acc-dark); }

/* ── Save button (custom for edit device) ── */
.ct-dev-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 16px 32px;
    font-family: var(--ct-acc-font-body);
    font-size: 17px;
    font-weight: 600;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    background: var(--ct-acc-red);
    color: #fff;
    box-shadow: 0 4px 16px rgba(239,83,80,0.35), 0 0 20px rgba(239,83,80,0.15);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.ct-dev-save:hover {
    background: var(--ct-acc-red-hover);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(239,83,80,0.5), 0 0 30px rgba(239,83,80,0.3);
}
.ct-dev-save:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239,83,80,0.4);
}
.ct-dev-save:disabled {
    background: #D1D5DB;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ── Delete zone ── */
.ct-dev-delete-zone {
    text-align: center;
    padding-top: 8px;
}
.ct-dev-delete-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--ct-acc-font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: #991B1B;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px 16px;
    border-radius: 8px;
    transition: all 0.2s;
}
.ct-dev-delete-link svg { width: 16px; height: 16px; }
.ct-dev-delete-link:hover { background: #FEF2F2; color: #DC2626; }

/* ── Delete confirmation dialog ── */
.ct-dev-del-backdrop {
    position: fixed;
    inset: 0;
    z-index: 200000;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: ct-dev-del-fade-in 0.2s ease;
}
.ct-dev-del-backdrop.ct-dev-del--show { display: flex; }
@keyframes ct-dev-del-fade-in { from { opacity: 0; } to { opacity: 1; } }
.ct-dev-del-dialog {
    background: #fff;
    border-radius: var(--ct-acc-radius);
    max-width: 420px;
    width: 100%;
    box-shadow: 0 24px 64px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.1);
    animation: ct-dev-del-slide-up 0.3s var(--ct-acc-ease);
    overflow: hidden;
}
@keyframes ct-dev-del-slide-up { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.ct-dev-del__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #FEE2E2;
    margin: 0 auto 16px;
}
.ct-dev-del__icon svg { width: 28px; height: 28px; color: #DC2626; }
.ct-dev-del__body {
    padding: 32px 28px 24px;
    text-align: center;
}
.ct-dev-del__title {
    font-family: var(--ct-acc-font);
    font-size: 18px;
    font-weight: 700;
    color: var(--ct-acc-dark);
    margin-bottom: 12px;
}
.ct-dev-del__text {
    font-family: var(--ct-acc-font-body);
    font-size: 0.88rem;
    color: var(--ct-acc-gray);
    line-height: 1.6;
    margin-bottom: 0;
}
.ct-dev-del__text strong { color: var(--ct-acc-dark); font-weight: 700; }
.ct-dev-del__warn {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 10px;
    padding: 12px 14px;
    margin: 16px 28px 0;
    font-family: var(--ct-acc-font-body);
    font-size: 0.82rem;
    line-height: 1.5;
    color: #991B1B;
    text-align: left;
}
.ct-dev-del__warn svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; color: #DC2626; }
.ct-dev-del__footer {
    display: flex;
    gap: 12px;
    padding: 20px 28px 28px;
}
.ct-dev-del__btn {
    flex: 1;
    padding: 14px 20px;
    font-family: var(--ct-acc-font-body);
    font-size: 0.95rem;
    font-weight: 600;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s;
}
.ct-dev-del__btn--cancel {
    background: var(--ct-acc-gray-light);
    color: var(--ct-acc-dark);
}
.ct-dev-del__btn--cancel:hover { background: #E5E7EB; }
.ct-dev-del__btn--danger {
    background: #DC2626;
    color: #fff;
    box-shadow: 0 4px 16px rgba(220,38,38,0.3);
}
.ct-dev-del__btn--danger:hover { background: #B91C1C; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(220,38,38,0.4); }

/* ── Mobile ── */
@media (max-width: 640px) {
    .ct-dev-grid { grid-template-columns: 1fr; gap: 0; }
    .ct-dev-hint-bubble { left: auto; right: -8px; transform: translateY(4px); }
    .ct-dev-hint-trigger:hover .ct-dev-hint-bubble { transform: translateY(0); }
    .ct-dev-hint-bubble::after { left: auto; right: 14px; transform: none; }
    .ct-acc-overlay--edit-device .ct-acc-overlay__body-inner { padding: 16px 16px 100px; }
}

/* ==========================================================================
   Contact Viewer Overlay — Matching Edit Device Design
   ========================================================================== */

/* Overlay overrides when showing contact viewer */
.ct-acc-overlay--contact-viewer .ct-acc-overlay__dialog {
    background: #FAFAFA;
}
.ct-acc-overlay--contact-viewer .ct-acc-overlay__header {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom-color: rgba(0,0,0,0.05);
}
.ct-acc-overlay--contact-viewer .ct-acc-overlay__footer {
    display: none;
}
.ct-acc-overlay--contact-viewer .ct-acc-overlay__body {
    padding: 0;
}
.ct-acc-overlay--contact-viewer .ct-acc-overlay__body-inner {
    max-width: 720px;
    padding: 24px 24px 40px;
}

/* ── Event Viewer Overlay ── */
.ct-acc-overlay--event-viewer .ct-acc-overlay__dialog {
    background: #FAFAFA;
}
.ct-acc-overlay--event-viewer .ct-acc-overlay__header {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom-color: rgba(0,0,0,0.05);
}
.ct-acc-overlay--event-viewer .ct-acc-overlay__footer {
    display: none;
}
.ct-acc-overlay--event-viewer .ct-acc-overlay__body {
    padding: 0;
}
.ct-acc-overlay--event-viewer .ct-acc-overlay__body-inner {
    max-width: 720px;
    padding: 24px 24px 40px;
}

/* ── Event Hero modifier ── */
.ct-dev-hero--event {
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--ct-ev-color, #607D8B) 8%, #fff) 0%,
        color-mix(in srgb, var(--ct-ev-color, #607D8B) 12%, #fafafa) 50%,
        color-mix(in srgb, var(--ct-ev-color, #607D8B) 6%, #fff) 100%);
}
.ct-ev-hero-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.ct-ev-hero-icon svg {
    width: 40px;
    height: 40px;
    color: #fff;
    opacity: 0.9;
}

/* ── Confirmation section ── */
.ct-ev-confirm-header {
    font-size: 14px;
    font-weight: 700;
    color: var(--ct-acc-dark);
    margin-bottom: 12px;
}
.ct-ev-confirm-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ct-ev-confirm-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(0,0,0,0.04);
}
.ct-ev-confirm-row__name {
    font-size: 13px;
    font-weight: 500;
    color: var(--ct-acc-dark);
}
.ct-ev-confirm-row__status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
}
.ct-ev-confirm--yes .ct-ev-confirm-row__status { color: #16a34a; }
.ct-ev-confirm--no .ct-ev-confirm-row__status { color: #ef4444; }

/* ── Contact Avatar — Static gradient ring ── */
.ct-con-avatar {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-bottom: 12px;
}
.ct-con-avatar::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: conic-gradient(
        from 135deg,
        var(--ct-con-ring-color, #6B7280),
        color-mix(in srgb, var(--ct-con-ring-color, #6B7280) 60%, #fff) 50%,
        var(--ct-con-ring-color, #6B7280)
    );
    z-index: 0;
}
.ct-con-avatar__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ct-acc-font);
    font-size: 34px;
    font-weight: 700;
    color: #fff;
}
.ct-con-avatar__inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Contact Hero Action Buttons ── */
.ct-con-actions {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-top: 20px;
}
.ct-con-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: var(--ct-acc-dark);
    transition: transform 0.2s var(--ct-acc-ease), color 0.2s;
}
.ct-con-action:hover {
    transform: translateY(-2px);
    color: var(--ct-acc-red);
}
.ct-con-action__icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.5);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, box-shadow 0.2s;
}
.ct-con-action:hover .ct-con-action__icon {
    background: rgba(255,255,255,0.95);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.ct-con-action__label {
    font-family: var(--ct-acc-font-body);
    font-size: 11px;
    font-weight: 500;
    color: var(--ct-acc-gray);
}

/* ── Contact Info Rows ── */
.ct-con-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.ct-con-row:last-child {
    border-bottom: none;
}
.ct-con-row__label {
    font-family: var(--ct-acc-font-body);
    font-size: 12px;
    font-weight: 500;
    color: var(--ct-acc-gray);
    min-width: 80px;
    flex-shrink: 0;
}
.ct-con-row__value {
    font-family: var(--ct-acc-font-body);
    font-size: 14px;
    color: var(--ct-acc-dark);
    flex: 1;
    text-align: right;
    word-break: break-word;
}
.ct-con-row__value a {
    color: var(--ct-acc-red);
    text-decoration: none;
    transition: opacity 0.2s;
}
.ct-con-row__value a:hover {
    opacity: 0.7;
}
.ct-con-row__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* ── Section Title ── */
.ct-con-sec-title {
    font-family: var(--ct-acc-font);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ct-acc-gray);
    padding: 0 0 8px;
}

/* ── Notes Block ── */
.ct-con-notes {
    white-space: pre-wrap;
    font-family: var(--ct-acc-font-body);
    font-size: 13px;
    color: var(--ct-acc-text);
    line-height: 1.6;
}

.ct-con-empty {
    font-family: var(--ct-acc-font-body);
    font-size: 13px;
    color: var(--ct-acc-muted);
    padding: 8px 0;
    font-style: italic;
}

/* ── Badge Pills ── */
.ct-con-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--ct-acc-font-body);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 6px;
    vertical-align: middle;
}
.ct-con-badge--fav {
    background: #FDF2F8;
    color: #EC4899;
}
.ct-con-badge--emergency {
    background: #FEF2F2;
    color: #DC2626;
}

/* ── Contact / Event Viewer Mobile ── */
@media (max-width: 640px) {
    .ct-acc-overlay--contact-viewer .ct-acc-overlay__body-inner,
    .ct-acc-overlay--event-viewer .ct-acc-overlay__body-inner {
        padding: 16px 16px 32px;
    }
    .ct-con-row {
        flex-wrap: wrap;
        gap: 4px;
    }
    .ct-con-row__label {
        width: 100%;
        min-width: unset;
    }
    .ct-con-row__value {
        text-align: left;
        flex: 1;
    }
    .ct-con-actions {
        gap: 24px;
    }
    .ct-con-avatar {
        width: 80px;
        height: 80px;
    }
    .ct-con-avatar__inner {
        font-size: 28px;
    }
}

/* ==========================================================================
   Contact Editor
   ========================================================================== */

/* ── Edit pencil button in overlay header ── */
.ct-con-edit-btn {
    background: var(--ct-acc-red);
    border: none;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 20px;
    color: #fff;
    transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-left: auto;
    margin-right: 8px;
    box-shadow: 0 2px 8px rgba(239,83,80,0.25);
}
.ct-con-edit-btn svg {
    stroke: #fff;
}
.ct-con-edit-btn span {
    font-family: var(--ct-acc-font-body);
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}
.ct-con-edit-btn:hover {
    background: var(--ct-acc-red-hover);
    box-shadow: 0 4px 14px rgba(239,83,80,0.35);
    transform: translateY(-1px);
}

/* ── Button reset for action items (matches <a> styling) ── */
button.ct-con-action {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
}

/* ── Edit action button in hero (red glass + glow) ── */
.ct-con-action--edit .ct-con-action__icon {
    background: rgba(239,83,80,0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-color: rgba(239,83,80,0.25);
    color: var(--ct-acc-red);
    box-shadow: 0 2px 12px rgba(239,83,80,0.2);
}
.ct-con-action--edit .ct-con-action__icon svg {
    stroke: var(--ct-acc-red);
}
.ct-con-action--edit:hover .ct-con-action__icon {
    background: rgba(239,83,80,0.25);
    box-shadow: 0 4px 16px rgba(239,83,80,0.3);
}
.ct-con-action--edit .ct-con-action__label {
    color: var(--ct-acc-red);
    font-weight: 600;
}

/* ── Unsaved changes dialog ── */
.ct-unsaved-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100002;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: ct-fade-in 0.15s ease;
}
.ct-unsaved-dialog {
    background: #fff;
    border-radius: 16px;
    padding: 28px 24px 20px;
    max-width: 340px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    animation: ct-scale-in 0.2s var(--ct-acc-ease);
}
.ct-unsaved__icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    color: #f59e0b;
}
.ct-unsaved__icon svg {
    width: 100%;
    height: 100%;
}
.ct-unsaved__title {
    font-family: var(--ct-acc-font);
    font-size: 18px;
    font-weight: 700;
    color: var(--ct-acc-dark);
    margin: 0 0 8px;
}
.ct-unsaved__text {
    font-family: var(--ct-acc-font-body);
    font-size: 0.9rem;
    color: var(--ct-acc-gray);
    margin: 0 0 20px;
    line-height: 1.5;
}
.ct-unsaved__footer {
    display: flex;
    gap: 10px;
}
.ct-unsaved__btn {
    flex: 1;
    padding: 10px 16px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-family: var(--ct-acc-font-body);
    font-size: 0.9rem;
    font-weight: 600;
    transition: background 0.2s, transform 0.15s;
}
.ct-unsaved__btn:hover {
    transform: translateY(-1px);
}
.ct-unsaved__btn--cancel {
    background: var(--ct-acc-gray-light);
    color: var(--ct-acc-dark);
}
.ct-unsaved__btn--cancel:hover {
    background: #E5E7EB;
}
.ct-unsaved__btn--discard {
    background: var(--ct-acc-red);
    color: #fff;
}
.ct-unsaved__btn--discard:hover {
    background: var(--ct-acc-red-hover);
}
@keyframes ct-fade-in {
    from { opacity: 0; } to { opacity: 1; }
}
@keyframes ct-scale-in {
    from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); }
}

/* ── Editor overlay overrides ── */
.ct-acc-overlay--contact-editor .ct-acc-overlay__dialog {
    background: #FAFAFA;
}
.ct-acc-overlay--contact-editor .ct-acc-overlay__header {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom-color: rgba(0,0,0,0.05);
}
.ct-acc-overlay--contact-editor .ct-acc-overlay__body {
    padding: 0;
}
.ct-acc-overlay--contact-editor .ct-acc-overlay__body-inner {
    max-width: 720px;
    padding: 24px 24px 40px;
}
.ct-acc-overlay--contact-editor .ct-acc-overlay__footer {
    display: block;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(0,0,0,0.06);
    padding: 16px 24px;
}

/* ── Form basics ── */
.ct-con-edit-form {
    display: block;
}
.ct-con-edit-section {
    margin-bottom: 20px;
}
.ct-con-edit-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}
.ct-con-edit-label {
    font-family: var(--ct-acc-font-body);
    font-size: 12px;
    font-weight: 500;
    color: var(--ct-acc-gray);
}
.ct-con-edit-input {
    font-family: var(--ct-acc-font-body);
    font-size: 14px;
    color: var(--ct-acc-dark);
    background: #fff;
    border: 1px solid var(--ct-acc-border);
    border-radius: 10px;
    padding: 10px 14px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
    box-sizing: border-box;
}
.ct-con-edit-input:focus {
    border-color: var(--ct-acc-red);
    box-shadow: 0 0 0 3px rgba(239,83,80,0.1);
}
.ct-con-edit-select {
    appearance: auto;
    cursor: pointer;
}
.ct-con-edit-textarea {
    min-height: 100px;
    resize: vertical;
    line-height: 1.6;
}

/* ── Multi-value rows ── */
.ct-con-edit-multi__row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    align-items: center;
}
.ct-con-edit-multi__text {
    flex: 2;
}
.ct-con-edit-multi__label {
    flex: 1;
}
.ct-con-edit-multi__remove {
    background: none;
    border: 1px solid var(--ct-acc-border);
    border-radius: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    color: var(--ct-acc-gray);
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.ct-con-edit-multi__remove:hover {
    background: #FEF2F2;
    color: #DC2626;
    border-color: #FECACA;
}

/* ── Add button (dashed) ── */
.ct-con-edit-add {
    background: none;
    border: 1.5px dashed var(--ct-acc-border);
    border-radius: 10px;
    width: 100%;
    padding: 10px;
    font-family: var(--ct-acc-font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--ct-acc-gray);
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
    margin-top: 4px;
}
.ct-con-edit-add:hover {
    border-color: var(--ct-acc-red);
    color: var(--ct-acc-red);
    background: rgba(239,83,80,0.04);
}

/* ── Group chips ── */
.ct-con-edit-groups {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 0;
}
.ct-con-edit-group-chip {
    font-family: var(--ct-acc-font-body);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1.5px solid color-mix(in srgb, var(--chip-color, #6B7280) 30%, transparent);
    background: transparent;
    color: var(--chip-color, #6B7280);
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
    user-select: none;
}
.ct-con-edit-group-chip:hover {
    background: color-mix(in srgb, var(--chip-color, #6B7280) 8%, transparent);
    transform: translateY(-1px);
}
.ct-con-edit-group-chip--active {
    background: var(--chip-color, #6B7280);
    color: #fff;
    border-color: var(--chip-color, #6B7280);
}
.ct-con-edit-group-chip--active:hover {
    background: color-mix(in srgb, var(--chip-color, #6B7280) 85%, #000);
}

/* ── Input validation error ── */
.ct-con-edit-input--error {
    border-color: #DC2626 !important;
    box-shadow: 0 0 0 3px rgba(220,38,38,0.12) !important;
}

/* ── Error message in form ── */
.ct-con-edit-error {
    background: #FEF2F2;
    color: #DC2626;
    font-family: var(--ct-acc-font-body);
    font-size: 13px;
    padding: 10px 14px;
    border-radius: 10px;
    margin-bottom: 16px;
}

/* ── Birthday Picker ── */
.ct-con-edit-birthday-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.ct-bday-field {
    position: relative;
}

/* Display trigger */
.ct-bday-display {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    min-height: 20px;
}
.ct-bday-display__text {
    font-family: var(--ct-acc-font-body);
    font-size: 14px;
    color: var(--ct-acc-dark);
    font-weight: 500;
}
.ct-bday-display__ph {
    font-family: var(--ct-acc-font-body);
    font-size: 14px;
    color: #B0B7C3;
}
.ct-bday-display--has-value .ct-bday-display__ph { display: none; }
.ct-bday-display:not(.ct-bday-display--has-value) .ct-bday-display__text { display: none; }
.ct-bday-display__icons {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    padding-left: 8px;
}
.ct-bday-display__clear {
    display: none;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    color: #B0B7C3;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.ct-bday-display--has-value .ct-bday-display__clear { display: flex; }
.ct-bday-display__clear:hover { background: #F5F7FA; color: var(--ct-acc-red); }
.ct-bday-display__cal {
    color: #B0B7C3;
    display: flex;
    transition: color 0.15s;
}
.ct-bday-display:hover .ct-bday-display__cal,
.ct-bday-display:focus .ct-bday-display__cal { color: var(--ct-acc-red); }

/* Calendar popup — glass */
.ct-bday-picker {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
    padding: 16px;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
    transition: opacity 0.25s var(--ct-acc-ease), transform 0.25s var(--ct-acc-ease), visibility 0s 0.25s;
    pointer-events: none;
}
.ct-bday-picker--open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    transition: opacity 0.25s var(--ct-acc-ease), transform 0.25s var(--ct-acc-ease), visibility 0s 0s;
}

/* Month nav */
.ct-bday-picker__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.ct-bday-picker__nav-title {
    font-family: var(--ct-acc-font-body);
    font-size: 15px;
    font-weight: 800;
    color: var(--ct-acc-dark);
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 8px;
    transition: background 0.15s;
}
.ct-bday-picker__nav-title:hover { background: rgba(0,0,0,0.04); }
.ct-bday-picker__nav-btn {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ct-acc-muted);
    transition: all 0.15s;
}
.ct-bday-picker__nav-btn:hover { background: rgba(0,0,0,0.04); color: #455A64; }

/* Day grid */
.ct-bday-picker__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}
.ct-bday-picker__day-label {
    font-family: var(--ct-acc-font-body);
    font-size: 10px;
    font-weight: 800;
    color: #CFD8DC;
    text-align: center;
    padding: 6px 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ct-bday-picker__cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ct-acc-font-body);
    font-size: 13px;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    position: relative;
    transition: all 0.15s;
    color: #455A64;
    border: none;
    background: transparent;
    padding: 0;
}
.ct-bday-picker__cell:hover { background: rgba(0,0,0,0.04); }
.ct-bday-picker__cell--other { color: #D1D5DB; cursor: default; }
.ct-bday-picker__cell--other:hover { background: transparent; }
.ct-bday-picker__cell--today {
    font-weight: 900;
    font-size: 16px;
    color: #fff;
    background: var(--ct-acc-red);
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(239,83,80,0.35), 0 1px 3px rgba(239,83,80,0.2);
}
.ct-bday-picker__cell--today:hover { background: var(--ct-acc-red-hover); }
.ct-bday-picker__cell--selected {
    background: var(--ct-acc-dark, #1a1a2e);
    color: #fff !important;
    font-weight: 800;
    box-shadow: 0 4px 14px rgba(26,26,46,0.25);
}
.ct-bday-picker__cell--selected:hover { background: #2D2D44; }
.ct-bday-picker__cell--today.ct-bday-picker__cell--selected {
    background: var(--ct-acc-red);
    box-shadow: 0 4px 16px rgba(239,83,80,0.45);
}

/* Year picker */
.ct-bday-picker__years {
    margin-bottom: 12px;
    padding: 12px;
    background: rgba(248, 250, 252, 0.7);
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.04);
}
.ct-bday-picker__years-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.ct-bday-picker__decade {
    font-family: var(--ct-acc-font-body);
    font-size: 14px;
    font-weight: 800;
    color: var(--ct-acc-dark);
}
.ct-bday-picker__years-nav {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ct-acc-muted);
    transition: all 0.15s;
}
.ct-bday-picker__years-nav:hover { background: rgba(0,0,0,0.06); color: #455A64; }
.ct-bday-picker__years-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}
.ct-bday-picker__yr {
    padding: 8px 4px;
    font-family: var(--ct-acc-font-body);
    font-size: 13px;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    text-align: center;
    color: #607D8B;
    transition: all 0.15s;
}
.ct-bday-picker__yr:hover { background: rgba(0,0,0,0.04); }
.ct-bday-picker__yr--active { background: var(--ct-acc-red); color: #fff; font-weight: 700; }

/* Day/Month picker (year unknown mode) */
.ct-bday-dm__label {
    font-family: var(--ct-acc-font-body);
    font-size: 11px;
    font-weight: 700;
    color: var(--ct-acc-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}
.ct-bday-dm__months {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-bottom: 16px;
}
.ct-bday-dm__mo {
    padding: 10px 4px;
    font-family: var(--ct-acc-font-body);
    font-size: 13px;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    text-align: center;
    color: #607D8B;
    transition: all 0.15s;
}
.ct-bday-dm__mo:hover { background: rgba(0,0,0,0.04); }
.ct-bday-dm__mo--active {
    background: var(--ct-acc-red);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(239,83,80,0.25);
}
.ct-bday-dm__days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}
.ct-bday-dm__dy {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ct-acc-font-body);
    font-size: 13px;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s;
    color: #455A64;
    border: none;
    background: transparent;
    padding: 0;
}
.ct-bday-dm__dy:hover { background: rgba(0,0,0,0.04); }
.ct-bday-dm__dy--active {
    background: var(--ct-acc-dark, #1a1a2e);
    color: #fff;
    font-weight: 800;
    box-shadow: 0 4px 14px rgba(26,26,46,0.25);
}

/* Checkbox */
.ct-con-edit-birthday-unknown {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-family: var(--ct-acc-font-body);
    font-size: 13px;
    color: var(--ct-acc-gray);
    user-select: none;
    margin-top: 8px;
}
.ct-con-edit-birthday-unknown input[type="checkbox"] {
    accent-color: var(--ct-acc-red);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* ── Photo upload overlay ── */
.ct-con-edit-photo-label {
    cursor: pointer;
    display: block;
    position: relative;
}
.ct-con-edit-photo-overlay {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 2;
}
.ct-con-edit-photo-label:hover .ct-con-edit-photo-overlay {
    opacity: 1;
}

/* ── Contact Editor Mobile ── */
@media (max-width: 640px) {
    .ct-acc-overlay--contact-editor .ct-acc-overlay__body-inner {
        padding: 16px 16px 32px;
    }
    .ct-con-edit-multi__row {
        flex-wrap: wrap;
    }
    .ct-con-edit-multi__text,
    .ct-con-edit-multi__label {
        flex: 1 1 100%;
    }
    .ct-con-edit-multi__remove {
        margin-left: auto;
    }
    .ct-con-edit-photo-overlay {
        opacity: 1;
        background: rgba(0,0,0,0.3);
    }
}

/* ==========================================================================
   Call Overlay — Full-Screen
   ========================================================================== */

.ct-call-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s var(--ct-acc-ease, ease), visibility 0.4s;
}

.ct-call-overlay.active {
    opacity: 1;
    visibility: visible;
}

.ct-call-overlay__bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #1A1A2E 0%, #0D0D1A 100%);
}

.ct-call-overlay__content {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Remote video — fills entire overlay */
.ct-call-overlay__remote-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
}

/* Remote video — visually hidden for audio-only calls (element still needed for audio playback) */
/* NOTE: Do NOT use display:none, visibility:hidden, or clip:rect(0,0,0,0) — browsers
   may refuse to play audio from a fully-hidden <video> element. opacity:0 keeps playback. */
.ct-call-overlay__remote-video--audio-only {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Audio-only avatar */
.ct-call-overlay__avatar {
    position: relative;
    margin-bottom: 32px;
}

.ct-call-overlay__avatar-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(239, 83, 80, 0.3), rgba(255, 112, 67, 0.3));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.ct-call-overlay__avatar-circle svg {
    width: 48px;
    height: 48px;
    color: rgba(255, 255, 255, 0.9);
}

.ct-call-overlay__pulse-ring {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 2px solid rgba(239, 83, 80, 0.4);
    animation: ct-call-pulse 2s ease-out infinite;
}

@keyframes ct-call-pulse {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.4); opacity: 0; }
}

/* Local video PIP */
.ct-call-overlay__pip {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 140px;
    height: 105px;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    z-index: 2;
}

.ct-call-overlay__local-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1);
}

/* Call info (name, status, timer) */
.ct-call-overlay__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    z-index: 2;
    text-align: center;
    padding: 0 24px;
}

.ct-call-overlay__device-name {
    font-family: var(--ct-acc-font, 'Plus Jakarta Sans', sans-serif);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    color: #fff;
}

.ct-call-overlay__status {
    font-family: var(--ct-acc-font-body, 'DM Sans', sans-serif);
    font-size: 15px;
    color: rgba(255, 255, 255, 0.6);
}

.ct-call-overlay__timer {
    font-family: 'Courier New', monospace;
    font-size: 18px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 1px;
    min-height: 22px;
}

/* Controls bar */
.ct-call-overlay__controls {
    position: absolute;
    bottom: 48px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 2;
}

.ct-call-ctrl {
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.ct-call-ctrl svg {
    width: 24px;
    height: 24px;
}

.ct-call-ctrl:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.08);
}

/* Active state (muted/camera off) */
.ct-call-ctrl--active {
    background: rgba(255, 255, 255, 0.9);
    color: var(--ct-acc-dark);
}

.ct-call-ctrl--active:hover {
    background: #fff;
}

/* End call button — red */
.ct-call-ctrl--end {
    width: 64px;
    height: 64px;
    background: #DC2626;
    color: #fff;
}

.ct-call-ctrl--end:hover {
    background: #EF4444;
    transform: scale(1.1);
}

.ct-call-ctrl--end svg {
    width: 28px;
    height: 28px;
}

/* Error toast */
.ct-call-toast {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    z-index: 100001;
    padding: 12px 24px;
    border-radius: 12px;
    font-family: var(--ct-acc-font-body, 'DM Sans', sans-serif);
    font-size: 14px;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.ct-call-toast.active {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.ct-call-toast--error {
    background: #FEF2F2;
    color: #991B1B;
    border: 1px solid #FECACA;
}

/* ==========================================================================
   Call UI — Responsive
   ========================================================================== */

@media (max-width: 768px) {
    .ct-call-overlay__pip {
        width: 100px;
        height: 75px;
        top: 16px;
        right: 16px;
        border-radius: 10px;
    }

    .ct-call-overlay__controls {
        bottom: 32px;
        gap: 16px;
    }

    .ct-call-ctrl {
        width: 48px;
        height: 48px;
    }

    .ct-call-ctrl svg {
        width: 20px;
        height: 20px;
    }

    .ct-call-ctrl--end {
        width: 56px;
        height: 56px;
    }

    .ct-call-ctrl--end svg {
        width: 24px;
        height: 24px;
    }
}

/* ==========================================================================
   Incoming Call Overlay
   ========================================================================== */

.ct-incoming-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s var(--ct-acc-ease, ease), visibility 0.4s;
}

.ct-incoming-overlay.active {
    opacity: 1;
    visibility: visible;
}

.ct-incoming-overlay__bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #1A1A2E 0%, #0D0D1A 100%);
}

.ct-incoming-overlay__content {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.ct-incoming-overlay__avatar {
    position: relative;
    margin-bottom: 16px;
}

.ct-incoming-overlay__avatar-circle {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(239, 83, 80, 0.3), rgba(255, 112, 67, 0.3));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.ct-incoming-overlay__avatar-circle svg {
    width: 52px;
    height: 52px;
    color: rgba(255, 255, 255, 0.9);
}

.ct-incoming-overlay__pulse-ring {
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    border: 2px solid rgba(239, 83, 80, 0.4);
    animation: ct-incoming-pulse 2s ease-out infinite;
}

.ct-incoming-overlay__pulse-ring--delayed {
    animation-delay: 1s;
}

@keyframes ct-incoming-pulse {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.6); opacity: 0; }
}

.ct-incoming-overlay__caller-name {
    font-family: var(--ct-acc-font, 'Plus Jakarta Sans', sans-serif);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    color: #fff;
    text-align: center;
    padding: 0 24px;
}

.ct-incoming-overlay__label {
    font-family: var(--ct-acc-font-body, 'DM Sans', sans-serif);
    font-size: 15px;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
}

.ct-incoming-overlay__actions {
    display: flex;
    align-items: center;
    gap: 48px;
    margin-top: 40px;
}

.ct-incoming-action {
    width: 68px;
    height: 68px;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    color: #fff;
}

.ct-incoming-action svg {
    width: 28px;
    height: 28px;
}

.ct-incoming-action--accept {
    background: #16A34A;
    box-shadow: 0 4px 20px rgba(22, 163, 74, 0.4);
}

.ct-incoming-action--accept:hover {
    background: #15803D;
    transform: scale(1.1);
}

.ct-incoming-action--decline {
    background: #DC2626;
    box-shadow: 0 4px 20px rgba(220, 38, 38, 0.4);
}

.ct-incoming-action--decline:hover {
    background: #EF4444;
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .ct-incoming-overlay__actions {
        gap: 36px;
        margin-top: 32px;
    }

    .ct-incoming-action {
        width: 60px;
        height: 60px;
    }

    .ct-incoming-action svg {
        width: 24px;
        height: 24px;
    }
}

/* ==========================================================================
   Processing Overlay (multi-step checkout animation)
   ========================================================================== */

.ct-acc-processing {
    text-align: center;
    padding: 40px 24px;
}

.ct-acc-processing__logo {
    margin-bottom: 28px;
    animation: ct-acc-processing-pulse 2s ease-in-out infinite;
}

.ct-acc-processing__logo svg {
    color: var(--ct-acc-dark);
    width: 40px;
    height: 40px;
}

@keyframes ct-acc-processing-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.95); opacity: 0.8; }
}

.ct-acc-processing__steps {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 300px;
    margin: 0 auto 28px;
    text-align: left;
}

.ct-acc-processing__step {
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 0.35;
    transform: translateX(-8px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.ct-acc-processing__step--active {
    opacity: 1;
    transform: translateX(0);
}

.ct-acc-processing__step--done {
    opacity: 0.7;
    transform: translateX(0);
}

.ct-acc-processing__step-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ct-acc-processing__step-spinner {
    width: 22px;
    height: 22px;
    border: 2.5px solid rgba(0, 0, 0, 0.1);
    border-top-color: var(--ct-acc-red, #c8102e);
    border-radius: 50%;
    animation: ct-acc-spin 0.7s linear infinite;
    display: none;
}

.ct-acc-processing__step--active .ct-acc-processing__step-spinner {
    display: block;
}

.ct-acc-processing__step--done .ct-acc-processing__step-spinner {
    display: none;
}

.ct-acc-processing__step-check {
    display: none;
    color: #16a34a;
}

.ct-acc-processing__step--done .ct-acc-processing__step-check {
    display: block;
    animation: ct-acc-check-pop 0.35s ease;
}

@keyframes ct-acc-check-pop {
    0% { transform: scale(0); }
    60% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.ct-acc-processing__step-label {
    font-size: 0.92rem;
    color: var(--ct-acc-text);
    font-weight: 500;
}

.ct-acc-processing__step--done .ct-acc-processing__step-label {
    color: var(--ct-acc-gray);
}

.ct-acc-processing__bar {
    width: 100%;
    max-width: 300px;
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    margin: 0 auto;
    overflow: hidden;
}

.ct-acc-processing__bar-fill {
    height: 100%;
    background: var(--ct-acc-red, #c8102e);
    border-radius: 2px;
    width: 0%;
    transition: width 0.6s ease;
}

/* ==========================================================================
   Animated Checkmark (checkout success)
   ========================================================================== */

.ct-acc-result-checkmark {
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
}

.ct-acc-result-checkmark__circle {
    stroke: #16a34a;
    stroke-width: 2;
    fill: none;
    stroke-dasharray: 283;
    stroke-dashoffset: 283;
    animation: ct-acc-draw-circle 0.6s ease forwards;
}

@keyframes ct-acc-draw-circle {
    to { stroke-dashoffset: 0; }
}

.ct-acc-result-checkmark__check {
    stroke: #16a34a;
    stroke-width: 3;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    animation: ct-acc-draw-check 0.4s ease 0.5s forwards;
}

@keyframes ct-acc-draw-check {
    to { stroke-dashoffset: 0; }
}

.ct-acc-checkout-result--animated {
    opacity: 0;
    transform: translateY(12px);
    animation: ct-acc-fade-slide-up 0.5s ease 0.3s forwards;
}

@keyframes ct-acc-fade-slide-up {
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Session Verification Loading State
   ========================================================================== */


/* ==========================================================================
   Registration Trust Badges
   ========================================================================== */

.ct-acc-reg-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--ct-acc-border);
}

.ct-acc-reg-trust__item {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #F0FAF4;
    border: 1px solid #D1FAE5;
    border-radius: 20px;
    padding: 6px 12px;
    font-family: var(--ct-acc-font-body);
    font-size: 0.78rem;
    color: #065F46;
    white-space: nowrap;
}

.ct-acc-reg-trust__item svg {
    flex-shrink: 0;
    color: #059669;
}

/* ==========================================================================
   Registration Gender Buttons
   ========================================================================== */

.ct-acc-reg-gender {
    display: flex;
    gap: 8px;
}

.ct-acc-reg-gender__btn {
    flex: 1;
    background: #fff;
    border: 1.5px solid var(--ct-acc-border);
    border-radius: 8px;
    padding: 11px 0;
    font-family: var(--ct-acc-font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--ct-acc-dark);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
    outline: none;
}

.ct-acc-reg-gender__btn:hover {
    border-color: #D1D5DB;
    background: var(--ct-acc-gray-light);
}

.ct-acc-reg-gender__btn--active {
    border-color: var(--ct-acc-red);
    background: #FFF0F0;
    color: var(--ct-acc-red);
    font-weight: 600;
}

.ct-acc-reg-gender__btn--active:hover {
    border-color: var(--ct-acc-red);
    background: #FFF0F0;
}

/* ==========================================================================
   Registration Country Dropdown
   ========================================================================== */

.ct-acc-reg-country {
    position: relative;
}

.ct-acc-reg-country__trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: #fff;
    border: 1.5px solid var(--ct-acc-border);
    border-radius: 8px;
    padding: 10px 14px;
    font-family: var(--ct-acc-font-body);
    font-size: 0.9375rem;
    color: var(--ct-acc-dark);
    cursor: pointer;
    transition: border-color 0.2s;
    outline: none;
    text-align: left;
}

.ct-acc-reg-country__trigger:focus,
.ct-acc-reg-country--open .ct-acc-reg-country__trigger {
    border-color: var(--ct-acc-red);
}

.ct-acc-reg-country__flag {
    font-size: 1.15rem;
    line-height: 1;
}

.ct-acc-reg-country__label {
    flex: 1;
}

.ct-acc-reg-country__arrow {
    font-size: 0.85rem;
    color: var(--ct-acc-gray);
    transition: transform 0.2s;
}

.ct-acc-reg-country--open .ct-acc-reg-country__arrow {
    transform: rotate(180deg);
}

.ct-acc-reg-country__dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--ct-acc-border);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    z-index: 10;
    overflow: hidden;
}

.ct-acc-reg-country--open .ct-acc-reg-country__dropdown {
    display: block;
}

.ct-acc-reg-country__option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: none;
    border: none;
    font-family: var(--ct-acc-font-body);
    font-size: 0.9375rem;
    color: var(--ct-acc-dark);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

.ct-acc-reg-country__option:hover {
    background: var(--ct-acc-gray-light);
}

.ct-acc-reg-country__option--active {
    background: #FFF0F0;
    color: var(--ct-acc-red);
    font-weight: 600;
}

.ct-acc-reg-country__option--active:hover {
    background: #FFF0F0;
}

/* ==========================================================================
   Registration Phone Info Box
   ========================================================================== */

.ct-acc-reg-phone-info {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #F0F9FF;
    border: 1px solid #BAE6FD;
    border-radius: 8px;
    padding: 12px 14px;
    margin-top: 4px;
}

.ct-acc-reg-phone-info svg {
    flex-shrink: 0;
    color: #0284C7;
    margin-top: 1px;
}

.ct-acc-reg-phone-info strong {
    display: block;
    font-family: var(--ct-acc-font);
    font-size: 0.8rem;
    font-weight: 600;
    color: #0C4A6E;
    margin-bottom: 3px;
}

.ct-acc-reg-phone-info p {
    font-family: var(--ct-acc-font-body);
    font-size: 0.78rem;
    line-height: 1.5;
    color: #0369A1;
    margin: 0;
}

/* ==========================================================================
   Registration Birthdate Selects
   ========================================================================== */

.ct-acc-reg-birthdate {
    display: flex;
    gap: 8px;
}

.ct-acc-reg-birthdate__select {
    flex: 1;
    min-width: 0;
    appearance: none;
    -webkit-appearance: none;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B7280' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
    border: 1.5px solid var(--ct-acc-border);
    border-radius: 8px;
    padding: 11px 30px 11px 14px;
    font-family: var(--ct-acc-font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--ct-acc-dark);
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    outline: none;
    text-align: center;
}

.ct-acc-reg-birthdate__select:hover {
    border-color: #D1D5DB;
    background-color: var(--ct-acc-gray-light);
}

.ct-acc-reg-birthdate__select:focus {
    border-color: var(--ct-acc-red);
    background-color: #fff;
}

.ct-acc-reg-birthdate__select--month {
    flex: 1.6;
    text-align: left;
}

/* ==========================================================================
   Registration Birthdate Info Box
   ========================================================================== */

.ct-acc-reg-birthdate-info {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #F0F9FF;
    border: 1px solid #BAE6FD;
    border-radius: 8px;
    padding: 10px 14px;
    margin-top: -8px;
    margin-bottom: 16px;
}

.ct-acc-reg-birthdate-info svg {
    flex-shrink: 0;
    color: #0284C7;
}

.ct-acc-reg-birthdate-info span {
    font-family: var(--ct-acc-font-body);
    font-size: 0.78rem;
    line-height: 1.4;
    color: #0369A1;
}

/* ==========================================================================
   Registration Terms Checkbox
   ========================================================================== */

.ct-acc-reg-terms {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 16px;
    padding: 12px 14px;
    border: 1.5px solid var(--ct-acc-border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s;
    user-select: none;
}

.ct-acc-reg-terms:hover {
    border-color: #D1D5DB;
}

.ct-acc-reg-terms--error {
    border-color: var(--ct-acc-error);
}

.ct-acc-reg-terms__checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.ct-acc-reg-terms__check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    min-width: 20px;
    border: 2px solid var(--ct-acc-border);
    border-radius: 4px;
    background: #fff;
    transition: background 0.2s, border-color 0.2s;
    margin-top: 1px;
}

.ct-acc-reg-terms__check::after {
    content: '';
    display: none;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-top: -2px;
}

.ct-acc-reg-terms__checkbox:checked + .ct-acc-reg-terms__check {
    background: var(--ct-acc-red);
    border-color: var(--ct-acc-red);
}

.ct-acc-reg-terms__checkbox:checked + .ct-acc-reg-terms__check::after {
    display: block;
}

.ct-acc-reg-terms__checkbox:focus-visible + .ct-acc-reg-terms__check {
    box-shadow: 0 0 0 3px rgba(239, 83, 80, 0.2);
}

.ct-acc-reg-terms__text {
    font-family: var(--ct-acc-font-body);
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--ct-acc-dark);
}

.ct-acc-reg-terms__text a {
    color: var(--ct-acc-red);
    text-decoration: underline;
    font-weight: 600;
}

.ct-acc-reg-terms__text a:hover {
    color: var(--ct-acc-red-hover);
}

/* ==========================================================================
   Payment Method Selector
   ========================================================================== */

.ct-acc-pm-selector {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 0;
}

.ct-acc-pm-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border: 1.5px solid var(--ct-acc-border);
    border-radius: var(--ct-acc-radius-sm);
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s var(--ct-acc-ease), box-shadow 0.2s var(--ct-acc-ease), transform 0.15s var(--ct-acc-ease);
}

.ct-acc-pm-card:hover {
    border-color: var(--ct-acc-red);
    box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.08);
    transform: translateY(-1px);
}

.ct-acc-pm-card:focus-visible {
    border-color: var(--ct-acc-red);
    box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.15);
    outline: none;
}

.ct-acc-pm-card__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ct-acc-gray-light);
    border-radius: 10px;
    color: var(--ct-acc-dark);
}

.ct-acc-pm-card:hover .ct-acc-pm-card__icon {
    background: #FEF2F2;
    color: var(--ct-acc-red);
}

.ct-acc-pm-card__text {
    flex: 1;
    min-width: 0;
}

.ct-acc-pm-card__title {
    font-family: var(--ct-acc-font);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ct-acc-dark);
    margin-bottom: 2px;
}

.ct-acc-pm-card__desc {
    font-family: var(--ct-acc-font-body);
    font-size: 0.875rem;
    color: var(--ct-acc-gray);
    line-height: 1.4;
}

.ct-acc-pm-card__arrow {
    flex-shrink: 0;
    color: var(--ct-acc-gray);
    transition: color 0.2s, transform 0.2s;
}

.ct-acc-pm-card:hover .ct-acc-pm-card__arrow {
    color: var(--ct-acc-red);
    transform: translateX(2px);
}

/* ==========================================================================
   Bank Transfer Form
   ========================================================================== */

.ct-acc-bank-billing-title {
    font-family: var(--ct-acc-font);
    font-size: 1rem;
    font-weight: 700;
    color: var(--ct-acc-dark);
    margin: 20px 0 12px;
}

.ct-acc-bank-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ct-acc-form-row {
    display: flex;
    gap: 12px;
}

.ct-acc-form-group--plz {
    flex: 0 0 120px;
}

.ct-acc-form-group--city {
    flex: 1;
}

.ct-acc-bank-info-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 4px;
    padding: 12px 14px;
    background: rgba(107, 114, 128, 0.06);
    border-left: 3px solid var(--ct-acc-gray);
    border-radius: 0 8px 8px 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--ct-acc-gray);
}

.ct-acc-bank-info-notice svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--ct-acc-gray);
}

/* ==========================================================================
   Bank Transfer Details Display
   ========================================================================== */

.ct-acc-bank-details {
    text-align: center;
}

.ct-acc-bank-details__header {
    margin-bottom: 20px;
}

.ct-acc-bank-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--ct-acc-border);
}

.ct-acc-bank-row:last-of-type {
    border-bottom: none;
}

.ct-acc-bank-row__label {
    font-family: var(--ct-acc-font-body);
    font-size: 0.875rem;
    color: var(--ct-acc-gray);
    flex-shrink: 0;
    margin-right: 16px;
}

.ct-acc-bank-row__value {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ct-acc-font);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ct-acc-dark);
    text-align: right;
    word-break: break-all;
}

.ct-acc-copy-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--ct-acc-border);
    border-radius: 8px;
    background: #fff;
    color: var(--ct-acc-gray);
    cursor: pointer;
    transition: all 0.2s;
}

.ct-acc-copy-btn:hover {
    border-color: var(--ct-acc-red);
    color: var(--ct-acc-red);
    background: #FEF2F2;
}

.ct-acc-copy-btn--copied {
    border-color: var(--ct-acc-success);
    color: var(--ct-acc-success);
    background: #ECFDF5;
    font-size: 0.75rem;
    font-weight: 600;
    width: auto;
    padding: 0 8px;
}

.ct-acc-bank-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px 0 4px;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--ct-acc-border);
    border-radius: var(--ct-acc-radius-sm);
}

.ct-acc-bank-qr canvas {
    border-radius: 8px;
}

.ct-acc-bank-qr__label {
    font-family: var(--ct-acc-font-body);
    font-size: 0.8rem;
    color: var(--ct-acc-gray);
    margin: 10px 0 0;
}

.ct-acc-bank-details__due {
    font-family: var(--ct-acc-font);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ct-acc-dark);
    margin: 16px 0 8px;
}

.ct-acc-bank-details__note {
    font-family: var(--ct-acc-font-body);
    font-size: 0.85rem;
    color: var(--ct-acc-gray);
    line-height: 1.5;
    margin: 0 0 16px;
}

.ct-acc-bank-details__link {
    display: inline-block;
    font-family: var(--ct-acc-font-body);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ct-acc-red);
    text-decoration: none;
    transition: color 0.2s;
}

.ct-acc-bank-details__link:hover {
    color: var(--ct-acc-red-hover);
    text-decoration: underline;
}

.ct-acc-bank-details__link--primary {
    display: inline-block;
    margin: 16px 0 8px;
    padding: 10px 20px;
    background: var(--ct-acc-red);
    color: #fff;
    border-radius: var(--ct-acc-radius-sm);
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
}

.ct-acc-bank-details__link--primary:hover {
    background: var(--ct-acc-red-hover);
    color: #fff;
    text-decoration: none;
}

/* Payment method intro text */
.ct-acc-pm-intro {
    font-family: var(--ct-acc-font-body);
    font-size: 0.9rem;
    color: var(--ct-acc-gray);
    margin: 0 0 4px;
    line-height: 1.5;
}

/* Billing form hint */
.ct-acc-bank-billing-hint {
    font-family: var(--ct-acc-font-body);
    font-size: 0.85rem;
    color: var(--ct-acc-gray);
    margin: 0 0 12px;
    line-height: 1.4;
}

/* Bank details activation, email notice, support */
.ct-acc-bank-details__activation {
    font-family: var(--ct-acc-font-body);
    font-size: 0.875rem;
    color: var(--ct-acc-dark);
    line-height: 1.5;
    margin: 12px 0 8px;
    padding: 12px 16px;
    background: #F0FDF4;
    border-radius: var(--ct-acc-radius-sm);
    border: 1px solid #BBF7D0;
}

.ct-acc-bank-details__email-notice {
    font-family: var(--ct-acc-font-body);
    font-size: 0.85rem;
    color: var(--ct-acc-gray);
    line-height: 1.5;
    margin: 8px 0 0;
}

.ct-acc-bank-done {
    margin-top: 20px;
    width: 100%;
}

.ct-acc-bank-details__support {
    font-family: var(--ct-acc-font-body);
    font-size: 0.8rem;
    color: var(--ct-acc-gray);
    margin: 16px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--ct-acc-border);
}

/* Copy button accessibility */
.ct-acc-copy-btn:focus-visible {
    border-color: var(--ct-acc-red);
    box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.15);
    outline: none;
}

.ct-acc-copy-btn:active {
    transform: scale(0.95);
}

/* ==========================================================================
   Mobile Breakpoints — Bank Transfer & Payment
   ========================================================================== */

@media (max-width: 600px) {
    .ct-acc-form-row {
        flex-direction: column;
    }

    .ct-acc-form-group--plz {
        flex: 1;
    }

    .ct-acc-bank-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .ct-acc-bank-row__label {
        margin-right: 0;
    }

    .ct-acc-pm-card {
        padding: 16px;
    }

    .ct-acc-pm-card__icon {
        width: 40px;
        height: 40px;
    }

    .ct-acc-copy-btn {
        width: 44px;
        height: 44px;
    }
}

/* ==========================================================================
   Reduced Motion — Accessibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .ct-acc-overlay__dialog { transition-duration: 0.01ms !important; }
    .ct-acc-spinner,
    .ct-acc-processing__step-spinner,
    .ct-acc-result-checkmark__circle,
    .ct-acc-result-checkmark__check { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
    .ct-acc-edit-profile__field-error { transition-duration: 0.01ms !important; }
    .ct-acc-reg-gender__btn,
    .ct-acc-reg-country__trigger,
    .ct-acc-reg-country__arrow { transition-duration: 0.01ms !important; }
    .ct-split-brand__video-wrap { animation: none !important; }
    .ct-acc-loading__spinner { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
    .ct-acc-animate-in { animation: none !important; opacity: 1; }
}

/* ==========================================================================
   Tab Switcher — Glass Morphism Segmented Control
   ========================================================================== */

.ct-acc-tabs {
    position: relative;
    display: flex;
    gap: 4px;
    padding: 6px;
    background: rgba(241, 243, 245, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    margin-bottom: 28px;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.ct-acc-tabs__slider {
    position: absolute;
    top: 6px;
    left: 6px;
    height: calc(100% - 12px);
    background: #fff;
    border-radius: 12px;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.08),
        0 1px 2px rgba(0, 0, 0, 0.04);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 0;
    pointer-events: none;
}

.ct-acc-tabs__btn {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: none;
    border: none;
    font-family: var(--ct-acc-font-body);
    font-size: 0.92rem;
    font-weight: 600;
    color: #78909C;
    cursor: pointer;
    transition: color 0.3s ease;
    text-align: center;
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
    border-radius: 12px;
}

.ct-acc-tabs__btn:hover {
    color: #546E7A;
}

.ct-acc-tabs__btn--active {
    color: #263238;
}

.ct-acc-tabs__btn-icon {
    display: flex;
    align-items: center;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.ct-acc-tabs__btn--active .ct-acc-tabs__btn-icon {
    opacity: 0.8;
}

.ct-acc-tabs__btn-icon svg {
    width: 16px;
    height: 16px;
}

.ct-acc-tab-content {
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* ==========================================================================
   Events Timeline
   ========================================================================== */

.ct-acc-events__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.ct-acc-events__title {
    font-family: var(--ct-acc-font);
    font-size: var(--ct-text-headline);
    font-weight: var(--ct-text-headline-weight);
    line-height: var(--ct-text-headline-lh);
    color: var(--ct-acc-dark);
    margin: 0;
}

.ct-acc-events {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 8px;
}

.ct-acc-events__day {
    background: linear-gradient(135deg, rgba(255,255,255,0.88), rgba(255,255,255,0.62));
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(229,231,235,0.8);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 8px;
}

.ct-acc-events__day-header {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 14px 16px 10px;
    font-family: var(--ct-acc-font-body);
    font-size: 13px;
    font-weight: 800;
    color: #455A64;
    background: rgba(255,255,255,0.75);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    letter-spacing: 0.02em;
}

.ct-acc-events__day-header--today {
    color: #EF5350;
}

.ct-acc-events__day--empty {
    background: none;
    border: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.ct-acc-events__day--empty .ct-acc-events__day-header {
    color: #CBD5E1;
    font-weight: 600;
    padding-bottom: 10px;
    border-bottom: 1px dashed #E5E7EB;
    margin-bottom: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* ==========================================================================
   Event Card (Android-matched layout)
   ========================================================================== */

.ct-acc-event-card {
    background: #fff;
    border: 1px solid var(--ct-acc-border);
    border-radius: var(--ct-acc-radius-sm);
    padding: 16px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.ct-acc-event-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.ct-acc-event-card:active {
    transform: translateY(0);
}

.ct-acc-event-card--skeleton {
    cursor: default;
    pointer-events: none;
}

/* Category header */
.ct-acc-event-card__cat {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ct-acc-event-card__cat-icon {
    display: flex;
    align-items: center;
}

.ct-acc-event-card__cat-icon svg {
    width: 16px;
    height: 16px;
}

.ct-acc-event-card__cat-name {
    font-family: var(--ct-acc-font-body);
}

/* Title row */
.ct-acc-event-card__title-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
}

.ct-acc-event-card__contact-pic {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.ct-acc-event-card__title {
    font-family: var(--ct-acc-font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ct-acc-dark);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Time row */
.ct-acc-event-card__time-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--ct-acc-font-body);
    font-size: 0.85rem;
    color: #455A64;
    margin-bottom: 6px;
}

.ct-acc-event-card__time-row svg {
    flex-shrink: 0;
    color: #607D8B;
}

/* Recurrence row */
.ct-acc-event-card__repeat-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--ct-acc-font-body);
    font-size: 0.8rem;
    color: #607D8B;
    margin-bottom: 6px;
}

.ct-acc-event-card__repeat-row svg {
    flex-shrink: 0;
    color: var(--ct-acc-muted);
}

/* Weekday circles */
.ct-acc-event-card__weekdays {
    display: flex;
    gap: 5px;
    margin-bottom: 8px;
}

.ct-acc-event-card__weekday {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ct-acc-font-body);
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--ct-acc-muted);
    background: #ECEFF1;
}

.ct-acc-event-card__weekday--active {
    color: #fff;
    background: #41B046;
}

/* Indicator pills */
.ct-acc-event-card__indicators {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.ct-acc-event-card__indicator {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 6px;
    border-radius: 8px;
    background: var(--ct-acc-bg-inset);
    color: var(--ct-acc-muted);
    transition: background 0.15s, color 0.15s;
}

.ct-acc-event-card__indicator svg {
    width: 14px;
    height: 14px;
}

/* Per-type colored indicator pills */
.ct-acc-event-card__indicator--medInfo { color: #E53935; background: rgba(229,57,53,0.12); }
.ct-acc-event-card__indicator--confirmation { color: #16a34a; background: rgba(22,163,74,0.12); }
.ct-acc-event-card__indicator--confirmed { color: #16a34a; background: rgba(22,163,74,0.16); }
.ct-acc-event-card__indicator--speech { color: #7C3AED; background: rgba(124,58,237,0.12); }
.ct-acc-event-card__indicator--link { color: #2563EB; background: rgba(37,99,235,0.12); }

.ct-acc-event-card__indicator:hover {
    filter: brightness(0.92);
}

.ct-acc-event-card__indicator-count {
    font-family: var(--ct-acc-font-body);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

/* Device target row */
.ct-acc-event-card__target {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.ct-acc-event-card__target-label {
    font-family: var(--ct-acc-font-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--ct-acc-muted);
    flex-shrink: 0;
}
.ct-acc-event-card__target-all {
    font-family: var(--ct-acc-font-body);
    font-size: 12px;
    color: var(--ct-acc-gray);
}
.ct-acc-event-card__target-devices {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
}
.ct-acc-event-card__target-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid var(--ct-acc-border);
    flex-shrink: 0;
}
.ct-acc-event-card__target-avatar--icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ct-acc-bg-inset);
}
.ct-acc-event-card__target-avatar--icon svg {
    width: 14px;
    height: 14px;
}

/* Bottom row separator */
.ct-acc-event-card--v3 .ct-acc-event-card__bottom {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid rgba(229,231,235,0.3);
}

/* Todo progress bar */
.ct-acc-event-card__progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.ct-acc-event-card__progress-bar {
    flex: 1;
    height: 6px;
    background: #E3F2FD;
    border-radius: 3px;
    overflow: hidden;
}

.ct-acc-event-card__progress-fill {
    height: 100%;
    background: #41B046;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.ct-acc-event-card__progress-text {
    font-family: var(--ct-acc-font-body);
    font-size: 0.75rem;
    color: #607D8B;
    white-space: nowrap;
}

/* Bottom row (badges + device name) */
.ct-acc-event-card__bottom {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}

.ct-acc-event-card__badge {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: 4px;
    font-family: var(--ct-acc-font-body);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ct-acc-event-card__badge--private {
    color: #fff;
    background: #EF5350;
}

.ct-acc-event-card__created {
    font-family: var(--ct-acc-font-body);
    font-size: 0.75rem;
    font-style: italic;
    color: var(--ct-acc-muted);
}

/* ==========================================================================
   Event Viewer (Fullscreen Overlay)
   ========================================================================== */

.ct-acc-ev-viewer__header {
    margin: -32px -32px 24px;
    padding: 40px 32px 28px;
    border-radius: var(--ct-acc-radius) var(--ct-acc-radius) 0 0;
    color: #fff;
    position: relative;
}

.ct-acc-ev-viewer__header-icon {
    margin-bottom: 12px;
}

.ct-acc-ev-viewer__header-icon svg {
    width: 32px;
    height: 32px;
    stroke: rgba(255, 255, 255, 0.9);
}

.ct-acc-ev-viewer__header-title {
    font-family: var(--ct-acc-font);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 6px;
}

.ct-acc-ev-viewer__header-cat {
    font-family: var(--ct-acc-font-body);
    font-size: 0.85rem;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ct-acc-ev-viewer__badges {
    margin-bottom: 20px;
}

.ct-acc-ev-viewer__section {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--ct-acc-border);
}

.ct-acc-ev-viewer__section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.ct-acc-ev-viewer__section--meta {
    border-bottom: none;
    padding-bottom: 0;
}

.ct-acc-ev-viewer__section-title {
    font-family: var(--ct-acc-font-body);
    font-size: 12px;
    font-weight: 700;
    color: var(--ct-acc-gray);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.ct-acc-ev-viewer__time {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.ct-acc-ev-viewer__time-date {
    font-family: var(--ct-acc-font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ct-acc-dark);
}

.ct-acc-ev-viewer__time-clock {
    font-family: var(--ct-acc-font-body);
    font-size: 1rem;
    font-weight: 600;
    color: #2196F3;
}

.ct-acc-ev-viewer__time-badge {
    display: inline-flex;
    padding: 4px 12px;
    background: #E3F2FD;
    color: #1976D2;
    border-radius: 20px;
    font-family: var(--ct-acc-font-body);
    font-size: 0.85rem;
    font-weight: 600;
}

.ct-acc-ev-viewer__duration {
    font-family: var(--ct-acc-font-body);
    font-size: 0.85rem;
    color: #607D8B;
    margin-top: 6px;
}

.ct-acc-ev-viewer__notes {
    font-family: var(--ct-acc-font-body);
    font-size: 0.95rem;
    color: var(--ct-acc-dark);
    line-height: 1.6;
    font-style: italic;
    white-space: pre-wrap;
}

.ct-acc-ev-viewer__location-btns {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.ct-acc-btn--sm {
    padding: 8px 16px;
    font-size: 0.85rem;
    width: auto;
}

.ct-acc-ev-viewer__gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
}

.ct-acc-ev-viewer__gallery-img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 8px;
}

.ct-acc-ev-viewer__todos {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ct-acc-ev-viewer__todo-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #F8F9FA;
    border-radius: 8px;
    font-family: var(--ct-acc-font-body);
    font-size: 0.9rem;
    color: var(--ct-acc-dark);
}

.ct-acc-ev-viewer__todo-item--done {
    text-decoration: line-through;
    color: var(--ct-acc-muted);
}

.ct-acc-ev-viewer__todo-check {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 2px solid #CFD8DC;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: #41B046;
    flex-shrink: 0;
}

.ct-acc-ev-viewer__todo-item--done .ct-acc-ev-viewer__todo-check {
    background: #E8F5E9;
    border-color: #41B046;
}

.ct-acc-ev-viewer__chat {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ct-acc-ev-viewer__attachment {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #F8F9FA;
    border-radius: 8px;
    font-family: var(--ct-acc-font-body);
    font-size: 0.9rem;
    color: var(--ct-acc-dark);
    margin-bottom: 6px;
}

.ct-acc-ev-viewer__attachment svg {
    flex-shrink: 0;
    color: #607D8B;
}

a.ct-acc-ev-viewer__attachment {
    text-decoration: none;
    color: var(--ct-acc-dark);
    transition: background 0.2s;
}

a.ct-acc-ev-viewer__attachment:hover {
    background: #EEF2F7;
}

/* --- Todo: doneBy label --- */
.ct-acc-ev-viewer__todo-text {
    flex: 1;
    min-width: 0;
}

.ct-acc-ev-viewer__todo-doneby {
    font-size: 0.75rem;
    color: var(--ct-acc-muted);
    font-style: italic;
    font-weight: 400;
}

/* --- Chat: bubbles with meta, media, colors, input bar --- */
.ct-acc-ev-viewer__chat-bubble {
    padding: 10px 14px;
    background: #F0F4F8;
    border-radius: 12px 12px 12px 4px;
    font-family: var(--ct-acc-font-body);
    font-size: 0.9rem;
    color: var(--ct-acc-dark);
    max-width: 85%;
    align-self: flex-start;
}

/* Web-portal messages: right-aligned */
.ct-acc-ev-viewer__chat-bubble--web {
    align-self: flex-end;
    border-radius: 12px 12px 4px 12px;
    background: #E3F2FD;
}

/* --- 8 sender colors --- */
.ct-acc-ev-viewer__chat-bubble[data-color="0"] { background: #E3F2FD; }
.ct-acc-ev-viewer__chat-bubble[data-color="1"] { background: #E8F5E9; }
.ct-acc-ev-viewer__chat-bubble[data-color="2"] { background: #FFF3E0; }
.ct-acc-ev-viewer__chat-bubble[data-color="3"] { background: #F3E5F5; }
.ct-acc-ev-viewer__chat-bubble[data-color="4"] { background: #E0F2F1; }
.ct-acc-ev-viewer__chat-bubble[data-color="5"] { background: #FCE4EC; }
.ct-acc-ev-viewer__chat-bubble[data-color="6"] { background: #FFF8E1; }
.ct-acc-ev-viewer__chat-bubble[data-color="7"] { background: #E8EAF6; }

.ct-acc-ev-viewer__chat-bubble[data-color="0"] .ct-acc-ev-viewer__chat-sender { color: #1565C0; }
.ct-acc-ev-viewer__chat-bubble[data-color="1"] .ct-acc-ev-viewer__chat-sender { color: #2E7D32; }
.ct-acc-ev-viewer__chat-bubble[data-color="2"] .ct-acc-ev-viewer__chat-sender { color: #E65100; }
.ct-acc-ev-viewer__chat-bubble[data-color="3"] .ct-acc-ev-viewer__chat-sender { color: #6A1B9A; }
.ct-acc-ev-viewer__chat-bubble[data-color="4"] .ct-acc-ev-viewer__chat-sender { color: #00695C; }
.ct-acc-ev-viewer__chat-bubble[data-color="5"] .ct-acc-ev-viewer__chat-sender { color: #AD1457; }
.ct-acc-ev-viewer__chat-bubble[data-color="6"] .ct-acc-ev-viewer__chat-sender { color: #F57F17; }
.ct-acc-ev-viewer__chat-bubble[data-color="7"] .ct-acc-ev-viewer__chat-sender { color: #283593; }

.ct-acc-ev-viewer__chat-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.ct-acc-ev-viewer__chat-sender {
    font-size: 0.75rem;
    font-weight: 700;
    color: #607D8B;
}

.ct-acc-ev-viewer__chat-time {
    font-size: 0.7rem;
    color: var(--ct-acc-muted);
    margin-left: auto;
}

.ct-acc-ev-viewer__chat-text {
    display: block;
}

.ct-acc-ev-viewer__chat-emote {
    display: block;
    font-size: 2rem;
    line-height: 1.2;
    margin-top: 4px;
}

.ct-acc-ev-viewer__chat-img {
    display: block;
    max-width: 200px;
    max-height: 200px;
    border-radius: 8px;
    margin-top: 6px;
    object-fit: cover;
}

.ct-acc-ev-viewer__chat-media {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    font-size: 0.8rem;
    color: #607D8B;
    text-decoration: none;
}

.ct-acc-ev-viewer__chat-media svg {
    flex-shrink: 0;
}

a.ct-acc-ev-viewer__chat-media:hover {
    background: rgba(0, 0, 0, 0.08);
    color: var(--ct-acc-dark);
}

/* --- Date separator --- */
.ct-acc-ev-viewer__chat-date {
    text-align: center;
    margin: 12px 0 8px;
}

.ct-acc-ev-viewer__chat-date span {
    display: inline-block;
    padding: 3px 12px;
    background: #ECEFF1;
    border-radius: 10px;
    font-family: var(--ct-acc-font-body);
    font-size: 0.7rem;
    font-weight: 600;
    color: #78909C;
    letter-spacing: 0.02em;
}

/* --- Chat input bar --- */
.ct-acc-ev-viewer__chat-input-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--ct-acc-border);
    border-radius: 24px;
}

.ct-acc-ev-viewer__chat-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--ct-acc-font-body);
    font-size: 0.9rem;
    color: var(--ct-acc-dark);
    padding: 6px 4px;
    min-width: 0;
}

.ct-acc-ev-viewer__chat-input::placeholder {
    color: #B0BEC5;
}

.ct-acc-ev-viewer__chat-send {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #B0BEC5;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    flex-shrink: 0;
    padding: 0;
}

.ct-acc-ev-viewer__chat-send:not(:disabled) {
    background: var(--ct-acc-red, #EF5350);
}

.ct-acc-ev-viewer__chat-send:not(:disabled):hover {
    background: var(--ct-acc-red-hover, #E53935);
    transform: scale(1.05);
}

.ct-acc-ev-viewer__chat-send:disabled {
    cursor: default;
    opacity: 0.5;
}

.ct-acc-ev-viewer__chat-send svg {
    flex-shrink: 0;
}

/* --- Attachments: extra contacts, link --- */
.ct-acc-ev-viewer__extra-contacts {
    margin-top: 12px;
}

.ct-acc-ev-viewer__subsec-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: #607D8B;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.ct-acc-ev-viewer__contact-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: #F0F4F8;
    border-radius: 16px;
    font-family: var(--ct-acc-font-body);
    font-size: 0.8rem;
    color: var(--ct-acc-dark);
    margin: 0 4px 4px 0;
}

.ct-acc-ev-viewer__contact-chip svg {
    flex-shrink: 0;
    color: #607D8B;
}

.ct-acc-ev-viewer__link-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 0.9rem;
    color: #607D8B;
}

.ct-acc-ev-viewer__link-row svg {
    flex-shrink: 0;
}

.ct-acc-ev-viewer__link-row a {
    color: var(--ct-acc-red);
    text-decoration: none;
    word-break: break-all;
}

.ct-acc-ev-viewer__link-row a:hover {
    text-decoration: underline;
}

/* --- Location: gpsTyp badge --- */
.ct-acc-ev-viewer__gps-type {
    display: inline-block;
    padding: 2px 8px;
    background: #E3F2FD;
    color: #1565C0;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
    margin-bottom: 8px;
}

/* --- Notification info --- */
.ct-acc-ev-viewer__notif-info {
    border-top: 1px solid var(--ct-acc-border);
    padding-top: 16px;
}

.ct-acc-ev-viewer__notif-row {
    font-family: var(--ct-acc-font-body);
    font-size: 0.85rem;
    color: #607D8B;
    padding: 3px 0;
}

/* ==========================================================================
   Events — Mobile Responsive
   ========================================================================== */

@media (max-width: 768px) {
    .ct-acc-ev-viewer__header {
        margin: -24px -20px 20px;
        padding: 32px 20px 24px;
    }

    .ct-acc-ev-viewer__header-title {
        font-size: 1.25rem;
    }

    .ct-acc-ev-viewer__location-btns {
        flex-direction: column;
    }

    .ct-acc-ev-viewer__gallery {
        grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    }

    .ct-acc-event-card__weekdays {
        gap: 3px;
    }

    .ct-acc-event-card__weekday {
        width: 24px;
        height: 24px;
        font-size: 0.6rem;
    }
}

/* ==========================================================================
   Events V3 — Two-Panel Layout
   ========================================================================== */

/* Events: lock parent chain to viewport so only the list scrolls */
.ct-acc-tab-content:has(.ct-acc-events__layout) {
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
}
.ct-acc-scroll-content:has(.ct-acc-events__layout) {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 0;
}

.ct-acc-events__layout {
    display: flex;
    gap: 0;
    flex: 1;
    min-height: 0;
}

.ct-acc-events__list-panel {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 16px 16px;
}

.ct-acc-events__cal-panel {
    width: 320px;
    flex-shrink: 0;
    align-self: flex-start;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 8px 28px rgba(0,0,0,0.06);
    margin: 16px 16px 4px 12px;
}

@media (max-width: 768px) {
    .ct-acc-events__cal-panel { display: none; }
}

/* ==========================================================================
   Events V3 — Calendar (clearTime Brand)
   ========================================================================== */

.ct-acc-ev-cal {
    padding: 22px;
}

.ct-acc-ev-month-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 14px;
    user-select: none;
}

.ct-acc-ev-month-nav__title {
    font-family: var(--ct-acc-font-body);
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
    color: var(--ct-acc-dark, #1a1a2e);
    transition: color 0.15s;
}

.ct-acc-ev-month-nav__title:hover { color: #EF5350; }

.ct-acc-ev-month-nav__btns {
    display: flex;
    gap: 4px;
}

.ct-acc-ev-month-nav__btn {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ct-acc-muted);
    transition: all 0.15s;
}

.ct-acc-ev-month-nav__btn:hover { background: #F5F7FA; color: #455A64; }
.ct-acc-ev-month-nav__btn svg { width: 16px; height: 16px; }

/* Calendar Grid */
.ct-acc-ev-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.ct-acc-ev-cal-grid__day-label {
    font-family: var(--ct-acc-font-body);
    font-size: 10px;
    font-weight: 800;
    color: #CFD8DC;
    text-align: center;
    padding: 6px 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ct-acc-ev-cal-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ct-acc-font-body);
    font-size: 13px;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    position: relative;
    transition: all 0.15s;
    color: #455A64;
    border: none;
    background: transparent;
    padding: 0;
}

.ct-acc-ev-cal-cell:hover { background: #F5F7FA; }

.ct-acc-ev-cal-cell--other { color: #D1D5DB; cursor: default; }
.ct-acc-ev-cal-cell--other:hover { background: transparent; }

/* Today — bold red filled pill with glow */
.ct-acc-ev-cal-cell--today {
    font-weight: 900;
    font-size: 16px;
    color: #fff;
    background: #EF5350;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(239,83,80,0.35), 0 1px 3px rgba(239,83,80,0.2);
}

.ct-acc-ev-cal-cell--today:hover { background: #E53935; }

/* Selected day */
.ct-acc-ev-cal-cell--selected {
    background: var(--ct-acc-dark, #1a1a2e);
    color: #fff !important;
    font-weight: 800;
    box-shadow: 0 4px 14px rgba(26,26,46,0.25);
}

.ct-acc-ev-cal-cell--selected:hover { background: #2D2D44; }

/* Today + selected combined */
.ct-acc-ev-cal-cell--today.ct-acc-ev-cal-cell--selected {
    background: #EF5350;
    box-shadow: 0 4px 16px rgba(239,83,80,0.45);
}

/* Event dot */
.ct-acc-ev-cal-cell--has-event::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #EF5350;
}

.ct-acc-ev-cal-cell--selected.ct-acc-ev-cal-cell--has-event::after { background: #fff; }
.ct-acc-ev-cal-cell--today.ct-acc-ev-cal-cell--has-event::after { background: rgba(255,255,255,0.7); }

/* Month/Year Picker */
.ct-acc-ev-month-picker {
    position: absolute;
    top: 52px;
    left: 12px;
    right: 12px;
    background: #F8FAFC;
    border: 1px solid #ECEFF1;
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.12);
    z-index: 10;
    padding: 14px;
    display: none;
}

.ct-acc-ev-month-picker--show { display: block; }

.ct-acc-ev-month-picker__year-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.ct-acc-ev-month-picker__year {
    font-family: var(--ct-acc-font-body);
    font-size: 15px;
    font-weight: 800;
    color: var(--ct-acc-dark, #1a1a2e);
}

.ct-acc-ev-month-picker__year-btn {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ct-acc-muted);
    transition: all 0.15s;
}

.ct-acc-ev-month-picker__year-btn:hover { background: #F0F4F8; color: #455A64; }

.ct-acc-ev-month-picker__months {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.ct-acc-ev-month-picker__month {
    padding: 10px 4px;
    font-family: var(--ct-acc-font-body);
    font-size: 13px;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    text-align: center;
    color: #607D8B;
    transition: all 0.15s;
}

.ct-acc-ev-month-picker__month:hover { background: #F0F4F8; }
.ct-acc-ev-month-picker__month--active { background: #EF5350; color: #fff; font-weight: 700; }

/* Calendar reset link */
.ct-acc-ev-cal__reset {
    text-align: center;
    padding: 10px 16px 4px;
}

.ct-acc-ev-cal__reset-btn {
    font-family: var(--ct-acc-font-body);
    font-size: 12px;
    font-weight: 600;
    color: #EF5350;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ct-acc-ev-cal__reset-btn:hover { color: #E53935; }

/* ==========================================================================
   Events V2 — Category Filter
   ========================================================================== */

.ct-acc-ev-catfilter {
    margin-bottom: 16px;
}

.ct-acc-ev-catfilter__scroll {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 2px;
}

.ct-acc-ev-catfilter__scroll::-webkit-scrollbar {
    display: none;
}

.ct-acc-ev-catfilter__chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1.5px solid var(--chip-color, #E0E0E0);
    border-radius: 20px;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    white-space: nowrap;
}

.ct-acc-ev-catfilter__chip:hover {
    border-color: var(--chip-color, #BDBDBD);
    background: color-mix(in srgb, var(--chip-color, #BDBDBD) 6%, #fff);
}

.ct-acc-ev-catfilter__chip--active {
    background: var(--chip-color, #263238);
    border-color: var(--chip-color, #263238);
    color: #fff;
}

.ct-acc-ev-catfilter__chip--active .ct-acc-ev-catfilter__icon svg {
    stroke: #fff;
    fill: none;
}

.ct-acc-ev-catfilter__chip--active .ct-acc-ev-catfilter__label,
.ct-acc-ev-catfilter__chip--active .ct-acc-ev-catfilter__count {
    color: #fff;
}

/* "Alle" chip active — use dark style since no category color */
.ct-acc-ev-catfilter__chip--active:not([style]) {
    background: #263238;
    border-color: #263238;
}

.ct-acc-ev-catfilter__icon {
    display: flex;
    align-items: center;
}

.ct-acc-ev-catfilter__icon svg {
    width: 14px;
    height: 14px;
    color: var(--chip-color, #607D8B);
}

.ct-acc-ev-catfilter__label {
    font-family: var(--ct-acc-font-body);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--chip-color, #455A64);
}

.ct-acc-ev-catfilter__count {
    font-family: var(--ct-acc-font-body);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--ct-acc-muted);
    background: #F0F4F8;
    padding: 1px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

.ct-acc-ev-catfilter__chip--active .ct-acc-ev-catfilter__count {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

/* ── Device Filter Dropdown ── */
.ct-acc-ev-devfilter {
    margin-bottom: 12px;
}
.ct-acc-ev-devfilter__select {
    width: 100%;
    padding: 10px 36px 10px 14px;
    border: 1px solid var(--ct-acc-border, #E5E7EB);
    border-radius: 10px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: var(--ct-acc-font-body, 'DM Sans', sans-serif);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ct-acc-dark, #1a1a2e);
    cursor: pointer;
    transition: border-color 0.15s ease;
}
.ct-acc-ev-devfilter__select:focus {
    outline: none;
    border-color: var(--ct-acc-red, #EF5350);
}

/* ==========================================================================
   Events V3 — Card (Android App Match)
   ========================================================================== */

.ct-acc-event-card--v3 {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    border-bottom: 1px solid rgba(229,231,235,0.5);
    cursor: pointer;
    transition: background 0.15s;
}

.ct-acc-event-card--v3:last-child {
    border-bottom: none;
}

.ct-acc-event-card--v3:hover {
    background: rgba(255,255,255,0.5);
    box-shadow: none;
    transform: none;
}

.ct-acc-event-card__time {
    font-family: var(--ct-acc-font-body);
    font-size: 13px;
    font-weight: 700;
    font-style: italic;
    color: #455A64;
    width: 68px;
    flex-shrink: 0;
    padding-top: 2px;
    line-height: 1.3;
}

.ct-acc-event-card--v3 .ct-acc-event-card__icon {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--card-cat-color) 15%, #fff);
    color: var(--card-cat-color);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    overflow: hidden;
}

.ct-acc-event-card--v3 .ct-acc-event-card__icon svg {
    width: 20px;
    height: 20px;
}

.ct-acc-event-card--v3 .ct-acc-event-card__icon img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.ct-acc-event-card__body {
    flex: 1;
    min-width: 0;
}

.ct-acc-event-card__cat-label {
    font-family: var(--ct-acc-font-body);
    font-size: 0.78rem;
    font-weight: 600;
    color: #78909C;
    line-height: 1.3;
    margin-top: 2px;
}

.ct-acc-event-card--v3 .ct-acc-event-card__title {
    font-family: var(--ct-acc-font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ct-acc-dark);
    line-height: 1.3;
}

.ct-acc-event-card--v3 .ct-acc-event-card__badge {
    font-size: 10px;
    font-weight: 600;
    font-style: italic;
    padding: 2px 8px;
    border-radius: 10px;
    background: #EF5350;
    color: #fff;
}

/* Repeat badge (pill) */
.ct-acc-event-card__repeat-badge {
    display: inline-flex;
    padding: 3px 10px;
    border-radius: 12px;
    background: #ECEFF1;
    font-family: var(--ct-acc-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    color: #546E7A;
    margin-bottom: 8px;
}

/* Gallery preview strip */
.ct-acc-event-card__gallery-preview {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 8px;
}

.ct-acc-event-card__gallery-thumb {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
}

.ct-acc-event-card__gallery-more {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: #ECEFF1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ct-acc-font-body);
    font-size: 0.8rem;
    font-weight: 700;
    color: #607D8B;
}

/* ==========================================================================
   Events V2 — Lightbox
   ========================================================================== */

.ct-acc-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ct-acc-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 20, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.ct-acc-lightbox__img {
    position: relative;
    z-index: 1;
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 4px;
    user-select: none;
}

.ct-acc-lightbox__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.2s;
}

.ct-acc-lightbox__close:hover {
    background: var(--ct-acc-red);
    color: #fff;
    transform: rotate(90deg);
}

.ct-acc-lightbox__close:focus-visible {
    outline: 2px solid var(--ct-acc-red);
    outline-offset: 2px;
}

.ct-acc-lightbox__prev,
.ct-acc-lightbox__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.ct-acc-lightbox__prev { left: 16px; }
.ct-acc-lightbox__next { right: 16px; }

.ct-acc-lightbox__prev:hover,
.ct-acc-lightbox__next:hover {
    background: rgba(255, 255, 255, 0.25);
}

.ct-acc-lightbox__counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    font-family: var(--ct-acc-font-body);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(0, 0, 0, 0.4);
    padding: 4px 14px;
    border-radius: 16px;
}

/* ==========================================================================
   Events V2 — Viewer Enhancements
   ========================================================================== */

.ct-acc-ev-viewer__header-photo {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.6);
    margin-bottom: 10px;
}

.ct-acc-ev-viewer__section-title {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ct-acc-ev-viewer__section-title svg {
    flex-shrink: 0;
    opacity: 0.6;
}

.ct-acc-ev-viewer__gallery-img {
    cursor: pointer;
    transition: opacity 0.2s;
}

.ct-acc-ev-viewer__gallery-img:hover {
    opacity: 0.85;
}

/* Medical info key-value rows */
.ct-acc-ev-viewer__medinfo-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #F0F4F8;
}

.ct-acc-ev-viewer__medinfo-row:last-child {
    border-bottom: none;
}

.ct-acc-ev-viewer__medinfo-label {
    font-family: var(--ct-acc-font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: #546E7A;
}

.ct-acc-ev-viewer__medinfo-value {
    font-family: var(--ct-acc-font-body);
    font-size: 0.85rem;
    color: var(--ct-acc-dark);
    text-align: right;
}

/* ==========================================================================
   Events V2 — Empty State Illustration
   ========================================================================== */

.ct-acc-ev-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
    text-align: center;
}

.ct-acc-ev-empty__svg {
    margin-bottom: 16px;
    opacity: 0.6;
}

.ct-acc-ev-empty__text {
    font-family: var(--ct-acc-font-body);
    font-size: 0.9rem;
    color: var(--ct-acc-muted);
    margin: 0;
}

/* ==========================================================================
   Events V3 — Mobile Responsive
   ========================================================================== */

@media (max-width: 480px) {
    .ct-acc-event-card__time {
        width: 58px;
        font-size: 12px;
    }

    .ct-acc-event-card--v3 .ct-acc-event-card__icon {
        width: 36px;
        height: 36px;
    }

    .ct-acc-event-card--v3 .ct-acc-event-card__icon svg {
        width: 16px;
        height: 16px;
    }

    .ct-acc-event-card__cat-label {
        font-size: 0.72rem;
    }

    .ct-acc-ev-catfilter__chip {
        padding: 5px 10px;
    }

    .ct-acc-ev-catfilter__label {
        font-size: 0.72rem;
    }

    .ct-acc-event-card__gallery-thumb {
        width: 38px;
        height: 38px;
    }

    .ct-acc-event-card__gallery-more {
        width: 38px;
        height: 38px;
        font-size: 0.75rem;
    }

    .ct-acc-event-card__indicators { gap: 4px; margin-bottom: 6px; }
    .ct-acc-event-card__indicator { padding: 2px 5px; }
    .ct-acc-event-card__indicator svg { width: 12px; height: 12px; }
    .ct-acc-event-card__indicator-count { font-size: 10px; }
    .ct-acc-event-card__target { gap: 6px; margin-bottom: 4px; }
    .ct-acc-event-card__target-avatar { width: 20px; height: 20px; }
    .ct-acc-event-card__target-avatar--icon svg { width: 12px; height: 12px; }
    .ct-acc-event-card__target-label, .ct-acc-event-card__target-all { font-size: 11px; }

    .ct-acc-lightbox__prev,
    .ct-acc-lightbox__next {
        width: 36px;
        height: 36px;
        font-size: 1.5rem;
    }

    .ct-acc-lightbox__prev { left: 8px; }
    .ct-acc-lightbox__next { right: 8px; }
}

/* ==========================================================================
   Native Subscription Management Overlay
   ========================================================================== */

/* Management home — 3-column action card grid */
.ct-acc-manage-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 20px;
}

@media (max-width: 600px) {
    .ct-acc-manage-grid {
        grid-template-columns: 1fr;
    }
}

.ct-acc-manage-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 12px;
    background: #fff;
    border: 1px solid var(--ct-acc-border);
    border-radius: var(--ct-acc-radius-sm);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    text-align: center;
    font-family: var(--ct-acc-font-body);
}

.ct-acc-manage-card:hover {
    border-color: var(--ct-acc-red);
    box-shadow: 0 4px 12px rgba(239, 83, 80, 0.12);
    transform: translateY(-2px);
}

.ct-acc-manage-card__icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--ct-acc-gray-light);
    color: var(--ct-acc-dark);
}

.ct-acc-manage-card__icon svg {
    width: 20px;
    height: 20px;
}

.ct-acc-manage-card__title {
    font-family: var(--ct-acc-font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--ct-acc-dark);
    line-height: 1.3;
}

.ct-acc-manage-card__desc {
    font-size: 12px;
    color: var(--ct-acc-gray);
    line-height: 1.4;
}

/* Danger variant — cancel card */
.ct-acc-manage-card--danger:hover {
    border-color: var(--ct-acc-error);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.12);
}

.ct-acc-manage-card--danger .ct-acc-manage-card__icon {
    background: #FEF2F2;
    color: var(--ct-acc-error);
}

/* Current plan summary block */
.ct-acc-manage-summary {
    background: var(--ct-acc-gray-light);
    border-radius: var(--ct-acc-radius-sm);
    padding: 16px 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    align-items: center;
}

.ct-acc-manage-summary__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ct-acc-manage-summary__label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ct-acc-gray);
}

.ct-acc-manage-summary__value {
    font-size: 15px;
    font-weight: 600;
    color: var(--ct-acc-dark);
}

/* Reactivation banner (undo cancellation) */
.ct-acc-reactivate-banner {
    background: #FFFBEB;
    border: 1px solid #FCD34D;
    border-radius: var(--ct-acc-radius-sm);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

.ct-acc-reactivate-banner__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: #D97706;
}

.ct-acc-reactivate-banner__icon svg {
    width: 24px;
    height: 24px;
}

.ct-acc-reactivate-banner__text {
    flex: 1;
    font-size: 14px;
    color: #92400E;
    line-height: 1.4;
}

.ct-acc-reactivate-banner__btn {
    flex-shrink: 0;
    padding: 8px 16px;
    background: #D97706;
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--ct-acc-font-body);
    transition: background 0.2s ease;
}

.ct-acc-reactivate-banner__btn:hover {
    background: #B45309;
}

.ct-acc-reactivate-banner__btn:disabled {
    background: #D1D5DB;
    cursor: not-allowed;
}

/* Plan comparison block (old → new) */
.ct-acc-plan-compare {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 20px 0;
}

.ct-acc-plan-compare__arrow {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: var(--ct-acc-gray);
}

.ct-acc-plan-compare__arrow svg {
    width: 24px;
    height: 24px;
}

.ct-acc-plan-compare__side {
    flex: 1;
    padding: 16px;
    border-radius: var(--ct-acc-radius-sm);
    text-align: center;
}

.ct-acc-plan-compare__side--old {
    background: var(--ct-acc-gray-light);
    border: 1px solid var(--ct-acc-border);
}

.ct-acc-plan-compare__side--new {
    background: #FEF2F2;
    border: 2px solid var(--ct-acc-red);
}

.ct-acc-plan-compare__plan {
    font-size: 15px;
    font-weight: 700;
    color: var(--ct-acc-dark);
    margin-bottom: 4px;
}

.ct-acc-plan-compare__price {
    font-size: 13px;
    color: var(--ct-acc-gray);
}

.ct-acc-plan-compare__badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 50px;
    margin-bottom: 8px;
}

.ct-acc-plan-compare__side--old .ct-acc-plan-compare__badge {
    background: var(--ct-acc-border);
    color: var(--ct-acc-gray);
}

.ct-acc-plan-compare__side--new .ct-acc-plan-compare__badge {
    background: var(--ct-acc-red);
    color: #fff;
}

/* Confirmation dialog styles */
.ct-acc-manage-confirm {
    text-align: center;
    padding: 16px 0;
}

.ct-acc-manage-confirm__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ct-acc-gray-light);
}

.ct-acc-manage-confirm__icon--success {
    background: #D1FAE5;
    color: var(--ct-acc-success);
}

.ct-acc-manage-confirm__icon--warning {
    background: #FEF3C7;
    color: #D97706;
}

.ct-acc-manage-confirm__icon--danger {
    background: #FEE2E2;
    color: var(--ct-acc-error);
}

.ct-acc-manage-confirm__icon svg {
    width: 28px;
    height: 28px;
}

.ct-acc-manage-confirm__title {
    font-family: var(--ct-acc-font);
    font-size: 18px;
    font-weight: 700;
    color: var(--ct-acc-dark);
    margin-bottom: 8px;
}

.ct-acc-manage-confirm__text {
    font-size: 14px;
    color: var(--ct-acc-gray);
    line-height: 1.6;
    margin-bottom: 24px;
}

.ct-acc-manage-confirm__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.ct-acc-manage-confirm__actions .ct-acc-btn {
    flex: 1;
    max-width: 200px;
}

/* Outline danger button for cancel action */
.ct-acc-btn--outline-danger {
    background: transparent;
    color: var(--ct-acc-error);
    border: 2px solid var(--ct-acc-error);
}

.ct-acc-btn--outline-danger:hover {
    background: #FEE2E2;
    transform: translateY(-2px);
}

.ct-acc-btn--outline-danger:disabled {
    border-color: #D1D5DB;
    color: #D1D5DB;
    cursor: not-allowed;
    transform: none;
}

/* Payment method radio cards */
.ct-acc-manage-pm-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 16px 0;
}

.ct-acc-manage-pm-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #fff;
    border: 2px solid var(--ct-acc-border);
    border-radius: var(--ct-acc-radius-sm);
    cursor: pointer;
    transition: border-color 0.2s ease;
    font-family: var(--ct-acc-font-body);
}

.ct-acc-manage-pm-card:hover {
    border-color: var(--ct-acc-muted);
}

.ct-acc-manage-pm-card--selected {
    border-color: var(--ct-acc-red);
    background: #FEF2F2;
}

.ct-acc-manage-pm-card--disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ct-acc-manage-pm-card__radio {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 2px solid var(--ct-acc-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ct-acc-manage-pm-card--selected .ct-acc-manage-pm-card__radio {
    border-color: var(--ct-acc-red);
}

.ct-acc-manage-pm-card--selected .ct-acc-manage-pm-card__radio::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ct-acc-red);
}

.ct-acc-manage-pm-card__info {
    flex: 1;
}

.ct-acc-manage-pm-card__title {
    font-family: var(--ct-acc-font-body);
    font-size: 15px;
    font-weight: 600;
    color: var(--ct-acc-dark);
}

.ct-acc-manage-pm-card__desc {
    font-size: 12px;
    color: var(--ct-acc-gray);
    margin-top: 2px;
}

.ct-acc-manage-pm-card__current {
    font-size: 11px;
    font-weight: 600;
    color: var(--ct-acc-success);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Stripe Element mount inside management overlay */
.ct-acc-manage-stripe-mount {
    margin: 20px 0;
    min-height: 100px;
}

/* Native manage button secondary style */
.ct-acc-subscription__manage-wrap .ct-acc-btn--secondary {
    font-size: 15px;
    padding: 14px 28px;
    box-shadow: none;
}

.ct-acc-subscription__manage-wrap .ct-acc-btn--secondary:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   Cancellation Banner (main page)
   ========================================================================== */

.ct-acc-cancel-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 16px;
}

.ct-acc-cancel-banner__icon {
    color: #DC2626;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.ct-acc-cancel-banner__icon svg {
    width: 24px;
    height: 24px;
}

.ct-acc-cancel-banner__content {
    flex: 1;
    min-width: 0;
}

.ct-acc-cancel-banner__title {
    font-family: var(--ct-acc-font-body);
    font-weight: 600;
    font-size: 14px;
    color: #991B1B;
}

.ct-acc-cancel-banner__text {
    font-size: 13px;
    color: #B91C1C;
    margin-top: 2px;
}

.ct-acc-cancel-banner__btn {
    flex-shrink: 0;
    background: #DC2626;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--ct-acc-font-body);
    transition: background 0.2s ease;
}

.ct-acc-cancel-banner__btn:hover {
    background: #B91C1C;
}

.ct-acc-cancel-banner__btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* "Wird gekündigt" status badge */
.ct-acc-subscription__status--canceling {
    background: #FEF3C7;
    color: #92400E;
}

/* ==========================================================================
   Pending Plan Change Banner
   ========================================================================== */

.ct-acc-change-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 16px;
}

.ct-acc-change-banner__icon {
    color: #2563EB;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.ct-acc-change-banner__icon svg {
    width: 24px;
    height: 24px;
}

.ct-acc-change-banner__content {
    flex: 1;
    min-width: 0;
}

.ct-acc-change-banner__title {
    font-family: var(--ct-acc-font-body);
    font-weight: 600;
    font-size: 14px;
    color: #1E40AF;
}

.ct-acc-change-banner__text {
    font-size: 13px;
    color: #1D4ED8;
    margin-top: 2px;
}

@media (max-width: 600px) {
    .ct-acc-change-banner {
        flex-direction: column;
        text-align: center;
    }
}

/* ==========================================================================
   Payment History (manage overlay)
   ========================================================================== */

.ct-acc-manage-history {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #E5E7EB;
}

.ct-acc-manage-history__title {
    font-family: var(--ct-acc-font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--ct-acc-dark);
    margin-bottom: 10px;
}

.ct-acc-manage-history__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #F3F4F6;
    font-size: 13px;
    color: var(--ct-acc-gray);
}

.ct-acc-manage-history__date {
    width: 90px;
}

.ct-acc-manage-history__amount {
    flex: 1;
    font-weight: 500;
    color: var(--ct-acc-text);
}

/* ==========================================================================
   Responsive — Cancel Banner
   ========================================================================== */

@media (max-width: 600px) {
    .ct-acc-cancel-banner {
        flex-direction: column;
        text-align: center;
    }

    .ct-acc-cancel-banner__btn {
        width: 100%;
    }
}

/* ==========================================================================
   Section Title (shared across profile sections)
   ========================================================================== */

.ct-acc-section-title {
    font-family: var(--ct-acc-font);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ct-acc-gray);
    margin: 0 0 12px 4px;
}

/* ==========================================================================
   Left-Panel Navigation Menu
   ========================================================================== */

.ct-acc-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 28px 0;
    padding: 0;
}

.ct-acc-nav__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 20px;
    background: #fff;
    border: none;
    border-radius: 14px;
    font-family: var(--ct-acc-font-body);
    font-size: 0.95rem;
    font-weight: 500;
    color: #78909C;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    text-align: left;
    width: 100%;
}

.ct-acc-nav__item:hover {
    background: rgba(241, 243, 245, 0.85);
    color: #546E7A;
    transform: translateX(2px);
}

.ct-acc-nav__item--active {
    background: rgba(239, 83, 80, 0.08);
    color: var(--ct-acc-red);
    font-weight: 600;
    box-shadow: inset 0 0 0 1.5px rgba(239, 83, 80, 0.2);
    border-left: 3px solid var(--ct-acc-red);
    padding-left: 17px;
}

.ct-acc-nav__item--active:hover {
    background: rgba(239, 83, 80, 0.12);
}

.ct-acc-nav__icon {
    display: flex;
    align-items: center;
    opacity: 0.45;
    transition: opacity 0.2s ease, color 0.2s ease;
}

.ct-acc-nav__item:hover .ct-acc-nav__icon {
    opacity: 0.7;
}

.ct-acc-nav__item--active .ct-acc-nav__icon {
    opacity: 1;
    color: var(--ct-acc-red);
}

.ct-acc-nav__icon svg {
    width: 20px;
    height: 20px;
}

.ct-acc-nav__label {
    white-space: nowrap;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
}

.ct-acc-nav__divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.06);
    margin: 6px 8px;
}

.ct-acc-nav__group-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #90A4AE;
    padding: 4px 20px 2px;
}

.ct-acc-nav__item--action {
    color: #90A4AE;
    font-weight: 400;
    font-size: 0.88rem;
}

.ct-acc-nav__item--action:hover {
    color: var(--ct-acc-red);
}

.ct-split-brand--collapsed .ct-acc-nav__divider {
    margin: 6px 4px;
}

.ct-split-brand--collapsed .ct-acc-nav__group-label {
    display: none;
}

/* ==========================================================================
   Adventure Timeline
   ========================================================================== */

.ct-acc-adv-timeline {
    display: flex;
    flex-direction: column;
    position: relative;
    padding-left: 32px;
    padding-bottom: 32px;
    max-width: 680px;
    overflow: visible;
}

.ct-acc-adv-timeline::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, var(--ct-acc-border, #E5E7EB), transparent);
    border-radius: 3px;
}

.ct-acc-adv-timeline__item {
    position: relative;
    margin-bottom: 24px;
}

.ct-acc-adv-timeline__dot {
    position: absolute;
    left: -25px;
    top: 24px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 3px solid var(--ct-acc-bg, #fff);
    z-index: 1;
}

.ct-acc-adv-timeline__dot--important {
    background: #F44336 !important;
    box-shadow: 0 0 0 2px #F44336, 0 0 12px rgba(244,67,54,0.4);
    animation: ct-adv-dot-pulse 2s ease-in-out infinite;
}

@keyframes ct-adv-dot-pulse {
    0%, 100% { box-shadow: 0 0 0 2px #F44336, 0 0 12px rgba(244,67,54,0.4); }
    50% { box-shadow: 0 0 0 4px rgba(244,67,54,0.3), 0 0 20px rgba(244,67,54,0.2); }
}

/* --- Adventure Timing: Card states --- */
.ct-acc-adv-card--scheduled { opacity: 0.65; position: relative; }
.ct-acc-adv-card--scheduled::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px dashed #F59E0B;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
}
.ct-acc-adv-card--expired { opacity: 0.45; }

/* --- Adventure Timing: Timeline states --- */
.ct-acc-adv-timeline__item--scheduled,
.ct-acc-adv-timeline__item--expired { opacity: 0.65; }
.ct-acc-adv-timeline__dot--scheduled { background: #F59E0B !important; }
.ct-acc-adv-timeline__dot--expired { background: #9CA3AF !important; }

/* --- Adventure Timing: Card badges --- */
.ct-acc-adv-card__timing-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}
.ct-acc-adv-card__timing-badge svg { flex-shrink: 0; width: 12px; height: 12px; }
.ct-acc-adv-card__timing-badge--scheduled { background: #FEF3C7; color: #92400E; }
.ct-acc-adv-card__timing-badge--scheduled svg { stroke: #92400E; }
.ct-acc-adv-card__timing-badge--expired { background: #FEE2E2; color: #991B1B; }
.ct-acc-adv-card__timing-badge--expired svg { stroke: #991B1B; }
.ct-acc-adv-card__timing-badge--expiring { background: #DBEAFE; color: #1E40AF; }
.ct-acc-adv-card__timing-badge--expiring svg { stroke: #1E40AF; }

/* --- Adventure Timing: Viewer timing block --- */
.ct-acc-adv-viewer__timing {
    background: var(--ct-acc-bg-raised, #f9fafb);
    border: 1px solid var(--ct-acc-border, #e2e8f0);
    border-radius: 12px;
    padding: 12px 16px;
    margin: 12px 0 4px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ct-acc-adv-viewer__timing-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ct-acc-text);
}
.ct-acc-adv-viewer__timing-row svg { flex-shrink: 0; }
.ct-acc-adv-viewer__timing-row--scheduled svg { stroke: #F59E0B; }
.ct-acc-adv-viewer__timing-row--expired svg { stroke: #EF4444; }
.ct-acc-adv-viewer__timing-row--active svg { stroke: #3B82F6; }
.ct-acc-adv-viewer__timing-hint {
    font-size: 11.5px;
    color: var(--ct-acc-muted);
    padding-left: 22px;
}

.ct-acc-adv-timeline__date {
    position: relative;
    font-size: 14px;
    font-weight: 700;
    color: var(--ct-acc-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 16px;
    padding: 4px 0;
}

.ct-acc-adv-timeline__card {
    width: 100%;
}

/* ==========================================================================
   Adventure Cards — Shared
   ========================================================================== */

.ct-acc-adv-card {
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ct-acc-adv-card:hover {
    transform: translateY(-2px);
}

.ct-acc-adv-card__att-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ct-acc-bg-inset);
    border: 1px solid var(--ct-acc-border);
    flex-shrink: 0;
}
.ct-acc-adv-card__att-icon svg {
    width: 16px;
    height: 16px;
}

.ct-acc-adv-card__sep {
    opacity: 0.5;
}

.ct-acc-adv-card__pin-inline svg {
    vertical-align: -1px;
}

/* Type pill (frosted glass on overlay) */
.ct-acc-adv-card__type-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    margin-bottom: 10px;
}
.ct-acc-adv-card__type-pill svg {
    stroke: #fff;
}
.ct-acc-adv-card__type-pill--inline {
    background: color-mix(in srgb, var(--pill-color, #607D8B) 15%, transparent);
    color: var(--pill-color, #607D8B);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    margin-bottom: 12px;
}
.ct-acc-adv-card__type-pill--inline svg {
    stroke: var(--pill-color, #607D8B);
}

/* Importance=1 small orange badge */
.ct-acc-adv-card__imp1-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    margin-left: 6px;
    vertical-align: middle;
}

/* Tag pills — subtle chip style */
.ct-acc-adv-card__tag {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
}

/* ==========================================================================
   Adventure Cards — Hero (compact image + structured body)
   ========================================================================== */

.ct-acc-adv-card--hero {
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

.ct-acc-adv-card--hero:hover {
    box-shadow: 0 12px 40px rgba(0,0,0,0.18);
}

.ct-acc-adv-card__hero-img {
    width: 100%;
    height: 360px;
    object-fit: cover;
    display: block;
}

.ct-acc-adv-card__hero-img--gradient {
    height: auto;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ct-acc-adv-card__hero-gradient-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ct-acc-adv-card__gallery-count {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ct-acc-adv-card__gallery-count svg {
    width: 14px;
    height: 14px;
}

/* Hero body — structured white area below image */
.ct-acc-adv-card__hero-body {
    padding: 16px 18px 18px;
    background: var(--ct-acc-card-bg, #fff);
}

.ct-acc-adv-card__hero-type-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.ct-acc-adv-card__hero-date {
    font-size: 13px;
    color: var(--ct-acc-muted);
    margin-left: auto;
    white-space: nowrap;
}

.ct-acc-adv-card__hero-text {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--ct-acc-text);
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 10px;
}

.ct-acc-adv-card__hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.ct-acc-adv-card__hero-tags .ct-acc-adv-card__tag {
    background: color-mix(in srgb, var(--ct-acc-text) 6%, transparent);
    color: var(--ct-acc-muted);
    border: none;
}

.ct-acc-adv-card__hero-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--ct-acc-muted);
    border-top: 1px solid var(--ct-acc-border, #e5e7eb);
    padding-top: 12px;
    margin-top: 2px;
}

.ct-acc-adv-card__hero-footer-icons {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

/* Legacy overlay/bottom — hide for with-image cards */
.ct-acc-adv-card__hero-overlay { display: none; }
.ct-acc-adv-card__hero-bottom { display: none; }

/* Responsive hero sizing */
@media (min-width: 768px) {
    .ct-acc-adv-card__hero-img { height: 400px; }
    .ct-acc-adv-card__hero-img--gradient { min-height: 240px; }
}
@media (min-width: 1200px) {
    .ct-acc-adv-card__hero-img { height: 440px; }
    .ct-acc-adv-card__hero-img--gradient { min-height: 280px; }
}

/* ==========================================================================
   Adventure Cards — Important (Compact Carousel + Structured Body)
   ========================================================================== */

.ct-acc-adv-card--important {
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 0 0 2px rgba(244,67,54,0.5), 0 0 20px rgba(244,67,54,0.25), 0 8px 32px rgba(0,0,0,0.12);
}

.ct-acc-adv-card--important:hover {
    box-shadow: 0 0 0 2px rgba(244,67,54,0.6), 0 0 28px rgba(244,67,54,0.3), 0 12px 40px rgba(0,0,0,0.18);
}

.ct-acc-adv-card__carousel {
    position: relative;
    height: 360px;
    overflow: hidden;
    background: #1a1a1a;
}

.ct-acc-adv-card__slides {
    display: flex;
    height: 100%;
    animation-duration: 12s; /* fallback; overridden inline per-card */
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.ct-acc-adv-card__slide-img {
    height: 360px;
    object-fit: cover;
    flex-shrink: 0;
}

.ct-acc-adv-card__carousel-fallback {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Alert pill — static in body for with-image, absolute for no-image */
.ct-acc-adv-card__alert-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    background: #F44336;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

@keyframes ct-adv-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(244,67,54,0.4); }
    50% { box-shadow: 0 0 0 6px rgba(244,67,54,0); }
}

/* Golden star — hidden by default (shown only in no-image) */
.ct-acc-adv-card__imp-star {
    display: none;
}

/* Instagram-style progress bar */
.ct-acc-adv-card__progress {
    position: absolute;
    top: 8px;
    left: 10px;
    right: 10px;
    display: flex;
    gap: 3px;
    z-index: 3;
}
.ct-acc-adv-card__progress-seg {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: rgba(255,255,255,0.35);
    overflow: hidden;
}
.ct-acc-adv-card__progress-seg::after {
    content: '';
    display: block;
    height: 100%;
    background: #fff;
    border-radius: 2px;
    transform-origin: left;
    transform: scaleX(0);
    animation-duration: var(--progress-total);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
/* Progress fill keyframes per segment count — synced with slide keyframes */
/* 2 segments: each fills 0→100% during its half */
.ct-acc-adv-card__progress[data-count="2"] .ct-acc-adv-card__progress-seg:nth-child(1)::after { animation-name: ct-adv-pfill-s0-of-2; }
.ct-acc-adv-card__progress[data-count="2"] .ct-acc-adv-card__progress-seg:nth-child(2)::after { animation-name: ct-adv-pfill-s1-of-2; }
@keyframes ct-adv-pfill-s0-of-2 {
    0% { transform: scaleX(0); }
    42% { transform: scaleX(1); }
    42.01%, 100% { transform: scaleX(0); }
}
@keyframes ct-adv-pfill-s1-of-2 {
    0%, 49% { transform: scaleX(0); }
    92% { transform: scaleX(1); }
    92.01%, 100% { transform: scaleX(0); }
}
/* 3 segments */
.ct-acc-adv-card__progress[data-count="3"] .ct-acc-adv-card__progress-seg:nth-child(1)::after { animation-name: ct-adv-pfill-s0-of-3; }
.ct-acc-adv-card__progress[data-count="3"] .ct-acc-adv-card__progress-seg:nth-child(2)::after { animation-name: ct-adv-pfill-s1-of-3; }
.ct-acc-adv-card__progress[data-count="3"] .ct-acc-adv-card__progress-seg:nth-child(3)::after { animation-name: ct-adv-pfill-s2-of-3; }
@keyframes ct-adv-pfill-s0-of-3 {
    0% { transform: scaleX(0); }
    28% { transform: scaleX(1); }
    28.01%, 100% { transform: scaleX(0); }
}
@keyframes ct-adv-pfill-s1-of-3 {
    0%, 32% { transform: scaleX(0); }
    61% { transform: scaleX(1); }
    61.01%, 100% { transform: scaleX(0); }
}
@keyframes ct-adv-pfill-s2-of-3 {
    0%, 65% { transform: scaleX(0); }
    94% { transform: scaleX(1); }
    94.01%, 100% { transform: scaleX(0); }
}
/* 4 segments */
.ct-acc-adv-card__progress[data-count="4"] .ct-acc-adv-card__progress-seg:nth-child(1)::after { animation-name: ct-adv-pfill-s0-of-4; }
.ct-acc-adv-card__progress[data-count="4"] .ct-acc-adv-card__progress-seg:nth-child(2)::after { animation-name: ct-adv-pfill-s1-of-4; }
.ct-acc-adv-card__progress[data-count="4"] .ct-acc-adv-card__progress-seg:nth-child(3)::after { animation-name: ct-adv-pfill-s2-of-4; }
.ct-acc-adv-card__progress[data-count="4"] .ct-acc-adv-card__progress-seg:nth-child(4)::after { animation-name: ct-adv-pfill-s3-of-4; }
@keyframes ct-adv-pfill-s0-of-4 {
    0% { transform: scaleX(0); }
    20% { transform: scaleX(1); }
    20.01%, 100% { transform: scaleX(0); }
}
@keyframes ct-adv-pfill-s1-of-4 {
    0%, 24% { transform: scaleX(0); }
    45% { transform: scaleX(1); }
    45.01%, 100% { transform: scaleX(0); }
}
@keyframes ct-adv-pfill-s2-of-4 {
    0%, 49% { transform: scaleX(0); }
    70% { transform: scaleX(1); }
    70.01%, 100% { transform: scaleX(0); }
}
@keyframes ct-adv-pfill-s3-of-4 {
    0%, 74% { transform: scaleX(0); }
    95% { transform: scaleX(1); }
    95.01%, 100% { transform: scaleX(0); }
}
/* 5 segments */
.ct-acc-adv-card__progress[data-count="5"] .ct-acc-adv-card__progress-seg:nth-child(1)::after { animation-name: ct-adv-pfill-s0-of-5; }
.ct-acc-adv-card__progress[data-count="5"] .ct-acc-adv-card__progress-seg:nth-child(2)::after { animation-name: ct-adv-pfill-s1-of-5; }
.ct-acc-adv-card__progress[data-count="5"] .ct-acc-adv-card__progress-seg:nth-child(3)::after { animation-name: ct-adv-pfill-s2-of-5; }
.ct-acc-adv-card__progress[data-count="5"] .ct-acc-adv-card__progress-seg:nth-child(4)::after { animation-name: ct-adv-pfill-s3-of-5; }
.ct-acc-adv-card__progress[data-count="5"] .ct-acc-adv-card__progress-seg:nth-child(5)::after { animation-name: ct-adv-pfill-s4-of-5; }
@keyframes ct-adv-pfill-s0-of-5 {
    0% { transform: scaleX(0); }
    16% { transform: scaleX(1); }
    16.01%, 100% { transform: scaleX(0); }
}
@keyframes ct-adv-pfill-s1-of-5 {
    0%, 19% { transform: scaleX(0); }
    36% { transform: scaleX(1); }
    36.01%, 100% { transform: scaleX(0); }
}
@keyframes ct-adv-pfill-s2-of-5 {
    0%, 39% { transform: scaleX(0); }
    56% { transform: scaleX(1); }
    56.01%, 100% { transform: scaleX(0); }
}
@keyframes ct-adv-pfill-s3-of-5 {
    0%, 59% { transform: scaleX(0); }
    76% { transform: scaleX(1); }
    76.01%, 100% { transform: scaleX(0); }
}
@keyframes ct-adv-pfill-s4-of-5 {
    0%, 79% { transform: scaleX(0); }
    96% { transform: scaleX(1); }
    96.01%, 100% { transform: scaleX(0); }
}

/* Load-more button */
.ct-acc-adv-loadmore-wrap {
    display: flex;
    justify-content: center;
    padding: 24px 0 8px;
}
.ct-acc-adv-loadmore-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 28px;
    border-radius: 100px;
    border: 1.5px solid var(--ct-acc-border);
    background: var(--ct-acc-bg-raised);
    color: var(--ct-acc-text);
    font-size: 14px;
    font-weight: 600;
    font-family: var(--ct-acc-font);
    cursor: pointer;
    transition: all 0.2s ease;
}
.ct-acc-adv-loadmore-btn:hover {
    background: var(--ct-acc-gray-light);
    border-color: var(--ct-acc-muted);
}

/* Receiver device avatars */
.ct-acc-adv-card__receiver-devices {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}
.ct-acc-adv-card__receiver-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid var(--ct-acc-border);
}
.ct-acc-adv-card__receiver-avatar--icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ct-acc-bg-inset);
}
.ct-acc-adv-card__receiver-avatar--icon svg {
    width: 18px;
    height: 18px;
}

/* Important card body */
.ct-acc-adv-card__imp-body {
    padding: 16px 18px 18px;
    background: var(--ct-acc-card-bg, #fff);
}

/* Alert row: WICHTIG badge + date */
.ct-acc-adv-card__imp-alert-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.ct-acc-adv-card__imp-date {
    font-size: 13px;
    color: var(--ct-acc-muted);
    margin-left: auto;
    white-space: nowrap;
}

.ct-acc-adv-card__imp-text {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ct-acc-text);
    margin-bottom: 10px;
}

.ct-acc-adv-card__imp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.ct-acc-adv-card__imp-tags .ct-acc-adv-card__tag {
    background: color-mix(in srgb, var(--ct-acc-text) 6%, transparent);
    color: var(--ct-acc-muted);
    border: none;
}

.ct-acc-adv-card__imp-meta {
    font-size: 12px;
    color: var(--ct-acc-muted);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

/* Footer with separator */
.ct-acc-adv-card__imp-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--ct-acc-muted);
    border-top: 1px solid var(--ct-acc-border, #e5e7eb);
    padding-top: 12px;
    margin-top: 2px;
}

.ct-acc-adv-card__imp-footer-icons {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

/* Responsive carousel sizing */
@media (min-width: 768px) {
    .ct-acc-adv-card__carousel { height: 400px; }
    .ct-acc-adv-card__slide-img { height: 400px; }
}
@media (min-width: 1200px) {
    .ct-acc-adv-card__carousel { height: 440px; }
    .ct-acc-adv-card__slide-img { height: 440px; }
}

/* Hero card carousel — remove the red important-card glow */
.ct-acc-adv-card__carousel--hero {
    background: #1a1a1a;
}

/* Carousel slide animations for different image counts */
@keyframes ct-adv-slide-2 {
    0%, 42% { transform: translateX(0); }
    50%, 92% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}
@keyframes ct-adv-slide-3 {
    0%, 28% { transform: translateX(0); }
    33%, 61% { transform: translateX(-33.33%); }
    66%, 94% { transform: translateX(-66.66%); }
    100% { transform: translateX(0); }
}
@keyframes ct-adv-slide-4 {
    0%, 20% { transform: translateX(0); }
    25%, 45% { transform: translateX(-25%); }
    50%, 70% { transform: translateX(-50%); }
    75%, 95% { transform: translateX(-75%); }
    100% { transform: translateX(0); }
}
@keyframes ct-adv-slide-5 {
    0%, 16% { transform: translateX(0); }
    20%, 36% { transform: translateX(-20%); }
    40%, 56% { transform: translateX(-40%); }
    60%, 76% { transform: translateX(-60%); }
    80%, 96% { transform: translateX(-80%); }
    100% { transform: translateX(0); }
}

/* ==========================================================================
   Adventure Cards — Social Timeline Card Layout
   ========================================================================== */

/* --- Card Header: who + when + badges --- */
.ct-acc-adv-card__card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px 12px;
}
.ct-acc-adv-card__card-header-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
    border: 2.5px solid var(--ct-acc-border, #e5e7eb);
}
.ct-acc-adv-card__card-header-avatar--icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ct-acc-bg-inset);
}
.ct-acc-adv-card__card-header-avatar--icon svg {
    width: 22px;
    height: 22px;
}
.ct-acc-adv-card__card-header-info {
    flex: 1;
    min-width: 0;
}
.ct-acc-adv-card__card-header-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--ct-acc-text);
    line-height: 1.2;
}
.ct-acc-adv-card__card-header-meta {
    font-size: 13px;
    color: var(--ct-acc-muted);
    margin-top: 2px;
}
.ct-acc-adv-card__card-header-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* --- Card Text: THE MESSAGE (22px bold, senior-friendly) --- */
.ct-acc-adv-card__card-text {
    padding: 12px 18px 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ct-acc-text);
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Rich Attachments --- */
.ct-acc-adv-card__card-attachments {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 18px 0;
}

/* Emotion chips */
.ct-acc-adv-card__att-emotions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ct-acc-adv-card__att-emotion-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 20px;
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    font-size: 14px;
    font-weight: 600;
    color: #92400E;
}
.ct-acc-adv-card__att-emotion-emoji {
    font-size: 16px;
}

/* Location mini-card */
.ct-acc-adv-card__att-location {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 14px;
    background: var(--ct-acc-bg-inset);
    border: 1px solid var(--ct-acc-border);
    font-size: 14px;
    color: var(--ct-acc-text);
    font-weight: 500;
    line-height: 1.3;
}
.ct-acc-adv-card__att-location-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #FFF3F0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ct-acc-adv-card__att-location-icon svg {
    width: 18px;
    height: 18px;
}
.ct-acc-adv-card__att-location-text {
    flex: 1;
    min-width: 0;
}
.ct-acc-adv-card__att-location-label {
    font-size: 11px;
    color: var(--ct-acc-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Weather chip */
.ct-acc-adv-card__att-weather {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 14px;
    background: var(--ct-acc-bg-inset);
    border: 1px solid var(--ct-acc-border);
    font-size: 14px;
    font-weight: 500;
    color: var(--ct-acc-text);
}
.ct-acc-adv-card__att-weather-icon svg {
    width: 20px;
    height: 20px;
}
.ct-acc-adv-card__att-weather-temp {
    font-weight: 700;
}
.ct-acc-adv-card__att-weather-desc {
    color: var(--ct-acc-muted);
}

/* Generic attachment chips row */
.ct-acc-adv-card__att-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ct-acc-adv-card__att-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 12px;
    background: var(--ct-acc-bg-inset);
    border: 1px solid var(--ct-acc-border);
    font-size: 13px;
    font-weight: 500;
    color: var(--ct-acc-muted);
}
.ct-acc-adv-card__att-chip svg {
    width: 16px;
    height: 16px;
}

/* --- Card Tags --- */
.ct-acc-adv-card__card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 18px 0;
}
.ct-acc-adv-card__card-tags .ct-acc-adv-card__tag {
    background: color-mix(in srgb, var(--ct-acc-text) 6%, transparent);
    color: var(--ct-acc-muted);
    border: none;
}

/* --- Card Footer: receivers + gallery count --- */
.ct-acc-adv-card__card-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    margin-top: 12px;
    border-top: 1px solid var(--ct-acc-border, #e5e7eb);
    font-size: 12px;
    color: var(--ct-acc-muted);
}
.ct-acc-adv-card__card-footer-label {
    font-weight: 500;
}
.ct-acc-adv-card__card-footer-gallery {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    font-weight: 600;
}
.ct-acc-adv-card__card-footer-gallery svg {
    width: 14px;
    height: 14px;
}

/* --- Card footer: compact reaction badges --- */
.ct-acc-adv-card__card-reactions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}
.ct-acc-adv-card__card-reaction {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 6px;
    border-radius: 10px;
    background: var(--ct-acc-surface, #F3F4F6);
    font-size: 13px;
    line-height: 1;
}
.ct-acc-adv-card__card-reaction-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--ct-acc-muted);
}
[data-ct-theme="dark"] .ct-acc-adv-card__card-reaction {
    background: #1e293b;
}

/* --- Acknowledgement pills (card + viewer) --- */
.ct-acc-adv-ack-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
}
.ct-acc-adv-ack-pill svg { flex-shrink: 0; }
.ct-acc-adv-ack-pill--pending {
    background: #F44336;
    color: #fff;
}
.ct-acc-adv-ack-pill--confirmed {
    background: #4CAF50;
    color: #fff;
}
.ct-acc-adv-card__ack-pills {
    padding: 6px 16px 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ct-acc-adv-viewer__ack-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 0;
}
.ct-acc-adv-viewer__ack-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
}
.ct-acc-adv-viewer__ack-section {
    background: var(--ct-acc-bg-raised, #f9fafb);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 8px;
}
[data-ct-theme="dark"] .ct-acc-adv-viewer__ack-section {
    background: rgba(255,255,255,0.04);
}

/* --- Dark Mode for new card elements --- */
[data-ct-theme="dark"] .ct-acc-adv-card__att-emotion-chip {
    background: rgba(251,191,36,0.1);
    border-color: rgba(251,191,36,0.2);
    color: #FDE68A;
}
[data-ct-theme="dark"] .ct-acc-adv-card__att-location-icon {
    background: rgba(239,83,80,0.12);
}
[data-ct-theme="dark"] .ct-acc-adv-card__card-header-avatar {
    border-color: #334155;
}
[data-ct-theme="dark"] .ct-acc-adv-card__card-footer {
    border-color: #334155;
}

/* ==========================================================================
   Adventure Viewer — Immersive Gallery (Design 10)
   ========================================================================== */

/* ── Overlay overrides ── */
.ct-acc-overlay--adventure-viewer {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.ct-acc-overlay--adventure-viewer .ct-acc-overlay__dialog {
    position: fixed;
    inset: 40px auto auto 50%;
    transform: translateX(-50%) translateY(20px) scale(0.98);
    width: min(75vw, 800px);
    max-height: calc(100vh - 60px);
    border-radius: 20px;
    background: #111827;
    overflow: hidden;
    box-shadow: 0 25px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
}
.ct-acc-overlay--adventure-viewer.active .ct-acc-overlay__dialog {
    transform: translateX(-50%) translateY(0) scale(1);
}
.ct-acc-overlay--adventure-viewer .ct-acc-overlay__header {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 10;
    background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 100%);
    border-bottom: none;
    padding: 16px 20px;
}
.ct-acc-overlay--adventure-viewer .ct-acc-overlay__back,
.ct-acc-overlay--adventure-viewer .ct-acc-overlay__close {
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
}
.ct-acc-overlay--adventure-viewer .ct-acc-overlay__back:hover,
.ct-acc-overlay--adventure-viewer .ct-acc-overlay__close:hover {
    background: rgba(255,255,255,0.3);
}
.ct-acc-overlay--adventure-viewer .ct-con-edit-btn {
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    box-shadow: none;
}
.ct-acc-overlay--adventure-viewer .ct-con-edit-btn:hover {
    background: rgba(255,255,255,0.3);
    box-shadow: none;
    transform: none;
}
.ct-acc-overlay--adventure-viewer .ct-con-edit-btn svg { stroke: #fff; }
.ct-acc-overlay--adventure-viewer .ct-acc-overlay__title {
    color: #fff;
}
.ct-acc-overlay--adventure-viewer .ct-acc-overlay__body {
    padding: 0;
    background: #111827;
    border-radius: 0 0 20px 20px;
}
.ct-acc-overlay--adventure-viewer .ct-acc-overlay__body-inner {
    max-width: none;
}
.ct-acc-overlay--adventure-viewer .ct-acc-overlay__footer {
    display: none;
}

/* ── Gallery hero ── */
.ct-acc-adv-viewer__gallery-hero {
    position: relative;
    height: 55vh;
    min-height: 280px;
    max-height: 500px;
    overflow: hidden;
    background: #111827;
}
.ct-acc-adv-viewer__gallery-track {
    display: flex;
    height: 100%;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.ct-acc-adv-viewer__gallery-slide {
    flex: 0 0 100%;
    height: 100%;
    cursor: pointer;
}
.ct-acc-adv-viewer__gallery-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    -webkit-user-drag: none;
}
.ct-acc-adv-viewer__gallery-counter {
    position: absolute;
    bottom: 40px;
    right: 16px;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    z-index: 5;
}
.ct-acc-adv-viewer__gallery-dots {
    position: absolute;
    bottom: 40px;
    left: 0; right: 0;
    display: flex;
    justify-content: center;
    gap: 6px;
    z-index: 5;
}
.ct-acc-adv-viewer__gallery-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    cursor: pointer;
    transition: all 0.25s ease;
}
.ct-acc-adv-viewer__gallery-dot--active {
    background: #fff;
    transform: scale(1.25);
}
.ct-acc-adv-viewer__gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    transition: background 0.2s;
}
.ct-acc-adv-viewer__gallery-nav:hover {
    background: rgba(0,0,0,0.55);
}
.ct-acc-adv-viewer__gallery-nav--prev { left: 12px; }
.ct-acc-adv-viewer__gallery-nav--next { right: 12px; }

/* ── Gallery hero variants ── */
.ct-acc-adv-viewer__gallery-hero--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    min-height: 160px;
    max-height: 200px;
}
.ct-acc-adv-viewer__gallery-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,0.5);
    font-size: 14px;
}
.ct-acc-adv-viewer__gallery-placeholder svg {
    width: 40px;
    height: 40px;
    opacity: 0.4;
}
.ct-acc-adv-viewer__gallery-hero--scene {
    height: 160px;
    min-height: 120px;
    max-height: 160px;
}
.ct-acc-adv-viewer__scene-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
@keyframes ct-adv-scene-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}
.ct-adv-scene-float {
    animation: ct-adv-scene-float 8s ease-in-out infinite;
}

/* ── Content sheet ── */
.ct-acc-adv-viewer__sheet {
    background: var(--ct-acc-bg, #fff);
    border-radius: 24px 24px 0 0;
    margin-top: -24px;
    padding: 24px 20px 40px;
    position: relative;
    z-index: 2;
    min-height: 300px;
}

/* ── Author row ── */
.ct-acc-adv-viewer__author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.ct-acc-adv-viewer__author-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid currentColor;
    flex-shrink: 0;
}
.ct-acc-adv-viewer__author-avatar--icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ct-acc-surface, #f5f5f5);
}
.ct-acc-adv-viewer__author-avatar--icon svg {
    width: 22px;
    height: 22px;
}
.ct-acc-adv-viewer__author-info {
    flex: 1;
    min-width: 0;
}
.ct-acc-adv-viewer__author-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--ct-acc-dark, #111);
}
.ct-acc-adv-viewer__author-time {
    font-size: 12px;
    color: var(--ct-acc-muted, #888);
    margin-top: 2px;
}
.ct-acc-adv-viewer__type-badge {
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}
.ct-acc-adv-viewer__type-badge svg {
    width: 14px;
    height: 14px;
    vertical-align: -2px;
}
/* ── Importance badge on avatar (shared card + viewer) ── */
.ct-acc-adv-avatar-wrap {
    position: relative;
    flex-shrink: 0;
    display: inline-block;
}
.ct-acc-adv-imp-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2.5px solid var(--ct-acc-bg, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    z-index: 1;
}

/* ── Text ── */
.ct-acc-adv-viewer__text {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--ct-acc-text);
    white-space: pre-wrap;
    margin-bottom: 20px;
    word-break: break-word;
}

/* ── Emotions ── */
.ct-acc-adv-viewer__emotions {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 16px;
    margin-bottom: 4px;
}
.ct-acc-adv-viewer__emotions::-webkit-scrollbar { display: none; }
.ct-acc-adv-viewer__emotion-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border-radius: 20px;
    background: #FEF9C3;
    border: 1px solid #FFE082;
    color: #92400E;
    font-size: 13px;
    white-space: nowrap;
}
.ct-acc-adv-viewer__emotion-emoji {
    font-size: 16px;
    line-height: 1;
}

/* ── Mini-cards ── */
.ct-acc-adv-viewer__mini-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}
.ct-acc-adv-viewer__mini-cards--single {
    grid-template-columns: 1fr;
}
.ct-acc-adv-viewer__mini-card {
    background: var(--ct-acc-surface, #fafafa);
    border: 1px solid var(--ct-acc-border, #f0f0f0);
    border-radius: 12px;
    padding: 12px;
}
.ct-acc-adv-viewer__mini-card-icon {
    margin-bottom: 4px;
}
.ct-acc-adv-viewer__mini-card-icon svg {
    width: 18px;
    height: 18px;
}
.ct-acc-adv-viewer__mini-card-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ct-acc-muted, #aaa);
    font-weight: 600;
}
.ct-acc-adv-viewer__mini-card-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--ct-acc-text, #333);
    margin-top: 2px;
    word-break: break-word;
}

/* Full-width mini-cards */
.ct-acc-adv-viewer__mini-card--map,
.ct-acc-adv-viewer__mini-card--full {
    grid-column: 1 / -1;
}
.ct-acc-adv-viewer__mini-card--map {
    padding: 0;
    overflow: hidden;
}
.ct-acc-adv-viewer__map-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 200px;
}
.ct-acc-adv-viewer__map-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.ct-acc-adv-viewer__map-detail {
    padding: 10px 12px;
}

/* Dark mode */
[data-ct-theme="dark"] .ct-acc-adv-viewer__mini-card--map,
[data-ct-theme="dark"] .ct-acc-adv-viewer__mini-card--full {
    border-color: #334155;
}

/* ── Sections ── */
.ct-acc-adv-viewer__section {
    border-top: 1px solid var(--ct-acc-border, #F3F4F6);
    padding-top: 16px;
    margin-top: 16px;
}
.ct-acc-adv-viewer__section-title {
    font-family: var(--ct-acc-font-body);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ct-acc-gray);
    margin-bottom: 10px;
}

/* ── Attachment rows ── */
.ct-acc-adv-viewer__att-row {
    font-size: 14px;
    color: var(--ct-acc-text);
    margin-bottom: 6px;
}
.ct-acc-adv-viewer__link {
    display: block;
    color: #3B82F6;
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 4px;
    word-break: break-all;
}
.ct-acc-adv-viewer__link:hover {
    text-decoration: underline;
}
.ct-acc-adv-viewer__checklist {
    list-style: none;
    padding: 0;
    margin: 4px 0;
}
.ct-acc-adv-viewer__checklist li {
    font-size: 14px;
    color: var(--ct-acc-text);
    padding: 2px 0;
    padding-left: 20px;
    position: relative;
}
.ct-acc-adv-viewer__checklist li::before {
    content: '\2610';
    position: absolute;
    left: 0;
}
.ct-acc-adv-viewer__media-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
}
.ct-acc-adv-viewer__att-row svg,
.ct-acc-adv-viewer__media-item svg,
.ct-acc-adv-viewer__link svg {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ── Audio Waveform Player ── */
.ct-acc-adv-viewer__audio-player {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 24px;
    background: #fef2f2;
    border: 1px solid var(--ct-acc-red-light, #FF8A80);
    margin: 8px 0;
}
.ct-acc-adv-viewer__audio-player .__audio-play {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--ct-acc-red, #EF5350);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    transition: transform 0.15s, background 0.15s;
}
.ct-acc-adv-viewer__audio-player .__audio-play:hover {
    transform: scale(1.08);
    background: var(--ct-acc-red-hover, #E53935);
}
.ct-acc-adv-viewer__audio-player .__audio-time {
    font-family: var(--ct-acc-font-body);
    font-size: 13px;
    font-weight: 600;
    color: #607D8B;
    min-width: 30px;
    text-align: center;
    flex-shrink: 0;
}
.ct-acc-adv-viewer__audio-player .__waveform {
    flex: 1;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    min-width: 0;
}
.ct-acc-adv-viewer__audio-player .__waveform-bar {
    flex: 1 1 0;
    min-width: 2px;
    max-width: 8px;
    border-radius: 2px;
    background: var(--ct-acc-red, #EF5350);
    opacity: 0.3;
    transition: opacity 0.12s;
}
.ct-acc-adv-viewer__audio-player .__waveform-bar.--played {
    opacity: 1;
}
.ct-acc-adv-viewer__audio-player--playing .__waveform-bar.--played {
    animation: ct-bar-pulse 0.6s ease-in-out infinite alternate;
}
@keyframes ct-bar-pulse {
    0% { opacity: 0.85; }
    100% { opacity: 1; }
}

/* ── Video Card ── */
.ct-acc-adv-viewer__video-card {
    border-radius: 12px;
    overflow: hidden;
    background: #1a1a2e;
    cursor: pointer;
    margin: 8px 0;
    transition: transform 0.15s, box-shadow 0.15s;
}
.ct-acc-adv-viewer__video-card:hover {
    transform: scale(1.01);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.ct-acc-adv-viewer__video-card .__video-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #1a1a2e 0%, #2d2d44 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ct-acc-adv-viewer__video-card .__video-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.ct-acc-adv-viewer__video-card .__video-play-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
    transition: transform 0.15s;
}
.ct-acc-adv-viewer__video-card:hover .__video-play-overlay {
    transform: scale(1.08);
}
.ct-acc-adv-viewer__video-card .__video-duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-family: var(--ct-acc-font-body);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    backdrop-filter: blur(4px);
}
.ct-acc-adv-viewer__video-card .__video-label {
    padding: 8px 12px;
    font-family: var(--ct-acc-font-body);
    font-size: 13px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ct-acc-adv-viewer__video-card .__video-label svg {
    width: 14px;
    height: 14px;
}

/* ── Video Lightbox ── */
.ct-acc-lightbox__video {
    position: relative;
    z-index: 1;
    width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    background: #000;
    border-radius: 4px;
}

/* ── Comments ── */
.ct-acc-adv-viewer__comment {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}
.ct-acc-adv-viewer__comment-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ct-acc-surface, #E5E7EB);
    color: var(--ct-acc-gray, #6B7280);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}
.ct-acc-adv-viewer__comment-body {
    flex: 1;
    min-width: 0;
}
.ct-acc-adv-viewer__comment-author {
    font-size: 13px;
    font-weight: 700;
    color: var(--ct-acc-dark, #333);
}
.ct-acc-adv-viewer__comment-text {
    font-size: 14px;
    color: var(--ct-acc-text, #555);
    margin-top: 2px;
    word-break: break-word;
}
.ct-acc-adv-viewer__comment-time {
    font-size: 11px;
    color: var(--ct-acc-muted, #bbb);
    margin-top: 3px;
}

/* ── Reactions ── */
#ct-adv-reactions-section:empty {
    display: none;
}
.ct-acc-adv-viewer__reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ct-acc-adv-viewer__reaction {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 20px;
    background: var(--ct-acc-surface, #F3F4F6);
    font-size: 16px;
    cursor: default;
    border: none;
    transition: transform 0.15s, background 0.15s;
}
.ct-acc-adv-viewer__reaction--clickable {
    cursor: pointer;
}
.ct-acc-adv-viewer__reaction--clickable:hover {
    background: var(--ct-acc-hover, #E5E7EB);
    transform: scale(1.08);
}
.ct-acc-adv-viewer__reaction--clickable:active {
    transform: scale(0.95);
}
.ct-acc-adv-viewer__reaction-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--ct-acc-gray, #6B7280);
}

/* ── Action Buttons (Reagieren / Kommentieren) ── */
.ct-acc-adv-viewer__actions {
    display: flex;
    gap: 10px;
    margin: 16px 0 4px;
}
.ct-acc-adv-viewer__action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    border: 1.5px solid var(--ct-acc-border, #D1D5DB);
    background: transparent;
    color: var(--ct-acc-text, #555);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
    font-family: inherit;
}
.ct-acc-adv-viewer__action-btn svg {
    flex-shrink: 0;
}
.ct-acc-adv-viewer__action-btn:hover {
    background: var(--ct-acc-surface, #F3F4F6);
    border-color: var(--ct-acc-gray, #6B7280);
}
.ct-acc-adv-viewer__action-btn:active {
    transform: scale(0.96);
}

/* ── Reaction Picker Popup ── */
.ct-adv-react-picker-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100002;
    background: transparent;
}
.ct-adv-react-picker {
    background: var(--ct-acc-bg-raised, #fff);
    border-radius: 16px;
    padding: 12px 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
    display: flex;
    gap: 8px;
    z-index: 100003;
    transform: scale(0.3);
    opacity: 0;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.15s ease;
    transform-origin: center bottom;
}
.ct-adv-react-picker--open {
    transform: scale(1);
    opacity: 1;
}
.ct-adv-react-picker__emoji {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 16px;
    border: none;
    background: transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.15s, background 0.12s;
}
.ct-adv-react-picker__emoji-icon {
    font-size: 28px;
    line-height: 1;
}
.ct-adv-react-picker__emoji-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--ct-acc-gray, #6B7280);
    white-space: nowrap;
}
.ct-adv-react-picker__emoji:hover {
    transform: scale(1.08);
    background: var(--ct-acc-surface, #F3F4F6);
}
.ct-adv-react-picker__emoji:active {
    transform: scale(0.95);
}
@keyframes ct-react-emoji-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.5); }
    100% { transform: scale(1); }
}
.ct-adv-react-picker__emoji--pop {
    animation: ct-react-emoji-pop 0.25s ease;
}

/* ── Device Picker (shown after emoji selection) ── */
.ct-adv-device-picker {
    background: var(--ct-acc-bg-raised, #fff);
    border-radius: 16px;
    padding: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
    z-index: 100003;
    min-width: 200px;
    max-width: 280px;
    transform: scale(0.3);
    opacity: 0;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.15s ease;
    transform-origin: center top;
}
.ct-adv-device-picker--open {
    transform: scale(1);
    opacity: 1;
}
.ct-adv-device-picker__title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ct-acc-gray, #6B7280);
    padding: 0 8px 8px;
}
.ct-adv-device-picker__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px;
    border: none;
    background: transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.12s;
    text-align: left;
}
.ct-adv-device-picker__item:hover {
    background: var(--ct-acc-surface, #F3F4F6);
}
.ct-adv-device-picker__item:active {
    background: var(--ct-acc-border, #E5E7EB);
}
.ct-adv-device-picker__avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--ct-acc-surface, #F3F4F6);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.ct-adv-device-picker__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}
.ct-adv-device-picker__avatar svg {
    width: 18px;
    height: 18px;
    color: var(--ct-acc-gray, #6B7280);
}
.ct-adv-device-picker__name {
    font-size: 14px;
    font-weight: 500;
    color: var(--ct-acc-text, #111827);
}

/* ── Comments Summary (in viewer) ── */
.ct-acc-adv-viewer__comments-summary {
    cursor: pointer;
    transition: background 0.15s;
    border-radius: 12px;
    padding: 12px;
    margin: -12px;
    margin-bottom: 0;
}
.ct-acc-adv-viewer__comments-summary:hover {
    background: var(--ct-acc-surface, #F3F4F6);
}
.ct-acc-adv-viewer__comments-more {
    font-size: 13px;
    color: var(--ct-acc-brand, #E53935);
    font-weight: 600;
    margin-top: 8px;
}

/* ── Comment Chat View ── */
.ct-acc-adv-comments {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}
.ct-acc-adv-comments__messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ct-acc-adv-comments__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: var(--ct-acc-muted, #bbb);
    font-size: 14px;
}
.ct-acc-adv-comments__bubble {
    display: flex;
    gap: 10px;
    max-width: 85%;
    align-self: flex-start;
}
.ct-acc-adv-comments__bubble--mine {
    align-self: flex-end;
    flex-direction: row-reverse;
}
.ct-acc-adv-comments__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ct-acc-surface, #E5E7EB);
    color: var(--ct-acc-gray, #6B7280);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}
.ct-acc-adv-comments__bubble-body {
    background: var(--ct-acc-surface, #F3F4F6);
    border-radius: 16px;
    padding: 10px 14px;
    min-width: 0;
}
.ct-acc-adv-comments__bubble--mine .ct-acc-adv-comments__bubble-body {
    background: var(--ct-acc-brand, #E53935);
    color: #fff;
}
.ct-acc-adv-comments__bubble-author {
    font-size: 12px;
    font-weight: 700;
    color: var(--ct-acc-dark, #333);
    margin-bottom: 2px;
}
.ct-acc-adv-comments__bubble--mine .ct-acc-adv-comments__bubble-author {
    color: rgba(255,255,255,0.8);
}
.ct-acc-adv-comments__bubble-text {
    font-size: 14px;
    word-break: break-word;
    line-height: 1.45;
}
.ct-acc-adv-comments__bubble-time {
    font-size: 11px;
    color: var(--ct-acc-muted, #bbb);
    margin-top: 4px;
}
.ct-acc-adv-comments__bubble--mine .ct-acc-adv-comments__bubble-time {
    color: rgba(255,255,255,0.6);
}
.ct-acc-adv-comments__error {
    font-size: 12px;
    color: #E53935;
    padding: 6px 12px;
    text-align: center;
}
.ct-acc-adv-comments__input-bar {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    padding: 12px 16px;
    border-top: 1px solid var(--ct-acc-border, #E5E7EB);
    background: var(--ct-acc-bg-raised, #fff);
}
.ct-acc-adv-comments__input {
    flex: 1;
    resize: none;
    border: 1.5px solid var(--ct-acc-border, #D1D5DB);
    border-radius: 20px;
    padding: 10px 16px;
    font-size: 14px;
    font-family: inherit;
    background: var(--ct-acc-surface, #F9FAFB);
    color: var(--ct-acc-text, #333);
    outline: none;
    min-height: 40px;
    max-height: 80px;
    line-height: 1.4;
    transition: border-color 0.15s;
}
.ct-acc-adv-comments__input:focus {
    border-color: var(--ct-acc-brand, #E53935);
}
.ct-acc-adv-comments__input::placeholder {
    color: var(--ct-acc-muted, #bbb);
}
.ct-acc-adv-comments__send {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--ct-acc-brand, #E53935);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.15s, transform 0.15s;
}
.ct-acc-adv-comments__send:disabled {
    opacity: 0.4;
    cursor: default;
}
.ct-acc-adv-comments__send:not(:disabled):hover {
    transform: scale(1.08);
}
.ct-acc-adv-comments__send:not(:disabled):active {
    transform: scale(0.92);
}

/* Adventure comments overlay body should fill height */
.ct-acc-overlay--adventure-comments .ct-acc-overlay__body-inner {
    max-width: 860px;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
}
.ct-acc-overlay--adventure-comments .ct-acc-overlay__body {
    display: flex;
    flex-direction: column;
}

/* ── Survey ── */
.ct-acc-adv-viewer__survey-question {
    font-size: 15px;
    font-weight: 700;
    color: var(--ct-acc-dark);
    margin: 0 0 12px;
}
.ct-acc-adv-viewer__survey-option {
    margin-bottom: 10px;
}
.ct-acc-adv-viewer__survey-label {
    font-size: 13px;
    color: var(--ct-acc-text);
    margin-bottom: 4px;
}
.ct-acc-adv-viewer__survey-label span {
    color: var(--ct-acc-muted);
}
.ct-acc-adv-viewer__survey-bar {
    height: 8px;
    background: var(--ct-acc-surface, #F3F4F6);
    border-radius: 4px;
    overflow: hidden;
}
.ct-acc-adv-viewer__survey-fill {
    height: 100%;
    background: var(--ct-acc-brand, #818CF8);
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* ── Meta footer ── */
.ct-acc-adv-viewer__meta {
    font-size: 12px;
    color: var(--ct-acc-muted);
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--ct-acc-border, #F3F4F6);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
}
.ct-acc-adv-viewer__meta svg {
    width: 12px;
    height: 12px;
    vertical-align: -1px;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .ct-acc-overlay--adventure-viewer .ct-acc-overlay__dialog {
        width: min(90vw, 800px);
        inset: 24px auto auto 50%;
        max-height: calc(100vh - 40px);
    }
}
@media (max-width: 600px) {
    .ct-acc-overlay--adventure-viewer .ct-acc-overlay__dialog {
        width: 100%;
        inset: 0;
        transform: translateY(20px);
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
    }
    .ct-acc-overlay--adventure-viewer.active .ct-acc-overlay__dialog {
        transform: translateY(0);
    }
    .ct-acc-overlay--adventure-viewer .ct-acc-overlay__body {
        border-radius: 0;
    }
    .ct-acc-overlay--adventure-viewer .ct-acc-overlay__body-inner {
        display: flex;
        flex-direction: column;
        min-height: 100%;
    }
    .ct-acc-adv-viewer__gallery-hero {
        height: 45vh;
        min-height: 220px;
        flex-shrink: 0;
    }
    .ct-acc-adv-viewer__sheet {
        padding: 20px 16px 32px;
        flex: 1;
    }
    .ct-acc-adv-viewer__mini-cards {
        grid-template-columns: 1fr;
    }
    .ct-acc-adv-viewer__gallery-nav {
        width: 34px;
        height: 34px;
    }
    .ct-acc-adv-viewer__gallery-nav svg {
        width: 16px;
        height: 16px;
    }
    .ct-acc-adv-viewer__gallery-counter {
        bottom: 36px;
    }
    .ct-acc-adv-viewer__gallery-dots {
        bottom: 36px;
    }
    .ct-acc-adv-viewer__audio-player {
        padding: 10px 14px;
        gap: 8px;
    }
    .ct-acc-adv-viewer__audio-player .__audio-play {
        width: 38px;
        height: 38px;
    }
    .ct-acc-adv-viewer__audio-player .__audio-time {
        font-size: 12px;
        min-width: 26px;
    }
}

/* Read-only attachment summary in editor */
.ct-acc-adv-edit-readonly-hint {
    font-weight: 400;
    font-size: 11px;
    color: var(--ct-acc-muted);
}
.ct-acc-adv-edit-readonly-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ct-acc-adv-edit-readonly-att {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 13px;
    background: var(--ct-acc-bg-inset);
    color: var(--ct-acc-text);
    border: 1px solid var(--ct-acc-border);
}
.ct-acc-adv-edit-readonly-att svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Importance filter chip */
.ct-acc-ev-catfilter__chip[data-advimp] {
    --chip-color: #F44336;
}

/* Infinite scroll sentinel & loader */
.ct-acc-adv-sentinel {
    height: 1px;
    width: 100%;
}
.ct-acc-adv-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px 0;
    font-size: 13px;
    color: var(--ct-acc-muted);
}
.ct-acc-adv-loader__spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #E5E7EB;
    border-top-color: var(--ct-acc-brand, #6366F1);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* Adventure Editor Styles */
.ct-acc-adv-edit-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 4px 0;
}
.ct-acc-adv-edit-form .ct-con-edit-row {
    margin-bottom: 0;
}
.ct-acc-adv-edit-form .ct-con-edit-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ct-acc-gray);
    margin-bottom: 4px;
}
.ct-acc-adv-edit-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.ct-acc-adv-edit-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    background: #F3F4F6;
    color: var(--ct-acc-gray);
    border: 1px solid #E5E7EB;
}
.ct-acc-adv-edit-tag__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    color: var(--ct-acc-muted);
    padding: 0;
}
.ct-acc-adv-edit-tag__remove:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #F44336;
}
.ct-acc-adv-edit-tag-input-row {
    display: flex;
    gap: 8px;
}
.ct-acc-adv-edit-tag-input-row input {
    flex: 1;
}
.ct-acc-adv-edit-tag-input-row button {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid #E5E7EB;
    background: #F9FAFB;
    cursor: pointer;
    font-size: 13px;
    color: var(--ct-acc-text);
}
.ct-acc-adv-edit-tag-input-row button:hover {
    background: #F3F4F6;
}

/* Adventure editor checklist */
.ct-acc-adv-edit-checklist-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}
.ct-acc-adv-edit-checklist-item input[type="checkbox"] {
    flex-shrink: 0;
}
.ct-acc-adv-edit-checklist-item input[type="text"] {
    flex: 1;
}
.ct-acc-adv-edit-checklist-item .ct-ev-edit-todo-remove {
    flex-shrink: 0;
}

/* ==========================================================================
   Contact Cards & Grid
   ========================================================================== */

.ct-acc-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.ct-acc-contact-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: #fff;
    border-radius: 12px;
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    border: 1px solid #F3F4F6;
}

.ct-acc-contact-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.ct-acc-contact-card__photo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.ct-acc-contact-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ct-acc-contact-card__initials {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    border-radius: 50%;
}

.ct-acc-contact-card__info {
    flex: 1;
    min-width: 0;
}

.ct-acc-contact-card__name {
    font-family: var(--ct-acc-font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ct-acc-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ct-acc-contact-card__relation {
    font-size: 11px;
    color: var(--ct-acc-muted);
}

.ct-acc-contact-card__phone {
    font-size: 12px;
    color: var(--ct-acc-gray);
    margin-top: 2px;
}

.ct-acc-contact-card__badges {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.ct-acc-contact-card__group-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.ct-acc-contact-card__fav {
    color: #F59E0B;
    font-size: 14px;
}

.ct-acc-contact-card__emergency {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #DC2626;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
}

/* ==========================================================================
   Unified Search Bar
   ========================================================================== */

.ct-acc-search {
    position: relative;
    margin-bottom: 16px;
}

.ct-acc-search__inner {
    position: relative;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #FAFBFC 0%, #F3F4F6 100%);
    border: 1.5px solid #E5E7EB;
    border-radius: 16px;
    padding: 0 6px 0 0;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    overflow: hidden;
}

.ct-acc-search__inner:focus-within {
    border-color: #EF5350;
    box-shadow: 0 0 0 4px rgba(239, 83, 80, 0.08), 0 2px 8px rgba(239, 83, 80, 0.06);
    background: #fff;
}

.ct-acc-search__icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--ct-acc-muted);
    transition: color 0.25s ease, transform 0.25s ease;
    display: flex;
    align-items: center;
}

.ct-acc-search__inner:focus-within .ct-acc-search__icon {
    color: #EF5350;
    transform: translateY(-50%) scale(1.1);
}

.ct-acc-search__input {
    flex: 1;
    min-width: 0;
    padding: 12px 8px 12px 42px;
    border: none;
    background: transparent;
    font-family: var(--ct-acc-font-body);
    font-size: 14.5px;
    font-weight: 500;
    color: #1F2937;
    outline: none;
    letter-spacing: 0.01em;
}

.ct-acc-search__input::placeholder {
    color: var(--ct-acc-muted);
    font-weight: 400;
}

/* Clear button */
.ct-acc-search__clear {
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: #E5E7EB;
    color: var(--ct-acc-gray);
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.ct-acc-search__clear:hover {
    background: #D1D5DB;
    color: var(--ct-acc-text);
}

.ct-acc-search__clear:active {
    transform: scale(0.9);
}

.ct-acc-search--has-value .ct-acc-search__clear {
    display: flex;
}

/* Divider between clear and mic */
.ct-acc-search__divider {
    width: 1px;
    height: 20px;
    background: #E5E7EB;
    margin: 0 4px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.ct-acc-search--has-value .ct-acc-search__divider,
.ct-acc-search--voice-supported .ct-acc-search__divider {
    opacity: 1;
}

/* Hide divider if neither clear nor mic visible */
.ct-acc-search:not(.ct-acc-search--has-value):not(.ct-acc-search--voice-supported) .ct-acc-search__divider {
    display: none;
}

/* Show divider only when both clear AND mic are visible */
.ct-acc-search:not(.ct-acc-search--has-value) .ct-acc-search__divider {
    opacity: 0;
    width: 0;
    margin: 0;
}

/* Voice / Mic button */
.ct-acc-search__mic {
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--ct-acc-muted);
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
    position: relative;
}

.ct-acc-search--voice-supported .ct-acc-search__mic {
    display: flex;
}

.ct-acc-search__mic:hover {
    background: #FEE2E2;
    color: #EF5350;
}

.ct-acc-search__mic:active {
    transform: scale(0.9);
}

/* Mic recording state */
.ct-acc-search__mic--recording {
    color: #EF5350;
    background: #FEE2E2;
    animation: ct-acc-mic-pulse 1.5s ease-in-out infinite;
}

.ct-acc-search__mic--recording::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid #EF5350;
    opacity: 0;
    animation: ct-acc-mic-ring 1.5s ease-out infinite;
}

@keyframes ct-acc-mic-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

@keyframes ct-acc-mic-ring {
    0% { opacity: 0.6; transform: scale(0.8); }
    100% { opacity: 0; transform: scale(1.4); }
}

/* Voice feedback text */
.ct-acc-search__voice-hint {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    margin-top: 6px;
    border-radius: 10px;
    background: #FEF2F2;
    font-family: var(--ct-acc-font-body);
    font-size: 12px;
    font-weight: 500;
    color: #EF5350;
    animation: ct-acc-fade-in 0.2s ease;
}

.ct-acc-search--recording .ct-acc-search__voice-hint {
    display: flex;
}

@keyframes ct-acc-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Result count badge */
.ct-acc-search__count {
    display: none;
    position: absolute;
    right: 8px;
    top: -8px;
    padding: 2px 8px;
    border-radius: 10px;
    background: #EF5350;
    color: #fff;
    font-family: var(--ct-acc-font-body);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
    animation: ct-acc-fade-in 0.2s ease;
}

.ct-acc-search--has-results .ct-acc-search__count {
    display: block;
}

/* ==========================================================================
   Contact Viewer
   ========================================================================== */

.ct-acc-contact-viewer__header {
    text-align: center;
    padding: 20px 0;
    margin-bottom: 16px;
}

.ct-acc-contact-viewer__photo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 12px;
}

.ct-acc-contact-viewer__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ct-acc-contact-viewer__name {
    font-family: var(--ct-acc-font);
    font-size: 20px;
    font-weight: 800;
    color: var(--ct-acc-dark);
    margin-bottom: 4px;
}

.ct-acc-contact-viewer__relation {
    font-family: var(--ct-acc-font-body);
    font-size: 13px;
    color: var(--ct-acc-muted);
}

.ct-acc-contact-viewer__actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 20px 0;
}

.ct-acc-contact-viewer__action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 20px;
    background: #F3F4F6;
    border-radius: 12px;
    text-decoration: none;
    color: var(--ct-acc-text);
    font-size: 12px;
    font-weight: 500;
    transition: background 0.2s ease;
}

.ct-acc-contact-viewer__action:hover {
    background: #E5E7EB;
}

.ct-acc-contact-viewer__action svg {
    color: #EF5350;
}

/* ==========================================================================
   Gallery Grid
   ========================================================================== */

.ct-acc-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

@media (max-width: 480px) {
    .ct-acc-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ct-acc-gallery-item {
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    background: #F3F4F6;
}

.ct-acc-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.ct-acc-gallery-item:hover img {
    transform: scale(1.05);
}

.ct-acc-gallery-item__video-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.ct-acc-gal-monthgroup {
    margin-bottom: 24px;
}

.ct-acc-gal-monthgroup:first-child .ct-acc-gal-month-label {
    border-top: none;
    padding-top: 0;
}

.ct-acc-gal-month-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 0 10px;
    border-top: 1px solid #E5E7EB;
}

.ct-acc-gal-month-label__text {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ct-acc-dark);
    letter-spacing: -0.01em;
}

.ct-acc-gal-month-label__count {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ct-acc-gray);
    background: #F3F4F6;
    padding: 2px 8px;
    border-radius: 10px;
}

.ct-acc-gallery-loadmore {
    display: flex;
    justify-content: center;
    padding: 1.5rem 0 0.5rem;
}

/* ==========================================================================
   Gallery Lightbox — Info Panel & Toggle
   ========================================================================== */

/* ==========================================================================
   Gallery Detail — Glass Bottom Sheet (V1)
   ========================================================================== */

.ct-acc-lightbox__sheet {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 24px 24px 0 0;
    max-height: 75vh;
    overflow-y: auto;
    transform: translateY(calc(100% - 90px));
    transition: transform 0.5s var(--ct-acc-ease, cubic-bezier(0.16, 1, 0.3, 1));
    z-index: 10000;
    color: var(--ct-acc-dark);
}

.ct-acc-lightbox__sheet--expanded {
    transform: translateY(0);
}

.ct-acc-lightbox__sheet::-webkit-scrollbar { width: 4px; }
.ct-acc-lightbox__sheet::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.12);
    border-radius: 2px;
}

/* Drag handle */
.ct-acc-lightbox__sheet-handle {
    display: flex;
    justify-content: center;
    padding: 12px 0 8px;
    cursor: pointer;
    position: sticky;
    top: 0;
    z-index: 2;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px 24px 0 0;
}

.ct-acc-lightbox__sheet-handle-bar {
    width: 48px;
    height: 5px;
    border-radius: 3px;
    background: var(--ct-acc-red, #EF5350);
    box-shadow: 0 0 8px rgba(239, 83, 80, 0.4);
}

@keyframes ct-sheet-wiggle {
    0% { transform: translateY(calc(100% - 90px)); }
    25% { transform: translateY(calc(100% - 110px)); }
    50% { transform: translateY(calc(100% - 90px)); }
    70% { transform: translateY(calc(100% - 98px)); }
    100% { transform: translateY(calc(100% - 90px)); }
}

.ct-acc-lightbox__sheet--wiggle {
    animation: ct-sheet-wiggle 0.7s ease-out;
}

/* Peek row (always visible): input + save + date */
.ct-acc-lightbox__sheet-peek {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 20px 14px;
}

.ct-acc-lightbox__sheet-peek .ct-acc-lightbox__desc-input {
    flex: 1;
    min-width: 0;
}

.ct-acc-lightbox__sheet-peek-date {
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.55);
    font-family: var(--ct-acc-font, 'Plus Jakarta Sans', sans-serif);
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: 8px;
}

/* Sheet content area */
.ct-acc-lightbox__sheet-content {
    padding: 0 24px 32px;
}

/* Collapsible section */
.ct-acc-lightbox__section {
    margin-bottom: 24px;
}

.ct-acc-lightbox__section:last-child {
    margin-bottom: 0;
}

.ct-acc-lightbox__section-head {
    font-family: var(--ct-acc-font, 'Plus Jakarta Sans', sans-serif);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--ct-acc-red, #EF5350);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.ct-acc-lightbox__section-head::before {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
    order: 2;
}

.ct-acc-lightbox__section-head::after {
    content: '\25BE';
    font-size: 14px;
    color: rgba(0, 0, 0, 0.35);
    transition: transform 0.3s var(--ct-acc-ease, cubic-bezier(0.16, 1, 0.3, 1));
    flex-shrink: 0;
    order: 3;
}

.ct-acc-lightbox__section-head--collapsed::after {
    transform: rotate(-90deg);
}

.ct-acc-lightbox__section-body {
    overflow: hidden;
    transition: max-height 0.4s var(--ct-acc-ease, cubic-bezier(0.16, 1, 0.3, 1)),
                opacity 0.3s ease;
}

.ct-acc-lightbox__section-body--collapsed {
    max-height: 0 !important;
    opacity: 0;
}

/* Description */
.ct-acc-lightbox__desc {
    font-size: var(--ct-text-detail, 0.95rem);
    line-height: var(--ct-text-detail-lh, 1.6);
    color: rgba(0, 0, 0, 0.75);
    font-family: var(--ct-acc-font-body, 'DM Sans', sans-serif);
}

.ct-acc-lightbox__desc--ai {
    margin-top: 8px;
    font-style: italic;
    opacity: 0.5;
    font-size: calc(var(--ct-text-detail, 0.95rem) * 0.85);
}

/* Editable description */
.ct-acc-lightbox__desc-edit {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.ct-acc-lightbox__desc-input {
    flex: 1;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--ct-acc-radius-sm, 12px);
    color: var(--ct-acc-dark);
    font-size: var(--ct-text-detail, 0.95rem);
    padding: 8px 12px;
    outline: none;
    font-family: var(--ct-acc-font-body, 'DM Sans', sans-serif);
    transition: border-color 0.2s;
}

.ct-acc-lightbox__desc-input:focus {
    border-color: rgba(0, 0, 0, 0.25);
}

.ct-acc-lightbox__desc-input::placeholder {
    color: rgba(0, 0, 0, 0.35);
}

.ct-acc-lightbox__desc-save {
    background: rgba(239, 83, 80, 0.2);
    border: 1px solid rgba(239, 83, 80, 0.3);
    color: var(--ct-acc-red, #EF5350);
    border-radius: var(--ct-acc-radius-sm, 12px);
    padding: 8px 16px;
    font-size: var(--ct-text-detail, 0.95rem);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    font-family: var(--ct-acc-font, 'Plus Jakarta Sans', sans-serif);
    transition: background 0.2s;
}

.ct-acc-lightbox__desc-save:hover {
    background: rgba(239, 83, 80, 0.35);
}

/* Metadata grid */
.ct-acc-lightbox__meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.ct-acc-lightbox__meta-card {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--ct-acc-radius-sm, 12px);
    padding: 12px;
}

.ct-acc-lightbox__meta-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-family: var(--ct-acc-font, 'Plus Jakarta Sans', sans-serif);
    color: rgba(0, 0, 0, 0.45);
    margin-bottom: 4px;
}

.ct-acc-lightbox__meta-value {
    font-size: var(--ct-text-detail, 0.95rem);
    font-weight: 500;
    font-family: var(--ct-acc-font-body, 'DM Sans', sans-serif);
    color: var(--ct-acc-dark);
}

/* AI Tag pills */
.ct-acc-lightbox__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ct-acc-lightbox__tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(239, 83, 80, 0.1);
    border: 1px solid rgba(239, 83, 80, 0.2);
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--ct-acc-font, 'Plus Jakarta Sans', sans-serif);
    color: var(--ct-acc-red, #EF5350);
}

.ct-acc-lightbox__tag-conf {
    font-size: 10px;
    opacity: 0.5;
    font-family: var(--ct-acc-font-body, 'DM Sans', sans-serif);
}

/* Color swatches */
.ct-acc-lightbox__colors {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ct-acc-lightbox__color-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 20px;
    padding: 6px 12px 6px 6px;
}

.ct-acc-lightbox__color-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
}

.ct-acc-lightbox__color-text {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.6);
    font-family: var(--ct-acc-font-body, 'DM Sans', sans-serif);
}

/* Camera settings grid */
.ct-acc-lightbox__camera-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
}

.ct-acc-lightbox__camera-cell {
    text-align: center;
    padding: 10px;
    background: rgba(0, 0, 0, 0.03);
    border-radius: var(--ct-acc-radius-sm, 12px);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.ct-acc-lightbox__camera-value {
    font-family: var(--ct-acc-font-body, 'DM Sans', sans-serif);
    font-size: var(--ct-text-detail, 0.95rem);
    color: var(--ct-acc-dark);
    font-weight: 600;
    margin-bottom: 2px;
}

.ct-acc-lightbox__camera-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-family: var(--ct-acc-font, 'Plus Jakarta Sans', sans-serif);
    color: rgba(0, 0, 0, 0.4);
}

/* Location card */
.ct-acc-lightbox__location {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--ct-acc-radius-sm, 12px);
    padding: 14px;
}

.ct-acc-lightbox__location-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ct-acc-lightbox__location-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(239, 83, 80, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.ct-acc-lightbox__location-addr {
    font-size: var(--ct-text-detail, 0.95rem);
    color: rgba(0, 0, 0, 0.75);
    line-height: 1.5;
    font-family: var(--ct-acc-font-body, 'DM Sans', sans-serif);
}

.ct-acc-lightbox__location-coords {
    font-size: 11px;
    color: rgba(0, 0, 0, 0.4);
    font-family: var(--ct-acc-font-body, 'DM Sans', sans-serif);
    margin-top: 2px;
}

.ct-acc-lightbox__map {
    border-radius: 8px;
    overflow: hidden;
    line-height: 0;
    margin-top: 10px;
}

.ct-acc-lightbox__map-img {
    width: 100%;
    height: auto;
    max-height: 150px;
    object-fit: cover;
}

/* Face cards */
.ct-acc-lightbox__faces {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.ct-acc-lightbox__face {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--ct-acc-radius-sm, 12px);
    padding: 14px;
    min-width: 140px;
    flex: 1;
}

.ct-acc-lightbox__face-icon {
    font-size: 22px;
    margin-bottom: 6px;
}

.ct-acc-lightbox__face-detail {
    font-size: var(--ct-text-detail, 0.95rem);
    color: rgba(0, 0, 0, 0.55);
    line-height: var(--ct-text-detail-lh, 1.6);
    font-family: var(--ct-acc-font-body, 'DM Sans', sans-serif);
}

/* OCR text blockquote */
.ct-acc-lightbox__ocr-text {
    margin: 0;
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--ct-acc-radius-sm, 12px);
    font-size: var(--ct-text-detail, 0.95rem);
    font-family: var(--ct-acc-font-body, 'DM Sans', sans-serif);
    color: rgba(0, 0, 0, 0.65);
    line-height: var(--ct-text-detail-lh, 1.6);
    white-space: pre-wrap;
}

/* Gallery grid — accent color on hover */
.ct-acc-gallery-item:hover {
    box-shadow: 0 0 0 2px var(--gal-accent, transparent);
}

/* Face count badge on gallery grid items */
.ct-acc-gallery-item__face-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

@media (max-width: 480px) {
    .ct-acc-lightbox__meta-grid {
        grid-template-columns: 1fr 1fr;
    }
    .ct-acc-lightbox__camera-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .ct-acc-lightbox__desc-edit {
        flex-direction: column;
    }
    .ct-acc-lightbox__sheet-content {
        padding: 0 16px 24px;
    }
    .ct-acc-lightbox__sheet-peek {
        padding: 4px 16px 12px;
    }
}

/* ==========================================================================
   Usage Dashboard — Glass Metric Cards
   ========================================================================== */

.ct-acc-usage__title {
    font-family: var(--ct-acc-font);
    font-size: 13px;
    font-weight: 700;
    color: var(--ct-acc-gray);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 28px 0 16px;
}

.ct-acc-usage__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media (max-width: 480px) {
    .ct-acc-usage__grid {
        grid-template-columns: 1fr;
    }
}

/* Glass metric card */
.ct-acc-usage__card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.6));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(229, 231, 235, 0.8);
    border-radius: 12px;
    padding: 16px 20px;
    transition: transform 0.2s var(--ct-acc-ease), box-shadow 0.2s;
}

.ct-acc-usage__card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

/* Full-width card (gallery spans both columns) */
.ct-acc-usage__card--wide {
    grid-column: 1 / -1;
}

/* Card header: icon + label */
.ct-acc-usage__card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.ct-acc-usage__card-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ct-acc-usage__card-icon svg {
    width: 18px;
    height: 18px;
}

.ct-acc-usage__card-label {
    font-family: var(--ct-acc-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--ct-acc-gray);
}

/* Prominent count number */
.ct-acc-usage__card-value {
    font-family: var(--ct-acc-font);
    font-size: 28px;
    font-weight: 800;
    color: var(--ct-acc-dark);
    line-height: 1.1;
}

.ct-acc-usage__card-limit {
    font-size: 14px;
    font-weight: 500;
    color: var(--ct-acc-gray);
    margin-left: 4px;
}

.ct-acc-usage__card-sub {
    font-size: 13px;
    color: var(--ct-acc-gray);
    margin-top: 4px;
}

/* Progress bar (for devices) */
.ct-acc-usage__progress {
    height: 8px;
    background: #E5E7EB;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 12px;
}

.ct-acc-usage__progress-fill {
    height: 100%;
    border-radius: 4px;
    width: 0;
    transition: width 0.8s var(--ct-acc-ease);
}

.ct-acc-usage__progress-fill--green {
    background: linear-gradient(90deg, #10B981, #34D399);
}

.ct-acc-usage__progress-fill--amber {
    background: linear-gradient(90deg, #F59E0B, #FBBF24);
}

.ct-acc-usage__progress-fill--red {
    background: linear-gradient(90deg, #EF4444, #F87171);
}

/* Skeleton loading state */
.ct-acc-usage__card--skeleton {
    min-height: 80px;
    background: linear-gradient(90deg, #F3F4F6, #E5E7EB, #F3F4F6);
    background-size: 200% 100%;
    animation: ct-acc-shimmer 1.5s ease infinite;
    border: 1px solid rgba(229, 231, 235, 0.5);
}

.ct-acc-usage__card--skeleton:hover {
    transform: none;
    box-shadow: none;
}

@keyframes ct-acc-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ==========================================================================
   Shared Toggle Switch
   ========================================================================== */

.ct-acc-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
    padding: 0;
    border-bottom: none;
    justify-content: center;
}

.ct-acc-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.ct-acc-toggle__slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #D1D5DB;
    border-radius: 20px;
    transition: background 0.25s var(--ct-acc-ease);
}

.ct-acc-toggle__slider::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    border-radius: 50%;
    transition: transform 0.25s var(--ct-acc-ease);
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.ct-acc-toggle input:checked + .ct-acc-toggle__slider {
    background: var(--ct-acc-red);
}

.ct-acc-toggle input:checked + .ct-acc-toggle__slider::before {
    transform: translateX(16px) translateY(-50%);
}

.ct-acc-toggle input:focus-visible + .ct-acc-toggle__slider {
    outline: 2px solid var(--ct-acc-red);
    outline-offset: 2px;
}

/* ==========================================================================
   Feiertage (Holidays) Tab
   ========================================================================== */

/* Holiday sections multi-column grid */
.ct-acc-hol-sections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 10px;
}

/* Section grouping */
.ct-acc-hol-section {
    margin-bottom: 0;
}

.ct-acc-hol-section__title {
    font-family: var(--ct-acc-font);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ct-acc-gray);
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--ct-acc-border);
}

/* Calendar cards */
.ct-acc-hol-card {
    background: #fff;
    border: 1px solid var(--ct-acc-border);
    border-radius: var(--ct-acc-radius-sm);
    margin-bottom: 10px;
    overflow: visible;
    transition: box-shadow 0.2s var(--ct-acc-ease);
}

.ct-acc-hol-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.ct-acc-hol-card__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
}

.ct-acc-hol-card__icon {
    font-size: 1.3rem;
    line-height: 1;
    flex-shrink: 0;
    width: 32px;
    text-align: center;
}

.ct-acc-hol-card__label {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ct-acc-hol-card__name {
    font-family: var(--ct-acc-font);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ct-acc-dark);
}

.ct-acc-hol-card__count {
    font-size: 0.8rem;
    color: var(--ct-acc-gray);
}

.ct-acc-hol-card__show-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    padding: 8px;
    border: none;
    border-top: 1px solid var(--ct-acc-border);
    background: var(--ct-acc-gray-light);
    font-family: var(--ct-acc-font);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--ct-acc-gray);
    cursor: pointer;
    transition: all 0.2s ease;
}

.ct-acc-hol-card__show-btn:hover {
    background: #E5E7EB;
    color: var(--ct-acc-dark);
}

.ct-acc-hol-card__show-btn svg {
    transition: transform 0.25s var(--ct-acc-ease);
}

.ct-acc-hol-card__list {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s var(--ct-acc-ease);
}

.ct-acc-hol-card__list--open {
    max-height: 1200px;
    overflow: visible;
}

.ct-acc-hol-card__holiday {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px 8px 60px;
    font-size: 0.85rem;
    color: var(--ct-acc-text);
    border-top: 1px solid rgba(229, 231, 235, 0.5);
    font-family: var(--ct-acc-font-body);
}

.ct-acc-hol-card__holiday-name {
    flex: 1;
    min-width: 0;
}

.ct-acc-hol-card__holiday .ct-dev-hint-bubble {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(4px);
}
.ct-acc-hol-card__holiday .ct-dev-hint-trigger:hover .ct-dev-hint-bubble {
    transform: translateX(0) translateY(0);
}
.ct-acc-hol-card__holiday .ct-dev-hint-bubble::after {
    left: auto;
    right: 6px;
    transform: none;
}

.ct-acc-hol-card__holiday:first-child {
    border-top: 1px solid var(--ct-acc-border);
}

/* ==========================================================================
   Assistenten (Assistants) Tab
   ========================================================================== */

/* Assistant header: stack title + subtitle vertically */
.ct-acc-events__header:has(.ct-acc-assistant-subtitle) {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 12px;
}

/* Title row with info button */
.ct-acc-events__title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.ct-acc-events__title-row .ct-acc-devices__refresh-btn {
    margin-left: auto;
}

.ct-acc-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--ct-acc-border);
    background: #fff;
    color: var(--ct-acc-gray);
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
    padding: 0;
}

.ct-acc-info-btn:hover {
    border-color: var(--ct-acc-red-light);
    color: var(--ct-acc-red);
    background: rgba(239, 83, 80, 0.04);
}

/* Info tooltip */
.ct-acc-info-wrap {
    position: relative;
    display: inline-flex;
}

.ct-acc-info-tooltip {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    background: var(--ct-acc-dark);
    color: #fff;
    padding: 16px 18px;
    border-radius: var(--ct-acc-radius-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 50;
    pointer-events: none;
}

.ct-acc-info-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-bottom-color: var(--ct-acc-dark);
}

.ct-acc-info-wrap:hover .ct-acc-info-tooltip,
.ct-acc-info-btn:focus + .ct-acc-info-tooltip {
    opacity: 1;
    visibility: visible;
}

.ct-acc-info-tooltip__title {
    display: block;
    font-family: var(--ct-acc-font);
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.ct-acc-info-tooltip__text {
    font-family: var(--ct-acc-font-body);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0;
    opacity: 0.9;
}

/* Subtitle */
.ct-acc-assistant-subtitle {
    font-family: var(--ct-acc-font-body);
    font-size: 0.95rem;
    color: var(--ct-acc-gray);
    margin: 6px 0 0;
    line-height: 1.55;
}

@media (max-width: 600px) {
    .ct-acc-assistant-subtitle { display: none; }
}

/* Assistant list */
.ct-acc-assistant-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    padding-bottom: 20px;
}

.ct-acc-assistant-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 18px 18px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.62));
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(229, 231, 235, 0.8);
    border-radius: var(--ct-acc-radius-sm);
    cursor: pointer;
    transition: all 0.25s var(--ct-acc-ease);
    width: 100%;
    font-family: var(--ct-acc-font);
}

.ct-acc-assistant-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.ct-acc-assistant-card__visual {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--ct-acc-gray-light);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 12px;
    flex-shrink: 0;
}

.ct-acc-assistant-card__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ct-acc-assistant-card__visual--icon {
    background: linear-gradient(135deg, var(--ct-acc-red), var(--ct-acc-red-hover));
    color: #fff;
}

.ct-acc-assistant-card__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
}

.ct-acc-assistant-card__name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--ct-acc-dark);
}

.ct-acc-assistant-card__model {
    font-size: 0.8rem;
    color: var(--ct-acc-gray);
}

/* Status indicator */
.ct-acc-assistant-card__status {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.ct-acc-assistant-card__status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #D1D5DB;
    flex-shrink: 0;
}

.ct-acc-assistant-card__status-dot--online {
    background: var(--ct-acc-success);
}

.ct-acc-assistant-card__status-text {
    font-size: 0.78rem;
    color: var(--ct-acc-gray);
}

.ct-acc-assistant-card__status-text--online {
    color: var(--ct-acc-success);
    font-weight: 500;
}

/* Action pill — hidden by default, shown on hover */
.ct-acc-assistant-card__action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    font-family: var(--ct-acc-font);
    color: #fff;
    background: var(--ct-acc-red);
    padding: 8px 18px;
    border-radius: 999px;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(4px);
    transition: all 0.25s var(--ct-acc-ease);
}

.ct-acc-assistant-card:hover .ct-acc-assistant-card__action {
    opacity: 1;
    transform: translateY(0);
}

.ct-acc-assistant-card__action:hover {
    background: var(--ct-acc-red-hover);
    box-shadow: 0 4px 16px rgba(239, 83, 80, 0.3);
}

/* Skeleton card for grid layout */
.ct-acc-assistant-card.ct-acc-event-skeleton__card {
    height: 160px;
    background: linear-gradient(90deg, #F3F4F6, #E5E7EB, #F3F4F6);
    background-size: 200% 100%;
    animation: ct-acc-shimmer 1.5s ease infinite;
    border: 1px solid transparent;
}

/* Empty state */
.ct-acc-assistant-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--ct-acc-gray);
}

.ct-acc-assistant-empty__icon {
    margin-bottom: 16px;
    opacity: 0.3;
}

.ct-acc-assistant-empty h3 {
    font-family: var(--ct-acc-font);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ct-acc-dark);
    margin: 0 0 8px;
}

.ct-acc-assistant-empty p {
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
    max-width: 340px;
    margin-inline: auto;
}

/* Back button */
.ct-acc-ast-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px 8px 8px;
    border: none;
    border-radius: 8px;
    background: var(--ct-acc-gray-light);
    font-family: var(--ct-acc-font);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ct-acc-gray);
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 4px;
}

.ct-acc-ast-back-btn:hover {
    background: #E5E7EB;
    color: var(--ct-acc-dark);
}

/* Settings sections grid */
.ct-acc-ast-sections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 10px;
}

/* Settings sections */
.ct-acc-ast-section {
    background: #fff;
    border: 1px solid var(--ct-acc-border);
    border-radius: var(--ct-acc-radius-sm);
    margin-bottom: 10px;
    overflow: visible;
    transition: box-shadow 0.2s var(--ct-acc-ease);
}

.ct-acc-ast-section:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.ct-acc-ast-section__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
}

.ct-acc-ast-section__header:hover {
    background: rgba(243, 244, 246, 0.5);
}

.ct-acc-ast-section__icon {
    flex-shrink: 0;
    color: var(--ct-acc-red);
    display: flex;
    align-items: center;
}

.ct-acc-ast-section__title {
    flex: 1;
    font-family: var(--ct-acc-font);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ct-acc-dark);
}

.ct-acc-ast-section__chevron {
    flex-shrink: 0;
    color: var(--ct-acc-gray);
    transition: transform 0.25s var(--ct-acc-ease);
}

.ct-acc-ast-section--collapsed .ct-acc-ast-section__chevron {
    transform: rotate(-90deg);
}

/* Section body */
.ct-acc-ast-section__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s var(--ct-acc-ease);
}

.ct-acc-ast-section__body--open {
    max-height: 1200px;
    overflow: visible;
}

/* Setting rows */
.ct-acc-ast-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid rgba(229, 231, 235, 0.5);
}

.ct-acc-ast-row__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ct-acc-ast-row__label {
    font-family: var(--ct-acc-font-body);
    font-size: 0.875rem;
    color: var(--ct-acc-text);
}

/* Controls */
.ct-acc-ast-control--select {
    padding: 6px 28px 6px 12px;
    border: 1.5px solid var(--ct-acc-border);
    border-radius: 8px;
    font-family: var(--ct-acc-font);
    font-size: 0.85rem;
    color: var(--ct-acc-dark);
    background: #fff;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    transition: border-color 0.2s ease;
}

.ct-acc-ast-control--select:focus {
    outline: none;
    border-color: var(--ct-acc-red);
}

.ct-acc-ast-control--text,
.ct-acc-ast-control--time {
    padding: 6px 12px;
    border: 1.5px solid var(--ct-acc-border);
    border-radius: 8px;
    font-family: var(--ct-acc-font);
    font-size: 0.85rem;
    color: var(--ct-acc-dark);
    width: 160px;
    max-width: 50%;
    transition: border-color 0.2s ease;
}

.ct-acc-ast-control--text:focus,
.ct-acc-ast-control--time:focus {
    outline: none;
    border-color: var(--ct-acc-red);
}

.ct-acc-ast-control--range-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.ct-acc-ast-control--range {
    -webkit-appearance: none;
    appearance: none;
    width: 140px;
    height: 6px;
    border-radius: 3px;
    background: #E5E7EB;
    outline: none;
    cursor: pointer;
}

.ct-acc-ast-control--range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ct-acc-red);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(239, 83, 80, 0.3);
    transition: transform 0.15s ease;
}

.ct-acc-ast-control--range::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.ct-acc-ast-control--range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ct-acc-red);
    cursor: pointer;
    border: none;
    box-shadow: 0 1px 4px rgba(239, 83, 80, 0.3);
}

.ct-acc-ast-range-value {
    font-family: var(--ct-acc-font);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ct-acc-text);
    min-width: 76px;
    text-align: right;
}

/* Subtitle / info text below setting label */
.ct-acc-ast-row__subtitle {
    font-family: var(--ct-acc-font-body);
    font-size: 0.75rem;
    color: var(--ct-acc-gray);
    line-height: 1.3;
}

.ct-acc-ast-row__info {
    font-family: var(--ct-acc-font-body);
    font-size: 0.7rem;
    color: var(--ct-acc-gray);
    line-height: 1.4;
    margin-top: 2px;
    opacity: 0.8;
}

/* Label row: label + info button inline */
.ct-acc-ast-row__label-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Smaller info button for settings rows */
.ct-acc-info-btn--sm {
    width: 18px;
    height: 18px;
    font-size: 0;
}
.ct-acc-info-btn--sm svg {
    width: 14px;
    height: 14px;
}

/* Row-context tooltip: position left-aligned, slightly narrower */
.ct-acc-info-tooltip--row {
    width: 280px;
    left: 0;
    transform: none;
}
.ct-acc-info-tooltip--row::before {
    left: 9px;
    transform: none;
}

/* --- Portal tooltip (appended to body, escapes overflow:hidden) --- */
.ct-acc-portal-tooltip {
    position: fixed;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    font-family: var(--ct-acc-font);
}
.ct-acc-portal-tooltip--visible {
    opacity: 1;
    visibility: visible;
}
.ct-acc-portal-tooltip__inner {
    background: var(--ct-acc-dark);
    color: #fff;
    padding: 16px 18px;
    border-radius: var(--ct-acc-radius-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    width: 280px;
}
.ct-acc-portal-tooltip__arrow {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border: 7px solid transparent;
}
.ct-acc-portal-tooltip__arrow--down {
    top: 100%;
    border-top-color: var(--ct-acc-dark);
}
.ct-acc-portal-tooltip__arrow--up {
    bottom: 100%;
    border-bottom-color: var(--ct-acc-dark);
}
.ct-acc-portal-tooltip__title {
    display: block;
    font-family: var(--ct-acc-font);
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 6px;
}
.ct-acc-portal-tooltip__text {
    font-family: var(--ct-acc-font-body);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0;
    opacity: 0.9;
}

/* Device tooltip call buttons */
.ct-acc-portal-tooltip__actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}
.ct-acc-portal-tooltip__btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 0;
    border-radius: 8px;
    border: none;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
    font-family: var(--ct-acc-font);
}
.ct-acc-portal-tooltip__btn:hover { opacity: 0.85; }
.ct-acc-portal-tooltip__btn svg { width: 15px; height: 15px; }
.ct-acc-portal-tooltip__btn--audio {
    background: #ECFDF5;
    color: #059669;
}
.ct-acc-portal-tooltip__btn--video {
    background: #EFF6FF;
    color: #2563EB;
}

/* Hover effect on attachment icons */
.ct-acc-adv-card__att-icon {
    transition: background 0.15s, border-color 0.15s;
}
.ct-acc-adv-card__att-icon:hover {
    background: var(--ct-acc-border);
    border-color: var(--ct-acc-muted);
}
.ct-acc-adv-card__receiver-avatar:hover {
    border-color: var(--ct-acc-muted);
    box-shadow: 0 0 0 2px var(--ct-acc-bg-inset);
}

/* Dark mode */
[data-ct-theme="dark"] .ct-acc-adv-card__att-icon:hover {
    background: #334155;
    border-color: #475569;
}
[data-ct-theme="dark"] .ct-acc-portal-tooltip__btn--audio {
    background: rgba(5,150,105,0.15);
}
[data-ct-theme="dark"] .ct-acc-portal-tooltip__btn--video {
    background: rgba(37,99,235,0.15);
}

/* Time-list rows: chips below label */
.ct-acc-ast-row--time-list {
    flex-wrap: wrap;
}

.ct-acc-ast-row--time-list .ct-acc-ast-time-list {
    width: 100%;
    padding-top: 8px;
    border-top: 1px dashed rgba(229, 231, 235, 0.5);
    margin-top: 4px;
}

/* Master toggle in section header */
.ct-acc-ast-section__toggle {
    flex-shrink: 0;
    margin-right: 8px;
}

/* Disabled section (master toggle off) */
.ct-acc-ast-section--disabled .ct-acc-ast-section__body {
    opacity: 0.4;
    pointer-events: none;
}

/* Time list chips */
.ct-acc-ast-time-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.ct-acc-ast-time-list__chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px 4px 10px;
    background: var(--ct-acc-gray-light);
    border-radius: 16px;
    font-family: var(--ct-acc-font);
    font-size: 0.8rem;
    color: var(--ct-acc-dark);
}

.ct-acc-ast-time-list__remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--ct-acc-gray);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: all 0.15s ease;
}

.ct-acc-ast-time-list__remove:hover {
    background: rgba(239, 83, 80, 0.1);
    color: var(--ct-acc-red);
}

.ct-acc-ast-time-list__add {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1.5px dashed var(--ct-acc-border);
    border-radius: 16px;
    background: transparent;
    font-family: var(--ct-acc-font);
    font-size: 0.8rem;
    color: var(--ct-acc-gray);
    cursor: pointer;
    transition: all 0.15s ease;
}

.ct-acc-ast-time-list__add:hover {
    border-color: var(--ct-acc-red);
    color: var(--ct-acc-red);
}

.ct-acc-ast-time-list__input {
    width: 100px;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .ct-acc-hol-device-picker {
        gap: 6px;
    }

    .ct-acc-hol-sections-grid {
        grid-template-columns: 1fr;
    }

    .ct-acc-hol-card__header {
        padding: 12px 14px;
    }

    .ct-acc-hol-card__holiday {
        padding-left: 44px;
    }

    .ct-acc-assistant-list {
        grid-template-columns: 1fr;
    }

    .ct-acc-assistant-card {
        padding: 18px 14px 14px;
    }

    .ct-acc-ast-sections-grid {
        grid-template-columns: 1fr;
    }

    .ct-acc-ast-row {
        flex-wrap: wrap;
        gap: 8px;
    }

    .ct-acc-ast-control--text,
    .ct-acc-ast-control--time {
        width: 100%;
        max-width: 100%;
    }

    .ct-acc-hol-save-bar {
        padding-left: 16px;
        padding-right: 16px;
    }

}

/* ==========================================================================
   Holiday Card Loading Skeleton
   ========================================================================== */

.ct-acc-hol-card--skeleton {
    height: 48px;
    margin-bottom: 10px;
    background: linear-gradient(90deg, #F3F4F6, #E5E7EB, #F3F4F6);
    background-size: 200% 100%;
    animation: ct-acc-shimmer 1.5s ease infinite;
    border: 1px solid transparent;
    border-radius: var(--ct-acc-radius-sm);
}

/* ==========================================================================
   Holiday Save Bar
   ========================================================================== */

.ct-acc-hol-save-bar {
    position: sticky;
    bottom: 0;
    padding: 16px 32px 8px;
    background: linear-gradient(to top, #fff 60%, rgba(255,255,255,0));
    z-index: 10;
}

.ct-acc-hol-save-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 24px;
    background: var(--ct-acc-red);
    color: #fff;
    border: none;
    border-radius: var(--ct-acc-radius-sm);
    font-family: var(--ct-acc-font);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s var(--ct-acc-ease), opacity 0.2s;
}

.ct-acc-hol-save-btn:hover {
    background: var(--ct-acc-red-hover);
}

.ct-acc-hol-save-btn--saving {
    opacity: 0.7;
    cursor: not-allowed;
    pointer-events: none;
}

.ct-acc-hol-save-btn--success {
    background: var(--ct-acc-success);
    pointer-events: none;
}

.ct-acc-hol-save-btn--error {
    background: #d32f2f;
    pointer-events: none;
}

.ct-acc-hol-save-btn__spinner {
    width: 18px;
    height: 18px;
    animation: ct-acc-hol-spin 0.8s linear infinite;
}

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

/* Holiday error state */
.ct-acc-hol-error {
    text-align: center;
    padding: 40px 20px;
    color: var(--ct-acc-gray);
}

.ct-acc-hol-error__icon {
    font-size: 2rem;
    margin-bottom: 12px;
}

.ct-acc-hol-error__retry {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    padding: 8px 20px;
    background: var(--ct-acc-gray-light);
    border: 1px solid var(--ct-acc-border);
    border-radius: var(--ct-acc-radius-sm);
    font-family: var(--ct-acc-font);
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s;
}

.ct-acc-hol-error__retry:hover {
    background: var(--ct-acc-border);
}

/* ==========================================================================
   Account Tab: Two-column grid
   ========================================================================== */

.ct-acc-account-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
}

.ct-acc-account-grid__stack {
    display: flex;
    flex-direction: column;
    gap: 32px;
    min-width: 0;
}

.ct-acc-account-grid__col {
    min-width: 0;
    position: relative;
    background: linear-gradient(135deg, rgba(255,255,255,0.88), rgba(255,255,255,0.62));
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(229,231,235,0.8);
    border-radius: 16px;
    padding: 24px;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ct-acc-account-grid__col:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}

.ct-acc-account-grid .ct-acc-profile__actions {
    margin-top: 24px;
}

.ct-acc-account-grid #ct-acc-account-usage {
    margin-top: 0;
}

.ct-acc-account-grid__col--full {
    grid-column: 1 / -1;
}

.ct-acc-account-grid #ct-acc-account-devices {
    margin-top: 0;
}

@media (max-width: 900px) {
    .ct-acc-account-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* Legacy section title — still used by Account tab */
.ct-acc-dash-overview__section-title {
    font-family: var(--ct-acc-font);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ct-acc-gray);
    margin: 0 0 16px 0;
}

/* ==========================================================================
   Dashboard v2: Glass Charts
   ========================================================================== */

/* Grid layout */
.ct-dash {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.ct-dash__card--full {
    grid-column: 1 / -1;
}

/* Glass card base */
.ct-dash__card {
    position: relative;
    background: linear-gradient(135deg, rgba(255,255,255,0.88), rgba(255,255,255,0.62));
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(229,231,235,0.8);
    border-radius: 16px;
    padding: 24px;
    overflow: hidden;
    animation: ct-dash-card-in 0.5s ease both;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ct-dash__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}

/* Colored glow */
.ct-dash__card-glow {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    opacity: 0.15;
    pointer-events: none;
    background: var(--glow-color, #6366F1);
}

.ct-dash__card--subscription { --glow-color: #6366F1; }
.ct-dash__card--content { --glow-color: #8B5CF6; }
.ct-dash__card--gauges { --glow-color: #EF5350; }
.ct-dash__card--activity { --glow-color: #10B981; }

/* Section title (reused across cards) */
.ct-dash__section-title {
    font-family: var(--ct-acc-font);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ct-acc-gray);
    margin: 0 0 16px 0;
}

/* ── Subscription card ── */
.ct-dash__period {
    font-size: 0.85rem;
    color: var(--ct-acc-gray);
    margin: 12px 0 0;
}

.ct-dash__timeline-wrap {
    margin-top: 16px;
}

/* ── Donut chart ── */
.ct-dash__chart-wrap {
    display: flex;
    align-items: center;
    gap: 24px;
}

.ct-dash__chart-wrap--skel {
    justify-content: center;
}

.ct-dash__donut {
    width: 160px;
    height: 160px;
    flex-shrink: 0;
}

.ct-dash__donut-seg {
    transition: stroke-dasharray 1s ease;
}

.ct-dash__donut-seg--init {
    stroke-dasharray: 0 502.65 !important;
}

.ct-dash__donut-total {
    font-family: var(--ct-acc-font);
    font-size: 28px;
    font-weight: 800;
    fill: var(--ct-acc-dark);
}

.ct-dash__donut-label {
    font-family: var(--ct-acc-font);
    font-size: 11px;
    font-weight: 600;
    fill: var(--ct-acc-gray);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Legend */
.ct-dash__legend {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.ct-dash__legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-family: var(--ct-acc-font);
}

.ct-dash__legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ct-dash__legend-label {
    color: var(--ct-acc-gray);
    flex: 1;
}

.ct-dash__legend-value {
    font-weight: 700;
    color: var(--ct-acc-dark);
}

/* ── Ring & Arc gauges ── */
.ct-dash__gauges-grid {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    justify-content: center;
}

.ct-dash__gauge {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.ct-dash__ring {
    width: 110px;
    height: 110px;
}

.ct-dash__ring-fill {
    transition: stroke-dasharray 1s ease;
}

.ct-dash__ring-fill--init {
    stroke-dasharray: 0 314.16 !important;
}

.ct-dash__ring-count {
    font-family: var(--ct-acc-font);
    font-size: 22px;
    font-weight: 800;
    fill: var(--ct-acc-dark);
}

.ct-dash__ring-sub {
    font-family: var(--ct-acc-font);
    font-size: 11px;
    fill: var(--ct-acc-gray);
}

.ct-dash__arc {
    width: 110px;
    height: 80px;
}

.ct-dash__arc-fill {
    transition: stroke-dasharray 1s ease;
}

.ct-dash__arc-fill--init {
    stroke-dasharray: 0 157.08 !important;
}

.ct-dash__arc-value {
    font-family: var(--ct-acc-font);
    font-size: 14px;
    font-weight: 700;
    fill: var(--ct-acc-dark);
}

/* ── Empty state ── */
.ct-dash__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    font-size: 0.9rem;
    color: var(--ct-acc-gray);
    font-family: var(--ct-acc-font);
}

/* ── Activity metrics ── */
.ct-dash__metrics {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.ct-dash__metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 8px 14px;
    background: var(--metric-bg, rgba(0,0,0,0.02));
    border-radius: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-align: center;
}

.ct-dash__metric:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.ct-dash__metric--skel {
    padding: 16px 8px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ct-dash__metric-icon {
    width: 28px;
    height: 28px;
    color: var(--metric-color, var(--ct-acc-gray));
    margin-bottom: 8px;
}

.ct-dash__metric-icon svg {
    width: 100%;
    height: 100%;
}

.ct-dash__metric-count {
    font-family: var(--ct-acc-font);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--metric-color, var(--ct-acc-dark));
    line-height: 1;
}

.ct-dash__metric-label {
    font-size: 0.75rem;
    color: var(--ct-acc-gray);
    margin-top: 4px;
    font-family: var(--ct-acc-font);
}

/* ── Card entrance animation ── */
@keyframes ct-dash-card-in {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Generic staggered entrance (reuses ct-dash-card-in) ── */
.ct-acc-animate-in {
    animation: ct-dash-card-in 0.5s ease both;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .ct-dash {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .ct-dash__card {
        padding: 20px;
    }

    .ct-dash__chart-wrap {
        flex-direction: column;
        align-items: center;
    }

    .ct-dash__legend {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px 16px;
        justify-content: center;
    }

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

    .ct-dash__gauges-grid {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 480px) {
    .ct-dash__card {
        padding: 16px;
    }

    .ct-dash__metrics {
        grid-template-columns: repeat(2, 1fr);
    }

    .ct-dash__donut {
        width: 130px;
        height: 130px;
    }

    .ct-dash__welcome-header {
        gap: 12px;
    }

    .ct-dash__avatar {
        width: 44px;
        height: 44px;
        font-size: 0.95rem;
    }

    .ct-dash__greeting {
        font-size: 1rem;
    }
}

/* ==========================================================================
   Dashboard Devices Card
   ========================================================================== */

.ct-dash__devices-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.ct-dash__device-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 12px 16px;
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(229,231,235,0.6);
    border-radius: 14px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ct-dash__device-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.ct-dash__device-item--inactive {
    opacity: 0.55;
}

.ct-dash__device-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 10px;
    flex-shrink: 0;
}
.ct-dash__device-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ct-dash__device-avatar--icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #FFF0F0, #FFE0E0);
    color: var(--ct-acc-red);
}

.ct-dash__device-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ct-acc-dark);
    margin-bottom: 2px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ct-dash__device-type {
    font-size: 0.75rem;
    color: var(--ct-acc-gray);
    margin-bottom: 8px;
}

.ct-dash__device-status {
    font-size: 0.72rem;
    color: var(--ct-acc-muted);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 12px;
}
.ct-dash__device-status--active {
    color: var(--ct-acc-success);
}
.ct-dash__device-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ct-acc-success);
}

.ct-dash__device-actions {
    display: flex;
    gap: 8px;
}
.ct-dash__device-call {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #D1FAE5;
    background: #ECFDF5;
    color: #059669;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ct-dash__device-call:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(5,150,105,0.2);
}
.ct-dash__device-call--video {
    border-color: #BFDBFE;
    background: #EFF6FF;
    color: #2563EB;
}
.ct-dash__device-call--video:hover {
    box-shadow: 0 2px 8px rgba(37,99,235,0.2);
}
.ct-dash__device-call svg {
    width: 16px;
    height: 16px;
}

.ct-dash__devices-more {
    display: block;
    width: 100%;
    margin-top: 16px;
    padding: 10px 0;
    background: none;
    border: 1px solid rgba(229,231,235,0.8);
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ct-acc-gray);
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.ct-dash__devices-more:hover {
    color: var(--ct-acc-dark);
    border-color: var(--ct-acc-dark);
}

@media (max-width: 380px) {
    .ct-dash__devices-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   Mobile Bottom Navigation Bar
   ========================================================================== */

.ct-mobile-bottom-bar {
    display: none;
}

@media (max-width: 900px) {
    html.ct-acc-has-session .ct-mobile-bottom-bar {
        display: flex;
        position: fixed;
        bottom: 12px;
        left: 12px;
        right: 12px;
        z-index: 9990;
        height: 72px;
        padding: 0 8px;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.72));
        -webkit-backdrop-filter: blur(32px) saturate(200%);
        backdrop-filter: blur(32px) saturate(200%);
        border-radius: 28px;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.06);
        align-items: center;
        justify-content: space-around;
        animation: ct-bottom-bar-in 0.4s ease both;
    }
}

.ct-mobile-bottom-bar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 16px;
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease;
    min-width: 60px;
}

.ct-mobile-bottom-bar__item:active {
    transform: scale(0.92);
}

.ct-mobile-bottom-bar__icon {
    width: 26px;
    height: 26px;
    color: var(--ct-acc-gray, #6B7280);
    transition: color 0.2s ease;
    position: relative;
    z-index: 1;
}

.ct-mobile-bottom-bar__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.ct-mobile-bottom-bar__label {
    font-family: var(--ct-acc-font-body, 'DM Sans', sans-serif);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ct-acc-gray, #6B7280);
    transition: color 0.2s ease;
    line-height: 1.2;
}

/* Active state — morphic glow */
.ct-mobile-bottom-bar__item--active::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(239, 83, 80, 0.18) 0%, rgba(239, 83, 80, 0) 70%);
    pointer-events: none;
}

.ct-mobile-bottom-bar__item--active .ct-mobile-bottom-bar__icon {
    color: var(--ct-acc-red, #EF5350);
}

.ct-mobile-bottom-bar__item--active .ct-mobile-bottom-bar__label {
    color: var(--ct-acc-red, #EF5350);
    font-weight: 600;
}

@keyframes ct-bottom-bar-in {
    from { transform: translateY(calc(100% + 12px)); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Hide cookie settings FAB when bottom bar is showing */
@media (max-width: 900px) {
    html.ct-acc-has-session .ct-consent-fab {
        display: none !important;
    }
}

/* ==========================================================================
   Mobile Drawer
   ========================================================================== */

.ct-mobile-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9991;
    background: rgba(0, 0, 0, 0.4);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.ct-mobile-drawer-backdrop--open {
    opacity: 1;
    visibility: visible;
}

.ct-mobile-drawer {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: 9992;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(250, 250, 250, 0.92));
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.ct-mobile-drawer--open {
    transform: translateY(0);
}

.ct-mobile-drawer__header {
    padding: calc(env(safe-area-inset-top, 20px) + 24px) 24px 20px;
    border-bottom: 1px solid rgba(229, 231, 235, 0.5);
    display: flex;
    align-items: center;
    gap: 14px;
}

.ct-mobile-drawer__close {
    width: 44px;
    height: 44px;
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--ct-acc-gray-light);
    border-radius: 50%;
    color: var(--ct-acc-gray);
    cursor: pointer;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.2s;
}

.ct-mobile-drawer__close:hover,
.ct-mobile-drawer__close:active {
    background: var(--ct-acc-red);
    color: #fff;
    transform: rotate(90deg);
}

.ct-mobile-drawer__close:focus-visible {
    outline: 2px solid var(--ct-acc-red);
    outline-offset: 2px;
}

.ct-mobile-drawer__close svg {
    width: 24px;
    height: 24px;
    display: block;
}

.ct-mobile-drawer__avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ct-acc-red, #EF5350), var(--ct-acc-red-hover, #E53935));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ct-acc-font, 'Plus Jakarta Sans', sans-serif);
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.ct-mobile-drawer__user-info {
    min-width: 0;
}

.ct-mobile-drawer__name {
    font-family: var(--ct-acc-font, 'Plus Jakarta Sans', sans-serif);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ct-acc-dark);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ct-mobile-drawer__email {
    font-family: var(--ct-acc-font-body, 'DM Sans', sans-serif);
    font-size: 0.85rem;
    color: var(--ct-acc-gray, #6B7280);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ct-mobile-drawer__nav {
    flex: 1;
    padding: 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ct-mobile-drawer__nav-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    min-height: 52px;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 14px;
    font-family: var(--ct-acc-font-body, 'DM Sans', sans-serif);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--ct-acc-text);
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, color 0.15s ease;
    width: 100%;
    text-align: left;
}

.ct-mobile-drawer__nav-item:active {
    background: rgba(0, 0, 0, 0.04);
}

.ct-mobile-drawer__nav-item--active {
    background: rgba(239, 83, 80, 0.08);
    color: var(--ct-acc-red, #EF5350);
    font-weight: 600;
}

.ct-mobile-drawer__nav-item--active .ct-mobile-drawer__nav-icon {
    color: var(--ct-acc-red, #EF5350);
}

.ct-mobile-drawer__nav-icon {
    width: 24px;
    height: 24px;
    color: var(--ct-acc-gray, #6B7280);
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.ct-mobile-drawer__nav-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.ct-mobile-drawer__divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.06);
    margin: 10px 16px;
}

.ct-mobile-drawer__group-label {
    font-family: var(--ct-acc-font-body, 'DM Sans', sans-serif);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #90A4AE;
    padding: 8px 24px 2px;
}

.ct-mobile-drawer__nav-item--action {
    color: #90A4AE;
    font-weight: 400;
    font-size: 0.95rem;
}

.ct-mobile-drawer__nav-item--action:active {
    color: var(--ct-acc-red, #EF5350);
}

.ct-mobile-drawer__footer {
    padding: 16px 24px;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
    border-top: 1px solid rgba(229, 231, 235, 0.5);
}

.ct-mobile-drawer__logout {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    min-height: 52px;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 14px;
    font-family: var(--ct-acc-font-body, 'DM Sans', sans-serif);
    font-size: 1rem;
    font-weight: 500;
    color: var(--ct-acc-gray, #6B7280);
    width: 100%;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, color 0.15s ease;
}

.ct-mobile-drawer__logout:active {
    background: rgba(239, 68, 68, 0.06);
    color: var(--ct-acc-error, #EF4444);
}

.ct-mobile-drawer__logout svg {
    width: 22px;
    height: 22px;
}

/* ======================================================================
   Event Editor
   ====================================================================== */

/* V9 Two-column overlay overrides */
.ct-acc-overlay--event-editor .ct-acc-overlay__dialog { background: #FAFAFA; }
.ct-acc-overlay--event-editor .ct-acc-overlay__header {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(12px);
    border-bottom-color: rgba(0,0,0,0.05);
}
.ct-acc-overlay--event-editor .ct-acc-overlay__body { padding: 0; }
.ct-acc-overlay--event-editor .ct-acc-overlay__body-inner {
    max-width: 860px;
    padding: 24px 24px 40px;
}
.ct-acc-overlay--event-editor .ct-acc-overlay__footer {
    display: block;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(0,0,0,0.06);
    padding: 16px 24px;
}

/* Two-column grid */
.ct-ev-edit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* White cards */
.ct-ev-edit-card {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Field groups with dividers */
.ct-ev-edit-field-group {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #E5E7EB;
}
.ct-ev-edit-field-group:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.ct-ev-edit-form { padding-bottom: 16px; }

.ct-ev-edit-header { margin-bottom: 20px; }

.ct-ev-edit-title-input {
    font-size: 20px !important;
    font-weight: 700 !important;
    padding: 12px 14px !important;
}

/* Category chip */
.ct-ev-edit-cat-row { position: relative; margin-top: 8px; }

.ct-ev-edit-cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    background: color-mix(in srgb, var(--cat-color, #607D8B) 12%, transparent);
    color: var(--cat-color, #607D8B);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background 0.15s;
}
.ct-ev-edit-cat-chip:hover {
    background: color-mix(in srgb, var(--cat-color, #607D8B) 20%, transparent);
}
.ct-ev-edit-cat-chip__icon { display: flex; }
.ct-ev-edit-cat-chip__icon svg { width: 16px; height: 16px; }
.ct-ev-edit-cat-chip__arrow { opacity: 0.5; flex-shrink: 0; }

/* Category dropdown */
.ct-ev-edit-cat-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    margin-top: 4px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    padding: 6px;
    min-width: 200px;
}
.ct-ev-edit-cat-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-size: 13px;
    font-weight: 500;
    color: var(--cat-color, #607D8B);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}
.ct-ev-edit-cat-option:hover {
    background: color-mix(in srgb, var(--cat-color, #607D8B) 10%, transparent);
}
.ct-ev-edit-cat-option__icon { display: flex; }
.ct-ev-edit-cat-option__icon svg { width: 16px; height: 16px; }

/* Date/Time section */
.ct-ev-edit-datetime { /* uses ct-ev-edit-section */ }

.ct-ev-edit-section {
    margin-bottom: 20px;
    padding: 16px;
    background: #F9FAFB;
    border-radius: 12px;
}

.ct-ev-edit-section .ct-con-sec-title {
    margin-bottom: 12px;
}

/* Toggle (switch) rows */
.ct-ev-edit-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
}
.ct-ev-edit-switch-label {
    font-size: 14px;
    color: var(--ct-acc-dark, #1F2937);
}
.ct-ev-edit-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    cursor: pointer;
}
.ct-ev-edit-switch input { opacity: 0; width: 0; height: 0; }
.ct-ev-edit-switch__slider {
    position: absolute;
    inset: 0;
    background: #D1D5DB;
    border-radius: 12px;
    transition: background 0.2s;
}
.ct-ev-edit-switch__slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}
.ct-ev-edit-switch input:checked + .ct-ev-edit-switch__slider {
    background: var(--ct-acc-primary, #E53935);
}
.ct-ev-edit-switch input:checked + .ct-ev-edit-switch__slider::before {
    transform: translateX(20px);
}

/* Weekday buttons */
.ct-ev-edit-weekdays {
    display: flex;
    gap: 6px;
    padding: 8px 0;
    flex-wrap: wrap;
}
.ct-ev-edit-weekday {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #D1D5DB;
    background: #fff;
    color: var(--ct-acc-gray);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.ct-ev-edit-weekday:hover { border-color: var(--ct-acc-primary, #E53935); color: var(--ct-acc-primary, #E53935); }
.ct-ev-edit-weekday--active {
    background: var(--ct-acc-primary, #E53935);
    border-color: var(--ct-acc-primary, #E53935);
    color: #fff;
}

/* Attachment toggle grid */
.ct-ev-edit-toggle-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.ct-ev-edit-toggle-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    border: 2px solid #E5E7EB;
    border-radius: 12px;
    background: #fff;
    color: var(--ct-acc-gray);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.ct-ev-edit-toggle-btn:hover { border-color: var(--ct-acc-muted); }
.ct-ev-edit-toggle-btn--active {
    border-color: var(--ct-acc-primary, #E53935);
    color: var(--ct-acc-primary, #E53935);
    background: color-mix(in srgb, var(--ct-acc-primary, #E53935) 5%, #fff);
}
.ct-ev-edit-toggle-btn__icon { display: flex; }
.ct-ev-edit-toggle-btn__icon svg { width: 20px; height: 20px; }
.ct-ev-edit-toggle-btn__label { white-space: nowrap; }

/* Expandable sections */
.ct-ev-edit-expandable { animation: ct-ev-fadeIn 0.2s ease; }
@keyframes ct-ev-fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Todo rows */
.ct-ev-edit-todo-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.ct-ev-edit-todo-check {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--ct-acc-primary, #E53935);
}
.ct-ev-edit-todo-text { flex: 1; }
.ct-ev-edit-todo-remove {
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    color: var(--ct-acc-muted);
    font-size: 18px;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
}
.ct-ev-edit-todo-remove:hover { background: #FEE2E2; color: #EF4444; }

.ct-ev-edit-todo-add {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px dashed #D1D5DB;
    border-radius: 8px;
    background: none;
    color: var(--ct-acc-gray);
    font-size: 13px;
    cursor: pointer;
    margin-top: 4px;
    transition: all 0.15s;
}
.ct-ev-edit-todo-add:hover { border-color: var(--ct-acc-primary, #E53935); color: var(--ct-acc-primary, #E53935); }

/* Device list */
.ct-ev-edit-device-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ct-ev-edit-device-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 14px;
    color: var(--ct-acc-dark, #1F2937);
    cursor: pointer;
}
.ct-ev-edit-device-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--ct-acc-primary, #E53935);
}

/* Gallery grid */
.ct-ev-edit-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
}
.ct-ev-edit-gallery-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    background: #F3F4F6;
}
.ct-ev-edit-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ct-ev-edit-gallery-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
    color: #fff;
    border: none;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ct-ev-edit-gallery-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--ct-acc-muted);
}
.ct-ev-edit-gallery-add {
    aspect-ratio: 1;
    border: 2px dashed #D1D5DB;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 24px;
    color: var(--ct-acc-muted);
    transition: all 0.15s;
}
.ct-ev-edit-gallery-add:hover { border-color: var(--ct-acc-primary, #E53935); color: var(--ct-acc-primary, #E53935); }

/* Mobile responsive */
@media (max-width: 640px) {
    .ct-ev-edit-grid { grid-template-columns: 1fr; }
    .ct-ev-edit-card { padding: 20px; }
    .ct-acc-overlay--event-editor .ct-acc-overlay__body-inner { padding: 16px 16px 32px; }
    .ct-ev-edit-gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==========================================================================
   DARK MODE — Component Overrides
   [data-ct-theme="dark"] selectors for all account page components.
   Variables in :root / [data-ct-theme="dark"] handle ~70% of colors.
   These overrides catch hardcoded hex values and glass effects.
   ========================================================================== */

/* ---------- D1: Page Layout & Split Panels ---------- */
[data-ct-theme="dark"] .ct-split-form { background: #0f172a; }
[data-ct-theme="dark"] .ct-split-brand { background: linear-gradient(160deg, #0f172a 0%, #1e293b 100%); }
[data-ct-theme="dark"] .ct-split-brand--loading { background: #0f172a !important; }
[data-ct-theme="dark"] .ct-split-brand--authenticated {
    background: rgba(15, 23, 42, 0.85);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
}
[data-ct-theme="dark"] .ct-acc-sticky-top {
    background: rgba(15, 23, 42, 0.92);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
}
[data-ct-theme="dark"] .ct-acc-version { color: rgba(255, 255, 255, 0.18); }
/* Heartbeat loader dark mode */
[data-ct-theme="dark"] .ct-acc-heartbeat__content {
    background: rgba(15, 23, 42, 0.88);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 16px 64px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255,255,255,0.04) inset;
}
[data-ct-theme="dark"] .ct-acc-heartbeat__text { color: #64748b; }

/* ---------- D2: Auth Card & Form Elements ---------- */
[data-ct-theme="dark"] .ct-acc-card__icon { background: rgba(248, 113, 113, 0.12); }
[data-ct-theme="dark"] .ct-acc-input:focus {
    background: #1e293b;
    box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.15), 0 4px 12px rgba(248, 113, 113, 0.1);
}
[data-ct-theme="dark"] .ct-acc-code-input:focus {
    background: #1e293b;
    box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.15);
}
[data-ct-theme="dark"] .ct-acc-code-input.filled { background: rgba(248, 113, 113, 0.1); }
[data-ct-theme="dark"] .ct-acc-btn--primary:disabled { background: #334155; color: #64748b; }
[data-ct-theme="dark"] .ct-acc-btn--secondary:hover { background: #334155; }
[data-ct-theme="dark"] .ct-acc-skel {
    background: linear-gradient(90deg, #334155 25%, #1e293b 50%, #334155 75%);
    background-size: 200% 100%;
}
/* Loading overlay */
[data-ct-theme="dark"] .ct-acc-loading {
    background: rgba(15, 23, 42, 0.92);
}
[data-ct-theme="dark"] .ct-acc-loading__spinner {
    border-color: #334155;
    border-top-color: var(--ct-acc-red);
}
/* Error message */
[data-ct-theme="dark"] .ct-acc-error {
    background: rgba(153, 27, 27, 0.15);
    border-color: rgba(248, 113, 113, 0.25);
    color: #fca5a5;
}
[data-ct-theme="dark"] .ct-acc-error__close { color: #fca5a5; }

/* ---------- D3: Dashboard & Profile Panels ---------- */
[data-ct-theme="dark"] .ct-acc-dashboard__badge { background: rgba(248, 113, 113, 0.12); }
[data-ct-theme="dark"] .ct-acc-dashboard__info { background: rgba(30, 41, 59, 0.6); }
[data-ct-theme="dark"] .ct-acc-profile .ct-acc-dashboard__info { background: #1e293b; border-color: #334155; }
[data-ct-theme="dark"] .ct-acc-profile__subscription { background: #1e293b; border-color: #334155; }
[data-ct-theme="dark"] .ct-acc-profile__actions { background: #1e293b; border-color: #334155; }
[data-ct-theme="dark"] .ct-acc-action-btn { border-color: #334155; }
[data-ct-theme="dark"] .ct-acc-action-btn:hover { background: #263548; }
[data-ct-theme="dark"] .ct-acc-action-btn--danger:hover { background: rgba(248, 113, 113, 0.1); }
[data-ct-theme="dark"] .ct-acc-subscription__invoice-btn { background: #1e293b; border-color: #334155; }
[data-ct-theme="dark"] .ct-acc-subscription__invoice-btn:hover { background: #263548; }
[data-ct-theme="dark"] .ct-acc-subscription__invoice-btn__icon { background: rgba(79, 70, 229, 0.15); }
[data-ct-theme="dark"] .ct-acc-subscription__status--active { color: #34d399; background: rgba(52, 211, 153, 0.15); }
[data-ct-theme="dark"] .ct-acc-subscription__status--expired { color: #f87171; background: rgba(248, 113, 113, 0.15); }
[data-ct-theme="dark"] .ct-acc-subscription__status--free { color: #94a3b8; background: #1e293b; }
[data-ct-theme="dark"] .ct-acc-tag--green { color: #34d399; background: rgba(52, 211, 153, 0.15); }
[data-ct-theme="dark"] .ct-acc-tag--orange { color: #fbbf24; background: rgba(251, 191, 36, 0.15); }
[data-ct-theme="dark"] .ct-acc-tag--red { color: #f87171; background: rgba(248, 113, 113, 0.15); }

/* ---------- D4: Account Grid (Dashboard 2-col layout) ---------- */
[data-ct-theme="dark"] .ct-acc-account-grid__col {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.88), rgba(30, 41, 59, 0.62));
    border-color: rgba(51, 65, 85, 0.8);
}
[data-ct-theme="dark"] .ct-acc-account-grid__col:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

/* ---------- D5: Subscription Timeline ---------- */
[data-ct-theme="dark"] .ct-acc-sub-tl { background: rgba(30, 41, 59, 0.6); }
[data-ct-theme="dark"] .ct-acc-sub-tl__bar::before { background: #334155; }

/* ---------- D6: Device Cards ---------- */
[data-ct-theme="dark"] .ct-acc-device-card { background: #1e293b; border-color: #334155; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); }
[data-ct-theme="dark"] .ct-acc-device-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); }
[data-ct-theme="dark"] .ct-acc-devices__empty { background: #1e293b; border-color: #334155; }
[data-ct-theme="dark"] .ct-dev-input { background: #1e293b; border-color: #334155; color: #cbd5e1; }

/* ---------- D7: Overlay System (all variants) ---------- */
[data-ct-theme="dark"] .ct-acc-overlay { background: rgba(0, 0, 0, 0.7); }
[data-ct-theme="dark"] .ct-acc-overlay__dialog { background: #0f172a; }
[data-ct-theme="dark"] .ct-acc-overlay__header { border-bottom-color: #334155; }
[data-ct-theme="dark"] .ct-acc-overlay__footer { border-top-color: #334155; }
[data-ct-theme="dark"] .ct-acc-overlay__back,
[data-ct-theme="dark"] .ct-acc-overlay__close { background: #1e293b; color: #cbd5e1; }
[data-ct-theme="dark"] .ct-acc-overlay__back:hover,
[data-ct-theme="dark"] .ct-acc-overlay__close:hover { background: #334155; }
/* Specific overlay dialog backgrounds */
[data-ct-theme="dark"] .ct-acc-overlay--edit-device .ct-acc-overlay__dialog,
[data-ct-theme="dark"] .ct-acc-overlay--contact-viewer .ct-acc-overlay__dialog,
[data-ct-theme="dark"] .ct-acc-overlay--event-viewer .ct-acc-overlay__dialog,
[data-ct-theme="dark"] .ct-acc-overlay--contact-editor .ct-acc-overlay__dialog,
[data-ct-theme="dark"] .ct-acc-overlay--event-editor .ct-acc-overlay__dialog { background: #0f172a; }
/* Overlay header/footer glass */
[data-ct-theme="dark"] .ct-acc-overlay--edit-device .ct-acc-overlay__header,
[data-ct-theme="dark"] .ct-acc-overlay--contact-viewer .ct-acc-overlay__header,
[data-ct-theme="dark"] .ct-acc-overlay--event-viewer .ct-acc-overlay__header,
[data-ct-theme="dark"] .ct-acc-overlay--contact-editor .ct-acc-overlay__header,
[data-ct-theme="dark"] .ct-acc-overlay--event-editor .ct-acc-overlay__header {
    background: rgba(15, 23, 42, 0.85);
    border-bottom-color: rgba(51, 65, 85, 0.5);
}
[data-ct-theme="dark"] .ct-acc-overlay--edit-device .ct-acc-overlay__footer,
[data-ct-theme="dark"] .ct-acc-overlay--contact-editor .ct-acc-overlay__footer,
[data-ct-theme="dark"] .ct-acc-overlay--event-editor .ct-acc-overlay__footer {
    background: rgba(15, 23, 42, 0.9);
    border-top-color: rgba(51, 65, 85, 0.5);
}

/* ---------- D8: Device Editor — Hero & Sections ---------- */
[data-ct-theme="dark"] .ct-dev-hero {
    background: linear-gradient(160deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.95) 50%, rgba(30, 41, 59, 0.95) 100%);
    border-bottom-color: rgba(51, 65, 85, 0.6);
}
[data-ct-theme="dark"] .ct-dev-hero--event {
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--ct-ev-color, #607D8B) 12%, #0f172a) 0%,
        color-mix(in srgb, var(--ct-ev-color, #607D8B) 16%, #1e293b) 50%,
        color-mix(in srgb, var(--ct-ev-color, #607D8B) 10%, #0f172a) 100%);
}
[data-ct-theme="dark"] .ct-dev-sec {
    background: rgba(30, 41, 59, 0.82);
    border-color: rgba(51, 65, 85, 0.5);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
[data-ct-theme="dark"] .ct-dev-ac { background: rgba(30, 41, 59, 0.7); }
[data-ct-theme="dark"] .ct-dev-ac.ct-dev-ac--sel { background: #1e293b; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15); }
[data-ct-theme="dark"] .ct-dev-ac--admin .ct-dev-ac__icon { background: rgba(248, 113, 113, 0.15); color: #f87171; }
[data-ct-theme="dark"] .ct-dev-ac--member .ct-dev-ac__icon { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }

/* ---------- D9: Contact Viewer ---------- */
[data-ct-theme="dark"] .ct-con-action__icon {
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(51, 65, 85, 0.5);
}
[data-ct-theme="dark"] .ct-con-action:hover .ct-con-action__icon {
    background: rgba(30, 41, 59, 0.95);
}
[data-ct-theme="dark"] .ct-con-row { border-bottom-color: rgba(51, 65, 85, 0.4); }
[data-ct-theme="dark"] .ct-con-badge--fav { background: rgba(248, 113, 113, 0.12); }
[data-ct-theme="dark"] .ct-con-badge--emergency { background: rgba(248, 113, 113, 0.12); }
[data-ct-theme="dark"] .ct-ev-confirm-row {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(51, 65, 85, 0.3);
}

/* ---------- D10: Contact Editor ---------- */
[data-ct-theme="dark"] .ct-con-edit-section { background: #1e293b; }
[data-ct-theme="dark"] .ct-con-sec-title { color: #94a3b8; }
[data-ct-theme="dark"] .ct-con-edit-multi__remove:hover { background: rgba(248, 113, 113, 0.1); }
[data-ct-theme="dark"] .ct-con-edit-error { background: rgba(248, 113, 113, 0.08); }
[data-ct-theme="dark"] .ct-acc-contact-card { background: #1e293b; }
[data-ct-theme="dark"] .ct-acc-contact-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); }

/* ---------- D11: Event Viewer — Chat & Sections ---------- */
[data-ct-theme="dark"] .ct-acc-ev-viewer__chat-bubble { background: #1e293b; }
[data-ct-theme="dark"] .ct-acc-ev-viewer__chat-bubble--web { background: rgba(59, 130, 246, 0.15); }
[data-ct-theme="dark"] .ct-acc-ev-viewer__chat-bubble[data-color="0"] { background: rgba(59, 130, 246, 0.12); }
[data-ct-theme="dark"] .ct-acc-ev-viewer__chat-bubble[data-color="1"] { background: rgba(52, 211, 153, 0.12); }
[data-ct-theme="dark"] .ct-acc-ev-viewer__chat-bubble[data-color="2"] { background: rgba(251, 146, 60, 0.12); }
[data-ct-theme="dark"] .ct-acc-ev-viewer__chat-bubble[data-color="3"] { background: rgba(168, 85, 247, 0.12); }
[data-ct-theme="dark"] .ct-acc-ev-viewer__chat-bubble[data-color="4"] { background: rgba(45, 212, 191, 0.12); }
[data-ct-theme="dark"] .ct-acc-ev-viewer__chat-bubble[data-color="5"] { background: rgba(244, 114, 182, 0.12); }
[data-ct-theme="dark"] .ct-acc-ev-viewer__chat-bubble[data-color="6"] { background: rgba(250, 204, 21, 0.12); }
[data-ct-theme="dark"] .ct-acc-ev-viewer__chat-bubble[data-color="7"] { background: rgba(99, 102, 241, 0.12); }
[data-ct-theme="dark"] .ct-acc-ev-viewer__chat-input-bar {
    background: rgba(30, 41, 59, 0.7);
    border-color: #334155;
}
[data-ct-theme="dark"] .ct-acc-ev-viewer__chat-input::placeholder { color: #64748b; }
[data-ct-theme="dark"] .ct-acc-ev-viewer__chat-send { background: #475569; }
[data-ct-theme="dark"] .ct-acc-ev-viewer__section { border-bottom-color: #334155; }

/* ---------- D12: Events Timeline ---------- */
[data-ct-theme="dark"] .ct-acc-events__day {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.88), rgba(30, 41, 59, 0.62));
    border-color: rgba(51, 65, 85, 0.8);
}
[data-ct-theme="dark"] .ct-acc-events__day-header {
    color: #94a3b8;
    background: rgba(15, 23, 42, 0.75);
}
[data-ct-theme="dark"] .ct-acc-events__day-header--today { color: #f87171; }
[data-ct-theme="dark"] .ct-acc-events__day--empty .ct-acc-events__day-header {
    color: #475569;
    border-bottom-color: #334155;
}
[data-ct-theme="dark"] .ct-acc-event-card { background: #1e293b; border-color: #334155; }
[data-ct-theme="dark"] .ct-acc-event-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); }

/* ---------- D13: Calendar Widget ---------- */
[data-ct-theme="dark"] .ct-acc-events__cal-panel {
    background: #1e293b;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 8px 28px rgba(0, 0, 0, 0.2);
}
[data-ct-theme="dark"] .ct-acc-ev-cal-cell { color: #cbd5e1; }
[data-ct-theme="dark"] .ct-acc-ev-cal-cell:hover { background: #334155; }
[data-ct-theme="dark"] .ct-acc-ev-cal-cell--other { color: #475569; }
[data-ct-theme="dark"] .ct-acc-ev-cal-cell--other:hover { background: transparent; }
[data-ct-theme="dark"] .ct-acc-ev-cal-cell--today { background: #f87171; color: #fff; box-shadow: 0 4px 16px rgba(248, 113, 113, 0.35); }
[data-ct-theme="dark"] .ct-acc-ev-cal-cell--today:hover { background: #ef4444; }
[data-ct-theme="dark"] .ct-acc-ev-cal-cell--selected { background: #f1f5f9; color: #0f172a !important; box-shadow: 0 4px 14px rgba(241, 245, 249, 0.15); }
[data-ct-theme="dark"] .ct-acc-ev-cal-cell--selected:hover { background: #e2e8f0; }
[data-ct-theme="dark"] .ct-acc-ev-cal-grid__day-label { color: #475569; }
[data-ct-theme="dark"] .ct-acc-ev-month-nav__btn:hover { background: #334155; color: #cbd5e1; }
[data-ct-theme="dark"] .ct-acc-ev-month-picker {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
}
[data-ct-theme="dark"] .ct-acc-ev-month-picker__year-btn:hover { background: #334155; }
[data-ct-theme="dark"] .ct-acc-ev-month-picker__month:hover { background: #334155; }

/* ---------- D14: Event Category Filter Chips ---------- */
[data-ct-theme="dark"] .ct-acc-ev-catfilter__chip {
    background: #1e293b;
    border-color: var(--chip-color, #334155);
}
[data-ct-theme="dark"] .ct-acc-ev-catfilter__chip:hover {
    background: color-mix(in srgb, var(--chip-color, #475569) 12%, #1e293b);
}

/* ---------- D15: Tabs & Navigation ---------- */
[data-ct-theme="dark"] .ct-acc-tabs {
    background: rgba(30, 41, 59, 0.85);
    border-color: rgba(51, 65, 85, 0.5);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
[data-ct-theme="dark"] .ct-acc-tabs__slider {
    background: #334155;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);
}
[data-ct-theme="dark"] .ct-acc-tabs__btn { color: #64748b; }
[data-ct-theme="dark"] .ct-acc-tabs__btn:hover { color: #94a3b8; }
[data-ct-theme="dark"] .ct-acc-tabs__btn--active { color: #f1f5f9; }
[data-ct-theme="dark"] .ct-acc-nav__item { background: #1e293b; }
[data-ct-theme="dark"] .ct-acc-nav__item:hover,
[data-ct-theme="dark"] .ct-acc-nav__item.active { background: #263548; }
[data-ct-theme="dark"] .ct-acc-nav__divider { background: rgba(255, 255, 255, 0.08); }
[data-ct-theme="dark"] .ct-acc-nav__group-label { color: #64748b; }

/* ---------- D16: Gallery & Lightbox ---------- */
[data-ct-theme="dark"] .ct-acc-gallery-item { background: #1e293b; }
[data-ct-theme="dark"] .ct-acc-lightbox__sheet {
    background: rgba(15, 23, 42, 0.95);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-top-color: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
}
[data-ct-theme="dark"] .ct-acc-lightbox__sheet::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); }
/* Sheet handle (top bar) */
[data-ct-theme="dark"] .ct-acc-lightbox__sheet-handle {
    background: rgba(15, 23, 42, 0.95);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}
/* Peek date */
[data-ct-theme="dark"] .ct-acc-lightbox__sheet-peek-date { color: rgba(255, 255, 255, 0.5); }
/* Description input */
[data-ct-theme="dark"] .ct-acc-lightbox__desc-input {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
}
[data-ct-theme="dark"] .ct-acc-lightbox__desc-input:focus { border-color: rgba(255, 255, 255, 0.25); }
[data-ct-theme="dark"] .ct-acc-lightbox__desc-input::placeholder { color: rgba(255, 255, 255, 0.3); }
/* Description text */
[data-ct-theme="dark"] .ct-acc-lightbox__desc { color: rgba(255, 255, 255, 0.75); }
/* Section head line + chevron */
[data-ct-theme="dark"] .ct-acc-lightbox__section-head::before { background: rgba(255, 255, 255, 0.08); }
[data-ct-theme="dark"] .ct-acc-lightbox__section-head::after { color: rgba(255, 255, 255, 0.35); }
/* Meta cards */
[data-ct-theme="dark"] .ct-acc-lightbox__meta-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}
[data-ct-theme="dark"] .ct-acc-lightbox__meta-label { color: rgba(255, 255, 255, 0.4); }
[data-ct-theme="dark"] .ct-acc-lightbox__meta-value { color: #e2e8f0; }
/* Tags */
[data-ct-theme="dark"] .ct-acc-lightbox__tag {
    background: rgba(239, 83, 80, 0.15);
    border-color: rgba(239, 83, 80, 0.25);
}
/* Color swatches */
[data-ct-theme="dark"] .ct-acc-lightbox__color-item {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}
[data-ct-theme="dark"] .ct-acc-lightbox__color-dot { border-color: rgba(255, 255, 255, 0.15); }
[data-ct-theme="dark"] .ct-acc-lightbox__color-text { color: rgba(255, 255, 255, 0.55); }
/* Camera cells */
[data-ct-theme="dark"] .ct-acc-lightbox__camera-cell {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}
[data-ct-theme="dark"] .ct-acc-lightbox__camera-value { color: #e2e8f0; }
[data-ct-theme="dark"] .ct-acc-lightbox__camera-label { color: rgba(255, 255, 255, 0.4); }
/* Location card */
[data-ct-theme="dark"] .ct-acc-lightbox__location {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}
[data-ct-theme="dark"] .ct-acc-lightbox__location-addr { color: rgba(255, 255, 255, 0.75); }
[data-ct-theme="dark"] .ct-acc-lightbox__location-coords { color: rgba(255, 255, 255, 0.4); }
/* Face cards */
[data-ct-theme="dark"] .ct-acc-lightbox__face {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}
[data-ct-theme="dark"] .ct-acc-lightbox__face-detail { color: rgba(255, 255, 255, 0.55); }
/* OCR text */
[data-ct-theme="dark"] .ct-acc-lightbox__ocr-text {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.75);
}
/* Save button */
[data-ct-theme="dark"] .ct-acc-lightbox__desc-save {
    background: rgba(239, 83, 80, 0.2);
    border-color: rgba(239, 83, 80, 0.35);
}
[data-ct-theme="dark"] .ct-acc-lightbox__desc-save:hover { background: rgba(239, 83, 80, 0.35); }

/* ---------- D17: Usage Dashboard ---------- */
[data-ct-theme="dark"] .ct-acc-usage__card {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.85), rgba(30, 41, 59, 0.6));
    border-color: rgba(51, 65, 85, 0.8);
}
[data-ct-theme="dark"] .ct-acc-usage__progress { background: #334155; }
[data-ct-theme="dark"] .ct-acc-usage__progress-skeleton {
    background: linear-gradient(90deg, #334155, #1e293b, #334155);
}

/* ---------- D18: Toggles & Holidays ---------- */
[data-ct-theme="dark"] .ct-acc-toggle__switch { background: #475569; }
[data-ct-theme="dark"] .ct-acc-toggle__switch::after { background: #e2e8f0; }
[data-ct-theme="dark"] .ct-acc-hol-card { background: #1e293b; border-color: #334155; }
[data-ct-theme="dark"] .ct-acc-hol-save-bar { background: linear-gradient(to top, #0f172a 60%, rgba(15, 23, 42, 0)); }

/* ---------- D19: Assistants ---------- */
[data-ct-theme="dark"] .ct-acc-assistant-card {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.88), rgba(30, 41, 59, 0.62));
    border-color: rgba(51, 65, 85, 0.8);
}
[data-ct-theme="dark"] .ct-acc-info-btn { background: #1e293b; border-color: #334155; color: #94a3b8; }
[data-ct-theme="dark"] .ct-acc-ast-section { background: #1e293b; border-color: #334155; }
[data-ct-theme="dark"] .ct-acc-ast-row { border-top-color: rgba(51, 65, 85, 0.5); }
[data-ct-theme="dark"] .ct-acc-ast-control--select {
    background-color: #0f172a;
    border-color: #334155;
    color: #f1f5f9;
}

/* ---------- D20: Subscription Purchase Flow ---------- */
[data-ct-theme="dark"] .ct-acc-steps__line { background: #334155; }
[data-ct-theme="dark"] .ct-acc-plan-card { background: #1e293b; border-color: #334155; }
[data-ct-theme="dark"] .ct-acc-plan-card:hover { border-color: #f87171; background: #263548; }
[data-ct-theme="dark"] .ct-acc-plan-card--selected { border-color: #c8102e; background: rgba(200, 16, 46, 0.08); }
[data-ct-theme="dark"] .ct-acc-cycle-row { border-color: #334155; background: #1e293b; }
[data-ct-theme="dark"] .ct-acc-cycle-row:hover { border-color: #f87171; }
[data-ct-theme="dark"] .ct-acc-cycle-row--selected {
    border-color: #c8102e;
    background: linear-gradient(135deg, rgba(200, 16, 46, 0.04) 0%, rgba(200, 16, 46, 0.1) 100%);
}
[data-ct-theme="dark"] .ct-acc-review__summary { background: #1e293b; border-color: #334155; }
[data-ct-theme="dark"] .ct-acc-review__choice { background: #0f172a; }
[data-ct-theme="dark"] .ct-acc-review__step-card { background: #1e293b; border-color: #334155; }
[data-ct-theme="dark"] .ct-acc-review__step-card:hover { background: #263548; }
[data-ct-theme="dark"] .ct-acc-review__notice { background: rgba(248, 113, 113, 0.08); border-color: rgba(248, 113, 113, 0.2); }
[data-ct-theme="dark"] .ct-acc-review__benefit-list li:hover { background: #263548; }
[data-ct-theme="dark"] .ct-acc-checkout-summary { background: #1e293b; border-color: #334155; }
[data-ct-theme="dark"] .ct-acc-checkout-grid__left,
[data-ct-theme="dark"] .ct-acc-checkout-grid__right { background: #1e293b; }
[data-ct-theme="dark"] .ct-acc-checkout-result { background: #1e293b; }
[data-ct-theme="dark"] .ct-acc-stripe-mock__method { background: #1e293b; border-color: #334155; }
[data-ct-theme="dark"] .ct-acc-stripe-mock__method:hover { background: #263548; border-color: #475569; }
[data-ct-theme="dark"] .ct-acc-stripe-mock__submit-bar { background: #1e293b; border-color: #334155; }

/* ---------- D21: Password Reset ---------- */
[data-ct-theme="dark"] .ct-acc-pw-rules li { color: #64748b; }
[data-ct-theme="dark"] .ct-acc-pw-rules li.valid { color: #34d399; }
[data-ct-theme="dark"] .ct-acc-pw-check { background: #334155; }
[data-ct-theme="dark"] .ct-acc-pw-rules li.valid .ct-acc-pw-check { background: rgba(52, 211, 153, 0.15); }
[data-ct-theme="dark"] .ct-acc-pw-toggle { color: #64748b; }
[data-ct-theme="dark"] .ct-acc-pw-toggle:hover { color: #cbd5e1; }
[data-ct-theme="dark"] .ct-acc-notif-section-title { color: #94a3b8; }
[data-ct-theme="dark"] .ct-acc-qr-wrap canvas,
[data-ct-theme="dark"] .ct-acc-qr-wrap img { background: #fff; }

/* ---------- D22: Mobile Bottom Bar & Drawer ---------- */
@media (max-width: 900px) {
    [data-ct-theme="dark"] html.ct-acc-has-session .ct-mobile-bottom-bar {
        background: linear-gradient(135deg, rgba(15, 23, 42, 0.88), rgba(15, 23, 42, 0.72));
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
    }
    [data-ct-theme="dark"] html.ct-acc-has-session .ct-split-form {
        background: rgba(15, 23, 42, 0.55);
    }
}
[data-ct-theme="dark"] .ct-mobile-drawer {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.95));
    box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.3);
}
[data-ct-theme="dark"] .ct-mobile-drawer__header { border-bottom-color: rgba(51, 65, 85, 0.5); }
[data-ct-theme="dark"] .ct-mobile-drawer__close { background: #1e293b; color: #cbd5e1; }
[data-ct-theme="dark"] .ct-mobile-drawer__close:hover,
[data-ct-theme="dark"] .ct-mobile-drawer__close:active { background: #334155; }
[data-ct-theme="dark"] .ct-mobile-drawer__nav-item:active { background: rgba(255, 255, 255, 0.04); }
[data-ct-theme="dark"] .ct-mobile-drawer-backdrop { background: rgba(0, 0, 0, 0.6); }
[data-ct-theme="dark"] .ct-mobile-drawer__divider { background: rgba(255, 255, 255, 0.08); }
[data-ct-theme="dark"] .ct-mobile-drawer__group-label { color: #64748b; }
[data-ct-theme="dark"] .ct-mobile-drawer__nav-item--action { color: #64748b; }

/* ---------- D23: Event Editor ---------- */
[data-ct-theme="dark"] .ct-ev-edit-card { background: #1e293b; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); }
[data-ct-theme="dark"] .ct-ev-edit-section { background: #0f172a; }
[data-ct-theme="dark"] .ct-ev-edit-switch__slider { background: #475569; }
[data-ct-theme="dark"] .ct-ev-edit-weekday { border-color: #475569; background: #1e293b; }
[data-ct-theme="dark"] .ct-ev-edit-weekday.active { background: var(--ct-acc-primary, #E53935); border-color: var(--ct-acc-primary, #E53935); color: #fff; }
[data-ct-theme="dark"] .ct-ev-edit-toggle-btn { border-color: #334155; background: #1e293b; }
[data-ct-theme="dark"] .ct-ev-edit-toggle-btn.active { border-color: var(--ct-acc-primary, #E53935); }
[data-ct-theme="dark"] .ct-ev-edit-cat-dropdown { background: #1e293b; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); }
[data-ct-theme="dark"] .ct-ev-edit-gallery-add { border-color: #475569; color: #64748b; }
[data-ct-theme="dark"] .ct-ev-edit-gallery-add:hover { border-color: var(--ct-acc-primary, #E53935); color: var(--ct-acc-primary, #E53935); }

/* ---------- D24: Search Bar ---------- */
[data-ct-theme="dark"] .ct-acc-search__inner { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); border-color: #334155; }
[data-ct-theme="dark"] .ct-acc-search__inner:focus-within { border-color: #f87171; box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.15); }
[data-ct-theme="dark"] .ct-acc-search__mic:hover { background: rgba(248, 113, 113, 0.1); }
[data-ct-theme="dark"] .ct-acc-search__mic--active { background: rgba(248, 113, 113, 0.15); }

/* ---------- D25: Adventure Cards + Timeline ---------- */
[data-ct-theme="dark"] .ct-acc-adv-timeline::before { background: linear-gradient(to bottom, #334155, transparent); }
[data-ct-theme="dark"] .ct-acc-adv-timeline__dot { border-color: var(--ct-acc-bg, #0f172a); }
[data-ct-theme="dark"] .ct-acc-adv-card--hero { box-shadow: 0 8px 32px rgba(0,0,0,0.3); background: var(--ct-acc-bg-raised, #1e293b); }
[data-ct-theme="dark"] .ct-acc-adv-card--hero:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.4); }
[data-ct-theme="dark"] .ct-acc-adv-card__hero-body { background: var(--ct-acc-bg-raised, #1e293b); }
[data-ct-theme="dark"] .ct-acc-adv-card__hero-footer { border-color: #334155; }
[data-ct-theme="dark"] .ct-acc-adv-card--important { box-shadow: 0 0 0 2px rgba(244,67,54,0.4), 0 0 24px rgba(244,67,54,0.2), 0 8px 32px rgba(0,0,0,0.3); background: var(--ct-acc-bg-raised, #1e293b); }
[data-ct-theme="dark"] .ct-acc-adv-card--important:hover { box-shadow: 0 0 0 2px rgba(244,67,54,0.5), 0 0 32px rgba(244,67,54,0.25), 0 12px 40px rgba(0,0,0,0.4); }
[data-ct-theme="dark"] .ct-acc-adv-card__imp-body { background: var(--ct-acc-bg-raised, #1e293b); }
[data-ct-theme="dark"] .ct-acc-adv-card__imp-footer { border-color: #334155; }
[data-ct-theme="dark"] .ct-acc-adv-card__imp-tags .ct-acc-adv-card__tag,
[data-ct-theme="dark"] .ct-acc-adv-card__hero-tags .ct-acc-adv-card__tag { background: color-mix(in srgb, var(--ct-acc-text) 10%, transparent); color: #cbd5e1; }
[data-ct-theme="dark"] .ct-acc-adv-card__type-pill--inline { background: color-mix(in srgb, var(--pill-color, #607D8B) 20%, transparent); }
/* ── Adventure Viewer dark mode ── */
[data-ct-theme="dark"] .ct-acc-overlay--adventure-viewer .ct-acc-overlay__dialog { background: #0a0f1a; }
[data-ct-theme="dark"] .ct-acc-overlay--adventure-viewer .ct-acc-overlay__body { background: #0a0f1a; }
[data-ct-theme="dark"] .ct-acc-adv-viewer__gallery-hero { background: #0a0f1a; }
[data-ct-theme="dark"] .ct-acc-adv-viewer__sheet { background: #0f172a; }
[data-ct-theme="dark"] .ct-acc-adv-imp-dot { border-color: var(--ct-acc-bg-raised, #1e293b); }
[data-ct-theme="dark"] .ct-acc-adv-viewer__sheet .ct-acc-adv-imp-dot { border-color: #0f172a; }
[data-ct-theme="dark"] .ct-acc-adv-viewer__emotion-chip { background: rgba(254,249,195,0.1); border-color: rgba(255,224,130,0.2); color: #fbbf24; }
[data-ct-theme="dark"] .ct-acc-adv-viewer__mini-card { background: #1e293b; border-color: #334155; }
[data-ct-theme="dark"] .ct-acc-adv-viewer__mini-card-value { color: #e2e8f0; }
[data-ct-theme="dark"] .ct-acc-adv-viewer__comment-avatar { background: #334155; color: #94a3b8; }
[data-ct-theme="dark"] .ct-acc-adv-viewer__reaction { background: #1e293b; }
[data-ct-theme="dark"] .ct-acc-adv-viewer__reaction--clickable:hover { background: #334155; }
[data-ct-theme="dark"] .ct-acc-adv-viewer__action-btn { border-color: #475569; color: #cbd5e1; }
[data-ct-theme="dark"] .ct-acc-adv-viewer__action-btn:hover { background: #1e293b; border-color: #94a3b8; }
[data-ct-theme="dark"] .ct-adv-react-picker { background: #1e293b; box-shadow: 0 8px 32px rgba(0,0,0,0.4); }
[data-ct-theme="dark"] .ct-adv-react-picker__emoji:hover { background: #334155; }
[data-ct-theme="dark"] .ct-adv-react-picker__emoji-label { color: #94a3b8; }
[data-ct-theme="dark"] .ct-adv-device-picker { background: #1e293b; box-shadow: 0 8px 32px rgba(0,0,0,0.4); }
[data-ct-theme="dark"] .ct-adv-device-picker__title { color: #64748b; }
[data-ct-theme="dark"] .ct-adv-device-picker__item:hover { background: #334155; }
[data-ct-theme="dark"] .ct-adv-device-picker__avatar { background: #334155; }
[data-ct-theme="dark"] .ct-adv-device-picker__name { color: #e2e8f0; }
[data-ct-theme="dark"] .ct-acc-adv-viewer__comments-summary:hover { background: #1e293b; }
[data-ct-theme="dark"] .ct-acc-adv-comments__avatar { background: #334155; color: #94a3b8; }
[data-ct-theme="dark"] .ct-acc-adv-comments__bubble-body { background: #1e293b; color: #e2e8f0; }
[data-ct-theme="dark"] .ct-acc-adv-comments__bubble--mine .ct-acc-adv-comments__bubble-body { background: var(--ct-acc-brand, #E53935); color: #fff; }
[data-ct-theme="dark"] .ct-acc-adv-comments__bubble-author { color: #e2e8f0; }
[data-ct-theme="dark"] .ct-acc-adv-comments__input-bar { background: #0f172a; border-top-color: #334155; }
[data-ct-theme="dark"] .ct-acc-adv-comments__input { background: #1e293b; border-color: #475569; color: #e2e8f0; }
[data-ct-theme="dark"] .ct-acc-adv-viewer__audio-player { background: rgba(239,83,80,0.08); border-color: rgba(239,83,80,0.2); }
[data-ct-theme="dark"] .ct-acc-adv-viewer__audio-player .__audio-time { color: #94a3b8; }
[data-ct-theme="dark"] .ct-acc-adv-viewer__audio-player .__waveform-bar { background: var(--ct-acc-red-light, #FF8A80); }
[data-ct-theme="dark"] .ct-acc-adv-viewer__video-card { background: #1e293b; }
[data-ct-theme="dark"] .ct-acc-adv-viewer__video-card .__video-thumb { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); }
[data-ct-theme="dark"] .ct-acc-adv-viewer__video-card .__video-label { color: #64748b; }
[data-ct-theme="dark"] .ct-acc-adv-comments__input::placeholder { color: #64748b; }
[data-ct-theme="dark"] .ct-acc-adv-viewer__survey-bar { background: #1e293b; }
[data-ct-theme="dark"] .ct-acc-adv-edit-tag { background: #334155; border-color: #475569; color: #cbd5e1; }
[data-ct-theme="dark"] .ct-acc-adv-edit-tag-input-row button { background: #334155; border-color: #475569; color: #cbd5e1; }
[data-ct-theme="dark"] .ct-acc-adv-edit-tag-input-row button:hover { background: #475569; }
[data-ct-theme="dark"] .ct-acc-adv-edit-readonly-att { background: #1e293b; border-color: #334155; color: #cbd5e1; }
/* ── Adventure Timing dark mode ── */
[data-ct-theme="dark"] .ct-acc-adv-card__timing-badge--scheduled { background: rgba(245,158,11,0.15); color: #FCD34D; }
[data-ct-theme="dark"] .ct-acc-adv-card__timing-badge--scheduled svg { stroke: #FCD34D; }
[data-ct-theme="dark"] .ct-acc-adv-card__timing-badge--expired { background: rgba(239,68,68,0.15); color: #FCA5A5; }
[data-ct-theme="dark"] .ct-acc-adv-card__timing-badge--expired svg { stroke: #FCA5A5; }
[data-ct-theme="dark"] .ct-acc-adv-card__timing-badge--expiring { background: rgba(59,130,246,0.15); color: #93C5FD; }
[data-ct-theme="dark"] .ct-acc-adv-card__timing-badge--expiring svg { stroke: #93C5FD; }
[data-ct-theme="dark"] .ct-acc-adv-card--scheduled::before { border-color: #D97706; }
[data-ct-theme="dark"] .ct-acc-adv-viewer__timing { background: rgba(255,255,255,0.04); border-color: #334155; }
[data-ct-theme="dark"] .ct-acc-adv-viewer__timing-row--scheduled svg { stroke: #FCD34D; }
[data-ct-theme="dark"] .ct-acc-adv-viewer__timing-row--expired svg { stroke: #FCA5A5; }
[data-ct-theme="dark"] .ct-acc-adv-viewer__timing-row--active svg { stroke: #93C5FD; }
[data-ct-theme="dark"] .ct-acc-adv-card__att-icon { background: #1e293b; border-color: #334155; }
[data-ct-theme="dark"] .ct-acc-adv-loader__spinner { border-color: #475569; border-top-color: var(--ct-acc-brand, #818CF8); }
/* ---------- D26: Device Delete Dialog ---------- */
[data-ct-theme="dark"] .ct-dev-del-dialog { background: #1e293b; }
[data-ct-theme="dark"] .ct-dev-del__icon { background: rgba(248, 113, 113, 0.15); }
[data-ct-theme="dark"] .ct-dev-del__warn { background: rgba(248, 113, 113, 0.08); border-color: rgba(248, 113, 113, 0.2); }
[data-ct-theme="dark"] .ct-dev-delete-link:hover { background: rgba(248, 113, 113, 0.1); }
[data-ct-theme="dark"] .ct-unsaved-dialog { background: #1e293b; }

/* ---------- D27: Select/Dropdown Inputs ---------- */
[data-ct-theme="dark"] select.ct-acc-input,
[data-ct-theme="dark"] .ct-ev-edit-field select { background-color: #1e293b; color: #cbd5e1; }

/* ---------- D28: Invoices ---------- */
[data-ct-theme="dark"] .ct-acc-invoice-item:hover { background: #1e293b; }

/* ---------- D29: Manage Subscription ---------- */
[data-ct-theme="dark"] .ct-acc-manage-card { background: #1e293b; border-color: #334155; }
[data-ct-theme="dark"] .ct-acc-manage-card--danger .ct-acc-manage-card__icon { background: rgba(248, 113, 113, 0.12); }
[data-ct-theme="dark"] .ct-acc-manage-upsell { background: #1e293b; }

/* ---------- D30: Confirmation Dialogs ---------- */
[data-ct-theme="dark"] .ct-acc-confirm-dialog__icon--danger { background: rgba(248, 113, 113, 0.15); border-color: rgba(248, 113, 113, 0.2); }
[data-ct-theme="dark"] .ct-acc-confirm-dialog__icon--warning { background: rgba(251, 191, 36, 0.15); }

/* ---------- D31: Error/Warning/Status Banners ---------- */
[data-ct-theme="dark"] .ct-acc-subscription__status--past-due { background: rgba(248, 113, 113, 0.15); color: #f87171; }
[data-ct-theme="dark"] .ct-acc-subscription-error { background: rgba(248, 113, 113, 0.08); }
[data-ct-theme="dark"] .ct-acc-subscription__cancel-notice { background: rgba(248, 113, 113, 0.08); border-color: rgba(248, 113, 113, 0.2); }
[data-ct-theme="dark"] .ct-acc-reactivate-banner { background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.3); }

/* ---------- D32: Registration Form ---------- */
[data-ct-theme="dark"] .ct-acc-reg-input { background: #1e293b; border-color: #334155; color: #cbd5e1; }
[data-ct-theme="dark"] .ct-acc-reg-dropdown { background: #1e293b; border-color: #334155; color: #cbd5e1; }
[data-ct-theme="dark"] .ct-acc-reg-select { background-color: #1e293b; border-color: #334155; color: #cbd5e1; }
[data-ct-theme="dark"] .ct-acc-reg-country__option--active { background: rgba(248, 113, 113, 0.1); }
[data-ct-theme="dark"] .ct-acc-reg-country__info { background: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.25); }
[data-ct-theme="dark"] .ct-acc-reg-sso { background: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.25); }

/* ---------- D33: Misc Hardcoded Backgrounds ---------- */
[data-ct-theme="dark"] .ct-acc-cycle-reassurance { color: #94a3b8; }
[data-ct-theme="dark"] .ct-acc-checkout-trust { color: #94a3b8; }
[data-ct-theme="dark"] .ct-acc-review__trust { color: #94a3b8; }
[data-ct-theme="dark"] .ct-acc-review__benefit-tag { background: #1e293b; border-color: #334155; }
[data-ct-theme="dark"] .ct-acc-review__payment-method { background: #1e293b; border-color: #334155; }
[data-ct-theme="dark"] .ct-acc-success-chip { background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.25); }
[data-ct-theme="dark"] .ct-acc-hol-picker-input { background: #1e293b; border-color: #334155; }

/* ---------- D34: Dashboard Glass Cards ---------- */
[data-ct-theme="dark"] .ct-dash__card {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.88), rgba(30, 41, 59, 0.62));
    border-color: rgba(51, 65, 85, 0.8);
}
[data-ct-theme="dark"] .ct-dash__card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

/* ---------- D35: Dashboard Activity Metrics ---------- */
[data-ct-theme="dark"] .ct-dash__metric {
    --metric-bg: rgba(255, 255, 255, 0.04);
}
[data-ct-theme="dark"] .ct-dash__metric:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* ---------- D36: Dashboard Device Cards ---------- */
[data-ct-theme="dark"] .ct-dash__device-item {
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(51, 65, 85, 0.6);
}
[data-ct-theme="dark"] .ct-dash__device-item:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
[data-ct-theme="dark"] .ct-dash__device-avatar--icon {
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.15), rgba(248, 113, 113, 0.08));
}
[data-ct-theme="dark"] .ct-dash__device-call {
    border-color: rgba(52, 211, 153, 0.3);
    background: rgba(52, 211, 153, 0.12);
    color: #34d399;
}
[data-ct-theme="dark"] .ct-dash__device-call:hover {
    box-shadow: 0 2px 8px rgba(52, 211, 153, 0.2);
}
[data-ct-theme="dark"] .ct-dash__device-call--video {
    border-color: rgba(96, 165, 250, 0.3);
    background: rgba(96, 165, 250, 0.12);
    color: #60a5fa;
}
[data-ct-theme="dark"] .ct-dash__device-call--video:hover {
    box-shadow: 0 2px 8px rgba(96, 165, 250, 0.2);
}
[data-ct-theme="dark"] .ct-dash__devices-more {
    border-color: rgba(51, 65, 85, 0.8);
}
[data-ct-theme="dark"] .ct-dash__devices-more:hover {
    border-color: #f1f5f9;
}

/* ---------- D37: Subscription Payment Timeline ---------- */
[data-ct-theme="dark"] .ct-acc-sub-tl__dot {
    background: #0f172a;
}
[data-ct-theme="dark"] .ct-acc-timeline__dot {
    box-shadow: 0 0 0 4px #0f172a;
}
[data-ct-theme="dark"] .ct-acc-timeline__dot--green {
    box-shadow: 0 0 0 4px #0f172a, 0 0 0 6px rgba(22, 163, 74, 0.3);
}
[data-ct-theme="dark"] .ct-acc-timeline__dot--blue {
    box-shadow: 0 0 0 4px #0f172a, 0 0 0 6px rgba(59, 130, 246, 0.3);
}
[data-ct-theme="dark"] .ct-acc-timeline__bar-label {
    background: #0f172a;
}

/* ---------- D38: Edit Profile Inputs & Intro Box ---------- */
[data-ct-theme="dark"] .ct-acc-edit-profile__input,
[data-ct-theme="dark"] .ct-acc-edit-profile__select {
    background: #1e293b;
    color: #cbd5e1;
}
[data-ct-theme="dark"] .ct-acc-edit-profile__intro {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.2);
}
[data-ct-theme="dark"] .ct-acc-edit-profile__intro-icon {
    color: #60a5fa;
}

/* ---------- D39: Contact Editor Input ---------- */
[data-ct-theme="dark"] .ct-con-edit-input {
    background: #1e293b;
    color: #cbd5e1;
}
[data-ct-theme="dark"] .ct-con-edit-input:focus {
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.15);
}

/* ---------- D40: Birthday Picker ---------- */
[data-ct-theme="dark"] .ct-bday-picker {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(51, 65, 85, 0.6);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
[data-ct-theme="dark"] .ct-bday-display__clear:hover {
    background: #1e293b;
}

/* ---------- D41: Event Device Filter & Card v3 ---------- */
[data-ct-theme="dark"] .ct-acc-ev-devfilter__select {
    background-color: #1e293b;
    color: #cbd5e1;
}
[data-ct-theme="dark"] .ct-acc-event-card--v3:hover {
    background: rgba(30, 41, 59, 0.5);
}
[data-ct-theme="dark"] .ct-acc-event-card--v3 {
    border-bottom-color: rgba(51, 65, 85, 0.5);
}

/* ---------- D41b: Event Indicator Pills & Target Row ---------- */
[data-ct-theme="dark"] .ct-acc-event-card__indicator { background: rgba(255,255,255,0.06); color: #64748b; }
[data-ct-theme="dark"] .ct-acc-event-card__indicator--medInfo { color: #f87171; background: rgba(248,113,113,0.1); }
[data-ct-theme="dark"] .ct-acc-event-card__indicator--confirmation { color: #34d399; background: rgba(52,211,153,0.1); }
[data-ct-theme="dark"] .ct-acc-event-card__indicator--confirmed { color: #34d399; background: rgba(52,211,153,0.12); }
[data-ct-theme="dark"] .ct-acc-event-card__indicator--speech { color: #a78bfa; background: rgba(167,139,250,0.1); }
[data-ct-theme="dark"] .ct-acc-event-card__indicator--link { color: #60a5fa; background: rgba(96,165,250,0.1); }
[data-ct-theme="dark"] .ct-acc-event-card__target-avatar { border-color: #334155; }
[data-ct-theme="dark"] .ct-acc-event-card__target-avatar--icon { background: rgba(255,255,255,0.06); }
[data-ct-theme="dark"] .ct-acc-event-card--v3 .ct-acc-event-card__bottom { border-top-color: rgba(51,65,85,0.3); }

/* ---------- D42: Stripe Checkout Boxes ---------- */
[data-ct-theme="dark"] .ct-acc-stripe-mock__redirect-box {
    background: #1e293b;
    border-color: #334155;
}
[data-ct-theme="dark"] .ct-acc-stripe-mock__redirect-icon {
    background: #0f172a;
}

/* ---------- D45: Subscription Plan Badge ---------- */
[data-ct-theme="dark"] .ct-acc-subscription__plan-badge {
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.1) 0%, rgba(255, 112, 67, 0.08) 100%);
    border-color: rgba(248, 113, 113, 0.2);
}

/* ---------- D44: Event Category Card Background ---------- */
[data-ct-theme="dark"] .ct-acc-event-card--v3 .ct-acc-event-card__cat-bar {
    background: color-mix(in srgb, var(--card-cat-color) 15%, #1e293b);
}

/* ==========================================================================
   Dashboard: Today Card
   ========================================================================== */

.ct-dash__card--today {
    --glow-color: #3B82F6;
}

.ct-dash-today__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.ct-dash-today__clock {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--ct-acc-font);
    color: var(--ct-acc-dark, #1e293b);
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}

.ct-dash-today__date {
    font-size: 0.88rem;
    color: var(--ct-acc-gray, #64748b);
    margin-bottom: 16px;
    font-family: var(--ct-acc-font);
}

/* Day progress bar */
.ct-dash-today__daybar {
    position: relative;
    height: 6px;
    background: rgba(148, 163, 184, 0.15);
    border-radius: 3px;
    margin-bottom: 6px;
    overflow: visible;
}

.ct-dash-today__daybar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #3B82F6, #60A5FA);
    transition: width 1s ease;
}

.ct-dash-today__daybar-now {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #3B82F6;
    border: 2px solid #fff;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
    animation: ct-dash-now-pulse 2s ease-in-out infinite;
    z-index: 1;
}

@keyframes ct-dash-now-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3); }
    50% { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.15); }
}

.ct-dash-today__daybar-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--ct-acc-gray, #94a3b8);
    font-family: var(--ct-acc-font);
    margin-bottom: 16px;
}

/* Body: timeline + summary */
.ct-dash-today__body {
    display: flex;
    gap: 20px;
    margin-top: 8px;
}

.ct-dash-today__timeline {
    flex: 1;
    min-width: 0;
}

.ct-dash-today__summary {
    width: 200px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Fullday chips */
.ct-dash-today__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.ct-dash-today__chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: var(--ct-acc-font);
    background: color-mix(in srgb, var(--chip-color) 12%, transparent);
    color: var(--chip-color);
    border: 1px solid color-mix(in srgb, var(--chip-color) 25%, transparent);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ct-dash-today__chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--chip-color) 20%, transparent);
}

/* Timed event rows */
.ct-dash-today__event {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    margin-bottom: 6px;
    border-left: 3px solid var(--ev-color, #6366F1);
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.3s ease;
}

.ct-dash-today__event:hover {
    transform: translateX(4px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.ct-dash-today__event--past {
    opacity: 0.5;
}

.ct-dash-today__event--active {
    background: color-mix(in srgb, var(--ev-color) 8%, white);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ev-color) 20%, transparent);
}

.ct-dash-today__event-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ev-color, #6366F1);
    flex-shrink: 0;
}

.ct-dash-today__event-dot--pulse {
    animation: ct-dash-dot-pulse 1.5s ease-in-out infinite;
}

@keyframes ct-dash-dot-pulse {
    0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--ev-color) 30%, transparent); }
    50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ev-color) 10%, transparent); }
}

.ct-dash-today__event-body {
    flex: 1;
    min-width: 0;
}

.ct-dash-today__event-time {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ev-color, #6366F1);
    font-family: var(--ct-acc-font);
}

.ct-dash-today__event-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ct-acc-dark, #1e293b);
    font-family: var(--ct-acc-font);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ct-dash-today__event-meta {
    font-size: 0.75rem;
    color: var(--ct-acc-gray, #94a3b8);
    font-family: var(--ct-acc-font);
}

.ct-dash-today__event-arrow {
    font-size: 1.4rem;
    color: var(--ct-acc-gray, #94a3b8);
    flex-shrink: 0;
}

/* Summary stat cards */
.ct-dash-today__stat {
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(241, 245, 249, 0.8);
    border: 1px solid rgba(226, 232, 240, 0.6);
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ct-dash-today__stat:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.ct-dash-today__stat--alert {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.2);
}

.ct-dash-today__stat-icon {
    font-size: 1rem;
}

.ct-dash-today__stat-text {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ct-acc-dark, #1e293b);
    font-family: var(--ct-acc-font);
}

.ct-dash-today__progress {
    height: 6px;
    background: rgba(148, 163, 184, 0.15);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 4px;
}

.ct-dash-today__progress-bar {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #10B981, #34D399);
    transition: width 0.5s ease;
}

.ct-dash-today__stat-pct {
    font-size: 0.75rem;
    font-weight: 700;
    color: #10B981;
    font-family: var(--ct-acc-font);
}

/* "Alle Termine" button */
.ct-dash-today__all-btn {
    display: block;
    width: 100%;
    margin-top: 16px;
    padding: 10px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: #3B82F6;
    background: none;
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 10px;
    cursor: pointer;
    font-family: var(--ct-acc-font);
    transition: background 0.15s ease, color 0.15s ease;
}

.ct-dash-today__all-btn:hover {
    background: rgba(59, 130, 246, 0.06);
}

/* Empty state */
.ct-dash-today__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    gap: 12px;
    text-align: center;
}

.ct-dash-today__empty p {
    font-size: 0.92rem;
    color: var(--ct-acc-gray, #94a3b8);
    font-family: var(--ct-acc-font);
    margin: 0;
}

/* ==========================================================================
   Dashboard: Upcoming Card
   ========================================================================== */

.ct-dash__card--upcoming {
    --glow-color: #F59E0B;
}

/* Day strip */
.ct-dash-upcoming__strip {
    display: flex;
    gap: 8px;
    margin: 16px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.ct-dash-upcoming__strip::-webkit-scrollbar {
    display: none;
}

.ct-dash-upcoming__day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(226, 232, 240, 0.6);
    background: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    min-width: 60px;
    flex-shrink: 0;
    transition: all 0.2s ease;
    font-family: var(--ct-acc-font);
}

.ct-dash-upcoming__day:hover {
    border-color: rgba(245, 158, 11, 0.4);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.1);
}

.ct-dash-upcoming__day--selected {
    background: #1e293b;
    border-color: #1e293b;
    color: #fff;
}

.ct-dash-upcoming__day--selected .ct-dash-upcoming__day-name,
.ct-dash-upcoming__day--selected .ct-dash-upcoming__day-num {
    color: #fff;
}

.ct-dash-upcoming__day--weekend .ct-dash-upcoming__day-name {
    color: #EF4444;
}

.ct-dash-upcoming__day--selected.ct-dash-upcoming__day--weekend .ct-dash-upcoming__day-name {
    color: #FCA5A5;
}

.ct-dash-upcoming__day-name {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ct-acc-gray, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ct-dash-upcoming__day-num {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ct-acc-dark, #1e293b);
}

.ct-dash-upcoming__day-bar {
    width: 100%;
    min-height: 4px;
    border-radius: 2px;
    transition: height 0.3s ease;
}

.ct-dash-upcoming__day-bar--empty {
    background: rgba(148, 163, 184, 0.1);
    height: 4px;
}

.ct-dash-upcoming__day-badge {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--ct-acc-gray, #64748b);
    background: rgba(148, 163, 184, 0.12);
    padding: 1px 6px;
    border-radius: 8px;
    font-family: var(--ct-acc-font);
}

.ct-dash-upcoming__day--selected .ct-dash-upcoming__day-badge {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* Day strip skeleton */
.ct-dash-upcoming__day--skel {
    border-color: transparent;
    background: rgba(241, 245, 249, 0.5);
    pointer-events: none;
}

/* Detail area */
.ct-dash-upcoming__detail-wrap {
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.ct-dash-upcoming__detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.4);
}

.ct-dash-upcoming__detail-header span {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ct-acc-dark, #1e293b);
    font-family: var(--ct-acc-font);
}

.ct-dash-upcoming__detail-count {
    font-size: 0.8rem;
    color: var(--ct-acc-gray, #94a3b8);
    font-weight: 500;
}

.ct-dash-upcoming__detail-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    margin-bottom: 4px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.ct-dash-upcoming__detail-row:hover {
    background: rgba(245, 158, 11, 0.06);
    transform: translateX(4px);
}

.ct-dash-upcoming__detail-time {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ct-acc-gray, #64748b);
    font-family: var(--ct-acc-font);
    width: 60px;
    flex-shrink: 0;
}

.ct-dash-upcoming__detail-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ev-color, #607D8B);
    flex-shrink: 0;
}

.ct-dash-upcoming__detail-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ct-acc-dark, #1e293b);
    font-family: var(--ct-acc-font);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ct-dash-upcoming__detail-cat {
    font-size: 0.75rem;
    color: var(--ct-acc-gray, #94a3b8);
    font-family: var(--ct-acc-font);
    flex-shrink: 0;
}

.ct-dash-upcoming__detail-empty {
    padding: 24px;
    text-align: center;
}

.ct-dash-upcoming__detail-empty p {
    font-size: 0.88rem;
    color: var(--ct-acc-gray, #94a3b8);
    font-family: var(--ct-acc-font);
    margin: 0;
}

/* Alert rows */
.ct-dash-upcoming__alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-top: 8px;
    border-radius: 10px;
    background: rgba(59, 130, 246, 0.06);
    border: 1px solid rgba(59, 130, 246, 0.12);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ct-dash-upcoming__alert:hover {
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.ct-dash-upcoming__alert--warn {
    background: rgba(245, 158, 11, 0.06);
    border-color: rgba(245, 158, 11, 0.15);
}

.ct-dash-upcoming__alert-icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.ct-dash-upcoming__alert-text {
    flex: 1;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--ct-acc-dark, #1e293b);
    font-family: var(--ct-acc-font);
}

.ct-dash-upcoming__alert-arrow {
    font-size: 1.2rem;
    color: var(--ct-acc-gray, #94a3b8);
    flex-shrink: 0;
}

/* Weekly summary stats */
.ct-dash-upcoming__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 16px;
}

.ct-dash-upcoming__stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 10px;
    border-radius: 12px;
    background: rgba(241, 245, 249, 0.8);
    border: 1px solid rgba(226, 232, 240, 0.6);
}

.ct-dash-upcoming__stat-num {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--ct-acc-dark, #1e293b);
    font-family: var(--ct-acc-font);
    font-variant-numeric: tabular-nums;
}

.ct-dash-upcoming__stat-label {
    font-size: 0.72rem;
    color: var(--ct-acc-gray, #94a3b8);
    font-family: var(--ct-acc-font);
    text-align: center;
    margin-top: 4px;
}

/* Empty state */
.ct-dash-upcoming__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    gap: 12px;
    text-align: center;
}

.ct-dash-upcoming__empty p {
    font-size: 0.92rem;
    color: var(--ct-acc-gray, #94a3b8);
    font-family: var(--ct-acc-font);
    margin: 0;
}

.ct-dash-upcoming__add-btn {
    padding: 8px 20px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #F59E0B;
    background: none;
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 10px;
    cursor: pointer;
    font-family: var(--ct-acc-font);
    transition: background 0.15s ease;
}

.ct-dash-upcoming__add-btn:hover {
    background: rgba(245, 158, 11, 0.06);
}

/* ---------- Today & Upcoming Responsive ---------- */
@media (max-width: 768px) {
    .ct-dash-today__body {
        flex-direction: column;
    }

    .ct-dash-today__summary {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .ct-dash-today__stat {
        flex: 1;
        min-width: 140px;
    }

    .ct-dash-upcoming__strip {
        gap: 6px;
    }

    .ct-dash-upcoming__day {
        min-width: 52px;
        padding: 8px 10px;
    }

    .ct-dash-upcoming__stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .ct-dash-upcoming__stat-num {
        font-size: 1.25rem;
    }
}

@media (max-width: 480px) {
    .ct-dash-today__clock {
        font-size: 1.2rem;
    }

    .ct-dash-today__summary {
        flex-direction: column;
    }

    .ct-dash-today__stat {
        min-width: auto;
    }

    .ct-dash-upcoming__detail-cat {
        display: none;
    }

    .ct-dash-upcoming__stats {
        grid-template-columns: repeat(3, 1fr);
    }

    .ct-dash-upcoming__stat-box {
        padding: 12px 8px;
    }

    .ct-dash-upcoming__stat-num {
        font-size: 1.1rem;
    }
}

/* ---------- Today & Upcoming Dark Mode ---------- */
[data-ct-theme="dark"] .ct-dash-today__clock {
    color: var(--ct-acc-dark);
}

[data-ct-theme="dark"] .ct-dash-today__daybar {
    background: rgba(148, 163, 184, 0.1);
}

[data-ct-theme="dark"] .ct-dash-today__daybar-now {
    border-color: #1e293b;
}

[data-ct-theme="dark"] .ct-dash-today__event {
    background: rgba(30, 41, 59, 0.5);
}

[data-ct-theme="dark"] .ct-dash-today__event--active {
    background: color-mix(in srgb, var(--ev-color) 12%, rgba(30, 41, 59, 0.7));
}

[data-ct-theme="dark"] .ct-dash-today__event-title {
    color: var(--ct-acc-dark);
}

[data-ct-theme="dark"] .ct-dash-today__stat {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(51, 65, 85, 0.6);
}

[data-ct-theme="dark"] .ct-dash-today__stat-text {
    color: var(--ct-acc-dark);
}

[data-ct-theme="dark"] .ct-dash-today__stat--alert {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
}

[data-ct-theme="dark"] .ct-dash-today__all-btn {
    color: #60A5FA;
    border-color: rgba(96, 165, 250, 0.2);
}

[data-ct-theme="dark"] .ct-dash-today__all-btn:hover {
    background: rgba(96, 165, 250, 0.08);
}

[data-ct-theme="dark"] .ct-dash-today__empty p {
    color: var(--ct-acc-gray);
}

[data-ct-theme="dark"] .ct-dash-upcoming__day {
    background: rgba(30, 41, 59, 0.5);
    border-color: rgba(51, 65, 85, 0.6);
}

[data-ct-theme="dark"] .ct-dash-upcoming__day:hover {
    border-color: rgba(245, 158, 11, 0.4);
}

[data-ct-theme="dark"] .ct-dash-upcoming__day--selected {
    background: #f1f5f9;
    border-color: #f1f5f9;
    color: #0f172a;
}

[data-ct-theme="dark"] .ct-dash-upcoming__day--selected .ct-dash-upcoming__day-name,
[data-ct-theme="dark"] .ct-dash-upcoming__day--selected .ct-dash-upcoming__day-num {
    color: #0f172a;
}

[data-ct-theme="dark"] .ct-dash-upcoming__day-num {
    color: var(--ct-acc-dark);
}

[data-ct-theme="dark"] .ct-dash-upcoming__detail-header span {
    color: var(--ct-acc-dark);
}

[data-ct-theme="dark"] .ct-dash-upcoming__detail-header {
    border-color: rgba(51, 65, 85, 0.4);
}

[data-ct-theme="dark"] .ct-dash-upcoming__detail-row:hover {
    background: rgba(245, 158, 11, 0.08);
}

[data-ct-theme="dark"] .ct-dash-upcoming__detail-title {
    color: var(--ct-acc-dark);
}

[data-ct-theme="dark"] .ct-dash-upcoming__alert {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.15);
}

[data-ct-theme="dark"] .ct-dash-upcoming__alert--warn {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.15);
}

[data-ct-theme="dark"] .ct-dash-upcoming__alert-text {
    color: var(--ct-acc-dark);
}

[data-ct-theme="dark"] .ct-dash-upcoming__stat-box {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(51, 65, 85, 0.6);
}

[data-ct-theme="dark"] .ct-dash-upcoming__stat-num {
    color: var(--ct-acc-dark);
}

[data-ct-theme="dark"] .ct-dash-upcoming__add-btn {
    color: #FBBF24;
    border-color: rgba(251, 191, 36, 0.25);
}

[data-ct-theme="dark"] .ct-dash-upcoming__add-btn:hover {
    background: rgba(251, 191, 36, 0.08);
}

[data-ct-theme="dark"] .ct-dash-upcoming__day-badge {
    background: rgba(255, 255, 255, 0.08);
    color: var(--ct-acc-gray);
}

[data-ct-theme="dark"] .ct-dash-upcoming__day--selected .ct-dash-upcoming__day-badge {
    background: rgba(0, 0, 0, 0.15);
    color: #0f172a;
}

/* ==========================================================================
   GLOBAL SEARCH OVERLAY
   ========================================================================== */

/* ---------- Trigger Button ---------- */
.ct-gsearch-trigger {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--ct-acc-gray-light);
    color: var(--ct-acc-gray);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    transition: all 0.2s;
    flex-shrink: 0;
    padding: 0;
}
.ct-gsearch-trigger:hover {
    background: var(--ct-acc-red);
    color: #fff;
}
.ct-gsearch-trigger:active {
    transform: scale(0.93);
}

/* ---------- Backdrop ---------- */
.ct-gsearch-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99996;
    background: var(--ct-acc-overlay-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.ct-gsearch-backdrop--open {
    opacity: 1;
    visibility: visible;
}

/* ---------- Dialog ---------- */
.ct-gsearch-dialog {
    position: fixed;
    z-index: 99997;
    top: 10vh;
    left: 50%;
    transform: translateX(-50%) translateY(-12px);
    width: calc(100% - 32px);
    max-width: 640px;
    max-height: 80vh;
    background: var(--ct-acc-bg-inset);
    border-radius: 20px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s var(--ct-acc-ease), transform 0.3s var(--ct-acc-ease), visibility 0.3s ease;
    overflow: hidden;
}
[data-ct-theme="dark"] .ct-gsearch-dialog {
    box-shadow: 0 24px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
}
.ct-gsearch-dialog--open {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* ---------- Header ---------- */
.ct-gsearch-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 24px 0;
    flex-shrink: 0;
}
.ct-gsearch-header__text h2 {
    font-family: var(--ct-acc-font);
    font-size: 18px;
    font-weight: 700;
    color: var(--ct-acc-dark);
    line-height: 1.3;
    margin: 0;
}
.ct-gsearch-header__text p {
    font-family: var(--ct-acc-font-body);
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--ct-acc-gray);
    line-height: 1.55;
    margin: 6px 0 0;
}
/* Reuses .ct-acc-overlay__close pattern: 44px round, gray-light, hover→red */
.ct-gsearch-close {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--ct-acc-gray-light);
    color: var(--ct-acc-gray);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    transition: all 0.2s;
}
.ct-gsearch-close svg {
    width: 20px;
    height: 20px;
}
.ct-gsearch-close:hover {
    background: var(--ct-acc-red);
    color: #fff;
    transform: rotate(90deg);
}

/* ---------- Input Row — reuses .ct-acc-search__inner pattern ---------- */
.ct-gsearch-input-row {
    position: relative;
    display: flex;
    align-items: center;
    margin: 14px 24px 0;
    background: linear-gradient(135deg, #FAFBFC 0%, #F3F4F6 100%);
    border: 1.5px solid #E5E7EB;
    border-radius: 16px;
    padding: 0 6px 0 0;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    overflow: hidden;
    flex-shrink: 0;
}
.ct-gsearch-input-row:focus-within {
    border-color: #EF5350;
    box-shadow: 0 0 0 4px rgba(239, 83, 80, 0.08), 0 2px 8px rgba(239, 83, 80, 0.06);
    background: #fff;
}
[data-ct-theme="dark"] .ct-gsearch-input-row {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-color: #334155;
}
[data-ct-theme="dark"] .ct-gsearch-input-row:focus-within {
    border-color: #f87171;
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.15);
}

/* Search icon — reuses .ct-acc-search__icon pattern */
.ct-gsearch-input-row__icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--ct-acc-muted);
    transition: color 0.25s ease, transform 0.25s ease;
    display: flex;
    align-items: center;
}
.ct-gsearch-input-row:focus-within .ct-gsearch-input-row__icon {
    color: #EF5350;
    transform: translateY(-50%) scale(1.1);
}
[data-ct-theme="dark"] .ct-gsearch-input-row:focus-within .ct-gsearch-input-row__icon {
    color: #f87171;
}

/* Input — reuses .ct-acc-search__input pattern */
.ct-gsearch-input-row__input {
    flex: 1;
    min-width: 0;
    padding: 12px 8px 12px 42px;
    border: none;
    background: transparent;
    font-family: var(--ct-acc-font-body);
    font-size: 15px;
    font-weight: 500;
    color: var(--ct-acc-dark);
    outline: none;
    letter-spacing: 0.01em;
}
.ct-gsearch-input-row__input::placeholder {
    color: var(--ct-acc-muted);
    font-weight: 400;
}

/* Clear button — reuses .ct-acc-search__clear pattern */
.ct-gsearch-input-row__clear {
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: #E5E7EB;
    color: var(--ct-acc-gray);
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.ct-gsearch-input-row--has-value .ct-gsearch-input-row__clear {
    display: flex;
}
.ct-gsearch-input-row__clear:hover {
    background: #D1D5DB;
    color: var(--ct-acc-text);
}
.ct-gsearch-input-row__clear:active {
    transform: scale(0.9);
}
[data-ct-theme="dark"] .ct-gsearch-input-row__clear {
    background: #334155;
    color: #94a3b8;
}
[data-ct-theme="dark"] .ct-gsearch-input-row__clear:hover {
    background: #475569;
    color: #e2e8f0;
}

/* Divider — reuses .ct-acc-search__divider pattern */
.ct-gsearch-input-row__divider {
    width: 1px;
    height: 20px;
    background: #E5E7EB;
    margin: 0 4px;
    flex-shrink: 0;
}
[data-ct-theme="dark"] .ct-gsearch-input-row__divider {
    background: #334155;
}

/* Mic button — reuses .ct-acc-search__mic pattern */
.ct-gsearch-input-row__mic {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--ct-acc-muted);
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
    position: relative;
}
.ct-gsearch-input-row__mic:hover {
    background: #FEE2E2;
    color: #EF5350;
}
.ct-gsearch-input-row__mic:active {
    transform: scale(0.9);
}
.ct-gsearch-input-row__mic--recording {
    color: #EF5350;
    background: #FEE2E2;
    animation: ct-gsearch-mic-pulse 1.5s ease-in-out infinite;
}
.ct-gsearch-input-row__mic--recording::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(239, 83, 80, 0.3);
    animation: ct-gsearch-mic-ring 1.5s ease-in-out infinite;
}
@keyframes ct-gsearch-mic-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,83,80,0.3); }
    50% { box-shadow: 0 0 0 8px rgba(239,83,80,0); }
}
@keyframes ct-gsearch-mic-ring {
    0%, 100% { opacity: 0; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1); }
}
[data-ct-theme="dark"] .ct-gsearch-input-row__mic:hover {
    background: rgba(248, 113, 113, 0.1);
}
[data-ct-theme="dark"] .ct-gsearch-input-row__mic--recording {
    background: rgba(248, 113, 113, 0.15);
}

/* Keyboard shortcut badge */
.ct-gsearch-input-row__kbd {
    font-family: var(--ct-acc-font-body);
    font-size: 11px;
    font-weight: 600;
    color: var(--ct-acc-muted);
    background: var(--ct-acc-bg);
    border: 1.5px solid var(--ct-acc-border);
    border-radius: 8px;
    padding: 3px 8px;
    flex-shrink: 0;
    margin-left: 6px;
    white-space: nowrap;
    user-select: none;
    line-height: 1.3;
}

/* ---------- Results Area ---------- */
.ct-gsearch-results {
    flex: 1;
    overflow-y: auto;
    padding: 12px 24px 20px;
    overscroll-behavior: contain;
    min-height: 320px;
}
.ct-gsearch-results::-webkit-scrollbar {
    width: 5px;
}
.ct-gsearch-results::-webkit-scrollbar-track {
    background: transparent;
}
.ct-gsearch-results::-webkit-scrollbar-thumb {
    background: var(--ct-acc-border);
    border-radius: 4px;
}

/* ---------- Initial Categories View ---------- */
.ct-gsearch-cats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 8px 0;
}
.ct-gsearch-cat-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 12px 16px;
    border-radius: var(--ct-acc-radius-sm);
    background: var(--ct-acc-bg);
    border: 1px solid var(--ct-acc-border);
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
    box-shadow: var(--ct-acc-shadow-sm);
}
.ct-gsearch-cat-tile:hover {
    box-shadow: var(--ct-acc-shadow-md);
    transform: translateY(-1px);
}
.ct-gsearch-cat-tile:active {
    transform: scale(0.96);
    box-shadow: var(--ct-acc-shadow-sm);
}
[data-ct-theme="dark"] .ct-gsearch-cat-tile {
    background: var(--ct-acc-bg-raised);
    border-color: var(--ct-acc-border);
}
[data-ct-theme="dark"] .ct-gsearch-cat-tile:hover {
    box-shadow: var(--ct-acc-shadow-md);
}
.ct-gsearch-cat-tile__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.ct-gsearch-cat-tile__icon svg {
    width: 24px;
    height: 24px;
}
.ct-gsearch-cat-tile__label {
    font-family: var(--ct-acc-font-body);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ct-acc-dark);
    text-align: center;
}

/* ---------- Browse Back Button ---------- */
.ct-gsearch-browse-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px 8px 10px;
    border-radius: var(--ct-acc-radius-sm);
    background: var(--ct-acc-bg);
    border: 1px solid var(--ct-acc-border);
    color: var(--ct-acc-gray);
    font-family: var(--ct-acc-font-body);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.15s ease, color 0.15s ease;
    margin-bottom: 14px;
    user-select: none;
    box-shadow: var(--ct-acc-shadow-sm);
}
.ct-gsearch-browse-back:hover {
    box-shadow: var(--ct-acc-shadow-md);
    color: var(--ct-acc-dark);
    transform: translateY(-1px);
}
.ct-gsearch-browse-back:active {
    transform: scale(0.96);
}
[data-ct-theme="dark"] .ct-gsearch-browse-back {
    background: var(--ct-acc-bg-raised);
    border-color: var(--ct-acc-border);
}
[data-ct-theme="dark"] .ct-gsearch-browse-back:hover {
    box-shadow: var(--ct-acc-shadow-md);
}

/* ---------- Result Group ---------- */
.ct-gsearch-group {
    margin-bottom: 18px;
}
.ct-gsearch-group:last-child {
    margin-bottom: 0;
}
.ct-gsearch-group__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0 8px;
}
.ct-gsearch-group__icon {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
}
.ct-gsearch-group__icon svg {
    width: 14px;
    height: 14px;
}
.ct-gsearch-group__label {
    font-family: var(--ct-acc-font-body);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.ct-gsearch-group__count {
    font-family: var(--ct-acc-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ct-acc-muted);
    background: rgba(0,0,0,0.06);
    border-radius: 10px;
    padding: 2px 8px;
    min-width: 20px;
    text-align: center;
    margin-left: auto;
}
[data-ct-theme="dark"] .ct-gsearch-group__count {
    background: rgba(255,255,255,0.08);
}

/* ---------- Result Item ---------- */
.ct-gsearch-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--ct-acc-radius-sm);
    background: var(--ct-acc-bg);
    border: 1px solid var(--ct-acc-border);
    margin-bottom: 6px;
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
    opacity: 0;
    transform: translateY(8px);
    animation: ct-gsearch-item-in 0.3s var(--ct-acc-ease) forwards;
    box-shadow: var(--ct-acc-shadow-sm);
}
.ct-gsearch-item:hover {
    box-shadow: var(--ct-acc-shadow-md);
    transform: translateY(-1px);
}
.ct-gsearch-item--active {
    box-shadow: var(--ct-acc-shadow-md);
    border-color: var(--ct-acc-red);
}
[data-ct-theme="dark"] .ct-gsearch-item {
    background: var(--ct-acc-bg-raised);
    border-color: var(--ct-acc-border);
}
[data-ct-theme="dark"] .ct-gsearch-item:hover {
    box-shadow: var(--ct-acc-shadow-md);
}
[data-ct-theme="dark"] .ct-gsearch-item--active {
    border-color: var(--ct-acc-red);
}
.ct-gsearch-item__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
}
.ct-gsearch-item__icon svg {
    width: 18px;
    height: 18px;
}
.ct-gsearch-item__body {
    flex: 1;
    min-width: 0;
}
.ct-gsearch-item__title {
    font-family: var(--ct-acc-font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ct-acc-dark);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ct-gsearch-item__title mark {
    background: rgba(239,83,80,0.15);
    color: var(--ct-acc-red);
    border-radius: 2px;
    padding: 0 1px;
}
[data-ct-theme="dark"] .ct-gsearch-item__title mark {
    background: rgba(248,113,113,0.2);
    color: #fca5a5;
}
.ct-gsearch-item__meta {
    font-family: var(--ct-acc-font-body);
    font-size: 13px;
    color: var(--ct-acc-gray);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}
.ct-gsearch-item__chevron {
    color: var(--ct-acc-muted);
    flex-shrink: 0;
    opacity: 0;
    transform: translateX(-4px);
    transition: all 0.15s ease;
}
.ct-gsearch-item:hover .ct-gsearch-item__chevron,
.ct-gsearch-item--active .ct-gsearch-item__chevron {
    opacity: 1;
    transform: translateX(0);
}

@keyframes ct-gsearch-item-in {
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- Empty State ---------- */
.ct-gsearch-empty {
    text-align: center;
    padding: 40px 20px;
}
.ct-gsearch-empty__icon {
    color: var(--ct-acc-muted);
    margin-bottom: 12px;
    opacity: 0.4;
}
.ct-gsearch-empty__title {
    font-family: var(--ct-acc-font);
    font-size: 1rem;
    font-weight: 700;
    color: var(--ct-acc-dark);
    margin-bottom: 6px;
}
.ct-gsearch-empty__hint {
    font-family: var(--ct-acc-font-body);
    font-size: 0.9rem;
    color: var(--ct-acc-muted);
    line-height: 1.55;
}

/* ---------- Loading Placeholder ---------- */
.ct-gsearch-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    font-family: var(--ct-acc-font-body);
    color: var(--ct-acc-muted);
    font-size: 0.9rem;
    font-style: italic;
    background: var(--ct-acc-bg);
    border: 1px solid var(--ct-acc-border);
    border-radius: var(--ct-acc-radius-sm);
    margin-bottom: 6px;
}
.ct-gsearch-loading__spinner {
    width: 14px;
    height: 14px;
    border: 2px solid var(--ct-acc-border);
    border-top-color: var(--ct-acc-red);
    border-radius: 50%;
    animation: ct-gsearch-spin 0.6s linear infinite;
}
@keyframes ct-gsearch-spin {
    to { transform: rotate(360deg); }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .ct-gsearch-backdrop,
    .ct-gsearch-dialog,
    .ct-gsearch-item {
        transition: none !important;
        animation: none !important;
    }
    .ct-gsearch-item {
        opacity: 1;
        transform: none;
    }
    .ct-gsearch-input-row__mic--recording {
        animation: none !important;
        box-shadow: 0 0 0 4px rgba(239,83,80,0.3);
    }
}

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
    .ct-gsearch-dialog {
        max-height: 90vh;
        border-radius: 16px 16px 0 0;
        top: auto;
        bottom: 0;
        transform: translateX(-50%) translateY(20px);
        width: 100%;
        max-width: 100%;
    }
    .ct-gsearch-dialog--open {
        transform: translateX(-50%) translateY(0);
    }
    .ct-gsearch-header {
        padding: 16px 18px 0;
    }
    .ct-gsearch-input-row {
        margin: 12px 18px 0;
    }
    .ct-gsearch-results {
        padding: 10px 18px 20px;
    }
    .ct-gsearch-input-row__kbd {
        display: none;
    }
    .ct-gsearch-cats {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    .ct-gsearch-cat-tile {
        padding: 16px 8px 14px;
    }
    .ct-gsearch-cat-tile__icon {
        width: 44px;
        height: 44px;
    }
    .ct-gsearch-cat-tile__label {
        font-size: 0.82rem;
    }
}

/* ==========================================================================
   Web Device — Avatar, Badge, "This Device" Indicator
   ========================================================================== */

.ct-acc-device-card__avatar--web {
    background: linear-gradient(135deg, #EEF2FF 0%, #C7D2FE 100%);
    color: #4F46E5;
}

.ct-acc-device-card__avatar--web svg {
    width: 20px;
    height: 20px;
}

.ct-acc-device-card__type--web {
    color: #4F46E5;
}

.ct-acc-device-card__this-device {
    font-family: var(--ct-acc-font-body);
    font-size: 11px;
    font-weight: 600;
    color: #4F46E5;
    background: #EEF2FF;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Dark mode overrides */
[data-ct-theme="dark"] .ct-acc-device-card__avatar--web {
    background: linear-gradient(135deg, #312E81 0%, #3730A3 100%);
    color: #A5B4FC;
}

[data-ct-theme="dark"] .ct-acc-device-card__type--web {
    color: #A5B4FC;
}

[data-ct-theme="dark"] .ct-acc-device-card__this-device {
    color: #A5B4FC;
    background: rgba(99, 102, 241, 0.15);
}

/* ==========================================================================
   Web Device Naming Modal — Glassmorphism
   ========================================================================== */

.ct-web-naming-backdrop {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    padding: 20px;
    animation: ct-web-naming-fade-in 0.35s ease;
}

@keyframes ct-web-naming-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes ct-web-naming-slide-up {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ct-web-naming-modal {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
    border-radius: 24px;
    padding: 32px 28px 28px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    animation: ct-web-naming-slide-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.ct-web-naming-modal__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #EEF2FF 0%, #C7D2FE 100%);
    color: #4F46E5;
    margin: 0 auto 18px;
}

.ct-web-naming-modal__icon svg {
    width: 24px;
    height: 24px;
}

/* Header row: title + info button */
.ct-web-naming-modal__header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 6px;
}

.ct-web-naming-modal__title {
    font-family: var(--ct-acc-font);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ct-acc-dark);
    margin: 0;
}

/* Info toggle button */
.ct-web-naming-modal__info-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(79, 70, 229, 0.1);
    color: #4F46E5;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.15s ease, transform 0.15s ease;
}
.ct-web-naming-modal__info-toggle:hover {
    background: rgba(79, 70, 229, 0.18);
}
.ct-web-naming-modal__info-toggle.is-active {
    background: rgba(79, 70, 229, 0.2);
    transform: rotate(180deg);
}

/* Collapsible info panel */
.ct-web-naming-modal__info-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, margin 0.3s ease, padding 0.3s ease;
    background: rgba(79, 70, 229, 0.05);
    border-radius: 12px;
    margin: 0 0 0;
    padding: 0 16px;
}
.ct-web-naming-modal__info-panel.is-open {
    max-height: 120px;
    margin: 8px 0 4px;
    padding: 12px 16px;
}
.ct-web-naming-modal__info-panel p {
    font-family: var(--ct-acc-font-body);
    font-size: 0.82rem;
    color: var(--ct-acc-gray);
    line-height: 1.55;
    margin: 0;
    text-align: left;
}

.ct-web-naming-modal__text {
    font-family: var(--ct-acc-font-body);
    font-size: 0.92rem;
    color: var(--ct-acc-gray);
    line-height: 1.5;
    margin: 4px 0 20px;
}

.ct-web-naming-modal__input {
    width: 100%;
    padding: 12px 16px;
    font-family: var(--ct-acc-font-body);
    font-size: 0.95rem;
    color: var(--ct-acc-dark);
    background: rgba(255, 255, 255, 0.6);
    border: 1.5px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

.ct-web-naming-modal__input::placeholder {
    color: var(--ct-acc-gray);
    opacity: 0.5;
}

.ct-web-naming-modal__input:focus {
    border-color: #4F46E5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

/* Shake + error state for empty input */
@keyframes ct-web-naming-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}
.ct-web-naming-modal__input.is-error {
    animation: ct-web-naming-shake 0.4s ease;
    border-color: var(--ct-acc-red, #EF4444) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

/* Footer: single full-width save button */
.ct-web-naming-modal__footer {
    margin-top: 24px;
}

.ct-web-naming-modal__footer .ct-acc-btn {
    width: 100%;
}

/* ---- Dark mode ---- */
[data-ct-theme="dark"] .ct-web-naming-backdrop {
    background: rgba(2, 6, 23, 0.7);
}

[data-ct-theme="dark"] .ct-web-naming-modal {
    background: rgba(15, 23, 42, 0.8);
    border-color: rgba(148, 163, 184, 0.15);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-ct-theme="dark"] .ct-web-naming-modal__icon {
    background: linear-gradient(135deg, #312E81 0%, #3730A3 100%);
    color: #A5B4FC;
}

[data-ct-theme="dark"] .ct-web-naming-modal__info-toggle {
    background: rgba(165, 180, 252, 0.12);
    color: #A5B4FC;
}
[data-ct-theme="dark"] .ct-web-naming-modal__info-toggle:hover {
    background: rgba(165, 180, 252, 0.2);
}

[data-ct-theme="dark"] .ct-web-naming-modal__info-panel {
    background: rgba(165, 180, 252, 0.06);
}

[data-ct-theme="dark"] .ct-web-naming-modal__input {
    background: rgba(15, 23, 42, 0.6);
    border-color: rgba(148, 163, 184, 0.15);
    color: #cbd5e1;
}

[data-ct-theme="dark"] .ct-web-naming-modal__input:focus {
    border-color: #6366F1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

@media (max-width: 480px) {
    .ct-web-naming-modal {
        padding: 24px 20px 24px;
        border-radius: 20px;
    }
}

/* ---------- Image Source Choice Dialog ---------- */
.ct-img-source-backdrop {
    position: fixed;
    inset: 0;
    z-index: 200001;
    background: var(--ct-acc-overlay-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: ct-fade-in 0.15s ease;
}

.ct-img-source-dialog {
    background: var(--ct-acc-bg-raised);
    border-radius: var(--ct-acc-radius);
    padding: 20px;
    max-width: 320px;
    width: calc(100% - 32px);
    box-shadow: var(--ct-acc-shadow-lg);
}

.ct-img-source__title {
    font-family: var(--ct-acc-font);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ct-acc-dark);
    margin-bottom: 12px;
}

.ct-img-source__option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 12px;
    border-radius: var(--ct-acc-radius-sm);
    cursor: pointer;
    transition: background 0.15s ease;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-family: var(--ct-acc-font-body);
    font-size: 0.95rem;
    color: var(--ct-acc-text);
}

.ct-img-source__option:hover {
    background: var(--ct-acc-bg-inset);
}

.ct-img-source__option svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--ct-acc-gray);
}

.ct-img-source__option:focus-visible {
    outline: 2px solid var(--ct-acc-red);
    outline-offset: 2px;
}

[data-ct-theme="dark"] .ct-img-source-dialog {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* ---------- Gallery Picker Modal ---------- */
.ct-gal-picker-backdrop {
    position: fixed;
    inset: 0;
    z-index: 200002;
    background: var(--ct-acc-overlay-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: ct-fade-in 0.15s ease;
}

.ct-gal-picker-dialog {
    background: var(--ct-acc-bg-raised);
    border-radius: var(--ct-acc-radius);
    max-width: 640px;
    width: calc(100% - 32px);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--ct-acc-shadow-lg);
    overflow: hidden;
}

.ct-gal-picker__header {
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--ct-acc-border);
    flex-shrink: 0;
}

.ct-gal-picker__header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.ct-gal-picker__title {
    font-family: var(--ct-acc-font);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--ct-acc-dark);
}

.ct-gal-picker__close {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--ct-acc-gray-light);
    color: var(--ct-acc-gray);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    transition: all 0.2s;
}
.ct-gal-picker__close svg {
    width: 24px;
    height: 24px;
}
.ct-gal-picker__close:hover {
    background: var(--ct-acc-red);
    color: #fff;
    transform: rotate(90deg);
}

.ct-gal-picker__close:focus-visible,
.ct-gal-picker__btn:focus-visible {
    outline: 2px solid var(--ct-acc-red);
    outline-offset: 2px;
}

.ct-gal-picker__search {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--ct-acc-border);
    border-radius: var(--ct-acc-radius-sm);
    font-family: var(--ct-acc-font-body);
    font-size: 0.9rem;
    background: var(--ct-acc-bg);
    color: var(--ct-acc-text);
    outline: none;
    transition: border-color 0.15s;
}
.ct-gal-picker__search:focus {
    border-color: var(--ct-acc-red);
}

.ct-gal-picker__grid {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    align-content: start;
}

.ct-gal-picker__item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s, transform 0.15s;
}
.ct-gal-picker__item:hover {
    transform: scale(1.03);
}
.ct-gal-picker__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ct-gal-picker__item--selected {
    border-color: var(--ct-acc-red);
}
.ct-gal-picker__item--selected::after {
    content: '\2713';
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    background: var(--ct-acc-red);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

.ct-gal-picker__footer {
    padding: 12px 20px;
    border-top: 1px solid var(--ct-acc-border);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
}

.ct-gal-picker__btn {
    padding: 8px 20px;
    border-radius: var(--ct-acc-radius-sm);
    font-family: var(--ct-acc-font);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    border: 1px solid var(--ct-acc-border);
    background: var(--ct-acc-bg);
    color: var(--ct-acc-text);
    transition: background 0.15s, border-color 0.15s;
}
.ct-gal-picker__btn:hover {
    background: var(--ct-acc-bg-inset);
}
.ct-gal-picker__btn--primary {
    background: var(--ct-acc-red);
    color: #fff;
    border-color: var(--ct-acc-red);
}
.ct-gal-picker__btn--primary:hover {
    background: var(--ct-acc-red-hover);
    border-color: var(--ct-acc-red-hover);
}

.ct-gal-picker__empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 20px;
    color: var(--ct-acc-muted);
    font-family: var(--ct-acc-font-body);
    font-size: 0.95rem;
}

.ct-gal-picker__loading {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.ct-gal-picker__skel {
    aspect-ratio: 1;
    border-radius: 8px;
    will-change: background-position;
    background: linear-gradient(110deg, var(--ct-acc-bg-inset) 30%, var(--ct-acc-bg) 50%, var(--ct-acc-bg-inset) 70%);
    background-size: 200% 100%;
    animation: ctSkelShimmer 1.5s ease infinite;
}

@keyframes ctSkelShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

[data-ct-theme="dark"] .ct-gal-picker-dialog {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
[data-ct-theme="dark"] .ct-gal-picker__search {
    background: rgba(15, 23, 42, 0.6);
    border-color: rgba(148, 163, 184, 0.15);
}
@media (max-width: 480px) {
    .ct-gal-picker-dialog {
        max-height: 92vh;
        max-width: none;
        width: calc(100% - 16px);
        border-radius: 16px;
    }
    .ct-gal-picker__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ct-gal-picker__loading {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---------- Reduced Motion — Gallery Picker ---------- */
@media (prefers-reduced-motion: reduce) {
    .ct-img-source-backdrop,
    .ct-gal-picker-backdrop {
        animation: none !important;
    }
    .ct-gal-picker__skel {
        animation: none !important;
    }
    .ct-gal-picker__item {
        transition: none !important;
    }
}