/* 基础样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: #f5f7fa;
    color: #333;
    line-height: 1.6;
}

a {
    color: #409EFF;
    text-decoration: none;
    cursor: pointer;
}

a:hover {
    text-decoration: underline;
}

/* 布局 */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 顶部导航 */
.header {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
}

.logo {
    font-size: 20px;
    font-weight: bold;
    color: #409EFF;
}

.nav {
    display: flex;
    gap: 30px;
}

.nav a {
    color: #666;
    cursor: pointer;
    padding: 5px 0;
    border-bottom: 2px solid transparent;
    transition: all 0.3s;
}

.nav a:hover,
.nav a.active {
    color: #409EFF;
    border-bottom-color: #409EFF;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.balance {
    color: #67C23A;
    font-weight: bold;
}

/* 按钮 */
.btn-primary {
    background: #409EFF;
    color: #fff;
    border: none;
    padding: 10px 25px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.btn-primary:hover {
    background: #66b1ff;
}

.btn-primary:disabled {
    background: #c0c4cc;
    cursor: not-allowed;
}

/* 表单底部按钮区（靠右对齐） */
.form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 15px;
}

.form-actions .btn-primary {
    min-width: 100px;
}

.btn-outline {
    background: transparent;
    color: #409EFF;
    border: 1px solid #409EFF;
    padding: 8px 20px;
    border-radius: 4px;
    cursor: pointer;
}

.btn-outline:hover {
    background: #409EFF;
    color: #fff;
}

/* 模态框 */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background: #fff;
    border-radius: 8px;
    padding: 30px;
    max-width: 400px;
    width: 90%;
}

.close {
    float: right;
    font-size: 24px;
    cursor: pointer;
    color: #999;
}

.close:hover {
    color: #333;
}

.auth-tabs {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.auth-tabs button {
    background: none;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    color: #666;
    border-bottom: 2px solid transparent;
}

.auth-tabs button.active {
    color: #409EFF;
    border-bottom-color: #409EFF;
}

/* 表单 */
.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    color: #666;
}

.form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

/* 密码输入框右侧扩展区（眼睛 + 行内开关） */
.input-wrap {
    position: relative;
}

.input-wrap input {
    padding-right: 110px;
}

.pwd-toggle {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    padding: 4px 6px;
    cursor: pointer;
    color: #909399;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.pwd-toggle:hover {
    color: #409EFF;
    background: #f0f7ff;
}

.pwd-toggle:focus {
    outline: none;
}

.pwd-toggle svg {
    display: block;
}

/* 密码框右侧的强密码开关 */
.checkbox-inline.pwd-inline {
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
    margin: 0 !important;
    padding: 2px 6px;
    background: transparent;
}

.checkbox-inline.pwd-inline input[type="checkbox"] {
    width: 13px;
    height: 13px;
    margin: 0;
}

.checkbox-inline.pwd-inline span {
    font-size: 12px;
    color: #606266;
    white-space: nowrap;
}

.checkbox-inline.pwd-inline:hover span {
    color: #409EFF;
}

.checkbox-inline.pwd-inline input:checked + span {
    color: #409EFF;
    font-weight: 600;
}

.form-group.remember-group {
    margin-top: -8px;
    margin-bottom: 16px;
}

.form-group.remember-group .checkbox-inline {
    margin-top: 0;
}

.form-group.remember-group .checkbox-inline span {
    color: #606266;
    font-size: 13px;
}

.form-group.remember-group .checkbox-inline:hover span {
    color: #409EFF;
}

.form-group input:focus {
    outline: none;
    border-color: #409EFF;
}

/* 关闭浏览器原生的表单校验提示气泡，统一使用我们的自定义提示 */
input:invalid {
    box-shadow: none;
}
input:-moz-submit-invalid {
    box-shadow: none;
}
.form-group input:invalid,
.form-group input:focus:invalid {
    border-color: #ddd;
    outline: none;
}
.form-group input:focus:invalid {
    border-color: #409EFF;
}

.form-error {
    color: #F56C6C;
    margin-bottom: 10px;
    font-size: 14px;
}

/* 表单提示（中性、成功、错误） */
.form-hint {
    font-size: 12px;
    color: #909399;
    margin-top: 6px;
    line-height: 1.5;
}

.form-hint.success {
    color: #67C23A;
}

.form-hint.info {
    color: #909399;
}

.form-hint.error {
    color: #F56C6C;
}

.form-hint .hint-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    line-height: 12px;
    text-align: center;
    border-radius: 50%;
    font-size: 10px;
    margin-right: 4px;
    font-weight: bold;
    background: #F56C6C;
    color: #fff;
}

.form-hint.success .hint-icon {
    background: #67C23A;
}

/* 复选框行（强密码） */
.form-group-checkbox {
    margin-bottom: 12px;
}

.checkbox-label {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin-bottom: 0 !important;
    cursor: pointer;
    color: #606266;
    font-size: 13px;
    user-select: none;
}

.checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #409EFF;
}

.checkbox-label span {
    line-height: 1.2;
}

/* 密码框下方的行内强密码开关 */
.checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    margin-bottom: 0 !important;
    cursor: pointer;
    color: #606266;
    font-size: 13px;
    user-select: none;
    font-weight: normal !important;
}

.checkbox-inline input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: #409EFF;
    margin: 0;
}

.checkbox-inline span {
    line-height: 1.2;
}

/* 主内容 */
.main {
    min-height: calc(100vh - 120px);
    padding: 30px 0;
}

.login-required-page {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f7fa;
}

.login-required-box {
    background: #fff;
    border-radius: 12px;
    padding: 60px 80px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    text-align: center;
    max-width: 500px;
    width: 90%;
}

.login-required-box h1 {
    color: #303133;
    font-size: 26px;
    margin-bottom: 16px;
}

.login-required-box .subtitle {
    color: #409EFF;
    font-size: 16px;
    margin-bottom: 30px;
}

.login-required-box .desc {
    color: #909399;
    font-size: 14px;
    margin-bottom: 30px;
}

.login-required-box .action-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
}

.login-required-box .action-buttons button {
    padding: 12px 32px;
    font-size: 15px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s;
}

.forgot-password-hint {
    text-align: center;
    color: #909399;
    font-size: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #eee;
}

.page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.page h2 {
    margin-bottom: 20px;
    color: #333;
}

.page-desc {
    color: #666;
    margin-bottom: 30px;
}

/* 首页 */
.welcome-banner {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    padding: 60px 40px;
    border-radius: 12px;
    text-align: center;
    margin-bottom: 40px;
}

.welcome-banner h1 {
    font-size: 36px;
    margin-bottom: 15px;
}

.welcome-banner p {
    font-size: 18px;
    opacity: 0.9;
}

.stats-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.stat-card {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.stat-value {
    font-size: 36px;
    font-weight: bold;
    color: #409EFF;
    margin-bottom: 10px;
}

.stat-label {
    color: #666;
    font-size: 14px;
}

.results-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto;
}
.result-card {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    min-width: 220px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.result-card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(60, 60, 80, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: pointer;
    z-index: 10;
    overflow: hidden;
}
.result-card-overlay:hover {
    background: rgba(60, 60, 80, 0.65);
}
.overlay-text {
    padding: 8px 24px;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #3c3c50;
    letter-spacing: 1px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    pointer-events: none;
    transition: transform 0.2s;
}
.result-card-overlay:hover .overlay-text {
    transform: scale(1.05);
}

/* 从上往下滑入动画 */
.slide-down-enter-active,
.slide-down-leave-active {
    transition: max-height 0.3s ease, opacity 0.25s ease;
    max-height: 200px;
}
.slide-down-enter,
.slide-down-leave-to {
    max-height: 0;
    opacity: 0;
}
.slide-down-enter-to,
.slide-down-leave {
    max-height: 200px;
    opacity: 1;
}
@media (max-width: 900px) {
    .results-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .results-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

.latest-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.latest-results-header h2 {
    margin: 0;
}
.view-more {
    color: #2563eb;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s;
}
.view-more:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

.result-card {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.result-name {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}

.result-code {
    font-size: 0;            /* 移除行内空白 */
    color: #F56C6C;
    margin-bottom: 10px;
    letter-spacing: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

/* 彩球：球体固定不动，数字在球内上下滚动 */
.result-code .ball {
    display: inline-block;      /* 不要 flex，避免 flex 居中干扰 translateY */
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    color: #fff;
    font-size: 18px;            /* 父级 .result-code font-size: 0 这里需恢复 */
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
    /* 默认色（纯红底），data-color 覆盖之 */
    background: #ef4444;
    box-shadow:
        inset 0 -3px 6px rgba(0,0,0,0.2),
        inset 0 2px 6px rgba(255,255,255,0.5),
        0 2px 4px rgba(0,0,0,0.25);
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
}
/* 高光伪元素：球体左上角白点，营造立体感 */
.result-code .ball::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 5px;
    width: 12px;
    height: 8px;
    background: rgba(255,255,255,0.5);
    border-radius: 50%;
    transform: rotate(-30deg);
    z-index: 1;
    pointer-events: none;
}
/* 彩虹色球 */
.result-code .ball[data-color="#f97316"] { background: #f97316; }
.result-code .ball[data-color="#f59e0b"] { background: #f59e0b; }
.result-code .ball[data-color="#84cc16"] { background: #84cc16; }
.result-code .ball[data-color="#10b981"] { background: #10b981; }
.result-code .ball[data-color="#06b6d4"] { background: #06b6d4; }
.result-code .ball[data-color="#3b82f6"] { background: #3b82f6; }
.result-code .ball[data-color="#6366f1"] { background: #6366f1; }
.result-code .ball[data-color="#a855f7"] { background: #a855f7; }
.result-code .ball[data-color="#ec4899"] { background: #ec4899; }
.result-code .ball[data-color="#ef4444"] { background: #ef4444; }
/* 数字列：绝对定位，从球顶部开始。高度 = 10 * 40px = 400px，
   每个数字行 40px，因此 translateY(-d*10%) 恰好让第 d+1 行停在球的中央 */
.result-code .ball .ball-digit {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 400px;
    line-height: 40px;
    text-align: center;
    will-change: transform;
    font-variant-numeric: tabular-nums;
    font-size: 18px;
    font-weight: 700;
    /* 默认按 --stop-y 静态显示最终号码（滚动/停止时被动画覆盖） */
    transform: translateY(var(--stop-y, 0%));
}
/* 数字内容：每个数字 row 40px */
.result-code .ball .ball-digit > span {
    display: block;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
}
/* 滚动状态：球体加发光 */
.result-code .ball.rolling {
    box-shadow:
        inset 0 -3px 6px rgba(0,0,0,0.2),
        inset 0 2px 6px rgba(255,255,255,0.5),
        0 0 12px rgba(255, 200, 80, 0.55);
}
@keyframes digitRoll {
    0%   { transform: translateY(0%); }
    10%  { transform: translateY(-10%); }
    20%  { transform: translateY(-20%); }
    30%  { transform: translateY(-30%); }
    40%  { transform: translateY(-40%); }
    50%  { transform: translateY(-50%); }
    60%  { transform: translateY(-60%); }
    70%  { transform: translateY(-70%); }
    80%  { transform: translateY(-80%); }
    90%  { transform: translateY(-90%); }
    100% { transform: translateY(-100%); }
}
@keyframes digitStop {
    0%   { transform: translateY(0%); }
    100% { transform: translateY(var(--stop-y, 0%)); }
}
/* 滚动中：球体内的数字列循环 0-9 */
.result-code .ball.rolling .ball-digit {
    animation: digitRoll 0.18s linear infinite;
}
.result-code .ball.rolling.pending .ball-digit {
    /* pending 出现后减速 */
    animation: digitRoll 0.55s linear infinite;
}
/* 停止：取消滚动动画 + 让 CSS 变量 --stop-y 切换一次，
   浏览器把 transform 计算值视为"变化"（即使是等价值），触发 transition 平滑过渡。
   注意：这里不能再写 transform，否则会覆盖默认 transform 的计算基线。 */
.result-code .ball.stopped .ball-digit {
    animation: none;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    /* 重新声明 transform 走 CSS 变量路径，配合 JS 在停止时切 --stop-y 触发 transition */
    transform: translateY(var(--stop-y, 0%));
}
/* 球体本身在停止时跟随数字列一起做轻微"上推"弹动，确保号码始终显示在球中央 */
@keyframes ballLiftUp {
    0%   { transform: translateY(0)    scale(1); }
    35%  { transform: translateY(-6px) scale(1.06); }
    70%  { transform: translateY(2px)  scale(0.98); }
    100% { transform: translateY(0)    scale(1); }
}
.result-code .ball.stopped {
    animation: ballLiftUp 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 卡片底部：下期 + 倒计时 */
.result-next {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #eee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.result-next-info {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.result-next-label {
    font-size: 11px;
    color: #aaa;
}
.result-next-period {
    font-size: 13px;
    color: #444;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.result-countdown {
    font-size: 13px;
    color: #2563eb;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: #eff6ff;
    padding: 2px 8px;
    border-radius: 10px;
    transition: all 0.2s;
}
.result-countdown.drawing {
    color: #fff;
    background: linear-gradient(90deg, #ef4444, #f97316);
    animation: drawingPulse 1s ease-in-out infinite;
}
@keyframes drawingPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.85; transform: scale(1.05); }
}

.result-period {
    font-size: 12px;
    color: #999;
}

/* 订阅页面 */
.login-tip {
    background: #fdf6ec;
    padding: 15px 20px;
    border-radius: 4px;
    color: #E6A23C;
    margin-bottom: 20px;
}

.lottery-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.lottery-item {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.lottery-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.lottery-header h3 {
    margin: 0;
}

.lottery-tag {
    background: #409EFF;
    color: #fff;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 12px;
}

.prize-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.prize-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: #f5f7fa;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
}

.prize-checkbox:hover {
    background: #ecf5ff;
}

.prize-checkbox input {
    width: 18px;
    height: 18px;
}

.prize-checkbox .prize-name {
    flex: 1;
    font-size: 14px;
}

.prize-checkbox .prize-price {
    color: #67C23A;
    font-size: 12px;
}

.subscribe-actions {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 15px 20px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

/* 结果页面 */
.results-filters {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.results-filters select,
.results-filters input {
    padding: 8px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.results-table {
    width: 100%;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.results-table th,
.results-table td {
    padding: 15px;
    text-align: center;
    border-bottom: 1px solid #eee;
}

.results-table th {
    background: #f5f7fa;
    font-weight: 600;
}

.open-code {
    color: #F56C6C;
    font-weight: bold;
    letter-spacing: 1px;
}

/* 生肖/颜色标签 */
.attr-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-right: 3px;
}
.attr-badge .attr-animal {
    font-size: 11px;
    margin: 0 1px;
    opacity: 0.85;
}
.attr-badge .attr-color {
    font-size: 11px;
    margin: 0 1px;
    opacity: 0.75;
}
.attr-badge .attr-special {
    display: inline-block;
    background: #f39c12;
    color: #fff;
    font-size: 10px;
    border-radius: 3px;
    padding: 0 3px;
    margin-left: 2px;
    vertical-align: middle;
    font-weight: 700;
}
.attr-badge.attr-红  { background: #ffe0e0; color: #c0392b; border: 1px solid #f5c6c6; }
.attr-badge.attr-蓝  { background: #ddeeff; color: #1a5fa8; border: 1px solid #bdd6f0; }
.attr-badge.attr-绿  { background: #ddf5e6; color: #1e7e47; border: 1px solid #b8e5cc; }

/* 表格中开奖号码的球形 + 加号 + 球下生肖 */
.history-balls {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
    line-height: 1;
}
.history-ball-row,
.history-zodiac-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    max-width: 360px;   /* 10球 × 36px，超出自动换行 */
}
.history-ball-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 36px;          /* 固定宽度，让球和生肖都能精确对齐 */
    flex-shrink: 0;
}
.history-plus-sign {
    font-size: 18px;
    font-weight: 700;
    color: #ef4444;
    line-height: 28px;    /* 与球高一致，居中 */
    text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.history-zodiac-row .history-plus-sign {
    visibility: hidden;   /* 占位不显示 */
    line-height: 1.4;
}
.history-ball {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    position: relative;
    background: #f23d3d;
    color: #fff;
    box-shadow:
        0 2px 4px rgba(0,0,0,0.25),
        inset 0 -3px 6px rgba(0,0,0,0.2),
        inset 0 2px 6px rgba(255,255,255,0.5);
}
.history-ball::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 5px;
    width: 8px;
    height: 5px;
    background: rgba(255,255,255,0.45);
    border-radius: 50%;
    transform: rotate(-30deg);
}
.history-ball[data-color="红"] { background: #dc2626; }
.history-ball[data-color="蓝"] { background: #2563eb; }
.history-ball[data-color="绿"] { background: #16a34a; }
.history-animal {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    font-weight: 600;
    color: #555;
    text-align: center;
    line-height: 1.2;
}

.no-data {
    text-align: center;
    color: #999;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
}

.pagination button {
    padding: 8px 15px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
}

.pagination button:disabled {
    color: #c0c4cc;
    cursor: not-allowed;
}

/* API文档页面 */
.api-section {
    background: #fff;
    padding: 25px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.api-section h3 {
    margin-bottom: 15px;
    color: #333;
}

.api-section p {
    color: #666;
    margin-bottom: 10px;
}

.code-block {
    background: #282c34;
    color: #abb2bf;
    padding: 15px;
    border-radius: 4px;
    position: relative;
    margin-bottom: 15px;
}

.code-block code,
.code-block pre {
    font-family: "Consolas", "Monaco", monospace;
    font-size: 13px;
    white-space: pre-wrap;
    word-break: break-all;
}

.copy-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #4a4a4a;
    color: #fff;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.copy-btn:hover {
    background: #5a5a5a;
}

.api-key-box {
    background: #fdf6ec;
    border: 1px solid #f5dab1;
    padding: 15px;
    border-radius: 4px;
}

.api-section ul {
    margin-left: 20px;
    color: #666;
}

.api-section li {
    margin-bottom: 5px;
}

.prize-list-table {
    width: 100%;
    border-collapse: collapse;
}

.prize-list-table th,
.prize-list-table td {
    padding: 10px;
    border: 1px solid #eee;
    text-align: left;
}

.prize-list-table th {
    background: #f5f7fa;
}

.prize-list-table code {
    background: #f5f7fa;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 12px;
}

/* 页脚 */
.footer {
    background: #fff;
    padding: 20px 0;
    text-align: center;
    color: #999;
    border-top: 1px solid #eee;
}

/* 响应式 */
@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        height: auto;
        padding: 15px;
    }
    
    .nav {
        gap: 15px;
        margin: 15px 0;
    }
    
    .stats-cards {
        grid-template-columns: 1fr;
    }
    
    .prize-grid {
        grid-template-columns: 1fr;
    }
}

/* 消息提示弹窗 */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.modal-box {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    min-width: 320px;
    max-width: 90%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    text-align: center;
}

.toast-modal .toast-icon {
    margin-bottom: 16px;
}

.toast-modal .toast-icon.success {
    color: #52c41a;
}

.toast-modal .toast-icon.error {
    color: #ff4d4f;
}

.toast-modal .toast-icon.info {
    color: #1890ff;
}

.toast-message {
    font-size: 15px;
    color: #333;
    margin-bottom: 20px;
    line-height: 1.6;
}

.toast-btn {
    padding: 8px 32px;
    background: #1890ff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.toast-btn:hover {
    background: #40a9ff;
}

/* 用户下拉菜单 */
.user-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}

.user-dropdown:hover {
    background: rgba(0, 0, 0, 0.05);
}

.user-dropdown .dropdown-arrow {
    font-size: 10px;
    margin-left: 4px;
    color: #666;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    min-width: 120px;
    padding: 8px 0;
    z-index: 1000;
}

.dropdown-menu a {
    display: block;
    padding: 10px 16px;
    color: #333;
    font-size: 14px;
    text-decoration: none;
}

.dropdown-menu a:hover {
    background: #f5f7fa;
    text-decoration: none;
}

/* 资料弹窗 */
.profile-modal {
    max-width: 620px !important;
    width: 95% !important;
    max-height: 85vh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    flex-shrink: 0 !important;
}

.profile-modal .modal-body {
    overflow-y: auto !important;
    flex: 1 !important;
    min-height: 0 !important;
    padding-right: 4px !important;
}

/* 细滚动条样式 */
.profile-modal .modal-body::-webkit-scrollbar {
    width: 6px;
}

.profile-modal .modal-body::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.profile-modal .modal-body::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.profile-modal .modal-body::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

.profile-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.profile-modal .modal-header h3 {
    margin: 0;
    font-size: 18px;
    text-align: left;
    flex: 1;
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #999;
    line-height: 1;
}

.modal-close:hover {
    color: #333;
}

.profile-avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.profile-avatar-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
}

.profile-avatar-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.avatar-upload-btn {
    display: inline-block;
    padding: 6px 12px;
    background: #f0f2f5;
    color: #666;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
}

.avatar-upload-btn:hover {
    background: #e6e8eb;
}

.profile-modal .form-group,
.change-pwd-modal .form-group {
    margin-bottom: 16px;
}

.profile-modal .form-group label,
.change-pwd-modal .form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    color: #666;
}

.profile-modal .form-group input,
.change-pwd-modal .form-group input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    font-size: 14px;
}

.profile-modal .form-group input:focus,
.change-pwd-modal .form-group input:focus {
    border-color: #40a9ff;
    outline: none;
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
}

/* 修改密码弹窗 */
.change-pwd-modal {
    max-width: 380px;
    text-align: left;
}

.change-pwd-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.change-pwd-modal .modal-header h3 {
    margin: 0;
    font-size: 18px;
}

/* 确认弹窗 */
.confirm-modal {
    max-width: 320px;
    padding: 40px 30px;
}

.confirm-icon {
    margin-bottom: 16px;
}

.confirm-message {
    font-size: 16px;
    color: #333;
    margin-bottom: 24px;
}

.confirm-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.btn-danger {
    padding: 10px 24px;
    background: #ff4d4f;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}

.btn-danger:hover {
    background: #ff7875;
}

/* 资料弹窗宽度 */
.profile-modal {
    max-width: 620px !important;
    width: 95% !important;
    max-height: 85vh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    flex-shrink: 0 !important;
    text-align: left !important;
}

.profile-modal .modal-body {
    overflow-y: auto !important;
    flex: 1 !important;
    min-height: 0 !important;
    padding-right: 4px !important;
}

/* 账号和余额一行布局 */
.profile-row-group {
    display: flex;
    gap: 12px;
}

.profile-row-group .form-group.half {
    flex: 1;
    margin-bottom: 0;
}

/* 细滚动条样式 */
.profile-modal .modal-body::-webkit-scrollbar {
    width: 6px;
}

.profile-modal .modal-body::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.profile-modal .modal-body::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.profile-modal .modal-body::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* 只读输入框 */
.readonly-input {
    background: #f5f5f5 !important;
    color: #999 !important;
    cursor: not-allowed;
}

/* 只读提示 */
.readonly-tip {
    font-size: 12px;
    color: #ff4d4f;
    font-weight: normal;
}

/* 输入框下方错误提示 */
.field-error {
    display: block;
    color: #ff4d4f;
    font-size: 12px;
    margin-top: 4px;
}

/* API密钥行 */
.api-key-row {
    display: flex;
    gap: 8px;
}

.api-key-row input {
    flex: 1;
}

.btn-copy {
    padding: 10px 16px;
    background: #1890ff;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    white-space: nowrap;
}

.btn-copy:hover {
    background: #40a9ff;
}

/* ============== 淡入淡出 toast（不模态，自动消失） ============== */
.fade-toast {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    pointer-events: none;
    white-space: nowrap;
    max-width: 80vw;
}
.fade-toast.success {
    background: #f6ffed;
    color: #389e0d;
    border: 1px solid #b7eb8f;
}
.fade-toast.error {
    background: #fff2f0;
    color: #cf1322;
    border: 1px solid #ffa39e;
}
.fade-toast.info {
    background: #e6f7ff;
    color: #096dd9;
    border: 1px solid #91d5ff;
}
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s, transform 0.3s;
}
.fade-enter,
.fade-leave-to {
    opacity: 0;
    transform: translate(-50%, -12px);
}

/* =============================================
   彩种历史页
   ============================================= */
.lottery-history-page {
    padding: 0 20px;
}
.history-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.history-header h2 {
    font-size: 22px;
    color: #262626;
    white-space: nowrap;
}
.history-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.history-filter select,
.history-filter input[type="date"] {
    padding: 8px 12px;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    font-size: 14px;
    color: #333;
    background: #fff;
    outline: none;
}
.history-filter select:focus,
.history-filter input:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.15);
}
.loading-tip {
    text-align: center;
    color: #8c8c8c;
    padding: 40px 0;
    font-size: 15px;
}
.empty-tip {
    text-align: center;
    color: #bfbfbf;
    padding: 40px 0;
    font-size: 15px;
}

/* ==================== API 文档页（计费中心） ==================== */
.api-page h2 { margin-bottom: 16px; }

.api-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 16px;
    align-items: start;
}
@media (max-width: 860px) { .api-grid { grid-template-columns: 1fr; } }

.api-card {
    background: #fff;
    border: 1px solid #eceef2;
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(16,24,40,.04);
}
.api-card h3 { margin: 0 0 12px; font-size: 15px; color: #1f2937; }

.api-endpoint {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 0; border-bottom: 1px dashed #f0f1f4;
    font-size: 13px; flex-wrap: wrap;
}
.api-endpoint .method.get {
    background: #e8f7ee; color: #18a058; font-weight: 700;
    border-radius: 4px; padding: 2px 8px; font-size: 11px;
}
.api-endpoint code { background: #f6f7f9; padding: 2px 6px; border-radius: 4px; }
.api-endpoint .ep-desc { color: #8a94a6; font-size: 12px; margin-left: auto; }
.api-note { font-size: 12px; color: #8a94a6; margin-top: 10px; }
.api-card pre {
    background: #0f172a; color: #d7e3ff; padding: 12px;
    border-radius: 8px; overflow-x: auto; font-size: 12px; line-height: 1.5;
}

/* 套餐概览 */
.quota-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.quota-stat {
    background: linear-gradient(180deg, #f8fafc, #f1f5f9);
    border-radius: 10px; padding: 12px; text-align: center;
}
.qs-num { font-size: 20px; font-weight: 800; color: #2563eb; }
.qs-label { font-size: 12px; color: #64748b; margin-top: 2px; }

.tips-list { margin: 0; padding-left: 18px; font-size: 13px; color: #475569; line-height: 1.9; }
.tips-list b { color: #2563eb; }

/* 彩种选择器 */
.picker-card { margin-top: 4px; }
.picker-header { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.picker-meta { font-size: 13px; color: #475569; }
.picker-meta b.over { color: #ef4444; }
.pay-amount { color: #ef4444; font-size: 15px; }
.pay-sub { color: #94a3b8; font-size: 12px; }

.category-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.cat-tab {
    border: 1px solid #e2e8f0; background: #fff; color: #334155;
    padding: 6px 14px; border-radius: 999px; cursor: pointer; font-size: 13px;
    transition: all .15s;
}
.cat-tab:hover { border-color: #93c5fd; }
.cat-tab.active { background: #2563eb; border-color: #2563eb; color: #fff; }
.cat-count {
    display: inline-block; min-width: 18px; text-align: center;
    background: rgba(148,163,184,.25); border-radius: 999px;
    font-size: 11px; padding: 1px 5px; margin-left: 5px;
}
.cat-tab.active .cat-count { background: rgba(255,255,255,.25); }

.lottery-checker-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 8px; max-height: 420px; overflow-y: auto; padding-right: 4px;
}
.lot-check {
    display: flex; align-items: center; gap: 8px;
    border: 1px solid #e5e9f0; border-radius: 8px; padding: 9px 10px;
    cursor: pointer; transition: all .12s; position: relative; background: #fff;
}
.lot-check:hover { border-color: #93c5fd; box-shadow: 0 1px 4px rgba(37,99,235,.08); }
.lot-check.checked { border-color: #2563eb; background: #eff6ff; }
.lot-check input[type=checkbox] { accent-color: #2563eb; margin: 0; }
.lc-name { font-size: 13px; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-code { font-size: 11px; color: #94a3b8; margin-left: auto; }
.lc-owned-tag {
    margin-left: auto; flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 3px;
    background: #e8f7ee; color: #18a058;
    font-size: 11px; line-height: 1;
    padding: 4px 8px; border-radius: 999px;
    border: 1px solid #b7eb8f;
}
.lc-owned-tag svg { display: block; }

.picker-actions {
    display: flex; justify-content: flex-end; align-items: center; gap: 12px;
    margin-top: 16px; padding-top: 14px; border-top: 1px solid #f0f1f4;
}
.success-msg { color: #18a058; font-size: 13px; }
.error-msg { color: #ef4444; font-size: 13px; }

/* 支付宝弹窗 */
.pay-modal { width: 340px; max-width: 92vw; }
.modal-close {
    border: none; background: none; font-size: 22px; cursor: pointer;
    color: #94a3b8; line-height: 1;
}
.pay-body { text-align: center; padding: 6px 0 4px; }
.pay-amount-line { font-size: 14px; color: #475569; margin-bottom: 14px; }
.pay-amount-line b { color: #ef4444; font-size: 22px; }
.qrcode-box img {
    width: 220px; height: 220px; border: 1px solid #eceef2; border-radius: 8px;
}
.pay-hint { font-size: 12px; color: #8a94a6; line-height: 1.8; margin: 12px 0 6px; }
.pay-status { font-size: 12px; color: #2563eb; min-height: 18px; }
.pay-success-icon {
    width: 64px; height: 64px; margin: 10px auto; border-radius: 50%;
    background: #18a058; color: #fff; font-size: 34px; line-height: 64px; font-weight: 700;
}
.pay-success-text { color: #18a058; font-weight: 600; margin-bottom: 16px; }

/* ==================== 链接生成器 ==================== */
.linkgen {
    margin-top: 12px; padding: 12px;
    background: #f8fafc; border: 1px solid #eceef2; border-radius: 10px;
}
.lg-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.lg-row > label { font-size: 13px; color: #475569; width: 36px; flex-shrink: 0; }
.lg-select, .lg-input {
    padding: 7px 10px; border: 1px solid #dbe2ea; border-radius: 6px;
    font-size: 13px; background: #fff; color: #1e293b;
}
.lg-select { min-width: 200px; }
.lg-count { min-width: 90px; }
.lg-input { flex: 1; min-width: 180px; }
.lg-seg { display: flex; border: 1px solid #dbe2ea; border-radius: 6px; overflow: hidden; }
.seg-btn {
    border: none; background: #fff; color: #475569;
    padding: 7px 16px; font-size: 13px; cursor: pointer;
}
.seg-btn + .seg-btn { border-left: 1px solid #dbe2ea; }
.seg-btn.active { background: #2563eb; color: #fff; font-weight: 600; }
.lg-result {
    display: flex; align-items: center; gap: 8px;
    background: #0f172a; border-radius: 8px; padding: 10px 12px;
}
.lg-url {
    flex: 1; color: #86efac; font-size: 12px;
    word-break: break-all; line-height: 1.5;
}
.lg-result button {
    flex-shrink: 0; border: none; background: #2563eb; color: #fff;
    padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 12px;
}
.lg-hint { font-size: 12px; color: #94a3b8; text-align: center; padding: 4px 0; }

/* 链接生成器：期号模式切换 + 短输入框 */
.lg-mode-seg { display: inline-flex; }
.lg-short { width: 150px; min-width: 130px; }
.lg-dash { color: #94a3b8; }

/* 期号输入框下方的格式提示 */
.lg-input-wrap { display: flex; flex-direction: column; gap: 3px; }
.lg-tip {
    font-size: 11px; color: #94a3b8; line-height: 1.4;
}

/* 链接生成器：期号行与动态提示 */
.lg-period-row { align-items: center; }
.lg-sub-label { font-size: 13px; color: #475569; width: 60px; flex-shrink: 0; }
.lg-range-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* 动态提示行：缩进到与"连续期数"按钮对齐（label 宽 36 + gap 10 = 46px） */
.lg-help-row {
    padding-left: 46px;
    margin: -4px 0 8px;
    font-size: 12px;
    line-height: 1.5;
}
.lg-input.error, .lg-short.error {
    border-color: #ef4444 !important;
    background: #fef2f2;
}
.lg-err { color: #ef4444; font-size: 12px; }

/* 到期提醒横幅 */
.expire-banner {
    margin-top: 10px; padding: 8px 12px;
    background: #fffbe6; border: 1px solid #ffe58f; border-radius: 8px;
    font-size: 12px; color: #ad6800;
}
/* 过期角标 */
.lc-owned-tag.expired-tag {
    background: #fef2f2; color: #ef4444; border: 1px solid #fecaca;
}

/* 开通周期选择行 */
.lg-cycle-row {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: 14px; padding: 10px 14px;
    background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px;
}
.lg-cycle-label { font-size: 13px; color: #92400e; font-weight: 600; }
.lg-cycle-total { margin-left: auto; font-size: 13px; color: #92400e; }
.lg-cycle-total b { font-size: 17px; color: #ef4444; }

/* 我的订单页 */
.orders-table .order-type-tag {
    display: inline-block; padding: 2px 8px; border-radius: 4px;
    font-size: 12px;
}
.order-type-tag.recharge { background: #e8f7ee; color: #18a058; }
.order-type-tag.payment { background: #fff1f0; color: #cf1322; }
.order-type-tag.refund { background: #e6f7ff; color: #096dd9; }
.order-type-tag.adjust { background: #fff7e6; color: #d48806; }
.amount-in { color: #18a058; font-weight: 600; }
.amount-out { color: #cf1322; font-weight: 600; }
.order-remark { text-align: left !important; font-size: 12px; color: #64748b; max-width: 320px; }
.my-orders-page .data-table { background: #fff; border-radius: 12px; }

/* ==================== 套餐中心 ==================== */
.plan-current {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border: 1px solid #bfdbfe; border-radius: 12px;
    padding: 14px 20px; margin-bottom: 16px;
    display: flex; align-items: center;
}
.pc-label { font-size: 13px; color: #64748b; margin-right: 12px; }
.pc-name { font-size: 18px; font-weight: 800; color: #1d4ed8; margin-right: 12px; }
.pc-expire { font-size: 13px; color: #15803d; }
.pc-expired { font-size: 13px; color: #dc2626; }

.plans-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px; margin-bottom: 18px;
}
.plan-card {
    position: relative; background: #fff; border: 2px solid #eceef2;
    border-radius: 14px; padding: 22px 20px; text-align: center;
    transition: all .15s;
}
.plan-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(37,99,235,.12); }
.plan-card.current { border-color: #2563eb; box-shadow: 0 4px 16px rgba(37,99,235,.15); }
.plan-badge {
    position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
    background: #2563eb; color: #fff; font-size: 11px;
    padding: 3px 12px; border-radius: 999px; white-space: nowrap;
}
.plan-card h3 { margin: 0 0 8px; font-size: 17px; color: #1e293b; }
.plan-price { font-size: 30px; font-weight: 800; color: #1e293b; margin-bottom: 14px; }
.pp-unit { font-size: 12px; color: #94a3b8; font-weight: 400; }
.plan-features {
    list-style: none; padding: 0; margin: 0 0 18px;
    text-align: left; font-size: 13px; color: #475569; line-height: 2.1;
}
.plan-features b { color: #2563eb; }
.plan-buy-btn { width: 100%; }

.plans-note { background: #f8fafc; border-radius: 10px; padding: 14px 18px; }
.plans-note p { margin: 4px 0; font-size: 12px; color: #64748b; }

.pc-expire-line {
    margin-top: 12px; padding: 8px 12px;
    background: #fffbe6; border: 1px solid #ffe58f; border-radius: 8px;
    font-size: 12px; color: #ad6800;
}
.pc-upgrade, .pc-upgrade-link { margin-top: 12px; cursor: pointer; }

/* 链接生成器：期号块 */
.lg-period-block {
    margin-top: 10px; padding: 12px;
    background: #f8fafc; border: 1px solid #eceef2; border-radius: 8px;
}
.lg-period-inputs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.lg-tip-line { font-size: 11px; color: #94a3b8; margin-top: 6px; }
.lg-tip-line .lg-err { color: #ef4444; }

/* 彩种图标选择网格 */
.lottery-icon-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 10px; max-height: 480px; overflow-y: auto; padding-right: 4px;
}
.lot-icon-card {
    position: relative; cursor: pointer; text-align: center;
    background: #fff; border: 2px solid #eceef2; border-radius: 12px;
    padding: 10px 6px 8px; transition: all .12s;
}
.lot-icon-card:hover { border-color: #93c5fd; transform: translateY(-1px); }
.lot-icon-card.active { border-color: #2563eb; background: #eff6ff; }
.lot-icon-img {
    width: 52px; height: 52px; object-fit: cover;
    border-radius: 10px; display: block; margin: 0 auto 6px;
    background: #f8fafc; border: 1px solid #f0f1f4;
}
span.lot-icon-img.placeholder {
    display: flex; align-items: center; justify-content: center;
    color: #94a3b8; font-size: 20px; font-weight: 700;
}
.lot-icon-name {
    font-size: 11px; color: #334155;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lot-check-mark {
    position: absolute; top: -7px; right: -5px;
    width: 20px; height: 20px; border-radius: 50%;
    background: #2563eb; color: #fff; font-size: 12px; line-height: 20px;
    box-shadow: 0 1px 4px rgba(37,99,235,.4);
}

/* 接口列表：已选彩种 chips */
.lg-lottery-row { align-items: flex-start; }
.lg-selected-lots { display: flex; flex-wrap: wrap; gap: 6px; }
.lg-hint-inline { font-size: 12px; color: #94a3b8; padding: 6px 0; }
.lg-lot-chip {
    border: 1px solid #dbe2ea; background: #fff; color: #334155;
    padding: 5px 14px; border-radius: 999px; cursor: pointer;
    font-size: 13px; transition: all .12s;
}
.lg-lot-chip:hover { border-color: #93c5fd; }
.lg-lot-chip.active { background: #2563eb; border-color: #2563eb; color: #fff; font-weight: 600; }

/* 我的彩种：套餐标签 */
.pc-plan-tag {
    display: inline-block; margin-left: 4px;
    background: #2563eb; color: #fff; font-size: 11px;
    padding: 2px 8px; border-radius: 999px;
}
.picker-meta b { color: #2563eb; font-size: 14px; }