:root {
    color: white;
}
body {
    background: var(--bg-gradient-primary);
    min-height: 100vh;
}
body > container *:not([on]) {
    display: none;
}
container {
    animation: fade-in 0.5s ease-in-out both;
}
   /* --- Footer Tabbar --- */
body:has(.loading, x-login) footer {
    display: none;
}
footer {
    position: fixed;
    --bottom: calc(20px + 0.5 * env(safe-area-inset-bottom));
    z-index: 20;
    width: 100vw;
    display: flex;
    justify-content: center;
    --scale: 0;
    animation: come-up 0.8s 0.25s both  cubic-bezier(.34,1.56,.64,1);
    /* animation-delay: 1s; */
}
.bar{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:6px;
    background: #051634ab;
    backdrop-filter: blur(8px) saturate(120%);
    border-top:1px solid var(--border);
    border-radius: var(--height, 100px);
    box-shadow: 2px 2px 6px #00000042;
}
.iconbtn{display:grid;place-items:center;gap: 2px;padding: 10px 0;border-radius: 34px;color:#c5cfe6;font-size: var(--fs-xxs);transition: var(--duration, 0.25s);border: solid 1px transparent;width: min(15vw, 70px);}

.iconbtn.is-active{ color:#fff; background: linear-gradient(180deg, rgba(70,166,255,.2), rgba(70,166,255,.05)); border:1px solid rgba(70,166,255,.35); box-shadow: 0 6px 16px rgba(70,166,255,.35); }
.iconbtn img {
    width: 30px;
    transition: 0.2s;
    border-radius: 20%;
}
.intro {
    grid-column: 1 / -1;
}
.iconbtn:not(.is-active) {
    filter: opacity(0.8) grayscale(0.8);
}
.iconbtn.is-active img{
    scale: 1.4;
}
.iconbtn span:nth-child(2) {
    font-family: Bottom, sans-serif;
    font-size: 1.0rem;
    display: none;
} 
.loading {
    display: block!important;
    position: fixed;
    width: 30vw;
    aspect-ratio: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* filter: grayscale(0.5) opacity(0.3); */
    animation: fade-in 2s ease-in-out both infinite alternate;
}
qrcode {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background: #29406512;
    z-index: 100;
    backdrop-filter: blur(30px);
    animation: fade-in 0.5s both;
}
qrcode:empty {
    display: none;
}
qrcode > div {
    padding: 10px;
    border-radius: 10px;
    max-width: 90vw;
    font-size: 0.95rem;
    line-height: 1.5rem;
    color: #eb4d4b;
    font-weight: 900;
    font-family: serif;
}
qrcode > #code {
    width: 65vw;
    background: #ffffff;
}
qrcode text {
    color: white;
    font-size: 3.5vw;
}

img.ok {
    --duration: 2.0s;
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    animation: fade-in-out var(--duration) both;
    --width: 25vw;
    width: var(--width);
    height: var(--width);
} 
img.close {
    position: fixed;
    aspect-ratio: 1;
    top: calc(var(--safe-top, 0px) + 4vw);
    right: 4vw;
    width: 70px;
    cursor: pointer;
    border-radius: 50%;
    background: #ffffff08;
    padding: 10px;
}