/* ============================================================
   KARTU RESULT — RAJAPAITO v2
   ============================================================ */

/* ---------- ROOT + AURORA BG ---------- */
.rpz-root{--rpz-line:rgba(255,255,255,.08);--rpz-dim:#8ea3c0;font-family:inherit;position:relative}
.rpz-root::before{content:"";position:absolute;inset:-30px -12px 0;pointer-events:none;z-index:0;
  background:
    radial-gradient(520px 250px at 12% 0%,hsl(222 90% 55%/.16),transparent 65%),
    radial-gradient(520px 250px at 88% 4%,hsl(288 90% 60%/.13),transparent 65%),
    radial-gradient(460px 230px at 55% 100%,hsl(190 90% 50%/.09),transparent 65%);
  filter:blur(20px);animation:rpzAurora 16s ease-in-out infinite alternate}
@keyframes rpzAurora{from{transform:translateY(0) scale(1)}to{transform:translateY(12px) scale(1.05)}}
.rpz-root>*{position:relative;z-index:1}

/* ---------- TOOLBAR ---------- */
.rpz-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 10px}
.rpz-search{flex:1 1 220px;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #d8e0ec;border-radius:12px;padding:6.5px 14px;box-shadow:0 2px 10px rgba(15,23,42,.08)}
.rpz-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:14px;color:#0f172a}
.rpz-sort{background:#fff;border:1px solid #d8e0ec;border-radius:12px;padding:10px 12px;font-size:14px;color:#0f172a;cursor:pointer}
.rpz-tools{display:flex;gap:6px;margin-left:auto}
.rpz-tbtn{width:38px;height:38px;border-radius:11px;border:1px solid #d8e0ec;background:#fff;font-size:1rem;line-height:1;cursor:pointer;color:#475569;display:grid;place-items:center;transition:.2s;box-shadow:0 2px 10px rgba(15,23,42,.06);padding:0}
.rpz-tbtn:hover{transform:translateY(-1px);border-color:#94a3b8}
.rpz-tbtn.on{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#fff;border-color:transparent;box-shadow:0 4px 14px rgba(245,158,11,.45)}

/* ---------- META (info + terakhir diperbarui) ---------- */
.rpz-meta{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;margin:0 0 12px;font-size:.78rem;color:#64748b}
.rpz-info{margin:0}
.rpz-upd{display:inline-flex;align-items:center;gap:6px;background:#ecfdf5;border:1px solid #a7f3d0;color:#047857;padding:3px 10px;border-radius:999px;font-weight:600}
.rpz-upd[hidden]{display:none}
.rpz-upd::before{content:"";width:7px;height:7px;border-radius:50%;background:#10b981;animation:rpzBlink 2s infinite}

/* ---------- LIVEBAR (sticky saat scroll) ---------- */
.rpz-barwrap{position:sticky;top:2px;z-index:60;padding:4px;border-radius:18px;background:linear-gradient(180deg,#193563,#153e82);box-shadow:0 12px 32px rgba(2,8,23,.35);margin:0 0 14px}
.rpz-barwrap[hidden]{display:none!important}
.rpz-livebar{--hue:222;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 8px;padding:14px 18px;border-radius:14px;font-size:.85rem;font-weight:600;line-height:1.5;color:hsl(var(--hue) 95% 80%);background:linear-gradient(135deg,hsl(var(--hue) 60% 18%),hsl(var(--hue) 70% 10%));border:1px solid hsl(var(--hue) 80% 60%/.4);box-shadow:0 6px 22px hsl(var(--hue) 80% 45%/.28);text-align:center;cursor:pointer;transition:color .5s,border-color .5s,box-shadow .5s}
.rpz-livebar[hidden]{display:none!important}
.rpz-livebar b{color:hsl(var(--hue) 95% 88%);font-weight:800}
.rpz-livebar:hover{box-shadow:0 8px 28px hsl(var(--hue) 85% 50%/.45)}
.rpz-livebar.rpz-lb-soon{color:#fff;background:linear-gradient(135deg,rgba(249,115,22,.92),rgba(234,88,12,.8));border-color:rgba(249,115,22,.85);box-shadow:0 0 16px rgba(249,115,22,.45);animation:rpzPulse 1.6s ease-in-out infinite}
.rpz-livebar.rpz-lb-soon b{color:#fff}
.rpz-livebar.rpz-lb-live{color:#fff;background:linear-gradient(135deg,#d60000,#850101);border-color:rgba(239,68,68,.9);box-shadow:0 0 22px rgba(239,68,68,.5);animation:rpzPulse 1.4s ease-in-out infinite}
.rpz-livebar.rpz-lb-live b{color:#fff}
.rpz-livebar.rpz-lb-waitbar{color:#fde68a;background:linear-gradient(135deg,rgba(245,158,11,.22),rgba(180,83,9,.14));border-color:rgba(245,158,11,.5);animation:rpzPulse 2s ease-in-out infinite}
.rpz-livebar.rpz-lb-waitbar b{color:#fde68a}

/* ---------- GRID & CARD ---------- */
.rpz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.rpz-card{position:relative;overflow:hidden;border-radius:18px;color:#e8eefb;background:linear-gradient(180deg,#16223f,#0d1730);border:1px solid hsl(var(--hue) 70% 60%/.28);box-shadow:0 10px 28px rgba(2,8,23,.35);transition:transform .25s,box-shadow .25s,border-color .3s;animation:rpzIn .45s ease both;animation-delay:calc(var(--n,0)*45ms);scroll-margin-top:90px}
.rpz-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,hsl(var(--hue) 85% 55%),hsl(calc(var(--hue) + 45) 85% 60%))}
.rpz-card::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.07) 50%,transparent 58%);transform:translateX(-120%);transition:transform .9s ease}
.rpz-card:hover::after{transform:translateX(120%)}
.rpz-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px hsl(var(--hue) 80% 45%/.35);border-color:hsl(var(--hue) 80% 65%/.5)}
@keyframes rpzIn{from{opacity:0;transform:translateY(14px)}}
.rpz-card[data-next="1"]{border-color:rgba(251,191,36,.5)}
.rpz-card[data-next="1"]::before{background:linear-gradient(90deg,#fbbf24,#f59e0b)}
.rpz-nexttag{font-size:.58rem;font-weight:800;letter-spacing:.5px;color:#1c1917;background:linear-gradient(135deg,#fbbf24,#f59e0b);padding:3px 8px;border-radius:999px;box-shadow:0 2px 8px rgba(245,158,11,.45);white-space:nowrap}
.rpz-card[data-state="live"]{border-color:rgba(239,68,68,.6);animation:rpzGlow 1.6s ease-in-out infinite}
.rpz-card[data-state="live"]::before{background:linear-gradient(90deg,#ef4444,#f59e0b,#ef4444);background-size:200% 100%;animation:rpzBar 1.2s linear infinite}
@keyframes rpzBar{to{background-position:-200% 0}}
@keyframes rpzGlow{0%,100%{box-shadow:0 10px 28px rgba(2,8,23,.35)}50%{box-shadow:0 10px 30px rgba(2,8,23,.35),0 0 24px 2px rgba(239,68,68,.4)}}
.rpz-card[data-state="wait"]{border-color:rgba(245,158,11,.45)}
.rpz-card[data-state="done"]::before{background:linear-gradient(90deg,#22c55e,#16a34a)}
.rpz-card[data-state="live"] .rpz-ball{animation:rpzLiveBall .5s ease-in-out infinite alternate;box-shadow:inset 0 -2px 6px rgba(0,0,0,.35),0 8px 16px rgba(239,68,68,.5)}
@keyframes rpzLiveBall{to{transform:scale(1.1)}}

/* ---------- HEADER KARTU ---------- */
.rpz-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:16px 16px 4px;margin-bottom:10px}
.rpz-title{margin:0;font-size:0.90rem;font-weight:800;letter-spacing:.4px;text-transform:uppercase;line-height:1.25}
.rpz-sub{font-size:.72rem;color:var(--rpz-dim);margin-top:4px;text-align:left}
.rpz-headr{display:flex;align-items:center;gap:6px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}
.rpz-badge{font-size:.6rem;font-weight:700;background:linear-gradient(135deg,#22c55e,#15803d);color:#fff;padding:3px 9px;border-radius:999px;white-space:nowrap;box-shadow:0 2px 8px rgba(34,197,94,.4)}
.rpz-copy,.rpz-share,.rpz-fav{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#cbd7ee;font-size:.85rem;cursor:pointer;transition:.2s;padding:0}
.rpz-copy:hover,.rpz-share:hover{background:hsl(var(--hue) 80% 55%/.3);border-color:hsl(var(--hue) 80% 60%)}
.rpz-copy.ok,.rpz-share.ok{background:#16a34a;border-color:#16a34a;color:#fff}
.rpz-fav:hover{color:#fbbf24;border-color:rgba(251,191,36,.5)}
.rpz-fav.on{color:#fbbf24;background:rgba(251,191,36,.14);border-color:rgba(251,191,36,.55);text-shadow:0 0 10px rgba(251,191,36,.9)}

/* ---------- TANGGAL & BOLA ANGKA ---------- */
.rpz-when{text-align:center;font-size:.76rem;color:var(--rpz-dim);line-height:1.6}
.rpz-ago{opacity:.85}
.rpz-balls{display:flex;justify-content:center;gap:9px;padding:13px 10px 4px}
.rpz-ball{position:relative;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:1.3rem;color:#fff;font-variant-numeric:tabular-nums;background:radial-gradient(circle at 32% 28%,hsl(var(--hue) 90% 65%),hsl(calc(var(--hue) + 35) 85% 42%));border:1px solid rgba(255,255,255,.28);box-shadow:inset 0 -2px 6px rgba(0,0,0,.35),0 8px 16px hsl(var(--hue) 85% 50%/.45);animation:rpzPop .5s cubic-bezier(.2,1.6,.4,1) both;animation-delay:calc(.12s + var(--i,0)*.09s)}
.rpz-ball::after{content:"";position:absolute;top:7px;left:10px;width:12px;height:7px;border-radius:50%;background:rgba(255,255,255,.45);transform:rotate(-25deg)}
@keyframes rpzPop{from{transform:scale(0) rotate(-40deg);opacity:0}}
.rpz-ball.rpz-settle{animation:rpzSettle .35s cubic-bezier(.2,1.8,.4,1) both}
@keyframes rpzSettle{0%{transform:scale(1.5)}100%{transform:scale(1)}}

/* ---------- COUNTDOWN / STATE ---------- */
.rpz-count{width:max-content;max-width:100%;margin:10px auto 0;font-size:.72rem;font-variant-numeric:tabular-nums;color:hsl(var(--hue) 95% 78%);background:hsl(var(--hue) 80% 50%/.14);border:1px solid hsl(var(--hue) 80% 60%/.35);padding:5px 12px;border-radius:999px;text-align:center;line-height:1.5}
.rpz-count b{font-variant-numeric:tabular-nums}
.rpz-count.rpz-soon{color:#fff;background:linear-gradient(135deg,rgba(249,115,22,.92),rgba(234,88,12,.8));border-color:rgba(249,115,22,.85);box-shadow:0 0 14px rgba(249,115,22,.45);animation:rpzPulse 1.6s ease-in-out infinite}
.rpz-count.rpz-live{color:#fff;background:linear-gradient(135deg,rgba(239,68,68,.95),rgba(220,38,38,.85));border-color:rgba(239,68,68,.9);box-shadow:0 0 18px rgba(239,68,68,.55);animation:rpzPulse 1.2s ease-in-out infinite}
.rpz-count.rpz-wait{color:#fde68a;background:rgba(245,158,11,.15);border-color:rgba(245,158,11,.5);animation:rpzPulse 2s ease-in-out infinite}
.rpz-count.rpz-done{color:#86efac;background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.4)}
@keyframes rpzPulse{0%,100%{opacity:1}50%{opacity:.72}}
.rpz-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#fafa05;margin-right:6px;vertical-align:middle;animation:rpzBlink 1s steps(2,start) infinite}
@keyframes rpzBlink{50%{opacity:.15}}
.rpz-ell i{display:inline-block;font-style:normal;animation:rpzEll 1.2s infinite}
.rpz-ell i:nth-child(2){animation-delay:.2s}
.rpz-ell i:nth-child(3){animation-delay:.4s}
@keyframes rpzEll{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-3px);opacity:1}}
.rpz-reload{border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.12);color:#fff;border-radius:8px;padding:2px 8px;cursor:pointer;font-size:.72rem;margin-left:6px}
.rpz-reload:hover{background:rgba(255,255,255,.22)}

/* ---------- PROGRESS ---------- */
.rpz-prog{height:4px;border-radius:99px;background:rgba(255,255,255,.09);margin:10px 16px 0;overflow:hidden}
.rpz-prog i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,hsl(var(--hue) 90% 60%),hsl(calc(var(--hue) + 45) 90% 65%));transition:width .5s linear}
.rpz-card[data-state="live"] .rpz-prog i,.rpz-card[data-state="wait"] .rpz-prog i{background:linear-gradient(90deg,#ef4444,#f97316)}
.rpz-card[data-state="done"] .rpz-prog i{background:linear-gradient(90deg,#22c55e,#16a34a)}

/* ---------- RIWAYAT + HOT NUMBERS ---------- */
.rpz-hist{margin:13px 14px 0;background:rgba(255,255,255,.045);border:1px solid var(--rpz-line);border-radius:12px;font-size:.78rem;overflow:hidden}
.rpz-hist summary{cursor:pointer;padding:9px 12px;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center;user-select:none;transition:background .2s}
.rpz-hist summary:hover{background:rgba(255,255,255,.05)}
.rpz-hist summary::-webkit-details-marker{display:none}
.rpz-hist summary::after{content:"▾";transition:transform .2s}
.rpz-hist[open] summary::after{transform:rotate(180deg)}
.rpz-hot{display:flex;align-items:center;gap:6px;padding:8px 12px;font-size:.7rem;color:var(--rpz-dim);border-bottom:1px solid var(--rpz-line)}
.rpz-hot i{font-style:normal;font-weight:800;width:22px;height:22px;display:grid;place-items:center;border-radius:7px;color:#fff;background:linear-gradient(135deg,#f97316,#ea580c);box-shadow:0 2px 8px rgba(234,88,12,.4)}
.rpz-hot em{margin-left:auto;font-style:normal;font-size:.62rem;opacity:.7}
.rpz-hist table{width:100%;border-collapse:collapse}
.rpz-hist th{background:rgba(255,255,255,.06);padding:6px 10px;text-align:left;font-size:.66rem;text-transform:uppercase;letter-spacing:.6px;color:var(--rpz-dim)}
.rpz-hist td{padding:6px 10px;border-top:1px solid var(--rpz-line)}
.rpz-hist .rpz-num{font-weight:700;letter-spacing:2px;color:hsl(var(--hue) 90% 72%);font-variant-numeric:tabular-nums}

/* ---------- ACTIONS ---------- */
.rpz-actions{display:flex;gap:8px;padding:14px}
.rpz-btn{flex:1;text-align:center;text-decoration:none;font-size:.7rem;font-weight:800;padding:9px 2px;border-radius:10px;color:#fff!important;box-shadow:0 4px 12px rgba(2,8,23,.3);transition:transform .2s,filter .2s}
.rpz-btn:hover{transform:translateY(-2px);filter:brightness(1.12)}
.rpz-b1{background:linear-gradient(135deg,#f59e0b,#ea580c)}
.rpz-b2{background:linear-gradient(135deg,#10b981,#047857)}
.rpz-b3{background:linear-gradient(135deg,#ef4444,#b91c1c)}

/* ---------- LAIN-LAIN ---------- */
.rpz-more-wrap{text-align:center;margin-top:22px}
.rpz-more{border:0;cursor:pointer;color:#fff;font-weight:700;font-size:.85rem;padding:12px 30px;border-radius:999px;background:linear-gradient(135deg,#334155,#0f172a);box-shadow:0 6px 18px rgba(2,8,23,.35);transition:transform .2s}
.rpz-more:hover{transform:translateY(-2px)}
.rpz-more:active{transform:scale(.97)}
.rpz-empty{text-align:center;color:#94a3b8;font-size:.9rem;padding:26px 0}
.rpz-empty[hidden]{display:none}
.rpz-off{display:none!important}
.rpz-card.rpz-flash{outline:2px solid hsl(var(--hue) 90% 62%);outline-offset:2px}

/* ---------- MODE DAFTAR (list) ---------- */
.rpz-root[data-view="list"] .rpz-grid{grid-template-columns:1fr;gap:10px}
.rpz-root[data-view="list"] .rpz-card{display:flex;align-items:center;gap:14px;padding:12px 16px;flex-wrap:wrap}
.rpz-root[data-view="list"] .rpz-head{padding:0;margin:0;flex:1 1 170px;min-width:160px}
.rpz-root[data-view="list"] .rpz-when,
.rpz-root[data-view="list"] .rpz-prog,
.rpz-root[data-view="list"] .rpz-hist{display:none}
.rpz-root[data-view="list"] .rpz-balls{padding:0;gap:6px}
.rpz-root[data-view="list"] .rpz-ball{width:30px;height:30px;font-size:.95rem}
.rpz-root[data-view="list"] .rpz-ball::after{width:8px;height:5px;top:5px;left:7px}
.rpz-root[data-view="list"] .rpz-count{margin:0;font-size:.68rem}
.rpz-root[data-view="list"] .rpz-actions{padding:0;flex:0 0 auto;gap:6px}
.rpz-root[data-view="list"] .rpz-btn{padding:8px 12px;font-size:.66rem;flex:0 0 auto}

/* ---------- TOAST & KONFETI ---------- */
.rpz-toasts{position:fixed;right:14px;bottom:14px;z-index:99999;display:flex;flex-direction:column;gap:8px;max-width:min(320px,80vw)}
.rpz-toast{background:#0e1a33;color:#e8eefb;border:1px solid rgba(255,255,255,.14);border-left:3px solid #22c55e;padding:10px 14px;border-radius:12px;font-size:.8rem;font-weight:600;line-height:1.5;box-shadow:0 12px 32px rgba(2,8,23,.5);animation:rpzToastIn .3s ease both,rpzToastOut .35s ease 3.2s forwards}
.rpz-toast b{color:#fff}
@keyframes rpzToastIn{from{opacity:0;transform:translateY(12px)}}
@keyframes rpzToastOut{to{opacity:0;transform:translateY(8px)}}
.rpz-confetti{position:fixed;inset:0;pointer-events:none;z-index:99999}

/* ---------- AKSESIBILITAS ---------- */
@media (prefers-reduced-motion:reduce){
  .rpz-card,.rpz-ball,.rpz-count,.rpz-livebar,.rpz-dot,.rpz-ell i,
  .rpz-root::before,.rpz-upd::before,.rpz-toast{animation:none!important}
  .rpz-card::after{display:none}
}

.rpz-holibadge{font-size:.6rem;font-weight:700;background:linear-gradient(135deg,#64748b,#334155);color:#fff;padding:3px 9px;border-radius:999px;white-space:nowrap;box-shadow:0 2px 8px rgba(51,65,85,.45)}
.rpz-count.rpz-libur{color:#cbd5e1;background:rgba(100,116,139,.16);border-color:rgba(148,163,184,.4)}
.rpz-card[data-state="libur"]{border-color:rgba(148,163,184,.35)}
.rpz-card[data-state="libur"]::before{background:linear-gradient(90deg,#64748b,#94a3b8)}
.rpz-card[data-state="libur"] .rpz-prog i{background:linear-gradient(90deg,#64748b,#94a3b8)}
.rpz-card[data-state="libur"] .rpz-ball{opacity:.55;filter:grayscale(.4)}