html,body{margin:0;font-family:Inter,"Segoe UI",sans-serif;background:#f5f7fb}#app{min-height:100vh}
.metric-card{border:1px solid #e6eaf0;min-height:108px}.hero-card{color:white;background:linear-gradient(120deg,#12395b,#1769aa 60%,#00a896)}
.login-shell{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 15% 15%,#d8f3ef,transparent 35%),linear-gradient(145deg,#eef5fb,#dbe8f3)}
.login-card{width:min(440px,100%);border-radius:20px!important}.mud-table-container{border-radius:10px}
.startup-loader {
    min-height: 100vh;
    display: grid;
    place-items: center;
}

.loader {
    display: block;
    font-size: 48px;
    color: #1769aa;
    width: 1em;
    height: 1em;
    box-sizing: border-box;
    background-color: currentcolor;
    position: relative;
    border-radius: 50%;
    transform: rotateX(-60deg) perspective(1000px);
}

.loader::before,
.loader::after {
    content: '';
    display: block;
    position: absolute;
    box-sizing: border-box;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    animation: flowerFlow 1s ease-out infinite;
}

.loader::after {
    animation-delay: .4s;
}

@keyframes flowerFlow {
    0% {
        opacity: 1;
        transform: rotate(0deg);
        box-shadow: 0 0 0 -.5em currentcolor,
        0 0 0 -.5em currentcolor,
        0 0 0 -.5em currentcolor,
        0 0 0 -.5em currentcolor,
        0 0 0 -.5em currentcolor,
        0 0 0 -.5em currentcolor,
        0 0 0 -.5em currentcolor,
        0 0 0 -.5em currentcolor;
    }
    100% {
        opacity: 0;
        transform: rotate(180deg);
        box-shadow: -1em -1em 0 -.35em currentcolor,
        0 -1.5em 0 -.35em currentcolor,
        1em -1em 0 -.35em currentcolor,
        -1.5em 0 0 -.35em currentcolor,
        1.5em 0 0 -.35em currentcolor,
        -1em 1em 0 -.35em currentcolor,
        0 1.5em 0 -.35em currentcolor,
        1em 1em 0 -.35em currentcolor;
    }
}