/* ============================================================
   Klog 样式 2/5 · 基础层
   装：重置 / 布局骨架（.app .sidebar .header .content）/ 文字 lockup / 移动端底部导航
   依赖 01 的令牌；被 03 起的组件层依赖。
   ─── 1008 拆分头结束 ─── */
/* ===================== 基础重置 ===================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-font-smoothing: antialiased;
  height: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* 关闭移动端默认点按高亮，改用自有按压反馈 */
  -webkit-tap-highlight-color: transparent;
}
body {
  font-family: var(--font-sans);
  background: var(--bg-page);
  color: var(--text-3);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  height: 100%;
}
h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-semibold); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h2); font-weight: var(--fw-semibold); line-height: var(--lh-h2); }
code, pre { font-family: var(--font-mono); }
a { color: var(--primary); text-decoration: none; }
button { font-family: var(--font-sans); }
img, svg { display: block; }

/* ===================== 布局骨架 ===================== */
.app { display: flex; height: 100vh; overflow: hidden; }
.sidebar {
  width: var(--sidebar-w);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; flex-shrink: 0;
}
.sidebar .logo {
  display: flex; align-items: center; gap: var(--logo-gap);
  padding: var(--sp-4);
  border-bottom: 1px solid var(--border);
  min-height: var(--header-h); box-sizing: border-box;
}
/* 品牌 logo：K 字形带圆角底板（亮＝黑底白字 / 暗＝白底黑字，对应黑图标/白图标 logo 两版）；
   底板走容器背景，字形仍是内联 svg currentColor，字形高≈底板 75%（源件占板 77.7%，此处保守收半档） */
.logo-icon {
  width: 32px; height: 32px; color: var(--brand-plate-ink);
  background-color: var(--brand-plate); border-radius: var(--r-1);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.logo-icon svg { width: auto; height: 24px; display: block; }
.logo-cn { font-size: calc(15px * var(--fs-scale)); font-weight: var(--fw-semibold); color: var(--text-1); letter-spacing: .5px; }
/* ---- 文字 logo（wordmark）：与 K 图标成对的 lockup ----
   同一份 assets/klog-wordmark.svg（黑文字logo 1001 版）走 mask 着色：亮色 #111、暗色 #F4F4F4（黑白两版随主题切换）。
   宽高比 217.96 : 96.38 ≈ 1 : 2.26，各处只改高度、宽度按比例给定值（1001 换标重算）。 */
 .wm {
  display: inline-block; vertical-align: middle; flex-shrink: 0;
  height: 16px; width: 36px;
  background-color: var(--brand-plate); /* mask 着色墨＝品牌墨色（亮 #111111/暗 #F4F4F4 与令牌逐字同值，暗档由令牌翻面） */
  -webkit-mask: url("../klog-wordmark.svg") no-repeat center / contain;
  mask: url("../klog-wordmark.svg") no-repeat center / contain;
}

.wm-line { display: block; }
.login-logo .wm { height: 18px; width: 41px; }
.ob-head .wm { height: 15px; width: 34px; }
.sidebar .menu { flex: 1; padding: var(--sp-2); overflow-y: auto; }
.menu-section-title {
  font-size: var(--fs-11); color: var(--text-4); font-weight: var(--fw-medium);
  padding: var(--sp-2) var(--sp-3) var(--sp-1); letter-spacing: .3px;
}
.menu-item {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  height: 40px; padding: 0 var(--sp-4);
  border: none; border-radius: 0; cursor: pointer; color: var(--text-2);
  font-size: var(--fs-body); letter-spacing: 1px; background: transparent;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.menu-item > span:first-of-type { flex: 1; text-align: left; }
@media (hover: hover) { .menu-item:hover { background: var(--bg-sidebar-hover); color: var(--text-1); } } /* 暗档由令牌自带（1025 收编原覆盖行） */
.menu-item.active { background: var(--bg-selected); color: var(--text-1); font-weight: var(--fw-medium); }
.menu-item svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--text-4); }
.menu-item.active svg { color: var(--text-2); }
@media (hover: hover) { .menu-item:hover svg { color: var(--text-2); } }
.menu-cnt {
  font-family: var(--font-mono); font-size: var(--fs-10);
  min-width: 18px; height: 18px; padding: 0 var(--sp-1);
  border-radius: var(--r-2); background: var(--primary); color: var(--on-primary);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; line-height: 1;
  animation: menuCntIn var(--d-modal) var(--ease-enter);
  transition: opacity var(--d-modal) var(--ease-enter), transform var(--d-modal) var(--ease-enter), background-color var(--d-modal), display var(--d-modal) allow-discrete;
}
.menu-cnt[hidden] { display: none; opacity: 0; transform: scale(.5); }
@keyframes menuCntIn { from { opacity: 0; transform: scale(.5); } }
.menu-cnt.warn { background: var(--warning); color: var(--white); }
.menu-footer { padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--border); }
/* 侧边栏用户栏：头像 + 用户名，点击进入个人中心 */
.user-bar {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  padding: var(--sp-2); border: none; border-radius: var(--radius-btn);
  background: transparent; cursor: pointer; text-align: left; font: inherit;
  transition: background var(--d-fast) ease;
}
@media (hover: hover) { .user-bar:hover { background: var(--bg-hover); } }
.user-bar:active { transform: scale(.985); }
.user-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: var(--radius-btn);
  background: var(--primary); color: var(--on-primary);
  font-size: calc(14px * var(--fs-scale)); font-weight: 700; letter-spacing: .5px;
  user-select: none;
}
.user-meta { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.user-name { font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--text-1); }
.user-sub { font-size: var(--fs-micro); color: var(--text-4); }
.user-chev { width: 14px; height: 14px; color: var(--text-4); flex-shrink: 0; }

/* 顶栏头像入口（平板 / 移动端，侧边栏被收窄或隐藏时） */
.avatar-btn {
  display: none; align-items: center; justify-content: center; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: var(--radius-btn); border: none; cursor: pointer;
  background: var(--primary); color: var(--on-primary);
  font-size: calc(13px * var(--fs-scale)); font-weight: 700; user-select: none;
}
.avatar-btn:active { transform: scale(.94); }

/* 个人中心弹窗 */
.user-avatar-lg { width: 52px; height: 52px; font-size: calc(21px * var(--fs-scale)); }
/* 头像图片：容器内铺满 + 继承圆角裁剪（无图时容器仍显示首字母） */
.user-avatar img, .avatar-btn img, .user-row-avatar img {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block;
}

/* 个人中心：编辑资料入口（账户卡内铅笔小按钮） */
.pf-edit-btn { flex-shrink: 0; margin-left: var(--sp-1); color: var(--text-4); }
.pf-edit-btn svg { width: 16px; height: 16px; }

/* 编辑资料弹窗：头像预览 + 上传操作 */
.pf-edit-avatar { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }/* (1008 死规则清理) */
.pf-edit-avatar-ops .field-hint { margin: 0; }

/* ===================== 移动端底部导航 ===================== */
.tabbar {
  display: none; flex-shrink: 0;
  background: var(--bg-card); border-top: 1px solid var(--border);
  padding-bottom: var(--sab); z-index: 60;
}
.tabbar .menu-item {
  position: relative;
  flex: 1; flex-direction: column; justify-content: center; gap: 3px;
  height: auto; padding: var(--sp-2) 0 var(--sp-1); border-radius: 0;
  color: var(--text-4); font-size: var(--fs-micro); letter-spacing: .5px;
}
.tabbar .menu-item > span:first-of-type { flex: 0; text-align: center; }
.tabbar .menu-item svg { width: 20px; height: 20px; color: inherit; transition: transform var(--d-micro) ease; }
@media (hover: hover) { .tabbar .menu-item:hover { background: none; } }
.tabbar .menu-item.active { background: none; color: var(--text-1); }
.tabbar .menu-item.active svg { color: inherit; }
.tabbar .menu-item:active svg { transform: scale(.88); }
.tabbar .menu-cnt {
  position: absolute; top: 4px; left: calc(50% + 11px);
  height: 15px; min-width: 15px; padding: 0 var(--sp-1);
  border-radius: var(--r-2); font-size: var(--fs-9);
}

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; }
.header {
  position: sticky; top: 0; height: calc(var(--header-h) + var(--safe-top)); flex-shrink: 0;
  /* 状态栏安全区只垫内容，背景仍延伸到状态栏后：毛玻璃压在状态栏上才是原生观感。
     注意必须写进下方 padding 简写——同块内靠后的 padding 简写会把单独的 padding-top 清零 */
  background: color-mix(in srgb, var(--bg-card) 55%, transparent);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  overflow: hidden; display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); padding: var(--safe-top) var(--content-px) 0; z-index: 50;
}
.header-left { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.header-txt { min-width: 0; }
.header-left h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); color: var(--text-1); line-height: var(--lh-h1); }
.header-left p { font-size: var(--fs-caption); color: var(--text-4); margin-top: var(--sp-1); line-height: var(--lh-caption); }
/* 1010g：顶栏 logo（.head-logo）已整只撤掉——站主令「顶栏去掉 logo、概览改 Klog」；
   它当年承担的「回概览 / 点一下回页顶」随之退役（回家走 dock 首席「首页」），
   「双击进 Klog 设置」只剩桌面侧栏 #sideLogo 一处 + 设置页「站主」组显性入口。
   侧栏与登录页的 .logo-icon（K 字形 + 底板）不受影响，规则留在上面。 */
.header-actions { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.content { flex: 1; padding: var(--content-py) var(--content-px); }