.modal-root {
    position: fixed;
    inset: 0;
    z-index: 15;
    display: grid;
    place-items: end center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.4);
}

.modal-root[hidden] {
    display: none;
}

.toast-root {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + 28px);
    z-index: 30;
    display: grid;
    gap: 8px;
    pointer-events: none;
}

.toast {
    width: min(100%, 420px);
    margin: 0 auto;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--glass-fallback-bg);
    box-shadow: 0 18px 42px var(--shadow);
}