:root {
  --brand: #0b574b;
  --brand-deep: #073b34;
  --brand-dark: #062f2a;
  --brand-bright: #16a085;
  --brand-soft: #e5f3ef;
  --accent: #efb34a;
  --ink: #13231f;
  --muted: #596963;
  --paper: #ffffff;
  --background: #f2f6f4;
  --background-deep: #e9f0ed;
  --line: #d8e2de;
  --line-strong: #a5b6af;
  --warning: #875006;
  --warning-bg: #fff4da;
  --error: #a52b23;
  --error-bg: #fff0ee;
  --success: #087248;
  --success-bg: #e2f5eb;
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 28px;
  --shadow-sm: 0 2px 10px rgb(14 48 40 / 6%);
  --shadow: 0 16px 46px rgb(14 48 40 / 10%);
  --shadow-lift: 0 20px 50px rgb(7 59 52 / 16%);
  font-size: 18px;
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  scroll-behavior: smooth;
  background: var(--background);
}

body {
  margin: 0;
  min-height: 100%;
  padding-bottom: 118px;
  color: var(--ink);
  background:
    radial-gradient(circle at 92% 1%, rgb(22 160 133 / 8%), transparent 28rem),
    linear-gradient(180deg, #f8faf9 0, var(--background) 28rem);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

a { color: var(--brand); text-underline-offset: 4px; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 4px solid var(--accent);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  z-index: 200;
  top: 10px;
  left: 10px;
  padding: 12px 18px;
  color: var(--brand-dark);
  background: #fff;
  border-radius: 10px;
  box-shadow: var(--shadow);
  transform: translateY(-180%);
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: sticky;
  z-index: 30;
  top: 0;
  background: rgb(255 255 255 / 88%);
  border-bottom: 1px solid rgb(216 226 222 / 84%);
  backdrop-filter: blur(18px) saturate(150%);
}
.header-inner {
  width: min(100% - 36px, 1180px);
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 auto;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
}
.brand-mark {
  position: relative;
  isolation: isolate;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(145deg, var(--brand-bright), var(--brand-deep));
  border-radius: 15px;
  box-shadow: 0 9px 22px rgb(11 87 75 / 22%);
  font-size: .86rem;
  font-weight: 850;
  letter-spacing: -.04em;
}
.brand-mark::after {
  position: absolute;
  z-index: -1;
  right: -17px;
  bottom: -22px;
  width: 50px;
  height: 50px;
  content: "";
  background: rgb(255 255 255 / 18%);
  border-radius: 50%;
}
.brand-copy strong, .brand-copy small, .account-pill strong, .account-pill small { display: block; }
.brand-copy strong { font-size: 1rem; letter-spacing: -.02em; }
.brand-copy small { color: var(--muted); font-size: .72rem; }
.account-pill {
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 7px;
  color: var(--ink);
  background: var(--background);
  border: 1px solid var(--line);
  border-radius: 16px;
  text-decoration: none;
}
.account-pill:hover { background: var(--brand-soft); border-color: #a4ccc1; }
.account-pill strong { max-width: 190px; overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.account-pill small { color: var(--muted); font-size: .65rem; }
.header-account-actions { display: flex; align-items: center; gap: 8px; }
.header-logout {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  color: var(--error);
  background: #fff;
  border: 1px solid #e3b5b1;
  border-radius: 14px;
  font-size: .75rem;
  font-weight: 800;
  text-decoration: none;
}
.header-logout:hover { background: var(--error-bg); border-color: var(--error); }
.header-logout svg { width: 19px; height: 19px; }
.account-avatar {
  width: 36px;
  height: 36px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  color: #fff;
  background: var(--brand);
  border-radius: 11px;
  font-size: .8rem;
  font-weight: 850;
}
.offline-notice {
  position: relative;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 16px;
  color: #593000;
  background: var(--warning-bg);
  border-bottom: 1px solid #e7c87f;
  font-size: .82rem;
}
.offline-notice strong::before { content: "●"; margin-right: 7px; }

.messages { width: min(100% - 32px, 920px); margin: 18px auto 0; }
.message {
  margin: 0;
  padding: 15px 18px;
  background: var(--paper);
  border: 1px solid #91bcb0;
  border-left: 5px solid var(--brand);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.message-error { background: var(--error-bg); border-color: #d99691; border-left-color: var(--error); }
.message-success { background: var(--success-bg); border-color: #8cc5a8; border-left-color: var(--success); }

.page-shell {
  width: min(100% - 36px, 1120px);
  margin: 0 auto;
  padding: clamp(28px, 5vw, 58px) 0 48px;
}
.site-footer {
  width: min(100% - 36px, 1120px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 18px;
  padding: 16px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  font-size: .75rem;
}
.site-footer a { min-height: 44px; display: inline-flex; align-items: center; font-weight: 760; }
.site-footer span::before { margin-right: 10px; content: "·"; }
.narrow-card, .form-page, .review-page, .result-page { width: min(100%, 760px); margin: 0 auto; }
.narrow-card {
  padding: clamp(24px, 5vw, 48px);
  background: rgb(255 255 255 / 94%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.login-card { position: relative; overflow: hidden; }
.login-card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 6px;
  content: "";
  background: linear-gradient(90deg, var(--brand-deep), var(--brand-bright), var(--accent));
}
.login-card .button-primary { width: 100%; }
h1, h2, h3 {
  color: var(--brand-dark);
  line-height: 1.15;
  letter-spacing: -.035em;
}
h1 { margin: 0 0 18px; font-size: clamp(1.85rem, 5.5vw, 3rem); }
h2 { margin-top: 34px; font-size: clamp(1.28rem, 3vw, 1.55rem); }
h3 { font-size: 1.05rem; }
p { margin-top: 0; }
.eyebrow {
  margin: 0 0 8px;
  color: var(--brand);
  font-size: .73rem;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.center { text-align: center; }
.section-title { margin: 0; font-size: 1.15rem; letter-spacing: -.02em; }
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 16px;
}
.section-heading a { min-height: 48px; display: inline-flex; align-items: center; font-size: .86rem; font-weight: 750; }

.dashboard-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 390px);
  align-items: center;
  gap: clamp(28px, 6vw, 70px);
  overflow: hidden;
  margin-bottom: 38px;
  padding: clamp(28px, 5vw, 58px);
  color: #fff;
  background:
    radial-gradient(circle at 92% 18%, rgb(44 190 162 / 45%), transparent 15rem),
    linear-gradient(125deg, #052f2a 0%, #0a5a4d 72%, #087765 100%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}
.dashboard-hero::before, .dashboard-hero::after {
  position: absolute;
  content: "";
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 50%;
}
.dashboard-hero::before { top: -115px; right: 24%; width: 270px; height: 270px; }
.dashboard-hero::after { right: -75px; bottom: -130px; width: 330px; height: 330px; }
.hero-copy, .primary-action { position: relative; z-index: 1; }
.dashboard-hero .eyebrow { color: #9de3d5; }
.dashboard-hero h1 { max-width: 560px; margin-bottom: 12px; color: #fff; }
.hero-intro { max-width: 550px; margin: 0; color: #d8ebe6; font-size: 1.02rem; }
.primary-action {
  min-height: 92px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 17px 18px;
  color: var(--brand-dark);
  background: #fff;
  border: 1px solid rgb(255 255 255 / 65%);
  border-radius: 20px;
  box-shadow: 0 18px 38px rgb(3 37 32 / 28%);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.primary-action:hover { transform: translateY(-3px); box-shadow: 0 24px 44px rgb(3 37 32 / 36%); }
.primary-action strong, .primary-action small, .action-card strong, .action-card small { display: block; }
.primary-action strong { font-size: 1.03rem; }
.primary-action small { margin-top: 2px; color: var(--muted); font-size: .76rem; }
.action-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--brand);
  border-radius: 16px;
}
.action-icon svg { width: 25px; height: 25px; stroke-width: 2.4; }
.action-arrow { width: 24px; height: 24px; color: var(--brand); }

.quick-actions { margin-bottom: 26px; }
.quick-actions > .section-title { margin-bottom: 16px; }
.home-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.action-card {
  min-height: 128px;
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 21px;
  color: var(--ink);
  background: rgb(255 255 255 / 92%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.action-card:hover { transform: translateY(-3px); border-color: #9fc8bd; box-shadow: var(--shadow); }
.action-card-icon {
  width: 44px;
  height: 44px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  color: var(--brand);
  background: var(--brand-soft);
  border-radius: 13px;
}
.action-card-icon svg { width: 23px; height: 23px; }
.action-card strong { margin-top: 2px; font-size: .91rem; }
.action-card small { margin-top: 6px; color: var(--muted); font-size: .74rem; line-height: 1.4; }
.action-card-dark { color: #fff; background: linear-gradient(145deg, #163a33, #0b2925); border-color: #163a33; }
.action-card-dark .action-card-icon { color: #fff; background: rgb(255 255 255 / 13%); }
.action-card-dark small { color: #c5dad4; }

.summary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 0 0 42px; }
.summary-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  overflow: hidden;
  padding: 22px 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.summary-card::before { position: absolute; inset: 0 auto 0 0; width: 4px; content: ""; background: var(--brand-bright); }
.summary-card strong { grid-area: 1 / 2 / 3 / 3; align-self: center; color: var(--brand); font-size: 2.25rem; line-height: 1; }
.summary-label { font-weight: 780; }
.summary-detail { color: var(--muted); font-size: .75rem; }
.recent-section { margin-top: 6px; }

.button {
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 21px;
  border: 1px solid transparent;
  border-radius: 14px;
  font-weight: 780;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.button:hover { transform: translateY(-1px); }
.button-primary { color: #fff; background: linear-gradient(145deg, #0c6a5a, var(--brand)); border-color: var(--brand); box-shadow: 0 8px 20px rgb(11 87 75 / 18%); }
.button-primary:hover { background: var(--brand-dark); }
.button-secondary { color: var(--brand-dark); background: var(--paper); border-color: var(--line-strong); }
.button-secondary:hover { background: var(--brand-soft); border-color: var(--brand); }
.button-dark { color: #fff; background: var(--brand-dark); border-color: var(--brand-dark); }
.button-danger { color: #fff; background: var(--error); border-color: var(--error); }
.button[disabled] { opacity: .6; cursor: wait; transform: none; }

.stacked-form { display: grid; gap: 22px; }
.form-page > h1, .review-page > h1 { margin-bottom: 26px; }
.form-page, .review-page {
  padding: clamp(23px, 5vw, 44px);
  background: rgb(255 255 255 / 78%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.field { display: grid; gap: 8px; min-width: 0; }
.field label, legend { color: var(--ink); font-weight: 760; }
.field input:not([type="checkbox"]), .field select, .field textarea {
  min-height: 58px;
  width: 100%;
  padding: 13px 15px;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--line-strong);
  border-radius: 13px;
  box-shadow: inset 0 1px 2px rgb(14 48 40 / 3%);
}
.field textarea { min-height: 112px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #728b82; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgb(22 160 133 / 12%); }
.field small { color: var(--muted); }
.field-checkbox { grid-template-columns: 32px 1fr; align-items: start; gap: 12px; }
.field-checkbox input { width: 27px; height: 27px; margin: 2px 0; accent-color: var(--brand); }
.field-checkbox label { padding-top: 2px; }
.field-row { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; }
.field-link { min-height: 48px; display: flex; align-items: center; width: fit-content; font-size: .88rem; font-weight: 750; }
.autocomplete-field { position: relative; }
[data-autocomplete-ui] { display: grid; gap: 8px; }
.autocomplete-suggestions {
  z-index: 20;
  max-height: 310px;
  overflow-y: auto;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 13px;
  box-shadow: var(--shadow-lift);
}
.autocomplete-option {
  min-height: 52px;
  width: 100%;
  padding: 10px 12px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 9px;
  font: inherit;
  font-weight: 680;
  text-align: left;
  cursor: pointer;
}
.autocomplete-option:hover, .autocomplete-option:focus { background: var(--brand-soft); outline: none; }
.autocomplete-empty { margin: 0; padding: 13px; color: var(--muted); }
.errorlist { margin: 0; padding-left: 22px; color: var(--error); font-weight: 700; }
.field-error input, .field-error select, .field-error textarea { border-color: var(--error); }
.error-summary { margin: 0 0 22px; padding: 17px; color: #68160f; background: var(--error-bg); border: 1px solid #d78983; border-left: 5px solid var(--error); border-radius: var(--radius-sm); }

.contracting-choice { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; }
.contracting-choice > legend { margin-bottom: 2px; font-size: 1.12rem; }
.contracting-choice > p { margin: 0 0 4px; color: var(--muted); }
.contracting-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.contracting-card {
  min-height: 150px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: start;
  gap: 13px;
  padding: 20px;
  background: #fff;
  border: 2px solid var(--line-strong);
  border-radius: 17px;
  cursor: pointer;
}
.contracting-card:has(input:checked) { background: var(--brand-soft); border-color: var(--brand); box-shadow: 0 0 0 4px rgb(22 160 133 / 10%); }
.contracting-card:has(input:focus-visible) { outline: 4px solid var(--accent); outline-offset: 3px; }
.contracting-card input { width: 27px; height: 27px; margin: 1px 0 0; accent-color: var(--brand); }
.contracting-card strong, .contracting-card small { display: block; }
.contracting-card strong { margin-bottom: 7px; font-size: 1rem; }
.contracting-card small { color: var(--muted); line-height: 1.45; }
.contracting-card-disabled { opacity: .62; cursor: not-allowed; }
.contracting-choice.field-error .contracting-card { border-color: var(--error); }

.legal-card, .warning-box, .confirmation-box { padding: 18px; border-radius: var(--radius-sm); }
.legal-card { background: var(--brand-soft); border: 1px solid #bcdcd3; border-left: 5px solid var(--brand); }
.legal-card p { margin: 5px 0; }
.legal-card small { color: #344941; }
.warning-box { margin: 16px 0 24px; color: #593000; background: var(--warning-bg); border: 1px solid #dfb85f; border-left: 5px solid #b46a11; }
.warning-box p { margin: 5px 0 0; }
.confirmation-box { background: var(--brand-soft); border: 1px solid var(--brand); }
.progressive-panel, .shipment-card { margin: 0; padding: 20px; border: 1px solid var(--line); border-radius: 16px; }
.shipment-card { display: grid; gap: 18px; background: var(--paper); }
.shipment-card legend { padding: 0 8px; color: var(--brand-dark); font-size: 1.12rem; }
.cargo-item-card { display: grid; gap: 16px; padding: 18px; background: var(--background); border: 1px solid var(--line); border-radius: 14px; }
.cargo-item-card h3 { margin: 0; }
.cargo-item-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.button-link { min-height: 44px; padding: 6px 8px; background: transparent; border: 0; border-radius: 8px; font: inherit; font-weight: 760; text-decoration: underline; cursor: pointer; }
.danger-link { color: var(--error); }
.cargo-item-secondary { background: var(--brand-soft); border-color: #bcdcd3; }
.cargo-measures { grid-template-columns: minmax(110px, .65fr) minmax(140px, 1fr) minmax(95px, .55fr); }
.route-summary { padding: 12px 14px; background: var(--background); border-radius: 10px; }
details { overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; }
summary { min-height: 56px; display: flex; align-items: center; padding: 11px 16px; color: var(--brand-dark); font-weight: 760; cursor: pointer; }
details[open] > :not(summary) { margin: 16px; }

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: min(100%, 630px);
  margin: 0 auto 28px;
  padding: 0;
  color: var(--muted);
  font-size: .75rem;
  list-style: none;
}
.steps li { position: relative; text-align: center; }
.steps li:not(:last-child)::after { position: absolute; z-index: -1; top: 19px; left: calc(50% + 25px); width: calc(100% - 50px); height: 2px; content: ""; background: var(--line); }
.steps span { width: 40px; height: 40px; display: grid; place-items: center; margin: 0 auto 7px; background: var(--paper); border: 2px solid var(--line-strong); border-radius: 50%; font-weight: 800; }
.steps .current { color: var(--brand-dark); font-weight: 760; }
.steps .current span, .steps .done span { color: #fff; background: var(--brand); border-color: var(--brand); }
.steps .done span { font-size: 0; }
.steps .done span::after { content: "✓"; font-size: 16px; }

.review-section, .data-card {
  margin: 16px 0;
  padding: 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.review-section h2, .data-card h2 { margin: 0 0 14px; font-size: 1.18rem; }
dl { display: grid; grid-template-columns: minmax(150px, 1fr) 2fr; gap: 9px 16px; margin: 0; }
dt { font-weight: 760; }
dd { margin: 0; }
.review-shipment + .review-shipment { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--line); }
.button-create { width: 100%; min-height: 68px; font-size: 1.07rem; }

.result-page {
  padding: clamp(24px, 5vw, 46px);
  text-align: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.success-symbol, .warning-symbol { width: 76px; height: 76px; display: grid; place-items: center; margin: 0 auto 14px; color: #fff; border-radius: 24px; font-size: 2.2rem; font-weight: 800; }
.success-symbol { background: linear-gradient(145deg, #10a265, #087248); }
.warning-symbol { background: linear-gradient(145deg, #c78118, #875006); }
.document-number { color: var(--muted); font-weight: 700; }
.verification-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 18px 0; }
.verification-grid p { padding: 16px; background: var(--success-bg); border: 1px solid #9bceb3; border-radius: 13px; }
.verification-grid span, .verification-grid strong { display: block; }
.verification-grid strong { color: var(--success); }
.result-qr { width: min(280px, 78vw); padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-sm); }
.result-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 24px 0; }
.email-panel { margin-top: 20px; text-align: left; }
.text-action { min-height: 52px; display: inline-flex; align-items: center; margin-top: 18px; font-weight: 750; }
.status { display: inline-flex; align-items: center; padding: 6px 10px; border: 1px solid transparent; border-radius: 999px; font-size: .76rem; font-weight: 760; }
.status-ok { color: #075d3c; background: var(--success-bg); border-color: #a7d5bd; }
.status-ok::before { margin-right: 6px; content: "✓"; }
.status-warning { color: #6e3b00; background: var(--warning-bg); border-color: #e4c271; }
.status-neutral { color: #485852; background: #edf1ef; border-color: #c9d2ce; }

.search-panel {
  display: grid;
  gap: 9px;
  margin-bottom: 22px;
  padding: 18px;
  background: rgb(255 255 255 / 92%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.search-panel > label { font-weight: 780; }
.search-control { display: flex; gap: 10px; }
.search-control input {
  min-height: 56px;
  width: 100%;
  min-width: 0;
  padding: 12px 15px;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--line-strong);
  border-radius: 13px;
}
.search-control .button { flex: 0 0 auto; }
.search-field .search-control input { min-height: 58px; }

.route-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 15px;
  margin: 0;
  padding: 20px;
  background: var(--background);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.route-panel > legend { padding: 0 8px; }
.route-fieldset { display: grid; align-content: start; gap: 15px; }
.route-arrow {
  width: 38px;
  height: 38px;
  display: grid;
  align-self: center;
  place-items: center;
  color: #fff;
  background: var(--brand);
  border-radius: 50%;
  font-weight: 850;
}

.amendment-panel {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 20px;
  background: var(--background);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.amendment-panel legend { padding: 0 8px; color: var(--brand-dark); font-size: 1.05rem; }
.current-value { margin: 0; padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: 11px; }

.document-list { display: grid; gap: 11px; }
.document-row {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  color: var(--ink);
  background: rgb(255 255 255 / 94%);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.document-row:hover { transform: translateX(3px); border-color: #9fc8bd; box-shadow: var(--shadow); }
.document-row strong, .document-row small { display: block; }
.document-row small { margin-top: 4px; color: var(--muted); }
.document-main { min-width: 0; }
.document-main strong { overflow-wrap: anywhere; font-size: 1rem; }
.document-route { overflow: hidden; max-width: 760px; text-overflow: ellipsis; white-space: nowrap; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.page-heading h1 { margin-bottom: 0; }
.master-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.master-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.master-record + .master-record { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }

.management-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 28px;
  margin-bottom: 20px;
  padding: clamp(24px, 4vw, 38px);
  color: #e4f3ef;
  background: linear-gradient(130deg, var(--brand-dark), #0a6959);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.management-hero h1 { margin-bottom: 8px; color: #fff; }
.management-hero p { margin-bottom: 0; }
.management-hero .eyebrow { color: #9de3d5; }
.management-summary { display: grid; grid-template-columns: repeat(2, minmax(100px, 1fr)); gap: 8px; }
.management-summary span { padding: 12px 14px; background: rgb(255 255 255 / 10%); border: 1px solid rgb(255 255 255 / 13%); border-radius: 13px; font-size: .72rem; }
.management-summary strong { display: block; color: #fff; font-size: 1.25rem; }
.management-summary .summary-pending { background: rgb(239 179 74 / 20%); border-color: rgb(239 179 74 / 52%); }
.review-inbox {
  margin: 22px 0 24px;
  padding: 22px;
  background: rgb(255 255 255 / 82%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.review-inbox-active { background: linear-gradient(145deg, #fffaf0, #fff); border-color: #e7c87f; }
.review-inbox-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.review-inbox-heading h2 { margin-bottom: 7px; }
.review-inbox-heading p:last-child { max-width: 780px; margin-bottom: 0; color: var(--muted); }
.pending-count {
  min-width: 31px;
  min-height: 31px;
  display: inline-grid;
  place-items: center;
  margin-left: 5px;
  padding: 2px 9px;
  color: #6e3b00;
  background: var(--warning-bg);
  border: 1px solid #e4c271;
  border-radius: 999px;
  font-size: .78rem;
  vertical-align: middle;
}
.review-record { border-color: #ead39a; }
.record-icon-warning { color: #6e3b00; background: var(--warning-bg); }
.compact-empty-ok { color: var(--success); background: var(--success-bg); }
.review-guidance {
  margin: 0 0 24px;
  padding: 17px 19px;
  color: #593000;
  background: var(--warning-bg);
  border: 1px solid #e4c271;
  border-radius: 14px;
}
.review-guidance p { margin: 5px 0 0; }
.logout-card { border-color: #e3b5b1; }
.management-filters {
  display: grid;
  grid-template-columns: minmax(230px, 2fr) minmax(150px, 1fr) minmax(150px, 1fr) auto auto;
  align-items: end;
  gap: 12px;
  margin: 24px 0 32px;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.management-filters .button { min-height: 58px; }
.management-filters .field-link { min-height: 58px; }
.management-sections { display: grid; gap: 22px; }
.management-section {
  padding: 22px;
  background: rgb(255 255 255 / 82%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.management-section .section-heading { margin-bottom: 18px; }
.management-section .section-heading .eyebrow { margin-bottom: 5px; }
.management-list { display: grid; gap: 8px; }
.management-record {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 13px;
  min-height: 72px;
  padding: 11px 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.record-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--brand);
  background: var(--brand-soft);
  border-radius: 12px;
  font-size: .7rem;
  font-weight: 850;
}
.record-copy { min-width: 0; }
.record-copy strong, .record-copy small { display: block; }
.record-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record-copy small { overflow: hidden; margin-top: 2px; color: var(--muted); font-size: .73rem; text-overflow: ellipsis; white-space: nowrap; }
.record-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.button-compact { min-height: 42px; padding: 8px 13px; border-radius: 11px; font-size: .76rem; }
.text-button { padding: 7px; color: var(--brand); background: transparent; border: 0; font-size: .7rem; font-weight: 740; cursor: pointer; }
.compact-empty { padding: 24px; color: var(--muted); background: var(--background); border-radius: 13px; text-align: center; }
.section-heading-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
.managed-transport-card {
  margin-bottom: 24px;
  padding: 20px;
  background: var(--brand-soft);
  border: 1px solid #a8d2c7;
  border-radius: 18px;
}
.managed-transport-card h2 { margin-bottom: 10px; }
.managed-transport-card > p { margin-bottom: 16px; }
.managed-transport-card .master-actions { margin-bottom: 16px; }
.managed-fleet-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.managed-fleet-list a {
  min-height: 74px;
  display: grid;
  align-content: center;
  padding: 12px 14px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  text-decoration: none;
}
.managed-fleet-list a:hover { border-color: var(--brand); }
.managed-fleet-list span, .managed-fleet-list strong, .managed-fleet-list small { display: block; }
.managed-fleet-list span { color: var(--brand); font-size: .65rem; font-weight: 800; text-transform: uppercase; }
.managed-fleet-list small { color: var(--muted); }

.legal-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 32px;
  margin-bottom: 18px;
  padding: clamp(28px, 5vw, 50px);
  color: #e5f4f0;
  background:
    radial-gradient(circle at 92% 18%, rgb(239 179 74 / 25%), transparent 13rem),
    linear-gradient(130deg, var(--brand-dark), #0a6959);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}
.legal-hero h1 { margin-bottom: 10px; color: #fff; }
.legal-hero p { margin-bottom: 0; }
.legal-hero .eyebrow { color: #9de3d5; }
.legal-review-badge {
  min-width: 210px;
  padding: 15px 17px;
  background: rgb(255 255 255 / 10%);
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 15px;
}
.legal-review-badge span, .legal-review-badge strong { display: block; }
.legal-review-badge span { color: #bde6dc; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }
.legal-review-badge strong { margin-top: 4px; color: #fff; font-size: .9rem; }
.legal-disclaimer {
  margin: 0 0 20px;
  padding: 18px 20px;
  color: #5f420b;
  background: #fff8e9;
  border: 1px solid #e7cb8f;
  border-left: 5px solid var(--accent);
  border-radius: 15px;
}
.legal-disclaimer p { margin: 5px 0 0; font-size: .86rem; }
.legal-index {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 26px;
}
.legal-index a {
  min-height: 88px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: center;
  column-gap: 10px;
  padding: 15px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 15px;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}
.legal-index a:hover { border-color: #9bc5ba; box-shadow: var(--shadow); }
.legal-index span { grid-row: 1 / 3; color: var(--brand-bright); font-size: 1.15rem; font-weight: 850; }
.legal-index strong, .legal-index small { display: block; }
.legal-index small { color: var(--muted); font-size: .68rem; }
.legal-sections { display: grid; gap: 24px; }
.legal-reference {
  padding: clamp(22px, 4vw, 34px);
  background: rgb(255 255 255 / 90%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  scroll-margin-top: 100px;
}
.legal-reference-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 22px;
  padding-bottom: 19px;
  border-bottom: 1px solid var(--line);
}
.legal-reference-heading h2, .legal-reference-compact h2, .legal-pdf-note h2 { margin: 0 0 7px; }
.legal-reference-heading p { margin: 0; color: var(--muted); }
.legal-reference-heading .button { flex: 0 0 auto; }
.legal-topic-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.legal-topic-grid article {
  position: relative;
  padding: 19px;
  background: var(--background);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.legal-topic-grid article.legal-topic-primary { background: var(--brand-soft); border-color: #9fcbbf; }
.legal-topic-grid h3 { margin: 7px 0 8px; }
.legal-topic-grid p { margin-bottom: 13px; color: #384a44; font-size: .84rem; }
.legal-topic-grid a { min-height: 44px; display: inline-flex; align-items: center; font-size: .78rem; font-weight: 760; }
.legal-topic-number { color: var(--brand); font-size: .68rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.legal-source-line { margin: 20px 0 0; padding-top: 16px; color: var(--muted); border-top: 1px solid var(--line); font-size: .75rem; }
.legal-reference-compact { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 28px; }
.legal-reference-compact p { margin-bottom: 0; }
.legal-links { display: flex; align-items: center; flex-direction: column; gap: 8px; }
.legal-pdf-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  margin-top: 24px;
  padding: 21px;
  background: var(--brand-soft);
  border: 1px solid #a8d2c7;
  border-radius: 18px;
}
.legal-pdf-note p { margin: 0; }
.setup-steps { padding-left: 24px; }
.setup-qr { display: block; width: min(280px, 80vw); margin: 20px auto; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.secret-value { overflow-wrap: anywhere; padding: 14px; background: var(--background); border-radius: 9px; }
.recovery-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0; list-style: none; }
.recovery-codes li { padding: 12px; background: var(--background); border: 1px solid var(--line); border-radius: 9px; text-align: center; }
.session-list { display: grid; gap: 14px; margin-bottom: 18px; }

.inspection-card { padding: 21px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.inspection-card span { display: block; margin-top: 5px; }
.inspection-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 17px; }
.inspection-qr { display: block; width: min(300px, 100%); margin: 18px auto 0; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.empty-state { padding: 36px 28px; text-align: center; background: var(--paper); border: 1px dashed var(--line-strong); border-radius: var(--radius); }

.bottom-nav {
  position: fixed;
  z-index: 40;
  right: 50%;
  bottom: 18px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  max-width: calc(100% - 28px);
  padding: 7px;
  background: rgb(255 255 255 / 92%);
  border: 1px solid rgb(189 207 200 / 85%);
  border-radius: 22px;
  box-shadow: 0 17px 45px rgb(8 49 42 / 18%);
  backdrop-filter: blur(20px) saturate(160%);
  transform: translateX(50%);
}
.bottom-nav a {
  min-width: 94px;
  min-height: 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 12px;
  color: var(--muted);
  border-radius: 16px;
  font-size: .66rem;
  font-weight: 720;
  text-align: center;
  text-decoration: none;
}
.bottom-nav svg { width: 22px; height: 22px; }
.bottom-nav a:hover, .bottom-nav a[aria-current="page"] { color: var(--brand); background: var(--brand-soft); }
.bottom-nav .nav-create { color: #fff; background: var(--brand); }
.bottom-nav .nav-create:hover, .bottom-nav .nav-create[aria-current="page"] { color: #fff; background: var(--brand-dark); }
.update-notice {
  position: fixed;
  z-index: 50;
  right: 18px;
  bottom: 108px;
  max-width: 390px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  color: #fff;
  background: var(--brand-dark);
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 16px;
  box-shadow: var(--shadow-lift);
}
.update-notice button { min-height: 48px; padding: 8px 14px; color: var(--brand-dark); background: #fff; border: 0; border-radius: 11px; font-weight: 800; }

@media (max-width: 820px) {
  .dashboard-hero { grid-template-columns: 1fr; }
  .home-actions { grid-template-columns: 1fr 1fr; }
  .action-card-dark { grid-column: 1 / -1; }
  .bottom-nav .nav-account { display: none; }
  .management-filters { grid-template-columns: 1fr 1fr; }
  .management-filters .filter-search { grid-column: 1 / -1; }
  .management-record { grid-template-columns: auto minmax(0, 1fr) auto; }
  .management-record > .status { grid-area: 2 / 2 / 3 / 3; justify-self: start; }
  .management-record > .button, .management-record > .record-actions { grid-area: 1 / 3 / 3 / 4; }
  .legal-hero, .legal-reference-compact { grid-template-columns: 1fr; }
  .legal-review-badge { min-width: 0; }
  .legal-index { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  :root { font-size: 17px; }
  body { padding-bottom: 100px; }
  .header-inner { width: min(100% - 24px, 1180px); min-height: 68px; }
  .brand-mark { width: 43px; height: 43px; border-radius: 13px; }
  .brand-copy strong { font-size: .9rem; }
  .brand-copy small { font-size: .65rem; }
  .account-pill { min-height: 44px; padding: 4px; border: 0; background: transparent; }
  .account-pill > span:last-child { display: none; }
  .account-avatar { width: 39px; height: 39px; border-radius: 12px; }
  .header-account-actions { gap: 4px; }
  .header-logout { min-height: 44px; padding: 6px 9px; }
  .offline-notice { align-items: flex-start; flex-direction: column; gap: 1px; padding: 9px 14px; }
  .page-shell { width: min(100% - 20px, 1120px); padding-top: 22px; }
  .dashboard-hero { gap: 24px; margin-bottom: 27px; padding: 27px 22px; border-radius: 23px; }
  .dashboard-hero h1 { font-size: 2rem; }
  .primary-action { min-height: 82px; padding: 14px; }
  .action-icon { width: 48px; height: 48px; }
  .home-actions, .summary-grid, .master-grid, .result-actions, .verification-grid, .recovery-codes { grid-template-columns: 1fr; }
  .action-card, .action-card-dark { min-height: 96px; grid-column: auto; padding: 17px; }
  .summary-grid { gap: 10px; }
  .summary-card { padding: 18px 20px; }
  .form-page, .review-page, .result-page { padding: 22px 17px; border-radius: 21px; }
  .steps { font-size: .64rem; }
  .steps span { width: 36px; height: 36px; }
  .steps li:not(:last-child)::after { top: 17px; }
  .field-row { grid-template-columns: 1fr; }
  .contracting-options { grid-template-columns: 1fr; }
  .contracting-card { min-height: 0; }
  dl { grid-template-columns: 1fr; gap: 2px; }
  dd { margin-bottom: 11px; }
  .page-heading { align-items: stretch; flex-direction: column; }
  .document-row { align-items: flex-start; flex-direction: column; gap: 10px; }
  .document-route { max-width: 100%; white-space: normal; }
  .search-control { flex-direction: column; }
  .route-panel { grid-template-columns: 1fr; }
  .route-arrow { transform: rotate(90deg); }
  .management-hero { grid-template-columns: 1fr; }
  .management-summary { width: 100%; }
  .management-filters { grid-template-columns: 1fr; }
  .managed-fleet-list { grid-template-columns: 1fr; }
  .management-filters .filter-search { grid-column: auto; }
  .review-inbox { padding: 19px 15px; }
  .review-inbox-heading { align-items: stretch; flex-direction: column; }
  .management-record, .management-user { grid-template-columns: auto minmax(0, 1fr); }
  .management-record > .status { grid-area: auto; justify-self: start; margin-left: 55px; }
  .management-record > .button, .management-record > .record-actions { grid-area: auto; justify-self: stretch; margin-left: 55px; }
  .record-actions { flex-wrap: wrap; }
  .site-footer { align-items: flex-start; flex-direction: column; gap: 0; }
  .site-footer span::before { display: none; }
  .legal-reference-heading { align-items: stretch; flex-direction: column; }
  .legal-reference-heading .button { width: 100%; }
  .legal-topic-grid { grid-template-columns: 1fr; }
  .legal-links { align-items: stretch; }
  .legal-pdf-note { grid-template-columns: 1fr; }
  .inspection-actions { grid-template-columns: 1fr; }
  .bottom-nav { right: 0; bottom: 0; left: 0; max-width: none; padding: 5px max(5px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(5px, env(safe-area-inset-left)); border-right: 0; border-bottom: 0; border-left: 0; border-radius: 18px 18px 0 0; transform: none; }
  .bottom-nav a { min-width: 0; min-height: 65px; flex: 1 1 0; padding: 5px 3px; font-size: .6rem; }
  .bottom-nav svg { width: 21px; height: 21px; }
  .update-notice { right: 10px; bottom: 86px; left: 10px; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

@media print {
  .site-header, .bottom-nav, .button, .offline-notice, .update-notice { display: none !important; }
  body { padding: 0; background: #fff; }
  .result-page { border: 0; box-shadow: none; }
}