:root {
  --red: #EB0000;
  --blue: #001996;
  --cyan: #00A9CE;
  --gray: #A2AAAD;
  --near-black: #0F1318;
  --bg-light: #D6EEF5;
  --orange: #FFA300;
  --green: #4D8406;
  --white: #FFFFFF;
  --text: #000000;
  --border: #dde3ef;
  --font: 'Open Sans', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  background: var(--white);
}

/* HEADER */
.puro-header {
  background: var(--white);
  border-bottom: 3px solid var(--red);
  padding: 12px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 101;
}
.puro-header img { min-width: 120px; max-width: 180px; height: auto; }
.puro-header-meta { font-size: 13px; color: var(--gray); }

.puro-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  border-bottom: 2px solid var(--blue);
  background: var(--white);
  padding: 0 32px;
  position: sticky;
  top: var(--puro-header-h, 52px);
  z-index: 100;
  /* overflow must stay visible — otherwise absolute dropdown panels are clipped */
  overflow: visible;
}
.puro-nav-dropdown {
  position: relative;
  margin-bottom: -2px;
}
.puro-nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: var(--gray);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.puro-nav-trigger:hover { color: var(--blue); }
.puro-nav-dropdown.active .puro-nav-trigger,
.puro-nav-dropdown.open .puro-nav-trigger {
  color: var(--blue);
  border-bottom-color: var(--red);
}
.puro-nav-caret {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.7;
}
.puro-nav-panel {
  display: none;
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 200px;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: 0 8px 20px rgba(15, 19, 24, 0.12);
  z-index: 120;
  padding: 6px 0;
}
.puro-nav-dropdown.open .puro-nav-panel { display: block; }
.puro-nav-item {
  display: block;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--near-black);
  text-decoration: none;
  border: none;
  white-space: nowrap;
}
.puro-nav-item:hover { background: var(--bg-light); color: var(--blue); }
.puro-nav-item.active { color: var(--blue); background: #eef4fb; }
/* Legacy flat-link support if any page still emits bare anchors */
.puro-nav > a {
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
}
.puro-nav > a:hover { color: var(--blue); }
.puro-nav > a.active { color: var(--blue); border-bottom-color: var(--red); }

.puro-page-title {
  background: var(--blue);
  color: var(--white);
  padding: 28px 32px 24px;
}
.puro-page-title h1 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 8px;
}
.puro-page-title .subtitle { font-size: 15px; font-weight: 300; opacity: 0.9; }
.red-rule { display: block; width: 60px; height: 3px; background: var(--red); margin-bottom: 14px; }

.puro-content { max-width: 1100px; margin: 0 auto; padding: 28px 32px 48px; }

h2 {
  font-family: var(--font);
  color: var(--blue);
  font-weight: 700;
  font-size: 22px;
  margin: 28px 0 6px;
}
h3 {
  font-family: var(--font);
  color: var(--blue);
  font-weight: 700;
  font-size: 16px;
  margin: 18px 0 6px;
}
.section-rule { display: block; width: 50px; height: 3px; background: var(--red); margin-bottom: 16px; }
p { margin-bottom: 10px; }
ul { margin: 8px 0 12px 20px; }
li { margin-bottom: 5px; }
.muted { color: var(--gray); font-size: 0.92rem; }
.ok { color: var(--green); font-weight: 600; }
.no { color: var(--red); font-weight: 600; }

/* CARDS */
.puro-card {
  background: var(--white);
  border-top: 3px solid var(--blue);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 25, 150, 0.08);
  padding: 20px 24px;
  margin-bottom: 20px;
}
.puro-card-highlight {
  background: var(--bg-light);
  border-left: 4px solid var(--blue);
  padding: 16px 20px;
  border-radius: 0 4px 4px 0;
  margin: 16px 0;
}
.puro-card-alert {
  background: #fff5f5;
  border-left: 4px solid var(--red);
  padding: 16px 20px;
  border-radius: 0 4px 4px 0;
  margin: 16px 0;
}
.puro-card-success {
  background: #f4f9ec;
  border-left: 4px solid var(--green);
  padding: 16px 20px;
  border-radius: 0 4px 4px 0;
  margin: 16px 0;
}
.puro-card-orange {
  background: #fff8e8;
  border-left: 4px solid var(--orange);
  padding: 16px 20px;
  border-radius: 0 4px 4px 0;
  margin: 16px 0;
}

/* FORMS */
label { display: block; margin: 0 0 0.3rem; font-weight: 600; font-size: 13px; color: var(--near-black); }
label.inline { display: inline; font-weight: 400; margin: 0; }
input, select, textarea, button {
  font-family: var(--font);
  font-size: 14px;
  padding: 0.45rem 0.55rem;
  box-sizing: border-box;
}
input[type="text"], input[type="number"], input[type="date"], input[type="file"], input[type="email"], select, textarea {
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--white);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid rgba(0, 25, 150, 0.25);
  border-color: var(--blue);
}
textarea { min-height: 6rem; font-family: 'Courier New', ui-monospace, monospace; font-size: 13px; }

.field { display: flex; flex-direction: column; min-width: 0; }
.field > label { margin-top: 0; }
.field-full { grid-column: 1 / -1; }
.field-align-end { justify-content: flex-end; }
.field-align-end > button { width: 100%; }
.field-hint { margin: 0.15rem 0 0; font-size: 12px; color: var(--gray); font-weight: 400; }

.textarea-code {
  min-height: 10rem;
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.45;
  resize: vertical;
}

.form-section { margin-top: 1.1rem; }
.form-section:first-child { margin-top: 0; }
.form-section-title {
  margin: 0 0 0.65rem;
  font-weight: 600;
  font-size: 14px;
  color: var(--blue);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: 12px 16px;
  align-items: end;
}
.form-grid-tight { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); }
.form-grid-wide { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.form-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin: 1.25rem 0 0.5rem;
}
.action-bar .puro-btn-primary,
.action-bar .puro-btn-secondary,
.action-bar button { margin: 0; }

.puro-card > label:not(.inline) { margin-top: 0.85rem; }
.puro-card > label:not(.inline):first-of-type,
.puro-card > h3 + span.section-rule + label { margin-top: 0; }

@media (max-width: 768px) {
  .form-grid-2, .form-grid-3, .form-grid-4 { grid-template-columns: 1fr; }
}

.puro-btn, button.puro-btn-primary, button.puro-btn-secondary, button.puro-btn-danger {
  display: inline-block;
  margin-top: 0.5rem;
  margin-right: 0.5rem;
  cursor: pointer;
  border-radius: 4px;
  font-weight: 600;
  border: none;
  padding: 0.5rem 1rem;
}
.puro-btn-primary, button.puro-btn-primary { background: var(--blue); color: var(--white); }
.puro-btn-primary:hover { background: #001670; }
.puro-btn-secondary, button.puro-btn-secondary {
  background: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
}
.puro-btn-danger, button.puro-btn-danger { background: var(--red); color: var(--white); }
.puro-btn-danger:hover { background: #c40000; }
button:disabled { opacity: 0.55; cursor: not-allowed; }

.row { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 12px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 768px) {
  .row, .row2, .row3 { grid-template-columns: 1fr; }
  .puro-content { padding: 20px 16px 32px; }
  .puro-header, .puro-nav, .puro-page-title { padding-left: 16px; padding-right: 16px; }
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 16px 0; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin: 16px 0; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 16px 0; }
@media (max-width: 768px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* TABLES */
.puro-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 16px 0; }
.puro-table thead tr { background: var(--blue); color: var(--white); }
.puro-table th { padding: 12px 14px; text-align: left; font-weight: 600; font-size: 13px; }
.puro-table tbody tr:nth-child(even) { background: var(--bg-light); }
.puro-table td { padding: 10px 14px; border-bottom: 1px solid #e0e8f0; vertical-align: top; }

/* TABS */
.tab-nav { display: flex; gap: 0; border-bottom: 2px solid var(--blue); margin-bottom: 24px; flex-wrap: wrap; }
.tab-btn {
  padding: 10px 20px;
  background: none;
  border: none;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: var(--gray);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: all 0.15s;
}
.tab-btn.active { color: var(--blue); border-bottom-color: var(--red); }
.tab-btn:hover { color: var(--blue); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* BADGES */
.badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; }
.badge-blue { background: var(--blue); color: #fff; }
.badge-red { background: var(--red); color: #fff; }
.badge-green { background: var(--green); color: #fff; }
.badge-gray { background: var(--gray); color: #fff; }
.badge-orange { background: var(--orange); color: #fff; }
.puro-btn-sm { padding: 4px 10px !important; font-size: 12px !important; }

/* CODE */
code {
  background: #f1f4f9;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 13px;
  font-family: 'Courier New', monospace;
  color: var(--near-black);
}
pre.json-output, pre.puro-pre {
  background: #f8fafc;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px 20px;
  font-size: 13px;
  font-family: 'Courier New', monospace;
  overflow-x: auto;
  margin: 12px 0;
  line-height: 1.7;
  white-space: pre-wrap;
}

details.trace { margin: 1rem 0; border: 1px solid var(--border); border-radius: 4px; }
details.trace summary { padding: 0.5rem 0.75rem; cursor: pointer; font-weight: 600; color: var(--blue); }
details.trace pre { margin: 0; border-top: 1px solid var(--border); font-size: 0.8rem; max-height: 320px; }

.trace-launcher { margin: 1rem 0; }

.puro-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.puro-modal[hidden] { display: none !important; }
.puro-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 19, 24, 0.55);
}
.puro-modal-dialog {
  position: relative;
  width: min(960px, 100%);
  max-height: min(85vh, 900px);
  background: var(--white);
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 25, 150, 0.25);
  border-top: 4px solid var(--blue);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.puro-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-light);
}
.puro-modal-header h2 {
  margin: 0;
  font-size: 18px;
  color: var(--blue);
}
.puro-modal-close {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  color: var(--gray);
  cursor: pointer;
  padding: 0;
}
.puro-modal-close:hover { color: var(--red); }
.puro-modal-body {
  margin: 0;
  flex: 1;
  overflow: auto;
  max-height: none;
  border-radius: 0;
  font-size: 0.8rem;
  background: #f8fafc;
  color: var(--text);
  border-top: 1px solid var(--border);
}
body.puro-modal-open { overflow: hidden; }

.progress-list { list-style: none; padding: 0; margin: 12px 0; }
.progress-list li { margin: 0.35rem 0; padding: 6px 10px; background: #f1f4f9; border-radius: 4px; font-size: 14px; }

.warn {
  color: #7a5500;
  background: #fff8e8;
  border: 1px solid var(--orange);
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
}

/* BROWSE */
.browse-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 12px 0;
  padding: 10px 12px;
  background: #f1f4f9;
  border-radius: 4px;
  font-size: 14px;
}
.browse-bar button { margin: 0; padding: 0.35rem 0.75rem; font-size: 13px; }
.browse-list { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: 4px; }
.browse-list li { border-bottom: 1px solid #eef2f7; }
.browse-list li:last-child { border-bottom: none; }
.browse-list button {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
  margin: 0;
}
.browse-list button:hover { background: var(--bg-light); }
.browse-list button.dir::before { content: "📁 "; }
.browse-list button.file::before { content: "📄 "; }

/* QUOTE */
#quote-panel { margin: 1.5rem 0; }
.quote-table { width: 100%; border-collapse: collapse; margin: 0.5rem 0 1rem; font-size: 0.95rem; }
.quote-table th, .quote-table td { text-align: left; padding: 0.35rem 0.5rem; border-bottom: 1px solid #e0e0e0; }
.quote-table .num, .quote-row .num, .quote-total .num { text-align: right; font-variant-numeric: tabular-nums; }
.quote-row, .quote-total { display: flex; justify-content: space-between; margin: 0.35rem 0; }
.quote-total { font-weight: 700; font-size: 1.1rem; margin-top: 0.75rem; padding-top: 0.5rem; border-top: 2px solid var(--border); }
.option-row { margin: 0; }
.options-grid { margin-top: 0.5rem; }
.option-row label.inline-opt { display: flex; align-items: center; gap: 0.4rem; font-weight: 400; margin: 0; }
.option-row input[type="checkbox"] { width: auto; margin: 0; }

#report {
  background: var(--near-black);
  color: #d4d4d4;
  padding: 1rem;
  overflow: auto;
  white-space: pre-wrap;
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 0.85rem;
  min-height: 12rem;
  border-radius: 6px;
}
#report.rate-results {
  background: transparent;
  color: inherit;
  padding: 0;
  white-space: normal;
  font-family: var(--font);
  font-size: 15px;
  min-height: auto;
  border-radius: 0;
}
.rate-manifest-card { margin-bottom: 1.5rem; }
.rate-manifest-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1rem;
}
@media (max-width: 900px) {
  .rate-manifest-columns { grid-template-columns: 1fr; }
}
.rate-manifest-col h4 { margin: 0 0 0.5rem; font-size: 1rem; }
.parsed-summary { margin: 0.75rem 0; font-size: 0.92rem; }
.parsed-summary ul { margin: 0.35rem 0 0 1.1rem; }
.comparison-table { margin-top: 0.5rem; }
#report .ok { color: var(--green); font-weight: 600; }
#report .no { color: var(--red); font-weight: 600; }
#report .warn { color: var(--orange); }
#report .rejects { margin: 0.5rem 0 0 1.1rem; color: var(--red); }
#report .error { color: #f48771; }
#report .warning { color: #cca700; }
#report .pass { color: #4ec9b0; }
#report .report-header { color: #9cdcfe; }

.admin-status-grid { margin-top: 1rem; }
.admin-danger-grid { margin-top: 0.5rem; }
.admin-danger-item {
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.admin-danger-item p { margin-bottom: 0.35rem; }
.admin-danger-item .puro-btn-danger { margin-top: 0.5rem; }

#steps, #rejects, #pending-list, #validate-steps { list-style: none; padding: 0; }
#steps li, #pending-list li, #validate-steps li { margin: 0.25rem 0; }

.puro-footer {
  background: var(--near-black);
  color: rgba(255, 255, 255, 0.75);
  padding: 24px 32px;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 0;
}
.puro-footer img {
  min-width: 100px;
  max-width: 140px;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.checkbox-row { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.checkbox-row input { width: auto; }
.checkbox-row label { margin: 0; font-weight: 400; }

/* APP DESIGN SYSTEM — shared IO layout, section chrome, accordion, result panel */
.io-layout {
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 24px;
  align-items: start;
}
.io-form-col {
  min-width: 0;
  --app-label-size: 0.6875rem;
  --app-label-weight: 600;
  --app-label-spacing: 0.05em;
  --app-input-size: 0.8125rem;
  --app-input-pad-y: 0.3rem;
  --app-input-pad-x: 0.5rem;
  --app-field-gap: 0.5rem;
  --app-grid-gap-y: 0.5rem;
  --app-grid-gap-x: 0.75rem;
  --app-section-pad: 14px 16px;
  --app-section-gap: 12px;
}
.io-form-col label:not(.inline-opt) {
  font-size: var(--app-label-size);
  font-weight: var(--app-label-weight);
  letter-spacing: var(--app-label-spacing);
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}
.io-form-col .option-row label.inline-opt {
  font-size: var(--app-input-size);
  text-transform: none;
  letter-spacing: normal;
}
.io-form-col input[type="text"],
.io-form-col input[type="number"],
.io-form-col select {
  font-size: var(--app-input-size);
  padding: var(--app-input-pad-y) var(--app-input-pad-x);
}
.io-form-col .form-grid,
.io-form-col .form-grid-wide,
.io-form-col .form-grid-tight,
.io-form-col .form-grid-2,
.io-form-col .form-grid-3,
.io-form-col .form-grid-4 {
  gap: var(--app-grid-gap-y) var(--app-grid-gap-x);
}
.io-form-col .form-section { margin-top: 0.75rem; }
.io-form-col .form-section-title {
  margin: 0 0 var(--app-field-gap);
  font-size: var(--app-label-size);
  font-weight: var(--app-label-weight);
  letter-spacing: var(--app-label-spacing);
  text-transform: uppercase;
  color: var(--gray);
}
.io-form-col .field-hint { font-size: 0.75rem; margin-top: 0.25rem; }
.io-form-col .action-bar { margin: 0.75rem 0 0; }
.io-form-col .field-wide select {
  width: 100%;
  max-width: 100%;
}
.io-form-col .field-wide {
  max-width: 70%;
}
.io-form-col .field-wide-contract {
  flex: 1 1 12rem;
  min-width: 10rem;
  max-width: 70%;
}
.io-form-col .field-select-short select {
  width: auto;
  min-width: 4.75rem;
  max-width: 7rem;
}
.io-form-col .field-select-short {
  flex: 0 0 auto;
  width: auto;
}
.io-form-col .field-input-narrow input {
  width: 100%;
  max-width: 5.5rem;
}
.io-form-col .field-input-narrow {
  width: auto;
  flex: 0 0 auto;
}
.io-form-col .field-input-medium input {
  width: 100%;
  max-width: 8.5rem;
}
.io-form-col .field-input-medium {
  width: auto;
  flex: 0 0 auto;
}

.run-params {
  display: flex;
  flex-direction: column;
  gap: var(--app-grid-gap-y);
}
.run-params-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--app-grid-gap-y) var(--app-grid-gap-x);
}
.address-block { margin-top: 0.75rem; }
.address-block:first-of-type { margin-top: 0; }
.addr-grid {
  display: grid;
  gap: var(--app-grid-gap-y) var(--app-grid-gap-x);
  align-items: end;
  max-width: 36rem;
}
.addr-grid-origin {
  grid-template-columns: minmax(8rem, 1fr) 4rem 7.5rem;
}
.addr-grid-dest {
  grid-template-columns: 3.5rem minmax(8rem, 1fr) 5rem 7rem;
}
.addr-grid .field { min-width: 0; }
.addr-grid input { width: 100%; }

.app-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: var(--app-section-pad, 14px 16px);
  margin-bottom: var(--app-section-gap, 12px);
  box-shadow: 0 1px 3px rgba(0, 25, 150, 0.06);
}
.section-label {
  margin: 0;
  font-size: var(--app-label-size, 0.6875rem);
  font-weight: var(--app-label-weight, 600);
  letter-spacing: var(--app-label-spacing, 0.05em);
  text-transform: uppercase;
  color: var(--gray);
}
.section-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 6px 0 12px;
}

.io-result-col {
  position: sticky;
  top: 5rem;
  align-self: start;
  max-height: calc(100vh - 5rem);
  overflow-y: auto;
  min-width: 0;
  --app-label-size: 0.6875rem;
  --app-label-weight: 600;
  --app-label-spacing: 0.05em;
  --app-section-pad: 12px 14px;
  --app-section-gap: 12px;
}
.io-result-heading { margin-bottom: 0; }
.io-result-col .section-divider { margin-bottom: 10px; }
.io-result-col .quote-meta { font-size: 0.8125rem; line-height: 1.4; }

.result-placeholder {
  padding: 24px 16px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 6px;
  background: #f8fafc;
}
.verdict-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 8px;
}
.verdict-row #verdict { margin: 0; flex: 1 1 auto; }
.debug-link-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--blue);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.debug-link-btn:hover { color: #001670; }
.verdict-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.verdict-badge.ok { background: #eef6e4; color: var(--green); }
.verdict-badge.no { background: #fff0f0; color: var(--red); }
.steps-panel { margin: 8px 0 12px; }
.steps-summary {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 6px 0;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: var(--gray);
}
.steps-summary:hover { color: var(--blue); }
.steps-panel.is-collapsed #steps { display: none; }
.steps-panel.is-expanded #steps { display: block; }
#steps li.step-fail {
  background: #fff5f5;
  border-left: 3px solid var(--red);
  padding: 4px 8px;
  margin: 4px 0;
  border-radius: 0 4px 4px 0;
}

.accordion-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
  gap: 8px;
}
.accordion-toggle-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
  min-width: 0;
  flex: 1;
}
.accordion-summary {
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--gray);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.accordion-toggle .section-label { pointer-events: none; flex-shrink: 0; }
.accordion-toggle .accordion-chevron {
  font-size: 10px;
  color: var(--gray);
  margin-left: 8px;
  flex-shrink: 0;
}
.accordion-divider { margin-top: 6px; }
.accordion-body.is-collapsed { display: none; }
.accordion-section:has(.accordion-body.is-collapsed) .accordion-divider { display: none; }

.is-conditional-hidden { display: none; }
.is-section-hidden { display: none !important; }

.address-cockpit.is-cockpit-collapsed .address-cockpit-body { display: none; }
.address-cockpit:not(.is-cockpit-collapsed) .address-cockpit-summary { display: none; }
.address-cockpit-summary {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 4px 0 8px;
  cursor: pointer;
}
.address-cockpit-glyph {
  color: var(--green);
  font-weight: 700;
  flex-shrink: 0;
}
.address-cockpit-summary-text {
  flex: 1;
  font-size: 0.8125rem;
  color: var(--near-black);
}
.address-cockpit-done { margin-top: 0.75rem; }
.address-cockpit-remove { margin-top: 0.75rem; }
.address-reveal-btn { margin-bottom: 0.5rem; }
.address-add-line-btn { margin-top: 0.25rem; }

.debug-modal-body { padding: 16px 20px; background: var(--white); }
.debug-modal-body details { margin-bottom: 1rem; }
.debug-modal-body .puro-pre { max-height: 50vh; overflow: auto; }

@media (max-width: 1024px) {
  .io-layout { grid-template-columns: 1fr; }
  .io-result-col {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
}
@media (max-width: 768px) {
  .io-form-col .field-wide,
  .io-form-col .field-wide-contract {
    max-width: 100%;
  }
  .addr-grid { max-width: none; }
  .addr-grid-origin {
    grid-template-columns: minmax(0, 1fr) 4rem 7rem;
  }
  .addr-grid-dest {
    grid-template-columns: 3.5rem minmax(0, 1fr) 4.5rem 6.5rem;
  }
}

/* PAGE SHELLS */
.lookup-page { max-width: 1360px; }

/* CREATE PAGE — page-specific layout overrides */
.create-page { max-width: 1360px; }
.create-page .package-grid,
.create-page .dims-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--app-grid-gap-y) var(--app-grid-gap-x);
}
.create-page .io-result-col #quote-panel { margin: 12px 0 0; }
.create-page .quote-card { padding: var(--app-section-pad); margin-bottom: 0; }
.create-page .quote-card .section-divider { margin-bottom: 10px; }
.create-page .action-bar-manifest {
  margin-top: 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

/* VALIDATE PAGE — page-specific layout overrides */
.validate-page { max-width: 1360px; }
.validate-page .package-grid,
.validate-page .dims-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--app-grid-gap-y) var(--app-grid-gap-x);
}
.validate-page .submit-bar { margin-top: 0.25rem; }
.validate-page .io-result-col #quote-panel { margin: 12px 0 0; }
.validate-page .quote-card { padding: var(--app-section-pad); margin-bottom: 0; }
.validate-page .quote-card .section-divider { margin-bottom: 10px; }

.validate-manifest-page { max-width: 1360px; }
.validate-manifest-page .io-form-col .textarea-code {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.validate-manifest-page .io-result-col #report {
  min-height: 8rem;
  margin-top: 0;
}

.rate-manifest-page { max-width: 1360px; }
.rate-manifest-page .io-layout { grid-template-columns: 1fr 520px; }
.rate-manifest-page .io-form-col .textarea-code {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.rate-manifest-page .io-result-col {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.rate-manifest-page .io-result-col .rate-manifest-result-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.rate-manifest-page .io-result-col .rate-manifest-verdict-sticky {
  flex-shrink: 0;
  background: var(--white);
  padding-bottom: 8px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--border);
}
.rate-manifest-page .io-result-col .rate-manifest-result-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin-top: 8px;
}
.rate-manifest-page .io-result-col .rate-manifest-columns {
  grid-template-columns: 1fr;
}
.rate-manifest-page .io-result-col .rate-manifest-card {
  margin-bottom: var(--app-section-gap, 12px);
}
@media (max-width: 1024px) {
  .rate-manifest-page .io-result-col {
    overflow-y: visible;
    max-height: none;
  }
  .rate-manifest-page .io-result-col .rate-manifest-result-scroll {
    overflow-y: visible;
    max-height: none;
  }
}

.polling-page { max-width: 1360px; }
.polling-page .polling-connection-form {
  display: flex;
  flex-direction: column;
  gap: var(--app-grid-gap-y, 0.5rem);
}
.polling-page .polling-connection-host-row {
  display: grid;
  grid-template-columns: minmax(10rem, 2fr) 5.5rem minmax(8rem, 1fr);
  gap: var(--app-grid-gap-y, 0.5rem) var(--app-grid-gap-x, 0.75rem);
  align-items: end;
}
.polling-page .polling-connection-auth-row {
  display: grid;
  grid-template-columns: minmax(9rem, 11rem) minmax(12rem, 1fr);
  gap: var(--app-grid-gap-y, 0.5rem) var(--app-grid-gap-x, 0.75rem);
  align-items: end;
}
.polling-page .polling-connection-host-row .field,
.polling-page .polling-connection-auth-row .field {
  min-width: 0;
}
.polling-page .polling-connection-host-row input,
.polling-page .polling-connection-auth-row input,
.polling-page .polling-connection-auth-row select {
  width: 100%;
}
@media (max-width: 640px) {
  .polling-page .polling-connection-host-row,
  .polling-page .polling-connection-auth-row {
    grid-template-columns: 1fr;
  }
}
.polling-page .io-form-col label.inline-opt {
  font-size: var(--app-input-size);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.polling-page .io-form-col label.inline-opt input[type="checkbox"] {
  width: auto;
  margin: 0;
}
.polling-page #polling-result {
  margin-top: 0;
}

/* BATCH / TEST PACKAGE */
.batch-status-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.batch-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--blue);
}
.batch-elapsed {
  font-weight: 400;
  color: var(--gray);
  font-variant-numeric: tabular-nums;
}
.batch-progress-bar {
  height: 8px;
  background: #e8eef6;
  border-radius: 4px;
  overflow: hidden;
}
.batch-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--cyan);
  transition: width 0.2s ease;
}
.batch-counters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  font-size: 14px;
}
.batch-counter strong {
  font-weight: 700;
  margin-left: 4px;
}
.batch-counter-pass strong { color: var(--green); }
.batch-counter-fail strong { color: var(--red); }
.batch-counter-truefail strong { color: #8a0000; }
.batch-counter-skip strong { color: var(--gray); }
.batch-summary {
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
  background: #f1f4f9;
}
.batch-summary-ok {
  background: #eef6e8;
  border: 1px solid #c5ddb0;
  color: #2f5204;
}
.batch-summary-fail {
  background: #fdeeee;
  border: 1px solid #f0b4b4;
  color: #8a0000;
}
.batch-log-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.batch-log-header h3 { margin: 0; }
.batch-log-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.batch-log-filters {
  display: inline-flex;
  gap: 4px;
}
.batch-filter-btn {
  padding: 4px 10px !important;
  font-size: 12px !important;
  font-family: var(--font);
  font-weight: 600;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--gray);
  border-radius: 4px;
  cursor: pointer;
}
.batch-filter-btn:hover { color: var(--blue); border-color: var(--blue); }
.batch-filter-btn.active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.batch-pause-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--gray);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
}
.batch-pause-label input { width: auto; margin: 0; }
.batch-log {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 420px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.45;
  background: #f8fafc;
}
.batch-log-item {
  padding: 6px 10px;
  border-bottom: 1px solid #eef2f7;
  border-left: 3px solid transparent;
}
.batch-log-item:last-child { border-bottom: none; }
.batch-log-tc {
  font-weight: 700;
  margin-right: 6px;
  color: var(--blue);
}
.batch-log-status { font-weight: 600; }
.batch-log-kind {
  color: var(--gray);
  margin-left: 4px;
}
.batch-log-pass {
  border-left-color: var(--green);
  background: #f4faf0;
}
.batch-log-fail {
  border-left-color: var(--red);
  background: #fff5f5;
}
.batch-log-expected {
  border-left-color: var(--orange);
  background: #fff8e8;
}
.batch-log-skip {
  border-left-color: var(--gray);
  background: #f3f4f5;
  color: #555;
}
.batch-log-info {
  border-left-color: var(--cyan);
}