/* ==========================================================================
   /var/www/html/panel/styles.css — unified, deduped, JS-aligned (fixed)
   ========================================================================== */

/* ---------------------- THEME + RESET ---------------------- */
:root{
  --bg:#0b0e14;
  --panel:rgba(18,22,32,.92);
  --border:rgba(255,255,255,.08);
  --muted:#b7c0d1;
  --text:#e8ecf3;
  --accent:#f97316;
  --accent-2:#ef4444;
  --header-h:70px; /* aggiornato da script.js */
  --radius:12px;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --z-header:1000;
  --z-dropdown:1100;
  --z-modal:9990;      /* deve stare sopra al dropdown */
  --z-modal-overlay:9985;
  --z-alert:9999;      /* più alto del modal */
  --z-alert-overlay:9998;
  --z-autocomplete:1000;

  /* ===== DASHBOARD: logo size knob (UNICA MANOPOLA) ===== */
  /* alza/abbassa qui se vuoi più grande */
  --dash-logo-h: clamp(210px, 18vh, 320px);
}

*{box-sizing:border-box}

/* ---------------------- BASE PAGE ---------------------- */
html, body.panel-root{
  min-height:100%;
  overflow-x:auto; /* tabelle larghe scorrono in orizzontale */
  overflow-y:auto;
}
body.panel-root{
  visibility:hidden; /* reso visibile da bootstrap JS quando pronto */
  margin:0; color:#fff; font-family:Arial, sans-serif;
  background: var(--bg);
  padding-top: var(--header-h); /* header fixed */
}
body.panel-root::before{
  content:""; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:-1;
}
.hidden{display:none !important}
.sr-only{position:absolute !important; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden}

/* ---------------------- HEADER / NAV ---------------------- */
.panel-header{
  position:fixed; inset:0 0 auto 0; width:100%;
  background:#1f1f1f; border-bottom:6px solid #232120; z-index:var(--z-header);
}
.nav-inner{
  max-width:1260px; margin:0 auto; padding:10px 16px 10px 16px;
  display:flex; align-items:center; gap:16px;
}
.menu{display:flex; gap:16px; flex:1 1 auto; align-items:center; flex-wrap:wrap}
.menu a{
  color:#fff; text-decoration:none; font-size:15px;
  padding:8px 12px; border-radius:6px; transition:.18s;
}
.menu a:hover{background:#ff4500; color:#000}

/* Mobile hamburger */
#hamburger{
  display:none; background:#333; color:#fff; border:1px solid #444;
  border-radius:10px; padding:6px 10px; cursor:pointer;
}
@media (max-width:900px){ #hamburger{ display:inline-flex; align-items:center; gap:8px; } }

/* Mobile menu panel */
#mobileMenu{
  display:none; position:fixed; top:calc(var(--header-h) - 1px); left:0; right:0;
  background:#1f1f1f; border-bottom:1px solid #2a2a2a;
  box-shadow:0 12px 24px rgba(0,0,0,.35);
}
#mobileMenu.open{ display:block } /* toggle in script.js */
#mobileMenu .menu{ flex-direction:column; padding:10px 12px }
#mobileMenu .menu a{ width:100% }

/* User menu pill + dropdown */
.user-menu{
  display:flex; align-items:center; gap:8px;
  background:#333; color:#fff; padding:8px 12px; border-radius:8px;
  cursor:pointer; position:relative; user-select:none;
  border:1px solid #444;
}
.user-menu:hover{ background:#ff4500; color:#000 }
.dropdown{
  display:none; position:absolute; right:0; top:calc(100% + 8px); background:#222;
  min-width:180px; border-radius:8px; box-shadow:0 12px 24px rgba(0,0,0,.35); overflow:hidden;
  border:1px solid #2e2e2e; z-index:var(--z-dropdown);
}
.dropdown button{
  width:100%; padding:10px 12px; background:none; border:none; color:#fff; text-align:left; cursor:pointer
}
.dropdown button:hover{ background:#ff4500; color:#000 }

/* Badge ruolo/slots */
.badge{display:inline-block; margin-left:6px; padding:2px 8px; font-size:12px; border-radius:999px; background:#2b2b2b}
.badge.role[data-role="admin"]{background:#8e44ad}
.badge.role[data-role="premium"]{background:#16a085}
.badge.role[data-role="regular"]{background:#34495e}
.badge.slot{background:#3b3b3b}

/* Sposta il pill un filo dentro su desktop; mantieni leggibile su mobile */
.panel-header .nav-inner{ padding-right:20px }
#user-menu.user-menu{ margin-right:14px }
#user-menu .dropdown{ left:auto; right:0 }
@media (max-width:900px){
  .panel-header .nav-inner{ padding-right:12px }
  #user-menu.user-menu{
    margin-left:8px; margin-right:10px; padding:6px 8px; gap:6px;
    background:#333; border:1px solid #444; border-radius:10px;
  }
  header.panel-header #user-name{
    display:inline-block; color:inherit; background:transparent; border:0; width:auto; height:auto; padding:0;
    max-width:52vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  header.panel-header #user-dropdown{
    right:8px; left:auto; top:50px; min-width:180px; font-size:14px; z-index:var(--z-dropdown);
  }
}
@media (max-width:360px){
  header.panel-header #user-name{ max-width:48vw; font-size:13px }
  header.panel-header #user-slot-badge{ font-size:11px }
}

/* ---------------------- DASHBOARD GRID + CARDS ---------------------- */
.grid-panels{
  max-width:1620px; margin:22px auto 40px; padding:10px 16px;
  display:grid; gap:24px; grid-template-columns:1fr 1fr; grid-auto-rows:minmax(120px,auto);
  grid-template-areas:
    "general   maps"
    "wads      flags"
    "passwords configs"
    "server    server"
    "active    active";
  overflow:visible; align-content:start;
}
.left-column, .right-column{ display:contents }
.section{
  background:#252525; border:1px solid #2f2f2f; border-radius:10px;
  padding:16px 18px; box-shadow:0 4px 14px rgba(0,0,0,.25); color:var(--text)
}
.section h2{ margin:0 0 12px; text-align:center }
.section.section--flat{ background:transparent; border:none; box-shadow:none; padding:0; margin-top:8px }

/* Aree */
.card--general{ grid-area:general }
.card--wads{ grid-area:wads }
.card--maps{ grid-area:maps }
.card--flags{ grid-area:flags }
.card--passwords{ grid-area:passwords }
.card--server{ grid-area:server }
.card--configs{ grid-area:configs }
.card--active{ grid-area:active }
/* Advanced come blocco interno in Flags */
.card--advanced{ display:none !important }
.flags-advanced{ margin-top:24px; padding-top:16px; border-top:2px solid #333 }
.flags-advanced h3{ text-align:center; margin:0 0 8px }
.flags-advanced textarea{ display:block; width:100%; max-width:720px; margin:0 auto; resize:vertical }

/* ---------------------- FORMS / INPUTS ---------------------- */
label{ display:block; margin:8px 0 6px; font-weight:700; text-align:center }
input,select,textarea{
  width:100%; padding:8px; border:1px solid #555; border-radius:6px;
  background:#1d1d1d; color:#fff;
}
input[type="number"]{ width:70px; margin:0 auto; text-align:center; display:block }
.inline-checks{ display:flex; gap:18px; justify-content:center; margin-top:8px }

/* Hints + TIP pill */
.field-hint{
  display:block; margin-top:4px; font-size:clamp(11px,1.1vw,13px); line-height:1.35; color:var(--muted); opacity:.9;
}
.field-hint::before{
  content:"TIP"; display:inline-block; margin-right:6px; padding:1px 8px; border-radius:999px;
  border:1px solid rgba(249,115,22,.6); font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--accent);
}
.card--general .field-hint{ max-width:420px; margin-left:auto; margin-right:auto }

/* Server name + prefix/tag */
.server-name-row{ display:flex; justify-content:center; align-items:center; gap:5px; margin:1px 0 1px }
#server-name{ max-width:620px }
.server-prefix{ padding:6px 10px; background:#111; border:1px solid #555; color:#bbb; border-radius:6px; font-family:monospace; white-space:nowrap }
.server-prefix-input{
  width:auto; max-width:16ch; padding:6px 10px; background:#111; border:1px solid #555; color:#ddd; border-radius:6px; font-family:monospace; text-align:center; white-space:nowrap;
}
.server-prefix-input.editable{ background:#181818; border-color:#888; box-shadow:0 0 0 2px rgba(255,255,255,.06) inset }
#server-tag.server-tag,
.server-tag{
  width:auto; min-width:120px; max-width:220px; padding:8px 10px; text-align:center; background:#111; border:1px solid #555; color:#ddd; border-radius:6px; font-family:monospace; white-space:nowrap;
}
#server-tag[readonly]{ opacity:.85; cursor:not-allowed }
.tag-toggle{ background:#444; color:#fff; border:1px solid #666; border-radius:6px; padding:8px 10px; cursor:pointer }
.tag-toggle:hover{ background:#666 }
.tag-note{ display:block; text-align:center; color:#bbb; margin-top:2px }
@media (max-width:720px){
  .server-name-row{ flex-direction:column }
  #server-name{ width:100% }
  .server-tag, .tag-toggle{ width:160px }
  .server-prefix-input{ margin:0 auto }
}

/* Centra select chiave */
#game-mode, #iwad, #starting-map{ display:block; margin-left:auto !important; margin-right:auto !important }

/* Textarea grandi — solo resize verticale */
#wad-files, #optional-wads, #additional-parameters, #map-list{
  display:block; margin:10px auto 18px; width:min(760px,90%); max-width:100%; min-height:160px; line-height:1.35; resize:vertical;
}
#additional-parameters{ min-height:220px }
@media (max-width:600px){
  #wad-files, #optional-wads, #additional-parameters, #map-list{ width:94%; min-height:150px }
}

/* Passwords più lunghe */
.card--passwords input[type="text"]{
  width:90% !important; max-width:720px; margin-left:auto; margin-right:auto;
}

/* DB field box */
.form-section.database{
  margin:12px auto 0; max-width:440px; padding:16px; border-radius:10px;
  background:#1a1a1a; border:1px solid #333; box-shadow:0 0 12px rgba(0,255,0,.1);
}
.form-section.database label{ color:#00ff99; font-family:monospace; font-size:14px }
#database-file{ max-width:350px; background:#111; color:#0f0; border:1px solid #444 }

/* ---------------------- BUTTONS ---------------------- */
button{ background:#e74c3c; color:#fff; border:none; border-radius:8px; padding:10px 16px; cursor:pointer; font-weight:700 }
button:hover{ background:#c0392b }
.btn{
  display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 16px;
  border-radius:12px; border:1px solid var(--border); background:#171c28; color:var(--text); font-weight:700; cursor:pointer;
}
.btn:hover{ filter:brightness(1.05) }
.btn-primary{ background:linear-gradient(135deg, var(--accent), var(--accent-2)); border-color:transparent }
.btn-primary:hover{ filter:brightness(1.06) }
.btn-secondary{ background:#111827 }
.btn-danger{ background:#e23; color:#fff; border:0; cursor:pointer; padding:6px 10px; border-radius:6px }
.btn-danger:hover{ background:#c11 }

/* Azioni specifiche */
.flags-button{ display:block; margin:6px auto 12px; width:220px; background:#d35400 }
.flags-button:hover{ background:#e67e22 }
.server-button{ display:block; margin:0 auto 10px; width:220px; background:#27ae60 }
.server-button:hover{ background:#2ecc71 }
.config-button{ margin:6px 6px; width:220px }
.save-button{ background:#2980b9 } .save-button:hover{ background:#3498db }
.load-button{ background:#f39c12 } .load-button:hover{ background:#f1c40f }
.delete-button{ background:#c0392b } .delete-button:hover{ background:#e74c3c }

/* ---------------------- TABLES ---------------------- */
table{ width:100%; border-collapse:collapse; margin-top:8px }
th,td{ border:1px solid #444; padding:8px; text-align:left; vertical-align:top }
.status-online{ color:lime; font-weight:700 }
.status-offline{ color:#ff5b5b; font-weight:700 }
#my-servers-list{ text-align:center }
#my-servers-list table{ margin:0 auto; text-align:left }
.card--active #my-servers-list{ text-align:left }
.card--active table{ width:100%; margin:0 }

/* Admin user management table (rendered by JS) */
.admin-users-table{ width:100%; border-collapse:collapse; margin-top:8px }
.admin-users-table thead th{ background:#1b1f2a; color:#cbd5e1 }
.admin-users-table td, .admin-users-table th{ border:1px solid #2b2f36; padding:8px }
.admin-users-table select.admin-role,
.admin-users-table input.admin-slots{ width:100%; background:#0f1420; color:#e2e4e6; border:1px solid #2b3036; border-radius:6px; padding:6px }

/* ---------------------- UPLOAD SECTIONS ---------------------- */
.upload-section-highlight{
  background:#1a1a1a; border:2px solid #f44336; padding:16px; margin:18px auto 8px;
  max-width:520px; border-radius:8px; box-shadow:0 0 12px #f44336aa; text-align:center;
}
.upload-controls{ display:flex; justify-content:center; align-items:center; gap:10px; flex-wrap:wrap }
.upload-controls button{ width:200px }

/* My uploads */
.my-uploads{
  background:#1a1a1a; border:1px solid #333; border-radius:10px;
  padding:14px; box-shadow:0 0 12px rgba(244,67,54,.15); max-width:560px; margin:10px auto 0; text-align:center;
}
.my-uploads .controls{ display:flex; gap:10px; justify-content:center; align-items:center; flex-wrap:wrap }
#my-wads-select{ flex:0 1 360px; max-width:480px }
#delete-wad-btn{ width:auto; min-width:160px; background:#9b1c1c; border:1px solid #da3b3b }
#delete-wad-btn:hover{ background:#b51f1f }
.my-uploads .hint{
  font-size:clamp(11px,1.1vw,13px); line-height:1.35; color:#bdbdbd; max-width:640px; margin:8px auto 0; opacity:.9;
}

/* -------- WAD file limit counter -------- */
.wad-limit {
  margin: 6px auto 12px;
  max-width: 65%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.85rem;
  color: #cbd5e1;
  font-variant-numeric: tabular-nums;
}
.wad-limit strong { font-weight: 600; }
.wad-limit .wad-remaining-low { color: #fbbf24; }
.wad-limit .wad-remaining-zero { color: #f87171; }

/* ---- Skulltag Data toggle (final) ---- */
.skulltag-toggle {
  margin: 8px auto 10px;
  max-width: fit-content;
  font-size: 0.9rem;
  color: #e5e7eb;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.skulltag-toggle label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  text-align: left;
  font-weight: 600;
  cursor: pointer;
}
.skulltag-toggle input[type="checkbox"] { accent-color: #f97316; }
.skulltag-note { font-size: 0.8rem; color: #fbbf24; text-align: center; }
.skulltag-toggle .field-hint { display: block; margin-top: 4px; color: #facc15; }

/* ---------------------- FLAGS GRID ---------------------- */
.flags-grid{
  display:grid; gap:12px 18px; grid-template-columns:repeat(2, minmax(220px,1fr));
  max-width:720px; margin:0 auto;
}
.flag-item label{text-align:left}
@media (max-width:800px){ .flags-grid{ grid-template-columns:1fr } }

/* ---------------------- AUTOCOMPLETE (WAD + DB) ---------------------- */
.autocomplete-list, .autocomplete-box{
  position:absolute; left:0; top:0; width:100%; max-height:260px; overflow:auto;
  background:#fff; color:#333; border:1px solid #ccc; box-shadow:0 6px 12px rgba(0,0,0,.2);
  display:none; opacity:0; transition:opacity .15s; z-index:var(--z-autocomplete);
}
.autocomplete-list.show, .autocomplete-box.show{ display:block; opacity:1 }
.autocomplete-item{ padding:8px; cursor:pointer; border-bottom:1px solid #eee }
.autocomplete-item:hover{ background:#007bff; color:#fff }

/* ---------------------- LOGIN / AUTH ---------------------- */
.auth-viewport{
  min-height: calc(100vh - 64px);
  display:grid; place-items:center; padding:40px 16px;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(249,115,22,.10), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(239,68,68,.10), transparent 60%);
}
.auth-card{
  width:min(520px, 100%); padding:28px 24px; border:1px solid var(--border);
  background:var(--panel); border-radius:16px; box-shadow:var(--shadow); text-align:center; backdrop-filter:blur(8px);
}
.auth-logo{ width:120px; height:auto; opacity:.95; margin:2px auto 6px; display:block }
.auth-title{ margin:6px 0 2px; font-size:28px; font-weight:800; color:var(--text); letter-spacing:.2px }
.auth-sub{ margin:0 0 16px; color:var(--muted); font-size:14px }
.auth-form{ display:grid; gap:12px; justify-items:center; margin-top:6px }
.auth-form input{
  width: min(560px, 92%); height:46px; padding:10px 12px; border-radius:12px;
  border:1px solid var(--border); background:#0f1420; color:var(--text); outline:none;
}
.auth-form input::placeholder{ color:#8e97a7 }
.auth-form input:focus{ border-color: rgba(249,115,22,.55); box-shadow:0 0 0 3px rgba(249,115,22,.20) }
.password-field{
  position:relative; width:min(560px, 92%); height:46px;
}
.password-field input{ width:100%; height:100%; padding-right:52px; border-radius:12px }
.password-field .reveal{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:0; cursor:pointer; color:#cbd5e1;
}
.password-field .reveal:hover{ background:rgba(255,255,255,.04) }
.password-field .reveal:focus{ outline:none; box-shadow:0 0 0 4px rgba(249,115,22,.12) }
@media (max-width:480px){ .auth-form input, .password-field{ width:92% } }

/* Vecchio contenitore login (compat) */
#login-container{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding:60px 16px 24px; height:auto; min-height:calc(100svh - var(--header-h));
  background:rgba(30,30,30,.82); box-shadow:0 6px 18px rgba(0,0,0,.4); overflow:auto;
}
#login-container h2{ color:#ffdd57 }
#login-container input{ width:280px; padding:12px; margin:10px 0; border-radius:8px; border:1px solid #444; background:#2a2a2a }
#login-container input:focus{ border-color:#ff4500; outline:none; box-shadow:0 0 8px rgba(255,69,0,.5) }
.password-container{ position:relative; display:flex; align-items:center }
.password-container input{ width:100%; padding-right:40px }
.eye-icon{ position:absolute; right:10px; width:24px; height:24px; cursor:pointer }

/* Messaggi form */
.form-error{ color:#fda4af; min-height:18px; margin:6px 0 0; font-size:13px }
.form-note{ color:var(--muted); font-size:13px; margin-top:6px }
.divider{ display:flex; align-items:center; gap:10px; margin:14px 0 10px; color:#94a3b8; font-size:12px }
.divider::before, .divider::after{ content:""; height:1px; flex:1; background:var(--border) }

/* ---------------------- MODALS & ALERTS ---------------------- */
.modal{ position:fixed; inset:0; display:none; z-index:var(--z-modal) }
.modal.open{ display:block }
.modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(2px); z-index:var(--z-modal-overlay) }
.modal__card{
  position:relative; z-index:calc(var(--z-modal) + 1); margin:8vh auto 0; width:min(540px,92%);
  background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:22px; box-shadow:0 15px 40px rgba(0,0,0,.55); color:var(--text);
}

/* Conferma unificata */
#confirmation-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.7); display:none; z-index:var(--z-modal-overlay) }
#confirmation-box{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  background:#222; color:#fff; padding:20px; border-radius:10px; width:min(420px, 92%);
  box-shadow:0 10px 24px rgba(0,0,0,.5); display:none; z-index:var(--z-modal); text-align:center; border:1px solid #333;
}
#confirm-button{ background:#28a745 } #cancel-button{ background:#dc3545 }
#confirmation-box button{ width:auto; min-width:96px; padding:8px 16px; display:inline-block; margin:10px 8px; font-size:14px; border-radius:6px }
.confirmation-modal{ display:none } /* compat */

/* Alert custom */
#custom-alert-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.7); display:none; z-index:var(--z-alert-overlay) }
#custom-alert-box{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  background:#222; color:#fff; border:2px solid #aa0000; padding:20px 30px; border-radius:6px; z-index:var(--z-alert); display:none; text-align:center
}
#custom-alert-box button{ width:auto; min-width:96px; padding:8px 18px; font-size:14px; border-radius:6px; margin-top:14px }

/* ---------------------- ANNOUNCEMENTS ---------------------- */
.notice-host{ margin:8px 0 16px; display:flex; justify-content:center; scroll-margin-top: calc(var(--header-h) + 14px) }
.notice-box{
  position:relative; background:#1b1b1b; border:1px solid #2a2a2a; border-radius:12px;
  padding:14px 16px; color:#ddd; box-shadow:0 6px 18px rgba(0,0,0,.35);
  width:min(94vw, 860px); max-width:860px; overflow-x:hidden;
}
.notice-accent{ height:4px; background:#e23; border-radius:12px 12px 0 0; margin:-14px -16px 10px -16px }
.notice-title{ margin:0 0 6px 0; font-size:16px; color:#fff }
.notice-content{ white-space:pre-wrap; line-height:1.45; overflow-wrap:anywhere; word-break:break-word; hyphens:auto }
.notice-meta{ color:#9aa0a6; font-size:12px; margin-top:6px }
.notice-actions{ margin-top:8px; display:flex; gap:8px; flex-wrap:wrap }
.notice-close{ position:absolute; top:8px; right:10px; background:transparent; color:#aaa; border:0; cursor:pointer; font-size:18px }
.notice-close:hover{ color:#fff }

.notice-admin{
  background:#161b22; border:1px solid #2a2f36; color:#d6d8db;
  padding:12px; border-radius:10px; margin-top:8px; width:min(94vw, 860px); max-width:860px; box-sizing:border-box;
}
.notice-admin h3{ margin:0 0 8px 0 }
.notice-admin input[type="text"], .notice-admin textarea{
  width:100%; background:#0e1116; color:#e2e4e6; border:1px solid #2b3036; border-radius:6px; padding:8px; font-family:monospace
}
.notice-admin .row{ display:flex; align-items:center; gap:10px; margin-top:6px; flex-wrap:wrap }
.muted{ color:#9aa0a6; font-size:12px }

/* ---------------------- DASHBOARD LOGO (fix: non bloccare dash-hero) ---------------------- */
#dashboard > h1{ width:100%; margin:12px 0 8px; text-align:center }

/* Vecchio markup (senza dash-hero): resta compat */
#dashboard > h1:not(.dash-hero) img{
  display:inline-block;
  height:90px;
  max-width:100%;
  object-fit:contain;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.35));
}

/* Nuovo hero (logo + titolo) */
#dashboard > h1.dash-hero{
  margin: 10px 0 14px !important;
  text-align: center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
#dashboard > h1.dash-hero img.dash-logo{
  height: var(--dash-logo-h) !important; /* <-- governa SOLO questa variabile */
  width:auto !important;
  max-width:100%;
  object-fit:contain;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.45));
}
#dashboard > h1.dash-hero .dash-title{
  font-size: clamp(18px, 2.2vw, 28px);
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 2px 0 rgba(0,0,0,.45), 0 0 18px rgba(249,115,22,.20);
}

/* ---------------------- RESPONSIVE ---------------------- */
@media (max-width:1024px){
  .grid-panels{
    grid-template-columns:1fr;
    grid-template-areas:
      "general"
      "maps"
      "wads"
      "flags"
      "passwords"
      "configs"
      "server"
      "active";
  }
  body.panel-root{
    padding-top: var(--header-h);
    -webkit-overflow-scrolling:touch;
  }
  #dashboard{ min-height: calc(100svh - var(--header-h)) }
  @supports (min-height: 100dvh){
    #dashboard{ min-height: calc(100dvh - var(--header-h)) }
  }
  .section{ overflow-x:auto }
}

/* =========================================================================
   PATCH “PASSWORD EYE”
   ========================================================================= */

/* 0) Variabili icone */
:root{
  --icon-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  --icon-eye-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.94 10.94 0 0 1 12 19c-4.47 0-8.26-2.94-9.54-7a10.94 10.94 0 0 1 2.9-4.02'/%3E%3Cpath d='M1 1l22 22'/%3E%3Cpath d='M9.88 9.88a3 3 0 0 0 4.24 4.24'/%3E%3C/svg%3E");
}

.password-field{ position:relative !important; overflow:visible !important; }
.password-field input{
  position:relative; z-index:1;
  padding-right:58px !important;
}
.password-field input::-ms-reveal,
.password-field input::-ms-clear{
  display:none !important; width:0 !important; height:0 !important;
}
.password-field input::-webkit-credentials-auto-fill-button{
  visibility:hidden; display:none; pointer-events:none;
}
.password-field .reveal{
  position:absolute !important; right:10px; top:50%;
  transform:translateY(-50%);
  width:36px; height:36px;
  border:0; border-radius:8px;
  background:transparent var(--icon-eye) no-repeat center / 20px 20px;
  color:#cbd5e1; cursor:pointer; z-index:3 !important;
  transition:background-color .12s, box-shadow .12s, color .12s;
  font-size:0; line-height:0; overflow:hidden;
}
.password-field .reveal:hover{ background-color:rgba(255,255,255,.06); color:#e5e7eb; }
.password-field .reveal:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px rgba(255,255,255,.10) inset, 0 0 0 3px rgba(249,115,22,.22);
}
.password-field .reveal[aria-pressed="true"]{
  background-image:var(--icon-eye-off);
  background-repeat:no-repeat; background-position:center; background-size:20px 20px;
  color:var(--accent,#f97316);
}
#login-container .password-container{ position:relative; }
#login-container .password-container input{ padding-right:50px !important; }

/* ====================== USER MENU / DROPDOWN PATCH ====================== */
#user-menu.user-menu{
  border: 1px solid #444;
  transition: background-color .15s, color .15s, border-color .15s;
}
#user-menu.user-menu:hover{
  background:#3a3a3a !important;
  color:#fff !important;
  border-color:#555 !important;
}
#user-slot-badge,
.badge.slot{
  background:#2a2a2a !important;
  color:#e5e7eb !important;
  border:1px solid #3a3a3a;
  font-weight:700;
  padding:2px 10px;
  min-width:48px;
  text-align:center;
}
#user-menu .dropdown,
#user-dropdown{
  background:#1b1b1b !important;
  border:1px solid #2a2a2a !important;
  border-radius:10px !important;
  padding:6px !important;
  box-shadow:0 10px 24px rgba(0,0,0,.5) !important;
  max-width:320px;
}
#user-dropdown a,
#user-dropdown button,
#user-menu .dropdown a,
#user-menu .dropdown button{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  width:100% !important;
  padding:10px 12px !important;
  border-radius:8px !important;
  border:0 !important;
  background:transparent !important;
  color:#e8ecf3 !important;
  text-align:left !important;
  text-decoration:none !important;
  font-weight:600 !important;
  line-height:1.2 !important;
  cursor:pointer !important;
}
#user-dropdown a:hover, #user-dropdown a:focus-visible,
#user-dropdown button:hover, #user-dropdown button:focus-visible,
#user-menu .dropdown a:hover, #user-menu .dropdown a:focus-visible,
#user-menu .dropdown button:hover, #user-menu .dropdown button:focus-visible{
  background:#2a2a2a !important;
  color:#fff !important;
  outline:none !important;
}
#user-dropdown a:focus-visible,
#user-dropdown button:focus-visible,
#user-menu .dropdown a:focus-visible,
#user-menu .dropdown button:focus-visible{
  box-shadow:
    0 0 0 2px rgba(255,255,255,.12) inset,
    0 0 0 3px rgba(249,115,22,.22) !important;
}
#user-dropdown .dd-sep, #user-menu .dropdown .dd-sep{
  height:1px; margin:6px 4px; background:#2a2a2a; border:0;
}
#user-dropdown #adminLink,
#user-dropdown a[href*="admin"],
#user-menu .dropdown #adminLink,
#user-menu .dropdown a[href*="admin"]{
  position:relative;
  font-weight:700;
  box-shadow: inset 3px 0 var(--accent, #f97316);
}
@media (max-width: 900px){
  header.panel-header #user-menu.user-menu{
    padding:6px 8px !important;
    gap:6px !important;
    background:#333 !important;
    border:1px solid #444 !important;
    border-radius:10px !important;
  }
  header.panel-header #user-dropdown{
    right: 8px !important;
    left: auto !important;
    top: 50px !important;
    min-width: 220px !important;
    font-size: 14px !important;
    z-index: 1100 !important;
  }
}

/* ======================= LOGIN WIDTH-ONLY SHRINK ======================= */
:root{
  --auth-field-w: 260px;  /* desktop target width */
  --field-w: 420px;       /* compat con vecchie regole */
}
.auth-card .auth-form input#username,
.auth-card .auth-form .password-field{
  width: min(var(--auth-field-w), 92%) !important;
  box-sizing: border-box;
  margin: 0;
}
.auth-card .auth-form .password-field input{
  width: 100% !important;
  height: 46px;
  padding-right: 58px !important;
}
#login-container input[type="text"],
#login-container input[type="password"]{
  width: min(var(--auth-field-w), 92%) !important;
  max-width: 100%;
}
@media (min-width: 768px){
  .auth-card .auth-form input#username,
  .auth-card .auth-form .password-field{
    width: var(--auth-field-w) !important;
  }
}

/* Signup */
#signupForm{
  display: grid !important;
  gap: 10px !important;
  justify-items: center !important;
}
#signupForm input{
  width: min(var(--auth-field-w), 92%) !important;
  max-width: 100% !important;
  height: 46px !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  border: 1px solid var(--border, rgba(255,255,255,.08)) !important;
  background: #0f1420 !important;
  color: var(--text, #e8ecf3) !important;
  outline: none !important;
  box-sizing: border-box !important;
}
#signupForm input::placeholder{ color:#8e97a7 !important; }
#signupForm input:focus{
  border-color: rgba(249,115,22,.55) !important;
  box-shadow: 0 0 0 3px rgba(249,115,22,.20) !important;
}
.modal__actions button,
#signupForm button{
  height: 44px !important;
  border-radius: 12px !important;
}
.modal__actions{ gap: 10px !important; }

/* Header right: global capacity */
.panel-header-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.panel-header-right .global-capacity.badge.slot {
  font-size: 0.8rem;
  padding: 0.2rem 0.75rem;
  border-radius: 999px;
  background: #1b2633;
  border: 1px solid #5bc0de;
  color: #e6f6ff;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.panel-header-right .global-capacity.badge.slot::before {
  content: "⚡";
  margin-right: 0.3rem;
}
.mobile-capacity-row {
  padding: 0.4rem 1rem 0.8rem;
  display: flex;
  justify-content: center;
}
.mobile-capacity-row .global-capacity.badge.slot {
  font-size: 0.9rem;
  padding: 0.25rem 0.9rem;
  border-radius: 999px;
  background: #111;
  border: 1px solid #5bc0de;
  color: #e6f6ff;
  font-weight: 600;
}
.global-capacity.capacity-ok { background: #19341f; border-color: #43a047; color: #e6ffe9; }
.global-capacity.capacity-warn { background: #3b2f16; border-color: #ffb300; color: #fff3cd; }
.global-capacity.capacity-danger { background: #3b1616; border-color: #e53935; color: #ffe6e6; }
@media (max-width: 768px) {
  .panel-header-right .global-capacity.badge.slot { display: none; }
}

/* -------- Voting layout -------- */
.voting-section { margin-top:24px; padding-top:16px; border-top:2px solid #333; text-align: center }
.voting-global-row {
  display: flex; justify-content: center; align-items: center;
  gap: 0.6rem; margin: 0 auto 0.4rem;
}
.voting-global-row label { margin: 0; font-weight: 700; display: inline-block; }
.voting-global-row select { width: auto; min-width: 120px; max-width: 150px; }
.voting-min-row {
  display: flex; justify-content: center; align-items: center;
  gap: 0.6rem; margin: 0.3rem auto 0.8rem; width: fit-content;
}
.voting-min-row label { margin: 0; font-weight: 700; display: inline-block; }
.voting-min-row input { width: 90px; text-align: center; }
.voting-types {
  display: flex; justify-content: center;
  gap: 3rem; margin-top: 0.4rem; margin-bottom: 0.6rem;
}
.voting-col { display: flex; flex-direction: column; gap: 0.3rem; }
.voting-section .vote-row {
  display: grid;
  grid-template-columns: 180px auto;
  align-items: center;
  justify-content: center;
  text-align: right;
  font-size: 0.9rem;
  line-height: 1.3;
}
.voting-section .vote-row .vote-label { white-space: nowrap; padding-right: 0.7rem; }
.voting-section .vote-row input[type="checkbox"] { justify-self: flex-start; }
.voting-section .vote-row.muted { opacity: 0.5; }
@media (max-width: 600px) {
  .voting-types { flex-direction: column; align-items: center; gap: 0.5rem; }
}

/* =========================================================
   Storage usage
   ========================================================= */
.storage-box{
  margin-top:.75rem;
  padding:.55rem .8rem .7rem;
  border-radius:.75rem;
  background:rgba(15,23,42,.9);
  box-shadow:0 0 0 1px rgba(148,163,184,.18);
  font-size:13px;
}
.storage-header{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:.25rem;
}
.storage-title{
  font-size:13px; font-weight:600; letter-spacing:.02em;
  text-transform:uppercase; color:#9ca3af;
}
.storage-perc-badge{
  min-width:3rem; padding:.1rem .5rem; border-radius:999px;
  text-align:center; font-size:11px; font-variant-numeric:tabular-nums;
  background:rgba(15,23,42,.75);
  border:1px solid rgba(148,163,184,.5);
  color:#e5e7eb;
}
.storage-line{ margin-top:.1rem; }
.storage-line-main{
  display:flex; justify-content:space-between; align-items:baseline; gap:.75rem;
}
.storage-used-label{ font-weight:500; color:#e5e7eb; }
.storage-limit-label{ font-size:12px; color:#9ca3af; }
.storage-remaining{ margin-top:.2rem; font-size:13px; color:#e5e7eb; }
.storage-remaining strong{ font-weight:600; }
.storage-used-value,
.storage-limit-value,
.storage-free-value{ font-variant-numeric:tabular-nums; }
.storage-bar{
  margin-top:.45rem; width:100%; height:6px; border-radius:999px;
  background:#020617; border:1px solid rgba(15,23,42,.85);
  overflow:hidden;
}
.storage-bar-fill{
  height:100%; width:0%; border-radius:inherit;
  transition:width .25s ease-out;
}
.storage-bar-fill.ok{ background:linear-gradient(90deg,#22c55e,#4ade80); }
.storage-bar-fill.warn{ background:linear-gradient(90deg,#eab308,#f97316); }
.storage-bar-fill.danger{ background:linear-gradient(90deg,#ef4444,#f97316); }

/* Global notification */
.global-notification {
  background: #111827;
  color: #e5e7eb;
  border-bottom: 1px solid #374151;
  padding: 6px 12px;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  z-index: 900;
}
.global-notification button {
  border: none;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  font-size: 0.9rem;
}
.global-notification button:hover { color: #f9fafb; }

/* ===== SweetAlert2: Loading theme + dots (deduped) ===== */
.pd-swal-popup{
  background:#222 !important;
  color:#fff !important;
  border:2px solid #f97316 !important;
  border-radius:12px !important;
  width: min(520px, 92vw);
}
.pd-swal-popup .swal2-title{ color:#fff !important; }
.pd-swal-popup .swal2-html-container{ color:#e8ecf3 !important; }
.pd-swal-popup .swal2-loader{
  border-color:#f97316 transparent #f97316 transparent !important;
}
.pd-loading-text{
  display:inline-flex !important;
  align-items:baseline !important;
  justify-content:center !important;
  gap:.35rem !important;
  line-height: 1.35;
  font-size: 14px;
  margin-top:10px;
  color:#e8ecf3;
}
.pd-dots{
  display:inline-block !important;
  width:3ch !important;
  overflow:hidden !important;
  text-align:left !important;
  vertical-align:bottom !important;
  animation:none !important;
}
.pd-dots::before{ content:none !important; }
.pd-dots::after{
  content:"..." !important;
  display:inline-block !important;
  width:0ch !important;
  overflow:hidden !important;
  vertical-align:bottom !important;
  animation: pdDotsFixed 1.1s steps(4,end) infinite !important;
}
@keyframes pdDotsFixed{ to { width:3ch; } }
.swal2-popup .swal2-loader{ margin: 14px auto 0 !important; }
.swal2-popup{ overflow: hidden; }

/* Redeploy */
.redeploy-all-button{ background:#c0392b; margin-top:0; }
.redeploy-all-button:hover{ background:#e74c3c; }
.redeploy-progress{
  margin-top:10px;
  max-height:140px;
  overflow-y:auto;
  font-family:monospace;
  font-size:13px;
  background:#111;
  border:1px solid #333;
  border-radius:6px;
  padding:8px;
  display:none;
}

.server-controls-buttons{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* ==========================================================
   UI polish: My Active Servers + main action buttons
   ========================================================== */
.server-button,
.config-button,
#delete-wad-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 18px rgba(0,0,0,0.25);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.server-button:active,
.config-button:active,
#delete-wad-btn:active {
  transform: translateY(0);
  filter: brightness(0.98);
  box-shadow: 0 6px 14px rgba(0,0,0,0.22);
}
.server-button:disabled,
.config-button:disabled,
#delete-wad-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  filter: none;
  box-shadow: none;
}

/* Start */
.server-button.start-button {
  background: linear-gradient(180deg, rgba(34,197,94,1) 0%, rgba(22,163,74,1) 100%);
  border-color: rgba(34,197,94,0.40);
}
.server-button.start-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

/* Save */
.config-button.save-button {
  background: linear-gradient(180deg, rgba(59,130,246,1) 0%, rgba(37,99,235,1) 100%);
  border-color: rgba(59,130,246,0.35);
}
.config-button.save-button:hover { transform: translateY(-1px); filter: brightness(1.06); }

/* Load */
.config-button.load-button {
  background: linear-gradient(180deg, rgba(168,85,247,1) 0%, rgba(124,58,237,1) 100%);
  border-color: rgba(168,85,247,0.35);
}
.config-button.load-button:hover { transform: translateY(-1px); filter: brightness(1.06); }

/* Delete config + Delete WAD */
.config-button.delete-button,
#delete-wad-btn {
  background: linear-gradient(180deg, rgba(239,68,68,1) 0%, rgba(220,38,38,1) 100%);
  border-color: rgba(239,68,68,0.35);
}
.config-button.delete-button:hover,
#delete-wad-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }

/* Active servers table */
.card--active #my-servers-list {
  width: 100%;
  margin-top: 12px;
  overflow: auto;
  max-height: 520px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.18);
}
.card--active #my-servers-list table {
  width: 100%;
  margin: 0;
  min-width: 900px;
  border-collapse: separate;
  border-spacing: 0;
}
.card--active #my-servers-list th:nth-child(2),
.card--active #my-servers-list td:nth-child(2) {
  white-space: normal;
  word-break: break-word;
}

.card--active #my-servers-list th:nth-child(3),
.card--active #my-servers-list td:nth-child(3),
.card--active #my-servers-list th:nth-child(4),
.card--active #my-servers-list td:nth-child(4),
.card--active #my-servers-list th:nth-child(5),
.card--active #my-servers-list td:nth-child(5),
.card--active #my-servers-list th:nth-child(6),
.card--active #my-servers-list td:nth-child(6) {
  font-family: inherit;
}
.card--active #my-servers-list th,
.card--active #my-servers-list td { border: 0 !important; }
.card--active #my-servers-list thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(17, 24, 39, 0.95);
  color: #cbd5e1;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
}
.card--active #my-servers-list tbody td {
  padding: 10px 12px;
  vertical-align: middle;
  font-size: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.card--active #my-servers-list tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
.card--active #my-servers-list th:last-child,
.card--active #my-servers-list td:last-child {
  text-align: left;
}

.card--active #my-servers-list td:last-child {
  white-space: nowrap;
}
.card--active #my-servers-list button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(17, 24, 39, 0.75);
  color: #e5e7eb;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
  box-shadow: none;
  transition: transform .12s ease, filter .12s ease;
}
.card--active #my-servers-list button:hover{ transform: translateY(-1px); filter: brightness(1.08); }

/* ================================
   Zandronum Version selector (panel)
   ================================ */
.server-version-wrap { margin: 6px 0 12px 0; }
.server-version-wrap select { display: block; margin-top: 4px; }
.server-version-wrap .field-hint { display: block; margin-top: 6px; color: #b8b8b8; font-size: 12px; line-height: 1.3; }
.server-version-wrap.is-disabled { opacity: 0.78; }
.server-version-wrap.is-disabled select,
#server-version:disabled{
  background: #2a2a2a !important;
  color: #bdbdbd !important;
  border: 1px solid #555 !important;
  cursor: not-allowed;
  filter: grayscale(20%);
}
.server-version-wrap.is-disabled .field-hint { color: #9e9e9e; }
#server-version-wrap,
.server-version-wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 6px auto 12px;
  text-align: center;
}
#server-version,
.server-version-wrap select{
  width: min(320px, 90%);
  max-width: 100%;
  margin: 4px auto 0 !important;
}
#server-version-note,
.server-version-wrap .field-hint{
  max-width: 440px;
  margin: 6px auto 0;
  text-align: center;
}

/* ==========================================================
   PANEL: Compact density
   ========================================================== */
body.panel-root.density-compact{
  --pd-gap: 16px;
  --pd-card-pad-y: 12px;
  --pd-card-pad-x: 14px;
}
body.panel-root.density-compact .grid-panels{
  margin: 12px auto 22px !important;
  padding: 8px 12px !important;
  gap: var(--pd-gap) !important;
  max-width: 1800px;
}
body.panel-root.density-compact .section{
  padding: var(--pd-card-pad-y) var(--pd-card-pad-x) !important;
}
body.panel-root.density-compact .section h2{
  margin: 0 0 8px !important;
}
body.panel-root.density-compact label{
  margin: 6px 0 4px !important;
}
body.panel-root.density-compact input,
body.panel-root.density-compact select,
body.panel-root.density-compact textarea{
  padding: 7px 8px !important;
}

/* IMPORTANT: non schiacciare il nuovo dash-hero */
body.panel-root.density-compact #dashboard > h1:not(.dash-hero) img{
  height: 72px !important;
}

/* Annunci */
body.panel-root.density-compact .notice-host{ margin: 6px 0 10px !important; }
body.panel-root.density-compact .notice-box{ padding: 12px 14px !important; }
body.panel-root.density-compact .notice-accent{ margin: -12px -14px 8px -14px !important; }

/* Textarea */
body.panel-root.density-compact #wad-files,
body.panel-root.density-compact #optional-wads,
body.panel-root.density-compact #map-list{
  min-height: clamp(110px, 14vh, 130px) !important;
  margin: 8px auto 12px !important;
  width: min(400px, 96%) !important;
}
body.panel-root.density-compact #additional-parameters{
  min-height: clamp(140px, 18vh, 220px) !important;
  margin: 8px auto 12px !important;
  width: min(980px, 96%) !important;
}
body.panel-root.density-compact .flags-advanced,
body.panel-root.density-compact .voting-section{
  margin-top: 16px !important;
  padding-top: 12px !important;
}
body.panel-root.density-compact .upload-section-highlight{
  padding: 12px !important;
  margin: 12px auto 8px !important;
}

/* ==========================================================
   WADs: 2 colonne su desktop
   ========================================================== */
.wad-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
  margin-top: 8px;
}
.wad-grid textarea{
  width: 100% !important;
  min-height: clamp(160px, 22vh, 320px);
  margin: 6px 0 10px !important;
}
.wad-grid .autocomplete-list{ width: 100% !important; }
@media (max-width: 900px){
  .wad-grid{ grid-template-columns: 1fr; }
  .wad-grid textarea{ min-height: clamp(130px, 18vh, 220px); }
}

/* ==========================================================
   Spacing “leggibilità”: evita testi troppo vicini
   ========================================================== */
.section h2 + label{ margin-top: 12px !important; }
.section > label{ margin: 14px 0 6px !important; }
.section > input,
.section > select,
.section > textarea{ margin: 0 auto 14px !important; }

.section > small,
.section > .field-hint,
.section > .tag-note{
  margin-top: 5px !important;
  margin-bottom: 6px !important;
  line-height: 1.00;
}

/* General Settings: più respiro */
.card--general label[for="game-mode"],
.card--general label[for="server-version"]{
  margin-top: 18px !important;
  margin-bottom: 6px !important;
}
.card--general .server-name-row{ margin: 1px 0 1px !important; }
.card--general .tag-note{ margin-top: 2px !important; }
.card--general #server-version-wrap{ margin-top: 10px !important; margin-bottom: 10px !important; }
.card--general #server-version-note{ margin-top: 8px !important; }

/* Flags: un filo più di aria */
.flags-grid{ gap: 16px 18px !important; }
.flags-grid .flag-item{ display: grid; row-gap: 6px; }

/* ==========================================================
   AUTH BACKGROUND (reuse login/register background on panel)
   Attiva con: <body class="... use-auth-bg">
   ========================================================== */

body.panel-root.use-auth-bg{
  background: var(--bg) url('/assets/background.png') center/cover fixed no-repeat !important;
}

/* Overlay come auth-wrap::before (radial + vignette) */
body.panel-root.use-auth-bg::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(1200px 600px at 50% 40%, rgba(0,0,0,.30), transparent 55%),
    radial-gradient(800px 500px at 50% 50%, rgba(18,22,32,.45), rgba(18,22,32,.55)),
    linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.40));
  pointer-events:none;
  z-index:-1; /* stesso approccio che stai già usando */
}

/* Mobile performance: evita "fixed" su touch (meno jank) */
@media (hover: none) and (pointer: coarse){
  body.panel-root.use-auth-bg{
    background-attachment: scroll !important;
  }
}

/* ==========================================================
   Bridge bar: collega "General Settings" + "Maps"
   ========================================================== */

/* manopole */
:root{
  --host-bridge-y: 48px;   /* distanza dall'alto della grid */
  --host-bridge-h: 10px;   /* altezza striscia */
}

/* la grid deve essere un riferimento */
.grid-panels{
  position: relative;
}

/* le card devono stare sopra la striscia */
.grid-panels .section{
  position: relative;
  z-index: 1;
}

/* ==========================================================
   HOST SERVER — TOP STRIP (sopra General Settings + Maps)
   Override della vecchia bridge bar "in mezzo"
   ========================================================== */

:root{
  --hostbar-h: 44px;     /* altezza striscia */
  --hostbar-lift: 35px;  /* quanto “sale” sopra la grid */
}

/* riferimento per posizionare la striscia */
.grid-panels{ position: relative; }

/* STRISCIA (sopra le card) */
.grid-panels::before{
  content:"";
  position:absolute;
  left: 16px;
  right: 16px;

  top: 0;
  transform: translateY(calc(-1 * var(--hostbar-lift)));
  height: var(--hostbar-h);

  border-radius: 14px;

  background:
    linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.35)),
    linear-gradient(90deg,
      rgba(249,115,22,0.00) 0%,
      rgba(249,115,22,0.55) 18%,
      rgba(239,68,68,0.50) 50%,
      rgba(249,115,22,0.55) 82%,
      rgba(249,115,22,0.00) 100%
    );

  border: 1px solid rgba(255,255,255,.07);
  box-shadow:
    0 12px 28px rgba(0,0,0,.55),
    0 0 0 1px rgba(249,115,22,.18) inset;

  z-index: 5;
  pointer-events: none;
}

/* TESTO CENTRATO sulla striscia */
.grid-panels::after{
  content:"HOST YOUR SERVER";
  position:absolute;
  left:50%;
  top: calc((var(--hostbar-h) / 2) - var(--hostbar-lift));
  transform: translate(-50%, -50%);

  padding: 8px 16px;
  border-radius: 999px;

  background: rgba(0,0,0,.62);
  border: 1px solid rgba(249,115,22,.55);

  color: var(--accent);
  font-weight: 900;
  letter-spacing: .22em;
  font-size: 12px;
  text-transform: uppercase;

  box-shadow: 0 10px 24px rgba(0,0,0,.55);
  z-index: 6;
  pointer-events: none;
}

/* Compact: una tacca più bassa */
body.panel-root.density-compact{
  --hostbar-h: 32px;
  --hostbar-lift: 18px;
}

/* Mobile 1-col: meglio disattivarla */
@media (max-width: 1024px){
  .grid-panels::before,
  .grid-panels::after{ display:none; }
}

/* ==========================================================
   General Settings layout — FIX definitivo (2 colonne + metriche 2x2)
   ========================================================== */

.card--general{
  display:grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-gap: 22px;
  row-gap: 10px;
  align-items:start;
}

/* niente <br> fantasma se ne rimane qualcuno */
.card--general > br{ display:none !important; }

/* Riga 1: titolo */
.card--general > h2{
  grid-column: 1 / -1;
  grid-row: 1;
}

/* Riga 2-4: Server Name full width */
.card--general > label[for="server-name"]{
  grid-column: 1 / -1;
  grid-row: 2.7;
}
.card--general > .server-name-row{
  grid-column: 1 / -1;
  grid-row: 2.5;
}
.card--general > #tag-note,
.card--general > small#tag-note{
  grid-column: 1 / -1;
  grid-row: 3.5;
}

/* Riga 5-6: due colonne affiancate */
/* sinistra: Game Mode */
.card--general > label[for="game-mode"]{
  grid-column: 1;
  grid-row: 5;
  margin-top: 6px !important;
}
.card--general > #game-mode{
  grid-column: 1;
  grid-row: 6;
  justify-self: center;
  width: min(340px, 100%) !important; /* override inline width:25% */
}

/* destra: Zandronum Version */
.card--general > label[for="server-version"]{
  grid-column: 2;
  grid-row: 5;
  margin-top: 6px !important;
}
.card--general > #server-version-wrap{
  grid-column: 2;
  grid-row: 6;
  justify-self: center;
  width: 100%;
}
.card--general #server-version{
  width: min(360px, 100%) !important; /* override inline width:35% */
}

/* Riga 7: metriche full width */
.card--general > .general-metrics{
  grid-column: 1 / -1;
  grid-row: 7;
  margin-top: 8px;
}

/* Metriche: 2 a 2 */
.card--general .general-metrics .flex-container{
  display:grid !important;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 12px 22px;
  justify-items: center;
  align-items: start;
}
.card--general .general-metrics .flex-item{
  width: 100%;
  max-width: 340px;
}
.card--general .general-metrics .flex-item label{
  margin: 0 0 6px !important;
  text-align: center;
}
.card--general .general-metrics input[type="number"]{
  width: 92px; /* più comodo di 70 */
}

/* Mobile: torna tutto in colonna */
@media (max-width: 900px){
  .card--general{
    display:block !important;
  }
  .card--general .general-metrics .flex-container{
    grid-template-columns: 1fr;
  }
}

/* ======================================================================
   PANEL SPACING POLISH (Titles / Subtitles / Checkboxes)
   Incolla in fondo a styles.css
   ====================================================================== */

:root{
  --pd-title-gap: 14px;   /* spazio sotto h2 */
  --pd-first-gap: 12px;   /* spazio tra h2 e primo contenuto */
  --pd-field-gap: 16px;   /* spazio tra gruppi di campi */
  --pd-check-gap: 10px;   /* gap checkbox-test */
}

body.panel-root.density-compact{
  --pd-title-gap: 12px;
  --pd-first-gap: 10px;
  --pd-field-gap: 14px;
}

/* 1) Più aria sotto i titoli delle card */
.section > h2{
  margin-bottom: var(--pd-title-gap) !important;
}

/* 2) Il primo elemento dopo il titolo (label o button) non “attaccato” */
.section > h2 + label,
.section > h2 + button{
  margin-top: var(--pd-first-gap) !important;
}

/* 3) Spaziatura tra blocchi campo (label -> control) più leggibile */
.section > label{
  margin-top: var(--pd-field-gap) !important;
  margin-bottom: 6px !important;
}

/* 4) Maps: spazio più armonico tra titolo, label e controlli */
.card--maps > h2{
  margin-bottom: 16px !important;
}
.card--maps > h2 + label{
  margin-top: 14px !important;
}

/* input/textarea in Maps: un filo più di margine sotto */
.card--maps #starting-map{
  margin-bottom: 16px !important;
}
.card--maps #map-list{
  margin-bottom: 14px !important;
}

/* 5) Checkbox row “pulita” (Maps) */
.card--maps label[for="maps-rotation"],
.card--maps label[for="random-maps"]{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap: var(--pd-check-gap) !important;

  margin-top: 18px !important;
  margin-bottom: 0 !important;

  text-align:center !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.card--maps label[for="maps-rotation"] > input[type="checkbox"],
.card--maps label[for="random-maps"] > input[type="checkbox"]{
  width:auto !important;
  margin:0 !important;
  transform: translateY(1px);
  accent-color: var(--accent);
}

/* 6) Checkbox row “pulita” (Password) */
.card--passwords label[for="enableconnectpassword"],
.card--passwords label[for="enablejoinpassword"]{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap: var(--pd-check-gap) !important;

  margin-top: 16px !important;
  margin-bottom: 0 !important;

  text-align:center !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.card--passwords label[for="enableconnectpassword"] > input[type="checkbox"],
.card--passwords label[for="enablejoinpassword"] > input[type="checkbox"]{
  width:auto !important;
  margin:0 !important;
  transform: translateY(1px);
  accent-color: var(--accent);
}

/* 7) Flags: più aria tra titolo e bottone */
.card--flags > h2{
  margin-bottom: 14px !important;
}
.card--flags > h2 + .flags-button{
  margin-top: 12px !important;
  margin-bottom: 16px !important;
}

/* ======================================================================
   SPACING OVERRIDE (più aria tra titolo, label, campi e checkbox)
   -> incolla come ULTIMO blocco del file styles.css
   ====================================================================== */

/* manopole (cambia qui se vuoi ancora più spazio) */
:root{
  --pd-title-gap: 22px;     /* spazio sotto h2 */
  --pd-first-gap: 18px;     /* spazio tra h2 e primo label */
  --pd-field-gap: 20px;     /* spazio tra gruppi (label->label) */
  --pd-control-gap: 18px;   /* spazio sotto input/select/textarea */
  --pd-check-gap: 12px;     /* spazio tra checkbox e testo */
}

/* anche con density-compact vogliamo comunque più respiro */
body.panel-root.density-compact{
  --pd-title-gap: 18px;
  --pd-first-gap: 16px;
  --pd-field-gap: 18px;
  --pd-control-gap: 16px;
}

/* 1) Titoli: più aria sotto */
.section > h2{
  margin: 0 0 var(--pd-title-gap) !important;
}

/* 2) Primo label dopo h2: non attaccato */
.section > h2 + label{
  margin-top: var(--pd-first-gap) !important;
}

/* 3) Tutti gli altri label (diretti) dentro le card: più spazio sopra */
.section > * + label{
  margin-top: var(--pd-field-gap) !important;
  margin-bottom: 8px !important;
}

/* 4) Controlli dopo label: più spazio sotto */
.section > label + input,
.section > label + select,
.section > label + textarea{
  margin: 0 auto var(--pd-control-gap) !important;
}

/* 5) Checkbox “pulite” (quando il label contiene l’input) */
.section > label > input[type="checkbox"]{
  width: auto !important;
  margin: 0 var(--pd-check-gap) 0 0 !important;
  accent-color: var(--accent);
  transform: translateY(1px);
}

/* ===== Target: MAPS (quello che ti dà più fastidio) ===== */
.card--maps > h2{ margin-bottom: 24px !important; }
.card--maps > label[for="starting-map"]{ margin-top: 18px !important; }
.card--maps > #starting-map{ margin-bottom: 20px !important; }

.card--maps > label[for="map-list"]{ margin-top: 20px !important; }
.card--maps > #map-list{ margin-bottom: 22px !important; }

/* checkbox maps: ancora un po’ più staccate */
.card--maps > label[for="maps-rotation"],
.card--maps > label[for="random-maps"]{
  margin-top: 22px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap: var(--pd-check-gap) !important;
}

/* ===== Target: PASSWORD checkbox ===== */
.card--passwords > label[for="enableconnectpassword"],
.card--passwords > label[for="enablejoinpassword"]{
  margin-top: 20px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap: var(--pd-check-gap) !important;
}

/* ===== Target: FLAGS (titolo + bottone) ===== */
.card--flags > h2{ margin-bottom: 22px !important; }
.card--flags > .flags-button{ margin: 14px auto 22px !important; }

/* ===== Target: GENERAL (grid) un filo più “rilassato” ===== */
.card--general{ row-gap: 16px !important; }
.card--general .general-metrics .flex-container{ gap: 16px 22px !important; }

/* =========================================================
   FINAL SPACING OVERRIDE (batte density-compact label rule)
   ========================================================= */

body.panel-root.density-compact .section > h2{
  margin: 0 0 22px !important;
}

/* più spazio tra blocchi: label sopra, controllo sotto */
body.panel-root.density-compact .section > label{
  margin: 18px 0 10px !important;
}

body.panel-root.density-compact .section > label + input,
body.panel-root.density-compact .section > label + select,
body.panel-root.density-compact .section > label + textarea{
  margin: 0 auto 18px !important;
}

/* MAPS: ancora più aria dove ti dà fastidio */
body.panel-root.density-compact .card--maps > h2{ margin-bottom: 26px !important; }
body.panel-root.density-compact .card--maps > label[for="starting-map"]{ margin-top: 18px !important; }
body.panel-root.density-compact .card--maps > #starting-map{ margin-bottom: 20px !important; }

body.panel-root.density-compact .card--maps > label[for="map-list"]{ margin-top: 20px !important; }
body.panel-root.density-compact .card--maps > #map-list{ margin-bottom: 22px !important; }

/* checkbox maps: più stacco e layout pulito */
body.panel-root.density-compact .card--maps > label[for="maps-rotation"],
body.panel-root.density-compact .card--maps > label[for="random-maps"]{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap: 12px !important;
  margin: 22px 0 0 !important;
}
body.panel-root.density-compact .card--maps > label input[type="checkbox"]{
  width:auto !important;
  margin:0 !important;
  accent-color: var(--accent);
}

/* ==========================================================
   FIX: General Settings non deve "spalmare" le righe in altezza
   (grid dentro grid: row height = Maps, quindi la grid interna stretch-a)
   ========================================================== */

.grid-panels > .section.card--general{
  /* la card può anche restare alta come Maps, ma i contenuti devono stare in alto */
  align-self: stretch; /* default, lo lascio esplicito */
}

/* IMPORTANTISSIMO: niente distribuzione verticale delle righe */
.section.card--general{
  align-content: start !important;      /* <- evita lo "stretch" delle righe */
  grid-auto-rows: max-content !important;
}

/* (opzionale ma utile) evita che qualche child si centri verticalmente */
.section.card--general > *{
  align-self: start;
}

/* ==========================================================
   General Settings — spacing tighter (senza toccare le altre card)
   ========================================================== */

body.panel-root.density-compact .section.card--general{
  row-gap: 10px !important; /* era 16: troppo “aria” */
}

/* titolo più vicino al primo label */
body.panel-root.density-compact .section.card--general > h2{
  margin: 0 0 10px !important; /* batte il 22px globale */
}

/* tutti i label diretti della card: meno margine sopra */
body.panel-root.density-compact .section.card--general > label{
  margin: 10px 0 6px !important; /* batte 18px globale */
}

body.panel-root.density-compact .section.card--general > small#tag-note{
  margin: 0px 0 0px !important;
}

/* riduci lo “stacco” tra label e select dentro la grid (game-mode + version) */
body.panel-root.density-compact .section.card--general > label + select{
  margin: 0 auto 10px !important; /* batte il 18px globale */
}
body.panel-root.density-compact .section.card--general > label + .server-version-wrap{
  margin: 0 auto 10px !important;
}

/* metriche: un pelo più compatte */
body.panel-root.density-compact .section.card--general > .general-metrics{
  margin-top: 8px !important;
}
body.panel-root.density-compact .section.card--general .general-metrics .flex-container{
  gap: 12px 18px !important; /* batte gap più larghi */
}

/* ==========================================================
   FIX: allinea Game Mode e Zandronum Version (stessa altezza)
   ========================================================== */

/* 1) Niente margini “esterni” dentro la grid (spostavano in basso) */
.card--general > #server-version-wrap{
  margin: 0 !important;
  padding: 0 !important;
}

/* 2) Niente margin-top sul select interno (era +4px) */
.card--general > #server-version-wrap select,
.card--general > #server-version{
  margin-top: 0 !important;
}

/* 3) Mantieni solo lo spazio del tip sotto (senza spostare la tendina) */
.card--general > #server-version-wrap .field-hint,
.card--general > #server-version-note{
  margin-top: 8px !important;
}

/* 4) (facoltativo) assicura stessa altezza visiva dei due select */
.card--general > #game-mode,
.card--general > #server-version{
  min-height: 36px;
}
/* ==========================================================
   WADs — Tools layout (Upload / My uploads / Storage / DB)
   + FIX linea arancione + autocomplete DB
   INCOLLA IN FONDO a styles.css
   ========================================================== */

/* Griglia strumenti dentro WADs */
.card--wads .wads-tools{
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  grid-template-areas:
    "upload"
    "db";
  align-items: stretch;
}

@media (max-width: 900px){
  .card--wads .wads-tools{
    grid-template-columns: 1fr;
    grid-template-areas:
      "upload"
      "db";
  }
}

/* Aree */
.card--wads .upload-section-highlight{ grid-area: upload; }
.card--wads .my-uploads{ grid-area: myuploads; }
.card--wads .storage-box{ grid-area: storage; }
.card--wads .form-section.database{ grid-area: db; }

/* Card look uniforme */
.card--wads .upload-section-highlight,
.card--wads .my-uploads,
.card--wads .storage-box,
.card--wads .form-section.database{
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;

  position: relative;
  overflow: hidden;

  padding: 16px 16px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(20,24,34,.62), rgba(14,18,27,.55));
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}

/* FIX linea arancione: ora è “a bordo top” e non taglia il testo */
.card--wads .upload-section-highlight::before,
.card--wads .my-uploads::before,
.card--wads .storage-box::before,
.card--wads .form-section.database::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 3px;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(90deg,
    rgba(249,115,22,0.0),
    rgba(249,115,22,0.55),
    rgba(239,68,68,0.50),
    rgba(249,115,22,0.55),
    rgba(249,115,22,0.0)
  );
  opacity:.65;
  pointer-events:none;
  z-index:0;
}

/* contenuti sopra la linea */
.card--wads .upload-section-highlight > *,
.card--wads .my-uploads > *,
.card--wads .storage-box > *,
.card--wads .form-section.database > *{
  position: relative;
  z-index: 1;
}

/* Titoli coerenti (Upload + My uploads + DB) */
.card--wads .upload-section-highlight h3,
.card--wads .my-uploads h3,
.card--wads .form-section.database h3{
  margin: 0 0 12px !important;
  text-align: center;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .02em;
}

/* ---------------- Upload box ---------------- */
.card--wads .upload-controls{
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 12px;
  justify-items: center;
}

.card--wads .upload-controls input[type="file"]{
  width: 100%;
  max-width: 520px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: #0f1420;
  color: #e5e7eb;
}

.card--wads .upload-controls button{
  width: min(260px, 100%);
  height: 44px;
}

/* ---------------- My uploads ---------------- */
.card--wads .my-uploads.section{
  box-shadow: none !important;
}

.card--wads .my-uploads .controls{
  display: grid !important;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

@media (max-width: 520px){
  .card--wads .my-uploads .controls{
    grid-template-columns: 1fr;
  }
}

.card--wads .my-uploads select{
  width: 100% !important;
  min-width: 0;
}

.card--wads #delete-wad-btn{
  width: auto !important;
  min-width: 150px;
  height: 44px;
}

.card--wads .my-uploads .hint{
  margin-top: 10px;
  line-height: 1.35;
  opacity: .92;
}

/* ---------------- Storage box ---------------- */
.card--wads .storage-box{
  padding: 14px 16px 16px;
}

.card--wads .storage-header{ margin-bottom: 10px; }
.card--wads .storage-bar{ height: 8px; }

/* ---------------- DB box ---------------- */
.card--wads .form-section.database{
  padding-top: 16px;
}

/* input DB uniforme */
.card--wads .form-section.database #database-file{
  width: min(520px, 100%);
  display: block;
  margin: 0 auto;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: #0f1420 !important;
  color: #e5e7eb !important;
}

/* Autocomplete DB: sotto l’input, non “top:0” 
.card--wads .form-section.database{
  position: relative;
}
.card--wads .form-section.database #database-suggestions.autocomplete-box{
  top: calc(100% + 8px) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-height: 240px;
  z-index: var(--z-autocomplete);
}*/

/* FIX: lascia uscire il dropdown autocomplete dal box DB */
.card--wads .form-section.database{
  overflow: visible !important;
}

/* assicurati che stia sopra */
.card--wads .form-section.database #database-suggestions{
  z-index: 9999 !important;
}

.card--wads .form-section.database{ overflow: visible !important; }

.card--wads .form-section.database .db-field{
  position: relative;
  width: min(520px, 100%);
  margin: 0 auto;
}

.card--wads .form-section.database #database-suggestions{
  top: calc(100% + 8px) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
}

/* ==========================================================
   POLISH: Password + Manage Configurations
   incolla come ULTIMO blocco in styles.css
   ========================================================== */

/* ---------- PASSWORD ---------- */
.card--passwords{
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0; /* gestiamo con margins sotto */
}

/* Titolo un filo più respirato (solo qui) */
.card--passwords > h2{
  margin-bottom: 20px !important;
}

/* label centrata ma non “schiacciata” */
.card--passwords > label{
  width: 100%;
  text-align: center;
  margin: 16px 0 10px !important;
}

/* input meno larghi e coerenti */
body.panel-root .card--passwords input[type="text"]{
  width: min(560px, 92%) !important;
  max-width: 560px !important;
  margin: 0 auto 16px !important;
}

/* checkbox già “pulite”, aggiungo solo un pelo di spazio sopra */
.card--passwords > label[for="enableconnectpassword"],
.card--passwords > label[for="enablejoinpassword"]{
  margin-top: 18px !important;
}


/* ---------- CONFIGURATIONS ---------- */
.card--configs{
  display: grid;
  justify-items: center;
  align-content: start;
}

/* Titolo */
.card--configs > h2{
  margin-bottom: 20px !important;
}

/* Input nome config: non enorme */
.card--configs #config-name{
  width: min(720px, 92%) !important;
  max-width: 720px !important;
  margin: 0 auto 14px !important;
}

/* Riga bottoni: griglia ordinata con gap */
.card--configs .config-actions{
  width: min(900px, 100%);
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 14px;
  margin: 6px auto 14px;
}

/* Bottoni: prendono tutta la cella e non si ammassano */
.card--configs .config-actions .config-button{
  width: 100% !important;
  margin: 0 !important;
  height: 46px;
}

/* Select: stessa “linea” dell’input sopra */
.card--configs #config-list{
  width: min(900px, 100%) !important;
  max-width: 900px !important;
  margin: 0 auto !important;
}

/* Mobile: bottoni in colonna */
@media (max-width: 900px){
  .card--configs .config-actions{
    grid-template-columns: 1fr;
  }
}

/* ==========================================================
   CONFIGURATIONS — chiarezza Create/Save vs Load/Delete
   incolla in FONDO a styles.css
   ========================================================== */

.card--configs{
  display: grid;
  justify-items: center;
  align-content: start;
}

.card--configs > h2{
  margin-bottom: 18px !important;
}

/* due “sub-card” dentro la card */
.card--configs .cfg-block{
  width: min(980px, 100%);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(20,24,34,.55), rgba(14,18,27,.45));
  box-shadow: 0 10px 26px rgba(0,0,0,.30);
  padding: 14px 14px 12px;
}

.card--configs .cfg-block + .cfg-block{
  margin-top: 14px;
}

/* titoletti blocchi */
.card--configs .cfg-block h3{
  margin: 0 0 10px !important;
  text-align: center;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: .02em;
}

/* righe: input+save e select+load+delete */
.card--configs .cfg-row{
  width: 100%;
  display: grid;
  gap: 12px;
  align-items: center;
}

/* Create: input + save */
.card--configs .cfg-create-row{
  grid-template-columns: 1fr auto;
}

/* Manage: select + load + delete */
.card--configs .cfg-manage-row{
  grid-template-columns: 1fr auto auto;
}

/* campi non giganteschi */
.card--configs #config-name,
.card--configs #config-list{
  width: 100% !important;
  min-width: 0;
  height: 46px;
}

/* bottoni più “compatti” e coerenti */
.card--configs .cfg-row .config-button{
  height: 46px;
  width: 180px !important;
  margin: 0 !important;
}

/* hint sotto */
.card--configs .cfg-hint{
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.35;
  color: rgba(232,236,243,.82);
  text-align: center;
}

/* mobile: impila bene */
@media (max-width: 900px){
  .card--configs .cfg-create-row{
    grid-template-columns: 1fr;
  }
  .card--configs .cfg-manage-row{
    grid-template-columns: 1fr;
  }
  .card--configs .cfg-row .config-button{
    width: 100% !important;
  }
}

/* ==========================================================
   PANEL — Upload Manager card only
   ========================================================== */

.card--wads .upload-section-highlight.upload-manager-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:140px;
  text-align:center;
}

.card--wads .upload-section-highlight.upload-manager-card .upload-manager-link{
  margin-top:0;
}

.card--wads .upload-section-highlight.upload-manager-card .upload-manager-hint{
  margin-top:0;
  max-width:520px;
  line-height:1.45;
  color:#cbd5e1;
}

.wad-policy-list{
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wad-policy-row{
  display: grid;
  grid-template-columns: 300px 1fr; /* colonna file | colonna motivo */
  gap: 12px;
  align-items: start;
}

.wad-policy-file{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.wad-policy-file code{
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wad-policy-dot{
  flex: 0 0 auto;
}

.wad-policy-reason{
  min-width: 0;
  line-height: 1.35;
}

.wad-policy-sub{
  margin-top: 6px;
  opacity: .9;
}

/* Mobile: vai a 1 colonna */
@media (max-width: 700px){
  .wad-policy-row{ grid-template-columns: 1fr; }
  .wad-policy-file code{ white-space: normal; }
}

/* layout in colonna anche dentro il custom alert */
#custom-alert-box .wad-policy-list{ text-align:left; }

.wad-policy-list{
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wad-policy-row{
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 12px;
  align-items: start;
}

.wad-policy-file{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.wad-policy-file code{
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wad-policy-reason{ line-height: 1.35; }

@media (max-width: 700px){
  .wad-policy-row{ grid-template-columns: 1fr; }
  .wad-policy-file code{ white-space: normal; }
}

/* ==========================================================
   Database import + quick list
   ========================================================== */
.card--wads .form-section.database .db-import-block{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin-top:8px;
}

.card--wads .form-section.database .db-section-title{
  font-weight:700;
  color:#e5e7eb;
  text-align:center;
  font-size:14px;
}

.card--wads .form-section.database .db-import-input{
  width:min(520px, 100%);
  display:block;
  margin:0 auto;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14) !important;
  background:#0f1420 !important;
  color:#e5e7eb !important;
  padding:10px 12px;
}

.card--wads .form-section.database .db-import-btn{
  min-width:200px;
}

.card--wads .form-section.database .db-inline-help{
  display:block;
  max-width:420px;
  text-align:center;
  font-size:12px;
  line-height:1.45;
  color:#9ca3af;
}

.card--wads .form-section.database .db-inline-help code{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  border-radius:6px;
  padding:1px 6px;
  color:#f3f4f6;
}

.card--wads .form-section.database .db-divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:16px 0 12px;
  color:#9ca3af;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.card--wads .form-section.database .db-divider::before,
.card--wads .form-section.database .db-divider::after{
  content:"";
  flex:1;
  height:1px;
  background:rgba(255,255,255,.10);
}

.card--wads .form-section.database .db-divider span{
  white-space:nowrap;
}

.card--wads .form-section.database .database-quick-list{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  min-height:0;
}

.card--wads .form-section.database .database-quick-empty{
  width:100%;
  text-align:center;
  font-size:12px;
  color:#9ca3af;
}

.card--wads .form-section.database .database-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  max-width:100%;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(249,115,22,.28);
  background:rgba(249,115,22,.10);
  color:#f3f4f6;
  font-size:12px;
  line-height:1.2;
  cursor:pointer;
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}

.card--wads .form-section.database .database-chip:hover{
  transform:translateY(-1px);
  background:rgba(249,115,22,.18);
  border-color:rgba(249,115,22,.45);
}

.card--wads .form-section.database .database-chip.is-active{
  background:linear-gradient(135deg, rgba(249,115,22,.26), rgba(239,68,68,.18));
  border-color:rgba(249,115,22,.58);
  box-shadow:0 0 0 1px rgba(249,115,22,.20) inset;
}

@media (max-width: 640px){
  .card--wads .form-section.database .db-inline-help{
    max-width:100%;
  }
}

#confirmation-box.danger-confirm {
  border: 2px solid #ff4d4f;
  box-shadow: 0 0 0 1px rgba(255,77,79,.15), 0 20px 40px rgba(0,0,0,.45);
  max-width: 460px;
}

#confirmation-box.danger-confirm #confirm-button {
  background: #2fb344;
  color: #fff;
  font-weight: 700;
}

#confirmation-box.danger-confirm #confirm-button:disabled {
  opacity: .55;
  cursor: not-allowed;
}

#confirmation-box.danger-confirm #cancel-button {
  background: #e03131;
  color: #fff;
  font-weight: 700;
}

.db-overwrite-warning {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
}

.db-overwrite-warning-icon {
  font-size: 28px;
  line-height: 1;
}

.db-overwrite-warning-title {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
}

.db-overwrite-warning-text {
  font-size: 15px;
  line-height: 1.5;
  color: #e5e7eb;
}

.db-overwrite-warning-note {
  font-size: 13px;
  line-height: 1.45;
  color: #fca5a5;
}

/* ==========================================================
   Database collapsible picker
   ========================================================== */

.card--wads .form-section.database .database-picker{
  width:min(520px, 100%);
  margin:0 auto 14px;
}

.card--wads .form-section.database .database-toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(249,115,22,.30);
  background:linear-gradient(180deg, rgba(249,115,22,.16), rgba(239,68,68,.10));
  color:#fff;
  font-weight:800;
  box-shadow:0 8px 18px rgba(0,0,0,.22);
  transition:transform .12s ease, border-color .12s ease, background .12s ease;
}

.card--wads .form-section.database .database-toggle:hover{
  transform:translateY(-1px);
  border-color:rgba(249,115,22,.45);
  background:linear-gradient(180deg, rgba(249,115,22,.22), rgba(239,68,68,.14));
}

.card--wads .form-section.database .database-toggle-label{
  flex:1;
  text-align:left;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.card--wads .form-section.database .database-count-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:28px;
  height:28px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(15,20,32,.85);
  border:1px solid rgba(255,255,255,.12);
  color:#f8fafc;
  font-size:12px;
  font-weight:800;
  line-height:1;
}

.card--wads .form-section.database .database-toggle-arrow{
  flex:0 0 auto;
  font-size:14px;
  transition:transform .18s ease;
}

.card--wads .form-section.database .database-toggle.is-open .database-toggle-arrow{
  transform:rotate(180deg);
}

.card--wads .form-section.database .database-picker-panel{
  margin-top:10px;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(15,20,32,.72);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
}

.card--wads .form-section.database .database-quick-list{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  min-height:0;
}

.card--wads .form-section.database .database-quick-empty{
  width:100%;
  text-align:center;
  font-size:12px;
  color:#9ca3af;
  padding:4px 0;
}

.card--wads .form-section.database .database-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  max-width:100%;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(249,115,22,.30);
  background:rgba(249,115,22,.10);
  color:#f3f4f6;
  font-size:12px;
  line-height:1.2;
  cursor:pointer;
  transition:transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.card--wads .form-section.database .database-chip:hover{
  transform:translateY(-1px);
  background:rgba(249,115,22,.18);
  border-color:rgba(249,115,22,.48);
}

.card--wads .form-section.database .database-chip.is-active{
  background:linear-gradient(135deg, rgba(249,115,22,.26), rgba(239,68,68,.18));
  border-color:rgba(249,115,22,.58);
  box-shadow:0 0 0 1px rgba(249,115,22,.20) inset;
}

/* input subito sotto la tendina */
.card--wads .form-section.database .db-field{
  position:relative;
  width:min(520px, 100%);
  margin:0 auto;
}

/* autocomplete sotto input */
.card--wads .form-section.database #database-suggestions{
  top:calc(100% + 8px) !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  z-index:9999 !important;
}

/* ==========================================================
   My Active Servers - Players chip
   ========================================================== */

.card--active #my-servers-list {
  overflow: auto;
}

.card--active #my-servers-list table {
  min-width: 1120px;
}

.card--active #my-servers-list th:nth-child(3),
.card--active #my-servers-list td:nth-child(3) {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

.card--active #my-servers-list td.my-col-players {
  position: relative;
  z-index: 1;
  padding-top: 6px;
  padding-bottom: 6px;
}

.card--active #my-servers-list tbody tr:hover td.my-col-players,
.card--active #my-servers-list td.my-col-players:focus-within {
  z-index: 5;
}

.card--active #my-servers-list th:nth-child(4),
.card--active #my-servers-list td:nth-child(4),
.card--active #my-servers-list th:nth-child(5),
.card--active #my-servers-list td:nth-child(5),
.card--active #my-servers-list th:nth-child(6),
.card--active #my-servers-list td:nth-child(6),
.card--active #my-servers-list th:nth-child(7),
.card--active #my-servers-list td:nth-child(7),
.card--active #my-servers-list th:nth-child(8),
.card--active #my-servers-list td:nth-child(8) {
  white-space: nowrap;
}

.card--active #my-servers-list td:nth-child(4),
.card--active #my-servers-list td:nth-child(6),
.card--active #my-servers-list td:nth-child(7) {
  font-variant-numeric: tabular-nums;
}

.pd-players-empty {
  color: #94a3b8;
  opacity: .85;
}

.pd-players-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 86px;
  height: 20px;
  border: 1px solid rgba(148,163,184,.28);
  border-radius: 999px;
  background: rgba(15,23,42,.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
  cursor: default;
  user-select: none;
  outline: none;
}

.pd-players-bar {
  position: absolute;
  inset: 2px;
  display: flex;
  gap: 1px;
  overflow: hidden;
  border-radius: 999px;
  z-index: 0;
}

.pd-players-seg {
  flex: 1 1 0;
  min-width: 0;
  background: rgba(255,255,255,.08);
}

.pd-players-seg.is-player {
  background: #ff6a2b;
}

.pd-players-seg.is-spectator {
  background: #57d5ff;
}

.pd-players-seg.is-bot {
  background: #b78cff;
}

.pd-players-count {
  position: relative;
  z-index: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0,0,0,.85);
}

.pd-players-tooltip {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  min-width: 154px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(148,163,184,.24);
  background: rgba(3,7,18,.97);
  box-shadow: 0 14px 28px rgba(0,0,0,.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
  z-index: 30;
}

.pd-players-tooltip::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 50%;
  width: 10px;
  height: 10px;
  background: rgba(3,7,18,.97);
  border-left: 1px solid rgba(148,163,184,.24);
  border-bottom: 1px solid rgba(148,163,184,.24);
  transform: translateY(-50%) rotate(45deg);
}

.pd-players-chip:hover .pd-players-tooltip,
.pd-players-chip:focus-visible .pd-players-tooltip,
.pd-players-chip:focus .pd-players-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

.pd-players-tip-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  line-height: 1.25;
  color: #dbe6f3;
}

.pd-players-tip-row + .pd-players-tip-row {
  margin-top: 4px;
}

.pd-players-tip-row span {
  color: #a8b6c9;
}

.pd-players-tip-row strong {
  color: #ffffff;
  font-weight: 800;
}

@media (max-width: 1500px) {
  .pd-players-tooltip {
    left: 50%;
    top: auto;
    bottom: calc(100% + 10px);
    transform: translateX(-50%) translateY(4px);
  }

  .pd-players-tooltip::before {
    left: 50%;
    top: auto;
    bottom: -6px;
    border-left: none;
    border-bottom: none;
    border-right: 1px solid rgba(148,163,184,.24);
    border-top: 1px solid rgba(148,163,184,.24);
    transform: translateX(-50%) rotate(45deg);
  }

  .pd-players-chip:hover .pd-players-tooltip,
  .pd-players-chip:focus-visible .pd-players-tooltip,
  .pd-players-chip:focus .pd-players-tooltip {
    transform: translateX(-50%) translateY(0);
  }
}

.card--active #my-servers-list thead th.is-sortable {
  cursor: pointer;
  user-select: none;
}

.card--active #my-servers-list thead th.is-sortable:hover {
  color: #ffffff;
}

.card--active #my-servers-list thead th.is-sort-active {
  color: #f8fafc;
}

.startup-alert{
  display:grid;
  grid-template-columns:52px 1fr;
  gap:14px;
  align-items:start;
  text-align:left;
  max-width:min(760px, 86vw);
}

.startup-alert__icon{
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:rgba(239,68,68,.14);
  border:1px solid rgba(239,68,68,.30);
  color:#fda4af;
  font-size:24px;
  line-height:1;
}

.startup-alert__title{
  font-size:22px;
  font-weight:700;
  color:#fff;
  margin-bottom:10px;
}

.startup-alert__reason{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
  color:#e5e7eb;
}

.startup-alert__badge{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
  background:rgba(249,115,22,.14);
  border:1px solid rgba(249,115,22,.28);
  color:#fdba74;
}

.startup-alert__hint{
  padding:12px 14px;
  border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:#d1d5db;
  line-height:1.5;
}

.startup-alert__details{
  margin-top:14px;
}

.startup-alert__details summary{
  cursor:pointer;
  color:#f3f4f6;
  font-weight:700;
  margin-bottom:10px;
}

.startup-alert__log{
  margin-top:10px;
  max-height:220px;
  overflow:auto;
  padding:12px 14px;
  border-radius:12px;
  background:#111827;
  border:1px solid rgba(255,255,255,.08);
  color:#cbd5e1;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12px;
  line-height:1.45;
  word-break:break-word;
}

@media (max-width:700px){
  .startup-alert{
    grid-template-columns:1fr;
  }

  .startup-alert__icon{
    width:46px;
    height:46px;
  }

  .startup-alert__title{
    font-size:20px;
  }
}