:root { --rosso: #C62828; --ink: #1B1F24; --ink2: #5b636c; --line: #e3e6ea; --bg: #f2f3f5; }
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--bg); }
header { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: #fff; border-bottom: 1px solid var(--line); }
header img { height: 28px; display: block; } header span { color: var(--ink2); font-weight: 600; } header .esci { margin-left: auto; color: var(--ink2); }
main { max-width: 1100px; margin: 0 auto; padding: 16px; }
h1 { font-size: 1.4rem; margin: 6px 0 14px; } h2 { font-size: 1.05rem; margin: 0 0 10px; }
a { color: #1f5fae; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; overflow-wrap: anywhere; }
.riga { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; } .griglia .largo { grid-column: 1 / -1; }
label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--ink2); }
input, select, textarea { font: inherit; color: var(--ink); padding: 9px 10px; border: 1px solid #c9ced4; border-radius: 8px; background: #fff; width: 100%; }
.btn { font: inherit; padding: 8px 14px; border-radius: 8px; border: 1px solid #c9ced4; background: #fff; cursor: pointer; text-decoration: none; color: var(--ink); display: inline-block; }
.btn.primario { background: var(--rosso); border-color: var(--rosso); color: #fff; } .btn.pericolo { border-color: var(--rosso); color: var(--rosso); }
.barra { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .8rem; color: var(--ink2); font-weight: 600; } .clic { cursor: pointer; } .clic:hover { background: #fafbfc; }
td.data { white-space: nowrap; width: 1%; color: var(--ink2); }
.muto { color: var(--ink2); font-size: .85rem; } .rosso { color: var(--rosso); font-weight: 600; }
.tag { font-size: .78rem; padding: 2px 8px; border-radius: 20px; color: #fff; } .rosso-bg { background: var(--rosso); } .verde-bg { background: #2e7d32; }
.pallino { display: inline-block; background: var(--rosso); color: #fff; border-radius: 20px; padding: 0 8px; font-size: .78rem; margin-left: 4px; }
.alert { padding: 10px 12px; border-radius: 8px; margin-bottom: 12px; } .alert.ok { background: #e7f4e8; } .alert.err { background: #fde8e8; color: #8a1c1c; }
pre.config { background: #1B1F24; color: #e8eaed; padding: 12px; border-radius: 8px; overflow-x: auto; font-size: .85rem; white-space: pre-wrap; word-break: break-all; }
.in-riga { display: flex; gap: 6px; flex-wrap: wrap; }
.login { max-width: 380px; margin: 10vh auto; display: flex; flex-direction: column; gap: 12px; } .login .marchio { height: 40px; align-self: center; } .login h1 { text-align: center; font-size: 1.1rem; color: var(--ink2); margin: 0 0 6px; }
footer { text-align: center; color: var(--ink2); font-size: .8rem; padding: 20px 16px 30px; }
@media (max-width: 720px) {
  .griglia { grid-template-columns: 1fr; }
  table.elenco tr:first-child { display: none; } table.elenco tr { display: block; border-bottom: 1px solid var(--line); padding: 6px 0; }
  table.elenco td { display: flex; gap: 10px; border: 0; padding: 3px 4px; } table.elenco td::before { content: attr(data-l); min-width: 92px; color: var(--ink2); font-size: .8rem; }
}