/* 根与全局基础 */
:root {
  /* 安全区变量（WKWebView + 刘海） */
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
}
html, body {
  height: 100%;
  min-height: 100dvh;              /* iOS 17/18 推荐：动态视窗高度 */
  background: #000;                /* 防止任何地方露白 */
  overflow-x: hidden;              /* 禁止横向滚动 */
  -webkit-text-size-adjust: 100%;
}
* { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }
body { overscroll-behavior: none; }

/* 禁止双击放大/捏合；交互更像 App */
body, input, button, textarea { touch-action: manipulation; }
input, textarea, select { font-size: 16px; } /* 避免系统为小字号自动放大 */

/* 页面通用容器：顶底贴合安全区 */
.app-screen {
  min-height: 100dvh;
  padding-bottom: var(--safe-bottom);
  padding-top: var(--safe-top);
  background: #000;                /* 背景拉满 */
}

/* 登录/激活页背景图（如有） */
.login-bg, .activate-bg {
  background-size: cover;
  background-position: center;
  min-height: 100dvh;
}

/* 表单区不要撑出横向滚动 */
.form-row, .form { max-width: 100%; overflow: hidden; }

/* “验证码 + 按钮”行：两列布局，按钮可两行 */
.sms-row { display: grid; grid-template-columns: 1fr auto; align-items: stretch; gap: 12px; }
.sms-input { min-width: 0; }
.sms-btn { display: grid; place-items: center; padding: 10px 12px; line-height: 1.1; text-align: center; white-space: normal; }

/* 移动端布局：≤1024 强制单列，正文占满，取消侧栏列 */
@media (max-width: 1024px) {
  .layout-grid { display: block !important; }
  .content-main { width: 100% !important; }
}

/* 抽屉与遮罩（移动端） */
@media (max-width: 1024px) {
  body.drawer-open { overflow: hidden; }           /* 打开抽屉禁止背景滚动 */

  .drawer {
    position: fixed;
    inset: 0 auto 0 0;                             /* 贴左、上下贴合 */
    width: 72vw; max-width: 320px;
    height: 100dvh;
    background: #111;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 2000;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
  }
  .drawer.open { transform: translateX(0); }

  .drawer-mask {
    position: fixed; inset: 0;
    /* 隐藏状态不应用模糊，以免残留模糊效果 */
    display: none; opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
    z-index: 1999;
  }
  .drawer-mask.show {
    display: block;
    opacity: 1;
    pointer-events: auto;
    /* 去除模糊效果，避免关闭后残影/发虚 */
    backdrop-filter: none;
    background: rgba(0,0,0,0.35);
  }

  /* 菜单按钮缩小并靠左，抽屉打开时隐藏 */
  #menu-btn {
    position: fixed; left: calc(2px + env(safe-area-inset-left)); top: calc(env(safe-area-inset-top, 0) + 6px);
    width: 28px; height: 28px; z-index: 2100; background: transparent; border: none; padding: 6px; cursor: pointer;
  }
  #menu-btn .bar { display: block; width: 16px; height: 2px; margin: 3px 0; background: rgba(255,255,255,.7); border-radius: 2px; }
  body.drawer-open #menu-btn { visibility: hidden; }

  /* 让首页侧边栏位于遮罩之上，保证可点击 */
  aside.sidebar { z-index: 2002; }

  /* 修正详情宽度：在有外层 padding 的情况下不要使用 100vw，避免右侧被裁剪 */
  section.detail { width: auto !important; max-width: 100% !important; }
}

/* 侧边栏内容上下铺满（避免露白） */
.drawer .inner { min-height: 100dvh; padding-bottom: var(--safe-bottom); padding-top: var(--safe-top); }

/* 首页正文禁止横向滚动（双保险） */
.page-home, .article-wrap { overflow-x: hidden; }

/* 文章页上下贴边 + 内容左右各留 1.6em，并考虑安全区左右（增大右侧留白） */
.article-wrap { padding: var(--safe-top) calc(1.6em + env(safe-area-inset-right)) calc(16px + var(--safe-bottom)) calc(1.6em + env(safe-area-inset-left)); }
/* 首页正文容器在移动端也保留对称间距 */
@media (max-width: 1024px) {
  main.wrap.page-home { padding-left: calc(1.8em + env(safe-area-inset-left)); padding-right: calc(1.8em + env(safe-area-inset-right)); }
  /* 标题不右移，与正文对齐 */
  .page .detail .article-title { padding-left: 0; }
  section.detail { padding-left: 0; padding-right: 0; }
}