/* ============================================================
   喂了吗 · 视觉增强皮肤 (theme.css)
   ------------------------------------------------------------
   设计原则：
   1. 不修改任何原有布局、尺寸、class 名 —— 只做视觉润色
   2. 全部基于原有 class 选择器，覆盖颜色/阴影/圆角/动效
   3. 不生效时可直接删除本文件，界面立刻回到原样
   配色沿用原有主色 #6366f1（靛蓝）
   ============================================================ */

/* ---------- 全局：更柔和的高级灰底 + 平滑字体渲染 ---------- */
body {
    background:
        radial-gradient(1200px 600px at 10% -10%, #eef2ff 0%, transparent 55%),
        radial-gradient(1000px 500px at 100% 0%, #f0f9ff 0%, transparent 50%),
        #f5f7fb;
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---------- 顶部导航：玻璃拟态 + 更精致的选中态 ---------- */
.top-nav {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid rgba(99, 102, 241, 0.08);
    box-shadow: 0 4px 20px rgba(17, 24, 39, 0.05);
}
.nav-btn {
    background: rgba(241, 243, 247, 0.9);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-btn:hover {
    background: #e8ebf5;
    transform: translateY(-1px);
}
.nav-btn.active {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.32);
}

/* ---------- 卡片：更细腻的阴影层次 + 悬停微浮起 ---------- */
.card {
    border: 1px solid rgba(17, 24, 39, 0.04);
    box-shadow:
        0 1px 2px rgba(17, 24, 39, 0.03),
        0 8px 24px rgba(17, 24, 39, 0.05);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.card:hover {
    box-shadow:
        0 2px 4px rgba(17, 24, 39, 0.04),
        0 14px 38px rgba(17, 24, 39, 0.08);
}
.card-title {
    position: relative;
    padding-left: 12px;
}
/* 标题左侧加一条渐变竖线，提升层次感 */
.card-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 16px;
    border-radius: 2px;
    background: linear-gradient(180deg, #6366f1, #818cf8);
}

/* ---------- 欢迎卡：渐变更通透 + 柔和光晕 ---------- */
.welcome-card {
    background: linear-gradient(135deg, #eef2ff 0%, #e8f4ff 45%, #f5f3ff 100%);
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.12);
    position: relative;
    overflow: hidden;
}
.welcome-card::after {
    content: "";
    position: absolute;
    right: -40px;
    top: -60px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.16), transparent 70%);
    pointer-events: none;
}
.welcome-icon {
    filter: drop-shadow(0 6px 12px rgba(99, 102, 241, 0.25));
    transition: transform 0.4s ease;
}
.welcome-card:hover .welcome-icon { transform: scale(1.08) rotate(-6deg); }

/* ---------- 统计卡：数字更有神采 ---------- */
.stat-card {
    border: 1px solid rgba(17, 24, 39, 0.04);
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.03), 0 6px 18px rgba(17, 24, 39, 0.05);
    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(99, 102, 241, 0.16);
    border-color: rgba(99, 102, 241, 0.24);
}
.stat-num {
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.5px;
}

/* ---------- 按钮：统一过渡 + 微交互 ---------- */
.btn, .btn-small {
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-primary {
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.28);
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(99, 102, 241, 0.38);
}
.btn-primary:active { transform: translateY(0); }
.btn-default:hover { background: #e9ecf3; transform: translateY(-1px); }
.btn-danger:hover { background: #fecaca; }
.btn-small.primary:hover { background: #d3dcff; }
.btn-small.danger:hover { background: #fecaca; }

/* ---------- 表单：聚焦时更明显的反馈 ---------- */
.form-input, .form-select, .search-input, .filter-select {
    transition: all 0.22s ease;
}
.form-input:focus, .form-select:focus,
.search-input:focus, .filter-select:focus {
    border-color: #6366f1;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
}

/* ---------- 待办项 & 记录项：卡片化悬停 ---------- */
.task-item, .record-item {
    background: #fff;
    border: 1px solid #eef0f5;
    transition: all 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}
.task-item:hover, .record-item:hover {
    background: #fff;
    border-color: rgba(99, 102, 241, 0.28);
    box-shadow: 0 6px 18px rgba(99, 102, 241, 0.1);
    transform: translateY(-2px);
}
/* 已完成待办：淡化 + 删除线 */
.task-item:has(.check-btn.finished) .task-name {
    text-decoration: line-through;
    color: #9ca3af;
}
.check-btn { transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1); }
.check-btn:hover { border-color: #6366f1; transform: scale(1.12); }
.check-btn.finished {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-color: #16a34a;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.35);
}

/* ---------- 侧栏 & 档案树 ---------- */
.archive-sidebar {
    border: 1px solid rgba(17, 24, 39, 0.04);
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.03), 0 8px 24px rgba(17, 24, 39, 0.05);
}
.tree-label { transition: all 0.2s ease; }
.tree-label:hover { background: #f4f6fd; }
.tree-label.active {
    background: linear-gradient(90deg, #eef2ff, #f5f3ff);
    box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.14);
}

/* ---------- 图片容器：更柔和的底纹 ---------- */
.character-main-img, .gallery-item {
    background: linear-gradient(135deg, #f3f4f6, #eef0f6);
    border: 1px solid rgba(17, 24, 39, 0.05);
    transition: all 0.26s ease;
}
.gallery-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(99, 102, 241, 0.16);
}
.img-upload-add { transition: all 0.24s ease; }
.img-upload-add:hover { color: #6366f1; border-color: #6366f1; background: #f8f9ff; }

/* ---------- 弹窗：更柔的遮罩 + 弹出动效 ---------- */
.modal-mask {
    background: rgba(17, 24, 39, 0.38);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.modal-mask.show .modal-box {
    animation: modalPop 0.28s cubic-bezier(0.34, 1.4, 0.64, 1);
}
@keyframes modalPop {
    from { opacity: 0; transform: translateY(14px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-box {
    border: 1px solid rgba(17, 24, 39, 0.05);
    box-shadow: 0 24px 60px rgba(17, 24, 39, 0.22);
}

/* ---------- Toast：玻璃质感 ---------- */
.toast {
    background: rgba(17, 24, 39, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(17, 24, 39, 0.28);
}

/* ---------- 底部导航：悬浮岛 + 动效 ---------- */
.bottom-nav-item {
    transition: all 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}
.bottom-nav-item:hover { transform: translateY(-3px); color: #6366f1; }
.bottom-nav-item.active { color: #4f46e5; font-weight: 600; }
.bottom-nav-item.active .icon { transform: scale(1.15); }
.bottom-nav-item .icon { transition: transform 0.24s ease; }

/* ---------- 统计图表条：渐变填充 + 浮动数值 ---------- */
.chart-bar {
    background: linear-gradient(180deg, #818cf8, #6366f1);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
    transition: all 0.3s ease;
}
.chart-bar:hover { filter: brightness(1.08); }

/* ---------- 库存预警 ---------- */
.stock-warning {
    border-left-width: 4px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(245, 158, 11, 0.12);
}

/* ---------- 滚动条美化（不影响布局） ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.22);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(99, 102, 241, 0.4); }

/* ---------- 无障碍：跟随系统减弱动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}