*,*::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;
  --seller:#818cf8;
  --buyer:#34d399;
  --text:#1e293b;
  --text-mid:#475569;
  --text-light:#94a3b8;
  --shadow:0 2px 20px rgba(0,0,0,0.09);
  --r:16px;
  --accent:#2563eb;
}
html{scroll-behavior:smooth}
body{background:var(--bg);font-family:'Inter',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.02em}
.hd-title p{font-size:0.73rem;color:var(--text-light);margin-top:2px}
.hd-right{display:flex;align-items:center;gap:0.75rem;flex-wrap:wrap}
.icc-badge{
  font-family:'JetBrains Mono',monospace;font-size:0.62rem;font-weight:700;
  letter-spacing:0.07em;background:#eff6ff;border:1px solid #bfdbfe;
  color:var(--blue);padding:0.3rem 0.8rem;border-radius:6px;
}
/* unit toggle */
.unit-toggle{
  display:flex;background:var(--bg);border:1px solid var(--border);
  border-radius:8px;overflow:hidden;
}
.unit-btn{
  font-family:'JetBrains Mono',monospace;font-size:0.7rem;font-weight:700;
  padding:0.38rem 0.9rem;border:none;background:transparent;
  cursor:pointer;color:var(--text-light);transition:all 0.18s;letter-spacing:0.05em;
}
.unit-btn.active{background:var(--blue);color:#fff}

/* ── TABS ── */
.tabs-bar{
  background:var(--white);border-bottom:1px solid var(--border);
  overflow-x:auto;scrollbar-width:none;position:sticky;top:0;z-index:20;
}
.tabs-bar::-webkit-scrollbar{display:none}
.tabs{display:flex;padding:0 1.5rem;min-width:max-content}
.tab{
  font-family:'JetBrains Mono',monospace;font-size:0.75rem;font-weight:600;
  letter-spacing:0.03em;padding:0.85rem 1.1rem;
  color:var(--text-light);cursor:pointer;
  border-bottom:2.5px solid transparent;transition:all 0.15s;
  user-select:none;white-space:nowrap;display:flex;align-items:center;gap:0.4rem;
}
.tab:hover{color:var(--blue)}
.tab.active{color:var(--blue);border-bottom-color:var(--blue)}
.tab-icon{font-size:0.9rem}

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

/* ── LEFT CARD ── */
.card{
  background:var(--white);border-radius:var(--r);
  box-shadow:var(--shadow);overflow:hidden;
}

/* TERM HEADER */
.term-hd{
  padding:1.4rem 1.8rem 1rem;
  border-bottom:1px solid #f1f5f9;
  display:flex;align-items:flex-start;
  justify-content:space-between;gap:1rem;flex-wrap:wrap;
}
.tc-code{
  font-family:'JetBrains Mono',monospace;font-size:1.7rem;font-weight:700;
  color:var(--blue);letter-spacing:-0.02em;line-height:1;
}
.tc-name{font-size:0.85rem;font-weight:600;color:var(--text-mid);margin-top:0.3rem}
.tc-desc{font-size:0.8rem;color:var(--text-mid);max-width:580px;line-height:1.65;margin-top:0.4rem}
.tc-badges{display:flex;gap:0.5rem;flex-wrap:wrap;margin-top:0.5rem}
.cbadge{
  font-family:'JetBrains Mono',monospace;font-size:0.6rem;font-weight:700;
  padding:0.22rem 0.65rem;border-radius:5px;letter-spacing:0.06em;white-space:nowrap;
}
.cb-dry{background:#eff6ff;color:#2563eb;border:1px solid #bfdbfe}
.cb-reefer{background:#ecfdf5;color:#059669;border:1px solid #a7f3d0}
.cb-special{background:#fff7ed;color:#c2410c;border:1px solid #fed7aa}
.cb-iso{background:#f3e8ff;color:#7c3aed;border:1px solid #ddd6fe}

/* ── SVG CONTAINER DRAWING ── */
.svg-wrap{
  padding:1.5rem 1.8rem 0.5rem;
  display:flex;flex-direction:column;align-items:center;
}
.svg-label{
  font-family:'JetBrains Mono',monospace;font-size:0.62rem;
  color:var(--text-light);letter-spacing:0.1em;
  margin-bottom:0.75rem;text-align:center;
}
svg.container-svg{
  width:100%;max-width:680px;height:auto;display:block;overflow:visible;
}

/* ── DIMS GRID ── */
.dims-section{padding:1.2rem 1.8rem}
.dims-title{
  font-family:'JetBrains Mono',monospace;font-size:0.62rem;
  color:var(--text-light);letter-spacing:0.12em;
  margin-bottom:0.9rem;
}
.dims-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--border);border:1px solid var(--border);border-radius:10px;overflow:hidden;
  margin-bottom:1.2rem;
}
.dim-cell{
  background:var(--white);padding:0.75rem 0.9rem;
}
.dim-cell-label{
  font-family:'JetBrains Mono',monospace;font-size:0.58rem;
  color:var(--text-light);letter-spacing:0.1em;margin-bottom:0.25rem;
}
.dim-cell-val{
  font-size:0.9rem;font-weight:700;color:var(--text);letter-spacing:-0.01em;line-height:1;
}
.dim-cell-sub{
  font-size:0.68rem;color:var(--text-light);margin-top:0.2rem;
}
.dim-cell.highlight .dim-cell-val{color:var(--blue)}

/* ── WEIGHT & CAPACITY ROW ── */
.wc-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0.75rem;
  margin-bottom:1.2rem;
}
@media(max-width:640px){.wc-grid{grid-template-columns:repeat(2,1fr)}}
.wc-card{
  background:#f8fafc;border:1px solid var(--border);
  border-radius:10px;padding:0.75rem 0.9rem;
}
.wc-icon{font-size:1.2rem;margin-bottom:0.35rem}
.wc-label{
  font-family:'JetBrains Mono',monospace;font-size:0.57rem;
  color:var(--text-light);letter-spacing:0.09em;margin-bottom:0.2rem;
}
.wc-val{font-size:0.92rem;font-weight:700;color:var(--text);letter-spacing:-0.01em}
.wc-sub{font-size:0.67rem;color:var(--text-light);margin-top:0.15rem}

/* ── DOOR DIMS ── */
.door-row{
  display:flex;align-items:center;gap:0.75rem;
  background:#f8fafc;border:1px solid var(--border);
  border-radius:10px;padding:0.75rem 1rem;
  margin-bottom:1.2rem;
}
.door-icon{font-size:1.5rem;flex-shrink:0}
.door-label{font-family:'JetBrains Mono',monospace;font-size:0.6rem;color:var(--text-light);letter-spacing:0.09em}
.door-vals{display:flex;gap:1.5rem;margin-top:0.2rem}
.door-val{font-size:0.85rem;font-weight:700;color:var(--text)}
.door-val span{font-size:0.65rem;font-weight:500;color:var(--text-light);display:block}

/* ── PALLET INFO ── */
.pallet-row{
  display:flex;gap:0.75rem;margin-bottom:1.2rem;flex-wrap:wrap;
}
.pallet-card{
  flex:1;min-width:130px;
  background:#f0f9ff;border:1px solid #bae6fd;
  border-radius:8px;padding:0.6rem 0.85rem;
  display:flex;align-items:center;gap:0.6rem;
}
.pallet-icon{font-size:1.1rem;flex-shrink:0}
.pallet-label{font-family:'JetBrains Mono',monospace;font-size:0.58rem;color:#0284c7;letter-spacing:0.07em}
.pallet-val{font-size:0.92rem;font-weight:700;color:#0c4a6e}

/* ── USE CASES ── */
.use-section{padding:0 1.8rem 1.5rem}
.use-title{
  font-family:'JetBrains Mono',monospace;font-size:0.62rem;
  color:var(--text-light);letter-spacing:0.12em;margin-bottom:0.75rem;
}
.use-tags{display:flex;flex-wrap:wrap;gap:0.4rem}
.use-tag{
  font-size:0.73rem;font-weight:500;
  background:#f1f5f9;border:1px solid var(--border);
  border-radius:6px;padding:0.28rem 0.65rem;color:var(--text-mid);
}

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

/* Quick Compare */
.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:'JetBrains Mono',monospace;font-size:0.65rem;
  font-weight:700;letter-spacing:0.1em;color:var(--text-mid);
}
.compare-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:0.6rem 1.2rem;border-bottom:1px solid #f8fafc;
  cursor:pointer;transition:background 0.15s;gap:0.5rem;
}
.compare-row:last-child{border-bottom:none}
.compare-row:hover{background:#f8fafc}
.compare-row.active-row{background:#eff6ff}
.cr-name{font-size:0.78rem;font-weight:600;color:var(--text);flex:1}
.cr-teu{
  font-family:'JetBrains Mono',monospace;font-size:0.65rem;
  color:var(--text-light);white-space:nowrap;
}
.cr-cbm{
  font-family:'JetBrains Mono',monospace;font-size:0.72rem;
  font-weight:700;color:var(--blue);white-space:nowrap;
}
/* CBM bar */
.cr-bar-wrap{width:60px;height:6px;background:#f1f5f9;border-radius:3px;flex-shrink:0}
.cr-bar{height:6px;border-radius:3px;background:linear-gradient(90deg,#2563eb,#818cf8);transition:width 0.4s}

/* Tips */
.tip-list{padding:0.75rem 1.2rem}
.tip-item{
  display:flex;gap:0.6rem;align-items:flex-start;
  font-size:0.75rem;color:var(--text-mid);line-height:1.55;
  padding:0.4rem 0;border-bottom:1px dashed #f1f5f9;
}
.tip-item:last-child{border-bottom:none}
.tip-icon{font-size:0.9rem;flex-shrink:0;margin-top:0.05rem}

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

/* ── ANIMATIONS ── */
.card,.side-card{animation:fadeUp 0.35s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}