:root{
  --blue:#2789bb; --blue-dark:#123e60; --navy:#0d1f2c; --green:#4db43f;
  --ink:#2b3138; --muted:#5a6b76; --muted2:#8a9aa6;
  --bg:#f4f7f9; --card:#ffffff; --line:#e6edf2; --line2:#d4dee6;
  --head:"Lato",system-ui,sans-serif; --body:"Roboto",system-ui,sans-serif;
  --radius:14px; --shadow:0 6px 20px rgba(13,31,44,.10);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:var(--body); font-weight:300; color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; line-height:1.55;
}
input,select,button{font-family:inherit}

.env-ribbon{
  position:sticky; top:0; left:0; right:0; z-index:50; text-align:center;
  background:#e0a100; color:#3a2c00; font-weight:500; font-size:12px;
  letter-spacing:.08em; text-transform:uppercase; padding:3px 8px;
}

.screen{ min-height:100dvh; display:flex; flex-direction:column; }
.screen[hidden]{ display:none; }

/* ---------- LOGIN ---------- */
.screen-login{
  background:radial-gradient(120% 90% at 50% -10%, #163651 0%, var(--navy) 55%);
  color:#fff; align-items:center; justify-content:center; padding:24px 20px calc(24px + env(safe-area-inset-bottom));
}
.login-card{ width:100%; max-width:360px; }
.login-card .logo{ width:210px; max-width:64%; display:block; margin:0 auto 10px; }
.login-sub{ text-align:center; color:#a9c2d1; font-size:14px; margin-bottom:26px; }
.login-foot{ margin-top:28px; color:#6b8394; font-size:12px; }

.field{ display:block; margin-bottom:14px; }
.field > span{ display:block; font-size:12.5px; font-weight:500; color:#c7d5df; margin-bottom:6px; letter-spacing:.02em; }
.screen-login .field > span{ color:#c7d5df; }
.field em{ font-style:normal; color:var(--muted2); font-weight:400; }
.field input, .field select{
  width:100%; height:48px; padding:0 14px; font-size:16px; /* 16px = niente auto-zoom iOS */
  border-radius:11px; border:1px solid #2c4a63; background:#0f2839; color:#fff; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.field input::placeholder{ color:#6b8394; }
.field input:focus, .field select:focus{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(39,137,187,.25); }

.btn{
  width:100%; height:50px; border:none; border-radius:12px; font-family:var(--head); font-weight:700;
  font-size:16px; cursor:pointer; transition:filter .15s, transform .05s; -webkit-tap-highlight-color:transparent;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--blue); color:#fff; box-shadow:0 6px 16px rgba(39,137,187,.35); }
.btn-primary:hover{ filter:brightness(1.05); }
.btn-primary:disabled{ opacity:.6; cursor:default; box-shadow:none; }

.form-error{
  background:rgba(192,57,43,.12); color:#ff8a7a; border:1px solid rgba(192,57,43,.35);
  border-radius:10px; padding:10px 12px; font-size:13.5px; margin-bottom:14px;
}
.content .form-error{ color:#c0392b; background:#fbecea; border-color:#f3c9c3; }

/* ---------- APP CHROME (onboarding + home) ---------- */
.topbar{
  background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:space-between;
  padding:calc(10px + env(safe-area-inset-top)) 16px 10px; position:sticky; top:0; z-index:10;
}
.topbar-logo{ height:26px; }
.topbar-action{
  background:transparent; border:1px solid rgba(255,255,255,.25); color:#fff; border-radius:999px;
  padding:7px 15px; font-size:13px; font-weight:500; cursor:pointer;
}
.topbar-action:hover{ background:rgba(255,255,255,.08); }

.content{ flex:1; padding:20px 16px calc(28px + env(safe-area-inset-bottom)); max-width:640px; width:100%; margin:0 auto; }
.ph{ margin-bottom:16px; }
.ph h1{ font-family:var(--head); font-weight:900; font-size:26px; letter-spacing:-.02em; color:var(--ink); text-wrap:balance; }
.ph-sub{ color:var(--muted); font-size:14.5px; margin-top:4px; }

.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }
@media (max-width:420px){ .grid2{ grid-template-columns:1fr; } }

.content .field > span{ color:var(--muted); }
.content .field input, .content .field select{
  background:#fff; border:1px solid var(--line2); color:var(--ink);
}
.content .field input:focus, .content .field select:focus{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(39,137,187,.15); }

.check{ display:flex; gap:10px; align-items:flex-start; margin:6px 0 16px; font-size:13.5px; color:var(--muted); }
.check input{ width:20px; height:20px; margin-top:1px; accent-color:var(--blue); flex:none; }

/* ---------- HOME placeholder ---------- */
.placeholder{ text-align:center; padding:34px 20px; }
.placeholder-mark{ font-size:34px; color:var(--blue); opacity:.5; line-height:1; margin-bottom:8px; }
.placeholder h2{ font-family:var(--head); font-weight:800; font-size:18px; color:var(--blue-dark); margin-bottom:6px; }
.placeholder p{ color:var(--muted); font-size:14px; max-width:34ch; margin:0 auto; }
.build-note{ text-align:center; color:var(--muted2); font-size:12px; margin-top:18px; }

@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }

/* ---------- LOGIN: link, divider, ghost ---------- */
.login-links{ text-align:center; margin-top:14px; }
.login-links a{ color:#a9c2d1; font-size:13.5px; text-decoration:none; }
.login-links a:hover{ color:#fff; text-decoration:underline; }
.login-divider{ display:flex; align-items:center; gap:12px; margin:20px 0 14px; color:#6b8394; font-size:12px; }
.login-divider::before, .login-divider::after{ content:""; flex:1; height:1px; background:rgba(255,255,255,.14); }
.btn-ghost{ background:transparent; color:#fff; border:1px solid #2c4a63; }
.btn-ghost:hover{ background:rgba(255,255,255,.06); }
.link-quiet{ display:block; width:100%; background:none; border:none; color:#8fb0c4; font-size:13.5px; margin-top:14px; cursor:pointer; padding:6px; }
.link-quiet:hover{ color:#fff; }

/* ---------- INTRO SLIDER ---------- */
.screen-intro{ background:#fff; color:var(--ink); }
.intro-close{ position:absolute; top:calc(8px + env(safe-area-inset-top)); right:12px; z-index:5;
  width:38px; height:38px; border-radius:999px; border:none; background:#eef2f6; color:var(--muted);
  font-size:24px; line-height:1; cursor:pointer; }
.slider{ flex:1; display:flex; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.slider::-webkit-scrollbar{ display:none; }
.slide{ flex:0 0 100%; scroll-snap-align:center; display:flex; align-items:center; justify-content:center; padding:20px; }
.slide img{ max-width:100%; max-height:100%; object-fit:contain; }
.dots{ display:flex; gap:8px; justify-content:center; padding:6px 0 2px; }
.dot{ width:8px; height:8px; border-radius:999px; border:none; background:var(--line2); cursor:pointer; padding:0; transition:width .2s, background .2s; }
.dot.on{ width:22px; background:var(--blue); }
.intro-cta{ padding:14px 20px calc(20px + env(safe-area-inset-bottom)); }
.intro-cta .link-quiet{ color:var(--muted); }
.intro-cta .link-quiet:hover{ color:var(--blue-dark); }

/* ---------- TOPBAR dark variant + back ---------- */
.topbar-dark{ }
.topbar-back{ background:transparent; border:none; color:#fff; font-size:30px; line-height:1; width:34px; height:34px; cursor:pointer; padding:0; }
.topbar-spacer{ width:34px; }
.topbar-dark .topbar-logo{ height:24px; }

/* ---------- MESSAGGI (registrazione/recupero ok) ---------- */
.screen-msg{ background:var(--bg); align-items:center; justify-content:center; padding:24px; }
.msg-card{ background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); padding:32px 26px; max-width:380px; text-align:center; }
.msg-mark{ width:60px; height:60px; margin:0 auto 16px; border-radius:999px; background:rgba(77,180,63,.14); color:var(--green);
  font-size:30px; display:flex; align-items:center; justify-content:center; }
#screen-forgot-done .msg-mark{ background:rgba(39,137,187,.12); color:var(--blue); }
.msg-card h1{ font-family:var(--head); font-weight:900; font-size:22px; color:var(--ink); margin-bottom:8px; }
.msg-card p{ color:var(--muted); font-size:14.5px; margin-bottom:22px; }

/* ---------- password show/hide ---------- */
.pw-wrap{ position:relative; display:block; margin-bottom:0; }
.pw-wrap input{ padding-right:88px; }
.pw-toggle{ position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--blue); font-family:var(--body); font-size:13px; font-weight:500;
  cursor:pointer; padding:8px; }
.pw-toggle:hover{ text-decoration:underline; }
.check a{ color:var(--blue-dark); font-weight:500; }

/* fix: l'attributo hidden deve nascondere anche i .field (che hanno display:block) */
.field[hidden]{ display:none; }

/* ---------- HOME · ricerca + elenco fiches ---------- */
.searchbar{
  position:sticky; top:0; z-index:9; display:flex; align-items:center; gap:10px;
  background:var(--bg); padding:12px 16px; border-bottom:1px solid var(--line);
}
.home-topbar{ position:static; }
.search-ico{ color:var(--muted2); font-size:19px; line-height:1; flex:none; }
.searchbar input{
  flex:1; height:44px; border:1px solid var(--line2); border-radius:11px; background:#fff;
  padding:0 14px; font-size:16px; color:var(--ink); outline:none; transition:border-color .15s, box-shadow .15s;
}
.searchbar input:focus{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(39,137,187,.15); }
.searchbar input::placeholder{ color:var(--muted2); }

.fiche-list{ flex:1; max-width:640px; width:100%; margin:0 auto; padding:6px 12px calc(24px + env(safe-area-inset-bottom)); }
.list-loading, .list-empty{ text-align:center; color:var(--muted); font-size:14px; padding:34px 16px; }

.fiche{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left; cursor:pointer;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 2px 8px rgba(13,31,44,.05);
  padding:12px 14px; margin:8px 0; transition:transform .05s, box-shadow .15s, border-color .15s;
}
.fiche:hover{ box-shadow:var(--shadow); border-color:var(--line2); }
.fiche:active{ transform:translateY(1px); }
.fiche-logo{
  width:48px; height:48px; border-radius:999px; flex:none; object-fit:contain;
  background:#fff; border:1px solid var(--line); padding:2px;
}
.fiche-logo-ph{
  display:flex; align-items:center; justify-content:center; font-family:var(--head); font-weight:900;
  color:var(--blue); background:#eef4f8; font-size:20px; text-transform:uppercase;
}
.fiche-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.fiche-name{ font-family:var(--head); font-weight:700; font-size:16px; color:var(--ink); line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fiche-sub{ color:var(--muted); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fiche-chevron{ color:var(--blue); font-size:24px; line-height:1; flex:none; font-weight:400; }