/* ============================================================
 * neumorphism.css — 新拟态 (Neumorphism) 共享皮肤
 * 所有工具箱挂载页面引入此文件即可获得统一的新拟态外观
 * 配合 data-neu="on" 属性激活
 * ============================================================ */

/* ===== 新拟态核心变量 ===== */
[data-neu="on"] {
    --neu-bg: #e0e5ec;
    --neu-surface: #e0e5ec;
    --neu-text: #4a5568;
    --neu-text-secondary: #718096;
    --neu-text-muted: #a0aec0;
    --neu-accent: #4299e1;
    --neu-accent-soft: rgba(66, 153, 225, 0.15);
    --neu-border: transparent;

    /* 阴影：凸起 / 凹陷 */
    --neu-shadow-out: 8px 8px 16px rgba(163, 177, 198, 0.6), -8px -8px 16px rgba(255, 255, 255, 0.9);
    --neu-shadow-out-sm: 5px 5px 10px rgba(163, 177, 198, 0.6), -5px -5px 10px rgba(255, 255, 255, 0.9);
    --neu-shadow-in: inset 5px 5px 10px rgba(163, 177, 198, 0.6), inset -5px -5px 10px rgba(255, 255, 255, 0.9);
    --neu-shadow-in-sm: inset 3px 3px 6px rgba(163, 177, 198, 0.6), inset -3px -3px 6px rgba(255, 255, 255, 0.9);
    --neu-radius: 16px;
    --neu-radius-sm: 10px;
    --neu-radius-xs: 6px;
    --neu-transition: all 0.3s ease;

    background: var(--neu-bg) !important;
    color: var(--neu-text) !important;
}

/* ===== 页面原始变量 → 新拟态映射 =====
 * 当 data-neu="on" 时，将各页面自有变量统一映射为新拟态色值。
 * 各页面变量名不同但语义相同的统一取相同值，
 * 避免页面 CSS 中 var(--accent)/var(--red) 等仍用原配色与新拟态灰底冲突。
 * 未使用的变量声明对各页面无害。
 * 使用 body[data-neu="on"] 以确保对 body.theme-xxx 等同特异性选择器的优先权。
 */
[data-neu="on"],
body[data-neu="on"] {
    /* 背景 / 表面 */
    --bg: #e0e5ec !important;
    --surface: #e0e5ec !important;
    --paper: #eef2f7 !important;
    --paper-dark: #dde4ec !important;
    --page: #e0e5ec !important;
    --sheet: #e0e5ec !important;
    --bg-gradient: linear-gradient(135deg, #e0e5ec 0%, #dde4ec 100%) !important;
    --glass-bg: #e0e5ec !important;
    --glass-border: rgba(163, 177, 198, 0.3) !important;
    --option-bg: #e0e5ec !important;

    /* 文字 */
    --ink: #4a5568 !important;
    --ink-soft: #718096 !important;
    --ink-sec: #718096 !important;
    --ink-muted: #a0aec0 !important;
    --ink2: #718096 !important;
    --text: #4a5568 !important;
    --text-muted: #a0aec0 !important;
    --text-secondary: #718096 !important;

    /* 强调色 */
    --accent: #4299e1 !important;
    --accent-deep: #2b6cb0 !important;
    --accent-soft: rgba(66, 153, 225, 0.15) !important;
    --accent-light: #3182ce !important;
    --accent-bg: rgba(66, 153, 225, 0.1) !important;
    --accent-border: rgba(66, 153, 225, 0.3) !important;
    --primary: #4299e1 !important;
    --btn-bg: #4299e1 !important;

    /* 功能色 */
    --red: #c53030 !important;
    --red-rgb: 197, 48, 48 !important;
    --red-soft: rgba(197, 48, 48, 0.08) !important;
    --red-glow: rgba(197, 48, 48, 0.15) !important;
    --green: #48bb78 !important;
    --teal: #4299e1 !important;
    --teal-soft: rgba(66, 153, 225, 0.08) !important;
    --gold: #b7791f !important;
    --high-value: #48bb78 !important;
    --low-value: #c53030 !important;
    --blank-color: #718096 !important;

    /* 边框 / 线条 */
    --border: rgba(163, 177, 198, 0.3) !important;
    --line: rgba(163, 177, 198, 0.3) !important;
    --rule: rgba(163, 177, 198, 0.3) !important;
    --rule-hover: #4299e1 !important;

    /* 阴影 */
    --shadow: 5px 5px 10px rgba(163, 177, 198, 0.5), -5px -5px 10px rgba(255, 255, 255, 0.9) !important;
    --shadow-hover: 8px 8px 16px rgba(163, 177, 198, 0.4), -8px -8px 16px rgba(255, 255, 255, 0.95) !important;
    --shadow-color: rgba(163, 177, 198, 0.4) !important;
    --card-shadow: 5px 5px 10px rgba(163, 177, 198, 0.5), -5px -5px 10px rgba(255, 255, 255, 0.9) !important;

    /* 圆角 */
    --radius: 16px !important;
    --radius-base: 16px !important;
    --radius-card: 12px !important;
}

/* ===== 各页面 CSS 变量覆写（按 body class / 页面特性隔离）===== */

/* graph-pro / node-graph — Vue 应用，通过 --t-* 变量驱动 */
[data-neu="on"] .bg-grid,
[data-neu="on"] #app {
    --t-bg: #e0e5ec; --t-panel: #e0e5ec; --t-input: #d5dae0; --t-border: rgba(163,177,198,0.3);
    --t-text: #4a5568; --t-text-muted: #a0aec0; --t-primary: #4299e1;
    --t-primary-hover: #2b6cb0; --t-primary-light: rgba(66,153,225,0.15); --t-grid: rgba(163,177,198,0.3);
}

/* ===== 通用元素覆写 ===== */
[data-neu="on"] body {
    background: var(--neu-bg) !important;
    color: var(--neu-text) !important;
    font-family: "DM Sans", "PingFang SC", "Noto Sans SC", system-ui, sans-serif !important;
    transition: var(--neu-transition);
}

/* 卡片/面板/容器 → 凸起 */
[data-neu="on"] .card,
[data-neu="on"] .panel,
[data-neu="on"] .modal-content,
[data-neu="on"] .modal-card,
[data-neu="on"] .sidebar,
[data-neu="on"] .surface,
[data-neu="on"] .container,
[data-neu="on"] .login-card {
    background: var(--neu-surface) !important;
    border: none !important;
    border-radius: var(--neu-radius) !important;
    box-shadow: var(--neu-shadow-out) !important;
    transition: var(--neu-transition) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

[data-neu="on"] .card:hover {
    box-shadow: 12px 12px 24px rgba(163, 177, 198, 0.5), -12px -12px 24px rgba(255, 255, 255, 0.95) !important;
    transform: translateY(-2px);
}

/* 输入框 → 凹陷 */
[data-neu="on"] input,
[data-neu="on"] textarea,
[data-neu="on"] select,
[data-neu="on"] .field-group input,
[data-neu="on"] .skill-search {
    background: var(--neu-surface) !important;
    border: none !important;
    border-radius: var(--neu-radius-sm) !important;
    box-shadow: var(--neu-shadow-in-sm) !important;
    color: var(--neu-text) !important;
    transition: var(--neu-transition) !important;
    outline: none !important;
}

[data-neu="on"] input:focus,
[data-neu="on"] textarea:focus,
[data-neu="on"] select:focus,
[data-neu="on"] .field-group input:focus,
[data-neu="on"] .skill-search:focus {
    box-shadow: var(--neu-shadow-in) !important;
    border-color: transparent !important;
}

/* 按钮 → 凸起 */
[data-neu="on"] button,
[data-neu="on"] .btn,
[data-neu="on"] .btn-login,
[data-neu="on"] .btn-switch {
    background: var(--neu-surface) !important;
    color: var(--neu-accent) !important;
    border: none !important;
    border-radius: var(--neu-radius-sm) !important;
    box-shadow: var(--neu-shadow-out-sm) !important;
    transition: var(--neu-transition) !important;
    font-weight: 600;
    cursor: pointer;
}

[data-neu="on"] button:hover,
[data-neu="on"] .btn:hover,
[data-neu="on"] .btn-login:hover {
    box-shadow: 6px 6px 12px rgba(163, 177, 198, 0.5), -6px -6px 12px rgba(255, 255, 255, 0.95) !important;
    transform: translateY(-1px);
}

[data-neu="on"] button:active,
[data-neu="on"] .btn:active,
[data-neu="on"] .btn-login:active {
    box-shadow: var(--neu-shadow-in-sm) !important;
    transform: translateY(0);
}

[data-neu="on"] .btn-login:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

/* 主按钮（提交类）保持强调色 */
[data-neu="on"] .btn-login {
    color: var(--neu-accent) !important;
    font-weight: 700;
}

/* 文字/标题颜色 */
[data-neu="on"] h1,
[data-neu="on"] h2,
[data-neu="on"] h3,
[data-neu="on"] .masthead-row1,
[data-neu="on"] .card-text h3 {
    color: var(--neu-text) !important;
}

[data-neu="on"] p,
[data-neu="on"] .card-text p,
[data-neu="on"] .subtitle,
[data-neu="on"] .masthead-info .sub,
[data-neu="on"] .masthead-info .badge,
[data-neu="on"] label {
    color: var(--neu-text-secondary) !important;
}

[data-neu="on"] .ink-muted,
[data-neu="on"] .card .num,
[data-neu="on"] .sk-desc,
[data-neu="on"] .ink-muted {
    color: var(--neu-text-muted) !important;
}

/* 图标颜色 */
[data-neu="on"] .icon-wrap,
[data-neu="on"] .icon-wrap svg {
    color: var(--neu-text-secondary) !important;
}

[data-neu="on"] .icon-wrap {
    background: var(--neu-surface) !important;
    border: none !important;
    box-shadow: var(--neu-shadow-out-sm) !important;
    border-radius: var(--neu-radius) !important;
}

[data-neu="on"] .card:hover .icon-wrap,
[data-neu="on"] .card:hover .icon-wrap svg {
    color: var(--neu-accent) !important;
}

/* 装饰条隐藏 */
[data-neu="on"] body::after {
    display: none !important;
}

/* 卡片顶部 accent 条 → 新拟态无 border */
[data-neu="on"] .card::before,
[data-neu="on"] .card::after {
    display: none !important;
}

/* 3D hover 效果 → 新拟态更适合平面 */
[data-neu="on"] .card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 12px 12px 24px rgba(163, 177, 198, 0.5), -12px -12px 24px rgba(255, 255, 255, 0.95) !important;
}

/* 字号控制按钮组 */
[data-neu="on"] .font-btn-group,
[data-neu="on"] .top-controls button,
[data-neu="on"] #themeToggle,
[data-neu="on"] .font-btn-group button {
    background: var(--neu-surface) !important;
    border: none !important;
    box-shadow: var(--neu-shadow-out-sm) !important;
    border-radius: 22px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: var(--neu-text-secondary) !important;
}

[data-neu="on"] .font-btn-group button:hover {
    color: var(--neu-accent) !important;
    background: var(--neu-surface) !important;
    box-shadow: var(--neu-shadow-in-sm) !important;
}

[data-neu="on"] .font-btn-group button.font-reset {
    border-left: none !important;
    border-right: none !important;
}

/* 主题下拉面板 */
[data-neu="on"] .theme-dropdown {
    background: var(--neu-surface) !important;
    border: none !important;
    box-shadow: var(--neu-shadow-out) !important;
    border-radius: var(--neu-radius) !important;
    backdrop-filter: none !important;
}

[data-neu="on"] .theme-dropdown::before {
    display: none !important;
}

[data-neu="on"] .theme-option:hover {
    background: var(--neu-accent-soft) !important;
}

/* 侧边栏 */
[data-neu="on"] .sidebar {
    background: var(--neu-surface) !important;
    border: none !important;
    box-shadow: var(--neu-shadow-out) !important;
    border-radius: var(--neu-radius) !important;
    backdrop-filter: none !important;
}

[data-neu="on"] .sidebar-header {
    border-bottom: 1px solid rgba(163, 177, 198, 0.3) !important;
}

/* Toast */
[data-neu="on"] .toast {
    background: var(--neu-surface) !important;
    color: var(--neu-text) !important;
    box-shadow: var(--neu-shadow-out) !important;
    border-radius: var(--neu-radius-sm) !important;
    backdrop-filter: none !important;
}

/* Tab 导航（paper-daily / archive 共用）*/
[data-neu="on"] .tab {
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    box-shadow: none !important;
}
[data-neu="on"] .tab.active {
    border-bottom-color: var(--neu-accent) !important;
    color: var(--neu-accent) !important;
}

/* 弹窗容器（paper-daily / archive 共用）*/
[data-neu="on"] .modal {
    background: var(--neu-surface) !important;
    border: none !important;
    box-shadow: var(--neu-shadow-out) !important;
    border-radius: var(--neu-radius) !important;
}

/* Skill tooltip */
[data-neu="on"] .skill-tooltip {
    background: var(--neu-surface) !important;
    border: none !important;
    box-shadow: var(--neu-shadow-out) !important;
    border-radius: var(--neu-radius-sm) !important;
    backdrop-filter: none !important;
}

/* Footer */
[data-neu="on"] .footer {
    border-top: 1px solid rgba(163, 177, 198, 0.3) !important;
    color: var(--neu-text-muted) !important;
}

/* ============================================================
 * 各工具页面专用覆写
 * ============================================================ */

/* ===== receipt.html ===== */
[data-neu="on"] .topbar,
[data-neu="on"] .bottom-bar {
    background: var(--neu-surface) !important;
    border: none !important;
    box-shadow: var(--neu-shadow-out-sm) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
[data-neu="on"] .card {
    background: var(--neu-surface) !important;
    border: none !important;
    box-shadow: var(--neu-shadow-out-sm) !important;
    border-radius: var(--neu-radius) !important;
}
[data-neu="on"] .item,
[data-neu="on"] .meal-item {
    background: var(--neu-surface) !important;
    border: none !important;
    box-shadow: var(--neu-shadow-in-sm) !important;
    border-radius: var(--neu-radius-sm) !important;
}
[data-neu="on"] .chk {
    background: var(--neu-surface) !important;
    border: none !important;
    box-shadow: var(--neu-shadow-in-sm) !important;
    border-radius: 4px !important;
}
[data-neu="on"] .modal-card {
    background: var(--neu-surface) !important;
    border: none !important;
    box-shadow: var(--neu-shadow-out) !important;
    border-radius: var(--neu-radius) !important;
}
[data-neu="on"] .switch {
    background: var(--neu-surface) !important;
    box-shadow: var(--neu-shadow-in-sm) !important;
    border: none !important;
}
[data-neu="on"] .receipt-preview-wrap {
    background: var(--neu-surface) !important;
    box-shadow: var(--neu-shadow-out-sm) !important;
    border: none !important;
    border-radius: var(--neu-radius) !important;
}

/* ===== 日课.html ===== */
[data-neu="on"] .today-panel,
[data-neu="on"] .archive-panel,
[data-neu="on"] .dash-card,
[data-neu="on"] .report-dialog,
[data-neu="on"] .code-editor {
    background: var(--neu-surface) !important;
    border: none !important;
    box-shadow: var(--neu-shadow-out) !important;
    border-radius: var(--neu-radius) !important;
}
[data-neu="on"] .quad {
    background: var(--neu-surface) !important;
    border: none !important;
    box-shadow: var(--neu-shadow-out-sm) !important;
    border-radius: var(--neu-radius) !important;
}
[data-neu="on"] .lesson-item {
    background: var(--neu-surface) !important;
    border: none !important;
    box-shadow: var(--neu-shadow-out-sm) !important;
    border-radius: var(--neu-radius-sm) !important;
}
[data-neu="on"] .li-num {
    background: var(--neu-surface) !important;
    box-shadow: var(--neu-shadow-in-sm) !important;
    border: none !important;
}
[data-neu="on"] .quiz-opt {
    background: var(--neu-surface) !important;
    border: none !important;
    box-shadow: var(--neu-shadow-out-sm) !important;
    border-radius: var(--neu-radius-sm) !important;
}
[data-neu="on"] .quiz-opt:hover {
    box-shadow: var(--neu-shadow-in-sm) !important;
}
[data-neu="on"] .step-box,
[data-neu="on"] .quiz-passage,
[data-neu="on"] .reading-passage {
    background: var(--neu-surface) !important;
    box-shadow: var(--neu-shadow-in-sm) !important;
    border: none !important;
    border-radius: var(--neu-radius-sm) !important;
}

/* ===== paper-daily.html ===== */
[data-neu="on"] .paper-card,
[data-neu="on"] .search-box,
[data-neu="on"] .filter-section,
[data-neu="on"] .analysis-section {
    background: var(--neu-surface) !important;
    border: none !important;
    box-shadow: var(--neu-shadow-out-sm) !important;
    border-radius: var(--neu-radius) !important;
}
[data-neu="on"] .paper-card:hover {
    box-shadow: var(--neu-shadow-out) !important;
    transform: translateY(-2px);
}
[data-neu="on"] .chip {
    background: var(--neu-surface) !important;
    box-shadow: var(--neu-shadow-in-sm) !important;
    border: none !important;
    border-radius: var(--neu-radius-sm) !important;
}

/* ===== word_power.html ===== */
[data-neu="on"] .app-container,
[data-neu="on"] .study-card,
[data-neu="on"] .stat-box,
[data-neu="on"] .course-section,
[data-neu="on"] .news-feed-container,
[data-neu="on"] .expr-card {
    background: var(--neu-surface) !important;
    border: none !important;
    box-shadow: var(--neu-shadow-out-sm) !important;
    border-radius: var(--neu-radius) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
[data-neu="on"] .top-bar {
    background: var(--neu-surface) !important;
    box-shadow: var(--neu-shadow-out-sm) !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
[data-neu="on"] .nav {
    background: var(--neu-surface) !important;
    box-shadow: var(--neu-shadow-out-sm) !important;
    border: none !important;
}
[data-neu="on"] .tab-btn {
    background: var(--neu-surface) !important;
    box-shadow: var(--neu-shadow-out-sm) !important;
    border: none !important;
    border-radius: var(--neu-radius-sm) !important;
}
[data-neu="on"] .tab-btn.active {
    box-shadow: var(--neu-shadow-in-sm) !important;
    color: var(--neu-accent) !important;
}
[data-neu="on"] .lesson-card {
    background: var(--neu-surface) !important;
    box-shadow: var(--neu-shadow-out-sm) !important;
    border: none !important;
    border-radius: var(--neu-radius-sm) !important;
}
[data-neu="on"] .btn-option {
    background: var(--neu-surface) !important;
    box-shadow: var(--neu-shadow-out-sm) !important;
    border: none !important;
    border-radius: var(--neu-radius-sm) !important;
}
[data-neu="on"] .btn-option:hover {
    box-shadow: var(--neu-shadow-in-sm) !important;
}
[data-neu="on"] .context-box {
    background: var(--neu-surface) !important;
    box-shadow: var(--neu-shadow-in-sm) !important;
    border: none !important;
    border-radius: var(--neu-radius-sm) !important;
}
[data-neu="on"] .heatmap .heat-cell {
    background: var(--neu-surface) !important;
    box-shadow: var(--neu-shadow-in-sm) !important;
}

/* ===== archive.html ===== */
[data-neu="on"] .feature-card {
    background: var(--neu-surface) !important;
    border: none !important;
    box-shadow: var(--neu-shadow-in-sm) !important;
    border-radius: var(--neu-radius) !important;
}
[data-neu="on"] .feature-card::before {
    display: none !important;
}
[data-neu="on"] .feature-card:hover {
    box-shadow: var(--neu-shadow-out-sm) !important;
}
[data-neu="on"] .log-entry {
    background: var(--neu-surface) !important;
    border: none !important;
    border-left: 2px solid transparent !important;
    box-shadow: var(--neu-shadow-in-sm) !important;
    border-radius: var(--neu-radius-sm) !important;
}
[data-neu="on"] .log-entry:hover {
    border-left-color: var(--neu-accent) !important;
    box-shadow: var(--neu-shadow-out-sm) !important;
}
[data-neu="on"] .version-box {
    background: var(--neu-surface) !important;
    box-shadow: var(--neu-shadow-in-sm) !important;
    border: none !important;
    border-radius: var(--neu-radius-sm) !important;
}
[data-neu="on"] .file-tag {
    background: var(--neu-surface) !important;
    box-shadow: var(--neu-shadow-out-sm) !important;
    border: none !important;
    border-radius: var(--neu-radius-sm) !important;
}
[data-neu="on"] .type-badge {
    background: var(--neu-surface) !important;
    box-shadow: var(--neu-shadow-in-sm) !important;
    border: none !important;
    border-radius: var(--neu-radius-xs) !important;
}

/* ===== graph-pro / node-graph ===== */
[data-neu="on"] .glass-panel {
    background: var(--neu-surface) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(163,177,198,0.3) !important;
    box-shadow: var(--neu-shadow-out-sm) !important;
}
[data-neu="on"] .btn-action {
    background: var(--neu-surface) !important;
    border: none !important;
    box-shadow: var(--neu-shadow-out-sm) !important;
}
[data-neu="on"] .btn-action:hover {
    box-shadow: var(--neu-shadow-in-sm) !important;
    transform: translateY(0);
}