/* 设计系统与基础样式。深色为主 —— 这是个看媒体内容的应用。 */

:root {
  --bg: #0b0b0f;
  --bg-elev: #16161c;
  --bg-elev-2: #1f1f27;
  --border: #2a2a34;
  --fg: #e8e8ea;
  --fg-dim: #9a9aa5;
  --fg-faint: #6a6a76;

  --accent: #ff2c55;
  --accent-dim: #d81e44;
  --ok: #34c759;
  --warn: #ff9f0a;
  --danger: #ff453a;

  --radius: 14px;
  --radius-sm: 9px;

  /* 安全区。注意这些值只有在 viewport-fit=cover 时才非零 */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);

  --tabbar-h: 52px;
}

* { box-sizing: border-box; }

/* 这条不能省。
   .sheet / .actionsheet / .install-hint / .float-controls 都声明了 display: flex，
   而类选择器的优先级高于浏览器默认的 `[hidden] { display: none }` ——
   不加 !important 的话这些元素永远藏不住，哪怕它们带着 hidden 属性。
   （踩过一次：筛选面板默认就展开着，把整个首页压暗了。） */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
               "Helvetica Neue", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* 阻止双击缩放，但**不能**用 user-select: none —— 那会把 iOS 的
     「长按 → 存储到照片」菜单一起干掉 */
  touch-action: manipulation;
}

/* 让文档高度可控。具体的页面高度公式见 .page 那段说明。 */
html { height: 100%; }
body { min-height: 100%; }


body { overscroll-behavior-y: none; }

a { color: var(--accent); text-decoration: none; }

/* ---------------------------------------------------------------- 布局 */

/* 页面的高度公式和 .feed 保持一致：**必须让文档短于「屏幕 - 状态栏」**。
 *
 * 真机实测（iPhone 15 Pro Max / iOS 26 / standalone，探针直接量出来的）：
 *   screenH = 932
 *   100vh   = 932  ← 恒定等于屏幕高度，可靠
 *   100dvh  = 873 或 932  ← **会变**，不可靠（standalone 下缩水一个 sat）
 *
 * 而且视口高度取决于文档高度：
 *   · 文档 846（< 873，不滚）→ innerHeight 932，底栏贴底 ✓
 *   · 文档 ≥ 873（可滚）    → innerHeight 873，底栏高 59px ✗
 *
 * 滑动模式一直是唯一正确的页面，正是因为它那条 `100dvh - 底栏 - 安全区 - sat`
 * 的公式恰好把文档压在了 873 以内。这里把同一套公式推广到所有页面，
 * 并且 standalone 下改用 100vh（不受 dvh 缩水影响）。 */
.page {
  height: calc(100dvh - var(--tabbar-h) - var(--sab) - var(--sat));
  margin-top: var(--sat);
  overflow-y: auto;                /* 页面自己滚，文档不滚 */
  -webkit-overflow-scrolling: touch;
  padding: 12px calc(var(--sar) + 16px) 20px calc(var(--sal) + 16px);
}

@media all and (display-mode: standalone) {
  /* 见上：standalone 下 100dvh 会缩水，用 100vh（恒等于屏幕高度）。
     .feed 的对应规则在 feed.css 里 —— 它的基础规则在那，媒体查询必须跟在后面
     才能覆盖（同优先级下后写的胜出）。 */
  .page {
    height: calc(100vh - var(--tabbar-h) - var(--sab) - var(--sat));
  }
}

.page--no-tabbar {
  height: calc(100dvh - var(--sat));
  padding-bottom: calc(var(--sab) + 24px);
}


.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0 16px;
}

.topbar h1 {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  flex: 1;
  letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------- 控件 */

.btn {
  appearance: none;
  border: none;
  border-radius: var(--radius-sm);
  padding: 11px 18px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  background: var(--bg-elev-2);
  color: var(--fg);
  cursor: pointer;
  transition: opacity .15s, transform .1s;
  white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .4; cursor: not-allowed; }

.btn--primary { background: var(--accent); color: #fff; }
.btn--danger  { background: var(--danger); color: #fff; }
.btn--ghost   { background: transparent; border: 1px solid var(--border); }
.btn--block   { display: block; width: 100%; }
.btn--sm      { padding: 7px 12px; font-size: 13px; }

.input, .textarea, .select {
  width: 100%;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--fg);
  font-size: 16px; /* 必须 ≥16px，否则 iOS 聚焦时会自动放大页面 */
  font-family: inherit;
  outline: none;
}
.input:focus, .textarea:focus, .select:focus { border-color: var(--accent); }
.textarea { min-height: 110px; resize: vertical; line-height: 1.5; }

.field { margin-bottom: 14px; }
.field__label {
  display: block;
  font-size: 13px;
  color: var(--fg-dim);
  margin-bottom: 6px;
  font-weight: 500;
}

.switch {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.switch input { width: 20px; height: 20px; accent-color: var(--accent); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-elev-2);
  color: var(--fg-dim);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.chip--accent { background: rgba(255, 44, 85, .16); color: var(--accent); }
.chip--toggle { border: 1px solid var(--border); background: transparent; cursor: pointer; }
.chip--toggle[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }

.badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}
.badge--douyin { background: #000; color: #fff; border: 1px solid #333; }
.badge--public { background: rgba(52, 199, 89, .18); color: var(--ok); }
.badge--private { background: var(--bg-elev-2); color: var(--fg-faint); }

/* ---------------------------------------------------------------- 提示 */

.toast-host {
  position: fixed;
  left: 50%;
  bottom: calc(var(--sab) + var(--tabbar-h) + 16px);
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
  width: max-content;
  max-width: calc(100vw - 32px);
}
.toast {
  background: rgba(30, 30, 38, .96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  color: var(--fg);
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 14px;
  animation: toast-in .2s ease-out;
  text-align: center;
}
.toast--ok    { border-color: rgba(52, 199, 89, .5); }
.toast--error { border-color: rgba(255, 69, 58, .5); color: #ffb4ae; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------------------------------------------------------------- 其他 */

.empty {
  text-align: center;
  padding: 64px 24px;
  color: var(--fg-faint);
}
.empty__title { font-size: 17px; color: var(--fg-dim); margin-bottom: 8px; }
.empty__hint  { font-size: 14px; line-height: 1.6; }

.spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: inline-block;
  vertical-align: -3px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.progress {
  height: 4px;
  background: var(--bg-elev-2);
  border-radius: 2px;
  overflow: hidden;
}
.progress__bar {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width .3s ease;
}

.divider { height: 1px; background: var(--border); margin: 18px 0; border: 0; }

.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------------------------------------------------------------- 安装引导 */

.install-hint {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .62);
  z-index: 80;
  display: flex;
  align-items: flex-end;
  padding: 16px;
  padding-bottom: calc(var(--sab) + 16px);
}
.install-hint__panel {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}
.install-hint__title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}
.install-hint__body {
  font-size: 14px;
  color: var(--fg-dim);
  line-height: 1.65;
  margin-bottom: 16px;
}
.install-hint__body strong { color: var(--fg); }

/* 底部标签栏 */
.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--tabbar-h) + var(--sab));
  padding-bottom: var(--sab);
  display: flex;
  background: rgba(15, 15, 20, .92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  z-index: 50;
}
.tabbar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--fg-faint);
  font-size: 11px;
  font-weight: 500;
}
.tabbar__item[aria-current="page"] { color: var(--accent); }
.tabbar__icon { font-size: 19px; line-height: 1; }
.tabbar__icon svg { display: block; }

/* ⚠️ 这里**不要**再加 standalone 的修正规则。
 *
 * 曾经基于「standalone 下 100dvh 比物理屏幕矮一个安全区」这个推断，写了
 *     .tabbar { bottom: calc(-1 * env(safe-area-inset-bottom)); }
 * 想把底栏往下推。**那个推断是错的** —— 真机数据（iPhone 15 Pro Max）显示
 * tabbar.bottom 已经等于 innerHeight，它本来就在视口底边。
 *
 * 那条规则的实际效果是把底栏又往下推 34px，图标直接贴在 iOS 的 home 指示条上。
 *
 * 真正的原因在文件上方那段注释里：首页滑动模式的**文档比视口矮**，
 * iOS 会把布局视口收缩到文档高度，底栏才吸不到底。用 html/body 填满视口解决，
 * 和 standalone 与否无关。 */