body{
font-family:Arial;
margin:0;
background:#0b0f16;
color:white;
}

.topbar{
background:#111722;
padding:16px;
text-align:center;
font-size:20px;
font-weight:bold;
}

.system-message{

background:#ffd84d;
color:#000;

padding:10px 16px;

font-weight:600;

border-bottom:2px solid #e6b800;

}

.cockpit{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
gap:30px;
padding:30px;
max-width:900px;
margin:auto;
}

.gauge-box{

text-align:center;
width:110px;
margin:auto;

}

.gauge-label{
margin-top:10px;
font-size:14px;
color:#9fb4d0;
}

canvas{

width:100%;
max-width:95px;
height:auto;

}

.apps{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:20px;
padding:30px;
max-width:900px;
margin:auto;
}

.app-card{
background:#1c2535;
padding:30px;
border-radius:10px;
text-align:center;
font-size:18px;
cursor:pointer;
transition:0.2s;
}

.app-card:hover{
background:#2b3a52;
}

.structure-bar{
display:flex;
justify-content:center;
align-items:center;
gap:15px;
padding:15px;
background:#151b27;
}

.structure-label{
font-size:14px;
color:#9fb4d0;
}

.structure-bar select{
background:#0b0f16;
color:white;
border:1px solid #2b3a52;
padding:6px 10px;
border-radius:6px;
}

.gauge-text{

margin-top:4px;
font-size:12px;
color:#9fb4d0;

}

@media (max-width:600px){

.system-message{
font-size:14px;
padding:8px;
}

.app-card{
padding:20px;
font-size:16px;
}

}

.cockpit-info{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
gap:15px;
padding:10px 30px 30px 30px;
max-width:900px;
margin:auto;

}

.status-card{

background:#0f1622;
border:1px solid #1f2a3d;
padding:12px;
border-radius:8px;
text-align:center;

}

.status-label{

font-size:11px;
color:#7f94b3;
letter-spacing:1px;

}

.status-value{

font-size:16px;
margin-top:4px;
font-weight:bold;
color:#00ff88;

}

.alerts-panel{
max-width:900px;
margin:0 auto 30px auto;
padding:0 30px;
}

.alerts-header{
font-size:14px;
letter-spacing:1px;
color:#9fb4d0;
margin-bottom:12px;
font-weight:bold;
}

.alert-item{
padding:14px 16px;
border-radius:8px;
margin-bottom:10px;
font-size:14px;
font-weight:600;
}

.alert-warning{
background:#3b2d08;
border:1px solid #e0a800;
color:#ffd666;
}

.alert-danger{
background:#3a1616;
border:1px solid #f44336;
color:#ff8a80;
}

.alert-info{
background:#122235;
border:1px solid #2d8cff;
color:#8ec5ff;
}

.alert-ok{
background:#0f2d1c;
border:1px solid #00ff88;
color:#8cffc9;
}


/* ASSISTENTE AI */

.ai-assistant{

max-width:900px;
margin:20px auto 30px auto;
padding:20px 25px;

background:#0f1622;
border:1px solid #1f2a3d;
border-radius:10px;

display:flex;
flex-direction:column;
gap:12px;

}

.ai-title{

display:flex;
align-items:center;
gap:8px;

font-size:13px;
letter-spacing:1px;
color:#8aa2c4;
font-weight:bold;

}

.ai-icon{

display:flex;
align-items:center;

}

.ai-diagnosis{

font-size:14px;
color:#d6e3ff;
line-height:1.5;

padding:10px 12px;

background:#121b2a;
border-radius:6px;

}

.ai-actions{

display:flex;
align-items:center;
gap:15px;

}

#aiFixButton{

background:#1f2a3d;
color:#cfe3ff;

border:1px solid #32435e;

padding:6px 12px;

border-radius:6px;

font-size:13px;
font-weight:600;

cursor:pointer;

transition:all 0.15s ease;

}

#aiFixButton:hover{

background:#283952;

}

#aiFixStatus{

font-size:13px;
color:#8aa2c4;

}

/* ================================
   NETWORK MODULE
   ================================ */

.network-module{
max-width:900px;
margin:20px auto 40px auto;
padding:20px 25px;
background:#0f1622;
border:1px solid #1f2a3d;
border-radius:10px;
display:flex;
flex-direction:column;
gap:20px;
}

.network-title{
font-size:16px;
letter-spacing:1px;
color:#8aa2c4;
font-weight:bold;
}

.network-actions{
display:flex;
flex-wrap:wrap;
gap:10px;
}

.cmd-btn{
background:#1f2a3d;
color:#cfe3ff;
border:1px solid #32435e;
padding:8px 14px;
border-radius:6px;
font-size:13px;
font-weight:600;
cursor:pointer;
transition:all 0.15s ease;
}

.cmd-btn:hover{
background:#283952;
}

.network-log{
font-size:13px;
color:#8aa2c4;
margin-top:5px;
}

.ap-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:15px;
}

.ap-card{
background:#121b2a;
border:1px solid #1f2a3d;
border-radius:8px;
padding:12px;
display:flex;
flex-direction:column;
gap:6px;
}

.ap-floor{
font-size:11px;
letter-spacing:1px;
color:#7f94b3;
}

.ap-name{
font-size:14px;
font-weight:bold;
color:#d6e3ff;
}

.ap-status{
font-size:12px;
font-weight:bold;
}

.ap-card.online .ap-status{
color:#00ff88;
}

.ap-card.warning .ap-status{
color:#ffd666;
}

.ap-desc{
font-size:12px;
color:#9fb4d0;
}

/* IP BINDING */

.binding-list{

display:flex;
flex-direction:column;
gap:8px;
margin-top:10px;

}

.binding-row{

display:grid;
grid-template-columns:2fr 2fr 1fr;

background:#121b2a;
border:1px solid #1f2a3d;

padding:8px 10px;

border-radius:6px;

font-size:13px;

color:#d6e3ff;

}

/* ==========================================
   DEVICES MODULE
   ========================================== */

.devices-module{
max-width:900px;
margin:20px auto 40px auto;
padding:20px 25px;
background:#0f1622;
border:1px solid #1f2a3d;
border-radius:10px;
display:flex;
flex-direction:column;
gap:18px;
}

.devices-gauges{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:20px;
align-items:center;
}

.devices-summary{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
gap:15px;
}

.devices-list-header{
font-size:13px;
letter-spacing:1px;
color:#8aa2c4;
font-weight:bold;
margin-top:8px;
}

.devices-list{
display:flex;
flex-direction:column;
gap:10px;
}

.device-row{
display:grid;
grid-template-columns:1.1fr 1.4fr 1fr auto;
gap:12px;
align-items:center;
background:#121b2a;
border:1px solid #1f2a3d;
border-radius:8px;
padding:12px;
}

.device-row.heavy-user{
border-color:#e0a800;
background:#1b2028;
}

.device-col{
display:flex;
flex-direction:column;
gap:4px;
min-width:0;
}

.device-col-action{
align-items:flex-end;
}

.device-label{
font-size:11px;
letter-spacing:1px;
color:#7f94b3;
}

.device-value{
font-size:14px;
font-weight:bold;
color:#d6e3ff;
word-break:break-word;
}

.device-flag{
display:inline-block;
margin-left:8px;
padding:3px 6px;
border-radius:5px;
font-size:10px;
letter-spacing:0.5px;
background:#3b2d08;
border:1px solid #e0a800;
color:#ffd666;
vertical-align:middle;
}

.danger-btn{
border-color:#6b3232;
}

.danger-btn:hover{
background:#3a2020;
}

@media (max-width:700px){

.device-row{
grid-template-columns:1fr;
}

.device-col-action{
align-items:flex-start;
}

}

.network-stats{
display:flex;
gap:25px;
margin-bottom:25px;
}

.network-stat{
flex:1;
background:#0f172a;
border-radius:10px;
padding:18px;
border:1px solid #1e293b;
}

.stat-title{
font-size:13px;
color:#94a3b8;
margin-bottom:6px;
}

.stat-value{
font-size:26px;
font-weight:600;
color:#e2e8f0;
}

.stat-desc{
font-size:12px;
color:#64748b;
margin-top:4px;
}

.devices-note{
font-size:12px;
line-height:1.5;
color:#BCC7D4;
padding:6px 2px;
margin-bottom:14px;
font-style:italic;
}

/* =================================
AIHOTEL FOOTER LEGALE
================================= */

.aihotel-footer{

margin-top:60px;

padding:20px 10px;

font-size:11px;

text-align:center;

color:#7f8da3;

border-top:1px solid #2a3345;

opacity:0.8;

}

.mode-badge {
    margin-left: 10px;
    padding: 4px 10px;
    font-size: 11px;
    border-radius: 12px;
    font-weight: 600;
}

.mode-badge.real {
    background: rgba(34,197,94,0.15);
    color: #22c55e;
}

.mode-badge.demo {
    background: rgba(234,179,8,0.15);
    color: #eab308;
}

/* =========================================
   AIHOTEL DEVICE KILL BUTTON
========================================= */

/* colonna azione */
.device-col-action {
    display: flex;
    align-items: center;
    justify-content: center; /* centro orizzontale */
}

/* bottone */
.device-kill-btn {

    margin-top: 10px;

    background: linear-gradient(180deg, rgba(255,77,79,0.18) 0%, rgba(255,77,79,0.08) 100%);
    border: 1px solid rgba(255,77,79,0.65);
    color: #ffd6d6;

    padding: 7px 12px;
    border-radius: 8px;
    cursor: pointer;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    box-shadow:
        inset 0 0 10px rgba(255,77,79,0.10),
        0 0 10px rgba(255,77,79,0.10);

    transition: all 0.2s ease;
}

/* hover */
.device-kill-btn:hover {
    background: linear-gradient(180deg, rgba(255,77,79,0.30) 0%, rgba(255,77,79,0.14) 100%);
    border-color: rgba(255,107,107,0.95);
    color: #ffffff;

    box-shadow:
        inset 0 0 14px rgba(255,77,79,0.18),
        0 0 14px rgba(255,77,79,0.22);
}

/* ============================================
   AUTOPILOTA BOX
============================================ */

.autopilot-box {
    background: linear-gradient(135deg, #020617, #0f172a);
    border: 1px solid #1f4f7a;
    color: #22c55e;
    padding: 14px;
    border-radius: 12px;
    margin-bottom: 15px;
    text-align: center;
    font-weight: 600;
    box-shadow: 0 0 12px rgba(0,0,0,0.5);
}

#autopilotCountdown {
    display: block;
    font-size: 22px;
    margin-top: 6px;
    color: #38bdf8;
    font-weight: bold;
}

/* =========================
   AI NETWORK UI
========================= */

.ai-status-card {
    text-align: left;
}

.ai-select {
    background: #020617;
    color: #fff;
    border: 1px solid #1e293b;
    padding: 6px 10px;
    border-radius: 8px;
    width: 100%;
    font-size: 13px;
}

.ai-help-row {
    margin-top: 8px;
}

.ai-help-btn {
    background: transparent;
    color: #38bdf8;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-size: 12px;
}

.ai-help-btn:hover {
    color: #0ea5e9;
}

.ai-info-box {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.5;
    color: #cbd5e1;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid #1e293b;
    border-radius: 8px;
    padding: 10px;
}

/* =========================================
   AUTOPILOTA EXPERIENCE (STABILE + RESPONSIVE)
========================================= */

/* SPINNER */
.autopilot-spinner{

    width: 50px;
    height: 50px;

    margin: 14px auto 22px auto;

    border-radius: 50%;
    position: relative;

    background: radial-gradient(circle, rgba(0,200,255,0.15) 0%, transparent 70%);
}

/* radar pulse */
.autopilot-spinner::before{
    content: "";
    position: absolute;
    inset: 0;

    border-radius: 50%;
    border: 2px solid rgba(0,200,255,0.4);

    animation: radarPulse 2s infinite;
}

/* rotating sweep */
.autopilot-spinner::after{
    content: "";
    position: absolute;
    inset: 0;

    border-radius: 50%;

    background: conic-gradient(
        rgba(0,200,255,0.5) 0deg,
        transparent 60deg
    );

    animation: radarSweep 2s linear infinite;
}

@keyframes radarPulse{
    0% { transform: scale(0.6); opacity: 0.6; }
    100% { transform: scale(1.4); opacity: 0; }
}

@keyframes radarSweep{
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 🔥 BLOCCO STABILITÀ BOX */
.autopilot-box{
    min-height: 240px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 💡 MESSAGGI AI (PRINCIPALE) */
.autopilot-tips{

    margin-top: 20px;

    height: 48px; /* 🔥 fisso = niente salto */

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: 0.2px;

    color: #d6eaff;

    padding: 10px 16px;

    border-radius: 10px;

    background: linear-gradient(
        180deg,
        rgba(0, 200, 255, 0.05),
        rgba(0, 200, 255, 0.01)
    );

    border: 1px solid rgba(0, 200, 255, 0.15);

    backdrop-filter: blur(4px);

    overflow: hidden;
    text-align: center;

    transition: opacity 0.4s ease, transform 0.3s ease;

    animation: autopilotGlow 3s ease-in-out infinite;
}

/* icona elegante */
.autopilot-tips::before{
    content: "AI";
    font-size: 10px;
    font-weight: bold;
    color: #38bdf8;
    margin-right: 8px;
    opacity: 0.8;
}

/* ✳️ NOTA (soft, meno invasiva) */
.autopilot-note{

    margin-top: 22px; /* 🔥 più aria */

    font-size: 12px;
    color: #94a3b8;

    line-height: 1.4;

    opacity: 0.8;
}

/* STATUS */
.autopilot-status{

    font-size: 12px;

    color: #7dd3fc;

    opacity: 0.6;

    margin-top: 14px;
}

/* TIMER */
.autopilot-timer{

    font-size: 13px;
    color: #7f94b3;

    margin-top: 14px;
}

/* LIGHT GLOW */
.autopilot-box::after{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    pointer-events: none;

    box-shadow: 0 0 40px rgba(0, 200, 255, 0.05);
}

/* glow animazione */
@keyframes autopilotGlow {
    0% { box-shadow: 0 0 6px rgba(0,200,255,0.05); }
    50% { box-shadow: 0 0 14px rgba(0,200,255,0.15); }
    100% { box-shadow: 0 0 6px rgba(0,200,255,0.05); }
}

/* =========================================
   📱 MOBILE FIX (FONDAMENTALE)
========================================= */

@media (max-width: 768px){

    .autopilot-box{
        min-height: auto; /* 🔥 niente rigidità */
        padding: 18px;
    }

    .autopilot-tips{
        height: auto; /* 🔥 evita taglio testo */
        min-height: 48px;
    }

    .autopilot-note{
        font-size: 12px;
        line-height: 1.4;
    }

}

/* =========================================
   NETWORK UI — FINAL CLEAN LAYOUT
========================================= */

/* contenitore generale */
#bindingLog {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 10px;
}

/* sezione (AUTORIZZATI / RILEVATI) */
.network-section-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    border-radius: 14px;
    background: rgba(2, 6, 23, 0.6);
    border: 1px solid #1e293b;
}

/* titolo sopra */
.network-section-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #38bdf8;
}

/* griglia dispositivi */
.network-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    align-items: start;
}

/* card */
.network-grid .ap-card {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    position: relative;
}

.network-section-wrapper .network-grid {
    width: 100%;
}

.network-section-wrapper .ap-card {
    margin: 0;
}

/* hover leggero */
.network-grid .ap-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}

/* separazione visiva forte */
.network-section-wrapper.autorizzati {
    border: 1px solid rgba(34,197,94,0.3);
}

.network-section-wrapper.rilevati {
    border: 1px solid rgba(56,189,248,0.25);
}

/* spazio bottone */
.network-actions {
    margin: 15px 0 20px 0;
}

/* =========================================
   BUTTON STATES (AIHOTEL STYLE)
========================================= */

/* BASE già esistente cmd-btn */

/* ✅ AUTORIZZA */
.cmd-ok {
    background: linear-gradient(180deg, #22c55e, #16a34a);
    border: 1px solid rgba(34,197,94,0.4);
    color: #ecfdf5;
}

.cmd-ok:hover {
    background: linear-gradient(180deg, #16a34a, #15803d);
    box-shadow: 0 0 10px rgba(34,197,94,0.4);
}

/* ELITE REFRESH BUTTON */
.elite-refresh-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    background:
        linear-gradient(180deg, rgba(34,197,94,0.18), rgba(22,163,74,0.12)),
        linear-gradient(180deg, #102033, #0b1624);
    border: 1px solid rgba(34,197,94,0.35);
    color: #ecfdf5;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 0 0 1px rgba(15,23,42,0.55),
        0 8px 20px rgba(0,0,0,0.22);
    transition:
        transform 0.14s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease;
}

.elite-refresh-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(34,197,94,0.55);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.07),
        0 0 0 1px rgba(21,128,61,0.45),
        0 0 18px rgba(34,197,94,0.18),
        0 10px 22px rgba(0,0,0,0.28);
}

.elite-refresh-btn:active {
    transform: translateY(1px) scale(0.985);
    box-shadow:
        inset 0 2px 6px rgba(0,0,0,0.32),
        0 0 0 1px rgba(21,128,61,0.35);
}

.elite-refresh-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    font-size: 12px;
    color: #bbf7d0;
    background: radial-gradient(circle, rgba(34,197,94,0.28) 0%, rgba(34,197,94,0.08) 70%, transparent 100%);
    box-shadow: 0 0 10px rgba(34,197,94,0.18);
}

.elite-refresh-btn.pulse {
    animation: eliteRefreshPulse 0.55s ease;
}

@keyframes eliteRefreshPulse {
    0%   { transform: scale(1); box-shadow: 0 0 0 rgba(34,197,94,0); }
    35%  { transform: scale(0.975); box-shadow: 0 0 18px rgba(34,197,94,0.28); }
    100% { transform: scale(1); box-shadow: 0 0 0 rgba(34,197,94,0); }
}

/* ✨ UPGRADE / EXTRA (ELEGANTE) */
.cmd-upgrade {
    background: linear-gradient(180deg, #1e3a5f, #162f4a);
    border: 1px solid rgba(148,163,184,0.2);
    color: #dbeafe;
}

.cmd-upgrade:hover {
    background: linear-gradient(180deg, #162f4a, #12263d);
    box-shadow: 0 0 8px rgba(30,58,95,0.4);
}

/* =========================================
   AIHOTEL NETWORK STATUS — CLEAN UI
========================================= */

/* BASE CARD (uniforme) */
.ap-card {
    border-radius: 12px;
    padding: 12px;
    background: linear-gradient(180deg, rgba(2,6,23,0.9), rgba(2,6,23,0.6));
    border: 1px solid #1e293b;
    transition: all 0.2s ease;
}

/* hover leggero */
.ap-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}

/* ========================
   STATUS COLORS
======================== */

/* 🟢 ONLINE */
.ap-card.online {
    border: 1px solid rgba(34,197,94,0.6);
    box-shadow: 0 0 10px rgba(34,197,94,0.15);
}

/* 🟡 RECENTE */
.ap-card.recent {
    border: 1px solid rgba(234,179,8,0.6);
    box-shadow: 0 0 10px rgba(234,179,8,0.12);
}

/* 🔵 ATTIVO (ELITE statico) */
.ap-card.static {
    border: 1px solid rgba(56,189,248,0.6);
    box-shadow: 0 0 10px rgba(56,189,248,0.15);
}

/* ⚫ OFFLINE */
.ap-card.offline {
    opacity: 0.5;
    border: 1px solid rgba(100,116,139,0.4);
}

/* ========================
   STATUS TEXT
======================== */

.ap-status {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-top: 4px;
}

/* colori testo coerenti */
.ap-card.online .ap-status {
    color: #22c55e;
}

.ap-card.recent .ap-status {
    color: #eab308;
}

.ap-card.static .ap-status {
    color: #38bdf8;
}

.ap-card.offline .ap-status {
    color: #64748b;
}

/* ========================
   NETWORK SECTIONS
======================== */

.network-section-wrapper {
    backdrop-filter: blur(6px);
}

/* AUTORIZZATI → verde leggero */
.network-section-wrapper.autorizzati {
    border: 1px solid rgba(34,197,94,0.2);
}

/* RILEVATI → blu */
.network-section-wrapper.rilevati {
    border: 1px solid rgba(56,189,248,0.2);
}
/* ELITE highlight leggero */
.ap-card.elite {
    border: 1px solid rgba(212,166,42,0.8);
    box-shadow:
        0 0 14px rgba(212,166,42,0.25),
        inset 0 0 6px rgba(212,166,42,0.08);
}
.elite-text {
    color: #d4a62a;
    font-weight: 700;
}

.network-section .ap-desc {
    margin-bottom: 18px;
    opacity: 0.85;
}

/* =========================
   GUIDA A SCOMPARSA
========================= */

.network-guide-toggle {
    margin-top: 8px;
    font-size: 12px;
    color: #38bdf8;
    cursor: pointer;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.network-guide-toggle:hover {
    color: #0ea5e9;
}

.network-guide-box {
    margin-top: 12px;
    padding: 12px;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid #1e293b;
    font-size: 12px;
    color: #cbd5e1;
    line-height: 1.5;
}

.guide-title {
    font-weight: 700;
    margin-bottom: 6px;
    color: #38bdf8;
}

/* =========================
   WALLET MODULE
========================= */

.wallet-module {
    padding: 20px;
}

.wallet-title {
    font-size: 22px;
    margin-bottom: 20px;
    color: #fff;
}

.wallet-card {
    background: #1f2a36;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.wallet-label {
    font-size: 13px;
    opacity: 0.7;
    margin-bottom: 5px;
}

.wallet-balance {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 5px;
}

.wallet-desc {
    font-size: 14px;
    margin-bottom: 5px;
}

.wallet-sub {
    font-size: 12px;
    opacity: 0.6;
}

.wallet-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.wallet-btn {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 8px;
    background: #d4a62a;
    color: #000;
    font-weight: bold;
    cursor: pointer;
}

.wallet-btn:hover {
    opacity: 0.9;
}

.wallet-coupon {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.wallet-coupon input {
    flex: 1;
    padding: 8px;
    border-radius: 6px;
    border: none;
}

.wallet-coupon button {
    padding: 8px 12px;
    border-radius: 6px;
    border: none;
    background: #4caf50;
    color: #fff;
    cursor: pointer;
}

.wallet-note {
    font-size: 12px;
    opacity: 0.6;
    margin-top: 10px;
}

/* storico */

.wallet-row {
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding: 8px 0;
}

.wallet-amount {
    font-weight: bold;
}

.wallet-amount.plus {
    color: #4caf50;
}

.wallet-amount.minus {
    color: #f44336;
}

.wallet-service {
    font-size: 14px;
}

.wallet-date {
    font-size: 12px;
    opacity: 0.6;
}

.wallet-extra {
    font-size: 12px;
    opacity: 0.7;
}

/* link */

.wallet-link {
    margin-top: 10px;
    background: none;
    border: none;
    color: #d4a62a;
    cursor: pointer;
}

/* autoricarica */

.wallet-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

/* STATO GATEWAY */
.status-card.online {
    background: #0f2f1f;
    border: 1px solid #1f7a4f;
}

.status-card.online .status-value {
    color: #2ecc71;
}

.status-card.offline {
    background: #2a2a2a;
    border: 1px solid #555;
}

.status-card.offline .status-value {
    color: #999;
}

/* STATO INIZIALE (AI ANALISI) */
.status-card .status-value {
    color: #8aa2c4;
}

.status-card.warning {
    background: #3b2d08;
    border: 1px solid #e0a800;
}

.status-card.warning .status-value {
    color: #ffd666;
}

/* =========================================
   AUTOPILOTA GLOW (SOFT)
========================================= */

.autopilot-glow {
    position: relative;
    border-color: #1e293b;
}

/* alone leggero */
.autopilot-glow::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 8px;

    box-shadow: 0 0 0px rgba(56,189,248,0.0);

    animation: autopilotPulse 4s ease-in-out infinite;
    pointer-events: none;
}

/* animazione lentissima */
@keyframes autopilotPulse {

    0% {
        box-shadow: 0 0 0px rgba(56,189,248,0.0);
    }

    50% {
        box-shadow: 0 0 12px rgba(56,189,248,0.15);
    }

    100% {
        box-shadow: 0 0 0px rgba(56,189,248,0.0);
    }
}



/* =========================================
   ALERT PANEL — AI STYLE
========================================= */

.alerts-panel {
    margin-top: 20px;
    padding: 15px;
    background: #020617;
    border: 1px solid #1e293b;
    border-radius: 12px;
}

/* titolo */
.alerts-header {
    font-size: 13px;
    color: #38bdf8;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

/* base alert */
.alert-item {
    padding: 16px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.5;
    position: relative;
    overflow: hidden;
}

/* glow AI leggero */
.alert-item::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    pointer-events: none;
    animation: alertPulse 6s ease-in-out infinite;
}

/* =========================================
   ALERT OK (STATO STABILE)
========================================= */

.alert-ok {
    background: linear-gradient(180deg, #021a17, #010d0c);
    border: 1px solid #134e4a;
    color: #5eead4;
}

/* =========================================
   ALERT ERROR (ATTENZIONE TECNICA)
========================================= */

.alert-error {
    background: linear-gradient(180deg, #140909, #070303);
    border: 1px solid #3b1f1f;
    color: #fca5a5;
}

/* =========================================
   BASE ALERT ITEM (STILE AVIONICO)
========================================= */

.alert-item {
    padding: 16px 16px 16px 42px;
    position: relative;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.5;
}

/* =========================================
   ICONA STATO (SISTEMA)
========================================= */

.alert-ok::after {
    content: "●";
    position: absolute;
    left: 14px;
    top: 18px;
    font-size: 10px;
    color: #5eead4;
    opacity: 0.7;
}

.alert-error::after {
    content: "▲";
    position: absolute;
    left: 14px;
    top: 17px;
    font-size: 10px;
    color: #fca5a5;
    opacity: 0.7;
}

/* =========================================
   LINK ASSISTENZA
========================================= */

.alert-item a {
    display: inline-block;
    margin-top: 10px;
    font-size: 12px;
    text-decoration: none;
    color: #38bdf8;
    opacity: 0.9;
}

.alert-item a:hover {
    text-decoration: underline;
    opacity: 1;
}

/* =========================================
   ANIMAZIONE AI (RESPIRAZIONE LEGGERA)
========================================= */

.alert-item::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    pointer-events: none;
    animation: alertPulse 8s ease-in-out infinite;
}

@keyframes alertPulse {

    0% {
        box-shadow: 0 0 0px rgba(56,189,248,0.0);
    }

    50% {
        box-shadow: 0 0 6px rgba(56,189,248,0.06);
    }

    100% {
        box-shadow: 0 0 0px rgba(56,189,248,0.0);
    }
}