/* 经期页「月出皎兮」：周期画成一圈月相点，中间一轮按今天盈亏的月亮；心情是五种月相；
   卡片框全部拿掉，用细线分隔。颜色取皮肤变量。由 luna-moon.js 给 #lunaPanel 加 .lm 并补上月亮和月相环。 */
#lunaPanel.lm {
  --lm-bg: var(--nc-bg, var(--bg, #fbf3f5));
  --lm-soft: var(--nc-accent-soft, #f6dde4);
  --lm-accent: var(--nc-accent, #d88aa1);
  --lm-ink: var(--nc-text, var(--text, #3a3236));
  --lm-ink-2: var(--nc-muted, color-mix(in srgb, var(--lm-ink) 65%, transparent));
  --lm-ink-3: var(--nc-faint, color-mix(in srgb, var(--lm-ink) 40%, transparent));
  --lm-seal: color-mix(in srgb, var(--lm-accent) 45%, #b03a3f);
  --lm-line: color-mix(in srgb, var(--lm-ink) 14%, transparent);
  --lm-cn: var(--font-cn, "Songti SC", "Noto Serif SC", serif);
  --lm-en: var(--font-en, "Cormorant Garamond", Georgia, serif);
  background: radial-gradient(ellipse 90% 40% at 50% 0%, color-mix(in srgb, var(--lm-soft) 70%, transparent), transparent 70%), linear-gradient(180deg, var(--lm-bg), color-mix(in srgb, var(--lm-bg) 50%, #fbf9f5));
  color: var(--lm-ink);
}
#lunaPanel.lm .luna-page, #lunaPanel.lm .luna-scroll { background: none; }
#lunaPanel.lm .luna-head { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; box-shadow: none; }
#lunaPanel.lm .luna-title { font: italic 400 15px/1 var(--lm-en); letter-spacing: .3em; color: var(--lm-ink-2); }
#lunaPanel.lm .luna-back, #lunaPanel.lm .luna-refresh { color: var(--lm-ink-2); background: none; border: 0; box-shadow: none; }
#lunaPanel.lm .luna-shell { gap: 0; padding: 0; max-width: 520px; }
#lunaPanel.lm .luna-card { border: 0; border-radius: 0; background: none; box-shadow: none; }

/* 月相环 + 月亮 */
#lunaPanel.lm .luna-hero { position: relative; display: block; height: 350px; min-height: 0; padding: 0; overflow: visible; }
#lunaPanel.lm .luna-hero::after, #lunaPanel.lm .luna-hero::before { display: none; }
#lunaPanel.lm .luna-hero > .luna-hero-kicker, #lunaPanel.lm .luna-hero > .luna-hero-line, #lunaPanel.lm .luna-hero > .luna-day { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lm-ring { position: absolute; left: 50%; top: 18px; width: 300px; height: 300px; margin-left: -150px; pointer-events: none; }
.lm-ring i { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: color-mix(in srgb, var(--lm-ink) 22%, transparent); transform: rotate(var(--a)) translateY(-142px); }
.lm-ring i.p { width: 7px; height: 7px; margin: -3.5px; background: var(--lm-seal); }
.lm-ring i.f { width: 7px; height: 7px; margin: -3.5px; background: none; border: 1px dashed var(--lm-seal); }
.lm-ring i.t { width: 11px; height: 11px; margin: -5.5px; background: var(--lm-bg); border: 1.5px solid var(--lm-seal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lm-accent) 18%, transparent); }
.lm-ring b { position: absolute; left: 50%; top: 50%; width: 20px; margin-left: -10px; text-align: center; font: 400 10px/1 var(--lm-cn); color: var(--lm-ink-3); transform: rotate(var(--a)) translateY(-160px) rotate(calc(-1 * var(--a))); }
.lm-moon { position: absolute; left: 50%; top: 88px; width: 160px; height: 160px; margin-left: -80px; border-radius: 50%; overflow: hidden; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, #fffdf9, color-mix(in srgb, var(--lm-soft) 60%, #fff) 70%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--lm-accent) 18%, transparent), 0 0 60px 6px color-mix(in srgb, var(--lm-accent) 22%, transparent); }
.lm-moon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: color-mix(in srgb, var(--lm-ink) 14%, var(--lm-bg)); transform: translateX(var(--shade, 100%)); opacity: .9; transition: transform .6s ease; }
.lm-moon::before { content: ""; position: absolute; inset: 0; z-index: 1; opacity: .35; border-radius: 50%;
  background: radial-gradient(circle at 30% 60%, color-mix(in srgb, var(--lm-accent) 25%, transparent) 0 9%, transparent 10%), radial-gradient(circle at 62% 35%, color-mix(in srgb, var(--lm-accent) 20%, transparent) 0 6%, transparent 7%), radial-gradient(circle at 55% 72%, color-mix(in srgb, var(--lm-accent) 18%, transparent) 0 5%, transparent 6%); }
.lm-cen { position: absolute; left: 0; right: 0; top: 128px; z-index: 2; text-align: center; pointer-events: none; }
.lm-cen small { font: 400 12px/1 var(--lm-cn); letter-spacing: .4em; text-indent: .4em; color: var(--lm-seal); }
.lm-cen b { display: block; margin-top: 12px; font: 300 40px/1 var(--lm-cn); color: var(--lm-ink); }
.lm-cen b.s { font-size: 24px; letter-spacing: .1em; }
.lm-cen b em { font-style: normal; font-size: 15px; margin-left: 4px; color: var(--lm-ink-2); }
.lm-cen span { display: block; margin-top: 10px; font: 300 11.5px/1 var(--lm-cn); letter-spacing: .14em; color: var(--lm-ink-2); }
.lm-verse { position: absolute; left: 22px; top: 14px; display: flex; flex-direction: row-reverse; gap: 8px; pointer-events: none; }
.lm-verse p { margin: 0; font: 300 15px/1.35 var(--lm-cn); color: var(--lm-ink); }
.lm-verse small { font: 300 10px/1.5 var(--lm-cn); color: var(--lm-ink-3); padding-left: 6px; margin-top: 30px; border-left: 1px solid color-mix(in srgb, var(--lm-accent) 50%, transparent); box-sizing: content-box; }
.lm-v { display: block; width: 1em; word-break: break-all; text-align: center; }
.lm-next { position: absolute; right: 24px; top: 20px; text-align: right; pointer-events: none; }
.lm-next small { display: block; font: 500 8.5px/1 var(--lm-en); letter-spacing: .3em; color: var(--lm-ink-3); text-transform: uppercase; }
.lm-next b { display: block; margin-top: 6px; font: italic 400 20px/1 var(--lm-en); color: var(--lm-seal); }

/* 记录按钮：两根细线夹着 */
#lunaPanel.lm .luna-action { display: flex; justify-content: center; gap: 22px; margin: 0; padding: 0; }
#lunaPanel.lm .luna-btn-start, #lunaPanel.lm .luna-btn-undo { flex: none; width: auto !important; min-height: 0; padding: 8px 0; border: 0; border-radius: 0; background: none; box-shadow: none; font: 400 14px/1 var(--lm-cn); letter-spacing: .3em; color: var(--lm-seal); display: inline-flex; align-items: center; gap: 14px; }
#lunaPanel.lm #lunaBtnStart::before, #lunaPanel.lm #lunaBtnStart::after { content: ""; width: 34px; height: 1px; background: color-mix(in srgb, var(--lm-seal) 50%, transparent); }

/* 三个数字 */
#lunaPanel.lm .luna-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 30px 24px 0; padding: 16px 0; border-top: 1px solid var(--lm-line); border-bottom: 1px solid var(--lm-line); }
#lunaPanel.lm .luna-stat { padding: 0; text-align: center; background: none; border: 0; }
#lunaPanel.lm .luna-stat + .luna-stat { border-left: 1px solid var(--lm-line); }
#lunaPanel.lm .luna-stat + .luna-stat::before { display: none; }
#lunaPanel.lm .luna-stat-val { font: 300 22px/1 var(--lm-cn); color: var(--lm-ink); }
#lunaPanel.lm .luna-stat-lbl { margin-top: 8px; font: 300 11px/1 var(--lm-cn); letter-spacing: .2em; color: var(--lm-ink-2); }

/* 今日 */
#lunaPanel.lm .luna-daily { margin: 34px 24px 0; padding: 0; }
#lunaPanel.lm .luna-daily-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; }
#lunaPanel.lm .luna-daily-head > div { display: flex; flex-direction: row-reverse; align-items: baseline; gap: 10px; }
#lunaPanel.lm .luna-daily-head::after { content: ""; order: 1; flex: 1; height: 1px; background: linear-gradient(90deg, var(--lm-line), transparent); }
#lunaPanel.lm #lunaDailySaved { order: 2; font: 300 11px/1 var(--lm-cn); color: var(--lm-ink-3); }
#lunaPanel.lm .luna-section-kicker { font: 500 8.5px/1 var(--lm-en); letter-spacing: .3em; color: var(--lm-ink-3); }
#lunaPanel.lm .luna-daily-title { margin: 0; font: 400 16px/1 var(--lm-cn); letter-spacing: .3em; color: var(--lm-ink); }
#lunaPanel.lm .luna-daily-title { font-size: 0; }
#lunaPanel.lm .luna-daily-title::after { content: "今日"; font-size: 16px; }
#lunaPanel.lm .luna-moods { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
#lunaPanel.lm .luna-moods button { height: auto; display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 0; border: 0; background: none; box-shadow: none; color: var(--lm-ink-2); }
#lunaPanel.lm .luna-moods button i { position: relative; display: block; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; font-size: 0; background: color-mix(in srgb, var(--lm-soft) 70%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lm-accent) 35%, transparent); }
#lunaPanel.lm .luna-moods button i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: color-mix(in srgb, var(--lm-ink) 18%, var(--lm-bg)); transform: translateX(var(--m, 0%)); }
#lunaPanel.lm .luna-moods [data-mood="low"] { --m: 0%; }
#lunaPanel.lm .luna-moods [data-mood="tired"] { --m: 55%; }
#lunaPanel.lm .luna-moods [data-mood="calm"] { --m: 70%; }
#lunaPanel.lm .luna-moods [data-mood="good"] { --m: 85%; }
#lunaPanel.lm .luna-moods [data-mood="happy"] { --m: 110%; }
#lunaPanel.lm .luna-moods button span { font: 300 12px/1 var(--lm-cn); letter-spacing: .15em; color: var(--lm-ink-2); }
#lunaPanel.lm .luna-moods button.selected i { box-shadow: inset 0 0 0 1px var(--lm-seal), 0 0 0 4px color-mix(in srgb, var(--lm-accent) 18%, transparent); }
#lunaPanel.lm .luna-moods button.selected span { color: var(--lm-seal); }
#lunaPanel.lm .luna-symptoms { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 24px; }
#lunaPanel.lm .luna-symptoms button { height: auto; padding: 0 0 6px; border: 0; border-bottom: 1px dashed color-mix(in srgb, var(--lm-ink) 22%, transparent); border-radius: 0; background: none; box-shadow: none; font: 300 13px/1 var(--lm-cn); letter-spacing: .2em; color: var(--lm-ink-2); }
#lunaPanel.lm .luna-symptoms button.selected { color: var(--lm-seal); border-bottom: 1px solid var(--lm-seal); background: none; }
#lunaPanel.lm .luna-weight-row { display: flex; align-items: baseline; gap: 12px; margin-top: 24px; padding: 0; border: 0; font: 300 13px/1 var(--lm-cn); color: var(--lm-ink-2); letter-spacing: .2em; }
#lunaPanel.lm .luna-weight-row label { color: var(--lm-ink-2); }
#lunaPanel.lm .luna-weight-field { flex: 1; display: flex; align-items: baseline; gap: 8px; border: 0; background: none; }
#lunaPanel.lm #lunaWeight { flex: 1; min-width: 0; border: 0; border-bottom: 1px solid var(--lm-line); border-radius: 0; background: none; padding: 0 0 6px; font: italic 400 16px/1 var(--lm-en); color: var(--lm-ink); text-align: center; }
#lunaPanel.lm #lunaDailySave { min-height: 0; height: auto; padding: 4px 0; border: 0; background: none; box-shadow: none; font: 400 13px/1 var(--lm-cn); letter-spacing: .3em; color: var(--lm-seal); }

/* 日历：不装框 */
#lunaPanel.lm .luna-cal-wrap { margin: 34px 24px 0; padding: 0; }
#lunaPanel.lm .luna-cal-head { margin-bottom: 14px; }
#lunaPanel.lm .luna-cal-nav { background: none; border: 0; box-shadow: none; color: var(--lm-ink-2); font: 300 20px/1 var(--lm-cn); }
#lunaPanel.lm .luna-cal-title { font: 400 15px/1 var(--lm-cn); letter-spacing: .2em; color: var(--lm-ink); }
#lunaPanel.lm .luna-cal { row-gap: 6px; column-gap: 0; isolation: isolate; }
#lunaPanel.lm .luna-cal-dow { font: 300 11px/1 var(--lm-cn); color: var(--lm-ink-3); padding-bottom: 10px; }
#lunaPanel.lm .luna-cal-day { position: relative; width: auto; height: 38px; border: 0; border-radius: 0; background: none !important; box-shadow: none; display: grid; place-items: center; font: 400 14px/1 var(--lm-en); color: var(--lm-ink); opacity: 1; }
#lunaPanel.lm .luna-cal-day.future { color: var(--lm-ink-3); }
#lunaPanel.lm .luna-cal-day.actual { color: #fff; font-weight: 400; }
#lunaPanel.lm .luna-cal-day.actual::before { content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px; border-radius: 50%; background: color-mix(in srgb, var(--lm-seal) 85%, transparent); z-index: -1; }
#lunaPanel.lm .luna-cal-day.predicted { color: var(--lm-seal); }
#lunaPanel.lm .luna-cal-day.predicted::before { content: ""; position: absolute; left: 50%; top: 50%; width: 29px; height: 29px; margin: -14.5px; border-radius: 50%; border: 1px dashed var(--lm-seal); z-index: -1; }
#lunaPanel.lm .luna-cal-day.today { font-weight: 600; color: var(--lm-ink); box-shadow: none; }
#lunaPanel.lm .luna-cal-day, #lunaPanel.lm .luna-cal-day:focus { outline: none; }
#lunaPanel.lm .luna-cal-day:focus-visible { outline: 1px solid var(--lm-seal); outline-offset: -4px; }
#lunaPanel.lm .luna-cal-day.today.actual { color: #fff; }
#lunaPanel.lm .luna-cal-day.today::after { content: ""; position: absolute; left: 50%; bottom: 1px; width: 14px; height: 1px; margin-left: -7px; background: var(--lm-seal); }
#lunaPanel.lm .luna-cal-day.has-daily:not(.today)::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: var(--lm-ink-2); }
#lunaPanel.lm .luna-legend { margin-top: 16px; gap: 18px; font: 300 10.5px/1 var(--lm-cn); color: var(--lm-ink-2); }
#lunaPanel.lm .luna-key i { width: 9px; height: 9px; border-radius: 50%; border: 0; background: none; }
#lunaPanel.lm .luna-key.actual i { background: var(--lm-seal); }
#lunaPanel.lm .luna-key.predicted i { border: 1px dashed var(--lm-seal); }
#lunaPanel.lm .luna-key.daily i { width: 4px; height: 4px; background: var(--lm-ink-2); }
#lunaPanel.lm #lunaSelectedLabel { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--lm-line); text-align: left; font: 300 12px/1 var(--lm-cn); color: var(--lm-ink-2); letter-spacing: .1em; }
#lunaPanel.lm .luna-cal-wrap .luna-action { justify-content: flex-end; gap: 18px; margin-top: 10px; }
#lunaPanel.lm .luna-cal-wrap .luna-btn-start { padding: 6px 0; font-size: 12.5px; letter-spacing: .2em; }

/* 节律 */
#lunaPanel.lm .luna-insight { margin: 34px 24px 0; padding: 0; }
#lunaPanel.lm .luna-insight-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; }
#lunaPanel.lm .luna-insight-head::after { content: ""; order: 1; flex: 1; height: 1px; background: linear-gradient(90deg, var(--lm-line), transparent); }
#lunaPanel.lm .luna-insight-title { font: 400 16px/1 var(--lm-cn); letter-spacing: .3em; color: var(--lm-ink); }
#lunaPanel.lm #lunaRegularity { order: 2; font: 300 11px/1 var(--lm-cn); color: var(--lm-ink-3); background: none; border: 0; padding: 0; }
#lunaPanel.lm #lunaRhythm { display: flex; align-items: flex-end; justify-content: space-around; gap: 14px; height: 60px; padding: 0 10px; background: none; }
#lunaPanel.lm .luna-rhythm-bar { flex: 0 0 6px; width: 6px; height: calc(var(--h, 30px) + 10px); border-radius: 3px; background: color-mix(in srgb, var(--lm-accent) 45%, transparent); }
#lunaPanel.lm .luna-rhythm-bar:last-child { background: var(--lm-seal); }
#lunaPanel.lm #lunaInsight { margin-top: 14px; font: 300 11.5px/1.7 var(--lm-cn); color: var(--lm-ink-2); letter-spacing: .06em; }
#lunaPanel.lm .luna-hint { margin: 30px 24px 0; padding: 0; text-align: center; font: 300 10.5px/1.6 var(--lm-cn); color: var(--lm-ink-3); background: none; }
.lm-end { margin: 18px 0 60px; text-align: center; font: 300 11px/1 var(--lm-cn); letter-spacing: .5em; color: var(--lm-ink-3); }
/* 选中的日子：原逻辑用行内 outline 标出来，这里换成一圈细环 */
#lunaPanel.lm .luna-cal-day[style*="outline"] { outline: none !important; background: radial-gradient(circle, transparent 17px, color-mix(in srgb, var(--lm-ink) 45%, transparent) 17px 18px, transparent 18.5px) !important; }

/* 状态栏衔接：顶上从状态栏颜色淡下来 */
#lunaPanel.lm::before { content: ""; position: absolute; z-index: 0; left: 0; right: 0; top: 0; height: 120px; pointer-events: none; background: linear-gradient(180deg, var(--route-top-bg, var(--lm-bg)), transparent); }
#lunaPanel.lm .luna-page { position: relative; z-index: 1; }