:root{
  --bg:#0a0b0d;
  --bg2:#12141a;
  --panel:#171a22;
  --panel-2:#1d2230;
  --text:#e9eef6;
  --muted:#a8b0bf;
  --brand:#1ea4ff;    /* richiami stile time4stream */
  --brand-2:#00d1ff;
  --ok-bg:#dbf5d9; --ok-fg:#0b6b0b; --ok-bd:#b6e4b3;
  --warn-bg:#fff3cd; --warn-fg:#7a5b00; --warn-bd:#ffe49a;
  --danger:#ff5f5f;
  --border:#2a3243;
  --btn:#1f2533; --btn-h:#263044;
  --radius:14px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  background:linear-gradient(180deg,var(--bg),var(--bg2));
  color:var(--text); line-height:1.45;
}

a{color:var(--brand); text-decoration:none}
a:hover{opacity:.9}

.container{width:100%; max-width:1100px; margin:0 auto; padding:16px; padding-bottom:64px;}

.topbar{
  position:sticky; top:0; z-index:5;
  background:rgba(10,11,13,.8); backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid var(--border);
}
.topbar-row{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 0;}
.nav-left a{margin-right:14px; padding:8px 10px; border-radius:10px; background:transparent}
.nav-left a:hover{background:rgba(255,255,255,0.06)}
.brand{font-weight:700; color:var(--brand-2)}

.nav-right .page-title{opacity:.9; font-weight:600}

.card{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px; margin:16px 0;
  box-shadow:0 8px 30px rgba(0,0,0,.25);
}

h2,h3{margin:0 0 10px 0}
code{background:#0f1320; border:1px solid var(--border); padding:2px 6px; border-radius:8px; color:#cde3ff}

table{width:100%; border-collapse:collapse; font-size:14px}
th,td{border-bottom:1px solid var(--border); padding:8px; vertical-align:middle}
th{color:#c7d3ea; text-align:left}
tr:hover td{background:rgba(255,255,255,0.03)}

.full{width:100%}
.scroll{overflow:auto}

input,select,button{
  background:#0f1320; color:var(--text);
  border:1px solid var(--border);
  border-radius:10px; padding:8px 10px; outline:none;
}
input:focus,select:focus{border-color:#365584}

.btn{
  background:var(--btn); border:1px solid var(--border); cursor:pointer;
  padding:8px 12px; border-radius:12px; color:#eef5ff; font-weight:600;
}
.btn:hover{background:var(--btn-h)}
.btn.danger{border-color:var(--danger); color:#ffd7d7}

.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:#0f1320; border:1px solid var(--border); color:#e8f3ff;
  padding:10px 14px; border-radius:12px; box-shadow:0 6px 22px rgba(0,0,0,.35);
  transition:opacity .25s ease, transform .25s ease;
}
.toast.hide{opacity:0; pointer-events:none; transform:translateX(-50%) translateY(8px)}
.toast.show{opacity:1}

/* badge stato uploader */
.badge{display:inline-block; padding:4px 8px; border-radius:14px; font-size:12px; font-weight:600;}
.badge-ok{ background:var(--ok-bg); color:var(--ok-fg); border:1px solid var(--ok-bd); }
.badge-warn{ background:var(--warn-bg); color:var(--warn-fg); border:1px solid var(--warn-bd); }

/* piccole utility */
.mt-8{margin-top:8px}
.mt-12{margin-top:12px}

/* Log box */
.logbox{
  background: #0f1529;          /* scuro ma non nero */
  color: #dbe4ff;                /* testo chiaro leggibile */
  border: 1px solid var(--border);
  padding: 12px;
  border-radius: 10px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Badge FTP (ok/errore) */
.ftp-chip{
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 6px;
  font-size: 12px;
  color: #fff;
  background: #2b3245;
  border: 1px solid rgba(255,255,255,.08);
}
.ftp-chip.ok{ background:#1f6f3d; border-color: rgba(0,0,0,.15); }
.ftp-chip.err{ background:#7e2121; border-color: rgba(0,0,0,.18); }

/* Stato nomi FTP già presenti (solo colore del testo) */
.ftp-tag { color:#b9c5d9; font-weight:600; margin-right:10px; }
.ftp-tag.ok  { color:#79e88f !important; }  /* verde OK */
.ftp-tag.err { color:#ff8b8b !important; }  /* rosso ERRORE */

/* Greyed-out per elementi disabilitati */
button[disabled], .is-disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  filter: grayscale(0.2);
  pointer-events: none;
}

/* --- Login verticale --- */
.form-login{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:stretch;
}
.form-login label{
  font-weight:600;
}
.form-login input[type="text"],
.form-login input[type="password"]{
  width:100%;
}
.form-login button{
  align-self:center;
  min-width:120px;
}