/**
 * 基础样式 - body、容器、页面标题区、面包屑等公共样式
 */

/* ===== 设计令牌 ===== */
:root {
    /* 颜色系统 */
    --color-primary: #0d1b2a;
    --color-secondary: #1e3a5f;
    --color-accent: #f5a623;

    /* 渐变（单独分类，不是纯色） */
    --gradient-bg: linear-gradient(135deg, #1a0a0a, #8b1a1a, #f5a623);

    /* 圆角 */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 14px;

    /* 过渡动画 */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.4s ease;

    /* 间距 */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 20px;

    /* 阴影 */
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.1);
    --shadow-md: 0 2px 12px rgba(0,0,0,0.15);
    --shadow-lg: 0 4px 20px rgba(0,0,0,0.2);

    /* 跨浏览器统一字体（Safari / Chrome / 微信内置浏览器） */
    --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

html {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ===== 毛玻璃效果类 ===== */
.glass-xs {
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.glass-sm {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.glass {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.glass-md {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.glass-lg {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

@media (max-width: 768px) {
    .glass,
    .glass-sm,
    .glass-md,
    .glass-lg {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

body {
    min-height: 100vh;
    background: var(--gradient-bg);
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
    color: white;
    font-family: inherit;
}

/* 跳过导航：默认隐藏，Tab 聚焦时显示（无障碍） */
.skip-nav {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.skip-nav:focus,
.skip-nav:focus-visible {
    position: fixed;
    left: 12px;
    top: 12px;
    z-index: 10000;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    padding: 10px 16px;
    border-radius: var(--radius-md);
    background: #fff;
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--shadow-lg);
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
}

/* 文章页内嵌视频：防止移动端横向溢出 */
main.container,
.container:has(.article-content) {
    overflow-x: clip;
}

.article-content {
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
}

.article-video-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0 0 16px;
    overflow: hidden;
    border-radius: var(--radius-md, 8px);
    background: #000;
}

.article-video-wrap .article-video,
.article-content video {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 70vh;
    object-fit: contain;
    box-sizing: border-box;
    border-radius: var(--radius-md, 8px);
    background: #000;
}

/* 页面标题区 */
.page-header {
    text-align: center;
    margin-bottom: 30px;
    padding: 20px 15px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg, 12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.page-header h1 {
    font-size: 2rem;
    margin-bottom: 8px;
    font-weight: 700;
    text-shadow: 0 2px 10px rgba(0, 0, 0, var(--shadow-opacity, 0.2));
}

.page-header .subtitle {
    font-size: 0.95rem;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto 12px;
    line-height: 1.5;
}

/* 面包屑导航 */
.breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.88rem;
    opacity: 0.85;
}

.breadcrumb a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: opacity var(--transition-normal, 0.3s);
}

.breadcrumb a:hover {
    opacity: 0.7;
}

.breadcrumb .sep {
    color: rgba(255, 255, 255, 0.5);
    user-select: none;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .page-header h1 {
        font-size: 1.7rem;
    }
}

@media (max-width: 480px) {
    .page-header h1 {
        font-size: 1.5rem;
    }
}

@media (max-width: 375px) {
    .page-header {
        padding: 15px 10px;
    }
    .page-header h1 {
        font-size: 1.3rem;
    }
    .page-header .subtitle {
        font-size: 0.85rem;
    }
    .breadcrumb {
        font-size: 0.8rem;
    }
}

/* ===== 弹窗样式 ===== */
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);z-index:10000;animation:fadeIn .15s ease}
.modal-overlay.hide{animation:fadeOut .15s ease forwards}
.modal-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;border-radius:12px;padding:24px 28px;max-width:420px;width:90%;box-shadow:0 16px 48px rgba(0,0,0,.2);z-index:10001;animation:modalIn .2s cubic-bezier(.34,1.56,.64,1)}
.modal-dialog.confirm-type{border-top:4px solid #1a2a6c}
.modal-dialog.alert-type{border-top:4px solid #ef4444}
.modal-icon{font-size:2.2rem;margin-bottom:14px;text-align:center}
.modal-dialog.confirm-type .modal-icon{color:#1a2a6c}
.modal-dialog.alert-type .modal-icon{color:#ef4444}
.modal-message{font-size:.92rem;color:#333;line-height:1.6;text-align:center;margin-bottom:22px}
.modal-buttons{display:flex;gap:10px;justify-content:center}
.modal-buttons .btn{padding:9px 28px;border-radius:8px;font-size:.88rem;font-weight:600;border:none;cursor:pointer;transition:all .2s}
.modal-btn-cancel{background:#f1f5f9;color:#374151}.modal-btn-cancel:hover{background:#e2e8f0}
.modal-btn-confirm{background:#1a2a6c;color:#fff}.modal-btn-confirm:hover{background:#2d4a9e}
.modal-btn-ok{background:#1a2a6c;color:#fff}.modal-btn-ok:hover{background:#2d4a9e}
.toast-box{position:fixed;top:20px;right:20px;z-index:9999999;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast-item{display:flex;align-items:center;gap:10px;padding:12px 20px;border-radius:12px;font-size:.88rem;box-shadow:0 8px 32px rgba(0,0,0,.18);pointer-events:auto;max-width:360px;animation:toastIn .3s cubic-bezier(.34,1.56,.64,1);border:1px solid transparent}
.toast-item.toast-success{background:linear-gradient(135deg,#059669,#10b981);color:#fff}
.toast-item.toast-error{background:linear-gradient(135deg,#dc2626,#ef4444);color:#fff}
.toast-item.toast-info{background:linear-gradient(135deg,#1a2a6c,#2d4a9e);color:#fff}
.toast-item.toast-out{animation:toastOut .25s ease forwards}
.toast-icon{font-size:1.1rem;flex-shrink:0}
.toast-item span{flex:1}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeOut{to{opacity:0}}
@keyframes modalIn{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes toastIn{from{transform:translateX(120%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes toastOut{to{transform:translateX(120%);opacity:0}}

/* 移动端减少 backdrop-filter 提升性能 */
@media (max-width: 768px) {
    .page-header {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* ===== 全站滚动性能 ===== */
/* 模板内联渐变背景也固定到视口，避免滚动时整页重绘 */
body {
    background-attachment: fixed !important;
    background-size: cover;
}

html {
    scroll-behavior: auto;
}

/* 大表格：视口外行跳过绘制 */
table tbody tr {
    content-visibility: auto;
    contain-intrinsic-size: auto 20px;
}

/* 长列表卡片 */
.image-grid > *,
.article-list > *,
.card-list > * {
    content-visibility: auto;
    contain-intrinsic-size: auto 120px;
}

/* 移动端关闭毛玻璃，减轻滚动合成开销 */
@media (max-width: 768px) {
    .top-navbar,
    footer,
    [style*="backdrop-filter"] {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* iOS 上 fixed 背景易卡顿 */
    body {
        background-attachment: scroll !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}