:root {
  --bg1: #fff6fb;
  --bg2: #f3efff;
  --card: #ffffff;
  --card-bd: #eee7f6;
  --violet: #7c5cff;
  --violet-d: #6a45f0;
  --violet-soft: #efeaff;
  --gold: #ffb43d;
  --gold-soft: #fff1d4;
  --green: #58d9bb;
  --green-soft: #def8f1;
  --topbar-icon-bg: var(--bubble-grad);
  --topbar-icon-edge: var(--bubble-edge);
  --topbar-trophy: color-mix(in srgb, var(--gold) 58%, var(--violet));
  --topbar-account: color-mix(in srgb, var(--violet) 76%, var(--green));
  --red: #ef5a78;
  --red-soft: #ffe1e7;
  --text: #3d315f;
  --muted: #9188a7;
  --shadow: 0 10px 26px rgba(74, 54, 116, 0.09);
  --primary-grad:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.58) 0 12%, transparent 28%),
    linear-gradient(145deg,
      color-mix(in srgb, var(--violet) 72%, #fff) 0%,
      var(--violet) 48%,
      color-mix(in srgb, var(--violet-d) 76%, var(--gold)) 100%);
  --primary-soft-grad:
    radial-gradient(circle at 22% 16%, rgba(255,255,255,.82) 0 16%, transparent 34%),
    linear-gradient(145deg,
      color-mix(in srgb, var(--card) 74%, var(--violet-soft)) 0%,
      color-mix(in srgb, var(--violet-soft) 70%, var(--green-soft)) 60%,
      color-mix(in srgb, var(--violet-soft) 58%, var(--gold-soft)) 100%);
  --primary-glow: 0 8px 18px color-mix(in srgb, var(--violet) 28%, transparent);
  --primary-glow-soft: 0 7px 16px color-mix(in srgb, var(--violet) 16%, transparent);
  --bubble-edge: color-mix(in srgb, var(--card-bd) 64%, rgba(255,255,255,.92));
  --bubble-grad:
    radial-gradient(circle at 16% 12%, rgba(255,255,255,.88) 0 13%, transparent 31%),
    radial-gradient(circle at 90% 16%, color-mix(in srgb, var(--green-soft) 64%, transparent), transparent 34%),
    radial-gradient(circle at 18% 88%, color-mix(in srgb, var(--gold-soft) 52%, transparent), transparent 36%),
    linear-gradient(145deg,
      color-mix(in srgb, var(--card) 88%, var(--violet-soft)) 0%,
      color-mix(in srgb, var(--soft-panel) 76%, var(--green-soft)) 58%,
      color-mix(in srgb, var(--card) 78%, var(--gold-soft)) 100%);
  --bubble-shadow:
    inset 0 1px 0 rgba(255,255,255,.74),
    inset 0 -12px 20px color-mix(in srgb, var(--violet) 5%, transparent),
    0 11px 24px color-mix(in srgb, var(--violet) 10%, transparent);
  --notice-warm-edge: color-mix(in srgb, var(--gold) 45%, rgba(255,255,255,.72));
  --notice-danger-edge: color-mix(in srgb, var(--red) 44%, rgba(255,255,255,.74));
  --notice-cool-edge: color-mix(in srgb, var(--violet) 32%, rgba(255,255,255,.78));
  --notice-success-edge: color-mix(in srgb, var(--green) 44%, rgba(255,255,255,.74));
  --notice-warm-grad:
    radial-gradient(circle at 17% 13%, rgba(255,255,255,.9) 0 12%, transparent 30%),
    radial-gradient(circle at 88% 15%, color-mix(in srgb, var(--gold-soft) 82%, transparent), transparent 36%),
    radial-gradient(circle at 16% 94%, color-mix(in srgb, var(--green-soft) 54%, transparent), transparent 34%),
    linear-gradient(146deg,
      color-mix(in srgb, var(--card) 82%, var(--gold-soft)) 0%,
      color-mix(in srgb, var(--gold-soft) 68%, var(--violet-soft)) 58%,
      color-mix(in srgb, var(--card) 78%, var(--green-soft)) 100%);
  --notice-danger-grad:
    radial-gradient(circle at 17% 13%, rgba(255,255,255,.9) 0 12%, transparent 30%),
    radial-gradient(circle at 88% 15%, color-mix(in srgb, var(--red-soft) 78%, transparent), transparent 36%),
    radial-gradient(circle at 18% 94%, color-mix(in srgb, var(--gold-soft) 52%, transparent), transparent 34%),
    linear-gradient(146deg,
      color-mix(in srgb, var(--card) 84%, var(--red-soft)) 0%,
      color-mix(in srgb, var(--red-soft) 62%, var(--violet-soft)) 58%,
      color-mix(in srgb, var(--card) 80%, var(--gold-soft)) 100%);
  --notice-cool-grad:
    radial-gradient(circle at 17% 13%, rgba(255,255,255,.9) 0 12%, transparent 30%),
    radial-gradient(circle at 88% 15%, color-mix(in srgb, var(--violet-soft) 80%, transparent), transparent 36%),
    radial-gradient(circle at 16% 94%, color-mix(in srgb, var(--green-soft) 60%, transparent), transparent 34%),
    linear-gradient(146deg,
      color-mix(in srgb, var(--card) 84%, var(--violet-soft)) 0%,
      color-mix(in srgb, var(--violet-soft) 68%, var(--green-soft)) 58%,
      color-mix(in srgb, var(--card) 78%, var(--gold-soft)) 100%);
  --notice-success-grad:
    radial-gradient(circle at 17% 13%, rgba(255,255,255,.9) 0 12%, transparent 30%),
    radial-gradient(circle at 88% 15%, color-mix(in srgb, var(--green-soft) 82%, transparent), transparent 36%),
    radial-gradient(circle at 16% 94%, color-mix(in srgb, var(--gold-soft) 54%, transparent), transparent 34%),
    linear-gradient(146deg,
      color-mix(in srgb, var(--card) 82%, var(--green-soft)) 0%,
      color-mix(in srgb, var(--green-soft) 68%, var(--violet-soft)) 58%,
      color-mix(in srgb, var(--card) 80%, var(--gold-soft)) 100%);
  --notice-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -10px 18px color-mix(in srgb, var(--violet) 5%, transparent),
    0 9px 20px color-mix(in srgb, var(--violet) 10%, transparent);
  --hero-bg: linear-gradient(145deg, #fff2b9, #ffe7f2 60%, #eee8ff);
  --badge-tile: #f5eeff;
  --soft-panel: rgba(255,255,255,.72);
  --pattern: radial-gradient(circle at 14px 14px, rgba(255,147,186,.12) 0 2px, transparent 2.5px);
}
/* 皮肤：森林手账——温和低刺激，适合长期使用 */
[data-theme="forest"] {
  --bg1: #f7fbef;
  --bg2: #eaf8f3;
  --card: #ffffff;
  --card-bd: #dcece3;
  --violet: #2e9d72;
  --violet-d: #1f7d58;
  --violet-soft: #dff5ea;
  --gold: #ffad6f;
  --gold-soft: #fff0df;
  --green: #74b95d;
  --green-soft: #e7f5dc;
  --topbar-trophy: color-mix(in srgb, var(--green) 64%, var(--gold));
  --topbar-account: color-mix(in srgb, var(--violet) 80%, #243f39);
  --red: #e66573;
  --red-soft: #ffe4e8;
  --text: #243f39;
  --muted: #7f948b;
  --shadow: 0 10px 26px rgba(46, 126, 92, 0.10);
  --hero-bg: linear-gradient(145deg, #e9f8d4, #fff1da 74%);
  --badge-tile: #e8f6dc;
  --soft-panel: rgba(255,255,255,.70);
  --pattern: linear-gradient(135deg, rgba(66,135,108,.06) 25%, transparent 25%, transparent 50%, rgba(66,135,108,.06) 50%, rgba(66,135,108,.06) 75%, transparent 75%);
}
/* 皮肤：星河冒险——更适合 9-14 岁的清爽任务感 */
[data-theme="starry"] {
  --bg1: #eef5ff;
  --bg2: #f8f1ff;
  --card: #ffffff;
  --card-bd: #dde8fb;
  --violet: #3f73e6;
  --violet-d: #285cc8;
  --violet-soft: #e5eeff;
  --gold: #ffc247;
  --gold-soft: #fff1c9;
  --green: #35bfd4;
  --green-soft: #dff8fc;
  --topbar-trophy: color-mix(in srgb, var(--gold) 42%, var(--violet));
  --topbar-account: color-mix(in srgb, var(--violet) 70%, var(--green));
  --red: #ef6376;
  --red-soft: #ffe4e8;
  --text: #253653;
  --muted: #8390a8;
  --shadow: 0 10px 26px rgba(63, 115, 230, 0.10);
  --hero-bg: linear-gradient(145deg, #dff4ff, #f5ebff 62%, #fff1bf);
  --badge-tile: #e8f1ff;
  --soft-panel: rgba(255,255,255,.72);
  --pattern: radial-gradient(circle at 20px 18px, rgba(57,100,197,.14) 0 1.2px, transparent 1.7px), radial-gradient(circle at 58px 46px, rgba(255,190,77,.18) 0 1.4px, transparent 1.9px);
}
/* 皮肤：薄荷学院——清爽学习工具感 */
[data-theme="mint"] {
  --bg1: #f5fbfb;
  --bg2: #fff7ed;
  --card: #ffffff;
  --card-bd: #d9eceb;
  --violet: #2196a3;
  --violet-d: #147886;
  --violet-soft: #dff4f3;
  --gold: #f2aa49;
  --gold-soft: #fff0da;
  --green: #48c6b1;
  --green-soft: #def7f2;
  --topbar-trophy: color-mix(in srgb, var(--gold) 52%, var(--green));
  --topbar-account: color-mix(in srgb, var(--violet) 78%, var(--green));
  --red: #e75d70;
  --red-soft: #ffe3e7;
  --text: #263c45;
  --muted: #83959a;
  --shadow: 0 10px 26px rgba(33, 150, 163, 0.10);
  --hero-bg: linear-gradient(145deg, #dff7f2, #fff1d9 82%);
  --badge-tile: #e4f6f3;
  --soft-panel: rgba(255,255,255,.72);
  --pattern: linear-gradient(90deg, rgba(36,148,155,.06) 1px, transparent 1px), linear-gradient(0deg, rgba(36,148,155,.06) 1px, transparent 1px);
}
/* 皮肤：暗夜极光——极光色玻璃感，覆盖全工具模块 */
[data-theme="midnight"] {
  --aurora-cyan: #56f5d0;
  --aurora-green: #49f59b;
  --aurora-blue: #7aa8ff;
  --aurora-purple: #b58cff;
  --aurora-pink: #ff78c8;
  --aurora-gold: #ffe08a;
  --bg1: #071022;
  --bg2: #10172e;
  --card: #121a34;
  --card-bd: rgba(122,168,255,.28);
  --violet: var(--aurora-blue);
  --violet-d: #c8d8ff;
  --violet-soft: rgba(122,168,255,.18);
  --gold: var(--aurora-gold);
  --gold-soft: rgba(255,224,138,.16);
  --green: var(--aurora-green);
  --green-soft: rgba(86,245,208,.16);
  --topbar-icon-bg:
    radial-gradient(circle at 24% 16%, rgba(255,255,255,.18), transparent 30%),
    linear-gradient(145deg, rgba(8,14,30,.82), rgba(18,25,52,.88));
  --topbar-icon-edge: color-mix(in srgb, var(--aurora-cyan) 34%, rgba(255,255,255,.12));
  --topbar-trophy: color-mix(in srgb, var(--aurora-cyan) 58%, var(--aurora-pink));
  --topbar-account: color-mix(in srgb, var(--aurora-blue) 66%, var(--aurora-purple));
  --red: var(--aurora-pink);
  --red-soft: rgba(255,120,200,.16);
  --text: #edf7ff;
  --muted: #a5b6d9;
  --shadow: 0 16px 38px rgba(0, 0, 0, .42), 0 0 26px rgba(86,245,208,.08);
  --primary-grad:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.36) 0 10%, transparent 29%),
    radial-gradient(circle at 84% 16%, color-mix(in srgb, var(--aurora-pink) 40%, transparent), transparent 32%),
    linear-gradient(135deg, var(--aurora-cyan) 0%, var(--aurora-blue) 48%, var(--aurora-pink) 100%);
  --primary-soft-grad:
    radial-gradient(circle at 20% 16%, rgba(255,255,255,.20) 0 12%, transparent 30%),
    radial-gradient(circle at 84% 20%, rgba(255,120,200,.18), transparent 34%),
    linear-gradient(145deg, rgba(86,245,208,.20), rgba(122,168,255,.20) 56%, rgba(181,140,255,.18));
  --aurora-button-grad:
    radial-gradient(circle at 22% 16%, rgba(255,255,255,.24) 0 10%, transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(255,120,200,.16), transparent 34%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--aurora-cyan) 58%, #0a1430) 0%,
      color-mix(in srgb, var(--aurora-blue) 58%, #0a1430) 52%,
      color-mix(in srgb, var(--aurora-purple) 52%, #0a1430) 100%);
  --aurora-badge-grad:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.28) 0 18%, transparent 34%),
    radial-gradient(circle at 74% 20%, color-mix(in srgb, var(--aurora-cyan) 22%, transparent), transparent 36%),
    radial-gradient(circle at 24% 86%, color-mix(in srgb, var(--aurora-blue) 18%, transparent), transparent 34%),
    linear-gradient(145deg,
      color-mix(in srgb, var(--aurora-cyan) 18%, rgba(12,22,48,.92)) 0%,
      color-mix(in srgb, var(--aurora-blue) 18%, rgba(14,18,44,.92)) 55%,
      color-mix(in srgb, var(--aurora-purple) 16%, rgba(18,16,42,.92)) 100%);
  --primary-glow: 0 10px 26px rgba(86,245,208,.24), 0 0 28px rgba(181,140,255,.18);
  --primary-glow-soft: 0 8px 20px rgba(122,168,255,.16), 0 0 18px rgba(86,245,208,.12);
  --bubble-edge: color-mix(in srgb, var(--aurora-cyan) 34%, rgba(255,255,255,.08));
  --bubble-grad:
    radial-gradient(circle at 14% 12%, rgba(255,255,255,.18) 0 10%, transparent 28%),
    radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--aurora-green) 23%, transparent), transparent 32%),
    radial-gradient(circle at 20% 92%, color-mix(in srgb, var(--aurora-blue) 22%, transparent), transparent 36%),
    radial-gradient(circle at 88% 88%, color-mix(in srgb, var(--aurora-pink) 18%, transparent), transparent 34%),
    linear-gradient(145deg, rgba(18,25,49,.94), rgba(10,18,39,.90));
  --bubble-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -16px 26px rgba(86,245,208,.045),
    0 12px 32px rgba(0,0,0,.34),
    0 0 24px rgba(122,168,255,.08);
  --notice-warm-edge: color-mix(in srgb, var(--aurora-gold) 46%, transparent);
  --notice-danger-edge: color-mix(in srgb, var(--aurora-pink) 42%, transparent);
  --notice-cool-edge: color-mix(in srgb, var(--aurora-blue) 38%, transparent);
  --notice-success-edge: color-mix(in srgb, var(--aurora-green) 42%, transparent);
  --notice-warm-grad:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,.20) 0 11%, transparent 30%),
    radial-gradient(circle at 86% 14%, rgba(255,224,138,.22), transparent 36%),
    linear-gradient(146deg, rgba(23,28,49,.94), rgba(54,45,28,.62) 56%, rgba(11,23,39,.92));
  --notice-danger-grad:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,.18) 0 11%, transparent 30%),
    radial-gradient(circle at 88% 16%, rgba(255,120,200,.24), transparent 36%),
    linear-gradient(146deg, rgba(23,27,48,.94), rgba(55,25,50,.64) 58%, rgba(10,19,38,.92));
  --notice-cool-grad:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,.18) 0 11%, transparent 30%),
    radial-gradient(circle at 88% 16%, rgba(122,168,255,.23), transparent 36%),
    radial-gradient(circle at 12% 94%, rgba(86,245,208,.16), transparent 34%),
    linear-gradient(146deg, rgba(18,25,49,.94), rgba(14,28,55,.72) 58%, rgba(12,18,39,.92));
  --notice-success-grad:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,.18) 0 11%, transparent 30%),
    radial-gradient(circle at 88% 16%, rgba(73,245,155,.22), transparent 36%),
    radial-gradient(circle at 14% 94%, rgba(86,245,208,.18), transparent 34%),
    linear-gradient(146deg, rgba(18,25,49,.94), rgba(12,48,45,.66) 58%, rgba(10,20,39,.92));
  --notice-shadow: var(--bubble-shadow);
  --hero-bg:
    radial-gradient(circle at 18% 24%, rgba(86,245,208,.28), transparent 34%),
    radial-gradient(circle at 78% 20%, rgba(255,120,200,.22), transparent 34%),
    radial-gradient(circle at 50% 94%, rgba(122,168,255,.18), transparent 38%),
    linear-gradient(145deg, #101936, #0b1328 58%, #15112b);
  --badge-tile:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.22), transparent 34%),
    linear-gradient(145deg, rgba(86,245,208,.18), rgba(122,168,255,.18));
  --soft-panel: rgba(18, 26, 52, .74);
  --pattern:
    radial-gradient(circle at 18px 18px, rgba(86,245,208,.10) 0 1.5px, transparent 2px),
    radial-gradient(circle at 58px 42px, rgba(255,120,200,.08) 0 1.3px, transparent 1.8px),
    linear-gradient(115deg, rgba(86,245,208,.06), transparent 28%, rgba(122,168,255,.05) 54%, transparent 72%, rgba(255,120,200,.05));
}
[data-theme="midnight"] .login-form input,
[data-theme="midnight"] input,
[data-theme="midnight"] textarea,
[data-theme="midnight"] select {
  background: rgba(8,14,30,.74);
  border-color: var(--bubble-edge);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
[data-theme="midnight"] .btn:not(.primary):not(.ghost):not(.danger) {
  background: var(--bubble-grad);
  border-color: var(--bubble-edge);
  color: var(--text);
  box-shadow: var(--primary-glow-soft);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; width: 100%; margin: 0; overflow-x: hidden; }
body {
  font-family: -apple-system, "PingFang SC", "Segoe UI", system-ui, sans-serif;
  background: var(--pattern), linear-gradient(160deg, var(--bg1) 0%, var(--bg2) 100%);
  color: var(--text);
  display: flex; flex-direction: column; overflow: hidden;
}
.hidden { display: none !important; }

/* 按钮 */
.btn {
  border: 1px solid var(--card-bd);
  background: #fff; color: var(--text);
  border-radius: 12px; padding: 9px 16px; font-size: 14px; cursor: pointer;
  transition: transform .06s, filter .2s, background .2s;
}
.btn:active { transform: scale(.97); }
.btn.primary {
  position: relative;
  overflow: hidden;
  background: var(--primary-grad);
  color: #fff;
  border: 1px solid rgba(255,255,255,.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), inset 0 -6px 10px rgba(37,26,81,.12), var(--primary-glow);
}
.btn.primary::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 18%;
  top: 8%;
  height: 38%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0));
  pointer-events: none;
}
.btn.primary::after,
.tab.active::after,
.mt-tab.on::after,
.theme-sw.sel::after,
.lang-sw.sel::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255,255,255,.08) 42deg, rgba(255,255,255,.34) 70deg, rgba(255,255,255,.08) 96deg, transparent 132deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: glassEdgeFlow 9.6s linear infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}
.btn.primary:hover { filter: brightness(1.05); }
.btn.small { padding: 6px 12px; font-size: 13px; border-radius: 10px; }
.btn.block { width: 100%; padding: 12px; font-size: 16px; }
.btn.ghost { background: #fff; color: var(--violet); border: 1px solid var(--violet-soft); }
.btn.danger { color: var(--red); border-color: var(--red-soft); background: #fff; }
.icon-btn {
  position: relative;
  overflow: hidden;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--topbar-icon-bg);
  border: 1px solid var(--topbar-icon-edge);
  border-radius: 12px;
  color: var(--topbar-account);
  font-size: 17px;
  cursor: pointer;
  padding: 0;
  box-shadow: var(--primary-glow-soft), inset 0 1px 0 rgba(255,255,255,.42);
  transition: transform .15s ease, filter .2s ease, box-shadow .2s ease;
}
.icon-btn::before {
  content: "";
  position: absolute;
  inset: 2px 4px auto 4px;
  height: 40%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0));
  pointer-events: none;
}
.icon-btn:hover { transform: translateY(-1px); filter: brightness(1.04); }
#lbBtn { color: var(--topbar-trophy); }
#credBtn { color: var(--topbar-account); }
.topbar-svg {
  position: relative;
  z-index: 1;
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 4px color-mix(in srgb, currentColor 30%, transparent));
}
.topbar-account { width: 17px; height: 17px; }
.login-lang {
  z-index: 12;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--topbar-account);
  background: var(--topbar-icon-bg);
  border-color: var(--topbar-icon-edge);
  box-shadow:
    var(--primary-glow-soft),
    0 0 14px color-mix(in srgb, currentColor 18%, transparent),
    inset 0 1px 0 rgba(255,255,255,.42);
}
.login-lang::before {
  content: "";
  position: absolute;
  inset: 2px 4px auto 4px;
  height: 40%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0));
  pointer-events: none;
}
.login-lang-svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  filter: drop-shadow(0 2px 4px color-mix(in srgb, currentColor 38%, transparent));
}

/* 登录 */
.login-screen {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--bg1), var(--bg2));
  overflow: hidden;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}
.login-card { width: min(360px, 100%); max-width: calc(100vw - 32px); text-align: center; }
.login-logo { width: 104px; height: 104px; filter: drop-shadow(0 8px 18px rgba(124,92,255,.25)); }
/* 登录页主题图：按皮肤显示用户提供的原图。 */
.login-screen {
  --login-photo-filter: none;
  --login-photo-opacity: 1;
  --login-scene-glow: color-mix(in srgb, var(--violet) 18%, transparent);
  --login-scene-edge-a: color-mix(in srgb, var(--bg1) 72%, transparent);
  --login-scene-edge-b: color-mix(in srgb, var(--bg2) 66%, transparent);
}
[data-theme="forest"] .login-screen {
  --login-scene-glow: rgba(46, 157, 114, .18);
  /* 薄荷青色海滩图：太阳在地平线偏左 */
  --login-sun-x: 43%;
  --login-sun-y: 58%;
}
[data-theme="mint"] .login-screen {
  --login-scene-glow: rgba(33, 150, 163, .16);
  --login-sun-x: 43%;
  --login-sun-y: 58%;
}
[data-theme="starry"] .login-screen {
  --login-photo-filter: none;
  --login-photo-opacity: 1;
  --login-scene-glow: rgba(63, 115, 230, .24);
}
[data-theme="midnight"] .login-screen {
  --login-photo-filter: none;
  --login-photo-opacity: 1;
  --login-scene-glow: rgba(86, 245, 208, .24);
  --login-scene-edge-a: rgba(7, 16, 34, .82);
  --login-scene-edge-b: rgba(16, 23, 46, .78);
}
.family-scene {
  position: relative;
  width: min(344px, 100%);
  margin: 0 auto -10px;
}
.family-scene::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 7%;
  right: 7%;
  bottom: -18px;
  height: 42px;
  border-radius: 0 0 24px 24px;
  background:
    radial-gradient(ellipse at 50% 0%,
      color-mix(in srgb, var(--login-scene-edge-a) 72%, transparent) 0%,
      color-mix(in srgb, var(--login-scene-edge-b) 38%, transparent) 48%,
      transparent 78%);
  filter: blur(7px);
  pointer-events: none;
}
.fs-journey {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1672 / 941;
  isolation: isolate;
  overflow: hidden;
  border-radius: 26px;
  padding-bottom: 18px;
  filter: drop-shadow(0 14px 28px var(--login-scene-glow));
  -webkit-mask-image:
    linear-gradient(#000, #000),
    linear-gradient(#000, #000);
  -webkit-mask-size:
    calc(100% - 22px) calc(100% - 22px),
    calc(100% - 8px) calc(100% - 8px);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: source-over;
  mask-image:
    linear-gradient(#000, #000),
    linear-gradient(rgba(0,0,0,.62), rgba(0,0,0,.62));
  mask-size:
    calc(100% - 22px) calc(100% - 22px),
    calc(100% - 8px) calc(100% - 8px);
  mask-position: center;
  mask-repeat: no-repeat;
}
.fs-journey::before,
.fs-journey::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.fs-journey::before {
  background:
    linear-gradient(90deg, var(--login-scene-edge-a), transparent 7%, transparent 93%, var(--login-scene-edge-a)),
    linear-gradient(180deg, var(--login-scene-edge-b), transparent 9%, transparent 91%, var(--login-scene-edge-b));
  mix-blend-mode: screen;
  opacity: .48;
}
.fs-journey::after {
  box-shadow:
    inset 0 0 9px 3px color-mix(in srgb, var(--card) 28%, transparent),
    inset 0 0 18px 7px var(--login-scene-edge-a),
    inset 0 -8px 18px color-mix(in srgb, var(--bg2) 32%, transparent);
  background:
    linear-gradient(180deg,
      transparent 78%,
      color-mix(in srgb, var(--login-scene-edge-a) 30%, transparent) 89%,
      color-mix(in srgb, var(--bg2) 58%, transparent) 100%);
}
.fs-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.fs-photo {
  object-fit: cover;
  object-position: center;
  filter: var(--login-photo-filter);
}
.fs-photo-base {
  z-index: 0;
  opacity: 0;
}
.fs-photo-day { opacity: var(--login-photo-opacity); }
.fs-photo-mint,
.fs-photo-forest,
.fs-photo-starry,
.fs-photo-aurora { opacity: 0; }
/* 薄荷学院=蓝色海滩图 / 森林=薄荷青色海滩图（糖果晴天仍用日出图，星河/极光用各自夜景图） */
[data-theme="mint"] .fs-photo-day,
[data-theme="forest"] .fs-photo-day,
[data-theme="starry"] .fs-photo-day,
[data-theme="midnight"] .fs-photo-day { opacity: 0; }
[data-theme="mint"] .fs-photo-mint { opacity: var(--login-photo-opacity); }
[data-theme="forest"] .fs-photo-forest { opacity: var(--login-photo-opacity); }
[data-theme="starry"] .fs-photo-starry,
[data-theme="midnight"] .fs-photo-aurora { opacity: var(--login-photo-opacity); }

/* ===== 登录场景动效（叠加层，原照片一个像素不动；按主题昼/夜分别显隐） ===== */
.fs-fx { position: absolute; inset: 0; z-index: 4; pointer-events: none; transition: opacity .5s ease; }
/* 白天效果（太阳 + 海面）：默认显示，星空/极光夜景主题隐藏 */
.fs-sun, .fs-water { opacity: 1; }
[data-theme="starry"] .fs-sun, [data-theme="midnight"] .fs-sun,
[data-theme="starry"] .fs-water, [data-theme="midnight"] .fs-water { opacity: 0; }
/* 夜晚效果（星星 + 极光）：默认隐藏，仅夜景主题显示（星星=星河+极光两主题，极光流=极光主题） */
.fs-stars, .fs-aurora-flow { opacity: 0; }
[data-theme="starry"] .fs-stars, [data-theme="midnight"] .fs-stars { opacity: 1; }
[data-theme="midnight"] .fs-aurora-flow { opacity: 1; }
/* ☀️ 太阳闪耀：地平线暖色光晕脉动 + 缓慢旋转光芒 */
.fs-sun::before {
  content: ""; position: absolute; left: var(--login-sun-x, 43%); top: var(--login-sun-y, 58%); width: 15%; aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255,249,216,.92), rgba(255,214,120,.5) 40%, transparent 72%);
  mix-blend-mode: screen; filter: blur(1px);
  animation: fsSunPulse 3.4s ease-in-out infinite;
}
.fs-sun::after {
  content: ""; position: absolute; left: var(--login-sun-x, 43%); top: var(--login-sun-y, 58%); width: 34%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, transparent 0deg 9deg, rgba(255,238,176,.34) 9deg 10.6deg, transparent 10.6deg 24deg);
  -webkit-mask-image: radial-gradient(circle, #000 16%, transparent 58%);
  mask-image: radial-gradient(circle, #000 16%, transparent 58%);
  mix-blend-mode: screen;
  animation: fsSunRays 34s linear infinite;
}
@keyframes fsSunPulse { 0%, 100% { opacity: .64; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } }
@keyframes fsSunRays { to { transform: translate(-50%, -50%) rotate(360deg); } }
/* 🌊 海面波光：整片海面横向暖色波光纹缓缓向岸滚动，动态闪光 */
/* 横向流光带：集中在地平线 + 左侧海面（径向蒙版淡出沙滩/人物区），缓缓向岸滚动 */
.fs-water::before {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(178deg, transparent 0 4px, rgba(255,255,255,.20) 5px 6px, transparent 7px 12px),
    repeating-linear-gradient(182deg, transparent 0 8px, rgba(255,250,235,.13) 9px 10.5px, transparent 13px 20px);
  background-size: 100% 12px, 100% 20px;
  mix-blend-mode: screen; filter: blur(.5px);
  -webkit-mask-image: radial-gradient(150% 34% at 33% 62%, #000 30%, transparent 80%);
  mask-image: radial-gradient(150% 34% at 33% 62%, #000 30%, transparent 80%);
  animation: fsSea 5s linear infinite;
}
@keyframes fsSea { to { background-position: 0 12px, 0 20px; } }
/* ✨ 波光粼粼：海面上错峰闪动的横向高光点（仅覆盖左侧海面 + 地平线，避开沙滩与人物） */
.fs-water i {
  position: absolute; width: 5px; height: 2px; border-radius: 50%;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 0 5px 1px rgba(255, 248, 224, .85);
  mix-blend-mode: screen;
  animation: fsGlint 2.6s ease-in-out infinite;
}
@keyframes fsGlint { 0%, 100% { opacity: .3; transform: scaleX(.7); } 50% { opacity: 1; transform: scaleX(1.7); } }
/* 波光全部落在地平线以下的海面（top≥59%）；前 5 颗在太阳正下方(left≈43%)排成竖直「太阳倒影」，其余散布左侧海面 */
.fs-water i:nth-child(1)  { left: 43%; top: 59%; animation-duration: 2.2s; animation-delay: 0s; }
.fs-water i:nth-child(2)  { left: 41%; top: 61%; animation-duration: 2.9s; animation-delay: .6s; }
.fs-water i:nth-child(3)  { left: 44%; top: 63%; animation-duration: 2.4s; animation-delay: 1.1s; }
.fs-water i:nth-child(4)  { left: 42%; top: 65%; animation-duration: 3.0s; animation-delay: .3s; }
.fs-water i:nth-child(5)  { left: 44%; top: 67%; animation-duration: 2.6s; animation-delay: 1.5s; }
.fs-water i:nth-child(6)  { left: 8%;  top: 61%; animation-duration: 2.8s; animation-delay: .9s; }
.fs-water i:nth-child(7)  { left: 15%; top: 64%; animation-duration: 2.3s; animation-delay: 1.8s; }
.fs-water i:nth-child(8)  { left: 22%; top: 60%; animation-duration: 3.1s; animation-delay: .2s; }
.fs-water i:nth-child(9)  { left: 28%; top: 63%; animation-duration: 2.5s; animation-delay: 1.3s; }
.fs-water i:nth-child(10) { left: 34%; top: 61%; animation-duration: 2.7s; animation-delay: .7s; }
.fs-water i:nth-child(11) { left: 12%; top: 66%; animation-duration: 2.4s; animation-delay: 2.0s; }
.fs-water i:nth-child(12) { left: 19%; top: 67%; animation-duration: 3.2s; animation-delay: 1.0s; }
.fs-water i:nth-child(13) { left: 26%; top: 66%; animation-duration: 2.5s; animation-delay: 1.6s; }
.fs-water i:nth-child(14) { left: 32%; top: 65%; animation-duration: 2.7s; animation-delay: .45s; }
/* ✨ 星星闪烁（星河 / 极光夜景）：14 颗星点错峰呼吸闪烁 */
.fs-stars i {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 5px 1px rgba(255, 255, 255, .85);
  animation: fsTwinkle 3s ease-in-out infinite;
}
.fs-stars i:nth-child(1)  { left: 14%; top: 12%; animation-duration: 2.6s; animation-delay: 0s; }
.fs-stars i:nth-child(2)  { left: 27%; top: 21%; animation-duration: 3.2s; animation-delay: .6s; }
.fs-stars i:nth-child(3)  { left: 38%; top: 9%;  animation-duration: 2.3s; animation-delay: 1.1s; }
.fs-stars i:nth-child(4)  { left: 51%; top: 15%; animation-duration: 3.6s; animation-delay: .3s; width: 4px; height: 4px; }
.fs-stars i:nth-child(5)  { left: 63%; top: 11%; animation-duration: 2.8s; animation-delay: 1.6s; }
.fs-stars i:nth-child(6)  { left: 73%; top: 22%; animation-duration: 3.1s; animation-delay: .9s; }
.fs-stars i:nth-child(7)  { left: 85%; top: 14%; animation-duration: 2.5s; animation-delay: 2.1s; }
.fs-stars i:nth-child(8)  { left: 19%; top: 32%; animation-duration: 3.4s; animation-delay: 1.3s; }
.fs-stars i:nth-child(9)  { left: 44%; top: 28%; animation-duration: 2.7s; animation-delay: .2s; }
.fs-stars i:nth-child(10) { left: 58%; top: 34%; animation-duration: 3.3s; animation-delay: 1.8s; }
.fs-stars i:nth-child(11) { left: 69%; top: 7%;  animation-duration: 2.4s; animation-delay: .7s; width: 4px; height: 4px; }
.fs-stars i:nth-child(12) { left: 88%; top: 27%; animation-duration: 3s;   animation-delay: 2.3s; }
.fs-stars i:nth-child(13) { left: 32%; top: 37%; animation-duration: 2.9s; animation-delay: 1.5s; }
.fs-stars i:nth-child(14) { left: 80%; top: 36%; animation-duration: 3.5s; animation-delay: .5s; }
@keyframes fsTwinkle { 0%, 100% { opacity: .16; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.25); } }
/* 🌌 极光流动（极光夜景）：双层极光带反向缓缓流动 */
.fs-aurora-flow::before, .fs-aurora-flow::after {
  content: ""; position: absolute; left: -20%; right: -20%; top: 13%; height: 30%;
  background: linear-gradient(100deg, transparent 8%, rgba(86,245,208,.22) 26%, rgba(122,168,255,.2) 50%, rgba(180,120,255,.22) 72%, transparent 92%);
  filter: blur(11px); mix-blend-mode: screen;
}
.fs-aurora-flow::before { animation: fsAurora 11s ease-in-out infinite; }
.fs-aurora-flow::after { top: 22%; height: 22%; opacity: .7; animation: fsAurora 16s ease-in-out infinite reverse; }
@keyframes fsAurora { 0%, 100% { transform: translateX(-6%) skewX(-5deg); opacity: .5; } 50% { transform: translateX(6%) skewX(4deg); opacity: 1; } }

@keyframes glassEdgeFlow {
  0%, 54% { rotate: 0deg; opacity: .18; }
  64% { opacity: .55; }
  100% { rotate: 360deg; opacity: .18; }
}
@media (prefers-reduced-motion: reduce) {
  .fs-photo-base { animation: none; }
  .fs-sun::before, .fs-sun::after, .fs-water::before, .fs-water i,
  .fs-stars i, .fs-aurora-flow::before, .fs-aurora-flow::after { animation: none; }
  .btn.primary::after,
  .tab.active::after,
  .mt-tab.on::after,
  .theme-sw.sel::after,
  .lang-sw.sel::after { animation: none; display: none; }
}
@media (max-height: 760px) {
  .family-scene { width: min(294px, 100%); margin-bottom: -10px; }
  .family-scene::after { bottom: -17px; height: 38px; }
  .login-brand { margin-bottom: 14px; }
}
.login-brand {
  font-size: clamp(22px, 6vw, 26px); font-weight: 800; margin: 12px 0 26px;
  line-height: 1.16;
  overflow-wrap: anywhere;
  max-width: 100%;
  background: linear-gradient(135deg, var(--violet), var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.login-form { display: flex; flex-direction: column; gap: 12px; }
.login-form input {
  padding: 13px 14px; border-radius: 12px;
  border: 1px solid var(--card-bd); background: #fff; color: var(--text); font-size: 16px;
}
.login-err { color: var(--red); font-size: 13px; min-height: 18px; }

/* 会员套餐弹窗 */
.modal-mask.paywall { backdrop-filter: blur(3px); background: rgba(20, 12, 36, .55); }
.paywall-note { background: var(--notice-danger-grad); border: 1px solid var(--notice-danger-edge); color: var(--text); border-radius: 16px; padding: 11px 13px; font-size: 13px; line-height: 1.6; margin-bottom: 12px; box-shadow: var(--notice-shadow); }
.pay-plans { display: flex; gap: 8px; margin: 6px 0 12px; }
.pay-plan { flex: 1; border: 2px solid var(--bubble-edge); border-radius: 14px; padding: 12px 6px 10px; text-align: center; cursor: pointer; position: relative; background: var(--bubble-grad); box-shadow: inset 0 1px 0 rgba(255,255,255,.66); transition: border-color .15s, box-shadow .15s, transform .15s; }
.pay-plan.sel { border-color: var(--violet); background: var(--primary-soft-grad); box-shadow: var(--primary-glow-soft), inset 0 1px 0 rgba(255,255,255,.72); transform: translateY(-1px); }
.pp-label { font-size: 12.5px; color: var(--muted); }
.pp-price { font-size: 20px; font-weight: 800; color: var(--violet); margin-top: 2px; }
.pp-sub { font-size: 11.5px; color: var(--muted); }
.pp-tag { position: absolute; top: -9px; right: -6px; background: linear-gradient(135deg, var(--gold), #ffb84d); color: #5a3c00; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.promo-row { display: flex; gap: 8px; margin: 8px 0 2px; }
.promo-row input { flex: 1; min-width: 0; text-transform: uppercase; }
.promo-row .btn { flex: 0 0 auto; }
.promo-msg { font-size: 12px; min-height: 16px; margin-bottom: 4px; }
.promo-msg.ok { color: var(--green); }
.promo-msg.err { color: var(--red); }
/* 邀请返券：支付页提示行 + 「我的卡券」弹窗 */
.coupon-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 2px; padding: 9px 11px; border: 1px dashed var(--notice-cool-edge); border-radius: 14px; background: var(--notice-cool-grad); box-shadow: var(--notice-shadow); font-size: 13px; }
.coupon-row.active { background: var(--notice-warm-grad); border-color: var(--notice-warm-edge); border-style: solid; }
.coupon-row #couponUse.on { background: var(--primary-grad); color: #fff; box-shadow: var(--primary-glow-soft); }
.cc-group { margin-bottom: 14px; }
.cc-h { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 6px; }
.coupon-card { border: 1px solid var(--bubble-edge); border-radius: 16px; padding: 11px 13px; margin-bottom: 8px; background: var(--bubble-grad); box-shadow: var(--notice-shadow); }
.coupon-card.ok { border-color: var(--notice-success-edge); background: var(--notice-success-grad); }
.coupon-card.spent { opacity: .55; }
.cc-face { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--text); }
.cc-pill { margin-left: auto; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: rgba(0,0,0,.06); color: var(--muted); }
.cc-pill.ok { background: var(--green); color: #fff; }
.cc-pill.warn { background: var(--gold); color: #fff; }
.cc-sub { font-size: 12px; color: var(--muted); margin-top: 5px; line-height: 1.45; }
/* 动态与消息：右下角翻页（每页 6 条） */
.feed-pager { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 8px; }
.feed-pager .pg-btn { width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--card-bd); background: var(--card); color: var(--text); font-size: 18px; line-height: 1; cursor: pointer; }
.feed-pager .pg-btn:disabled { opacity: .35; cursor: default; }
.feed-pager .pg-info { font-size: 12.5px; color: var(--muted); min-width: 44px; text-align: center; }
/* 发布任务目标卡：整卡可点编辑，✕ 删除在右上角 */
.goal-mini-card { position: relative; cursor: pointer; }
.goal-mini-card .gdel { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--card-bd); background: var(--card); color: var(--muted); font-size: 13px; line-height: 1; cursor: pointer; z-index: 2; }
.goal-mini-card .gdel:hover { color: var(--red); border-color: var(--red); }
.goal-mini-card .t-top { padding-right: 26px; }
/* 账号设置：底部滑动快捷卡 */
.acct-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.acct-actions .btn { flex: 0 0 auto; }
.modal-mask.account-modal .modal {
  height: min(720px, 92vh);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 20px 0 0;
}
.modal-mask.account-modal .modal > h3 {
  flex: 0 0 auto;
  padding: 0 18px;
  margin-bottom: 12px;
}
.acct-sheet {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.acct-scroll {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 18px 16px;
}
.account-modal .acct-head,
.account-modal .field {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--bubble-edge);
  border-radius: 19px;
  padding: 13px;
  margin-bottom: 12px;
  background: var(--bubble-grad);
  box-shadow: var(--bubble-shadow);
}
.account-modal .acct-head::before,
.account-modal .field::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  pointer-events: none;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.54), rgba(255,255,255,0) 34%),
    radial-gradient(circle at 82% 82%, color-mix(in srgb, var(--violet-soft) 42%, transparent), transparent 38%);
  opacity: .8;
}
.account-modal .acct-head > *,
.account-modal .field > * {
  position: relative;
  z-index: 1;
}
.account-modal .acct-head {
  padding-bottom: 13px;
  border-bottom: 1px solid var(--bubble-edge);
}
.account-modal .field > label,
.account-modal .acct-label {
  color: var(--violet-d);
  font-weight: 800;
  letter-spacing: 0;
}
.account-modal input,
.account-modal select,
.account-modal textarea {
  background: rgba(255,255,255,.82);
  border-color: color-mix(in srgb, var(--card-bd) 72%, var(--violet-soft));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.66);
}
.account-modal .acct-lang-field,
.account-modal .acct-theme-field {
  padding: 10px 13px 12px;
}
.acct-lang-row,
.acct-theme-row {
  width: 100%;
  min-height: 58px;
  border: 1px solid color-mix(in srgb, var(--card-bd) 70%, var(--violet-soft));
  border-radius: 16px;
  background:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,.84), transparent 32%),
    linear-gradient(145deg, color-mix(in srgb, var(--card) 88%, var(--green-soft)), color-mix(in srgb, var(--violet-soft) 58%, var(--gold-soft)));
  color: var(--text);
  box-shadow: 0 6px 14px rgba(58,51,87,.07);
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.acct-lang-row:active,
.acct-theme-row:active {
  transform: scale(.99);
}
.acct-theme-copy {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.acct-theme-copy b {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.1;
}
.acct-theme-copy small {
  font-size: 14px;
  font-weight: 800;
  color: var(--violet-d);
  line-height: 1.15;
}
.acct-setting-ic {
  width: 38px;
  height: 38px;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background:
    radial-gradient(circle at 26% 18%, rgba(255,255,255,.88), transparent 32%),
    linear-gradient(145deg, var(--violet), var(--green));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.58), 0 6px 12px color-mix(in srgb, var(--violet) 18%, transparent);
  position: relative;
}
.acct-setting-ic.theme::before {
  content: "";
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: conic-gradient(var(--violet), var(--gold), var(--green), var(--red), var(--violet));
  box-shadow: inset 0 0 0 5px rgba(255,255,255,.65), 0 2px 6px rgba(0,0,0,.12);
}
.acct-setting-ic.lang {
  background:
    radial-gradient(circle at 26% 18%, rgba(255,255,255,.88), transparent 32%),
    linear-gradient(145deg, var(--green), var(--violet));
}
.acct-setting-ic.lang::before {
  content: "";
  width: 23px;
  height: 18px;
  border-radius: 7px;
  background: rgba(255,255,255,.78);
  box-shadow: inset 0 -5px 0 color-mix(in srgb, var(--green) 42%, var(--violet-soft)), 0 2px 7px rgba(0,0,0,.10);
}
.acct-setting-ic.lang::after {
  content: "A";
  position: absolute;
  right: 8px;
  top: 8px;
  font-size: 10px;
  font-weight: 900;
  color: var(--violet);
}
.acct-chevron {
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--violet);
  border-bottom: 2px solid var(--violet);
  transform: rotate(45deg);
  transition: transform .18s ease;
  margin-right: 3px;
}
.acct-lang-row.open .acct-chevron,
.acct-theme-row.open .acct-chevron {
  transform: rotate(225deg);
}
.acct-lang-menu,
.acct-theme-menu {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed color-mix(in srgb, var(--card-bd) 82%, var(--violet-soft));
}
.account-modal .theme-sw {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 25% 18%, rgba(255,255,255,.78), transparent 34%),
    linear-gradient(145deg, var(--card), color-mix(in srgb, var(--violet-soft) 58%, var(--green-soft)));
  box-shadow: 0 5px 12px rgba(58,51,87,.06);
}
.account-modal .theme-sw.sel {
  background: var(--primary-soft-grad);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--violet) 36%, transparent), var(--primary-glow-soft);
}
.account-modal .theme-pick {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.account-modal .theme-sw {
  min-height: 48px;
  justify-content: flex-start;
  padding: 8px 9px;
  border-radius: 14px;
  text-align: left;
}
.account-modal .theme-sw small {
  display: block;
  margin-left: auto;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
}
.account-modal .theme-name {
  min-width: 0;
  font-weight: 800;
  line-height: 1.15;
}
.account-modal .lang-pick {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.lang-sw {
  position: relative;
  overflow: hidden;
  min-height: 48px;
  border: 1px solid color-mix(in srgb, var(--card-bd) 76%, var(--green-soft));
  border-radius: 14px;
  background:
    radial-gradient(circle at 23% 18%, rgba(255,255,255,.78), transparent 34%),
    linear-gradient(145deg, var(--card), color-mix(in srgb, var(--green-soft) 58%, var(--violet-soft)));
  color: var(--text);
  box-shadow: 0 5px 12px rgba(58,51,87,.06);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}
.lang-sw.sel {
  border-color: color-mix(in srgb, var(--green) 64%, var(--violet));
  background: var(--primary-soft-grad);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 30%, transparent), var(--primary-glow-soft);
}
.lang-sw-ic {
  width: 28px;
  height: 28px;
  border-radius: 11px;
  background: linear-gradient(145deg, var(--green), var(--violet));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.52), 0 5px 10px color-mix(in srgb, var(--green) 18%, transparent);
}
.lang-name {
  min-width: 0;
  font-weight: 800;
  line-height: 1.15;
}
.lang-sw small {
  margin-left: auto;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
}
.acct-end-zone {
  position: relative;
  margin: 4px 0 10px;
  padding: 18px 2px 2px;
}
.acct-end-zone::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 24%;
  right: 24%;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--card-bd) 78%, var(--violet-soft)), transparent);
}
.acct-action-dock {
  flex: 0 0 auto;
  padding: 7px 0 calc(10px + env(safe-area-inset-bottom));
  background:
    linear-gradient(180deg, rgba(255,255,255,0), var(--card) 24%),
    color-mix(in srgb, var(--card) 92%, var(--violet-soft));
  border-top: 1px solid var(--card-bd);
  box-shadow: 0 -10px 22px rgba(58,51,87,.08);
}
.acct-dock-toggle {
  width: 72px;
  height: 22px;
  border: 0;
  border-radius: 999px;
  padding: 0;
  margin: 0 auto 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 35% 20%, rgba(255,255,255,.82), transparent 38%),
    linear-gradient(145deg, color-mix(in srgb, var(--card) 78%, var(--violet-soft)), color-mix(in srgb, var(--green-soft) 60%, var(--gold-soft)));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.74), 0 5px 13px color-mix(in srgb, var(--violet) 12%, transparent);
  cursor: pointer;
}
.acct-dock-toggle span {
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--violet);
  border-bottom: 2px solid var(--violet);
  transform: rotate(225deg) translate(1px, 1px);
  transition: transform .18s ease;
}
.acct-action-dock.expanded .acct-dock-toggle span {
  transform: rotate(45deg) translate(-1px, -1px);
}
.account-modal .acct-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding: 0 18px 2px;
  margin: 0;
}
.acct-action-dock.collapsed .acct-actions,
.acct-action-dock.expanded .acct-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  overflow-x: hidden;
  padding-bottom: 2px;
}
.acct-action-dock.collapsed .acct-action-card:nth-child(n+5) {
  display: none;
}
.acct-action-dock.expanded .acct-actions {
  max-height: 166px;
  overflow-y: auto;
}
.acct-action-card {
  flex: 0 0 86px;
  min-height: 76px;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 19px;
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.88), transparent 30%),
    linear-gradient(145deg, color-mix(in srgb, var(--card) 82%, var(--violet-soft)), color-mix(in srgb, var(--gold-soft) 46%, var(--green-soft)));
  color: var(--text);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
  font-family: inherit;
  scroll-snap-align: start;
  position: relative;
}
.acct-action-dock.collapsed .acct-action-card,
.acct-action-dock.expanded .acct-action-card {
  flex: none;
  width: 100%;
  min-width: 0;
  min-height: 72px;
}
.acct-action-card:active { transform: scale(.98); }
.acct-action-card b { font-size: 12px; line-height: 1; white-space: nowrap; }
.acct-action-card .count-badge { position: absolute; top: 7px; right: 7px; }
.acct-action-ic {
  width: 34px;
  height: 34px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, var(--violet-soft), var(--card));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.66), 0 5px 11px color-mix(in srgb, var(--violet) 16%, transparent);
  position: relative;
}
.acct-action-ic.coupon::before { content: ""; width: 22px; height: 14px; border-radius: 5px; background: linear-gradient(90deg, var(--red), var(--gold)); box-shadow: inset 8px 0 0 rgba(255,255,255,.28); }
.acct-action-ic.suggest::before { content: ""; width: 21px; height: 17px; border-radius: 7px 7px 7px 2px; background: linear-gradient(145deg, var(--green), var(--violet)); }
.acct-action-ic.suggest::after { content: ""; position: absolute; width: 11px; height: 2px; border-radius: 999px; background: rgba(255,255,255,.75); box-shadow: 0 5px 0 rgba(255,255,255,.62); }
.acct-action-ic.members::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--violet); box-shadow: -8px 5px 0 -1px var(--green), 8px 5px 0 -1px var(--gold); }
.acct-action-ic.password::before { content: ""; width: 18px; height: 13px; border-radius: 5px; background: linear-gradient(145deg, var(--gold), var(--violet)); }
.acct-action-ic.password::after { content: ""; position: absolute; width: 13px; height: 10px; border: 3px solid var(--violet); border-bottom: 0; border-radius: 9px 9px 0 0; top: 7px; }
.acct-action-ic.tour::before { content: ""; width: 20px; height: 22px; border-radius: 4px 9px 9px 4px; background: linear-gradient(90deg, var(--violet), var(--green)); box-shadow: inset 4px 0 0 rgba(255,255,255,.55); }
.acct-action-ic.families::before { content: ""; width: 23px; height: 16px; background: linear-gradient(180deg, var(--gold) 0 4px, var(--violet) 4px 100%); clip-path: polygon(50% 0, 100% 38%, 88% 38%, 88% 100%, 12% 100%, 12% 38%, 0 38%); }
/* 账号设置下沿快捷入口打开的子弹窗：与账号设置页同等级主题渲染 */
.account-sub-modal .modal {
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--violet-soft) 72%, transparent), transparent 34%),
    radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--gold-soft) 62%, transparent), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--card) 92%, var(--violet-soft)), var(--card) 72%);
  border-color: color-mix(in srgb, var(--card-bd) 70%, rgba(255,255,255,.82));
}
.account-sub-modal .modal > h3 {
  color: var(--text);
  margin-bottom: 12px;
}
.sub-hero {
  display: flex;
  gap: 12px;
  align-items: center;
  border-radius: 20px;
  padding: 13px 14px;
  margin: 2px 0 12px;
  background:
    radial-gradient(circle at 22% 14%, rgba(255,255,255,.86), transparent 34%),
    var(--primary-soft-grad);
  border: 1px solid color-mix(in srgb, var(--violet) 18%, rgba(255,255,255,.72));
  box-shadow: var(--primary-glow-soft);
}
.sub-hero-ic {
  width: 46px;
  height: 46px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 23px;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.88), transparent 34%),
    linear-gradient(145deg, var(--violet), var(--gold));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.58), 0 7px 16px color-mix(in srgb, var(--violet) 18%, transparent);
}
.sub-hero-copy { display: grid; gap: 3px; min-width: 0; }
.sub-hero-copy b { font-size: 15px; color: var(--violet-d); line-height: 1.2; }
.sub-hero-copy small { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.sub-panel {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--card-bd) 74%, rgba(255,255,255,.72));
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.80), transparent 30%),
    var(--bubble-grad);
  box-shadow: var(--bubble-shadow);
  padding: 12px;
  margin-bottom: 12px;
}
.sub-panel::before {
  content: "";
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 42%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.42), transparent);
  pointer-events: none;
}
.sub-panel > * { position: relative; z-index: 1; }
.sub-panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 9px;
  font-size: 13px;
  font-weight: 900;
  color: var(--violet-d);
}
.sub-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.sub-list .card,
.account-sub-modal .card {
  margin-bottom: 0;
  border-radius: 16px;
  background:
    radial-gradient(circle at 24% 14%, rgba(255,255,255,.78), transparent 30%),
    linear-gradient(145deg, color-mix(in srgb, var(--card) 90%, var(--violet-soft)), color-mix(in srgb, var(--card) 82%, var(--green-soft)));
  box-shadow: 0 7px 16px color-mix(in srgb, var(--violet) 9%, transparent);
}
.account-sub-modal .field {
  border-radius: 15px;
  padding: 10px;
  margin-bottom: 10px;
  background: color-mix(in srgb, var(--card) 72%, rgba(255,255,255,.38));
  border: 1px solid color-mix(in srgb, var(--card-bd) 70%, transparent);
}
.account-sub-modal input,
.account-sub-modal textarea,
.account-sub-modal select {
  background: color-mix(in srgb, var(--card) 88%, rgba(255,255,255,.72));
}
.sub-form {
  border: 1px solid color-mix(in srgb, var(--card-bd) 74%, rgba(255,255,255,.72));
  border-radius: 15px;
  padding: 10px;
  margin-bottom: 10px;
  background: color-mix(in srgb, var(--card) 78%, var(--violet-soft));
}
/* 设置图标红点：有待审批加入申请 */
.icon-btn.noti { position: relative; }
.icon-btn.noti::after { content: ""; position: absolute; top: 2px; right: 2px; width: 9px; height: 9px; border-radius: 50%; background: var(--red); border: 2px solid var(--bg); }
/* 按键右上角红点：如「发布任务 → 审批台」有待办 */
.dot-noti { position: absolute; top: -4px; right: -4px; width: 11px; height: 11px; border-radius: 50%; background: var(--red); border: 2px solid var(--bg); }
.pay-agree { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--text); margin: 4px 0 2px; cursor: pointer; line-height: 1.5; }
.pay-agree input { width: 16px; height: 16px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--violet); }
.pay-agree a { color: var(--violet); font-weight: 600; cursor: pointer; text-decoration: underline; }
/* 未勾选同意就点支付时：闪烁高亮勾选行，提示先勾选 */
.pay-agree.flash { animation: payAgreeFlash 1.6s ease; border-radius: 10px; padding: 4px 6px; margin: 4px -6px 2px; }
@keyframes payAgreeFlash { 0%, 100% { background: transparent; box-shadow: none; } 18%, 58% { background: rgba(124, 92, 255, .16); box-shadow: 0 0 0 2px var(--violet); } }
.terms-body { font-size: 13px; line-height: 1.65; max-height: 56vh; overflow-y: auto; }
.terms-body p { margin: 0 0 10px; }
.terms-body b { color: var(--violet); }

/* 皮肤选择器 */
.theme-pick { display: flex; gap: 8px; flex-wrap: wrap; }
.theme-sw { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; border: 2px solid var(--card-bd); background: #fff; color: var(--text); font-size: 13px; cursor: pointer; }
.theme-sw.sel { border-color: var(--violet); background: var(--primary-soft-grad); box-shadow: var(--primary-glow-soft); font-weight: 600; }
.sw-dots { display: inline-flex; gap: 3px; }
.sw-dots i { width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(0,0,0,.08); }

/* 每周排行榜（领奖台） */
.lb-podium { display: flex; align-items: flex-end; justify-content: center; gap: 10px; margin: 8px 0 4px; }
.lb-col { display: flex; flex-direction: column; align-items: center; width: 92px; }
.lb-medal { font-size: 22px; margin-bottom: 2px; }
.lb-ava { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 17px; color: #fff; background: linear-gradient(135deg, var(--violet), var(--violet-d)); box-shadow: 0 3px 10px rgba(0,0,0,.12); margin-bottom: 4px; }
.lb-name { font-size: 12.5px; font-weight: 600; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-pts { font-size: 15px; font-weight: 800; color: var(--violet); margin: 1px 0 6px; min-height: 20px; }
.lb-pts span { font-size: 10.5px; font-weight: 600; color: var(--muted); margin-left: 2px; }
.lb-block { width: 100%; border-radius: 10px 10px 0 0; }
.lb-1 .lb-block { height: 84px; background: linear-gradient(180deg, #ffd76a, var(--gold)); }
.lb-2 .lb-block { height: 60px; background: linear-gradient(180deg, #e8e8f2, #c4c4d6); }
.lb-3 .lb-block { height: 44px; background: linear-gradient(180deg, #ffc39e, #e8915e); }
.lb-1 .lb-ava { background: linear-gradient(135deg, #ffb300, var(--gold)); transform: scale(1.12); }
.lb-empty { opacity: .45; }
.lb-col.me .lb-name { color: var(--violet); }
.lb-col.me .lb-ava { outline: 3px solid var(--violet-soft); }
.lb-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.lb-row { display: flex; align-items: center; gap: 10px; background: var(--violet-soft); border-radius: 10px; padding: 8px 12px; font-size: 13.5px; }
.lb-row.me { outline: 2px solid var(--violet); }
/* 家庭 PK 榜：奖牌排名行 + ✕ 解除配对 */
.pk-row { display: flex; align-items: center; gap: 8px; background: var(--violet-soft); border-radius: 10px; padding: 9px 10px 9px 12px; font-size: 13.5px; margin-bottom: 6px; }
.pk-row.me { outline: 2px solid var(--violet); }
.pk-row.pending { opacity: .75; }
.pk-medal { font-size: 18px; flex: 0 0 auto; }
.pk-rank { width: 18px; font-size: 12px; font-weight: 700; color: var(--muted); flex: 0 0 auto; text-align: center; }
.pk-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pk-name .pk-no { font-style: normal; font-size: 11.5px; color: var(--muted); margin-left: 6px; font-weight: 400; }
.pk-name .pk-meTag { font-style: normal; font-size: 10.5px; color: #fff; background: var(--violet); border-radius: 999px; padding: 1px 7px; margin-left: 6px; font-weight: 700; }
.pk-score { color: var(--violet); flex: 0 0 auto; }
.pk-x { flex: 0 0 auto; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .07); color: var(--muted); font-size: 12px; cursor: pointer; line-height: 1; }
.pk-x:hover { background: var(--red); color: #fff; }
.pk-x.ph { background: transparent; cursor: default; }
.lb-rank { width: 22px; height: 22px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--muted); flex: 0 0 auto; }
.lb-rname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-rscore { color: var(--violet); }

/* 我的家庭卡：清爽分组排版 */
.family-card .field { margin-bottom: 14px; }
.family-card .field:last-child { margin-bottom: 0; }
.fc-row { display: flex; gap: 8px; align-items: center; }
.fc-row > input, .fc-row > select { flex: 1; min-width: 0; }
.fc-info { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13.5px; margin: -2px 0 14px; }
.fc-info .fc-k { color: var(--muted); font-size: 11.5px; display: block; margin-bottom: 1px; }
.fc-info .fam-no, .fc-info .fam-code { color: var(--violet); font-weight: 700; letter-spacing: 1px; font-size: 15px; }
.fc-hint { font-size: 11.5px; color: var(--muted); line-height: 1.55; margin-top: 6px; }
.fc-bill { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 14px 0 10px; padding-top: 14px; border-top: 1px dashed var(--card-bd); }

/* 官方工具行 */
.official-tools { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--muted); margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px dashed var(--card-bd); }

/* 账号设置：名字（可改）+ 家庭号 + 使用期限 */
.acct-head { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px dashed var(--card-bd); }
.acct-label { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 4px; }
.acct-control-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto; /* 按键列按文字宽度自适应：中文「续费」窄、法语「Renouveler」也放得下不溢出 */
  gap: 8px;
  align-items: center;
}
.acct-control-row input { min-width: 0; }
.acct-name-row input { font-size: 16px; font-weight: 700; color: var(--text); }
.account-modal .acct-inline-action {
  width: 66px; /* 同语言下所有内联按键等宽（保存/邀请/续费/绑定对齐）；法语词长见下方加宽 */
  min-width: 66px;
  height: 36px;
  padding: 0 8px;
  border-radius: 12px;
  font-size: 12.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  line-height: 1;
}
html[lang="fr"] .account-modal .acct-inline-action { width: 96px; min-width: 96px; } /* 法语词长（Renouveler/Enregistrer/Associer）统一加宽，全部等大不溢出 */
.acct-famno { font-size: 13px; color: var(--text); margin-top: 8px; }
.acct-fam-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px auto;
  gap: 8px;
  align-items: center;
}
.acct-fam-row > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acct-famno b { color: var(--violet); letter-spacing: 1px; }
.copy-btn {
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--card-bd) 72%, var(--violet-soft));
  border-radius: 12px;
  background: rgba(255,255,255,.68);
  cursor: pointer;
  font-size: 15px;
  padding: 0;
  margin: 0;
  vertical-align: middle;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.66), 0 4px 10px rgba(58,51,87,.06);
}
.copy-btn:active { transform: scale(.9); }
.acct-valid { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.acct-valid-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}
.acct-valid-row > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acct-valid.free { color: var(--green); }
.acct-valid.exp { color: var(--red); }
@media (max-width: 360px) {
  .acct-control-row,
  .acct-valid-row { grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
  .acct-fam-row { grid-template-columns: minmax(0, 1fr) 32px auto; gap: 7px; }
  .account-modal .acct-inline-action { width: 60px; min-width: 60px; font-size: 11.5px; padding: 0 7px; }
  html[lang="fr"] .account-modal .acct-inline-action { width: 88px; min-width: 88px; }
  .copy-btn { width: 32px; height: 32px; }
}

/* 等待审批页（注册即申请加入家庭） */
.wait-screen { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--bg1), var(--bg2)); padding: 20px; }
.wait-card { background: var(--card); border: 1px solid var(--card-bd); border-radius: 20px; box-shadow: var(--shadow); padding: 30px 26px; max-width: 420px; text-align: center; }
.wait-ico { font-size: 44px; margin-bottom: 8px; animation: waitPulse 2s ease-in-out infinite; }
.wait-card h3 { margin: 0 0 10px; color: var(--violet); }
.wait-card p { font-size: 13.5px; line-height: 1.7; color: var(--muted); margin: 0 0 16px; }
@keyframes waitPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* 动态流里的管理员转让消息 */
.feed-item.transfer { background: linear-gradient(135deg, var(--gold-soft), #fff); border: 1px solid var(--gold); }

/* 维护预告横向滚动字幕（跑马灯） */
.maint-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 1400; background: linear-gradient(90deg, var(--gold), #ffb84d); color: #5a3c00; font-size: 13.5px; font-weight: 600; height: 32px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.maint-track { display: inline-flex; white-space: nowrap; will-change: transform; animation: maintScroll 22s linear infinite; }
.maint-track span { padding: 0 40px; line-height: 32px; }
@keyframes maintScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
body:has(.maint-bar) .topbar { top: 32px; } /* 字幕条把顶栏往下挤，避免遮挡 */

/* 语言切换气泡提示 */
.lang-tip {
  position: fixed; z-index: 1500; max-width: min(240px, calc(100vw - 24px));
  background: var(--bubble-grad); color: var(--text); border: 1px solid var(--bubble-edge);
  border-radius: 12px; padding: 10px 30px 10px 12px; font-size: 13px; line-height: 1.5;
  box-shadow: var(--bubble-shadow); animation: tipIn .25s ease;
  overflow-wrap: anywhere;
}
.lang-tip span { color: var(--muted); font-size: 12px; }
.lang-tip::before {
  content: ""; position: absolute; top: -6px; right: 16px; width: 10px; height: 10px;
  background: color-mix(in srgb, var(--card) 78%, var(--violet-soft)); border-left: 1px solid var(--bubble-edge); border-top: 1px solid var(--bubble-edge);
  transform: rotate(45deg);
}
.lt-x { position: absolute; top: 4px; right: 6px; border: 0; background: none; font-size: 16px; color: var(--muted); cursor: pointer; padding: 2px; }
@keyframes tipIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* 新手教程 */
.tut-icon { font-size: 52px; text-align: center; margin: 8px 0 6px; }
.tut-title { font-size: 18px; font-weight: 800; text-align: center; color: var(--violet); margin-bottom: 14px; }
.tut-text { font-size: 14px; line-height: 1.6; color: var(--text); min-height: 168px; }
.tut-text b { color: var(--violet-d, var(--violet)); }
/* 教程要点卡：每条一句话，圆角软底、留白，告别文字墙 */
.tut-pts { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.tut-pt { background: var(--soft-panel, rgba(124, 92, 255, .06)); border: 1px solid var(--card-bd); border-radius: 14px; padding: 12px 14px; font-size: 14px; line-height: 1.55; }
.tut-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.tut-dots { display: flex; gap: 6px; }
.tut-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--card-bd); transition: background .15s, transform .15s; }
.tut-dots i.on { background: var(--violet); transform: scale(1.25); }

/* 登录页：语言按钮 + 工具介绍 */
.login-card { position: relative; }
/* 语言切换钉在整页视口右上角（图片水平居中、比视口窄，故右上角是空白区，不会压住图片） */
.login-lang {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  z-index: 110;
  border: 1px solid var(--topbar-icon-edge);
  background: var(--topbar-icon-bg);
  border-radius: 10px;
  width: 34px;
  height: 34px;
  font-size: 16px;
  cursor: pointer;
}
.login-intro { font-size: 12.5px; color: var(--muted); line-height: 1.6; text-align: center; margin: 6px 0 10px; }
/* 登录页「查看价格」药丸按钮 */
.login-pricing { display: block; margin: 0 auto 14px; padding: 7px 18px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--violet) 28%, var(--card-bd));
  background: var(--primary-soft-grad, var(--violet-soft)); color: var(--violet-d, #6a4dd6);
  font-size: 13px; font-weight: 850; cursor: pointer; box-shadow: var(--bubble-shadow, var(--shadow));
  transition: transform .15s, filter .15s; }
.login-pricing:hover { transform: translateY(-1px); filter: brightness(1.04); }
/* 定价弹窗内容 */
.pricing-hero { text-align: center; margin: 2px 0 14px; }
.pricing-big { font-size: 25px; font-weight: 900; color: var(--violet-d, #6a4dd6); line-height: 1.2; }
.pricing-big .pricing-yen { font-size: 15px; color: var(--muted); font-weight: 700; }
.pricing-sub { font-size: 13px; color: var(--muted); margin-top: 5px; }
.pricing-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.pricing-list li { font-size: 13.5px; line-height: 1.55; color: var(--text); }
/* 注册页「家庭编号」输入 + 问号帮助按钮 */
.reg-famno-row { display: flex; gap: 8px; align-items: stretch; }
.reg-famno-row input { flex: 1; min-width: 0; }
.field-help { flex: none; width: 40px; border-radius: 12px; cursor: pointer; font-weight: 900; font-size: 16px;
  border: 1px solid color-mix(in srgb, var(--violet) 28%, var(--card-bd));
  background: var(--primary-soft-grad, var(--violet-soft)); color: var(--violet-d, #6a4dd6); }
.field-help:hover { filter: brightness(1.05); }
/* 家庭编号帮助弹窗 */
.famno-help-lead { font-size: 13.5px; line-height: 1.6; color: var(--text); margin: 0 0 12px; }
.famno-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 9px; }
.famno-steps li { font-size: 13.5px; line-height: 1.55; color: var(--text); }
/* 「以某成员身份查看」介绍弹窗 */
.viewas-intro p { font-size: 13.5px; line-height: 1.65; color: var(--text); margin: 0 0 11px; }
.viewas-intro p:last-child { margin-bottom: 0; }
/* 通用高亮闪烁（引导时点亮某控件，如右上角视角下拉框）；.pay-agree.flash 更具体不受影响 */
.flash { animation: uiFlash 1.3s ease 2; border-radius: 10px; }
@keyframes uiFlash { 0%, 100% { box-shadow: none; } 40% { box-shadow: 0 0 0 3px var(--violet); } }
/* 登录页右上角语言菜单（中/英/法） */
.login-lang-menu { position: fixed; top: 54px; right: 14px; z-index: 99999; display: flex; flex-direction: column; gap: 3px;
  padding: 6px; border-radius: 14px; background: var(--card); border: 1px solid var(--card-bd); box-shadow: 0 12px 32px rgba(0,0,0,.2); }
.login-lang-menu .lang-sw { padding: 8px 20px 8px 16px; border-radius: 10px; border: none; background: transparent; color: var(--text);
  font-size: 14px; font-weight: 700; cursor: pointer; text-align: left; white-space: nowrap; }
.login-lang-menu .lang-sw:hover { background: var(--violet-soft); }
.login-lang-menu .lang-sw.sel { background: var(--primary-soft-grad, var(--violet-soft)); color: var(--violet-d, #6a4dd6); }
/* 买名额弹窗：本档给 5 个账号位置的醒目提示 */
.seat-value-note { font-size: 13px; line-height: 1.5; color: var(--text); margin-bottom: 10px; padding: 8px 11px;
  border-radius: 10px; border: 1px solid color-mix(in srgb, var(--violet) 20%, var(--card-bd));
  background: var(--notice-cool-grad, color-mix(in srgb, var(--violet-soft) 50%, var(--card))); }

/* 注册邮箱验证码行 */
.reg-code-row { display: flex; gap: 8px; align-items: stretch; }
.reg-code-row.hidden { display: none; }
.reg-code-row input { flex: 1; min-width: 0; letter-spacing: 4px; font-weight: 600; }
.reg-code-row .btn { flex: 0 0 auto; white-space: nowrap; }

/* 注册/登录切换 */
.login-switch { text-align: center; margin-top: 14px; font-size: 13.5px; color: var(--muted); }
.login-switch span { cursor: pointer; }
.login-switch b { color: var(--violet); font-weight: 600; }

/* 红点计数徽标 */
.count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; vertical-align: middle; }
.card.pending { border-color: var(--red-soft); background: linear-gradient(180deg, var(--red-soft), #fff); }

/* 登录页手机访问网址 */
.login-net { margin-top: 26px; text-align: left; }
.net-title { font-size: 12.5px; color: var(--muted); margin-bottom: 8px; text-align: center; }
.net-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: #fff; border: 1px solid var(--card-bd); border-radius: 12px;
  padding: 9px 12px; margin-bottom: 8px; cursor: pointer; box-shadow: var(--shadow);
  font-size: 13px; color: var(--text);
}
.net-item:active { transform: scale(.99); }
.net-badge { flex: 0 0 auto; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--violet-soft); color: var(--violet-d); font-weight: 600; }
.net-badge.ts { background: var(--green-soft); color: var(--green); }
.net-url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, monospace; }
.net-qr { flex: 0 0 auto; font-size: 18px; color: var(--violet); }

/* 二维码弹窗 */
.qr-wrap { text-align: center; }
.qr-box { width: min(260px, 70vw); margin: 0 auto 14px; background: #fff; padding: 10px; border-radius: 16px; border: 1px solid var(--card-bd); }
.qr-box svg { width: 100%; height: auto; display: block; }
.qr-label { margin-bottom: 6px; }
.qr-url { font-family: ui-monospace, monospace; font-size: 14px; color: var(--text); word-break: break-all; }
.qr-tip { color: var(--muted); font-size: 12.5px; margin-top: 10px; line-height: 1.5; }

/* 顶栏 */
.app { display: flex; flex-direction: column; height: 100%; }
.topbar { padding: 14px 16px 6px; }
.brand { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.title { font-size: 22px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; letter-spacing: 0; }
.brand-actions { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
/* 以某成员身份查看：随姓名+角色字数自适应宽度（不再被固定宽度截断），最多 60vw，标题自动让位 */
.view-as { background: #fff; color: var(--text); border: 1px solid var(--card-bd); border-radius: 10px; padding: 5px 8px; font-size: 13px; width: auto; max-width: 60vw; }

/* Tabs */
.tabs { display: flex; gap: 6px; padding: 6px 12px 10px; overflow-x: auto; }
.tab {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto; padding: 8px 15px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.84); background: rgba(255,255,255,.74);
  color: var(--muted); font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .25s, background .25s, color .2s, border-color .25s;
}
.tab:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(124,92,255,.14); color: var(--violet-d, #6a4dd6); }
.tab:active { transform: translateY(0) scale(.95); }
.tab.active {
  color: #fff; border-color: rgba(255,255,255,.48);
  background: var(--primary-grad);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), inset 0 -6px 10px rgba(37,26,81,.10), var(--primary-glow);
  transform: translateY(-1px);
}
.tab.active:hover { transform: translateY(-2px); }
.tab .count-badge { transition: transform .2s; }

/* Main */
#main { flex: 1; min-height: 0; }
.tabpane { display: none; height: 100%; overflow-y: auto; padding: 4px 16px 90px; }
.tabpane.active { display: block; }

/* 卡片 */
.card { background: var(--card); border: 1px solid var(--card-bd); border-radius: 18px; padding: 16px; margin-bottom: 14px; box-shadow: var(--shadow); }
.card h3 { margin: 0 0 12px; font-size: 16px; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin: 8px 2px 12px; }
.section-head h2 { font-size: 17px; margin: 0; }
.muted { color: var(--muted); }
.empty { color: var(--muted); text-align: center; padding: 26px 10px; font-size: 14px; }

/* 概览固定置顶区 */
.pinned { position: sticky; top: 0; z-index: 5; background: var(--pattern), linear-gradient(160deg, var(--bg1), var(--bg2)); padding-bottom: 4px; }
.kid-dashboard { position: relative; top: auto; z-index: 1; padding-bottom: 12px; }
.kid-hero {
  display: grid;
  grid-template-columns: 1fr 78px;
  gap: 12px;
  align-items: center;
  min-height: 150px;
  padding: 17px;
  border-radius: 26px;
  background: var(--hero-bg);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: var(--shadow);
  margin: 2px 0 18px;
  overflow: hidden;
}
.kid-kicker {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(255,255,255,.72);
  color: var(--violet);
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 9px;
}
.kid-hero h2 { margin: 0; font-size: 21px; line-height: 1.22; letter-spacing: 0; color: var(--text); }
.kid-hero p { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; font-weight: 650; }
.kid-hero-art {
  --kid-hero-art-bg:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.82), transparent 30%),
    linear-gradient(145deg, var(--green), var(--gold));
  --kid-hero-art-border: rgba(255,255,255,.48);
  --kid-hero-art-shadow: inset 0 0 0 1px rgba(255,255,255,.48), 0 12px 22px rgba(58,51,87,.12);
  --kid-hero-art-icon: #ffffff;
  position: relative;
  overflow: hidden;
  width: 76px;
  height: 76px;
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kid-hero-art-bg);
  border: 1px solid var(--kid-hero-art-border);
  box-shadow: var(--kid-hero-art-shadow);
  color: var(--kid-hero-art-icon);
  font-size: 35px;
}
.kid-hero-art::before {
  content: "";
  position: absolute;
  inset: 3px 8px auto 8px;
  height: 38%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0));
  pointer-events: none;
}
.kid-hero-art > * {
  position: relative;
  z-index: 1;
}
.kid-hero-art .badge-img { width: 52px; height: 52px; }
.kid-hero-art .ui-emoji-icon {
  width: 42px;
  height: 42px;
  margin: 0;
  color: var(--kid-hero-art-icon);
  stroke-width: 1.9;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--kid-hero-art-icon) 42%, transparent));
}
[data-theme="forest"] .kid-hero-art {
  --kid-hero-art-bg:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.78), transparent 31%),
    radial-gradient(circle at 72% 82%, rgba(255,173,111,.28), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--violet) 74%, #fff), color-mix(in srgb, var(--green) 78%, var(--gold)));
  --kid-hero-art-border: color-mix(in srgb, var(--green) 34%, rgba(255,255,255,.74));
  --kid-hero-art-shadow: inset 0 1px 0 rgba(255,255,255,.58), 0 12px 22px rgba(46,126,92,.14);
}
[data-theme="starry"] .kid-hero-art {
  --kid-hero-art-bg:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.78), transparent 31%),
    radial-gradient(circle at 74% 78%, rgba(255,194,71,.30), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--violet) 78%, #fff), color-mix(in srgb, var(--green) 64%, var(--violet)));
  --kid-hero-art-border: color-mix(in srgb, var(--violet) 34%, rgba(255,255,255,.78));
  --kid-hero-art-shadow: inset 0 1px 0 rgba(255,255,255,.58), 0 12px 22px rgba(63,115,230,.15);
}
[data-theme="mint"] .kid-hero-art {
  --kid-hero-art-bg:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.78), transparent 31%),
    radial-gradient(circle at 74% 78%, rgba(242,170,73,.26), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--green) 78%, #fff), color-mix(in srgb, var(--violet) 68%, var(--gold)));
  --kid-hero-art-border: color-mix(in srgb, var(--green) 36%, rgba(255,255,255,.76));
  --kid-hero-art-shadow: inset 0 1px 0 rgba(255,255,255,.58), 0 12px 22px rgba(33,150,163,.14);
}
/* 今日进度条：单条轨道 + 按真实比例(今日完成/今日总数)填充的绿色进度 + 金色进度头圆点 */
.kid-trail { position: relative; height: 8px; border-radius: 999px; background: rgba(255,255,255,.66); margin: 14px 0 8px; }
.kid-trail-fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 999px; background: var(--green); transition: width .55s cubic-bezier(.22, 1, .36, 1); }
.kid-trail-now {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 5px rgba(255,255,255,.54), 0 5px 13px rgba(243,167,18,.28);
  transition: left .55s cubic-bezier(.22, 1, .36, 1);
}
.kid-section { margin: 0 2px 10px; }
.kid-section h2 { font-size: 18px; }
.kid-count { color: var(--muted); font-size: 12px; font-weight: 800; }
.kid-task-list { display: grid; gap: 11px; margin-bottom: 18px; }
.kid-task-card {
  width: 100%;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 92px;
  padding: 13px;
  border-radius: 22px;
  background: var(--soft-panel);
  border: 1px solid rgba(255,255,255,.88);
  color: var(--text);
  text-align: left;
  box-shadow: var(--shadow);
  cursor: pointer;
  font-family: inherit;
}
.kid-task-card:active { transform: scale(.99); }
.kid-task-ic {
  width: 48px;
  height: 48px;
  border-radius: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--badge-tile);
  font-size: 25px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
}
.kid-task-main { min-width: 0; }
.kid-task-main strong { display: block; font-size: 15px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kid-task-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 3px 0 1px; }
.kid-task-tags .chip { font-size: 10px; padding: 1px 8px; line-height: 1.6; }
.kid-task-main em { display: block; font-style: normal; color: var(--muted); font-size: 12px; font-weight: 700; margin-top: 4px; }
.kid-task-bar { display: block; height: 8px; border-radius: 999px; overflow: hidden; background: rgba(73,61,96,.10); margin-top: 8px; }
.kid-task-bar b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--gold)); }
.kid-task-action {
  min-width: 60px;
  height: 34px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  background: linear-gradient(135deg, var(--violet), var(--violet-d));
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 8px 15px rgba(124,92,255,.18);
}
/* 概览·今天的任务：横向达成进度条容器(复用 kid-task-bar 视觉) */
.kid-today-progress { margin: 2px 2px 18px; }
/* 我的任务·待办：行内快捷提交按钮——沿用 kid-task-action 外观,仅补按钮重置与「已提交」变淡禁用态 */
button.kid-task-action { border: none; cursor: pointer; font-family: inherit; }
.kid-task-action.is-submitted { opacity: .42; box-shadow: none; cursor: default; }
.wish-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wish-card {
  min-height: 83px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  border: 1px solid rgba(255,255,255,.84);
  border-radius: 21px;
  padding: 12px;
  background: var(--soft-panel);
  color: var(--text);
  text-align: left;
  box-shadow: var(--shadow);
  cursor: pointer;
  font-family: inherit;
  position: relative;
}
.wish-card:active { transform: scale(.99); }
.wish-ic { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.wish-main { min-width: 0; }
.wish-main strong { display: block; font-size: 13.5px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wish-main em { display: block; font-style: normal; margin-top: 6px; font-size: 12px; color: var(--muted); font-weight: 800; }
.wish-pct { position: absolute; right: 12px; bottom: 10px; font-size: 12px; color: var(--violet); font-weight: 900; }

/* 目标进度环 */
.goal-hero { display: flex; align-items: center; gap: 18px; }
.ring { position: relative; width: 96px; height: 96px; flex: 0 0 auto; }
.ring svg { transform: rotate(-90deg); }
.ring .pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; color: var(--violet-d); }
.goal-hero .info { flex: 1; min-width: 0; }
.goal-hero .info .gname { font-size: 16px; font-weight: 700; }
.goal-hero .info .greward { color: var(--gold); font-size: 14px; margin-top: 4px; font-weight: 600; }
.goal-hero .info .gmeta { color: var(--muted); font-size: 13px; margin-top: 4px; }

/* 概览目标：两个一行、紧凑卡（高度约减 1/3） */
.goal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.goal-grid .card.goal-mini { padding: 12px; margin: 0; }
.goal-mini .goal-hero { gap: 11px; }
.goal-mini .ring { width: 60px; height: 60px; }
.goal-mini .ring svg { width: 60px; height: 60px; }
.goal-mini .ring .pct { font-size: 14px; }
.goal-mini .info .gname { font-size: 14px; line-height: 1.25; }
.goal-mini .info .gmeta { font-size: 12px; margin-top: 2px; }
.goal-mini .info .greward { font-size: 12px; margin-top: 2px; }
.goal-mini .scale-chip { font-size: 11px; }
.goal-mini .goal-badge { flex: 0 0 auto; }
.goal-mini .goal-badge .badge-frame { transform: scale(.92); }

/* 发布页「我设定的目标」：两个一行、紧凑卡、徽章更小 */
.goal-grid .card.goal-mini-card { padding: 12px; margin: 0; }
.goal-mini-card .t-top { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 6px; }
.goal-mini-card .t-title { font-size: 14px; font-weight: 700; flex: 1 1 auto; min-width: 0; line-height: 1.25; word-break: break-word; }
.goal-mini-card .goal-badge.mini { transform: scale(.72); transform-origin: left center; margin-right: 0; }
.goal-mini-card .chip { font-size: 10.5px; padding: 1px 7px; }
.goal-mini-card .t-meta { font-size: 11.5px; margin-top: 5px; }
.goal-mini-card .t-actions { display: flex; flex-wrap: wrap; margin-top: 8px; gap: 6px; }
.goal-mini-card .t-actions .btn.small { padding: 4px 10px; font-size: 12px; }
.goal-mini-card .goal-prog { margin-top: 6px; }

/* 任务列表筛选条：时间范围 / 人 / 关键字 */
.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin: 2px 0 12px; padding: 10px 12px; background: var(--violet-soft, #f3eefc); border: 1px solid var(--card-bd); border-radius: 14px; }
.filter-bar .ff { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.filter-bar .ff.grow { flex: 1 1 140px; }
.filter-bar .ff label { font-size: 11px; color: var(--muted); font-weight: 600; padding-left: 2px; }
.filter-bar input, .filter-bar select { background: #fff; color: var(--text); border: 1px solid var(--card-bd); border-radius: 9px; padding: 6px 8px; font-size: 13px; max-width: 100%; }
.filter-bar .ff.grow input { width: 100%; }
.filter-bar > .btn.small { margin-left: auto; }
/* 我的任务筛选条·日期抽屉：发布人+关键字主行在上，日期行可收起，右侧📅▾小箭头展开 */
.filter-bar.fb-drawer { flex-direction: column; align-items: stretch; }
.filter-bar.fb-drawer .fb-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; width: 100%; }
.filter-bar.fb-drawer .fb-main { flex-wrap: nowrap; align-items: center; }
.filter-bar.fb-drawer .fb-main .ff { min-width: 0; }
.filter-bar.fb-drawer .fb-main .ff.grow { flex: 1 1 0; }
.filter-bar.fb-drawer .fb-main .ff-sel { flex: 0 1 auto; min-width: 0; height: 32px; } /* 发布人下拉(无标签)与其它控件同高同行 */
.filter-bar.fb-drawer .fb-main > .btn.small { margin-left: 0; flex: 0 0 auto; }
.fb-toggle { flex: 0 0 auto; height: 32px; padding: 0 9px; display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--card-bd); border-radius: 9px; background: #fff; color: var(--violet-d); font-size: 13px; cursor: pointer; font-family: inherit; }
.fb-toggle .fbt-ic { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; }
.filter-calendar-svg { width: 16px; height: 16px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 2px color-mix(in srgb, currentColor 26%, transparent)); }
.fb-toggle .fbt-caret { display: inline-block; color: currentColor; font-size: 11px; opacity: .86; transition: transform .2s ease; }
.fb-toggle.open .fbt-caret { transform: rotate(180deg); }
.filter-bar.fb-drawer .fb-dates[hidden] { display: none; }

/* 全局 emoji->SVG：所有 UI 图标继承当前主题色，不再固定为系统 emoji 色。 */
.ui-emoji-icon {
  width: 1.08em;
  height: 1.08em;
  display: inline-block;
  vertical-align: -0.17em;
  margin: 0 .05em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: currentColor;
  filter: drop-shadow(0 1px 2px color-mix(in srgb, currentColor 24%, transparent));
}
.btn .ui-emoji-icon,
.chip .ui-emoji-icon,
.gw-chip .ui-emoji-icon,
.seg-btn .ui-emoji-icon { margin-right: .22em; }
.kid-task-ic .ui-emoji-icon {
  width: 27px;
  height: 27px;
  margin: 0;
  color: var(--violet);
  stroke-width: 1.9;
}
.bm-task-glyph .ui-emoji-icon,
.bm-trophy .ui-emoji-icon {
  width: 1em;
  height: 1em;
  margin: 0;
  color: currentColor;
  filter: drop-shadow(0 0 7px color-mix(in srgb, currentColor 34%, transparent));
}
.bm-mark .ui-emoji-icon,
.bm-legend b .ui-emoji-icon {
  width: 12px;
  height: 12px;
  margin: 0 2px 0 0;
  vertical-align: -2px;
  filter: none;
  stroke-width: 2.4;
}
.bm-mark .ui-emoji-icon {
  margin: 0;
}
.sub-hero-ic .ui-emoji-icon {
  width: 30px;
  height: 30px;
  margin: 0;
  color: #fff;
  stroke-width: 1.9;
}
.tut-icon .ui-emoji-icon {
  width: 52px;
  height: 52px;
  margin: 0;
  color: var(--violet);
  stroke-width: 1.7;
}
.rec-item .ic .ui-emoji-icon,
.pk-medal .ui-emoji-icon {
  width: 1.35em;
  height: 1.35em;
  margin: 0;
}

/* 动态流 */
.range-bar { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 10px; }
.range-bar .rg { flex: 0 0 auto; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--card-bd); background: #fff; color: var(--muted); font-size: 13px; cursor: pointer; }
.range-bar .rg.on { background: var(--violet-soft); color: var(--violet-d); border-color: var(--violet-soft); font-weight: 600; }
.feed { display: flex; flex-direction: column; gap: 8px; }
.feed-item { display: flex; gap: 11px; align-items: flex-start; background: #fff; border: 1px solid var(--card-bd); border-radius: 14px; padding: 11px 13px; box-shadow: var(--shadow); }
.feed-item.link { cursor: pointer; }
.feed-item.link:active { transform: scale(.99); }
.feed-item .fi-ic { font-size: 20px; flex: 0 0 24px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: var(--violet); }
.feed-item .fi-ic .ui-emoji-icon {
  width: 22px;
  height: 22px;
  margin: 0;
  stroke-width: 2;
  filter: drop-shadow(0 2px 5px color-mix(in srgb, currentColor 25%, transparent));
}
.feed-item .fi-body { flex: 1; min-width: 0; }
.feed-item .fi-text { font-size: 14px; line-height: 1.45; }
.feed-item .fi-time { color: var(--muted); font-size: 12px; margin-top: 3px; }
.fi-quote .ui-emoji-icon {
  width: 1em;
  height: 1em;
  margin-right: .22em;
}

/* 任务行 */
.task { border: 1px solid var(--card-bd); border-radius: 16px; padding: 13px 14px; margin-bottom: 10px; background: #fff; box-shadow: var(--shadow); }
.task.link { cursor: pointer; }
.task .t-top { display: flex; align-items: center; gap: 8px; }
.task .t-title { font-weight: 700; font-size: 15px; flex: 1; }
.task .t-meta { color: var(--muted); font-size: 12.5px; margin-top: 6px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.task .t-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
/* 发布任务卡：编辑/删除并排放右上角，省一行高度 */
.task .t-top .t-actions.inline { margin-top: 0; flex: 0 0 auto; flex-wrap: nowrap; gap: 6px; }
.task .t-top .t-actions.inline .btn.small { padding: 4px 11px; font-size: 12px; }
.sub-row { border-top: 1px dashed var(--card-bd); padding-top: 8px; margin-top: 8px; }
.chip { font-size: 11.5px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--card-bd); color: var(--muted); background: #fff; }
.chip.type { color: var(--violet-d); border-color: var(--violet-soft); background: var(--violet-soft); }
.chip.score { color: var(--gold); border-color: var(--gold-soft); background: var(--gold-soft); }
.chip.warn { color: var(--red); border-color: var(--red-soft); background: var(--red-soft); }
.chip.ok { color: var(--green); border-color: var(--green-soft); background: var(--green-soft); }

/* 表单 */
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--card-bd); background: #fff; color: var(--text); font-size: 15px; font-family: inherit;
}
.field textarea { min-height: 80px; resize: vertical; }
.row2 { display: flex; gap: 10px; }
.row2 > * { flex: 1; }
.inline-check { display: flex; align-items: center; gap: 8px; }
.inline-check input { width: auto; }

/* 弹窗 */
.modal-mask { position: fixed; inset: 0; z-index: 200; background: rgba(58,51,87,.34); display: flex; align-items: flex-end; justify-content: center; animation: modalMaskIn .26s ease; }
.modal { position: relative; background: #fff; border: 1px solid var(--card-bd); border-radius: 22px 22px 0 0; width: min(560px, 100%); max-height: 92vh; overflow-y: auto; padding: 20px 18px 28px; box-shadow: 0 -8px 40px rgba(58,51,87,.18); animation: modalRise .36s cubic-bezier(.22, 1, .36, 1); }
/* 弹窗从底部丝滑升起（底部弹出式弹窗，升起最自然；纯入场过渡，不改任何弹窗样式） */
@keyframes modalRise { from { transform: translateY(100%); opacity: .55; } to { transform: translateY(0); opacity: 1; } }
@keyframes modalMaskIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .modal, .modal-mask { animation: none; } }
.modal-x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; padding: 0; border: none; border-radius: 50%; background: var(--violet-soft, #f3eefc); color: var(--muted, #6b6b80); font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 3; }
.modal-x:hover { background: #e7defa; color: #2a2540; }
.modal-x:active { transform: scale(.92); }
.modal > h3:first-of-type { padding-right: 40px; }
.modal h3 { margin: 0 0 16px; }
.modal-actions { display: flex; gap: 10px; margin-top: 14px; }
.modal-actions .btn { flex: 1; }
@media (min-width: 600px) { .modal-mask { align-items: center; } .modal { border-radius: 22px; } }
.modal-mask.upgrade-modal {
  align-items: center;
  background: rgba(42, 36, 64, .38);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.upgrade-modal .modal {
  width: min(440px, calc(100% - 28px));
  border-radius: 26px;
  overflow: hidden;
  padding: 20px 18px 18px;
  background:
    radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--gold-soft) 82%, transparent), transparent 30%),
    radial-gradient(circle at 86% 22%, color-mix(in srgb, var(--green-soft) 78%, transparent), transparent 30%),
    linear-gradient(150deg, var(--card), color-mix(in srgb, var(--violet-soft) 45%, var(--card)));
  box-shadow: 0 22px 54px rgba(58,51,87,.22);
}
.upgrade-card {
  display: grid;
  gap: 10px;
}
.upgrade-version {
  justify-self: start;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--violet-soft) 76%, var(--card));
  color: var(--violet-d);
  font-size: 12px;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.58);
}
.upgrade-title {
  color: var(--text);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.25;
}
.upgrade-ui-line {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
.upgrade-list {
  display: grid;
  gap: 8px;
}
.upgrade-row {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 9px 10px;
  border-radius: 16px;
  background: var(--bubble-grad);
  border: 1px solid var(--bubble-edge);
  box-shadow: var(--notice-shadow);
}
.upgrade-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  margin-top: 3px;
  flex: 0 0 auto;
  background: radial-gradient(circle at 35% 25%, #fff 0 18%, transparent 32%), linear-gradient(145deg, var(--green), var(--gold));
  box-shadow: 0 4px 9px color-mix(in srgb, var(--green) 20%, transparent);
}
.upgrade-row b {
  display: block;
  color: var(--violet-d);
  font-size: 13px;
  margin-bottom: 2px;
}
.upgrade-row p {
  margin: 0;
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.45;
}

/* 任务详情：信息排版（标签+值，留白清晰） */
.td-manage { display: flex; justify-content: flex-end; gap: 8px; margin: -4px 0 12px; }
.td-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 14px; }
.td-info { display: flex; flex-direction: column; gap: 2px; background: var(--violet-soft, #f4f0ff); border-radius: 14px; padding: 6px 14px; }
.td-row { display: flex; gap: 12px; padding: 9px 0; border-top: 1px solid rgba(120,100,180,.12); align-items: baseline; }
.td-row:first-child { border-top: none; }
.td-k { flex: 0 0 64px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.td-v { flex: 1; min-width: 0; color: var(--text, #2a2440); font-size: 13.5px; line-height: 1.55; word-break: break-word; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.td-goal {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text);
  background: var(--bubble-grad, linear-gradient(145deg, color-mix(in srgb, var(--card) 86%, var(--violet-soft)), color-mix(in srgb, var(--card) 78%, var(--green-soft))));
  border: 1px solid var(--bubble-edge, color-mix(in srgb, var(--violet) 18%, var(--card-bd)));
  box-shadow: var(--bubble-shadow, var(--shadow));
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
  text-shadow: 0 1px 2px color-mix(in srgb, var(--card) 28%, transparent);
}
.td-goal::before {
  content: "";
  position: absolute;
  inset: 1px 8px auto 8px;
  height: 38%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0));
  pointer-events: none;
}
.td-goal b {
  position: relative;
  color: var(--violet-d, #6a4dd6);
  font-weight: 850;
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
  background: var(--primary-soft-grad, var(--violet-soft));
  border: 1px solid color-mix(in srgb, var(--violet) 24%, transparent);
  border-radius: 999px;
  padding: 1px 7px;
  box-shadow: var(--primary-glow-soft, none);
}
.td-hint { flex-basis: 100%; color: var(--muted); font-size: 11.5px; }

/* 阅读任务：任务卡上的学习心得记录 */
.study-notes { margin-top: 10px; border-top: 1px dashed var(--card-bd); padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }
/* 任务卡上备注/心得的折叠收纳（默认收起，点小箭头展开） */
.notes-collapse { margin-top: 9px; border-top: 1px dashed var(--card-bd); padding-top: 7px; }
.notes-collapse > summary { cursor: pointer; font-size: 13px; color: var(--violet-d, #6a4dd6); font-weight: 600; display: flex; align-items: center; gap: 7px; user-select: none; list-style: none; }
.notes-collapse > summary::-webkit-details-marker { display: none; }
.notes-collapse > summary::before { content: "▸"; font-size: 11px; transition: transform .15s; }
.notes-collapse[open] > summary::before { transform: rotate(90deg); }
.nc-count { background: var(--violet-soft, #f3eefc); color: var(--violet-d, #6a4dd6); border-radius: 9px; padding: 0 8px; font-size: 12px; font-weight: 600; }
.notes-collapse .nc-body { display: flex; flex-direction: column; gap: 6px; margin-top: 7px; }
/* 审批弹窗里执行人提交的备注/心得：滑块框，内容多时内部滚动，避免审批框过长 */
.rv-sub-box { max-height: 168px; overflow-y: auto; background: var(--notice-warm-grad); border: 1px solid var(--notice-warm-edge); border-radius: 15px; padding: 9px 12px; box-shadow: var(--notice-shadow); font-size: 14px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; -webkit-overflow-scrolling: touch; }
.rv-sub-box .rv-amt { font-weight: 700; margin-bottom: 4px; }
/* 悬赏任务卡 */
.task.bounty { border-color: var(--gold, #f5b400); background: linear-gradient(180deg, #fffdf5, #fff); }
.chip.bounty-type { background: var(--violet-soft, #f3eefc); color: var(--violet-d, #6a4dd6); font-weight: 600; }
/* 会员到期/将到期横幅 */
.pay-banner { margin: 8px 14px 0; padding: 10px 13px; border-radius: 16px; background: var(--notice-warm-grad); border: 1px solid var(--notice-warm-edge); color: var(--text); box-shadow: var(--notice-shadow); font-size: 13px; font-weight: 700; }
/* 悬赏卡最上方醒目分值条 */
.bounty-value-bar { display: flex; align-items: center; gap: 6px; font-size: 22px; font-weight: 800; color: #a86b00; background: linear-gradient(135deg, #fff1c9, #ffe08a); border-radius: 12px; padding: 6px 12px; margin-bottom: 9px; box-shadow: inset 0 0 0 1px rgba(245,166,35,.45); }
.bounty-value-bar small { font-size: 13px; font-weight: 700; }
.bounty-value-bar .rstar-sm { width: 20px; height: 20px; }
.bounty-value-bar .bv-type { margin-left: auto; font-size: 13px; font-weight: 700; color: #6a4dd6; }
/* 我的任务顶部：进入悬赏榜的按钮 */
.btn.bounty-entry { width: 100%; justify-content: center; background: linear-gradient(135deg, #fff7e0, #ffe9a8); border-color: var(--gold, #f5b400); color: #8a5a00; font-weight: 700; margin-bottom: 12px; gap: 8px; }
.btn.bounty-entry .count-badge { background: var(--coral, #e2575b); color: #fff; }
/* 家庭信息卡（成员管理）+ 注册提示 */
.family-card .fam-no, .family-card .fam-code { font-family: ui-monospace, Menlo, monospace; font-size: 16px; letter-spacing: 1px; color: var(--violet-d, #6a4dd6); }
.login-hint { font-size: 12px; color: var(--muted, #8b86a0); line-height: 1.5; margin-top: 2px; text-align: left; }

.paywall-note,
.coupon-row,
.coupon-card,
.pay-banner,
.study-note,
.rv-sub-box,
.upgrade-row,
.rec-item.ok,
.rec-item.fail,
.td-final,
.remind-row,
.bonus-toggle,
.card.reward-pending,
.reward-waiting {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.paywall-note::before,
.coupon-row::before,
.coupon-card::before,
.pay-banner::before,
.study-note::before,
.rv-sub-box::before,
.upgrade-row::before,
.rec-item.ok::before,
.rec-item.fail::before,
.td-final::before,
.remind-row::before,
.bonus-toggle::before,
.card.reward-pending::before,
.reward-waiting::before {
  content: "";
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 44%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.48), transparent);
  opacity: .64;
  pointer-events: none;
}

/* ===== 我的任务·闯关地图（Quest Board）===== */
.mt-toggle { display: flex; gap: 8px; margin: 2px 0 12px; }
.mt-tab { flex: 1; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--card-bd); background: #fff; color: var(--muted); font-weight: 700; font-size: 14px; cursor: pointer; }
.mt-tab.on {
  position: relative;
  overflow: hidden;
  background: var(--primary-soft-grad);
  color: var(--violet-d, #6a4dd6);
  border-color: color-mix(in srgb, var(--violet) 28%, #fff);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.68), var(--primary-glow-soft);
}
.bm-hint { font-size: 12px; color: var(--muted); margin: 0 2px 8px; }
.bm-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 10px 4px 16px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 16% 22%, color-mix(in srgb, var(--gold-soft) 78%, transparent), transparent 27%),
    radial-gradient(circle at 84% 16%, color-mix(in srgb, var(--green-soft) 78%, transparent), transparent 24%),
    linear-gradient(160deg, color-mix(in srgb, var(--soft-panel) 82%, var(--green-soft)), color-mix(in srgb, var(--violet-soft) 38%, transparent));
  border: 1px solid rgba(255,255,255,.74);
  box-shadow: var(--shadow);
}
.bm-track {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: max-content;
  min-height: 228px;
  position: relative;
  padding: 18px 30px 34px;
  isolation: isolate;
}
.bm-dot, .bm-node { position: relative; z-index: 3; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; scroll-snap-align: center; }
.bm-lane-0 { transform: translateY(36px); }
.bm-lane-1 { transform: translateY(-30px); }
.bm-lane-2 { transform: translateY(18px); }
.bm-lane-3 { transform: translateY(-12px); }
.bm-band { height: 96px; display: flex; align-items: center; justify-content: center; }
.bm-dot .bm-band {
  animation: bmTaskFloat 9.5s ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
}
.bm-dot.bm-lane-0 .bm-band { --float-delay: -1.1s; }
.bm-dot.bm-lane-1 .bm-band { --float-delay: -3.2s; }
.bm-dot.bm-lane-2 .bm-band { --float-delay: -5.4s; }
.bm-dot.bm-lane-3 .bm-band { --float-delay: -7.1s; }
.bm-dot { width: 76px; background: none; border: none; cursor: pointer; padding: 0; font-family: inherit; }
/* 成长背景：完成度越高，底层主题元素越丰富；始终在任务点和目标点下方。 */
.bm-growth-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
  border-radius: 24px;
}
.bm-growth-layer::before {
  content: "";
  position: absolute;
  left: 3%;
  right: 3%;
  bottom: 2%;
  height: 54%;
  border-radius: 48% 54% 24px 24px / 38% 42% 24px 24px;
  opacity: calc(.22 + var(--lush) * .56);
  transform: scaleY(calc(.42 + var(--lush) * .58));
  transform-origin: 50% 100%;
  background:
    linear-gradient(0deg, color-mix(in srgb, var(--green-soft) 54%, transparent) 0 36%, transparent 88%),
    radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--green) 20%, transparent) 0 48%, transparent 82%);
  filter: blur(.6px);
  transition: opacity .45s ease, transform .45s ease;
}
.bm-growth-layer::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 8%;
  height: 30%;
  opacity: calc(.12 + var(--lush) * .32);
  transform: scaleY(calc(.36 + var(--lush) * .64));
  transform-origin: 50% 100%;
  background:
    repeating-linear-gradient(86deg, transparent 0 8px, color-mix(in srgb, var(--green) 34%, transparent) 8px 9px, transparent 9px 18px),
    repeating-linear-gradient(96deg, transparent 0 10px, color-mix(in srgb, var(--green-soft) 72%, var(--green)) 10px 11px, transparent 11px 23px),
    repeating-linear-gradient(104deg, transparent 0 12px, color-mix(in srgb, var(--green) 22%, transparent) 12px 13px, transparent 13px 27px);
  mask-image: linear-gradient(0deg, #000 18%, transparent 100%);
  -webkit-mask-image: linear-gradient(0deg, #000 18%, transparent 100%);
  transition: opacity .45s ease, transform .45s ease;
}
.bm-grow {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(22px * var(--s));
  height: calc(28px * var(--s));
  opacity: calc(var(--on) * (.34 + var(--lush) * .52));
  transform: translate(-50%, -50%) translateY(calc((1 - var(--on)) * 14px)) scale(calc(.68 + var(--lush) * .32)) rotate(var(--r));
  transform-origin: 50% 100%;
  filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--green) 18%, transparent));
  animation: bmGrowDrift 11s ease-in-out infinite;
  animation-delay: var(--d);
  transition: opacity .45s ease, transform .45s ease;
}
.bm-grow.sprout {
  width: calc(34px * var(--s));
  height: calc(28px * var(--s));
  background:
    linear-gradient(64deg, transparent 0 46%, color-mix(in srgb, var(--green) 62%, transparent) 47% 50%, transparent 51%),
    linear-gradient(82deg, transparent 0 46%, color-mix(in srgb, var(--green-soft) 64%, var(--green)) 47% 50%, transparent 51%),
    linear-gradient(96deg, transparent 0 46%, color-mix(in srgb, var(--green) 46%, transparent) 47% 50%, transparent 51%),
    linear-gradient(112deg, transparent 0 46%, color-mix(in srgb, var(--green-soft) 54%, var(--green)) 47% 50%, transparent 51%);
  box-shadow: none;
  filter: drop-shadow(0 5px 7px color-mix(in srgb, var(--green) 13%, transparent));
}
.bm-grow.sprout::before,
.bm-grow.sprout::after {
  content: "";
  position: absolute;
  inset: 18% 0 0;
  background:
    linear-gradient(74deg, transparent 0 47%, color-mix(in srgb, var(--green) 36%, transparent) 48% 50%, transparent 51%),
    linear-gradient(102deg, transparent 0 47%, color-mix(in srgb, var(--green-soft) 66%, var(--green)) 48% 50%, transparent 51%);
  opacity: .86;
}
.bm-grow.sprout::before { transform: translateX(-16%) rotate(-7deg); }
.bm-grow.sprout::after { transform: translateX(16%) rotate(7deg); }
.bm-grow.bloom {
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--gold) 0 18%, transparent 20%),
    radial-gradient(circle at 50% 12%, color-mix(in srgb, var(--red-soft) 62%, #fff) 0 18%, transparent 20%),
    radial-gradient(circle at 88% 50%, color-mix(in srgb, var(--violet-soft) 58%, #fff) 0 18%, transparent 20%),
    radial-gradient(circle at 50% 88%, color-mix(in srgb, var(--green-soft) 62%, #fff) 0 18%, transparent 20%),
    radial-gradient(circle at 12% 50%, color-mix(in srgb, var(--gold-soft) 70%, #fff) 0 18%, transparent 20%);
  animation-name: bmGrowDrift, bmGrowPulse;
  animation-duration: 12s, 7s;
}
.bm-grow.shine {
  width: calc(12px * var(--s));
  height: calc(12px * var(--s));
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.92), var(--gold) 48%, transparent 72%);
  box-shadow: 0 0 14px color-mix(in srgb, var(--gold) 56%, transparent);
}
/* 成长路线：JS 根据实际任务点/目标点中心生成 path，光点沿目标方向慢慢流动。 */
.bm-route-sky, .bm-route-path { position: absolute; pointer-events: none; }
.bm-route-sky { inset: 18px 18px 34px; z-index: 0; }
.bm-route-path {
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 2;
}
.bm-route-shadow,
.bm-route-road {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bm-route-shadow {
  stroke: color-mix(in srgb, var(--violet-soft) 64%, transparent);
  stroke-width: 24;
  opacity: .42;
  filter: drop-shadow(0 7px 12px color-mix(in srgb, var(--violet) 12%, transparent));
  animation: bmRouteBreath 9s ease-in-out infinite;
}
.bm-route-road {
  stroke: color-mix(in srgb, var(--violet) 64%, var(--gold));
  stroke-width: 7.5;
  stroke-dasharray: 7 16;
  animation: bmRouteDash 14s linear infinite, bmRouteBreath 9s ease-in-out infinite;
  filter: drop-shadow(0 3px 7px color-mix(in srgb, var(--violet) 18%, transparent));
  opacity: .52;
}
.bm-route-flow {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: color-mix(in srgb, #fff 78%, var(--gold));
  stroke-width: 3.2;
  stroke-dasharray: 1 24;
  animation: bmRouteFlow 10s linear infinite, bmRouteBreath 9s ease-in-out infinite;
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--violet) 24%, transparent));
  opacity: .62;
}
.bm-route-sky { overflow: hidden; }
.bm-cloud {
  position: absolute;
  width: 52px;
  height: 24px;
  border-radius: 999px;
  background: rgba(255,255,255,.58);
  box-shadow: 18px 3px 0 -5px rgba(255,255,255,.48), -14px 5px 0 -7px rgba(255,255,255,.42);
  animation: bmMapFloat 8s ease-in-out infinite;
}
.bm-cloud.c1 { left: 5%; top: 12%; }
.bm-cloud.c2 { right: 11%; bottom: 18%; animation-delay: -3s; transform: scale(.78); }
.bm-map-spark {
  position: absolute;
  color: var(--gold);
  font-size: 16px;
  line-height: 1;
  text-shadow: 0 0 10px color-mix(in srgb, var(--gold) 54%, transparent);
  animation: bmSparkle 3.6s ease-in-out infinite;
}
.bm-map-spark.s1 { left: 24%; top: 18%; }
.bm-map-spark.s2 { left: 57%; bottom: 13%; color: var(--green); animation-delay: -1.1s; }
.bm-map-spark.s3 { right: 12%; top: 30%; color: var(--violet); animation-delay: -2.2s; }
[data-theme="forest"] .bm-route-shadow {
  stroke: color-mix(in srgb, var(--green-soft) 62%, transparent);
  filter: drop-shadow(0 7px 12px color-mix(in srgb, var(--green) 12%, transparent));
}
[data-theme="forest"] .bm-route-road {
  stroke: color-mix(in srgb, var(--green) 64%, var(--gold));
  filter: drop-shadow(0 3px 7px color-mix(in srgb, var(--green) 18%, transparent));
}
[data-theme="forest"] .bm-route-flow {
  stroke: color-mix(in srgb, #fff 72%, var(--green-soft));
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--green) 34%, transparent));
}
[data-theme="forest"] .bm-grow.sprout {
  width: calc(36px * var(--s));
  height: calc(30px * var(--s));
  background:
    linear-gradient(58deg, transparent 0 46%, rgba(76,150,70,.58) 47% 50%, transparent 51%),
    linear-gradient(78deg, transparent 0 46%, rgba(140,211,100,.72) 47% 50%, transparent 51%),
    linear-gradient(96deg, transparent 0 46%, rgba(82,168,108,.52) 47% 50%, transparent 51%),
    linear-gradient(118deg, transparent 0 46%, rgba(169,224,116,.68) 47% 50%, transparent 51%);
  filter: drop-shadow(0 5px 7px color-mix(in srgb, var(--green) 16%, transparent));
}
[data-theme="forest"] .bm-growth-layer::before {
  background:
    linear-gradient(0deg, rgba(194,235,151,.46) 0 36%, transparent 88%),
    radial-gradient(ellipse at 50% 100%, rgba(99,176,93,.18) 0 48%, transparent 82%);
}
[data-theme="forest"] .bm-growth-layer::after {
  background:
    repeating-linear-gradient(86deg, transparent 0 8px, rgba(82,158,76,.34) 8px 9px, transparent 9px 18px),
    repeating-linear-gradient(96deg, transparent 0 10px, rgba(169,224,116,.46) 10px 11px, transparent 11px 23px),
    repeating-linear-gradient(104deg, transparent 0 12px, rgba(74,145,83,.22) 12px 13px, transparent 13px 27px);
}
[data-theme="forest"] .bm-grow.bloom {
  background:
    radial-gradient(circle at 50% 50%, #ffd36d 0 17%, transparent 18%),
    radial-gradient(circle at 50% 9%, #fff5b8 0 18%, transparent 20%),
    radial-gradient(circle at 90% 50%, #ffb2cc 0 18%, transparent 20%),
    radial-gradient(circle at 50% 91%, #b4ef8a 0 18%, transparent 20%),
    radial-gradient(circle at 10% 50%, #ffe0a7 0 18%, transparent 20%);
}
[data-theme="starry"] .bm-scroll {
  background:
    radial-gradient(circle at 18% 20%, color-mix(in srgb, var(--gold-soft) 65%, transparent), transparent 24%),
    radial-gradient(circle at 86% 14%, color-mix(in srgb, var(--violet-soft) 78%, transparent), transparent 26%),
    linear-gradient(160deg, color-mix(in srgb, var(--soft-panel) 76%, var(--green-soft)), color-mix(in srgb, var(--violet-soft) 64%, transparent));
}
[data-theme="starry"] .bm-growth-layer::before {
  opacity: calc(.12 + var(--lush) * .36);
  background:
    radial-gradient(circle at 18% 34%, rgba(255,255,255,.86) 0 2.4px, transparent 3.4px),
    radial-gradient(circle at 46% 24%, rgba(255,194,71,.68) 0 2px, transparent 3px),
    radial-gradient(circle at 76% 38%, rgba(255,255,255,.74) 0 1.8px, transparent 2.8px),
    radial-gradient(ellipse at 54% 58%, rgba(63,115,230,.14) 0 34%, transparent 72%),
    linear-gradient(0deg, rgba(193,218,255,.42) 0 44%, transparent 90%);
  filter: blur(.18px);
}
[data-theme="starry"] .bm-growth-layer::after {
  opacity: calc(.03 + var(--lush) * .72);
  transform: scale(calc(.72 + var(--lush) * .28));
  transform-origin: 50% 64%;
  animation: bmStarTwinkle 6.8s ease-in-out infinite;
  background:
    radial-gradient(circle at 10% 44%, rgba(255,255,255,.88) 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 18% 58%, rgba(255,194,71,.72) 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 28% 36%, rgba(116,180,255,.74) 0 1.1px, transparent 2.1px),
    radial-gradient(circle at 38% 64%, rgba(255,255,255,.82) 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 50% 46%, rgba(116,180,255,.7) 0 1.1px, transparent 2.1px),
    radial-gradient(circle at 62% 60%, rgba(255,194,71,.62) 0 1.1px, transparent 2.1px),
    radial-gradient(circle at 74% 42%, rgba(255,255,255,.82) 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 86% 56%, rgba(116,180,255,.74) 0 1.1px, transparent 2.1px),
    linear-gradient(96deg, transparent 0 43%, rgba(63,115,230,.2) 44% 45%, transparent 47% 100%),
    linear-gradient(82deg, transparent 0 48%, rgba(255,255,255,.16) 49% 50%, transparent 52% 100%);
  mask-image: linear-gradient(0deg, #000 12%, transparent 100%);
  -webkit-mask-image: linear-gradient(0deg, #000 12%, transparent 100%);
}
[data-theme="starry"] .bm-grow {
  filter: blur(calc((1 - var(--lush)) * 1.2px)) drop-shadow(0 0 12px rgba(116,180,255,.36));
  animation-name: bmStarTwinkle, bmGrowDrift;
  animation-duration: 4.8s, 12s;
  animation-timing-function: ease-in-out, ease-in-out;
  animation-iteration-count: infinite, infinite;
}
[data-theme="starry"] .bm-grow.sprout {
  width: calc(26px * var(--s));
  height: calc(3px * var(--s));
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), var(--green), var(--gold), transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--green) 58%, transparent), 10px 1px 16px rgba(255,255,255,.36);
}
[data-theme="starry"] .bm-grow.sprout::before,
[data-theme="starry"] .bm-grow.sprout::after { display: none; }
[data-theme="starry"] .bm-grow.bloom,
[data-theme="starry"] .bm-grow.shine {
  width: calc(15px * var(--s));
  height: calc(15px * var(--s));
  clip-path: polygon(50% 0, 60% 38%, 100% 50%, 60% 62%, 50% 100%, 40% 62%, 0 50%, 40% 38%);
  border-radius: 0;
  background: linear-gradient(145deg, #fff, var(--gold) 45%, var(--violet));
  box-shadow: 0 0 16px color-mix(in srgb, var(--violet) 48%, transparent);
  animation: bmStarTwinkle 5.6s ease-in-out infinite;
}
[data-theme="starry"] .bm-route-road { stroke: color-mix(in srgb, var(--violet) 62%, var(--gold)); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--violet) 24%, transparent)); }
[data-theme="starry"] .bm-route-flow { stroke: rgba(255,255,255,.94); filter: drop-shadow(0 0 9px rgba(116,180,255,.42)); }
[data-theme="mint"] .bm-growth-layer::before {
  background:
    radial-gradient(ellipse at 22% 100%, rgba(72,198,177,.22) 0 46%, transparent 72%),
    radial-gradient(ellipse at 76% 100%, rgba(255,255,255,.44) 0 34%, transparent 66%),
    linear-gradient(0deg, rgba(181,239,231,.42) 0 42%, transparent 90%);
  filter: blur(.35px);
}
[data-theme="mint"] .bm-growth-layer::after {
  background:
    radial-gradient(circle at 16% 54%, rgba(255,255,255,.64) 0 3px, rgba(72,198,177,.2) 3.5px 5px, transparent 5.6px),
    radial-gradient(circle at 38% 44%, rgba(255,255,255,.56) 0 2px, rgba(72,198,177,.18) 2.6px 4px, transparent 4.6px),
    radial-gradient(circle at 66% 58%, rgba(255,255,255,.62) 0 2.4px, rgba(33,150,163,.17) 3px 5px, transparent 5.6px),
    radial-gradient(circle at 84% 40%, rgba(255,255,255,.58) 0 1.8px, rgba(242,170,73,.16) 2.4px 4px, transparent 4.6px);
  mask-image: linear-gradient(0deg, #000 10%, transparent 100%);
  -webkit-mask-image: linear-gradient(0deg, #000 10%, transparent 100%);
}
[data-theme="mint"] .bm-grow.sprout {
  width: calc(24px * var(--s));
  height: calc(18px * var(--s));
  border-radius: 4px 10px 10px 4px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--card) 80%, var(--green-soft)) 0 48%, transparent 49%),
    linear-gradient(145deg, var(--green-soft), var(--card));
  border: 1px solid color-mix(in srgb, var(--green) 34%, #fff);
  box-shadow: 0 6px 10px color-mix(in srgb, var(--green) 14%, transparent);
}
[data-theme="mint"] .bm-grow.sprout::before,
[data-theme="mint"] .bm-grow.sprout::after { display: none; }
[data-theme="mint"] .bm-grow.bloom {
  width: calc(20px * var(--s));
  height: calc(20px * var(--s));
  border-radius: 7px;
  background:
    linear-gradient(90deg, transparent 46%, color-mix(in srgb, var(--violet) 42%, transparent) 47% 53%, transparent 54%),
    linear-gradient(0deg, transparent 46%, color-mix(in srgb, var(--gold) 48%, transparent) 47% 53%, transparent 54%),
    linear-gradient(145deg, var(--card), var(--green-soft));
  border: 1px solid color-mix(in srgb, var(--green) 32%, #fff);
}
[data-theme="mint"] .bm-grow.shine {
  border-radius: 4px 999px 999px 999px;
  background: linear-gradient(145deg, #fff, var(--gold-soft));
  box-shadow: 0 0 12px color-mix(in srgb, var(--gold) 34%, transparent);
}
[data-theme="mint"] .bm-route-road { stroke: color-mix(in srgb, var(--green) 72%, var(--gold)); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--green) 24%, transparent)); }
[data-theme="mint"] .bm-route-flow { stroke: rgba(255,255,255,.92); filter: drop-shadow(0 0 8px rgba(72,198,177,.34)); }
[data-theme="midnight"] .bm-scroll {
  background:
    radial-gradient(circle at 16% 20%, color-mix(in srgb, var(--aurora-cyan) 25%, transparent), transparent 26%),
    radial-gradient(circle at 84% 16%, color-mix(in srgb, var(--aurora-pink) 18%, transparent), transparent 26%),
    radial-gradient(circle at 58% 90%, color-mix(in srgb, var(--aurora-blue) 18%, transparent), transparent 34%),
    linear-gradient(160deg, color-mix(in srgb, var(--soft-panel) 84%, #071022), rgba(12,18,39,.88));
  border-color: color-mix(in srgb, var(--aurora-cyan) 26%, transparent);
}
[data-theme="midnight"] .bm-growth-layer::before {
  background:
    radial-gradient(circle at 20% 78%, color-mix(in srgb, var(--aurora-cyan) 26%, transparent) 0 18%, transparent 38%),
    radial-gradient(circle at 72% 82%, color-mix(in srgb, var(--aurora-pink) 20%, transparent) 0 16%, transparent 36%),
    linear-gradient(0deg, rgba(18,31,56,.70) 0 48%, transparent 90%);
  filter: blur(.2px);
}
[data-theme="midnight"] .bm-growth-layer::after {
  background:
    radial-gradient(circle at 18% 52%, rgba(255,255,255,.76) 0 1px, transparent 1.8px),
    radial-gradient(circle at 32% 62%, color-mix(in srgb, var(--aurora-purple) 64%, transparent) 0 1.2px, transparent 2px),
    radial-gradient(circle at 54% 48%, color-mix(in srgb, var(--aurora-cyan) 58%, transparent) 0 1px, transparent 1.8px),
    radial-gradient(circle at 78% 58%, color-mix(in srgb, var(--aurora-pink) 54%, transparent) 0 1.2px, transparent 2px),
    linear-gradient(62deg, transparent 0 45%, color-mix(in srgb, var(--aurora-cyan) 18%, transparent) 46% 47%, transparent 48%),
    linear-gradient(118deg, transparent 0 48%, color-mix(in srgb, var(--aurora-pink) 13%, transparent) 49% 50%, transparent 51%);
  mask-image: linear-gradient(0deg, #000 10%, transparent 100%);
  -webkit-mask-image: linear-gradient(0deg, #000 10%, transparent 100%);
}
[data-theme="midnight"] .bm-grow.sprout,
[data-theme="midnight"] .bm-grow.bloom,
[data-theme="midnight"] .bm-grow.shine {
  width: calc(13px * var(--s));
  height: calc(13px * var(--s));
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.92), var(--aurora-cyan) 38%, transparent 70%);
  box-shadow: 0 0 18px color-mix(in srgb, var(--aurora-cyan) 58%, transparent);
  filter: none;
}
[data-theme="midnight"] .bm-grow.sprout::before,
[data-theme="midnight"] .bm-grow.sprout::after { display: none; }
[data-theme="midnight"] .bm-grow.bloom { background: radial-gradient(circle, rgba(255,255,255,.9), var(--aurora-purple) 42%, transparent 72%); }
[data-theme="midnight"] .bm-grow.shine { background: radial-gradient(circle, rgba(255,255,255,.92), var(--aurora-pink) 40%, transparent 72%); }
[data-theme="midnight"] .bm-route-road { stroke: color-mix(in srgb, var(--aurora-blue) 66%, transparent); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--aurora-blue) 34%, transparent)); }
[data-theme="midnight"] .bm-route-flow { stroke: color-mix(in srgb, var(--aurora-cyan) 78%, var(--aurora-pink)); filter: drop-shadow(0 0 9px color-mix(in srgb, var(--aurora-cyan) 34%, transparent)); }
/* 任务点：不再裸 emoji，先渲染成主题色玻璃图标，再落在花园小路上。 */
.bm-dot-core {
  --dot-a: var(--gold);
  --dot-b: var(--gold-soft);
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(255,255,255,.76);
  background:
    radial-gradient(circle at 32% 25%, rgba(255,255,255,.92) 0 20%, transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--dot-b) 82%, #fff), var(--dot-a));
  box-shadow: inset 0 1px 4px rgba(255,255,255,.68), inset 0 -4px 7px rgba(0,0,0,.08), 0 8px 16px color-mix(in srgb, var(--dot-a) 24%, transparent);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.bm-task-render {
  --task-a: var(--green);
  --task-b: var(--green-soft);
  --task-accent: var(--gold);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 30px;
  height: 30px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.96) 0 18%, transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--task-b) 82%, #fff), color-mix(in srgb, var(--task-a) 86%, var(--task-accent)));
  box-shadow:
    inset 0 1px 3px rgba(255,255,255,.72),
    inset 0 -4px 8px rgba(0,0,0,.08),
    0 3px 8px color-mix(in srgb, var(--task-a) 22%, transparent);
  font-size: 18px;
  animation: bmTaskIconLive 7.4s ease-in-out infinite;
}
.bm-dot:nth-child(2n) .bm-task-render { animation-delay: -2.6s; }
.bm-task-render::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 3px;
  left: 5px;
  right: 7px;
  height: 9px;
  border-radius: 999px 999px 12px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.18));
  transform: rotate(-13deg);
  pointer-events: none;
}
.bm-task-render::after {
  content: "";
  position: absolute;
  z-index: 2;
  right: 5px;
  bottom: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff, color-mix(in srgb, var(--task-accent) 72%, transparent));
  box-shadow: 0 0 7px color-mix(in srgb, var(--task-accent) 28%, transparent);
  opacity: .74;
  pointer-events: none;
}
.bm-task-glyph {
  position: relative;
  z-index: 3;
  width: 1.12em;
  height: 1.12em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transform-origin: 50% 70%;
  filter: drop-shadow(0 1px 1px rgba(47,39,78,.22));
}
.bm-task-study .bm-task-render { --task-a: var(--violet); --task-b: var(--violet-soft); --task-accent: #7dd8ff; }
.bm-task-chore .bm-task-render { --task-a: color-mix(in srgb, var(--green) 58%, #50b8ff); --task-b: var(--green-soft); --task-accent: #ffffff; }
.bm-task-habit .bm-task-render { --task-a: var(--green); --task-b: var(--green-soft); --task-accent: #bff073; }
.bm-task-earn .bm-task-render { --task-a: var(--gold); --task-b: var(--gold-soft); --task-accent: #ffeaa3; }
.bm-task-other .bm-task-render { --task-a: color-mix(in srgb, var(--violet) 62%, var(--gold)); --task-b: var(--violet-soft); --task-accent: var(--green); }
.bm-task-habit .bm-task-glyph::before,
.bm-task-habit .bm-task-glyph::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: -3px;
  width: 9px;
  height: 6px;
  border-radius: 999px 999px 999px 3px;
  background: linear-gradient(145deg, rgba(255,255,255,.72), color-mix(in srgb, var(--green) 84%, #7fd66b));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.56);
}
.bm-task-habit .bm-task-glyph::before { left: -3px; transform: rotate(-35deg); }
.bm-task-habit .bm-task-glyph::after { right: -3px; transform: scaleX(-1) rotate(-35deg); }
[data-theme="forest"] .bm-task-render::after {
  right: 3px;
  bottom: 3px;
  width: 11px;
  height: 7px;
  border-radius: 999px 999px 999px 3px;
  background: linear-gradient(145deg, rgba(255,255,255,.76), rgba(92,176,84,.92) 56%, rgba(54,131,67,.9));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 0 7px rgba(91,176,82,.24);
  transform: rotate(-28deg);
  opacity: .9;
}
[data-theme="starry"] .bm-task-render::after {
  border-radius: 40% 60% 46% 54%;
  background: radial-gradient(circle at 35% 30%, #fff, rgba(137,178,255,.9) 48%, transparent 72%);
  box-shadow: 0 0 9px rgba(137,178,255,.38);
}
[data-theme="starry"] .bm-task-render::before {
  top: 3px;
  left: 4px;
  right: 9px;
  height: 10px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 28% 42%, rgba(255,255,255,.96) 0 32%, transparent 34%),
    linear-gradient(180deg, rgba(197,218,255,.74), rgba(255,255,255,.16));
  transform: rotate(-18deg);
}
[data-theme="starry"] .bm-task-study .bm-task-render { --task-a: #5f83ff; --task-b: #dfe9ff; --task-accent: #ffe38e; }
[data-theme="starry"] .bm-task-chore .bm-task-render { --task-a: #35bfd4; --task-b: #def8ff; --task-accent: #ffffff; }
[data-theme="starry"] .bm-task-habit .bm-task-render { --task-a: #6ad7dc; --task-b: #e2fbff; --task-accent: #b6f7ff; }
[data-theme="starry"] .bm-task-earn .bm-task-render { --task-a: #ffc247; --task-b: #fff0c7; --task-accent: #fff9d8; }
[data-theme="starry"] .bm-task-other .bm-task-render { --task-a: #8a73ff; --task-b: #efeaff; --task-accent: #bce4ff; }
[data-theme="starry"] .bm-task-glyph::before {
  content: "";
  position: absolute;
  z-index: 4;
  right: -5px;
  top: -5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.88);
  box-shadow: -3px 1px 0 rgba(116,180,255,.62), 0 0 8px rgba(116,180,255,.36);
  pointer-events: none;
}
[data-theme="starry"] .bm-task-glyph::after {
  content: "";
  position: absolute;
  z-index: 4;
  left: -5px;
  bottom: -2px;
  width: 8px;
  height: 8px;
  border-radius: 0;
  clip-path: polygon(50% 0, 62% 35%, 100% 50%, 62% 65%, 50% 100%, 38% 65%, 0 50%, 38% 35%);
  background: linear-gradient(145deg, #fff, #ffe38e);
  box-shadow: 0 0 8px rgba(255,194,71,.34);
  pointer-events: none;
}
[data-theme="mint"] .bm-task-render::after {
  border-radius: 60% 60% 70% 35%;
  background: radial-gradient(circle at 34% 26%, #fff, rgba(92,197,190,.86) 56%, transparent 76%);
  box-shadow: 0 0 8px rgba(92,197,190,.28);
}
[data-theme="mint"] .bm-task-render::before {
  top: 4px;
  left: 5px;
  right: 6px;
  height: 10px;
  border-radius: 999px 999px 14px 14px;
  background:
    radial-gradient(circle at 18% 38%, rgba(255,255,255,.95) 0 22%, transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(208,250,244,.18));
  transform: rotate(-10deg);
}
[data-theme="mint"] .bm-task-study .bm-task-render { --task-a: #2196a3; --task-b: #dff4f3; --task-accent: #fff0da; }
[data-theme="mint"] .bm-task-chore .bm-task-render { --task-a: #48c6b1; --task-b: #def7f2; --task-accent: #ffffff; }
[data-theme="mint"] .bm-task-habit .bm-task-render { --task-a: #58d9bb; --task-b: #def8f1; --task-accent: #bff4e8; }
[data-theme="mint"] .bm-task-earn .bm-task-render { --task-a: #f2aa49; --task-b: #fff0da; --task-accent: #fff8df; }
[data-theme="mint"] .bm-task-other .bm-task-render { --task-a: #7bbbd1; --task-b: #e6f8fb; --task-accent: #48c6b1; }
[data-theme="mint"] .bm-task-glyph::before {
  content: "";
  position: absolute;
  z-index: 4;
  left: -5px;
  top: -4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff, rgba(72,198,177,.46) 58%, transparent 72%);
  box-shadow: 6px -2px 0 -3px rgba(255,255,255,.72), 0 0 7px rgba(72,198,177,.22);
  pointer-events: none;
}
[data-theme="mint"] .bm-task-glyph::after {
  content: "";
  position: absolute;
  z-index: 4;
  right: -5px;
  bottom: -3px;
  width: 10px;
  height: 8px;
  border-radius: 58% 42% 68% 32%;
  background: radial-gradient(circle at 30% 24%, #fff, rgba(72,198,177,.58) 52%, rgba(33,150,163,.2) 72%, transparent 76%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.58), 0 0 7px rgba(72,198,177,.24);
  pointer-events: none;
}
[data-theme="midnight"] .bm-task-render::after {
  width: 8px;
  height: 8px;
  border-radius: 0;
  background: color-mix(in srgb, var(--aurora-cyan) 62%, var(--aurora-pink));
  clip-path: polygon(50% 0, 62% 36%, 100% 50%, 62% 64%, 50% 100%, 38% 64%, 0 50%, 38% 36%);
  box-shadow: 0 0 10px color-mix(in srgb, var(--aurora-pink) 44%, transparent);
}
[data-theme="midnight"] .bm-task-render::before {
  top: 3px;
  left: 4px;
  right: 8px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.66), color-mix(in srgb, var(--aurora-cyan) 18%, transparent));
  box-shadow: 0 0 10px color-mix(in srgb, var(--aurora-cyan) 22%, transparent);
  transform: rotate(-15deg);
}
[data-theme="midnight"] .bm-task-study .bm-task-render { --task-a: var(--aurora-blue); --task-b: rgba(122,168,255,.18); --task-accent: #dce8ff; }
[data-theme="midnight"] .bm-task-chore .bm-task-render { --task-a: var(--aurora-cyan); --task-b: rgba(86,245,208,.16); --task-accent: #dcfff7; }
[data-theme="midnight"] .bm-task-habit .bm-task-render { --task-a: var(--aurora-green); --task-b: rgba(73,245,155,.15); --task-accent: #d7ffe9; }
[data-theme="midnight"] .bm-task-earn .bm-task-render { --task-a: var(--aurora-pink); --task-b: rgba(255,120,200,.16); --task-accent: #ffe0f3; }
[data-theme="midnight"] .bm-task-other .bm-task-render { --task-a: var(--aurora-purple); --task-b: rgba(181,140,255,.16); --task-accent: #eee4ff; }
[data-theme="midnight"] .bm-task-glyph::before {
  content: "";
  position: absolute;
  z-index: 4;
  left: -5px;
  top: -5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.9), color-mix(in srgb, var(--aurora-blue) 72%, transparent) 48%, transparent 74%);
  box-shadow: 0 0 10px color-mix(in srgb, var(--aurora-blue) 50%, transparent);
  pointer-events: none;
}
[data-theme="midnight"] .bm-task-glyph::after {
  content: "";
  position: absolute;
  z-index: 4;
  right: -5px;
  bottom: -3px;
  width: 8px;
  height: 8px;
  border-radius: 0;
  clip-path: polygon(50% 0, 60% 38%, 100% 50%, 60% 62%, 50% 100%, 40% 62%, 0 50%, 40% 38%);
  background: color-mix(in srgb, var(--aurora-pink) 72%, var(--aurora-cyan));
  box-shadow: 0 0 10px color-mix(in srgb, var(--aurora-pink) 48%, transparent);
  pointer-events: none;
}
.bm-dot-label { font-size: 11px; font-weight: 700; line-height: 1.2; color: var(--text, #2a2440); max-width: 66px; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.bm-dot:active { transform: scale(.93); }
.bm-yellow .bm-dot-core { --dot-a: var(--gold); --dot-b: var(--gold-soft); }
.bm-orange .bm-dot-core { --dot-a: color-mix(in srgb, var(--gold) 58%, var(--red)); --dot-b: var(--gold-soft); }
.bm-teal .bm-dot-core { --dot-a: var(--green); --dot-b: var(--green-soft); }
.bm-purple .bm-dot-core { --dot-a: var(--violet); --dot-b: var(--violet-soft); }
[data-theme="forest"] .bm-yellow .bm-dot-core { --dot-a: #ffb071; --dot-b: #fff0df; }
[data-theme="forest"] .bm-orange .bm-dot-core { --dot-a: #e98a72; --dot-b: #ffe4d6; }
[data-theme="forest"] .bm-teal .bm-dot-core { --dot-a: #74b95d; --dot-b: #e7f5dc; }
[data-theme="forest"] .bm-purple .bm-dot-core { --dot-a: #2e9d72; --dot-b: #dff5ea; }
[data-theme="starry"] .bm-yellow .bm-dot-core { --dot-a: #ffc247; --dot-b: #fff1c9; }
[data-theme="starry"] .bm-orange .bm-dot-core { --dot-a: #ef7890; --dot-b: #ffe4ef; }
[data-theme="starry"] .bm-teal .bm-dot-core { --dot-a: #35bfd4; --dot-b: #dff8fc; }
[data-theme="starry"] .bm-purple .bm-dot-core { --dot-a: #6f79ff; --dot-b: #e5eeff; }
[data-theme="mint"] .bm-yellow .bm-dot-core { --dot-a: #f2aa49; --dot-b: #fff0da; }
[data-theme="mint"] .bm-orange .bm-dot-core { --dot-a: #e7797f; --dot-b: #ffe5e8; }
[data-theme="mint"] .bm-teal .bm-dot-core { --dot-a: #48c6b1; --dot-b: #def7f2; }
[data-theme="mint"] .bm-purple .bm-dot-core { --dot-a: #2196a3; --dot-b: #dff4f3; }
[data-theme="midnight"] .bm-yellow .bm-dot-core { --dot-a: var(--aurora-gold); --dot-b: rgba(255,224,138,.16); }
[data-theme="midnight"] .bm-orange .bm-dot-core { --dot-a: var(--aurora-pink); --dot-b: rgba(255,120,200,.16); }
[data-theme="midnight"] .bm-teal .bm-dot-core { --dot-a: var(--aurora-cyan); --dot-b: rgba(86,245,208,.16); }
[data-theme="midnight"] .bm-purple .bm-dot-core { --dot-a: var(--aurora-blue); --dot-b: rgba(122,168,255,.18); }
[data-theme="midnight"] .bm-dot-core {
  border-color: rgba(255,255,255,.28);
  background:
    radial-gradient(circle at 31% 23%, rgba(255,255,255,.58) 0 17%, transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--dot-b) 76%, #080b18), color-mix(in srgb, var(--dot-a) 82%, #151833));
  box-shadow: inset 0 1px 4px rgba(255,255,255,.20), inset 0 -5px 9px rgba(0,0,0,.22), 0 8px 18px color-mix(in srgb, var(--dot-a) 34%, transparent);
}
.bm-skip .bm-dot-core { opacity: .4; }
/* 附加(Bonus)任务：七彩旋转的环边（在状态标之下，不遮挡 ✓/✗）*/
.bm-bonus .bm-dot-core::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; background: conic-gradient(#ff5d5d, #ffb24d, #ffe24d, #6be86b, #4dd2ff, #9b6cff, #ff5dc2, #ff5d5d); -webkit-mask: radial-gradient(closest-side, transparent 72%, #000 74%); mask: radial-gradient(closest-side, transparent 72%, #000 74%); animation: bmRainbow 3.2s linear infinite; pointer-events: none; z-index: 1; }
@keyframes bmRainbow { to { transform: rotate(1turn); } }
.bm-mark { position: absolute; right: -4px; top: -4px; z-index: 3; width: 17px; height: 17px; border-radius: 50%; background: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,.22); }
.bm-mark.ok { color: var(--green); } .bm-mark.no { color: var(--red); } .bm-mark.pend { color: var(--gold); }
.bm-node {
  width: 126px;
  cursor: pointer;
  padding: 0 4px;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
}
.bm-node:focus-visible,
.bm-dot:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--green) 34%, transparent);
  outline-offset: 4px;
  border-radius: 24px;
}
/* 目标徽章外圈：conic-gradient 圆圈形进度条（--pct%），中间白底嵌徽章 */
.bm-node-icon {
  border-radius: 30px;
  padding: 6px;
  background:
    radial-gradient(circle at 34% 24%, rgba(255,255,255,.52), transparent 34%),
    conic-gradient(from -90deg, color-mix(in srgb, var(--violet) 72%, transparent) calc(var(--pct, 0) * 1%), color-mix(in srgb, var(--violet-soft) 46%, transparent) 0);
  display: inline-flex;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.58), 0 9px 18px color-mix(in srgb, var(--violet) 14%, transparent);
}
.bm-node.achieved .bm-node-icon {
  background:
    radial-gradient(circle at 34% 24%, rgba(255,255,255,.58), transparent 34%),
    conic-gradient(from -90deg, color-mix(in srgb, var(--gold) 74%, transparent) 0 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.56), 0 0 12px color-mix(in srgb, var(--gold) 34%, transparent);
}
.bm-ring-in { border-radius: 25px; background: rgba(255,255,255,.82); padding: 4px; display: inline-flex; align-items: center; justify-content: center; }
.bm-wish-render {
  width: var(--wish-size);
  height: var(--wish-size);
  border-radius: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.88), transparent 31%),
    linear-gradient(145deg, var(--green), var(--gold));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.48), 0 9px 16px rgba(58,51,87,.13);
}
.bm-wish-render .badge-img { width: calc(var(--wish-size) * .72) !important; height: calc(var(--wish-size) * .72) !important; }
.bm-node-name { font-size: 12px; font-weight: 800; text-align: center; max-width: 108px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-node-sub { display: flex; gap: 5px; align-items: center; }
.bm-node-pct { font-size: 11px; font-weight: 700; color: var(--violet); }
.bm-trophy { line-height: 1; }
.bm-node.achieved.tier-1 .bm-trophy { filter: drop-shadow(0 0 4px rgba(255,184,0,.5)); }
.bm-node.achieved.tier-2 .bm-trophy { filter: drop-shadow(0 0 8px rgba(255,184,0,.75)); }
.bm-node.achieved.tier-3 .bm-trophy { animation: starGlow 1.8s ease-in-out infinite; }
.bm-node.achieved.tier-4 .bm-trophy { animation: starGlow 1.3s ease-in-out infinite; }
.bm-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: center; margin: 10px 2px 0; font-size: 11.5px; color: var(--muted); }
.bm-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }
.bm-legend i.wk { background: #f3a712; } .bm-legend i.mo { background: #f0712f; } .bm-legend i.qt { background: #16a085; } .bm-legend i.yr { background: #7c5cff; }
.bm-legend b.ok { color: var(--green); } .bm-legend b.no { color: var(--red); }
.seg-mini-ic {
  width: 22px;
  height: 22px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 5px;
  background: linear-gradient(145deg, var(--card), var(--violet-soft));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.58), 0 4px 9px color-mix(in srgb, var(--violet) 16%, transparent);
  position: relative;
  vertical-align: -5px;
}
.seg-mini-ic.map::before {
  content: "";
  width: 14px;
  height: 10px;
  border-radius: 999px;
  border: 2px solid var(--green);
  border-left-color: var(--gold);
  border-bottom-color: var(--violet);
  transform: rotate(-12deg);
}
.seg-mini-ic.list::before,
.seg-mini-ic.list::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 5px;
  height: 2px;
  border-radius: 999px;
  background: var(--violet);
  box-shadow: 0 5px 0 var(--green);
}
.seg-mini-ic.list::before { top: 7px; }
.seg-mini-ic.list::after { bottom: 5px; background: var(--gold); box-shadow: none; }
.seg-mini-ic.bounty {
  background: linear-gradient(145deg, var(--gold-soft), var(--gold));
}
.seg-mini-ic.bounty::before {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--gold) 48%, var(--violet));
  box-shadow: 0 1px 0 rgba(255,255,255,.65);
}
.seg-mini-ic.bounty::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 7px;
  bottom: 3px;
  clip-path: polygon(0 0, 48% 42%, 100% 0, 78% 100%, 50% 70%, 22% 100%);
  background: var(--violet);
  opacity: .74;
}
@keyframes bmRouteDash { to { stroke-dashoffset: -100; } }
@keyframes bmRouteFlow { to { stroke-dashoffset: -100; } }
@keyframes bmRouteBreath { 0%, 100% { opacity: .34; } 50% { opacity: .66; } }
@keyframes bmMapFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes bmSparkle { 0%, 100% { opacity: .35; scale: .82; } 50% { opacity: 1; scale: 1.12; } }
@keyframes bmGrowDrift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes bmGrowPulse { 0%, 100% { scale: 1; } 50% { scale: 1.08; } }
@keyframes bmStarTwinkle { 0%, 100% { opacity: .46; filter: brightness(.96); } 50% { opacity: .88; filter: brightness(1.08); } }
@keyframes bmTaskFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes bmTaskIconLive { 0%, 100% { transform: rotate(-1deg) scale(1); } 50% { transform: rotate(2deg) scale(1.04); } }
@media (prefers-reduced-motion: reduce) {
  .bm-route-road, .bm-route-flow, .bm-route-shadow, .bm-cloud, .bm-map-spark, .bm-grow, .bm-growth-layer::after, .bm-dot .bm-band, .bm-task-render { animation: none; }
}
/* 提交记录：今日块 + 更早折叠分页 */
.sub-older { margin-top: 6px; border-top: 1px dashed var(--card-bd); padding-top: 6px; }
.sub-older > summary { cursor: pointer; font-size: 13px; color: var(--violet-d, #6a4dd6); list-style: none; padding: 4px 0; user-select: none; }
.sub-older > summary::-webkit-details-marker { display: none; }
.sub-older > summary::before { content: "▸"; margin-right: 6px; font-size: 11px; }
.sub-older[open] > summary::before { content: "▾"; }
.sub-pager { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.sub-pg { font-size: 12px; color: var(--muted); }
.sub-arrow { min-width: 34px; padding: 4px 10px; font-size: 16px; line-height: 1; }
.sn-title { font-size: 12px; color: var(--violet-d, #6a4dd6); font-weight: 600; }
.study-note { background: var(--notice-warm-grad); border: 1px solid var(--notice-warm-edge); border-radius: 14px; padding: 7px 11px; box-shadow: var(--notice-shadow); }
.sn-head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.sn-date { font-size: 11.5px; color: var(--muted); }
.sn-body { font-size: 13px; line-height: 1.5; color: var(--text, #2a2440); white-space: pre-wrap; word-break: break-word; }

/* 成就记录两栏 */
.records { display: flex; gap: 14px; }
.records .col { flex: 1; min-width: 0; }
.records .col h3 { font-size: 15px; margin: 0 0 12px; }
.rec-item { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; border-radius: 14px; border: 1px solid var(--card-bd); margin-bottom: 10px; background: #fff; box-shadow: var(--shadow); }
.rec-item .ic { font-size: 22px; flex: 0 0 auto; line-height: 1.1; }
.rec-item .body { flex: 1; min-width: 0; }
.rec-item .body .rt { font-weight: 700; font-size: 14.5px; }
.rec-item .body .rs { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.rec-item.ok { border-color: var(--notice-success-edge); background: var(--notice-success-grad); box-shadow: var(--notice-shadow); }
.rec-item.fail { border-color: var(--notice-danger-edge); background: var(--notice-danger-grad); box-shadow: var(--notice-shadow); }
@media (max-width: 560px) { .records { flex-direction: column; } }

/* 进度条 */
.bar { height: 9px; border-radius: 999px; background: #efeaf8; overflow: hidden; margin-top: 8px; }
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--violet), var(--gold)); }
.goal-prog { display: flex; align-items: center; gap: 9px; margin-top: 8px; }
.goal-prog .bar { flex: 1; margin-top: 0; }
.goal-prog-pct { font-size: 13px; font-weight: 700; color: var(--violet); min-width: 36px; text-align: right; }

/* 发布页：创建按钮并排一行 */
.publish-hero {
  min-height: 116px;
  padding: 16px;
  border-radius: 24px;
  background: var(--hero-bg);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: var(--shadow);
  margin: 2px 0 14px;
}
.publish-hero h2 { margin: 0; font-size: 19px; line-height: 1.25; letter-spacing: 0; }
.publish-hero p { margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; font-weight: 650; }
.pub-actions { display: flex; gap: 10px; margin-bottom: 14px; }
.pub-actions .btn { flex: 1; }
/* 发布任务三键分段控件：配色统一、比顶部 tab 更小巧；高亮块随点按顺滑滑动 */
.pub-seg { position: relative; display: flex; background: rgba(255,255,255,.74); border: 1px solid rgba(255,255,255,.84); border-radius: 999px; padding: 4px; margin-bottom: 14px; box-shadow: 0 8px 20px rgba(61, 45, 95, .08); }
.pub-seg .seg-pill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 999px; background: var(--primary-soft-grad); border: 1px solid color-mix(in srgb, var(--violet) 24%, #fff); box-shadow: inset 0 1px 0 rgba(255,255,255,.72), var(--primary-glow-soft); transition: transform .32s cubic-bezier(.22, .85, .35, 1); pointer-events: none; }
.pub-seg .seg-btn { flex: 1; position: relative; z-index: 1; background: transparent; border: 0; padding: 8px 4px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--violet-d); cursor: pointer; font-family: inherit; white-space: nowrap; }
.pub-seg .seg-btn .dot-noti { top: 1px; right: 8px; }
@media (max-width: 440px) { .pub-seg .seg-btn { font-size: 12px; padding: 7px 2px; } }

/* 星级打分 */
.stars { display: flex; gap: 8px; }
.stars span { width: 40px; height: 40px; background: url(/badges/star.png) center/contain no-repeat; cursor: pointer; filter: grayscale(.85) opacity(.5); transition: filter .2s, transform .12s; }
.stars span.on { transform: scale(1.06); filter: drop-shadow(0 0 7px rgba(255,184,0,.9)) drop-shadow(0 2px 3px rgba(0,0,0,.18)); animation: starGlow 1.6s ease-in-out infinite; }
.stars span:active { transform: scale(.88); }
/* 三维评分（完成度/质量/效率）：每行一组小星 + 自动平均 */
.rv-dim { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.rv-dim-lb { flex: 0 0 64px; font-size: 13px; color: var(--text); font-weight: 600; }
.stars.stars-sm { gap: 6px; }
.stars.stars-sm span { width: 30px; height: 30px; }
.stars.stars-sm span.on { animation: none; } /* 三行星同时发光太闹，小星只亮不闪 */
.rv-comment { color: var(--text); background: var(--bubble-grad); border: 1px solid var(--bubble-edge); box-shadow: var(--bubble-shadow); border-radius: 10px; padding: 7px 10px; margin-top: 4px; white-space: pre-wrap; }
/* 动态里的评语气泡（跟随单次得分记录） */
.fi-quote { margin-top: 5px; font-size: 12.5px; color: var(--text); background: var(--bubble-grad); border: 1px solid var(--bubble-edge); box-shadow: var(--bubble-shadow); border-radius: 10px; padding: 6px 10px; white-space: pre-wrap; }
/* 定期任务到期后的最终成绩块（任务详情） */
.td-final { border: 1px solid var(--notice-warm-edge); background: var(--notice-warm-grad); border-radius: 16px; padding: 10px 13px; margin: 10px 0 4px; box-shadow: var(--notice-shadow); }
.td-final .tdf-main { font-size: 14.5px; color: var(--text); font-weight: 700; }
.td-final .tdf-main b { font-size: 17px; }
.td-final .tdf-dims { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
/* 动态流里评分动作的 3D 星标：金色发光、绿/红用色相旋转着色 */
.rstar { display: inline-block; width: 22px; height: 22px; background: url(/badges/star.png) center/contain no-repeat; vertical-align: -5px; }
.rstar.ui-emoji-icon {
  width: 22px;
  height: 22px;
  margin: 0;
  background: none;
  fill: currentColor;
  stroke: currentColor;
  vertical-align: -5px;
}
.rstar-gold { filter: drop-shadow(0 0 5px rgba(255,184,0,.95)); animation: starGlow 1.6s ease-in-out infinite; }
.rstar-gold.ui-emoji-icon { color: var(--gold); }
.rstar-green { filter: hue-rotate(72deg) saturate(1.35); }
.rstar-green.ui-emoji-icon { color: var(--green); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--green) 62%, transparent)); }
.rstar-red { filter: hue-rotate(-48deg) saturate(1.7) brightness(1.04); }
.rstar-red.ui-emoji-icon { color: var(--red); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--red) 58%, transparent)); }
.rstar-sm { width: 14px; height: 14px; vertical-align: -2px; }
@keyframes starGlow { 0%, 100% { filter: drop-shadow(0 0 4px rgba(255,184,0,.55)) drop-shadow(0 2px 3px rgba(0,0,0,.18)); } 50% { filter: drop-shadow(0 0 13px rgba(255,184,0,1)) drop-shadow(0 2px 4px rgba(0,0,0,.22)); } }

/* 浮动按钮 */
.fab { position: fixed; right: 18px; bottom: 22px; z-index: 50; border-radius: 999px; padding: 13px 20px; font-size: 15px; }

/* 3D 奖励徽章 */
.badge-render {
  width: var(--badge-size);
  height: var(--badge-size);
  border-radius: 32%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  flex: 0 0 auto;
  background:
    radial-gradient(circle at 34% 25%, rgba(255,255,255,.92), transparent 31%),
    linear-gradient(145deg, color-mix(in srgb, var(--card) 72%, var(--gold-soft)), color-mix(in srgb, var(--violet-soft) 52%, var(--green-soft)));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.58), inset 0 -4px 8px rgba(58,51,87,.06), 0 6px 13px color-mix(in srgb, var(--violet) 17%, transparent);
}
.badge-img { width: 72%; height: 72%; object-fit: contain; vertical-align: middle; filter: drop-shadow(0 3px 6px color-mix(in srgb, var(--violet) 25%, transparent)); flex: 0 0 auto; }
.goal-hero .goal-badge { flex: 0 0 auto; text-align: center; }
.goal-hero .goal-badge .gb-cap { font-size: 11px; color: var(--muted); margin-top: 2px; }
.badge-prev { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px; border: 1px dashed var(--card-bd); border-radius: 12px; background: var(--violet-soft); }
.rec-item.reward .ic { display: flex; }

/* 奖励徽章「等级边框」：目标规模越大越华丽（周→月→季度→年） */
.goal-badge { flex: 0 0 auto; text-align: center; }
.goal-badge.mini { display: inline-flex; vertical-align: middle; margin-right: 6px; }
.goal-badge .badge-frame { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; padding: 7px; position: relative; }
.goal-badge.mini .badge-frame { padding: 4px; }
.tier-1 .badge-frame { background: radial-gradient(circle at 50% 32%, #ffffff, #efeaff); box-shadow: 0 2px 8px rgba(124,92,255,.18); }
.tier-2 .badge-frame { background: radial-gradient(circle at 50% 32%, #fffaf0, #ffe6b8); border: 2px solid #ffd27a; box-shadow: 0 3px 12px rgba(243,167,18,.30); }
.tier-3 .badge-frame { background: radial-gradient(circle at 50% 30%, #ffffff, #ffe1ef); border: 3px solid #ffb3d4; box-shadow: 0 4px 16px rgba(124,92,255,.30); }
.tier-3 .badge-frame::after { content: "✦"; position: absolute; top: -3px; right: -1px; font-size: 13px; color: var(--gold); text-shadow: 0 1px 2px rgba(0,0,0,.15); }
.tier-4 .badge-frame { background: conic-gradient(from 210deg, #ff5e8a, #ffb648, #ffe24d, #5ed16a, #4db6ff, #9b6cff, #ff5e8a); padding: 5px; box-shadow: 0 6px 22px rgba(124,92,255,.40); animation: haloPulse 2.6s ease-in-out infinite; }
.tier-4 .badge-frame .badge-render { background: #fff; border-radius: 50%; padding: 6px; box-shadow: 0 0 0 2px #fff; }
.tier-4 .badge-frame::after { content: "✦✦"; position: absolute; top: -6px; right: -4px; font-size: 13px; color: var(--gold); letter-spacing: -2px; }
@keyframes haloPulse { 0%, 100% { box-shadow: 0 6px 18px rgba(124,92,255,.35); } 50% { box-shadow: 0 9px 30px rgba(255,94,138,.55); } }

/* 目标规模标签 + 奖励发放 */
.chip.scale-chip { background: var(--violet-soft); color: var(--violet); border-color: var(--violet-soft); }

/* 附加任务(Bonus) 七彩闪动标签 */
.chip.bonus-rainbow {
  color: #fff; border: none; font-weight: 800; letter-spacing: .3px;
  background: linear-gradient(90deg, #ff5e8a, #ffb648, #ffe24d, #5ed16a, #4db6ff, #9b6cff, #ff5e8a);
  background-size: 300% 100%;
  animation: bonusShimmer 2.4s linear infinite, bonusGlow 1.8s ease-in-out infinite;
  text-shadow: 0 1px 2px rgba(0,0,0,.22);
}
@keyframes bonusShimmer { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
@keyframes bonusGlow { 0%, 100% { box-shadow: 0 0 6px rgba(155,108,255,.45); } 50% { box-shadow: 0 0 14px rgba(255,94,138,.75); } }
/* 附加任务勾选项 */
.bonus-toggle { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--text); background: var(--notice-cool-grad); border: 1px dashed var(--notice-cool-edge); box-shadow: var(--notice-shadow); padding: 9px 11px; border-radius: 15px; margin: 2px 0 10px; cursor: pointer; line-height: 1.4; }
.bonus-toggle input { margin-top: 2px; }
/* 任务挂钩多个目标：复选框列表 */
.goal-checks { display: flex; flex-direction: column; gap: 7px; }
.goal-check {
  position: relative;
  overflow: hidden;
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 14px;
  color: var(--text);
  background: var(--bubble-grad, linear-gradient(145deg, color-mix(in srgb, var(--card) 86%, var(--violet-soft)), color-mix(in srgb, var(--card) 78%, var(--green-soft))));
  border: 1px solid var(--bubble-edge, color-mix(in srgb, var(--violet) 18%, var(--card-bd)));
  box-shadow: var(--bubble-shadow, var(--shadow));
  padding: 9px 12px;
  border-radius: 12px;
  transition: border-color .15s, background .15s, box-shadow .15s, transform .15s;
}
.goal-check::before {
  content: "";
  position: absolute;
  inset: 1px 8px auto 8px;
  height: 36%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0));
  pointer-events: none;
}
.goal-check > * {
  position: relative;
  z-index: 1;
}
.goal-check .gc-main { display: flex; gap: 9px; align-items: center; cursor: pointer; flex: 1; min-width: 0; }
.goal-check .gc-main input[type=checkbox] { width: 18px; height: 18px; flex: none; accent-color: var(--violet); cursor: pointer; }
.goal-check .gc-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-weight: 850;
  text-shadow: 0 1px 2px color-mix(in srgb, var(--card) 38%, transparent);
}
.goal-check .gc-rem { flex: none; font-size: 12px; color: var(--muted, #999); white-space: nowrap; }
/* 已结算目标在任务编辑器里的「锁定」只读态：不可勾选/解绑，占比只读，整行略暗并带锁标 */
.goal-check.locked { opacity: .92; }
.goal-check.locked .gc-main { cursor: default; }
.goal-check.locked .gc-main input[type=checkbox] { cursor: not-allowed; opacity: .65; }
.goal-check.locked .gc-lock { color: var(--violet-d, #6a4dd6); font-weight: 850; }
.goal-check.locked .gc-pct { display: inline-flex; }
.goal-check.locked .gc-pct input { cursor: not-allowed; color: var(--muted, #888); }
/* 占比输入框只在勾选后出现，未勾选时只显示「剩 X%」，行更干净 */
.goal-check .gc-pct {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted, #888);
  white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--violet) 18%, #fff);
  background: var(--notice-cool-grad, linear-gradient(145deg, var(--card), color-mix(in srgb, var(--violet-soft) 58%, var(--green-soft))));
  border-radius: 12px;
  padding: 5px 7px 5px 9px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 4px 10px color-mix(in srgb, var(--violet) 10%, transparent);
}
.goal-check .gc-pct-label { font-size: 11px; font-weight: 800; color: var(--violet-d); }
.goal-check .gc-pct-input { display: inline-flex; align-items: center; gap: 2px; }
.goal-check .gc-pct input {
  width: 52px;
  padding: 6px 8px;
  text-align: right;
  border-radius: 8px;
  color: var(--text);
  background: color-mix(in srgb, var(--card) 82%, var(--soft-panel));
  border-color: var(--bubble-edge, var(--card-bd));
}
.goal-check:has(.tGoalCb:checked),
.goal-check:has(.twGoalCb:checked),
.goal-check:has(.rvExtraGoalCb:checked) {
  border-color: var(--violet);
  background: var(--primary-soft-grad);
  box-shadow: var(--primary-glow-soft);
}
.goal-check:has(.tGoalCb:checked) .gc-rem,
.goal-check:has(.twGoalCb:checked) .gc-rem { display: none; }
.goal-check:has(.tGoalCb:checked) .gc-pct,
.goal-check:has(.twGoalCb:checked) .gc-pct { display: inline-flex; }
/* 当天未完成任务提醒弹窗 */
.remind-list { display: flex; flex-direction: column; gap: 8px; max-height: 240px; overflow-y: auto; }
.remind-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--notice-cool-grad); border: 1px solid var(--notice-cool-edge); border-radius: 15px; padding: 9px 10px; box-shadow: var(--notice-shadow); }
.remind-row .rr-title { font-size: 13.5px; font-weight: 600; color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.remind-row .btn.small { flex: none; }
.card.reward-pending { border-color: var(--notice-warm-edge); background: var(--notice-warm-grad); box-shadow: var(--notice-shadow); }
.reward-waiting { background: var(--notice-cool-grad); border: 1px dashed var(--notice-cool-edge); color: var(--text); padding: 10px 12px; border-radius: 15px; box-shadow: var(--notice-shadow); font-size: 13px; margin-bottom: 12px; }

/* 更新遮罩 */
.update-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(58,51,87,.55); display: flex; align-items: center; justify-content: center; }
.update-box { text-align: center; padding: 28px; background: #fff; border-radius: 20px; box-shadow: var(--shadow); }
.update-title { font-size: 20px; font-weight: 800; margin-bottom: 8px; }
.update-msg { color: var(--muted); margin-bottom: 18px; }

/* 午夜星光：全工具模块统一极光玻璃渲染，不只覆盖 map。 */
[data-theme="midnight"] .card,
[data-theme="midnight"] .task,
[data-theme="midnight"] .feed-item,
[data-theme="midnight"] .kid-task-card,
[data-theme="midnight"] .wish-card,
[data-theme="midnight"] .goal-mini-card,
[data-theme="midnight"] .rec-item,
[data-theme="midnight"] .modal,
[data-theme="midnight"] .update-box,
[data-theme="midnight"] .theme-sw,
[data-theme="midnight"] .lang-sw,
[data-theme="midnight"] .acct-action-card,
[data-theme="midnight"] .goal-check,
[data-theme="midnight"] .remind-row,
[data-theme="midnight"] .coupon-card,
[data-theme="midnight"] .pay-plan,
[data-theme="midnight"] .filter-bar,
[data-theme="midnight"] .range-bar .rg,
[data-theme="midnight"] .view-as,
[data-theme="midnight"] .icon-btn,
[data-theme="midnight"] .mt-tab,
[data-theme="midnight"] .tab,
[data-theme="midnight"] .chip,
[data-theme="midnight"] .qr-box,
[data-theme="midnight"] .wait-card,
[data-theme="midnight"] .net-item,
[data-theme="midnight"] .badge-prev,
[data-theme="midnight"] .account-modal .field {
  background: var(--bubble-grad);
  border-color: var(--bubble-edge);
  color: var(--text);
  box-shadow: var(--bubble-shadow);
}

[data-theme="midnight"] .kid-hero,
[data-theme="midnight"] .publish-hero,
[data-theme="midnight"] .gw-preview {
  background: var(--hero-bg);
  border-color: var(--bubble-edge);
  box-shadow: var(--bubble-shadow);
}

[data-theme="midnight"] .icon-btn {
  background: var(--topbar-icon-bg);
  border-color: var(--topbar-icon-edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 18px rgba(0,0,0,.28), var(--primary-glow-soft);
}

[data-theme="midnight"] .publish-hero h2 {
  color: #f5fbff;
  text-shadow: 0 1px 2px rgba(0,0,0,.32);
}
[data-theme="midnight"] .publish-hero p {
  color: #cfe5ff;
}
[data-theme="midnight"] .kid-hero .kid-kicker,
[data-theme="midnight"] .publish-hero .kid-kicker {
  color: #efffff;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.24), transparent 34%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--aurora-cyan) 30%, rgba(8,14,30,.78)),
      color-mix(in srgb, var(--aurora-blue) 22%, rgba(8,14,30,.78)) 54%,
      color-mix(in srgb, var(--aurora-pink) 18%, rgba(8,14,30,.76)));
  border: 1px solid color-mix(in srgb, var(--aurora-cyan) 42%, rgba(255,255,255,.14));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 0 14px color-mix(in srgb, var(--aurora-cyan) 18%, transparent);
  text-shadow: 0 1px 2px rgba(0,0,0,.42);
}

[data-theme="midnight"] .kid-hero-art {
  --kid-hero-art-bg:
    radial-gradient(circle at 24% 18%, rgba(255,255,255,.26), transparent 31%),
    radial-gradient(circle at 78% 20%, color-mix(in srgb, var(--aurora-cyan) 24%, transparent), transparent 36%),
    radial-gradient(circle at 24% 88%, color-mix(in srgb, var(--aurora-pink) 18%, transparent), transparent 34%),
    linear-gradient(145deg,
      color-mix(in srgb, var(--aurora-blue) 50%, rgba(8,14,30,.88)) 0%,
      color-mix(in srgb, var(--aurora-purple) 44%, rgba(10,18,39,.88)) 58%,
      color-mix(in srgb, var(--aurora-cyan) 26%, rgba(8,14,30,.90)) 100%);
  --kid-hero-art-border: color-mix(in srgb, var(--aurora-cyan) 40%, rgba(255,255,255,.14));
  --kid-hero-art-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -10px 16px rgba(0,0,0,.18),
    0 10px 22px rgba(0,0,0,.26),
    0 0 20px color-mix(in srgb, var(--aurora-blue) 18%, transparent);
  --kid-hero-art-icon: #efffff;
}

[data-theme="midnight"] .kid-hero-art::before {
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0));
}

[data-theme="midnight"] .kid-hero-art .badge-img {
  filter:
    saturate(.68)
    brightness(.92)
    hue-rotate(18deg)
    drop-shadow(0 0 8px color-mix(in srgb, var(--aurora-cyan) 26%, transparent));
}

[data-theme="midnight"] .pub-seg {
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--aurora-cyan) 16%, transparent), transparent 34%),
    radial-gradient(circle at 84% 18%, color-mix(in srgb, var(--aurora-pink) 14%, transparent), transparent 36%),
    linear-gradient(145deg, rgba(8,14,30,.76), rgba(18,25,52,.82));
  border-color: color-mix(in srgb, var(--aurora-cyan) 26%, rgba(255,255,255,.1));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 12px 26px rgba(0,0,0,.26),
    0 0 18px color-mix(in srgb, var(--aurora-blue) 14%, transparent);
}
[data-theme="midnight"] .pub-seg .seg-pill {
  background: var(--aurora-button-grad);
  border-color: color-mix(in srgb, var(--aurora-cyan) 44%, rgba(255,255,255,.16));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), inset 0 -8px 14px rgba(0,0,0,.18), var(--primary-glow-soft);
}
[data-theme="midnight"] .pub-seg .seg-btn {
  color: #eaf7ff;
  text-shadow: 0 1px 2px rgba(0,0,0,.38);
}
[data-theme="midnight"] .pub-seg .seg-btn:hover,
[data-theme="midnight"] .pub-seg .seg-btn:focus-visible {
  color: #ffffff;
}

[data-theme="midnight"] .filter-bar.fb-drawer .fb-main > .btn.small.ghost,
[data-theme="midnight"] .filter-bar.fb-drawer .fb-toggle {
  background: var(--aurora-button-grad);
  border-color: color-mix(in srgb, var(--aurora-cyan) 42%, rgba(255,255,255,.14));
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -7px 12px rgba(0,0,0,.18), var(--primary-glow-soft);
  text-shadow: 0 1px 2px rgba(0,0,0,.34);
}
[data-theme="midnight"] .filter-bar.fb-drawer .fb-main > .btn.small.ghost:hover,
[data-theme="midnight"] .filter-bar.fb-drawer .fb-toggle:hover,
[data-theme="midnight"] .filter-bar.fb-drawer .fb-toggle.open {
  filter: brightness(1.07);
}

[data-theme="midnight"] .badge-render,
[data-theme="midnight"] .bm-wish-render {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--aurora-badge-grad);
  border: 1px solid color-mix(in srgb, var(--aurora-cyan) 34%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -10px 16px rgba(0,0,0,.18),
    0 8px 18px color-mix(in srgb, var(--aurora-cyan) 16%, transparent),
    0 0 18px color-mix(in srgb, var(--aurora-purple) 12%, transparent);
}
[data-theme="midnight"] .badge-render::after {
  content: "";
  position: absolute;
  inset: 8%;
  z-index: 2;
  border-radius: inherit;
  background:
    radial-gradient(circle at 28% 24%, rgba(255,255,255,.16), transparent 32%),
    linear-gradient(135deg, rgba(86,245,208,.22), rgba(122,168,255,.16) 52%, rgba(181,140,255,.14));
  mix-blend-mode: soft-light;
  pointer-events: none;
}
[data-theme="midnight"] .badge-img {
  position: relative;
  z-index: 1;
  filter:
    saturate(.58)
    brightness(.88)
    contrast(.94)
    hue-rotate(18deg)
    drop-shadow(0 0 7px color-mix(in srgb, var(--aurora-cyan) 24%, transparent))
    drop-shadow(0 3px 6px rgba(0,0,0,.18));
}

[data-theme="midnight"] .login-screen {
  background: var(--pattern), linear-gradient(160deg, var(--bg1), var(--bg2));
}
[data-theme="midnight"] .login-logo {
  filter: drop-shadow(0 0 18px rgba(86,245,208,.28)) drop-shadow(0 10px 22px rgba(0,0,0,.32));
}
[data-theme="midnight"] .login-brand {
  background: linear-gradient(135deg, var(--aurora-cyan), var(--aurora-blue) 48%, var(--aurora-pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-theme="midnight"] .btn.primary,
[data-theme="midnight"] .tab.active,
[data-theme="midnight"] .mt-tab.on {
  background: var(--aurora-button-grad);
  border-color: color-mix(in srgb, var(--aurora-cyan) 44%, rgba(255,255,255,.16));
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), inset 0 -8px 14px rgba(0,0,0,.18), var(--primary-glow-soft);
}

[data-theme="midnight"] .theme-sw.sel,
[data-theme="midnight"] .lang-sw.sel,
[data-theme="midnight"] .pay-plan.sel,
[data-theme="midnight"] .range-bar .rg.on,
[data-theme="midnight"] .goal-check:has(.tGoalCb:checked),
[data-theme="midnight"] .goal-check:has(.twGoalCb:checked) {
  background: var(--primary-soft-grad);
  border-color: color-mix(in srgb, var(--aurora-cyan) 42%, transparent);
  color: var(--text);
  box-shadow: var(--primary-glow-soft);
}

[data-theme="midnight"] .chip.type,
[data-theme="midnight"] .chip.scale-chip {
  background: color-mix(in srgb, var(--aurora-blue) 18%, transparent);
  border-color: color-mix(in srgb, var(--aurora-blue) 34%, transparent);
  color: #dce8ff;
}
[data-theme="midnight"] .chip.score,
[data-theme="midnight"] .chip.bounty-type {
  background: color-mix(in srgb, var(--aurora-gold) 16%, transparent);
  border-color: color-mix(in srgb, var(--aurora-gold) 34%, transparent);
  color: #ffeab3;
}
[data-theme="midnight"] .chip.ok {
  background: color-mix(in srgb, var(--aurora-green) 16%, transparent);
  border-color: color-mix(in srgb, var(--aurora-green) 34%, transparent);
  color: #d8ffe9;
}
[data-theme="midnight"] .chip.warn {
  background: color-mix(in srgb, var(--aurora-pink) 16%, transparent);
  border-color: color-mix(in srgb, var(--aurora-pink) 34%, transparent);
  color: #ffe2f3;
}

[data-theme="midnight"] .task.bounty,
[data-theme="midnight"] .card.reward-pending,
[data-theme="midnight"] .coupon-card,
[data-theme="midnight"] .td-final {
  background: var(--notice-warm-grad);
  border-color: var(--notice-warm-edge);
  box-shadow: var(--notice-shadow);
}
[data-theme="midnight"] .coupon-card.ok,
[data-theme="midnight"] .rec-item.ok {
  background: var(--notice-success-grad);
  border-color: var(--notice-success-edge);
  box-shadow: var(--notice-shadow);
}
[data-theme="midnight"] .rec-item.fail,
[data-theme="midnight"] .paywall-note {
  background: var(--notice-danger-grad);
  border-color: var(--notice-danger-edge);
  box-shadow: var(--notice-shadow);
}
[data-theme="midnight"] .reward-waiting,
[data-theme="midnight"] .bonus-toggle,
[data-theme="midnight"] .remind-row {
  background: var(--notice-cool-grad);
  border-color: var(--notice-cool-edge);
  box-shadow: var(--notice-shadow);
}

[data-theme="midnight"] .modal-mask {
  background: rgba(3, 8, 20, .64);
  backdrop-filter: blur(8px);
}
[data-theme="midnight"] .modal-x {
  background: color-mix(in srgb, var(--aurora-blue) 18%, rgba(255,255,255,.06));
  color: var(--text);
}
[data-theme="midnight"] .modal-x:hover {
  background: color-mix(in srgb, var(--aurora-cyan) 22%, rgba(255,255,255,.08));
  color: #fff;
}
[data-theme="midnight"] .account-modal .acct-head,
[data-theme="midnight"] .account-modal .field {
  background:
    radial-gradient(circle at 86% 10%, rgba(255,120,200,.10), transparent 34%),
    linear-gradient(145deg, rgba(18,27,56,.96), rgba(10,18,39,.94));
  border-color: color-mix(in srgb, var(--aurora-cyan) 24%, transparent);
}
[data-theme="midnight"] .account-modal .acct-head::before,
[data-theme="midnight"] .account-modal .field::before {
  background:
    radial-gradient(ellipse at 16% -6%, rgba(86,245,208,.10), transparent 34%),
    radial-gradient(circle at 86% 8%, rgba(255,120,200,.08), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.045), transparent 28%);
  opacity: .42;
}
[data-theme="midnight"] .account-modal .acct-label,
[data-theme="midnight"] .account-modal .field > label {
  color: #eaf7ff;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
[data-theme="midnight"] .acct-theme-copy b {
  color: #cfe9ff;
  text-shadow: 0 1px 2px rgba(0,0,0,.42);
}
[data-theme="midnight"] .acct-theme-copy small,
[data-theme="midnight"] .acct-famno,
[data-theme="midnight"] .acct-valid {
  color: #f5fbff;
  text-shadow: 0 1px 2px rgba(0,0,0,.42);
}
[data-theme="midnight"] .acct-famno b {
  color: #bffdf2;
}
[data-theme="midnight"] .acct-lang-row,
[data-theme="midnight"] .acct-theme-row {
  background:
    radial-gradient(circle at 82% 18%, rgba(255,120,200,.10), transparent 34%),
    linear-gradient(145deg, rgba(13,23,50,.96), rgba(20,31,62,.94));
  border-color: color-mix(in srgb, var(--aurora-blue) 28%, transparent);
  color: #f5fbff;
}
[data-theme="midnight"] .theme-name,
[data-theme="midnight"] .lang-name,
[data-theme="midnight"] .acct-action-card b {
  color: #f5fbff;
  text-shadow: 0 1px 2px rgba(0,0,0,.42);
}
[data-theme="midnight"] .account-modal .theme-sw small,
[data-theme="midnight"] .lang-sw small {
  color: #cfe9ff;
  text-shadow: 0 1px 2px rgba(0,0,0,.38);
}
[data-theme="midnight"] .account-modal .acct-head input,
[data-theme="midnight"] .account-modal .acct-control-row input {
  background: rgba(8,14,30,.82);
  border-color: color-mix(in srgb, var(--aurora-cyan) 34%, rgba(255,255,255,.10));
  color: #edf7ff;
  -webkit-text-fill-color: #edf7ff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(86,245,208,.06);
}
[data-theme="midnight"] .account-modal .acct-head input::placeholder,
[data-theme="midnight"] .account-modal .acct-control-row input::placeholder {
  color: #8fa4c9;
  -webkit-text-fill-color: #8fa4c9;
}
[data-theme="midnight"] .account-sub-modal .modal {
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--aurora-cyan) 18%, transparent), transparent 34%),
    radial-gradient(circle at 86% 8%, color-mix(in srgb, var(--aurora-pink) 16%, transparent), transparent 36%),
    linear-gradient(180deg, rgba(16,25,54,.96), rgba(10,18,39,.96) 72%);
  border-color: color-mix(in srgb, var(--aurora-cyan) 24%, transparent);
}
[data-theme="midnight"] .sub-hero,
[data-theme="midnight"] .sub-panel {
  background: var(--primary-soft-grad);
  border-color: color-mix(in srgb, var(--aurora-cyan) 28%, transparent);
  box-shadow: var(--primary-glow-soft);
}
[data-theme="midnight"] .sub-hero-ic {
  background: var(--aurora-button-grad);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 18px rgba(86,245,208,.16);
}
[data-theme="midnight"] .sub-panel::before {
  background:
    radial-gradient(ellipse at 16% 0%, rgba(86,245,208,.10), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 30%);
  opacity: .38;
}
[data-theme="midnight"] .sub-hero-copy b,
[data-theme="midnight"] .sub-panel-title {
  color: #dffeff;
  text-shadow: 0 1px 2px rgba(0,0,0,.42);
}
[data-theme="midnight"] .sub-hero-copy small,
[data-theme="midnight"] .account-sub-modal .muted,
[data-theme="midnight"] .account-sub-modal .cc-sub,
[data-theme="midnight"] .account-sub-modal .t-meta {
  color: #cfe5ff;
  text-shadow: 0 1px 2px rgba(0,0,0,.36);
}
[data-theme="midnight"] .sub-list .card,
[data-theme="midnight"] .account-sub-modal .card,
[data-theme="midnight"] .account-sub-modal .field,
[data-theme="midnight"] .sub-form {
  background: linear-gradient(145deg, rgba(18,27,56,.94), rgba(12,21,44,.92));
  border-color: color-mix(in srgb, var(--aurora-blue) 22%, transparent);
}
[data-theme="midnight"] .filter-bar input,
[data-theme="midnight"] .filter-bar select,
[data-theme="midnight"] .field input,
[data-theme="midnight"] .field select,
[data-theme="midnight"] .field textarea {
  background: rgba(8,14,30,.74);
  border-color: var(--bubble-edge);
  color: var(--text);
}

/* ===== 响应式 / 手机自适应：保证不同分辨率与屏幕完整无遮挡 ===== */
/* 安全区（刘海/底部横条） */
.topbar { padding-top: calc(14px + env(safe-area-inset-top)); }
.tabpane { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
.modal { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
.fab { bottom: calc(22px + env(safe-area-inset-bottom)); }
img, svg { max-width: 100%; }
input, select, textarea, button { max-width: 100%; }

/* 窄屏：表单两列改为可换行、缩小留白，避免内容被挤压或溢出 */
@media (max-width: 440px) {
  .tabpane { padding-left: 12px; padding-right: 12px; }
  .card { padding: 14px; border-radius: 16px; }
  .row2 { flex-wrap: wrap; }
  .row2 > * { flex: 1 1 100%; }
  .goal-grid { grid-template-columns: 1fr; } /* 手机单列：两列会把目标卡文字挤成竖排 */
  .goal-hero { gap: 12px; }
  .ring { width: 84px; height: 84px; }
  .ring svg { width: 84px; height: 84px; }
  .goal-mini .ring, .goal-mini .ring svg { width: 56px; height: 56px; }
  .stars span { width: 34px; height: 34px; }
  .bm-node { width: 112px; } .bm-dot { width: 70px; }
  /* —— 顶栏窄屏紧凑：保证标题/下拉/图标都放得下，退出键不被挤出屏幕 —— */
  .topbar { padding: calc(10px + env(safe-area-inset-top)) 10px 4px; }
  /* 标题 + 4 图标占第一行（图标绝不压缩、绝不被挤出）；「以成员查看」下拉换到第二行整宽 */
  .brand { gap: 4px 6px; flex-wrap: wrap; }
  .title { font-size: 16px; flex: 1 1 auto; min-width: 0; order: 1; }
  .brand-actions { gap: 2px; order: 2; flex: 0 0 auto; }
  .view-as { order: 3; flex: 1 1 100%; max-width: 100%; padding: 6px 8px; font-size: 13px; margin-top: 2px; }
  .icon-btn { font-size: 17px; padding: 4px 4px; flex-shrink: 0; }
  /* 导航 tab 换行：6 个 tab 一屏全显示，不再需要横滑（之前右边「成就/成员管理」被挤出看不到） */
  .tabs { flex-wrap: wrap; overflow-x: visible; gap: 5px; padding: 6px 10px 8px; justify-content: center; }
  .tab { padding: 7px 12px; font-size: 13px; }
  /* 弹窗/计费/排行榜窄屏适配 */
  .modal { padding: 18px 14px; }
  .pay-plans { gap: 6px; }
  .pay-plan { padding: 10px 3px 8px; }
  .pp-price { font-size: 17px; }
  .lb-col { width: 30%; } .lb-ava { width: 36px; height: 36px; font-size: 15px; }
  .official-tools { gap: 4px; }
}

/* 极窄屏：目标卡的徽章换行到下方，避免与进度环挤占 */
@media (max-width: 340px) {
  .goal-hero { flex-wrap: wrap; justify-content: center; }
  .goal-hero .info { flex: 1 1 100%; }
  /* 概览紧凑目标卡仍保持横排两列，避免环与文字错位 */
  .goal-mini .goal-hero { flex-wrap: nowrap; justify-content: flex-start; }
  .goal-mini .info { flex: 1 1 auto; }
}

/* 横屏/平板/桌面：内容居中限宽，阅读更舒适 */
@media (min-width: 720px) {
  #main { display: flex; justify-content: center; }
  .tabpane { width: 100%; max-width: 760px; }
  .tabs { max-width: 792px; margin: 0 auto; width: 100%; }
  .brand { max-width: 792px; margin: 0 auto; width: 100%; }
}

/* 防止任何横向溢出 */
html, body { max-width: 100%; overflow-x: hidden; }
.t-meta { word-break: break-word; }
.feed-item .fi-text { overflow-wrap: anywhere; }

/* ===== 创建目标·三步向导 ===== */
.gw-q { font-size: 15px; font-weight: 800; color: var(--text); margin: 2px 0 12px; }
.gw-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.gw-chip {
  flex: 0 0 auto; border: 1px solid var(--card-bd); background: var(--card);
  color: var(--text); border-radius: 999px; padding: 9px 15px; font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: transform .12s, background .2s, border-color .2s, color .2s;
}
.gw-chip:active { transform: scale(.95); }
.gw-chip.on { background: linear-gradient(135deg, var(--violet), var(--violet-d)); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(124,92,255,.28); }
.gw-adv { margin-top: 10px; }
.gw-adv summary { cursor: pointer; font-size: 13px; color: var(--violet); font-weight: 600; padding: 4px 0; }
.gw-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.gw-nav .tut-dots { display: flex; gap: 6px; flex: 1; justify-content: center; }
.gw-nav .tut-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--card-bd); display: block; }
.gw-nav .tut-dots i.on { background: var(--violet); width: 18px; border-radius: 4px; }
.gw-preview { border-radius: 18px; padding: 14px; background: var(--hero-bg, var(--violet-soft)); border: 1px solid var(--card-bd); }
.gw-prev-title { font-size: 15px; font-weight: 800; color: var(--text); margin: 8px 0 10px; line-height: 1.3; }

/* ===== 创建任务·四步向导 ===== */
.tw-choice-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 12px; }
.tw-choice {
  width: 100%;
  text-align: left;
  border: 1px solid var(--card-bd);
  background: var(--bubble-grad, var(--card));
  color: var(--text);
  border-radius: 16px;
  padding: 13px 14px;
  box-shadow: var(--bubble-shadow, var(--shadow));
  cursor: pointer;
  font-family: inherit;
}
.tw-choice b { display: block; font-size: 14.5px; margin-bottom: 4px; }
.tw-choice span { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.tw-choice.on { border-color: var(--violet); background: var(--primary-soft-grad); box-shadow: var(--primary-glow-soft); }
.tw-hint { font-size: 12px; margin-top: 8px; line-height: 1.5; }
.tw-preview {
  border: 1px solid var(--bubble-edge, var(--card-bd));
  border-radius: 18px;
  padding: 10px;
  background: var(--hero-bg, var(--violet-soft));
  box-shadow: var(--bubble-shadow, var(--shadow));
}
.tw-preview .task { margin-bottom: 0; }

/* ===== 目标达成·庆祝动画 ===== */
.celebrate-mask {
  position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;
  background: rgba(40, 28, 78, .42); backdrop-filter: blur(3px); padding: 20px; animation: celMaskIn .25s ease;
  overflow: hidden;
}
@keyframes celMaskIn { from { opacity: 0 } to { opacity: 1 } }
.celebrate-card {
  position: relative; z-index: 2; width: min(340px, 92vw); text-align: center;
  background: var(--card); border-radius: 26px; padding: 26px 22px 22px;
  box-shadow: 0 24px 60px rgba(40, 28, 78, .35); animation: celPop .55s cubic-bezier(.2, 1.35, .4, 1);
}
@keyframes celPop { 0% { transform: scale(.6); opacity: 0 } 60% { transform: scale(1.05) } 100% { transform: scale(1); opacity: 1 } }
.cel-badge { display: flex; justify-content: center; margin-bottom: 8px; animation: celBadge 2.4s ease-in-out infinite; }
@keyframes celBadge { 0%, 100% { transform: scale(1) rotate(-3deg) } 50% { transform: scale(1.07) rotate(3deg) } }
.cel-emoji { font-size: 76px; line-height: 1; }
.cel-title { font-size: 21px; font-weight: 900; color: var(--violet-d); margin: 6px 0 2px; }
.cel-goal { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 4px; word-break: break-word; }
.cel-reward { font-size: 13.5px; color: var(--gold); margin-bottom: 16px; word-break: break-word; }
.celebrate-card .btn.primary { margin-top: 4px; }
.cel-confetti { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.cel-confetti .cf { position: absolute; top: -12%; width: 9px; height: 14px; border-radius: 2px; opacity: .92; animation-name: confettiFall; animation-timing-function: cubic-bezier(.3, .1, .5, 1); animation-fill-mode: forwards; }
@keyframes confettiFall { 0% { transform: translateY(0) rotate(0); opacity: .95 } 100% { transform: translateY(112vh) rotate(var(--rot, 360deg)); opacity: .25 } }
@media (prefers-reduced-motion: reduce) { .cel-confetti { display: none } .celebrate-card, .cel-badge { animation: none } }

/* ===== 新手引导·聚光灯（真实界面高亮 + 动态箭头气泡，不碰任何 Codex 主界面样式） ===== */
.tour-layer { position: fixed; inset: 0; z-index: 9998; }
.tour-hole { position: fixed; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(28, 18, 55, .62); border: 2.5px solid color-mix(in srgb, #fff 72%, var(--gold)); pointer-events: none; transition: left .32s cubic-bezier(.4, 1, .4, 1), top .32s cubic-bezier(.4, 1, .4, 1), width .32s, height .32s; }
.tour-hole::after { content: ""; position: absolute; inset: -5px; border-radius: 17px; border: 2.5px solid color-mix(in srgb, var(--violet) 72%, var(--gold)); animation: tourPulse 1.5s ease-in-out infinite; }
@keyframes tourPulse { 0%, 100% { opacity: .35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }
.tour-tip {
  position: fixed;
  max-width: min(320px, 88vw);
  background:
    radial-gradient(circle at 22% 12%, rgba(255,255,255,.88), transparent 32%),
    var(--bubble-grad);
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--violet) 20%, rgba(255,255,255,.76));
  border-radius: 18px;
  padding: 16px 16px 13px;
  box-shadow: var(--bubble-shadow), 0 18px 44px rgba(28, 18, 55, .22);
  z-index: 9999;
  animation: tourTipBob 2.2s ease-in-out infinite;
}
@keyframes tourTipBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.tour-tip::before { content: ""; position: absolute; left: var(--arrow-x, 50%); width: 16px; height: 16px; background: color-mix(in srgb, var(--card) 86%, var(--violet-soft)); border: inherit; transform: translateX(-50%) rotate(45deg); }
.tour-tip.up::before { top: -7px; }
.tour-tip.down::before { bottom: -7px; }
.tour-tip .tour-text { font-size: 14.5px; line-height: 1.55; margin-bottom: 12px; padding-right: 16px; }
.tour-tip .tour-text b { color: var(--violet-d, var(--violet)); }
.tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tour-dots { display: flex; gap: 5px; }
.tour-dots i { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--card-bd); }
.tour-dots i.on { background: var(--violet); width: 16px; border-radius: 3px; }
.tour-btns { display: flex; gap: 6px; }
.tour-x { position: absolute; top: 8px; right: 10px; border: 0; background: transparent; font-size: 18px; color: var(--muted); cursor: pointer; line-height: 1; }
@media (prefers-reduced-motion: reduce) { .tour-hole::after, .tour-tip { animation: none; } }