/* v87 - premium wallet card, My Keys cards + full-detail sheet. Loaded last; only transform/opacity animations (smooth on phones). */

/* =====================  1) DASHBOARD WALLET CARD  ===================== */
html body #page-dashboard .hbCard{position:relative;display:block;box-sizing:border-box;width:100%;margin:0 0 16px;padding:20px 20px 16px;border-radius:28px;overflow:hidden;isolation:isolate;
  color:#fff;text-align:left;
  background:radial-gradient(120% 90% at 100% 0%,rgba(178,121,243,.20) 0%,rgba(178,121,243,0) 46%),linear-gradient(150deg,#46266b 0%,#331a50 42%,#1e0f2f 100%);
  border:1px solid rgba(178,121,243,.42);
  box-shadow:0 18px 38px -14px rgba(26,13,42,.95),0 0 0 1px rgba(255,255,255,.03) inset,0 1px 0 rgba(255,255,255,.14) inset;
  -webkit-tap-highlight-color:transparent}
html body #page-dashboard .hbCard::before,html body #page-dashboard .hbCard::after{content:none!important;display:none!important}
html body #page-dashboard .hbCard .hb-orb{position:absolute;z-index:-1;border-radius:50%;pointer-events:none;border:1px solid rgba(255,255,255,.07)}
html body #page-dashboard .hbCard .hb-orb.o1{width:230px;height:230px;right:-70px;top:-92px;background:radial-gradient(circle at 35% 35%,rgba(248,171,127,.22),rgba(248,171,127,0) 68%)}
html body #page-dashboard .hbCard .hb-orb.o2{width:150px;height:150px;left:-48px;bottom:-70px;background:radial-gradient(circle at 60% 40%,rgba(178,121,243,.16),rgba(178,121,243,0) 70%)}
html body #page-dashboard .hbCard .hb-shine{position:absolute;z-index:-1;top:0;bottom:0;left:-60%;width:46%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.13),transparent);transform:skewX(-18deg) translateX(0);animation:hbShine 1.6s .5s ease-out 1 both}
@keyframes hbShine{from{transform:skewX(-18deg) translateX(0)}to{transform:skewX(-18deg) translateX(420%)}}

html body #page-dashboard .hbCard .hb-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
html body #page-dashboard .hbCard .hb-label{display:flex;align-items:center;gap:9px;font:800 11.5px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.2em;color:#bb8def;white-space:nowrap}
html body #page-dashboard .hbCard .hb-wic{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;color:#15012c;background:linear-gradient(145deg,#c092f5,#823ed0);box-shadow:0 5px 12px -4px rgba(178,121,243,.7)}
html body #page-dashboard .hbCard .hb-wic svg{width:18px;height:18px;display:block}
/* EMV chip */
html body #page-dashboard .hbCard .hb-chip{position:relative;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px;width:44px;height:33px;padding:4px;border-radius:8px;background:linear-gradient(145deg,#bb8df0,#7a39c5);box-shadow:inset 0 0 0 1px rgba(42,2,88,.35),0 4px 10px rgba(0,0,0,.3)}
html body #page-dashboard .hbCard .hb-chip i{display:block;border-radius:2px;border:1px solid rgba(42,2,88,.38);background:rgba(255,255,255,.12)}

html body #page-dashboard .hbCard .hb-amount{display:flex;align-items:center;gap:10px;margin:20px 0 14px;min-width:0}
html body #page-dashboard .hbCard .hb-cur{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border-radius:15px;font:800 26px/1 'Space Grotesk','Inter',sans-serif;color:#14012a;background:linear-gradient(145deg,#c092f5,#7f3ccc);box-shadow:0 8px 16px -6px rgba(178,121,243,.65),inset 0 1px 0 rgba(255,255,255,.55)}
html body #page-dashboard .hbCard .hb-num{display:block;min-width:0;font:800 clamp(34px,11.5vw,46px)/1.05 'Space Grotesk','Inter',sans-serif;letter-spacing:-.01em;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#ffffff 0%,#dec3fd 55%,#aa6def 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  text-shadow:none;filter:drop-shadow(0 2px 8px rgba(0,0,0,.35));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;animation:none!important}

html body #page-dashboard .hbCard .hb-bot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:12px;border-top:1px dashed rgba(255,255,255,.16)}
html body #page-dashboard .hbCard .hb-status{display:flex;align-items:center;gap:9px;min-width:0;padding-left:3px;font:600 12.5px/1.2 'Inter',system-ui,sans-serif;color:#b9c8e8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body #page-dashboard .hbCard .hb-dot{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:#34e0a1;box-shadow:0 0 0 3px rgba(52,224,161,.2)}
html body #page-dashboard .hbCard .hb-add{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px 0 11px;border:0;border-radius:12px;cursor:pointer;
  font:800 11.5px/1 'Inter',system-ui,sans-serif;letter-spacing:.08em;color:#140129;background:linear-gradient(145deg,#c092f5,#823ed0);box-shadow:0 8px 16px -8px rgba(178,121,243,.8);-webkit-tap-highlight-color:transparent;transition:transform .12s ease,filter .12s ease}
html body #page-dashboard .hbCard .hb-add svg{width:15px;height:15px;display:block}
html body #page-dashboard .hbCard .hb-add:active{transform:scale(.94);filter:brightness(.95)}
@media (max-width:360px){html body #page-dashboard .hbCard{padding:18px 16px 14px}html body #page-dashboard .hbCard .hb-cur{width:38px;height:38px;font-size:22px}html body #page-dashboard .hbCard .hb-status{font-size:11.5px}}
@media (prefers-reduced-motion:reduce){html body #page-dashboard .hbCard .hb-shine{animation:none!important;display:none}}

/* =====================  2) MY KEYS - cards  ===================== */
html body #page-history #history-container .hk-card{position:relative;display:block;box-sizing:border-box;margin:0 0 14px;padding:14px 14px 10px;border-radius:22px;overflow:hidden;cursor:pointer;color:#fff;
  background:linear-gradient(160deg,#2f1c46 0%,#231335 55%,#170d23 100%);border:1px solid #482a6a;box-shadow:0 12px 26px -14px rgba(0,0,0,.85),0 1px 0 rgba(255,255,255,.06) inset;
  -webkit-tap-highlight-color:transparent;transition:transform .14s ease,border-color .2s ease;animation:none!important}
html body #page-history #history-container .hk-card::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,#bd8df3,#7732c5)}
html body #page-history #history-container .hk-card:active{transform:scale(.985);border-color:rgba(178,121,243,.55)}
html body #page-history .hk-top{display:flex;align-items:center;gap:12px}
html body #page-history .hk-ic{flex:0 0 46px;display:grid;place-items:center;width:46px;height:46px;border-radius:15px;color:#14012a;background:linear-gradient(145deg,#c092f5,#7f3ccc);box-shadow:0 8px 16px -8px rgba(178,121,243,.75)}
html body #page-history .hk-ic svg{width:25px;height:25px;display:block}
html body #page-history .hk-main{flex:1 1 auto;min-width:0}
html body #page-history .hk-main h4{margin:0 0 4px;padding:0;font:800 15px/1.2 'Inter',system-ui,sans-serif;letter-spacing:.01em;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:none;-webkit-text-fill-color:#fff;animation:none}
html body #page-history .hk-main p{margin:0;font:500 11.5px/1.2 'Inter',system-ui,sans-serif;color:#a992c4}
html body #page-history .hk-price{flex:0 0 auto;padding:7px 11px;border-radius:12px;font:800 14px/1 'Space Grotesk','Inter',sans-serif;color:#bd8df3;background:rgba(178,121,243,.1);border:1px solid rgba(178,121,243,.3)}
html body #page-history .hk-pills{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 11px}
html body #page-history .hk-pill{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;font:700 10.5px/1 'Inter',system-ui,sans-serif;letter-spacing:.05em;white-space:nowrap}
html body #page-history .hk-pill.plan{color:#bd8df3;background:rgba(178,121,243,.1);border:1px solid rgba(178,121,243,.35)}
html body #page-history .hk-pill.src{color:#9cc4ff;background:rgba(247,153,98,.1);border:1px solid rgba(247,153,98,.35)}
html body #page-history .hk-pill.ok{color:#5be8b1;background:rgba(52,224,161,.1);border:1px solid rgba(52,224,161,.35)}
html body #page-history .hk-pill.bad{color:#ff8c98;background:rgba(255,107,120,.1);border:1px solid rgba(255,107,120,.35)}
html body #page-history .hk-keybox{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 13px;border-radius:16px;background:#11091a;border:1px dashed rgba(178,121,243,.4)}
html body #page-history .hk-keymeta{flex:1 1 auto;min-width:0}
html body #page-history .hk-keymeta small{display:flex;align-items:center;gap:8px;margin:0 0 5px;font:800 9.5px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.2em;color:#b39f82}
html body #page-history .hk-more{padding:3px 7px;border-radius:7px;font:800 9px/1 'Inter',sans-serif;letter-spacing:.04em;color:#bd8df3;background:rgba(178,121,243,.14)}
html body #page-history .hk-keytext{display:block;font:700 13.5px/1.35 'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em;color:#cda8f7;word-break:break-all;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
html body #page-history .hk-copy{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 13px;border:0;border-radius:12px;cursor:pointer;font:800 11px/1 'Inter',system-ui,sans-serif;letter-spacing:.08em;color:#140129;background:linear-gradient(145deg,#c092f5,#823ed0);-webkit-tap-highlight-color:transparent;transition:transform .12s ease}
html body #page-history .hk-copy svg{width:16px;height:16px;display:block}
html body #page-history .hk-copy:active{transform:scale(.93)}
html body #page-history .hk-copy.done{background:linear-gradient(145deg,#6ff0bd,#2fc58b)}
html body #page-history .hk-foot{display:flex;align-items:center;justify-content:center;gap:4px;padding:10px 0 2px;font:600 11px/1 'Inter',system-ui,sans-serif;letter-spacing:.04em;color:#a99576}
html body #page-history .hk-foot svg{width:14px;height:14px;display:block}

/* =====================  3) MY KEYS - full detail sheet  ===================== */
#hk-modal{position:fixed;inset:0;z-index:2147483000;display:none;align-items:flex-end;justify-content:center;background:rgba(9,5,14,.74)}
#hk-modal.on{display:flex;animation:hkFade .2s ease-out both}
#hk-modal .hk-sheet{box-sizing:border-box;position:relative;width:100%;max-width:520px;max-height:90vh;max-height:90dvh;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:10px 16px calc(18px + env(safe-area-inset-bottom,0px));border-radius:28px 28px 0 0;color:#fff;
  background:linear-gradient(180deg,#2f1b45 0%,#1d102c 38%,#150b20 100%);border:1px solid #4a2c6d;border-bottom:0;box-shadow:0 -20px 50px rgba(0,0,0,.6);animation:hkUp .26s cubic-bezier(.2,.9,.3,1) both}
#hk-modal .hk-grab{width:42px;height:4px;margin:2px auto 12px;border-radius:4px;background:rgba(255,255,255,.22)}
#hk-modal .hk-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
#hk-modal .hk-head .hk-ic{flex:0 0 52px;display:grid;place-items:center;width:52px;height:52px;border-radius:17px;color:#14012a;background:linear-gradient(145deg,#c092f5,#7f3ccc);box-shadow:0 10px 20px -8px rgba(178,121,243,.75)}
#hk-modal .hk-head .hk-ic svg{width:28px;height:28px;display:block}
#hk-modal .hk-ht{flex:1 1 auto;min-width:0}
#hk-modal .hk-ht h3{margin:0 0 6px;font:800 17px/1.2 'Inter',system-ui,sans-serif;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:none;-webkit-text-fill-color:#fff}
#hk-modal .hk-x{flex:0 0 38px;display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:12px;cursor:pointer;color:#c3d0ee;background:rgba(255,255,255,.08)}
#hk-modal .hk-x svg{width:18px;height:18px;display:block}
#hk-modal .hk-pill{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;font:700 10.5px/1 'Inter',system-ui,sans-serif;letter-spacing:.05em}
#hk-modal .hk-pill.ok{color:#5be8b1;background:rgba(52,224,161,.1);border:1px solid rgba(52,224,161,.35)}
#hk-modal .hk-pill.bad{color:#ff8c98;background:rgba(255,107,120,.1);border:1px solid rgba(255,107,120,.35)}
#hk-modal .hk-sec{margin:0 0 8px;font:800 10px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.2em;color:#bb8def}
#hk-modal .hk-keys{display:grid;gap:8px;margin-bottom:14px}
#hk-modal .hk-key{display:flex;align-items:center;gap:10px;padding:11px 10px 11px 13px;border-radius:16px;background:#0f0717;border:1px dashed rgba(178,121,243,.45)}
#hk-modal .hk-key code{flex:1 1 auto;min-width:0;font:700 14px/1.4 'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em;color:#cda8f7;word-break:break-all;user-select:all;-webkit-user-select:all}
#hk-modal .hk-key button,#hk-modal .hk-btn{border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s ease}
#hk-modal .hk-key button{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;border-radius:12px;font:800 11px/1 'Inter',sans-serif;letter-spacing:.08em;color:#140129;background:linear-gradient(145deg,#c092f5,#823ed0)}
#hk-modal .hk-key button svg{width:15px;height:15px;display:block}
#hk-modal .hk-key button.done,#hk-modal .hk-btn.done{background:linear-gradient(145deg,#6ff0bd,#2fc58b)!important;color:#05261a!important}
#hk-modal .hk-note{margin:0 0 14px;padding:12px 14px;border-radius:14px;font:600 12.5px/1.45 'Inter',sans-serif;color:#ffb3bb;background:rgba(255,107,120,.08);border:1px solid rgba(255,107,120,.3)}
#hk-modal .hk-list{margin:0 0 14px;border-radius:18px;overflow:hidden;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
#hk-modal .hk-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px}
#hk-modal .hk-row+.hk-row{border-top:1px solid rgba(255,255,255,.07)}
#hk-modal .hk-row span{flex:0 0 auto;font:600 12px/1.2 'Inter',sans-serif;color:#a992c4}
#hk-modal .hk-row b{min-width:0;text-align:right;font:700 13px/1.3 'Inter',sans-serif;color:#fff;word-break:break-word}
#hk-modal .hk-row b.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;color:#d9e4ff}
#hk-modal .hk-row b.gold{color:#bd8df3;font-size:15px}
#hk-modal .hk-acts{display:grid;gap:10px}
#hk-modal .hk-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:50px;border-radius:15px;font:800 13px/1 'Inter',sans-serif;letter-spacing:.08em}
#hk-modal .hk-btn svg{width:18px;height:18px;display:block}
#hk-modal .hk-btn.gold{color:#140129;background:linear-gradient(145deg,#c092f5,#823ed0);box-shadow:0 10px 20px -10px rgba(178,121,243,.8)}
#hk-modal .hk-btn.ghost{color:#bb8def;background:transparent;border:1px solid rgba(178,121,243,.5)}
#hk-modal .hk-btn.dim{color:#c3d0ee;background:rgba(255,255,255,.08)}
#hk-modal .hk-btn:active,#hk-modal .hk-key button:active{transform:scale(.96)}
@keyframes hkFade{from{opacity:0}to{opacity:1}}
@keyframes hkUp{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@media (min-width:600px){#hk-modal{align-items:center}#hk-modal .hk-sheet{border-radius:28px;border-bottom:1px solid #4a2c6d}}
@media (prefers-reduced-motion:reduce){#hk-modal.on,#hk-modal .hk-sheet{animation:none!important}}

html body #page-history .hk-keybox.off{border-color:rgba(255,107,120,.4)}
html body #page-history .hk-keybox.off .hk-keytext{color:#ff9aa4;font-size:12.5px}