:root{--violet: #7c6cf6;--violet-dark: #6a5af0;--violet-soft: #eef0fe;--ink: #1e2430;--ink-soft: #6b7280;--line: #e8eaf3;--bg: #f4f5fb;--card: #ffffff;--ok: #10b981;--warn: #f59e0b;--danger: #ef4444;--radius: 16px;--shadow: 0 12px 40px rgba(60, 55, 120, .1)}*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:Plus Jakarta Sans,system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;min-height:100vh}.page{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px;overflow:hidden}.blob{position:fixed;border-radius:50%;filter:blur(10px);opacity:.5;z-index:0;pointer-events:none}.blob-1{width:320px;height:320px;background:radial-gradient(circle,#e7e3ff 0%,transparent 70%);top:-80px;right:-60px}.blob-2{width:360px;height:360px;background:radial-gradient(circle,#e9f0ff 0%,transparent 70%);bottom:-120px;left:-80px}.card{position:relative;z-index:1;width:100%;max-width:440px;background:var(--card);border-radius:22px;box-shadow:var(--shadow);padding:32px 28px}.brand{text-align:center;margin-bottom:24px}.brand .logo{width:56px;height:56px;margin:0 auto 12px;color:var(--violet)}.brand .brand-logo{max-width:160px;max-height:64px;width:auto;height:auto;object-fit:contain;margin:0 auto 12px;display:block}.brand h1{font-size:1.35rem;font-weight:800;margin:0;letter-spacing:-.02em}.brand p{font-size:.85rem;color:var(--ink-soft);margin:4px 0 0}.field{margin-bottom:16px}.field label{display:block;font-size:.85rem;font-weight:600;margin-bottom:8px}.input{width:100%;border:1px solid var(--line);background:#fafbff;border-radius:12px;padding:14px 16px;font-size:1rem;font-family:inherit;color:var(--ink);transition:border-color .15s,box-shadow .15s;outline:none;text-align:center;letter-spacing:.12em;font-weight:700}.input:focus{border-color:var(--violet);box-shadow:0 0 0 3px #7c6cf626;background:#fff}.input::placeholder{letter-spacing:normal;font-weight:400;color:#b6bacb}.input.big{font-size:1.35rem;letter-spacing:.28em;padding:17px 16px}.input.big::placeholder{font-size:.95rem;letter-spacing:normal}.btn{width:100%;border:none;border-radius:12px;padding:14px 18px;font-size:.95rem;font-weight:700;font-family:inherit;cursor:pointer;transition:transform .08s,background .15s,opacity .15s;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn:active{transform:scale(.99)}.btn:disabled{opacity:.55;cursor:not-allowed}.btn-primary{background:var(--violet);color:#fff;text-transform:uppercase;letter-spacing:.04em}.btn-primary:hover:not(:disabled){background:var(--violet-dark)}.btn-ghost{background:var(--violet-soft);color:var(--violet-dark)}.btn-outline{background:#fff;border:1px solid var(--line);color:var(--ink)}.alert{border-radius:12px;padding:12px 14px;font-size:.85rem;margin-bottom:16px}.alert-error{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}.alert-info{background:var(--violet-soft);color:var(--violet-dark);border:1px solid #dcd9fb}.summary{background:#fafbff;border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:18px}.summary .row{display:flex;justify-content:space-between;align-items:baseline;padding:5px 0;font-size:.9rem}.summary .row .lbl{color:var(--ink-soft)}.summary .row .val{font-weight:600;text-align:right}.summary .row .val.lunas{display:inline-block;padding:2px 10px;border-radius:999px;background:#dcfce7;color:#15803d;font-size:.8rem;letter-spacing:.04em}.summary .row.total{border-top:1px dashed var(--line);margin-top:6px;padding-top:12px}.summary .row.total .val{font-size:1.3rem;font-weight:800;color:var(--violet-dark)}.channels{display:flex;flex-direction:column;gap:0;margin-bottom:8px}.channel{display:flex;align-items:center;gap:14px;width:100%;text-align:left;border:none;border-bottom:1px solid var(--line);background:#fff;border-radius:0;padding:13px 2px;cursor:pointer;transition:background .12s;font-family:inherit}.channel:last-child{border-bottom:none}.channel:hover:not(:disabled){background:#fafbff}.channel:disabled{opacity:.55;cursor:wait}.channel .ico{width:42px;height:42px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;color:var(--violet-dark)}.channel .ico img{max-width:100%;max-height:100%;object-fit:contain}.channel .meta{flex:1;min-width:0}.channel .meta .cat{font-size:.65rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);font-weight:600}.channel .meta .nm,.channel .meta .price{font-weight:700;font-size:.92rem;margin-top:1px}.channel .meta .admin{font-size:.75rem;color:var(--ink-soft);margin-top:1px}.channel .chev{color:#c4c8d8;flex-shrink:0}.group-title{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);margin:14px 0 6px}.qr-wrap{text-align:center;margin:8px 0 16px}.qr-wrap img{width:240px;max-width:100%;border:1px solid var(--line);border-radius:12px;padding:10px;background:#fff}.paycode{background:#fafbff;border:1px dashed var(--violet);border-radius:12px;padding:14px;text-align:center;margin:12px 0}.paycode .lbl{font-size:.75rem;color:var(--ink-soft);margin-bottom:6px}.paycode .code{font-size:1.15rem;font-weight:800;letter-spacing:.04em;word-break:break-all;font-family:JetBrains Mono,ui-monospace,monospace}.guide{font-size:.82rem;color:var(--ink-soft);line-height:1.6;margin-top:10px}.guide :global(ol),.guide :global(ul){padding-left:18px;margin:6px 0}.countdown{text-align:center;font-size:.85rem;color:var(--ink-soft);margin-bottom:10px}.countdown b{color:var(--warn);font-variant-numeric:tabular-nums}.status-pill{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;padding:4px 12px;border-radius:999px}.status-pending{background:#fff7ed;color:#b45309}.status-paid{background:#ecfdf5;color:#047857}.success{text-align:center;padding:12px 0}.success .check{width:76px;height:76px;border-radius:50%;background:#ecfdf5;color:var(--ok);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}.success h2{margin:0 0 6px;font-size:1.3rem;font-weight:800}.success p{color:var(--ink-soft);font-size:.9rem;margin:0 0 4px}.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:inline-block}.spinner.dark{border:2px solid rgba(124,108,246,.3);border-top-color:var(--violet)}@keyframes spin{to{transform:rotate(360deg)}}.center-muted{text-align:center;color:var(--ink-soft);font-size:.88rem;padding:8px 0}.footer-note{text-align:center;font-size:.72rem;color:#b6bacb;margin-top:18px}.link-btn{background:none;border:none;color:var(--violet-dark);font-weight:600;cursor:pointer;font-size:.85rem;font-family:inherit;padding:6px}.company{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--line)}.company img{max-height:48px;max-width:170px;object-fit:contain;margin-bottom:10px}.company h2{font-size:1.05rem;font-weight:800;margin:0 0 2px}.company .sub{font-size:.82rem;color:var(--ink-soft);line-height:1.55}.dnote{font-size:12px;line-height:1.45;color:#64748b;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:8px 10px;margin-bottom:10px}.dfield{margin-bottom:12px}.dfield>span{display:block;font-size:.78rem;font-weight:600;margin-bottom:5px;color:var(--ink)}.dbox{background:#f4f5fb;border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:.92rem;color:var(--ink);min-height:46px;display:flex;align-items:center}.dbox.right{justify-content:flex-end;font-weight:700}.dbox.total{background:#fff;border-color:var(--violet);justify-content:flex-end}.dbox.total b{font-size:1.3rem;font-weight:800}.secure{display:flex;align-items:center;justify-content:center;gap:6px;background:#e9f9ef;color:#0f9d58;border:1px solid #c5ecd3;border-radius:10px;padding:10px;font-size:.82rem;font-weight:600;margin:16px 0 12px}.btn-pay{background:linear-gradient(135deg,#7c6cf6,#9b6cf6);color:#fff;text-transform:uppercase;letter-spacing:.04em;font-weight:800;padding:16px;border-radius:14px;box-shadow:0 8px 22px #7c6cf659}.btn-pay:hover:not(:disabled){filter:brightness(1.05)}.note{font-size:.74rem;color:var(--ink-soft);line-height:1.6;margin-top:16px}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:#1e193c80;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:flex-end;justify-content:center;padding:0}@media (min-width: 520px){.modal-overlay{align-items:center;padding:16px}}.modal-card{background:#fff;width:100%;max-width:440px;border-radius:20px 20px 0 0;max-height:86vh;overflow:hidden;display:flex;flex-direction:column}@media (min-width: 520px){.modal-card{border-radius:20px}}.modal-head{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 14px;flex:0 0 auto;border-bottom:1px solid rgba(15,23,42,.07)}.modal-body{overflow-y:auto;overscroll-behavior:contain;padding:16px 20px 20px;flex:1 1 auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.22) transparent}.modal-body::-webkit-scrollbar{width:6px}.modal-body::-webkit-scrollbar-track{background:transparent}.modal-body::-webkit-scrollbar-thumb{background:#0f172a38;border-radius:999px}.modal-body::-webkit-scrollbar-thumb:hover{background:#0f172a61}.modal-head h3{margin:0;font-size:1.05rem;font-weight:800}.modal-close{background:#0f172a0d;border:none;color:var(--ink-soft);cursor:pointer;line-height:0;width:40px;height:40px;min-width:40px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;margin:-6px -6px -6px 0;transition:background .15s,color .15s}.modal-close:hover{background:#0f172a1a;color:var(--ink)}