/* ═══════════════════════════════════════════════════════════════════════
 * Luna · Art Stone Dashboard — modulo CSS riscritto da zero (2026-04-26)
 * Carica DOPO style.css. Override completo del blocco legacy `.as-*`.
 * Tutti i selettori sono prefissati con `html body.as-dash-open .as-overlay` per garantire
 * specificity (0,2,1) — batte ogni regola standalone del vecchio CSS senza
 * ricorrere a !important. Sezioni keyframes e theme overrides usano selettori
 * dedicati documentati.
 * ═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────── 1. TOKENS (design system) ───────────────────────── */
:root {
    /* surfaces — dark default (light mode override più sotto) */
    --as-bg-0: #050507;
    --as-bg-1: #0c0c10;
    --as-bg-2: #14141a;
    --as-bg-3: #1d1d25;
    --as-bg-4: #262630;

    /* borders — alpha sul bianco per restare coerenti tra temi */
    --as-bd-0: rgba(255, 255, 255, 0.06);
    --as-bd-1: rgba(255, 255, 255, 0.10);
    --as-bd-2: rgba(255, 255, 255, 0.16);
    --as-bd-3: rgba(255, 255, 255, 0.24);

    /* text */
    --as-tx-1: #f1ecdf;
    --as-tx-2: #c9c4b6;
    --as-tx-3: #8a8578;
    --as-tx-4: #5a5648;
    --as-tx-on-ac: #14100a;
    --as-tx-t10: rgba(255, 255, 255, 0.10);
    --as-tx-t24: rgba(255, 255, 255, 0.24);

    /* accent (default = oro Art Stone) */
    --as-ac:    #d4b989;
    --as-ac-hi: #ecd5a4;
    --as-ac-lo: #a38a5a;
    --as-ac-ink: #14100a;
    --as-ac-t05: rgba(212, 185, 137, 0.05);
    --as-ac-t06: rgba(212, 185, 137, 0.06);
    --as-ac-t10: rgba(212, 185, 137, 0.10);
    --as-ac-t16: rgba(212, 185, 137, 0.16);
    --as-ac-t24: rgba(212, 185, 137, 0.24);
    --as-ac-t40: rgba(212, 185, 137, 0.40);

    /* semantic */
    --as-ok:   #4caf85;
    --as-ok-soft: rgba(76, 175, 133, 0.18);
    --as-err:  #ff5b5b;
    --as-err-soft: rgba(255, 91, 91, 0.18);
    --as-warn: #f0b941;
    --as-warn-soft: rgba(240, 185, 65, 0.18);
    --as-info: #7fb3ff;
    --as-info-soft: rgba(127, 179, 255, 0.18);

    /* typography */
    --as-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --as-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --as-fs-xs:  11px;
    --as-fs-sm:  12px;
    --as-fs-md:  13px;
    --as-fs-lg:  14px;
    --as-fs-xl:  16px;
    --as-fs-2xl: 18px;
    --as-fs-3xl: 22px;
    --as-fs-4xl: 28px;

    /* spacing scale (4-pixel base) */
    --as-sp-0: 0;
    --as-sp-1: 4px;
    --as-sp-2: 8px;
    --as-sp-3: 12px;
    --as-sp-4: 16px;
    --as-sp-5: 20px;
    --as-sp-6: 24px;
    --as-sp-7: 32px;
    --as-sp-8: 40px;
    --as-sp-9: 48px;
    --as-sp-10: 64px;

    /* radii */
    --as-r-xs:  4px;
    --as-r-sm:  6px;
    --as-r-md:  8px;
    --as-r-lg:  12px;
    --as-r-xl:  16px;
    --as-r-round: 999px;

    /* shadows */
    --as-sh-1: 0 1px 2px rgba(0, 0, 0, 0.20);
    --as-sh-2: 0 2px 8px rgba(0, 0, 0, 0.30);
    --as-sh-3: 0 8px 24px rgba(0, 0, 0, 0.40);
    --as-sh-4: 0 16px 48px rgba(0, 0, 0, 0.55);

    /* motion */
    --as-ez:    cubic-bezier(0.4, 0, 0.2, 1);
    --as-ez-in: cubic-bezier(0.4, 0, 1, 1);
    --as-ez-out: cubic-bezier(0, 0, 0.2, 1);
    --as-d-1: 120ms;
    --as-d-2: 200ms;
    --as-d-3: 320ms;

    /* z-index scale */
    --as-z-base:    1;
    --as-z-sticky:  10;
    --as-z-overlay: 1000;
    --as-z-modal:   2000;
    --as-z-toast:   3000;
}

/* ─────────────────────── 2. SCOPE & RESET ──────────────────────────────── */
body.as-dash-open {
    overflow: hidden;
}
body.as-dash-open .as-overlay,
body.as-dash-open .as-overlay * {
    box-sizing: border-box;
}
body.as-dash-open .as-overlay {
    font-family: var(--as-font);
    color: var(--as-tx-1);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
body.as-dash-open .as-overlay button,
body.as-dash-open .as-overlay input,
body.as-dash-open .as-overlay select,
body.as-dash-open .as-overlay textarea {
    font: inherit;
    color: inherit;
}
body.as-dash-open .as-overlay button {
    cursor: pointer;
    background: transparent;
    border: none;
    color: inherit;
    font-family: inherit;
}
body.as-dash-open .as-overlay button:disabled { cursor: not-allowed; opacity: 0.5; }
body.as-dash-open .as-overlay a { color: var(--as-ac); text-decoration: none; }
body.as-dash-open .as-overlay a:hover { color: var(--as-ac-hi); text-decoration: underline; }

/* ────────────────────── 3. OVERLAY + PANEL (root) ──────────────────────── */
html body.as-dash-open .as-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: var(--as-z-overlay);
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 24px;
    animation: as-fade-in var(--as-d-2) var(--as-ez-out);
}
html body.as-dash-open .as-overlay.as-overlay-solo {
    padding: 0;
    background: var(--as-bg-0);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html body.as-dash-open .as-overlay .as-panel {
    width: 100%;
    max-width: 1480px;
    background: var(--as-bg-1);
    border: 1px solid var(--as-bd-1);
    border-radius: var(--as-r-xl);
    box-shadow: var(--as-sh-4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: as-pop-in var(--as-d-3) var(--as-ez-out);
    isolation: isolate;
}
html body.as-dash-open .as-overlay.as-overlay-solo .as-panel {
    max-width: none;
    border-radius: 0;
    border: none;
    box-shadow: none;
    height: 100%;
}

/* ───────────────────────── 4. HEADER ───────────────────────────────────── */
html body.as-dash-open .as-overlay .as-header {
    display: flex;
    align-items: center;
    gap: var(--as-sp-5);
    padding: var(--as-sp-4) var(--as-sp-6);
    border-bottom: 1px solid var(--as-bd-1);
    background: linear-gradient(180deg, var(--as-bg-2), var(--as-bg-1));
    flex-shrink: 0;
}
html body.as-dash-open .as-overlay .as-header-brand {
    display: flex;
    align-items: center;
    gap: var(--as-sp-3);
    flex-shrink: 0;
}
html body.as-dash-open .as-overlay .as-logo-img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}
html body.as-dash-open .as-overlay .as-header-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
html body.as-dash-open .as-overlay .as-header-eyebrow {
    font-size: var(--as-fs-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--as-tx-3);
    font-weight: 500;
}
html body.as-dash-open .as-overlay .as-header-titletag {
    font-size: var(--as-fs-xl);
    font-weight: 600;
    color: var(--as-tx-1);
    line-height: 1.2;
}
html body.as-dash-open .as-overlay .as-header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--as-sp-3);
    flex-wrap: nowrap;
}
html body.as-dash-open .as-overlay .as-header-stats {
    display: flex;
    align-items: center;
    gap: var(--as-sp-3);
    padding: var(--as-sp-2) var(--as-sp-4);
    background: var(--as-bg-2);
    border: 1px solid var(--as-bd-1);
    border-radius: var(--as-r-md);
}
html body.as-dash-open .as-overlay .as-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
    min-width: 38px;
}
html body.as-dash-open .as-overlay .as-stat-n {
    font-size: var(--as-fs-xl);
    font-weight: 700;
    color: var(--as-tx-1);
}
html body.as-dash-open .as-overlay .as-stat-l {
    font-size: var(--as-fs-xs);
    color: var(--as-tx-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 2px;
}
html body.as-dash-open .as-overlay .as-stat-divider {
    width: 1px;
    align-self: stretch;
    background: var(--as-bd-1);
    margin: 4px 0;
}
html body.as-dash-open .as-overlay .as-header-bot {
    display: flex;
    align-items: center;
    gap: var(--as-sp-3);
    padding: var(--as-sp-2) var(--as-sp-3);
    background: var(--as-bg-2);
    border: 1px solid var(--as-bd-1);
    border-radius: var(--as-r-md);
}
html body.as-dash-open .as-overlay .as-bot-status {
    display: flex;
    align-items: center;
    gap: var(--as-sp-2);
}
html body.as-dash-open .as-overlay .as-bot-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
html body.as-dash-open .as-overlay .as-bot-line {
    font-size: var(--as-fs-sm);
    color: var(--as-tx-1);
    font-weight: 500;
}
html body.as-dash-open .as-overlay .as-bot-sub {
    font-size: var(--as-fs-xs);
    color: var(--as-tx-3);
}
html body.as-dash-open .as-overlay .as-help-btn,
html body.as-dash-open .as-overlay .as-close {
    width: 36px;
    height: 36px;
    border-radius: var(--as-r-md);
    background: var(--as-bg-2);
    border: 1px solid var(--as-bd-1);
    color: var(--as-tx-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--as-d-1) var(--as-ez), color var(--as-d-1) var(--as-ez), border-color var(--as-d-1) var(--as-ez);
}
html body.as-dash-open .as-overlay .as-help-btn:hover,
html body.as-dash-open .as-overlay .as-close:hover {
    background: var(--as-bg-3);
    color: var(--as-tx-1);
    border-color: var(--as-bd-2);
}

/* status dots (usati ovunque: header bot, run cards, log rows) */
html body.as-dash-open .as-overlay .as-bot-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--as-tx-4);
    flex-shrink: 0;
    transition: box-shadow var(--as-d-2) var(--as-ez);
}
html body.as-dash-open .as-overlay .as-bot-dot-ok  { background: var(--as-ok);   box-shadow: 0 0 8px rgba(76,175,133,0.6); }
html body.as-dash-open .as-overlay .as-bot-dot-err { background: var(--as-err);  box-shadow: 0 0 8px rgba(255,91,91,0.55); }
html body.as-dash-open .as-overlay .as-bot-dot-run { background: var(--as-ac);   box-shadow: 0 0 8px var(--as-ac-t40); animation: as-pulse 1.2s infinite; }
html body.as-dash-open .as-overlay .as-bot-dot-off { background: var(--as-tx-4); }

/* ───────────────────────── 5. NAV (groups + tabs) ──────────────────────── */
html body.as-dash-open .as-overlay .as-nav {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--as-bd-1);
    background: var(--as-bg-1);
    flex-shrink: 0;
}
html body.as-dash-open .as-overlay .as-nav-groups {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0 var(--as-sp-4);
    border-bottom: 1px solid var(--as-bd-0);
    overflow-x: auto;
    scrollbar-width: none;
}
html body.as-dash-open .as-overlay .as-nav-groups::-webkit-scrollbar { display: none; }

html body.as-dash-open .as-overlay .as-nav-group {
    padding: var(--as-sp-3) var(--as-sp-4);
    font-size: var(--as-fs-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--as-tx-3);
    border: none;
    background: transparent;
    border-bottom: 2px solid transparent;
    transition: color var(--as-d-1) var(--as-ez), border-color var(--as-d-1) var(--as-ez);
    white-space: nowrap;
}
html body.as-dash-open .as-overlay .as-nav-group:hover { color: var(--as-tx-1); }
html body.as-dash-open .as-overlay .as-nav-group.as-nav-group-on {
    color: var(--as-tx-1);
    border-bottom-color: var(--as-ac);
}

html body.as-dash-open .as-overlay .as-tabs {
    display: flex;
    align-items: stretch;
    gap: var(--as-sp-2);
    padding: 0 var(--as-sp-4);
    overflow-x: auto;
    scrollbar-width: none;
}
html body.as-dash-open .as-overlay .as-tabs::-webkit-scrollbar { display: none; }

html body.as-dash-open .as-overlay .as-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--as-sp-2);
    padding: var(--as-sp-3) var(--as-sp-3);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--as-tx-3);
    font-size: var(--as-fs-md);
    font-weight: 500;
    transition: color var(--as-d-1) var(--as-ez), border-color var(--as-d-1) var(--as-ez);
    white-space: nowrap;
}
html body.as-dash-open .as-overlay .as-tab:hover { color: var(--as-tx-1); }
html body.as-dash-open .as-overlay .as-tab.as-tab-active {
    color: var(--as-ac);
    border-bottom-color: var(--as-ac);
}
html body.as-dash-open .as-overlay .as-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: currentColor;
    opacity: 0.85;
}
html body.as-dash-open .as-overlay .as-tab-icon svg { display: block; width: 18px; height: 18px; }
html body.as-dash-open .as-overlay .as-tab.as-tab-active .as-tab-icon { opacity: 1; }

/* ───────────────────────── 6. BODY (content) ───────────────────────────── */
html body.as-dash-open .as-overlay .as-body {
    flex: 1;
    overflow: auto;
    background: var(--as-bg-1);
    position: relative;
    padding: var(--as-sp-5) var(--as-sp-6);
    -webkit-overflow-scrolling: touch;
}
html body.as-dash-open .as-overlay .as-body::-webkit-scrollbar { width: 10px; height: 10px; }
html body.as-dash-open .as-overlay .as-body::-webkit-scrollbar-track { background: transparent; }
html body.as-dash-open .as-overlay .as-body::-webkit-scrollbar-thumb {
    background: var(--as-bd-1);
    border-radius: var(--as-r-round);
    border: 2px solid var(--as-bg-1);
}
html body.as-dash-open .as-overlay .as-body::-webkit-scrollbar-thumb:hover { background: var(--as-bd-2); }

/* ────────────────────── 7. BANNER (system messages) ────────────────────── */
html body.as-dash-open .as-overlay .as-banner {
    padding: var(--as-sp-2) var(--as-sp-6);
    background: var(--as-ac-t10);
    border-bottom: 1px solid var(--as-ac-t24);
    color: var(--as-ac);
    font-size: var(--as-fs-sm);
    font-weight: 500;
    text-align: center;
    flex-shrink: 0;
}

/* ────────────────────── 8. BOTTOM-NAV (mobile) ─────────────────────────── */
html body.as-dash-open .as-overlay .as-bottom-nav {
    display: none;
    background: var(--as-bg-2);
    border-top: 1px solid var(--as-bd-1);
    padding: var(--as-sp-1) var(--as-sp-2) calc(var(--as-sp-1) + env(safe-area-inset-bottom, 0px));
    gap: var(--as-sp-1);
    flex-shrink: 0;
}
html body.as-dash-open .as-overlay .as-bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: var(--as-sp-2) var(--as-sp-1);
    border-radius: var(--as-r-md);
    color: var(--as-tx-3);
    font-size: 10px;
    font-weight: 500;
    transition: color var(--as-d-1) var(--as-ez), background var(--as-d-1) var(--as-ez);
    background: transparent;
    border: none;
    position: relative;
}
html body.as-dash-open .as-overlay .as-bottom-nav-item.is-active {
    color: var(--as-ac);
    background: var(--as-ac-t10);
}
html body.as-dash-open .as-overlay .as-bottom-nav-item svg {
    width: 22px;
    height: 22px;
    display: block;
}
html body.as-dash-open .as-overlay .as-bnav-ico-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
html body.as-dash-open .as-overlay .as-bnav-badge {
    position: absolute;
    top: -3px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--as-r-round);
    background: var(--as-err);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ────────────── 9. PULL-TO-REFRESH INDICATOR (mobile) ──────────────────── */
html body.as-dash-open .as-overlay .as-ptr-indicator {
    position: absolute;
    top: var(--as-sp-3);
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--as-bg-3);
    border: 1px solid var(--as-bd-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--as-tx-2);
    z-index: var(--as-z-sticky);
}
html body.as-dash-open .as-overlay .as-ptr-indicator.is-ready { color: var(--as-ac); border-color: var(--as-ac); }
html body.as-dash-open .as-overlay .as-ptr-indicator.is-loading { animation: as-spin 1s linear infinite; }

/* ────────────────────── 10. KEYFRAMES ──────────────────────────────────── */
@keyframes as-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes as-pop-in {
    from { opacity: 0; transform: translateY(8px) scale(0.99); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes as-pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--as-ac-t40); }
    50%      { box-shadow: 0 0 0 6px transparent; }
}
@keyframes as-spin {
    from { transform: translateX(-50%) rotate(0deg); }
    to   { transform: translateX(-50%) rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════════════
 * MODULO 2 — FORM CONTROLS
 * Buttons (default + variants), input/select/textarea, checkbox/radio,
 * autocomplete (.as-ed-autocomplete-*), toolbar.
 * ═══════════════════════════════════════════════════════════════════════ */

/* ─── 11. BUTTONS ──────────────────────────────────────────────────────── */
html body.as-dash-open .as-overlay .as-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--as-sp-2);
    padding: 8px 14px;
    height: 36px;
    background: var(--as-bg-2);
    border: 1px solid var(--as-bd-1);
    border-radius: var(--as-r-md);
    color: var(--as-tx-1);
    font-size: var(--as-fs-md);
    font-weight: 500;
    line-height: 1;
    transition: background var(--as-d-1) var(--as-ez), border-color var(--as-d-1) var(--as-ez), color var(--as-d-1) var(--as-ez), transform var(--as-d-1) var(--as-ez);
    white-space: nowrap;
    user-select: none;
}
html body.as-dash-open .as-overlay .as-btn:hover:not(:disabled) {
    background: var(--as-bg-3);
    border-color: var(--as-bd-2);
}
html body.as-dash-open .as-overlay .as-btn:active:not(:disabled) {
    transform: translateY(1px);
}
html body.as-dash-open .as-overlay .as-btn:focus-visible {
    outline: 2px solid var(--as-ac);
    outline-offset: 2px;
}
html body.as-dash-open .as-overlay .as-btn-sm {
    height: 28px;
    padding: 4px 10px;
    font-size: var(--as-fs-sm);
}
html body.as-dash-open .as-overlay .as-btn-primary {
    background: linear-gradient(180deg, var(--as-ac-hi), var(--as-ac));
    border-color: var(--as-ac);
    color: var(--as-tx-on-ac);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.25);
}
html body.as-dash-open .as-overlay .as-btn-primary:hover:not(:disabled) {
    background: linear-gradient(180deg, var(--as-ac-hi), var(--as-ac-hi));
    border-color: var(--as-ac-hi);
}
html body.as-dash-open .as-overlay .as-btn-danger {
    background: var(--as-err-soft);
    border-color: rgba(255, 91, 91, 0.32);
    color: var(--as-err);
}
html body.as-dash-open .as-overlay .as-btn-danger:hover:not(:disabled) {
    background: rgba(255, 91, 91, 0.24);
    border-color: var(--as-err);
}
html body.as-dash-open .as-overlay .as-btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--as-tx-2);
}
html body.as-dash-open .as-overlay .as-btn-ghost:hover:not(:disabled) {
    background: var(--as-bg-2);
    color: var(--as-tx-1);
}
html body.as-dash-open .as-overlay .as-btn-ico {
    padding: 8px 14px;
}
html body.as-dash-open .as-overlay .as-btn-ico-svg {
    display: inline-flex;
    width: 14px;
    height: 14px;
}
html body.as-dash-open .as-overlay .as-btn-ico-svg svg { width: 14px; height: 14px; display: block; }
/* Theme picker button (rotonda) */
html body.as-dash-open .as-overlay .as-theme-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: var(--as-r-round);
    background: var(--as-bg-2);
    border: 1px solid var(--as-bd-1);
    color: var(--as-tx-2);
    position: relative;
}
html body.as-dash-open .as-overlay .as-theme-btn:hover { background: var(--as-bg-3); color: var(--as-tx-1); }
html body.as-dash-open .as-overlay .as-theme-btn-dot {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--as-ac);
    border: 2px solid var(--as-bg-2);
}
html body.as-dash-open .as-overlay .as-theme-btn-ico { display: inline-flex; align-items: center; justify-content: center; }
html body.as-dash-open .as-overlay .as-theme-btn-ico svg { width: 16px; height: 16px; }

/* ─── 12. INPUT / TEXTAREA ─────────────────────────────────────────────── */
html body.as-dash-open .as-overlay .as-input,
html body.as-dash-open .as-overlay .as-textarea,
html body.as-dash-open .as-overlay .as-select,
html body.as-dash-open .as-overlay input[type="text"].as-ed-field,
html body.as-dash-open .as-overlay input[type="number"].as-ed-field,
html body.as-dash-open .as-overlay input[type="search"].as-ed-field {
    display: block;
    width: 100%;
    padding: 8px 12px;
    height: 36px;
    background: var(--as-bg-2);
    border: 1px solid var(--as-bd-1);
    border-radius: var(--as-r-md);
    color: var(--as-tx-1);
    font-size: var(--as-fs-md);
    font-family: inherit;
    line-height: 1.4;
    transition: border-color var(--as-d-1) var(--as-ez), background var(--as-d-1) var(--as-ez), box-shadow var(--as-d-1) var(--as-ez);
}
html body.as-dash-open .as-overlay .as-textarea {
    height: auto;
    min-height: 80px;
    padding: 10px 12px;
    line-height: 1.5;
    resize: vertical;
}
html body.as-dash-open .as-overlay .as-input:hover,
html body.as-dash-open .as-overlay .as-textarea:hover,
html body.as-dash-open .as-overlay .as-select:hover {
    border-color: var(--as-bd-2);
}
html body.as-dash-open .as-overlay .as-input:focus,
html body.as-dash-open .as-overlay .as-textarea:focus,
html body.as-dash-open .as-overlay .as-select:focus {
    outline: none;
    border-color: var(--as-ac);
    box-shadow: 0 0 0 3px var(--as-ac-t24);
    background: var(--as-bg-1);
}
html body.as-dash-open .as-overlay .as-input::placeholder,
html body.as-dash-open .as-overlay .as-textarea::placeholder {
    color: var(--as-tx-4);
}
html body.as-dash-open .as-overlay .as-input:disabled,
html body.as-dash-open .as-overlay .as-textarea:disabled,
html body.as-dash-open .as-overlay .as-select:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ─── 13. SELECT (chevron custom) ──────────────────────────────────────── */
html body.as-dash-open .as-overlay .as-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8578' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 32px;
}
html body.as-dash-open .as-overlay .as-select-sm {
    height: 28px;
    padding: 4px 28px 4px 10px;
    font-size: var(--as-fs-sm);
    background-position: right 8px center;
}
html body.as-dash-open .as-overlay .as-select option {
    background: var(--as-bg-2);
    color: var(--as-tx-1);
}

/* ─── 14. SEARCH (input con icona lente — toolbar/hero) ────────────────── */
html body.as-dash-open .as-overlay .as-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 200px;
    max-width: 440px;
}
html body.as-dash-open .as-overlay .as-search > svg,
html body.as-dash-open .as-overlay .as-search > .as-search-ico {
    position: absolute;
    left: 12px;
    width: 16px;
    height: 16px;
    color: var(--as-tx-3);
    pointer-events: none;
}
html body.as-dash-open .as-overlay .as-search > input {
    padding-left: 36px;
}

/* ─── 15. CHECKBOX / SWITCH (label + input pattern) ────────────────────── */
html body.as-dash-open .as-overlay .as-ed-field-check {
    display: inline-flex;
    align-items: center;
    gap: var(--as-sp-2);
    cursor: pointer;
    user-select: none;
    color: var(--as-tx-2);
    font-size: var(--as-fs-md);
}
html body.as-dash-open .as-overlay .as-ed-field-check input[type="checkbox"],
html body.as-dash-open .as-overlay .as-overlay input[type="checkbox"].as-toolbar-check,
html body.as-dash-open .as-overlay input.as-toolbar-check {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: var(--as-r-xs);
    background: var(--as-bg-2);
    border: 1.5px solid var(--as-bd-2);
    cursor: pointer;
    position: relative;
    transition: background var(--as-d-1) var(--as-ez), border-color var(--as-d-1) var(--as-ez);
    flex-shrink: 0;
}
html body.as-dash-open .as-overlay .as-ed-field-check input[type="checkbox"]:hover,
html body.as-dash-open .as-overlay input.as-toolbar-check:hover {
    border-color: var(--as-ac);
}
html body.as-dash-open .as-overlay .as-ed-field-check input[type="checkbox"]:checked,
html body.as-dash-open .as-overlay input.as-toolbar-check:checked {
    background: var(--as-ac);
    border-color: var(--as-ac);
}
html body.as-dash-open .as-overlay .as-ed-field-check input[type="checkbox"]:checked::after,
html body.as-dash-open .as-overlay input.as-toolbar-check:checked::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 4px;
    width: 4px;
    height: 8px;
    border: solid var(--as-tx-on-ac);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* ─── 16. TOOLBAR (filtri + azioni) ────────────────────────────────────── */
html body.as-dash-open .as-overlay .as-toolbar,
html body.as-dash-open .as-overlay .as-tool-bar {
    display: flex;
    align-items: center;
    gap: var(--as-sp-2);
    flex-wrap: wrap;
    padding: var(--as-sp-3) 0;
    margin-bottom: var(--as-sp-3);
}
html body.as-dash-open .as-overlay .as-toolbar-spacer,
html body.as-dash-open .as-overlay .as-tool-spacer {
    flex: 1;
    min-width: 0;
}
html body.as-dash-open .as-overlay .as-toolbar-info {
    color: var(--as-tx-3);
    font-size: var(--as-fs-sm);
}
html body.as-dash-open .as-overlay .as-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--as-sp-1);
    padding: 6px 10px;
    height: 30px;
    background: var(--as-bg-2);
    border: 1px solid var(--as-bd-1);
    border-radius: var(--as-r-sm);
    color: var(--as-tx-2);
    font-size: var(--as-fs-sm);
    font-weight: 500;
    transition: background var(--as-d-1), color var(--as-d-1), border-color var(--as-d-1);
}
html body.as-dash-open .as-overlay .as-tool-btn:hover:not(:disabled) { background: var(--as-bg-3); color: var(--as-tx-1); }
html body.as-dash-open .as-overlay .as-tool-btn.as-tool-btn-active {
    background: var(--as-ac-t10);
    border-color: var(--as-ac-t40);
    color: var(--as-ac);
}
html body.as-dash-open .as-overlay .as-tool-btn.as-tool-btn-primary {
    background: var(--as-ac);
    border-color: var(--as-ac);
    color: var(--as-tx-on-ac);
}
html body.as-dash-open .as-overlay .as-tool-btn.as-tool-btn-danger {
    background: var(--as-err-soft);
    border-color: rgba(255, 91, 91, 0.32);
    color: var(--as-err);
}
html body.as-dash-open .as-overlay .as-tool-btn.as-tool-btn-warn {
    background: var(--as-warn-soft);
    border-color: rgba(240, 185, 65, 0.32);
    color: var(--as-warn);
}
html body.as-dash-open .as-overlay .as-tool-ico { width: 14px; height: 14px; display: inline-flex; }
html body.as-dash-open .as-overlay .as-tool-ico svg { width: 14px; height: 14px; }
html body.as-dash-open .as-overlay .as-tool-lbl { white-space: nowrap; }
html body.as-dash-open .as-overlay .as-tool-count {
    font-size: var(--as-fs-xs);
    font-weight: 700;
    padding: 1px 6px;
    border-radius: var(--as-r-round);
    background: var(--as-bg-3);
    color: var(--as-tx-2);
    min-width: 18px;
    text-align: center;
}
html body.as-dash-open .as-overlay .as-tool-btn-active .as-tool-count {
    background: var(--as-ac);
    color: var(--as-tx-on-ac);
}

/* ─── 17. AUTOCOMPLETE (editor) ────────────────────────────────────────── */
html body.as-dash-open .as-overlay .as-ed-autocomplete-wrap {
    position: relative;
    width: 100%;
}
html body.as-dash-open .as-overlay .as-ed-autocomplete-input {
    /* eredita .as-input */
    width: 100%;
}
html body.as-dash-open .as-overlay .as-ed-autocomplete-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: var(--as-z-sticky);
    max-height: 280px;
    overflow-y: auto;
    background: var(--as-bg-2);
    border: 1px solid var(--as-bd-2);
    border-radius: var(--as-r-md);
    box-shadow: var(--as-sh-3);
    padding: 4px;
}
html body.as-dash-open .as-overlay .as-ed-autocomplete-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    border-radius: var(--as-r-sm);
    cursor: pointer;
    transition: background var(--as-d-1);
}
html body.as-dash-open .as-overlay .as-ed-autocomplete-item:hover,
html body.as-dash-open .as-overlay .as-ed-autocomplete-item[aria-selected="true"] {
    background: var(--as-ac-t10);
}

/* ─── 18. EDITABLE FIELD WRAPPERS ──────────────────────────────────────── */
html body.as-dash-open .as-overlay .as-ed-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
html body.as-dash-open .as-overlay .as-ed-field-wide { grid-column: 1 / -1; }
html body.as-dash-open .as-overlay .as-ed-field > label,
html body.as-dash-open .as-overlay .as-ed-field > .as-th-lbl {
    font-size: var(--as-fs-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--as-tx-3);
}

/* ═══════════════════════════════════════════════════════════════════════
 * MODULO 3 — TABELLE (.as-table + wrap + righe + celle + headers)
 * Cuore della dashboard: lista ordini, anagrafica clienti/prodotti, etc.
 * ═══════════════════════════════════════════════════════════════════════ */

html body.as-dash-open .as-overlay .as-table-wrap {
    overflow: auto;
    border: 1px solid var(--as-bd-1);
    border-radius: var(--as-r-lg);
    background: var(--as-bg-2);
    margin-bottom: var(--as-sp-4);
}
html body.as-dash-open .as-overlay .as-table-wrap-drop {
    border-color: var(--as-ac);
    box-shadow: 0 0 0 4px var(--as-ac-t10);
}
html body.as-dash-open .as-overlay .as-table-wrap::-webkit-scrollbar { height: 10px; width: 10px; }
html body.as-dash-open .as-overlay .as-table-wrap::-webkit-scrollbar-track { background: transparent; }
html body.as-dash-open .as-overlay .as-table-wrap::-webkit-scrollbar-thumb {
    background: var(--as-bd-1);
    border-radius: var(--as-r-round);
    border: 2px solid var(--as-bg-2);
}

html body.as-dash-open .as-overlay .as-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--as-fs-md);
    color: var(--as-tx-1);
}

html body.as-dash-open .as-overlay .as-table thead {
    background: var(--as-bg-3);
    position: sticky;
    top: 0;
    z-index: var(--as-z-sticky);
}
html body.as-dash-open .as-overlay .as-table th {
    text-align: left;
    padding: 10px 14px;
    font-size: var(--as-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--as-tx-3);
    border-bottom: 1px solid var(--as-bd-2);
    white-space: nowrap;
    user-select: none;
}
html body.as-dash-open .as-overlay .as-table th.as-th-right { text-align: right; }
html body.as-dash-open .as-overlay .as-table th.as-th-sortable {
    cursor: pointer;
    transition: color var(--as-d-1);
}
html body.as-dash-open .as-overlay .as-table th.as-th-sortable:hover { color: var(--as-tx-1); }
html body.as-dash-open .as-overlay .as-table th.as-th-sorted { color: var(--as-ac); }
html body.as-dash-open .as-overlay .as-table th.as-th-dragging { opacity: 0.5; }
html body.as-dash-open .as-overlay .as-table th.as-th-dyn { color: var(--as-ac); }
html body.as-dash-open .as-overlay .as-table .as-th-lbl {
    display: inline-flex;
    align-items: center;
    gap: var(--as-sp-1);
}
html body.as-dash-open .as-overlay .as-table .as-th-right { justify-content: flex-end; }

html body.as-dash-open .as-overlay .as-table tbody tr {
    transition: background var(--as-d-1);
}
html body.as-dash-open .as-overlay .as-table tbody tr + tr td {
    border-top: 1px solid var(--as-bd-0);
}
html body.as-dash-open .as-overlay .as-table tbody tr:hover {
    background: var(--as-ac-t05);
}
html body.as-dash-open .as-overlay .as-table tbody tr.as-row-clickable {
    cursor: pointer;
}
html body.as-dash-open .as-overlay .as-table tbody tr.as-row-sel {
    background: var(--as-ac-t10);
}
html body.as-dash-open .as-overlay .as-table tbody tr.as-row-sel td {
    border-color: var(--as-ac-t24);
}
html body.as-dash-open .as-overlay .as-table tbody tr.as-row-edited td {
    box-shadow: inset 3px 0 0 var(--as-ac);
}
html body.as-dash-open .as-overlay .as-table tbody tr.as-row-trashed {
    opacity: 0.45;
    text-decoration: line-through;
    text-decoration-color: var(--as-tx-3);
}
html body.as-dash-open .as-overlay .as-table tbody tr.as-row-worked td {
    box-shadow: inset 3px 0 0 var(--as-ok);
}

html body.as-dash-open .as-overlay .as-table td {
    padding: 12px 14px;
    color: var(--as-tx-1);
    vertical-align: middle;
}
html body.as-dash-open .as-overlay .as-table td.as-cell-right { text-align: right; }
html body.as-dash-open .as-overlay .as-table td.as-cell-key {
    font-family: var(--as-font-mono);
    font-size: var(--as-fs-sm);
    color: var(--as-tx-2);
}
html body.as-dash-open .as-overlay .as-table td.as-cell-edit {
    background: var(--as-ac-t05);
}
html body.as-dash-open .as-overlay .as-table td.as-cell-editable {
    cursor: text;
    transition: background var(--as-d-1);
}
html body.as-dash-open .as-overlay .as-table td.as-cell-editable:hover {
    background: var(--as-bg-3);
}
html body.as-dash-open .as-overlay .as-table td.as-cell-rules {
    color: var(--as-ac);
    font-size: var(--as-fs-sm);
}
html body.as-dash-open .as-overlay .as-table td.as-dim-cell { color: var(--as-tx-3); }

/* numeri (es. importi) */
html body.as-dash-open .as-overlay .as-num,
html body.as-dash-open .as-overlay .as-num-val {
    font-family: var(--as-font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--as-tx-1);
}
html body.as-dash-open .as-overlay .as-num-edited { color: var(--as-ac); font-weight: 600; }

/* badges generici (stato_lavorazione tipo "NO/LAV/MOD/GOK/PROD") */
html body.as-dash-open .as-overlay .as-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    height: 22px;
    border-radius: var(--as-r-round);
    background: var(--as-bg-3);
    border: 1px solid var(--as-bd-1);
    color: var(--as-tx-2);
    font-size: var(--as-fs-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}
html body.as-dash-open .as-overlay .as-badge-ok {
    background: var(--as-ok-soft);
    border-color: rgba(76,175,133,0.35);
    color: var(--as-ok);
}
html body.as-dash-open .as-overlay .as-badge-dim {
    background: var(--as-bg-2);
    color: var(--as-tx-3);
}
html body.as-dash-open .as-overlay .as-stato-sel {
    cursor: pointer;
    border: 1px solid var(--as-bd-2);
    background: var(--as-info-soft);
    color: var(--as-info);
}
html body.as-dash-open .as-overlay .as-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--as-r-sm);
    background: var(--as-bg-3);
    color: var(--as-tx-2);
    font-size: var(--as-fs-xs);
    font-weight: 500;
    border: 1px solid var(--as-bd-1);
}
html body.as-dash-open .as-overlay .as-tipo-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--as-r-sm);
    background: var(--as-ac-t10);
    color: var(--as-ac);
    font-size: var(--as-fs-xs);
    font-weight: 600;
}

/* danea (importato/da importare cell) */
html body.as-dash-open .as-overlay .as-danea-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: var(--as-r-round);
    font-size: var(--as-fs-xs);
    font-weight: 500;
    border: 1px solid var(--as-bd-1);
    background: var(--as-bg-3);
    color: var(--as-tx-3);
}
html body.as-dash-open .as-overlay .as-danea-ok {
    background: var(--as-ok-soft);
    color: var(--as-ok);
    border-color: rgba(76,175,133,0.35);
}
html body.as-dash-open .as-overlay .as-danea-off {
    background: var(--as-bg-2);
    color: var(--as-tx-3);
    border-color: var(--as-bd-1);
}
html body.as-dash-open .as-overlay .as-danea-flag {
    background: var(--as-warn-soft);
    color: var(--as-warn);
    border-color: rgba(240, 185, 65, 0.35);
}
html body.as-dash-open .as-overlay .as-danea-ico { display: inline-flex; }
html body.as-dash-open .as-overlay .as-danea-ico svg { width: 12px; height: 12px; }

/* pagination */
html body.as-dash-open .as-overlay .as-pagination {
    display: flex;
    align-items: center;
    gap: var(--as-sp-2);
    padding: var(--as-sp-3) 0;
    color: var(--as-tx-3);
    font-size: var(--as-fs-sm);
}
html body.as-dash-open .as-overlay .as-pagination-info {
    color: var(--as-tx-3);
}
html body.as-dash-open .as-overlay .as-pagination-divider {
    width: 1px; height: 18px; background: var(--as-bd-1);
}

/* column picker (dropdown selezione colonne tabella) */
html body.as-dash-open .as-overlay .as-col-picker-wrap {
    position: relative;
}
html body.as-dash-open .as-overlay .as-col-picker-trigger {
    /* eredita .as-btn */
}
html body.as-dash-open .as-overlay .as-col-picker {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: var(--as-z-sticky);
    width: 280px;
    max-height: 360px;
    overflow-y: auto;
    background: var(--as-bg-2);
    border: 1px solid var(--as-bd-2);
    border-radius: var(--as-r-md);
    box-shadow: var(--as-sh-3);
    padding: var(--as-sp-2);
}
html body.as-dash-open .as-overlay .as-col-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px var(--as-sp-2);
}
html body.as-dash-open .as-overlay .as-col-picker-title {
    font-size: var(--as-fs-sm);
    font-weight: 600;
    color: var(--as-tx-1);
}
html body.as-dash-open .as-overlay .as-col-picker-reset {
    color: var(--as-ac);
    font-size: var(--as-fs-xs);
    background: transparent;
}
html body.as-dash-open .as-overlay .as-col-picker-hint {
    padding: 0 8px var(--as-sp-2);
    color: var(--as-tx-3);
    font-size: var(--as-fs-xs);
}
html body.as-dash-open .as-overlay .as-col-picker-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
html body.as-dash-open .as-overlay .as-col-picker-item {
    display: flex;
    align-items: center;
    gap: var(--as-sp-2);
    padding: 6px 8px;
    border-radius: var(--as-r-sm);
    cursor: pointer;
    color: var(--as-tx-2);
    font-size: var(--as-fs-md);
    transition: background var(--as-d-1);
}
html body.as-dash-open .as-overlay .as-col-picker-item:hover {
    background: var(--as-bg-3);
    color: var(--as-tx-1);
}

/* ═══════════════════════════════════════════════════════════════════════
 * MODULO 4 — FEEDBACK (modali, toast, banner, empty/error, welcome)
 * ═══════════════════════════════════════════════════════════════════════ */

/* ─── 19. MODAL ────────────────────────────────────────────────────────── */
html body.as-dash-open .as-overlay .as-modal,
html body.as-dash-open .as-modal {
    position: fixed;
    inset: 0;
    z-index: var(--as-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--as-sp-4);
    animation: as-fade-in var(--as-d-2) var(--as-ez-out);
}
html body.as-dash-open .as-overlay .as-modal-backdrop,
html body.as-dash-open .as-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
html body.as-dash-open .as-overlay .as-modal-panel,
html body.as-dash-open .as-modal-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    background: var(--as-bg-1);
    border: 1px solid var(--as-bd-2);
    border-radius: var(--as-r-lg);
    box-shadow: var(--as-sh-4);
    animation: as-pop-in var(--as-d-3) var(--as-ez-out);
}
html body.as-dash-open .as-overlay .as-modal-head,
html body.as-dash-open .as-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--as-sp-4) var(--as-sp-5);
    border-bottom: 1px solid var(--as-bd-1);
    font-size: var(--as-fs-lg);
    font-weight: 600;
    color: var(--as-tx-1);
}

/* ─── 20. LIGHTBOX (preview immagine) ─────────────────────────────────── */
html body.as-dash-open .as-lightbox {
    position: fixed;
    inset: 0;
    z-index: var(--as-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.92);
    padding: var(--as-sp-5);
    animation: as-fade-in var(--as-d-2) var(--as-ez-out);
}
html body.as-dash-open .as-lightbox img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--as-r-md);
    box-shadow: var(--as-sh-4);
}
html body.as-dash-open .as-lightbox-close,
html body.as-dash-open .as-lightbox-dl {
    position: absolute;
    top: var(--as-sp-4);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
    border: 1px solid var(--as-bd-2);
    color: var(--as-tx-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
html body.as-dash-open .as-lightbox-close { right: var(--as-sp-4); }
html body.as-dash-open .as-lightbox-dl { right: calc(var(--as-sp-4) + 52px); }
html body.as-dash-open .as-lightbox-close:hover,
html body.as-dash-open .as-lightbox-dl:hover {
    background: var(--as-bg-2);
    border-color: var(--as-ac);
}

/* ─── 21. TOAST ────────────────────────────────────────────────────────── */
html body.as-dash-open .as-toast-host {
    position: fixed;
    bottom: var(--as-sp-5);
    right: var(--as-sp-5);
    z-index: var(--as-z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--as-sp-2);
    pointer-events: none;
    max-width: 420px;
}
html body.as-dash-open .as-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: var(--as-sp-2);
    padding: var(--as-sp-3) var(--as-sp-4);
    background: var(--as-bg-2);
    border: 1px solid var(--as-bd-2);
    border-radius: var(--as-r-md);
    box-shadow: var(--as-sh-3);
    color: var(--as-tx-1);
    font-size: var(--as-fs-md);
    transition: opacity var(--as-d-2) var(--as-ez), transform var(--as-d-2) var(--as-ez);
}
html body.as-dash-open .as-toast-in {
    animation: as-toast-in var(--as-d-2) var(--as-ez-out);
}
html body.as-dash-open .as-toast-out {
    opacity: 0;
    transform: translateX(20px);
}
html body.as-dash-open .as-toast.as-toast-ok    { border-left: 3px solid var(--as-ok); }
html body.as-dash-open .as-toast.as-toast-err   { border-left: 3px solid var(--as-err); }
html body.as-dash-open .as-toast.as-toast-info  { border-left: 3px solid var(--as-info); }
html body.as-dash-open .as-toast.as-toast-warn  { border-left: 3px solid var(--as-warn); }
html body.as-dash-open .as-toast-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
html body.as-dash-open .as-toast-msg { flex: 1; min-width: 0; }
@keyframes as-toast-in {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ─── 22. EMPTY / ERROR STATES ────────────────────────────────────────── */
html body.as-dash-open .as-overlay .as-empty {
    padding: var(--as-sp-8) var(--as-sp-5);
    text-align: center;
    color: var(--as-tx-3);
    font-size: var(--as-fs-md);
    line-height: 1.5;
}
html body.as-dash-open .as-overlay .as-empty-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--as-sp-3);
    padding: var(--as-sp-9) var(--as-sp-5);
    text-align: center;
}
html body.as-dash-open .as-overlay .as-empty-hero-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--as-bg-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--as-tx-3);
    margin-bottom: var(--as-sp-2);
}
html body.as-dash-open .as-overlay .as-empty-hero-title {
    font-size: var(--as-fs-2xl);
    font-weight: 600;
    color: var(--as-tx-1);
}
html body.as-dash-open .as-overlay .as-empty-hero-desc {
    color: var(--as-tx-3);
    font-size: var(--as-fs-md);
    max-width: 480px;
    line-height: 1.6;
}

html body.as-dash-open .as-overlay .as-error {
    color: var(--as-err);
    background: var(--as-err-soft);
    border: 1px solid rgba(255,91,91,0.32);
    border-radius: var(--as-r-md);
    padding: var(--as-sp-3) var(--as-sp-4);
    font-size: var(--as-fs-md);
}
html body.as-dash-open .as-overlay .as-error-inline {
    color: var(--as-err);
    font-size: var(--as-fs-sm);
}
html body.as-dash-open .as-overlay .as-ok-inline {
    color: var(--as-ok);
    font-size: var(--as-fs-sm);
}
html body.as-dash-open .as-overlay .as-dim {
    color: var(--as-tx-3);
}

/* ─── 23. WELCOME OVERLAY (onboarding Davide) ─────────────────────────── */
html body.as-dash-open .as-welcome-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--as-z-modal);
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--as-sp-5);
}
html body.as-dash-open .as-welcome-panel {
    width: 100%;
    max-width: 520px;
    background: linear-gradient(180deg, var(--as-bg-2), var(--as-bg-1));
    border: 1px solid var(--as-bd-2);
    border-radius: var(--as-r-xl);
    box-shadow: var(--as-sh-4);
    padding: var(--as-sp-7);
    text-align: center;
    animation: as-pop-in var(--as-d-3) var(--as-ez-out);
}
html body.as-dash-open .as-welcome-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--as-sp-4);
    border-radius: 50%;
    background: var(--as-ac-t10);
    color: var(--as-ac);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
html body.as-dash-open .as-welcome-title {
    font-size: var(--as-fs-3xl);
    font-weight: 700;
    color: var(--as-tx-1);
    margin: 0 0 var(--as-sp-3);
}
html body.as-dash-open .as-welcome-body {
    color: var(--as-tx-2);
    font-size: var(--as-fs-lg);
    line-height: 1.6;
    margin-bottom: var(--as-sp-5);
}
html body.as-dash-open .as-welcome-actions {
    display: flex;
    justify-content: center;
    gap: var(--as-sp-2);
    flex-wrap: wrap;
}
html body.as-dash-open .as-welcome-close {
    position: absolute;
    top: var(--as-sp-3);
    right: var(--as-sp-3);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--as-bg-3);
    color: var(--as-tx-2);
    border: 1px solid var(--as-bd-1);
}
html body.as-dash-open .as-welcome-dots {
    display: flex;
    justify-content: center;
    gap: var(--as-sp-1);
    margin-top: var(--as-sp-4);
}
html body.as-dash-open .as-welcome-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--as-bd-2);
    transition: background var(--as-d-1);
}
html body.as-dash-open .as-welcome-dot.is-active {
    background: var(--as-ac);
}

/* ─── 24. SECTION TITLES (sec-title generico) ─────────────────────────── */
html body.as-dash-open .as-overlay .as-sec-title {
    font-size: var(--as-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--as-tx-3);
    margin: 0 0 var(--as-sp-2);
}

/* ─── 25. ACCENT/COLORS UTILITY ───────────────────────────────────────── */
html body.as-dash-open .as-overlay .as-accent { color: var(--as-ac); }
html body.as-dash-open .as-overlay .as-mini { font-size: var(--as-fs-xs); color: var(--as-tx-3); }
html body.as-dash-open .as-overlay .as-mini-ok { color: var(--as-ok); }
html body.as-dash-open .as-overlay .as-mini-red { color: var(--as-err); }
html body.as-dash-open .as-overlay .as-link {
    color: var(--as-ac);
    text-decoration: none;
}
html body.as-dash-open .as-overlay .as-link:hover { text-decoration: underline; }
html body.as-dash-open .as-overlay .as-border {
    border: 1px solid var(--as-bd-1);
    border-radius: var(--as-r-md);
}
html body.as-dash-open .as-overlay .as-pad { padding: var(--as-sp-4); }

/* ═══════════════════════════════════════════════════════════════════════
 * MODULO 5 — TAB SPECIFICI
 *  5A. XML Tab (lista ordini) + analytics + editor full-panel
 *  5B. Ingest Tab (drag & drop email)
 *  5C. DB Tab (anagrafica clienti/prodotti/ceramiche/ricordini)
 *  5D. Reports Tab (segnalazioni)
 *  5E. Mail Tab (lista email + reply)
 *  5F. Manual Tab (creazione ordini manuali)
 *  5G. Bot Tab (run log)
 *  5H. Logs Tab (frontend errors console)
 *  5I. Coming Soon Tab (placeholder fornitori/magazzino/ecc.)
 *  5J. Theme Manager (modale picker)
 * ═══════════════════════════════════════════════════════════════════════ */

/* ─── 5A. XML TAB & EDITOR ─────────────────────────────────────────────── */
html body.as-dash-open .as-overlay .as-xml-tab {
    display: flex;
    flex-direction: column;
    gap: var(--as-sp-3);
}
html body.as-dash-open .as-overlay .as-analytics {
    border: 1px solid var(--as-bd-1);
    border-radius: var(--as-r-lg);
    background: var(--as-bg-2);
    overflow: hidden;
}
html body.as-dash-open .as-overlay .as-analytics-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--as-sp-2);
    padding: var(--as-sp-3) var(--as-sp-4);
    background: transparent;
    color: var(--as-tx-1);
    font-weight: 600;
    font-size: var(--as-fs-md);
    text-align: left;
    cursor: pointer;
    transition: background var(--as-d-1);
}
html body.as-dash-open .as-overlay .as-analytics-toggle:hover { background: var(--as-bg-3); }
html body.as-dash-open .as-overlay .as-analytics.as-analytics-open .as-analytics-toggle {
    border-bottom: 1px solid var(--as-bd-1);
}
html body.as-dash-open .as-overlay .as-analytics-body {
    padding: var(--as-sp-4);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--as-sp-3);
}
html body.as-dash-open .as-overlay .as-analytics-cols {
    display: flex;
    gap: var(--as-sp-3);
    flex-wrap: wrap;
}
html body.as-dash-open .as-overlay .as-analytics-col {
    flex: 1;
    min-width: 160px;
    padding: var(--as-sp-3);
    background: var(--as-bg-3);
    border-radius: var(--as-r-md);
}
html body.as-dash-open .as-overlay .as-analytic-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: var(--as-fs-sm);
    color: var(--as-tx-2);
}
html body.as-dash-open .as-overlay .as-analytic-count {
    font-weight: 600;
    color: var(--as-tx-1);
}
html body.as-dash-open .as-overlay .as-bar {
    position: relative;
    height: 6px;
    border-radius: var(--as-r-round);
    background: var(--as-bg-3);
    overflow: hidden;
    margin-top: 6px;
}
html body.as-dash-open .as-overlay .as-bar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--as-ac);
    border-radius: var(--as-r-round);
    transition: width var(--as-d-3) var(--as-ez);
}
html body.as-dash-open .as-overlay .as-bar-label {
    font-size: var(--as-fs-xs);
    color: var(--as-tx-3);
}

/* Editor full-panel (apertura ordine) */
html body.as-dash-open .as-editor-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--as-z-modal);
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: stretch;
    justify-content: center;
    animation: as-fade-in var(--as-d-2) var(--as-ez-out);
}
html body.as-dash-open .as-editor-fullpanel {
    width: 100%;
    max-width: 1480px;
    margin: var(--as-sp-5);
    background: var(--as-bg-1);
    border: 1px solid var(--as-bd-2);
    border-radius: var(--as-r-xl);
    box-shadow: var(--as-sh-4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: as-pop-in var(--as-d-3) var(--as-ez-out);
}
html body.as-dash-open .as-editor-topbar,
html body.as-dash-open .as-editor-head {
    display: flex;
    align-items: center;
    gap: var(--as-sp-3);
    padding: var(--as-sp-3) var(--as-sp-5);
    border-bottom: 1px solid var(--as-bd-1);
    background: var(--as-bg-2);
    flex-shrink: 0;
}
html body.as-dash-open .as-editor-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
html body.as-dash-open .as-editor-title-num {
    font-size: var(--as-fs-xs);
    color: var(--as-tx-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
html body.as-dash-open .as-editor-title-cli {
    font-size: var(--as-fs-xl);
    font-weight: 600;
    color: var(--as-tx-1);
}
html body.as-dash-open .as-editor-title-sub,
html body.as-dash-open .as-editor-title-lbl {
    font-size: var(--as-fs-sm);
    color: var(--as-tx-3);
}
html body.as-dash-open .as-editor-actions {
    display: flex;
    align-items: center;
    gap: var(--as-sp-2);
    flex-shrink: 0;
}
html body.as-dash-open .as-editor-body,
html body.as-dash-open .as-editor-scroll {
    flex: 1;
    overflow-y: auto;
    padding: var(--as-sp-5);
}
html body.as-dash-open .as-editor-foot {
    display: flex;
    align-items: center;
    gap: var(--as-sp-3);
    padding: var(--as-sp-3) var(--as-sp-5);
    border-top: 1px solid var(--as-bd-1);
    background: var(--as-bg-2);
    flex-shrink: 0;
}
html body.as-dash-open .as-editor-foot-info {
    flex: 1;
    color: var(--as-tx-3);
    font-size: var(--as-fs-sm);
}
html body.as-dash-open .as-editor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--as-sp-3);
}
html body.as-dash-open .as-editor-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--as-sp-3);
    padding: var(--as-sp-9);
    color: var(--as-tx-3);
}
html body.as-dash-open .as-editor-error {
    background: var(--as-err-soft);
    border: 1px solid rgba(255,91,91,0.32);
    border-radius: var(--as-r-md);
    padding: var(--as-sp-4);
    color: var(--as-err);
    margin-bottom: var(--as-sp-3);
}
html body.as-dash-open .as-editor-dirty,
html body.as-dash-open .as-editor-edited {
    color: var(--as-warn);
    font-size: var(--as-fs-sm);
    font-weight: 500;
}
html body.as-dash-open .as-editor-panel {
    background: var(--as-bg-2);
    border: 1px solid var(--as-bd-1);
    border-radius: var(--as-r-md);
    padding: var(--as-sp-4);
    margin-bottom: var(--as-sp-3);
}

/* Editor sub-tabs (Editor / Email / Foto / AI) */
html body.as-dash-open .as-ed-tabs {
    display: flex;
    gap: var(--as-sp-1);
    border-bottom: 1px solid var(--as-bd-1);
    margin-bottom: var(--as-sp-4);
}
html body.as-dash-open .as-ed-tab {
    padding: var(--as-sp-2) var(--as-sp-3);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--as-tx-3);
    font-size: var(--as-fs-md);
    font-weight: 500;
    cursor: pointer;
    transition: color var(--as-d-1), border-color var(--as-d-1);
}
html body.as-dash-open .as-ed-tab:hover { color: var(--as-tx-1); }
html body.as-dash-open .as-ed-tab.as-ed-tab-on {
    color: var(--as-ac);
    border-bottom-color: var(--as-ac);
}

/* Editor row righe prodotti */
html body.as-dash-open .as-ed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--as-sp-3);
}
html body.as-dash-open .as-ed-rows-wrap {
    border: 1px solid var(--as-bd-1);
    border-radius: var(--as-r-md);
    background: var(--as-bg-2);
    overflow: hidden;
}
html body.as-dash-open .as-ed-rows {
    display: flex;
    flex-direction: column;
}
html body.as-dash-open .as-ed-row-ac {
    display: grid;
    grid-template-columns: 56px 100px 1fr 100px 80px 100px;
    gap: var(--as-sp-2);
    align-items: center;
    padding: var(--as-sp-3);
    border-bottom: 1px solid var(--as-bd-0);
}
html body.as-dash-open .as-ed-row-ac:last-child { border-bottom: none; }
html body.as-dash-open .as-ed-row-n {
    font-family: var(--as-font-mono);
    font-size: var(--as-fs-sm);
    color: var(--as-tx-3);
    text-align: center;
}
html body.as-dash-open .as-ed-row-tot,
html body.as-dash-open .as-ed-row-disc,
html body.as-dash-open .as-ed-row-stock,
html body.as-dash-open .as-ed-row-commission {
    font-family: var(--as-font-mono);
    text-align: right;
    color: var(--as-tx-1);
}
html body.as-dash-open .as-ed-row-notes,
html body.as-dash-open .as-ed-row-notes-r {
    grid-column: 1 / -1;
    margin-top: var(--as-sp-1);
    color: var(--as-tx-3);
    font-size: var(--as-fs-sm);
}
html body.as-dash-open .as-ed-row-code-cell {
    font-family: var(--as-font-mono);
    font-size: var(--as-fs-sm);
}
html body.as-dash-open .as-ed-totals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--as-sp-3);
    padding: var(--as-sp-4);
    background: var(--as-bg-2);
    border: 1px solid var(--as-bd-1);
    border-radius: var(--as-r-md);
    margin-top: var(--as-sp-3);
}
html body.as-dash-open .as-ed-totals-sec {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
html body.as-dash-open .as-ed-tot-box {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
html body.as-dash-open .as-ed-tot-grand {
    grid-column: -2 / -1;
    padding: var(--as-sp-2) var(--as-sp-3);
    background: var(--as-ac-t10);
    border: 1px solid var(--as-ac-t40);
    border-radius: var(--as-r-md);
    text-align: right;
    font-size: var(--as-fs-xl);
    font-weight: 700;
    color: var(--as-ac);
}
html body.as-dash-open .as-ed-tot-hint {
    font-size: var(--as-fs-xs);
    color: var(--as-tx-3);
}
html body.as-dash-open .as-ed-sec {
    margin-bottom: var(--as-sp-5);
}
html body.as-dash-open .as-ed-sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--as-sp-3);
}
html body.as-dash-open .as-ed-sec-hint {
    color: var(--as-tx-3);
    font-size: var(--as-fs-sm);
}
html body.as-dash-open .as-ed-empty {
    text-align: center;
    padding: var(--as-sp-7);
    color: var(--as-tx-3);
}

/* Email side panel del editor */
html body.as-dash-open .as-ed-emails {
    display: flex;
    flex-direction: column;
    gap: var(--as-sp-3);
}
html body.as-dash-open .as-ed-email {
    background: var(--as-bg-2);
    border: 1px solid var(--as-bd-1);
    border-radius: var(--as-r-md);
    padding: var(--as-sp-4);
}
html body.as-dash-open .as-ed-email-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: var(--as-sp-3);
    padding-bottom: var(--as-sp-2);
    border-bottom: 1px solid var(--as-bd-1);
}
html body.as-dash-open .as-ed-email-from {
    font-weight: 600;
    color: var(--as-tx-1);
}
html body.as-dash-open .as-ed-email-subj { color: var(--as-tx-2); }
html body.as-dash-open .as-ed-email-date {
    font-size: var(--as-fs-xs);
    color: var(--as-tx-3);
}
html body.as-dash-open .as-ed-email-body,
html body.as-dash-open .as-ed-email-text {
    font-size: var(--as-fs-md);
    color: var(--as-tx-2);
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}
html body.as-dash-open .as-ed-email-sum {
    color: var(--as-tx-3);
    font-style: italic;
    margin-bottom: var(--as-sp-2);
}
html body.as-dash-open .as-ed-email-empty,
html body.as-dash-open .as-ed-email-err {
    text-align: center;
    padding: var(--as-sp-6);
    color: var(--as-tx-3);
}

/* Overview ordine — sezione di riepilogo prima dell'editing */
html body.as-dash-open .as-overview {
    display: flex;
    flex-direction: column;
    gap: var(--as-sp-4);
}
html body.as-dash-open .as-ov-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--as-sp-3);
    padding: var(--as-sp-4);
    background: var(--as-bg-2);
    border: 1px solid var(--as-bd-1);
    border-radius: var(--as-r-md);
}
html body.as-dash-open .as-ov-sum-col,
html body.as-dash-open .as-ov-sum-col-tot {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
html body.as-dash-open .as-ov-sum-lbl {
    font-size: var(--as-fs-xs);
    color: var(--as-tx-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
html body.as-dash-open .as-ov-sum-big,
html body.as-dash-open .as-ov-sum-tot {
    font-size: var(--as-fs-xl);
    font-weight: 600;
    color: var(--as-tx-1);
    font-family: var(--as-font-mono);
    font-variant-numeric: tabular-nums;
}
html body.as-dash-open .as-ov-sum-name { font-weight: 600; color: var(--as-tx-1); }
html body.as-dash-open .as-ov-sum-num,
html body.as-dash-open .as-ov-sum-rif,
html body.as-dash-open .as-ov-sum-prod,
html body.as-dash-open .as-ov-sum-sez,
html body.as-dash-open .as-ov-sum-sub {
    color: var(--as-tx-2);
}
html body.as-dash-open .as-ov-sum-code {
    font-family: var(--as-font-mono);
    font-size: var(--as-fs-sm);
    color: var(--as-tx-3);
}
html body.as-dash-open .as-ov-sum-chip {
    display: inline-flex;
    padding: 2px 6px;
    border-radius: var(--as-r-sm);
    background: var(--as-ac-t10);
    color: var(--as-ac);
    font-size: var(--as-fs-xs);
}

html body.as-dash-open .as-ov-step {
    background: var(--as-bg-2);
    border: 1px solid var(--as-bd-1);
    border-radius: var(--as-r-md);
    overflow: hidden;
}
html body.as-dash-open .as-ov-step-head {
    display: flex;
    align-items: center;
    gap: var(--as-sp-2);
    padding: var(--as-sp-3) var(--as-sp-4);
    border-bottom: 1px solid var(--as-bd-1);
    background: var(--as-bg-3);
}
html body.as-dash-open .as-ov-step-n {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--as-ac);
    color: var(--as-tx-on-ac);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--as-fs-sm);
    font-weight: 700;
}
html body.as-dash-open .as-ov-step-title {
    font-weight: 600;
    color: var(--as-tx-1);
}
html body.as-dash-open .as-ov-step-badge {
    margin-left: auto;
}
html body.as-dash-open .as-ov-step-body { padding: var(--as-sp-4); }
html body.as-dash-open .as-ov-empty {
    text-align: center;
    padding: var(--as-sp-6);
    color: var(--as-tx-3);
}
html body.as-dash-open .as-ov-instr {
    background: var(--as-info-soft);
    border-left: 3px solid var(--as-info);
    padding: var(--as-sp-3);
    border-radius: var(--as-r-sm);
    color: var(--as-tx-2);
    font-size: var(--as-fs-sm);
    line-height: 1.6;
}
html body.as-dash-open .as-ov-instr-src {
    font-size: var(--as-fs-xs);
    color: var(--as-tx-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}

html body.as-dash-open .as-ov-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--as-sp-2);
}
html body.as-dash-open .as-ov-photo {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--as-r-md);
    overflow: hidden;
    background: var(--as-bg-3);
    border: 1px solid var(--as-bd-1);
}
html body.as-dash-open .as-ov-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
html body.as-dash-open .as-ov-photo-ai { border: 2px solid var(--as-ac); }
html body.as-dash-open .as-ov-photo-name {
    position: absolute;
    inset: auto 0 0;
    padding: 4px 8px;
    background: linear-gradient(0deg, rgba(0,0,0,0.85), transparent);
    color: #fff;
    font-size: var(--as-fs-xs);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
html body.as-dash-open .as-ov-photo-dl {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

html body.as-dash-open .as-ov-ai {
    background: var(--as-bg-2);
    border: 1px solid var(--as-bd-1);
    border-radius: var(--as-r-md);
    padding: var(--as-sp-4);
}
html body.as-dash-open .as-ov-ai-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--as-sp-2);
}
html body.as-dash-open .as-ov-ai-busy {
    color: var(--as-warn);
    font-size: var(--as-fs-sm);
    font-weight: 500;
}
html body.as-dash-open .as-ov-ai-hint {
    color: var(--as-tx-3);
    font-size: var(--as-fs-sm);
}
html body.as-dash-open .as-ov-ai-instr {
    background: var(--as-bg-3);
    padding: var(--as-sp-2);
    border-radius: var(--as-r-sm);
    margin-bottom: var(--as-sp-3);
    color: var(--as-tx-2);
    font-size: var(--as-fs-sm);
}
html body.as-dash-open .as-ov-ai-ops {
    display: flex;
    flex-direction: column;
    gap: var(--as-sp-2);
}
html body.as-dash-open .as-ov-ai-op {
    padding: var(--as-sp-3);
    background: var(--as-bg-3);
    border: 1px solid var(--as-bd-1);
    border-radius: var(--as-r-sm);
}
html body.as-dash-open .as-ov-ai-op-sel {
    border-color: var(--as-ac);
    background: var(--as-ac-t05);
}
html body.as-dash-open .as-ov-ai-op-lbl {
    font-weight: 500;
    color: var(--as-tx-1);
}
html body.as-dash-open .as-ov-ai-op-desc {
    font-size: var(--as-fs-sm);
    color: var(--as-tx-3);
    margin-top: 2px;
}
html body.as-dash-open .as-ov-ai-results,
html body.as-dash-open .as-ov-ai-results-lbl { margin-top: var(--as-sp-3); }
html body.as-dash-open .as-ov-email,
html body.as-dash-open .as-ov-email-head {
    background: var(--as-bg-2);
    border: 1px solid var(--as-bd-1);
    border-radius: var(--as-r-md);
    padding: var(--as-sp-3);
    margin-bottom: var(--as-sp-2);
}
html body.as-dash-open .as-ov-email-subj { font-weight: 600; color: var(--as-tx-1); }
html body.as-dash-open .as-ov-email-from { color: var(--as-tx-2); font-size: var(--as-fs-sm); }
html body.as-dash-open .as-ov-email-date { color: var(--as-tx-3); font-size: var(--as-fs-xs); }
html body.as-dash-open .as-ov-email-body { color: var(--as-tx-2); white-space: pre-wrap; }

/* preview griglia (foto + bozze) */
html body.as-dash-open .as-preview-panel,
html body.as-dash-open .as-preview-grid-panel {
    background: var(--as-bg-2);
    border: 1px solid var(--as-bd-1);
    border-radius: var(--as-r-md);
    padding: var(--as-sp-4);
}
html body.as-dash-open .as-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--as-sp-3);
}
html body.as-dash-open .as-preview-actions {
    display: flex;
    gap: var(--as-sp-2);
}

/* extracted blocks (allegati/risultati) */
html body.as-dash-open .as-extracted {
    background: var(--as-bg-2);
    border: 1px solid var(--as-bd-1);
    border-radius: var(--as-r-md);
    padding: var(--as-sp-3);
}
html body.as-dash-open .as-extracted-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--as-sp-2);
}
html body.as-dash-open .as-extracted-count {
    font-size: var(--as-fs-xs);
    color: var(--as-tx-3);
}

/* iframe (preview Danea XML) */
html body.as-dash-open .as-iframe,
html body.as-dash-open .as-grid-iframe {
    width: 100%;
    min-height: 400px;
    border: 1px solid var(--as-bd-1);
    border-radius: var(--as-r-md);
    background: #fff;
}
html body.as-dash-open .as-label-iframe {
    padding: var(--as-sp-2);
    background: var(--as-bg-3);
    border-radius: var(--as-r-sm);
    font-family: var(--as-font-mono);
    font-size: var(--as-fs-xs);
    color: var(--as-tx-3);
    margin-bottom: var(--as-sp-2);
}

/* ─── 5B. INGEST TAB (drag & drop email) ───────────────────────────────── */
html body.as-dash-open .as-overlay .as-ingest-tab {
    display: flex;
    flex-direction: column;
    gap: var(--as-sp-4);
}
html body.as-dash-open .as-overlay .as-dropzone,
html body.as-dash-open .as-overlay .as-db-drop-card {
    border: 2px dashed var(--as-bd-2);
    border-radius: var(--as-r-lg);
    padding: var(--as-sp-8);
    text-align: center;
    background: var(--as-bg-2);
    transition: border-color var(--as-d-1), background var(--as-d-1);
    cursor: pointer;
}
html body.as-dash-open .as-overlay .as-dropzone:hover,
html body.as-dash-open .as-overlay .as-db-drop-card:hover {
    border-color: var(--as-ac);
    background: var(--as-ac-t05);
}
html body.as-dash-open .as-overlay .as-dropzone-active,
html body.as-dash-open .as-overlay .as-db-drop-overlay {
    border-color: var(--as-ac);
    background: var(--as-ac-t10);
    box-shadow: inset 0 0 0 4px var(--as-ac-t10);
}
html body.as-dash-open .as-overlay .as-dropzone-busy {
    border-style: solid;
    pointer-events: none;
    opacity: 0.7;
}
html body.as-dash-open .as-overlay .as-dz-icon,
html body.as-dash-open .as-overlay .as-db-drop-ico {
    width: 48px;
    height: 48px;
    margin: 0 auto var(--as-sp-3);
    color: var(--as-ac);
}
html body.as-dash-open .as-overlay .as-dz-title {
    font-size: var(--as-fs-xl);
    font-weight: 600;
    color: var(--as-tx-1);
    margin-bottom: var(--as-sp-1);
}
html body.as-dash-open .as-overlay .as-dz-sub {
    color: var(--as-tx-3);
    font-size: var(--as-fs-md);
    margin-bottom: var(--as-sp-3);
}
html body.as-dash-open .as-overlay .as-dz-pick {
    /* eredita .as-btn-primary */
}
html body.as-dash-open .as-overlay .as-db-import-banner {
    padding: var(--as-sp-3) var(--as-sp-4);
    background: var(--as-info-soft);
    border-left: 3px solid var(--as-info);
    border-radius: var(--as-r-sm);
    color: var(--as-tx-2);
    font-size: var(--as-fs-sm);
}
html body.as-dash-open .as-overlay .as-db-import-busy { color: var(--as-warn); }
html body.as-dash-open .as-overlay .as-db-import-ok { color: var(--as-ok); }
html body.as-dash-open .as-overlay .as-db-import-x { color: var(--as-err); }
html body.as-dash-open .as-overlay .as-results,
html body.as-dash-open .as-overlay .as-result {
    display: flex;
    flex-direction: column;
    gap: var(--as-sp-2);
}
html body.as-dash-open .as-overlay .as-result {
    padding: var(--as-sp-3);
    background: var(--as-bg-2);
    border: 1px solid var(--as-bd-1);
    border-radius: var(--as-r-md);
}
html body.as-dash-open .as-overlay .as-result-head {
    display: flex;
    align-items: center;
    gap: var(--as-sp-2);
    margin-bottom: var(--as-sp-2);
}
html body.as-dash-open .as-overlay .as-result-file {
    font-family: var(--as-font-mono);
    font-size: var(--as-fs-sm);
    color: var(--as-tx-2);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
html body.as-dash-open .as-overlay .as-result-class {
    font-size: var(--as-fs-xs);
    color: var(--as-ac);
}
html body.as-dash-open .as-overlay .as-result-done .as-result-class {
    color: var(--as-ok);
}
html body.as-dash-open .as-overlay .as-result-actions {
    display: flex;
    gap: var(--as-sp-2);
}

/* ─── 5C. DB TAB (clienti/prodotti/ceramiche/ricordini) ────────────────── */
html body.as-dash-open .as-overlay .as-db-tab {
    display: flex;
    flex-direction: column;
    gap: var(--as-sp-3);
}

/* ─── 5D. REPORTS TAB (segnalazioni) ──────────────────────────────────── */
html body.as-dash-open .as-overlay .as-reports-tab {
    display: flex;
    flex-direction: column;
    gap: var(--as-sp-3);
}
html body.as-dash-open .as-overlay .as-reports-intro {
    display: flex;
    align-items: flex-start;
    gap: var(--as-sp-3);
    padding: var(--as-sp-4);
    background: var(--as-info-soft);
    border-left: 3px solid var(--as-info);
    border-radius: var(--as-r-md);
}
html body.as-dash-open .as-overlay .as-reports-intro-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(127,179,255,0.18);
    color: var(--as-info);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
html body.as-dash-open .as-overlay .as-reports-intro-text {
    flex: 1;
}
html body.as-dash-open .as-overlay .as-reports-intro-title {
    font-size: var(--as-fs-lg);
    font-weight: 600;
    color: var(--as-tx-1);
    margin-bottom: 2px;
}
html body.as-dash-open .as-overlay .as-reports-intro-desc {
    color: var(--as-tx-2);
    font-size: var(--as-fs-sm);
    line-height: 1.5;
}
html body.as-dash-open .as-overlay .as-reports-counts {
    display: flex;
    gap: var(--as-sp-2);
    flex-wrap: wrap;
    margin-bottom: var(--as-sp-3);
}
html body.as-dash-open .as-overlay .as-reports-chip {
    padding: 6px 12px;
    border-radius: var(--as-r-round);
    background: var(--as-bg-2);
    border: 1px solid var(--as-bd-1);
    color: var(--as-tx-2);
    font-size: var(--as-fs-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--as-d-1), border-color var(--as-d-1);
}
html body.as-dash-open .as-overlay .as-reports-chip:hover { background: var(--as-bg-3); }
html body.as-dash-open .as-overlay .as-reports-chip-waiting { color: var(--as-warn); border-color: rgba(240,185,65,0.3); }
html body.as-dash-open .as-overlay .as-reports-chip-review  { color: var(--as-info); border-color: rgba(127,179,255,0.3); }
html body.as-dash-open .as-overlay .as-reports-chip-done    { color: var(--as-ok); border-color: rgba(76,175,133,0.3); }

html body.as-dash-open .as-overlay .as-reports-list {
    display: flex;
    flex-direction: column;
    gap: var(--as-sp-2);
}
html body.as-dash-open .as-overlay .as-report-card {
    background: var(--as-bg-2);
    border: 1px solid var(--as-bd-1);
    border-radius: var(--as-r-md);
    overflow: hidden;
    transition: border-color var(--as-d-1);
}
html body.as-dash-open .as-overlay .as-report-card:hover { border-color: var(--as-bd-2); }
html body.as-dash-open .as-overlay .as-report-head {
    display: flex;
    align-items: center;
    gap: var(--as-sp-2);
    padding: var(--as-sp-3) var(--as-sp-4);
    cursor: pointer;
}
html body.as-dash-open .as-overlay .as-report-filename {
    font-family: var(--as-font-mono);
    font-size: var(--as-fs-sm);
    color: var(--as-tx-2);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html body.as-dash-open .as-overlay .as-report-title {
    font-weight: 500;
    color: var(--as-tx-1);
    flex: 1;
    min-width: 0;
}
html body.as-dash-open .as-overlay .as-report-badge {
    padding: 2px 8px;
    border-radius: var(--as-r-round);
    font-size: var(--as-fs-xs);
    font-weight: 600;
}
html body.as-dash-open .as-overlay .as-report-meta {
    color: var(--as-tx-3);
    font-size: var(--as-fs-xs);
}
html body.as-dash-open .as-overlay .as-report-detail {
    padding: var(--as-sp-4);
    border-top: 1px solid var(--as-bd-1);
    background: var(--as-bg-1);
}
html body.as-dash-open .as-overlay .as-report-section {
    margin-bottom: var(--as-sp-4);
}
html body.as-dash-open .as-overlay .as-report-section:last-child { margin-bottom: 0; }
html body.as-dash-open .as-overlay .as-report-section-title {
    font-size: var(--as-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--as-tx-3);
    margin-bottom: var(--as-sp-2);
}
html body.as-dash-open .as-overlay .as-report-issue {
    background: var(--as-bg-2);
    border-radius: var(--as-r-sm);
    padding: var(--as-sp-3);
    color: var(--as-tx-2);
    font-size: var(--as-fs-md);
    line-height: 1.6;
    white-space: pre-wrap;
}
html body.as-dash-open .as-overlay .as-report-issue-lbl {
    color: var(--as-tx-3);
    font-size: var(--as-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}
html body.as-dash-open .as-overlay .as-report-pre {
    margin: 0;
    padding: var(--as-sp-3);
    background: rgba(0,0,0,0.3);
    border-radius: var(--as-r-sm);
    font-family: var(--as-font-mono);
    font-size: var(--as-fs-xs);
    color: var(--as-tx-2);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 320px;
    overflow-y: auto;
}
html body.as-dash-open .as-overlay .as-report-actions {
    display: flex;
    gap: var(--as-sp-2);
    flex-wrap: wrap;
    margin-top: var(--as-sp-2);
}
html body.as-dash-open .as-overlay .as-report-spinner {
    color: var(--as-warn);
    font-size: var(--as-fs-sm);
}
html body.as-dash-open .as-overlay .as-report-inprogress {
    background: var(--as-warn-soft);
    border-left: 3px solid var(--as-warn);
    padding: var(--as-sp-2) var(--as-sp-3);
    border-radius: var(--as-r-sm);
    color: var(--as-tx-2);
    font-size: var(--as-fs-sm);
}
html body.as-dash-open .as-overlay .as-report-learning-box {
    background: var(--as-ok-soft);
    border-left: 3px solid var(--as-ok);
    padding: var(--as-sp-2) var(--as-sp-3);
    border-radius: var(--as-r-sm);
    color: var(--as-tx-2);
    font-size: var(--as-fs-sm);
}

/* ─── 5E. MAIL TAB ─────────────────────────────────────────────────────── */
html body.as-dash-open .as-overlay .as-mail-tab {
    display: flex;
    flex-direction: column;
    gap: var(--as-sp-3);
}
html body.as-dash-open .as-overlay .as-mail-views {
    display: flex;
    gap: var(--as-sp-1);
    border-bottom: 1px solid var(--as-bd-1);
    margin-bottom: var(--as-sp-3);
}
html body.as-dash-open .as-overlay .as-mail-view-btn {
    padding: var(--as-sp-2) var(--as-sp-3);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--as-tx-3);
    font-size: var(--as-fs-md);
    cursor: pointer;
    transition: color var(--as-d-1), border-color var(--as-d-1);
}
html body.as-dash-open .as-overlay .as-mail-view-btn:hover { color: var(--as-tx-1); }
html body.as-dash-open .as-overlay .as-mail-view-btn-on {
    color: var(--as-ac);
    border-bottom-color: var(--as-ac);
}
html body.as-dash-open .as-overlay .as-mail-list {
    display: flex;
    flex-direction: column;
    gap: var(--as-sp-1);
}
html body.as-dash-open .as-overlay .as-mail-row {
    display: flex;
    align-items: flex-start;
    gap: var(--as-sp-3);
    padding: var(--as-sp-3) var(--as-sp-4);
    background: var(--as-bg-2);
    border: 1px solid var(--as-bd-1);
    border-radius: var(--as-r-md);
    cursor: pointer;
    transition: border-color var(--as-d-1), background var(--as-d-1);
}
html body.as-dash-open .as-overlay .as-mail-row:hover {
    border-color: var(--as-bd-2);
    background: var(--as-bg-3);
}
html body.as-dash-open .as-overlay .as-mail-row-open {
    border-color: var(--as-ac);
    background: var(--as-ac-t05);
}
html body.as-dash-open .as-overlay .as-mail-head {
    display: flex;
    align-items: center;
    gap: var(--as-sp-2);
    flex-wrap: wrap;
}
html body.as-dash-open .as-overlay .as-mail-from {
    font-weight: 600;
    color: var(--as-tx-1);
}
html body.as-dash-open .as-overlay .as-mail-subj {
    color: var(--as-tx-2);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html body.as-dash-open .as-overlay .as-mail-date,
html body.as-dash-open .as-overlay .as-mail-meta {
    color: var(--as-tx-3);
    font-size: var(--as-fs-xs);
}
html body.as-dash-open .as-overlay .as-mail-meta-detail {
    color: var(--as-tx-2);
    font-size: var(--as-fs-sm);
}
html body.as-dash-open .as-overlay .as-mail-body,
html body.as-dash-open .as-overlay .as-mail-text {
    color: var(--as-tx-2);
    font-size: var(--as-fs-md);
    line-height: 1.6;
    white-space: pre-wrap;
    margin-top: var(--as-sp-2);
    padding-top: var(--as-sp-2);
    border-top: 1px solid var(--as-bd-1);
}
html body.as-dash-open .as-overlay .as-mail-todo {
    background: var(--as-warn-soft);
    border-left: 3px solid var(--as-warn);
    padding: var(--as-sp-2) var(--as-sp-3);
    border-radius: var(--as-r-sm);
    color: var(--as-tx-2);
    font-size: var(--as-fs-sm);
}
html body.as-dash-open .as-overlay .as-mail-spam {
    border-left: 3px solid var(--as-err);
    opacity: 0.65;
}
html body.as-dash-open .as-overlay .as-mail-foto {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--as-bg-3);
    flex-shrink: 0;
}
html body.as-dash-open .as-overlay .as-mail-link {
    color: var(--as-ac);
    text-decoration: none;
}
html body.as-dash-open .as-overlay .as-mail-link:hover { text-decoration: underline; }
html body.as-dash-open .as-overlay .as-mail-reply {
    margin-top: var(--as-sp-3);
    padding: var(--as-sp-3);
    background: var(--as-bg-1);
    border: 1px solid var(--as-bd-1);
    border-radius: var(--as-r-md);
}
html body.as-dash-open .as-overlay .as-mail-empty {
    padding: var(--as-sp-8) var(--as-sp-5);
    text-align: center;
}
html body.as-dash-open .as-overlay .as-mail-empty-title {
    font-size: var(--as-fs-xl);
    font-weight: 600;
    color: var(--as-tx-1);
    margin-bottom: var(--as-sp-2);
}
html body.as-dash-open .as-overlay .as-mail-empty-desc {
    color: var(--as-tx-3);
    font-size: var(--as-fs-md);
}

/* ─── 5F. MANUAL TAB (creazione ordini manuali) ───────────────────────── */
html body.as-dash-open .as-overlay .as-manual-tab {
    display: flex;
    flex-direction: column;
    gap: var(--as-sp-4);
}
html body.as-dash-open .as-overlay .as-manual-head {
    display: flex;
    align-items: center;
    gap: var(--as-sp-3);
    padding: var(--as-sp-4);
    background: var(--as-bg-2);
    border: 1px solid var(--as-bd-1);
    border-radius: var(--as-r-md);
}
html body.as-dash-open .as-overlay .as-manual-head-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--as-ac-t10);
    color: var(--as-ac);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
html body.as-dash-open .as-overlay .as-manual-head-title {
    font-size: var(--as-fs-xl);
    font-weight: 600;
    color: var(--as-tx-1);
}
html body.as-dash-open .as-overlay .as-manual-head-sub {
    color: var(--as-tx-3);
    font-size: var(--as-fs-sm);
}
html body.as-dash-open .as-overlay .as-manual-composer {
    background: var(--as-bg-2);
    border: 1px solid var(--as-bd-1);
    border-radius: var(--as-r-md);
    padding: var(--as-sp-4);
}
html body.as-dash-open .as-overlay .as-manual-composer-drop {
    border: 2px dashed var(--as-bd-2);
    border-radius: var(--as-r-md);
    padding: var(--as-sp-3);
    text-align: center;
    color: var(--as-tx-3);
    margin: var(--as-sp-3) 0;
    cursor: pointer;
}
html body.as-dash-open .as-overlay .as-manual-composer-drop:hover { border-color: var(--as-ac); }
html body.as-dash-open .as-overlay .as-manual-attach,
html body.as-dash-open .as-overlay .as-manual-files {
    display: flex;
    flex-wrap: wrap;
    gap: var(--as-sp-2);
}
html body.as-dash-open .as-overlay .as-manual-file {
    display: inline-flex;
    align-items: center;
    gap: var(--as-sp-1);
    padding: 4px 8px 4px 4px;
    background: var(--as-bg-3);
    border: 1px solid var(--as-bd-1);
    border-radius: var(--as-r-sm);
    font-size: var(--as-fs-sm);
    color: var(--as-tx-2);
}
html body.as-dash-open .as-overlay .as-manual-file-ico { display: inline-flex; }
html body.as-dash-open .as-overlay .as-manual-file-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body.as-dash-open .as-overlay .as-manual-file-size { color: var(--as-tx-3); font-size: var(--as-fs-xs); }
html body.as-dash-open .as-overlay .as-manual-file-x {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--as-bg-2);
    color: var(--as-tx-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
html body.as-dash-open .as-overlay .as-manual-file-x:hover {
    background: var(--as-err);
    color: #fff;
}
html body.as-dash-open .as-overlay .as-manual-actions {
    display: flex;
    gap: var(--as-sp-2);
    margin-top: var(--as-sp-3);
}
html body.as-dash-open .as-overlay .as-manual-flash {
    padding: var(--as-sp-2) var(--as-sp-3);
    border-radius: var(--as-r-sm);
    font-size: var(--as-fs-sm);
}
html body.as-dash-open .as-overlay .as-manual-flash-ok {
    background: var(--as-ok-soft);
    color: var(--as-ok);
    border-left: 3px solid var(--as-ok);
}
html body.as-dash-open .as-overlay .as-manual-flash-err {
    background: var(--as-err-soft);
    color: var(--as-err);
    border-left: 3px solid var(--as-err);
}
html body.as-dash-open .as-overlay .as-manual-hint {
    color: var(--as-tx-3);
    font-size: var(--as-fs-sm);
    margin-top: var(--as-sp-2);
}
html body.as-dash-open .as-overlay .as-manual-list,
html body.as-dash-open .as-overlay .as-manual-history {
    display: flex;
    flex-direction: column;
    gap: var(--as-sp-2);
}
html body.as-dash-open .as-overlay .as-manual-card {
    background: var(--as-bg-2);
    border: 1px solid var(--as-bd-1);
    border-radius: var(--as-r-md);
    overflow: hidden;
    transition: border-color var(--as-d-1);
}
html body.as-dash-open .as-overlay .as-manual-card:hover { border-color: var(--as-bd-2); }
html body.as-dash-open .as-overlay .as-manual-card-head {
    display: flex;
    align-items: center;
    gap: var(--as-sp-2);
    padding: var(--as-sp-3) var(--as-sp-4);
}
html body.as-dash-open .as-overlay .as-manual-card-id {
    font-family: var(--as-font-mono);
    font-size: var(--as-fs-sm);
    color: var(--as-tx-3);
}
html body.as-dash-open .as-overlay .as-manual-card-pill {
    padding: 2px 8px;
    border-radius: var(--as-r-round);
    font-size: var(--as-fs-xs);
    font-weight: 600;
    background: var(--as-bg-3);
    color: var(--as-tx-2);
}
html body.as-dash-open .as-overlay .as-manual-card-pill-ai {
    background: var(--as-ac-t10);
    color: var(--as-ac);
}
html body.as-dash-open .as-overlay .as-manual-card-snippet {
    color: var(--as-tx-2);
    font-size: var(--as-fs-sm);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html body.as-dash-open .as-overlay .as-manual-card-body {
    padding: var(--as-sp-4);
    border-top: 1px solid var(--as-bd-1);
}
html body.as-dash-open .as-overlay .as-manual-section {
    margin-bottom: var(--as-sp-3);
}
html body.as-dash-open .as-overlay .as-manual-section-row {
    display: flex;
    gap: var(--as-sp-3);
    margin-bottom: var(--as-sp-2);
}
html body.as-dash-open .as-overlay .as-manual-section-lbl {
    font-size: var(--as-fs-xs);
    color: var(--as-tx-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}
html body.as-dash-open .as-overlay .as-manual-text,
html body.as-dash-open .as-overlay .as-manual-pre {
    background: rgba(0,0,0,0.3);
    border-radius: var(--as-r-sm);
    padding: var(--as-sp-2) var(--as-sp-3);
    font-family: var(--as-font-mono);
    font-size: var(--as-fs-xs);
    color: var(--as-tx-2);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 240px;
    overflow-y: auto;
}
html body.as-dash-open .as-overlay .as-manual-mini {
    margin-top: var(--as-sp-2);
}
html body.as-dash-open .as-overlay .as-manual-mini-lbl {
    font-size: var(--as-fs-xs);
    color: var(--as-tx-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}
html body.as-dash-open .as-overlay .as-manual-mini-val { color: var(--as-tx-2); font-size: var(--as-fs-sm); }
html body.as-dash-open .as-overlay .as-manual-draft-thumb {
    max-width: 240px;
    border-radius: var(--as-r-md);
    border: 1px solid var(--as-bd-1);
    cursor: zoom-in;
}
html body.as-dash-open .as-overlay .as-manual-error {
    background: var(--as-err-soft);
    border-left: 3px solid var(--as-err);
    padding: var(--as-sp-2) var(--as-sp-3);
    border-radius: var(--as-r-sm);
    color: var(--as-err);
    font-size: var(--as-fs-sm);
}
html body.as-dash-open .as-overlay .as-manual-report {
    color: var(--as-tx-2);
    font-size: var(--as-fs-md);
    line-height: 1.6;
}
html body.as-dash-open .as-overlay .as-manual-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--as-tx-4);
    flex-shrink: 0;
}

/* ─── 5G. BOT TAB (run log) ────────────────────────────────────────────── */
html body.as-dash-open .as-overlay .as-bot-tab {
    display: flex;
    flex-direction: column;
    gap: var(--as-sp-3);
}
html body.as-dash-open .as-overlay .as-bot-runs {
    display: flex;
    flex-direction: column;
    gap: var(--as-sp-2);
}
html body.as-dash-open .as-overlay .as-run-card {
    background: var(--as-bg-2);
    border: 1px solid var(--as-bd-1);
    border-radius: var(--as-r-md);
    padding: var(--as-sp-3);
    transition: border-color var(--as-d-1);
}
html body.as-dash-open .as-overlay .as-run-card:hover { border-color: var(--as-bd-2); }
html body.as-dash-open .as-overlay .as-run-card.as-run-success { border-left: 3px solid var(--as-ok); }
html body.as-dash-open .as-overlay .as-run-card.as-run-error   { border-left: 3px solid var(--as-err); }
html body.as-dash-open .as-overlay .as-run-card.as-run-running { border-left: 3px solid var(--as-warn); }
html body.as-dash-open .as-overlay .as-run-head {
    display: flex;
    align-items: center;
    gap: var(--as-sp-2);
    margin-bottom: var(--as-sp-2);
}
html body.as-dash-open .as-overlay .as-run-status {
    font-size: var(--as-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--as-tx-2);
}
html body.as-dash-open .as-overlay .as-run-output {
    font-family: var(--as-font-mono);
    font-size: var(--as-fs-sm);
    color: var(--as-tx-2);
    background: rgba(0,0,0,0.25);
    padding: var(--as-sp-2);
    border-radius: var(--as-r-sm);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 200px;
    overflow-y: auto;
}

/* ─── 5H. LOGS TAB (frontend errors console) ──────────────────────────── */
html body.as-dash-open .as-overlay .as-logs-tab {
    display: flex;
    flex-direction: column;
    gap: var(--as-sp-3);
}
html body.as-dash-open .as-overlay .as-logs-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--as-sp-2);
}
html body.as-dash-open .as-overlay .as-logs-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--as-sp-3) var(--as-sp-4);
    background: var(--as-bg-2);
    border: 1px solid var(--as-bd-1);
    border-radius: var(--as-r-md);
}
html body.as-dash-open .as-overlay .as-logs-stat-n {
    font-size: var(--as-fs-3xl);
    font-weight: 700;
    color: var(--as-tx-1);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
html body.as-dash-open .as-overlay .as-logs-stat-l {
    font-size: var(--as-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--as-tx-3);
}
html body.as-dash-open .as-overlay .as-logs-stat-error    { border-color: rgba(255,91,91,0.3); }
html body.as-dash-open .as-overlay .as-logs-stat-error    .as-logs-stat-n { color: var(--as-err); }
html body.as-dash-open .as-overlay .as-logs-stat-warn     { border-color: rgba(240,185,65,0.3); }
html body.as-dash-open .as-overlay .as-logs-stat-warn     .as-logs-stat-n { color: var(--as-warn); }
html body.as-dash-open .as-overlay .as-logs-stat-info     { border-color: rgba(127,179,255,0.3); }
html body.as-dash-open .as-overlay .as-logs-stat-info     .as-logs-stat-n { color: var(--as-info); }
html body.as-dash-open .as-overlay .as-logs-stat-resolved .as-logs-stat-n { color: var(--as-ok); }

html body.as-dash-open .as-overlay .as-logs-filter { min-width: 130px; max-width: 180px; }
html body.as-dash-open .as-overlay .as-logs-search { flex: 1; min-width: 200px; }
html body.as-dash-open .as-overlay .as-logs-flash {
    background: var(--as-ac-t10);
    border-left: 3px solid var(--as-ac);
    padding: var(--as-sp-2) var(--as-sp-3);
    border-radius: var(--as-r-sm);
    color: var(--as-ac);
    font-size: var(--as-fs-sm);
}
html body.as-dash-open .as-overlay .as-logs-kindbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--as-sp-1);
    align-items: center;
    padding: var(--as-sp-1) 0;
}
html body.as-dash-open .as-overlay .as-logs-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--as-r-round);
    background: var(--as-bg-2);
    border: 1px solid var(--as-bd-1);
    color: var(--as-tx-2);
    font-size: var(--as-fs-xs);
    cursor: pointer;
    transition: background var(--as-d-1), border-color var(--as-d-1);
}
html body.as-dash-open .as-overlay .as-logs-chip:hover { border-color: var(--as-ac-t40); color: var(--as-tx-1); }
html body.as-dash-open .as-overlay .as-logs-chip.is-on {
    background: var(--as-ac-t10);
    border-color: var(--as-ac);
    color: var(--as-ac);
}
html body.as-dash-open .as-overlay .as-logs-chip-n { font-weight: 700; opacity: 0.85; }
html body.as-dash-open .as-overlay .as-logs-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--as-sp-2);
    padding: var(--as-sp-9) var(--as-sp-5);
    text-align: center;
}
html body.as-dash-open .as-overlay .as-logs-empty-ico {
    width: 56px;
    height: 56px;
    line-height: 56px;
    font-size: 28px;
    border-radius: 50%;
    background: var(--as-ok-soft);
    color: var(--as-ok);
}
html body.as-dash-open .as-overlay .as-logs-empty-title {
    font-size: var(--as-fs-xl);
    font-weight: 600;
    color: var(--as-tx-1);
}
html body.as-dash-open .as-overlay .as-logs-empty-sub {
    color: var(--as-tx-3);
    font-size: var(--as-fs-md);
    max-width: 480px;
    line-height: 1.5;
}
html body.as-dash-open .as-overlay .as-logs-list {
    display: flex;
    flex-direction: column;
    gap: var(--as-sp-1);
}

html body.as-dash-open .as-overlay .as-log-row {
    background: var(--as-bg-2);
    border: 1px solid var(--as-bd-1);
    border-radius: var(--as-r-md);
    overflow: hidden;
    transition: border-color var(--as-d-1), background var(--as-d-1);
}
html body.as-dash-open .as-overlay .as-log-row:hover { border-color: var(--as-bd-2); }
html body.as-dash-open .as-overlay .as-log-row.is-resolved { opacity: 0.55; }
html body.as-dash-open .as-overlay .as-log-row.is-open {
    border-color: var(--as-ac);
    background: var(--as-ac-t05);
}
html body.as-dash-open .as-overlay .as-log-error { border-left: 3px solid var(--as-err); }
html body.as-dash-open .as-overlay .as-log-warn  { border-left: 3px solid var(--as-warn); }
html body.as-dash-open .as-overlay .as-log-info  { border-left: 3px solid var(--as-info); }
html body.as-dash-open .as-overlay .as-log-debug { border-left: 3px solid var(--as-tx-4); }
html body.as-dash-open .as-overlay .as-log-head {
    display: flex;
    align-items: center;
    gap: var(--as-sp-2);
    padding: var(--as-sp-2) var(--as-sp-3);
    cursor: pointer;
    user-select: none;
}
html body.as-dash-open .as-overlay .as-log-level {
    font-size: var(--as-fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: var(--as-r-xs);
    background: var(--as-bg-3);
    color: var(--as-tx-2);
    flex-shrink: 0;
}
html body.as-dash-open .as-overlay .as-log-error .as-log-level { background: var(--as-err-soft); color: var(--as-err); }
html body.as-dash-open .as-overlay .as-log-warn  .as-log-level { background: var(--as-warn-soft); color: var(--as-warn); }
html body.as-dash-open .as-overlay .as-log-info  .as-log-level { background: var(--as-info-soft); color: var(--as-info); }
html body.as-dash-open .as-overlay .as-log-kind {
    font-size: var(--as-fs-xs);
    color: var(--as-tx-3);
    padding: 2px 6px;
    border-radius: var(--as-r-xs);
    border: 1px solid var(--as-bd-1);
    flex-shrink: 0;
}
html body.as-dash-open .as-overlay .as-log-msg {
    font-size: var(--as-fs-md);
    color: var(--as-tx-1);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
html body.as-dash-open .as-overlay .as-log-occ {
    font-size: var(--as-fs-xs);
    font-weight: 700;
    padding: 2px 6px;
    border-radius: var(--as-r-xs);
    background: var(--as-err-soft);
    color: var(--as-err);
    flex-shrink: 0;
}
html body.as-dash-open .as-overlay .as-log-ts {
    font-size: var(--as-fs-xs);
    color: var(--as-tx-3);
    flex-shrink: 0;
}
html body.as-dash-open .as-overlay .as-log-toggle {
    color: var(--as-tx-3);
    font-size: var(--as-fs-md);
    flex-shrink: 0;
    width: 14px;
    text-align: center;
}
html body.as-dash-open .as-overlay .as-log-body {
    padding: var(--as-sp-3) var(--as-sp-4) var(--as-sp-3);
    border-top: 1px solid var(--as-bd-1);
    background: rgba(0,0,0,0.25);
}
html body.as-dash-open .as-overlay .as-log-meta {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 4px var(--as-sp-3);
    margin: 0 0 var(--as-sp-2);
    font-size: var(--as-fs-sm);
}
html body.as-dash-open .as-overlay .as-log-meta dt {
    color: var(--as-tx-3);
    font-weight: 500;
}
html body.as-dash-open .as-overlay .as-log-meta dd {
    color: var(--as-tx-1);
    margin: 0;
    word-break: break-word;
}
html body.as-dash-open .as-overlay .as-log-mono {
    font-family: var(--as-font-mono);
    font-size: var(--as-fs-xs);
}
html body.as-dash-open .as-overlay .as-log-ua { font-size: var(--as-fs-xs); opacity: 0.75; }
html body.as-dash-open .as-overlay .as-log-section-title {
    font-size: var(--as-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--as-tx-3);
    margin: var(--as-sp-2) 0 4px;
}
html body.as-dash-open .as-overlay .as-log-pre {
    margin: 0 0 var(--as-sp-2);
    padding: var(--as-sp-2) var(--as-sp-3);
    background: rgba(0,0,0,0.4);
    border: 1px solid var(--as-bd-1);
    border-radius: var(--as-r-sm);
    font-family: var(--as-font-mono);
    font-size: var(--as-fs-xs);
    line-height: 1.5;
    color: var(--as-tx-2);
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 320px;
}
html body.as-dash-open .as-overlay .as-log-actions {
    display: flex;
    gap: var(--as-sp-2);
    margin-top: var(--as-sp-2);
    flex-wrap: wrap;
}

/* ─── 5I. COMING SOON TAB ──────────────────────────────────────────────── */
html body.as-dash-open .as-overlay .as-comingsoon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--as-sp-9) var(--as-sp-5);
}
html body.as-dash-open .as-overlay .as-comingsoon-card {
    max-width: 580px;
    text-align: center;
    background: var(--as-bg-2);
    border: 1px solid var(--as-bd-1);
    border-radius: var(--as-r-xl);
    padding: var(--as-sp-7);
}
html body.as-dash-open .as-overlay .as-comingsoon-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--as-sp-3);
    border-radius: 50%;
    background: var(--as-ac-t10);
    color: var(--as-ac);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
html body.as-dash-open .as-overlay .as-comingsoon-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--as-r-round);
    background: var(--as-ac-t10);
    color: var(--as-ac);
    font-size: var(--as-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--as-sp-3);
}
html body.as-dash-open .as-overlay .as-comingsoon-title {
    font-size: var(--as-fs-3xl);
    font-weight: 700;
    color: var(--as-tx-1);
    margin: 0 0 var(--as-sp-2);
}
html body.as-dash-open .as-overlay .as-comingsoon-desc {
    color: var(--as-tx-3);
    font-size: var(--as-fs-md);
    line-height: 1.6;
    margin-bottom: var(--as-sp-4);
}
html body.as-dash-open .as-overlay .as-comingsoon-feats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--as-sp-2);
    text-align: left;
}

/* ─── 5J. THEME MANAGER MODAL ──────────────────────────────────────────── */
html body.as-dash-open .as-tm-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--as-z-modal);
    background: rgba(0,0,0,0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: var(--as-sp-4);
    animation: as-fade-in var(--as-d-2) var(--as-ez-out);
}
html body.as-dash-open .as-tm-panel {
    width: 100%;
    max-width: 720px;
    background: var(--as-bg-1);
    border: 1px solid var(--as-bd-2);
    border-radius: var(--as-r-xl);
    box-shadow: var(--as-sh-4);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 32px);
    overflow: hidden;
    animation: as-pop-in var(--as-d-3) var(--as-ez-out);
}
html body.as-dash-open .as-tm-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--as-sp-3);
    padding: var(--as-sp-4) var(--as-sp-5);
    border-bottom: 1px solid var(--as-bd-1);
    flex-shrink: 0;
}
html body.as-dash-open .as-tm-heading > h2,
html body.as-dash-open .as-tm-heading > div {
    font-size: var(--as-fs-xl);
    font-weight: 600;
    color: var(--as-tx-1);
    margin: 0;
}
html body.as-dash-open .as-tm-sub {
    color: var(--as-tx-3);
    font-size: var(--as-fs-sm);
}
html body.as-dash-open .as-tm-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--as-bg-3);
    color: var(--as-tx-2);
    border: 1px solid var(--as-bd-1);
}
html body.as-dash-open .as-tm-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--as-sp-5);
}
html body.as-dash-open .as-tm-section {
    margin-bottom: var(--as-sp-5);
}
html body.as-dash-open .as-tm-section-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--as-sp-2);
}
html body.as-dash-open .as-tm-section-lbl {
    font-size: var(--as-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--as-tx-3);
}
html body.as-dash-open .as-tm-section-note {
    color: var(--as-tx-3);
    font-size: var(--as-fs-sm);
    margin-bottom: var(--as-sp-3);
}
html body.as-dash-open .as-tm-segm {
    display: inline-flex;
    background: var(--as-bg-2);
    border: 1px solid var(--as-bd-1);
    border-radius: var(--as-r-md);
    padding: 2px;
}
html body.as-dash-open .as-tm-segm-btn {
    padding: 6px 14px;
    background: transparent;
    border: none;
    border-radius: var(--as-r-sm);
    color: var(--as-tx-2);
    font-size: var(--as-fs-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--as-d-1), color var(--as-d-1);
}
html body.as-dash-open .as-tm-segm-btn-on {
    background: var(--as-ac);
    color: var(--as-tx-on-ac);
}
html body.as-dash-open .as-tm-mode-segm {
    /* eredita .as-tm-segm */
}
html body.as-dash-open .as-tm-mode-btn {
    /* eredita .as-tm-segm-btn */
    display: inline-flex;
    align-items: center;
    gap: var(--as-sp-1);
}
html body.as-dash-open .as-tm-mode-btn-on {
    background: var(--as-ac);
    color: var(--as-tx-on-ac);
}
html body.as-dash-open .as-tm-swatch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: var(--as-sp-2);
}
html body.as-dash-open .as-tm-swatch {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--as-r-md);
    border: 2px solid transparent;
    cursor: pointer;
    overflow: hidden;
    transition: transform var(--as-d-1), border-color var(--as-d-1);
}
html body.as-dash-open .as-tm-swatch:hover { transform: translateY(-2px); }
html body.as-dash-open .as-tm-swatch.as-tm-swatch-on { border-color: var(--as-ac); }
html body.as-dash-open .as-tm-swatch-fill { width: 100%; height: 100%; }
html body.as-dash-open .as-tm-swatch-check {
    position: absolute;
    inset: auto 4px 4px auto;
    width: 18px;
    height: 18px;
    background: var(--as-ac);
    color: var(--as-tx-on-ac);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
html body.as-dash-open .as-tm-swatch-cap {
    position: absolute;
    inset: auto 0 0;
    padding: 2px 4px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: var(--as-fs-xs);
    text-align: center;
    opacity: 0;
    transition: opacity var(--as-d-1);
}
html body.as-dash-open .as-tm-swatch:hover .as-tm-swatch-cap,
html body.as-dash-open .as-tm-swatch-cap-on { opacity: 1; }
html body.as-dash-open .as-tm-swatch-custom {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--as-r-md);
    border: 2px dashed var(--as-bd-2);
    background: var(--as-bg-2);
    color: var(--as-tx-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
}
html body.as-dash-open .as-tm-swatch-custom:hover { border-color: var(--as-ac); color: var(--as-ac); }
html body.as-dash-open .as-tm-custom-wrap {
    margin-top: var(--as-sp-3);
    padding: var(--as-sp-3);
    background: var(--as-bg-2);
    border: 1px solid var(--as-bd-1);
    border-radius: var(--as-r-md);
}
html body.as-dash-open .as-tm-custom-sliders {
    display: flex;
    flex-direction: column;
    gap: var(--as-sp-2);
}
html body.as-dash-open .as-tm-custom-hex {
    display: flex;
    align-items: center;
    gap: var(--as-sp-2);
}
html body.as-dash-open .as-tm-custom-hex-lbl {
    font-size: var(--as-fs-xs);
    color: var(--as-tx-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
html body.as-dash-open .as-tm-custom-hex-input {
    flex: 1;
    font-family: var(--as-font-mono);
}
html body.as-dash-open .as-tm-custom-preview {
    width: 32px;
    height: 32px;
    border-radius: var(--as-r-sm);
    border: 1px solid var(--as-bd-2);
}
html body.as-dash-open .as-tm-slider-row {
    display: grid;
    grid-template-columns: 60px 1fr 36px;
    align-items: center;
    gap: var(--as-sp-2);
}
html body.as-dash-open .as-tm-slider-lbl {
    font-size: var(--as-fs-xs);
    color: var(--as-tx-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
html body.as-dash-open .as-tm-slider-val {
    font-family: var(--as-font-mono);
    font-size: var(--as-fs-xs);
    color: var(--as-tx-2);
    text-align: right;
}
html body.as-dash-open .as-tm-slider {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 4px;
    background: var(--as-bg-3);
    border-radius: var(--as-r-round);
    cursor: pointer;
}
html body.as-dash-open .as-tm-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--as-ac);
    border: 2px solid var(--as-bg-1);
    cursor: pointer;
}
html body.as-dash-open .as-tm-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--as-ac);
    border: 2px solid var(--as-bg-1);
    cursor: pointer;
}
html body.as-dash-open .as-tm-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--as-sp-3);
    padding: var(--as-sp-3) var(--as-sp-5);
    border-top: 1px solid var(--as-bd-1);
    background: var(--as-bg-2);
    flex-shrink: 0;
}
html body.as-dash-open .as-tm-foot-info {
    color: var(--as-tx-3);
    font-size: var(--as-fs-xs);
}
html body.as-dash-open .as-tm-foot-actions {
    display: flex;
    gap: var(--as-sp-2);
}
html body.as-dash-open .as-tm-sync {
    display: inline-flex;
    align-items: center;
    gap: var(--as-sp-1);
    font-size: var(--as-fs-xs);
    color: var(--as-tx-3);
}
html body.as-dash-open .as-tm-sync-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--as-tx-4);
}
html body.as-dash-open .as-tm-sync.is-ok    .as-tm-sync-dot { background: var(--as-ok); }
html body.as-dash-open .as-tm-sync.is-err   .as-tm-sync-dot { background: var(--as-err); }
html body.as-dash-open .as-tm-sync.is-wait  .as-tm-sync-dot { background: var(--as-warn); animation: as-pulse 1.2s infinite; }
html body.as-dash-open .as-tm-user-presets {
    display: flex;
    flex-direction: column;
    gap: var(--as-sp-1);
}
html body.as-dash-open .as-tm-user-presets-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--as-sp-2);
}
html body.as-dash-open .as-tm-user-presets-title {
    font-size: var(--as-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--as-tx-3);
}
html body.as-dash-open .as-tm-user-presets-count { color: var(--as-tx-3); font-size: var(--as-fs-xs); }
html body.as-dash-open .as-tm-user-preset {
    display: flex;
    align-items: center;
    gap: var(--as-sp-2);
    padding: var(--as-sp-2);
    background: var(--as-bg-2);
    border: 1px solid var(--as-bd-1);
    border-radius: var(--as-r-md);
}
html body.as-dash-open .as-tm-user-preset-swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--as-bd-2);
    flex-shrink: 0;
}
html body.as-dash-open .as-tm-user-preset-name { flex: 1; min-width: 0; color: var(--as-tx-1); }
html body.as-dash-open .as-tm-user-preset-del {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: transparent;
    color: var(--as-tx-3);
}
html body.as-dash-open .as-tm-user-preset-del:hover { background: var(--as-err-soft); color: var(--as-err); }
html body.as-dash-open .as-tm-demo {
    margin-top: var(--as-sp-4);
    padding: var(--as-sp-4);
    background: var(--as-bg-2);
    border: 1px solid var(--as-bd-1);
    border-radius: var(--as-r-md);
}
html body.as-dash-open .as-tm-demo-head {
    display: flex;
    align-items: center;
    gap: var(--as-sp-2);
    margin-bottom: var(--as-sp-3);
}
html body.as-dash-open .as-tm-demo-name { font-weight: 600; color: var(--as-tx-1); }
html body.as-dash-open .as-tm-demo-sub { color: var(--as-tx-3); font-size: var(--as-fs-sm); }
html body.as-dash-open .as-tm-demo-num {
    font-family: var(--as-font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--as-ac);
}
html body.as-dash-open .as-tm-demo-pill {
    padding: 2px 8px;
    border-radius: var(--as-r-round);
    background: var(--as-ac-t10);
    color: var(--as-ac);
    font-size: var(--as-fs-xs);
    font-weight: 600;
}
html body.as-dash-open .as-tm-demo-actions {
    display: flex;
    gap: var(--as-sp-2);
    margin-top: var(--as-sp-2);
}
html body.as-dash-open .as-tm-demo-btn { /* eredita .as-btn */ }
html body.as-dash-open .as-tm-demo-btn-ghost { /* eredita .as-btn-ghost */ }
html body.as-dash-open .as-tm-demo-label { color: var(--as-tx-3); font-size: var(--as-fs-xs); }
html body.as-dash-open .as-tm-text-demo { color: var(--as-tx-2); font-size: var(--as-fs-md); line-height: 1.6; }

/* ═══════════════════════════════════════════════════════════════════════
 * MODULO 6 — TEMA (data-as-mode, data-as-accent, data-as-density, fontsize)
 * Override delle variabili tokens senza toccare le regole componenti.
 * Applicati su <body> (es. data-as-mode="light").
 * ═══════════════════════════════════════════════════════════════════════ */

/* ─── 6A. LIGHT MODE ──────────────────────────────────────────────────── */
html body[data-as-mode="light"] {
    --as-bg-0: #f7f5f0;
    --as-bg-1: #ffffff;
    --as-bg-2: #f3efe7;
    --as-bg-3: #ebe6db;
    --as-bg-4: #ddd6c8;

    --as-bd-0: rgba(20, 16, 10, 0.06);
    --as-bd-1: rgba(20, 16, 10, 0.10);
    --as-bd-2: rgba(20, 16, 10, 0.16);
    --as-bd-3: rgba(20, 16, 10, 0.24);

    --as-tx-1: #14100a;
    --as-tx-2: #3d362a;
    --as-tx-3: #6e6557;
    --as-tx-4: #9c9484;
    --as-tx-on-ac: #14100a;
    --as-tx-t10: rgba(20, 16, 10, 0.10);
    --as-tx-t24: rgba(20, 16, 10, 0.24);

    --as-sh-1: 0 1px 2px rgba(20, 16, 10, 0.08);
    --as-sh-2: 0 2px 8px rgba(20, 16, 10, 0.12);
    --as-sh-3: 0 8px 24px rgba(20, 16, 10, 0.18);
    --as-sh-4: 0 16px 48px rgba(20, 16, 10, 0.25);
}
html body[data-as-mode="light"] .as-overlay { background: rgba(20, 16, 10, 0.45); }
html body[data-as-mode="light"] .as-overlay.as-overlay-solo { background: var(--as-bg-0); }
html body[data-as-mode="light"] .as-table thead { background: var(--as-bg-2); }
html body[data-as-mode="light"] .as-log-pre,
html body[data-as-mode="light"] .as-manual-pre,
html body[data-as-mode="light"] .as-report-pre,
html body[data-as-mode="light"] .as-run-output,
html body[data-as-mode="light"] .as-manual-text {
    background: var(--as-bg-2);
}

/* ─── 6B. ACCENTS — preset 6 colori ───────────────────────────────────── */
html body[data-as-accent="gold"] {
    --as-ac:    #d4b989;
    --as-ac-hi: #ecd5a4;
    --as-ac-lo: #a38a5a;
    --as-ac-ink: #14100a;
    --as-ac-t05: rgba(212, 185, 137, 0.05);
    --as-ac-t06: rgba(212, 185, 137, 0.06);
    --as-ac-t10: rgba(212, 185, 137, 0.10);
    --as-ac-t16: rgba(212, 185, 137, 0.16);
    --as-ac-t24: rgba(212, 185, 137, 0.24);
    --as-ac-t40: rgba(212, 185, 137, 0.40);
}
html body[data-as-accent="platinum"] {
    --as-ac:    #c9cfd8;
    --as-ac-hi: #eaeef4;
    --as-ac-lo: #8e96a1;
    --as-ac-ink: #101218;
    --as-ac-t05: rgba(201, 207, 216, 0.05);
    --as-ac-t06: rgba(201, 207, 216, 0.06);
    --as-ac-t10: rgba(201, 207, 216, 0.10);
    --as-ac-t16: rgba(201, 207, 216, 0.16);
    --as-ac-t24: rgba(201, 207, 216, 0.24);
    --as-ac-t40: rgba(201, 207, 216, 0.40);
}
html body[data-as-accent="copper"] {
    --as-ac:    #d68a5d;
    --as-ac-hi: #efa982;
    --as-ac-lo: #a35f36;
    --as-ac-ink: #180c06;
    --as-ac-t05: rgba(214, 138, 93, 0.05);
    --as-ac-t06: rgba(214, 138, 93, 0.06);
    --as-ac-t10: rgba(214, 138, 93, 0.10);
    --as-ac-t16: rgba(214, 138, 93, 0.16);
    --as-ac-t24: rgba(214, 138, 93, 0.24);
    --as-ac-t40: rgba(214, 138, 93, 0.40);
}
html body[data-as-accent="indigo"] {
    --as-ac:    #8fa4ff;
    --as-ac-hi: #b0c0ff;
    --as-ac-lo: #5e75d4;
    --as-ac-ink: #0a0c1a;
    --as-ac-t05: rgba(143, 164, 255, 0.05);
    --as-ac-t06: rgba(143, 164, 255, 0.06);
    --as-ac-t10: rgba(143, 164, 255, 0.10);
    --as-ac-t16: rgba(143, 164, 255, 0.16);
    --as-ac-t24: rgba(143, 164, 255, 0.24);
    --as-ac-t40: rgba(143, 164, 255, 0.40);
}
html body[data-as-accent="sage"] {
    --as-ac:    #8abd9b;
    --as-ac-hi: #a8d4b8;
    --as-ac-lo: #5e8a6e;
    --as-ac-ink: #0a1410;
    --as-ac-t05: rgba(138, 189, 155, 0.05);
    --as-ac-t06: rgba(138, 189, 155, 0.06);
    --as-ac-t10: rgba(138, 189, 155, 0.10);
    --as-ac-t16: rgba(138, 189, 155, 0.16);
    --as-ac-t24: rgba(138, 189, 155, 0.24);
    --as-ac-t40: rgba(138, 189, 155, 0.40);
}
html body[data-as-accent="graphite"] {
    --as-ac:    #b0b4bb;
    --as-ac-hi: #d4d8df;
    --as-ac-lo: #7a7f87;
    --as-ac-ink: #0d0e11;
    --as-ac-t05: rgba(176, 180, 187, 0.05);
    --as-ac-t06: rgba(176, 180, 187, 0.06);
    --as-ac-t10: rgba(176, 180, 187, 0.10);
    --as-ac-t16: rgba(176, 180, 187, 0.16);
    --as-ac-t24: rgba(176, 180, 187, 0.24);
    --as-ac-t40: rgba(176, 180, 187, 0.40);
}
html body[data-as-accent="custom"] {
    /* Set inline via JS: --as-ac-custom + --as-ac-custom-ink */
    --as-ac: var(--as-ac-custom, #d4b989);
    --as-ac-ink: var(--as-ac-custom-ink, #14100a);
    /* Tints generati al volo via color-mix (browsers >= 2024) */
    --as-ac-t05: color-mix(in srgb, var(--as-ac) 5%, transparent);
    --as-ac-t06: color-mix(in srgb, var(--as-ac) 6%, transparent);
    --as-ac-t10: color-mix(in srgb, var(--as-ac) 10%, transparent);
    --as-ac-t16: color-mix(in srgb, var(--as-ac) 16%, transparent);
    --as-ac-t24: color-mix(in srgb, var(--as-ac) 24%, transparent);
    --as-ac-t40: color-mix(in srgb, var(--as-ac) 40%, transparent);
    --as-ac-hi: color-mix(in srgb, var(--as-ac) 75%, white);
    --as-ac-lo: color-mix(in srgb, var(--as-ac) 75%, black);
}

/* ─── 6C. DENSITY (compact / normal / spacious) ───────────────────────── */
html body[data-as-density="compact"] {
    --as-sp-3: 8px;
    --as-sp-4: 12px;
    --as-sp-5: 14px;
    --as-sp-6: 18px;
    --as-sp-7: 24px;
}
html body[data-as-density="compact"] .as-overlay .as-table th { padding: 6px 12px; }
html body[data-as-density="compact"] .as-overlay .as-table td { padding: 8px 12px; }
html body[data-as-density="compact"] .as-overlay .as-btn { height: 32px; padding: 6px 12px; }
html body[data-as-density="compact"] .as-overlay .as-input,
html body[data-as-density="compact"] .as-overlay .as-select { height: 32px; padding: 6px 10px; }

html body[data-as-density="spacious"] {
    --as-sp-3: 16px;
    --as-sp-4: 20px;
    --as-sp-5: 24px;
    --as-sp-6: 32px;
    --as-sp-7: 40px;
}
html body[data-as-density="spacious"] .as-overlay .as-table th { padding: 14px 18px; }
html body[data-as-density="spacious"] .as-overlay .as-table td { padding: 16px 18px; }
html body[data-as-density="spacious"] .as-overlay .as-btn { height: 40px; padding: 10px 18px; }
html body[data-as-density="spacious"] .as-overlay .as-input,
html body[data-as-density="spacious"] .as-overlay .as-select { height: 40px; padding: 10px 14px; }

/* ─── 6D. FONT SIZE (sm / md / lg) ────────────────────────────────────── */
html body[data-as-fontsize="sm"] {
    --as-fs-xs:  10px;
    --as-fs-sm:  11px;
    --as-fs-md:  12px;
    --as-fs-lg:  13px;
    --as-fs-xl:  14px;
    --as-fs-2xl: 16px;
    --as-fs-3xl: 20px;
    --as-fs-4xl: 24px;
}
html body[data-as-fontsize="lg"] {
    --as-fs-xs:  12px;
    --as-fs-sm:  13px;
    --as-fs-md:  15px;
    --as-fs-lg:  16px;
    --as-fs-xl:  18px;
    --as-fs-2xl: 20px;
    --as-fs-3xl: 24px;
    --as-fs-4xl: 32px;
}


/* ═══════════════════════════════════════════════════════════════════════
 * MODULO 7 — RESPONSIVE
 * ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
    html body.as-dash-open .as-overlay { padding: 0; }
    html body.as-dash-open .as-overlay .as-panel {
        max-width: none;
        border-radius: 0;
        border: none;
        box-shadow: none;
        height: 100dvh;
    }
    html body.as-dash-open .as-overlay .as-header {
        padding: var(--as-sp-3);
        flex-wrap: wrap;
        gap: var(--as-sp-2);
    }
    html body.as-dash-open .as-overlay .as-header-stats { display: none; }
    html body.as-dash-open .as-overlay .as-header-bot { display: none; }
    html body.as-dash-open .as-overlay .as-logo-img { width: 40px; height: 40px; }
    html body.as-dash-open .as-overlay .as-header-titletag { font-size: var(--as-fs-md); }
    html body.as-dash-open .as-overlay .as-nav-groups { display: none; }
    html body.as-dash-open .as-overlay .as-tabs { padding: 0 var(--as-sp-2); }
    html body.as-dash-open .as-overlay .as-tab { padding: var(--as-sp-2) var(--as-sp-3); font-size: var(--as-fs-sm); }
    html body.as-dash-open .as-overlay .as-body { padding: var(--as-sp-3); }
    html body.as-dash-open .as-overlay .as-bottom-nav { display: flex; }
    html body.as-dash-has-bottom-nav .as-overlay .as-body {
        padding-bottom: calc(var(--as-sp-9) + env(safe-area-inset-bottom, 0px));
    }
    /* Toolbar wrap meglio */
    html body.as-dash-open .as-overlay .as-toolbar { gap: var(--as-sp-2); padding: var(--as-sp-2) 0; }
    html body.as-dash-open .as-overlay .as-logs-filter,
    html body.as-dash-open .as-overlay .as-logs-search {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
        max-width: none;
    }
    /* Stats logs 2x2 invece di 1x4 */
    html body.as-dash-open .as-overlay .as-logs-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    html body.as-dash-open .as-overlay .as-logs-stat-n { font-size: var(--as-fs-2xl); }
    /* Editor full-panel → full-screen */
    html body.as-dash-open .as-editor-fullpanel {
        margin: 0;
        border-radius: 0;
        border: none;
        height: 100dvh;
    }
    html body.as-dash-open .as-editor-grid { grid-template-columns: 1fr; }
    html body.as-dash-open .as-ed-row-ac { grid-template-columns: 1fr 1fr; }
    html body.as-dash-open .as-ed-tot-grand { grid-column: 1 / -1; }
    /* Modali → full-screen */
    html body.as-dash-open .as-modal { padding: 0; }
    html body.as-dash-open .as-overlay .as-modal-panel,
    html body.as-dash-open .as-modal-panel {
        max-width: none;
        max-height: 100dvh;
        height: 100dvh;
        border-radius: 0;
        border: none;
    }
    html body.as-dash-open .as-tm-panel {
        max-width: none;
        max-height: 100dvh;
        border-radius: 0;
    }
    html body.as-dash-open .as-welcome-panel {
        max-width: none;
        margin: var(--as-sp-3);
    }
    /* Log row su mobile */
    html body.as-dash-open .as-overlay .as-log-msg { white-space: normal; }
    html body.as-dash-open .as-overlay .as-log-meta { grid-template-columns: 90px 1fr; }
    html body.as-dash-open .as-overlay .as-log-head { flex-wrap: wrap; }
    /* Toast in-line bottom (lascia spazio per bottom-nav) */
    html body.as-dash-open .as-toast-host {
        bottom: calc(var(--as-sp-9) + env(safe-area-inset-bottom, 0px));
        right: var(--as-sp-3);
        left: var(--as-sp-3);
        max-width: none;
    }
    /* Reports counts → grid 2 col */
    html body.as-dash-open .as-overlay .as-reports-counts {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    html body.as-dash-open .as-overlay .as-header-titletag { font-size: var(--as-fs-sm); }
    html body.as-dash-open .as-overlay .as-help-btn,
    html body.as-dash-open .as-overlay .as-close { width: 32px; height: 32px; }
    html body.as-dash-open .as-overlay .as-bottom-nav-item { font-size: 9px; }
    html body.as-dash-open .as-overlay .as-bottom-nav-item svg { width: 20px; height: 20px; }
}

/* Riduci animazioni se l'utente preferisce */
@media (prefers-reduced-motion: reduce) {
    html body.as-dash-open .as-overlay,
    html body.as-dash-open .as-overlay *,
    html body.as-dash-open .as-overlay *::before,
    html body.as-dash-open .as-overlay *::after {
        animation-duration: 0.01ms;
        transition-duration: 0.01ms;
    }
}

/* Print: stampa pulita */
@media print {
    html body.as-dash-open .as-overlay {
        position: static;
        padding: 0;
        background: white;
    }
    html body.as-dash-open .as-overlay .as-panel {
        box-shadow: none;
        border: none;
        max-width: none;
    }
    html body.as-dash-open .as-overlay .as-header,
    html body.as-dash-open .as-overlay .as-nav,
    html body.as-dash-open .as-overlay .as-bottom-nav,
    html body.as-dash-open .as-overlay .as-toolbar,
    html body.as-dash-open .as-toast-host,
    html body.as-dash-open .as-overlay .as-help-btn,
    html body.as-dash-open .as-overlay .as-close { display: none; }
    html body.as-dash-open .as-overlay,
    html body.as-dash-open .as-overlay * {
        background: white !important;
        color: black !important;
    }
    html body.as-dash-open .as-overlay .as-table th,
    html body.as-dash-open .as-overlay .as-table td {
        border: 1px solid #ddd;
        padding: 8px;
    }
}