/* ============================================================
   inner.css — 内层「主仆层」专属样式
   目标：暗紫深红、锐角、暗金细线、压迫感与仪式感。
   ============================================================ */

/* ---------------- 玄关问候 ---------------- */
.inner-hello {
  margin: var(--sp-3) 0 var(--sp-5);
}
.inner-hello .line-1 {
  font-family: var(--font-serif);
  font-size: 15px;
  letter-spacing: .3em;
  color: var(--text-soft);
}
.inner-hello .line-2 {
  font-family: var(--font-serif);
  font-size: 26px;
  line-height: 1.5;
  letter-spacing: .1em;
  color: var(--text);
  margin-top: var(--sp-2);
  text-shadow: 0 0 26px rgba(201, 56, 92, .35);
}
.inner-hello .line-2 em {
  font-style: normal;
  color: var(--accent);
}

/* ---------------- 自由标签 ---------------- */
.tag-picked {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 4px;
  margin-bottom: 8px;
}
.tag-picked:empty { display: none; }

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  border: 1px solid var(--gold);
  background: rgba(212, 175, 106, .16);
  color: var(--gold);
  font-size: 12.5px;
  letter-spacing: .06em;
}
.tag-chip i { font-style: normal; opacity: .55; font-size: 11px; }
.tag-chip:hover { background: rgba(212, 175, 106, .26); }

.tag-known {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.tag-known button {
  padding: 4px 10px;
  border-radius: var(--r-pill);
  border: 1px dashed var(--line-strong);
  background: transparent;
  color: var(--text-faint);
  font-size: 12px;
  transition: color .2s var(--ease-inner), border-color .2s var(--ease-inner);
}
.tag-known button:hover { color: var(--gold); border-color: var(--gold); }

.tag-mini {
  font-style: normal;
  font-size: 10.5px;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(212, 175, 106, .4);
  color: var(--gold);
  flex: 0 0 auto;
}

/* ---------------- 属性条（游戏化仪表） ---------------- */
.gauges { display: flex; flex-direction: column; gap: var(--sp-3); }

.gauge {
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background:
    linear-gradient(100deg, rgba(201, 56, 92, .1) 0%, transparent 55%),
    linear-gradient(170deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow-in);
  transition: border-color .4s var(--ease-inner);
}
.gauge.is-live { border-color: var(--line-strong); }

.gauge-top {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: 9px;
}
.gauge-name {
  font-family: var(--font-serif);
  font-size: 14px;
  letter-spacing: .18em;
  color: var(--text);
  border-bottom: 1px dashed transparent;
  transition: border-color .2s var(--ease-inner), color .2s var(--ease-inner);
}
.gauge-name[data-rename] { cursor: text; }
.gauge-name[data-rename]:hover { border-bottom-color: var(--line-strong); color: var(--gold); }

.gauge-rename {
  width: 8em;
  padding: 2px 6px;
  border: 1px solid var(--gold);
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, .35);
  color: var(--gold);
  font-family: var(--font-serif);
  font-size: 14px;
  letter-spacing: .18em;
  outline: none;
}
.gauge-rank {
  flex: 1;
  font-size: 10.5px;
  letter-spacing: .14em;
  opacity: .9;
}
.gauge-num {
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.gauge-num small { font-size: 10px; color: var(--text-faint); margin-left: 2px; }

.gauge-bar {
  position: relative;
  height: 9px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .06);
  overflow: hidden;
}
.gauge-bar > i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 65%, var(--gold) 100%);
  box-shadow: 0 0 14px rgba(201, 56, 92, .7);
  transition: width 1.15s var(--ease-inner);
}
/* 进度条上的流动高光 */
.gauge-bar > i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .3) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: gauge-flow 3.2s var(--ease-inner) infinite;
}
@keyframes gauge-flow {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}
.gauge.is-live .gauge-bar > i { animation: gauge-pulse 2.6s var(--ease-inner) infinite; }
@keyframes gauge-pulse {
  0%, 100% { box-shadow: 0 0 14px rgba(201, 56, 92, .55); }
  50%      { box-shadow: 0 0 22px rgba(201, 56, 92, .95); }
}

/* 数字跳动的反馈 */
.gauge.bump-up .gauge-num { animation: bump-up .45s var(--ease-inner); }
@keyframes bump-up {
  0%   { transform: scale(1); color: var(--text); }
  40%  { transform: scale(1.35); color: var(--gold); text-shadow: 0 0 18px rgba(212, 175, 106, .9); }
  100% { transform: scale(1); color: var(--text); }
}
.gauge.bump-down .gauge-num { animation: bump-down .4s var(--ease-inner); }
@keyframes bump-down {
  0%   { transform: scale(1); }
  40%  { transform: scale(.85); color: var(--text-faint); }
  100% { transform: scale(1); }
}
.gauge.bump-up { border-color: var(--gold); }
.gauge.bump-up .gauge-bar > i { box-shadow: 0 0 26px rgba(212, 175, 106, 1); }

/* 属性条上的操作按钮 */
.gauge-acts {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: 11px;
}
.gbtn {
  min-width: 42px;
  min-height: 34px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, .03);
  color: var(--text-soft);
  font-size: 13px;
  font-family: var(--font-serif);
  transition: all .18s var(--ease-inner);
}
.gbtn:hover { border-color: var(--gold); color: var(--gold); }
.gbtn:active { transform: scale(.94); }
.gbtn-add {
  flex: 1;
  min-height: 38px;
  font-size: 15px;
  letter-spacing: .1em;
  border-color: rgba(212, 175, 106, .5);
  background: linear-gradient(180deg, rgba(201, 56, 92, .22), rgba(201, 56, 92, .1));
  color: var(--gold);
}
.gbtn-add:hover { background: linear-gradient(180deg, rgba(201, 56, 92, .34), rgba(201, 56, 92, .16)); }
.gbtn-zero { font-size: 11px; color: var(--text-faint); min-width: 48px; }

/* 点 +1 时飘起来的小爱心 */
.gbtn { position: relative; overflow: visible; }
.fly-heart {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 15px;
  line-height: 1;
  color: #B98AD8;                     /* 紫色 */
  pointer-events: none;
  text-shadow: 0 0 10px rgba(185, 138, 216, .95), 0 0 22px rgba(160, 90, 210, .6);
  animation: fly-heart 1s cubic-bezier(.22, 1, .36, 1) forwards;
}
@keyframes fly-heart {
  0%   { opacity: 0; transform: translateX(-50%) translateY(6px) scale(.5); }
  18%  { opacity: 1; transform: translateX(-50%) translateY(-4px) scale(1.15); }
  55%  { opacity: 1; transform: translateX(-50%) translateY(-22px) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-46px) scale(.85); }
}

/* 设置页里的属性条编辑行 */
.meter-row { gap: var(--sp-2); }
.meter-row .meter-name { flex: 1; max-width: none; }
.meter-del {
  width: 30px; height: 30px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text-faint);
  font-size: 14px;
  line-height: 1;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.meter-del:hover { color: var(--accent); border-color: var(--accent); }

/* ---------------- 状态条（两栏，旧版沿用） ---------------- */
.status-strip {
  margin-top: var(--sp-4);
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--sp-3);
}
.stat {
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(170deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow-in);
}
.stat-label {
  font-size: 10px;
  letter-spacing: .24em;
  color: var(--text-faint);
}
.stat-value {
  font-family: var(--font-serif);
  font-size: 24px;
  color: var(--text);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.stat-value small { font-size: 12px; color: var(--text-soft); margin-left: 3px; }

.bar {
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .07);
  overflow: hidden;
  margin-top: var(--sp-3);
}
.bar > i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent), var(--gold));
  box-shadow: 0 0 12px rgba(201, 56, 92, .6);
  transition: width 1s var(--ease-inner);
}

/* ---------------- 状态栏 ---------------- */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
.stat-wide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(100deg, rgba(201, 56, 92, .12), transparent 72%);
  box-shadow: var(--shadow-in);
}

/* ---------------- 记录列表 ---------------- */
.entry-list { display: flex; flex-direction: column; gap: 6px; }
.entry-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .02);
}
.entry-date {
  flex: 0 0 46px;
  font-size: 11px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.entry-main { display: flex; align-items: baseline; gap: var(--sp-3); min-width: 0; }
.entry-main b { font-family: var(--font-serif); color: var(--gold); font-size: 14px; flex: 0 0 auto; }
.entry-main span { font-size: 13px; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 内层日历的深浅：记的次数越多颜色越重 */
.inner-cal { border: 1px solid var(--line); }
.inner-cal[data-lvl="1"] { background: rgba(201, 56, 92, .18); border-color: rgba(201, 56, 92, .35); color: var(--text); }
.inner-cal[data-lvl="2"] { background: rgba(201, 56, 92, .38); border-color: rgba(201, 56, 92, .55); color: #fff; }
.inner-cal[data-lvl="3"] { background: rgba(201, 56, 92, .62); border-color: var(--accent); color: #fff; }
.inner-cal .mark { display: none; }

/* ---------------- 日记条目（带删除） ---------------- */
.journal-item {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(170deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow-in);
  padding: var(--sp-4);
  transition: border-color .3s var(--ease-inner), opacity .28s var(--ease-inner), transform .28s var(--ease-inner);
}
.ji-top { display: flex; align-items: flex-start; gap: var(--sp-3); }
.ji-top .seal {
  flex: 0 0 30px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid rgba(212, 175, 106, .4);
  border-radius: 50%;
  color: var(--gold);
  font-size: 14px;
}
.ji-main { flex: 1; min-width: 0; }
.ji-body { font-size: 13.5px; line-height: 1.75; word-break: break-word; }

.ji-del {
  flex: 0 0 auto;
  min-width: 46px;
  min-height: 28px;
  padding: 0 8px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text-faint);
  font-size: 11px;
  letter-spacing: .06em;
  transition: all .18s var(--ease-inner);
}
.ji-del:hover { color: var(--accent); border-color: var(--accent); }
.ji-del.is-armed {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
  animation: breath 1s var(--ease-inner) infinite;
}
.journal-item.is-arming { border-color: var(--accent); }
.journal-item.is-gone { opacity: 0; transform: translateX(18px); }

/* ---------------- 在一起天数（大数字） ---------------- */
.days-hero {
  padding: var(--sp-5) var(--sp-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background:
    radial-gradient(110% 130% at 50% 0%, rgba(201, 56, 92, .18) 0%, transparent 62%),
    linear-gradient(170deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow-in);
  text-align: center;
}
.days-hero-num {
  font-family: var(--font-serif);
  font-size: 44px;
  line-height: 1.1;
  color: var(--text);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 28px rgba(201, 56, 92, .35);
}
.days-hero-num small { font-size: 15px; color: var(--text-soft); margin-left: 5px; }
.days-hero-since { font-size: 11px; color: var(--text-faint); margin-top: 4px; letter-spacing: .06em; }

/* ---------------- 今日阶段条 ---------------- */
.phase-now {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .02);
  font-size: 12.5px;
}
.phase-now .phase-dot {
  flex: 0 0 9px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--text-faint);
  box-shadow: 0 0 10px currentColor;
}
.phase-now .phase-name { color: var(--text); letter-spacing: .1em; }
.phase-now .phase-note { flex: 1; text-align: right; font-size: 11px; color: var(--text-faint); }

.phase-now[data-phase="period"] { border-color: rgba(201, 56, 92, .5); }
.phase-now[data-phase="period"] .phase-dot { background: #C9385C; color: #C9385C; }
.phase-now[data-phase="fertile"] { border-color: rgba(143, 191, 138, .45); }
.phase-now[data-phase="fertile"] .phase-dot { background: #8FBF8A; color: #8FBF8A; }
.phase-now[data-phase="ovulation"] { border-color: rgba(185, 138, 216, .6); }
.phase-now[data-phase="ovulation"] .phase-dot { background: #B98AD8; color: #B98AD8; }
.phase-now[data-phase="safe"] .phase-dot { background: #6FA98E; color: #6FA98E; }

/* ---------------- 周期日历 ---------------- */
.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  font-size: 10.5px;
  color: var(--text-faint);
  margin-bottom: var(--sp-3);
  letter-spacing: .04em;
}
.cal-legend span { display: inline-flex; align-items: center; gap: 5px; }
.cal-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.lg-period { background: #C9385C; }
.lg-fertile { background: #8FBF8A; }
.lg-ovu { background: #B98AD8; }
.lg-safe { background: rgba(255, 255, 255, .12); }

.cyc-grid { gap: 5px; }
.cyc-cell {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 12.5px;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}
.cyc-cell .cyc-day { line-height: 1; }

/* 阶段底色：同一个色系里由浅到深 */
.cyc-cell[data-phase="safe"] { background: rgba(255, 255, 255, .03); }
.cyc-cell[data-phase="period"] {
  background: rgba(201, 56, 92, .42);
  border-color: rgba(201, 56, 92, .6);
  color: #fff;
}
.cyc-cell[data-phase="fertile"] {
  background: rgba(143, 191, 138, .26);
  border-color: rgba(143, 191, 138, .45);
  color: #EAF6E8;
}
.cyc-cell[data-phase="ovulation"] {
  background: rgba(185, 138, 216, .5);
  border-color: #B98AD8;
  color: #fff;
  box-shadow: 0 0 12px rgba(185, 138, 216, .45);
}
.cyc-cell.is-today { outline: 2px solid var(--gold); outline-offset: 1px; }

/* 记过几次：底部一条金线，越粗表示越多 */
.cyc-cell .cyc-bar {
  display: block;
  width: 62%;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
  box-shadow: 0 0 6px rgba(212, 175, 106, .8);
}
.cyc-cell .cyc-bar[data-lvl="2"] { height: 3.5px; }
.cyc-cell .cyc-bar[data-lvl="3"] { height: 5px; }

/* 手动标记的月经开始日：右上角一个小点 */
.cyc-cell .cyc-mark {
  position: absolute;
  top: 3px; right: 3px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px rgba(255, 255, 255, .9);
}

.cyc-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  font-size: 11.5px;
}
.cyc-facts div { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.cyc-facts span { color: var(--text-faint); }
.cyc-facts b { color: var(--text); font-family: var(--font-serif); font-weight: 400; }

.cyc-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }

/* 周期参数弹窗 */
.cyc-modal {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  background: rgba(6, 3, 9, .9);
  animation: fade-up-in .3s var(--ease-inner) both;
}
.cyc-modal-box {
  width: min(400px, 100%);
  max-height: 86vh;
  overflow: auto;
  padding: var(--sp-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: linear-gradient(170deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow-2);
}
.modal-title {
  font-family: var(--font-serif);
  text-align: center;
  font-size: 15px;
  letter-spacing: .4em;
  color: var(--gold);
  text-indent: .4em;
  margin-bottom: var(--sp-4);
}
.cyc-tag {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 4px 2px 8px;
  margin: 2px 2px 0 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: 11px;
  color: var(--text-soft);
  font-family: var(--font-serif);
  font-variant-numeric: tabular-nums;
}

/* 补记以前的月经日 */
.cyc-past {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.cyc-add { display: flex; gap: var(--sp-2); align-items: center; }
.cyc-list {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--line);
  line-height: 2;
}
.cyc-del {
  border: none;
  background: transparent;
  color: var(--text-faint);
  font-size: 13px;
  line-height: 1;
  padding: 0 2px;
}
.cyc-del:hover { color: var(--accent); }
.cyc-close {
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--text-faint);
}
.cyc-close:hover { color: var(--gold); }

/* ---------------- 云同步 ---------------- */
.sync-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .02);
  text-align: left;
  transition: border-color .2s var(--ease-inner), background-color .2s var(--ease-inner);
}
.sync-bar:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, .04); }

.sync-dot {
  flex: 0 0 9px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--text-faint);
  box-shadow: 0 0 8px currentColor;
  color: var(--text-faint);
}
.sync-dot[data-state="on"]      { background: #6FA98E; color: #6FA98E; }
.sync-dot[data-state="syncing"] { background: var(--gold); color: var(--gold); animation: breath 1.2s var(--ease-inner) infinite; }
.sync-dot[data-state="error"]   { background: var(--accent); color: var(--accent); }
.sync-dot[data-state="offline"] { background: #D8B45E; color: #D8B45E; }

.sync-label { font-size: 13px; color: var(--text); letter-spacing: .08em; }
.sync-note { flex: 1; text-align: right; font-size: 11px; color: var(--text-faint); }
.sync-go { color: var(--text-faint); font-size: 16px; line-height: 1; }

/* 同步面板 */
.sync-modal {
  position: fixed;
  inset: 0;
  z-index: 96;
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  background: rgba(6, 3, 9, .9);
  animation: fade-up-in .3s var(--ease-inner) both;
}
.sync-box {
  width: min(410px, 100%);
  max-height: 88vh;
  overflow: auto;
  padding: var(--sp-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: linear-gradient(170deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow-2);
}
.sync-who {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .02);
  margin-bottom: var(--sp-4);
}
.sync-who-name { font-size: 14px; color: var(--text); font-family: var(--font-serif); letter-spacing: .08em; }
.sync-actions { display: flex; gap: var(--sp-2); }
.sync-form { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.sync-form .set-input { max-width: none; width: 100%; background: rgba(0, 0, 0, .25); }
.sync-err { min-height: 18px; font-size: 12px; color: #D9607F; letter-spacing: .04em; }
.sync-import {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-soft);
  cursor: pointer;
  line-height: 1.7;
}
.sync-import input { margin-top: 3px; flex: 0 0 auto; }

/* 账号设置面板 */
.sync-acct {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.sync-acct-title {
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--gold);
  margin-bottom: var(--sp-3);
}

/* ---------------- 未读纸条 ---------------- */
.note-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid rgba(212, 175, 106, .22);
  border-radius: var(--r-md);
  background: linear-gradient(120deg, rgba(212, 175, 106, .07), transparent 70%);
}
.note-inner .seal {
  flex: 0 0 34px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid rgba(212, 175, 106, .4);
  border-radius: 50%;
  color: var(--gold);
  font-family: var(--font-serif);
  font-size: 15px;
}

/* ---------------- 成长曲线 ---------------- */
.chart-wrap {
  margin-top: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(170deg, var(--surface-2), var(--surface));
}
.chart-wrap canvas { width: 100%; height: 140px; display: block; }
.chart-legend { display: flex; gap: var(--sp-4); font-size: 10px; color: var(--text-faint); margin-top: var(--sp-2); letter-spacing: .08em; }
.chart-legend i { display: inline-block; width: 8px; height: 2px; vertical-align: middle; margin-right: 5px; }

/* ---------------- 等级 ---------------- */
.level-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px dashed var(--line);
  font-size: 13px;
}
.level-row:last-child { border-bottom: none; }
.level-row .lv {
  flex: 0 0 26px;
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--text-faint);
  text-align: center;
}
.level-row .lvname { flex: 1; }
.level-row .lvre { font-size: 10px; color: var(--text-faint); letter-spacing: .08em; }
.level-row.is-reached .lv { color: var(--gold); }
.level-row.is-reached .lvname { color: var(--text); }
.level-row.is-current {
  background: linear-gradient(90deg, rgba(212, 175, 106, .12), transparent);
  border-radius: var(--r-sm);
  padding-left: var(--sp-2);
}
.level-row.is-current .lvname { color: var(--gold); }