/* ================= 个人资产台账 · 移动优先样式 ================= */
/* 遵循中国股市惯例：涨 = 红，跌 = 绿 */

:root {
  --bg: #f2f3f5;
  --card: #ffffff;
  --card-2: #fafbfc;
  --border: #e6e8eb;
  --border-strong: #d8dbe0;
  --text: #1a1d21;
  --text-2: #5b6270;
  --text-3: #9099a6;
  --accent: #2b6cff;
  --accent-soft: #eaf1ff;
  --up: #e0342b;      /* 涨：红 */
  --down: #16a34a;    /* 跌：绿 */
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 14px rgba(16, 24, 40, .05);
  --shadow-lg: 0 8px 40px rgba(16, 24, 40, .16);
  --radius: 14px;
  --radius-sm: 10px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body { padding-bottom: calc(64px + var(--safe-b)); }

h1, h2, h3 { margin: 0; font-weight: 600; }

button {
  font-family: inherit; font-size: inherit; cursor: pointer;
  border: none; background: none; color: inherit;
}

input, select, textarea {
  font-family: inherit; font-size: 16px; color: var(--text);
  width: 100%; padding: 10px 12px;
  background: #fff; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); outline: none;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none; appearance: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%235b6270' stroke-width='2' stroke-linecap='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px;
  padding-right: 32px;
}

.hidden { display: none !important; }

/* ---------------- 顶栏 ---------------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(242, 243, 245, .88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: 760px; margin: 0 auto;
  height: 52px; padding: 0 14px;
  display: flex; align-items: center; justify-content: space-between;
}
.brand { font-size: 17px; letter-spacing: .3px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#owner-name { border-bottom: 1px dashed transparent; transition: border-color .15s; }
.brand:hover #owner-name { border-bottom-color: var(--text-3); }
/* 改名提交中：名字淡一点，避免用户以为没反应又点一次 */
.brand.brand-busy #owner-name { opacity: .5; }
.brand-input {
  font: inherit; font-size: 17px; letter-spacing: .3px;
  width: 5.2em; max-width: 42vw; padding: 1px 4px;
  color: var(--text); background: #fff;
  border: 1px solid var(--accent); border-radius: 6px;
  outline: none;
}
.topbar-actions { display: flex; gap: 8px; }

.icon-btn {
  width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-2); background: #fff; border: 1px solid var(--border);
  transition: background .15s, color .15s, transform .1s;
}
.icon-btn:active { transform: scale(.93); }
.icon-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.icon-btn.spin svg { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------- 布局 ---------------- */
main { max-width: 760px; margin: 0 auto; padding: 12px 12px 20px; }
.view { animation: fade .22s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 15px;
  margin-bottom: 12px; box-shadow: var(--shadow);
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.card-head h2 { font-size: 15px; }

/* ---------------- 首页 ---------------- */
.home { display: flex; flex-direction: column; gap: 12px; position: relative; }
.home-inner {
  display: flex; flex-direction: column; gap: 12px;
  position: relative; z-index: 1;
}

/* ---- 总资产：英雄卡片（视觉焦点，比重最大） ----
   排版取「左主右辅 + 底部统计条」：每一层都是「一左一右」——
     层一 等级徽标 + 配文 …… 更新日期
     层二 总资产 …… ≈美元折算 / 巨额 / 较昨日变动
     层三 浅底统计条：成本 …… 累计盈亏
   对齐方式有变化（不再通篇左对齐，也不再整卡居中），纵向留白由 flex 摊到上下两处。 */
.hero-card {
  position: relative;
  display: flex; flex-direction: column;
  justify-content: space-between;   /* 三层的余量摊到上、下两处，不挤成一坨 */
  /* 高度标定（按实测的 iPhone 16 Pro 402×716 反解）：
       视口顶 → 卡片顶          65px（顶栏 53 + 页面 padding 12）
       卡片底 → 首张分类卡      90px（间隔 13 + 按钮行 53 + 间隔 24）
       底部导航 54px，分类卡 67px
     ⇒ 首屏露出卡数 = (标定值 − 209.6) / 67，取 306 时约 1.4 个（用户认可的「一个半」）。
     下限 277px 是为小屏（iPhone SE 可视 553px）兜底：卡片不高于 277 才能露出 1 个分类卡；
     主流屏（svh 626~766）仍在「svh−306」线性区，露出 1.46 个不变。
     第一条是兜底（不支持 svh 的旧浏览器），第二条才是自适应。 */
  min-height: 380px;
  min-height: clamp(277px, calc(100svh - 306px), 460px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 15px 16px 14px;
  box-shadow: var(--shadow);
  cursor: pointer;
  overflow: hidden;              /* 兜底裁切，保住圆角 */
  transition: transform .12s, box-shadow .15s;
}

.hero-card:active { transform: scale(.988); box-shadow: 0 1px 2px rgba(16,24,40,.06); }

/* ---- 等级水印（页面级） ----
   放在 body 上而不是总资产卡片内部，这样「总资产 + 子资产」整片区域共用一枚水印，
   并且 position: fixed 让它随页面滚动而固定在视口里（上下滑动时水印不动）。
   z-index 5：盖在正文内容之上、顶栏/底栏(50)与各种弹窗(100+)之下。 */
.page-wm {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;   /* 不用 inset，兼容更老的 Safari */
  z-index: 5;
  overflow: hidden; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
.page-wm span {
  font-size: min(88vw, 56vh);
  font-weight: 800; line-height: .86;
  letter-spacing: -.06em; white-space: nowrap;
  transform: rotate(-17deg) translate(10px, 0);
  user-select: none; -webkit-user-select: none;
  color: rgba(154,161,173,.04);
}
/* A9 及以上：整条彩虹渐变，用 background-clip 把渐变裁进字里 */
.page-wm span.rainbow {
  background: linear-gradient(115deg, #ff5f6d 0%, #ffc371 22%, #47e891 45%, #4facfe 68%, #b06ab3 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; opacity: .11;
}

/* 层一：徽标 + 配文（左） / 更新日期（右） */
.hero-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-shrink: 0;
}

.hero-grade {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 0;                  /* 允许配文在极窄屏被裁，而不是把日期挤出去 */
}
.grade-chip {
  font-size: 12px; font-weight: 700; color: #fff;
  padding: 2px 9px; border-radius: 7px; letter-spacing: .3px;
  background: var(--text-3); flex-shrink: 0;
}
.grade-chip.rainbow {
  background: linear-gradient(115deg, #ff5f6d, #ffc371 25%, #47e891 50%, #4facfe 75%, #b06ab3);
}
.grade-text {
  font-size: 12.5px; color: var(--text-2); font-weight: 500;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 层二：四行自上而下 —— 标签 → 巨额 → ≈美元 → 较昨日，
   用户实测：美元不该和「总资产」标签挤在同一行，得下移到金额正下方；
   较昨日也再往下挪，但仍落在底部成本条之上。 */
.hero-mid { display: flex; flex-direction: column; flex-shrink: 0; }
.hero-label {
  font-size: 12.5px; color: var(--text-3);
  letter-spacing: .18em; padding-left: .18em;   /* 补回末字多出的字间距 */
  margin-bottom: 9px;
}
.hero-amount {
  display: flex; align-items: baseline; gap: 3px;
  font-variant-numeric: tabular-nums; letter-spacing: -1px;
}
.hero-amount .cur { font-size: 25px; color: var(--text-2); font-weight: 500; }
/* 巨额字号随视口宽度走。iPhone 上的 SF Pro / PingFang 数字比 Windows 字体宽，
   实测 12.9vw（53px 上限）会溢出卡片右缘被裁（截图 x=1166 已超白卡边界），
   降到 11.7vw（47px 上限）留足余量；位数更多时逐级降档。 */
.hero-big { font-size: clamp(33px, 11.7vw, 47px); font-weight: 700; line-height: 1.08; }
.hero-big.s1 { font-size: clamp(28px, 9.8vw, 40px); }
.hero-big.s2 { font-size: clamp(23px, 8vw, 33px); }

.hero-usd {
  font-size: 13px; color: var(--text-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
  margin-top: 10px;
}
.approx { opacity: .75; margin-right: 1px; }

/* 较昨日变动：沿用详情页环形图中心那套「小箭头 + 较昨日 + 金额（百分比）」语言 */
.hero-chg {
  align-self: flex-start;
  display: inline-flex; align-items: baseline; gap: 4px;
  margin-top: 11px;
  font-size: 13px; font-weight: 550;
  font-variant-numeric: tabular-nums; color: var(--text-3);
}
.hero-chg .chg-arrow { font-size: 10.5px; }
.hero-chg .chg-label { font-weight: 400; }
.hero-chg .chg-amt { font-size: 15.5px; font-weight: 650; }
.hero-chg.up { color: var(--up); }
.hero-chg.down { color: var(--down); }

/* 层三：浅底统计条。带底色与圆角，给卡片一个「落点」，
   同时把成本 / 累计盈亏分成左右两格，行距也不再是通篇一个步调 */
.hero-foot {
  display: flex; align-items: flex-end; gap: 12px;
  flex-shrink: 0;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
}
.hf-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hf-cell-r { margin-left: auto; align-items: flex-end; text-align: right; }
.hf-label { font-size: 11.5px; color: var(--text-3); }
.hf-val {
  display: flex; align-items: center; gap: 4px;
  font-size: 16px; font-weight: 650;
  font-variant-numeric: tabular-nums; letter-spacing: -.2px;
}
.foot-arrow { display: flex; color: var(--text-3); }

/* 添加按钮 */
.add-card {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 15px;
  background: var(--card); border: 1px dashed var(--border-strong);
  border-radius: var(--radius); color: var(--accent);
  font-size: 14px; font-weight: 550;
  transition: background .15s, transform .1s, border-color .15s;
}
.add-card:active { transform: scale(.985); background: var(--accent-soft); border-color: var(--accent); }
.add-icon { display: flex; }

/* 「加一项资产」+「排序」同一行：左 4/5，右 1/5 */
.home-action-row {
  display: flex; align-items: stretch; gap: 9px;
}
.home-action-row .add-card { flex: 4 1 0; min-width: 0; }
.home-action-row .sort-btn-block {
  flex: 1 1 0; min-width: 0;
  /* 与 add-card 同高同圆角，视觉上是一对 */
  border-radius: var(--radius);
  border-style: dashed;
  justify-content: center;
  padding: 0 6px;
  font-size: 13px;
}
.home-action-row .sort-btn-block .sort-btn-text {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.home-sort-foot { display: flex; justify-content: flex-end; }
.home-sort-foot .link-btn.hidden { display: none !important; }

/* 极窄屏（如 iPhone SE）：排序按钮只剩图标 */
@media (max-width: 340px) {
  .home-action-row .sort-btn-block .sort-btn-text { display: none; }
  .home-action-row .add-card { font-size: 13px; }
}

/* 一级分类（手风琴） */
.cat-list { display: flex; flex-direction: column; gap: 9px; }

.cat-item {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden;
}
.cat-item.open { border-color: var(--border-strong); }

/* 分类行：两行结构（名称+金额 / 收益统计）。原来是「名称 / 金额 / 统计」三行，
   整卡 96px，比总资产卡片还抢眼；压成两行后约 64px，视觉比重让回给总资产模块。 */
.cat-row {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px; cursor: pointer;
  transition: background .15s;
}
.cat-row:active { background: var(--card-2); }
.cat-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
}
.cat-name-wrap { flex: 1; min-width: 0; }
.cat-top {
  display: flex; align-items: baseline; gap: 8px; min-width: 0;
}
.cat-name {
  font-size: 14.5px; font-weight: 600;
  display: flex; align-items: center; gap: 6px;
  min-width: 0; flex-shrink: 1;
}
.cat-name .cn-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-count {
  font-size: 10.5px; color: var(--text-3); font-weight: 400;
  background: var(--card-2); border: 1px solid var(--border);
  border-radius: 20px; padding: 0 6px; line-height: 15px; flex-shrink: 0;
}
.cat-sum {
  font-size: 15px; font-weight: 600; flex-shrink: 0; margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.cat-stats {
  display: flex; gap: 14px; margin-top: 3px;
  font-size: 11.5px; font-variant-numeric: tabular-nums;
}
.cat-stat { display: flex; align-items: center; gap: 4px; color: var(--text-3); }
.cat-stat b { font-weight: 550; }
.cat-stat b.up { color: var(--up); }
.cat-stat b.down { color: var(--down); }
.cat-stat b.flat { color: var(--text-2); }

.cat-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.cat-chev {
  color: var(--text-3); transition: transform .22s cubic-bezier(.4,0,.2,1);
  display: flex;
}
.cat-item.open .cat-chev { transform: rotate(90deg); }

/* 二级明细：折叠/展开用 display 切换，不用 grid-template-rows 的 0fr→1fr 过渡。
   原因：部分浏览器（含较旧的 iOS Safari / 部分 Chromium 版本）在动画
   grid-template-rows 时会把 1fr 解析成 0，表现为「点了分类但子项不出来」。
   display 切换在所有浏览器都可靠；而且布局立即到达最终位置，不会出现
   「刚展开就点、手指落在动画途中的空位」这种误触。 */
.cat-body { display: none; }
.cat-item.open .cat-body {
  display: block;
  animation: catBodyIn .2s ease both;
}
@keyframes catBodyIn {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: none; }
}
.cat-body-inner { padding: 0 10px; }
.cat-item.open .cat-body-inner { padding-bottom: 10px; }
.cat-body-inner .sub-item { box-shadow: none; background: var(--card-2); }

/* 子资产条目：单行紧凑，把视觉比重让给上方的总资产模块 */
.sub-list { display: flex; flex-direction: column; gap: 6px; }
.sub-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 9px 12px;
  cursor: pointer; transition: background .15s;
  margin-bottom: 6px;
}
.sub-item:last-child { margin-bottom: 0; }
.sub-item:active { background: #f0f2f5; }

/* 名称与类别细节挤在同一行：名称优先占位，细节空间不够时先被省略 */
.sub-name {
  flex: 1; min-width: 0;
  display: flex; align-items: baseline; gap: 7px;
  font-size: 13.5px; font-weight: 550;
}
.sub-name .nm {
  flex-shrink: 0; max-width: 62%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sub-meta {
  font-size: 11px; color: var(--text-3); font-weight: 400;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sub-right { text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; }
/* 资金类子项（流动现金等）没有涨跌概念，右侧变动区整块留白，不占位。
   只用 :empty —— 渲染时没内容就是真空元素，无需 :has()（旧版 Safari 不支持）。 */
.sub-right:empty { display: none; }
.sub-value { font-size: 13.5px; font-weight: 600; }
.sub-right .sub-chg {
  font-size: 12.5px; font-weight: 600; line-height: 1.3;
  display: flex; align-items: baseline; justify-content: flex-end; gap: 3px;
  white-space: nowrap;
}
/* 「当日」只做轻量提示：去掉边框与底色，避免子项显得拥挤 */
.chg-day-tag {
  font-size: 10px; font-weight: 400; color: var(--text-3); flex-shrink: 0;
}
.sub-chg.up { color: var(--up); }
.sub-chg.down { color: var(--down); }
.sub-chg.flat { color: var(--text-3); font-weight: 400; }

/* 多币种分组（现金 / 定存 / 理财 展开后） */
.cur-group { margin-bottom: 9px; }
.cur-group:last-child { margin-bottom: 0; }
.cur-group-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 3px 2px 6px; font-size: 11.5px;
}
.cur-group-name { color: var(--text-3); font-weight: 550; }
.cur-group-val {
  color: var(--text-3); font-variant-numeric: tabular-nums;
}

.cat-empty {
  text-align: center; padding: 14px; color: var(--text-3); font-size: 12.5px;
}

.sub-empty {
  text-align: center; padding: 34px 20px;
  color: var(--text-3); font-size: 13px; line-height: 1.7;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* 置顶排序（按钮在右侧） */
.pin-btn {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; width: 26px; height: 26px;
  margin-left: 8px; padding: 0;
  background: var(--card-2); border: 1px solid var(--border);
  border-radius: 7px; color: var(--text-3);
  cursor: pointer; transition: all .15s;
  -webkit-tap-highlight-color: transparent;
}
/* hover 只在支持真 hover 的指针设备上生效；
   触屏点按后 :hover 会「粘住」不放，导致置顶按钮变色不消失 */
@media (hover: hover) and (pointer: fine) {
  .pin-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
}
.pin-btn:active { transform: scale(.9); }
/* 点完一闪即恢复：给出「点到了」的反馈，又不残留高亮 */
@keyframes pinFlash {
  0%   { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
  100% { color: var(--text-3); border-color: var(--border); background: var(--card-2); }
}
.pin-btn.pin-flash { animation: pinFlash .45s ease-out; }
.pin-btn.sm { width: 23px; height: 23px; border-radius: 6px; }
.pin-btn.sm svg { width: 12px; height: 12px; }

/* 默认隐藏置顶箭头，只有进入「排序模式」后才出现，保持界面清爽 */
.pin-btn { display: none; }
body.sorting .pin-btn { display: flex; }
/* 排序模式下给行留出一点右侧空间感 */
body.sorting .sub-item, body.sorting .cat-row, body.sorting .asset { background-image: none; }

/* 排序按钮 */
.sort-bar, .home-sort-bar {
  display: flex; align-items: center; gap: 8px; margin-bottom: 11px;
}
.sort-bar .link-btn, .home-sort-bar .link-btn { margin-left: auto; }
.home-sort-bar .link-btn { margin-left: 0; }
.sort-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 8px;
  background: var(--card); border: 1px solid var(--border);
  color: var(--text-2); font-size: 12.5px; font-weight: 550;
  cursor: pointer; transition: all .15s;
  -webkit-tap-highlight-color: transparent;
}
.sort-btn:active { transform: scale(.96); }
.sort-btn[data-sorting="1"] {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
/* 首页与加号并排的排序按钮：切到「完成」时边框也变实，避免虚线残留 */
.home-action-row .sort-btn-block[data-sorting="1"] { border-style: solid; }
.sort-hint {
  font-size: 11.5px; color: var(--text-3); line-height: 1.5;
  margin: -4px 0 8px;
}
.sort-hint b { color: var(--accent); font-weight: 600; }
/* 提示里的置顶图标：与行内按钮同一个图形（上横 + 上箭头），对齐基线 */
.sort-hint .hint-pin {
  color: var(--accent);
  vertical-align: -2px;
  margin: 0 1px;
}
.home-sort-foot + .sort-hint { text-align: right; }

.link-btn {
  background: none; border: none; padding: 4px 2px;
  color: var(--accent); font-size: 12.5px; font-weight: 550;
  cursor: pointer; white-space: nowrap;
}

/* ---------------- 详情页辅助 ---------------- */
.hero-date { font-size: 11.5px; color: var(--text-3); opacity: .8; }
.detail-date { font-size: 11.5px; color: var(--text-3); }

.up { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--text-2); }

/* ---------------- 走势图 ---------------- */
.chart-wrap { position: relative; height: 168px; }
#chart { width: 100%; height: 168px; display: block; overflow: visible; }
.empty-hint {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  font-size: 13px; color: var(--text-3); text-align: center; padding: 0 20px;
}
.seg { display: flex; background: var(--card-2); border-radius: 8px; padding: 2px; border: 1px solid var(--border); }
.seg button {
  padding: 4px 10px; font-size: 12.5px; border-radius: 6px;
  color: var(--text-2); transition: all .15s;
}
.seg button.on { background: #fff; color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.08); font-weight: 550; }

/* ---------------- 资产结构（环形图 + 图例） ---------------- */
.donut-wrap {
  position: relative;
  width: 220px; height: 220px;
  margin: 2px auto 0;
}
.donut { width: 100%; height: 100%; display: block; }
/* 展开动画：打开详情页 / 切回饼图时重播 */
.donut.anim { animation: pieGrow .6s cubic-bezier(.22, 1, .36, 1); }
@keyframes pieGrow {
  0%   { transform: scale(.3) rotate(-40deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.donut-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px;
  text-align: center; padding: 0 40px;
  pointer-events: none;
}
.dc-label { font-size: 11px; color: var(--text-3); }
.dc-num {
  font-size: 21px; font-weight: 700; letter-spacing: -.5px;
  font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.25;
}
.dc-num .cur { font-size: 13px; font-weight: 500; color: var(--text-2); margin-right: 1px; }
.dc-usd { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.dc-chg {
  margin-top: 4px; display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 550; font-variant-numeric: tabular-nums;
  color: var(--text-3);
}
.dc-chg .chg-arrow { font-size: 9px; }
.dc-chg .chg-label { font-weight: 400; }
.dc-chg.up { color: var(--up); }
.dc-chg.down { color: var(--down); }

.donut-legend { display: flex; flex-direction: column; margin-top: 16px; }
.legend-row {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 2px; font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.legend-row:last-child { border-bottom: none; }
.legend-dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.legend-name {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.legend-val {
  color: var(--text-2); font-variant-numeric: tabular-nums; font-size: 12.5px;
  flex-shrink: 0;
}
.legend-pct {
  color: var(--text-3); font-variant-numeric: tabular-nums; font-size: 12px;
  min-width: 46px; text-align: right; flex-shrink: 0;
}

.donut-foot {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border);
  font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums;
  flex-wrap: wrap;
}
.donut-foot .dot { opacity: .5; }

/* 图表类型切换（饼图 / 条状） */
.chart-toggle {
  display: flex; background: var(--card-2); border-radius: 8px; padding: 2px;
  border: 1px solid var(--border); margin-left: auto; flex-shrink: 0;
}
.card-head .detail-date { margin-left: 0; }
.chart-toggle button {
  border: none; background: transparent; color: var(--text-3);
  font-size: 12px; padding: 3px 11px; border-radius: 6px; cursor: pointer;
}
.chart-toggle button.on {
  background: #fff; color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.08); font-weight: 550;
}

/* 条状图 */
.bar-chart { display: flex; flex-direction: column; gap: 15px; margin-top: 4px; }
.bar-row { display: flex; flex-direction: column; gap: 6px; }
.bar-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 13px;
}
.bar-name {
  display: flex; align-items: center; gap: 7px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500;
}
.bar-dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.bar-meta { color: var(--text-3); font-variant-numeric: tabular-nums; font-size: 12px; flex-shrink: 0; }
.bar-track { height: 14px; background: var(--card-2); border-radius: 7px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 7px; transition: width .6s cubic-bezier(.22, 1, .36, 1); }

/* ---------------- 收益日历 ---------------- */
.cal-nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.cal-nav-btn {
  border: 1px solid var(--border); background: var(--card-2); color: var(--text-2);
  width: 26px; height: 26px; border-radius: 7px; cursor: pointer; font-size: 16px; line-height: 1;
}
.cal-nav-btn:active { background: var(--border); }
.cal-nav-btn:disabled { opacity: .32; cursor: not-allowed; }
.cal-title { font-size: 13px; font-weight: 550; min-width: 80px; text-align: center; font-variant-numeric: tabular-nums; }
/* 月 / 年 视图切换（segmented，复用图表切换的观感） */
.cal-view-toggle {
  display: flex; background: var(--card-2); border-radius: 8px; padding: 2px;
  border: 1px solid var(--border); margin-left: 8px; flex-shrink: 0;
}
.cal-view-toggle button {
  border: none; background: transparent; color: var(--text-3);
  font-size: 12px; padding: 3px 11px; border-radius: 6px; cursor: pointer;
}
.cal-view-toggle button.on {
  background: #fff; color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.08); font-weight: 550;
}

.cal-weekday {
  display: grid; grid-template-columns: repeat(7, 1fr);
  font-size: 11.5px; color: var(--text-3); text-align: center; margin-bottom: 4px;
}
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 50px; border-radius: 9px; padding: 4px 2px; gap: 2px;
  background: var(--card-2);
}
.cal-cell.empty { background: transparent; }
.cal-day { font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; line-height: 1; }
.cal-chg { font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; }
.cal-chg.up { color: var(--up); }
.cal-chg.down { color: var(--down); }
.cal-chg.flat { color: var(--text-3); }
.cal-cell.today .cal-day {
  background: var(--accent); color: #fff; border-radius: 50%;
  width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
}
.cal-cell.has-data { cursor: pointer; }
.cal-cell.has-data:active { background: var(--border); }

.cal-total {
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border);
  font-size: 12.5px; color: var(--text-3); text-align: center;
}
.cal-total b { font-variant-numeric: tabular-nums; font-weight: 600; }
.cal-total b.up { color: var(--up); }
.cal-total b.down { color: var(--down); }

/* 年视图：每月一行，点某月回到该月的每日日历 */
.cal-year { display: flex; flex-direction: column; gap: 2px; }
.caly-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 6px; border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.caly-row:last-child { border-bottom: none; }
.caly-row.has-data { cursor: pointer; }
.caly-row.has-data:active { background: var(--card-2); }
.caly-month { color: var(--text-2); font-weight: 550; display: flex; align-items: center; gap: 8px; }
.caly-now { font-style: normal; font-size: 10.5px; color: var(--text-3); background: var(--card-2); border: 1px solid var(--border); border-radius: 10px; padding: 1px 6px; }
.caly-val { font-variant-numeric: tabular-nums; font-weight: 600; }
.caly-val.up { color: var(--up); }
.caly-val.down { color: var(--down); }
.caly-val.flat { color: var(--text-3); font-weight: 400; }

/* 收益日历明细弹窗 */
.cald-total {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 4px 0 14px; border-bottom: 1px solid var(--border); margin-bottom: 12px;
}
.cald-total-label { font-size: 12px; color: var(--text-3); }
.cald-total-val { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cald-total-val.up { color: var(--up); }
.cald-total-val.down { color: var(--down); }
.cald-total-val.flat { color: var(--text-2); }

.cald-group-title { font-size: 12px; font-weight: 600; margin: 12px 0 6px; }
.cald-group-title.up { color: var(--up); }
.cald-group-title.down { color: var(--down); }
.cald-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13px; }
.cald-dot { width: 8px; height: 8px; border-radius: 3px; flex-shrink: 0; }
.cald-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cald-val { font-variant-numeric: tabular-nums; font-weight: 550; flex-shrink: 0; }
.cald-val.up { color: var(--up); }
.cald-val.down { color: var(--down); }

/* ---------------- 总览里的资产明细 ---------------- */
.link-btn {
  font-size: 12.5px; color: var(--accent); padding: 3px 6px;
  border-radius: 6px; font-weight: 500;
}
.link-btn:active { background: var(--accent-soft); }

.mini-group { margin-bottom: 4px; }
.mini-group:last-child { margin-bottom: 0; }
.mini-group-head {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 2px 5px; font-size: 12.5px; color: var(--text-3);
}
.mini-group-head .mini-name { font-weight: 600; color: var(--text-2); }
.mini-group-head .mini-sum { margin-left: auto; font-variant-numeric: tabular-nums; }

.mini-asset {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px; margin-bottom: 5px;
  background: var(--card-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: background .15s, transform .1s;
  cursor: pointer;
}
.mini-asset:active { background: #f0f2f5; transform: scale(.994); }
.mini-asset-left { flex: 1; min-width: 0; }
.mini-asset-name {
  font-size: 13.5px; font-weight: 550;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mini-asset-meta { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.mini-asset-right { text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.mini-asset-val { font-size: 13.5px; font-weight: 600; }
.mini-asset-chg { font-size: 11px; margin-top: 2px; }

.mini-empty {
  text-align: center; padding: 26px 16px; color: var(--text-3); font-size: 13px;
}

/* ---------------- 市场参考 ---------------- */
.market-ref { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.mref {
  background: var(--card-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 9px 11px;
}
.mref-label { font-size: 11.5px; color: var(--text-3); }
.mref-val { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 2px; }
.mref-sub { font-size: 11px; color: var(--text-3); margin-top: 1px; }

/* ---------------- 明细 ---------------- */
.detail-toolbar { display: flex; gap: 9px; margin-bottom: 12px; }
.search-wrap {
  flex: 1; position: relative; display: flex; align-items: center;
}
.search-wrap svg { position: absolute; left: 11px; color: var(--text-3); pointer-events: none; }
.search-wrap input { padding-left: 34px; border-radius: var(--radius-sm); }
.filter-select { width: auto; min-width: 108px; flex-shrink: 0; }

.group { margin-bottom: 12px; }
.group-head {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 4px 7px;
}
.group-title { font-size: 14px; font-weight: 600; }
.group-badge {
  font-size: 11px; color: var(--text-3); background: #fff;
  border: 1px solid var(--border); border-radius: 20px; padding: 1px 7px;
}
.group-sum { margin-left: auto; text-align: right; font-variant-numeric: tabular-nums; }
.group-sum-main { font-size: 14.5px; font-weight: 600; }
.group-sum-sub { font-size: 11.5px; color: var(--text-3); }

.asset {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 11px 13px; margin-bottom: 7px;
  display: flex; align-items: center; gap: 11px;
  transition: background .15s, transform .1s;
  box-shadow: var(--shadow);
}
.asset:active { background: var(--card-2); transform: scale(.994); }
.asset-left { flex: 1; min-width: 0; }
.asset-name {
  font-size: 14.5px; font-weight: 550;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.asset-meta {
  font-size: 11.5px; color: var(--text-3); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.asset-right { text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.asset-value { font-size: 15px; font-weight: 600; }
.asset-chg { font-size: 11.5px; margin-top: 3px; }

.tag {
  display: inline-block; font-size: 10px; padding: 0 5px; border-radius: 4px;
  line-height: 15px; vertical-align: 1px; margin-left: 5px;
  background: var(--card-2); color: var(--text-3); border: 1px solid var(--border);
}
.tag.warn { background: #fff7e6; color: #b45309; border-color: #fde4b8; }
.tag.gray { background: #f3f4f6; color: #6b7280; }
.tag.blue { background: var(--accent-soft); color: var(--accent); border-color: #d3e0ff; }

.empty-state {
  text-align: center; padding: 44px 20px; color: var(--text-3);
}
.empty-state svg { opacity: .35; margin-bottom: 10px; }
.empty-state p { margin: 0 0 4px; font-size: 14px; }
.empty-state small { font-size: 12.5px; }

.rate-progress {
  margin-top: 6px; height: 4px; background: var(--card-2);
  border-radius: 3px; overflow: hidden;
}
.rate-progress > div { height: 100%; background: var(--accent); border-radius: 3px; }

/* ---------------- 底部导航 ---------------- */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  display: flex;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
  padding-bottom: var(--safe-b);
}
.tabbar button {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 0 7px; color: var(--text-3); font-size: 10.5px;
  transition: color .15s;
}
.tabbar button.on { color: var(--accent); }

/* ---------------- 弹窗 ---------------- */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-end; justify-content: center; }
.modal-bg { position: absolute; inset: 0; background: rgba(16,24,40,.42); animation: fadein .2s; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.modal-panel {
  position: relative; width: 100%; max-width: 560px;
  background: var(--card); border-radius: 18px 18px 0 0;
  max-height: 92vh; display: flex; flex-direction: column;
  animation: slideup .26s cubic-bezier(.32,.72,0,1);
  box-shadow: var(--shadow-lg);
}
@keyframes slideup { from { transform: translateY(100%); } to { transform: none; } }
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 16px 11px; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-head h3 { font-size: 16px; }
.modal-body { padding: 14px 16px; overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; }
.modal-foot {
  padding: 11px 16px calc(14px + var(--safe-b));
  border-top: 1px solid var(--border); display: flex; gap: 9px; flex-shrink: 0;
}

.field { margin-bottom: 13px; }
.field label {
  display: block; font-size: 12.5px; color: var(--text-2);
  margin-bottom: 5px; font-weight: 500;
}
.field .hint { font-size: 11.5px; color: var(--text-3); margin-top: 4px; line-height: 1.45; }
.field-row { display: flex; gap: 10px; }
.field-row > .field { flex: 1; margin-bottom: 13px; }

.btn {
  padding: 11px 16px; border-radius: var(--radius-sm);
  font-size: 15px; font-weight: 550; text-align: center;
  transition: opacity .15s, transform .1s;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--accent); color: #fff; flex: 1; }
.btn-ghost { background: var(--card-2); color: var(--text-2); border: 1px solid var(--border); }
.btn-danger { background: #fff; color: var(--up); border: 1px solid #f6d4d1; }
.btn:disabled { opacity: .5; pointer-events: none; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  padding: 7px 13px; border-radius: 20px; font-size: 13px;
  background: var(--card-2); border: 1px solid var(--border); color: var(--text-2);
  transition: all .15s;
}
.chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 550; }

.section-label {
  font-size: 12px; color: var(--text-3); font-weight: 500;
  margin: 16px 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--border);
}
.section-label:first-child { margin-top: 0; }

.preview-box {
  background: var(--card-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 11px 13px; margin-bottom: 13px;
}
.preview-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; padding: 3px 0;
}
.preview-row .k { color: var(--text-3); }
.preview-row .v { font-weight: 550; font-variant-numeric: tabular-nums; }
.preview-row.total { border-top: 1px dashed var(--border); margin-top: 5px; padding-top: 8px; font-size: 14.5px; }

.detail-kv { display: flex; flex-direction: column; gap: 1px; }
.kv-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 8px 0; font-size: 13.5px; border-bottom: 1px solid var(--border);
}
.kv-row:last-child { border-bottom: none; }
.kv-row .k { color: var(--text-3); }
.kv-row .v { font-weight: 550; font-variant-numeric: tabular-nums; }

.trade-item {
  display: flex; justify-content: space-between; padding: 7px 0;
  font-size: 12.5px; border-bottom: 1px solid var(--border);
}
.trade-item:last-child { border-bottom: none; }

/* ---------------- Toast ---------------- */
.toast {
  position: fixed; left: 50%; bottom: calc(84px + var(--safe-b));
  transform: translateX(-50%); z-index: 200;
  background: rgba(26,29,33,.93); color: #fff;
  padding: 10px 18px; border-radius: 22px; font-size: 13.5px;
  max-width: 84vw; text-align: center;
  animation: toastin .24s cubic-bezier(.32,.72,0,1);
  box-shadow: 0 6px 24px rgba(0,0,0,.2);
}
@keyframes toastin { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.toast.err { background: rgba(200,38,30,.95); }

/* ---------------- 大屏适配 ---------------- */
/* 水印不再需要这里单独放大：.page-wm span 的 font-size 用的是 min(88vw,56vh)，
   在手机和桌面上都会自动跟着视口走（旧的 .hero-wm 固定 200px 规则已随水印上移一并移除）。 */
@media (min-width: 620px) {
  .hero-card { min-height: 330px; }   /* 桌面屏幕高、顶栏矮，跟着视口撑开会显得空 */
  .hero-big { font-size: 54px; }
  .hero-big.s1 { font-size: 45px; }
  .hero-big.s2 { font-size: 38px; }
  .market-ref { grid-template-columns: repeat(4, 1fr); }
  .modal { align-items: center; }
  .modal-panel { border-radius: 18px; max-height: 88vh; margin: 20px; }
  .modal-foot { border-radius: 0 0 18px 18px; }
}

/* ================= 登录 / 注册 ================= */
body.booting .topbar, body.booting .tabbar, body.booting main { visibility: hidden; }
body.gated { overflow: hidden; }
body.gated .topbar, body.gated .tabbar, body.gated main { display: none; }

.auth-gate {
  position: fixed; inset: 0; z-index: 300;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px 20px;
  background: linear-gradient(170deg, #f7f9fc 0%, #eef1f6 60%, #e9edf4 100%);
}
.auth-card {
  width: 100%; max-width: 360px;
  background: var(--card); border-radius: 20px;
  padding: 26px 22px 22px;
  box-shadow: var(--shadow-lg);
}
.auth-logo {
  width: 52px; height: 52px; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 15px; color: #fff;
  background: linear-gradient(150deg, var(--accent), #5b8cff);
  box-shadow: 0 6px 18px rgba(43, 108, 255, .3);
}
.auth-title { text-align: center; font-size: 19px; }
.auth-sub { text-align: center; font-size: 12.5px; color: var(--text-3); margin: 5px 0 20px; }

.field { display: block; margin-bottom: 13px; }
.field-label { display: block; font-size: 12.5px; color: var(--text-2); margin-bottom: 5px; font-weight: 500; }

.auth-error {
  background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca;
  border-radius: var(--radius-sm); padding: 9px 12px;
  font-size: 12.5px; margin-bottom: 12px;
}

.btn-primary {
  width: 100%; padding: 12px;
  background: var(--accent); color: #fff;
  border-radius: var(--radius-sm); font-size: 15px; font-weight: 600;
  transition: opacity .15s, transform .1s;
}
.btn-primary:active { transform: scale(.985); }
.btn-primary:disabled { opacity: .55; }

.auth-submit { margin-top: 4px; }
.auth-switch { text-align: center; font-size: 13px; color: var(--text-3); margin-top: 16px; }
.auth-switch .link-btn { font-size: 13px; margin-left: 2px; }
.auth-foot { margin-top: 18px; font-size: 11.5px; color: var(--text-3); text-align: center; }

/* ---------------- 「我的」页 ---------------- */
.me-rows { padding: 2px 0 4px; }
.me-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 0; font-size: 14px;
  border-bottom: 1px solid var(--border);
}
.me-row:last-child { border-bottom: none; }
.me-row span { color: var(--text-3); font-size: 13px; }
.me-row b { font-weight: 600; }

.me-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.btn-ghost {
  padding: 9px 15px; border-radius: 20px;
  border: 1px solid var(--border-strong); background: var(--card-2);
  font-size: 13px; color: var(--text-2);
  transition: background .15s, border-color .15s;
}
.btn-ghost:active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.btn-ghost.danger { color: #d0342b; border-color: #f0cbc7; background: #fef6f5; }

.muted-note { font-size: 11.5px; color: var(--text-3); font-weight: 400; }

.admin-users { display: flex; flex-direction: column; }
.admin-user {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.admin-user:last-child { border-bottom: none; }
.admin-avatar {
  width: 36px; height: 36px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent);
  font-size: 14px; font-weight: 600;
}
.admin-user.is-admin .admin-avatar { background: #fff4e5; color: #c2740a; }
.admin-user-main { flex: 1; min-width: 0; }
.admin-user-name { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.admin-user-name .tag-admin {
  font-size: 10px; font-weight: 500; padding: 1px 6px; border-radius: 8px;
  background: #fff4e5; color: #c2740a;
}
.admin-user-meta { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.admin-user-act {
  flex: none; font-size: 12.5px; color: var(--accent);
  padding: 6px 12px; border-radius: 16px; border: 1px solid #cfe0ff;
  background: var(--accent-soft);
}

.admin-invites { display: flex; flex-wrap: wrap; gap: 8px; }
.invite-chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; letter-spacing: .5px;
  padding: 7px 12px; border-radius: 9px;
  border: 1px dashed var(--border-strong); background: var(--card-2);
  color: var(--text-2);
}
.invite-chip.used {
  color: var(--text-3); opacity: .6; text-decoration: line-through;
  border-style: solid;
}
.invite-chip.copied { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

/* 顶部「正在查看 xxx」标记 */
.viewing-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; padding: 4px 10px; border-radius: 14px;
  background: #fff4e5; color: #c2740a; font-weight: 500;
  max-width: 32vw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}