/* app.css — tema skedo.io
   Visual identity: base #2D8CE9 (blu) e #08245B (navy), dettagli #FF5252 e
   #4CAF50, font Poppins. Ogni colore e spaziatura passa dai token qui sotto:
   niente valori scritti a mano nei fogli di pagina. */

/* ==================== */
/* Tokens               */
/* ==================== */

:root {
    /* Brand */
    --primary-color: #2D8CE9;
    --primary-hover: #1F74C9;
    --primary-soft: rgba(45, 140, 233, 0.12);
    --background-active: rgba(45, 140, 233, 0.12);
    --secondary-color: #08245B;
    --secondary-hover: #0B2F74;

    /* Testo */
    --text-primary: #0B1B3F;
    --text-secondary: #5B6B86;
    --text-muted: #9AA8BF;
    --text-on-dark: #FFFFFF;
    --text-on-dark-muted: rgba(255, 255, 255, 0.68);
    --text-color: var(--text-primary);

    /* Superfici */
    --background: #F4F7FB;
    --background-alt: #FFFFFF;
    --surface-muted: #EEF3FA;
    --border-color: #DFE6F0;
    --border-strong: #C7D3E3;

    /* Stati */
    --success: #4CAF50;
    --success-soft: rgba(76, 175, 80, 0.14);
    --danger: #FF5252;
    --danger-hover: #E64545;
    --danger-soft: rgba(255, 82, 82, 0.12);
    --warning: #F5A623;
    --warning-soft: rgba(245, 166, 35, 0.16);
    --info-soft: var(--primary-soft);

    /* Grafici */
    --chart-color-1: #2D8CE9;
    --chart-color-2: #08245B;
    --chart-color-3: #4CAF50;
    --chart-color-4: #FF5252;
    --chart-color-5: #F5A623;

    /* Tipografia */
    --font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.8125rem;
    --font-size-md: 0.9375rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;

    /* Spaziature */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    /* Raggi */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-pill: 999px;

    /* Ombre */
    --shadow-sm: 0 1px 2px rgba(8, 36, 91, 0.06);
    --shadow-md: 0 4px 14px rgba(8, 36, 91, 0.08);
    --shadow-lg: 0 12px 32px rgba(8, 36, 91, 0.14);
    --focus-ring: 0 0 0 3px rgba(45, 140, 233, 0.28);

    /* Layout */
    --sidebar-width: 248px;
    --topbar-height: 64px;
    --container-max-width: 1280px;
    --transition: 160ms ease;
}

/* ==================== */
/* Reset & base         */
/* ==================== */

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-md);
    color: var(--text-primary);
    background-color: var(--background);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

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

a:hover {
    color: var(--primary-hover);
}

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

code {
    font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
    font-size: 0.85em;
    background: var(--surface-muted);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
}

.code-small {
    font-size: var(--font-size-xs);
    word-break: break-all;
}

::selection {
    background: var(--primary-soft);
}

/* ==================== */
/* Tipografia           */
/* ==================== */

h1, h2, h3, h4 {
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-primary);
}

.section-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
}

.section-subtitle {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-md);
}

.text-primary { color: var(--primary-color); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.text-bold { font-weight: 600; }
.text-small { font-size: var(--font-size-sm); }
.text-center { text-align: center; }
.text-link { color: var(--text-primary); }
.text-link:hover { color: var(--primary-color); }

/* ==================== */
/* Bottoni              */
/* ==================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    min-height: 42px;
    padding: 0 var(--spacing-lg);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-size: var(--font-size-md);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
    background: transparent;
    color: var(--text-primary);
}

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

.btn:disabled,
.btn.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn-primary {
    background: var(--primary-color);
    color: var(--text-on-dark);
}

.btn-primary:hover {
    background: var(--primary-hover);
    color: var(--text-on-dark);
}

.btn-secondary {
    background: var(--secondary-color);
    color: var(--text-on-dark);
}

.btn-secondary:hover {
    background: var(--secondary-hover);
    color: var(--text-on-dark);
}

.btn-outline {
    border-color: var(--border-strong);
    background: var(--background-alt);
    color: var(--text-primary);
}

.btn-outline:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-danger {
    background: var(--danger);
    color: var(--text-on-dark);
}

.btn-danger:hover {
    background: var(--danger-hover);
    color: var(--text-on-dark);
}

.btn-text {
    min-height: auto;
    padding: 0;
    color: var(--primary-color);
}

.btn-text:hover {
    color: var(--primary-hover);
}

.btn-sm {
    min-height: 34px;
    padding: 0 var(--spacing-md);
    font-size: var(--font-size-sm);
}

.btn-lg {
    min-height: 50px;
    padding: 0 var(--spacing-xl);
}

.btn-block {
    width: 100%;
}

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

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--spacing-md);
}

.form-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.form-hint {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

/* Messaggi d'errore sotto i campi: .form-hint viene dopo .text-danger e lo coprirebbe. */
.form-hint.text-danger {
    color: var(--danger);
    font-weight: 600;
}

.form-control {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--background-alt);
    font-size: var(--font-size-md);
    color: var(--text-primary);
    transition: border-color var(--transition), box-shadow var(--transition);
}

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

.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: var(--focus-ring);
}

.form-control--sm {
    min-height: 34px;
    padding: 4px 10px;
    font-size: var(--font-size-sm);
}

select.form-control {
    appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%235B6B86' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 var(--spacing-md);
}

@media (min-width: 768px) {
    .form-row--2 {
        grid-template-columns: 1fr 1fr;
    }
}

.form-actions {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: flex-end;
    margin-top: var(--spacing-md);
}

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

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--primary-color);
}

/* ==================== */
/* Badge                */
/* ==================== */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
    font-weight: 600;
    line-height: 1.6;
    background: var(--surface-muted);
    color: var(--text-secondary);
    white-space: nowrap;
}

.badge-primary { background: var(--primary-soft); color: var(--primary-color); }
.badge-success { background: var(--success-soft); color: #2E7D32; }
.badge-danger { background: var(--danger-soft); color: var(--danger-hover); }
.badge-warning { background: var(--warning-soft); color: #9A6200; }
.badge-muted { background: var(--surface-muted); color: var(--text-secondary); }
.badge-info { background: var(--info-soft); color: var(--secondary-color); }

.badge-role--owner { background: var(--secondary-color); color: var(--text-on-dark); }
.badge-role--admin { background: var(--primary-soft); color: var(--primary-color); }
.badge-role--marketer { background: var(--success-soft); color: #2E7D32; }
.badge-role--creator { background: var(--info-soft); color: var(--secondary-color); }
.badge-role--sales { background: var(--warning-soft); color: #9A6200; }
.badge-role--viewer { background: var(--surface-muted); color: var(--text-secondary); }

/* ==================== */
/* Card                 */
/* ==================== */

.card {
    background: var(--background-alt);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-lg);
}

.card + .card {
    margin-top: var(--spacing-lg);
}

/* Nelle griglie la distanza la decide il gap */
.grid-2 > .card + .card,
.stat-grid > .card + .card {
    margin-top: 0;
}

.card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.card__title {
    font-size: var(--font-size-lg);
    font-weight: 600;
}

.card__subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.card--narrow {
    max-width: 640px;
}

/* ==================== */
/* Avvisi (flash)       */
/* ==================== */

.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-md);
    border: 1px solid transparent;
}

.alert iconify-icon {
    flex-shrink: 0;
    margin-top: 1px;
}

.alert-success { background: var(--success-soft); color: #1F5E22; border-color: rgba(76, 175, 80, 0.3); }
.alert-error { background: var(--danger-soft); color: #9E1F1F; border-color: rgba(255, 82, 82, 0.3); }
.alert-warning { background: var(--warning-soft); color: #7A4E00; border-color: rgba(245, 166, 35, 0.35); }
.alert-info { background: var(--info-soft); color: var(--secondary-color); border-color: rgba(45, 140, 233, 0.3); }

/* ==================== */
/* Avatar               */
/* ==================== */

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary-color);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.avatar--sm {
    width: 32px;
    height: 32px;
    font-size: var(--font-size-xs);
}

.avatar--square {
    border-radius: var(--radius-sm);
    background: var(--secondary-color);
    color: var(--text-on-dark);
}

.member-cell {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    line-height: 1.35;
}

/* ==================== */
/* Layout autenticazione */
/* ==================== */

.auth-layout {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
}

.auth-aside {
    display: none;
    position: relative;
    overflow: hidden;
    background: var(--secondary-color);
    color: var(--text-on-dark);
    padding: var(--spacing-2xl);
}

.auth-aside__logo {
    height: 40px;
    width: auto;
}

.auth-aside__claim {
    margin-top: 18vh;
    max-width: 420px;
}

.auth-aside__claim h2 {
    color: var(--text-on-dark);
    font-size: var(--font-size-2xl);
    font-weight: 700;
    margin-bottom: var(--spacing-md);
}

.auth-aside__claim p {
    color: var(--text-on-dark-muted);
}

.auth-aside__points {
    list-style: none;
    margin-top: var(--spacing-xl);
    display: grid;
    gap: var(--spacing-sm);
}

.auth-aside__points li {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-on-dark);
}

.auth-aside__points iconify-icon {
    color: var(--primary-color);
}

/* Il marchio grande sullo sfondo, come nella visual identity */
.auth-aside__mark {
    position: absolute;
    right: -80px;
    bottom: -60px;
    width: 420px;
    opacity: 0.07;
    filter: brightness(0) invert(1);
    pointer-events: none;
}

.auth-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl) var(--spacing-md);
}

.auth-card {
    width: 100%;
    max-width: 440px;
}

.auth-card__logo {
    height: 34px;
    width: auto;
    margin-bottom: var(--spacing-xl);
}

.auth-card__title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin-bottom: 4px;
}

.auth-card__subtitle {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
}

.auth-card__forgot {
    display: block;
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-sm);
    text-align: right;
}

.auth-card__footer {
    margin-top: var(--spacing-lg);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    text-align: center;
}

.auth-locale {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
    margin-top: var(--spacing-lg);
    font-size: var(--font-size-xs);
}

.auth-locale a {
    color: var(--text-secondary);
}

.auth-locale a.is-active {
    color: var(--primary-color);
    font-weight: 600;
}

@media (min-width: 992px) {
    .auth-layout {
        grid-template-columns: minmax(380px, 44%) 1fr;
    }

    .auth-aside {
        display: block;
    }

    .auth-card__logo {
        display: none;
    }
}

/* ==================== */
/* Layout app           */
/* ==================== */

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

.app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-width);
    background: var(--secondary-color);
    color: var(--text-on-dark);
    display: flex;
    flex-direction: column;
    z-index: 40;
    transform: translateX(-100%);
    transition: transform 220ms ease;
}

.app-sidebar.is-open {
    transform: translateX(0);
    box-shadow: var(--shadow-lg);
}

.app-sidebar__brand {
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    padding: 0 var(--spacing-lg);
    flex-shrink: 0;
}

.app-sidebar__brand img {
    height: 30px;
    width: auto;
}

.app-sidebar__nav {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-lg);
}

.nav-section {
    margin-top: var(--spacing-lg);
}

.nav-section__title {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-on-dark-muted);
    padding: 0 12px;
    margin-bottom: 6px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: var(--radius-md);
    color: var(--text-on-dark-muted);
    font-size: var(--font-size-sm);
    font-weight: 500;
    white-space: nowrap;
    transition: background var(--transition), color var(--transition);
}

.nav-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-on-dark);
}

.nav-link.is-active {
    background: var(--primary-color);
    color: var(--text-on-dark);
}

.nav-link.is-soon {
    cursor: default;
    opacity: 0.55;
}

.nav-link.is-soon:hover {
    background: transparent;
    color: var(--text-on-dark-muted);
}

.nav-link__soon {
    margin-left: auto;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 1px 6px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.12);
}

.app-sidebar__footer {
    padding: var(--spacing-md);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: var(--font-size-xs);
    color: var(--text-on-dark-muted);
}

.app-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 36, 91, 0.45);
    z-index: 35;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
}

.app-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.app-main {
    min-width: 0;
}

@media (max-width: 575px) {
    .stat {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .stat__value {
        font-size: var(--font-size-xl);
    }

    .page-header .btn {
        width: 100%;
    }
}

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 0 var(--spacing-md);
    background: var(--background-alt);
    border-bottom: 1px solid var(--border-color);
}

.app-topbar__menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
}

.app-topbar__menu:hover {
    background: var(--surface-muted);
}

.app-topbar__spacer {
    flex: 1;
}

.app-content {
    padding: var(--spacing-lg) var(--spacing-md) var(--spacing-2xl);
    max-width: var(--container-max-width);
    margin: 0 auto;
}

/* Pagine di lavoro (es. pipeline) che usano tutta la larghezza disponibile. */
.app-content--full {
    max-width: none;
}

@media (min-width: 992px) {
    .app-sidebar {
        transform: none;
    }

    .app-overlay {
        display: none;
    }

    .app-main {
        margin-left: var(--sidebar-width);
    }

    .app-topbar {
        padding: 0 var(--spacing-xl);
    }

    .app-topbar__menu {
        display: none;
    }

    .app-content {
        padding: var(--spacing-xl);
    }
}

/* Banner impersonazione: deve vedersi sempre */
.impersonation-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm) var(--spacing-md);
    padding: 8px var(--spacing-md);
    background: var(--warning);
    color: var(--secondary-color);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

/* ==================== */
/* Dropdown             */
/* ==================== */

.dropdown {
    position: relative;
}

.dropdown__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-height: 42px;
    padding: 4px 10px 4px 4px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    cursor: pointer;
    text-align: left;
    max-width: 100%;
}

.dropdown__toggle:hover,
.dropdown.is-open .dropdown__toggle {
    background: var(--surface-muted);
}

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

.dropdown__label {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.dropdown__label strong {
    font-size: var(--font-size-sm);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

.dropdown__label span {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.dropdown__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 260px;
    max-width: calc(100vw - 32px);
    background: var(--background-alt);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    display: none;
    z-index: 50;
}

.dropdown--right .dropdown__menu {
    left: auto;
    right: 0;
}

.dropdown.is-open .dropdown__menu {
    display: block;
}

.dropdown__heading {
    padding: 8px 10px 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.dropdown__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    text-align: left;
    cursor: pointer;
}

.dropdown__item:hover {
    background: var(--surface-muted);
    color: var(--text-primary);
}

.dropdown__item.is-active {
    color: var(--primary-color);
    font-weight: 600;
}

.dropdown__item--danger {
    color: var(--danger-hover);
}

.dropdown__divider {
    height: 1px;
    background: var(--border-color);
    margin: 6px 0;
}

/* ==================== */
/* Header di pagina     */
/* ==================== */

.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.page-header__title {
    font-size: var(--font-size-xl);
    font-weight: 600;
}

.page-header__subtitle {
    color: var(--text-secondary);
    margin-top: 2px;
}

.section-header {
    margin-bottom: var(--spacing-lg);
}

/* ==================== */
/* Statistiche e card home */
/* ==================== */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.stat {
    background: var(--background-alt);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md) var(--spacing-lg);
}

.stat__label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.stat__value {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    line-height: 1.2;
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}

.step-list {
    list-style: none;
    display: grid;
    gap: var(--spacing-sm);
}

.step {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: 14px var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--background-alt);
}

.step__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--primary-soft);
    color: var(--primary-color);
}

.step.is-done .step__icon {
    background: var(--success-soft);
    color: var(--success);
}

.step__body {
    flex: 1;
    min-width: 0;
}

.step__title {
    font-weight: 600;
    font-size: var(--font-size-md);
}

.step__text {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* Elenco workspace */
.workspace-list {
    display: grid;
    gap: var(--spacing-sm);
}

.workspace-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: 14px var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--background-alt);
}

.workspace-item.is-active {
    border-color: var(--primary-color);
    box-shadow: var(--focus-ring);
}

.workspace-item__body {
    flex: 1;
    min-width: 0;
}

.workspace-item__name {
    font-weight: 600;
}

.workspace-item__meta {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* Matrice ruoli/permessi */
.matrix td,
.matrix th {
    text-align: center;
}

.matrix td:first-child,
.matrix th:first-child {
    text-align: left;
}

.matrix__group td {
    background: var(--surface-muted);
    font-weight: 600;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}

.matrix__yes {
    color: var(--success);
}

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

/* Liste a definizione (dettagli) */
.details {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px var(--spacing-lg);
    font-size: var(--font-size-sm);
}

.details dt {
    color: var(--text-secondary);
}

/* ==================== */
/* Utility              */
/* ==================== */

.d-flex { display: flex; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.align-items-center { align-items: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-end { justify-content: flex-end; }
.gap-xs { gap: var(--spacing-xs); }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--spacing-xs); }
.mt-2 { margin-top: var(--spacing-sm); }
.mt-3 { margin-top: var(--spacing-md); }
.mt-4 { margin-top: var(--spacing-lg); }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-xs); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-3 { margin-bottom: var(--spacing-md); }
.mb-4 { margin-bottom: var(--spacing-lg); }
.w-100 { width: 100%; }
.hide { display: none !important; }

.grid-2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-lg);
}

/* Le colonne non devono allargarsi per far posto a una tabella:
   la tabella scorre dentro il suo contenitore. */
.grid-2 > * {
    min-width: 0;
}

@media (min-width: 992px) {
    .grid-2 {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .grid-2--wide-left {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }
}

/* Tabelle: rifiniture sopra table.css */
.table-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-sm);
}

.table-actions select {
    min-width: 132px;
}

.btn-action--danger:hover {
    color: var(--danger);
    background: var(--danger-soft);
}

.btn-action--primary {
    color: var(--primary-color);
    background: var(--primary-soft);
}

/* Anteprima del post da approvare */
.review-preview {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    padding: var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
}

.review-media {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.review-media img,
.review-media video {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.review-history {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--spacing-sm);
}

.review-history li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--spacing-sm);
    align-items: baseline;
    font-size: var(--font-size-sm);
}

.review-history time {
    color: var(--text-secondary);
    white-space: nowrap;
}

.composer-actions {
    display: grid;
    gap: var(--spacing-sm);
}

/* SweetAlert2 nel tema */
.swal2-popup {
    font-family: var(--font-family) !important;
    border-radius: var(--radius-lg) !important;
}

.swal2-styled.swal2-confirm {
    background: var(--primary-color) !important;
    border-radius: var(--radius-md) !important;
}

.swal2-styled.swal2-cancel {
    border-radius: var(--radius-md) !important;
}

/* Avvisi a comparsa (notify in utils.js) */
.swal2-popup.skedo-toast {
    padding: var(--spacing-sm) var(--spacing-md) !important;
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 24px rgba(11, 27, 63, 0.12) !important;
    max-width: 420px;
}

.skedo-toast .swal2-title {
    font-size: var(--font-size-sm) !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    line-height: 1.4;
}

.skedo-toast .swal2-timer-progress-bar {
    background: var(--border-strong);
}

/* Pagine di errore */
.error-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-md);
}

.error-page__code {
    font-size: 4rem;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1;
}

.error-page__text {
    color: var(--text-secondary);
    margin: var(--spacing-md) 0 var(--spacing-lg);
}

/* Login superadmin: pagina singola senza colonna laterale */
.auth-main--full {
    min-height: 100vh;
}

.auth-card__logo--always {
    display: block !important;
}

/* ==================== */
/* Integrazioni         */
/* ==================== */

.integration__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.integration__intro {
    flex: 1;
    min-width: 200px;
}

.integration__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: var(--surface-muted);
}

.integration__account {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

.integration__account-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm) var(--spacing-md);
}

.integration__account-name {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 180px;
    line-height: 1.35;
}

.channel {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
    padding: 12px var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--background);
}

.channel.is-disabled {
    opacity: 0.55;
}

.channel__picture {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.channel__body {
    flex: 1;
    min-width: 0;
}

.channel__name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.channel__meta {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.integration-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: var(--spacing-md);
}

.integration-tile {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--background-alt);
}

.integration-tile__body {
    flex: 1;
    min-width: 0;
}

.integration-tile__name {
    font-weight: 600;
}

.integration-tile__text {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    line-height: 1.4;
}

@media (max-width: 575px) {
    .channel {
        flex-wrap: wrap;
    }

    .channel .switch-form {
        width: 100%;
    }

    .channel .switch-form .btn {
        width: 100%;
    }
}

/* ==================== */
/* Pubblicazioni        */
/* ==================== */

textarea.form-control {
    min-height: 120px;
    resize: vertical;
    line-height: 1.5;
}

input[type="file"].form-control {
    padding: 8px 10px;
    cursor: pointer;
}

.check-field {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: 6px 0;
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.check-field input {
    margin-top: 3px;
    flex-shrink: 0;
}

.upload-progress {
    margin-top: var(--spacing-md);
}

.upload-progress__bar {
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--surface-muted);
    overflow: hidden;
}

.upload-progress__bar span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--primary-color);
    transition: width 200ms linear;
}

.upload-progress__text {
    margin-top: 6px;
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

/* Anteprima del file scelto nel form di pubblicazione */
.video-preview {
    display: block;
    width: 100%;
    max-height: 360px;
    margin-top: var(--spacing-sm);
    border-radius: var(--radius-md);
    background: var(--secondary-color);
}

img.video-preview {
    object-fit: contain;
}

/* Scelta dei canali su cui pubblicare */
.channel-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: var(--spacing-sm);
}

.channel--pick {
    min-width: 0;
    margin-top: 0;
    cursor: pointer;
}

.channel--pick .channel__name {
    display: block;
}

.channel--pick:has(input:checked) {
    border-color: var(--primary-color);
    background: var(--primary-soft);
}

.channel--pick.is-disabled {
    cursor: not-allowed;
}

.channel--pick .channel__meta {
    overflow: hidden;
}

/* Testi diversi per canale, chiusi finche' non servono */
.composer-variants {
    margin-top: var(--spacing-md);
}

.composer-variants summary {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--primary-color);
    cursor: pointer;
}

.composer-variants .form-group:last-child {
    margin-bottom: 0;
}

/* ==================== */
/* Calendario editoriale */
/* ==================== */

.calendar-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.calendar-toolbar__nav,
.calendar-toolbar__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm);
}

.calendar-toolbar__label {
    margin: 0 0 0 var(--spacing-sm);
    font-size: var(--font-size-lg);
    font-weight: 600;
}

.calendar-toolbar__filters .form-control {
    width: auto;
    min-width: 170px;
}

/* Scelta tra due viste (mese, settimana) */
.segmented {
    display: inline-flex;
    padding: 3px;
    border-radius: var(--radius-md);
    background: var(--surface-muted);
}

.segmented__item {
    padding: 6px var(--spacing-md);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
}

/* Anche come <button> (filtri dentro le finestre). */
button.segmented__item {
    border: 0;
    background: none;
    font-family: inherit;
    cursor: pointer;
}

.segmented__item.is-active {
    background: var(--background-alt);
    color: var(--primary-color);
}

.calendar {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.calendar__weekdays,
.calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar__weekdays {
    background: var(--surface-muted);
    border-bottom: 1px solid var(--border-color);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.calendar__weekdays > div {
    padding: var(--spacing-sm);
}

.calendar__grid {
    gap: 1px;
    background: var(--border-color);
}

.calendar__day {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    min-width: 0;
    min-height: 120px;
    padding: var(--spacing-xs);
    background: var(--background-alt);
}

.calendar--week .calendar__day {
    min-height: 420px;
}

.calendar__day.is-outside {
    background: var(--background);
}

.calendar__day.is-outside .calendar__day-number {
    color: var(--text-muted);
}

.calendar__day.is-drop-target {
    background: var(--primary-soft);
    box-shadow: inset 0 0 0 2px var(--primary-color);
}

.calendar__day-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 26px;
    padding: 0 var(--spacing-xs);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
}

/* Il nome del giorno sta nell'intestazione; dentro la cella serve solo su schermi stretti */
.calendar__day-name {
    display: none;
}

.calendar__day.is-today .calendar__day-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    border-radius: var(--radius-pill);
    background: var(--primary-color);
    color: var(--text-on-dark);
}

.calendar__add {
    display: inline-flex;
    padding: 2px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    opacity: 0;
}

.calendar__day:hover .calendar__add,
.calendar__add:focus-visible {
    opacity: 1;
}

.calendar__add:hover {
    background: var(--primary-soft);
    color: var(--primary-color);
}

.calendar__post {
    display: block;
    padding: var(--spacing-xs) 6px;
    border-left: 3px solid var(--primary-color);
    border-radius: var(--radius-sm);
    background: var(--primary-soft);
    color: var(--text-primary);
    font-size: var(--font-size-xs);
    line-height: 1.35;
    text-decoration: none;
}

.calendar__post[draggable="true"] {
    cursor: grab;
}

.calendar__post.is-dragging {
    opacity: 0.5;
}

.calendar__post--draft { border-style: dashed; border-color: var(--text-secondary); background: var(--surface-muted); }
.calendar__post--review { border-style: dashed; border-color: var(--secondary-color); background: var(--info-soft); }
.calendar__post--rejected { border-style: dashed; border-color: var(--danger); background: var(--danger-soft); }
.calendar__post--publishing { border-color: var(--warning); background: var(--warning-soft); }
.calendar__post--published { border-color: var(--success); background: var(--success-soft); }
.calendar__post--failed { border-color: var(--danger); background: var(--danger-soft); }

.calendar__post-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--text-secondary);
}

.calendar__post-time {
    font-weight: 600;
}

.calendar__post-title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow-wrap: anywhere;
}

.calendar-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm) var(--spacing-md);
    margin-top: var(--spacing-md);
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

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

.calendar-legend__dot {
    width: 12px;
    height: 12px;
    border-left: 3px solid var(--primary-color);
    border-radius: 3px;
    background: var(--primary-soft);
}

.calendar-legend__hint {
    margin-left: auto;
}

/* Schermi stretti: i giorni vanno in colonna, uno sotto l'altro, e si vedono solo quelli utili */
@media (max-width: 767px) {
    .calendar__weekdays {
        display: none;
    }

    .calendar__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .calendar__day,
    .calendar--week .calendar__day {
        min-height: 0;
        padding: var(--spacing-sm);
    }

    .calendar--month .calendar__day.is-outside,
    .calendar--month .calendar__day.is-empty.is-past {
        display: none;
    }

    .calendar__day-name {
        display: inline;
        margin-right: var(--spacing-xs);
    }

    .calendar__add {
        opacity: 1;
    }

    .calendar__post {
        font-size: var(--font-size-sm);
    }

    .calendar-legend__hint {
        display: none;
    }
}

/* ==================== */
/* Contatti: pipeline    */
/* ==================== */

/* Colonne affiancate che scorrono in orizzontale nel loro contenitore. */
.pipeline {
    display: flex;
    gap: var(--spacing-md);
    overflow-x: auto;
    padding-bottom: var(--spacing-sm);
    align-items: flex-start;
}

.pipeline__column {
    flex: 1 0 260px;
    /* Fino al fondo della finestra: tutta la colonna accoglie il trascinamento. */
    min-height: calc(100vh - var(--topbar-height) - 190px);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    border-top: 3px solid var(--primary-color);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
    transition: background var(--transition);
}

.pipeline__column--won { border-top-color: var(--success); }
.pipeline__column--lost { border-top-color: var(--danger); }

.pipeline__column.is-drop-target {
    background: var(--primary-soft);
}

.pipeline__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-xs) var(--spacing-sm);
    padding: var(--spacing-xs);
}

.pipeline__title {
    font-weight: 600;
    font-size: var(--font-size-sm);
}

.pipeline__value {
    margin-left: auto;
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.pipeline__cards {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--spacing-sm);
    min-height: 60px;
}

.pipeline__card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--background-alt);
    box-shadow: var(--shadow-sm);
    color: var(--text-primary);
    text-decoration: none;
}

.pipeline__card:hover {
    border-color: var(--border-strong);
}

.pipeline__card[draggable="true"] {
    cursor: grab;
}

.pipeline__card.is-dragging {
    opacity: 0.5;
}

.pipeline__card-name {
    font-weight: 600;
    font-size: var(--font-size-sm);
    overflow-wrap: anywhere;
}

.pipeline__card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
}

.pipeline__card-meta .avatar {
    width: 24px;
    height: 24px;
    margin-left: auto;
}

@media (max-width: 768px) {
    .pipeline__column {
        flex: 0 0 82%;
        min-height: 50vh;
    }
}

/* ==================== */
/* Contatti: storia      */
/* ==================== */

.timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

.timeline__item {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
    border-top: 1px solid var(--border-color);
    font-size: var(--font-size-sm);
}

.timeline__item:first-child {
    border-top: 0;
}

.timeline__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary-color);
}

.timeline__body {
    min-width: 0;
}

.timeline__note {
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.timeline__meta {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: var(--font-size-xs);
}

/* ==================== */
/* Contatti: impostazioni */
/* ==================== */

.settings-list {
    display: flex;
    flex-direction: column;
}

.settings-list__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
    border-top: 1px solid var(--border-color);
}

.settings-list__item:first-of-type {
    border-top: 0;
}

.settings-list__form {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 0;
}

.settings-list__form .form-control {
    width: auto;
    flex: 1 1 160px;
    min-width: 0;
}

.settings-list__form select.form-control {
    flex: 0 1 180px;
}

.settings-list__form textarea.form-control {
    flex-basis: 100%;
}

.settings-list__delete {
    flex-basis: 100%;
}

.settings-list__delete summary {
    cursor: pointer;
}

.settings-list__delete .settings-list__form {
    margin-top: var(--spacing-sm);
}

.settings-list__add {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px dashed var(--border-strong);
}
/* ==================== */
/* Modulo lead pubblico  */
/* ==================== */

.lead-form-page {
    min-height: 100vh;
    padding: var(--spacing-xl) var(--spacing-md);
    background: var(--background);
}

/* Dentro un iframe: niente sfondo ne' margini, lo decide il sito che lo ospita. */
.lead-form-page--embed {
    min-height: 0;
    padding: var(--spacing-xs);
    background: transparent;
}

.lead-form {
    max-width: 560px;
    margin: 0 auto;
    padding: var(--spacing-xl);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--background-alt);
    box-shadow: var(--shadow-md);
}

.lead-form-page--embed .lead-form {
    max-width: none;
    padding: var(--spacing-md);
    box-shadow: none;
}

.lead-form__title {
    margin: 0 0 var(--spacing-sm);
    font-size: var(--font-size-xl);
}

.lead-form__intro {
    margin: 0 0 var(--spacing-lg);
    color: var(--text-secondary);
    white-space: pre-line;
}

.lead-form--done {
    text-align: center;
}

.lead-form--done .lead-form__intro {
    margin: var(--spacing-md) 0 0;
}

/* Campo trappola: fuori schermo, non display:none (alcuni bot lo saltano). */
.lead-form__trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.lead-form__brand {
    margin: var(--spacing-lg) 0 0;
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    text-align: center;
}

.lead-form__brand a {
    color: inherit;
}

.lead-form .form-control[aria-invalid="true"] {
    border-color: var(--danger);
}

/* Anteprima del modulo nella pagina di condivisione. */
.form-preview {
    display: block;
    width: 100%;
    min-height: 640px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--background);
}

/* Editor dei moduli: righe dei campi da riordinare */
.field-order__row[draggable="true"] {
    cursor: grab;
}

.field-order__row.is-dragging {
    opacity: 0.5;
    background: var(--primary-soft);
}

.field-order__handle {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--text-muted);
}

/* Impostazioni: maniglia per trascinare le fasi */
.settings-list__handle {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--text-muted);
    cursor: grab;
}

.settings-list__item.is-dragging {
    opacity: 0.5;
    background: var(--primary-soft);
}

/* Statistiche: tabelle compatte, numeri a destra, barre di confronto */
.stats-post {
    min-width: 240px;
    max-width: 480px;
}

.stats-table .stats-table__num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.stats-table__value {
    font-weight: 600;
}

/* Riga secondaria sotto il numero (quota, copertura) */
.stats-table__sub {
    display: block;
    margin-top: 2px;
    font-size: var(--font-size-xs);
    font-weight: 400;
    color: var(--text-secondary);
}

/* Barra proporzionale al massimo della tabella */
.stats-bar {
    display: block;
    width: 96px;
    height: 4px;
    margin: 6px 0 0 auto;
    border-radius: var(--radius-pill);
    background: var(--surface-muted);
    overflow: hidden;
}

.stats-bar__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--primary-color);
}

/* Dettaglio delle interazioni: icona + numero, solo quelli disponibili */
.stats-breakdown {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 2px var(--spacing-sm);
    margin-top: 2px;
}

.stats-mini {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.stats-mini iconify-icon {
    color: var(--text-muted);
}

.stats-table .stats-rank {
    width: 32px;
    padding-right: 0;
    text-align: right;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.stats-platform {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-weight: 600;
    text-decoration: none;
}

.stats-post__row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 0;
}

.stats-post__row iconify-icon {
    flex-shrink: 0;
}

.stats-post__title {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stats-post__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-xs) var(--spacing-sm);
    margin-top: 2px;
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.stats-card .segmented__item {
    white-space: nowrap;
}

@media (max-width: 575px) {
    .stats-post {
        min-width: 200px;
        max-width: 240px;
    }

    .stats-bar {
        width: 56px;
    }

    /* Titolo e selettore su due righe, non schiacciati fianco a fianco */
    .stats-card .card__header,
    .ai-analysis .card__header {
        flex-wrap: wrap;
    }
}

.stat__label iconify-icon {
    vertical-align: -3px;
}
/* ==================== */
/* Tooltip               */
/* ==================== */

/* data-tooltip="...": etichetta scura sopra l'elemento, al passaggio o al focus. */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    z-index: 30;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    background: var(--secondary-color);
    color: var(--text-on-dark);
    font-size: var(--font-size-xs);
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    box-shadow: var(--shadow-md);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition: opacity var(--transition), transform var(--transition);
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Canali di un post: solo i loghi delle piattaforme. */
.channel-icons {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.channel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--background-alt);
    transition: border-color var(--transition), box-shadow var(--transition);
}

a.channel-icon:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-sm);
}

/* Canale in uno stato diverso dal post: bordo del colore dello stato. */
.channel-icon--failed {
    border-color: var(--danger);
    background: var(--danger-soft);
}

.channel-icon--scheduled,
.channel-icon--publishing {
    border-color: var(--warning);
    background: var(--warning-soft);
}

.channel-icon--published {
    border-color: var(--success);
    background: var(--success-soft);
}

/* ==================== */
/* Scrivi con l'AI       */
/* ==================== */

.composer-text-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

.composer-text-head .form-label {
    margin-bottom: 0;
}

.ai-writer {
    margin: var(--spacing-xs) 0 var(--spacing-md);
    padding: var(--spacing-md);
    border: 1px solid var(--primary-color);
    border-radius: var(--radius-md);
    background: var(--primary-soft);
}

.ai-writer .form-control {
    background: var(--background-alt);
}

.brand-website {
    display: flex;
    gap: var(--spacing-sm);
}

.brand-website .form-control {
    flex: 1;
    min-width: 0;
}

/* Campo proposto dall'AI e non ancora salvato. */
.form-control.is-ai-filled {
    border-color: var(--primary-color);
    background: var(--primary-soft);
}

@media (max-width: 768px) {
    .brand-website {
        flex-direction: column;
    }
}

.ai-writer__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
}

/* Titolo e sottotitolo proposti per la grafica di Instagram. */
.ai-writer__extras {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    background: var(--background-alt);
    font-size: var(--font-size-sm);
}

.ai-writer__extras p {
    margin: 0;
}

/* Stile per social (Brand e AI): un blueprint per piattaforma. */
/* Editor del design del brand: anteprima a sinistra, controlli guidati a destra */
.design-editor {
    display: grid;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-md);
}

@media (min-width: 992px) {
    .design-editor {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        align-items: start;
    }

    .design-editor__preview {
        position: sticky;
        top: var(--spacing-lg);
    }
}

.design-editor__preview canvas {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    background: var(--surface-muted);
}

.design-editor__samples {
    margin-top: var(--spacing-sm);
}

.design-editor__controls {
    display: grid;
    gap: var(--spacing-md);
}

.design-editor__group {
    margin: 0;
    padding: var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    display: grid;
    gap: var(--spacing-sm);
}

.design-editor__group legend {
    padding: 0 var(--spacing-xs);
    font-weight: 600;
}

.design-editor__choices {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs) var(--spacing-md);
}

.design-editor__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.design-editor__color {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.design-editor__color input[type="color"] {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: none;
    cursor: pointer;
}

.design-editor__range {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
}

.design-editor__range input {
    width: 100%;
    accent-color: var(--primary-color);
}

.design-editor__upload {
    width: fit-content;
    cursor: pointer;
}

.design-editor__positions {
    display: grid;
    grid-template-columns: repeat(3, 40px);
    gap: 4px;
}

.design-editor__positions label {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--text-secondary);
}

.design-editor__positions input {
    position: absolute;
    opacity: 0;
    inset: 0;
    margin: 0;
    cursor: pointer;
}

.design-editor__positions input:checked + span {
    color: var(--primary-color);
    font-weight: 700;
}

.design-editor__positions label:has(input:checked) {
    border-color: var(--primary-color);
    background: var(--primary-soft);
}


.design-editor__group legend iconify-icon {
    vertical-align: -3px;
    color: var(--primary-color);
    margin-right: 4px;
}

.design-editor__stack {
    display: grid;
    gap: var(--spacing-sm);
}

.design-editor__logo {
    display: grid;
    gap: var(--spacing-md);
}

@media (min-width: 576px) {
    .design-editor__logo {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
    }
}

.design-editor__range output {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.design-editor__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--border-color);
}

.design-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

/* Riepilogo del design in Brand e AI: miniature e dati principali, si modifica in una pagina a parte */
.design-summary__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.design-summary__gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

@media (min-width: 768px) {
    .design-summary__gallery {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.design-summary__thumb {
    margin: 0;
}

.design-summary__thumb canvas {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--surface-muted);
}

.design-summary__thumb figcaption {
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    text-align: center;
}

.design-summary__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm) var(--spacing-lg);
    margin: var(--spacing-md) 0 0;
}

.design-summary__facts dt {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.design-summary__facts dd {
    margin: 2px 0 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.design-summary__swatch {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--swatch, transparent);
    flex: none;
}
.brand-styles__item {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-sm);
}

.brand-styles__item summary {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    font-weight: 600;
    cursor: pointer;
}

.brand-styles__item summary .badge {
    margin-left: auto;
}

.brand-styles__item textarea {
    display: block;
    width: calc(100% - 2 * var(--spacing-md));
    margin: 0 var(--spacing-md) var(--spacing-md);
    font-family: inherit;
}

/* ==================== */
/* Brand e AI: wizard    */
/* ==================== */

.brand-page {
    max-width: 780px;
    margin: 0 auto;
}

.form-control--lg {
    min-height: 52px;
    padding: 14px 16px;
    font-size: var(--font-size-lg);
}

textarea.form-control--lg {
    line-height: 1.55;
}

.form-control.is-invalid {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px var(--danger-soft);
}

.brand-wizard {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 560px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    background: var(--background-alt);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.brand-wizard__top {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg) var(--spacing-xl) 0;
}

.brand-wizard__back,
.brand-wizard__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: var(--background-alt);
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition), opacity var(--transition);
}

.brand-wizard__back:hover,
.brand-wizard__close:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.brand-wizard__back.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.brand-wizard__progress {
    flex: 1;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--surface-muted);
    overflow: hidden;
}

.brand-wizard__progress span {
    display: block;
    width: 4%;
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--primary-color);
    transition: width 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

.brand-wizard__stage {
    position: relative;
    flex: 1;
    padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-lg);
}

.wizard-step {
    display: none;
    max-width: 560px;
    margin: 0 auto;
}

.wizard-step--wide {
    max-width: none;
}

.wizard-step.is-active {
    display: block;
}

.wizard-step.from-forward {
    animation: wizard-in-forward 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.wizard-step.from-back {
    animation: wizard-in-back 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes wizard-in-forward {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: none; }
}

@keyframes wizard-in-back {
    from { opacity: 0; transform: translateX(-40px); }
    to { opacity: 1; transform: none; }
}

.wizard-step__eyebrow {
    display: inline-block;
    margin-bottom: var(--spacing-sm);
    color: var(--primary-color);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.wizard-step__title {
    margin: 0 0 var(--spacing-sm);
    font-size: var(--font-size-2xl);
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.wizard-step__text {
    margin: 0 0 var(--spacing-lg);
    color: var(--text-secondary);
    font-size: var(--font-size-md);
    line-height: 1.6;
}

/* Benvenuto: la "scintilla" dell'AI, il solo elemento che si muove da solo. */
.wizard-spark {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: var(--spacing-lg);
    border-radius: 22px;
    background: var(--secondary-color);
    color: var(--text-on-dark);
    animation: wizard-float 4s ease-in-out infinite;
}

.wizard-spark::after {
    content: '';
    position: absolute;
    inset: -8px;
    border: 2px solid var(--primary-color);
    border-radius: 28px;
    opacity: 0;
    animation: wizard-ring 2.4s ease-out infinite;
}

@keyframes wizard-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-6px) rotate(-3deg); }
}

@keyframes wizard-ring {
    0% { opacity: 0.7; transform: scale(0.9); }
    100% { opacity: 0; transform: scale(1.25); }
}

.wizard-choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-md);
}

.wizard-choice {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
    padding: var(--spacing-lg);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--background-alt);
    color: var(--text-primary);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.wizard-choice iconify-icon {
    margin-bottom: var(--spacing-sm);
    color: var(--primary-color);
}

.wizard-choice strong {
    font-size: var(--font-size-lg);
}

.wizard-choice span {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.wizard-choice:hover:not([disabled]),
.wizard-choice:focus-visible {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    outline: none;
}

.wizard-choice[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Schede a scelta singola (tono, emoji): il radio e' nascosto, la scheda si accende. */
.wizard-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-sm);
}

.wizard-cards--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wizard-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--spacing-md);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}

.wizard-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.wizard-card span {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.45;
}

.wizard-card:hover {
    border-color: var(--border-strong);
}

.wizard-card:has(input:checked) {
    border-color: var(--primary-color);
    background: var(--primary-soft);
}

.wizard-card:has(input:focus-visible) {
    box-shadow: var(--focus-ring);
}

.wizard-card:has(input.is-ai-filled:checked)::after {
    content: 'AI';
    position: absolute;
    top: 8px;
    right: 10px;
    color: var(--primary-color);
    font-size: var(--font-size-xs);
    font-weight: 700;
}

.wizard-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--spacing-md);
}

/* Lettura del sito: una pagina stilizzata percorsa da una linea di scansione. */
.wizard-reading {
    position: relative;
    width: 220px;
    margin: 0 auto var(--spacing-xl);
}

.wizard-reading__page {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--background-alt);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.wizard-reading__bar {
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--surface-muted);
}

.wizard-reading__bar.is-title {
    width: 60%;
    height: 12px;
    background: var(--border-strong);
}

.wizard-reading__bar.is-short {
    width: 70%;
}

.wizard-reading__block {
    height: 56px;
    border-radius: var(--radius-sm);
    background: var(--primary-soft);
}

.wizard-reading__scan {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 36px;
    background: linear-gradient(to bottom, transparent, var(--primary-soft) 70%, var(--primary-color) 100%);
    opacity: 0.8;
    animation: wizard-scan 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes wizard-scan {
    0% { transform: translateY(-40px); }
    100% { transform: translateY(190px); }
}

.wizard-reading__orb {
    position: absolute;
    right: -18px;
    bottom: -18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--secondary-color);
    color: var(--text-on-dark);
    box-shadow: 0 0 0 6px var(--background-alt), var(--shadow-md);
    animation: wizard-pulse 1.6s ease-in-out infinite;
}

@keyframes wizard-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

[data-step="reading"] {
    text-align: center;
}

[data-wizard-reading-text].is-swapping {
    animation: wizard-swap 360ms ease both;
}

@keyframes wizard-swap {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

/* Riepilogo del wizard */
.wizard-review {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.wizard-review__row {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    border-left: 3px solid transparent;
}

.wizard-review__row + .wizard-review__row {
    border-top: 1px solid var(--border-color);
}

.wizard-review__row.is-ai-filled {
    border-left-color: var(--primary-color);
    background: var(--primary-soft);
}

.wizard-review__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.wizard-review__label {
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.wizard-review__value {
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.wizard-review__value.is-empty {
    color: var(--text-muted);
}

.brand-wizard__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xl) var(--spacing-xl);
}

/* Profilo compilato */
.brand-summary {
    padding: var(--spacing-xl);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    background: var(--background-alt);
    box-shadow: var(--shadow-md);
}

.brand-summary__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.brand-summary__head > div:not(.brand-summary__actions) {
    flex: 1;
    min-width: 220px;
}

.brand-summary__badge {
    display: inline-flex;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
}

.brand-summary__badge svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.brand-summary__badge circle {
    fill: var(--success-soft);
    stroke: var(--success);
    stroke-width: 2;
}

.brand-summary__badge path {
    stroke: var(--success);
    stroke-width: 4;
}

/* Appena salvato: il cerchio si disegna e la spunta segue. */
.brand-summary.is-celebrating .brand-summary__badge circle {
    stroke-dasharray: 151;
    stroke-dashoffset: 151;
    animation: wizard-draw 600ms ease-out forwards;
}

.brand-summary.is-celebrating .brand-summary__badge path {
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: wizard-draw 360ms 520ms ease-out forwards;
}

.brand-summary.is-celebrating .brand-summary__item {
    animation: wizard-in-forward 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.brand-summary.is-celebrating .brand-summary__item:nth-child(2) { animation-delay: 60ms; }
.brand-summary.is-celebrating .brand-summary__item:nth-child(3) { animation-delay: 120ms; }
.brand-summary.is-celebrating .brand-summary__item:nth-child(4) { animation-delay: 180ms; }
.brand-summary.is-celebrating .brand-summary__item:nth-child(n+5) { animation-delay: 240ms; }

@keyframes wizard-draw {
    to { stroke-dashoffset: 0; }
}

.brand-summary__title {
    margin: 0;
    font-size: var(--font-size-xl);
}

.brand-summary__text {
    margin: 2px 0 0;
    color: var(--text-secondary);
}

.brand-summary__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.brand-summary__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-md) var(--spacing-lg);
    margin: 0;
}

.brand-summary__item.is-wide {
    grid-column: 1 / -1;
}

.brand-summary__item dt {
    margin-bottom: 2px;
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.brand-summary__item dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.brand-summary__usage {
    margin: var(--spacing-lg) 0 0;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

@media (max-width: 768px) {
    .brand-wizard {
        min-height: 0;
        border-radius: var(--radius-lg);
    }

    .brand-wizard__top,
    .brand-wizard__stage,
    .brand-wizard__footer {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }

    .wizard-step__title {
        font-size: var(--font-size-xl);
    }

    .wizard-choices,
    .wizard-cards,
    .wizard-cards--3,
    .brand-summary__grid {
        grid-template-columns: 1fr;
    }

    .brand-summary {
        padding: var(--spacing-lg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .wizard-step.from-forward,
    .wizard-step.from-back,
    .wizard-spark,
    .wizard-spark::after,
    .wizard-reading__scan,
    .wizard-reading__orb,
    .brand-summary.is-celebrating .brand-summary__item,
    [data-wizard-reading-text].is-swapping {
        animation: none;
    }

    .brand-summary.is-celebrating .brand-summary__badge circle,
    .brand-summary.is-celebrating .brand-summary__badge path {
        animation: none;
        stroke-dashoffset: 0;
    }

    .brand-wizard__progress span {
        transition: none;
    }
}

/* ==================== */
/* Studio AI             */
/* ==================== */

.studio {
    max-width: 820px;
    margin: 0 auto;
}

.studio-start,
.studio-progress {
    padding: var(--spacing-xl);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    background: var(--background-alt);
    box-shadow: var(--shadow-lg);
}

.studio-start__head {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.studio-start__head .wizard-spark {
    flex-shrink: 0;
    margin-bottom: 0;
}

.studio-origin {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.studio-links summary {
    color: var(--primary-color);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
}

.studio-start__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.studio-start__channels {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-xs) var(--spacing-md);
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.studio-start__channels legend {
    float: left;
    margin-right: var(--spacing-xs);
    padding: 0;
}

.studio-start__channels .check-field {
    align-items: center;
    gap: 6px;
    color: var(--text-primary);
}

.studio-start__channels .check-field input {
    margin-top: 0;
}

/* Bozza: "Scrivi anche per..." sotto i canali senza testo */
.studio-add-channels {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-sm);
}

.studio-progress .wizard-reading {
    margin-bottom: var(--spacing-lg);
}

/* Le fasi: in attesa, in corso (pulsa), fatta (spunta), fallita. */
.studio-steps {
    max-width: 420px;
    margin: 0 auto var(--spacing-md);
    padding: 0;
    list-style: none;
}

.studio-steps__item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) 0;
    color: var(--text-muted);
    transition: color var(--transition);
}

.studio-steps__item small {
    display: block;
    color: var(--text-muted);
    font-size: var(--font-size-xs);
}

.studio-steps__icon {
    position: relative;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: 2px solid var(--border-strong);
    border-radius: 50%;
    transition: border-color var(--transition), background var(--transition);
}

.studio-steps__item.is-active {
    color: var(--text-primary);
}

.studio-steps__item.is-active .studio-steps__icon {
    border-color: var(--primary-color);
    border-right-color: transparent;
    animation: studio-spin 0.9s linear infinite;
}

.studio-steps__item.is-done {
    color: var(--text-primary);
}

.studio-steps__item.is-done .studio-steps__icon {
    border-color: var(--success);
    background: var(--success);
}

.studio-steps__item.is-done .studio-steps__icon::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 11px;
    border: solid var(--text-on-dark);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.studio-steps__item.is-error .studio-steps__icon {
    border-color: var(--danger);
    background: var(--danger-soft);
}

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

/* Manuale del brand */
.playbook {
    margin-top: var(--spacing-lg);
}

.playbook__head {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.playbook__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--primary-soft);
    color: var(--primary-color);
}

.playbook-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
}

.playbook-switch__track {
    position: relative;
    width: 42px;
    height: 24px;
    border-radius: var(--radius-pill);
    background: var(--border-strong);
    transition: background var(--transition);
}

.playbook-switch__thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--background-alt);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition);
}

.playbook-switch.is-on {
    color: var(--success);
}

.playbook-switch.is-on .playbook-switch__track {
    background: var(--success);
}

.playbook-switch.is-on .playbook-switch__thumb {
    transform: translateX(18px);
}

.playbook-switch:focus-visible .playbook-switch__track {
    box-shadow: var(--focus-ring);
}

.playbook__status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-sm);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.playbook__refresh {
    margin-left: auto;
}

.playbook__progress {
    height: 6px;
    margin-top: var(--spacing-sm);
    border-radius: var(--radius-pill);
    background: var(--surface-muted);
    overflow: hidden;
}

.playbook__progress span {
    display: block;
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--primary-color);
}

.playbook__rules {
    margin: var(--spacing-md) 0 0;
    padding: 0;
    list-style: none;
}

.playbook-rule {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
}

.playbook-rule + .playbook-rule {
    border-top: 1px solid var(--border-color);
}

.playbook-rule > iconify-icon {
    flex-shrink: 0;
    color: var(--success);
}

.playbook-rule--negative > iconify-icon {
    color: var(--danger);
}

.playbook-rule__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.playbook__add {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

/* Bozza */
.studio-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-lg);
    background: var(--secondary-color);
    color: var(--text-on-dark);
}

.studio-score__value {
    font-size: var(--font-size-xl);
    font-weight: 700;
    line-height: 1.1;
}

.studio-score__value small {
    font-size: var(--font-size-sm);
    opacity: 0.7;
}

.studio-score__label {
    color: var(--text-on-dark-muted);
    font-size: var(--font-size-xs);
}

.studio-notes {
    margin: var(--spacing-xs) 0 0;
    padding-left: var(--spacing-md);
}

.studio-variant .form-label {
    width: 100%;
}

.studio-variant__count {
    margin-left: auto;
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.studio-variant__count.is-over {
    color: var(--danger);
    font-weight: 700;
}

.studio-slides {
    margin: var(--spacing-sm) 0;
    padding-left: var(--spacing-lg);
    font-size: var(--font-size-sm);
}

.studio-slides--edit {
    display: grid;
    gap: var(--spacing-xs);
}

.studio-slide {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.studio-slide textarea {
    flex: 1;
    resize: vertical;
}

.studio-channels {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

/* Formato per canale nella bozza: icona, nome, tendina */
.studio-formats {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.studio-formats__row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--spacing-xs);
}

.studio-formats__row select {
    min-width: 160px;
}

.studio-why {
    display: flex;
    gap: var(--spacing-xs);
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.studio-why iconify-icon {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--warning);
}

.studio-publish {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
}

.studio-sources {
    margin: 0;
    padding: 0;
    list-style: none;
}

.studio-sources li {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 4px 0;
    font-size: var(--font-size-sm);
}

.studio-brief {
    margin: var(--spacing-xs) 0 0;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    white-space: pre-line;
}

.studio-image-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.studio-ai-image__options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm);
    margin: var(--spacing-sm) 0;
}

.studio-ai-image__options select {
    width: auto;
}

.studio-ai-image__result {
    position: relative;
    max-width: 360px;
    margin: var(--spacing-sm) auto;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.studio-ai-image__result img {
    display: block;
    width: 100%;
}

.studio-ai-image__result.is-loading img {
    opacity: 0.35;
}

.studio-photos-search {
    display: flex;
    gap: var(--spacing-sm);
}

.studio-photo {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.studio-photo img {
    aspect-ratio: 1;
}

.studio-photo:disabled {
    opacity: 0.6;
    cursor: progress;
}

.studio-confirm {
    text-align: left;
}

.studio-confirm ul {
    margin: var(--spacing-xs) 0 var(--spacing-sm);
    padding-left: var(--spacing-lg);
}

.studio-confirm p {
    margin: var(--spacing-xs) 0;
}

@media (max-width: 768px) {
    .studio-start,
    .studio-progress {
        padding: var(--spacing-lg);
    }

    .studio-origin {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .studio-steps__item.is-active .studio-steps__icon {
        animation: none;
    }
}

/* ==================== */
/* Idee e analisi AI     */
/* ==================== */

.ideas-generate {
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    background: var(--background-alt);
    box-shadow: var(--shadow-sm);
}

.ideas-generate__spark,
.ai-analysis__spark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--secondary-color);
    color: var(--text-on-dark);
}

.ideas-generate__body {
    flex: 1;
    min-width: 0;
}

.ideas-generate__body .form-hint {
    display: block;
}

/* Mentre l'AI lavora, la scintilla pulsa. */
form.is-busy .ideas-generate__spark,
.ai-analysis:has(form.is-busy) .ai-analysis__spark {
    animation: wizard-pulse 1.2s ease-in-out infinite;
}

.ideas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--spacing-md);
    margin: 0;
    padding: 0;
    list-style: none;
}

.idea-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--background-alt);
    animation: wizard-in-forward 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--i, 0) * 70ms);
}

.idea-card.is-leaving {
    animation: idea-out 280ms ease forwards;
}

@keyframes idea-out {
    to { opacity: 0; transform: scale(0.96); }
}

.idea-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-xs) var(--spacing-sm);
}

.idea-card__day {
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    background: var(--primary-soft);
    color: var(--primary-color);
    font-size: var(--font-size-xs);
    font-weight: 700;
}

.idea-card__channels {
    margin-left: auto;
}

.idea-card__channels .channel-icon {
    width: 28px;
    height: 28px;
}

.idea-card__title {
    margin: 0;
    font-size: var(--font-size-lg);
    line-height: 1.3;
}

.idea-card__hook {
    margin: 0;
    padding-left: var(--spacing-sm);
    border-left: 3px solid var(--primary-color);
    color: var(--text-primary);
}

.idea-card__draft summary {
    color: var(--primary-color);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
}

.idea-card__draft p {
    margin: var(--spacing-xs) 0 0;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    white-space: pre-line;
}

.idea-card__reason {
    display: flex;
    gap: var(--spacing-xs);
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.idea-card__reason iconify-icon {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--warning);
}

.idea-card__actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: auto;
    padding-top: var(--spacing-sm);
}

.ai-analysis__head {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.ai-analysis__spark {
    width: 40px;
    height: 40px;
    border-radius: 12px;
}

.ai-analysis__summary {
    margin: 0 0 var(--spacing-md);
    font-size: var(--font-size-md);
    line-height: 1.6;
}

.ai-analysis__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-md);
}

.ai-analysis__col {
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
}

.ai-analysis__col h3 {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin: 0 0 var(--spacing-sm);
    font-size: var(--font-size-md);
}

.ai-analysis__col--worked h3 { color: var(--success); }
.ai-analysis__col--improve h3 { color: var(--warning); }
.ai-analysis__col--next h3 { color: var(--primary-color); }

.ai-analysis__col ul {
    margin: 0;
    padding-left: var(--spacing-md);
    font-size: var(--font-size-sm);
    line-height: 1.55;
}

.ai-analysis__col li + li {
    margin-top: var(--spacing-xs);
}

@media (max-width: 768px) {
    .ideas-generate {
        flex-direction: column;
        align-items: stretch;
    }

    .ai-analysis__grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .idea-card,
    .idea-card.is-leaving,
    form.is-busy .ideas-generate__spark,
    .ai-analysis:has(form.is-busy) .ai-analysis__spark {
        animation: none;
    }
}

/* ==================== */
/* Libreria media        */
/* ==================== */

.media-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-lg);
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--background-alt);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}

.media-drop:hover,
.media-drop.is-dragover {
    border-color: var(--primary-color);
    background: var(--primary-soft);
    color: var(--primary-color);
}

.media-uploads {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.media-uploads:not(:empty) {
    margin-bottom: var(--spacing-md);
}

.media-upload {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(80px, 160px) auto;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
}

.media-upload__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.media-upload__state {
    color: var(--text-secondary);
}

.media-upload.is-error {
    grid-template-columns: minmax(0, 1fr) auto;
}

.media-upload.is-error .upload-progress__bar {
    display: none;
}

.media-upload.is-error .media-upload__state {
    color: var(--danger);
}

.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--spacing-md);
    margin: 0;
    padding: 0;
    list-style: none;
}

.media-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--background-alt);
    overflow: hidden;
}

.media-tile__preview {
    position: relative;
    display: block;
    aspect-ratio: 1;
    background: var(--surface-muted);
}

.media-tile__preview img,
.media-tile__preview video,
.media-chosen img,
.media-chosen video,
.media-pick img,
.media-pick video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-tile__badge {
    position: absolute;
    left: var(--spacing-xs);
    bottom: var(--spacing-xs);
    display: inline-flex;
    padding: 2px;
    border-radius: 50%;
    background: var(--secondary-color);
    color: var(--text-on-dark);
}

.media-tile__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--spacing-sm) var(--spacing-md);
}

.media-tile__name {
    overflow: hidden;
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.media-tile__meta {
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
}

.media-tile__delete {
    position: absolute;
    top: var(--spacing-xs);
    right: var(--spacing-xs);
    background: var(--background-alt);
    box-shadow: var(--shadow-sm);
}

/* Selettore nel form del post */
.media-chosen-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.media-picker.has-items .media-chosen-list {
    margin-bottom: var(--spacing-sm);
}

.media-chosen {
    position: relative;
    width: 96px;
    height: 96px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
    overflow: hidden;
    cursor: grab;
}

.media-chosen.is-dragging {
    opacity: 0.4;
}

.media-chosen__number {
    position: absolute;
    top: 4px;
    left: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: var(--radius-pill);
    background: var(--secondary-color);
    color: var(--text-on-dark);
    font-size: var(--font-size-xs);
    font-weight: 700;
}

.media-chosen__remove {
    position: absolute;
    top: 4px;
    right: 4px;
    display: inline-flex;
    padding: 2px;
    border: 0;
    border-radius: 50%;
    background: var(--background-alt);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}

.media-chosen__remove:hover {
    color: var(--danger);
}

.media-picker__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

/* Finestra "Scegli dalla libreria" */
.skedo-modal.media-modal-wrap .skedo-modal-content {
    max-width: 860px;
}

.media-grid--modal {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    max-height: 56vh;
    overflow-y: auto;
}

.media-pick label {
    position: relative;
    display: block;
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
}

.media-pick label > img,
.media-pick label > video {
    aspect-ratio: 1;
    background: var(--surface-muted);
}

.media-pick input {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 1;
    width: 18px;
    height: 18px;
}

.media-pick .media-tile__badge {
    top: 6px;
    right: 6px;
    bottom: auto;
    left: auto;
}

.media-pick.is-checked label {
    border-color: var(--primary-color);
}

.media-pick.is-taken {
    opacity: 0.5;
}

.media-pick__name {
    display: block;
    overflow: hidden;
    padding: 4px 6px;
    font-size: var(--font-size-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

    .media-chosen {
        width: 80px;
        height: 80px;
    }
}

/* ==================== */
/* Dashboard             */
/* ==================== */

.dash-header__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm);
}

.dash-alert__text {
    flex: 1;
}

.dash-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.dash-kpi .stat__value {
    margin: 2px 0 var(--spacing-xs);
}

.dash-kpi__delta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
}

.dash-kpi__delta.is-up {
    color: var(--success);
}

.dash-kpi__delta.is-down {
    color: var(--danger);
}

.dash-kpi__compare {
    color: var(--text-muted);
    font-weight: 400;
}

.dash-column {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.dash-column > .card {
    margin: 0;
}

.dash-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dash-list__item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) 0;
}

.dash-list__item + .dash-list__item {
    border-top: 1px solid var(--border-color);
}

.dash-list__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.dash-list__body > a,
.dash-list__body > strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Data del post: giorno grande, mese sotto. */
.dash-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 52px;
    border-radius: var(--radius-md);
    background: var(--primary-soft);
    color: var(--primary-color);
    line-height: 1.1;
}

.dash-date__day {
    font-size: var(--font-size-lg);
    font-weight: 700;
}

.dash-date__month {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: lowercase;
}

.dash-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--secondary-color);
    color: var(--text-on-dark);
    font-weight: 700;
}

.dash-figures {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.dash-figures strong {
    color: var(--text-primary);
}

.dash-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
    color: var(--text-secondary);
}

.dash-empty p {
    margin: 0;
}

.dash-pipeline {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dash-pipeline__row {
    display: grid;
    grid-template-columns: minmax(0, 120px) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 6px 0;
    font-size: var(--font-size-sm);
}

.dash-pipeline__label {
    overflow: hidden;
    color: var(--text-secondary);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-pipeline__bar {
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--surface-muted);
    overflow: hidden;
}

.dash-pipeline__bar span {
    display: block;
    height: 100%;
    min-width: 4px;
    border-radius: var(--radius-pill);
    background: var(--primary-color);
}

.dash-pipeline__outcome {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

@media (max-width: 768px) {
    .dash-header__actions {
        width: 100%;
    }

    .dash-figures {
        display: none;
    }
}

/* ==================== */
/* Statistiche del post  */
/* ==================== */

.post-stats__heading {
    margin: var(--spacing-xl) 0 var(--spacing-sm);
}

.post-stats__preview {
    display: flex;
    gap: var(--spacing-lg);
    align-items: flex-start;
}

.post-stats__media {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    border-radius: var(--radius-md);
    background: var(--surface-muted);
    object-fit: cover;
}

.post-stats__text {
    min-width: 0;
    margin: 0;
    color: var(--text-primary);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.post-stats__channels {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-md);
}

.post-stats__channel {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--background-alt);
}

.post-stats__channel-head {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.post-stats__channel-name {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.post-stats__metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--spacing-sm) var(--spacing-md);
    margin: 0;
}

.post-stats__metrics dt {
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
}

.post-stats__metrics dd {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 600;
}

.post-stats__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    margin-top: auto;
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--border-color);
}

@media (max-width: 768px) {
    .post-stats__heading {
    margin: var(--spacing-xl) 0 var(--spacing-sm);
}

.post-stats__preview {
        flex-direction: column;
    }

    .post-stats__metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ==================== */
/* Profilo               */
/* ==================== */

.profile {
    max-width: 1040px;
    margin: 0 auto;
}

/* Identita': fascia navy con il simbolo di Skedo (come nel login), avatar a cavallo. */
.profile-identity {
    margin-bottom: var(--spacing-lg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--background-alt);
    overflow: hidden;
}

.profile-identity__band {
    position: relative;
    height: 112px;
    background: var(--secondary-color);
    overflow: hidden;
}

.profile-identity__mark {
    position: absolute;
    right: -40px;
    top: -70px;
    width: 280px;
    opacity: 0.08;
    filter: brightness(0) invert(1);
    pointer-events: none;
}

.profile-identity__body {
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-lg);
    padding: 0 var(--spacing-xl) var(--spacing-lg);
}

/* L'avatar e' il comando per cambiare la foto. */
.profile-identity__avatar {
    position: relative;
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    margin-top: -60px;
    padding: 0;
    border: 4px solid var(--background-alt);
    border-radius: 50%;
    background: var(--primary-soft);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: box-shadow var(--transition);
}

.profile-identity__avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* Logo del workspace: riquadro invece del cerchio. */
.profile-identity__avatar--square,
.profile-identity__avatar--square img {
    border-radius: var(--radius-lg);
}

.profile-identity__avatar--square .profile-identity__initials {
    border-radius: var(--radius-lg);
    background: var(--secondary-color);
    color: var(--text-on-dark);
}

.profile-identity__email .badge {
    margin-right: var(--spacing-xs);
}

.profile-identity__avatar:hover,
.profile-identity__avatar.is-dragover {
    box-shadow: 0 0 0 4px var(--primary-soft), var(--shadow-md);
}

.profile-identity__avatar:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring), var(--shadow-md);
}

.profile-identity__initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--primary-color);
    font-size: var(--font-size-2xl);
    font-weight: 600;
}

.profile-identity__camera {
    position: absolute;
    right: 2px;
    bottom: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 3px solid var(--background-alt);
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--text-on-dark);
}

.profile-identity__text {
    min-width: 0;
    padding-top: var(--spacing-md);
}

.profile-identity__name {
    margin: 0;
    font-size: var(--font-size-xl);
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.profile-identity__email {
    margin: 2px 0 0;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.profile-identity__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-xs) var(--spacing-sm);
    margin-top: var(--spacing-sm);
    margin-left: calc(var(--spacing-sm) * -1);
}

.profile-identity__remove {
    color: var(--danger);
}

.profile-identity__hint {
    padding-left: var(--spacing-sm);
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

/* Righe di impostazioni: a sinistra cosa si cambia e perche', a destra il form. */
.settings-rows {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--background-alt);
}

.settings-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--spacing-xl);
    padding: var(--spacing-xl);
}

.settings-row + .settings-row {
    border-top: 1px solid var(--border-color);
}

.settings-row__title {
    margin: 0 0 var(--spacing-xs);
    font-size: var(--font-size-lg);
}

.settings-row__text {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

.settings-row__form {
    min-width: 0;
}

.settings-row__form .form-control[readonly] {
    background: var(--surface-muted);
    color: var(--text-secondary);
}

.settings-row__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.profile-workspaces {
    margin: 0;
    padding: 0;
    list-style: none;
}

.profile-workspaces__item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
}

.profile-workspaces__item + .profile-workspaces__item {
    border-top: 1px solid var(--border-color);
}

.profile-workspaces__name {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

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

/* Un avatar con la foto: niente sfondo colorato attorno. */
.avatar--photo {
    overflow: hidden;
    background: var(--surface-muted);
}

@media (max-width: 768px) {
    .settings-row {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
        padding: var(--spacing-lg);
    }

    .profile-identity__body {
        flex-direction: column;
        align-items: center;
        padding: 0 var(--spacing-lg) var(--spacing-lg);
        text-align: center;
    }

    .profile-identity__text {
        padding-top: 0;
    }

    .profile-identity__actions {
        justify-content: center;
        margin-left: 0;
    }
}

/* Modale di ritaglio: piu' largo, per vedere la foto intera attorno al cerchio. */
.skedo-modal.profile-cropper-modal .skedo-modal-content {
    max-width: 600px;
}

.profile-cropper__area {
    width: 100%;
    margin-bottom: var(--spacing-md);
}

/* Design del brand: formato per canale */
.design-editor__aspect {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
}

.design-editor__aspect select {
    width: auto;
}

/* Admin: link d'invito appena creato */
.admin-invite-link__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.admin-invite-link__row input {
    flex: 1 1 320px;
    font-family: var(--font-mono, monospace);
    font-size: var(--font-size-sm);
}

/* Consulente AI: trend, proposte di post, storico e report automatico */
.ai-analysis__trend {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xs);
    margin: 0 0 var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    background: var(--primary-soft);
    color: var(--text-primary);
}

.ai-analysis__trend iconify-icon {
    flex: none;
    color: var(--primary-color);
    margin-top: 2px;
}

.ai-analysis__proposals-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin: var(--spacing-lg) 0 var(--spacing-sm);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--primary-color);
}

.ai-analysis__proposals {
    display: grid;
    gap: var(--spacing-md);
}

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

.ai-proposal {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
}

.ai-proposal__title {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: 600;
}

.ai-proposal__idea {
    margin: 0;
    flex: 1;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.ai-proposal__meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin: 0;
}

.ai-proposal .btn {
    align-self: flex-start;
}

.ai-analysis__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

.ai-analysis__history,
.ai-analysis__auto {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-xs) var(--spacing-sm);
}

.ai-analysis__history select,
.ai-analysis__auto select {
    width: auto;
}

.ai-analysis__auto .form-hint {
    flex-basis: 100%;
}

/* Studio: immagine per canale (formato "post" accanto a un carosello) */
.studio-channel-image {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-start;
    padding: var(--spacing-sm) 0;
    border-top: 1px solid var(--border-color);
}

.studio-channel-image__thumb {
    flex: none;
    width: 72px;
    height: 72px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--surface-muted);
    overflow: hidden;
}

.studio-channel-image__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.studio-channel-image__body {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.studio-channel-image__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-top: 4px;
}

.studio-channel-pick {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: var(--spacing-sm);
}

.studio-channel-pick__item {
    padding: 0;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    background: none;
    cursor: pointer;
    overflow: hidden;
    aspect-ratio: 1;
}

.studio-channel-pick__item:hover {
    border-color: var(--primary-color);
}

.studio-channel-pick__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ==================== */
/* Collegamento del sito web: tipo di sito, metodo, pannello del metodo scelto */
/* ==================== */

.site-connect {
    max-width: 1040px;
}

.site-connect__label {
    margin: 0 0 var(--spacing-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.site-connect__kinds,
.site-connect__methods {
    display: grid;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.site-connect__kinds {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.site-connect__methods {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Scheda scelta con un radio nascosto: bordo e fondo blu quando e' attiva */
.site-option {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--background-alt);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.site-option:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
}

.site-option--lg {
    padding: var(--spacing-lg);
    align-items: center;
}

.site-option__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.site-option:has(.site-option__input:checked) {
    border-color: var(--primary-color);
    background: var(--primary-soft);
    box-shadow: none;
}

.site-option:has(.site-option__input:focus-visible) {
    box-shadow: var(--focus-ring);
}

.site-option__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--surface-muted);
    color: var(--secondary-color);
}

.site-option--lg .site-option__icon {
    width: 56px;
    height: 56px;
}

.site-option:has(.site-option__input:checked) .site-option__icon {
    background: var(--primary-color);
    color: var(--text-on-dark);
}

.site-option__body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    min-width: 0;
}

.site-option__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.site-option--lg .site-option__title {
    font-size: var(--font-size-lg);
}

.site-option__text {
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: var(--text-secondary);
}

/* Si vede solo il pannello del tipo di sito e del metodo scelti */
.site-connect__panel,
.site-connect__method {
    display: none;
}

.site-connect:has([data-site-kind="wordpress"]:checked) [data-kind-panel="wordpress"],
.site-connect:has([data-site-kind="api"]:checked) [data-kind-panel="api"],
.site-connect:has([data-site-method="connector"]:checked) [data-method-panel="connector"],
.site-connect:has([data-site-method="authorize"]:checked) [data-method-panel="authorize"],
.site-connect:has([data-site-method="manual"]:checked) [data-method-panel="manual"] {
    display: block;
}

.site-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--spacing-md);
    margin: 0 0 var(--spacing-lg);
    padding: 0;
    list-style: none;
}

.site-steps--compact {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
    margin: var(--spacing-md) 0 0;
}

.site-steps__item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.site-steps--compact .site-steps__item {
    flex-direction: row;
    align-items: flex-start;
}

.site-steps__number {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-pill);
    background: var(--primary-soft);
    color: var(--primary-color);
    font-weight: 700;
    font-size: var(--font-size-sm);
}

.site-connect__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-md);
}

.site-connect__inline {
    display: flex;
    gap: var(--spacing-sm);
}

.site-connect__inline .form-control {
    flex: 1 1 auto;
}

.site-connect__inline .btn {
    flex: 0 0 auto;
}

.site-connect__fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-md);
}

.site-connect__guide {
    margin-bottom: var(--spacing-md);
}

.site-connect__guide summary {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--primary-color);
    cursor: pointer;
}

.site-connect__note {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xs);
    max-width: 760px;
}

.site-endpoints {
    display: grid;
    gap: var(--spacing-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-endpoints code {
    display: block;
    padding: 6px var(--spacing-sm);
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
    font-size: var(--font-size-sm);
    color: var(--secondary-color);
}

@media (max-width: 900px) {
    .site-connect__methods,
    .site-steps,
    .site-connect__fields {
        grid-template-columns: 1fr;
    }
}

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

    .site-connect__inline {
        flex-direction: column;
    }
}