/**
 * 纯白液态玻璃·iOS原生通用UI设计体系 V2.3
 * 天青渐变·终极丝滑版
 * 沐星授权服务中心
 */

/* ========== CSS变量定义 ========== */
:root {
    /* 天青渐变基底 */
    --mx-bg-gradient: linear-gradient(180deg, #F8FBFF 0%, #FFFFFF 50%, #FFFFFF 100%);
    --mx-flow-gradient: linear-gradient(135deg, #F8FBFF 0%, #FFFFFF 50%, #F0F7FF 100%);
    
    /* 毛玻璃底色 */
    --mx-glass-bg: rgba(248, 251, 255, 0.88);
    --mx-glass-bg-heavy: rgba(252, 254, 255, 0.95);
    --mx-glass-bg-light: rgba(214, 233, 255, 0.06);
    
    /* 天青主色 */
    --mx-accent-color: #5B9BD5;
    --mx-accent-light: rgba(91, 155, 213, 0.12);
    --mx-accent-lighter: rgba(91, 155, 213, 0.06);
    --mx-accent-gradient: linear-gradient(135deg, #E6F2FF 0%, #F8FCFF 100%);
    --mx-accent-glow: radial-gradient(circle, rgba(214, 233, 255, 0.05) 0%, transparent 75%);
    
    /* 卡片渐变 */
    --mx-card-bg: linear-gradient(135deg, #F8FBFF 0%, #FFFFFF 100%);
    --mx-card-hover: linear-gradient(135deg, #F0F7FF 0%, #FDFEFF 100%);
    --mx-card-active: linear-gradient(135deg, #E6F2FF 0%, #F8FCFF 100%);
    
    /* 按钮渐变 */
    --mx-btn-primary-bg: linear-gradient(135deg, #F0F7FF 0%, #FDFEFF 100%);
    --mx-btn-hover-bg: linear-gradient(135deg, #E6F2FF 0%, #F8FCFF 100%);
    --mx-btn-active-bg: linear-gradient(135deg, #D6E9FF 0%, #F0F7FF 100%);
    
    /* 输入框 */
    --mx-input-bg: #FCFEFF;
    --mx-input-border: rgba(214, 233, 255, 0.25);
    --mx-input-focus-border: rgba(91, 155, 213, 0.4);
    --mx-input-focus-glow: 0 0 0 3px rgba(91, 155, 213, 0.08);
    
    /* 文字颜色 */
    --mx-text-primary: #1D1D1F;
    --mx-text-secondary: #8A8A8E;
    --mx-text-tertiary: #AEAEB2;
    --mx-text-inverse: #FFFFFF;
    
    /* 边框 */
    --mx-border-light: rgba(214, 233, 255, 0.2);
    --mx-border-medium: rgba(214, 233, 255, 0.35);
    
    /* 功能色 */
    --mx-success: #34C759;
    --mx-warning: #FF9500;
    --mx-error: #FF3B30;
    --mx-info: #5B9BD5;
    
    /* 阴影体系 - 天青柔雾 */
    --mx-shadow-base: 0 3px 12px rgba(214, 233, 255, 0.08);
    --mx-shadow-hover: 0 10px 28px rgba(214, 233, 255, 0.12);
    --mx-shadow-dialog: 0 15px 40px rgba(214, 233, 255, 0.15);
    --mx-shadow-glow: 0 0 20px rgba(91, 155, 213, 0.08);
    
    /* 圆角 */
    --mx-radius-lg: 12px;
    --mx-radius-md: 8px;
    --mx-radius-sm: 6px;
    --mx-radius-full: 9999px;
    
    /* 模糊 */
    --mx-blur-nav: blur(8px);
    --mx-blur-dialog: blur(12px);
    --mx-blur-overlay: blur(4px);
    
    /* 动画时长 */
    --mx-transition-fast: 0.12s;
    --mx-transition-normal: 0.22s;
    --mx-transition-slow: 0.32s;
    
    /* 缓动函数 */
    --mx-ease-regular: cubic-bezier(0.2, 0.58, 0.3, 0.99);
    --mx-ease-elastic: cubic-bezier(0.32, 0.99, 0.38, 1.03);
    --mx-ease-page: cubic-bezier(0.22, 0.82, 0.22, 1);
    --mx-ease-bouncy: cubic-bezier(0.62, -0.12, 0.26, 1.14);
    
    /* 字体 */
    --mx-font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Roboto', sans-serif;
}

/* ========== 全局重置 ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--mx-font-family);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--mx-text-primary);
    background: var(--mx-bg-gradient);
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    max-width: 100vw;
}

/* 背景流动动画 */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--mx-flow-gradient);
    background-size: 200% 200%;
    animation: bgBreathing 20s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes bgBreathing {
    0%, 100% { background-position: 0% 0%; opacity: 0.3; }
    50% { background-position: 100% 100%; opacity: 0.5; }
}

/* ========== 排版 ========== */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.3;
    color: var(--mx-text-primary);
}

h1 { font-size: 24px; }
h2 { font-size: 20px; font-weight: 500; }
h3 { font-size: 17px; font-weight: 500; }

a {
    color: var(--mx-accent-color);
    text-decoration: none;
    transition: color var(--mx-transition-fast) var(--mx-ease-regular);
}

a:hover {
    color: var(--mx-accent-color);
    opacity: 0.8;
}

/* ========== 毛玻璃导航 ========== */
.mx-navbar {
    position: sticky;
    top: 0;
    height: 60px;
    background: var(--mx-glass-bg);
    backdrop-filter: var(--mx-blur-nav);
    -webkit-backdrop-filter: var(--mx-blur-nav);
    box-shadow: var(--mx-shadow-base);
    border-bottom: 1px solid var(--mx-border-light);
    display: flex;
    align-items: center;
    padding: 0 24px;
    z-index: 100;
    transition: box-shadow var(--mx-transition-normal) var(--mx-ease-regular),
                background var(--mx-transition-normal) var(--mx-ease-regular);
}

.mx-navbar.scrolled {
    box-shadow: var(--mx-shadow-hover);
    background: rgba(248, 251, 255, 0.93);
}

/* ========== 卡片组件 ========== */
.mx-card {
    background: var(--mx-card-bg);
    border-radius: var(--mx-radius-lg);
    padding: 24px;
    box-shadow: var(--mx-shadow-base);
    border: 1px solid var(--mx-border-light);
    transition: all var(--mx-transition-normal) var(--mx-ease-regular);
    position: relative;
    overflow: hidden;
}

.mx-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--mx-accent-glow);
    opacity: 0;
    transition: opacity var(--mx-transition-normal) var(--mx-ease-regular);
    pointer-events: none;
}

.mx-card:hover {
    transform: translateY(-2.5px);
    box-shadow: var(--mx-shadow-hover);
    background: var(--mx-card-hover);
}

.mx-card:hover::before {
    opacity: 1;
}

.mx-card:active {
    transform: scale(0.975);
    background: var(--mx-card-active);
    transition: all var(--mx-transition-fast) var(--mx-ease-regular);
}

/* ========== 按钮组件 ========== */
.mx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--mx-accent-color);
    background: var(--mx-btn-primary-bg);
    border: 1px solid var(--mx-border-light);
    border-radius: var(--mx-radius-md);
    cursor: pointer;
    transition: all var(--mx-transition-normal) var(--mx-ease-regular);
    white-space: nowrap;
    outline: none;
}

.mx-btn:hover {
    background: var(--mx-btn-hover-bg);
    box-shadow: 0 0 0 3px var(--mx-accent-light);
    transform: scale(1.015);
}

.mx-btn:active {
    transform: scale(0.975);
    background: var(--mx-btn-active-bg);
    transition: all var(--mx-transition-fast) var(--mx-ease-regular);
}

.mx-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.mx-btn-primary {
    background: var(--mx-accent-gradient);
    color: var(--mx-accent-color);
    font-weight: 600;
}

.mx-btn-primary:hover {
    box-shadow: 0 0 0 4px var(--mx-accent-light);
}

.mx-btn-block {
    display: flex;
    width: 100%;
}

.mx-btn-lg {
    padding: 14px 28px;
    font-size: 17px;
    border-radius: var(--mx-radius-lg);
}

.mx-btn-icon {
    padding: 10px;
    border-radius: var(--mx-radius-full);
}

/* ========== 输入框组件 ========== */
.mx-input-group {
    margin-bottom: 20px;
}

.mx-input-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--mx-text-primary);
    margin-bottom: 8px;
    transition: all var(--mx-transition-fast) var(--mx-ease-regular);
}

.mx-input-label.focused {
    color: var(--mx-accent-color);
    transform: translateY(-2px);
}

.mx-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.mx-input {
    width: 100%;
    height: 44px;
    padding: 0 16px;
    font-size: 16px;
    color: var(--mx-text-primary);
    background: var(--mx-input-bg);
    border: 1px solid var(--mx-input-border);
    border-radius: var(--mx-radius-md);
    outline: none;
    transition: all var(--mx-transition-normal) var(--mx-ease-regular);
    font-family: inherit;
}

.mx-input:focus {
    border-color: var(--mx-accent-color);
    box-shadow: var(--mx-input-focus-glow);
    background: var(--mx-card-bg);
}

.mx-input.error {
    border-color: var(--mx-error);
    animation: shake 0.08s ease-in-out 3;
}

.mx-input.success {
    border-color: var(--mx-success);
}

.mx-input::placeholder {
    color: var(--mx-text-tertiary);
    opacity: 0.7;
}

/* 输入框图标 */
.mx-input-icon {
    position: absolute;
    right: 12px;
    color: var(--mx-text-tertiary);
    pointer-events: none;
}

/* 验证码组合 */
.mx-code-group {
    display: flex;
    gap: 12px;
}

.mx-code-group .mx-input {
    flex: 1;
}

.mx-code-group .mx-btn {
    min-width: 110px;
}

/* ========== 弹窗组件 ========== */
.mx-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: var(--mx-blur-overlay);
    -webkit-backdrop-filter: var(--mx-blur-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn var(--mx-transition-slow) var(--mx-ease-regular);
}

.mx-modal {
    width: 90%;
    max-width: 400px;
    background: var(--mx-glass-bg-heavy);
    backdrop-filter: var(--mx-blur-dialog);
    -webkit-backdrop-filter: var(--mx-blur-dialog);
    border-radius: var(--mx-radius-lg);
    box-shadow: var(--mx-shadow-dialog);
    border: 1px solid var(--mx-border-light);
    animation: modalEnter 0.32s var(--mx-ease-elastic);
}

.mx-modal-header {
    padding: 20px 24px 12px;
    border-bottom: 1px solid var(--mx-border-light);
}

.mx-modal-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--mx-text-primary);
}

.mx-modal-body {
    padding: 24px;
}

.mx-modal-footer {
    padding: 12px 24px 20px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalEnter {
    from {
        opacity: 0;
        transform: scale(0.93) translateY(6px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ========== 底栏组件 ========== */
.mx-tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70px;
    background: var(--mx-glass-bg);
    backdrop-filter: var(--mx-blur-nav);
    -webkit-backdrop-filter: var(--mx-blur-nav);
    border-top: 1px solid var(--mx-border-light);
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 100;
}

.mx-tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    color: var(--mx-text-secondary);
    border-radius: var(--mx-radius-md);
    transition: all var(--mx-transition-normal) var(--mx-ease-bouncy);
    cursor: pointer;
}

.mx-tab-item i {
    font-size: 22px;
}

.mx-tab-item span {
    font-size: 12px;
}

.mx-tab-item.active {
    color: var(--mx-accent-color);
    transform: scale(1.06) translateY(-1.5px);
}

.mx-tab-item:active {
    transform: scale(0.95);
}

/* ========== 错误提示 ========== */
.mx-error-message {
    font-size: 13px;
    color: var(--mx-error);
    margin-top: 6px;
    min-height: 20px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.mx-success-message {
    font-size: 13px;
    color: var(--mx-success);
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

/* ========== 加载动画 ========== */
.mx-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--mx-border-light);
    border-top-color: var(--mx-accent-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* ========== 骨架屏 ========== */
.mx-skeleton {
    background: linear-gradient(
        90deg,
        var(--mx-accent-lighter) 0%,
        var(--mx-accent-light) 50%,
        var(--mx-accent-lighter) 100%
    );
    background-size: 200% 100%;
    animation: skeletonLoading 1.5s ease-in-out infinite;
    border-radius: var(--mx-radius-sm);
}

@keyframes skeletonLoading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ========== 工具类 ========== */
.mx-text-primary { color: var(--mx-text-primary); }
.mx-text-secondary { color: var(--mx-text-secondary); }
.mx-text-tertiary { color: var(--mx-text-tertiary); }
.mx-text-accent { color: var(--mx-accent-color); }
.mx-text-success { color: var(--mx-success); }
.mx-text-warning { color: var(--mx-warning); }
.mx-text-error { color: var(--mx-error); }

.mx-bg-glass { background: var(--mx-glass-bg); backdrop-filter: var(--mx-blur-nav); }
.mx-bg-card { background: var(--mx-card-bg); }
.mx-bg-accent { background: var(--mx-accent-gradient); }

.mx-rounded-lg { border-radius: var(--mx-radius-lg); }
.mx-rounded-md { border-radius: var(--mx-radius-md); }
.mx-rounded-sm { border-radius: var(--mx-radius-sm); }
.mx-rounded-full { border-radius: var(--mx-radius-full); }

.mx-shadow-base { box-shadow: var(--mx-shadow-base); }
.mx-shadow-hover { box-shadow: var(--mx-shadow-hover); }
.mx-shadow-dialog { box-shadow: var(--mx-shadow-dialog); }

.mx-flex { display: flex; }
.mx-flex-col { flex-direction: column; }
.mx-items-center { align-items: center; }
.mx-justify-center { justify-content: center; }
.mx-justify-between { justify-content: space-between; }
.mx-gap-2 { gap: 8px; }
.mx-gap-4 { gap: 16px; }
.mx-gap-6 { gap: 24px; }

.mx-w-full { width: 100%; }
.mx-h-full { height: 100%; }
.mx-min-h-screen { min-height: 100vh; }

.mx-p-4 { padding: 16px; }
.mx-p-6 { padding: 24px; }
.mx-px-4 { padding-left: 16px; padding-right: 16px; }
.mx-py-4 { padding-top: 16px; padding-bottom: 16px; }

.mx-mb-4 { margin-bottom: 16px; }
.mx-mt-4 { margin-top: 16px; }

.mx-text-center { text-align: center; }
.mx-text-sm { font-size: 13px; }
.mx-text-base { font-size: 15px; }
.mx-text-lg { font-size: 17px; }
.mx-font-medium { font-weight: 500; }
.mx-font-semibold { font-weight: 600; }

/* ========== 全局页脚 ========== */
.mx-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 20px;
    text-align: center;
    background: transparent;
    z-index: 10;
    pointer-events: none;
}

.mx-footer-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    pointer-events: auto;
}

.mx-footer-text {
    font-size: 12px;
    color: var(--mx-text-tertiary);
}

.mx-footer-link {
    font-size: 12px;
    color: var(--mx-accent-color);
    text-decoration: none;
    font-weight: 500;
    transition: all var(--mx-transition-fast) var(--mx-ease-regular);
}

.mx-footer-link:hover {
    color: var(--mx-accent-color);
    opacity: 0.8;
}

.mx-footer-divider {
    width: 3px;
    height: 3px;
    background: var(--mx-text-tertiary);
    border-radius: 50%;
    opacity: 0.5;
}

/* ========== 响应式 ========== */
@media (max-width: 768px) {
    :root {
        --mx-radius-lg: 10px;
        --mx-radius-md: 8px;
    }
    
    .mx-navbar {
        padding: 0 16px;
    }
    
    .mx-card {
        padding: 20px;
    }
    
    .mx-code-group {
        flex-direction: column;
    }
    
    .mx-code-group .mx-btn {
        width: 100%;
    }
    
    .mx-footer {
        padding: 10px 16px;
        background: var(--mx-glass-bg);
        backdrop-filter: var(--mx-blur-nav);
        -webkit-backdrop-filter: var(--mx-blur-nav);
        border-top: 1px solid var(--mx-border-light);
    }
    
    .mx-footer-text,
    .mx-footer-link {
        font-size: 11px;
    }
}

/* ========== Bootstrap Icons ========== */
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css');

.bi {
    line-height: 1;
    vertical-align: middle;
}

/* ========== 后台布局核心 ========== */
/* 侧边栏固定宽度 */
.admin-sidebar {
    width: 280px !important;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 100;
}

/* 主内容区 - 固定宽度，不产生横向滚动 */
.admin-main {
    flex: 1;
    margin-left: 280px;
    padding: 32px 40px;
    width: calc(100% - 280px);
    max-width: calc(100% - 280px);
    min-width: 0;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* 统计卡片网格 - 响应式 */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    width: 100%;
    margin-bottom: 32px;
}

.stats-mini {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    width: 100%;
    margin-bottom: 28px;
}

/* 图表和内容网格 */
.charts-grid,
.content-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 24px;
    width: 100%;
}

/* 筛选栏 */
.filter-bar {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
    align-items: center;
}

.filter-search {
    flex: 1;
    min-width: 200px;
    display: flex;
    gap: 10px;
}

/* 表格容器 - 只在表格内容过长时内部滚动 */
.table-container,
.table-section {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    border-radius: 20px;
    background: var(--mx-glass-bg);
    border: 1.5px solid var(--mx-border-light);
}

/* 数据表格 - 最小宽度100% */
.data-table {
    width: 100%;
    min-width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

/* 商品卡片网格 */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
    width: 100%;
}

/* 认证卡片网格 */
.verify-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 20px;
    width: 100%;
}

/* 支付渠道卡片网格 */
.channel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 24px;
    width: 100%;
}

/* 等级卡片 */
.level-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

/* 操作栏 */
.action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 24px;
}

/* 选项卡 */
.tabs,
.tabs-container,
.filter-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    width: 100%;
}

/* 分页 */
.pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 32px;
    width: 100%;
}

/* 响应式断点 */
@media (max-width: 1400px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .stats-mini {
        grid-template-columns: repeat(2, 1fr);
    }
    .charts-grid,
    .content-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1200px) {
    .channel-grid,
    .verify-cards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .admin-main {
        padding: 24px 20px;
    }
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .admin-sidebar {
        transform: translateX(-100%);
    }
    
    .admin-main {
        margin-left: 0;
        width: 100%;
        max-width: 100%;
        padding: 16px;
    }
    
    .stats-grid,
    .stats-mini {
        grid-template-columns: 1fr;
    }
    
    .products-grid {
        grid-template-columns: 1fr;
    }
    
    .filter-bar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-search {
        flex-direction: column;
        width: 100%;
    }
    
    .filter-search input {
        width: 100%;
    }
    
    .filter-select {
        width: 100%;
    }
}