:root { --forest:#143a2a; --leaf:#2f7456; --leaf-soft:#e5efe5; --latex:#fffaf0; --gold:#d2a13c; --amber:#b56f3b; --teal:#2f7180; --ink:#14211a; --muted:#526157; --line:#d5dfd2; --panel:#fffefd; --bg:#f6f9f1; --danger:#8c3d2d; --shadow:0 16px 38px rgba(31,57,42,.10); }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { margin:0; background:var(--bg); color:var(--ink); font-family:Arial,"Microsoft YaHei","PingFang SC",sans-serif; line-height:1.58; }
    a { color:var(--forest); text-decoration:none; font-weight:800; }
    a:hover { color:var(--amber); }
    header { position:sticky; top:0; z-index:30; background:rgba(255,254,249,.96); border-bottom:1px solid rgba(213,223,210,.92); backdrop-filter:blur(14px); }
    .nav { max-width:1220px; min-height:66px; margin:0 auto; padding:0 22px; display:flex; align-items:center; justify-content:space-between; gap:18px; }
    .brand { display:inline-flex; flex-direction:column; gap:1px; color:var(--forest); letter-spacing:0; line-height:1.05; }
    .brand strong { font-size:22px; font-weight:900; }
    .brand span { font-size:11px; color:var(--muted); font-weight:800; }
    nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; font-size:14px; }
    nav a, .lang-switch a { padding:8px 10px; border-radius:7px; color:#244234; font-weight:850; }
    nav a:hover, .lang-switch a:hover { background:var(--leaf-soft); color:var(--forest); }
    .nav-tools { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; min-width:0; }
    nav { min-width:0; }
    .nav-primary, .nav-secondary { white-space:nowrap; }
    nav a { white-space:nowrap; }
    .lang-switch { display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#f9fbf5; }
    .lang-switch a { border-radius:0; font-size:12px; padding:7px 9px; }
    .lang-switch a.active { background:var(--forest); color:white; }
    main { max-width:1220px; margin:0 auto; padding:22px 22px 48px; }
    .hero { min-height:420px; margin:0 -22px 22px; padding:58px 22px 42px; display:flex; align-items:center; background-image:linear-gradient(90deg,rgba(12,40,27,.92),rgba(25,74,56,.72) 42%,rgba(255,255,255,.05) 100%),var(--rubber-hero-image); background-size:cover; background-position:center center; border-bottom:1px solid rgba(47,116,86,.18); }
    .hero-inner { width:min(1180px,100%); margin:0 auto; color:white; }
    .eyebrow { display:inline-flex; gap:8px; align-items:center; padding:6px 10px; border:1px solid rgba(255,255,255,.35); border-radius:999px; background:rgba(255,255,255,.12); font-size:12px; font-weight:900; color:#fff5d6; }
    .hero h1 { max-width:760px; margin:18px 0 10px; font-size:clamp(36px,5.2vw,68px); line-height:1.02; letter-spacing:0; }
    .hero p { max-width:760px; margin:0 0 22px; font-size:17px; color:rgba(255,255,255,.9); }
    .hero-search { width:min(760px,100%); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:8px; border:1px solid rgba(255,255,255,.32); border-radius:8px; background:rgba(255,255,255,.16); }
    .hero-search input { background:rgba(255,255,255,.96); }
    .hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
    .page-intro { display:grid; gap:8px; margin:4px 0 18px; padding-bottom:14px; border-bottom:1px solid var(--line); }
    .page-intro h1 { margin:0; font-size:34px; line-height:1.18; color:var(--forest); letter-spacing:0; }
    .page-intro p { margin:0; max-width:920px; color:var(--muted); }
    .panel { margin-top:16px; padding:18px; background:var(--panel); border:1px solid var(--line); border-radius:8px; box-shadow:0 8px 24px rgba(25,58,40,.045); }
    .panel h2 { margin:0 0 12px; font-size:21px; color:var(--forest); letter-spacing:0; }
    .panel h3 { margin:14px 0 8px; font-size:16px; color:#263d30; }
    .grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
    .grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .stat,.module-card { min-height:116px; padding:16px; border:1px solid var(--line); border-radius:8px; background:var(--panel); box-shadow:0 8px 24px rgba(25,58,40,.045); }
    .stat strong { display:block; font-size:31px; line-height:1; color:var(--forest); }
    .stat span { display:block; margin-top:8px; color:var(--muted); font-size:13px; font-weight:800; }
    .module-card { display:flex; flex-direction:column; gap:12px; justify-content:space-between; min-height:176px; }
    .module-card h3 { margin:0; font-size:19px; color:var(--forest); letter-spacing:0; }
    .module-card p { margin:0; color:var(--muted); font-size:14px; line-height:1.55; }
    .module-card .card-foot { display:flex; justify-content:flex-end; align-items:center; gap:10px; margin-top:auto; }
    .module-card .button.module-open { min-width:120px; min-height:50px; padding:12px 24px; font-size:17px; border-radius:8px; }
    .toolbar,form.toolbar { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:end; }
    .toolbar.three { grid-template-columns:minmax(0,1fr) 260px auto; }
    label { display:grid; gap:6px; color:#30483a; font-weight:850; }
    input,select,textarea { width:100%; border:1px solid #c7d3c3; border-radius:7px; padding:10px 11px; color:var(--ink); background:white; font:inherit; outline:none; }
    input:focus,select:focus,textarea:focus { border-color:var(--leaf); box-shadow:0 0 0 3px rgba(47,116,86,.14); }
    button,.button { display:inline-flex; min-height:40px; align-items:center; justify-content:center; border:0; border-radius:7px; background:var(--leaf); color:white; padding:10px 14px; font-weight:900; cursor:pointer; white-space:nowrap; }
    .button.secondary { background:#eef4e9; color:var(--forest); border:1px solid #cbd9c6; }
    button:hover,.button:hover { background:var(--forest); color:white; }
    .button.secondary:hover { background:var(--leaf-soft); color:var(--forest); }
    .table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:8px; background:white; }
    table { width:100%; border-collapse:collapse; min-width:680px; }
    th { background:#e8f0e2; color:#20382a; text-align:left; font-size:13px; letter-spacing:0; }
    th,td { padding:10px 11px; border-bottom:1px solid var(--line); vertical-align:top; }
    tr:nth-child(even) td { background:#fbfcf7; }
    code { background:#edf4e8; color:#173d2c; padding:2px 5px; border-radius:5px; font-weight:850; }
    .small { font-size:13px; color:var(--muted); line-height:1.55; }
    .pill,.status { display:inline-flex; align-items:center; width:fit-content; border:1px solid #c9d8c2; background:#eef5ea; border-radius:999px; padding:4px 9px; font-size:12px; font-weight:900; color:var(--forest); white-space:nowrap; }
    .status.live { border-color:#bad0bf; background:#e6f2e8; color:#225b3d; }
    .status.meta { border-color:#d7c899; background:#fbf2d7; color:#71521c; }
    .status.build { border-color:#d8c1b6; background:#f8ebe4; color:var(--danger); }
    .notice { padding:12px 14px; border-left:4px solid var(--gold); background:#fff8e4; border-radius:7px; color:#594526; }
    .split { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr); gap:16px; align-items:start; }
    .quick-links { display:flex; flex-wrap:wrap; gap:9px; }
    /* codex-id-clickfill-css */
    .examples { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:10px 0 12px; }
    .examples span { color:var(--muted); font-weight:700; }
    .id-versions { display:flex; flex-direction:column; gap:10px; }
    .id-version-row { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; }
    .id-version-label { min-width:110px; font-weight:700; color:var(--text); }
    .id-version-chips { display:flex; flex-wrap:wrap; gap:8px; }
    .id-chip, .examples .chip { display:inline-flex; align-items:center; min-height:32px; padding:6px 10px; border:1px solid var(--line); border-radius:7px; background:#fff; color:var(--green); text-decoration:none; font-weight:800; cursor:pointer; }
    .id-chip:hover, .examples .chip:hover, .hero-actions a[data-fill-target]:hover { border-color:var(--green); background:#f4fbf7; }
    footer { max-width:1220px; margin:0 auto; padding:0 22px 26px; color:#68766d; font-size:12px; }
    @media (max-width:920px) { .nav { align-items:center; flex-direction:row; flex-wrap:nowrap; padding:10px 14px; gap:8px; } .brand span { display:none; } .nav-tools { flex:1 1 auto; min-width:0; justify-content:flex-end; gap:6px; flex-wrap:nowrap; } nav { flex:1 1 auto; min-width:0; justify-content:flex-end; flex-wrap:nowrap; gap:4px; overflow:hidden; } nav a.nav-secondary { display:none; } nav a { padding:7px 8px; } .nav-more summary { padding:7px 10px; } .lang-switch a { padding:6px 8px; } main { padding:18px 16px 38px; } .hero { margin:-18px -16px 20px; min-height:460px; padding:44px 16px 34px; } .hero-search,.toolbar,form.toolbar,.toolbar.three { grid-template-columns:1fr; } .grid,.grid.three,.split { grid-template-columns:1fr; } .page-intro h1 { font-size:28px; } table { min-width:760px; } }
  
    .mini-bars { display:grid; gap:8px; margin:16px 0 20px; }
    .bar-row { display:grid; grid-template-columns:minmax(160px,240px) 1fr minmax(54px,auto); align-items:center; gap:12px; }
    .bar-label { font-size:14px; color:var(--muted); }
    .bar-track { height:10px; border-radius:999px; background:rgba(47,116,86,.15); overflow:hidden; }
    .bar-fill { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--leaf),var(--gold)); }
    .bar-value { text-align:right; font-variant-numeric:tabular-nums; color:var(--ink); font-weight:800; }
    @media (max-width:720px) { .bar-row { grid-template-columns:1fr; gap:5px; } .bar-value { text-align:left; } }



    /* 2026-08-16 visual polish: cleaner scientific dashboard cards */
    body { background:
      radial-gradient(circle at 14% 0%, rgba(210,161,60,.08), transparent 28rem),
      linear-gradient(180deg,#f8fbf2 0%, #f3f8ed 46%, #f8faf5 100%);
    }
    header { box-shadow:0 8px 24px rgba(20,58,42,.06); }
    .nav { max-width:1280px; min-height:72px; }
    .brand strong { font-size:24px; }
    .brand span { font-size:12px; }
    nav { gap:4px 6px; max-width:940px; }
    nav a { min-height:36px; display:inline-flex; align-items:center; }
    .lang-switch { box-shadow:0 6px 18px rgba(20,58,42,.08); }
    main { max-width:1280px; }
    .hero {
      min-height:460px;
      margin-top:-22px;
      border-bottom:0;
      box-shadow: inset 0 -90px 90px rgba(10,33,22,.18);
    }
    .hero h1 { max-width:820px; text-shadow:0 3px 20px rgba(0,0,0,.22); }
    .hero p { max-width:820px; font-size:18px; }
    .hero-search {
      width:min(820px,100%);
      grid-template-columns:minmax(0,1fr) 138px;
      gap:12px;
      padding:10px;
      border-radius:8px;
      background:rgba(255,255,255,.20);
      box-shadow:0 18px 48px rgba(0,0,0,.18);
    }
    .hero-search input { min-height:52px; font-size:16px; border:0; }
    .hero-search button { min-height:52px; font-size:17px; background:#1f6a4a; }
    .hero-actions .button { min-height:44px; padding-inline:18px; }
    .grid { gap:16px; }
    .grid.three.homepage-modules {
      grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
      align-items:stretch;
    }
    .stat {
      min-height:124px;
      display:flex;
      flex-direction:column;
      justify-content:center;
      border-color:#cdddc8;
      background:linear-gradient(180deg,#fffefd,#f8fbf4);
      box-shadow:0 14px 34px rgba(31,57,42,.08);
    }
    .stat strong { font-size:36px; letter-spacing:0; }
    .panel {
      border-color:#cfddca;
      box-shadow:0 18px 44px rgba(31,57,42,.075);
    }
    .panel h2 { font-size:24px; }
    .module-card-home {
      position:relative;
      min-height:230px;
      padding:20px;
      overflow:hidden;
      border-color:#cbdcc7;
      background:
        linear-gradient(180deg,rgba(255,255,255,.98),rgba(250,253,246,.98));
      box-shadow:0 14px 34px rgba(31,57,42,.075);
      transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }
    .module-card-home::before {
      content:"";
      position:absolute;
      inset:0 0 auto 0;
      height:5px;
      background:linear-gradient(90deg,#1f7350,#d2a13c,#2f7180);
    }
    .module-card-home:hover {
      transform:translateY(-3px);
      border-color:#aac6ad;
      box-shadow:0 22px 54px rgba(31,57,42,.13);
    }
    .module-card-home h3 {
      font-size:23px;
      line-height:1.25;
      margin-top:4px;
      color:#0f3525;
    }
    .module-card-home p {
      margin-top:12px;
      font-size:15.5px;
      color:#3f5148;
      line-height:1.7;
    }
    .module-card-home .card-foot { justify-content:flex-start; margin-top:18px; }
    .module-card .button.module-open {
      min-width:148px;
      min-height:54px;
      padding:13px 26px;
      font-size:18px;
      background:#1f7350;
      box-shadow:0 10px 22px rgba(31,115,80,.22);
    }
    .module-card .button.module-open:hover { background:#143a2a; box-shadow:0 12px 26px rgba(20,58,42,.24); }
    .table-wrap { box-shadow:0 10px 28px rgba(31,57,42,.04); }
    th { position:sticky; top:0; z-index:1; }
    .quick-links .button.secondary { min-height:42px; }
    @media (max-width:920px) {
      .nav { min-height:auto; }
      nav { max-width:100%; }
      .hero { margin-top:-18px; min-height:520px; }
      .hero-search { grid-template-columns:1fr; }
      .hero-search button { width:100%; }
      .grid.three.homepage-modules { grid-template-columns:1fr; }
      .module-card-home { min-height:190px; }
      .module-card .button.module-open { width:100%; }
    }


    .gene-card-flow { display:grid; grid-template-columns:1fr; gap:18px; }
    .gene-card-flow .panel { margin-top:0; }
    .gene-hero-panel { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:start; }
    .gene-quick-bar { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
    .domain-map { display:grid; gap:10px; margin:10px 0 16px; }
    .domain-track { position:relative; min-height:22px; border-radius:999px; background:#edf4e8; border:1px solid #cfddca; overflow:hidden; }
    .domain-seg { position:absolute; top:3px; height:14px; min-width:3px; border-radius:999px; background:#2f7180; box-shadow:0 2px 8px rgba(47,113,128,.22); }
    .subcell-rank { display:grid; gap:8px; }
    .id-example-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
    .phenotype-tabs { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
    .phenotype-tabs a { border:1px solid #cbd9c6; background:#eef4e9; border-radius:8px; padding:8px 12px; }
    .phenotype-tabs a.active { background:#1f7350; color:white; }
    @media (max-width:920px) { .gene-hero-panel { grid-template-columns:1fr; } }



    /* 2026-08-19 homepage rebuild: frequency-first module layout */
    .home-hero { min-height:430px; }
    .home-workflow { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:0 0 20px; }
    .home-workflow a { min-height:88px; padding:16px; border:1px solid #cbdcc7; border-radius:8px; background:#fffefd; box-shadow:0 10px 28px rgba(31,57,42,.055); color:var(--ink); }
    .home-workflow strong, .home-workflow span { display:block; }
    .home-workflow strong { font-size:17px; color:var(--forest); }
    .home-workflow span { margin-top:6px; font-size:13px; color:var(--muted); font-weight:750; }
    .home-section { margin-top:22px; }
    .section-heading { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:12px; border-bottom:1px solid var(--line); padding-bottom:10px; }
    .section-heading span { color:var(--amber); font-size:12px; font-weight:900; text-transform:uppercase; }
    .section-heading h2 { margin:0; color:var(--forest); font-size:25px; line-height:1.2; }
    .home-card-grid { display:grid; gap:16px; align-items:stretch; }
    .core-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .analysis-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .support-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
    .module-card-home { min-height:204px; }
    .module-card-top { display:flex; justify-content:space-between; align-items:center; gap:10px; min-height:26px; margin-bottom:10px; }
    .featured-badge { display:inline-flex; align-items:center; padding:4px 9px; border-radius:999px; background:#173d2c; color:#fff7dc; font-size:12px; font-weight:950; }
    .featured-module { border-color:#95b58d; background:linear-gradient(180deg,#f8fff0,#fff8e6); box-shadow:0 18px 46px rgba(72,93,42,.14); }
    .featured-module::before { background:linear-gradient(90deg,#143a2a,#d2a13c,#b56f3b); height:6px; }
    .module-building { background:linear-gradient(180deg,#fffefd,#fff7f2); }
    .home-bottom-links { margin-top:24px; padding:18px; border:1px solid var(--line); border-radius:8px; background:#fffefd; display:flex; justify-content:space-between; gap:18px; align-items:center; }
    .home-bottom-links strong, .home-bottom-links span { display:block; }
    .home-bottom-links strong { color:var(--forest); font-size:17px; }
    .home-bottom-links span { color:var(--muted); font-size:13px; }
    footer { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:18px; }
    .footer-links { display:flex; gap:12px; flex-wrap:wrap; }
    .footer-links a { color:#3b5b47; font-size:12px; }
    @media (max-width:1080px) { .core-grid,.analysis-grid,.support-grid,.home-workflow { grid-template-columns:repeat(2,minmax(0,1fr)); } }
    @media (max-width:720px) { .core-grid,.analysis-grid,.support-grid,.home-workflow { grid-template-columns:1fr; } .home-bottom-links { align-items:flex-start; flex-direction:column; } .section-heading { align-items:flex-start; flex-direction:column; } }



    /* 2026-08-19 homepage heading and support-card tuning */
    .section-heading { display:block; margin-bottom:14px; }
    .section-heading h2 { margin-top:4px; text-align:left; }
    .support-grid { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
    @media (min-width:1180px) { .support-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }



    /* 2026-08-21 English homepage header: keep desktop navigation in one line */
    @media (min-width:921px) {
      .nav {
        display:grid;
        grid-template-columns:minmax(285px,auto) minmax(0,1fr);
        align-items:center;
        gap:16px;
        min-height:70px;
      }
      .brand { min-width:0; }
      .brand strong, .brand span { white-space:nowrap; }
      .nav-tools {
        width:100%;
        min-width:0;
        display:flex;
        align-items:center;
        justify-content:flex-end;
        gap:8px;
        flex-wrap:nowrap;
      }
      .nav-tools nav {
        flex:1 1 auto;
        min-width:0;
        max-width:none;
        display:flex;
        align-items:center;
        justify-content:flex-end;
        gap:4px;
        flex-wrap:nowrap;
        white-space:nowrap;
      }
      .nav-tools nav a {
        min-height:32px;
        padding:7px 6px;
        font-size:12.5px;
        line-height:1;
      }
      .lang-switch { flex:0 0 auto; }
    }
    @media (min-width:921px) and (max-width:1180px) {
      .nav { grid-template-columns:minmax(245px,auto) minmax(0,1fr); gap:10px; }
      .brand strong { font-size:20px; }
      .brand span { font-size:10.5px; }
      .nav-tools { gap:5px; }
      .nav-tools nav { gap:2px; }
      .nav-tools nav a { padding:7px 4px; font-size:11.5px; }
      .lang-switch a { padding:7px 7px; }
    }
    @media (max-width:920px) {
      .nav { display:flex; }
      .nav-tools, .nav-tools nav { flex-wrap:wrap; white-space:normal; }
    }



    /* 2026-08-21 header overlap fix: one row without touching the brand */
    @media (min-width:921px) {
      .nav {
        grid-template-columns:minmax(320px,320px) minmax(0,1fr);
        gap:12px;
      }
      .brand strong { font-size:20px; }
      .brand span { font-size:10.5px; }
      .nav-tools { gap:6px; }
      .nav-tools nav { gap:2px; }
      .nav-tools nav a {
        padding:6px 3px;
        font-size:11.5px;
        min-height:30px;
      }
      .lang-switch a { padding:6px 7px; }
    }
    @media (min-width:1280px) {
      .nav { grid-template-columns:minmax(340px,340px) minmax(0,1fr); }
      .brand strong { font-size:22px; }
      .brand span { font-size:11px; }
      .nav-tools nav a { padding:7px 5px; font-size:12.25px; }
    }

  

/* 2026-08-21 dropdown navigation applied in head: visible core links plus vertical More panel */
@media (min-width: 921px) {
  .nav {
    grid-template-columns: minmax(300px, auto) minmax(0, 1fr);
    column-gap: 24px;
  }
  .brand strong {
    font-size: 24px;
    line-height: 1.02;
  }
  .brand span {
    font-size: 12px;
  }
  .nav-tools {
    flex-wrap: nowrap;
    gap: 10px;
  }
  .nav-tools nav {
    max-width: none;
    flex-wrap: nowrap;
    gap: 7px;
    font-size: 14px;
  }
  .nav-tools nav a {
    min-height: 36px;
    padding: 8px 10px;
    border-radius: 7px;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
  }
  .nav-tools > .lang-switch a {
    min-height: 32px;
    padding: 7px 10px;
    font-size: 12px;
  }
}
.nav-tools > .nav-more {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}
.nav-tools > .nav-more > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--green-900);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  list-style: none;
  cursor: pointer;
  white-space: nowrap;
}
.nav-tools > .nav-more > summary::-webkit-details-marker {
  display: none;
}
.nav-tools > .nav-more > summary::after {
  content: "";
  width: 0;
  height: 0;
  margin-left: 7px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
}
.nav-tools > .nav-more[open] > summary,
.nav-tools > .nav-more:hover > summary,
.nav-tools > .nav-more > summary:focus-visible {
  color: #fff;
  background: var(--green-800);
  border-color: var(--green-800);
  outline: none;
}
.nav-tools > .nav-more > .nav-more-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 100;
  min-width: 220px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 36px rgba(28, 55, 42, 0.18);
}
.nav-tools > .nav-more[open] > .nav-more-menu,
.nav-tools > .nav-more:hover > .nav-more-menu,
.nav-tools > .nav-more:focus-within > .nav-more-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nav-tools > .nav-more > .nav-more-menu > a {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 38px;
  padding: 10px 12px;
  border-radius: 7px;
  color: var(--green-900);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
}
.nav-tools > .nav-more > .nav-more-menu > a:hover,
.nav-tools > .nav-more > .nav-more-menu > a:focus-visible {
  color: #fff;
  background: var(--green-800);
  outline: none;
}
@media (max-width: 920px) {
  .nav-tools {
    flex-wrap: wrap;
  }
  .nav-tools > .nav-more > .nav-more-menu {
    left: 0;
    right: auto;
  }
}

    /* 2026-08-21 audit fix: keep long IDs, links and dense tables inside the mobile viewport. */
    main, .panel, .dataset-info, .table-wrap, .toolbar, form.toolbar, .examples, .id-example-row, .phenotype-tabs { min-width:0; max-width:100%; }
    input, select, textarea, button, .button { min-width:0; }
    .table-wrap { width:100%; max-width:100%; -webkit-overflow-scrolling:touch; }
    .panel a, .dataset-info a, .chip, .id-chip, .examples .chip, .matrix-note { overflow-wrap:anywhere; word-break:break-word; }
    .table-wrap table, .table-wrap code { white-space:nowrap; word-break:normal; overflow-wrap:normal; }
    .sample-bar-row, .sample-bar-label, .sample-bar-track, .sample-bar-value { min-width:0; max-width:100%; }
    @media (max-width:720px) {
      html, body { max-width:100%; overflow-x:hidden; }
      main { width:100%; }
      .panel { padding:14px; }
      .phenotype-tabs a, .examples .chip, .id-chip { max-width:100%; }
      .toolbar, form.toolbar, .toolbar.three { width:100%; }
      button, .button { max-width:100%; white-space:normal; text-align:center; }
      .table-wrap table, .table-wrap code { white-space:nowrap; }
      .sample-bar-row { grid-template-columns:minmax(0,1fr); }
    }

/* 2026-09-05 navigation polish: keep the top bar single-row on smaller screens without shrinking labels */
@media (max-width: 1120px) {
  nav a.nav-secondary { display: none; }
}
@media (max-width: 920px) {
  .nav { align-items: flex-start; flex-direction: column; gap: 10px; padding: 12px 18px; }
  .brand span { display: none; }
  .nav-tools { width: 100%; flex-wrap: nowrap; justify-content: space-between; gap: 8px; }
  nav { flex: 1 1 auto; flex-wrap: nowrap; justify-content: flex-start; gap: 4px; }
  nav a { min-height: 34px; padding: 7px 8px; }
  .nav-more summary { min-height: 34px; padding: 7px 10px; }
  .lang-switch a { padding: 6px 8px; }
}
@media (max-width: 560px) {
  .nav { padding: 10px 14px; }
  .brand strong { font-size: 21px; }
}

@media (max-width:560px) { .brand strong { font-size:19px; } .nav { padding:9px 12px; } }


/* 2026-09-11 homepage typography and wide-screen presence polish */
@media (min-width: 921px) {
  .nav { max-width: 1560px; min-height: 84px; padding-left: 34px; padding-right: 34px; gap: 28px; }
  .brand strong { font-size: 30px; letter-spacing: -.02em; }
  .brand span { font-size: 14px; margin-top: 3px; }
  .nav-tools { gap: 14px; }
  .nav-tools nav { gap: 10px; }
  .nav-tools nav a, .nav-tools > .nav-more > summary { min-height: 42px; padding: 10px 13px; font-size: 16px; }
  .nav-tools > .lang-switch a { min-height: 38px; padding: 9px 12px; font-size: 14px; }
}
main { max-width: 1560px; padding-left: 34px; padding-right: 34px; }
.hero { min-height: 540px; padding-top: 76px; padding-bottom: 58px; }
.hero-inner { width: min(1320px,100%); }
.hero h1 { max-width: 1000px; font-size: clamp(48px, 5.4vw, 86px); line-height: 1.05; margin-top: 22px; margin-bottom: 16px; }
.hero p { max-width: 980px; font-size: 21px; line-height: 1.75; margin-bottom: 28px; }
.eyebrow { padding: 8px 14px; font-size: 14px; }
.hero-search { width: min(960px,100%); grid-template-columns: minmax(0,1fr) 160px; padding: 12px; gap: 14px; }
.hero-search input, .hero-search button { min-height: 60px; font-size: 18px; }
.hero-actions { gap: 14px; margin-top: 18px; }
.hero-actions .button { min-height: 50px; padding: 12px 22px; font-size: 16px; }
.home-section { margin-top: 34px; }
.section-heading { margin-bottom: 18px; padding-bottom: 13px; }
.section-heading span { font-size: 14px; letter-spacing: .04em; }
.section-heading h2 { font-size: 32px; }
.home-card-grid { gap: 20px; }
.module-card-home { min-height: 250px; padding: 26px; }
.module-card-home h3 { font-size: 28px; }
.module-card-home p { font-size: 17px; line-height: 1.75; }
.module-card-top { min-height: 32px; margin-bottom: 14px; }
.module-card .button.module-open { min-width: 164px; min-height: 58px; font-size: 19px; }
.featured-badge, .status { font-size: 14px; padding: 5px 11px; }
}
@media (max-width: 920px) {
  main { padding-left: 16px; padding-right: 16px; }
  .hero { min-height: 520px; padding-top: 52px; }
  .hero h1 { font-size: clamp(42px, 11vw, 62px); }
  .hero p { font-size: 18px; }
  .section-heading h2 { font-size: 28px; }
  .module-card-home h3 { font-size: 24px; }
  .module-card-home p { font-size: 16px; }
}


/* 2026-09-11 all-subpage readability and typography polish */
/* Shared hierarchy for data, analysis, and utility pages. */
main {
  max-width: 1560px;
}
.page-intro {
  gap: 10px;
  margin: 10px 0 28px;
  padding-bottom: 18px;
}
.page-intro h1 {
  font-size: 42px;
  line-height: 1.18;
  letter-spacing: 0;
}
.page-intro p {
  max-width: 1120px;
  font-size: 18px;
  line-height: 1.75;
}
.panel {
  margin-top: 22px;
  padding: 26px;
  border-radius: 12px;
}
.panel h2 {
  margin: 0 0 16px;
  font-size: 29px;
  line-height: 1.3;
}
.panel h3 {
  margin: 20px 0 10px;
  font-size: 21px;
  line-height: 1.4;
}
.panel > p,
.panel li,
.panel dd,
.panel dt {
  font-size: 16px;
  line-height: 1.75;
}
.module-card h3,
.card h3 {
  font-size: 24px;
  line-height: 1.35;
}
.module-card p,
.card p {
  font-size: 16px;
  line-height: 1.7;
}
label {
  gap: 8px;
  font-size: 16px;
  line-height: 1.45;
}
input,
select,
textarea {
  min-height: 48px;
  padding: 12px 14px;
  font-size: 16px;
  line-height: 1.45;
}
textarea {
  min-height: 124px;
}
button,
.button {
  min-height: 48px;
  padding: 12px 18px;
  font-size: 16px;
  line-height: 1.25;
}
.toolbar,
form.toolbar {
  gap: 14px;
}
.table-wrap {
  border-radius: 10px;
}
.table-wrap table {
  font-size: 15px;
}
.table-wrap th {
  font-size: 15px;
  line-height: 1.4;
  padding: 13px 14px;
}
.table-wrap td {
  font-size: 15px;
  line-height: 1.55;
  padding: 13px 14px;
}
.small,
.subtle,
.muted,
.hint {
  font-size: 15px;
  line-height: 1.6;
}
.notice {
  font-size: 16px;
  line-height: 1.7;
}
.chip,
.pill,
.badge,
.status,
.featured-badge {
  font-size: 14px;
  line-height: 1.2;
  padding: 6px 11px;
}
code {
  font-size: 14px;
}

@media (max-width: 920px) {
  main {
    padding-left: 16px;
    padding-right: 16px;
  }
  .page-intro {
    margin-bottom: 22px;
    padding-bottom: 14px;
  }
  .page-intro h1 {
    font-size: 32px;
    line-height: 1.22;
  }
  .page-intro p {
    font-size: 17px;
    line-height: 1.7;
  }
  .panel {
    margin-top: 18px;
    padding: 20px;
    border-radius: 10px;
  }
  .panel h2 {
    margin-bottom: 13px;
    font-size: 25px;
  }
  .panel h3 {
    margin-top: 18px;
    font-size: 19px;
  }
  .panel > p,
  .panel li,
  .panel dd,
  .panel dt {
    font-size: 16px;
  }
  .module-card h3,
  .card h3 {
    font-size: 22px;
  }
  .module-card p,
  .card p {
    font-size: 16px;
  }
  .table-wrap th {
    font-size: 14px;
    padding: 11px 12px;
  }
  .table-wrap td {
    font-size: 14px;
    padding: 11px 12px;
  }
  .small,
  .subtle,
  .muted,
  .hint {
    font-size: 14px;
  }
  .notice {
    font-size: 15px;
  }
  button,
  .button {
    min-height: 46px;
    padding: 11px 16px;
    font-size: 16px;
  }
}

@media (max-width: 560px) {
  .page-intro h1 {
    font-size: 29px;
  }
  .panel {
    padding: 16px;
  }
  .panel h2 {
    font-size: 23px;
  }
  input,
  select,
  textarea {
    font-size: 16px;
  }
}


/* 2026-09-11 dense-result readability guard */
/* Keep page-specific result tables from falling back to tiny legacy text. */
.table-wrap small {
  font-size: 14px;
  line-height: 1.55;
}
.blast-table th,
.blast-table td {
  font-size: 15px;
  line-height: 1.55;
}
@media (max-width: 920px) {
  .blast-table th,
  .blast-table td,
  .blast-table .subtle {
    font-size: 14px;
    line-height: 1.5;
  }
}

/* 20260911 homepage identity under title */
.hero-identity { display:flex; flex-wrap:wrap; align-items:baseline; gap:14px 24px; margin:18px 0 16px; color:var(--forest); font-size:clamp(18px, 1.7vw, 25px); line-height:1.5; font-weight:800; }
.hero-identity strong { font-weight:900; }
.hero-identity span { color:var(--leaf); font-size:0.9em; font-weight:900; }
@media (max-width:700px) { .hero-identity { display:block; font-size:18px; margin:14px 0; } .hero-identity span { display:block; margin-top:6px; } }

/* 20260911 homepage identity above core tools */
.core-identity { display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 28px; margin:28px 0 10px; padding:0 16px; color:var(--forest); font-size:clamp(22px, 2.25vw, 32px); line-height:1.45; font-weight:900; }
.core-identity strong { font-weight:900; }
.core-identity span { color:var(--leaf); font-size:0.82em; font-weight:900; }
@media (max-width:700px) { .core-identity { display:block; margin:20px 0 8px; padding:0 10px; font-size:22px; } .core-identity span { display:block; margin-top:6px; } }

/* 20260911 core identity readability and contact separation */
.core-identity { gap:14px 30px; margin-top:30px; font-size:clamp(26px, 2.7vw, 38px); font-weight:900; }
.core-identity strong, .core-identity .core-contact { color:#111; font-weight:900; }
.core-identity .core-contact { margin-left:18px; }
@media (max-width:700px) { .core-identity { margin-top:22px; font-size:26px; } .core-identity strong, .core-identity .core-contact { display:block; } .core-identity .core-contact { margin:12px 0 0; } }

/* 20260911 final homepage identity layout */
.core-identity { display:block !important; margin:30px 0 14px !important; padding:0 16px !important; color:#7b241c !important; font-size:clamp(27px, 2.8vw, 40px) !important; line-height:1.5 !important; font-weight:900 !important; }
.core-identity-line { display:flex; align-items:baseline; gap:30px; margin:0 0 4px; }
.core-identity strong, .core-identity .core-contact { color:#7b241c !important; font-weight:900 !important; }
.core-identity .core-contact { margin-left:0 !important; }
@media (max-width:700px) { .core-identity { margin-top:22px !important; padding:0 10px !important; font-size:27px !important; } .core-identity-line { display:block; margin-bottom:6px; } .core-identity .core-contact { display:inline; margin-left:18px !important; } }

/* 20260911 identity cards based on user reference */
.identity-cards { display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:12px; margin:24px 0 18px; }
.identity-card { min-height:78px; padding:15px 16px; border:1px solid #d6ded8; border-radius:12px; background:#fff; box-shadow:0 5px 16px rgba(31,57,42,.06); }
.identity-card span { display:block; margin-bottom:7px; color:#526b82; font-size:14px; font-weight:800; }
.identity-card strong { display:block; color:#175b58; font-size:18px; line-height:1.4; font-weight:900; }
@media (max-width:700px) { .identity-cards { grid-template-columns:1fr; gap:10px; margin:18px 0 14px; } .identity-card { min-height:70px; } }

/* R42: keep full source/result columns accessible inside their own container. */
.table-scroll { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll:focus-visible { outline: 2px solid #143a2b; outline-offset: 2px; }
.data-card { min-width: 0; }