/* ============================================
   极简二级域名出租系统 - 样式表
   设计规范：简约现代、轻量化商务风
   配色：主色60% + 辅色30% + 点缀10%
   主色：#3D5A80(钢蓝) / #F5F6FA(浅底)
   辅色：#98C1D9(浅蓝) / #E8ECF1(浅灰)
   点缀：#EE6C4D(暖珊瑚) / #293241(深文字)
   ============================================ */

/* ---- CSS变量 ---- */
:root {
    --c-primary: #3D5A80;
    --c-primary-light: #4A6FA5;
    --c-secondary: #98C1D9;
    --c-accent: #EE6C4D;
    --c-accent-hover: #D85A3B;
    --c-bg: #F5F6FA;
    --c-surface: #FFFFFF;
    --c-text: #293241;
    --c-text-muted: #6B7B8D;
    --c-border: #E0E5EC;
    --c-success: #4CAF7D;
    --c-warning: #F0A63A;
    --c-danger: #E5534B;
    --c-info: #3D5A80;
    --radius: 8px;
    --radius-sm: 4px;
    --radius-lg: 14px;
    --shadow-sm: 0 1px 3px rgba(41,50,65,0.08);
    --shadow-md: 0 4px 12px rgba(41,50,65,0.1);
    --shadow-lg: 0 8px 24px rgba(41,50,65,0.12);
    --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* ---- 全局重置 ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
    font-family: var(--font-sans);
    color: var(--c-text);
    background: var(--c-bg);
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--c-primary); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--c-primary-light); }
img { max-width: 100%; height: auto; }

/* ---- 容器 ---- */
.container { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.container-sm { max-width: 480px; margin: 0 auto; padding: 0 20px; }
.container-md { max-width: 720px; margin: 0 auto; padding: 0 20px; }

/* ---- 导航栏 ---- */
.navbar {
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    padding: 0;
    height: 60px;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
}
.navbar-inner {
    flex: 1;
}
/* 导航栏内容容器：比主内容（.container 1140px）更宽，两侧多出 40px，
   LOGO 靠左、导航靠右。视觉上导航栏「兜住」下方内容，是主流站点的做法。
   注意：padding 与 .container 保持一致（20px），只放宽 max-width。 */
.navbar-inner {
    max-width: 1220px;
    margin: 0 auto;
    padding: 0 20px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}
.navbar-brand {
    font-size: 18px;
    font-weight: 700;
    color: var(--c-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.navbar-brand .icon { font-size: 24px; }
.navbar-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
}
.navbar-nav a {
    padding: 7px 16px;
    border-radius: var(--radius);
    color: var(--c-text-muted);
    font-size: 14px;
    font-weight: 500;
    position: relative;
    transition: var(--transition);
}
/* 导航项悬停：底部微条动画 */
.navbar-nav a::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--c-primary);
    border-radius: 1px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(-50%);
}
.navbar-nav a:hover::after, .navbar-nav a.active::after {
    width: 20px;
}
.navbar-nav a:hover, .navbar-nav a.active {
    color: var(--c-primary);
    background: rgba(61,90,128,0.05);
}
/* 导航栏按钮样式 */
.navbar-nav .btn {
    padding: 7px 18px;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--radius);
    margin-left: 4px;
}
.navbar-nav .btn-accent {
    color: #fff;
    background: var(--c-accent);
    box-shadow: 0 2px 8px rgba(238,108,77,0.25);
}
.navbar-nav .btn-accent:hover {
    background: var(--c-accent-hover);
    color: #fff;
    box-shadow: 0 4px 12px rgba(238,108,77,0.35);
    transform: translateY(-1px);
}
.navbar-nav .btn-outline {
    color: var(--c-text-muted);
    background: transparent;
    border: 1px solid var(--c-border);
}
.navbar-nav .btn-outline:hover {
    color: var(--c-danger);
    border-color: rgba(229,83,75,0.35);
    background: rgba(229,83,75,0.04);
}

/* 移动端菜单按钮 */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    color: var(--c-text);
    cursor: pointer;
}

/* ---- 按钮 ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    line-height: 1.4;
}
.btn-sm { padding: 6px 14px; font-size: 13px; }
.btn-lg { padding: 14px 28px; font-size: 16px; }
.btn-primary { background: var(--c-primary); color: #fff; }
.btn-primary:hover { background: var(--c-primary-light); color: #fff; }
.btn-accent { background: var(--c-accent); color: #fff; }
.btn-accent:hover { background: var(--c-accent-hover); color: #fff; }
.btn-secondary { background: var(--c-secondary); color: var(--c-text); }
.btn-secondary:hover { background: #88B4CC; }
.btn-outline {
    background: transparent;
    border: 1.5px solid var(--c-border);
    color: var(--c-text-muted);
}
.btn-outline:hover { border-color: var(--c-primary); color: var(--c-primary); }
.btn-danger { background: var(--c-danger); color: #fff; }
.btn-danger:hover { background: #D04440; color: #fff; }
.btn-success { background: var(--c-success); color: #fff; }
.btn-success:hover { background: #3E9B6C; color: #fff; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ---- 卡片 ---- */
.card {
    background: var(--c-surface);
    border-radius: var(--radius);
    border: 1px solid var(--c-border);
    padding: 24px;
    transition: var(--transition);
}
.card:hover { box-shadow: var(--shadow-md); }
.card-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--c-text);
    margin-bottom: 8px;
}
.card-body { font-size: 14px; color: var(--c-text-muted); }

/* ---- 表单 ---- */
.form-group { margin-bottom: 20px; }
.form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--c-text);
    margin-bottom: 6px;
}
.form-input, .form-select, .form-textarea {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-surface);
    color: var(--c-text);
    transition: var(--transition);
    outline: none;
    font-family: var(--font-sans);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(61,90,128,0.1);
}
.form-input.error { border-color: var(--c-danger); }
.form-hint {
    font-size: 12px;
    color: var(--c-text-muted);
    margin-top: 4px;
}
.form-textarea { min-height: 100px; resize: vertical; }
.form-file { padding: 8px; }

/* ---- 表格 ---- */
.table-wrap {
    overflow-x: auto;
    border-radius: var(--radius);
    border: 1px solid var(--c-border);
    background: var(--c-surface);
}
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.table th {
    background: #F0F3F7;
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    color: var(--c-text-muted);
    font-size: 13px;
    white-space: nowrap;
}
.table td {
    padding: 12px 16px;
    border-top: 1px solid var(--c-border);
}
.table tr:hover td { background: rgba(61,90,128,0.02); }

/* ---- 状态标签 ---- */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}
.badge-success { background: rgba(76,175,125,0.12); color: var(--c-success); }
.badge-warning { background: rgba(240,166,58,0.12); color: var(--c-warning); }
.badge-danger { background: rgba(229,83,75,0.12); color: var(--c-danger); }
.badge-info { background: rgba(61,90,128,0.1); color: var(--c-info); }
.badge-secondary { background: rgba(107,123,141,0.1); color: var(--c-text-muted); }

/* ---- 提示消息 ---- */
.alert {
    padding: 14px 18px;
    border-radius: var(--radius);
    font-size: 14px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.alert-success { background: rgba(76,175,125,0.1); color: var(--c-success); border: 1px solid rgba(76,175,125,0.2); }
.alert-danger { background: rgba(229,83,75,0.08); color: var(--c-danger); border: 1px solid rgba(229,83,75,0.15); }
.alert-warning { background: rgba(240,166,58,0.1); color: var(--c-warning); border: 1px solid rgba(240,166,58,0.2); }
.alert-info { background: rgba(61,90,128,0.06); color: var(--c-info); border: 1px solid rgba(61,90,128,0.12); }

/* ---- 闪存消息 ---- */
.flash {
    position: fixed;
    top: 80px;
    right: 20px;
    padding: 14px 24px;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 500;
    z-index: 1000;
    box-shadow: var(--shadow-md);
    animation: slideIn 0.3s ease;
}
.flash-success { background: var(--c-success); color: #fff; }
.flash-error { background: var(--c-danger); color: #fff; }

@keyframes slideIn {
    from { transform: translateX(100px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* ---- 页面标题 ---- */
.page-header {
    padding: 32px 0 20px;
    border-bottom: 1px solid var(--c-border);
    margin-bottom: 24px;
}
.page-header h2 {
    font-size: 24px;
    font-weight: 700;
}
.page-header p {
    font-size: 14px;
    color: var(--c-text-muted);
    margin-top: 4px;
}

/* ---- 统计卡片 ---- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.stat-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 20px;
}
.stat-card .stat-label {
    font-size: 13px;
    color: var(--c-text-muted);
    margin-bottom: 4px;
}
.stat-card .stat-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--c-primary);
}
.stat-card .stat-value.accent { color: var(--c-accent); }

/* ---- 分页 ---- */
.pagination {
    display: flex;
    gap: 4px;
    justify-content: center;
    margin-top: 24px;
    list-style: none;
}
.pagination a, .pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-text-muted);
    transition: var(--transition);
}
.pagination a:hover { border-color: var(--c-primary); color: var(--c-primary); }
.pagination .active {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
}

/* ---- 页脚 ---- */
.footer {
    margin-top: 60px;
    padding: 24px 0;
    border-top: 1px solid var(--c-border);
    text-align: center;
    font-size: 13px;
    color: var(--c-text-muted);
}

/* ---- 空状态 ---- */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--c-text-muted);
}
.empty-state .icon { font-size: 48px; margin-bottom: 12px; opacity: 0.3; }
.empty-state p { font-size: 14px; }

/* ---- 域名可用性检测 ---- */
.check-result {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 500;
}
.check-result.available { color: var(--c-success); }
.check-result.taken { color: var(--c-danger); }
.check-result.checking { color: var(--c-text-muted); }

/* ---- 管理后台侧边栏 ---- */
.admin-layout {
    display: flex;
    height: 100vh;
    overflow: hidden;
}
.admin-sidebar {
    width: 240px;
    background: var(--c-text);
    color: #fff;
    padding: 20px 0;
    flex-shrink: 0;
    overflow-y: auto;
    height: 100vh;
}
.admin-sidebar .sidebar-brand {
    padding: 0 20px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    font-size: 16px;
    font-weight: 700;
    color: var(--c-secondary);
}
.admin-sidebar .sidebar-nav {
    list-style: none;
    margin-top: 12px;
}
.admin-sidebar .sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    color: rgba(255,255,255,0.6);
    font-size: 14px;
    transition: var(--transition);
}
.admin-sidebar .sidebar-nav a:hover,
.admin-sidebar .sidebar-nav a.active {
    background: rgba(255,255,255,0.08);
    color: #fff;
}
.admin-sidebar .sidebar-nav .icon { font-size: 18px; width: 24px; text-align: center; }
.admin-sidebar .sidebar-section {
    padding: 0;
    margin-top: 4px;
    cursor: pointer;
    user-select: none;
}
.admin-sidebar .sidebar-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px 6px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.35);
    transition: color 0.15s;
}
.admin-sidebar .sidebar-section:hover .sidebar-section-header {
    color: rgba(255,255,255,0.5);
}
.admin-sidebar .sidebar-section-arrow {
    font-size: 14px;
    transition: transform 0.2s;
}
.admin-sidebar .sidebar-section.open .sidebar-section-arrow {
    transform: rotate(90deg);
}
.admin-sidebar .sidebar-section-items {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.25s ease;
}
.admin-sidebar .sidebar-section.open .sidebar-section-items {
    max-height: 500px;
}
.admin-main {
    flex: 1;
    padding: 24px;
    background: var(--c-bg);
    overflow-y: auto;
}
.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}
.admin-header h2 { font-size: 20px; font-weight: 700; }

/* ---- 模态框 ---- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(41,50,65,0.5);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}
.modal-overlay.show { opacity: 1; visibility: visible; }
.modal {
    background: var(--c-surface);
    border-radius: var(--radius);
    padding: 24px;
    width: 90%;
    max-width: 480px;
    box-shadow: var(--shadow-lg);
    transform: translateY(20px);
    transition: var(--transition);
}
.modal-overlay.show .modal { transform: translateY(0); }
.modal-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
}
.modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 20px;
}

/* ---- 实名认证图片预览 ---- */
.upload-area {
    border: 2px dashed var(--c-border);
    border-radius: var(--radius);
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
}
.upload-area:hover { border-color: var(--c-primary); background: rgba(61,90,128,0.02); }
.upload-area .icon { font-size: 32px; color: var(--c-text-muted); margin-bottom: 8px; }
.upload-area p { font-size: 13px; color: var(--c-text-muted); }
.upload-area input[type="file"] { display: none; }
.upload-area img {
    max-height: 120px;
    margin-top: 8px;
    border-radius: var(--radius-sm);
}

/* PC端隐藏移动端汉堡栏和遮罩 */
.admin-mobile-bar { display: none; }
.admin-sidebar-overlay { display: none !important; }

/* ---- 响应式适配 ---- */
    /* PC/Mobile 分流日志：默认藏 .credit-log-mobile（移动端卡片列表），写到 @media 外，避免 PC 溢出 */
    .credit-log-mobile { display: none; }

@media (max-width: 768px) {
    .navbar-nav { display: none; }
    .navbar-nav.show {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: -20px;
        right: -20px;
        background: var(--c-surface);
        border-bottom: 1px solid var(--c-border);
        padding: 12px;
        box-shadow: var(--shadow-md);
        z-index: 100;
    }
    .menu-toggle { display: block; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .admin-layout { flex-direction: column; height: auto; overflow: auto; }

    /* ========== 移动端侧边栏 ========== */
    /* 顶部汉堡栏 */
    .admin-mobile-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: var(--c-text);
        color: #fff;
        padding: 10px 16px;
        flex-shrink: 0;
    }
    .admin-mobile-bar .brand { font-weight: 700; font-size: 16px; }
    .admin-menu-toggle {
        background: none;
        border: none;
        color: #fff;
        font-size: 24px;
        cursor: pointer;
        padding: 4px;
        line-height: 1;
    }

    /* 抽屉式侧边栏 */
    .admin-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 260px;
        height: 100vh;
        z-index: 200;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        overflow-y: auto;
        padding: 16px 12px;
    }
    .admin-sidebar.open { transform: translateX(0); }

    /* 遮罩 */
    .admin-sidebar-overlay {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.4);
        z-index: 199;
        display: none;
    }
    .admin-sidebar-overlay.show { display: block; }

    /* 侧边栏内元素 */
    .admin-sidebar .sidebar-brand { display: none; }
    .admin-sidebar .sidebar-nav { margin-top: 0; }
    .admin-sidebar .sidebar-section-header {
        display: flex;
        padding: 10px 8px 6px;
        font-size: 13px;
        color: rgba(255,255,255,0.5);
        font-weight: 600;
        cursor: pointer;
    }
    .admin-sidebar .sidebar-section-items { max-height: none !important; display: block !important; }
    .admin-sidebar .sidebar-section { margin-top: 0; }
    .admin-sidebar .sidebar-nav a {
        padding: 10px 12px;
        font-size: 14px;
        border-radius: 6px;
    }

    /* 顶部栏在移动端缩小 */
    .admin-topbar {
        padding: 0 12px;
        height: 44px;
        gap: 10px;
    }
    .admin-topbar a { font-size: 12px; }
    .admin-user-info .name { display: none; }

    /* 内容区 padding 缩小 */
    .admin-main { padding: 16px; }

    /* admin-header 换行 */
    .admin-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .admin-header h2 { font-size: 18px; }
    .admin-header form {
        flex-wrap: wrap;
        width: 100%;
    }
    .admin-header form input[type="text"],
    .admin-header form input[type="search"] {
        flex: 1;
        min-width: 0;
    }

    /* ========== 移动端表格 → 卡片化 ========== */
    .table-wrap {
        border: none;
        background: none;
        overflow-x: visible;
    }
    .table-wrap { overflow-x: hidden; }
    .table { border: none; font-size: 13px; width: 100%; table-layout: fixed; }
    .table thead { display: none; }
    .table tbody { display: block; width: 100%; }
    .table tr {
        display: block;
        margin-bottom: 12px;
        background: var(--c-surface);
        border: 1px solid var(--c-border);
        border-radius: var(--radius-lg);
        padding: 12px;
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }
    .table tr:hover td { background: none; }
    .table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 0;
        border-top: none;
        border-bottom: 1px solid rgba(0,0,0,0.04);
        text-align: right;
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
    }
    .table td > :not(button):not(a):not(span.badge):not(form) {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: break-all;
    }
    .table td:last-child { border-bottom: none; padding-bottom: 0; }
    .table td:first-child { padding-top: 0; }

    /* 用 data-label 属性显示列名 */
    .table td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 12px;
        color: var(--c-text-muted);
        text-align: left;
        flex-shrink: 0;
        margin-right: 12px;
        min-width: 56px;
        max-width: 72px;
    }
    /* ========== 移动端积分流水 → 纯 div 卡片列表 ==========
       双轨方案：移动端隐藏 .credit-log-pc（表格）、显示 .credit-log-mobile（div 列表）。
       完全脱离 table 渲染环境，避免 tr/td 的 display: table-* 默认值干扰样式。
       PC端默认表格，移动端隐藏表格，全部 div 控制 CSS 表现力强。 */
    /* PC端默认表格，移动端 div 列表 */
    /* CSS Nesting 致命坑：禁止写 body.has-tabbar { body.has-tabbar X {} } 嵌套，
       编译后变成 body.has-tabbar body.has-tabbar X，永不匹配 */
    body.has-tabbar .credit-log-pc { display: none !important; }
    body.has-tabbar .credit-log-mobile { display: flex !important; flex-direction: column !important; gap: 10px !important; width: 100% !important; }
    /* 单条流水卡片（纯 div，flex 容器） */
    body.has-tabbar .clm-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        justify-content: space-between !important;
        padding: 14px 16px !important;
        background: #fff !important;
        border: 1px solid var(--c-border) !important;
        border-radius: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        gap: 12px !important;
        margin: 0 !important;
    }
    /* 左列：积分变动（竖排紧凑） */
    body.has-tabbar .clm-left {
        flex: 0 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;
        min-width: 80px !important;
    }
    body.has-tabbar .clm-amount {
        font-size: 22px !important;
        font-weight: 800 !important;
        line-height: 1.1 !important;
        letter-spacing: -0.5px;
        white-space: nowrap;
    }
    body.has-tabbar .clm-amount-minus { color: #ff4d4f !important; }
    body.has-tabbar .clm-amount-plus  { color: #52c41a !important; }
    body.has-tabbar .clm-amount-label {
        font-size: 11px !important;
        color: #999 !important;
        margin-top: 2px;
        line-height: 1.2;
    }
    /* 右列：备注 + 元信息（占满中间空间） */
    body.has-tabbar .clm-right {
        flex: 1 1 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-end !important;
        min-width: 0 !important;
        gap: 5px !important;
        text-align: right !important;
    }
    body.has-tabbar .clm-remark {
        font-size: 13px !important;
        color: #333 !important;
        line-height: 1.35 !important;
        font-weight: 500;
        word-break: break-all;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        max-width: 100%;
    }
    body.has-tabbar .clm-sub {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        font-size: 11px !important;
        color: #999 !important;
        line-height: 1.4;
    }
    body.has-tabbar .clm-badge {
        font-size: 10px !important;
        padding: 1px 6px !important;
        border-radius: 999px !important;
        line-height: 1.4 !important;
        white-space: nowrap;
    }
    body.has-tabbar .clm-balance {
        font-size: 11px !important;
        color: #999 !important;
        white-space: nowrap;
    }
    body.has-tabbar .clm-time {
        font-size: 10px !important;
        color: #bbb !important;
        white-space: nowrap;
    }

    /* 无data-label的td不显示前缀 */
    .table td:not([data-label])::before { display: none; }

    /* td内的文字内容允许截断 */
    .table td {
        overflow: hidden;
    }
    .table td > * {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* 操作列特殊处理 */
    .table td:last-child {
        justify-content: flex-end;
        gap: 4px;
        flex-wrap: wrap;
        overflow: visible;
    }
    .table td:last-child::before { display: none; }
    .table td:last-child > * {
        white-space: nowrap;
        overflow: visible;
        text-overflow: clip;
    }

    /* 隐藏不重要的列 */
    .table th.mobile-hide,
    .table td.mobile-hide { display: none !important; }

    /* 模态框在移动端满屏 */
    .modal { max-width: 100% !important; margin: 16px; max-height: 85vh; }
}

@media (max-width: 480px) {
    .container { padding: 0 12px; }
    .btn-lg { padding: 12px 20px; font-size: 14px; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .card { padding: 16px; }
}

/* 旋转动画（加载指示器） */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.iconify[style*="animation:spin"] {
    animation: spin 1s linear infinite;
}

/* ============================================
   H5 APP化样式（仅移动端生效，PC端完全不受影响）
   所有规则都在 @media (max-width: 768px) 内
   ============================================ */
@media (max-width: 768px) {

    /* ---- 全局基底 ---- */
    body {
        background: #F7F8FA;
        /* 底部Tab Bar高度，防止内容被遮挡 */
        padding-bottom: 0;
    }

    /* ---- 内容区底部留白，避免被Tab Bar遮挡 ---- */
    .console-main {
        padding-bottom: 80px !important;
    }

    /* ---- 顶栏毛玻璃效果 ---- */
    .console-topbar {
        background: rgba(255,255,255,0.85) !important;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: none !important;
        box-shadow: 0 0.5px 0 rgba(0,0,0,0.05);
        height: 48px !important;
        padding: 0 16px !important;
    }

    /* ---- 汉堡菜单按钮改为更精致的样式 ---- */
    .console-menu-btn {
        border: none !important;
        padding: 6px !important;
        font-size: 22px !important;
        color: var(--c-text) !important;
    }

    /* ---- 卡片大圆角化 ---- */
    .card {
        border: none !important;
        border-radius: 16px !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03) !important;
        padding: 20px !important;
    }
    .card:hover {
        box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03) !important;
    }

    /* ---- 统计卡片APP化 ---- */
    .stat-card {
        border: none !important;
        border-radius: 16px !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03) !important;
        padding: 16px !important;
    }
    .stat-card .stat-value {
        font-size: 24px !important;
        font-weight: 800 !important;
    }
    .stat-card .stat-label {
        font-size: 12px !important;
    }

    /* ---- 按钮胶囊化 ---- */
    .btn {
        border-radius: 999px !important;
        transition: all 0.15s ease !important;
    }
    .btn:active {
        transform: scale(0.96);
    }
    .btn-sm {
        padding: 6px 16px !important;
        font-size: 13px !important;
    }
    .btn-lg {
        border-radius: 999px !important;
        padding: 14px 32px !important;
    }

    /* ---- 表单输入框大圆角 ---- */
    .form-input, .form-select, .form-textarea {
        border-radius: 12px !important;
        border-width: 1px !important;
        background: #F7F8FA !important;
        font-size: 15px !important; /* 防止iOS缩放 */
        padding: 12px 16px !important;
    }
    .form-input:focus, .form-select:focus, .form-textarea:focus {
        background: #fff !important;
        border-color: var(--c-primary) !important;
        box-shadow: 0 0 0 3px rgba(61,90,128,0.08) !important;
    }

    /* ---- 表格卡片化升级 ---- */
    .table tr {
        border: none !important;
        border-radius: 14px !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.02) !important;
        padding: 14px !important;
        margin-bottom: 12px !important;
    }
    .table td {
        border-bottom: 1px solid rgba(0,0,0,0.03) !important;
        padding: 7px 0 !important;
    }
    .table td::before {
        font-size: 12px !important;
        color: var(--c-text-muted) !important;
    }

    /* ---- Badge圆角化 ---- */
    .badge {
        border-radius: 999px !important;
        padding: 3px 12px !important;
        font-size: 11px !important;
    }

    /* ---- Alert大圆角 ---- */
    .alert {
        border-radius: 12px !important;
        border: none !important;
        padding: 14px 16px !important;
    }

    /* ---- 分页胶囊化 ---- */
    .pagination a, .pagination span {
        border-radius: 999px !important;
        border: none !important;
        width: 38px !important;
        height: 38px !important;
        background: var(--c-surface) !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
    }
    .pagination .active {
        background: var(--c-primary) !important;
        box-shadow: 0 2px 8px rgba(61,90,128,0.25) !important;
    }

    /* ---- 模态框底部弹起式 ---- */
    .modal-overlay {
        align-items: flex-end !important;
    }
    .modal {
        border-radius: 20px 20px 0 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 24px 20px 32px !important;
        transform: translateY(100%) !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
    }
    .modal-overlay.show .modal {
        transform: translateY(0) !important;
    }

    /* ---- 闪存消息改为顶部通知条 ---- */
    .flash {
        top: 12px !important;
        left: 12px !important;
        right: 12px !important;
        border-radius: 12px !important;
        text-align: center;
    }

    /* ---- 页面标题紧凑化 ---- */
    .page-header {
        padding: 20px 0 12px !important;
        margin-bottom: 16px !important;
    }
    .page-header h2 {
        font-size: 20px !important;
    }

    /* ---- 底部Tab Bar（APP核心导航） ---- */
    .app-tabbar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 64px;
        background: rgba(255,255,255,0.92);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-top: none;
        box-shadow: 0 -1px 0 rgba(0,0,0,0.06), 0 -4px 16px rgba(0,0,0,0.03);
        z-index: 997;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .app-tabbar-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        text-decoration: none;
        color: var(--c-text-muted);
        font-size: 10px;
        font-weight: 500;
        transition: color 0.15s;
        position: relative;
        -webkit-tap-highlight-color: transparent;
    }
    .app-tabbar-item .iconify {
        font-size: 22px;
        transition: transform 0.15s;
    }
    .app-tabbar-item.active {
        color: var(--c-primary);
        font-weight: 600;
    }
    .app-tabbar-item.active .iconify {
        transform: scale(1.1);
    }
    /* 未读红点 */
    .app-tabbar-item .tab-badge {
        position: absolute;
        top: 4px;
        right: 50%;
        margin-right: -20px;
        min-width: 16px;
        height: 16px;
        background: var(--c-danger);
        color: #fff;
        border-radius: 999px;
        font-size: 10px;
        font-weight: 700;
        text-align: center;
        line-height: 16px;
        padding: 0 4px;
        display: none;
    }
    .app-tabbar-item .tab-badge.show {
        display: block;
    }

    /* ---- 移动端隐藏侧边栏的汉堡菜单按钮（用底部Tab替代） ---- */
    .console-menu-btn {
        display: none !important;
    }

    /* ---- 侧边栏改为从右侧滑出的"更多"面板 ---- */
    .console-sidebar {
        left: auto !important;
        right: 0;
        width: 280px !important;
        border-radius: 20px 0 0 20px !important;
    }

    /* ---- 内容区动画 ---- */
    .console-main {
        animation: appPageIn 0.25s ease;
    }
    @keyframes appPageIn {
        from { opacity: 0; transform: translateY(6px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* ---- 空状态APP化 ---- */
    .empty-state {
        padding: 48px 20px !important;
    }
    .empty-state .icon {
        font-size: 56px !important;
    }

    /* ---- 上传区域大圆角 ---- */
    .upload-area {
        border-radius: 16px !important;
    }

    /* ---- body底部留出Tab Bar空间（仅控制台页面，双保险） ---- */
    body.has-tabbar {
        padding-bottom: 70px !important;
    }

    /* ====== main.php 布局页面 APP化（首页/域名列表/文章等公共页面） ====== */
    /* 顶部导航栏毛玻璃化 */
    .navbar {
        position: sticky !important;
        top: 0;
        z-index: 100;
        background: rgba(255, 255, 255, 0.82) !important;
        backdrop-filter: blur(16px) saturate(180%);
        -webkit-backdrop-filter: blur(16px) saturate(180%);
        border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
        padding: 0 16px !important;
        height: 56px !important;
        display: flex !important;
        align-items: center !important;
    }
    .navbar-inner {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    .navbar .navbar-brand {
        font-size: 17px !important;
        font-weight: 600 !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px;
    }
    .navbar .navbar-brand img {
        height: 36px !important;
    }
    .navbar a {
        font-size: 15px !important;
    }
    /* 移动端导航菜单改为横向滚动（APP风格，不需要汉堡菜单展开） */
    .navbar-nav {
        display: flex !important;
        gap: 4px !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .navbar-nav::-webkit-scrollbar { display: none; }
    .navbar-nav li { white-space: nowrap; }
    .navbar-nav a {
        padding: 6px 12px !important;
        border-radius: 999px !important;
        font-size: 14px !important;
    }
    .navbar-nav a.active {
        background: rgba(0, 0, 0, 0.06) !important;
        font-weight: 600 !important;
    }
    /* APP风格：导航始终可见，隐藏汉堡菜单按钮 */
    .menu-toggle {
        display: none !important;
    }

    /* 主容器去掉固定宽度限制，撑满屏幕 */
    .container {
        max-width: 100% !important;
        padding: 0 16px !important;
        margin: 0 !important;
    }

    /* 页面主区块间距 */
    main, .main-content, .page-content {
        padding: 16px 0 !important;
    }

    /* 卡片全面APP化 */
    .card, .domain-card, .feature-card {
        border-radius: 16px !important;
        border: none !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
        margin-bottom: 12px !important;
    }

    /* 按钮全面胶囊化 */
    .btn, .btn-primary, .btn-secondary, .btn-success, .btn-danger {
        border-radius: 999px !important;
        padding: 10px 24px !important;
        font-size: 14px !important;
        transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    }
    .btn:active, .btn-primary:active {
        transform: scale(0.96) !important;
    }

    /* 表单输入框APP化 */
    .form-control, input[type="text"], input[type="email"], input[type="password"], input[type="search"], textarea, select {
        border-radius: 12px !important;
        background: #F7F8FA !important;
        border: 1px solid #EFF0F3 !important;
        padding: 12px 16px !important;
        font-size: 16px !important;
    }

    /* 页脚去掉多列等宽布局 */
    .footer {
        padding: 24px 16px !important;
        text-align: center !important;
    }
    .footer .container {
        padding: 0 !important;
    }

    /* 表格在移动端转为卡片式 */
    table.responsive-table,
    .table {
        width: 100% !important;
    }
    .table thead { display: none !important; }
    .table tbody tr {
        display: block !important;
        border-radius: 16px;
        border: none !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
        margin-bottom: 12px;
        padding: 12px 16px;
    }
    .table tbody td {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        border: none !important;
        padding: 6px 0 !important;
        text-align: right;
    }
    .table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #999;
        font-size: 12px;
        text-align: left;
        padding-right: 16px;
    }

    /* 列表页搜索栏毛玻璃吸顶 */
    .filter-bar, .search-bar, .toolbar {
        position: sticky !important;
        top: 56px;
        z-index: 50;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        padding: 8px 0 !important;
        margin: 0 -16px;
        padding-left: 16px;
        padding-right: 16px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    }

    /* 分页按钮圆角 */
    .pagination a, .pagination span {
        border-radius: 8px !important;
        border: none !important;
        padding: 8px 14px !important;
        margin: 0 2px !important;
    }

    /* 弹窗底部弹起式 */
    .modal, .modal-box, .modal-content {
        border-radius: 20px 20px 0 0 !important;
        margin: 0 !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        max-width: 100% !important;
        animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    @keyframes slideUp {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }

    /* Alert提示条圆角 */
    .alert, .flash, .alert-info, .alert-success, .alert-danger, .alert-warning {
        border-radius: 12px !important;
        border: none !important;
        padding: 12px 16px !important;
    }

    /* 标签/徽章圆角 */
    .badge, .badge-success, .badge-warning, .badge-danger, .badge-info, .badge-secondary {
        border-radius: 6px !important;
        padding: 3px 8px !important;
        font-size: 11px !important;
    }

    /* 去掉不必要的大间距 */
    .mb-4, .mb-3 { margin-bottom: 16px !important; }
    .mt-4, .mt-3 { margin-top: 16px !important; }
    .py-4, .py-3 { padding-top: 16px !important; padding-bottom: 16px !important; }

    /* ====== 首页落地页 APP化 ====== */
    /* Hero 区域：不对称排版，去掉完美居中 */
    .landing-hero {
        padding: 24px 0 16px !important;
    }
    .landing-hero-inner {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    .landing-hero-text h1 {
        font-size: 26px !important;
        line-height: 1.35 !important;
    }
    .landing-hero-text p {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
    .landing-badge {
        display: inline-block !important;
        padding: 4px 12px !important;
        border-radius: 999px !important;
        font-size: 12px !important;
        margin-bottom: 12px !important;
    }
    .landing-hero-actions {
        flex-direction: row !important;
        gap: 10px !important;
        flex-wrap: wrap !important;
    }
    .landing-hero-actions .btn {
        flex: 1 !important;
        min-width: 140px !important;
        text-align: center !important;
    }

    /* 终端演示区域圆角化 */
    .landing-terminal {
        border-radius: 16px !important;
        overflow: hidden !important;
    }

    /* 产品优势区域 */
    .landing-section {
        padding: 20px 0 !important;
    }
    .landing-section-header h2 {
        font-size: 22px !important;
    }
    .landing-section-header p {
        font-size: 13px !important;
    }
    .landing-features {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .feature-card {
        padding: 20px !important;
        border-radius: 16px !important;
        border: none !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05) !important;
    }
    .feature-icon {
        width: 44px !important;
        height: 44px !important;
        border-radius: 12px !important;
    }
    .feature-card h3 {
        font-size: 16px !important;
    }
    .feature-card p {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    /* =================================================================
     * 选购域名页（/order/create）移动端专属精致化设计
     * 关键：所有规则严格平铺在 @media (max-width: 768px) 内，
     * 不要再用 nesting 包裹（避免 nesting 解析后变成 body.has-tabbar body.has-tabbar）
     * ================================================================= */
    body.has-tabbar .container {
        padding: 0 12px !important;
    }

    /* 页面标题精简 */
    body.has-tabbar .page-header {
        padding: 12px 0 !important;
        margin-bottom: 12px !important;
    }
    body.has-tabbar .page-header h1,
    body.has-tabbar .page-header h2 {
        font-size: 20px !important;
        margin-bottom: 4px !important;
    }
    body.has-tabbar .page-header p {
        font-size: 12px !important;
        color: #8a8a8a;
    }

    /* 顶部积分余额条紧凑 */
    body.has-tabbar .balance-bar {
        padding: 10px 12px !important;
        margin-bottom: 12px !important;
        border-radius: 12px !important;
    }
    body.has-tabbar .balance-label { font-size: 12px !important; }
    body.has-tabbar .balance-value { font-size: 18px !important; }

    /* section标题紧凑化 */
    body.has-tabbar .rental-section-header {
        padding: 10px 0 12px !important;
        margin-bottom: 12px !important;
        border-bottom: 1px solid var(--c-border) !important;
    }
    body.has-tabbar .rental-section-header span[style*="font-size:17px"] {
        font-size: 15px !important;
    }
    body.has-tabbar .rental-section-header span[style*="font-size:12px"] {
        font-size: 11px !important;
    }

    /* =================================================================
     * 直播域名模块 - 移动端优化
     * 问题：标题元素横向挤压，"进入专页"文字强行折行难看
     * 方案：标题块在 mobile 下改为 flex-wrap，让描述/链接自然换行
     *      卡片网格用 minmax(160px,1fr) 一排最多2张
     * ================================================================= */
    body.has-tabbar #liveSection .rental-section-header {
        flex-wrap: wrap !important;
        row-gap: 4px !important;
    }
    body.has-tabbar #liveSection .rental-section-header > a {
        width: 100% !important;
        margin-left: 0 !important;
        margin-top: 2px !important;
        padding-top: 6px !important;
        border-top: 1px dashed var(--c-border) !important;
        text-align: center !important;
    }
    body.has-tabbar .live-entry-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    body.has-tabbar .live-entry-card {
        padding: 12px 12px !important;
    }
    body.has-tabbar .live-entry-suffix {
        font-size: 14px !important;
        max-width: 80px;
    }
    body.has-tabbar .live-entry-tag {
        font-size: 9px !important;
        padding: 1px 6px !important;
    }
    body.has-tabbar .live-entry-price {
        font-size: 13px !important;
    }
    body.has-tabbar .live-entry-info .live-info-row {
        font-size: 11px !important;
    }
    body.has-tabbar .live-entry-buy-btn {
        font-size: 12px !important;
        padding: 6px 8px !important;
        margin-top: 8px !important;
    }

    /* =================================================================
     * 独享域名模块 - 核心：强制2列网格
     * 覆盖内联 display:flex
     * ================================================================= */
    body.has-tabbar #exclusiveSection > div[style*="display:flex"] {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        overflow-x: visible !important;
        padding-bottom: 0 !important;
        align-items: stretch !important;
    }

    /* 定制卡（橙色边框）→ 移动端独占一行，采用清晰的三段式横排布局
       修复上一次文字挤到右边的凌乱问题：彻底重构为「图标+标题｜定金+套餐｜按钮」 */
    body.has-tabbar #exclusiveSection .domain-card-reserve {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 12px 14px !important;
        border-radius: 14px !important;
        background: linear-gradient(135deg, #FFF6F2 0%, #FFEFE8 100%) !important;
        border: none !important;
        box-shadow: none !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        text-align: left !important;
        min-height: 76px !important;
        max-height: 76px !important;
        margin-bottom: 10px !important;
        gap: 12px !important;
        overflow: hidden !important;
    }
    /* 第一段：图标+标题（横向紧凑） */
    body.has-tabbar #exclusiveSection .domain-card-header-reserve {
        padding: 0 !important;
        background: none !important;
        border: none !important;
        flex: 1 1 0 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
        min-width: 0 !important;
    }
    body.has-tabbar #exclusiveSection .domain-card-icon-reserve {
        font-size: 22px !important;
        flex-shrink: 0;
    }
    body.has-tabbar #exclusiveSection .domain-card-title-wrap {
        min-width: 0;
        flex: 1;
    }
    body.has-tabbar #exclusiveSection .domain-card-title-wrap > div[style*="font-size:16px"] {
        font-size: 13px !important;
        font-weight: 700 !important;
        margin: 0 !important;
        line-height: 1.2 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    body.has-tabbar #exclusiveSection .domain-card-title-wrap > div[style*="font-size:12px"] {
        font-size: 10px !important;
        color: #999 !important;
        margin: 1px 0 0 !important;
        line-height: 1.2 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 第二段：定金+价格信息（紧凑竖排，宽度自适应） */
    body.has-tabbar #exclusiveSection .domain-card-reserve-info {
        flex: 0 0 auto !important;
        min-width: 0;
        max-width: 50%;
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
        padding: 0 4px !important;
    }
    body.has-tabbar #exclusiveSection .domain-card-reserve-info > div[style*="font-size:13px"] {
        font-size: 10px !important;
        color: #999 !important;
        margin: 0 !important;
        line-height: 1.2 !important;
    }
    body.has-tabbar #exclusiveSection .domain-card-reserve-info > div[style*="font-size:16px"] {
        font-size: 12px !important;
        font-weight: 700 !important;
        color: #f0a030 !important;
        margin: 0 !important;
        line-height: 1.2 !important;
        white-space: nowrap;
    }
    /* 隐藏移动端的定制须知链接和提示框，保持卡片精简 */
    body.has-tabbar #exclusiveSection .domain-card-reserve-notice {
        display: none !important;
    }

    /* 第三段：立即定制按钮 */
    body.has-tabbar #exclusiveSection .domain-card-reserve-btn {
        flex: 0 0 auto !important;
        padding: 7px 14px !important;
        font-size: 12px !important;
        border-radius: 999px !important;
        width: auto !important;
        white-space: nowrap;
        margin: 0 !important;
        line-height: 1.2;
    }
    body.has-tabbar #exclusiveSection .domain-card-reserve-btn .iconify {
        font-size: 13px;
        margin-right: 3px;
        vertical-align: -2px;
    }

    /* 隐藏中间整个body padding容器（原PC布局专用） */
    body.has-tabbar #exclusiveSection .domain-card-reserve-body {
        display: contents !important;
    }

    /* 现货独享域名卡 → 2列网格紧凑（这是用户反馈"每行一张"的核心修复） */
    body.has-tabbar #exclusiveSection > div > .domain-card[data-rental-mode="exclusive"] {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 0 !important;
        border-radius: 12px !important;
        border: 1px solid rgba(76, 175, 125, 0.2) !important;
        box-shadow: 0 1px 6px rgba(76, 175, 125, 0.05) !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        overflow: hidden !important;
    }

    /* 卡片内部header紧凑化 */
    body.has-tabbar .domain-card .domain-card-header {
        padding: 10px 12px 8px !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
        background: none !important;
    }
    body.has-tabbar .domain-card .domain-name {
        margin-bottom: 2px !important;
        gap: 5px !important;
    }
    body.has-tabbar .domain-card .domain-name img {
        width: 16px !important;
        height: 16px !important;
    }
    body.has-tabbar .domain-card .domain-name .iconify {
        font-size: 16px !important;
    }
    body.has-tabbar .domain-card .domain-suffix {
        font-size: 14px !important;
        font-weight: 700 !important;
    }
    body.has-tabbar .domain-card .domain-price {
        font-size: 13px !important;
        font-weight: 700 !important;
    }
    body.has-tabbar .domain-card .domain-price span {
        font-size: 10px !important;
    }

    /* 现货徽章 */
    body.has-tabbar .domain-card span[style*="background:#4CAF7D"] {
        font-size: 9px !important;
        padding: 1px 6px !important;
    }

    /* 信息行：紧凑化但保留显示 */
    body.has-tabbar .domain-card .domain-card-info {
        padding: 6px 12px !important;
        font-size: 11px !important;
        line-height: 1.5 !important;
    }
    body.has-tabbar .domain-card .info-row {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 2px 0 !important;
        font-size: 11px !important;
        line-height: 1.4 !important;
    }
    body.has-tabbar .domain-card .info-label {
        color: #999;
        font-size: 11px !important;
    }
    body.has-tabbar .domain-card .info-value {
        font-size: 11px !important;
    }
    body.has-tabbar .domain-card .info-ellipsis {
        max-width: 130px !important;
    }

    /* 操作按钮：底部胶囊按钮 */
    body.has-tabbar .domain-card .domain-card-actions {
        padding: 6px 12px 8px !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 6px !important;
        border-top: none !important;
    }
    body.has-tabbar .domain-card .domain-card-actions .btn {
        flex: 1 !important;
        padding: 6px 4px !important;
        font-size: 11px !important;
        border-radius: 999px !important;
        white-space: nowrap;
        min-width: 0 !important;
    }
    body.has-tabbar .domain-card .domain-card-actions .btn .iconify {
        font-size: 12px !important;
        margin-right: 2px !important;
    }

    /* =================================================================
     * 二级域名模块（#sharedSection .domain-grid）
     * ================================================================= */
    body.has-tabbar .domain-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    body.has-tabbar .domain-grid .domain-card {
        padding: 0 !important;
        border-radius: 12px !important;
        border: 1px solid rgba(0, 0, 0, 0.04) !important;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.03) !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    /* =================================================================
     * 价格面板（移动端紧凑化）
     * 关键：套餐价格字号进一步压缩，保证单屏完全可见；修复关闭按钮被遮挡问题
     * ================================================================= */
    body.has-tabbar .price-panel {
        border-radius: 10px !important;
        margin: 6px 0 0 !important;
    }
    /* 修复关闭按钮定位和字号 */
    body.has-tabbar .price-panel-header {
        padding: 8px 14px !important;
        font-size: 12px !important;
        font-weight: 600;
        border-bottom-width: 1px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
    }
    body.has-tabbar .price-panel-header > span {
        flex: 1 1 auto;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    body.has-tabbar .price-panel-close {
        font-size: 18px !important;
        flex: 0 0 auto !important;
        padding: 4px 8px !important;
        margin: 0 !important;
        line-height: 1;
        background: rgba(0,0,0,0.04);
        border-radius: 50%;
    }
    body.has-tabbar .price-panel-close .iconify {
        font-size: 16px !important;
    }
    body.has-tabbar .price-panel-body {
        padding: 6px 14px 12px !important;
    }
    body.has-tabbar .price-item {
        padding: 6px 0 !important;
    }
    body.has-tabbar .price-item-name {
        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
    }
    body.has-tabbar .price-item-desc {
        font-size: 10px !important;
        color: #999 !important;
        margin-top: 1px !important;
    }
    body.has-tabbar .price-item-cost {
        font-size: 12px !important;
        font-weight: 700 !important;
        white-space: nowrap;
    }
    body.has-tabbar .price-item-cost span {
        font-size: 9px !important;
        color: #999 !important;
        margin-left: 1px;
    }


}

/* ---- PC端（宽度>768px）隐藏底部Tab Bar ---- */
@media (min-width: 769px) {
    .app-tabbar { display: none !important; }
}

/* 小屏手机进一步优化 */
@media (max-width: 480px) {
    .stat-card {
        padding: 14px !important;
    }
    .stat-card .stat-value {
        font-size: 20px !important;
    }
    .card {
        padding: 16px !important;
    }
    .console-main {
        padding: 12px !important;
        padding-bottom: 80px !important;
    }
}