/* 容器定位：依然在顶部居中 */
#toast-container {
    position: fixed; top: 0px; left: 50%; transform: translateX(-50%);
    z-index: 20000; display: flex; flex-direction: column; align-items: center;
    gap: 8px; pointer-events: none; width: 100%;
}

/* 放大弹出的弹性动画 (复刻注销弹窗感) */
@keyframes toast-pop-in {
    0% { transform: scale(0.6); opacity: 0; }
    60% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* 丝滑的离场动画 */
.toast-pop-out {
    opacity: 0 !important;
    transform: scale(0.8) !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 1, 1);
}
html, body {
    /* 确保容器高度覆盖整个物理屏幕 */
    height: 100%!important;
    min-height: 100vh!important;
    margin: 0!important;
    padding: 0!important;
    /* 重点：背景色要设为和你页面底部一致的颜色，防止系统默认黑底 */
    background-color: #ffffff!important; 
}
/* --- 1. 整体 UI 比例放大 --- */
html {
    /* 假设你用 rem 布局，将基准字号调大，所有基于 rem 的元素都会自动放大 */
    font-size: 16px; /* 默认通常是 16px，可以尝试改为 18px */
    background: #FFF!important;
  
}
.icon-svg {
    width: 26px;
    height: 26px;
    /* 核心：强制 1:1 比例，防止被父级容器拉伸 */
    aspect-ratio: 1 / 1; 
    /* 确保 SVG 内容在容器内居中且不溢出 */
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0; /* 如果在 Flex 布局中，防止被挤压 */
}

/* 针对 WebClip 全屏模式下的头部适配 */
.header-container {
    /* 1. 核心：使用 env() 函数获取刘海屏的高度 */
    /* constant 是为了兼容 iOS 11.2 之前的版本，env 是标准写法 */
    /*
    padding-top: constant(safe-area-inset-top); 
    padding-top: env(safe-area-inset-top);
    */
    padding-top: calc(constant(safe-area-inset-top) - 15px);
    padding-top: calc(env(safe-area-inset-top) - 15px);
    /* 2. 在安全区基础上增加原本的业务边距（可选） */
    /* 如果原本头部有 20px 间距，建议用 calc 累加 */
    /* padding-top: calc(env(safe-area-inset-top) + 20px); */
    /* 3. 确保背景延伸，但内容不被挡 */
}

.flex-ios-clip-nav{
    top: constant(safe-area-inset-top)!important;
    top: env(safe-area-inset-top)!important;
}