/* ===== 测评页面 ===== */
.assessment-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
}

.assess-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: transform 0.2s;
    display: flex;
    gap: 16px;
    align-items: center;
}

.assess-card:active {
    transform: scale(0.98);
}

.assess-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.assess-info h4 {
    font-size: 15px;
    margin-bottom: 4px;
}

.assess-info p {
    font-size: 12px;
    color: var(--text-lighter);
    margin-bottom: 6px;
}

.assess-meta {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: var(--text-lighter);
}

/* 测评答题 */
.quiz-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
}

.progress-bar {
    flex: 1;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius: 3px;
    transition: width 0.3s ease;
}

#quiz-progress-text {
    font-size: 12px;
    color: var(--text-lighter);
    white-space: nowrap;
}

.quiz-question {
    padding: 20px 16px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
}

.quiz-options {
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.quiz-option {
    padding: 14px 16px;
    background: var(--card-bg);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
}

.quiz-option:hover {
    border-color: var(--primary);
}

.quiz-option.selected {
    border-color: var(--primary);
    background: #f0f0ff;
    color: var(--primary);
}

.quiz-nav {
    display: flex;
    justify-content: space-between;
    padding: 24px 16px;
    gap: 12px;
}

.quiz-nav button {
    flex: 1;
}

/* 测评结果 */
.assessment-result {
    padding: 24px 16px;
    text-align: center;
}

.result-score {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: #fff;
}

.result-score .score-num {
    font-size: 36px;
    font-weight: 700;
}

.result-score .score-label {
    font-size: 12px;
    opacity: 0.8;
}

.result-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
}

.result-desc {
    font-size: 14px;
    color: var(--text-light);
    line-height: 1.8;
    margin-bottom: 20px;
    text-align: left;
    padding: 16px;
    background: var(--bg);
    border-radius: var(--radius);
}

.result-suggestions {
    text-align: left;
    margin-bottom: 24px;
}

.result-suggestions h4 {
    font-size: 15px;
    margin-bottom: 12px;
}

.suggestion-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-light);
}

.suggestion-item i {
    color: var(--success);
    margin-top: 2px;
}

/* ===== 打卡页面 ===== */
.checkin-calendar {
    background: var(--card-bg);
    padding: 16px;
    margin: 16px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.calendar-header h4 {
    font-size: 15px;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    text-align: center;
}

.calendar-day-name {
    font-size: 11px;
    color: var(--text-lighter);
    padding: 4px 0;
}

.calendar-day {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    border-radius: 50%;
    font-size: 12px;
    color: var(--text-light);
}

.calendar-day.today {
    border: 2px solid var(--primary);
    color: var(--primary);
    font-weight: 600;
}

.calendar-day.checked {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
}

.calendar-day.empty {
    visibility: hidden;
}

.checkin-stats {
    display: flex;
    justify-content: space-around;
    padding: 0 16px;
    margin-bottom: 16px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.stat-num {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary);
}

.stat-label {
    font-size: 12px;
    color: var(--text-lighter);
}

.checkin-today {
    padding: 0 16px;
}

.checkin-today h3 {
    font-size: 15px;
    margin-bottom: 12px;
}

.task-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: var(--shadow);
    margin-bottom: 16px;
}

.task-card h4 {
    font-size: 14px;
    margin-bottom: 6px;
}

.task-card p {
    font-size: 13px;
    color: var(--text-light);
    line-height: 1.6;
}

.btn-checkin {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
    border: none;
    border-radius: 25px;
    font-size: 16px;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
}

.btn-checkin:active {
    opacity: 0.8;
    transform: scale(0.97);
}

.btn-checkin.done {
    background: var(--bg);
    color: var(--success);
    border: 2px solid var(--success);
}

/* 打卡表单 */
.checkin-form {
    padding: 0 16px;
    margin-top: 16px;
}

.checkin-form h3 {
    font-size: 15px;
    margin-bottom: 12px;
}

.checkin-form textarea {
    width: 100%;
    height: 120px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px;
    font-size: 14px;
    resize: none;
    outline: none;
    font-family: inherit;
    transition: border-color 0.2s;
}

.checkin-form textarea:focus {
    border-color: var(--primary);
}

.mood-selector {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0 16px;
}

.mood-selector span {
    font-size: 13px;
    color: var(--text-light);
}

.mood-options {
    display: flex;
    gap: 8px;
}

.mood-item {
    font-size: 24px;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    transition: transform 0.2s, background 0.2s;
}

.mood-item:hover {
    transform: scale(1.2);
}

.mood-item.selected {
    background: #f0f0ff;
    transform: scale(1.2);
}

/* ===== 个人中心 ===== */
.profile-header {
    flex-direction: column;
    padding: 0;
    border: none;
    position: relative;
}

.profile-bg {
    width: 100%;
    height: 120px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
}

.profile-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -40px;
    padding-bottom: 16px;
}

.avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a8edea, #fed6e3);
    border: 4px solid var(--card-bg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-info h2 {
    font-size: 18px;
    margin-top: 8px;
}

.profile-info p {
    font-size: 12px;
    color: var(--primary);
    margin-top: 4px;
}

.profile-content {
    padding-top: 0 !important;
}

.profile-stats {
    display: flex;
    justify-content: space-around;
    padding: 16px;
    background: var(--card-bg);
    margin: 0 16px 16px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.p-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.p-stat-num {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary);
}

.p-stat-label {
    font-size: 12px;
    color: var(--text-lighter);
}

/* 成长旅程卡片 */
.growth-journey-card {
    padding: 16px;
    background: var(--card-bg);
    margin: 0 16px 16px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.growth-journey-track {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    margin: 12px 0;
}

.growth-journey-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.growth-journey-icon {
    font-size: 18px;
    line-height: 1;
}

.growth-journey-label {
    font-size: 10px;
    color: var(--text-light);
    white-space: nowrap;
}

.growth-journey-connector {
    flex: 0 0 auto;
    width: 16px;
    height: 2px;
    background: var(--border);
    margin-top: 9px;
}

.growth-journey-connector.done {
    background: var(--primary);
}

/* 菜单 */
.profile-menu {
    padding: 0 16px;
}

/* 分组标签 */
.menu-group-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-lighter);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 4px 6px;
    margin-top: 4px;
}

.menu-group {
    background: var(--card-bg);
    border-radius: var(--radius);
    margin-bottom: 8px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.menu-item {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid var(--border);
}

.menu-item:last-child {
    border-bottom: none;
}

.menu-item:active {
    background: var(--bg);
}

.menu-icon-badge {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
}

.menu-icon-badge .i {
    width: 16px;
    height: 16px;
}

.menu-item span {
    flex: 1;
    font-size: 14px;
}

.menu-item i:last-child {
    font-size: 12px;
    color: var(--text-lighter);
}

/* 危险操作（退出登录） */
.menu-item--danger,
.menu-item--danger i,
.menu-item--danger span {
    color: var(--danger) !important;
}

/* 确认弹窗危险按钮 */
.btn-danger {
    background: var(--danger);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 11px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* ===== 冥想页面 ===== */
.meditation-container {
    text-align: center;
    padding: 40px 20px;
}

.meditation-circle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    margin: 0 auto 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    animation: breathe 4s ease-in-out infinite;
    box-shadow: 0 10px 40px rgba(102, 126, 234, 0.3);
}

@keyframes breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

.meditation-circle .time {
    font-size: 36px;
    font-weight: 700;
}

.meditation-circle .label {
    font-size: 13px;
    opacity: 0.8;
    margin-top: 4px;
}

.meditation-tip {
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 24px;
    line-height: 1.6;
}

.meditation-controls {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.med-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    transition: transform 0.2s;
}

.med-btn:active {
    transform: scale(0.9);
}

.med-btn.play {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
    width: 64px;
    height: 64px;
    font-size: 22px;
}

.med-btn.secondary {
    background: var(--bg);
    color: var(--text-light);
}

/* ===== 情绪记录 ===== */
.mood-record-container {
    padding: 16px;
}

.mood-chart {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: var(--shadow);
}

.mood-chart h4 {
    font-size: 15px;
    margin-bottom: 16px;
}

/* mood-bars 旧定义已迁移到 mood-quick-record 区块，此处保留空位 */

.mood-history {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: var(--shadow);
}

.mood-history h4 {
    font-size: 15px;
    margin-bottom: 12px;
}

.mood-entry {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.mood-entry:last-child {
    border-bottom: none;
}

.mood-entry .emoji {
    font-size: 24px;
}

.mood-entry-info {
    flex: 1;
}

.mood-entry-info .date {
    font-size: 11px;
    color: var(--text-lighter);
}

.mood-entry-info .text {
    font-size: 13px;
    color: var(--text-light);
    margin-top: 2px;
}

/* ===== 成长报告 ===== */
.growth-report {
    padding: 20px;
}

.growth-header {
    text-align: center;
    margin-bottom: 24px;
}

.growth-header h3 {
    font-size: 18px;
    margin-bottom: 4px;
}

.growth-header p {
    font-size: 13px;
    color: var(--text-lighter);
}

.growth-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: var(--shadow);
}

.growth-card h4 {
    font-size: 14px;
    color: var(--primary);
    margin-bottom: 12px;
}

.growth-stat-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

.growth-stat-row:last-child {
    border-bottom: none;
}

.growth-stat-row .label {
    color: var(--text-light);
}

.growth-stat-row .value {
    font-weight: 600;
    color: var(--text);
}

/* ===== 邀请页面 ===== */
.invite-container {
    text-align: center;
    padding: 20px;
}

.invite-code-box {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-radius: var(--radius);
    padding: 30px 20px;
    color: #fff;
    margin-bottom: 20px;
}

.invite-code-box h3 {
    font-size: 16px;
    margin-bottom: 12px;
    opacity: 0.9;
}

.invite-code {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 4px;
    margin-bottom: 12px;
}

.invite-code-box p {
    font-size: 12px;
    opacity: 0.7;
}

.invite-rewards {
    text-align: left;
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 20px;
}

.invite-rewards h4 {
    font-size: 14px;
    margin-bottom: 10px;
}

.reward-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 13px;
    color: var(--text-light);
}

.reward-item i {
    color: var(--warning);
}


/* ===== 疗愈旅行页面 ===== */
.travel-list {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.travel-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: transform 0.2s;
}

.travel-card:active {
    transform: scale(0.98);
}

.travel-cover {
    height: 180px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.travel-cover::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(transparent, rgba(0,0,0,0.5));
}

.travel-date-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(255,255,255,0.95);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: var(--primary);
}

.travel-status-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.travel-status-badge.recruiting {
    background: var(--success);
    color: #fff;
}

.travel-status-badge.full {
    background: var(--warning);
    color: #fff;
}

.travel-status-badge.ended {
    background: var(--text-lighter);
    color: #fff;
}

.travel-info {
    padding: 16px;
}

.travel-info h3 {
    font-size: 17px;
    margin-bottom: 8px;
    line-height: 1.4;
}

.travel-info p {
    font-size: 13px;
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.travel-meta {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: var(--text-lighter);
}

.travel-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.travel-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.travel-price .price {
    font-size: 20px;
    font-weight: 700;
    color: var(--danger);
}

.travel-price .price small {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-lighter);
}

.travel-price .btn-join {
    padding: 8px 20px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
    border: none;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
}

/* 旅行详情页 */
.travel-detail-page {
    background: var(--card-bg);
    min-height: 100vh;
}

.travel-detail-header {
    position: relative;
}

.travel-detail-cover {
    height: 240px;
    background-size: cover;
    background-position: center;
}

.travel-detail-back {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    color: var(--text);
}

.travel-detail-share {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    color: var(--text);
}

.travel-detail-content {
    padding: 20px;
    margin-top: -20px;
    background: var(--card-bg);
    border-radius: 20px 20px 0 0;
    position: relative;
}

.travel-detail-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
    line-height: 1.4;
}

.travel-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
    font-size: 13px;
    color: var(--text-light);
}

.travel-detail-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg);
    padding: 6px 12px;
    border-radius: 16px;
}

.travel-detail-meta i {
    color: var(--primary);
}

.travel-detail-section {
    margin-bottom: 24px;
}

.travel-detail-section h4 {
    font-size: 15px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.travel-detail-section h4 i {
    color: var(--primary);
}

.travel-detail-body {
    font-size: 14px;
    color: var(--text-light);
    line-height: 1.8;
}

.travel-detail-body img {
    max-width: 100%;
    border-radius: 8px;
    margin: 12px 0;
}

.travel-detail-body p {
    margin-bottom: 12px;
}

.travel-detail-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--card-bg);
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border);
    max-width: 430px;
    margin: 0 auto;
}

.travel-detail-footer .price {
    font-size: 24px;
    font-weight: 700;
    color: var(--danger);
}

.travel-detail-footer .price small {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-lighter);
}

.travel-detail-footer .btn-enroll {
    padding: 12px 32px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
    border: none;
    border-radius: 25px;
    font-size: 15px;
    cursor: pointer;
}

/* 空状态 */
.travel-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-lighter);
}

.travel-empty i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.travel-empty p {
    font-size: 14px;
}

/* ===== 疗愈旅行报名表单 ===== */
.travel-booking-form {
    padding: 4px 4px 16px;
}

.booking-summary {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--bg);
    border-radius: 12px;
    margin-bottom: 18px;
}

.booking-cover {
    width: 80px;
    height: 80px;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    flex-shrink: 0;
}

.booking-summary-info { flex: 1; min-width: 0; }

.booking-summary-info h4 {
    font-size: 14px;
    color: var(--text);
    margin: 0 0 6px;
    line-height: 1.4;
}

.booking-summary-info p {
    font-size: 12px;
    color: var(--text-light);
    margin: 3px 0;
}

.booking-summary-info i {
    width: 14px;
    color: var(--text-lighter);
}

.bk-field {
    margin-bottom: 14px;
}

.bk-field label {
    display: block;
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 6px;
}

.bk-required { color: #e74c3c; }

.bk-field input,
.bk-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    color: var(--text);
    background: var(--card-bg);
    box-sizing: border-box;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
}

.bk-field input:focus,
.bk-field textarea:focus {
    border-color: var(--primary);
}

.bk-field textarea {
    resize: none;
    line-height: 1.5;
}

.bk-count-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bk-count-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text);
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
}

.bk-count-btn:active { background: var(--bg); }

.bk-count-display {
    min-width: 28px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: var(--text);
}

.bk-count-hint {
    font-size: 12px;
    color: var(--text-lighter);
    margin-left: auto;
}

.booking-total-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.bk-total-label {
    font-size: 12px;
    color: var(--text-lighter);
    margin-bottom: 2px;
}

.bk-total-price {
    font-size: 22px;
    color: #e74c3c;
    font-weight: 600;
}

.booking-submit-btn {
    padding: 12px 28px;
    border-radius: 25px;
    font-size: 15px;
}

.bk-disclaimer {
    font-size: 12px;
    color: var(--text-lighter);
    line-height: 1.5;
    margin-top: 14px;
    padding: 10px 12px;
    background: var(--bg);
    border-radius: 8px;
}

.bk-disclaimer i { margin-right: 4px; }

/* 报名成功页 */
.booking-success {
    padding: 8px 16px 20px;
    text-align: center;
}

.success-icon-wrap {
    display: flex;
    justify-content: center;
    margin: 10px 0 14px;
}

.success-icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, #43c47e, #2eb262);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 4px 16px rgba(67, 196, 126, 0.35);
}

.success-title {
    font-size: 18px;
    color: var(--text);
    margin: 0 0 4px;
}

.success-desc {
    font-size: 13px;
    color: var(--text-light);
    margin: 0 0 18px;
}

.success-card {
    background: var(--bg);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 18px;
    text-align: left;
}

.success-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 13px;
}

.success-row > span:first-child { color: var(--text-lighter); }
.success-row > span:not(:first-child),
.success-row strong { color: var(--text); }

.success-name {
    text-align: right;
    margin-left: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60%;
}

.success-row--total {
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
}

.success-amount {
    color: #e74c3c !important;
    font-size: 18px;
    font-weight: 600;
}

.success-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

.success-actions button {
    flex: 1;
    padding: 12px;
    border-radius: 24px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.success-actions .btn-secondary {
    background: var(--card-bg);
    color: var(--text-light);
    border: 1px solid var(--border);
}

.booking-pay-btn {
    background: linear-gradient(135deg, #07c160, #06ad56);
    color: #fff;
    border: none;
}

.booking-pay-btn[disabled] {
    background: var(--border);
    color: var(--text-lighter);
    cursor: not-allowed;
}

.success-tip {
    font-size: 12px;
    color: var(--text-lighter);
    margin: 0;
}

.success-tip i { margin-right: 4px; color: var(--primary); }

/* ===== 作业提交样式 ===== */
.homework-submit-form {
    padding: 8px 0;
}

.homework-info {
    margin-bottom: 16px;
}

.homework-chapter {
    background: var(--bg);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-light);
}

.homework-submit-form .form-group {
    margin-bottom: 16px;
}

.homework-submit-form .form-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--text);
}

.homework-submit-form .form-group label .required {
    color: var(--danger);
}

.homework-submit-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    resize: vertical;
    min-height: 120px;
}

.homework-submit-form textarea:focus {
    outline: none;
    border-color: var(--primary);
}

.form-hint {
    font-size: 12px;
    color: var(--text-lighter);
    margin-top: 6px;
}

.image-upload-area {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.upload-btn {
    width: 80px;
    height: 80px;
    border: 2px dashed var(--border);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.upload-btn:hover {
    border-color: var(--primary);
    background: rgba(102, 126, 234, 0.05);
}

.upload-btn i {
    font-size: 20px;
    color: var(--text-lighter);
    margin-bottom: 4px;
}

.upload-btn span {
    font-size: 11px;
    color: var(--text-lighter);
}

.uploaded-image {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.uploaded-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.uploaded-image .delete-image {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    background: rgba(0,0,0,0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.uploaded-image .delete-image i {
    font-size: 10px;
    color: #fff;
}

.audio-record-area {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-record {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 24px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-record:hover {
    background: rgba(102, 126, 234, 0.1);
    border-color: var(--primary);
}

.btn-record.recording {
    background: #ffebee;
    border-color: var(--danger);
    color: var(--danger);
}

.btn-record i {
    font-size: 16px;
}

.audio-preview {
    display: flex;
    align-items: center;
    gap: 8px;
}

.audio-preview audio {
    height: 36px;
}

.btn-delete-audio {
    width: 32px;
    height: 32px;
    border: none;
    background: #ffebee;
    color: var(--danger);
    border-radius: 50%;
    cursor: pointer;
}

.btn-homework {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-homework:hover {
    opacity: 0.9;
}

/* ===== 我的作业列表 ===== */
.my-homeworks-list {
    padding: 8px 0;
}

.homework-item {
    padding: 16px;
    background: var(--bg);
    border-radius: 12px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.homework-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.homework-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.homework-item-header .course-name {
    font-size: 12px;
    color: var(--primary);
    background: rgba(102, 126, 234, 0.1);
    padding: 4px 8px;
    border-radius: 4px;
}

.homework-item-header .status-badge {
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
}

.homework-item-header .status-badge.pending {
    background: #fff3e0;
    color: #ff9800;
}

.homework-item-header .status-badge.reviewed {
    background: #e8f5e9;
    color: #4caf50;
}

.homework-item-chapter {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
}

.homework-item-content {
    font-size: 13px;
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 8px;
}

.homework-item-footer {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--text-lighter);
}

.homework-item-footer .has-image,
.homework-item-footer .has-audio {
    color: var(--primary);
}

/* ===== 作业详情 ===== */
.submission-detail {
    padding: 8px 0;
}

.submission-meta {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.submission-meta .course-name,
.submission-meta .chapter-name {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 4px;
    background: var(--bg);
    color: var(--text-light);
}

.submission-content {
    margin-bottom: 16px;
}

.submission-content p {
    font-size: 14px;
    line-height: 1.8;
    color: var(--text);
}

.submission-images {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.submission-images img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
}

.submission-time {
    font-size: 12px;
    color: var(--text-lighter);
    margin-bottom: 20px;
}

.review-section {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    border-radius: 12px;
    padding: 16px;
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.review-header .review-icon {
    font-size: 20px;
    margin-right: 8px;
}

.review-header .review-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
}

.review-rating {
    font-size: 14px;
}

.review-content {
    font-size: 14px;
    line-height: 1.8;
    color: var(--text);
}

.review-time {
    font-size: 12px;
    color: var(--text-lighter);
    margin-top: 12px;
}

.pending-review {
    text-align: center;
    padding: 30px 20px;
    background: var(--bg);
    border-radius: 12px;
}

.pending-review i {
    font-size: 36px;
    color: var(--text-lighter);
    margin-bottom: 12px;
}

.pending-review p {
    font-size: 14px;
    color: var(--text);
    margin-bottom: 4px;
}

.pending-review span {
    font-size: 12px;
    color: var(--text-lighter);
}

/* ===== 点评列表 ===== */
.reviews-list {
    padding: 8px 0;
}

.review-item {
    padding: 16px;
    background: var(--bg);
    border-radius: 12px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.review-item.unread {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.08), rgba(118, 75, 162, 0.08));
    border: 1px solid rgba(102, 126, 234, 0.2);
}

.review-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.review-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.tutor-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tutor-avatar {
    font-size: 24px;
}

.tutor-name {
    font-size: 14px;
    font-weight: 500;
}

.tutor-title {
    font-size: 11px;
    color: var(--primary);
    background: rgba(102, 126, 234, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 4px;
}

.unread-badge {
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
}

.review-item-course {
    font-size: 12px;
    color: var(--text-lighter);
    margin-bottom: 8px;
}

.review-item-content {
    font-size: 13px;
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 8px;
}

.review-item-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--text-lighter);
}

/* ===== 空状态 ===== */
.empty-state {
    text-align: center;
    padding: 40px 20px;
}

.empty-state i {
    font-size: 48px;
    color: var(--text-lighter);
    margin-bottom: 16px;
}

.empty-state p {
    font-size: 14px;
    color: var(--text);
    margin-bottom: 4px;
}

.empty-state span {
    font-size: 12px;
    color: var(--text-lighter);
}

/* ===== 图片预览 ===== */
.image-preview-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.9);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-preview-container {
    position: relative;
    max-width: 90%;
    max-height: 90%;
}

.image-preview-container img {
    max-width: 100%;
    max-height: 90vh;
    border-radius: 8px;
}

.close-preview {
    position: absolute;
    top: -40px;
    right: 0;
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.close-preview i {
    color: #fff;
    font-size: 18px;
}


/* ===== 社区样式 ===== */
.community-tabs {
    display: flex;
    background: #fff;
    padding: 0 16px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 10;
}

.community-tab {
    flex: 1;
    text-align: center;
    padding: 14px 0;
    font-size: 14px;
    color: var(--text-light);
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
}

.community-tab.active {
    color: var(--primary);
    font-weight: 600;
}

.community-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 3px;
    background: var(--primary);
    border-radius: 2px;
}

.community-section {
    padding: 16px;
}

/* 发布动态入口 */
.post-create-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.post-create-avatar {
    font-size: 24px;
}

.post-create-text {
    flex: 1;
    font-size: 14px;
    color: var(--text-lighter);
}

.btn-post {
    padding: 8px 16px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
}

/* 创作市集 */
.market-slogan {
    text-align: center;
    font-size: 13px;
    color: var(--text-light);
    background: var(--tint-mint);
    padding: 10px 12px;
    border-radius: 10px;
    margin-bottom: 16px;
}

.market-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.creation-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    cursor: pointer;
    transition: all 0.2s;
}

.creation-card:hover {
    transform: translateY(-2px);
}

.creation-cover {
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    background: var(--tint-lavender);
}

.creation-info {
    padding: 10px 12px 12px;
}

.creation-type-tag {
    display: inline-block;
    font-size: 10px;
    color: var(--primary);
    background: var(--tint-lavender);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    margin-bottom: 6px;
}

.creation-info h4 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 34px;
}

.creation-creator {
    font-size: 11px;
    color: var(--text-lighter);
    margin-bottom: 6px;
}

.creation-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.creation-price {
    font-size: 14px;
    font-weight: 700;
    color: #ff5722;
}

.creation-sales {
    font-size: 10px;
    color: var(--text-lighter);
}

.creator-earnings-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #00bfa5, #00e5c7);
    color: #fff;
    border-radius: var(--radius);
    padding: 16px 20px;
}

.creator-earnings-label {
    font-size: 12px;
    opacity: 0.9;
    margin-bottom: 4px;
}

.creator-earnings-num {
    font-size: 24px;
    font-weight: 700;
}

.creator-earnings-card .i {
    width: 32px;
    height: 32px;
    opacity: 0.85;
}

/* 动态卡片 */
.post-card {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.post-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.post-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.post-avatar {
    font-size: 36px;
}

.post-user-info {
    display: flex;
    flex-direction: column;
}

.post-user-name {
    font-size: 14px;
    font-weight: 500;
}

.post-user-meta {
    font-size: 11px;
    color: var(--text-lighter);
}

.post-time {
    font-size: 12px;
    color: var(--text-lighter);
}

.post-content {
    font-size: 14px;
    line-height: 1.8;
    color: var(--text);
    margin-bottom: 12px;
}

.post-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-bottom: 12px;
    border-radius: 8px;
    overflow: hidden;
}

.post-images.single {
    grid-template-columns: 1fr;
    max-width: 70%;
}

.post-images img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    cursor: pointer;
}

.post-images.single img {
    aspect-ratio: auto;
    max-height: 300px;
    border-radius: 8px;
}

.post-actions {
    display: flex;
    gap: 24px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.post-action {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-lighter);
    cursor: pointer;
    transition: all 0.2s;
}

.post-action:hover {
    color: var(--primary);
}

.post-action.liked {
    color: #e91e63;
}

.post-action.liked i {
    animation: likeAnim 0.3s ease;
}

@keyframes likeAnim {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}

/* 评论预览 */
.post-comments-preview {
    background: var(--bg);
    border-radius: 8px;
    padding: 10px 12px;
    margin-top: 12px;
}

.comment-item {
    font-size: 13px;
    line-height: 1.8;
}

.comment-user {
    color: var(--primary);
    font-weight: 500;
}

.comment-text {
    color: var(--text);
}

.view-all-comments {
    font-size: 12px;
    color: var(--text-lighter);
    margin-top: 4px;
    cursor: pointer;
}

/* 评论弹窗 */
.comments-container {
    display: flex;
    flex-direction: column;
    height: 400px;
}

.comments-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.empty-comments {
    text-align: center;
    padding: 40px;
    color: var(--text-lighter);
}

.comment-full {
    display: flex;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.comment-avatar {
    font-size: 28px;
}

.comment-body {
    flex: 1;
}

.comment-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}

.comment-name {
    font-size: 13px;
    font-weight: 500;
}

.comment-time {
    font-size: 11px;
    color: var(--text-lighter);
}

.comment-content {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
}

.comment-input-area {
    display: flex;
    gap: 8px;
    padding: 12px 0;
    border-top: 1px solid var(--border);
}

.comment-input-area input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 14px;
}

.comment-input-area button {
    padding: 10px 20px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
}

/* 发布动态表单 */
.create-post-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    resize: none;
    margin-bottom: 12px;
}

.post-images-upload {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.post-images-upload .upload-btn {
    width: 70px;
    height: 70px;
}

.post-images-upload .uploaded-image {
    width: 70px;
    height: 70px;
}

.post-options {
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--text-light);
}

.post-options label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

/* ===== 直播样式 ===== */
.live-section {
    margin-bottom: 24px;
}

.live-section-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.live-dot {
    width: 8px;
    height: 8px;
    background: #f44336;
    border-radius: 50%;
    animation: livePulse 1.5s infinite;
}

@keyframes livePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.live-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    cursor: pointer;
    transition: all 0.2s;
}

.live-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.live-cover {
    height: 140px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.live-status {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}

.live-status.living {
    background: #f44336;
    color: #fff;
}

.live-status.upcoming {
    background: var(--primary);
    color: #fff;
}

.live-status.ended {
    background: rgba(0,0,0,0.6);
    color: #fff;
}

.live-viewers {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
}

.live-info {
    padding: 12px;
}

.live-info h4 {
    font-size: 14px;
    margin-bottom: 8px;
    line-height: 1.4;
}

.live-tutor {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--text-light);
}

.live-tutor .tutor-avatar {
    font-size: 18px;
}

.live-tutor .tutor-title {
    background: rgba(102, 126, 234, 0.1);
    color: var(--primary);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
}

.live-meta {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: var(--text-lighter);
}

/* 直播预告 */
.live-preview {
    text-align: center;
}

.live-preview-cover {
    height: 180px;
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    margin-bottom: 16px;
}

.live-preview h2 {
    font-size: 18px;
    margin-bottom: 12px;
}

.live-preview-tutor {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 16px;
}

.tutor-avatar-large {
    font-size: 40px;
}

.live-preview-desc {
    font-size: 14px;
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 16px;
}

.live-preview-info {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}

.live-preview-info .info-item {
    font-size: 13px;
    color: var(--text-lighter);
}

.live-preview-info .info-item i {
    margin-right: 4px;
    color: var(--primary);
}

/* 直播间 */
.live-room {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #000;
}

.live-room-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: rgba(0,0,0,0.5);
    color: #fff;
}

.live-room-back {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.live-room-info {
    flex: 1;
    text-align: center;
}

.live-room-title {
    font-size: 14px;
    display: block;
}

.live-room-viewers {
    font-size: 11px;
    opacity: 0.8;
}

.live-room-share {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.live-video-container {
    flex: 1;
    position: relative;
    min-height: 250px;
}

.live-video-placeholder {
    width: 100%;
    height: 100%;
    position: relative;
}

.live-video-bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: blur(20px);
    transform: scale(1.1);
}

.live-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.3);
}

.live-badge {
    background: #f44336;
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    margin-bottom: 12px;
}

.live-badge i {
    font-size: 8px;
    margin-right: 4px;
    animation: livePulse 1s infinite;
}

.live-tutor-info {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
}

.tutor-avatar-live {
    font-size: 32px;
}

/* 弹幕 */
.danmaku-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
}

.danmaku-item {
    position: absolute;
    right: -100%;
    white-space: nowrap;
    font-size: 14px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    animation: danmakuMove 8s linear forwards;
}

@keyframes danmakuMove {
    from { right: -100%; }
    to { right: 100%; }
}

/* 直播间底部 */
.live-room-bottom {
    background: #1a1a1a;
    padding: 12px;
}

.live-chat-list {
    height: 120px;
    overflow-y: auto;
    margin-bottom: 12px;
}

.chat-message {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    font-size: 13px;
    color: #fff;
}

.chat-avatar {
    font-size: 16px;
}

.chat-name {
    color: #ffeb3b;
}

.chat-content {
    color: #fff;
}

.live-input-area {
    display: flex;
    gap: 8px;
}

.live-input-area input {
    flex: 1;
    padding: 10px 14px;
    background: #333;
    border: none;
    border-radius: 20px;
    color: #fff;
    font-size: 14px;
}

.live-input-area input::placeholder {
    color: #888;
}

.btn-send-danmaku,
.btn-gift {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.btn-send-danmaku {
    background: var(--primary);
    color: #fff;
}

.btn-gift {
    background: #ff9800;
    color: #fff;
}

/* 直播回放 */
.live-playback {
    text-align: center;
}

.playback-video {
    margin-bottom: 16px;
}

.playback-cover {
    height: 200px;
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.playback-cover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.3);
    border-radius: 12px;
}

.playback-play-btn {
    width: 60px;
    height: 60px;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    z-index: 1;
    transition: all 0.2s;
}

.playback-play-btn:hover {
    transform: scale(1.1);
}

.playback-play-btn i {
    font-size: 24px;
    color: var(--primary);
    margin-left: 4px;
}

.live-playback h2 {
    font-size: 18px;
    margin-bottom: 12px;
}

.playback-tutor {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 14px;
}

.playback-desc {
    font-size: 14px;
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 16px;
}

.playback-meta {
    display: flex;
    justify-content: center;
    gap: 16px;
    font-size: 12px;
    color: var(--text-lighter);
}


/* ===== 会员中心样式 ===== */
.membership-center {
    padding: 8px 0;
}

.membership-card {
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.membership-card.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}

.membership-card.inactive {
    background: linear-gradient(135deg, #e0e0e0 0%, #bdbdbd 100%);
    color: #fff;
    text-align: center;
}

.membership-card-bg {
    position: absolute;
    top: -50%;
    right: -20%;
    width: 200px;
    height: 200px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
}

.membership-card-content {
    position: relative;
    z-index: 1;
}

.membership-badge {
    display: inline-block;
    background: rgba(255,255,255,0.2);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    margin-bottom: 16px;
}

.membership-user {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.membership-user .user-avatar {
    font-size: 36px;
}

.membership-user .user-name {
    font-size: 18px;
    font-weight: 600;
}

.membership-expire {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    opacity: 0.9;
}

.membership-card.inactive .membership-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.membership-card.inactive h3 {
    font-size: 20px;
    margin-bottom: 8px;
}

.membership-card.inactive p {
    font-size: 14px;
    opacity: 0.9;
}

.membership-benefits {
    margin-bottom: 20px;
}

.membership-benefits h4 {
    font-size: 15px;
    margin-bottom: 12px;
}

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

.benefits-grid .benefit-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 4px;
    background: var(--bg);
    border-radius: 12px;
    text-align: center;
}

.benefits-grid .benefit-item .i {
    width: 24px;
    height: 24px;
    color: var(--primary);
    flex-shrink: 0;
}

.benefits-grid .benefit-item span {
    font-size: 12px;
    color: var(--text-light);
    white-space: nowrap;
    line-height: 1.2;
}

/* 会员套餐选择 */
.membership-plans {
    display: flex;
    gap: 12px;
    padding: 8px 0;
}

.plan-card {
    flex: 1;
    background: #fff;
    border: 2px solid var(--border);
    border-radius: 16px;
    padding: 20px 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.plan-card:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
}

.plan-card.recommended {
    border-color: var(--primary);
    background: linear-gradient(180deg, rgba(102, 126, 234, 0.05) 0%, #fff 100%);
}

.plan-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
    padding: 4px 12px;
    border-radius: 10px;
    font-size: 11px;
}

.plan-card h4 {
    font-size: 14px;
    margin-bottom: 12px;
    color: var(--text);
}

.plan-price {
    margin-bottom: 4px;
}

.plan-price .price {
    font-size: 28px;
    font-weight: 700;
    color: var(--primary);
}

.plan-price .original-price {
    font-size: 14px;
    color: var(--text-lighter);
    text-decoration: line-through;
    margin-left: 4px;
}

.plan-unit {
    font-size: 12px;
    color: var(--text-lighter);
    margin-bottom: 16px;
}

.plan-features {
    list-style: none;
    text-align: left;
    font-size: 12px;
    color: var(--text-light);
}

.plan-features li {
    padding: 4px 0;
}

.plan-features li i {
    color: var(--success);
    margin-right: 6px;
}

/* ===== 支付页面样式 ===== */
.payment-page {
    padding: 8px 0;
}

.order-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--bg);
    border-radius: 12px;
    margin-bottom: 16px;
}

.order-icon {
    font-size: 36px;
}

.order-info {
    flex: 1;
}

.order-info h4 {
    font-size: 15px;
    margin-bottom: 4px;
}

.order-info p {
    font-size: 12px;
    color: var(--text-lighter);
}

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

.order-price .price {
    font-size: 18px;
    font-weight: 600;
    color: var(--danger);
}

.order-price .original {
    font-size: 12px;
    color: var(--text-lighter);
    text-decoration: line-through;
    display: block;
}

.coupon-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 16px;
    cursor: pointer;
}

.coupon-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
}

.coupon-label i {
    color: var(--primary);
}

.coupon-value {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-lighter);
}

.coupon-selected {
    color: var(--danger);
    font-weight: 500;
}

.coupon-name {
    font-size: 12px;
}

.payment-methods {
    margin-bottom: 16px;
}

.payment-methods h4 {
    font-size: 14px;
    margin-bottom: 12px;
}

.method-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.method-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
}

.method-item input {
    width: 18px;
    height: 18px;
}

.method-item i {
    font-size: 24px;
}

.method-item span {
    font-size: 14px;
}

.payment-summary {
    background: var(--bg);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
    color: var(--text-light);
}

.summary-row.discount {
    color: var(--danger);
}

.summary-row.total {
    border-top: 1px solid var(--border);
    margin-top: 8px;
    padding-top: 12px;
    font-weight: 600;
    color: var(--text);
}

.total-price {
    font-size: 20px;
    color: var(--danger);
}

.btn-pay {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.payment-tip {
    text-align: center;
    font-size: 12px;
    color: var(--text-lighter);
    margin-top: 12px;
}

/* 支付加载 */
.payment-loading {
    text-align: center;
    padding: 60px 20px;
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    margin: 0 auto 20px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* 支付成功 */
.payment-success {
    text-align: center;
    padding: 20px 0;
}

.success-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

.payment-success h2 {
    font-size: 22px;
    margin-bottom: 8px;
}

.order-id {
    font-size: 13px;
    color: var(--text-lighter);
    margin-bottom: 20px;
}

.success-info {
    background: var(--bg);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.success-info .info-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
}

.success-info .amount {
    color: var(--danger);
    font-weight: 600;
}

/* ===== 优惠券样式 ===== */
.coupon-selector {
    padding: 8px 0;
}

.coupon-list {
    max-height: 400px;
    overflow-y: auto;
}

.coupon-card {
    display: flex;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
}

.coupon-card:hover {
    border-color: var(--primary);
}

.coupon-card.selected {
    border-color: var(--primary);
    background: rgba(102, 126, 234, 0.05);
}

.coupon-card .coupon-left {
    width: 100px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 8px;
}

.coupon-card .coupon-value {
    font-size: 24px;
    font-weight: 700;
}

.coupon-card .coupon-type {
    font-size: 11px;
    opacity: 0.9;
}

.coupon-card .coupon-right {
    flex: 1;
    padding: 12px 16px;
}

.coupon-card .coupon-right h4 {
    font-size: 14px;
    margin-bottom: 4px;
}

.coupon-card .coupon-right p {
    font-size: 12px;
    color: var(--text-lighter);
    margin-bottom: 4px;
}

.coupon-card .coupon-expire {
    font-size: 11px;
    color: var(--text-lighter);
}

.coupon-card .coupon-check {
    display: flex;
    align-items: center;
    padding: 0 16px;
    color: var(--border);
}

.coupon-card.selected .coupon-check {
    color: var(--primary);
}

.coupon-actions {
    margin-top: 16px;
}

.empty-coupons {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-lighter);
}

.empty-coupons i {
    font-size: 48px;
    margin-bottom: 12px;
}

/* 我的优惠券 */
.my-coupons {
    padding: 8px 0;
    height: calc(72vh - 80px);
    display: flex;
    flex-direction: column;
}

.my-coupons .coupons-content {
    flex: 1;
    overflow-y: auto;
}

.coupons-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
}

.coupon-tab {
    flex: 1;
    text-align: center;
    padding: 12px;
    font-size: 14px;
    color: var(--text-light);
    cursor: pointer;
}

.coupon-tab.active {
    color: var(--primary);
    border-bottom: 2px solid var(--primary);
}

.coupon-card-full {
    display: flex;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
    position: relative;
}

.coupon-card-full.disabled {
    opacity: 0.6;
}

.coupon-card-full .coupon-left {
    width: 100px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 8px;
}

.coupon-card-full .coupon-value {
    font-size: 28px;
    font-weight: 700;
}

.coupon-card-full .coupon-condition {
    font-size: 11px;
    opacity: 0.9;
}

.coupon-card-full .coupon-right {
    flex: 1;
    padding: 16px;
}

.coupon-card-full .coupon-right h4 {
    font-size: 15px;
    margin-bottom: 6px;
}

.coupon-card-full .coupon-right p {
    font-size: 13px;
    color: var(--text-lighter);
    margin-bottom: 8px;
}

.coupon-card-full .coupon-expire {
    font-size: 11px;
    color: var(--text-lighter);
}

.coupon-mask {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%) rotate(-15deg);
    font-size: 24px;
    font-weight: 700;
    color: rgba(0,0,0,0.1);
    border: 3px solid rgba(0,0,0,0.1);
    padding: 8px 16px;
    border-radius: 8px;
}

/* ===== 订单列表样式 ===== */
.orders-list {
    padding: 8px 0;
}

.order-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
}

.order-card-header {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg);
    font-size: 12px;
}

.order-no {
    color: var(--text-lighter);
}

.order-status {
    font-weight: 500;
}

.order-status.paid {
    color: var(--success);
}

.order-status.pending {
    color: var(--warning);
}

.order-card-body {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
}

.order-card-body .order-icon {
    font-size: 32px;
}

.order-detail {
    flex: 1;
}

.order-detail h4 {
    font-size: 14px;
    margin-bottom: 4px;
}

.order-detail p {
    font-size: 12px;
    color: var(--text-lighter);
}

.order-amount {
    font-size: 16px;
    font-weight: 600;
    color: var(--danger);
}

/* ===== 积分商城样式 ===== */
.points-shop {
    padding: 8px 0;
}

.points-balance {
    background: linear-gradient(135deg, #ff9800, #ff5722);
    color: #fff;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
}

.balance-label {
    font-size: 13px;
    opacity: 0.9;
    display: block;
    margin-bottom: 4px;
}

.balance-value {
    font-size: 36px;
    font-weight: 700;
}

.shop-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.shop-item {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.shop-item:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
}

.shop-item .item-icon {
    font-size: 36px;
    display: block;
    margin-bottom: 8px;
}

.shop-item h4 {
    font-size: 13px;
    margin-bottom: 8px;
    color: var(--text);
}

.item-price {
    margin-bottom: 4px;
}

.points-cost {
    font-size: 20px;
    font-weight: 700;
    color: #ff9800;
}

.points-label {
    font-size: 12px;
    color: var(--text-lighter);
}

.item-stock {
    font-size: 11px;
    color: var(--text-lighter);
}


/* ===== 分销中心样式 ===== */
.distribution-center {
    padding: 0;
}

.distribution-header {
    background: linear-gradient(135deg, #ff5722 0%, #ff9800 100%);
    padding: 24px 16px;
    color: #fff;
    text-align: center;
}

.distribution-header h3 {
    font-size: 18px;
    margin-bottom: 4px;
}

.distribution-header p {
    font-size: 12px;
    opacity: 0.9;
}

.distribution-stats {
    display: flex;
    justify-content: space-around;
    padding: 20px 16px;
    background: #fff;
    margin: -20px 16px 16px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

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

.dist-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: #ff5722;
}

.dist-stat-label {
    font-size: 12px;
    color: var(--text-lighter);
    margin-top: 4px;
}

.distribution-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 0 16px 16px;
}

.dist-action {
    background: #fff;
    border-radius: 12px;
    padding: 16px 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid var(--border);
}

.dist-action:hover {
    border-color: #ff5722;
    transform: translateY(-2px);
}

.dist-action i {
    font-size: 24px;
    color: #ff5722;
    display: block;
    margin-bottom: 8px;
}

.dist-action span {
    font-size: 12px;
    color: var(--text);
}

.distribution-section {
    background: #fff;
    margin: 0 16px 16px;
    border-radius: 12px;
    overflow: hidden;
}

.dist-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--border);
}

.dist-section-header h4 {
    font-size: 15px;
    font-weight: 600;
}

.dist-section-header a {
    font-size: 12px;
    color: var(--primary);
}

.invite-user-list {
    padding: 0;
}

.invite-user-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

.invite-user-item:last-child {
    border-bottom: none;
}

.invite-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-right: 12px;
}

.invite-user-info {
    flex: 1;
}

.invite-user-info h5 {
    font-size: 14px;
    margin-bottom: 2px;
}

.invite-user-info p {
    font-size: 11px;
    color: var(--text-lighter);
}

.invite-user-level {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    background: #fff3e0;
    color: #ff9800;
}

.invite-user-level.level-2 {
    background: #e3f2fd;
    color: #2196f3;
}

.commission-list {
    padding: 0;
}

.commission-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

.commission-item:last-child {
    border-bottom: none;
}

.commission-info {
    flex: 1;
}

.commission-info h5 {
    font-size: 13px;
    margin-bottom: 2px;
}

.commission-info p {
    font-size: 11px;
    color: var(--text-lighter);
}

.commission-amount {
    font-size: 16px;
    font-weight: 600;
    color: #ff5722;
}

.commission-amount.pending {
    color: var(--text-lighter);
}

/* 推广海报 */
.poster-preview {
    margin: 16px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.poster-content {
    padding: 32px 24px;
    text-align: center;
    color: #fff;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.poster-logo {
    font-size: 48px;
    margin-bottom: 16px;
}

.poster-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
}

.poster-subtitle {
    font-size: 14px;
    opacity: 0.9;
    margin-bottom: 24px;
}

.poster-qrcode {
    width: 120px;
    height: 120px;
    background: #fff;
    border-radius: 12px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--text);
}

.poster-invite-code {
    font-size: 16px;
    font-weight: 600;
    padding: 8px 16px;
    background: rgba(255,255,255,0.2);
    border-radius: 20px;
    display: inline-block;
}

.poster-templates {
    display: flex;
    gap: 12px;
    padding: 16px;
    overflow-x: auto;
}

.poster-template {
    width: 60px;
    height: 80px;
    border-radius: 8px;
    flex-shrink: 0;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s;
}

.poster-template.active {
    border-color: #ff5722;
    transform: scale(1.05);
}

.poster-actions {
    display: flex;
    gap: 12px;
    padding: 16px;
}

.poster-actions button {
    flex: 1;
}

/* 提现页面 */
.withdraw-balance {
    background: linear-gradient(135deg, #ff5722 0%, #ff9800 100%);
    padding: 32px 16px;
    text-align: center;
    color: #fff;
}

.withdraw-balance h4 {
    font-size: 14px;
    opacity: 0.9;
    margin-bottom: 8px;
}

.withdraw-balance .amount {
    font-size: 40px;
    font-weight: 700;
}

.withdraw-form {
    padding: 16px;
}

.withdraw-input-group {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.withdraw-input-group label {
    font-size: 13px;
    color: var(--text-lighter);
    display: block;
    margin-bottom: 8px;
}

.withdraw-input-group input {
    width: 100%;
    border: none;
    font-size: 24px;
    font-weight: 600;
    color: var(--text);
    outline: none;
}

.withdraw-input-group input::placeholder {
    color: var(--border);
}

.withdraw-quick-amounts {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.quick-amount {
    padding: 6px 12px;
    background: var(--bg);
    border-radius: 16px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.quick-amount:hover, .quick-amount.active {
    background: #fff3e0;
    color: #ff5722;
}

.withdraw-method {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.withdraw-method h4 {
    font-size: 14px;
    margin-bottom: 12px;
}

.method-options {
    display: flex;
    gap: 12px;
}

.method-option {
    flex: 1;
    padding: 12px;
    border: 2px solid var(--border);
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.method-option.active {
    border-color: #ff5722;
    background: #fff3e0;
}

.method-option i {
    font-size: 24px;
    display: block;
    margin-bottom: 4px;
}

.method-option span {
    font-size: 12px;
}

.withdraw-rules {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.withdraw-rules h4 {
    font-size: 14px;
    margin-bottom: 12px;
}

.withdraw-rules ul {
    font-size: 12px;
    color: var(--text-lighter);
    line-height: 1.8;
    padding-left: 16px;
}

/* ===== 证书样式 ===== */
.certificates-list {
    padding: 16px;
}

.certificate-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    cursor: pointer;
    transition: all 0.2s;
}

.certificate-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.certificate-header {
    padding: 20px;
    text-align: center;
    color: #fff;
}

.certificate-header.completion {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.certificate-header.excellence {
    background: linear-gradient(135deg, #f5576c 0%, #f093fb 100%);
}

.certificate-icon {
    font-size: 48px;
    margin-bottom: 8px;
}

.certificate-type {
    font-size: 18px;
    font-weight: 600;
}

.certificate-body {
    padding: 16px 20px;
}

.certificate-course {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text);
}

.certificate-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-lighter);
}

.certificate-no {
    font-family: monospace;
}

/* 证书详情/预览 */
.certificate-preview {
    background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
    padding: 24px;
    margin: 16px;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}

.certificate-frame {
    background: #fff;
    border: 3px solid #d4af37;
    border-radius: 12px;
    padding: 32px 24px;
    text-align: center;
    position: relative;
}

.certificate-frame::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border: 1px solid #d4af37;
    border-radius: 8px;
    pointer-events: none;
}

.cert-logo {
    font-size: 40px;
    margin-bottom: 12px;
}

.cert-title {
    font-size: 28px;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
    font-family: 'STKaiti', 'KaiTi', serif;
}

.cert-subtitle {
    font-size: 14px;
    color: #666;
    margin-bottom: 24px;
}

.cert-recipient {
    font-size: 24px;
    font-weight: 600;
    color: #d4af37;
    margin-bottom: 16px;
    padding: 8px 0;
    border-bottom: 2px solid #d4af37;
    display: inline-block;
}

.cert-content {
    font-size: 14px;
    color: #555;
    line-height: 1.8;
    margin-bottom: 24px;
}

.cert-course-name {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 8px 0;
}

.cert-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px dashed #ddd;
}

.cert-seal {
    text-align: left;
}

.cert-seal-icon {
    font-size: 48px;
    opacity: 0.8;
}

.cert-seal-text {
    font-size: 11px;
    color: #999;
}

.cert-info {
    text-align: right;
    font-size: 11px;
    color: #999;
    line-height: 1.6;
}

.cert-qrcode {
    width: 60px;
    height: 60px;
    background: #f5f5f5;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #999;
    margin-left: auto;
    margin-top: 8px;
}

.certificate-actions {
    display: flex;
    gap: 12px;
    padding: 16px;
}

.certificate-actions button {
    flex: 1;
}

/* 成长报告增强 */
/* ===== 成长报告 (重构) ===== */
.rp-wrap {
    display: flex;
    flex-direction: column;
}

/* Banner */
.rp-banner {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 20px 20px 48px;
    text-align: center;
    color: #fff;
    position: relative;
}
.rp-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}
.rp-close:hover { background: rgba(255,255,255,0.35); }
.rp-close .i { width: 16px; height: 16px; color: #fff; }
.rp-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    border: 3px solid rgba(255,255,255,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    margin: 12px auto 12px;
}
.rp-user {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
}
.rp-sub {
    font-size: 12px;
    opacity: 0.8;
}

/* 四格统计（浮在 Banner 下方） */
.rp-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--card-bg);
    margin: -30px 16px 0;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.14);
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.rp-stat {
    padding: 18px 4px;
    text-align: center;
    border-right: 1px solid var(--border-soft);
}
.rp-stat:last-child { border-right: none; }
.rp-stat-val {
    font-size: 22px;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.2;
}
.rp-stat-lbl {
    font-size: 10px;
    color: var(--text-lighter);
    margin-top: 5px;
    white-space: nowrap;
}

/* 内容卡片 */
.rp-card {
    background: var(--card-bg);
    margin: 16px 16px 0;
    border-radius: 14px;
    padding: 20px 16px;
    box-shadow: var(--shadow-sm);
}
.rp-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
}
.rp-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
}
.rp-card-title .i { color: var(--primary); width: 16px; height: 16px; }

/* 情绪柱状图 */
.rp-heat {
    display: flex;
    align-items: flex-end;
    height: 110px;
    gap: 6px;
    padding-bottom: 22px; /* 给 label 留空间 */
    position: relative;
}
.rp-heat-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
    position: relative;
}
.rp-heat-bar {
    width: 100%;
    border-radius: 4px 4px 0 0;
    min-height: 4px;
    transition: height 0.4s ease;
}
.rp-heat-label {
    position: absolute;
    bottom: -20px;
    font-size: 10px;
    color: var(--text-lighter);
    white-space: nowrap;
}
.rp-mood-tip {
    text-align: center;
    font-size: 12px;
    color: var(--text-lighter);
    margin-top: 12px;
    padding-top: 4px;
}
.rp-mood-tip strong { color: var(--primary); }

/* 技能进度 */
.rp-skill { margin-bottom: 12px; }
.rp-skill:last-child { margin-bottom: 0; }
.rp-skill-hd {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text);
    margin-bottom: 6px;
}
.rp-skill-pct { color: var(--primary); font-weight: 600; }
.rp-skill-track {
    height: 8px;
    background: var(--bg);
    border-radius: 4px;
    overflow: hidden;
}
.rp-skill-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s ease;
}

/* 成就格子 */
.rp-ach-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.rp-ach {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.rp-ach-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b, #fde68a);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 2px 8px rgba(245,158,11,0.3);
}
.rp-ach.off .rp-ach-icon {
    background: var(--bg);
    box-shadow: none;
    filter: grayscale(1);
    opacity: 0.4;
}
.rp-ach-name {
    font-size: 10px;
    color: var(--text-lighter);
    text-align: center;
    white-space: nowrap;
}

/* 导师寄语 */
.rp-tutor-body {
    background: var(--bg);
    border-radius: 10px;
    padding: 14px 16px;
    position: relative;
}
.rp-tutor-body::before {
    content: '"';
    position: absolute;
    top: -4px;
    left: 12px;
    font-size: 44px;
    color: var(--primary);
    opacity: 0.15;
    font-family: serif;
    line-height: 1;
}
.rp-tutor-body p {
    font-size: 13px;
    line-height: 1.8;
    color: var(--text-light);
    padding-left: 20px;
}
.rp-tutor-sign {
    text-align: right;
    font-size: 12px;
    color: var(--text-lighter);
    margin-top: 10px;
}

/* 底部按钮 */
.rp-footer {
    padding: 20px 16px 24px;
    margin-top: 4px;
}

/* 空状态 */
.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-lighter);
}

.empty-state i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state p {
    font-size: 14px;
    margin-bottom: 16px;
}


/* ===== Onboarding 新用户引导样式 ===== */
.onboarding-modal {
    padding: 0;
}

.onboarding-header {
    padding: 20px 20px 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.onboarding-progress {
    flex: 1;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}

.onboarding-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius: 3px;
    transition: width 0.3s ease;
}

.onboarding-step {
    font-size: 12px;
    color: var(--text-lighter);
    white-space: nowrap;
}

.onboarding-skip {
    background: transparent;
    border: none;
    color: var(--text-lighter);
    font-size: 12px;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 12px;
    transition: all 0.2s;
    white-space: nowrap;
}

.onboarding-skip:hover {
    color: var(--text-light);
    background: var(--bg);
}

.onboarding-content {
    padding: 32px 20px;
    text-align: center;
}

.onboarding-question {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 32px;
    color: var(--text);
}

.onboarding-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.onboarding-option {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--bg);
    border: 2px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.onboarding-option:hover {
    border-color: var(--primary);
    background: #f0f4ff;
}

.onboarding-option:active {
    transform: scale(0.98);
}

.onboarding-option .option-icon {
    font-size: 28px;
}

.onboarding-option .option-text {
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
}

.onboarding-footer {
    padding: 0 20px 20px;
    text-align: center;
}

/* 推荐结果页 */
.recommendation-header {
    text-align: center;
    padding: 32px 20px 24px;
}

.recommendation-icon {
    font-size: 56px;
    margin-bottom: 16px;
}

.recommendation-header h2 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 8px;
}

.recommendation-header p {
    font-size: 14px;
    color: var(--text-light);
}

.recommendation-courses {
    padding: 0 20px;
}

.recommendation-course {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg);
    border-radius: 12px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.recommendation-course:hover {
    background: #f0f4ff;
}

.rec-course-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
    flex-shrink: 0;
}

.rec-course-info {
    flex: 1;
    min-width: 0;
}

.rec-course-info h4 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rec-course-info p {
    font-size: 12px;
    color: var(--text-lighter);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recommendation-course i {
    color: var(--text-lighter);
}

.recommendation-footer {
    padding: 24px 20px;
}


/* ===== 编辑资料样式 ===== */
.edit-profile {
    padding: 0 20px 20px;
}

.edit-avatar-section {
    text-align: center;
    padding: 24px 0;
}

.current-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    margin: 0 auto 12px;
    border: 3px solid var(--primary);
}

.edit-form {
    margin-bottom: 24px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 8px;
}

.form-group input[type="text"],
.form-group input[type="date"],
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 15px;
    background: var(--bg);
    transition: border-color 0.2s;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
}

.form-group textarea {
    min-height: 80px;
    resize: none;
}

.gender-options {
    display: flex;
    gap: 12px;
}

.gender-option {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: var(--bg);
    border: 2px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.gender-option:has(input:checked) {
    border-color: var(--primary);
    background: #f0f4ff;
}

.gender-option input {
    display: none;
}

.gender-option span {
    font-size: 14px;
}

/* 头像选择器 */
.avatar-picker {
    padding: 20px;
}

.avatar-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

.avatar-option {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    background: var(--bg);
    border: 2px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.avatar-option:hover {
    border-color: var(--primary);
    transform: scale(1.05);
}

.avatar-option.selected {
    border-color: var(--primary);
    background: #f0f4ff;
}


/* ===== 消息通知中心样式 ===== */
.notification-center {
    max-height: 70vh;
    overflow-y: auto;
}

.notification-actions {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    text-align: right;
}

.notification-list {
    padding: 8px 0;
}

.notification-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    cursor: pointer;
    transition: background 0.2s;
    position: relative;
}

.notification-item:hover {
    background: var(--bg);
}

.notification-item.unread {
    background: #f0f7ff;
}

.notification-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.notification-content {
    flex: 1;
    min-width: 0;
}

.notification-content h4 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--text);
}

.notification-content p {
    font-size: 13px;
    color: var(--text-light);
    line-height: 1.5;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notification-time {
    font-size: 11px;
    color: var(--text-lighter);
}

.notification-dot {
    width: 8px;
    height: 8px;
    background: var(--danger);
    border-radius: 50%;
    position: absolute;
    top: 16px;
    right: 16px;
}


/* ===== 邀请好友页面样式 ===== */
.invite-page {
    padding: 0;
}

.invite-header {
    text-align: center;
    padding: 32px 20px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}

.invite-icon {
    font-size: 56px;
    margin-bottom: 12px;
}

.invite-header h2 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
}

.invite-header p {
    font-size: 14px;
    opacity: 0.9;
}

.invite-stats {
    display: flex;
    justify-content: center;
    gap: 48px;
    padding: 20px;
    background: #fff;
    margin: -20px 16px 16px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

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

.invite-stat .stat-value {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: var(--primary);
}

.invite-stat .stat-label {
    font-size: 12px;
    color: var(--text-lighter);
}

.invite-code-section {
    padding: 0 20px 16px;
}

.invite-code-section label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--text);
}

.invite-code-display {
    display: flex;
    align-items: center;
    background: var(--bg);
    border-radius: 8px;
    padding: 4px 4px 4px 16px;
}

.invite-code-display span {
    flex: 1;
    font-size: 18px;
    font-weight: 600;
    font-family: monospace;
    letter-spacing: 2px;
    color: var(--primary);
}

.btn-copy {
    padding: 10px 16px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
}

.invite-input-section {
    padding: 0 20px 16px;
}

.invite-input-section label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--text);
}

.invite-input-group {
    display: flex;
    gap: 8px;
}

.invite-input-group input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 15px;
    text-transform: uppercase;
}

.invite-input-group button {
    white-space: nowrap;
}

.invite-hint {
    font-size: 11px;
    color: var(--text-lighter);
    margin-top: 8px;
}

.invite-rewards-section {
    padding: 16px 20px;
    background: var(--bg);
}

.invite-rewards-section h4 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 16px;
}

.reward-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.reward-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    padding: 12px;
    border-radius: 8px;
}

.reward-icon {
    font-size: 24px;
}

.reward-info h5 {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 2px;
}

.reward-info p {
    font-size: 11px;
    color: var(--text-lighter);
}

.reward-info strong {
    color: var(--primary);
}

.invite-actions {
    padding: 20px;
}


/* ===== 设置页面样式 ===== */
.settings-page {
    max-height: 70vh;
    overflow-y: auto;
}

.settings-section {
    padding: 16px 20px;
    border-bottom: 8px solid var(--bg);
}

.settings-section:last-of-type {
    border-bottom: none;
}

.settings-section h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-section h4 i {
    color: var(--primary);
}

.settings-list {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
}

.setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}

.setting-item:last-child {
    border-bottom: none;
}

.setting-item.clickable {
    cursor: pointer;
    transition: background 0.2s;
}

.setting-item.clickable:hover {
    background: var(--bg);
}

.setting-info {
    flex: 1;
}

.setting-info span {
    font-size: 14px;
    color: var(--text);
}

.setting-info p {
    font-size: 12px;
    color: var(--text-lighter);
    margin-top: 2px;
}

.setting-item > i {
    color: var(--text-lighter);
}

/* 开关样式 */
.switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 28px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 28px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

input:checked + .slider {
    background: linear-gradient(90deg, var(--primary), var(--secondary));
}

input:checked + .slider:before {
    transform: translateX(20px);
}

.settings-footer {
    padding: 20px;
    text-align: center;
}

.settings-footer p {
    font-size: 12px;
    color: var(--text-lighter);
}


/* ===== 开营仪式样式 ===== */
.ceremony-page {
    padding: 0;
}

.ceremony-bg {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.ceremony-particles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 24px;
    opacity: 0.5;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.ceremony-icon {
    font-size: 64px;
    z-index: 1;
}

.ceremony-content {
    padding: 24px 20px;
    text-align: center;
}

.ceremony-content h2 {
    font-size: 16px;
    color: var(--text-lighter);
    margin-bottom: 4px;
}

.ceremony-content h1 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
}

.ceremony-date {
    font-size: 13px;
    color: var(--text-lighter);
    margin-bottom: 24px;
}

.ceremony-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.ceremony-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-light);
    text-align: center;
    line-height: 1.4;
}

.ceremony-item .i {
    width: 36px;
    height: 36px;
    background: var(--tint-lavender);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    flex-shrink: 0;
}

.ceremony-pledge {
    background: var(--bg);
    border-radius: 12px;
    padding: 16px;
    text-align: left;
    margin-bottom: 20px;
}

.ceremony-pledge h4 {
    font-size: 14px;
    margin-bottom: 8px;
}

.ceremony-pledge p {
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 8px;
}

.ceremony-pledge ul {
    font-size: 13px;
    color: var(--text-light);
    padding-left: 20px;
    line-height: 1.8;
}

.ceremony-gift {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff3e0;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px;
}

.gift-icon {
    font-size: 32px;
}

.gift-info h5 {
    font-size: 14px;
    margin-bottom: 2px;
}

.gift-info p {
    font-size: 12px;
    color: var(--text-lighter);
}

/* ===== 结营考核样式 ===== */
.exam-page {
    padding: 20px;
}

.exam-progress {
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 12px;
}

.exam-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    transition: width 0.3s;
}

.exam-question-num {
    font-size: 12px;
    color: var(--text-lighter);
    margin-bottom: 16px;
}

.exam-question {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 24px;
    line-height: 1.5;
}

.exam-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.exam-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--bg);
    border: 2px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.exam-option:hover {
    border-color: var(--primary);
    background: #f0f4ff;
}

.exam-option-letter {
    width: 32px;
    height: 32px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--primary);
    border: 1px solid var(--border);
}

.exam-result {
    text-align: center;
    padding: 32px 20px;
}

.result-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

.result-score {
    font-size: 56px;
    font-weight: 700;
    color: var(--primary);
}

.result-score span {
    font-size: 20px;
    color: var(--text-lighter);
}

.result-text {
    font-size: 18px;
    font-weight: 600;
    margin: 12px 0;
}

.result-detail {
    font-size: 14px;
    color: var(--text-lighter);
    margin-bottom: 24px;
}

.result-rewards {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 24px;
}

.reward-badge {
    padding: 8px 16px;
    background: #fff3e0;
    border-radius: 20px;
    font-size: 13px;
    color: #ff9800;
}

/* ===== 课程讨论区样式 ===== */
.discussion-page {
    max-height: 70vh;
    overflow-y: auto;
}

.discussion-input {
    display: flex;
    gap: 8px;
    padding: 16px;
    border-bottom: 1px solid var(--border);
}

.discussion-input input {
    flex: 1;
    padding: 10px 16px;
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 14px;
}

.discussion-list {
    padding: 8px 0;
}

.discussion-item {
    display: flex;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--border);
}

.discussion-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.discussion-body {
    flex: 1;
}

.discussion-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
}

.discussion-name {
    font-size: 13px;
    font-weight: 600;
}

.discussion-time {
    font-size: 11px;
    color: var(--text-lighter);
}

.discussion-content {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    margin-bottom: 8px;
}

.discussion-actions {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: var(--text-lighter);
}

.discussion-actions span {
    cursor: pointer;
}

.discussion-actions span:hover {
    color: var(--primary);
}

.discussion-replies {
    margin-top: 12px;
    padding: 12px;
    background: var(--bg);
    border-radius: 8px;
}

.reply-item {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.reply-item:last-child {
    margin-bottom: 0;
}

.reply-avatar {
    font-size: 14px;
}

.reply-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
}

.reply-content {
    font-size: 12px;
    color: var(--text-light);
}

/* ===== 学员评价样式 ===== */
.reviews-page {
    max-height: 70vh;
    overflow-y: auto;
}

.reviews-summary {
    text-align: center;
    padding: 24px;
    border-bottom: 1px solid var(--border);
}

.rating-big {
    font-size: 48px;
    font-weight: 700;
    color: var(--text);
}

.rating-stars {
    font-size: 20px;
    color: #ff9800;
    margin: 4px 0;
}

.reviews-summary p {
    font-size: 12px;
    color: var(--text-lighter);
}

.reviews-list {
    padding: 8px 0;
}

.review-item {
    padding: 16px;
    border-bottom: 1px solid var(--border);
}

.review-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.review-avatar {
    font-size: 20px;
}

.review-name {
    font-size: 13px;
    font-weight: 600;
    flex: 1;
}

.review-rating {
    font-size: 12px;
    color: #ff9800;
}

.review-content {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    margin-bottom: 6px;
}

.review-time {
    font-size: 11px;
    color: var(--text-lighter);
}

.review-input-section {
    padding: 16px;
    border-top: 8px solid var(--bg);
}

.review-input-section h4 {
    font-size: 14px;
    margin-bottom: 12px;
}

#rating-input {
    margin-bottom: 12px;
}

#rating-input .star {
    font-size: 28px;
    cursor: pointer;
    color: #ccc;
    transition: color 0.2s;
}

.review-input-section textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    min-height: 80px;
    resize: none;
    margin-bottom: 12px;
}


/* ===== 邀请排行榜样式 ===== */
.leaderboard-container {
    padding: 0 16px 16px;
}

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

.leaderboard-period {
    display: flex;
    gap: 12px;
}

.leaderboard-period span {
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    background: var(--bg-light);
    color: var(--text-light);
}

.leaderboard-period .period-active {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
}

.leaderboard-prize {
    font-size: 12px;
    color: var(--primary);
    background: rgba(102, 126, 234, 0.1);
    padding: 4px 10px;
    border-radius: 12px;
}

.leaderboard-top3 {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 24px;
    padding: 20px 0;
}

.top3-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.top3-item.first {
    order: 2;
}

.top3-item.second {
    order: 1;
}

.top3-item.third {
    order: 3;
}

.top3-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f5f7fa, #e4e8eb);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 8px;
}

.top3-item.first .top3-avatar {
    width: 64px;
    height: 64px;
    font-size: 32px;
    background: linear-gradient(135deg, #ffd700, #ffb347);
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
}

.top3-item.second .top3-avatar {
    background: linear-gradient(135deg, #c0c0c0, #a8a8a8);
}

.top3-item.third .top3-avatar {
    background: linear-gradient(135deg, #cd7f32, #b87333);
}

.top3-crown {
    position: absolute;
    top: -20px;
    font-size: 24px;
}

.top3-item.first .top3-crown {
    font-size: 32px;
    top: -28px;
}

.top3-name {
    font-size: 12px;
    color: var(--text);
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.top3-count {
    font-size: 11px;
    color: var(--primary);
    font-weight: 600;
}

.leaderboard-list {
    background: var(--bg-light);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
}

.leaderboard-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

.leaderboard-item:last-child {
    border-bottom: none;
}

.lb-rank {
    width: 24px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-light);
}

.lb-avatar {
    font-size: 20px;
    margin-right: 10px;
}

.lb-name {
    flex: 1;
    font-size: 13px;
    color: var(--text);
}

.lb-count {
    font-size: 12px;
    color: var(--primary);
    margin-right: 12px;
}

.lb-reward {
    font-size: 12px;
    color: #ff6b6b;
    font-weight: 600;
}

.leaderboard-my-rank {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.my-rank-info {
    text-align: center;
}

.my-rank-label {
    font-size: 11px;
    color: var(--text-lighter);
    display: block;
}

.my-rank-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary);
}

.my-rank-stats {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--text-light);
}

.my-rank-stats strong {
    color: var(--primary);
}

/* ===== 断签召回弹窗样式 ===== */
.lapsed-recall-container {
    padding: 20px 16px;
    text-align: center;
}

.lapsed-icon {
    font-size: 64px;
    margin-bottom: 12px;
}

.lapsed-recall-container h2 {
    font-size: 20px;
    margin-bottom: 8px;
}

.lapsed-message {
    color: var(--text-light);
    font-size: 14px;
    margin-bottom: 20px;
    line-height: 1.6;
}

.lapsed-reward-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, #fff9e6, #fff3cd);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.reward-badge {
    font-size: 40px;
}

.reward-text {
    text-align: left;
}

.reward-text h4 {
    font-size: 14px;
    color: var(--text);
    margin-bottom: 4px;
}

.reward-text p {
    font-size: 13px;
    color: var(--text-light);
}

.reward-text strong {
    color: #ff9800;
}

.lapsed-streak-info {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-bottom: 20px;
}

.streak-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.streak-label {
    font-size: 11px;
    color: var(--text-lighter);
}

.streak-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary);
}

.lapsed-motivation {
    background: var(--bg-light);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
}

.lapsed-motivation p {
    font-size: 13px;
    color: var(--text-light);
    font-style: italic;
}

.lapsed-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.btn-text {
    background: none;
    border: none;
    color: var(--text-lighter);
    font-size: 13px;
    cursor: pointer;
    padding: 8px;
}

/* ===== 历史测评对比样式 ===== */
.assessment-history-container {
    padding: 0 16px 16px;
}

.history-summary {
    display: flex;
    justify-content: space-around;
    background: var(--bg-light);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.summary-label {
    font-size: 11px;
    color: var(--text-lighter);
    margin-bottom: 4px;
}

.summary-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary);
}

.history-chart {
    margin-bottom: 20px;
}

.history-chart h4 {
    font-size: 14px;
    margin-bottom: 12px;
}

.score-chart {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    height: 120px;
    background: var(--bg-light);
    border-radius: 12px;
    padding: 16px;
}

.chart-bar-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.chart-bar {
    width: 24px;
    background: linear-gradient(180deg, var(--primary), var(--secondary));
    border-radius: 4px 4px 0 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 20px;
}

.chart-score {
    font-size: 10px;
    color: white;
    font-weight: 600;
    margin-top: 4px;
}

.chart-label {
    font-size: 10px;
    color: var(--text-lighter);
    margin-top: 6px;
}

.history-list {
    margin-bottom: 20px;
}

.history-list h4 {
    font-size: 14px;
    margin-bottom: 12px;
}

.history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: var(--bg-light);
    border-radius: 8px;
    margin-bottom: 8px;
}

.history-item.latest {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    border: 1px solid var(--primary);
}

.history-date {
    font-size: 13px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.latest-tag {
    font-size: 10px;
    background: var(--primary);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
}

.history-result {
    display: flex;
    align-items: center;
    gap: 12px;
}

.history-score {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary);
}

.history-level {
    font-size: 12px;
    color: var(--text-light);
    background: var(--bg);
    padding: 4px 8px;
    border-radius: 4px;
}

/* ===== 情绪曲线可视化样式 ===== */
.emotion-curve-container {
    padding: 0 16px 16px;
}

.emotion-period-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
}

.period-tab {
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    background: var(--bg-light);
    color: var(--text-light);
    transition: all 0.3s;
}

.period-tab.active {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
}

.emotion-summary-cards {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.emotion-card {
    flex: 1;
    background: var(--bg-light);
    border-radius: 12px;
    padding: 12px;
    text-align: center;
}

.emotion-card-icon {
    font-size: 24px;
    margin-bottom: 4px;
}

.emotion-card-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary);
}

.emotion-card-label {
    font-size: 11px;
    color: var(--text-lighter);
}

.emotion-chart-section {
    margin-bottom: 20px;
}

.emotion-chart-section h4 {
    font-size: 14px;
    margin-bottom: 12px;
}

.emotion-line-chart {
    background: var(--bg-light);
    border-radius: 12px;
    padding: 16px;
}

.emotion-svg {
    width: 100%;
    height: 120px;
}

.chart-x-labels {
    display: flex;
    justify-content: space-between;
    padding: 8px 10px 0;
    font-size: 11px;
    color: var(--text-lighter);
}

.emotion-distribution {
    margin-bottom: 20px;
}

.emotion-distribution h4 {
    font-size: 14px;
    margin-bottom: 12px;
}

.distribution-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dist-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dist-bar-bg {
    flex: 1;
    height: 8px;
    background: var(--bg-light);
    border-radius: 4px;
    overflow: hidden;
}

.dist-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.dist-bar.excellent {
    background: linear-gradient(90deg, #4caf50, #8bc34a);
}

.dist-bar.good {
    background: linear-gradient(90deg, #2196f3, #03a9f4);
}

.dist-bar.normal {
    background: linear-gradient(90deg, #ff9800, #ffc107);
}

.dist-bar.low {
    background: linear-gradient(90deg, #f44336, #e91e63);
}

.dist-label {
    font-size: 12px;
    color: var(--text-light);
    min-width: 100px;
}

.emotion-insights {
    margin-bottom: 20px;
}

.emotion-insights h4 {
    font-size: 14px;
    margin-bottom: 12px;
}

.insight-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.insight-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-light);
    border-radius: 10px;
    padding: 12px;
}

.insight-icon {
    font-size: 28px;
}

.insight-content h5 {
    font-size: 13px;
    color: var(--text);
    margin-bottom: 2px;
}

.insight-content p {
    font-size: 12px;
    color: var(--text-light);
}

.emotion-actions {
    margin-top: 16px;
}

/* ===== 班级公告样式 ===== */
.class-announcements-container {
    padding: 0 16px 16px;
}

.announcements-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.ann-camp-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ann-camp-icon {
    font-size: 24px;
}

.camp-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.unread-badge {
    font-size: 11px;
    background: #ff4757;
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
}

.announcements-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.announcement-item {
    background: var(--bg-light);
    border-radius: 12px;
    padding: 14px;
    cursor: pointer;
    transition: all 0.3s;
    border-left: 3px solid transparent;
}

.announcement-item.unread {
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.announcement-item.important {
    border-left-color: #ff4757;
}

.announcement-item.activity {
    border-left-color: #2ed573;
}

.announcement-item.homework {
    border-left-color: #ffa502;
}

.announcement-item.normal {
    border-left-color: #3742fa;
}

.announcement-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.announcement-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.new-dot {
    width: 8px;
    height: 8px;
    background: #ff4757;
    border-radius: 50%;
}

.announcement-content {
    font-size: 13px;
    color: var(--text-light);
    line-height: 1.5;
    margin-bottom: 10px;
}

.announcement-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.announcement-time {
    font-size: 11px;
    color: var(--text-lighter);
}

.announcement-time i {
    margin-right: 4px;
}

.announcement-type-tag {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 4px;
    color: white;
}

.announcement-type-tag.important {
    background: #ff4757;
}

.announcement-type-tag.activity {
    background: #2ed573;
}

.announcement-type-tag.homework {
    background: #ffa502;
}

.announcement-type-tag.normal {
    background: #3742fa;
}

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

/* ===== 学习提醒通知样式 ===== */
.learning-reminder-notification {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-120%);
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    z-index: 10000;
    max-width: 90%;
    width: 360px;
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.learning-reminder-notification.show {
    transform: translateX(-50%) translateY(0);
}

.reminder-icon {
    font-size: 36px;
    flex-shrink: 0;
}

.reminder-content {
    flex: 1;
}

.reminder-content h4 {
    font-size: 14px;
    color: var(--text);
    margin-bottom: 2px;
}

.reminder-content p {
    font-size: 12px;
    color: var(--text-light);
}

.reminder-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.reminder-actions .btn-go {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
}

.reminder-actions .btn-dismiss {
    background: none;
    border: none;
    color: var(--text-lighter);
    font-size: 11px;
    cursor: pointer;
}

/* ===== 事件提醒弹窗样式 ===== */
.event-reminder {
    padding: 30px 20px;
    text-align: center;
}

.event-reminder .event-icon {
    font-size: 56px;
    margin-bottom: 16px;
}

.event-reminder h3 {
    font-size: 18px;
    color: var(--text);
    margin-bottom: 12px;
}

.event-reminder p {
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 8px;
}

.event-reminder strong {
    color: var(--primary);
}

.event-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 24px;
}

.event-actions button {
    padding: 10px 24px;
}


/* ===== 情绪快速记录样式 ===== */
.mood-quick-record {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.08), rgba(118, 75, 162, 0.08));
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
    text-align: center;
}

.mood-quick-record h4 {
    font-size: 14px;
    margin-bottom: 12px;
    color: var(--text);
}

.mood-emoji-selector {
    display: flex;
    justify-content: space-around;
}

.mood-emoji {
    font-size: 30px;
    cursor: pointer;
    transition: transform 0.2s, filter 0.2s;
    padding: 8px;
    border-radius: 50%;
    filter: grayscale(0.2);
}

.mood-emoji:hover { transform: scale(1.25); }
.mood-emoji:active { transform: scale(1.05); }

.mood-emoji.selected {
    transform: scale(1.3);
    filter: none;
    background: rgba(102, 126, 234, 0.15);
}

/* 选中后展开的输入区 */
.mood-input-area {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    margin-top: 0;
}

.mood-input-area.visible {
    max-height: 160px;
    opacity: 1;
    margin-top: 12px;
}

.mood-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    color: var(--text);
    background: var(--card-bg);
    resize: none;
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
    line-height: 1.5;
}

.mood-textarea:focus {
    border-color: var(--primary);
}

.mood-save-btn {
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: opacity 0.2s;
}

.mood-save-btn:active { opacity: 0.8; }

.mood-empty {
    text-align: center;
    color: var(--text-lighter);
    font-size: 13px;
    padding: 20px 0;
}

/* 最近记录 - 头部 + 删除按钮 */
.mood-history-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 4px;
}

.mood-clear-all {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-lighter);
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
}

.mood-clear-all:hover {
    color: #e74c3c;
    border-color: #e74c3c;
}

.mood-clear-all i {
    font-size: 11px;
}

.mood-entry {
    position: relative;
}

.mood-del-btn {
    background: transparent;
    border: none;
    color: var(--text-lighter);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
    opacity: 0.5;
}

.mood-del-btn:hover {
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
    opacity: 1;
}

.mood-del-btn i {
    font-size: 12px;
}

/* 柱状图 - 用 wrap 固定基线 */
.mood-bars {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    padding: 4px 0;
}

.mood-bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.mood-bar-wrap {
    width: 24px;
    height: 80px;
    display: flex;
    align-items: flex-end;
}

.mood-bar {
    width: 24px;
    border-radius: 6px 6px 3px 3px;
    background: linear-gradient(to top, var(--primary), var(--accent));
    transition: height 0.5s ease;
    min-height: 6px;
}

.mood-bar--empty {
    background: var(--border);
}

.mood-bar-label {
    font-size: 11px;
    color: var(--text-lighter);
}

.mood-record-container .mood-chart {
    margin-bottom: 16px;
}

.mood-record-container .mood-history {
    margin-bottom: 16px;
}


/* ===== 情绪日历样式 ===== */
.emotion-calendar-container {
    padding: 0 16px 16px;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.calendar-nav {
    background: var(--bg-light);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-light);
}

.calendar-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 12px;
    color: var(--text-lighter);
    margin-bottom: 8px;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 16px;
}

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    background: var(--bg-light);
}

.calendar-day.empty {
    background: transparent;
}

.calendar-day.today {
    border: 2px solid var(--primary);
}

.calendar-day.mood-excellent {
    background: rgba(76, 175, 80, 0.2);
}

.calendar-day.mood-good {
    background: rgba(33, 150, 243, 0.2);
}

.calendar-day.mood-normal {
    background: rgba(255, 152, 0, 0.2);
}

.calendar-day.mood-low {
    background: rgba(244, 67, 54, 0.2);
}

.day-num {
    font-size: 12px;
    color: var(--text);
}

.day-emoji {
    font-size: 14px;
    position: absolute;
    bottom: 2px;
}

.calendar-legend {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 16px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-light);
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.legend-dot.excellent { background: #4caf50; }
.legend-dot.good { background: #2196f3; }
.legend-dot.normal { background: #ff9800; }
.legend-dot.low { background: #f44336; }

.calendar-stats {
    display: flex;
    justify-content: space-around;
    background: var(--bg-light);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.calendar-stats .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.calendar-stats .stat-value {
    font-size: 20px;
    font-weight: 600;
    color: var(--primary);
}

.calendar-stats .stat-label {
    font-size: 11px;
    color: var(--text-lighter);
}

/* ===== 冥想统计样式 ===== */
.meditation-stats-container {
    padding: 0 16px 16px;
}

.meditation-hero {
    text-align: center;
    padding: 24px 0;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    border-radius: 16px;
    margin-bottom: 20px;
}

.meditation-icon {
    font-size: 48px;
    margin-bottom: 8px;
}

.meditation-total .total-time {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: var(--primary);
}

.meditation-total .total-label {
    font-size: 13px;
    color: var(--text-light);
}

.meditation-cards {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.med-card {
    flex: 1;
    background: var(--bg-light);
    border-radius: 12px;
    padding: 12px;
    text-align: center;
}

.med-value {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
}

.med-label {
    font-size: 11px;
    color: var(--text-lighter);
}

.meditation-weekly {
    margin-bottom: 20px;
}

.meditation-weekly h4 {
    font-size: 14px;
    margin-bottom: 12px;
}

.weekly-chart {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    height: 100px;
    background: var(--bg-light);
    border-radius: 12px;
    padding: 16px;
}

.weekly-bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.weekly-bar {
    width: 20px;
    background: linear-gradient(180deg, var(--primary), var(--secondary));
    border-radius: 4px 4px 0 0;
    min-height: 4px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.bar-value {
    font-size: 9px;
    color: white;
    margin-top: 2px;
}

.bar-label {
    font-size: 10px;
    color: var(--text-lighter);
    margin-top: 4px;
}

.meditation-achievements h4 {
    font-size: 14px;
    margin-bottom: 12px;
}

.achievement-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.achievement-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-light);
    border-radius: 10px;
    padding: 10px 12px;
}

.achievement-item.locked {
    opacity: 0.5;
}

.achievement-item.unlocked {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 193, 7, 0.1));
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.ach-icon {
    font-size: 20px;
}

.ach-name {
    font-size: 12px;
    color: var(--text);
}

/* ===== 学习数据可视化样式 ===== */
.learning-data-container {
    padding: 0 16px 16px;
}

.data-hero {
    text-align: center;
    padding: 20px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-radius: 16px;
    margin-bottom: 20px;
    color: white;
}

.level-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 12px;
}

.level-num {
    font-size: 32px;
    font-weight: 700;
}

.level-title {
    font-size: 14px;
    opacity: 0.9;
}

.level-progress {
    max-width: 200px;
    margin: 0 auto;
}

.level-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}

.level-fill {
    height: 100%;
    background: white;
    border-radius: 3px;
}

.level-exp {
    font-size: 11px;
    opacity: 0.8;
}

.data-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 20px;
}

.data-card {
    background: var(--bg-light);
    border-radius: 12px;
    padding: 12px 8px;
    text-align: center;
}

.data-icon {
    font-size: 20px;
    margin-bottom: 4px;
}

.data-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}

.data-label {
    font-size: 10px;
    color: var(--text-lighter);
}

.weekly-study-section {
    margin-bottom: 20px;
}

.weekly-study-section h4 {
    font-size: 14px;
    margin-bottom: 12px;
}

.weekly-study-chart {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    height: 120px;
    background: var(--bg-light);
    border-radius: 12px;
    padding: 16px;
}

.study-bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.study-bar {
    width: 24px;
    background: linear-gradient(180deg, var(--primary), var(--secondary));
    border-radius: 4px 4px 0 0;
    min-height: 4px;
}

.study-value {
    font-size: 10px;
    color: var(--text-light);
    margin-top: 4px;
}

.study-day {
    font-size: 11px;
    color: var(--text-lighter);
    margin-top: 2px;
}

.learning-milestones h4 {
    font-size: 14px;
    margin-bottom: 12px;
}

.milestone-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.milestone-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-light);
    border-radius: 8px;
}

.milestone-item.achieved {
    background: rgba(76, 175, 80, 0.1);
}

.milestone-icon {
    font-size: 16px;
}

.milestone-text {
    font-size: 13px;
    color: var(--text);
}

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

/* ===== 线下活动样式 ===== */
.offline-activities-container {
    padding: 0 16px 16px;
}

.activity-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    overflow-x: auto;
    flex-shrink: 0;
}

.activity-tab {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    background: var(--bg-light);
    color: var(--text-light);
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s;
}

.activity-tab.active {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
    height: 380px; /* 固定高度 */
    overflow-y: auto; /* 内容超出时滚动 */
    padding-right: 4px;
}

/* 活动列表滚动条样式 */
.activity-list::-webkit-scrollbar {
    width: 4px;
}

.activity-list::-webkit-scrollbar-track {
    background: transparent;
}

.activity-list::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 2px;
}

.activity-list::-webkit-scrollbar-thumb:hover {
    background: var(--text-lighter);
}

.activity-card {
    display: flex;
    gap: 12px;
    background: var(--bg-light);
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
}

.activity-image {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
}

.activity-info {
    flex: 1;
    min-width: 0;
}

.activity-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
}

.activity-desc {
    font-size: 12px;
    color: var(--text-light);
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-meta {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: var(--text-lighter);
    margin-bottom: 6px;
}

.activity-meta i {
    margin-right: 4px;
}

.activity-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.activity-price {
    font-size: 14px;
    font-weight: 600;
    color: #ff6b6b;
}

.activity-enrolled {
    font-size: 11px;
    color: var(--text-lighter);
}

.activity-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: rgba(255, 152, 0, 0.1);
    border-radius: 8px;
    font-size: 12px;
    color: #ff9800;
}

/* 活动详情 */
.activity-detail-container {
    padding: 0 16px 16px;
}

.activity-detail-info {
    background: var(--bg-light);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.detail-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    font-size: 13px;
    color: var(--text);
    border-bottom: 1px solid var(--border);
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-row i {
    width: 20px;
    color: var(--primary);
}

.activity-detail-desc,
.activity-detail-notes {
    margin-bottom: 16px;
}

.activity-detail-desc h4,
.activity-detail-notes h4 {
    font-size: 14px;
    margin-bottom: 8px;
}

.activity-detail-desc p {
    font-size: 13px;
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 8px;
}

.activity-detail-notes ul {
    padding-left: 20px;
    font-size: 13px;
    color: var(--text-light);
    line-height: 1.8;
}

.activity-detail-footer {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.activity-price-large {
    flex: 1;
}

.activity-price-large .price {
    font-size: 24px;
    font-weight: 700;
    color: #ff6b6b;
}

.activity-price-large .free {
    font-size: 20px;
    font-weight: 600;
    color: #4caf50;
}

/* ===== 录制面板样式 ===== */
.recording-container {
    padding: 16px;
}

.recording-preview {
    margin-bottom: 16px;
}

.video-preview,
.audio-preview {
    height: 200px;
    background: #1a1a2e;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.preview-placeholder {
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
}

.preview-placeholder i {
    font-size: 48px;
    margin-bottom: 8px;
}

.preview-placeholder p {
    font-size: 14px;
}

.recording-indicator {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #ff4757;
    font-size: 12px;
    font-weight: 600;
}

.rec-dot {
    width: 8px;
    height: 8px;
    background: #ff4757;
    border-radius: 50%;
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.audio-wave {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 60px;
}

.wave-bar {
    width: 4px;
    height: 20px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}

.audio-wave.active .wave-bar {
    animation: wave 0.5s ease-in-out infinite alternate;
    background: var(--primary);
}

.audio-wave.active .wave-bar:nth-child(1) { animation-delay: 0s; }
.audio-wave.active .wave-bar:nth-child(2) { animation-delay: 0.1s; }
.audio-wave.active .wave-bar:nth-child(3) { animation-delay: 0.2s; }
.audio-wave.active .wave-bar:nth-child(4) { animation-delay: 0.3s; }
.audio-wave.active .wave-bar:nth-child(5) { animation-delay: 0.4s; }

@keyframes wave {
    from { height: 10px; }
    to { height: 40px; }
}

.recording-timer {
    text-align: center;
    margin-bottom: 12px;
}

.timer-display {
    font-size: 32px;
    font-weight: 600;
    color: var(--text);
}

.timer-limit {
    font-size: 14px;
    color: var(--text-lighter);
}

.recording-tips {
    text-align: center;
    margin-bottom: 20px;
}

.recording-tips p {
    font-size: 12px;
    color: var(--text-light);
}

.recording-tips i {
    color: #ff9800;
    margin-right: 4px;
}

.recording-controls {
    text-align: center;
    margin-bottom: 16px;
}

.record-btn {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 4px solid var(--primary);
    background: white;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    transition: all 0.3s;
}

.record-btn i {
    font-size: 24px;
    color: #ff4757;
}

.record-btn span {
    font-size: 10px;
    color: var(--text-light);
    margin-top: 2px;
}

.record-btn.recording {
    background: #ff4757;
    border-color: #ff4757;
}

.record-btn.recording i {
    color: white;
}

.record-btn.recording span {
    color: white;
}

.recording-actions {
    display: flex;
    gap: 12px;
}

.recording-actions button {
    flex: 1;
}

/* ===== 导师申请样式 ===== */
.tutor-application-container {
    padding: 0 16px 16px;
}

.application-intro {
    text-align: center;
    padding: 20px 0;
}

.intro-icon {
    font-size: 48px;
    margin-bottom: 8px;
}

.application-intro h2 {
    font-size: 20px;
    margin-bottom: 8px;
}

.application-intro p {
    font-size: 13px;
    color: var(--text-light);
}

.tutor-benefits,
.tutor-requirements,
.tutor-levels {
    margin-bottom: 20px;
}

.tutor-benefits h4,
.tutor-requirements h4,
.tutor-levels h4 {
    font-size: 14px;
    margin-bottom: 12px;
}

.benefit-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-light);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
}

.benefit-icon {
    font-size: 18px;
}

.tutor-requirements ul {
    padding-left: 20px;
    font-size: 13px;
    color: var(--text-light);
    line-height: 1.8;
}

.level-cards {
    display: flex;
    gap: 10px;
}

.level-card {
    flex: 1;
    text-align: center;
    background: var(--bg-light);
    border-radius: 12px;
    padding: 12px;
}

.level-badge {
    font-size: 24px;
    display: block;
    margin-bottom: 4px;
}

.level-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    display: block;
}

.level-desc {
    font-size: 11px;
    color: var(--text-lighter);
}

.application-form {
    margin-bottom: 16px;
}

.application-form .form-group {
    margin-bottom: 16px;
}

.application-form label {
    display: block;
    font-size: 13px;
    color: var(--text);
    margin-bottom: 6px;
}

.application-form input,
.application-form select,
.application-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    background: var(--bg);
}

.application-form textarea {
    resize: none;
}

.application-note {
    text-align: center;
    font-size: 12px;
    color: var(--text-lighter);
}

.application-note i {
    margin-right: 4px;
}


/* ===== 打卡录制按钮样式 ===== */
.checkin-media-btns {
    display: flex;
    gap: 10px;
    margin: 12px 0;
}

.btn-media {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    background: var(--bg-light);
    color: var(--text-light);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-media:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(102, 126, 234, 0.05);
}

.btn-media i {
    font-size: 16px;
}


/* ===== 购物车样式 ===== */
.shopping-cart-container {
    padding: 0 16px 16px;
}

.cart-empty {
    text-align: center;
    padding: 40px 20px;
}

.cart-empty .empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.cart-empty p {
    color: var(--text-lighter);
    margin-bottom: 16px;
}

.cart-list {
    margin-bottom: 16px;
}

.cart-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-light);
    border-radius: 12px;
    margin-bottom: 10px;
}

.cart-item-cover {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
    flex-shrink: 0;
}

.cart-item-info {
    flex: 1;
}

.cart-item-info h4 {
    font-size: 14px;
    margin-bottom: 4px;
}

.cart-item-info p {
    font-size: 12px;
    color: var(--text-lighter);
    margin-bottom: 4px;
}

.cart-item-price {
    font-size: 14px;
    font-weight: 600;
    color: #ff6b6b;
}

.cart-item-remove {
    background: none;
    border: none;
    color: var(--text-lighter);
    padding: 8px;
    cursor: pointer;
}

.cart-summary {
    background: var(--bg-light);
    border-radius: 12px;
    padding: 16px;
}

.cart-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.total-price strong {
    font-size: 20px;
    color: #ff6b6b;
}

/* ===== 支付页面样式 ===== */
.payment-container {
    padding: 0 16px 16px;
}

.order-summary {
    background: var(--bg-light);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.order-summary h4 {
    font-size: 14px;
    margin-bottom: 12px;
}

.order-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 13px;
    color: var(--text-light);
    border-bottom: 1px solid var(--border);
}

.order-total {
    display: flex;
    justify-content: space-between;
    padding-top: 12px;
    font-size: 14px;
}

.total-amount {
    font-size: 18px;
    font-weight: 700;
    color: #ff6b6b;
}

.payment-methods {
    margin-bottom: 16px;
}

.payment-methods h4 {
    font-size: 14px;
    margin-bottom: 12px;
}

.payment-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-light);
    border-radius: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    border: 2px solid transparent;
}

.payment-option.selected {
    border-color: var(--primary);
    background: rgba(102, 126, 234, 0.05);
}

.payment-option i:first-child {
    font-size: 24px;
}

.payment-option span {
    flex: 1;
    font-size: 14px;
}

.payment-option .fa-check-circle {
    color: var(--primary);
    opacity: 0;
}

.payment-option.selected .fa-check-circle {
    opacity: 1;
}

.coupon-section {
    margin-bottom: 16px;
}

.coupon-select {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: var(--bg-light);
    border-radius: 10px;
    cursor: pointer;
}

.coupon-select span {
    flex: 1;
    font-size: 14px;
}

.pay-btn {
    font-size: 16px;
    padding: 14px;
}

.payment-notice {
    text-align: center;
    font-size: 12px;
    color: var(--text-lighter);
    margin-top: 12px;
}

.payment-notice i {
    color: #4caf50;
    margin-right: 4px;
}

/* 支付成功 */
.payment-success-container {
    text-align: center;
    padding: 40px 20px;
}

.success-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

.payment-success-container h2 {
    font-size: 20px;
    margin-bottom: 8px;
}

.payment-success-container p {
    color: var(--text-light);
    margin-bottom: 24px;
}

.success-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ===== 勋章样式 ===== */
.badges-container {
    padding: 0 16px 16px;
}

.badges-summary {
    display: flex;
    align-items: center;
    gap: 20px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    color: white;
}

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

.count-num {
    font-size: 36px;
    font-weight: 700;
    display: block;
}

.count-label {
    font-size: 12px;
    opacity: 0.8;
}

.badges-progress {
    flex: 1;
}

.badges-progress .progress-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 6px;
}

.badges-progress .progress-fill {
    height: 100%;
    background: white;
    border-radius: 4px;
}

.badges-progress span {
    font-size: 12px;
    opacity: 0.8;
}

.badges-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

/* ---- 单个勋章 ---- */
.badge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: transform 0.2s;
}
.badge-item:active { transform: scale(0.95); }

/* ---- 圆形徽章主体 ---- */
.badge-circle {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--border);          /* 未解锁默认灰色 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    overflow: hidden;
}

/* 已获得：加金色外环 + 光晕投影 */
.badge-item.earned .badge-circle {
    box-shadow:
        0 0 0 3px rgba(255,255,255,0.8),
        0 0 0 5px rgba(255,193,7,0.5),
        0 6px 20px rgba(0,0,0,0.18);
}

/* ---- 表情图标 ---- */
.badge-emoji {
    font-size: 30px;
    line-height: 1;
    position: relative;
    z-index: 1;
    /* 未解锁状态灰度 */
    filter: grayscale(1) opacity(0.45);
}
.badge-item.earned .badge-emoji {
    filter: none;
}

/* ---- 光泽高光（已解锁才有） ---- */
.badge-shine {
    position: absolute;
    top: -30%;
    left: -20%;
    width: 60%;
    height: 65%;
    background: rgba(255,255,255,0.30);
    border-radius: 50%;
    transform: rotate(-30deg);
    pointer-events: none;
}

/* ---- 锁形遮罩（未解锁） ---- */
.badge-lock {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.22);
    border-radius: 50%;
}
.badge-lock .i {
    width: 20px;
    height: 20px;
    color: rgba(255,255,255,0.85);
    stroke-width: 2.5;
}

/* ---- 文字 ---- */
.badge-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    text-align: center;
    white-space: nowrap;
}
.badge-item.locked .badge-name {
    color: var(--text-lighter);
}

.badge-condition {
    font-size: 10px;
    color: var(--text-lighter);
    text-align: center;
    white-space: nowrap;
    margin-top: -4px;
}

/* 勋章获得通知 */
.badge-notification {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-120%);
    background: linear-gradient(135deg, #ffd700, #ffb347);
    border-radius: 16px;
    padding: 16px 24px;
    box-shadow: 0 8px 32px rgba(255, 193, 7, 0.4);
    z-index: 10000;
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.badge-notification.show {
    transform: translateX(-50%) translateY(0);
}

.badge-earned-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.badge-earned-icon {
    font-size: 36px;
}

.badge-earned-text h4 {
    font-size: 14px;
    color: #333;
    margin-bottom: 2px;
}

.badge-earned-text p {
    font-size: 12px;
    color: #666;
}

/* ===== 学习指南样式 ===== */
.learning-guide-container {
    padding: 0 16px 16px;
}

.guide-intro {
    text-align: center;
    padding: 20px 0;
}

.guide-icon {
    font-size: 48px;
    margin-bottom: 8px;
}

.guide-intro h2 {
    font-size: 18px;
    margin-bottom: 8px;
}

.guide-intro p {
    font-size: 13px;
    color: var(--text-light);
}

.guide-steps {
    margin-bottom: 20px;
}

.guide-step {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.step-num {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
}

.step-content h4 {
    font-size: 14px;
    margin-bottom: 4px;
}

.step-content p {
    font-size: 12px;
    color: var(--text-light);
    line-height: 1.5;
}

.guide-tips {
    background: var(--bg-light);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.guide-tips h4 {
    font-size: 14px;
    margin-bottom: 10px;
}

.guide-tips ul {
    padding-left: 20px;
    font-size: 13px;
    color: var(--text-light);
    line-height: 1.8;
}

/* ===== 预习资料样式 ===== */
.preview-materials-container {
    padding: 0 16px 16px;
}

.materials-header {
    text-align: center;
    margin-bottom: 20px;
}

.course-tag {
    display: inline-block;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    margin-bottom: 8px;
}

.materials-header p {
    font-size: 13px;
    color: var(--text-light);
}

.materials-list {
    margin-bottom: 16px;
}

.material-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: var(--bg-light);
    border-radius: 12px;
    margin-bottom: 10px;
    cursor: pointer;
}

.material-icon {
    font-size: 28px;
}

.material-info {
    flex: 1;
}

.material-info h4 {
    font-size: 14px;
    margin-bottom: 4px;
}

.material-info p {
    font-size: 12px;
    color: var(--text-light);
    margin-bottom: 4px;
}

.material-duration {
    font-size: 11px;
    color: var(--primary);
}

.materials-footer {
    text-align: center;
    font-size: 12px;
    color: var(--text-lighter);
}

.no-materials {
    text-align: center;
    padding: 40px;
    color: var(--text-lighter);
}

/* ===== 语音点评样式 ===== */
.voice-review-container {
    padding: 16px;
    text-align: center;
}

.voice-preview {
    background: #1a1a2e;
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 16px;
}

.voice-wave-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 60px;
    margin-bottom: 12px;
}

.wave-line {
    width: 4px;
    height: 20px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}

.wave-line.active {
    animation: voiceWave 0.5s ease-in-out infinite alternate;
    background: var(--primary);
}

.wave-line:nth-child(1) { animation-delay: 0s; }
.wave-line:nth-child(2) { animation-delay: 0.1s; }
.wave-line:nth-child(3) { animation-delay: 0.2s; }
.wave-line:nth-child(4) { animation-delay: 0.3s; }
.wave-line:nth-child(5) { animation-delay: 0.2s; }
.wave-line:nth-child(6) { animation-delay: 0.1s; }
.wave-line:nth-child(7) { animation-delay: 0s; }

@keyframes voiceWave {
    from { height: 10px; }
    to { height: 40px; }
}

.voice-duration {
    color: white;
    font-size: 24px;
    font-weight: 600;
}

.voice-tips {
    margin-bottom: 20px;
}

.voice-tips p {
    font-size: 12px;
    color: var(--text-light);
}

.voice-controls {
    margin-bottom: 20px;
}

.voice-record-btn {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    font-size: 28px;
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: 8px;
}

.voice-record-btn.recording {
    background: #ff4757;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.voice-hint {
    font-size: 12px;
    color: var(--text-lighter);
}

.voice-actions {
    display: flex;
    gap: 12px;
}

.voice-actions button {
    flex: 1;
}

/* ===== 班级讨论区样式 ===== */
.class-discussion-container {
    display: flex;
    flex-direction: column;
    height: 70vh;
}

.discussion-tabs {
    display: flex;
    gap: 8px;
    padding: 0 16px 12px;
    border-bottom: 1px solid var(--border);
}

.disc-tab {
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 13px;
    background: var(--bg-light);
    color: var(--text-light);
    cursor: pointer;
}

.disc-tab.active {
    background: var(--primary);
    color: white;
}

.discussion-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
}

.discussion-item {
    background: var(--bg-light);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
}

.discussion-item.teacher-post {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    border: 1px solid rgba(102, 126, 234, 0.2);
}

.disc-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.disc-avatar {
    font-size: 20px;
}

.disc-user {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.teacher-badge {
    font-size: 10px;
    background: var(--primary);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
}

.disc-time {
    font-size: 11px;
    color: var(--text-lighter);
    margin-left: auto;
}

.disc-content {
    font-size: 14px;
    color: var(--text);
    line-height: 1.6;
    margin-bottom: 12px;
}

.disc-actions {
    display: flex;
    gap: 20px;
}

.disc-actions span {
    font-size: 12px;
    color: var(--text-lighter);
    cursor: pointer;
}

.disc-actions span i {
    margin-right: 4px;
}

.discussion-input {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    background: var(--bg);
}

.discussion-input input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 14px;
    background: var(--bg-light);
}

.btn-send {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    cursor: pointer;
}

/* ===== 学习日历样式 ===== */
.learning-calendar-container {
    padding: 0 16px 16px;
}

.cal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.cal-nav {
    background: var(--bg-light);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-light);
}

.cal-title {
    font-size: 16px;
    font-weight: 600;
}

.cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 12px;
    color: var(--text-lighter);
    margin-bottom: 8px;
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 16px;
}

.cal-day {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--bg-light);
    position: relative;
}

.cal-day.empty {
    background: transparent;
}

.cal-day.today {
    border: 2px solid var(--primary);
}

.cal-day.has-record {
    background: rgba(102, 126, 234, 0.15);
}

.day-number {
    font-size: 12px;
    color: var(--text);
}

.day-dot {
    width: 4px;
    height: 4px;
    background: var(--primary);
    border-radius: 50%;
    position: absolute;
    bottom: 4px;
}

.cal-legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 16px;
    font-size: 12px;
    color: var(--text-light);
}

.cal-legend .legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}

.cal-legend .legend-dot.active {
    background: var(--primary);
}

.cal-legend .legend-dot.today {
    border: 2px solid var(--primary);
    background: transparent;
}

.cal-stats {
    display: flex;
    justify-content: center;
    gap: 40px;
}

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

.cal-stat .stat-num {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--primary);
}

.cal-stat .stat-label {
    font-size: 12px;
    color: var(--text-lighter);
}


/* ===== AI语音评测样式 ===== */
/* "演示版" 标签（用于尚未接入真实后端的功能） */
.demo-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    margin-left: 8px;
    border-radius: 10px;
    background: linear-gradient(135deg, #ffa726, #ff7043);
    color: #fff;
    vertical-align: middle;
    letter-spacing: 0.5px;
}

/* 演示版功能的提示条 */
.demo-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 16px 16px;
    padding: 12px 14px;
    background: linear-gradient(135deg, #fff8e1, #fff3e0);
    border: 1px solid #ffe0b2;
    border-radius: 12px;
}

.demo-notice > .i {
    font-size: 18px;
    color: #ff9800;
    margin-top: 1px;
    flex-shrink: 0;
}

.demo-notice div {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 12.5px;
    color: #6d4c41;
    line-height: 1.5;
}

.demo-notice strong {
    color: #e65100;
    font-weight: 600;
}

.ai-assessment-container {
    padding: 0 16px 16px;
}

.ai-intro {
    text-align: center;
    padding: 16px 0;
}

.ai-icon {
    font-size: 48px;
    margin-bottom: 8px;
}

.ai-intro h2 {
    font-size: 18px;
    margin-bottom: 8px;
}

.ai-intro p {
    font-size: 13px;
    color: var(--text-light);
}

.ai-features {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}

.ai-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.feature-icon {
    font-size: 24px;
}

.feature-name {
    font-size: 11px;
    color: var(--text-light);
}

.ai-record-area {
    background: #1a1a2e;
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    margin-bottom: 16px;
}

.ai-wave-display {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    height: 50px;
    margin-bottom: 12px;
}

.ai-wave-bar {
    width: 4px;
    height: 15px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}

.ai-wave-bar.active {
    animation: aiWave 0.4s ease-in-out infinite alternate;
    background: var(--primary);
}

.ai-wave-bar:nth-child(1) { animation-delay: 0s; }
.ai-wave-bar:nth-child(2) { animation-delay: 0.05s; }
.ai-wave-bar:nth-child(3) { animation-delay: 0.1s; }
.ai-wave-bar:nth-child(4) { animation-delay: 0.15s; }
.ai-wave-bar:nth-child(5) { animation-delay: 0.2s; }
.ai-wave-bar:nth-child(6) { animation-delay: 0.15s; }
.ai-wave-bar:nth-child(7) { animation-delay: 0.1s; }
.ai-wave-bar:nth-child(8) { animation-delay: 0.05s; }
.ai-wave-bar:nth-child(9) { animation-delay: 0s; }

@keyframes aiWave {
    from { height: 10px; }
    to { height: 35px; }
}

.ai-timer {
    font-size: 28px;
    font-weight: 600;
    color: white;
}

.ai-prompt {
    background: var(--bg-light);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 16px;
    text-align: center;
}

.ai-prompt h4 {
    font-size: 12px;
    color: var(--text-lighter);
    margin-bottom: 8px;
}

.ai-prompt p {
    font-size: 14px;
    color: var(--text);
    font-style: italic;
    margin-bottom: 8px;
}

.ai-controls {
    text-align: center;
    margin-bottom: 16px;
}

.ai-record-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 32px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-size: 14px;
}

.ai-record-btn.recording {
    background: #ff4757;
    animation: pulse 1s infinite;
}

.ai-record-btn i {
    font-size: 24px;
}

.ai-tips {
    text-align: center;
    font-size: 12px;
    color: var(--text-lighter);
}

/* AI分析中 */
.ai-analyzing {
    text-align: center;
    padding: 30px;
}

.analyzing-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 12px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* AI评测结果 */
.ai-result-content {
    padding: 16px 0;
}

.ai-total-score {
    text-align: center;
    margin-bottom: 20px;
}

.score-circle {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    color: white;
}

.score-num {
    font-size: 32px;
    font-weight: 700;
}

.score-label {
    font-size: 11px;
    opacity: 0.8;
}

.score-level {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary);
}

.ai-detail-scores {
    margin-bottom: 20px;
}

.detail-score-item {
    margin-bottom: 14px;
}

.detail-header {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 6px;
}

.detail-bar {
    height: 6px;
    background: var(--bg-light);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}

.detail-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius: 3px;
}

.detail-tip {
    font-size: 11px;
    color: var(--text-lighter);
}

.ai-suggestions {
    background: var(--bg-light);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 16px;
}

.ai-suggestions h4 {
    font-size: 14px;
    margin-bottom: 10px;
}

.ai-suggestions ul {
    padding-left: 20px;
    font-size: 13px;
    color: var(--text-light);
    line-height: 1.8;
}

.ai-actions {
    display: flex;
    gap: 10px;
}

.ai-actions button {
    flex: 1;
}

/* ===== 兑换码样式 ===== */
.redeem-container {
    padding: 16px;
    text-align: center;
}

.redeem-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.redeem-container h2 {
    font-size: 18px;
    margin-bottom: 8px;
}

.redeem-container > p {
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 20px;
}

.redeem-input-group {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
}

.redeem-input-group button {
    flex-shrink: 0;
    white-space: nowrap;
}

.redeem-input-group input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 16px;
    text-transform: uppercase;
}

.redeem-history {
    text-align: left;
    margin-bottom: 20px;
}

.redeem-history h4 {
    font-size: 14px;
    margin-bottom: 12px;
}

.redeem-list {
    background: var(--bg-light);
    border-radius: 10px;
    padding: 12px;
}

.no-history {
    text-align: center;
    color: var(--text-lighter);
    font-size: 13px;
    padding: 16px;
}

.redeem-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.redeem-item:last-child {
    border-bottom: none;
}

.redeem-name {
    font-size: 13px;
    color: var(--text);
}

.redeem-time {
    font-size: 11px;
    color: var(--text-lighter);
    display: block;
    margin-top: 2px;
}

.redeem-status.success {
    font-size: 12px;
    color: #4caf50;
}

.redeem-tips {
    text-align: left;
}

.redeem-tips h4 {
    font-size: 14px;
    margin-bottom: 10px;
}

.redeem-tips ul {
    padding-left: 20px;
    font-size: 13px;
    color: var(--text-light);
    line-height: 1.8;
}

/* 兑换成功 */
.redeem-success {
    text-align: center;
    padding: 30px 16px;
}

.redeem-success .success-icon {
    font-size: 56px;
    margin-bottom: 12px;
}

.redeem-success h2 {
    font-size: 20px;
    margin-bottom: 16px;
}

.reward-card {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 193, 7, 0.1));
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 12px;
    padding: 12px 20px;
    margin-bottom: 16px;
}

.reward-type {
    font-size: 28px;
}

.reward-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}

/* ===== 推广海报样式 ===== */
.poster-container {
    padding: 0 16px 16px;
}

.poster-preview {
    margin-bottom: 16px;
}

.poster-bg {
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 16px;
    padding: 24px;
    color: white;
    text-align: center;
}

.poster-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
}

.poster-logo {
    font-size: 24px;
}

.poster-title {
    font-size: 16px;
    font-weight: 600;
}

.poster-content h2 {
    font-size: 20px;
    margin-bottom: 8px;
}

.poster-content p {
    font-size: 12px;
    opacity: 0.9;
    margin-bottom: 20px;
}

.poster-user {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
}

.poster-avatar {
    font-size: 24px;
}

.poster-name {
    font-size: 13px;
}

.poster-qrcode {
    margin-bottom: 12px;
}

.qrcode-placeholder {
    width: 80px;
    height: 80px;
    background: white;
    border-radius: 8px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text);
}

.qrcode-placeholder i {
    font-size: 32px;
    margin-bottom: 4px;
}

.qrcode-placeholder p {
    font-size: 10px;
    color: var(--text-light);
    margin: 0;
}

.poster-code {
    font-size: 12px;
    opacity: 0.9;
}

.poster-templates {
    margin-bottom: 16px;
}

.poster-templates h4 {
    font-size: 14px;
    margin-bottom: 12px;
}

.template-list {
    display: flex;
    gap: 10px;
}

.template-item {
    flex: 1;
    text-align: center;
    cursor: pointer;
}

.template-preview {
    height: 50px;
    border-radius: 8px;
    margin-bottom: 4px;
    border: 2px solid transparent;
}

.template-item.active .template-preview {
    border-color: var(--primary);
}

.template-item span {
    font-size: 11px;
    color: var(--text-light);
}

/* ===== 冥想音频库样式 ===== */
.meditation-library-container {
    padding: 0 16px 16px;
    height: calc(72vh - 80px);
    display: flex;
    flex-direction: column;
}

.library-categories {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.lib-cat {
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 13px;
    background: var(--bg-light);
    color: var(--text-light);
    white-space: nowrap;
    cursor: pointer;
}

.lib-cat.active {
    background: var(--primary);
    color: white;
}

.library-list {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 0;
}

.audio-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-light);
    border-radius: 12px;
    margin-bottom: 10px;
    cursor: pointer;
    animation: fadeInUp 0.2s ease both;
}

.audio-icon {
    font-size: 32px;
}

.audio-info {
    flex: 1;
}

.audio-info h4 {
    font-size: 14px;
    margin-bottom: 4px;
}

.audio-info p {
    font-size: 11px;
    color: var(--text-lighter);
}

.audio-info p i {
    margin-right: 4px;
}

.audio-play-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    cursor: pointer;
}

/* ===== 图文资讯样式 ===== */
.articles-container {
    padding: 0 16px 16px;
    height: calc(72vh - 80px);
    display: flex;
    flex-direction: column;
}

.article-categories {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    overflow-x: auto;
}

.art-cat {
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 13px;
    background: var(--bg-light);
    color: var(--text-light);
    white-space: nowrap;
    cursor: pointer;
}

.art-cat.active {
    background: var(--primary);
    color: white;
}

.article-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    overflow-y: auto;
}

.article-item {
    animation: fadeInUp 0.2s ease both;
}

.article-empty {
    text-align: center;
    padding: 50px 20px;
    color: var(--text-lighter);
}

.article-empty i {
    font-size: 36px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.article-empty p {
    font-size: 13px;
}

.article-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--bg-light);
    border-radius: 12px;
    cursor: pointer;
}

.article-cover {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
}

.article-info {
    flex: 1;
}

.article-info h4 {
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-meta {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: var(--text-lighter);
}

.article-category {
    background: rgba(102, 126, 234, 0.1);
    color: var(--primary);
    padding: 2px 6px;
    border-radius: 4px;
}

/* 文章详情 */
.article-detail {
    padding: 0 16px 16px;
}

.article-detail h2 {
    font-size: 18px;
    line-height: 1.4;
    margin-bottom: 16px;
}

.article-content {
    font-size: 14px;
    line-height: 1.8;
    color: var(--text);
    margin-bottom: 20px;
}

.article-content h4 {
    font-size: 15px;
    margin: 16px 0 8px;
    color: var(--text);
}

.article-content p {
    margin-bottom: 12px;
    color: var(--text-light);
}

.article-actions {
    display: flex;
    gap: 10px;
}

.article-actions button {
    flex: 1;
}

/* ===== 帮助中心样式 ===== */
.help-center-container {
    padding: 0 16px 16px;
}

.help-search {
    position: relative;
    margin-bottom: 16px;
}

.help-search input {
    width: 100%;
    padding: 12px 16px 12px 40px;
    border: 1px solid var(--border);
    border-radius: 24px;
    font-size: 14px;
    background: var(--bg-light);
}

.help-search i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-lighter);
}

.help-quick-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.quick-action {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px;
    background: var(--bg-light);
    border-radius: 12px;
    cursor: pointer;
}

.quick-action i {
    font-size: 24px;
    color: var(--primary);
}

.quick-action span {
    font-size: 12px;
    color: var(--text);
}

.faq-section h4 {
    font-size: 14px;
    margin-bottom: 12px;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.faq-item {
    background: var(--bg-light);
    border-radius: 10px;
    overflow: hidden;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px;
    cursor: pointer;
    font-size: 14px;
}

.faq-question i {
    color: var(--text-lighter);
    transition: transform 0.3s;
}

.faq-answer {
    padding: 0 14px 14px;
    font-size: 13px;
    color: var(--text-light);
    line-height: 1.6;
}

/* ===== 反馈样式 ===== */
.feedback-container {
    padding: 16px;
}

.feedback-types {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.fb-type {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    background: var(--bg-light);
    color: var(--text-light);
    cursor: pointer;
}

.fb-type.active {
    background: var(--primary);
    color: white;
}

.feedback-container textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    resize: none;
    margin-bottom: 16px;
}

.feedback-contact {
    margin-bottom: 16px;
}

.feedback-contact label {
    display: block;
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 6px;
}

.feedback-contact input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
}


/* ===== 优惠券选择 ===== */
.coupon-select-list {
    max-height: 400px;
    overflow-y: auto;
}

.coupon-select-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.2s;
}

.coupon-select-item:hover {
    background: var(--bg-light);
}

.coupon-select-item .coupon-value {
    width: 70px;
    text-align: center;
    flex-shrink: 0;
}

.coupon-select-item .coupon-value .amount {
    font-size: 24px;
    font-weight: 700;
    color: var(--danger);
}

.coupon-select-item .coupon-value .discount {
    font-size: 20px;
    font-weight: 700;
    color: var(--danger);
}

.coupon-select-item .coupon-info {
    flex: 1;
}

.coupon-select-item .coupon-info h4 {
    font-size: 14px;
    margin-bottom: 4px;
}

.coupon-select-item .coupon-info p {
    font-size: 12px;
    color: var(--text-lighter);
    margin-bottom: 2px;
}

.coupon-select-item .coupon-info .expire {
    font-size: 11px;
    color: var(--text-lighter);
}

.coupon-select-item .coupon-check {
    color: var(--primary);
    font-size: 20px;
    opacity: 0;
    transition: opacity 0.2s;
}

.coupon-select-item:hover .coupon-check {
    opacity: 1;
}

.coupon-select-item.no-coupon {
    justify-content: center;
    color: var(--text-light);
}

/* ===== 活动筛选Tab ===== */
.activity-tabs {
    display: flex;
    gap: 8px;
    padding: 12px 0;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.activity-tab {
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    background: var(--bg-light);
    color: var(--text-light);
    cursor: pointer;
    transition: all 0.2s;
}

.activity-tab.active {
    background: var(--primary);
    color: white;
}

.activity-tab:hover:not(.active) {
    background: var(--border);
}


/* ===== 新版冥想专区样式 ===== */
.meditation-container-new {
    padding: 0;
    margin: -24px -24px 0;
    overflow: hidden;
}

/* 氛围背景 */
.meditation-atmosphere {
    position: relative;
    height: 200px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: all 0.5s ease;
}

.meditation-atmosphere.active {
    background: linear-gradient(135deg, #0f3460 0%, #1a1a2e 50%, #16213e 100%);
}

.atmosphere-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.3), transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.2), transparent),
        radial-gradient(2px 2px at 50px 160px, rgba(255,255,255,0.3), transparent),
        radial-gradient(2px 2px at 90px 40px, rgba(255,255,255,0.2), transparent),
        radial-gradient(2px 2px at 130px 80px, rgba(255,255,255,0.3), transparent),
        radial-gradient(2px 2px at 160px 120px, rgba(255,255,255,0.2), transparent);
    background-size: 200px 200px;
    animation: twinkle 4s ease-in-out infinite;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.atmosphere-glow {
    position: absolute;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(102, 126, 234, 0.4) 0%, transparent 70%);
    border-radius: 50%;
    animation: pulse-glow 3s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

/* 计时器区域 */
.meditation-timer-area {
    margin-top: -80px;
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
}

.meditation-ring {
    width: 160px;
    height: 160px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ring-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.ring-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 8;
}

.ring-progress {
    fill: none;
    stroke: url(#ring-gradient);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 565.48;
    stroke-dashoffset: 565.48;
    transition: stroke-dashoffset 0.5s ease;
}

.meditation-ring::before {
    content: '';
    position: absolute;
    width: 140px;
    height: 140px;
    background: var(--card-bg);
    border-radius: 50%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.ring-content {
    position: relative;
    z-index: 1;
    text-align: center;
}

.time-display {
    display: block;
    font-size: 36px;
    font-weight: 300;
    color: var(--text);
    font-family: 'SF Pro Display', -apple-system, sans-serif;
}

.time-label {
    display: block;
    font-size: 12px;
    color: var(--text-lighter);
    margin-top: 4px;
}

/* 引导文字 */
.meditation-guide {
    text-align: center;
    padding: 20px 24px;
    min-height: 80px;
}

.guide-text {
    font-size: 18px;
    color: var(--text);
    margin-bottom: 6px;
    animation: fadeInUp 0.5s ease;
}

.guide-sub {
    font-size: 13px;
    color: var(--text-lighter);
    animation: fadeInUp 0.5s ease 0.1s both;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 时长选择器 */
.meditation-duration-selector {
    padding: 0 16px 16px;
}

.duration-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px;
    -webkit-overflow-scrolling: touch;
}

.duration-scroll::-webkit-scrollbar {
    display: none;
}

.duration-option {
    flex-shrink: 0;
    padding: 12px 16px;
    background: var(--bg);
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
}

.duration-option.active {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    border-color: var(--primary);
}

.duration-time {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}

.duration-desc {
    display: block;
    font-size: 11px;
    color: var(--text-lighter);
    margin-top: 2px;
}

/* 背景音选择器 */
.meditation-bgm-selector {
    padding: 0 24px 16px;
}

.meditation-bgm-selector h4 {
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 10px;
    font-weight: normal;
}

.meditation-bgm-selector h4 i {
    margin-right: 6px;
    color: var(--primary);
}

.bgm-options {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.bgm-option {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--bg);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
}

.bgm-option.active {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15), rgba(118, 75, 162, 0.15));
    border-color: var(--primary);
}

.bgm-icon {
    font-size: 16px;
}

.bgm-name {
    font-size: 13px;
    color: var(--text);
}

/* 主控制按钮 */
.meditation-main-controls {
    padding: 16px 24px;
}

.med-control-btn {
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s;
}

.med-control-btn.play {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.med-control-btn.play:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
}

.med-control-btn.play.playing {
    background: linear-gradient(135deg, #f093fb, #f5576c);
    box-shadow: 0 4px 15px rgba(240, 147, 251, 0.4);
}

.med-control-btn i {
    font-size: 18px;
}

/* 快捷入口 */
.meditation-quick-links {
    display: flex;
    justify-content: center;
    gap: 32px;
    padding: 16px 24px 24px;
    border-top: 1px solid var(--border);
    margin-top: 8px;
}

.quick-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: var(--text-light);
    transition: color 0.2s;
}

.quick-link:hover {
    color: var(--primary);
}

.quick-link i {
    font-size: 20px;
}

.quick-link span {
    font-size: 12px;
}

/* 完成界面 */
.meditation-complete {
    text-align: center;
    padding: 10px 0;
}

.complete-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.complete-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
}

.complete-sub {
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 16px;
}

.complete-stats {
    display: flex;
    justify-content: center;
    gap: 40px;
}

.complete-stats .stat {
    text-align: center;
}

.complete-stats .num {
    display: block;
    font-size: 24px;
    font-weight: 600;
    color: var(--primary);
}

.complete-stats .label {
    font-size: 12px;
    color: var(--text-lighter);
}

/* 冥想技巧 */
.meditation-tips-container {
    padding: 0 4px;
}

.tip-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    background: var(--bg);
    border-radius: 12px;
    margin-bottom: 10px;
}

.tip-icon {
    font-size: 28px;
    flex-shrink: 0;
}

.tip-content h4 {
    font-size: 15px;
    margin-bottom: 4px;
}

.tip-content p {
    font-size: 13px;
    color: var(--text-light);
    line-height: 1.5;
}


/* ===== 冥想场景 - 新版沉浸式设计 ===== */
.med-scene {
    margin: 0;
    min-height: 82vh;
    background: linear-gradient(160deg, #1a1a2e 0%, #16213e 60%, #0f3460 100%);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 20px 20px 0 0;
    transition: background 0.8s ease;
}

.med-scene[data-bgm="nature"] { background: linear-gradient(160deg, #0d2016 0%, #1a3a2a 55%, #2d5a3d 100%); }
.med-scene[data-bgm="rain"]   { background: linear-gradient(160deg, #0d1a26 0%, #1a2a3a 55%, #2d4a5a 100%); }
.med-scene[data-bgm="ocean"]  { background: linear-gradient(160deg, #0d1526 0%, #1a2545 55%, #2d3d6e 100%); }
.med-scene[data-bgm="piano"]  { background: linear-gradient(160deg, #1a0d26 0%, #2a1a3a 55%, #4a2d5a 100%); }
.med-scene[data-bgm="silence"]{ background: linear-gradient(160deg, #111118 0%, #1a1a26 55%, #2d2d3a 100%); }

/* 顶部标题栏 */
.med-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 8px;
    flex-shrink: 0;
}

.med-title {
    font-size: 16px;
    font-weight: 500;
    color: rgba(255,255,255,0.7);
    letter-spacing: 2px;
}

.med-actions {
    display: flex;
    gap: 6px;
}

.med-action-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(255,255,255,0.6);
    transition: all 0.2s;
}
.med-action-btn:hover { background: rgba(255,255,255,0.16); color: #fff; }
.med-action-btn i { font-size: 13px; }

/* 中心：呼吸环 + 计时环 */
.med-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 0 8px;
}

.med-breathe-ring {
    width: 228px;
    height: 228px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.5s;
}

.med-breathe-ring.breathing {
    animation: med-breathe 10s ease-in-out infinite;
    border-color: rgba(255,255,255,0.22);
}

@keyframes med-breathe {
    0%   { transform: scale(1);    box-shadow: 0 0 20px rgba(255,255,255,0.04); }
    40%  { transform: scale(1.11); box-shadow: 0 0 40px rgba(255,255,255,0.12); }
    60%  { transform: scale(1.11); box-shadow: 0 0 40px rgba(255,255,255,0.12); }
    100% { transform: scale(1);    box-shadow: 0 0 20px rgba(255,255,255,0.04); }
}

.med-timer-ring {
    width: 186px;
    height: 186px;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.med-scene .ring-bg {
    fill: none;
    stroke: rgba(255,255,255,0.1);
    stroke-width: 5;
}

.med-scene .ring-progress {
    fill: none;
    stroke: rgba(255,255,255,0.75);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-dasharray: 502.65;
    stroke-dashoffset: 502.65;
    transition: stroke-dashoffset 1s linear;
}

.ring-inner {
    position: relative;
    z-index: 1;
    text-align: center;
}

.med-scene .time-display {
    display: block;
    font-size: 42px;
    font-weight: 200;
    color: rgba(255,255,255,0.95);
    letter-spacing: 3px;
    font-variant-numeric: tabular-nums;
}

.med-scene .time-label {
    display: block;
    font-size: 12px;
    color: rgba(255,255,255,0.45);
    letter-spacing: 2px;
    margin-top: 6px;
    text-transform: uppercase;
}

/* 引导文字 */
.med-guide {
    text-align: center;
    padding: 4px 24px 12px;
    min-height: 62px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.guide-main {
    font-size: 19px;
    color: rgba(255,255,255,0.82);
    font-weight: 300;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.guide-sub {
    font-size: 13px;
    color: rgba(255,255,255,0.42);
    letter-spacing: 0.3px;
}

.guide-fade-in {
    animation: guide-fade 0.6s ease both;
}

@keyframes guide-fade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 底部控制区 */
.med-controls {
    padding: 0 20px 28px;
    flex-shrink: 0;
}

.med-duration-row {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.med-dur-btn {
    padding: 6px 13px;
    border-radius: 20px;
    font-size: 13px;
    color: rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.07);
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.med-dur-btn.active {
    background: rgba(255,255,255,0.16);
    color: rgba(255,255,255,0.95);
    border-color: rgba(255,255,255,0.28);
}

.med-bgm-row {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 18px;
}

.med-bgm-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 54px;
    padding: 9px 4px 7px;
    border-radius: 14px;
    background: rgba(255,255,255,0.07);
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.med-bgm-btn span:first-child { font-size: 20px; }

.med-bgm-name {
    font-size: 10px;
    color: rgba(255,255,255,0.45);
    text-align: center;
    line-height: 1.2;
}

.med-bgm-btn.active {
    background: rgba(255,255,255,0.16);
    border-color: rgba(255,255,255,0.3);
    box-shadow: 0 0 14px rgba(255,255,255,0.08);
}

.med-bgm-btn.active .med-bgm-name { color: rgba(255,255,255,0.85); }

.med-play-btn {
    width: 100%;
    padding: 15px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50px;
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.92);
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.25s;
    letter-spacing: 1px;
}

.med-play-btn:active { transform: scale(0.97); background: rgba(255,255,255,0.18); }
.med-play-btn.playing { background: rgba(240,147,251,0.18); border-color: rgba(240,147,251,0.35); }
.med-play-btn i { font-size: 15px; }

/* 完成界面 */
.med-complete {
    text-align: center;
    padding: 8px 0;
}

.med-complete-icon { font-size: 44px; margin-bottom: 10px; }

.med-complete-title {
    font-size: 20px;
    font-weight: 500;
    color: rgba(255,255,255,0.9);
    margin-bottom: 6px;
}

.med-complete-sub {
    font-size: 14px;
    color: rgba(255,255,255,0.5);
    margin-bottom: 18px;
}

.med-complete-stats {
    display: flex;
    justify-content: center;
    gap: 40px;
}

.med-complete-stat { text-align: center; }

.med-complete-num {
    display: block;
    font-size: 26px;
    font-weight: 300;
    color: rgba(255,255,255,0.9);
}

.med-complete-label {
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    margin-top: 2px;
    display: block;
}

/* ===== 音频播放器样式 ===== */
.audio-player-container {
    padding: 0;
    margin: -24px -24px 0;
}

/* 封面区域 */
.player-cover {
    position: relative;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.cover-bg {
    position: absolute;
    width: 100%;
    height: 100%;
}

.cover-icon {
    font-size: 80px;
    z-index: 1;
    filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.3));
}

.cover-icon.rotating {
    animation: rotate 8s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.cover-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.4), transparent),
        radial-gradient(2px 2px at 60px 80px, rgba(255,255,255,0.3), transparent),
        radial-gradient(2px 2px at 100px 50px, rgba(255,255,255,0.4), transparent),
        radial-gradient(2px 2px at 140px 120px, rgba(255,255,255,0.3), transparent),
        radial-gradient(2px 2px at 180px 40px, rgba(255,255,255,0.4), transparent);
    background-size: 200px 150px;
    animation: twinkle 3s ease-in-out infinite;
}

/* 音频信息 */
.player-info {
    text-align: center;
    padding: 20px 24px 10px;
}

.player-info h2 {
    font-size: 20px;
    margin-bottom: 6px;
}

.player-info p {
    font-size: 13px;
    color: var(--text-lighter);
}

/* 进度条 */
.player-progress {
    padding: 16px 24px;
}

.progress-bar-audio {
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
    cursor: pointer;
}

.progress-fill-audio {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius: 2px;
    width: 0%;
    transition: width 0.1s linear;
}

.progress-time {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-lighter);
}

/* 控制按钮 */
.player-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 16px 24px;
}

.control-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.control-btn:hover {
    background: var(--border);
}

.control-btn span {
    font-size: 10px;
    margin-top: 2px;
}

.control-btn.main {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
    font-size: 24px;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.control-btn.main:hover {
    transform: scale(1.05);
}

/* 音量控制 */
.player-volume {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    color: var(--text-lighter);
}

.player-volume input[type="range"] {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    background: var(--border);
    border-radius: 2px;
    outline: none;
}

.player-volume input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: var(--primary);
    border-radius: 50%;
    cursor: pointer;
}

/* 加载提示 */
.player-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    color: var(--text-lighter);
    font-size: 13px;
}

/* 音频库提示 */
.library-tip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    font-size: 12px;
    color: var(--text-lighter);
    background: var(--bg);
    margin: 16px -24px -24px;
}

.library-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-lighter);
}

.library-empty i {
    font-size: 40px;
    margin-bottom: 12px;
    opacity: 0.3;
}

.library-empty p {
    font-size: 14px;
}


/* ===== 扫码支付页面样式 ===== */
.qr-payment-container {
    padding: 0 4px;
}

.qr-payment-header {
    text-align: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
}

.payment-amount .label {
    display: block;
    font-size: 13px;
    color: var(--text-lighter);
    margin-bottom: 4px;
}

.payment-amount .amount {
    font-size: 36px;
    font-weight: 600;
    color: var(--danger);
}

.payment-item {
    font-size: 14px;
    color: var(--text-light);
    margin-top: 8px;
}

.qr-code-section {
    text-align: center;
    padding: 20px 0;
}

.qr-code-wrapper {
    display: inline-block;
    padding: 16px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.qr-code-wrapper.wechat {
    border: 3px solid #07c160;
}

.qr-code-wrapper.alipay {
    border: 3px solid #1677ff;
}

.qr-code-img {
    width: 200px;
    height: 200px;
    display: block;
}

.qr-tip {
    margin-top: 16px;
    font-size: 14px;
    color: var(--text-light);
}

.qr-tip i {
    margin-right: 6px;
}

.payment-steps {
    background: var(--bg);
    border-radius: 12px;
    padding: 16px;
    margin: 20px 0;
}

.step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

.step-num {
    width: 24px;
    height: 24px;
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.step-text {
    font-size: 13px;
    color: var(--text);
}

.step-text strong {
    color: var(--primary);
}

.payment-notice-box {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: #fff8e1;
    border-radius: 12px;
    margin: 16px 0;
}

.payment-notice-box i {
    color: #ff9800;
    font-size: 20px;
    flex-shrink: 0;
}

.payment-notice-box p {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

.payment-notice-box p:first-child {
    margin-bottom: 4px;
}

.payment-actions {
    display: flex;
    gap: 12px;
    margin: 20px 0;
}

.payment-actions button {
    flex: 1;
}

.order-info-footer {
    text-align: center;
    padding: 16px 0;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-lighter);
}

.order-info-footer p {
    margin: 4px 0;
}

/* 确认支付弹窗 */
.confirm-paid-container {
    text-align: center;
    padding: 20px 0;
}

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

.confirm-paid-container h3 {
    font-size: 18px;
    margin-bottom: 8px;
}

.confirm-desc {
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 20px;
}

.confirm-checklist {
    text-align: left;
    background: var(--bg);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.check-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    cursor: pointer;
}

.check-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--primary);
}

.confirm-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: #e3f2fd;
    border-radius: 8px;
    font-size: 13px;
    color: #1976d2;
    margin-bottom: 20px;
}

.confirm-actions {
    display: flex;
    gap: 12px;
}

.confirm-actions button {
    flex: 1;
}

/* 提交成功页面 */
.payment-submitted {
    text-align: center;
    padding: 20px 0;
}

.submitted-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

.payment-submitted h2 {
    font-size: 22px;
    margin-bottom: 8px;
}

.submitted-desc {
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 24px;
}

.submitted-info {
    background: var(--bg);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.submitted-info .info-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    font-size: 14px;
    color: var(--text);
}

.submitted-info .info-item i {
    color: var(--primary);
    width: 20px;
}

.submitted-tips {
    text-align: left;
    background: #fff8e1;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.submitted-tips h4 {
    font-size: 14px;
    margin-bottom: 10px;
    color: #f57c00;
}

.submitted-tips ul {
    margin: 0;
    padding-left: 20px;
}

.submitted-tips li {
    font-size: 13px;
    color: #666;
    line-height: 1.8;
}

.submitted-actions {
    display: flex;
    gap: 12px;
}

.submitted-actions button {
    flex: 1;
}

/* 订单列表样式增强 */
.orders-container {
    padding: 0 4px;
    height: calc(72vh - 80px);
    display: flex;
    flex-direction: column;
}

.orders-container .orders-list {
    flex: 1;
    overflow-y: auto;
    padding-right: 4px;
}

.orders-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 16px;
    background: var(--bg);
    border-radius: 25px;
    padding: 4px;
}

.order-tab {
    flex: 1;
    padding: 10px;
    text-align: center;
    font-size: 13px;
    color: var(--text-light);
    cursor: pointer;
    border-radius: 20px;
    transition: all 0.2s;
}

.order-tab.active {
    background: var(--card-bg);
    color: var(--primary);
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.order-card {
    background: var(--card-bg);
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.order-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

.order-no {
    font-size: 12px;
    color: var(--text-lighter);
}

.order-status {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 10px;
}

.order-status.paid {
    background: #e8f5e9;
    color: #4caf50;
}

.order-status.pending {
    background: #fff3e0;
    color: #ff9800;
}

.order-status.confirming {
    background: #e3f2fd;
    color: #2196f3;
}

.order-status.cancelled {
    background: #f5f5f5;
    color: #999;
}

.order-card-body {
    display: flex;
    align-items: center;
    padding: 16px;
    gap: 12px;
}

.order-icon {
    font-size: 32px;
}

.order-detail {
    flex: 1;
}

.order-detail h4 {
    font-size: 14px;
    margin-bottom: 4px;
}

.order-detail p {
    font-size: 12px;
    color: var(--text-lighter);
    margin: 0;
}

.order-tip {
    color: #2196f3 !important;
    margin-top: 4px !important;
}

.order-amount {
    font-size: 18px;
    font-weight: 600;
    color: var(--danger);
}

.order-card-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    text-align: right;
}

.btn-order-action {
    padding: 8px 20px;
    border: none;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
}

.btn-order-action.secondary {
    background: var(--bg);
    color: var(--text);
}

/* 订单详情页 */
.order-detail-container {
    padding: 0 4px;
}

.order-status-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 16px;
}

.order-status-banner.paid {
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    color: #2e7d32;
}

.order-status-banner.confirming {
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    color: #1565c0;
}

.order-status-banner.pending {
    background: linear-gradient(135deg, #fff3e0, #ffe0b2);
    color: #ef6c00;
}

.order-status-banner i {
    font-size: 32px;
}

.order-status-banner h4 {
    font-size: 16px;
    margin-bottom: 4px;
}

.order-status-banner p {
    font-size: 13px;
    opacity: 0.8;
    margin: 0;
}

.order-info-section {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
}

.order-info-section h4 {
    font-size: 14px;
    color: var(--text-lighter);
    margin-bottom: 12px;
}

.order-product {
    display: flex;
    align-items: center;
    gap: 12px;
}

.product-icon {
    font-size: 36px;
}

.product-info h5 {
    font-size: 15px;
    margin-bottom: 4px;
}

.product-info p {
    font-size: 12px;
    color: var(--text-lighter);
    margin: 0;
}

.info-rows .info-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
}

.info-rows .info-row span:first-child {
    color: var(--text-light);
}

.info-rows .info-row.total {
    border-top: 1px solid var(--border);
    margin-top: 8px;
    padding-top: 12px;
    font-weight: 600;
}

.info-rows .info-row .discount {
    color: #4caf50;
}

.order-contact-tip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    background: var(--bg);
    border-radius: 12px;
    font-size: 14px;
    color: var(--text-light);
}


/* ===== 订单管理增强样式 ===== */

/* 订单卡片底部按钮组 */
.order-card-footer {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

.btn-order-action {
    flex: 1;
    min-width: 80px;
    padding: 8px 12px;
    border: none;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: all 0.2s;
}

.btn-order-action:not(.secondary):not(.danger) {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
}

.btn-order-action.secondary {
    background: var(--bg);
    color: var(--text-light);
    border: 1px solid var(--border);
}

.btn-order-action.danger {
    background: #ffebee;
    color: var(--danger);
    border: 1px solid #ffcdd2;
}

.btn-order-action:active {
    transform: scale(0.96);
}

/* 订单提示信息 */
.order-tip {
    font-size: 12px;
    color: var(--primary);
    margin-top: 4px;
}

.order-tip.warning {
    color: var(--warning);
}

.order-tip i {
    margin-right: 4px;
}

/* 订单日期显示 */
.order-date {
    font-size: 12px;
    color: var(--text-lighter);
    margin-top: 2px;
}

.order-date i {
    margin-right: 4px;
}

/* 订单状态 - 退款中 */
.order-status.refunding {
    background: #f3e5f5;
    color: #9c27b0;
}

/* 取消订单弹窗 */
.cancel-order-container,
.delete-order-container,
.refund-container {
    padding: 20px;
    text-align: center;
}

.cancel-icon,
.delete-icon,
.refund-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.cancel-order-container h3,
.delete-order-container h3,
.refund-container h3 {
    font-size: 18px;
    margin-bottom: 16px;
}

.order-summary {
    background: var(--bg);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
    text-align: left;
}

.order-summary p {
    font-size: 14px;
    color: var(--text-light);
    margin: 4px 0;
}

.order-summary p strong {
    color: var(--text);
}

/* 取消政策 */
.cancel-policy,
.refund-policy {
    background: #fff8e1;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
    text-align: left;
}

.cancel-policy h4,
.refund-policy h4 {
    font-size: 14px;
    color: var(--warning);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cancel-policy ul,
.refund-policy ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cancel-policy li,
.refund-policy li {
    font-size: 13px;
    color: var(--text-light);
    padding: 4px 0;
    padding-left: 16px;
    position: relative;
}

.cancel-policy li::before,
.refund-policy li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--warning);
}

/* 取消原因选择 */
.cancel-reason,
.refund-reason {
    margin-bottom: 20px;
    text-align: left;
}

.cancel-reason label,
.refund-reason label {
    display: block;
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 8px;
}

.cancel-reason select,
.refund-reason select {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    background: var(--card-bg);
    color: var(--text);
    outline: none;
}

.cancel-reason select:focus,
.refund-reason select:focus {
    border-color: var(--primary);
}

.refund-reason textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    resize: none;
    margin-top: 10px;
    outline: none;
}

.refund-reason textarea:focus {
    border-color: var(--primary);
}

/* 取消/删除操作按钮 */
.cancel-actions,
.delete-actions,
.refund-actions {
    display: flex;
    gap: 12px;
}

.cancel-actions button,
.delete-actions button,
.refund-actions button {
    flex: 1;
    padding: 12px;
    border-radius: 24px;
    font-size: 14px;
    cursor: pointer;
}

.btn-danger {
    background: var(--danger);
    color: #fff;
    border: none;
}

.btn-danger:active {
    opacity: 0.8;
}

/* 删除警告 */
.delete-warning {
    color: var(--danger);
    font-size: 13px;
    margin-bottom: 16px;
}

/* 修改订单信息 */
.edit-order-container {
    padding: 16px;
}

.order-summary-mini {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg);
    border-radius: 12px;
    margin-bottom: 20px;
}

.order-summary-mini .order-icon {
    font-size: 32px;
}

.order-summary-mini h4 {
    font-size: 14px;
    margin-bottom: 4px;
}

.order-summary-mini p {
    font-size: 12px;
    color: var(--text-lighter);
}

.edit-form .form-group {
    margin-bottom: 16px;
}

.edit-form .form-group label {
    display: block;
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 6px;
}

.edit-form .form-group label i {
    margin-right: 6px;
    color: var(--primary);
}

.edit-form .form-group label .required {
    color: var(--danger);
}

.edit-form input,
.edit-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}

.edit-form input:focus,
.edit-form textarea:focus {
    border-color: var(--primary);
}

.edit-form textarea {
    resize: none;
}

.edit-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.edit-actions button {
    flex: 1;
    padding: 12px;
    border-radius: 24px;
    font-size: 14px;
    cursor: pointer;
}

/* 取消政策提醒（报名成功页） */
.cancel-policy-notice {
    background: #fff8e1;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 18px;
    text-align: left;
}

.cancel-policy-notice h4 {
    font-size: 13px;
    color: var(--warning);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cancel-policy-notice ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cancel-policy-notice li {
    font-size: 12px;
    color: var(--text-light);
    padding: 3px 0;
}

.cancel-policy-notice li strong {
    color: var(--danger);
}

/* 支付确认弹窗 */
.payment-confirm-container {
    padding: 16px;
}

.confirm-order-info {
    margin-bottom: 20px;
}

.order-item-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg);
    border-radius: 12px;
}

.order-item-row .item-icon {
    font-size: 32px;
}

.order-item-row .item-info {
    flex: 1;
}

.order-item-row .item-info h4 {
    font-size: 14px;
    margin-bottom: 4px;
}

.order-item-row .item-info p {
    font-size: 12px;
    color: var(--text-lighter);
}

.order-item-row .item-price {
    font-size: 18px;
    font-weight: 600;
    color: var(--danger);
}

/* 支付须知 */
.payment-policy-box {
    background: var(--bg);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.payment-policy-box h4 {
    font-size: 14px;
    color: var(--text);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.payment-policy-box h4 i {
    color: var(--primary);
}

.policy-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.policy-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--text-light);
}

.policy-item i {
    color: var(--success);
    margin-top: 2px;
}

.policy-item.warning {
    color: var(--danger);
}

.policy-item.warning i {
    color: var(--warning);
}

.policy-item strong {
    color: var(--danger);
}

/* 确认复选框 */
.confirm-checkbox {
    margin-bottom: 20px;
}

.confirm-checkbox label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-light);
    cursor: pointer;
}

.confirm-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}

/* 支付确认按钮 */
.payment-confirm-actions {
    display: flex;
    gap: 12px;
}

.payment-confirm-actions button {
    flex: 1;
    padding: 12px;
    border-radius: 24px;
    font-size: 14px;
    cursor: pointer;
}

.payment-confirm-actions button:disabled {
    background: var(--border);
    color: var(--text-lighter);
    cursor: not-allowed;
}


/* ===== 活动报名表单样式 ===== */
.activity-booking-form {
    padding: 4px 4px 16px;
}

.activity-booking-form .booking-summary {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--bg);
    border-radius: 12px;
    margin-bottom: 18px;
    align-items: center;
}

.activity-summary-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
}

.activity-booking-form .booking-summary-info {
    flex: 1;
    min-width: 0;
}

.activity-booking-form .booking-summary-info h4 {
    font-size: 14px;
    color: var(--text);
    margin: 0 0 6px;
    line-height: 1.4;
}

.activity-booking-form .booking-summary-info p {
    font-size: 12px;
    color: var(--text-light);
    margin: 3px 0;
}

.activity-booking-form .booking-summary-info i {
    width: 14px;
    color: var(--text-lighter);
    margin-right: 4px;
}


/* ===== 情绪趋势图样式 ===== */
.emotion-trend-section {
    margin-top: 20px;
    padding: 16px;
    background: var(--bg);
    border-radius: 12px;
}

.emotion-trend-section h4 {
    font-size: 14px;
    margin-bottom: 16px;
    color: var(--text);
}

.trend-empty {
    text-align: center;
    color: var(--text-lighter);
    font-size: 13px;
    padding: 20px 0;
}

.trend-chart {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 100px;
    padding: 0 8px;
    margin-bottom: 16px;
}

.trend-bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.trend-emoji {
    font-size: 16px;
    margin-bottom: 4px;
    height: 20px;
}

.trend-bar-wrap {
    width: 100%;
    height: 55px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.trend-bar {
    width: 16px;
    min-height: 5px;
    border-radius: 4px 4px 0 0;
    transition: height 0.3s ease;
}

.trend-bar.mood-excellent { background: linear-gradient(180deg, #4CAF50, #81C784); }
.trend-bar.mood-good { background: linear-gradient(180deg, #8BC34A, #AED581); }
.trend-bar.mood-normal { background: linear-gradient(180deg, #FFC107, #FFD54F); }
.trend-bar.mood-low { background: linear-gradient(180deg, #FF9800, #FFB74D); }
.trend-bar.empty { background: var(--border); }

.trend-day {
    font-size: 11px;
    color: var(--text-lighter);
    margin-top: 6px;
}

.trend-summary {
    display: flex;
    justify-content: space-around;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.trend-avg, .trend-direction {
    text-align: center;
}

.trend-label {
    display: block;
    font-size: 11px;
    color: var(--text-lighter);
    margin-bottom: 4px;
}

.trend-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
}

/* ===== 学习目标样式 ===== */
.learning-goal-section {
    margin-top: 20px;
    padding: 16px;
    background: var(--bg);
    border-radius: 12px;
}

.goal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.goal-header h4 {
    font-size: 14px;
    margin: 0;
}

.goal-edit {
    color: var(--text-lighter);
    cursor: pointer;
    padding: 4px;
}

.goal-progress-wrap {
    margin-bottom: 8px;
}

.goal-progress-bar {
    height: 12px;
    background: var(--border);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 8px;
}

.goal-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius: 6px;
    transition: width 0.5s ease;
}

.goal-progress-fill.completed {
    background: linear-gradient(90deg, #4CAF50, #81C784);
}

.goal-progress-text {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-light);
}

.goal-reminder-info {
    font-size: 12px;
    color: var(--text-lighter);
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

.goal-reminder-info i {
    margin-right: 6px;
    color: var(--primary);
}

/* 学习目标设置弹窗 */
.goal-setting-container {
    padding: 16px;
}

.goal-setting-item {
    margin-bottom: 24px;
}

.goal-setting-item label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 12px;
    color: var(--text);
}

.goal-time-selector {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.goal-time-btn {
    flex: 1;
    padding: 10px;
    border: 2px solid var(--border);
    border-radius: 8px;
    background: var(--card-bg);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.goal-time-btn.active {
    border-color: var(--primary);
    background: rgba(102, 126, 234, 0.1);
    color: var(--primary);
}

.goal-slider {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    background: var(--border);
    border-radius: 3px;
    outline: none;
    margin-bottom: 8px;
}

.goal-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: var(--primary);
    border-radius: 50%;
    cursor: pointer;
}

.goal-display {
    text-align: center;
    font-size: 13px;
    color: var(--text-light);
}

.goal-display span {
    font-weight: 600;
    color: var(--primary);
}

.reminder-time-wrap {
    margin-top: 12px;
    padding: 12px;
    background: var(--bg);
    border-radius: 8px;
}

.reminder-time-input {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 16px;
    margin-bottom: 8px;
}

.reminder-hint {
    font-size: 12px;
    color: var(--text-lighter);
    margin: 0;
}

.goal-tips {
    background: rgba(102, 126, 234, 0.08);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.goal-tips h5 {
    font-size: 13px;
    margin: 0 0 10px;
    color: var(--primary);
}

.goal-tips ul {
    margin: 0;
    padding-left: 20px;
}

.goal-tips li {
    font-size: 12px;
    color: var(--text-light);
    margin-bottom: 6px;
    line-height: 1.5;
}

/* ===== 导出报告样式 ===== */
.export-container {
    padding: 16px;
}

.export-preview {
    margin-bottom: 20px;
}

.report-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    padding: 24px;
    color: white;
    text-align: center;
}

.report-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    font-size: 12px;
    opacity: 0.9;
}

.report-logo {
    font-weight: 500;
}

.report-title {
    margin-bottom: 16px;
}

.report-name {
    font-size: 24px;
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}

.report-subtitle {
    font-size: 14px;
    opacity: 0.9;
}

.report-level {
    margin-bottom: 20px;
}

.level-badge-lg {
    display: inline-block;
    background: rgba(255,255,255,0.2);
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 18px;
    font-weight: 600;
    margin-right: 8px;
}

.level-title-lg {
    font-size: 14px;
    opacity: 0.9;
}

.report-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 20px;
}

.report-stat {
    background: rgba(255,255,255,0.15);
    border-radius: 10px;
    padding: 12px 8px;
}

.stat-num {
    display: block;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 4px;
}

.stat-text {
    font-size: 10px;
    opacity: 0.85;
}

.report-detail {
    text-align: left;
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.report-detail p {
    margin: 6px 0;
    font-size: 13px;
}

.report-footer {
    font-size: 12px;
    opacity: 0.8;
    font-style: italic;
}

.export-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 冥想和情绪日历的操作按钮 */
.meditation-actions,
.calendar-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.meditation-actions .btn-primary,
.meditation-actions .btn-secondary,
.calendar-actions .btn-primary,
.calendar-actions .btn-secondary {
    flex: 1;
}

/* ===== 导师申请状态卡片 ===== */
.tutor-app-status {
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.6;
    border-left: 3px solid transparent;
}

.tutor-app-status.pending {
    background: #eff6ff;
    border-left-color: #3b82f6;
    color: #1e40af;
}

.tutor-app-status.approved {
    background: #f0fdf4;
    border-left-color: #22c55e;
    color: #166534;
}

.tutor-app-status.rejected {
    background: #fff1f2;
    border-left-color: #ef4444;
    color: #991b1b;
}

/* ===== 认证导师标签 ===== */
.tutor-badge {
    display: inline-block;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    margin-top: 4px;
    letter-spacing: 0.5px;
}

/* ===== 首页"继续学习"卡片 ===== */
.continue-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 14px;
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: transform 0.15s;
}
.continue-card:active { transform: scale(0.98); }
.continue-cover {
    width: 56px; height: 56px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; color: #fff; flex-shrink: 0;
}
.continue-info { flex: 1; min-width: 0; }
.continue-label { font-size: 11px; color: var(--primary); font-weight: 600; margin-bottom: 2px; }
.continue-title { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.continue-chapter { font-size: 12px; color: var(--text-lighter); margin: 2px 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.continue-bar { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; }
.continue-bar-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--secondary)); border-radius: 2px; transition: width 0.4s; }
.continue-pct { font-size: 11px; color: var(--text-lighter); margin-top: 4px; }
.continue-arrow { width: 18px; height: 18px; color: var(--primary); flex-shrink: 0; }

/* ===== 课程内页搜索 ===== */
.course-search-box {
    display: flex; align-items: center; gap: 8px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 8px 14px;
    margin: 0 16px;
}
.course-search-box .i { width: 16px; height: 16px; color: var(--text-lighter); flex-shrink: 0; }
.course-search-box input {
    flex: 1; border: none; background: transparent; outline: none;
    font-size: 14px; color: var(--text);
}
.course-search-box button {
    background: none; border: none; padding: 0; cursor: pointer;
    color: var(--text-lighter); display: flex; align-items: center;
}
.course-search-box button .i { width: 14px; height: 14px; }

/* ===== 测评结果推荐课程 ===== */
.result-recommend {
    background: var(--bg);
    border-radius: var(--radius);
    padding: 16px;
    margin: 16px 0;
}
.result-recommend h4 { font-size: 14px; margin-bottom: 10px; color: var(--text); }
.result-recommend-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}
.result-recommend-item:last-child { border-bottom: none; }
.rri-cover {
    width: 40px; height: 40px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; flex-shrink: 0;
}
.rri-info { flex: 1; min-width: 0; }
.rri-title { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rri-meta { font-size: 12px; color: var(--text-lighter); margin-top: 2px; }
.rri-arrow { width: 16px; height: 16px; color: var(--text-lighter); flex-shrink: 0; }

/* ===== 打卡日历导航 ===== */
.calendar-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px; padding: 0 4px;
}
.calendar-header h4 { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.cal-month-stat { font-size: 12px; font-weight: 400; color: var(--primary); }
.cal-nav-btn {
    background: none; border: none; cursor: pointer; padding: 4px;
    color: var(--text-light); display: flex; align-items: center;
    border-radius: 50%; transition: background 0.15s;
}
.cal-nav-btn:hover { background: var(--border); }
.cal-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.cal-nav-btn .i { width: 18px; height: 18px; }

/* ===== 打卡记录列表 ===== */
.checkin-record-item {
    display: flex; gap: 12px; padding: 12px 0;
    border-bottom: 1px solid var(--border);
}
.checkin-record-item:last-child { border-bottom: none; }
.checkin-record-mood { font-size: 24px; flex-shrink: 0; }
.checkin-record-info { flex: 1; min-width: 0; }
.checkin-record-date { font-size: 12px; color: var(--text-lighter); }
.checkin-record-text { font-size: 13px; color: var(--text-light); margin-top: 4px; word-break: break-all; }

/* ===== 课程收藏 ===== */
.fav-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 0; border-bottom: 1px solid var(--border); cursor: pointer;
}
.fav-item:last-child { border-bottom: none; }
.fav-cover {
    width: 52px; height: 52px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; font-size: 24px; color: #fff; flex-shrink: 0;
}
.fav-info { flex: 1; min-width: 0; }
.fav-title { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fav-meta { font-size: 12px; color: var(--text-lighter); margin-top: 2px; }
.fav-progress { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; margin-top: 6px; }
.fav-progress-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--secondary)); border-radius: 2px; }
.fav-remove {
    background: none; border: none; cursor: pointer; padding: 4px;
    color: var(--text-lighter); display: flex; align-items: center; flex-shrink: 0;
    border-radius: 50%; transition: background 0.15s;
}
.fav-remove:hover { background: var(--border); color: var(--danger); }
.fav-remove .i { width: 16px; height: 16px; }
.btn-fav { padding: 8px 10px !important; }

/* ===== 学习目标弹窗 ===== */
.goal-summary-card {
    display: flex; align-items: center; gap: 16px;
    background: var(--bg); border-radius: var(--radius); padding: 16px;
}
.goal-ring-wrap { position: relative; width: 80px; height: 80px; flex-shrink: 0; }
.goal-ring-svg { width: 80px; height: 80px; }
.goal-ring-label {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    font-size: 13px; text-align: center; line-height: 1.2;
}
.goal-ring-label strong { font-size: 18px; font-weight: 700; color: var(--primary); display: block; }
.goal-summary-info { flex: 1; }
.goal-summary-title { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.goal-summary-sub { font-size: 13px; color: var(--text-lighter); margin-top: 2px; }

/* 直播间演示标签 */
.live-demo-notice {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,.6);
    color: #fff;
    padding: 16px 24px;
    border-radius: 12px;
    text-align: center;
    backdrop-filter: blur(8px);
    pointer-events: none;
}
.live-demo-notice span {
    display: block;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 6px;
}
.live-demo-notice small {
    display: block;
    font-size: 12px;
    opacity: .8;
    max-width: 220px;
    line-height: 1.5;
}

/* ===== 我的导师列表 ===== */
.my-tutor-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background .15s;
}
.my-tutor-card:last-child { border-bottom: none; }
.my-tutor-card:hover { background: #fafafa; }
.my-tutor-avatar {
    width: 50px; height: 50px;
    background: linear-gradient(135deg, #9c27b0, #673ab7);
    color: #fff;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
    overflow: hidden;
}
.my-tutor-avatar img { width: 100%; height: 100%; object-fit: cover; }
.my-tutor-info { flex: 1; min-width: 0; }
.my-tutor-name { font-size: 15px; font-weight: 500; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; word-break: keep-all; }
.my-tutor-level {
    font-size: 10px; padding: 2px 8px;
    background: linear-gradient(135deg, #fbc02d, #f9a825);
    color: #fff;
    border-radius: 10px;
    font-weight: 500;
}
.my-tutor-title { font-size: 12px; color: #999; margin-top: 2px; }
.my-tutor-meta { font-size: 11px; color: #bbb; margin-top: 4px; }

/* 离线状态横幅 */
.offline-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    padding: 8px 14px;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    animation: slideDown .3s ease;
}
.offline-banner.offline {
    background: linear-gradient(90deg, #f59e0b, #d97706);
    color: #fff;
}
.offline-banner.syncing {
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    color: #fff;
}
@keyframes slideDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

/* ===== 全局悬浮帮助/反馈按钮 ===== */
.global-fab {
    position: fixed;
    right: 16px;
    bottom: 76px;
    z-index: 9000;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 8px;
}
.global-fab-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6B8E5A, #557A4A);
    color: #fff;
    border: none;
    box-shadow: 0 4px 14px rgba(107, 142, 90, .3);
    cursor: pointer;
    font-size: 20px;
    transition: transform .2s;
}
.global-fab-btn:hover { transform: scale(1.08); }
.global-fab-menu {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #fff;
    padding: 8px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,.12);
    min-width: 140px;
}
.global-fab-menu button {
    background: transparent;
    border: none;
    padding: 10px 14px;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background .15s;
}
.global-fab-menu button:hover { background: #f7f4eb; }
.global-fab-menu.hidden { display: none; }
body.admin-mode #global-fab { display: none !important; }
@media (min-width: 900px) {
    .global-fab { bottom: 24px; }
}

/* Toast 带操作 */
.toast.with-action {
    padding: 12px 14px 12px 22px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
}
.toast.with-action span { color: #fff; }
.toast-action {
    background: rgba(255,255,255,.18);
    color: #FFE9B0;
    padding: 5px 14px;
    border-radius: 14px;
    font-size: 13px;
    cursor: pointer;
    pointer-events: auto;
    transition: background .15s;
    white-space: nowrap;
}
.toast-action:hover { background: rgba(255,255,255,.28); }

/* ===== J · 空状态全局升级 ===== */
.tt-empty,
.empty-state {
    transition: opacity .3s;
}
.tt-empty .tt-empty-cta,
.empty-state .empty-state-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    padding: 8px 18px;
    background: linear-gradient(135deg, #6B8E5A, #557A4A);
    color: #fff;
    border-radius: 18px;
    font-size: 13px;
    cursor: pointer;
    transition: opacity .15s;
    text-decoration: none;
    border: none;
}
.tt-empty .tt-empty-cta:hover,
.empty-state .empty-state-cta:hover { opacity: .85; }
.tt-empty .tt-empty-help,
.empty-state .empty-state-help {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    color: var(--tt-text-4, #b8b8b8);
}
.tt-empty .tt-empty-help a,
.empty-state .empty-state-help a {
    color: var(--tt-primary, #6B8E5A);
    text-decoration: underline;
    cursor: pointer;
}

/* Onboarding 进度点 */
.onboarding-dot { transition: background .2s; }

/* =====================================================
 * extras.js 配套样式
 * ===================================================== */

/* 字体大小可调 */
:root[data-font-size="small"]  { font-size: 13px; }
:root[data-font-size="normal"] { font-size: 14px; }
:root[data-font-size="large"]  { font-size: 16px; }

/* 全局错误横幅 */
.global-error-banner {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(220, 38, 38, .95);
    color: #fff;
    padding: 10px 16px;
    border-radius: 22px;
    font-size: 13px;
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 14px rgba(0,0,0,.2);
    max-width: 90vw;
}
.global-error-banner a {
    color: #fef3c7;
    text-decoration: underline;
    cursor: pointer;
    font-size: 12px;
}

/* 冥想引导词卡 */
.meditation-guide-card {
    padding: 16px;
    background: linear-gradient(135deg, #1a3a2a, #2d5a3d);
    color: #fff;
    border-radius: 12px;
    cursor: pointer;
    margin-bottom: 10px;
    transition: transform .15s;
}
.meditation-guide-card:hover { transform: translateY(-2px); }
.mgc-name { font-size: 17px; font-weight: 600; margin-bottom: 4px; }
.mgc-meta { font-size: 12px; opacity: .8; }

/* 每日金句卡 */
.daily-quote-card {
    background: linear-gradient(135deg, #fef3c7, #fed7aa);
    color: #78350f;
    padding: 30px 24px;
    border-radius: 14px;
    text-align: center;
    margin: 14px 4px;
}
.dqc-icon { font-size: 32px; margin-bottom: 14px; }
.dqc-text { font-size: 18px; line-height: 1.7; font-weight: 500; margin-bottom: 12px; font-family: serif; }
.dqc-author { font-size: 13px; opacity: .7; margin-bottom: 18px; }
.dqc-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px dashed rgba(120, 53, 15, .3); }

/* 塔罗卡 */
.tarot-card-show {
    text-align: center;
    padding: 30px 20px;
    background: linear-gradient(135deg, #c084fc, #a855f7);
    color: #fff;
    border-radius: 14px;
    margin: 14px 4px;
}
.tarot-emoji { font-size: 80px; margin-bottom: 12px; }
.tarot-name { font-size: 24px; font-weight: 600; margin-bottom: 12px; }
.tarot-meaning { font-size: 14px; line-height: 1.7; opacity: .95; margin-bottom: 14px; }
.tarot-date { font-size: 12px; opacity: .7; margin-bottom: 16px; }
.tarot-share-btn { padding: 8px 20px; background: rgba(255,255,255,.2); color: #fff; border: 1px solid rgba(255,255,255,.4); border-radius: 18px; cursor: pointer; font-size: 13px; }
@keyframes tarot-flip { 0% { transform: rotateY(0); } 100% { transform: rotateY(180deg); } }

/* 心情花园 */
.mood-garden { padding: 14px 4px; }
.mg-plant { text-align: center; padding: 30px 20px; background: linear-gradient(135deg, #f0fdf4, #dcfce7); border-radius: 14px; margin-bottom: 16px; }
.mg-emoji { font-size: 80px; margin-bottom: 10px; animation: gentle-bounce 2s ease-in-out infinite; }
@keyframes gentle-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.mg-name { font-size: 22px; font-weight: 600; color: #166534; }
.mg-desc { font-size: 13px; color: #15803d; margin-top: 4px; }
.mg-progress { background: #fff; padding: 14px; border-radius: 10px; margin-bottom: 14px; }
.mg-progress-text { font-size: 13px; color: #555; margin-bottom: 6px; }
.mg-progress-bar { background: #e5e7eb; height: 8px; border-radius: 4px; overflow: hidden; }
.mg-progress-fill { background: linear-gradient(90deg, #6B8E5A, #557A4A); height: 100%; transition: width .5s; }
.mg-progress-hint { font-size: 11px; color: #999; margin-top: 4px; text-align: right; }
.mg-stages-list { background: #fafafa; border-radius: 10px; padding: 4px; margin-bottom: 14px; }
.mg-stage-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; font-size: 13px; }
.mg-stage-item.unlocked { color: #15803d; }
.mg-stage-item.locked { color: #bbb; }
.mg-stage-emoji { font-size: 20px; width: 28px; text-align: center; }
.mg-stage-name { flex: 1; }
.mg-stage-days { font-size: 11px; color: #888; }
.mg-warning { background: #fef3c7; color: #78350f; padding: 10px 14px; border-radius: 8px; font-size: 12px; line-height: 1.6; }

/* 习惯挑战 */
.habit-card { background: #fff; border: 1px solid #f0f0f0; border-radius: 10px; padding: 12px; margin-bottom: 10px; }
.habit-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.habit-name { font-weight: 500; }
.habit-days { font-size: 12px; color: #888; }
.habit-bar { background: #f3f4f6; height: 6px; border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
.habit-bar-fill { background: linear-gradient(90deg, #ef4444, #f97316); height: 100%; transition: width .3s; }
.habit-actions { display: flex; gap: 8px; }

/* 心情日记 */
.mood-pick { transition: background .15s; }
.mood-pick:hover { background: #f3f4f6; }
.mood-pick.on { background: #fef3c7; }
.diary-entry { background: #fff; border: 1px solid #f0f0f0; border-radius: 10px; padding: 12px; margin-bottom: 10px; }
.diary-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.diary-mood { font-size: 24px; }
.diary-date { flex: 1; font-size: 12px; color: #999; }
.diary-content { font-size: 13px; line-height: 1.7; color: #444; white-space: pre-line; }

/* 热力图 */
.heatmap-container { padding: 14px 4px; }
.heatmap-summary { display: flex; justify-content: space-around; padding: 14px; background: #fafafa; border-radius: 10px; margin-bottom: 14px; text-align: center; }
.heatmap-summary > div b { display: block; font-size: 20px; font-weight: 700; color: #15803d; }
.heatmap-summary > div span { font-size: 11px; color: #999; }
.heatmap-grid { display: flex; gap: 3px; overflow-x: auto; padding-bottom: 6px; }
.heatmap-week { display: flex; flex-direction: column; gap: 3px; }
.heatmap-cell { width: 12px; height: 12px; background: #ebedf0; border-radius: 2px; }
.heatmap-cell.on { background: #22c55e; }
.heatmap-cell.empty { background: transparent; }
.heatmap-legend { display: flex; gap: 4px; align-items: center; justify-content: center; margin-top: 12px; }

/* 分享海报 */
.share-poster, .invite-poster {
    background: linear-gradient(135deg, #fef3c7 0%, #fbcfe8 50%, #e0e7ff 100%);
    border-radius: 16px;
    padding: 30px 20px;
    text-align: center;
    color: #333;
    position: relative;
    overflow: hidden;
}
.sp-header { padding-bottom: 14px; border-bottom: 1px dashed rgba(0,0,0,.15); margin-bottom: 18px; }
.sp-logo { font-size: 14px; color: #6B8E5A; font-weight: 600; }
.sp-avatar { font-size: 56px; margin-bottom: 8px; }
.sp-name { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
.sp-title { font-size: 13px; color: #888; margin-bottom: 18px; }
.sp-stats { display: flex; justify-content: space-around; padding: 16px 10px; background: rgba(255,255,255,.5); border-radius: 10px; margin-bottom: 16px; }
.sp-stats > div { text-align: center; }
.sp-stats b { display: block; font-size: 22px; font-weight: 700; color: #6B8E5A; }
.sp-stats span { font-size: 11px; color: #666; }
.sp-quote { font-size: 13px; color: #555; font-style: italic; line-height: 1.7; padding: 14px; background: rgba(255,255,255,.4); border-radius: 8px; margin-bottom: 16px; }
.sp-footer { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px dashed rgba(0,0,0,.15); }
.sp-qr-fake { width: 70px; height: 70px; background: #fff; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #888; line-height: 1.4; }
.sp-cta { flex: 1; text-align: left; }

/* 邀请海报 */
.ip-bg { display: none; }
.ip-emoji { font-size: 48px; margin-bottom: 6px; }
.ip-title { font-size: 16px; color: #555; }
.ip-product { font-size: 26px; font-weight: 700; color: #6B8E5A; margin: 6px 0; }
.ip-desc { font-size: 13px; color: #888; margin-bottom: 18px; }
.ip-perks { background: rgba(255,255,255,.6); padding: 14px; border-radius: 10px; margin-bottom: 14px; text-align: left; font-size: 13px; color: #555; line-height: 1.9; }
.ip-code-block { background: #fff; padding: 14px; border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 14px; }
.ip-code-block span { font-size: 13px; color: #888; }
.ip-code-block strong { font-size: 22px; letter-spacing: 3px; color: #6B8E5A; font-family: monospace; }
.ip-bonus { font-size: 12px; color: #78350f; background: rgba(254, 240, 138, .5); padding: 10px; border-radius: 8px; line-height: 1.6; }

/* PWA 安装提示 */
.pwa-install-prompt {
    position: fixed;
    bottom: 80px;
    left: 16px;
    right: 16px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0,0,0,.15);
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    transform: translateY(120%);
    transition: transform .3s;
    z-index: 9000;
    max-width: 480px;
    margin: 0 auto;
}
.pwa-install-prompt.show { transform: translateY(0); }
.pip-icon { font-size: 32px; }
.pip-text { flex: 1; }
.pip-title { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.pip-sub { font-size: 12px; color: #888; }
.pip-install { padding: 8px 18px; background: linear-gradient(135deg, #6B8E5A, #557A4A); color: #fff; border: none; border-radius: 14px; cursor: pointer; font-size: 13px; font-weight: 500; }
.pip-close { width: 28px; height: 28px; background: transparent; border: none; color: #999; cursor: pointer; font-size: 20px; }

/* 更多工具网格 */
.extra-tools-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 14px 4px; }
.etool { background: #fff; border: 1px solid #f0f0f0; border-radius: 12px; padding: 14px 6px; text-align: center; cursor: pointer; transition: transform .15s, box-shadow .2s; }
.etool:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.06); }
.etool > span { font-size: 28px; display: block; margin-bottom: 4px; }
.etool > div { font-size: 12px; color: #555; }