/* Team Alpha shared user-status visual system: dimensional 3D glass badge. */
.app-header > .header-right { min-width: 0; overflow: visible; perspective: 1200px; perspective-origin: 50% 50%; }
#creditWidgetCompact { position: relative !important; display: block !important; width: 130px !important; min-width: 130px !important; max-width: 130px !important; height: 44px !important; flex: 0 0 130px !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: inherit !important; font: inherit !important; text-align: left !important; appearance: none !important; -webkit-appearance: none !important; overflow: visible !important; cursor: pointer !important; perspective: 1200px !important; transform: translateZ(0); isolation: isolate; z-index: 2 !important; filter: drop-shadow(0 7px 10px rgba(0,0,0,0.22)); transition: filter 0.28s ease, transform 0.28s ease; }
#creditWidgetCompact::before { content: ""; position: absolute; inset: 5px 8px -4px; border-radius: 24px; background: radial-gradient(ellipse at 50% 0%, rgba(255,74,92,0.32), transparent 68%); filter: blur(10px); opacity: 0.58; transform: translateZ(-18px) scale(0.96); pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; }
#creditWidgetCompact:hover, #creditWidgetCompact:focus-visible { transform: translateY(-1px) translateZ(0); filter: drop-shadow(0 10px 15px rgba(0,0,0,0.3)); }
#creditWidgetCompact:hover::before, #creditWidgetCompact:focus-visible::before { opacity: 0.9; transform: translateZ(-18px) scale(1.04); }
#creditWidgetCompact:focus-visible { outline: 2px solid #00E676 !important; outline-offset: 4px; border-radius: 30px; }
#creditWidgetCompact .cardm-compact-inner { position: relative !important; display: block !important; width: 100% !important; height: 100% !important; transform-style: preserve-3d !important; transform: rotateX(0.001deg) rotateY(0deg); transition: transform 0.78s cubic-bezier(0.22,0.78,0.18,1.08) !important; will-change: transform; }
#creditWidgetCompact.is-flipped .cardm-compact-inner { transform: rotateX(0deg) rotateY(180deg) !important; }
#creditWidgetCompact .card-face-compact { position: absolute !important; inset: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; width: 100% !important; height: 100% !important; min-width: 0 !important; padding: 0 10px !important; box-sizing: border-box !important; border-radius: 30px !important; backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important; overflow: hidden !important; white-space: nowrap !important; user-select: none !important; isolation: isolate; transform-style: preserve-3d; box-shadow: inset 0 1px 0 rgba(255,255,255,0.38), inset 0 -7px 14px rgba(0,0,0,0.18), 0 1px 0 rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.24) !important; }
#creditWidgetCompact .card-face-compact::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(118deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.07) 26%, transparent 46%, rgba(255,255,255,0.08) 72%, transparent 100%); opacity: 0.75; transform: translateX(-72%); transition: transform 1.05s cubic-bezier(0.2,0.7,0.2,1), opacity 0.4s ease; }
#creditWidgetCompact:hover .card-face-compact::before, #creditWidgetCompact:focus-visible .card-face-compact::before { transform: translateX(72%); opacity: 1; }
#creditWidgetCompact .card-face-compact::after { content: ""; position: absolute; width: 38px; height: 38px; right: -8px; top: -18px; border-radius: 50%; background: rgba(255,255,255,0.22); filter: blur(2px); pointer-events: none; transform: rotate(22deg); }
#creditWidgetCompact .card-front-compact { background: linear-gradient(135deg, #ff5b57 0%, #ee4540 36%, #c72c41 100%) !important; color: #fff !important; z-index: 2 !important; transform: rotateY(0deg) translateZ(0.5px); }
#creditWidgetCompact .card-back-compact { transform: rotateY(180deg) translateZ(0.5px) !important; background: linear-gradient(135deg, #243449 0%, #151d2a 42%, #0b111b 100%) !important; color: #fff !important; border-color: rgba(0,230,118,0.72) !important; z-index: 1 !important; }
#creditWidgetCompact .card-back-compact::after { background: rgba(0,230,118,0.22); }
#creditWidgetCompact .status-face-content { position: relative; z-index: 2; display: flex !important; align-items: center !important; justify-content: center !important; min-width: 0 !important; max-width: 100% !important; gap: 6px !important; transform: translateZ(12px); text-shadow: 0 1px 2px rgba(0,0,0,0.28); }
#creditWidgetCompact .status-face-icon { color: #ffe7a3 !important; filter: drop-shadow(0 0 4px rgba(255,225,125,0.55)); }
#creditWidgetCompact .status-face-label, #creditWidgetCompact .status-face-value, #creditWidgetCompact .status-face-meta { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
#creditWidgetCompact .status-face-label { font-size: 0.68rem !important; font-weight: 900 !important; letter-spacing: 0.65px !important; }
#creditWidgetCompact .status-face-value { color: #63f6a1 !important; font-family: 'JetBrains Mono', monospace !important; font-size: 0.75rem !important; font-weight: 900 !important; }
#creditWidgetCompact .status-face-meta { color: rgba(255,255,255,0.82) !important; font-size: 0.58rem !important; font-weight: 800 !important; }
#creditWidgetCompact .status-flip-hint { flex: 0 0 auto; color: rgba(255,255,255,0.86) !important; font-size: 0.72rem !important; line-height: 1; transform: translateZ(13px); transition: transform 0.45s ease; }
#creditWidgetCompact:hover .status-flip-hint, #creditWidgetCompact:focus-visible .status-flip-hint { transform: translateZ(13px) rotate(180deg); }
body.light #creditWidgetCompact .card-front-compact { background: linear-gradient(135deg, #ff5b57 0%, #ee4540 36%, #c72c41 100%) !important; color: #fff !important; }
body.light #creditWidgetCompact .card-back-compact { background: linear-gradient(135deg, #ffffff 0%, #eef3f8 100%) !important; color: #182230 !important; border-color: rgba(0,120,70,0.38) !important; }
body.light #creditWidgetCompact .status-face-meta { color: rgba(24,34,48,0.72) !important; }
body.light #creditWidgetCompact .status-flip-hint { color: rgba(24,34,48,0.72) !important; }
@media (max-width: 768px) { #creditWidgetCompact { width: 100px !important; min-width: 100px !important; max-width: 100px !important; height: 36px !important; flex-basis: 100px !important; } #creditWidgetCompact .card-face-compact { gap: 4px !important; padding: 0 7px !important; } #creditWidgetCompact .status-face-content { gap: 4px !important; transform: translateZ(10px); } #creditWidgetCompact .status-face-label { font-size: 0.61rem !important; letter-spacing: 0.34px !important; } #creditWidgetCompact .status-face-value { font-size: 0.68rem !important; } #creditWidgetCompact .status-face-meta { font-size: 0.52rem !important; } #creditWidgetCompact .status-face-icon, #creditWidgetCompact .status-flip-hint { font-size: 0.6rem !important; } #creditWidgetCompact .status-flip-hint { transform: translateZ(11px); } }
@media (prefers-reduced-motion: reduce) { #creditWidgetCompact, #creditWidgetCompact::before, #creditWidgetCompact .cardm-compact-inner, #creditWidgetCompact .card-face-compact::before, #creditWidgetCompact .status-flip-hint { transition: none !important; } #creditWidgetCompact:hover, #creditWidgetCompact:focus-visible { transform: none; } }
/* Full credit value display: allow the mobile header pill to carry the complete balance. */
#creditWidgetCompact .status-face-value,
#creditWidgetCompact .status-face-meta { overflow: visible !important; text-overflow: clip !important; }
#creditWidgetCompact .status-face-value { flex: 0 0 auto !important; max-width: none !important; letter-spacing: -0.02em !important; }
#creditWidgetCompact .status-face-meta { flex: 0 0 auto !important; max-width: none !important; }
@media (min-width: 769px) {
    #creditWidgetCompact { width: 156px !important; min-width: 156px !important; max-width: 156px !important; flex-basis: 156px !important; }
    #creditWidgetCompact .card-face-compact { padding-left: 12px !important; padding-right: 12px !important; }
}
@media (max-width: 768px) {
    .app-header > .header-right, .app-header .header-right { flex: 0 0 148px !important; width: 148px !important; min-width: 148px !important; max-width: 148px !important; }
    #creditWidgetCompact { width: 148px !important; min-width: 148px !important; max-width: 148px !important; flex-basis: 148px !important; }
    #creditWidgetCompact .card-face-compact { padding-left: 9px !important; padding-right: 9px !important; }
    #creditWidgetCompact .status-face-value { font-size: 0.66rem !important; }
    #creditWidgetCompact .status-face-meta { font-size: 0.55rem !important; }
}
@media (max-width: 390px) {
    .app-header { padding-left: 0.7rem !important; padding-right: 0.7rem !important; }
    .app-header > .header-right, .app-header .header-right { flex-basis: 142px !important; width: 142px !important; min-width: 142px !important; max-width: 142px !important; }
    #creditWidgetCompact { width: 142px !important; min-width: 142px !important; max-width: 142px !important; flex-basis: 142px !important; }
    #creditWidgetCompact .card-face-compact { padding-left: 7px !important; padding-right: 7px !important; gap: 3px !important; }
    #creditWidgetCompact .status-face-content { gap: 3px !important; }
    #creditWidgetCompact .status-face-value { font-size: 0.62rem !important; }
    #creditWidgetCompact .status-face-meta { font-size: 0.51rem !important; }
}
@media (max-width: 340px) {
    .app-header > .header-right, .app-header .header-right, #creditWidgetCompact { width: 136px !important; min-width: 136px !important; max-width: 136px !important; flex-basis: 136px !important; }
    #creditWidgetCompact .status-face-value { font-size: 0.59rem !important; }
    #creditWidgetCompact .status-face-meta { font-size: 0.48rem !important; }
}
#creditWidgetCompact .card-front-compact .status-face-content, #creditWidgetCompact .card-back-compact .status-face-content { width: 100% !important; max-width: 100% !important; }
#creditWidgetCompact .card-back-compact .status-face-content { justify-content: space-between !important; }
#creditWidgetCompact .card-back-compact .status-flip-hint { margin-left: auto !important; }