:root{
      --bg:#F9FAFB;
      --card:#FFFFFF;
      --muted:#6b7280;
      --accent-1: #6B4EFF;
      --accent-2: #4F46E5;
      --success: #10B981;
      --danger: #EF4444;
      --shadow: 0 8px 30px rgba(28,27,31,0.06);
      --radius: 14px;
    }

    * { box-sizing: border-box }
    html, body { height: 100% }
    body {
      margin: 0;
      font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      background: linear-gradient(180deg, #FBFBFD 0%, #F5F7FB 100%);
      color: #0f172a;
      -webkit-font-smoothing: antialiased;
      line-height: 1.5;
    }

    .container {
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
    }

    .card {
      background: var(--card);
      border-radius: 16px;
      padding: 24px;
      box-shadow: var(--shadow);
      margin-bottom: 20px;
    }

    .header {
      text-align: center;
      margin-bottom: 32px;
    }

    .header h1 {
      color: var(--accent-2);
      margin: 0 0 8px;
      font-family: 'Poppins', sans-serif;
    }

    .pricing {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 20px 0;
      padding: 16px;
      background: linear-gradient(90deg, rgba(107,78,255,0.08), rgba(79,70,229,0.04));
      border-radius: 12px;
    }

    .price-original {
      text-decoration: line-through;
      color: var(--muted);
      font-size: 16px;
    }

    .price-current {
      font-size: 28px;
      font-weight: 700;
      color: var(--accent-2);
    }

    .discount {
      background: var(--success);
      color: white;
      padding: 4px 8px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
    }

    .payment-methods {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin: 24px 0;
    }

    .payment-method {
      padding: 16px;
      border: 2px solid #e6e9ef;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.3s;
      text-align: center;
    }

    .payment-method:hover,
    .payment-method.selected {
      border-color: var(--accent-2);
      background: rgba(107,78,255,0.04);
    }

    .btn {
      width: 100%;
      padding: 16px;
      background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
      color: white;
      border: 0;
      border-radius: 12px;
      font-weight: 700;
      font-size: 16px;
      cursor: pointer;
      transition: transform 0.2s;
    }

    .btn:hover {
      transform: translateY(-2px);
    }

    .btn:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

    .guarantee {
      background: rgba(16,185,129,0.08);
      border: 1px solid rgba(16,185,129,0.2);
      border-radius: 12px;
      padding: 16px;
      margin-top: 20px;
      text-align: center;
    }

    .disclaimer {
      font-size: 12px;
      color: var(--muted);
      text-align: center;
      margin-top: 16px;
      line-height: 1.4;
    }

    .loading {
      display: none;
      text-align: center;
      color: var(--muted);
    }

    @media (max-width: 600px) {
      .payment-methods {
        grid-template-columns: 1fr;
      }
    }
  
    /* QR Code Asaas */
    #qrcode-container {
        display: none;
        margin: 20px auto;
        padding: 20px;
        background: white;
        border-radius: 8px;
        text-align: center;
        max-width: 400px;
    }
    
    #qrcode-container.show {
        display: block;
    }
    
    #qrcode-image {
        max-width: 300px;
        margin: 10px auto;
        border: 2px solid #00b894;
        border-radius: 8px;
    }
    
    .qr-instructions {
        margin: 15px 0;
        font-size: 14px;
        color: #2d3436;
    }
    
    .pix-copy-button {
        background: #00b894;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        margin-top: 10px;
    }
    
    .pix-copy-button:hover {
        background: #00a383;
    }
    
    .status-checking {
        color: #fdcb6e;
        font-weight: bold;
        margin-top: 10px;
    }
    
    .status-approved {
        color: #00b894;
        font-weight: bold;
    }

    /* Animação shake para validação */
    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      10%, 30%, 50%, 70%, 90% { transform: translateX(-8px); }
      20%, 40%, 60%, 80% { transform: translateX(8px); }
    }
    
    .shake-input {
      animation: shake 0.4s;
    }

    /* Estilo para CPF inválido */
    .cpf-invalid {
      border: 2px solid var(--danger) !important;
      box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
    }