/* ToxiPred - white AI-SaaS theme (used by predict.php, about.php, publication.php).
   The main index.php is self-contained. */

:root{
  --bg:#ffffff; --panel:#fafafa; --card:#ffffff; --card2:#f8f9fb;
  --line:#e7e8eb; --line2:#d4d6dc;
  --ink:#0a0a0b; --soft:#27272a; --mute:#52525b; --dim:#71717a; --faint:#a1a1aa;
  --violet:#7c3aed; --blue:#2563eb; --pink:#db2777; --cyan:#0891b2;
  --red:#dc2626; --green:#10b981; --orange:#ea580c; --amber:#d97706; --purple:#7c3aed;
  --red-bg:#fef2f2; --green-bg:#ecfdf5; --amber-bg:#fffbeb;

  --radius-sm:4px; --radius:8px; --radius-lg:12px;
  --shadow-sm:0 1px 2px rgba(15,15,20,0.04);
  --shadow-md:0 8px 24px -8px rgba(15,15,20,0.10);
  --shadow-lg:0 24px 50px -12px rgba(15,15,20,0.16);
  --ease:cubic-bezier(0.22,0.61,0.36,1);

  --sans:"Inter",-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono","SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; padding:0;
  font-family:var(--sans);
  font-size:14.5px; line-height:1.55;
  color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  background-image:
    radial-gradient(ellipse 60% 40% at 50% -5%, rgba(124,58,237,0.08), transparent 55%),
    radial-gradient(ellipse 50% 40% at 92% 25%, rgba(37,99,235,0.06), transparent 60%),
    radial-gradient(ellipse 45% 30% at 5% 55%, rgba(219,39,119,0.05), transparent 60%);
  background-attachment:fixed;
  min-height:100vh;
}
body::before{
  content:""; position:fixed; inset:0;
  background-image:radial-gradient(circle at 1px 1px, rgba(15,15,20,0.05) 1px, transparent 0);
  background-size:24px 24px;
  pointer-events:none;
  mask-image:radial-gradient(ellipse 70% 50% at 50% 25%, black, transparent 80%);
  z-index:0;
}
a{color:var(--ink); text-decoration:none; transition:color 0.15s var(--ease);}
a:hover{color:var(--violet);}
.mono,code{font-family:var(--mono);}
code{font-size:0.88em; background:var(--panel); padding:1px 6px; border-radius:3px; color:var(--mute); border:1px solid var(--line);}
kbd{font-family:var(--sans); font-size:11px; background:#fff; border:1px solid var(--line2); padding:1px 6px; border-radius:3px; color:var(--mute);}

/* topbar */
.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(20px) saturate(180%);
  background:rgba(255,255,255,0.78);
  border-bottom:1px solid var(--line);
  padding:13px 28px;
  display:flex; justify-content:space-between; align-items:center;
}
.topbar-inner{
  max-width:1320px; margin:0 auto; width:100%;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{display:flex; align-items:center; gap:10px; color:var(--ink); font-size:15px; font-weight:600; letter-spacing:-0.3px;}
.brand:hover{text-decoration:none; color:var(--ink);}
.brand-logo, .brand-mark{
  width:26px; height:26px; flex-shrink:0; border-radius:6px;
  background:#0a0a0b;
  color:#fff; font-weight:800; font-size:11px;
  display:flex; align-items:center; justify-content:center;
}
.brand-text{display:flex; flex-direction:column; line-height:1.15;}
.brand-name{font-size:15px; font-weight:600; color:var(--ink); letter-spacing:-0.3px;}
.brand-tag{font-size:10.5px; color:var(--dim); font-weight:400; letter-spacing:0.4px; font-family:var(--mono);}
.topnav{display:flex; align-items:center; gap:4px; font-size:13.5px;}
.topnav-link, .topnav a{color:var(--mute); padding:6px 12px; border-radius:6px; font-weight:500; transition:all 0.15s var(--ease);}
.topnav-link:hover, .topnav a:hover{color:var(--ink); background:rgba(15,15,20,0.04); text-decoration:none;}
.topnav-link.ext::after{content:" ↗"; font-size:0.85em; opacity:0.5;}
.topnav-version{
  font-family:var(--mono); font-size:10.5px;
  color:var(--mute); background:var(--panel);
  border:1px solid var(--line); padding:2px 8px; border-radius:4px;
  margin-left:8px;
}
.topnav-gh{display:inline-flex; align-items:center; gap:6px;}
.topnav-gh svg{opacity:0.85;}
.topnav-gh:hover svg{opacity:1;}
.gh-btn{background:var(--ink)!important; color:#fff!important; padding:6px 14px!important; border-radius:6px; font-weight:600;}
.gh-btn:hover{background:var(--soft)!important; color:#fff!important;}

/* badges */
.badge{
  display:inline-flex; align-items:center;
  font-size:10.5px; font-weight:600;
  padding:3px 8px; border-radius:4px;
  text-transform:uppercase; letter-spacing:0.5px;
  white-space:nowrap; font-family:var(--mono);
}
.badge-atlas{background:var(--green-bg); color:#047857; border:1px solid #a7f3d0;}
.badge-nn   {background:var(--amber-bg); color:#b45309; border:1px solid #fde68a;}
.badge-err  {background:var(--red-bg);   color:#b91c1c; border:1px solid #fecaca;}
.fam-chip{
  display:inline-flex; align-items:center; color:#fff;
  font-size:11px; font-weight:600; padding:3px 10px; border-radius:100px;
  white-space:nowrap; box-shadow:0 1px 3px rgba(15,15,20,0.20);
}

/* meta pills */
.meta-pill{
  display:inline-block; background:#fff; border:1px solid var(--line); color:var(--mute);
  font-size:12px; padding:4px 12px; border-radius:5px;
}
.meta-pill strong{color:var(--ink); font-weight:600;}

/* section titles */
.section-title{
  font-family:var(--mono); font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:1.6px;
  color:var(--mute);
  margin:36px 0 18px; padding-bottom:10px; border-bottom:1px solid var(--line);
}

/* generic card */
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  margin-bottom:22px;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.card-header{
  padding:16px 22px; border-bottom:1px solid var(--line);
  background:#fff;
  display:flex; justify-content:space-between; align-items:center;
  gap:16px; flex-wrap:wrap;
}
.card-header h3{margin:0; font-size:15px; font-weight:600; color:var(--ink); letter-spacing:-0.2px;}
.card-sub{margin:3px 0 0; font-size:12.5px; color:var(--mute);}
.legend-inline{display:inline-flex; align-items:center; gap:8px; font-size:11px; color:var(--mute);}
.legend-grad{
  width:100px; height:10px;
  background:linear-gradient(90deg,#2563eb 0%,#ffffff 50%,#dc2626 100%);
  border-radius:2px; border:1px solid var(--line);
}

/* mech compare table */
#heatmap{margin:14px 14px 18px;}
.mech-table-wrap{overflow-x:auto;}
.mech-table{width:100%; border-collapse:collapse; font-size:12.5px;}
.mech-table th, .mech-table td{
  padding:10px 16px; text-align:left;
  border-bottom:1px solid var(--line);
  vertical-align:middle; white-space:nowrap;
}
.mech-table th{
  background:var(--panel); color:var(--mute);
  font-weight:600; font-size:11px;
  text-transform:uppercase; letter-spacing:1px;
  border-bottom:1px solid var(--line2);
  position:sticky; top:0;
}
.mech-table tbody tr{transition:background 0.15s var(--ease);}
.mech-table tbody tr:hover td{background:var(--panel);}
.mech-table .th-rank{width:32px; color:var(--dim); font-weight:700; font-family:var(--mono);}
.mech-table .th-num{text-align:right; font-variant-numeric:tabular-nums; font-family:var(--mono); color:var(--ink);}
.mech-table .td-drug strong{color:var(--ink); font-weight:600;}
.mech-table .muted{color:var(--faint); font-style:italic;}
.mech-table .mute-col{color:var(--mute);}

/* drug grid */
.drug-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(440px, 1fr));
  gap:18px;
}
.drug-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:22px;
  transition:all 0.2s var(--ease);
  box-shadow:var(--shadow-sm);
}
.drug-card:hover{border-color:var(--line2); box-shadow:var(--shadow-md); transform:translateY(-1px);}
.drug-card.is-error{border-color:#fecaca; background:var(--red-bg);}
.drug-card-head{margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--line);}
.drug-card-title{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px;}
.drug-card-title h3, .drug-card-title h4{
  margin:0; font-size:19px; font-weight:600; letter-spacing:-0.3px; color:var(--ink);
}
.drug-smiles{display:flex; align-items:baseline; gap:8px; font-size:12px; color:var(--dim);}
.smi-label{font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; color:var(--dim); font-family:var(--mono);}
.drug-smiles code{
  background:transparent; border:none; padding:0;
  color:var(--mute); font-size:11.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;
}

/* drug-card 3D + stats row */
.dc-row{display:grid; grid-template-columns:1fr 1.2fr; gap:14px; margin-bottom:14px;}
.dc-3d{
  background:radial-gradient(ellipse at center, rgba(124,58,237,0.04), transparent 70%);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:8px;
  position:relative; height:180px;
  overflow:hidden;
}
.dc-3d::before{
  content:"3D"; position:absolute; top:8px; left:10px;
  font-family:var(--mono); font-size:9.5px; font-weight:600;
  color:var(--dim); letter-spacing:1.5px; z-index:2; pointer-events:none;
}
.dc-3d-canvas{width:100%; height:100%; position:relative; cursor:grab;}
.dc-3d-canvas:active{cursor:grabbing;}
.dc-3d-canvas canvas{border-radius:6px;}
.dc-3d-loading{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--dim); font-family:var(--mono); font-size:10px; letter-spacing:0.8px;
}

/* DSS grid */
.dss-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:6px;}
.dss-stat{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:10px 12px;
}
.dss-label{
  display:block; font-size:9.5px; font-weight:600;
  color:var(--dim); text-transform:uppercase; letter-spacing:0.5px;
  font-family:var(--mono);
}
.dss-value{
  display:block; margin-top:5px;
  font-family:var(--mono); font-size:22px; font-weight:700;
  letter-spacing:-0.4px; line-height:1;
}
.dss-bar{margin-top:6px; height:3px; background:#fff; border:1px solid var(--line); border-radius:2px; overflow:hidden;}
.dss-bar-fill{height:100%; border-radius:2px; transition:width 0.4s var(--ease);}

/* sub-panels */
.panel{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:13px 15px; margin-top:12px;
}
.panel-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
.panel-eyebrow{
  font-family:var(--mono); font-size:10px; font-weight:600;
  color:var(--dim); text-transform:uppercase; letter-spacing:1.4px;
}
.boxplot-wrap{height:180px; margin:4px -4px 0;}

/* top tissues mini-bars */
.top-tissues{list-style:none; margin:0; padding:0;}
.top-tissues li{
  display:grid; grid-template-columns:140px 1fr 50px;
  gap:10px; align-items:center;
  padding:5px 0; border-bottom:1px dashed var(--line);
  font-size:12px;
}
.top-tissues li:last-child{border-bottom:none;}
.tt-name{color:var(--mute);}
.tt-bar{display:block; height:6px; background:#fff; border:1px solid var(--line); border-radius:4px; overflow:hidden;}
.tt-bar-fill{display:block; height:100%; border-radius:4px; transition:width 0.4s var(--ease);}
.tt-val{text-align:right; font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; font-family:var(--mono); color:var(--ink);}

.mech-bars{min-height:110px; margin:4px -4px 0;}
.mech-gated{
  display:flex; align-items:center; justify-content:center;
  margin-top:12px; padding:12px;
  background:var(--panel); color:var(--dim);
  border-radius:var(--radius); font-size:12px; font-style:italic;
  text-align:center; border:1px dashed var(--line2);
}
.drug-error{
  margin-top:4px; padding:14px 16px;
  background:var(--red-bg); color:#b91c1c;
  border-radius:var(--radius); font-size:13px;
  border:1px solid #fecaca;
}
.drug-error strong{display:block; margin-bottom:4px; font-weight:600;}

/* results page header */
.results{padding:36px 28px 60px; min-height:calc(100vh - 200px); position:relative; z-index:1;}
.results-inner{max-width:1320px; margin:0 auto;}
.results-header{
  display:flex; align-items:flex-start; justify-content:space-between;
  margin-bottom:28px; flex-wrap:wrap; gap:16px;
}
.results-title-block h1{
  margin:0; font-size:28px; font-weight:700;
  letter-spacing:-0.8px;
  background:linear-gradient(180deg,#0a0a0b 0%,#52525b 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.back-link{
  display:inline-flex; align-items:center; gap:5px;
  font-size:12.5px; color:var(--mute); margin-bottom:8px; font-weight:500;
}
.back-link:hover{color:var(--ink); text-decoration:none;}
.results-meta{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}

/* empty / error pages */
.empty{
  padding:80px 28px;
  display:flex; justify-content:center; align-items:flex-start;
  min-height:calc(100vh - 200px); position:relative; z-index:1;
}
.empty-card{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:32px 40px;
  max-width:720px; width:100%; box-shadow:var(--shadow-md);
}
.empty-card h2{margin-top:0; color:var(--ink);}
.empty-card.error h2{color:var(--red);}
.empty-card pre{background:var(--panel); padding:14px; border-radius:5px; font-size:12px; overflow-x:auto; max-height:240px; color:var(--mute);}
.empty-card details summary{cursor:pointer; color:var(--violet); user-select:none;}

/* buttons */
.btn{
  border:none; cursor:pointer;
  font-family:inherit; font-size:13.5px; font-weight:600;
  padding:9px 18px; border-radius:7px;
  display:inline-flex; align-items:center; gap:6px;
  transition:all 0.15s var(--ease); text-decoration:none;
}
.btn:hover{text-decoration:none;}
.btn-primary{background:var(--ink); color:#fff;}
.btn-primary:hover{background:var(--soft);}
.btn-primary:disabled{opacity:0.55; cursor:progress;}
.btn-ghost{background:transparent; border:1px solid var(--line2); color:var(--mute);}
.btn-ghost:hover{background:var(--panel); color:var(--ink);}
.btn-small{padding:6px 12px; font-size:12.5px;}

/* about page */
.about-block{margin-bottom:32px;}
.about-block h3{
  font-family:var(--mono);
  font-size:11px; font-weight:600;
  color:var(--mute); text-transform:uppercase;
  letter-spacing:1.4px; margin:0 0 8px;
}
.about-block p{color:var(--mute); font-size:14.5px; line-height:1.7;}
.about-block strong, .about-block b{color:var(--ink); font-weight:600;}
.muted-block{color:var(--dim); font-size:14px; font-style:italic; padding:12px 0; line-height:1.65;}
.hero-band{padding:60px 28px 40px; position:relative; z-index:1;}
.hero-inner{max-width:1180px; margin:0 auto;}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:500; color:var(--mute);
  background:#fff; border:1px solid var(--line);
  padding:5px 12px; border-radius:100px; margin-bottom:20px;
  font-family:var(--mono); letter-spacing:0.8px; text-transform:uppercase;
  box-shadow:var(--shadow-sm);
}
.eyebrow-dot{
  width:6px; height:6px; background:#10b981; border-radius:50%;
  box-shadow:0 0 0 0 rgba(16,185,129,0.6); animation:eye-pulse 2s infinite;
}
@keyframes eye-pulse{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,0.6);}50%{box-shadow:0 0 0 6px rgba(16,185,129,0);}}
.hero-title{
  font-size:38px; font-weight:700; letter-spacing:-1.2px;
  margin:0 0 16px; max-width:660px;
  background:linear-gradient(180deg,#0a0a0b 0%,#52525b 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  line-height:1.1;
}
.hero-lede{font-size:16px; color:var(--mute); max-width:680px; margin:0 0 24px; line-height:1.65;}
.hero-lede strong, .hero-lede b{color:var(--ink); font-weight:500;}
.bench-band{padding:30px 28px 80px; position:relative; z-index:1;}
.bench-inner{max-width:1180px; margin:0 auto;}

/* footer */
.footer{
  border-top:1px solid var(--line);
  padding:32px 28px;
  position:relative; z-index:1;
}
.footer-inner{
  max-width:1320px; margin:0 auto;
  display:grid; grid-template-columns:2fr 1fr 1fr;
  gap:32px;
}
.footer-col{display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:var(--mute);}
.footer-brand{font-weight:700; color:var(--ink); font-size:14px;}
.footer-sub{font-size:12px; color:var(--dim); line-height:1.55; max-width:440px;}
.footer-label{
  font-size:10px; font-weight:700; color:var(--dim);
  text-transform:uppercase; letter-spacing:1.2px; margin-bottom:2px; font-family:var(--mono);
}
.footer-mute{color:var(--dim); font-size:11.5px;}
.footer-gh{
  display:inline-flex; align-items:center; gap:6px; margin-top:4px;
  font-family:var(--mono); font-size:11px; color:var(--mute);
}
.footer-gh:hover{color:var(--ink);}

/* loading overlay */
.loading-overlay[hidden]{display:none!important;}
.loading-overlay{
  position:fixed; inset:0;
  background:rgba(255,255,255,0.85); backdrop-filter:blur(10px);
  z-index:1000;
  display:flex; align-items:center; justify-content:center;
}
.loading-card{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:32px 40px;
  box-shadow:var(--shadow-lg);
  text-align:center; max-width:440px;
}
.loading-spinner{
  width:32px; height:32px; margin:0 auto 16px;
  border:2.5px solid var(--line); border-top-color:var(--violet);
  border-radius:50%; animation:spin 0.8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
.loading-text{font-size:15px; font-weight:600; color:var(--ink); margin-bottom:4px;}
.loading-sub{font-size:12.5px; color:var(--mute);}

/* responsive */
@media (max-width:980px){
  .drug-grid{grid-template-columns:1fr;}
  .footer-inner{grid-template-columns:1fr;}
  .dc-row{grid-template-columns:1fr;}
  .dc-3d{height:200px;}
  .hero-title{font-size:30px;}
  .topbar{padding:12px 16px;}
  .results{padding:24px 16px;}
}