html {
    scroll-behavior: smooth;
    overscroll-behavior-y: none;
}

body {
    -webkit-tap-highlight-color: transparent;
}

button,
nav a,
.mu-tabbar,
.mu-tabbar * {
    -webkit-user-select: none;
    user-select: none;
}

.pb-safe {
    padding-bottom: env(safe-area-inset-bottom, 12px);
}

.pt-safe {
    padding-top: env(safe-area-inset-top, 0px);
}

@media (display-mode: standalone) {
    header.mu-public-header,
    header.mu-portal-header {
        padding-top: env(safe-area-inset-top, 0px);
    }
}

.card {
    border-radius: 1.5rem;
    border: 1px solid rgb(226 232 240 / 0.7);
    background: #fff;
    box-shadow: 0 4px 20px -4px rgba(15, 23, 42, 0.05);
}

.card-lift,
a.card,
article.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

a.card:hover,
article.card:hover,
.card-lift:hover {
    transform: translateY(-4px);
    border-color: rgb(20 184 166 / 0.35);
    box-shadow: 0 12px 30px -6px rgba(15, 23, 42, 0.08);
}

.btn,
.btn-primary,
.btn-outline {
    transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.btn:active,
.btn-primary:active,
.btn-outline:active,
button:active {
    transform: scale(0.98);
}

.mu-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.55rem;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.4;
}

.mu-chip-teal {
    background: #f0fdfa;
    color: #0f766e;
    box-shadow: inset 0 0 0 1px rgb(13 148 136 / 0.2);
}

.mu-chip-emerald {
    background: #ecfdf5;
    color: #047857;
    box-shadow: inset 0 0 0 1px rgb(5 150 105 / 0.2);
}

.mu-chip-amber {
    background: #fffbeb;
    color: #b45309;
    box-shadow: inset 0 0 0 1px rgb(217 119 6 / 0.2);
}

.mu-chip-sky {
    background: #f0f9ff;
    color: #0369a1;
    box-shadow: inset 0 0 0 1px rgb(2 132 199 / 0.2);
}

.mu-chip-slate {
    background: rgb(241 245 249 / 0.85);
    color: #475569;
}

.mu-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 1rem;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    color: #0f766e;
    font-weight: 900;
    box-shadow: inset 0 1px 2px rgb(15 23 42 / 0.04);
}

@keyframes mu-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.mu-skeleton {
    background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 45%, #f1f5f9 100%);
    background-size: 200% 100%;
    animation: mu-shimmer 1.4s ease infinite;
}

@media (prefers-reduced-motion: reduce) {
    a.card:hover,
    article.card:hover,
    .card-lift:hover {
        transform: none;
    }
    .mu-skeleton { animation: none; }
}