*{margin:0;padding:0;box-sizing:border-box}
    :root{--bg-card:rgba(255,255,255,0.82);--bg-card-hover:rgba(255,255,255,0.95);--text-primary:#0b1a33;--text-secondary:#334155;--text-muted:#7a8aa3;--accent-deep:#2563eb;--accent-light:rgba(59,130,246,0.10);--shadow-sm:0 2px 8px rgba(0,0,0,0.04);--shadow-md:0 8px 28px rgba(0,0,0,0.06);--shadow-lg:0 20px 48px -8px rgba(0,0,0,0.10);--radius:28px;--transition:all 0.3s cubic-bezier(0.2,0.9,0.4,1.1)}
    body.dark{--bg-page:#0b1120;--bg-card:rgba(30,41,59,0.80);--bg-card-hover:rgba(30,41,59,0.95);--text-primary:#f1f5f9;--text-secondary:#cbd5e1;--text-muted:#7f8ea3;--accent:#60a5fa;--accent-deep:#3b82f6;--accent-light:rgba(96,165,250,0.15);--glass-border:rgba(255,255,255,0.06);--sidebar-shadow:0 0 20px rgba(0,0,0,0.3);--submenu-bg:#1e293b;--contact-card-bg:rgba(30,41,59,0.8)}
    body{font-family:'Inter',sans-serif;background:linear-gradient(135deg,#f0f7fd 0%,#e8f2fa 52%,#e1eefa 100%)!important;color:var(--text-primary);min-height:100vh;line-height:1.6;overflow:auto!important}

    .sidebar{position:fixed;left:0;top:0;width:52px;overflow:hidden;background:var(--sidebar-bg);backdrop-filter:blur(8px);border-right:1px solid var(--glass-border);z-index:100;display:flex;flex-direction:column;height:auto;transform:none;transition:width 0.3s ease 0.13s}
    .sidebar .sidebar-inner{padding:24px 4px;align-items:center}
    .sidebar .nav-item{padding:10px 4px;min-width:0;width:100%;justify-content:center}
    .sidebar .nav-item-wrapper.has-sub > .nav-item{padding-right:4px}
    .sidebar .nav-item-wrapper.has-sub > .nav-item::after{display:none}
    .sidebar:hover .nav-item-wrapper.has-sub > .nav-item{position:relative;padding-right:20px}
    .sidebar:hover .nav-item-wrapper.has-sub > .nav-item::after{display:block}
    .submenu-panel{transition:opacity 0.12s ease-out,transform 0.12s cubic-bezier(.2,.8,.2,1),visibility 0.12s ease-out}
    .sidebar .sidebar-logo img{width:42px;height:42px;border-radius:12px;margin-bottom:0}
    @media(min-width:1001px){
      .sidebar .sidebar-logo-expanded{display:none!important}
      .sidebar .sidebar-logo-collapsed{display:block!important}
      .sidebar:hover .sidebar-logo-expanded{display:block!important}
      .sidebar:hover .sidebar-logo-collapsed{display:none!important}
    }
    .sidebar .sidebar-nav { margin-top: 80px; }
.sidebar .sidebar-footer{padding:8px 4px;display:none}
.sidebar .contact-row{display:none}
.sidebar .qr-row{display:none}
.sidebar .contact-item{padding:6px 4px;gap:0;justify-content:center}
    .sidebar .about-btn{width:100%}
    .sidebar .about-btn .nav-item{padding:10px 4px;min-width:0;width:100%;justify-content:center;gap:0;background:transparent;border:none}
    .sidebar:hover{width:260px;border-radius:0 32px 32px 0;box-shadow:var(--sidebar-shadow)}
    .sidebar:hover .sidebar-inner{padding:clamp(12px,2.5vh,24px) 12px;align-items:stretch}
    .sidebar:hover .sidebar-logo{width:auto}
    .sidebar:hover .sidebar-logo img{width:clamp(50px,10vh,90px);height:clamp(50px,10vh,90px);border-radius:20px;margin-bottom:clamp(6px,1.5vh,12px)}
    .sidebar:hover .sidebar-nav{width:100%;margin-top:0}
    .sidebar:hover .nav-item{padding:clamp(6px,1vh,10px) 20px;min-width:165px;width:auto;gap:10px;justify-content:center}
    .sidebar:hover .nav-item > span{flex:1;text-align:left;margin-left:4px}
    .nav-item span{display:none}.sidebar:hover .nav-item span{display:inline}
    .sidebar:hover .sub-nav{min-width:180px}
    .sidebar:hover .sidebar-footer{width:auto;padding:16px 12px;display:block}
    .sidebar:hover .contact-row{display:flex}
    .sidebar:hover .qr-row{display:flex}
    .sidebar:hover .contact-item{width:30px;height:30px;gap:0}
    .sidebar:hover .about-btn{width:100%;margin-top:8px;display:flex;justify-content:center}
    .sidebar:hover .about-btn .nav-item{padding:10px 20px;justify-content:center;background:var(--accent-light);color:var(--accent);border:1px solid rgba(59,130,246,0.2);font-weight:600;font-size:0.9rem}
    .sidebar:hover .about-btn .nav-item > span{flex:1;text-align:left;margin-left:4px}
    .about-btn .nav-item span{display:none}.sidebar:hover .about-btn .nav-item span{display:inline}

    /* ===== 主内容区（1350px 在右侧居中，仅 tools-detail） ===== */
    .main-wrapper{max-width:1350px;margin-left:max(52px,calc((100% - 1350px + 52px) / 2));margin-right:auto;min-height:100vh;padding:16px 32px 40px;transition:margin-left 0.3s ease;display:flex;flex-direction:column}
    .sidebar:hover~.main-wrapper{margin-left:max(300px,calc((100% - 1350px + 300px) / 2))}

    /* 让 desktop-actions 落在 1350px 内容区右边缘（仅 tools-detail） */
    .desktop-actions{right:max(8px,calc((100vw - 1350px - 52px) / 2))!important}
    .sidebar:hover~.desktop-actions{right:max(8px,calc((100vw - 1350px - 300px) / 2))!important}

    .content-container{flex:1;display:flex;flex-direction:column}

    /* ===== 页面标题（暗色风格，与 mindmap-detail 一致） ===== */
    .info-card{display:block;padding:10px 16px 10px 12px;background:rgba(255,255,255,0.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(0,0,0,0.08);border-radius:24px;margin:0 0 12px 0;width:fit-content;box-shadow:0 8px 30px rgba(0,0,0,0.08)}
    .title-row{display:flex;align-items:center;gap:8px}
    .back-arrow{display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:1.6rem;font-weight:300;color:rgba(0,0,0,0.6);cursor:pointer;border-radius:50%;transition:all 0.25s ease;line-height:1;background:rgba(0,0,0,0.04);text-decoration:none}
    .back-arrow:hover{background:rgba(0,0,0,0.1);color:rgba(0,0,0,0.9);transform:translateX(-3px)}
    .info-card h3{font-size:1rem;font-weight:700;color:rgba(0,0,0,0.85);line-height:1.3}
    .info-card p{font-size:0.75rem;color:rgba(0,0,0,0.55);margin-top:2px;padding-left:40px}

    /* ===== 动态演示内容 ===== */
    .demo-content{flex:1;font-size:1rem;line-height:1.8;margin:0;padding:0;width:100%}
    .demo-content img{max-width:100%;border-radius:var(--radius);margin:1rem 0}
    .demo-content iframe{width:100%;border:none;border-radius:0;min-height:calc(100vh - 140px);display:block}
    .demo-content pre{background:var(--bg-card);border-radius:12px;padding:1.2rem 1.5rem;overflow-x:auto;border:1px solid var(--glass-border);margin:1rem 0}
    .demo-content code{background:var(--accent-light);padding:2px 6px;border-radius:4px;font-size:0.9em}
    .demo-content blockquote{border-left:4px solid var(--accent);padding-left:1rem;margin:1rem 0;color:var(--text-secondary)}

    /* ===== 底部模块容器（与内容等宽） ===== */
    .bottom-modules{max-width:900px;width:100%;margin:0 auto}

    /* ===== 分享按钮（同文章页） ===== */
    .post-share{display:flex;align-items:center;gap:12px;margin:28px 0;padding:16px 0;border-top:1px solid var(--glass-border)}
    .share-label{font-size:0.85rem;color:var(--text-muted);font-weight:500}
    .share-buttons{display:flex;gap:8px}
    .share-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--glass-border);background:var(--bg-card);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition);position:relative;color:var(--text-secondary)}
    .share-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:scale(1.05)}
    .share-btn svg{width:16px;height:16px}
    .share-copy-bubble{position:absolute;top:-28px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;padding:2px 10px;border-radius:20px;font-size:0.65rem;white-space:nowrap;opacity:0;transition:opacity .2s}
    .share-copy-bubble.show{opacity:1}

    /* ===== 打赏模块（同文章页） ===== */
    .post-reward{display:flex;align-items:center;gap:20px;background:var(--bg-card);backdrop-filter:blur(12px);border-radius:var(--radius);border:1px solid var(--glass-border);padding:20px 24px;margin:24px 0}
    .reward-qrcode{flex:0 0 100px;width:100px;height:100px;border-radius:16px;overflow:hidden;background:var(--accent-light)}
    .reward-qrcode img{width:100%;height:100%;object-fit:contain}
    .reward-content{flex:1}
    .reward-title{font-size:0.95rem;font-weight:600;margin-bottom:4px;color:var(--text-primary)}
    .reward-text{font-size:0.8rem;color:var(--text-secondary);margin-bottom:6px}
    .reward-icon svg{width:22px;height:22px;fill:var(--accent);opacity:0.6}

    /* ===== 评论模块（同文章页） ===== */
    .post-comments{margin:32px 0 20px;background:var(--bg-card);backdrop-filter:blur(12px);border-radius:var(--radius);border:1px solid var(--glass-border);box-shadow:var(--shadow-sm);padding:24px}
    .comments-header{display:flex;align-items:center;gap:10px;margin-bottom:20px}
    .comments-header svg{width:22px;height:22px;stroke:var(--accent)}
    .comments-title{font-size:1rem;font-weight:600;color:var(--text-primary)}
    .comments-subtitle{font-size:0.75rem;color:var(--text-muted);margin-left:auto}

    /* ===== 响应式 ===== */
    @media(max-width:1000px){
      .sidebar{display:none;left:auto;right:10px;top:72px;bottom:auto;width:66.666vw;max-width:calc(100vw - 20px);max-height:calc(100vh - 84px);transform:none;border-radius:22px;overflow:auto}
      .sidebar.open{display:flex;transform:none;width:66.666vw}
      .sidebar.open .sidebar-logo{display:none}
      .sidebar.open .sidebar-inner{padding:16px 14px 18px;overflow-y:auto}
      .sidebar.open .sidebar-nav{margin-top:8px;transform:none;gap:8px}
      .sidebar.open .nav-item-wrapper{display:block}
      .sidebar.open .nav-item{width:100%;min-width:0;padding:11px 16px;font-size:.92rem;transform:none!important}
      .sidebar.open .nav-item>span{display:inline}
      .sidebar.open .nav-item-wrapper.has-sub>.nav-item::after{display:block}
      .sidebar.open .nav-item-wrapper.has-sub.open>.sub-nav{display:flex!important;position:static;flex-direction:column;gap:3px;margin:4px 8px 0 18px;padding:4px 0 4px 10px;border-left:2px solid var(--accent-light)}
      .main-wrapper{margin-left:0;padding:4px 16px 20px}.desktop-actions{right:16px!important}
    }
    @media(max-width:600px){.post-reward{flex-direction:column;text-align:center}.reward-qrcode{flex:none}.comments-header{align-items:flex-start}.comments-subtitle{margin-left:0}}

    /* 深色模式：工具容器、说明与辅助模块统一为不透明深蓝层级。 */
    body.dark{background:#0b1120!important}
    body.dark .info-card{background:rgba(15,23,42,.94);border-color:rgba(148,163,184,.2);box-shadow:0 12px 32px rgba(0,0,0,.34)}
    body.dark .back-arrow{background:rgba(148,163,184,.12);color:#cbd5e1}
    body.dark .back-arrow:hover{background:rgba(96,165,250,.2);color:#bfdbfe}
    body.dark .info-card h3{color:#f1f5f9}
    body.dark .info-card p{color:#94a3b8}
    body.dark .demo-content iframe{background:#0f172a;color-scheme:dark}
    body.dark .demo-content pre{background:#0f172a;border-color:rgba(148,163,184,.18)}
    body.dark .post-reward,
    body.dark .post-comments{background:rgba(15,23,42,.82);border-color:rgba(148,163,184,.18);box-shadow:0 12px 28px rgba(0,0,0,.2)}
    body.dark .share-btn{background:rgba(15,23,42,.78);border-color:rgba(148,163,184,.2);color:#cbd5e1}
    body.dark .share-btn:hover{background:#3b82f6;border-color:#60a5fa;color:#fff}