/* ==========================================================
   📦 1. 筛选与搜索区域优化（深色现代系）
========================================================== */
.dm-filter-group .btn { 
    border: 1px solid #e9ecef; 
    background: #fff; 
    color: #495057; 
    border-radius: 4px; 
    padding: 5px 16px; 
    font-size: 13px; 
    font-weight: 500; 
    transition: all 0.2s; 
    margin-right: 8px; 
}
.dm-filter-group .btn:hover { 
    background: #f8f9fa; 
    border-color: #dee2e6; 
    color: #2d3436; 
}
.dm-filter-group .btn.active { 
    background: #343a40; 
    color: #fff; 
    border-color: #343a40; 
    box-shadow: 0 2px 6px rgba(52, 58, 64, 0.25); 
}

.dm-filter-form .form-control { 
    border: 1px solid #e9ecef; 
    font-size: 13px; 
    height: 34px; 
    box-shadow: none; 
    border-radius: 4px; 
    background: #fff; 
    transition: border-color 0.2s; 
}
.dm-filter-form .input-group-text { 
    background: #fff; 
    border: 1px solid #e9ecef; 
    border-right: none; 
    color: #adb5bd; 
    border-radius: 4px 0 0 4px; 
    transition: border-color 0.2s; 
}
.dm-filter-form .search-input { 
    border-left: none; 
    padding-left: 0; 
}

/* 焦点联动：左边图标和右边输入框边框同时变黑，融为一体 */
.dm-filter-form .form-control:focus,
.dm-filter-form .input-group:focus-within .input-group-text,
.dm-filter-form .input-group:focus-within .search-input { 
    border-color: #343a40; 
}

.dm-filter-form .btn-search { 
    background: #fff; 
    border: 1px solid #e9ecef; 
    height: 34px; 
    font-size: 13px; 
    padding: 0 18px; 
    color: #495057; 
    border-radius: 4px; 
    font-weight: 500; 
    transition: all 0.2s; 
    margin-left: 8px; 
    cursor: pointer; 
}
.dm-filter-form .btn-search:hover { 
    background: #f8f9fa; 
    border-color: #dee2e6; 
    color: #2d3436; 
}

/* ==========================================================
   📊 2. 表格主体整体感优化（还原极简一体化设计）
========================================================== */
/* 让表格形成一个封闭轻质的整体方框包裹，提升封闭感 */
.table-responsive {
    border: 1px solid #e9ecef;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

.dm-table {
    border-collapse: separate;
    border-spacing: 0;
}

/* 表头微调：平滑过渡 */
.dm-table th { 
    background-color: #f8f9fa !important; 
    border-bottom: 1px solid #e9ecef !important; 
    border-top: none !important; 
    font-weight: 600; 
    color: #495057; 
    font-size: 13px; 
    padding: 14px 16px; 
    white-space: nowrap; 
}

/* 单元格微调：让上下边框更淡，突出整体横向流线感 */
.dm-table td { 
    border-bottom: 1px solid #f5f6f7; 
    border-top: none; 
    padding: 14px 16px; 
    vertical-align: middle; 
    color: #495057; 
    font-size: 14px; 
}

/* 移除最后一行多余的底边框，保证圆角外框不被切断 */
.dm-table tbody tr:last-child td {
    border-bottom: none;
}

.dm-table tbody tr { 
    transition: background-color 0.2s ease; 
}
.dm-table tbody tr:hover { 
    background-color: #fafbfc; /* 极其细腻的悬停背景变色 */
}

.dm-table .domain-name { 
    font-size: 15px; 
    color: #2b303a; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
    letter-spacing: 0.3px; 
}

/* 统一的固顶外壳样式 */
.all-sticky-box {
    position: -webkit-sticky !important; /* 兼容 Safari */
    position: sticky !important;
    top: 70px !important;    /* 这里是你距离页面顶部的距离，按需微调 */
    z-index: 99 !important;  /* 确保悬浮在内容之上 */
}
/* ==========================================================
   🟢🔴 3. 状态前置呼吸灯小圆点样式
========================================================== */
.dot-status { 
    display: inline-block; 
    width: 7px; 
    height: 7px; 
    border-radius: 50%; 
    vertical-align: middle; 
    position: relative;
    top: -1px;
    transition: transform 0.2s ease;
}
/* 鼠标滑过小圆点轻微放大提示 */
.js-domain-detail:hover .dot-status {
    transform: scale(1.2);
}

/* ==========================================================
   🖱️ 4. 交互体验优化（悬停反馈）
========================================================== */
/* 域名和描述整行互动 */
.dm-table .js-domain-detail {
    transition: all 0.2s ease;
}
/* 悬停时域名变成温暖的橙黄色 */
.dm-table .js-domain-detail:hover .domain-name {
    color: #ff9500 !important;
}
/* 描述列文字悬停时微弱加深暗示可点 */
.dm-table td:nth-child(3).js-domain-detail {
    transition: color 0.2s ease;
}
.dm-table td:nth-child(3).js-domain-detail:hover {
    color: #212529 !important;
}

/* ==========================================================
   ⚠️ 5. 交易提醒与按钮
========================================================== */
.trade-alert {
    background-color: #fff9db;
    color: #87640a;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #ffe3e3;
}
.trade-alert i { font-size: 16px; color: #f59f00; }
.trade-alert .alert-text { flex: 1; line-height: 1.5; }
.trade-alert .alert-text strong { font-weight: 600; }

.btn-publish-pc { 
    background: #00ab63; 
    color: #fff; 
    border: none; 
    font-weight: 600; 
    border-radius: 5px;  
    transition: all 0.2s ease-in-out; 
    padding: 4px 14px; 
    font-size: 12px; 
    text-decoration: none !important; 
    display: inline-block;
    cursor: pointer;
}
.btn-publish-pc:hover { 
    background: #00c270; 
    color: #fff;  
    box-shadow: 0 2px 5px rgba(0, 171, 99, 0.2); 
    filter: brightness(1.05); 
}
.btn-publish-pc:active {
    transform: scale(0.98);
    filter: brightness(0.9);
}

.btn-publish-mobile { 
    background: #00ab63; 
    color: #fff !important; /* 强制文字白色 */
    border: none; 
    font-weight: 600; 
    padding: 10px; 
    border-radius: 6px; 
    box-shadow: 0 4px 10px rgba(0, 171, 99, 0.2); 
    transition: all 0.15s ease; 
    display: block; 
    text-align: center; 
    margin-bottom: 16px; 
    text-decoration: none !important; 
}

/* 彻底锁死悬停和点击时的颜色，防止被全局 CSS 覆盖 */
.btn-publish-mobile:hover, 
.btn-publish-mobile:focus, 
.btn-publish-mobile:active { 
    color: #fff !important; /* 鼠标经过、点击时依然强制白色 */
    background: #008f52; 
}

/* ==========================================================
   📱 6. 终极响应式适配：手机端自适应卡片流（根据4列重构）
========================================================== */
@media (max-width: 767.98px) {
    .table-responsive {
        border: none;
        background: transparent;
    }
    
 

    .dm-filter-group { flex-wrap: wrap; width: 100%; gap: 6px; margin-bottom: 12px !important; }
    .dm-filter-group .btn { flex: 1 1 20%; margin-right: 0; padding: 6px 0; text-align: center; }
    
    .dm-filter-form { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 0 !important; }
    .dm-filter-form select { flex: 1 1 45%; margin-right: 0 !important; }
    .dm-filter-form .input-group { flex: 1; }
    .dm-filter-form .btn-search { flex: 0 0 auto; margin-left: 0; margin-top: 0; height: 34px; padding: 0 16px; }

    /* 表格变卡片样式 */
    .dm-table thead { display: none; }
    .dm-table tbody, .dm-table tr, .dm-table td { display: block; width: 100%; }
    
    .dm-table tbody tr {
        border: 1px solid #e9ecef;
        border-radius: 8px;
        margin-bottom: 15px;
        padding: 12px 16px;
        background: #fff;
        box-shadow: 0 2px 6px rgba(0,0,0,0.02);
    }
    .dm-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border: none;
        text-align: right !important;
    }
    /* 自动渲染手机端左侧的小标题 */
    .dm-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #adb5bd;
        font-size: 13px;
    }
    
    /* 手机端第一列：域名行配置（左对齐，去除data-label提示） */
    .dm-table td:nth-child(1) { 
        display: block;
        text-align: left !important;
        border-bottom: 1px dashed #f1f3f5;
        padding-bottom: 10px;
        margin-bottom: 6px;
    }
    .dm-table td:nth-child(1)::before { content: none; } 
    .dm-table .domain-name { font-size: 17px; }
    
    /* 手机端第二列：前缀长度 */
    .dm-table td:nth-child(2) {
        text-align: right !important;
    }

    /* 手机端第三列：域名描述自适应换行 */
    .dm-table td:nth-child(3) { 
        max-width: 100% !important; 
        white-space: normal !important; 
        text-align: right !important; 
        align-items: flex-start; 
        word-break: break-word; 
    }
    .dm-table td:nth-child(3)::before {
        margin-right: 15px; 
        flex-shrink: 0; 
    }

    /* 手机端第四列：出售价格 */
    .dm-table td:nth-child(4) {
        text-align: right !important;
    }
    
    /* 核心修改：强制隐藏长度列 */
    .dm-table td:nth-child(2) {
        display: none !important;
    }
}