@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
:root{
--bg-primary: #0d1117;
--bg-secondary: #161b22;
--bg-elevated: #1c2128;
--surface: rgba(255, 255, 255, 0.03);
--surface-hover: rgba(255, 255, 255, 0.06);
--border: #30363d;
--border-subtle: #21262d;
--border-focus: #b91c1c;
--text-primary: #e6edf3;
--text-secondary: #f0f6fc;
--text-muted: #8b949e;
--text-faint: #6e7681;
--accent-color: #b91c1c;
--accent-hover: #dc2626;
--accent-soft: rgba(185, 28, 28, 0.12);
--accent-soft-border: rgba(220, 38, 38, 0.35);
--status-ok: #3fb950;
--status-warn: #d29922;
--status-off: #6e7681;
--bg: var(--bg-primary);
--text: var(--text-primary);
--muted: var(--text-muted);
--accent: var(--accent-color);
--hover: #1a2027;
--selected: rgba(185, 28, 28, 0.12);
--green: var(--status-ok);
--orange: var(--status-warn);
--red: var(--accent-color);
--shadow-lift: 0 4px 20px rgba(0, 0, 0, 0.45);
--radius: 8px;
--radius-sm: 6px;
--font-sans: 'Inter', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
*{box-sizing: border-box;}
html{scroll-behavior: smooth;}
body{
margin: 0;
font-family: var(--font-sans);
font-size: 15px;
line-height: 1.55;
background: var(--bg-primary);
color: var(--text-primary);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
min-height: 100vh;
display: flex;
flex-direction: column;
}
::selection{background: var(--accent-soft);color: var(--text-secondary);}
a{color: var(--text-primary);text-decoration: none;}
h1, h2, h3, h4{color: var(--text-secondary);line-height: 1.25;margin: 0 0 0.5em;}
h1{font-size: 1.9rem;font-weight: 800;letter-spacing: -0.02em;}
h2{font-size: 1.25rem;font-weight: 700;}
h3{font-size: 1.02rem;font-weight: 600;}
p{margin: 0 0 1em;}
.mono{font-family: var(--font-mono);}
.topbar{
position: sticky;
top: 0;
z-index: 100;
background: rgba(13, 17, 23, 0.92);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border-subtle);
}
.topbar-inner{
max-width: 1240px;
margin: 0 auto;
padding: 14px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
.brand{display: flex;align-items: center;gap: 12px;}
.brand-mark{
width: 14px;height: 14px;
background: var(--accent-color);
border-radius: 2px;
flex: none;
box-shadow: 0 0 0 4px var(--accent-soft);
}
.brand-name{
font-weight: 800;
font-size: 0.92rem;
letter-spacing: 0.14em;
color: var(--text-secondary);
white-space: nowrap;
}
.brand-name em{font-style: normal;color: var(--accent-hover);}
.nav{display: flex;align-items: center;gap: 4px;flex-wrap: wrap;}
.nav a{
padding: 7px 14px;
border-radius: var(--radius-sm);
font-size: 0.86rem;
font-weight: 500;
color: var(--text-muted);
border: 1px solid transparent;
transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
white-space: nowrap;
}
.nav a:hover{color: var(--text-primary);background: var(--surface-hover);}
.nav a.active{
color: var(--text-secondary);
background: var(--surface);
border-color: var(--border);
}
.page{
flex: 1;
width: 100%;
max-width: 1240px;
margin: 0 auto;
padding: 48px 24px 72px;
}
.hero{max-width: 860px;margin-bottom: 40px;}
.eyebrow{
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.22em;
color: var(--accent-hover);
text-transform: uppercase;
margin-bottom: 14px;
display: flex;
align-items: center;
gap: 10px;
}
.eyebrow::before{
content: '';
width: 26px;height: 1px;
background: var(--accent-color);
display: inline-block;
}
.hero h1{margin-bottom: 18px;}
.hero .lead{color: var(--text-muted);font-size: 1.02rem;max-width: 72ch;}
.hero .lead strong{color: var(--text-primary);font-weight: 600;}
.stat-strip{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1px;
background: var(--border-subtle);
border: 1px solid var(--border-subtle);
border-radius: var(--radius);
overflow: hidden;
margin: 28px 0 36px;
}
.stat{
background: var(--bg-secondary);
padding: 18px 22px;
}
.stat .stat-value{font-family: var(--font-mono);font-size: 1.5rem;font-weight: 600;color: var(--text-secondary);}
.stat .stat-label{font-size: 0.74rem;text-transform: uppercase;letter-spacing: 0.12em;color: var(--text-muted);margin-top: 4px;}
.panel{
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 24px;
}
.panel + .panel{margin-top: 16px;}
.panel h2{font-size: 1.05rem;margin-bottom: 14px;}
.panel h2 .mono{color: var(--text-muted);font-size: 0.8rem;font-weight: 400;}
.panel h2 a{color: inherit;transition: color 0.15s ease;}
.panel h2 a:hover{color: var(--accent-hover);}
.panel p{color: var(--text-muted);}
.panel p:last-child{margin-bottom: 0;}
.panel p strong{color: var(--text-primary);font-weight: 600;}
.search-wrap{
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 24px;
flex-wrap: wrap;
}
.search-input{
flex: 1;
min-width: 260px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-primary);
font-family: var(--font-sans);
font-size: 0.92rem;
padding: 11px 16px;
outline: none;
transition: border-color 0.15s ease, background 0.15s ease;
}
.search-input::placeholder{color: var(--text-faint);}
.search-input:focus{border-color: var(--accent-color);background: var(--surface-hover);}
.search-count{font-size: 0.8rem;color: var(--text-muted);font-family: var(--font-mono);white-space: nowrap;}
.grid{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.card{
display: flex;
flex-direction: column;
gap: 12px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 18px;
transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
min-width: 0;
}
.card:hover{
background: var(--surface-hover);
border-color: #3d444d;
transform: translateY(-2px);
box-shadow: var(--shadow-lift);
}
.card-name{
font-size: 0.98rem;
font-weight: 700;
color: var(--text-secondary);
line-height: 1.35;
overflow-wrap: break-word;
}
.card-meta{
display: flex;
gap: 14px;
font-family: var(--font-mono);
font-size: 0.74rem;
color: var(--text-muted);
flex-wrap: wrap;
}
.card-actions{
margin-top: auto;
display: flex;
flex-direction: column;
gap: 8px;
}
.card-links{
display: flex;
justify-content: space-between;
gap: 8px;
font-size: 0.8rem;
}
.link{
color: var(--text-muted);
transition: color 0.15s ease;
}
.link:hover{color: var(--text-secondary);text-decoration: underline;text-underline-offset: 3px;}
.link-accent{color: var(--accent-hover);}
.link-accent:hover{color: var(--text-secondary);text-decoration: underline;text-underline-offset: 3px;}
.btn{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--font-sans);
font-size: 0.86rem;
font-weight: 600;
padding: 9px 16px;
border-radius: var(--radius-sm);
border: 1px solid transparent;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
text-decoration: none;
}
.btn-primary{
background: var(--accent-color);
color: #fff;
}
.btn-primary:hover{background: var(--accent-hover);}
.btn-outline{
background: transparent;
border-color: var(--border);
color: var(--text-primary);
}
.btn-outline:hover{border-color: var(--text-muted);background: var(--surface-hover);}
.btn-disabled,
.btn:disabled{
background: rgba(255, 255, 255, 0.04);
border-color: var(--border-subtle);
color: var(--text-muted);
cursor: not-allowed;
flex-direction: column;
gap: 2px;
padding: 8px 12px;
line-height: 1.4;
}
.btn-block{width: 100%;}
.table-wrap{
overflow-x: auto;
border: 1px solid var(--border);
border-radius: var(--radius);
}
table.data{width: 100%;border-collapse: collapse;font-size: 0.88rem;background: var(--surface);}
table.data th{
text-align: left;
padding: 10px 16px;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-muted);
background: var(--bg-secondary);
border-bottom: 1px solid var(--border);
white-space: nowrap;
}
table.data td{padding: 11px 16px;border-bottom: 1px solid var(--border-subtle);vertical-align: top;}
table.data tr:last-child td{border-bottom: none;}
table.data tbody tr:hover{background: var(--surface-hover);}
table.data td.mono-cell{font-family: var(--font-mono);font-size: 0.8rem;color: var(--text-muted);}
.section{margin-top: 44px;}
.section-head{display: flex;align-items: baseline;justify-content: space-between;gap: 16px;margin-bottom: 16px;flex-wrap: wrap;}
.section-head h2{margin: 0;}
.site-footer{
border-top: 1px solid var(--border-subtle);
background: var(--bg-secondary);
padding: 28px 24px;
margin-top: auto;
}
.footer-inner{
max-width: 1240px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
font-size: 0.78rem;
color: var(--text-faint);
}
.empty-state{
grid-column: 1 / -1;
text-align: center;
color: var(--text-muted);
padding: 60px 20px;
border: 1px dashed var(--border);
border-radius: var(--radius);
font-size: 0.92rem;
}
@media (max-width: 1080px){
.grid{grid-template-columns: repeat(3, 1fr);}
}
@media (max-width: 820px){
.grid{grid-template-columns: repeat(2, 1fr);}
.page{padding-top: 32px;}
h1{font-size: 1.55rem;}
}
@media (max-width: 520px){
.grid{grid-template-columns: 1fr;}
.topbar-inner{padding: 12px 16px;}
.page{padding: 28px 16px 56px;}
.stat-strip{grid-template-columns: 1fr 1fr;}
}
@media (prefers-reduced-motion: reduce){
*{transition: none !important;}
html{scroll-behavior: auto;}
}