/* ============================================================
 * LncACTdb 4.0 — design tokens + template reskin + shared UI
 * Loaded AFTER assets/css/style.css so the --mediplace-* overrides
 * win and the whole Mediplace chrome adopts our palette.
 * Namespace for our own components: .la-*
 * ============================================================ */

:root{
  /* ---- brand: royal indigo + electric cyan (distinct from siblings) ---- */
  --la-primary:#4338ca;      --la-primary-rgb:67,56,202;
  --la-primary-d:#312e81;    --la-primary-l:#6366f1;
  --la-cyan:#06b6d4;         --la-cyan-d:#0e7490;
  --la-accent:#0ea5e9;

  /* ---- ceRNA tri-species identity (used across all viz) ---- */
  --la-lnc:#7c3aed;          /* lncRNA  -> violet  */
  --la-mir:#f59e0b;          /* miRNA   -> amber   */
  --la-mrna:#10b981;         /* mRNA    -> emerald */

  /* ---- extended chart palette ---- */
  --la-pink:#ec4899; --la-red:#ef4444; --la-green:#22c55e;
  --la-orange:#f97316; --la-blue:#3b82f6; --la-indigo:#6366f1;

  /* ---- ink / surface scale ---- */
  --la-ink:#0b1437;  --la-ink-2:#33406b; --la-muted:#6b7390;
  --la-line:#e7eaf3; --la-line-2:#eef1f8;
  --la-bg:#ffffff;   --la-bg-soft:#f6f7fb; --la-bg-tint:#f0f2fb;

  /* ---- typography: Inter is the de-facto scientific-dashboard face ---- */
  --la-font:"Inter",system-ui,-apple-system,sans-serif;
  --la-font-display:"Inter",system-ui,sans-serif;
  --la-mono:"IBM Plex Mono","SFMono-Regular",ui-monospace,monospace;

  /* ---- radii + shadows ---- */
  --la-r-sm:10px; --la-r:16px; --la-r-lg:24px;
  --la-shadow:0 18px 50px rgba(11,20,55,.08),0 4px 12px rgba(11,20,55,.04);
  --la-shadow-sm:0 6px 18px rgba(11,20,55,.06);
  --la-shadow-pop:0 20px 60px rgba(11,20,55,.16);
  --la-ring:0 0 0 4px rgba(var(--la-primary-rgb),.14);

  /* ---- reskin the Mediplace template variables ---- */
  --mediplace-base:#4338ca;       --mediplace-base-rgb:67,56,202;
  --mediplace-black:#0b1437;      --mediplace-black-rgb:11,20,55;
}

/* gradients reused everywhere */
.la-grad-text{
  background:linear-gradient(90deg,var(--la-primary),var(--la-cyan));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* ============================================================
 * PAGE SCAFFOLD
 * ============================================================ */
.la-page{font-family:var(--la-font);color:var(--la-ink-2);background:var(--la-bg);}
.la-wrap{max-width:1240px;margin:0 auto;padding:0 24px;}
.la-section{padding:64px 0;}
.la-section--soft{background:var(--la-bg-soft);}

.la-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font:600 12px/1 var(--la-mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--la-primary);background:var(--la-bg-tint);
  padding:8px 14px;border-radius:999px;margin-bottom:18px;
}
.la-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--la-cyan);box-shadow:0 0 0 4px rgba(6,182,212,.18);}

.la-h2{font:700 clamp(28px,3.4vw,42px)/1.12 var(--la-font-display);
  color:var(--la-ink);letter-spacing:-.02em;margin:0 0 14px;}
.la-lead{font-size:17px;line-height:1.7;color:var(--la-muted);max-width:60ch;}

/* ============================================================
 * BUTTONS
 * ============================================================ */
.la-btn{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  font:600 15px/1 var(--la-font);border:0;border-radius:999px;
  padding:14px 26px;transition:.25s;text-decoration:none;
}
.la-btn--primary{color:#fff;
  background:linear-gradient(90deg,var(--la-primary),var(--la-primary-l));
  box-shadow:0 12px 28px rgba(var(--la-primary-rgb),.28);}
.la-btn--primary:hover{transform:translateY(-2px);color:#fff;
  box-shadow:0 18px 38px rgba(var(--la-primary-rgb),.36);}
.la-btn--ghost{color:var(--la-primary);background:#fff;border:1.5px solid var(--la-line);}
.la-btn--ghost:hover{border-color:var(--la-primary);background:var(--la-bg-tint);}

/* ============================================================
 * PANELS / CARDS
 * ============================================================ */
.la-panel{background:#fff;border:1px solid var(--la-line);
  border-radius:var(--la-r);box-shadow:var(--la-shadow-sm);}
.la-card{background:#fff;border:1px solid var(--la-line);border-radius:var(--la-r-lg);
  padding:28px;box-shadow:var(--la-shadow-sm);transition:.3s;position:relative;overflow:hidden;}
.la-card:hover{transform:translateY(-4px);box-shadow:var(--la-shadow);border-color:transparent;}
.la-card__icon{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;
  font-size:22px;color:#fff;margin-bottom:18px;
  background:linear-gradient(135deg,var(--la-primary),var(--la-cyan));}
.la-card__title{font:700 19px/1.3 var(--la-font-display);color:var(--la-ink);margin:0 0 8px;}
.la-card__text{font-size:14.5px;line-height:1.65;color:var(--la-muted);margin:0;}

/* species chips */
.la-chip{display:inline-flex;align-items:center;gap:6px;font:600 12px/1 var(--la-mono);
  padding:5px 11px;border-radius:999px;}
.la-chip--lnc{color:var(--la-lnc);background:rgba(124,58,237,.10);}
.la-chip--mir{color:#b45309;background:rgba(245,158,11,.14);}
.la-chip--mrna{color:#047857;background:rgba(16,185,129,.12);}

/* ============================================================
 * STAT NUMBERS
 * ============================================================ */
.la-stat{ text-align:center; }
.la-stat__num{font:700 clamp(30px,3.6vw,46px)/1 var(--la-font-display);
  color:var(--la-ink);letter-spacing:-.02em;}
.la-stat__num span{color:var(--la-cyan);}
.la-stat__label{margin-top:8px;font:600 13px/1.3 var(--la-mono);
  letter-spacing:.08em;text-transform:uppercase;color:var(--la-muted);}

/* ============================================================
 * DATATABLES — reskin to match the brand (namespace .la-dtable)
 * ============================================================ */
table.la-dtable{width:100%!important;border-collapse:separate!important;border-spacing:0;
  font-size:13.5px;color:var(--la-ink-2);}
table.la-dtable thead th{
  background:linear-gradient(180deg,var(--la-bg-tint),var(--la-bg-soft));color:var(--la-primary-d);
  font:700 11.5px/1.2 var(--la-mono);letter-spacing:.04em;text-transform:uppercase;
  border-bottom:2px solid var(--la-line)!important;padding:13px 15px;text-align:left;white-space:nowrap;}
table.la-dtable tbody td{padding:12px 15px;border-bottom:1px solid var(--la-line-2)!important;vertical-align:middle;}
table.la-dtable tbody tr{transition:background .12s;}
table.la-dtable tbody tr:nth-child(even){background:rgba(246,247,251,.5);}
table.la-dtable tbody tr:hover{background:var(--la-bg-tint);}
table.la-dtable.dt-rowGroup tbody td{vertical-align:middle;}
.dt-container .dt-layout-row{align-items:center;margin-bottom:10px;}
.dt-container .dt-paging .dt-paging-button.current{
  background:var(--la-primary)!important;border-color:var(--la-primary)!important;
  color:#fff!important;border-radius:8px;}
.dt-container .dt-paging .dt-paging-button{border-radius:8px;}
.dt-container .dt-search input,.dt-container .dt-length select{
  border:1px solid var(--la-line);border-radius:8px;padding:7px 12px;outline:none;font-size:13px;}
.dt-container .dt-search input{min-width:220px;}
.dt-container .dt-search input:focus{border-color:var(--la-primary);box-shadow:var(--la-ring);}
.dt-container .dt-info{font-size:13px;color:var(--la-muted);}
/* export / colvis buttons */
.dt-buttons{display:inline-flex;gap:7px;}
.dt-buttons .dt-button{background:var(--la-bg-tint);color:var(--la-primary-d);
  border:1px solid var(--la-line)!important;border-radius:9px;font:600 12.5px var(--la-font);padding:8px 15px;transition:.16s;}
.dt-buttons .dt-button:hover{background:var(--la-primary);color:#fff;border-color:var(--la-primary)!important;box-shadow:0 6px 16px rgba(var(--la-primary-rgb),.28);}
.dt-button-collection{border-radius:12px!important;box-shadow:var(--la-shadow)!important;padding:8px!important;border:1px solid var(--la-line)!important;}
.dt-button-collection .dt-button{display:block;width:100%;text-align:left;border:0!important;background:none;border-radius:8px;}

/* ============================================================
 * TOM-SELECT — align to brand
 * ============================================================ */
.ts-control{border:1px solid var(--la-line)!important;border-radius:var(--la-r-sm)!important;
  min-height:48px;box-shadow:none!important;font-size:15px;padding:6px 12px!important;}
.ts-control.focus{border-color:var(--la-primary)!important;box-shadow:var(--la-ring)!important;}
.ts-dropdown{border:1px solid var(--la-line)!important;border-radius:var(--la-r-sm)!important;
  box-shadow:var(--la-shadow-pop)!important;overflow:hidden;}
.ts-dropdown .active{background:var(--la-bg-tint)!important;color:var(--la-primary-d)!important;}

/* ============================================================
 * NAV / FOOTER reskin tweaks layered on Mediplace
 * ============================================================ */
.la-page .main-menu__list>li>a{font-family:var(--la-font);font-weight:600;}
.la-brand-word{font:800 22px/1 var(--la-font-display);letter-spacing:-.02em;color:#fff;}
.la-brand-word b{color:var(--la-cyan);font-weight:800;}
.la-brand-word small{display:block;font:500 10px/1.2 var(--la-mono);
  letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:4px;}

/* page hero band (inner pages) */
.la-pagehead{position:relative;padding:120px 0 56px;
  background:linear-gradient(120deg,var(--la-primary-d),var(--la-primary) 55%,var(--la-cyan-d));
  color:#fff;overflow:hidden;}
.la-pagehead::after{content:"";position:absolute;inset:0;opacity:.18;
  background:radial-gradient(circle at 80% -10%,#fff,transparent 45%);}
.la-pagehead__inner{position:relative;z-index:2;}
.la-pagehead h1{font:700 clamp(30px,4vw,48px)/1.1 var(--la-font-display);
  letter-spacing:-.02em;margin:0 0 12px;color:#fff;}
.la-pagehead p{max-width:62ch;color:rgba(255,255,255,.85);font-size:16px;margin:0;}
.la-crumb{font:600 13px var(--la-mono);color:rgba(255,255,255,.7);margin-bottom:14px;}
.la-crumb a{color:rgba(255,255,255,.9);}

/* responsive */
@media(max-width:768px){
  .la-section{padding:44px 0;}
  .la-wrap{padding:0 18px;}
}

/* ============================================================
 * FORM FIELDS + TOOL PLACEHOLDERS (shared by tool pages)
 * ============================================================ */
.la-field-label{display:block;font:600 13px var(--la-mono);letter-spacing:.04em;
  text-transform:uppercase;color:var(--la-muted);margin:0 0 8px;}
.la-textarea{width:100%;border:1px solid var(--la-line);border-radius:var(--la-r-sm);
  padding:14px 16px;font:500 14px var(--la-mono);color:var(--la-ink-2);resize:vertical;outline:none;
  background:var(--la-bg-soft);}
.la-textarea:focus{border-color:var(--la-primary);box-shadow:var(--la-ring);background:#fff;}
.la-radio-row{display:flex;gap:18px;flex-wrap:wrap;}
.la-radio-row label{display:inline-flex;align-items:center;gap:7px;font-size:14px;
  color:var(--la-ink-2);cursor:pointer;}
.la-blast-controls{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px;}
.la-note{margin-top:16px;font-size:13px;color:var(--la-muted);
  background:var(--la-bg-tint);border-radius:var(--la-r-sm);padding:10px 14px;}
.la-note i{color:var(--la-primary);margin-right:6px;}

.la-placeholder{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;border:1.5px dashed var(--la-line);border-radius:var(--la-r);
  padding:36px 24px;margin-top:14px;background:
    repeating-linear-gradient(45deg,var(--la-bg-soft),var(--la-bg-soft) 12px,#fff 12px,#fff 24px);}
.la-placeholder__art{opacity:.9;margin-bottom:18px;}
.la-placeholder h4{font:700 18px var(--la-font-display);color:var(--la-ink);margin:0 0 8px;}
.la-placeholder p{font-size:14px;color:var(--la-muted);max-width:42ch;margin:0;line-height:1.6;}



/* ============================================================
 * PRELOADER (shared, all pages) — ceRNA-themed
 * ============================================================ */
.la-loader{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#ffffff,#f4f6fc);transition:opacity .5s ease,visibility .5s ease;}
.la-loader.is-done{opacity:0;visibility:hidden;}
.la-loader__in{display:flex;flex-direction:column;align-items:center;gap:18px;}
.la-loader__dna{position:relative;width:60px;height:60px;}
.la-loader__dna span{position:absolute;top:0;left:50%;width:13px;height:13px;border-radius:50%;
  transform-origin:0 30px;animation:laSpin 1.1s ease-in-out infinite;}
.la-loader__dna span:nth-child(1){background:var(--la-primary);animation-delay:0s;}
.la-loader__dna span:nth-child(2){background:var(--la-cyan);animation-delay:-.14s;}
.la-loader__dna span:nth-child(3){background:var(--la-lnc);animation-delay:-.28s;}
.la-loader__dna span:nth-child(4){background:var(--la-mir);animation-delay:-.42s;}
.la-loader__dna span:nth-child(5){background:var(--la-mrna);animation-delay:-.56s;}
@keyframes laSpin{0%{transform:rotate(0) scale(1);}50%{transform:rotate(180deg) scale(.4);}100%{transform:rotate(360deg) scale(1);}}
.la-loader__txt{font:700 13px var(--la-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--la-muted);}
.la-loader__txt b{color:var(--la-primary);}

/* ---------- DataTables polish (LncACTdb) ---------- */
.dt-buttons .dt-button{font:600 12px var(--la-font);padding:6px 12px;border-radius:8px;}
.dt-buttons .dt-button i{margin-right:5px;opacity:.85;}
/* 分页:做成药丸按钮,hover 可见 */
.dt-container .dt-paging{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end;}
.dt-container .dt-paging .dt-paging-button{min-width:34px;height:34px;padding:0 11px;border-radius:9px;
  border:1px solid var(--la-line)!important;background:#fff!important;color:var(--la-ink-2)!important;
  font:600 13px var(--la-font);display:inline-flex;align-items:center;justify-content:center;
  transition:.15s;border-radius: 8px !important;;box-shadow:none!important;}
.dt-container .dt-paging .dt-paging-button:hover:not(.disabled):not(.current){
  background:var(--la-bg-tint)!important;border-color:#c7d2fe!important;color:var(--la-primary-d)!important;}
.dt-container .dt-paging .dt-paging-button.current,
.dt-container .dt-paging .dt-paging-button.current:hover{
  background:linear-gradient(135deg,var(--la-primary),var(--la-primary-l))!important;
  border-color:var(--la-primary)!important;color:#fff!important;
  box-shadow:0 4px 12px rgba(var(--la-primary-rgb),.3)!important;}
.dt-container .dt-paging .dt-paging-button.disabled{opacity:.4;cursor:not-allowed;}
/* info / length 文字 */
.dt-container .dt-info{font-size:12.5px;color:var(--la-muted);padding-top:8px;}
.dt-container .dt-info b{color:var(--la-ink);}
.dt-container .dt-length,.dt-container .dt-length select{font-size:12.5px;color:var(--la-muted);}
.dt-container .dt-layout-row{margin-top:10px;}