:root{
      --primary:#2563eb;
      --primary-hover:#1e40af;
      --bg:#f9fafb;
      --card:#ffffff;
      --text:#111827;
      --muted:#6b7280;
      --success:#16a34a;
    }
    body{
      margin:0; font-family:system-ui, sans-serif;
      background:var(--bg); color:var(--text);
      display:flex; flex-direction:column; align-items:center;
      min-height:100vh; padding:40px 16px;
    }
    h1{
      font-size:2rem; margin-bottom:10px;
    }
    p.sub{
      color:var(--muted); margin-bottom:30px;
    }
    .card{
      background:var(--card); padding:32px;
      border-radius:18px; box-shadow:0 8px 28px rgba(0,0,0,.08);
      max-width:680px; width:100%; text-align:center;
    }
    input[type="text"]{
      width:90%; padding:18px 20px;
      font-size:1.1rem; border:2px solid #e5e7eb;
      border-radius:12px; outline:none;
      transition:border-color .2s;
      margin-bottom:20px;
    }
    input[type="text"]:focus{
      border-color:var(--primary);
    }
    button{
      width:100%; padding:18px;
      font-size:1.2rem; font-weight:600;
      border:none; border-radius:12px;
      background:var(--primary); color:white;
      cursor:pointer; transition:background .2s;
    }
    button:hover{ background:var(--primary-hover); }
    .loading{
      margin-top:20px; font-size:1rem; color:var(--muted);
      display:flex; align-items:center; justify-content:center; gap:8px;
    }
    .spinner{
      width:18px; height:18px; border:3px solid #e5e7eb; border-top-color:var(--primary);
      border-radius:50%; animation:spin 1s linear infinite;
    }
    @keyframes spin{ 100%{ transform:rotate(360deg); } }

    .result{
      margin-top:24px; display:none; flex-direction:column; gap:12px; align-items:center;
    }
    .download-btn{
      display:inline-block;
      padding:16px 28px; font-size:1.2rem; font-weight:600;
      background:var(--success); color:white; border-radius:12px;
      text-decoration:none; transition:background .2s;
    }
    .download-btn:hover{ background:#15803d; }

    /* área para propagandas */
    .ads{
      margin-top:40px; padding:20px; text-align:center;
      font-size:.9rem; color:var(--muted);
      border:2px dashed #d1d5db; border-radius:12px;
      width:100%; max-width:680px;
    }