:root {
  --navy:#0b1f33; --navy-2:#12344d; --teal:#087f8c; --teal-2:#0ea5a8;
  --aqua:#dff7f5; --sky:#eaf4fb; --ink:#142433; --muted:#667785;
  --panel:#ffffff; --line:#dce7ec; --bg:#f4f8fa; --warm:#f5b642;
}
html { scroll-behavior:smooth; }
body { background:linear-gradient(180deg,#eef7f8 0,#f7fafb 300px,#f4f8fa 100%); color:var(--ink); font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; }
a { color:var(--teal); text-underline-offset:3px; }
a:hover { color:#056773; }
.app-navbar { background:linear-gradient(110deg,var(--navy) 0%,var(--navy-2) 58%,#075d67 100%) !important; box-shadow:0 10px 28px rgba(11,31,51,.16); padding:.8rem 0; }
.brand-title { letter-spacing:-.015em; }
.version-pill { font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; padding:.28rem .5rem; border-radius:999px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.24); }
.eyebrow { color:var(--teal); font-size:.74rem; font-weight:800; letter-spacing:.13em; }
.hero-title { color:var(--navy); letter-spacing:-.035em; }
.lead { max-width:900px; color:var(--muted)!important; }
.card { background:rgba(255,255,255,.97); border:1px solid var(--line); border-radius:18px; box-shadow:0 8px 26px rgba(18,52,77,.06); transition:transform .18s ease,box-shadow .18s ease; }
.card:hover { box-shadow:0 12px 34px rgba(18,52,77,.09); }
.card-header { background:linear-gradient(180deg,#fff,#fbfdfe); color:var(--navy); border-bottom:1px solid var(--line); border-radius:18px 18px 0 0!important; padding:.9rem 1.1rem; }
.card-body { padding:1.1rem; }
.upload-zone { width:100%; min-height:138px; border:2px dashed #8fb7bd; border-radius:14px; display:flex; align-items:center; justify-content:center; text-align:center; padding:22px; background:linear-gradient(135deg,#f5fbfb,#edf7f8); cursor:pointer; transition:.2s; }
.upload-zone:hover { border-color:var(--teal); background:var(--aqua); transform:translateY(-1px); }
.metric-card { border:1px solid #d7e8e9; border-top:4px solid var(--teal); background:linear-gradient(155deg,#fff 45%,#f0fbfa 100%); }
.metric-label { color:var(--muted); font-size:.75rem; font-weight:800; text-transform:uppercase; letter-spacing:.065em; }
.metric-value { color:var(--navy); font-size:1.7rem; font-weight:800; margin:.15rem 0; letter-spacing:-.03em; }
.metric-hint { color:var(--muted); font-size:.78rem; }
.formula-code { display:block; padding:.85rem 1rem; margin-top:.35rem; background:#edf5f7; border-left:3px solid var(--teal); border-radius:8px; color:var(--navy); white-space:normal; }
.summary-pre { max-height:520px; overflow:auto; background:var(--navy); color:#e8f3f5; padding:1rem; border-radius:12px; font-size:.76rem; }
.nav-tabs { border-bottom:1px solid var(--line); gap:.15rem; }
.nav-tabs .nav-link { font-weight:700; color:#607581; border-radius:9px 9px 0 0; }
.nav-tabs .nav-link:hover { color:var(--teal); border-color:transparent; background:#eef8f8; }
.nav-tabs .nav-link.active { color:var(--teal); background:#fff; border-color:var(--line) var(--line) #fff; border-top:3px solid var(--teal); }
.tab-content { background:#fff; border:1px solid var(--line); border-top:0; padding:0 1rem 1rem; border-radius:0 0 16px 16px; }
.js-plotly-plot { border-radius:14px; overflow:hidden; }
.dash-table-container { border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.form-check-input:checked { background-color:var(--teal); border-color:var(--teal); }
.Select-control { border-color:#cddde2!important; border-radius:9px!important; }
.alert-info { color:#155d66; background:#e7f7f7; border-color:#c8e9e8; }
.footer-link { font-weight:650; text-decoration:none; }
hr { border-color:#d6e3e8; opacity:1; }
@media (max-width:768px) { .display-6{font-size:2rem}.app-navbar{border-radius:0!important}.version-pill{display:none} }

/* DLNM: complex scientific plots need full-width reading space. */
.dlnm-card { border:1px solid var(--line); box-shadow:0 6px 22px rgba(18,52,77,.055); }
.dlnm-card:hover { transform:none; }
.dlnm-card .card-body { padding:1rem 1.15rem 1.15rem; }
.dlnm-graph { width:100%; }
.dlnm-summary-wrap { border-top:1px solid var(--line); padding:.85rem .55rem .15rem; }
.dlnm-ref { color:var(--navy); font-size:.84rem; margin-bottom:.55rem; }
.dlnm-summary { font-size:.82rem; color:var(--ink); }
.dlnm-summary thead th { color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.045em; border-bottom:1px solid var(--line); }
.dlnm-summary td { vertical-align:middle; }
@media (max-width:768px) { .dlnm-card .card-body{padding:.65rem}.dlnm-summary{font-size:.76rem} }

.disclaimer-box {
  border-left: 4px solid #d39e00;
  border-radius: 12px;
  line-height: 1.55;
}

.previous-dashboard-banner {
  background:linear-gradient(110deg,#e8f7f7 0%,#eef7fb 100%);
  border:1px solid #c8e4e7;
  border-left:4px solid var(--teal);
  border-radius:14px;
  color:var(--navy);
  box-shadow:0 5px 18px rgba(18,52,77,.045);
}
.previous-dashboard-link {
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.55rem .85rem;
  border:1px solid #87bdc2;
  border-radius:9px;
  background:#fff;
  color:var(--teal);
  font-weight:750;
  text-decoration:none;
  white-space:nowrap;
}
.previous-dashboard-link:hover { background:var(--aqua); color:#056773; border-color:var(--teal); }


/* Front-page project positioning */
.about-dashboard-card {
  border:1px solid #cfe2e6;
  border-top:4px solid var(--teal);
  background:linear-gradient(135deg,#ffffff 0%,#f5fbfb 58%,#eef7fb 100%);
}
.about-dashboard-card:hover { transform:none; }
.about-title { color:var(--navy); font-weight:800; letter-spacing:-.025em; }
.about-copy { color:#425b68; line-height:1.55; }
.scope-note { padding:1rem 1.05rem; background:rgba(255,255,255,.82); border:1px solid #d6e8ea; border-radius:12px; color:#405965; line-height:1.5; }
.climaid-link { display:inline-flex; align-items:center; padding:.62rem .95rem; border-radius:9px; background:var(--navy); color:#fff; font-weight:750; text-decoration:none; box-shadow:0 5px 14px rgba(11,31,51,.12); }
.climaid-link:hover { background:#163c5c; color:#fff; transform:translateY(-1px); }

/* Scannable scope + stronger ClimAID hierarchy */
.about-list, .scope-list { padding-left:1.25rem; color:#425b68; line-height:1.55; }
.about-list li, .scope-list li { margin-bottom:.48rem; padding-left:.15rem; }
.about-list li:last-child, .scope-list li:last-child { margin-bottom:0; }
.about-list li::marker, .scope-list li::marker { color:var(--teal); }
.climaid-callout {
  padding:1.15rem 1.2rem;
  border:1px solid #9fd4d7;
  border-left:5px solid var(--teal);
  border-radius:14px;
  background:linear-gradient(135deg,#ddf7f5 0%,#edf8fb 100%);
  box-shadow:0 8px 22px rgba(8,127,140,.10);
}
.climaid-badge {
  display:inline-block;
  padding:.28rem .5rem;
  border-radius:999px;
  background:#c9efed;
  color:#066873;
  font-size:.67rem;
  font-weight:850;
  letter-spacing:.09em;
}
.climaid-title { color:var(--navy); font-weight:800; letter-spacing:-.02em; }
.climaid-copy { color:#365565; line-height:1.5; }

/* Balanced full-width About / Scope / ClimAID layout */
.about-dashboard-card .card-body { padding:1.45rem 1.55rem; }
.about-list-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:2rem;
  row-gap:.15rem;
  margin-bottom:1.15rem !important;
}
.scope-strip {
  margin-top:1.15rem;
  padding:1rem 1.1rem;
  background:rgba(255,255,255,.82);
  border:1px solid #d6e8ea;
  border-radius:12px;
}
.scope-heading { display:block; color:var(--navy); margin-bottom:.7rem; font-size:1.02rem; }
.scope-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem; }
.scope-item { display:flex; flex-direction:column; gap:.25rem; color:#425b68; line-height:1.45; }
.scope-label { color:var(--teal); font-weight:800; font-size:.78rem; text-transform:uppercase; letter-spacing:.045em; }
.climaid-callout {
  margin-top:1rem;
  padding:1rem 1.15rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
}
.climaid-content { min-width:0; }
.climaid-link { flex:0 0 auto; white-space:nowrap; }
@media (max-width: 991.98px) {
  .about-list-grid, .scope-grid { grid-template-columns:1fr; }
  .climaid-callout { align-items:flex-start; flex-direction:column; gap:.9rem; }
}