/* ==========================================================================
   layout.css — 应用外壳 / 导航 / 断点适配
   手机 < 640 < 平板 < 1024 < 桌面
   ========================================================================== */

.app {
  display: flex;
  min-height: 100dvh;
}

.content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ---------------- 顶栏 ---------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  height: calc(var(--topbar-h) + var(--safe-t));
  padding: var(--safe-t) 16px 0;
  background: rgba(246, 248, 251, .86);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
}
.topbar.scrolled { border-bottom-color: var(--border); }

.topbar h1 {
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar .sub {
  font-size: .78rem;
  color: var(--muted);
  font-weight: 400;
  display: block;
  line-height: 1.2;
  margin-top: 1px;
}

.avatar {
  width: 34px; height: 34px;
  border-radius: var(--radius-full);
  background: var(--brand);
  color: #fff;
  display: grid; place-items: center;
  font-size: .85rem; font-weight: 700;
  flex: none;
}

/* ---------------- 主内容 ---------------- */
.main {
  flex: 1;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 16px calc(var(--tabbar-h) + var(--safe-b) + 24px);
  animation: fade-up .25s ease;
}

.page-head { margin-bottom: 16px; }
.page-head h2 { margin-bottom: 4px; }
.page-head p { color: var(--text-2); font-size: .9rem; }

.section { margin-bottom: 18px; }

/* ---------------- 底部标签栏（手机 / 平板） ---------------- */
.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: calc(var(--tabbar-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid var(--border);
}

.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 600;
  min-height: 44px;
  transition: color .15s;
  position: relative;
}
.tab:hover { text-decoration: none; }
.tab svg { width: 22px; height: 22px; stroke-width: 1.9; }
.tab.active { color: var(--brand); }
.tab.active::after {
  content: "";
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 22px; height: 2.5px;
  background: var(--brand);
  border-radius: 0 0 3px 3px;
}
.tab:active { transform: scale(.94); }

/* ---------------- 侧边栏（桌面） ---------------- */
.sidebar { display: none; }

/* ==========================================================================
   ≥ 640px  平板
   ========================================================================== */
@media (min-width: 640px) {
  .main { padding: 22px 24px calc(var(--tabbar-h) + var(--safe-b) + 32px); }
  .topbar { padding-left: 24px; padding-right: 24px; }
  .stat b { font-size: 1.7rem; }
  .card { padding: 22px; }
}

/* ==========================================================================
   ≥ 1024px  桌面：左侧常驻导航，去掉底部栏
   ========================================================================== */
@media (min-width: 1024px) {
  .sidebar {
    display: flex;
    flex-direction: column;
    width: var(--sidebar-w);
    flex: none;
    position: sticky;
    top: 0;
    height: 100dvh;
    padding: 20px 12px;
    background: var(--surface);
    border-right: 1px solid var(--border);
  }

  .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px 20px;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: -.01em;
  }
  .brand .logo {
    width: 30px; height: 30px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--brand), #7c3aed);
    color: #fff;
    display: grid; place-items: center;
    font-size: .8rem;
    font-weight: 800;
    flex: none;
  }
  .brand small { display: block; font-size: .68rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }

  .nav-list { display: flex; flex-direction: column; gap: 2px; }

  .nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 42px;
    padding: 8px 12px;
    border-radius: var(--radius);
    color: var(--text-2);
    font-size: .9rem;
    font-weight: 550;
    text-decoration: none;
    transition: background .15s, color .15s;
  }
  .nav-item:hover { background: var(--surface-2); text-decoration: none; }
  .nav-item.active { background: var(--brand-soft); color: var(--brand-dark); font-weight: 650; }
  .nav-item svg { width: 19px; height: 19px; stroke-width: 1.9; flex: none; }

  .sidebar-foot {
    margin-top: auto;
    padding: 12px 8px 0;
    border-top: 1px solid var(--border);
    font-size: .75rem;
    color: var(--muted);
  }

  .tabbar { display: none; }

  /* 桌面顶栏不隐藏，改成内容区标题栏（去掉毛玻璃，不参与滚动吸附） */
  .topbar {
    position: static;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
    height: auto;
    width: 100%;
    max-width: 880px;
    margin: 20px auto 0;
    padding: 8px 40px 0;
  }
  .topbar h1 { font-size: 1.45rem; }
  .topbar .sub { font-size: .84rem; margin-top: 2px; }

  .main {
    max-width: 880px;
    padding: 22px 40px 48px;
  }

  .page-head { margin-bottom: 24px; }
  .stat-grid { gap: 14px; }

  /* 卡片内的通栏按钮在宽屏上限宽居中，避免拉成一整条 */
  .card .btn-block {
    display: flex;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
  }
  .card .btn-block + .btn-block { margin-top: 8px; }
}

/* ==========================================================================
   宽屏桌面：内容区双栏的公共容器（后续对话页等使用）
   ========================================================================== */
@media (min-width: 1280px) {
  .main,
  .topbar { max-width: 960px; }
}

/* ==========================================================================
   登录 / 首次设置页
   ========================================================================== */
.auth-shell {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 20px calc(24px + var(--safe-b));
  background:
    radial-gradient(1000px 600px at 15% -10%, #e0e7ff 0%, transparent 55%),
    radial-gradient(800px 520px at 105% 105%, #d1fae5 0%, transparent 50%),
    var(--bg);
}

.auth-card {
  width: min(100%, 420px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 28px 24px;
  box-shadow: var(--shadow);
  animation: fade-up .3s ease;
}

.auth-logo {
  width: 46px; height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--brand), #7c3aed);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 800;
  font-size: 1.05rem;
  margin-bottom: 16px;
}

.auth-card h1 { font-size: 1.3rem; margin-bottom: 6px; }
.auth-card .lead { color: var(--text-2); font-size: .9rem; margin-bottom: 22px; }
.auth-card form { display: flex; flex-direction: column; gap: 14px; }
.auth-foot { margin-top: 18px; text-align: center; font-size: .78rem; color: var(--muted); }

@media (min-width: 640px) {
  .auth-card { padding: 34px 32px; }
}