@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&family=Fraunces:ital,wght@1,300&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:      #1E1F2E;
  --bg-nav:  #1A1B2A;
  --border:  #252638;
  --text-1:  #ffffff;
  --text-2:  #C8C4D4;
  --text-3:  #4A4C64;
  --text-4:  #2A2C40;
  --accent:  #B89AE8;
  --green:   #7EC8A0;
  --amber:   #E8C87A;
  --blue:    #7AAEE8;
  --mono:    'JetBrains Mono', monospace;
}

html, body { height: 100%; background: var(--bg); color: var(--text-2); font-family: var(--mono); -webkit-font-smoothing: antialiased; font-size: 13px; line-height: 1.6; display: flex; flex-direction: column; min-height: 100vh; }

/* TOP NAV */
.topnav { display:flex; align-items:center; justify-content:space-between; padding:0 2.5rem; height:48px; border-bottom:1px solid var(--border); background:var(--bg-nav); flex-shrink:0; position:sticky; top:0; z-index:10; }
.nav-logo { font-size:12px; color:var(--text-3); letter-spacing:0.06em; font-family:var(--mono); }
.nav-logo span { color:var(--accent); }
.nav-links { display:flex; list-style:none; }
.nav-links a { font-size:11px; color:var(--text-3); text-decoration:none; padding:0 1.1rem; height:48px; display:flex; align-items:center; letter-spacing:0.04em; transition:color 0.1s, background 0.1s; border-right:1px solid var(--border); font-family:var(--mono); }
.nav-links a:first-child { border-left:1px solid var(--border); }
.nav-links a:hover { color:var(--text-2); background:rgba(255,255,255,0.02); }
.nav-links a.active { color:var(--accent); }
.nav-right { display:flex; align-items:center; gap:0.75rem; }
.nav-tag { font-size:9px; color:var(--text-4); letter-spacing:0.1em; border:1px solid var(--border); border-radius:3px; padding:3px 8px; font-family:var(--mono); }
.nav-tag.online { color:var(--green); border-color:#1E3A2E; }

/* MAIN */
.page-main { flex:1; padding:2.5rem 3rem; max-width:900px; width:100%; }

/* PAGE HEADER */
.page-header { margin-bottom:2rem; padding-bottom:1.5rem; border-bottom:1px solid var(--border); }
.page-comment { font-size:10px; color:var(--text-4); letter-spacing:0.04em; margin-bottom:8px; }
.page-title { font-size:2rem; font-weight:700; color:var(--text-1); letter-spacing:-0.02em; line-height:1; margin-bottom:6px; }
.page-title .hl { color:var(--accent); }
.page-meta { font-size:10px; color:var(--text-4); letter-spacing:0.04em; }
.page-meta span { color:var(--text-3); }

/* SECTION LABEL */
.section-label { font-size:9px; color:var(--text-4); letter-spacing:0.12em; text-transform:uppercase; margin-bottom:1rem; display:block; }

/* CARD LIST */
.card-list { display:flex; flex-direction:column; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.card { background:var(--bg); padding:1.25rem 1.5rem; display:flex; align-items:center; gap:1rem; text-decoration:none; transition:background 0.1s; }
.card:hover { background:#211F32; }
.card:hover .card-arrow { color:var(--accent); }
.card:hover .card-title { color:var(--text-1); }
.card-index { font-size:10px; color:var(--text-4); width:22px; flex-shrink:0; }
.card-icon { font-size:11px; color:var(--text-3); width:16px; flex-shrink:0; text-align:center; }
.card-body { flex:1; min-width:0; }
.card-title { font-size:13px; color:var(--text-2); letter-spacing:0.02em; transition:color 0.1s; display:block; margin-bottom:3px; }
.card-desc { font-size:10px; color:var(--text-3); letter-spacing:0.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-right { display:flex; align-items:center; gap:1rem; flex-shrink:0; }
.card-badge { font-size:9px; letter-spacing:0.08em; color:var(--text-3); border:1px solid var(--border); border-radius:3px; padding:2px 7px; }
.card-arrow { font-size:12px; color:var(--text-4); transition:color 0.1s; }
.card-av .card-badge { color:var(--green); border-color:#1E3A2E; }
.card-av .card-index, .card-av .card-icon { color:#3A6B52; }
.card-dg .card-badge { color:var(--amber); border-color:#3A3018; }
.card-dg .card-index, .card-dg .card-icon { color:#6B5228; }
.card-gm .card-badge { color:var(--accent); border-color:#2E2448; }
.card-gm .card-index, .card-gm .card-icon { color:#6A4A9A; }
.card-pr .card-badge { color:var(--blue); border-color:#1E2A48; }
.card-pr .card-index, .card-pr .card-icon { color:#3A5A8A; }

/* COMING SOON */
.coming-soon { margin-top:2rem; font-size:11px; color:var(--text-4); letter-spacing:0.08em; text-align:center; padding:4rem 2rem; border:1px dashed var(--border); border-radius:8px; line-height:2; }
.coming-soon .hl { color:var(--accent); }

/* FOOTER */
.site-footer { border-top:1px solid var(--border); padding:0.75rem 2.5rem; display:flex; justify-content:space-between; align-items:center; background:var(--bg-nav); flex-shrink:0; }
.site-footer p { font-size:9px; color:var(--text-4); letter-spacing:0.06em; font-family:var(--mono); }

/* RESPONSIVE */
@media (max-width:700px) {
  .topnav { padding:0 1rem; }
  .nav-logo { display:none; }
  .nav-right { display:none; }
  .nav-links a { padding:0 0.65rem; font-size:10px; }
  .page-main { padding:1.5rem 1.25rem; }
}