/* CyberGuard — Centro recupero account (/recupero/…). Si appoggia a guide.css. */
.tag-rec{display:inline-flex;align-items:center;gap:8px;border-color:var(--brand-line);background:var(--brand-soft);color:var(--brand-2);padding:4px 14px 4px 5px}
.tag-rec .mono{width:24px;height:24px;font-size:11px}
.mono{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border-radius:12px;background:var(--surface-3);border:1px solid var(--line-2);color:var(--text);font-family:var(--f-display);font-weight:700;font-size:16px;letter-spacing:-.02em;text-transform:none}

/* scelta del caso */
.r-cases{margin-top:28px;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:18px 20px;scroll-margin-top:84px}
.r-cases p{font-family:var(--f-display);font-weight:700;font-size:18px;margin-bottom:12px}
.r-cases ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.r-cases a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;padding:12px 16px;border-radius:14px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--text);font-weight:700;font-size:16px;line-height:1.3;text-decoration:none}
.r-cases a::after{content:"↓";color:var(--brand-2);font-weight:700}
.r-cases a:hover{border-color:var(--brand-line);background:var(--brand-soft)}
.r-cases a.u{border-color:var(--danger-line);background:var(--danger-soft)}
.r-cases a.u::after{color:var(--danger)}

/* sezioni dei casi */
.r-case{scroll-margin-top:84px;margin-top:44px;padding-top:4px}
.r-case h2{margin-top:0}
.r-case.u h2::before{content:"Urgente";display:inline-block;vertical-align:middle;margin:-4px 10px 0 0;padding:3px 10px;border-radius:999px;background:var(--danger-soft);border:1px solid var(--danger-line);color:var(--danger);font-family:var(--f-text);font-size:13px;letter-spacing:0}
.r-tip{margin-top:16px;padding:14px 18px;border-radius:14px;background:var(--warn-soft);border-left:4px solid var(--warn);color:var(--text);font-size:16px}
.r-top{display:inline-block;margin-top:14px;font-size:15px;color:var(--text-3);text-decoration:none}
.r-top:hover{color:var(--brand-2)}
.steps li{overflow-wrap:anywhere}

/* avvisi */
.r-warn{margin-top:52px;padding:22px 24px;border-radius:20px;background:var(--warn-soft);border:1px solid color-mix(in srgb,var(--warn) 45%,transparent)}
.r-warn h2{margin:0 0 10px;font-size:clamp(21px,3vw,25px)}
.r-warn p+p{margin-top:10px}

/* link ufficiali */
.r-links{list-style:none;display:grid;gap:10px}
.r-links a{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 14px;padding:14px 18px;border-radius:14px;background:var(--surface);border:1px solid var(--line);color:var(--text);text-decoration:none}
.r-links a:hover{border-color:var(--brand-line);background:var(--surface-2)}
.r-links b{font-size:17px}
.r-links span{font-family:var(--f-mono);font-size:14px;color:var(--brand-2)}
.r-links + .note{margin-top:12px}

/* contatti SPID */
.r-contacts{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin-top:14px}
.r-contacts li{padding:14px 16px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.r-contacts b{display:block}
.r-contacts span{display:block;font-size:16px;color:var(--text-2);margin-top:2px;overflow-wrap:anywhere}

/* messaggio per i contatti */
.r-msg{margin-top:52px;padding:22px 24px;border-radius:20px;background:var(--surface);border:1px solid var(--brand-line)}
.r-msg h2{margin:0 0 8px;font-size:clamp(21px,3vw,25px)}
.r-msg p{color:var(--text-2)}
.r-msg blockquote{margin:16px 0;padding:16px 18px;border-radius:6px 18px 18px 18px;background:var(--surface-3);font-size:17px;line-height:1.55}
.r-msg .btns{display:flex;flex-wrap:wrap;gap:10px}
.r-msg button{cursor:pointer}
.r-msg button.done{background:var(--ok);color:#03121f}

/* indice */
.r-search{margin-top:28px;display:grid;gap:8px}
.r-search label{font-family:var(--f-display);font-weight:700;font-size:18px}
.r-search input{width:100%;min-height:56px;padding:12px 18px;border-radius:16px;border:1px solid var(--line-2);background:var(--surface);color:var(--text);font:inherit;font-size:18px}
.r-search input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
.r-none{margin-top:16px;padding:14px 18px;border-radius:14px;background:var(--surface);border:1px dashed var(--line-2);color:var(--text-2)}
.r-none[hidden],.r-group[hidden],.r-tiles li[hidden]{display:none}
.r-group h2{margin:40px 0 14px;font-size:clamp(19px,2.6vw,22px);color:var(--text-2)}
.r-tiles{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.r-tile{display:flex;align-items:center;gap:14px;height:100%;padding:14px 16px;border-radius:16px;background:var(--surface);border:1px solid var(--line);color:var(--text);text-decoration:none}
.r-tile:hover{border-color:var(--brand-line);background:var(--surface-2)}
.r-tile b{display:block;font-family:var(--f-display);font-weight:600;font-size:17px;line-height:1.25}
.r-tile > span:last-child > span{display:block;font-size:14px;color:var(--text-3);margin-top:3px;line-height:1.35}
.r-tile-sos{border-color:var(--danger-line);background:var(--danger-soft)}
.r-tile-sos .mono{background:var(--danger);border-color:var(--danger);color:#fff}
.r-rules{margin-top:12px}

@media (max-width:560px){
  .r-cases{padding:16px}
  .r-cases ul{grid-template-columns:1fr}
  .r-warn,.r-msg{padding:18px}
  .r-msg .btn{flex:1 1 100%}
}
.r-offscreen{position:fixed;left:-9999px;top:0;opacity:0}