* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --navy: #16324F; --navy2: #112841; --blue: #1E4B7A; --blue-d: #163A5F;
  --green: #2E7D4F; --green-d: #256841; --red: #B3261E; --amber: #A66A00;
  --ink: #1B2733; --muted: #5C6670; --line: #DDE1DB; --line2: #F0F2EE;
  --bg: #F4F6F3; --card: #fff;
}
body {
  font-family: 'Titillium Web', system-ui, -apple-system, sans-serif;
  color: var(--ink); background: var(--bg);
}
input, select, button, textarea { font-family: inherit; }
.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
.boot { display: flex; align-items: center; justify-content: center; height: 100vh; color: var(--muted); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.45} }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #C4C9C2; border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- login ---------- */
.login-wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh;
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy2) 100%); padding: 20px; }
.login-card { background: #fff; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.35);
  width: 100%; max-width: 380px; padding: 32px 30px; }
.login-brand { font-weight: 700; font-size: 24px; letter-spacing: .5px; color: var(--navy); }
.login-sub { font-size: 12.5px; color: var(--muted); margin: 4px 0 22px; line-height: 1.35; }
.login-card label { font-size: 12px; font-weight: 700; color: #3A434B; display: block; margin: 0 0 4px; }
.login-card input { width: 100%; padding: 10px 12px; border: 1px solid #C4C9C2; border-radius: 8px;
  font-size: 14px; margin-bottom: 14px; }
.login-card input:focus { outline: none; border-color: var(--blue); }
.login-btn { width: 100%; background: var(--blue); color: #fff; border: none; border-radius: 8px;
  padding: 11px; font-size: 14px; font-weight: 600; cursor: pointer; }
.login-btn:hover { background: var(--blue-d); }
.login-btn:disabled { opacity: .6; cursor: default; }
.login-err { background: #FBF1F0; color: var(--red); border-radius: 7px; padding: 9px 12px;
  font-size: 12.5px; font-weight: 600; margin-bottom: 14px; }

/* ---------- shell ---------- */
.shell { display: flex; height: 100vh; overflow: hidden; }
.sidebar { width: 216px; flex: none; background: linear-gradient(180deg, var(--navy) 0%, var(--navy2) 100%);
  color: #fff; display: flex; flex-direction: column; }
.sidebar .brand { padding: 20px 18px 16px; border-bottom: 1px solid rgba(255,255,255,.12); }
.sidebar .brand b { font-weight: 700; font-size: 19px; letter-spacing: .5px; }
.sidebar .brand span { font-size: 11px; color: rgba(255,255,255,.65); line-height: 1.3; display: block; }
.nav { display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; flex: 1; }
.nav button { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: none;
  border-radius: 6px; cursor: pointer; font-size: 13.5px; font-weight: 600; text-align: left;
  background: transparent; color: rgba(255,255,255,.75); }
.nav button:hover { background: rgba(255,255,255,.14); color: #fff; }
.nav button.active { background: rgba(255,255,255,.16); color: #fff; }
.nav button .ico { width: 18px; text-align: center; font-family: 'IBM Plex Mono', monospace; font-size: 12px; }
.nav button .lbl { flex: 1; }
.nav .badge { background: var(--red); color: #fff; border-radius: 9px; padding: 1px 7px; font-size: 11px; }
.sidebar .foot { padding: 14px 16px; border-top: 1px solid rgba(255,255,255,.12); }
.sidebar .foot .role { font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px; color: rgba(255,255,255,.5); margin-bottom: 6px; }
.sidebar .foot .who { font-size: 13px; font-weight: 600; }
.sidebar .foot .desc { font-size: 11px; color: rgba(255,255,255,.55); margin-top: 6px; line-height: 1.4; }
.sidebar .foot .logout { margin-top: 12px; width: 100%; background: rgba(255,255,255,.08); color: #fff;
  border: 1px solid rgba(255,255,255,.22); border-radius: 6px; padding: 7px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.sidebar .foot .logout:hover { background: rgba(255,255,255,.16); }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar { min-height: 58px; flex: none; background: #fff; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 16px; padding: 8px 24px; flex-wrap: wrap; }
.topbar h1 { margin: 0; font-size: 17px; font-weight: 700; white-space: nowrap; }
.topbar .conv { font-size: 12.5px; color: var(--muted); }
.content { flex: 1; overflow: auto; padding: 24px; }

/* ---------- generic ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 1px 3px rgba(22,50,79,.06); padding: 16px 18px; }
.grid { display: grid; }
.btn { border: none; border-radius: 6px; padding: 8px 16px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.btn-primary { background: var(--blue); color: #fff; } .btn-primary:hover { background: var(--blue-d); }
.btn-green { background: var(--green); color: #fff; } .btn-green:hover { background: var(--green-d); }
.btn-ghost { background: #fff; border: 1px solid #C4C9C2; color: #3A434B; } .btn-ghost:hover { background: #F0F3F0; }
.btn-danger { background: var(--red); color: #fff; } .btn-danger:hover { background: #8F1E17; }
.btn:disabled { opacity: .55; cursor: default; }
.pill { font-size: 11.5px; font-weight: 600; border-radius: 12px; padding: 2px 9px; display: inline-block; }
.tag { font-family: 'IBM Plex Mono', monospace; font-size: 11px; background: #EEF2F6; border: 1px solid #D4DCE4;
  border-radius: 4px; padding: 1px 6px; color: var(--blue); }
label.fld { font-size: 12px; font-weight: 700; color: #3A434B; display: block; margin-bottom: 4px; }
input.in, select.in, textarea.in { width: 100%; padding: 9px 12px; border: 1px solid #C4C9C2;
  border-radius: 7px; font-size: 14px; background: #fff; }
input.in:focus, select.in:focus, textarea.in:focus { outline: none; border-color: var(--blue); }
.msg-ok { background: #E4EFE6; border-radius: 7px; padding: 9px 12px; font-size: 12.5px; color: var(--green); font-weight: 600; }
.msg-err { background: #FBF1F0; border-radius: 7px; padding: 9px 12px; font-size: 12.5px; color: var(--red); font-weight: 600; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.muted { color: var(--muted); }
h2.sec { margin: 0 0 12px; font-size: 14.5px; font-weight: 700; }
a { color: var(--blue); }
.toast { position: fixed; bottom: 20px; right: 20px; background: var(--navy); color: #fff;
  padding: 12px 18px; border-radius: 8px; font-size: 13px; box-shadow: 0 6px 24px rgba(0,0,0,.25); z-index: 9999; max-width: 360px; }
.toast.err { background: #7A2320; }
.hidden { display: none !important; }

/* ---------- guida ---------- */
.guida { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 26px; max-width: 1180px; align-items: start; }
.guida-lato { position: sticky; top: 0; }
.guida-indice { display: flex; flex-direction: column; gap: 1px; }
.guida-indice button { text-align: left; border: none; background: transparent; cursor: pointer;
  padding: 7px 10px; border-radius: 6px; font-size: 13px; color: var(--muted); border-left: 3px solid transparent; }
.guida-indice button:hover { background: #EAEEE8; color: var(--ink); }
.guida-indice button.on { background: #EEF2F6; color: var(--blue); font-weight: 700; border-left-color: var(--blue); }
.guida-corpo { display: flex; flex-direction: column; gap: 16px; }
.guida-sez { scroll-margin-top: 12px; }
.guida-sez h2 { font-size: 17px; margin: 0 0 4px; }
.guida-sez h3 { font-size: 13.5px; margin: 16px 0 6px; }
.guida-sez p { font-size: 13.5px; line-height: 1.6; margin: 8px 0; }
.guida-sez ul, .guida-sez ol { font-size: 13.5px; line-height: 1.6; margin: 8px 0 8px 18px; }
.guida-sez li { margin: 3px 0; }
.guida-sez table { border-collapse: collapse; width: 100%; font-size: 12.5px; margin: 10px 0; }
.guida-sez th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--muted); border-bottom: 1px solid var(--line); padding: 6px 8px 6px 0; vertical-align: bottom; }
.guida-sez td { border-bottom: 1px solid var(--line2); padding: 7px 8px 7px 0; vertical-align: top; line-height: 1.5; }
.guida-sez tr:last-child td { border-bottom: none; }
.guida-nota { background: #F4F8FB; border-left: 3px solid #7E9BB5; border-radius: 0 7px 7px 0;
  padding: 10px 14px; font-size: 12.5px; line-height: 1.55; margin: 10px 0; }
.guida-attenzione { background: #FDF8EE; border-left-color: #D9B36A; }
.guida-esempio { background: #F4F6F3; border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 14px; margin: 12px 0; font-size: 12.5px; line-height: 1.55; }
.guida-esempio > .tit { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--green); margin-bottom: 8px; }
.guida-esempio table { margin: 6px 0; }
.guida-sez pre { background: #1B2733; color: #E8EDE8; border-radius: 7px; padding: 11px 13px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11.5px; line-height: 1.55;
  overflow-x: auto; margin: 10px 0; }
.guida-flusso { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0; font-size: 12px; }
.guida-flusso span.p { background: #EEF2F6; color: var(--blue); border: 1px solid #BFD0DE;
  border-radius: 13px; padding: 3px 10px; font-weight: 600; }
.guida-flusso span.f { color: var(--muted); }
.guida-passi { counter-reset: passo; list-style: none; margin-left: 0; }
.guida-passi li { counter-increment: passo; position: relative; padding-left: 30px; margin: 8px 0; }
.guida-passi li::before { content: counter(passo); position: absolute; left: 0; top: 1px;
  width: 20px; height: 20px; border-radius: 50%; background: var(--blue); color: #fff;
  font-size: 11.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.ruolo { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  border-radius: 4px; padding: 2px 6px; white-space: nowrap; }
.ruolo-tutti { background: #EEF0ED; color: #3A434B; }
.ruolo-op { background: #EEF2F6; color: var(--blue); }
.ruolo-sup { background: #F2E7DC; color: var(--amber); }
@media (max-width: 900px) {
  .guida { grid-template-columns: 1fr; }
  .guida-lato { position: static; }
  .guida-indice { flex-direction: row; flex-wrap: wrap; }
}

/* ---------- modal ---------- */
.modal-ov { position: fixed; inset: 0; background: rgba(16,32,48,.55); display: flex;
  align-items: flex-start; justify-content: center; padding: 40px 20px; z-index: 1000; overflow: auto; }
.modal { background: #fff; border-radius: 12px; width: 100%; max-width: 640px;
  box-shadow: 0 24px 70px rgba(0,0,0,.35); }
.modal-head { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; font-size: 16px; flex: 1; }
.modal-x { border: none; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; color: var(--muted); }
.modal-body { padding: 20px 22px; }
.modal-foot { display: flex; gap: 10px; justify-content: flex-end; align-items: center;
  padding: 16px 22px; border-top: 1px solid var(--line2); }
.modal .fld { margin-top: 12px; }
.modal .fld:first-child { margin-top: 0; }