/* ============================================================================
 * betonanything.net — base.css
 *
 * Quiet Luxury Digital · Mobile-Portrait First · Dark Default
 *
 * 加载链：design-tokens.css → base.css → components.css → page-*.css
 * 全部色彩 / 字体 / 间距 / 圆角 / 阴影 / 动效来自 tokens；本层不出现裸值
 * ========================================================================= */

/* ===================== 1. Reset / Normalize ===================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  /* 移动端长内容防溢出基线 */
  min-width: 0;
}

/* 长内容防溢出（高优先级 — base 全局规则） */
body, p, span, div, li, td, th, label, button, a, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}
/* code / hash / 长 URL / mono 内容：允许在任意字符切换行 */
code, kbd, samp, .text-mono, .hash {
  overflow-wrap: anywhere;
  word-break: break-all;
}
pre {
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
  max-width: 100%;
}
/* 图片 / iframe / svg 永不溢出 */
img, video, iframe, svg, canvas, picture {
  max-width: 100%;
  height: auto;
}
/* table 内容自身可换行；超出走 .table-wrap 水平滚 */
td, th { overflow-wrap: anywhere; word-break: break-word; }
/* flex / grid 子项防 intrinsic 撑爆 */
.flex > *, .grid > *, .flex-col > * { min-width: 0; }
/* list / card / chip 文本省略（覆盖 long tokens） */
.list-item-title, .market-card-title, .card-title {
  overflow-wrap: anywhere;
  word-break: break-word;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11", "ss03", "cv02";
  hanging-punctuation: first last;
  background: var(--c-bg);
  overscroll-behavior-y: none;
  scroll-behavior: smooth;
}

html, body {
  min-height: 100%;
  min-height: 100dvh;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-body);
  color: var(--c-text-primary);
  background: var(--c-bg);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -20%, var(--c-accent-soft), transparent 70%),
    radial-gradient(ellipse 60% 40% at 80% 100%, var(--c-gold-soft), transparent 60%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  padding-top: env(safe-area-inset-top, 0);
}

::selection {
  background: var(--c-selection-bg);
  color: var(--c-selection-fg);
}

img, svg, video, picture, canvas { display: block; max-width: 100%; height: auto; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button { background: none; border: none; cursor: pointer; }
a { color: var(--c-accent); text-decoration: none; }
a:hover, a:focus-visible { color: var(--c-accent-hover); }

:focus { outline: none; }
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-ring);
  border-radius: var(--radius-sm);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--c-scrollbar-thumb) var(--c-scrollbar-track);
}
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: var(--c-scrollbar-track); }
*::-webkit-scrollbar-thumb {
  background: var(--c-scrollbar-thumb);
  border-radius: var(--radius-pill);
}
*::-webkit-scrollbar-thumb:hover { background: var(--c-scrollbar-thumb-hover); }

/* ===================== 2. Typography 全局 ===================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--c-text-primary);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
}
h1 { font-size: var(--fs-h1); letter-spacing: var(--ls-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { margin: 0; }
p + p { margin-top: var(--space-3); }

small, .text-caption { font-size: var(--fs-caption); color: var(--c-text-secondary); }
.text-micro { font-size: var(--fs-micro); letter-spacing: var(--ls-micro); text-transform: uppercase; color: var(--c-text-tertiary); }
.text-muted { color: var(--c-text-tertiary); }
.text-secondary { color: var(--c-text-secondary); }
.text-accent { color: var(--c-accent); }
.text-gold { color: var(--c-gold-text); }
.text-success { color: var(--c-success-text); }
.text-warning { color: var(--c-warning-text); }
.text-danger { color: var(--c-danger-text); }
.text-info { color: var(--c-info-text); }

.text-mono { font-family: var(--font-mono); font-feature-settings: "ss01", "zero"; }
.text-serif { font-family: var(--font-serif); }
.text-xs { font-size: var(--fs-xs); }
.text-sm { font-size: var(--fs-sm); }
.text-md { font-size: var(--fs-md); }
.text-lg { font-size: var(--fs-lg); }
.text-tabular { font-variant-numeric: tabular-nums; }

.eyebrow {
  display: inline-block;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--c-text-tertiary);
  margin-bottom: var(--space-2);
}

code, kbd, pre, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
code {
  padding: 0.1em 0.32em;
  border-radius: var(--radius-xs);
  background: var(--c-glass);
  color: var(--c-text-primary);
}
pre {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--c-surface);
  border: 1px solid var(--c-border-subtle);
  overflow-x: auto;
  line-height: var(--lh-snug);
}
pre code { padding: 0; background: none; }

hr { border: none; border-top: 1px solid var(--c-divider); margin: var(--space-6) 0; }

/* ===================== 3. Layout 容器 ===================== */

.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
}
.container-wide { max-width: var(--content-max-wide); }
.container-full { max-width: none; }

main.main {
  padding-top: var(--space-4);
  padding-bottom: var(--bottom-safe-pad);
  min-height: calc(100dvh - var(--topbar-height));
}

/* ===================== 4. 顶栏（玻璃磨砂） ===================== */

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--gutter);
  padding-top: env(safe-area-inset-top, 0);
  height: calc(var(--topbar-height) + env(safe-area-inset-top, 0));
  background: color-mix(in srgb, var(--c-bg) 75%, transparent);
  backdrop-filter: saturate(180%) blur(var(--blur-lg));
  -webkit-backdrop-filter: saturate(180%) blur(var(--blur-lg));
  border-bottom: 1px solid var(--c-border-subtle);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  flex: 1;
}
.brand a {
  color: var(--c-text-primary);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  letter-spacing: var(--ls-heading);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* 品牌统一为设计版 “B” 徽标（所有屏幕）：隐藏 logo + wordmark，仅显示 B */
.brand-mark,
.brand-text { display: none; }

.brand-b {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 1.1rem;
  line-height: 1;
  letter-spacing: 0;
  color: var(--c-bg);
  background: linear-gradient(135deg, var(--c-accent-hover), var(--c-accent));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 1px 2px rgba(0, 0, 0, .28);
}

.topbar-actions { display: flex; align-items: center; gap: var(--space-1); }

.icon-btn {
  width: var(--touch-target);
  height: var(--touch-target);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--c-text-secondary);
  transition: background var(--dur-fast) var(--ease-out-quart),
              color var(--dur-fast) var(--ease-out-quart),
              transform var(--dur-fast) var(--ease-out-quart);
}
.icon-btn:hover { background: var(--c-glass-strong); color: var(--c-text-primary); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn:focus-visible {
  background: var(--c-glass-strong);
  box-shadow: var(--shadow-focus-ring);
}

/* ===================== 5. 底部 Tab Bar + 浮起 CTA ===================== */

.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-tabbar);
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  padding-bottom: env(safe-area-inset-bottom, 0);
  height: calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0));
  background: color-mix(in srgb, var(--c-bg) 80%, transparent);
  backdrop-filter: saturate(180%) blur(var(--blur-lg));
  -webkit-backdrop-filter: saturate(180%) blur(var(--blur-lg));
  border-top: 1px solid var(--c-border-subtle);
}

.tabbar-item {
  flex: 1 0 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--c-text-tertiary);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-caption);
  font-weight: var(--fw-medium);
  padding: var(--space-2) var(--space-1);
  min-width: 0;
  position: relative;
  transition: color var(--dur-fast) var(--ease-out-quart),
              transform var(--dur-fast) var(--ease-out-quart);
  text-decoration: none;
}
.tabbar-item svg { width: 22px; height: 22px; }
.tabbar-item span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.tabbar-item.is-active { color: var(--c-text-primary); }
.tabbar-item.is-active::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 22px; height: 2px;
  background: var(--c-accent);
  border-radius: var(--radius-pill);
}
.tabbar-item:active { transform: scale(0.92); }
.tabbar-item:focus-visible { color: var(--c-text-primary); }

/* 中央 + 号创建盘口：固定在底部导航栏内（不再浮空 FAB） */
.tabbar-center-action {
  justify-content: center;
}
.tabbar-center-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-circle);
  background: linear-gradient(180deg, var(--c-accent-hover), var(--c-accent));
  color: var(--c-text-inverse);
  box-shadow: var(--shadow-glow-accent), var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-spring),
              box-shadow var(--dur-fast) var(--ease-out-quart);
}
.tabbar-center-plus svg { width: 26px; height: 26px; }
.tabbar-center-action:active .tabbar-center-plus { transform: scale(0.9); }
.tabbar-center-action:focus-visible .tabbar-center-plus {
  box-shadow: var(--shadow-focus-ring), var(--shadow-sm);
}
/* 中央按钮已是 CTA，不显示底部 active 下划线 */
.tabbar-center-action.is-active::after { display: none; }

/* ===================== 6. Forms / Inputs ===================== */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.field-row { display: flex; gap: var(--space-3); flex-wrap: wrap; }

label, .label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-text-secondary);
  letter-spacing: var(--ls-caption);
}

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], input[type="url"], input[type="tel"], input[type="date"],
input[type="datetime-local"], select, textarea {
  width: 100%;
  min-height: var(--touch-target);
  padding: var(--space-3) var(--space-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border-default);
  border-radius: var(--radius-md);
  color: var(--c-text-primary);
  font-size: var(--fs-md);
  letter-spacing: var(--ls-body);
  transition: border-color var(--dur-fast) var(--ease-out-quart),
              background var(--dur-fast) var(--ease-out-quart),
              box-shadow var(--dur-fast) var(--ease-out-quart);
}
input::placeholder, textarea::placeholder { color: var(--c-text-muted); }
input:hover, select:hover, textarea:hover { border-color: var(--c-border-strong); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--c-accent);
  background: var(--c-bg-elevated);
  box-shadow: var(--shadow-focus-ring);
}
input:disabled, select:disabled, textarea:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}
textarea { resize: vertical; min-height: 96px; line-height: var(--lh-base); }

input[inputmode="numeric"], input[inputmode="decimal"] {
  font-variant-numeric: tabular-nums;
}

/* ===================== 7. Buttons ===================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-target);
  height: auto;                     /* 随文案增高（min-height 只是下限），长语言换行不被裁 */
  padding: var(--space-1) var(--space-5);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-body);
  /* i18n 健壮：允许换行 + 断长词 + 居中，避免德/俄/法等长文案被 overflow:hidden 截断 */
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
  line-height: var(--lh-snug);
  color: var(--c-text-inverse);
  background: linear-gradient(180deg, var(--c-accent-hover), var(--c-accent));
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-spring-soft),
              background var(--dur-fast) var(--ease-out-quart),
              box-shadow var(--dur-fast) var(--ease-out-quart);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.btn:hover { background: linear-gradient(180deg, var(--c-accent), var(--c-accent-pressed)); }
.btn:active { transform: scale(0.97); box-shadow: none; }
.btn:focus-visible { box-shadow: var(--shadow-focus-ring); }
.btn:disabled { opacity: var(--opacity-disabled); pointer-events: none; }
.btn svg { width: 18px; height: 18px; }

.btn-secondary {
  background: var(--c-glass-strong);
  color: var(--c-text-primary);
  border-color: var(--c-border-default);
}
.btn-secondary:hover { background: var(--c-glass-strong); border-color: var(--c-border-strong); }

.btn-ghost {
  background: transparent;
  color: var(--c-text-primary);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--c-glass); border-color: var(--c-border-default); }

.btn-danger {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--c-danger) 110%, white 10%),
    var(--c-danger));
}
.btn-danger:hover { background: var(--c-danger); }
.btn-danger:focus-visible { box-shadow: var(--shadow-focus-ring-danger); }

.btn-link {
  background: transparent;
  color: var(--c-accent);
  padding: 0 var(--space-2);
  min-height: auto;
  font-weight: var(--fw-medium);
  box-shadow: none;
}
.btn-link:hover { color: var(--c-accent-hover); background: transparent; }
.btn-link:active { transform: none; }

.btn-sm { min-height: 36px; padding: var(--space-1) var(--space-3); font-size: var(--fs-sm); border-radius: var(--radius-sm); }
.btn-xs { min-height: 30px; padding: var(--space-0-5) var(--space-2); font-size: var(--fs-xs); border-radius: var(--radius-sm); gap: var(--space-1); }
/* 金色变体（次强调 CTA） */
.btn-gold { background: var(--c-gold); color: var(--c-text-inverse); border-color: var(--c-gold); }
.btn-gold:hover { background: var(--c-gold-text); border-color: var(--c-gold-text); }
/* 描边变体（低强调） */
.btn-outlined { background: transparent; color: var(--c-text-primary); border-color: var(--c-border-strong); }
.btn-outlined:hover { background: var(--c-glass); border-color: var(--c-border-emphasis); }

/* Inline checkbox — 视觉 16×16 但保持 WCAG 2.5.5 44px hit region。
   配合 <label class="checkbox-row"> 让 label 整体 ≥44px 可点。 */
.checkbox-inline {
  width: 16px;
  height: 16px;
  min-height: auto;
  margin: 0;
  flex-shrink: 0;
}
label.checkbox-row {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  min-height: var(--touch-target);
  padding-block: var(--space-2);
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--c-text-secondary);
  font-weight: var(--fw-regular);
}
.btn-lg { min-height: 52px; padding: 0 var(--space-6); font-size: var(--fs-lg); border-radius: var(--radius-lg); }
.btn-block { width: 100%; }
.btn-icon {
  width: var(--touch-target);
  height: var(--touch-target);
  padding: 0;
  border-radius: var(--radius-pill);
}

/* ===================== 8. Cards ===================== */

.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-xs);
  position: relative;
}
.card-elevated { background: var(--c-surface-2); box-shadow: var(--shadow-md); }
.card-flat { background: transparent; border-color: var(--c-border-default); box-shadow: none; }
.card-glass {
  background: var(--c-glass-strong);
  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
  border-color: var(--c-border-default);
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.card-title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-heading);
  color: var(--c-text-primary);
}
.card-subtitle {
  font-size: var(--fs-sm);
  color: var(--c-text-secondary);
  margin-top: var(--space-1);
}
.card-footer {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--c-divider);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* ===================== 9. utility ===================== */

.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.grid { display: grid; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.w-full { width: 100%; }
.h-full { height: 100%; }
.block { display: block; }
.inline-block { display: inline-block; }
.hidden { display: none; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
/* RTL-aware 别名（推荐使用 start/end 替代 left/right） */
.text-start { text-align: start; }
.text-end { text-align: end; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-pill { border-radius: var(--radius-pill); }
.border { border: 1px solid var(--c-border-default); }
.border-b { border-bottom: 1px solid var(--c-border-default); }
.overflow-hidden { overflow: hidden; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===================== 10. 旧主题兼容（旧模板能降级显示） ===================== */

/* 旧 base.html 的旧 nav / toggle 元素 — 我们的新 base.html 不会渲染它们，
   但为了避免某些被 extends 的页面遗漏，加默认隐藏 */
.nav-toggle-label, #nav-toggle, .nav-collapse { display: none; }