* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { min-height: 100%; background: #fff7f1; }
body { margin: 0; min-height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif; color: #202124; background: #fff7f1; }
button { font: inherit; }
a { color: inherit; }
.page-shell { max-width: 760px; margin: 0 auto; padding-bottom: calc(34px + env(safe-area-inset-bottom)); }
.hero { position: relative; overflow: hidden; padding: calc(34px + env(safe-area-inset-top)) 20px 30px; color: #fff; border-radius: 0 0 34px 34px; box-shadow: 0 18px 54px rgba(255, 93, 72, .26); }
.hero::before { content: ""; position: absolute; inset: -90px -120px auto auto; width: 260px; height: 260px; border-radius: 999px; background: rgba(255,255,255,.18); }
.hero::after { content: ""; position: absolute; left: -70px; bottom: -110px; width: 220px; height: 220px; border-radius: 999px; background: rgba(255,255,255,.12); }
.hero-inner { position: relative; z-index: 1; }
.hero-tag { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.2); font-size: 12px; font-weight: 900; backdrop-filter: blur(12px); }
.hero h1 { margin: 16px 0 10px; font-size: clamp(26px, 7vw, 38px); line-height: 1.15; letter-spacing: -.04em; }
.hero p { margin: 0; max-width: 520px; color: rgba(255,255,255,.88); line-height: 1.7; font-size: 15px; }
.content-card { margin: 16px 12px 0; padding: 20px; border-radius: 28px; background: rgba(255,255,255,.96); box-shadow: 0 18px 60px rgba(27, 38, 70, .11); line-height: 1.82; font-size: 16px; word-break: break-word; overflow: hidden; }
.content-card:empty::before { content: "内容正在维护中，请稍后再来查看。"; color: #8a91a1; }
.content-card h1, .content-card h2, .content-card h3 { line-height: 1.35; letter-spacing: -.025em; margin: 1.1em 0 .55em; }
.content-card h1 { font-size: 28px; }
.content-card h2 { font-size: 24px; }
.content-card h3 { font-size: 20px; }
.content-card p { margin: .72em 0; }
.content-card img, .content-card video { max-width: 100%; height: auto; display: block; margin: 15px auto; border-radius: 20px; box-shadow: 0 14px 34px rgba(22, 31, 55, .12); background: #111; }
.content-card video { width: 100%; }
.content-card blockquote { margin: 16px 0; padding: 13px 16px; border-radius: 16px; border-left: 4px solid var(--primary-color, #ff6a3d); background: #fff7f2; color: #586176; }
.content-card ul, .content-card ol { padding-left: 22px; }
.copy-template { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; padding: 11px 17px; margin: 8px 4px; color: #fff; font-weight: 900; background: linear-gradient(135deg, var(--primary-color, #ff6a3d), #ff3d7f); box-shadow: 0 14px 28px rgba(255, 89, 74, .2); cursor: pointer; }
.copy-template:active { transform: scale(.98); }
.contact-float { position: fixed; right: 10px; top: 56%; transform: translateY(-50%); width: 62px; height: 78px; border-radius: 24px; background: rgba(255,255,255,.96); color: var(--primary-color, #ff6a3d); display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; box-shadow: 0 16px 42px rgba(20,30,58,.24); z-index: 20; border: 1px solid rgba(255,255,255,.75); }
.contact-float span { font-size: 30px; line-height: 1; }
.contact-float b { font-size: 12px; margin-top: 2px; }
.contact-float::after { content: ""; position: absolute; inset: -5px; border-radius: 28px; border: 1px solid rgba(255, 106, 61, .22); animation: pulse 1.8s ease-in-out infinite; }
.toast { position: fixed; left: 50%; bottom: calc(30px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(20px); padding: 10px 14px; border-radius: 999px; color: #fff; background: rgba(28, 32, 42, .9); opacity: 0; pointer-events: none; transition: .2s; z-index: 50; font-size: 14px; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.hero-skeleton, .loading-card { background: rgba(255,255,255,.72); }
.hero-skeleton { margin: 14px; padding: 42px 20px; border-radius: 28px; }
.skeleton-line { height: 14px; margin: 12px 0; border-radius: 999px; background: linear-gradient(90deg, #eceff5, #f7f8fb, #eceff5); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
.w45 { width: 45%; }.w60 { width: 60%; }.w80 { width: 80%; }.w90 { width: 90%; }.w100 { width: 100%; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: .95; } 50% { transform: scale(1.08); opacity: .35; } }
@media (max-width: 480px) {
    .content-card { margin: 12px 10px 0; padding: 18px; border-radius: 24px; font-size: 15.5px; }
    .contact-float { right: 8px; width: 58px; height: 74px; }
}

/* v2 optimization: longer online-message floating button */
.contact-float { width: 88px; min-height: 86px; right: 8px; text-align: center; line-height: 1.2; }
.contact-float b { font-size: 11px; margin-top: 3px; line-height: 1.22; }
@media (max-width: 480px) {
    .contact-float { width: 82px; min-height: 82px; right: 6px; }
    .contact-float b { font-size: 10.5px; }
}