:root {
  --bg: #FBFAF9;
  --surface: #FFFFFF;
  --ink: #15101A;
  --ink2: #5F5660;
  --ink3: #8C838F;
  --line: #E8E3E6;
  --line2: #F1EDEF;
  --brand: #8B1A4A;
  --brand-d: #6E1239;
  --tint: #FAF1F5;
  --tech: #0F2E52;
  --ok: #1B7A3E;
  --ok-bg: #E7F5EC;
  --warn: #8A5A00;
  --warn-bg: #FDF3DC;
  --err: #B00020;
  --err-bg: #FCE8EB;
  --radius: 12px;
  color-scheme: light;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
h1 { font-size: 1.35rem; letter-spacing: -.02em; line-height: 1.15; }
h2 { font-size: 1.1rem; letter-spacing: -.01em; margin-bottom: .6rem; }
h3 { font-size: .95rem; margin-bottom: .4rem; }
a { color: var(--brand); }
small, .tenue { color: var(--ink2); }
.tenue3 { color: var(--ink3); }
.hidden, [hidden] { display: none !important; }

button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 48px; padding: .7rem 1.1rem; border-radius: 10px; border: 1px solid transparent;
  font: inherit; font-weight: 700; font-size: .95rem; cursor: pointer; text-decoration: none;
  background: var(--brand); color: #fff; touch-action: manipulation; user-select: none;
}
button:active { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: default; }
button.sec, .btn.sec { background: var(--surface); color: var(--ink); border-color: var(--line); }
button.piccolo { min-height: 38px; padding: .4rem .75rem; font-size: .85rem; }
button.pericolo { background: var(--surface); color: var(--err); border-color: #F2C3CB; }
button.largo { width: 100%; }

input, select, textarea {
  font: inherit; font-size: 1rem; width: 100%;
  min-height: 48px; padding: .65rem .8rem; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand); outline-offset: -1px; border-color: var(--brand); }
label { display: block; font-size: .8rem; font-weight: 700; color: var(--ink2); margin: .7rem 0 .25rem; letter-spacing: .02em; }
label.riga { display: flex; align-items: center; gap: .5rem; font-size: .95rem; font-weight: 500; color: var(--ink); }
label.riga input { width: auto; min-height: 0; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; }
.pill {
  display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border-radius: 100px;
  font-size: .78rem; font-weight: 700; white-space: nowrap;
}
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.err { background: var(--err-bg); color: var(--err); }
.pill.neutro { background: var(--line2); color: var(--ink2); }
.avviso { padding: .75rem .9rem; border-radius: 10px; font-size: .9rem; }
.avviso.warn { background: var(--warn-bg); color: var(--warn); }
.avviso.err { background: var(--err-bg); color: var(--err); }
.avviso.ok { background: var(--ok-bg); color: var(--ok); }
.avviso.info { background: var(--tint); color: var(--brand-d); }

/* ---------- fotocamera ---------- */
.camera {
  position: relative; background: #000; overflow: hidden; border-radius: var(--radius);
  aspect-ratio: 4 / 3; max-height: 46vh; width: 100%;
}
.camera video { width: 100%; height: 100%; object-fit: cover; display: block; }
.camera .mirino {
  position: absolute; border: 2px solid rgba(255,255,255,.9); border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.35); pointer-events: none; transition: border-color .15s;
}
.camera .mirino.letto { border-color: #4ADE80; }
.camera .mirino::after {
  content: ''; position: absolute; left: 6%; right: 6%; top: 50%; height: 2px;
  background: rgba(239, 68, 68, .8); box-shadow: 0 0 6px rgba(239,68,68,.8);
}
.camera .comandi {
  position: absolute; right: .5rem; bottom: .5rem; display: flex; gap: .4rem;
}
.camera .comandi button {
  min-height: 44px; min-width: 44px; padding: .4rem .6rem; background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.3); color: #fff; font-size: .8rem;
}
.camera .comandi button.acceso { background: #FACC15; color: #000; }
.camera .messaggio {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  color: #fff; padding: 1.2rem; font-size: .95rem; background: rgba(0,0,0,.6);
}
.camera .messaggio button { margin-top: .8rem; }