/* 表格样式 */
.token-details {
    width: 100%;
    max-width: 635px; /* 适当调整整体宽度 */
    border-collapse: collapse; /* 使用collapse确保边框合并 */
    border: 1px solid #D9D9D9;
    background-color: white;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.05);
    table-layout: fixed; /* 固定表格布局 */
}

/* 行样式 - 统一特定行的高度（仅用于大屏幕） */
.token-details tr:nth-child(1) {
    height: 60px; /* 第一行统一高度 */
}

.token-details tr:nth-child(2) {
    height: 180px; /* 第二行统一高度（内容较多） */
}

.token-details tr:nth-child(3) {
    height: 160px; /* 第三行统一高度 */
}

/* 标题单元格 */
.detail-title {
    width: 126px; /* 将标题栏宽度从105px增加1/5 */
    background-color: var(--primary-color);
    color: #FFFFFF;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-align: center;
    padding: 0; /* 移除内边距，使用flex布局精确居中 */
    border-bottom: 1px solid #FFFFFF; /* 标题栏使用白色分割线 */
    vertical-align: middle; /* 确保垂直居中 */
    position: relative; /* 为绝对定位提供参考 */
}

/* 最后一行的标题不需要底部边框 */
.detail-row:last-child .detail-title {
    border-bottom: none;
}

/* 标题内的文字 - 使用绝对定位实现精确垂直居中 */
.detail-title span {
    display: inline-block;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%; /* 由于标题栏变宽，调回原来的宽度比例 */
}

/* 内容单元格 */
.detail-content {
    padding: 0; /* 移除内边距，使用内部容器控制 */
    font-size: 16px;
    line-height: 1.5;
    color: #251F1D;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    border-bottom: 1px solid #D9D9D9; /* 内容栏使用灰色分割线 */
    border-left: 1px solid #D9D9D9; /* 添加左侧边框，作为与标题的分隔 */
    vertical-align: middle; /* 确保垂直居中 */
    word-wrap: break-word; /* 允许长单词换行 */
    overflow-wrap: break-word; /* 现代浏览器的长单词换行 */
}

/* 最后一行的内容不需要底部边框 */
.detail-row:last-child .detail-content {
    border-bottom: none;
}

/* 内容容器 - 使用flex布局精确居中 */
.detail-content-inner {
    width: 100%;
    height: 100%; /* 占满整个单元格高度 */
    display: flex;
    align-items: center; /* 垂直居中内容 */
    flex-wrap: wrap; /* 允许内容换行 */
    padding: 9.6px 19.2px; /* 将内边距缩短1/5（从12px 24px） */
    box-sizing: border-box; /* 确保内边距不会增加元素尺寸 */
}

/* 大屏幕响应式调整 (>1200px) */
@media screen and (max-width: 1200px) {
    /* 在大屏幕上微调样式，保持基本布局不变 */
    .detail-content-inner {
        padding: 9.6px 16px; /* 缩短内边距1/5 */
    }
}

/* 中等屏幕响应式调整 (992px - 1200px) */
@media screen and (max-width: 992px) {
    /* 参考Game System的响应式逻辑，992px是布局切换的关键点 */
    /* 重置表格行高，改为内容自适应 */
    .token-details tr:nth-child(1),
    .token-details tr:nth-child(2),
    .token-details tr:nth-child(3) {
        height: auto;
    }
    
    /* 改变表格显示为块级元素 */
    .token-details {
        display: block;
        width: 100%;
        max-width: 480px; /* 原来600px缩小1/5 */
        margin: 0 auto; /* 居中显示 */
    }
    
    .detail-row {
        display: block;
        margin-bottom: 15px;
        border-bottom: 1px solid #D9D9D9;
    }
    
    .detail-row:last-child {
        border-bottom: none;
        margin-bottom: 0;
    }
    
    /* 调整标题单元格样式 */
    .detail-title {
        display: block;
        width: 100%;
        border-bottom: 1px solid #D9D9D9; /* 在移动视图下使用灰色边框 */
        padding: 13px 16px; /* 缩短1/5 */
        text-align: left; /* 左对齐标题 */
        font-size: 18px; /* 增大字体 */
        border-radius: 0;
        position: static; /* 移除相对定位 */
    }
    
    /* 响应式视图下标题内的文字不再使用绝对定位 */
    .detail-title span {
        position: static;
        transform: none;
        width: auto;
        display: inline;
    }
    
    /* 调整内容单元格样式 */
    .detail-content {
        display: block;
        width: 100%;
        border-left: none;
        padding: 0; /* 保持无内边距 */
        background-color: #FFFFFF;
    }
    
    /* 内容容器调整 */
    .detail-content-inner {
        display: block;
        height: auto;
        padding: 13px 16px; /* 缩短1/5 */
    }
}

/* 平板和小屏幕响应式调整 (576px - 992px) */
@media screen and (max-width: 768px) {
    .token-details {
        max-width: 100%; /* 在更小的屏幕上占满宽度 */
    }
    
    .detail-title {
        padding: 11px 13px; /* 缩短1/5 */
        font-size: 17px;
    }
    
    .detail-content-inner {
        padding: 11px 13px; /* 缩短1/5 */
        font-size: 15px;
    }
}

/* 移动设备响应式调整 (<576px) */
@media screen and (max-width: 576px) {
    .token-details {
        margin-bottom: 20px;
    }
    
    .detail-row {
        margin-bottom: 10px;
    }
    
    .detail-title {
        padding: 9.6px 12px; /* 缩短1/5 */
        font-size: 16px;
    }
    
    .detail-content-inner {
        padding: 9.6px 12px; /* 缩短1/5 */
        font-size: 14px;
    }
}