:root{
  --blue:#4254c5; --blue-d:#2f3da3; --ink:#1f2430; --muted:#6b7280;
  --line:#e5e7eb; --bg:#eef0f3; --card:#fff; --up:#e0556b; --down:#3b6fd6;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--bg); font-size:14px; line-height:1.5;
}
.wrap{max-width:1280px; margin:0 auto; padding:0 22px}
a{color:var(--blue)}

/* loader */
#loader{position:fixed; inset:0; background:#fff; z-index:99;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px}
#loader.done{display:none}
#loader-text{color:var(--muted)}
.spinner{width:42px; height:42px; border:4px solid var(--line);
  border-top-color:var(--blue); border-radius:50%; animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* header */
header{background:linear-gradient(100deg,var(--blue-d),var(--blue)); color:#fff;
  padding:22px 0 24px}
header h1{margin:0 0 4px; font-size:24px; font-weight:700}
header p{margin:0; opacity:.85; font-size:13px}

/* per-app dataset switcher (only shown when more than one dataset) */
.ds-switcher{margin-top:14px; display:flex; gap:6px; flex-wrap:wrap}
.ds-tab{font:inherit; font-size:13px; font-weight:600; padding:6px 14px;
  border:1px solid rgba(255,255,255,.45); background:rgba(255,255,255,.08);
  color:#fff; border-radius:999px; cursor:pointer}
.ds-tab:hover{background:rgba(255,255,255,.18)}
.ds-tab.active{background:#fff; color:var(--blue-d); border-color:#fff}

/* tabs */
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--line);
  background:#f4f5f7; padding-top:8px}
.tab{border:0; background:none; padding:11px 16px; font-size:14px; cursor:pointer;
  color:var(--muted); border-bottom:3px solid transparent; font-weight:500}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--blue); border-bottom-color:var(--blue); font-weight:600}

/* layout */
main{padding:20px 0 50px; min-height:60vh}
.tabpane{display:none}
.tabpane.active{display:block}
.card{background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:20px 22px; margin-bottom:18px; box-shadow:0 1px 2px rgba(0,0,0,.04)}
.card h2{margin:0 0 14px; font-size:18px}
.card h3{margin:0 0 8px; font-size:14px; color:var(--ink)}
h3 .g-name{color:var(--blue)}
.muted{color:var(--muted)}
.small{font-size:12px}
footer{padding:24px 0 40px; color:var(--muted); font-size:12px}

/* controls */
.controls{display:flex; flex-wrap:wrap; gap:14px 18px; align-items:flex-end; margin-bottom:14px}
.controls.tight{align-items:center; margin:10px 0}
label{display:flex; flex-direction:column; gap:4px; font-size:12px;
  color:var(--muted); font-weight:600}
label.chk,label.grow{font-weight:600}
label.chk{flex-direction:row; align-items:center; gap:6px}
label.grow{flex:1; min-width:260px}
select,input[type=text],input[type=number],textarea{
  font:inherit; padding:7px 9px; border:1px solid #cbd0d8; border-radius:6px;
  background:#fff; color:var(--ink)}
select,input[type=number]{min-width:90px}
input[type=number]{width:100px}
textarea{resize:vertical; width:100%; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13px}
.btn{font:inherit; font-weight:600; padding:8px 14px; border-radius:6px;
  border:1px solid #cbd0d8; background:#fff; color:var(--ink); cursor:pointer}
.btn:hover{background:#f3f4f6}
.btn.sm{padding:6px 10px; font-size:12px}
.btn.primary{background:var(--blue); border-color:var(--blue); color:#fff}
.btn.primary:hover{background:var(--blue-d)}
.btn.ghost{background:none; border-color:transparent; color:var(--muted)}
.btn:disabled{opacity:.5; cursor:default}

/* plots */
.plot{width:100%; height:420px}
.plot.tall{height:520px}
.plot.xtall{height:640px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.grid2 .plot{height:400px}
@media(max-width:900px){.grid2{grid-template-columns:1fr}}

/* overview */
.facts{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px}
.fact{background:#f3f4f8; border:1px solid var(--line); border-radius:8px;
  padding:10px 14px; min-width:120px}
.fact b{display:block; font-size:20px; color:var(--blue)}
.fact span{font-size:12px; color:var(--muted)}

/* autocomplete */
.ac{position:relative; display:inline-block}
.ac input{min-width:200px}
.ac-list{position:absolute; top:100%; left:0; right:0; background:#fff;
  border:1px solid #cbd0d8; border-top:0; border-radius:0 0 6px 6px; z-index:20;
  max-height:240px; overflow:auto; display:none; box-shadow:0 6px 14px rgba(0,0,0,.1)}
.ac-list.open{display:block}
.ac-item{padding:6px 10px; cursor:pointer; font-size:13px}
.ac-item:hover,.ac-item.active{background:var(--blue); color:#fff}

/* volcano */
.grid-vol{display:grid; grid-template-columns:1fr 380px; gap:18px}
@media(max-width:1000px){.grid-vol{grid-template-columns:1fr}}
.sidepanel h3{margin-bottom:6px}
.tablewrap{max-height:430px; overflow:auto; border:1px solid var(--line); border-radius:8px}
table{width:100%; border-collapse:collapse; font-size:13px}
th,td{padding:7px 10px; text-align:left; border-bottom:1px solid var(--line)}
th{background:#f4f5f7; position:sticky; top:0; font-size:12px}
td:not(:first-child),th:not(:first-child){text-align:right; font-variant-numeric:tabular-nums}
tbody tr:hover{background:#f7f8fa}

/* enrichment */
.libs{border:1px solid var(--line); border-radius:8px; padding:10px 14px; margin:14px 0}
.libs legend{font-size:12px; color:var(--muted); font-weight:600; padding:0 6px}
#en-libs{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
@media(max-width:900px){#en-libs{grid-template-columns:repeat(2,1fr)}}
.libchk{display:flex; flex-direction:row; align-items:center; gap:7px;
  font-size:13px; font-weight:500; color:var(--ink)}
.libchk input{flex:none}
.en-block{margin-bottom:18px}
.en-block h2{font-size:16px}
.errbox{background:#fdecef; border:1px solid #f3b6c0; color:#9a2435;
  padding:10px 14px; border-radius:8px; font-size:13px}