/* Experiência responsiva compartilhada: portal, Workgroup e monitoramento. */
html { -webkit-text-size-adjust: 100%; }
button, input, select, textarea { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
@media (max-width: 760px) {
  body { font-size: 15px; overflow-x: hidden; }
  .wrap { width: 100%; padding-left: 16px; padding-right: 16px; }
  .top { min-height: 64px; gap: 10px; }
  .top .brand img, .brand img { width: 34px; height: 34px; }
  .top .brand, .brand { min-width: 0; font-size: .92rem; }
  .top .brand small { display: none; }
  .top .back { font-size: .78rem; white-space: nowrap; }
  .hero { padding: 28px 0 18px; align-items: flex-start; gap: 18px; }
  .hero h1 { font-size: clamp(2.15rem, 12vw, 3rem); }
  .hero p { font-size: .9rem; }
  .hero > .button { width: 100%; }
  .grid { gap: 14px; padding: 14px 0 36px; }
  .card { padding: 18px; border-radius: 15px; }
  .card h2 { font-size: 1.04rem; }
  .tabs { gap: 4px; overflow-x: auto; margin: -2px -4px 14px; padding: 2px 4px; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; padding: 9px 10px; font-size: .82rem; }
  label { margin-top: 13px; }
  input, select, textarea { min-height: 46px; font-size: 16px; }
  button, .button { min-height: 46px; }
  .plan { padding: 15px 76px 15px 14px; min-height: 104px; align-items: flex-start; }
  .plan > div:first-child { min-width: 0; }
  .plan b, .plan span { overflow-wrap: anywhere; }
  .plan .price { position: absolute; left: 14px; bottom: 13px; text-align: left; font-size: 1.05rem; }
  .plan::after { opacity: .24; }
  .checkout, .payment { margin-top: 14px; padding-top: 14px; }
  .payment img { width: min(220px, 100%); height: auto; aspect-ratio: 1; }
  .profile { align-items: flex-start; }
  .profile button { min-width: 74px; }
  .history-heading { align-items: flex-start; flex-direction: column; }
  .history-heading button { width: 100%; }
  .footer { padding: 20px 0 28px; }

  /* Área Workgroup: uma coluna legível, com rolagem natural no celular. */
  body.wg-dashboard-active { overflow-y: auto; }
  body.wg-dashboard-active .top { min-height: 64px; }
  body.wg-dashboard-active .hero { display: block !important; padding: 22px 0 10px; }
  body.wg-dashboard-active .hero .eyebrow, body.wg-dashboard-active .hero p { display: none; }
  body.wg-dashboard-active .hero h1 { margin: 0; font-size: 2rem; }
  body.wg-dashboard-active .grid { display: block !important; padding-bottom: 20px; }
  body.wg-dashboard-active #identityCard, body.wg-dashboard-active .grid > .card:not(#accountCard) { display: none !important; }
  body.wg-dashboard-active #accountCard { display: none !important; }
  .wg-workspace { margin: 0 !important; }
  .wg-head { display: block !important; }
  .wg-head h2 { font-size: 1.45rem !important; }
  .wg-nav { overflow-x: auto; flex-wrap: nowrap !important; padding-bottom: 4px; scrollbar-width: none; }
  .wg-nav::-webkit-scrollbar { display: none; }
  .wg-nav button { flex: 0 0 auto; min-height: 39px; }
  .wg-filter { gap: 7px !important; flex-wrap: wrap; }
  .wg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .wg-stat { padding: 12px !important; }
  .wg-stat b { font-size: 1.3rem !important; }
  .wg-panel { padding: 14px !important; border-radius: 14px !important; }
  .wg-plot { height: 220px !important; overflow-x: auto; }
  .wg-ranking { overflow-x: auto; }
  .wg-rank { min-width: 520px; }
  .wg-invite { grid-template-columns: 1fr !important; }
  .wg-invite button { width: 100%; }
  .wg-member { grid-template-columns: 1fr auto !important; }
  .wg-member button { grid-column: 1 / -1; width: 100%; }

  /* Domain Expiration Monitoring. */
  body #dm-page { margin: 16px auto 34px; padding: 0 16px; }
  body #dm-page .dmp-head { gap: 12px; }
  body #dm-page .dmp-head h1 { font-size: clamp(2rem, 10vw, 2.7rem); overflow-wrap: anywhere; }
  body #dm-page .dmp-head > button { width: 100%; }
  body #dm-page .dmp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  body #dm-page .dmp-stats div { padding: 12px; }
  body #dm-page .dmp-stats div:last-child { grid-column: 1 / -1; }
  body #dm-page .dmp-list article { grid-template-columns: 1fr; gap: 8px; padding: 14px; }
  body #dm-page .dmp-list article > div { min-width: 0; }
  body #dm-page .dmp-list article b, body #dm-page .dmp-list article small { overflow-wrap: anywhere; }
  body #dm-page .dmp-list article > div:last-child { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
  body #dm-page .dmp-list article > div:last-child button { min-height: 40px; padding: 0 7px; font-size: .75rem; }
  body .dmp-modal { padding: 10px; align-items: end; }
  body .dmp-modal form { width: 100%; max-height: calc(100dvh - 20px); border-radius: 18px; padding: 18px; }
  body .dmp-offsets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .dmp-modal form > button { min-height: 43px; }
}
@media (max-width: 390px) {
  .top .back { font-size: .7rem; }
  .top .brand { font-size: .84rem; }
  .wg-stats { grid-template-columns: 1fr !important; }
  body #dm-page .dmp-list article > div:last-child { grid-template-columns: 1fr; }
}