/* ============================================================
   Perception — tema "liquid glass · dark · neon"
   ============================================================ */
:root{
  --bg-0:#05060d;
  --bg-1:#0a0c18;
  --ink:#eaf0ff;
  --muted:#97a0c4;

  --cyan:#27e6ff;
  --violet:#9a6bff;
  --pink:#ff4fd8;
  --green:#33f0a8;
  --amber:#ffc24b;
  --red:#ff5d73;
  --orange:#ff8c42;  /* needs_human — AI ha tentato, serve occhio umano */

  --glass:rgba(18,22,40,.66);
  --glass-2:rgba(28,33,56,.82);
  --card-bg:rgba(15,18,34,.86);
  --stroke:rgba(255,255,255,.14);
  --stroke-strong:rgba(255,255,255,.24);

  --radius:18px;
  --blur:18px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px;line-height:1.45;
  background:var(--bg-0);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(39,230,255,.28)}

/* --- Sfondo aurora animato --------------------------------- */
.aurora{position:fixed;inset:0;z-index:-2;overflow:hidden;background:
  radial-gradient(1200px 800px at 110% -10%, rgba(154,107,255,.18), transparent 60%),
  radial-gradient(1000px 700px at -10% 110%, rgba(39,230,255,.16), transparent 60%),
  var(--bg-0);}
.aurora span{position:absolute;display:block;border-radius:50%;filter:blur(80px);opacity:.5;mix-blend-mode:screen}
.aurora span:nth-child(1){width:46vw;height:46vw;left:-8vw;top:-6vw;background:var(--cyan);animation:drift1 22s ease-in-out infinite}
.aurora span:nth-child(2){width:42vw;height:42vw;right:-10vw;top:12vh;background:var(--violet);animation:drift2 26s ease-in-out infinite}
.aurora span:nth-child(3){width:38vw;height:38vw;left:24vw;bottom:-14vw;background:var(--pink);opacity:.36;animation:drift3 30s ease-in-out infinite}
@keyframes drift1{50%{transform:translate(6vw,8vh) scale(1.1)}}
@keyframes drift2{50%{transform:translate(-7vw,5vh) scale(1.08)}}
@keyframes drift3{50%{transform:translate(4vw,-7vh) scale(1.12)}}
@media (prefers-reduced-motion:reduce){.aurora span{animation:none}}

/* --- Topbar ------------------------------------------------ */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:.8rem 1.1rem;background:rgba(9,11,22,.78);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));
  border-bottom:1px solid var(--stroke)}
.brand{display:flex;align-items:center;gap:.4rem;text-decoration:none;font-family:"Space Grotesk",sans-serif;
  font-weight:700;font-size:1.2rem;color:#fff}
.brand span{background:linear-gradient(90deg,var(--cyan),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 22px rgba(39,230,255,.35)}
.topbar nav a{color:var(--muted);text-decoration:none;margin-left:1.1rem;font-weight:600;font-size:.95rem;transition:.15s}
.topbar nav a:hover{color:var(--ink);text-shadow:0 0 14px rgba(39,230,255,.5)}

.container{max-width:780px;margin:0 auto;padding:1.2rem 1rem 7rem}
h1{font-family:"Space Grotesk",sans-serif;font-size:1.7rem;font-weight:700;margin:.3rem 0 1.2rem;letter-spacing:-.01em;
  background:linear-gradient(92deg,#fff,var(--cyan) 60%,var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-size:1.05rem;margin:0 0 1rem;padding-left:.7rem;position:relative;color:#fff;letter-spacing:.01em}
h2::before{content:"";position:absolute;left:0;top:.1em;bottom:.1em;width:3px;border-radius:3px;
  background:linear-gradient(var(--cyan),var(--violet));box-shadow:0 0 12px rgba(39,230,255,.7)}

/* --- Card di vetro (opache) -------------------------------- */
.card{position:relative;background:var(--card-bg);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));
  border:1px solid var(--stroke);border-radius:var(--radius);padding:1.15rem;margin-bottom:1.1rem;
  box-shadow:0 10px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.07)}

/* --- Campi ------------------------------------------------- */
.campo{margin-bottom:.95rem}
.campo label{display:block;font-weight:600;font-size:.86rem;margin-bottom:.35rem;color:#cdd5f4}
.campo input,.campo select,.campo textarea{width:100%;padding:.72rem .85rem;font-size:1rem;color:var(--ink);
  background:rgba(255,255,255,.05);border:1px solid var(--stroke);border-radius:12px;transition:.16s;font-family:inherit}
.campo input::placeholder,.campo textarea::placeholder{color:#6c7596}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--cyan);
  background:rgba(39,230,255,.07);box-shadow:0 0 0 3px rgba(39,230,255,.18),0 0 22px rgba(39,230,255,.22)}
.campo select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 1.15em,calc(100% - 15px) 1.15em;background-size:5px 5px;background-repeat:no-repeat}
.campo select option{background:#0c1020;color:var(--ink)}
.campo.has-error input,.campo.has-error select{border-color:var(--red);box-shadow:0 0 0 3px rgba(255,93,115,.16)}
.err{color:#ff8a9b;font-size:.82rem;display:block;margin-top:.3rem;font-weight:600}
.hint{color:var(--muted);font-size:.82rem;display:block;margin-top:.3rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
@media(max-width:480px){.grid2{grid-template-columns:1fr}}

/* --- Toggle (radio a bottoni) ------------------------------ */
.toggle{display:flex;gap:.5rem;flex-wrap:wrap}
.toggle-opt{position:relative;flex:1;min-width:64px}
.toggle-opt input{position:absolute;opacity:0;inset:0;cursor:pointer}
.toggle-opt span{display:block;text-align:center;padding:.7rem .5rem;border:1px solid var(--stroke);border-radius:12px;
  font-weight:600;background:rgba(255,255,255,.04);color:#cdd5f4;transition:.16s;cursor:pointer}
.toggle-opt input:checked + span{color:#04121a;border-color:transparent;
  background:linear-gradient(135deg,var(--cyan),var(--violet));box-shadow:0 0 22px rgba(39,230,255,.5)}
.toggle-opt input:focus-visible + span{box-shadow:0 0 0 3px rgba(39,230,255,.35)}
.check{display:flex;align-items:center;gap:.55rem;font-weight:500;margin:.6rem 0;color:#cdd5f4}
.check input{width:auto;accent-color:var(--cyan)}

/* --- Box codice fiscale ------------------------------------ */
.cf-box{display:flex;flex-direction:column;gap:.2rem;margin:.7rem 0;padding:.8rem 1rem;border-radius:14px;
  background:linear-gradient(135deg,rgba(51,240,168,.14),rgba(39,230,255,.06));
  border:1px solid rgba(51,240,168,.5);box-shadow:0 0 26px rgba(51,240,168,.16),inset 0 1px 0 rgba(255,255,255,.08)}
.cf-label{font-size:.72rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.12em}
.cf-value{font-size:1.32rem;font-weight:800;letter-spacing:.08em;font-family:ui-monospace,"SF Mono",Menlo,monospace;
  color:#eafff6;text-shadow:0 0 18px rgba(51,240,168,.55)}
.cf-decode{font-size:.82rem;color:var(--muted)}
.cf-box.ko{background:linear-gradient(135deg,rgba(255,93,115,.16),transparent);border-color:rgba(255,93,115,.55);box-shadow:0 0 22px rgba(255,93,115,.2)}
.cf-box.ko .cf-value{color:#ffd7dd;text-shadow:0 0 16px rgba(255,93,115,.5)}

/* --- Autocomplete ------------------------------------------ */
.ac-wrap{position:relative}
.ac-list{position:absolute;z-index:30;left:0;right:0;margin-top:4px;border-radius:12px;overflow:hidden;
  background:rgba(11,14,26,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--stroke-strong);max-height:240px;overflow-y:auto;box-shadow:0 18px 44px rgba(0,0,0,.6)}
.ac-list div{padding:.62rem .85rem;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.05);transition:.12s}
.ac-list div:last-child{border-bottom:none}
.ac-list div:hover,.ac-list div.active{background:rgba(39,230,255,.16);color:#fff}

/* --- Barra invio + bottone --------------------------------- */
.submitbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;justify-content:center;padding:.8rem 1rem;
  background:rgba(8,10,20,.78);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));border-top:1px solid var(--stroke)}
.btn-primary{width:100%;max-width:740px;padding:.9rem 2rem;font-size:1.05rem;font-weight:700;cursor:pointer;color:#04121a;
  border:none;border-radius:14px;font-family:"Space Grotesk",sans-serif;letter-spacing:.02em;
  background:linear-gradient(120deg,var(--cyan),var(--violet));box-shadow:0 8px 30px rgba(39,230,255,.4),0 0 0 1px rgba(255,255,255,.12) inset;
  transition:.16s}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 12px 38px rgba(154,107,255,.55),0 0 0 1px rgba(255,255,255,.2) inset}
.btn-primary:active{transform:translateY(0)}

/* --- Alert ------------------------------------------------- */
.alert{padding:.85rem 1.05rem;border-radius:14px;margin-bottom:1.1rem;font-weight:500;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--stroke)}
.alert.error{background:rgba(255,93,115,.14);border-color:rgba(255,93,115,.45);color:#ffc6cd}
.alert.ok{background:rgba(51,240,168,.14);border-color:rgba(51,240,168,.45);color:#bdffe4}
.alert ul{margin:.45rem 0 0;padding-left:1.1rem}

/* --- Esiti: contatori -------------------------------------- */
.counters{display:grid;grid-template-columns:repeat(6,1fr);gap:.6rem;margin-bottom:1.1rem}
@media(max-width:620px){.counters{grid-template-columns:repeat(3,1fr)}}
@media(max-width:400px){.counters{grid-template-columns:repeat(2,1fr)}}
.counter{padding:.7rem;text-align:center;font-size:.74rem;color:var(--muted);border-radius:14px;
  background:var(--glass);border:1px solid var(--stroke);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.counter span{display:block;font-size:1.5rem;font-weight:800;font-family:"Space Grotesk",sans-serif;color:#fff;margin-bottom:.1rem}
.counter.pending span{color:#aeb6d6;text-shadow:0 0 16px rgba(174,182,214,.5)}
.counter.running span{color:var(--cyan);text-shadow:0 0 16px rgba(39,230,255,.6)}
.counter.success span{color:var(--green);text-shadow:0 0 16px rgba(51,240,168,.6)}
.counter.needs_human span{color:var(--orange);text-shadow:0 0 16px rgba(255,140,66,.65)}
.counter.failed span{color:var(--red);text-shadow:0 0 16px rgba(255,93,115,.6)}
.counter.skipped span{color:var(--amber);text-shadow:0 0 16px rgba(255,194,75,.6)}

/* --- Filtri ------------------------------------------------ */
.filtri{display:flex;gap:.55rem;flex-wrap:wrap;margin-bottom:1.1rem}
.filtri input,.filtri select{flex:1;min-width:130px;padding:.62rem .8rem;color:var(--ink);
  background:rgba(255,255,255,.05);border:1px solid var(--stroke);border-radius:12px}
.filtri input:focus,.filtri select:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(39,230,255,.16)}
.filtri select option{background:#0c1020}
.filtri button{padding:.62rem 1.2rem;font-weight:700;color:#04121a;border:none;border-radius:12px;cursor:pointer;
  background:linear-gradient(120deg,var(--cyan),var(--violet));box-shadow:0 6px 20px rgba(39,230,255,.35)}
.link{color:var(--cyan);text-decoration:none;font-weight:600;align-self:center}
.link:hover{text-shadow:0 0 14px rgba(39,230,255,.6)}

/* --- Esiti: righe ------------------------------------------ */
.tabella{display:flex;flex-direction:column;gap:.6rem}
.riga{display:grid;grid-template-columns:auto 1fr auto;gap:.8rem;align-items:center;text-decoration:none;color:var(--ink);
  padding:.8rem .95rem;border-radius:14px;background:var(--glass);border:1px solid var(--stroke);border-left:4px solid var(--stroke);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:.16s}
.riga:hover{transform:translateY(-2px);background:var(--glass-2);border-color:var(--stroke-strong)}
.riga.stato-pending{border-left-color:#aeb6d6}
.riga.stato-running{border-left-color:var(--cyan);box-shadow:0 0 22px rgba(39,230,255,.14)}
.riga.stato-success{border-left-color:var(--green);box-shadow:0 0 22px rgba(51,240,168,.12)}
.riga.stato-needs_human{border-left-color:var(--orange);box-shadow:0 0 22px rgba(255,140,66,.18)}
.riga.stato-failed{border-left-color:var(--red);box-shadow:0 0 22px rgba(255,93,115,.12)}
.riga.stato-skipped{border-left-color:var(--amber)}

/* indicatore di stato: pallino neon + etichetta (niente emoji) */
.r-stato{display:flex;flex-direction:column;align-items:center;gap:.32rem;min-width:64px;font-size:.66rem;color:var(--muted);text-align:center}
.dot{width:11px;height:11px;border-radius:50%;background:var(--muted);color:var(--muted);box-shadow:0 0 10px currentColor}
.riga.stato-pending .dot{background:#aeb6d6;color:#aeb6d6}
.riga.stato-running .dot{background:var(--cyan);color:var(--cyan)}
.riga.stato-success .dot{background:var(--green);color:var(--green)}
.riga.stato-needs_human .dot{background:var(--orange);color:var(--orange);animation:pulse-orange 2s ease-in-out infinite}
.riga.stato-failed .dot{background:var(--red);color:var(--red)}
.riga.stato-skipped .dot{background:var(--amber);color:var(--amber)}
@keyframes pulse-orange{0%,100%{box-shadow:0 0 8px var(--orange)}50%{box-shadow:0 0 22px var(--orange)}}
.r-main strong{display:block;font-weight:700}
.r-sub{font-size:.82rem;color:var(--muted)}
.r-meta{text-align:right;font-size:.76rem;color:var(--muted);display:flex;flex-direction:column;gap:.12rem}
.r-tag{font-weight:700;color:var(--cyan)}
.r-fase{color:#cdd5f4}

/* badge di stato (dettaglio) */
.badge{display:inline-block;font-size:.78rem;font-weight:700;padding:.18rem .6rem;border-radius:999px;
  border:1px solid var(--stroke);vertical-align:middle;margin-left:.45rem;-webkit-text-fill-color:initial}
.badge.stato-pending{color:#aeb6d6;border-color:rgba(174,182,214,.5)}
.badge.stato-running{color:var(--cyan);border-color:rgba(39,230,255,.5);box-shadow:0 0 16px rgba(39,230,255,.2)}
.badge.stato-success{color:var(--green);border-color:rgba(51,240,168,.5);box-shadow:0 0 16px rgba(51,240,168,.2)}
.badge.stato-needs_human{color:var(--orange);border-color:rgba(255,140,66,.55);box-shadow:0 0 16px rgba(255,140,66,.2)}
.badge.stato-failed{color:var(--red);border-color:rgba(255,93,115,.5)}
.badge.stato-skipped{color:var(--amber);border-color:rgba(255,194,75,.5)}

/* --- Dettaglio: liste -------------------------------------- */
.dl{display:grid;grid-template-columns:auto 1fr;gap:.45rem 1rem;margin:0}
.dl dt{color:var(--muted);font-weight:600}
.dl dd{margin:0;color:var(--ink)}

/* --- Scrollbar --------------------------------------------- */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(154,107,255,.35);border-radius:10px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(39,230,255,.45);background-clip:content-box}

/* --- Intro: scelta gestore --------------------------------- */
.intro-hero{text-align:center;margin:1.6rem 0 1.9rem}
.intro-sub{color:var(--muted);margin-top:-.5rem}
.gestori-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media(max-width:640px){.gestori-grid{grid-template-columns:1fr}}
.gestore-card{position:relative;display:flex;flex-direction:column;gap:.45rem;padding:1.6rem 1.25rem;min-height:200px;
  border-radius:var(--radius);background:var(--card-bg);border:1px solid var(--stroke);text-decoration:none;color:var(--ink);
  backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));
  box-shadow:0 10px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.07);transition:.18s;overflow:hidden}
.gestore-card .g-nome{font-family:"Space Grotesk",sans-serif;font-size:1.95rem;font-weight:700;margin-top:.3rem}
.gestore-card .g-desc{color:var(--muted);font-size:.86rem}
.g-badge{align-self:flex-start;font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:.22rem .6rem;border-radius:999px;border:1px solid var(--stroke);color:var(--muted)}
.g-cta{margin-top:auto;color:var(--cyan);font-weight:700;font-size:.92rem;text-shadow:0 0 14px rgba(39,230,255,.4)}
.gestore-card.pronto{border-color:rgba(39,230,255,.45);
  box-shadow:0 10px 40px rgba(0,0,0,.5),0 0 30px rgba(39,230,255,.12),inset 0 1px 0 rgba(255,255,255,.08)}
.gestore-card.pronto::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px 160px at 100% 0,rgba(154,107,255,.18),transparent 70%)}
.gestore-card.pronto .g-nome{background:linear-gradient(92deg,#fff,var(--cyan) 70%,var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.gestore-card.pronto .g-badge{color:var(--green);border-color:rgba(51,240,168,.5);box-shadow:0 0 16px rgba(51,240,168,.2)}
.gestore-card.pronto:hover{transform:translateY(-4px);border-color:rgba(39,230,255,.7);
  box-shadow:0 16px 50px rgba(0,0,0,.55),0 0 40px rgba(39,230,255,.25)}
.gestore-card.disabled{opacity:.48;filter:grayscale(.4);cursor:not-allowed}
.gestore-card.disabled .g-badge.soon{color:var(--amber);border-color:rgba(255,194,75,.4)}

/* --- Gestore card: stato "dev" ----------------------------- */
.gestore-card.dev{border-color:rgba(255,194,75,.4);
  box-shadow:0 10px 40px rgba(0,0,0,.5),0 0 30px rgba(255,194,75,.1),inset 0 1px 0 rgba(255,255,255,.07)}
.gestore-card.dev::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(400px 150px at 100% 0,rgba(255,194,75,.12),transparent 70%)}
.gestore-card.dev .g-nome{background:linear-gradient(92deg,#fff,var(--amber) 70%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.g-badge.dev{color:var(--amber);border-color:rgba(255,194,75,.55);box-shadow:0 0 14px rgba(255,194,75,.18)}
.gestore-card.dev .g-cta{color:var(--amber);text-shadow:0 0 14px rgba(255,194,75,.4)}
.gestore-card.dev:hover{transform:translateY(-4px);border-color:rgba(255,194,75,.7);
  box-shadow:0 16px 50px rgba(0,0,0,.55),0 0 38px rgba(255,194,75,.22)}

/* --- Pagina Edison "in sviluppo" --------------------------- */
/* --- Admin: tabella account -------------------------------- */
.acc-table{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}
.acc-row{display:grid;grid-template-columns:2.4fr 1fr .9fr .9fr 1.2fr;gap:.7rem;align-items:center;
  padding:.7rem .85rem;border-radius:12px;background:var(--glass);border:1px solid var(--stroke);border-left:4px solid var(--stroke)}
.acc-head{background:transparent;border:none;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);font-weight:700;padding-bottom:0}
.acc-row.stato-active{border-left-color:var(--green)}
.acc-row.stato-needs_login{border-left-color:var(--amber)}
.acc-row.stato-read_only{border-left-color:var(--cyan)}
.acc-row.stato-disabled{border-left-color:var(--muted);opacity:.6}
.acc-name{display:flex;flex-direction:column;gap:.15rem}
.acc-name small{color:var(--muted);font-size:.76rem}
.acc-err{color:#ff8a9b!important}
.acc-badge{display:inline-block;font-size:.74rem;font-weight:700;padding:.16rem .55rem;border-radius:999px;border:1px solid var(--stroke)}
.acc-badge.stato-active{color:var(--green);border-color:rgba(51,240,168,.5)}
.acc-badge.stato-needs_login{color:var(--amber);border-color:rgba(255,194,75,.5)}
.acc-badge.stato-read_only{color:var(--cyan);border-color:rgba(39,230,255,.5)}
.acc-badge.stato-disabled{color:var(--muted)}
.acc-load{font-family:ui-monospace,Menlo,monospace;font-size:.88rem}
.acc-free{color:var(--green);font-style:normal;font-size:.74rem;margin-left:.3rem}
.acc-full{color:var(--amber);font-style:normal;font-size:.74rem;margin-left:.3rem}
.acc-cdp{font-family:ui-monospace,Menlo,monospace;color:var(--muted);font-size:.86rem}
.acc-actions select{width:100%;padding:.42rem .5rem;font-size:.82rem;color:var(--ink);
  background:rgba(255,255,255,.05);border:1px solid var(--stroke);border-radius:9px}
.acc-actions select option{background:#0c1020}
.inline{margin:0}
.acc-add{margin-top:.5rem}
.acc-add summary{cursor:pointer;color:var(--cyan);font-weight:600;font-size:.9rem;padding:.4rem 0}
.acc-form{margin-top:.6rem;padding-top:.6rem;border-top:1px solid var(--stroke)}
.btn-inline{padding:.6rem 1.4rem;font-weight:700;color:#04121a;border:none;border-radius:11px;cursor:pointer;
  background:linear-gradient(120deg,var(--cyan),var(--violet));box-shadow:0 6px 20px rgba(39,230,255,.3)}
.howto{margin:.3rem 0 0;padding-left:1.1rem;color:#cdd5f4;font-size:.9rem;line-height:1.6}
.howto li{margin-bottom:.5rem}
.howto em{color:var(--cyan);font-style:normal;font-weight:600}
@media(max-width:640px){.acc-row{grid-template-columns:1fr 1fr;gap:.4rem}.acc-cdp,.acc-head{display:none}}

.dev-badge-large{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:.4rem 1.1rem;border-radius:999px;color:var(--amber);border:1px solid rgba(255,194,75,.55);
  box-shadow:0 0 18px rgba(255,194,75,.22);background:rgba(255,194,75,.08)}
.btn-back{display:inline-block;margin-top:1.6rem;color:var(--muted);text-decoration:none;font-weight:600;
  font-size:.95rem;padding:.6rem 1.1rem;border:1px solid var(--stroke);border-radius:12px;
  background:rgba(255,255,255,.04);transition:.15s}
.btn-back:hover{color:var(--ink);border-color:var(--stroke-strong);background:rgba(255,255,255,.08)}

/* --- Box comando bot (./botfull) --------------------------- */
.cmd-box{position:relative;margin:.8rem 0 .5rem;padding:.8rem 1rem;border-radius:12px;
  background:rgba(4,8,16,.7);border:1px solid rgba(39,230,255,.35);box-shadow:inset 0 0 22px rgba(39,230,255,.08)}
.cmd-label{display:block;font-size:.68rem;color:var(--muted);font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;margin-bottom:.4rem}
.cmd-box code{display:block;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.86rem;color:#bdffe4;
  word-break:break-all;line-height:1.5;padding-right:4.5rem}
.cmd-copy{position:absolute;top:.7rem;right:.7rem;padding:.35rem .8rem;font-size:.78rem;font-weight:700;
  cursor:pointer;color:#04121a;border:none;border-radius:9px;background:linear-gradient(120deg,var(--cyan),var(--violet));
  box-shadow:0 4px 14px rgba(39,230,255,.35)}
.cmd-copy:hover{filter:brightness(1.08)}
.alert.ok .cmd-box code{-webkit-text-fill-color:#bdffe4}


/* ============================================================
   Ottimizzazioni per Smartphone e Mobile (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {
  .container {
    padding: 0.8rem 0.5rem 6rem; /* riduce i margini per gli schermi piccoli */
  }
  .card {
    padding: 0.9rem;
    border-radius: 14px;
    margin-bottom: 0.9rem;
  }
  h1 {
    font-size: 1.45rem;
    margin-bottom: 0.9rem;
  }
  h2 {
    font-size: 0.95rem;
    margin-bottom: 0.8rem;
  }
  .grid2 {
    grid-template-columns: 1fr !important; /* forza l'incolonnamento di tutti i campi */
    gap: 0.6rem;
  }
  .campo input, .campo select, .campo textarea {
    padding: 0.65rem 0.75rem;
    font-size: 0.95rem;
  }
  .toggle {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 0.4rem;
    width: 100%;
  }
  .toggle-opt {
    width: 100%;
    min-width: 0;
  }
  .toggle-opt span {
    padding: 0.6rem 0.4rem;
    font-size: 0.88rem;
    border-radius: 10px;
  }
  .submitbar {
    padding: 0.6rem 0.8rem;
  }
  .btn-primary {
    padding: 0.8rem 1.5rem;
    font-size: 0.95rem;
    border-radius: 11px;
  }
  .cmd-box {
    padding: 0.65rem 0.8rem;
  }
  .cmd-box code {
    font-size: 0.78rem;
    padding-right: 0;
    margin-bottom: 2.2rem; /* fa spazio al pulsante copia su mobile */
  }
  .cmd-copy {
    position: relative;
    top: auto;
    right: auto;
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.5rem;
    font-size: 0.8rem;
    margin-top: 0.5rem;
  }
  .topbar {
    padding: 0.6rem 0.8rem;
  }
  .topbar nav {
    gap: 12px !important;
  }
  .topbar nav a {
    font-size: 0.85rem;
    margin-left: 0.5rem;
  }
  .topbar nav span {
    font-size: 0.8rem !important;
    padding-left: 8px !important;
    margin-left: 0 !important;
  }
}