html { line-height: 1.15; }
html, body, #app { width: 100%; min-width: 320px; min-height: 100%; margin: 0; }
body { background: #f4f7f9; }
.loading { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; background: #f4f7f9; }
.loading.hidden { pointer-events: none; visibility: hidden; opacity: 0; transition: all 0.8s ease-out; }
.loading .title { margin-top: 66px; color: rgb(0 0 0 / 85%); font-size: 28px; font-weight: 600; }
.loading .loader { position: relative; width: 48px; height: 48px; }
.loading .loader::before { position: absolute; top: 60px; left: 0; width: 48px; height: 5px; content: ""; background: rgb(47 190 178 / 50%); border-radius: 50%; animation: shadow-ani 0.9s ease-in-out infinite; }
.loading .loader::after { position: absolute; inset: 0; content: ""; background: #2fbeb2; border-radius: 4px; animation: jump-ani 0.9s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes jump-ani { 0%, 100% { transform: translateY(0) rotate(0deg); } 20% { transform: translateY(-3px) rotate(18deg); } 45% { border-bottom-right-radius: 18px; transform: translateY(14px) scale(1, 0.94) rotate(42deg); } 65% { transform: translateY(6px) rotate(62deg); } 82% { transform: translateY(-1px) rotate(78deg); } }
@keyframes shadow-ani { 0%, 100% { opacity: 0.45; transform: scaleX(0.8); } 45% { opacity: 0.7; transform: scaleX(1.15); } }
@media (prefers-reduced-motion: reduce) { .loading .loader::before, .loading .loader::after { animation: none; } }