@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/atkinson-hyperlegible-latin-ext-400-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-02FF, U+0304, U+0308, U+0329, U+1E00-1EFF, U+2020, U+20A0-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/atkinson-hyperlegible-latin-ext-700-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0100-02FF, U+0304, U+0308, U+0329, U+1E00-1EFF, U+2020, U+20A0-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("fonts/barlow-condensed-latin-ext-700-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0100-02FF, U+0304, U+0308, U+0329, U+1E00-1EFF, U+2020, U+20A0-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("fonts/barlow-condensed-latin-700-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #201a12;
  --ink-soft: #373128;
  --muted: #66635c;
  --surface: #fff;
  --canvas: #f6f5f1;
  --line: #e3dfd6;
  --yellow: #f7c644;
  --yellow-strong: #ffb300;
  --yellow-soft: #fff4d5;
  --green: #247347;
  --green-soft: #eaf4ed;
  --red: #b33c2b;
  --red-soft: #fff0eb;
  --blue: #285c87;
  --blue-soft: #edf5fb;
  --shadow: 0 24px 60px rgba(32, 26, 18, .12);
  --sidebar: 246px;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--canvas); }
body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

button, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, select:focus-visible { outline: 3px solid rgba(255,179,0,.48); outline-offset: 2px; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1, h2, h3 { margin: 0; line-height: 1.08; }
h1, h2 { font-family: "Barlow Condensed", sans-serif; letter-spacing: -.01em; }
h2 { font-size: clamp(31px, 4vw, 48px); }
h3 { font-size: 20px; }
p { margin: 0; line-height: 1.55; }
small { line-height: 1.4; }
.noscript { padding: 20px; background: var(--red-soft); color: var(--red); font-weight: 700; }

.loading {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
}

.loading-mark {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  background: var(--yellow);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 26px;
  font-weight: 700;
}

.app-shell { min-height: 100vh; }

.demo-strip {
  position: sticky;
  z-index: 30;
  top: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 22px;
  background: var(--ink);
  color: white;
}

.demo-strip > div { display: flex; align-items: center; gap: 10px; min-width: 0; }
.demo-strip strong { white-space: nowrap; }
.demo-strip span:not(.demo-badge) { overflow: hidden; color: #d8d2c7; text-overflow: ellipsis; white-space: nowrap; }
.demo-badge { padding: 4px 8px; background: var(--yellow); color: var(--ink); font-size: 11px; font-weight: 700; letter-spacing: .08em; }

.role-switcher { display: flex; align-items: center; gap: 8px; }
.role-switcher label { color: #d8d2c7; font-size: 12px; }
.role-switcher select {
  min-height: 32px;
  padding: 4px 28px 4px 10px;
  border: 1px solid #5a554d;
  border-radius: 4px;
  background: #312b23;
  color: white;
}

.main-grid { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: calc(100vh - 44px); }
.sidebar {
  position: sticky;
  top: 44px;
  height: calc(100vh - 44px);
  display: flex;
  flex-direction: column;
  padding: 24px 16px 16px;
  border-right: 1px solid var(--line);
  background: var(--surface);
}

.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 22px; }
.brand-mark { display: grid; place-items: center; width: 48px; height: 40px; background: var(--yellow); font-family: "Barlow Condensed", sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.brand div { display: grid; gap: 1px; }
.brand strong { font-family: "Barlow Condensed", sans-serif; font-size: 25px; }
.brand small { color: var(--muted); }

.nav { display: grid; gap: 4px; }
.nav button {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.nav button:hover { background: var(--canvas); }
.nav button.active { background: var(--yellow-soft); font-weight: 700; }
.nav button.active .icon { color: #8c5f00; }

.sidebar-foot { margin-top: auto; display: grid; gap: 10px; padding: 18px 8px 0; border-top: 1px solid var(--line); }
.sidebar-foot small { color: var(--muted); }

.content { min-width: 0; padding: clamp(20px, 3.4vw, 48px); }
.content-inner { width: min(1280px, 100%); margin: 0 auto; display: grid; gap: 22px; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.page-head > div { display: grid; gap: 8px; }
.page-head p { max-width: 700px; color: var(--muted); }
.eyebrow { color: #8a6508; font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }

.button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface);
  cursor: pointer;
  font-weight: 700;
}
.button:hover { border-color: #c9c3b8; background: #fbfaf7; }
.button.primary { border-color: var(--yellow-strong); background: var(--yellow); }
.button.primary:hover { background: #ffc52d; }
.button.compact { min-height: 34px; padding: 6px 10px; font-size: 13px; }
.button.dark { border-color: var(--ink); background: var(--ink); color: white; }
.button.text { min-height: auto; padding: 2px; border: 0; background: transparent; color: var(--muted); }
.button[disabled] { cursor: not-allowed; opacity: .5; }

.icon { width: 20px; height: 20px; flex: 0 0 auto; }
.icon svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.welcome {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, .7fr);
  gap: 18px;
  padding: clamp(22px, 3vw, 34px);
  border-top: 5px solid var(--yellow);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.welcome > div { display: grid; align-content: start; gap: 12px; }
.welcome h2 { font-size: clamp(34px, 4.5vw, 58px); }
.welcome p { max-width: 760px; color: var(--muted); font-size: 17px; }
.tour-steps { display: grid; gap: 1px; background: var(--line); }
.tour-steps article { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 11px; padding: 13px; background: var(--canvas); }
.tour-steps article span { display: grid; place-items: center; width: 32px; height: 32px; background: var(--yellow); font-weight: 700; }
.tour-steps article div { display: grid; gap: 2px; }
.tour-steps small { color: var(--muted); }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stat {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 13px;
  min-height: 112px;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
}
.stat-icon { display: grid; place-items: center; width: 42px; height: 42px; background: var(--yellow-soft); color: #805700; }
.stat > div:last-child { display: grid; gap: 2px; }
.stat strong { font-family: "Barlow Condensed", sans-serif; font-size: 34px; }
.stat small { color: var(--muted); }

.panel { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 19px 20px; border-bottom: 1px solid var(--line); }
.panel-head > div { display: grid; gap: 5px; }
.panel-head p { color: var(--muted); }

.grid-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.module-card { display: grid; gap: 15px; padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.module-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.module-card header > div { display: grid; gap: 5px; }
.module-card p, .module-card small { color: var(--muted); }
.module-card footer { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }

.status { display: inline-flex; align-items: center; width: fit-content; min-height: 28px; padding: 4px 9px; border-radius: 999px; background: var(--yellow-soft); color: #785200; font-size: 12px; font-weight: 700; white-space: nowrap; }
.status.green { background: var(--green-soft); color: var(--green); }
.status.red { background: var(--red-soft); color: var(--red); }
.status.blue { background: var(--blue-soft); color: var(--blue); }

.table { overflow-x: auto; }
.table-row {
  min-width: 760px;
  display: grid;
  grid-template-columns: 1.1fr 1.3fr .9fr .9fr .8fr auto;
  align-items: center;
  gap: 14px;
  min-height: 68px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
}
.table-row:last-child { border-bottom: 0; }
.table-row.head { min-height: 42px; background: var(--canvas); color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.row-title { display: grid; gap: 3px; min-width: 0; }
.row-title small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.event-row { min-width: 0; grid-template-columns: 1fr auto; }
.worker-history-row { grid-template-columns: 1.2fr 1fr .7fr 1fr; }

.progress { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; }
.progress-track { overflow: hidden; height: 8px; border-radius: 99px; background: #ebe8e1; }
.progress-bar { height: 100%; border-radius: inherit; background: var(--yellow-strong); }

.metric-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.metric-grid > div { display: grid; gap: 3px; padding: 11px; background: var(--canvas); }
.metric-grid small { color: var(--muted); font-size: 11px; text-transform: uppercase; }
.metric-grid strong { font-size: 20px; }

.task-card { border-top: 4px solid var(--yellow); }
.task-product { display: grid; gap: 5px; }
.task-product strong { font-size: 21px; }
.task-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.task-meta > div { display: grid; gap: 2px; padding: 10px; background: var(--canvas); }
.task-meta small { font-size: 11px; text-transform: uppercase; }

.quality-card { border-left: 4px solid var(--yellow); }
.quality-card.accepted { border-left-color: var(--green); }
.quality-checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.quality-checks span { display: flex; align-items: center; gap: 7px; padding: 8px; background: var(--green-soft); color: var(--green); font-size: 13px; }

.transport-card { border-left: 4px solid var(--yellow); }
.transport-card.dispatched { border-left-color: var(--blue); }
.transport-card.delivered { border-left-color: var(--green); }
.load-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); }
.load-list li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 11px; border-bottom: 1px solid var(--line); }
.load-list li:last-child { border-bottom: 0; }
.load-list li > span { display: grid; gap: 2px; }
.load-list li small { color: var(--muted); font-weight: 400; }
.transport-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.transport-flow span { padding: 8px 5px; background: var(--canvas); color: var(--muted); font-size: 11px; text-align: center; }
.transport-flow span.done { background: var(--green-soft); color: var(--green); font-weight: 700; }
.transport-flow span.active { background: var(--yellow-soft); color: #785200; font-weight: 700; }

.chart { display: grid; gap: 12px; padding: 20px; }
.chart-row { display: grid; grid-template-columns: minmax(120px, .8fr) minmax(220px, 2fr) 70px; align-items: center; gap: 12px; }
.chart-track { height: 26px; padding: 3px; background: var(--canvas); }
.chart-bar { height: 100%; background: var(--yellow); }
.chart-row:nth-child(2) .chart-bar { background: #e5a91d; }
.chart-row:nth-child(3) .chart-bar { background: #c98a11; }
.chart-row:nth-child(4) .chart-bar { background: #8d6a20; }

.width-0 { width: 0%; }
.width-5 { width: 5%; }
.width-10 { width: 10%; }
.width-15 { width: 15%; }
.width-20 { width: 20%; }
.width-25 { width: 25%; }
.width-30 { width: 30%; }
.width-35 { width: 35%; }
.width-40 { width: 40%; }
.width-45 { width: 45%; }
.width-50 { width: 50%; }
.width-55 { width: 55%; }
.width-60 { width: 60%; }
.width-65 { width: 65%; }
.width-70 { width: 70%; }
.width-75 { width: 75%; }
.width-80 { width: 80%; }
.width-85 { width: 85%; }
.width-90 { width: 90%; }
.width-95 { width: 95%; }
.width-100 { width: 100%; }

.order-detail { display: grid; gap: 18px; }
.detail-top { display: grid; grid-template-columns: 1.4fr .8fr; gap: 14px; }
.detail-card { display: grid; gap: 12px; padding: 18px; background: var(--canvas); }
.detail-card dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin: 0; }
.detail-card dl div { display: grid; gap: 3px; }
.detail-card dt { color: var(--muted); font-size: 11px; text-transform: uppercase; }
.detail-card dd { margin: 0; font-weight: 700; }
.items-list { display: grid; gap: 8px; }
.item-row { display: grid; grid-template-columns: minmax(220px, 1.3fr) repeat(5, minmax(84px, .5fr)); align-items: center; gap: 8px; padding: 12px; border: 1px solid var(--line); }
.item-row > div { display: grid; gap: 2px; }
.item-row small { color: var(--muted); }

.client-shell { min-height: calc(100vh - 44px); background: #f4f2ec; }
.client-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px clamp(18px,4vw,50px); border-bottom: 1px solid var(--line); background: var(--surface); }
.client-header .brand { padding: 0; }
.client-header > div:last-child { display: flex; align-items: center; gap: 10px; }
.client-main { width: min(1120px, calc(100% - 32px)); display: grid; gap: 18px; margin: 0 auto; padding: 32px 0 54px; }
.client-hero { display: grid; grid-template-columns: 1.4fr .7fr; gap: 16px; padding: clamp(22px, 4vw, 38px); border-top: 5px solid var(--yellow); background: var(--surface); box-shadow: var(--shadow); }
.client-hero > div { display: grid; align-content: start; gap: 9px; }
.client-hero p { color: var(--muted); }
.client-total { display: grid; align-content: center; justify-items: end; gap: 3px; }
.client-total strong { font-family: "Barlow Condensed", sans-serif; font-size: 52px; }
.client-process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.client-process article { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 10px; min-height: 82px; padding: 13px; background: var(--surface); }
.client-process article > span { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; }
.client-process article.done > span { border-color: var(--green); background: var(--green); color: white; }
.client-process article.active { background: var(--yellow-soft); }
.client-process article.active > span { border-color: var(--yellow-strong); background: var(--yellow); }
.client-process article div { display: grid; gap: 2px; }
.client-process small { color: var(--muted); }
.client-items, .client-deliveries { display: grid; gap: 10px; padding: 18px; }
.client-item { display: grid; gap: 12px; padding: 15px; border: 1px solid var(--line); }
.client-item header { display: flex; justify-content: space-between; gap: 14px; }
.client-item dl { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 0; }
.client-item dl div { display: grid; gap: 2px; padding: 8px; background: var(--canvas); }
.client-item dt { color: var(--muted); font-size: 10px; text-transform: uppercase; }
.client-item dd { margin: 0; font-weight: 700; }
.client-deliveries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.client-delivery { display: grid; gap: 13px; padding: 16px; border: 1px solid var(--line); border-top: 4px solid var(--yellow); }
.client-delivery header { display: flex; justify-content: space-between; gap: 12px; }
.client-delivery p { color: var(--muted); }
.document-chip { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 7px 9px; border: 1px solid var(--line); background: var(--canvas); font-weight: 700; }

.empty { display: grid; place-items: center; min-height: 160px; padding: 30px; color: var(--muted); text-align: center; }
.notice { display: flex; align-items: flex-start; gap: 10px; padding: 13px 14px; border-left: 3px solid var(--yellow-strong); background: var(--yellow-soft); }
.notice.green { border-color: var(--green); background: var(--green-soft); color: var(--green); }
.notice .icon { margin-top: 1px; }

.modal-layer {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(32,26,18,.62);
}
.modal { width: min(720px, 100%); max-height: calc(100vh - 36px); overflow: auto; border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); }
.modal.wide { width: min(980px, 100%); }
.modal-head { position: sticky; z-index: 2; top: 0; display: flex; justify-content: space-between; gap: 20px; padding: 19px 20px; border-bottom: 1px solid var(--line); background: var(--surface); }
.modal-head > div { display: grid; gap: 5px; }
.modal-head p { color: var(--muted); }
.modal-body { display: grid; gap: 16px; padding: 20px; }
.modal-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 16px 20px; border-top: 1px solid var(--line); }
.close { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); cursor: pointer; font-size: 22px; }

.toast { position: fixed; z-index: 150; right: 20px; bottom: 20px; max-width: min(430px, calc(100% - 40px)); padding: 14px 17px; border-left: 4px solid var(--yellow); border-radius: 5px; background: var(--ink); color: white; box-shadow: var(--shadow); }

@media (max-width: 1050px) {
  :root { --sidebar: 210px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .welcome { grid-template-columns: 1fr; }
  .metric-grid { grid-template-columns: repeat(3, 1fr); }
  .detail-top { grid-template-columns: 1fr; }
  .client-process { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .demo-strip { position: relative; align-items: flex-start; flex-direction: column; padding: 10px 14px; }
  .demo-strip span:not(.demo-badge) { white-space: normal; }
  .role-switcher { width: 100%; justify-content: space-between; }
  .role-switcher select { flex: 1; }
  .main-grid { display: block; }
  .sidebar { position: static; height: auto; padding: 14px; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand { padding-bottom: 12px; }
  .nav { display: flex; overflow-x: auto; padding-bottom: 4px; }
  .nav button { min-width: max-content; }
  .sidebar-foot { display: none; }
  .content { padding: 18px 14px 40px; }
  .page-head { align-items: stretch; flex-direction: column; }
  .page-head .button { width: 100%; }
  .stats, .grid-two, .client-deliveries { grid-template-columns: 1fr; }
  .stat { min-height: 86px; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .task-meta { grid-template-columns: repeat(2, 1fr); }
  .quality-checks { grid-template-columns: 1fr; }
  .transport-flow { grid-template-columns: repeat(2, 1fr); }
  .chart-row { grid-template-columns: 100px 1fr 52px; }
  .client-header { align-items: flex-start; flex-direction: column; }
  .client-header > div:last-child { width: 100%; justify-content: space-between; }
  .client-main { width: min(100% - 24px, 1120px); padding-top: 18px; }
  .client-hero { grid-template-columns: 1fr; }
  .client-total { justify-items: start; }
  .client-process { grid-template-columns: 1fr; }
  .client-item dl { grid-template-columns: repeat(2, 1fr); }
  .item-row { grid-template-columns: minmax(180px, 1.2fr) repeat(5, 78px); min-width: 720px; }
  .items-list { overflow-x: auto; }
  .modal-layer { padding: 0; place-items: stretch; }
  .modal, .modal.wide { width: 100%; max-height: 100vh; border-radius: 0; }
}

@media (max-width: 430px) {
  .metric-grid, .task-meta { grid-template-columns: 1fr 1fr; }
  .panel-head { flex-direction: column; }
  .client-header .brand small { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .module-card, .stat, .button { transition: border-color .15s ease, background .15s ease, transform .15s ease; }
  .module-card:hover { transform: translateY(-1px); }
}

/* Readable controls on phones; retain the demo's existing application flow. */
body{font-size:16px;line-height:1.6}
button,input,select,textarea{font-size:16px}
.button,.button.compact,.nav button,.document-chip{min-height:48px;font-size:16px;line-height:1.4}
.close{width:48px;height:48px;flex:0 0 48px}
.icon{width:24px;height:24px}.icon svg{stroke-width:2}
.eyebrow,.metric-grid small,.task-meta small,.detail-card dt,.client-item dt,.transport-flow span,.role-switcher label{font-size:14px;line-height:1.5;letter-spacing:.02em}
.status{font-size:14px;white-space:normal}.demo-badge{font-size:13px}
small{font-size:14px;line-height:1.5}
.modal-head{align-items:flex-start}.modal-head h3{line-height:1.3}
.module-card footer,.page-head,.panel-head{gap:12px;flex-wrap:wrap}
@media(max-width:760px){
 .nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;overflow:visible}
 .nav button{min-width:0;white-space:normal;text-align:left;padding:12px 10px}
 .role-switcher{flex-wrap:wrap;gap:8px}.role-switcher select{min-width:0;min-height:48px}
 .demo-strip{position:static}.demo-strip>div{min-width:0}
 .module-card header{flex-wrap:wrap;gap:12px}
 .module-card footer .button,.modal-actions .button{flex:1 1 140px}
 .table::before,.items-list::before{content:'Przesuń tabelę w bok, aby zobaczyć wszystkie kolumny.';display:block;position:sticky;left:0;font-size:14px;line-height:1.5;padding:12px;color:var(--muted);max-width:100%}
 .table,.items-list{overscroll-behavior-inline:contain;scrollbar-width:auto}
 .modal,.modal.wide{max-height:100dvh}.modal-body{padding:16px}.modal-head{padding:16px;gap:12px}
 .content{padding:20px 14px 32px}.welcome{padding:20px}.welcome h2{font-size:32px;line-height:1.15}
 .load-list li{gap:12px;flex-wrap:wrap}.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .metric-grid strong{overflow-wrap:anywhere}.transport-flow{grid-template-columns:1fr 1fr}
}
@media(max-width:360px){.nav,.metric-grid,.task-meta{grid-template-columns:1fr}}