/* 梅下信笺 · Layout follows design/home-poster/prototype.html.
   All pigment colors come from the current skin. */
@font-face { font-family: "Home Long Cang"; src: url("assets/fonts/home-long-cang.woff2") format("woff2"); font-display: swap; }
#menuPanel {
  --hp-paper: color-mix(in srgb, var(--nc-accent-soft) 30%, var(--nc-bg));
  --hp-ink: var(--nc-text);
  --hp-muted: color-mix(in srgb, var(--nc-text) 45%, var(--nc-muted));
  --hp-faint: var(--nc-muted);
  --hp-seal: color-mix(in srgb, var(--nc-accent) 70%, var(--nc-text));
  --hp-cn: "Noto Serif SC", "Songti SC", "STSong", serif;
  --hp-en: "Cormorant Garamond", Georgia, serif;
}
#menuPanel .home-page { background: var(--hp-paper); color: var(--hp-ink); }
#menuPanel .hv2-mesh, #menuPanel .home-page::after { display:none; }
#menuPanel .home-scroll.hv2 { position:relative; z-index:2; width:min(100%,480px); margin:auto; padding:env(safe-area-inset-top,0px) 0 calc(100px + env(safe-area-inset-bottom,0px)); overflow-x:hidden; color:var(--hp-ink);
  background:radial-gradient(ellipse 290px 320px at 4% 946px,color-mix(in srgb,var(--nc-accent) 40%,transparent),transparent 72%),radial-gradient(ellipse 320px 350px at 100% 1276px,color-mix(in srgb,var(--nc-accent) 30%,transparent),transparent 72%);
  background-attachment:local;
}
#menuPanel .hv2 p { margin:0; }
#menuPanel .hv2 [hidden] { display:none !important; }
#menuPanel .hp-poster { position:relative; margin-top:-24px; height:710px; isolation:isolate; overflow:clip; }
#menuPanel .hp-poster::before { content:""; position:absolute; inset:0 auto 0 0; width:26px; background:linear-gradient(var(--nc-accent-soft),transparent 80%); mask:repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 3px); opacity:.7; pointer-events:none; }
#menuPanel .hp-poster::after { content:""; position:absolute; z-index:-1; right:-60px; top:40px; width:300px; height:330px; background:radial-gradient(ellipse,color-mix(in srgb,var(--nc-accent) 20%,transparent),transparent 68%); pointer-events:none; }
#menuPanel .hp-plum { position:absolute; z-index:0; left:10.25%; top:36px; width:92.3%; height:540px; object-fit:contain; pointer-events:none; }
#menuPanel .hp-topline { position:absolute; left:9.74%; right:135px; top:50px; height:32px; display:flex; align-items:center; gap:5px; white-space:nowrap; font:500 10.5px/1.6 var(--hp-en); letter-spacing:.12em; color:var(--hp-muted); }
#menuPanel .home-weather.hv2-wx { all:unset; cursor:pointer; display:inline-flex; align-items:baseline; font:400 10.5px/1.6 var(--hp-cn); letter-spacing:.04em; }
#menuPanel .home-weather-main { display:inline-flex; align-items:baseline; gap:5px; font:inherit; color:inherit; }
#menuPanel .wx-temp { font:500 12px/1 var(--hp-en); }
#menuPanel .home-weather-icon, #menuPanel .home-weather-meta { display:none; }
#menuPanel .home-weather-set { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
#menuPanel .hp-title { position:absolute; left:9.74%; top:104px; margin:0; writing-mode:vertical-rl; font:400 48px/1.05 "Home Long Cang",var(--hp-cn); letter-spacing:0; height:205px; }
#menuPanel .hp-title span { position:absolute; left:58px; top:4px; height:100px; font:400 16px/1.35 "Home Long Cang",var(--hp-cn); letter-spacing:.1em; color:var(--hp-muted); }
#menuPanel .hv2-tools { position:absolute; right:37px; top:50px; gap:2px; }
#menuPanel .hv2-tool { all:unset; box-sizing:border-box; width:30px; height:32px; display:grid; place-items:center; cursor:pointer; font:400 13px/1 var(--hp-en); color:var(--hp-seal); }
#menuPanel .hp-hang { all:unset; position:absolute; display:grid; justify-items:center; transform:translateX(-50%); cursor:pointer; z-index:2; }
#menuPanel .hp-luna { left:78.46%; top:200px; }
#menuPanel .hp-wish { left:60.51%; top:308px; }
#menuPanel .hp-journal { left:45.64%; top:378px; }
#menuPanel .hp-knot { width:5px; height:5px; border-radius:50%; background:var(--hp-seal); box-shadow:0 0 0 2px color-mix(in srgb,var(--hp-paper) 70%,transparent); }
#menuPanel .hp-thread { width:1px; height:84px; background:color-mix(in srgb,var(--hp-muted) 50%,transparent); }
#menuPanel .hp-wish .hp-thread { height:86px; }
#menuPanel .hp-journal .hp-thread { height:30px; }
#menuPanel .hp-slip { display:flex; align-items:flex-start; gap:6px; }
#menuPanel .hp-poem { width:1em; box-sizing:content-box; padding:6px; border-inline:1px solid color-mix(in srgb,var(--hp-muted) 65%,transparent); background:color-mix(in srgb,var(--hp-paper) 80%,transparent); font:400 14px/1.45 var(--hp-cn); word-break:break-all; text-align:center; }
#menuPanel .hp-info { width:1em; padding-top:4px; font:300 10.5px/1.5 var(--hp-cn); word-break:break-all; text-align:center; color:var(--hp-muted); }
#menuPanel .hp-info em { display:block; margin-top:3px; font-style:normal; color:var(--hp-seal); max-height:96px; overflow:hidden; }
#menuPanel #hv2JournalText { max-height:79px; }
#menuPanel .hp-moment { all:unset; cursor:pointer; position:absolute; left:0; right:0; top:559px; height:180px; }
#menuPanel .hp-photo { position:absolute; left:18%; top:0; width:88px; height:88px; padding:5px; box-sizing:content-box; transform:rotate(45deg); background:var(--nc-surface-strong); box-shadow:0 10px 18px -10px color-mix(in srgb,var(--hp-ink) 35%,transparent); }
#menuPanel .hp-photo-inner { display:block; width:100%; height:100%; overflow:hidden; background:linear-gradient(160deg,var(--nc-accent-soft),var(--nc-accent)); }
#menuPanel .hp-photo img { width:142%; height:142%; max-width:none; object-fit:cover; transform:translate(-15%,-15%) rotate(-45deg); }
#menuPanel .hp-say { position:absolute; left:48.7%; right:6.66%; top:44px; }
#menuPanel .hp-moment-heading { display:flex; align-items:center; gap:6px; padding-bottom:6px; border-bottom:1px solid var(--hp-muted); font:400 12.5px/1.4 var(--hp-cn); letter-spacing:.12em; }
#menuPanel .hp-moment-heading::after { content:"•"; margin-left:auto; color:var(--hp-seal); }
#menuPanel #hv2MomentText { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; margin-top:10px; font:300 12px/1.8 var(--hp-cn); color:var(--hp-muted); overflow-wrap:anywhere; }
#menuPanel #hv2MomentMeta { display:flex; flex-wrap:wrap; gap:3px 5px; margin-top:5px; font:italic 400 11px/1.5 var(--hp-en); color:var(--hp-faint); }
#menuPanel #hv2MomentMeta i::before { content:"·"; }
#menuPanel .hp-section-title { display:flex; align-items:center; gap:10px; margin:0 0 22px; font:400 13px/1.4 var(--hp-cn); letter-spacing:.3em; }
#menuPanel .hp-section-title small { font:500 9.5px/1 var(--hp-en); letter-spacing:.3em; color:var(--hp-faint); }
#menuPanel .hp-section-title::after { content:""; flex:1; height:1px; background:color-mix(in srgb,var(--hp-muted) 35%,transparent); }
#menuPanel .hp-verse, #menuPanel .hp-calendar { position:relative; margin:18px 6.66% 0 9.74%; }
#menuPanel .hp-verse { min-height:130px; margin-top:18px; }
#menuPanel .hv2 .home-quote { position:relative; display:block; width:100%; margin:0; min-height:0; padding:0 24px 0 0; border:0; border-radius:0; background:transparent; box-shadow:none; }
#menuPanel #homeQuoteText { display:flex; flex-direction:column; gap:6px; }
#menuPanel .home-quote-en { order:0; max-width:none; color:var(--hp-ink); font:italic 400 16px/1.34 "Snell Roundhand","Segoe Script","Apple Chancery",cursive; letter-spacing:0; }
#menuPanel .home-quote-cn { order:1; width:auto; max-width:none; margin:0; color:var(--hp-muted); font:300 13px/1.7 var(--hp-cn); letter-spacing:.1em; }
#menuPanel .home-quote-change { position:absolute; right:-8px; top:auto; bottom:-8px; width:40px; height:40px; padding:0; border:0; background:transparent; color:var(--hp-seal); font-size:0; }
#menuPanel .home-quote-change::before { content:"↻"; font:22px/1 var(--hp-en); }
#menuPanel .home-calendar-card { padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
#menuPanel .home-cal-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:20px; }
#menuPanel #homeCalExpand { flex:1; text-align:left; font:400 13px/1.4 var(--hp-cn) !important; letter-spacing:.18em; }
#menuPanel #hpMonthEnglish { margin-left:10px; font:500 9.5px/1 var(--hp-en); letter-spacing:.18em; color:var(--hp-faint); }
#menuPanel .home-cal-nav { width:28px; height:30px; border:0; background:transparent; color:var(--hp-muted); font:20px var(--hp-en); }
#menuPanel #homeCalPrev { order:1; } #menuPanel #homeCalNext { order:2; }
#menuPanel .home-cal-week, #menuPanel .home-cal-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:0; text-align:center; }
#menuPanel .home-cal-week { margin-bottom:6px; font:400 10.5px/1 var(--hp-cn); color:var(--hp-faint); }
#menuPanel .home-cal-week span { padding-bottom:10px; }
#menuPanel .home-cal-day { position:relative; display:grid; place-items:center; height:34px; min-height:34px; width:100%; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; color:var(--hp-ink); font:400 14px/1 var(--hp-en); opacity:1; isolation:isolate; }
#menuPanel .home-cal-day:disabled { color:var(--hp-muted); opacity:1; }
#menuPanel .home-cal-day::before { content:""; position:absolute; z-index:-1; width:26px; height:26px; border-radius:50%; }
#menuPanel .home-cal-day[data-level="1"]::before { background:color-mix(in srgb,var(--hp-seal) 12%,transparent); }
#menuPanel .home-cal-day[data-level="2"]::before { background:color-mix(in srgb,var(--hp-seal) 25%,transparent); }
#menuPanel .home-cal-day[data-level="3"]::before { background:color-mix(in srgb,var(--hp-seal) 42%,transparent); }
#menuPanel .home-cal-day.is-today { color:var(--hp-paper); }
#menuPanel .home-cal-day.is-today::before { background:var(--hp-seal); }
#menuPanel .home-cal-day::after { display:none; }
#menuPanel .home-cal-day[data-level]::after { display:none; }
#menuPanel .home-cal-day.is-selected:not(.is-today) { text-decoration:underline; text-underline-offset:3px; }
#menuPanel .home-cal-legend { display:none; }
#menuPanel .hp-pond { position:relative; height:340px; margin:38px 0 0; overflow:clip; }
#menuPanel .hp-pond .hp-section-title { margin:0 6.66% 0 9.74%; }
#menuPanel .hp-koi { position:absolute; top:36px; left:-12%; width:124%; max-width:none; height:300px; object-fit:cover; opacity:.8; pointer-events:none; }
#menuPanel .hp-reflection { all:unset; position:absolute; z-index:1; display:grid; justify-items:center; cursor:pointer; padding:8px; }
#menuPanel .hp-reflection:nth-of-type(1) { left:14%; top:88px; }
#menuPanel .hp-reflection:nth-of-type(2) { left:62%; top:70px; }
#menuPanel .hp-reflection:nth-of-type(3) { left:27%; top:222px; }
#menuPanel .hp-reflection:nth-of-type(4) { left:67%; top:200px; }
#menuPanel .hp-reflection b { font:400 17px/1 var(--hp-cn); letter-spacing:.32em; text-indent:.32em; }
#menuPanel .hp-reflection .hp-mirror { margin-top:1px; transform:scaleY(-1); color:var(--hp-muted); opacity:.4; filter:blur(.4px); mask:linear-gradient(to top,currentColor 10%,transparent 95%); animation:hp-ripple 5s ease-in-out infinite; }
#menuPanel .hp-reflection small { margin-top:2px; font:italic 400 10.5px/1 var(--hp-en); letter-spacing:.06em; color:var(--hp-faint); }
#menuPanel .hp-coda { padding:8px 0 8px; text-align:center; font:300 12px/1.8 var(--hp-cn); letter-spacing:.4em; color:var(--hp-faint); }
#menuPanel .home-dock { z-index:4; left:0; bottom:0; width:100%; height:auto; min-height:72px; transform:none; padding:14px 28px calc(22px + env(safe-area-inset-bottom,0px)); border:0; border-radius:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; background:linear-gradient(transparent,color-mix(in srgb,var(--hp-paper) 96%,transparent) 38%); }
#menuPanel .home-dock-item { gap:8px; min-height:30px; color:var(--hp-faint); }
#menuPanel .home-dock-item svg { display:none; }
#menuPanel .home-dock-item::before { content:""; position:static; display:block; width:4px; height:4px; border:0; border-radius:50%; background:transparent; box-shadow:none; }
#menuPanel .home-dock-item.active { color:var(--hp-ink); background:transparent; }
#menuPanel .home-dock-item.active::before { background:var(--hp-seal); }
#menuPanel .home-dock-label { font:500 8.5px/1 var(--hp-en); letter-spacing:.22em; }
#menuPanel button:focus-visible, #menuPanel [role=button]:focus-visible { outline:1px solid var(--hp-seal); outline-offset:4px; }
@keyframes hp-ripple { 0%,100% { transform:scaleY(-1) skewX(0); } 50% { transform:scaleY(-.92) skewX(4deg); } }
@media(prefers-reduced-motion:reduce) { #menuPanel .hp-mirror { animation:none; } }
@media(max-width:359px) { #menuPanel .hp-info { font-size:10px; } #menuPanel .hp-slip { gap:3px; } #menuPanel .hp-poem { padding-inline:4px; } #menuPanel .hp-photo { width:76px; height:76px; } }


/* ---------- 三个弹出面板：换肤 / 特效 / 开屏，统一成一套 ---------- */
#nonchatSkinSheet .nonchat-skin-panel, #ambienceSheet .ambience-panel, #launchStyleSheet .launch-style-panel {
  min-height: 0 !important; padding: 20px 20px calc(22px + env(safe-area-inset-bottom)) !important; border: 0 !important; border-radius: 28px 28px 0 0 !important;
  background: color-mix(in srgb, var(--nc-bg, #fff) 82%, transparent) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.2) !important; backdrop-filter: blur(22px) saturate(1.2) !important;
  box-shadow: 0 -12px 40px -18px color-mix(in srgb, var(--nc-accent, #d990a8) 45%, transparent) !important;
}
#nonchatSkinSheet .nonchat-skin-head, #ambienceSheet .ambience-head, #launchStyleSheet .launch-style-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px !important; }
#nonchatSkinSheet h2, #ambienceSheet h2, #launchStyleSheet h2 { margin: 0; font: 400 16px/1 "Noto Serif SC", "Songti SC", serif !important; letter-spacing: .12em; color: var(--nc-text, #334454) !important; }
.hv2-sheet-en { margin-right: 10px; font: 500 11px/1 "Cormorant Garamond", Georgia, serif; letter-spacing: .3em; text-transform: uppercase; color: var(--nc-muted, #728494); }
#nonchatSkinSheet .nonchat-skin-close, #ambienceSheet .nonchat-skin-close, #launchStyleSheet .nonchat-skin-close { color: var(--nc-muted, #728494) !important; font-size: 20px !important; background: transparent !important; }

/* 换肤：上面一张"香水标签"大卡显示当前皮肤（编号、名字、四个色号），下面一排细色条用来挑 */
#nonchatSkinSheet { background: transparent !important; }
#nonchatSkinSheet .nonchat-skin-panel { background: color-mix(in srgb, var(--nc-bg, #fbf5f7) 96%, transparent) !important; height: auto !important; max-height: none !important; min-height: 0 !important; }
#nonchatSkinSheet .hv2-skin-label {
  position: relative; height: 176px; border-radius: 18px; overflow: hidden; background: var(--a); color: var(--d);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04), 0 18px 30px -24px var(--c); transition: background .5s ease;
}
#nonchatSkinSheet .hv2-skin-label .mesh {
  position: absolute; inset: -40px; filter: blur(20px);
  background: radial-gradient(circle at 18% 22%, var(--b), transparent 55%), radial-gradient(circle at 88% 82%, color-mix(in srgb, var(--c) 45%, transparent), transparent 52%), radial-gradient(circle at 70% 10%, color-mix(in srgb, var(--b) 70%, #fff), transparent 45%);
}
#nonchatSkinSheet .hv2-skin-label .cap { font: 500 9px/1 "Cormorant Garamond", Georgia, serif; letter-spacing: .3em; text-transform: uppercase; }
#nonchatSkinSheet .hv2-skin-label .top { position: absolute; left: 18px; right: 18px; top: 16px; display: flex; justify-content: space-between; opacity: .7; }
#nonchatSkinSheet .hv2-skin-label .mid { position: absolute; left: 0; right: 0; top: 54px; text-align: center; }
#nonchatSkinSheet .hv2-skin-label .cn { margin: 0; font: 400 21px/1.2 "Noto Serif SC", "Songti SC", serif; letter-spacing: .32em; text-indent: .32em; }
#nonchatSkinSheet .hv2-skin-label .en { margin: 9px 0 0; font: italic 400 14px/1 "Cormorant Garamond", Georgia, serif; letter-spacing: .06em; opacity: .75; }
#nonchatSkinSheet .hv2-skin-label .dots { position: absolute; left: 12px; right: 12px; bottom: 16px; display: flex; justify-content: center; gap: 14px; }
#nonchatSkinSheet .hv2-skin-label .dots span { display: flex; align-items: center; gap: 5px; font: 500 8px/1 "Cormorant Garamond", Georgia, serif; letter-spacing: .12em; opacity: .8; }
#nonchatSkinSheet .hv2-skin-label .dots i { width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.12); }
#nonchatSkinSheet .nonchat-skin-grid { display: flex !important; gap: 5px !important; padding: 18px 0 4px !important; grid-template-columns: none !important; }
#nonchatSkinSheet .nonchat-skin-option {
  flex: 1 1 0; min-width: 0; height: 36px !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important;
  border: 0 !important; border-radius: 6px !important; overflow: hidden; display: block !important; cursor: pointer;
  background: linear-gradient(180deg, var(--skin-b), var(--skin-c)) !important; box-shadow: none !important;
  opacity: .55; transition: opacity .3s ease, transform .3s ease;
}
#nonchatSkinSheet .nonchat-skin-option.active { opacity: 1; transform: translateY(-4px); }
#nonchatSkinSheet .nonchat-skin-option::before, #nonchatSkinSheet .nonchat-skin-option::after,
#nonchatSkinSheet .skin-card-mark, #nonchatSkinSheet .nonchat-skin-option .skin-name { display: none !important; }

/* 特效 / 开屏：两列细线列表，左边一个小圆里放图标，选中那行名字变主色、右边一颗小圆点 */
#ambienceSheet .ambience-grid, #launchStyleSheet .launch-style-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0 18px !important; }
#ambienceSheet .ambience-option, #launchStyleSheet .launch-style-option {
  position: relative; min-height: 0 !important; height: auto !important; padding: 13px 2px !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important;
  background: transparent !important; border: 0 !important; border-bottom: 1px solid color-mix(in srgb, var(--nc-text, #334454) 10%, transparent) !important; border-radius: 0 !important; box-shadow: none !important;
  font: 400 13.5px/1.2 "Noto Serif SC", "Songti SC", serif !important; letter-spacing: .08em; color: var(--nc-text, #334454) !important; text-align: left; cursor: pointer;
}
#ambienceSheet .ambience-option > :first-child, #launchStyleSheet .launch-style-option > :first-child {
  flex: none; box-sizing: border-box; width: 32px !important; height: 32px !important; margin: 0 !important; padding: 7px; border-radius: 50%; display: grid !important; place-items: center;
  background: color-mix(in srgb, var(--nc-accent-soft, #fcebf0) 85%, #fff) !important; color: var(--nc-accent, #d990a8) !important;
  font: normal 400 14px/1 Georgia, serif !important; object-fit: contain; overflow: hidden; white-space: nowrap; letter-spacing: 0;
}
#ambienceSheet .ambience-option.active, #launchStyleSheet .launch-style-option.active { color: var(--nc-accent, #d990a8) !important; }
#ambienceSheet .ambience-option.active::after, #launchStyleSheet .launch-style-option.active::after {
  content: ""; position: absolute; right: 4px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--nc-accent, #d990a8);
}

/* 状态栏那一条：iPhone 主屏幕打开时，时间那一条只能是一块纯色（iOS 自己取色填的，透明也没用）。
   所以反过来：首页和锁屏的渐变从顶上先接住这块纯色，再慢慢淡进下面的渐变，就看不出断层了。 */
#menuPanel .home-page::before {
  content: "" !important; display: block !important; position: absolute; z-index: 1; left: 0; right: 0; top: 0; inset: 0 0 auto 0; transform: none; opacity: 1; filter: none; height: calc(env(safe-area-inset-top, 0px) + 140px); pointer-events: none;
  background: linear-gradient(180deg, var(--route-top-bg) 0, var(--route-top-bg) env(safe-area-inset-top, 0px), color-mix(in srgb, var(--route-top-bg) 0%, transparent) 100%);
}
.private-lock {
  background:
    linear-gradient(180deg, var(--route-top-bg) 0, var(--route-top-bg) env(safe-area-inset-top, 0px), color-mix(in srgb, var(--route-top-bg) 0%, transparent) calc(env(safe-area-inset-top, 0px) + 140px)),
    radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--nc-accent-soft, var(--accent-soft)) 86%, transparent), transparent 42%),
    radial-gradient(circle at 88% 82%, color-mix(in srgb, var(--nc-accent, var(--accent)) 24%, transparent), transparent 46%),
    var(--nc-bg, var(--bg)) !important;
}
/* 聊天侧栏收起时藏在屏幕右边外面，它的阴影会漏进来，在首页右边留一道灰影；收起时不要阴影 */
.chat-side-shell:not(.open) .chat-sidebar { box-shadow: none !important; }

#menuPanel .hp-photo-inner { position:relative; }
#menuPanel .hp-photo img[hidden] { display:none; }
#menuPanel .hp-photo-status { position:absolute; inset:0; display:grid; place-items:center; transform:rotate(-45deg); font:11px var(--hp-cn); color:var(--hp-muted); pointer-events:none; }

#menuPanel .home-calendar-card { background:transparent !important; backdrop-filter:none; -webkit-backdrop-filter:none; }
#menuPanel .home-calendar-card::before, #menuPanel .home-calendar-card::after { display:none !important; }
#menuPanel .home-cal-day[data-level] { background:transparent !important; }


#menuPanel .hp-calendar { margin-top:-20px; }
#menuPanel .hv2 .hp-coda { margin-top:-38px; }