/* ========== Toast 容器 ========== */
 .toast-container {
     position: fixed;
     top: 60px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 9999;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 16px;
     pointer-events: none;
 }

 /* ========== 单个 Toast ========== */
 .toast-item {
     display: inline-flex;
     align-items: center;
     background: #fff;
     color: #303133;
     padding: 18px 32px;
     border-radius: 10px;
     font-size: 17px;
     font-weight: 500;
     line-height: 1.5;
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15),
         0 2px 6px rgba(0, 0, 0, 0.08);
     max-width: 80vw;
     width: auto;
     pointer-events: auto;
     opacity: 0;
     transform: translateY(-30px) scale(0.95);
     transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
         transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
     white-space: nowrap;
 }

 .toast-item .toast-text {
     white-space: normal;
     word-break: break-word;
 }

 .toast-item.show {
     opacity: 1;
     transform: translateY(0) scale(1);
 }

 .toast-item.hide {
     opacity: 0;
     transform: translateY(-30px) scale(0.95);
 }

 /* ========== 图标 ========== */
 .toast-icon {
     flex-shrink: 0;
     width: 26px;
     height: 26px;
     margin-right: 14px;
     border-radius: 50%;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     font-size: 16px;
     font-weight: bold;
     line-height: 1;
 }

 .toast-icon.success {
     background: #52c41a;
 }

 .toast-icon.error {
     background: #ff4d4f;
 }

 .toast-icon.warning {
     background: #faad14;
 }

 .toast-icon.info {
     background: #909399;
 }

 /* ========== Loading 图标：旋转圆环 ========== */
 .toast-icon.loading {
     background: transparent;
     border: 3px solid #e4e7ed;
     border-top-color: #409eff;
     border-radius: 50%;
     animation: toast-spin 0.8s linear infinite;
 }

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

 /* ========== 演示按钮 ========== */
 .demo-btns {
     padding: 40px;
     text-align: center;
 }

 .demo-btns button {
     padding: 10px 20px;
     margin: 5px;
     border: 1px solid #ddd;
     background: #fff;
     border-radius: 6px;
     cursor: pointer;
     font-size: 14px;
 }

 .demo-btns button:hover {
     border-color: #409eff;
     color: #409eff;
 }

 /* ========== 移动端适配 ========== */
 @media screen and (max-width: 768px) {
     .toast-container {
         top: 20px;
         width: auto;
         max-width: 90vw;
         gap: 10px;
     }

     .toast-item {
         padding: 12px 18px;
         /* 内边距缩小 */
         font-size: 14px;
         /* 字号缩小 */
         border-radius: 8px;
         max-width: 90vw;
         white-space: nowrap;
         /* 短文字不换行 */
     }

     /* 文字超过容器宽度时才换行 */
     .toast-item .toast-text {
         white-space: nowrap;
     }

     .toast-icon {
         width: 20px;
         /* 图标缩小 */
         height: 20px;
         margin-right: 10px;
         font-size: 13px;
     }

     .toast-icon.loading {
         border-width: 2px;
     }
 }

 /* 更小的屏幕（超窄设备） */
 @media screen and (max-width: 360px) {
     .toast-item {
         padding: 10px 14px;
         font-size: 13px;
     }
 }