/* =============================================================
   v54 — Design System Overlay
   按设计书重做：色板、字号、行距、卡片质感、暗黑模式、微交互
   加载顺序：style → v53_japandi → v53_extras → v53_navtip → v54
   全部以高优先级选择器或 :root[data-theme] 覆盖，不破坏旧版 DOM
   ============================================================= */

/* ---------- 字体（Webfont） ---------- */
/* 霞鹜文楷：来自 chinese-fonts-CDN（jsdelivr 镜像） */
@font-face {
  font-family: 'LXGW WenKai';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/npm/lxgw-wenkai-webfont@1.7.0/lxgwwenkai-regular.woff2') format('woff2');
}
/* Crimson Text + Inter 由 <link> 在 head 预连接 */

/* ============================================================
   一、Tokens —— 高端米色系（最高优先级）
   ============================================================ */
:root,
:root[data-theme="light"] {
  /* 背景 */
  --bg-page:    #F8F5F0;   /* 暖米白 */
  --bg-card:    #FDFBF6;   /* 卡纸面 */
  --bg-soft:    #EDE7E0;   /* 极浅灰米 */
  --bg-elevate: #F2EDE4;   /* 抽屉/浮层 */

  /* 墨色文字 */
  --ink-1: #1F1F1F;        /* 主标题 */
  --ink-2: #2C2C2C;        /* 正文 */
  --ink-3: #5A524A;        /* 次级 */
  --ink-4: #8B8275;        /* 注脚 / 时间 */
  --ink-5: #B8B0A3;        /* 最弱（分割线） */

  /* 强调 */
  --accent-tea:    #4A3728;   /* 深茶褐 — 主标题点缀、按钮 */
  --accent-dark:   #5C2C2C;   /* 暗红 — 朱砂印章、私信红点 */
  --accent-bleed:  rgba(74, 55, 40, 0.08);  /* hover 墨晕 */

  /* 节气强调（春） */
  --season-spring: #6B7F5C;   /* 嫩绿 */
  --season-summer: #5F6B5A;   /* 竹影 */
  --season-autumn: #A8201A;   /* 枫红 */
  --season-winter: #C5C0B6;   /* 雪白偏冷 */
  --season-current: var(--season-spring);

  /* 字体 */
  --f-serif-cn: 'LXGW WenKai', '霞鹜文楷', 'Source Han Serif SC',
                'Noto Serif SC', 'Songti SC', '宋体', serif;
  --f-sans-cn:  'LXGW WenKai', 'PingFang SC', 'Microsoft YaHei',
                'Source Han Sans SC', sans-serif;
  --f-serif-en: 'Crimson Text', 'Cormorant Garamond', Georgia, serif;
  --f-sans-en:  'Inter', system-ui, -apple-system, sans-serif;

  /* 阴影 / 描边 */
  --hairline: 1px solid rgba(60,50,40,0.08);
  --hairline-strong: 1px solid rgba(60,50,40,0.16);
  --shadow-paper: 0 1px 2px rgba(60,50,40,0.04),
                  inset 0 0 60px rgba(255,250,240,0.6);
  --shadow-hover: 0 6px 24px rgba(60,50,40,0.06),
                  0 2px 6px rgba(60,50,40,0.04);

  /* 缓动 */
  --ease: cubic-bezier(.22,.61,.36,1);
  --d1: 200ms;
  --d2: 320ms;
}

:root[data-theme="dark"] {
  --bg-page:    #1C1814;
  --bg-card:    #221E19;
  --bg-soft:    #2A2520;
  --bg-elevate: #2F2A24;

  --ink-1: #F2EADC;
  --ink-2: #E8E1D2;
  --ink-3: #BFB6A6;
  --ink-4: #8B8275;
  --ink-5: #4A4239;

  --accent-tea:   #C9A475;
  --accent-dark:  #C44A3F;
  --accent-bleed: rgba(201,164,117,0.10);

  --hairline: 1px solid rgba(232,225,210,0.08);
  --hairline-strong: 1px solid rgba(232,225,210,0.18);
  --shadow-paper: 0 1px 2px rgba(0,0,0,0.4),
                  inset 0 0 60px rgba(255,250,240,0.02);
  --shadow-hover: 0 6px 24px rgba(0,0,0,0.5),
                  0 2px 6px rgba(0,0,0,0.3);
}

/* ============================================================
   二、纸张噪点底（极轻，作为整页背景，单点渲染） 
   ============================================================ */
html, body {
  background-color: var(--bg-page) !important;
  color: var(--ink-2) !important;
  font-family: var(--f-serif-cn) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  /* 纸纹噪点：用 SVG fractal noise 内联（极淡） */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.18  0 0 0 0 0.16  0 0 0 0 0.13  0 0 0 0.025 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: .55;
  mix-blend-mode: multiply;
}
:root[data-theme="dark"] body::before {
  opacity: .35;
  mix-blend-mode: screen;
}

/* 让 .app 浮在噪点之上 */
.app { position: relative; z-index: 1; }

/* ============================================================
   三、排版（核心竞争力）
   ============================================================ */

/* brand */
.brand-name {
  font-family: var(--f-serif-en) !important;
  font-weight: 500 !important;
  letter-spacing: .12em !important;
  color: var(--ink-1) !important;
  font-size: 22px !important;
}
.brand-cn {
  font-family: var(--f-serif-cn) !important;
  color: var(--ink-1) !important;
  font-weight: 500 !important;
  letter-spacing: .25em !important;
  font-size: 18px !important;
}
.brand-meta {
  font-family: var(--f-serif-cn) !important;
  color: var(--ink-4) !important;
  letter-spacing: .15em !important;
  font-size: 12px !important;
  font-style: normal !important;
}

/* hero —— 占屏 70vh，超大留白 */
.hero {
  min-height: 70vh !important;
  padding: 12vh 4vw 10vh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  border-bottom: var(--hairline) !important;
  background: transparent !important;
  position: relative;
}
/* hero 背景：极淡水墨晕 */
.hero::after {
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 70% at 85% 30%, var(--accent-bleed), transparent 70%),
    radial-gradient(ellipse 50% 60% at 15% 85%, rgba(107,127,92,0.06), transparent 70%);
  pointer-events:none;
  z-index:-1;
}
.hero-eyebrow {
  font-family: var(--f-serif-cn) !important;
  font-size: 12.5px !important;
  letter-spacing: .42em !important;
  color: var(--ink-4) !important;
  margin-bottom: 28px !important;
  font-weight: 400 !important;
}
.hero-title {
  font-family: var(--f-serif-cn) !important;
  font-size: clamp(38px, 5.6vw, 68px) !important;
  line-height: 1.45 !important;
  letter-spacing: .04em !important;
  color: var(--ink-1) !important;
  font-weight: 500 !important;
  margin: 0 0 36px !important;
  max-width: 22ch;
}
.hero-title em {
  font-style: normal !important;
  color: var(--accent-tea) !important;
  position: relative;
}
.hero-title em::after {
  content:"";
  position:absolute; left:0; right:0; bottom:-4px;
  height:1px;
  background: var(--accent-tea);
  opacity:.4;
}
.hero-sub {
  font-family: var(--f-serif-cn) !important;
  font-size: 15.5px !important;
  line-height: 2.1 !important;
  letter-spacing: .08em !important;
  color: var(--ink-3) !important;
  max-width: 38ch;
  margin: 0 0 40px !important;
}
.hero-sign {
  font-family: var(--f-serif-cn) !important;
  font-size: 13px !important;
  letter-spacing: .25em !important;
  color: var(--ink-4) !important;
  padding-top: 18px;
  border-top: var(--hairline);
  display: inline-block;
  align-self: flex-start;
}

/* section title */
.section-head {
  border-bottom: var(--hairline) !important;
  padding-bottom: 16px !important;
  margin: 28px 4vw 28px !important;
}
.section-title {
  font-family: var(--f-serif-cn) !important;
  font-size: 22px !important;
  letter-spacing: .3em !important;
  color: var(--ink-1) !important;
  font-weight: 500 !important;
}
.section-title em {
  font-style: normal !important;
  color: var(--ink-4) !important;
  font-size: 13px !important;
  letter-spacing: .25em !important;
  margin-left: 8px;
}
.section-action {
  font-family: var(--f-serif-cn) !important;
  font-size: 12px !important;
  letter-spacing: .35em !important;
  color: var(--ink-3) !important;
  cursor: pointer;
  transition: color var(--d1) var(--ease), transform var(--d1) var(--ease);
}
.section-action:hover {
  color: var(--accent-tea) !important;
  transform: translateY(-1px);
}

/* ============================================================
   四、卡片 — 纸纹 + 极淡内阴影 + hover 浮起
   ============================================================ */
.post {
  background: var(--bg-card) !important;
  border: var(--hairline) !important;
  border-radius: 2px !important;   /* 杂志感：方角 */
  padding: 36px 38px !important;
  margin: 0 4vw 28px !important;
  box-shadow: var(--shadow-paper) !important;
  position: relative;
  transition: box-shadow var(--d2) var(--ease),
              transform var(--d2) var(--ease),
              border-color var(--d2) var(--ease);
}
.post::before {
  /* 纸张噪点（卡片内单独一层，更细腻） */
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.4  0 0 0 0 0.35  0 0 0 0 0.28  0 0 0 0.018 0'/></filter><rect width='100%25' height='100%25' filter='url(%23p)'/></svg>");
  border-radius: inherit;
  opacity:.6;
}
.post:hover {
  box-shadow: var(--shadow-hover) !important;
  transform: translateY(-2px);
  border-color: rgba(60,50,40,0.14) !important;
}
.post > * { position: relative; z-index: 1; }

.post-author {
  font-family: var(--f-serif-cn) !important;
  color: var(--ink-1) !important;
  font-size: 17px !important;
  letter-spacing: .12em !important;
  font-weight: 500 !important;
}
.post-handle {
  font-family: var(--f-serif-cn) !important;
  color: var(--ink-4) !important;
  font-size: 12px !important;
  letter-spacing: .18em !important;
  margin-left: 8px;
}
.post-time {
  font-family: var(--f-serif-cn) !important;
  color: var(--ink-4) !important;
  font-size: 11.5px !important;
  letter-spacing: .25em !important;
  margin-top: 4px;
}
.post-body p {
  font-family: var(--f-serif-cn) !important;
  font-size: 16px !important;
  line-height: 2.0 !important;
  letter-spacing: .045em !important;
  color: var(--ink-2) !important;
  margin: 0 0 14px !important;
}
.post-quote {
  font-family: var(--f-serif-cn) !important;
  border-left: 2px solid var(--accent-tea) !important;
  padding: 4px 0 4px 16px !important;
  color: var(--ink-3) !important;
  font-size: 14.5px !important;
  line-height: 1.95 !important;
  letter-spacing: .06em !important;
  margin: 18px 0 !important;
  background: transparent !important;
  font-style: normal !important;
}
.post-sign {
  color: var(--ink-4) !important;
  font-size: 13.5px !important;
  letter-spacing: .15em !important;
  margin-top: 6px !important;
}
.post-image {
  margin: 22px -8px 18px !important;
  border-radius: 2px !important;
  height: 240px !important;
  background:
    linear-gradient(135deg, rgba(74,55,40,0.10), rgba(95,107,90,0.10)),
    repeating-linear-gradient(45deg, rgba(74,55,40,0.04) 0 2px, transparent 2px 8px) !important;
  border: var(--hairline) !important;
  position: relative;
}
.post-image::after {
  content: "壹 帧";
  font-family: var(--f-serif-cn);
  position: absolute; right: 14px; bottom: 12px;
  font-size: 11px; letter-spacing: .3em;
  color: var(--ink-4);
}
.post-foot {
  border-top: var(--hairline) !important;
  padding-top: 16px !important;
  margin-top: 22px !important;
  font-family: var(--f-serif-cn) !important;
  font-size: 12.5px !important;
  letter-spacing: .25em !important;
  color: var(--ink-3) !important;
  display: flex !important;
  gap: 28px !important;
  align-items: center;
}
.post-foot span {
  cursor: pointer;
  transition: color var(--d1) var(--ease), transform var(--d1) var(--ease);
  position: relative;
}
.post-foot span::after {
  /* hover 墨晕：极轻 */
  content: ""; position: absolute;
  left: 50%; bottom: -6px;
  transform: translateX(-50%) scaleX(0);
  width: 80%; height: 1px;
  background: var(--accent-tea);
  transition: transform var(--d1) var(--ease);
  transform-origin: center;
}
.post-foot span:hover {
  color: var(--accent-tea) !important;
  transform: translateY(-1px);
}
.post-foot span:hover::after { transform: translateX(-50%) scaleX(1); }
.post-foot span strong {
  color: var(--ink-1) !important;
  font-weight: 500 !important;
  margin-right: 4px;
}
.post-foot-end { margin-left: auto; }

/* 已点赞态 */
.post-foot span.is-liked {
  color: var(--accent-dark) !important;
}
.post-foot span.is-liked strong { color: var(--accent-dark) !important; }

/* ============================================================
   五、左 sidebar
   ============================================================ */
.side-left {
  background: transparent !important;
  border-right: var(--hairline) !important;
  padding: 4vh 28px 4vh !important;
}
.nav-label {
  font-family: var(--f-serif-cn) !important;
  font-size: 11.5px !important;
  letter-spacing: .42em !important;
  color: var(--ink-4) !important;
  margin: 28px 0 14px !important;
  padding-bottom: 10px;
  border-bottom: var(--hairline);
  font-weight: 500 !important;
}
.nav-list { list-style: none; padding: 0; margin: 0; }
.nav-item {
  font-family: var(--f-serif-cn) !important;
  padding: 10px 0 !important;
  cursor: pointer;
  transition: padding var(--d1) var(--ease);
  position: relative;
}
.nav-item::before {
  content: "";
  position: absolute;
  left: -14px; top: 50%;
  width: 0; height: 1px;
  background: var(--accent-tea);
  transform: translateY(-50%);
  transition: width var(--d1) var(--ease);
}
.nav-item:hover::before,
.nav-item.active::before { width: 8px; }
.nav-item:hover { padding-left: 6px !important; }
.nav-cn {
  display: block;
  font-size: 15.5px !important;
  letter-spacing: .25em !important;
  color: var(--ink-2) !important;
  font-weight: 500 !important;
}
.nav-item.active .nav-cn { color: var(--accent-tea) !important; }
.nav-tip {
  display: block !important;
  font-family: var(--f-serif-cn) !important;
  font-size: 11px !important;
  letter-spacing: .22em !important;
  color: var(--ink-4) !important;
  margin-top: 4px !important;
  font-weight: 400 !important;
  opacity: .9;
}
.nav-tip-num {
  color: var(--accent-dark) !important;
  font-weight: 500 !important;
  opacity: 1;
}

/* me-card */
.me-card {
  margin-top: 36px !important;
  padding: 24px 18px !important;
  background: var(--bg-soft) !important;
  border: var(--hairline) !important;
  border-radius: 2px !important;
  text-align: center;
}
.me-flower { width: 56px; height: 56px; }
.me-flower g { stroke: var(--ink-2) !important; }
.me-name {
  font-family: var(--f-serif-cn) !important;
  font-size: 16px !important;
  letter-spacing: .25em !important;
  color: var(--ink-1) !important;
  margin-top: 8px;
  font-weight: 500;
}
.me-handle {
  font-family: var(--f-serif-cn) !important;
  font-size: 11.5px !important;
  letter-spacing: .25em !important;
  color: var(--ink-4) !important;
  margin-top: 4px;
}
.me-stats {
  margin-top: 16px;
  display: flex; justify-content: space-around;
  font-family: var(--f-serif-cn);
  font-size: 12px;
  letter-spacing: .15em;
  color: var(--ink-3);
}
.me-stats strong {
  display: block;
  color: var(--ink-1) !important;
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 2px;
}

/* ============================================================
   六、右 aside
   ============================================================ */
.side-right {
  background: transparent !important;
  border-left: var(--hairline) !important;
  padding: 4vh 28px !important;
}
.aside-label {
  font-family: var(--f-serif-cn) !important;
  font-size: 11.5px !important;
  letter-spacing: .42em !important;
  color: var(--ink-4) !important;
  margin-bottom: 18px !important;
  padding-bottom: 10px;
  border-bottom: var(--hairline);
}
.aside-section { margin-bottom: 36px; }

/* 卦签 */
.omen {
  background: var(--bg-card) !important;
  border: var(--hairline) !important;
  padding: 24px 22px !important;
  border-radius: 2px;
  position: relative;
  box-shadow: var(--shadow-paper);
}
.omen-date {
  font-family: var(--f-serif-cn);
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--ink-4);
  margin-bottom: 10px;
}
.omen-title {
  font-family: var(--f-serif-cn);
  font-size: 26px;
  letter-spacing: .3em;
  color: var(--ink-1);
  font-weight: 500;
  margin-bottom: 4px;
}
.omen-en {
  font-family: var(--f-serif-cn);
  font-size: 12px;
  letter-spacing: .3em;
  color: var(--accent-tea);
  margin-bottom: 14px;
}
.omen-body {
  font-family: var(--f-serif-cn);
  font-size: 13.5px;
  line-height: 2.0;
  letter-spacing: .06em;
  color: var(--ink-3);
}
.omen-stamp {
  position: absolute; right: 16px; bottom: 14px;
  width: 36px; height: 36px;
  opacity: .85;
}

/* 月相 */
.moon-row {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 0;
}
.moon-svg { width: 56px; height: 56px; }
.moon-name {
  font-family: var(--f-serif-cn);
  font-size: 16px; letter-spacing: .25em;
  color: var(--ink-1); font-weight: 500;
}
.moon-en {
  font-family: var(--f-serif-cn);
  font-size: 11.5px; letter-spacing: .3em;
  color: var(--accent-tea);
  margin-top: 2px;
}
.moon-meta {
  font-family: var(--f-serif-cn);
  font-size: 11px; letter-spacing: .2em;
  color: var(--ink-4); margin-top: 4px;
}

/* 在写 */
.online-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0;
  border-bottom: var(--hairline);
}
.online-row:last-child { border-bottom: none; }
.online-flower { width: 36px; height: 36px; flex-shrink: 0; }
.online-name {
  font-family: var(--f-serif-cn);
  font-size: 14px; letter-spacing: .15em;
  color: var(--ink-2); font-weight: 500;
}
.online-msg {
  font-family: var(--f-serif-cn);
  font-size: 11.5px; letter-spacing: .15em;
  color: var(--ink-4); margin-top: 2px;
}
.online-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--season-current);
  margin-left: auto;
  box-shadow: 0 0 0 2px rgba(107,127,92,0.15);
}

/* ============================================================
   七、按钮 / 表单 / 浮层（全部去边框，hover 墨晕）
   ============================================================ */
.btn-primary,
.btn-enter,
.btn-ghost,
button.code-send {
  font-family: var(--f-serif-cn) !important;
  letter-spacing: .25em !important;
  border-radius: 0 !important;
  font-weight: 500 !important;
  position: relative;
  transition: color var(--d1) var(--ease),
              background var(--d1) var(--ease),
              transform var(--d1) var(--ease);
}
.btn-primary {
  background: var(--accent-tea) !important;
  color: var(--bg-page) !important;
  border: none !important;
  padding: 14px 32px !important;
  font-size: 13px !important;
}
.btn-primary:hover {
  background: var(--ink-1) !important;
  transform: translateY(-1px);
}
.btn-ghost {
  background: transparent !important;
  color: var(--ink-3) !important;
  border: 1px solid var(--ink-5) !important;
  padding: 13px 28px !important;
  font-size: 13px !important;
}
.btn-ghost:hover {
  color: var(--accent-tea) !important;
  border-color: var(--accent-tea) !important;
}
.btn-enter.vermilion {
  background: var(--accent-dark) !important;
  color: var(--bg-page) !important;
  border: none !important;
  padding: 11px 24px !important;
  font-size: 12.5px !important;
  letter-spacing: .3em !important;
}
.btn-enter.vermilion:hover {
  background: var(--ink-1) !important;
  transform: translateY(-1px);
}

/* code 输入按钮 */
button.code-send {
  background: transparent !important;
  color: var(--accent-tea) !important;
  border: 1px solid var(--accent-tea) !important;
  padding: 10px 16px !important;
  font-size: 12px !important;
}
button.code-send:hover { background: var(--accent-bleed) !important; }
button.code-send:disabled {
  color: var(--ink-4) !important;
  border-color: var(--ink-5) !important;
  background: transparent !important;
}

/* 输入框 */
input[type=tel], input[type=text], textarea {
  font-family: var(--f-serif-cn) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--ink-5) !important;
  border-radius: 0 !important;
  color: var(--ink-1) !important;
  padding: 10px 0 !important;
  font-size: 14.5px !important;
  letter-spacing: .1em !important;
  transition: border-color var(--d1) var(--ease);
  width: 100%;
}
textarea {
  border: 1px solid var(--ink-5) !important;
  padding: 14px !important;
  line-height: 1.95 !important;
  resize: vertical;
  min-height: 120px;
}
input:focus, textarea:focus {
  outline: none !important;
  border-color: var(--accent-tea) !important;
}
input::placeholder, textarea::placeholder {
  color: var(--ink-4) !important;
  font-style: normal !important;
}

/* modal */
.modal-mask {
  background: rgba(28,24,20,0.45) !important;
  backdrop-filter: blur(2px);
}
.modal {
  background: var(--bg-card) !important;
  border: var(--hairline-strong) !important;
  border-radius: 2px !important;
  box-shadow: var(--shadow-hover) !important;
  position: relative;
}
.modal::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.4  0 0 0 0 0.35  0 0 0 0 0.28  0 0 0 0.022 0'/></filter><rect width='100%25' height='100%25' filter='url(%23p)'/></svg>");
}
.modal > * { position: relative; z-index: 1; }
.modal-title {
  font-family: var(--f-serif-cn) !important;
  color: var(--ink-1) !important;
  font-size: 28px !important;
  letter-spacing: .3em !important;
  font-weight: 500 !important;
}
.modal-eyebrow {
  font-family: var(--f-serif-cn) !important;
  color: var(--ink-4) !important;
  font-size: 11px !important;
  letter-spacing: .42em !important;
}
.modal-sub {
  font-family: var(--f-serif-cn) !important;
  color: var(--ink-3) !important;
  letter-spacing: .15em !important;
  font-size: 13px !important;
  line-height: 1.9 !important;
}
.modal-field label {
  font-family: var(--f-serif-cn);
  font-size: 11.5px;
  letter-spacing: .3em;
  color: var(--ink-4);
  display: block;
  margin-bottom: 6px;
}

/* ============================================================
   八、composer-bar / fab / chip
   ============================================================ */
.composer-bar {
  background: var(--bg-card) !important;
  border: var(--hairline) !important;
  border-radius: 2px !important;
  padding: 18px 24px !important;
  margin: 20px 4vw !important;
  cursor: pointer;
  display: flex; align-items: center; gap: 14px;
  transition: border-color var(--d1) var(--ease),
              background var(--d1) var(--ease),
              transform var(--d1) var(--ease);
}
.composer-bar:hover {
  border-color: var(--accent-tea) !important;
  transform: translateY(-1px);
}
.composer-bar svg { width: 32px; height: 32px; flex-shrink: 0; }
.composer-bar svg g { stroke: var(--ink-3) !important; }
.composer-bar .ph {
  flex: 1;
  font-family: var(--f-serif-cn);
  color: var(--ink-3);
  font-size: 14px;
  letter-spacing: .12em;
}
.composer-bar .ph em {
  font-style: normal;
  color: var(--accent-tea);
  margin-left: 8px;
  letter-spacing: .25em;
}
.composer-bar .pin {
  font-family: var(--f-serif-cn);
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: var(--accent-dark);
  color: var(--bg-page);
  border-radius: 2px;
  font-size: 14px; letter-spacing: 0;
}

.fab-write {
  position: fixed;
  right: 32px; bottom: 32px;
  width: 56px; height: 56px;
  background: var(--accent-tea) !important;
  color: var(--bg-page) !important;
  border: none !important;
  border-radius: 50% !important;
  font-family: var(--f-serif-cn) !important;
  font-size: 18px !important;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(74,55,40,0.30);
  transition: transform var(--d1) var(--ease), background var(--d1) var(--ease);
  z-index: 50;
}
.fab-write:hover {
  background: var(--ink-1) !important;
  transform: translateY(-2px) scale(1.04);
}

/* me-chip（顶部右） */
.me-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  font-family: var(--f-serif-cn);
  font-size: 13px; letter-spacing: .15em;
  color: var(--ink-2);
  border: var(--hairline);
  border-radius: 2px;
  background: var(--bg-card);
  cursor: pointer;
  transition: border-color var(--d1) var(--ease);
}
.me-chip:hover { border-color: var(--accent-tea); }
.me-chip svg { width: 22px; height: 22px; }
.me-chip svg g { stroke: var(--ink-2) !important; }
.me-chip .me-coin {
  color: var(--accent-dark);
  font-size: 12px; letter-spacing: .15em;
  margin-left: 6px;
}
.me-chip .arrow { color: var(--ink-4); font-size: 10px; margin-left: 4px; }

/* toast */
.toast {
  font-family: var(--f-serif-cn) !important;
  background: var(--ink-1) !important;
  color: var(--bg-page) !important;
  border-radius: 2px !important;
  letter-spacing: .15em !important;
  padding: 12px 22px !important;
  font-size: 13.5px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}
.toast.error { background: var(--accent-dark) !important; }
.toast.ok    { background: var(--accent-tea) !important; }

/* footer */
.footer {
  font-family: var(--f-serif-cn) !important;
  color: var(--ink-4) !important;
  border-top: var(--hairline) !important;
  padding: 36px 4vw !important;
  font-size: 12px !important;
  letter-spacing: .25em !important;
  text-align: center;
}
.footer-cn {
  color: var(--ink-2) !important;
  font-size: 14px !important;
  letter-spacing: .42em !important;
  margin: 8px 0;
}

/* ============================================================
   九、暗黑切换按钮（顶部）
   ============================================================ */
.theme-toggle {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: var(--hairline);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  margin-right: 14px;
  transition: border-color var(--d1) var(--ease),
              transform var(--d1) var(--ease);
  font-family: var(--f-serif-cn);
  color: var(--ink-3);
  font-size: 13px;
}
.theme-toggle:hover {
  border-color: var(--accent-tea);
  color: var(--accent-tea);
  transform: rotate(20deg);
}

.auth-area {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}

/* ============================================================
   十、移动端（< 980）— 单栏沉浸
   ============================================================ */
@media (max-width: 980px) {
  .app {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "brand"
      "main"
      "side-left"
      "side-right"
      "footer" !important;
  }
  .side-left, .side-right {
    border: none !important;
    border-top: var(--hairline) !important;
    padding: 24px 5vw !important;
  }
  .hero { min-height: 50vh !important; padding: 8vh 5vw !important; }
  .hero-title { font-size: clamp(30px, 8vw, 44px) !important; }
  .post { padding: 24px 22px !important; margin: 0 5vw 20px !important; }
  .post-body p { font-size: 15.5px !important; line-height: 1.95 !important; }
  .composer-bar { margin: 16px 5vw !important; }
  .section-head { margin: 20px 5vw !important; }
}