/* ========================================= */
/* 文件：settings-core.css                     */
/* 功能：Evol终端设置页框架                     */
/*       ——view-settings容器、Tab切换栏、       */
/*        content-area滚动区、memory-card卡片、 */
/*        tab-page切换逻辑、fadeIn动画           */
/* ========================================= */

/* =========================================
   ✨✨✨ 2. 设置/档案界面 (Settings View) ✨✨✨
   ========================================= */

#view-settings {
  display: none; /* 保持默认隐藏，不要动 */
  flex-direction: column;
  background: rgba(0,0,0,0.6);

  /* ✨ 同样换成四角打钉法！ */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20; /* 层级稍微高一点，盖住下面 */
}

.tabs { display: flex; background: rgba(0,0,0,0.2); padding: 4px; flex-shrink: 0; }
.tab-btn {
  flex: 1; text-align: center; padding: 12px 0; font-size: 14px;
  color: rgba(255,255,255,0.5); position: relative; transition: all 0.3s;
}
.tab-btn.active { color: #fff; font-weight: 700; }
.tab-btn.active::after {
  content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 20px; height: 3px; background: #ffb37a; border-radius: 2px;
}

.content-area {
  flex: 1;
  padding: 20px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  overflow-y: auto;

  /* ✨ 减震海绵：保证你在上下滑待办列表时，绝对不会把外面的底图扯出来！ */
  overscroll-behavior-y: none;
  touch-action: pan-y;
}

.memory-card {
  background: rgba(255, 255, 255, 0.08); padding: 16px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08); margin-bottom: 12px;
  transition: all 0.3s ease;
}

/* ============ ✨✨✨ 3. Tab 页签切换逻辑 (关键缺失补全) ✨✨✨ ============ */

/* 默认隐藏所有 Tab 页面 */
.tab-page {
  display: none;
  flex-direction: column;
  gap: 12px;
  width: 100%; /* 确保撑满容器 */
}

/* 只有加了 active 类的才显示 */
.tab-page.active {
  display: flex;
  animation: fadeIn 0.3s ease; /* 加个淡入动画，更高级 */
}

/* 简单的淡入动画 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}