:root {
    --led-surface: #121a23;
    --led-border: rgba(148, 163, 184, .18);
    --led-accent: #22d3ee;
}

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    background-image: radial-gradient(900px 480px at 15% -10%, rgba(34, 211, 238, .10), transparent 65%);
    background-repeat: no-repeat;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 .1rem var(--bs-body-bg), 0 0 0 .25rem var(--led-accent);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ---------- Layout: sidebar + contenuti ---------- */
.led-app {
    display: flex;
    min-height: 100vh;
}

.led-sidebar {
    width: 264px;
    flex-shrink: 0;
    background-color: var(--led-surface);
    border-right: 1px solid var(--led-border);
}

@media (min-width: 992px) {
    .led-sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
    }
}

.led-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: 1.15rem 1.25rem .85rem;
}

.led-brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-weight: 600;
    color: var(--bs-body-color);
    text-decoration: none;
}

.led-brand .bi-lightbulb {
    color: var(--led-accent);
    font-size: 1.2rem;
}

.led-sidebar-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0 1rem 1rem;
}

.led-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.led-nav-group {
    margin: 1.1rem .75rem .4rem;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.led-nav-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .75rem;
    border: 1px solid transparent;
    border-radius: .6rem;
    font-size: .93rem;
    color: var(--bs-secondary-color);
    text-decoration: none;
}

.led-nav-item:hover {
    color: var(--bs-body-color);
    background-color: rgba(255, 255, 255, .04);
}

.led-nav-item.active {
    color: #a5f3fc;
    background-color: rgba(34, 211, 238, .12);
    border-color: rgba(34, 211, 238, .35);
}

.led-sidebar-footer {
    padding-top: .85rem;
    border-top: 1px solid var(--led-border);
}

.led-main {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
}

.led-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem 1.25rem;
    background-color: rgba(15, 21, 28, .88);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--led-border);
}

.led-page-label {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.led-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    padding: 0;
    border: 1px solid var(--led-border);
    color: var(--bs-body-color);
}

.led-icon-btn:hover {
    border-color: rgba(34, 211, 238, .45);
    color: var(--led-accent);
}

.led-content {
    flex-grow: 1;
    padding: 1.5rem 1.25rem 2rem;
}

.led-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--led-border);
    font-size: .85rem;
}

.led-user-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .7rem;
    border: 1px solid var(--led-border);
    border-radius: .6rem;
    font-size: .88rem;
    color: var(--bs-body-color);
    text-decoration: none;
}

.led-user-chip:hover {
    border-color: rgba(34, 211, 238, .45);
    color: var(--led-accent);
}

/* ---------- Card statistiche ---------- */
.led-stat {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    background-color: var(--led-surface);
    border: 1px solid var(--led-border);
    border-radius: .85rem;
}

.led-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.7rem;
    height: 2.7rem;
    border: 1px solid rgba(34, 211, 238, .25);
    border-radius: .7rem;
    font-size: 1.15rem;
    color: var(--led-accent);
    background-color: rgba(34, 211, 238, .12);
}

.led-stat-label {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.led-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

/* ---------- Timeline attività ---------- */
.led-timeline-item {
    display: flex;
    gap: .75rem;
    padding: .7rem 0;
    border-bottom: 1px dashed var(--led-border);
}

.led-timeline-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.led-timeline-dot {
    flex-shrink: 0;
    width: .5rem;
    height: .5rem;
    margin-top: .35rem;
    border-radius: 50%;
    background-color: var(--led-accent);
}

.led-timeline-meta {
    font-size: .75rem;
    color: var(--bs-secondary-color);
}

.btn-led-primary {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 1px solid rgba(34, 211, 238, .45);
    background-color: rgba(34, 211, 238, .14);
    color: #67e8f9;
}

.btn-led-primary:hover {
    border-color: rgba(34, 211, 238, .7);
    background-color: rgba(34, 211, 238, .24);
    color: #a5f3fc;
}

.btn-led-ghost {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 1px solid var(--led-border);
    background-color: transparent;
    color: var(--bs-body-color);
}

.btn-led-ghost:hover {
    border-color: rgba(34, 211, 238, .45);
    color: var(--led-accent);
}

/* ---------- Hero home ---------- */
.led-hero {
    padding: 1.5rem;
    background-color: var(--led-surface);
    border: 1px solid var(--led-border);
    border-radius: .85rem;
    background-image: linear-gradient(120deg, rgba(34, 211, 238, .08), transparent 55%);
}

.led-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3.4rem;
    height: 3.4rem;
    border: 1px solid rgba(34, 211, 238, .35);
    border-radius: 1rem;
    font-size: 1.5rem;
    color: var(--led-accent);
    background-color: rgba(34, 211, 238, .12);
    box-shadow: 0 0 24px rgba(34, 211, 238, .18);
}

/* ---------- Autenticazione (login / registrazione) ---------- */
.led-auth-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.led-auth-main {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    padding: 2rem 1rem;
}

.led-auth-main .led-card {
    width: 100%;
    max-width: 26rem;
}

.led-auth-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--led-border);
    font-size: .85rem;
    text-align: center;
}

.led-auth .led-card {
    overflow: visible;
}

.led-brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(34, 211, 238, .35);
    border-radius: 1rem;
    font-size: 1.6rem;
    color: var(--led-accent);
    background-color: rgba(34, 211, 238, .12);
    box-shadow: 0 0 22px rgba(34, 211, 238, .18);
}

.led-input-group .input-group-text {
    border-color: var(--led-border);
    background-color: rgba(255, 255, 255, .03);
    color: var(--led-accent);
}

.led-input-group .form-control {
    border-color: var(--led-border);
    background-color: rgba(255, 255, 255, .02);
    color: var(--bs-body-color);
}

.led-input-group .form-control::placeholder {
    color: var(--bs-secondary-color);
}

/* ---------- Card ---------- */
.led-card {
    background-color: var(--led-surface);
    border: 1px solid var(--led-border);
    border-radius: .85rem;
    overflow: hidden;
}

.led-card-header {
    padding: .85rem 1.15rem;
    border-bottom: 1px solid var(--led-border);
    background-color: rgba(255, 255, 255, .02);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.led-card-body {
    padding: 1.15rem;
}

/* ---------- Tabelle ---------- */
.led-table-container {
    overflow-x: auto;
}

.led-table {
    width: 100%;
    margin: 0;
}

.led-table th {
    padding: .8rem 1.15rem;
    border-bottom: 1px solid var(--led-border);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.led-table td {
    padding: .9rem 1.15rem;
    border-bottom: 1px solid var(--led-border);
    vertical-align: middle;
}

.led-table tbody tr:hover {
    background-color: rgba(255, 255, 255, .025);
}

.led-table tbody tr:last-child td {
    border-bottom: 0;
}

/* ---------- Badge di stato ---------- */
.led-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .28rem .65rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    white-space: nowrap;
}

.led-badge-dot {
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background-color: currentColor;
}

.badge-quote {
    color: #fcd34d;
    background-color: rgba(252, 211, 77, .12);
    border-color: rgba(252, 211, 77, .3);
}

.badge-design {
    color: #7dd3fc;
    background-color: rgba(125, 211, 252, .12);
    border-color: rgba(125, 211, 252, .3);
}

.badge-production {
    color: #c4b5fd;
    background-color: rgba(196, 181, 253, .12);
    border-color: rgba(196, 181, 253, .3);
}

.badge-installation {
    color: #5eead4;
    background-color: rgba(94, 234, 212, .12);
    border-color: rgba(94, 234, 212, .3);
}

.badge-completed {
    color: #6ee7b7;
    background-color: rgba(110, 231, 183, .12);
    border-color: rgba(110, 231, 183, .3);
}

.badge-cancelled {
    color: #fca5a5;
    background-color: rgba(252, 165, 165, .12);
    border-color: rgba(252, 165, 165, .3);
}

.type-badge {
    display: inline-block;
    padding: .25rem .6rem;
    border: 1px solid var(--led-border);
    border-radius: .45rem;
    background-color: rgba(255, 255, 255, .05);
    font-size: .74rem;
    font-weight: 600;
}

/* ---------- Avanzamento ---------- */
.led-progress {
    height: .5rem;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, .08);
    overflow: hidden;
}

.led-progress-bar {
    height: 100%;
    border-radius: 999px;
    background-image: linear-gradient(90deg, #0891b2, var(--led-accent));
}

/* --------------------------------------------------------------------------
   Icone: variante locale (nessuna dipendenza esterna, funziona offline).
   I nomi delle classi restano quelli di Bootstrap Icons (bi-*), quindi per
   passare al pacchetto ufficiale basta rimuovere questo blocco e aggiungere
   il <link> a bootstrap-icons.css nel layout.
   -------------------------------------------------------------------------- */
[class^="bi-"], [class*=" bi-"] {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -.125em;
    background-color: currentColor;
    -webkit-mask-image: var(--led-icon);
    mask-image: var(--led-icon);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.bi-house {
    --led-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 7.6 8 2.4l6 5.2'/%3E%3Cpath d='M3.6 7v7h8.8V7'/%3E%3Cpath d='M6.6 14v-3.4h2.8V14'/%3E%3C/svg%3E");
}

.bi-grid-3x3-gap {
    --led-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.2'%3E%3Crect x='1.8' y='1.8' width='3.4' height='3.4' rx='.7'/%3E%3Crect x='6.3' y='1.8' width='3.4' height='3.4' rx='.7'/%3E%3Crect x='10.8' y='1.8' width='3.4' height='3.4' rx='.7'/%3E%3Crect x='1.8' y='6.3' width='3.4' height='3.4' rx='.7'/%3E%3Crect x='6.3' y='6.3' width='3.4' height='3.4' rx='.7'/%3E%3Crect x='10.8' y='6.3' width='3.4' height='3.4' rx='.7'/%3E%3Crect x='1.8' y='10.8' width='3.4' height='3.4' rx='.7'/%3E%3Crect x='6.3' y='10.8' width='3.4' height='3.4' rx='.7'/%3E%3Crect x='10.8' y='10.8' width='3.4' height='3.4' rx='.7'/%3E%3C/svg%3E");
}

.bi-people {
    --led-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5.6' cy='5.4' r='2.2'/%3E%3Cpath d='M1.8 14.2a3.8 3.8 0 0 1 7.6 0'/%3E%3Ccircle cx='11.4' cy='6.2' r='1.7'/%3E%3Cpath d='M9.2 14.2a3.4 3.4 0 0 1 5.4 0'/%3E%3C/svg%3E");
}

.bi-person {
    --led-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='5.2' r='2.6'/%3E%3Cpath d='M2.8 14.4a5.2 5.2 0 0 1 10.4 0'/%3E%3C/svg%3E");
}

.bi-plug {
    --led-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='1.8' width='6' height='4.4' rx='1'/%3E%3Cpath d='M6.3 6.4v3.4M9.7 6.4v3.4'/%3E%3Cpath d='M5.6 11.5h4.8'/%3E%3C/svg%3E");
}

.bi-code-slash {
    --led-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.2 2 8l4 4.8M10 3.2l4 4.8-4 4.8'/%3E%3C/svg%3E");
}

.bi-tag {
    --led-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 2.6h5.2L14 8.8l-5.2 5.2-6.8-6.5V2.6z'/%3E%3Ccircle cx='5' cy='5' r='1' fill='black' stroke='none'/%3E%3C/svg%3E");
}

.bi-pencil {
    --led-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.7 2.1a1.1 1.1 0 0 1 1.6 1.6L6.1 10.9l-2.3.7.7-2.3z'/%3E%3C/svg%3E");
}

.bi-copy {
    --led-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='5' width='9' height='9' rx='1.2'/%3E%3Cpath d='M11 3V2.8A1.5 1.5 0 0 0 9.5 1.3h-6A1.5 1.5 0 0 0 2 2.8v6a1.5 1.5 0 0 0 1.5 1.5H3'/%3E%3C/svg%3E");
}

.bi-info-circle {
    --led-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='5.6'/%3E%3Cpath d='M8 7.2v3.6M8 5h.01'/%3E%3C/svg%3E");
}

.bi-exclamation-triangle {
    --led-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2.6 14.6 13.4H1.4z'/%3E%3Cpath d='M8 6.6v3.4M8 11.8h.01'/%3E%3C/svg%3E");
}

.bi-arrow-left {
    --led-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 3.2 4.8 8l5.2 4.8'/%3E%3C/svg%3E");
}

.bi-person-circle {
    --led-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.4'/%3E%3Ccircle cx='8' cy='6.4' r='2.1'/%3E%3Cpath d='M4.3 13.1a4.1 4.1 0 0 1 7.4 0'/%3E%3C/svg%3E");
}

.bi-person-plus {
    --led-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6.2' cy='5.4' r='2.4'/%3E%3Cpath d='M1.8 14.4a4.4 4.4 0 0 1 8.8 0'/%3E%3Cpath d='M12.6 4.6v4.6M10.3 6.9h4.6'/%3E%3C/svg%3E");
}

.bi-building {
    --led-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 14.4V3.6l5.6-1.3v12.1'/%3E%3Cpath d='M9 6.6h3.6v7.8'/%3E%3Cpath d='M2 14.4h12.4'/%3E%3Cpath d='M5.4 5.6h1.4M5.4 8h1.4M5.4 10.4h1.4M11 9h.6M11 11.4h.6'/%3E%3C/svg%3E");
}

.bi-envelope {
    --led-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.8' y='3.6' width='12.4' height='9' rx='1.2'/%3E%3Cpath d='M2.4 4.6 8 8.9l5.6-4.3'/%3E%3C/svg%3E");
}

.bi-telephone {
    --led-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.6' y='1.6' width='6.8' height='12.8' rx='1.5'/%3E%3Cpath d='M6.6 3.6h2.8'/%3E%3Cpath d='M7.2 12.4h1.6'/%3E%3C/svg%3E");
}

.bi-geo-alt {
    --led-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 1.9a4.1 4.1 0 0 0-4.1 4.1c0 3.1 4.1 8.1 4.1 8.1s4.1-5 4.1-8.1A4.1 4.1 0 0 0 8 1.9z'/%3E%3Ccircle cx='8' cy='6' r='1.5'/%3E%3C/svg%3E");
}

.bi-lightbulb {
    --led-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 1.8a4.2 4.2 0 0 0-2.7 7.4c.4.4.7 1 .7 1.6v.5h4v-.5c0-.6.3-1.2.7-1.6A4.2 4.2 0 0 0 8 1.8z'/%3E%3Cpath d='M6.2 13.4h3.6'/%3E%3Cpath d='M6.9 14.7h2.2'/%3E%3C/svg%3E");
}

.bi-box-arrow-in-right {
    --led-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.4 2.4h3.6a1 1 0 0 1 1 1v9.2a1 1 0 0 1-1 1H9.4'/%3E%3Cpath d='M1.6 8h7.2'/%3E%3Cpath d='M6.2 5.2 9 8l-2.8 2.8'/%3E%3C/svg%3E");
}

.bi-box-arrow-right {
    --led-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.6 2.4H3a1 1 0 0 0-1 1v9.2a1 1 0 0 0 1 1h3.6'/%3E%3Cpath d='M14.4 8H7.2'/%3E%3Cpath d='M9.8 5.2 7 8l2.8 2.8'/%3E%3C/svg%3E");
}

.bi-speedometer2 {
    --led-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.2 12.2a6.4 6.4 0 0 1 11.6 0'/%3E%3Cpath d='M8 12.2 10.8 8'/%3E%3C/svg%3E");
}

.bi-activity {
    --led-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.6 8h3L6.6 3.2l3 9.6 2-4.8h2.8'/%3E%3C/svg%3E");
}

.bi-cash {
    --led-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.6' y='4' width='12.8' height='8' rx='1.4'/%3E%3Ccircle cx='8' cy='8' r='2.1'/%3E%3Cpath d='M4 6.2h1.6M4 9.8h1.6M10.4 6.2H12M10.4 9.8H12'/%3E%3C/svg%3E");
}

.bi-folder {
    --led-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.8 4.6a1 1 0 0 1 1-1h3.1l1.5 1.7h5.8a1 1 0 0 1 1 1v6.1a1 1 0 0 1-1 1H2.8a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

.bi-clock-history {
    --led-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8.4' r='5.7'/%3E%3Cpath d='M8 5.4v3.4l2.3 1.5'/%3E%3C/svg%3E");
}

.bi-list {
    --led-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 4.4h10.8M2.6 8h10.8M2.6 11.6h10.8'/%3E%3C/svg%3E");
}

.bi-shield-check {
    --led-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 1.9 2.9 3.6v4.2c0 3 2.1 5.4 5.1 6.3 3-.9 5.1-3.3 5.1-6.3V3.6z'/%3E%3Cpath d='M5.9 7.9 7.4 9.4l2.9-2.9'/%3E%3C/svg%3E");
}

.bi-plus-lg {
    --led-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M8 2.4v11.2M2.4 8h11.2'/%3E%3C/svg%3E");
}

.bi-dash-lg {
    --led-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M2.2 8h11.6'/%3E%3C/svg%3E");
}

.bi-fullscreen {
    --led-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.4 2.2H2.2v4.2'/%3E%3Cpath d='M9.6 2.2h4.2v4.2'/%3E%3Cpath d='M6.4 13.8H2.2V9.6'/%3E%3Cpath d='M9.6 13.8h4.2V9.6'/%3E%3C/svg%3E");
}

.bi-play-circle {
    --led-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='5.9'/%3E%3Cpath d='M6.7 5.7v4.6L10.6 8z'/%3E%3C/svg%3E");
}

.bi-pause-circle {
    --led-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='5.9'/%3E%3Cpath d='M6.4 6v4M9.6 6v4'/%3E%3C/svg%3E");
}

.bi-font {
    --led-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2.8 4.4 9.6M8 2.8l3.6 6.8M6 6.8h4'/%3E%3C/svg%3E");
}

.bi-123 {
    --led-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M6 2.4v8.8M10 2.4v8.8M2.4 6h8.8M2.4 9.6h8.8'/%3E%3C/svg%3E");
}

.bi-arrow-right-circle {
    --led-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='5.9'/%3E%3Cpath d='M8.6 5.4 11.2 8l-2.6 2.6M5.1 8h5.8'/%3E%3C/svg%3E");
}

.bi-rotate {
    --led-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 8a5 5 0 1 1-1.7-3.8'/%3E%3Cpath d='M13 1.9v3H10'/%3E%3C/svg%3E");
}

.bi-save {
    --led-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.4 2.4h9l2.2 2.2v9H2.4z'/%3E%3Cpath d='M5.6 2.4v3.6h4.8V2.4'/%3E%3Cpath d='M4.6 13.2V9h6.8v4.2'/%3E%3C/svg%3E");
}

.bi-check2 {
    --led-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 8.6 6.3 12.3 13.4 4.4'/%3E%3C/svg%3E");
}

.bi-palette {
    --led-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2a6.8 6.8 0 1 0 0 13.6c.9 0 1.2-.5 1.2-1.1 0-.7-.9-.8-.9-1.5 0-1.4 2.5-2 4.6-1.6 1 .2 1.9-.4 1.9-1.8A6.6 6.6 0 0 0 8 2z'/%3E%3Ccircle cx='5' cy='6.4' r='.9'/%3E%3Ccircle cx='8.6' cy='4.9' r='.9'/%3E%3Ccircle cx='11.9' cy='6.8' r='.9'/%3E%3Ccircle cx='4.6' cy='9.4' r='.9'/%3E%3C/svg%3E");
}

.bi-collection-play {
    --led-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.8' y='2.6' width='9.2' height='7.2' rx='1'/%3E%3Cpath d='M1.8 12.2h9.2M5 8l3 1.7V6.3z'/%3E%3C/svg%3E");
}

.bi-download {
    --led-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 1.8v7.4'/%3E%3Cpath d='M5.2 7.2 8 10l2.8-2.8'/%3E%3Cpath d='M2.2 13.2h11.6'/%3E%3C/svg%3E");
}

.bi-upload {
    --led-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 12.8V5.4'/%3E%3Cpath d='M5.2 6.8 8 4l2.8 2.8'/%3E%3Cpath d='M2.2 2.8h11.6'/%3E%3C/svg%3E");
}

.bi-check-circle {
    --led-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='5.8'/%3E%3Cpath d='M5.3 8.2 7.2 10.1l3.5-3.9'/%3E%3C/svg%3E");
}

.bi-key {
    --led-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='8' r='2.7'/%3E%3Cpath d='M7.7 8h6.1M11.3 8v2.3M9.3 8v1.7'/%3E%3C/svg%3E");
}

.bi-person-plus-fill {
    --led-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'%3E%3Ccircle cx='6' cy='4.4' r='3.1'/%3E%3Cpath d='M2.1 14.2s-1 0-1-1 1-4.3 4.9-4.3 4.9 3.3 4.9 4.3-1 1-1 1z'/%3E%3Cpath d='M13.5 5.6h-1.1v-1h-1v1h-1.1v1h1.1v1h1v-1h1.1z'/%3E%3C/svg%3E");
}

.bi-cpu-fill {
    --led-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'%3E%3Cpath d='M4.2 2.6h7.6a1.6 1.6 0 0 1 1.6 1.6v7.6a1.6 1.6 0 0 1-1.6 1.6H4.2a1.6 1.6 0 0 1-1.6-1.6V4.2a1.6 1.6 0 0 1 1.6-1.6zm1.1 2.2v6.4h6.4V4.8z'/%3E%3Cpath d='M6.9 6.4h2.2v2.2H6.9z'/%3E%3Cpath d='M7.4.9h1.2v1.5H7.4zM7.4 13.6h1.2v1.5H7.4zM.9 7.4h1.5v1.2H.9zM13.6 7.4h1.5v1.2h-1.5zM3.4.9h1.2v1.5H3.4zM11.4.9h1.2v1.5h-1.2zM3.4 13.6h1.2v1.5H3.4zM11.4 13.6h1.2v1.5h-1.2z'/%3E%3C/svg%3E");
}

.bi-trash {
    --led-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'%3E%3Cpath d='M6.4 1.4h3.2l.5 1H12v1.3H4V2.4h1.9z'/%3E%3Cpath d='M5 4.6h6l-.6 9.2a1 1 0 0 1-1 .9H6.6a1 1 0 0 1-1-.9z'/%3E%3C/svg%3E");
}

.bi-arrow-up {
    --led-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 12.8V3.4'/%3E%3Cpath d='M4.2 7.2 8 3.4l3.8 3.8'/%3E%3C/svg%3E");
}

.bi-arrow-down {
    --led-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3.2v9.4'/%3E%3Cpath d='M4.2 8.8 8 12.6l3.8-3.8'/%3E%3C/svg%3E");
}


/* --------------------------------------------------------------------------
   Editor layout pannelli LED 16x16
   -------------------------------------------------------------------------- */

.led-stage-wrap {
    position: relative;
    overflow: auto;
    max-height: 68vh;
    background-color: #0a0f16;
}

.led-stage {
    position: relative;
    min-height: 460px;
    background-image:
        linear-gradient(to right, rgba(148, 163, 184, .10) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(148, 163, 184, .10) 1px, transparent 1px);
    background-size: var(--led-cell, 6px) var(--led-cell, 6px);
}

.led-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(34, 211, 238, .16) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(34, 211, 238, .16) 1px, transparent 1px);
    background-size: calc(var(--led-cell, 6px) * 16) calc(var(--led-cell, 6px) * 16);
}

.led-stage-empty {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--bs-secondary-color);
    pointer-events: none;
}

.led-chain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.led-module {
    position: absolute;
    z-index: 1;
    border-radius: .3rem;
    cursor: grab;
    touch-action: none;
    box-shadow: 0 0 0 1px rgba(148, 163, 184, .35);
}

.led-module:active {
    cursor: grabbing;
}

.led-module.selected {
    z-index: 3;
    box-shadow: 0 0 0 2px var(--led-accent), 0 0 18px rgba(34, 211, 238, .35);
}

.led-module-canvas {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: .3rem;
    background-color: #060a0f;
}

.led-module-badge {
    position: absolute;
    top: -9px;
    left: -9px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding: 0 .28rem;
    border-radius: 999px;
    background-color: #0f172a;
    border: 1px solid rgba(148, 163, 184, .45);
    color: #e2e8f0;
    font-size: .66rem;
    font-weight: 700;
    line-height: 1;
}

.led-module.selected .led-module-badge {
    border-color: var(--led-accent);
    color: #67e8f9;
}

.led-din {
    position: absolute;
    z-index: 4;
    font-style: normal;
    font-size: .58rem;
    line-height: 1;
    color: rgba(34, 211, 238, .95);
    text-shadow: 0 0 4px rgba(34, 211, 238, .8);
    pointer-events: none;
}

.led-stage:not(.previewing) .led-din {
    display: none;
}

.led-module-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 340px;
    overflow-y: auto;
}

.led-module-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .85rem;
    border-bottom: 1px solid var(--led-border);
    cursor: pointer;
}

.led-module-row:last-child {
    border-bottom: 0;
}

.led-module-row:hover {
    background-color: rgba(255, 255, 255, .04);
}

.led-module-row.selected {
    background-color: rgba(34, 211, 238, .10);
}

.led-module-index {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 999px;
    background-color: rgba(34, 211, 238, .14);
    color: #67e8f9;
    font-size: .72rem;
    font-weight: 700;
}

.led-module-row.selected .led-module-index {
    background-color: var(--led-accent);
    color: #062028;
}

.led-color-dot {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border-radius: 999px;
    box-shadow: 0 0 6px currentColor;
}

.led-module-meta {
    font-size: .72rem;
    color: var(--bs-secondary-color);
}

.led-empty-note {
    padding: 1rem .85rem;
    text-align: center;
    color: var(--bs-secondary-color);
    font-size: .82rem;
}

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

.led-summary-list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .35rem 0;
    border-bottom: 1px dashed var(--led-border);
    font-size: .82rem;
}

.led-summary-list li:last-child {
    border-bottom: 0;
}

.led-summary-list .led-summary-value {
    color: #e2e8f0;
    font-weight: 600;
}

.led-row-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid var(--led-border);
    border-radius: .35rem;
    background-color: transparent;
    color: var(--bs-secondary-color);
}

.led-row-btn:hover:not(:disabled) {
    border-color: rgba(34, 211, 238, .45);
    color: var(--led-accent);
}

.led-row-btn:disabled {
    opacity: .3;
}

.led-row-btn.danger:hover:not(:disabled) {
    border-color: rgba(248, 113, 113, .5);
    color: #fca5a5;
}

/* ---------- Menu contestuale (tasto destro) ---------- */
.led-context-menu {
    position: fixed;
    z-index: 30;
    min-width: 13rem;
    padding: .3rem;
    border: 1px solid var(--led-border);
    border-radius: .6rem;
    background-color: #16202b;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
}

.led-context-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .5rem .6rem;
    border: 0;
    border-radius: .45rem;
    background-color: transparent;
    color: var(--bs-body-color);
    font-size: .88rem;
    text-align: left;
}

.led-context-item:hover,
.led-context-item:focus-visible {
    background-color: rgba(34, 211, 238, .14);
    color: #67e8f9;
    outline: none;
}

.led-context-item .bi {
    color: var(--led-accent);
}

/* ---------- Toolbar editor: zoom / adatta ---------- */
.led-editor-tools {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.led-tool-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid var(--led-border);
    border-radius: .35rem;
    background-color: transparent;
    color: var(--bs-secondary-color);
}

.led-tool-btn:hover:not(:disabled) {
    border-color: rgba(34, 211, 238, .45);
    color: var(--led-accent);
}

.led-tool-btn.active {
    border-color: var(--led-accent);
    background-color: rgba(34, 211, 238, .1);
    color: var(--led-accent);
    box-shadow: 0 0 12px rgba(34, 211, 238, .25);
}

.led-tool-sep {
    width: 1px;
    height: 1.1rem;
    margin: 0 .15rem;
    background-color: var(--led-border);
}

.led-tool-btn:disabled {
    opacity: .35;
}

.led-zoom-label {
    min-width: 2.7rem;
    text-align: center;
    font-size: .72rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--bs-secondary-color);
}

.led-content-input {
    width: 9.5rem;
    padding: .3rem .55rem;
    border: 1px solid var(--led-border);
    border-radius: .35rem;
    background-color: rgba(2, 6, 12, .55);
    color: #e2e8f0;
    font-size: .78rem;
}

.led-content-input:focus {
    outline: none;
    border-color: var(--led-accent);
    box-shadow: 0 0 0 2px rgba(34, 211, 238, .18);
}

.led-hidden {
    display: none !important;
}

/* ---------- Vista editor: pan e resa pannelli ---------- */
.led-stage {
    cursor: grab;
    touch-action: none;
}

.led-stage.panning {
    cursor: grabbing;
}

.led-module-canvas {
    image-rendering: pixelated;
}

/* ---------- Anteprima LED "dal vivo" ---------- */
.led-stage.previewing {
    background-image: none;
}

.led-stage.previewing::before {
    opacity: 0;
}

.led-stage.previewing .led-module {
    box-shadow: 0 0 0 1px rgba(2, 6, 12, .9);
}

.led-stage.previewing .led-module.selected {
    box-shadow: 0 0 0 2px var(--led-accent), 0 0 18px rgba(34, 211, 238, .35);
}

/* ---------- Salvataggio layout ---------- */
.led-save-status {
    font-size: .78rem;
    font-weight: 600;
    color: #4ade80;
}

.led-save-status.error {
    color: #f87171;
}

.led-modal {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: rgba(2, 6, 12, .7);
    backdrop-filter: blur(3px);
    padding: 1rem;
}

.led-modal.open {
    display: flex;
}

.led-modal-card {
    width: min(24rem, 100%);
    background-color: #0b1220;
    border: 1px solid var(--led-border);
    border-radius: .7rem;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}

.led-modal-header {
    padding: .85rem 1rem;
    font-weight: 700;
    color: #e2e8f0;
    border-bottom: 1px solid var(--led-border);
}

.led-modal-body {
    padding: 1rem;
}

.led-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: .8rem 1rem;
    border-top: 1px solid var(--led-border);
}

.led-modal-footer .btn + .btn {
    margin-left: 0;
}

.led-label {
    display: block;
    margin-bottom: .35rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.led-input {
    width: 100%;
    padding: .5rem .65rem;
    border: 1px solid var(--led-border);
    border-radius: .4rem;
    background-color: rgba(2, 6, 12, .55);
    color: #e2e8f0;
    font-size: .88rem;
}

.led-input:focus {
    outline: none;
    border-color: var(--led-accent);
    box-shadow: 0 0 0 2px rgba(34, 211, 238, .18);
}

.led-code {
    width: 100%;
    padding: .65rem .7rem;
    border: 1px solid var(--led-border);
    border-radius: .4rem;
    background-color: rgba(2, 6, 12, .7);
    color: #a5f3fc;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: .8rem;
    line-height: 1.5;
    resize: vertical;
}

.led-code:focus {
    outline: none;
    border-color: var(--led-accent);
    box-shadow: 0 0 0 2px rgba(34, 211, 238, .18);
}

.led-code-inline {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: .78rem;
    color: #67e8f9;
}

.led-editor {
    position: relative;
    border: 1px solid var(--led-border);
    border-radius: .4rem;
    overflow: hidden;
    background-color: rgba(2, 6, 12, .7);
}

.led-editor .led-code {
    display: block;
    width: 100%;
    padding: .65rem .7rem .65rem 48px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #a5f3fc;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: .8rem;
    line-height: 1.5rem;
    white-space: pre;
    tab-size: 2;
    resize: vertical;
}

.led-editor .led-code:focus {
    outline: none;
    box-shadow: none;
    border-color: transparent;
}

.led-editor-gutter {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 40px;
    margin: 0;
    padding: .65rem .5rem .65rem 0;
    overflow: hidden;
    text-align: right;
    color: #64748b;
    background-color: rgba(255, 255, 255, .03);
    border-right: 1px solid rgba(255, 255, 255, .06);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: .8rem;
    line-height: 1.5rem;
    white-space: pre;
    pointer-events: none;
    user-select: none;
}

.led-editor-bg {
    position: absolute;
    top: 0;
    left: 48px;
    right: .7rem;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
}

.led-editor-caret-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 1.5rem;
    background-color: rgba(34, 211, 238, .09);
    transition: top .08s ease;
}

.led-save-status.error + .mb-3,
.led-modal-body > .led-save-status.error {
    margin-bottom: .75rem;
}

/* ---------- Plugin sul canvas ---------- */
.led-plugin {
    position: absolute;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    border: 1.5px dashed rgba(168, 85, 247, .75);
    border-radius: .35rem;
    background-color: rgba(168, 85, 247, .14);
    cursor: grab;
    touch-action: none;
    box-shadow: 0 0 0 1px rgba(168, 85, 247, .25);
}

.led-plugin:active {
    cursor: grabbing;
}

.led-plugin.selected {
    z-index: 5;
    border-style: solid;
    border-color: #a855f7;
    background-color: rgba(168, 85, 247, .26);
    box-shadow: 0 0 0 2px #a855f7, 0 0 18px rgba(168, 85, 247, .35);
}

.led-plugin-label {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .68rem;
    font-weight: 700;
    color: #e9d5ff;
    text-align: center;
    line-height: 1;
    pointer-events: none;
}

.led-plugin-label .bi {
    font-size: .75rem;
    color: #c084fc;
}

.led-plugin-size {
    font-size: .6rem;
    color: #d8b4fe;
    opacity: .85;
    pointer-events: none;
}

.led-plugin-index {
    background-color: rgba(168, 85, 247, .18) !important;
    color: #d8b4fe !important;
}

.led-plugin-row.selected .led-plugin-index {
    background-color: #a855f7 !important;
    color: #fff !important;
}

.led-plugin-handle {
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #e9d5ff;
    border: 1px solid #a855f7;
    border-radius: 2px;
    pointer-events: auto;
    z-index: 2;
}

.led-plugin-handle-nw { top: -4px; left: -4px; cursor: nwse-resize; }
.led-plugin-handle-n  { top: -4px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.led-plugin-handle-ne { top: -4px; right: -4px; cursor: nesw-resize; }
.led-plugin-handle-e  { top: 50%; right: -4px; transform: translateY(-50%); cursor: ew-resize; }
.led-plugin-handle-se { bottom: -4px; right: -4px; cursor: nwse-resize; }
.led-plugin-handle-s  { bottom: -4px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.led-plugin-handle-sw { bottom: -4px; left: -4px; cursor: nesw-resize; }
.led-plugin-handle-w  { top: 50%; left: -4px; transform: translateY(-50%); cursor: ew-resize; }

.led-plugin:not(.selected) .led-plugin-handle {
    display: none;
}

.led-plugin-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: .35rem;
    image-rendering: pixelated;
    pointer-events: none;
    z-index: 0;
}

.led-plugin-label,
.led-plugin-size {
    position: relative;
    z-index: 1;
}

.led-plugin-wall-canvas {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 3;
    image-rendering: pixelated;
    opacity: 0.98;
}

.led-stage.wall-previewing .led-plugin {
    background: transparent !important;
    border-color: rgba(168, 85, 247, .55);
}

/* ---------- Modale selezione plugin ---------- */
.led-plugin-modal-list {
    max-height: 22rem;
    overflow-y: auto;
}

.led-plugin-modal-item {
    display: block;
    width: 100%;
    padding: .7rem 1rem;
    border: 0;
    border-bottom: 1px solid var(--led-border);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.led-plugin-modal-item:last-child {
    border-bottom: 0;
}

.led-plugin-modal-item:hover,
.led-plugin-modal-item:focus-visible {
    background-color: rgba(168, 85, 247, .10);
    outline: none;
}