/* Timelapse wallet — account credits, top-ups and activity. */
#authModal.is-account .modal__card {
  max-width: 590px;
  padding: 28px;
  border: 1px solid #303945;
  border-radius: 22px;
  background: radial-gradient(ellipse at 100% 0, #7c3aed10, transparent 42%), #111820;
  box-shadow: 0 36px 100px #0009, 0 1px 0 #ffffff08 inset;
  scrollbar-width: thin;
  scrollbar-color: #344351 transparent;
}
#authModal.is-account .modal__backdrop { background: #050911c9; backdrop-filter: blur(9px); }
#authModal.is-account .modal__close { top: 18px; right: 18px; width: 30px; height: 30px; border: 1px solid #35404c; background: #1b2430; transition: .2s; }
#authModal.is-account .modal__close:hover { color: #fff; background: #2a3544; }
.wallet-heading { padding-right: 25px; margin-bottom: 21px; }
.wallet-heading__eyebrow { display: flex; align-items: center; gap: 7px; font-size: 9px; font-weight: 700; letter-spacing: .13em; color: #8fa4b7; margin-bottom: 9px; }
.wallet-heading__eyebrow i { color: #a78bfa; font-size: 11px; }
.wallet-heading h2 { font-size: 29px; font-weight: 600; letter-spacing: -.05em; line-height: 1.2; }
.wallet-heading h2 span { color: var(--teal); }
.wallet-heading p { font-size: 11px; color: #93a5b6; margin-top: 7px; }
#accountPanel .account__head { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; padding: 13px 0; border-block: 1px solid #26313e; }
.account__avatar { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 11px; flex: 0 0 auto; color: #c4b5fd; border: 1px solid #7c3aed32; background: linear-gradient(145deg, #34254e, #1e2032); font-size: 16px; }
.account__identity { flex: 1; min-width: 0; }
#accountPanel .account__email { font-size: 11px; font-weight: 600; overflow-wrap: anywhere; word-break: normal; line-height: 1.5; }
.account__status { display: flex; align-items: baseline; gap: 5px; font-size: 9px; color: #9caebb; line-height: 1.5; margin-top: 3px; }
.account__status i { color: var(--teal); font-size: 9px; }
.account__status.is-pending i { color: var(--amber); }
#accountPanel #logoutBtn { color: #99aabd; font-size: 9px; padding: 7px; flex-shrink: 0; gap: 6px; }
#accountPanel #logoutBtn:hover { color: var(--ink); background: #1e2a36; }
#accountPanel .account__balance { position: relative; isolation: isolate; overflow: hidden; padding: 22px 24px; min-height: 172px; margin-bottom: 23px; display: flex; align-items: center; flex-wrap: nowrap; border: 1px solid #28636380; border-radius: 16px; background: radial-gradient(ellipse at 90% 55%, #18666238, transparent 62%), linear-gradient(112deg, #102b2e, #112128 68%, #211d38); box-shadow: 0 1px 0 #72f2dd0a inset; }
#accountPanel .account__balance::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; opacity: .27; background-image: linear-gradient(#60c8ba12 1px, transparent 1px), linear-gradient(90deg, #60c8ba12 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(90deg, transparent 30%, #000); }
#accountPanel .account__balance::after { content: ''; position: absolute; top: -80px; right: -70px; width: 245px; height: 245px; border: 1px solid #6bead312; border-radius: 50%; box-shadow: 0 0 0 29px #66e3d307, 0 0 0 58px #66e3d304; z-index: -1; pointer-events: none; }
.wallet-balance__copy { z-index: 1; min-width: 0; max-width: 68%; }
.wallet-balance__label { display: flex; align-items: center; gap: 7px; font-size: 9px; letter-spacing: .11em; font-weight: 600; color: #a4cec9; }
.wallet-balance__label i { color: #5eead4; font-size: 11px; }
.wallet-balance__amount { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-top: 5px; line-height: 1.1; }
#accountPanel .account__balance .wallet-balance__amount b { font-size: clamp(34px, 4vw, 50px); font-weight: 600; letter-spacing: -.06em; color: #ecfffc; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.wallet-balance__amount > span { color: #9fcac3; font-size: 13px; }
.wallet-balance__value { display: block; color: #92b3b2; font-size: 11px; margin-top: 6px; }
.wallet-balance__caption { display: flex; gap: 6px; align-items: center; font-size: 9px; color: #b3c7c5; margin-top: 14px; }
.wallet-balance__caption i { color: #a78bfa; }
.wallet-balance__tokens { position: absolute; width: 205px; height: auto; right: 8px; bottom: -3px; pointer-events: none; user-select: none; }
.wallet-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.wallet-section-head h3 { font-size: 12px; font-weight: 600; letter-spacing: -.01em; display: flex; align-items: center; gap: 7px; }
.wallet-section-head h3 > i { color: #9eafc2; font-size: 11px; }
.wallet-section-head > span { font-size: 9px; color: #8e9fb0; }
#accountPanel .account__packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
#accountPanel .pack-mini { position: relative; display: flex; flex-direction: column; gap: 0; align-items: stretch; padding: 14px; text-align: left; background: linear-gradient(150deg, #1d2935, #161f29); border: 1px solid #35424f; border-radius: 13px; color: #e8f2f6; min-width: 0; box-shadow: 0 1px 0 #ffffff04 inset; transition: border-color .2s, transform .2s, background .2s, box-shadow .2s; }
#accountPanel .pack-mini:hover { transform: translateY(-3px); border-color: #32b8aa; background: linear-gradient(150deg, #20363b, #16262c); box-shadow: 0 10px 25px #0003; }
#accountPanel .pack-mini:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
#accountPanel .pack-mini--popular { border-color: #8063b9; background: radial-gradient(ellipse at 80% 0, #7c3aed18, transparent 75%), linear-gradient(150deg, #292438, #1e202e); }
#accountPanel .pack-mini--popular:hover { border-color: #b799ff; background: linear-gradient(150deg, #342944, #242337); }
.pack-mini__top { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-height: 29px; margin-bottom: 10px; }
.pack-mini__icon { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: #5eead4; font-size: 13px; background: #2dd4bf12; border: 1px solid #2dd4bf1c; }
.pack-mini--popular .pack-mini__icon { color: #c4b5fd; background: #a78bfa12; border-color: #a78bfa25; }
.pack-mini__badge { font-size: 7px; font-weight: 600; color: #d3c4f5; letter-spacing: .01em; }
.pack-mini__name { font-size: 10px; font-weight: 500; color: #bccbd8; margin-bottom: 4px; overflow-wrap: anywhere; }
.pack-mini__quantity { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; gap: 3px; margin-bottom: 15px; }
#accountPanel .pack-mini__quantity b { color: #f0f5fb; font-size: 25px; font-weight: 600; letter-spacing: -.045em; white-space: nowrap; }
.pack-mini__quantity > span { font-size: 9px; color: #91a2b5; }
.pack-mini__bottom { display: flex; justify-content: space-between; align-items: center; gap: 4px; padding-top: 10px; border-top: 1px solid #35424f; margin-top: auto; }
.pack-mini--popular .pack-mini__bottom { border-color: #8e78b735; }
.pack-mini__price { color: #d3e7e6; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pack-mini__arrow { color: #79dacc; font-size: 9px; }
.pack-mini--popular .pack-mini__arrow { color: #bea3fa; }
.wallet-reassurance { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 7px 12px; font-size: 8px; color: #879aab; }
.wallet-reassurance > span { display: flex; gap: 5px; align-items: center; }
.wallet-reassurance i { color: #91aaa9; font-size: 8px; }
.wallet-section-head--history { margin: 23px 0 11px; }
#accountPanel .ledger { max-height: 220px; gap: 6px; scrollbar-width: thin; scrollbar-color: #344351 transparent; }
#accountPanel .ledger__row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 11px 12px; background: #0d141c; border: 1px solid #25303c; border-radius: 11px; font-size: 10px; }
.ledger__icon { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #2dd4bf1c; border-radius: 10px; color: #5edcc5; background: #19352f; font-size: 12px; }
.ledger__row:has(.neg) .ledger__icon { color: #bea7f6; border-color: #a78bfa1c; background: #29233b; }
.ledger__copy { color: #c4d1df; line-height: 1.55; overflow-wrap: anywhere; min-width: 0; }
#accountPanel .ledger__copy small { color: #7890a3; font-size: 9px; margin-top: 3px; }
#accountPanel .ledger__amount { text-align: right; font-size: 13px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
#accountPanel .ledger__amount.pos { color: #5eead4; }
#accountPanel .ledger__amount.neg { color: #c4b5fd; }
#accountPanel .ledger__amount small { color: #8194a7; font-size: 8px; font-weight: 400; margin-top: 1px; }
.ledger__state { display: flex; gap: 12px; align-items: center; padding: 20px 16px; border: 1px dashed #354252; background: #0d141c; border-radius: 12px; }
.ledger__state-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0; color: #a78bfa; background: #241f35; font-size: 14px; }
.ledger__state-copy strong { font-weight: 500; font-size: 11px; color: #cedce6; }
.ledger__state-copy p { font-size: 10px; margin-top: 4px; color: #879caf; }
.ledger__state--error .ledger__state-icon { color: #ffce7a; background: #332b21; }
@media (max-width: 560px) {
  #authModal.is-account { padding: 10px; }
  #authModal.is-account .modal__card { padding: 22px 18px; border-radius: 18px; max-height: calc(100dvh - 20px); }
  .wallet-heading h2 { font-size: 27px; }
  #accountPanel #logoutBtn span { display: none; }
  #accountPanel #logoutBtn { width: 32px; height: 32px; border: 1px solid #303c49; }
  #accountPanel .account__balance { padding: 20px; min-height: 168px; }
  .wallet-balance__tokens { width: 160px; right: -6px; bottom: 0; }
  .wallet-balance__copy { max-width: 70%; }
  #accountPanel .account__packs { gap: 7px; }
  #accountPanel .pack-mini { padding: 11px 9px; border-radius: 11px; }
  .pack-mini__top { align-items: flex-start; flex-direction: column; gap: 3px; min-height: 44px; margin-bottom: 6px; }
  .pack-mini__badge { font-size: 7px; }
  #accountPanel .pack-mini__quantity b { font-size: 22px; }
  .pack-mini__price { font-size: 11px; }
  .wallet-section-head > span { font-size: 8px; }
  #accountPanel .ledger__row { padding: 10px; gap: 8px; grid-template-columns: 28px minmax(0, 1fr) auto; }
  .ledger__icon { width: 28px; height: 28px; font-size: 11px; border-radius: 9px; }
}
@media (prefers-reduced-motion: reduce) { #accountPanel .pack-mini { transition: none; } #accountPanel .pack-mini:hover { transform: none; } }

/* Gamme de 4 packs */
#accountPanel .account__packs { grid-template-columns: repeat(2, minmax(0, 1fr)); }