:root {
  --blu:#1565c0; --bg:#f4f5f7; --card:#fff; --muted:#667; --line:#e3e6ea; --text:#1a1c20; --error:#c0392b;
  color-scheme: light;
}
[data-theme="dark"] {
  --blu:#3b82f6; --bg:#121417; --card:#1c1f24; --muted:#9aa3ad; --line:#2c313a; --text:#e6e8eb; --error:#ff7b72;
  color-scheme: dark;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }   /* l'attributo hidden deve sempre nascondere, anche su .card */
body { margin:0; padding-top:var(--header-h, 76px); font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--text); transition:background .2s, color .2s; }

.topbar { position:fixed; top:0; left:0; right:0; z-index:20;
  padding:max(12px,env(safe-area-inset-top)) 16px 10px;
  background:var(--blu); color:#fff; }
.topbar-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.topbar h1 { font-size:1.2rem; margin:0; }
.topbar-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.topbar .btn-ghost { color:#fff; border-color:rgba(255,255,255,.7); padding:7px 10px; font-size:1.2rem; line-height:1; }
#btn-theme { border:none; background:transparent; padding:6px 8px; }
.account { display:block; margin-top:4px; font-size:.78rem; color:#fff; opacity:.9;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account:empty { display:none; }
.account::before { content:''; display:inline-block; width:8px; height:8px; border-radius:50%;
  background:#34c759; margin-right:7px; vertical-align:middle; }
.account.expiring::before { background:#f0ad4e; }   /* sessione in scadenza */

main { max-width:560px; margin:0 auto; padding:16px; display:flex; flex-direction:column; gap:16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px;
  display:flex; flex-direction:column; gap:12px; }
.field { display:flex; flex-direction:column; gap:6px; font-size:.9rem; color:var(--muted); }
.field input, .field select { font-size:1rem; padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--text); }
.row { display:flex; gap:12px; }
.row > button { flex:1; }
button { font-size:1rem; padding:14px; border-radius:12px; border:none; cursor:pointer; }
.btn-primary { background:var(--blu); color:#fff; }
.btn-ghost { background:transparent; color:var(--blu); border:1px solid var(--blu); }
.btn-big { font-size:1.25rem; padding:22px; }
.muted { color:var(--muted); font-size:.9rem; min-height:1.2em; margin:0; }
#preview { max-width:100%; border-radius:10px; display:none; }
#preview[src] { display:block; }
.history { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.history li { border:1px solid var(--line); border-radius:10px; padding:10px 12px; font-size:.95rem; }
.history a { color:var(--blu); text-decoration:none; }
.row-inline { display:flex; align-items:center; gap:12px; }
.loader { display:inline-block; width:18px; height:18px; border:3px solid var(--line); border-top-color:var(--blu); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.error { color:var(--error); font-size:.9rem; margin:6px 0 0; }
.btn-wide { width:100%; }
button:disabled { opacity:.45; cursor:not-allowed; }
.row-inline h2 { margin:0; }
.footer { display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center;
  padding:24px 16px; color:var(--muted); font-size:.85rem; }
.footer a { color:var(--blu); text-decoration:none; }
.footer a:hover { text-decoration:underline; }