/* ============================================================
   ACSE — Light, spacious, calm.
   Product-app aesthetic. Inter + JetBrains Mono.
   ============================================================ */

:root{
  /* neutrals */
  --bg:      #fafafa;
  --surface: #ffffff;
  --surface-2: #f6f7f9;
  --border:  #e6e8ec;
  --border-strong: #d5d9e0;
  --hover:   #f2f4f7;

  --ink:     #0e1116;
  --ink-2:   #3d4553;
  --ink-3:   #6b7280;
  --ink-4:   #98a1b1;
  --ink-5:   #c9cfd8;

  /* brand + semantic */
  --brand:      #1a56db;   /* deep blue */
  --brand-soft: #eaf1ff;
  --brand-ink:  #133b96;

  --ok:      #0f8f5b;
  --ok-soft: #e5f7ee;
  --warn:    #b26a00;
  --warn-soft: #fdf2dc;
  --crit:    #c2272d;
  --crit-soft: #fbeaea;
  --info:    #087db5;
  --info-soft: #e3f2fa;
  --violet:  #6d3fc0;
  --violet-soft: #f0eafb;

  /* score-component colors (calm) */
  --c-crit: #d64f4f;
  --c-zone: #2c78c8;
  --c-type: #7d55d0;
  --c-load: #2f9b6f;

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  --shadow-sm: 0 1px 2px rgba(15,23,42,.04);
  --shadow: 0 1px 3px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.04);
  --shadow-lg: 0 12px 40px rgba(15,23,42,.12);

  --radius: 10px;
  --radius-sm: 6px;
}

*{ box-sizing: border-box; }
html, body{
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea{ font: inherit; color: inherit; }
::selection{ background: var(--brand-soft); color: var(--brand-ink); }

/* scrollbars */
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{ background: var(--ink-5); border-radius: 6px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background: var(--ink-4); }

/* ============================================================
   APP SHELL
   ============================================================ */
#app{
  min-height: 100vh;
  display: flex; flex-direction: column;
}

/* ---- top bar ---- */
.topbar{
  display: flex; align-items: center; gap: 16px;
  padding: 0 28px;
  height: 60px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 30;
}
.brand{
  display: flex; align-items: center; gap: 10px;
  padding-right: 22px;
  border-right: 1px solid var(--border);
  margin-right: 6px;
}
.brand-mark{
  width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(135deg, #1a56db 0%, #6d3fc0 100%);
  display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 14px;
  letter-spacing: -.02em;
  box-shadow: 0 4px 10px rgba(26,86,219,.25);
}
.brand-name{ font-weight: 600; font-size: 15px; color: var(--ink); letter-spacing: -.01em; }
.brand-sub{ color: var(--ink-3); font-size: 12px; font-family: var(--mono); }

.nav{ display: flex; gap: 4px; }
.tab{
  padding: 7px 12px;
  border-radius: 7px;
  font-size: 13.5px; font-weight: 500;
  color: var(--ink-3);
  transition: color .15s, background .15s;
}
.tab:hover{ color: var(--ink); background: var(--hover); }
.tab.active{
  color: var(--brand-ink);
  background: var(--brand-soft);
}

.topbar-right{ margin-left: auto; display: flex; align-items: center; gap: 10px; }
.pill{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--ink-2);
}
.pill .led{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(15,143,91,.15);
}
.pill.warn .led{ background: var(--warn); box-shadow: 0 0 0 3px rgba(178,106,0,.15); }
.pill.info .led{ background: var(--info); box-shadow: 0 0 0 3px rgba(8,125,181,.15); }
.pill-btn{ cursor: pointer; }
.pill-btn:hover{ border-color: var(--border-strong); background: var(--hover); }

.icon-btn{
  width: 34px; height: 34px; border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-3);
  display: grid; place-items: center;
  transition: all .12s;
}
.icon-btn:hover{ color: var(--ink); border-color: var(--border-strong); background: var(--hover); }

/* ---- page container ---- */
.page{
  padding: 28px 32px 60px;
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}
.page-head{
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}
.page-head h1{
  margin: 0 0 6px;
  font-size: 24px; font-weight: 600; color: var(--ink);
  letter-spacing: -.015em;
}
.page-head .lede{
  color: var(--ink-3);
  font-size: 14.5px;
  max-width: 620px;
  margin: 0;
}
.page-head .aux{ display: flex; align-items: center; gap: 8px; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px; font-weight: 500;
  border: 1px solid transparent;
  transition: all .12s;
  white-space: nowrap;
}
.btn.primary{
  background: var(--brand);
  color: #fff;
  box-shadow: 0 1px 2px rgba(26,86,219,.15);
}
.btn.primary:hover{ background: #1749b9; }
.btn.ghost{
  background: var(--surface);
  color: var(--ink-2);
  border-color: var(--border);
}
.btn.ghost:hover{ border-color: var(--border-strong); color: var(--ink); background: var(--hover); }
.btn.text{
  background: transparent; color: var(--brand);
  padding: 8px 10px;
}
.btn.text:hover{ background: var(--brand-soft); }
.btn.sm{ padding: 6px 10px; font-size: 12px; }
.btn:disabled{ opacity: .5; cursor: not-allowed; }
.btn:disabled:hover{ background: inherit; border-color: var(--border); }

/* ============================================================
   BADGES / TAGS
   ============================================================ */
.badge{
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  font-size: 11.5px; font-weight: 500;
  border-radius: 5px;
  background: var(--surface-2);
  color: var(--ink-2);
  border: 1px solid var(--border);
  line-height: 1.6;
  white-space: nowrap;
}
.badge .dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: .8;
}
.badge.crit{ color: var(--crit); background: var(--crit-soft); border-color: rgba(194,39,45,.2); }
.badge.warn{ color: var(--warn); background: var(--warn-soft); border-color: rgba(178,106,0,.2); }
.badge.ok{ color: var(--ok);   background: var(--ok-soft);   border-color: rgba(15,143,91,.2); }
.badge.info{ color: var(--info); background: var(--info-soft); border-color: rgba(8,125,181,.2); }
.badge.brand{ color: var(--brand-ink); background: var(--brand-soft); border-color: rgba(26,86,219,.2); }
.badge.violet{ color: var(--violet); background: var(--violet-soft); border-color: rgba(109,63,192,.2); }

.badge-sq{
  display: inline-flex; align-items: center; padding: 2px 6px;
  font-size: 10.5px; font-weight: 500;
  border-radius: 4px;
  font-family: var(--mono);
  letter-spacing: -.01em;
  background: var(--surface-2); color: var(--ink-2);
  border: 1px solid var(--border);
}

/* ============================================================
   TABLE (paginated incident list, crew roster)
   ============================================================ */
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.card-head{
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.card-head h3{
  margin: 0; font-size: 14px; font-weight: 600; color: var(--ink);
  letter-spacing: -.01em;
  white-space: nowrap;
}
.card-head .sub{ color: var(--ink-3); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-head .aux{ margin-left: auto; display: flex; align-items: center; gap: 8px; }
.card-body{ padding: 18px; }
.card-body-flush{ padding: 0; }

.filters{
  display: flex; gap: 8px; align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-wrap: wrap;
}
.search{
  position: relative;
  flex: 1; max-width: 360px;
}
.search input{
  width: 100%;
  padding: 8px 12px 8px 34px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 13px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.search input:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(26,86,219,.12);
}
.search svg{ position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--ink-4); }

.seg{
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.seg button{
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 12px; font-weight: 500;
  color: var(--ink-3);
  transition: color .12s, background .12s;
  white-space: nowrap;
}
.seg button:hover{ color: var(--ink); }
.seg button.on{ background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

.select{
  padding: 7px 26px 7px 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 8px;
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

/* real table */
table.data{
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
table.data thead th{
  text-align: left;
  padding: 10px 16px;
  font-size: 11.5px; font-weight: 500;
  color: var(--ink-3);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}
table.data thead th.num{ text-align: right; }
table.data tbody td{
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--ink-2);
  vertical-align: middle;
}
table.data tbody td.num{ text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 12.5px; }
table.data tbody tr{ cursor: pointer; transition: background .1s; }
table.data tbody tr:hover{ background: var(--hover); }
table.data tbody tr.selected{ background: var(--brand-soft); }
table.data tbody tr.selected td:first-child{ box-shadow: inset 3px 0 0 var(--brand); }
table.data tbody tr:last-child td{ border-bottom: 0; }

.t-id{ font-family: var(--mono); font-size: 12.5px; color: var(--ink); font-weight: 500; }
.t-primary{ color: var(--ink); font-weight: 500; }
.t-muted{ color: var(--ink-3); font-size: 12px; }
.t-truncate{ max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* pagination */
.pagination{
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  font-size: 13px;
  color: var(--ink-3);
}
.pagination .info{ font-variant-numeric: tabular-nums; }
.pagination .info b{ color: var(--ink); font-weight: 500; }
.pagination .controls{ display: flex; align-items: center; gap: 4px; }
.pagination .pg-btn{
  min-width: 32px; height: 32px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  color: var(--ink-2);
  font-size: 13px;
  transition: all .12s;
}
.pagination .pg-btn:hover:not(:disabled):not(.on){ background: var(--hover); }
.pagination .pg-btn.on{
  background: var(--brand); color: #fff;
  font-weight: 500;
}
.pagination .pg-btn:disabled{ color: var(--ink-5); cursor: not-allowed; }
.pagination .pg-arrow{
  border: 1px solid var(--border);
  background: var(--surface);
  width: 32px; height: 32px;
  display: grid; place-items: center;
}
.pagination .pg-arrow:hover:not(:disabled){ border-color: var(--border-strong); background: var(--hover); }
.pagination .pg-ellipsis{
  padding: 0 4px; color: var(--ink-4);
}
.pagination .page-size{ display: flex; align-items: center; gap: 8px; font-size: 12.5px; }

/* ============================================================
   INCIDENT DETAIL
   ============================================================ */
.detail{
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 20px;
  margin-bottom: 20px;
  align-items: start;
}
.hero{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
}
.hero-top{
  display: flex; align-items: center; gap: 8px;
  color: var(--ink-3);
  font-size: 12.5px;
  margin-bottom: 10px;
}
.hero-top a{ color: var(--brand); text-decoration: none; cursor: pointer; }
.hero-top a:hover{ text-decoration: underline; }
.hero-top .sep{ color: var(--ink-5); }
.hero h1{
  margin: 0 0 8px;
  font-size: 22px; font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
}
.hero .meta{
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-bottom: 18px;
}

.metrics-row{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  border-top: 1px solid var(--border);
  padding-top: 18px;
}
.metric{ padding-right: 12px; }
.metric + .metric{ border-left: 1px solid var(--border); padding-left: 16px; }
.metric .k{
  font-size: 11.5px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 6px;
  font-weight: 500;
  min-height: 32px;
  line-height: 1.3;
}
.metric .v{
  font-size: 18px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  line-height: 1.2;
}
.metric .u{ font-size: 12px; color: var(--ink-3); font-weight: 400; margin-left: 3px; }
.metric.crit .v{ color: var(--crit); }
.metric.warn .v{ color: var(--warn); }

/* side details card */
.side-facts{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.side-facts .head{
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between;
}
.side-facts .kv{
  padding: 14px 16px;
}
.side-facts .row{
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 13px;
}
.side-facts .row:last-child{ border-bottom: 0; }
.side-facts .row .k{ color: var(--ink-3); }
.side-facts .row .v{ color: var(--ink); font-weight: 500; font-family: var(--mono); font-size: 12.5px; }

/* ============================================================
   RANKED CREWS — clean card list
   ============================================================ */
.rank-section{
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 20px;
  align-items: start;
}

.rank-list{ display: flex; flex-direction: column; gap: 10px; }

.rank-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 16px;
  align-items: center;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
  box-shadow: var(--shadow-sm);
}
.rank-card:hover{
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
}
.rank-card.selected{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(26,86,219,.12);
}
.rank-card.top{
  border-color: rgba(26,86,219,.35);
  background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
}

.rank-num{
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--ink-2);
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
}
.rank-card.top .rank-num{
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  box-shadow: 0 3px 8px rgba(26,86,219,.25);
}

.crew-info .name{
  font-size: 15px; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
  letter-spacing: -.01em;
}
.crew-info .name .id{ font-family: var(--mono); font-size: 13px; color: var(--ink-3); font-weight: 400; }
.crew-info .facts{
  display: flex; align-items: center; gap: 6px;
  color: var(--ink-3); font-size: 12.5px;
  flex-wrap: wrap;
}
.crew-info .facts .sep{ color: var(--ink-5); }

.score-box{
  text-align: right;
}
.score-num{
  font-size: 24px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  letter-spacing: -.02em;
  line-height: 1;
}
.rank-card.top .score-num{ color: var(--brand); }
.score-num .pct{ font-size: 13px; color: var(--ink-3); font-weight: 400; }
.score-sub{ font-size: 11.5px; color: var(--ink-3); margin-top: 4px; text-transform: uppercase; letter-spacing: .06em; }

/* composition bar (thin, below the row) */
.rank-comp{
  grid-column: 2 / 4;
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 4px;
}
.comp-track{
  display: flex; height: 8px; border-radius: 4px;
  background: var(--surface-2); overflow: hidden;
  border: 1px solid var(--border);
}
.comp-track .seg{
  transition: width .5s cubic-bezier(.2,.7,.3,1);
}
.comp-track .seg-crit{ background: var(--c-crit); }
.comp-track .seg-zone{ background: var(--c-zone); }
.comp-track .seg-type{ background: var(--c-type); }
.comp-track .seg-load{ background: var(--c-load); }
.comp-legend{
  display: flex; gap: 14px;
  font-size: 11px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.comp-legend .item{ display: flex; align-items: center; gap: 5px; }
.comp-legend .item .sw{ width: 8px; height: 8px; border-radius: 2px; }

/* action row under list */
.rank-action-row{
  margin-top: 14px;
  padding: 14px 18px;
  background: var(--brand-soft);
  border: 1px solid rgba(26,86,219,.2);
  border-radius: var(--radius);
  display: flex; align-items: center; gap: 12px;
  font-size: 13.5px; color: var(--brand-ink);
}
.rank-action-row .msg{ flex: 1; }
.rank-action-row .msg b{ color: var(--brand-ink); }

/* ============================================================
   EXPLAIN + MAP (side by side under ranking)
   ============================================================ */
.explain-card .card-body{ padding: 20px; }
.explain-crew{
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 12px;
}
.explain-crew .name{
  font-size: 16px; font-weight: 600; color: var(--ink);
}
.explain-crew .id{ font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); }
.narrative{
  padding: 14px 16px;
  background: var(--brand-soft);
  border-left: 3px solid var(--brand);
  border-radius: 4px;
  color: var(--brand-ink);
  font-size: 13.5px;
  line-height: 1.55;
  margin-bottom: 18px;
}
.narrative b{ color: var(--brand-ink); font-weight: 600; }
.narrative em{ font-style: normal; font-weight: 600; }

.components{ display: flex; flex-direction: column; gap: 14px; }
.component{
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 14px;
  align-items: center;
}
.component .label{
  font-size: 12.5px;
  color: var(--ink);
  font-weight: 500;
  display: flex; align-items: center; gap: 6px;
}
.component .label .sw{ width: 10px; height: 10px; border-radius: 3px; }
.component .bar{
  height: 8px; border-radius: 4px;
  background: var(--surface-2); border: 1px solid var(--border);
  overflow: hidden;
}
.component .bar .fill{ height: 100%; transition: width .5s cubic-bezier(.2,.7,.3,1); }
.component .math{
  font-family: var(--mono);
  font-size: 12px; color: var(--ink-3);
  white-space: nowrap;
  text-align: right;
}
.component .math .final{ color: var(--ink); font-weight: 500; }

.total-line{
  margin-top: 16px; padding-top: 16px;
  border-top: 1px dashed var(--border);
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono); font-size: 13px;
}
.total-line .k{ color: var(--ink-3); }
.total-line .v{ color: var(--brand); font-weight: 600; font-size: 18px; font-variant-numeric: tabular-nums; }

/* ============================================================
   ZONE MAP (light theme)
   ============================================================ */
.map-wrap{
  aspect-ratio: 4/3;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f4f8 100%);
  position: relative;
}
.map-svg{ width: 100%; height: 100%; display: block; }
.map-grid line{ stroke: rgba(15,23,42,.04); stroke-width: .5; }
.zone-region{
  fill: currentColor;
  fill-opacity: .08;
  stroke: currentColor;
  stroke-opacity: .35;
  stroke-width: 1;
  stroke-dasharray: 3 2;
}
.zone-region.match{
  fill-opacity: .22;
  stroke-opacity: 1;
  stroke-dasharray: none;
  stroke-width: 1.4;
}
.zone-region.adjacent{
  fill-opacity: .13;
  stroke-opacity: .55;
}
.zone-label{
  font-family: var(--sans);
  font-size: 2.6px; letter-spacing: .04em;
  fill: var(--ink-3);
  text-anchor: middle;
  font-weight: 500;
  pointer-events: none;
}
.zone-label.active{ fill: var(--brand); font-weight: 700; }
.zone-label.hidden-under-pin{ display: none; }

.incident-pulse{
  fill: none; stroke: var(--crit); stroke-width: 1;
  animation: incidentPulse 1.8s infinite ease-out;
}
@keyframes incidentPulse{
  0%{ r: 3; opacity: 1; } 100%{ r: 12; opacity: 0; }
}
.crew-pin-halo{
  fill: none; stroke: var(--brand); stroke-width: .8;
  animation: crewPulse 2.2s infinite ease-out;
}
@keyframes crewPulse{
  0%{ r: 3; opacity: .8; } 100%{ r: 10; opacity: 0; }
}
.map-legend{
  padding: 12px 16px;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  display: flex; gap: 18px;
  font-size: 12px; color: var(--ink-3);
}
.map-legend .item{ display: flex; align-items: center; gap: 6px; }
.map-legend .sw{ width: 10px; height: 10px; border-radius: 50%; }

/* ============================================================
   WEIGHT LAB
   ============================================================ */
.lab-formula{
  padding: 14px 18px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-2);
  overflow-x: auto;
  white-space: nowrap;
}
.lab-formula .op{ color: var(--ink-4); margin: 0 3px; }
.lab-formula .var{ color: var(--ink); font-weight: 500; }

.presets{
  display: flex; gap: 8px; margin-bottom: 16px;
  flex-wrap: wrap;
}
.preset{
  padding: 10px 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 8px;
  font-size: 13px;
  color: var(--ink-2);
  transition: all .12s;
  text-align: left;
  cursor: pointer;
}
.preset:hover{ border-color: var(--border-strong); background: var(--hover); }
.preset.on{
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-ink);
  box-shadow: 0 0 0 3px rgba(26,86,219,.12);
}
.preset{ min-width: 180px; }
.preset .p-label{ font-weight: 600; font-size: 13px; display: block; white-space: nowrap; }
.preset .p-desc{ font-size: 11.5px; color: var(--ink-3); margin-top: 2px; display: block; }
.preset.on .p-desc{ color: var(--brand-ink); opacity: .8; }

.sliders{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.slider{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}
.slider-head{
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
}
.slider-head .sw{ width: 10px; height: 10px; border-radius: 3px; }
.slider-head .lbl{ font-size: 13px; font-weight: 500; color: var(--ink); flex: 1; }
.slider-head .val{ font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.slider input[type=range]{
  width: 100%;
  -webkit-appearance: none; appearance: none;
  background: transparent;
  margin: 0; padding: 0;
}
.slider input[type=range]::-webkit-slider-runnable-track{
  height: 4px; background: #dfe2e8; border-radius: 2px;
}
.slider input[type=range]::-moz-range-track{
  height: 4px; background: #dfe2e8; border-radius: 2px;
}
.slider input[type=range]::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--brand);
  margin-top: -6px;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
  cursor: pointer;
}
.slider input[type=range]::-moz-range-thumb{
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--brand);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.slider .desc{ font-size: 11.5px; color: var(--ink-3); margin-top: 8px; line-height: 1.4; }

.lab-sum{
  margin-top: 16px;
  padding: 10px 14px;
  background: var(--ok-soft);
  border: 1px solid rgba(15,143,91,.2);
  border-radius: 8px;
  font-size: 13px;
  color: var(--ok);
  display: flex; align-items: center; gap: 8px;
}
.lab-sum.notlocked{ background: var(--warn-soft); color: var(--warn); border-color: rgba(178,106,0,.2); }
.lab-sum .val{ font-family: var(--mono); font-weight: 600; }

/* ============================================================
   COVERAGE TAB
   ============================================================ */
.two-col{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.cov-item{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
.cov-item + .cov-item{ margin-top: 10px; }
.cov-row{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 12px; }
.cov-name{ font-size: 13.5px; color: var(--ink); font-weight: 500; white-space: nowrap; }
.cov-pct{ font-family: var(--mono); font-size: 14px; font-weight: 600; }
.cov-bar{ height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.cov-bar .fill{ height: 100%; transition: width .8s cubic-bezier(.2,.7,.3,1); }
.cov-good .cov-pct{ color: var(--ok); } .cov-good .fill{ background: var(--ok); }
.cov-ok .cov-pct{ color: var(--info); } .cov-ok .fill{ background: var(--info); }
.cov-warn .cov-pct{ color: var(--warn); } .cov-warn .fill{ background: var(--warn); }
.cov-gap .cov-pct{ color: var(--crit); } .cov-gap .fill{ background: var(--crit); }

.gap-item{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  box-shadow: var(--shadow-sm);
}
.gap-item + .gap-item{ margin-top: 10px; }
.gap-row{
  display: flex; justify-content: space-between; margin-bottom: 4px;
  align-items: baseline;
  gap: 12px;
}
.gap-name{ font-size: 13.5px; color: var(--ink); font-weight: 500; white-space: nowrap; }
.gap-cov{ font-family: var(--mono); font-size: 12.5px; color: var(--crit); font-weight: 500; }
.gap-impact{ color: var(--ink-3); font-size: 12.5px; }

/* ============================================================
   CREW ROSTER
   ============================================================ */
.crew-hist{
  display: inline-flex; gap: 2px;
  vertical-align: middle;
}
.crew-hist .hs{
  width: 40px; height: 6px; border-radius: 1.5px;
}
.roster-facts{
  display: flex; gap: 4px; align-items: center;
  font-size: 12px; color: var(--ink-3);
}

/* ============================================================
   FORMULA TAB
   ============================================================ */
.formula-hero{
  background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  text-align: center;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}
.formula-hero .label{
  font-size: 11.5px; color: var(--ink-3); font-weight: 500;
  text-transform: uppercase; letter-spacing: .1em;
  margin-bottom: 16px;
}
.formula-hero .expr{
  font-family: var(--mono);
  font-size: 18px;
  color: var(--ink);
  overflow-x: auto;
  white-space: nowrap;
  padding-bottom: 8px;
}
.formula-hero .expr .op{ color: var(--ink-4); margin: 0 6px; }
.formula-hero .expr .cWEIGHT{ color: var(--ink-3); }
.formula-hero .expr .cCrit{ color: var(--c-crit); }
.formula-hero .expr .cZone{ color: var(--c-zone); }
.formula-hero .expr .cType{ color: var(--c-type); }
.formula-hero .expr .cLoad{ color: var(--c-load); }
.formula-hero .constraint{
  margin-top: 20px;
  font-size: 12.5px; color: var(--ink-3);
  font-family: var(--mono);
}
.formula-hero .constraint code{
  background: var(--surface-2); padding: 2px 8px; border-radius: 4px;
  color: var(--ink-2);
}

.feature-grid{
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
.feature-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  border-top: 3px solid;
  position: relative;
}
.feature-card .fname{
  font-family: var(--mono);
  font-size: 15px; font-weight: 600;
  color: var(--ink);
  margin: 0 0 4px;
}
.feature-card .fdomain{
  font-size: 11.5px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 12px;
}
.feature-card .fdef{
  font-size: 13.5px; color: var(--ink-2);
  line-height: 1.55;
  margin-bottom: 14px;
}
.feature-card .fsources{
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-3);
  padding-top: 12px; border-top: 1px dashed var(--border);
}
.feature-card .fsources .k{ text-transform: uppercase; letter-spacing: .08em; font-size: 10.5px; }
.feature-card .fw{
  position: absolute; top: 20px; right: 20px;
  font-size: 11px; color: var(--ink-3);
  font-family: var(--mono);
}

/* ============================================================
   MODALS + TOAST
   ============================================================ */
.modal-scrim{
  position: fixed; inset: 0;
  background: rgba(15,23,42,.45);
  backdrop-filter: blur(3px);
  z-index: 200;
  display: grid; place-items: center;
  animation: fade .18s;
}
@keyframes fade{ from{ opacity: 0; } }
.modal{
  width: min(560px, 92vw);
  background: var(--surface);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(15,23,42,.25);
  animation: rise .22s cubic-bezier(.2,.7,.3,1);
}
@keyframes rise{ from{ transform: translateY(8px); opacity: 0; } }
.modal-head{
  padding: 20px 24px 4px;
  display: flex; align-items: center; gap: 12px;
}
.modal-head h3{ margin: 0; font-size: 16px; font-weight: 600; color: var(--ink); flex: 1; }
.modal-head .close{ color: var(--ink-3); }
.modal-head .close:hover{ color: var(--ink); }
.modal-body{ padding: 8px 24px 20px; color: var(--ink-2); font-size: 14px; }
.modal-body p{ margin: 8px 0 12px; }
.modal-body .kv{
  background: var(--surface-2);
  border-radius: 8px;
  padding: 14px 16px;
  display: grid; grid-template-columns: 130px 1fr;
  gap: 8px 14px;
  font-size: 13px;
  margin: 12px 0;
}
.modal-body .kv .k{ color: var(--ink-3); }
.modal-body .kv .v{ color: var(--ink); font-family: var(--mono); font-size: 12.5px; }
.checklist{
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 16px;
  background: var(--ok-soft);
  border-radius: 8px;
  margin: 12px 0;
}
.checklist .item{ display: flex; align-items: center; gap: 10px; color: var(--ok); font-size: 13px; }
.check-icon{
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--ok); color: #fff;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.modal-actions{
  padding: 14px 20px;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 8px;
}

.toast{
  position: fixed;
  bottom: 30px; left: 50%; transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  border-radius: 10px;
  padding: 12px 18px;
  display: flex; align-items: center; gap: 10px;
  z-index: 300;
  font-size: 13.5px;
  box-shadow: var(--shadow-lg);
  animation: rise .22s cubic-bezier(.2,.7,.3,1);
}
.toast .led{ width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(15,143,91,.3); }

/* ============================================================
   TWEAKS PANEL
   ============================================================ */
.tweaks{
  position: fixed;
  right: 24px; top: 76px;
  width: 320px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  z-index: 80;
  display: none;
  overflow: hidden;
}
.tweaks.open{ display: block; }
.tweaks-head{
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 14px; font-weight: 600; color: var(--ink);
}
.tweaks-body{ padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.tweak{ display: flex; flex-direction: column; gap: 6px; }
.tweak .lbl{ font-size: 12.5px; color: var(--ink-2); font-weight: 500; }
.tweak-row{
  display: flex; align-items: center; gap: 10px;
}
.tweak-row .lbl{ flex: 1; }
.tweak select, .tweak input[type=number]{
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  outline: none;
  background: var(--surface);
}
.tweak select:focus, .tweak input:focus{ border-color: var(--brand); box-shadow: 0 0 0 3px rgba(26,86,219,.12); }

/* ============================================================
   MISC
   ============================================================ */
.section-title{
  font-size: 12px; font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 24px 0 12px;
  display: flex; align-items: center; gap: 10px;
}
.section-title .count{
  padding: 2px 8px;
  background: var(--surface-2);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.empty{
  padding: 60px 20px;
  text-align: center;
  color: var(--ink-3);
}
.empty .big{ font-size: 15px; color: var(--ink-2); margin-bottom: 6px; font-weight: 500; }

/* responsive-ish */
@media (max-width: 1100px){
  .detail, .rank-section{ grid-template-columns: 1fr; }
  .metrics-row{ grid-template-columns: repeat(3, 1fr); }
  .metric + .metric{ border-left: 0; padding-left: 0; }
  .sliders{ grid-template-columns: repeat(2, 1fr); }
  .two-col, .feature-grid{ grid-template-columns: 1fr; }
}