*{margin:0;padding:0;box-sizing:border-box;font-family:system-ui,-apple-system,Arial}
body{background:#f3f4f6}

/* container tipo app */
.app{
  max-width:480px;
  margin:0 auto;
  background:#fff;
  min-height:100 svh;
  position:relative;
}

/* HEADER */
.header{
  background:#2563eb;
  color:#fff;
  padding:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.brand{display:flex;align-items:center;gap:10px;min-width:0}
.logo{width:32px;height:auto}
.brand-text{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.title{font-size:20px;font-weight:800}
.mini{
  margin-top:6px;
  font-size:12.5px;
  opacity:.95;
  display:flex;
  align-items:center;
  gap:6px;
}

.help-inline{
  width:18px;height:18px;
  border:none;border-radius:999px;
  background:rgba(255,255,255,.18);
  color:#fff;font-weight:900;
  cursor:pointer;
  line-height:18px;
}

.header-actions{display:flex;align-items:center;gap:10px}
.help-round{
  width:30px;height:30px;
  border:none;border-radius:999px;
  background:rgba(255,255,255,.18);
  color:#fff;font-weight:900;
  cursor:pointer;
}
.icon-btn{
  border:none;background:transparent;
  cursor:pointer;
  padding:2px;
}
.icon-btn img{width:30px;height:30px}

/* SUBTÍTULO destacado (fora do header) */
.subtitle{padding:12px 14px 0;background:#fff}
.subtitle-card{
  background:#eef2ff;
  border:1px solid rgba(37,99,235,.18);
  border-radius:14px;
  padding:12px 12px;
}
.subtitle-title{font-weight:800;color:#111827;font-size:14px}
.subtitle-desc{margin-top:3px;color:#111827;opacity:.85;font-size:12.8px}

/* MAIN */
.main{
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:12px;

  /* espaço do footer fixo */
  padding-bottom:92px;
}

.card{
  position:relative;
  width:100%;
  border:none;
  background:#fff;
  border-radius:14px;
  padding:16px;
  display:flex;
  align-items:center;
  gap:14px;
  border:1px solid #e5e7eb;
  cursor:pointer;
  text-align:left;
  transition:.15s;
}

.card:hover{background:#f9fafb}
.card.primary{background:#1e40af;color:#fff;border-color:rgba(255,255,255,.12)}
.card.primary:hover{background:#1d4ed8}

.card-ico{width:44px;height:44px;flex:0 0 auto}
.card-txt{min-width:0;padding-right:34px} /* reserva espaço pro ? */
.card h2{font-size:16px;line-height:1.1}
.card p{font-size:13px;margin-top:3px;opacity:.82}

/* ? no canto direito, SEM ATRAPALHAR o clique */
.card-help{
  position:absolute;
  top:10px;
  right:10px;
  width:26px;
  height:26px;
  border:none;
  border-radius:999px;
  font-weight:900;
  cursor:pointer;

  display:grid;
  place-items:center;

  background:rgba(17,24,39,.08);
  color:#111827;
}

.card.primary .card-help{
  background:rgba(255,255,255,.18);
  color:#fff;
}

/* FOOTER FIXO sempre visível */
.footer{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:0;

  width:min(480px, 100%);
  background:#fff;
  border-top:1px solid #e5e7eb;
  padding:10px 8px;

  display:flex;
  gap:6px;
  justify-content:space-around;
  z-index:50;
}

.nav{
  flex:1;
  border:none;
  background:none;
  cursor:pointer;
  padding:6px 0;
  border-radius:12px;

  display:flex;
  flex-direction:column;
  align-items:center;
  font-size:12px;
}

.nav:active{background:#f3f4f6}
.nav img{width:22px;height:22px;margin-bottom:4px}

.qmark{
  width:22px;height:22px;
  border-radius:999px;
  background:#eef2ff;
  display:grid;
  place-items:center;
  font-weight:900;
  margin-bottom:4px;
}

/* MODAL totalmente oculto quando fechado */
.modal{
  display:none;            /* <- some 100% */
  position:fixed;
  inset:0;
  z-index:100;
}
.modal.show{display:block}

.modal-backdrop{
  position:absolute;inset:0;
  background:rgba(17,24,39,.45);
}

.modal-box{
  position:relative;
  width:min(92vw,420px);
  margin:14vh auto 0;
  background:#f3f4f6;
  border-radius:16px;
  border:1px solid rgba(17,24,39,.08);
  box-shadow:0 12px 30px rgba(0,0,0,.18);
  overflow:hidden;
}

.modal-head{
  padding:14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.modal-head h3{font-size:16px;color:#111827}
.modal-x{
  width:34px;height:34px;
  border:none;border-radius:12px;
  background:rgba(17,24,39,.08);
  font-size:22px;
  cursor:pointer;
  line-height:34px;
}
.modal-body{
  padding:0 14px 14px;
  font-size:14px;
  color:#111827;
  line-height:1.35;
}
.modal-actions{padding:0 14px 14px}
.modal-btn{
  width:100%;
  border:none;
  background:#2563eb;
  color:#fff;
  border-radius:14px;
  padding:12px 14px;
  font-weight:800;
  cursor:pointer;
}

/* mobile um pouco maior */
@media (max-width:420px){
  .title{font-size:22px}
  .card{padding:18px}
  .card-ico{width:48px;height:48px}
  .card h2{font-size:17px}
  .card p{font-size:13.5px}
}