/* style.css — Identidade Digital Pessoal Anti-Golpe
   Design: caloroso, confiável, acessível — com modo idoso
   Paleta: azul profundo + verde-esmeralda + creme quente */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Nunito+Sans:wght@400;500;600&display=swap');

/* ─── Design tokens ─────────────────────────────────────────── */
:root {
  --bg        : #0d0f14;
  --bg2       : #141720;
  --bg3       : #1a1f2e;
  --surf      : #1e2436;
  --surf2     : #252d42;
  --surf3     : #2d374f;

  --blue      : #4a8fff;
  --blue2     : #6ba3ff;
  --blue-dim  : rgba(74,143,255,.15);

  --green     : #2ecc8a;
  --green2    : #52e0a0;
  --green-dim : rgba(46,204,138,.15);

  --red       : #ff4a6b;
  --red-dim   : rgba(255,74,107,.15);

  --amber     : #f5a623;
  --amber-dim : rgba(245,166,35,.15);

  --text      : #e8eaf0;
  --text2     : #9aa3bb;
  --text3     : #5d6882;

  --bord      : rgba(255,255,255,.07);
  --bord2     : rgba(255,255,255,.12);

  --r         : 14px;
  --r2        : 10px;
  --r3        : 22px;

  --ff        : 'Nunito', sans-serif;
  --fs        : 'Nunito Sans', sans-serif;

  --shadow    : 0 4px 24px rgba(0,0,0,.4);
  --shadow-sm : 0 2px 8px rgba(0,0,0,.3);

  /* modo normal - responsive with clamp */
  --sz-title  : clamp(22px, 5vw, 28px);
  --sz-sub    : clamp(13px, 3vw, 15px);
  --sz-body   : clamp(15px, 3.5vw, 17px);
  --sz-small  : clamp(12px, 2.5vw, 14px);
  --sz-xs     : clamp(11px, 2.2vw, 13px);
  --sz-btn    : clamp(15px, 3vw, 17px);
  --btn-h     : clamp(52px, 8vw, 60px);

  /* content width */
  --content-max-w: 520px;
}

body.theme-light {
  --bg        : #f4f6fa;
  --bg2       : #ffffff;
  --bg3       : #eef1f6;
  --surf      : #ffffff;
  --surf2     : #f8f9fc;
  --surf3     : #eef1f6;

  --text      : #1a1f2e;
  --text2     : #5d6882;
  --text3     : #7c86a2;

  --bord      : rgba(0,0,0,.08);
  --bord2     : rgba(0,0,0,.15);

  --shadow    : 0 4px 24px rgba(0,0,0,.08);
  --shadow-sm : 0 2px 8px rgba(0,0,0,.05);
}

/* ─── Modo idoso: tudo maior ─────────────────────────────────── */
body.modo-idoso {
  --sz-title  : clamp(28px, 6vw, 34px);
  --sz-sub    : clamp(17px, 4vw, 20px);
  --sz-body   : clamp(19px, 4.5vw, 22px);
  --sz-small  : clamp(16px, 3.5vw, 19px);
  --sz-xs     : clamp(14px, 3vw, 16px);
  --sz-btn    : clamp(19px, 4vw, 22px);
  --btn-h     : clamp(66px, 10vw, 78px);
  --r         : 18px;
}

/* ─── Reset & base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; font-size: 16px; }
[lang="ar"] {
  --ff: 'Noto Sans Arabic', sans-serif;
}

body {
  min-height: 100%;
  background : var(--bg);
  color      : var(--text);
  font-family: var(--ff);
  font-size  : var(--sz-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x    : hidden;
  overflow-y    : auto;
  user-select   : none;
  -webkit-tap-highlight-color: transparent;
}

a { color: var(--blue); text-decoration: none; }
button { cursor: pointer; font-family: var(--ff); }
input, textarea, select { font-family: var(--ff); }
img { display: block; }

/* ─── Layout shell ───────────────────────────────────────────── */
#app {
  display       : flex;
  flex-direction: column;
  min-height    : 100vh;
  width         : 100%;
  max-width     : var(--content-max-w);
  margin        : 0 auto;
  position      : relative;
  transition    : max-width 0.3s ease;
}

/* ─── Header ─────────────────────────────────────────────────── */
.hdr {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : clamp(10px, 2.5vw, 16px) clamp(12px, 3vw, 24px);
  border-bottom  : 1px solid var(--bord);
  background     : var(--bg);
  position       : sticky;
  top            : 0;
  z-index        : 20;
  backdrop-filter: blur(8px);
  width: 100%;
}
.hdr-brand {
  display    : flex;
  align-items: center;
  gap        : clamp(10px, 2vw, 16px);
  min-width  : 0;
  flex       : 1;
}
.hdr-icon {
  width           : clamp(36px, 5vw, 44px);
  height          : clamp(36px, 5vw, 44px);
  border-radius   : 12px;
  background      : linear-gradient(135deg, var(--blue), var(--green));
  display         : flex;
  align-items     : center;
  justify-content : center;
  font-size       : clamp(18px, 3vw, 22px);
  flex-shrink     : 0;
}
.hdr-title { 
  font-size: clamp(14px, 2.2vw, 17px); 
  font-weight: 800; 
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hdr-sub { 
  font-size: clamp(9px, 1.6vw, 11px); 
  color: var(--text3); 
  margin-top: 1px; 
  letter-spacing: .03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hdr-actions { 
  display: flex; 
  gap: 6px; 
  align-items: center;
}
.hdr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 34px;
  width: 34px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid var(--bord2);
  background: var(--surf);
  color: var(--text2);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.hdr-btn-text { 
  display: none !important; 
}

@media (min-width: 800px) {
  .hdr-btn {
    width: auto;
    padding: 6px 12px;
    gap: 6px;
    font-size: 12px;
  }
  .hdr-btn-text { 
    display: inline !important; 
  }
}

.hdr-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-dim);
  transform: translateY(-1px);
}
.hdr-btn:active {
  transform: translateY(0);
}
.hdr-btn span {
  display: inline-block;
  transition: opacity 0.2s;
}
.icon-btn {
  width       : 36px;
  height      : 36px;
  border-radius: 10px;
  border      : 1px solid var(--bord);
  background  : transparent;
  color       : var(--text2);
  font-size   : 16px;
  display     : flex;
  align-items : center;
  justify-content: center;
  transition  : all .18s;
}
.icon-btn:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-dim); }

/* ─── Bottom nav ─────────────────────────────────────────────── */
.bottom-nav {
  position  : fixed;
  bottom    : 0;
  left      : 50%;
  transform : translateX(-50%);
  width     : 100%;
  max-width : var(--content-max-w);
  background: var(--bg2);
  border-top: 1px solid var(--bord);
  display   : flex;
  z-index   : 20;
  padding-bottom: env(safe-area-inset-bottom, 0);
  transition: max-width 0.3s ease;
}
.nav-btn {
  flex           : 1;
  padding        : 8px 2px 10px;
  border         : none;
  background     : transparent;
  display        : flex;
  flex-direction : column;
  align-items    : center;
  gap            : 2px;
  color          : var(--text3);
  font-size      : 9px;
  font-weight    : 600;
  letter-spacing : .01em;
  transition     : color .18s;
  min-width      : 0;
}
.nav-btn .nav-icon { font-size: 22px; line-height: 1; }
.nav-btn.active { color: var(--blue); }
.nav-btn:hover  { color: var(--text2); }

/* ─── Main content ───────────────────────────────────────────── */
.main {
  flex    : 1;
  padding : clamp(16px, 4vw, 32px) clamp(16px, 5vw, 40px) calc(80px + env(safe-area-inset-bottom, 0));
  overflow-y: auto;
  overflow-x: hidden;
}

/* ─── Screens ────────────────────────────────────────────────── */
.screen { display: none; }
.screen.active { display: block; }

/* ─── Cards ──────────────────────────────────────────────────── */
.card {
  background   : var(--surf);
  border       : 1px solid var(--bord);
  border-radius: var(--r);
  padding      : 18px;
  margin-bottom: 12px;
  overflow     : hidden; /* Evita que conteúdo interno escape */
  word-break   : break-word;
}
.card-title {
  font-size  : var(--sz-xs);
  font-weight: 700;
  color      : var(--text3);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 14px;
  display    : flex;
  align-items: center;
  gap        : 8px;
}
.card-title::before {
  content      : '';
  display      : inline-block;
  width        : 3px;
  height       : 13px;
  background   : var(--blue);
  border-radius: 2px;
}

/* ─── Tipografia de seção ─────────────────────────────────────── */
.section-title {
  font-size  : var(--sz-title);
  font-weight: 900;
  margin-bottom: 4px;
}
.section-sub {
  font-size : var(--sz-sub);
  color     : var(--text2);
  margin-bottom: 20px;
}

/* ─── Botões ─────────────────────────────────────────────────── */
.btn {
  display        : flex;
  align-items    : center;
  justify-content: center;
  width          : 100%;
  min-height     : 44px;
  padding        : 10px 12px;
  border-radius  : 10px;
  border         : none;
  font-size      : var(--sz-btn);
  font-weight    : 700;
  cursor         : pointer;
  transition     : all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  gap            : 8px;
  user-select    : none;
  white-space    : normal;
  text-align     : center;
  word-break     : normal;
  overflow-wrap  : break-word;
}

/* Ajustes para botões em telas de configurações */
[data-screen="settings"] .btn {
  min-width: 200px;
  max-width: 100%;
}
.btn-primary {
  background: linear-gradient(135deg, var(--blue), #3a7fe8);
  color     : #fff;
  box-shadow: 0 4px 16px rgba(74,143,255,.3);
}
.btn-primary:hover  { opacity: .9; transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-success {
  background: linear-gradient(135deg, var(--green), #27b87a);
  color     : #fff;
  box-shadow: 0 4px 16px rgba(46,204,138,.3);
}
.btn-ghost {
  background: transparent;
  border    : 1px solid var(--bord2);
  color     : var(--text2);
}
.btn-ghost:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-dim); }
.btn-danger {
  background: transparent;
  border    : 1px solid rgba(255,74,107,.4);
  color     : var(--red);
}
.btn:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }

/* botões compactos lado a lado */
.btn-row { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.btn-row .btn { font-size: 13px; height: 46px; }

/* ─── Formulários ────────────────────────────────────────────── */
.form-field {
  margin-bottom: 14px;
}
.form-field label {
  display       : block;
  font-size     : var(--sz-xs);
  font-weight   : 700;
  color         : var(--text3);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom : 6px;
}
.form-field input,
.form-field select,
.form-field textarea {
  width       : 100%;
  background  : var(--surf2);
  border      : 1px solid var(--bord2);
  border-radius: var(--r2);
  padding     : 12px 14px;
  color       : var(--text);
  font-size   : var(--sz-body);
  outline     : none;
  transition  : border .18s;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color: var(--blue); }
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--text3); }
.form-hint {
  font-size  : 11px;
  color      : var(--text3);
  margin-top : 5px;
  line-height: 1.5;
}

/* ─── Avatar / foto ──────────────────────────────────────────── */
.avatar-pick {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  gap            : 10px;
  padding        : 16px 0;
}
.avatar-circle {
  width          : 88px;
  height         : 88px;
  border-radius  : 50%;
  background     : var(--surf2);
  border         : 2px dashed var(--bord2);
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 36px;
  overflow       : hidden;
  cursor         : pointer;
  transition     : border-color .2s;
  position       : relative;
}
.avatar-circle:hover { border-color: var(--blue); }
.avatar-circle img {
  width     : 100%;
  height    : 100%;
  object-fit: cover;
}
.avatar-label {
  font-size : var(--sz-small);
  color     : var(--text2);
  font-weight: 600;
}

/* ─── Senha com mostrar/ocultar ──────────────────────────────── */
.password-wrap { position: relative; }
.password-wrap input { padding-right: 44px; }
.password-toggle {
  position  : absolute;
  right     : 12px;
  top       : 50%;
  transform : translateY(-50%);
  background: none;
  border    : none;
  color     : var(--text3);
  font-size : 16px;
  padding   : 4px;
}

/* ─── QR Code ────────────────────────────────────────────────── */
.qr-container {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  padding        : 20px 16px;
  background     : var(--surf);
  border-radius  : var(--r);
  border         : 1px solid var(--bord);
}
.qr-frame {
  background   : #fff;
  border-radius: 12px;
  padding      : clamp(10px, 3vw, 20px);
  position     : relative;
  box-shadow   : var(--shadow);
  width        : fit-content;
  margin       : 0 auto;
}
.qr-photo-overlay {
  position     : absolute;
  top          : 50%;
  left         : 50%;
  transform    : translate(-50%, -50%);
  width        : 48px;
  height       : 48px;
  border-radius: 50%;
  overflow     : hidden;
  border       : 3px solid #fff;
  background   : #f0f0f0;
  display      : flex;
  align-items  : center;
  justify-content: center;
  font-size    : 22px;
  box-shadow   : 0 2px 8px rgba(0,0,0,.2);
}
.qr-photo-overlay img { width: 100%; height: 100%; object-fit: cover; }
.qr-meta { margin-top: 14px; text-align: center; }
.qr-name {
  font-size  : 18px;
  font-weight: 800;
  color      : var(--text);
}
.qr-nickname {
  font-size : var(--sz-small);
  color     : var(--blue2);
  font-weight: 600;
  margin-top: 2px;
}
.qr-fp {
  font-size  : 10px;
  color      : var(--text3);
  font-family: monospace;
  margin-top : 6px;
  letter-spacing: .04em;
  word-break : break-all;
  max-width  : 100%;
  text-align : center;
}
.qr-caption {
  font-size : 11px;
  color     : var(--text3);
  margin-top: 8px;
  border-top: 1px solid var(--bord);
  padding-top: 8px;
  width     : 100%;
  text-align: center;
}

/* ─── Status badges ──────────────────────────────────────────── */
.badge {
  display     : inline-flex;
  align-items : center;
  gap         : 5px;
  padding     : 3px 10px;
  border-radius: 99px;
  font-size   : 11px;
  font-weight : 700;
}
.badge-ok     { background: var(--green-dim); color: var(--green);  border: 1px solid rgba(46,204,138,.3); }
.badge-danger { background: var(--red-dim);   color: var(--red);    border: 1px solid rgba(255,74,107,.3); }
.badge-warn   { background: var(--amber-dim); color: var(--amber);  border: 1px solid rgba(245,166,35,.3); }
.badge-info   { background: var(--blue-dim);  color: var(--blue2);  border: 1px solid rgba(74,143,255,.3); }

/* ─── Resultado de verificação ───────────────────────────────── */
.result-card {
  border-radius: var(--r);
  padding      : 24px 20px;
  text-align   : center;
  margin-bottom: 12px;
}
.result-card.autêntico {
  background: var(--green-dim);
  border    : 2px solid var(--green);
}
.result-card.golpe {
  background: var(--red-dim);
  border    : 2px solid var(--red);
}
.result-icon  { font-size: 52px; margin-bottom: 12px; line-height: 1; }
.result-title {
  font-size  : var(--sz-title);
  font-weight: 900;
  margin-bottom: 6px;
}
.result-card.autêntico .result-title { color: var(--green); }
.result-card.golpe     .result-title { color: var(--red); }
.result-sub {
  font-size : var(--sz-sub);
  color     : var(--text2);
  line-height: 1.6;
}

/* ─── Lista de contatos ──────────────────────────────────────── */
.contact-list { display: flex; flex-direction: column; gap: 10px; }
.contact-item {
  display        : flex;
  align-items    : center;
  gap            : 12px;
  padding        : 14px;
  background     : var(--surf);
  border         : 1px solid var(--bord);
  border-radius  : var(--r2);
  cursor         : pointer;
  transition     : border-color .18s, background .18s;
}

.contact-item.owner-item {
  border: 1.5px solid #4a8fff;
  background: #f0f7ff;
}

.badge-owner {
  background: #4a8fff;
  color: white;
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: bold;
  margin-left: 8px;
  vertical-align: middle;
}
.contact-item:hover { border-color: var(--blue); background: var(--surf2); }
.contact-avatar {
  width          : 44px;
  height         : 44px;
  border-radius  : 50%;
  background     : var(--surf2);
  overflow       : hidden;
  flex-shrink    : 0;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 20px;
  border         : 2px solid var(--bord2);
}
.contact-avatar img { width: 100%; height: 100%; object-fit: cover; }
.contact-info { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.contact-name {
  font-size  : var(--sz-body);
  font-weight: 700;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.contact-relation {
  font-size : var(--sz-small);
  color     : var(--text3);
  margin-top: 1px;
}
.contact-fp {
  font-size  : clamp(9px, 2vw, 11px);
  color      : var(--text3);
  font-family: monospace;
  margin-top : 2px;
  overflow-wrap: anywhere;
}
.contact-arrow { color: var(--text3); font-size: 14px; }

/* ─── Scanner de câmera ──────────────────────────────────────── */
.scanner-wrap {
  position     : relative;
  background   : #000;
  border-radius: var(--r);
  overflow     : hidden;
  aspect-ratio : 1;
  width        : 100%;
  max-width    : clamp(260px, 60vw, 400px);
  margin       : 0 auto;
}
.scanner-wrap video { width: 100%; height: 100%; object-fit: cover; }
.scanner-overlay {
  position: absolute;
  inset   : 0;
  display : flex;
  align-items    : center;
  justify-content: center;
  pointer-events: none;
}
.scanner-frame {
  width : 72%;
  height: 72%;
  border: 2px solid var(--green);
  border-radius: 16px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.45);
  animation: scanPulse 2s infinite;
}
@keyframes scanPulse {
  0%, 100% { border-color: var(--green); box-shadow: 0 0 0 9999px rgba(0,0,0,.45); }
  50%       { border-color: var(--blue);  box-shadow: 0 0 16px var(--blue), 0 0 0 9999px rgba(0,0,0,.45); }
}
.scanner-hint {
  text-align: center;
  font-size : var(--sz-small);
  color     : var(--text2);
  margin-top: 12px;
}

/* ─── Desafio de autenticação ────────────────────────────────── */
.challenge-box {
  background   : var(--surf2);
  border       : 1px solid var(--blue-dim);
  border-radius: var(--r2);
  padding      : 18px;
  text-align   : center;
  margin-bottom: 12px;
}
.challenge-phrase {
  font-size  : 18px;
  font-weight: 800;
  color      : var(--text);
  line-height: 1.4;
  margin-bottom: 10px;
}
.challenge-id {
  font-size  : 10px;
  color      : var(--text3);
  font-family: monospace;
  letter-spacing: .04em;
}
.challenge-timer {
  font-size  : 13px;
  color      : var(--amber);
  font-weight: 700;
  margin-top : 8px;
}

/* ─── Share buttons ──────────────────────────────────────────── */
.share-grid {
  display              : grid;
  grid-template-columns: repeat(3, 1fr);
  gap                  : 8px;
}
.share-btn {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  gap            : 6px;
  padding        : 14px 8px;
  background     : var(--surf2);
  border         : 1px solid var(--bord);
  border-radius  : var(--r2);
  cursor         : pointer;
  transition     : all .18s;
}
.share-btn:hover { border-color: var(--blue); background: var(--surf3); }
.share-btn-icon  { font-size: 24px; line-height: 1; }
.share-btn-label { font-size: 11px; color: var(--text2); font-weight: 600; }

/* ─── Stat rows ──────────────────────────────────────────────── */
.stat-row {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : 10px 0;
  border-bottom  : 1px solid var(--bord);
  font-size      : var(--sz-small);
}
.stat-row:last-child { border: none; }
.stat-label { 
  color: var(--text2); 
  flex: 1;
  padding-right: 10px;
}
.stat-value { 
  color: var(--green); 
  font-weight: 700; 
  font-family: monospace; 
  text-align: left; 
  flex-shrink: 0;
  min-width: 85px;
  word-break: normal;
  overflow-wrap: break-word;
}
.stat-value.warn { color: var(--amber); }

/* ─── Overlay de carregamento ────────────────────────────────── */
.overlay {
  position       : fixed;
  inset          : 0;
  background     : rgba(13,15,20,.88);
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  z-index        : 100;
  gap            : 16px;
  backdrop-filter: blur(4px);
}
.overlay.hidden { display: none; }
.spinner {
  width        : 40px;
  height       : 40px;
  border       : 3px solid var(--surf3);
  border-top   : 3px solid var(--blue);
  border-radius: 50%;
  animation    : spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.overlay-text { font-size: 13px; color: var(--blue2); font-weight: 600; letter-spacing: .04em; }

/* ─── Toast notifications ────────────────────────────────────── */
.toast {
  position  : fixed;
  bottom    : calc(74px + env(safe-area-inset-bottom, 0));
  left      : 50%;
  transform : translateX(-50%) translateY(80px);
  background: var(--surf2);
  border    : 1px solid var(--bord2);
  border-radius: 10px;
  padding   : 12px 24px;
  font-size : 14px;
  font-weight: 600;
  color     : var(--text);
  transition: transform .3s ease, opacity .3s ease, visibility .3s;
  z-index   : 1000; /* Garantir que fique acima de tudo */
  white-space: normal;
  width     : fit-content;
  max-width : min(95vw, 400px);
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  word-break: break-word;
  pointer-events: none;
  opacity   : 0;
  visibility: hidden;
}
.toast.show { 
  transform : translateX(-50%) translateY(0); 
  opacity   : 1; 
  visibility: visible; 
  pointer-events: auto; 
}
.toast.ok   { border-color: var(--green); color: var(--green); }
.toast.err  { border-color: var(--red);   color: var(--red); }

/* ─── Modal ──────────────────────────────────────────────────── */
.modal-bg {
  position: fixed;
  inset   : 0;
  background: rgba(0,0,0,.6);
  z-index : 50;
  display : flex;
  align-items: flex-end;
  justify-content: center;
  backdrop-filter: blur(2px);
}
.modal-bg.hidden { display: none; }
.modal-sheet {
  background   : var(--bg2);
  border       : 1px solid var(--bord);
  border-radius: 24px 24px 0 0;
  padding      : 22px 18px calc(32px + env(safe-area-inset-bottom, 0));
  width        : 100%;
  max-width    : 520px;
  max-height   : 90vh;
  overflow-y   : auto;
  animation    : slideUp .28s ease;
}
@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.modal-handle {
  width        : 36px;
  height       : 4px;
  background   : var(--surf3);
  border-radius: 99px;
  margin       : 0 auto 18px;
}
.modal-title {
  font-size  : var(--sz-title);
  font-weight: 800;
  margin-bottom: 4px;
}
.modal-sub {
  font-size : var(--sz-sub);
  color     : var(--text2);
  margin-bottom: 20px;
}

.modal-close {
  position  : absolute;
  right     : 18px;
  top       : 18px;
  background: var(--surf2);
  border    : none;
  border-radius: 50%;
  width     : 32px;
  height    : 32px;
  color     : var(--text2);
  font-size : 16px;
  display   : flex;
  align-items: center;
  justify-content: center;
}

.form-error {
  color: var(--red);
  font-size: 11px;
  margin-top: 4px;
  font-weight: 600;
}

.password-wrap {
  position: relative;
}

.password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text3);
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
}

/* ─── Tela de boas-vindas ────────────────────────────────────── */
.welcome-screen {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  min-height     : 80vh;
  text-align     : center;
  padding        : 24px;
  gap            : 20px;
}
.welcome-icon {
  font-size  : 72px;
  line-height: 1;
  filter     : drop-shadow(0 0 24px rgba(74,143,255,.4));
  animation  : float 3s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
.welcome-title {
  font-size  : clamp(24px, 8vw, 32px);
  font-weight: 900;
  line-height: 1.2;
}
.welcome-title span {
  background: linear-gradient(135deg, var(--blue2), var(--green2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.welcome-desc {
  font-size : var(--sz-sub);
  color     : var(--text2);
  max-width : 320px;
  line-height: 1.7;
}
.welcome-features {
  display   : flex;
  flex-direction: column;
  gap       : 10px;
  width     : 100%;
  max-width : 320px;
  text-align: left;
}
.welcome-feature {
  display    : flex;
  align-items: center;
  gap        : 10px;
  padding    : 10px 14px;
  background : var(--surf);
  border-radius: var(--r2);
  border     : 1px solid var(--bord);
  font-size  : var(--sz-small);
  color      : var(--text2);
}
.welcome-feature .fi { font-size: 20px; flex-shrink: 0; }

/* ─── Setup steps ────────────────────────────────────────────── */
.steps-indicator {
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 6px;
  margin-bottom  : 24px;
}
.step-dot {
  width        : 8px;
  height       : 8px;
  border-radius: 50%;
  background   : var(--surf3);
  transition   : all .3s;
}
.step-dot.active { width: 24px; border-radius: 4px; background: var(--blue); }
.step-dot.done   { background: var(--green); }

/* ─── Info e alertas inline ──────────────────────────────────── */
.alert {
  display      : flex;
  align-items  : flex-start;
  gap          : 10px;
  padding      : 12px 14px;
  border-radius: var(--r2);
  font-size    : var(--sz-small);
  line-height  : 1.55;
  margin-bottom: 12px;
}
.alert-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.alert-info   { background: var(--blue-dim);  color: var(--blue2); border: 1px solid rgba(74,143,255,.2); }
.alert-ok     { background: var(--green-dim); color: var(--green); border: 1px solid rgba(46,204,138,.2); }
.alert-danger { background: var(--red-dim);   color: var(--red);   border: 1px solid rgba(255,74,107,.2); }
.alert-warn   { background: var(--amber-dim); color: var(--amber); border: 1px solid rgba(245,166,35,.2); }

/* ─── Profile header na tela principal ──────────────────────── */
.profile-hero {
  display        : flex;
  align-items    : center;
  gap            : 14px;
  padding        : 16px;
  background     : var(--surf);
  border         : 1px solid var(--bord);
  border-radius  : var(--r);
  margin-bottom  : 12px;
}
.profile-hero-avatar {
  width        : 58px;
  height       : 58px;
  border-radius: 50%;
  background   : var(--surf2);
  overflow     : hidden;
  flex-shrink  : 0;
  display      : flex;
  align-items  : center;
  justify-content: center;
  font-size    : 28px;
  border       : 2px solid var(--blue-dim);
}
.profile-hero-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-hero-info { flex: 1; }
.profile-hero-name {
  font-size  : clamp(15px, 3vw, 17px);
  font-weight: 800;
  line-height: 1.2;
}
.profile-hero-nick {
  font-size : var(--sz-small);
  color     : var(--blue2);
  font-weight: 600;
}
.profile-hero-fp {
  font-size  : clamp(9px, 1.8vw, 11px);
  color      : var(--text3);
  font-family: monospace;
  margin-top : 3px;
  overflow-wrap: anywhere;
}

/* ─── Textarea para colar chave pública ──────────────────────── */
.pubkey-textarea {
  width       : 100%;
  background  : var(--surf2);
  border      : 1px solid var(--bord2);
  border-radius: var(--r2);
  padding     : 12px;
  color       : var(--text);
  font-size   : 11px;
  font-family : monospace;
  min-height  : 120px;
  resize      : vertical;
  outline     : none;
  line-height : 1.6;
  transition  : border .18s;
}
.pubkey-textarea:focus { border-color: var(--blue); }

/* ─── Toggle switch (modo idoso) ─────────────────────────────── */
.toggle-row {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : 12px 0;
  border-bottom  : 1px solid var(--bord);
}
.toggle-row:last-child { border: none; }
.toggle-info { flex: 1; }
.toggle-label { font-size: var(--sz-body); font-weight: 700; }
.toggle-desc  { font-size: var(--sz-small); color: var(--text3); margin-top: 2px; }
.toggle-switch {
  position: relative;
  width   : 48px;
  height  : 26px;
  flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position     : absolute;
  inset        : 0;
  background   : var(--surf3);
  border-radius: 99px;
  transition   : .2s;
  cursor       : pointer;
}
.toggle-slider::before {
  content      : '';
  position     : absolute;
  left         : 3px;
  top          : 3px;
  width        : 20px;
  height       : 20px;
  background   : var(--text3);
  border-radius: 50%;
  transition   : .2s;
}
.toggle-switch input:checked + .toggle-slider { background: var(--blue); }
.toggle-switch input:checked + .toggle-slider::before {
  transform : translateX(22px);
  background: #fff;
}

/* ─── Empty state ────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding   : 40px 20px;
  color     : var(--text3);
}
.empty-icon  { font-size: 48px; margin-bottom: 12px; opacity: .5; }
.empty-title { font-size: var(--sz-body); font-weight: 700; margin-bottom: 6px; color: var(--text2); }
.empty-desc  { font-size: var(--sz-small); line-height: 1.6; }

/* ─── Utilities ──────────────────────────────────────────────── */
.hidden  { display: none !important; }
.mt8     { margin-top: 8px; }
.mt12    { margin-top: 12px; }
.mt16    { margin-top: 16px; }
.mb12    { margin-bottom: 12px; }
.mb16    { margin-bottom: 16px; }
.center  { text-align: center; }
.mono    { font-family: monospace; }
.sep     { height: 1px; background: var(--bord); margin: 16px 0; }
.flex    { display: flex; }
.flex-1  { flex: 1; }
.gap8    { gap: 8px; }
.gap12   { gap: 12px; }
.items-center { align-items: center; }

/* ─── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surf3); border-radius: 99px; }

/* ─── Responsividade ────────────────────────────────────────── */
@media (min-width: 600px) {
  :root {
    --content-max-w: 680px;
    --r: 16px;
  }
  #app { box-shadow: var(--shadow); border-left: 1px solid var(--bord); border-right: 1px solid var(--bord); }
  .btn-row { gap: 16px; }
  .share-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .modal-sheet { border-radius: 24px; margin-bottom: 24px; width: 90%; max-width: 500px; }
  .modal-bg { align-items: center; }
}

@media (min-width: 900px) {
  :root {
    --content-max-w: 880px;
  }
  .btn-row { grid-template-columns: repeat(2, 1fr); }
  .share-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .contact-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
  }
  .profile-hero { padding: 24px; gap: 20px; }
  .profile-hero-avatar { width: 72px; height: 72px; font-size: 36px; }
}

@media (min-width: 1200px) {
  :root {
    --content-max-w: 1100px;
  }
  .main { padding: 32px 32px 100px; }
  .card { padding: 24px; margin-bottom: 20px; }
  .btn-row { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}

/* ─── RTL — Suporte a idiomas da direita para a esquerda (Árabe) ─ */
/* Quando o HTML tiver dir="rtl", o layout inteiro é espelhado.      */
/* Usamos propriedades lógicas do CSS para que o espelhamento seja    */
/* automático sem duplicar regras.                                    */

[dir="rtl"] .hdr-brand       { flex-direction: row-reverse; }
[dir="rtl"] .hdr-actions     { flex-direction: row-reverse; }
[dir="rtl"] .contact-item    { flex-direction: row-reverse; }
[dir="rtl"] .contact-info    { text-align: right; }
[dir="rtl"] .alert           { flex-direction: row-reverse; text-align: right; }
[dir="rtl"] .toggle-row      { flex-direction: row-reverse; }
[dir="rtl"] .stat-row        { flex-direction: row-reverse; }
[dir="rtl"] .profile-hero    { flex-direction: row-reverse; }
[dir="rtl"] .profile-hero-info { text-align: right; }
[dir="rtl"] .welcome-features { direction: rtl; }
[dir="rtl"] .welcome-feature  { flex-direction: row-reverse; }
[dir="rtl"] .card-title       { flex-direction: row-reverse; }
[dir="rtl"] .card-title::before { margin-inline-end: 0; margin-inline-start: 8px; }
[dir="rtl"] .form-field label { text-align: right; }
[dir="rtl"] .section-title   { text-align: right; }
[dir="rtl"] .section-sub     { text-align: right; }
[dir="rtl"] .modal-title     { text-align: right; }
[dir="rtl"] .modal-sub       { text-align: right; }

/* Password toggle espelhado (botão muda de lado) */
[dir="rtl"] .password-wrap input { padding-right: 14px; padding-left: 44px; }
[dir="rtl"] .password-toggle     { right: auto; left: 12px; }

/* Navegação inferior e bottom nav permanecem centrados, não precisam de ajuste */

/* Toast e overlay: permanecem centrados */

/* Fontes: Para árabe, adiciona fonte com suporte a glifos árabes */
[lang="ar"] body, [lang="ar"] * {
  font-family: 'Noto Sans Arabic', 'Nunito', sans-serif;
  line-height: 1.8; /* Árabe precisa de mais espaçamento de linha */
}

/* ─── Seletor de Idioma Global ──────────────────────────────── */
.modal-full-height {
  height: calc(100vh - 40px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.modal-header-fixed {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bord);
  margin-bottom: 8px;
}

.search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 12px;
  font-size: 14px;
  opacity: 0.5;
  pointer-events: none;
}

.search-wrap input {
  padding-left: 36px !important;
  background: var(--bg3) !important;
  border-color: transparent !important;
}

.search-wrap input:focus {
  background: var(--surf) !important;
  border-color: var(--blue) !important;
}

.lang-list-container {
  flex: 1;
  overflow-y: auto;
  padding-right: 4px;
  margin: 8px 0;
}

.lang-group-title {
  font-size: 10px;
  font-weight: 800;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 12px 4px 6px;
  border-bottom: 1px solid var(--bord);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lang-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 4px;
  border: 1px solid transparent;
}

.lang-item:hover {
  background: var(--blue-dim);
  border-color: var(--blue-dim);
}

.lang-item.active {
  background: var(--blue-dim);
  border-color: var(--blue);
}

.lang-flag {
  font-size: 24px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surf);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}

.lang-info {
  flex: 1;
}

.lang-name-native {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.lang-name-translated {
  font-size: 11px;
  color: var(--text3);
  margin-top: 2px;
}

.lang-check {
  color: var(--blue);
  font-weight: bold;
  opacity: 0;
}

.lang-item.active .lang-check {
  opacity: 1;
}

.popular-section {
  background: var(--surf2);
  border-radius: 16px;
  padding: 8px;
  margin-bottom: 16px;
}

/* ─── Accordion (Help & Security) ─────────────────────────── */
.accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.accordion-item {
  background: var(--surf);
  border: 1px solid var(--bord);
  border-radius: var(--r);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-item.active {
  border-color: var(--blue-dim);
  box-shadow: var(--shadow-sm);
  background: var(--surf2);
}

.accordion-header {
  width: 100%;
  padding: 18px;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  cursor: pointer;
  color: var(--text);
  font-weight: 800;
  font-size: var(--sz-body);
  transition: background 0.2s;
  gap: 12px;
}

.accordion-header:hover {
  background: var(--blue-dim);
}

.accordion-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.accordion-icon {
  font-size: 14px;
  color: var(--text3);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--surf3);
  border-radius: 50%;
}

.accordion-item.active .accordion-icon {
  transform: rotate(180deg);
  background: var(--blue-dim);
  color: var(--blue);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
}

.accordion-item.active .accordion-content {
  max-height: 1000px; /* Suficiente para conteúdo longo */
  opacity: 1;
  border-top: 1px solid var(--bord);
}

.accordion-body {
  padding: 18px;
  font-size: var(--sz-small);
  color: var(--text2);
  line-height: 1.7;
}

.accordion-body p {
  margin-bottom: 12px;
}

.accordion-body p:last-child {
  margin-bottom: 0;
}

/* Global Toggle Button */
.help-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}

.btn-toggle-all {
  font-size: 11px;
  padding: 8px 14px;
  height: auto;
  min-height: 32px;
  width: auto;
  border-radius: 20px;
  background: var(--surf3);
  color: var(--text2);
  font-weight: 700;
  border: 1px solid var(--bord);
}

.btn-toggle-all:hover {
  background: var(--blue-dim);
  color: var(--blue);
  border-color: var(--blue);
}

.btn-toggle-all i {
  font-style: normal;
  font-size: 12px;
}