:root {
  --bg:#f5f2ee; --fg:#1b1917; --muted:#80776d; --card:#fff; --accent:#8a5a2b; --accent-fg:#fff;
  --ok:#2e7d32; --bad:#b3261e; --line:#e6e0d8; --gold:#c99c66; --shadow:0 1px 2px rgba(30,20,10,.06),0 6px 18px rgba(30,20,10,.06);
  --serif: Georgia, "Times New Roman", serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#141210; --fg:#f1ece6; --muted:#a39b92; --card:#1f1c19; --accent:#c99c66; --accent-fg:#1b1917;
          --ok:#6fcf74; --bad:#ff8a80; --line:#34302b; --shadow:none; }
  .brand img, .pub-logo { filter: invert(1); }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; -webkit-font-smoothing:antialiased; }
main { max-width:560px; margin:0 auto; padding:18px 16px 40px; }
h1 { font:400 1.5rem/1.2 var(--serif); margin:0 0 14px; }
h2 { font:600 .8rem/1.2 system-ui; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 10px; }

.brand { display:flex; align-items:center; justify-content:space-between; padding:6px 2px 18px; }
.brand img { height:38px; width:auto; display:block; }
.brand span { font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); }

.panel { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px; margin-bottom:14px; box-shadow:var(--shadow); }
label { display:block; font-size:.78rem; letter-spacing:.04em; color:var(--muted); margin:12px 0 5px; }
input, select { width:100%; padding:13px 14px; font-size:1rem; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--fg); outline:none; transition:border-color .15s, box-shadow .15s; }
input:focus { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
button { padding:13px 18px; font-size:1rem; font-weight:600; border:0; border-radius:10px; background:var(--accent); color:var(--accent-fg); cursor:pointer; transition:filter .15s, transform .05s; }
button:hover { filter:brightness(1.07); } button:active { transform:translateY(1px); }
button.secondary { background:transparent; color:var(--fg); border:1px solid var(--line); font-weight:500; }
button.secondary:hover { border-color:var(--accent); filter:none; }
button.danger { background:var(--bad); color:#fff; }
button:disabled { opacity:.5; cursor:default; }
.row { display:flex; gap:8px; flex-wrap:wrap; }
.row > * { flex:1; }
#presets button { font:400 1.35rem var(--serif); padding:16px 8px; }

.tabs { display:flex; gap:4px; margin-bottom:16px; padding:4px; background:var(--card); border:1px solid var(--line); border-radius:12px; }
.tabs button { flex:1; background:transparent; color:var(--muted); font-weight:500; padding:10px; }
.tabs button.on { background:var(--accent); color:var(--accent-fg); }

.big { font:400 3rem/1.1 var(--serif); margin:2px 0 8px; }
.muted { color:var(--muted); font-size:.85rem; }
.badge { display:inline-block; padding:2px 11px; border-radius:99px; font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; border:1px solid currentColor; }
.badge.active { color:var(--ok); } .badge.used, .badge.expired, .badge.cancelled { color:var(--bad); }
.msg { padding:11px 13px; border-radius:10px; margin:12px 0; font-size:.95rem; }
.msg.err { background:color-mix(in srgb, var(--bad) 13%, transparent); color:var(--bad); }
.msg.ok { background:color-mix(in srgb, var(--ok) 13%, transparent); color:var(--ok); }
table { width:100%; border-collapse:collapse; font-size:.88rem; } td, th { padding:8px 4px; border-bottom:1px solid var(--line); text-align:left; }
td.r, th.r { text-align:right; font-variant-numeric:tabular-nums; }
video { width:100%; border-radius:12px; background:#000; }
.hidden { display:none !important; }
.list-item { display:flex; justify-content:space-between; gap:10px; padding:12px 0; border-bottom:1px solid var(--line); cursor:pointer; }
.list-item:last-child { border-bottom:0; }
summary { cursor:pointer; }

.pub-logo { display:block; max-height:54px; max-width:70%; margin:6px 0 22px; }
.pub-amt { font:400 3.6rem/1.05 var(--serif); }

/* ---------- Gift card ----------
   Tutte le misure sono multipli di --u (1% della larghezza della card): 1cqw a schermo, 1,48 mm in stampa,
   così lo stesso disegno vale a schermo e in stampa. Formato di stampa: A6 orizzontale 148x105 mm. */
#printArea { --u:1cqw; container-type:inline-size; width:100%; max-width:520px; margin:0 auto; }
.gc { aspect-ratio:148/105; width:100%; position:relative; display:flex; flex-direction:column; justify-content:space-between;
  padding:calc(6.5 * var(--u)) calc(7 * var(--u)) calc(6 * var(--u)); border-radius:calc(2.6 * var(--u)); background:#1b1917; color:#f3ede4; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.25); }
.gc::before { content:""; position:absolute; inset:calc(2.3 * var(--u)); border:calc(.28 * var(--u)) solid rgba(201,156,102,.6); border-radius:calc(1.6 * var(--u)); pointer-events:none; }
.gc-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:calc(7 * var(--u)); } /* distanza minima garantita logo → Valore */
.gc .logo { height:calc(9.5 * var(--u)); width:auto; display:block; filter:invert(1); }
.gc .kind { font:600 calc(2 * var(--u))/1 system-ui,sans-serif; letter-spacing:.38em; text-transform:uppercase; color:var(--gold); white-space:nowrap; }
.gc-body { display:flex; justify-content:space-between; align-items:flex-end; gap:calc(4 * var(--u)); }
.gc .lab { font:600 calc(1.9 * var(--u))/1 system-ui,sans-serif; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); margin-bottom:calc(1.4 * var(--u)); }
.gc .amt { font:400 calc(13.5 * var(--u))/1 var(--serif); white-space:nowrap; }
.gc .amt.sm { font-size:calc(10.5 * var(--u)); }
.gc .rule { height:calc(.3 * var(--u)); width:calc(11 * var(--u)); background:var(--gold); margin:calc(2.6 * var(--u)) 0 calc(2.4 * var(--u)); }
.gc .code { font:600 calc(3.9 * var(--u))/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.07em; white-space:nowrap; }
.gc .qr { width:calc(29 * var(--u)); flex:none; background:#fff; padding:calc(1.8 * var(--u)); border-radius:calc(1.4 * var(--u)); }
.gc .qr svg { display:block; width:100%; height:auto; }
.gc .qr small { display:block; text-align:center; color:#555; font:calc(1.55 * var(--u))/1.2 system-ui,sans-serif; margin-top:calc(1.2 * var(--u)); }
.gc-foot { display:flex; flex-wrap:wrap; justify-content:space-between; gap:calc(3 * var(--u)); font:calc(1.85 * var(--u))/1.35 system-ui,sans-serif; color:#b9afa3; }

@page { size: A4 portrait; margin: 10mm; }
@media print {
  body { background:#fff; }
  body * { visibility:hidden; }
  #printArea, #printArea * { visibility:visible; }
  #printArea { --u:1.48mm; position:absolute; left:0; top:0; width:148mm; max-width:none; margin:0; }
  .gc { background:#fff; color:#1b1917; border-radius:0; box-shadow:none; border:.2mm solid #b9b2a8;
        -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .gc::before { border-color:#8a5a2b; }
  .gc .logo { filter:none; }
  .gc .kind, .gc .lab { color:#8a5a2b; }
  .gc .rule { background:#8a5a2b; }
  .gc .qr { background:none; padding:0; border-radius:0; }
  .gc .qr small { color:#444; }
  .gc-foot { color:#5f574e; }
}