:root{
    --bg:#0b1220;
    --card:#111a2e;
    --text:#e6edf7;
    --muted:#9aa7bd;
    --border:rgba(255,255,255,.08);
    --btn:#3b82f6;
    --btn2:#26324a;
    --ok:#22c55e;
    --err:#ef4444;
  }

  *{box-sizing:border-box}
  body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
    background: radial-gradient(1200px 600px at 20% 0%, #18264a 0%, var(--bg) 60%);
    color:var(--text);
  }
  .container{max-width:720px;margin:0 auto;padding:28px 18px}
  .header{margin-bottom:18px}
  .brand{display:flex;gap:12px;align-items:center}
  .logo{
    width:44px;height:44px;border-radius:12px;
    background:linear-gradient(135deg,#3b82f6,#22c55e);
    display:grid;place-items:center;font-weight:800;color:#081026;
  }
  h1{margin:0;font-size:22px}
  h2{margin:0 0 10px 0;font-size:18px}
  .muted{color:var(--muted)}
  .card{
    background:rgba(17,26,46,.9);
    border:1px solid var(--border);
    border-radius:16px;
    padding:18px;
    box-shadow: 0 12px 40px rgba(0,0,0,.25);
  }
  .form{display:grid;gap:12px;margin-top:12px}
  label{display:grid;gap:6px;font-size:14px}
  input{
    width:100%;
    padding:12px 12px;
    border-radius:12px;
    border:1px solid var(--border);
    background:#0b1220;
    color:var(--text);
    outline:none;
  }
  input:focus{border-color:rgba(59,130,246,.7)}
  .btn{
    margin-top:6px;
    padding:12px 14px;
    border-radius:12px;
    border:0;
    background:var(--btn);
    color:white;
    font-weight:700;
    cursor:pointer;
    font-size:14px;
    transition: opacity .15s;
  }
  .btn:hover{opacity:.85}
  .btn.secondary{background:var(--btn2); border:1px solid var(--border)}
  .note{margin-top:10px;min-height:20px}
  .hidden{display:none}
  .row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
  .pre{
    background:#0b1220;
    border:1px solid var(--border);
    border-radius:12px;
    padding:12px;
    overflow:auto;
  }
  .footer{margin-top:16px;text-align:center}

  /* Mensajes de feedback */
  .ok{color:var(--ok)}
  .err{color:var(--err)}

  /* User info (ingreso.html) */
  .user-info{margin-top:14px}
  .user-info p{margin:6px 0;font-size:15px}
  .user-info strong{color:var(--muted);font-weight:600;margin-right:6px}

  /* Créditos */
  .credits-section{text-align:center;padding:8px 0}
  .credits-box{display:flex;align-items:baseline;justify-content:center;gap:8px;margin-top:6px}
  .credits-number{
    font-size:42px;
    font-weight:800;
    background:linear-gradient(135deg,#3b82f6,#22c55e);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
  }

  /* Pago */
  .payment-section{margin-top:4px}