/* AVERPAY app shell: header 3 tombol, nav bawah + tombol menu tengah, komponen dashboard ala app fintech.
   Tema komik tetap: semua warna lewat token --cm-*, tiap permukaan menentukan --cm-fg sendiri. */

/* ---------- Header atas ---------- */
html body .fixed-navbar{background:var(--cm-white)!important;--cm-fg:var(--cm-ink)!important;--cm-edge:var(--cm-ink)!important;border-bottom:3px solid var(--cm-ink)!important;border-radius:0 0 22px 22px;box-shadow:0 4px 0 var(--cm-ink)!important}
.ah-bar{max-width:80rem;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:64px;padding:8px 16px}
.ah-brand{display:flex;align-items:center;gap:10px;min-width:0;text-decoration:none!important}
.ah-brand .comic-logo-text{font-size:21px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ah-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
html body .ah-btn{position:relative;display:grid;place-items:center;width:42px;height:42px;padding:0;border:3px solid var(--cm-ink)!important;border-radius:50%!important;background:var(--cm-white)!important;--cm-fg:var(--cm-ink)!important;--cm-edge:var(--cm-ink)!important;box-shadow:2px 3px 0 var(--cm-ink)!important;font-size:16px;line-height:1;text-decoration:none!important;cursor:pointer}
html body .ah-btn:active{transform:translate(2px,3px);box-shadow:0 0 0 var(--cm-ink)!important}
html body .ah-cs{background:var(--cm-yellow)!important}
html body .ah-logout{background:var(--cm-ink)!important;--cm-fg:var(--cm-white)!important}
html body .ah-cs i{animation:ahWiggle 2.2s ease-in-out infinite;transform-origin:50% 85%}
@keyframes ahWiggle{0%,50%,100%{transform:rotate(0)}10%{transform:rotate(-14deg)}20%{transform:rotate(11deg)}30%{transform:rotate(-7deg)}}
html body .ah-badge{position:absolute;top:-8px;right:-8px;min-width:19px;height:19px;padding:0 4px;display:grid;place-items:center;border:2px solid var(--cm-white);border-radius:99px;background:var(--cm-ink)!important;--cm-fg:var(--cm-white)!important;font-size:10px;font-weight:800;line-height:1}

/* ---------- Bar navigasi bawah ---------- */
html body .comic-bottom-nav{position:fixed;left:50%;bottom:calc(10px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:45;width:calc(100% - 28px);max-width:430px;padding:0;background:var(--cm-white)!important;--cm-fg:var(--cm-ink)!important;--cm-edge:var(--cm-ink)!important;border:3px solid var(--cm-ink)!important;border-radius:26px!important;box-shadow:4px 5px 0 var(--cm-ink)!important;overflow:visible}
html body .comic-bottom-nav-inner{display:grid;grid-template-columns:1fr 1fr 78px 1fr 1fr;align-items:stretch;height:64px;padding:0 4px;overflow:visible}
html body .comic-nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;padding:0;border:0!important;background:transparent!important;box-shadow:none!important;--cm-fg:var(--cm-ink)!important;font-size:10.5px;line-height:1.1;text-decoration:none!important}
html body .comic-nav-item>i{display:grid;place-items:center;width:40px;height:28px;border:2px solid transparent;border-radius:12px;background:transparent;font-size:16px}
html body .comic-nav-item.active>i{background:var(--cm-yellow);border-color:var(--cm-ink);box-shadow:2px 2px 0 var(--cm-ink)}
html body .comic-nav-item.active{font-weight:800}
.comic-nav-fab-cell{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:6px}
html body button#comicMenuBtn.comic-nav-fab{position:absolute;top:-28px;left:50%;margin-left:-31px;display:grid;place-items:center;width:62px;height:62px;padding:0;border:3px solid var(--cm-ink)!important;border-radius:50%!important;background:var(--cm-yellow)!important;--cm-fg:var(--cm-ink)!important;--cm-edge:var(--cm-ink)!important;box-shadow:3px 4px 0 var(--cm-ink)!important;font-size:24px;transform:rotate(-6deg)}
html body button#comicMenuBtn.comic-nav-fab:hover{box-shadow:3px 4px 0 var(--cm-ink)!important}
html body button#comicMenuBtn.comic-nav-fab:active,html body button#comicMenuBtn.comic-nav-fab[aria-expanded=true]{transform:rotate(-6deg) translate(2px,3px);box-shadow:1px 1px 0 var(--cm-ink)!important}
.comic-nav-fab-label{font-size:10.5px;font-weight:800;line-height:1}
html body.has-bnav{padding-bottom:118px}

/* ---------- Dashboard ---------- */
.ad-wrap{max-width:540px;margin:0 auto;padding:6px 18px 8px}
.ad-hello{display:flex;align-items:center;gap:12px;margin:8px 0 6px}
.ad-avatar{display:grid;place-items:center;flex-shrink:0;width:54px;height:54px;overflow:hidden;border:3px solid var(--cm-ink);border-radius:50%;background:var(--cm-yellow);--cm-fg:var(--cm-ink)!important;box-shadow:2px 3px 0 var(--cm-ink);font:26px Bangers,Impact,sans-serif;text-decoration:none}
.ad-avatar img{width:100%;height:100%;object-fit:cover}
.ad-hello-text{flex:1;min-width:0}
.ad-hello-greet{display:block;font-size:13px;line-height:1.2}
.ad-hello-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:25px/1.05 Bangers,Impact,sans-serif;letter-spacing:.04em}
.ad-hello-mail{display:block;font-size:11.5px;line-height:1.2}
.ad-clock{flex-shrink:0;padding:6px 10px 5px;text-align:center;border:3px solid var(--cm-ink);border-radius:14px;background:var(--cm-white);--cm-fg:var(--cm-ink)!important;box-shadow:3px 3px 0 var(--cm-ink)}
.ad-clock small{display:block;font-size:10px;line-height:1.1}
.ad-clock b{display:block;font:20px/1.1 Bangers,Impact,sans-serif;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.ad-date{margin:0 0 4px;font-size:12px}

.ad-cards{display:flex;gap:12px;margin:0 -18px;padding:24px 18px 12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 18px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ad-cards::-webkit-scrollbar{display:none}
html body .ad-card{position:relative;flex:0 0 86%;scroll-snap-align:start;display:flex;flex-direction:column;justify-content:space-between;gap:10px;min-height:150px;padding:16px 18px!important;margin:0!important;border:3px solid var(--cm-ink)!important;border-radius:20px!important;background:var(--cm-yellow)!important;--cm-fg:var(--cm-ink)!important;--cm-edge:var(--cm-ink)!important;box-shadow:4px 5px 0 var(--cm-ink)!important;overflow:visible!important}
html body .ad-card.t-ink{background:var(--cm-ink)!important;--cm-fg:var(--cm-white)!important;--cm-edge:var(--cm-yellow)!important}
html body .ad-card.t-white{background:var(--cm-white)!important}
html body .ad-card.t-green{background:var(--cm-green)!important}
html body .ad-card.comic-balance-card::after{width:62px;height:62px;top:-20px;right:14px;font-size:20px!important}
html body .ad-card:not(.comic-balance-card)::after{content:none}
.ad-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-right:56px}
.ad-card:not(.comic-balance-card) .ad-card-top{padding-right:0}
.ad-card-label{font-size:14px;font-weight:800}
.ad-card-ic{display:grid;place-items:center;width:32px;height:32px;border:2px solid var(--cm-edge);border-radius:50%;font-size:14px}
.ad-amount-row{display:flex;align-items:center;gap:10px;min-width:0}
html body .ad-card .ad-amount{margin:0;font-size:clamp(28px,8.5vw,38px)!important;line-height:1;color:var(--cm-fg)!important;overflow-wrap:anywhere}
html body .ad-card .ad-eye{display:grid;place-items:center;flex-shrink:0;width:34px;height:34px;padding:0;border-radius:50%!important;background:var(--cm-white)!important;--cm-fg:var(--cm-ink)!important;--cm-edge:var(--cm-ink)!important;box-shadow:2px 2px 0 var(--cm-ink)!important;font-size:14px}
.ad-card-note{margin:0;font-size:11.5px;line-height:1.35}
html body .ad-more{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-size:13px;font-weight:800;text-decoration:none!important}
.ad-dots{display:flex;justify-content:center;gap:7px;margin:0 0 4px}
.ad-dot{width:22px;height:8px;border:2px solid var(--cm-ink);border-radius:99px;background:var(--cm-white);padding:0;transition:none}
html body .ad-dots .ad-dot{box-shadow:none!important;min-height:0}
.ad-dot.on{background:var(--cm-ink)}

.ad-sec{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:20px 0 10px}
.ad-sec h3{margin:0;font-size:24px}
html body .ad-sec .ad-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border:2px solid var(--cm-ink)!important;border-radius:99px!important;background:var(--cm-white)!important;--cm-fg:var(--cm-ink)!important;--cm-edge:var(--cm-ink)!important;box-shadow:2px 2px 0 var(--cm-ink)!important;font-size:12.5px;font-weight:800;text-decoration:none!important;min-height:0}
html body .ad-panel{background:var(--cm-white)!important;--cm-fg:var(--cm-ink)!important;--cm-edge:var(--cm-ink)!important;border:3px solid var(--cm-ink)!important;border-radius:20px!important;box-shadow:4px 5px 0 var(--cm-ink)!important;padding:16px 12px;margin-bottom:6px}

.ad-quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 6px}
html body .ad-q{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;text-align:center;text-decoration:none!important;--cm-fg:var(--cm-ink)!important}
.ad-q-ic{display:grid;place-items:center;width:56px;height:56px;border:3px solid var(--cm-ink);border-radius:18px;background:var(--cm-white);font-size:21px;box-shadow:3px 4px 0 var(--cm-ink);transition:transform .12s}
.ad-q:active .ad-q-ic{transform:translate(2px,3px);box-shadow:1px 1px 0 var(--cm-ink)}
.ad-q:nth-child(3n+1) .ad-q-ic{background:var(--cm-yellow)}
.ad-q:nth-child(3n) .ad-q-ic{background:var(--cm-green)}
.ad-q-lb{font-size:11.5px;line-height:1.15;font-weight:800;overflow-wrap:anywhere}
html body .ad-q-badge{position:absolute;top:-6px;right:calc(50% - 38px);min-width:19px;height:19px;padding:0 4px;display:grid;place-items:center;border:2px solid var(--cm-white);border-radius:99px;background:var(--cm-ink)!important;--cm-fg:var(--cm-white)!important;font-size:10px;font-weight:800;line-height:1}

.ad-tabs{display:flex;gap:8px;margin:0 0 12px;flex-wrap:wrap}
html body .ad-tab{padding:5px 13px;border:2px solid var(--cm-ink)!important;border-radius:99px!important;background:var(--cm-white)!important;--cm-fg:var(--cm-ink)!important;box-shadow:2px 2px 0 var(--cm-ink)!important;font-size:12px;font-weight:800;min-height:0}
html body .ad-tab.on{background:var(--cm-ink)!important;--cm-fg:var(--cm-white)!important}
.ad-legend{display:flex;gap:14px;margin-bottom:8px;font-size:11.5px;font-weight:800}
.ad-legend i{display:inline-block;width:11px;height:11px;margin-right:5px;border:2px solid var(--cm-ink);border-radius:50%;vertical-align:-1px}
.ad-legend .in i{background:var(--cm-green)}.ad-legend .out i{background:var(--cm-yellow)}
.ad-row{display:flex;align-items:center;gap:10px;padding:10px 4px;border-bottom:2px dashed var(--cm-ink)}
.ad-row:last-child{border-bottom:0}
.ad-row-ic{display:grid;place-items:center;flex-shrink:0;width:38px;height:38px;border:2px solid var(--cm-ink);border-radius:12px;background:var(--cm-green);font-size:14px}
.ad-row.out .ad-row-ic{background:var(--cm-yellow)}
.ad-row-main{flex:1;min-width:0}
.ad-row-main b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px}
.ad-row-main small{display:block;font-size:11px}
.ad-amt{flex-shrink:0;padding:3px 9px;border:2px solid var(--cm-ink);border-radius:99px;background:var(--cm-green);font-size:12.5px;font-weight:800;white-space:nowrap}
.ad-row.out .ad-amt{background:var(--cm-ink);--cm-fg:var(--cm-white)!important}
.ad-empty{margin:0;padding:18px 0;text-align:center;font-size:13px}
.ad-stack>*{margin-bottom:18px}

/* admin: papan live 2 kolom di lebar app */
.ad-wrap .live-comic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(prefers-reduced-motion:reduce){.ah-cs i{animation:none}}

/* ======================= v2: gaya referensi (kartu lebar, grid putih, bar bawah rata) ======================= */
/* Header: profil kiri */
.ah-profile{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
html body .ah-ava{display:grid;place-items:center;flex-shrink:0;width:46px;height:46px;overflow:hidden;border:3px solid var(--cm-ink);border-radius:50%;background:var(--cm-yellow);--cm-fg:var(--cm-ink)!important;box-shadow:2px 3px 0 var(--cm-ink);font:22px Bangers,Impact,sans-serif;text-decoration:none!important}
.ah-ava img{width:100%;height:100%;object-fit:cover}
.ah-who{min-width:0;display:flex;flex-direction:column;line-height:1.2}
.ah-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:20px/1.05 Bangers,Impact,sans-serif;letter-spacing:.04em}
.ah-sub{display:flex;align-items:center;gap:6px;font-size:12px;min-width:0}
.ah-sub #ahId{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body .ah-copy{display:inline-grid;place-items:center;width:22px;height:22px;padding:0;border:0!important;background:transparent!important;box-shadow:none!important;--cm-fg:var(--cm-ink)!important;font-size:13px;min-height:0;cursor:pointer}
html body .ah-btn{width:40px;height:40px;font-size:15px}
.ah-actions{gap:8px}

/* Nav bawah: bar rata lebar penuh */
html body .comic-bottom-nav{left:0;right:0;bottom:0;transform:none;width:100%;max-width:none;border:0!important;border-top:3px solid var(--cm-ink)!important;border-radius:0!important;box-shadow:0 -3px 0 rgba(0,0,0,.08)!important;padding-bottom:env(safe-area-inset-bottom,0px)}
html body .comic-bottom-nav-inner{max-width:560px;margin:0 auto;grid-template-columns:1fr 1fr 84px 1fr 1fr;height:62px}
html body .comic-nav-item{font-size:11px;font-weight:700}
html body .comic-nav-item>i{height:26px;font-size:18px}
html body button#comicMenuBtn.comic-nav-fab{top:-30px;margin-left:-32px;width:64px;height:64px;transform:none}
html body button#comicMenuBtn.comic-nav-fab:active,html body button#comicMenuBtn.comic-nav-fab[aria-expanded=true]{transform:translate(2px,3px)}
html body.has-bnav{padding-bottom:96px}

/* Sapaan ringkas */
.ad-hello{margin:6px 0 10px}
.ad-hello-greet{font-size:14px;font-weight:800}
.ad-date{margin:0;font-size:12px}

/* Kartu saldo lebar */
.ad-wrap{max-width:560px}
html body .ad-card{flex:none;width:100%;margin:22px 0 14px!important;padding:16px 18px 18px!important;gap:12px}
.ad-card-top{padding-right:0}
html body .ad-card.comic-balance-card::after{top:-22px;right:96px}
.ad-card-label{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:800}
html body .ad-card .ad-eye{width:30px;height:30px;font-size:13px}
html body .ad-hist{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border:2px solid var(--cm-ink)!important;border-radius:99px!important;background:var(--cm-ink)!important;--cm-fg:var(--cm-white)!important;font-size:12.5px;font-weight:800;text-decoration:none!important;white-space:nowrap}
html body .ad-card .ad-amount{font-size:clamp(34px,10vw,46px)!important}
.ad-split{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-top:12px;border-top:2px solid var(--cm-ink)}
.ad-split>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.ad-sp-l{font-size:13px;font-weight:800}
.ad-split b{font:21px/1.1 Bangers,Impact,sans-serif;letter-spacing:.03em;overflow-wrap:anywhere}
.ad-split small{font-size:11.5px}
.ad-chips{display:flex;flex-wrap:wrap;gap:8px}
html body .ad-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border:2px solid var(--cm-ink);border-radius:99px;background:var(--cm-white);--cm-fg:var(--cm-ink)!important;font-size:12px;font-weight:800;text-decoration:none!important}

/* Menu cepat: ikon polos di panel putih */
.ad-panel-menu{padding:18px 6px 14px;margin-top:4px}
.ad-quick{gap:18px 2px}
html body .ad-q{background:transparent!important;border:0!important;box-shadow:none!important;padding:0;font:inherit;cursor:pointer;min-height:0}
.ad-q-ic{width:46px;height:46px;border-width:3px;border-radius:14px;box-shadow:2px 3px 0 var(--cm-ink);font-size:19px}
.ad-q-lb{font-size:12px;font-weight:700}
html body .ad-q-badge{right:calc(50% - 32px)}

/* ======================= v4: animasi klik ======================= */
.ad-rip-host{position:relative;overflow:hidden}
.ad-ripple{position:absolute;z-index:3;border-radius:50%;pointer-events:none;transform:scale(0);opacity:.9;
  background:radial-gradient(circle,rgba(255,255,255,.95) 0%,rgba(255,255,255,.55) 40%,rgba(255,255,255,0) 70%);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.7);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  animation:adRipple .65s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes adRipple{to{transform:scale(1);opacity:0}}
/* tekan memantul */
@keyframes adPop{0%{transform:scale(1)}30%{transform:scale(.88)}65%{transform:scale(1.07)}100%{transform:scale(1)}}
.ad-q.ad-pop .ad-q-ic,.comic-nav-item.ad-pop>i,.ah-btn.ad-pop,.ad-pill.ad-pop,.ad-hist.ad-pop,.ad-tab.ad-pop,.ad-chip.ad-pop,.ad-eye.ad-pop,.ah-ava.ad-pop{animation:adPop .42s cubic-bezier(.3,1.5,.5,1)}
@keyframes adPopFab{0%{transform:scale(1)}30%{transform:scale(.86) rotate(-8deg)}65%{transform:scale(1.1) rotate(6deg)}100%{transform:scale(1)}}
html body button#comicMenuBtn.comic-nav-fab.ad-pop{animation:adPopFab .5s cubic-bezier(.3,1.5,.5,1)}
@keyframes adPopCard{0%{transform:scale(1)}35%{transform:scale(.975)}100%{transform:scale(1)}}
html body .ad-card.ad-pop,.ad-row.ad-pop{animation:adPopCard .35s ease}
.ad-q:active .ad-q-ic,.comic-nav-item:active>i{filter:brightness(1.05)}
@media(prefers-reduced-motion:reduce){.ad-pop,.ad-ripple{animation:none!important}}