:root{
  --bg: #ffffff;
  --fg: #0a0a0a;
  --muted: #6b7280;
  --card: #f8fafc;
  --border: #e5e7eb;
  --accent: #111827;
  --accent-weak: #f3f4f6;
  --radius: 12px;
  --col-gap: 40px;
  --content-w: 760px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b0f1a;
    --fg: #edf1f7;
    --muted: #9aa3b2;
    --card: #0f172a;
    --border: #1f2a37;
    --accent: #e5e7eb;
    --accent-weak: #0c1222;
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: var(--bg); color: var(--fg); line-height: 1.6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a,button{transition: all .15s ease}
a{color: inherit; text-decoration: none}
a:hover{ text-decoration: underline; text-underline-offset: 3px }


.layout{ max-width: 1200px; margin: 0 auto; padding: 32px 24px 64px }
.muted{color: var(--muted)}
.small{font-size: .9rem}

.top-bar{ display:flex; align-items:center; gap: 10px; padding: 16px 24px }
.top-bar .back{ color: var(--fg); font-weight: 600 }
.bar-divider{ height:1px; background: var(--border) }

.content{ min-width: 0 }

.columns{ display:grid; grid-template-columns: 1fr; gap: 28px }
@media(min-width: 1100px){ .columns{ grid-template-columns: 1.4fr 1fr } }

.section{ margin-bottom: 40px }
.section-head{ display:flex; align-items:center; justify-content: space-between; gap: 12px; margin-bottom: 10px }
h2{ font-size: 1.05rem; text-transform: none; letter-spacing: 0; margin: 0 }
.xl{ font-size: 1.4rem; font-weight: 700; margin: 0 0 8px }
.subsection{ margin-top: 14px }
.subsection h3{ font-size: 1rem; margin: 0 0 8px; color: var(--fg) }

.list{ display:flex; flex-direction: column; gap: 10px; padding:0; margin:0; list-style:none }
.list li{ padding: 12px; border:1px solid var(--border); border-radius: var(--radius); background: var(--card) }
.list .meta{ color: var(--muted); font-size:.9rem; margin-top: 4px }
.badges{ display:flex; flex-wrap: wrap; gap: 6px; margin-top: 6px }
.badge{
  background: var(--bg); border:1px solid var(--border); color: var(--muted);
  padding: 2px 8px; border-radius: 999px; font-size: .8rem
}

/* Smooth anchors */
html{ scroll-behavior: smooth }

/* Reading list polish */
#reading-current, #reading-read{ list-style:none; padding:0; margin:0; display:flex; flex-direction: column; gap: 10px }
#reading-current li, #reading-read li{ padding: 12px; border:1px solid var(--border); border-radius: var(--radius); background: var(--card) }

/* Research grid */
.grid{ display:grid; grid-template-columns: 1fr; gap: 16px }
@media(min-width: 900px){ .grid{ grid-template-columns: 1fr 1fr } }
.card{ border:1px solid var(--border); border-radius: 12px; background: var(--card); padding: 18px; position: relative }
.card h3{ margin: 6px 0 8px; font-size: 1.05rem; line-height: 1.3 }
.filters{ display:flex; gap: 20px; align-items: center; border-bottom:1px solid var(--border); padding-bottom: 12px; margin: 6px 0 18px }
.filters.tabs .filter{ background: transparent; border: none; padding: 8px 0; color: var(--muted); font-weight: 600 }
.filters.tabs .filter.active{ color: var(--fg); border-bottom:2px solid var(--fg) }
.status-pill{ display:inline-block; padding:4px 10px; border:1px solid var(--fg); border-radius: 999px; font-size:.75rem; font-weight:700 }
.card .meta{ color: var(--muted); font-size: .85rem; margin-top: 2px }

/* Card footer link */
.card .actions{ display:flex; align-items:center; justify-content: flex-end; margin-top: 10px }
.view-link{ display:inline-flex; align-items:center; gap:8px; font-weight:700; text-decoration:none }
.view-link .arrow{ display:inline-block; transition: transform .15s ease }
.view-link:hover .arrow{ transform: translateX(3px) }

/* External reading pills */
.pill-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction: column; gap: 12px }
.pill-list li{ border:1px solid var(--border); border-radius: 14px; background: var(--card); padding: 14px }
.pill-list a{ font-weight: 700 }
.pill-list .meta{ color: var(--muted); font-size: .85rem; margin-top: 4px }

/* Research list */
.r-list{ list-style:none; padding:0; margin:12px 0 0; display:flex; flex-direction: column; gap: 10px }
.r-item{ padding: 12px; border:1px solid var(--border); border-radius: var(--radius); background: var(--card) }
.r-item h3{ margin: 0 0 4px; font-size: 1rem }
.r-item .meta{ color: var(--muted); font-size:.9rem }
.r-item .badges{ margin-top:6px }

/* Modal */
.modal{ position: fixed; inset: 0; display:none; align-items:center; justify-content: center; z-index: 1000 }
.modal[aria-hidden="false"]{ display:flex }
.modal-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.5) }
.modal-dialog{ position: relative; width: min(1200px, 95vw); height: min(90vh, 900px); background: var(--bg); border-radius: 12px; overflow: hidden; border:1px solid var(--border) }
.modal-close{ position:absolute; top:8px; right:8px; border:1px solid var(--border); background: var(--card); color: var(--fg); border-radius:8px; padding:6px 10px; font-size:1rem }
#pdf-frame{ width:100%; height:100%; border:0 }