html {
    color-scheme: light;
}

html[data-theme="dark"] {
    color-scheme: dark;
}

/* 首次加载禁止任何渐变动画，避免主题切换瞬间动画淡入闪白；加载完成后通过 .theme-ready 恢复流畅过渡 */
html:not(.theme-ready) *,
html:not(.theme-ready) *::before,
html:not(.theme-ready) *::after {
    transition: none !important;
    animation-duration: 0s !important;
}

:root, html[data-theme="light"] {
    --bg-primary: #f8fafc;
    --bg-secondary: #f1f5f9;
    --bg-card: rgba(255, 255, 255, 0.9);
    --bg-card-hover: #ffffff;
    --border-color: rgba(226, 232, 240, 0.9);
    --border-strong: #cbd5e1;
    --border-glow: rgba(14, 165, 233, 0.35);

    --accent-cyan: #0891b2;
    --accent-sky: #0284c7;
    --accent-indigo: #4f46e5;
    --accent-emerald: #10b981;

    --glow-cyan: rgba(8, 145, 178, 0.15);
    --glow-indigo: rgba(79, 70, 229, 0.12);

    --bg-body: var(--bg-primary);
    --bg-surface: var(--bg-card);
    --bg-surface-hover: var(--bg-card-hover);
    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-muted: #64748b;
    --text-dim: #94a3b8;
    --primary-color: #0284c7;
    --primary-hover: #0369a1;
    --primary-glow: rgba(2, 132, 199, 0.15);
    --accent-badge: #f0f9ff;
    --accent-badge-text: #0284c7;
    --card-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05), 0 0 1px rgba(0,0,0,0.05);
    --card-shadow-hover: 0 16px 36px -6px rgba(14, 165, 233, 0.15);
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Monaco, Consolas, monospace;
}

[data-theme="dark"], html[data-theme="dark"] {
    /* x7lab.cn 同款深空黑与未来科技色板 */
    --bg-primary: #080a11;
    --bg-secondary: #0f1322;
    --bg-card: rgba(18, 24, 40, 0.75);
    --bg-card-hover: rgba(28, 37, 61, 0.9);
    --border-color: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.15);
    --border-glow: rgba(99, 102, 241, 0.4);

    --accent-cyan: #06b6d4;
    --accent-sky: #38bdf8;
    --accent-indigo: #6366f1;
    --accent-emerald: #10b981;

    --glow-cyan: rgba(6, 182, 212, 0.25);
    --glow-indigo: rgba(99, 102, 241, 0.25);

    --bg-body: var(--bg-primary);
    --bg-surface: var(--bg-card);
    --bg-surface-hover: var(--bg-card-hover);
    --text-primary: #f3f4f6;
    --text-secondary: #e2e8f0;
    --text-muted: #94a3b8;
    --text-dim: #64748b;
    --primary-color: #38bdf8;
    --primary-hover: #0ea5e9;
    --primary-glow: rgba(56, 189, 248, 0.25);
    --accent-badge: rgba(56, 189, 248, 0.12);
    --accent-badge-text: #38bdf8;
    --card-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5), 0 0 1px rgba(255,255,255,0.06);
    --card-shadow-hover: 0 20px 45px -10px rgba(6, 182, 212, 0.2), 0 0 0 1px rgba(56, 189, 248, 0.3);
}

/* x7lab 极客渐变文字工具类 */
.gradient-text-cyan {
    background: linear-gradient(135deg, #38bdf8 0%, #06b6d4 50%, #6366f1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* x7lab 极客质感标准容器卡片 (优化：移除批量卡片高斯模糊，彻底杜绝GPU掉帧卡顿) */
.glass-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--card-shadow) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.glass-card:hover {
    background: var(--bg-card-hover) !important;
    border-color: var(--border-glow) !important;
    box-shadow: var(--card-shadow-hover) !important;
    transform: translateY(-2px);
}

/* x7lab.cn 同款顶部与全局环境光晕 (硬件加速合成层，移除 filter: blur 避免视口重绘) */
.ambient-glow-1 {
    position: fixed;
    top: -160px;
    left: 20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.16) 0%, rgba(6, 182, 212, 0.06) 40%, transparent 70%);
    transform: translate3d(0, 0, 0);
    will-change: transform;
    z-index: 0;
    pointer-events: none;
}

.ambient-glow-2 {
    position: fixed;
    bottom: 10%;
    right: 10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.14) 0%, rgba(139, 92, 246, 0.05) 40%, transparent 70%);
    transform: translate3d(0, 0, 0);
    will-change: transform;
    z-index: 0;
    pointer-events: none;
}

/* x7lab 极客微网格遮罩 (硬件加速层) */
.grid-bg-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 40px 40px;
    transform: translate3d(0, 0, 0);
    will-change: transform;
    z-index: 0;
    pointer-events: none;
}

html[data-theme="light"] .grid-bg-overlay {
    background-image: 
        linear-gradient(to right, rgba(15, 23, 42, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(15, 23, 42, 0.03) 1px, transparent 1px);
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

caption,
th,
td {
    font-weight: normal;
    text-align: left;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    clear: both;
}

html {
    overflow-y: scroll;
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

a:focus {
    outline: thin dotted;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
    display: block;
}

audio,
canvas,
video {
    display: inline-block;
}

audio:not([controls]) {
    display: none;
}

del {
    color: #333;
}

ins {
    background: #fff9c0;
    text-decoration: none;
}

hr {
    background-color: #ccc;
    border: 0;
    height: 1px;
    margin: 24px;
    margin-bottom: 1.714285714rem;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

small {
    font-size: smaller;
}

img {
    border: 0;
    -ms-interpolation-mode: bicubic;
}

/* Clearing floats */
.clear:after,
.wrapper:after,
.format-status .entry-header:after {
    clear: both;
}

.clear:before,
.clear:after,
.wrapper:before,
.wrapper:after,
.format-status .entry-header:before,
.format-status .entry-header:after {
    display: table;
    content: "";
}


/* =Repeatable patterns
-------------------------------------------------------------- */

/* Small headers */
.archive-title,
.page-title,
.widget-title,
.entry-content th,
.comment-content th {
    font-size: 11px;
    font-size: 0.785714286rem;
    line-height: 2.181818182;
    font-weight: bold;
    text-transform: uppercase;
    color: #636363;
}

/* Shared Post Format styling */
article.format-quote footer.entry-meta,
article.format-link footer.entry-meta,
article.format-status footer.entry-meta {
    font-size: 11px;
    font-size: 0.785714286rem;
    line-height: 2.181818182;
}

/* Form fields, general styles first */
button,
input,
select,
textarea {
    border: 1px solid #ccc;
    border-radius: 3px;
    font-family: inherit;
    padding: 6px;
    padding: 0.428571429rem;
}

button,
input {
    line-height: normal;
}

textarea {
    font-size: 100%;
    overflow: auto;
    vertical-align: top;
}

/* Reset non-text input types */
input[type="checkbox"],
input[type="radio"],
input[type="file"],
input[type="hidden"],
input[type="image"],
input[type="color"] {
    border: 0;
    border-radius: 0;
    padding: 0;
}

/* Buttons */
.menu-toggle,
input[type="submit"],
input[type="button"],
input[type="reset"],
article.post-password-required input[type=submit],
.bypostauthor cite span {
    padding: 6px 10px;
    padding: 0.428571429rem 0.714285714rem;
    font-size: 11px;
    font-size: 0.785714286rem;
    line-height: 1.428571429;
    font-weight: normal;
    color: #7c7c7c;
    background-color: #e6e6e6;
    background-repeat: repeat-x;
    background-image: -moz-linear-gradient(top, #f4f4f4, #e6e6e6);
    background-image: -ms-linear-gradient(top, #f4f4f4, #e6e6e6);
    background-image: -webkit-linear-gradient(top, #f4f4f4, #e6e6e6);
    background-image: -o-linear-gradient(top, #f4f4f4, #e6e6e6);
    background-image: linear-gradient(to bottom, #f4f4f4, #e6e6e6);
    border: 1px solid #d2d2d2;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1);
}

.menu-toggle,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    cursor: pointer;
}

button[disabled],
input[disabled] {
    cursor: default;
}

.menu-toggle:hover,
.menu-toggle:focus,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
article.post-password-required input[type=submit]:hover {
    color: #5e5e5e;
    background-color: #ebebeb;
    background-repeat: repeat-x;
    background-image: -moz-linear-gradient(top, #f9f9f9, #ebebeb);
    background-image: -ms-linear-gradient(top, #f9f9f9, #ebebeb);
    background-image: -webkit-linear-gradient(top, #f9f9f9, #ebebeb);
    background-image: -o-linear-gradient(top, #f9f9f9, #ebebeb);
    background-image: linear-gradient(to bottom, #f9f9f9, #ebebeb);
}

.menu-toggle:active,
.menu-toggle.toggled-on,
button:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active {
    color: #757575;
    background-color: #e1e1e1;
    background-repeat: repeat-x;
    background-image: -moz-linear-gradient(top, #ebebeb, #e1e1e1);
    background-image: -ms-linear-gradient(top, #ebebeb, #e1e1e1);
    background-image: -webkit-linear-gradient(top, #ebebeb, #e1e1e1);
    background-image: -o-linear-gradient(top, #ebebeb, #e1e1e1);
    background-image: linear-gradient(to bottom, #ebebeb, #e1e1e1);
    box-shadow: inset 0 0 8px 2px #c6c6c6, 0 1px 0 0 #f4f4f4;
    border-color: transparent;
}

.bypostauthor cite span {
    color: #fff;
    background-color: #21759b;
    background-image: none;
    border: 1px solid #1f6f93;
    border-radius: 2px;
    box-shadow: none;
    padding: 0;
}

/* Responsive images */
.entry-content img,
.comment-content img,
.widget img {
    max-width: 100%; /* Fluid images for posts, comments, and widgets */
}

img[class*="align"],
img[class*="wp-image-"],
img[class*="attachment-"] {
    height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
}

img.size-full,
img.size-large,
img.header-image,
img.wp-post-image {
    max-width: 100%;
    height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
}

/* Make sure videos and embeds fit their containers */
embed,
iframe,
object,
video {
    max-width: 100%;
}

.entry-content .twitter-tweet-rendered {
    max-width: 100% !important; /* Override the Twitter embed fixed width */
}

/* Images */
.alignleft {
    float: left;
}

.alignright {
    float: right;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.entry-content img,
.comment-content img,
.widget img,
img.header-image,
.author-avatar img,
img.wp-post-image {
    /* Add fancy borders to all WordPress-added images but not things like badges and icons and the like */
    border-radius: 3px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.wp-caption {
    max-width: 100%; /* Keep wide captions from overflowing their container. */
    padding: 4px;
}

.wp-caption .wp-caption-text,
.gallery-caption,
.entry-caption {
    font-style: italic;
    font-size: 12px;
    font-size: 0.857142857rem;
    line-height: 2;
    color: #757575;
}

img.wp-smiley,
.rsswidget img {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
}

.entry-content dl.gallery-item {
    margin: 0;
}

.gallery-item a,
.gallery-caption {
    width: 90%;
}

.gallery-item a {
    display: block;
}

.gallery-caption a {
    display: inline;
}

.gallery-columns-1 .gallery-item a {
    max-width: 100%;
    width: auto;
}

.gallery .gallery-icon img {
    height: auto;
    max-width: 90%;
    padding: 5%;
}

.gallery-columns-1 .gallery-icon img {
    padding: 3%;
}

/* Navigation */
.site-content nav {
    clear: both;
    line-height: 2;
    overflow: hidden;
}

#nav-above {
    padding: 24px 0;
    padding: 1.714285714rem 0;
}

#nav-above {
    display: none;
}

.paged #nav-above {
    display: block;
}

.nav-previous,
.previous-image {
    float: left;
    width: 50%;
}

.nav-next,
.next-image {
    float: right;
    text-align: right;
    width: 50%;
}

.nav-single + .comments-area,
#comment-nav-above {
    margin: 48px 0;
    margin: 3.428571429rem 0;
}

/* Author profiles */
.author .archive-header {
    margin-bottom: 24px;
    margin-bottom: 1.714285714rem;
}

.author-info {
    border-top: 1px solid #ededed;
    margin: 24px 0;
    margin: 1.714285714rem 0;
    padding-top: 24px;
    padding-top: 1.714285714rem;
    overflow: hidden;
}

.author-description p {
    color: #757575;
    font-size: 13px;
    font-size: 0.928571429rem;
    line-height: 1.846153846;
}

.author.archive .author-info {
    border-top: 0;
    margin: 0 0 48px;
    margin: 0 0 3.428571429rem;
}

.author.archive .author-avatar {
    margin-top: 0;
}


/* =Basic structure
-------------------------------------------------------------- */

/* Body, links, basics */
html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-size: 16px;
    font-size: 1rem;
    font-family: var(--font-sans);
    line-height: 1.75;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--text-primary);
    background-color: var(--bg-body);
}

body.custom-font-enabled {
    font-family: var(--font-sans);
}

a {
    outline: none;
    color: #21759b;
}

a:hover {
    color: #0f3647;
}

/* Assistive text */
.assistive-text,
.site .screen-reader-text {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    overflow: hidden;
    height: 1px;
    width: 1px;
}

.main-navigation .assistive-text:focus,
.site .screen-reader-text:hover,
.site .screen-reader-text:active,
.site .screen-reader-text:focus {
    background: #fff;
    border: 2px solid #333;
    border-radius: 3px;
    clip: auto !important;
    color: #000;
    display: block;
    font-size: 12px;
    height: auto;
    padding: 12px;
    position: absolute;
    top: 5px;
    left: 5px;
    width: auto;
    z-index: 100000; /* Above WP toolbar */
}

/* Page structure */
.site {
    padding: 0 24px;
    padding: 0 1.714285714rem;
    background-color: transparent !important;
}

.site-content {
    margin: 24px 0 0;
    margin: 1.714285714rem 0 0;
}

.widget-area {
    margin: 24px 0 0;
    margin: 1.714285714rem 0 0;
}

/* Header */
.site-header {
    padding: 24px 0px 0px 0;
}

.site-header h1,
.site-header h2 {
    text-align: center;
}

.site-header h1 a,
.site-header h2 a {
    color: #515151;
    display: inline-block;
    text-decoration: none;
}

.site-header h1 a:hover,
.site-header h2 a:hover {
    color: #21759b;
}

.site-header h1 {
    font-size: 24px;
    font-size: 1.714285714rem;
    line-height: 1.285714286;
    margin-bottom: 14px;
    margin-bottom: 1rem;
}

.site-header h2 {
    font-weight: normal;
    font-size: 13px;
    font-size: 0.928571429rem;
    line-height: 1.846153846;
    color: #757575;
}

.header-image {
    margin-top: 24px;
    margin-top: 1.714285714rem;
}

/* Navigation Menu */
.main-navigation {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    text-align: center;
}

.main-navigation li {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    font-size: 12px;
    font-size: 0.857142857rem;
    line-height: 1.42857143;
}

.main-navigation a {
    color: #5e5e5e;
}

.main-navigation a:hover,
.main-navigation a:focus {
    color: #21759b;
}

.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
    display: none;
}

.main-navigation ul.nav-menu.toggled-on,
.menu-toggle {
    display: inline-block;
}

/* Banner */
section[role="banner"] {
    margin-bottom: 48px;
    margin-bottom: 3.428571429rem;
}

/* Sidebar */
.widget-area .widget {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
    margin-bottom: 22px;
    word-wrap: break-word;
}

.widget-area .widget h3 {
    margin-bottom: 24px;
    margin-bottom: 1.714285714rem;
}

.widget-area .widget p,
.widget-area .widget li,
.widget-area .widget .textwidget {
    font-size: 13px;
    font-size: 0.928571429rem;
    line-height: 1.846153846;
}

.widget-area .widget p {
    margin-bottom: 24px;
    margin-bottom: 1.714285714rem;
}

.widget-area .textwidget ul,
.widget-area .textwidget ol {
    list-style: disc outside;
    margin: 0 0 24px;
    margin: 0 0 1.714285714rem;
}

.widget-area .textwidget li > ul,
.widget-area .textwidget li > ol {
    margin-bottom: 0;
}

.widget-area .textwidget ol {
    list-style: decimal;
}

.widget-area .textwidget li {
    margin-left: 36px;
    margin-left: 2.571428571rem;
}

.widget-area .widget a {
    color: #757575;
}

.widget-area .widget a:hover {
    color: #21759b;
}

.widget-area .widget a:visited {
    color: #9f9f9f;
}

.widget-area #s {
    width: 53.66666666666%; /* define a width to avoid dropping a wider submit button */
}

/* Footer */
footer[role="contentinfo"] {
    border-top: 1px solid #ededed;
    clear: both;
    font-size: 12px;
    font-size: 0.857142857rem;
    line-height: 2;
    max-width: 960px;
    max-width: 68.571428571rem;
    margin-top: 24px;
    margin-top: 1.714285714rem;
    margin-left: auto;
    margin-right: auto;
    padding: 24px 0;
    padding: 1.714285714rem 0;
}

footer[role="contentinfo"] a {
    color: #686868;
}

footer[role="contentinfo"] a:hover {
    color: #21759b;
}

.site-info span[role=separator] {
    padding: 0 0.3em 0 0.6em;
}

.site-info span[role=separator]::before {
    content: '\002f';
}


/* =Main content and comment content
-------------------------------------------------------------- */

.entry-meta {
    clear: both;
}

.entry-header {
    margin-bottom: 24px;
    margin-bottom: 1.714285714rem;
}

.entry-header img.wp-post-image {
    margin-bottom: 24px;
    margin-bottom: 1.714285714rem;
}

.entry-header .entry-title {
    font-size: 20px;
    font-size: 1.428571429rem;
    line-height: 1.2;
    font-weight: normal;
}

.entry-header .entry-title a {
    text-decoration: none;
}

.entry-header .entry-format {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    font-weight: normal;
}

.entry-header .comments-link {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    font-size: 13px;
    font-size: 0.928571429rem;
    line-height: 1.846153846;
    color: #757575;
}

.comments-link a,
.entry-meta a {
    color: #757575;
}

.comments-link a:hover,
.entry-meta a:hover {
    color: #21759b;
}

article.sticky .featured-post {
    border-top: 4px double #ededed;
    border-bottom: 4px double #ededed;
    color: #757575;
    font-size: 13px;
    font-size: 0.928571429rem;
    line-height: 3.692307692;
    margin-bottom: 24px;
    margin-bottom: 1.714285714rem;
    text-align: center;
}

.entry-content,
.entry-summary,
.mu_register {
    line-height: 1.714285714;
}

.entry-content h1,
.comment-content h1,
.entry-content h2,
.comment-content h2,
.entry-content h3,
.comment-content h3,
.entry-content h4,
.comment-content h4,
.entry-content h5,
.comment-content h5,
.entry-content h6,
.comment-content h6 {
    margin: 24px 0;
    margin: 1.714285714rem 0;
    line-height: 1.714285714;
}

.entry-content h1,
.comment-content h1 {
    font-size: 21px;
    font-size: 1.5rem;
    line-height: 1.5;
}

.entry-content h2,
.comment-content h2,
.mu_register h2 {
    font-size: 18px;
    font-size: 1.285714286rem;
    line-height: 1.6;
}

.entry-content h3,
.comment-content h3 {
    font-size: 16px;
    font-size: 1.142857143rem;
    line-height: 1.846153846;
}

.entry-content h4,
.comment-content h4 {
    font-size: 14px;
    font-size: 1rem;
    line-height: 1.846153846;
}

.entry-content h5,
.comment-content h5 {
    font-size: 13px;
    font-size: 0.928571429rem;
    line-height: 1.846153846;
}

.entry-content h6,
.comment-content h6 {
    font-size: 12px;
    font-size: 0.857142857rem;
    line-height: 1.846153846;
}

.entry-content p,
.entry-summary p,
.comment-content p,
.mu_register p {
    margin: 0 0 24px;
    margin: 0 0 1.714285714rem;
    line-height: 1.714285714;
}

.entry-content a:visited,
.comment-content a:visited {
    color: #9f9f9f;
}

.entry-content .more-link {
    white-space: nowrap;
}

.entry-content ol,
.comment-content ol,
.entry-content ul,
.comment-content ul,
.mu_register ul {
    margin: 0 0 24px;
    margin: 0 0 1.714285714rem;
    line-height: 1.714285714;
}

.entry-content ul ul,
.comment-content ul ul,
.entry-content ol ol,
.comment-content ol ol,
.entry-content ul ol,
.comment-content ul ol,
.entry-content ol ul,
.comment-content ol ul {
    margin-bottom: 0;
}

.entry-content ul,
.comment-content ul,
.mu_register ul {
    list-style: disc outside;
}

.entry-content ol,
.comment-content ol {
    list-style: decimal outside;
}

.entry-content li,
.comment-content li,
.mu_register li {
    margin: 0 0 0 36px;
    margin: 0 0 0 2.571428571rem;
}

.entry-content blockquote,
.comment-content blockquote {
    margin-bottom: 24px;
    margin-bottom: 1.714285714rem;
    padding: 24px;
    padding: 1.714285714rem;
    font-style: italic;
}

.entry-content blockquote p:last-child,
.comment-content blockquote p:last-child {
    margin-bottom: 0;
}

.entry-content code,
.comment-content code {
    font-family: Consolas, Monaco, Lucida Console, monospace;
    font-size: 12px;
    font-size: 0.857142857rem;
    line-height: 2;
}

.entry-content pre,
.comment-content pre {
    border: 1px solid #ededed;
    color: #666;
    font-family: Consolas, Monaco, Lucida Console, monospace;
    font-size: 12px;
    font-size: 0.857142857rem;
    line-height: 1.714285714;
    margin: 24px 0;
    margin: 1.714285714rem 0;
    overflow: auto;
    padding: 24px;
    padding: 1.714285714rem;
}

.entry-content pre code,
.comment-content pre code {
    display: block;
}

.entry-content abbr,
.comment-content abbr,
.entry-content dfn,
.comment-content dfn,
.entry-content acronym,
.comment-content acronym {
    border-bottom: 1px dotted #666;
    cursor: help;
}

.entry-content address,
.comment-content address {
    display: block;
    line-height: 1.714285714;
    margin: 0 0 24px;
    margin: 0 0 1.714285714rem;
}

img.alignleft,
.wp-caption.alignleft {
    margin: 12px 24px 12px 0;
    margin: 0.857142857rem 1.714285714rem 0.857142857rem 0;
}

img.alignright,
.wp-caption.alignright {
    margin: 12px 0 12px 24px;
    margin: 0.857142857rem 0 0.857142857rem 1.714285714rem;
}

img.aligncenter,
.wp-caption.aligncenter {
    clear: both;
    margin-top: 12px;
    margin-top: 0.857142857rem;
    margin-bottom: 12px;
    margin-bottom: 0.857142857rem;
}

.entry-content embed,
.entry-content iframe,
.entry-content object,
.entry-content video {
    margin-bottom: 24px;
    margin-bottom: 1.714285714rem;
}

.entry-content dl,
.comment-content dl {
    margin: 0 24px;
    margin: 0 1.714285714rem;
}

.entry-content dt,
.comment-content dt {
    font-weight: bold;
    line-height: 1.714285714;
}

.entry-content dd,
.comment-content dd {
    line-height: 1.714285714;
    margin-bottom: 24px;
    margin-bottom: 1.714285714rem;
}

.entry-content table,
.comment-content table {
    border-bottom: 1px solid #ededed;
    color: #757575;
    font-size: 12px;
    font-size: 0.857142857rem;
    line-height: 2;
    margin: 0 0 24px;
    margin: 0 0 1.714285714rem;
    width: 100%;
}

.entry-content table caption,
.comment-content table caption {
    font-size: 16px;
    font-size: 1.142857143rem;
    margin: 24px 0;
    margin: 1.714285714rem 0;
}

.entry-content td,
.comment-content td {
    border-top: 1px solid #ededed;
    padding: 6px 10px 6px 0;
}

.site-content article,
.tech-article-card {
    border-bottom: none !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 10px !important;
    padding: 18px 22px !important;
    margin-bottom: 12px !important;
    box-shadow: none !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    word-wrap: break-word;
}

.site-content article.tech-article-detail {
    padding: 28px 32px !important;
    margin-bottom: 24px !important;
    border-radius: 12px !important;
    box-shadow: var(--card-shadow) !important;
    content-visibility: visible !important;
    contain-intrinsic-size: none !important;
}

.tech-article-card:hover {
    border-color: rgba(6, 182, 212, 0.38) !important;
    box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(6, 182, 212, 0.12) !important;
    transform: translateY(-1px);
}

@media screen and (max-width: 768px) {
    .site-content article,
    .tech-article-card {
        padding: 15px 15px !important;
        border-radius: 8px !important;
        margin-bottom: 10px !important;
    }
    .site-content article.tech-article-detail {
        padding: 18px 16px !important;
        margin-bottom: 16px !important;
    }
}

.page-links {
    clear: both;
    line-height: 1.714285714;
}

footer.entry-meta {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    font-size: 13px;
    font-size: 0.928571429rem;
    line-height: 1.846153846;
    color: #757575;
}

.single-author .entry-meta .by-author {
    display: none;
}

.mu_register h2 {
    color: #757575;
    font-weight: normal;
}


/* =Archives
-------------------------------------------------------------- */

.archive-header,
.page-header {
    margin: 0;
    margin-bottom: 22px;
    padding-bottom: 22px;
    border-bottom: 1px solid #ededed;
}

.archive-meta {
    color: #757575;
    font-size: 12px;
    font-size: 0.857142857rem;
    line-height: 2;
    margin-top: 22px;
    margin-top: 1.571428571rem;
}

/* =Single audio/video attachment view
-------------------------------------------------------------- */

.attachment .entry-content .mejs-audio {
    max-width: 400px;
}

.attachment .entry-content .mejs-container {
    margin-bottom: 24px;
}


/* =Single image attachment view
-------------------------------------------------------------- */

.article.attachment {
    overflow: hidden;
}

.image-attachment div.attachment {
    text-align: center;
}

.image-attachment div.attachment p {
    text-align: center;
}

.image-attachment div.attachment img {
    display: block;
    height: auto;
    margin: 0 auto;
    max-width: 100%;
}

.image-attachment .entry-caption {
    margin-top: 8px;
    margin-top: 0.571428571rem;
}


/* =Aside post format
-------------------------------------------------------------- */

article.format-aside h1 {
    margin-bottom: 24px;
    margin-bottom: 1.714285714rem;
}

article.format-aside h1 a {
    text-decoration: none;
    color: #4d525a;
}

article.format-aside h1 a:hover {
    color: #2e3542;
}

article.format-aside .aside {
    padding: 24px 24px 0;
    padding: 1.714285714rem;
    background: #d2e0f9;
    border-left: 22px solid #a8bfe8;
}

article.format-aside p {
    font-size: 13px;
    font-size: 0.928571429rem;
    line-height: 1.846153846;
    color: #4a5466;
}

article.format-aside blockquote:last-child,
article.format-aside p:last-child {
    margin-bottom: 0;
}


/* =Post formats
-------------------------------------------------------------- */

/* Image posts */
article.format-image footer h1 {
    font-size: 13px;
    font-size: 0.928571429rem;
    line-height: 1.846153846;
    font-weight: normal;
}

article.format-image footer h2 {
    font-size: 11px;
    font-size: 0.785714286rem;
    line-height: 2.181818182;
}

article.format-image footer a h2 {
    font-weight: normal;
}

/* Link posts */
article.format-link header {
    padding: 0 10px;
    padding: 0 0.714285714rem;
    float: right;
    font-size: 11px;
    font-size: 0.785714286rem;
    line-height: 2.181818182;
    font-weight: bold;
    font-style: italic;
    text-transform: uppercase;
    color: #848484;
    background-color: #ebebeb;
    border-radius: 3px;
}

article.format-link .entry-content {
    max-width: 80%;
    float: left;
}

article.format-link .entry-content a {
    font-size: 22px;
    font-size: 1.571428571rem;
    line-height: 1.090909091;
    text-decoration: none;
}

/* Quote posts */
article.format-quote .entry-content p {
    margin: 0;
    padding-bottom: 24px;
    padding-bottom: 1.714285714rem;
}

article.format-quote .entry-content blockquote {
    display: block;
    padding: 24px 24px 0;
    padding: 1.714285714rem 1.714285714rem 0;
    font-size: 15px;
    font-size: 1.071428571rem;
    line-height: 1.6;
    font-style: normal;
    color: #6a6a6a;
    background: #efefef;
}

/* Status posts */
.format-status .entry-header {
    margin-bottom: 24px;
    margin-bottom: 1.714285714rem;
}

.format-status .entry-header header {
    display: inline-block;
}

.format-status .entry-header h1 {
    font-size: 15px;
    font-size: 1.071428571rem;
    font-weight: normal;
    line-height: 1.6;
    margin: 0;
}

.format-status .entry-header h2 {
    font-size: 12px;
    font-size: 0.857142857rem;
    font-weight: normal;
    line-height: 2;
    margin: 0;
}

.format-status .entry-header header a {
    color: #757575;
}

.format-status .entry-header header a:hover {
    color: #21759b;
}

.format-status .entry-header img {
    float: left;
    margin-right: 21px;
    margin-right: 1.5rem;
}


/* =Comments
-------------------------------------------------------------- */

.comments-title {
    margin-bottom: 48px;
    margin-bottom: 3.428571429rem;
    font-size: 16px;
    font-size: 1.142857143rem;
    line-height: 1.5;
    font-weight: normal;
}

.comments-area article {
    margin: 24px 0;
    margin: 1.714285714rem 0;
}

.comments-area article header {
    margin: 0 0 48px;
    margin: 0 0 3.428571429rem;
    overflow: hidden;
    position: relative;
}

.comments-area article header img {
    float: left;
    padding: 0;
    line-height: 0;
}

.comments-area article header cite,
.comments-area article header time {
    display: block;
    margin-left: 85px;
    margin-left: 6.071428571rem;
}

.comments-area article header cite {
    font-style: normal;
    font-size: 15px;
    font-size: 1.071428571rem;
    line-height: 1.42857143;
}

.comments-area cite b {
    font-weight: normal;
}

.comments-area article header time {
    line-height: 1.714285714;
    text-decoration: none;
    font-size: 12px;
    font-size: 0.857142857rem;
    color: #5e5e5e;
}

.comments-area article header a {
    text-decoration: none;
    color: #5e5e5e;
}

.comments-area article header a:hover {
    color: #21759b;
}

.comments-area article header cite a {
    color: #444;
}

.comments-area article header cite a:hover {
    text-decoration: underline;
}

.comments-area article header h4 {
    position: absolute;
    top: 0;
    right: 0;
    padding: 6px 12px;
    padding: 0.428571429rem 0.857142857rem;
    font-size: 12px;
    font-size: 0.857142857rem;
    font-weight: normal;
    color: #fff;
    background-color: #0088d0;
    background-repeat: repeat-x;
    background-image: -moz-linear-gradient(top, #009cee, #0088d0);
    background-image: -ms-linear-gradient(top, #009cee, #0088d0);
    background-image: -webkit-linear-gradient(top, #009cee, #0088d0);
    background-image: -o-linear-gradient(top, #009cee, #0088d0);
    background-image: linear-gradient(to bottom, #009cee, #0088d0);
    border-radius: 3px;
    border: 1px solid #007cbd;
}

.comments-area .bypostauthor cite span {
    position: absolute;
    margin-left: 5px;
    margin-left: 0.357142857rem;
    padding: 2px 5px;
    padding: 0.142857143rem 0.357142857rem;
    font-size: 10px;
    font-size: 0.714285714rem;
}

.comments-area .bypostauthor cite b {
    font-weight: bold;
}

a.comment-reply-link,
a.comment-edit-link {
    color: #686868;
    font-size: 13px;
    font-size: 0.928571429rem;
    line-height: 1.846153846;
}

a.comment-reply-link:hover,
a.comment-edit-link:hover {
    color: #21759b;
}

.commentlist .pingback {
    line-height: 1.714285714;
    margin-bottom: 24px;
    margin-bottom: 1.714285714rem;
}

/* Comment form */
#respond {
    margin-top: 48px;
    margin-top: 3.428571429rem;
}

#respond h3#reply-title {
    font-size: 16px;
    font-size: 1.142857143rem;
    line-height: 1.5;
}

#respond h3#reply-title #cancel-comment-reply-link {
    margin-left: 10px;
    margin-left: 0.714285714rem;
    font-weight: normal;
    font-size: 12px;
    font-size: 0.857142857rem;
}

#respond form {
    margin: 24px 0;
    margin: 1.714285714rem 0;
}

#respond form p {
    margin: 11px 0;
    margin: 0.785714286rem 0;
}

#respond form p.logged-in-as {
    margin-bottom: 24px;
    margin-bottom: 1.714285714rem;
}

#respond form label {
    display: block;
    line-height: 1.714285714;
}

#respond form input[type="text"],
#respond form textarea {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 12px;
    font-size: 0.857142857rem;
    line-height: 1.714285714;
    padding: 10px;
    padding: 0.714285714rem;
    width: 100%;
}

#respond form p.form-allowed-tags {
    margin: 0;
    font-size: 12px;
    font-size: 0.857142857rem;
    line-height: 2;
    color: #5e5e5e;
}

#respond #wp-comment-cookies-consent {
    margin: 0 10px 0 0;
}

#respond .comment-form-cookies-consent label {
    display: inline;
}

.required {
    color: red;
}


/* =Front page template
-------------------------------------------------------------- */

.entry-page-image {
    margin-bottom: 14px;
    margin-bottom: 1rem;
}

.template-front-page .site-content article {
    border: 0;
    margin-bottom: 0;
}

.template-front-page .widget-area {
    clear: both;
    float: none;
    width: auto;
    padding-top: 24px;
    padding-top: 1.714285714rem;
    border-top: 1px solid #ededed;
}

.template-front-page .widget-area .widget li {
    margin: 8px 0 0;
    margin: 0.571428571rem 0 0;
    font-size: 13px;
    font-size: 0.928571429rem;
    line-height: 1.714285714;
    list-style-type: square;
    list-style-position: inside;
}

.template-front-page .widget-area .widget li a {
    color: #757575;
}

.template-front-page .widget-area .widget li a:hover {
    color: #21759b;
}

.template-front-page .widget-area .widget_text img {
    float: left;
    margin: 8px 24px 8px 0;
    margin: 0.571428571rem 1.714285714rem 0.571428571rem 0;
}


/* =Widgets
-------------------------------------------------------------- */

.widget select {
    max-width: 100%;
}

.widget-area .widget ul ul {
    margin-left: 12px;
    margin-left: 0.857142857rem;
}

.widget_rss li {
    margin: 12px 0;
    margin: 0.857142857rem 0;
}

.widget_recent_entries .post-date,
.widget_rss .rss-date {
    color: #aaa;
    font-size: 11px;
    font-size: 0.785714286rem;
    margin-left: 12px;
    margin-left: 0.857142857rem;
}

.wp-calendar-nav,
#wp-calendar {
    margin: 0;
    width: 100%;
    font-size: 13px;
    font-size: 0.928571429rem;
    line-height: 1.846153846;
    color: #686868;
}

#wp-calendar th,
#wp-calendar td,
#wp-calendar caption {
    text-align: left;
}

.wp-calendar-nav {
    display: table;
}

.wp-calendar-nav span {
    display: table-cell;
}

.wp-calendar-nav-next,
#wp-calendar #next {
    padding-right: 24px;
    padding-right: 1.714285714rem;
    text-align: right;
}

.widget_search label {
    display: block;
    font-size: 13px;
    font-size: 0.928571429rem;
    line-height: 1.846153846;
}

.widget_twitter li {
    list-style-type: none;
}

.widget_twitter .timesince {
    display: block;
    text-align: right;
}

.tagcloud ul {
    list-style-type: none;
}

.tagcloud ul li {
    display: inline-block;
}

.widget-area .widget.widget_tag_cloud li {
    line-height: 1;
}

.template-front-page .widget-area .widget.widget_tag_cloud li {
    margin: 0;
}

.widget-area .gallery-columns-2.gallery-size-full .gallery-icon img,
.widget-area .gallery-columns-3.gallery-size-full .gallery-icon img,
.widget-area .gallery-columns-4.gallery-size-full .gallery-icon img,
.widget-area .gallery-columns-5.gallery-size-full .gallery-icon img,
.widget-area .gallery-columns-6 .gallery-icon img,
.widget-area .gallery-columns-7 .gallery-icon img,
.widget-area .gallery-columns-8 .gallery-icon img,
.widget-area .gallery-columns-9 .gallery-icon img {
    height: auto;
    max-width: 80%;
}

/* =Plugins
----------------------------------------------- */

img#wpstats {
    display: block;
    margin: 0 auto 24px;
    margin: 0 auto 1.714285714rem;
}


/* =Media queries
-------------------------------------------------------------- */

/* Does the same thing as <meta name="viewport" content="width=device-width">,
 * but in the future W3C standard way. -ms- prefix is required for IE10+ to
 * render responsive styling in Windows 8 "snapped" views; IE10+ does not honor
 * the meta tag. See https://core.trac.wordpress.org/ticket/25888.
 */
@-ms-viewport {
    width: device-width;
}

@viewport {
    width: device-width;
}

/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) and (min-width: 901px) {
    .author-avatar {
        float: left;
        margin-top: 8px;
        margin-top: 0.571428571rem;
    }

    .author-description {
        float: right;
        width: 80%;
    }

    .site {
        margin: 0 auto;
        max-width: 1280px;
        overflow: visible !important;
    }

    .site-content {
        float: left;
        width: 80%;
    }

    body.template-front-page .site-content,
    body.attachment .site-content,
    body.full-width .site-content {
        width: 100%;
    }

    .widget-area {
        float: right;
        width: 15%;
    }

    .site-header h1,
    .site-header h2 {
        text-align: left;
    }

    .site-header h1 {
        font-size: 26px;
        font-size: 1.857142857rem;
        line-height: 1.846153846;
        margin-bottom: 0;
    }

    .main-navigation ul.nav-menu,
    .main-navigation div.nav-menu > ul {
        border-bottom: 1px solid #ededed;
        border-top: 1px solid #ededed;
        display: inline-block !important;
        text-align: left;
        width: 100%;
    }

    .main-navigation ul {
        margin: 0;
        text-indent: 0;
    }

    .main-navigation li a,
    .main-navigation li {
        display: inline-block;
        text-decoration: none;
    }

    .main-navigation li a {
        border-bottom: 0;
        color: #6a6a6a;
        line-height: 3.692307692;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .main-navigation li a:hover,
    .main-navigation li a:focus {
        color: #000;
    }

    .main-navigation li {
        margin: 0 40px 0 0;
        margin: 0 2.857142857rem 0 0;
        position: relative;
    }

    /* ==========================================================================
       x7lab 现代化科技毛玻璃下拉子菜单 (Cyber Glass Dropdown Menu)
       彻底消除老旧灰底直角方块，升级为带进场微动效与毛玻璃投影的高定悬浮面板
       ========================================================================== */
    .main-navigation li {
        position: relative;
    }

    /* 仅当真正包含下级子菜单时才渲染下拉微角标箭头（结合模板动态类名与 :has 双重互锁，杜绝假箭头） */
    .main-navigation li.menu-item-has-children:has(> ul.sub-menu) > a::after,
    .main-navigation li.menu-item-has-children:has(> ul) > a::after {
        content: "";
        display: inline-block;
        width: 5px;
        height: 5px;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: rotate(45deg) translateY(-2px);
        margin-left: 5px;
        transition: transform 0.2s ease, opacity 0.2s ease;
        opacity: 0.55;
        vertical-align: middle;
    }

    .main-navigation li.menu-item-has-children:has(> ul.sub-menu):hover > a::after,
    .main-navigation li.menu-item-has-children:has(> ul):hover > a::after {
        transform: rotate(225deg) translateY(-2px);
        opacity: 1;
    }

    /* 下拉子菜单面板容器 (Glass Dropdown Panel) */
    .main-navigation li ul.sub-menu,
    .main-navigation li ul {
        display: none;
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        z-index: 10000;
        min-width: 175px;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        border-radius: 12px;
        padding: 6px;
        margin: 0;
        list-style: none;
        
        /* 浅色模式高定毛玻璃与多层投影 */
        background: rgba(255, 255, 255, 0.94);
        border: 1px solid rgba(226, 232, 240, 0.9);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow: 0 16px 36px -4px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
    }

    /* 隐形连接桥 (Invisible Bridge) 填补 li 与 sub-menu 之间 8px 的缝隙，
       防止鼠标从父菜单移动到下拉菜单时意外触发 mouseleave 导致下拉框关闭消失 */
    .main-navigation li ul.sub-menu::before,
    .main-navigation li ul::before {
        content: "";
        position: absolute;
        top: -12px;
        left: 0;
        right: 0;
        height: 12px;
        background: transparent;
    }

    /* 暗黑模式下的毛玻璃深蓝黑材质 (对标 x7lab.cn) */
    html[data-theme="dark"] .main-navigation li ul.sub-menu,
    html[data-theme="dark"] .main-navigation li ul {
        background: rgba(13, 19, 34, 0.94);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 20px 45px -6px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(56, 189, 248, 0.15);
    }

    .main-navigation li ul ul {
        top: 0;
        left: calc(100% + 6px);
    }

    /* 多级子菜单的侧向连接桥 */
    .main-navigation li ul ul::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -10px;
        width: 10px;
        height: 100%;
        background: transparent;
    }

    /* 悬停与聚焦触发平滑上浮微淡入动画 */
    .main-navigation ul li:hover > ul.sub-menu,
    .main-navigation ul li:hover > ul,
    .main-navigation ul li:focus > ul.sub-menu,
    .main-navigation ul li:focus > ul,
    .main-navigation .focus > ul {
        display: block;
        border-left: 0;
        clip: inherit;
        overflow: visible;
        height: auto;
        width: auto;
        animation: navDropdownFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    @keyframes navDropdownFadeIn {
        from {
            opacity: 0;
            transform: translateY(6px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* 下拉子菜单中的每个菜单项 */
    .main-navigation li ul li {
        display: block;
        margin: 2px 0;
        width: 100%;
    }

    .main-navigation li ul li a {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: 8px 12px !important;
        border-radius: 8px !important;
        border-bottom: none !important;
        background: transparent !important;
        color: var(--text-secondary) !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        line-height: 1.4 !important;
        width: 100% !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
        transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    /* 悬停微平移动效与青蓝高亮 */
    .main-navigation li ul li a:hover,
    .main-navigation li ul li a:focus {
        background: #f0f9ff !important;
        color: #0284c7 !important;
        transform: translateX(3px) !important;
    }

    html[data-theme="dark"] .main-navigation li ul li a:hover,
    html[data-theme="dark"] .main-navigation li ul li a:focus {
        background: rgba(6, 182, 212, 0.12) !important;
        color: #38bdf8 !important;
        transform: translateX(3px) !important;
    }

    .main-navigation .current-menu-item > a,
    .main-navigation .current-menu-ancestor > a,
    .main-navigation .current_page_item > a,
    .main-navigation .current_page_ancestor > a {
        color: var(--primary-color) !important;
        font-weight: 600;
    }

    .menu-toggle {
        display: none;
    }

    .entry-header .entry-title {
        font-size: 22px;
        font-size: 1.571428571rem;
    }

    #respond form input[type="text"] {
        width: 46.333333333%;
    }

    #respond form textarea.blog-textarea {
        width: 79.666666667%;
    }

    .template-front-page .site-content,
    .template-front-page article {
        overflow: hidden;
    }

    .template-front-page.has-post-thumbnail article {
        float: left;
        width: 47.916666667%;
    }

    .entry-page-image {
        float: right;
        margin-bottom: 0;
        width: 47.916666667%;
    }

    .template-front-page .widget-area .widget,
    .template-front-page.two-sidebars .widget-area .front-widgets {
        float: left;
        width: 51.875%;
        margin-bottom: 24px;
        margin-bottom: 1.714285714rem;
    }

    .template-front-page .widget-area .widget:nth-child(odd) {
        clear: right;
    }

    .template-front-page .widget-area .widget:nth-child(even),
    .template-front-page.two-sidebars .widget-area .front-widgets + .front-widgets {
        float: right;
        width: 39.0625%;
        margin: 0 0 24px;
        margin: 0 0 1.714285714rem;
    }

    .template-front-page.two-sidebars .widget,
    .template-front-page.two-sidebars .widget:nth-child(even) {
        float: none;
        width: auto;
    }

    .commentlist .children {
        margin-left: 48px;
        margin-left: 3.428571429rem;
    }
}

/* Minimum width of 960 pixels. */
@media screen and (min-width: 960px) {
    body {
        background-color: #e6e6e6;
    }

    body .site {
        padding: 0 40px;
        margin-top: 48px;
        margin-bottom: 48px;
        box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
    }

    body.custom-background-empty {
        background-color: #fff;
    }

    body.custom-background-empty .site,
    body.custom-background-white .site {
        padding: 0;
        margin-top: 0;
        margin-bottom: 0;
        box-shadow: none;
    }
}


/* =Print
----------------------------------------------- */

@media print {
    body {
        background: none !important;
        color: #000;
        font-size: 10pt;
    }

    footer a[rel=bookmark]:link:after,
    footer a[rel=bookmark]:visited:after {
        content: " [" attr(href) "] "; /* Show URLs */
    }

    a {
        text-decoration: none;
    }

    .entry-content img,
    .comment-content img,
    .author-avatar img,
    img.wp-post-image {
        border-radius: 0;
        box-shadow: none;
    }

    .site {
        clear: both !important;
        display: block !important;
        float: none !important;
        max-width: 100%;
        position: relative !important;
    }

    .site-header {
        margin-bottom: 72px;
        margin-bottom: 5.142857143rem;
        text-align: left;
    }

    .site-header h1 {
        font-size: 21pt;
        line-height: 1;
        text-align: left;
    }

    .site-header h2 {
        color: #000;
        font-size: 10pt;
        text-align: left;
    }

    .site-header h1 a,
    .site-header h2 a {
        color: #000;
    }

    .author-avatar,
    #colophon,
    #respond,
    .commentlist .comment-edit-link,
    .commentlist .reply,
    .entry-header .comments-link,
    .entry-meta .edit-link a,
    .page-link,
    .site-content nav,
    .widget-area,
    img.header-image,
    .main-navigation {
        display: none;
    }

    .wrapper {
        border-top: none;
        box-shadow: none;
    }

    .site-content {
        margin: 0;
        width: auto;
    }

    .entry-header .entry-title,
    .entry-title {
        font-size: 21pt;
    }

    footer.entry-meta,
    footer.entry-meta a {
        color: #444;
        font-size: 10pt;
    }

    .author-description {
        float: none;
        width: auto;
    }

    /* Comments */
    .commentlist > li.comment {
        background: none;
        position: relative;
        width: auto;
    }

    .commentlist .avatar {
        height: 39px;
        left: 2.2em;
        top: 2.2em;
        width: 39px;
    }

    .comments-area article header cite,
    .comments-area article header time {
        margin-left: 50px;
        margin-left: 3.57142857rem;
    }
}

.breadcrumb
div {
    display: inline;
    font-size: 13px;
    margin-left: -3px;
}

#wp-auto-top {
    position: fixed;
    top: 45%;
    right: 50%;
    display: block;
    margin-right: -540px;
    z-index: 9999;
}

#wp-auto-top-top, #wp-auto-top-comment, #wp-auto-top-bottom {
    background: url(https://www.lylinux.org/wp-content/plugins/wp-auto-top/img/1.png) no-repeat;
    position: relative;
    cursor: pointer;
    height: 25px;
    width: 29px;
    margin: 10px 0 0;
}

#wp-auto-top-comment {
    background-position: left -30px;
    height: 32px;
}

#wp-auto-top-bottom {
    background-position: left -68px;
}

#wp-auto-top-comment:hover {
    background-position: right -30px;
}

#wp-auto-top-top:hover {
    background-position: right 0;
}

#wp-auto-top-bottom:hover {
    background-position: right -68px;
}

.widget-login {
    margin-top: 15px !important;
}

/* ------------------------------------------------------------------------- *
 *  Comments
/* ------------------------------------------------------------------------- */
#comments {
    margin-top: 20px;
}

#pinglist-container {
    display: none;
}

.comment-tabs {
    margin-bottom: 20px;
    font-size: 15px;
    border-bottom: 2px solid #e5e5e5;
}

.comment-tabs li {
    float: left;
    margin-bottom: -2px;
}

.comment-tabs li a {
    display: block;
    padding: 0 10px 10px;
    font-weight: 600;
    color: #aaa;
    border-bottom: 2px solid #e5e5e5;
}

.comment-tabs li a:hover {
    color: #444;
    border-color: #ccc;
}

.comment-tabs li span {
    margin-left: 8px;
    padding: 0 6px;
    border-radius: 4px;
    background-color: #e5e5e5;
}

.comment-tabs li i {
    margin-right: 6px;
}

.comment-tabs li.active a {
    color: #e8554e;
    border-bottom-color: #e8554e;
}

.commentlist, .pinglist {
    margin-bottom: 20px;
}

.commentlist li, .pinglist li {
    padding-left: 60px;
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
}

.commentlist .comment-body, .pinglist li {
    position: relative;
    padding-bottom: 20px;
    clear: both;
    word-break: break-all;
}

.commentlist .comment-author,
.commentlist .comment-meta,
.commentlist .comment-awaiting-moderation {
    float: left;
    display: block;
    font-size: 13px;
    line-height: 22px;
}

.commentlist .comment-author {
    margin-right: 6px;
}

.commentlist .fn, .pinglist .ping-link {
    color: #444;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
}

.commentlist .says {
    display: none;
}

.commentlist .avatar {
    position: absolute;
    left: -60px;
    top: 0;
    width: 48px;
    height: 48px;
    border-radius: 100%;
}

.commentlist .comment-meta:before, .pinglist .ping-meta:before {

    vertical-align: 4%;
    margin-right: 3px;
    font-size: 10px;
    font-family: FontAwesome;
    color: #ccc;
}

.commentlist .comment-meta a, .pinglist .ping-meta {
    color: #aaa;
}

.commentlist .reply {
    font-size: 13px;
    line-height: 16px;
}

.commentlist .reply a,
.commentlist .comment-reply-chain {
    color: #aaa;
}

.commentlist .reply a:hover,
.commentlist .comment-reply-chain:hover {
    color: #444;
}

.comment-awaiting-moderation {
    color: #e8554e;
    font-style: normal;
}

/* pings */
.pinglist li {
    padding-left: 0;
}

/* comment text */
.commentlist .comment-body p {
    margin-bottom: 8px;
    color: #777;
    clear: both;
}

.commentlist .comment-body strong {
    font-weight: 600;
}

.commentlist .comment-body ol li {
    margin-left: 2em;
    padding: 0;
    list-style: decimal;
}

.commentlist .comment-body ul li {
    margin-left: 2em;
    padding: 0;
    list-style: square;
}

/* post author & admin comment */
.commentlist li.bypostauthor > .comment-body:after,
.commentlist li.comment-author-admin > .comment-body:after {
    display: block;
    position: absolute;
    content: "\f040";
    width: 12px;
    line-height: 12px;
    font-style: normal;
    font-family: FontAwesome;
    text-align: center;
    color: #fff;
    background-color: #e8554e;
}

.commentlist li.comment-author-admin > .comment-body:after {
    content: "\f005"; /* star for admin */
}

.commentlist li.bypostauthor > .comment-body:after,
.commentlist li.comment-author-admin > .comment-body:after {
    padding: 3px;
    top: 32px;
    left: -28px;
    font-size: 12px;
    border-radius: 100%;
}

.commentlist li li.bypostauthor > .comment-body:after,
.commentlist li li.comment-author-admin > .comment-body:after {
    padding: 2px;
    top: 22px;
    left: -26px;
    font-size: 10px;
    border-radius: 100%;
}

/* child comment */
.commentlist li ul {
}

.commentlist li li {
    margin: 0;
    padding-left: 48px;
}

.commentlist li li .avatar {
    top: 0;
    left: -48px;
    width: 36px;
    height: 36px;
}

.commentlist li li .comment-meta {
    left: 70px;
}

/*  comments : nav
/* ------------------------------------ */
.comments-nav {
    margin-bottom: 20px;
}

.comments-nav a {
    font-weight: 600;
}

.comments-nav .nav-previous {
    float: left;
}

.comments-nav .nav-next {
    float: right;
}

/*  comments : form
/* ------------------------------------ */
.logged-in-as,
.comment-notes,
.form-allowed-tags {
    display: none;
}

#respond {
    position: relative;
}

#reply-title {
    margin-bottom: 20px;
}

li #reply-title {
    margin: 0 !important;
    padding: 0;
    height: 0;
    font-size: 0;
    border-top: 0;
}

#cancel-comment-reply-link {
    float: right;
    bottom: 26px;
    right: 20px;
    font-size: 12px;
    color: #999;
}

#cancel-comment-reply-link:hover {
    color: #777;
}

#commentform {
    margin-bottom: 0;
    padding: 0;
    border-radius: 8px;
    background-color: transparent;
}

#commentform p.comment-form-author {
    float: left;
    width: 48%;
}

#commentform p.comment-form-email {
    float: right;
    width: 48%;
}

#commentform p.comment-form-url,
#commentform p.comment-form-comment {
    clear: both;
}

#commentform label {
    display: block;
    padding: 6px 0;
    font-weight: 600;
}

#commentform input[type="text"],
#commentform textarea {
    max-width: 100%;
    width: 100%;
}

#commentform textarea {
    height: 100px;
}

#commentform p.form-submit {
    margin-top: 10px;
}

.logged-in #reply-title {
    margin-bottom: 20px;
}

.logged-in #commentform p.comment-form-comment {
    margin-top: 10px;
}

.logged-in #commentform p.comment-form-comment label {
    display: none;
}

.heading,
#reply-title {
    margin-bottom: 1em;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    color: #222;
}

.heading i {
    margin-right: 6px;
    font-size: 22px;
}

.group:before {
    content: "";
    display: table;
}

.group:after {
    content: "";
    display: table;
    clear: both;
}

.cancel-comment {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
}

#rocket {
    position: fixed;
    right: 50px;
    bottom: 50px;
    display: block;
    visibility: hidden;
    width: 26px;
    height: 48px;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAB8CAYAAAB356CJAAAACXBIWXMAAAsTAAALEwEAmpwYAAAKTWlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVN3WJP3Fj7f92UPVkLY8LGXbIEAIiOsCMgQWaIQkgBhhBASQMWFiApWFBURnEhVxILVCkidiOKgKLhnQYqIWotVXDjuH9yntX167+3t+9f7vOec5/zOec8PgBESJpHmomoAOVKFPDrYH49PSMTJvYACFUjgBCAQ5svCZwXFAADwA3l4fnSwP/wBr28AAgBw1S4kEsfh/4O6UCZXACCRAOAiEucLAZBSAMguVMgUAMgYALBTs2QKAJQAAGx5fEIiAKoNAOz0ST4FANipk9wXANiiHKkIAI0BAJkoRyQCQLsAYFWBUiwCwMIAoKxAIi4EwK4BgFm2MkcCgL0FAHaOWJAPQGAAgJlCLMwAIDgCAEMeE80DIEwDoDDSv+CpX3CFuEgBAMDLlc2XS9IzFLiV0Bp38vDg4iHiwmyxQmEXKRBmCeQinJebIxNI5wNMzgwAABr50cH+OD+Q5+bk4eZm52zv9MWi/mvwbyI+IfHf/ryMAgQAEE7P79pf5eXWA3DHAbB1v2upWwDaVgBo3/ldM9sJoFoK0Hr5i3k4/EAenqFQyDwdHAoLC+0lYqG9MOOLPv8z4W/gi372/EAe/tt68ABxmkCZrcCjg/1xYW52rlKO58sEQjFu9+cj/seFf/2OKdHiNLFcLBWK8ViJuFAiTcd5uVKRRCHJleIS6X8y8R+W/QmTdw0ArIZPwE62B7XLbMB+7gECiw5Y0nYAQH7zLYwaC5EAEGc0Mnn3AACTv/mPQCsBAM2XpOMAALzoGFyolBdMxggAAESggSqwQQcMwRSswA6cwR28wBcCYQZEQAwkwDwQQgbkgBwKoRiWQRlUwDrYBLWwAxqgEZrhELTBMTgN5+ASXIHrcBcGYBiewhi8hgkEQcgIE2EhOogRYo7YIs4IF5mOBCJhSDSSgKQg6YgUUSLFyHKkAqlCapFdSCPyLXIUOY1cQPqQ28ggMor8irxHMZSBslED1AJ1QLmoHxqKxqBz0XQ0D12AlqJr0Rq0Hj2AtqKn0UvodXQAfYqOY4DRMQ5mjNlhXIyHRWCJWBomxxZj5Vg1Vo81Yx1YN3YVG8CeYe8IJAKLgBPsCF6EEMJsgpCQR1hMWEOoJewjtBK6CFcJg4Qxwicik6hPtCV6EvnEeGI6sZBYRqwm7iEeIZ4lXicOE1+TSCQOyZLkTgohJZAySQtJa0jbSC2kU6Q+0hBpnEwm65Btyd7kCLKArCCXkbeQD5BPkvvJw+S3FDrFiOJMCaIkUqSUEko1ZT/lBKWfMkKZoKpRzame1AiqiDqfWkltoHZQL1OHqRM0dZolzZsWQ8ukLaPV0JppZ2n3aC/pdLoJ3YMeRZfQl9Jr6Afp5+mD9HcMDYYNg8dIYigZaxl7GacYtxkvmUymBdOXmchUMNcyG5lnmA+Yb1VYKvYqfBWRyhKVOpVWlX6V56pUVXNVP9V5qgtUq1UPq15WfaZGVbNQ46kJ1Bar1akdVbupNq7OUndSj1DPUV+jvl/9gvpjDbKGhUaghkijVGO3xhmNIRbGMmXxWELWclYD6yxrmE1iW7L57Ex2Bfsbdi97TFNDc6pmrGaRZp3mcc0BDsax4PA52ZxKziHODc57LQMtPy2x1mqtZq1+rTfaetq+2mLtcu0W7eva73VwnUCdLJ31Om0693UJuja6UbqFutt1z+o+02PreekJ9cr1Dund0Uf1bfSj9Rfq79bv0R83MDQINpAZbDE4Y/DMkGPoa5hpuNHwhOGoEctoupHEaKPRSaMnuCbuh2fjNXgXPmasbxxirDTeZdxrPGFiaTLbpMSkxeS+Kc2Ua5pmutG003TMzMgs3KzYrMnsjjnVnGueYb7ZvNv8jYWlRZzFSos2i8eW2pZ8ywWWTZb3rJhWPlZ5VvVW16xJ1lzrLOtt1ldsUBtXmwybOpvLtqitm63Edptt3xTiFI8p0in1U27aMez87ArsmuwG7Tn2YfYl9m32zx3MHBId1jt0O3xydHXMdmxwvOuk4TTDqcSpw+lXZxtnoXOd8zUXpkuQyxKXdpcXU22niqdun3rLleUa7rrStdP1o5u7m9yt2W3U3cw9xX2r+00umxvJXcM970H08PdY4nHM452nm6fC85DnL152Xlle+70eT7OcJp7WMG3I28Rb4L3Le2A6Pj1l+s7pAz7GPgKfep+Hvqa+It89viN+1n6Zfgf8nvs7+sv9j/i/4XnyFvFOBWABwQHlAb2BGoGzA2sDHwSZBKUHNQWNBbsGLww+FUIMCQ1ZH3KTb8AX8hv5YzPcZyya0RXKCJ0VWhv6MMwmTB7WEY6GzwjfEH5vpvlM6cy2CIjgR2yIuB9pGZkX+X0UKSoyqi7qUbRTdHF09yzWrORZ+2e9jvGPqYy5O9tqtnJ2Z6xqbFJsY+ybuIC4qriBeIf4RfGXEnQTJAntieTE2MQ9ieNzAudsmjOc5JpUlnRjruXcorkX5unOy553PFk1WZB8OIWYEpeyP+WDIEJQLxhP5aduTR0T8oSbhU9FvqKNolGxt7hKPJLmnVaV9jjdO31D+miGT0Z1xjMJT1IreZEZkrkj801WRNberM/ZcdktOZSclJyjUg1plrQr1zC3KLdPZisrkw3keeZtyhuTh8r35CP5c/PbFWyFTNGjtFKuUA4WTC+oK3hbGFt4uEi9SFrUM99m/ur5IwuCFny9kLBQuLCz2Lh4WfHgIr9FuxYji1MXdy4xXVK6ZHhp8NJ9y2jLspb9UOJYUlXyannc8o5Sg9KlpUMrglc0lamUycturvRauWMVYZVkVe9ql9VbVn8qF5VfrHCsqK74sEa45uJXTl/VfPV5bdra3kq3yu3rSOuk626s91m/r0q9akHV0IbwDa0b8Y3lG19tSt50oXpq9Y7NtM3KzQM1YTXtW8y2rNvyoTaj9nqdf13LVv2tq7e+2Sba1r/dd3vzDoMdFTve75TsvLUreFdrvUV99W7S7oLdjxpiG7q/5n7duEd3T8Wej3ulewf2Re/ranRvbNyvv7+yCW1SNo0eSDpw5ZuAb9qb7Zp3tXBaKg7CQeXBJ9+mfHvjUOihzsPcw83fmX+39QjrSHkr0jq/dawto22gPaG97+iMo50dXh1Hvrf/fu8x42N1xzWPV56gnSg98fnkgpPjp2Snnp1OPz3Umdx590z8mWtdUV29Z0PPnj8XdO5Mt1/3yfPe549d8Lxw9CL3Ytslt0utPa49R35w/eFIr1tv62X3y+1XPK509E3rO9Hv03/6asDVc9f41y5dn3m978bsG7duJt0cuCW69fh29u0XdwruTNxdeo94r/y+2v3qB/oP6n+0/rFlwG3g+GDAYM/DWQ/vDgmHnv6U/9OH4dJHzEfVI0YjjY+dHx8bDRq98mTOk+GnsqcTz8p+Vv9563Or59/94vtLz1j82PAL+YvPv655qfNy76uprzrHI8cfvM55PfGm/K3O233vuO+638e9H5ko/ED+UPPR+mPHp9BP9z7nfP78L/eE8/sl0p8zAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAbdSURBVHja5NlbbBRVGAfw5VID+LAK8cEoxqTgmw8kPPhwipTGxJTDUAVBQBMNKtZboiDE2ES8pFEjGhNkkCrin3JbZo4YCqloUOoKJCDIRWyRAgW6R3dobU2bJtj6+eCMTqczs2d3Zh6Mm3xpdvc7++vMnHNmzvlSRJQqJgA8B8AC8EQx7YoBxgD4CAC54i0Ao2KDAIwCsNGDOPF6nNBLAYgTiyNDAKYDGCwA/Q7gtpIhAKMBHC+AOPF5FGiBIuLEXaVCR4uEzKIhAHcViRCAP4OuVRi0pgSIACwvFurw/ohhGJTP56m7u5vy+TwZhuEHHVKGANzmh3R3d48IH2wQwPWq0CIv5ByJN/L5vN9RzVKF3vQ29kOcULlOQZAZ8YjWq0JHI1wjAvClKnTJr+sq9joCcEoV6itxDDmRU4UoYvT8f6GeiFCXKpSLCJ1XhU5GhI6oQs0RoT2qUENESFeFlkeEXlCFZkeEqlWhWyNCtxSE7GdsPSL0AYAxgRCACQB2xzAzEAABYMIIyEYOxIQ4sR/AOC+UiRlxYvM/EID5CSFO1DjQoYShFmfFMJgwdC0FYHzCCAEYck5dZ8LQWQdCwpAe19xWKCocqAzA1YSQiwBGuwfs2yHJpwDcEBJHQtqu9s4MU0KSHy+wBF0c1NsATPabVL/ye6IBML4AVAbgik/bvUGz9zyf5HrFTY9VPm0XBkFlAH7xrN5uVYQmAuh3P0Q6M3fQje81V/LWIne+1gY9oPglTwLQai+Wby8SugnAj/Y2W7nqqnyUz2cagDb7P24DoAXshI2Nsl9XZXdXb/etintjMBswVrJxQ0H3rMG4oYEAaOA/e+rqAqC6uKHyAKg8VsjGDnqQg7Hve9tQrQeqTQpKuybOfgDpRCDParAhkZKBC5pmQ9MShWysvtg2RSOZTKYu0WqLYRhjTdMUQghqbGxMrtpimuYuIQQJIWj79u3JVFsMw3jHQYQQfhuC0asthmFUCiGG3JAQgjZv3hxftaW5uXmMEOJnLyKEoK1bt8ZXbTEMY5kfIoSgHTt2xFdtEUK0BkE7d+6Mp9piGMY9QYgQgkzTjKfaYprmJvcPn/vhOHV8+D511j5EuUWzqXPZEmpd9x59/102WrVFCPGrG7myopZkzUyS2ox/Ijf3bjq/8mkvpl5tMQzjDvfRdKx7l+TcmZR7bAH1nThGf167Rn0njlHn0gcoV1NJrWvXlFZtMQzjaTfU+eQSknMqqP+n0+R+9Z05RXJOBXUsW1xatcUwjAY3lLu/iuScCvJ7SW0GXVlUXVq1xTTN/cOghfcGH5E2w++I1Kot3vFzceP6vy++5xrlli6gXM1MOvOxXlq1RQiR946by6tXkpw7vNfJmko698qL1NzUVFq1RQgx4DdIL2z7lDqfephyD2l05dlH6ELjRj9EvdoSNiMozA7qtQlVSAjx34H6IkJdqlBXROi86oBtjwgdUYUOR4T2qEJmREhXnVTrI0IvqEJLIg7YalWoXAUKqSwXrrZIzsZIzvSfT5woCTr2zdckOftAchZcbZGcTZCc7ZacUfu+vQWhTCYzAjq9vZEkZyQ5E5KzkdUWGzlgJ9GFjetLgtrerXcgkpztl5yN80IZVwJdWvVMQcizqiAAdPHZR90QSc7+rbZIzuZ7vqTcfZXUdvp0KOR9/j78bQvlaiq9EEnOahzokM+X1P7FnlBoy5Ytw69P4yd+CEnOWlKSs9GSs0G/hI41bxQ1WNtffj4IupaSnI0P+JJyD1bT8aNHlbr24ZYWys2rCoKGnFPXGYS1N+1S6nFnPtaDEJKcnXUgBCVdfrHWF9q2bdswqGPZ4jBId6DZIUnUnm0J7Qgnd5lhCEnOKhyoTHJ2NSjx0qurQifTCytqw5CLkrPR7gH7dkhy6HaZ5OzbkLarvTPDlJDkRQWg+UG9TXI22W9S/conWUrOrisAjbVPkbft3qDZe55P8qsqmx6SsxU+bRcGQWWSs19ciX9Izm5WhG6UnPW52vY4M3fQje81V3JR1RbJ2Vr32Cl0h50kOWuVnHVIzm4vErpJcvaj5MySnKlVWyRnw7bHLF1L9WbTWm823dabTZP9V7N0bUQ7yVnp1RZL16p69k0eshHqzaapZ9/kIUvX4q22WLqW7cpMJzfUlZlOlq5l44YGrQ3VwyBrQzVZujYYNzRg6Rr1tkz8G2qZSJaukaVrA7GfOkvX6LemqdSbTdNvTVMdKPZTV2fpGl3dNIt6s2m6ummWA9XFDZXbP0zdn93pIGTpWnncUMrStYMugOz3qSSgWg9UmxSUtnSt30b67feJQClL1xpsqMH5LClomg1NSxpKWbpW736v0v6vAQCo4CbBrd8RBQAAAABJRU5ErkJggg==") no-repeat 50% 0;
    cursor: pointer;
    -webkit-transition: all 0s;
    transition: all 0s;
}

#rocket:hover {
    background-position: 50% -62px;
}

#rocket.show {
    visibility: visible;
    opacity: 1;
}

#rocket.move {
    background-position: 50% -62px;
    -webkit-animation: toTop .8s ease-in;
    animation: toTop .8s ease-in;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}

.comment-markdown {
    float: right;
    font-size: small;
}

.breadcrumb {
    margin-bottom: 20px;
    list-style: none;
    border-radius: 4px;
}

.breadcrumb > li {
    display: inline-block;
}

.breadcrumb > li + li:before {
    color: #ccc;
    content: "/\00a0";
}

.breadcrumb > .active {
    color: #777;
}

.break_line {
    height: 1px;
    border: none;
    /*border-top: 1px dashed #f5d6d6;*/
}

/* 移动端与内容响应式自适应 */
.entry-content table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
}

.entry-content pre,
.entry-content .codehilite {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    word-wrap: normal;
}

.entry-content img {
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   现代极客科技风主题升级 (Modern Tech-Geek Design System)
   ========================================================================== */
body {
    background-color: var(--bg-body) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-sans) !important;
}

#page {
    max-width: 1140px !important;
    margin: 14px auto !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* 顶部导航与 Header (现代 Flexbox 架构，彻底消除高度塌陷与错位) */
.site-header {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    padding: 10px 20px !important;
    margin: 10px 0 16px 0 !important;
    box-shadow: var(--card-shadow) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    min-height: auto !important;
    height: auto !important;
}

.site-header::after,
.site-header::before {
    display: none !important;
}

.site-header hgroup {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.site-title {
    margin: 0 !important;
    line-height: 1.2 !important;
    font-size: 16.5px !important;
}

.site-title a {
    color: var(--text-primary) !important;
    font-weight: 700 !important;
    font-size: 16.5px !important;
    letter-spacing: -0.4px !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
}

.site-title a::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-color);
    box-shadow: 0 0 8px var(--primary-color);
}

.site-description {
    color: var(--text-muted) !important;
    font-size: 11.5px !important;
    margin-top: 2px !important;
    font-family: var(--font-mono) !important;
    font-weight: 400 !important;
}

/* 导航栏排版 */
.main-navigation {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    text-align: left !important;
}

.main-navigation .menu-%e8%8f%9c%e5%8d%95-container,
.main-navigation div[class*="-container"] {
    display: flex !important;
    align-items: center !important;
}

.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    width: auto !important;
    background: transparent !important;
}

.main-navigation li {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
    list-style: none !important;
}

.main-navigation li a {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
    padding: 5px 10px !important;
    border-radius: 6px !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: var(--text-secondary) !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    border: 1px solid transparent !important;
    text-transform: none !important;
    height: auto !important;
}

.main-navigation li a:hover {
    color: var(--primary-color) !important;
    background: var(--bg-surface-hover) !important;
    border-color: var(--border-color) !important;
}

/* ==========================================================================
   x7lab.cn 一体化吸顶毛玻璃导航栏 (Sticky Glass Navbar)
   ========================================================================== */
.site-header.tech-glass-navbar,
.tech-glass-navbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    background: rgba(8, 10, 17, 0.88) !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 6px 0 !important;
    margin: 0 0 24px 0 !important;
    width: 100% !important;
    display: block !important;
}

html[data-theme="light"] .site-header.tech-glass-navbar,
html[data-theme="light"] .tech-glass-navbar {
    background: rgba(255, 255, 255, 0.88) !important;
    border-bottom-color: rgba(226, 232, 240, 0.9) !important;
}

.site-header.tech-glass-navbar .main-navigation.tech-navbar-container,
.tech-navbar-container {
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
}

.site-header.tech-glass-navbar .tech-navbar-inner,
.tech-navbar-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    height: 52px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 方案 B: 左侧品牌与紧邻导航包装层 */
.site-header.tech-glass-navbar .tech-navbar-left,
.tech-navbar-left {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    flex-shrink: 0 !important;
}

/* 1. 左侧 Logo 品牌区 */
.tech-navbar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none !important;
    color: inherit;
    flex-shrink: 0;
}

.tech-logo-box {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, #6366f1 0%, #06b6d4 50%, #38bdf8 100%);
    padding: 1.5px;
    box-shadow: 0 4px 16px rgba(6, 182, 212, 0.25);
    transition: transform 0.2s ease;
}

.tech-navbar-brand:hover .tech-logo-box {
    transform: scale(1.05);
}

.tech-logo-inner {
    width: 100%;
    height: 100%;
    background: #0d1322;
    border-radius: 10.5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

html[data-theme="light"] .tech-logo-inner {
    background: #ffffff;
}

.tech-logo-text {
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 0.5px;
}

.tech-brand-meta {
    display: flex;
    flex-direction: column;
}

.tech-brand-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tech-brand-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.tech-brand-badge {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8;
    border: 1px solid rgba(99, 102, 241, 0.3);
    font-family: var(--font-mono);
}

.tech-brand-desc {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.2;
    margin-top: 2px;
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 2. 中间药丸胶囊导航 */
.tech-nav-pill-wrapper {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    padding: 3px 6px;
    backdrop-filter: blur(8px);
}

html[data-theme="light"] .tech-nav-pill-wrapper {
    background: rgba(15, 23, 42, 0.03);
    border-color: rgba(226, 232, 240, 0.9);
}

.tech-nav-pill-wrapper ul.nav-menu {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tech-nav-pill-wrapper ul.nav-menu li a {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.18s ease;
}

.tech-nav-pill-wrapper ul.nav-menu li a:hover {
    color: var(--accent-cyan);
    background: rgba(255, 255, 255, 0.06);
}

.tech-nav-pill-wrapper ul.nav-menu li.current-menu-item > a,
.tech-nav-pill-wrapper ul.nav-menu li.current_page_item > a {
    color: #ffffff !important;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.25) 0%, rgba(99, 102, 241, 0.25) 100%) !important;
    border: 1px solid rgba(6, 182, 212, 0.4) !important;
    box-shadow: 0 0 14px rgba(6, 182, 212, 0.2) !important;
    font-weight: 600 !important;
}

html[data-theme="light"] .tech-nav-pill-wrapper ul.nav-menu li.current-menu-item > a {
    color: #0284c7 !important;
    background: #e0f2fe !important;
    border-color: #bae6fd !important;
    box-shadow: none !important;
}

/* 3. 右侧操作流 (方案 B: 强力居右对齐) */
.tech-navbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}

.tech-icon-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    text-decoration: none !important;
    transition: all 0.18s ease;
}

.tech-icon-nav-btn:hover {
    color: var(--text-primary);
    border-color: var(--primary-color);
    background: rgba(6, 182, 212, 0.1);
    transform: translateY(-1px);
}

.tech-nav-divider {
    width: 1px;
    height: 18px;
    background: var(--border-color);
    margin: 0 4px;
}

.tech-nav-login-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    height: 34px;
    border-radius: 9999px;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(99, 102, 241, 0.15) 100%);
    border: 1px solid rgba(6, 182, 212, 0.35);
    color: var(--text-primary) !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.tech-nav-login-btn:hover {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.28) 0%, rgba(99, 102, 241, 0.28) 100%);
    border-color: var(--accent-cyan);
    box-shadow: 0 0 16px rgba(6, 182, 212, 0.25);
    transform: translateY(-1px);
}

/* 用户登录态下拉菜单 */
.tech-user-menu-wrapper {
    position: relative;
}

.tech-user-avatar-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 10px 3px 4px;
    height: 34px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.tech-user-avatar-btn:hover,
.tech-user-menu-wrapper:hover .tech-user-avatar-btn {
    border-color: var(--primary-color);
    background: rgba(6, 182, 212, 0.1);
}

.tech-user-avatar-text {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, #06b6d4 0%, #6366f1 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    font-family: var(--font-mono);
}

.tech-user-name {
    font-size: 13px;
    font-weight: 600;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tech-dropdown-arrow {
    transition: transform 0.2s ease;
}

.tech-user-menu-wrapper:hover .tech-dropdown-arrow {
    transform: rotate(180deg);
}

.tech-user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 170px;
    background: #0f172a;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4), 0 0 1px rgba(255, 255, 255, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: all 0.18s ease;
    z-index: 1000;
}

html[data-theme="light"] .tech-user-dropdown {
    background: #ffffff;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12), 0 0 1px rgba(0, 0, 0, 0.08);
}

.tech-user-menu-wrapper:hover .tech-user-dropdown,
.tech-user-menu-wrapper:focus-within .tech-user-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.tech-dropdown-header {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dropdown-user-role {
    font-size: 11px;
    color: var(--accent-cyan);
    font-weight: 600;
}

.dropdown-user-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.tech-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary) !important;
    text-decoration: none !important;
    transition: all 0.15s ease;
}

.tech-dropdown-item:hover {
    background: rgba(6, 182, 212, 0.12);
    color: var(--accent-cyan) !important;
}

.dropdown-item-danger:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444 !important;
}

.tech-admin-quick-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.18s ease;
}

.tech-admin-quick-btn:hover {
    border-color: var(--primary-color);
    background: rgba(6, 182, 212, 0.1);
    transform: translateY(-1px);
}

.tech-mobile-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    padding: 6px;
    cursor: pointer;
}

@media (max-width: 900px) {
    .site-header.tech-glass-navbar .main-navigation.tech-navbar-container,
    .tech-navbar-container {
        padding: 0 12px !important;
    }
    .tech-navbar-inner {
        gap: 8px !important;
    }
    .tech-navbar-left {
        gap: 8px !important;
    }
    .tech-nav-pill-wrapper {
        display: none !important;
    }
    .tech-mobile-toggle {
        display: inline-flex !important;
    }
    /* 移动端顶栏紧凑排布，隐藏次要按钮避免撑开宽度导致整体右偏 */
    .tech-icon-nav-btn.tech-nav-rss-btn,
    .tech-icon-nav-btn.tech-nav-github-btn,
    .tech-nav-divider {
        display: none !important;
    }
    .tech-navbar-actions {
        gap: 6px !important;
        margin-left: auto !important;
    }
    .spotlight-nav-btn {
        padding: 0 8px !important;
        margin-left: 0 !important;
    }
    .spotlight-nav-kbd {
        display: none !important;
    }
    .tech-brand-meta {
        display: none !important;
    }
}
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a,
.main-navigation .current-menu-ancestor > a {
    color: var(--primary-color) !important;
    background: var(--accent-badge) !important;
    border: 1px solid rgba(37, 99, 235, 0.25) !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
}

html[data-theme="dark"] .main-navigation .current-menu-item > a,
html[data-theme="dark"] .main-navigation .current_page_item > a,
html[data-theme="dark"] .main-navigation .current-menu-ancestor > a {
    color: #60a5fa !important;
    background: rgba(37, 99, 235, 0.2) !important;
    border: 1px solid rgba(96, 165, 250, 0.35) !important;
}

/* 导航栏 ⌘K 搜索入口胶囊 */
.spotlight-nav-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 36px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    background: var(--bg-surface-hover) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-secondary) !important;
    cursor: pointer !important;
    margin-left: 8px !important;
    transition: all 0.2s ease !important;
    font-size: 13px !important;
    flex-shrink: 0 !important;
}

.spotlight-nav-btn:hover {
    background: var(--border-color) !important;
    color: var(--text-primary) !important;
    border-color: var(--primary-color) !important;
}

.spotlight-nav-btn svg {
    stroke: currentColor;
}

.spotlight-nav-kbd {
    font-size: 10.5px;
    font-family: var(--font-mono);
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 1px 5px;
    color: var(--text-muted);
}

/* 全屏毛玻璃 ⌘K Spotlight 快速检索浮层 */
.spotlight-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
    box-sizing: border-box;
}

.spotlight-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.spotlight-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 600px;
    margin: 0 16px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.4), 0 0 1px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    animation: spotlightPopIn 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes spotlightPopIn {
    from { opacity: 0; transform: translateY(-12px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.spotlight-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-surface);
}

.spotlight-search-icon {
    color: var(--text-muted);
    flex-shrink: 0;
}

.spotlight-input {
    flex: 1;
    background: transparent !important;
    border: none !important;
    color: var(--text-primary) !important;
    font-size: 15px !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

.spotlight-input::placeholder {
    color: var(--text-muted);
    font-size: 13.5px;
}

.spotlight-esc-kbd {
    font-size: 10.5px;
    font-family: var(--font-mono);
    color: var(--text-muted);
    background: var(--bg-surface-hover);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: 2px 6px;
    cursor: pointer;
}

.spotlight-esc-kbd:hover {
    color: var(--text-primary);
}

.spotlight-body {
    max-height: 380px;
    overflow-y: auto;
    padding: 8px;
}

.spotlight-empty-state {
    padding: 36px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

.spotlight-empty-state p {
    margin-top: 6px;
}

.spotlight-empty-state kbd {
    background: var(--bg-surface-hover);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 1px 4px;
    font-size: 11px;
    font-family: var(--font-mono);
}

.spotlight-loading {
    padding: 24px;
    text-align: center;
    color: var(--primary-color);
    font-size: 13px;
    font-weight: 500;
}

.spotlight-result-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    text-decoration: none !important;
    transition: all 0.12s ease;
    margin-bottom: 2px;
}

.spotlight-result-item:hover,
.spotlight-result-item.active {
    background: var(--bg-surface-hover);
}

.spotlight-item-main {
    flex: 1;
    min-width: 0;
}

.spotlight-item-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.spotlight-result-item:hover .spotlight-item-title,
.spotlight-result-item.active .spotlight-item-title {
    color: var(--primary-color);
}

.spotlight-item-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--text-muted);
}

.spotlight-meta-sep {
    opacity: 0.5;
}

.spotlight-item-arrow {
    color: var(--text-muted);
    font-size: 14px;
    opacity: 0;
    transform: translateX(-4px);
    transition: all 0.15s ease;
}

.spotlight-result-item:hover .spotlight-item-arrow,
.spotlight-result-item.active .spotlight-item-arrow {
    opacity: 1;
    color: var(--primary-color);
    transform: translateX(0);
}

.spotlight-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    padding: 8px 18px;
    background: var(--bg-surface-hover);
    border-top: 1px solid var(--border-color);
    font-size: 11px;
    color: var(--text-muted);
}

.spotlight-key {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 1px 4px;
    font-family: var(--font-mono);
}

/* 主题切换开关 (纯 CSS 驱动双模 SVG，零延时绝无字符跳动) */
.theme-switch-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--bg-surface-hover) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-secondary) !important;
    cursor: pointer !important;
    margin-left: 8px !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

.theme-switch-btn:hover {
    background: var(--border-color) !important;
    color: var(--text-primary) !important;
    transform: scale(1.05);
}

.theme-switch-btn svg {
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor !important;
    flex-shrink: 0 !important;
    pointer-events: none !important;
}

/* 默认浅色模式：显示月亮，隐藏太阳 */
.theme-switch-btn .theme-icon-sun {
    display: none !important;
}
.theme-switch-btn .theme-icon-moon {
    display: block !important;
}

/* 暗黑模式：显示金黄太阳，隐藏月亮 */
html[data-theme="dark"] .theme-switch-btn .theme-icon-sun {
    display: block !important;
    color: #facc15 !important;
}
html[data-theme="dark"] .theme-switch-btn .theme-icon-moon {
    display: none !important;
}

@media screen and (min-width: 768px) {
    .menu-toggle {
        display: none !important;
    }
}

/* 现代卡片文章流 (Tech Cards - 视口级 content-visibility 懒渲染加速) */
.site-content article.post {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color);
    border-radius: 12px !important;
    padding: 18px 22px !important;
    margin-bottom: 14px !important;
    box-shadow: var(--card-shadow) !important;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease;
    content-visibility: auto;
    contain-intrinsic-size: 0 220px;
}

.site-content article.post:hover {
    transform: translateY(-2px);
    box-shadow: var(--card-shadow-hover) !important;
    border-color: var(--primary-color);
}

.entry-header .entry-title {
    font-size: 17px !important;
    font-weight: 700;
    line-height: 1.35 !important;
    margin-bottom: 8px;
}

.entry-header .entry-title a {
    color: var(--text-primary) !important;
    text-decoration: none;
    transition: color 0.2s ease;
}

.entry-header .entry-title a:hover {
    color: var(--primary-color) !important;
}

/* 现代胶囊 Badge */
.tech-badge-category {
    display: inline-block;
    background: var(--accent-badge);
    color: var(--accent-badge-text);
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    margin-right: 8px;
    vertical-align: middle;
}

.tech-badge-top {
    display: inline-block;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: #ffffff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    margin-right: 8px;
    letter-spacing: 0.5px;
    vertical-align: middle;
}

.tech-reading-time {
    color: var(--text-muted);
    font-size: 12px;
    font-family: var(--font-mono);
    margin-left: 10px;
}

.entry-content {
    color: var(--text-secondary) !important;
    font-size: 13.5px;
    line-height: 1.62;
}

/* 侧边栏卡片化 */
.widget-area .widget {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px !important;
    margin-bottom: 20px !important;
    box-shadow: var(--card-shadow);
}

.widget-title {
    color: var(--text-primary) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: -0.3px;
    border-bottom: 1px solid var(--border-color) !important;
    padding-bottom: 10px !important;
    margin-bottom: 14px !important;
    text-transform: uppercase;
}

.widget ul li {
    border-bottom: 1px dashed var(--border-color);
    padding: 8px 0 !important;
    color: var(--text-secondary);
}

.widget ul li a {
    color: var(--text-secondary) !important;
    text-decoration: none;
    transition: color 0.2s;
}

.widget ul li a:hover {
    color: var(--primary-color) !important;
}

/* 科技感排行榜角标 */
.tech-rank-badge {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 4px;
    background: var(--border-color);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-mono);
    margin-right: 8px;
}

.tech-rank-1 { background: #ef4444; color: #fff; }
.tech-rank-2 { background: #f97316; color: #fff; }
.tech-rank-3 { background: #f59e0b; color: #fff; }

/* 芯片式现代标签云 */
.tagcloud a {
    display: inline-block;
    background: var(--bg-surface-hover) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-color);
    padding: 4px 10px !important;
    border-radius: 16px !important;
    font-size: 12px !important;
    margin: 3px 4px 3px 0 !important;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.tagcloud a:hover {
    background: var(--primary-color) !important;
    color: #ffffff !important;
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

/* 现代化博主开发者技术名片 (Dev Profile Card) */
.tech-profile-widget {
    margin-bottom: 20px !important;
}

.tech-profile-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 20px 18px;
    text-align: center;
    box-shadow: var(--card-shadow);
    transition: all 0.2s ease;
}

.tech-profile-card:hover {
    border-color: var(--primary-color);
    box-shadow: var(--card-shadow-hover);
}

.tech-profile-avatar-wrap {
    position: relative;
    width: 68px;
    height: 68px;
    margin: 0 auto 12px auto;
}

.tech-avatar-glow-ring {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1 0%, #06b6d4 50%, #38bdf8 100%);
    padding: 2.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 22px rgba(6, 182, 212, 0.35);
    transition: transform 0.2s ease;
}

.tech-avatar-glow-ring:hover {
    transform: scale(1.05);
}

.tech-profile-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: #0d1322;
}

.tech-profile-status-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #10b981;
    border: 2px solid var(--bg-surface);
    box-shadow: 0 0 8px #10b981;
    animation: pulseGlow 2s infinite;
}

.tech-profile-tag-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 8px;
}

.tech-profile-role-badge {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(6, 182, 212, 0.12);
    color: #38bdf8;
    border: 1px solid rgba(6, 182, 212, 0.3);
    font-family: var(--font-mono);
}

.tech-profile-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 6px 0;
    letter-spacing: -0.3px;
}

.tech-profile-bio {
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0 0 14px 0;
}

.tech-profile-social-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.tech-profile-social-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 8px;
    background: var(--bg-surface-hover);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 11.5px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.16s ease;
}

.tech-profile-social-btn:hover {
    background: var(--primary-color);
    color: #ffffff !important;
    border-color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px var(--primary-glow);
}

.tech-profile-admin-row {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px dashed var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 11px;
}

.tech-profile-admin-link {
    color: var(--text-muted);
    text-decoration: none !important;
    transition: color 0.15s ease;
}

.tech-profile-admin-link:hover {
    color: var(--primary-color);
}

/* 现代化搜索胶囊 */
.searchform div {
    display: flex;
    align-items: center;
    background: var(--bg-surface-hover);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 4px 12px;
    transition: border-color 0.2s;
}

.searchform div:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px var(--primary-glow);
}

.searchform input[type="text"] {
    border: none !important;
    background: transparent !important;
    color: var(--text-primary) !important;
    padding: 6px 8px !important;
    width: 100% !important;
    outline: none !important;
}

.searchform input[type="submit"] {
    background: var(--primary-color) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 4px 14px !important;
    font-size: 12px !important;
    cursor: pointer;
}

/* 主题切换开关 */
.theme-switch-btn {
    background: var(--bg-surface-hover);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: 20px;
    padding: 6px 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    margin-left: 14px;
    transition: all 0.2s ease;
}

/* 首页 Tech Hero 终端横幅 */
.tech-hero-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    margin-bottom: 24px;
    overflow: hidden;
    box-shadow: var(--card-shadow);
    transition: all 0.3s ease;
    width: 100% !important;
    box-sizing: border-box !important;
}

.tech-hero-header {
    background: var(--bg-surface-hover);
    border-bottom: 1px solid var(--border-color);
    padding: 10px 16px;
    display: flex;
    align-items: center;
}

.tech-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

.dot-red { background: #ff5f56; }
.dot-yellow { background: #ffbd2e; }
.dot-green { background: #27c93f; }

.tech-terminal-title {
    color: var(--text-muted);
    font-size: 11px;
    font-family: var(--font-mono);
    margin-left: 8px;
}

.tech-hero-body {
    padding: 16px 20px;
}

.tech-terminal-line {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.tech-prompt-arrow { color: #06b6d4; font-weight: 800; margin-right: 4px; }
.tech-prompt-path { color: #818cf8; font-weight: 700; margin-right: 6px; }
.tech-prompt-cmd { color: #34d399; font-weight: 600; }

.tech-prompt {
    color: #10b981;
    font-weight: 700;
    margin-right: 6px;
}

.tech-hero-heading {
    font-size: 19px !important;
    font-weight: 800;
    letter-spacing: -0.4px;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.tech-hero-sub {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 14px;
}

/* 四维技术资产指标卡片群 */
.tech-hero-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

@media (max-width: 768px) {
    .tech-hero-stats-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}

.tech-hero-stat-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    transition: all 0.2s ease;
}

html[data-theme="light"] .tech-hero-stat-card {
    background: #ffffff;
    border-color: #e2e8f0;
}

.tech-hero-stat-card:hover {
    border-color: var(--accent-cyan);
    background: rgba(6, 182, 212, 0.05);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(6, 182, 212, 0.15);
}

.tech-hero-stat-card .stat-number {
    font-size: 20px;
    font-weight: 800;
    font-family: var(--font-mono);
    line-height: 1.2;
}

.tech-hero-stat-card .stat-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 3px;
}

.tech-hero-sub {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 10px;
}

.tech-stack-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tech-stack-badges .tech-badge {
    background: var(--accent-badge);
    color: var(--accent-badge-text);
    border: 1px solid var(--border-color);
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font-mono);
}

/* 专栏业务资产数据矩阵 (Publication Stats Row) */
.tech-hero-stats-row-deprecated {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--border-color);
    font-size: 11.5px;
    color: var(--text-muted);
}

.tech-hero-stat-item {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

.tech-hero-stat-item .stat-number {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 13.5px;
    color: var(--primary-color);
}

.tech-hero-stat-item .stat-label {
    color: var(--text-secondary);
}

.tech-hero-stat-sep {
    color: var(--border-color);
    opacity: 0.6;
}

/* 首页多维排序切换栏 (Sort & Filter Tabs) */
.tech-index-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
    padding: 2px 0;
    width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 600px) {
    .tech-index-filter-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    .tech-filter-tabs {
        width: 100% !important;
        display: flex !important;
        box-sizing: border-box !important;
    }
    .tech-filter-tab {
        flex: 1 !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 6px 8px !important;
    }
    .tech-filter-extra {
        text-align: left !important;
    }
}

.tech-filter-tabs {
    display: inline-flex;
    align-items: center;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 3px;
    gap: 3px;
    box-shadow: var(--card-shadow);
}

.tech-filter-tab {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none !important;
    transition: all 0.16s ease;
}

.tech-filter-tab:hover {
    color: var(--text-primary);
    background: var(--bg-surface-hover);
}

.tech-filter-tab.active {
    background: var(--primary-color);
    color: #ffffff !important;
    box-shadow: 0 2px 8px var(--primary-glow);
}

.tech-filter-tab .tab-icon {
    font-size: 12px;
}

.tech-filter-extra {
    font-size: 11.5px;
    color: var(--text-muted);
}

.tech-filter-hint strong {
    color: var(--text-primary);
    font-family: var(--font-mono);
}

/* ==========================================================================
   现代化双列 Grid 网格布局与侧边栏深度重构 (解决掉落、挤压与折行问题)
   ========================================================================== */
#main.wrapper::before,
#main.wrapper::after,
.wrapper::before,
.wrapper::after {
    display: none !important;
    content: none !important;
}

#main.wrapper {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 300px !important;
    gap: 28px !important;
    align-items: start !important;
    max-width: 1280px !important;
    float: none !important;
    clear: both !important;
    margin: 0 auto 32px auto !important;
    padding: 0 16px !important;
}

#primary.site-content,
.site-content {
    grid-column: 1 !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    min-width: 0 !important;
}

#secondary.widget-area,
.widget-area {
    grid-column: 2 !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    min-width: 0 !important;
}

@media screen and (max-width: 900px) {
    #main.wrapper {
        display: block !important;
        grid-template-columns: 100% !important;
        gap: 0 !important;
        padding: 0 12px !important;
        margin: 0 auto 24px auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    #primary.site-content,
    .site-content {
        grid-column: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    #secondary.widget-area,
    .widget-area {
        grid-column: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 24px !important;
        box-sizing: border-box !important;
    }
}

/* 侧边栏卡片与标题精修 */
.widget-area .widget {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    padding: 18px 20px !important;
    margin-bottom: 18px !important;
    box-shadow: var(--card-shadow) !important;
}

.widget-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    margin: 0 0 14px 0 !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid var(--border-color) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    letter-spacing: -0.01em;
}

.widget-title svg {
    color: var(--primary-color) !important;
    flex-shrink: 0;
}
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding-bottom: 8px !important;
    margin-bottom: 10px !important;
    letter-spacing: 0.2px;
}

/* 现代化搜索胶囊 (输入框充分拉伸，按钮紧凑优雅) */
.widget_search .searchform div {
    display: flex !important;
    align-items: center !important;
    background: var(--bg-surface-hover) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 24px !important;
    padding: 4px 6px 4px 14px !important;
    transition: all 0.2s ease !important;
}

.widget_search .searchform div:focus-within {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px var(--primary-glow) !important;
    background: var(--bg-surface) !important;
}

.widget_search .searchform input[type="text"] {
    flex: 1 !important;
    border: none !important;
    background: transparent !important;
    color: var(--text-primary) !important;
    font-size: 13px !important;
    outline: none !important;
    padding: 6px 0 !important;
    min-width: 0 !important;
}

.widget_search .searchform input[type="submit"] {
    background: var(--primary-color) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 6px 16px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
}

.widget_search .searchform input[type="submit"]:hover {
    background: var(--primary-hover) !important;
    transform: translateY(-1px) !important;
}

/* 热门排行列表 (严格单行，标题超长优雅省略，绝不折行挤爆) */
.widget_views ul,
.widget_recent_entries ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.widget_views ul li,
.widget_recent_entries ul li {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 0 !important;
    border-bottom: 1px dashed var(--border-color) !important;
    gap: 8px !important;
}

.widget_views ul li:last-child,
.widget_recent_entries ul li:last-child {
    border-bottom: none !important;
}

.tech-rank-badge {
    width: 22px !important;
    height: 22px !important;
    line-height: 22px !important;
    text-align: center !important;
    border-radius: 6px !important;
    background: var(--border-color) !important;
    color: var(--text-secondary) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    font-family: var(--font-mono) !important;
    flex-shrink: 0 !important;
}

.tech-rank-title {
    flex: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 12.5px !important;
    color: var(--text-secondary) !important;
    text-decoration: none !important;
    min-width: 0 !important;
}

.tech-rank-title:hover {
    color: var(--primary-color) !important;
}

.tech-views-count {
    flex-shrink: 0 !important;
    font-size: 11px !important;
    font-family: var(--font-mono) !important;
    color: var(--text-muted) !important;
    background: var(--bg-surface-hover) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
}

/* 近期评论与分类条目精修 */
#recentcomments li {
    font-size: 13px !important;
    line-height: 1.6 !important;
    padding: 8px 0 !important;
    border-bottom: 1px dashed var(--border-color) !important;
    color: var(--text-muted) !important;
}

#recentcomments li a {
    color: var(--text-primary) !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

#recentcomments li a:hover {
    color: var(--primary-color) !important;
}

.cat-item a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    color: var(--text-secondary) !important;
    font-size: 12.5px !important;
    text-decoration: none !important;
    padding: 5px 0 !important;
    transition: all 0.2s ease !important;
}

.cat-item a:hover {
    color: var(--primary-color) !important;
    transform: translateX(4px) !important;
}

/* ==========================================================================
   文章归档极客时间轴 (Modern Tech Timeline Archives)
   ========================================================================== */
.tech-archive-container {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 32px 36px;
    box-shadow: var(--card-shadow);
}

.tech-archive-header {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 20px;
    margin-bottom: 28px;
}

.tech-archive-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: -0.4px;
    color: var(--text-primary);
    margin: 0 0 6px 0 !important;
}

.tech-archive-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
}

.tech-archive-subtitle strong {
    color: var(--primary-color);
    font-size: 13.5px;
}

/* 时间轴主体轨道 */
.tech-timeline-wrapper {
    position: relative;
    padding-left: 10px;
}

.tech-timeline-wrapper::before {
    content: "";
    position: absolute;
    top: 14px;
    bottom: 20px;
    left: 24px;
    width: 2px;
    background: linear-gradient(180deg, var(--primary-color), var(--border-color) 80%, transparent);
}

.tech-timeline-year-group {
    position: relative;
    margin-bottom: 32px;
}

.tech-timeline-year-badge {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-surface-hover);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 6px 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    margin-bottom: 18px;
}

.tech-timeline-year-badge .year-icon {
    font-size: 14px;
}

.tech-timeline-year-badge .year-text {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.tech-timeline-year-badge .year-count {
    font-size: 11px;
    background: var(--primary-color);
    color: #ffffff;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
}

.tech-timeline-months {
    padding-left: 20px;
}

.tech-timeline-month-block {
    margin-bottom: 20px;
}

.tech-timeline-month-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

.month-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-color);
    box-shadow: 0 0 6px var(--primary-glow);
}

.tech-timeline-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tech-timeline-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: var(--bg-surface-hover);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 8px 14px !important;
    transition: all 0.2s ease !important;
    gap: 12px;
}

.tech-timeline-item:hover {
    background: var(--bg-surface);
    border-color: var(--primary-color);
    transform: translateX(4px);
    box-shadow: 0 4px 12px var(--primary-glow);
}

.timeline-date {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    padding: 2px 6px;
    border-radius: 5px;
}

.timeline-title {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary) !important;
    text-decoration: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
    min-width: 0;
}

.timeline-title:hover {
    color: var(--primary-color) !important;
}

.timeline-meta-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.timeline-category {
    font-size: 11px;
    background: var(--accent-badge);
    color: var(--accent-badge-text);
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.timeline-views {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.timeline-date {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    padding: 2px 6px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

@media screen and (max-width: 600px) {
    .tech-archive-container {
        padding: 20px 16px;
    }
    .tech-timeline-item {
        flex-wrap: wrap;
    }
    .timeline-title {
        width: 100%;
        order: 3;
    }
}

/* ==========================================================================
   现代化文章详情页增强系统 (Modern Article Detail System)
   ========================================================================== */

/* 1. 顶部全局阅读进度条 */
.tech-reading-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, #3b82f6, #06b6d4, #10b981);
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
    z-index: 99999;
    transition: width 0.1s ease-out;
    pointer-events: none;
}

/* 2. 详情页面包屑与标题区 */
.tech-detail-breadcrumb-wrap {
    margin-bottom: 12px;
}
.tech-detail-breadcrumb-wrap .breadcrumb {
    padding: 0;
    margin: 0;
    background: transparent;
    font-size: 13px;
    color: var(--text-muted);
}
.tech-detail-breadcrumb-wrap .breadcrumb li + li:before {
    content: "›";
    padding: 0 6px;
    color: var(--text-muted);
}

.entry-header .entry-title.tech-article-title,
.tech-article-title {
    font-size: clamp(22px, 2.6vw, 26px) !important;
    font-weight: 750 !important;
    line-height: 1.35 !important;
    color: var(--text-primary) !important;
    margin: 8px 0 16px 0 !important;
    letter-spacing: -0.02em;
}

/* 3. Hero 元信息一体化横栏 (通透轻量极客微胶囊设计) */
.tech-article-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    font-size: 13px;
    color: var(--text-muted);
    padding: 6px 0 14px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    background: transparent;
    border-radius: 0;
}

.tech-meta-icon {
    color: var(--text-muted);
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.tech-hero-meta-item:hover .tech-meta-icon {
    color: var(--primary-color);
}

.tech-hero-meta-divider {
    color: var(--border-color);
    font-size: 12px;
    opacity: 0.6;
}

.tech-hero-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.tech-hero-meta-item a {
    color: var(--text-secondary) !important;
    text-decoration: none;
    transition: color 0.15s ease;
}

.tech-hero-meta-item a:hover {
    color: var(--primary-color) !important;
}

.tech-hero-meta-item a.tech-badge-category {
    background: rgba(37, 99, 235, 0.08) !important;
    color: var(--primary-color) !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    font-weight: 500;
}

html[data-theme="dark"] .tech-hero-meta-item a.tech-badge-category {
    background: rgba(56, 189, 248, 0.12) !important;
    color: #38bdf8 !important;
}

/* 4. 目录卡片 (TOC Card) */
.tech-toc-card {
    background: var(--bg-surface-hover);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary-color);
    border-radius: 8px;
    padding: 16px 20px;
    margin: 20px 0 28px 0;
}
.tech-toc-header {
    font-weight: 700;
    font-size: 15px;
    color: var(--text-primary);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.tech-toc-body ul {
    margin: 0;
    padding-left: 20px;
    list-style-type: disc;
}
.tech-toc-body li {
    margin-bottom: 6px;
    font-size: 14px;
}
.tech-toc-body a {
    color: var(--text-secondary) !important;
    text-decoration: none;
    transition: color 0.15s ease;
}
.tech-toc-body a:hover {
    color: var(--primary-color) !important;
    text-decoration: underline;
}

/* 5. 正文排版与阅读体验强化 (现代极客科技专栏级排版 - Linear/Vercel 美学) */
.tech-article-body {
    font-size: 15px !important;
    line-height: 1.75 !important;
    color: var(--text-primary);
    word-break: break-word;
    letter-spacing: 0.005em;
    text-wrap: pretty;
}

.tech-article-body p {
    margin-bottom: 1.25em !important;
}

/* 标题体系化优雅排版 (H1 ~ H6) */
.tech-article-body h1 {
    font-size: 22px !important;
    font-weight: 750 !important;
    margin: 2.0em 0 0.7em !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    letter-spacing: -0.02em;
}

.tech-article-body h1::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 18px;
    border-radius: 2px;
    background: var(--primary-color);
}

.tech-article-body h2 {
    font-size: 19px !important;
    font-weight: 700 !important;
    margin: 1.7em 0 0.5em !important;
    padding-bottom: 6px !important;
    border-bottom: 1px dashed var(--border-color) !important;
    color: var(--text-primary) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    letter-spacing: -0.015em;
}

.tech-article-body h2::before {
    content: "#";
    font-family: var(--font-mono);
    color: var(--primary-color);
    font-weight: 700;
    font-size: 15px;
}

.tech-article-body h3 {
    font-size: 16.5px !important;
    font-weight: 650 !important;
    margin: 1.4em 0 0.4em !important;
    color: var(--text-primary) !important;
    letter-spacing: -0.01em;
}

.tech-article-body h4,
.tech-article-body h5,
.tech-article-body h6 {
    font-size: 15px !important;
    font-weight: 600 !important;
    margin: 1.2em 0 0.4em !important;
    color: var(--text-secondary) !important;
}

/* 优雅通透的引述块 (Blockquote) */
.tech-article-body blockquote {
    margin: 1.3em 0 !important;
    padding: 12px 18px !important;
    background: var(--bg-surface-hover) !important;
    border-left: 3px solid var(--primary-color) !important;
    border-radius: 0 8px 8px 0 !important;
    color: var(--text-secondary) !important;
    font-size: 14.5px !important;
    line-height: 1.7 !important;
}

.tech-article-body blockquote h1,
.tech-article-body blockquote h2,
.tech-article-body blockquote h3,
.tech-article-body blockquote h4 {
    margin: 0.4em 0 !important;
    padding: 0 !important;
    border: none !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
}

.tech-article-body blockquote h1::before,
.tech-article-body blockquote h2::before {
    display: none !important;
}

.tech-article-body blockquote p:last-child {
    margin-bottom: 0 !important;
}

/* 列表排版与呼吸感 */
.tech-article-body ul,
.tech-article-body ol {
    margin: 0.8em 0 1.3em 1.5em !important;
    padding: 0 !important;
}

.tech-article-body li {
    font-size: 15px !important;
    line-height: 1.75 !important;
    margin-bottom: 0.4em !important;
    color: var(--text-primary) !important;
}

/* 现代化极客表格 (Modern Data Table) */
.tech-article-body table {
    width: 100% !important;
    margin: 18px 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: var(--card-shadow) !important;
    font-size: 14px !important;
}

.tech-article-body thead th {
    background: var(--bg-surface-hover) !important;
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    padding: 10px 14px !important;
    text-align: left !important;
    border-bottom: 1px solid var(--border-color) !important;
    letter-spacing: 0.2px;
}

.tech-article-body tbody td {
    padding: 10px 14px !important;
    color: var(--text-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important;
    vertical-align: middle !important;
}

.tech-article-body tbody tr:last-child td {
    border-bottom: none !important;
}

.tech-article-body tbody tr:hover {
    background: rgba(37, 99, 235, 0.04) !important;
}

html[data-theme="dark"] .tech-article-body tbody tr:hover {
    background: rgba(56, 189, 248, 0.06) !important;
}

/* 科技分割线 (Divider) */
.tech-article-body hr {
    border: none !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent) !important;
    margin: 14px 0 !important;
}

/* 代码块容器与代码高亮 (彻底根除白外框) */
.codehilite {
    background: transparent !important;
    border: none !important;
    margin: 1.4em 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

.tech-article-body pre,
.entry-content pre,
.codehilite pre,
.tech-card-excerpt pre {
    border-radius: 6px !important;
    border: 1px solid var(--border-color) !important;
    position: relative;
    padding: 10px 14px !important;
    background: #0d1117 !important; /* GitHub 级极客暗黑纯色 */
    color: #e6edf3 !important;
    font-family: var(--font-mono) !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2) !important;
    overflow-x: auto !important;
    margin: 12px 0 !important;
}

.tech-article-body pre code,
.entry-content pre code,
.codehilite pre code,
.tech-card-excerpt pre code {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    color: inherit !important;
    font-family: inherit !important;
}

/* ==========================================================================
   结构化文章卡片导读与大纲要点胶囊 (Structured Summary & Topics)
   ========================================================================== */
.tech-card-summary-wrap {
    margin: 10px 0 14px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tech-card-excerpt-text {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tech-tldr-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 5px;
    background: rgba(6, 182, 212, 0.12);
    color: var(--accent-cyan);
    border: 1px solid rgba(6, 182, 212, 0.3);
    margin-right: 6px;
    vertical-align: 1px;
    font-family: var(--font-mono);
}

.tech-card-topics-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-top: 4px;
}

.tech-topics-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.tech-topic-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 500;
    padding: 2px 9px;
    border-radius: 6px;
    background: rgba(99, 102, 241, 0.08);
    color: #a5b4fc;
    border: 1px solid rgba(99, 102, 241, 0.22);
    transition: all 0.15s ease;
    white-space: nowrap;
}

.tech-topic-pill:hover {
    background: rgba(99, 102, 241, 0.16);
    border-color: rgba(99, 102, 241, 0.45);
    color: #c7d2fe;
    transform: translateY(-1px);
}

html[data-theme="light"] .tech-topic-pill {
    background: #eef2ff;
    color: #4338ca;
    border-color: #c7d2fe;
}

/* 6. 文末标签胶囊栏 */
.tech-article-tags-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 28px 0 16px 0;
    padding-top: 18px;
    border-top: 1px dashed var(--border-color);
}
.tech-tags-label {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 600;
}
.tech-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.tech-tag-badge {
    display: inline-block;
    background: var(--bg-surface-hover);
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-color);
    padding: 3px 10px;
    border-radius: 14px;
    font-size: 12px;
    text-decoration: none !important;
    transition: all 0.2s ease;
}
.tech-tag-badge:hover {
    background: var(--primary-color);
    color: #ffffff !important;
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 3px 8px var(--primary-glow);
}

/* 7. 原创版权声明卡片 (现代极客规范卡片) */
.tech-copyright-card {
    background: var(--bg-surface-hover);
    border: 1px solid var(--border-color);
    border-left: 4px solid #10b981;
    border-radius: 12px;
    padding: 18px 22px;
    margin: 28px 0 20px 0;
    font-size: 13.5px;
    line-height: 1.85;
    color: var(--text-secondary);
    box-shadow: var(--card-shadow);
}
.tech-copyright-title strong,
.tech-copyright-item strong {
    color: var(--text-primary);
}
.tech-copyright-link {
    color: var(--primary-color) !important;
    text-decoration: none;
    word-break: break-all;
}
.tech-copyright-link:hover {
    text-decoration: underline;
}
.tech-copyright-notice a {
    color: #10b981 !important;
    font-weight: 600;
    text-decoration: none;
}

/* 8. 管理员快捷入口 */
.tech-admin-action {
    margin-top: 10px;
    text-align: right;
}
.tech-btn-admin-edit {
    display: inline-block;
    padding: 3px 10px;
    font-size: 12px;
    color: var(--text-muted) !important;
    border: 1px dashed var(--border-color);
    border-radius: 6px;
    text-decoration: none !important;
    transition: all 0.2s ease;
}
.tech-btn-admin-edit:hover {
    border-color: var(--primary-color);
    color: var(--primary-color) !important;
}

/* 9. 双栏响应式上一篇/下一篇卡片 */
.tech-article-pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 28px 0;
}
.tech-pager-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--bg-surface-hover);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px 16px;
    text-decoration: none !important;
    transition: all 0.2s ease;
    min-height: 68px;
}
.tech-pager-card:hover {
    background: var(--bg-surface);
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--primary-glow);
}
.tech-pager-subtitle {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4px;
    font-family: var(--font-mono);
}
.tech-pager-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.4;
}
.tech-pager-next {
    text-align: right;
}
.tech-pager-empty {
    display: none;
}

.tech-article-pager:has(.tech-pager-card:only-child) {
    grid-template-columns: 1fr;
}

/* 宽屏桌面端有右侧跟随吸顶大纲时，隐藏正文首部冗余内置目录卡片 */
@media (min-width: 992px) {
    body.single .tech-inline-toc-card {
        display: none !important;
    }
}

/* 行内代码微胶囊高科技感优化 */
.tech-article-body :not(pre) > code {
    font-family: var(--font-mono) !important;
    font-size: 0.88em !important;
    padding: 2px 6px !important;
    border-radius: 5px !important;
    background: rgba(99, 102, 241, 0.12) !important;
    color: #a5b4fc !important;
    border: 1px solid rgba(99, 102, 241, 0.25) !important;
    word-break: break-word !important;
}

html[data-theme="light"] .tech-article-body :not(pre) > code {
    background: rgba(37, 99, 235, 0.08) !important;
    color: #2563eb !important;
    border-color: rgba(37, 99, 235, 0.18) !important;
}

@media screen and (max-width: 640px) {
    .tech-article-pager {
        grid-template-columns: 1fr;
    }
    .tech-article-hero-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .tech-hero-meta-divider {
        display: none;
    }
}

/* ==========================================================================
   现代化技术博客深度重塑：代码块、Callout、浮动 TOC 导读
   ========================================================================== */

/* 1. 现代化代码块外框与头部栏 */
.tech-code-wrapper {
    position: relative;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: #0d1117;
    margin: 22px 0;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tech-code-wrapper:hover {
    border-color: rgba(56, 189, 248, 0.35);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

.tech-code-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    background: #161b22;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 12px;
    font-family: var(--font-mono);
    color: #8b949e;
}

.tech-code-meta-left {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.tech-code-dots {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tech-code-dots .code-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.tech-code-dots .dot-red {
    background: #ff5f56;
}

.tech-code-dots .dot-yellow {
    background: #ffbd2e;
}

.tech-code-dots .dot-green {
    background: #27c93f;
}

.tech-code-lang {
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #7dd3fc;
}

.tech-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #94a3b8;
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 11.5px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: var(--font-mono);
}

.tech-copy-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
    border-color: rgba(255, 255, 255, 0.25);
}

.tech-copy-btn.copied {
    color: #34d399 !important;
    border-color: #34d399 !important;
    background: rgba(52, 211, 153, 0.15) !important;
}

.tech-code-wrapper pre {
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 16px 20px !important;
    background: transparent !important;
    font-family: var(--font-mono) !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    box-shadow: none !important;
    overflow-x: auto;
    font-feature-settings: "liga" on, "calt" on;
}

/* ==========================================================================
   Pygments 极客高对比度语法高亮 (VS Code Dark+ / GitHub Dark 工业规范)
   彻底消除深黑底色下深蓝、暗灰、暗红看不清的问题，对比度达 WCAG AAA 标杆
   ========================================================================== */
.codehilite,
pre code {
    color: #e6edf3 !important;
}

/* 关键字 (醒目柔红) */
.codehilite .k,
.codehilite .kc,
.codehilite .kd,
.codehilite .kn,
.codehilite .kp,
.codehilite .kr,
.codehilite .kt { color: #ff7b72 !important; font-weight: 600; }

/* 字符串 (天青蓝) */
.codehilite .s,
.codehilite .s1,
.codehilite .s2,
.codehilite .sa,
.codehilite .sb,
.codehilite .sc,
.codehilite .dl,
.codehilite .sd,
.codehilite .se,
.codehilite .sh,
.codehilite .si,
.codehilite .sx,
.codehilite .sr { color: #a5d6ff !important; }

/* 符号与命令实体 (亮薄荷绿，解决 docker0 发暗) */
.codehilite .ss { color: #7ee787 !important; font-weight: 600; }

/* 变量与属性实例 (亮浅蓝，彻底消灭 @node1 等深蓝看不清) */
.codehilite .nv,
.codehilite .vc,
.codehilite .vg,
.codehilite .vi,
.codehilite .vm,
.codehilite .v { color: #79c0ff !important; font-weight: 500; }

/* 注释 (雅致灰白斜体，清晰舒适) */
.codehilite .c,
.codehilite .c1,
.codehilite .ch,
.codehilite .cm,
.codehilite .cp,
.codehilite .cpf,
.codehilite .cs { color: #8b949e !important; font-style: italic; }

/* 函数名与方法 (淡雅紫罗兰) */
.codehilite .nb,
.codehilite .nf,
.codehilite .fm { color: #d2a8ff !important; font-weight: 600; }

/* 类名与模块 (暖杏黄) */
.codehilite .nn,
.codehilite .nc { color: #ffa657 !important; font-weight: 600; }

/* 标签、属性与网络配置键名 (亮薄荷绿，解决 MAC 地址/参数发暗) */
.codehilite .nt,
.codehilite .na,
.codehilite .nl,
.codehilite .nd { color: #7ee787 !important; }

/* 数字与标量 (明亮冰蓝) */
.codehilite .m,
.codehilite .mi,
.codehilite .mf,
.codehilite .mh,
.codehilite .mb,
.codehilite .mo,
.codehilite .il { color: #79c0ff !important; }

/* 操作符与标点符号 */
.codehilite .o,
.codehilite .ow { color: #ff7b72 !important; }
.codehilite .p { color: #8b949e !important; }

/* 终端 Prompt (极客青蓝加粗，如 [root@node1]、$) */
.codehilite .gp,
.codehilite .gh,
.codehilite .gu { color: #38bdf8 !important; font-weight: 700; }

/* 终端通用输出 (柔和白灰) */
.codehilite .go { color: #c9d1d9 !important; }

/* 错误与异常 */
.codehilite .err,
.codehilite .gr,
.codehilite .gt,
.codehilite .ne { color: #f85149 !important; background: transparent; }

/* 2. GitHub 规范技术 Callout (Admonitions) */
.tech-callout {
    border-left: 3px solid var(--border-color) !important;
    border-radius: 8px;
    background: var(--bg-surface-subtle) !important;
    padding: 12px 16px !important;
    margin: 18px 0 !important;
    font-size: 14.5px !important;
    line-height: 1.68 !important;
}

.tech-callout-header {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 700;
    font-size: 13.5px;
    margin-bottom: 6px;
}

.tech-callout-header svg {
    flex-shrink: 0;
}

.callout-note {
    border-left-color: #3b82f6 !important;
    background: rgba(59, 130, 246, 0.08) !important;
}
.callout-note .tech-callout-title { color: #2563eb; }
html[data-theme="dark"] .callout-note .tech-callout-title { color: #60a5fa; }

.callout-tip {
    border-left-color: #10b981 !important;
    background: rgba(16, 185, 129, 0.08) !important;
}
.callout-tip .tech-callout-title { color: #059669; }
html[data-theme="dark"] .callout-tip .tech-callout-title { color: #34d399; }

.callout-warning {
    border-left-color: #f59e0b !important;
    background: rgba(245, 158, 11, 0.08) !important;
}
.callout-warning .tech-callout-title { color: #d97706; }
html[data-theme="dark"] .callout-warning .tech-callout-title { color: #fbbf24; }

.callout-important {
    border-left-color: #8b5cf6 !important;
    background: rgba(139, 92, 246, 0.08) !important;
}
.callout-important .tech-callout-title { color: #7c3aed; }
html[data-theme="dark"] .callout-important .tech-callout-title { color: #a78bfa; }

/* 3. 宽屏吸顶浮动目录 (Sticky TOC) */
.tech-sticky-toc-container {
    position: sticky;
    top: 24px;
    z-index: 40;
    margin-bottom: 24px;
}

.tech-sticky-toc-widget {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 10px !important;
    padding: 16px 18px !important;
    box-shadow: var(--card-shadow) !important;
    max-height: 70vh;
    overflow-y: auto;
}

.tech-sticky-toc-widget .widget-title {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    margin-bottom: 8px !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid var(--border-color) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tech-sticky-toc-content ul {
    list-style: none !important;
    padding-left: 8px !important;
    margin: 0 !important;
}

.tech-sticky-toc-content li {
    margin: 3px 0 !important;
    line-height: 1.35 !important;
}

.tech-sticky-toc-content a {
    color: var(--text-muted) !important;
    font-size: 12px !important;
    text-decoration: none !important;
    display: block;
    padding: 2px 5px;
    border-radius: 4px;
    transition: all 0.15s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tech-sticky-toc-content a:hover,
.tech-sticky-toc-content a.active,
.tech-toc-body a.active,
.tech-drawer-body a.active {
    color: var(--accent-cyan) !important;
    background: rgba(6, 182, 212, 0.15) !important;
    border-left: 3px solid var(--accent-cyan) !important;
    padding-left: 10px !important;
    font-weight: 600 !important;
    border-radius: 0 6px 6px 0 !important;
    box-shadow: 0 0 14px rgba(6, 182, 212, 0.2) !important;
}

/* 4. 首页文章流卡片与信息层级重构 (Linear / Vercel 极客流线型) */
.tech-card-meta-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 11.5px;
    color: var(--text-muted);
    flex-wrap: wrap;
}

@media (max-width: 480px) {
    .tech-card-meta-top {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }
    .tech-card-meta-right {
        white-space: normal !important;
    }
}

.tech-card-meta-left {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.tech-card-meta-right {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    white-space: nowrap;
}

.tech-card-cat-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 1.5px 7px;
    border-radius: 4px;
    background: rgba(37, 99, 235, 0.1);
    color: var(--primary-color) !important;
    border: 1px solid rgba(37, 99, 235, 0.22);
    text-decoration: none !important;
    font-family: var(--font-mono);
    transition: all 0.15s ease;
}

.tech-card-cat-badge:hover {
    background: rgba(37, 99, 235, 0.2);
    border-color: var(--primary-color);
}

/* TypeSafe AI 架构研判胶囊 */
.tech-typesafe-badge {
    display: inline-flex;
    align-items: center;
    gap: 3.5px;
    font-size: 11px;
    font-weight: 600;
    padding: 1.5px 7px;
    border-radius: 4px;
    font-family: var(--font-mono);
    white-space: nowrap;
    cursor: help;
    transition: all 0.15s ease;
}

.tech-typesafe-badge .badge-icon {
    font-size: 11px;
    line-height: 1;
}

.tech-typesafe-badge.depth-deep {
    background: rgba(6, 182, 212, 0.1);
    color: var(--accent-cyan);
    border: 1px solid rgba(6, 182, 212, 0.28);
}

.tech-typesafe-badge.depth-practical {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.28);
}

.tech-typesafe-badge.depth-quick {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.28);
}

.tech-badge-top {
    font-size: 10.5px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.28);
    font-family: var(--font-mono);
    vertical-align: 1px;
}

.tech-card-dot {
    color: var(--text-dim);
    margin: 0 1px;
}

.tech-card-title {
    font-size: clamp(16.5px, 1.8vw, 19px) !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin: 0 0 7px 0 !important;
    letter-spacing: -0.015em;
}

.tech-card-title a {
    color: var(--text-primary) !important;
    text-decoration: none !important;
    transition: color 0.16s ease;
}

.tech-card-title a:hover {
    color: var(--primary-color) !important;
}

.tech-card-excerpt-text {
    font-size: 13.5px !important;
    line-height: 1.65 !important;
    color: var(--text-secondary);
    margin: 0 0 8px 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tech-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
    padding-top: 6px;
}

.tech-card-footer-left {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
}

.tech-card-footer-left .tech-meta-author {
    color: var(--text-secondary);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
}

.tech-card-footer-left .tech-meta-author:hover {
    color: var(--primary-color);
}

.tech-card-views-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-family: var(--font-mono);
    color: var(--text-muted);
}

.tech-card-footer-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tech-read-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--primary-color) !important;
    text-decoration: none !important;
    padding: 3px 9px;
    border-radius: 5px;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.2);
    transition: all 0.15s ease;
}

.tech-read-more-btn:hover {
    background: rgba(37, 99, 235, 0.18);
    border-color: var(--primary-color);
    transform: translateX(1px);
}

.tech-copy-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--border-color);
    padding: 3px 8px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}

.tech-copy-link-btn:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
    background: var(--accent-badge);
}

.tech-copy-link-btn.copied {
    color: #10b981;
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.08);
}

/* 置顶文章卡片极光蓝微光呼吸边框 */
.tech-card-pinned {
    position: relative;
    border-color: rgba(37, 99, 235, 0.35) !important;
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.12), 0 8px 28px -8px rgba(37, 99, 235, 0.22) !important;
    animation: pinnedGlow 3.2s ease-in-out infinite;
}

@keyframes pinnedGlow {
    0%, 100% { box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.12), 0 8px 24px -10px rgba(37, 99, 235, 0.18) !important; }
    50%      { box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.28), 0 10px 34px -8px rgba(37, 99, 235, 0.32) !important; }
}

/* 前台全局轻提示 Toast */
.front-toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%) translateY(16px);
    background: rgba(15, 23, 42, 0.92);
    color: #f1f5f9;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 18px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    box-shadow: 0 12px 32px -6px rgba(0, 0, 0, 0.45);
    z-index: 999999;
    opacity: 0;
    pointer-events: none;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(8px);
}

.front-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.front-toast .toast-icon {
    margin-right: 6px;
}

.tech-read-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--accent-badge);
    transition: all 0.15s ease;
}

.tech-read-more-btn:hover {
    background: var(--primary-color);
    color: #ffffff !important;
    transform: translateX(2px);
}

/* 5. 侧边栏搜索与现代标签 Pill */
.tech-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 2px 6px;
    transition: all 0.18s ease;
}

.tech-search-wrapper:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

.tech-search-input {
    flex: 1;
    border: none !important;
    background: transparent !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
    color: var(--text-primary) !important;
    outline: none !important;
    box-shadow: none !important;
}

.tech-search-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    transition: color 0.15s;
}

.tech-search-btn:hover {
    color: var(--primary-color);
}

.tech-sidebar-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tech-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-secondary) !important;
    background: var(--bg-surface-subtle);
    border: 1px solid var(--border-color);
    padding: 4px 10px;
    border-radius: 9999px;
    text-decoration: none !important;
    transition: all 0.15s ease;
}

.tech-tag-pill .tag-count {
    font-size: 10.5px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.tech-tag-pill:hover {
    border-color: var(--primary-color);
    color: var(--primary-color) !important;
    background: var(--accent-badge);
    transform: translateY(-1px);
}

/* 6. 宽屏侧边栏吸顶（已取消 sticky：侧边栏内容变长后 sticky 会让底部控件无法触达） */

/* ==========================================================================
   首页实用业务增强：文章标签、修订标识、月度归档、订阅引导
   ========================================================================== */

/* 1. 文章卡片标签列表（话题聚合入口） */
.tech-card-tags-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px 0;
    padding-top: 10px;
    border-top: 1px dashed var(--border-color);
}

.tech-card-tag {
    display: inline-flex;
    align-items: center;
    font-size: 11.5px;
    font-weight: 500;
    font-family: var(--font-mono);
    color: var(--text-muted) !important;
    background: var(--bg-surface-hover);
    border: 1px solid var(--border-color);
    padding: 2px 9px;
    border-radius: 9999px;
    text-decoration: none !important;
    transition: all 0.15s ease;
}

.tech-card-tag:hover {
    color: var(--primary-color) !important;
    background: var(--accent-badge);
    border-color: var(--primary-color);
    transform: translateY(-1px);
}

.tech-card-tag-more {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--text-dim);
    padding: 2px 6px;
    cursor: help;
}

/* 2. 文章修订标识（技术文章常被回改，给读者一个诚实的时间信号） */
.tech-updated-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font-mono);
    color: #d97706;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.28);
    padding: 1px 7px;
    border-radius: 9999px;
    white-space: nowrap;
    cursor: help;
}

html[data-theme="dark"] .tech-updated-badge {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.14);
    border-color: rgba(251, 191, 36, 0.3);
}

/* 3. 侧边栏月度归档时间轴 */
.tech-archive-months {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 10px 0 !important;
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
}

.tech-archive-months li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    border-radius: 6px;
    font-size: 12.5px;
    font-family: var(--font-mono);
    color: var(--text-secondary) !important;
    text-decoration: none !important;
    transition: all 0.15s ease;
}

.tech-archive-months li a:hover {
    background: var(--bg-surface-hover);
    color: var(--primary-color) !important;
}

.tech-archive-months li a:hover .archive-month-arrow {
    opacity: 1;
    transform: translateX(0);
}

.archive-month-dot {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--border-color);
    transition: all 0.15s ease;
}

.tech-archive-months li a:hover .archive-month-dot {
    background: var(--primary-color);
    box-shadow: 0 0 6px var(--primary-glow);
}

.archive-month-text {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.archive-month-arrow {
    opacity: 0;
    transform: translateX(-4px);
    font-size: 11px;
    color: var(--primary-color);
    transition: all 0.15s ease;
}

.tech-archive-all-link {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-color) !important;
    text-decoration: none !important;
    padding-top: 8px;
    border-top: 1px dashed var(--border-color);
}

.tech-archive-all-link:hover {
    text-decoration: underline !important;
}

/* 4. 订阅引导卡片 */
.tech-subscribe-desc {
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0 0 10px 0;
}

.tech-subscribe-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tech-subscribe-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex: 1;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary) !important;
    background: var(--bg-surface-hover);
    border: 1px solid var(--border-color);
    padding: 6px 10px;
    border-radius: 8px;
    text-decoration: none !important;
    transition: all 0.16s ease;
}

.tech-subscribe-btn:hover {
    color: var(--primary-color) !important;
    border-color: var(--primary-color);
    transform: translateY(-1px);
}

.tech-subscribe-btn.primary {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #ffffff !important;
}

.tech-subscribe-btn.primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: #ffffff !important;
    box-shadow: 0 4px 12px var(--primary-glow);
}

/* 5. 归档页年份锚点定位（避免被顶部导航遮挡） */
.tech-timeline-year-group[id^="year-"] {
    scroll-margin-top: 92px;
}

.tech-timeline-year-group:target .tech-timeline-year-badge {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

/* 6. 草稿安全预览横幅 */
.tech-draft-preview-banner {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
    padding: 10px 18px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: #92400e;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.12);
}

html[data-theme="dark"] .tech-draft-preview-banner {
    background: rgba(251, 191, 36, 0.1);
    border-color: rgba(251, 191, 36, 0.3);
    color: #fde68a;
}

.draft-banner-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.draft-banner-edit-btn {
    background: #f59e0b;
    color: #ffffff !important;
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.draft-banner-edit-btn:hover {
    background: #d97706;
}

/* x7lab 移动端导航抽屉浮层与自适应堆叠 */
@media (max-width: 900px) {
    .tech-nav-pill-wrapper {
        display: none;
        position: absolute;
        top: 64px;
        left: 12px;
        right: 12px;
        background: rgba(13, 19, 34, 0.95);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid var(--border-color);
        border-radius: 16px;
        padding: 12px;
        box-shadow: 0 20px 45px rgba(0, 0, 0, 0.65);
        z-index: 99999;
    }

    html[data-theme="light"] .tech-nav-pill-wrapper {
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 16px 36px rgba(15, 23, 42, 0.15);
    }

    .tech-nav-pill-wrapper.mobile-open {
        display: block !important;
        animation: fadeIn 0.2s ease-out;
    }

    .tech-nav-pill-wrapper ul.nav-menu {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 4px !important;
    }

    .tech-nav-pill-wrapper ul.nav-menu li {
        width: 100% !important;
    }

    .tech-nav-pill-wrapper ul.nav-menu li a {
        display: block !important;
        padding: 10px 14px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .tech-brand-desc {
        display: none !important;
    }
}






/* ==========================================================================
   方案 A：Linear / Vercel 极客工程风 - 全栈排版、字阶与微交互强化层
   ========================================================================== */

/* 1. 正文内链 (Hyperlinks) 极致质感 */
.tech-article-body a {
    color: var(--primary-color) !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1.5px !important;
    text-underline-offset: 3.5px !important;
    text-decoration-color: rgba(2, 132, 199, 0.35) !important;
    font-weight: 500 !important;
    transition: all 0.16s ease !important;
}

.tech-article-body a:hover {
    color: var(--primary-hover) !important;
    text-decoration-color: var(--primary-color) !important;
}

html[data-theme="dark"] .tech-article-body a {
    color: var(--accent-sky) !important;
    text-decoration-color: rgba(56, 189, 248, 0.35) !important;
}

html[data-theme="dark"] .tech-article-body a:hover {
    color: #7dd3fc !important;
    text-decoration-color: #7dd3fc !important;
}

.tech-article-body a:visited {
    color: var(--primary-color) !important;
}

html[data-theme="dark"] .tech-article-body a:visited {
    color: var(--accent-sky) !important;
}

/* 2. 行内代码 (Inline Code) 胶囊设计 */
.tech-article-body :not(pre) > code,
.entry-content :not(pre) > code,
.comment-content :not(pre) > code {
    font-family: var(--font-mono) !important;
    font-size: 0.88em !important;
    font-weight: 500 !important;
    padding: 2.5px 6.5px !important;
    margin: 0 3px !important;
    border-radius: 5px !important;
    background: rgba(2, 132, 199, 0.08) !important;
    color: #0369a1 !important;
    border: 1px solid rgba(2, 132, 199, 0.2) !important;
    word-break: break-word !important;
}

html[data-theme="dark"] .tech-article-body :not(pre) > code,
html[data-theme="dark"] .entry-content :not(pre) > code,
html[data-theme="dark"] .comment-content :not(pre) > code {
    background: rgba(56, 189, 248, 0.1) !important;
    color: #7dd3fc !important;
    border-color: rgba(56, 189, 248, 0.22) !important;
}

/* 3. 正文插图 (Article Images) 优雅圆角与边框阴影 */
.tech-article-body img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 10px !important;
    border: 1px solid var(--border-color) !important;
    margin: 22px auto !important;
    display: block !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="dark"] .tech-article-body img {
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.45) !important;
}

/* 4. 微图标 (SVG Micro-Icons) 统一定位与对齐 */
.tech-meta-icon,
.tab-icon svg,
.widget-title svg,
.draft-banner-icon svg {
    vertical-align: -2px;
    flex-shrink: 0;
}

.tech-tldr-badge svg,
.tech-topics-label svg,
.tech-topic-pill svg {
    vertical-align: -1px;
    flex-shrink: 0;
}

/* 5. 首页排序 Tab 栏 (Index Filter Bar) 极客微胶囊 */
.tech-filter-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tech-filter-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    color: var(--text-muted) !important;
    text-decoration: none !important;
    transition: all 0.16s ease !important;
}

.tech-filter-tab:hover {
    color: var(--text-primary) !important;
    background: var(--bg-surface-hover) !important;
}

.tech-filter-tab.active {
    color: var(--primary-color) !important;
    background: var(--accent-badge) !important;
    font-weight: 600 !important;
}

html[data-theme="dark"] .tech-filter-tab.active {
    color: #38bdf8 !important;
    background: rgba(56, 189, 248, 0.12) !important;
}

/* 6. 首页 Hero 展台数值与字阶微调 */
.tech-hero-heading {
    font-size: clamp(20px, 2.6vw, 26px) !important;
    font-weight: 750 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.02em !important;
}

.tech-hero-sub {
    font-size: 14.5px !important;
    line-height: 1.65 !important;
    color: var(--text-secondary) !important;
}

.tech-hero-stat-card .stat-number {
    font-size: 22px !important;
    font-weight: 800 !important;
    font-family: var(--font-mono) !important;
}

.tech-hero-stat-card .stat-label {
    font-size: 12px !important;
}

/* ==========================================================================
   方案 A 极客工程风专项优化：顶部栏 · 侧边栏 · 长文体验全链路强化
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 顶部栏 (Navbar) 滚动响应与文章迷你标题
   -------------------------------------------------------------------------- */
.tech-glass-navbar {
    transition: background 0.25s ease, backdrop-filter 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.tech-glass-navbar.scrolled {
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    background: rgba(8, 10, 17, 0.94) !important;
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="light"] .tech-glass-navbar.scrolled {
    background: rgba(255, 255, 255, 0.95) !important;
    border-bottom-color: rgba(226, 232, 240, 1) !important;
    box-shadow: 0 10px 30px -6px rgba(15, 23, 42, 0.08), 0 1px 0 rgba(0, 0, 0, 0.05) !important;
}

.tech-navbar-inner {
    position: relative;
}

.tech-nav-scroll-title {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    cursor: pointer;
    user-select: none;
    max-width: clamp(180px, 36vw, 460px);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

html[data-theme="light"] .tech-nav-scroll-title {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
}

.tech-nav-scroll-title:hover {
    background: rgba(6, 182, 212, 0.12);
    border-color: var(--accent-cyan);
    transform: translateX(-50%) translateY(-1px);
    box-shadow: 0 4px 16px rgba(6, 182, 212, 0.2);
}

.nav-title-icon {
    display: flex;
    align-items: center;
    color: var(--accent-cyan);
    flex-shrink: 0;
}

.nav-title-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.nav-title-progress {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 9999px;
    background: rgba(6, 182, 212, 0.15);
    color: var(--accent-cyan);
    flex-shrink: 0;
}

html[data-theme="light"] .nav-title-progress {
    background: rgba(14, 165, 233, 0.12);
    color: #0284c7;
}

.tech-glass-navbar.has-scroll-title .tech-nav-pill-wrapper {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: all 0.2s ease;
}

.tech-glass-navbar.has-scroll-title .tech-nav-scroll-title {
    display: inline-flex !important;
}

@media screen and (max-width: 768px) {
    .tech-nav-scroll-title {
        max-width: 170px;
        padding: 4px 10px;
    }
    .nav-title-text {
        font-size: 12px;
    }
    .tech-brand-meta {
        display: none !important;
    }
}

/* --------------------------------------------------------------------------
   2. 长文阅读体验 (Reading Progress, Anchors, Lightbox, Table Wrapper)
   -------------------------------------------------------------------------- */

/* 顶部全宽梯度进度条 */
.tech-reading-progress-bar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 0%;
    height: 3px !important;
    background: linear-gradient(90deg, #6366f1 0%, #06b6d4 50%, #38bdf8 100%) !important;
    z-index: 100000 !important;
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.7), 0 0 4px rgba(99, 102, 241, 0.5) !important;
    transition: width 0.08s linear !important;
    pointer-events: none !important;
}

/* 长文标题锚点链接 (Deep Link Anchor) */
.tech-article-body h2,
.tech-article-body h3,
.tech-article-body h4 {
    position: relative;
    scroll-margin-top: 86px;
}

.tech-heading-anchor {
    opacity: 0;
    color: var(--accent-cyan) !important;
    text-decoration: none !important;
    font-family: var(--font-mono);
    font-size: 0.85em;
    font-weight: 500;
    margin-right: 8px;
    display: inline-block;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.tech-article-body h2:hover .tech-heading-anchor,
.tech-article-body h3:hover .tech-heading-anchor,
.tech-article-body h4:hover .tech-heading-anchor {
    opacity: 0.75;
}

.tech-heading-anchor:hover {
    opacity: 1 !important;
    transform: scale(1.15);
}

/* 长文自适应表格容器 */
.tech-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 24px 0;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-card);
    box-shadow: var(--card-shadow);
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

.tech-table-wrapper::-webkit-scrollbar {
    height: 6px;
}

.tech-table-wrapper::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.tech-table-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--accent-cyan);
}

.tech-table-wrapper table {
    width: 100%;
    min-width: 520px;
    margin: 0 !important;
    border-collapse: collapse;
    font-size: 13.5px;
    border: none !important;
}

.tech-table-wrapper th {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
    font-weight: 650;
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.tech-table-wrapper td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.tech-table-wrapper tr:last-child td {
    border-bottom: none;
}

.tech-table-wrapper tr:hover td {
    background: var(--bg-surface-hover);
}

/* 长文图片点击放大悬浮光标 */
.tech-article-body img:not(.wp-smiley) {
    cursor: zoom-in;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tech-article-body img:not(.wp-smiley):hover {
    box-shadow: 0 8px 30px -4px rgba(0, 0, 0, 0.25);
}

/* 全屏沉浸式图片灯箱 (Image Lightbox) */
.tech-lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 100002;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.tech-lightbox-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.tech-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 7, 12, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.tech-lightbox-container {
    position: relative;
    z-index: 2;
    max-width: 92vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.tech-lightbox-image {
    max-width: 100%;
    max-height: 84vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.15);
    transform: scale(0.96);
    transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.tech-lightbox-overlay.open .tech-lightbox-image {
    transform: scale(1);
}

.tech-lightbox-caption {
    margin-top: 14px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(0, 0, 0, 0.6);
    padding: 4px 16px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
}

.tech-lightbox-close {
    position: absolute;
    top: 24px;
    right: 28px;
    z-index: 3;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.18s ease;
}

.tech-lightbox-close:hover {
    background: rgba(239, 68, 68, 0.85);
    border-color: #ef4444;
    transform: rotate(90deg);
}

body.tech-lightbox-active {
    overflow: hidden !important;
}

/* 极客右下角微悬浮控制 Dock */
.tech-floating-dock {
    position: fixed;
    right: 28px;
    bottom: 32px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.tech-floating-dock.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.dock-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    padding: 0;
}

html[data-theme="light"] .dock-btn {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.12);
}

.dock-btn:hover {
    transform: translateY(-2px) scale(1.05);
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
    box-shadow: 0 12px 28px -4px rgba(6, 182, 212, 0.35);
}

.dock-percent-text {
    font-size: 10px;
    font-weight: 750;
    font-family: var(--font-mono);
    line-height: 1;
    margin-top: 2px;
}

.dock-top-icon {
    transition: transform 0.2s ease;
}

.dock-btn-top:hover .dock-top-icon {
    transform: translateY(-2px);
}

.dock-tooltip {
    position: absolute;
    right: 52px;
    background: rgba(15, 23, 42, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateX(4px);
    transition: all 0.15s ease;
}

html[data-theme="light"] .dock-tooltip {
    background: #0f172a;
}

.dock-btn:hover .dock-tooltip {
    opacity: 1;
    transform: translateX(0);
}

@media screen and (max-width: 768px) {
    .tech-floating-dock {
        right: 16px;
        bottom: 20px;
    }
    .dock-btn {
        width: 40px;
        height: 40px;
    }
    .dock-tooltip {
        display: none !important;
    }
}

/* --------------------------------------------------------------------------
   3. 侧边栏优化 (TOC 树形高亮、双列 Grid、排行徽章、标签微胶囊)
   -------------------------------------------------------------------------- */

/* 文章详情页双列 Grid 垂直排布与贯穿吸顶支持 */
@media screen and (min-width: 901px) {
    .single #main.wrapper,
    #main.wrapper:has(.tech-sticky-toc-container) {
        align-items: stretch !important;
    }
    .single #primary.site-content,
    #main.wrapper:has(.tech-sticky-toc-container) #primary.site-content {
        grid-column: 1 !important;
        grid-row: 1 / span 20 !important;
    }
    .tech-sticky-toc-container {
        grid-column: 2 !important;
        grid-row: 1 / span 20 !important;
        align-self: start !important;
        position: sticky !important;
        top: 76px !important;
        z-index: 50 !important;
        margin-bottom: 20px !important;
        transition: box-shadow 0.3s ease !important;
    }
    .single #secondary.widget-area,
    #main.wrapper:has(.tech-sticky-toc-container) #secondary.widget-area {
        grid-column: 2 !important;
        grid-row: 2 / span 19 !important;
        align-self: start !important;
    }
}

/* 宽屏吸顶浮动目录精修 */
.tech-sticky-toc-container {
    position: sticky !important;
    top: 76px !important;
    z-index: 40 !important;
    margin-bottom: 20px !important;
    transition: box-shadow 0.3s ease !important;
}

.tech-sticky-toc-container.pulse-highlight {
    box-shadow: 0 0 0 3px var(--accent-cyan) !important;
    border-radius: 12px !important;
}

.tech-sticky-toc-widget {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    padding: 16px 18px !important;
    box-shadow: var(--card-shadow) !important;
    max-height: calc(100vh - 110px) !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--border-color) transparent !important;
}

.tech-sticky-toc-widget::-webkit-scrollbar {
    width: 4px;
}

.tech-sticky-toc-widget::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 2px;
}

.tech-toc-header-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.tech-toc-header-wrap .widget-title {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    letter-spacing: 0.02em;
}

.tech-toc-stats-chip {
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--text-muted);
    background: var(--bg-surface-hover);
    padding: 2px 7px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    white-space: nowrap;
}

.tech-sticky-toc-content ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.tech-sticky-toc-content ul ul {
    padding-left: 12px !important;
    border-left: 1px dashed var(--border-color) !important;
    margin-left: 6px !important;
    margin-top: 2px !important;
    margin-bottom: 2px !important;
}

.tech-sticky-toc-content li {
    margin: 2px 0 !important;
    line-height: 1.4 !important;
}

.tech-sticky-toc-content a {
    color: var(--text-muted) !important;
    font-size: 12.5px !important;
    text-decoration: none !important;
    display: block;
    padding: 4px 8px !important;
    border-radius: 6px;
    transition: all 0.16s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-left: 2px solid transparent;
}

.tech-sticky-toc-content a:hover {
    color: var(--text-primary) !important;
    background: var(--bg-surface-hover) !important;
    transform: translateX(2px);
}

.tech-sticky-toc-content a.active,
.tech-toc-body a.active,
.tech-drawer-body a.active {
    color: var(--accent-cyan) !important;
    background: rgba(6, 182, 212, 0.16) !important;
    border-left: 3px solid var(--accent-cyan) !important;
    padding-left: 10px !important;
    font-weight: 700 !important;
    border-radius: 0 6px 6px 0 !important;
    box-shadow: 0 0 14px rgba(6, 182, 212, 0.22) !important;
}

html[data-theme="dark"] .tech-sticky-toc-content a.active,
html[data-theme="dark"] .tech-toc-body a.active,
html[data-theme="dark"] .tech-drawer-body a.active {
    color: #38bdf8 !important;
    background: rgba(56, 189, 248, 0.16) !important;
    border-left-color: #38bdf8 !important;
}

/* 热门排行榜前三极客金银铜渐变标牌 */
.tech-rank-badge {
    width: 20px !important;
    height: 20px !important;
    line-height: 20px !important;
    text-align: center !important;
    border-radius: 5px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    font-family: var(--font-mono) !important;
    flex-shrink: 0 !important;
}

.tech-rank-1 {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35) !important;
}

.tech-rank-2 {
    background: linear-gradient(135deg, #06b6d4, #0284c7) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.35) !important;
}

.tech-rank-3 {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.35) !important;
}

/* 标签云极客等宽芯片 */
.tech-sidebar-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 4px;
}

.tech-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px !important;
    font-size: 11.5px !important;
    font-family: var(--font-mono) !important;
    color: var(--text-secondary) !important;
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.tech-tag-pill:hover {
    color: var(--accent-cyan) !important;
    border-color: var(--accent-cyan) !important;
    background: rgba(6, 182, 212, 0.08) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.15);
}

.tech-tag-pill .tag-count {
    font-size: 10px;
    opacity: 0.65;
    font-family: var(--font-mono);
}

/* 移动端子菜单自适应内嵌展开 */
@media (max-width: 900px) {
    .main-navigation li ul.sub-menu,
    .main-navigation li ul {
        position: static !important;
        display: block !important;
        width: 100% !important;
        box-shadow: none !important;
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid var(--border-color) !important;
        margin: 4px 0 8px 0 !important;
        padding: 4px !important;
        border-radius: 8px !important;
    }
    .main-navigation li ul li a {
        padding-left: 24px !important;
    }
}

/* ==========================================================================
   侧边栏全面降维瘦身：极客紧凑排版、字阶收敛、二合一 Tab 与空间极致利用
   ========================================================================== */

/* 1. 侧边栏卡片尺寸全面压紧 */
.widget-area .widget {
    padding: 12px 14px !important;
    margin-bottom: 12px !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* 覆盖旧版过度放大的正文字阶与行高 */
.widget-area .widget p,
.widget-area .widget li,
.widget-area .widget .textwidget {
    font-size: 12px !important;
    line-height: 1.45 !important;
    margin-bottom: 0 !important;
}

.widget-area .widget p {
    margin-bottom: 6px !important;
}

.widget-area .widget ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* 2. 小部件标题微型化 (Micro Header) */
.widget-title {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: var(--text-secondary) !important;
    margin: 0 0 8px 0 !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid var(--border-color) !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.widget-title svg {
    color: var(--accent-cyan) !important;
    flex-shrink: 0 !important;
}

.tech-widget-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-color);
}

.tech-widget-header-row .widget-title {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.tech-widget-count-badge {
    font-size: 10px;
    font-family: var(--font-mono);
    color: var(--text-muted);
    background: var(--bg-surface-hover);
    padding: 1px 5px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
}

.tech-widget-all-link {
    font-size: 11px;
    color: var(--accent-cyan) !important;
    text-decoration: none !important;
    font-weight: 500;
}

.tech-widget-all-link:hover {
    text-decoration: underline !important;
}

/* 3. 紧凑型开发者个人微名片 */
.tech-profile-card.compact {
    padding: 2px 0;
    text-align: left;
    background: transparent;
    border: none;
    box-shadow: none;
}

.tech-profile-top-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.tech-profile-top-row .tech-profile-avatar-wrap {
    width: 42px;
    height: 42px;
    margin: 0;
    position: relative;
    flex-shrink: 0;
}

.tech-profile-top-row .tech-avatar-glow-ring {
    width: 42px;
    height: 42px;
    padding: 1.5px;
    box-shadow: 0 0 14px rgba(6, 182, 212, 0.25);
}

.tech-profile-top-row .tech-profile-status-dot {
    width: 10px;
    height: 10px;
    bottom: -1px;
    right: -1px;
}

.tech-profile-main-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.tech-profile-main-meta .tech-profile-name {
    font-size: 14px !important;
    font-weight: 750 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.tech-profile-main-meta .tech-profile-tag-row {
    display: flex;
    gap: 4px;
    margin: 0 !important;
    justify-content: flex-start;
}

.tech-profile-main-meta .tech-profile-role-badge {
    font-size: 9.5px !important;
    padding: 0 5px !important;
    border-radius: 4px;
}

.tech-profile-card.compact .tech-profile-bio {
    font-size: 11px !important;
    color: var(--text-muted) !important;
    line-height: 1.4 !important;
    margin: 0 0 8px 0 !important;
}

.tech-profile-card.compact .tech-profile-social-row {
    display: flex;
    gap: 5px;
    justify-content: flex-start;
}

.tech-profile-card.compact .tech-profile-social-btn {
    padding: 3px 8px !important;
    font-size: 10.5px !important;
    border-radius: 6px !important;
    gap: 4px !important;
}

.tech-profile-card.compact .tech-profile-admin-row {
    margin-top: 8px !important;
    padding-top: 6px !important;
    font-size: 10.5px !important;
    justify-content: flex-start;
    gap: 10px;
}

/* 4. 精选文章双 Tab 栏 (热门 / 最新 二合一) */
.tech-sidebar-tab-header {
    display: flex;
    gap: 4px;
    padding: 3px;
    background: var(--bg-surface-hover);
    border-radius: 7px;
    margin-bottom: 8px;
}

.sidebar-tab-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 4px 6px;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.sidebar-tab-btn:hover {
    color: var(--text-primary);
}

.sidebar-tab-btn.active {
    background: var(--bg-card);
    color: var(--primary-color);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    font-weight: 700;
}

html[data-theme="dark"] .sidebar-tab-btn.active {
    color: #38bdf8;
}

.tech-compact-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.tech-compact-list li {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 6px 0 !important;
    border-bottom: 1px dashed var(--border-color) !important;
    min-width: 0 !important;
}

.tech-compact-list li:last-child {
    border-bottom: none !important;
}

.tech-rank-badge.tech-rank-normal {
    background: var(--bg-surface-hover) !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: none !important;
}

.tech-compact-list .tech-rank-title {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--text-primary) !important;
    flex: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
    text-decoration: none !important;
    line-height: 1.3 !important;
}

.tech-compact-list .tech-rank-title:hover {
    color: var(--accent-cyan) !important;
}

.tech-compact-list .tech-views-count {
    font-size: 10px !important;
    font-family: var(--font-mono) !important;
    color: var(--text-dim) !important;
    flex-shrink: 0 !important;
    background: transparent !important;
    padding: 0 !important;
}

/* 5. 标签集微胶囊 */
.tech-sidebar-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding-top: 2px;
}

.tech-sidebar-tags .tech-tag-pill {
    padding: 2px 7px !important;
    font-size: 11px !important;
    font-family: var(--font-mono) !important;
    border-radius: 5px !important;
}

/* 6. 月度归档紧凑 3 列网格 */
.tech-archive-month-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
}

.tech-archive-month-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 4px;
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--text-muted);
    background: var(--bg-surface-hover);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    text-decoration: none !important;
    transition: all 0.15s ease;
}

.tech-archive-month-chip:hover {
    color: var(--accent-cyan) !important;
    border-color: var(--accent-cyan) !important;
    background: rgba(6, 182, 212, 0.08) !important;
}

/* 7. 订阅与地图紧凑双列按钮 */
.tech-subscribe-actions {
    display: flex;
    gap: 6px;
}

.tech-subscribe-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px 8px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    border: 1px solid var(--border-color) !important;
    background: var(--bg-surface-hover) !important;
    color: var(--text-secondary) !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
}

.tech-subscribe-btn:hover {
    color: var(--accent-cyan) !important;
    border-color: var(--accent-cyan) !important;
    background: rgba(6, 182, 212, 0.08) !important;
}

.tech-subscribe-btn.primary {
    color: var(--accent-cyan) !important;
    border-color: rgba(6, 182, 212, 0.3) !important;
    background: rgba(6, 182, 212, 0.1) !important;
}

/* 8. 书签极简芯片 */
.tech-bookmark-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.tech-bookmark-chip {
    font-size: 11px;
    color: var(--text-muted);
    background: var(--bg-surface-hover);
    border: 1px solid var(--border-color);
    padding: 2px 7px;
    border-radius: 4px;
    text-decoration: none !important;
    transition: all 0.15s ease;
}

.tech-bookmark-chip:hover {
    color: var(--accent-cyan) !important;
    border-color: var(--accent-cyan) !important;
}

/* ==========================================================================
   文章详情页大纲快速跳转、波浪高亮与移动端浮动抽屉增强
   ========================================================================== */
.tech-article-body h1,
.tech-article-body h2,
.tech-article-body h3,
.tech-article-body h4,
.tech-article-body h5,
.tech-article-body h6 {
    scroll-margin-top: 84px !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* 锚点直达波浪高亮动效 (提示读者已到达此处) */
.heading-target-pulse {
    animation: targetPulseGlow 1.4s ease-out forwards;
}

@keyframes targetPulseGlow {
    0% {
        background-color: rgba(6, 182, 212, 0.25);
        box-shadow: 0 0 16px rgba(6, 182, 212, 0.4);
        border-radius: 6px;
        padding-left: 6px;
    }
    100% {
        background-color: transparent;
        box-shadow: none;
        padding-left: 0;
    }
}

/* 正文内置大纲卡片 (In-article TOC Card) */
.tech-toc-card {
    margin: 16px 0 24px 0 !important;
    border-radius: 12px !important;
    overflow: hidden;
}

.tech-toc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    user-select: none;
}

.tech-toc-header-left {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.tech-toc-toggle-icon {
    font-size: 12px;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.tech-toc-card.collapsed .tech-toc-toggle-icon {
    transform: rotate(-90deg);
}

.tech-toc-card.collapsed .tech-toc-body {
    display: none;
}

.tech-toc-body {
    padding: 12px 16px;
    max-height: 360px;
    overflow-y: auto;
}

.tech-toc-body ul {
    list-style: none !important;
    padding-left: 12px !important;
    margin: 0 !important;
}

.tech-toc-body li {
    margin: 4px 0 !important;
}

.tech-toc-body a {
    color: var(--text-muted) !important;
    font-size: 12.5px !important;
    text-decoration: none !important;
    transition: color 0.15s ease;
    display: inline-block;
    padding: 2px 4px;
}

.tech-toc-body a:hover {
    color: var(--accent-cyan) !important;
    text-decoration: underline;
}

/* 移动端专属大纲悬浮按钮与抽屉面板 */
.tech-mobile-toc-fab {
    display: none;
    position: fixed;
    bottom: 24px;
    right: 20px;
    z-index: 9999;
    align-items: center;
    gap: 6px;
    background: rgba(13, 19, 34, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(6, 182, 212, 0.4);
    color: #38bdf8;
    padding: 9px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
    cursor: pointer;
    transition: all 0.2s ease;
}

html[data-theme="light"] .tech-mobile-toc-fab {
    background: rgba(255, 255, 255, 0.95);
    border-color: #bae6fd;
    color: #0284c7;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
}

.tech-mobile-toc-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    z-index: 99998;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.tech-mobile-toc-drawer {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 75vh;
    background: rgba(13, 19, 34, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px 20px 0 0;
    padding: 16px 20px 36px 20px;
    z-index: 99999;
    box-shadow: 0 -10px 45px rgba(0, 0, 0, 0.75);
    transform: translateY(100%);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
}

html[data-theme="light"] .tech-mobile-toc-drawer {
    background: rgba(255, 255, 255, 0.98);
    border-top-color: #e2e8f0;
}

.tech-mobile-toc-drawer.open {
    transform: translateY(0);
}

.tech-mobile-toc-backdrop.open {
    display: block;
    opacity: 1;
}

.tech-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.tech-drawer-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.tech-drawer-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
}

.tech-drawer-body ul {
    list-style: none !important;
    padding-left: 8px !important;
    margin: 0 !important;
}

.tech-drawer-body li {
    margin: 6px 0 !important;
}

.tech-drawer-body a {
    display: block;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 13.5px;
}

.tech-drawer-body a:active {
    background: rgba(6, 182, 212, 0.15);
    color: var(--accent-cyan);
}

@media (max-width: 900px) {
    .tech-mobile-toc-fab {
        display: inline-flex;
    }
}

/* ==========================================================================
   文章详情页大纲底栏与正文文末作者卡片 (对标 Vercel / GitHub Docs 沉浸式阅读)
   ========================================================================== */
.tech-toc-footer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.tech-toc-author-mini {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none !important;
    min-width: 0;
}

.tech-toc-mini-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--primary-color);
    flex-shrink: 0;
}

.tech-toc-author-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tech-toc-author-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tech-toc-author-tag {
    font-size: 10px;
    color: var(--accent-cyan);
    font-family: var(--font-mono);
    line-height: 1.2;
}

.tech-toc-footer-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.tech-toc-mini-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.tech-toc-mini-btn:hover {
    color: var(--accent-cyan);
    border-color: var(--accent-cyan);
    background: rgba(6, 182, 212, 0.08);
}

.tech-toc-mini-btn.copied {
    color: #10b981 !important;
    border-color: #10b981 !important;
    background: rgba(16, 185, 129, 0.12) !important;
}

/* 正文文末作者专栏大卡片 (读完全文后优雅呈现) */
.tech-detail-author-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 24px;
    border-radius: 14px;
    margin: 32px 0 24px 0;
}

@media (max-width: 768px) {
    .tech-detail-author-card {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
}

.tech-author-card-avatar-wrap {
    flex-shrink: 0;
}

.tech-author-card-info {
    flex: 1;
    min-width: 0;
}

.tech-author-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.tech-author-name {
    font-size: 17px;
    font-weight: 800;
    margin: 0;
}

.tech-author-badge {
    font-size: 11px;
    color: var(--accent-cyan);
    background: rgba(6, 182, 212, 0.12);
    border: 1px solid rgba(6, 182, 212, 0.25);
    padding: 1px 8px;
    border-radius: 999px;
    font-family: var(--font-mono);
}

.tech-author-bio {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 0 12px 0;
}

.tech-author-links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.tech-author-link-btn {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-color) !important;
    background: rgba(6, 182, 212, 0.08);
    border: 1px solid rgba(6, 182, 212, 0.25);
    padding: 4px 12px;
    border-radius: 6px;
    text-decoration: none !important;
    transition: all 0.15s ease;
}

.tech-author-link-btn:hover {
    background: var(--primary-color);
    color: #ffffff !important;
}

.tech-author-link-btn.sub {
    color: var(--text-muted) !important;
    background: transparent;
    border-color: var(--border-color);
}

.tech-author-link-btn.sub:hover {
    color: var(--text-primary) !important;
    border-color: var(--border-strong);
}

/* ==========================================================================
   单独立页面 (About 关于我) 专属立体 Profile Hero 卡片 & 样式
   ========================================================================== */
.tech-page-profile-hero {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 28px 32px;
    border-radius: 16px;
    margin-bottom: 32px;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.05) 0%, rgba(59, 130, 246, 0.03) 100%), var(--bg-card);
    border: 1px solid rgba(6, 182, 212, 0.2);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.08);
}

@media (max-width: 768px) {
    .tech-page-profile-hero {
        flex-direction: column;
        text-align: center;
        padding: 20px;
        gap: 16px;
    }
}

.tech-page-profile-left {
    flex-shrink: 0;
}

.tech-page-profile-right {
    flex: 1;
    min-width: 0;
}

.tech-page-profile-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.tech-page-profile-name {
    font-size: 24px;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.5px;
}

.tech-page-profile-badge {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent-cyan);
    background: rgba(6, 182, 212, 0.12);
    border: 1px solid rgba(6, 182, 212, 0.25);
    padding: 3px 10px;
    border-radius: 20px;
}

.tech-page-profile-slogan {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 14px 0;
}

.tech-page-profile-chips {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tech-profile-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text-muted);
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    padding: 3px 10px;
    border-radius: 6px;
}

.tech-profile-chip.chip-email {
    color: var(--primary-color) !important;
    border-color: rgba(6, 182, 212, 0.35);
    background: rgba(6, 182, 212, 0.06);
    text-decoration: none !important;
    font-weight: 600;
    transition: all 0.2s ease;
}

.tech-profile-chip.chip-email:hover {
    background: var(--primary-color);
    color: #ffffff !important;
    border-color: var(--primary-color);
    transform: translateY(-1px);
}