/* Original Show v2: shared components */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid rgba(224,232,227,.9);
  backdrop-filter: blur(18px);
}
.header-inner { min-height: 54px; display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 16px; }
.site-brand { flex: 0 0 auto; }
.custom-logo-link { display: flex; align-items: center; }
.custom-logo { max-height: 40px; width: auto; }
.brand-text { display: inline-flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px;
  color: #05130c; background: linear-gradient(135deg, var(--os-accent-2), var(--os-accent));
  font-size: 18px; font-weight: 800; font-style: italic; transform: skew(-6deg);
}
.brand-copy { display: flex; flex-direction: column; line-height: 1.1; }
.brand-copy strong { font-size: 15px; font-weight: 800; letter-spacing: 0; }
.brand-copy small { margin-top: 2px; color: var(--os-muted); font-size: 8px; letter-spacing: .08em; }
.header-right { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; justify-self: end; }
.icon-button, .account-toggle, .login-button { min-height: 34px; }
.site-nav { min-width: 0; }
.nav-menu, .site-nav .menu { display: flex; align-items: center; justify-content: flex-end; gap: 4px; list-style: none; padding: 0; margin: 0; }
.nav-menu a, .site-nav .menu a { display: block; padding: 6px 9px; font-size: 12px; font-weight: 600; border-radius: 8px; }
.nav-menu a:hover, .site-nav .menu a:hover, .current-menu-item > a { color: var(--os-accent); background: color-mix(in srgb, var(--os-accent) 10%, transparent); }
.nav-menu > li, .site-nav .menu > li { position: relative; list-style: none; }
.nav-menu .sub-menu, .site-nav .menu .sub-menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 125; min-width: 190px; margin: 0; padding: 7px; list-style: none; border: 1px solid var(--os-border); border-radius: 12px; background: var(--os-surface); box-shadow: var(--os-shadow); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility .18s ease; }
.nav-menu .sub-menu .sub-menu, .site-nav .menu .sub-menu .sub-menu { top: -7px; left: calc(100% + 7px); }
.nav-menu li:hover > .sub-menu, .nav-menu li:focus-within > .sub-menu, .site-nav .menu li:hover > .sub-menu, .site-nav .menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-menu .sub-menu a, .site-nav .menu .sub-menu a { white-space: nowrap; padding: 8px 10px; }
.header-actions { display: flex; align-items: center; justify-self: end; gap: 6px; }
body.admin-bar .site-header { top: 32px; }
.icon-button, .menu-toggle { border: 1px solid var(--os-border); background: var(--os-surface); color: var(--os-text); border-radius: 12px; }
.icon-button { width: 30px; height: 30px; display: grid; place-items: center; font-size: 14px; }

.account-actions { display: flex; align-items: center; gap: 7px; margin-left: 2px; }
.login-button { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 0 13px; border-radius: 9px; color: #04130b; background: var(--os-accent); font-size: 12px; font-weight: 800; transition: transform .18s ease, filter .18s ease; }
.login-button:hover { transform: translateY(-1px); filter: brightness(1.04); }
.register-link { color: var(--os-muted); font-size: 11px; font-weight: 650; }
.register-link:hover { color: var(--os-accent); }
.account-menu-wrap { position: relative; margin-left: 2px; }
.account-toggle { min-height: 32px; display: inline-flex; align-items: center; gap: 7px; max-width: 160px; padding: 2px 9px 2px 3px; border: 1px solid var(--os-border); border-radius: 10px; color: var(--os-text); background: var(--os-surface); }
.account-avatar { width: 26px; height: 26px; border-radius: 8px; object-fit: cover; }
.account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 700; }
.account-caret { color: var(--os-muted); font-size: 11px; }
.account-menu { position: absolute; top: calc(100% + 9px); right: 0; width: 210px; padding: 7px; border: 1px solid var(--os-border); border-radius: 13px; background: var(--os-surface); box-shadow: var(--os-shadow); z-index: 130; }
.account-menu[hidden] { display: none; }
.account-menu-head { padding: 9px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--os-border); }
.account-menu-head strong, .account-menu-head small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-head strong { font-size: 13px; }
.account-menu-head small { margin-top: 2px; color: var(--os-muted); font-size: 10px; }
.account-menu > a { display: block; padding: 8px 10px; border-radius: 8px; font-size: 12px; }
.account-menu > a:hover { color: var(--os-accent); background: var(--os-surface-2); }
.account-menu > .account-logout { margin-top: 4px; border-top: 1px solid var(--os-border); border-radius: 0 0 8px 8px; color: #c23b3b; }

.menu-toggle { display: none; width: 42px; height: 42px; padding: 10px; }
.menu-toggle span:not(.screen-reader-text) { display: block; width: 100%; height: 2px; background: currentColor; margin: 4px 0; border-radius: 9px; }
.nav-overlay { position: fixed; inset: 55px 0 0; z-index: 108; border: 0; padding: 0; background: rgba(3,15,9,.38); backdrop-filter: blur(2px); }
.nav-overlay[hidden] { display: none; }
body.admin-bar .nav-overlay { top: 87px; }
.search-panel { position: fixed; top: 55px; left: 0; right: 0; z-index: 99; border-top: 1px solid var(--os-border); padding: 8px 0; background: var(--os-surface); box-shadow: 0 10px 20px rgba(12,35,23,.05); }
body.admin-bar .search-panel { top: 87px; }
.search-form { display: flex; width: 100%; gap: 8px; }
.search-form label { flex: 1; }
.search-field { width: 100%; min-height: 44px; padding: 0 14px; border: 1px solid var(--os-border); background: var(--os-surface-2); color: var(--os-text); border-radius: 12px; outline: none; }
.search-field:focus { border-color: var(--os-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--os-accent) 15%, transparent); }
.search-submit { border: 0; padding: 0 20px; border-radius: 12px; background: var(--os-accent); color: #03150b; font-weight: 800; }
.button { display: inline-flex; min-height: 36px; align-items: center; justify-content: center; padding: 0 14px; border-radius: 10px; font-weight: 700; font-size: 12px; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: linear-gradient(135deg, var(--os-accent-2), var(--os-accent)); color: #03150b; box-shadow: 0 12px 30px rgba(18,183,106,.24); }
.button-ghost { border: 1px solid rgba(255,255,255,.28); color: #fff; background: rgba(255,255,255,.04); }
.content-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; align-items: start; }
.content-column { min-width: 0; }
.section-heading { margin-bottom: 18px; }
.section-heading h1, .section-heading h2 { margin: 0; font-size: 20px; letter-spacing: -.01em; font-weight: 800; }
.section-heading-row { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.category-pills { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.category-pills a { padding: 6px 11px; color: var(--os-muted); font-size: 12px; border-radius: 9px; }
.category-pills a:hover, .category-pills a.active { color: #04130b; background: var(--os-accent); font-weight: 800; }
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

/* v2.1 unified post-card tokens and shared loop semantics. */
:root { --os-card-radius: 16px; --os-card-gap: 14px; --os-card-title-size: 16px; }
.loop-title { margin: 0; font-size: var(--os-card-title-size); line-height: 1.5; font-weight: 800; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.loop-excerpt { color: var(--os-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-card, .os-loop { border-radius: var(--os-card-radius); }
.post-grid { gap: var(--os-card-gap); }
.post-card { overflow: hidden; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--os-shadow); border-color: color-mix(in srgb, var(--os-accent) 35%, var(--os-border)); }
.post-card-media { position: relative; display: block; aspect-ratio: 16/9; overflow: hidden; background: #091a12; }
.post-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.post-card:hover .post-card-media img { transform: scale(1.035); }
.tech-placeholder { position: absolute; inset: 0; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 72% 28%, rgba(25,212,114,.35), transparent 16%), linear-gradient(135deg, #06110c, #0c2b1a 55%, #07120d); }
.tech-placeholder::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(77,228,141,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(77,228,141,.08) 1px, transparent 1px); background-size: 28px 28px; transform: perspective(250px) rotateX(58deg) scale(1.5); opacity: .6; }
.tech-placeholder b { position: relative; z-index: 2; font-size: 40px; color: #90ffc0; text-shadow: 0 0 30px rgba(18,183,106,.35); }
.category-badge { position: absolute; left: 12px; top: 12px; z-index: 3; padding: 5px 9px; border-radius: 8px; background: var(--os-accent); color: #03150b; font-size: 11px; font-weight: 900; }
.static-badge { position: static; display: inline-block; }
.post-card-body { padding: 14px; }
.post-card-title { margin: 0; font-size: 16px; line-height: 1.5; letter-spacing: -.01em; font-weight: 700; }
.post-card-title a:hover { color: var(--os-accent); }
.post-card-excerpt { margin-top: 9px; color: var(--os-muted); font-size: 13px; line-height: 1.65; }
.post-card-excerpt p { margin: 0; }
.post-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; color: #8a968f; font-size: 11px; }
.sidebar { display: grid; gap: 16px; position: sticky; top: 96px; }
.sidebar .card { padding: 18px; }
.profile-card { text-align: center; }
.profile-mark { width: 60px; height: 60px; margin: 0 auto 10px; display: grid; place-items: center; border-radius: 20px; color: #03150b; background: linear-gradient(135deg, var(--os-accent-2), var(--os-accent)); font-size: 30px; font-weight: 950; font-style: italic; }
.profile-card h2 { margin: 0; font-size: 18px; font-weight: 800; }.profile-card p { color: var(--os-muted); font-size: 13px; }
.profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; border-top: 1px solid var(--os-border); padding-top: 14px; margin-top: 14px; }
.profile-stats span { color: var(--os-muted); font-size: 10px; }.profile-stats strong { display: block; color: var(--os-text); font-size: 15px; }
.widget-title { margin: 0 0 14px; padding-left: 10px; border-left: 3px solid var(--os-accent); font-size: 15px; font-weight: 800; }
.tag-cloud-custom { display: flex; gap: 7px; flex-wrap: wrap; }.tag-cloud-custom a { padding: 6px 9px; border-radius: 8px; background: var(--os-surface-2); color: var(--os-muted); font-size: 11px; }.tag-cloud-custom a:hover { color: var(--os-accent); }
.mini-post-list { counter-reset: mini; list-style: none; padding: 0; margin: 0; }.mini-post-list li { counter-increment: mini; display: grid; grid-template-columns: 24px 1fr; gap: 7px; align-items: start; padding: 9px 0; border-bottom: 1px solid var(--os-border); font-size: 12px; line-height: 1.45; }.mini-post-list li:last-child { border-bottom: 0; }.mini-post-list li::before { content: counter(mini); width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--os-accent); color: #03150b; font-size: 10px; font-weight: 900; }

.archive-header { padding: 24px; margin-bottom: 18px; }.archive-header h1 { margin: 2px 0 0; font-size: 30px; }.archive-description { margin-top: 8px; color: var(--os-muted); }
.single-article { overflow: hidden; padding: 34px; }.entry-header h1 { margin: 14px 0 6px; font-size: clamp(30px, 4vw, 46px); line-height: 1.17; letter-spacing: -.04em; }.entry-cover { margin: 28px -34px 0; }.entry-cover img { display: block; width: 100%; max-height: 560px; object-fit: cover; }.entry-content { margin-top: 30px; font-size: 16px; }.entry-content > * { max-width: 100%; }.entry-content h2, .entry-content h3 { margin-top: 1.7em; line-height: 1.3; }.entry-content a { color: var(--os-accent); text-decoration: underline; text-underline-offset: 3px; }.entry-content pre { overflow: auto; padding: 18px; border-radius: 13px; color: #d6ffe7; background: #07110d; }.entry-content code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }.entry-content blockquote { margin: 1.5em 0; padding: 12px 18px; border-left: 4px solid var(--os-accent); background: var(--os-surface-2); border-radius: 0 10px 10px 0; }.entry-content table { width: 100%; border-collapse: collapse; }.entry-content th, .entry-content td { padding: 10px; border: 1px solid var(--os-border); }.entry-footer { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--os-border); }.entry-tags a { display: inline-block; margin: 4px; padding: 5px 9px; border-radius: 8px; background: var(--os-surface-2); color: var(--os-muted); font-size: 12px; }
.post-navigation-custom { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 18px; padding: 18px; }.post-navigation-custom div:last-child { text-align: right; }.post-navigation-custom small { display: block; color: var(--os-muted); font-size: 10px; }.post-navigation-custom a { font-weight: 800; font-size: 13px; }
.comments-area { margin-top: 18px; padding: 24px; }.comments-title { margin-top: 0; font-size: 20px; }.comment-list { padding-left: 20px; }.comment-body { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--os-border); }.comment-form input:not([type="submit"]), .comment-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--os-border); border-radius: 10px; background: var(--os-surface-2); color: var(--os-text); }.form-submit .submit { border: 0; padding: 11px 18px; border-radius: 10px; background: var(--os-accent); color: #03150b; font-weight: 800; }
.empty-state, .not-found { text-align: center; padding: 54px 28px; }.empty-icon { font-size: 60px; color: var(--os-accent); }.not-found .error-code { display: block; color: var(--os-accent); font-size: clamp(72px, 15vw, 150px); line-height: .9; font-weight: 950; letter-spacing: -.08em; }.not-found .search-form { max-width: 560px; margin: 24px auto 18px; }
.navigation.pagination { margin-top: 24px; }.nav-links { display: flex; gap: 8px; justify-content: center; }.page-numbers { display: grid; min-width: 38px; height: 38px; place-items: center; padding: 0 10px; border: 1px solid var(--os-border); border-radius: 10px; background: var(--os-surface); }.page-numbers.current { border-color: var(--os-accent); background: var(--os-accent); color: #04130b; font-weight: 800; }

.site-footer .brand-copy strong { color: #fff; }
.copyright { margin: 0; font-size: 11px; color: #6f8578; }
.back-to-top { position: fixed; right: 22px; bottom: 22px; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; color: #fff; background: #102019; box-shadow: var(--os-shadow); opacity: 0; visibility: hidden; transform: translateY(10px); transition: .2s ease; z-index: 80; }.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

[data-theme="light"] .site-footer { background: #f2f7f4; color: #5c7166; border-top: 1px solid var(--os-border); }
[data-theme="light"] .site-footer .brand-copy strong { color: #102117; }
[data-theme="light"] .copyright { color: #72867b; }
[data-theme="light"] .back-to-top { color: #102117; background: #ffffff; border-color: var(--os-border); }

[data-theme="dark"] .site-header { background: rgba(8,16,12,.94); border-bottom-color: var(--os-border); }
[data-theme="dark"] .search-panel { background: var(--os-surface); }
/* Theme control-center frontend helpers. */

/* v1.2 professional content library */
.library-page .container { max-width: var(--os-container); }
.library-hero { padding: 28px 30px; margin-bottom: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--os-accent) 7%, var(--os-surface)), var(--os-surface)); }
.library-hero h1 { margin: 3px 0 8px; font-size: clamp(28px, 4vw, 42px); }
.library-hero p { max-width: 780px; margin: 0; color: var(--os-muted); }
.library-search { display: block; margin-top: 20px; max-width: 620px; }
.library-search input { width: 100%; min-height: 44px; padding: 0 14px; border: 1px solid var(--os-border); border-radius: 12px; color: var(--os-text); background: var(--os-surface-2); outline: none; }
.library-search input:focus { border-color: var(--os-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--os-accent) 12%, transparent); }
.library-filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.library-filters button { border: 1px solid var(--os-border); border-radius: 999px; padding: 7px 11px; background: var(--os-surface); color: var(--os-muted); font-size: 12px; cursor: pointer; }
.library-filters button span { opacity: .65; margin-left: 3px; }
.library-filters button.is-active, .library-filters button:hover { border-color: var(--os-accent); color: #052012; background: var(--os-accent); }
.resource-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.resource-card { padding: 18px; display: flex; min-height: 210px; flex-direction: column; }
.resource-card-top { display: flex; justify-content: space-between; color: var(--os-accent); font-size: 10px; font-weight: 800; }
.resource-card h2 { margin: 12px 0 7px; font-size: 17px; line-height: 1.35; }
.resource-card p { margin: 0; color: var(--os-muted); font-size: 12px; line-height: 1.65; }
.resource-link { margin-top: auto; padding-top: 14px; color: var(--os-accent); font-size: 12px; font-weight: 800; }
.example-grid { display: grid; gap: 10px; }
.example-card { display: grid; grid-template-columns: 52px minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 14px 16px; }
.example-file-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; background: color-mix(in srgb, var(--os-accent) 12%, var(--os-surface)); color: var(--os-accent); font-weight: 900; }
.example-topic { color: var(--os-accent); font-size: 10px; font-weight: 800; }
.example-card h2 { margin: 2px 0 3px; font-size: 15px; }
.example-card code { color: var(--os-muted); font-size: 11px; word-break: break-all; }
.example-open { color: var(--os-text); border-color: var(--os-border); white-space: nowrap; }
.library-no-results { padding: 34px; text-align: center; color: var(--os-muted); }
[data-theme="dark"] .library-filters button.is-active, [data-theme="dark"] .library-filters button:hover { color: #03150b; }
.article-toc { margin: 22px 0 8px; padding: 18px 20px; box-shadow: none; background: var(--os-surface-2); }
.article-toc > strong { display: block; margin-bottom: 8px; font-size: 14px; }
.article-toc ol { margin: 0; padding-left: 22px; columns: 2; column-gap: 30px; }
.article-toc li { break-inside: avoid; margin: 5px 0; color: var(--os-muted); font-size: 12px; }
.article-toc .toc-h3 { padding-left: 10px; font-size: 11px; }
.article-toc a:hover { color: var(--os-accent); }
.entry-content pre { position: relative; padding-top: 46px; }
.code-copy-button { position: absolute; top: 10px; right: 10px; border: 1px solid rgba(255,255,255,.15); border-radius: 8px; padding: 5px 9px; color: #d6ffe7; background: rgba(255,255,255,.06); font-size: 10px; cursor: pointer; }
.code-copy-button:hover { background: rgba(255,255,255,.12); }
.article-resource-box { margin-top: 18px; padding: 20px; box-shadow: none; }
.article-resource-heading h2 { margin: 2px 0 8px; font-size: 20px; }
.article-resource-box > p { margin: 0 0 12px; color: var(--os-muted); font-size: 12px; }
.article-file-list { display: grid; gap: 7px; }
.article-file-list a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--os-surface-2); font-size: 11px; }
.article-file-list a span { color: var(--os-accent); font-weight: 800; }
.article-references ul { margin: 8px 0 0; padding-left: 20px; }
.article-references li { margin: 7px 0; color: var(--os-muted); font-size: 12px; }
.article-references a:hover { color: var(--os-accent); }
.related-topic-section { margin-top: 22px; }
.related-topic-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.related-topic-card { min-height: 100px; padding: 14px; display: flex; flex-direction: column; justify-content: space-between; }
.related-topic-card strong { font-size: 13px; line-height: 1.5; }
.related-topic-card span { color: var(--os-muted); font-size: 10px; }


/* v1.2.7 brand readability + richer footer copyright */
.brand-logo-link{display:inline-flex;align-items:center;border-radius:10px;transition:background .2s ease,padding .2s ease}
.brand-logo-dark{display:none}
[data-theme="dark"] .brand-logo-link.has-dark-logo .brand-logo-light{display:none}
[data-theme="dark"] .brand-logo-link.has-dark-logo .brand-logo-dark{display:block}
[data-theme="dark"] .brand-logo-link:not(.has-dark-logo){padding:4px 7px;background:rgba(255,255,255,.96);box-shadow:0 4px 18px rgba(0,0,0,.12)}
.footer-logo-link .brand-logo{max-height:46px}
.footer-copyright-rich{font-size:11px;line-height:1.75;color:#93a79b}
.footer-copyright-rich p{margin:0}
.footer-copyright-rich a{color:var(--os-accent);text-decoration:none}
.footer-copyright-rich a:hover{text-decoration:underline;text-underline-offset:2px}
.footer-description{margin:4px 0 0;color:#74877b;font-size:10px}
[data-theme="light"] .footer-copyright-rich{color:#63786d}
[data-theme="light"] .footer-description{color:#7a8d83}

/* v2 shared loop components */
.os-loop { display:grid; grid-template-columns:220px minmax(0,1fr); overflow:hidden; min-height:150px; }
.os-loop + .os-loop { margin-top:12px; }
.os-loop-media { position:relative; display:block; min-height:150px; background:#091a12; overflow:hidden; }
.os-loop-media img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
.os-loop:hover .os-loop-media img { transform:scale(1.025); }
.os-loop-body { min-width:0; padding:18px 20px; }
.os-loop-title { margin:0; font-size:19px; line-height:1.45; font-weight:800; }
.os-loop-title a:hover { color:var(--os-accent); }
.os-loop-excerpt { margin-top:8px; color:var(--os-muted); font-size:13px; line-height:1.7; }
.os-loop-excerpt p { margin:0; }
.os-loop-category { display:inline-block; margin-bottom:5px; color:var(--os-accent); font-size:10px; font-weight:800; }
.os-loop-compact { grid-template-columns:116px minmax(0,1fr); min-height:98px; }
.os-loop-media-compact { min-height:98px; }
.os-loop-compact .os-loop-body { padding:12px 14px; }
.os-loop-compact .os-loop-title { font-size:15px; }
.os-loop-no-image { display:block; min-height:0; }
.latest-loop-default,.latest-loop-compact { display:grid; gap:12px; }
.latest-loop-default .os-loop + .os-loop,.latest-loop-compact .os-loop + .os-loop { margin-top:0; }
.section-more { color:var(--os-accent); font-size:11px; font-weight:800; }
.latest-more { display:none; }

/* v2 phase 3: mature archive/search and single article surfaces */
.archive-loop-list { display: grid; gap: 12px; }
.archive-header-rich { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.archive-count { flex:0 0 auto; display:inline-flex; align-items:center; min-height:30px; padding:0 10px; border-radius:999px; color:var(--os-accent); background:color-mix(in srgb,var(--os-accent) 10%,var(--os-surface)); font-size:11px; font-weight:800; }
.archive-result-count { margin:7px 0 0; color:var(--os-muted); font-size:12px; }
.empty-actions { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:16px; }
.os-surface-button { color:var(--os-text); border-color:var(--os-border); background:var(--os-surface-2); }
.article-reading-width { max-width:780px; margin-left:auto; margin-right:auto; }
.entry-header-v2 { max-width:860px; }
.article-meta { display:flex; flex-wrap:wrap; gap:7px 14px; margin-top:14px; color:var(--os-muted); font-size:11px; }
.article-meta span { display:inline-flex; align-items:center; }
.article-meta span + span::before { content:""; width:3px; height:3px; margin-right:10px; border-radius:50%; background:color-mix(in srgb,var(--os-muted) 55%,transparent); }
.entry-content { line-height:1.85; }
.article-reading { max-width:780px; margin-inline:auto; }
.article-reading p, .article-reading li { line-height:1.9; }
.entry-content, .article-reading { overflow-wrap:anywhere; }
.entry-content figure { max-width:100%; margin-left:auto; margin-right:auto; }
.entry-content .wp-caption, .entry-content .wp-caption img { max-width:100%; }
.entry-content .wp-caption-text, .entry-content figcaption { margin-top:7px; color:var(--os-muted); font-size:12px; line-height:1.6; text-align:center; }
.entry-content :not(pre) > code { padding:.12em .38em; border-radius:6px; background:var(--os-surface-2); color:var(--os-accent); font-size:.92em; }
.entry-content p { margin:0 0 1.15em; }
.entry-content pre { max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.entry-content table { display:block; width:100%; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border-collapse:collapse; white-space:nowrap; }
.entry-content img { border-radius:10px; }
.entry-content h2 { font-size:26px; }
.entry-content h3 { font-size:20px; }

/* v2 phase 4: mature sidebar modules */
.sidebar-module{overflow:hidden}
.sidebar-heading-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.sidebar-heading-row .widget-title{margin:0}
.sidebar-heading-note,.sidebar-heading-row>a{color:var(--os-muted);font-size:10px}
.sidebar-heading-row>a:hover{color:var(--os-accent)}
.hot-post-list li>div{min-width:0}
.hot-post-list a{display:block;font-weight:700}
.hot-post-list small{display:block;margin-top:3px;color:var(--os-muted);font-size:10px}
.sidebar-recent-list{list-style:none;padding:0;margin:0}
.sidebar-recent-list li{border-bottom:1px solid var(--os-border)}
.sidebar-recent-list li:last-child{border-bottom:0}
.sidebar-recent-list a{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:10px 0}
.sidebar-recent-list strong{font-size:12px;line-height:1.5;font-weight:700}
.sidebar-recent-list span{flex:0 0 auto;color:var(--os-muted);font-size:10px}
.sidebar-topic-list{display:grid;gap:7px}
.sidebar-topic-list a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 10px;border-radius:10px;background:var(--os-surface-2)}
.sidebar-topic-list a:hover{color:var(--os-accent)}
.sidebar-topic-list strong{font-size:11px;line-height:1.45}
.sidebar-topic-list span{min-width:26px;text-align:center;color:var(--os-accent);font-size:10px;font-weight:800}
.profile-mark{width:64px;height:64px;font-size:21px;letter-spacing:-.05em}

/* v2.0.4 footer: brand above, copyright centered at the very bottom */
.site-footer{margin-top:18px;padding:34px 0 26px;color:#9caf9f;background:#06100b;border-top:1px solid rgba(255,255,255,.06)}
.footer-inner{min-height:0;display:grid;grid-template-columns:1fr;align-items:start;gap:0}
.footer-brand{display:flex;align-items:center;min-height:44px}
.footer-description{max-width:320px;margin:12px 0 0;color:#74877b;font-size:11px;line-height:1.75}
.footer-copyright-rich{color:#9caf9f;font-size:11px;line-height:1.7}
[data-theme="dark"] .site-footer{background:#06100b;color:#9caf9f;border-top-color:rgba(255,255,255,.06)}
[data-theme="light"] .site-footer{background:#f2f7f4;color:#5c7166;border-top-color:var(--os-border)}
[data-theme="light"] .footer-copyright-rich{color:#63786d}

/* v2 phase 5: explicit dark-surface refinements */
[data-theme="dark"] .os-loop,
[data-theme="dark"] .post-card,
[data-theme="dark"] .sidebar-module,
[data-theme="dark"] .single-article,
[data-theme="dark"] .archive-header,
[data-theme="dark"] .library-hero { background:var(--os-surface); border-color:var(--os-border); }
[data-theme="dark"] .os-loop:hover,
[data-theme="dark"] .sidebar-module:hover { border-color:color-mix(in srgb,var(--os-accent) 34%,var(--os-border)); }
[data-theme="dark"] .os-loop-title a,
[data-theme="dark"] .single-article .entry-header h1 { color:var(--os-text); }
[data-theme="dark"] .entry-content table,
[data-theme="dark"] .entry-content th,
[data-theme="dark"] .entry-content td { border-color:var(--os-border); }
[data-theme="dark"] .entry-content blockquote { background:var(--os-surface-2); }

/* v2.0.0 fallback and generic page polish */
.not-found > p{max-width:620px;margin:12px auto 0;color:var(--os-muted)}
.not-found-actions{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin-top:18px}
.page-reading-shell .page-article{max-width:900px;margin-inline:auto}
.page-entry-header{padding-bottom:18px;border-bottom:1px solid var(--os-border)}
.page-entry-header h1{margin:4px 0 0}
.page-entry-content{max-width:780px;margin-inline:auto}
.page-links{margin-top:24px;padding-top:16px;border-top:1px solid var(--os-border);color:var(--os-muted);font-size:12px}
[data-theme="dark"] .not-found,.page-reading-shell [data-theme="dark"] .page-article{border-color:var(--os-border)}


/* v2.0.2 copyright-only footer */
.footer-bottom-copyright{margin-top:26px;padding-top:18px;border-top:0;text-align:center}
.footer-bottom-copyright .footer-copyright-rich{width:100%;margin:0 auto;text-align:center;color:#9caf9f;font-size:11px;line-height:1.8}
.footer-bottom-copyright .footer-copyright-rich>*{margin-top:0;margin-bottom:6px}
.footer-bottom-copyright .footer-copyright-rich>*:last-child{margin-bottom:0}
.footer-bottom-copyright .footer-copyright-rich a{color:var(--os-accent-2);text-decoration:none}
.footer-bottom-copyright .footer-copyright-row{width:100%}
.footer-bottom-copyright .footer-copyright-logo{display:none;align-items:center;justify-content:center;flex:0 0 auto}
.footer-bottom-copyright .footer-copyright-logo .footer-logo-link{display:flex;align-items:center}
.footer-bottom-copyright .footer-copyright-logo .brand-logo{width:auto;max-height:30px}
.footer-bottom-copyright .footer-copyright-rich a:hover{text-decoration:underline;text-underline-offset:2px}
.os-mobile-record-break{display:none}
.footer-bottom-copyright .footer-copyright-rich img{display:inline-block;width:auto;max-width:100%;max-height:24px;margin:0 4px;vertical-align:middle;object-fit:contain}
[data-theme="light"] .footer-bottom-copyright .footer-copyright-rich{color:#63786d}
[data-theme="light"] .footer-bottom-copyright .footer-copyright-rich a{color:var(--os-accent)}