:root{
  --bg: #1B1F22; --surface:#24292D; --surface-2:#2E3438; --border:#3A4045;
  --text:#EDEFF0; --text-muted:#98A2A8; --text-faint:#6D767C;
  --accent-operatore:#4FA8C9; --accent-mio:#E8A33D;
  --stato-nessuna:#C9564F; --stato-parziale:#E8A33D; --stato-totale:#5FAE7A;
  --danger:#C9564F;
  --font-ui: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "SF Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--text); font-family:var(--font-ui);
}
a{ color:inherit; text-decoration:none; }
.container{ max-width:900px; margin:0 auto; padding:28px 24px 60px; }
.topbar{
  display:flex; align-items:center; gap:12px; padding:18px 24px;
  border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--bg); z-index:5;
}
.brand-logo-full{ height:28px; width:auto; max-width:220px; object-fit:contain; display:block; }
.brand-logo-mark{ height:34px; width:auto; object-fit:contain; display:block; }
.brand-title{ font-weight:700; font-size:16px; }
.topnav{ display:flex; gap:18px; margin-left:8px; }
.topnav a{ font-size:14px; color:var(--text-muted); font-weight:600; padding:6px 0; border-bottom:2px solid transparent; }
.topnav a.active{ color:var(--text); border-bottom-color:var(--accent-mio); }
.tipo-badge{
  display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  padding:3px 9px; border-radius:999px; margin-left:8px;
}
.tipo-badge.fotovoltaico{ background:rgba(240,180,41,.15); color:#F0B429; }
.tipo-badge.pompa_di_calore{ background:rgba(224,112,61,.15); color:#E0703D; }
.tipo-badge.clima{ background:rgba(86,194,199,.15); color:#56C2C7; }
.tipo-filter{ display:flex; gap:10px; margin:14px 0 6px; flex-wrap:wrap; }
.tipo-filter a{
  font-size:13px; font-weight:600; color:var(--text-muted); background:var(--surface-2);
  border:1px solid var(--border); border-radius:999px; padding:6px 14px;
}
.tipo-filter a.active{ color:var(--text); border-color:var(--accent-mio); }
.crumb{ color:var(--text-muted); font-size:13px; margin-left:auto; }
.crumb a{ color:var(--accent-operatore); }

h1{ font-size:26px; margin:0 0 6px; }
h2{ font-size:18px; color:var(--text-muted); margin:28px 0 12px; }
.tag-settore{
  display:inline-block; font-size:12px; font-family:var(--font-mono); color:var(--text-muted);
  background:var(--surface-2); border:1px solid var(--border); border-radius:6px; padding:3px 8px;
}
.list{ display:flex; flex-direction:column; gap:10px; margin-top:16px; }
.card{
  display:block; background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:16px 18px; transition:border-color .15s;
}
.card:hover{ border-color:var(--text-faint); }
.card-title{ font-weight:600; font-size:16px; }
.card-sub{ font-size:13px; color:var(--text-muted); margin-top:4px; }
.stato-pill{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  padding:3px 9px; border-radius:999px; margin-left:8px;
}
.stato-pill.nessuna{ background:rgba(201,86,79,.15); color:var(--stato-nessuna); }
.stato-pill.parziale{ background:rgba(232,163,61,.15); color:var(--stato-parziale); }
.stato-pill.totale{ background:rgba(95,174,122,.15); color:var(--stato-totale); }

.empty{ color:var(--text-muted); padding:40px 0; text-align:center; }

.section{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:18px 20px; margin-bottom:16px;
}
.section h3{ margin:0 0 10px; font-size:14px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em;}
.punto{
  background:var(--surface-2); border-left:3px solid var(--text-faint); border-radius:8px;
  padding:12px 14px; margin-bottom:10px;
}
.punti-operatore .punto{ border-left-color:var(--accent-operatore); }
.punti-mio .punto{ border-left-color:var(--accent-mio); }
.punto p{ margin:0 0 8px; white-space:pre-wrap; }
.punto audio{ width:100%; margin-top:6px; }
.foto-grid{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.foto-grid img{
  width:120px; height:120px; object-fit:cover; border-radius:8px; border:1px solid var(--border);
}
.meta-row{ display:flex; gap:18px; color:var(--text-muted); font-size:13px; font-family:var(--font-mono); }
.text-block{ white-space:pre-wrap; line-height:1.5; color:var(--text); }