/* detail-style.php：详情页样式。
           该文件会被 SPA 注入到首页 head；选择器尽量限定在详情页结构内，避免污染首页。 */
        * { margin:0; padding:0; box-sizing:border-box; }
        .sr-only { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }
        :root { --detail-ink:#171717; --detail-muted:#64748b; --detail-soft:#f0f4f7; --detail-paper:rgba(255,255,255,0.92); --detail-line:rgba(15,23,42,0.06); --detail-shadow:0 18px 52px rgba(15,23,42,0.075); --detail-ease:cubic-bezier(.22,1,.36,1); }
        /* 详情页基础排版与背景 */
        body { font-family: "STSong", "Songti SC", "SimSun", serif; background: radial-gradient(circle at 18% 2%, rgba(255,255,255,0.94), rgba(255,255,255,0) 28%), #f0f4f7; color: #1a1a1a; line-height: 2; padding-bottom: 120px; -webkit-font-smoothing: antialiased; }
        .detail-page { width:100%; min-height:100vh; padding-bottom:24px; }
        .hero-gallery, .detail-content, .comments-section { opacity:0; transform:translate3d(0,10px,0); transition:opacity .58s var(--detail-ease), transform .58s var(--detail-ease); }
        body.valo-page-ready .hero-gallery, body.valo-page-ready .detail-content, body.valo-page-ready .comments-section { opacity:1; transform:translateY(0); }
        body.valo-page-ready .detail-content { transition-delay:.08s; }
        body.valo-page-ready .comments-section { transition-delay:.14s; }
        
        .top-nav { padding-top: env(safe-area-inset-top); position: fixed; top: 0; left: 0; width: 100%; padding: 22px 24px; z-index: 100; display: flex; justify-content: space-between; align-items: center; pointer-events: none; transition: background .28s ease, backdrop-filter .28s ease, border-color .28s ease; }
        .top-nav.scrolled { background:rgba(240,244,247,0.72); border-bottom:1px solid rgba(15,23,42,0.045); backdrop-filter:blur(22px) saturate(1.05); -webkit-backdrop-filter:blur(22px) saturate(1.05); }
        .back-btn { pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: rgba(255,255,255,0.88); border-radius: 50%; color: #111; text-decoration: none; font-size: 22px; box-shadow: 0 10px 30px rgba(15,23,42,0.10); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: transform .28s var(--detail-ease), background .28s ease, box-shadow .28s ease; border: 1px solid rgba(255,255,255,0.72); }
        .detail-nav-mark { pointer-events:none; font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; color:rgba(15,23,42,0.42); font-size:10px; font-weight:700; letter-spacing:4px; padding-right:3px; }
        /* SPA 从首页进入详情时音乐按钮仍在右上角；隐藏重复品牌字，避免两者重叠。 */
        body:has(#music-toggle) .detail-nav-mark { display:none; }
        .back-btn:active { transform: scale(0.9) translateY(1px); }
        .gallery-item:active img { transform: scale(0.98); transition: 0.1s; }
        
        .hero-gallery { width: calc(100% - 40px); max-width: 920px; aspect-ratio: 16 / 10; max-height: 540px; min-height: 250px; margin: calc(env(safe-area-inset-top) + 82px) auto 0; overflow-x: auto; overflow-y: hidden; display: flex; scroll-snap-type: x mandatory; scrollbar-width: none; background: #e2e8f0; border-radius: 30px; border: 1px solid rgba(255,255,255,0.78); box-shadow: 0 24px 70px rgba(15,23,42,0.12); position: relative; isolation:isolate; }
        .hero-gallery::after { content:''; position:absolute; left:0; right:0; bottom:0; height:42%; pointer-events:none; background:linear-gradient(to top, rgba(15,23,42,0.28), rgba(15,23,42,0)); z-index:2; }
        .hero-gallery::-webkit-scrollbar { display: none; }
        .gallery-item { flex: 0 0 100%; height: 100%; scroll-snap-align: center; cursor: zoom-in; position: relative; }
        .gallery-open-btn { display:block; width:100%; height:100%; padding:0; border:0; background:transparent; cursor:zoom-in; appearance:none; -webkit-appearance:none; }
        .gallery-item img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.94) contrast(1.01); transform:scale(1.002); transition: transform .9s var(--detail-ease), filter .9s; }
        .gallery-item:hover img { transform:scale(1.035); filter:saturate(1.02) contrast(1.02); }
        .gallery-counter { position: absolute; bottom: 28px; right: 28px; background: rgba(17,17,17,0.58); color: #fff; font-family: -apple-system, sans-serif; font-size: 10px; font-weight: 700; padding: 6px 14px; border-radius: 999px; backdrop-filter: blur(12px); -webkit-backdrop-filter:blur(12px); letter-spacing: 2px; z-index:3; border:1px solid rgba(255,255,255,0.18); }
        
        .content { padding: 58px 30px 66px; max-width: 820px; margin: 0 auto; }
        .detail-kicker { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:18px; font-family:-apple-system,"PingFang SC",sans-serif; font-size:10px; letter-spacing:2px; color:#64748b; }
        .detail-kicker span { padding:5px 11px; border:1px solid rgba(15,23,42,0.06); border-radius:999px; background:rgba(255,255,255,0.72); box-shadow:0 8px 20px rgba(15,23,42,0.035); }
        .title { font-size: clamp(32px, 5vw, 48px); font-weight: 400; margin-bottom: 34px; line-height: 1.32; color: #111; letter-spacing: 4px; text-align: center; }
        .title::after { content: ''; display: block; width: 46px; height: 1px; background: rgba(17,17,17,0.16); margin: 28px auto; }
        
        .desc { font-size: 16px; color: #334155; white-space: pre-wrap; text-align: justify; margin:0 auto 56px; letter-spacing: 1px; line-height:2.08; max-width:720px; }
        .visit-cues { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; max-width:720px; margin:0 auto 28px; }
        .visit-cue { padding:12px 14px; border-radius:16px; background:rgba(255,255,255,0.78); border:1px solid rgba(15,23,42,0.06); box-shadow:0 10px 28px rgba(15,23,42,0.04); font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; }
        .visit-cue span { display:block; font-size:10px; letter-spacing:1.6px; color:#94a3b8; margin-bottom:6px; }
        .visit-cue b { display:block; font-size:13px; font-weight:600; color:#1e293b; line-height:1.55; letter-spacing:0.2px; }
        .visit-cue-tip { grid-column:1 / -1; background:rgba(248,250,252,0.96); }

        .preorder-section { margin:0 auto 38px; font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; }
        .preorder-entry { width:100%; min-height:64px; display:flex; align-items:center; gap:12px; padding:10px 14px; border:1px solid rgba(15,23,42,.075); border-radius:18px; background:rgba(255,255,255,.58); color:#172033; box-shadow:0 10px 30px rgba(15,23,42,.045); text-align:left; cursor:pointer; }
        .preorder-entry:active { transform:scale(.99); background:rgba(255,255,255,.86); }
        .preorder-entry-icon { width:38px; height:38px; flex:0 0 38px; display:grid; place-items:center; border-radius:12px; background:#eff3f6; color:#64748b; font:500 15px "Songti SC",serif; }
        .preorder-entry-copy { min-width:0; display:grid; gap:2px; }
        .preorder-entry-copy b { font-size:14px; font-weight:650; letter-spacing:.2px; }
        .preorder-entry-copy small { color:#94a3b8; font-size:11px; line-height:1.4; }
        .preorder-entry-arrow { margin-left:auto; color:#94a3b8; font-size:26px; font-weight:300; line-height:1; }
        .preorder-modal-panel { position:relative; width:min(380px,100%); max-height:calc(100vh - 36px); max-height:calc(100dvh - 36px); overflow-y:auto; padding:25px 22px 22px; border-radius:24px; background:rgba(255,255,255,.97); border:1px solid rgba(255,255,255,.94); box-shadow:0 24px 60px rgba(15,23,42,.16); text-align:center; }
        .preorder-kicker { display:block; margin-bottom:7px; color:#94a3b8; font-size:10px; font-weight:650; letter-spacing:1.7px; }
        .preorder-modal-panel h2 { margin:0; color:#172033; font-size:21px; line-height:1.35; font-weight:650; }
        .preorder-modal-copy { margin:10px auto 16px; color:#64748b; font-size:13px; line-height:1.78; text-align:left; }
        .preorder-modal-copy strong { color:#334155; font-weight:700; }
        .preorder-modal-qr-wrap { display:flex; justify-content:center; padding:11px; border-radius:18px; background:#f4f6f8; }
        .preorder-modal-qr { width:min(220px,100%); height:auto; display:block; border-radius:10px; background:#fff; }
        .preorder-modal-contact { width:100%; min-height:45px; margin-top:16px; border:1px solid rgba(15,23,42,.1); border-radius:13px; background:#1e293b; color:#fff; font:650 13px -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; letter-spacing:.2px; cursor:pointer; }
        .preorder-modal-contact:active { transform:scale(.985); }
        
        /* 横向滚动照片墙：手机不用一路往下拉 */
        .photo-wall-head { margin: 0 0 14px; display:flex; align-items:flex-end; justify-content:space-between; font-family:-apple-system,"PingFang SC",sans-serif; }
        .photo-wall-head span { font-size:13px; font-weight:600; letter-spacing:2px; color:#111; }
        .photo-wall-head em { font-style:normal; font-size:11px; color:#94a3b8; letter-spacing:1px; }
        .photo-wall { margin-top: 0; width: calc(100% + 60px); margin-left: -30px; padding: 0 30px 12px; display: flex; gap: 15px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
        .photo-wall::-webkit-scrollbar { display: none; }
        @media (max-width: 768px) { .hero-gallery { width: calc(100% - 24px); aspect-ratio: 16 / 10; min-height: 220px; } .photo-wall { gap: 12px; padding-bottom: 10px; } }
        .photo-wall-item { flex: 0 0 268px; max-width: 78vw; aspect-ratio: 4 / 3; scroll-snap-align: start; border-radius: 18px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.04); cursor: zoom-in; transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s; border: 1px solid rgba(0,0,0,0.02); background:#f0f4f7; }
        .photo-wall-item:hover { transform: translateY(-4px); box-shadow: 0 15px 40px rgba(0,0,0,0.08); }
        .photo-wall-item:active { transform: scale(0.97); }
        .photo-wall-item img { width: 100%; height: 100%; display: block; object-fit: cover; animation: fadeIn 0.8s; filter: saturate(0.95); transition: filter 0.8s; }
        .photo-wall-item:hover img { filter: saturate(1.05); }

        /* 旅者印记：发布框放在评论列表前，不做 sticky，避免遮住长评论列表。 */
        .comments-section { margin-top: 52px; padding: 26px; border: 1px solid rgba(255,255,255,0.72); border-radius: 30px; background: rgba(255,255,255,0.56); box-shadow:0 18px 48px rgba(15,23,42,0.055); }
        .comments-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:18px; font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; }
        .comments-heading span { display:block; margin-bottom:4px; color:#94a3b8; font-size:10px; font-weight:700; letter-spacing:3px; }
        .comments-heading em { font-style:normal; color:#94a3b8; font-size:12px; letter-spacing:1px; padding-bottom:2px; }
        .comments-title { font-size: 17px; font-weight: 700; margin:0; color:#111; display: flex; align-items: center; justify-content: space-between; font-family: -apple-system, sans-serif; letter-spacing: 2px;}
        .comments-list { margin-top: 20px; }
        .comment-item { background: rgba(255,255,255,0.72); border-radius: 20px; padding: 18px; margin-bottom: 10px; box-shadow: 0 10px 30px rgba(15,23,42,0.04); border: 1px solid rgba(255,255,255,0.64); }
        .comment-header { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 12px; color: #94a3b8; font-family: -apple-system, sans-serif; }
        .comment-name { font-weight: 600; color: #111; font-size: 13px; }
        .comment-text { font-size: 14px; line-height: 1.7; color: #334155; margin-bottom: 15px; text-align: justify; white-space: pre-wrap; font-family: -apple-system, sans-serif;}
        .comment-photos { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 8px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
        .comment-photos::-webkit-scrollbar { display: none; }
        .comment-photo-btn { flex:0 0 92px; width:92px; height:92px; padding:0; border:0; border-radius:14px; background:transparent; cursor:zoom-in; scroll-snap-align:start; appearance:none; -webkit-appearance:none; }
        .comment-photos img { width: 92px; height: 92px; display:block; border-radius: 14px; object-fit: cover; cursor: zoom-in; border: 1px solid rgba(15,23,42,0.045); transition: transform 0.25s cubic-bezier(.4,0,.2,1), filter 0.25s; box-shadow:0 8px 22px rgba(15,23,42,0.055); filter:saturate(0.97);}
        .comment-photos img:active { transform: scale(0.96); filter:saturate(1.05); }
        .comment-form-compact { margin: 0 0 18px; background: rgba(255,255,255,0.92); padding: 14px; border-radius: 20px; box-shadow: 0 12px 34px rgba(15,23,42,0.055); border: 1px solid rgba(255,255,255,0.76); }
        .comment-form-compact textarea.compact-input { max-height: 72px; min-height: 54px; }
        .comment-textarea-compact { resize: vertical; }
        .native-file-input { display:none; }
        .compact-input { width: 100%; padding: 11px 13px; background: rgba(248,250,252,0.92); border: 1px solid rgba(226,232,240,0.95); border-radius: 13px; margin-bottom: 8px; font-size: 12px; outline: none; transition: border-color .25s ease, background .25s ease, box-shadow .25s ease; font-family: inherit; }
        .compact-input:focus { border-color: #cbd5e1; background: #fff; box-shadow:0 8px 22px rgba(15,23,42,0.04); }
        .compact-action-row { display: flex; gap: 8px; align-items: center; }
        .compact-upload-btn { flex: 1; padding: 10px; background: rgba(248,250,252,0.94); border: 1px dashed #cbd5e1; border-radius: 13px; text-align: center; font-size: 12px; color: #64748b; cursor: pointer; font-family: -apple-system, sans-serif; transition: transform .22s ease, background .22s ease, border-color .22s ease;}
        .compact-upload-btn.is-picked { border-color:#10b981; color:#10b981; }
        .compact-upload-btn:hover { background:#fff; }
        .compact-upload-btn:active { transform: scale(0.95); }
        .compact-submit-btn { flex: 1.5; padding: 10px; background: #171717; color: #fff; border: none; border-radius: 13px; font-size: 12px; font-weight: 700; cursor: pointer; letter-spacing: 1px; transition: transform .22s ease, box-shadow .22s ease, background .22s ease; font-family: -apple-system, sans-serif; box-shadow:0 10px 24px rgba(15,23,42,0.14);}
        .compact-submit-btn:hover { background:#0f0f0f; box-shadow:0 12px 30px rgba(15,23,42,0.18); }
        .compact-submit-btn:active { transform: scale(0.95); }
        .comments-empty { text-align:center; color:#94a3b8; font-size:13px; padding: 34px 0 20px; font-family:-apple-system,sans-serif; }
        #valo-toast { position: fixed; top: 40px; left: 50%; transform: translateX(-50%) translateY(-20px); background: rgba(26, 26, 26, 0.95); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); color: #fff; padding: 16px 28px; border-radius: 50px; font-size: 14px; letter-spacing: 1px; z-index: 9999; opacity: 0; pointer-events: none; transition: 0.4s; box-shadow: 0 10px 30px rgba(0,0,0,0.15); font-weight: 500; text-align: center; white-space: pre-wrap; font-family: -apple-system, sans-serif; }
        #valo-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
        
        .action-bar { position: fixed; bottom: calc(12px + env(safe-area-inset-bottom)); left: 50%; transform:translateX(-50%) translateY(16px); opacity:0; width: min(520px, calc(100vw - 28px)); background: rgba(255,255,255,0.74); backdrop-filter: blur(22px) saturate(1.05); -webkit-backdrop-filter: blur(22px) saturate(1.05); border: 1px solid rgba(255,255,255,0.72); padding: 8px; display: flex; gap: 8px; justify-content: center; z-index: 100; border-radius:999px; box-shadow: 0 18px 52px rgba(15,23,42,0.13); transition:opacity .62s var(--detail-ease), transform .62s var(--detail-ease), background .24s ease, box-shadow .24s ease; }
        body.valo-page-ready .action-bar { opacity:1; transform:translateX(-50%) translateY(0); transition-delay:.18s; }
        .back-to-top { position: fixed; bottom: 88px; right: 20px; width: 38px; height: 38px; background: rgba(255,255,255,0.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 17px; box-shadow: 0 8px 24px rgba(15,23,42,0.10); border: 1px solid rgba(255,255,255,0.72); cursor: pointer; z-index: 200; opacity: 0; transform: translateY(20px); transition: 0.4s; pointer-events: none; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
        .back-to-top.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
        .action-btn { flex: 1; max-width: 220px; display: flex; justify-content: center; align-items: center; padding: 11px 0; border-radius: 50px; font-family: -apple-system, "PingFang SC", sans-serif; font-size: 12px; font-weight: 700; text-decoration: none; transition: transform .24s var(--detail-ease), background .24s ease, box-shadow .24s ease; letter-spacing: 0.8px; }
        .action-btn:active { transform:scale(.96); }
        .btn-nav { background: transparent; color: #111; border: 0; }
        .btn-contact { background: rgba(17,17,17,0.94); color: #fff; box-shadow: 0 8px 22px rgba(15,23,42,0.14); border:1px solid rgba(255,255,255,0.08); }

        .car-qr-modal { position:fixed; inset:0; z-index:100010; background:rgba(15,23,42,0.42); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); display:flex; align-items:center; justify-content:center; padding:18px; overflow-y:auto; overscroll-behavior:contain; font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; }
        .car-qr-modal[hidden] { display:none !important; }
        .car-qr-panel { position:relative; width:min(520px, 100%); max-height:calc(100vh - 36px); max-height:calc(100dvh - 36px); overflow-y:auto; -webkit-overflow-scrolling:touch; display:grid; grid-template-columns:minmax(0, 1fr) 190px; gap:18px; padding:18px; border-radius:24px; background:rgba(255,255,255,0.94); border:1px solid rgba(255,255,255,0.92); box-shadow:0 24px 60px rgba(15,23,42,0.16); }
        .car-qr-copy { min-width:0; padding-right:16px; }
        .car-qr-title { font-size:22px; font-weight:600; letter-spacing:1px; line-height:1.35; color:#111827; }
        .car-qr-text { margin:8px 0 0; color:#64748b; font-size:12px; line-height:1.7; }
        .car-qr-close { position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:999px; border:1px solid rgba(226,232,240,0.96); background:rgba(248,250,252,0.96); color:#475569; font-size:22px; line-height:1; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
        .car-qr-code-wrap { display:flex; align-items:center; justify-content:center; padding:8px; border-radius:20px; background:rgba(248,250,252,0.9); border:1px solid rgba(226,232,240,0.92); }
        .car-qr-code { width:100%; max-width:170px; height:auto; display:block; border-radius:14px; }
        .car-qr-missing { width:170px; max-width:100%; aspect-ratio:1; display:flex; align-items:center; justify-content:center; text-align:center; padding:16px; border-radius:14px; background:rgba(241,245,249,0.96); color:#64748b; font-size:12px; line-height:1.6; }

        /* 大图灯箱：评论图片和照片墙共用同一个图片序列。 */
        /* 首页 SPA 会给 #valo-app-core 加 transform 做转场；transform 会让内部 fixed 灯箱不再按真实视口居中。
           打开灯箱时临时移除该 transform，保证手机 WebView 中照片居中。 */
        body.valo-lightbox-open #valo-app-core { transform: none !important; transition: none !important; }
        .lightbox { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; background: rgba(0,0,0,0.96); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); z-index: 100001; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; }
        .lightbox.show { opacity: 1; pointer-events: auto; }
        
        .lightbox-img-wrapper { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom)); }
        .lightbox img { max-width: 100%; max-height: 85vh; max-height: 85dvh; border-radius: 4px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); object-fit: contain; transform: scale(0.95); transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.2s; opacity: 1; user-select: none; -webkit-user-drag: none;}
        .lightbox.show img { transform: scale(1); }
        .lightbox img.fade-out { opacity: 0; transform: scale(0.98); }

        .lightbox-close { position: absolute; top: 40px; right: 40px; padding:0; border:0; background:transparent; color: rgba(255,255,255,0.62); font-size: 40px; font-weight: 200; cursor: pointer; z-index: 100002; line-height: 1;}
        .lightbox-nav { position: absolute; top: 50%; border:0; background:transparent; transform: translateY(-50%); color: rgba(255,255,255,0.4); font-size: 50px; font-weight: 200; cursor: pointer; z-index: 100002; padding: 20px; transition: 0.3s; user-select: none; }
        .nav-left { left: 10px; } .nav-right { right: 10px; }
        .lightbox-page { position: absolute; top: 45px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.6); font-family: -apple-system, sans-serif; font-size: 13px; font-weight: bold; letter-spacing: 3px; z-index: 100002; }

        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

        :where(a, button, input, textarea, select, [tabindex]):focus-visible { outline:2px solid #0f172a; outline-offset:3px; }
        .lightbox :where(button, [tabindex]):focus-visible { outline-color:#fff; }

        .comment-item { transition:transform .32s var(--detail-ease), box-shadow .32s ease, background .32s ease; }
        .comment-item:hover { transform:translate3d(0,-1px,0); background:rgba(255,255,255,.82); box-shadow:0 12px 30px rgba(15,23,42,.055); }

        @media (max-width: 768px) {
            body { padding-bottom: 106px; }
            .top-nav { padding: 16px 16px; }
            .back-btn { width:40px; height:40px; font-size:20px; }
            .detail-nav-mark { font-size:9px; letter-spacing:3px; }
            .hero-gallery { width: calc(100% - 24px); aspect-ratio: 16 / 10; min-height: 220px; margin-top: calc(env(safe-area-inset-top) + 70px); border-radius:24px; }
            .gallery-counter { bottom:18px; right:18px; font-size:9px; padding:5px 12px; }
            .content { padding: 42px 20px 54px; }
            .title { font-size: clamp(30px, 9vw, 40px); letter-spacing:3px; margin-bottom:28px; }
            .title::after { margin:22px auto; }
            .desc { font-size:15px; line-height:2; margin-bottom:42px; }
            .visit-cues { gap:8px; margin-bottom:22px; }
            .visit-cue { padding:11px 12px; border-radius:14px; }
            .visit-cue b { font-size:12.5px; }
            .preorder-section { margin-bottom:34px; }
            .preorder-modal-panel { max-height:calc(100vh - 28px); max-height:calc(100dvh - 28px); padding:24px 18px 18px; }
            .comments-section { margin-top:42px; padding:18px; border-radius:24px; }
            .comments-heading { margin-bottom:14px; }
            .comment-item { padding:15px; border-radius:18px; }
            .compact-action-row { gap:7px; }
            .compact-upload-btn, .compact-submit-btn { font-size:11px; }
            .action-bar { width: calc(100vw - 24px); bottom: calc(10px + env(safe-area-inset-bottom)); border-radius:24px; }
            .action-btn { font-size:12px; padding:10px 0; }
            .car-qr-modal { align-items:flex-start; padding:14px; }
            .car-qr-panel { grid-template-columns:1fr; gap:12px; max-height:calc(100vh - 28px); max-height:calc(100dvh - 28px); padding:16px; border-radius:22px; }
            .car-qr-code { max-width:170px; }
            .back-to-top { bottom:82px; right:16px; width:36px; height:36px; }
            .lightbox-close { top:28px; right:24px; font-size:36px; }
            .lightbox-page { top:34px; }
            .lightbox-nav { font-size:42px; padding:12px; }
        }

        /* 详情页按钮系统：与首页保持同一套高度、圆角、材质与按压反馈。 */
        :root {
            --detail-btn-h: 40px;
            --detail-btn-px: 16px;
            --detail-btn-radius: 999px;
            --detail-btn-font: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
            --detail-btn-bg: rgba(255,255,255,0.72);
            --detail-btn-bg-strong: rgba(255,255,255,0.92);
            --detail-btn-bg-press: rgba(255,255,255,0.98);
            --detail-btn-border: rgba(255,255,255,0.72);
            --detail-btn-border-press: rgba(15,23,42,0.18);
            --detail-btn-shadow: 0 10px 26px rgba(15,23,42,0.07);
            --detail-btn-press-shadow: inset 0 1px 0 rgba(255,255,255,0.82), 0 5px 14px rgba(15,23,42,0.10);
            --detail-btn-primary: rgba(255,255,255,0.96);
            --detail-btn-primary-shadow: inset 0 1px 0 rgba(255,255,255,0.92), 0 10px 26px rgba(15,23,42,0.13);
            --detail-icon-btn: 42px;
        }
        .compact-upload-btn,
        .compact-submit-btn,
        .action-btn {
            min-height: var(--detail-btn-h) !important;
            height: var(--detail-btn-h) !important;
            padding: 0 var(--detail-btn-px) !important;
            border-radius: var(--detail-btn-radius) !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 6px !important;
            font-family: var(--detail-btn-font) !important;
            font-size: 12px !important;
            font-weight: 560 !important;
            letter-spacing: .65px !important;
            line-height: 1 !important;
            text-decoration: none !important;
            white-space: nowrap !important;
            cursor: pointer !important;
            border: 1px solid var(--detail-btn-border) !important;
            background: var(--detail-btn-bg) !important;
            color: #334155 !important;
            box-shadow: var(--detail-btn-shadow) !important;
            backdrop-filter: blur(18px) saturate(1.06) !important;
            -webkit-backdrop-filter: blur(18px) saturate(1.06) !important;
            transition: transform .24s var(--detail-ease), background .24s ease, color .24s ease, box-shadow .24s ease, border-color .24s ease !important;
            -webkit-tap-highlight-color: transparent;
        }
        .compact-upload-btn:hover,
        .action-btn:hover { background: var(--detail-btn-bg-strong) !important; box-shadow: 0 12px 28px rgba(15,23,42,0.09) !important; }
        .compact-upload-btn:active,
        .compact-submit-btn:active,
        .action-btn:active { transform: scale(.96) !important; }
        .compact-upload-btn:active,
        .compact-submit-btn:active,
        .action-btn:active,
        .back-btn:active,
        .back-to-top:active {
            background: var(--detail-btn-bg-press) !important;
            color: #334155 !important;
            border-color: var(--detail-btn-border-press) !important;
            box-shadow: var(--detail-btn-press-shadow) !important;
            filter: saturate(1.04) contrast(1.02) !important;
        }
        .compact-submit-btn,
        .btn-contact {
            background: var(--detail-btn-primary) !important;
            color: #334155 !important;
            border-color: rgba(15,23,42,0.16) !important;
            box-shadow: var(--detail-btn-primary-shadow) !important;
        }
        .action-bar {
            gap: 8px !important;
            padding: 6px !important;
            border-radius: var(--detail-btn-radius) !important;
            background: rgba(255,255,255,0.72) !important;
            border: 1px solid rgba(255,255,255,0.72) !important;
            box-shadow: 0 14px 34px rgba(15,23,42,0.11) !important;
            backdrop-filter: blur(20px) saturate(1.08) !important;
            -webkit-backdrop-filter: blur(20px) saturate(1.08) !important;
        }
        .action-bar .action-btn {
            box-shadow: none !important;
            border-color: transparent !important;
            background: transparent !important;
        }
        .action-bar .btn-contact {
            background: var(--detail-btn-primary) !important;
            color: #334155 !important;
            box-shadow: var(--detail-btn-primary-shadow) !important;
            border-color: rgba(15,23,42,0.16) !important;
        }
        .action-bar .action-btn:active,
        .action-bar .btn-contact:active {
            background: var(--detail-btn-bg-press) !important;
            color: #334155 !important;
            border-color: var(--detail-btn-border-press) !important;
            box-shadow: var(--detail-btn-press-shadow) !important;
            filter: saturate(1.04) contrast(1.02) !important;
        }
        .back-btn,
        .back-to-top {
            width: var(--detail-icon-btn) !important;
            height: var(--detail-icon-btn) !important;
            min-width: var(--detail-icon-btn) !important;
            min-height: var(--detail-icon-btn) !important;
            padding: 0 !important;
            border-radius: 50% !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            background: var(--detail-btn-bg) !important;
            color: #334155 !important;
            border: 1px solid var(--detail-btn-border) !important;
            box-shadow: var(--detail-btn-shadow) !important;
            backdrop-filter: blur(18px) saturate(1.06) !important;
            -webkit-backdrop-filter: blur(18px) saturate(1.06) !important;
            cursor: pointer !important;
            transition: transform .24s var(--detail-ease), background .24s ease, box-shadow .24s ease !important;
        }
        .back-btn:active,
        .back-to-top:active { transform: scale(.94) !important; }
        @media (max-width: 768px) {
            :root { --detail-btn-h: 38px; --detail-btn-px: 14px; --detail-icon-btn: 40px; }
        }