:root{
  --bg:#0f1420;
  --panel:#171e2e;
  --panel-2:#1b2336;
  --line:#26304a;
  --txt:#e6ebf5;
  --mut:#8a97b3;
  --accent:#5b8cff;
  --accent-2:#7fb0ff;
  --visited:#b58cff;
  --chip:#22304d;
  --chip-ds:#2a3b1f;
  --danger-bg:#3a2420;
  --danger-fg:#ffb09a;
  --disease-bg:#3a2740;
  --disease-fg:#ffc6e8;
  --n-bg:#1f3a36;
  --n-fg:#8ef0d4;
  --shadow:0 16px 40px rgba(0,0,0,0.28);
}

*{box-sizing:border-box}

html,body{
  margin:0;
  min-height:100%;
  background:
    radial-gradient(circle at top left, rgba(91,140,255,0.16), transparent 30%),
    radial-gradient(circle at top right, rgba(127,176,255,0.1), transparent 24%),
    linear-gradient(180deg, #0b1019 0%, #101827 52%, #0d1522 100%);
  color:var(--txt);
  font:14px/1.45 -apple-system,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}

body{
  padding:18px;
}

.page-shell{
  width:min(100%, 1800px);
  margin:0 auto;
}

.hero,
.summary,
.control-panel,
.table-section,
.footer{
  background:rgba(23,30,46,0.92);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}

.hero{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:18px;
  padding:18px 22px;
  border-radius:16px 16px 0 0;
}

.hero h1{
  margin:0;
  font-size:24px;
  line-height:1.2;
}

.hero .sub{
  color:var(--mut);
  font-weight:400;
  font-size:13px;
  margin-left:8px;
}

.lead{
  margin:10px 0 0;
  max-width:780px;
  color:#cbd6eb;
}

.hero-meta{
  min-width:260px;
  text-align:right;
}

.status-label{
  color:var(--mut);
  font-size:12px;
}

.status-main{
  margin-top:4px;
  font-size:18px;
  font-weight:700;
}

.status-sub{
  margin-top:4px;
  color:var(--mut);
  font-size:12px;
}

.summary{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
  margin-top:0;
  padding:12px 22px;
  border-top:none;
  border-radius:0;
}

.summary-card{
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 12px;
}

.summary-k{
  display:block;
  color:var(--mut);
  font-size:12px;
}

.summary-v{
  display:block;
  margin-top:6px;
  font-size:24px;
  line-height:1;
}

.control-panel{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:0;
  padding:14px 22px;
  border-top:none;
  border-radius:0;
}

.search-block label,
.filter-grid span{
  display:block;
  margin-bottom:6px;
  color:var(--mut);
  font-size:12px;
}

.search-block input,
.filter-grid select,
.ghost,
.chip-btn,
.facet-chip{
  background:#0f1420;
  color:var(--txt);
  border:1px solid var(--line);
  border-radius:8px;
  font:inherit;
}

.search-block input,
.filter-grid select{
  width:100%;
  padding:8px 10px;
}

.search-block input:focus,
.filter-grid select:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(91,140,255,0.14);
}

.filter-grid{
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:10px;
}

.quick-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.ghost,
.chip-btn{
  padding:8px 10px;
  cursor:pointer;
}

.ghost:hover,
.chip-btn:hover,
.facet-chip:hover{
  border-color:var(--accent);
}

.chip-btn.active{
  background:#22304d;
  color:#d7e5ff;
  border-color:var(--accent);
}

.facet-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.facet{
  background:#131b2a;
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px;
}

.facet-title{
  margin-bottom:8px;
  font-weight:600;
}

.facet-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.facet-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  cursor:pointer;
}

.facet-chip strong{
  min-width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:var(--chip);
  color:#cfe0ff;
  font-size:12px;
}

.table-section{
  margin-top:0;
  padding:0;
  border-top:none;
  border-radius:0 0 16px 16px;
  overflow:hidden;
}

.table-headline{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  padding:14px 22px 10px;
  background:var(--panel);
  border-bottom:1px solid var(--line);
}

.table-headline h2{
  margin:0;
  font-size:18px;
}

.table-headline p{
  margin:6px 0 0;
  color:var(--mut);
}

.type-legend{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:10px 14px;
  color:#9aa9c7;
  font-size:13px;
  font-weight:600;
}

.legend-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}

.legend-item svg{
  width:1.05em;
  height:1.05em;
  flex:none;
}

.legend-item.ty-sc{ color:var(--n-fg); }
.legend-item.ty-sn{ color:#7ee7d1; }
.legend-item.ty-bulk{ color:var(--accent-2); }
.legend-item.ty-sp{ color:#ffc6e8; }
.legend-item.ty-st{ color:#f59ee4; }
.legend-item.ty-pro{ color:#ffd591; }
.legend-item.ty-lipid{ color:#ffc069; }
.legend-item.ty-atac{ color:#ffb09a; }
.legend-item.ty-meth{ color:#c9a8ff; }
.legend-item.ty-dna{ color:#9fd3ff; }
.legend-item.ty-crispr{ color:#f87171; }
.legend-item.ty-clin{ color:#c4e66b; }
.legend-item.ty-unk{ color:#8fa0bf; }

.legend-divider{
  width:1px;
  height:18px;
  background:var(--line);
  margin:0 2px;
}

.verify-legend{
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}

.verify-legend::before{
  content:"";
  width:18px;
  height:5px;
  border-radius:999px;
  box-shadow:0 0 12px currentColor;
}

.verify-legend.verified{ color:#55e0b3; }
.verify-legend.pending{ color:#ffcf6b; }

.table-wrap{
  overflow:auto;
  max-height:calc(100vh - 280px);
}

table{
  border-collapse:collapse;
  width:100%;
  min-width:1880px;
}

thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:var(--panel-2);
  text-align:left;
  padding:10px 12px;
  border-bottom:2px solid var(--line);
  cursor:pointer;
  white-space:nowrap;
  font-weight:600;
  user-select:none;
}

thead th:hover{
  color:var(--accent);
}

tbody td{
  padding:9px 12px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}

tbody tr.verified-fulltext td:first-child,
tbody tr.pending-fulltext td:first-child{
  position:relative;
  padding-left:18px;
}

tbody tr.verified-fulltext td:first-child::before,
tbody tr.pending-fulltext td:first-child::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:5px;
  border-radius:0 5px 5px 0;
}

tbody tr.verified-fulltext td:first-child::before{
  background:#55e0b3;
  box-shadow:0 0 14px rgba(85,224,179,.45);
}

tbody tr.pending-fulltext td:first-child::before{
  background:#ffcf6b;
  box-shadow:0 0 14px rgba(255,207,107,.38);
}

tbody tr.pending-fulltext td{
  background:linear-gradient(90deg, rgba(255,207,107,.035), transparent 26%);
}

tbody tr:hover{
  background:#1a2233;
}

td.pmid a{
  color:var(--accent);
  text-decoration:none;
}

td.pmid a:visited,
a:visited{
  color:var(--visited);
}

td.pmid a:hover{
  text-decoration:underline;
}

.jrnl{
  min-width:160px;
  color:#b9c3d8;
}

.tit{
  min-width:210px;
  max-width:280px;
}

.tit.zh{
  color:#d6deef;
}

.keyinfo{
  min-width:280px;
  max-width:360px;
  color:#d6deef;
}

.one{
  min-width:320px;
  max-width:420px;
}

.chip{
  display:inline-block;
  background:var(--chip);
  color:#cfe0ff;
  border-radius:6px;
  padding:1px 7px;
  margin:1px 3px 1px 0;
  font-size:12px;
  white-space:nowrap;
}

.chip.ds{
  background:var(--chip-ds);
  color:#cfe6b8;
}

.label{
  display:inline-block;
  border-radius:6px;
  padding:2px 8px;
  font-size:12px;
  font-weight:600;
  background:#2d3a5e;
  color:#bcd0ff;
}

.onewrap{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.onewrap .txt{
  color:#d6deef;
}

.hl-dis,
.hl-n,
.status{
  align-self:flex-start;
  border-radius:6px;
  padding:1px 8px;
  font-weight:600;
  font-size:12px;
  border:1px solid transparent;
}

.hl-dis{
  background:var(--disease-bg);
  color:var(--disease-fg);
  border-color:#7a3d63;
}

.hl-n{
  background:var(--n-bg);
  color:var(--n-fg);
  border-color:#2f6a5e;
  white-space:nowrap;
}

.hl-n.na,
.status.warn{
  background:var(--danger-bg);
  color:var(--danger-fg);
  border-color:#7a4034;
}

.status{
  background:#27344f;
  color:#dbe6fb;
  border-color:#33415f;
}

.mut{
  color:var(--mut);
}

.sm{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:150px;
}

.sm-row{
  display:flex;
  align-items:center;
  gap:6px;
}

.sm-tag{
  flex:none;
  border-radius:5px;
  padding:1px 6px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.02em;
}

.sm-tag.self{
  background:var(--n-bg);
  color:var(--n-fg);
  border:1px solid #2f6a5e;
}

.sm-tag.pub{
  background:#1c2a47;
  color:var(--accent-2);
  border:1px solid #33456e;
}

.sm-v{
  display:flex;
  align-items:baseline;
  gap:5px;
  flex-wrap:wrap;
}

.sm-num{
  font-size:17px;
  line-height:1;
  font-weight:700;
}

.sm-num.self{ color:var(--n-fg); }
.sm-num.pub{ color:var(--accent-2); }

.sm-u{
  font-size:11px;
  color:var(--mut);
}

.sm-cell{
  font-size:11px;
  color:#9fb0d2;
}

.sm-dash{
  color:var(--mut);
  font-size:12px;
}

.sm-pend{
  background:var(--danger-bg);
  color:var(--danger-fg);
  border:1px solid #7a4034;
  border-radius:5px;
  padding:0 6px;
  font-size:11px;
  font-weight:600;
  cursor:help;
}

.sm-done{
  background:var(--n-bg);
  color:var(--n-fg);
  border:1px solid #2f6a5e;
  border-radius:5px;
  padding:0 6px;
  font-size:11px;
  font-weight:600;
  cursor:help;
}

.sm-dswrap{
  display:flex;
  flex-wrap:wrap;
  gap:3px;
  margin-top:2px;
  padding-top:4px;
  border-top:1px dashed var(--line);
}

.sm-ds{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  max-width:100%;
  background:#16203a;
  border:1px solid #2a3a5e;
  color:#aebfe0;
  border-radius:5px;
  padding:2px 5px;
  font-size:11px;
}

.sm-ds-main{
  display:inline-flex;
  align-items:center;
  gap:4px;
  white-space:nowrap;
}

.sm-grps{
  display:flex;
  flex-wrap:wrap;
  gap:2px;
  max-width:100%;
}

.sm-grp{
  display:inline-flex;
  align-items:center;
  gap:2px;
  border-radius:4px;
  background:#0f172a;
  border:1px solid #263755;
  color:#91a7c8;
  padding:0 4px;
  line-height:1.45;
}

.sm-grp b{
  color:#d8e6ff;
  font-weight:700;
}

.ty-ic{
  display:inline-flex;
  align-items:center;
  font-size:14px;
  line-height:1;
  flex:none;
  cursor:help;
}

.sm-v .ty-ic{ margin-right:1px; }

.ty-ic.ty-sc{ color:var(--n-fg); }
.ty-ic.ty-sn{ color:#7ee7d1; }
.ty-ic.ty-bulk{ color:var(--accent-2); }
.ty-ic.ty-sp{ color:#ffc6e8; }
.ty-ic.ty-st{ color:#f59ee4; }
.ty-ic.ty-pro{ color:#ffd591; }
.ty-ic.ty-lipid{ color:#ffc069; }
.ty-ic.ty-atac{ color:#ffb09a; }
.ty-ic.ty-meth{ color:#c9a8ff; }
.ty-ic.ty-dna{ color:#9fd3ff; }
.ty-ic.ty-crispr{ color:#f87171; }
.ty-ic.ty-clin{ color:#c4e66b; }
.ty-ic.ty-other{ color:#a7b4cf; }
.ty-ic.ty-unk{ color:#6b7894; }

.sm-dsn{
  background:#22304d;
  color:#cfe0ff;
  border-radius:4px;
  padding:0 4px;
  font-weight:600;
}

.sm-dst{
  color:var(--mut);
  font-style:normal;
}

.sm-raw{
  color:#b9c4dc;
  font-size:12px;
}

.sm-note{
  color:#7c89a6;
  font-size:11.5px;
  font-style:italic;
  cursor:help;
  border-bottom:1px dotted #3a4663;
}

.footer{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-top:12px;
  padding:12px 22px;
  border-radius:12px;
  color:var(--mut);
  font-size:12px;
}

.empty{
  padding:40px 20px;
  text-align:center;
  color:var(--mut);
}

code{
  background:#0c1018;
  padding:1px 5px;
  border-radius:4px;
}

@media (max-width: 1100px){
  .hero{
    flex-direction:column;
    align-items:flex-start;
  }

  .hero-meta{
    text-align:left;
    min-width:0;
  }

  .summary{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .filter-grid,
  .facet-row{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px){
  body{
    padding:8px;
  }

  .hero,
  .summary,
  .control-panel,
  .table-headline,
  .footer{
    padding-left:14px;
    padding-right:14px;
  }

  .summary,
  .filter-grid,
  .facet-row{
    grid-template-columns:1fr;
  }

  .table-headline{
    align-items:flex-start;
    flex-direction:column;
  }

  .type-legend{
    justify-content:flex-start;
  }

  .hero h1{
    font-size:20px;
  }

  .table-wrap{
    max-height:none;
  }
}