/*  Ultimate Points Styling

--------------------------- */

/* ========================================
   Tabs标签页 (.tabs) 样式设置
   ========================================
   用于页面顶部的标签导航
   - padding: 标签内边距
   - font-size: 标签字体大小
   - gap: 标签之间的间距

   如果想调整标签样式：
   - 修改 padding 改变标签大小
   - 修改 font-size 改变文字大小
   - 修改 border-radius 改变圆角
   ======================================== */
.tabs {
    margin-bottom: 1rem;        /* 标签页与下方内容的间距 */
}

.tabs ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;               /* 标签之间的间距 */
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #e5e7eb;
}

.tabs .tab {
    margin: 0;
    padding: 0;
}

/* 标签链接样式 */
.tabs .tab a {
    display: block;
    padding: 0.75rem 1rem;      /* 标签内边距 */
    font-size: 0.875rem;        /* 标签字体大小 */
    font-weight: 500;
    color: inherit;
    background-color: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 0.5rem 0.5rem 0 0;  /* 上方圆角 */
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    margin-bottom: -1px;
}

/* 标签悬停效果 */
.tabs .tab a:hover {
    background-color: rgba(37, 99, 235, 0.08);
    color: inherit;
}

/* 当前选中的标签样式 */
.tabs .tab.activetab a {
    background-color: #fff;
    border-color: #e5e7eb;
    border-bottom-color: #fff;
    font-weight: 600;
}

.icon-points {
    background-image: url("./images/icon_points.gif");
}

.icon-members {
    background-image: url("./images/icon_members.gif");
}

/* ========================================
   左侧描述框 (#cp-menu) 样式设置
   ========================================
   - width: 控制左侧栏的宽度（百分比）
   - max-width: 控制左侧栏的最大宽度（像素）
   - float: 控制浮动方向 (left/right/none)
   - padding-right: 左侧栏与右侧内容的间距

   如果想让描述框更小：减小width值（例如15%）
   如果想让描述框更大：增大width值（例如30%）
   如果不想要左右布局：设置float为none
   ======================================== */
#cp-menu {
    float: left;
    width: 20%;              /* 左侧栏占整体宽度的百分比 */
    max-width: 250px;        /* 左侧栏的最大宽度 */
    margin-top: 0;
    margin-bottom: 5px;
    padding-right: 1.5rem;   /* 左侧栏与右侧内容的间距 */
}

/* ========================================
   右侧主内容区 (#cp-main) 样式设置
   ========================================
   - width: 控制右侧主内容区的宽度
   - float: 控制浮动方向

   注意：右侧宽度应该与左侧宽度相加等于100%
   例如：左侧20% + 右侧80% = 100%
   ======================================== */
#cp-main {
    float: left;
    width: calc(80% - 1.5rem);  /* 右侧主内容区宽度，减去间距 */
}

#cp-main.ucp-main {
    width: calc(80% - 1.5rem);  /* 特定页面的右侧宽度 */
}

/* ========================================
   描述框通用基础样式
   ========================================
   以下样式类将被独立的选项卡样式替代
   .cp-mini 保留用于向后兼容
   ======================================== */
.cp-mini {
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    font-size: 0.875rem;
}

.cp-mini .inner {
    padding: 0;
}

.cp-mini h3 {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.cp-mini dl.mini {
    margin: 0;
}

.cp-mini dl.mini dd {
    margin: 0;
    padding: 0.25rem 0;
    line-height: 1.5;
    color: #6b7280;
    font-size: 0.813rem;
}

.cp-mini dl.mini dd:first-child {
    padding-top: 0;
}

.cp-mini dl.mini dd h3 {
    border: none;
    padding: 0;
    margin: 0 0 0.5rem 0;
}

/* ========================================
   信息选项卡独立样式 (.cp-info-desc)
   ========================================
   用于 points_info.html 页面的右侧描述框
   ======================================== */
.cp-info-desc {
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1.25rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
    color: #374151;
    height: fit-content;
}

.cp-info-desc h3 {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.625rem;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
}

.cp-info-desc p {
    margin: 0;
    padding: 0;
    line-height: 1.4;
    color: #6b7280;
    font-size: 0.8125rem;
}

/* 信息页面特殊布局 - 左右交换 */
.points-info #cp-menu {
    float: right;
    padding-right: 0;
    padding-left: 0.75rem;
}

.points-info #cp-main {
    float: left;
    width: calc(80% - 0.75rem);
}

/* 清除浮动 */
.points-info > .inner::after {
    content: "";
    display: table;
    clear: both;
}

/* 信息页面的用户余额显示 */
.points-info #cp-main > p {
    background-color: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1e40af;
}

/* ========================================
   日志选项卡独立样式 (.cp-logs-desc)
   ========================================
   用于 points_logs.html 页面的右侧描述框
   ======================================== */
.cp-logs-desc {
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1.25rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
    color: #374151;
    height: fit-content;
}

.cp-logs-desc h3 {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.625rem;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
}

.cp-logs-desc p {
    margin: 0;
    padding: 0;
    line-height: 1.4;
    color: #6b7280;
    font-size: 0.8125rem;
}

/* 日志页面特殊布局 - 左右交换 */
.points-logs #cp-menu {
    float: right;
    padding-right: 0;
    padding-left: 0.75rem;
}

.points-logs #cp-main {
    float: left;
    width: calc(80% - 0.75rem);
}

/* 清除浮动 */
.points-logs > .inner::after {
    content: "";
    display: table;
    clear: both;
}

/* ========================================
   彩票选项卡独立样式 (.cp-lottery-desc)
   ========================================
   用于 points_lottery.html 页面的右侧描述框
   ======================================== */
.cp-lottery-desc {
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1.25rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
    color: #374151;
    height: fit-content;
}

.cp-lottery-desc h3 {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.625rem;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
}

.cp-lottery-desc p {
    margin: 0;
    padding: 0;
    line-height: 1.4;
    color: #6b7280;
    font-size: 0.8125rem;
}

/* 彩票页面左侧导航样式 */
.points-lottery #cp-menu-left {
    float: left;
    width: 15%;
    max-width: 180px;
    padding-right: 0.75rem;
}

.points-lottery #cp-menu-left #navigation {
    width: 100%;
    padding-top: 0;
    margin-bottom: 0;
}

.points-lottery #cp-menu-left #navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.points-lottery #cp-menu-left #navigation ul li {
    margin: 0;
    padding: 0;
}

.points-lottery #cp-menu-left #navigation ul li a {
    display: block;
    padding: 0.625rem 1rem;
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    color: #374151;
    text-decoration: none;
    font-size: 0.875rem;
    transition: all 0.3s ease;
}

.points-lottery #cp-menu-left #navigation ul li a:hover {
    background-color: #f9fafb;
    border-color: #2563eb;
    color: #2563eb;
}

/* 彩票页面中间内容区域 */
.points-lottery #cp-main {
    float: left;
    width: calc(65% - 1.5rem);
    padding-right: 0.75rem;
}

/* 彩票页面右侧描述框 */
.points-lottery #cp-menu-right {
    float: right;
    width: 20%;
    max-width: 250px;
}

/* 清除浮动 */
.points-lottery > .inner::after {
    content: "";
    display: table;
    clear: both;
}

/* 彩票页面的用户余额显示 */
.points-lottery #cp-main > p {
    background-color: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1e40af;
}

/* ========================================
   银行选项卡独立样式 (.cp-bank-desc)
   ========================================
   用于 points_bank.html 页面的右侧描述框
   ======================================== */
.cp-bank-desc {
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1.25rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
    color: #374151;
    height: fit-content;
    margin-bottom: 1rem;
}

.cp-bank-desc:last-child {
    margin-bottom: 0;
}

.cp-bank-desc h3 {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.625rem;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
}

.cp-bank-desc p {
    margin: 0;
    padding: 0;
    line-height: 1.4;
    color: #6b7280;
    font-size: 0.8125rem;
}

.cp-bank-desc dl {
    margin: 0;
}

.cp-bank-desc dl dd,
.cp-bank-desc dl dt {
    margin: 0;
    padding: 0.375rem 0;
    line-height: 1.4;
    color: #6b7280;
    font-size: 0.8125rem;
}

.cp-bank-desc dl dd:first-child,
.cp-bank-desc dl dt:first-child {
    padding-top: 0;
}

/* 银行页面特殊布局 - 左右交换 */
.points-bank #cp-menu {
    float: right;
    padding-right: 0;
    padding-left: 0.75rem;
}

.points-bank #cp-main {
    float: left;
    width: calc(80% - 0.75rem);
}

/* 清除浮动 */
.points-bank > .inner::after {
    content: "";
    display: table;
    clear: both;
}

/* 银行页面的用户余额显示 */
.points-bank #cp-main > p {
    background-color: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1e40af;
}

/* 银行页面特殊样式 - fieldset间距 */
.points-bank fieldset {
    margin-bottom: 0;
}

.points-bank fieldset + fieldset {
    margin-top: 1.5rem;
}

/* 银行页面fieldset标题样式 - 去掉额外间距 */
.points-bank fieldset h3 {
    margin-top: -1.5rem;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
}

/* 银行页面表单按钮样式 */
.points-bank form dl {
    display: block;
    padding: 0;
    border-bottom: none;
    margin: 0.5rem 0;
}

.points-bank form dl dd {
    margin: 0;
    padding: 0;
}

.points-bank form dl dd .button1 {
    margin-right: 0.5rem;
    vertical-align: middle;
}

.points-bank form dl dd .inputbox {
    vertical-align: middle;
}

/* ========================================
   抢劫选项卡独立样式 (.cp-robbery-desc)
   ========================================
   用于 points_robbery.html 页面的右侧描述框
   ======================================== */
.cp-robbery-desc {
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1.25rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
    color: #374151;
    height: fit-content;
}

.cp-robbery-desc h3 {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.625rem;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
}

.cp-robbery-desc p {
    margin: 0;
    padding: 0 0 0.5rem 0;
    line-height: 1.4;
    color: #6b7280;
    font-size: 0.8125rem;
}

.cp-robbery-desc p:last-child {
    padding-bottom: 0;
}

/* 抢劫页面特殊布局 - 左右交换 */
.points-robbery #cp-menu {
    float: right;
    padding-right: 0;
    padding-left: 0.75rem;
}

.points-robbery #cp-main {
    float: left;
    width: calc(80% - 0.75rem);
}

/* 清除浮动 */
.points-robbery > .inner::after {
    content: "";
    display: table;
    clear: both;
}

/* 抢劫页面的用户余额显示 */
.points-robbery #cp-main > p {
    background-color: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1e40af;
}

/* 抢劫页面表单样式优化 */
.points-robbery fieldset dl {
    display: flex;
    align-items: baseline;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f3f4f6;
    margin: 0;
}

.points-robbery fieldset dl:last-child {
    border-bottom: none;
}

.points-robbery fieldset dl dt {
    flex: 0 0 45%;
    font-weight: 500;
    color: #374151;
    padding-right: 1rem;
}

.points-robbery fieldset dl dd {
    flex: 1;
    margin: 0;
    color: #1f2937;
}

/* 输入框样式 */
.points-robbery fieldset dl dd .inputbox {
    margin-right: 0.75rem;
    vertical-align: middle;
}

/* 查找用户链接和Coin文字对齐 */
.points-robbery fieldset dl dd strong,
.points-robbery fieldset dl dd strong a {
    vertical-align: middle;
    display: inline;
}

/* ========================================
   转账选项卡独立样式 (.cp-transfer-desc)
   ========================================
   用于 points_transfer.html 页面的左侧描述框
   ======================================== */
.cp-transfer-desc {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    border: none;
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    color: #2d3748;
}

.cp-transfer-desc .inner {
    padding: 0;
}

.cp-transfer-desc h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid rgba(45, 55, 72, 0.2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cp-transfer-desc dl {
    margin: 0;
}

.cp-transfer-desc dl dd {
    margin: 0;
    padding: 0.5rem 0;
    line-height: 1.6;
    color: #4a5568;
    font-size: 0.875rem;
}

.cp-transfer-desc dl dd:first-child {
    padding-top: 0;
}

.cp-transfer-desc dl dd h3 {
    border: none;
    padding: 0;
    margin: 0 0 0.5rem 0;
}

/* ========================================
   字段集 (fieldset) 样式设置
   ========================================
   用于信息页面、彩票页面等表单区域
   - padding: 字段集内部的内边距
   - margin: 字段集外部的间距
   ======================================== */
fieldset {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1.5rem;          /* 字段集内部的内边距 */
    background-color: #fff;
    margin: 1rem 0;           /* 字段集外部的间距 */
}

/* 字段集标题样式 */
fieldset h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
    margin: -1.5rem -1.5rem 1rem -1.5rem;
    padding: 1rem 1.5rem;
    background-color: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    border-radius: 0.5rem 0.5rem 0 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ========================================
   定义列表 (dl/dt/dd) 样式设置
   ========================================
   用于显示"标签：值"格式的信息
   - dt: 标签部分（左侧）
   - dd: 值部分（右侧）
   - flex: 控制左右比例
   ======================================== */
fieldset dl {
    display: flex;
    align-items: baseline;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f3f4f6;
    margin: 0;
}

fieldset dl:last-child {
    border-bottom: none;
}

/* 标签部分（左侧） */
fieldset dt {
    flex: 0 0 45%;            /* 左侧占45%宽度 */
    font-weight: 500;
    color: #374151;
    padding-right: 1rem;
}

/* 值部分（右侧） */
fieldset dd {
    flex: 1;                  /* 右侧占剩余宽度 */
    margin: 0;
    color: #1f2937;
    font-weight: 600;
}

/* Highlight important values */
fieldset dd:not(:empty) {
    color: #2563eb;
}

#cp-main > h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ========================================
   导航链接 (#navigation) 样式设置
   ========================================
   用于彩票、日志等页面的左侧导航
   - padding: 链接内边距
   - font-size: 链接字体大小
   - gap: 链接之间的间距
   ======================================== */
#navigation {
    width: 100%;
    padding-top: 0;
    margin-bottom: 1rem;        /* 导航与描述框的间距 */
}

#navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;                /* 导航项之间的间距 */
    margin-bottom: 1rem;
}

#navigation ul li {
    margin: 0;
    padding: 0;
}

/* 导航链接样式 */
#navigation ul li a {
    display: block;
    padding: 0.625rem 1rem;     /* 导航链接内边距 */
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    color: #374151;
    text-decoration: none;
    font-size: 0.875rem;        /* 导航链接字体大小 */
    transition: all 0.3s ease;
}

/* 导航链接悬停效果 */
#navigation ul li a:hover {
    background-color: #f9fafb;
    border-color: #2563eb;
    color: #2563eb;
}

/* ========================================
   表格 (table.table1) 样式设置
   ========================================
   用于日志页面、彩票历史等
   - padding: 单元格内边距
   - font-size: 表格字体大小
   ======================================== */
table.table1 {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

/* 表头样式 */
table.table1 thead th {
    background-color: #f9fafb;
    color: #1f2937;
    font-weight: 600;
    text-align: left;
    padding: 0.75rem 1rem;    /* 表头单元格内边距 */
    border-bottom: 2px solid #e5e7eb;
}

table.table1 thead.logs_head th {
    color: #1f2937;
    font-weight: 600;
    text-decoration: none;
    background-color: #f3f4f6;
}

/* 表格内容样式 */
table.table1 tbody td {
    padding: 0.75rem 1rem;    /* 内容单元格内边距 */
    border-bottom: 1px solid #e5e7eb;
    color: #374151;
}

table.table1 tbody tr:last-child td {
    border-bottom: none;
}

/* 鼠标悬停效果 */
table.table1 tbody tr:hover {
    background-color: #f9fafb;
}

/* 斑马纹效果（奇偶行不同颜色） */
table.table1 tbody tr:nth-child(even) {
    background-color: #fafafa;
}

table.table1 tbody tr:nth-child(even):hover {
    background-color: #f3f4f6;
}

/* Display options / sorting */
fieldset.display-options {
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1rem;
    margin: 1rem 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

fieldset.display-options label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.875rem;
    color: #374151;
}

fieldset.display-options select {
    padding: 0.375rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    background-color: #fff;
}

/* Pagination styling */
.action-bar {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

.action-bar .pagination {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.875rem;
    color: #6b7280;
}

.pagination a {
    padding: 0.375rem 0.625rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.25rem;
    background-color: #fff;
    color: #374151;
    text-decoration: none;
    transition: all 0.3s ease;
}

.pagination a:hover {
    background-color: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

.pagination strong {
    padding: 0.375rem 0.625rem;
    background-color: #2563eb;
    color: #fff;
    border-radius: 0.25rem;
}

/* HR styling */
hr.dashed {
    border: none;
    border-top: 1px dashed #e5e7eb;
    margin: 1rem 0;
}

/* ========================================
   面板和卡片 (.panel, .points-main-lists) 样式设置
   ========================================
   用于首页的各种信息卡片
   - width: 卡片宽度（百分比）
   - min-width: 卡片最小宽度
   - padding: 卡片内边距
   - margin: 卡片外边距
   ======================================== */
.back-lottery {
    font-weight: 600;
    font-size: 1.1em;
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: rgba(37, 99, 235, 0.08);
    border-radius: 0.375rem;
    transition: all 0.3s ease;
}

.back-lottery:hover {
    background-color: rgba(37, 99, 235, 0.15);
}

/* Panel Styling */
.panel {
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 1rem;            /* 面板内边距 */
    margin-bottom: 1rem;      /* 面板外边距 */
}

.panel .inner {
    padding: 0;
}

.panel h2,
.panel h3 {
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: #1f2937;
}

.panel h2 {
    font-size: 1.25rem;       /* 面板主标题字体大小 */
    line-height: 1.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.panel h3 {
    font-size: 1rem;          /* 面板副标题字体大小 */
    line-height: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 0.5rem;
}

.panel.bg1,
.panel.bg2,
.panel.bg3 {
    background-color: #fff;
}

.points-info {
    text-align: center;
    padding: 1.5rem;
}

.points-main-main {
    text-align: left;
    background-color: #f9fafb;
}

.points-main-main fieldset {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1.5rem;
    background-color: #fff;
}

.points-main-main p {
    margin: 0.5rem 0;
    line-height: 1.625;
}

/* 首页信息卡片列表 */
.points-main-lists {
    text-align: left;
    display: inline-flex;
    flex-direction: column;
    margin: 1%;               /* 卡片外边距 */
    width: 20%;               /* 卡片宽度（每行5个） */
    min-width: 180px;         /* 卡片最小宽度 */
    vertical-align: top;
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1rem;            /* 卡片内边距 */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.points-main-lists .inner {
    width: 100% !important;
}

.points-main-lists .column1,
.points-main-lists .column2 {
    display: inline-block;
    padding: 0.5rem 0;
}

.points-main-lists .column1 {
    min-width: 60%;
    float: left;
}

.points-main-lists .column2 {
    text-align: right;
    font-weight: 600;
    float: right;
    color: #2563eb;
}

.rich-user-avatar {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-bottom: 2px;
    vertical-align: middle;
}

.rich-user-avatar img {
    position: absolute;
    -moz-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    left: 0px;
    top: 0px;
    max-height: 20px;
    max-width: 20px;
    border-radius: 50%;
}

/* ========================================
   表单元素 (input, select, textarea) 样式设置
   ========================================
   - padding: 输入框内边距
   - font-size: 输入框字体大小
   - border: 边框样式
   ======================================== */
input[type="text"],
input[type="number"],
select,
textarea {
    padding: 0.5rem 0.75rem;      /* 输入框内边距 */
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.875rem;          /* 输入框字体大小 */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

input[type="text"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* ========================================
   按钮 (button, .button1, .button2) 样式设置
   ========================================
   - padding: 按钮内边距
   - font-size: 按钮字体大小
   - background-color: 背景颜色
   ======================================== */
button,
input[type="submit"],
.button1,
.button2 {
    display: inline-block;
    padding: 0.5rem 1rem;         /* 按钮内边距 */
    font-size: 0.875rem;          /* 按钮字体大小 */
    font-weight: 500;
    border-radius: 0.375rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* 主要按钮（蓝色） */
.button1 {
    background-color: #2563eb;
    color: #fff;
    border-color: #2563eb;
}

.button1:hover {
    background-color: #1d4ed8;
    border-color: #1d4ed8;
}

/* 次要按钮（灰色） */
.button2 {
    background-color: #f3f4f6;
    color: #374151;
    border-color: #d1d5db;
}

.button2:hover {
    background-color: #e5e7eb;
    border-color: #9ca3af;
}

/* ========================================
   响应式设计 - 移动端适配 (max-width: 768px)
   ========================================
   当屏幕宽度小于768px时应用的样式
   主要针对手机和平板设备

   如果想调整响应式断点：
   - 修改 @media (max-width: 768px) 中的 768px
   - 例如：@media (max-width: 640px) 只针对更小的屏幕
   ======================================== */
@media (max-width: 768px) {
    /* Tabs标签横向滚动 */
    .tabs ul {
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .tabs .tab a {
        white-space: nowrap;
        padding: 0.625rem 0.875rem;
        font-size: 0.813rem;
    }

    /* 信息卡片在移动端全宽显示 */
    .points-main-lists {
        width: 100%;
        min-width: 100%;
        margin: 0.5rem 0;
    }

    /* 左右栏在移动端变成上下排列 */
    #cp-menu,
    #cp-main,
    #cp-main.ucp-main {
        float: none;          /* 取消浮动 */
        width: 100%;          /* 宽度100% */
        max-width: none;
        padding-right: 0;
    }

    #cp-menu {
        margin-bottom: 1rem;
    }

    /* 表格在移动端横向滚动 */
    table.table1 {
        display: block;
        overflow-x: auto;
    }

    table.table1 thead th,
    table.table1 tbody td {
        padding: 0.5rem;
        font-size: 0.813rem;
    }

    /* 信息列表在移动端垂直排列 */
    fieldset dt {
        flex: 0 0 100%;       /* 标签占100%宽度 */
        margin-bottom: 0.25rem;
        font-size: 0.875rem;
    }

    fieldset dd {
        flex: 0 0 100%;       /* 值占100%宽度 */
        padding-left: 1rem;
        font-size: 0.875rem;
    }

    fieldset dl {
        flex-direction: column;
        align-items: flex-start;
        padding: 0.5rem 0;
    }

    /* 描述框在移动端缩小 */
    .cp-mini {
        padding: 1rem;
        font-size: 0.813rem;
    }

    .cp-mini h3 {
        font-size: 0.813rem;
    }

    .cp-mini dl.mini dd {
        font-size: 0.75rem;
    }

    fieldset {
        padding: 1rem;
    }

    fieldset h3 {
        margin: -1rem -1rem 0.75rem -1rem;
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }

    /* 导航链接在移动端优化 */
    #navigation ul {
        gap: 0.375rem;
    }

    #navigation ul li a {
        padding: 0.5rem 0.75rem;
        font-size: 0.813rem;
    }

    /* 排序选项在移动端垂直排列 */
    fieldset.display-options {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    fieldset.display-options label {
        flex-direction: column;
        align-items: stretch;
    }

    fieldset.display-options select,
    fieldset.display-options input {
        width: 100%;
    }

    /* 分页导航在移动端垂直排列 */
    .action-bar .pagination {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    /* 彩票返回按钮在移动端居中 */
    .back-lottery {
        display: block;
        text-align: center;
    }
}

/* Additional utility styles */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.mt-1 {
    margin-top: 0.5rem;
}

.mb-1 {
    margin-bottom: 0.5rem;
}

.p-1 {
    padding: 0.5rem;
}

/* Icon styling */
.icon.fa,
.icon.fa-eye,
.icon.fa-info {
    margin-right: 0.5rem;
    opacity: 0.7;
}

/* User points display */
#cp-main .panel > .inner > p:first-child {
    background-color: #f0f9ff;
    border: 1px solid #bfdbfe;
    border-radius: 0.5rem;
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: #1e40af;
}

/* Improve overall spacing */
.points-info .inner {
    padding: 0;
    width: 100%;
}

.points-info > .inner {
    display: block;
    width: 100%;
}

.points-info > .inner::after {
    content: "";
    display: table;
    clear: both;
}

/* Better panel nesting */
#cp-main .panel {
    background-color: transparent;
    border: none;
    padding: 0;
    width: 100%;
}

#cp-main .panel > .inner {
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 1.5rem;
    width: 100%;
}

/* Improve empty state messages */
fieldset dd:empty::after {
    content: "未设置";
    color: #9ca3af;
    font-style: italic;
    font-weight: 400;
}

/* Better text hierarchy */
.points-info h2 {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 1.5rem;
}

.points-info h3 {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
    color: #1f2937;
}

/* Improve readability */
.cp-mini dl.mini dd {
    font-size: 0.938rem;
}

fieldset dl {
    transition: background-color 0.15s ease;
}

fieldset dl:hover {
    background-color: #f9fafb;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    border-radius: 0.25rem;
}

/* Success/Error Messages */
.success-msg {
    padding: 1rem;
    background-color: #dcfce7;
    border: 1px solid #86efac;
    border-radius: 0.5rem;
    color: #166534;
    margin-bottom: 1rem;
}

.error-msg {
    padding: 1rem;
    background-color: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: 0.5rem;
    color: #991b1b;
    margin-bottom: 1rem;
}