/* ============================================================================
   Compacto component layer (PR 05.01 / 05.02).
   Composition and component styling follow the Lovable "emerald-flow" reference
   (src/styles.css + src/components/ui/button.tsx + src/routes/index.tsx); values
   come from tokens.css. Every selector is scoped under .cp-ui or is a cp-* opt-in
   class, so un-migrated pages are untouched by this file.
   ============================================================================ */

.cp-ui {
    font-family: var(--cp-font-body);
    color: var(--cp-text);
    letter-spacing: 0;
}

/* ---------------------------------------------------------------------------
   Focus (guide §7, §17). Yellow in high-contrast via token.
   --------------------------------------------------------------------------- */
.cp-ui :focus-visible {
    outline: 2px solid var(--cp-focus-outline);
    outline-offset: 3px;
}

.cp-ui .btn:focus-visible,
.cp-ui .form-control:focus-visible,
.cp-ui .form-select:focus-visible,
.cp-ui .cp-input:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--cp-surface), 0 0 0 4px var(--cp-ring);
}

/* ---------------------------------------------------------------------------
   Buttons — Lovable button.tsx: sizes default 40 / sm 36 / lg 48 (pill), icon 40x40 r-12;
   variants default (solid primary), premium (gradient + action glow), destructive,
   outline, secondary, ghost, link.
   --------------------------------------------------------------------------- */
.cp-ui .btn {
    --bs-btn-border-radius: var(--cp-radius-pill);
    --x-btn-border-radius: var(--cp-radius-pill);
    --bs-btn-font-weight: 500;
    --x-btn-font-weight: 500;
    --bs-btn-font-size: var(--cp-text-sm);
    --x-btn-font-size: var(--cp-text-sm);
    --bs-btn-padding-x: 1.25rem;
    --x-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: 0;
    --x-btn-padding-y: 0;
    --bs-btn-border-width: 1px;
    --x-btn-border-width: 1px;
    --bs-btn-focus-box-shadow: 0 0 0 2px var(--cp-surface), 0 0 0 4px var(--cp-ring);
    --x-btn-focus-box-shadow: 0 0 0 2px var(--cp-surface), 0 0 0 4px var(--cp-ring);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: var(--cp-btn-md);
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--cp-motion-fast) ease, background-color var(--cp-motion-fast) ease,
                border-color var(--cp-motion-fast) ease, opacity var(--cp-motion-fast) ease,
                box-shadow var(--cp-motion-fast) ease;
}

.cp-ui .btn .cp-icon {
    flex: 0 0 auto;
    pointer-events: none;
}

.cp-ui .btn-sm {
    --bs-btn-padding-x: 1rem;
    --x-btn-padding-x: 1rem;
    --bs-btn-font-size: var(--cp-text-xs);
    --x-btn-font-size: var(--cp-text-xs);
    height: var(--cp-btn-sm);
}

.cp-ui .btn-lg {
    --bs-btn-padding-x: 1.75rem;
    --x-btn-padding-x: 1.75rem;
    --bs-btn-font-size: var(--cp-text-sm);
    --x-btn-font-size: var(--cp-text-sm);
    height: var(--cp-btn-lg);
}

.cp-ui .btn-icon {
    --bs-btn-padding-x: 0;
    --x-btn-padding-x: 0;
    --bs-btn-border-radius: var(--cp-radius-icon-btn);
    --x-btn-border-radius: var(--cp-radius-icon-btn);
    width: var(--cp-btn-md);
    height: var(--cp-btn-md);
    flex: 0 0 auto;
}

.cp-ui .btn-icon.btn-sm {
    --bs-btn-border-radius: var(--cp-radius-nav);
    --x-btn-border-radius: var(--cp-radius-nav);
    width: var(--cp-btn-sm);
    height: var(--cp-btn-sm);
}

.cp-ui .btn:disabled,
.cp-ui .btn.disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* default: solid primary */
.cp-ui .btn-primary,
.cp-ui .btn-success {
    --bs-btn-color: var(--cp-on-primary);
    --x-btn-color: var(--cp-on-primary);
    --bs-btn-bg: var(--cp-primary);
    --x-btn-bg: var(--cp-primary);
    --bs-btn-border-color: var(--cp-primary);
    --x-btn-border-color: var(--cp-primary);
    --bs-btn-hover-color: var(--cp-on-primary);
    --x-btn-hover-color: var(--cp-on-primary);
    --bs-btn-hover-bg: var(--cp-primary);
    --x-btn-hover-bg: var(--cp-primary);
    --bs-btn-hover-border-color: var(--cp-primary);
    --x-btn-hover-border-color: var(--cp-primary);
    --bs-btn-active-color: var(--cp-on-primary);
    --x-btn-active-color: var(--cp-on-primary);
    --bs-btn-active-bg: var(--cp-primary-2);
    --x-btn-active-bg: var(--cp-primary-2);
    --bs-btn-active-border-color: var(--cp-primary-2);
    --x-btn-active-border-color: var(--cp-primary-2);
    --bs-btn-disabled-color: var(--cp-on-primary);
    --x-btn-disabled-color: var(--cp-on-primary);
    --bs-btn-disabled-bg: var(--cp-primary);
    --x-btn-disabled-bg: var(--cp-primary);
    --bs-btn-disabled-border-color: var(--cp-primary);
    --x-btn-disabled-border-color: var(--cp-primary);
    box-shadow: var(--cp-shadow-card);
}

.cp-ui .btn-primary:hover,
.cp-ui .btn-success:hover {
    opacity: 0.9;
}

/* premium: brand gradient + action glow (Lovable "premium") */
.cp-ui .btn-premium {
    --bs-btn-color: var(--cp-on-gradient);
    --x-btn-color: var(--cp-on-gradient);
    --bs-btn-bg: var(--cp-primary);
    --x-btn-bg: var(--cp-primary);
    --bs-btn-border-color: transparent;
    --x-btn-border-color: transparent;
    --bs-btn-hover-color: var(--cp-on-gradient);
    --x-btn-hover-color: var(--cp-on-gradient);
    --bs-btn-hover-bg: var(--cp-primary);
    --x-btn-hover-bg: var(--cp-primary);
    --bs-btn-hover-border-color: transparent;
    --x-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--cp-on-gradient);
    --x-btn-active-color: var(--cp-on-gradient);
    --bs-btn-active-bg: var(--cp-primary-2);
    --x-btn-active-bg: var(--cp-primary-2);
    --bs-btn-active-border-color: transparent;
    --x-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--cp-on-gradient);
    --x-btn-disabled-color: var(--cp-on-gradient);
    --bs-btn-disabled-bg: var(--cp-primary);
    --x-btn-disabled-bg: var(--cp-primary);
    --bs-btn-disabled-border-color: transparent;
    --x-btn-disabled-border-color: transparent;
    background-image: var(--cp-primary-fill);
    box-shadow: var(--cp-shadow-action);
}

.cp-ui .btn-premium:hover,
.cp-ui .btn-premium:focus-visible {
    background-image: var(--cp-primary-fill);
    opacity: 0.9;
}

/* outline: page background, input border, accent on hover */
.cp-ui .btn-outline-secondary,
.cp-ui .btn-outline-primary,
.cp-ui .btn-light,
.cp-ui .btn-neutral,
.cp-ui .btn-warning {
    --bs-btn-color: var(--cp-text);
    --x-btn-color: var(--cp-text);
    --bs-btn-bg: var(--cp-bg);
    --x-btn-bg: var(--cp-bg);
    --bs-btn-border-color: var(--cp-input-border);
    --x-btn-border-color: var(--cp-input-border);
    --bs-btn-hover-color: var(--cp-accent-fg);
    --x-btn-hover-color: var(--cp-accent-fg);
    --bs-btn-hover-bg: var(--cp-accent-bg);
    --x-btn-hover-bg: var(--cp-accent-bg);
    --bs-btn-hover-border-color: var(--cp-input-border);
    --x-btn-hover-border-color: var(--cp-input-border);
    --bs-btn-active-color: var(--cp-accent-fg);
    --x-btn-active-color: var(--cp-accent-fg);
    --bs-btn-active-bg: var(--cp-accent-bg);
    --x-btn-active-bg: var(--cp-accent-bg);
    --bs-btn-active-border-color: var(--cp-border-hover);
    --x-btn-active-border-color: var(--cp-border-hover);
    --bs-btn-disabled-color: var(--cp-text-2);
    --x-btn-disabled-color: var(--cp-text-2);
    --bs-btn-disabled-bg: var(--cp-bg);
    --x-btn-disabled-bg: var(--cp-bg);
    --bs-btn-disabled-border-color: var(--cp-input-border);
    --x-btn-disabled-border-color: var(--cp-input-border);
    box-shadow: var(--cp-shadow-card);
}

/* secondary: grey-blue surface */
.cp-ui .btn-secondary {
    --bs-btn-color: var(--cp-text-2-strong);
    --x-btn-color: var(--cp-text-2-strong);
    --bs-btn-bg: var(--cp-surface-2);
    --x-btn-bg: var(--cp-surface-2);
    --bs-btn-border-color: var(--cp-surface-2);
    --x-btn-border-color: var(--cp-surface-2);
    --bs-btn-hover-color: var(--cp-text-2-strong);
    --x-btn-hover-color: var(--cp-text-2-strong);
    --bs-btn-hover-bg: var(--cp-surface-2);
    --x-btn-hover-bg: var(--cp-surface-2);
    --bs-btn-hover-border-color: var(--cp-surface-2);
    --x-btn-hover-border-color: var(--cp-surface-2);
    --bs-btn-active-color: var(--cp-text-2-strong);
    --x-btn-active-color: var(--cp-text-2-strong);
    --bs-btn-active-bg: var(--cp-surface-2);
    --x-btn-active-bg: var(--cp-surface-2);
    --bs-btn-active-border-color: var(--cp-surface-2);
    --x-btn-active-border-color: var(--cp-surface-2);
    --bs-btn-disabled-color: var(--cp-text-2);
    --x-btn-disabled-color: var(--cp-text-2);
    --bs-btn-disabled-bg: var(--cp-surface-2);
    --x-btn-disabled-bg: var(--cp-surface-2);
    --bs-btn-disabled-border-color: var(--cp-surface-2);
    --x-btn-disabled-border-color: var(--cp-surface-2);
    box-shadow: var(--cp-shadow-card);
}

.cp-ui .btn-secondary:hover {
    opacity: 0.8;
}

/* destructive */
.cp-ui .btn-danger {
    --bs-btn-color: #FFFFFF;
    --x-btn-color: #FFFFFF;
    --bs-btn-bg: var(--cp-danger);
    --x-btn-bg: var(--cp-danger);
    --bs-btn-border-color: var(--cp-danger);
    --x-btn-border-color: var(--cp-danger);
    --bs-btn-hover-color: #FFFFFF;
    --x-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--cp-danger);
    --x-btn-hover-bg: var(--cp-danger);
    --bs-btn-hover-border-color: var(--cp-danger);
    --x-btn-hover-border-color: var(--cp-danger);
    --bs-btn-active-color: #FFFFFF;
    --x-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--cp-danger);
    --x-btn-active-bg: var(--cp-danger);
    --bs-btn-active-border-color: var(--cp-danger);
    --x-btn-active-border-color: var(--cp-danger);
    --bs-btn-disabled-color: #FFFFFF;
    --x-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: var(--cp-danger);
    --x-btn-disabled-bg: var(--cp-danger);
    --bs-btn-disabled-border-color: var(--cp-danger);
    --x-btn-disabled-border-color: var(--cp-danger);
    box-shadow: var(--cp-shadow-card);
}

.cp-ui .btn-danger:hover {
    opacity: 0.9;
}

.cp-ui .btn-outline-danger {
    --bs-btn-color: var(--cp-danger);
    --x-btn-color: var(--cp-danger);
    --bs-btn-bg: var(--cp-bg);
    --x-btn-bg: var(--cp-bg);
    --bs-btn-border-color: var(--cp-input-border);
    --x-btn-border-color: var(--cp-input-border);
    --bs-btn-hover-color: var(--cp-danger);
    --x-btn-hover-color: var(--cp-danger);
    --bs-btn-hover-bg: var(--cp-danger-bg);
    --x-btn-hover-bg: var(--cp-danger-bg);
    --bs-btn-hover-border-color: var(--cp-danger);
    --x-btn-hover-border-color: var(--cp-danger);
    --bs-btn-active-color: #FFFFFF;
    --x-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--cp-danger);
    --x-btn-active-bg: var(--cp-danger);
    --bs-btn-active-border-color: var(--cp-danger);
    --x-btn-active-border-color: var(--cp-danger);
    --bs-btn-disabled-color: var(--cp-text-2);
    --x-btn-disabled-color: var(--cp-text-2);
    --bs-btn-disabled-bg: var(--cp-bg);
    --x-btn-disabled-bg: var(--cp-bg);
    --bs-btn-disabled-border-color: var(--cp-input-border);
    --x-btn-disabled-border-color: var(--cp-input-border);
}

/* ghost: no permanent background (Lovable "ghost") */
.cp-ui .btn-ghost,
.cp-ui .btn-link {
    --bs-btn-color: var(--cp-text);
    --x-btn-color: var(--cp-text);
    --bs-btn-bg: transparent;
    --x-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --x-btn-border-color: transparent;
    --bs-btn-hover-color: var(--cp-accent-fg);
    --x-btn-hover-color: var(--cp-accent-fg);
    --bs-btn-hover-bg: var(--cp-accent-bg);
    --x-btn-hover-bg: var(--cp-accent-bg);
    --bs-btn-hover-border-color: transparent;
    --x-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--cp-accent-fg);
    --x-btn-active-color: var(--cp-accent-fg);
    --bs-btn-active-bg: var(--cp-accent-bg);
    --x-btn-active-bg: var(--cp-accent-bg);
    --bs-btn-active-border-color: transparent;
    --x-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--cp-text-2);
    --x-btn-disabled-color: var(--cp-text-2);
    --bs-btn-disabled-bg: transparent;
    --x-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: transparent;
    --x-btn-disabled-border-color: transparent;
    text-decoration: none;
}

.cp-ui .btn-ghost.cp-muted,
.cp-ui .btn-link.cp-muted {
    --bs-btn-color: var(--cp-text-2);
    --x-btn-color: var(--cp-text-2);
}

.cp-ui .btn-link:hover,
.cp-ui .btn-link:focus-visible,
.cp-ui .btn-ghost:hover,
.cp-ui .btn-ghost:focus-visible {
    text-decoration: none;
}

/* text link variant (Lovable "link") */
.cp-ui .btn-text {
    --bs-btn-color: var(--cp-primary);
    --x-btn-color: var(--cp-primary);
    --bs-btn-bg: transparent;
    --x-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --x-btn-border-color: transparent;
    --bs-btn-hover-color: var(--cp-primary);
    --x-btn-hover-color: var(--cp-primary);
    --bs-btn-hover-bg: transparent;
    --x-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
    --x-btn-hover-border-color: transparent;
    --bs-btn-padding-x: 0;
    --x-btn-padding-x: 0;
    height: auto;
    text-underline-offset: 4px;
}

.cp-ui .btn-text:hover {
    text-decoration: underline;
}

.cp-ui .btn-close {
    --bs-btn-close-color: var(--cp-text);
    --x-btn-close-color: var(--cp-text);
    --bs-btn-close-opacity: 0.6;
    --x-btn-close-opacity: 0.6;
    --bs-btn-close-hover-opacity: 1;
    --x-btn-close-hover-opacity: 1;
    --bs-btn-close-focus-shadow: 0 0 0 3px var(--cp-focus-ring);
    --x-btn-close-focus-shadow: 0 0 0 3px var(--cp-focus-ring);
    border-radius: var(--cp-radius-nav);
}

:root[data-bs-theme="dark"] .cp-ui .btn-close,
:root[data-bs-theme="high-contrast"] .cp-ui .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Touch targets on mobile (guide §4, §17; Lovable: button, a { min-height: 44px }) */
@media (max-width: 767.98px) {
    .cp-ui .btn {
        min-height: var(--cp-touch-min);
    }

    .cp-ui .btn-icon,
    .cp-ui .btn-icon.btn-sm {
        width: var(--cp-touch-min);
        height: var(--cp-touch-min);
    }
}

/* ---------------------------------------------------------------------------
   Labels, badges, text utilities
   --------------------------------------------------------------------------- */
.cp-ui .cp-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--cp-text-xs);
    font-weight: 600;
    letter-spacing: var(--cp-tracking-label-wide);
    text-transform: uppercase;
    color: var(--cp-primary);
    line-height: 1.2;
}

.cp-ui .cp-label--pill {
    padding: 0.375rem 0.75rem;
    border-radius: var(--cp-radius-pill);
    background: var(--cp-accent-bg);
}

.cp-ui .cp-label--muted {
    color: var(--cp-text-2);
    letter-spacing: var(--cp-tracking-label);
}

/* Lovable .tag-badge */
.cp-ui .cp-tag {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-pill);
    background: var(--cp-surface-2);
    padding: 0.25rem 0.625rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--cp-text-2-strong);
    white-space: nowrap;
    max-width: 100%;
}

.cp-ui .cp-tag > span {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Lovable .status-badge */
.cp-ui .cp-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: var(--cp-radius-pill);
    padding: 0.3rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    background: var(--cp-surface-2);
    color: var(--cp-text-2-strong);
}

.cp-ui .cp-status::before {
    content: "";
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

.cp-ui .cp-status--active {
    background: var(--cp-success-bg);
    color: var(--cp-success-fg);
}

.cp-ui .cp-status--warning {
    background: var(--cp-warning-bg);
    color: var(--cp-warning-fg);
}

.cp-ui .cp-status--expired {
    background: var(--cp-danger-bg);
    color: var(--cp-danger);
}

.cp-ui .cp-text-xs { font-size: var(--cp-text-xs); }
.cp-ui .cp-text-sm { font-size: var(--cp-text-sm); }
.cp-ui .cp-text-2 { color: var(--cp-text-2); }
.cp-ui .cp-text-2-strong { color: var(--cp-text-2-strong); }
.cp-ui .cp-text-primary { color: var(--cp-primary); }
.cp-ui .cp-text-danger { color: var(--cp-danger); }
.cp-ui .cp-heading { font-family: var(--cp-font-heading); letter-spacing: var(--cp-tracking-heading); }

.cp-ui .cp-mono {
    font-family: var(--cp-font-mono);
    letter-spacing: 0;
}

.cp-ui .cp-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.cp-ui .cp-link {
    color: var(--cp-primary);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* Icon inside a pale-green square (Lovable: bg-accent text-primary rounded-xl) */
.cp-ui .cp-icon-box {
    display: inline-grid;
    place-items: center;
    width: var(--cp-icon-box);
    height: var(--cp-icon-box);
    border-radius: var(--cp-icon-box-radius);
    background: var(--cp-accent-bg);
    color: var(--cp-primary);
    flex: 0 0 auto;
}

.cp-ui .cp-icon-box--lg {
    width: var(--cp-icon-box-lg);
    height: var(--cp-icon-box-lg);
}

/* ---------------------------------------------------------------------------
   Surfaces: cards, panels, modals, dropdowns
   --------------------------------------------------------------------------- */
.cp-ui .card,
.cp-ui .cp-card {
    --bs-card-bg: var(--cp-surface);
    --x-card-bg: var(--cp-surface);
    --bs-card-color: var(--cp-text);
    --x-card-color: var(--cp-text);
    --bs-card-border-color: var(--cp-border);
    --x-card-border-color: var(--cp-border);
    --bs-card-border-radius: var(--cp-radius-card);
    --x-card-border-radius: var(--cp-radius-card);
    --bs-card-inner-border-radius: calc(var(--cp-radius-card) - 1px);
    --x-card-inner-border-radius: calc(var(--cp-radius-card) - 1px);
    --bs-card-cap-bg: transparent;
    --x-card-cap-bg: transparent;
    --bs-card-cap-padding-y: 1.25rem;
    --x-card-cap-padding-y: 1.25rem;
    --bs-card-cap-padding-x: var(--cp-card-pad);
    --x-card-cap-padding-x: var(--cp-card-pad);
    --bs-card-spacer-y: var(--cp-card-pad);
    --x-card-spacer-y: var(--cp-card-pad);
    --bs-card-spacer-x: var(--cp-card-pad);
    --x-card-spacer-x: var(--cp-card-pad);
    background: var(--cp-surface);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-card);
    box-shadow: var(--cp-shadow-card);
    transition: border-color var(--cp-motion-hover) ease, box-shadow var(--cp-motion-hover) ease;
}

.cp-ui .cp-card-interactive {
    cursor: pointer;
}

.cp-ui .cp-card-interactive:hover,
.cp-ui .cp-card-interactive:focus-within {
    border-color: var(--cp-border-hover);
    box-shadow: var(--cp-shadow-elevated);
}

.cp-ui .cp-card-interactive.is-selected {
    border-color: var(--cp-primary);
    background: var(--cp-accent-bg);
}

.cp-ui .cp-panel-inset {
    background: var(--cp-bg-muted);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-panel);
    padding: 1rem;
}

.cp-ui .modal {
    --bs-modal-bg: var(--cp-surface);
    --x-modal-bg: var(--cp-surface);
    --bs-modal-color: var(--cp-text);
    --x-modal-color: var(--cp-text);
    --bs-modal-border-color: var(--cp-border);
    --x-modal-border-color: var(--cp-border);
    --bs-modal-border-radius: var(--cp-radius-card);
    --x-modal-border-radius: var(--cp-radius-card);
    --bs-modal-inner-border-radius: calc(var(--cp-radius-card) - 1px);
    --x-modal-inner-border-radius: calc(var(--cp-radius-card) - 1px);
    --bs-modal-box-shadow: var(--cp-shadow-elevated);
    --x-modal-box-shadow: var(--cp-shadow-elevated);
    --bs-modal-header-border-color: var(--cp-border);
    --x-modal-header-border-color: var(--cp-border);
    --bs-modal-footer-border-color: var(--cp-border);
    --x-modal-footer-border-color: var(--cp-border);
    --bs-modal-header-padding: 1.25rem var(--cp-card-pad);
    --x-modal-header-padding: 1.25rem var(--cp-card-pad);
    --bs-modal-padding: var(--cp-card-pad);
    --x-modal-padding: var(--cp-card-pad);
    --bs-modal-footer-gap: var(--cp-btn-gap);
    --x-modal-footer-gap: var(--cp-btn-gap);
    --bs-modal-title-line-height: var(--cp-leading-heading);
    --x-modal-title-line-height: var(--cp-leading-heading);
}

.cp-ui .modal-content {
    box-shadow: var(--cp-shadow-elevated);
}

.cp-ui .modal-title {
    font-family: var(--cp-font-heading);
    font-weight: 600;
    font-size: var(--cp-text-lg);
    letter-spacing: var(--cp-tracking-heading);
    color: var(--cp-text);
}

.cp-ui .modal-footer {
    padding: 1rem var(--cp-card-pad);
}

.cp-ui .dropdown-menu {
    --bs-dropdown-bg: var(--cp-popover);
    --x-dropdown-bg: var(--cp-popover);
    --bs-dropdown-color: var(--cp-text);
    --x-dropdown-color: var(--cp-text);
    --bs-dropdown-border-color: var(--cp-border);
    --x-dropdown-border-color: var(--cp-border);
    --bs-dropdown-border-radius: var(--cp-radius-panel);
    --x-dropdown-border-radius: var(--cp-radius-panel);
    --bs-dropdown-inner-border-radius: calc(var(--cp-radius-panel) - 1px);
    --x-dropdown-inner-border-radius: calc(var(--cp-radius-panel) - 1px);
    --bs-dropdown-box-shadow: var(--cp-shadow-elevated);
    --x-dropdown-box-shadow: var(--cp-shadow-elevated);
    --bs-dropdown-padding-x: 0.25rem;
    --x-dropdown-padding-x: 0.25rem;
    --bs-dropdown-padding-y: 0.25rem;
    --x-dropdown-padding-y: 0.25rem;
    --bs-dropdown-item-padding-x: 0.5rem;
    --x-dropdown-item-padding-x: 0.5rem;
    --bs-dropdown-item-padding-y: 0.375rem;
    --x-dropdown-item-padding-y: 0.375rem;
    --bs-dropdown-item-border-radius: var(--cp-radius-nav);
    --x-dropdown-item-border-radius: var(--cp-radius-nav);
    --bs-dropdown-link-color: var(--cp-text);
    --x-dropdown-link-color: var(--cp-text);
    --bs-dropdown-link-hover-color: var(--cp-accent-fg);
    --x-dropdown-link-hover-color: var(--cp-accent-fg);
    --bs-dropdown-link-hover-bg: var(--cp-accent-bg);
    --x-dropdown-link-hover-bg: var(--cp-accent-bg);
    --bs-dropdown-link-active-color: var(--cp-accent-fg);
    --x-dropdown-link-active-color: var(--cp-accent-fg);
    --bs-dropdown-link-active-bg: var(--cp-accent-bg);
    --x-dropdown-link-active-bg: var(--cp-accent-bg);
    --bs-dropdown-link-disabled-color: var(--cp-text-2);
    --x-dropdown-link-disabled-color: var(--cp-text-2);
    --bs-dropdown-header-color: var(--cp-text-2);
    --x-dropdown-header-color: var(--cp-text-2);
    --bs-dropdown-divider-bg: var(--cp-border);
    --x-dropdown-divider-bg: var(--cp-border);
    --bs-dropdown-font-size: var(--cp-text-sm);
    --x-dropdown-font-size: var(--cp-text-sm);
    --bs-dropdown-min-width: 11rem;
    --x-dropdown-min-width: 11rem;
    box-shadow: var(--cp-shadow-elevated);
}

.cp-ui .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    cursor: pointer;
}

.cp-ui .dropdown-item.cp-danger {
    color: var(--cp-danger);
}

.cp-ui .dropdown-item.cp-danger:hover,
.cp-ui .dropdown-item.cp-danger:focus {
    color: var(--cp-danger);
    background: var(--cp-danger-bg);
}

/* ---------------------------------------------------------------------------
   Forms (Lovable Input: border input, bg background, focus ring; search = pill)
   --------------------------------------------------------------------------- */
.cp-ui .form-control,
.cp-ui .form-select,
.cp-ui .cp-input {
    min-height: var(--cp-btn-md);
    padding: 0.5rem 0.875rem;
    font-size: var(--cp-text-sm);
    color: var(--cp-text);
    background-color: var(--cp-surface);
    border: 1px solid var(--cp-input-border);
    border-radius: var(--cp-radius-input);
    box-shadow: none;
    transition: border-color var(--cp-motion-fast) ease, box-shadow var(--cp-motion-fast) ease;
}

.cp-ui .form-control::placeholder,
.cp-ui .cp-input::placeholder {
    color: var(--cp-text-2);
    opacity: 0.85;
}

.cp-ui .form-control:focus,
.cp-ui .form-select:focus,
.cp-ui .cp-input:focus {
    color: var(--cp-text);
    background-color: var(--cp-surface);
    border-color: var(--cp-ring);
    box-shadow: 0 0 0 1px var(--cp-ring);
}

/* Native select popup: the browser paints <option> from these values, so they must be tokens too
   (color-scheme on the theme root tells Chrome to use its dark chrome for the popup). */
.cp-ui .form-select option,
.cp-ui select option {
    background-color: var(--cp-popover);
    color: var(--cp-text);
}

.cp-ui .form-control-sm,
.cp-ui .form-select-sm {
    min-height: var(--cp-btn-sm);
    padding: 0.375rem 0.75rem;
    border-radius: var(--cp-radius-nav);
    font-size: 13px;
}

.cp-ui .form-control:disabled,
.cp-ui .form-select:disabled {
    background-color: var(--cp-bg-muted);
    color: var(--cp-text-2);
}

.cp-ui .form-control.is-invalid,
.cp-ui .form-select.is-invalid {
    border-color: var(--cp-danger);
    background-image: none;
}

.cp-ui .invalid-feedback,
.cp-ui .validation-message {
    color: var(--cp-danger);
    font-size: var(--cp-text-xs);
}

.cp-ui .form-label {
    font-size: var(--cp-text-sm);
    font-weight: 500;
    color: var(--cp-text-2-strong);
    margin-bottom: 0.375rem;
}

.cp-ui .form-text,
.cp-ui small,
.cp-ui .small {
    color: var(--cp-text-2);
}

.cp-ui .input-group-text {
    background-color: var(--cp-bg-muted);
    border: 1px solid var(--cp-input-border);
    color: var(--cp-text-2);
    font-size: var(--cp-text-sm);
}

.cp-ui .form-check-input {
    border-color: var(--cp-input-border);
    background-color: var(--cp-surface);
}

.cp-ui .form-check-input:checked {
    background-color: var(--cp-primary);
    border-color: var(--cp-primary);
}

.cp-ui .form-check-input:focus {
    border-color: var(--cp-ring);
    box-shadow: 0 0 0 3px var(--cp-focus-ring);
}

/* Search pill (Lovable: h-11 rounded-full bg-card pl-10 pr-10 shadow-card) */
.cp-ui .cp-search {
    position: relative;
    width: 100%;
}

.cp-ui .cp-search .cp-input {
    width: 100%;
    height: var(--cp-input-h);
    border-radius: var(--cp-radius-pill);
    padding-left: 2.5rem;
    padding-right: 2.75rem;
    box-shadow: var(--cp-shadow-card);
}

.cp-ui .cp-search__icon {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cp-text-2);
    pointer-events: none;
}

.cp-ui .cp-search__clear {
    position: absolute;
    right: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
}

/* ---------------------------------------------------------------------------
   Tabs (edit modal)
   --------------------------------------------------------------------------- */
.cp-ui .nav-tabs {
    --bs-nav-tabs-border-width: 1px;
    --x-nav-tabs-border-width: 1px;
    --bs-nav-tabs-border-color: var(--cp-border);
    --x-nav-tabs-border-color: var(--cp-border);
    --bs-nav-tabs-border-radius: var(--cp-radius-nav);
    --x-nav-tabs-border-radius: var(--cp-radius-nav);
    --bs-nav-tabs-link-active-color: var(--cp-primary);
    --x-nav-tabs-link-active-color: var(--cp-primary);
    --bs-nav-tabs-link-active-bg: transparent;
    --x-nav-tabs-link-active-bg: transparent;
    --bs-nav-tabs-link-active-border-color: transparent transparent var(--cp-primary);
    --x-nav-tabs-link-active-border-color: transparent transparent var(--cp-primary);
    --bs-nav-tabs-link-hover-border-color: transparent transparent var(--cp-border-hover);
    --x-nav-tabs-link-hover-border-color: transparent transparent var(--cp-border-hover);
    --bs-nav-link-color: var(--cp-text-2);
    --x-nav-link-color: var(--cp-text-2);
    --bs-nav-link-hover-color: var(--cp-text);
    --x-nav-link-hover-color: var(--cp-text);
    --bs-nav-link-font-size: var(--cp-text-sm);
    --x-nav-link-font-size: var(--cp-text-sm);
    --bs-nav-link-font-weight: 500;
    --x-nav-link-font-weight: 500;
    --bs-nav-link-padding-x: 0.875rem;
    --x-nav-link-padding-x: 0.875rem;
    --bs-nav-link-padding-y: 0.625rem;
    --x-nav-link-padding-y: 0.625rem;
    gap: 0.25rem;
}

.cp-ui .nav-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-width: 0 0 2px;
    border-radius: var(--cp-radius-nav) var(--cp-radius-nav) 0 0;
    margin-bottom: -1px;
    transition: color var(--cp-motion-fast) ease, background-color var(--cp-motion-fast) ease,
                border-color var(--cp-motion-fast) ease;
}

.cp-ui .nav-tabs .nav-link:hover:not(.active) {
    background: var(--cp-bg-muted);
}

.cp-ui .nav-tabs .nav-link.active {
    border-bottom-color: var(--cp-primary);
}

.cp-ui .nav-tabs .nav-link:disabled,
.cp-ui .nav-tabs .nav-link.disabled {
    color: var(--cp-text-2);
    opacity: 0.6;
}

/* ---------------------------------------------------------------------------
   Data table (Lovable table in a rounded-2xl card)
   --------------------------------------------------------------------------- */
.cp-ui .cp-table-card {
    overflow: hidden;
    border-radius: var(--cp-radius-card);
    border: 1px solid var(--cp-border);
    background: var(--cp-surface);
    box-shadow: var(--cp-shadow-card);
}

.cp-ui .cp-table-scroll {
    overflow-x: auto;
}

.cp-ui .cp-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
    text-align: left;
    font-size: var(--cp-text-sm);
    color: var(--cp-text);
}

.cp-ui .cp-table thead tr {
    border-bottom: 1px solid var(--cp-border);
    background: color-mix(in oklab, var(--cp-bg-muted) 60%, transparent);
}

.cp-ui .cp-table th {
    padding: 1rem 1.25rem;
    font-size: var(--cp-text-xs);
    font-weight: 600;
    letter-spacing: var(--cp-tracking-label);
    text-transform: uppercase;
    color: var(--cp-text-2);
    white-space: nowrap;
}

.cp-ui .cp-table td {
    padding: 1rem 1.25rem;
    vertical-align: middle;
}

.cp-ui .cp-table tbody tr {
    border-bottom: 1px solid color-mix(in oklab, var(--cp-border) 70%, transparent);
    transition: background-color 200ms;
}

.cp-ui .cp-table tbody tr:last-child {
    border-bottom: 0;
}

.cp-ui .cp-table tbody tr:hover {
    background: color-mix(in oklab, var(--cp-accent-bg) 32%, transparent);
}

.cp-ui .cp-table .cp-text-right {
    text-align: right;
}

.cp-ui .cp-table__name {
    max-width: 180px;
}

.cp-ui .cp-table__dest {
    max-width: 220px;
}

/* Short link as a mono primary button with copy icon (Lovable row) */
.cp-ui .cp-shortlink {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--cp-font-mono);
    font-size: var(--cp-text-xs);
    font-weight: 500;
    color: var(--cp-primary);
    text-underline-offset: 4px;
    cursor: pointer;
}

.cp-ui .cp-shortlink:hover {
    text-decoration: underline;
}

.cp-ui .cp-shortlink .cp-icon {
    opacity: 0.6;
    transition: opacity var(--cp-motion-fast) ease;
}

.cp-ui .cp-shortlink:hover .cp-icon {
    opacity: 1;
}

/* Row action buttons: 36 px ghost, muted -> primary (Lovable ActionButton) */
.cp-ui .cp-row-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.125rem;
}

.cp-ui .cp-row-actions .btn-icon {
    --bs-btn-border-radius: var(--cp-radius-nav);
    --x-btn-border-radius: var(--cp-radius-nav);
    --bs-btn-color: var(--cp-text-2);
    --x-btn-color: var(--cp-text-2);
    --bs-btn-hover-color: var(--cp-primary);
    --x-btn-hover-color: var(--cp-primary);
    width: 36px;
    height: 36px;
}

/* Destructive row action: red only on hover / focus (guide §2: red for destructive actions). */
.cp-ui .cp-row-actions .cp-row-actions__danger {
    --bs-btn-hover-color: var(--cp-danger);
    --x-btn-hover-color: var(--cp-danger);
    --bs-btn-hover-bg: var(--cp-danger-bg);
    --x-btn-hover-bg: var(--cp-danger-bg);
    --bs-btn-active-color: var(--cp-danger);
    --x-btn-active-color: var(--cp-danger);
    --bs-btn-active-bg: var(--cp-danger-bg);
    --x-btn-active-bg: var(--cp-danger-bg);
}

/* ---------------------------------------------------------------------------
   Alerts, progress, list groups
   --------------------------------------------------------------------------- */
.cp-ui .alert {
    --bs-alert-border-radius: var(--cp-radius-panel);
    --x-alert-border-radius: var(--cp-radius-panel);
    --bs-alert-padding-x: 1rem;
    --x-alert-padding-x: 1rem;
    --bs-alert-padding-y: 0.75rem;
    --x-alert-padding-y: 0.75rem;
    font-size: var(--cp-text-sm);
    border: 1px solid var(--cp-border);
    background: var(--cp-bg-muted);
    color: var(--cp-text);
}

.cp-ui .alert-danger {
    background: var(--cp-danger-bg);
    color: var(--cp-danger);
    border-color: var(--cp-danger);
}

.cp-ui .alert-warning {
    background: var(--cp-warning-bg);
    color: var(--cp-warning-fg);
    border-color: transparent;
}

.cp-ui .alert-success,
.cp-ui .alert-info {
    background: var(--cp-success-bg);
    color: var(--cp-success-fg);
    border-color: transparent;
}

.cp-ui .progress {
    --bs-progress-bg: var(--cp-surface-2);
    --x-progress-bg: var(--cp-surface-2);
    --bs-progress-bar-bg: var(--cp-primary);
    --x-progress-bar-bg: var(--cp-primary);
    --bs-progress-border-radius: var(--cp-radius-pill);
    --x-progress-border-radius: var(--cp-radius-pill);
}

.cp-ui .progress-bar {
    background-color: var(--cp-primary);
}

.cp-ui .list-group {
    --bs-list-group-bg: var(--cp-surface);
    --x-list-group-bg: var(--cp-surface);
    --bs-list-group-color: var(--cp-text);
    --x-list-group-color: var(--cp-text);
    --bs-list-group-border-color: var(--cp-border);
    --x-list-group-border-color: var(--cp-border);
    --bs-list-group-border-radius: var(--cp-radius-panel);
    --x-list-group-border-radius: var(--cp-radius-panel);
}

.cp-ui .badge {
    --bs-badge-border-radius: var(--cp-radius-pill);
    --x-badge-border-radius: var(--cp-radius-pill);
    --bs-badge-font-weight: 600;
    --x-badge-font-weight: 600;
    --bs-badge-font-size: 0.7rem;
    --x-badge-font-size: 0.7rem;
}

.cp-ui .badge.badge-compacto,
.cp-ui .badge.bg-compacto-subtle,
.cp-ui .badge.bg-primary,
.cp-ui .badge.bg-success,
.cp-ui .badge.bg-info,
.cp-ui .badge.bg-secondary {
    background: var(--cp-accent-bg) !important;
    color: var(--cp-accent-fg) !important;
    border: 1px solid transparent;
}

.cp-ui .badge.bg-danger,
.cp-ui .badge.bg-danger-subtle {
    background: var(--cp-danger-bg) !important;
    color: var(--cp-danger) !important;
}

.cp-ui .spinner-border {
    color: var(--cp-primary);
}

.cp-ui hr {
    border-color: var(--cp-border);
    opacity: 1;
}

/* ---------------------------------------------------------------------------
   Toast (Lovable .toast-notice: bottom-centre pill, inverted colours)
   --------------------------------------------------------------------------- */
.cp-ui .cp-toast,
.cp-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    z-index: 1080;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transform: translate(-50%, 1rem);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-pill);
    background: var(--cp-text);
    color: var(--cp-bg);
    padding: 0.7rem 1rem;
    font-family: var(--cp-font-body);
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    box-shadow: var(--cp-shadow-card);
    transition: opacity 200ms, transform 200ms;
    max-width: calc(100vw - 2rem);
}

.cp-toast.is-visible {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
}

.cp-toast--error {
    background: var(--cp-danger);
    color: #FFFFFF;
    border-color: transparent;
}

.cp-toast .btn-close {
    filter: invert(1);
    margin-left: 0.25rem;
}

/* ---------------------------------------------------------------------------
   Technical grid (guide §11 / Lovable .technical-grid)
   --------------------------------------------------------------------------- */
.cp-grid-bg {
    background-color: var(--cp-bg);
    background-image:
        linear-gradient(var(--cp-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--cp-grid-line) 1px, transparent 1px);
    background-size: var(--cp-grid-size) var(--cp-grid-size);
}

.cp-grid-bg--masked {
    -webkit-mask-image: var(--cp-grid-mask);
    mask-image: var(--cp-grid-mask);
}

/* ---------------------------------------------------------------------------
   Motion (guide §14 / Lovable .animate-rise + .delay-N)
   --------------------------------------------------------------------------- */
@keyframes cp-rise {
    from { opacity: 0; transform: translateY(var(--cp-enter-offset)); }
    to { opacity: 1; transform: translateY(0); }
}

.cp-rise,
.cp-enter {
    animation: cp-rise var(--cp-motion-enter) both;
}

.cp-enter-stagger > * {
    animation: cp-rise var(--cp-motion-enter) both;
}

.cp-delay-0, .cp-enter-stagger > :nth-child(1) { animation-delay: 0ms; }
.cp-delay-1, .cp-enter-stagger > :nth-child(2) { animation-delay: calc(var(--cp-motion-stagger) * 1); }
.cp-delay-2, .cp-enter-stagger > :nth-child(3) { animation-delay: calc(var(--cp-motion-stagger) * 2); }
.cp-delay-3, .cp-enter-stagger > :nth-child(4) { animation-delay: calc(var(--cp-motion-stagger) * 3); }
.cp-delay-4, .cp-enter-stagger > :nth-child(5) { animation-delay: calc(var(--cp-motion-stagger) * 4); }
.cp-delay-5, .cp-enter-stagger > :nth-child(6) { animation-delay: calc(var(--cp-motion-stagger) * 5); }
.cp-delay-6, .cp-enter-stagger > :nth-child(7) { animation-delay: calc(var(--cp-motion-stagger) * 6); }
.cp-delay-7, .cp-enter-stagger > :nth-child(n + 8) { animation-delay: calc(var(--cp-motion-stagger) * 7); }

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

.cp-spin {
    animation: cp-spin 1s linear infinite;
}

/* ---------------------------------------------------------------------------
   Icons (Components/Ui/Icon.razor)
   --------------------------------------------------------------------------- */
.cp-icon {
    display: inline-block;
    vertical-align: -0.2em;
    flex: 0 0 auto;
    color: inherit;
}

/* ---------------------------------------------------------------------------
   Logo (Components/Ui/CompactoLogo.razor)
   --------------------------------------------------------------------------- */
.cp-logo {
    overflow: visible;
}

.cp-logo__bar {
    fill: var(--cp-logo-accent);
}

/* ---------------------------------------------------------------------------
   Skip link (guide §17 / Lovable .skip-link)
   --------------------------------------------------------------------------- */
.cp-skip-link {
    position: fixed;
    left: 1rem;
    top: -5rem;
    z-index: 2000;
    border-radius: var(--cp-radius-nav);
    background: var(--cp-primary);
    color: var(--cp-on-primary);
    padding: 0.75rem 1rem;
    font-family: var(--cp-font-body);
    font-weight: 600;
    font-size: var(--cp-text-sm);
    text-decoration: none;
    transition: top var(--cp-motion-fast) ease;
}

.cp-skip-link:focus,
.cp-skip-link:focus-visible {
    top: 1rem;
    color: var(--cp-on-primary);
    outline: 2px solid var(--cp-focus-outline);
    outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   Boot loader (PR 05.08, wwwroot/index.html #app). Replaces the default blue
   Blazor ring: Compacto wordmark whose three bars pulse like an equalizer, over
   a thin brand-gradient bar driven by --blazor-load-percentage. Rendered before
   Blazor starts, so it only relies on tokens.css and the early theme script.
   --------------------------------------------------------------------------- */
.cp-boot {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    background-color: var(--cp-bg);
    background-image:
        linear-gradient(var(--cp-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--cp-grid-line) 1px, transparent 1px);
    background-size: var(--cp-grid-size) var(--cp-grid-size);
    background-position: center;
    color: var(--cp-text);
    font-family: var(--cp-font-body);
}

/* fade the grid towards the edges so the logo stays the focal point */
.cp-boot::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 45% 40% at 50% 50%, transparent 0%, var(--cp-bg) 100%);
    pointer-events: none;
}

.cp-boot > * {
    position: relative;
}

.cp-boot__logo {
    width: 11rem;
    height: auto;
    overflow: visible;
    animation: cp-rise var(--cp-motion-enter) var(--cp-ease) both;
}

.cp-boot__bar {
    fill: var(--cp-logo-accent);
    transform-box: fill-box;
    transform-origin: top;
    animation: cp-boot-pulse 1.1s var(--cp-ease) infinite;
}

.cp-boot__bar:nth-of-type(2) { animation-delay: 0.14s; }
.cp-boot__bar:nth-of-type(3) { animation-delay: 0.28s; }

@keyframes cp-boot-pulse {
    0%, 100% { transform: scaleY(1); opacity: 1; }
    50% { transform: scaleY(0.4); opacity: 0.55; }
}

.cp-boot__track {
    width: 11rem;
    height: 4px;
    overflow: hidden;
    border-radius: var(--cp-radius-pill);
    background: color-mix(in srgb, var(--cp-border) 80%, transparent);
    animation: cp-rise var(--cp-motion-enter) var(--cp-ease) 80ms both;
}

.cp-boot__fill {
    width: var(--blazor-load-percentage, 0%);
    min-width: 8%;
    height: 100%;
    border-radius: inherit;
    background: var(--cp-primary-fill);
    transition: width 0.2s ease-out;
}

.cp-boot__text {
    min-height: 1rem;
    font-family: var(--cp-font-mono);
    font-size: var(--cp-text-xs);
    letter-spacing: var(--cp-tracking-label);
    color: var(--cp-text-2);
    animation: cp-rise var(--cp-motion-enter) var(--cp-ease) 160ms both;
}

.cp-boot__text::after {
    content: var(--blazor-load-percentage-text, "");
}

@media (prefers-reduced-motion: reduce) {
    .cp-boot__logo,
    .cp-boot__track,
    .cp-boot__text,
    .cp-boot__bar {
        animation: none;
    }

    .cp-boot__fill {
        transition: none;
    }
}

/* First-login welcome dialog (Components/WelcomeFirstLoginModal.razor): lock page scroll while it is open,
   as the Bootstrap modal it replaced did. Scoped CSS cannot reach <body>, so the rule lives here. */
body:has(.cp-welcome) {
    overflow: hidden;
}

/* ...and the dashboard's arrival once its "journey" exit dissolves (js/cp-welcome.js toggles body.cp-arrive
   for 900 ms): the content settles from slightly zoomed and blurred, the nav simply fades in. */
body.cp-arrive #main-content {
    animation: cp-arrive 0.9s var(--cp-ease) both;
}

body.cp-arrive .cp-nav {
    animation: cp-arrive-fade 0.6s ease-out both;
}

@keyframes cp-arrive {
    from { opacity: 0; transform: scale(1.04); filter: blur(6px); }
    to { opacity: 1; transform: none; filter: none; }
}

@keyframes cp-arrive-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    body.cp-arrive #main-content,
    body.cp-arrive .cp-nav {
        animation: none;
    }
}

/* ---------------------------------------------------------------------------
   Page layout helpers used by the shell and the migrated pages
   --------------------------------------------------------------------------- */
.cp-container {
    width: 100%;
    max-width: var(--cp-container);
    margin: 0 auto;
    padding: 0 var(--cp-gutter);
}

/* Wide opt-in for table-heavy pages (decision D2): every .cp-container inside the page follows the nav
   width instead of the 1200 px reading width, so hero, header and table stay aligned with the menu. */
.cp-page--wide {
    --cp-container: var(--cp-container-wide, 1400px);
}

/* Hero strip (Lovable: technical-grid section, label pill, H1 42/48, intro) */
.cp-hero {
    border-bottom: 1px solid var(--cp-border);
}

.cp-hero__inner {
    padding: 3.5rem 0 2.5rem;
}

.cp-hero__content {
    max-width: 42rem;
}

.cp-hero__title {
    margin: 0;
    font-family: var(--cp-font-heading);
    font-size: var(--cp-text-h1);
    font-weight: 800;
    line-height: var(--cp-leading-tight);
    letter-spacing: var(--cp-tracking-heading);
    color: var(--cp-text);
}

.cp-hero__title .cp-accent {
    color: var(--cp-primary);
}

.cp-hero__intro {
    max-width: 36rem;
    margin: 1rem 0 0;
    font-size: var(--cp-text-md);
    line-height: var(--cp-leading-body);
    color: var(--cp-text-2);
}

@media (min-width: 768px) {
    .cp-hero__inner {
        padding: 4rem 0 3rem;
    }

    .cp-hero__intro {
        font-size: var(--cp-text-lg);
    }
}

/* Collapsible hero: the content row animates 1fr -> 0fr on scroll, the page keeps its length. */
.cp-hero--collapsible {
    position: relative;
}

.cp-hero--collapsible {
    overflow-anchor: none; /* the script compensates the scroll position itself */
}

/* The content row animates 1fr -> 0fr in both directions (fold on scroll down, unfold at the top). */
.cp-hero--collapsible .cp-hero__inner {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 380ms var(--cp-ease), padding 380ms var(--cp-ease);
}

.cp-hero--collapsible .cp-hero__content {
    min-height: 0;
    overflow: hidden;
    transition: opacity 220ms ease, transform 380ms var(--cp-ease);
}

.cp-page.is-collapsed .cp-hero--collapsible .cp-hero__inner {
    grid-template-rows: 0fr;
    padding-top: 0;
    padding-bottom: 0;
}

.cp-page.is-collapsed .cp-hero--collapsible .cp-hero__content {
    opacity: 0;
    transform: translateY(-12px);
}

.cp-page.is-collapsed .cp-hero--collapsible {
    border-bottom-color: transparent;
}

.cp-page.is-collapsed {
    padding-bottom: var(--cp-collapsed-pad, 0px);
}

/* Section (Lovable: max-w 1200, py-8 / md:py-10) */
.cp-section {
    padding: 2rem 0;
}

@media (min-width: 768px) {
    .cp-section {
        padding: 2.5rem 0;
    }
}

/* Header grid: heading / actions on the first row, optional toolbar (search) on the second. */
.cp-section__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "heading actions"
        "toolbar toolbar";
    align-items: center;
    gap: 1rem 1.5rem;
    margin-bottom: 1.5rem;
}

.cp-section__heading {
    grid-area: heading;
    min-width: 0;
}

.cp-section__actions {
    grid-area: actions;
}

.cp-section__toolbar {
    grid-area: toolbar;
    min-width: 0;
}

.cp-section__header--with-toolbar {
    row-gap: 1.25rem;
}

@media (max-width: 767.98px) {
    .cp-section__header {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "heading"
            "actions"
            "toolbar";
        gap: 1rem;
    }
}

@media (min-width: 576px) {
    .cp-section__toolbar .cp-search {
        max-width: 28rem;
    }
}

/* Sticky compact bar under the fixed nav; becomes the hero's stand-in when the page is collapsed. */
.cp-section__header--sticky {
    position: sticky;
    top: var(--cp-nav-h);
    z-index: 5;
    margin: 0 calc(-1 * var(--cp-gutter)) 1.5rem;
    padding: 0.5rem var(--cp-gutter);
    background: var(--cp-nav-bg);
    -webkit-backdrop-filter: blur(var(--cp-nav-blur));
    backdrop-filter: blur(var(--cp-nav-blur));
    border-bottom: 1px solid transparent;
    transition: border-color var(--cp-motion-fast) ease, padding 380ms var(--cp-ease);
}

.cp-section__header--sticky .cp-section__title {
    transition: font-size 380ms var(--cp-ease);
}

.cp-section__sentinel {
    height: 0;
    margin: 0;
    padding: 0;
}

/* Stage 2 (.is-compact): the header is stuck under the nav and the user keeps scrolling -> one row,
   heading · search · actions, so the search stays on screen. */
.cp-page.is-compact .cp-section__header--sticky {
    border-bottom-color: var(--cp-border);
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}

.cp-page.is-compact .cp-section__header--sticky .cp-section__title {
    font-size: var(--cp-text-lg);
}

.cp-page.is-compact .cp-section__header--sticky .cp-section__subtitle {
    display: none;
}

.cp-page.is-compact .cp-section__header--sticky.cp-section__header--with-toolbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "heading toolbar actions";
    row-gap: 0.75rem;
}

.cp-page.is-compact .cp-section__header--sticky .cp-section__toolbar .cp-search {
    max-width: 24rem;
}

.cp-page.is-compact .cp-section__header--sticky .cp-section__toolbar .cp-input {
    height: var(--cp-btn-md);
}

@media (max-width: 767.98px) {
    .cp-page.is-compact .cp-section__header--sticky.cp-section__header--with-toolbar {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "heading actions"
            "toolbar toolbar";
    }
}

.cp-section__title {
    margin: 0;
    font-family: var(--cp-font-heading);
    font-size: var(--cp-text-h2);
    font-weight: 700;
    letter-spacing: var(--cp-tracking-heading);
    color: var(--cp-text);
}

.cp-section__subtitle {
    margin: 0.25rem 0 0;
    font-size: var(--cp-text-sm);
    color: var(--cp-text-2);
}

.cp-section__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cp-section__actions .btn-premium {
    flex: 1 1 auto;
}

@media (min-width: 768px) {
    .cp-section__header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .cp-section__actions .btn-premium {
        flex: 0 0 auto;
    }
}

.cp-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

@media (min-width: 576px) {
    .cp-toolbar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .cp-toolbar .cp-search {
        max-width: 28rem;
    }
}

/* Pagination (Lovable: border-t, "Página X de Y", icon buttons) */
.cp-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--cp-border);
}

.cp-pagination__summary {
    display: none;
    margin: 0;
    font-size: var(--cp-text-sm);
    color: var(--cp-text-2);
}

.cp-pagination__pages {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
}

@media (min-width: 576px) {
    .cp-pagination__summary {
        display: block;
    }

    .cp-pagination__pages {
        margin-left: 0;
    }
}

/* Empty state (Lovable EmptyState) */
.cp-empty {
    display: grid;
    place-items: center;
    padding: 4rem 1.5rem;
    text-align: center;
}

.cp-empty__title {
    margin: 1rem 0 0;
    font-family: var(--cp-font-heading);
    font-size: var(--cp-text-lg);
    font-weight: 600;
    color: var(--cp-text);
}

.cp-empty__text {
    margin: 0.25rem 0 0;
    font-size: var(--cp-text-sm);
    color: var(--cp-text-2);
}

/* Mobile link card (Lovable MobileCard) */
.cp-link-card {
    border-radius: var(--cp-radius-card);
    border: 1px solid var(--cp-border);
    background: var(--cp-surface);
    padding: 1.25rem;
    box-shadow: var(--cp-shadow-card);
}

.cp-link-card__head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.cp-link-card__body {
    min-width: 0;
    flex: 1 1 auto;
}

.cp-link-card__name {
    margin: 0;
    font-family: var(--cp-font-body);
    font-size: var(--cp-text-sm);
    font-weight: 600;
    letter-spacing: 0;
}

.cp-link-card__dest {
    margin: 0.25rem 0 0;
    font-size: var(--cp-text-xs);
    color: var(--cp-text-2);
}

.cp-link-card__short {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 2.75rem;
    margin-top: 1rem;
    padding: 0 0.75rem;
    border: 0;
    border-radius: var(--cp-radius-panel);
    background: var(--cp-accent-bg);
    font-family: var(--cp-font-mono);
    font-size: var(--cp-text-xs);
    font-weight: 500;
    color: var(--cp-primary);
    cursor: pointer;
}

.cp-link-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 1rem;
}

.cp-link-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-width: 0;
}

.cp-link-card__clicks {
    font-family: var(--cp-font-mono);
    font-size: var(--cp-text-sm);
    font-weight: 500;
    white-space: nowrap;
}

.cp-link-card__clicks span {
    font-family: var(--cp-font-body);
    font-size: var(--cp-text-xs);
    font-weight: 400;
    color: var(--cp-text-2);
}

.cp-link-cards {
    display: grid;
    gap: 1rem;
}

/* Code block (guide §13) */
.cp-ui .cp-code {
    background: var(--cp-code-bg);
    color: var(--cp-code-text);
    border: 1px solid var(--cp-code-border);
    border-radius: var(--cp-radius-panel);
    overflow: hidden;
    max-width: 100%;
}

.cp-ui .cp-code pre {
    margin: 0;
    padding: 1rem;
    overflow-x: auto;
    font-family: var(--cp-font-mono);
    font-size: var(--cp-text-sm);
    line-height: var(--cp-leading-body);
    color: inherit;
    background: transparent;
}

/* ---------------------------------------------------------------------------
   Modals (composition: Lovable NewLinkDialog / delete-modal / qr-modal).
   Bootstrap drives the modal itself; these rules only restyle its chrome.
   --------------------------------------------------------------------------- */
.cp-ui .cp-modal .modal-content {
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-card);
    background: var(--cp-surface);
    box-shadow: var(--cp-shadow-elevated);
    overflow: hidden;
}

.cp-ui .cp-modal .modal-header,
.cp-ui .cp-modal .modal-body,
.cp-ui .cp-modal .modal-footer {
    border-color: var(--cp-border);
}

.cp-ui .cp-modal__header {
    position: relative;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
}

.cp-ui .cp-modal__header--plain {
    align-items: center;
    padding: 1.25rem 1.5rem;
}

.cp-ui .cp-modal__heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem;
    min-width: 0;
}

.cp-ui .cp-modal__heading--inline {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
}

.cp-ui .cp-modal__kicker {
    margin: 0 0 0.125rem;
    font-size: var(--cp-text-xs);
    font-weight: 600;
    letter-spacing: var(--cp-tracking-label-wide);
    text-transform: uppercase;
    color: var(--cp-primary);
}

.cp-ui .cp-modal__kicker--danger {
    color: var(--cp-danger);
}

.cp-ui .cp-modal__title {
    margin: 0;
    font-family: var(--cp-font-heading);
    font-size: var(--cp-text-h2);
    font-weight: 800;
    line-height: var(--cp-leading-heading);
    letter-spacing: var(--cp-tracking-heading);
    color: var(--cp-text);
}

.cp-ui .cp-modal__title--sm {
    font-size: var(--cp-text-h3);
    font-weight: 700;
}

.cp-ui .cp-modal__title .cp-accent {
    color: var(--cp-primary);
}

.cp-ui .cp-modal__intro {
    max-width: 34rem;
    margin: 0;
    font-size: var(--cp-text-sm);
    line-height: var(--cp-leading-body);
    color: var(--cp-text-2);
}

.cp-ui .cp-modal__close {
    flex: 0 0 auto;
    margin-left: auto;
    border-radius: var(--cp-radius-pill);
}

.cp-ui .cp-modal__body {
    padding: 0;
}

.cp-ui .cp-modal__body--plain {
    padding: 1.5rem;
}

.cp-ui .cp-modal__footer {
    gap: var(--cp-btn-gap);
    padding: 1.25rem 1.5rem;
}

.cp-ui .cp-modal__footer--between {
    justify-content: space-between;
}

.cp-ui .cp-modal__dialog--sm {
    max-width: 30rem;
}

/* Two-column create dialog */
.cp-ui .cp-modal--split .modal-dialog {
    max-width: 960px;
}

/* Step that needs more room (schedule): the dialog grows and shrinks back with a transition. */
.cp-ui .cp-modal--wizard .modal-dialog {
    transition: max-width var(--cp-motion-hover) var(--cp-ease);
}

@media (min-width: 1200px) {
    .cp-ui .cp-modal__dialog--wide {
        max-width: 1140px;
    }
}

.cp-ui .cp-modal--split .cp-modal__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

/* min-width: 0 everywhere a long URL could otherwise force a column to grow (fr = minmax(auto, fr)). */
.cp-ui .cp-modal__main {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    min-width: 0;
    padding: 1.5rem;
}

.cp-ui .cp-modal__aside {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
    min-width: 0;
    padding: 1.5rem;
    border-top: 1px solid var(--cp-border);
    background: color-mix(in oklab, var(--cp-surface-2) 50%, transparent);
}

.cp-ui .cp-modal__actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--cp-border);
}

@media (min-width: 768px) {
    .cp-ui .cp-modal--split .cp-modal__body {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    }

    .cp-ui .cp-modal__main {
        padding: 1.75rem 2rem;
    }

    .cp-ui .cp-modal__aside {
        border-top: 0;
        border-left: 1px solid var(--cp-border);
    }
}

/* Numbered form steps */
.cp-ui .cp-form-step {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cp-ui .cp-form-step__head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.cp-ui .cp-form-step__number {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0.125rem;
    border: 1px solid var(--cp-border);
    border-radius: 6px;
    background: var(--cp-surface-2);
    font-family: var(--cp-font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--cp-primary);
}

.cp-ui .cp-form-step__title {
    margin: 0;
    font-family: var(--cp-font-heading);
    font-size: var(--cp-text-sm);
    font-weight: 700;
    letter-spacing: var(--cp-tracking-heading);
    color: var(--cp-text);
}

.cp-ui .cp-form-step__hint {
    margin: 0.125rem 0 0;
    font-size: var(--cp-text-xs);
    color: var(--cp-text-2);
}

.cp-ui .cp-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cp-ui .cp-field .form-control,
.cp-ui .cp-field .form-select {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    border-radius: var(--cp-radius-panel);
}

.cp-ui .cp-field__error,
.cp-ui .cp-field__ok {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.375rem;
    font-size: var(--cp-text-xs);
    font-weight: 500;
    color: var(--cp-danger);
}

.cp-ui .cp-field__ok {
    color: var(--cp-primary);
}

.cp-ui .cp-field .form-control.is-invalid {
    border-color: var(--cp-danger);
}

.cp-ui .cp-field .form-control.is-invalid:focus {
    box-shadow: 0 0 0 1px var(--cp-danger);
}

.cp-ui .cp-input-icon {
    position: relative;
}

.cp-ui .cp-input-icon__icon {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cp-text-2);
    pointer-events: none;
}

.cp-ui .cp-input-icon .form-control {
    padding-left: 2.5rem;
}

/* Password protection toggle row */
.cp-ui .cp-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-panel);
    background: color-mix(in oklab, var(--cp-surface-2) 60%, transparent);
    cursor: pointer;
    text-align: left;
}

.cp-ui .cp-toggle-row__label {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-size: var(--cp-text-sm);
    font-weight: 600;
    color: var(--cp-text);
}

.cp-ui .cp-toggle-row__icon {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--cp-radius-nav);
    background: var(--cp-surface);
    color: var(--cp-primary);
    box-shadow: var(--cp-shadow-card);
}

.cp-ui .cp-switch {
    position: relative;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 1.25rem;
    border-radius: var(--cp-radius-pill);
    background: var(--cp-border);
    transition: background-color var(--cp-motion-fast) ease;
}

.cp-ui .cp-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--cp-surface);
    box-shadow: var(--cp-shadow-card);
    transition: transform var(--cp-motion-fast) ease;
}

.cp-ui .cp-switch.is-on {
    background: var(--cp-primary);
}

.cp-ui .cp-switch.is-on::after {
    transform: translateX(1rem);
}

.cp-ui .cp-password-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding: 1rem;
    border: 1px dashed var(--cp-border);
    border-radius: var(--cp-radius-panel);
}

.cp-ui .cp-field--full {
    grid-column: 1 / -1;
}

@media (min-width: 576px) {
    .cp-ui .cp-password-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Live preview (create dialog aside) */
.cp-ui .cp-preview {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.cp-ui .cp-preview__kicker {
    margin: 0;
    font-family: var(--cp-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: var(--cp-tracking-label-wide);
    text-transform: uppercase;
    color: var(--cp-text-2);
}

.cp-ui .cp-preview__card {
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-card);
    background: var(--cp-surface);
    box-shadow: var(--cp-shadow-card);
}

.cp-ui .cp-preview__head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.cp-ui .cp-preview__mark {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--cp-radius-panel);
    background: var(--cp-primary-fill);
    color: var(--cp-on-gradient);
    box-shadow: var(--cp-shadow-action);
}

.cp-ui .cp-preview__text {
    min-width: 0;
}

.cp-ui .cp-preview__name {
    margin: 0;
    font-size: var(--cp-text-sm);
    font-weight: 600;
    color: var(--cp-text);
}

.cp-ui .cp-preview__dest {
    margin: 0.125rem 0 0;
    font-size: var(--cp-text-xs);
    color: var(--cp-text-2);
}

.cp-ui .cp-preview__short {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    margin: 1rem 0 0;
    padding: 0.625rem 0.75rem;
    border-radius: var(--cp-radius-panel);
    background: var(--cp-accent-bg);
    font-size: var(--cp-text-xs);
    font-weight: 600;
    color: var(--cp-primary);
    overflow: hidden;
}

.cp-ui .cp-preview__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.cp-ui .cp-preview__benefits {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--cp-text-xs);
    color: var(--cp-text-2);
}

.cp-ui .cp-preview__benefits li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.cp-ui .cp-preview__benefits .cp-icon {
    margin-top: 0.125rem;
    color: var(--cp-primary);
}

/* Delete dialog */
.cp-ui .cp-icon-box--danger {
    background: var(--cp-danger-bg);
    color: var(--cp-danger);
}

.cp-ui .cp-warning {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.cp-ui .cp-warning__icon {
    margin-top: 0.125rem;
    color: var(--cp-danger);
}

.cp-ui .cp-warning__text {
    margin: 0;
    font-size: var(--cp-text-md);
    line-height: var(--cp-leading-body);
    color: var(--cp-text);
}

.cp-ui .cp-delete-target {
    margin-top: 1.25rem;
}

.cp-ui .cp-delete-target__kicker {
    margin: 0 0 0.25rem;
    font-size: var(--cp-text-xs);
    font-weight: 600;
    letter-spacing: var(--cp-tracking-label);
    text-transform: uppercase;
    color: var(--cp-text-2);
}

.cp-ui .cp-delete-target__value {
    margin: 0;
    font-size: var(--cp-text-sm);
    color: var(--cp-text);
}

.cp-ui .cp-delete-target__name {
    margin: 0.125rem 0 0;
    font-size: var(--cp-text-xs);
    color: var(--cp-text-2);
}

/* QR dialog */
.cp-ui .cp-qr__loading {
    display: grid;
    place-items: center;
    min-height: 17rem;
}

.cp-ui .cp-qr__hint {
    margin: 0 0 1.5rem;
    text-align: center;
    font-size: var(--cp-text-sm);
    line-height: var(--cp-leading-body);
    color: var(--cp-text-2);
}

.cp-ui .cp-qr__frame {
    width: fit-content;
    margin: 0 auto;
    padding: 1rem;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-card);
    background: color-mix(in oklab, var(--cp-surface-2) 60%, transparent);
    box-shadow: var(--cp-shadow-card);
}

.cp-ui .cp-qr__canvas {
    position: relative;
    padding: 1rem;
    border-radius: var(--cp-radius-panel);
    background: #FFFFFF;
    box-shadow: var(--cp-shadow-card);
}

.cp-ui .cp-qr__image {
    display: block;
    width: 14rem;
    height: 14rem;
    object-fit: contain;
}

@media (min-width: 576px) {
    .cp-ui .cp-qr__image {
        width: 16rem;
        height: 16rem;
    }
}

/* Camera-viewfinder corners (Lovable qr-modal) */
.cp-ui .cp-qr__corner {
    position: absolute;
    width: 1rem;
    height: 1rem;
    border: 0 solid var(--cp-primary);
}

.cp-ui .cp-qr__corner--tl { top: 0.5rem; left: 0.5rem; border-top-width: 2px; border-left-width: 2px; border-top-left-radius: 6px; }
.cp-ui .cp-qr__corner--tr { top: 0.5rem; right: 0.5rem; border-top-width: 2px; border-right-width: 2px; border-top-right-radius: 6px; }
.cp-ui .cp-qr__corner--bl { bottom: 0.5rem; left: 0.5rem; border-bottom-width: 2px; border-left-width: 2px; border-bottom-left-radius: 6px; }
.cp-ui .cp-qr__corner--br { bottom: 0.5rem; right: 0.5rem; border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 6px; }

.cp-ui .cp-qr__url {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding: 0.625rem 0.75rem 0.625rem 1rem;
    border-radius: var(--cp-radius-panel);
    background: var(--cp-text);
    color: var(--cp-bg);
    font-size: var(--cp-text-sm);
}

.cp-ui .cp-qr__copy {
    --bs-btn-color: var(--cp-bg);
    --x-btn-color: var(--cp-bg);
    --bs-btn-hover-color: var(--cp-bg);
    --x-btn-hover-color: var(--cp-bg);
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.15);
    --x-btn-hover-bg: rgba(255, 255, 255, 0.15);
    flex: 0 0 auto;
}

/* Tagify (create dialog) follows the token system */
.cp-ui .tagify {
    --tags-border-color: var(--cp-input-border);
    --tags-hover-border-color: var(--cp-border-hover);
    --tags-focus-border-color: var(--cp-ring);
    --tag-bg: var(--cp-surface-2);
    --tag-hover: var(--cp-accent-bg);
    --tag-text-color: var(--cp-text-2-strong);
    --tag-remove-bg: var(--cp-danger-bg);
    --placeholder-color: var(--cp-text-2);
    --placeholder-color-focus: var(--cp-text-2);
    min-height: 44px;
    border-radius: var(--cp-radius-panel);
    background: var(--cp-surface);
    font-family: var(--cp-font-body);
    font-size: var(--cp-text-sm);
}

.cp-ui .tagify__tag > div {
    border-radius: var(--cp-radius-pill);
}

.cp-ui .tagify__input {
    color: var(--cp-text);
}

/* ---------------------------------------------------------------------------
   Tag editor (Components/Ui/TagInput.razor) — replaces the Tagify widget.
   --------------------------------------------------------------------------- */
.cp-ui .cp-tags {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}

.cp-ui .cp-tags__box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    min-height: 44px;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--cp-input-border);
    border-radius: var(--cp-radius-panel);
    background: var(--cp-surface);
    cursor: text;
    transition: border-color var(--cp-motion-fast) ease, box-shadow var(--cp-motion-fast) ease;
}

.cp-ui .cp-tags__box.is-focused {
    border-color: var(--cp-ring);
    box-shadow: 0 0 0 1px var(--cp-ring);
}

.cp-ui .cp-tags__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 100%;
    padding: 0.25rem 0.25rem 0.25rem 0.625rem;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-pill);
    background: var(--cp-surface-2);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--cp-text-2-strong);
    animation: cp-rise 200ms var(--cp-ease) both;
}

.cp-ui .cp-tags__remove {
    display: grid;
    place-items: center;
    width: 1.125rem;
    height: 1.125rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--cp-text-2);
    cursor: pointer;
    transition: color var(--cp-motion-fast) ease, background-color var(--cp-motion-fast) ease;
}

.cp-ui .cp-tags__remove:hover,
.cp-ui .cp-tags__remove:focus-visible {
    background: var(--cp-danger-bg);
    color: var(--cp-danger);
}

.cp-ui .cp-tags__input {
    flex: 1 1 6rem;
    min-width: 6rem;
    height: 1.75rem;
    padding: 0 0.25rem;
    border: 0;
    background: transparent;
    color: var(--cp-text);
    font-family: var(--cp-font-body);
    font-size: var(--cp-text-sm);
    outline: none;
}

.cp-ui .cp-tags__input::placeholder {
    color: var(--cp-text-2);
    opacity: 0.85;
}

.cp-ui .cp-tags__input:disabled {
    cursor: not-allowed;
}

.cp-ui .cp-tags__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: var(--cp-text-xs);
    color: var(--cp-text-2);
}

.cp-ui .cp-tags__count {
    flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------
   Edit dialog: step wizard + panels (composition: Lovable edit-modal).
   Steps are freely navigable (the sections are independent settings, not an
   ordered flow), so no step is ever marked "done".
   --------------------------------------------------------------------------- */
.cp-ui .cp-modal--wizard .modal-body {
    padding: 0;
}

.cp-ui .cp-wizard {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--cp-border);
    background: color-mix(in oklab, var(--cp-surface-2) 40%, transparent);
}

.cp-ui .cp-wizard__steps {
    display: none;
}

.cp-ui .cp-wizard__steps > div[role="tablist"] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: start;
}

/* EntitlementGate wraps five of the six steps; its div must not break the grid cell. */
.cp-ui .cp-wizard__steps > div[role="tablist"] > *,
.cp-ui .cp-wizard__steps .entitlement-gate {
    min-width: 0;
}

/* A gated step: the greyed step and its plan pill (.cp-upsell, compact variant below) share the cell. */
.cp-ui .cp-wizard__steps .entitlement-gate {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
}

.cp-ui .cp-wizard__steps .entitlement-gate__content {
    width: 100%;
    min-width: 0;
}

.cp-ui .cp-wizard__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
    padding: 0 0.25rem;
    border: 0;
    background: transparent;
    font-size: var(--cp-text-xs);
    font-weight: 600;
    color: var(--cp-text-2);
    text-align: center;
    cursor: pointer;
}

.cp-ui .cp-wizard__step.is-active {
    color: var(--cp-primary);
}

.cp-ui .cp-wizard__bullet {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--cp-border);
    border-radius: 50%;
    background: var(--cp-surface);
    color: var(--cp-text-2);
    transition: background-color var(--cp-motion-fast) ease, border-color var(--cp-motion-fast) ease,
                color var(--cp-motion-fast) ease;
}

.cp-ui .cp-wizard__step.is-active .cp-wizard__bullet,
.cp-ui .cp-wizard__bullet.is-active {
    border-color: var(--cp-primary);
    background: var(--cp-primary);
    color: var(--cp-on-primary);
    box-shadow: var(--cp-shadow-action);
}

.cp-ui .cp-wizard__step:hover .cp-wizard__bullet {
    border-color: var(--cp-border-hover);
    color: var(--cp-primary);
}

.cp-ui .cp-wizard__label {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Plan upsell (Components/EntitlementGate, PR 05.12): a feature the plan does not include. A brand-accent
   notice that links to /subscription, instead of the old orange Bootstrap badge. Opt-in class, so it also
   works outside .cp-ui. */
.cp-upsell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.625rem;
    padding: 0.625rem 0.875rem 0.625rem 0.625rem;
    border: 1px solid color-mix(in srgb, var(--cp-primary) 28%, var(--cp-border));
    border-radius: var(--cp-radius-panel);
    background: var(--cp-accent-bg);
    font-size: var(--cp-text-sm);
    font-weight: 500;
    line-height: 1.4;
    color: var(--cp-accent-fg);
    text-decoration: none;
    transition: border-color var(--cp-motion-fast) ease, box-shadow var(--cp-motion-fast) ease,
                background-color var(--cp-motion-fast) ease, color var(--cp-motion-fast) ease;
}

.cp-upsell:hover,
.cp-upsell:focus-visible {
    border-color: var(--cp-primary);
    box-shadow: var(--cp-shadow-card);
    color: var(--cp-accent-fg);
    text-decoration: none;
}

.cp-upsell:focus-visible {
    outline: 2px solid var(--cp-ring);
    outline-offset: 2px;
}

.cp-upsell__icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--cp-radius-nav);
    background: var(--cp-primary-fill);
    color: var(--cp-on-gradient);
    box-shadow: var(--cp-shadow-action);
}

.cp-upsell__text {
    flex: 1 1 auto;
    min-width: 0;
}

.cp-upsell__arrow {
    flex: 0 0 auto;
    color: var(--cp-primary);
    transition: transform var(--cp-motion-fast) var(--cp-ease);
}

.cp-upsell:hover .cp-upsell__arrow {
    transform: translateX(3px);
}

/* In the edit-modal steps: a compact pill under the greyed step; on hover it takes the premium gradient. */
.cp-ui .cp-wizard__steps .cp-upsell {
    gap: 0.25rem;
    max-width: 100%;
    margin-top: 0;
    padding: 0.1875rem 0.625rem 0.1875rem 0.5rem;
    border-radius: var(--cp-radius-pill);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.cp-ui .cp-wizard__steps .cp-upsell__icon {
    width: auto;
    height: auto;
    background: none;
    box-shadow: none;
    color: var(--cp-primary);
}

.cp-ui .cp-wizard__steps .cp-upsell__icon .cp-icon {
    width: 12px;
    height: 12px;
}

.cp-ui .cp-wizard__steps .cp-upsell__text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.cp-ui .cp-wizard__steps .cp-upsell__arrow {
    display: none;
}

.cp-ui .cp-wizard__steps .cp-upsell:hover,
.cp-ui .cp-wizard__steps .cp-upsell:focus-visible {
    border-color: transparent;
    background: var(--cp-primary-fill);
    box-shadow: var(--cp-shadow-action);
    color: var(--cp-on-gradient);
}

.cp-ui .cp-wizard__steps .cp-upsell:hover .cp-upsell__icon,
.cp-ui .cp-wizard__steps .cp-upsell:focus-visible .cp-upsell__icon {
    color: inherit;
}

@media (prefers-reduced-motion: reduce) {
    .cp-upsell,
    .cp-upsell__arrow {
        transition: none;
    }

    .cp-upsell:hover .cp-upsell__arrow {
        transform: none;
    }
}

/* Compact indicator (< 576 px), where six steps do not fit */
.cp-ui .cp-wizard__compact-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.cp-ui .cp-wizard__compact-text {
    flex: 1 1 auto;
    min-width: 0;
}

.cp-ui .cp-wizard__compact-step {
    margin: 0;
    font-size: var(--cp-text-xs);
    font-weight: 600;
    letter-spacing: var(--cp-tracking-label);
    text-transform: uppercase;
    color: var(--cp-text-2);
}

.cp-ui .cp-wizard__compact-label {
    margin: 0;
    font-family: var(--cp-font-heading);
    font-size: var(--cp-text-md);
    font-weight: 600;
    color: var(--cp-text);
}

.cp-ui .cp-wizard__compact-pct {
    flex: 0 0 auto;
    font-size: var(--cp-text-sm);
    font-weight: 600;
    color: var(--cp-primary);
}

.cp-ui .cp-wizard__bar {
    height: 6px;
    overflow: hidden;
    border-radius: var(--cp-radius-pill);
    background: var(--cp-border);
}

.cp-ui .cp-wizard__bar-fill {
    height: 100%;
    border-radius: var(--cp-radius-pill);
    background: var(--cp-primary);
    transition: width var(--cp-motion-hover) var(--cp-ease);
}

@media (min-width: 576px) {
    .cp-ui .cp-wizard__steps { display: block; }
    .cp-ui .cp-wizard__compact { display: none; }
    .cp-ui .cp-wizard { padding: 1.25rem 2rem; }
}

/* Panels */
.cp-ui .cp-panel {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.5rem;
}

@media (min-width: 576px) {
    .cp-ui .cp-panel { padding: 2rem; }
}

.cp-ui .cp-summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-panel);
    background: color-mix(in oklab, var(--cp-surface-2) 60%, transparent);
}

.cp-ui .cp-summary__icon { color: var(--cp-primary); }

.cp-ui .cp-summary__text { min-width: 0; }

.cp-ui .cp-summary__kicker {
    margin: 0;
    font-size: var(--cp-text-xs);
    font-weight: 500;
    letter-spacing: var(--cp-tracking-label);
    text-transform: uppercase;
    color: var(--cp-text-2);
}

.cp-ui .cp-summary__value {
    margin: 0;
    font-size: var(--cp-text-sm);
    font-weight: 600;
    color: var(--cp-text);
}

.cp-ui .cp-fieldset {
    min-width: 0;
    margin: 0;
    padding: 1rem;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-panel);
    background: color-mix(in oklab, var(--cp-surface-2) 60%, transparent);
}

@media (min-width: 576px) {
    .cp-ui .cp-fieldset { padding: 1.25rem; }
}

.cp-ui .cp-fieldset__legend {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    float: none;
    width: auto;
    margin-bottom: 0;
    padding: 0 0.5rem;
    font-family: var(--cp-font-heading);
    font-size: var(--cp-text-sm);
    font-weight: 600;
    color: var(--cp-text);
}

.cp-ui .cp-fieldset__hint {
    margin: 0.75rem 0 0;
    font-size: var(--cp-text-sm);
    line-height: var(--cp-leading-body);
    color: var(--cp-text-2);
}

.cp-ui .cp-fieldset__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.cp-ui .cp-field__note {
    margin-top: 0.375rem;
    font-size: var(--cp-text-xs);
    color: var(--cp-text-2);
}

.cp-ui .cp-inline-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

.cp-ui .cp-inline-form .cp-field { flex: 1 1 auto; }

@media (min-width: 576px) {
    .cp-ui .cp-inline-form { flex-direction: row; align-items: flex-start; }
}

.cp-ui .cp-status-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0 0;
    font-size: var(--cp-text-sm);
    color: var(--cp-text-2);
}

.cp-ui .cp-status-line__dot {
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: color-mix(in oklab, var(--cp-text-2) 40%, transparent);
}

.cp-ui .cp-status-line__dot.is-on { background: var(--cp-primary); }

/* Destination box inside a fieldset: one step lighter than the fieldset it sits in. */
.cp-ui .cp-summary--inset {
    margin-top: 0.75rem;
    background: var(--cp-surface);
}

.cp-ui .cp-wizard__footer {
    justify-content: space-between;
}

.cp-ui .cp-wizard__footer-step {
    display: none;
    font-size: var(--cp-text-xs);
    font-weight: 500;
    color: var(--cp-text-2);
}

.cp-ui .cp-wizard__footer-actions {
    display: flex;
    align-items: center;
    gap: var(--cp-btn-gap);
}

@media (min-width: 576px) {
    .cp-ui .cp-wizard__footer-step { display: block; }
}

/* ---------------------------------------------------------------------------
   Routing panels: intro, add row, empty box and route cards
   (composition: Lovable ChannelsPanel).
   --------------------------------------------------------------------------- */
.cp-ui .cp-panel__intro {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cp-ui .cp-panel__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-family: var(--cp-font-heading);
    font-size: var(--cp-text-md);
    font-weight: 600;
    letter-spacing: var(--cp-tracking-heading);
    color: var(--cp-text);
}

.cp-ui .cp-panel__title .cp-icon {
    color: var(--cp-primary);
}

.cp-ui .cp-panel__text {
    margin: 0;
    font-size: var(--cp-text-sm);
    line-height: var(--cp-leading-body);
    color: var(--cp-text-2);
}

.cp-ui .cp-panel__note {
    margin: 0;
    font-size: var(--cp-text-xs);
    color: var(--cp-text-2);
}

/* "Add" row: fields + action inside a raised box */
.cp-ui .cp-add-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-panel);
    background: color-mix(in oklab, var(--cp-surface-2) 60%, transparent);
    box-shadow: var(--cp-shadow-card);
}

.cp-ui .cp-add-row .form-control,
.cp-ui .cp-add-row .form-select {
    min-height: 44px;
    background: var(--cp-surface);
}

@media (min-width: 576px) {
    .cp-ui .cp-add-row--channels {
        grid-template-columns: 11rem minmax(0, 1fr) auto;
    }
}

/* Empty state inside a panel */
.cp-ui .cp-empty-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 11rem;
    padding: 2rem 1.5rem;
    border: 1px dashed var(--cp-border);
    border-radius: var(--cp-radius-panel);
    background: color-mix(in oklab, var(--cp-surface-2) 30%, transparent);
    text-align: center;
}

.cp-ui .cp-empty-box__icon {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 0.75rem;
    border: 1px solid var(--cp-border);
    border-radius: 50%;
    background: var(--cp-surface);
    color: var(--cp-text-2);
    box-shadow: var(--cp-shadow-card);
}

.cp-ui .cp-empty-box__title {
    margin: 0;
    font-family: var(--cp-font-heading);
    font-size: var(--cp-text-sm);
    font-weight: 600;
    color: var(--cp-text);
}

.cp-ui .cp-empty-box__text {
    max-width: 24rem;
    margin: 0.25rem 0 0;
    font-size: var(--cp-text-sm);
    line-height: var(--cp-leading-body);
    color: var(--cp-text-2);
}

/* Route cards */
.cp-ui .cp-route-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cp-ui .cp-route-list__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.25rem;
    font-size: var(--cp-text-xs);
    font-weight: 600;
    color: var(--cp-text-2);
}

.cp-ui .cp-route {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-panel);
    background: var(--cp-surface);
    box-shadow: var(--cp-shadow-card);
    transition: border-color var(--cp-motion-fast) ease;
    animation: cp-rise 300ms var(--cp-ease) both;
}

.cp-ui .cp-route:hover {
    border-color: var(--cp-border-hover);
}

.cp-ui .cp-route__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--cp-accent-bg);
    color: var(--cp-primary);
}

.cp-ui .cp-route__body {
    flex: 1 1 auto;
    min-width: 0;
}

.cp-ui .cp-route__name {
    margin: 0;
    font-size: var(--cp-text-sm);
    font-weight: 600;
    color: var(--cp-text);
}

.cp-ui .cp-route__url {
    margin: 0.125rem 0 0;
    font-size: var(--cp-text-xs);
    color: var(--cp-text-2);
}

.cp-ui .cp-route__short {
    margin-top: 0.375rem;
    max-width: 100%;
}

/* ---------------------------------------------------------------------------
   SelectMenu (Components/Ui/SelectMenu.razor): trigger + option list with icons.
   --------------------------------------------------------------------------- */
.cp-ui .cp-select {
    min-width: 0;
}

.cp-ui .cp-select__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    min-height: 44px;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--cp-input-border);
    border-radius: var(--cp-radius-panel);
    background: var(--cp-surface);
    color: var(--cp-text);
    font-family: var(--cp-font-body);
    font-size: var(--cp-text-sm);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--cp-motion-fast) ease, box-shadow var(--cp-motion-fast) ease;
}

.cp-ui .cp-select__trigger:hover:not(.is-disabled) {
    border-color: var(--cp-border-hover);
}

.cp-ui .cp-select__trigger:focus-visible,
.cp-ui .cp-select__trigger[aria-expanded="true"] {
    outline: none;
    border-color: var(--cp-ring);
    box-shadow: 0 0 0 1px var(--cp-ring);
}

.cp-ui .cp-select__trigger.is-disabled {
    background: var(--cp-bg-muted);
    color: var(--cp-text-2);
    cursor: not-allowed;
}

.cp-ui .cp-select__value {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.cp-ui .cp-select__placeholder {
    color: var(--cp-text-2);
}

.cp-ui .cp-select__icon {
    flex: 0 0 auto;
    color: var(--cp-primary);
}

.cp-ui .cp-select__chevron {
    flex: 0 0 auto;
    color: var(--cp-text-2);
    transition: transform var(--cp-motion-fast) ease;
}

.cp-ui .cp-select__trigger[aria-expanded="true"] .cp-select__chevron {
    transform: rotate(180deg);
}

.cp-ui .cp-select__menu {
    width: 100%;
    min-width: 12rem;
    max-height: 18rem;
    overflow-y: auto;
}

.cp-ui .cp-select__option {
    gap: 0.625rem;
    font-weight: 500;
}

.cp-ui .cp-select__option.is-selected {
    background: var(--cp-accent-bg);
    color: var(--cp-accent-fg);
}

/* ---------------------------------------------------------------------------
   A/B panel (composition: Lovable AbPanel).
   --------------------------------------------------------------------------- */
.cp-ui .cp-panel__lead {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.cp-ui .cp-panel__lead-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--cp-radius-nav);
    background: var(--cp-accent-bg);
    color: var(--cp-primary);
}

/* Mode choice cards */
.cp-ui .cp-choice {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.cp-ui .cp-choice__legend {
    float: none;
    width: auto;
    margin-bottom: 0.75rem;
    padding: 0;
    font-size: var(--cp-text-sm);
    font-weight: 600;
    color: var(--cp-text);
}

.cp-ui .cp-choice__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
}

@media (min-width: 576px) {
    .cp-ui .cp-choice__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.cp-ui .cp-choice__card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-height: 5rem;
    padding: 1rem;
    border: 1px solid var(--cp-input-border);
    border-radius: var(--cp-radius-panel);
    background: var(--cp-surface);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--cp-motion-fast) ease, background-color var(--cp-motion-fast) ease,
                box-shadow var(--cp-motion-fast) ease;
}

.cp-ui .cp-choice__card:hover {
    border-color: var(--cp-border-hover);
}

.cp-ui .cp-choice__card.is-active {
    border-color: var(--cp-primary);
    background: var(--cp-accent-bg);
    box-shadow: 0 0 0 1px var(--cp-primary);
}

.cp-ui .cp-choice__icon {
    flex: 0 0 auto;
    margin-top: 0.125rem;
    color: var(--cp-primary);
}

.cp-ui .cp-choice__text { min-width: 0; }

.cp-ui .cp-choice__label {
    display: block;
    font-family: var(--cp-font-heading);
    font-size: var(--cp-text-sm);
    font-weight: 600;
    color: var(--cp-text);
}

.cp-ui .cp-choice__help {
    display: block;
    margin-top: 0.25rem;
    font-size: var(--cp-text-xs);
    color: var(--cp-text-2);
}

.cp-ui .cp-choice__check {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    color: var(--cp-primary);
}

/* Redirect limit */
.cp-ui .cp-limit-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cp-ui .cp-limit-row__input {
    width: 9rem;
    flex: 0 0 auto;
}

.cp-ui .cp-limit-row__suffix {
    font-size: var(--cp-text-sm);
    color: var(--cp-text-2);
}

.cp-ui .cp-field__optional {
    font-weight: 400;
    color: var(--cp-text-2);
}

/* Meters */
.cp-ui .cp-meter {
    height: 6px;
    margin-top: 0.5rem;
    overflow: hidden;
    border-radius: var(--cp-radius-pill);
    background: var(--cp-surface-2);
}

.cp-ui .cp-meter--inline {
    flex: 1 1 auto;
    margin-top: 0;
    height: 6px;
}

.cp-ui .cp-meter--total {
    width: 100%;
    max-width: 12rem;
    margin-top: 0;
    height: 8px;
    background: var(--cp-border);
}

.cp-ui .cp-meter__fill {
    height: 100%;
    border-radius: var(--cp-radius-pill);
    background: var(--cp-primary);
    transition: width var(--cp-motion-hover) var(--cp-ease);
}

.cp-ui .cp-meter__fill.is-invalid { background: var(--cp-danger); }

/* Variants */
.cp-ui .cp-variants {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cp-ui .cp-variants__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.cp-ui .cp-variants__title {
    margin: 0;
    font-size: var(--cp-text-sm);
    font-weight: 600;
    color: var(--cp-text);
}

.cp-ui .cp-variants__hint {
    margin: 0.125rem 0 0;
    font-size: var(--cp-text-xs);
    color: var(--cp-text-2);
}

.cp-ui .cp-variants__add {
    flex: 0 0 auto;
    border-style: dashed;
}

.cp-ui .cp-variant {
    padding: 1rem;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-panel);
    background: var(--cp-surface);
    box-shadow: var(--cp-shadow-card);
    transition: border-color var(--cp-motion-fast) ease;
    animation: cp-rise 300ms var(--cp-ease) both;
}

.cp-ui .cp-variant:hover { border-color: var(--cp-border-hover); }

@media (min-width: 576px) {
    .cp-ui .cp-variant { padding: 1.25rem; }
}

.cp-ui .cp-variant__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.cp-ui .cp-variant__id {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.cp-ui .cp-variant__letter {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--cp-accent-bg);
    font-size: var(--cp-text-sm);
    font-weight: 700;
    color: var(--cp-primary);
}

.cp-ui .cp-variant__winner {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex: 0 0 auto;
    padding: 0.2rem 0.5rem;
    border-radius: var(--cp-radius-pill);
    background: var(--cp-success-bg);
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--cp-success-fg);
}

.cp-ui .cp-variant__code {
    font-size: var(--cp-text-xs);
    color: var(--cp-text-2);
}

.cp-ui .cp-variant__tools {
    display: flex;
    flex: 0 0 auto;
    gap: 0.125rem;
}

.cp-ui .cp-variant__body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cp-ui .cp-variant__alloc {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cp-ui .cp-variant__served {
    margin: 0;
    font-size: var(--cp-text-xs);
    color: var(--cp-text-2);
}

/* Number + suffix box */
.cp-ui .cp-stepper {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    padding-right: 0.75rem;
    border: 1px solid var(--cp-input-border);
    border-radius: var(--cp-radius-nav);
    background: var(--cp-surface);
    box-shadow: var(--cp-shadow-card);
}

.cp-ui .cp-stepper:focus-within {
    border-color: var(--cp-ring);
    box-shadow: 0 0 0 1px var(--cp-ring);
}

.cp-ui .cp-stepper__input {
    width: 4rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    border: 0;
    background: transparent;
    color: var(--cp-text);
    font-family: var(--cp-font-body);
    font-size: var(--cp-text-sm);
    font-weight: 600;
    text-align: center;
    outline: none;
}

.cp-ui .cp-stepper__suffix {
    font-size: var(--cp-text-sm);
    color: var(--cp-text-2);
}

/* Allocation total */
.cp-ui .cp-total {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--cp-radius-panel);
    background: color-mix(in oklab, var(--cp-surface-2) 60%, transparent);
}

@media (min-width: 576px) {
    .cp-ui .cp-total { flex-direction: row; align-items: center; justify-content: space-between; }
}

.cp-ui .cp-total__value {
    margin: 0;
    font-size: var(--cp-text-sm);
    font-weight: 600;
    color: var(--cp-primary);
}

.cp-ui .cp-total__value.is-invalid { color: var(--cp-danger); }

.cp-ui .cp-total__hint {
    margin: 0.125rem 0 0;
    font-size: var(--cp-text-xs);
    color: var(--cp-text-2);
}

/* Finish-manually row */
.cp-ui .cp-switch-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--cp-border);
}

.cp-ui .cp-switch-row__label {
    margin: 0;
    font-size: var(--cp-text-sm);
    font-weight: 600;
    color: var(--cp-text);
}

.cp-ui .cp-switch-row__hint {
    max-width: 32rem;
    margin: 0.25rem 0 0;
    font-size: var(--cp-text-xs);
    line-height: var(--cp-leading-body);
    color: var(--cp-text-2);
}

/* Panel action row */
.cp-ui .cp-panel__actions {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.75rem;
}

@media (min-width: 576px) {
    .cp-ui .cp-panel__actions { flex-direction: row; align-items: center; justify-content: space-between; }
}

.cp-ui .cp-panel__actions-end { margin-left: auto; }

.cp-ui .cp-panel__danger {
    --bs-btn-color: var(--cp-danger);
    --x-btn-color: var(--cp-danger);
    --bs-btn-hover-color: var(--cp-danger);
    --x-btn-hover-color: var(--cp-danger);
    --bs-btn-hover-bg: var(--cp-danger-bg);
    --x-btn-hover-bg: var(--cp-danger-bg);
}

/* Conversion results */
.cp-ui .cp-results {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 2rem;
    border-top: 1px solid var(--cp-border);
}

.cp-ui .cp-results__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

@media (min-width: 576px) {
    .cp-ui .cp-results__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.cp-ui .cp-result {
    padding: 1rem;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-panel);
    background: var(--cp-surface);
    box-shadow: var(--cp-shadow-card);
}

.cp-ui .cp-result__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.cp-ui .cp-result__id {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    font-size: 11px;
    color: var(--cp-text-2);
}

.cp-ui .cp-result__letter {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--cp-accent-bg);
    font-size: var(--cp-text-xs);
    font-weight: 700;
    color: var(--cp-primary);
}

/* Two-bar funnel */
.cp-ui .cp-funnel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    max-width: 16rem;
    margin: 1.25rem auto;
    text-align: center;
    font-size: var(--cp-text-xs);
    font-weight: 600;
}

.cp-ui .cp-funnel__clicks,
.cp-ui .cp-funnel__conversions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 3.5rem;
    padding: 0 0.75rem;
}

.cp-ui .cp-funnel__clicks {
    width: 100%;
    border-radius: var(--cp-radius-nav) var(--cp-radius-nav) 0 0;
    background: var(--cp-text);
    color: var(--cp-bg);
}

.cp-ui .cp-funnel__conversions {
    min-width: 7.5rem;
    border-radius: 0 0 var(--cp-radius-nav) var(--cp-radius-nav);
    background: var(--cp-primary);
    color: var(--cp-on-primary);
    transition: width var(--cp-motion-hover) var(--cp-ease);
}

.cp-ui .cp-result__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--cp-border);
    text-align: center;
}

.cp-ui .cp-result__stats dt {
    font-size: 11px;
    font-weight: 400;
    color: var(--cp-text-2);
}

.cp-ui .cp-result__stats dd {
    margin: 0.25rem 0 0;
    font-size: var(--cp-text-sm);
    font-weight: 600;
    color: var(--cp-text);
}

.cp-ui .cp-result__rate { color: var(--cp-primary) !important; }

/* ---------------------------------------------------------------------------
   Device / location rules (composition: Lovable DeviceLocationPanel).
   --------------------------------------------------------------------------- */
@media (min-width: 576px) {
    .cp-ui .cp-add-row--context {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 1.25rem;
    }
}

.cp-ui .cp-inline-form--tight { margin-top: 0; }

.cp-ui .cp-route-list__head--rules {
    align-items: flex-end;
}

.cp-ui .cp-route-list__title {
    margin: 0;
    font-size: var(--cp-text-sm);
    font-weight: 600;
    color: var(--cp-text);
}

.cp-ui .cp-route-list__items {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cp-ui .cp-rule {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-panel);
    background: var(--cp-surface);
    box-shadow: var(--cp-shadow-card);
    transition: border-color var(--cp-motion-fast) ease;
    animation: cp-rise 300ms var(--cp-ease) both;
}

.cp-ui .cp-rule:hover { border-color: var(--cp-border-hover); }

@media (min-width: 576px) {
    .cp-ui .cp-rule { padding: 1rem; }
}

.cp-ui .cp-rule__position {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--cp-accent-bg);
    font-size: var(--cp-text-xs);
    font-weight: 700;
    color: var(--cp-primary);
}

.cp-ui .cp-rule__icon {
    display: none;
    place-items: center;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--cp-radius-nav);
    background: var(--cp-surface-2);
    color: var(--cp-primary);
}

@media (min-width: 576px) {
    .cp-ui .cp-rule__icon { display: grid; }
}

.cp-ui .cp-rule__body {
    flex: 1 1 auto;
    min-width: 0;
}

.cp-ui .cp-rule__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.cp-ui .cp-rule__type {
    font-size: var(--cp-text-xs);
    font-weight: 600;
    color: var(--cp-text-2);
}

.cp-ui .cp-rule__value {
    padding: 0.25rem 0.625rem;
    border-radius: var(--cp-radius-pill);
    background: var(--cp-accent-bg);
    font-size: var(--cp-text-xs);
    font-weight: 600;
    color: var(--cp-accent-fg);
}

.cp-ui .cp-rule__url {
    margin: 0.375rem 0 0;
    font-size: var(--cp-text-xs);
    color: var(--cp-text-2);
}

.cp-ui .cp-rule__tools {
    display: flex;
    flex: 0 0 auto;
    gap: 0.125rem;
}

/* Footnote card */
.cp-ui .cp-note {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-panel);
    background: color-mix(in oklab, var(--cp-surface-2) 50%, transparent);
}

.cp-ui .cp-note__icon {
    margin-top: 0.125rem;
    flex: 0 0 auto;
    color: var(--cp-primary);
}

.cp-ui .cp-note__text {
    margin: 0;
    font-size: var(--cp-text-sm);
    line-height: var(--cp-leading-body);
    color: var(--cp-text-2);
}

/* ---------------------------------------------------------------------------
   Schedule panel (composition: Lovable SchedulePanel): builder + sticky summary.
   --------------------------------------------------------------------------- */
.cp-ui .cp-panel__lead-icon--lg {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--cp-radius-panel);
}

.cp-ui .cp-panel__title--lg {
    font-size: var(--cp-text-lg);
}

.cp-ui .cp-field--narrow {
    max-width: 24rem;
}

.cp-ui .cp-schedule {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 1.5rem;
}

/* Two columns only when the dialog itself is wide (the schedule step) and the viewport can host it:
   keying this off the viewport alone split the panel inside an 800 px dialog and looked cramped. */
@media (min-width: 1200px) {
    .cp-ui .cp-modal__dialog--wide .cp-schedule {
        grid-template-columns: minmax(0, 1.45fr) minmax(18rem, 0.8fr);
        gap: 2rem;
    }
}

.cp-ui .cp-schedule__builder,
.cp-ui .cp-schedule__aside {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.cp-ui .cp-schedule__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
}

.cp-ui .cp-schedule__title {
    margin: 0;
    font-family: var(--cp-font-heading);
    font-size: var(--cp-text-md);
    font-weight: 600;
    color: var(--cp-text);
}

.cp-ui .cp-schedule__hint {
    margin: 0.25rem 0 0;
    font-size: var(--cp-text-xs);
    line-height: var(--cp-leading-body);
    color: var(--cp-text-2);
}

.cp-ui .cp-schedule__count {
    flex: 0 0 auto;
    padding: 0.25rem 0.75rem;
    border-radius: var(--cp-radius-pill);
    background: var(--cp-accent-bg);
    font-size: var(--cp-text-xs);
    font-weight: 600;
    color: var(--cp-primary);
}

.cp-ui .cp-schedule__list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cp-ui .cp-schedule__add {
    width: 100%;
    height: 3rem;
    border-style: dashed;
    border-radius: var(--cp-radius-panel);
    --bs-btn-color: var(--cp-primary);
    --x-btn-color: var(--cp-primary);
}

/* Window card */
.cp-ui .cp-window {
    overflow: hidden;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-panel);
    background: var(--cp-surface);
    box-shadow: var(--cp-shadow-card);
    transition: border-color var(--cp-motion-fast) ease;
    animation: cp-rise 300ms var(--cp-ease) both;
}

.cp-ui .cp-window:hover { border-color: var(--cp-border-hover); }

.cp-ui .cp-window__head {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    border-bottom: 1px solid var(--cp-border);
    background: color-mix(in oklab, var(--cp-surface-2) 45%, transparent);
}

@media (min-width: 576px) {
    .cp-ui .cp-window__head { flex-direction: row; align-items: center; justify-content: space-between; }
}

.cp-ui .cp-window__title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1 1 auto;
    min-width: 0;
}

.cp-ui .cp-window__title .badge {
    flex: 0 0 auto;
    text-transform: uppercase;
    letter-spacing: var(--cp-tracking-label);
}

.cp-ui .cp-window__name {
    flex: 1 1 auto;
    min-width: 0;
    height: 2.5rem;
    min-height: 2.5rem;
    background: var(--cp-surface);
}

.cp-ui .cp-window__tools {
    display: flex;
    flex: 0 0 auto;
    gap: 0.125rem;
    align-self: flex-end;
}

@media (min-width: 576px) {
    .cp-ui .cp-window__tools { align-self: auto; }
}

.cp-ui .cp-window__body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1rem;
}

@media (min-width: 576px) {
    .cp-ui .cp-window__body { padding: 1.25rem; }
}

.cp-ui .cp-window__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

@media (min-width: 576px) {
    .cp-ui .cp-window__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cp-ui .cp-window__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.cp-ui .cp-window__note {
    margin: 0.5rem 0 0;
    font-size: var(--cp-text-xs);
    color: var(--cp-text-2);
}

/* Two-option toggle (once / weekly) */
.cp-ui .cp-toggle-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.cp-ui .cp-toggle-grid__option {
    height: 2.75rem;
    border: 1px solid var(--cp-input-border);
    border-radius: var(--cp-radius-nav);
    background: var(--cp-surface);
    font-size: var(--cp-text-sm);
    font-weight: 500;
    color: var(--cp-text);
    cursor: pointer;
    transition: border-color var(--cp-motion-fast) ease, background-color var(--cp-motion-fast) ease;
}

.cp-ui .cp-toggle-grid__option:hover { border-color: var(--cp-border-hover); }

.cp-ui .cp-toggle-grid__option.is-active {
    border-color: var(--cp-primary);
    background: var(--cp-accent-bg);
    color: var(--cp-accent-fg);
    box-shadow: 0 0 0 1px var(--cp-primary);
}

/* Day picker */
.cp-ui .cp-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.25rem;
    padding: 0.25rem;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-nav);
    background: var(--cp-surface);
}

.cp-ui .cp-days__day {
    height: 2.5rem;
    min-width: 0;
    padding: 0 0.25rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font-size: var(--cp-text-xs);
    font-weight: 600;
    color: var(--cp-text-2);
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color var(--cp-motion-fast) ease, color var(--cp-motion-fast) ease;
}

.cp-ui .cp-days__day:hover { background: var(--cp-bg-muted); }

.cp-ui .cp-days__day.is-active {
    background: var(--cp-primary);
    color: var(--cp-on-primary);
}

/* Summary aside */
@media (min-width: 992px) {
    .cp-ui .cp-schedule__aside { position: sticky; top: 0; }
}

.cp-ui .cp-fallback {
    padding: 1rem;
    border: 1px solid var(--cp-border-hover);
    border-radius: var(--cp-radius-panel);
    background: var(--cp-accent-bg);
}

.cp-ui .cp-fallback__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: var(--cp-text-sm);
    font-weight: 600;
    color: var(--cp-accent-fg);
}

.cp-ui .cp-fallback__title .cp-icon { color: var(--cp-primary); }

.cp-ui .cp-fallback__url {
    margin: 0.5rem 0 0;
    font-size: var(--cp-text-xs);
    line-height: var(--cp-leading-body);
    word-break: break-all;
    color: var(--cp-text-2);
}

.cp-ui .cp-schedule__empty {
    padding: 1.25rem;
    border: 1px dashed var(--cp-border);
    border-radius: var(--cp-radius-panel);
    background: color-mix(in oklab, var(--cp-surface-2) 30%, transparent);
    text-align: center;
}

.cp-ui .cp-schedule__empty p {
    margin: 0;
    font-size: var(--cp-text-sm);
    font-weight: 500;
    color: var(--cp-text-2);
}

.cp-ui .cp-summary-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cp-ui .cp-summary-item {
    padding: 1rem;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-panel);
    background: var(--cp-surface);
    box-shadow: var(--cp-shadow-card);
}

.cp-ui .cp-summary-item__head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.cp-ui .cp-summary-item__number {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--cp-primary);
    font-size: var(--cp-text-xs);
    font-weight: 700;
    color: var(--cp-on-primary);
}

.cp-ui .cp-summary-item__text { min-width: 0; flex: 1 1 auto; }

.cp-ui .cp-summary-item__name {
    margin: 0;
    font-size: var(--cp-text-sm);
    font-weight: 600;
    color: var(--cp-text);
}

.cp-ui .cp-summary-item__when {
    margin: 0.25rem 0 0;
    font-size: var(--cp-text-xs);
    line-height: var(--cp-leading-body);
    color: var(--cp-text-2);
}

.cp-ui .cp-summary-item__url {
    margin: 0.75rem 0 0;
    font-size: 11px;
    color: var(--cp-text-2);
}

.cp-ui .cp-summary-item__meta {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--cp-border);
}

.cp-ui .cp-summary-item__id {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
    margin-bottom: 0.75rem;
    font-size: 10px;
    color: var(--cp-primary);
}

.cp-ui .cp-summary-item__meta .cp-result__stats {
    padding-top: 0;
    border-top: 0;
    gap: 0.25rem;
}

.cp-ui .cp-summary-item__meta .cp-result__stats dt { font-size: 10px; }

/* ---------------------------------------------------------------------------
   Themed date / time fields (Components/Ui/DateTimePicker.razor + flatpickr).
   Chrome's native datetime-local / time popups cannot be styled, so flatpickr
   renders them and takes its colours from the tokens.
   --------------------------------------------------------------------------- */
.cp-ui .cp-datetime {
    cursor: pointer;
}

.flatpickr-calendar {
    border: 1px solid var(--cp-border) !important;
    border-radius: var(--cp-radius-panel) !important;
    background: var(--cp-popover) !important;
    box-shadow: var(--cp-shadow-elevated) !important;
    font-family: var(--cp-font-body) !important;
    color: var(--cp-text) !important;
}

.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after {
    border-bottom-color: var(--cp-popover) !important;
    border-top-color: var(--cp-popover) !important;
}

.flatpickr-months,
.flatpickr-month,
.flatpickr-current-month,
.flatpickr-weekdays,
span.flatpickr-weekday {
    background: transparent !important;
    color: var(--cp-text) !important;
    fill: var(--cp-text) !important;
}

span.flatpickr-weekday {
    font-size: var(--cp-text-xs) !important;
    font-weight: 600 !important;
    color: var(--cp-text-2) !important;
}

.flatpickr-current-month .cur-month,
.flatpickr-current-month input.cur-year {
    font-family: var(--cp-font-heading) !important;
    font-weight: 600 !important;
    color: var(--cp-text) !important;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    border-radius: var(--cp-radius-nav) !important;
    fill: var(--cp-text-2) !important;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--cp-primary) !important;
}

.flatpickr-day {
    border-radius: var(--cp-radius-nav) !important;
    color: var(--cp-text) !important;
}

.flatpickr-day:hover {
    background: var(--cp-accent-bg) !important;
    border-color: transparent !important;
    color: var(--cp-accent-fg) !important;
}

.flatpickr-day.today {
    border-color: var(--cp-primary) !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--cp-primary) !important;
    border-color: var(--cp-primary) !important;
    color: var(--cp-on-primary) !important;
}

/* days between the ends of a range (Components/Ui/DateRangePicker): soft brand tint, joined into one band */
.flatpickr-day.inRange,
.flatpickr-day.inRange:hover {
    background: var(--cp-accent-bg) !important;
    border-color: transparent !important;
    box-shadow: -5px 0 0 var(--cp-accent-bg), 5px 0 0 var(--cp-accent-bg) !important;
    color: var(--cp-accent-fg) !important;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.flatpickr-disabled {
    color: var(--cp-text-2) !important;
    opacity: 0.55 !important;
}

/* Time section (datetime and time-only) */
.flatpickr-time,
.flatpickr-time input,
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
    background: transparent !important;
    color: var(--cp-text) !important;
    font-family: var(--cp-font-mono) !important;
}

.flatpickr-time input:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:hover {
    background: var(--cp-accent-bg) !important;
}

.flatpickr-time .numInputWrapper span.arrowUp::after { border-bottom-color: var(--cp-text-2) !important; }
.flatpickr-time .numInputWrapper span.arrowDown::after { border-top-color: var(--cp-text-2) !important; }

.flatpickr-calendar .flatpickr-time {
    border-top: 1px solid var(--cp-border) !important;
}

.numInputWrapper:hover { background: transparent !important; }

/* ---------------------------------------------------------------------------
   Customizable shortlink dashboard (PR 05.11, js/home-layout.js). The drag chip and the drop marker are
   appended to <body>, outside the Blazor tree, so they live here instead of a scoped .razor.css file.
   --------------------------------------------------------------------------- */
.cp-home-drag-ghost {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2100;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 18rem;
    padding: 0.5rem 0.875rem 0.5rem 0.625rem;
    border: 1px solid var(--cp-primary);
    border-radius: var(--cp-radius-pill);
    background: var(--cp-surface);
    box-shadow: var(--cp-shadow-elevated), var(--cp-shadow-action);
    font-family: var(--cp-font-body);
    font-size: var(--cp-text-sm);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--cp-text);
    pointer-events: none;
    will-change: transform;
}

.cp-home-drag-ghost svg { flex: 0 0 auto; color: var(--cp-primary); }
.cp-home-drag-ghost span { overflow: hidden; text-overflow: ellipsis; }

.cp-home-drop-marker {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2090;
    border-radius: var(--cp-radius-pill);
    background: var(--cp-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--cp-primary) 22%, transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--cp-motion-fast) ease;
}

.cp-home-drop-marker.is-visible { opacity: 1; }

html.cp-home-dragging,
html.cp-home-dragging * {
    cursor: grabbing !important;
    -webkit-user-select: none;
    user-select: none;
}

@media (prefers-reduced-motion: reduce) {
    .cp-home-drop-marker { transition: none; }
}

/* ---------------------------------------------------------------------------
   Pricing pages (PR 05.13): /subscription (plans) and /credits (API credit packs).
   Composition from Lovable "shortlink-studio" src/routes/pricing.tsx, on the technical grid of the other views:
   centered header with segmented switches, a grid of plan / pack cards (.cp-plan, one may be --featured) and a note.
   The page root is "cp-ui cp-page cp-pricing cp-grid-bg".
   --------------------------------------------------------------------------- */
.cp-pricing {
    --cp-grid-line: color-mix(in srgb, var(--cp-border) 42%, transparent);   /* the fainter 42 % line */
    min-height: calc(100vh - var(--cp-nav-h));
}

:root[data-bs-theme="high-contrast"] .cp-pricing {
    --cp-grid-line: rgba(255, 255, 255, 0.22);
}

.cp-ui .cp-pricing__inner {
    padding-top: 2rem;
    padding-bottom: 5rem;
}

/* header */
.cp-ui .cp-pricing__head { text-align: center; }

.cp-ui .cp-pricing__eyebrow {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-pill);
    background: var(--cp-surface);
    box-shadow: var(--cp-shadow-card);
    font-size: var(--cp-text-xs);
    font-weight: 600;
    letter-spacing: var(--cp-tracking-label);
    text-transform: uppercase;
    color: var(--cp-text-2);
}

.cp-ui .cp-pricing__title {
    margin: 1rem 0 0;
    font-family: var(--cp-font-heading);
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: var(--cp-tracking-heading);
    color: var(--cp-text);
}

.cp-ui .cp-pricing__lead {
    max-width: 36rem;
    margin: 0.75rem auto 0;
    font-size: var(--cp-text-md);
    color: var(--cp-text-2);
}

.cp-ui .cp-pricing__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

/* segmented switches: billing cycle (primary when active) and currency (quiet, like the reference's USD chip) */
.cp-ui .cp-pricing__switch {
    display: inline-flex;
    padding: 0.25rem;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-pill);
    background: var(--cp-surface);
    box-shadow: var(--cp-shadow-card);
}

.cp-ui .cp-pricing__switch button {
    padding: 0.375rem 1rem;
    border: 0;
    border-radius: var(--cp-radius-pill);
    background: transparent;
    font-size: var(--cp-text-sm);
    font-weight: 500;
    color: var(--cp-text-2);
    transition: background-color var(--cp-motion-fast) ease, color var(--cp-motion-fast) ease;
}

.cp-ui .cp-pricing__switch button:hover { color: var(--cp-text); }

.cp-ui .cp-pricing__switch button.is-active {
    background: var(--cp-primary);
    color: var(--cp-on-primary);
}

.cp-ui .cp-pricing__switch--quiet button.is-active {
    background: var(--cp-bg-muted);
    color: var(--cp-text);
    box-shadow: inset 0 0 0 1px var(--cp-border);
}

.cp-ui .cp-pricing__switch button:focus-visible {
    outline: 2px solid var(--cp-ring);
    outline-offset: 2px;
}

/* cards */
.cp-ui .cp-pricing__plans {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 1.25rem;
    margin-top: 2.5rem;
}

.cp-ui .cp-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 1.5rem;
    border: 1px solid var(--cp-border);
    border-radius: 1.5rem;
    background: var(--cp-surface);
    box-shadow: var(--cp-shadow-card);
}

.cp-ui .cp-plan--featured {
    border: 2px solid var(--cp-primary);
    box-shadow: var(--cp-shadow-elevated);
}

.cp-ui .cp-plan__badge {
    position: absolute;
    top: -0.75rem;
    left: 50%;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--cp-radius-pill);
    background: var(--cp-primary-fill);
    box-shadow: var(--cp-shadow-action);
    font-size: var(--cp-text-xs);
    font-weight: 600;
    white-space: nowrap;
    color: var(--cp-on-gradient);
    transform: translateX(-50%);
}

.cp-ui .cp-plan__name {
    margin: 0;
    font-family: var(--cp-font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--cp-text);
}

.cp-ui .cp-plan__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.25rem;
    margin: 0.75rem 0 0;
}

.cp-ui .cp-plan__amount {
    font-family: var(--cp-font-heading);
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--cp-text);
}

.cp-ui .cp-plan__period {
    font-size: var(--cp-text-md);
    font-weight: 600;
    color: var(--cp-text-2);
}

.cp-ui .cp-plan__detail {
    margin: 0.25rem 0 0;
    font-size: var(--cp-text-sm);
    color: var(--cp-text-2);
}

.cp-ui .cp-plan__features {
    display: grid;
    flex: 1 1 auto;
    align-content: start;
    gap: 0.625rem;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--cp-text-sm);
    color: var(--cp-text);
}

.cp-ui .cp-plan__features li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.cp-ui .cp-plan__features .cp-plan__check {
    flex: 0 0 auto;
    margin-top: 0.125rem;
    color: var(--cp-text-2);
}

.cp-ui .cp-plan--featured .cp-plan__features .cp-plan__check { color: var(--cp-primary); }

/* features a plan does not include (Free): kept for comparison, muted with a cross */
.cp-ui .cp-plan__features li.is-missing {
    color: var(--cp-text-2);
    opacity: 0.6;
}

.cp-ui .cp-plan__actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.cp-ui .cp-plan__actions .btn { flex: 1 1 0; }

/* nothing to offer (e.g. no credit packs for the chosen currency): one dashed card across the grid */
.cp-ui .cp-pricing__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    grid-column: 1 / -1;
    padding: 2.5rem 1.5rem;
    border: 1px dashed var(--cp-border);
    border-radius: 1.5rem;
    background: var(--cp-surface);
    text-align: center;
    font-size: var(--cp-text-sm);
    color: var(--cp-text-2);
}

.cp-ui .cp-pricing__empty-icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    background: var(--cp-accent-bg);
    color: var(--cp-primary);
}

.cp-ui .cp-pricing__empty p { margin: 0; }

.cp-ui .cp-pricing__note {
    margin: 2rem 0 0;
    text-align: center;
    font-size: var(--cp-text-xs);
    color: var(--cp-text-2);
}

@media (min-width: 576px) {
    .cp-ui .cp-pricing__inner { padding-top: 3rem; }
    .cp-ui .cp-pricing__title { font-size: 3rem; }
}

@media (min-width: 768px) {
    .cp-ui .cp-pricing__plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .cp-ui .cp-pricing__switch button { transition: none; }
}