.space-nav { background: linear-gradient(165deg,#121b2f 0%,#0e1725 100%); }
.space-nav .nav-head { padding-inline: 4px; }
.space-nav .nav-item { gap: 12px; min-height: 48px; border-radius: 10px; }
.space-nav .nav-item svg { color: #a4afc7; }
.space-nav .nav-item.is-active { background: rgba(113,134,219,.14); border-left-color: #8394ff; }
.space-nav .nav-item.is-active svg { color: #cbd2ff; }
.space-nav .credits-card { flex-shrink: 0; margin-top: auto; padding: 14px; border-color: #2b364b; border-radius: 14px; background: linear-gradient(135deg,rgba(34,46,67,.74),rgba(18,28,43,.8)); }
.credits-label { display: flex; align-items: center; gap: 9px; font-size: 11px; color: #b5bfd1; }
.credits-symbol { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; background: rgba(255,255,255,.055); color: #e0e7fa; }
.credits-symbol svg { width: 19px; height: 19px; }
.credits-total { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin: 2px 0 12px; line-height: 1.15; }
.credits-total strong { font-size: 48px; letter-spacing: -.035em; overflow-wrap: anywhere; max-width: 100%; }
.credits-total > span { color: #b5bfd1; font-size: 13px; }
.credits-costs { gap: 8px; padding-top: 12px; margin-bottom: 14px; border-color: #293449; }
.credits-costs > span { display: flex; align-items: center; gap: 5px; white-space: nowrap; color: #d2d8e5; font-size: 11px; }
.credits-costs svg { width: 18px; height: 18px; flex: none; color: #8394ff; }
.credits-costs > span:last-child svg { color: #b08aff; }
.credits-recharge { width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid transparent; border-radius: 8px; background: linear-gradient(100deg,#2869e5,#6d3de5); color: #fff; font-weight: 700; cursor: pointer; transition: filter .15s ease,transform .15s ease; }
.credits-recharge:hover { filter: brightness(1.12); }
.credits-recharge:active { transform: translateY(1px); filter: brightness(.95); }
.space-nav .nav-foot { padding: 10px 0 0; }
.space-nav .nav-retention { display: flex; align-items: flex-start; gap: 6px; margin: 0 2px 14px; font-size: 10px; line-height: 1.5; color: #aab5c9; }
.nav-retention svg { width: 14px; height: 14px; margin-top: 1px; flex: none; }
.space-nav .account-link, .space-nav .nav-foot .sign-out { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid #2b364b; border-radius: 10px; background: rgba(255,255,255,.025); color: #d4dbe8; font: 400 14px "Atkinson Hyperlegible",sans-serif; text-align: left; }
.space-nav .account-link { margin-bottom: 8px; }
.space-nav .account-link:hover, .space-nav .nav-foot .sign-out:hover { background: rgba(255,255,255,.07); border-color: #596a88; }
.space-nav .account-link:active, .space-nav .nav-foot .sign-out:active { background: rgba(113,134,219,.16); }
.space-nav .account-link svg, .space-nav .nav-foot .sign-out svg { flex: none; color: #aab5c9; }
@media(max-height: 780px) { .space-nav .credits-card { margin-top: 28px; } }
@media(max-width: 760px) { .space-nav .credits-card { margin-top: 28px; } }