:root{
  --bg: #0B1020;
  --panel: #0B1225;
  --ink: #E5E7EB;
  --muted: #94A3B8;
  --brand: #7C3AED;
  --brand-2: #0EA5E9;
  --accent: #22C55E;
  --border: #1F2937;
  --focus: #38BDF8;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, Noto Sans, "Apple Color Emoji", "Segoe UI Emoji"; background:var(--bg); color:var(--ink); line-height:1.6}
a{color:#A5B4FC; text-decoration:none}
a:hover{text-decoration:underline}
.visually-hidden{position:absolute!important; width:1px;height:1px; padding:0;margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

.nc-container{width:min(1080px, 92%); margin:0 auto}
.nc-header{position:sticky; top:0; z-index:20; background:rgba(11,16,32,0.75); backdrop-filter: blur(6px); border-bottom:1px solid var(--border)}
.nc-nav{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; flex-wrap:wrap}
.brand{display:inline-flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-weight:700}
.brand img{width:28px;height:28px}
.nav-search{display:flex; gap:8px; align-items:center; margin-left:auto}
.nav-search input{height:36px; min-width:360px; border-radius:10px; background:var(--panel); border:1px solid var(--border); color:var(--ink); padding:0 12px}
.nav-search button{height:36px; border-radius:10px; border:1px solid #4C1D95; background:linear-gradient(180deg, #7C3AED, #4C1D95); color:white; padding:0 14px}

.nc-footer{border-top:1px solid var(--border); margin-top:32px; padding:16px 0; color:var(--muted)}

.hero{padding:48px 0 24px; text-align:center}
.hero-title{font-size:clamp(32px, 6vw, 44px); line-height:1.1; margin:0 0 8px; background:linear-gradient(90deg, var(--brand), var(--brand-2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero-sub{color:var(--muted); margin:0 0 16px}
.hero-search{display:grid; grid-template-columns: 1fr auto; gap:12px; width:min(860px, 96%); margin:0 auto}
.hero-search input{height:56px; border-radius:14px; border:1px solid var(--border); background:#0b1225; color:var(--ink); padding:0 18px}
.hero-search button{height:56px; border-radius:14px; background:linear-gradient(180deg, #22C55E, #15803D); color:white; border:0; padding:0 22px; font-weight:600}

.card{border:1px solid var(--border); border-radius:14px; background: var(--panel); padding:14px; margin:16px 0}
.card-header{display:flex; align-items:center; justify-content:space-between; margin:4px 2px 10px; color:var(--ink)}

.legend{display:flex; flex-wrap:wrap; gap:10px 16px}
.legend-item{display:inline-flex; align-items:center; gap:8px; color:var(--muted)}
.legend-dot{width:12px; height:12px; border-radius:4px; display:inline-block}

.list{list-style:none; margin:0; padding:0}
.list-item{padding:10px 8px; border-top:1px dashed var(--border)}
.list-item:first-child{border-top:0}
.list-item a{color:#E5DEFF; text-decoration:none}
.list-item a:hover{text-decoration:underline}
.meta{color:var(--muted); margin-top:2px}

.chips{display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 2px}
.chip{display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:999px; background: rgba(100,116,139,0.15); border:1px solid rgba(100,116,139,0.5); color:#E2E8F0; font-size:12px}
.chip{background: color-mix(in oklab, var(--chip, #64748b) 22%, var(--panel) 78%); border-color: color-mix(in oklab, var(--chip, #64748b) 80%, #000 20%)}

.toolbar{margin:10px 0}
.toolbar-row{display:grid; grid-template-columns: 200px minmax(360px, 1fr) 200px auto; gap:10px}
.field{display:flex; flex-direction:column; gap:6px}
.field input, .field select, .input{height:40px; border-radius:10px; border:1px solid var(--border); background:var(--panel); color:var(--ink); padding:0 12px}
.btn{height:40px; padding:0 14px; border-radius:10px; border:1px solid #334155; background:#132036; color:#e2e8f0; cursor:pointer}
.btn.contrast{border:1px solid #165E31; background:linear-gradient(180deg, #22C55E, #15803D); color:white}
.btn.outline{background:#0b1225; border:1px solid #334155; color:#e2e8f0}
.btn.secondary{background:#0b1225; border:1px dashed #334155; color:#cbd5e1}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn:disabled, .btn[disabled]{opacity:0.6; cursor:not-allowed}
.btn[aria-busy="true"]::after{content:'…'; margin-left:6px; animation: dot 1s steps(5,end) infinite}
@keyframes dot { to { visibility:hidden } }

/* Focus states */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible{
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 8px;
}

.filters{margin:6px 0 14px}
.filters-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.check{display:inline-flex; align-items:center; gap:8px}
.center{display:flex; justify-content:center; margin:14px 0}
.submeta{color:var(--muted); margin-top:6px}

.paper{border:1px solid var(--border); border-radius:14px; background:#0b1225; padding:16px; margin:10px 0 16px}
.paper-title{margin:4px 0 2px}
.passage{line-height:1.8; font-size:1.05rem; white-space:normal; overflow-wrap:anywhere; hyphens:auto}
.tok{position:relative; background-repeat: no-repeat; background-origin: padding-box; display:inline-block; white-space: pre; vertical-align: baseline}

.grid.two{display:grid; grid-template-columns: 1.4fr 1fr; gap:16px; align-items:start}
#graph{border:1px solid var(--border); border-radius:12px; background:var(--panel); width:100%}
#graph.fullscreen{position:fixed; inset:0; z-index:50; height:auto !important; border-radius:0}

.stack{display:block}
.stack > * + *{ margin-top: 16px }

.row{display:flex; align-items:center}
.gap{gap:8px}
.compact{display:inline-flex; align-items:center; gap:6px}

.rel-list{list-style:none; margin:0; padding:0; max-height:58vh; overflow:auto}
.rel-item{padding:10px 6px; border-top:1px dashed var(--border)}
.rel-item:first-child{border-top:0}
.rel-row{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:0.95rem}
.rel-text{color:#E2E8F0; overflow-wrap:anywhere}
.rel-label{color:#22C55E; padding:2px 8px; border-radius:999px; border:1px solid rgba(34,197,94,0.45); background: rgba(34,197,94,0.12)}
.rel-arrow{color:#64748b}
.rel-just-wrap{margin-top:4px}
.rel-just{font-size:0.9rem; color:#cbd5e1; background:#0f172a; border:1px solid var(--border); border-radius:8px; padding:8px}
.muted{color:var(--muted)}
.spacer{height:10px}

/* Compact relations panel */
.rel-panel.small .card-header{margin-bottom:6px}
.rel-panel.small .chip{padding:1px 6px; font-size:11px}
.rel-panel.small .rel-list.compact{max-height:64vh}
.rel-panel.small .rel-item{padding:6px 2px}
.rel-panel.small .rel-row{gap:6px; font-size:0.9rem}
.rel-panel.small .rel-just{font-size:0.85rem}

/* Vertical relations list appearance */
.rel-list.vertical .rel-item:nth-child(odd){background: rgba(148,163,184,0.06)}
.rel-list.vertical .rel-item{border-left: 2px solid #334155}

/* details summary tweaks */
details > summary{cursor:pointer; color:#cbd5e1}
details > summary:hover{color:#e2e8f0}
details{border-radius:10px}

/* Relations table (simple, high-visibility) */
.rel-table td{ vertical-align: middle }
.rel-table .ent{ display:grid; grid-template-columns: auto 1fr; gap:8px; align-items:center }
.rel-table .ent .ent-pill{ display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:999px; border:1px solid #334155; background:#0b1225; color:#cbd5e1; white-space:nowrap; font-size:12px }
.rel-table .ent .dot{ width:10px; height:10px; border-radius:3px; display:inline-block }
.rel-table .ent .e-text{ color:#E2E8F0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.rel-table .ent .ent-meta{ grid-column:1/-1; color:#94a3b8; font-size:12px; margin-left:18px }
.rel-table .ent .ent-meta.small{ font-size:11px; opacity:0.85 }
.rel-table .rel .rel-badge{ display:inline-block; padding:2px 10px; border-radius:999px; border:1px solid rgba(34,197,94,0.45); background: rgba(34,197,94,0.12); color:#22C55E; font-weight:600; white-space:nowrap }

@media (max-width: 1080px){
  .toolbar-row{grid-template-columns: 1fr}
  .grid.two{grid-template-columns: 1fr}
  .nav-search{order:2; flex: 1 1 100%; margin-left:0}
  .nav-search input{min-width: 0; width: 100%}
}

/* Mobile aside toggle for relations (slide-in) */
@media (max-width: 1080px){
  .rel-panel{position: fixed; right: 10px; top: 70px; width: min(420px, 92vw); max-height: calc(100vh - 90px); overflow:auto; z-index: 30; transform: translateX(110%); transition: transform .2s ease}
  .rel-panel.open{transform: translateX(0)}
}

/* Enhanced chips for stats */
.chips.stats .chip{font-size:13px; padding:4px 10px; font-weight:600; background: color-mix(in oklab, var(--chip, #64748b) 30%, var(--panel) 70%); border-color: color-mix(in oklab, var(--chip, #64748b) 85%, #000 15%)}

/* Simple dark table styling */
.table{ width:100%; border-collapse: separate; border-spacing:0 }
.table th, .table td{ padding: 0.6rem 0.75rem; border-bottom:1px solid var(--border); text-align:left; font-size:0.95rem }
.table thead th{ color: var(--muted); font-weight:600; letter-spacing:0.04em; text-transform:uppercase; font-size:0.72rem; background: rgba(148,163,184,0.06); position: sticky; top: 0; z-index: 1 }
.table-compact th, .table-compact td{ padding: 0.45rem 0.6rem }
.table-striped tbody tr:nth-child(odd){ background: rgba(148,163,184,0.04) }
.table tbody tr:hover{ background: rgba(148,163,184,0.08) }

/* Grid-aligned relations list + sticky header */
.rel-grid{ display:grid; grid-template-columns: minmax(88px, 140px) 1fr 20px minmax(92px, 140px) 20px minmax(88px, 140px) 1fr; gap:8px; align-items:center }
.rel-head{ position: sticky; top: 0; z-index: 2; background: linear-gradient(180deg, rgba(11,18,37,0.95), rgba(11,18,37,0.85)); border-bottom:1px solid var(--border); padding:8px 6px }
.rel-head span{ font-size:0.72rem; text-transform:uppercase; letter-spacing:0.04em; color: var(--muted) }
.rel-item:hover{ background: rgba(148,163,184,0.06) }
.rel-arrow{ text-align:center }
.rel-list{ scrollbar-gutter: stable }
/* Override previous flex for rows when grid class present */
.rel-row.rel-grid{ display:grid }
@media (max-width: 1080px){
  .rel-grid{ grid-template-columns: 1fr }
  .rel-head{ display:none }
}