:root{
      --bg:#0b0b0f;
      --card:#12121a;
      --text:#fff;
      --muted:#a7a7b3;
      --border:rgba(255,255,255,.10);
      --brand:#ffb800;
      --soft:rgba(255,255,255,.06);
      --radius:20px;
    }
    *{box-sizing:border-box;font-family:Arial, Helvetica, sans-serif}
    body{
      margin:0;
      min-height:100vh;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:18px;
      color:var(--text);
      background:
        radial-gradient(1000px 600px at 20% 10%, rgba(255,184,0,.18), transparent 55%),
        radial-gradient(900px 500px at 80% 30%, rgba(255,255,255,.06), transparent 55%),
        var(--bg);
    }
    a{color:inherit;text-decoration:none}
    .wrap{
      width:100%;
      max-width:920px;
      display:grid;
      grid-template-columns: 1fr;
      gap:14px;
    }
    .card{
      background: rgba(255,255,255,.03);
      border:1px solid var(--border);
      border-radius:22px;
      padding:18px;
      box-shadow: 0 10px 30px rgba(0,0,0,.35);
    }
    .badge{
      display:inline-flex;
      gap:10px;
      align-items:center;
      padding:8px 12px;
      border-radius:999px;
      background:rgba(255,184,0,.12);
      border:1px solid rgba(255,184,0,.28);
      color:var(--brand);
      font-weight:900;
      font-size:12px;
      letter-spacing:.4px;
      margin-bottom:10px;
    }
    h1{margin:0 0 6px;font-size:24px}
    p{margin:0;color:var(--muted);font-size:13px;line-height:1.4}

    .grid{
      margin-top:14px;
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:12px;
    }
    .box{
      background:rgba(255,255,255,.04);
      border:1px solid var(--border);
      border-radius:20px;
      padding:16px;
      cursor:pointer;
      transition:.12s ease;
    }
    .box:hover{transform:translateY(-2px)}
    .box strong{
      display:block;
      font-size:14px;
      margin-bottom:6px;
    }
    .box span{
      display:block;
      color:var(--muted);
      font-size:12px;
      line-height:1.35;
    }
    .btn{
      margin-top:14px;
      width:100%;
      border:0;
      padding:12px 14px;
      border-radius:16px;
      font-weight:900;
      cursor:pointer;
      background:var(--soft);
      border:1px solid var(--border);
      color:#fff;
    }
    .btn:hover{transform:translateY(-1px)}
    .foot{
      margin-top:10px;
      text-align:center;
      font-size:12px;
      color:rgba(255,255,255,.55);
    }
    @media(max-width:900px){
      .grid{grid-template-columns:1fr}
    }

/* V20: ajustes exclusivos para telas pequenas, sem alterar o desktop. */
@media (max-width: 900px){
  body{align-items:flex-start;padding:12px;padding-top:max(12px, env(safe-area-inset-top));padding-bottom:max(18px, env(safe-area-inset-bottom));}
  .wrap{width:100%;gap:12px;}
  .left,.right,.card{border-radius:18px;padding:16px;}
  input,button,.btn{min-height:48px;font-size:16px;}
}
@media (max-width: 420px){
  body{padding-left:10px;padding-right:10px;}
  h1{font-size:28px;}
}