/* ==========================================
   全局通用弹窗样式 (TSPCN 科技风)
   ========================================== */
.tspcn-modal-overlay {
    position: fixed; inset: 0; 
    background: rgba(0,0,0,.7); 
    z-index: 99999; /* 保证最高层级 */
    display: none; 
    align-items: center; 
    justify-content: center; 
    backdrop-filter: blur(4px);
    padding: 20px;
    box-sizing: border-box;
}
.tspcn-modal-overlay.show { display: flex; animation: tspcnFadeIn 0.2s ease; }

.tspcn-modal-content {
    background: #0d1a30; 
    border: 1px solid rgba(100,180,255,.3); 
    border-radius: 14px; 
    width: 100%; 
    max-width: 500px; 
    max-height: 85vh; 
    display: flex; 
    flex-direction: column; 
    box-shadow: 0 10px 40px rgba(0,0,0,.6), 0 0 20px rgba(45,143,213,.15);
    animation: tspcnSlideUp 0.25s ease;
    overflow: hidden;
}

.tspcn-modal-header {
    padding: 16px 20px; 
    border-bottom: 1px solid rgba(100,180,255,.15); 
    font-size: 16px; 
    font-weight: 700; 
    color: #e6f0fa;
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}
.tspcn-modal-close {
    cursor: pointer; 
    color: #8ba9c8; 
    font-size: 22px; 
    line-height: 1; 
    transition: .2s;
    background: none; border: none; padding: 0;
}
.tspcn-modal-close:hover { color: #ff9d8c; transform: scale(1.1); }

.tspcn-modal-body {
    padding: 20px; 
    overflow-y: auto; 
    line-height: 1.8; 
    color: #b8d5f0;
    font-size: 14px;
}

.tspcn-modal-footer {
    padding: 12px 20px 20px; 
    display: flex; 
    gap: 12px; 
    justify-content: flex-end;
    border-top: 1px solid rgba(100,180,255,.1);
}

.tspcn-modal-btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: .25s;
    border: 1px solid transparent;
}
.tspcn-modal-btn.btn-cancel {
    background: rgba(15,30,55,.6); 
    border-color: rgba(100,180,255,.25); 
    color: #8ba9c8;
}
.tspcn-modal-btn.btn-cancel:hover {
    background: rgba(45,143,213,.15); 
    color: #78c8ff;
}
.tspcn-modal-btn.btn-primary {
    background: linear-gradient(135deg, #1e6bb8, #2d8fd5); 
    color: #fff;
    box-shadow: 0 4px 12px rgba(45,143,213,.4);
}
.tspcn-modal-btn.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(45,143,213,.6);
}
/* 追加在 global-modal.css 底部 */
.tspcn-modal-btn.btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626); 
    color: #fff;
    box-shadow: 0 4px 12px rgba(239,68,68,.4);
}
.tspcn-modal-btn.btn-danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(239,68,68,.6);
}
/* === 追加：品牌与状态图标 === */
.tspcn-modal-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tspcn-modal-icon {
    font-size: 20px;
    line-height: 1;
}
/* 品牌前缀小字 */
/* 替换原有的 .tspcn-modal-brand */
.tspcn-modal-brand {
    font-size: 16px; /* 调大一点，更有视觉冲击力 */
    font-style: italic; /* 斜体 */
    font-weight: 900; /* 特粗 */
    letter-spacing: 1.5px;
    /* 白到浅蓝的渐变 */
    background: linear-gradient(90deg, #ffffff 0%, #78c8ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* 使用 drop-shadow 实现文字外发光（比 text-shadow 兼容性更好） */
    filter: drop-shadow(0 0 8px rgba(120, 200, 255, 0.6)); 
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
    transform: translateY(-1px); /* 稍微往上提一点点，对齐更完美 */
}

/* 根据不同的 type 改变弹窗边框和标题颜色 */
.tspcn-modal-content[data-type="success"] { border-color: rgba(74,222,128,.4); box-shadow: 0 10px 40px rgba(0,0,0,.6), 0 0 20px rgba(74,222,128,.1); }
.tspcn-modal-content[data-type="success"] .tspcn-modal-title { color: #4ade80; }

.tspcn-modal-content[data-type="warning"] { border-color: rgba(251,191,36,.4); box-shadow: 0 10px 40px rgba(0,0,0,.6), 0 0 20px rgba(251,191,36,.1); }
.tspcn-modal-content[data-type="warning"] .tspcn-modal-title { color: #fbbf24; }

.tspcn-modal-content[data-type="error"] { border-color: rgba(255,100,80,.4); box-shadow: 0 10px 40px rgba(0,0,0,.6), 0 0 20px rgba(255,100,80,.1); }
.tspcn-modal-content[data-type="error"] .tspcn-modal-title { color: #ff9d8c; }

.tspcn-modal-content[data-type="info"] { border-color: rgba(100,180,255,.4); box-shadow: 0 10px 40px rgba(0,0,0,.6), 0 0 20px rgba(100,180,255,.1); }
.tspcn-modal-content[data-type="info"] .tspcn-modal-title { color: #78c8ff; }

/* 富文本排版 */
.tspcn-modal-body .highlight { color: #78c8ff; font-weight: 700; margin: 0 2px; }
.tspcn-modal-body .tips-box {
    margin-top: 12px; padding: 10px 14px; background: rgba(45,143,213,.1);
    border-left: 3px solid #78c8ff; border-radius: 4px; font-size: 13px; color: #8ba9c8;
}
@keyframes tspcnFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes tspcnSlideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* 移动端适配 */
@media (max-width: 480px) {
    /* 1. 将底部对齐改为顶部对齐，并留出一定的安全距离（避免贴死状态栏） */
    .tspcn-modal-overlay { 
        padding: 10vh 16px 20px; /* 距离顶部10%，左右留16px边距 */
        align-items: flex-start; /* 强制靠上 */
    }
    
    /* 2. 移动端卡片样式：保持四周圆角，宽度自适应 */
    .tspcn-modal-content { 
        max-width: 100%; 
        border-radius: 16px; /* 不再需要只保留上半部分圆角 */
        animation: tspcnSlideDownMobile 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1); /* 从上方滑出 */
        box-shadow: 0 10px 40px rgba(0,0,0,.8), 0 0 20px rgba(45,143,213,.2); 
    }
    
    /* 按钮垂直排列 */
    .tspcn-modal-footer { 
        flex-direction: column; 
    }
    .tspcn-modal-btn { 
        width: 100%; 
    }

    /* 3. 新增：从顶部滑落的动画 */
    @keyframes tspcnSlideDownMobile { 
        from { transform: translateY(-50px); opacity: 0; } 
        to { transform: translateY(0); opacity: 1; } 
    }
}