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

:root {
  --bg: #0f1117; --surface: #1a1d27; --border: #2a2d3e;
  --text: #e2e8f0; --muted: #8892a4;
  --accent: #6366f1; --accent-h: #818cf8;
  --green: #22c55e; --blue: #3b82f6; --amber: #f59e0b;
  --r: 8px;
}

body { background: var(--bg); color: var(--text); font: 15px/1.6 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

header { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; }
.header-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; height: 56px; display: flex; align-items: center; gap: 24px; }
.logo { font-weight: 700; font-size: 18px; white-space: nowrap; }

nav { display: flex; gap: 4px; flex: 1; }
.nav-link { color: var(--muted); text-decoration: none; padding: 6px 12px; border-radius: var(--r); font-size: 14px; transition: color .15s, background .15s; }
.nav-link:hover { color: var(--text); background: var(--border); }
.nav-link.active { color: var(--accent); background: rgba(99,102,241,.1); }

#auth-area { margin-left: auto; display: flex; align-items: center; }
#user-bar { display: flex; align-items: center; gap: 10px; font-size: 13px; }
#user-bar.hidden { display: none; }
#user-email-display { color: var(--muted); }
#signout-btn { background: none; border: 1px solid var(--border); color: var(--muted); padding: 4px 10px; border-radius: var(--r); cursor: pointer; font-size: 13px; }
#signout-btn:hover { color: var(--text); border-color: var(--muted); }

.tier-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .05em; }
.tier-badge.public  { background: rgba(34,197,94,.15);  color: var(--green); }
.tier-badge.trilogy { background: rgba(59,130,246,.15); color: var(--blue); }
.tier-badge.coe     { background: rgba(245,158,11,.15); color: var(--amber); }

main { max-width: 1200px; margin: 0 auto; padding: 32px 24px; }
.content-section { display: none; }
.content-section.active { display: block; }
.content-section h2 { font-size: 22px; font-weight: 600; margin-bottom: 20px; }
.section-body {}

.category-group { margin-bottom: 32px; }
.cat-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 12px; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 16px; }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.card-title { font-weight: 600; font-size: 15px; }
.card-sub { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.card-body { font-size: 14px; color: var(--muted); margin-bottom: 10px; }
.card-meta { font-size: 12px; color: var(--muted); display: flex; gap: 12px; }
.card-author { font-weight: 500; color: var(--text); }
.pos { color: var(--green); } .neg { color: #ef4444; }

.empty { text-align: center; color: var(--muted); padding: 60px 0; }
a.dl-link { display: inline-block; font-size: 13px; color: var(--accent); text-decoration: none; margin-top: 8px; }
a.dl-link:hover { color: var(--accent-h); }
a.card-link { color: var(--accent); font-size: 13px; text-decoration: none; }
a.card-link:hover { color: var(--accent-h); }

.signin-prompt { position: fixed; bottom: 24px; right: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; max-width: 280px; font-size: 14px; }
.signin-prompt.hidden { display: none; }

@media (max-width: 640px) {
  .header-inner { gap: 12px; }
  .nav-link { padding: 6px 8px; font-size: 13px; }
}