/* =====================================================================
   btpenl · 统一响应式断点系统 (Unified Breakpoint System)
   断点规范:
   - xs:  < 480px  (小手机)
   - sm:  ≥ 480px  (大手机/竖屏平板)
   - md:  ≥ 768px  (横屏平板/小屏笔记本)
   - lg:  ≥ 1024px (桌面)
   - xl:  ≥ 1280px (大屏桌面)
   - 2xl: ≥ 1536px (超大屏)
   ===================================================================== */

/* 基础断点工具类 */
.hidden-xs { display: none !important; }
.hidden-sm { display: none !important; }
.hidden-md { display: none !important; }
.hidden-lg { display: none !important; }
.hidden-xl { display: none !important; }

.block-xs { display: block !important; }
.block-sm { display: block !important; }
.block-md { display: block !important; }
.block-lg { display: block !important; }
.block-xl { display: block !important; }

.flex-xs { display: flex !important; }
.flex-sm { display: flex !important; }
.flex-md { display: flex !important; }
.flex-lg { display: flex !important; }
.flex-xl { display: flex !important; }

/* ===== xs: < 480px (小手机) ===== */
@media (max-width: 479px) {
    .hidden-xs { display: none !important; }
    .block-xs { display: block !important; }
    .flex-xs { display: flex !important; }
    
    /* 容器 */
    .container-xs { padding: 0 12px; }
    
    /* 网格 */
    .grid-cols-xs-1 { grid-template-columns: 1fr !important; }
    
    /* 间距 */
    .p-xs-2 { padding: .5rem; }
    .p-xs-3 { padding: .75rem; }
    .p-xs-4 { padding: 1rem; }
    .px-xs-3 { padding-left: .75rem; padding-right: .75rem; }
    .px-xs-4 { padding-left: 1rem; padding-right: 1rem; }
    .py-xs-4 { padding-top: 1rem; padding-bottom: 1rem; }
    .mt-xs-4 { margin-top: 1rem; }
    .mb-xs-4 { margin-bottom: 1rem; }
    .gap-xs-2 { gap: .5rem; }
    .gap-xs-3 { gap: .75rem; }
    .gap-xs-4 { gap: 1rem; }
    
    /* 字号 */
    .text-xs-sm { font-size: 12px; }
    .text-xs-base { font-size: 14px; }
    .text-xs-lg { font-size: 16px; }
    .text-xs-xl { font-size: 18px; }
    .text-xs-2xl { font-size: 20px; }
    
    /* 显示/隐藏 */
    .hide-on-xs { display: none !important; }
    .show-on-xs { display: block !important; }
}

/* ===== sm: ≥ 480px (大手机/竖屏平板) ===== */
@media (min-width: 480px) {
    .hidden-sm { display: none !important; }
    .block-sm { display: block !important; }
    .flex-sm { display: flex !important; }
    
    /* 容器 */
    .container-sm { padding: 0 16px; }
    
    /* 网格 */
    .grid-cols-sm-1 { grid-template-columns: 1fr !important; }
    .grid-cols-sm-2 { grid-template-columns: repeat(2, 1fr) !important; }
    
    /* 间距 */
    .p-sm-4 { padding: 1rem; }
    .p-sm-6 { padding: 1.5rem; }
    .px-sm-4 { padding-left: 1rem; padding-right: 1rem; }
    .px-sm-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
    .py-sm-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
    .mt-sm-6 { margin-top: 1.5rem; }
    .mb-sm-6 { margin-bottom: 1.5rem; }
    .gap-sm-4 { gap: 1rem; }
    .gap-sm-6 { gap: 1.5rem; }
    
    /* 字号 */
    .text-sm-sm { font-size: 13px; }
    .text-sm-base { font-size: 15px; }
    .text-sm-lg { font-size: 18px; }
    .text-sm-xl { font-size: 20px; }
    .text-sm-2xl { font-size: 24px; }
    
    /* 显示/隐藏 */
    .hide-on-sm { display: none !important; }
    .show-on-sm { display: block !important; }
}

/* ===== md: ≥ 768px (横屏平板/小屏笔记本) ===== */
@media (min-width: 768px) {
    .hidden-md { display: none !important; }
    .block-md { display: block !important; }
    .flex-md { display: flex !important; }
    
    /* 容器 */
    .container-md { padding: 0 24px; }
    
    /* 网格 */
    .grid-cols-md-1 { grid-template-columns: 1fr !important; }
    .grid-cols-md-2 { grid-template-columns: repeat(2, 1fr) !important; }
    .grid-cols-md-3 { grid-template-columns: repeat(3, 1fr) !important; }
    .grid-cols-md-4 { grid-template-columns: repeat(4, 1fr) !important; }
    
    /* 间距 */
    .p-md-6 { padding: 1.5rem; }
    .p-md-8 { padding: 2rem; }
    .px-md-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
    .px-md-8 { padding-left: 2rem; padding-right: 2rem; }
    .py-md-8 { padding-top: 2rem; padding-bottom: 2rem; }
    .mt-md-8 { margin-top: 2rem; }
    .mb-md-8 { margin-bottom: 2rem; }
    .gap-md-6 { gap: 1.5rem; }
    .gap-md-8 { gap: 2rem; }
    
    /* 字号 */
    .text-md-sm { font-size: 13.5px; }
    .text-md-base { font-size: 15px; }
    .text-md-lg { font-size: 18px; }
    .text-md-xl { font-size: 20px; }
    .text-md-2xl { font-size: 24px; }
    .text-md-3xl { font-size: 30px; }
    
    /* 显示/隐藏 */
    .hide-on-md { display: none !important; }
    .show-on-md { display: block !important; }
}

/* ===== lg: ≥ 1024px (桌面) ===== */
@media (min-width: 1024px) {
    .hidden-lg { display: none !important; }
    .block-lg { display: block !important; }
    .flex-lg { display: flex !important; }
    
    /* 容器 */
    .container-lg { padding: 0 32px; }
    
    /* 网格 */
    .grid-cols-lg-1 { grid-template-columns: 1fr !important; }
    .grid-cols-lg-2 { grid-template-columns: repeat(2, 1fr) !important; }
    .grid-cols-lg-3 { grid-template-columns: repeat(3, 1fr) !important; }
    .grid-cols-lg-4 { grid-template-columns: repeat(4, 1fr) !important; }
    .grid-cols-lg-5 { grid-template-columns: repeat(5, 1fr) !important; }
    
    /* 间距 */
    .p-lg-8 { padding: 2rem; }
    .p-lg-10 { padding: 2.5rem; }
    .px-lg-8 { padding-left: 2rem; padding-right: 2rem; }
    .px-lg-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
    .py-lg-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    .mt-lg-10 { margin-top: 2.5rem; }
    .mb-lg-10 { margin-bottom: 2.5rem; }
    .gap-lg-8 { gap: 2rem; }
    .gap-lg-10 { gap: 2.5rem; }
    
    /* 字号 */
    .text-lg-sm { font-size: 13.5px; }
    .text-lg-base { font-size: 15px; }
    .text-lg-lg { font-size: 18px; }
    .text-lg-xl { font-size: 20px; }
    .text-lg-2xl { font-size: 24px; }
    .text-lg-3xl { font-size: 30px; }
    .text-lg-4xl { font-size: 36px; }
    
    /* 显示/隐藏 */
    .hide-on-lg { display: none !important; }
    .show-on-lg { display: block !important; }
}

/* ===== xl: ≥ 1280px (大屏桌面) ===== */
@media (min-width: 1280px) {
    .hidden-xl { display: none !important; }
    .block-xl { display: block !important; }
    .flex-xl { display: flex !important; }
    
    /* 容器 */
    .container-xl { padding: 0 40px; }
    .max-w-xl { max-width: 1200px; }
    
    /* 网格 */
    .grid-cols-xl-2 { grid-template-columns: repeat(2, 1fr) !important; }
    .grid-cols-xl-3 { grid-template-columns: repeat(3, 1fr) !important; }
    .grid-cols-xl-4 { grid-template-columns: repeat(4, 1fr) !important; }
    .grid-cols-xl-5 { grid-template-columns: repeat(5, 1fr) !important; }
    .grid-cols-xl-6 { grid-template-columns: repeat(6, 1fr) !important; }
    
    /* 间距 */
    .p-xl-10 { padding: 2.5rem; }
    .p-xl-12 { padding: 3rem; }
    .px-xl-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
    .px-xl-12 { padding-left: 3rem; padding-right: 3rem; }
    .py-xl-12 { padding-top: 3rem; padding-bottom: 3rem; }
    .gap-xl-10 { gap: 2.5rem; }
    .gap-xl-12 { gap: 3rem; }
    
    /* 字号 */
    .text-xl-sm { font-size: 14px; }
    .text-xl-base { font-size: 16px; }
    .text-xl-lg { font-size: 20px; }
    .text-xl-xl { font-size: 24px; }
    .text-xl-2xl { font-size: 28px; }
    .text-xl-3xl { font-size: 32px; }
    .text-xl-4xl { font-size: 40px; }
    
    /* 显示/隐藏 */
    .hide-on-xl { display: none !important; }
    .show-on-xl { display: block !important; }
}

/* ===== 2xl: ≥ 1536px (超大屏) ===== */
@media (min-width: 1536px) {
    /* 容器 */
    .container-2xl { padding: 0 48px; }
    .max-w-2xl { max-width: 1400px; }
    
    /* 网格 */
    .grid-cols-2xl-3 { grid-template-columns: repeat(3, 1fr) !important; }
    .grid-cols-2xl-4 { grid-template-columns: repeat(4, 1fr) !important; }
    .grid-cols-2xl-5 { grid-template-columns: repeat(5, 1fr) !important; }
    .grid-cols-2xl-6 { grid-template-columns: repeat(6, 1fr) !important; }
    
    /* 字号 */
    .text-2xl-base { font-size: 17px; }
    .text-2xl-lg { font-size: 22px; }
    .text-2xl-xl { font-size: 28px; }
    .text-2xl-2xl { font-size: 32px; }
    .text-2xl-3xl { font-size: 36px; }
    .text-2xl-4xl { font-size: 44px; }
}

/* ===== 常用响应式模式 ===== */

/* 响应式容器 */
.r-container {
    width: 100%;
    margin: 0 auto;
    padding: 0 16px;
}

@media (min-width: 768px) { .r-container { padding: 0 24px; } }
@media (min-width: 1024px) { .r-container { padding: 0 32px; max-width: 1200px; } }
@media (min-width: 1280px) { .r-container { padding: 0 40px; } }

/* 响应式网格 */
.r-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
}

@media (min-width: 480px) { .r-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .r-grid { gap: 20px; } }
@media (min-width: 1024px) { .r-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
@media (min-width: 1280px) { .r-grid { grid-template-columns: repeat(4, 1fr); } }

/* 响应式双栏 */
.r-two-col {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .r-two-col { grid-template-columns: 1fr 1fr; }
}

/* 响应式侧边栏布局 */
.r-sidebar-layout {
    display: grid;
    gap: 24px;
    grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
    .r-sidebar-layout {
        grid-template-columns: 260px 1fr;
    }
}

/* 响应式表格容器 */
.r-table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* 响应式弹性布局 */
.r-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.r-flex > * {
    flex: 1 1 auto;
    min-width: 0;
}

@media (min-width: 768px) {
    .r-flex { gap: 16px; }
    .r-flex > * { flex: 0 0 auto; }
}

/* 响应式间距 */
.r-section {
    padding: 24px 0;
}

@media (min-width: 768px) { .r-section { padding: 40px 0; } }
@media (min-width: 1024px) { .r-section { padding: 56px 0; } }

/* 响应式卡片 */
.r-card {
    background: var(--glass-card, rgba(255,255,255,.45));
    backdrop-filter: var(--blur, blur(20px));
    -webkit-backdrop-filter: var(--blur, blur(20px));
    border: 1px solid var(--stroke, rgba(255,255,255,.75));
    border-radius: var(--radius, 16px);
    padding: 16px;
    box-shadow: var(--shadow);
    transition: all .3s var(--ease);
}

@media (min-width: 768px) { .r-card { padding: 24px; } }
@media (min-width: 1024px) { .r-card { padding: 32px; } }

.r-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 28px 60px -24px rgba(40,48,66,.22);
}

/* 响应式文字 */
.r-heading {
    font-family: var(--serif);
    font-size: clamp(24px, 4vw, 36px);
    font-weight: 700;
    line-height: 1.2;
}

.r-subheading {
    font-size: clamp(14px, 2vw, 16px);
    color: var(--ink-dim);
    line-height: 1.6;
}

/* 响应式按钮组 */
.r-btn-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media (min-width: 480px) {
    .r-btn-group {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* 响应式导航 */
.r-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

@media (min-width: 768px) {
    .r-nav {
        flex-direction: row;
        gap: 6px;
    }
}

/* 响应式表单 */
.r-form {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .r-form { gap: 20px; }
    .r-form .two-col { grid-template-columns: 1fr 1fr; }
}

/* 响应式统计卡片 */
.r-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media (min-width: 768px) { .r-stats { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 1024px) { .r-stats { grid-template-columns: repeat(5, 1fr); } }

/* 工具类: 响应式隐藏 */
@media (max-width: 479px) { .hide-xs { display: none !important; } }
@media (max-width: 767px) { .hide-sm { display: none !important; } }
@media (max-width: 1023px) { .hide-md { display: none !important; } }
@media (max-width: 1279px) { .hide-lg { display: none !important; } }

/* 工具类: 响应式显示 */
@media (min-width: 480px) { .show-xs { display: none !important; } }
@media (min-width: 768px) { .show-sm { display: none !important; } }
@media (min-width: 1024px) { .show-md { display: none !important; } }
@media (min-width: 1280px) { .show-lg { display: none !important; } }