/*
 * PLANNER UI styles
 * ─────────────────
 * Conventions in this file:
 *
 * 1. Themes are toggled via html[data-theme="dark"] (set together with
 *    data-bs-theme so Bootstrap also adapts). All tokens that need to
 *    change between light and dark live in :root + the dark block at
 *    the top of the file. Cromatic tokens are duplicated; dimensional
 *    ones (--app-space-*, --app-text-*, fields padding) only live in
 *    :root.
 *
 * 2. Token families:
 *      - Surfaces / text: --app-surface, --app-heading, --app-text, …
 *      - Field stack:     --app-field-{border,background,text,…}
 *      - Gradients:       --app-gradient-{primary,surface,field,…}
 *      - Semantic:        --app-{success,warning,error,info}-{text,bg,border}
 *      - Spacing:         --app-space-{2xs..3xl} (4px base)
 *      - Typography:      --app-text-{2xs..3xl}
 *
 * 3. Bootstrap radius tokens stay aligned with Bootstrap defaults.
 *    Custom components should prefer those tokens instead of local
 *    hardcoded radius values.
 *
 * 4. !important is used heavily (~260 times) for two legitimate reasons:
 *      a. Beating Bootstrap defaults on shared primitives (.btn,
 *         .form-control, .alert, .accordion-button, .modal-*).
 *      b. As a stylistic convention when a rule is a deliberate "strong
 *         override" — every property in such a block carries it, for
 *         readability. New code should follow the same pattern: either
 *         no !important at all, or all properties of the override
 *         block carry it.
 *
 * 5. Dark theme rules cluster near the bottom of the file inside one
 *    big "Global dark theme overrides" comment. Component-specific
 *    dark refinements live next to it. Keep it that way: the cascade
 *    relies on dark rules appearing after their light counterparts.
 *
 * 6. New components: prefer var(--app-…) over hex literals. The audit
 *    that produced these tokens pruned ~150 hardcoded #ffffff/#0f172a
 *    in one pass — every new literal is a future debt.
 */

:root {
    /* Theme tokens: semantic colors, surfaces and shadows shared across the UI. */
    --bs-border-radius: 0.375rem;
    --bs-border-radius-sm: 0.25rem;
    --bs-border-radius-lg: 0.5rem;
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-xxl: 2rem;
    --bs-border-radius-pill: 50rem;
    --app-radius: var(--bs-border-radius);
    --app-radius-sm: var(--bs-border-radius-sm);
    --app-radius-lg: var(--bs-border-radius-lg);
    --app-radius-pill: var(--bs-border-radius-pill);
    --bs-btn-border-radius: var(--app-radius);
    --bs-btn-border-radius-sm: var(--app-radius-sm);
    --bs-btn-border-radius-lg: var(--app-radius-lg);
    --bs-card-border-radius: var(--app-radius);
    --bs-modal-border-radius: var(--app-radius-lg);
    --bs-dropdown-border-radius: var(--app-radius);
    --bs-input-border-radius: var(--app-radius);
    --bs-input-border-radius-sm: var(--app-radius-sm);
    --bs-input-border-radius-lg: var(--app-radius-lg);
    --app-text: #334155;
    --app-heading: #0f172a;
    --app-muted: #64748b;
    --app-border: #e2e8f0;
    --app-border-strong: #374151;
    --app-surface: #ffffff;
    --app-surface-muted: #f5f6f7;
    --app-primary: #2563eb;
    --app-primary-hover: #1e3a8a;
    /* Accent = color of strips, tinted borders and callouts.
       Same value as primary today, kept as a separate token so the
       two can diverge later (e.g. per-brand strip color) without a
       product-wide refactor. */
    --app-accent: #2563eb;
    --app-accent-strong: #1e3a8a;
    --app-brand-blue: #1e3a8a;
    --app-ui-blue: #2563eb;
    --app-ui-sky: #38bdf8;
    --app-gradient-primary: linear-gradient(90deg, #1e3a8a 0%, #2563eb 52%, #38bdf8 100%);
    --app-logo-gradient: linear-gradient(90deg, #1e3a8a 0%, #2563eb 12.5%, #2aa7df 25%, #2563eb 37.5%, #1e3a8a 50%, #2563eb 62.5%, #2aa7df 75%, #2563eb 87.5%, #1e3a8a 100%);
    --app-gradient-soft: var(--app-surface-muted);
    --app-gradient-surface: var(--app-surface);
    --app-gradient-surface-raised: var(--app-surface);
    --app-gradient-surface-muted: var(--app-surface-muted);
    --app-gradient-field: var(--app-field-background);
    --app-gradient-field-hover: var(--app-field-hover-background);
    --app-gradient-field-active: var(--app-field-focus-background);
    --app-field-padding-y: 7px;
    --app-field-padding-x: 9px;
    --app-field-border: var(--app-border);
    --app-field-background: #f1f5f9;
    --app-field-text: var(--app-text);
    --app-field-placeholder: #7b8aa0;
    --app-field-shadow: none;
    --app-field-hover-border: #cfd8e2;
    --app-field-hover-background: #ffffff;
    --app-field-hover-shadow: none;
    --app-field-focus-border: #2563eb;
    --app-field-focus-background: #ffffff;
    --app-field-focus-shadow:
        0 0 0 1px rgba(15, 23, 42, 0.12),
        0 0 0 4px rgba(15, 23, 42, 0.06);
    --app-strip-height-sm: 5px;
    --app-strip-height-lg: 10px;
    --app-strip-opacity-strong: 1;
    --app-accent-strip-height: var(--app-strip-height-sm);
    --app-accent-strip-opacity: var(--app-strip-opacity-strong);
    --app-accent-strip-offset: 0;
    --app-frame-inset: 24px;
    --app-shadow-soft: 0 8px 18px rgba(15, 23, 42, 0.05);
    --app-shadow-primary: 0 12px 24px rgba(37, 99, 235, 0.1);
    --app-focus-ring: rgba(59, 130, 246, 0.16);
    /* Selected-state tokens: shared vocabulary for the "this is the active
       card / the active row / the selected day" highlight. Two intensities:
       - STRONG (wash + ring + strip): for selected cards (provider, help nav).
       - SOFT (wash-soft + strip on first cell): for rows and calendar days.
       Dark mirrors the same shape so the highlight reads consistently in
       both themes. */
    --app-selected-strip: #2563eb;
    --app-selected-border: #93c5fd;
    --tint-strip-width: var(--app-strip-height-sm);
    --app-selected-ring: rgba(37, 99, 235, 0.20);
    --app-selected-wash: color-mix(in srgb, #2563eb 13%, #ffffff);
    --app-selected-wash-soft: color-mix(in srgb, #2563eb 9%, #ffffff);
    --app-header-actions-gap: 12px;
    --app-icon-action-size: 34px;
    --app-success-text: #15803d;
    --app-success-bg: #ecfdf3;
    --app-success-border: #bbf7d0;
    --app-warning-text: #b45309;
    --app-warning-bg: #fff7ed;
    --app-warning-border: #fed7aa;
    --app-error-text: #dc2626;
    --app-error-bg: #fef3f2;
    --app-error-border: #fecaca;
    --app-info-text: #1d4ed8;
    --app-info-bg: #eff6ff;
    --app-info-border: #bfdbfe;
    --app-ai-text: #6d28d9;
    --app-ai-bg: #f5f3ff;
    --app-ai-border: #ddd6fe;
    /* Spacing scale — value = name, 2 px grid up to 24 px then 32 / 48.
       Prefer these tokens over raw pixel values in new components;
       existing rules migrate opportunistically when touched. */
    --app-space-2: 2px;
    --app-space-4: 4px;
    --app-space-6: 6px;
    --app-space-8: 8px;
    --app-space-10: 10px;
    --app-space-12: 12px;
    --app-space-14: 14px;
    --app-space-16: 16px;
    --app-space-18: 18px;
    --app-space-20: 20px;
    --app-space-22: 22px;
    --app-space-24: 24px;
    --app-space-32: 32px;
    --app-space-48: 48px;
    --app-text-2xs: 0.66rem;
    --app-text-xs: 0.72rem;
    --app-text-sm: 0.84rem;
    --app-text-md: 0.96rem;
    --app-text-lg: 1.08rem;
    --app-text-xl: 1.35rem;
    --app-text-2xl: 1.72rem;
    --app-text-3xl: 2.25rem;
}

html[data-theme="light"] {
    color-scheme: light;
}

/* Allinea le superfici dei modal Bootstrap ai token app.
 * BS dichiara --bs-modal-bg direttamente su .modal, quindi un override su :root non vince.
 * Ridefinire la variabile su .modal stesso (stessa specificità di BS, ma file caricato dopo). */
.modal {
    --bs-modal-bg: var(--app-surface);
    --bs-modal-color: var(--app-text);
    --bs-modal-border-color: var(--app-border);
    --bs-modal-header-border-color: var(--app-border);
    --bs-modal-footer-border-color: var(--app-border);
}

/* Tinta contestuale del modal-header: se --tint-color è impostato sul .modal-content
 * (lo fa il refine modal con il colore del social), compare una strip e un tono di fondo.
 * Senza --tint-color l'effetto è invisibile: compatibile con tutti gli altri modal. */
.modal-header {
    position: relative;
    background: color-mix(in srgb, var(--tint-color, transparent) 9%, transparent);
}

.modal-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    background: var(--tint-color, transparent);
    pointer-events: none;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --app-text: #d2dae6;
    --app-heading: #f8fafc;
    --app-muted: #94a3b8;
    --app-border: #334155;
    --app-border-strong: #cbd5e1;
    --app-surface: #111827;
    --app-surface-muted: #182131;
    --app-primary: #60a5fa;
    --app-primary-hover: #93c5fd;
    --app-accent: #60a5fa;
    --app-accent-strong: #93c5fd;
    --app-brand-blue: #93c5fd;
    --app-ui-blue: #60a5fa;
    --app-ui-sky: #38bdf8;
    --app-gradient-primary: linear-gradient(90deg, #60a5fa 0%, #38bdf8 52%, #22d3ee 100%);
    --app-logo-gradient: linear-gradient(90deg, #93c5fd 0%, #38bdf8 12.5%, #2563eb 25%, #38bdf8 37.5%, #93c5fd 50%, #38bdf8 62.5%, #2563eb 75%, #38bdf8 87.5%, #93c5fd 100%);
    --app-gradient-soft: var(--app-surface-muted);
    --app-gradient-surface: var(--app-surface);
    --app-gradient-surface-raised: var(--app-surface);
    --app-gradient-surface-muted: var(--app-surface-muted);
    --app-gradient-field: var(--app-field-background);
    --app-gradient-field-hover: var(--app-field-hover-background);
    --app-gradient-field-active: var(--app-field-focus-background);
    --app-field-border: #334155;
    --app-field-background: #0a0f1c;
    --app-field-text: #f8fafc;
    --app-field-placeholder: #64748b;
    --app-field-shadow: none;
    --app-field-hover-border: #475569;
    --app-field-hover-background: #132032;
    --app-field-hover-shadow: none;
    --app-field-focus-border: #60a5fa;
    --app-field-focus-background: #0a0f1c;
    --app-field-focus-shadow: 0 0 0 1px rgba(96, 165, 250, 0.28), 0 0 0 4px rgba(30, 64, 175, 0.16);
    --app-shadow-soft: 0 10px 22px rgba(2, 6, 23, 0.22);
    --app-shadow-primary: 0 14px 28px rgba(2, 6, 23, 0.28);
    --app-focus-ring: rgba(96, 165, 250, 0.28);
    --app-selected-strip: #60a5fa;
    --app-selected-border: #3b82f6;
    --app-selected-ring: rgba(96, 165, 250, 0.22);
    --app-selected-wash: color-mix(in srgb, #60a5fa 18%, #111827);
    --app-selected-wash-soft: color-mix(in srgb, #60a5fa 12%, #111827);
    --app-success-text: #86efac;
    --app-success-bg: #153226;
    --app-success-border: #2f6b4f;
    --app-warning-text: #fbbf24;
    --app-warning-bg: #2a1c0a;
    --app-warning-border: #92400e;
    --app-error-text: #fecaca;
    --app-error-bg: #2b1016;
    --app-error-border: #8b2b2b;
    --app-info-text: #93c5fd;
    --app-info-bg: #0c2138;
    --app-info-border: #2563eb;
    --app-ai-text: #a78bfa;
    --app-ai-bg: #1e1b4b;
    --app-ai-border: #4c1d95;
}

/* Base document styles used by both auth and app pages. */
body {
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #eef2f7;
    color: var(--app-text);
    line-height: 1.55;
}

html[data-theme="dark"] body {
    background: #0f172a;
}

body.app-shell {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.wrap {
    max-width: min(1980px, calc(100vw - 24px)) !important;
}

.app-shell .wrap {
    margin: 0 auto;
    padding: 20px 12px 40px;
    width: 100%;
    flex: 1 0 auto;
}

@media (min-width: 1800px) {
    .wrap {
        max-width: min(2040px, calc(100vw - 32px)) !important;
    }
}

/* Global semantic alerts and flash messages. */
.app-alert {
    --bs-alert-border-color: var(--app-border);
    --bs-alert-bg: var(--app-surface);
    --bs-alert-color: var(--app-text);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 0;
    border: 1px solid var(--bs-alert-border-color);
    border-left: 4px solid var(--bs-alert-border-color);
    border-radius: var(--app-radius);
    background: var(--bs-alert-bg);
    color: var(--bs-alert-color);
}

.app-alert a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

.app-alert__icon {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 20px;
    line-height: 1;
}

.app-alert.is-success {
    --bs-alert-color: var(--bs-success-text-emphasis);
    --bs-alert-bg: var(--bs-success-bg-subtle);
    --bs-alert-border-color: var(--bs-success-border-subtle);
}

.app-alert.is-warning,
.app-alert.app-alert--warning {
    --bs-alert-color: var(--bs-warning-text-emphasis);
    --bs-alert-bg: var(--bs-warning-bg-subtle);
    --bs-alert-border-color: var(--bs-warning-border-subtle);
}

.app-alert.is-danger {
    --bs-alert-color: var(--bs-danger-text-emphasis);
    --bs-alert-bg: var(--bs-danger-bg-subtle);
    --bs-alert-border-color: var(--bs-danger-border-subtle);
}

.app-alert.is-info {
    --bs-alert-color: var(--bs-info-text-emphasis);
    --bs-alert-bg: var(--bs-info-bg-subtle);
    --bs-alert-border-color: var(--bs-info-border-subtle);
}

.app-alert.is-secondary {
    --bs-alert-color: var(--bs-secondary-text-emphasis);
    --bs-alert-bg: var(--bs-secondary-bg-subtle);
    --bs-alert-border-color: var(--bs-secondary-border-subtle);
}

.page-shell > .app-alert {
    margin-bottom: var(--app-space-16);
}

/* Empty states that point to the next required setup step. */
.app-alert-next-step {
    --bs-alert-color: var(--bs-warning-text-emphasis);
    --bs-alert-bg: var(--bs-warning-bg-subtle);
    --bs-alert-border-color: var(--bs-warning-border-subtle);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--bs-alert-border-color);
    border-left: 4px solid var(--bs-alert-border-color);
    border-radius: var(--app-radius);
    background: var(--bs-alert-bg);
    color: var(--bs-alert-color);
}

.app-alert-next-step--info {
    --bs-alert-color: var(--bs-info-text-emphasis);
    --bs-alert-bg: var(--bs-info-bg-subtle);
    --bs-alert-border-color: var(--bs-info-border-subtle);
}

.app-alert-next-step a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

.app-alert-next-step__icon {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 20px;
    line-height: 1;
}

/* Product branding used in headers and login surfaces. */
.planner-brand {
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.planner-brand__title {
    margin: 0;
    font-family: "Bruno Ace SC", "Space Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--app-brand-blue);
}

::selection {
    background: rgba(37, 99, 235, 0.22);
    color: var(--app-heading);
}

::-moz-selection {
    background: rgba(37, 99, 235, 0.22);
    color: var(--app-heading);
}

.planner-brand--hero .planner-brand__title {
    font-size: clamp(2.55rem, 5.2vw, 3.7rem);
}

.planner-brand--app {
    /* Block-level: senza questo il successivo h1.page-title-with-icon
       (inline-flex) finisce sulla stessa riga del logo quando manca il
       div .app-header-context tra i due (accade nell'area admin, che
       non ha contesto progetto). */
    display: flex;
    text-decoration: none;
}

.planner-brand--app .planner-brand__title {
    font-size: clamp(2.1rem, 4.2vw, 2.95rem);
    line-height: 0.9;
}

.planner-brand--hero .planner-brand__title,
.planner-brand--app .planner-brand__title {
    background: var(--app-logo-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

body:not(.login-page) .planner-brand--app {
    margin-bottom: 14px !important;
}

body:not(.login-page) .app-header-context {
    margin-top: 0;
    margin-bottom: 18px !important;
}

/* Shared cards and metadata panels used across planner and config pages. */
.planner-hero-card .card-body {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
}

.planner-hero-card .page-header {
    margin-bottom: 2px;
}

.planner-hero-card .planner-meta {
    margin-top: 12px;
}

.planner-hero-card .planner-meta-intro {
    margin-top: 10px;
    font-size: 0.9rem;
}

.surface-accent-top::before {
    content: "";
    position: absolute;
    top: calc(var(--app-accent-strip-offset) * -1);
    left: 0;
    right: 0;
    width: 100%;
    height: var(--app-accent-strip-height);
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    background: var(--app-gradient-primary);
    opacity: var(--app-accent-strip-opacity);
}

.config-page-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    align-items: start;
}

.config-card {
    --config-tint-strong: color-mix(in srgb, var(--tint-color, #2563eb) 72%, var(--app-heading) 28%);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--app-border);
    border-radius: var(--bs-card-border-radius);
    background: var(--app-gradient-surface);
    padding: 24px 22px 22px;
}

.config-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: var(--tint-strip-width);
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    background: var(--config-tint-strong);
}

.config-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.config-card__title {
    margin: 0;
    font-size: 1.24rem;
    line-height: 1.12;
    font-weight: 800;
    color: var(--app-heading);
}

.config-card__key {
    margin-top: 5px;
    font-size: 0.82rem;
    color: var(--app-muted);
    letter-spacing: 0.01em;
}

.config-card__preview {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
    padding: 18px 18px 16px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: color-mix(in srgb, var(--tint-color, #2563eb) 10%, var(--app-surface) 90%);
}

.config-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    min-width: 58px;
    height: 58px;
    font-size: 1.72rem;
    color: #ffffff;
    background: var(--config-tint-strong);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
}

.config-card__preview-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.config-card__preview-name {
    font-size: 1.12rem;
    font-weight: 800;
    color: var(--app-heading);
}

.config-card__preview-line {
    font-size: 0.88rem;
    color: var(--app-muted);
    line-height: 1.35;
}

.config-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 12px;
}

.config-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    max-width: 100%;
    min-width: 0;
    padding: 7px 11px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface);
    color: var(--app-heading);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.config-chip-row--removable {
    margin-top: 8px;
}

.config-chip--removable {
    padding-right: 5px;
}

.config-chip__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--app-radius-sm);
    background: transparent;
    color: var(--app-muted);
    line-height: 1;
}

.config-chip__remove:hover,
.config-chip__remove:focus {
    border-color: var(--app-border);
    background: var(--app-surface-muted);
    color: var(--app-heading);
}

.config-chip__dot {
    width: 14px;
    height: 14px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-pill);
    background: var(--chip-color, var(--app-border-strong));
}

.config-chip--state-active {
    --chip-color: var(--app-primary);
}

.config-chip--state-inactive {
    --chip-color: var(--app-border-strong);
}

.config-chip--state-configured {
    --chip-color: var(--app-success-text);
}

.config-chip--state-missing {
    --chip-color: var(--app-warning-text);
}

.config-card .form-label {
    margin-bottom: 7px;
    font-size: 0.84rem;
    font-weight: 700;
}

.config-card .form-control,
.config-card .form-select {
    min-height: 46px;
}

.config-card textarea.form-control {
    min-height: 136px;
    padding-top: 12px;
    line-height: 1.48;
    resize: vertical;
}

.config-card .form-select[multiple] option {
    padding: 2px 8px;
    border-radius: var(--app-radius-sm);
}

.config-card .form-select[multiple] option:checked {
    background: color-mix(in srgb, var(--app-primary) 13%, var(--app-surface-muted) 87%);
    box-shadow: inset 0 0 0 9999px color-mix(in srgb, var(--app-primary) 13%, var(--app-surface-muted) 87%);
    color: var(--app-heading);
}

.config-card .form-select[multiple] option:checked:hover,
.config-card .form-select[multiple] option:checked:focus {
    background: color-mix(in srgb, var(--app-primary) 18%, var(--app-surface-muted) 82%);
    box-shadow: inset 0 0 0 9999px color-mix(in srgb, var(--app-primary) 18%, var(--app-surface-muted) 82%);
    color: var(--app-heading);
}

.content-rule-card .config-chip {
    gap: 8px;
}

.content-rule-card {
    background: var(--tint-surface, var(--app-surface));
}

.content-rule-card .config-chip strong {
    font-size: 0.82rem;
    color: var(--app-heading);
}

.content-rules-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
    gap: 18px;
}

@media (max-width: 1199.98px) {
    .content-rules-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .content-rules-grid {
        grid-template-columns: 1fr;
    }

    .config-card__header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

}

.content-rule-card .config-card__title {
    color: var(--config-tint-strong);
}

html[data-theme="dark"] .content-rule-card .config-card__brand-icon,
html[data-theme="dark"] .content-rule-card .config-card__title {
    color: var(--config-tint-strong) !important;
}

.config-help-note {
    margin-top: 10px;
    font-size: 0.84rem;
    color: var(--app-muted);
    line-height: 1.45;
}

.config-help-note--panel {
    margin: -4px 0 20px;
    padding: 12px 14px;
    border: 1px solid var(--app-border);
    border-radius: var(--bs-card-border-radius);
    background: var(--tint-surface, var(--app-surface-muted));
    color: var(--config-tint-strong);
}

.config-callout {
    margin-bottom: 24px;
    padding: 14px 16px;
    border: 1px solid #d9dee5;
    border-radius: var(--bs-card-border-radius);
    background: var(--app-gradient-surface-muted);
    color: var(--app-text);
    line-height: 1.55;
}

.config-callout strong {
    color: var(--app-heading);
}

.config-capability-card {
    border-radius: var(--bs-card-border-radius);
    background: var(--app-gradient-surface-muted);
}

.config-capability-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding-bottom: 18px;
    border-bottom: 1px solid #e7edf3;
}

.config-provider-card {
    position: relative;
    border-color: color-mix(in srgb, var(--tint-color, #cbd5e1) 22%, #e6ebf1 78%);
    border-radius: var(--bs-card-border-radius);
    background: var(--app-gradient-surface-muted);
    box-shadow: none;
    overflow: hidden;
}

.config-provider-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: var(--tint-strip-width);
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    background: var(--tint-color, #cbd5e1);
}

.config-provider-card.is-active {
    border-color: var(--app-selected-border) !important;
    background: var(--app-selected-wash) !important;
    box-shadow: none !important;
}

.config-provider-card.is-active::before {
    background: var(--app-gradient-primary);
    opacity: 0.88;
}

.config-provider-card .card-body {
    padding: 22px !important;
    min-width: 0;
}

.config-provider-card h3 {
    color: var(--app-heading);
}

.config-provider-card .d-flex,
.config-provider-card label,
.config-provider-card .badge,
.config-card__brand,
.config-card__title {
    min-width: 0;
}

.config-provider-card .badge,
.config-card__title {
    overflow-wrap: anywhere;
}

.config-provider-card__secret-badge {
    display: inline-flex;
    align-items: flex-start;
    gap: 4px;
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    text-align: left;
    line-height: 1.25;
}

.config-provider-card__secret-badge .bi {
    flex: 0 0 auto;
    margin-top: 1px;
}

.config-provider-card__secret-badge span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.config-provider-card .config-chip-row {
    gap: 7px;
}

.config-provider-card .config-chip {
    padding: 6px 10px;
    font-size: 0.76rem;
}

.config-status-text {
    font-weight: 800;
}

.config-status-text--ok {
    color: var(--app-success-text);
}

.config-status-text--missing {
    color: var(--app-warning-text);
}

.config-chip-row--summary {
    margin-top: 0;
    justify-content: flex-end;
}

.config-chip--summary {
    font-size: 0.77rem;
    font-weight: 700;
    color: #334155;
    background: var(--app-surface);
}

.config-chip--active {
    background: #eff6ff;
}

.config-active-provider-panel {
    padding: 16px 18px;
    border: 1px solid #e6ebf1;
    border-radius: var(--bs-card-border-radius);
    background: var(--app-gradient-surface-raised);
}

.config-active-provider-panel .form-label {
    margin-bottom: 8px;
}

.config-active-provider-panel__meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-height: 46px;
    padding: 0 2px;
    font-size: 0.88rem;
    color: var(--app-muted);
}

.config-active-provider-panel__meta strong {
    color: var(--app-heading);
}

.config-provider-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 11px 0 15px;
    border-top: 1px solid var(--app-border);
    border-bottom: 1px solid var(--app-border);
    font-size: 0.84rem;
}

.config-provider-meta__item {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    color: var(--app-text);
}

.config-provider-meta__label {
    color: var(--app-muted);
}

.config-provider-meta__separator {
    width: 1px;
    height: 14px;
    background: var(--app-border);
}

.config-provider-grid {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
}

.config-provider-grid__col {
    position: relative;
}

.config-color-control {
    display: flex;
    align-items: center;
    gap: 12px;
}

.config-color-picker {
    width: 58px;
    min-width: 58px;
    height: 46px;
    padding: 4px;
    border: 1px solid #c5d0dc;
    border-radius: var(--app-radius-sm);
    background: var(--app-surface);
    flex: 0 0 auto;
}

.config-color-picker::-webkit-color-swatch-wrapper {
    padding: 0;
}

.config-color-picker::-webkit-color-swatch {
    border: 0;
}

.config-color-code {
    font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Monaco, Consolas, Liberation Mono, monospace;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.config-card__token-input {
    min-width: 0;
}

.config-card__header {
    min-width: 0;
}

/* Social Network configs use a denser variant of config cards to keep many channels scannable. */
.social-configs-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
    gap: 18px;
}

@media (max-width: 1199.98px) {
    .social-configs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .social-configs-grid {
        grid-template-columns: 1fr;
    }
}

.config-card__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.config-card__brand-icon {
    font-size: 1.6rem;
    line-height: 1;
    flex-shrink: 0;
    color: var(--config-tint-strong);
}

.social-configs-card .config-card__title {
    color: var(--config-tint-strong);
}

html[data-theme="dark"] .social-configs-card .config-card__brand-icon,
html[data-theme="dark"] .social-configs-card .config-card__title {
    color: var(--config-tint-strong) !important;
}

.config-card__drag-handle {
    cursor: grab;
    color: var(--app-text-muted, #94a3b8);
    font-size: 1.1rem;
    line-height: 1;
    padding: 2px 4px;
    margin-left: -4px;
    user-select: none;
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.config-card__drag-handle:hover {
    color: var(--config-tint-strong);
}

.config-card__drag-handle:active {
    cursor: grabbing;
}

.config-card--ghost {
    opacity: 0.4;
}

.config-card--chosen {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
}

.config-card--drag {
    transform: rotate(1deg);
}

.config-card__token-input {
    min-width: 220px;
}

.social-configs-card .config-card {
    background: var(--tint-surface, var(--app-surface));
    padding: 18px 18px 16px;
}

.social-configs-card .config-card__header {
    margin-bottom: 12px;
    gap: 12px;
}

.social-configs-card .config-card__title {
    font-size: 1.08rem;
    line-height: 1.08;
}

.social-configs-card .config-card__key {
    margin-top: 3px;
    font-size: 0.74rem;
    letter-spacing: 0.02em;
}

.social-configs-card .config-card__preview {
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px 12px 11px;
    background: var(--tint-surface, var(--app-surface));
}

.social-configs-card .config-card__icon {
    width: 46px;
    min-width: 46px;
    height: 46px;
    font-size: 1.34rem;
}

.social-configs-card .config-card__preview-copy {
    gap: 4px;
}

.social-configs-card .config-card__preview-name {
    font-size: 0.98rem;
}

.social-configs-card .config-card__preview-line {
    font-size: 0.8rem;
}

.social-configs-card .config-chip-row {
    gap: 7px;
    margin-top: 8px;
}

.social-configs-card .config-chip {
    gap: 7px;
    padding: 5px 8px;
    font-size: 0.72rem;
}

.social-configs-card .config-chip__dot {
    width: 11px;
    height: 11px;
}

.social-configs-card .config-card .form-label {
    margin-bottom: 5px;
    font-size: 0.78rem;
}

.social-configs-card .config-card .form-control,
.social-configs-card .config-card .form-select {
    min-height: 40px;
}

.social-configs-card .config-color-control {
    gap: 9px;
}

.social-configs-card .config-color-picker {
    width: 44px;
    min-width: 44px;
    height: 40px;
    padding: 3px;
}

.social-configs-card .config-color-code {
    font-size: 0.84rem;
}

.social-configs-card .config-help-note--panel {
    margin: 0;
    padding: 10px 12px;
    font-size: 0.79rem;
}

.social-config-card__fields {
    --bs-gutter-x: 0.8rem;
    --bs-gutter-y: 0.8rem;
}

.social-config-card.is-disabled,
.content-rule-card.is-disabled {
    opacity: 0.55;
    border-color: color-mix(in srgb, var(--app-muted, #94a3b8) 35%, transparent);
    transition: opacity 0.2s ease;
}

.social-config-card.is-disabled::before,
.content-rule-card.is-disabled::before {
    opacity: 0.18;
}

.social-config-card.is-disabled:hover,
.social-config-card.is-disabled:focus-within,
.content-rule-card.is-disabled:hover,
.content-rule-card.is-disabled:focus-within {
    opacity: 0.95;
}

.social-configs-card .social-config-card.is-disabled .config-card__brand-icon,
.social-configs-card .social-config-card.is-disabled .config-card__title,
.content-rule-card.is-disabled .config-card__brand-icon,
.content-rule-card.is-disabled .config-card__title {
    color: var(--app-muted, #94a3b8) !important;
    filter: grayscale(1);
}

/* Configuration pages share these cards across Social Network, Regole Editoriali and Configurazione AI. */
.config-card code,
.config-help-note code {
    padding: 2px 6px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    background: var(--app-surface-muted);
    color: var(--app-heading);
}

/* Shared page shell and hero blocks for the main application pages. */
.page-shell {
    margin: 0 auto;
    padding: 24px 12px 44px;
    width: 100%;
    flex: 1 0 auto;
}

.page-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 22px;
    padding: 28px;
    margin-bottom: 26px;
}

.page-brand {
    min-width: 0;
}

.page-hero-card {
    margin-bottom: 20px;
}

.page-hero-title {
    margin: 0 0 8px;
    font-size: 1.42rem;
    font-weight: 800;
    color: var(--app-heading);
}

.page-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.page-actions--compact {
    margin-top: 14px;
    gap: 10px;
}

.page-actions__separator {
    align-self: stretch;
    width: 1px;
    min-height: 30px;
    background: var(--app-border);
}

.page-section-divider {
    margin: var(--app-space-24) 0;
    border-top: 1px solid var(--app-border);
}

.page-detail-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.page-detail-item {
    padding: 16px;
}

.page-section-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 20px;
}

.page-section-grid--compact {
    gap: 12px;
    margin-top: 16px;
}

.page-section-box {
    padding: 22px;
}

.page-section-box--compact {
    padding: 18px;
}

.page-section-box:not(.section-box--feature) h3 {
    margin: 0 0 10px;
    font-size: 1.05rem;
}

.page-section-box p {
    margin: 0 0 16px;
}

.page-nav-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    color: inherit;
    text-decoration: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background-color 160ms ease;
    cursor: pointer;
    border-color: var(--app-border);
    border-radius: var(--bs-card-border-radius);
    background: var(--app-surface);
    box-shadow: inset 3px 0 0 var(--app-accent, #2563eb);
}

.page-nav-card:hover,
.page-nav-card:focus-visible {
    text-decoration: none;
    border-color: color-mix(in srgb, var(--app-accent, #2563eb) 52%, #dce2e8 48%);
    background: color-mix(in srgb, var(--app-primary) 7%, var(--app-surface) 93%);
    box-shadow:
        inset var(--tint-strip-width) 0 0 var(--app-accent, #2563eb),
        0 1px 2px rgba(15, 23, 42, 0.06);
}

.page-nav-card:focus-visible {
    outline: 0;
    box-shadow:
        0 0 0 3px var(--app-focus-ring),
        inset var(--tint-strip-width) 0 0 var(--app-accent, #2563eb),
        0 1px 2px rgba(15, 23, 42, 0.06);
}

.page-nav-card__title {
    margin: 0 0 10px;
    color: var(--app-heading);
    transition: color 0.18s ease;
}

.page-nav-card .page-title-with-icon__icon {
    transition: color 0.18s ease;
}

.page-nav-card:hover .page-nav-card__title,
.page-nav-card:focus-visible .page-nav-card__title,
.page-nav-card:hover .page-title-with-icon__icon,
.page-nav-card:focus-visible .page-title-with-icon__icon {
    color: var(--app-primary-hover);
}

.page-nav-card p:last-child {
    margin-bottom: 0;
}

.dashboard-page .dashboard-group .page-hero-title {
    margin-bottom: 10px;
}

.page-summary-grid.dashboard-status-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.dashboard-status-kpi {
    display: flex;
    flex-direction: column;
    row-gap: 8px;
    min-height: 116px;
}

.dashboard-status-kpi::before {
    height: 3px;
}

.dashboard-status-kpi .page-summary-label {
    margin-bottom: 7px;
    font-size: 0.72rem;
}

.dashboard-status-kpi .page-summary-value,
.dashboard-status-kpi .page-summary-value--list {
    font-size: 0.98rem;
    line-height: 1.25;
}

.dashboard-status-kpi .page-summary-copy {
    margin-top: 0;
    margin-bottom: 0 !important;
    font-size: 0.84rem;
    line-height: 1.35;
}

.dashboard-action-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.dashboard-action-card__button {
    align-self: flex-start;
    margin-top: auto;
    font-weight: 700 !important;
}

@media (max-width: 1199.98px) {
    .page-summary-grid.dashboard-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .page-summary-grid.dashboard-status-grid {
        grid-template-columns: 1fr;
    }
}

.page-section-box--compact h3 {
    margin: 0 0 8px;
}

.page-section-box--compact p {
    margin: 0 0 12px;
}

.page-detail-label {
    display: block;
    font-size: 0.9rem;
    color: var(--app-muted);
    margin-bottom: 6px;
}

.page-detail-value {
    font-size: 1rem;
    word-break: break-word;
}

.help-layout {
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.help-sidebar {
    position: sticky;
    top: 20px;
}

.help-nav-list {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.help-nav-card {
    min-height: 0;
    padding: 18px;
}

html:not([data-theme="dark"]) .help-page .help-nav-card.is-active,
html[data-theme="dark"] .help-page .help-nav-card.is-active {
    border-color: var(--app-selected-border) !important;
    background: var(--app-selected-wash) !important;
    box-shadow: inset var(--tint-strip-width) 0 0 var(--app-selected-strip) !important;
}

.help-content-card {
    min-width: 0;
}

.help-doc-content {
    margin-top: 24px;
    color: var(--app-text);
}

.help-context-modal__content {
    margin-top: 0;
}

.help-doc-content h2,
.help-doc-content h3 {
    color: var(--app-heading);
    margin-top: 28px;
    margin-bottom: 12px;
}

.help-doc-content h2:first-child {
    margin-top: 0;
}

.help-doc-content p {
    margin: 0 0 16px;
    color: var(--app-text);
}

.help-doc-content ul,
.help-doc-content ol {
    margin: 0 0 18px;
    padding-left: 22px;
}

.help-doc-content li {
    margin-bottom: 8px;
}

.help-doc-content code {
    padding: 1px 6px;
    border-radius: var(--app-radius);
    background: rgba(148, 163, 184, 0.12);
    color: var(--app-heading);
}

.help-doc-pre {
    margin: 0 0 18px;
    padding: 16px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface-muted);
    overflow-x: auto;
}

.help-doc-pre code {
    padding: 0;
    border-radius: var(--app-radius);
    background: transparent;
}

.help-doc-callout {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 20px 0;
    padding: 16px 20px;
    border: 1px solid var(--app-border);
    border-left: var(--tint-strip-width) solid var(--app-accent, #2563eb);
    border-radius: var(--app-radius);
    background: color-mix(in srgb, var(--app-accent, #2563eb) 6%, var(--app-surface, #ffffff) 94%);
    color: var(--app-text);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.help-doc-callout__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 32px;
    border-radius: var(--app-radius);
    background: transparent;
    color: var(--app-accent, #2563eb);
    font-size: 22px;
    line-height: 1;
    margin-top: 0;
}

.help-doc-callout__icon i {
    display: block;
    line-height: 1;
}

.help-doc-callout__body {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--app-text);
}

.help-doc-callout__body > :last-child {
    margin-bottom: 0;
}

.help-doc-callout p {
    margin: 0;
    color: var(--app-text);
}

html[data-theme="dark"] .help-doc-callout {
    background: color-mix(in srgb, var(--app-accent, #60a5fa) 12%, var(--app-surface, #111827) 88%);
    border-color: var(--app-border);
    border-left-color: var(--app-accent, #60a5fa);
    box-shadow: none;
}

html[data-theme="dark"] .help-doc-callout__icon {
    background: transparent;
    color: var(--app-accent, #60a5fa);
}

.help-doc-callout--warning {
    background: var(--app-warning-bg);
    border-color: var(--app-warning-border);
    border-left-color: var(--app-warning-text);
}

.help-doc-callout--warning .help-doc-callout__icon {
    background: transparent;
    color: var(--app-warning-text);
}

.help-doc-callout--danger {
    background: var(--app-error-bg);
    border-color: var(--app-error-border);
    border-left-color: var(--app-error-text);
}

.help-doc-callout--danger .help-doc-callout__icon {
    background: transparent;
    color: var(--app-error-text);
}

.help-doc-callout--success {
    background: var(--app-success-bg);
    border-color: var(--app-success-border);
    border-left-color: var(--app-success-text);
}

.help-doc-callout--success .help-doc-callout__icon {
    background: color-mix(in srgb, var(--app-success-text) 18%, var(--app-surface, #ffffff) 82%);
    color: var(--app-success-text);
}

/* Project selection components reused by the active-project screen. */
.project-switcher-brand {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.project-switcher-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 16px;
}

.project-switcher-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid var(--app-border);
    border-left: var(--tint-strip-width) solid var(--app-primary);
    border-radius: var(--bs-card-border-radius);
    background: var(--app-surface);
}

.project-switcher-item.has-project-accent {
    border-left-color: var(--project-accent-light);
}

.project-switcher-item.has-project-accent .project-switcher-name {
    color: var(--project-accent-light);
}

.project-switcher-name {
    font-weight: 700;
    color: var(--app-heading);
}

.project-switcher-meta {
    margin-top: 4px;
    font-size: 0.88rem;
    color: var(--app-muted);
}

.admin-project-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.admin-project-color-swatch {
    display: inline-block;
    width: 0.72rem;
    height: 0.72rem;
    flex: 0 0 auto;
    border-radius: 999px;
}

.admin-project-color-swatch.has-project-accent {
    background: var(--project-accent-light);
    border: 1px solid color-mix(in srgb, var(--project-accent-light) 62%, var(--app-border) 38%);
}

.admin-project-color-swatch.is-default {
    background: transparent;
    border: 1px solid var(--app-border);
}

.version-switcher-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
}

.version-switcher-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--app-border);
    border-radius: var(--bs-card-border-radius);
    background: var(--app-gradient-surface-raised);
}

.version-switcher-item__main {
    min-width: 0;
    flex: 1 1 auto;
}

.version-switcher-list--dense {
    grid-template-columns: 1fr;
    gap: 10px;
}

.version-switcher-item--dense {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px 16px;
    padding: 14px 16px;
}

.version-switcher-item--highlight {
    border-color: color-mix(in srgb, var(--app-accent, #2563eb) 26%, #dce2e8 74%);
    background: var(--app-selected-wash);
    box-shadow: inset 3px 0 0 var(--app-accent, #2563eb);
}

.version-switcher-title {
    margin: 0 0 6px;
    font-weight: 800;
    color: var(--app-heading);
}

.version-switcher-meta {
    margin: 0;
    font-size: 0.88rem;
    color: var(--app-muted);
    line-height: 1.5;
}

.version-switcher-item--dense .version-switcher-title {
    margin-bottom: 4px;
}

.version-switcher-item--dense .version-switcher-meta {
    font-size: 0.84rem;
    line-height: 1.4;
}

.version-switcher-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding: 6px 10px;
    border: 1px solid #d9dee5;
    border-radius: var(--app-radius-sm);
    background: var(--app-gradient-surface);
    color: var(--app-heading);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
}

.version-switcher-item--highlight .version-switcher-status {
    border-color: color-mix(in srgb, var(--app-accent, #2563eb) 28%, #cbd5e1 72%);
    background: color-mix(in srgb, var(--app-accent, #2563eb) 8%, #ffffff 92%);
    color: color-mix(in srgb, var(--app-accent, #2563eb) 88%, #0f172a 12%);
}

.version-switcher-status--opened {
    border-color: color-mix(in srgb, var(--app-accent, #2563eb) 28%, #cbd5e1 72%);
    background: color-mix(in srgb, var(--app-accent, #2563eb) 8%, #ffffff 92%);
    color: color-mix(in srgb, var(--app-accent, #2563eb) 88%, #0f172a 12%);
}

.version-switcher-status--current {
    border-color: color-mix(in srgb, #2563eb 24%, #d9dee5 76%);
    background: color-mix(in srgb, #2563eb 7%, #ffffff 93%);
    color: color-mix(in srgb, #2563eb 82%, #0f172a 18%);
}

.version-switcher-status--historical {
    border-color: color-mix(in srgb, #64748b 18%, #d9dee5 82%);
    background: color-mix(in srgb, #64748b 4%, #ffffff 96%);
    color: color-mix(in srgb, #475569 84%, #0f172a 16%);
}

.version-switcher-item--dense .btn-ui,
.version-switcher-item--dense .version-switcher-actions {
    align-self: center;
}

.planner-saved-versions-card {
    border-color: color-mix(in srgb, var(--app-accent, #2563eb) 18%, #dfe5ec 82%) !important;
}

.planner-saved-versions-card .page-section-header {
    margin-bottom: 20px;
}

.icon-action-link,
.icon-status-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--app-icon-action-size);
    height: var(--app-icon-action-size);
    border: 1px solid #d4dbe4;
    background: var(--app-surface);
    color: var(--app-primary);
    text-decoration: none;
    border-radius: var(--app-radius-sm);
    transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.icon-action-link:hover,
.icon-action-link:focus-visible {
    border-color: color-mix(in srgb, var(--app-primary) 36%, #d4dbe4 64%);
    background: color-mix(in srgb, var(--app-primary) 7%, var(--app-surface));
    color: var(--app-primary-hover);
}

.icon-action-link--danger {
    color: var(--app-error-text);
    border-color: var(--app-error-border);
    background: var(--app-error-bg);
}

.icon-action-link--danger:hover,
.icon-action-link--danger:focus-visible {
    color: var(--app-error-text);
    border-color: color-mix(in srgb, var(--app-error-text) 28%, var(--app-error-border) 72%);
    background: color-mix(in srgb, var(--app-error-text) 10%, var(--app-error-bg) 90%);
}

.icon-action-link--active {
    color: var(--app-muted);
    border-color: var(--app-border);
    background: var(--app-border);
    box-shadow: none;
}

.icon-status-chip--success {
    color: #0f766e;
    border-color: #b9ddd8;
    background: var(--app-success-bg);
}

.version-switcher-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.table-guided tbody tr.table-row-selected td {
    background: var(--app-selected-wash-soft) !important;
}

/* Topic table helpers shared by catalog and future data-entry pages. */
.table-wrap {
    overflow-x: auto;
}

.table-export-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.table-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.table-row-actions > *,
.table-row-actions .icon-action-link {
    flex: 0 0 auto;
}

.table-row-actions form {
    display: inline-flex;
    margin: 0;
}

.table-section-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.section-actions-center {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.form-grid-compact {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 0.85rem;
}

.form-grid-compact .form-label {
    margin-bottom: 6px;
}

.form-grid-toggle {
    display: flex;
    align-items: center;
    padding-bottom: 9px;
}

.form-grid-align-end {
    display: flex;
    align-items: flex-end;
}

.topics-url-pref-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 5px 8px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    background: var(--app-surface-muted);
    color: var(--app-heading);
    font-size: 0.86rem;
    line-height: 1.2;
}

.topics-url-pref-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topics-url-pref-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.topics-url-pref-options {
    display: grid;
    gap: 8px;
}

.topics-url-pref-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: flex-start;
    padding: 10px;
    border: 1px solid var(--app-border);
    border-radius: var(--bs-card-border-radius);
    background: var(--app-surface);
    cursor: pointer;
}

.topics-url-pref-option:hover {
    border-color: var(--app-border-strong);
    background: var(--app-surface-muted);
}

.topics-url-pref-option__body {
    min-width: 0;
}

.topics-url-pref-option__title,
.topics-url-pref-option__url {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topics-url-pref-option__title {
    color: var(--app-heading);
    font-weight: 700;
}

.topics-url-pref-option__url {
    color: var(--app-muted);
    font-size: 0.86rem;
}

.topics-url-pref-option__type {
    display: inline-flex;
    margin-top: 6px;
    padding: 2px 6px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    color: var(--app-muted);
    font-size: 0.75rem;
    line-height: 1.1;
}

.ai-usage-daily-chart {
    display: grid;
    grid-template-columns: repeat(30, 1fr);
    align-items: end;
    gap: 3px;
    height: 140px;
    padding: 8px;
    background: var(--app-surface-muted);
    border: 1px solid var(--app-border);
    border-radius: var(--bs-card-border-radius);
}

.ai-usage-daily-chart__bar {
    display: block;
    min-height: 2px;
    background: var(--app-accent, #3563ff);
    transition: opacity 0.15s ease;
}

.ai-usage-daily-chart__bar:hover {
    opacity: 0.78;
}

.ai-usage-daily-chart__bar--empty {
    background: var(--app-border);
}

.ai-usage-daily-chart__axis {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
}

.table-cell-note-preview {
    max-width: 280px;
}

/* Shared review surfaces used by topic review and planner debug tables. */
.review-table-shell {
    border: 0;
    background: var(--app-gradient-surface-raised);
    overflow: hidden;
}

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

/* Planner metadata grids. */
.planner-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.planner-meta-intro {
    margin-top: 14px;
    font-size: 0.94rem;
    color: #4b5563;
}

.planner-meta-intro strong {
    color: var(--app-heading);
}

/* Planner controls and calendar framing. */
.planner-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 4px 0;
}

.planner-toolbar-note {
    max-width: 62ch;
    font-size: 0.89rem;
    line-height: 1.52;
    color: var(--app-muted);
}

.planner-controls-form {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 8px;
}

.planner-controls-field {
    min-width: 240px;
}

.planner-calendar-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.planner-calendar-title {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--app-heading);
    line-height: 1.1;
}

.planner-calendar-subtitle {
    margin-top: 4px;
    font-size: 0.92rem;
    color: var(--app-muted);
}

.planner-calendar-shell {
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    overflow: hidden;
    border-radius: var(--app-radius);
    box-shadow: none;
}

.post-calendar-shell {
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    overflow: hidden;
    border-radius: var(--app-radius);
}

.post-calendar-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 18px 0 14px;
}

.post-calendar-kpi {
    border: 1px solid var(--app-border);
    border-left: var(--tint-strip-width) solid var(--app-selected-strip);
    border-radius: var(--app-radius);
    background: var(--app-surface);
    padding: 10px 12px;
}

.post-calendar-kpi.is-success {
    border-left-color: var(--app-success-text);
}

.post-calendar-kpi.is-warning {
    border-left-color: var(--app-warning-text);
}

.post-calendar-kpi.is-error {
    border-left-color: var(--app-error-text);
}

.post-calendar-kpi__label {
    color: var(--app-text-muted);
    font-size: var(--app-text-xs);
    font-weight: 800;
    text-transform: uppercase;
}

.post-calendar-kpi__value {
    margin-top: 4px;
    color: var(--app-heading);
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
}

.post-calendar-filter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: 16px 0 12px;
}

.post-calendar-filter__title {
    color: var(--app-heading);
    font-size: var(--app-text-xs);
    font-weight: 800;
}

.post-calendar-filter__controls {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.post-calendar-filter__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 5px 10px;
    border: 1px solid var(--app-border);
    border-radius: var(--bs-btn-border-radius-sm);
    background: var(--app-surface);
    color: var(--app-text-muted);
    font-size: var(--app-text-xs);
    font-weight: 800;
    line-height: 1;
}

.post-calendar-filter__button:hover,
.post-calendar-filter__button:focus-visible {
    border-color: var(--app-info-border);
    background: var(--app-info-bg);
    color: var(--app-info-text);
}

.post-calendar-filter__button.is-active {
    border-color: var(--app-selected-border);
    background: var(--app-selected-wash-soft);
    color: var(--app-heading);
}

@media (max-width: 767.98px) {
    .post-calendar-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.post-calendar-legend-wrap {
    display: grid;
    gap: 7px;
    margin: 0 0 12px;
}

.post-calendar-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    color: var(--app-text-muted);
    font-size: var(--app-text-xs);
    font-weight: 700;
}

.post-calendar-legend__title {
    color: var(--app-heading);
    font-weight: 800;
}

.post-calendar-legend__hint {
    color: var(--app-muted);
    font-weight: 600;
}

.post-calendar-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.post-calendar-legend .post-calendar-day-badge {
    min-height: 16px;
    padding: 0;
    border: 0;
    background: transparent;
}

.post-calendar-legend .post-calendar-day-badge__dot {
    width: 8px;
    height: 8px;
}

.post-calendar-legend .post-calendar-pill__status {
    margin-left: 0;
}

.post-calendar-weekdays,
.post-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.post-calendar-weekdays {
    background: var(--app-surface-muted);
    border-bottom: 1px solid var(--app-border);
}

.post-calendar-weekday {
    padding: 15px 16px;
    font-size: var(--app-text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--app-muted);
    border-right: 1px solid var(--app-border);
}

.post-calendar-weekday:last-child {
    border-right: 0;
}

.post-calendar-cell {
    min-height: 200px;
    padding: 12px;
    background: var(--app-surface);
    border-right: 1px solid var(--app-border);
    border-bottom: 1px solid var(--app-border);
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.post-calendar-cell:nth-child(7n) {
    border-right: 0;
}

.post-calendar-cell.is-outside {
    opacity: 0.45;
    background: transparent;
}

.post-calendar-cell:not(.is-outside):hover {
    background: var(--app-surface-muted);
}

.post-calendar-cell.is-filter-empty {
    background: color-mix(in srgb, var(--app-surface-muted) 72%, transparent);
}

.post-calendar-cell.is-filter-empty .post-calendar-cell__items {
    opacity: 0.45;
}

.post-calendar-cell__topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.post-calendar-cell__day {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--app-heading);
    line-height: 1;
}

.post-calendar-day-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    min-height: 22px;
    padding: 3px 7px;
    border: 1px solid var(--app-error-border);
    border-radius: var(--app-radius-sm);
    background: var(--app-error-bg);
    color: var(--app-error-text);
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.post-calendar-day-badge__dot {
    width: 8px;
    height: 8px;
    border-radius: var(--app-radius-pill);
    background: var(--app-error-text);
    box-shadow: 0 0 0 3px var(--app-error-bg);
}

.post-calendar-day-badge.is-complete {
    border-color: var(--app-success-border);
    background: var(--app-success-bg);
    color: var(--app-success-text);
}

.post-calendar-day-badge.is-complete .post-calendar-day-badge__dot {
    background: var(--app-success-text);
    box-shadow: 0 0 0 3px var(--app-success-bg);
}

.post-calendar-day-badge.is-partial {
    border-color: var(--app-warning-border);
    background: var(--app-warning-bg);
    color: var(--app-warning-text);
}

.post-calendar-day-badge.is-partial .post-calendar-day-badge__dot {
    background: var(--app-warning-text);
    box-shadow: 0 0 0 3px var(--app-warning-bg);
}

.post-calendar-day-badge.is-error,
.post-calendar-day-badge.is-empty {
    border-color: var(--app-error-border);
    background: var(--app-error-bg);
    color: var(--app-error-text);
}

.post-calendar-cell__items {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.post-calendar-pill {
    --calendar-chip-accent: var(--pill-accent, var(--app-border));
    --calendar-chip-accent-dark: var(--pill-accent-dark, var(--calendar-chip-accent));
    --calendar-chip-surface: var(--pill-surface, var(--app-surface-muted));
    --calendar-chip-border: var(--app-border);
    --calendar-chip-strong: color-mix(in srgb, var(--calendar-chip-accent) 72%, var(--app-heading) 28%);
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 30px;
    padding: 3px 9px 3px 6px;
    background: var(--calendar-chip-surface);
    font-size: var(--app-text-xs);
    text-decoration: none;
    color: var(--calendar-chip-strong);
    border: 1px solid var(--calendar-chip-border);
    border-left: var(--tint-strip-width) solid var(--calendar-chip-strong);
    border-radius: var(--app-radius);
    transition: background 0.1s ease, border-color 0.1s ease, transform 0.1s ease;
}

.post-calendar-pill:hover {
    background: var(--calendar-chip-surface);
    border-color: var(--calendar-chip-strong);
    border-left-color: var(--calendar-chip-strong);
    color: var(--calendar-chip-strong);
    transform: translateX(1px);
}

.post-calendar-pill__social-icon {
    font-size: 1.15em;
    color: currentColor;
    flex-shrink: 0;
}

.post-calendar-pill__thumb {
    width: 38px;
    height: 38px;
    object-fit: cover;
    flex-shrink: 0;
}

.post-calendar-pill__thumb-wrap,
.post-calendar-mobile-item__thumb-wrap {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

.post-calendar-pill__play {
    position: absolute;
    top: 50%;
    left: 50%;
    color: color-mix(in srgb, #ffffff 90%, transparent);
    font-size: 1.25rem;
    line-height: 1;
    transform: translate(-50%, -50%);
    text-shadow: 0 1px 6px color-mix(in srgb, #000000 80%, transparent);
    pointer-events: none;
}

.post-calendar-pill__title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow-wrap: anywhere;
    font-size: var(--app-text-xs);
    line-height: 1.3;
    color: currentColor;
}

.post-calendar-pill__time {
    font-variant-numeric: tabular-nums;
    font-size: var(--app-text-xs);
    color: var(--app-muted);
    flex-shrink: 0;
}

.post-calendar-pill__title ~ .post-calendar-pill__time {
    margin-left: 6px;
}

.post-calendar-pill:not(:has(.post-calendar-pill__title)) .post-calendar-pill__time {
    margin-left: auto;
}

.post-calendar-pill__status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    min-width: 1rem;
    height: 1rem;
    margin-left: auto;
    flex-shrink: 0;
    border-radius: var(--app-radius-pill);
    font-size: 0.88rem;
    line-height: 1;
}

.post-calendar-pill__time + .post-calendar-pill__status {
    margin-left: 6px;
}

.post-calendar-pill__origin,
.post-calendar-mobile-item__origin {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border: 1px solid var(--app-info-border);
    border-radius: var(--app-radius-sm);
    background: var(--app-info-bg);
    color: var(--app-info-text);
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0;
    flex-shrink: 0;
}

.post-calendar-pill__origin + .post-calendar-pill__status {
    margin-left: 0;
}

.publish-event-post-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--publish-event-social-color, var(--app-primary));
    text-decoration-color: color-mix(in srgb, currentColor 38%, transparent);
}

.publish-event-post-link:hover,
.publish-event-post-link:focus-visible {
    color: var(--publish-event-social-color, var(--app-primary));
    text-decoration-color: currentColor;
}

.publish-event-external-link {
    color: var(--publish-event-social-color, var(--app-primary));
    text-decoration-color: color-mix(in srgb, currentColor 38%, transparent);
}

.publish-event-external-link:hover,
.publish-event-external-link:focus-visible {
    color: var(--publish-event-social-color, var(--app-primary));
    text-decoration-color: currentColor;
}

.publish-event-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    min-width: 1.15rem;
    line-height: 1;
    color: var(--publish-event-social-color, currentColor);
    font-size: 1.05rem;
}

.publish-event-publisher-list {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-left: 6px;
    vertical-align: middle;
}

.publish-event-publisher-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--publish-event-social-color, currentColor);
    font-weight: 700;
}

html[data-theme="dark"] .publish-event-social-icon {
    color: var(--publish-event-social-color-dark, var(--publish-event-social-color, currentColor));
}

html[data-theme="dark"] .publish-event-post-link,
html[data-theme="dark"] .publish-event-post-link:hover,
html[data-theme="dark"] .publish-event-post-link:focus-visible,
html[data-theme="dark"] .publish-event-external-link,
html[data-theme="dark"] .publish-event-external-link:hover,
html[data-theme="dark"] .publish-event-external-link:focus-visible {
    color: var(--publish-event-social-color-dark, var(--publish-event-social-color, var(--app-primary)));
}

html[data-theme="dark"] .publish-event-publisher-chip {
    color: var(--publish-event-social-color-dark, var(--publish-event-social-color, currentColor));
}

.table-row--error > *,
.telegram-notification-event-row--failed > *,
.admin-publish-event-row--failed > *,
.admin-ai-usage-row--error > * {
    --bs-table-bg: var(--bs-danger-bg-subtle);
    background-color: var(--bs-table-bg) !important;
    border-color: var(--bs-danger-border-subtle) !important;
}

.table-row--success > *,
.admin-publish-event-row--published > * {
    --bs-table-bg: var(--bs-success-bg-subtle);
    background-color: var(--bs-table-bg) !important;
    border-color: var(--bs-success-border-subtle) !important;
}

.post-calendar-pill__status.status-info {
    color: var(--app-info-text);
}

.post-calendar-pill__status.status-secondary {
    color: var(--app-muted);
}

.post-calendar-pill__status.status-generato {
    color: var(--app-success-text);
}

.post-calendar-pill__status.status-errore {
    color: var(--app-error-text);
}

.post-calendar-pill__status.status-muted {
    color: var(--app-muted);
}

.post-calendar-pill__status.status-unset {
    color: var(--app-muted);
}

.post-calendar-mobile-list {
    display: none;
}

.post-calendar-mobile-day {
    border: 1px solid var(--app-border);
    border-radius: var(--bs-card-border-radius);
    background: var(--app-surface);
    overflow: hidden;
}

.post-calendar-mobile-day + .post-calendar-mobile-day {
    margin-top: 12px;
}

.post-calendar-mobile-day__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--app-border);
    background: var(--app-surface-muted);
}

.calendar-mobile-day-title {
    margin: 0;
    color: var(--app-heading);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.2;
}

.post-calendar-mobile-day__count {
    flex: 0 0 auto;
    color: var(--app-muted);
    font-size: var(--app-text-xs);
    font-weight: 800;
    text-transform: uppercase;
}

.post-calendar-mobile-day__meta {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
}

.post-calendar-mobile-day__items {
    display: grid;
    gap: 0;
}

.post-calendar-mobile-item {
    --calendar-chip-accent: var(--pill-accent, var(--app-border));
    --calendar-chip-accent-dark: var(--pill-accent-dark, var(--calendar-chip-accent));
    --calendar-chip-surface: var(--pill-surface, var(--app-surface));
    --calendar-chip-border: var(--app-border);
    --calendar-chip-strong: color-mix(in srgb, var(--calendar-chip-accent) 72%, var(--app-heading) 28%);
    display: flex;
    gap: 8px;
    min-width: 0;
    padding: 8px 10px;
    border-left: var(--tint-strip-width) solid var(--calendar-chip-strong);
    background: var(--calendar-chip-surface);
    color: var(--calendar-chip-strong);
    text-decoration: none;
}

.post-calendar-mobile-item + .post-calendar-mobile-item {
    border-top: 1px solid var(--calendar-chip-border);
}

.post-calendar-mobile-item:hover,
.post-calendar-mobile-item:focus-visible {
    color: var(--calendar-chip-strong);
    background: var(--calendar-chip-surface);
}

.post-calendar-mobile-item__thumb {
    width: 58px;
    height: 58px;
    object-fit: cover;
    flex: 0 0 auto;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
}

.post-calendar-mobile-item__body {
    display: grid;
    gap: 3px;
    min-width: 0;
    flex: 1 1 auto;
}

.post-calendar-mobile-item__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    color: var(--app-muted);
    font-size: var(--app-text-xs);
    font-weight: 700;
}

.post-calendar-mobile-item__social {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: currentColor;
}

.post-calendar-mobile-item__time {
    font-variant-numeric: tabular-nums;
}

.post-calendar-mobile-item__status {
    padding: 2px 6px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    color: var(--app-muted);
    background: var(--app-surface);
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.post-calendar-mobile-item__status.status-info {
    border-color: var(--app-info-border);
    color: var(--app-info-text);
    background: var(--app-info-bg);
}

.post-calendar-mobile-item__status.status-generato {
    border-color: var(--app-success-border);
    color: var(--app-success-text);
    background: var(--app-success-bg);
}

.post-calendar-mobile-item__status.status-errore {
    border-color: var(--app-error-border);
    color: var(--app-error-text);
    background: var(--app-error-bg);
}

.calendar-mobile-item-title {
    color: currentColor;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.32;
    overflow-wrap: anywhere;
}

.post-calendar-mobile-item__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
}

.planner-calendar-card .card-body {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Planner-specific components reused across monthly analysis, calendar and debug. */
.planner-analysis-card {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    padding: 22px;
    border-radius: var(--app-radius);
    box-shadow: none;
    overflow: hidden;
}

.planner-analysis-card.is-positive {
    border-color: var(--app-success-border);
    background: var(--app-success-bg);
}

.planner-analysis-card.is-improvement {
    border-color: var(--app-warning-border);
    background: var(--app-warning-bg);
}

.planner-analysis-card.is-critical {
    border-color: var(--app-error-border);
    background: var(--app-error-bg);
}

.planner-analysis-accent {
    height: 6px;
    margin: -22px -22px 18px;
    border-radius: var(--app-radius) var(--app-radius) 0 0;
    background: var(--app-border-strong);
}

.planner-analysis-accent.is-positive {
    background: var(--app-success-text);
}

.planner-analysis-accent.is-improvement {
    background: var(--app-warning-text);
}

.planner-analysis-accent.is-critical {
    background: var(--app-error-text);
}

.planner-analysis-title {
    font-size: 0.82rem;
    color: var(--app-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}

.planner-analysis-value {
    color: var(--app-heading);
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.1;
}

.planner-analysis-subvalue {
    margin-top: 6px;
    color: var(--app-muted);
    font-size: 0.9rem;
}

.planner-analysis-copy {
    margin: 0 0 16px;
    display: grid;
    gap: 6px;
}

.planner-analysis-copy-primary {
    color: var(--app-heading);
    font-weight: 600;
    line-height: 1.35;
}

.planner-analysis-copy-secondary {
    color: var(--app-muted);
    font-size: 0.92rem;
    line-height: 1.4;
}

.planner-analysis-score.is-good .planner-analysis-value {
    color: var(--app-success-text);
}

.planner-analysis-score.is-medium .planner-analysis-value {
    color: var(--app-warning-text);
}

.planner-analysis-score.is-low .planner-analysis-value {
    color: var(--app-error-text);
}

.planner-analysis-list {
    display: grid;
    gap: 10px;
}

.planner-analysis-list-item {
    display: grid;
    gap: 6px;
}

.planner-analysis-list-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.planner-analysis-list-label {
    color: var(--app-heading);
    font-weight: 600;
}

.planner-analysis-list-value {
    color: var(--app-muted);
    font-size: 0.88rem;
    white-space: nowrap;
}

.planner-analysis-bar {
    width: 100%;
    height: 8px;
    background: var(--app-border);
    box-shadow: inset 0 0 0 1px var(--app-border);
    overflow: hidden;
}

.planner-analysis-bar-fill {
    height: 100%;
    background: var(--app-border-strong);
}

.planner-analysis-bar-fill.is-neutral {
    background: var(--app-muted);
}

.planner-analysis-bar-fill.is-good {
    background: var(--app-success-text);
}

.planner-analysis-bar-fill.is-medium {
    background: var(--app-warning-text);
}

.planner-analysis-bar-fill.is-low {
    background: var(--app-error-text);
}

.planner-analysis-consistency {
    display: grid;
    align-content: center;
    gap: 8px;
    min-height: 100%;
    padding: 4px 2px 2px;
}

.planner-analysis-consistency-title {
    color: var(--app-heading);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
}

.planner-analysis-consistency-text {
    color: var(--app-muted);
    font-size: 0.94rem;
    line-height: 1.6;
}

.planner-social-badge,
.planner-format-badge,
.planner-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 7px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    background: var(--app-surface);
    color: var(--app-border-strong);
}

.planner-social-badge {
    background: var(--app-surface-muted);
    color: var(--app-heading);
}

.planner-day-detail-card .planner-social-badge {
    background: var(--social-surface, var(--app-surface-muted));
    border-color: var(--app-border);
    color: var(--social-strong, var(--app-heading));
}

.planner-status-badge.status-bozza,
.planner-status-badge.status-secondary,
.planner-status-badge.status-muted {
    border-color: var(--app-border);
    background: var(--app-surface-muted);
    color: var(--app-text);
}

.planner-status-badge.status-da-approvare {
    border-color: var(--app-warning-border);
    background: var(--app-warning-bg);
    color: var(--app-warning-text);
}

.planner-status-badge.status-approvato,
.planner-status-badge.status-generato {
    border-color: var(--app-success-border);
    background: var(--app-success-bg);
    color: var(--app-success-text);
}

.planner-status-badge.status-rifiutato,
.planner-status-badge.status-errore {
    border-color: var(--app-error-border);
    background: var(--app-error-bg);
    color: var(--app-error-text);
}

.planner-status-badge.status-pending,
.planner-status-badge.status-info {
    border-color: var(--app-info-border);
    background: var(--app-info-bg);
    color: var(--app-info-text);
}

/* Planner calendar items and day-detail cards share the same accent language. */
.planner-day-items {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.planner-day-item {
    --calendar-chip-accent: var(--tint-color, var(--app-border));
    --calendar-chip-accent-dark: var(--tint-color-dark, var(--calendar-chip-accent));
    --calendar-chip-surface: var(--tint-surface, var(--app-surface));
    --calendar-chip-border: var(--app-border);
    --calendar-chip-strong: color-mix(in srgb, var(--calendar-chip-accent) 72%, var(--app-heading) 28%);
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 3px 9px 3px 6px;
    background: var(--calendar-chip-surface);
    color: var(--calendar-chip-strong);
    border: 1px solid var(--calendar-chip-border);
    border-left: var(--tint-strip-width) solid var(--calendar-chip-strong);
    min-height: 30px;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--app-radius);
}

.planner-day-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.92rem;
    min-width: 0.92rem;
    color: currentColor;
    font-size: 0.84rem;
    line-height: 1;
    flex: 0 0 auto;
}

.planner-day-item-text {
    font-size: 0.78rem;
    color: currentColor;
    line-height: 1.22;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 0;
}

.planner-day-item-strategy {
    --strategy-accent: var(--tint-color, var(--app-muted));
    --strategy-accent-dark: var(--tint-color-dark, var(--strategy-accent));
    --strategy-surface: var(--tint-surface, var(--app-surface));
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 0;
    padding: 2px 6px;
    font-size: 0.72rem;
    font-weight: inherit;
    line-height: 1.05;
    letter-spacing: 0.02em;
    background: var(--strategy-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    color: var(--strategy-accent);
    white-space: nowrap;
    flex: 0 0 auto;
    max-width: 120px;
    overflow: hidden;
}

.planner-day-item-strategy span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.planner-day-detail-meta .planner-day-item-strategy {
    max-width: 140px;
    font-size: 0.72rem;
    padding: 3px 7px;
    box-shadow: none;
}

.planner-day-item-strategy i {
    color: inherit;
    font-size: 0.8em;
}

.planner-day-detail-card {
    --social-accent: var(--tint-color, var(--app-border));
    --social-accent-dark: var(--tint-color-dark, var(--social-accent));
    --social-surface: var(--tint-surface, var(--app-surface));
    --social-strong: color-mix(in srgb, var(--social-accent) 72%, var(--app-heading) 28%);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--social-surface);
    border-left: var(--tint-strip-width) solid var(--social-strong);
    color: var(--social-strong);
    padding: 14px;
    box-shadow: none;
}

.ai-text-draft-card {
    scroll-margin-top: 18px;
}

.ai-text-draft-card.ai-text-draft-card--hash-focus {
    border-color: var(--social-strong, var(--app-ui-blue));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--social-strong, var(--app-ui-blue)) 30%, transparent);
}

.planner-detail-block {
    background: var(--app-surface);
    border: 1px solid #e5e7eb;
    border-radius: var(--app-radius);
    padding: 12px;
}

.planner-detail-block--caption {
    padding: 10px 12px;
    border-color: var(--app-border);
    background: var(--app-surface);
}

.planner-day-detail-card > .planner-detail-block--caption {
    margin-top: 10px;
}

.planner-day-detail-section.is-compact .planner-day-detail-card {
    padding: 10px 12px;
}

.planner-day-detail-section.is-compact .planner-day-detail-topline {
    align-items: center;
    margin-bottom: 0;
}

.planner-day-detail-section.is-compact .planner-day-detail-title {
    margin-bottom: 0;
    font-size: 1rem;
}

.planner-day-detail-section.is-compact .planner-day-detail-social-icon {
    width: 1.1rem;
    min-width: 1.1rem;
    font-size: 1.1rem;
}

.planner-day-detail-section.is-compact .planner-day-detail-strategy-line,
.planner-day-detail-section.is-compact .planner-day-detail-card > .planner-detail-block--caption {
    display: none;
}

.planner-day-detail-section.is-compact .planner-day-detail-compact-line {
    display: flex;
}

.planner-day-detail-section.is-compact .planner-day-detail-meta .planner-format-badge,
.planner-day-detail-section.is-compact .planner-day-detail-meta .planner-status-badge,
.planner-day-detail-section.is-compact .planner-day-detail-meta .planner-day-item-strategy {
    padding: 3px 5px;
    font-size: 0.68rem;
}

.planner-detail-block--full {
    grid-column: 1 / -1;
}

.planner-detail-label {
    font-size: 0.78rem;
    color: var(--app-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.planner-detail-value {
    color: var(--app-heading);
    font-size: 0.92rem;
    line-height: 1.38;
    word-break: break-word;
}

.planner-detail-block--caption .planner-detail-value {
    font-size: 0.96rem;
    line-height: 1.44;
    font-weight: 500;
}

.planner-detail-block--caption .planner-detail-label {
    color: var(--social-strong, var(--app-muted));
}

.ai-text-image-section-title .planner-detail-label {
    color: var(--social-strong, var(--app-muted));
}

/* AI Texts reuses the planner day-detail component with a tiny integration layer. */
.ai-text-draft-card .planner-day-detail-topline > div:first-child {
    flex: 0 1 auto;
}

.ai-text-draft-card__meta {
    align-items: flex-start;
    justify-content: center;
    flex: 1 1 auto;
}

.planner-day-detail-meta .planner-format-badge,
.planner-day-detail-meta .planner-status-badge,
.planner-day-detail-meta .planner-day-item-strategy,
.ai-text-draft-card__meta .planner-format-badge,
.ai-text-draft-card__meta .planner-status-badge,
.ai-text-draft-card__meta .planner-day-item-strategy {
    padding: 3px 7px;
    font-size: 0.72rem;
    line-height: 1.05;
}

.planner-day-detail-meta .planner-format-badge,
.ai-text-draft-card__meta .planner-format-badge {
    border-color: color-mix(in srgb, var(--app-heading) 32%, var(--app-border) 68%);
    border-left: 3px solid var(--social-strong, var(--app-heading));
    background: var(--app-surface);
    color: var(--app-heading);
    font-weight: 800;
}

.planner-format-badge--neutral-strip {
    border-left: 3px solid var(--app-border-strong);
}

.ai-text-draft-card__actions-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: flex-start;
    justify-content: flex-end;
    flex: 0 0 auto;
}

.ai-text-draft-card__debug-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid #d7dee8;
    border-radius: var(--app-radius-sm);
    background: var(--app-surface);
    color: var(--app-muted);
    font-size: 0.8rem;
    line-height: 1;
}

.ai-text-draft-card__debug-link:hover,
.ai-text-draft-card__debug-link:focus-visible {
    color: var(--social-strong, var(--app-heading));
    border-color: var(--social-strong, var(--app-border-strong));
}

.ai-text-draft-card__generation-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: -2px 0 12px;
    color: var(--app-muted);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.35;
}

.ai-text-draft-card__generation-meta .bi {
    color: var(--social-strong, var(--app-primary));
    font-size: 0.92rem;
}

.ai-text-draft-card__generation-meta-label {
    color: var(--app-heading);
}

.ai-text-next-action-meta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 14px;
}

.ai-text-next-action-meta .bi {
    color: var(--app-accent-strong);
    font-size: 1rem;
}

.ai-text-provider-note {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 16px;
}

.ai-text-provider-note .bi {
    color: var(--app-accent-strong);
    font-size: 1rem;
}

.ai-provider-inline {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.ai-provider-inline .bi {
    color: var(--app-accent-strong);
    font-size: 1rem;
}

.ai-action-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: 12px 0 16px;
    color: var(--app-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.ai-action-legend__title {
    color: var(--app-heading);
    font-weight: 800;
}

.ai-action-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
}

.ai-action-legend__swatch {
    width: 10px;
    height: 10px;
    border-radius: var(--app-radius-pill);
    border: 1px solid var(--app-border);
    background: var(--app-surface-muted);
    flex: 0 0 auto;
}

.ai-action-legend__swatch.is-ai {
    background: var(--app-ai-text);
    border-color: var(--app-ai-border);
}

.ai-action-legend__swatch.is-local {
    background: var(--app-surface);
    border-color: var(--app-border-strong);
}

.ai-action-legend__swatch.is-success {
    background: var(--app-success-text);
    border-color: var(--app-success-border);
}

.ai-action-legend__swatch.is-status {
    background: var(--app-info-text);
    border-color: var(--app-info-border);
}

.ai-text-draft-card__grid {
    align-items: start;
    grid-template-columns: 1fr;
}

.ai-text-draft-card__images {
    display: grid;
    gap: 12px;
}

.ai-text-draft-card__caption-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 6px;
}

.ai-text-draft-card__caption-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.ai-text-draft-card__empty-warning {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--app-warning-border);
    border-left: 3px solid var(--app-warning-border);
    border-radius: var(--app-radius);
    background: var(--app-warning-bg);
    color: var(--app-warning-text);
    font-size: 0.84rem;
    line-height: 1.35;
}

.ai-text-draft-card__empty-warning i {
    font-size: 0.96rem;
    line-height: 1;
}

.ai-text-social-preview {
    display: grid;
    gap: 10px;
    padding: 12px;
    background: color-mix(in srgb, var(--app-surface-muted) 34%, var(--app-surface) 66%);
}

.ai-text-social-preview-action {
    display: flex;
    justify-content: flex-end;
    grid-column: 1 / -1;
}

.ai-text-social-preview-action__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border: 1px solid var(--app-warning-border);
    border-radius: var(--app-radius-pill);
    background: var(--app-warning-bg);
    color: var(--app-warning-text);
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
}

.ai-text-social-preview__section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.ai-text-social-preview__hint {
    color: var(--app-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.ai-text-social-preview__warnings {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 520px;
}

.ai-text-social-preview__warning {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 7px;
    border: 1px solid var(--app-warning-border);
    border-radius: var(--app-radius-pill);
    background: var(--app-warning-bg);
    color: var(--app-warning-text);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.15;
}

.ai-text-social-preview__card {
    --preview-brand: #64748b;
    --preview-brand-soft: #f1f5f9;
    --preview-brand-border: #d9e2ec;
    display: flex;
    flex-direction: column;
    width: min(100%, 620px);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface);
    color: var(--app-heading);
    overflow: hidden;
}

.ai-text-social-preview-modal .ai-text-social-preview__card {
    margin-inline: auto;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.12);
}

.ai-text-social-preview-modal .modal-body {
    display: grid;
    gap: 14px;
    justify-items: center;
    padding: 28px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--app-surface-muted) 46%, transparent), transparent 42%),
        color-mix(in srgb, var(--app-surface-muted) 62%, var(--app-surface) 38%);
}

html[data-theme="dark"] .ai-text-social-preview-modal .ai-text-social-preview__card {
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] .ai-text-social-preview-modal .modal-body {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--app-surface-muted) 34%, transparent), transparent 42%),
        color-mix(in srgb, var(--app-surface-muted) 44%, var(--app-surface) 56%);
}

html[data-theme="dark"] .ai-text-social-preview__avatar {
    border-color: color-mix(in srgb, var(--preview-brand) 42%, var(--app-border) 58%);
    background: color-mix(in srgb, var(--preview-brand) 28%, var(--app-surface) 72%);
    color: color-mix(in srgb, var(--preview-brand) 38%, #ffffff 62%);
}

html[data-theme="dark"] .social-preview-template--youtube .ai-text-social-preview__avatar,
html[data-theme="dark"] .social-preview-template--linkedin .ai-text-social-preview__avatar,
html[data-theme="dark"] .social-preview-template--pinterest .ai-text-social-preview__avatar {
    background: color-mix(in srgb, var(--preview-brand) 22%, #ffffff 78%);
    color: color-mix(in srgb, var(--preview-brand) 78%, #111827 22%);
}

@media (max-width: 575.98px) {
    .ai-text-social-preview-modal .modal-body {
        padding: 16px;
    }
}

.ai-text-social-preview__card.social-preview-template--facebook {
    --preview-brand: #1877f2;
    --preview-brand-soft: #eaf3ff;
    --preview-brand-border: #bfdbfe;
    width: min(100%, 680px);
}

.ai-text-social-preview__card.social-preview-template--facebook.social-preview-format--video {
    width: min(100%, 560px);
}

.ai-text-social-preview__card.social-preview-template--instagram {
    --preview-brand: #111827;
    --preview-brand-soft: #f3f4f6;
    --preview-brand-border: #d1d5db;
    width: min(100%, 470px);
    border: 1px solid var(--app-border);
    border-radius: 0;
    background: var(--app-surface);
}

.ai-text-social-preview__card.social-preview-template--instagram.social-preview-format--story {
    position: relative;
    width: min(100%, 390px);
    min-height: 690px;
    border: 0;
    border-radius: 18px;
    background: #08090d;
    color: #ffffff;
}

.ai-text-social-preview__card.social-preview-template--instagram.social-preview-format--reel {
    position: relative;
    width: min(100%, 390px);
    min-height: 690px;
    border: 0;
    border-radius: 18px;
    background: #08090d;
    color: #ffffff;
}

.ai-text-social-preview__card.social-preview-template--x {
    --preview-brand: #0f1419;
    --preview-brand-soft: #f1f5f9;
    --preview-brand-border: #d9e2ec;
    width: min(100%, 430px);
    border: 1px solid var(--app-border);
    border-radius: 18px;
    background: var(--app-surface);
}

.ai-text-social-preview__card.social-preview-template--youtube {
    --preview-brand: #ff0000;
    --preview-brand-soft: #fff1f1;
    --preview-brand-border: #fecaca;
    width: min(100%, 560px);
    border: 0;
    border-radius: 0;
    background: var(--app-surface);
    padding-bottom: 14px;
}

.ai-text-social-preview__card.social-preview-template--youtube.social-preview-format--short {
    position: relative;
    width: min(100%, 390px);
    min-height: 690px;
    border: 0;
    border-radius: 18px;
    background: #08090d;
    color: #ffffff;
}

.ai-text-social-preview__card.social-preview-template--youtube.social-preview-format--community-post {
    width: min(100%, 520px);
    border: 1px solid var(--app-border);
    border-radius: 12px;
    padding-bottom: 14px;
}

.ai-text-social-preview__card.social-preview-template--linkedin {
    --preview-brand: #0a66c2;
    --preview-brand-soft: #edf5fc;
    --preview-brand-border: #bfdbfe;
    width: min(100%, 560px);
    border-radius: 10px;
    background: var(--app-surface);
}

.ai-text-social-preview__card.social-preview-template--pinterest {
    --preview-brand: #e60023;
    --preview-brand-soft: #fff1f3;
    --preview-brand-border: #fecdd3;
    width: min(100%, 660px);
    border-radius: 18px;
    background: var(--app-surface);
    padding-bottom: 16px;
}

.ai-text-social-preview__card.social-preview-template--tiktok {
    --preview-brand: #111827;
    --preview-brand-soft: #f3f4f6;
    --preview-brand-border: #d1d5db;
    position: relative;
    width: min(100%, 420px);
    min-height: 720px;
    border: 0;
    border-radius: 18px;
    background: #0b0b0f;
    color: #ffffff;
}

.ai-text-social-preview__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 10px;
}

.ai-text-social-preview__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border: 1px solid color-mix(in srgb, var(--preview-brand) 32%, var(--app-border) 68%);
    border-radius: var(--app-radius-pill);
    background: color-mix(in srgb, var(--preview-brand) 10%, var(--app-surface) 90%);
    color: var(--preview-brand);
    font-size: 1rem;
}

.ai-text-social-preview__identity {
    display: grid;
    min-width: 0;
    color: var(--app-muted);
    font-size: 0.76rem;
    line-height: 1.25;
}

.ai-text-social-preview__identity strong {
    color: var(--app-heading);
    font-size: 0.9rem;
}

.ai-text-social-preview__body {
    padding: 0 16px 14px;
    color: var(--app-text);
    font-size: 0.92rem;
    line-height: 1.42;
    white-space: pre-wrap;
    word-break: break-word;
}

.social-preview-template--facebook:not(.social-preview-format--reel):not(.social-preview-format--story) .ai-text-social-preview__body {
    display: -webkit-box;
    overflow: hidden;
    margin: 0 16px 14px;
    padding: 0;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    white-space: normal;
}

.social-preview-template--facebook.social-preview-format--video .ai-text-social-preview__body {
    order: 3;
    margin-top: 4px;
}

.social-preview-template--instagram .ai-text-social-preview__body {
    order: 4;
    padding: 10px 14px 14px;
    font-size: 0.95rem;
    line-height: 1.36;
}

.social-preview-template--instagram:not(.social-preview-format--story):not(.social-preview-format--reel) .ai-text-social-preview__body {
    display: -webkit-box;
    overflow: hidden;
    max-height: 5.2rem;
    margin: 10px 14px 14px;
    padding: 0;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    white-space: normal;
}

.social-preview-template--instagram.social-preview-format--story .ai-text-social-preview__body {
    position: absolute;
    right: 18px;
    bottom: 42px;
    left: 18px;
    z-index: 3;
    display: -webkit-box;
    overflow: hidden;
    padding: 0;
    color: #ffffff;
    font-size: 0.96rem;
    line-height: 1.28;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    white-space: normal;
}

.social-preview-template--instagram.social-preview-format--reel .ai-text-social-preview__body {
    position: absolute;
    right: 74px;
    bottom: 42px;
    left: 18px;
    z-index: 3;
    display: -webkit-box;
    overflow: hidden;
    padding: 0;
    color: #ffffff;
    font-size: 0.96rem;
    line-height: 1.28;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    white-space: normal;
}

.social-preview-template--x .ai-text-social-preview__body {
    padding: 0 14px 10px;
    font-size: 0.94rem;
    line-height: 1.34;
}

.social-preview-template--youtube .ai-text-social-preview__body {
    order: 3;
    padding: 2px 16px 0 58px;
    color: var(--app-heading);
    font-size: 0.9rem;
    font-weight: 850;
    line-height: 1.26;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    white-space: normal;
}

.social-preview-template--youtube.social-preview-format--community-post .ai-text-social-preview__body {
    order: 2;
    margin: 6px 16px 12px;
    padding: 0;
    color: var(--app-text);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.36;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.social-preview-template--linkedin .ai-text-social-preview__body {
    display: -webkit-box;
    overflow: hidden;
    margin: 10px 18px 14px;
    padding: 0;
    color: var(--app-heading);
    font-size: 1.02rem;
    line-height: 1.32;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    white-space: normal;
}

.social-preview-template--pinterest .ai-text-social-preview__body {
    order: 3;
    display: -webkit-box;
    overflow: hidden;
    max-height: calc(1.12rem * 1.25 * 2);
    margin: 18px 18px 10px;
    padding: 0;
    color: var(--app-heading);
    font-size: 1.12rem;
    font-weight: 850;
    line-height: 1.25;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    white-space: normal;
}

.social-preview-template--tiktok .ai-text-social-preview__body {
    position: absolute;
    right: 76px;
    bottom: 82px;
    left: 18px;
    z-index: 3;
    display: -webkit-box;
    overflow: hidden;
    padding: 0;
    color: #ffffff;
    font-size: 0.98rem;
    line-height: 1.28;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    white-space: normal;
}

.ai-text-social-preview__empty {
    color: var(--app-muted);
    font-style: italic;
}

.ai-text-social-preview__media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    border-top: 1px solid var(--app-border);
    border-bottom: 1px solid var(--app-border);
    background: var(--app-surface-muted);
    color: var(--app-muted);
    overflow: hidden;
}

.ai-text-social-preview__media img {
    display: block;
    width: 100%;
    max-height: 360px;
    object-fit: cover;
}

.ai-text-social-preview__media video,
.ai-text-social-preview__media iframe {
    display: block;
    width: 100%;
    max-height: 520px;
    border: 0;
    aspect-ratio: 16 / 9;
    background: #000000;
}

.social-preview-template--instagram .ai-text-social-preview__media {
    aspect-ratio: 1 / 1;
    min-height: 0;
    border: 0;
    border-top: 1px solid var(--app-border);
    border-bottom: 1px solid var(--app-border);
    border-radius: 0;
    background: var(--app-surface);
}

.social-preview-template--instagram.social-preview-format--story .ai-text-social-preview__media {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    min-height: 100%;
    border: 0;
    border-radius: 18px;
    background: #08090d;
}

.social-preview-template--instagram.social-preview-format--reel .ai-text-social-preview__media {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    min-height: 100%;
    border: 0;
    border-radius: 18px;
    background: #08090d;
}

.social-preview-template--instagram.social-preview-format--story .ai-text-social-preview__media::after {
    position: absolute;
    inset: 0;
    content: "";
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, 0.42), transparent 34%),
        linear-gradient(to top, rgba(0, 0, 0, 0.58), transparent 42%);
    pointer-events: none;
}

.social-preview-template--instagram.social-preview-format--reel .ai-text-social-preview__media::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(to top, rgba(0, 0, 0, 0.58), transparent 44%);
    pointer-events: none;
}

.social-preview-template--instagram .ai-text-social-preview__media img {
    aspect-ratio: 1 / 1;
    max-height: none;
}

.social-preview-template--instagram .ai-text-social-preview__media video,
.social-preview-template--instagram .ai-text-social-preview__media iframe {
    aspect-ratio: 1 / 1;
    max-height: none;
}

.social-preview-template--instagram.social-preview-format--story .ai-text-social-preview__media img,
.social-preview-template--instagram.social-preview-format--story .ai-text-social-preview__media video,
.social-preview-template--instagram.social-preview-format--story .ai-text-social-preview__media iframe,
.social-preview-template--instagram.social-preview-format--reel .ai-text-social-preview__media img,
.social-preview-template--instagram.social-preview-format--reel .ai-text-social-preview__media video,
.social-preview-template--instagram.social-preview-format--reel .ai-text-social-preview__media iframe {
    aspect-ratio: auto;
    height: 100%;
    max-height: none;
    object-fit: cover;
}

.social-preview-template--instagram.social-preview-format--story .ai-text-social-preview__media > .bi,
.social-preview-template--instagram.social-preview-format--reel .ai-text-social-preview__media > .bi {
    z-index: 2;
    color: rgba(255, 255, 255, 0.72);
}

.social-preview-template--x .ai-text-social-preview__media {
    margin: 0 14px;
    min-height: 0;
    border: 1px solid var(--app-border);
    border-radius: 14px;
}

.social-preview-template--x .ai-text-social-preview__media.is-missing {
    aspect-ratio: 16 / 9;
}

.social-preview-template--x .ai-text-social-preview__media img {
    height: auto;
    max-height: 420px;
    object-fit: contain;
}

.social-preview-template--x .ai-text-social-preview__media.has-blurred-backdrop {
    background: var(--app-surface-muted);
}

.social-preview-template--x .ai-text-social-preview__media.has-blurred-backdrop::before {
    position: absolute;
    inset: -22px;
    content: "";
    background-image: var(--social-preview-media-backdrop);
    background-position: center;
    background-size: cover;
    filter: blur(18px);
    opacity: 0.72;
    transform: scale(1.04);
}

.social-preview-template--x .ai-text-social-preview__media.has-blurred-backdrop::after {
    position: absolute;
    inset: 0;
    content: "";
    background: color-mix(in srgb, var(--app-surface) 20%, transparent);
    pointer-events: none;
}

.social-preview-template--x .ai-text-social-preview__media.has-blurred-backdrop img {
    position: relative;
    z-index: 1;
}

.social-preview-template--x .ai-text-social-preview__media video,
.social-preview-template--x .ai-text-social-preview__media iframe {
    aspect-ratio: 16 / 9;
    height: 100%;
    max-height: none;
    object-fit: cover;
}

.social-preview-template--youtube .ai-text-social-preview__media {
    order: 1;
    aspect-ratio: 16 / 9;
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: var(--app-surface-muted);
}

.social-preview-template--youtube.social-preview-format--community-post .ai-text-social-preview__media {
    order: 3;
    aspect-ratio: auto;
    margin: 0 16px;
    border: 1px solid var(--app-border);
    border-radius: 12px;
}

.social-preview-template--youtube.social-preview-format--short .ai-text-social-preview__media {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    min-height: 100%;
    border: 0;
    border-radius: 18px;
    background: #08090d;
}

.social-preview-template--youtube.social-preview-format--short .ai-text-social-preview__media::after {
    position: absolute;
    inset: 0;
    content: "";
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, 0.24), transparent 30%),
        linear-gradient(to top, rgba(0, 0, 0, 0.62), transparent 44%);
    pointer-events: none;
}

.social-preview-template--linkedin .ai-text-social-preview__media {
    min-height: 0;
    margin: 0 18px;
    border: 0;
    background: var(--app-surface-muted);
}

.social-preview-template--pinterest .ai-text-social-preview__media {
    order: 2;
    min-height: 500px;
    margin: 0 18px;
    border: 0;
    border-radius: 18px;
    background: var(--app-surface-muted);
}

.social-preview-template--tiktok .ai-text-social-preview__media {
    position: absolute;
    inset: 0;
    min-height: 100%;
    border: 0;
    border-radius: 18px;
    background: #0b0b0f;
}

.social-preview-template--youtube .ai-text-social-preview__media img {
    aspect-ratio: 16 / 9;
    height: 100%;
    max-height: none;
}

.social-preview-template--youtube.social-preview-format--community-post .ai-text-social-preview__media img {
    aspect-ratio: auto;
    height: auto;
    max-height: 520px;
    object-fit: contain;
}

.social-preview-template--youtube .ai-text-social-preview__media video,
.social-preview-template--youtube .ai-text-social-preview__media iframe {
    aspect-ratio: 16 / 9;
    height: 100%;
    max-height: none;
}

.social-preview-template--youtube.social-preview-format--short .ai-text-social-preview__media img,
.social-preview-template--youtube.social-preview-format--short .ai-text-social-preview__media video,
.social-preview-template--youtube.social-preview-format--short .ai-text-social-preview__media iframe {
    aspect-ratio: auto;
    height: 100%;
    max-height: none;
    object-fit: cover;
}

.social-preview-template--youtube.social-preview-format--short .ai-text-social-preview__media > .bi {
    z-index: 2;
    color: rgba(255, 255, 255, 0.72);
}

.social-preview-template--linkedin .ai-text-social-preview__media img {
    height: auto;
    max-height: 560px;
    object-fit: contain;
}

.social-preview-template--linkedin .ai-text-social-preview__media video,
.social-preview-template--linkedin .ai-text-social-preview__media iframe {
    aspect-ratio: 16 / 9;
    height: 100%;
    max-height: none;
}

.social-preview-template--pinterest .ai-text-social-preview__media img {
    max-height: 680px;
}

.social-preview-template--tiktok .ai-text-social-preview__media img {
    height: 100%;
    max-height: none;
    object-fit: cover;
}

.social-preview-template--tiktok .ai-text-social-preview__media video,
.social-preview-template--tiktok .ai-text-social-preview__media iframe {
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
    object-fit: cover;
}

.social-preview-template--tiktok .ai-text-social-preview__media::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(to top, rgba(0, 0, 0, 0.58), transparent 44%);
    pointer-events: none;
}

.ai-text-social-preview__media > .bi {
    font-size: 2rem;
}

.ai-text-social-preview__media > span {
    position: absolute;
    left: 12px;
    bottom: 12px;
    max-width: calc(100% - 20px);
    padding: 4px 7px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-pill);
    background: color-mix(in srgb, var(--app-surface) 92%, transparent);
    color: var(--app-muted);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.1;
}

.social-preview-template--instagram .ai-text-social-preview__media > span {
    left: 14px;
    bottom: 14px;
}

.social-preview-template--youtube .ai-text-social-preview__media > span {
    right: 10px;
    bottom: 10px;
    left: auto;
    max-width: calc(100% - 20px);
    border: 0;
    border-radius: 7px;
    background: color-mix(in srgb, #111827 88%, transparent);
    color: #ffffff;
    font-size: 0.78rem;
}

.social-preview-template--linkedin .ai-text-social-preview__media > span {
    left: 12px;
    bottom: 12px;
}

.social-preview-template--pinterest .ai-text-social-preview__media > span {
    right: 14px;
    bottom: 14px;
    left: auto;
    border: 0;
    background: color-mix(in srgb, var(--app-surface) 82%, transparent);
}

.social-preview-template--tiktok .ai-text-social-preview__media > span {
    right: auto;
    top: 14px;
    bottom: auto;
    left: 18px;
    z-index: 2;
    border: 0;
    background: rgba(0, 0, 0, 0.46);
    color: #ffffff;
}

.ai-text-social-preview__media.is-link {
    min-height: 96px;
}

.ai-text-social-preview__media.is-missing {
    min-height: 132px;
    border-style: dashed;
}

.social-preview-template--facebook .ai-text-social-preview__media {
    min-height: 0;
    border-right: 0;
    border-left: 0;
    border-style: solid;
}

.social-preview-template--facebook.social-preview-format--video .ai-text-social-preview__media {
    order: 1;
    aspect-ratio: 16 / 9;
}

.social-preview-template--facebook .ai-text-social-preview__media.is-missing {
    aspect-ratio: 1.91 / 1;
    border-style: solid;
}

.social-preview-template--facebook.social-preview-format--video .ai-text-social-preview__media.is-missing {
    aspect-ratio: 16 / 9;
}

.social-preview-template--facebook .ai-text-social-preview__media img {
    height: auto;
    max-height: 520px;
    object-fit: contain;
}

.social-preview-template--facebook:not(.social-preview-format--reel):not(.social-preview-format--story) .ai-text-social-preview__media.has-blurred-backdrop {
    background: var(--app-surface-muted);
}

.social-preview-template--facebook:not(.social-preview-format--reel):not(.social-preview-format--story) .ai-text-social-preview__media.has-blurred-backdrop::before {
    position: absolute;
    inset: -22px;
    content: "";
    background-image: var(--social-preview-media-backdrop);
    background-position: center;
    background-size: cover;
    filter: blur(18px);
    opacity: 0.72;
    transform: scale(1.04);
}

.social-preview-template--facebook:not(.social-preview-format--reel):not(.social-preview-format--story) .ai-text-social-preview__media.has-blurred-backdrop::after {
    position: absolute;
    inset: 0;
    content: "";
    background: color-mix(in srgb, var(--app-surface) 20%, transparent);
    pointer-events: none;
}

.social-preview-template--facebook:not(.social-preview-format--reel):not(.social-preview-format--story) .ai-text-social-preview__media.has-blurred-backdrop img {
    position: relative;
    z-index: 1;
}

.social-preview-template--facebook .ai-text-social-preview__media video,
.social-preview-template--facebook .ai-text-social-preview__media iframe {
    aspect-ratio: 16 / 9;
    height: 100%;
    max-height: none;
}

.social-preview-template--facebook.social-preview-format--video .ai-text-social-preview__media video,
.social-preview-template--facebook.social-preview-format--video .ai-text-social-preview__media iframe {
    height: 100%;
}

.social-preview-template--facebook.social-preview-format--video .ai-text-social-preview__header {
    order: 2;
    padding: 12px 16px 0;
}

.social-preview-template--facebook.social-preview-format--video .ai-text-social-preview__mock-actions {
    order: 4;
}

.ai-text-social-preview__card.social-preview-template--facebook.social-preview-format--reel,
.ai-text-social-preview__card.social-preview-template--facebook.social-preview-format--story {
    position: relative;
    width: min(100%, 420px);
    min-height: 720px;
    border: 0;
    border-radius: 18px;
    background: #08090d;
    color: #ffffff;
}

.social-preview-template--facebook.social-preview-format--reel .ai-text-social-preview__media,
.social-preview-template--facebook.social-preview-format--story .ai-text-social-preview__media {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    min-height: 100%;
    border: 0;
    border-radius: 18px;
    background: #08090d;
}

.social-preview-template--facebook.social-preview-format--reel .ai-text-social-preview__media::after,
.social-preview-template--facebook.social-preview-format--story .ai-text-social-preview__media::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(to top, rgba(0, 0, 0, 0.62), transparent 44%);
    pointer-events: none;
}

.social-preview-template--facebook.social-preview-format--reel .ai-text-social-preview__media img,
.social-preview-template--facebook.social-preview-format--reel .ai-text-social-preview__media video,
.social-preview-template--facebook.social-preview-format--reel .ai-text-social-preview__media iframe,
.social-preview-template--facebook.social-preview-format--story .ai-text-social-preview__media img,
.social-preview-template--facebook.social-preview-format--story .ai-text-social-preview__media video,
.social-preview-template--facebook.social-preview-format--story .ai-text-social-preview__media iframe {
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
    object-fit: cover;
}

.social-preview-template--facebook.social-preview-format--reel .ai-text-social-preview__media > .bi,
.social-preview-template--facebook.social-preview-format--story .ai-text-social-preview__media > .bi {
    z-index: 2;
    color: rgba(255, 255, 255, 0.72);
}

.social-preview-template--facebook.social-preview-format--reel .ai-text-social-preview__header {
    position: absolute;
    right: 76px;
    bottom: 126px;
    left: 18px;
    z-index: 3;
    padding: 0;
}

.social-preview-template--facebook.social-preview-format--story .ai-text-social-preview__header {
    position: absolute;
    top: 18px;
    right: 18px;
    left: 18px;
    z-index: 3;
    padding: 0;
}

.social-preview-template--facebook.social-preview-format--reel .ai-text-social-preview__avatar,
.social-preview-template--facebook.social-preview-format--story .ai-text-social-preview__avatar {
    border-color: rgba(255, 255, 255, 0.34);
    background: rgba(255, 255, 255, 0.92);
    color: var(--preview-brand);
}

.social-preview-template--facebook.social-preview-format--reel .ai-text-social-preview__identity,
.social-preview-template--facebook.social-preview-format--story .ai-text-social-preview__identity {
    color: rgba(255, 255, 255, 0.78);
}

.social-preview-template--facebook.social-preview-format--reel .ai-text-social-preview__identity strong,
.social-preview-template--facebook.social-preview-format--story .ai-text-social-preview__identity strong {
    color: #ffffff;
}

.social-preview-template--facebook.social-preview-format--reel .ai-text-social-preview__body,
.social-preview-template--facebook.social-preview-format--story .ai-text-social-preview__body {
    position: absolute;
    right: 18px;
    bottom: 42px;
    left: 18px;
    z-index: 3;
    display: -webkit-box;
    overflow: hidden;
    padding: 0;
    color: #ffffff;
    font-size: 0.96rem;
    line-height: 1.28;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    white-space: normal;
}

.social-preview-template--facebook.social-preview-format--reel .ai-text-social-preview__body {
    right: 76px;
    font-size: 0.98rem;
}

.ai-text-social-preview__link {
    display: grid;
    gap: 2px;
    padding: 10px 16px 14px;
    background: color-mix(in srgb, var(--app-surface-muted) 46%, var(--app-surface) 54%);
    color: var(--app-muted);
    font-size: 0.72rem;
    line-height: 1.25;
}

.social-preview-template--facebook .ai-text-social-preview__link {
    text-transform: none;
}

.social-preview-template--instagram .ai-text-social-preview__link {
    order: 5;
    padding: 8px 0 0;
    background: transparent;
    border-top: 0;
}

.social-preview-template--x .ai-text-social-preview__link {
    margin: 12px 0 0;
    border: 1px solid var(--app-border);
    border-radius: 14px;
    background: transparent;
}

.social-preview-template--youtube .ai-text-social-preview__link {
    order: 5;
    padding: 8px 0 0 56px;
    background: transparent;
    color: var(--app-muted);
}

.social-preview-template--linkedin .ai-text-social-preview__link {
    padding: 8px 18px 10px;
    background: transparent;
    border-bottom: 1px solid var(--app-border);
}

.social-preview-template--pinterest .ai-text-social-preview__link {
    order: 5;
    padding: 8px 18px 14px;
    background: transparent;
    border-bottom: 1px solid var(--app-border);
}

.social-preview-template--tiktok .ai-text-social-preview__link {
    display: none;
}

.ai-text-social-preview__link strong {
    min-width: 0;
    overflow: hidden;
    color: var(--app-heading);
    font-size: 0.8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-text-social-preview__mock-actions {
    display: none;
}

.social-preview-template--instagram .ai-text-social-preview__mock-actions {
    display: flex;
    order: 3;
    gap: 18px;
    padding: 14px 14px 0;
    color: var(--app-heading);
    font-size: 1.35rem;
}

.social-preview-template--instagram .ai-text-social-preview__mock-actions span:last-child {
    margin-left: auto;
}

.social-preview-template--instagram.social-preview-format--story .ai-text-social-preview__header {
    position: absolute;
    top: 18px;
    right: 18px;
    left: 18px;
    z-index: 3;
    padding: 0;
}

.social-preview-template--instagram.social-preview-format--reel .ai-text-social-preview__header {
    position: absolute;
    right: 74px;
    bottom: 112px;
    left: 18px;
    z-index: 3;
    padding: 0;
}

.social-preview-template--instagram.social-preview-format--story .ai-text-social-preview__avatar,
.social-preview-template--instagram.social-preview-format--reel .ai-text-social-preview__avatar {
    border-color: rgba(255, 255, 255, 0.34);
    background: rgba(255, 255, 255, 0.92);
    color: var(--preview-brand);
}

.social-preview-template--instagram.social-preview-format--story .ai-text-social-preview__identity,
.social-preview-template--instagram.social-preview-format--reel .ai-text-social-preview__identity {
    color: rgba(255, 255, 255, 0.82);
}

.social-preview-template--instagram.social-preview-format--story .ai-text-social-preview__identity strong,
.social-preview-template--instagram.social-preview-format--reel .ai-text-social-preview__identity strong {
    color: #ffffff;
}

.social-preview-template--instagram.social-preview-format--story .ai-text-social-preview__mock-actions {
    display: none;
}

.social-preview-template--instagram.social-preview-format--reel .ai-text-social-preview__mock-actions {
    position: absolute;
    right: 14px;
    bottom: 58px;
    z-index: 3;
    display: grid;
    gap: 14px;
    padding: 0;
    color: #ffffff;
    font-size: 0;
}

.social-preview-template--instagram.social-preview-format--reel .ai-text-social-preview__mock-actions span {
    display: grid;
    justify-items: center;
    gap: 4px;
    min-width: 44px;
    color: #ffffff;
    font-size: 0;
    font-weight: 850;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.social-preview-template--instagram.social-preview-format--reel .ai-text-social-preview__mock-actions .bi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--app-radius-pill);
    background: rgba(255, 255, 255, 0.92);
    color: #111827;
    font-size: 1.25rem;
    text-shadow: none;
}

.social-preview-template--facebook .ai-text-social-preview__mock-actions {
    display: flex;
    justify-content: space-around;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--app-border);
    color: var(--app-muted);
    font-size: 0.85rem;
    font-weight: 800;
}

.social-preview-template--facebook.social-preview-format--reel .ai-text-social-preview__mock-actions,
.social-preview-template--facebook.social-preview-format--story .ai-text-social-preview__mock-actions {
    position: absolute;
    right: 14px;
    bottom: 58px;
    z-index: 3;
    display: grid;
    gap: 14px;
    padding: 0;
    border-top: 0;
    color: #ffffff;
    font-size: 0;
}

.social-preview-template--facebook.social-preview-format--story .ai-text-social-preview__mock-actions {
    display: none;
}

.social-preview-template--facebook.social-preview-format--reel .ai-text-social-preview__mock-actions span,
.social-preview-template--facebook.social-preview-format--story .ai-text-social-preview__mock-actions span {
    display: grid;
    justify-items: center;
    gap: 4px;
    min-width: 44px;
    color: #ffffff;
    font-size: 0;
    font-weight: 850;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.social-preview-template--facebook.social-preview-format--reel .ai-text-social-preview__mock-actions .bi,
.social-preview-template--facebook.social-preview-format--story .ai-text-social-preview__mock-actions .bi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--app-radius-pill);
    background: rgba(255, 255, 255, 0.92);
    color: #111827;
    font-size: 1.25rem;
    text-shadow: none;
}

.social-preview-template--x .ai-text-social-preview__mock-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 0 14px;
    padding: 10px 0 12px;
    border-top: 0;
    color: var(--app-muted);
    font-size: 1rem;
}

.social-preview-template--youtube .ai-text-social-preview__mock-actions {
    display: none;
}

.social-preview-template--linkedin .ai-text-social-preview__mock-actions {
    display: flex;
    justify-content: space-around;
    gap: 12px;
    padding: 11px 16px 13px;
    border-top: 0;
    color: var(--app-muted);
    font-size: 0.86rem;
    font-weight: 800;
}

.social-preview-template--pinterest .ai-text-social-preview__mock-actions {
    display: flex;
    order: 1;
    align-items: center;
    gap: 22px;
    padding: 16px 18px 12px;
    color: var(--app-heading);
    font-size: 1.35rem;
}

.social-preview-template--tiktok .ai-text-social-preview__mock-actions {
    position: absolute;
    right: 14px;
    bottom: 58px;
    z-index: 3;
    display: grid;
    gap: 14px;
    padding: 0;
    color: #ffffff;
    font-size: 1.18rem;
}

.social-preview-template--tiktok .ai-text-social-preview__mock-actions span {
    display: grid;
    justify-items: center;
    gap: 4px;
    min-width: 44px;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 850;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.social-preview-template--tiktok .ai-text-social-preview__mock-actions .bi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--app-radius-pill);
    background: rgba(255, 255, 255, 0.92);
    color: #111827;
    font-size: 1.25rem;
    text-shadow: none;
}

.social-preview-template--tiktok .ai-text-social-preview__mock-actions span:first-child .bi,
.social-preview-template--tiktok .ai-text-social-preview__mock-actions span:last-child .bi {
    background: #4b5563;
    color: #ffffff;
}

.social-preview-template--pinterest .ai-text-social-preview__mock-actions span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.social-preview-template--pinterest .ai-text-social-preview__mock-actions span:last-child {
    margin-left: auto;
    padding: 10px 18px;
    border-radius: var(--app-radius-pill);
    background: var(--preview-brand);
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 850;
}

.social-preview-template--linkedin .ai-text-social-preview__mock-actions span {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.social-preview-template--linkedin .ai-text-social-preview__mock-actions .bi {
    font-size: 1.15rem;
}

.ai-text-social-preview__x-meta {
    padding: 16px 0 14px;
    border-bottom: 1px solid var(--app-border);
    color: var(--app-muted);
    font-size: 0.95rem;
    line-height: 1.25;
}

.social-preview-template--youtube .ai-text-social-preview__x-meta {
    order: 4;
    padding: 6px 0 0 56px;
    border-bottom: 0;
    color: var(--app-muted);
    font-size: 0.95rem;
}

.social-preview-template--linkedin .ai-text-social-preview__x-meta {
    padding: 9px 18px;
    border-top: 0;
    border-bottom: 1px solid var(--app-border);
    color: var(--app-muted);
    font-size: 0.86rem;
    text-align: right;
}

.social-preview-template--pinterest .ai-text-social-preview__x-meta {
    order: 6;
    padding: 14px 18px;
    border-bottom: 0;
    color: var(--app-heading);
    font-size: 0.9rem;
    font-weight: 800;
}

.social-preview-template--tiktok .ai-text-social-preview__x-meta {
    position: absolute;
    right: 76px;
    bottom: 14px;
    left: 18px;
    z-index: 3;
    padding: 0;
    border-bottom: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.78rem;
}

.social-preview-template--youtube .ai-text-social-preview__header {
    order: 2;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px 0;
}

.social-preview-template--youtube.social-preview-format--community-post .ai-text-social-preview__header {
    order: 1;
    padding: 14px 16px 0;
}

.social-preview-template--youtube.social-preview-format--short .ai-text-social-preview__header {
    position: absolute;
    top: 18px;
    right: 18px;
    left: 18px;
    z-index: 3;
    padding: 0;
}

.social-preview-template--youtube .ai-text-social-preview__avatar {
    width: 38px;
    height: 38px;
    border: 0;
    background: var(--preview-brand-soft);
    color: var(--preview-brand);
    font-size: 1rem;
}

.social-preview-template--youtube .ai-text-social-preview__identity {
    padding-top: 1px;
    font-size: 0.82rem;
}

.social-preview-template--youtube .ai-text-social-preview__identity strong {
    color: var(--app-muted);
    font-size: 0.82rem;
    font-weight: 750;
}

.social-preview-template--youtube.social-preview-format--short .ai-text-social-preview__avatar {
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--preview-brand);
    font-size: 1rem;
}

.social-preview-template--youtube.social-preview-format--short .ai-text-social-preview__identity {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.78rem;
}

.social-preview-template--youtube.social-preview-format--short .ai-text-social-preview__identity strong {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 850;
}

.social-preview-template--youtube.social-preview-format--short .ai-text-social-preview__body {
    position: absolute;
    right: 18px;
    bottom: 42px;
    left: 18px;
    z-index: 3;
    display: -webkit-box;
    overflow: hidden;
    padding: 0;
    color: #ffffff;
    font-size: 0.96rem;
    line-height: 1.28;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    white-space: normal;
}

.social-preview-template--linkedin .ai-text-social-preview__header {
    align-items: flex-start;
    padding: 16px 18px 4px;
}

.social-preview-template--linkedin .ai-text-social-preview__avatar {
    width: 48px;
    height: 48px;
    border: 0;
    background: var(--preview-brand-soft);
    color: var(--preview-brand);
    font-size: 1.25rem;
}

.social-preview-template--linkedin .ai-text-social-preview__identity {
    padding-top: 2px;
    font-size: 0.82rem;
}

.social-preview-template--linkedin .ai-text-social-preview__identity strong {
    font-size: 1rem;
    font-weight: 850;
}

.social-preview-template--pinterest .ai-text-social-preview__header {
    order: 4;
    padding: 8px 18px 0;
}

.social-preview-template--tiktok .ai-text-social-preview__header {
    position: absolute;
    right: 76px;
    bottom: 178px;
    left: 18px;
    z-index: 3;
    padding: 0;
}

.social-preview-template--tiktok .ai-text-social-preview__avatar {
    display: none;
}

.social-preview-template--tiktok .ai-text-social-preview__identity {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.78rem;
}

.social-preview-template--tiktok .ai-text-social-preview__identity strong {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 850;
}

.social-preview-template--pinterest .ai-text-social-preview__avatar {
    width: 30px;
    height: 30px;
    border: 0;
    background: var(--preview-brand-soft);
    color: var(--preview-brand);
    font-size: 0.9rem;
}

.social-preview-template--pinterest .ai-text-social-preview__identity strong {
    font-size: 0.9rem;
}

.social-preview-template--facebook:not(.social-preview-format--reel) .ai-text-social-preview__mock-actions span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
}

.ai-text-draft-card__strategy-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.ai-text-draft-card__strategy-goal {
    flex: 0 0 auto;
}

.ai-text-draft-card__strategy-info {
    margin-inline-start: auto;
}

.ai-text-draft-card__reference-button--missing {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.ai-text-draft-card__metadata-popover {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 12px;
    margin: 0;
    font-size: 0.85rem;
}

.ai-text-draft-card__metadata-popover dt {
    color: var(--app-heading);
    font-weight: 600;
}

.ai-text-draft-card__metadata-popover dd {
    margin: 0;
    color: var(--app-muted);
}

.modal-social-icon {
    font-size: 1.2em;
}

.modal-social-label {
    font-size: 0.85em;
    font-weight: 500;
}

.modal-context-box {
    background: var(--app-surface-muted);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    padding: 14px 16px;
}

.text-prewrap {
    white-space: pre-wrap;
}

.ai-text-draft-card__compact-preview {
    display: none;
}

.ai-text-draft-card__compact-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    padding: 4px;
    border: 0;
    background: transparent;
    color: var(--app-muted);
    cursor: pointer;
    line-height: 1;
}

.ai-text-draft-card__compact-toggle:hover,
.ai-text-draft-card__compact-toggle:focus-visible {
    color: var(--app-heading);
}

.ai-text-draft-card__compact-toggle--collapse {
    display: none;
}

.ai-text-draft-card__compact-thumb {
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    object-fit: cover;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
}

.ai-text-draft-card__compact-thumb--missing,
.ai-text-draft-card__compact-thumb--no-media {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--app-surface-muted);
    color: var(--app-muted);
    font-size: 1.25rem;
}

.ai-text-draft-card__compact-snippet {
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
    color: var(--app-muted);
    font-size: 0.88rem;
    line-height: 1.35;
    text-overflow: clip;
    white-space: normal;
}

.ai-text-draft-card.ai-text-draft-card--compact .planner-day-detail-grid,
.ai-text-draft-card.ai-text-draft-card--compact .ai-text-draft-card__generation-meta,
.ai-text-draft-card.ai-text-draft-card--compact .ai-text-draft-card__caption-header,
.ai-text-draft-card.ai-text-draft-card--compact .ai-text-draft-card__images,
.ai-text-draft-card.ai-text-draft-card--compact .ai-text-draft-card__videos,
.ai-text-draft-card.ai-text-draft-card--compact .ai-text-draft-card__actions-bar,
.ai-text-draft-card.ai-text-draft-card--compact .planner-day-detail-strategy-line {
    display: none !important;
}

.ai-text-draft-card.ai-text-draft-card--compact .ai-text-draft-card__compact-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    border-top: 1px solid var(--app-border);
}

.ai-text-draft-card.ai-text-draft-card--compact .planner-day-detail-topline {
    gap: 8px;
}

.ai-text-draft-card.ai-text-draft-card--compact {
    max-width: 100%;
    overflow: hidden;
}

.ai-text-draft-card.ai-text-draft-card--compact .planner-day-detail-title {
    font-size: 1rem;
}

.ai-text-draft-card.ai-text-draft-card--compact .planner-day-detail-title > span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-text-draft-card.ai-text-draft-card--compact .ai-text-draft-card__meta {
    flex: 1 1 100%;
    justify-content: flex-start;
    min-width: 0;
}

.ai-text-draft.ai-text-draft--compact-mode .ai-text-draft-card.ai-text-draft-card--expanded-override .ai-text-draft-card__compact-toggle--collapse {
    display: inline-flex;
}

.ai-text-image-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.ai-text-image-section-title {
    flex: 1 1 auto;
    min-width: 0;
}

.ai-text-image-count-inline {
    margin-left: 6px;
    color: var(--app-muted);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.ai-text-image-section-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.ai-text-image-section-actions .ai-text-image-upload-form,
.ai-text-image-section-actions .ai-text-image-generate-form {
    margin: 0;
}

.ai-text-image-gallery,
.ai-text-video-gallery {
    display: flex;
    gap: 8px;
    max-width: 100%;
    overflow-x: auto;
    padding: 2px 2px 8px;
    scrollbar-width: thin;
}

.ai-text-video-add-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

.ai-text-video-url-input {
    width: min(340px, 100%);
}

.ai-text-image-thumb,
.ai-text-video-thumb {
    position: relative;
    flex: 0 0 auto;
    height: 136px;
    overflow: hidden;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface);
    color: var(--app-heading);
    padding: 0;
}

.ai-text-image-thumb {
    width: 136px;
    box-shadow: none;
    cursor: pointer;
}

.ai-text-video-thumb {
    width: 136px;
    cursor: pointer;
}

.ai-text-video-thumb.is-selected {
    border-color: var(--social-strong, var(--app-accent));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--social-strong, var(--app-accent)) 26%, transparent);
}

.ai-text-video-thumb__img,
.ai-text-video-thumb__placeholder {
    display: block;
    width: 100%;
    height: 100%;
}

.ai-text-video-thumb__img {
    object-fit: cover;
}

.ai-text-video-thumb__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--app-surface-muted);
    color: var(--app-muted);
    font-size: 2rem;
}

.ai-text-video-thumb__play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    color: color-mix(in srgb, #ffffff 88%, transparent);
    font-size: 2.2rem;
    line-height: 1;
    pointer-events: none;
    text-shadow: 0 1px 8px color-mix(in srgb, #000000 72%, transparent);
}

.ai-text-image-upload-form,
.ai-text-image-generate-form {
    display: inline-flex;
    flex: 0 0 auto;
    margin: 0;
}

.ai-text-image-thumb:disabled {
    cursor: default;
}

.ai-text-image-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ai-text-image-thumb.is-selected {
    border-color: var(--social-strong, var(--app-accent));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--social-strong, var(--app-accent)) 26%, transparent);
}

.ai-text-image-thumb--no-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px;
    border: 1px dashed var(--app-border);
    background: var(--app-surface-muted);
    color: var(--app-muted);
    text-align: center;
}

.ai-text-image-thumb--no-image .ai-text-image-thumb__no-image-icon {
    font-size: 1.6rem;
    line-height: 1;
}

.ai-text-image-thumb--no-image .ai-text-image-thumb__no-image-label {
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.1;
}

.ai-text-image-thumb--no-image.is-selected {
    border-color: var(--social-strong, var(--app-ai-border));
    border-style: solid;
    background: var(--social-surface, var(--app-ai-bg));
    color: var(--social-strong, var(--app-ai-text));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--social-strong, var(--app-ai-text)) 26%, transparent);
}

.ai-text-image-thumb__meta,
.ai-text-video-thumb__badge {
    position: absolute;
    right: 4px;
    bottom: 4px;
    left: 4px;
    overflow: hidden;
    padding: 2px 4px;
    border-radius: var(--app-radius);
    background: rgba(15, 23, 42, 0.72);
    color: #ffffff;
    font-size: 0.58rem;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-text-image-thumb__check,
.ai-text-image-thumb__select,
.ai-text-image-thumb__delete {
    position: absolute;
    top: 4px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--app-radius);
    line-height: 1;
}

.ai-text-image-thumb__check {
    border: 0;
    left: 4px;
    background: var(--social-strong, var(--app-accent));
    color: #ffffff;
    font-size: 1rem;
}

button.ai-text-image-thumb__check {
    cursor: pointer;
}

button.ai-text-image-thumb__check:disabled {
    cursor: wait;
    opacity: 0.82;
}

.ai-text-image-thumb__select {
    left: 4px;
    border: 1px solid rgba(255, 255, 255, 0.78);
    background: rgba(15, 23, 42, 0.72);
    color: #ffffff;
    font-size: 0.95rem;
    opacity: 0;
    transition: opacity 0.16s ease, background 0.16s ease;
}

.ai-text-image-thumb__select:hover,
.ai-text-image-thumb__select:focus-visible {
    background: var(--social-strong, var(--app-accent));
}

.ai-text-image-thumb__select:disabled {
    cursor: wait;
    opacity: 0.8;
}

.ai-text-image-thumb__delete {
    right: 4px;
    border: 1px solid rgba(255, 255, 255, 0.78);
    background: rgba(15, 23, 42, 0.72);
    color: #ffffff;
    font-size: 0.9rem;
    opacity: 0;
    transition: opacity 0.16s ease;
}

.ai-text-image-thumb--skeleton {
    border: 0;
    background: linear-gradient(
        90deg,
        var(--app-surface-muted) 0%,
        color-mix(in srgb, var(--app-surface-muted) 66%, #ffffff 34%) 45%,
        var(--app-surface-muted) 100%
    );
    background-size: 180% 100%;
    animation: app-shimmer 1.1s ease-in-out infinite;
}

.ai-text-image-thumb:hover .ai-text-image-thumb__delete,
.ai-text-image-thumb:focus-visible .ai-text-image-thumb__delete,
.ai-text-image-thumb:hover .ai-text-image-thumb__select,
.ai-text-image-thumb:focus-visible .ai-text-image-thumb__select,
.ai-text-video-thumb:hover .ai-text-image-thumb__select,
.ai-text-video-thumb:focus-visible .ai-text-image-thumb__select,
.ai-text-video-thumb:hover .ai-text-image-thumb__delete,
.ai-text-video-thumb:focus-visible .ai-text-image-thumb__delete {
    opacity: 1;
}

.ai-text-video-thumb .ai-text-image-thumb__select,
.ai-text-video-thumb .ai-text-image-thumb__delete {
    opacity: 1;
}

.ai-text-image-thumb .ai-text-image-thumb__select,
.ai-text-image-thumb .ai-text-image-thumb__delete {
    opacity: 1;
}

.ai-text-image-upload-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.ai-text-image-loading {
    display: flex;
    align-items: center;
    min-height: 120px;
    color: var(--app-muted);
    font-size: 0.85rem;
}

.ai-text-image-inline-flash {
    width: fit-content;
    max-width: 100%;
    margin: -4px 0 0;
    padding: 6px 10px;
    font-size: 0.78rem;
    line-height: 1.25;
    transition: opacity 0.22s ease;
}

.ai-text-image-inline-flash .app-alert__icon {
    font-size: 0.9rem;
}

.ai-text-image-inline-flash.is-fading {
    opacity: 0;
}

.app-action-toast-stack {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1045;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: min(360px, calc(100vw - 36px));
    pointer-events: none;
}

.app-action-toast {
    padding: 12px 14px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface);
    color: var(--app-text);
    box-shadow: var(--app-shadow-lg);
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.app-action-toast.is-success {
    border-color: var(--app-success-border);
    background: var(--app-success-bg);
    color: var(--app-success-text);
}

.app-action-toast.is-error {
    border-color: var(--app-error-border);
    background: var(--app-error-bg);
    color: var(--app-error-text);
}

.app-action-toast.is-info {
    border-color: var(--app-info-border);
    background: var(--app-info-bg);
    color: var(--app-info-text);
}

.app-action-toast.is-hiding {
    opacity: 0;
    transform: translateY(8px);
}

.ai-text-image-preview-figure {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    min-height: 220px;
    background: var(--app-surface-muted);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    padding: 12px;
}

.ai-text-media-preview-dialog {
    --bs-modal-width: min(1760px, calc(100vw - 20px));
    max-width: min(1760px, calc(100vw - 20px));
}

.ai-text-image-preview-figure img {
    display: block;
    max-width: 100%;
    max-height: 82vh;
    object-fit: contain;
}

.ai-text-video-preview-frame {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}

.ai-text-video-preview-frame iframe,
.ai-text-video-preview-frame video {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 575.98px) {
    .ai-text-media-preview-dialog {
        --bs-modal-width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
        margin-right: auto;
        margin-left: auto;
    }

    .ai-text-image-preview-figure img {
        max-height: 72vh;
    }
}

@keyframes app-shimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

.planner-month-analysis {
    display: grid;
    gap: 16px;
}

.planner-month-analysis--compact {
    gap: 12px;
}

.planner-month-analysis--compact .planner-analysis-card {
    padding: 16px;
}

.planner-month-analysis--compact .planner-analysis-accent {
    height: 4px;
    margin: -16px -16px 12px;
}

.planner-month-analysis--compact .planner-analysis-title {
    margin-bottom: 6px;
}

.planner-month-analysis--compact .planner-analysis-value {
    font-size: 1.22rem;
}

.planner-month-analysis--compact .planner-analysis-subvalue {
    margin-top: 4px;
    font-size: 0.84rem;
}

.planner-month-analysis--compact .planner-analysis-copy {
    margin-bottom: 10px;
    gap: 4px;
}

.planner-month-analysis--compact .planner-analysis-copy-primary {
    line-height: 1.3;
}

.planner-month-analysis--compact .planner-analysis-copy-secondary {
    font-size: 0.86rem;
    line-height: 1.35;
}

.planner-month-analysis--compact .planner-analysis-list {
    gap: 8px;
}

.planner-month-analysis--compact .planner-analysis-list-item {
    gap: 4px;
}

.planner-month-analysis--compact .planner-analysis-list-row {
    gap: 10px;
}

.planner-month-analysis--compact .planner-analysis-list-label {
    line-height: 1.25;
}

.planner-month-analysis--compact .planner-analysis-list-value {
    font-size: 0.82rem;
}

.planner-month-analysis--compact .planner-analysis-bar {
    height: 6px;
}

.planner-month-analysis--compact .planner-analysis-consistency {
    gap: 6px;
    padding: 2px 0 0;
}

.planner-month-analysis--compact .planner-analysis-consistency-title {
    font-size: 1rem;
    line-height: 1.25;
}

.planner-month-analysis--compact .planner-analysis-consistency-text {
    font-size: 0.88rem;
    line-height: 1.45;
}

.planner-analysis-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.planner-analysis-grid-1 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.planner-analysis-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.planner-weekdays,
.planner-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.planner-weekdays {
    background: var(--app-surface-muted);
    border-bottom: 1px solid var(--app-border);
}

.planner-weekday {
    padding: 15px 16px;
    font-size: var(--app-text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--app-muted);
    border-right: 1px solid var(--app-border);
}

.planner-weekday:last-child {
    border-right: 0;
}

.planner-day {
    min-height: 200px;
    padding: 12px;
    border-right: 1px solid var(--app-border);
    border-bottom: 1px solid var(--app-border);
    background: var(--app-surface);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    min-width: 0;
}

.planner-week .planner-day:last-child {
    border-right: 0;
}

.planner-week:last-child .planner-day {
    border-bottom: 0;
}

.planner-day.is-empty {
    background: var(--app-surface);
}

.planner-day:not(.is-empty):hover {
    background: var(--app-surface-muted);
}

.planner-day.is-selected {
    background: var(--app-selected-wash-soft) !important;
    box-shadow: inset var(--tint-strip-width) 0 0 var(--app-selected-strip);
}

.planner-day.is-selected .planner-day-number {
    color: var(--app-heading);
}

.planner-day.is-selected .planner-day-count {
    color: #475569;
}

.planner-day-topline {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.planner-day-number {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--app-heading);
    line-height: 1;
}

.planner-day-count {
    font-size: 0.74rem;
    color: var(--app-muted);
    padding-top: 2px;
}

.planner-day-link {
    margin-top: auto;
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    text-decoration: none;
    color: #1e3a8a;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.planner-day-link:hover,
.planner-day-link:focus {
    text-decoration: none;
    color: var(--app-heading);
    background: transparent;
    box-shadow: none;
}

.planner-calendar-mobile-list {
    display: none;
}

.planner-calendar-mobile-day {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface);
}

.planner-calendar-mobile-day + .planner-calendar-mobile-day {
    margin-top: 12px;
}

.planner-calendar-mobile-day.is-selected {
    border-color: var(--app-selected-border);
    background: var(--app-selected-wash-soft);
}

.planner-calendar-mobile-day__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--app-border);
    background: var(--app-surface-muted);
}

.planner-calendar-mobile-day__count {
    flex: 0 0 auto;
    color: var(--app-muted);
    font-size: var(--app-text-xs);
    font-weight: 800;
    text-transform: uppercase;
}

.planner-calendar-mobile-day__items {
    display: grid;
    gap: 0;
}

.planner-calendar-mobile-item {
    --calendar-chip-accent: var(--tint-color, var(--app-border));
    --calendar-chip-accent-dark: var(--tint-color-dark, var(--calendar-chip-accent));
    --calendar-chip-surface: var(--tint-surface, var(--app-surface));
    --calendar-chip-border: var(--app-border);
    --calendar-chip-strong: color-mix(in srgb, var(--calendar-chip-accent) 72%, var(--app-heading) 28%);
    display: grid;
    gap: 4px;
    padding: 8px 10px;
    border-left: var(--tint-strip-width) solid var(--calendar-chip-strong);
    background: var(--calendar-chip-surface);
    color: var(--calendar-chip-strong);
}

.planner-calendar-mobile-item + .planner-calendar-mobile-item {
    border-top: 1px solid var(--calendar-chip-border);
}

.planner-calendar-mobile-item__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.planner-calendar-mobile-item__social {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: currentColor;
    font-size: var(--app-text-xs);
    font-weight: 800;
}

.planner-calendar-mobile-item__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.planner-calendar-mobile-day__link {
    width: 100%;
    padding: 10px 12px;
    border-top: 1px solid var(--app-border);
    justify-content: center;
}

.app-inline-link {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: var(--app-primary);
    text-decoration: none;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.app-inline-link:hover,
.app-inline-link:focus {
    color: var(--app-primary-hover);
    text-decoration: none;
}

.planner-day-detail-list {
    display: grid;
    gap: 16px;
}

.planner-day-detail-section,
.planner-calendar-card {
    scroll-margin-top: 20px;
}

.planner-day-detail-section.is-open {
    box-shadow: none;
    border: 1px solid #dce2e8;
    border-radius: var(--app-radius);
}

.planner-day-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.planner-day-detail-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.planner-day-detail-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: -8px 0 18px;
}

.planner-day-detail-legend__label {
    color: var(--app-muted);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    line-height: 1;
    text-transform: uppercase;
}

.planner-day-detail-eyebrow {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--app-muted);
    margin-bottom: 6px;
}

.planner-day-detail-subtitle {
    margin-top: 6px;
    color: var(--app-muted);
    font-size: 0.94rem;
}

.planner-day-detail-topline {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.planner-day-detail-topline > div:first-child {
    flex: 1 1 0;
    min-width: 0;
}

.planner-day-detail-title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-weight: 800;
    font-size: 1.12rem;
    color: currentColor;
    margin-bottom: 4px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: normal;
    overflow-wrap: anywhere;
    line-height: 1.28;
}

.planner-day-detail-summary {
    margin-top: 2px;
    color: var(--app-muted);
    font-size: 0.98rem;
    line-height: 1.48;
}

.planner-day-detail-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    min-width: 1.35rem;
    line-height: 1;
    font-size: 1.35rem;
    color: currentColor;
}

.planner-day-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.planner-day-detail-strategy-line {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 0.9rem;
    line-height: 1.4;
    color: #475569;
}

.planner-day-detail-compact-line {
    display: none;
    margin-top: 6px;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    color: var(--app-muted);
    font-size: 0.82rem;
    line-height: 1.35;
}

.planner-day-detail-compact-line strong {
    color: var(--app-heading);
    font-weight: 800;
}

.planner-day-detail-strategy-line strong {
    color: var(--app-heading);
    font-weight: 800;
}

.planner-day-detail-strategy-separator {
    color: #9ca3af;
}

.planner-day-detail-strategy-line a {
    color: var(--social-strong, var(--app-heading));
    overflow-wrap: anywhere;
}

.planner-day-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.planner-debug-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.planner-debug-summary-card {
    border: 1px solid #e5e7eb;
    border-radius: var(--app-radius);
    padding: 14px;
}

.ai-text-draft-list {
    display: grid;
    gap: 12px;
}

.ai-progress-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.ai-progress-card__counts {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--app-heading);
    white-space: nowrap;
}

.ai-progress-card__bar {
    height: 1rem;
    margin-top: 1rem;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface-muted);
}

.ai-progress-card__bar-fill {
    height: 100%;
    border-radius: var(--app-radius);
    background-color: #3b82f6;
    box-shadow: inset 0 -1px 0 rgba(15, 23, 42, 0.12);
    transition: width 180ms ease;
}

@media (max-width: 767.98px) {
    .ai-progress-card__header {
        flex-direction: column;
    }
}

.planner-debug-summary-title {
    font-size: 0.74rem;
    color: var(--app-muted);
    margin-bottom: 6px;
    font-weight: 500;
}

.planner-debug-summary-value {
    color: var(--app-heading);
    font-weight: 400;
    font-size: 0.82rem;
    line-height: 1.5;
}

@media (max-width: 991.98px) {
    .post-calendar-cell {
        min-height: 80px;
    }

    .post-calendar-pill__thumb {
        display: none;
    }

    .post-calendar-pill__thumb-wrap {
        display: none;
    }

    .config-page-grid {
        grid-template-columns: 1fr;
        max-width: none;
    }

    .config-color-control {
        align-items: stretch;
    }

    .config-color-code {
        flex: 1 1 auto;
    }

    .page-detail-list,
    .page-section-grid {
        grid-template-columns: 1fr;
    }

    .planner-meta {
        grid-template-columns: 1fr;
    }

    .planner-day-detail-grid,
    .planner-debug-summary,
    .planner-analysis-grid-1,
    .planner-analysis-grid-3,
    .planner-analysis-grid-2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .project-switcher-list {
        grid-template-columns: 1fr;
    }

    .version-switcher-list {
        grid-template-columns: 1fr;
    }

    .page-header,
    .project-switcher-item,
    .version-switcher-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .version-switcher-item--dense {
        grid-template-columns: 1fr;
    }

    .project-switcher-item form,
    .project-switcher-item button,
    .version-switcher-item .btn-ui,
    .page-header a {
        width: 100%;
    }

    .version-switcher-item--dense .btn-ui {
        width: 100%;
    }

    .version-switcher-item--dense .version-switcher-actions {
        width: 100%;
        justify-content: flex-start;
        align-self: stretch;
    }

    .planner-toolbar,
    .planner-calendar-heading {
        flex-direction: column;
        align-items: flex-start;
    }

    .planner-controls-form {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .planner-controls-field {
        width: 100%;
        min-width: 0;
    }

    .planner-month-input {
        width: 100%;
    }

    .planner-day-detail-header,
    .planner-day-detail-topline {
        flex-direction: column;
        align-items: flex-start;
    }

    .planner-day-detail-topline > div:first-child {
        width: 100%;
    }

    .planner-day-detail-meta {
        width: 100%;
        justify-content: flex-start;
    }

    .planner-day-detail-title {
        font-size: 1.18rem;
    }

    .planner-day-detail-strategy-line {
        font-size: 0.84rem;
    }

    .planner-calendar-shell {
        overflow-x: auto;
    }

    .planner-weekdays,
    .planner-week {
        min-width: 920px;
    }

    .debug-signal-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .debug-score-topline {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 575.98px) {
    .planner-calendar-shell {
        display: none;
    }

    .planner-calendar-mobile-list {
        display: block;
    }

    .post-calendar-shell {
        display: none;
    }

    .post-calendar-mobile-list {
        display: block;
    }

    .page-shell {
        padding: 14px 10px 28px;
    }

    .page-topbar {
        padding: 20px;
        flex-direction: column;
        align-items: flex-start;
    }

    .page-actions {
        flex-direction: column;
    }

    .btn-ui {
        width: 100%;
    }

    .page-actions__separator {
        display: none;
    }

    .table-section-actions {
        align-items: stretch;
    }
}

@media (min-width: 768px) {
    .page-topbar {
        padding: 32px;
    }

    .page-card > .card-body,
    .card-soft > .card-body {
        padding: 32px !important;
    }
}

.page-card h1,
.page-card h2,
.page-card h3,
.page-card h4,
.page-card h5,
.card-soft h1,
.card-soft h2,
.card-soft h3,
.card-soft h4,
.card-soft h5,
.topbar h1,
.topbar h2,
.topbar h3,
.topbar h4,
.topbar h5,
.hero-title,
.section-title,
.planner-calendar-title,
.planner-day-detail-date,
.title,
.page-header h1 {
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--app-heading);
}

.section-title,
.page-section-header > h2 {
    font-size: var(--app-text-xl);
    line-height: 1.2;
}

.section-title {
    margin: 0 0 16px;
}

.page-section-header > h2 {
    margin-bottom: 0;
}

.card-soft .section-title,
.section-box .section-title {
    font-size: var(--app-text-lg);
    line-height: 1.25;
}

.app-header-brand {
    display: flex;
    align-items: center;
    min-width: 0;
}

.app-header-brand span,
.app-header-brand {
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    color: var(--app-heading);
    letter-spacing: -0.01em;
}

.app-header-context {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 0;
    font-size: 1rem;
    color: var(--app-heading);
}

.app-header-context > span,
.app-project-badge,
.app-user-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 9px 14px;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-left: var(--tint-strip-width) solid var(--app-primary);
    border-radius: var(--app-radius-sm);
    color: var(--app-heading);
    font-weight: 700;
    font-size: 0.88rem;
    line-height: 1.1;
    white-space: nowrap;
    max-width: 100%;
    box-shadow: none;
    text-decoration: none;
}

.app-header-context__icon,
.app-user-badge__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    min-width: 1.2rem;
    height: 1.2rem;
    font-size: 1.1rem;
    line-height: 1;
    flex: 0 0 auto;
    color: currentColor;
}

.app-header-context > .has-project-accent,
.app-project-badge.has-project-accent {
    border-left-color: var(--project-accent-light);
}

.app-header-context > .has-project-accent .app-header-context__icon,
.app-header-context > .has-project-accent .app-header-context__label,
.app-project-badge.has-project-accent .app-header-context__icon,
.app-project-badge.has-project-accent .app-header-context__label {
    color: var(--project-accent-light);
}

.app-header-context > .has-project-accent .app-header-context__label--account,
.app-project-badge.has-project-accent .app-header-context__label--account {
    color: var(--app-text-muted);
}

.app-header-context__label,
.app-user-badge__email {
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-header-context__stack {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    max-width: 260px;
}

.app-header-context__label {
    display: block;
    min-width: 0;
}

.app-header-context__label--project {
    font-weight: 700;
}

.app-header-context__label--account {
    color: var(--app-text-muted);
    font-size: 0.76rem;
    font-weight: 600;
}

.app-context-pill-action {
    cursor: pointer;
    transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.app-context-pill-action:hover,
.app-context-pill-action:focus-visible {
    border-color: color-mix(in srgb, var(--app-primary) 38%, var(--app-border) 62%);
    border-left-color: var(--app-primary);
    background: color-mix(in srgb, var(--app-primary) 7%, var(--app-surface) 93%);
    color: var(--app-primary-hover);
    text-decoration: none;
}

.app-project-badge.has-project-accent:hover,
.app-project-badge.has-project-accent:focus-visible {
    border-color: color-mix(in srgb, var(--project-accent-light) 34%, var(--app-border) 66%);
    border-left-color: var(--project-accent-light);
    background: color-mix(in srgb, var(--project-accent-light) 7%, var(--app-surface) 93%);
}

.app-context-pill-action:focus-visible {
    box-shadow: 0 0 0 3px var(--app-focus-ring);
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 28px;
}

.page-header > :first-child {
    min-width: 0;
    max-width: min(760px, 100%);
}

.page-title-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.page-title-with-icon__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    min-width: 1em;
    height: 1em;
    font-size: 1em;
    font-weight: inherit;
    line-height: 1;
    color: currentColor;
    flex: 0 0 auto;
    transform: translateY(0.02em);
}

.page-header-actions,
.topbar-actions {
    display: flex;
    gap: var(--app-header-actions-gap);
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    margin-left: auto;
}

.page-header-actions {
    padding-top: 6px;
    align-self: flex-start;
}

@media (max-width: 991.98px) {
    .config-active-provider-panel__meta {
        justify-content: flex-start;
        min-height: 0;
    }
}

.topbar-actions {
    align-items: center;
}

.small-note {
    font-size: 0.88rem;
}

.debug-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.section-copy-button {
    white-space: nowrap;
}

.page-card,
.card-soft,
.topbar,
.detail-item,
.section-box,
.project-item {
    background: var(--app-surface) !important;
    border: 1px solid var(--app-border) !important;
    border-radius: var(--bs-card-border-radius) !important;
    box-shadow: none !important;
}

.page-card {
    margin-bottom: 30px;
}

.page-card > .card-body,
.card-soft > .card-body {
    padding: 28px !important;
}

.page-hero-card {
    border-color: var(--app-border) !important;
    background: var(--app-gradient-surface-raised) !important;
    box-shadow: none !important;
}

.page-hero-card::before {
    opacity: 1 !important;
}

.page-hero-card .page-header {
    gap: 30px;
    align-items: flex-start;
}

.page-hero-card .app-header-context {
    margin-top: 0;
    margin-bottom: 18px !important;
}

.detail-item,
.project-item {
    background: var(--app-gradient-surface) !important;
    border: 1px solid var(--app-border) !important;
    box-shadow: none !important;
}

.section-box {
    background: var(--app-gradient-surface) !important;
}

.section-box--feature {
    position: relative;
    overflow: hidden;
    padding-left: 24px !important;
}

.section-box--feature h3 {
    font-size: var(--app-text-xl);
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 12px;
}

.section-box--feature::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: var(--app-accent);
}

.ai-texts-page .section-box--feature::before {
    content: none;
}

.ai-texts-page .section-box--feature {
    padding-left: 18px !important;
}

.section-box.page-nav-card {
    border-color: var(--app-border) !important;
    background: var(--app-surface) !important;
    box-shadow: inset 3px 0 0 var(--app-accent) !important;
}

.section-box.page-nav-card:hover,
.section-box.page-nav-card:focus-visible {
    border-color: color-mix(in srgb, var(--app-accent) 58%, var(--app-border) 42%) !important;
    background: color-mix(in srgb, var(--app-primary) 7%, var(--app-surface) 93%) !important;
    box-shadow:
        inset var(--tint-strip-width) 0 0 var(--app-accent),
        0 1px 2px rgba(15, 23, 42, 0.06) !important;
}

.section-box.page-nav-card:focus-visible {
    box-shadow:
        0 0 0 3px var(--app-focus-ring),
        inset var(--tint-strip-width) 0 0 var(--app-accent),
        0 1px 2px rgba(15, 23, 42, 0.06) !important;
}

.page-card--primary,
.section-box--primary {
    background: var(--app-gradient-surface) !important;
    border-color: var(--app-border) !important;
    box-shadow: none !important;
}

.page-card--secondary,
.section-box--secondary,
.detail-item--secondary {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    box-shadow: none !important;
}

.page-card--technical,
.section-box--technical,
.detail-item--technical {
    background: var(--app-surface-muted) !important;
    border-color: var(--app-border) !important;
    box-shadow: none !important;
}

.section-level-core {
    border-color: var(--app-border) !important;
    box-shadow: none !important;
}

.section-level-support {
    border-color: var(--app-border) !important;
    box-shadow: none !important;
}

.section-level-accessory {
    border-color: var(--app-border) !important;
    background: var(--app-surface) !important;
    box-shadow: none !important;
}

.section-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    flex-wrap: wrap;
}

.section-toolbar-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 10px 16px;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    color: var(--app-brand-blue);
    line-height: 1;
    background: var(--app-surface);
    border: 1px solid #d9dee5;
    border-radius: var(--app-radius-sm);
}

.section-heading {
    margin: 0 0 8px;
    font-size: 1.42rem;
    line-height: 1.18;
    font-weight: 700;
    color: var(--app-heading);
}

.section-copy {
    margin: 0;
    color: var(--app-text);
    line-height: 1.62;
    max-width: 72ch;
}

.section-copy--small {
    font-size: 0.93rem;
}

.page-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}

.page-summary-grid--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.page-summary-grid--top-spaced {
    margin-top: 20px;
}

.page-summary-grid--section-separated {
    margin-top: 14px;
}

@media (max-width: 991.98px) {
    .page-summary-grid,
    .page-summary-grid--compact {
        grid-template-columns: 1fr;
    }
}

/* Summary cards and eyebrow labels use the same brand-accent metadata treatment. */
.page-summary-card {
    position: relative;
    overflow: hidden;
    padding: 18px 18px 16px;
    border: 1px solid var(--app-border);
    border-radius: var(--bs-card-border-radius);
    background: var(--app-surface);
}

.page-summary-card--compact {
    padding: 16px 18px 14px;
}

.page-summary-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--app-strip-height-sm);
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    background: var(--app-gradient-primary);
    opacity: var(--app-strip-opacity-strong);
}

.page-summary-label {
    margin-bottom: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--app-brand-blue);
}

.page-summary-value {
    color: var(--app-heading);
    font-size: 1.16rem;
    font-weight: 800;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.page-summary-value--compact {
    font-size: 0.98rem;
    line-height: 1.25;
}

.page-summary-card--compact .page-summary-label {
    margin-bottom: 6px;
}

.page-summary-card--compact .page-summary-value {
    font-size: 1.08rem;
    line-height: 1.15;
}

.page-summary-value--list {
    font-size: 1rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.section-eyebrow--label {
    display: block;
    padding: 0;
    margin-bottom: 4px;
    font-size: 0.70rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--app-brand-blue);
    background: none;
    border: none;
    line-height: 1;
}

/* Compact scrollbar treatment shared across app pages. */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.32);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.54);
}

.page-summary-value--with-icon {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.page-summary-value--with-icon .bi {
    font-size: 1rem;
    color: var(--app-accent-strong);
}

.page-summary-copy {
    margin-top: 8px;
    color: var(--app-muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

.surface-note {
    background: var(--app-gradient-surface-raised);
    border: 1px solid #d9dee5;
    border-radius: var(--app-radius);
    padding: 14px 16px;
}

.surface-note--compact {
    padding: 12px 14px;
}

.surface-note strong {
    color: var(--app-heading);
}

.page-section-header {
    margin-bottom: 18px;
}

.page-section-header > p {
    margin: var(--app-space-6) 0 0;
}

.page-section-header .section-copy,
.page-section-header .small-note {
    max-width: 60ch;
}

.table,
.table-guided,
.review-table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: var(--app-surface-muted);
    --bs-table-hover-bg: var(--app-surface-muted);
    --bs-table-border-color: var(--bs-border-color);
    --app-table-header-bg: color-mix(in srgb, var(--app-primary) 7%, var(--app-surface-muted) 93%);
    --app-table-header-border: color-mix(in srgb, var(--app-primary) 24%, var(--bs-table-border-color) 76%);
    --app-table-header-text: var(--app-heading);
    margin-bottom: 0;
}

.table thead th,
.table-guided thead th,
.review-table thead th {
    background: var(--app-table-header-bg);
    color: var(--app-table-header-text);
    font-size: var(--app-text-sm);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-color: var(--app-table-header-border);
    padding: 13px 16px;
    vertical-align: middle;
}

.table tbody tr,
.table-guided tbody tr {
    transition: background-color 0.18s ease;
}

.table tbody tr:hover td:first-child,
.table-guided tbody tr:hover td:first-child {
    box-shadow: inset 3px 0 0 var(--app-primary);
}

.review-table {
    width: 100%;
    min-width: 1120px;
    margin: 0;
}

.review-table thead th {
    padding: 11px 12px;
}

.review-table tbody td {
    padding: 12px 12px;
    vertical-align: middle;
    background: var(--app-surface);
}

.review-table .col-check {
    text-align: center;
    white-space: nowrap;
}

.table-col-compact {
    width: 1%;
    white-space: nowrap;
}

.table-drag-col {
    text-align: center;
    white-space: nowrap;
}

.table tbody tr:hover,
.table-guided tbody tr:hover {
    background: var(--app-surface-muted);
}

.table tbody tr:hover td,
.table-guided tbody tr:hover td {
    background: var(--app-surface-muted) !important;
}

.table tbody td,
.table-guided tbody td {
    border-color: var(--bs-table-border-color);
    padding: 13px 16px;
    color: var(--app-text);
    vertical-align: middle;
}

.table-guided .cell-primary {
    font-size: 0.94rem;
    color: var(--app-heading);
    font-weight: 700;
    line-height: 1.32;
}

.table-guided .cell-secondary {
    font-size: 0.92rem;
    color: var(--app-muted);
    line-height: 1.42;
}

.table-wrap,
.review-table-wrap,
.table-responsive {
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow-x: auto;
    overflow-y: hidden;
}

.table input.form-control,
.table select.form-select,
.table-guided input.form-control,
.table-guided select.form-select,
.table textarea.form-control,
.table-guided textarea.form-control {
    font-size: 0.92rem;
}

.table input.form-control,
.table select.form-select,
.table-guided input.form-control,
.table-guided select.form-select {
    min-width: 120px;
    min-height: 42px;
    padding: 9px 10px;
}

.table td.text-center input.form-control,
.table td.text-center select.form-select,
.table-guided td.text-center input.form-control,
.table-guided td.text-center select.form-select {
    text-align: center;
}

.table td.text-center select.form-select,
.table-guided td.text-center select.form-select {
    text-align-last: center;
}

.table td.text-end input.form-control,
.table td.text-end select.form-select,
.table-guided td.text-end input.form-control,
.table-guided td.text-end select.form-select {
    text-align: right;
}

.table td.text-end select.form-select,
.table-guided td.text-end select.form-select {
    text-align-last: right;
}

.table textarea.form-control,
.table-guided textarea.form-control {
    width: 100%;
    min-width: 240px;
    height: 102px;
    min-height: 102px;
    padding: 11px 12px;
    line-height: 1.45;
    resize: vertical;
}

.review-table-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    min-width: 34px;
    height: 34px;
    border: 1px solid transparent;
    border-radius: var(--app-radius);
    background: transparent;
    color: var(--app-muted);
    cursor: grab;
}

.review-table-drag-handle:hover,
.review-table-drag-handle:focus {
    border-color: var(--app-border);
    background: var(--app-surface-muted);
    color: var(--app-heading);
}

.review-table-drag-handle:active {
    cursor: grabbing;
}

.review-table-drag-handle .bi {
    font-size: 1.08rem;
    line-height: 1;
}

.table tr.is-dragging > td,
.table-guided tr.is-dragging > td,
.review-table tr.is-dragging > td {
    background: var(--app-surface-muted) !important;
}

.review-table-check {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
}

.review-table-master {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #111827;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

.review-table-master-label {
    letter-spacing: 0.03em;
}

.review-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    font-size: 0.68rem;
    font-weight: 800;
    background: #111827;
    color: #fff;
    margin-right: 6px;
}

.review-table thead .col-check-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    color: #111;
}

.muted,
.small-note,
.project-meta {
    color: var(--app-muted) !important;
}

.btn-primary-ui,
.btn-login {
    background: #2563eb !important;
    color: #ffffff !important;
    border: 1px solid #2563eb !important;
    box-shadow: none !important;
}

.btn-primary-ui:hover,
.btn-login:hover {
    background: #1e3a8a !important;
    border-color: #1e3a8a !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.btn-secondary-ui {
    background: #ffffff !important;
    color: #1f3f85 !important;
    border: 1px solid #c9d1da !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
}

.btn-outline-ui {
    background: #ffffff !important;
    color: #1f3f85 !important;
    border: 1px solid #c5ced8 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
}

.btn-secondary-ui:hover {
    background: #f3f5f8 !important;
    color: #163572 !important;
    border-color: #b8c2cc !important;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.10) !important;
}

.btn-outline-ui:hover {
    background: #f3f5f8 !important;
    color: #163572 !important;
    border-color: #b0bac5 !important;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.10) !important;
}

.btn-subtle-ui {
    background: #ffffff !important;
    color: #1f2937 !important;
    border: 1px solid #d6dce3 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.btn-subtle-ui:hover {
    background: #f3f5f8 !important;
    color: #111827 !important;
    border-color: #c3c9d1 !important;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08) !important;
}

.btn-success-ui {
    background: #15803d !important;
    color: #ffffff !important;
    border: 1px solid #15803d !important;
    box-shadow: none !important;
}

.btn-success-ui:hover,
.btn-success-ui:focus,
.btn-success-ui:active {
    background: #14532d !important;
    border-color: #14532d !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.btn-success-subtle-ui {
    background: var(--app-success-bg) !important;
    color: var(--app-success-text) !important;
    border: 1px solid var(--app-success-border) !important;
    box-shadow: 0 1px 2px rgba(21, 128, 61, 0.06) !important;
}

.btn-success-subtle-ui:hover,
.btn-success-subtle-ui:focus,
.btn-success-subtle-ui:active {
    background: color-mix(in srgb, var(--app-success-text) 10%, var(--app-success-bg) 90%) !important;
    color: var(--app-success-text) !important;
    border-color: color-mix(in srgb, var(--app-success-text) 28%, var(--app-success-border) 72%) !important;
    box-shadow: 0 2px 4px rgba(21, 128, 61, 0.10) !important;
}

.btn-warning-ui {
    background: #b45309 !important;
    color: #ffffff !important;
    border: 1px solid #b45309 !important;
    box-shadow: none !important;
}

.btn-warning-ui:hover,
.btn-warning-ui:focus,
.btn-warning-ui:active {
    background: #92400e !important;
    border-color: #92400e !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.btn-warning-subtle-ui {
    background: var(--app-warning-bg) !important;
    color: var(--app-warning-text) !important;
    border: 1px solid var(--app-warning-border) !important;
    box-shadow: 0 1px 2px rgba(180, 83, 9, 0.06) !important;
}

.btn-warning-subtle-ui:hover,
.btn-warning-subtle-ui:focus,
.btn-warning-subtle-ui:active {
    background: color-mix(in srgb, var(--app-warning-text) 10%, var(--app-warning-bg) 90%) !important;
    color: var(--app-warning-text) !important;
    border-color: color-mix(in srgb, var(--app-warning-text) 28%, var(--app-warning-border) 72%) !important;
    box-shadow: 0 2px 4px rgba(180, 83, 9, 0.10) !important;
}

.btn-ai-ui {
    background: #6d28d9 !important;
    color: #ffffff !important;
    border: 1px solid #6d28d9 !important;
    box-shadow: none !important;
}

.btn-ai-ui:hover,
.btn-ai-ui:focus,
.btn-ai-ui:active {
    background: #4c1d95 !important;
    border-color: #4c1d95 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.btn-ai-subtle-ui {
    background: var(--app-ai-bg) !important;
    color: var(--app-ai-text) !important;
    border: 1px solid var(--app-ai-border) !important;
    box-shadow: 0 1px 2px rgba(109, 40, 217, 0.06) !important;
}

.btn-ai-subtle-ui:hover,
.btn-ai-subtle-ui:focus,
.btn-ai-subtle-ui:active {
    background: color-mix(in srgb, var(--app-ai-text) 10%, var(--app-ai-bg) 90%) !important;
    color: var(--app-ai-text) !important;
    border-color: color-mix(in srgb, var(--app-ai-text) 28%, var(--app-ai-border) 72%) !important;
    box-shadow: 0 2px 4px rgba(109, 40, 217, 0.10) !important;
}

.btn-danger-ui {
    background: #dc2626 !important;
    color: #ffffff !important;
    border: 1px solid #dc2626 !important;
    box-shadow: none !important;
}

.btn-danger-ui:hover,
.btn-danger-ui:focus,
.btn-danger-ui:active {
    background: #991b1b !important;
    color: #ffffff !important;
    border-color: #991b1b !important;
    box-shadow: none !important;
}

.btn-danger-subtle-ui {
    background: var(--app-error-bg) !important;
    color: var(--app-error-text) !important;
    border: 1px solid var(--app-error-border) !important;
    box-shadow: 0 1px 2px rgba(220, 38, 38, 0.06) !important;
}

.btn-danger-subtle-ui:hover,
.btn-danger-subtle-ui:focus,
.btn-danger-subtle-ui:active {
    background: color-mix(in srgb, var(--app-error-text) 10%, var(--app-error-bg) 90%) !important;
    color: var(--app-error-text) !important;
    border-color: color-mix(in srgb, var(--app-error-text) 28%, var(--app-error-border) 72%) !important;
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.10) !important;
}

.btn-ui,
.btn-login,
.btn-subtle-ui,
.btn-danger-ui,
.btn-danger-subtle-ui,
.btn-outline-ui,
.btn-primary-ui,
.btn-secondary-ui,
.btn-ai-ui,
.btn-ai-subtle-ui,
.btn-success-ui,
.btn-warning-ui,
.btn-warning-subtle-ui,
.btn-success-subtle-ui {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    min-height: 46px !important;
    padding: 12px 18px !important;
    line-height: 1.2;
    font-weight: 500 !important;
    vertical-align: middle;
    text-decoration: none !important;
    white-space: nowrap;
    border-radius: var(--bs-btn-border-radius) !important;
    transition: box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease !important;
}

.btn-ui:hover,
.btn-ui:focus,
.btn-ui:active,
.btn-login:hover,
.btn-login:focus,
.btn-login:active,
.btn-subtle-ui:hover,
.btn-subtle-ui:focus,
.btn-subtle-ui:active,
.btn-danger-subtle-ui:hover,
.btn-danger-subtle-ui:focus,
.btn-danger-subtle-ui:active,
.btn-outline-ui:hover,
.btn-outline-ui:focus,
.btn-outline-ui:active,
.btn-primary-ui:hover,
.btn-primary-ui:focus,
.btn-primary-ui:active,
.btn-secondary-ui:hover,
.btn-secondary-ui:focus,
.btn-secondary-ui:active,
.btn-ai-ui:hover,
.btn-ai-ui:focus,
.btn-ai-ui:active,
.btn-ai-subtle-ui:hover,
.btn-ai-subtle-ui:focus,
.btn-ai-subtle-ui:active,
.btn-success-ui:hover,
.btn-success-ui:focus,
.btn-success-ui:active,
.btn-warning-ui:hover,
.btn-warning-ui:focus,
.btn-warning-ui:active,
.btn-warning-subtle-ui:hover,
.btn-warning-subtle-ui:focus,
.btn-warning-subtle-ui:active,
.btn-success-subtle-ui:hover,
.btn-success-subtle-ui:focus,
.btn-success-subtle-ui:active {
    text-decoration: none !important;
}

.btn-ui,
.btn-login,
.btn-subtle-ui,
.btn-danger-ui,
.btn-danger-subtle-ui,
.btn-outline-ui,
.btn-primary-ui,
.btn-secondary-ui,
.btn-ai-ui,
.btn-ai-subtle-ui,
.btn-success-ui,
.btn-warning-subtle-ui,
.btn-success-subtle-ui {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.btn-ui:hover,
.btn-ui:focus,
.btn-ui:active,
.btn-login:hover,
.btn-login:focus,
.btn-login:active,
.btn-subtle-ui:hover,
.btn-subtle-ui:focus,
.btn-subtle-ui:active,
.btn-danger-subtle-ui:hover,
.btn-danger-subtle-ui:focus,
.btn-danger-subtle-ui:active,
.btn-outline-ui:hover,
.btn-outline-ui:focus,
.btn-outline-ui:active,
.btn-primary-ui:hover,
.btn-primary-ui:focus,
.btn-primary-ui:active,
.btn-secondary-ui:hover,
.btn-secondary-ui:focus,
.btn-secondary-ui:active,
.btn-ai-ui:hover,
.btn-ai-ui:focus,
.btn-ai-ui:active,
.btn-ai-subtle-ui:hover,
.btn-ai-subtle-ui:focus,
.btn-ai-subtle-ui:active,
.btn-success-ui:hover,
.btn-success-ui:focus,
.btn-success-ui:active,
.btn-warning-subtle-ui:hover,
.btn-warning-subtle-ui:focus,
.btn-warning-subtle-ui:active,
.btn-success-subtle-ui:hover,
.btn-success-subtle-ui:focus,
.btn-success-subtle-ui:active {
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.10);
}

.btn-ui span,
.btn-login span,
.btn-subtle-ui span,
.btn-danger-ui span,
.btn-danger-subtle-ui span,
.btn-outline-ui span,
.btn-primary-ui span,
.btn-secondary-ui span,
.btn-ai-ui span,
.btn-ai-subtle-ui span,
.btn-success-ui span,
.btn-warning-ui span,
.btn-warning-subtle-ui span,
.btn-success-subtle-ui span {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    align-self: center;
}

.button-icon,
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    min-width: 1.4rem;
    height: 1.4rem;
    font-size: 1.24rem;
    line-height: 1;
    flex: 0 0 auto;
    align-self: center;
}

.button-icon::before,
.btn-icon::before {
    line-height: 1;
}

.spinner-border.button-icon,
.spinner-border.btn-icon {
    border-width: 0.16em;
}

.btn-subtle-ui-sm .button-icon {
    width: 1.2rem;
    min-width: 1.2rem;
    height: 1.2rem;
    font-size: 1.08rem;
}

.btn-compact-ui {
    min-height: 32px !important;
    padding: 4px 10px !important;
    gap: 6px !important;
    font-size: 0.74rem !important;
    letter-spacing: 0;
    border-radius: var(--bs-btn-border-radius-sm) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
}

.btn-compact-ui:hover,
.btn-compact-ui:focus,
.btn-compact-ui:active {
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08) !important;
}

.btn-compact-ui .button-icon,
.btn-compact-ui .btn-icon {
    width: 1rem;
    min-width: 1rem;
    height: 1rem;
    font-size: 0.92rem;
}

.page-header-actions .btn-ui {
    min-height: 38px !important;
    padding: 8px 14px !important;
    font-size: 0.88rem !important;
    gap: 8px !important;
}

.form-control,
.form-select {
    border-color: var(--app-field-border);
    padding: var(--app-field-padding-y) var(--app-field-padding-x);
    color: var(--app-field-text);
    background: var(--app-field-background);
    box-shadow: var(--app-field-shadow);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.form-control:hover,
.form-select:hover {
    background: var(--app-field-hover-background);
    border-color: var(--app-field-hover-border);
    box-shadow: var(--app-field-hover-shadow);
}

.form-control::placeholder,
.table textarea.form-control::placeholder,
.table-guided textarea.form-control::placeholder {
    color: var(--app-field-placeholder);
}

.planner-month-input {
    min-height: 46px;
    height: 46px;
    padding: 12px 16px;
    border: 1px solid var(--app-field-border);
    background: var(--app-field-background);
    color: var(--app-primary-hover);
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: var(--app-field-shadow);
}

.planner-month-input:hover {
    border-color: var(--app-field-hover-border);
    background: var(--app-field-hover-background);
    box-shadow: var(--app-field-hover-shadow);
}

.form-control[type="date"]::-webkit-calendar-picker-indicator,
.form-control[type="month"]::-webkit-calendar-picker-indicator,
.form-control[type="datetime-local"]::-webkit-calendar-picker-indicator,
.form-control[type="time"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.8;
    width: 1.4rem;
    height: 1.4rem;
    padding: 0;
    margin-right: 0;
    background-size: 1.4rem 1.4rem;
}

.form-control[type="date"]:hover::-webkit-calendar-picker-indicator,
.form-control[type="month"]:hover::-webkit-calendar-picker-indicator,
.form-control[type="datetime-local"]:hover::-webkit-calendar-picker-indicator,
.form-control[type="time"]:hover::-webkit-calendar-picker-indicator {
    opacity: 1;
}

.form-control:focus,
.form-select:focus {
    color: var(--app-field-text);
    border-color: var(--app-field-focus-border);
    background: var(--app-field-focus-background);
    box-shadow: var(--app-field-focus-shadow);
}

.app-accordion {
    border: 1px solid var(--app-border);
    border-radius: var(--bs-accordion-border-radius, var(--app-radius));
    background: var(--app-surface);
    overflow: hidden;
}

.app-accordion .accordion-item + .accordion-item {
    margin-top: 0;
}

.app-accordion .accordion-item {
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-top: 1px solid var(--app-border);
}

.app-accordion .accordion-item:first-child {
    border-top: 0;
}

.app-accordion .accordion-button {
    min-height: 60px;
    padding: 16px 20px;
    font-weight: 600;
    color: var(--app-text);
    background: var(--app-surface);
    box-shadow: none;
}

.app-accordion .accordion-button:not(.collapsed) {
    color: var(--app-text);
    background: var(--app-surface-muted);
    box-shadow: none;
}

.app-accordion .accordion-body {
    border-top: 1px solid var(--app-border);
    background: var(--app-surface);
}

.app-accordion .accordion-button:focus {
    box-shadow: 0 0 0 3px var(--app-focus-ring);
    border-color: var(--app-border);
}

.ai-texts-timeline-accordion--weeks .accordion-button {
    min-height: 50px;
    padding: 12px 16px;
}

.ai-texts-timeline-accordion--weeks {
    border: 1px solid var(--app-border);
    border-left: var(--tint-strip-width) solid var(--app-selected-strip);
    border-radius: var(--bs-accordion-border-radius, var(--app-radius));
    background: var(--app-surface-muted);
    box-shadow: none;
}

.ai-texts-timeline-accordion--weeks .accordion-item {
    border-top-color: var(--app-border);
}

.ai-texts-timeline-accordion--weeks .accordion-button.collapsed {
    min-height: 44px;
    padding-top: 9px;
    padding-bottom: 9px;
    background: var(--app-surface);
    box-shadow: none;
}

.ai-texts-timeline-accordion--weeks .accordion-heading-label {
    line-height: 1.2;
    color: var(--app-heading);
}

.ai-texts-timeline-accordion--weeks .accordion-heading-icon {
    color: var(--app-heading);
}

.ai-texts-timeline-accordion--weeks .accordion-button:not(.collapsed) .accordion-heading-label,
.ai-texts-timeline-accordion--weeks .accordion-button:not(.collapsed) .accordion-heading-icon {
    color: var(--app-selected-strip);
}

.ai-texts-timeline-accordion--weeks .accordion-body {
    padding: 14px 14px 16px;
    background: var(--app-surface-muted);
}

.ai-texts-timeline-accordion--days .accordion-button {
    min-height: 42px;
    padding: 9px 14px;
}

.ai-texts-timeline-accordion--days .accordion-heading-label {
    font-size: 0.94rem;
    font-weight: 700;
    line-height: 1.15;
}

.ai-texts-timeline-accordion--days .accordion-heading-icon {
    font-size: 0.92rem;
    color: var(--app-text);
}

.ai-texts-timeline-accordion--days .accordion-body {
    padding: 12px 12px 14px;
}

.ai-texts-timeline-accordion .accordion-button::after {
    margin-left: 0;
}

.accordion-heading-content {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.accordion-heading-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    min-width: 1.4rem;
    font-size: 1.24rem;
    color: var(--app-muted);
    line-height: 1;
    flex: 0 0 auto;
}

.accordion-heading-label {
    line-height: 1.2;
}

.ai-texts-approval-summary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    margin-left: auto;
    margin-right: 12px;
    padding: 4px 8px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    background: var(--app-surface-muted);
    color: var(--app-text-muted);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.ai-texts-approval-summary__dot {
    width: 9px;
    height: 9px;
    border-radius: var(--app-radius-pill);
    background: var(--app-error-text);
    box-shadow: 0 0 0 3px var(--app-error-bg);
}

.ai-texts-approval-summary.is-complete {
    border-color: var(--app-success-border);
    background: var(--app-success-bg);
    color: var(--app-success-text);
}

.ai-texts-approval-summary.is-complete .ai-texts-approval-summary__dot {
    background: var(--app-success-text);
    box-shadow: 0 0 0 3px var(--app-success-bg);
}

.ai-texts-approval-summary.is-partial {
    border-color: var(--app-warning-border);
    background: var(--app-warning-bg);
    color: var(--app-warning-text);
}

.ai-texts-approval-summary.is-partial .ai-texts-approval-summary__dot {
    background: var(--app-warning-text);
    box-shadow: 0 0 0 3px var(--app-warning-bg);
}

.ai-texts-approval-summary.is-empty {
    border-color: var(--app-error-border);
    background: var(--app-error-bg);
    color: var(--app-error-text);
}

@media (max-width: 575.98px) {
    .ai-texts-approval-summary {
        gap: 6px;
        margin-right: 8px;
        padding: 4px 6px;
        font-size: 0.74rem;
    }
}

.planner-month-analysis-score {
    margin-left: 6px;
    font-weight: 800;
    color: var(--app-heading);
    line-height: 1.2;
}

.planner-month-analysis-count {
    color: var(--app-muted);
    font-size: 0.86rem;
    line-height: 1.2;
}

.technical-accordion .accordion-button,
.technical-block {
    background: var(--app-surface-muted);
}

.technical-accordion--compact .accordion-button {
    align-items: flex-start;
    gap: 10px;
    min-height: 46px;
    padding: 10px 16px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.84) inset;
}

.technical-accordion--compact .accordion-button code {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.technical-accordion--compact .accordion-button::after {
    flex: 0 0 auto;
    margin-top: 0.2rem;
    margin-left: auto;
}

.technical-accordion--compact .accordion-button.collapsed {
    min-height: 42px;
    padding-top: 9px;
    padding-bottom: 9px;
    background: var(--app-surface);
}

.technical-accordion--compact .accordion-heading-label {
    font-size: 0.96rem;
    font-weight: 700;
    line-height: 1.15;
}

.technical-accordion--compact .accordion-heading-icon {
    width: 1.1rem;
    min-width: 1.1rem;
    font-size: 1rem;
}

.technical-accordion--compact .accordion-body {
    padding: 12px 14px 14px;
}

.technical-accordion--compact .debug-toolbar {
    gap: 8px;
    margin-bottom: 8px;
}

.technical-accordion--compact .small-note {
    font-size: 0.82rem;
}

.technical-accordion--compact h3.h6 {
    font-size: 0.9rem;
    margin-bottom: 6px !important;
}

.technical-accordion--compact pre.small {
    padding: 12px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.planner-debug-summary-card {
    background: var(--app-surface) !important;
}

.technical-copy {
    color: #64748b !important;
}

.planner-detail-block,
.planner-debug-summary-card {
    box-shadow: none;
}

.planner-debug-summary-card {
    border-left: var(--tint-strip-width) solid var(--app-border);
}

.surface-accent-top {
    position: relative;
    overflow: visible;
    --app-accent-strip-height: var(--app-strip-height-lg);
    --app-accent-strip-opacity: var(--app-strip-opacity-strong);
    --app-accent-strip-offset: var(--app-strip-height-lg);
}

.surface-accent-top.page-card,
.surface-accent-top.privacy-page__card {
    --app-accent-strip-offset: 0;
    overflow: hidden;
}

html.planner-page--positioning body {
    visibility: hidden;
}

html.planner-page--positioning.planner-page--ready body {
    visibility: visible;
}

.page-card--primary .section-heading,
.section-box--primary .section-heading,
.topbar .section-heading,
.card-soft .section-heading {
    color: var(--app-heading);
}

.ui-insight-list {
    display: grid;
    gap: 12px;
}

.ui-insight-card {
    position: relative;
    border: 1px solid var(--app-border);
    border-radius: var(--bs-card-border-radius);
    background: var(--app-surface);
    padding: 14px;
    box-shadow: none;
    overflow: hidden;
}

.ui-insight-card--accent::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    border-radius: var(--bs-card-border-radius) 0 0 var(--bs-card-border-radius);
    background: var(--app-accent);
}

.technical-accordion .ui-insight-card--accent::before,
.technical-block .ui-insight-card--accent::before {
    background: var(--app-border);
}

html[data-theme="dark"] .technical-accordion .ui-insight-card--accent::before,
html[data-theme="dark"] .technical-block .ui-insight-card--accent::before {
    background: var(--app-muted);
}

.ui-insight-callout {
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface-muted);
    color: var(--app-muted);
}

/* Topic discovery debug cards and scoring helpers. */
.debug-signal-list,
.debug-score-list {
    gap: 12px;
}

.debug-signal-url {
    font-weight: 700;
    word-break: break-all;
    margin-bottom: 10px;
    padding-left: 2px;
}

.debug-signal-meta {
    display: grid;
    gap: 8px;
    padding-top: 0;
}

.debug-signal-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 8px;
    align-items: start;
    font-size: 0.92rem;
}

.debug-signal-label {
    font-weight: 700;
    color: #374151;
}

.debug-signal-value {
    color: var(--app-heading);
}

.debug-signal-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.debug-signal-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border: 1px solid #d7dde5;
    border-radius: var(--app-radius-sm);
    background: var(--app-surface);
    font-size: 0.78rem;
    font-weight: 600;
    color: #374151;
    line-height: 1.1;
}

.debug-score-topic-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--app-heading);
    margin-bottom: 2px;
    padding-left: 2px;
}

.debug-score-candidates {
    display: grid;
    gap: 10px;
}

.debug-score-candidate {
    border: 1px solid #dce2e8;
    border-radius: var(--app-radius);
    background: var(--app-surface);
    padding: 12px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.035);
}

.debug-score-candidate.is-best {
    border-color: #dce2e8;
    background: var(--app-surface);
    box-shadow:
        inset 0 0 0 1px rgba(15, 23, 42, 0.04),
        0 10px 20px rgba(15, 23, 42, 0.05);
}

.debug-score-topline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.debug-score-page-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--app-heading);
    margin-bottom: 6px;
    line-height: 1.35;
}

.debug-score-link {
    font-size: 0.84rem;
    color: var(--app-muted);
    word-break: break-all;
}

.debug-score-link a {
    color: inherit;
    text-decoration: none;
}

.debug-score-link a:hover {
    text-decoration: underline;
}

.debug-score-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.debug-score-value,
.debug-score-label,
.debug-score-best {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: var(--app-radius-sm);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
}

.debug-score-value {
    background: #111827;
    color: #fff;
}

.debug-score-label {
    background: #f3f4f6;
    color: #111827;
}

.debug-score-best {
    background: #ecfdf3;
    color: #166534;
    border: 1px solid #ccebd7;
}

.debug-score-supporting {
    font-size: 0.82rem;
}

.ui-insight-supporting {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--app-border);
    color: #6b7280;
}

@media (max-width: 767.98px) {
    .page-header,
    .debug-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-header-actions,
    .topbar-actions {
        width: 100%;
        justify-content: flex-start;
        margin-left: 0;
        padding-top: 0;
    }

    .app-header-context {
        width: 100%;
    }

.app-header-context > span,
.app-project-badge,
.app-user-badge {
        width: 100%;
        justify-content: flex-start;
    }

    .app-header-context__stack {
        max-width: none;
    }

    .section-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-responsive-table,
    .app-responsive-table {
        margin-right: -12px;
        margin-left: -12px;
        border: 0;
        border-radius: 0;
        background: transparent;
        overflow: visible;
    }

    .admin-responsive-table .table,
    .app-responsive-table .table {
        border-collapse: separate;
        border-spacing: 0 10px;
        width: 100%;
        max-width: 100%;
        margin: 0;
        margin-bottom: 0;
    }

    .admin-responsive-table thead,
    .app-responsive-table thead,
    .app-responsive-table colgroup {
        display: none;
    }

    .admin-responsive-table tbody,
    .admin-responsive-table tr,
    .admin-responsive-table td,
    .app-responsive-table tbody,
    .app-responsive-table tr,
    .app-responsive-table td {
        display: block;
        width: 100%;
    }

    .admin-responsive-table tr,
    .app-responsive-table tr {
        border: 0;
        background: var(--app-surface-muted);
    }

    .admin-responsive-table td,
    .app-responsive-table td {
        padding: 11px 18px !important;
        border: 0;
        text-align: left !important;
        overflow-wrap: anywhere;
    }

    .admin-responsive-table td + td,
    .app-responsive-table td + td {
        border-top: 1px solid var(--app-border);
    }

    .admin-responsive-table td::before,
    .app-responsive-table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        color: var(--app-muted);
        font-size: var(--app-text-xs);
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .admin-responsive-table td[data-label=""]::before,
    .app-responsive-table td[data-label=""]::before {
        display: none;
    }

    .admin-responsive-table td .btn-ui,
    .admin-responsive-table td form,
    .app-responsive-table td .btn-ui,
    .app-responsive-table td form {
        width: 100%;
    }

    .admin-responsive-table td form.d-inline,
    .app-responsive-table td form.d-inline {
        display: block !important;
    }

    .admin-responsive-table td form + form,
    .admin-responsive-table td .btn-ui + form,
    .admin-responsive-table td form + .btn-ui,
    .admin-responsive-table td .btn-ui + .btn-ui,
    .app-responsive-table td form + form,
    .app-responsive-table td .btn-ui + form,
    .app-responsive-table td form + .btn-ui,
    .app-responsive-table td .btn-ui + .btn-ui {
        margin-top: 8px;
    }

    .admin-responsive-table td form .btn-ui,
    .app-responsive-table td form .btn-ui {
        width: 100%;
    }

    .admin-responsive-table input:not([type="checkbox"]):not([type="radio"]),
    .admin-responsive-table select,
    .admin-responsive-table textarea,
    .app-responsive-table input:not([type="checkbox"]):not([type="radio"]),
    .app-responsive-table select,
    .app-responsive-table textarea {
        min-width: 0;
        width: 100%;
    }

    .admin-responsive-table textarea.form-control,
    .app-responsive-table textarea.form-control {
        min-height: 116px;
    }

    .app-responsive-table .review-table {
        min-width: 0;
    }

    .ai-text-draft-card__strategy-line,
    .ai-text-draft-card__caption-header,
    .ai-text-draft-card__caption-actions {
        align-items: stretch;
    }

    .ai-text-draft-card__strategy-goal,
    .ai-text-draft-card__strategy-info,
    .ai-text-draft-card__caption-actions,
    .ai-text-draft-card__caption-actions .btn-ui {
        width: 100%;
    }

    .ai-text-draft-card__meta {
        justify-content: flex-start;
    }

    .ai-text-draft-card__actions-bar,
    .ai-text-draft-card__actions,
    .ai-text-draft-card__actions .btn-ui {
        width: 100%;
    }

    .ai-text-draft-card.ai-text-draft-card--compact {
        padding: 10px;
    }

    .ai-text-draft-card.ai-text-draft-card--compact .planner-day-detail-title {
        align-items: center;
        flex-wrap: nowrap;
        gap: 7px;
        font-size: 0.92rem;
    }

    .ai-text-draft-card.ai-text-draft-card--compact .planner-day-detail-social-icon {
        width: 1rem;
        min-width: 1rem;
        font-size: 1rem;
    }

    .ai-text-draft-card.ai-text-draft-card--compact .ai-text-draft-card__meta .planner-format-badge,
    .ai-text-draft-card.ai-text-draft-card--compact .ai-text-draft-card__meta .planner-status-badge,
    .ai-text-draft-card.ai-text-draft-card--compact .ai-text-draft-card__meta .planner-day-item-strategy {
        padding: 3px 5px;
        font-size: 0.68rem;
    }

    .ai-text-draft-card.ai-text-draft-card--compact .ai-text-draft-card__compact-preview {
        gap: 8px;
        padding: 8px 0 0;
    }

    .ai-text-draft-card.ai-text-draft-card--compact .ai-text-draft-card__compact-snippet {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }

    .ai-text-draft-card.ai-text-draft-card--compact .ai-text-draft-card__compact-thumb {
        width: 42px;
        height: 42px;
    }
}

.theme-switcher {
    position: fixed;
    right: 18px;
    bottom: 18px;
    left: auto;
    width: fit-content;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    max-width: calc(100vw - 20px);
}

.theme-switcher__panel {
    display: grid;
    gap: 0;
    min-width: 240px;
    padding: 12px;
    border: 1px solid var(--app-border);
    border-radius: var(--bs-card-border-radius);
    background: var(--app-surface);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.14);
    backdrop-filter: blur(14px);
}

.theme-switcher__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    color: var(--app-text);
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
    transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
}

.theme-switcher__toggle:hover,
.theme-switcher__toggle:focus {
    border-color: var(--app-border-strong);
    background: var(--app-surface-muted);
    color: var(--app-heading);
    transform: translateY(-1px);
}

.theme-switcher:not(.is-collapsed) .theme-switcher__toggle {
    opacity: 0.84;
}

.theme-switcher:not(.is-collapsed) .theme-switcher__toggle:hover,
.theme-switcher:not(.is-collapsed) .theme-switcher__toggle:focus {
    opacity: 1;
}

.theme-switcher.is-collapsed .theme-switcher__panel {
    display: none;
}

/* Mobile: quando collapsed, il toggle si riduce a **sola icona** (niente pill, niente
 * bordo, niente ombra, niente label) per occupare lo spazio minimo indispensabile.
 * Il JS setta `collapsed` come default quando manca la preferenza salvata. */
@media (max-width: 767.98px) {
    .theme-switcher {
        right: 10px;
        bottom: 10px;
        gap: 6px;
    }

    .theme-switcher.is-collapsed .theme-switcher__toggle {
        padding: 10px !important;
        min-width: 0 !important;
        min-height: 0 !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        color: var(--app-muted);
        opacity: 0.8;
        filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.35));
    }

    .theme-switcher.is-collapsed .theme-switcher__toggle > i {
        font-size: 1.45rem;
    }

    .theme-switcher.is-collapsed .theme-switcher__toggle > span {
        display: none;
    }

    .theme-switcher.is-collapsed .theme-switcher__toggle:hover,
    .theme-switcher.is-collapsed .theme-switcher__toggle:focus {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        transform: none;
        color: var(--app-heading);
        opacity: 1;
    }

    .theme-switcher__panel {
        min-width: 0;
        width: 200px;
        padding: 8px;
    }

    .theme-switcher__options {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
    }

    .theme-switcher:not(.is-collapsed) .theme-switcher__toggle {
        font-size: 0.78rem;
    }
}

.theme-switcher__options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.theme-switcher__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    color: var(--app-text);
    font-weight: 700;
    line-height: 1;
    box-shadow: none;
    transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.theme-switcher__button:hover,
.theme-switcher__button:focus {
    border-color: var(--app-border-strong);
    background: var(--app-surface-muted);
    color: var(--app-heading);
    transform: translateY(-1px);
}

.theme-switcher__button.is-active {
    border-color: color-mix(in srgb, var(--app-primary) 58%, var(--app-border) 42%);
    background: var(--app-selected-wash);
    color: var(--app-accent-strong);
}

.site-footer {
    background: transparent !important;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.site-footer__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--app-muted);
}

.site-footer__copyright,
.site-footer__project {
    min-width: 0;
}

.site-footer__project {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--app-muted);
    max-width: min(100%, 520px);
}

.site-footer__project::before {
    content: "";
    display: block;
    width: 1px;
    height: 14px;
    background: var(--app-border);
    margin-right: 2px;
}

.site-footer__project-dot {
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 999px;
    flex: 0 0 auto;
    background: var(--app-border);
}

.site-footer__project.has-project-accent .site-footer__project-dot {
    background: var(--project-accent-light);
}

.site-footer__project-label {
    flex: 0 0 auto;
}

.site-footer__project-name {
    color: var(--app-text);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .site-footer__inner {
        flex-direction: column;
        gap: 4px;
        text-align: center;
    }

    .site-footer__project::before {
        display: none;
    }
}

.site-footer .text-muted,
.site-footer .small {
    color: var(--app-muted) !important;
}

html[data-theme="dark"] .theme-switcher {
    color: var(--app-text);
}

html[data-theme="dark"] .theme-switcher__panel {
    border-color: var(--app-border);
    background: var(--app-surface);
    box-shadow: 0 18px 42px rgba(2, 6, 23, 0.48);
}

html[data-theme="dark"] .theme-switcher__toggle {
    border-color: var(--app-border);
    background: var(--app-surface);
    color: var(--app-text);
}

html[data-theme="dark"] .theme-switcher__button {
    border-color: var(--app-border);
    background: var(--app-surface-muted);
    color: var(--app-text);
}

html[data-theme="dark"] .theme-switcher__button:hover,
html[data-theme="dark"] .theme-switcher__button:focus {
    border-color: var(--app-border-strong);
    background: var(--app-surface-muted);
    color: var(--app-heading);
}

html[data-theme="dark"] .theme-switcher__toggle:hover,
html[data-theme="dark"] .theme-switcher__toggle:focus {
    border-color: var(--app-border-strong);
    background: var(--app-surface-muted);
    color: var(--app-heading);
}

html[data-theme="dark"] .theme-switcher__button.is-active {
    border-color: color-mix(in srgb, var(--app-primary) 58%, var(--app-border) 42%);
    background: color-mix(in srgb, var(--app-primary) 24%, var(--app-surface));
    color: var(--app-accent-strong);
}

html[data-theme="dark"] .site-footer {
    border-top-color: var(--app-border);
}

html[data-theme="dark"] .site-footer__project.has-project-accent .site-footer__project-dot {
    background: var(--project-accent-dark);
}

html[data-theme="dark"] .site-footer .text-muted,
html[data-theme="dark"] .site-footer .small {
    color: var(--app-muted) !important;
}

/* Global dark theme overrides for shared application surfaces. */
html[data-theme="dark"] .page-card,
html[data-theme="dark"] .card-soft,
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .detail-item,
html[data-theme="dark"] .section-box,
html[data-theme="dark"] .project-item,
html[data-theme="dark"] .project-switcher-item,
html[data-theme="dark"] .planner-analysis-card,
html[data-theme="dark"] .review-table-shell,
html[data-theme="dark"] .planner-calendar-shell,
html[data-theme="dark"] .post-calendar-shell,
html[data-theme="dark"] .post-calendar-mobile-day,
html[data-theme="dark"] .planner-detail-block,
html[data-theme="dark"] .planner-debug-summary-card,
html[data-theme="dark"] .debug-score-candidate,
html[data-theme="dark"] .ui-insight-card {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .project-switcher-item {
    border-left-color: var(--app-ui-blue) !important;
}

html[data-theme="dark"] .project-switcher-item.has-project-accent {
    border-left-color: var(--project-accent-dark) !important;
}

html[data-theme="dark"] .project-switcher-item.has-project-accent .project-switcher-name {
    color: var(--project-accent-dark) !important;
}

html[data-theme="dark"] .project-switcher-meta {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .admin-project-color-swatch.has-project-accent {
    background: var(--project-accent-dark);
    border-color: color-mix(in srgb, var(--project-accent-dark) 68%, var(--app-border) 32%);
}

html[data-theme="dark"] .config-card {
    --config-tint-strong: color-mix(in srgb, var(--tint-color-dark, var(--tint-color, #60a5fa)) 58%, #f8fafc 42%);
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .config-card::before {
    background: var(--config-tint-strong);
}

html[data-theme="dark"] .social-configs-card .config-card,
html[data-theme="dark"] .social-configs-card .config-card__preview,
html[data-theme="dark"] .content-rule-card {
    background: color-mix(in srgb, var(--tint-color-dark, var(--tint-color, #60a5fa)) 8%, var(--app-surface) 92%) !important;
}

html[data-theme="dark"] .page-hero-card,
html[data-theme="dark"] .debug-score-candidate.is-best {
    background: var(--app-surface) !important;
    border-color: #475569 !important;
}

html[data-theme="dark"] .page-card--secondary,
html[data-theme="dark"] .section-box--secondary,
html[data-theme="dark"] .section-level-accessory {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .page-summary-card {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .page-summary-card::before {
    opacity: var(--app-strip-opacity-strong);
}

html[data-theme="dark"] .page-summary-label,
html[data-theme="dark"] .section-eyebrow--label {
    color: var(--app-ui-sky);
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(71, 85, 105, 0.55);
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(71, 85, 105, 0.8);
}

html[data-theme="dark"] .section-box.page-nav-card {
    border-color: var(--app-border) !important;
    background: var(--app-surface) !important;
    box-shadow: inset 3px 0 0 var(--app-accent) !important;
}

html[data-theme="dark"] .section-box.page-nav-card:hover,
html[data-theme="dark"] .section-box.page-nav-card:focus-visible {
    border-color: rgba(96, 165, 250, 0.66) !important;
    background: color-mix(in srgb, var(--app-primary) 14%, var(--app-surface-muted) 86%) !important;
    box-shadow:
        inset var(--tint-strip-width) 0 0 var(--app-accent),
        0 1px 2px rgba(2, 6, 23, 0.32) !important;
}

html[data-theme="dark"] .page-nav-card:hover,
html[data-theme="dark"] .page-nav-card:focus-visible {
    border-color: rgba(96, 165, 250, 0.58) !important;
    background: color-mix(in srgb, var(--app-primary) 14%, var(--app-surface-muted) 86%) !important;
    box-shadow: inset var(--tint-strip-width) 0 0 var(--app-accent), 0 1px 2px rgba(2, 6, 23, 0.32);
}

html[data-theme="dark"] .page-nav-card {
    border-color: var(--app-border) !important;
    background: var(--app-surface) !important;
    box-shadow: inset 3px 0 0 var(--app-accent);
}

html[data-theme="dark"] ::selection {
    background: rgba(56, 189, 248, 0.28);
    color: #f8fafc;
}

html[data-theme="dark"] ::-moz-selection {
    background: rgba(56, 189, 248, 0.28);
    color: #f8fafc;
}

html[data-theme="dark"] .page-nav-card__title {
    color: #dbeafe;
}

html[data-theme="dark"] .page-nav-card:hover .page-nav-card__title,
html[data-theme="dark"] .page-nav-card:focus-visible .page-nav-card__title,
html[data-theme="dark"] .page-nav-card:hover .page-title-with-icon__icon,
html[data-theme="dark"] .page-nav-card:focus-visible .page-title-with-icon__icon {
    color: var(--app-primary-hover);
}

html[data-theme="dark"] .help-doc-content h2,
html[data-theme="dark"] .help-doc-content h3,
html[data-theme="dark"] .help-doc-content p,
html[data-theme="dark"] .help-doc-content li,
html[data-theme="dark"] .help-doc-content code {
    color: #dbeafe;
}

html[data-theme="dark"] .help-doc-content code {
    background: rgba(148, 163, 184, 0.14);
}

html[data-theme="dark"] .help-doc-pre {
    background: #0f172a;
    border-color: #334155;
}

html[data-theme="dark"] .version-switcher-item--highlight {
    background: var(--app-selected-wash) !important;
    border-color: #3b82f6 !important;
    box-shadow: inset 3px 0 0 var(--app-accent), inset 0 0 0 1px rgba(96, 165, 250, 0.12);
}

html[data-theme="dark"] .version-switcher-item--highlight .version-switcher-status {
    color: #bfdbfe;
    border-color: rgba(96, 165, 250, 0.32);
    background: rgba(59, 130, 246, 0.12);
}

html[data-theme="dark"] .version-switcher-status--opened {
    color: #bfdbfe;
    border-color: rgba(96, 165, 250, 0.34);
    background: rgba(59, 130, 246, 0.12);
}

html[data-theme="dark"] .version-switcher-status--current {
    color: #bfdbfe;
    border-color: rgba(96, 165, 250, 0.34);
    background: rgba(59, 130, 246, 0.12);
}

html[data-theme="dark"] .version-switcher-status--historical {
    color: #cbd5e1;
    border-color: rgba(148, 163, 184, 0.22);
    background: rgba(148, 163, 184, 0.08);
}


html[data-theme="dark"] .section-box--technical,
html[data-theme="dark"] .detail-item--technical,
html[data-theme="dark"] .technical-block,
html[data-theme="dark"] .technical-accordion .accordion-button {
    background: var(--app-surface-muted) !important;
}

html[data-theme="dark"] .technical-accordion--compact .accordion-button,
html[data-theme="dark"] .technical-accordion--compact .accordion-button.collapsed {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
}

html[data-theme="dark"] .config-active-provider-panel,
html[data-theme="dark"] .config-callout {
    border-color: var(--app-border) !important;
    background: var(--app-surface) !important;
    color: #d2dae6 !important;
}

html[data-theme="dark"] .config-help-note--panel {
    border-color: var(--app-border) !important;
    background: color-mix(in srgb, var(--tint-color-dark, var(--tint-color, #60a5fa)) 8%, var(--app-surface) 92%) !important;
    color: var(--config-tint-strong) !important;
}

html[data-theme="dark"] .config-card__preview {
    border-color: var(--app-border) !important;
    background: color-mix(in srgb, var(--tint-color-dark, var(--tint-color, #2563eb)) 10%, var(--app-surface) 90%) !important;
    color: #d2dae6 !important;
}

html[data-theme="dark"] .social-config-card.is-disabled {
    border-color: color-mix(in srgb, var(--app-muted, #64748b) 40%, transparent) !important;
}

html[data-theme="dark"] .config-provider-card::before {
    background: var(--config-tint-strong);
}

html[data-theme="dark"] .config-provider-card:not(.is-active) {
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .config-capability-card__header {
    border-color: #334155 !important;
}

html[data-theme="dark"] .config-provider-card.is-active {
    border-color: var(--app-selected-border) !important;
    background: var(--app-selected-wash) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .config-provider-card.is-active::before {
    background: var(--app-gradient-primary);
}

html[data-theme="dark"] .app-header-context > span,
html[data-theme="dark"] .app-project-badge,
html[data-theme="dark"] .app-user-badge,
html[data-theme="dark"] .config-chip,
html[data-theme="dark"] .config-chip--summary,
html[data-theme="dark"] .planner-format-badge,
html[data-theme="dark"] .planner-status-badge,
html[data-theme="dark"] .debug-signal-tag,
html[data-theme="dark"] .debug-signal-status,
html[data-theme="dark"] .debug-score-label {
    background: #182131 !important;
    border-color: #334155 !important;
    color: #d2dae6 !important;
}

html[data-theme="dark"] .app-header-context > span,
html[data-theme="dark"] .app-project-badge,
html[data-theme="dark"] .app-user-badge {
    border-left-color: var(--app-ui-blue) !important;
}

html[data-theme="dark"] .app-header-context > .has-project-accent,
html[data-theme="dark"] .app-project-badge.has-project-accent {
    border-left-color: var(--project-accent-dark) !important;
}

html[data-theme="dark"] .app-header-context > .has-project-accent .app-header-context__icon,
html[data-theme="dark"] .app-header-context > .has-project-accent .app-header-context__label,
html[data-theme="dark"] .app-project-badge.has-project-accent .app-header-context__icon,
html[data-theme="dark"] .app-project-badge.has-project-accent .app-header-context__label {
    color: var(--project-accent-dark) !important;
}

html[data-theme="dark"] .app-header-context > .has-project-accent .app-header-context__label--account,
html[data-theme="dark"] .app-project-badge.has-project-accent .app-header-context__label--account {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .app-context-pill-action:hover,
html[data-theme="dark"] .app-context-pill-action:focus-visible {
    background: color-mix(in srgb, var(--app-primary) 14%, var(--app-surface-muted) 86%) !important;
    border-color: color-mix(in srgb, var(--app-primary) 42%, var(--app-border) 58%) !important;
    border-left-color: var(--app-primary) !important;
    color: var(--app-heading) !important;
}

html[data-theme="dark"] .app-project-badge.has-project-accent:hover,
html[data-theme="dark"] .app-project-badge.has-project-accent:focus-visible {
    background: color-mix(in srgb, var(--project-accent-dark) 12%, var(--app-surface-muted) 88%) !important;
    border-color: color-mix(in srgb, var(--project-accent-dark) 38%, var(--app-border) 62%) !important;
    border-left-color: var(--project-accent-dark) !important;
}

html[data-theme="dark"] .planner-day-detail-meta .planner-format-badge,
html[data-theme="dark"] .ai-text-draft-card__meta .planner-format-badge {
    border-left-color: var(--social-strong, var(--app-heading)) !important;
}

html[data-theme="dark"] .page-header-actions .btn-outline-ui,
html[data-theme="dark"] .topbar-actions .btn-outline-ui {
    background: var(--app-surface-muted) !important;
    border-color: #475569 !important;
}

html[data-theme="dark"] .config-chip strong,
html[data-theme="dark"] .config-card__preview-name,
html[data-theme="dark"] .config-card__title,
html[data-theme="dark"] .config-provider-card h3,
html[data-theme="dark"] .config-active-provider-panel__meta strong {
    color: #f8fafc !important;
}

html[data-theme="dark"] .config-card__key,
html[data-theme="dark"] .config-card__preview-line,
html[data-theme="dark"] .config-help-note,
html[data-theme="dark"] .config-provider-meta__label,
html[data-theme="dark"] .config-active-provider-panel__meta,
html[data-theme="dark"] .section-copy.section-copy--small,
html[data-theme="dark"] .planner-toolbar-note,
html[data-theme="dark"] .planner-meta-intro {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .planner-saved-versions-card {
    border-color: rgba(96, 165, 250, 0.22) !important;
}

html[data-theme="dark"] .table-guided tbody tr.table-row-selected td {
    background: var(--app-selected-wash-soft) !important;
}

html[data-theme="dark"] .icon-action-link,
html[data-theme="dark"] .icon-status-chip {
    border-color: #334155;
    background: var(--app-surface);
}

html[data-theme="dark"] .icon-action-link {
    color: #93c5fd;
}

html[data-theme="dark"] .icon-action-link:hover,
html[data-theme="dark"] .icon-action-link:focus-visible {
    border-color: rgba(147, 197, 253, 0.45);
    background: var(--app-surface-muted);
    color: #dbeafe;
}

html[data-theme="dark"] .icon-action-link--danger {
    color: var(--app-error-text);
    border-color: var(--app-error-border);
    background: var(--app-error-bg);
}

html[data-theme="dark"] .icon-action-link--danger:hover,
html[data-theme="dark"] .icon-action-link--danger:focus-visible {
    color: var(--app-error-text);
    border-color: color-mix(in srgb, var(--app-error-text) 28%, var(--app-error-border) 72%);
    background: color-mix(in srgb, var(--app-error-text) 10%, var(--app-error-bg) 90%);
}

html[data-theme="dark"] .icon-action-link--active {
    color: var(--app-muted);
    border-color: var(--app-border);
    background: var(--app-border);
    box-shadow: none;
}

html[data-theme="dark"] .icon-status-chip--success {
    color: #99f6e4;
    border-color: rgba(153, 246, 228, 0.28);
    background: var(--app-success-bg);
}

html[data-theme="dark"] .config-chip__dot {
    border-color: rgba(148, 163, 184, 0.38);
}

html[data-theme="dark"] .table,
html[data-theme="dark"] .table-guided,
html[data-theme="dark"] .review-table {
    --bs-table-striped-bg: rgba(30, 41, 59, 0.72);
    --bs-table-hover-bg: rgba(51, 65, 85, 0.55);
    --bs-table-border-color: var(--bs-border-color);
    --app-table-header-bg: color-mix(in srgb, var(--app-primary) 14%, var(--app-surface-muted) 86%);
    --app-table-header-border: color-mix(in srgb, var(--app-primary) 38%, var(--bs-table-border-color) 62%);
    --app-table-header-text: var(--app-heading);
    border-color: var(--bs-table-border-color);
}

html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .table-guided thead th,
html[data-theme="dark"] .review-table thead th {
    background: var(--app-table-header-bg);
    color: var(--app-table-header-text);
    border-color: var(--app-table-header-border);
}

html[data-theme="dark"] .planner-weekdays,
html[data-theme="dark"] .post-calendar-weekdays {
    background: var(--app-surface-muted) !important;
    border-color: var(--app-border) !important;
    color: var(--app-ui-sky) !important;
}

html[data-theme="dark"] .table tbody td,
html[data-theme="dark"] .table-guided tbody td,
html[data-theme="dark"] .review-table tbody td {
    background: #111827 !important;
    border-color: var(--bs-table-border-color) !important;
    color: #d2dae6 !important;
}

html[data-theme="dark"] .table tbody tr:hover td,
html[data-theme="dark"] .table-guided tbody tr:hover td,
html[data-theme="dark"] .review-table tbody tr:hover td {
    background: #1e293b !important;
}

html[data-theme="dark"] .table tbody tr:hover td:first-child,
html[data-theme="dark"] .table-guided tbody tr:hover td:first-child {
    box-shadow: inset 3px 0 0 var(--app-ui-blue);
}

html[data-theme="dark"] .planner-weekday,
html[data-theme="dark"] .post-calendar-weekday {
    color: var(--app-ui-sky) !important;
}

html[data-theme="dark"] .planner-weekday,
html[data-theme="dark"] .planner-day,
html[data-theme="dark"] .post-calendar-weekday,
html[data-theme="dark"] .post-calendar-cell {
    border-color: #334155;
}

html[data-theme="dark"] .planner-day,
html[data-theme="dark"] .planner-day.is-empty,
html[data-theme="dark"] .post-calendar-cell:not(.is-outside) {
    background: #111827;
}

html[data-theme="dark"] .planner-day:not(.is-empty):hover,
html[data-theme="dark"] .post-calendar-cell:not(.is-outside):hover {
    background: #1e293b !important;
}

html[data-theme="dark"] .planner-day.is-selected {
    background: var(--app-selected-wash-soft) !important;
    box-shadow: inset var(--tint-strip-width) 0 0 var(--app-selected-strip);
}

html[data-theme="dark"] .planner-day-number,
html[data-theme="dark"] .planner-day.is-selected .planner-day-number,
html[data-theme="dark"] .post-calendar-cell__day {
    color: #b6c2d0;
}

html[data-theme="dark"] .planner-day.is-selected .planner-day-count {
    color: #64748b;
}

html[data-theme="dark"] .planner-day-item-text {
    color: currentColor;
}

html[data-theme="dark"] .planner-day-item:hover .planner-day-item-text {
    color: currentColor;
}

html[data-theme="dark"] .planner-day-item,
html[data-theme="dark"] .planner-day-detail-card,
html[data-theme="dark"] .planner-calendar-mobile-day,
html[data-theme="dark"] .ui-insight-callout {
    background: #182131;
    border-color: #334155;
}

html[data-theme="dark"] .app-inline-link {
    color: #93c5fd;
}

html[data-theme="dark"] .app-inline-link:hover,
html[data-theme="dark"] .app-inline-link:focus {
    color: #dbeafe;
}

html[data-theme="dark"] .ai-progress-card__counts {
    color: #f8fafc;
}

html[data-theme="dark"] .ai-progress-card__bar {
    border-color: #334155;
    background: var(--app-surface-muted);
}

html[data-theme="dark"] .planner-day-detail-card {
    --social-strong: color-mix(in srgb, var(--social-accent-dark) 58%, #f8fafc 42%);
    background: color-mix(in srgb, var(--social-accent-dark) 7%, var(--app-surface) 93%);
    border-color: color-mix(in srgb, var(--app-border) 88%, var(--social-accent-dark) 12%);
    border-left-color: var(--social-strong);
    color: var(--social-strong);
}

html[data-theme="dark"] .ai-text-draft-card__debug-link {
    background: color-mix(in srgb, var(--app-surface-muted) 86%, #0f172a 14%);
    border-color: var(--app-border);
    color: #cbd5e1;
}

html[data-theme="dark"] .ai-text-image-thumb {
    background: color-mix(in srgb, var(--app-surface-muted) 88%, #0f172a 12%);
    border-color: var(--app-border);
}

html[data-theme="dark"] .ai-text-image-thumb.is-selected,
html[data-theme="dark"] .ai-text-video-thumb.is-selected {
    border-color: var(--social-strong, var(--app-heading));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--social-strong, var(--app-heading)) 28%, transparent);
}

html[data-theme="dark"] .ai-text-image-thumb--skeleton {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--app-surface-muted) 84%, #0f172a 16%) 0%,
        color-mix(in srgb, var(--app-surface-muted) 66%, #334155 34%) 45%,
        color-mix(in srgb, var(--app-surface-muted) 84%, #0f172a 16%) 100%
    );
    background-size: 180% 100%;
}

html[data-theme="dark"] .ai-text-image-thumb__check {
    background: var(--social-strong, var(--app-heading));
}

html[data-theme="dark"] .ai-text-image-thumb__select {
    background: rgba(15, 23, 42, 0.82);
}

html[data-theme="dark"] .ai-text-image-thumb__select:hover,
html[data-theme="dark"] .ai-text-image-thumb__select:focus-visible {
    background: var(--social-strong, var(--app-heading));
}

html[data-theme="dark"] .ai-text-image-preview-figure {
    background: color-mix(in srgb, var(--app-surface-muted) 86%, #0f172a 14%);
    border-color: #334155;
}

html[data-theme="dark"] .planner-day-item {
    --calendar-chip-strong: color-mix(in srgb, var(--calendar-chip-accent-dark) 58%, #f8fafc 42%);
    background: color-mix(in srgb, var(--calendar-chip-accent-dark) 8%, var(--app-surface) 92%);
    border-color: var(--app-border);
    border-left-color: var(--calendar-chip-strong);
    color: var(--calendar-chip-strong);
}

html[data-theme="dark"] .planner-calendar-mobile-day__header {
    background: #111827;
    border-color: #334155;
}

html[data-theme="dark"] .calendar-mobile-day-title {
    color: #f8fafc;
}

html[data-theme="dark"] .calendar-mobile-item-title {
    color: currentColor;
}

html[data-theme="dark"] .planner-calendar-mobile-item {
    --calendar-chip-strong: color-mix(in srgb, var(--calendar-chip-accent-dark) 58%, #f8fafc 42%);
    background: color-mix(in srgb, var(--calendar-chip-accent-dark) 8%, var(--app-surface) 92%);
    border-color: var(--app-border);
    border-left-color: var(--calendar-chip-strong);
    color: var(--calendar-chip-strong);
}

html[data-theme="dark"] .planner-calendar-mobile-item__social {
    color: currentColor;
}

html[data-theme="dark"] .post-calendar-pill {
    --calendar-chip-strong: color-mix(in srgb, var(--calendar-chip-accent-dark) 58%, #f8fafc 42%);
    background: color-mix(in srgb, var(--calendar-chip-accent-dark) 8%, var(--app-surface) 92%);
    border-color: var(--app-border);
    border-left-color: var(--calendar-chip-strong);
    color: var(--calendar-chip-strong);
}

html[data-theme="dark"] .post-calendar-pill:hover {
    background: color-mix(in srgb, var(--calendar-chip-accent-dark) 12%, var(--app-surface) 88%);
    border-color: var(--calendar-chip-strong);
    border-left-color: var(--calendar-chip-strong);
}

html[data-theme="dark"] .post-calendar-pill__title {
    color: currentColor;
}

html[data-theme="dark"] .post-calendar-pill:hover .post-calendar-pill__title {
    color: currentColor;
}

html[data-theme="dark"] .post-calendar-pill__time {
    color: #b8c4d6;
}

html[data-theme="dark"] .post-calendar-mobile-day__header {
    background: #111827;
    border-color: #334155;
}

html[data-theme="dark"] .post-calendar-mobile-item {
    --calendar-chip-strong: color-mix(in srgb, var(--calendar-chip-accent-dark) 58%, #f8fafc 42%);
    background: color-mix(in srgb, var(--calendar-chip-accent-dark) 8%, var(--app-surface) 92%);
    border-color: var(--app-border);
    border-left-color: var(--calendar-chip-strong);
    color: var(--calendar-chip-strong);
}

html[data-theme="dark"] .post-calendar-mobile-item:hover,
html[data-theme="dark"] .post-calendar-mobile-item:focus-visible {
    background: color-mix(in srgb, var(--calendar-chip-accent-dark) 12%, var(--app-surface) 88%);
    color: var(--calendar-chip-strong);
}

html[data-theme="dark"] .post-calendar-mobile-item__social {
    color: currentColor;
}

html[data-theme="dark"] .planner-day-item-icon {
    color: currentColor;
}

html[data-theme="dark"] .planner-day-detail-title {
    color: currentColor;
}

html[data-theme="dark"] .planner-day-detail-summary {
    color: #b8c4d6;
}

html[data-theme="dark"] .planner-day-detail-strategy-line {
    color: #a7b6ca;
}

html[data-theme="dark"] .planner-day-detail-strategy-line strong {
    color: #f8fafc;
}

html[data-theme="dark"] .planner-day-detail-strategy-separator {
    color: #64748b;
}

html[data-theme="dark"] .planner-day-detail-strategy-line a {
    color: var(--social-strong, var(--app-heading));
}

html[data-theme="dark"] .planner-day-detail-card .planner-social-badge {
    background: var(--social-surface);
    color: var(--social-strong);
    border-color: var(--app-border);
}

html[data-theme="dark"] .planner-day-item-strategy {
    background: color-mix(in srgb, var(--strategy-accent-dark) 10%, var(--app-surface) 90%);
    color: var(--strategy-accent-dark);
    border-color: var(--app-border);
    box-shadow: none;
}

html[data-theme="dark"] .planner-day-item-strategy:hover,
html[data-theme="dark"] .planner-day-item-strategy:focus {
    background: color-mix(in srgb, var(--strategy-accent-dark) 14%, var(--app-surface) 86%);
    border-color: var(--app-border);
}

html[data-theme="dark"] .planner-day-link {
    color: #93c5fd;
}

html[data-theme="dark"] .planner-day-link:hover,
html[data-theme="dark"] .planner-day-link:focus {
    color: #dbeafe;
}

html[data-theme="dark"] .planner-month-input {
    background: var(--app-field-background) !important;
    border-color: var(--app-field-border) !important;
    color: var(--app-field-text) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .config-color-picker {
    border-color: #334155;
    background: #0f172a;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
    border-color: var(--app-field-focus-border);
    box-shadow: var(--app-field-focus-shadow);
}

html[data-theme="dark"] .btn-primary-ui,
html[data-theme="dark"] .btn-login {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .btn-primary-ui:hover,
html[data-theme="dark"] .btn-login:hover {
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .btn-secondary-ui,
html[data-theme="dark"] .btn-outline-ui,
html[data-theme="dark"] .btn-subtle-ui {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #dbeafe !important;
    box-shadow: 0 1px 2px rgba(2, 6, 23, 0.32) !important;
}

html[data-theme="dark"] .btn-secondary-ui:hover,
html[data-theme="dark"] .btn-outline-ui:hover,
html[data-theme="dark"] .btn-subtle-ui:hover {
    background: #273449 !important;
    border-color: #475569 !important;
    color: #f8fafc !important;
    box-shadow: 0 2px 4px rgba(2, 6, 23, 0.40) !important;
}

html[data-theme="dark"] .btn-success-ui {
    background: #16a34a !important;
    border-color: #16a34a !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .btn-success-ui:hover,
html[data-theme="dark"] .btn-success-ui:focus,
html[data-theme="dark"] .btn-success-ui:active {
    background: #22c55e !important;
    border-color: #22c55e !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .btn-ai-ui {
    background: #7c3aed !important;
    border-color: #7c3aed !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .btn-ai-ui:hover,
html[data-theme="dark"] .btn-ai-ui:focus,
html[data-theme="dark"] .btn-ai-ui:active {
    background: #8b5cf6 !important;
    border-color: #8b5cf6 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .btn-warning-ui {
    background: #b45309 !important;
    border-color: #b45309 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .btn-warning-ui:hover,
html[data-theme="dark"] .btn-warning-ui:focus,
html[data-theme="dark"] .btn-warning-ui:active {
    background: #f59e0b !important;
    border-color: #f59e0b !important;
    color: #111827 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .btn-warning-subtle-ui {
    background: var(--app-warning-bg) !important;
    border-color: var(--app-warning-border) !important;
    color: var(--app-warning-text) !important;
    box-shadow: 0 1px 2px rgba(2, 6, 23, 0.32) !important;
}

html[data-theme="dark"] .btn-warning-subtle-ui:hover,
html[data-theme="dark"] .btn-warning-subtle-ui:focus,
html[data-theme="dark"] .btn-warning-subtle-ui:active {
    background: color-mix(in srgb, var(--app-warning-text) 10%, var(--app-warning-bg) 90%) !important;
    border-color: color-mix(in srgb, var(--app-warning-text) 28%, var(--app-warning-border) 72%) !important;
    color: var(--app-warning-text) !important;
    box-shadow: 0 2px 4px rgba(2, 6, 23, 0.40) !important;
}

html[data-theme="dark"] .btn-danger-ui {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .btn-danger-ui:hover,
html[data-theme="dark"] .btn-danger-ui:focus,
html[data-theme="dark"] .btn-danger-ui:active {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .btn-danger-subtle-ui {
    background: var(--app-error-bg) !important;
    border-color: var(--app-error-border) !important;
    color: var(--app-error-text) !important;
    box-shadow: 0 1px 2px rgba(2, 6, 23, 0.32) !important;
}

html[data-theme="dark"] .btn-danger-subtle-ui:hover,
html[data-theme="dark"] .btn-danger-subtle-ui:focus,
html[data-theme="dark"] .btn-danger-subtle-ui:active {
    background: color-mix(in srgb, var(--app-error-text) 10%, var(--app-error-bg) 90%) !important;
    border-color: color-mix(in srgb, var(--app-error-text) 28%, var(--app-error-border) 72%) !important;
    color: var(--app-error-text) !important;
    box-shadow: 0 2px 4px rgba(2, 6, 23, 0.40) !important;
}

.btn-ui:disabled,
.btn-login:disabled,
.btn-subtle-ui:disabled,
.btn-danger-ui:disabled,
.btn-danger-subtle-ui:disabled,
.btn-outline-ui:disabled,
.btn-primary-ui:disabled,
.btn-secondary-ui:disabled,
.btn-ai-ui:disabled,
.btn-ai-subtle-ui:disabled,
.btn-success-ui:disabled,
.btn-warning-ui:disabled,
.btn-warning-subtle-ui:disabled,
.btn-success-subtle-ui:disabled,
.btn-ui.disabled,
.btn-login.disabled,
.btn-subtle-ui.disabled,
.btn-danger-ui.disabled,
.btn-danger-subtle-ui.disabled,
.btn-outline-ui.disabled,
.btn-primary-ui.disabled,
.btn-secondary-ui.disabled,
.btn-ai-ui.disabled,
.btn-ai-subtle-ui.disabled,
.btn-success-ui.disabled,
.btn-warning-ui.disabled,
.btn-warning-subtle-ui.disabled,
.btn-success-subtle-ui.disabled,
.btn-ui[aria-disabled="true"],
.btn-login[aria-disabled="true"],
.btn-subtle-ui[aria-disabled="true"],
.btn-danger-ui[aria-disabled="true"],
.btn-danger-subtle-ui[aria-disabled="true"],
.btn-outline-ui[aria-disabled="true"],
.btn-primary-ui[aria-disabled="true"],
.btn-secondary-ui[aria-disabled="true"],
.btn-ai-ui[aria-disabled="true"],
.btn-ai-subtle-ui[aria-disabled="true"],
.btn-success-ui[aria-disabled="true"],
.btn-warning-ui[aria-disabled="true"],
.btn-warning-subtle-ui[aria-disabled="true"],
.btn-success-subtle-ui[aria-disabled="true"] {
    border-color: var(--app-border) !important;
    background: var(--app-surface-muted) !important;
    color: var(--app-muted) !important;
    box-shadow: none !important;
    opacity: 0.58 !important;
    filter: grayscale(0.35) !important;
    cursor: not-allowed !important;
    transform: none !important;
}

a.btn-ui.disabled,
a.btn-login.disabled,
a.btn-subtle-ui.disabled,
a.btn-danger-ui.disabled,
a.btn-danger-subtle-ui.disabled,
a.btn-outline-ui.disabled,
a.btn-primary-ui.disabled,
a.btn-secondary-ui.disabled,
a.btn-ai-ui.disabled,
a.btn-ai-subtle-ui.disabled,
a.btn-success-ui.disabled,
a.btn-warning-ui.disabled,
a.btn-warning-subtle-ui.disabled,
a.btn-success-subtle-ui.disabled,
a.btn-ui[aria-disabled="true"],
a.btn-login[aria-disabled="true"],
a.btn-subtle-ui[aria-disabled="true"],
a.btn-danger-ui[aria-disabled="true"],
a.btn-danger-subtle-ui[aria-disabled="true"],
a.btn-outline-ui[aria-disabled="true"],
a.btn-primary-ui[aria-disabled="true"],
a.btn-secondary-ui[aria-disabled="true"],
a.btn-ai-ui[aria-disabled="true"],
a.btn-ai-subtle-ui[aria-disabled="true"],
a.btn-success-ui[aria-disabled="true"],
a.btn-warning-ui[aria-disabled="true"],
a.btn-warning-subtle-ui[aria-disabled="true"],
a.btn-success-subtle-ui[aria-disabled="true"] {
    pointer-events: none;
}

.btn-primary-ui:disabled,
.btn-login:disabled,
.btn-primary-ui.disabled,
.btn-login.disabled,
.btn-primary-ui[aria-disabled="true"],
.btn-login[aria-disabled="true"] {
    border-color: color-mix(in srgb, #2563eb 48%, var(--app-border)) !important;
    background: color-mix(in srgb, #2563eb 16%, var(--app-surface-muted)) !important;
    color: color-mix(in srgb, #2563eb 72%, var(--app-text)) !important;
}

.btn-ai-ui:disabled,
.btn-ai-ui.disabled,
.btn-ai-ui[aria-disabled="true"] {
    border-color: color-mix(in srgb, var(--app-ai-text) 48%, var(--app-border)) !important;
    background: color-mix(in srgb, var(--app-ai-text) 16%, var(--app-surface-muted)) !important;
    color: color-mix(in srgb, var(--app-ai-text) 72%, var(--app-text)) !important;
}

.btn-success-ui:disabled,
.btn-success-ui.disabled,
.btn-success-ui[aria-disabled="true"] {
    border-color: color-mix(in srgb, var(--app-success-text) 48%, var(--app-border)) !important;
    background: color-mix(in srgb, var(--app-success-text) 16%, var(--app-surface-muted)) !important;
    color: color-mix(in srgb, var(--app-success-text) 72%, var(--app-text)) !important;
}

.btn-warning-ui:disabled,
.btn-warning-ui.disabled,
.btn-warning-ui[aria-disabled="true"] {
    border-color: color-mix(in srgb, var(--app-warning-text) 48%, var(--app-border)) !important;
    background: color-mix(in srgb, var(--app-warning-text) 16%, var(--app-surface-muted)) !important;
    color: color-mix(in srgb, var(--app-warning-text) 72%, var(--app-text)) !important;
}

.btn-danger-ui:disabled,
.btn-danger-ui.disabled,
.btn-danger-ui[aria-disabled="true"] {
    border-color: color-mix(in srgb, var(--app-error-text) 48%, var(--app-border)) !important;
    background: color-mix(in srgb, var(--app-error-text) 16%, var(--app-surface-muted)) !important;
    color: color-mix(in srgb, var(--app-error-text) 72%, var(--app-text)) !important;
}

html[data-theme="dark"] .btn-primary-ui:disabled,
html[data-theme="dark"] .btn-login:disabled,
html[data-theme="dark"] .btn-primary-ui.disabled,
html[data-theme="dark"] .btn-login.disabled,
html[data-theme="dark"] .btn-primary-ui[aria-disabled="true"],
html[data-theme="dark"] .btn-login[aria-disabled="true"] {
    background: color-mix(in srgb, #2563eb 30%, var(--app-surface-muted)) !important;
    color: color-mix(in srgb, #ffffff 82%, var(--app-muted)) !important;
}

html[data-theme="dark"] .btn-ai-ui:disabled,
html[data-theme="dark"] .btn-ai-ui.disabled,
html[data-theme="dark"] .btn-ai-ui[aria-disabled="true"] {
    background: color-mix(in srgb, var(--app-ai-text) 30%, var(--app-surface-muted)) !important;
    color: color-mix(in srgb, #ffffff 82%, var(--app-muted)) !important;
}

html[data-theme="dark"] .btn-success-ui:disabled,
html[data-theme="dark"] .btn-success-ui.disabled,
html[data-theme="dark"] .btn-success-ui[aria-disabled="true"] {
    background: color-mix(in srgb, var(--app-success-text) 30%, var(--app-surface-muted)) !important;
    color: color-mix(in srgb, #ffffff 82%, var(--app-muted)) !important;
}

html[data-theme="dark"] .btn-warning-ui:disabled,
html[data-theme="dark"] .btn-warning-ui.disabled,
html[data-theme="dark"] .btn-warning-ui[aria-disabled="true"] {
    background: color-mix(in srgb, var(--app-warning-text) 30%, var(--app-surface-muted)) !important;
    color: color-mix(in srgb, #ffffff 82%, var(--app-muted)) !important;
}

html[data-theme="dark"] .btn-danger-ui:disabled,
html[data-theme="dark"] .btn-danger-ui.disabled,
html[data-theme="dark"] .btn-danger-ui[aria-disabled="true"] {
    background: color-mix(in srgb, var(--app-error-text) 30%, var(--app-surface-muted)) !important;
    color: color-mix(in srgb, #ffffff 82%, var(--app-muted)) !important;
}

html[data-theme="dark"] .app-accordion,
html[data-theme="dark"] .app-accordion .accordion-button,
html[data-theme="dark"] .app-accordion .accordion-body {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

html[data-theme="dark"] .app-accordion .accordion-button:not(.collapsed) {
    background: var(--app-surface-muted) !important;
    color: var(--app-heading) !important;
}

html[data-theme="dark"] .ai-texts-timeline-accordion--weeks .accordion-button.collapsed {
    background: var(--app-surface) !important;
}

html[data-theme="dark"] .ai-texts-timeline-accordion--weeks .accordion-body {
    background: var(--app-surface-muted) !important;
}

html[data-theme="dark"] .muted,
html[data-theme="dark"] .small-note,
html[data-theme="dark"] .project-meta,
html[data-theme="dark"] .planner-analysis-copy-secondary,
html[data-theme="dark"] .planner-analysis-consistency-text,
html[data-theme="dark"] .planner-day-detail-subtitle,
html[data-theme="dark"] .debug-score-link,
html[data-theme="dark"] .ui-insight-supporting {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .config-card code,
html[data-theme="dark"] .config-help-note code {
    border-color: #475569;
    background: #0f172a;
    color: #dbeafe;
}

html[data-theme="dark"] .debug-score-value,
html[data-theme="dark"] .review-badge {
    background: #e2e8f0;
    color: #0f172a;
}

html[data-theme="dark"] .debug-score-best,
html[data-theme="dark"] .debug-signal-status.is-relevant,
html[data-theme="dark"] .planner-status-badge.status-approvato,
html[data-theme="dark"] .planner-status-badge.status-generato {
    background: rgba(22, 101, 52, 0.22) !important;
    border-color: rgba(34, 197, 94, 0.4) !important;
    color: #bbf7d0 !important;
}

html[data-theme="dark"] .planner-status-badge.status-da-approvare,
html[data-theme="dark"] .planner-status-badge.status-pending,
html[data-theme="dark"] .planner-status-badge.status-info {
    background: rgba(180, 83, 9, 0.18) !important;
    border-color: rgba(251, 191, 36, 0.42) !important;
    color: #fde68a !important;
}

html[data-theme="dark"] .planner-status-badge.status-secondary,
html[data-theme="dark"] .planner-status-badge.status-muted {
    background: rgba(148, 163, 184, 0.16) !important;
    border-color: rgba(203, 213, 225, 0.28) !important;
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .planner-status-badge.status-rifiutato,
html[data-theme="dark"] .planner-status-badge.status-errore {
    background: transparent !important;
    border-color: rgba(248, 113, 113, 0.42) !important;
    color: #fca5a5 !important;
}

html[data-theme="dark"] .surface-note,
html[data-theme="dark"] .page-header-context {
    color: var(--app-text);
}

@media (max-width: 575.98px) {
    .theme-switcher {
        max-width: calc(100vw - 20px);
    }

    .theme-switcher__panel {
        width: min(360px, calc(100vw - 20px));
        padding: 8px;
    }

    .theme-switcher__options {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
    }

    .theme-switcher__button {
        min-width: 0;
        line-height: 1;
    }

    .theme-switcher__button > span {
        min-width: 0;
        white-space: nowrap;
    }
}

body.login-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
}

.login-page,
.login-page .auth-card,
.login-page .login-card,
.login-page .auth-alert,
.login-page .btn,
.login-page .btn-login,
.login-page .site-footer {
    border-radius: var(--app-radius) !important;
}

.auth-card {
    width: 100%;
    position: relative;
}

.auth-alert {
    --bs-alert-border-color: var(--app-border);
    --bs-alert-bg: var(--app-surface);
    --bs-alert-color: var(--app-text);
    padding: 14px 16px;
    margin-bottom: 24px;
    font-size: 0.92rem;
    border: 1px solid var(--bs-alert-border-color);
    border-radius: var(--app-radius);
    background: var(--bs-alert-bg);
    color: var(--bs-alert-color);
}

.auth-alert--error {
    --bs-alert-color: var(--bs-danger-text-emphasis);
    --bs-alert-bg: var(--bs-danger-bg-subtle);
    --bs-alert-border-color: var(--bs-danger-border-subtle);
}

.auth-title {
    margin: 0 0 24px;
    text-align: center;
    font-size: 1.35rem;
    line-height: 1.08;
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--app-heading);
}

.auth-form {
    position: relative;
    z-index: 1;
}

.auth-label {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1px;
    color: var(--app-muted);
    text-transform: uppercase;
}

.auth-form-field {
    margin-bottom: 20px !important;
}

.auth-form-field--last {
    margin-bottom: 28px !important;
}

.auth-control {
    height: 48px;
    min-height: 48px;
    line-height: 1.2;
    font-size: 0.98rem;
}

.auth-actions {
    margin-top: 0;
}

.btn-auth-ui {
    width: 100%;
    height: 56px;
    min-height: 56px;
}

.login-page .page {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 88px 24px;
    position: relative;
    z-index: 1;
}

.login-page .login-card {
    max-width: 596px;
    margin-top: -40px;
    background: var(--app-gradient-surface);
    border: 1px solid var(--app-border);
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    padding: 56px 56px 48px;
    box-shadow: none;
    position: relative;
    overflow: visible;
}

.login-page .login-card.surface-accent-top::before {
    border-top-left-radius: var(--app-radius);
    border-top-right-radius: var(--app-radius);
}

.login-card__social-rail {
    --login-social-gradient: var(--app-logo-gradient);
    --login-social-dot-size: 37px;
    --login-social-gap: 8px;
    --login-social-step: calc(var(--login-social-dot-size) + var(--login-social-gap));
    --login-social-gradient-width: calc((var(--login-social-dot-size) * 7) + (var(--login-social-gap) * 6));
    --login-social-gradient-shift: 0px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--login-social-gap);
    width: 100%;
    margin: -16px 0 26px;
    pointer-events: none;
    user-select: none;
}

.login-card__social-dot {
    --login-social-offset: 0px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--login-social-dot-size);
    height: var(--login-social-dot-size);
    border: 1px solid color-mix(in srgb, var(--app-primary) 16%, transparent);
    border-radius: var(--app-radius-pill);
    background: color-mix(in srgb, var(--app-primary) 6%, var(--app-surface) 94%);
    color: inherit;
    font-size: 1.1rem;
    line-height: 1;
}

.login-card__social-dot i {
    background: var(--login-social-gradient);
    background-size: var(--login-social-gradient-width) 100%;
    background-position: calc(var(--login-social-gradient-shift) - var(--login-social-offset)) 50%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.login-card__social-dot:nth-child(2) {
    --login-social-offset: calc(var(--login-social-step) * 1);
}

.login-card__social-dot:nth-child(3) {
    --login-social-offset: calc(var(--login-social-step) * 2);
}

.login-card__social-dot:nth-child(4) {
    --login-social-offset: calc(var(--login-social-step) * 3);
}

.login-card__social-dot:nth-child(5) {
    --login-social-offset: calc(var(--login-social-step) * 4);
}

.login-card__social-dot:nth-child(6) {
    --login-social-offset: calc(var(--login-social-step) * 5);
}

.login-card__social-dot:nth-child(7) {
    --login-social-offset: calc(var(--login-social-step) * 6);
}

.login-page .brand {
    margin-bottom: 28px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.login-page .planner-brand--hero {
    gap: 0;
    align-items: center;
}

.privacy-page {
    min-height: 100vh;
    color: var(--app-text);
}

.privacy-page__main {
    min-height: 100vh;
    padding: 72px 24px;
}

.privacy-page__shell {
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
}

.privacy-page__card {
    position: relative;
    overflow: visible;
    background: var(--app-gradient-surface);
    border: 1px solid var(--app-border);
    padding: 40px;
    box-shadow: none;
}

.privacy-page__brand {
    margin-bottom: 28px;
}

.privacy-page__card section {
    border-top: 1px solid var(--app-border);
    padding-top: 22px;
}

@media (max-width: 767.98px) {
    .privacy-page__main {
        padding: 48px 16px;
    }

    .privacy-page__card {
        padding: 28px 20px;
    }
}

@media (max-width: 575.98px) {
    .help-layout {
        grid-template-columns: 1fr;
    }

    .help-sidebar {
        position: static;
    }

    .help-nav-list {
        gap: 8px;
        margin-top: 12px;
    }

    .help-page .help-nav-card {
        padding: 12px 14px;
    }

    .help-page .help-nav-card .page-nav-card__title {
        margin-bottom: 0;
        font-size: 0.94rem;
    }

    .help-page .help-nav-card .muted {
        display: none;
    }

    .login-page .page {
        padding: 64px 18px 24px;
    }

    .login-page .login-card {
        margin-top: 0;
        padding: 40px 24px 28px;
    }

    .login-page .auth-title {
        font-size: 1.18rem;
    }

    .login-card__social-rail {
        --login-social-dot-size: 31px;
        --login-social-gap: 6px;
        margin: -8px 0 22px;
    }

    .login-card__social-dot {
        font-size: 0.96rem;
    }
}
.publish-event-details-row > td {
    border-top: 0;
    padding-top: 0;
    padding-bottom: 0.35rem;
}

.publish-event-details {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface-muted);
    padding: 0.28rem 0.55rem;
    font-size: 0.82rem;
    line-height: 1.25;
}

.publish-event-details > summary {
    cursor: pointer;
    color: var(--app-muted);
    font-weight: 650;
    line-height: 1.2;
}

.publish-event-details__block {
    margin-top: 0.45rem;
}

.publish-event-details__pre {
    max-height: 16rem;
    overflow: auto;
    margin: 0;
    padding: 0.5rem;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface);
    color: var(--app-text);
    font-size: 0.78rem;
    line-height: 1.35;
    white-space: pre-wrap;
    word-break: break-word;
}

.prompt-source-pre {
    max-height: 28rem;
    overflow: auto;
    margin: 0;
    padding: 0.75rem;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface);
    color: var(--app-text);
    font-size: 0.78rem;
    line-height: 1.42;
    white-space: pre-wrap;
    word-break: break-word;
}

.vertical-triplet-uploader {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.vertical-triplet-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 14rem;
    padding: 1.5rem;
    border: 1px dashed var(--app-border-strong);
    border-radius: var(--app-radius-lg);
    background: var(--app-surface-muted);
    color: var(--app-text);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.16s ease, background-color 0.16s ease, transform 0.16s ease;
}

.vertical-triplet-dropzone:hover,
.vertical-triplet-dropzone.is-dragover {
    border-color: var(--app-info-text);
    background: var(--app-info-bg);
    transform: translateY(-1px);
}

.vertical-triplet-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.vertical-triplet-dropzone__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    background: var(--app-surface);
    color: var(--app-info-text);
    font-size: 1.45rem;
}

.vertical-triplet-dropzone__title {
    color: var(--app-heading);
    font-weight: 800;
}

.vertical-triplet-dropzone__copy {
    max-width: 30rem;
    color: var(--app-muted);
    font-size: 0.92rem;
}

.vertical-triplet-dropzone__button {
    margin-top: 0.25rem;
}

.vertical-triplet-order {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface);
    padding: 1rem;
}

.vertical-triplet-sort-strip {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    min-height: 19rem;
    overflow-x: auto;
    padding: 0.15rem 0.1rem 0.35rem;
    scroll-snap-type: x proximity;
}

.vertical-triplet-sort-empty {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 8rem;
    border: 1px dashed var(--app-border);
    border-radius: var(--app-radius);
    color: var(--app-muted);
    font-size: 0.9rem;
    text-align: center;
}

.vertical-triplet-sort-card {
    position: relative;
    display: grid;
    grid-template-rows: 13rem auto auto;
    flex: 0 0 clamp(16rem, 22vw, 20rem);
    overflow: hidden;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface-muted);
    cursor: grab;
    scroll-snap-align: start;
}

.vertical-triplet-sort-card.is-dragging {
    opacity: 0.58;
}

.vertical-triplet-sort-card__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--app-surface);
}

.vertical-triplet-sort-card__meta {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    min-width: 0;
    padding: 0.6rem 0.7rem 0.45rem;
}

.vertical-triplet-sort-card__order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    background: var(--app-info-bg);
    color: var(--app-info-text);
    font-size: 0.76rem;
    font-weight: 800;
    flex: 0 0 auto;
}

.vertical-triplet-sort-card__name {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--app-text);
    font-size: 0.82rem;
    font-weight: 650;
    line-height: 1.25;
    white-space: normal;
}

.vertical-triplet-sort-card__time {
    display: grid;
    gap: 0.25rem;
    padding: 0 0.6rem 0.6rem;
    color: var(--app-muted);
    font-size: 0.76rem;
    font-weight: 700;
}

.vertical-triplet-sort-card__remove {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border: 1px solid var(--app-border);
    border-radius: 999px;
    background: var(--app-surface);
    color: var(--app-muted);
}

.vertical-triplet-sort-card__remove:hover,
.vertical-triplet-sort-card__remove:focus-visible {
    color: var(--app-error-text);
    border-color: var(--app-error-border);
}

.vertical-triplet-job-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.vertical-triplet-job-actions__main,
.vertical-triplet-job-actions__danger {
    align-items: center;
}

.vertical-triplet-job-actions__main.page-actions {
    margin-top: 0.75rem;
}

.vertical-triplet-job-context {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.55rem;
    align-items: baseline;
    padding: 0.65rem 0;
    border-top: 1px solid var(--app-border);
    border-bottom: 1px solid var(--app-border);
}

.vertical-triplet-job-context__label {
    color: var(--app-muted);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.vertical-triplet-job-context__value {
    color: var(--app-text);
    font-size: 0.92rem;
    overflow-wrap: anywhere;
}

.vertical-triplet-result-card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1rem;
}

.vertical-triplet-result-card__image-button {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
}

.vertical-triplet-result-card__image-button:focus-visible {
    outline: 2px solid var(--app-focus-ring);
    outline-offset: 3px;
}

.vertical-triplet-result-card__image {
    display: block;
    width: 100%;
    height: clamp(18rem, 30vw, 26rem);
    object-fit: contain;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface);
}

.vertical-triplet-result-card__filename {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--app-text) !important;
    font-size: 0.86rem !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    line-height: 1.25 !important;
}

.vertical-triplet-caption-textarea {
    min-height: 18rem;
    font-size: 0.9rem;
    line-height: 1.42;
}

.vertical-triplet-image-preview-modal__body {
    display: grid;
    place-items: center;
    padding: 1rem;
    overflow: hidden;
    background: var(--app-bg);
}

.vertical-triplet-image-preview-modal__image {
    display: block;
    max-width: 100%;
    max-height: calc(100dvh - 7.5rem);
    object-fit: contain;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface);
}

@media (max-width: 991.98px) {
    .vertical-triplet-sort-strip {
        min-height: 20rem;
    }

    .vertical-triplet-sort-card {
        grid-template-rows: 14rem auto auto;
        flex-basis: 16rem;
    }

    .vertical-triplet-result-card__image {
        height: clamp(18rem, 52vw, 28rem);
    }

    .vertical-triplet-caption-textarea {
        min-height: 15rem;
        font-size: 0.95rem;
    }
}

@media (max-width: 575.98px) {
    .vertical-triplet-sort-strip {
        min-height: 20rem;
    }

    .vertical-triplet-sort-card {
        grid-template-rows: minmax(13rem, 1fr) auto auto;
        flex-basis: min(82vw, 17rem);
    }

    .vertical-triplet-job-actions {
        display: block;
    }

    .vertical-triplet-job-actions__danger {
        margin-top: 0.75rem;
    }

    .vertical-triplet-result-card__image {
        height: min(92vw, 28rem);
    }
}

@media (max-width: 575.98px) {
    .app-table--label-inventory {
        min-width: 0;
    }

    .app-table--label-inventory thead {
        display: none;
    }

    .app-table--label-inventory tbody,
    .app-table--label-inventory tr,
    .app-table--label-inventory td {
        display: block;
        width: 100%;
    }

    .app-table--label-inventory tr {
        padding: 0.72rem 0;
        border-bottom: 1px solid var(--app-border);
    }

    .app-table--label-inventory tr:last-child {
        border-bottom: 0;
    }

    .app-table--label-inventory td {
        padding: 0.34rem 0;
        border: 0;
    }

    .app-table--label-inventory td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 0.24rem;
        color: var(--app-muted);
        font-size: 0.72rem;
        font-weight: 800;
    }

    .app-table--label-inventory code,
    .app-table--label-inventory .config-chip {
        max-width: 100%;
    }
}