/* ══════════════════════════════════════════════════════════════
   LEAD BOOSTER CRM — Design System  (shadcn/ui-inspired)
   Font: Inter · Light + Dark mode · Orange brand #f78b1e
   ══════════════════════════════════════════════════════════════ */

/* ── 1. LIGHT MODE TOKENS ──────────────────────────────────── */
:root {
    color-scheme: light;

    /* Brand */
    --primary:           #f78b1e;
    --primary-hover:     #e07010;
    --primary-dim:       rgba(247,139,30,.12);
    --primary-border:    rgba(247,139,30,.35);

    /* Page background */
    --bg:                #f1f5f9;

    /* Surfaces */
    --surface:           #ffffff;
    --surface2:          #f8fafc;
    --surface-hover:     rgba(0,0,0,.035);

    /* Borders */
    --border:            #e2e8f0;
    --border-input:      #cbd5e1;

    /* Chrome — sidebar/appbar: bianco in light mode */
    --chrome-bg:         #ffffff;
    --chrome-border:     #e2e8f0;
    --chrome-text:       #111827;
    --chrome-muted:      #64748b;
    --chrome-hover:      rgba(0,0,0,.05);
    --chrome-active-bg:  rgba(249,115,22,.10);

    /* Text */
    --text:              #0f172a;
    --text-muted:        #64748b;
    --text-dim:          #94a3b8;

    /* Semantic */
    --success:           #16a34a;
    --success-dim:       rgba(22,163,74,.1);
    --warning:           #d97706;
    --warning-dim:       rgba(217,119,6,.1);
    --error:             #dc2626;
    --error-dim:         rgba(220,38,38,.1);
    --info:              #0284c7;
    --info-dim:          rgba(2,132,199,.1);

    /* Shadows */
    --shadow-card:       0 0 0 1px var(--border), 0 1px 3px rgba(0,0,0,.06);
    --shadow-md:         0 4px 12px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.05);
    --shadow-focus:      0 0 0 3px var(--primary-dim);

    /* Radii */
    --radius-sm:         6px;
    --radius:            8px;
    --radius-md:         10px;
    --radius-lg:         12px;
    --radius-xl:         16px;

    /* Layout */
    --sidebar-w:             220px;
    --sidebar-collapsed-w:   52px;
    --appbar-h:              52px;

    /* Controls */
    --ctrl-h:            2.25rem;
    --ctrl-radius:       var(--radius);
    --ctrl-border:       var(--border-input);
    --ctrl-bg:           var(--surface);
    --ctrl-bg-focus:     var(--surface);
    --ctrl-shadow-focus: var(--shadow-focus);

    /* Legacy aliases */
    --glass-card:        var(--surface);
    --glass-bg:          var(--surface);
    --glass-border:      var(--border);
    --glass-shine:       rgba(255,255,255,.8);
    --bg-gradient:       none;
    --shadow:            rgba(0,0,0,.08);
}

/* ── 2. DARK MODE TOKENS ───────────────────────────────────── */
html[data-theme="dark"] {
    color-scheme: dark;
    --bg:                #0f172a;
    --surface:           #1e293b;
    --surface2:          #162032;
    --surface-hover:     rgba(255,255,255,.04);
    --border:            #334155;
    --border-input:      #475569;
    --text:              #f1f5f9;
    --text-muted:        #94a3b8;
    --text-dim:          #64748b;
    --shadow-card:       0 0 0 1px var(--border), 0 1px 3px rgba(0,0,0,.3);
    --shadow-md:         0 4px 12px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.2);
    --glass-card:        var(--surface);
    --glass-bg:          var(--surface);
    --glass-border:      var(--border);
    --shadow:            rgba(0,0,0,.3);
    /* Chrome — sidebar/appbar scura in dark mode */
    --chrome-bg:         #1e293b;
    --chrome-border:     #334155;
    --chrome-text:       #f1f5f9;
    --chrome-muted:      #94a3b8;
    --chrome-hover:      rgba(255,255,255,.06);
    --chrome-active-bg:  rgba(249,115,22,.15);
}

/* System dark (no explicit choice) */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
        color-scheme: dark;
        --bg:                #0f172a;
        --surface:           #1e293b;
        --surface2:          #162032;
        --surface-hover:     rgba(255,255,255,.04);
        --border:            #334155;
        --border-input:      #475569;
        --text:              #f1f5f9;
        --text-muted:        #94a3b8;
        --text-dim:          #64748b;
        --shadow-card:       0 0 0 1px var(--border), 0 1px 3px rgba(0,0,0,.3);
        --shadow-md:         0 4px 12px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.2);
        --glass-card:        var(--surface);
        --glass-bg:          var(--surface);
        --glass-border:      var(--border);
        --shadow:            rgba(0,0,0,.3);
        /* Chrome — sidebar/appbar scura in dark mode */
        --chrome-bg:         #1e293b;
        --chrome-border:     #334155;
        --chrome-text:       #f1f5f9;
        --chrome-muted:      #94a3b8;
        --chrome-hover:      rgba(255,255,255,.06);
        --chrome-active-bg:  rgba(249,115,22,.15);
    }
}

/* ── 3. RESET & BASE ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
    height: 100%;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--primary-hover); text-decoration: none; }

/* Underline animato "figo": cresce da sinistra sull'hover, solo per i link di
   contenuto (esclusi bottoni, nav, brand e link che fanno da contenitore). */
a:not(.btn-primary):not(.btn-secondary):not(.btn-sm-danger):not(.btn-xs):not(.btn-sm):not(.nav-link):not(.rr-brand):not(.dropdown-item):not(.plain-link):not(.app-version-btn):not(.dash-lead-link):not(.link-back):not(.temp-dot-link) {
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 1.5px;
    transition: background-size .25s ease, color .18s ease;
}
a:not(.btn-primary):not(.btn-secondary):not(.btn-sm-danger):not(.btn-xs):not(.btn-sm):not(.nav-link):not(.rr-brand):not(.dropdown-item):not(.plain-link):not(.app-version-btn):not(.dash-lead-link):not(.link-back):not(.temp-dot-link):hover {
    background-size: 100% 1.5px;
}
.ic { color: var(--primary); font-style: normal; display: inline-block; line-height: 1; }

/* ── 4. LAYOUT ─────────────────────────────────────────────── */
.rr-layout { background: var(--bg); height: 100vh; display: flex; flex-direction: column; overflow: hidden; }

.rr-appbar {
    height: var(--appbar-h);
    background: var(--chrome-bg);
    border-bottom: 1px solid var(--chrome-border);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 1rem; flex-shrink: 0; z-index: 100; position: relative;
}
.rr-appbar-left  { display: flex; align-items: center; gap: .75rem; }
.rr-appbar-right { display: flex; align-items: center; gap: .4rem; }

.rr-brand { font-size: 1.05rem; font-weight: 800; letter-spacing: 0; color: var(--chrome-text); text-decoration: none; display: flex; align-items: center; gap: .55rem; padding: 2px 4px 2px 0; }
.rr-brand .brand-text span { color: var(--primary); }
.rr-brand:hover { text-decoration: none; color: var(--chrome-text); }
.brand-flame { width: 24px; height: 24px; flex-shrink: 0; color: #f97316; filter: drop-shadow(0 1px 4px rgba(249,115,22,.5)); }

.hamburger { background: none; border: none; padding: .35rem; cursor: pointer; display: flex; flex-direction: column; gap: 5px; border-radius: 6px; transition: background .15s; }
.hamburger:hover { background: var(--chrome-hover); }
.hamburger span { display: block; width: 18px; height: 2px; background: var(--chrome-muted); border-radius: 2px; transition: transform .25s, opacity .25s; }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Dark mode toggle button */
.theme-toggle {
    background: none; border: none; cursor: pointer; color: var(--chrome-muted);
    padding: .35rem .4rem; border-radius: 6px; font-size: .95rem; line-height: 1;
    transition: background .15s, color .15s; display: flex; align-items: center; justify-content: center;
    font-family: inherit;
}
.theme-toggle:hover { background: var(--chrome-hover); color: var(--chrome-text); }

.rr-body { display: flex; flex: 1; overflow: hidden; position: relative; }

.rr-sidebar {
    width: var(--sidebar-w); background: var(--chrome-bg); border-right: 1px solid var(--chrome-border);
    display: flex; flex-direction: column; flex-shrink: 0;
    overflow-y: auto; transition: width .25s, transform .25s;
    /* Scrollbar sottile tematica — visibile solo quando necessario */
    scrollbar-width: thin;
    scrollbar-color: var(--chrome-border) transparent;
}
.rr-sidebar::-webkit-scrollbar { width: 4px; }
.rr-sidebar::-webkit-scrollbar-track { background: transparent; }
.rr-sidebar::-webkit-scrollbar-thumb { background: var(--chrome-border); border-radius: 4px; }
.rr-sidebar::-webkit-scrollbar-thumb:hover { background: var(--chrome-muted); }
.rr-sidebar.collapsed { width: var(--sidebar-collapsed-w); overflow: hidden; }
.rr-sidebar.collapsed .nav-link { padding: .5rem 0; justify-content: center; gap: 0; }
.rr-sidebar.collapsed .nav-label { display: none; }
.rr-sidebar.collapsed .nav-group-label { display: none; }
.rr-sidebar.collapsed .nav-svg { opacity: .8; }

.sidebar-nav { padding: .6rem .5rem 1rem; display: flex; flex-direction: column; gap: .1rem; flex: 1; }
.sidebar-nav .nav-link {
    display: flex; align-items: center; gap: .6rem; padding: .475rem .85rem;
    border-radius: var(--radius); color: var(--chrome-muted); font-size: .855rem; font-weight: 500;
    text-decoration: none; transition: background .15s, color .15s;
}
.sidebar-nav .nav-link:hover { background: var(--chrome-hover); color: var(--chrome-text); text-decoration: none; }
.sidebar-nav .nav-link.active { background: var(--primary); color: #fff; }
.sidebar-nav .nav-link.active .nav-svg { opacity: 1; }
.nav-svg { width: 17px; height: 17px; flex-shrink: 0; opacity: .65; }
.nav-fa { width: 17px; height: 17px; flex-shrink: 0; font-size: 14px; opacity: .65; display: flex; align-items: center; justify-content: center; }
.sidebar-nav .nav-link.active .nav-fa { opacity: 1; }
.nav-group-label { font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--chrome-muted); padding: .9rem .85rem .3rem; opacity: .55; }
.nav-divider { border: none; border-top: 1px solid var(--chrome-border); margin: .5rem .85rem; }

/* ── Collapsible submenu ─────────────────────────────────────── */
.nav-parent {
    background: none; border: none; cursor: pointer; width: 100%;
    text-align: left;
}
.nav-parent .nav-chevron {
    margin-left: auto; width: 14px; height: 14px; flex-shrink: 0; opacity: .5;
    transition: transform .2s;
}
.nav-parent.open .nav-chevron { transform: rotate(90deg); }
.nav-parent.open { color: var(--chrome-text); }

.nav-submenu {
    display: none; flex-direction: column; gap: .05rem;
    padding-left: .85rem; margin-top: .05rem;
}
.nav-submenu.open { display: flex; }

.nav-sub-item {
    padding-left: 1.6rem !important;
    font-size: .82rem !important;
    position: relative;
}
.nav-sub-item::before {
    content: '';
    position: absolute; left: .72rem; top: 50%;
    width: 5px; height: 5px; border-radius: 50%;
    background: currentColor; opacity: .4;
    transform: translateY(-50%);
}
.nav-sub-item.active::before { opacity: 1; background: currentColor; }

/* Sidebar collapsed: nascondi submenu e chevron */
.rr-sidebar.collapsed .nav-submenu { display: none !important; }
.rr-sidebar.collapsed .nav-chevron { display: none; }
.rr-sidebar.collapsed .nav-parent { justify-content: center; }

.rr-main { flex: 1; overflow-y: auto; padding: 1.5rem; display: flex; flex-direction: column; }
.rr-page { flex: 1 1 auto; }

.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 90; }

@media (max-width: 768px) {
    .rr-sidebar { position: fixed; top: var(--appbar-h); left: 0; bottom: 0; z-index: 95; transform: translateX(-100%); }
    .rr-sidebar.open { transform: translateX(0); }
    .sidebar-overlay { display: block; opacity: 0; pointer-events: none; transition: opacity .25s; }
    .sidebar-overlay.visible { opacity: 1; pointer-events: auto; }
    /* Contenuto: occupa tutta la larghezza senza sidebar, overflow orizzontale contenuto */
    .rr-main { padding: 1rem; overflow-x: hidden; }
    /* Evita che elementi figli diretti superino la larghezza disponibile */
    .rr-main > * { max-width: 100%; }
}

/* ── 5. USER MENU ──────────────────────────────────────────── */
.rr-user { position: relative; }
.user-btn {
    background: var(--chrome-hover); border: 1px solid var(--chrome-border); color: var(--chrome-muted);
    border-radius: var(--radius); padding: .3rem .65rem; font-size: .82rem; cursor: pointer;
    display: flex; align-items: center; gap: .4rem; transition: background .15s, color .15s; font-family: inherit;
}
.user-btn:hover { background: var(--chrome-hover); color: var(--chrome-text); }
.chevron {
    font-size: .72rem;
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px;
    opacity: .55;
    transition: transform .2s, opacity .15s;
    flex-shrink: 0;
}
.user-btn:hover .chevron { opacity: .85; }
.chevron.up { transform: rotate(180deg); opacity: .9; }

.user-dropdown {
    position: absolute; top: calc(100% + 6px); right: 0; background: var(--chrome-bg);
    border: 1px solid var(--chrome-border); border-radius: var(--radius-md);
    min-width: 170px; padding: .3rem; box-shadow: var(--shadow-md); z-index: 200;
}
.dropdown-section-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--chrome-muted); padding: .35rem .6rem .2rem; }
.dropdown-item {
    display: block; width: 100%; text-align: left; padding: .42rem .7rem; border-radius: 6px;
    font-size: .83rem; color: var(--chrome-muted); background: transparent; border: none; cursor: pointer;
    transition: background .12s, color .12s; text-decoration: none; font-family: inherit;
}
.dropdown-item:hover { background: var(--chrome-hover); color: var(--chrome-text); text-decoration: none; }
.dropdown-item.lang-active { color: var(--primary); background: var(--chrome-active-bg); }
.dropdown-divider { border: none; border-top: 1px solid var(--chrome-border); margin: .3rem 0; }
.logout-item { color: #f87171; }
.logout-item:hover { background: rgba(220,38,38,.15); color: #f87171; }

/* ── 6. CARDS ──────────────────────────────────────────────── */
.glass-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 1.25rem; margin-bottom: 1.25rem;
    box-shadow: var(--shadow-card);
}

/* ── 7. FORM CONTROLS ──────────────────────────────────────── */
.form-input, .form-control, .cfg-input {
    display: block; width: 100%; height: var(--ctrl-h); padding: 0 .75rem;
    border-radius: var(--ctrl-radius); border: 1px solid var(--ctrl-border);
    background: var(--ctrl-bg); color: var(--text); font-size: .875rem;
    font-family: inherit; line-height: 1.5; transition: border-color .15s, box-shadow .15s;
    -webkit-appearance: none; appearance: none;
}
.form-input:focus, .form-control:focus, .cfg-input:focus {
    outline: none; border-color: var(--primary); box-shadow: var(--ctrl-shadow-focus);
}
.form-input::placeholder, .form-control::placeholder, .cfg-input::placeholder { color: var(--text-dim); font-size: .85rem; }
.form-input:disabled, .form-control:disabled { opacity: .55; cursor: not-allowed; background: var(--surface2); }
.form-input.input-error, .form-control.input-error { border-color: var(--error); }
.form-input.input-error:focus, .form-control.input-error:focus { box-shadow: 0 0 0 3px rgba(220,38,38,.12); }

textarea.form-input, textarea.form-control, textarea.cfg-input {
    height: auto; min-height: 5rem; padding: .55rem .75rem; resize: vertical; line-height: 1.55;
}
select.form-input, select.form-control, select.cfg-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .7rem center; padding-right: 2.2rem; cursor: pointer;
}
.cfg-textarea {
    width: 100%; min-height: 120px; padding: .55rem .75rem; border-radius: var(--ctrl-radius);
    border: 1px solid var(--ctrl-border); background: var(--ctrl-bg); color: var(--text);
    font-size: .8rem; font-family: monospace; resize: vertical; transition: border-color .15s, box-shadow .15s;
}
.cfg-textarea:focus { outline: none; border-color: var(--primary); box-shadow: var(--ctrl-shadow-focus); }

.form-group { display: flex; flex-direction: column; gap: .35rem; }
.form-group label, .form-label { font-size: .78rem; font-weight: 600; color: var(--text-muted); letter-spacing: .02em; }
.form-row { display: flex; gap: .75rem; }
.form-row .form-group { flex: 1; min-width: 0; }
@media (max-width: 560px) { .form-row { flex-direction: column; } }
.input-error { border-color: var(--error) !important; }

/* ── 8. BUTTONS ────────────────────────────────────────────── */
.btn-primary {
    display: inline-flex; align-items: center; gap: .4rem; padding: .52rem 1.1rem;
    border-radius: var(--radius); background: var(--primary); color: #fff;
    font-size: .855rem; font-weight: 600; font-family: inherit; border: none; cursor: pointer;
    text-decoration: none; white-space: nowrap; transition: background .15s, box-shadow .15s, transform .1s;
    box-shadow: 0 1px 2px rgba(0,0,0,.1);
}
.btn-primary:hover:not(:disabled) {
    background: var(--primary-hover); color: #fff; text-decoration: none;
    box-shadow: 0 3px 10px rgba(247,139,30,.35); transform: translateY(-1px);
}
.btn-primary:active:not(:disabled) { transform: translateY(0); box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }

.btn-secondary {
    display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1rem;
    border-radius: var(--radius); background: var(--surface); color: var(--text-muted);
    font-size: .855rem; font-weight: 500; font-family: inherit; border: 1px solid var(--border);
    cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: background .15s, color .15s, border-color .15s; box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.btn-secondary:hover { background: var(--surface2); color: var(--text); border-color: var(--border-input); text-decoration: none; }
.btn-secondary:disabled { opacity: .5; cursor: not-allowed; }

.btn-auth {
    width: 100%; padding: .75rem; border-radius: var(--radius-md); border: none;
    background: var(--primary); color: #fff; font-size: .95rem; font-weight: 700; font-family: inherit;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: .5rem;
    transition: background .2s, box-shadow .2s; box-shadow: 0 4px 14px var(--primary-dim);
}
.btn-auth:hover:not(:disabled) { background: var(--primary-hover); box-shadow: 0 6px 20px rgba(247,139,30,.4); }
.btn-auth:disabled { opacity: .6; box-shadow: none; }

.btn-sm-danger  { padding: .3rem .75rem; border-radius: var(--radius-sm); background: var(--error-dim); color: var(--error); border: 1px solid rgba(239,68,68,.2); cursor: pointer; font-size: .8rem; font-weight: 500; font-family: inherit; display: inline-flex; align-items: center; gap: .3rem; transition: background .15s; }
.btn-sm-danger:hover { background: rgba(239,68,68,.2); }
.btn-sm-success { padding: .3rem .75rem; border-radius: var(--radius-sm); background: var(--success-dim); color: var(--success); border: 1px solid rgba(34,197,94,.2); cursor: pointer; font-size: .8rem; font-weight: 500; font-family: inherit; display: inline-flex; align-items: center; gap: .3rem; transition: background .15s; }
.btn-sm-success:hover { background: rgba(34,197,94,.2); }
.btn-sm-info    { padding: .3rem .75rem; border-radius: var(--radius-sm); background: var(--info-dim); color: var(--info); border: 1px solid rgba(2,132,199,.2); cursor: pointer; font-size: .8rem; font-weight: 500; font-family: inherit; display: inline-flex; align-items: center; gap: .3rem; transition: background .15s; }

.btn-sm      { padding: .38rem .8rem; font-size: .8rem; border-radius: var(--radius-sm); gap: .3rem; }
.btn-xs      { padding: .25rem .6rem; font-size: .75rem; border-radius: var(--radius-sm); }
.btn-compact { padding: .3rem .75rem; font-size: .8rem; }
.btn-inline  { padding: .28rem .6rem; font-size: .83rem; }
.btn-full    { width: 100%; justify-content: center; }
.btn-icon    { margin-right: .35rem; vertical-align: middle; }

/* ── 9. SPINNER ────────────────────────────────────────────── */
.spinner { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 10. ALERTS ────────────────────────────────────────────── */
.alert { padding: .65rem .9rem; border-radius: var(--radius); margin-bottom: 1rem; font-size: .855rem; }
.alert-info    { background: var(--info-dim);    border: 1px solid rgba(2,132,199,.2);   color: var(--info); }
.alert-warning { background: var(--warning-dim); border: 1px solid rgba(217,119,6,.2);   color: var(--warning); }
.alert-error   { background: var(--error-dim);   border: 1px solid rgba(220,38,38,.2);   color: var(--error); }
.alert-success { background: var(--success-dim); border: 1px solid rgba(22,163,74,.2);   color: var(--success); }

/* ── 11. AUTH PAGES ────────────────────────────────────────── */
.auth-wrapper { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1rem; background: var(--bg); }
.auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 2.25rem 2rem; width: 100%; max-width: 420px; box-shadow: var(--shadow-md); }
.auth-logo { text-align: center; margin-bottom: 1.5rem; }
.logo-text { font-size: 1.9rem; font-weight: 800; letter-spacing: -1px; color: var(--text); }
.logo-accent { color: var(--primary); }
.auth-tabs { display: flex; background: var(--surface2); border-radius: var(--radius); padding: 3px; margin-bottom: 1.5rem; border: 1px solid var(--border); }
.tab-btn { flex: 1; padding: .5rem; border-radius: 6px; font-size: .875rem; font-weight: 600; background: transparent; color: var(--text-dim); border: none; cursor: pointer; font-family: inherit; transition: background .2s, color .2s; }
.tab-btn.active { background: var(--primary); color: #fff; }
.tab-btn:not(.active):hover { color: var(--text-muted); }
.auth-form { display: flex; flex-direction: column; gap: 1rem; }
.pending-state { text-align: center; padding: 1rem 0; }
.pending-icon { font-size: 2.5rem; margin-bottom: .75rem; }
.pending-title { font-size: 1.05rem; font-weight: 700; margin-bottom: .5rem; }
.pending-sub { font-size: .855rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 1.25rem; }
.link-back { font-size: .855rem; color: var(--primary); text-decoration: none; }
.link-back:hover { text-decoration: underline; }
.verify-email { font-size: .875rem; color: var(--text-muted); margin-bottom: 1rem; text-align: center; }
.code-input { font-size: 2rem; letter-spacing: .5rem; text-align: center; padding: .75rem; }
.verify-note { font-size: .78rem; color: var(--text-dim); text-align: center; margin-top: 1rem; }
.verify-back { text-align: center; margin-top: .5rem; }
.rr-layout-auth { display: flex; align-items: center; justify-content: center; min-height: 100vh; overflow: auto; background: var(--bg); }
.field-error { font-size: .78rem; color: var(--error); margin-top: .2rem; }

/* ── 12. PAGE HEADER ───────────────────────────────────────── */
.rr-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; flex-wrap: wrap; gap: .5rem; }
.rr-header h1 { font-size: 1.3rem; font-weight: 700; letter-spacing: -.4px; margin: 0; }

/* ── 13. STAT CARDS ────────────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .75rem; margin-bottom: 1.5rem; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem 1.25rem; box-shadow: var(--shadow-card); text-align: center; }
.stat-value { display: block; font-size: 1.7rem; font-weight: 700; color: var(--primary); }
.stat-label { font-size: .7rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; }
.stat-card.today .stat-value { color: var(--info); }

/* ── 14. TABLES ────────────────────────────────────────────── */
.rr-table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--border); }
.rr-table { width: 100%; border-collapse: collapse; font-size: .855rem; }
.rr-table th { background: var(--surface2); color: var(--text-dim); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; padding: .6rem 1rem; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.rr-table td { padding: .65rem 1rem; border-bottom: 1px solid var(--border); color: var(--text-muted); vertical-align: middle; }
.rr-table tr:last-child td { border-bottom: none; }
.rr-table tr:hover td { background: var(--surface-hover); }
/* Colonna azioni sticky a destra — sempre visibile anche su mobile */
.rr-table th.col-act, .rr-table td.col-act {
    position: sticky; right: 0;
    background: var(--surface2);
    box-shadow: -3px 0 6px rgba(0,0,0,.1);
}
.rr-table td.col-act { background: var(--surface); }
.rr-table tr:hover td.col-act { background: var(--surface-hover); }
/* Colonne secondarie nascoste su schermi stretti */
@media (max-width: 640px) { .col-sm-hide { display: none !important; } }
.data-table { width: 100%; border-collapse: collapse; font-size: .855rem; }
.data-table th { background: var(--surface2); color: var(--text-dim); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; padding: .6rem 1rem; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.data-table td { padding: .65rem 1rem; border-bottom: 1px solid var(--border); color: var(--text-muted); vertical-align: middle; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--surface-hover); }

/* ── 15. BADGES ────────────────────────────────────────────── */
.badge { font-size: .68rem; padding: .15rem .5rem; border-radius: 999px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.badge-primary { background: var(--primary-dim);  color: var(--primary); }
.badge-success { background: var(--success-dim);  color: var(--success); }
.badge-warning { background: var(--warning-dim);  color: var(--warning); }
.badge-error   { background: var(--error-dim);    color: var(--error); }
.badge-muted   { background: var(--surface2);     color: var(--text-dim); border: 1px solid var(--border); }
.badge-info    { background: var(--info-dim);     color: var(--info); }

/* ── 16. FILTERS / SELECTS ─────────────────────────────────── */
.rr-filters { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; align-items: center; }
.rr-select {
    background: var(--surface); border: 1px solid var(--border); color: var(--text);
    border-radius: var(--radius); padding: .38rem .7rem; font-size: .855rem; font-family: inherit;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .6rem center; padding-right: 2rem;
}
.rr-select:focus { outline: none; border-color: var(--primary); box-shadow: var(--shadow-focus); }
.rr-select option { background: var(--surface); color: var(--text); }

/* ── 17. PAGINATION ────────────────────────────────────────── */
.pagination { display: flex; align-items: center; justify-content: center; gap: .75rem; margin: 1.5rem 0; }
.btn-page { padding: .38rem .85rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); cursor: pointer; font-size: .83rem; font-family: inherit; transition: background .15s, color .15s; }
.btn-page:hover:not(:disabled) { background: var(--primary-dim); color: var(--primary); border-color: var(--primary-border); }
.btn-page:disabled { opacity: .4; cursor: not-allowed; }
.page-info { font-size: .83rem; color: var(--text-dim); }

/* ── 18. ERROR PAGE ────────────────────────────────────────── */
.error-page-wrapper { display: flex; align-items: center; justify-content: center; min-height: 60vh; padding: 2rem; }
.error-card { max-width: 520px; width: 100%; text-align: center; padding: 2.5rem 2rem; }
.error-icon { font-size: 3rem; margin-bottom: 1rem; }
.error-title { font-size: 1.5rem; font-weight: 700; margin: 0 0 .6rem; }
.error-subtitle { font-size: .875rem; color: var(--text-muted); margin: 0 0 1.5rem; line-height: 1.6; }

/* ── 19. USER CARDS ────────────────────────────────────────── */
.user-list { display: flex; flex-direction: column; gap: .75rem; }
.user-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem 1.25rem; box-shadow: var(--shadow-card); display: grid; grid-template-columns: auto 1fr; gap: 0 1rem; align-items: start; transition: border-color .2s; }
.user-card:hover { border-color: var(--primary-border); }
.user-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--primary-dim); border: 2px solid var(--primary-border); display: flex; align-items: center; justify-content: center; font-size: .82rem; font-weight: 700; color: var(--primary); flex-shrink: 0; margin-top: 2px; text-transform: uppercase; }
.user-body { display: flex; flex-direction: column; gap: .35rem; }
.user-row1 { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.user-name  { font-weight: 700; font-size: .95rem; }
.user-role  { font-size: .68rem; padding: .12rem .45rem; border-radius: 4px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.role-admin { background: var(--primary-dim); color: var(--primary); border: 1px solid var(--primary-border); }
.role-user  { background: var(--surface2); color: var(--text-muted); border: 1px solid var(--border); }
.user-email { color: var(--text-muted); font-size: .84rem; }

/* ── 20. CONFIRM MODAL ─────────────────────────────────────── */
.confirm-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 500; }
.confirm-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 1.75rem 2rem; max-width: 420px; width: 90%; text-align: center; box-shadow: var(--shadow-md); }
.confirm-box p { font-size: .93rem; color: var(--text); line-height: 1.55; margin-bottom: 1.5rem; }
.confirm-actions { display: flex; gap: .75rem; justify-content: center; }

/* ── 21. DETAIL PAGE ───────────────────────────────────────── */
.detail-meta { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.25rem; }
.detail-section { margin-bottom: 1.25rem; }
.detail-label { font-size: .7rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; display: block; margin-bottom: .4rem; }
.detail-value { color: var(--text-muted); font-size: .875rem; word-break: break-all; }
.monospace { font-family: monospace; font-size: .8rem; }
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ══════════════════════════════════════════════════════════════
   DASHBOARD
   ══════════════════════════════════════════════════════════════ */
.dash-subtitle { font-size: .83rem; color: var(--text-dim); }
.dash-kpi-strip { grid-template-columns: repeat(4,1fr); }
.dash-kpi-success .stat-value { color: var(--success); }
.dash-kpi-warning .stat-value { color: var(--warning); }
.dash-kpi-hot .stat-value { color: var(--error); }
.dash-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; margin-bottom: 1.25rem; }
.dash-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.25rem; }
.dash-card { display: flex; flex-direction: column; }
.dash-card-title { font-size: .93rem; font-weight: 600; margin: 0 0 .85rem; }
.dash-stack    { display: flex; flex-direction: column; gap: .65rem; }
.dash-stack-lg { display: flex; flex-direction: column; gap: .85rem; }
.dash-stack-sm { display: flex; flex-direction: column; gap: .5rem; }
.dash-between    { display: flex; justify-content: space-between; align-items: center; }
.dash-between-sm { display: flex; justify-content: space-between; align-items: center; font-size: .84rem; margin-bottom: .35rem; }
.dash-between-xs { display: flex; justify-content: space-between; align-items: center; font-size: .8rem; margin-bottom: .2rem; }
.dash-metric-label { font-size: .84rem; color: var(--text-dim); }
.dash-bar-track { height: 5px; background: var(--surface2); border-radius: 3px; overflow: hidden; }
.dash-bar-fill { height: 100%; border-radius: 3px; transition: width .4s ease; }
.dash-bar-fill-success { background: var(--success); }
.dash-bar-fill-warning { background: var(--warning); }
.dash-bar-thin { height: 4px; background: var(--surface2); border-radius: 3px; overflow: hidden; }
.dash-bar-thin-fill { height: 100%; border-radius: 3px; }
.dash-actions { margin-top: auto; padding-top: .85rem; display: flex; gap: .5rem; }
.dash-chart-bars { display: flex; align-items: flex-end; gap: 4px; height: 120px; padding-top: .5rem; }
.dash-chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.dash-chart-bar { width: 100%; background: var(--primary); border-radius: 3px 3px 0 0; transition: height .4s ease; }
.dash-chart-label { font-size: .63rem; color: var(--text-dim); margin-top: .35rem; white-space: nowrap; }
.dash-lead-row { display: flex; justify-content: space-between; align-items: center; padding: .45rem 0; border-bottom: 1px solid var(--border); }
.dash-lead-info { min-width: 0; }
.dash-lead-link { color: var(--text); text-decoration: none; font-weight: 500; font-size: .87rem; }
.dash-lead-link:hover { color: var(--primary); }
.dash-lead-temp { font-size: .74rem; color: var(--text-dim); }
.dash-lead-score { font-size: .77rem; flex-shrink: 0; }
.dash-all-leads { display: block; text-align: center; margin-top: .75rem; font-size: .83rem; color: var(--primary); text-decoration: none; }
.dash-all-leads:hover { text-decoration: underline; }
.dash-empty { color: var(--text-dim); font-size: .85rem; margin: 0; }
.dash-empty-box { text-align: center; padding: 2rem; color: var(--text-dim); }
.dash-empty-icon { font-size: 2.5rem; margin-bottom: .5rem; }
.dash-events-header { margin-top: .5rem; }
.dash-events-btn { font-size: .83rem; }
.dash-td-email { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-td-date { white-space: nowrap; font-size: .8rem; color: var(--text-dim); }
.dash-td-action { width: 2.5rem; text-align: center; }

/* ══════════════════════════════════════════════════════════════
   AUTOMATIONS — INDEX LIST
   ══════════════════════════════════════════════════════════════ */
.auto-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-card); }
.auto-list-head { display: grid; grid-template-columns: minmax(0,1.9fr) repeat(4, minmax(72px,.18fr)) minmax(180px,.42fr); align-items: center; column-gap: 1rem; padding: .8rem 1.5rem; background: var(--surface2); border-bottom: 1px solid var(--border); font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); }
.auto-head-name { min-width: 0; }
.auto-row { display: grid; grid-template-columns: minmax(0,1.9fr) repeat(4, minmax(72px,.18fr)) minmax(180px,.42fr); align-items: center; column-gap: 1rem; padding: 1rem 1.5rem; background: var(--surface); border-bottom: 1px solid var(--border); transition: background .12s; }
.auto-row:last-child { border-bottom: none; }
.auto-row:hover { background: var(--surface-hover); }
.auto-row-main { min-width: 0; }
.auto-row-topline { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; min-width: 0; }
.auto-row-name { font-weight: 700; font-size: 1rem; color: var(--text); text-decoration: none; transition: color .12s; min-width: 0; }
.auto-row-name:hover { color: var(--primary); text-decoration: none; }
.auto-row-desc { font-size: .87rem; color: var(--text-muted); margin-top: .28rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.auto-row-stats { display: contents; }
.auto-stat-col { display: flex; flex-direction: column; align-items: center; gap: .2rem; text-align: center; }
.auto-stat-label { display: none; font-size: .67rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .08em; }
.auto-stat-val { font-size: 1.8rem; font-weight: 800; color: var(--text); line-height: 1; }
.auto-head-col { width: 72px; text-align: center; }
.auto-head-actions { min-width: 0; width: 160px; }
.auto-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: .4rem; min-width: 0; }
.auto-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.auto-status-dot.on  { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.12); }
.auto-status-dot.off { background: var(--text-dim); }
.auto-pill { font-size: .67rem; }

@media (max-width: 1200px) {
    .auto-list-head, .auto-row { grid-template-columns: minmax(0,1.6fr) repeat(4, minmax(56px,.16fr)) minmax(156px,.38fr); column-gap: .8rem; }
    .auto-row-name { font-size: .97rem; }
    .auto-stat-val { font-size: 1.5rem; }
}
@media (max-width: 920px) {
    .auto-list { border-radius: var(--radius-lg); }
    .auto-list-head { display: none; }
    .auto-row { grid-template-columns: minmax(0,1fr); row-gap: .9rem; padding: 1rem; }
    .auto-row-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .65rem; }
    .auto-stat-col { align-items: flex-start; padding: .8rem .85rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface2); }
    .auto-stat-label { display: block; }
    .auto-stat-val { font-size: 1.25rem; }
    .auto-row-actions { justify-content: flex-start; flex-wrap: wrap; }
}
@media (max-width: 640px) {
    .rr-header { align-items: flex-start; }
    .rr-header .d-flex.gap-sm, .rr-header .form-inline, .rr-header .btn-primary { width: 100%; }
    .auto-row-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .auto-row-actions { display: grid; grid-template-columns: repeat(3, minmax(0,max-content)); gap: .5rem; }
}

/* ── Automations Detail ───────────────────────────────────── */
.auto-back { display: inline-flex; align-items: center; gap: .35rem; color: var(--text-dim); text-decoration: none; font-size: .8rem; margin-bottom: .6rem; transition: color .15s; }
.auto-back:hover { color: var(--primary); text-decoration: none; }
.auto-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.auto-head-title { font-size: 1.55rem; font-weight: 800; letter-spacing: -.6px; color: var(--text); margin: 0 0 .15rem; line-height: 1.15; }
.auto-head-sub   { font-size: .855rem; color: var(--text-muted); margin: 0; }
.auto-head-right { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; padding-top: .2rem; }
.auto-toolbar { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.auto-toolbar-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .85rem; border-radius: var(--radius-sm); font-size: .8rem; font-weight: 500; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); cursor: pointer; text-decoration: none; font-family: inherit; transition: background .12s, color .12s, border-color .12s; }
.auto-toolbar-btn:hover { background: var(--surface2); color: var(--text); border-color: var(--border-input); text-decoration: none; }
.auto-toolbar-btn svg { flex-shrink: 0; }
.env-select { padding: .4rem .85rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: .8rem; cursor: pointer; font-family: inherit; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%2394a3b8'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .6rem center; padding-right: 2rem; }

.auto-sender { margin-bottom: 1.25rem; }
.auto-sender-label { font-size: .7rem; font-weight: 600; color: var(--text-muted); margin-bottom: .4rem; }
.auto-sender-row { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.auto-sender-select { flex: 1; min-width: 240px; max-width: 600px; padding: .5rem 2.2rem .5rem .85rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: .855rem; font-family: inherit; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='%2394a3b8'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .7rem center; }
.auto-sender-hint { font-size: .73rem; color: var(--text-dim); line-height: 1.4; flex-shrink: 0; }

.auto-stats-strip { display: grid; grid-template-columns: repeat(5,1fr); gap: 0; margin-bottom: 1.5rem; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.auto-stat-cell { padding: .9rem 1.2rem; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 0; }
.auto-stat-cell:last-child { border-right: none; }
.auto-stat-cell-lbl { display: flex; align-items: center; gap: .35rem; font-size: .7rem; color: var(--text-muted); margin-bottom: .4rem; }
.auto-stat-cell-lbl svg { flex-shrink: 0; opacity: .6; }
.auto-stat-cell-val { font-size: 1.3rem; font-weight: 700; color: var(--text); line-height: 1; }
.auto-stat-cell-val.is-active { font-size: 1.05rem; color: var(--success); }
.auto-stat-cell-val.is-paused { font-size: 1.05rem; color: var(--text-dim); }

.auto-tabs { display: flex; gap: .12rem; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem; }
.auto-tab { display: inline-flex; align-items: center; gap: .35rem; padding: .55rem .95rem; font-size: .855rem; font-weight: 500; font-family: inherit; border: none; background: none; cursor: pointer; color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .12s, border-color .12s; white-space: nowrap; }
.auto-tab:hover { color: var(--text); }
.auto-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.auto-tab .tab-count { font-size: .67rem; font-weight: 600; background: var(--surface2); border: 1px solid var(--border); color: var(--text-dim); padding: .04rem .4rem; border-radius: 99px; }
.auto-tab-panel { display: none; }
.auto-tab-panel.active { display: block; }

.flow-canvas { display: flex; flex-direction: column; align-items: center; padding: 2rem 1.5rem 3rem; background: var(--surface2); border-radius: var(--radius-lg); border: 1px solid var(--border); min-height: 200px; }
.flow-node-wrap { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 700px; }
.flow-node { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); display: flex; align-items: stretch; gap: 0; box-shadow: var(--shadow-card); transition: box-shadow .15s, border-color .15s; overflow: hidden; position: relative; }
.flow-node:hover { box-shadow: var(--shadow-md); }
.flow-node-accent { width: 4px; flex-shrink: 0; align-self: stretch; }
.flow-node-accent.c-trigger { background: var(--primary); }
.flow-node-accent.c-email   { background: #3b82f6; }
.flow-node-accent.c-wait    { background: #f59e0b; }
.flow-node-accent.c-cond    { background: #a855f7; }
.flow-node-accent.c-tag     { background: #14b8a6; }
.flow-node-accent.c-score   { background: #f59e0b; }
.flow-node-accent.c-end     { background: var(--text-dim); }
.flow-node-handle { padding: 1rem .65rem; color: var(--text-dim); cursor: grab; font-size: 1rem; flex-shrink: 0; opacity: .45; transition: opacity .15s; display: flex; align-items: center; user-select: none; }
.flow-node:hover .flow-node-handle { opacity: 1; }
.flow-node.is-dragging { opacity: .4; box-shadow: none; }
.flow-node.drag-over { outline: 2px dashed var(--primary); outline-offset: 2px; background: var(--primary-dim); }
.flow-node-icon { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-right: .75rem; align-self: center; }
.flow-node-icon.c-trigger { background: var(--primary-dim); color: var(--primary); }
.flow-node-icon.c-email   { background: rgba(59,130,246,.12); color: #3b82f6; }
.flow-node-icon.c-wait    { background: rgba(245,158,11,.12); color: #f59e0b; }
.flow-node-icon.c-cond    { background: rgba(168,85,247,.12); color: #a855f7; }
.flow-node-icon.c-tag     { background: rgba(20,184,166,.12); color: #14b8a6; }
.flow-node-icon.c-score   { background: rgba(245,158,11,.12); color: #f59e0b; }
.flow-node-icon.c-end     { background: var(--surface2); color: var(--text-dim); }
.flow-node-body { flex: 1; min-width: 0; padding: .8rem 0; display: flex; flex-direction: column; justify-content: center; }
.flow-node-chip { display: inline-block; font-size: .58rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: .1rem .38rem; border-radius: 4px; margin-bottom: .28rem; width: fit-content; }
.flow-node-chip.c-trigger { background: var(--primary-dim); color: var(--primary); }
.flow-node-chip.c-email   { background: rgba(59,130,246,.12); color: #3b82f6; }
.flow-node-chip.c-wait    { background: rgba(245,158,11,.12); color: #f59e0b; }
.flow-node-chip.c-cond    { background: rgba(168,85,247,.12); color: #a855f7; }
.flow-node-chip.c-tag     { background: rgba(20,184,166,.12); color: #14b8a6; }
.flow-node-chip.c-score   { background: rgba(245,158,11,.12); color: #f59e0b; }
.flow-node-chip.c-end     { background: var(--surface2); color: var(--text-dim); }
.flow-node-title    { font-size: .9rem; font-weight: 600; color: var(--text); line-height: 1.3; }
.flow-node-subtitle { font-size: .77rem; color: var(--text-muted); margin-top: .15rem; }
.flow-node-actions { display: flex; align-items: center; gap: .3rem; padding: .75rem .85rem; flex-shrink: 0; align-self: center; }
.flow-node-btn { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .68rem; border-radius: var(--radius-sm); font-size: .77rem; font-weight: 500; border: 1px solid var(--border); background: var(--surface2); color: var(--text-muted); cursor: pointer; text-decoration: none; font-family: inherit; transition: background .12s, color .12s; }
.flow-node-btn:hover { background: var(--surface-hover); color: var(--text); text-decoration: none; }
.flow-node-btn.btn-edit { background: rgba(59,130,246,.1); border-color: rgba(59,130,246,.2); color: #3b82f6; }
.flow-node-btn.btn-edit:hover { background: rgba(59,130,246,.18); }
.flow-node-btn.icon-only { padding: .3rem .42rem; background: transparent; border-color: transparent; color: var(--text-dim); }
.flow-node-btn.icon-only:hover { background: var(--error-dim); color: var(--error); border-color: rgba(220,38,38,.2); }
.flow-connector { display: flex; flex-direction: column; align-items: center; height: 44px; flex-shrink: 0; }
.flow-connector-line { width: 2px; flex: 1; background: var(--border); }
.flow-connector-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.flow-connector-dot.c-trigger { background: var(--primary); }
.flow-connector-dot.c-email   { background: #3b82f6; }
.flow-connector-dot.c-wait    { background: #f59e0b; }
.flow-connector-dot.c-cond    { background: #a855f7; }
.flow-connector-dot.c-tag     { background: #14b8a6; }
.flow-connector-dot.c-score   { background: #f59e0b; }
.flow-connector-dot.c-end     { background: var(--text-dim); }
.flow-add-btn { margin-top: .75rem; display: inline-flex; align-items: center; gap: .4rem; padding: .48rem 1.2rem; border-radius: var(--radius); border: 1.5px dashed var(--border); background: transparent; color: var(--text-dim); font-size: .8rem; cursor: pointer; font-family: inherit; transition: border-color .15s, color .15s, background .15s; text-decoration: none; }
.flow-add-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-dim); text-decoration: none; }

.step-lead-badge { display: none; align-items: center; gap: 4px; margin-top: 4px; font-size: .7rem; font-weight: 600; color: var(--primary); background: var(--primary-dim); border: 1px solid var(--primary-border); border-radius: 20px; padding: 1px 8px; width: fit-content; }
.yaml-builder-toolbar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }

.enroll-bar { display: flex; justify-content: flex-end; align-items: center; margin-bottom: 1.25rem; }
.enroll-bar .form-group { flex: 1; min-width: 200px; }
.enroll-bar label { font-size: .73rem; color: var(--text-muted); font-weight: 500; margin-bottom: .3rem; display: block; }

.yaml-editor-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.yaml-editor-header { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; border-bottom: 1px solid var(--border); font-size: .855rem; font-weight: 600; color: var(--text); }
.yaml-editor-body { padding: 1.25rem; margin: 0; font-size: .8rem; color: var(--text); overflow-x: auto; line-height: 1.65; background: transparent; border: none; font-family: 'Cascadia Code','Fira Code','Consolas',monospace; max-height: 480px; overflow-y: auto; }
.yaml-hint-box { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.yaml-hint-header { display: flex; align-items: center; justify-content: space-between; padding: .45rem .85rem; background: var(--surface2); border-bottom: 1px solid var(--border); font-size: .77rem; font-weight: 600; color: var(--text-muted); }
.yaml-hint-copy { padding: 3px 10px; border: 1px solid var(--primary-border); border-radius: 5px; background: var(--primary-dim); color: var(--primary); font-size: .7rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: background .15s; }
.yaml-hint-copy:hover { background: var(--primary); color: #fff; }
.yaml-hint-pre { margin: 0; padding: .875rem 1rem; font-size: .75rem; line-height: 1.65; font-family: 'Cascadia Code','Fira Code','Consolas',monospace; background: #1e1e2e; color: #cdd6f4; overflow-x: auto; white-space: pre; }

.auto-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem 1.25rem; box-shadow: var(--shadow-card); display: flex; align-items: center; gap: 1rem; margin-bottom: .75rem; transition: border-color .2s; }
.auto-card:hover { border-color: var(--primary-border); }
.auto-card-info { flex: 1; min-width: 0; }
.auto-card-name { font-weight: 700; font-size: .95rem; color: var(--text); }
.auto-card-desc { font-size: .8rem; color: var(--text-muted); margin-top: .15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auto-stat { text-align: center; }
.auto-stat-lbl { font-size: .63rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; }
.auto-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.25rem; gap: 1rem; flex-wrap: wrap; }
.auto-header-back { display: flex; align-items: center; gap: .5rem; color: var(--text-muted); text-decoration: none; font-size: .83rem; margin-bottom: .4rem; }
.auto-header-back:hover { color: var(--primary); text-decoration: none; }
.auto-header-title { font-size: 1.45rem; font-weight: 800; letter-spacing: -.5px; color: var(--text); margin: 0; }
.auto-header-sub { font-size: .83rem; color: var(--text-muted); margin-top: .15rem; }
.auto-header-actions { display: flex; gap: .5rem; align-items: flex-start; flex-shrink: 0; }
.user-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--border); }

/* ══════════════════════════════════════════════════════════════
   TRACKING (lb-*)
   ══════════════════════════════════════════════════════════════ */
.lb-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.lb-title { font-size: 1.4rem; font-weight: 800; margin: 0 0 .2rem; color: var(--text); }
.lb-subtitle { color: var(--text-muted); font-size: .855rem; margin-top: .25rem; }
.lb-exclude-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1rem 1.25rem; margin-bottom: 1.25rem; }
.lb-exclude-header { display: flex; align-items: center; gap: .6rem; font-size: .875rem; font-weight: 500; margin-bottom: .75rem; }
.lb-exclude-header input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }
.lb-exclude-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }
.lb-chip { display: flex; align-items: center; gap: .35rem; background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: .18rem .5rem; font-size: .8rem; font-family: monospace; }
.lb-chip button { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 1rem; line-height: 1; padding: 0; }
.lb-chip button:hover { color: var(--error); }
.lb-exclude-add { display: flex; gap: .5rem; align-items: center; }
.lb-exclude-add input { border: 1px solid var(--border); border-radius: 6px; padding: .3rem .65rem; font-size: .83rem; width: 180px; outline: none; background: var(--surface); color: var(--text); font-family: inherit; }
.lb-exclude-add input:focus { border-color: var(--primary); }
.lb-btn-add  { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: .3rem .75rem; font-size: .83rem; cursor: pointer; color: var(--text); font-family: inherit; }
.lb-btn-save { background: var(--primary); color: #fff; border: none; border-radius: 6px; padding: .3rem .9rem; font-size: .83rem; font-weight: 600; cursor: pointer; font-family: inherit; }
.lb-saved-badge { background: var(--success-dim); color: var(--success); border-radius: 6px; padding: .2rem .6rem; font-size: .77rem; display: none; }
.lb-kpi-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: .75rem; margin-bottom: 1.25rem; }
.lb-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1rem 1.2rem; }
.lb-kpi-icon { font-size: 1.05rem; color: var(--text-muted); margin-bottom: .3rem; }
.lb-kpi-label { font-size: .77rem; color: var(--text-muted); margin-bottom: .2rem; }
.lb-kpi-value { font-size: 1.9rem; font-weight: 700; line-height: 1; color: var(--text); }
.lb-kpi-value.growth-pos { color: var(--success); }
.lb-kpi-value.growth-neg { color: var(--error); }
.lb-charts-row { display: grid; grid-template-columns: 1fr 320px; gap: .75rem; margin-bottom: 1.25rem; }
.lb-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1rem 1.2rem; }
.lb-card-title { font-size: .9rem; font-weight: 600; margin: 0 0 1rem; color: var(--text); }
.lb-chart-wrap { position: relative; height: 160px; }
.lb-chart-wrap-bar { height: 200px; }
.lb-donut-wrap { display: flex; flex-direction: column; align-items: center; }
.lb-donut-legend { display: flex; flex-direction: column; gap: .5rem; margin-top: 1rem; width: 100%; }
.lb-donut-legend-item { display: flex; align-items: center; gap: .5rem; font-size: .82rem; }
.lb-donut-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.lb-bottom-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1.25rem; }
.lb-source-item { margin-bottom: .75rem; }
.lb-source-header { display: flex; justify-content: space-between; font-size: .87rem; margin-bottom: .3rem; }
.lb-source-bar-bg { height: 4px; background: var(--surface2); border-radius: 3px; overflow: hidden; }
.lb-source-bar { height: 4px; border-radius: 3px; }
.lb-events-table { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.lb-events-table table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.lb-events-table th { background: var(--surface2); text-align: left; padding: .6rem 1rem; font-size: .77rem; font-weight: 600; color: var(--text-muted); border-bottom: 1px solid var(--border); white-space: nowrap; }
.lb-events-table td { padding: .58rem 1rem; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text-muted); }
.lb-events-table tr:last-child td { border-bottom: none; }
.lb-events-table tr:hover td { background: var(--surface-hover); }
.badge-pv    { background: var(--primary-dim); color: var(--primary); border: 1px solid var(--primary-border); border-radius: 6px; padding: .13rem .52rem; font-size: .77rem; font-weight: 500; white-space: nowrap; }
.badge-click { background: var(--info-dim); color: var(--info); border: 1px solid rgba(2,132,199,.25); border-radius: 6px; padding: .13rem .52rem; font-size: .77rem; font-weight: 500; white-space: nowrap; }
.lb-url-link     { color: var(--primary); text-decoration: none; font-family: monospace; font-size: .79rem; }
.lb-url-link:hover { text-decoration: underline; }
.lb-visitor-link { font-family: monospace; font-size: .77rem; color: var(--text-dim); text-decoration: none; }
.lb-visitor-link:hover { color: var(--primary); }
.lb-tooltip-wrap { position: relative; display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: default; }
.lb-tooltip-wrap:hover .lb-tooltip { display: block; }
.lb-tooltip { display: none; position: absolute; bottom: 125%; left: 0; background: #222; color: #fff; font-size: .77rem; padding: .3rem .6rem; border-radius: 5px; white-space: nowrap; z-index: 100; pointer-events: none; }
.lb-install-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1rem 1.25rem; margin-bottom: 1.25rem; }
.lb-install-title { font-size: .875rem; font-weight: 600; margin-bottom: .6rem; display: flex; align-items: center; gap: .5rem; }
.lb-install-code { background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: .75rem 1rem; font-family: monospace; font-size: .8rem; white-space: pre; overflow-x: auto; color: var(--text); }
.lb-install-actions { display: flex; align-items: center; gap: .75rem; margin-top: .6rem; }
.lb-btn-copy { background: var(--primary); color: #fff; border: none; border-radius: 6px; padding: .3rem .9rem; font-size: .83rem; font-weight: 600; cursor: pointer; font-family: inherit; }
.lb-copied-badge { font-size: .77rem; color: var(--success); display: none; }
.lb-bot-bar { display: flex; align-items: center; gap: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem 1rem; margin-bottom: 1.25rem; font-size: .83rem; color: var(--text-muted); }
.lb-bot-icon { font-size: 1.1rem; }
.lb-dot-orange { background: #f78b1e; }
.lb-dot-blue   { background: #3b82f6; }
.lb-dot-green  { background: #22c55e; }

/* ══════════════════════════════════════════════════════════════
   LEAD DETAIL PAGE
   ══════════════════════════════════════════════════════════════ */
.lead-back-row { display: flex; align-items: center; gap: .75rem; margin-bottom: .25rem; }
.lead-back-link { color: var(--text-dim); text-decoration: none; font-size: 1.2rem; }
.lead-name { margin: 0; font-size: 1.55rem; font-weight: 700; }
.lead-email-sub { color: var(--text-dim); font-size: .875rem; }
.lead-temp-card { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; }
.lead-temp-left { display: flex; align-items: center; gap: .6rem; }
.lead-temp-right { display: flex; align-items: center; gap: .75rem; }
.lead-score-text { font-weight: 700; font-size: 1.1rem; }
.lead-score-unit { font-weight: 400; font-size: .83rem; color: var(--text-dim); }
.temp-badge { display: inline-flex; align-items: center; gap: .35rem; border-radius: 1rem; padding: .15rem .75rem; font-size: .84rem; font-weight: 600; }
.temp-dot { width: .5rem; height: .5rem; border-radius: 50%; display: inline-block; }
.score-scale { display: flex; gap: 1.5rem; margin-top: .9rem; flex-wrap: wrap; }
.score-scale-item { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--text-dim); }

/* ── Gauge temperatura a livelli ── */
.temp-gauge-wrap { display: flex; gap: .5rem; margin-top: .9rem; align-items: flex-end; }
.temp-gauge-item { display: flex; flex-direction: column; align-items: center; gap: .35rem; flex: 1; cursor: default; }
.temp-gauge-bar { width: 100%; height: 6px; border-radius: 3px; transition: opacity .15s; }
.temp-gauge-current .temp-gauge-bar { height: 10px; }
.temp-gauge-label { font-size: .72rem; font-weight: 500; display: flex; align-items: center; gap: .3rem; white-space: nowrap; }
.temp-gauge-current .temp-gauge-label { font-weight: 700; }

/* ── Badge disiscritto nella lista lead ── */
.unsub-badge { display: inline-flex; align-items: center; gap: .3rem; background: rgba(100,116,139,.1); border: 1px solid #94a3b8; color: #64748b; border-radius: 1rem; padding: .1rem .55rem; font-size: .72rem; font-weight: 600; white-space: nowrap; }
.unsub-row { opacity: .7; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1.5rem; }
.field-label { font-size: .73rem; color: var(--text-dim); margin-bottom: .22rem; }
.readonly-field { background: var(--surface2); cursor: default; }
.card-title-sm { font-size: .97rem; font-weight: 600; margin: 0 0 1rem 0; }
.card-title-sm-mb { font-size: .97rem; font-weight: 600; margin: 0 0 .75rem 0; }
.empty-text { color: var(--text-dim); font-size: .85rem; margin: 0; }
.utm-line { margin-top: .75rem; font-size: .8rem; color: var(--text-dim); }
.received-line { margin-top: .5rem; font-size: .78rem; color: var(--text-dim); }
.enrollment-card { display: flex; align-items: flex-start; justify-content: space-between; padding: .48rem .72rem; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.enrollment-name { font-weight: 600; font-size: .875rem; }
.enrollment-detail { font-size: .77rem; color: var(--text-dim); }
.enrollment-status { font-size: .77rem; font-weight: 600; border-radius: 1rem; padding: .1rem .6rem; }
.email-row-wrap { display: flex; align-items: stretch; gap: .45rem; }
.email-row-link { flex: 1; min-width: 0; }
.email-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .58rem .82rem; border: 1px solid var(--border); border-radius: var(--radius-sm); text-decoration: none; color: var(--text); transition: background .15s, border-color .15s; }
.email-row:hover { background: var(--surface2); border-color: var(--primary); text-decoration: none; color: var(--text); }
.btn-resend-email { display: flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; flex-shrink: 0; align-self: center; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-dim); cursor: pointer; font-size: .85rem; transition: background .15s, color .15s, border-color .15s; }
.btn-resend-email:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-resend-email:disabled { opacity: .55; cursor: not-allowed; }
.btn-resend-email.btn-resend-ok { background: #38a169; border-color: #38a169; color: #fff; }
.email-row-body { display: flex; align-items: center; gap: .6rem; min-width: 0; flex: 1; }
.email-row-right { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.email-success { color: #38a169; flex-shrink: 0; }
.email-fail { color: #e53e3e; flex-shrink: 0; }
.email-subject { font-weight: 600; font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.email-from { font-size: .73rem; color: var(--text-dim); }
.email-error-msg { color: #e53e3e; margin-left: .5rem; }
.email-date { font-size: .73rem; color: var(--text-dim); white-space: nowrap; }
.email-open-link { font-size: .7rem; font-weight: 600; color: var(--primary); background: var(--primary-dim); padding: .18rem .52rem; border-radius: 1rem; white-space: nowrap; }
.timeline-item { display: flex; gap: .85rem; padding: .52rem 0; border-bottom: 1px solid var(--border); }
.timeline-icon { flex-shrink: 0; font-size: 1rem; width: 1.4rem; text-align: center; }
.timeline-body { flex: 1; min-width: 0; }
.timeline-desc { font-size: .86rem; font-weight: 500; }
.timeline-url { font-size: .73rem; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timeline-date { font-size: .73rem; color: var(--text-dim); }
.timeline-delta { flex-shrink: 0; font-size: .79rem; font-weight: 700; }
.pageview-row { display: flex; gap: .85rem; padding: .43rem 0; border-bottom: 1px solid var(--border); align-items: center; }
.pageview-url { font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pageview-date { font-size: .72rem; color: var(--text-dim); }
.session-link { font-size: .77rem; font-weight: 400; margin-left: .5rem; color: var(--primary); }
.message-block { margin-top: 1rem; }
.contact-header-actions { display: flex; gap: .5rem; align-items: center; flex-shrink: 0; flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════════
   VISITOR DETAIL PAGE
   ══════════════════════════════════════════════════════════════ */
.visitor-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.visitor-card-pad { padding: 1rem 1.25rem; }
.visitor-section-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); margin-bottom: .6rem; }
.visitor-ua { font-size: .8rem; color: var(--text-dim); word-break: break-all; }
.visitor-meta { font-size: .8rem; color: var(--text-dim); }
.visitor-meta-md { font-size: .875rem; margin-bottom: .35rem; }
.visitor-meta-sm { font-size: .8rem; margin-bottom: .25rem; }
.visitor-lead-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: .5rem .75rem; font-size: .84rem; }
.visitor-lead-msg { margin-top: .75rem; font-size: .84rem; border-top: 1px solid var(--border); padding-top: .75rem; color: var(--text-dim); }
.visitor-header-sub { font-family: monospace; font-size: .73rem; color: var(--text-dim); margin-top: .1rem; }
.visitor-anon { color: var(--text-dim); }
.visitor-email-label { color: var(--text-dim); font-size: .73rem; font-weight: 400; margin-left: .5rem; }
.visitor-table-title { font-weight: 500; font-size: .84rem; }
.visitor-table-url { font-size: .73rem; color: var(--text-dim); word-break: break-all; }
.visitor-table-cell-sm { font-size: .79rem; }
.visitor-table-cell-date { white-space: nowrap; font-size: .77rem; color: var(--text-dim); }
.visitor-table-max-w { max-width: 380px; }

/* ══════════════════════════════════════════════════════════════
   EVENTS DETAIL PAGE
   ══════════════════════════════════════════════════════════════ */
.evt-detail-grid { display: grid; grid-template-columns: 1fr 300px; gap: 1rem; align-items: start; }
.evt-header-badge { font-size: .84rem; vertical-align: middle; }
.evt-header-email { font-size: .97rem; font-weight: 500; margin-left: .5rem; }
.evt-header-actions { display: flex; gap: .5rem; }
.evt-timestamp-hint { font-size: .73rem; color: var(--text-dim); margin-left: .4rem; }
.evt-cv-code { color: var(--primary); font-size: .8rem; }
.evt-id-value { font-size: .77rem; word-break: break-all; }
@media (max-width: 680px) { .evt-detail-grid { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════
   A/B TEST
   ══════════════════════════════════════════════════════════════ */
.ab-split-info { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.ab-split-label { color: var(--text-dim); font-size: .79rem; }
.ab-variant-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; }
.ab-variant-winner { border: 2px solid var(--success); }
.ab-variant-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.ab-variant-header h3 { margin: 0; }
.ab-template-name { font-size: .84rem; color: var(--text-dim); margin-bottom: 1rem; }
.ab-stats-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: .75rem; text-align: center; }
.ab-stat-big { font-size: 1.55rem; font-weight: 700; }
.ab-stat-label { font-size: .73rem; color: var(--text-dim); }

/* ══════════════════════════════════════════════════════════════
   CAMPAIGN DETAIL
   ══════════════════════════════════════════════════════════════ */
.campaign-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.campaign-kpi { text-align: center; padding: 1.2rem; }
.campaign-kpi-value { font-size: 1.9rem; font-weight: 700; }
.campaign-kpi-label { font-size: .79rem; color: var(--text-dim); }
.campaign-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.campaign-banner { margin-bottom: 1rem; }
.campaign-banner-inner { display: flex; align-items: center; justify-content: space-between; }
.campaign-schedule-hint { font-size: .79rem; color: var(--text-dim); margin-left: .5rem; }
.campaign-wf-list { padding-left: 1.25rem; margin: 0; }
.campaign-wf-item { padding: .5rem 0; border-bottom: 1px solid var(--border); }
.campaign-banner-scheduled { background: var(--info-dim); border-color: var(--info); }
.campaign-banner-running   { background: var(--success-dim); border-color: var(--success); }
.campaign-wf-name  { font-weight: 500; }
.campaign-wf-delay { font-size: .77rem; color: var(--text-dim); }
.campaign-enroll-table { font-size: .8rem; }
.campaign-enroll-email { font-size: .73rem; color: var(--text-dim); }

/* ══════════════════════════════════════════════════════════════
   SEGMENTS / USER EDIT / MISC
   ══════════════════════════════════════════════════════════════ */
.segment-filter-box { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.2rem; margin-bottom: 1.25rem; }
.segment-filter-title { margin-bottom: 1rem; color: var(--text-dim); font-size: .84rem; text-transform: uppercase; letter-spacing: .05em; }
.temp-checkbox-label { display: flex; align-items: center; gap: .4rem; cursor: pointer; padding: .38rem .75rem; border-radius: var(--radius-sm); border: 1px solid var(--border); font-size: .84rem; }

.notif-toggle-row { display: flex; align-items: center; gap: .75rem; padding: .8rem 1rem; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 1.25rem; }
.notif-toggle-title { font-size: .855rem; font-weight: 600; color: var(--text); }
.notif-toggle-hint { font-size: .77rem; color: var(--text-dim); }
.input-disabled { opacity: .55; cursor: not-allowed; }

.import-result-card { margin-bottom: 1.5rem; border-color: var(--success); }
.import-stats-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; text-align: center; margin-bottom: 1rem; }
.import-stat-value { font-size: 1.9rem; font-weight: 700; }
.import-format-box { background: var(--surface2); margin-bottom: 1.25rem; padding: .9rem; border-radius: var(--radius); }
.import-format-title { font-size: .8rem; font-weight: 600; margin-bottom: .5rem; }
.import-format-code { font-size: .77rem; color: var(--text-dim); display: block; white-space: pre; }

.info-banner { font-size: .855rem; color: var(--text-muted); margin-bottom: 1.25rem; padding: .7rem 1rem; background: var(--info-dim); border: 1px solid rgba(2,132,199,.2); border-radius: var(--radius); }
.info-box { margin-bottom: 1.5rem; padding: 1rem; background: var(--surface2); border-radius: var(--radius-sm); border-left: 4px solid var(--primary); }
.info-box-title { font-weight: 600; margin-bottom: .5rem; }
.info-box-text { margin: 0; font-size: .84rem; color: var(--text-dim); line-height: 1.5; }

.utm-section { border-top: 1px solid var(--border); padding-top: 1rem; margin-bottom: 1.1rem; }
.section-heading-xs { font-size: .79rem; font-weight: 600; color: var(--text-dim); margin-bottom: .75rem; text-transform: uppercase; letter-spacing: .05em; }

.code-cell { background: var(--surface2); padding: .18rem .48rem; border-radius: var(--radius-sm); font-size: .84rem; }
.th-checkbox { width: 2rem; }
.td-center { text-align: center; }
.td-nowrap { white-space: nowrap; font-size: .79rem; color: var(--text-dim); }

/* ══════════════════════════════════════════════════════════════
   SEQUENCES / CAMPAIGNS / EMAIL TEMPLATES
   ══════════════════════════════════════════════════════════════ */
.seq-active-toggle { display: flex; align-items: center; gap: .75rem; padding: .72rem 1rem; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 1.25rem; }
.seq-active-toggle input { width: 1.1rem; height: 1.1rem; accent-color: var(--primary); }
.seq-active-label { font-size: .855rem; font-weight: 600; }
.seq-step-section { border-top: 1px solid var(--border); padding-top: 1rem; margin-bottom: 1rem; }
.seq-step-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.seq-step-title { font-size: .79rem; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; }
.step-row { display: grid; grid-template-columns: 90px 1fr auto; gap: .5rem; align-items: start; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: .72rem; margin-bottom: .5rem; }
.step-label { font-size: .7rem; color: var(--text-dim); }
.step-input-sm { font-size: .79rem; padding: .28rem .48rem; }
.step-col-body { display: flex; flex-direction: column; gap: .4rem; }
.step-remove-btn { padding: .23rem .48rem; font-size: .77rem; align-self: flex-start; margin-top: 1.1rem; }
.yaml-import-title { font-size: .84rem; font-weight: 700; margin-bottom: .75rem; }
.yaml-textarea { font-family: monospace; font-size: .75rem; resize: vertical; }
.step-legend { margin-top: 1rem; font-size: .77rem; }
.step-legend-title { font-weight: 700; margin-bottom: .6rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; font-size: .7rem; }
.step-legend-list { display: flex; flex-direction: column; gap: .4rem; }
.seq-edit-grid { display: grid; grid-template-columns: 1fr 380px; gap: 1.5rem; align-items: start; }
@media (max-width: 768px) { .seq-edit-grid { grid-template-columns: 1fr; } }

.workflow-row { display: flex; gap: .6rem; align-items: center; padding: .58rem .75rem; background: var(--surface2); border-radius: var(--radius-sm); border: 1px solid var(--border); }
.wf-order { color: var(--text-dim); font-weight: 600; min-width: 1.2rem; }
.wf-select { flex: 3; margin: 0; }
.wf-delay-group { display: flex; align-items: center; gap: .3rem; flex: 0 0 auto; }
.wf-delay-label { font-size: .79rem; white-space: nowrap; color: var(--text-dim); }
.wf-delay-input { width: 80px; margin: 0; }

.detected-vars-box { margin-bottom: 1rem; padding: .72rem; background: var(--surface2); border-radius: var(--radius-sm); border: 1px solid var(--border); }
.detected-vars-title { font-size: .79rem; font-weight: 600; color: var(--text-dim); margin-bottom: .5rem; }
.detected-vars-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.preview-panel { margin-bottom: 1.25rem; }
.preview-title { font-size: .79rem; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .5rem; }
.preview-frame { border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; background: #fff; overflow: auto; max-height: 500px; }
.html-editor { font-family: monospace; font-size: .8rem; resize: vertical; min-height: 300px; }
.yaml-editor-textarea { width: 100%; min-height: 380px; font-family: 'Cascadia Code','Fira Code','JetBrains Mono','Consolas',monospace; font-size: .84rem; line-height: 1.55; padding: 1rem 1.25rem; border: none; border-radius: 0 0 .5rem .5rem; background: #1e1e2e; color: #cdd6f4; resize: vertical; tab-size: 2; white-space: pre; overflow-wrap: normal; overflow-x: auto; }

/* ══════════════════════════════════════════════════════════════
   BANNERS / BULK / MODALS
   ══════════════════════════════════════════════════════════════ */
.new-lead-banner { display: none; background: #38a169; color: #fff; border-radius: var(--radius-sm); padding: .6rem 1rem; margin-bottom: .75rem; align-items: center; justify-content: space-between; gap: .75rem; }
.new-lead-banner-btn { background: #fff; color: #38a169; border: none; border-radius: var(--radius-sm); padding: .23rem .72rem; cursor: pointer; font-weight: 600; font-size: .84rem; font-family: inherit; }
.bulk-action-bar { display: none; align-items: center; gap: .75rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .48rem 1rem; margin-bottom: .75rem; box-shadow: var(--shadow-card); flex-wrap: wrap; }
.bulk-count { font-weight: 600; font-size: .875rem; color: var(--primary); margin-right: auto; }

.enroll-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 9999; align-items: center; justify-content: center; }
.enroll-modal-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; min-width: 360px; box-shadow: var(--shadow-md); }
.enroll-modal-title { margin: 0 0 1rem; font-size: 1.02rem; font-weight: 700; color: var(--text); }
.enroll-modal-label { display: block; font-size: .79rem; font-weight: 600; color: var(--text-muted); margin-bottom: .4rem; }
.enroll-modal-input { width: 100%; padding: .55rem .82rem; border: 1px solid var(--border-input); border-radius: var(--radius); font-size: .855rem; margin-bottom: 1rem; box-sizing: border-box; background: var(--surface); color: var(--text); font-family: inherit; }
.enroll-modal-input:focus { outline: none; border-color: var(--primary); box-shadow: var(--shadow-focus); }
.enroll-modal-actions { display: flex; gap: .75rem; justify-content: flex-end; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

/* ── Tablet (≤900px) ─────────────────────────────────────────── */
@media (max-width: 900px) {
    .dash-row-3 { grid-template-columns: 1fr; }
    .dash-row-2 { grid-template-columns: 1fr; }
    .dash-kpi-strip { grid-template-columns: repeat(2,1fr); }
    .lb-kpi-grid { grid-template-columns: repeat(2,1fr); }
    .lb-charts-row { grid-template-columns: 1fr; }
    .lb-bottom-row { grid-template-columns: 1fr; }
    .ab-variant-grid { grid-template-columns: 1fr; }
    .ab-stats-grid { grid-template-columns: repeat(3,1fr); }
    .campaign-detail-grid { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; }
    .auto-stats-strip { grid-template-columns: repeat(3,1fr); }
    .seq-edit-grid { grid-template-columns: 1fr; }
    .evt-detail-grid { grid-template-columns: 1fr; }
    .import-stats-grid { grid-template-columns: repeat(2,1fr); }
}

/* ── Mobile (≤600px) ─────────────────────────────────────────── */
@media (max-width: 600px) {
    /* Layout */
    .rr-main { padding: .75rem; overflow-x: hidden; }

    /* Grids → single column */
    .auto-stats-strip { grid-template-columns: repeat(2,1fr); }
    .lb-kpi-grid { grid-template-columns: repeat(2,1fr); }
    .dash-kpi-strip { grid-template-columns: repeat(2,1fr); }
    .ab-stats-grid { grid-template-columns: 1fr; }
    .import-stats-grid { grid-template-columns: 1fr; }
    .step-row { grid-template-columns: 1fr auto; }

    /* Tables: allow horizontal scroll inside card */
    .glass-card { overflow-x: auto; }

    /* lb-header: stack vertically on tiny screens */
    .lb-header { flex-direction: column; align-items: flex-start; gap: .65rem; }
    .lb-title { font-size: 1.15rem; }

    /* Forms */
    .form-row { flex-direction: column; }

    /* Dashboard lead table: hide less critical columns */
    .dash-td-email { max-width: 140px; }

    /* Automazioni: hide stat columns on mobile, show only name+actions */
    .auto-list-head { display: none; }

    /* Actions strip in cards */
    .dash-actions { flex-wrap: wrap; }
    .auto-row-actions { flex-wrap: wrap; }

    /* Buttons: don't let them overflow */
    .btn-primary, .btn-secondary { white-space: nowrap; }
}

/* ── Small mobile (≤400px) ───────────────────────────────────── */
@media (max-width: 400px) {
    .rr-main { padding: .5rem; }
    .dash-kpi-strip { grid-template-columns: 1fr 1fr; }
    .lb-kpi-grid { grid-template-columns: 1fr 1fr; }
    .glass-card { padding: .85rem; }
    .lb-title { font-size: 1rem; }
}

/* ══════════════════════════════════════════════════════════════
   UTILITY CLASSES
   ══════════════════════════════════════════════════════════════ */
.mb-0  { margin-bottom: 0; }
.mb-sm { margin-bottom: .5rem; }
.mb-md { margin-bottom: 1rem; }
.mb-lg { margin-bottom: 1.25rem; }
.mb-xl { margin-bottom: 1.5rem; }
.mt-xs { margin-top: .35rem; }
.mt-sm { margin-top: .5rem; }
.mt-md { margin-top: 1rem; }
.mt-lg { margin-top: 1.25rem; }
.ml-sm { margin-left: .5rem; }
.ml-auto { margin-left: auto; }
.pt-md { padding-top: 1rem; }
.p-2xl { padding: 2rem; }
.pl-md { padding-left: 1.25rem; }
.pl-lg { padding-left: 1.5rem; }
.pb-xs { padding-bottom: .4rem; }
.py-sm { padding: .6rem 0; }
.d-flex         { display: flex; }
.d-flex-center  { display: flex; align-items: center; }
.d-flex-between { display: flex; align-items: center; justify-content: space-between; }
.d-flex-col     { display: flex; flex-direction: column; }
.d-inline       { display: inline; }
.d-inline-flex  { display: inline-flex; }
.d-none         { display: none; }
.flex-wrap      { flex-wrap: wrap; }
.flex-1         { flex: 1; min-width: 0; }
.flex-2         { flex: 2; }
.flex-shrink-0  { flex-shrink: 0; }
.min-w-0        { min-width: 0; }
.gap-xs         { gap: .35rem; }
.gap-sm         { gap: .5rem; }
.gap-md         { gap: .75rem; }
.gap-lg         { gap: 1rem; }
.gap-xl         { gap: 1.5rem; }
.items-start    { align-items: flex-start; }
.items-end      { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-end    { justify-content: flex-end; }
.self-start     { align-self: flex-start; }
.form-contents  { display: contents; }
.form-inline    { display: inline; }
.text-xxs      { font-size: .67rem; }
.text-xs       { font-size: .75rem; }
.text-sm       { font-size: .8rem; }
.text-base     { font-size: .84rem; }
.text-md       { font-size: .875rem; }
.text-lg       { font-size: 1rem; }
.text-xl       { font-size: 1.15rem; }
.text-2xl      { font-size: 1.6rem; }
.text-3xl      { font-size: 2rem; }
.text-center   { text-align: center; }
.text-right    { text-align: right; }
.font-mono     { font-family: monospace; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.font-normal   { font-weight: 400; }
.fw-500        { font-weight: 500; }
.fw-600        { font-weight: 600; }
.text-primary  { color: var(--primary); }
.text-error    { color: var(--error); }
.text-muted    { color: var(--text-muted); }
.text-success  { color: var(--success); }
.text-warning  { color: var(--warning); }
.text-dim      { color: var(--text-dim); }
.nowrap        { white-space: nowrap; }
.ellipsis      { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.break-all     { word-break: break-all; }
.plain-link    { text-decoration: none; color: inherit; }
.temp-dot-link { display: inline-block; width: .65rem; height: .65rem; border-radius: 50%; }
.h1-sub        { color: var(--text-dim); font-size: .875rem; font-weight: 400; margin-left: .5rem; }
.verify-subtitle { text-align: center; font-size: .875rem; color: var(--text-muted); margin-bottom: 1.5rem; }
.card-narrow  { max-width: 600px; }
.card-sm      { max-width: 560px; }
.card-wide    { max-width: 700px; }
.modal-sm     { max-width: 500px; width: 100%; }
.min-h-md     { min-height: 3rem; }
.th-actions   { width: 100px; }
.filter-input { min-width: 220px; }
.validation-error { color: var(--error); font-size: .79rem; }
.hint-text    { font-size: .73rem; color: var(--text-dim); margin-top: .25rem; }
.section-heading { font-size: .7rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .85rem; font-weight: 600; }
.form-row-mb  { margin-bottom: 1.1rem; }
.form-group-mb { margin-bottom: 1rem; }
.empty-state  { text-align: center; padding: 3rem 1rem; color: var(--text-dim); }
.empty-state-icon { font-size: 2.5rem; margin-bottom: .75rem; }
.checkbox-accent { accent-color: var(--primary); width: 1rem; height: 1rem; cursor: pointer; }
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.label-checkbox { display: flex; align-items: center; gap: .5rem; cursor: pointer; margin-bottom: 0; }
.opacity-25   { opacity: .25; }
.textarea-resizable { resize: vertical; }
.input-range  { padding: .3rem 0; }
.icon-xl      { font-size: 4rem; }
.ep-iframe-full { width: 100%; height: 80vh; border: none; }
.btn-icon     { margin-right: .35rem; vertical-align: middle; }

/* ══════════════════════════════════════════════════════════════
   VERSION BAR
   ══════════════════════════════════════════════════════════════ */
.app-version-bar { display: flex; align-items: center; justify-content: flex-end; gap: .4rem; padding: .4rem 1.5rem .4rem 0; font-size: .68rem; color: var(--text-dim); border-top: 1px solid var(--border); position: sticky; bottom: -1.5rem; margin: 0 -1.5rem -1.5rem; z-index: 10; flex-shrink: 0; background: var(--bg); }
.app-version-tag { font-weight: 600; color: var(--primary); }
.app-version-sep { color: var(--border); margin: 0 .1rem; }
.app-version-note { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dim); font-style: italic; }
.app-version-btn { background: none; border: none; padding: 0; cursor: pointer; color: var(--text-dim); font-size: .68rem; font-family: inherit; transition: color .15s; }
.app-version-btn:hover { color: var(--primary); text-decoration: none; }

/* ══════════════════════════════════════════════════════════════
   RELEASE NOTES
   ══════════════════════════════════════════════════════════════ */
.release-header { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; padding-bottom: .875rem; border-bottom: 1px solid var(--border); }
.release-ver  { font-size: 1.1rem; font-weight: 700; color: var(--primary); }
.release-date { font-size: .79rem; color: var(--text-dim); }
.release-notes-list { list-style: none; margin: 0; padding: 0; }
.release-notes-list li { font-size: .855rem; color: var(--text-muted); padding: .5rem 0 .5rem 1.25rem; position: relative; border-bottom: 1px solid var(--border); }
.release-notes-list li:last-child { border-bottom: none; }
.release-notes-list li::before { content: '▸'; position: absolute; left: 0; color: var(--primary); font-size: .73rem; top: .6rem; }

body.release-update-open { overflow: hidden; }
.release-update-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.release-update-modal[hidden] { display: none; }
.release-update-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.36); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.release-update-dialog { position: relative; width: min(680px,100%); max-height: min(80vh,760px); overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); padding: 2rem 2rem 1.5rem; }
.release-update-kicker { display: inline-flex; align-items: center; gap: .35rem; padding: .33rem .68rem; border-radius: 999px; background: var(--primary-dim); color: var(--primary); font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.release-update-title { margin: 1rem 0 .5rem; font-size: clamp(1.5rem,3vw,2.1rem); line-height: 1.05; color: var(--text); }
.release-update-subtitle { margin: 0; color: var(--text-muted); font-size: .95rem; line-height: 1.6; }
.release-update-meta { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: 1.2rem; }
.release-update-pill { display: inline-flex; align-items: center; padding: .43rem .78rem; border-radius: 999px; background: var(--text); color: var(--bg); font-size: .84rem; font-weight: 700; }
.release-update-date { color: var(--text-dim); font-size: .84rem; font-weight: 600; }
.release-update-list { list-style: none; margin: 1.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.release-update-list li { position: relative; padding: .9rem 1rem .9rem 3rem; border-radius: var(--radius-lg); background: var(--primary-dim); border: 1px solid var(--primary-border); color: var(--text); line-height: 1.55; }
.release-update-list li::before { content: ''; position: absolute; left: 1rem; top: 1.05rem; width: 1.1rem; height: 1.1rem; border-radius: 999px; background: radial-gradient(circle at 30% 30%, #ffd18d 0, var(--primary) 72%); box-shadow: 0 0 0 5px rgba(247,139,30,.12); }

/* ══════════════════════════════════════════════════════════════
   API DOWN BANNER — degradazione graziosa (API irraggiungibile)
   ══════════════════════════════════════════════════════════════ */
.api-down-banner {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1rem;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
    border-radius: var(--radius, .75rem);
    font-size: .84rem;
    font-weight: 500;
    margin-bottom: 1rem;
}
[data-theme="dark"] .api-down-banner {
    background: #451a03;
    color: #fed7aa;
    border-color: #92400e;
}

/* ══════════════════════════════════════════════════════════════
   DESIGN / PROGETTAZIONE DIAGRAMS (D3.js)
   ══════════════════════════════════════════════════════════════ */
.diag-tabs { display: flex; gap: .25rem; padding: .4rem; border-radius: var(--radius, .75rem); flex-wrap: wrap; }
.diag-tab { padding: .45rem 1.1rem; border: none; background: transparent; border-radius: calc(var(--radius, .75rem) - .25rem); font-size: .84rem; font-weight: 500; cursor: pointer; color: var(--text-dim, #6b7280); transition: background .15s, color .15s; }
.diag-tab:hover { background: var(--surface-hover, rgba(0,0,0,.035)); color: var(--text); }
.diag-tab.active { background: var(--primary, #f97316); color: #fff; }

.diag-toolbar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .5rem .75rem; border-bottom: 1px solid var(--border); }
.diag-toolbar-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .32rem .72rem; border: 1px solid var(--border-input, #cbd5e1); background: var(--surface, #fff); border-radius: var(--radius-sm, .5rem); font-size: .79rem; font-weight: 500; cursor: pointer; color: var(--text-muted); transition: border-color .15s, color .15s; }
.diag-toolbar-btn:hover { border-color: var(--primary); color: var(--primary); }
.diag-toolbar-btn.active { border-color: var(--primary); background: var(--primary-dim); color: var(--primary); }
.diag-toolbar-sep { width: 1px; height: 1.25rem; background: var(--border); margin: 0 .15rem; }

.diag-wrapper { position: relative; width: 100%; height: 660px; background: var(--bg, #f1f5f9); border-radius: 0 0 var(--radius, .75rem) var(--radius, .75rem); overflow: hidden; }
.diag-wrapper:fullscreen, .diag-wrapper:-webkit-full-screen { height: 100vh; border-radius: 0; }

.diag-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; color: var(--text-dim); font-size: .9rem; background: var(--bg, #f1f5f9); z-index: 5; }
.diag-loading .spin { width: 2rem; height: 2rem; border: 3px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: diagSpin .7s linear infinite; }
@keyframes diagSpin { to { transform: rotate(360deg); } }
.diag-error { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; color: var(--error, #dc2626); font-size: .85rem; padding: 2rem; text-align: center; background: var(--bg, #f1f5f9); z-index: 5; }
.diag-copy-err-btn { margin-top: .5rem; padding: .3rem .75rem; font-size: .78rem; border: 1px solid var(--error, #dc2626); border-radius: 6px; background: transparent; color: var(--error, #dc2626); cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; }
.diag-copy-err-btn:hover { background: rgba(220,38,38,.08); }

.diag-legend { display: flex; flex-wrap: wrap; gap: .5rem 1rem; padding: .5rem .75rem; border-top: 1px solid var(--border); }
.diag-legend-item { display: flex; align-items: center; gap: .35rem; font-size: .73rem; color: var(--text-muted); }
.diag-legend-dot { width: .7rem; height: .7rem; border-radius: 50%; flex-shrink: 0; }
.release-update-actions { display: flex; justify-content: flex-end; margin-top: 1.5rem; }
.perm-add-row { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; padding:.75rem; background:var(--bg-card-hover); border-radius:var(--radius-sm); border:1px solid var(--border); margin-bottom:1rem; }
.perm-check-lbl { display:flex; align-items:center; gap:.35rem; font-size:.85rem; font-weight:500; cursor:pointer; white-space:nowrap; }
/* LeadBooster dashboard shell alignment - Razor production */
:root {
    --lb-bg: #f7f9fd;
    --lb-surface: #ffffff;
    --lb-border: #e6ebf3;
    --lb-text: #17213a;
    --lb-muted: #76819a;
    --lb-orange: #ff6b00;
    --lb-radius: 14px;
}

html[data-theme="dark"] {
    --lb-bg: #090f25;
    --lb-surface: #111a36;
    --lb-border: #24304f;
    --lb-text: #f8f9ff;
    --lb-muted: #9ca7c0;
}

.rr-layout { background: var(--lb-bg); }
.rr-appbar {
    height: 78px;
    padding: 0 32px 0 272px;
    background: color-mix(in srgb, var(--lb-surface) 76%, transparent);
    border-bottom: 1px solid var(--lb-border);
    box-shadow: 0 1px 0 rgba(255,255,255,.08);
}
html[data-theme="dark"] .rr-appbar {
    background: linear-gradient(90deg, rgba(8,14,34,.95), rgba(14,19,52,.92));
}
.rr-appbar .rr-brand { display: none; }
.rr-appbar-left { position: absolute; left: 260px; }
.hamburger { display: none; }
.rr-global-search {
    width: min(452px, 42vw);
    height: 42px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    border: 1px solid var(--lb-border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--lb-surface) 84%, transparent);
    color: var(--lb-muted);
    box-shadow: 0 13px 32px rgba(20,31,58,.06);
}
.rr-global-search input {
    border: 0;
    outline: 0;
    flex: 1;
    min-width: 0;
    background: transparent;
    color: var(--lb-text);
    font: inherit;
    font-size: 14px;
}
.rr-global-search kbd {
    min-width: 36px;
    height: 24px;
    display: grid;
    place-items: center;
    border: 1px solid var(--lb-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--lb-border) 45%, transparent);
    color: var(--lb-muted);
    font-size: 12px;
    font-family: inherit;
}
.rr-appbar-right { gap: 16px; }
.theme-toggle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: var(--lb-muted);
}
.rr-bell { position: relative; text-decoration: none; }
.rr-bell span {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: #ff3154;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}
.user-btn {
    border: 0;
    background: transparent;
    color: var(--lb-text);
    gap: 10px;
    padding: 0;
}
.user-avatar {
    width: 42px;
    height: 42px;
    border-color: var(--lb-border);
}
.rr-sidebar {
    width: 240px;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 110;
    background: color-mix(in srgb, var(--lb-surface) 88%, transparent);
    border-right: 1px solid var(--lb-border);
}
html[data-theme="dark"] .rr-sidebar {
    background: #070d21;
}
.rr-sidebar-brand {
    min-height: 92px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px 18px 28px;
    color: var(--lb-text);
    text-decoration: none;
    font-size: 18px;
    font-weight: 850;
    letter-spacing: 0;
}
.rr-sidebar-brand .brand-flame { width: 27px; height: 27px; }
.rr-sidebar-brand .brand-text span { color: var(--lb-orange); }
.rr-sidebar-brand:hover { color: var(--lb-text); text-decoration: none; }
.sidebar-nav { padding: 6px 22px 16px; gap: 6px; }
.sidebar-nav .nav-link {
    height: 38px;
    padding: 0 12px;
    border-radius: 8px;
    color: #53617f;
    font-size: 14px;
    font-weight: 650;
}
html[data-theme="dark"] .sidebar-nav .nav-link { color: #9ca7c0; }
.sidebar-nav .nav-link.active {
    color: var(--lb-orange);
    background: color-mix(in srgb, var(--lb-orange) 12%, var(--lb-surface));
    border: 1px solid color-mix(in srgb, var(--lb-orange) 20%, transparent);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
html[data-theme="dark"] .sidebar-nav .nav-link.active {
    background: linear-gradient(90deg, rgba(255,122,26,.20), rgba(255,122,26,.08));
}
.nav-group-label {
    padding: 18px 8px 6px;
    font-size: 11px;
    letter-spacing: .12em;
}
.rr-main {
    padding: 26px 28px 26px 268px;
    background: radial-gradient(circle at 76% 0%, rgba(114,92,255,.10), transparent 32%), var(--lb-bg);
}
.rr-page {
    width: 100%;
    max-width: 1640px;
    margin: 0 auto;
}

.lb-dashboard { color: var(--lb-text); }
.lb-dashboard-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}
.lb-title-block h1 {
    margin: 0;
    font-size: 34px;
    line-height: 1.02;
    font-weight: 850;
    color: var(--lb-text);
}
.lb-title-block p { margin: 7px 0 0; color: var(--lb-muted); font-size: 15px; }
.lb-title-block a { color: #2688ff; font-weight: 750; }
.lb-toolbar-actions { display: flex; gap: 12px; align-items: center; }
.lb-control {
    height: 47px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    border: 1px solid var(--lb-border);
    border-radius: 9px;
    color: var(--lb-text);
    background: color-mix(in srgb, var(--lb-surface) 84%, transparent);
    box-shadow: 0 12px 32px rgba(20,31,58,.05);
    font: inherit;
    font-size: 15px;
    font-weight: 650;
    cursor: pointer;
}
.lb-control.compact { height: 37px; font-size: 13px; }
.lb-dropdown { position: relative; }
.lb-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 30;
    display: none;
    min-width: 190px;
    padding: 8px;
    border: 1px solid var(--lb-border);
    border-radius: 10px;
    background: var(--lb-surface);
    box-shadow: 0 20px 44px rgba(20,31,58,.16);
}
.lb-dropdown-menu.right { right: 0; left: auto; }
.lb-dropdown:hover .lb-dropdown-menu,
.lb-dropdown:focus-within .lb-dropdown-menu { display: grid; gap: 4px; }
.lb-dropdown-menu a {
    padding: 9px 10px;
    border-radius: 7px;
    color: var(--lb-text);
    font-size: 13px;
    text-decoration: none;
}
.lb-dropdown-menu a:hover {
    background: color-mix(in srgb, var(--lb-orange) 12%, var(--lb-surface));
    color: var(--lb-orange);
}
.lb-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius);
    background: color-mix(in srgb, var(--lb-surface) 88%, transparent);
    box-shadow: 0 18px 42px rgba(20,31,58,.07);
}
html[data-theme="dark"] .lb-card {
    background: linear-gradient(135deg, rgba(20,30,64,.86), rgba(17,25,56,.72));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.lb-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 14px;
}
.lb-kpi-card {
    height: 144px;
    padding: 19px 14px 8px;
    display: grid;
    grid-template-columns: 84px 1fr;
    grid-template-rows: 84px 29px;
    column-gap: 14px;
    color: inherit;
    text-decoration: none;
}
.lb-kpi-card:hover { transform: translateY(-1px); text-decoration: none; }
.lb-kpi-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 22% 35%, var(--kpi-glow), transparent 34%);
    pointer-events: none;
}
.lb-kpi-icon {
    position: relative;
    width: 74px;
    height: 74px;
    margin-left: 1px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--kpi-color);
    background: color-mix(in srgb, var(--kpi-color) 13%, var(--lb-surface));
    border: 8px solid color-mix(in srgb, var(--kpi-color) 14%, transparent);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--kpi-color) 28%, transparent), 0 8px 24px color-mix(in srgb, var(--kpi-color) 20%, transparent);
    font-size: 30px;
}
.lb-kpi-body { position: relative; padding-top: 2px; }
.lb-kpi-body strong { display: block; font-size: 32px; line-height: .98; font-weight: 850; color: var(--lb-text); }
.lb-kpi-body span { display: block; margin-top: 9px; text-transform: uppercase; letter-spacing: .09em; font-size: 12px; font-weight: 850; color: var(--lb-muted); }
.lb-kpi-body small { display: block; margin-top: 10px; color: var(--lb-muted); font-size: 11px; font-weight: 650; }
.lb-kpi-body small b { color: var(--kpi-color); }
.lb-spark { position: relative; grid-column: 1 / -1; align-self: end; width: 100%; height: 29px; overflow: visible; }
.lb-spark polyline { fill: none; stroke: var(--kpi-color); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.lb-mid-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr 1.15fr;
    gap: 18px;
    margin-bottom: 18px;
}
.lb-bottom-grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 18px;
}
.lb-panel { height: 247px; padding: 19px 22px 18px; }
.lb-chart-panel { height: 304px; padding: 19px 22px 18px; }
.lb-section-title {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 17px;
    color: var(--lb-text);
    font-size: 16px;
    font-weight: 800;
}
.lb-section-title i { width: 22px; text-align: center; color: var(--head-color); font-size: 19px; }
.lb-section-title span { color: var(--lb-muted); font-weight: 500; }
.lb-email-grid { display: grid; grid-template-columns: 164px 1fr; gap: 20px; align-items: center; }
.lb-donut { position: relative; width: 148px; height: 148px; }
.lb-donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.lb-donut circle { fill: none; stroke: var(--lb-border); stroke-width: 14; }
.lb-donut .lb-click { stroke: #ff9a2a; stroke-dasharray: calc(var(--click) * 4.21) 421; }
.lb-donut .lb-open { stroke: #48e05d; stroke-dasharray: calc(var(--open) * 4.21) 421; stroke-dashoffset: calc(var(--click) * -4.21 - 5); }
.lb-donut div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.lb-donut strong { font-size: 30px; font-weight: 850; color: var(--lb-text); }
.lb-donut span { margin-top: 6px; color: var(--lb-muted); font-size: 13px; }
.lb-stat-line { min-height: 39px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--lb-border); color: var(--lb-muted); font-size: 14px; }
.lb-stat-line strong { color: var(--lb-text); }
.lb-green { color: #27d84f !important; font-weight: 800; }
.lb-orange { color: #ff7a1a !important; font-weight: 800; }
.lb-panel-button {
    height: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--lb-border);
    border-radius: 7px;
    background: transparent;
    color: var(--lb-muted);
    font-weight: 750;
    padding: 0 16px;
    text-decoration: none;
    font-size: 13px;
}
.lb-panel-button.full { width: 100%; margin-top: 13px; }
.lb-auto-list { display: grid; gap: 8px; }
.lb-auto-list div {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--lb-border) 24%, transparent);
    color: var(--lb-muted);
    font-size: 14px;
}
.lb-auto-list b { min-width: 26px; height: 24px; display: grid; place-items: center; border-radius: 8px; color: var(--lb-text); background: rgba(148,163,184,.15); }
.lb-auto-list b.green { color: #27d84f; background: rgba(39,216,79,.14); }
.lb-auto-list b.blue { color: #2f8fff; background: rgba(47,143,255,.14); }
.lb-panel-actions { display: flex; gap: 8px; margin-top: 14px; }
.lb-temp-list { display: grid; gap: 15px; }
.lb-temp-row { display: grid; grid-template-columns: 76px 1fr 24px; align-items: center; gap: 14px; color: var(--lb-text); font-size: 14px; text-decoration: none; }
.lb-temp-row i { height: 5px; border-radius: 10px; background: color-mix(in srgb, var(--lb-border) 68%, transparent); overflow: hidden; }
.lb-temp-row b { display: block; height: 100%; border-radius: inherit; }
.lb-temp-row em { color: var(--lb-text); font-style: normal; }
.lb-chart-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 11px; }
.lb-chart-head .lb-section-title { margin-bottom: 0; }
.lb-chart { height: 214px; display: grid; grid-template-columns: 35px 1fr; gap: 10px; }
.lb-yaxis { display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 28px; color: var(--lb-muted); font-size: 13px; }
.lb-bars-area { position: relative; }
.lb-gridline { position: absolute; left: 0; right: 0; border-top: 1px dashed color-mix(in srgb, var(--lb-border) 85%, transparent); }
.lb-bars { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--cols), minmax(13px, 1fr)); gap: 17px; align-items: end; padding: 0 12px 26px 0; }
.lb-bar-col { position: relative; height: 100%; display: flex; align-items: end; justify-content: center; }
.lb-bar-col b { width: min(34px, 100%); min-height: 2px; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #ff9f1a, #ff4f38); }
.lb-bar-col span { position: absolute; bottom: -23px; color: var(--lb-muted); font-size: 12px; white-space: nowrap; }
.lb-top-list { display: grid; gap: 8px; }
.lb-top-row {
    min-height: 42px;
    display: grid;
    grid-template-columns: 30px 1fr auto;
    align-items: center;
    gap: 11px;
    padding: 0 11px 0 5px;
    border: 1px solid color-mix(in srgb, var(--lb-border) 72%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--lb-surface) 64%, var(--lb-border));
}
.lb-top-row .rank { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; border: 1.7px solid var(--rank-color); color: var(--rank-color); font-weight: 850; font-size: 13px; }
.lb-top-row a { color: var(--lb-text); font-weight: 750; font-size: 14px; text-decoration: none; }
.lb-top-row small { display: block; color: var(--lb-muted); font-size: 12px; }
.lb-top-row b { min-width: 58px; height: 26px; border-radius: 9px; display: grid; place-items: center; color: #ff6b00; background: rgba(255,107,0,.12); font-weight: 850; font-size: 13px; }
.lb-inline-retry { margin-left: .75rem; background: none; border: none; cursor: pointer; color: inherit; text-decoration: underline; font-size: inherit; }

@media (max-width: 1200px) {
    .rr-appbar { padding-left: 252px; }
    .lb-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lb-mid-grid, .lb-bottom-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .rr-appbar { height: 60px; padding: 0 16px; }
    .rr-appbar .rr-brand { display: flex; }
    .rr-appbar-left { position: static; }
    .hamburger { display: flex; }
    .rr-global-search { display: none; }
    .rr-sidebar { top: 60px; z-index: 95; }
    .rr-sidebar-brand { display: none; }
    .rr-main { padding: 16px; }
    .lb-dashboard-toolbar { flex-direction: column; }
    .lb-toolbar-actions { width: 100%; flex-wrap: wrap; }
    .lb-control { flex: 1; justify-content: center; }
    .lb-email-grid { grid-template-columns: 1fr; justify-items: center; }
}

@media (max-width: 520px) {
    .lb-kpi-grid { grid-template-columns: 1fr; }
    .lb-kpi-card { grid-template-columns: 90px 1fr; }
    .lb-title-block h1 { font-size: 28px; }
}