:root {
  --bg: #0b0e14; --text: #e6e8ee; --muted: #8a93a6; --dim: #6b7280; --line: #232833; --cyan: #22D3EE;
}

.tp-ov { position:fixed; inset:0; background:rgba(3,5,10,.82); display:none; z-index:60; }
.tp-ov.show { display:block; }

.tp .pm-logo { width:38px; height:38px; object-fit:contain; border-radius:8px; }
.tp .pm-brands { display:inline-flex; gap:5px; align-items:center; margin-top:3px; }
.tp .pm-brands img { height:20px; width:auto; background:#fff; border-radius:3px; padding:1px 2px; }

@keyframes tpshake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-7px)} 40%{transform:translateX(7px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(5px)} }
.tp .shake { animation:tpshake .4s; }
.tp .invalid { border-color:#ef4444 !important; box-shadow:0 0 0 3px rgba(239,68,68,.18) !important; }
.tp { position:fixed; z-index:61; top:50%; left:50%; transform:translate(-50%,-50%); width:min(500px,94vw);
  max-height:94vh; overflow-y:auto; overflow-x:hidden; box-sizing:border-box; background:#12151d; border:1px solid #232833; border-radius:18px;
  padding:18px 20px; display:none;
  box-shadow:0 30px 80px rgba(0,0,0,.6), 0 10px 24px rgba(0,0,0,.4); }

.tp img { max-width:100%; }

.tp .tp-pm .rd { display:flex; align-items:center; justify-content:center; }
.tp.show { display:block; }
.tp h3 { margin:0 0 2px; font-size:18px; }
.tp p.sub { margin:0 0 8px; color:var(--muted); font-size:12px; }
.tp label { display:block; font-size:11.5px; color:var(--muted); margin:7px 0 3px; font-weight:600; }
.tp input { box-sizing:border-box; width:100%; padding:11px 13px; border-radius:11px; border:1px solid #232B3D;
  background:#181F2E; color:var(--text); font-size:14px; outline:none; transition:border-color .15s, box-shadow .15s; }
.tp input:focus { border-color:#7c3aed; box-shadow:0 0 0 3px rgba(124,58,237,.16); }
.tp input::placeholder { color:#5a6479; }

.tp input.tpi { padding-left:42px; background-repeat:no-repeat; background-position:14px center; background-size:18px; }
.tp input.tpi:focus { background-position:14px center; }
#mp-number.tpi { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E"); }
#mp-exp.tpi { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); }
#mp-cvv.tpi { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); }
#mp-cardholderName.tpi, #tp-offfn.tpi, #tp-offln.tpi { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M5 21a7 7 0 0 1 14 0'/%3E%3C/svg%3E"); }
#mp-docNumber.tpi, #tp-offdoc.tpi { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Ccircle cx='8' cy='10' r='2'/%3E%3Cpath d='M14 9h4M14 13h4M5 16a3 3 0 0 1 6 0'/%3E%3C/svg%3E"); }
#mp-yphone.tpi { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-3 2a11 11 0 0 0 5 5l2-3 5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E"); }
#mp-yotp.tpi { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='M11 12l7-7 3 3M16 7l2 2'/%3E%3C/svg%3E"); }
.tp .row2 { display:flex; gap:8px; } .tp .row2 > div { flex:1; }
.tp .qr { display:flex; gap:12px; align-items:center; background:var(--bg); border:1px solid var(--line);
  border-radius:10px; padding:10px; margin-bottom:4px; }
.tp .qr img { width:100px; height:100px; border-radius:8px; object-fit:contain; background:#fff; }
.tp .ref { font-weight:800; color:var(--cyan); font-size:15px; word-break:break-all; }
.tp .btn-main { width:100%; margin-top:14px; border:none; border-radius:12px; padding:14px; font-weight:800;
  font-size:15px; cursor:pointer; color:#fff; background:linear-gradient(135deg,#7c3aed,#6366f1 55%,#22D3EE 125%);
  box-shadow:0 6px 18px rgba(124,58,237,.28); transition:transform .12s, box-shadow .15s, filter .15s; }
.tp .btn-main:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 10px 24px rgba(124,58,237,.4); filter:brightness(1.04); }
.tp .btn-main:disabled { opacity:.5; cursor:default; box-shadow:none; }
.tp .tp-methods { display:flex; flex-direction:column; gap:8px; }
.tp .tp-methods .btn-main { margin-top:12px; display:flex; align-items:center; justify-content:center; gap:8px; }
.tp .tp-inst { font-size:10px; font-weight:700; background:rgba(255,255,255,.22); padding:2px 7px; border-radius:999px; }
.tp .btn-alt { width:100%; border:1px solid var(--line); border-radius:10px; padding:10px; font-weight:700;
  font-size:13.5px; cursor:pointer; background:var(--bg); color:var(--text); }
.tp .btn-alt:hover { border-color:var(--cyan); }
.tp .x { position:absolute; top:12px; right:14px; background:none; border:none; color:var(--muted);
  font-size:20px; cursor:pointer; }
.tp .note { font-size:11px; color:var(--muted); margin-top:6px; }
.tp .drop { border:1.5px dashed var(--line); border-radius:10px; padding:12px; text-align:center;
  color:var(--muted); font-size:12px; cursor:pointer; }
.tp .drop.has { border-color:var(--cyan); color:var(--text); }
.tp .drop img { max-width:100%; max-height:130px; border-radius:6px; margin-top:6px; }

.tp .tp-steps { display:flex; gap:6px; margin-bottom:14px; }
.tp .tp-st { flex:1; display:flex; align-items:center; justify-content:center; gap:6px; font-size:11.5px; font-weight:600;
  color:var(--dim); padding:7px 4px; border-radius:8px; background:#171b24; border:1px solid #262b36; }
.tp .tp-st .n { width:17px; height:17px; border-radius:50%; display:grid; place-items:center; font-size:10.5px; font-weight:700;
  background:#2a303c; color:var(--muted); }
.tp .tp-st.on { color:#fff; border-color:#7c3aed; background:rgba(124,58,237,.12); }
.tp .tp-st.on .n { background:#7c3aed; color:#fff; }
.tp .tp-st.done .n { background:#22c55e; color:#fff; }

.tp .tp-quick { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:4px; }
.tp .tp-quick button { padding:11px 0; border-radius:11px; border:1px solid #232B3D; background:#181F2E;
  color:var(--text); font-weight:800; font-size:14px; cursor:pointer; transition:transform .12s, border-color .15s, background .15s, box-shadow .15s; }
.tp .tp-quick button:hover { border-color:#4a5570; transform:translateY(-1px); }
.tp .tp-quick button.sel { border-color:transparent; color:#fff;
  background:linear-gradient(135deg,#7c3aed,#22D3EE); background-clip:padding-box;
  box-shadow:0 6px 16px rgba(124,58,237,.35); }

.tp .tp-amterr { display:none; color:#f87171; font-size:11.5px; font-weight:600; margin:4px 2px 0; }
.tp input#tp-amount.invalid { border-color:#f87171; }
.tp input#tp-amount.invalid ~ .tp-amterr { display:block; }

.tp .tp-title-m { display:block; font-size:12px; color:var(--muted); font-weight:700; margin:12px 0 7px; }
.tp .tp-pms { display:flex; flex-direction:column; gap:8px; max-height:270px; overflow-y:auto;
  padding:2px 4px 2px 2px; }
.tp .tp-pms::-webkit-scrollbar { width:6px; }
.tp .tp-pms::-webkit-scrollbar-track { background:transparent; }
.tp .tp-pms::-webkit-scrollbar-thumb { background:#283144; border-radius:4px; }
.tp .tp-pms::-webkit-scrollbar-thumb:hover { background:#3a4660; }
.tp .tp-pm { display:flex; align-items:center; gap:13px; padding:0 14px; border-radius:13px; cursor:pointer;
  border:1px solid #232B3D; background:#181F2E; transition:transform .12s, border-color .15s, background .15s, box-shadow .15s;
  position:relative; min-width:0; height:62px; min-height:62px; box-sizing:border-box; width:100%; flex-shrink:0; }
.tp .tp-pm:hover { border-color:#33405C; background:#1C2436; transform:translateY(-1px); }

.tp .tp-pm .ic { width:48px; height:46px; display:flex; align-items:center; justify-content:center; flex:0 0 48px;
  border-radius:0; background:transparent; box-shadow:none; }
.tp .tp-pm .pm-logo { max-width:46px; max-height:42px; width:auto; height:auto; object-fit:contain; display:block; }

.tp .tp-pm#pm-wallet .ic { width:52px; height:38px; flex:0 0 52px; background:#fff; border-radius:9px;
  box-shadow:0 1px 3px rgba(0,0,0,.25); }
.tp .tp-pm#pm-wallet .pm-logo { max-width:42px; max-height:28px; }
.tp .tp-pm .nm { font-weight:700; font-size:14px; color:var(--text); display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; line-height:1.25; }
.tp .tp-pm .nm small { font-weight:500; font-size:11px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tp .tp-pm input { display:none; }
.tp .tp-pm .rd { margin-left:auto; width:20px; height:20px; border-radius:50%; border:2px solid #3a4150;
  transition:.15s; flex:0 0 20px; display:grid; place-items:center; }
.tp .tp-pm .rd::after { content:""; width:9px; height:9px; border-radius:50%; background:transparent; transition:.15s; }
.tp .tp-pm:has(:checked) { border-color:#7c3aed; background:rgba(124,58,237,.16);
  box-shadow:0 6px 18px rgba(124,58,237,.22), inset 0 0 0 1px rgba(124,58,237,.35); }
.tp .tp-pm:has(:checked) .rd { border-color:#7c3aed; background:#7c3aed; }
.tp .tp-pm:has(:checked) .rd::after { background:#fff; }

.tp .tp-trust { display:flex; flex-wrap:wrap; gap:4px; justify-content:center; color:var(--dim); font-size:10.5px; margin-top:8px; }
.tp .tp-trust span { display:inline-flex; align-items:center; gap:3px; }

.tp-autobuy { background:linear-gradient(135deg,rgba(16,185,129,.14),rgba(34,211,238,.1)); border:1px solid rgba(16,185,129,.35);
  border-radius:11px; padding:9px 12px; margin-bottom:10px; font-size:12px; }
.tp-ab-head { display:flex; align-items:center; gap:6px; font-weight:800; color:#34d399; font-size:12.5px; margin-bottom:3px; }
.tp-ab-body { color:var(--muted); font-size:11.5px; line-height:1.4; }
.tp-ab-body b { color:var(--text); }
.tp-ab-body b.cyan { color:#22D3EE; font-size:13px; }
.tp-ab-note { margin-top:4px; font-size:10.5px; color:#6ee7b7; opacity:.95; }

.tp .mp-field { height:48px; background:#171b24; border:1px solid #262b36; border-radius:11px;
  padding:0 14px; display:flex; align-items:center; transition:border-color .15s; }
.tp .mp-field.focus { border-color:#7c3aed; box-shadow:0 0 0 3px rgba(124,58,237,.18); }
.tp .mp-field.invalid { border-color:#ef4444; box-shadow:0 0 0 2px rgba(239,68,68,.25); }
.tp .mp-field iframe { width:100%; height:100%; border:0; }
.tp #mp-form label { display:block; font-size:12.5px; color:var(--muted); margin:12px 0 5px; font-weight:600; }
.tp #mp-form input { background:#161a23; border:1px solid #262b36; }
.tp #mp-form input:focus { border-color:#7c3aed; box-shadow:0 0 0 3px rgba(124,58,237,.16); }
.tp .mp-err { color:#ff6b6b; font-size:12.5px; min-height:16px; margin-top:8px; text-align:center; }
.tp .tp-back { background:none; border:none; color:var(--muted); font-size:13px; cursor:pointer; padding:0 0 8px; }
.tp .tp-back:hover { color:var(--cyan); }
.tp .tp-secure { display:flex; align-items:center; justify-content:center; gap:7px; color:var(--muted);
  font-size:11.5px; margin-top:12px; }

.tp #tp-offline label { margin-top:12px; }
.tp #tp-offline .row2 { gap:10px; margin-top:2px; }
.tp #tp-offline .btn-main { margin-top:18px; }

.tp .btn-main.btn-yape { background:linear-gradient(135deg,#8E2DA8,#C2379B); box-shadow:none; }
.tp .btn-main.btn-yape:hover:not(:disabled) { filter:brightness(1.04); box-shadow:none; }
.tp .yape-hint { font-size:11px; color:var(--muted); margin:4px 0 0; }
.tp .yape-hint b { color:#E86AB5; }
.tp .yape-logo { display:flex; justify-content:center; margin:14px 0 2px; }
.tp .yape-logo img { height:42px; width:auto; }
.tp #tp-yapemp input:focus { border-color:#C2379B; box-shadow:0 0 0 3px rgba(194,55,155,.2); }

.tp .tp-ok-ic { width:78px; height:78px; border-radius:50%; margin:6px auto 14px; display:grid; place-items:center;
  background:linear-gradient(135deg,#7c3aed,#22D3EE); box-shadow:0 0 40px rgba(124,58,237,.5); }
.tp .tp-ok-ic.pend { background:linear-gradient(135deg,#7c3aed,#22D3EE); box-shadow:0 0 40px rgba(124,58,237,.5); }

.tp .tp-success { position:relative; width:120px; height:120px; margin:10px auto 16px; display:grid; place-items:center; }
.tp .tp-success .ring { position:absolute; inset:0; margin:auto; width:96px; height:96px; border-radius:50%;
  border:2px solid #22c55e; opacity:0; }
.tp .tp-success .r1 { animation:tpwave 1.4s ease-out .2s infinite; }
.tp .tp-success .r2 { animation:tpwave 1.4s ease-out .55s infinite; }
@keyframes tpwave { 0%{transform:scale(.6);opacity:.7} 100%{transform:scale(1.5);opacity:0} }
.tp .tp-check { width:96px; height:96px; }
.tp .tp-check .c { fill:none; stroke:#22c55e; stroke-width:3; stroke-dasharray:151; stroke-dashoffset:151;
  animation:tpcircle .5s ease-out forwards; }
.tp .tp-check .k { fill:none; stroke:#22c55e; stroke-width:4; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:48; stroke-dashoffset:48; animation:tpcheck .35s cubic-bezier(.65,0,.45,1) .45s forwards; }

.tp #tp-ticket .tp-check .c, .tp #tp-ticket .tp-check .k { stroke:#22D3EE; }
.tp #tp-ticket .cyan { color:#22D3EE; }

.tp #tp-cardok .tp-check .c, .tp #tp-cardok .tp-check .k { stroke:#7C3AED; }
.tp #tp-cardok .tp-success .ring { border-color:#7C3AED; }
@keyframes tpcircle { to{stroke-dashoffset:0} }
@keyframes tpcheck { to{stroke-dashoffset:0} }

.tp .btn-main.loading { position:relative; color:transparent; }
.tp .btn-main.loading::after { content:""; position:absolute; top:50%; left:50%; width:20px; height:20px; margin:-10px;
  border:2.5px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:tpspin .6s linear infinite; }
.tp #mp-form input.invalid { border-color:#ef4444 !important; box-shadow:0 0 0 2px rgba(239,68,68,.25) !important; }
@keyframes tpspin { to{transform:rotate(360deg)} }

.cart-ack { display:flex; gap:9px; align-items:flex-start; margin-bottom:12px; font-size:12px; line-height:1.45;
  color:var(--muted); background:#181F2E; border:1px solid #232B3D; border-radius:10px; padding:10px 12px; cursor:pointer; }
.cart-ack input { width:16px; height:16px; margin-top:1px; flex:0 0 auto; accent-color:#7c3aed; cursor:pointer; }
.cart-ack b { color:#e7ecf5; }
.cart-ack a { color:#22d3ee; }
.cart-ack.shake { animation:ackshake .45s; border-color:#ef4444; }
@keyframes ackshake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-5px)} 40%,80%{transform:translateX(5px)} }