@import 'tailwindcss';

@layer base {
    :root {
        --mobile-design-width: 390;
        --mobile-design-height: 844;
        --mobile-scale: min(calc(100vw / var(--mobile-design-width)), calc(100dvh / var(--mobile-design-height)));
        --mobile-font-size: clamp(13px, calc(16px * var(--mobile-scale)), 18px);
        --mobile-shell-max-width: min(100vw, 28rem);
        --mobile-header-offset: calc(4.15rem + env(safe-area-inset-top));
        --mobile-footer-offset: calc(6.25rem + env(safe-area-inset-bottom));
        --mobile-icon-sm: clamp(1rem, calc(0.85rem + 0.55vw), 1.25rem);
        --mobile-icon-md: clamp(1.25rem, calc(1rem + 0.9vw), 1.75rem);
        --mobile-icon-lg: clamp(1.5rem, calc(1.15rem + 1.4vw), 2.25rem);
        --mobile-icon-xl: clamp(2.75rem, calc(2rem + 3vw), 4.25rem);
        --mobile-avatar-size: clamp(2.25rem, calc(1.8rem + 1.8vw), 3rem);
    }

    html {
        font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        font-size: var(--mobile-font-size);
        -webkit-text-size-adjust: 100%;
    }

    body {
        min-height: 100dvh;
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    @media (max-aspect-ratio: 10/19) {
        :root {
            --mobile-font-size: clamp(12px, 3.5vw, 16px);
        }
    }

    @media (min-aspect-ratio: 10/16) {
        :root {
            --mobile-font-size: clamp(13px, 1.75vh, 17px);
        }
    }
}

.mobile-shell-frame {
    width: var(--mobile-shell-max-width);
}

.mobile-icon-sm {
    width: var(--mobile-icon-sm);
    height: var(--mobile-icon-sm);
}

.mobile-icon-md {
    width: var(--mobile-icon-md);
    height: var(--mobile-icon-md);
}

.mobile-icon-lg {
    width: var(--mobile-icon-lg);
    height: var(--mobile-icon-lg);
}

.mobile-icon-xl {
    width: var(--mobile-icon-xl);
    height: var(--mobile-icon-xl);
}

.mobile-avatar {
    width: var(--mobile-avatar-size);
    height: var(--mobile-avatar-size);
}

.mobile-shell-content {
    min-height: 100dvh;
    padding-top: var(--mobile-header-offset);
    padding-bottom: var(--mobile-footer-offset);
}

.mobile-nav-link {
    color: rgb(71 85 105);
}

.mobile-nav-link .mobile-nav-icon {
    background: rgb(255 255 255);
    box-shadow: inset 0 0 0 1px rgb(226 232 240);
    color: inherit;
}

.mobile-nav-link.is-active {
    color: #2E98A6;
}

.mobile-nav-link.is-active .mobile-nav-icon {
    background: rgb(236 253 245);
    box-shadow: inset 0 0 0 1px #2E98A6;
    color: #2E98A6;
}

.mobile-shell-loader {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
}

.mobile-shell-loader.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.mobile-shell-loader__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(241, 245, 249, 0.78);
    backdrop-filter: blur(10px);
}

.mobile-shell-loader__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    padding: 1.5rem 1.6rem;
    border-radius: 1.75rem;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.18);
}

.mobile-shell-loader__logo-ring {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 1.5rem;
    background: linear-gradient(135deg, rgba(0, 59, 64, 0.12), rgba(46, 152, 166, 0.2));
}

.mobile-shell-loader__logo-ring::before {
    content: '';
    position: absolute;
    inset: -0.4rem;
    border-radius: 1.85rem;
    border: 3px solid rgba(46, 152, 166, 0.18);
    border-top-color: #2E98A6;
    animation: mobile-shell-spin 850ms linear infinite;
}

.mobile-shell-loader__logo {
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    object-fit: cover;
    box-shadow: 0 8px 20px rgba(0, 59, 64, 0.18);
    animation: mobile-shell-pulse 1.1s ease-in-out infinite alternate;
}

@keyframes mobile-shell-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes mobile-shell-pulse {
    from {
        transform: scale(0.96);
    }

    to {
        transform: scale(1.04);
    }
}