/* Container for the scrollable table */
.top-table-container {
    width: 100%;
    overflow-x: auto;
    min-width: 100%;
    scrollbar-color: #C5D7EA #E7EBF0;
    border-radius: 6px; /* 为容器添加圆角，使表格整体看起来有圆角效果 */
    position: relative;
    padding-bottom: 20px;
    /* 添加一层与竞品风格类似的柔和外边框 */
    border: 1px solid rgb(233, 240, 248); 
}

.top-table {
    border-collapse: separate;
    border-spacing: 0;
    white-space: nowrap;
    min-width: 100%;
    border-style: hidden; /* 隐藏表格自身边框，由容器处理 */
}

.top-table .section-header {
    text-align: center !important;
    background-color: #e6f2ff !important;  /* 浅蓝色背景 */
    font-weight: bold !important;
    color: #0068b6 !important;  /* 深蓝色文字 */
    padding: 10px !important;
}

/* 移除全局的硬边框，改为更柔和的底部边框 */
.top-table th, .top-table td {
    /* border: 1px solid #ddd;  <-- 移除此行 */
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid rgb(233, 240, 248); /* #E9F0F8, 统一的行分隔线 */
}

/* 最后一行的单元格移除底部边框，避免与容器边框重叠 */
.top-table tr:last-child th,
.top-table tr:last-child td {
    border-bottom: none;
}


/* --- STICKY & STYLING LOGIC (REFINED) --- */

/* 1. Style and stick the ENTIRE header row to the top */
.top-table tr:first-child th {
    color: rgb(0, 104, 182);
    background: rgb(215, 232, 250);
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 2;
    border-bottom: none; 
}

/* 2. Stick the first column of DATA rows to the left */
.top-table td:first-child,
.top-table th:first-child {
    position: sticky;
    left: 0;
    z-index: 1; /* Data column is on the bottom level */
    color: #333;
    text-align: left;
    border-right: 1px solid rgb(221, 221, 221);
}

/* 3. Style the TOP-LEFT CORNER cell ("Feature") to be on top of everything. */
/*    This is the key fix. We explicitly target the corner cell to give it */
/*    the highest z-index and make it sticky on both axes. */
.top-table tr:first-child th:first-child {
    position: sticky;
    left: 0;   /* Stick to the left */
    top: 0;    /* Stick to the top */
    z-index: 3; /* Highest level to stay on top of both the row and column */
    font-weight: bold;
    text-align: left;
    border-right: 1px solid rgb(221, 221, 221);
    color: rgb(0, 104, 182);
}


/* --- ZEBRA-STRIPING & BACKGROUNDS --- */

/* Apply zebra-striping to table rows */
.top-table tr:nth-child(even) {
    background-color: rgb(247, 250, 253); /* #F7FAFD */
}
.top-table tr:nth-child(odd):not(:first-child) {
    background-color: white;
}

/* Ensure the sticky data column cells match their row's background color */
/* This prevents the scrolling content from showing through */
.top-table tr:nth-child(odd):not(:first-child) td:first-child,
.top-table tr:nth-child(odd):not(:first-child) th:first-child {
    background-color: white;
}

.top-table tr:nth-child(even) td:first-child,
.top-table tr:nth-child(even) th:first-child {
    background-color: rgb(247, 250, 253);
}

/* 粘性列右侧的阴影/边框线，更新颜色使其更柔和 */
.top-table th:first-child::after {
    content: "";
    position: absolute;
    top: 0;
    right: -1px;
    height: 100%;
    width: 1px;
    background-color: rgb(221, 221, 221); /* 更新为较柔和的颜色 */
}