:root {
    color-scheme: light;
    --app-page-bg: #eef5f1;
    --app-surface: #ffffff;
    --app-ink: #122033;
    --app-muted: #667085;
    --app-line: #d7e5df;
    --app-brand: #0f766e;
    --app-brand-strong: #0b5f59;
    --app-brand-soft: #e4f4ef;
    --app-danger: #dc2626;
    --app-radius-sm: .75rem;
    --app-radius-md: 1rem;
    --app-radius-lg: 1.35rem;
    --app-shadow: 0 18px 48px rgba(18, 32, 51, .10);
    --app-font: "MiSans", "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* {
    box-sizing: border-box;
}

body {
    color: var(--app-ink);
    font-family: var(--app-font);
}

a {
    text-decoration: none;
}

.btn-primary {
    background-color: var(--app-brand);
    border-color: var(--app-brand);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--app-brand-strong);
    border-color: var(--app-brand-strong);
}

:where(a, button, input, select, textarea):focus-visible {
    outline: 3px solid rgba(15, 118, 110, .28);
    outline-offset: 2px;
}

.app-toast {
    background: rgba(18, 32, 51, .94);
    border-radius: var(--app-radius-sm);
    bottom: 1rem;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .24);
    color: #fff;
    font-size: .9rem;
    left: 50%;
    max-width: calc(100vw - 2rem);
    opacity: 0;
    padding: .7rem .95rem;
    pointer-events: none;
    position: fixed;
    transform: translate(-50%, 1rem);
    transition: opacity .18s ease, transform .18s ease;
    z-index: 1080;
}

.app-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.app-toast.is-error {
    background: var(--app-danger);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}