:root{color-scheme:dark;--accent:#ff78a8;--accent-light:#f5a8c0;--overlay:.50;--bg-x:50%;--bg-y:41%;--mobile-bg-x:50%;--mobile-bg-y:50%;--content-width:320px;--heading-size:51px;font-family:Arial,Helvetica,'PingFang SC','Microsoft YaHei',sans-serif;--glass-opacity:.25;--glass-blur:28px;--glass-shine:.78;--glass-rgb:199,155,186;--glass-saturation:1.6;--heading-font:"Playfair Display",Georgia,serif;--heading-letter-spacing:2px;--glow-strength:.95;--glow-rgb:255,120,168;--chat-popup-delay:450ms;--chat-popup-duration:850ms}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;min-height:100svh;background:#382d35;color:#fff;-webkit-font-smoothing:antialiased}
.scene,.scene-fallback,.scene-image,.scene-tint{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
.scene{overflow:hidden;z-index:0}
.scene-fallback{background:radial-gradient(ellipse at 46% 32%,#a67e89 0%,transparent 31%),radial-gradient(ellipse at 14% 44%,#4b663d 0%,transparent 36%),radial-gradient(ellipse at 85% 40%,#7c5a40 0%,transparent 40%),linear-gradient(145deg,#5f6d4b 0%,#99687b 45%,#6f4a39 100%)}
.scene-image{object-fit:cover;object-position:var(--bg-x) var(--bg-y);font-size:0}
.scene-image[src=""],.scene-image:not([src]){display:none}
.scene-tint{background:linear-gradient(180deg,rgba(15,10,11,calc(var(--overlay) * .84)) 0%,rgba(15,10,11,var(--overlay)) 55%,rgba(22,11,19,calc(var(--overlay) * 1.18)) 100%)}
.landing{min-height:100svh;position:relative;z-index:1;isolation:isolate;display:flex;flex-direction:column;align-items:center}
.chat-card{position:absolute;top:23px;left:50%;transform:translateX(-50%);width:min(400px,calc(100% - 34px));min-height:106px;padding:16px 16px 14px 14px;border-radius:16px;background:rgba(255,255,255,.96);box-shadow:0 10px 34px rgba(0,0,0,.14);display:flex;align-items:center;gap:13px;z-index:2;color:#333;text-decoration:none;text-align:left;transition:transform .24s,box-shadow .24s;will-change:transform}
/* 参照原站：通知从上方滑入，轻微过冲回弹，而不是单纯淡入。 */
.chat-card.is-popping{animation:chat-arrive var(--chat-popup-duration) cubic-bezier(.17,.92,.22,1) var(--chat-popup-delay) both}
@keyframes chat-arrive{
  0%{opacity:0;transform:translate(-50%,-175px) scale(.94)}
  56%{opacity:1;transform:translate(-50%,12px) scale(1.025)}
  76%{transform:translate(-50%,-5px) scale(.994)}
  89%{transform:translate(-50%,2px) scale(1.003)}
  100%{opacity:1;transform:translate(-50%,0) scale(1)}
}
.chat-card:hover{transform:translateX(-50%) translateY(-2px);box-shadow:0 14px 39px rgba(0,0,0,.21)}
.online-dot{animation:online-pulse 1.8s ease-out infinite}
@keyframes online-pulse{0%,100%{box-shadow:0 0 0 1px rgba(46,204,113,.2),0 0 0 0 rgba(46,204,113,.5)}60%{box-shadow:0 0 0 1px rgba(46,204,113,.2),0 0 0 6px rgba(46,204,113,0)}}
.chat-avatar{position:relative;flex:none;width:45px;height:45px;align-self:flex-start;margin-top:9px;border-radius:50%;background:linear-gradient(135deg,#ffd0cf,#926f8e);display:grid;place-items:center}
.chat-avatar img{display:block;width:45px;height:45px;object-fit:cover;border-radius:50%;border:2px solid #fff}
.online-dot{position:absolute;width:15px;height:15px;right:-1px;bottom:-7px;border:3px solid #fff;background:#3acf73;border-radius:50%;box-shadow:0 0 0 1px #e9e9e9}
.chat-copy{display:flex;flex-direction:column;gap:5px;min-width:0}
.chat-copy strong{font-size:17px;line-height:1.18;font-weight:750}
.chat-message{font-size:14px;color:#666;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-action{font-size:15px;line-height:1.25;font-weight:700;color:#fa5290;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.main-content{width:min(var(--content-width),calc(100% - 36px));padding-top:clamp(240px,42vh,375px);padding-bottom:16px;display:flex;flex-direction:column;align-items:stretch;text-align:center}
/* 修复旧版标题视觉不居中：宽度铺满内容列，文字容器与字形都强制居中。 */
.intro{width:100%;display:flex;flex-direction:column;align-items:center;text-align:center}
.intro h1{font-family:var(--heading-font);font-size:var(--heading-size);font-weight:600;letter-spacing:var(--heading-letter-spacing);line-height:1.17;margin:0 auto;color:#fff;text-shadow:0 2px 20px rgba(255,182,193,.45);width:100%;max-width:100%;text-align:center;display:block;overflow:hidden;white-space:nowrap;overflow-wrap:normal;word-break:normal;text-overflow:ellipsis;font-kerning:normal}
.intro p{width:100%;text-align:center}
.intro p{font-size:19px;line-height:1.45;letter-spacing:.4px;color:rgba(255,255,255,.88);margin:12px 0 0;font-weight:400}
.cta-wrap{position:relative;margin-top:29px}
/* Liquid Glass: 真实背景透过按钮模糊，折射边缘和多层镜面高光叠加。
   CSS 实现的视觉近似效果，非 Apple 原生组件。 */
.cta,.social-button{
 position:relative;isolation:isolate;overflow:hidden;cursor:pointer;
 -webkit-backdrop-filter:blur(var(--button-blur,var(--glass-blur))) saturate(var(--button-saturation,var(--glass-saturation))) brightness(1.055);
 backdrop-filter:blur(var(--button-blur,var(--glass-blur))) saturate(var(--button-saturation,var(--glass-saturation))) brightness(1.055);
 transform:translateZ(0);will-change:transform;
 border:1px solid rgba(255,255,255,.37);
 box-shadow:inset 0 1.5px 1px rgba(255,255,255,.62),inset 0 -1.5px 2px rgba(8,6,13,.18),
             inset 2px 0 5px rgba(255,255,255,.11),0 13px 36px rgba(12,6,13,.21),0 2px 7px rgba(0,0,0,.08);
 transition:transform .28s cubic-bezier(.2,.8,.25,1.2),
            box-shadow .28s ease, filter .28s ease, background-color .28s ease;
}
.cta::before,.social-button::before{
 content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
 background:
 radial-gradient(ellipse 80% 100% at var(--spot-x,26%) -44%,rgba(255,255,255,.57),transparent 71%),
 linear-gradient(180deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,.05) 33%,transparent 52%,rgba(0,0,0,.08) 100%);
 opacity:var(--button-shine,var(--glass-shine));
}
.cta::after,.social-button::after{
 content:'';position:absolute;left:5%;right:5%;top:2px;height:43%;z-index:-1;pointer-events:none;
 border-radius:999px 999px 45% 45%;
 background:linear-gradient(180deg,rgba(255,255,255,.36),rgba(255,255,255,.06) 18%,transparent 100%);
 opacity:calc(var(--button-shine,var(--glass-shine)) * .8);
 -webkit-mask-image:linear-gradient(180deg,#000,transparent 90%);mask-image:linear-gradient(180deg,#000,transparent 90%);
}
.cta{height:72px;width:100%;
 background:linear-gradient(102deg,color-mix(in srgb,var(--accent) 80%,transparent),color-mix(in srgb,var(--accent-light) 82%,transparent));
 display:flex;align-items:center;justify-content:center;gap:12px;padding:8px 22px;
 border-radius:999px;text-decoration:none;color:#fff;font-size:16px;font-weight:750;letter-spacing:1px;
 text-shadow:0 1px 1px rgba(82,24,59,.18);
}
.cta:hover,.social-button:hover{transform:translateY(-3px) scale(1.012);filter:brightness(1.08);
 box-shadow:inset 0 1.5px 1px rgba(255,255,255,.77),inset 0 -1px 2px rgba(8,6,13,.13),
 0 17px 38px rgba(12,6,13,.24),0 0 20px rgba(255,255,255,.085)}
/* 双层柔光：内层亮边 + 外层散射。悬停时叠加 Liquid Glass 的指针反光。 */
@media (hover:hover) and (pointer:fine){
 html[data-hover-glow="true"] .social-button:hover,
 html[data-hover-glow="true"] .cta:hover{
  border-color:rgba(255,255,255,.68);
  box-shadow:inset 0 1.5px 2px rgba(255,255,255,.9),inset 0 -1px 3px rgba(255,255,255,.17),
    0 9px 24px rgba(0,0,0,.18),
    0 0 16px rgba(var(--glow-rgb),calc(.36 * var(--glow-strength))),
    0 0 39px rgba(var(--glow-rgb),calc(.20 * var(--glow-strength))),
    0 0 75px rgba(var(--glow-rgb),calc(.10 * var(--glow-strength)));
  animation:glass-aura 2.4s ease-in-out infinite;
 }
 html[data-hover-glow="true"] .social-button:hover::before,
 html[data-hover-glow="true"] .cta:hover::before{
  background:radial-gradient(circle 190px at var(--spot-x,50%) var(--spot-y,20%),
     rgba(255,255,255,.58) 0%,rgba(var(--glow-rgb),.17) 30%,transparent 73%),
     linear-gradient(180deg,rgba(255,255,255,.26),transparent 54%,rgba(0,0,0,.09));
 }
 @keyframes glass-aura{
  0%,100%{filter:brightness(1.075)}
  50%{filter:brightness(1.17)}
 }
}
.cta:active,.social-button:active{transform:translateY(1px) scale(.976);filter:brightness(1.13);
 box-shadow:inset 0 2px 8px rgba(0,0,0,.14),inset 0 1px 3px rgba(255,255,255,.38),0 5px 16px rgba(0,0,0,.12)}
.cta svg,.cta .brand-logo{width:31px;height:31px;flex:none;display:block;object-fit:contain}
.vip-label{z-index:2;position:absolute;right:12px;top:-14px;height:32px;min-width:47px;padding:7px 12px 5px;border-radius:999px;background:linear-gradient(95deg,var(--accent),var(--accent-light));font-size:13px;line-height:20px;font-weight:800;letter-spacing:1.4px;box-shadow:0 5px 14px rgba(34,10,20,.08)}
.button-list{display:flex;flex-direction:column;gap:15px;margin-top:54px}
/* 主背景由玻璃 tint 值和背景照片共同决定，不是固定灰色蒙层。 */
.social-button{min-height:74px;padding:15px 24px;display:flex;align-items:center;justify-content:center;gap:12px;
 color:#fff;text-decoration:none;border-radius:999px;
 background:linear-gradient(120deg,rgba(255,255,255,.10),rgba(255,255,255,.012) 42%,rgba(0,0,0,.07)),rgba(var(--glass-rgb),var(--glass-opacity));
 font-size:16px;font-weight:750;letter-spacing:1.3px;text-shadow:0 1px 1px rgba(0,0,0,.22)}
.social-button svg,.social-button .brand-logo{width:34px;height:34px;flex:none;display:block;object-fit:contain}
.social-button--compact{min-height:63px;font-size:14px;letter-spacing:.7px}
.social-button--compact svg,.social-button--compact .brand-logo{width:27px;height:27px}
.more{margin-top:21px}.show-more{color:#6dbfe8;background:none;border:0;padding:3px;font-size:15px;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.extra-buttons{margin-top:14px;display:flex;flex-direction:column;gap:12px}.extra-buttons[hidden]{display:none}
.page-footer{margin-top:27px;padding-bottom:1px;display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:4px;color:rgba(255,255,255,.85);font-size:15px;line-height:1.3;letter-spacing:.1px}
.page-footer a{color:#ffaccd;text-decoration:none;overflow-wrap:anywhere}
.page-footer a:hover{text-decoration:underline}
.floating-bubble{position:fixed;right:0;bottom:21px;min-width:45px;height:47px;display:flex;align-items:center;justify-content:center;background:#fff;color:#8f55db;text-decoration:none;border-radius:999px 0 0 999px;z-index:4;font-size:23px;box-shadow:0 5px 22px rgba(0,0,0,.2)}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,12px);background:rgba(36,26,35,.94);color:#fff;padding:11px 20px;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.24);font-size:13px;z-index:20;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:90%;text-align:center}
.toast.is-visible{opacity:1;transform:translate(-50%,0)}
a:focus-visible,button:focus-visible{outline:3px solid #fff;outline-offset:4px}
@media(max-width:600px){
 .scene-image{object-position:var(--mobile-bg-x) var(--mobile-bg-y)}
 .chat-card{top:max(16px,env(safe-area-inset-top));min-height:94px;padding:13px 13px 12px;width:min(390px,calc(100% - 28px))}
 .chat-avatar,.chat-avatar img{width:42px;height:42px}.chat-copy strong{font-size:16px}.chat-message{font-size:12px}.chat-action{font-size:14px}
 .main-content{padding-top:clamp(229px,34svh,310px);padding-bottom:max(21px,env(safe-area-inset-bottom))}
 .intro h1{font-size:var(--heading-size)}.intro p{font-size:17px}
 .cta-wrap{margin-top:26px}.cta{height:68px}
 .button-list{margin-top:45px;gap:14px}.social-button{min-height:69px}
 .page-footer{margin-top:24px;font-size:13px}
}
@media(max-width:359px){.main-content{width:calc(100% - 42px)}.intro h1{font-size:var(--heading-size)}.social-button{min-height:65px}.cta{height:65px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}.chat-card.is-popping{opacity:1!important;transform:translateX(-50%)!important}}
/* 不支持滤镜的旧浏览器也保留可阅读的玻璃半透明效果 */
@supports not (backdrop-filter:blur(1px)){.social-button{background:rgba(87,64,86,.84)}.cta{background:linear-gradient(105deg,var(--accent),var(--accent-light))}}

/* V3 · 双通知交替：当前卡片向下滑出并淡出，下一张再自上方回弹进入 */
.chat-card.is-switching-out{animation:chat-depart var(--chat-exit-duration,700ms) ease-in both!important;pointer-events:none}
@keyframes chat-depart{
  0%{opacity:1;transform:translate(-50%,0)}
  44%{opacity:.72;transform:translate(-50%,30px)}
  100%{opacity:0;transform:translate(-50%,75px)}
}
.chat-card.is-switching-in{animation:chat-arrive var(--chat-popup-duration) cubic-bezier(.17,.92,.22,1) 0ms both}
@media(prefers-reduced-motion:reduce){.chat-card.is-switching-out,.chat-card.is-switching-in{animation:none!important;opacity:1!important;transform:translateX(-50%)!important}}


/* V3.1: VIP 角标和主按钮在同一动画坐标系内移动。
   原先仅 .cta 自身 transform，兄弟节点 .vip-label 留在原地。 */
.cta-wrap{transition:transform .28s cubic-bezier(.2,.8,.25,1.2);transform-origin:center center;will-change:transform}
@media(hover:hover) and (pointer:fine){
 .cta-wrap:hover{transform:translateY(-3px) scale(1.012)}
}
.cta-wrap:focus-within{transform:translateY(-3px) scale(1.012)}
.cta-wrap:active{transform:translateY(1px) scale(.976)}
.cta-wrap .cta:hover,.cta-wrap .cta:active{transform:none}
/* 姓名永不因浏览器或编辑器模拟宽度而断为两行；不足时 JS 自动计算字号。 */
.intro h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal;word-break:normal}

/* V3.4: 同一渲染容器控制内置与上传图标，保证尺寸、透明度与按钮对齐一致。 */
.site-icon{width:var(--icon-size,34px);height:var(--icon-size,34px);display:inline-flex;align-items:center;justify-content:center;flex:none;line-height:0}
.cta .site-icon svg,.cta .site-icon img,.social-button .site-icon svg,.social-button .site-icon img,
.social-button--compact .site-icon svg,.social-button--compact .site-icon img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;display:block;flex:none}
.site-icon .uploaded-icon.icon-white{filter:brightness(0) invert(1)}

/* V3.5 — 字号、字重和页面区域独立控制。所有值由 config.js 注入 CSS 变量。 */
:root{--heading-weight:600;--subtitle-size:19px;--subtitle-weight:400;--primary-font-size:16px;--primary-font-weight:750;--social-font-size:16px;--social-font-weight:750;--vip-font-weight:800;--content-offset-desktop:0px;--content-offset-mobile:0px}
.main-content{padding-top:max(112px,calc(clamp(240px,42vh,375px) + var(--content-offset-desktop)))}
.intro h1{font-weight:var(--heading-weight);font-size:var(--heading-size)}
.intro p{font-size:var(--subtitle-size);font-weight:var(--subtitle-weight)}
.cta{font-size:var(--primary-font-size);font-weight:var(--primary-font-weight)}
.social-button{font-size:var(--social-font-size);font-weight:var(--social-font-weight)}
.vip-label{font-weight:var(--vip-font-weight)}
/* 屏幕适配单行模式允许标题跨出窄按钮列、仍相对页面中心对齐。 */
html[data-heading-mode="viewport"] .intro h1{width:min(calc(100vw - 28px),720px);max-width:none;flex:none}
html[data-heading-mode="column"] .intro h1{width:100%;max-width:100%;flex:none}
/* 自由字号不再被 JS 偷偷缩小；长姓名在窄屏可分行。 */
html[data-heading-mode="wrap"] .intro h1{width:100%;max-width:100%;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;word-break:normal;hyphens:none}
@media(max-width:600px){
 .main-content{padding-top:max(100px,calc(clamp(229px,34svh,310px) + var(--content-offset-mobile)))}
 .intro h1{font-size:var(--heading-size)}
 .intro p{font-size:var(--subtitle-size)}
 .cta{font-size:var(--primary-font-size)}
 .social-button{font-size:var(--social-font-size)}
}
@media(max-width:359px){.intro h1{font-size:var(--heading-size)}}
/* 超出内容列的标题仍相对视口中线居中；修复 flex 项 margin:auto 在超宽时偏移。 */
html[data-heading-mode="viewport"] .intro h1{margin-inline:0;align-self:center}

/* ============================================================
   V3.7 · 主按钮共用社交按钮材质模型
   透明玻璃底、背景滤镜、边缘光、镜面高光和交互状态
   使用 .cta / .social-button 上方共同规则。
   主按钮唯一增加的效果是可控颜色渐变叠层。
   ============================================================ */
:root{
  --primary-glass-opacity:.25;
  --primary-glass-blur:28px;
  --primary-glass-shine:.78;
  --primary-glass-saturation:1.6;
  --primary-glass-rgb:199,155,186;
  --primary-gradient-start-rgb:255,120,168;
  --primary-gradient-end-rgb:245,168,192;
  --primary-gradient-opacity:.42;
}
.cta{
  --button-blur:var(--primary-glass-blur);
  --button-saturation:var(--primary-glass-saturation);
  --button-shine:var(--primary-glass-shine);
  /* 与 .social-button 的底色和光影结构一致，在最上层添加可关闭的颜色渐变。
     颜色层由统一圆角本体裁切，避免另加描边或模糊层引发端部接缝。 */
  background:
    linear-gradient(112deg,
      rgba(var(--primary-gradient-start-rgb),var(--primary-gradient-opacity)),
      rgba(var(--primary-gradient-end-rgb),var(--primary-gradient-opacity))),
    linear-gradient(120deg,rgba(255,255,255,.10),rgba(255,255,255,.012) 42%,rgba(0,0,0,.07)),
    rgba(var(--primary-glass-rgb),var(--primary-glass-opacity));
}
/* 切换玻璃模式只影响背景模糊，不更换渐变/透明度计算。 */
html[data-primary-glass="false"] .cta{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
/* 主按钮悬停由 .cta-wrap 整体处理，VIP 标签仍和按钮一同移动。 */
.cta-wrap .cta:hover,.cta-wrap .cta:active{transform:none}
/* VIP 徽标同样使用单块渐变材质，内部没有第二条端部轮廓。 */
.cta-wrap .vip-label{
  border:0;
  overflow:hidden;
  background:linear-gradient(110deg,rgba(238,112,160,.96),rgba(247,166,199,.96));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.14),0 5px 13px rgba(42,10,30,.14);
}
html[data-vip-sync="true"] .cta-wrap .vip-label{
  background:
    linear-gradient(112deg,
      rgba(var(--primary-gradient-start-rgb),var(--primary-gradient-opacity)),
      rgba(var(--primary-gradient-end-rgb),var(--primary-gradient-opacity))),
    rgba(var(--primary-glass-rgb),var(--primary-glass-opacity));
}
/* 当颜色叠加强度为零时，与社交按钮一致，便于直接比较。 */
@supports not (backdrop-filter:blur(1px)){
  .cta{backdrop-filter:none;-webkit-backdrop-filter:none}
}


/* V3.7.1 · 字体稳定显示 + 手写体下伸笔画修复。
   旧版标题直接 overflow:hidden 导致 g/y/j 的下伸笔画被裁切。
   改成可见溢出并留出字形空间；单行宽度由 JS 精确适配。 */
.intro h1,
html[data-heading-mode="viewport"] .intro h1,
html[data-heading-mode="column"] .intro h1,
html[data-heading-mode="wrap"] .intro h1 {
  overflow: visible;
  text-overflow: clip;
  line-height: 1.38;
  padding-block: .025em .12em;
}
/* 等选中的 Web Font 完全就绪并完成字号测量后才首次展示标题，避免刷新时先出现备用字体。 */
html:not([data-heading-ready="true"]) #profileName {visibility:hidden}