:root {
            --primary: #6366f1; --primary-light: #818cf8; --primary-dark: #4f46e5;
            --bg: #f8fafc; --card-bg: #ffffff; --surface-alt: #f1f5f9; --surface-hover: #eef2ff;
            --text: #1e293b; --text-secondary: #64748b; --border: #e2e8f0; --radius: 12px;
            --warning: #d97706; --warning-bg: #fffbeb; --warning-text: #92400e;
            --success-bg: #d1fae5; --success-text: #065f46; --danger: #dc2626; --danger-bg: #fee2e2; --danger-text: #991b1b;
            --shadow: 0 4px 6px rgba(0,0,0,0.04), 0 2px 4px rgba(0,0,0,0.04);
            --shadow-hover: 0 10px 25px rgba(0,0,0,0.1); --max-width: 1200px; --header-height: 70px;
        }
        html[data-theme="dark"] {
            color-scheme: dark;
            --primary: #818cf8; --primary-light: #a5b4fc; --primary-dark: #c7d2fe;
            --bg: #0f172a; --card-bg: #172033; --surface-alt: #1e293b; --surface-hover: #273449;
            --text: #e5edf8; --text-secondary: #aab8cc; --border: #34445c;
            --warning: #fbbf24; --warning-bg: #3b2f15; --warning-text: #fcd34d;
            --success-bg: #123c34; --success-text: #86efcf; --danger: #f87171; --danger-bg: #482027; --danger-text: #fca5a5;
            --shadow: 0 5px 16px rgba(0,0,0,.25); --shadow-hover: 0 14px 30px rgba(0,0,0,.35);
        }
        * { margin:0; padding:0; box-sizing:border-box; }
        html, body { max-width:100%; overflow-x:clip; }
        img, svg, video, canvas { max-width:100%; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
            background: var(--bg); color: var(--text); line-height: 1.7; display: flex; flex-direction: column; min-height: 100vh;
            transition: background-color .24s ease, color .24s ease;
        }
        a { text-decoration: none; color: var(--primary); transition: 0.2s; }
        a:hover { color: #008ee2;transition: 0.2s;  }
        .container { max-width: var(--max-width); margin: 0 auto; padding: 0 10px; width: 100%; }
        .header { background: var(--card-bg); box-shadow: 0 1px 3px rgba(0,0,0,0.05); height: var(--header-height); display: flex; align-items: center; position: sticky; top: 0; z-index: 100; transition: background-color .24s ease, box-shadow .24s ease; }
        .header .container { display: flex; justify-content: space-between; align-items: center; }
        .logo { display: flex; align-items: center; gap: 8px; font-size: 33px; color: var(--text); }
        .logo img { height: 33px; }
        .logo-text { display: flex; flex-direction: column; }
        .logo-text .title { line-height: 1.2; font-family: 'Zhi Mang Xing', handwriting;}
        .logo-text .subtitle {display: none; font-size: 12px; font-weight: 400; color: var(--text-secondary); }
        .nav-links { display: flex; gap: 20px; align-items: center; list-style: none; margin-left: auto; }
        .header-actions { display: flex; align-items: center; gap: 10px; margin-left: 18px; }
        .nav-links a { color: var(--text); font-weight: 500; font-size: 14px; padding: 6px 0; transition: color 0.2s; }
        .nav-links a:hover, .nav-links a.active { color: var(--primary); }
        .dropdown { position: relative; }
        .dropdown-toggle { cursor: pointer; }
        .dropdown-menu {
            display: block; position: absolute; top: 100%; left: 0; background: var(--card-bg);
            box-shadow: var(--shadow-hover); border-radius: var(--radius); min-width: 100px;
            padding: 8px 0; z-index: 10; opacity: 0; visibility: hidden;
            transform: translateY(-10px); transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
        }
        .dropdown-menu.show { opacity: 1; visibility: visible; transform: translateY(0); }
        .dropdown-menu a { display: block; padding: 8px 0 8px 10px; font-size: 13px; white-space: nowrap; color: var(--text); }
        .dropdown-menu a:hover { background: var(--surface-alt); color: var(--primary); }
        .mobile-menu-btn { display: none; background: none; border: none; font-size: 24px; cursor: pointer; color: var(--text); padding: 8px; }
        .theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 9px; color: var(--text); background: var(--surface-alt); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .2s, border-color .2s, color .2s, transform .2s; }
        .theme-toggle:hover { color: var(--primary); background: var(--surface-hover); border-color: var(--primary-light); }
        .theme-toggle:active { transform: scale(.96); }
        .theme-toggle i { width: 14px; text-align: center; }
        .main { flex: 1; padding: 20px 0; }
        .breadcrumb { font-size: 13px; color: var(--text-secondary); margin: 0 0 15px 10px; display: flex; align-items: center; gap: 8px; }
        .breadcrumb a { color: var(--text-secondary); }
        .breadcrumb a:hover { color: var(--primary); }
        .blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
        .blog-card {
            background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px;
            display: flex; flex-direction: column; align-items: center; text-align: center; transition: 0.25s;
            border: 1px solid var(--border); color: var(--text);
        }
        .blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
        .blog-card img { width: 48px; height: 48px; border-radius: 10px; object-fit: contain; background: #f1f5f9;}
        .blog-card span { font-size: 14px; }
        .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 8px; font-weight: 600; cursor: pointer; transition: 0.2s; border: none; }.alert { display:flex; align-items:flex-start; gap:9px; min-width:0; max-width:100%; margin-bottom:18px; padding:12px 14px; border-radius:10px; overflow:hidden; overflow-wrap:anywhere; word-break:break-word; font-size:13px; line-height:1.6; }.alert > :not(i) { min-width:0; max-width:100%; overflow-wrap:anywhere; word-break:break-word; }.alert i { flex:0 0 auto; margin-top:3px; }
        .btn-primary { background: var(--primary); color: #fff; border: 1px solid var(--primary); }
        .btn-primary:hover {background: #fff; color: var(--primary);}
        .btn-outline { background: #fff; color: var(--primary); border: 1px solid var(--primary); }
        .btn-outline:hover { background: #eef2ff; }
        .snapshot { margin-top: 24px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
        .snapshot img { width: 100%; display: block; }
        .nav-scrim { display: none; }
        @media (max-width: 980px) and (min-width: 769px) {
            .nav-links { gap: 12px; }
            .nav-links a { font-size: 13px; }
            .theme-toggle { padding: 7px 8px; }
            .theme-toggle-label { display: none; }
        }
        @media (max-width: 768px) {
            html.nav-open { overflow:hidden; overscroll-behavior:none; }
            /* body 不能设置 overflow/height，否则会成为新的滚动容器并使 sticky 顶栏在非顶部失效。 */
            body.nav-open { overscroll-behavior:none; }
            .header { height:calc(62px + env(safe-area-inset-top)); padding-top:env(safe-area-inset-top); }
            .header .container { padding: 0 14px; }
            .logo { gap: 5px; font-size: 25px; min-width: 0; }
            .logo img { height: 25px; }
            .logo-text { min-width: 0; }
            .logo-text .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 185px; }
            .logo-text .subtitle { display: none !important; }
            .mobile-menu-btn { display: inline-flex; align-items: center; justify-content: center; width:40px; height:40px; border-radius:12px; color:var(--primary); background:#eef2ff; font-size:18px; transition:background .2s,transform .2s; }
            .mobile-menu-btn:active { transform:scale(.94); }
            .nav-scrim { position:fixed; inset:calc(62px + env(safe-area-inset-top)) 0 0; z-index:98; display:block; touch-action:auto; background:rgba(15,23,42,.24); opacity:0; visibility:hidden; transition:opacity .25s,visibility .25s; backdrop-filter:blur(1px); }
            .nav-scrim.show { opacity:1; visibility:visible; }
            .nav-links {
                position: fixed; top:calc(70px + env(safe-area-inset-top)); left:10px; right:10px; width:auto; min-width:0; max-width:none; height:auto; max-height:calc(100vh - 84px); max-height:calc(100dvh - 84px - env(safe-area-inset-top));
                display:flex; flex-direction:column; gap:5px; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
                background:rgba(255,255,255,.98); border:1px solid rgba(226,232,240,.95); border-radius:18px;
                box-shadow:0 18px 42px rgba(15,23,42,.20); transform:translateY(-12px) scale(.985); transform-origin:top right;
                opacity:0; visibility:hidden; pointer-events:none; transition:transform .25s ease,opacity .25s ease,visibility .25s;
                padding:12px; z-index:100;
            }
            .nav-links::before { content:'导航菜单'; display:block; padding:3px 8px 8px; color:var(--text-secondary); font-size:15px; font-weight:700; letter-spacing:.12em; }
            .nav-links.show { transform:translateY(0) scale(1); opacity:1; visibility:visible; pointer-events:auto; }
            .nav-links li { width:100%; list-style:none; }
            .nav-links > li > a { display:flex; align-items:center; gap:10px; padding:12px 13px; border-radius:11px; color:var(--text); background:var(--card-bg); border:1px solid transparent; font-size:14px; font-weight:600; }
            .nav-links > li > a:hover, .nav-links > li > a:active { color:var(--primary); background:var(--surface-hover); border-color:var(--primary-light); }
            .header-actions { gap:8px; margin-left:auto; }
            .header-actions .theme-toggle { width:40px; height:40px; min-height:40px; padding:0; border-radius:12px; color:var(--primary); background:#eef2ff; border-color:transparent; font-size:18px; }
            .header-actions .theme-toggle:hover, .header-actions .theme-toggle:active { border-color:var(--primary-light); background:var(--surface-hover); }
            .header-actions .theme-toggle-label { display:none; }
            .dropdown-toggle { justify-content:flex-start; }
            .dropdown-toggle .fa-chevron-down { margin-left:auto !important; transition:transform .22s; }
            .dropdown-toggle.is-expanded .fa-chevron-down { transform:rotate(180deg); }
            .dropdown-menu {
                position:static; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; box-shadow:none; background:#f8fafc; border:0; border-radius:12px;
                padding:0; margin:0; max-height:0; overflow:hidden; opacity:1; visibility:visible; transform:none; transition:max-height .28s ease,padding .28s ease,margin .28s ease;
            }
            .dropdown-menu.show { max-height:420px; padding:8px; margin:2px 0 4px; }
            .dropdown-menu a { display:flex; align-items:center; min-width:0; padding:9px 8px; border-radius:8px; color:#475569; background:#fff; font-size:12px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
            .dropdown-menu a:hover { color:var(--primary); background:#eef2ff; }
            .dropdown-menu a img { flex:0 0 auto; border-radius:4px; }
            .alert { padding:11px 12px; border-radius:10px; font-size:12px; line-height:1.55; }.alert > :not(i) { flex:1 1 auto; }
            .blog-grid { grid-template-columns: repeat(4, 1fr); gap:8px; }
            .blog-card { padding:10px 6px; }
            .blog-card img { width:36px; height:36px; border-radius:8px;}
            .blog-card span { width:4em; white-space:nowrap; overflow:hidden; font-size:12px; }
        }
        @media (max-width: 480px) {
            .main { padding:22px 0 30px; }
            .alert { margin-bottom:14px; padding:10px 11px; border-radius:9px; }
            .container { padding-left:7.5px; padding-right:7.5px; }
            .nav-links { left:8px; right:8px; top:calc(68px + env(safe-area-inset-top)); max-height:calc(100vh - 80px); max-height:calc(100dvh - 80px - env(safe-area-inset-top)); padding:10px; border-radius:16px; }
            .nav-links::before { padding:3px 7px 7px; }
            .nav-links > li > a { padding:11px 12px; }
            .dropdown-menu.show { max-height:390px; }
            .dropdown-menu a { padding:9px 7px; }
            .blog-card img {border-radius:5px;}
        }
        @media (max-width: 380px) {
            .logo-text .title { max-width:145px; }
            .dropdown-menu { grid-template-columns:1fr; }
            .mobile-menu-btn, .header-actions .theme-toggle { width:38px; height:38px; }
        }

        /* 暗黑模式：为前台公共组件和各页面的共用卡片、表单、提示区提供统一适配。 */
        html[data-theme="dark"] .header { box-shadow: 0 1px 3px rgba(0,0,0,.32); }
        html[data-theme="dark"] .dropdown-menu,
        html[data-theme="dark"] .nav-links,
        html[data-theme="dark"] .blog-card,
        html[data-theme="dark"] .about-card,
        html[data-theme="dark"] .detail-card,
        html[data-theme="dark"] .snapshot-section,
        html[data-theme="dark"] .submit-intro,
        html[data-theme="dark"] .submit-form { background: var(--card-bg); }
        html[data-theme="dark"] .blog-icon-wrapper,
        html[data-theme="dark"] .blog-avatar,
        html[data-theme="dark"] .cat-icon-wrapper,
        html[data-theme="dark"] .hero-icon-wrapper,
        html[data-theme="dark"] .input-icon,
        html[data-theme="dark"] .captcha-code,
        html[data-theme="dark"] .snapshot-error,
        html[data-theme="dark"] .snapshot-tip,
        html[data-theme="dark"] .link-example code,
        html[data-theme="dark"] .issue-list li,
        html[data-theme="dark"] .email-list a { background: var(--surface-alt); }
        html[data-theme="dark"] .input-group,
        html[data-theme="dark"] .input-group .form-control,
        html[data-theme="dark"] .captcha-input,
        html[data-theme="dark"] #heroSearchInput,
        html[data-theme="dark"] .btn-outline,
        html[data-theme="dark"] .qr-popup { background-color: var(--card-bg); color: var(--text); }
        html[data-theme="dark"] .input-group .form-control::placeholder,
        html[data-theme="dark"] .home-hero { background: none; }
        html[data-theme="dark"] .category-hero { border: 1px solid #dbe4ff;background: none;}
        html[data-theme="dark"] #heroSearchInput::placeholder { color: var(--text-secondary); opacity: .85; }
        html[data-theme="dark"] .hero-search-button { background: var(--card-bg); color: var(--primary); border-color: var(--card-bg); }
        html[data-theme="dark"] .hero-search-button:hover { background: var(--surface-hover); border-color: var(--primary-light); }
        html[data-theme="dark"] .btn-primary:hover { background: var(--card-bg); color: var(--primary); }
        html[data-theme="dark"] .btn-outline:hover,
        html[data-theme="dark"] .email-list a:hover,
        html[data-theme="dark"] .nav-item:hover,
        html[data-theme="dark"] .cat-nav-item:hover { background: var(--surface-hover); }
        html[data-theme="dark"] .email-tip { background: var(--warning-bg); color: var(--warning-text); }
        html[data-theme="dark"] .alert-success { background: var(--success-bg); color: var(--success-text); }
        html[data-theme="dark"] .alert-danger { background: var(--danger-bg); color: var(--danger-text); }
        html[data-theme="dark"] .mobile-menu-btn { background: var(--surface-alt); color: var(--primary); }
        html[data-theme="dark"] .nav-links { border-color: var(--border); }
        html[data-theme="dark"] .dropdown-menu a { color: var(--text); background: var(--card-bg); }
        html[data-theme="dark"] .nav-links > li > a { color: var(--text); }
        html[data-theme="dark"] .header-actions .theme-toggle { background: var(--surface-alt); color: var(--primary); border-color: transparent; }
        html[data-theme="dark"] .dropdown-menu a:hover { background: var(--surface-hover); color: var(--primary); }
        /* 无图标博客的“名称首字头像”：容器查询让字号随图标盒子自适应（桌面/移动一致）。 */
        /* position:relative 让内部绝对定位的首字头像以图标盒子为定位基准（.blog-avatar 自身未定位）。 */
        .blog-icon-wrapper, .blog-avatar { container-type: size; position: relative; }
        .blog-initial { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
            color: #fff; font-weight: 700; line-height: 1; overflow: hidden; border-radius: 6px;
            text-transform: none; letter-spacing: 0; white-space: nowrap;
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif; }
        .blog-icon.blog-initial { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            width: calc(100% - 0px); height: calc(100% - 0px); max-width: none; max-height: none; font-size: 24px; font-size: 46cqmin; }