.db-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.db-tools select, .db-tools input { padding: 7px 10px; background: rgba(16,12,22,.9); color: var(--text); border: 1px solid var(--hud-line); font: inherit; font-size: .85rem; }
.db-tools #search { margin-left: auto; width: min(100%, 16rem); }
.db-tools #sortSel { display: none; }
.feats { margin-top: 10px; }
.feats button { --f: var(--thruster); }
.feats button[aria-pressed="true"] { background: var(--thruster); border-color: var(--thruster); }
.db-bar { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.colbtn { font: 600 .66rem/1 var(--hud); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); background: none; border: 1px solid var(--hud-line); padding: 7px 10px; cursor: pointer; }
.db-cols { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--hud-line); background: rgba(16,12,22,.9); font-size: .82rem; }
/* No scroll box by default, so the header row sticks to the top of the window while the page scrolls.
   shipdb.js adds .scrollx only when the table is wider than the page (then it scrolls inside a window-high box, header still frozen at its top). */
.db-scroll { overflow: visible; border: 1px solid var(--hud-line); background: rgba(14,10,20,.88); }
table.db { width: 100%; border-collapse: collapse; font-size: .82rem; }
table.db td { white-space: nowrap; }
table.db th { position: sticky; top: 0; z-index: 1; background: #17111f; text-align: left; vertical-align: bottom; padding: 8px 7px; font: 500 .58rem/1.3 var(--hud); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); cursor: pointer; user-select: none; border-bottom: 1px solid var(--cyan); }
table.db th:hover { color: var(--text); }
table.db th[aria-sort] { color: var(--cyan); }
table.db th[aria-sort="ascending"]::after { content: " ▲"; }
table.db th[aria-sort="descending"]::after { content: " ▼"; }
table.db td { padding: 6px 7px; border-top: 1px solid rgba(181,124,255,.12); }
table.db tbody tr:hover td { background: rgba(84,232,255,.06); }
table.db .num { text-align: right; font-variant-numeric: tabular-nums; }
table.db th.num { text-align: right; }
table.db td:first-child, table.db th:first-child { position: sticky; left: 0; background: #130e1b; z-index: 2; }
table.db th:first-child { z-index: 3; background: #17111f; }
.db-scroll.scrollx { overflow: auto; max-height: calc(100vh - 16px); }
.nm { font: 400 .95rem/1.2 var(--sc-font); letter-spacing: .06em; text-transform: uppercase; color: var(--text); }
.mk2 { display: block; font: 500 .64rem/1.4 var(--hud); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.st { font: 600 .68rem/1 var(--hud); letter-spacing: .1em; text-transform: uppercase; padding: 4px 6px; border: 1px solid; }
.st.fr { color: #6dffb0; } .st.cn { color: #ffb43a; }
.ic { display: inline-flex; flex-wrap: wrap; gap: 3px; max-width: 10rem; }
.ic span { font: 600 .66rem/1 var(--hud); letter-spacing: .06em; padding: 4px 5px; color: var(--thruster); border: 1px solid color-mix(in srgb, var(--thruster) 50%, transparent); }
.dim { color: var(--muted); }
.agil { font-variant-numeric: tabular-nums; }
.loan { display: block; white-space: normal; min-width: 8rem; max-width: 11rem; font-size: .78rem; color: var(--muted); }
.db-cards { display: none; }
@media (max-width: 760px) {
  .db-tools #search { margin-left: 0; width: 100%; order: -1; }
  .db-tools select { flex: 1 1 45%; }
  .db-tools #sortSel { display: block; }
  .db-scroll, .colbtn { display: none; }
  .db-cards { display: grid; gap: 10px; }
  .card { padding: 14px; border: 1px solid var(--hud-line); border-top: 2px solid var(--cyan); background: rgba(16,12,22,.92); }
  .card .top { display: flex; justify-content: space-between; gap: 8px; align-items: start; }
  .card dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 10px; margin: 12px 0 10px; }
  .card dt { font: 500 .55rem/1.2 var(--hud); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  .card dd { margin: 2px 0 0; font-size: .88rem; font-variant-numeric: tabular-nums; }
  .card .loan { margin-top: 8px; }
}
.nmw { display: flex; align-items: center; gap: 12px; }
.th { width: 80px; height: 45px; object-fit: cover; flex: none; border: 1px solid var(--hud-line); background: #0b0710; }
@media (max-width: 760px) {
  .card { position: relative; isolation: isolate; overflow: hidden; }
  .card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 9rem; z-index: -1;
    background: linear-gradient(0deg, rgba(16,12,22,1) 0, rgba(16,12,22,.3) 60%, transparent), var(--pic) center 40% / cover no-repeat; }
  .card .th { display: none; }
  .card .top { padding-top: 5.5rem; }
  .card .nm { text-shadow: 0 1px 6px #0b0710; }
}
table.db td:has(.loan) { white-space: normal; }
.nmw .nm { white-space: normal; }
/* Margins grow with the window: slim (16px) when the table needs the room, wider on big screens so rows stay readable (content tops out near 1700px). */
.db-page .wrap { max-width: none; padding-inline: max(16px, (100vw - 1700px) / 2); }
a.nm { text-decoration: none; }
a.nm:hover { color: var(--cyan); }
.db-cols label { cursor: pointer; }
.card .ic { margin-top: 2px; }
.th.none { visibility: hidden; }
/* Min-max price boxes */
.rng { display: inline-flex; align-items: center; gap: 5px; padding: 0 0 0 9px; border: 1px solid var(--hud-line); background: rgba(16,12,22,.9); }
.rng span { font: 600 .6rem/1 var(--hud); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.rng i { font-style: normal; color: var(--muted); }
.db-tools .rng input { width: 5.2rem; border: 0; border-left: 1px solid rgba(181,124,255,.18); background: transparent; font-variant-numeric: tabular-nums; }
.db-tools .rng input:focus { outline: 1px solid var(--cyan); outline-offset: -1px; }
.db-tools .rng input.bad { color: #ff7a7a; }
.rng:focus-within { border-color: var(--cyan); }
@media (max-width: 760px) {
  .rng { flex: 1 1 100%; }
  .db-tools .rng input { flex: 1; width: 0; min-width: 0; }
  .rng span { min-width: 3.6rem; }
}