:root {
		--primary:       #1F4E79;
		--primary-mid:   #2E6FAD;
		--primary-light: #5B9BD5;
		--primary-faint: #EBF4FF;
		--accent:        #C7E3FF;
		--bg-page:       #F0F4F8;
		--bg-card:       #FFFFFF;
		--bg-nav:        #1F4E79;
		--bg-glyph:      #EBF4FF;
		--text-head:     #1A1A2E;
		--text-body:     #2D3748;
		--text-muted:    #718096;
		--border:        #D1DCE8;
		--code-bg:       #EEF5FF;
		--code-text:     #1F4E79;
		--tag-bg:        #E2EFFE;
		--tag-text:      #1A4D8A;
		--shadow:        0 1px 3px rgba(31,78,121,.10), 0 4px 12px rgba(31,78,121,.08);
		--radius:        10px;
		--transition:    color .2s, background-color .2s, border-color .2s;
}
[data-theme="dark"] {
		--primary:       #5B9BD5;
		--primary-mid:   #7AB3DF;
		--primary-light: #9FCAE8;
		--primary-faint: #102035;
		--accent:        #1A3A5C;
		--bg-page:       #0D1520;
		--bg-card:       #162032;
		--bg-nav:        #0A1220;
		--bg-glyph:      #112540;
		--text-head:     #E8F0FA;
		--text-body:     #B8C8DC;
		--text-muted:    #6B85A4;
		--border:        #1E3050;
		--code-bg:       #112040;
		--code-text:     #7EB8F7;
		--tag-bg:        #0F2540;
		--tag-text:      #7AB3DF;
		--shadow:        0 1px 3px rgba(0,0,0,.30), 0 4px 12px rgba(0,0,0,.25);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body { font-family: 'Inter', system-ui, sans-serif; background: var(--bg-page); color: var(--text-body); transition: var(--transition); line-height: 1.6; }
a { color: var(--primary); text-decoration: none; transition: color .15s; }
a:hover { color: var(--primary-mid); text-decoration: underline; }


/* Nav */
.nav-wrapper{ background-color: var(--bg-nav); box-shadow: 0 2px 8px rgba(0,0,0,0.25); position: sticky; top: 0px; z-index: 100; height: 57px; border-bottom: 1px solid var(--border); }
.nav { background: var(--bg-nav); padding: 0 24px; display: flex; align-items: center; gap: 20px; height: 56px; }
.nav-brand { font-size: 1.05rem; font-weight: 700; color: #FFF; letter-spacing: -.3px; white-space: nowrap; padding: 5px 10px; border-radius: 5px; transition: background .15s, color .15s; }
.nav-brand a { color:  var(--accent); }
.nav-brand:hover { background: rgba(255,255,255,.12); color: #FFF; text-decoration: none; }
.nav-search { flex: 1; max-width: 360px; display: flex; align-items: center; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.20); border-radius: 6px; overflow: hidden; }
.nav-search input { background: transparent; border: none; outline: none; color: #FFF; font-family: inherit; font-size: .875rem; padding: 7px 12px; width: 100%; }
.nav-search input::placeholder { color: rgba(255,255,255,.55); }
.nav-search button { background: rgba(255,255,255,.18); border: none; color: #FFF; cursor: pointer; padding: 7px 12px; font-size: .875rem; transition: background .15s; }
.nav-search button:hover { background: rgba(255,255,255,.28); }
.nav-links { display: flex; gap: 4px; margin-left: auto; }
.nav-links a { color: rgba(255,255,255,.80); font-size: 0.9rem; padding: 5px 10px; border-radius: 5px; transition: background .15s, color .15s; }
.nav-links a:hover, .nav-links a.active { background: rgba(255,255,255,.12); color: #FFF; text-decoration: none; }


/* Layout */
.page-wrap { max-width: 1200px; margin: 0 auto; padding: 28px 20px 60px; }
.breadcrumb { font-size: .8rem; color: var(--text-muted); margin-bottom: 18px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb-sep { color: var(--border); }


/* Pagination */
.pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 24px; flex-wrap: wrap; }
.pag-btn { background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; color: var(--text-body); font-family: inherit; font-size: .82rem; font-weight: 500; padding: 6px 13px; cursor: pointer; transition: background .15s, border-color .15s; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.pag-btn:hover { background: var(--primary-faint); border-color: var(--primary-light); color: var(--primary); text-decoration: none; }
.pag-btn.active { background: var(--primary); border-color: var(--primary); color: #FFF; }
.pag-btn.disabled { opacity: .4; pointer-events: none; }
.pag-ellipsis { font-size: .88rem; color: var(--text-muted); padding: 0 4px; line-height: 34px; }
.pag-info { font-size: .8rem; color: var(--text-muted); padding: 0 4px; }
.pag-jump { display: flex; align-items: center; gap: 5px; font-size: .8rem; color: var(--text-muted); margin-left: 8px; }
.pag-jump-input { width: 52px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 5px; color: var(--text-body); font-family: 'JetBrains Mono', monospace; font-size: .82rem; padding: 5px 6px; text-align: center; outline: none; transition: border-color .15s; -moz-appearance: textfield; }
.pag-jump-input::-webkit-outer-spin-button, .pag-jump-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.pag-jump-input:focus { border-color: var(--primary-light); }
.pag-go-btn { background: var(--primary); border: none; border-radius: 5px; color: #FFF; cursor: pointer; font-family: inherit; font-size: .78rem; font-weight: 600; padding: 5px 10px; transition: background .15s; }
.pag-go-btn:hover { background: var(--primary-mid); }