:root {
  --bg: #eef1f8;
  --panel: #ffffff;
  --ink: #121829;
  --muted: #5c6781;
  --accent: #4f46e5;
  --accent-dark: #3a31c4;
  --border: #e2e7f1;
  --ok: #16a34a;
  --ok-dark: #138a3e;
  --pending: #b45309;
  --shadow: 0 1px 2px rgba(18, 24, 41, .04), 0 6px 20px rgba(18, 24, 41, .06);
  --shadow-lg: 0 10px 40px rgba(18, 24, 41, .12);
  /* electrostatic gradient: negative (blue) -> neutral -> positive (red) */
  --efield: linear-gradient(90deg, #2563eb 0%, #8b9bd6 35%, #f1f1f1 50%, #e89aa0 65%, #dc2626 100%);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(79, 70, 229, .10), transparent 60%),
    var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ---- Header ---- */
.site-header {
  position: relative;
  background: linear-gradient(135deg, #0e1530 0%, #1b264f 55%, #243161 100%);
  color: #fff;
  padding: 1.6rem 0 1.9rem;
  overflow: hidden;
}
.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: var(--efield);
}
/* Inner container shares its left edge with <main> (the "main body"). */
.header-inner { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
/* Nav and title sit a touch further left than the main body (by the container
   padding); the subtitle stays aligned with the main body below. */
.site-nav, .site-header h1 { margin-left: -1.5rem; }
.site-header h1 { margin-top: .1rem; margin-bottom: .35rem; font-size: 1.9rem; letter-spacing: -.02em; }

.brand { font-weight: 800; }
.brand .db {
  background: var(--efield);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: saturate(1.3) brightness(1.15);
}
.subtitle { margin: 0; color: #b9c4e0; font-size: .98rem; max-width: none; }
.subtitle strong { color: #e7ecf9; }

.site-nav { margin-bottom: 1rem; display: flex; gap: 1.4rem; align-items: center; }
.site-nav a {
  color: #aab6d6; text-decoration: none; font-size: .9rem; font-weight: 600;
  padding-bottom: .2rem; transition: color .15s;
}
.site-nav a:hover { color: #fff; }
.site-nav a.active { color: #fff; border-bottom: 2px solid; border-image: var(--efield) 1; }

/* ---- Layout ---- */
main { max-width: 1200px; margin: 1.6rem auto; padding: 0 1.5rem; }

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.3rem 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow);
}
.panel h2 { margin: 0 0 .8rem; font-size: 1.18rem; letter-spacing: -.01em; }
.hint { margin: -.4rem 0 1rem; color: var(--muted); font-size: .88rem; }

/* Hero lookup panel stands out */
#resolver-panel {
  background: linear-gradient(180deg, #ffffff, #fbfcff);
  border-top: 3px solid transparent;
  border-image: var(--efield) 1;
}

/* ---- About / prose ---- */
/* Full width, matching the Database page panels (no narrow reading column). */
.prose { max-width: none; }
.prose h2 {
  font-size: 1.3rem; margin: 2rem 0 .6rem; padding-left: .7rem;
  border-left: 3px solid; border-image: var(--efield) 1; letter-spacing: -.01em;
}
.prose h2:first-child { margin-top: .3rem; }
.prose h3 { font-size: 1.04rem; margin: 1.3rem 0 .4rem; }
.prose p, .prose li { color: #2a3242; }
.prose a { color: var(--accent); }
.prose code, code.inline {
  background: #eef1f8; padding: .12rem .4rem; border-radius: 5px;
  font-size: .88em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.prose pre {
  background: #0e1530; color: #e6ebf7; padding: .9rem 1.1rem; border-radius: 8px;
  overflow-x: auto; font-size: .84rem; line-height: 1.5;
}
.prose pre code { background: none; padding: 0; color: inherit; }
.lead {
  font-size: 1.04rem; color: #313b50;
  background: #f6f8fe; border: 1px solid var(--border);
  border-radius: 10px; padding: .9rem 1.1rem;
}

/* ---- Figure grid (stats) ---- */
.figure-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.1rem; margin: 1.3rem 0;
}
.figure-grid figure { margin: 0; }
.figure-grid img {
  width: 100%; height: auto; display: block;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
}
.figure-grid figcaption {
  margin-top: .45rem; font-size: .8rem; color: var(--muted);
}

.status-list { list-style: none; padding: 0; }
.status-list li { padding: .45rem 0; border-bottom: 1px solid var(--border); }
.status-list li:last-child { border-bottom: none; }
.tag {
  display: inline-block; min-width: 96px; text-align: center;
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: .14rem .5rem; border-radius: 999px; margin-right: .7rem;
}
.tag.done { background: #e6f6ec; color: var(--ok-dark); }
.tag.wip { background: #fef0d9; color: var(--pending); }
.tag.todo { background: #eef1f8; color: var(--muted); }

.funnel { font-variant-numeric: tabular-nums; border-collapse: collapse; width: 100%; }
.funnel td { padding: .5rem .9rem .5rem 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.funnel tr:last-child td { border-bottom: none; }

.stat-row { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1rem 0; }
.stat {
  flex: 1 1 150px; background: #f6f8fe; border: 1px solid var(--border);
  border-radius: 10px; padding: .8rem .9rem;
}
.stat .n { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.stat .l { font-size: .76rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }

/* ---- Collapsible filter panel ---- */
.filter-details summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: .55rem;
  font-size: 1.18rem; font-weight: 700; letter-spacing: -.01em;
}
.filter-details summary::-webkit-details-marker { display: none; }
.filter-details summary::before {
  content: "\25B8"; color: var(--accent); font-size: .85em;
  transition: transform .15s; line-height: 1;
}
.filter-details[open] summary::before { transform: rotate(90deg); }
.filter-count {
  font-size: .7rem; font-weight: 700; color: #fff; text-transform: uppercase;
  letter-spacing: .03em; background: var(--accent); border-radius: 999px; padding: .12rem .55rem;
}
.filter-details .hint { margin-top: .8rem; }

/* ---- Class (categorical) filter ---- */
.filter-class {
  display: flex; align-items: center; flex-wrap: wrap; gap: .55rem;
  margin: 0 0 1rem;
}
.filter-class .filter-label { margin-bottom: 0; }
.filter-select {
  padding: .42rem .55rem; border: 1px solid var(--border); border-radius: 6px;
  background: #fff; font-size: .88rem; min-width: 16rem; cursor: pointer;
}
.filter-select:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.hint.inline { margin: 0; font-size: .8rem; }

/* ---- Numeric filters ---- */
.filter-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .8rem; margin-bottom: 1rem;
}
.filter-item { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: .55rem .65rem; }
.filter-label { display: block; font-size: .78rem; color: var(--muted); margin-bottom: .35rem; font-weight: 600; }
.filter-label .unit { font-weight: 400; }
.filter-inputs { display: flex; gap: .4rem; }
.filter-num {
  width: 100%; padding: .38rem .45rem; border: 1px solid var(--border);
  border-radius: 6px; font-size: .85rem; font-variant-numeric: tabular-nums;
}
.filter-num:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.btn-reset {
  padding: .48rem 1.1rem; border: 1px solid var(--border); background: #fff;
  border-radius: 8px; cursor: pointer; font-size: .88rem; font-weight: 600; transition: background .15s;
}
.btn-reset:hover { background: var(--bg); }

/* ---- Resolver box ---- */
#resolve-form { display: flex; gap: .6rem; flex-wrap: wrap; }
#pdb-input {
  flex: 0 1 240px; padding: .6rem .8rem; font-size: 1.05rem;
  border: 1px solid var(--border); border-radius: 8px; text-transform: lowercase;
  font-family: ui-monospace, Menlo, monospace;
}
#pdb-input:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
#resolve-form button {
  padding: .6rem 1.4rem; font-size: 1rem; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  border: none; border-radius: 8px; cursor: pointer; transition: filter .15s, transform .05s;
}
#resolve-form button:hover { filter: brightness(1.07); }
#resolve-form button:active { transform: translateY(1px); }

.resolve-result { margin-top: 1.2rem; }
.note {
  background: #fff8e6; border: 1px solid #f1d68a; color: #6b5300;
  padding: .65rem .85rem; border-radius: 8px; margin-bottom: 1rem; font-size: .9rem;
}
.error {
  background: #fdecea; border: 1px solid #f5b5b0; color: #8a1c14;
  padding: .65rem .85rem; border-radius: 8px; font-size: .92rem;
}

/* ---- Result card ---- */
.card-title { margin: 0 0 .2rem; font-size: 1.35rem; }
.card-title .code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }
.card-uniprot { font-size: .8rem; font-weight: 600; vertical-align: middle; margin-left: .2rem; }
.card-sub { margin: 0 0 1rem; color: var(--muted); }
.card-class { margin: -.6rem 0 1rem; font-size: .9rem; }
.card-class-label {
  display: inline-block; font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: var(--accent); background: var(--bg);
  border: 1px solid var(--border); border-radius: 5px; padding: .05rem .4rem; margin-right: .45rem;
}

/* UniProt accession (card + table) */
.uniprot { color: var(--accent); text-decoration: none; font-family: ui-monospace, Menlo, monospace; }
.uniprot:hover { text-decoration: underline; }
.uni-more { font-size: .72rem; color: var(--muted); margin-left: .2rem; cursor: help; }

.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; margin-bottom: 1.1rem; }
.metric { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: .6rem .75rem; transition: transform .1s, box-shadow .1s; }
.metric:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.metric .label { display: block; font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.metric .value { font-size: 1.08rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.metric .unit { font-size: .72rem; color: var(--muted); font-weight: 400; }

.dl-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.btn-dl {
  display: inline-block; padding: .5rem 1rem; border-radius: 8px;
  background: linear-gradient(135deg, var(--ok), var(--ok-dark)); color: #fff;
  text-decoration: none; font-size: .9rem; font-weight: 600; transition: filter .15s;
}
.btn-dl:hover { filter: brightness(1.06); }
.badge-pending {
  display: inline-block; padding: .5rem 1rem; border-radius: 8px;
  background: #fef0d9; color: var(--pending); border: 1px solid #f1d68a; font-size: .9rem; font-weight: 600;
}

/* ---- Table ---- */
table.dataTable td, table.dataTable th { font-size: .86rem; }
table.dataTable th { letter-spacing: .01em; }
table.dataTable td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.dataTable tbody tr:hover { background: #f6f8fe; }
.code-link { color: var(--accent); cursor: pointer; font-family: ui-monospace, Menlo, monospace; text-transform: uppercase; text-decoration: none; font-weight: 600; }
.code-link:hover { text-decoration: underline; }
.dl-mini { color: var(--accent); text-decoration: none; font-weight: 600; }
.dl-mini:hover { text-decoration: underline; }
.dl-mini.disabled { color: var(--muted); cursor: default; font-weight: 400; }

/* ---- Footer ---- */
.site-footer {
  max-width: 1200px; margin: 0 auto 2.5rem; padding: 1.2rem 1.5rem 0;
  color: var(--muted); font-size: .82rem; border-top: 1px solid var(--border);
}