/* ─── Design Tokens ─────────────────────────────────────────────── */
:root {
  /* Surfaces */
  --bg:               #ebf2ee;
  --surface:          #ffffff;
  --surface-soft:     #f5faf7;
  --surface-muted:    #edf4f0;
  --ink:              #0d1e17;
  --ink-soft:         #243b31;
  --muted:            #4e6a5f;
  --line:             #c9d9d2;
  --line-soft:        #e1ede8;

  /* Brand */
  --accent:           #0b7a6e;
  --accent-dark:      #085e54;
  --accent-light:     #13a897;
  --accent-glow:      rgba(11,122,110,.16);
  --accent-glow-sm:   rgba(11,122,110,.08);

  /* CE (Calls – green) */
  --ce:               #057a50;
  --ce-bg:            #e4f7ec;
  --ce-border:        #64bb8e;

  /* PE (Puts – rose) */
  --pe:               #b5344e;
  --pe-bg:            #fde6eb;
  --pe-border:        #d984a0;

  /* Info column */
  --info-border:      #81a0ba;
  --dataset-border:   #79898e;

  /* Misc */
  --warn:             #895a00;
  --soft-gold:        #f3e4b5;

  /* Live indicator */
  --live-color:       #22c55e;

  /* Shadows */
  --shadow-xs:  0 1px 3px rgba(10,35,25,.06);
  --shadow-sm:  0 2px 10px rgba(10,35,25,.08), 0 1px 3px rgba(0,0,0,.04);
  --shadow-md:  0 6px 28px rgba(10,35,25,.10), 0 2px 8px rgba(0,0,0,.05);
  --shadow-lg:  0 18px 52px rgba(10,35,25,.13), 0 4px 14px rgba(0,0,0,.06);

  /* Radii */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  22px;

  /* Motion */
  --ease:     0.16s cubic-bezier(.4,0,.2,1);
  --ease-out: 0.22s cubic-bezier(0,0,.2,1);
}

/* ─── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  min-height: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background:
    radial-gradient(ellipse 70% 50% at 0% 0%,   rgba(160,230,200,.50) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 100% 0%,  rgba(255,218,140,.45) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 100%, rgba(180,210,240,.30) 0%, transparent 60%),
    linear-gradient(155deg, #d6ebe0 0%, #e5dfd4 55%, var(--bg) 100%);
  background-attachment: fixed;
}

button, input, select { font: inherit; }

/* ─── Form Controls ─────────────────────────────────────────────── */
button {
  border: none;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  font-weight: 700;
  font-size: .84rem;
  letter-spacing: .01em;
  min-height: 40px;
  padding: 0 18px;
  transition: background var(--ease), transform var(--ease), box-shadow var(--ease);
  white-space: nowrap;
}
button:hover {
  background: var(--accent-dark);
  box-shadow: 0 6px 20px var(--accent-glow);
  transform: translateY(-1px);
}
button:active { transform: translateY(0); }

input, select {
  width: 100%;
  min-height: 40px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  padding: 0 12px;
  outline: none;
  font-weight: 500;
  transition: border-color var(--ease), box-shadow var(--ease), background var(--ease);
}
input::placeholder { color: #9db6ad; font-weight: 400; }
input:hover, select:hover { border-color: #a6c2b8; }
input:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
  background: var(--surface);
}
input:disabled, select:disabled {
  cursor: not-allowed;
  opacity: .6;
  background: #dfe8e3;
}

/* ─── Shell ─────────────────────────────────────────────────────── */
.shell {
  width: 100%;
  max-width: 100%;
  padding: 12px 16px 24px;
  overflow-x: hidden;
}

/* ─── Topbar ─────────────────────────────────────────────────────── */
.topbar {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 20px;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(255,255,255,.70);
  border-radius: var(--r-lg);
  box-shadow:
    var(--shadow-md),
    inset 0 1px 0 rgba(255,255,255,.80);
  padding: 16px 22px;
  position: sticky;
  top: 8px;
  z-index: 30;
}

/* Title block */
.title-block { min-width: 0; }

.title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.logout-button {
  margin-left: auto;
  min-height: 32px;
  padding: 0 14px;
  font-size: .76rem;
}

h1 {
  margin: 0;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -.03em;
  line-height: 1.15;
  white-space: nowrap;
}

.title-sub {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* Live badge */
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(34,197,94,.10);
  border: 1px solid rgba(34,197,94,.30);
  border-radius: 20px;
  padding: 3px 9px 3px 7px;
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .08em;
  color: #16a34a;
  text-transform: uppercase;
  flex-shrink: 0;
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--live-color);
  animation: pulse-live 2.2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes pulse-live {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34,197,94,.6); }
  50%       { opacity: .85; box-shadow: 0 0 0 5px rgba(34,197,94,0); }
}

/* ─── Index Strip ────────────────────────────────────────────────── */
.index-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

/* Index cards — per-index color identity via data attributes */
[data-index-card="NIFTY"]     { --ic-color: #0b7a6e; --ic-light: rgba(11,122,110,.08); --ic-border: rgba(11,122,110,.20); --ic-grad: linear-gradient(140deg, #f0fdf9 0%, #ccf5e8 100%); }
[data-index-card="BANKNIFTY"] { --ic-color: #1d4ed8; --ic-light: rgba(29,78,216,.08);  --ic-border: rgba(29,78,216,.20);  --ic-grad: linear-gradient(140deg, #eff6ff 0%, #c7d9fc 100%); }
[data-index-card="FINNIFTY"]  { --ic-color: #7c3aed; --ic-light: rgba(124,58,237,.08); --ic-border: rgba(124,58,237,.20); --ic-grad: linear-gradient(140deg, #faf5ff 0%, #ddd6fe 100%); }
[data-index-card="SENSEX"]    { --ic-color: #c05621; --ic-light: rgba(192,86,33,.08);  --ic-border: rgba(192,86,33,.20);  --ic-grad: linear-gradient(140deg, #fffbeb 0%, #fddba8 100%); }
[data-index-card="VIX"]       { --ic-color: #0369a1; --ic-light: rgba(3,105,161,.08);  --ic-border: rgba(3,105,161,.20);  --ic-grad: linear-gradient(140deg, #f0f9ff 0%, #bae6fd 100%); }

.index-card {
  display: grid;
  gap: 2px;
  background: var(--ic-grad);
  border: 1.5px solid var(--ic-border);
  border-top: 3px solid var(--ic-color);
  border-radius: var(--r-md);
  padding: 11px 13px 10px;
  transition: box-shadow var(--ease), transform var(--ease-out);
  min-height: 78px;
}
.index-card:hover {
  box-shadow: 0 4px 16px var(--ic-light), 0 2px 6px rgba(0,0,0,.06);
  transform: translateY(-2px);
}

.index-card__label {
  color: var(--ic-color);
  font-size: .65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  opacity: .80;
}

.index-card strong {
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  line-height: 1.2;
}

.index-card small {
  font-size: .73rem;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.index-card.up small   { color: var(--ce); }
.index-card.down small { color: var(--pe); }

/* ─── Workspace ─────────────────────────────────────────────────── */
.workspace {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  min-width: 0;
}

/* ─── Toolbar ───────────────────────────────────────────────────── */
.toolbar {
  display: grid;
  grid-template-columns: 180px 1fr minmax(160px, 200px) auto;
  gap: 12px;
  align-items: end;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 14px 16px;
}

.field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.field > span {
  color: var(--muted);
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.expiry-field { max-width: 180px; }

/* Search with icon */
.search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}
.search-icon {
  position: absolute;
  left: 11px;
  display: flex;
  align-items: center;
  color: var(--muted);
  pointer-events: none;
  z-index: 1;
}
.search-wrap input {
  padding-left: 35px;
  padding-right: 12px;
}

/* OTM control */
.inline-control {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
}
.otm-control { grid-template-columns: 1fr 52px; }
.compact-button { min-width: 52px; padding: 0 10px; }

/* Toolbar actions */
.toolbar-actions {
  display: flex;
  align-items: flex-end;
  min-width: 0;
}
.toolbar-actions button { width: 100%; }

.sync-button { background: var(--accent); font-size: .84rem; }
.sync-button.is-loading, button:disabled {
  cursor: wait;
  opacity: .6;
  transform: none;
  box-shadow: none;
}

.secondary-button { background: #2b4438; font-weight: 600; }
.secondary-button:hover { background: #1c322a; }
.secondary-button:disabled { cursor: not-allowed; opacity: .4; transform: none; box-shadow: none; }

/* ─── Matrix Panel ──────────────────────────────────────────────── */
.matrix-panel {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  min-width: 0;
  overflow: hidden;
}

.matrix-head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 16px;
  border-bottom: 1.5px solid var(--line);
  padding: 14px 18px;
  background: linear-gradient(135deg, var(--surface) 0%, #eef5f0 100%);
}

.matrix-title { display: grid; gap: 3px; min-width: 0; }

h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.02em;
}

.matrix-meta {
  color: var(--muted);
  font-size: .77rem;
  font-weight: 500;
}

.matrix-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  justify-content: flex-end;
}

/* OTM strip */
.otm-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-muted);
  padding: 8px 12px;
  min-width: 0;
}
.otm-strip > span {
  color: var(--muted);
  font-size: .66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  white-space: nowrap;
}

/* ─── Chips ─────────────────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  border: 1.5px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  color: var(--ink);
  font-size: .78rem;
  font-weight: 600;
  padding: 3px 10px;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--ease), transform var(--ease);
}
.chip:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }

.chip button {
  display: inline-grid;
  place-items: center;
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  border-radius: 50%;
  background: #dde7e2;
  color: var(--muted);
  padding: 0;
  font-size: .7rem;
  font-weight: 700;
}
.chip button:hover { background: #c6d3ce; color: var(--ink); transform: none; box-shadow: none; }

.chips-compact {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
  margin: 0;
  padding: 2px 0;
}

/* ─── Pagination Bar ────────────────────────────────────────────── */
.pagination-bar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  border-bottom: 1.5px solid var(--line);
  background: var(--surface-soft);
  padding: 9px 16px;
}

.page-status {
  color: var(--muted);
  font-size: .79rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pagination-controls button { min-width: 70px; min-height: 36px; font-size: .8rem; }

.page-jump {
  display: flex;
  align-items: center;
  gap: 6px;
}
.page-jump span {
  color: var(--muted);
  font-size: .66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}
.page-jump input {
  width: 64px;
  min-height: 36px;
  text-align: center;
  padding: 0 8px;
}

/* ─── Table ─────────────────────────────────────────────────────── */
.table-wrap {
  position: relative;
  max-height: calc(100vh - 240px);
  min-height: 400px;
  overflow: auto;
  width: 100%;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.table-wrap::-webkit-scrollbar { width: 6px; height: 6px; }
.table-wrap::-webkit-scrollbar-track { background: transparent; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }

table {
  width: 100%;
  min-width: 1160px;
  border-collapse: separate;
  border-spacing: 0;
}

th, td {
  height: 36px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 6px 10px;
  text-align: right;
  white-space: nowrap;
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
}

/* Dataset column borders */
th.dataset-start, td.dataset-start { border-left: 2.5px solid var(--dataset-border); }
th.dataset-end,   td.dataset-end   { border-right: 2.5px solid var(--dataset-border); }
th.dataset-ce, td.dataset-ce { border-left-color: var(--ce-border); border-right-color: var(--ce-border); }
th.dataset-pe, td.dataset-pe { border-left-color: var(--pe-border); border-right-color: var(--pe-border); }
th.dataset-info, td.dataset-info { border-left-color: var(--info-border); border-right-color: var(--info-border); }

td { background: rgba(255,255,255,.78); }

/* ─── ATM / OTM Band Colors ─────────────────────────────────────── */
td.band-atm    { background: #fef5c0; }   /* warm amber  — ATM    */
td.band-otm-10 { background: #dbeafe; }   /* soft blue   — 10% OTM */
td.band-otm-15 { background: #ede9fe; }   /* soft violet — 15% OTM */

/* Row hover */
tbody tr { transition: filter var(--ease); }
tbody tr:hover td {
  background: #fffadf;
  box-shadow: inset 0 1px 0 #f0d76d, inset 0 -1px 0 #f0d76d;
}
tbody tr:hover td:first-child {
  box-shadow: inset 3px 0 0 var(--accent), inset 0 1px 0 #f0d76d, inset 0 -1px 0 #f0d76d;
}

/* Sticky headers */
th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #dfe9e5;
  color: #1c3428;
  font-size: .71rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
thead tr:nth-child(2) th { top: 36px; }
thead tr:nth-child(3) th { top: 72px; }

/* Group header colours */
.group-ce   { background: #d4f0e2; color: #055a3b; }
.group-pe   { background: #fad9e4; color: #8c1f38; }
.group-info { background: #dbe9f7; color: #1a4f7a; }
.sub-ce     { background: #e8f8f0; color: var(--ce); }
.sub-pe     { background: #fce8ed; color: var(--pe); }

/* Sort buttons */
.sort-header {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  width: 100%;
  min-height: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1.1;
  padding: 2px 0;
  text-align: right;
  text-transform: inherit;
  letter-spacing: inherit;
}
.sort-header:hover {
  background: rgba(11,122,110,.12);
  box-shadow: none;
  transform: none;
}
.sort-header.is-active { color: var(--accent-dark); }
.sort-header__icon { color: var(--muted); font-size: .6rem; letter-spacing: 0; }

/* ─── Stock name cell ────────────────────────────────────────────── */
.cell-stock-name {
  font-weight: 800;
  font-size: .82rem;
  color: var(--ink);
  letter-spacing: -.01em;
}

.stock-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #e3f2f5 0%, #d0e8f5 100%);
  border: 1.5px solid #aed3e6;
  border-radius: 20px;
  padding: 2px 10px 2px 8px;
  font-weight: 800;
  font-size: .79rem;
  color: #09466a;
  letter-spacing: -.005em;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(9,70,106,.08);
}

/* ─── % Change badge ─────────────────────────────────────────────── */
.change-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  padding: 3px 9px;
  border-radius: 20px;
  font-weight: 700;
  font-size: .77rem;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
.change-badge.positive {
  background: var(--ce-bg);
  color: var(--ce);
  border: 1.5px solid rgba(5,122,80,.18);
}
.change-badge.negative {
  background: var(--pe-bg);
  color: var(--pe);
  border: 1.5px solid rgba(181,52,78,.15);
}

/* ─── Misc cell classes ─────────────────────────────────────────── */
.left     { text-align: left; }
.price-ce { color: var(--ce); font-weight: 700; }
.price-pe { color: var(--pe); font-weight: 700; }
.price-fallback {
  text-decoration: underline dotted currentColor;
  text-underline-offset: 3px;
}
.positive { color: var(--ce); font-weight: 700; }
.negative { color: var(--pe); font-weight: 700; }
.muted    { color: var(--muted); font-weight: 500; }

/* Special rows */
.warning-row td  { color: var(--warn); background: #fdf3d0; }
.highlight-row td {
  background: #fff7cc;
  box-shadow: inset 0 1px 0 #e5c62a, inset 0 -1px 0 #e5c62a;
}
.highlight-row td:first-child {
  box-shadow: inset 4px 0 0 var(--accent), inset 0 1px 0 #e5c62a, inset 0 -1px 0 #e5c62a;
}

.empty {
  padding: 28px 18px;
  color: var(--muted);
  font-weight: 500;
  text-align: left;
  font-style: italic;
}

/* ─── Accessibility ──────────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ─── Loading spinner ────────────────────────────────────────────── */
.table-wrap.is-loading::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,.50);
  backdrop-filter: blur(1.5px);
  z-index: 9999;
  pointer-events: all;
}
.table-wrap.is-loading::before {
  content: "";
  position: fixed;
  top: calc(50% - 22px);
  left: calc(50% - 22px);
  width: 44px;
  height: 44px;
  border: 4px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  z-index: 10000;
  animation: spin .65s linear infinite;
  pointer-events: none;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Responsive: Tablet ≤ 1200px ───────────────────────────────── */
@media (max-width: 1200px) {
  .topbar {
    grid-template-columns: 1fr;
    gap: 14px;
    position: static;   /* don't sticky on tablets — not needed */
  }
  .index-strip {
    grid-template-columns: repeat(5, 1fr);
  }
  .toolbar {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .toolbar-actions {
    grid-column: 1 / -1;
  }
  .matrix-head {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .matrix-actions { justify-content: flex-start; }
  .pagination-bar {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .pagination-controls { flex-wrap: wrap; gap: 6px; }
}

/* ─── Responsive: Tablet ≤ 900px ────────────────────────────────── */
@media (max-width: 900px) {
  .index-strip {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
  }
  /* Sensex and VIX share the second row */
  [data-index-card="SENSEX"] { grid-column: 1; grid-row: 2; }
  [data-index-card="VIX"]    { grid-column: 2; grid-row: 2; }
}

/* ─── Responsive: Mobile ≤ 640px ────────────────────────────────── */
@media (max-width: 640px) {
  .shell { padding: 8px 10px 20px; }

  .topbar { padding: 14px 14px; }

  h1 { font-size: 1.15rem; }

  .logout-button {
    margin-left: 0;
    flex: 1 0 auto;
  }

  .index-strip {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }
  [data-index-card="SENSEX"] { grid-column: auto; grid-row: auto; }
  [data-index-card="VIX"]    { grid-column: auto; grid-row: auto; }

  .index-card { min-height: 68px; padding: 9px 11px 8px; }
  .index-card strong { font-size: .92rem; }
  .index-card small  { font-size: .70rem; }

  .toolbar {
    grid-template-columns: 1fr;
    padding: 12px;
    gap: 10px;
  }
  .toolbar-actions { grid-column: auto; }
  .toolbar-actions button { width: 100%; }
  .expiry-field { max-width: 100%; }

  .matrix-head { padding: 12px; }

  .otm-strip { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }

  .pagination-controls { width: 100%; justify-content: space-between; }
  .pagination-controls button { flex: 1; }
  .page-jump input { width: 56px; }

  .table-wrap { max-height: 60vh; min-height: 320px; }

  th, td { padding: 5px 7px; font-size: .74rem; }

  button, input, select { min-height: 38px; }
}

/* ─── Responsive: Small mobile ≤ 420px ──────────────────────────── */
@media (max-width: 420px) {
  .index-strip { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .index-card strong { font-size: .86rem; }
  .pagination-controls button { min-width: 48px; font-size: .76rem; padding: 0 8px; }
}