/* zjchina.net 全站单一样式真源（SSR + CSR 统一 引用）。
首页/外壳 = 线上 home.css 权威；内页/部署面板/管理 = 原 style.rs 独有规则并入。
共占类名一律以首页(home)规则为准，style.rs 纯基础元素覆盖已剔除。 */
/* skip-link：键盘/读屏用户 Tab 进入页面的首个链接。保持自然渲染盒、始终在
视口内（left:-9999px/clip/1px 收缩在部分浏览器焦点链中会被判定为不可聚焦
而跳过），仅用 opacity:0 透明 + pointer-events:none 穿透——不影响
isFocusable，读屏照常朗读，视觉零干扰；:focus 时浮现于左上角。 */
.skip-link{position:fixed;top:0;left:0;z-index:3000;padding:.7rem 1.2rem;background:var(--bg-secondary,#0a0a1a);color:var(--accent-cyan,#00f0ff);border:1px solid var(--accent-cyan,#00f0ff);border-top:0;border-left:0;border-radius:0 0 10px 0;font-size:.9rem;font-weight:600;opacity:0;pointer-events:none;transition:opacity .15s ease}
.skip-link:focus,.skip-link:focus-visible{opacity:1;pointer-events:auto;outline:2px solid var(--accent-cyan,#00f0ff);outline-offset:2px}
/* ===== 移动端点击零延迟（iOS Safari / 独立 PWA / Android WebView / 桌面触屏通用）=====
触摸抬起后浏览器默认要等约 300ms 判定"双击缩放"才派发 click，导航标签/按钮
因此普遍"发肉"（iOS 独立 PWA 全屏模式下该延迟始终存在）。
touch-action:manipulation 声明该元素只允许滚动与捏合缩放，click 在 touchend
后立即派发；正文非交互区域不设置，双击放大的无障碍能力保留。
-webkit-tap-highlight-color 把默认灰色闪块换成淡青，按下即有视觉反馈。 */
a[href],button,summary,label,input,select,textarea,[role="button"],[tabindex],area{touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,240,255,.16)}
:root{--bg-primary: #050510;--bg-secondary: #0a0a1a;--bg-card: rgba(15, 15, 35, .6);--bg-card-hover: rgba(25, 25, 55, .8);--accent-cyan: #00f0ff;--accent-pink: #ff2d78;--accent-gold: #f0c674;--accent-green: #4ade80;--accent-purple: #a855f7;--text-primary: #f0f0f5;--text-secondary: #a0a0b8;--text-muted: #6b6b80;--glow-cyan: 0 0 20px rgba(0, 240, 255, .3), 0 0 60px rgba(0, 240, 255, .1);--glow-pink: 0 0 20px rgba(255, 45, 120, .3), 0 0 60px rgba(255, 45, 120, .1);--glow-gold: 0 0 20px rgba(240, 198, 116, .3), 0 0 60px rgba(240, 198, 116, .1);--font-display: "Outfit", "Noto Sans SC", sans-serif;--font-body: "Noto Sans SC", "Inter", system-ui, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace;--section-padding: clamp(4rem, 10vw, 8rem);--content-max-width: 1200px}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-body);background-color:var(--bg-primary);color:var(--text-primary);line-height:1.7;overflow-x:hidden;min-height:100vh}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--accent-cyan),var(--accent-pink));border-radius:3px}a{color:var(--accent-cyan);text-decoration:none;transition:all .3s ease}a:hover{color:var(--accent-pink);text-shadow:var(--glow-cyan)}::selection{background:#00f0ff33;color:var(--accent-cyan)}.container{max-width:var(--content-max-width);margin:0 auto;padding:0 clamp(1.5rem,5vw,3rem)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-60px)}to{opacity:1;transform:translate(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(60px)}to{opacity:1;transform:translate(0)}}@keyframes pulse-glow{0%,to{box-shadow:0 0 20px #00f0ff1a}50%{box-shadow:0 0 40px #00f0ff4d,0 0 80px #00f0ff1a}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s ease}.reveal.visible{opacity:1;transform:translateY(0)}.reveal-delay-1{transition-delay:.1s}.reveal-delay-2{transition-delay:.2s}.reveal-delay-3{transition-delay:.3s}.reveal-delay-4{transition-delay:.4s}.reveal-delay-5{transition-delay:.5s}@media(prefers-reduced-motion:reduce) {*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}.navbar{position:fixed;top:0;left:0;right:0;z-index:100;padding:1rem 2rem;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:#050510b3;border-bottom:1px solid rgba(0,240,255,.08);transition:all .3s ease}.navbar-inner{max-width:var(--content-max-width);margin:0 auto;display:flex;align-items:center;justify-content:space-between}.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--text-primary);font-family:var(--font-display);font-weight:700;font-size:1.3rem;letter-spacing:-.02em;transition:all .3s ease}.logo:hover{filter:brightness(1.2)}.logo-icon-wrap{position:relative;width:32px;height:32px;display:flex;align-items:center;justify-content:center}.logo-icon{font-size:1.3rem;filter:drop-shadow(0 0 8px rgba(0,240,255,.6));position:relative;z-index:2}.logo-ring{position:absolute;inset:-3px;border-radius:50%;border:2px solid transparent;border-top-color:var(--accent-cyan);border-right-color:var(--accent-pink);animation:logo-spin 3s linear infinite;opacity:.7}@keyframes logo-spin{to{transform:rotate(360deg)}}.logo-text{display:flex;align-items:baseline}.logo-zj{font-weight:800;font-size:1.4rem;background:linear-gradient(135deg,var(--accent-cyan),#7dd3fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:none;filter:drop-shadow(0 0 6px rgba(0,240,255,.4))}.logo-china{font-weight:500;font-size:1.1rem;background:linear-gradient(135deg,var(--accent-pink),var(--accent-purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 6px rgba(255,45,120,.3));letter-spacing:.04em}.nav-links{display:flex;gap:2rem}.nav-link{color:var(--text-secondary);font-size:.9rem;font-weight:500;text-decoration:none;transition:all .3s ease;position:relative;padding:.25rem 0}.nav-link:after{content:"";position:absolute;bottom:-2px;left:0;width:0;height:2px;background:linear-gradient(90deg,var(--accent-cyan),var(--accent-pink));transition:width .3s ease;border-radius:1px}.nav-link:hover{color:var(--text-primary)}.nav-link:hover:after{width:100%}.menu-btn{display:none;flex-direction:column;gap:5px;background:none;border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:8px;cursor:pointer;transition:all .3s ease}.menu-btn:hover{border-color:var(--accent-cyan);box-shadow:var(--glow-cyan)}.menu-line{width:20px;height:2px;background:var(--text-primary);border-radius:1px;transition:all .3s ease}.mobile-menu{display:none;flex-direction:column;padding:1rem 2rem 1.5rem;gap:.5rem;border-top:1px solid rgba(0,240,255,.08)}.mobile-link{color:var(--text-secondary);font-size:1rem;padding:.75rem 0;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.05);transition:all .3s ease}.mobile-link:hover{color:var(--accent-cyan);padding-left:.5rem}@media(max-width:768px) {.nav-links{display:none}.menu-btn,.mobile-menu.active{display:flex}}#particle-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}.footer{position:relative;z-index:1;padding:2rem;border-top:1px solid rgba(0,240,255,.08);background:#05051080;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.footer-inner{max-width:var(--content-max-width);margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:.75rem}.footer-row{display:flex;align-items:center;justify-content:center}.footer-logo-wrap{display:flex;align-items:center;gap:.5rem}.footer-icon-wrap{position:relative;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.footer-icon{font-size:1rem;filter:drop-shadow(0 0 6px rgba(0,240,255,.5));position:relative;z-index:2}.footer-ring{position:absolute;inset:-3px;border-radius:50%;border:1.5px solid transparent;border-top-color:var(--accent-cyan);border-right-color:var(--accent-pink);animation:footer-spin 3s linear infinite;opacity:.6}@keyframes footer-spin{to{transform:rotate(360deg)}}.footer-logo-text{display:flex;align-items:baseline}.footer-zj{font-weight:800;font-size:1.05rem;background:linear-gradient(135deg,var(--accent-cyan),#7dd3fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 4px rgba(0,240,255,.3))}.footer-china{font-weight:500;font-size:.9rem;background:linear-gradient(135deg,var(--accent-pink),var(--accent-purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 4px rgba(255,45,120,.2));letter-spacing:.04em}.footer-desc{color:var(--text-secondary);font-size:.9rem}.footer-divider{margin:0 .5rem;color:var(--text-muted)}.footer-copyright{color:var(--text-muted);font-size:.85rem}.back-to-top{position:fixed;bottom:2rem;right:2rem;z-index:1000;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--bg-card);border:1px solid rgba(0,240,255,.2);border-radius:50%;color:var(--accent-cyan);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(20px);transition:all .3s ease;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0)}.back-to-top:hover{background:#00f0ff26;border-color:var(--accent-cyan);box-shadow:var(--glow-cyan);transform:translateY(-3px)}.back-to-top svg{transition:transform .3s ease}.back-to-top:hover svg{transform:translateY(-2px)}@media(max-width:768px) {.back-to-top{bottom:5rem;right:1rem;width:44px;height:44px}}.reading-progress{position:fixed;top:0;left:0;height:3px;width:0%;background:linear-gradient(90deg,var(--accent-cyan),var(--accent-pink));z-index:1001;transition:width .1s ease-out;box-shadow:0 0 10px #00f0ff80}.share-container{position:fixed;left:1rem;top:50%;transform:translateY(-50%);z-index:1000;display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.42rem .3rem;border-radius:999px;background:rgba(255,255,255,.06);background-image:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.03) 45%,rgba(255,255,255,0));border:1px solid rgba(255,255,255,.15);box-shadow:0 8px 32px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(255,255,255,.04);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);transition:background .25s ease,border-color .25s ease,box-shadow .25s ease}
.share-container:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);box-shadow:0 10px 36px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.22)}
.share-container::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(120% 55% at 50% 0%,rgba(255,255,255,.1),transparent 65%);pointer-events:none}
/* 紧凑玻璃胶囊：竖排「分享到」文字隐藏（按钮 aria-label/title 保留），降低浏览干扰 */
.share-label-wrap{display:none}.share-label{font-size:.75rem;color:var(--text-muted);writing-mode:horizontal-tb;letter-spacing:.05em}.share-btn{position:relative;z-index:1;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;cursor:pointer;transition:all .3s ease;background:transparent}.share-btn svg{width:16px;height:16px}.share-btn.wechat{color:#07c160}.share-btn.wechat:hover{background:#07c16026;transform:scale(1.1)}.share-btn.weibo{color:#e6162d}.share-btn.weibo:hover{background:#e6162d26;transform:scale(1.1)}.share-btn.douyin{color:#fe2c55}.share-btn.douyin:hover{background:#fe2c5526;transform:scale(1.1)}.share-modal{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;background:#000c;backdrop-filter:blur(5px)}.share-modal.active{display:flex}.modal-content{position:relative;padding:2rem;background:var(--bg-secondary);border:1px solid rgba(0,240,255,.2);border-radius:16px;text-align:center}.modal-close{position:absolute;top:.5rem;right:.5rem;width:32px;height:32px;border:none;background:transparent;color:var(--text-secondary);font-size:1.5rem;cursor:pointer;transition:color .3s}.modal-close:hover{color:var(--text-primary)}.modal-content h3{margin-bottom:.5rem;color:var(--text-primary)}.modal-content p{margin-bottom:1rem;color:var(--text-secondary);font-size:.9rem}.qrcode-container{width:200px;height:200px;margin:0 auto;background:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center}@media(max-width:768px) {.share-container{left:.6rem;top:auto;bottom:.75rem;transform:none;flex-direction:row;padding:.3rem .35rem;gap:.25rem}.share-label-wrap{flex-direction:row;gap:.05rem}.share-btn{width:30px;height:30px}.share-btn svg{width:15px;height:15px}}.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:8rem 2rem 4rem;overflow:hidden;z-index:1}.hero-content{text-align:center;max-width:900px;position:relative;z-index:2}.hero-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1.2rem;border-radius:100px;background:#00f0ff0f;border:1px solid rgba(0,240,255,.15);font-size:.85rem;color:var(--accent-cyan);font-weight:500;margin-bottom:2rem;letter-spacing:.05em}.badge-dot{width:6px;height:6px;border-radius:50%;background:var(--accent-green);box-shadow:0 0 8px var(--accent-green);animation:pulse-dot 2s ease-in-out infinite}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.5)}}.hero-title{font-family:var(--font-display);font-weight:800;font-size:clamp(2.8rem,8vw,6rem);line-height:1.1;letter-spacing:-.03em;margin-bottom:1.5rem}.title-line{display:block}.title-highlight{font-size:clamp(3.5rem,10vw,7.5rem);background:linear-gradient(135deg,var(--accent-cyan),var(--accent-purple),var(--accent-pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 30px rgba(0,240,255,.3));animation:gradient-shift 6s ease-in-out infinite;background-size:200% 200%}@keyframes gradient-shift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.hero-subtitle{font-size:clamp(1rem,2.5vw,1.25rem);color:var(--text-secondary);line-height:1.8;max-width:700px;margin:0 auto 2.5rem;font-weight:300}.hero-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem}.tag{padding:.4rem 1rem;border-radius:6px;font-size:.8rem;font-weight:500;letter-spacing:.02em;transition:all .3s ease;cursor:default}.tag:hover{transform:translateY(-2px)}.tag-cyan{background:#00f0ff14;border:1px solid rgba(0,240,255,.2);color:var(--accent-cyan)}.tag-cyan:hover{box-shadow:var(--glow-cyan)}.tag-pink{background:#ff2d7814;border:1px solid rgba(255,45,120,.2);color:var(--accent-pink)}.tag-pink:hover{box-shadow:var(--glow-pink)}.tag-gold{background:#f0c67414;border:1px solid rgba(240,198,116,.2);color:var(--accent-gold)}.tag-gold:hover{box-shadow:var(--glow-gold)}.tag-green{background:#4ade8014;border:1px solid rgba(74,222,128,.2);color:var(--accent-green)}.tag-green:hover{box-shadow:0 0 20px #4ade804d}.tag-purple{background:#a855f714;border:1px solid rgba(168,85,247,.2);color:var(--accent-purple)}.tag-purple:hover{box-shadow:0 0 20px #a855f74d}.scroll-hint{margin-top:3rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--text-muted);font-size:.8rem;animation:float 3s ease-in-out infinite}.scroll-line{width:1px;height:40px;background:linear-gradient(180deg,var(--accent-cyan),transparent);animation:scroll-pulse 2s ease-in-out infinite}@keyframes scroll-pulse{0%,to{opacity:.3;height:40px}50%{opacity:1;height:60px}}.hero-glow{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:0}.hero-glow-1{width:500px;height:500px;background:radial-gradient(circle,rgba(0,240,255,.08),transparent 70%);top:10%;left:-10%;animation:glow-drift 15s ease-in-out infinite}.hero-glow-2{width:400px;height:400px;background:radial-gradient(circle,rgba(255,45,120,.06),transparent 70%);bottom:10%;right:-5%;animation:glow-drift 12s ease-in-out infinite reverse}@keyframes glow-drift{0%,to{transform:translate(0)}33%{transform:translate(30px,-20px)}66%{transform:translate(-20px,30px)}}.intro-section{position:relative;z-index:1;padding:var(--section-padding) 0}.intro-card{max-width:900px;margin:0 auto;padding:3rem;background:var(--bg-card);border:1px solid rgba(0,240,255,.1);border-radius:20px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.intro-header{text-align:center;margin-bottom:2rem}.intro-label{display:inline-block;padding:.3rem 1rem;background:#00f0ff1a;border-radius:100px;font-size:.8rem;font-weight:600;color:var(--accent-cyan);letter-spacing:.1em;margin-bottom:1rem}.intro-title{font-family:var(--font-display);font-size:clamp(1.5rem,4vw,2.2rem);font-weight:700;line-height:1.3;color:var(--text-primary)}.highlight{background:linear-gradient(135deg,var(--accent-cyan),var(--accent-purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.intro-content{max-width:700px;margin:0 auto 2rem}.intro-paragraph{font-size:1.05rem;line-height:1.9;color:var(--text-secondary);margin-bottom:1rem}.intro-paragraph code{padding:.15rem .5rem;background:#00f0ff1a;border-radius:4px;font-family:var(--font-mono);font-size:.9em;color:var(--accent-cyan)}.intro-paragraph strong{color:var(--text-primary);font-weight:600}.comparison-box{display:flex;align-items:center;justify-content:center;gap:1.5rem;padding:1.5rem;background:#0000004d;border-radius:12px;flex-wrap:wrap}.comparison-item{text-align:center;padding:1rem 1.5rem;border-radius:10px;min-width:180px}.comparison-item.traditional{background:#ff2d780d;border:1px solid rgba(255,45,120,.2)}.comparison-item.modern{background:#00f0ff0d;border:1px solid rgba(0,240,255,.2)}.comparison-label{display:block;font-weight:600;font-size:.9rem;margin-bottom:.75rem;color:var(--text-primary)}.comparison-desc{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}.tag-negative,.tag-positive{padding:.2rem .6rem;border-radius:4px;font-size:.75rem;font-weight:500}.tag-negative{background:#ff2d7826;color:var(--accent-pink)}.tag-positive{background:#00f0ff26;color:var(--accent-cyan)}.comparison-arrow{font-size:1.5rem;color:var(--text-muted);animation:arrow-pulse 2s ease-in-out infinite}@keyframes arrow-pulse{0%,to{opacity:.5;transform:translate(0)}50%{opacity:1;transform:translate(5px)}}@media(max-width:640px) {.intro-card{padding:1.5rem}.comparison-box{flex-direction:column}.comparison-arrow{transform:rotate(90deg)}}.impact-section{position:relative;z-index:1;padding:var(--section-padding) 0}.section-header{text-align:center;margin-bottom:4rem}.section-label{display:inline-block;padding:.3rem 1rem;background:linear-gradient(135deg,#00f0ff1a,#ff2d781a);border-radius:100px;font-size:.8rem;font-weight:600;color:var(--accent-cyan);letter-spacing:.1em;margin-bottom:1rem}.section-title{font-family:var(--font-display);font-size:clamp(1.8rem,5vw,2.8rem);font-weight:700;line-height:1.2;color:var(--text-primary);margin-bottom:1rem}.title-accent{background:linear-gradient(135deg,var(--accent-cyan),var(--accent-pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.section-desc{font-size:1.1rem;color:var(--text-secondary);max-width:500px;margin:0 auto}.impact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:1.5rem;max-width:1100px;margin:0 auto}.impact-card{padding:1.75rem;background:var(--bg-card);border-radius:16px;border:1px solid rgba(255,255,255,.05);transition:all .4s ease;position:relative;overflow:hidden}.impact-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;border-radius:16px 16px 0 0;opacity:0;transition:opacity .4s ease}.impact-card:hover{transform:translateY(-5px);border-color:#ffffff1a;background:var(--bg-card-hover)}.impact-card:hover:before{opacity:1}.impact-card-cyan:before{background:linear-gradient(90deg,var(--accent-cyan),transparent)}.impact-card-cyan:hover{box-shadow:0 10px 40px #00f0ff1a}.impact-card-pink:before{background:linear-gradient(90deg,var(--accent-pink),transparent)}.impact-card-pink:hover{box-shadow:0 10px 40px #ff2d781a}.impact-card-gold:before{background:linear-gradient(90deg,var(--accent-gold),transparent)}.impact-card-gold:hover{box-shadow:0 10px 40px #f0c6741a}.impact-card-green:before{background:linear-gradient(90deg,var(--accent-green),transparent)}.impact-card-green:hover{box-shadow:0 10px 40px #4ade801a}.impact-card-purple:before{background:linear-gradient(90deg,var(--accent-purple),transparent)}.impact-card-purple:hover{box-shadow:0 10px 40px #a855f71a}.card-icon{font-size:2rem;margin-bottom:1rem;filter:drop-shadow(0 0 10px currentColor)}.card-title{font-family:var(--font-display);font-size:1.2rem;font-weight:600;color:var(--text-primary);margin-bottom:.5rem}.card-desc{font-size:.9rem;color:var(--text-secondary);margin-bottom:1rem;line-height:1.5}.card-details{list-style:none;padding:0;margin:0}.card-details li{position:relative;padding-left:1.2rem;margin-bottom:.5rem;font-size:.85rem;color:var(--text-muted);line-height:1.5}.card-details li:before{content:"→";position:absolute;left:0;color:var(--accent-cyan);font-size:.8rem}@media(max-width:768px) {.impact-grid{grid-template-columns:1fr}}.significance-section{position:relative;z-index:1;padding:var(--section-padding) 0;background:linear-gradient(180deg,transparent,rgba(0,240,255,.02),transparent)}.section-header{text-align:center;margin-bottom:4rem}.section-label{display:inline-block;padding:.3rem 1rem;background:linear-gradient(135deg,#ff2d781a,#a855f71a);border-radius:100px;font-size:.8rem;font-weight:600;color:var(--accent-pink);letter-spacing:.1em;margin-bottom:1rem}.section-title{font-family:var(--font-display);font-size:clamp(1.8rem,5vw,2.8rem);font-weight:700;line-height:1.2;color:var(--text-primary)}.title-accent{background:linear-gradient(135deg,var(--accent-pink),var(--accent-purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.significance-list{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:2rem}.significance-item{display:flex;gap:2rem;padding:2rem;background:var(--bg-card);border-radius:16px;border:1px solid rgba(255,255,255,.05);transition:all .4s ease}.significance-item:hover{border-color:#00f0ff26;background:var(--bg-card-hover)}.item-number{flex-shrink:0;width:60px;height:60px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:1.5rem;font-weight:800;color:var(--accent-cyan);background:#00f0ff14;border-radius:12px;border:1px solid rgba(0,240,255,.2)}.item-content{flex:1}.item-title{font-family:var(--font-display);font-size:1.3rem;font-weight:600;color:var(--text-primary);margin-bottom:.25rem}.item-subtitle{display:inline-block;font-size:.9rem;color:var(--accent-cyan);margin-bottom:1rem;font-weight:500}.item-text{font-size:.95rem;color:var(--text-secondary);line-height:1.8;margin-bottom:1rem}.item-highlight{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;background:#f0c67414;border-radius:8px;border-left:3px solid var(--accent-gold);font-size:.9rem;color:var(--accent-gold);font-weight:500}.highlight-icon{font-size:1rem}@media(max-width:640px) {.significance-item{flex-direction:column;gap:1rem}.item-number{width:50px;height:50px;font-size:1.2rem}}.challenges-section{position:relative;z-index:1;padding:var(--section-padding) 0}.section-header{text-align:center;margin-bottom:4rem}.section-label{display:inline-block;padding:.3rem 1rem;background:#ff2d781a;border-radius:100px;font-size:.8rem;font-weight:600;color:var(--accent-pink);letter-spacing:.1em;margin-bottom:1rem}.section-title{font-family:var(--font-display);font-size:clamp(1.8rem,5vw,2.8rem);font-weight:700;line-height:1.2;color:var(--text-primary);margin-bottom:1rem}.title-accent{color:var(--accent-pink)}.section-desc{font-size:1.1rem;color:var(--text-secondary);max-width:500px;margin:0 auto}.challenges-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:1.5rem;max-width:1100px;margin:0 auto}.challenge-card{padding:1.5rem;background:var(--bg-card);border-radius:16px;border:1px solid rgba(255,255,255,.05);transition:all .4s ease}.challenge-card:hover{transform:translateY(-3px);background:var(--bg-card-hover)}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.card-icon{font-size:1.5rem}.severity-badge{padding:.2rem .6rem;border-radius:4px;font-size:.7rem;font-weight:600;letter-spacing:.05em}.severity-high{background:#ff2d7826;color:var(--accent-pink)}.severity-medium{background:#f0c67426;color:var(--accent-gold)}.severity-low{background:#4ade8026;color:var(--accent-green)}.card-title{font-family:var(--font-display);font-size:1.1rem;font-weight:600;color:var(--text-primary);margin-bottom:.75rem}.card-content{font-size:.9rem;color:var(--text-secondary);line-height:1.7;margin-bottom:1rem}.card-solution{padding:.75rem;background:#00f0ff0d;border-radius:8px;border-left:2px solid var(--accent-cyan)}.solution-label{display:block;font-size:.75rem;font-weight:600;color:var(--accent-cyan);margin-bottom:.25rem;letter-spacing:.05em}.solution-text{font-size:.85rem;color:var(--text-muted);line-height:1.5;margin:0}@media(max-width:768px) {.challenges-grid{grid-template-columns:1fr}}.architecture-section{position:relative;z-index:1;padding:var(--section-padding) 0;background:linear-gradient(180deg,transparent,rgba(168,85,247,.02),transparent)}.section-header{text-align:center;margin-bottom:3rem}.section-label{display:inline-block;padding:.3rem 1rem;background:#a855f71a;border-radius:100px;font-size:.8rem;font-weight:600;color:var(--accent-purple);letter-spacing:.1em;margin-bottom:1rem}.section-title{font-family:var(--font-display);font-size:clamp(1.8rem,5vw,2.8rem);font-weight:700;line-height:1.2;color:var(--text-primary);margin-bottom:1rem}.title-accent{color:var(--accent-purple)}.section-desc{font-size:1.1rem;color:var(--text-secondary);max-width:500px;margin:0 auto}.architecture-diagram{max-width:800px;margin:0 auto 3rem;padding:2rem;background:var(--bg-card);border-radius:20px;border:1px solid rgba(255,255,255,.05)}.diagram-layers{display:flex;flex-direction:column;gap:.5rem}.layer{padding:1.25rem;border-radius:12px}.layer-ros{background:linear-gradient(135deg,#00f0ff1a,#a855f71a);border:1px solid rgba(0,240,255,.2)}.layer-hal{background:#f0c6740d;border:1px solid rgba(240,198,116,.15);padding:1rem}.layer-physical{background:#4ade800d;border:1px solid rgba(74,222,128,.15)}.layer-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem}.layer-icon{font-size:1.2rem}.layer-title{font-family:var(--font-display);font-size:1rem;font-weight:600;color:var(--text-primary)}.layer-content{display:flex;flex-wrap:wrap;gap:.5rem}.layer-item{padding:.4rem .8rem;background:#ffffff0d;border-radius:6px;font-size:.85rem;color:var(--text-secondary)}.layer-connector{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.25rem 0}.connector-line{flex:1;height:2px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent)}.connector-label{font-size:.75rem;color:var(--text-muted);white-space:nowrap}.layer-items{display:flex;justify-content:space-around;gap:1rem;flex-wrap:wrap}.hal-item{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.75rem 1rem;background:#ffffff08;border-radius:8px;min-width:100px}.hal-icon{font-size:1.5rem}.hal-name{font-size:.85rem;font-weight:600;color:var(--text-primary)}.hal-desc{font-size:.7rem;color:var(--text-muted)}.architecture-notes{display:flex;gap:1.5rem;max-width:800px;margin:0 auto;flex-wrap:wrap;justify-content:center}.note-card{flex:1;min-width:280px;display:flex;gap:1rem;padding:1.25rem;background:var(--bg-card);border-radius:12px;border:1px solid rgba(255,255,255,.05)}.note-icon{font-size:1.5rem;flex-shrink:0}.note-title{font-size:.95rem;font-weight:600;color:var(--text-primary);margin-bottom:.5rem}.note-text{font-size:.85rem;color:var(--text-secondary);line-height:1.6;margin:0}@media(max-width:640px) {.architecture-diagram{padding:1rem}.layer-items{flex-direction:column;align-items:center}}.cases-section{position:relative;z-index:1;padding:var(--section-padding) 0}.section-header{text-align:center;margin-bottom:4rem}.section-label{display:inline-block;padding:.3rem 1rem;background:#4ade801a;border-radius:100px;font-size:.8rem;font-weight:600;color:var(--accent-green);letter-spacing:.1em;margin-bottom:1rem}.section-title{font-family:var(--font-display);font-size:clamp(1.8rem,5vw,2.8rem);font-weight:700;line-height:1.2;color:var(--text-primary);margin-bottom:1rem}.title-accent{color:var(--accent-green)}.section-desc{font-size:1.1rem;color:var(--text-secondary);max-width:500px;margin:0 auto}.cases-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.5rem;max-width:1100px;margin:0 auto}.case-card{padding:1.5rem;background:var(--bg-card);border-radius:16px;border:1px solid rgba(255,255,255,.05);transition:all .4s ease}.case-card:hover{transform:translateY(-5px);border-color:#4ade8033;background:var(--bg-card-hover);box-shadow:0 10px 40px #4ade801a}.case-header{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}.case-logo{font-size:2.5rem;filter:drop-shadow(0 0 10px rgba(74,222,128,.3))}.case-meta{flex:1}.case-company{font-family:var(--font-display);font-size:1.1rem;font-weight:600;color:var(--text-primary);margin:0}.case-domain{font-size:.8rem;color:var(--accent-green)}.case-desc{font-size:.9rem;color:var(--text-secondary);line-height:1.7;margin-bottom:1rem}.case-tech{display:flex;flex-wrap:wrap;gap:.5rem}.tech-tag{padding:.25rem .6rem;background:#4ade801a;border-radius:4px;font-size:.75rem;color:var(--accent-green);font-weight:500}@media(max-width:768px) {.cases-grid{grid-template-columns:1fr}}.summary-section{position:relative;z-index:1;padding:var(--section-padding) 0;background:linear-gradient(180deg,transparent,rgba(0,240,255,.03),transparent)}.summary-card{max-width:900px;margin:0 auto;padding:3rem;background:var(--bg-card);border:1px solid rgba(0,240,255,.15);border-radius:24px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.summary-header{text-align:center;margin-bottom:2rem}.summary-label{display:inline-block;padding:.3rem 1rem;background:linear-gradient(135deg,#00f0ff1a,#ff2d781a);border-radius:100px;font-size:.8rem;font-weight:600;color:var(--accent-cyan);letter-spacing:.1em;margin-bottom:1rem}.summary-title{font-family:var(--font-display);font-size:clamp(1.5rem,4vw,2.2rem);font-weight:700;line-height:1.3;color:var(--text-primary)}.highlight{background:linear-gradient(135deg,var(--accent-cyan),var(--accent-pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.summary-content{max-width:700px;margin:0 auto 2rem}.summary-paragraph{font-size:1.05rem;line-height:1.9;color:var(--text-secondary);margin-bottom:1rem;text-align:center}.summary-paragraph strong{color:var(--text-primary);font-weight:600}.key-points{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin-bottom:2.5rem}.point-item{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:#ffffff08;border-radius:10px;border:1px solid rgba(255,255,255,.05)}.point-icon{font-size:1.2rem}.point-text{font-size:.9rem;color:var(--text-secondary)}.cta-box{padding:1.5rem;background:linear-gradient(135deg,#00f0ff14,#ff2d7814);border-radius:12px;border:1px solid rgba(0,240,255,.15);text-align:center}.cta-text{font-size:1rem;color:var(--text-secondary);line-height:1.8;margin:0}.cta-text strong{color:var(--text-primary);font-weight:600}@media(max-width:640px) {.summary-card{padding:1.5rem}.rating-item{flex-direction:column;align-items:flex-start;gap:.25rem}}
/* ========================
zjchina.net 首页主题优化
（Dioxus SSR 自持样式，不再依赖 Astro 编译产物）
======================== */
/* 正文/导航可读性：统一行高、提升过小字号 */
.nav-link { font-size: .95rem; }
.impact-card .card-title,
.challenge-card .card-title { font-size: 1.22rem; margin-bottom: .65rem; }
.card-desc,
.card-content,
.case-desc,
.point-text,
.item-text { font-size: .97rem; line-height: 1.75; }
.card-details li { font-size: .9rem; line-height: 1.7; margin-bottom: .55rem; }
.intro-paragraph,
.summary-paragraph { font-size: 1.08rem; line-height: 1.95; }
/* 标题层级：section 主标题更醒目 */
.section-header .section-title { font-size: clamp(2.15rem, 6.5vw, 3.4rem); line-height: 1.12; margin-bottom: .85rem; }
.section-header .section-desc { max-width: 560px; }
/* 间距收紧：压减 section 纵向留白与标题区下间距 */
main section:not(.hero):not(.blog-section) { padding-top: 4.5rem; padding-bottom: 4.5rem; }
.section-header { margin-bottom: 3rem; }
.section-title ~ .section-desc { margin-bottom: 0; }
@media (max-width: 640px) {
main section:not(.hero):not(.blog-section) { padding-top: 3rem; padding-bottom: 3rem; }
.section-header { margin-bottom: 2.25rem; }
.intro-card, .summary-card { padding: 1.5rem; }
.impact-card { padding: 1.4rem; }
}
/* ===== 内页字体变量补充（style.rs 使用 --font-sans）===== */
:root{--font-sans:"Noto Sans SC","Inter","PingFang SC","Hiragino Sans GB",system-ui,-apple-system,sans-serif;}
/* ===== 内页/管理/部署面板等（style.rs 独有规则）===== */
/* 代码/等宽元素统一走 JetBrains Mono 子集 */
pre, code, kbd, textarea,
.mono, .ops-code, .row-slug, .preview-html code, .md-input { font-family: var(--font-mono); }
/* ===== 顶部导航 ===== */
.site-header {
position: sticky; top: 0; z-index: 50;
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
background: transparent;
border-bottom: 1px solid rgba(255,255,255,.04);
}
.header-inner {
max-width: 64rem; margin: 0 auto; padding: .9rem 1.2rem;
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.brand { font-weight: 700; font-size: 1.15rem; letter-spacing: .02em; color:#fff; }
.brand:hover { color:#00f0ff; }
.nav { display: flex; flex-wrap: wrap; gap: 1.4rem; }
/* 内页 SiteHeader 导航：透明底，纯文字 + 渐变下划线动画（对齐首页 .nav-link 体系） */
.nav-item {
padding: .25rem 0; border: 0; border-radius: 0; font-size: .92rem;
color: #a0a0b8; background: transparent; box-shadow: none;
text-decoration: none; position: relative;
transition: color .25s ease;
}
.nav-item:after {
content: ""; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px;
background: linear-gradient(90deg, var(--accent-cyan), var(--accent-pink));
border-radius: 1px; transition: width .3s ease;
}
.nav-item:hover { color: #f0f0f5; background: transparent; border-color: transparent; box-shadow: none; }
.nav-item:hover:after { width: 100%; }
.nav-item.active { color: var(--accent-cyan); background: transparent; border-color: transparent; box-shadow: none; }
.nav-item.active:after { width: 100%; }
/* ===== 首页导航 nav.navbar（透明底，靠文字色 + 下划线动画区分）===== */
.navbar {
position: sticky; top: 0; z-index: 100;
padding: 1rem 2rem;
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
background: transparent;
border-bottom: 1px solid rgba(0,240,255,.06);
}
/* 部署按钮融入 nav-link（button reset 由 .deploy-dd .nav-btn 提供，这里对齐文字）*/
.nav-links .deploy-dd .nav-btn.nav-link { color: #a0a0b8; font-size: .95rem; font-weight: 500; }
.nav-links .deploy-dd .nav-btn.nav-link:hover { color: #f0f0f5; }
/* 移动端菜单内的部署：按钮块级、面板静态展开在菜单流内（不浮层）*/
.mobile-menu .deploy-dd { display: block; }
.mobile-menu .deploy-dd .nav-btn { width: 100%; text-align: left; color: #a0a0b8;
font-size: 1rem; padding: .75rem 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.mobile-menu .deploy-dd .dd-panel { position: static; transform: none; margin: .5rem 0 0;
min-width: 0; background: rgba(0,240,255,.04); box-shadow: none; }
.page-section, .tags-section, .post-detail { margin: 0 auto; max-width: 46rem; }
/* /posts 单栏纵向 + 百分比流式宽度：独立规则、不挂 46rem 固定基线，
避免改布局时被误删覆盖块导致宽度回退（2026-09-29 根治） */
.posts-section { margin: 0 auto; max-width: 72rem; width: min(100% - clamp(2rem, 6vw, 7rem), 72rem); }
.page-title { margin: 0 0 1.2rem; font-size: clamp(1.7rem,4vw,2.6rem); line-height:1.15;
background: linear-gradient(90deg,#7ab7ff,#f0a5ff 45%,#ffd9a0); -webkit-background-clip:text; background-clip:text; color:transparent; }
.page-desc { color:#b9c8dc; }
.hero-desc { color:#93a7c4; }
.impact-grid, .case-grid { display: grid; gap: 1rem; }
.case-grid { grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); }
.impact-card, .case-card, .post-card, .step-card {
background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.10);
border-radius: 14px; padding: 1.2rem 1.3rem;
transition: transform .18s, border-color .18s, box-shadow .18s;
}
.impact-card:hover, .case-card:hover, .post-card:hover { transform: translateY(-3px); border-color: rgba(0,240,255,.5); box-shadow: 0 8px 30px rgba(0,240,255,.12); }
/* 卡片边框霓虹色 */
.card-cyan { border-top: 2px solid #34e0ff; }
.card-pink { border-top: 2px solid #f0a5ff; }
.card-gold { border-top: 2px solid #ffd9a0; }
.card-green { border-top: 2px solid #7ce4a0; }
.card-purple { border-top: 2px solid #c4b5fd; }
/* ===== 文章列表 / 详情 ===== */
.posts-list { display:flex; flex-direction:column; gap:1rem; }
.post-card h2 { margin:.15rem 0 .4rem; font-size:1.15rem; }
.post-card h2 a:hover { color:#00f0ff; }
.post-meta { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; color:#8194b3; font-size:.85rem; margin:.25rem 0; }
.post-summary { margin:.3rem 0 0; color:#b9c8dc; }
.post-tags { display:inline-flex; gap:.35rem; flex-wrap:wrap; }
.post-tag { font-size:.72rem; padding:0 .5rem; border-radius:999px; border:1px solid rgba(255,255,255,.16); }
.pill-tag { display:inline-flex; gap:.4rem; align-items:center; padding:.4rem 1rem; border-radius:999px; border:1px solid rgba(255,255,255,.16); margin:.3rem; transition:all .15s; }
.pill-tag:hover { border-color:#00f0ff; box-shadow:0 0 12px rgba(0,240,255,.25); }
.pill-tag .count { font-size:.78rem; color:#8194b3; }
a.pill-tag { color:#cfe0f5; text-decoration:none; cursor:pointer; }
.posts-count { font-size:1rem; vertical-align:middle; margin-left:.4rem;
background:linear-gradient(90deg,#7ab7ff,#f0a5ff); -webkit-background-clip:text; background-clip:text; color:transparent; }
/* 官方仓库入口（替代原 /posts 标签云；仓库未上码，URL 暂为等宽文本不跳转） */
.posts-repo { display:flex; align-items:center; flex-wrap:wrap; gap:.55rem .7rem; margin:0 0 1.6rem; font-size:.92rem; }
.posts-repo .repo-label { color:#8194b3; }
.posts-repo .repo-url { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
font-size:.85rem; color:#00f0ff; background:rgba(0,240,255,.06); border:1px solid rgba(0,240,255,.25);
border-radius:6px; padding:.28rem .6rem; word-break:break-all; }
.posts-repo .repo-soon { font-size:.8rem; color:#04121a; background:linear-gradient(135deg,#ffd9a0,#ffb86b);
border:none; border-radius:999px; padding:.22rem .7rem; white-space:nowrap; }
/* 标签筛选中时的「查看全部」清除按钮（/tags → /posts 过滤后返回全量） */
.tag-clear { margin-left: .6rem; padding:.1rem .7rem; border-radius:999px; border:1px solid rgba(255,255,255,.18);
background:none; color:#aebdd4; font-size:.8rem; cursor:pointer; vertical-align:middle; transition:all .15s; }
.tag-clear:hover { color:#00f0ff; border-color:#00f0ff; }
.load-more {
display:block; margin:1.4rem auto .4rem; padding:.5rem 1.4rem; border-radius:999px;
border:1px solid rgba(255,255,255,.16); background:none; color:#cfe0f5; cursor:pointer;
font-size:.9rem; transition:all .15s;
}
.load-more:hover { color:#00f0ff; border-color:#00f0ff; box-shadow:0 0 12px rgba(0,240,255,.25); }
/* ============================================================
文章详情页（与首页同一套深空霓虹语言：粒子 canvas + 漂移光晕
+ 渐变 display 标题 + 玻璃胶囊；宽屏正文/目录双栏，窄屏单列。
宽度自适应：随视口流体伸缩；目录可收起（html.toc-off）专注阅读）
============================================================ */
.post-page { position: relative; max-width: none; }
/* 保险：内联基础 CSS 给 body 设过浅色底，粒子脚本加载/降级前由这里兜成深空底 */
html:has(.post-page) body { background: #050510; }
/* 文章页导航/页脚：与正文同一套 vw 百分比定位。
正文网格列左缘 = (100% - 网格总宽)/2（post-wrap 的流体 padding 与网格居中相互抵消），
导航/页脚镜像同一公式：margin = max(流体安全边距, (100% - 总宽)/2)，
分割线左右缘与正文列严格对齐，任何窗口宽度都居中不失真 */
.post-page > header.site {
position: relative; z-index: 20;
display: flex; align-items: center; flex-wrap: wrap; gap: .55rem 1.4rem;
margin: 0 auto;
margin-inline: max(clamp(1.25rem, 6vw, 7rem), calc((100% - 66rem) / 2), env(safe-area-inset-left), env(safe-area-inset-right));
/* 独立 PWA（black-translucent）下让出灵动岛/刘海，env=0 的浏览器保持 .9rem */
padding: max(.9rem, calc(.35rem + env(safe-area-inset-top))) 0 .9rem;
border-bottom: 1px solid rgba(255,255,255,.08);
}
.post-page header.site h1 { margin: 0; font-size: 1.32rem; line-height: 1.2; }
.post-page header.site h1 a {
color: #fff; text-decoration: none;
background: linear-gradient(90deg,#eaf6ff,#7fd7ff);
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.post-page header.site h1 a:hover { text-decoration: none; text-shadow: 0 0 18px rgba(0,240,255,.35); }
.post-page header.site .sub { display: none; }
.post-page header.site .site-nav {
display: flex; align-items: center; flex-wrap: wrap; gap: 1.4rem;
margin: 0 0 0 auto;
}
.post-page header.site .site-nav a,
.post-page header.site .nav-btn {
display: inline-block; padding: .25rem 0; border: 0; border-radius: 0;
font-size: .95rem; line-height: 1.5;
color: #a0a0b8; text-decoration: none; background: transparent;
cursor: pointer; position: relative;
transition: color .25s ease;
}
.post-page header.site .site-nav a:after,
.post-page header.site .nav-btn:after {
content: ""; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px;
background: linear-gradient(90deg, var(--accent-cyan), var(--accent-pink));
border-radius: 1px; transition: width .3s ease;
}
.post-page header.site .site-nav a:hover,
.post-page header.site .nav-btn:hover {
color: #f0f0f5; text-decoration: none;
background: transparent; box-shadow: none;
}
.post-page header.site .site-nav a:hover:after,
.post-page header.site .nav-btn:hover:after { width: 100%; }
.post-page footer.site {
display: flex; flex-wrap: wrap; align-items: center; gap: .45rem 1.4rem;
margin: 0 auto;
margin-inline: max(clamp(1.25rem, 6vw, 7rem), calc((100% - 66rem) / 2), env(safe-area-inset-left), env(safe-area-inset-right));
padding: 1.5rem 0 calc(2.2rem + env(safe-area-inset-bottom));
border-top: 1px solid rgba(255,255,255,.08);
color: #6f86a6; font-size: .85rem;
}
.post-page footer.site a { color: #8aa4c8; text-decoration: none; margin: 0; }
.post-page footer.site a:hover { color: #00f0ff; text-decoration: none; }
.post-wrap {
position: relative; z-index: 1;
width: 100%;
/* 宽度跟随窗口百分比（6vw）流体伸缩，不再硬编码固定 max-width */
padding: 3rem clamp(1.25rem, 6vw, 7rem) 2.5rem;
/* clip：裁掉越界光晕且不形成滚动容器，目录 sticky 仍相对视口生效 */
overflow-x: clip;
}
/* ---------- Hero：kicker + 渐变标题 + meta + 氛围光晕 ---------- */
article.post-head {
grid-area: head;
position: relative;
margin: 1.2rem 0 2.6rem;
padding: 2.2rem 0 2rem;
}
article.post-head::before,
article.post-head::after {
content: ""; position: absolute; pointer-events: none; z-index: -1;
border-radius: 50%; filter: blur(90px);
}
article.post-head::before {
width: 420px; height: 420px; top: -180px; left: -150px;
background: radial-gradient(circle, rgba(0,240,255,.10), transparent 70%);
animation: glow-drift 16s ease-in-out infinite;
}
article.post-head::after {
width: 360px; height: 360px; top: -110px; right: -120px;
background: radial-gradient(circle, rgba(255,45,120,.08), transparent 70%);
animation: glow-drift 13s ease-in-out infinite reverse;
}
.post-kicker {
display: inline-flex; align-items: center; gap: .55rem;
margin-bottom: 1.15rem; padding: .38rem 1.05rem;
border: 1px solid rgba(0,240,255,.28); border-radius: 999px;
background: rgba(0,240,255,.06);
font-family: var(--font-mono); font-size: .72rem; letter-spacing: .2em;
color: #7fe7ff; text-transform: uppercase;
}
.post-kicker .kicker-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--accent-green); box-shadow: 0 0 8px var(--accent-green);
animation: pulse-dot 2s ease-in-out infinite;
}
.post-kicker .kicker-sep { color: var(--text-muted); }
article.post-head h1 {
margin: 0 0 1.05rem;
font-family: var(--font-display);
font-size: clamp(1.9rem, 1.1vw + 1.55rem, 3rem);
line-height: 1.26; font-weight: 800; letter-spacing: -.01em;
background: linear-gradient(120deg, #eaf6ff 0%, #9fd9ff 45%, #d9b8ff 72%, #ffd0ea 100%);
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 22px rgba(0,240,255,.14));
}
.post-head .post-meta {
display: flex; align-items: center; flex-wrap: wrap; gap: .65rem;
color: #8aa4c8; font-size: .85rem;
}
.post-head .post-meta .pm-date,
.post-head .post-meta .pm-read {
display: inline-flex; align-items: center;
font-family: var(--font-mono); font-size: .78rem; color: #93a7c4;
}
.post-head .post-meta .sep { width: 3px; height: 3px; border-radius: 50%; background: #ff2d78; box-shadow: 0 0 6px rgba(255,45,120,.7); }
.post-head .post-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .15rem; }
.post-head .post-tag {
padding: .22rem .72rem; border-radius: 999px; font-size: .74rem;
border: 1px solid rgba(0,240,255,.3); color: #7fe7ff; background: rgba(0,240,255,.07);
transition: transform .2s ease, box-shadow .2s ease;
}
.post-head .post-tag:hover { transform: translateY(-1px); }
.post-head .post-tag.tag-cyan { border-color: rgba(0,240,255,.3); color: #7fe7ff; }
.post-head .post-tag.tag-pink { border-color: rgba(255,45,120,.3); color: #ff9ac2; }
.post-head .post-tag.tag-gold { border-color: rgba(240,198,116,.32); color: #f7d794; }
.post-head .post-tag.tag-green { border-color: rgba(120,255,200,.3); color: #93f5c8; }
.post-head .post-tag.tag-purple { border-color: rgba(168,85,247,.32); color: #cdb0ff; }
/* ---------- 流体网格：列宽直接由视口百分比（vw）驱动，随窗口连续伸缩 ---------- */
.post-layout {
display: grid; justify-content: center;
grid-template-columns: minmax(0, min(100%, 66rem));
grid-template-areas: "head" "body" "foot";
}
.post-layout .content { grid-area: body; }
.post-foot { grid-area: foot; }
@media (min-width: 1100px) {
.post-layout:has(.post-toc) {
/* TOC 列定宽 16rem（非 minmax）：导航/页脚镜像公式依赖定值才能精确对齐 */
grid-template-columns: minmax(0, clamp(46rem, 54vw, 62rem)) 16rem;
column-gap: clamp(2rem, 2.6vw, 3.5rem);
grid-template-areas:
"head ."
"body toc"
"foot .";
}
/* 收起目录：正文列随视口加宽到 62vw，沉浸专注阅读 */
html.toc-off .post-layout:has(.post-toc) {
grid-template-columns: minmax(0, clamp(48rem, 62vw, 70rem));
grid-template-areas: "head" "body" "foot";
}
}
@media (min-width: 1100px) and (max-width: 1380px) {
.post-layout:has(.post-toc) {
grid-template-columns: minmax(0, clamp(42rem, 60vw, 48rem)) 13.5rem;
column-gap: 2rem;
}
html.toc-off .post-layout:has(.post-toc) {
grid-template-columns: minmax(0, clamp(44rem, 66vw, 52rem));
}
}
/* ---------- 导航/页脚镜像正文网格总宽（与 .post-layout 各断点一一对应）---------- */
@media (min-width: 1100px) {
.post-page:has(.post-toc) > header.site,
.post-page:has(.post-toc) > footer.site {
margin-inline: max(clamp(1.25rem, 6vw, 7rem),
calc((100% - (clamp(46rem, 54vw, 62rem) + clamp(2rem, 2.6vw, 3.5rem) + 16rem)) / 2));
}
html.toc-off .post-page:has(.post-toc) > header.site,
html.toc-off .post-page:has(.post-toc) > footer.site {
margin-inline: max(clamp(1.25rem, 6vw, 7rem),
calc((100% - clamp(48rem, 62vw, 70rem)) / 2));
}
}
@media (min-width: 1100px) and (max-width: 1380px) {
.post-page:has(.post-toc) > header.site,
.post-page:has(.post-toc) > footer.site {
margin-inline: max(clamp(1.25rem, 6vw, 7rem),
calc((100% - (clamp(42rem, 60vw, 48rem) + 2rem + 13.5rem)) / 2));
}
html.toc-off .post-page:has(.post-toc) > header.site,
html.toc-off .post-page:has(.post-toc) > footer.site {
margin-inline: max(clamp(1.25rem, 6vw, 7rem),
calc((100% - clamp(44rem, 66vw, 52rem)) / 2));
}
}
/* ---------- 目录（sticky + 可收起） ---------- */
.post-toc {
grid-area: toc; align-self: start;
position: sticky; top: 5.5rem;
max-height: calc(100vh - 7rem); overflow-y: auto;
padding-right: .25rem;
transition: opacity .25s ease, transform .25s ease;
scrollbar-width: thin;
}
.post-toc .toc-head {
display: flex; align-items: center; justify-content: space-between;
gap: .5rem; margin: .2rem 0 .85rem;
}
.post-toc .toc-title {
font-family: var(--font-mono); font-size: .72rem; letter-spacing: .22em;
color: #6f86a6; text-transform: uppercase;
}
.post-toc .toc-hide {
display: inline-flex; align-items: center; justify-content: center;
width: 1.7rem; height: 1.7rem; padding: 0; cursor: pointer;
border-radius: 8px; color: #7d92b4;
border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04);
transition: color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.post-toc .toc-hide svg { width: 15px; height: 15px; }
.post-toc .toc-hide:hover {
color: var(--accent-cyan); border-color: rgba(0,240,255,.45);
box-shadow: 0 0 12px rgba(0,240,255,.22);
}
.post-toc ol { list-style: none; margin: 0; padding: 0 0 0 .9rem;
border-left: 1px solid rgba(255,255,255,.09); }
.post-toc li { margin: 0; }
.post-toc a {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
padding: .38rem 0 .38rem .9rem; margin-left: -1px;
border-left: 2px solid transparent;
color: #8194b3; font-size: .82rem; line-height: 1.45;
text-decoration: none; border-bottom: 0;
transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.post-toc a:hover { color: #b9ddff; text-decoration: none; text-shadow: none; }
.post-toc a.is-active {
color: var(--accent-cyan); border-left-color: var(--accent-cyan);
text-shadow: 0 0 12px rgba(0,240,255,.45);
background: linear-gradient(90deg, rgba(0,240,255,.07), transparent);
}
/* 收起后悬浮的"目录"唤回键（仅宽屏、toc-off 时出现） */
.toc-fab {
display: none;
position: fixed; right: clamp(.8rem, 1.6vw, 1.5rem); top: 50%;
transform: translateY(-50%);
z-index: 45; align-items: center; gap: .45rem;
padding: .6rem .85rem; cursor: pointer;
border-radius: 999px;
font-family: var(--font-mono); font-size: .72rem; letter-spacing: .15em;
color: #bfefff;
background: rgba(12,18,32,.62);
border: 1px solid rgba(0,240,255,.35);
box-shadow: 0 8px 28px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12);
backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
transition: color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
writing-mode: vertical-rl;
}
.toc-fab svg { width: 15px; height: 15px; }
.toc-fab:hover {
color: #fff; border-color: var(--accent-cyan);
box-shadow: 0 0 22px rgba(0,240,255,.35), inset 0 1px 0 rgba(255,255,255,.18);
transform: translateY(-50%) translateX(-2px);
}
@media (min-width: 1100px) {
html.toc-off .toc-fab { display: inline-flex; }
html.toc-off .post-toc { display: none; }
}
@media (max-width: 1099px) {
.post-toc { display: none; }
.toc-fab { display: none !important; }
}
/* ---------- 正文排版（字号随大屏微放大，行宽舒适） ---------- */
.post-wrap .content {
color: #d2def0;
font-size: clamp(1.02rem, .18vw + .96rem, 1.13rem);
line-height: 1.95;
counter-reset: sec;
}
.post-wrap .content h2 {
counter-increment: sec;
margin: 3rem 0 1.1rem; padding-top: .4rem;
font-family: var(--font-display);
font-size: clamp(1.45rem, .55vw + 1.24rem, 1.78rem);
font-weight: 700; line-height: 1.4; color: #fff;
scroll-margin-top: 5.5rem;
display: flex; align-items: baseline; gap: .8rem;
}
.post-wrap .content h2::before {
content: counter(sec, decimal-leading-zero);
flex-shrink: 0;
font-family: var(--font-mono); font-size: .82rem; font-weight: 500;
letter-spacing: .05em; color: var(--accent-cyan);
text-shadow: 0 0 12px rgba(0,240,255,.55);
}
.post-wrap .content h2:first-child { margin-top: .6rem; }
.post-wrap .content h3 {
margin: 2.1rem 0 .8rem; padding-left: .8rem;
font-size: 1.22rem; font-weight: 650; color: #e8f4ff;
border-left: 3px solid var(--accent-pink);
scroll-margin-top: 5.5rem;
}
.post-wrap .content h4 { margin: 1.6rem 0 .6rem; font-size: 1.06rem; color: #cfe0f5; }
.post-wrap .content p { margin: 0 0 1.25rem; }
.post-wrap .content strong { color: #f2f7ff; font-weight: 650; }
.post-wrap .content ::selection,
.post-wrap .content::selection { background: rgba(0,240,255,.25); }
.post-wrap .content a { color: #6ee7ff; text-decoration: none; border-bottom: 1px solid rgba(0,240,255,.35); transition: color .2s ease, border-color .2s ease; }
.post-wrap .content a:hover { color: #00f0ff; border-color: #00f0ff; text-decoration: none; }
.post-wrap .content ul, .post-wrap .content ol { margin: 0 0 1.3rem; padding-left: 1.5rem; }
.post-wrap .content li { margin: .35rem 0; }
.post-wrap .content li::marker { color: var(--accent-cyan); }
.post-wrap .content blockquote {
margin: 1.6rem 0; padding: .9rem 1.2rem;
border-left: 3px solid var(--accent-cyan);
background: linear-gradient(90deg, rgba(0,240,255,.07), rgba(0,240,255,.015));
border-radius: 0 12px 12px 0; color: #b9cbe4;
}
.post-wrap .content blockquote p:last-child { margin-bottom: 0; }
.post-wrap .content pre {
margin: 1.5rem 0; padding: 1.15rem 1.3rem; overflow-x: auto;
background: rgba(10,14,26,.85);
border: 1px solid rgba(0,240,255,.14); border-radius: 14px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 30px rgba(0,0,0,.35);
font-size: .88rem; line-height: 1.75; color: #d7e2f3;
}
.post-wrap .content code {
font-family: var(--font-mono); font-size: .88em;
background: rgba(0,240,255,.09);
border: 1px solid rgba(0,240,255,.12);
padding: .12rem .42rem; border-radius: 6px; color: #8ff0ff;
overflow-wrap: anywhere; word-break: break-word;
}
.post-wrap .content pre code { background: transparent; border: 0; padding: 0; color: inherit; font-size: inherit; white-space: pre; overflow-wrap: normal; word-break: normal; }
.post-wrap .content table { border-collapse: collapse; margin: 1.4rem 0; width: 100%; font-size: .92rem; }
.post-wrap .content th, .post-wrap .content td { border: 1px solid rgba(255,255,255,.12); padding: .55rem .8rem; text-align: left; }
.post-wrap .content th { background: rgba(0,240,255,.08); color: #e8f4ff; }
/* 宽表（多列实测矩阵）：窄屏在包裹层内横向滑动，不撑破正文、不裁列 */
.post-wrap .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.4rem 0; }
.post-wrap .table-wrap table { margin: 0; min-width: 460px; }
.post-wrap .content img { max-width: 100%; border-radius: 12px; border: 1px solid rgba(0,240,255,.15); box-shadow: 0 12px 40px rgba(0,0,0,.4); }
.post-wrap .content hr {
border: 0; height: 1px; margin: 2.8rem auto; width: 60%;
background: linear-gradient(90deg, transparent, rgba(0,240,255,.5), rgba(255,45,120,.4), transparent);
}
/* ---------- 文末：分隔线 + 玻璃返回胶囊（与正文列同宽） ---------- */
.post-foot {
margin: 3.2rem 0 0;
padding-top: 2rem; text-align: center;
border-top: 1px solid rgba(255,255,255,.08);
}
/* 双胶囊（返回首页 + 全部文章）：内联排布 + 间距，窄屏自动换行 */
.post-page .back + .back { margin-left: .8rem; margin-top: .6rem; }
.post-page .back {
display: inline-flex; align-items: center; gap: .45rem;
padding: .72rem 1.9rem; border-radius: 999px;
color: #dff6ff; font-weight: 600; font-size: .92rem; text-decoration: none;
background-image: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.02) 55%, rgba(255,255,255,0));
background-color: rgba(255,255,255,.05);
border: 1px solid rgba(0,240,255,.35);
box-shadow: 0 8px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.14);
backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.post-page .back:hover {
text-decoration: none; color: #fff;
border-color: var(--accent-cyan);
transform: translateY(-2px);
box-shadow: 0 12px 38px rgba(0,240,255,.28), inset 0 1px 0 rgba(255,255,255,.2);
}
/* ---------- 文末导航：上一篇 / 下一篇 双卡（与正文列同宽） ---------- */
.post-nav {
margin: 2.6rem 0 0;
display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
.post-nav-card {
display: flex; flex-direction: column; justify-content: center; gap: .35rem;
min-width: 0; padding: 1rem 1.25rem; border-radius: 16px;
text-decoration: none;
background-image: linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 55%, rgba(255,255,255,0));
background-color: rgba(255,255,255,.04);
border: 1px solid rgba(0,240,255,.22);
box-shadow: 0 8px 28px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.12);
backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
a.post-nav-card:hover {
text-decoration: none; transform: translateY(-2px);
border-color: var(--accent-cyan);
box-shadow: 0 12px 38px rgba(0,240,255,.24), inset 0 1px 0 rgba(255,255,255,.2);
}
.post-nav-card .pn-label {
font-family: var(--font-mono); font-size: .74rem; letter-spacing: .1em;
color: #7fe7ff;
}
.post-nav-card .pn-title {
font-weight: 600; font-size: .95rem; line-height: 1.5; color: #e8f4ff;
display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; overflow-wrap: anywhere;
}
.post-nav-card.next { text-align: right; align-items: flex-end; }
/* 占位卡（单侧缺失）：虚线弱化，纯展示不可点 */
.post-nav-card.ghost {
border-style: dashed; border-color: rgba(255,255,255,.14);
background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
opacity: .5; pointer-events: none;
}
.post-nav-card.ghost .pn-label { color: rgba(143,164,200,.8); }
.post-nav-card.ghost .pn-title { color: rgba(143,164,200,.7); font-weight: 500; }
@media (max-width: 640px) {
/* 小屏纵排：时间轴向（上=更早、下=更新），箭头方向语义保持 */
.post-nav { grid-template-columns: 1fr; gap: .7rem; }
.post-nav-card.next { text-align: left; align-items: flex-start; }
}
@media (max-width: 640px) {
.post-page > header.site { padding: max(.85rem, calc(.3rem + env(safe-area-inset-top))) 0 .7rem; gap: .45rem .8rem; }
.post-page footer.site { padding: 1.35rem 0 calc(1.8rem + env(safe-area-inset-bottom)); }
.post-wrap { padding: 2.2rem 1.15rem 1.6rem; }
/* 小屏正文收窄到 1.15rem，导航/页脚 margin 同步，保持分割线与正文缘对齐；横屏刘海让左右 */
.post-page > header.site, .post-page footer.site { margin-inline: max(1.15rem, env(safe-area-inset-left), env(safe-area-inset-right)); }
article.post-head { margin-top: .8rem; padding: 1.4rem 0 1.5rem; }
article.post-head h1 { font-size: 1.72rem; }
.post-wrap .content { font-size: .98rem; line-height: 1.9; }
.post-wrap .content h2 { font-size: 1.32rem; }
}
/* 次级标签页（/drogon /ros2 /404）返回链接沿用胶囊按钮 */
.back-btn { display:inline-block; margin-top:1.6rem; padding:.5rem 1.1rem; border-radius:999px;
border:1px solid rgba(255,255,255,.16); color:#cfe0f5; cursor:pointer; background:none; font-size:.9rem; transition:all .15s; }
.back-btn:hover { color:#00f0ff; border-color:#00f0ff; box-shadow:0 0 12px rgba(0,240,255,.25); }
/* ===== 部署步骤 ===== */
.step-list { display:flex; flex-direction:column; gap:1rem; }
.step-card { display:flex; gap:1rem; align-items:flex-start; }
.step-num { font-size:1.3rem; font-weight:700; color:#00f0ff; line-height:1; }
.step-body h3 { margin:0 0 .3rem; }
.step-body p { margin:0; color:#a9b9d0; }
/* state */
.loading, .empty, .error { text-align:center; color:#8194b3; padding:3rem 0; }
.empty { color:#5f6f8a; }
.error { color:#ff9a9a; }
/* ===== 页脚 ===== */
.site-footer { border-top:1px solid rgba(255,255,255,.07); margin-top:3rem; }
/* ===== 「部署」多端下拉（DOM/类名对齐 SSR DD_CSS；PWA 一键安装指引）=====
定位：桌面 .nav-links 末项 → right:0 向左展开（避免右缘溢出）；
过渡：display:none/flex 无法 transition，改 opacity+transform+visibility 三元组。 */
.deploy-dd { position: relative; display: inline-block; vertical-align: middle; }
.deploy-dd .nav-btn { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 0 6px; }
.deploy-dd .dd-caret { font-size: 10px; opacity: .7; transition: transform .25s ease, opacity .25s ease; }
.deploy-dd:hover .dd-caret,
.deploy-dd:focus-within .dd-caret,
.deploy-dd.open .dd-caret { transform: rotate(180deg); opacity: 1; }
.dd-panel {
position: absolute; top: 100%; right: 0; left: auto; transform: translateY(-6px);
margin-top: 10px; min-width: 260px; max-height: calc(100vh - 140px); overflow-y: auto;
padding: 6px; z-index: 60;
background: #0b0e17; border: 1px solid rgba(0,240,255,.25); border-radius: 12px;
box-shadow: 0 12px 40px rgba(0,0,0,.5);
display: flex; flex-direction: column; gap: .15rem;
/* 隐态：opacity 0 + 向上微移 + 不可交互/不可见；display 始终为 flex 以支持过渡 */
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.deploy-dd:hover .dd-panel,
.deploy-dd:focus-within .dd-panel,
.deploy-dd.open .dd-panel {
opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
transition: opacity .22s ease, transform .22s ease, visibility 0s linear 0s;
}
/* ── 2026-09-13 旧部署下拉退役 ─────────────────────────────────
「部署」现在是全屏安装中心的直接入口（deploy-guide.js 捕获点击）。
JS 可用时（html.has-ic）旧面板与下拉箭头一律不显示，杜绝 hover 弹出
与安装中心风格重复的旧卡片；无 JS 时面板保留为一份静态指引（渐进增强）。 */
html.has-ic .deploy-dd .dd-panel,
html.has-ic .deploy-dd:hover .dd-panel,
html.has-ic .deploy-dd:focus-within .dd-panel,
html.has-ic .deploy-dd.open .dd-panel { display: none; }
html.has-ic .deploy-dd .dd-caret { display: none; }
/* 入口按钮：hover 青色辉光 + 右侧箭头滑入，暗示"进入安装中心" */
html.has-ic .nav-links .deploy-dd .nav-btn.nav-link::after {
content: "\203A"; display: inline-block; margin-left: 3px;
color: #67e8f9; font-size: 1.05em; line-height: 1;
opacity: 0; transform: translateX(-6px);
transition: opacity .2s ease, transform .2s ease;
}
html.has-ic .nav-links .deploy-dd:hover .nav-btn.nav-link,
html.has-ic .nav-links .deploy-dd .nav-btn.nav-link:focus-visible {
color: #67e8f9; text-shadow: 0 0 14px rgba(0,240,255,.45);
}
html.has-ic .nav-links .deploy-dd:hover .nav-btn.nav-link::after,
html.has-ic .nav-links .deploy-dd .nav-btn.nav-link:focus-visible::after {
opacity: 1; transform: translateX(0);
}
/* 移动菜单内：部署整行常显箭头 */
html.has-ic .mobile-menu .deploy-dd .nav-btn::after {
content: "\203A"; color: #67e8f9; opacity: 1; transform: none;
margin-left: 8px;
}
.dd-hint { font-size: 12px; color: #8a93a8; line-height: 1.5; padding: 4px 12px 8px; border-bottom: 1px solid #1d2337; margin-bottom: 6px; }
.dd-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 12px; border-radius: 8px; color: #dbe7f7; }
.dd-item:hover { background: #151a2b; }
.dd-icon { font-size: 18px; line-height: 1.4; }
.dd-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dd-name { display: flex; align-items: center; gap: 8px; font-size: 14px; white-space: nowrap; }
.dd-desc { font-size: 12px; color: #8a93a8; line-height: 1.4; }
.dd-badge { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 99px; background: rgba(52,211,153,.15); color: #34d399; }
.dd-badge-safari { background: rgba(148,163,184,.15); color: #94a3b8; }
/* ===== 多端部署页 ===== */
.deploy-page .page-desc { margin-bottom:1.6rem; max-width:60ch; }
.platform-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1rem; }
.platform-card {
background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.10);
border-top:2px solid #00f0ff; border-radius:14px; padding:1.3rem;
display:flex; flex-direction:column; gap:.4rem; min-height:13rem;
}
.platform-card:hover { border-color:rgba(0,240,255,.5); box-shadow:0 8px 30px rgba(0,240,255,.12); transform:translateY(-3px); }
.pf-icon { font-size:1.8rem; }
.pf-name { margin:.2rem 0; font-size:1.2rem; }
.pf-desc { margin:0; color:#a9b9d0; font-size:.9rem; flex:1; }
.pf-ext { margin:0; color:#6f86a6; font-size:.78rem; }
.dl-btn {
display:inline-block; margin-top:.4rem; padding:.5rem 1rem; border-radius:999px;
border:1px solid #00f0ff; color:#00f0ff; text-align:center; font-size:.9rem; transition:all .15s;
}
.dl-btn:hover { background:rgba(0,240,255,.12); box-shadow:0 0 14px rgba(0,240,255,.3); }
.dl-btn.disabled { border-color:rgba(255,255,255,.16); color:#5f6f8a; cursor:not-allowed; pointer-events:none; }
.post-card h2 a, .post-link { color:#e6edf7; }
.post-card h2 a:hover, .post-link:hover { color:#00f0ff; }
/* 注意：≤960px 的 .dd-panel left:0 覆盖规则已删除——
新 .dd-panel 统一 right:0 向左展开，任何宽度都不会溢出右缘（2026-09-12） */
@media (max-width:640px) {
.header-inner { flex-direction:column; align-items:flex-start; }
}
/* ============================================================
首页完整长文区块（深度复刻线上 home.css 的视觉体系）
说明：长文 section 自带 .container(1200px)；覆盖全局 main 的
64rem 约束，让首页各区块全宽排版；nav 等站点样式不受影响。
============================================================ */
/* ---- 长文容器：突破全局 main 64rem ---- */
.hero, .intro-section, .impact-section, .significance-section,
.challenges-section, .architecture-section, .cases-section,
.summary-section, .blog-section {
width: 100%; max-width: none;
}
/* ---- Blog：最新文章（DOM/类名对齐 SSR assets.rs home_head_links）---- */
.blog-section { position: relative; padding: 6rem 1.5rem 2rem; scroll-margin-top: 4rem; }
.blog-section .blog-inner { max-width: 1140px; margin: 0 auto; }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.6rem; }
.blog-card {
position: relative; display: flex; flex-direction: column; padding: 1.9rem 1.9rem 1.7rem;
border-radius: 18px;
background: linear-gradient(165deg, rgba(22,33,64,.6), rgba(8,12,24,.82));
border: 1px solid rgba(255,255,255,.08);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 20px 44px rgba(0,0,0,.42);
transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.blog-card::before {
content: ""; position: absolute; inset: 0; border-radius: 18px; padding: 1px;
background: linear-gradient(135deg, rgba(0,240,255,.75), rgba(255,45,120,.4) 55%, rgba(168,85,247,.5));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude; opacity: .55; pointer-events: none; transition: opacity .35s ease;
}
.blog-card:hover { transform: translateY(-7px); border-color: rgba(0,240,255,.35); box-shadow: 0 30px 60px rgba(0,240,255,.16), inset 0 1px 0 rgba(255,255,255,.1); }
.blog-card:hover::before { opacity: 1; }
.blog-card h3 { margin: 0 0 .6rem; font-size: 1.28rem; line-height: 1.42; font-weight: 700; }
.blog-card h3 a {
color: #fff; text-decoration: none;
background: linear-gradient(90deg, #eaf6ff, #b6e6ff);
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
transition: filter .3s ease;
}
.blog-card h3 a:hover { filter: drop-shadow(0 0 12px rgba(0,240,255,.55)); text-decoration: none; }
.blog-meta { display: flex; flex-wrap: wrap; gap: .4rem .7rem; align-items: center; margin-bottom: .9rem; font-size: .78rem; color: #8aa4c8; }
.blog-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: #ff2d78; }
.blog-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.blog-tag {
padding: .18rem .68rem; border-radius: 999px; font-size: .72rem;
border: 1px solid rgba(0,240,255,.28); color: #7fe7ff; background: rgba(0,240,255,.07);
}
.blog-tag.tag-cyan { border-color: rgba(0,240,255,.28); color: #7fe7ff; }
.blog-tag.tag-pink { border-color: rgba(255,45,120,.28); color: #ff9ac2; }
.blog-tag.tag-gold { border-color: rgba(240,198,116,.3); color: #f7d794; }
.blog-tag.tag-green { border-color: rgba(120,255,200,.28); color: #93f5c8; }
.blog-tag.tag-purple { border-color: rgba(168,85,247,.3); color: #cdb0ff; }
.blog-card p.blog-summary { margin: 0 0 1.4rem; color: #c6d3e8; font-size: .95rem; line-height: 1.75; flex: 1; }
.blog-read {
padding: .9rem 0 0; border-top: 1px solid rgba(255,255,255,.08); color: #8aa4c8;
font-size: .86rem; text-decoration: none; display: inline-flex; align-items: center; gap: .45rem;
transition: color .3s ease;
}
.blog-read .arr { transition: transform .3s ease; }
.blog-card:hover .blog-read .arr { transform: translateX(4px); }
.blog-read:hover { color: #00f0ff; text-decoration: none; }
@media (prefers-reduced-motion: reduce) {
.blog-card, .blog-card h3 a, .blog-card:hover { transition: none; transform: none; }
}
main, .site-footer { position: relative; z-index: 1; }
/* .site-header 刻意不在此列：保持 line 71 的 position:sticky + z-index:50，
否则被拉到 z-index:1 与 main 同层，main 在 DOM 靠后，其内部全屏 particle
canvas 会把顶部导航整体盖住（导航“在 DOM 但视觉消失”）。 */
/* ===== 信息页(关于 Drogon / ROS 2 实践笔记) ===== */
.info-page .page-inner { max-width: 46rem; }
.info-hero { margin-bottom: 2.5rem; }
.info-block { margin-bottom: 2rem; }
.info-title {
font-size: 1.25rem; font-weight: 700; color: #fff;
margin-bottom: .8rem; padding-left: .8rem;
border-left: 3px solid #00f0ff;
}
.info-text { color: #b9c8dc; line-height: 1.8; }
.info-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .6rem; }
.info-list li {
position: relative; padding-left: 1.2rem; color: #c3d2e6; line-height: 1.7;
}
.info-list li::before { content: "▹"; position: absolute; left: 0; color: #00f0ff; }
.info-page .back-btn { margin-top: .4rem; }
/* ===== 中舰商城：自有品牌卡 + 商品预览卡 ===== */
.zb-brand-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: .4rem; }
.zb-brand-card { padding: 1.1rem 1.2rem; border: 1px solid rgba(0,240,255,.16); border-radius: 12px; background: rgba(10,14,26,.55); }
.zb-brand-badge { display: block; font-weight: 700; font-size: 1.05rem; margin-bottom: .4rem; color: #fff;
background: linear-gradient(90deg,#00f0ff,#7c5cff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.zb-brand-line { color: #d7e2f3; margin: .1rem 0; font-size: .92rem; }
.zb-brand-reg { color: #8aa4c8; font-size: .78rem; margin: .15rem 0 0; }
.zb-product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: .6rem; }
.zb-product { border: 1px solid rgba(0,240,255,.16); border-radius: 12px; overflow: hidden; background: rgba(10,14,26,.55); display: flex; flex-direction: column; }
.zb-img-wrap { position: relative; aspect-ratio: 1/1; border-bottom: 1px solid rgba(0,240,255,.12);
background: radial-gradient(120% 120% at 30% 20%, rgba(0,240,255,.12), rgba(10,14,26,.6)); }
.zb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zb-status { position: absolute; top: .5rem; left: .5rem; font-size: .68rem; letter-spacing: .05em; padding: .22rem .55rem;
border-radius: 999px; color: #021219; background: linear-gradient(90deg,#00f0ff,#7c5cff); font-weight: 700; }
.zb-body { padding: .7rem .8rem .85rem; display: flex; flex-direction: column; gap: .32rem; }
.zb-cat { font-size: .68rem; letter-spacing: .14em; color: #00f0ff; }
.zb-name { margin: 0; font-size: .98rem; font-weight: 700; color: #fff; line-height: 1.35; }
.zb-meta { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: .3rem; }
.zb-stock { font-size: .74rem; color: #ffd0ea; border: 1px solid rgba(255,208,234,.4); padding: .05rem .5rem; border-radius: 999px; }
.zb-brand { font-size: .72rem; color: #8aa4c8; }
@media (max-width: 900px) {
.zb-product-grid { grid-template-columns: repeat(2, 1fr); }
.zb-brand-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.nav { overflow-x: auto; flex-wrap: nowrap; padding-bottom: .2rem; -webkit-overflow-scrolling: touch; }
.nav-item { white-space: nowrap; flex-shrink: 0; }
.impact-grid, .challenges-grid, .cases-grid, .blog-grid { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
.page-inner { padding: 0 .4rem; }
}
/* 注意：渐变标题（.title-highlight/.title-accent/.page-title/.kpi-val/
.footer-zj 等）必须保留 background-clip:text + text-fill-color:transparent，
不要用 !important 统一染白，否则渐变与 gradient-shift 动画失效。 */
.site-header, .site-footer, .hero, section { backface-visibility: hidden; }
[class*="card"], .dd-panel,
#back-to-top, .summary-card, .intro-card { background: rgba(12, 16, 42, .96) !important; }
/* 注意：.site-header/.navbar 已透明化，不强制深色底（仅 .dd-panel 等浮层保留深底以保证对比度） */
/* 文章/详情页横向分享行（ShareBar） */
.share-bar {
display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
margin: 1.6rem 0 .4rem; padding-top: 1rem;
border-top: 1px dashed rgba(255,255,255,.12);
}
.share-bar .share-label { font-size: .85rem; color: #8194b3; margin-right: .2rem; }
.share-bar .share-btn {
padding: .32rem .9rem; border-radius: 999px; font-size: .85rem;
border: 1px solid rgba(255,255,255,.14); background: none; color: #cfe0f5;
cursor: pointer; transition: color .15s, border-color .15s, box-shadow .15s;
}
a.share-bar .share-btn { text-decoration: none; display: inline-block; }
.share-bar .share-btn:hover { color: #00f0ff; border-color: #00f0ff; box-shadow: 0 0 10px rgba(0,240,255,.25); }
/* /deploy 服务器运维卡 */
.server-ops {
margin-top: 2rem; border:1px solid rgba(255,255,255,.12); border-radius:14px;
background: rgba(10,15,38,.6); padding: 1rem 1.3rem;
}
.server-ops summary { cursor:pointer; color:#7ab7ff; font-weight:600; }
.ops-note { color:#9fb2cc; font-size:.9rem; margin:.7rem 0; }
.ops-code {
background:#0a0f22; border:1px solid rgba(255,255,255,.1); border-radius:10px;
padding:.8rem 1rem; overflow:auto; color:#9beebe; font-size:.82rem;
font-family:ui-monospace,Menlo,monospace; line-height:1.6; white-space:pre;
}
/* ===== 管理后台 /admin* ===== */
.admin-page { max-width: 60rem; margin: 0 auto; }
.admin-card {
background: rgba(10,15,38,.72); border: 1px solid rgba(255,255,255,.1);
border-radius: 14px; padding: 1.4rem 1.6rem; margin-bottom: 1rem;
}
.admin-title { margin: 0; font-size: 1.5rem; }
.admin-sub { color: #8194b3; margin: .3rem 0 1rem; }
.admin-input {
width: 100%; box-sizing: border-box; margin: .3rem 0 .9rem; padding: .55rem .8rem;
border-radius: 10px; border: 1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.35);
color: #e6edf7; font: inherit;
}
textarea.admin-input { resize: vertical; font-family: ui-monospace, Menlo, monospace; font-size: .88rem; }
.admin-btn {
display:inline-block; border:1px solid rgba(255,255,255,.18); background:none; color:#cfe0f5;
padding:.45rem 1rem; border-radius:999px; cursor:pointer; font-size:.88rem; text-decoration:none;
transition: all .15s;
}
.admin-btn:hover { color:#00f0ff; border-color:#00f0ff; box-shadow:0 0 10px rgba(0,240,255,.22); }
.admin-btn.primary { background: linear-gradient(135deg,#00f0ff,#7ae0ff); color:#04121a; font-weight:600; border-color:transparent; }
.admin-btn.green { border-color:#3ecf8e88; color:#7bf0b4; }
.admin-btn.danger { border-color:#ff5c6c88; color:#ffb3ba; }
.admin-btn.small { padding:.28rem .8rem; font-size:.8rem; }
.admin-btn:disabled { opacity:.5; cursor:not-allowed; }
.admin-err { color:#ffb3ba; margin:.4rem 0; }
.admin-links { margin-top:1rem; font-size:.9rem; }
.admin-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; flex-wrap:wrap; }
.admin-actions { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.admin-h2 { margin:.2rem 0 .8rem; font-size:1.05rem; }
.admin-muted { color:#8194b3; font-size:.9rem; }
.admin-list { display:flex; flex-direction:column; gap:.6rem; }
.admin-row {
display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
background:rgba(10,15,38,.72); border:1px solid rgba(255,255,255,.09); border-radius:12px;
padding:.8rem 1.1rem;
}
/* 苏舰导购区（切片 1）：画像栅格 / 发送行 / 对话气泡 / 推荐卡 */
.guide-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:.4rem 1rem; margin-bottom:1rem; }
.guide-grid label { display:block; font-size:.82rem; color:#9fb2cc; margin-bottom:.15rem; }
.guide-grid .admin-input { margin:.0 0 .3rem; }
.guide-send { display:flex; gap:.5rem; align-items:center; }
.guide-send .admin-input { flex:1; margin:0; }
.guide-msg { padding:.6rem .9rem; border-radius:12px; margin:.4rem 0; max-width:82%; font-size:.95rem; line-height:1.5; }
.guide-user { background:rgba(0,240,255,.12); border:1px solid rgba(0,240,255,.25); margin-left:auto; text-align:right; }
.guide-assistant { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); margin-right:auto; }
.guide-rec { padding:.8rem 1rem; margin:.4rem 0; }
.row-title { font-weight:600; color:#eef4ff; }
.row-meta { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-top:.15rem; }
.row-slug { color:#8194b3; font-size:.78rem; font-family: ui-monospace, Menlo, monospace; }
.row-date { color:#8194b3; font-size:.78rem; }
.status-badge { font-size:.72rem; padding:.05rem .6rem; border-radius:999px; border:1px solid; }
.status-badge.published { color:#7bf0b4; border-color:#3ecf8e88; }
.status-badge.draft { color:#f0c37b; border-color:#f0c37b77; }
.row-actions { display:flex; gap:.4rem; flex-wrap:wrap; }
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:.7rem; margin-bottom:1rem; }
.kpi { background:rgba(10,15,38,.72); border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:1rem; text-align:center; }
.kpi-val { font-size:1.7rem; font-weight:700; background:linear-gradient(135deg,#00f0ff,#f0a5ff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.kpi-label { color:#8194b3; font-size:.78rem; margin-top:.2rem; }
.admin-cols { display:grid; grid-template-columns:1.4fr 1fr; gap:1rem; }
.bar-chart { display:flex; align-items:flex-end; gap:.5rem; height:150px; padding-top:.4rem; }
.bar-col { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:2px; height:100%; }
.bar-pv { width:14px; max-width:60%; background:linear-gradient(180deg,#7ae0ff,#00a6c8); border-radius:3px 3px 0 0; }
.bar-uv { width:14px; max-width:60%; background:linear-gradient(180deg,#f0a5ff,#a055c8); border-radius:3px 3px 0 0; }
.bar-date { font-size:.68rem; color:#8194b3; margin-top:.2rem; }
.top-row { display:flex; justify-content:space-between; gap:.6rem; padding:.32rem 0; border-bottom:1px dashed rgba(255,255,255,.08); }
.top-path { color:#cfe0f5; font-family:ui-monospace,Menlo,monospace; font-size:.85rem; word-break:break-all; }
.top-cnt { color:#7bf0b4; }
.login-card { max-width:26rem; margin: 2rem auto; }
.editor-grid { display:grid; grid-template-columns: 1fr 1fr; gap:1rem; align-items:start; }
.editor-pane { margin-bottom:0; }
.md-input { min-height: 340px; }
.preview-pane { position:sticky; top:4.2rem; }
.preview-label { font-size:.8rem; color:#8194b3; margin-bottom:.5rem; }
.preview-html h1,.preview-html h2,.preview-html h3 { line-height:1.3; }
.preview-html pre { background:#0a0f22; border:1px solid rgba(255,255,255,.12); border-radius:8px; padding:.7rem; overflow:auto; }
.preview-html code { background:rgba(255,255,255,.08); padding:.1rem .3rem; border-radius:4px; font-family:ui-monospace,Menlo,monospace; }
.preview-html blockquote { border-left:3px solid #00f0ff; margin:.6rem 0; padding:.1rem .8rem; color:#a9c6e8; }
.preview-html img { max-width:100%; }
.editor-actions { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin-top:1rem; }
.admin-msg { color:#7bf0b4; font-size:.88rem; }
@media (max-width: 860px) {
.admin-cols { grid-template-columns: 1fr; }
.editor-grid { grid-template-columns: 1fr; }
.preview-pane { position: static; }
}
/* ============================================================
首页锚点导航补充（wasm 自有体系，无 Astro 影子）
复用 .site-header/.nav/.nav-item；这里仅补锚点跳转的
定位补偿（sticky 导航约 3.4rem 高）与品牌闪电图标点缀。
============================================================ */
.brand-bolt { filter: drop-shadow(0 0 6px rgba(0,240,255,.55)); }
/* ============================================================
首页专属页脚（DOM/类名对齐 SSR share.rs footer 体系）：
⚡ zj/china 分色 Logo + 旋转 ring | 探索智能工厂上位机开发的未来
| 苏ICP备2024064405号-2
============================================================ */
.footer {
position: relative; z-index: 1; padding: 2rem;
border-top: 1px solid rgba(0,240,255,.08);
background: rgba(5,5,16,.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
/* ===== 部署下拉 v2（与 v1 块统一：right:0 向左展开 + opacity/transform/visibility 过渡）=====
v1 块（line ~595）已定义 .dd-panel 默认 right:0 + 过渡；此处仅保留移动端 mobile-menu
静态展开覆盖（v1 通用规则对桌面/移动端均生效，故 v2 不再重复 .dd-panel 基础规则）。 */
.deploy-dd .dd-hint{font-size:12px;color:#8a93a8;line-height:1.5;padding:4px 12px 8px;border-bottom:1px solid #1d2337;margin-bottom:6px}
.deploy-dd .dd-item{display:flex;align-items:flex-start;gap:10px;padding:8px 12px;border-radius:8px;color:inherit;cursor:pointer}
.deploy-dd .dd-item:hover{background:#151a2b}
.deploy-dd .dd-icon{font-size:18px;line-height:1.4}
.deploy-dd .dd-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.deploy-dd .dd-name{display:flex;align-items:center;gap:8px;font-size:14px;white-space:nowrap}
.deploy-dd .dd-desc{font-size:12px;color:#8a93a8;line-height:1.4}
.deploy-dd .dd-badge{font-size:11px;padding:1px 7px;border-radius:99px;background:rgba(52,211,153,.15);color:#34d399}
.deploy-dd .dd-badge-safari{background:rgba(148,163,184,.15);color:#94a3b8}
/* 移动端菜单内：按钮块级、面板静态展开在菜单流内（取消过渡与浮层定位） */
.deploy-dd.mobile-deploy,.mobile-menu .deploy-dd{display:block}
.deploy-dd.mobile-deploy .nav-btn,.mobile-menu .deploy-dd .nav-btn{width:100%;text-align:left;color:#a0a0b8;font-size:1rem;padding:.75rem 0;border-bottom:1px solid rgba(255,255,255,.05)}
.deploy-dd.mobile-deploy .dd-panel,.mobile-menu .deploy-dd .dd-panel{
position:static;transform:none!important;margin:.5rem 0 0;min-width:0;background:rgba(0,240,255,.04);box-shadow:none;max-height:none;overflow:visible;
opacity:1!important;visibility:visible!important;pointer-events:auto;transition:none;
}
/* 移动端菜单：独立滚动容器（fixed/sticky 导航栏超出视口后底部内容不可达），点"部署"后滚动定位到顶部 */
.mobile-menu.active{max-height:calc(100vh - 76px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.mobile-menu .dd-item{padding:10px 8px}
/* ===== 无 reveal 滚动 JS：内容默认可见（SSR/CSR 均不依赖 IntersectionObserver）===== */
.reveal{opacity:1;transform:none}
/* ===== 分享栏零 JS 折叠（SSR 公开页无脚本时展开分享二维码弹层）===== */
.share-container details summary{list-style:none;cursor:pointer}
.share-container details summary::-webkit-details-marker{display:none}
.share-container .share-modal{opacity:0;pointer-events:none;transform:scale(.95);transition:opacity .2s ease,transform .2s ease}
.share-container details[open] .share-modal{opacity:1;pointer-events:auto;transform:scale(1)}
#share-container{opacity:1;transform:translateX(0)}
/* ===== SSR 首页自持样式（原 head 内联，迁入单一样式真源；particle 交 canvas、reveal 见文末）===== */
html,body{margin:0;padding:0;min-height:100vh;scroll-behavior:smooth;background:#050510}
body{isolation:isolate}
main,.container,.hero,section,.footer{position:relative;z-index:1}
from{opacity:.6}
to{opacity:1}
.share-container details summary{list-style:none;cursor:pointer}
.share-container details summary::-webkit-details-marker{display:none}
.share-container details[open] .share-modal{opacity:1;pointer-events:auto;transform:scale(1)}
.share-container .share-modal{opacity:0;pointer-events:none;transform:scale(.95);transition:opacity .2s ease,transform .2s ease}
#share-container{opacity:1;transform:translateX(0)}
/* 回顶按钮：默认隐藏，滚动超过阈值后由 JS/wasm 加 .visible 显示。
必须置于 .share-container 之外，否则 dock 的 transform 会建立包含块，
把 position:fixed 锁死在左侧窄胶囊里。 */
#back-to-top{position:fixed;bottom:2rem;right:2rem;z-index:1000;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--bg-card);border:1px solid rgba(0,240,255,.2);border-radius:50%;color:var(--accent-cyan);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(20px);transition:opacity .3s ease,transform .3s ease,visibility .3s ease;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);text-decoration:none}
#back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0)}
#back-to-top:hover{background:rgba(0,240,255,.15);border-color:var(--accent-cyan);box-shadow:var(--glow-cyan);transform:translateY(-3px)}
@media(max-width:768px){#back-to-top{bottom:5rem;right:1rem;width:44px;height:44px}}
/* ===== 博客块：呼应星空霓虹主题的发光卡片 ===== */
.blog-section{position:relative;padding:6rem 1.5rem 2rem;scroll-margin-top:4rem}
.blog-section .blog-inner{max-width:1140px;margin:0 auto}
.blog-section .section-header{text-align:center;margin-bottom:2.6rem}
.blog-section .section-label{display:inline-block;font-size:.78rem;letter-spacing:.22em;color:var(--accent-cyan,#00f0ff);border:1px solid rgba(0,240,255,.3);padding:.35rem 1rem;border-radius:999px;background:rgba(0,240,255,.06);margin-bottom:.9rem}
.blog-section .section-title{font-size:2rem;margin:0 0 .5rem;color:#fff;background:linear-gradient(90deg,#eaf6ff,#7fd7ff 55%,#ffd0ea);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1.3}
.blog-section .section-desc{color:#8aa4c8;margin:0;font-size:.95rem}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.6rem}
.blog-card{position:relative;display:flex;flex-direction:column;padding:1.9rem 1.9rem 1.7rem;border-radius:18px;background:linear-gradient(165deg,rgba(22,33,64,.6),rgba(8,12,24,.82));border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 20px 44px rgba(0,0,0,.42);transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease}
.blog-card::before{content:\"\";position:absolute;inset:0;border-radius:18px;padding:1px;background:linear-gradient(135deg,rgba(0,240,255,.75),rgba(255,45,120,.4) 55%,rgba(168,85,247,.5));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;opacity:.55;pointer-events:none;transition:opacity .35s ease}
.blog-card:hover{transform:translateY(-7px);border-color:rgba(0,240,255,.35);box-shadow:0 30px 60px rgba(0,240,255,.16),inset 0 1px 0 rgba(255,255,255,.1)}
.blog-card:hover::before{opacity:1}
.blog-card h3{margin:0 0 .6rem;font-size:1.28rem;line-height:1.42;font-weight:700}
.blog-card h3 a{color:#fff;text-decoration:none;background:linear-gradient(90deg,#eaf6ff,#b6e6ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;transition:filter .3s ease}
.blog-card h3 a:hover{filter:drop-shadow(0 0 12px rgba(0,240,255,.55));text-decoration:none}
.blog-meta{display:flex;flex-wrap:wrap;gap:.4rem .7rem;align-items:center;margin-bottom:.9rem;font-size:.78rem;color:#8aa4c8}
.blog-meta .dot{width:3px;height:3px;border-radius:50%;background:#ff2d78}
.blog-tags{display:flex;flex-wrap:wrap;gap:.4rem}
.blog-tag{padding:.18rem .68rem;border-radius:999px;font-size:.72rem;border:1px solid rgba(0,240,255,.28);color:#7fe7ff;background:rgba(0,240,255,.07)}
.blog-tag.tag-cyan{border-color:rgba(0,240,255,.28);color:#7fe7ff}
.blog-tag.tag-pink{border-color:rgba(255,45,120,.28);color:#ff9ac2}
.blog-tag.tag-gold{border-color:rgba(240,198,116,.3);color:#f7d794}
.blog-tag.tag-green{border-color:rgba(120,255,200,.28);color:#93f5c8}
.blog-tag.tag-purple{border-color:rgba(168,85,247,.3);color:#cdb0ff}
.blog-card p.blog-summary{margin:0 0 1.4rem;color:#c6d3e8;font-size:.95rem;line-height:1.75;flex:1}
.blog-read{padding:.9rem 0 0;border-top:1px solid rgba(255,255,255,.08);color:#8aa4c8;font-size:.86rem;text-decoration:none;display:inline-flex;align-items:center;gap:.45rem;transition:color .3s ease}
.blog-read .arr{transition:transform .3s ease}
.blog-card:hover .blog-read .arr{transform:translateX(4px)}
.blog-read:hover{color:#00f0ff;text-decoration:none}
.blog-more{margin-top:2.8rem;text-align:center}
.blog-more a{display:inline-block;padding:.75rem 2.2rem;border-radius:999px;color:#021219;font-weight:700;text-decoration:none;background:linear-gradient(90deg,#00f0ff,#7c5cff);box-shadow:0 6px 24px rgba(0,240,255,.3);transition:transform .3s ease,box-shadow .3s ease}
.blog-more a:hover{transform:translateY(-2px);box-shadow:0 10px 36px rgba(0,240,255,.5);text-decoration:none}
.blog-card,.blog-card h3 a,.blog-card:hover,.blog-more a{transition:none;transform:none}
/* ===== 分享弹层（微信好友 / 朋友圈 / 抖音；深空玻璃面板，与站点主题统一）===== */
/* details 展开即显示遮罩（修复旧版仅切 opacity、display:none 永不显示的问题）*/
.share-container details[open] .share-modal { display: flex; }
/* dock 容器常驻 transform/backdrop-filter（含 #share-container 的 translateX(0)，
identity matrix 同样会建立包含块），会把内部 fixed 弹层锁死在左侧窄胶囊里。
弹层打开期间解除二者，让 .share-modal 相对视口全屏；桌面端用 top 补偿抵消
translateY(-50%)，dock 视觉位置不动。ID 选择器压过旧 #share-container 规则 */
#share-container:has(details[open]) {
transform: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
@media (min-width: 769px) {
#share-container:has(details[open]) {
top: calc(50% - 60px);
}
}
.share-panel {
width: min(92vw, 34rem); max-height: 86vh; overflow-y: auto;
padding: 1.6rem 1.5rem 1.4rem; text-align: left;
background: rgba(10,14,26,.94);
border: 1px solid rgba(0,240,255,.28); border-radius: 18px;
box-shadow: 0 24px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.1);
-webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
}
.share-panel h3 {
margin: 0 0 .45rem; text-align: center;
font-size: 1.2rem; font-weight: 700; color: #fff;
background: linear-gradient(90deg,#eaf6ff,#9fd9ff 55%,#ffd0ea);
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.share-panel > p { margin: 0 0 .9rem; text-align: center; color: #b9c8dc; font-size: .86rem; line-height: 1.7; }
.share-panel p.wx-env { display: none; margin-bottom: .9rem; padding: .7rem .9rem; border-radius: 10px; font-size: .84rem; line-height: 1.65; }
.share-panel p.wx-env-web { display: block; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); color: #b9c8dc; }
html.in-wechat .share-panel p.wx-env-web { display: none; }
html.in-wechat .share-panel p.wx-env-app {
display: block; color: #b8f5d0;
background: rgba(7,193,96,.1); border: 1px solid rgba(7,193,96,.35);
}
.share-panel p.wx-env-app b, .share-panel p.wx-env-app strong { color: #7fffb8; }
.share-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin: 0 0 1rem; }
@media (max-width: 520px) { .share-grid { grid-template-columns: 1fr; } }
.share-step-card {
border: 1px solid rgba(255,255,255,.1); border-radius: 12px;
padding: .85rem .9rem .8rem; background: rgba(255,255,255,.03);
}
.share-step-card .ssc-head { display: flex; align-items: center; gap: .45rem; margin-bottom: .45rem; }
.share-step-card .ssc-icon { font-size: 1.05rem; line-height: 1; }
.share-step-card .ssc-head b { color: #eaf6ff; font-size: .9rem; font-weight: 650; }
.share-step-card ol { margin: 0; padding-left: 1.15rem; color: #b9c8dc; font-size: .8rem; line-height: 1.75; }
.share-step-card ol li { margin: .15rem 0; }
.share-url-row { display: flex; gap: .5rem; align-items: stretch; margin: .2rem 0 .7rem; }
.share-url-row code {
flex: 1 1 auto; min-width: 0; display: flex; align-items: center;
padding: .5rem .7rem; border-radius: 9px; font-size: .74rem;
color: #8ff0ff; background: rgba(0,240,255,.08); border: 1px solid rgba(0,240,255,.16);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.share-copy {
flex-shrink: 0; padding: .5rem 1.05rem; border: 0; border-radius: 9px;
color: #fff; font-size: .84rem; font-weight: 650; cursor: pointer;
background: linear-gradient(90deg,#07c160,#0aad5a);
box-shadow: 0 6px 18px rgba(7,193,96,.28);
transition: transform .15s ease, box-shadow .15s ease;
}
.share-copy.dy-copy { background: linear-gradient(90deg,#fe2c55,#25f4ee 220%); box-shadow: 0 6px 18px rgba(254,44,85,.28); }
.share-copy:hover { transform: translateY(-1px); }
.share-copy.is-done { background: #0a8f4d; box-shadow: none; }
.share-copy.dy-copy.is-done { background: #c21f40; }
/* 微博「去微博分享」主操作按钮：微博红渐变 */
.share-weibo-go {
display: inline-flex; align-items: center; justify-content: center;
width: 100%; margin: 0 0 .55rem; padding: .62rem 1rem; border-radius: 999px;
color: #fff; font-size: .88rem; font-weight: 700; text-decoration: none; cursor: pointer;
background: linear-gradient(90deg,#e6162d,#ff4d6f);
box-shadow: 0 8px 24px rgba(230,22,45,.28);
transition: transform .2s ease, box-shadow .2s ease;
}
.share-weibo-go:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(230,22,45,.42); text-decoration: none; color: #fff; }
/* 系统原生分享（支持 navigator.share 的手机浏览器才显示）*/
.share-native {
display: none; width: 100%; justify-content: center;
margin: 0 0 .7rem; padding: .62rem 1rem; border-radius: 999px; cursor: pointer;
color: #021219; font-size: .88rem; font-weight: 700; border: 0;
background: linear-gradient(90deg,#00f0ff,#7c5cff);
box-shadow: 0 8px 24px rgba(0,240,255,.28);
transition: transform .2s ease, box-shadow .2s ease;
}
.share-native:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(0,240,255,.42); }
html.js-share-ok .share-native { display: inline-flex; }
.share-dy-title {
margin: 0; text-align: center; color: #6f86a6; font-size: .74rem;
border-top: 1px solid rgba(255,255,255,.07); padding-top: .7rem;
}
.share-noscript-note { margin: 0; text-align: center; color: #6f86a6; font-size: .72rem; }
/* ============================================================
移动端性能降级（2026-09-13，iPhone 流畅性专项）
触发：≤768px。桌面端规则一律不动。
思路：① 大面积 blur(80px) 光斑直接隐藏；② 所有无限动画停止；
③ backdrop-filter 毛玻璃换近不透明实色——粒子 canvas 逐帧变化时，
毛玻璃要对背景逐帧重采样，是 iOS 滚动掉帧的叠加主因。
2026-10-24 解死（画质档闭环）：所有降级规则加 html:not([data-hq]) 门控
——behaviors.js 能力探测（GPU/核数）为强机时注入 data-hq，窄屏旗舰
保留全特效；弱机无标记照旧降级。视口不再单独裁决画质。
============================================================ */
@media (max-width: 768px) {
/* ① 两个 500px blur(80px) 漂移光斑：隐藏，不再持续光栅化 */
html:not([data-hq]) .hero-glow-1, html:not([data-hq]) .hero-glow-2 { display: none; }
/* ② 无限装饰动画全部停止（渐变标题保留静态渐变） */
html:not([data-hq]) .logo-ring, html:not([data-hq]) .footer-ring { animation: none; }
html:not([data-hq]) .title-highlight { animation: none; }
html:not([data-hq]) .badge-dot { animation: none; }
html:not([data-hq]) .scroll-hint { animation: none; }
html:not([data-hq]) .scroll-line { animation: none; }
html:not([data-hq]) .comparison-arrow { animation: none; }
/* ③ 毛玻璃 → 近不透明实色（可读性不降，省掉逐帧背景重采样） */
html:not([data-hq]) .navbar, html:not([data-hq]) .site-header {
background: rgba(5, 5, 16, .94);
backdrop-filter: none; -webkit-backdrop-filter: none;
}
html:not([data-hq]) .footer {
background: rgba(5, 5, 16, .94);
backdrop-filter: none; -webkit-backdrop-filter: none;
}
html:not([data-hq]) .intro-card, html:not([data-hq]) .summary-card {
background: rgba(12, 14, 32, .94);
backdrop-filter: none; -webkit-backdrop-filter: none;
}
html:not([data-hq]) .blog-card {
background: linear-gradient(165deg, rgba(22, 33, 64, .92), rgba(8, 12, 24, .96));
backdrop-filter: none; -webkit-backdrop-filter: none;
}
html:not([data-hq]) .share-container, html:not([data-hq]) .share-panel,
html:not([data-hq]) .toc-fab, html:not([data-hq]) .post-page .back,
html:not([data-hq]) #back-to-top, html:not([data-hq]) .back-to-top {
background: rgba(10, 12, 24, .88);
backdrop-filter: none; -webkit-backdrop-filter: none;
}
html:not([data-hq]) .share-modal.active { backdrop-filter: none; }
}
/* ============================================================
iOS 独立 PWA（添加到主屏幕）安全区适配 2026-09-13
viewport-fit=cover + black-translucent 下内容铺满整个屏幕，
固定/吸顶元素必须让出刘海、灵动岛、Home 指示条的位置。
env() 在普通浏览器中为 0，max() 保证常规内边距不受影响。
============================================================ */
.navbar {
padding-top: max(1rem, env(safe-area-inset-top));
padding-left: max(2rem, env(safe-area-inset-left));
padding-right: max(2rem, env(safe-area-inset-right));
}
.header-inner {
padding-top: max(.9rem, env(safe-area-inset-top));
padding-left: max(1.2rem, env(safe-area-inset-left));
padding-right: max(1.2rem, env(safe-area-inset-right));
}
/* SSR 内页通用 header.site（/posts /drogon /ros2 /tags 等 PublicLayout
直出页；CSR 接管后同样类名）。详情页 .post-page>header.site 另有更细规则。 */
header.site {
padding-top: max(.4rem, env(safe-area-inset-top));
padding-left: max(1.2rem, env(safe-area-inset-left));
padding-right: max(1.2rem, env(safe-area-inset-right));
}
/* SSR 内页页脚 + 首页页脚：避开 Home 指示条与横屏左右圆角 */
footer.site {
padding-left: max(0rem, env(safe-area-inset-left));
padding-right: max(0rem, env(safe-area-inset-right));
padding-bottom: calc(1.2rem + env(safe-area-inset-bottom));
}
.footer {
padding-left: max(2rem, env(safe-area-inset-left));
padding-right: max(2rem, env(safe-area-inset-right));
padding-bottom: calc(2rem + env(safe-area-inset-bottom));
}
/* 阅读进度条/skip-link 贴顶，独立模式下移到状态栏下缘 */
.reading-progress { top: env(safe-area-inset-top); }
.skip-link { top: env(safe-area-inset-top); }
/* 后台页（内联基础 CSS 同特异性在后，html 前缀提升一级确保生效） */
html body.admin {
padding-top: max(2rem, calc(.6rem + env(safe-area-inset-top)));
padding-left: max(1rem, env(safe-area-inset-left));
padding-right: max(1rem, env(safe-area-inset-right));
padding-bottom: max(4rem, calc(1rem + env(safe-area-inset-bottom)));
}
/* 移动端吸底元素避开 Home 指示条（≤768px 时它们贴底） */
@media (max-width: 768px) {
.share-container { bottom: calc(.75rem + env(safe-area-inset-bottom)); }
.back-to-top, #back-to-top { bottom: calc(5rem + env(safe-area-inset-bottom)); }
.footer {
padding-left: max(1.2rem, env(safe-area-inset-left));
padding-right: max(1.2rem, env(safe-area-inset-right));
}
}
/* ============================================================
全屏安装中心（2026-09-13）.ic-* —— 部署是本站的核心亮点：
沉浸式全屏、设备画像、实时自检、平台动画示意、QR 桥接。
仅 transform/opacity 动画；≤768px 纵向布局；支持安全区。
============================================================ */
.ic-overlay {
position: fixed; inset: 0; z-index: 100;
overflow-y: auto; -webkit-overflow-scrolling: touch;
background:
radial-gradient(900px 500px at 80% -10%, rgba(0,240,255,.10), transparent 60%),
radial-gradient(800px 500px at 10% 110%, rgba(255,45,120,.10), transparent 60%),
rgba(4,6,14,.92);
-webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
opacity: 0; transition: opacity .28s ease;
}
.ic-overlay.open { opacity: 1; }
.ic-page {
position: relative;
width: 100%; max-width: 920px; margin: 0 auto;
min-height: 100%;
padding: max(22px, calc(10px + env(safe-area-inset-top))) max(32px, env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) max(32px, env(safe-area-inset-left));
transform: translateY(22px) scale(.985);
transition: transform .42s cubic-bezier(.2,.9,.25,1.05);
}
.ic-overlay.open .ic-page { transform: none; }
/* 顶栏 */
.ic-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.ic-logo {
display: inline-flex; align-items: center; gap: 7px;
border: 0; background: transparent; cursor: pointer;
font-size: 1.05rem; font-weight: 700; color: #dfe8f6; letter-spacing: .02em;
}
.ic-bolt {
display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px;
background: linear-gradient(135deg, rgba(0,240,255,.2), rgba(255,45,120,.2));
border: 1px solid rgba(0,240,255,.35); font-size: .85rem;
}
.ic-close {
width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05);
color: #c6d0e2; font-size: 14px;
display: grid; place-items: center;
transition: background .2s, transform .2s;
}
.ic-close:hover { background: rgba(255,255,255,.13); transform: rotate(90deg); }
/* Hero */
.ic-hero { text-align: center; margin-bottom: 22px; }
.ic-title {
margin: 0 0 8px; font-size: clamp(1.7rem, 4.5vw, 2.5rem); font-weight: 800;
letter-spacing: .01em; color: #eef3fb;
}
.ic-title span {
background: linear-gradient(135deg, #00f0ff, #a855f7 55%, #ff2d78);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.ic-sub { margin: 0 0 12px; color: #8a93a8; font-size: .92rem; }
.ic-device {
display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px;
padding: 6px 14px; border-radius: 99px; font-size: .82rem;
color: #9eeef5; background: rgba(0,240,255,.08); border: 1px solid rgba(0,240,255,.25);
}
.ic-checks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ic-check {
font-size: .76rem; padding: 5px 12px; border-radius: 99px;
border: 1px solid rgba(255,255,255,.1); color: #7c869c; background: rgba(255,255,255,.03);
transition: all .35s ease;
}
.ic-check.run { color: #9aa4b8; border-color: rgba(255,255,255,.16); }
.ic-check.run::before { content: ""; }
.ic-check.ok { color: #6ee7b7; border-color: rgba(52,211,153,.4); background: rgba(52,211,153,.1); }
.ic-check.bad { color: #fca5a5; border-color: rgba(248,113,113,.4); background: rgba(248,113,113,.1); }
/* 平台 tabs */
.ic-tabs { display: flex; gap: 8px; justify-content: center; margin: 22px 0 26px; flex-wrap: wrap; }
.ic-tab {
position: relative; display: inline-flex; align-items: center; gap: 7px;
padding: 9px 17px; border-radius: 99px; cursor: pointer;
font-size: .88rem; color: #9aa4b8;
background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
transition: color .25s, background .25s, border-color .25s, transform .15s;
}
.ic-tab:hover { color: #e6edf7; transform: translateY(-1px); }
.ic-tab.active {
color: #05121a; font-weight: 700;
background: linear-gradient(135deg, #00f0ff, #67e8f9 60%, #b08cff);
border-color: transparent;
box-shadow: 0 8px 26px rgba(0,240,255,.3);
}
.ic-tab-ic { font-size: 1rem; }
.ic-tab.is-current:not(.active) .ic-tab-ic::after {
content: "•"; position: absolute; top: 4px; right: 8px; color: #34d399; font-size: 1rem;
}
/* 主体双栏 */
.ic-main {
display: grid; grid-template-columns: 1.05fr .95fr; gap: 22px; align-items: stretch;
}
.ic-stage {
border-radius: 20px; padding: 14px;
background: linear-gradient(165deg, rgba(18,24,44,.85), rgba(8,11,22,.9));
border: 1px solid rgba(255,255,255,.08);
display: grid; place-items: center; min-height: 240px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.ic-anim { width: 100%; max-width: 340px; height: auto; }
/* SVG 示意配色 */
.ia-frame { fill: none; stroke: rgba(255,255,255,.16); stroke-width: 1.5; }
.ia-screen { fill: rgba(255,255,255,.03); }
.ia-bar, .ia-bar2 { fill: rgba(255,255,255,.07); }
.ia-tx { fill: #5d6a85; font-size: 11px; text-anchor: middle; }
.ia-dot { fill: rgba(255,255,255,.12); }
.ia-dot-r { fill: #ff5f57; } .ia-dot-y { fill: #febc2e; } .ia-dot-g { fill: #28c840; }
.ia-chrome { fill: rgba(255,255,255,.07); }
.ia-url { fill: rgba(255,255,255,.1); }
.ia-share-bg, .ia-more-bg, .ia-pin-bg { fill: rgba(0,240,255,.16); stroke: none; }
.ia-share-ic { fill: none; stroke: #67e8f9; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ia-dot-w { fill: #cdeffd; }
.ia-pin-x { stroke: #67e8f9; stroke-width: 2; stroke-linecap: round; }
.ia-ring {
fill: none; stroke: #00f0ff; stroke-width: 1.5;
transform-box: fill-box; transform-origin: center;
animation: ia-ring 1.8s ease-out infinite;
}
@keyframes ia-ring {
0% { opacity: .9; transform: scale(.8); }
100% { opacity: 0; transform: scale(2.1); }
}
.ia-sheet-bg, .ia-menu { fill: #10162a; stroke: rgba(0,240,255,.3); stroke-width: 1; }
.ia-sheet-ic { fill: rgba(0,240,255,.18); }
.ia-plus { fill: #67e8f9; font-size: 15px; text-anchor: middle; font-weight: 700; }
.ia-sheet-l1 { fill: rgba(255,255,255,.55); }
.ia-sheet-l2 { fill: rgba(255,255,255,.25); }
.ia-sheet-hi { fill: rgba(0,240,255,.16); stroke: rgba(0,240,255,.5); stroke-width: 1; }
.ia-sheet-ht { fill: #9eeef5; font-size: 8.5px; text-anchor: middle; }
.ia-sheet-ht.sm { font-size: 10px; }
.ia-sheet-ht.ia-txs { font-size: 7.4px; }
.ia-tl { fill: #9eeef5; font-size: 7px; text-anchor: start; animation: ia-hi 3.6s ease-in-out infinite; }
.ia-tl.lg { font-size: 8px; }
.ia-sw12 { stroke-width: 1.2; }
.ia-sw13 { stroke-width: 1.3; }
.ia-sw18 { stroke-width: 1.8; }
.ia-menu-l { fill: rgba(255,255,255,.45); }
.ia-sheet { opacity: 0; animation: ia-sheet-in 3.6s ease-in-out infinite; }
.ia-menu { opacity: 0; transform-box: fill-box; transform-origin: top right; animation: ia-menu-in 3.2s ease-in-out infinite; }
.ia-sheet-hi, .ia-sheet-ht { animation: ia-hi 3.6s ease-in-out infinite; }
.ia-menu .ia-sheet-hi, .ia-menu .ia-sheet-ht { animation-name: ia-hi-m; animation-duration: 3.2s; }
@keyframes ia-sheet-in {
0%, 22% { opacity: 0; transform: translateY(8px); }
34%, 92% { opacity: 1; transform: none; }
100% { opacity: 0; transform: translateY(6px); }
}
@keyframes ia-menu-in {
0%, 20% { opacity: 0; transform: scaleY(.6); }
32%, 90% { opacity: 1; transform: scaleY(1); }
100% { opacity: 0; }
}
@keyframes ia-hi {
0%, 46% { fill: rgba(0,240,255,.16); }
52%, 62% { fill: rgba(0,240,255,.4); }
70%, 86% { fill: rgba(0,240,255,.16); }
}
@keyframes ia-hi-m {
0%, 42% { fill: rgba(0,240,255,.16); }
50%, 62% { fill: rgba(0,240,255,.42); }
70%, 84% { fill: rgba(0,240,255,.16); }
}
.ia-finger {
fill: rgba(255,255,255,.9);
filter: drop-shadow(0 0 7px rgba(0,240,255,.75));
transform-box: fill-box; transform-origin: center;
animation: ia-tap 1.15s ease-in-out infinite;
}
@keyframes ia-tap { 0%, 100% { transform: scale(1); } 45% { transform: scale(.62); } }
/* ── iOS 分步联动动画（2026-09-13）────────────────────────────
.ia-ph 图层默认隐藏，由 .ic-stage[data-stage="0..3|done"]
精确显示当前步骤对应的那一幕，跟着用户勾选进度走。 */
.ic-stage .ia-ph { display: none; }
.ic-stage[data-stage="0"] .ia-ph-0,
.ic-stage[data-stage="1"] .ia-ph-1,
.ic-stage[data-stage="2"] .ia-ph-2,
.ic-stage[data-stage="3"] .ia-ph-3,
.ic-stage[data-stage="done"] .ia-ph-d { display: block; }
.ic-stage[data-stage="done"] .ia-base { opacity: .18; transition: opacity .3s ease; }
.ia-dots-bg { fill: rgba(0,240,255,.22); }
.ia-ref { font-size: 11px; }
.ia-stage-t {
fill: #9beef7; font-size: 9.5px; font-weight: 600; text-anchor: middle;
paint-order: stroke; stroke: rgba(6,9,18,.85); stroke-width: 2.5px;
}
.ia-sep { stroke: rgba(255,255,255,.12); stroke-width: 1; }
.ia-scroll {
fill: #67e8f9; font-size: 11px; text-anchor: middle;
animation: ia-bob 1.2s ease-in-out infinite;
}
@keyframes ia-bob { 0%,100% { transform: translateY(-2px); opacity: .65; } 50% { transform: translateY(2.5px); opacity: 1; } }
/* 弹层：菜单/确认框轻微弹出；共享面板自底部升起 */
.ia-pop { transform-box: fill-box; transform-origin: bottom right; animation: ia-pop .34s cubic-bezier(.2,.9,.3,1.3) both; }
.ia-sheetup { animation: ia-sheet-up .42s cubic-bezier(.2,.8,.25,1) both; }
@keyframes ia-pop { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ia-sheet-up { from { transform: translateY(26px); opacity: 0; } to { transform: none; opacity: 1; } }
/* 阶段内高亮项常亮（不再跟随旧循环），轻微呼吸即可 */
.ia-hi-on { animation: ia-breathe 1.8s ease-in-out infinite; }
@keyframes ia-breathe { 0%,100% { stroke-opacity: .5; } 50% { stroke-opacity: 1; } }
/* 完成幕：主屏幕 App 图标 + 对勾 */
.ia-appic { fill: rgba(0,240,255,.28); stroke: rgba(0,240,255,.65); stroke-width: 1; }
.ia-bolt { font-size: 11px; text-anchor: middle; }
.ia-bolt-sm { font-size: 8.5px; text-anchor: middle; }
.ia-doneck { fill: rgba(52,211,153,.92); animation: ia-pop .4s .25s cubic-bezier(.2,.9,.3,1.5) both; }
.ia-done-tick {
fill: none; stroke: #061018; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
opacity: 0; animation: ia-tick .3s .55s both;
}
@keyframes ia-tick { from { opacity: 0; } to { opacity: 1; } }
.ia-bubble { fill: #10162a; stroke: rgba(0,240,255,.4); stroke-width: 1; opacity: 0; animation: ia-bubble 3s ease-in-out infinite; }
.ia-bubble-t { fill: #9eeef5; font-size: 10px; text-anchor: middle; opacity: 0; animation: ia-bubble 3s ease-in-out infinite; }
.ia-bubble-line { fill: none; stroke: rgba(0,240,255,.5); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 3 3; opacity: 0; animation: ia-bubble 3s ease-in-out infinite; }
@keyframes ia-bubble { 0%, 25% { opacity: 0; } 45%, 80% { opacity: 1; } 100% { opacity: 0; } }
.ia-dock-bg { fill: rgba(255,255,255,.1); }
.ia-dock-i { fill: rgba(255,255,255,.14); }
.ia-dock-i.new { fill: rgba(0,240,255,.25); }
.ia-dock-b { font-size: 9px; text-anchor: middle; }
.ia-bounce { animation: ia-bounce 2.4s ease-in-out infinite; }
.ia-dock-i.new { animation: ia-land 2.4s ease-in-out infinite; }
@keyframes ia-bounce { 0%, 100% { transform: none; } 30% { transform: translateY(-7px); } 45% { transform: none; } 60% { transform: translateY(-3px); } }
@keyframes ia-land { 0%, 55% { transform: translateY(-14px) scale(.7); opacity: 0; } 70% { transform: translateY(2px) scale(1.05); opacity: 1; } 80%,100% { transform: none; opacity: 1; } }
/* 步骤面板 */
.ic-panel { display: flex; flex-direction: column; }
.ic-banner {
border-radius: 12px; padding: 10px 14px; font-size: .82rem; line-height: 1.55; margin-bottom: 14px;
}
.ic-banner.ok { background: rgba(52,211,153,.12); border: 1px solid rgba(52,211,153,.35); color: #6ee7b7; }
.ic-banner.warn { background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.38); color: #fcd34d; }
.ic-steps { list-style: none; margin: 0 0 18px; padding: 0; }
.ic-step {
position: relative; display: flex; align-items: flex-start; gap: 12px;
padding: 12px 12px; border-radius: 12px; cursor: pointer;
border: 1px solid transparent;
transition: background .25s, border-color .25s;
}
.ic-step:hover { background: rgba(255,255,255,.04); }
.ic-step.current { background: rgba(0,240,255,.06); border-color: rgba(0,240,255,.18); }
.ic-step-n {
flex: none; width: 28px; height: 28px; border-radius: 50%; margin-top: 1px;
display: grid; place-items: center; font-size: .82rem; font-weight: 700;
color: #7eeaf2; background: linear-gradient(135deg, rgba(0,240,255,.16), rgba(255,45,120,.14));
border: 1px solid rgba(0,240,255,.4);
transition: all .3s;
}
.ic-step.done .ic-step-n {
background: rgba(52,211,153,.2); border-color: rgba(52,211,153,.6); color: #6ee7b7;
}
.ic-step.done .ic-step-n::before { content: "✓"; }
.ic-step.done .ic-step-n { font-size: 0; }
.ic-step.done .ic-step-n::before { font-size: .82rem; }
.ic-step-t { flex: 1; font-size: .9rem; line-height: 1.65; color: #d3dcea; padding-top: 3px; }
.ic-step.done .ic-step-t { color: #8a93a8; }
.ic-step-check {
flex: none; width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
border: 1px solid rgba(255,255,255,.16); background: transparent; color: transparent;
font-size: .8rem; transition: all .25s;
}
.ic-step:hover .ic-step-check { border-color: rgba(0,240,255,.5); color: rgba(0,240,255,.6); }
.ic-step.done .ic-step-check { background: rgba(52,211,153,.2); border-color: rgba(52,211,153,.55); color: #6ee7b7; }
.ic-cta { display: flex; justify-content: center; min-height: 46px; align-items: center; }
.ic-install {
border: 0; cursor: pointer; border-radius: 99px;
padding: 13px 34px; font-size: .98rem; font-weight: 700; color: #04121a;
background: linear-gradient(135deg, #00f0ff, #67e8f9 55%, #a855f7);
box-shadow: 0 10px 32px rgba(0,240,255,.32);
animation: ic-cta-pulse 2.2s ease-in-out infinite;
transition: transform .15s;
}
.ic-install:hover { transform: translateY(-2px); }
@keyframes ic-cta-pulse {
0%, 100% { box-shadow: 0 10px 32px rgba(0,240,255,.32); }
50% { box-shadow: 0 10px 44px rgba(0,240,255,.55); }
}
.ic-cta-tip { margin: 0; color: #7eeaf2; font-size: .85rem; }
.ic-state-ok {
color: #6ee7b7; font-weight: 600; font-size: .95rem;
padding: 10px 22px; border-radius: 99px; background: rgba(52,211,153,.12);
border: 1px solid rgba(52,211,153,.4);
}
.ic-note { margin: 14px 0 0; font-size: .78rem; line-height: 1.6; color: #7c869c; text-align: center; }
/* 二维码 */
.ic-qr { display: flex; justify-content: center; margin: 28px 0 6px; }
.ic-qr-card {
display: flex; align-items: center; gap: 18px;
padding: 14px 22px 14px 14px; border-radius: 18px;
background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.ic-qr-canvas {
width: 124px; height: 124px; border-radius: 12px; background: #fff; padding: 6px;
display: grid; place-items: center; flex: none; overflow: hidden;
box-shadow: 0 0 24px rgba(255,255,255,.12);
}
.ic-qr-canvas canvas { width: 112px; height: 112px; border-radius: 6px; display: block; }
.ic-qr-spin {
width: 22px; height: 22px; border-radius: 50%;
border: 2.5px solid rgba(0,240,255,.2); border-top-color: #00f0ff;
animation: ia-spin .8s linear infinite;
}
@keyframes ia-spin { to { transform: rotate(360deg); } }
.ic-qr-t { margin: 0 0 4px; font-size: .88rem; color: #dfe8f6; font-weight: 600; }
.ic-qr-u { margin: 0; font-size: .76rem; color: #7c869c; }
/* 技术数据条 */
.ic-meta {
display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px;
margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.07);
}
.ic-meta span { font-size: .76rem; color: #6b7590; }
/* 拖拽把手 */
.ic-handle { display: none; }
/* 庆祝 */
.ic-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ic-confetti i {
position: absolute; width: 8px; height: 8px; border-radius: 2px;
transform: translate(0,0) scale(1);
animation: ic-burst 1.3s cubic-bezier(.15,.6,.3,1) forwards;
}
@keyframes ic-burst {
0% { transform: translate(0,0) scale(1); opacity: 1; }
100% { transform: translate(var(--dx), var(--dy)) scale(.3) rotate(220deg); opacity: 0; }
}
.ic-win {
position: fixed; left: 50%; top: 42%; transform: translate(-50%,-50%) scale(.7);
z-index: 101; text-align: center; opacity: 0;
transition: all .45s cubic-bezier(.2,.9,.3,1.4);
}
.ic-win.show { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.ic-win-ic {
width: 76px; height: 76px; margin: 0 auto 14px; border-radius: 50%;
display: grid; place-items: center; font-size: 2rem; color: #04121a;
background: linear-gradient(135deg, #34d399, #6ee7b7);
box-shadow: 0 0 60px rgba(52,211,153,.55);
}
.ic-win { font-size: 1.3rem; font-weight: 800; color: #eef3fb; }
.ic-win-sub { font-size: .85rem; color: #8a93a8; font-weight: 400; margin-top: 6px; }
/* 移动端：纵向、贴底抽屉感、把手 */
@media (max-width: 768px) {
.ic-page { padding: max(16px, calc(8px + env(safe-area-inset-top))) max(18px, env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); }
.ic-handle {
display: block; width: 42px; height: 4px; border-radius: 2px;
background: rgba(255,255,255,.25); margin: 2px auto 14px;
}
.ic-main { grid-template-columns: 1fr; gap: 18px; }
.ic-stage { min-height: 200px; order: 2; }
.ic-panel { order: 1; }
.ic-qr-card { flex-direction: column; text-align: center; gap: 10px; }
.ic-tabs { gap: 6px; }
.ic-tab { padding: 8px 13px; font-size: .82rem; }
}
/* 安装中心打开时收起页面原有的悬浮件（分享栏/回顶按钮），防止穿透遮挡内容 */
body.ic-open #share-container,
body.ic-open .share-container,
body.ic-open #back-to-top {
opacity: 0 !important; visibility: hidden !important; pointer-events: none !important;
transition: opacity .2s ease;
}
/* 减弱动效：静态展示，不藏内容（图层显隐由 data-stage 控制，与动画无关） */
@media (prefers-reduced-motion: reduce) {
.ic-overlay, .ic-page, .ic-close { transition: none; }
.ia-ring, .ia-finger, .ia-sheet, .ia-menu, .ia-sheet-hi, .ia-sheet-ht, .ia-tl,
.ia-bubble, .ia-bubble-t, .ia-bubble-line, .ia-bounce, .ia-dock-i.new,
.ia-tap, .ia-pop, .ia-sheetup, .ia-scroll, .ia-hi-on, .ia-land, .ia-doneck,
.ic-install, .ic-qr-spin { animation: none; }
.ia-sheet, .ia-menu, .ia-bubble, .ia-bubble-t, .ia-bubble-line { opacity: 1; }
.ia-done-tick { opacity: 1; animation: none; }
.ia-finger { display: none; }
.ic-confetti i { animation: none; display: none; }
}
/* ============================================================
冷启动品牌动画（CSR 薄壳 #main 内的 .boot-hint；SSR 直出有正文不显示）。
深色底 + ⚡ 双色旋转环 + 进度流光，全部 transform/opacity，避免白屏焦虑。
wasm 挂载后 Dioxus 清空 #main（main.rs 同时 remove），动画自动退场。
============================================================ */
.boot-hint { flex-direction: column; gap: 14px; color: #8a93a8; }
.boot-logo {
position: relative; width: 64px; height: 64px;
display: grid; place-items: center;
}
.boot-bolt {
position: relative; z-index: 2; font-size: 30px; line-height: 1;
filter: drop-shadow(0 0 10px rgba(0,240,255,.7));
}
.boot-ring {
position: absolute; inset: 0; border-radius: 50%;
border: 2px solid transparent;
border-top-color: var(--accent-cyan, #00f0ff);
border-right-color: var(--accent-pink, #ff2d78);
animation: logo-spin .9s linear infinite;
}
.boot-word {
font-family: var(--font-display, system-ui, sans-serif);
font-weight: 700; font-size: 15px; letter-spacing: .12em;
color: #d7ecff;
}
.boot-word b { color: var(--accent-cyan, #00f0ff); font-weight: 700; }
.boot-bar {
width: 120px; height: 3px; border-radius: 2px;
background: rgba(255,255,255,.12); overflow: hidden;
}
.boot-bar i {
display: block; height: 100%; width: 38%; border-radius: 2px;
background: linear-gradient(90deg, var(--accent-cyan, #00f0ff), var(--accent-pink, #ff2d78));
animation: boot-slide 1.05s ease-in-out infinite;
}
@keyframes boot-slide {
0% { transform: translateX(-130%); }
100% { transform: translateX(340%); }
}
@media (prefers-reduced-motion: reduce) {
.boot-ring, .boot-bar i { animation: none; }
.boot-bar i { width: 100%; opacity: .7; }
}
/* ============================================================
Phase 3.2：文章修订版本时间线 + 历史存档横幅
============================================================ */
.revision-timeline {
margin: 2.6rem 0 0; padding: 1.3rem 1.5rem;
border: 1px solid rgba(0,240,255,.18); border-radius: 14px;
background: rgba(0,240,255,.04);
}
.revision-timeline .rev-head {
margin: 0 0 .8rem; font-size: .95rem; letter-spacing: .04em;
color: #9fd9e8; font-weight: 700;
}
.revision-timeline .rev-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.revision-timeline .rev-item {
display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
font-size: .9rem; color: rgba(223,246,255,.82);
}
.revision-timeline .rev-link {
color: var(--accent-cyan, #00f0ff); font-weight: 600; text-decoration: none;
border-bottom: 1px dashed rgba(0,240,255,.45);
}
.revision-timeline .rev-link:hover { color: #fff; border-bottom-color: #fff; }
.revision-timeline .rev-current { color: #8affd1; font-weight: 700; }
.revision-timeline .rev-title { color: rgba(223,246,255,.66); }
.revision-timeline .rev-date { margin-left: auto; color: rgba(223,246,255,.45); font-size: .82rem; }
.revision-timeline .revision-warn {
margin: 0 0 .9rem; padding: .6rem .9rem; border-radius: 10px;
color: #ffd9a8; font-size: .85rem;
border: 1px solid rgba(255,176,80,.45); background: rgba(255,140,40,.1);
}
/* 历史版本存档页顶部横幅 */
.archive-banner {
margin: 0 0 2rem; padding: 1.4rem 1.6rem; border-radius: 16px;
border: 1px solid rgba(255,45,120,.28);
background: linear-gradient(145deg, rgba(255,45,120,.08), rgba(0,240,255,.05));
}
.archive-banner .archive-tag {
margin: 0 0 .4rem; font-size: .82rem; font-weight: 700; letter-spacing: .08em;
color: #ff9ecb; text-transform: uppercase;
}
.archive-banner .archive-current { color: #8affd1; }
.archive-banner .archive-date { margin: 0 0 .7rem; color: rgba(223,246,255,.55); font-size: .86rem; }
.archive-banner h1 { margin: 0 0 .8rem; font-size: 1.7rem; line-height: 1.3; }
.archive-banner .archive-cid {
margin: 0; font-size: .78rem; color: rgba(223,246,255,.5); word-break: break-all;
}
.archive-banner .archive-cid code { color: rgba(0,240,255,.85); }
.archive-banner .archive-latest-link { margin: .9rem 0 0; }
.archive-banner .archive-latest-link a { color: var(--accent-cyan, #00f0ff); font-weight: 600; text-decoration: none; }
.archive-banner .archive-latest-link a:hover { color: #fff; }
/* ============================================================
Phase 3.3：决策日志（ADR-lite）索引 + 详情
设计语言对齐 Phase 3.2 修订时间线：青=现行 / 粉=charter / 灰=被取代
============================================================ */
.adr-hero { margin: 1.4rem 0 2.4rem; }
.adr-hero h1 { margin: .1rem 0 .8rem; font-family: var(--font-display); font-weight: 800;
font-size: clamp(1.8rem,3.6vw,2.6rem); line-height: 1.25;
color: #f2fbff; text-shadow: 0 0 24px rgba(0,240,255,.18); }
.adr-lead { margin: 0; max-width: 46rem; color: rgba(223,246,255,.62); font-size: .98rem; line-height: 1.8; }
/* 时间线列表 */
.adr-list { display: grid; gap: .65rem; }
.adr-item { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap;
padding: .95rem 1.15rem; border: 1px solid rgba(255,255,255,.08); border-radius: 12px;
background: rgba(255,255,255,.02); transition: border-color .18s ease, background .18s ease; }
.adr-item:hover { border-color: rgba(0,240,255,.32); background: rgba(0,240,255,.04); }
.adr-badge { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .04em;
color: var(--accent-cyan,#00f0ff); white-space: nowrap; }
.adr-date { color: rgba(223,246,255,.45); font-size: .84rem; font-family: var(--font-mono); }
.adr-link { color: #e9fbff; font-weight: 600; text-decoration: none; }
.adr-link:hover { color: #fff; }
.adr-tag { font-size: .72rem; line-height: 1.6; padding: .1rem .55rem; border-radius: 999px;
letter-spacing: .05em; white-space: nowrap; }
.adr-tag-retro { color: #d8b4fe; border: 1px solid rgba(168,85,247,.4); background: rgba(168,85,247,.1); }
.adr-tag-charter { color: var(--accent-pink,#ff2d78); border: 1px solid rgba(255,45,120,.4);
background: rgba(255,45,120,.08); }
.adr-tag-superseded { color: rgba(223,246,255,.5); border: 1px solid rgba(223,246,255,.18);
background: rgba(223,246,255,.05); }
/* 第 0 号 charter：粉色高亮卡 */
.adr-charter { border-color: rgba(255,45,120,.3);
background: linear-gradient(145deg, rgba(255,45,120,.07), rgba(0,240,255,.03)); }
.adr-charter .adr-badge { color: var(--accent-pink,#ff2d78); }
/* 已被取代：标题划线弱化，整行降透明度 */
.adr-is-superseded { opacity: .72; }
.adr-is-superseded .adr-link { color: rgba(223,246,255,.55); text-decoration: line-through; }
.adr-is-superseded:hover { opacity: 1; }
/* 详情页头 */
.adr-head { margin: 1.2rem 0 2.2rem; }
.adr-meta { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin: 0 0 .9rem; }
.adr-head h1 { margin: 0 0 .8rem; font-family: var(--font-display); font-weight: 800;
font-size: clamp(1.6rem,3vw,2.2rem); line-height: 1.3; color: #f2fbff; }
.adr-decider { margin: 0; color: rgba(223,246,255,.6); font-size: .9rem; }
.adr-supersedes { margin: .7rem 0 0; font-size: .86rem; color: rgba(223,246,255,.55); }
.adr-supersedes a { margin-right: .5rem; color: var(--accent-cyan,#00f0ff); font-family: var(--font-mono);
font-size: .82rem; text-decoration: none; border-bottom: 1px dashed rgba(0,240,255,.45); }
.adr-supersedes a:hover { color: #fff; border-bottom-color: #fff; }
/* 被取代横幅（对齐 .archive-banner 粉调） */
.adr-superseded-banner { margin: 0 0 2rem; padding: 1.1rem 1.4rem; border-radius: 14px;
border: 1px solid rgba(255,45,120,.28);
background: linear-gradient(145deg, rgba(255,45,120,.08), rgba(0,240,255,.04));
color: rgba(223,246,255,.78); font-size: .9rem; line-height: 1.7; }
.adr-superseded-banner a { color: var(--accent-cyan,#00f0ff); font-weight: 600; text-decoration: none; }
.adr-superseded-banner a:hover { color: #fff; }
@media (max-width: 640px) {
.adr-item { padding: .85rem 1rem; gap: .55rem; }
.adr-date { width: 100%; margin-left: 0; }
}
/* ============================================================
详情页品牌口号收尾（PostSlogans：PostNav 之后 / post-foot 之前）
口号：让世界看见你的美 / 让你看见世界的美 / 一起向未来
三色序号延续全站 accent 体系；grid-column 1/-1 独占一行，
不干扰 post-layout 的 head/body/toc/foot 命名区域。
============================================================ */
.post-slogans {
grid-column: 1 / -1;
margin-top: 3rem;
padding-top: 2.2rem;
border-top: 1px solid rgba(0, 240, 255, 0.14);
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: baseline;
gap: 1rem clamp(1.5rem, 4vw, 3.5rem);
}
.post-slogans .slogan-item { display: flex; align-items: baseline; gap: 0.55rem; }
.post-slogans .slogan-index {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.14em;
flex-shrink: 0;
}
.post-slogans .slogan-item.s1 .slogan-index { color: var(--accent-cyan); }
.post-slogans .slogan-item.s2 .slogan-index { color: var(--accent-pink); }
.post-slogans .slogan-item.s3 .slogan-index { color: var(--accent-gold); }
.post-slogans .slogan-text {
font-family: var(--font-display);
font-size: clamp(1rem, 2vw, 1.25rem);
font-weight: 700;
letter-spacing: 0.02em;
color: var(--text-primary);
opacity: 0.92;
}
@media (max-width: 640px) {
.post-slogans {
flex-direction: column;
align-items: flex-start;
gap: 0.85rem;
margin-top: 2.2rem;
padding-top: 1.6rem;
}
}