*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f0f4f9;
  --white:#ffffff;
  --border:#e1e8f0;
  --blue:#2563eb;
  --blue-d:#1d4ed8;
  --blue-l:#dbeafe;
  --blue-xl:#eff6ff;
  --text:#1e293b;
  --text-mid:#475569;
  --text-light:#94a3b8;
  --shadow:0 2px 20px rgba(0,0,0,0.08);
  --r:14px;
  --ocean:#0284c7;
  --ocean-l:#e0f2fe;
  --rail:#7c3aed;
  --rail-l:#f3e8ff;
  --truck:#059669;
  --truck-l:#ecfdf5;
  --air:#c2410c;
  --air-l:#fff7ed;
}
html{scroll-behavior:smooth}
body{background:var(--bg);font-family:'Quicksand',sans-serif;color:var(--text);min-height:100vh}

/* ── PAGE HEADER ── */
.page-hd{
  background:var(--white);border-bottom:1px solid var(--border);
  padding:1rem 2rem;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;flex-wrap:wrap;
}
.hd-title h1{font-size:1.1rem;font-weight:700;letter-spacing:-0.01em}
.hd-title p{font-size:0.73rem;color:var(--text-light);margin-top:2px}
.hd-badges{display:flex;gap:0.5rem;flex-wrap:wrap;align-items:center}
.hbadge{
  font-family:'Fira Code',monospace;font-size:0.6rem;font-weight:600;
  letter-spacing:0.07em;padding:0.28rem 0.75rem;border-radius:6px;
}
.hb-blue{background:#eff6ff;border:1px solid #bfdbfe;color:var(--blue)}
.hb-green{background:#ecfdf5;border:1px solid #a7f3d0;color:#059669}
.hb-purple{background:#f3e8ff;border:1px solid #ddd6fe;color:#7c3aed}

/* ── MAIN LAYOUT ── */
.main-wrap{display:grid;grid-template-columns:1fr 320px;gap:1.5rem;padding:1.5rem;align-items:start}
@media(max-width:960px){.main-wrap{grid-template-columns:1fr}}

/* ── SEARCH CARD ── */
.search-card{
  background:var(--white);border-radius:var(--r);
  box-shadow:var(--shadow);padding:1.25rem 1.5rem;margin-bottom:1.25rem;
}
.search-row{display:flex;gap:0.75rem;align-items:stretch}
.search-input{
  flex:1;border:1.5px solid var(--border);border-radius:10px;
  padding:0.8rem 1.1rem;font-family:'Quicksand',sans-serif;
  font-size:0.92rem;font-weight:500;color:var(--text);
  background:#fafbfd;outline:none;transition:border 0.2s;
}
.search-input::placeholder{color:var(--text-light);font-weight:400}
.search-input:focus{border-color:var(--blue);background:var(--white)}
.search-btn{
  background:var(--blue);color:#fff;border:none;border-radius:10px;
  padding:0 1.4rem;cursor:pointer;font-size:1.1rem;
  transition:background 0.2s;display:flex;align-items:center;
  gap:0.4rem;flex-shrink:0;font-family:'Quicksand',sans-serif;
  font-weight:700;font-size:0.85rem;white-space:nowrap;
}
.search-btn:hover{background:var(--blue-d)}
.search-hint{
  font-size:0.72rem;color:var(--text-light);margin-top:0.6rem;
  display:flex;gap:1.2rem;flex-wrap:wrap;align-items:center;
}
.search-hint strong{color:var(--text-mid);font-weight:600;cursor:pointer;text-decoration:underline dotted}
.search-hint strong:hover{color:var(--blue)}

/* ── FILTER TABS ── */
.filter-row{
  display:flex;gap:0.5rem;flex-wrap:wrap;
  margin-bottom:1rem;
}
.filter-btn{
  font-family:'Fira Code',monospace;font-size:0.68rem;font-weight:600;
  padding:0.35rem 0.9rem;border-radius:20px;border:1.5px solid var(--border);
  background:var(--white);color:var(--text-light);cursor:pointer;
  transition:all 0.15s;letter-spacing:0.04em;white-space:nowrap;
}
.filter-btn:hover{border-color:var(--blue);color:var(--blue)}
.filter-btn.active{border-color:var(--blue);background:var(--blue);color:#fff}
.filter-btn.fo{border-color:var(--ocean);color:var(--ocean)}
.filter-btn.fo.active{background:var(--ocean);color:#fff;border-color:var(--ocean)}
.filter-btn.fr{border-color:var(--rail);color:var(--rail)}
.filter-btn.fr.active{background:var(--rail);color:#fff;border-color:var(--rail)}
.filter-btn.ft{border-color:var(--truck);color:var(--truck)}
.filter-btn.ft.active{background:var(--truck);color:#fff;border-color:var(--truck)}
.filter-btn.fa{border-color:var(--air);color:var(--air)}
.filter-btn.fa.active{background:var(--air);color:#fff;border-color:var(--air)}

/* ── TABLE CARD ── */
.table-card{
  background:var(--white);border-radius:var(--r);
  box-shadow:var(--shadow);overflow:hidden;
}
.table-meta{
  padding:0.75rem 1.2rem;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.5rem;
}
.table-count{
  font-family:'Fira Code',monospace;font-size:0.65rem;
  color:var(--text-light);letter-spacing:0.06em;
}
.az-row{display:flex;gap:0.15rem;flex-wrap:wrap}
.az-btn{
  font-family:'Fira Code',monospace;font-size:0.6rem;font-weight:700;
  width:20px;height:20px;border-radius:4px;border:none;
  background:transparent;color:var(--text-light);cursor:pointer;
  transition:all 0.12s;display:flex;align-items:center;justify-content:center;
}
.az-btn:hover{background:var(--blue-l);color:var(--blue)}
.az-btn.active{background:var(--blue);color:#fff}

.table-hd{
  display:grid;grid-template-columns:100px 1fr 130px 80px;
  background:#f8fafc;border-bottom:2px solid var(--border);
  padding:0.6rem 1.2rem;gap:0.5rem;
}
.th-cell{
  font-family:'Fira Code',monospace;font-size:0.62rem;
  font-weight:700;letter-spacing:0.08em;color:var(--text-light);
}

.carrier-row{
  display:grid;grid-template-columns:100px 1fr 130px 80px;
  padding:0.7rem 1.2rem;border-bottom:1px solid #f1f5f9;
  cursor:pointer;transition:background 0.13s;align-items:center;gap:0.5rem;
}
.carrier-row:last-child{border-bottom:none}
.carrier-row:hover{background:#f8fafc}
.carrier-row.active-row{background:var(--blue-xl);border-left:3px solid var(--blue)}

.cr-scac{
  font-family:'Fira Code',monospace;font-size:0.88rem;
  font-weight:700;color:var(--blue);letter-spacing:0.04em;
}
.cr-name{font-size:0.82rem;font-weight:600;color:var(--text);line-height:1.3}
.cr-full{font-size:0.7rem;color:var(--text-light);margin-top:0.1rem;font-weight:500}
.cr-region{font-size:0.72rem;color:var(--text-mid);font-weight:500}
.type-badge{
  font-family:'Fira Code',monospace;font-size:0.58rem;font-weight:700;
  padding:0.18rem 0.5rem;border-radius:5px;letter-spacing:0.05em;
  white-space:nowrap;display:inline-block;
}
.tb-ocean{background:var(--ocean-l);color:var(--ocean);border:1px solid #bae6fd}
.tb-rail{background:var(--rail-l);color:var(--rail);border:1px solid #ddd6fe}
.tb-truck{background:var(--truck-l);color:var(--truck);border:1px solid #a7f3d0}
.tb-air{background:var(--air-l);color:var(--air);border:1px solid #fed7aa}

.no-results{
  padding:3rem 1.5rem;text-align:center;
  color:var(--text-light);font-size:0.85rem;
}
.no-results strong{display:block;font-size:1rem;color:var(--text-mid);margin-bottom:0.4rem}

/* ── DETAIL PANEL (full width below table) ── */
.detail-panel{
  background:var(--white);border-radius:var(--r);
  box-shadow:var(--shadow);margin-top:1rem;overflow:hidden;
  display:none;
}
.detail-panel.open{display:block}
.dp-hd{
  background:linear-gradient(135deg,var(--blue-xl) 0%,#f5f3ff 100%);
  border-bottom:1px solid var(--border);
  padding:1.25rem 1.5rem;
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
}
.dp-left{}
.dp-scac{
  font-family:'Fira Code',monospace;font-size:2.4rem;font-weight:700;
  color:var(--blue);letter-spacing:0.04em;line-height:1;
}
.dp-name{font-size:1rem;font-weight:700;color:var(--text);margin-top:0.3rem}
.dp-close{
  background:#fff;border:1px solid var(--border);border-radius:8px;
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--text-light);font-size:1rem;
  transition:all 0.15s;flex-shrink:0;
}
.dp-close:hover{background:#f1f5f9;color:var(--text)}
.dp-body{padding:1.25rem 1.5rem}
.dp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0.75rem;margin-bottom:1.25rem}
@media(max-width:640px){.dp-grid{grid-template-columns:repeat(2,1fr)}}
.dp-chip{background:#f8fafc;border:1px solid var(--border);border-radius:8px;padding:0.6rem 0.85rem}
.dp-chip-label{
  font-family:'Fira Code',monospace;font-size:0.57rem;
  color:var(--text-light);letter-spacing:0.09em;margin-bottom:0.2rem;
}
.dp-chip-val{font-size:0.83rem;font-weight:700;color:var(--text)}
.dp-chip-val.blue{color:var(--blue)}
.dp-desc{font-size:0.82rem;color:var(--text-mid);line-height:1.7;margin-bottom:1rem}
.dp-tip{
  background:var(--blue-xl);border:1px solid #bfdbfe;
  border-radius:8px;padding:0.75rem 1rem;
  font-size:0.78rem;color:var(--text-mid);line-height:1.6;
  display:flex;gap:0.6rem;
}
.dp-tip-icon{flex-shrink:0;font-size:0.9rem;margin-top:0.05rem}

/* ── RIGHT SIDEBAR ── */
.sidebar{display:flex;flex-direction:column;gap:1rem}

.side-card{
  background:var(--white);border-radius:var(--r);
  box-shadow:var(--shadow);overflow:hidden;
}
.side-hd{
  padding:0.9rem 1.2rem;border-bottom:1px solid #f1f5f9;
  font-family:'Fira Code',monospace;font-size:0.62rem;
  font-weight:700;letter-spacing:0.1em;color:var(--text-mid);
}

/* ABOUT SCAC */
.about-body{padding:1rem 1.2rem}
.about-para{font-size:0.78rem;color:var(--text-mid);line-height:1.65;margin-bottom:0.75rem}
.about-para:last-child{margin-bottom:0}

/* SUFFIX GUIDE */
.suffix-item{
  display:flex;align-items:flex-start;gap:0.75rem;
  padding:0.65rem 1.2rem;border-bottom:1px solid #f8fafc;
}
.suffix-item:last-child{border-bottom:none}
.suf-code{
  font-family:'Fira Code',monospace;font-size:0.9rem;font-weight:700;
  color:var(--blue);width:22px;flex-shrink:0;
}
.suf-text{}
.suf-name{font-size:0.78rem;font-weight:700;color:var(--text);margin-bottom:0.1rem}
.suf-desc{font-size:0.7rem;color:var(--text-light);line-height:1.4}

/* TOP CARRIERS */
.top-row{
  display:flex;align-items:center;gap:0.75rem;
  padding:0.6rem 1.2rem;border-bottom:1px solid #f8fafc;
  cursor:pointer;transition:background 0.13s;
}
.top-row:last-child{border-bottom:none}
.top-row:hover{background:#f8fafc}
.top-rank{
  font-family:'Fira Code',monospace;font-size:0.65rem;font-weight:700;
  color:var(--text-light);width:18px;flex-shrink:0;
}
.top-scac{
  font-family:'Fira Code',monospace;font-size:0.8rem;font-weight:700;
  color:var(--blue);width:48px;flex-shrink:0;
}
.top-name{font-size:0.75rem;font-weight:600;color:var(--text);flex:1}
.top-teu{
  font-family:'Fira Code',monospace;font-size:0.65rem;
  color:var(--text-light);white-space:nowrap;
}

/* FOOTER */
.page-ft{
  background:var(--white);border-top:1px solid var(--border);
  text-align:center;padding:1.25rem;
  font-size:0.72rem;color:var(--text-light);margin-top:0.5rem;
}