/* ============================================================
   工作台外壳（app.html）：导航轨 / 顶栏 / 模块容器 / 响应式
   ============================================================ */

.app-body { height: 100vh; height: 100dvh; height: var(--app-vh, 100dvh); overflow: hidden; display: flex; transform: translateY(var(--kb-offset, 0px)); }

/* ---- 左侧导航轨 ---- */
.navrail {
  width: var(--navrail-w); flex: none; z-index: var(--z-nav);
  display: flex; flex-direction: column; align-items: center;
  padding: var(--sp-4) 0;
  background: var(--bg-glass); border-right: 1px solid var(--line-strong);
  box-shadow: var(--divider-shadow);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.nav-logo {
  width: 42px; height: 42px; border-radius: 13px; margin-bottom: var(--sp-5);
  display: flex; align-items: center; justify-content: center;
  background: var(--grad-brand); color: var(--tx-on-neon);
  box-shadow: var(--glow-brand);
}
.nav-logo .i { width: 22px; height: 22px; }
.nav-btns { display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.nav-btn {
  position: relative;
  width: 48px; height: 48px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--tx-3); transition: all var(--t-fast) var(--ease);
}
.nav-btn:hover { color: var(--tx-1); background: var(--bg-3); }
.nav-btn.active {
  color: var(--neon-cyan);
  background: rgba(0, 229, 255, 0.1);
  box-shadow: inset 0 0 0 1px var(--line-glow), var(--glow-cyan);
}
.nav-btn.active::before {
  content: ''; position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 22px; border-radius: var(--r-full);
  background: var(--grad-brand); box-shadow: var(--glow-cyan);
}
.nav-bottom { display: flex; flex-direction: column; gap: var(--sp-3); align-items: center; }
.avatar-btn { cursor: pointer; border-radius: 50%; transition: box-shadow var(--t-fast); }
.avatar-btn:hover { box-shadow: var(--glow-cyan); }
.avatar-btn .avatar { width: 38px; height: 38px; font-size: var(--fs-md); }

/* ---- 主区 ---- */
.app-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }

/* ---- 顶栏 ---- */
.topbar {
  height: var(--header-h); flex: none; z-index: calc(var(--z-nav) - 1);
  display: flex; align-items: center; gap: var(--sp-4);
  padding: 0 var(--sp-5);
  background: var(--bg-glass); border-bottom: 1px solid var(--line-strong);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.module-title { font-size: var(--fs-lg); font-weight: 700; letter-spacing: 0.5px; white-space: nowrap; }
.top-search { position: relative; flex: 1; max-width: 420px; margin: 0 auto; }
.top-search .input { padding: 8px 14px 8px 38px; border-radius: var(--r-full); font-size: var(--fs-sm); }
.top-search > .i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--tx-3); pointer-events: none; }
.top-actions { display: flex; align-items: center; gap: var(--sp-3); margin-left: auto; }
.top-actions .avatar { width: 36px; height: 36px; font-size: var(--fs-sm); }
.menu-btn { display: none; }

.checkin-btn.done { opacity: 0.55; pointer-events: none; }

/* ---- 模块容器 ---- */
.module-root {
  flex: 1; min-height: 0; position: relative;
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.module-root.module-leave { opacity: 0; transform: translateY(8px); }
.module-root.module-enter { animation: fadeIn var(--t-mid) var(--ease); }
.module { height: 100%; min-height: 0; }

/* 模块加载失败空态 */
.module-error { height: 100%; }

/* ---- 响应式 ---- */
@media (max-width: 768px) {
  .app-body { flex-direction: column-reverse; }
  .navrail {
    width: 100%; height: calc(62px + env(safe-area-inset-bottom, 0px)); flex-direction: row; justify-content: flex-start; gap: var(--sp-2);
    padding: 0 var(--sp-2) env(safe-area-inset-bottom, 0px); border-right: none; border-top: 1px solid var(--line-strong); box-shadow: none;
  }
  /* 手机端底栏不显示「返回主页」入口 */
  .nav-logo { display: none; }
  /* 模块按钮区可横向滑动，容纳更多模块 */
  .nav-btns {
    flex-direction: row; gap: 0; flex: 1; min-width: 0; justify-content: flex-start;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .nav-btns::-webkit-scrollbar { display: none; }
  .nav-btns .nav-btn { flex: none; }
  /* 横滑容器会裁剪溢出，激活指示条收进按钮内侧 */
  .nav-btn.active::before { left: 50%; top: auto; bottom: 3px; transform: translateX(-50%); width: 22px; height: 3px; }
  .nav-bottom { flex-direction: row; gap: var(--sp-2); flex: none; }
  .topbar { padding: 0 var(--sp-3); gap: var(--sp-2); }
  .top-search { display: none; }
  .menu-btn { display: inline-flex; }
  .module-title { font-size: var(--fs-md); }
  .top-actions .checkin-btn span { display: none; }
}