/* ============================================================
   ctxcode 学习平台 · 统一浅色主题（index / feedback / login / user /
   project / detail / learn / update / tipping 引用）
   仅覆盖配色与外观，不改变布局、尺寸，不改动任何功能类名与 id
   ============================================================ */

/* ---------- 1. 页面基底 ---------- */
body {
    background: var(--bg) !important;
    background-image: none !important;
    background-size: auto !important;
    animation: none !important;
    color: var(--text) !important;
}

/* 去掉毛玻璃与文字发光 */
*,
*::before,
*::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    text-shadow: none !important;
}

/* 去掉背景粒子层 */
.bg-particles {
    display: none !important;
}

/* ---------- 2. 卡片 / 表面 ---------- */
.status-bar,
.announcement,
.feature-card,
.extra-buttons,
.now-project,
.feedback-card,
.login-container,
.header,
.content-card,
.project-card,
.project-detail,
.comments-section,
.level-list,
.editor-panel,
.level-info,
.upload-card,
.tipping-card,
.no-projects,
.modal-content {
    background: var(--surface) !important;
    background-image: none !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow) !important;
    color: var(--text) !important;
}

/* update.html 顶部标题区不是卡片 */
body:has(.upload-card) .header {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 次级表面（列表项 / 信息块） */
.item,
.file-item,
.modal-stats,
.level-item {
    background: var(--surface-2) !important;
}

.item,
.file-item,
.modal-stats {
    border-radius: var(--radius-sm) !important;
}

.file-item {
    border: 1px solid var(--border) !important;
}

.level-item {
    border-radius: var(--radius-sm) !important;
}

.level-item.active {
    background: var(--primary-soft) !important;
    border-left-color: var(--primary) !important;
}

.level-item.completed {
    border-left-color: var(--success) !important;
}

.level-item.completed::after {
    color: var(--success) !important;
}

/* ---------- 3. 文字颜色 ---------- */
.status-bar,
.status-bar *,
.announcement,
.announcement *,
.feature-card,
.feature-card *,
.extra-buttons,
.extra-buttons *,
.now-project,
.now-project * {
    color: var(--text) !important;
}

.header h1,
.header h2,
.header h3,
.user-info h1,
.content-card h3,
.section-title,
.level-title,
.project-title,
.modal-title,
.file-list h3,
.level-list h3,
.editor-panel h3,
.level-info h2,
.tipping-card h1,
.feedback-card h1,
.upload-text,
.file-name,
.item-title,
.comment-user,
.form-group label {
    color: var(--text) !important;
}

.feature-card p,
.now-project-desc,
.level-desc,
.project-desc,
.modal-desc,
.upload-hint,
.tipping-card p,
.header p,
.comment-content,
.allowed-formats strong {
    color: var(--text-2) !important;
}

.item-meta,
.level-chapter,
.project-stats,
.modal-stats,
.comment-time,
.no-data,
.no-comments,
.no-projects,
.char-count,
.file-size,
.smp-adbar-sub,
.login-prompt {
    color: var(--text-3) !important;
}

/* ---------- 4. 按钮（方正化 + 轻微动画） ---------- */
.home-btn,
.submit-btn,
.save-btn,
.btn-submit,
.submit-comment,
.btn-primary,
.now-project-btn,
.smp-adbar-btn,
.tab.active,
.filter-tab.active,
.lang-tab.active,
.opt-btn.active {
    background: var(--primary) !important;
    background-image: none !important;
    color: #fff !important;
    border: 1px solid var(--primary) !important;
    border-radius: var(--radius-btn) !important;
    box-shadow: var(--shadow) !important;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

.home-btn:hover,
.submit-btn:hover,
.save-btn:hover,
.btn-submit:hover,
.submit-comment:hover,
.btn-primary:hover,
.now-project-btn:hover,
.smp-adbar-btn:hover,
.tab.active:hover,
.filter-tab.active:hover,
.lang-tab.active:hover,
.opt-btn.active:hover {
    background: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    color: #fff !important;
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-1px) !important;
}

.home-btn:disabled,
.submit-btn:disabled,
.btn-primary:disabled {
    opacity: .6 !important;
}

/* 次级按钮（白底描边） */
.extra-link,
.tab,
.filter-tab,
.lang-tab,
.opt-btn,
.reset-btn {
    background: var(--surface) !important;
    background-image: none !important;
    color: var(--text-2) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-btn) !important;
    box-shadow: none !important;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease !important;
}

.extra-link:hover,
.tab:hover,
.filter-tab:hover,
.lang-tab:hover,
.opt-btn:hover,
.reset-btn:hover {
    background: var(--primary-soft) !important;
    border-color: var(--primary) !important;
    color: var(--primary-hover) !important;
    transform: translateY(-1px) !important;
}

.tabs {
    border-bottom-color: var(--border) !important;
}

/* ---------- 5. 表单 ---------- */
.form-group input,
.form-group textarea,
.comment-input {
    background: var(--surface) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text) !important;
    box-shadow: none !important;
}

.form-group input::placeholder,
.form-group textarea::placeholder,
.comment-input::placeholder {
    color: var(--text-3) !important;
}

.form-group input:focus,
.form-group textarea:focus,
.comment-input:focus,
.code-editor:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--primary-soft) !important;
}

.code-editor {
    background: var(--surface) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text) !important;
    font-family: 'Consolas', 'Monaco', monospace !important;
}

.output-area {
    background: #1f2329 !important;
    color: #e5e7eb !important;
    border-radius: var(--radius-sm) !important;
    font-family: 'Consolas', 'Monaco', monospace !important;
}

/* ---------- 6. 状态与提示 ---------- */
.message.success,
.success-message,
.status-success,
.status-processed {
    background: var(--success-soft) !important;
    color: var(--success) !important;
    border-color: #abefc6 !important;
}

.message.error,
.error-message,
.status-error {
    background: var(--danger-soft) !important;
    color: var(--danger) !important;
    border-color: #fecdca !important;
}

.message.warning,
.status-waiting,
.status-pending,
.security-notice {
    background: var(--warning-soft) !important;
    color: var(--warning) !important;
    border-color: #fedf89 !important;
}

.security-notice h4 {
    color: #93370d !important;
}

.status-uploading,
.allowed-formats {
    background: var(--primary-soft) !important;
    color: var(--primary-hover) !important;
    border-color: #c7d7fe !important;
}

/* ---------- 7. 其它细节 ---------- */
.modal-overlay {
    background: rgba(15, 23, 42, .45) !important;
}

/* 去掉卡片扫光特效 */
.feature-card::before {
    display: none !important;
}

.upload-area {
    background: var(--surface-2) !important;
    border: 1px dashed var(--border-strong) !important;
    border-radius: var(--radius) !important;
}

.upload-area:hover,
.upload-area.dragover {
    background: var(--primary-soft) !important;
    border-color: var(--primary) !important;
}

.progress-bar {
    background: var(--border) !important;
}

.progress-fill {
    background: var(--primary) !important;
    background-image: none !important;
}

.expected-output {
    background: var(--surface-2) !important;
    border-left: 3px solid var(--primary) !important;
}

.expected-output h4 {
    color: var(--primary) !important;
}

.project-header,
.section-title,
.level-list h3 {
    border-color: var(--border) !important;
}

/* 钻石显示：首页为浮层白卡，个人中心为蓝色胶囊 */
.diamond-display {
    background: var(--primary) !important;
    background-image: none !important;
    color: #fff !important;
    border: none !important;
}

#diamondDisplay {
    background: var(--surface) !important;
    background-image: none !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow) !important;
}

#diamondDisplay * {
    color: var(--text) !important;
}

/* 首页底部服务器条 */
.smp-adbar {
    background: var(--surface) !important;
    border-top: 1px solid var(--border) !important;
    box-shadow: 0 -2px 8px rgba(16, 24, 40, .06) !important;
}

.smp-adbar-title {
    color: var(--text) !important;
}

.smp-adbar-close {
    color: var(--text-3) !important;
}

.smp-adbar-close:hover {
    color: var(--text) !important;
}

.now-project-badge {
    background: var(--primary-soft) !important;
    color: var(--primary-hover) !important;
    border: 1px solid #c7d7fe !important;
}

.avatar {
    border-color: var(--primary) !important;
}

.color-option.selected {
    border-color: var(--primary) !important;
}

.modal-close {
    background: var(--surface-2) !important;
}

.forgot-password,
.thanks-message,
.login-prompt a {
    color: var(--primary) !important;
}

.file-remove {
    color: var(--danger) !important;
}

/* ---------- 8. 交互动画 ---------- */
/* 按下反馈 */
.home-btn:active,
.submit-btn:active,
.save-btn:active,
.btn-submit:active,
.submit-comment:active,
.btn-primary:active,
.now-project-btn:active,
.smp-adbar-btn:active,
.extra-link:active,
.tab:active,
.filter-tab:active,
.lang-tab:active,
.opt-btn:active,
.reset-btn:active {
    transform: translateY(0) scale(.97) !important;
    box-shadow: var(--shadow) !important;
}

/* 卡片轻微悬浮 */
.feature-card:hover,
.project-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--shadow-md) !important;
}

/* 内容淡入 */
@keyframes uiFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

.status-bar,
.announcement,
.feature-card,
.extra-buttons,
.now-project,
.feedback-card,
.login-container,
.header,
.content-card,
.project-card,
.project-detail,
.comments-section,
.level-list,
.editor-panel,
.level-info,
.upload-card,
.tipping-card,
.no-projects,
.modal-content {
    animation: uiFadeIn .3s ease both !important;
}

/* 固定元素层级：避免被卡片（transform 会形成层叠上下文）遮挡 */
.home-btn {
    z-index: 900 !important;
}

#diamondDisplay {
    z-index: 950 !important;
}

/* ---------- 9. 首页「欢迎访问，请登录」改为明显按钮 ---------- */
#loginStatus .login-prompt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    background: var(--primary) !important;
    background-image: none !important;
    color: #fff !important;
    border: 1px solid var(--primary) !important;
    border-radius: var(--radius-btn) !important;
    font-size: 15px;
    font-weight: 600;
    box-shadow: var(--shadow-md) !important;
    transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

#loginStatus .login-prompt:hover {
    background: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-lg) !important;
}

#loginStatus .login-prompt:active {
    transform: translateY(0) scale(.97) !important;
}

/* ---------- 10. 深色模式细节修正 ---------- */
html[data-ui-dark="1"] {
    color-scheme: dark;
}

html[data-ui-dark="1"] .output-area {
    background: #0b1220 !important;
}

html[data-ui-dark="1"] .modal-overlay {
    background: rgba(0, 0, 0, .6) !important;
}

html[data-ui-dark="1"] .now-project-badge,
html[data-ui-dark="1"] .allowed-formats,
html[data-ui-dark="1"] .status-uploading,
html[data-ui-dark="1"] .message.success,
html[data-ui-dark="1"] .message.error,
html[data-ui-dark="1"] .message.warning,
html[data-ui-dark="1"] .success-message,
html[data-ui-dark="1"] .error-message,
html[data-ui-dark="1"] .status-badge {
    border-color: rgba(255, 255, 255, .14) !important;
}

/* ---------- 11. 尊重系统「减少动态效果」 ---------- */
@media (prefers-reduced-motion: reduce) {
    .status-bar,
    .announcement,
    .feature-card,
    .extra-buttons,
    .now-project,
    .feedback-card,
    .login-container,
    .header,
    .content-card,
    .project-card,
    .project-detail,
    .comments-section,
    .level-list,
    .editor-panel,
    .level-info,
    .upload-card,
    .tipping-card,
    .no-projects,
    .modal-content {
        animation: none !important;
    }

    .home-btn,
    .submit-btn,
    .save-btn,
    .btn-submit,
    .submit-comment,
    .btn-primary,
    .now-project-btn,
    .smp-adbar-btn,
    .extra-link,
    .tab,
    .filter-tab,
    .lang-tab,
    .opt-btn,
    .reset-btn,
    #loginStatus .login-prompt {
        transition: none !important;
    }

    .feature-card:hover,
    .project-card:hover,
    .extra-link:hover,
    .tab:hover,
    .filter-tab:hover,
    .lang-tab:hover,
    .opt-btn:hover,
    .reset-btn:hover,
    #loginStatus .login-prompt:hover {
        transform: none !important;
    }
}