:root {
  --bg: #F8F9FC; --fg: #1D2433; --muted: #6B7280; --line: #E1E6EF; --line2: #D7DCE5; --soft: #F3F4F6;
  --accent: #2563EB; --accent-h: #1D4ED8; --accent-bg: #EEF2FF;
  --green: #1F9D55; --green-bg: #E8F5EE; --amber: #7A4800; --amber-bg: #FFF4DA; --amber-line: #F2DEA8; --amber-stroke: #E08A00; --warn: #EAB308; --diff: #FFF8E6;
  --red: #8F1C15; --red-bg: #FDE8E6; --red-line: #F4C6C2; --miss: #D4352C; --miss-text: #B42318;
  --road: #0D9488; --road-bg: #F0FDFA; --road-fg: #0F766E;
  --faint: #98A2B3; /* text roles: --fg primary, --muted secondary, --faint placeholder */
  --mono: "Geist Mono", ui-monospace, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); font-family: Geist, "Segoe UI", system-ui, -apple-system, sans-serif; font-size: 13px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
@media (min-width: 1700px) { html, body { font-size: 14px; } }
a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-h); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input::placeholder, textarea::placeholder { color: var(--faint); }
h1 { font-size: 20px; font-weight: 600; margin: 0; line-height: 1.3; }
h2 { font-size: 14px; font-weight: 600; margin: 0; }
h3 { font-size: 13px; font-weight: 600; margin: 0; }
p { margin: 0; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0; }
.num { font-variant-numeric: tabular-nums; }
.sub { font-size: 12px; color: var(--muted); }
.muted { color: var(--muted); }
.okt { color: var(--green); font-weight: 500; }
.grow { flex: 1 1 auto; }
.lab { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 500; }
.ic { flex: 0 0 auto; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 8px; }
.stack > .chip, .stack > .cp { align-self: flex-start; }

/* layout: module rail, then the page; Teczki adds its own side list and work area */
.app { display: flex; min-height: 100vh; align-items: stretch; }
.mods { width: 56px; flex: 0 0 56px; background: #fff; border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; padding: 10px 0; gap: 4px; position: sticky; top: 0; height: 100vh; }
.mods .logo { width: 32px; height: 32px; border-radius: 8px; background: var(--fg); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 13px; margin-bottom: 10px; }
.mods .logo:hover { background: #0F1420; color: #fff; }
.mod { width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); display: grid; place-items: center; }
.mod:hover { background: var(--soft); color: var(--fg); }
.mod.on { background: var(--accent-bg); color: var(--accent); }
.mods [data-hint] { position: relative; }
.mods [data-hint]:is(:hover, :focus-visible)::after { content: attr(data-hint); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); z-index: 95; padding: 6px 8px; border-radius: 6px; background: var(--fg); color: #fff; font-size: 12px; font-weight: 400; line-height: 1.35; white-space: nowrap; pointer-events: none; }
.mods .me[open] summary::after { display: none; }
.mods .me { position: relative; margin-top: 6px; }
.mods .me summary { list-style: none; cursor: pointer; }
.mods .me summary::-webkit-details-marker { display: none; }
.mods .memenu { position: absolute; left: calc(100% + 14px); bottom: 0; width: 220px; z-index: 60; }
.memenu .mewho { display: flex; flex-direction: column; min-width: 0; padding: 6px 8px 8px; border-bottom: 1px solid var(--soft); margin-bottom: 4px; }
.memenu .name { font-weight: 600; }
.memenu form { display: contents; }
.linkbtn { border: 0; background: none; padding: 0; color: var(--muted); font-weight: 500; }
.linkbtn:hover { color: var(--fg); }
.av { width: 26px; height: 26px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; background: var(--accent-bg); color: var(--accent-h); flex: 0 0 auto; }
.av.lg { width: 30px; height: 30px; font-size: 12px; }
.main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.hdr { display: flex; align-items: center; gap: 8px 12px; min-height: 52px; padding: 8px max(24px, calc(100% - 1416px)) 8px 24px; background: #fff; border-bottom: 1px solid var(--line); }
.hdr .htitle { margin: 0; font-weight: 600; }
.crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; white-space: nowrap; }
.crumbs a { color: var(--muted); flex: 0 1000 auto; min-width: 28px; overflow: hidden; text-overflow: ellipsis; } .crumbs a:hover { color: var(--fg); }
.crumbs a:first-child { flex-shrink: 0; }
.crumbs .cur { flex: 0 1 auto; min-width: 0; font-weight: 500; color: var(--fg); overflow: hidden; text-overflow: ellipsis; }
.crumbs .sep { color: #98A2B3; display: inline-flex; flex: 0 0 auto; }
.content { padding: 20px 24px 32px; max-width: 1440px; width: 100%; margin-inline: auto; display: flex; flex-direction: column; gap: 16px; }
.content.narrow { max-width: 1040px; }
.ph { display: flex; flex-direction: column; gap: 10px; }
.ph .title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ph .actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* buttons, chips, badges */
.btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line2); background: #fff; color: var(--fg); font-weight: 500; white-space: nowrap; transition: transform 160ms ease-out; text-decoration: none; }
.btn:hover { background: #F9FAFB; color: var(--fg); }
.btn:active, .seg button:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-h); color: #fff; }
.btn.sm { height: 28px; padding: 0 10px; font-size: 12px; }
.btn.ghost { border-color: transparent; background: transparent; color: #4B5563; }
.btn.ghost:hover { background: var(--soft); }
.btn.ic { width: 36px; padding: 0; justify-content: center; }
.btn.ic.sm { width: 28px; }
.btn.danger { color: var(--miss); }
.chip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; border: 1px solid #E5E7EB; background: #F3F4F6; color: #374151; }
.chip.new { background: var(--accent-bg); color: var(--accent-h); border-color: var(--accent-bg); }
.chip.xs { height: 18px; padding: 0 6px; font-size: 11px; }
.miss { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--miss); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 1; }
.bdg { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border: 1px solid transparent; border-radius: 6px; font-size: 11px; font-weight: 600; white-space: nowrap; line-height: 1; }
.bdg.red { background: var(--miss); color: #fff; border-color: var(--miss); }
.bdg.amber { background: var(--warn); color: #422006; border-color: var(--warn); }
.warnico { display: inline-flex; color: var(--amber-stroke); vertical-align: middle; border-radius: 4px; }
.warnico:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.infoi { display: inline-flex; color: var(--muted); border-radius: 4px; }
.infoi:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bdg.green { background: var(--green-bg); color: #14532D; border-color: #BBE5CB; }
.bdg.xs { height: 20px; padding: 0 7px; border-radius: 5px; }
.bdg svg { flex: 0 0 auto; }
.tst { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); white-space: nowrap; }
.tst.open { color: var(--fg); }
.tst .dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 999px; background: var(--accent); }
.dn { display: inline-flex; align-items: center; gap: 6px; }
.cp { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; padding: 2px 6px; margin: -2px -6px; border-radius: 6px; color: inherit; font: inherit; cursor: pointer; position: relative; }
.cp:hover { background: var(--soft); } .cp svg { color: #98A2B3; } .cp:hover svg { color: #4B5563; }
.cp-ok { font-size: 11px; color: var(--green); font-weight: 500; }
.seg { display: inline-flex; background: var(--soft); border-radius: 8px; padding: 3px; }
.seg button { height: 30px; padding: 0 9px; border: 0; border-radius: 6px; background: transparent; color: #475467; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; transition: transform 160ms ease-out; }
.seg button.active { background: #fff; color: var(--fg); box-shadow: 0 1px 2px rgba(16,24,40,.08); }
.seg.wide { display: flex; }
.seg.wide button { flex: 1 1 0; height: 30px; padding: 0 10px; justify-content: center; }
.tabs { display: flex; border-bottom: 1px solid var(--line); gap: 4px; overflow-x: auto; }
.tab { height: 40px; padding: 0 4px; margin-right: 16px; border: 0; background: transparent; color: #4B5563; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tab:hover { color: var(--fg); } .tab.active { color: var(--fg); border-bottom-color: var(--accent); }
.tab .cnt { font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 999px; background: var(--soft); color: #475467; }

/* panels, forms */
.panel { background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.panel .ph2 { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--soft); flex-wrap: wrap; }
.panel .pb { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.section { max-width: 760px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field label, .field .fl { font-size: 12px; color: var(--muted); }
.field > label, .field > .fl { line-height: 16px; }
.field .opt { color: var(--faint); }
.field .fhelp { font-size: 12px; color: var(--muted); }
.field .ferr { font-size: 12px; color: var(--miss); }
.field.bad input, .field.bad select, input.bad { border-color: var(--miss); }
.field.req .in, .field.req .dd-btn { border-color: var(--miss); box-shadow: 0 0 0 3px var(--red-bg); }
.field.req .fhelp { color: var(--miss-text); }
.field.rec .in, .field.rec .dd-btn { border-color: var(--amber-stroke); box-shadow: 0 0 0 3px var(--amber-bg); }
.field.req .dd-btn.open, .field.rec .dd-btn.open { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
/* help under a field folds into a tooltip on its label; errors, required hints and captions with actions stay */
.field { position: relative; }
.field:not(.req) > :is(.fhelp, .help:not(.err, .act)) { position: absolute; left: 0; bottom: calc(100% + 4px); z-index: 30; width: max-content; max-width: 280px; padding: 8px 12px; border-radius: 8px; background: var(--fg); color: #fff; font-size: 12px; line-height: 16px; font-weight: 400; box-shadow: 0 6px 20px rgba(17,24,39,.18); pointer-events: none; opacity: 0; transition: opacity 120ms ease-out; }
.field > :is(label, .fl):not(.vialab) { align-self: flex-start; }
.field:has(> :is(label, .fl, .flrow):hover) > :is(.fhelp, .help) { opacity: 1; }
.field:not(.req):has(> :is(.fhelp, .help:not(.err, .act))) > :is(label, .fl:not(.vialab))::after,
.field:not(.req):has(> :is(.fhelp, .help:not(.err, .act))) > :is(.flrow, .vialab) > :first-child::after { content: ""; display: inline-block; width: 13px; height: 13px; margin-left: 4px; vertical-align: -2px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.5'/%3E%3Cpath d='M8 7.5v4M8 5h.01'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.5'/%3E%3Cpath d='M8 7.5v4M8 5h.01'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (prefers-reduced-motion: reduce) { .field > :is(.fhelp, .help) { transition: none; } }
input.in, select.in, textarea.in, .in { height: 38px; padding: 0 10px; border: 1px solid var(--line2); border-radius: 8px; background: #fff; width: 100%; }
select.in { appearance: none; -webkit-appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6L8 10.5 12.5 6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; }
textarea.in { height: auto; min-height: 72px; padding: 8px 10px; resize: vertical; }
input[type=date], input[type=datetime-local], input[type=time] { font-variant-numeric: tabular-nums; color-scheme: light; }
.in.mono { font-family: var(--mono); font-size: 12px; }
/* a typed value is the darkest, largest text in a field */
.field .in, .field .dd-btn { font-size: 14px; font-weight: 400; color: var(--fg); }
.field .in.mono { font-size: 14px; }
.in:disabled, .in[readonly] { background: #F9FAFB; color: #4B5563; }
.inline { display: flex; align-items: center; gap: 8px; }
.ok { color: var(--green); display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.note { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; background: var(--accent-bg); color: var(--accent-h); }
.note.amber { background: var(--amber-bg); color: var(--amber); }
.note.ok { background: var(--green-bg); color: var(--green); }
.note.err { background: var(--red-bg); color: var(--red); }
.check { display: flex; align-items: center; gap: 8px; }
.check input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.kv { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kv .k { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 500; }
.kv .v { font-weight: 500; overflow-wrap: anywhere; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; background: var(--fg); color: #fff; padding: 10px 14px; border-radius: 10px; display: flex; gap: 14px; align-items: center; box-shadow: 0 12px 32px rgba(16,24,40,.18); width: max-content; max-width: calc(100vw - 32px); }
.toast:has(.tclose) { padding: 10px 10px 10px 14px; }
.toast .tlink { color: #C7D2FE; font-weight: 500; white-space: nowrap; }
.toast .tclose { color: #9CA3AF; width: 28px; padding: 0; justify-content: center; }
.toast.err { background: var(--miss); }

/* Teczki: side list and work area, each scrolling on its own */
.tz3 { flex: 1 1 auto; min-height: 0; height: 100vh; display: flex; align-items: stretch; }
.list { width: 260px; flex: 0 0 260px; background: #fff; border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.lhd { padding: 14px 12px 6px; display: flex; flex-direction: column; gap: 10px; }
.lhd h1 { font-size: 16px; }
.lhd .btn.sm { height: 26px; padding: 0 8px; border-radius: 6px; }
.srch { position: relative; display: block; }
.srch .ic { position: absolute; left: 10px; top: 10px; color: var(--muted); pointer-events: none; }
.srch input { height: 36px; width: 100%; padding: 0 60px 0 32px; border: 1px solid var(--line2); border-radius: 8px; background: #fff; }
.srch input::-webkit-search-cancel-button { display: none; }
.srch .kbd { position: absolute; right: 8px; top: 9px; font-family: var(--mono); font-size: 11px; height: auto; padding: 0 5px; border: 1px solid var(--line2); border-bottom-width: 2px; border-radius: 4px; color: #475467; background: #fff; }
.lbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 8px 12px; display: flex; flex-direction: column; gap: 4px; scrollbar-width: thin; scrollbar-color: #CBD2DC transparent; }
/* side list rows: label column, then one 40 px column for the count and the marker; the pin sits between them */
.lsec { font-size: 11px; line-height: 16px; color: var(--muted); font-weight: 400; margin: 20px 0 4px; padding: 0 8px; }
.lnone { padding: 6px 8px; color: #98A2B3; font-size: 12px; }
.trw { position: relative; }
.trow { display: grid; grid-template-columns: minmax(0, 1fr) 40px; grid-template-rows: 16px 16px; column-gap: 32px; align-items: center; width: 100%; height: 36px; padding: 2px 8px; text-align: left; border: 0; border-radius: 8px; background: transparent; color: var(--fg); font-weight: 400; }
.trow:hover { background: var(--soft); }
.trow.on { background: var(--accent-bg); }
.trow.on .nr { color: var(--accent-h); }
.trow.sel { box-shadow: inset 0 0 0 2px var(--accent); }
.trow .nr { grid-column: 1; font-family: var(--mono); font-size: 13px; line-height: 16px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow .cu { grid-column: 1; font-size: 12px; line-height: 16px; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow .n, .trow .mk { grid-column: 2; justify-self: end; font-family: var(--mono); font-size: 12px; line-height: 16px; color: var(--muted); white-space: nowrap; }
.trow .mk { grid-row: 2; display: inline-flex; align-items: center; gap: 4px; }
.trow .mk .dot { width: 6px; height: 6px; border-radius: 50%; }
.trow .mk.red .dot { background: var(--miss); }
.trow .mk.amber .dot { background: var(--warn); }
.trow .mk.grey .dot { background: var(--faint); }
.pinb { position: absolute; right: 52px; top: 7px; width: 22px; height: 22px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); display: grid; place-items: center; opacity: 0; }
.trw:hover .pinb, .trw:focus-within .pinb, .trw.pinned .pinb { opacity: 1; }
.trw.pinned .pinb { color: var(--accent); }
.pinb:hover { background: #fff; color: var(--fg); box-shadow: 0 0 0 1px var(--line); }
.lbody .more { align-self: flex-start; margin: 4px 0 0 2px; }
.trow:disabled { opacity: .45; cursor: not-allowed; }
.pickban { margin: 10px 0 2px; padding: 8px 10px; border-radius: 8px; background: var(--accent-bg); color: var(--accent-h); display: flex; align-items: center; gap: 8px; font-weight: 500; }
.pickban button { margin-left: auto; border: 0; background: transparent; color: var(--accent-h); text-decoration: underline; text-underline-offset: 2px; padding: 0; }
/* folded list while a split is open: the list button and the recent numbers */
.list.min { width: 56px; flex-basis: 56px; align-items: center; padding-top: 10px; }
.list.min .lhd, .list.min .lbody { display: none; }
.list .mini { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mini .mnr { font-family: var(--mono); font-size: 11px; color: var(--muted); padding: 2px 6px; border-radius: 5px; }
.mini .mnr.on { background: var(--accent-bg); color: var(--accent-h); font-weight: 600; }
.work { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; position: relative; }
/* tab strip of open briefcases over the work area */
.wtabs { flex: 0 0 auto; display: flex; align-items: flex-end; height: 44px; padding: 0 8px 0 12px; background: var(--bg); border-bottom: 1px solid var(--line); }
.wrow { flex: 1 1 auto; min-width: 0; height: 100%; display: flex; align-items: flex-end; gap: 2px; overflow: hidden; }
.wrow.clip { mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
.wt { display: flex; align-items: center; flex: 0 0 auto; height: 36px; max-width: 260px; min-width: 0; border: 1px solid transparent; border-bottom: 0; border-radius: 9px 9px 0 0; margin-bottom: -1px; color: #475467; background: transparent; }
.wt:hover { background: #EEF1F6; }
.wt.on { background: #fff; border-color: var(--line); color: var(--fg); }
.wt.on:hover { background: #fff; }
.wt.wlist { gap: 8px; padding: 0 14px 0 12px; font-weight: 500; }
.wt.wlist .ic { color: var(--muted); }
.wtmain { display: flex; align-items: center; gap: 8px; height: 100%; min-width: 0; padding: 0 6px 0 12px; border: 0; background: transparent; color: inherit; font-weight: 500; }
.wt .nr { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--fg); white-space: nowrap; }
.wt .nm { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-weight: 400; }
.wt.on .nm, .wt.wlist .nm { color: inherit; }
.wt .obok { position: relative; display: inline-flex; color: var(--muted); }
.wt .x { width: 22px; height: 22px; margin-right: 8px; display: grid; place-items: center; border: 0; border-radius: 5px; background: transparent; color: var(--muted); opacity: 0; flex: 0 0 auto; }
.wt:hover .x, .wt.on .x, .wt:focus-within .x { opacity: 1; }
.wt .x:hover { background: var(--line); color: var(--fg); }
.wmore { position: relative; flex: 0 0 auto; margin: 0 0 7px 6px; }
.wmore .cnt { font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 999px; background: var(--soft); color: #475467; }
.wmore .mback { position: fixed; inset: 0; z-index: 40; }
.wmore .menu { position: absolute; right: 0; top: calc(100% + 6px); width: 280px; z-index: 41; }
/* panes: the active tab, the one beside it, and the hidden ones kept in place so their scroll and state stay */
.wbody { flex: 1 1 auto; min-height: 0; display: flex; align-items: stretch; position: relative; }
.wpane { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.wpane.off { position: absolute; inset: 0; visibility: hidden; pointer-events: none; }
.wpane.beside { order: 2; }
.gutter { order: 1; flex: 0 0 48px; position: relative; background: var(--bg); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.work.split .tz { --tz-pad: 20px; }
.work.split .shead .btn .t { display: none; }
.work.split .shead .btn:has(.t) { padding: 0 10px; }
.work.split .tz .stitle { flex-wrap: nowrap; gap: 10px; }
.work.split .tz .esc { display: none; }
.work.split .tz .stitle > :not(.tst) { flex: 0 0 auto; }
.work.split .tz .stitle .tst { min-width: 6px; overflow: hidden; }
.work.split .tz .stitle .tst .tx { overflow: hidden; text-overflow: ellipsis; }
.work.split .tz .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.work.split .tz .facts .kv:nth-child(4) { border-left: 0; border-top: 1px solid var(--line); }
.work.split .tz .facts .kv:nth-child(5) { border-top: 1px solid var(--line); }
.work.split .tz .lroad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.work.split .tz .lsea { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.work.split .tz .lsea .w2 { grid-column: span 1; }
.work.split .tz .ktbl { min-width: 0; }
/* the colgroup widths are inline, so the split narrows them with !important */
.work.split .tz .ktbl col:nth-child(1) { width: 136px !important; }
.work.split .tz .ktbl col:nth-child(2) { width: 56px !important; }
.work.split .tz .ktbl col:nth-child(7), .work.split .tz .ktbl col:nth-child(8) { width: 80px !important; }
.work.split .tz .ktbl th { white-space: normal; }
.work.split .tz .ktbl col:nth-child(9) { width: 68px !important; }
.work.split .tz .ktbl :is(col, th, td):nth-child(3), .work.split .tz .ktbl :is(col, th, td):nth-child(4), .work.split .tz .ktbl :is(col, th, td):nth-child(5) { display: none; }
.work.split .tz .ktbl td { padding: 12px 8px; }
.work.split .tz .kdrvc { white-space: normal; }
.work.split .tz .kdrvc .kdrvt { display: block; max-width: 100%; }
.work.split .tz .kdrvc .bdg { height: auto; margin-left: 0; padding: 0; border: 0; background: none; font-size: 12px; font-weight: 500; white-space: normal; }
.work.split .tz .kdrvc .bdg.red { color: var(--miss-text); }
.work.split .tz .kdrvc .bdg.amber { color: var(--amber); }
.work.split .tz .kdrvc .bdg.green { color: var(--green); }
.work.split .tz .kdrvc .kdash:has(+ .bdg.red) { display: none; }
.work.split .kt .kdrvrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.work.split .kt .kdrvdd { grid-column: 1 / -1; }
.wtable { flex: 1 1 auto; min-height: 0; overflow: auto; }
.wtable .content { padding: 16px 20px 32px; }

/* search and list */
.srow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.bigsearch { position: relative; display: block; flex: 1 1 320px; width: 100%; max-width: 640px; }
.bigsearch input { height: 44px; width: 100%; padding: 0 52px 0 40px; border: 1px solid var(--line2); border-radius: 8px; background: #fff; font-size: 14px; }
.bigsearch .ic { position: absolute; left: 14px; top: 14px; color: var(--muted); }
.bigsearch .kbd { position: absolute; right: 10px; top: 13px; }
.filters { display: flex; gap: 8px 12px; flex-wrap: wrap; align-items: center; }
.ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; padding: 8px 12px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 500; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 8px 12px; border-top: 1px solid var(--soft); vertical-align: middle; }
.table tr:first-child td { border-top: 0; }
.table tbody tr:hover > td { background: #FAFBFC; }
.table td.r, .table th.r { text-align: right; }
.table .ell { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tscroll { overflow-x: auto; }
.tscroll .table { min-width: 900px; }
.detail { padding: 12px 16px 16px 52px; background: #FAFBFC; border-top: 1px solid var(--soft); display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.detail .dl { max-width: 760px; overflow-wrap: anywhere; }
.detail .dk { color: var(--muted); margin-right: 4px; }
.rdz { position: relative; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 12px; align-self: stretch; min-height: 72px; margin-top: 4px; padding: 12px 16px; border: 1.5px dashed var(--line2); border-radius: 10px; background: #fff; color: #4B5563; text-align: center; transition: background-color 160ms ease-out, border-color 160ms ease-out; }
.rdz:hover, .rdz.over { border-color: var(--accent); background: var(--accent-bg); color: var(--accent-h); }
.rdz input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.rdz .fake { pointer-events: none; }
.empty { padding: 32px 16px; text-align: center; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pager { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--soft); flex-wrap: wrap; }
.expander { width: 24px; height: 24px; border: 0; background: transparent; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.expander:hover { background: var(--soft); color: var(--fg); }

/* briefcase list: grid rows, expansion and pager as in the mock */
/* Briefcases.razor (GridStyle) sets --tcols and --tmin for the columns Ustawienia leaves shown. */
.lst .tinner { min-width: var(--tmin); }
.lst .tgrid { grid-template-columns: var(--tcols); }
.lst .th { display: grid; align-items: center; gap: 10px; padding: 8px 12px 8px 16px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 500; border-bottom: 1px solid var(--line); }
.lst .row.tgrid { display: grid; align-items: center; gap: 10px; min-height: 52px; padding: 6px 12px 6px 16px; border-top: 1px solid var(--soft); }
.lst .row.tgrid:hover, .lst .row.sel { background: #FAFBFC; }
.lst .exp { width: 24px; padding: 0; justify-content: center; }
.lst .nrcell { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.lst .nrcell .cp .mono { font-weight: 500; white-space: nowrap; }
/* booking: --bkcol (Briefcases.razor) fits the longest number on the page; a longer one is cut with an ellipsis, the title has it whole */
.lst .bkcell { display: flex; min-width: 0; }
.lst .bkcell .cp { min-width: 0; }
.lst .bkcell .cp .mono { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lst .nrcell .cp-ok { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 4px; padding: 2px 6px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px var(--line); white-space: nowrap; z-index: 2; }
.lst .col { display: flex; flex-direction: column; min-width: 0; }
.lst .dncell { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.lst .acts { display: flex; justify-content: flex-end; white-space: nowrap; }
.lst .detail { gap: 4px; }
.lst .misses { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.lst .misst { color: var(--fg); font-weight: 500; }
.lst .rdz { margin-top: 8px; }
.lst .dacts { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.lempty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 16px; border-top: 1px solid var(--soft); color: var(--muted); text-align: center; }
.lfoot { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding: 10px 16px; border-top: 1px solid var(--line); color: var(--muted); }
.lfoot .pg { display: flex; align-items: center; gap: 8px; }
.pgin { width: 48px; height: 28px; padding: 0 6px; border: 1px solid var(--line2); border-radius: 8px; background: #fff; text-align: center; color: var(--fg); }

/* new briefcase dialog, centred over the list */
.nt-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(17,24,39,.45); animation: fade 160ms ease-out; }
.nt-wrap { position: fixed; inset: 0; z-index: 61; display: flex; padding: 16px 0; overflow-y: auto; }
.nt { width: 720px; max-width: calc(100% - 32px); margin: auto; display: flex; flex-direction: column; background: #fff; border-radius: 12px; box-shadow: 0 24px 64px rgba(17,24,39,.25); animation: rise 200ms ease-out; }
.nt:focus { outline: none; }
.nt-head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 24px; border-bottom: 1px solid var(--line); }
.nt-head h2 { margin: 0; flex: 1 1 auto; min-width: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.nt-body { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 18px; }
.nt-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; padding: 14px 24px; border-top: 1px solid var(--line); }
.nt-foot .fnote { flex: 1 1 240px; min-width: 0; font-size: 12px; color: var(--muted); }
.nt-foot .fbtns { display: flex; gap: 8px; margin-left: auto; }
.sys { padding: 10px 12px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); color: #4B5563; }

/* briefcase open in the work area: white sticky header and hero, grey content with white panels, content centred up to 1180 px */
.tz { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: var(--bg); --tz-pad: max(24px, calc((100% - 1180px) / 2)); }
.tz:focus { outline: none; }
.tz .sbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #CBD2DC transparent; scrollbar-gutter: stable; }
.tz .shead { position: sticky; top: 0; z-index: 20; min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 10px var(--tz-pad); background: #fff; border-bottom: 1px solid var(--soft); }
.tz .shead .mmenu { left: auto; right: 0; }
.tz .stitle { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; min-width: 0; }
.tz .stitle h1 { margin: 0; font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.tz .stitle h1 .mono { font-size: 18px; }
.tz .stitle .tst svg { flex: 0 0 auto; }
.tz .esc { height: 18px; padding: 0 5px; border: 1px solid var(--line); border-radius: 4px; font-size: 10px; color: var(--muted); display: inline-flex; align-items: center; }
.tz .hero { background: #fff; border-bottom: 1px solid var(--line); padding: 20px var(--tz-pad) 0; }
.tz .crumb { display: flex; align-items: center; gap: 6px; margin-top: 14px; font-family: var(--mono); font-size: 12px; white-space: nowrap; overflow: hidden; }
.tz .crumb .cr { border: 0; background: transparent; padding: 0 2px; font: inherit; color: var(--accent); border-radius: 4px; }
.tz .crumb .cr:hover { text-decoration: underline; color: var(--accent-h); }
.tz .crumb .cur { font-weight: 600; }
.tz .crumb .sep { color: #98A2B3; }
.tz .crumb + .tabs { margin-top: 6px; }
.tz .hero strong { color: var(--fg); font-weight: 500; }
.tz .client { display: inline-flex; align-items: center; gap: 3px; max-width: 100%; border: 0; background: transparent; padding: 1px 4px; margin: -1px -2px; border-radius: 6px; color: var(--fg); font: inherit; vertical-align: bottom; }
.tz .client strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tz .client:hover { background: var(--soft); color: var(--accent-h); }
.tz .client:hover strong { color: inherit; }
.tz .client .ic { color: var(--muted); }
.tz .hacts { position: relative; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.filebtn { position: relative; overflow: hidden; cursor: pointer; }
.filebtn input[type=file] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.tz .morew { position: relative; display: flex; }
.tz .mback { position: fixed; inset: 0; z-index: 40; }
.tz .mmenu { position: absolute; left: 0; top: calc(100% + 6px); width: 280px; z-index: 41; }
.menu { background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 32px rgba(16,24,40,.10), 0 2px 6px rgba(16,24,40,.06); padding: 6px; display: flex; flex-direction: column; gap: 1px; color: var(--fg); font-weight: 400; text-align: left; }
.menu .mi { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; color: var(--fg); cursor: pointer; text-decoration: none; }
.menu button.mi { border: 0; background: transparent; width: 100%; text-align: left; }
.menu .mi:hover { background: var(--soft); color: var(--fg); }
.menu .mi-ic { width: 26px; height: 26px; border-radius: 6px; background: var(--soft); color: #4B5563; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; font-weight: 600; }
.menu .mi-t { display: flex; flex-direction: column; min-width: 0; }
.menu .mi-s { font-size: 12px; color: var(--muted); }
.menu .msep { height: 1px; background: var(--soft); margin: 6px 0; }
.tz .routecard { margin-top: 16px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.tz .rstrip { list-style: none; margin: 0; padding: 12px 0; display: flex; flex-wrap: wrap; row-gap: 12px; border: 0; border-radius: 0; }
.tz .rcell { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 0 16px; }
.tz .rnode { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tz .rdot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--accent); background: var(--accent-bg); color: var(--accent); display: grid; place-items: center; flex: 0 0 auto; }
.tz .rroad .rdot { border-color: var(--road); background: var(--road-bg); color: var(--road-fg); }
.tz .rline { flex: 1 1 auto; height: 2px; background: var(--line2); margin-right: -28px; }
.tz .rcell:last-child .rline { display: none; }
.tz .rt { font-size: 14px; font-weight: 600; line-height: 18px; }
.tz .rpath { display: flex; align-items: center; gap: 8px; min-width: 0; line-height: 18px; overflow-wrap: anywhere; }
.tz .stepn { background: #E9ECF1; color: #475467; }
.tz .facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); background: #FAFBFC; }
.tz .facts .kv { padding: 12px 16px; }
.tz .facts .kv .k { font-size: 10px; font-weight: 600; letter-spacing: .08em; }
.tz .facts .kv + .kv { border-left: 1px solid var(--line); }
.tz .tabs { display: flex; margin-top: 14px; border-bottom: 0; gap: 0; overflow: visible; }
.tz .tab { margin-right: 20px; }
.tz .tab .cnt { font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 2px; padding: 0; background: none; border-radius: 0; }
.tz .tcontent { padding: 20px var(--tz-pad) 40px; }
.tz .saved, .st .saved { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; margin-bottom: 12px; }
.tz .saved.err, .st .saved.err { color: var(--miss); }
.tz .saved.ok, .st .saved.ok { color: var(--green); }
.tz .savedrow, .st .savedrow { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 20px; }
.tz .savedrow .saved, .st .savedrow .saved { margin-bottom: 0; }
.tz .secall { display: inline-flex; gap: 14px; }
.tz .secall .linkbtn { font-size: 12px; font-weight: 400; color: var(--muted); }
.tz .secall .linkbtn:hover { color: var(--fg); }
.tz .formgrid, .st .formgrid { display: flex; flex-direction: column; gap: 28px; }
.tz .tsec, .st .tsec { min-width: 0; }
.tz .tsechd, .st .tsechd { display: flex; align-items: center; gap: 12px; width: 100%; padding: 0 4px 12px; border: 0; background: transparent; color: var(--fg); text-align: left; }
.tz .secn, .st .secn { width: 28px; height: 28px; border-radius: 8px; background: var(--accent-bg); color: var(--accent); font-family: var(--mono); font-size: 12px; font-weight: 600; display: grid; place-items: center; flex: 0 0 auto; }
.tz .sect, .st .sect { font-size: 18px; font-weight: 600; line-height: 24px; white-space: nowrap; }
.tz .secmeta { color: var(--muted); white-space: nowrap; flex: 0 0 auto; }
.tz .secchev { color: #4A5665; transform: rotate(180deg); transition: transform 160ms ease-out; }
.tz .tsechd[aria-expanded="false"] .secchev { transform: none; }
.tz .tscard, .st .tscard { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px 24px; margin: 0; min-width: 0; min-inline-size: 0; }
.tz .tscard.stack, .st .tscard.stack { display: flex; flex-direction: column; gap: 14px; }
.tz .tscard.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
.tz .tscard textarea.in { min-height: 160px; }
.tz fieldset.formgrid { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; width: 100%; }
.tz .sec { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tz .sec h2, .tz .ptool h2 { margin: 0; font-size: 14px; font-weight: 600; }
.tz .sechd { display: flex; align-items: baseline; gap: 6px 10px; flex-wrap: wrap; }
.tz .seg button { padding: 0 10px; }
.tz .field > .seg { align-self: flex-start; margin-top: 2px; }
.tz .field > .lgap { margin: 2px 0 0; }
.tz .tl { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 16px; }
.tz .tlrail { display: flex; flex-direction: column; align-items: center; }
.tz .tldot { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--accent); background: var(--accent-bg); color: var(--accent); display: grid; place-items: center; flex: 0 0 auto; }
.tz .tlrail.road .tldot { border-color: var(--road); background: var(--road-bg); color: var(--road-fg); }
.tz .tlrail.end .tldot { border: 2px dashed #C4C9D2; background: #fff; color: var(--muted); }
.tz .tlline { flex: 1 1 auto; width: 2px; background: var(--line2); margin: 8px 0; }
.tz .legi { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding-bottom: 20px; }
.tz .tlend { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tz .legc { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tz .leghd { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; min-height: 32px; min-width: 0; }
.tz .legn { color: var(--muted); font-weight: 600; }
.tz .leghd .seg button { height: 24px; padding: 0 10px; font-size: 12px; }
.tz .leghd .seg button.road.active { color: var(--road-fg); }
.tz .leghd .seg button.sea.active { color: var(--accent); }
.tz .legmode { font-size: 14px; font-weight: 600; }
.tz .legc.road .legmode { color: var(--road-fg); }
.tz .legc.sea .legmode { color: var(--accent); }
.tz .legsum { flex: 1 1 220px; min-width: 0; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; overflow: hidden; color: var(--muted); }
.tz .legsum .legtxt { overflow: hidden; text-overflow: ellipsis; }
.tz .legsum.has .legtxt { color: var(--fg); font-weight: 500; }
.tz .legact { display: flex; gap: 2px; margin-left: auto; }
.tz .legchev { transform: rotate(180deg); transition: transform 160ms ease-out; }
.tz .legc.closed .legchev { transform: none; }
.tz .legbd { border: 1px solid var(--line); border-radius: 10px; padding: 16px; background: #FAFBFD; display: flex; flex-direction: column; gap: 12px; }
.btn.ic28 { width: 28px; height: 28px; padding: 0; justify-content: center; }
.tz .lsea { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px 14px; }
.tz .lsea .w2 { grid-column: span 2; }
.tz .lroad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; }
.tz .lstop { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tz .lvia { display: flex; align-items: center; justify-content: center; min-height: 76px; border: 1px dashed #C4C9D2; border-radius: 8px; background: #fff; }
.tz .lcar { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px 14px; align-items: end; }
.tz .linkbtn { border: 0; background: transparent; padding: 0; color: var(--accent); font: inherit; font-weight: 500; cursor: pointer; }
.tz .linkbtn:hover { color: var(--accent-h); }
.tz .vialab { display: flex; justify-content: space-between; gap: 8px; }
.tz .vialab .linkbtn { font-size: 12px; font-weight: 400; }
.tz .lgap { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 4px 10px; margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--amber-bg); color: var(--amber); font-size: 12px; }
.tz .lgap svg { flex: 0 0 auto; margin-top: 1px; }
.tz .lgap .gapt { flex: 1 1 240px; min-width: 0; }
.tz .lgap .linkbtn { font-size: 12px; color: var(--amber); text-decoration: underline; text-underline-offset: 2px; }
.tz .legadd { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 32px; }
.tz .legadd .btn.sm { height: 30px; padding: 0 12px; font-size: 13px; font-weight: 600; }
.tz .ldest { max-width: 440px; }
.tz .undo { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 8px 12px; border-radius: 8px; background: var(--soft); color: #374151; font-size: 12px; }
.tz .undo .linkbtn { font-size: 12px; }
.tz .sumbox { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--line); }
.tz .sumbox .routing { align-self: stretch; }
.tz .routing { margin: 0; padding: 12px 14px; background: var(--soft); border: 1px solid var(--line); border-radius: 8px; font-family: var(--mono); font-size: 12px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; color: #344054; }
.tz .nipl { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); }
.tz .nipl .cp { color: var(--fg); }
.tz .nipok { display: flex; align-items: center; gap: 4px; font-weight: 500; font-size: 12px; }
.tz textarea.in { min-height: 72px; }
.tz .ptool { display: flex; align-items: center; gap: 10px; padding: 14px 16px; flex-wrap: wrap; }
.tz .tscroll { position: relative; overflow-x: auto; border-top: 1px solid var(--line); }
.tbl { border-collapse: collapse; width: 100%; }
.tbl th { text-align: left; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 500; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; background: #FAFBFC; }
.tbl td { padding: 10px; border-top: 1px solid var(--soft); vertical-align: middle; }
.tbl tbody tr:first-child td { border-top: 0; }
.tbl tbody tr:hover { background: #FAFBFC; }
.tbl th.r, .tbl td.r { text-align: right; }
.nowrap { white-space: nowrap; }
.tz .pfoot { padding: 10px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.tz .empty { padding: 18px 16px; border-top: 1px solid var(--soft); color: var(--muted); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; text-align: left; flex-direction: row; }
.okd { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); white-space: nowrap; }
.okd svg { flex: 0 0 auto; }
.lnum { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 999px; background: #E9ECF1; color: #475467; font-size: 10px; font-weight: 600; margin-right: 6px; vertical-align: 1px; }
.nrc { display: inline-flex; align-items: center; gap: 4px; }
.nrc a { font-weight: 500; }
.cp.ic { margin: -4px 0; padding: 4px; }
.in.nrin { width: 150px; flex: 0 0 auto; }
.fake { pointer-events: none; }
.tz .dstack { display: flex; flex-direction: column; gap: 14px; }
.dropzone { position: relative; border: 1.5px dashed #C9D0DB; border-radius: 12px; background: #fff; padding: 16px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; min-height: 96px; transition: background .15s, border-color .15s; cursor: pointer; }
.dropzone.active, .dropzone:hover { border-color: var(--accent); background: #F5F7FF; }
.dropzone input[type=file] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.dropzone .dzic { width: 36px; height: 36px; border-radius: 999px; background: var(--accent-bg); color: var(--accent); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; pointer-events: none; }
.dropzone .dztx { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 240px; max-width: max-content; pointer-events: none; }
.dropzone .dzt { font-size: 14px; font-weight: 600; }
.dfilter { position: relative; display: block; width: 280px; max-width: 100%; }
.dfilter .ic { position: absolute; left: 10px; top: 10px; color: var(--muted); }
.dfilter .in { padding-left: 30px; }
.drow { display: grid; grid-template-columns: 32px minmax(0, 2fr) 120px minmax(0, 1.3fr) 56px 92px 76px; align-items: center; gap: 12px; min-height: 52px; padding: 8px 16px; border-top: 1px solid var(--soft); }
.drow:hover { background: #FAFBFC; }
.drow.dhead { min-height: 0; padding: 8px 16px; border-top: 0; border-bottom: 1px solid var(--line); background: #FAFBFC; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 500; }
.drow.dhead + .drow { border-top: 0; }
.dtyp { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dtyp .dtt { font-weight: 500; overflow-wrap: anywhere; }
.dsub { display: flex; flex-wrap: wrap; gap: 0 6px; font-size: 12px; color: var(--muted); }
.dfrom { color: #4B5563; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dact { position: relative; display: flex; justify-content: flex-end; }
.badge { width: 32px; height: 32px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 10px; font-weight: 600; background: var(--soft); color: #475467; }
.badge.pdf { background: var(--red-bg); color: var(--red); }
.badge.xml { background: var(--green-bg); color: var(--green); }
.badge.msg { background: #EEF3FB; color: #2E5AA3; }
.badge.new { background: #EEF3FB; color: #2E5AA3; border: 1px dashed #A9C1E8; }
.badge.bmiss { background: #fff; color: #98A2B3; border: 1px dashed var(--line2); }
.kchip { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 5px; background: var(--soft); color: #344054; font-family: var(--mono); font-size: 11px; }
.invrow { display: grid; grid-template-columns: 32px minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 16px; border-top: 1px solid var(--line); }
.invrow .dtyp { align-items: flex-start; }
.badge.fv { background: var(--accent-bg); color: var(--accent-h); }
.cp.inv .mono { font-weight: 500; font-size: 13px; }
.tz .dlg-back { position: fixed; inset: 0; z-index: 60; background: rgba(17,24,39,.45); }
.tz .dlg { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 61; width: 420px; max-width: calc(100% - 32px); background: #fff; border-radius: 12px; box-shadow: 0 24px 64px rgba(17,24,39,.25); padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.tz .dlg h2 { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35; }
.tz .chk { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.tz .chk input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--accent); flex: 0 0 auto; }
.tz .dlg-foot { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
@media (max-width: 1180px) {
  .tz .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tz .facts .kv:nth-child(4) { border-left: 0; border-top: 1px solid var(--line); }
  .tz .facts .kv:nth-child(5) { border-top: 1px solid var(--line); }
}
@media (max-width: 900px) { .tz .lsea { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tz .lsea .w2 { grid-column: span 1; } }
@media (max-width: 720px) {
  .tz .lroad, .tz .lcar { grid-template-columns: minmax(0, 1fr); }
  .tz .lsea { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .tz .lsea .w2 { grid-column: span 2; }
  .tz .legsum { order: 3; flex-basis: 100%; }
  .tz .leghd { column-gap: 8px; }
  .tz .legbd { padding: 12px; }
  .tz .lvia { min-height: 44px; }
  .tz .rcell { flex-basis: 100%; border-top: 1px solid var(--soft); }
  .tz .rcell:first-child { border-top: 0; }
}
@media (max-width: 640px) {
  .tz .esc { display: none; }
  .tz .shead { padding-left: 16px; }
  .tz .hero { padding: 16px 16px 0; }
  .tz .tcontent { padding: 16px 16px 32px; }
  .tz .sec { padding: 14px 16px 16px; }
  .tz .tscard { padding: 16px; }
  .tz .tscard.pair { grid-template-columns: minmax(0, 1fr); }
  .tz .secmeta { display: none; }
  .tz .tab { margin-right: 14px; }
  .tz .morew { position: static; }
  .tz .mmenu { right: 0; width: auto; }
  .tz .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tz .facts .kv:nth-child(n) { border-left: 0; border-top: 1px solid var(--line); }
  .tz .facts .kv:nth-child(even) { border-left: 1px solid var(--line); }
  .tz .facts .kv:nth-child(-n+2) { border-top: 0; }
  .invrow { grid-template-columns: 32px minmax(0, 1fr); }
  .invrow > *:nth-child(n+3) { grid-column: 2; }
}

/* briefcase modal */
.scrim { position: fixed; inset: 0; background: rgba(17,24,39,.45); z-index: 40; display: flex; align-items: flex-start; justify-content: center; padding: 24px; animation: fade 160ms ease-out; }
.modal { background: #fff; border-radius: 14px; width: 100%; max-width: 1180px; max-height: calc(100vh - 48px); display: flex; flex-direction: column; box-shadow: 0 24px 64px rgba(17,24,39,.25); animation: rise 200ms ease-out; overflow: hidden; }
.modal.sm { max-width: 720px; }
.modal.xs { max-width: 420px; }
.modal .mbody { overflow-y: auto; scrollbar-width: thin; display: flex; flex-direction: column; gap: 16px; padding: 0 max(32px, calc((100% - 1040px) / 2)) 32px; }
.modal .mhead { position: sticky; top: 0; z-index: 2; background: #fff; display: flex; align-items: center; gap: 10px; padding: 16px 0 12px; border-bottom: 1px solid var(--soft); margin-bottom: 4px; flex-wrap: wrap; }
.modal .mhead .nr { font-family: var(--mono); font-size: 18px; font-weight: 500; }
.modal .mfoot { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 24px; border-top: 1px solid var(--soft); background: #fff; }
.modal.sm .mbody { padding: 0 24px 24px; }
.kbd { height: 18px; padding: 0 5px; border: 1px solid var(--line); border-radius: 4px; font-size: 10px; color: var(--muted); display: inline-flex; align-items: center; }
.rstrip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.rstrip .cell { padding: 10px 12px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rstrip .cell:first-child { border-left: 0; }
.rstrip .t { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.stepn { width: 20px; height: 20px; border-radius: 999px; background: var(--soft); color: #344054; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.kvrow { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 10px 10px; }
.kvrow .kv { padding: 10px 12px; border-left: 1px solid var(--line); }
.kvrow .kv:first-child { border-left: 0; }
.rstrip + .kvrow { margin-top: -1px; }
.rstrip.top { border-radius: 10px 10px 0 0; }
.leg { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; }
.leg .lh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.leg .lh .path { font-weight: 600; }
.leg .lh .acts { margin-left: auto; display: flex; gap: 2px; }
.lgap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border-radius: 8px; background: var(--amber-bg); color: var(--amber); }
.viabox { border: 1.5px dashed var(--line2); border-radius: 8px; display: flex; align-items: center; justify-content: center; min-height: 92px; }
.pre { font-family: var(--mono); font-size: 12px; white-space: pre-wrap; background: var(--soft); border-radius: 8px; padding: 12px; margin: 0; overflow-wrap: anywhere; }
.rcard { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.rcard .t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; }
.drv { border: 1px solid var(--line2); border-radius: 8px; padding: 10px 12px; display: flex; gap: 10px; cursor: pointer; }
.drv.on { border-color: var(--accent); background: var(--accent-bg); }
.drv input { margin: 2px 0 0; accent-color: var(--accent); }
.chain { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.chain .st { border: 1px solid var(--line); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.chain .st.on { border-color: var(--accent); }
.chain .grid2 { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.docrow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--soft); }
.docrow:first-child { border-top: 0; }

/* dropdown: list with search and prefix instead of a native select */
.dd { position: relative; display: block; width: 100%; }
.dd-btn { display: flex; align-items: center; gap: 8px; width: 100%; height: 38px; padding: 0 10px 0 12px; border: 1px solid var(--line2); border-radius: 8px; background: #fff; color: var(--fg); font: inherit; cursor: pointer; text-align: left; }
.dd-btn:hover { border-color: #B8BFCA; }
.dd-btn.open { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.dd-btn.org { height: 38px; font-weight: 600; }
.dd-btn.ghost { border-color: transparent; background: transparent; color: #4B5563; }
.dd-btn.ghost:hover { background: var(--soft); }
.dd-btn.bad { border-color: var(--miss); }
.dd-btn.muted .dd-val { color: var(--muted); }
.field .dd-btn .dd-val.ph { color: var(--faint); }
.dd-btn.wrap { height: auto; min-height: 38px; padding-top: 6px; padding-bottom: 6px; }
.dd-btn.wrap .dd-val { white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }
.dd-btn:disabled { background: #F9FAFB; color: #4B5563; cursor: not-allowed; }
.dd-val { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-pre { color: var(--muted); white-space: nowrap; }
.dd-back { position: fixed; inset: 0; z-index: 40; }
.dd-pop { position: absolute; top: calc(100% + 6px); left: 0; min-width: 100%; z-index: 41; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 32px rgba(16,24,40,.10), 0 2px 6px rgba(16,24,40,.06); padding: 6px; outline: none; }
.dd-pop.right { left: auto; right: 0; }
.dd-search { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px; margin: 0 0 6px; border-bottom: 1px solid var(--soft); }
.dd-search input { border: 0; outline: 0; flex: 1 1 auto; font: inherit; background: transparent; min-width: 0; color: var(--fg); }
.dd-search input:focus { outline: 0; }
.dd-list { max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.dd-it { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--fg); font: inherit; cursor: pointer; text-align: left; white-space: nowrap; width: 100%; }
.dd-it:hover, .dd-it.act { background: var(--soft); }
.dd-it.sel { background: var(--accent-bg); color: var(--accent-h); }
.dd-it .sub { color: var(--muted); font-size: 12px; margin-left: auto; }
.dd-empty { padding: 8px; color: var(--muted); }

/* tooltip above a field (bad container number) */
.tipw { position: relative; display: inline-flex; }
.tip { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 30; width: max-content; max-width: 280px; padding: 7px 10px; border-radius: 7px; background: var(--fg); color: #fff; font-size: 12px; line-height: 1.4; font-weight: 400; box-shadow: 0 6px 20px rgba(17,24,39,.18); pointer-events: none; opacity: 0; transform: translateY(2px); transition: opacity 120ms ease-out, transform 120ms ease-out; white-space: normal; text-align: left; }
.tip::after { content: ""; position: absolute; left: 14px; top: 100%; border: 6px solid transparent; border-top-color: var(--fg); }
.tipw:hover .tip, .tipw:focus-within .tip, .tip.show { opacity: 1; transform: none; }
.nrbad { color: var(--miss); text-decoration: underline wavy var(--miss); text-underline-offset: 3px; }
input.nrbad { border-color: var(--miss); }
.nrw { display: inline-flex; align-items: center; gap: 6px; }
.nrw > svg { flex: 0 0 auto; color: var(--miss); }

/* e-mail recipients as chips (RecipientBox) */
.rbox { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 38px; padding: 3px 6px; border: 1px solid var(--line2); border-radius: 8px; background: #fff; }
.rbox:focus-within { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.rbox input { flex: 1 1 140px; min-width: 0; height: 26px; border: 0; padding: 0 4px; background: transparent; }
.rbox input:focus { outline: 0; }
.rchip { display: inline-flex; align-items: center; gap: 2px; height: 26px; padding: 0 2px 0 8px; border-radius: 6px; background: var(--accent-bg); color: var(--accent-h); font-size: 12px; font-weight: 500; max-width: 100%; }
.rchip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rchip.bad { background: var(--red-bg); color: var(--red); }
.rx { width: 22px; height: 22px; border: 0; border-radius: 4px; background: transparent; color: inherit; display: inline-flex; align-items: center; justify-content: center; padding: 0; flex: 0 0 auto; transition: transform 160ms ease-out; }
.rx:hover { background: rgba(37,99,235,.12); }
.rx:active { transform: scale(.97); }

/* detail pages: main column + read-only aside */
.cols { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.cols .colmain { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.cols .aside { flex: 1 1 280px; max-width: 360px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.btn.off, a.off { opacity: .5; pointer-events: none; }
.grid4 .span2, .grid2 .span2 { grid-column: span 2; }
.cp.wrap { white-space: normal; text-align: left; overflow-wrap: anywhere; }
.cp.wrap .mono { font-family: inherit; font-size: inherit; }
.ph.hero { gap: 12px; }
@media (max-width: 640px) { .grid4 .span2, .grid2 .span2 { grid-column: auto; } }
.cp.h1 { font-family: var(--mono); font-size: 20px; font-weight: 500; }
.cp.h1 .mono { font-size: inherit; }
.rl { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--soft); color: #344054; font-size: 12px; font-weight: 500; white-space: nowrap; }
.tog { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line2); background: #fff; color: #374151; font-weight: 500; }
.tog.on { background: var(--accent-bg); border-color: var(--accent); color: var(--accent-h); }
.hero h1 { font-size: 24px; letter-spacing: -0.01em; }
.subrow { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) 100px 100px; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--soft); }
.subrow:first-of-type { border-top: 0; }
.viewer { background: #ECEEF1; border: 1px solid var(--line); border-radius: 10px; min-height: 480px; display: flex; flex-direction: column; overflow: hidden; }
.viewer iframe { flex: 1; width: 100%; min-height: 560px; border: 0; background: #fff; }
.viewer .vh2 { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: #fff; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
@media (max-width: 640px) { .cols .aside { max-width: none; } .subrow { grid-template-columns: 1fr; gap: 2px; } }

/* login */
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.loginbox { width: 100%; max-width: 420px; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.loginbox h1 { font-size: 22px; }
.loginbox .lab { margin-top: 8px; }
.loginrow .btn { width: 100%; justify-content: flex-start; height: 44px; }
.loginbox .or { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--faint); }
.loginbox .or::before, .loginbox .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.pwform { display: flex; flex-direction: column; gap: 8px; }
.pwform .btn { justify-content: center; }
.err { color: var(--miss); }

#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--amber-bg); color: var(--amber); padding: 10px 16px; z-index: 100; box-shadow: 0 -2px 8px rgba(0,0,0,.1); }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 12px; top: 8px; }

@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .scrim, .modal, .nt-scrim, .nt { animation: none; } }

@media (max-width: 1180px) {
  .detail { padding-left: 16px; }
}
@media (max-width: 640px) {
  .hdr { padding: 8px 16px; }
  .content { padding: 16px 16px 24px; }
  .grid2, .grid3, .grid4, .chain { grid-template-columns: 1fr; }
  .rstrip, .kvrow { grid-auto-flow: row; grid-auto-columns: auto; }
  .rstrip .cell, .kvrow .kv { border-left: 0; border-top: 1px solid var(--line); }
  .rstrip .cell:first-child, .kvrow .kv:first-child { border-top: 0; }
  .scrim { padding: 0; }
  .modal { border-radius: 0; max-height: 100vh; height: 100vh; }
  .modal .mbody, .modal.sm .mbody { padding: 0 16px 24px; }
  .bigsearch input { font-size: 16px; }
  .bigsearch .kbd { display: none; }
  .nt-wrap { padding: 12px 0; }
  .nt { max-width: calc(100% - 24px); max-height: calc(100vh - 24px); overflow: auto; }
  .nt-head { padding: 10px 8px 10px 16px; }
  .nt-body { padding: 16px; }
  .nt-foot { padding: 12px 16px; }
  .seg.scroll { max-width: 100%; overflow-x: auto; }
  .seg.scroll button { flex: 0 0 auto; }
  .section { max-width: none; }
}

/* Container screen: one form panel with sections, legs as cards, aside with briefcase data (Kontener artboard). */
.kt-hero { background: #fff; border-bottom: 1px solid var(--line); padding: 18px max(24px, calc(100% - 1416px)) 18px 24px; }
.kt-hrow { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.kt-hero h1 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.kt-hero h1.mono { font-size: 24px; font-weight: 500; }
.kt-hero .cp.kt-hcp { margin: 0 -6px; padding: 6px; }
.kt-hnav { display: inline-flex; align-items: center; gap: 4px; }
.kt-hnav .help { padding: 0 4px; white-space: nowrap; }
.kt-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.kt-dupbar { display: flex; align-items: flex-start; gap: 6px 12px; padding: 10px 24px; background: var(--soft); border-bottom: 1px solid var(--line); color: #374151; }
.kt-dupbar > svg { flex: 0 0 auto; color: var(--muted); margin-top: 2px; }
.kt-dupbar > span { min-width: 0; }
.kt-dupbar .linkbtn { margin-left: 6px; white-space: nowrap; }
.kt .linkbtn { color: var(--accent); font-weight: 500; }
.kt .linkbtn:hover { color: var(--accent-h); }
.kt .help { font-size: 12px; color: var(--muted); }
.kt .b { font-weight: 600; }
.kt .small { font-size: 12px; white-space: nowrap; }
.kt .chip.file { color: #4B5563; }
.kt-cols { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.kt-form { flex: 999 1 640px; min-width: 0; }
.kt-aside { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.kt .sec { display: flex; flex-direction: column; gap: 14px; padding: 16px 20px; border-top: 1px solid var(--line); }
.kt .sec:first-child { border-top: 0; }
.kt .sec h2, .kt-aside h2 { margin: 0; font-size: 14px; font-weight: 600; }
.kt .sechd { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
.kt .g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; align-items: start; }
.kt .g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; align-items: start; }
.kt .field.full { grid-column: 1 / -1; }
.kt .field input.bad { border-color: #D9A39D; background: #FFFBFA; }
.kt .field input.bad:focus { outline-color: var(--red); border-color: var(--red); }
.kt .flrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kt .flrow > .tipw { margin: 0 auto 0 -4px; }
.kt .ro { height: 38px; display: flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); color: #374151; min-width: 0; overflow: hidden; white-space: nowrap; }
.kt .okt, .kt .errt { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.kt .okt { color: var(--green); font-weight: 400; }
.kt .errt { color: var(--red); }
.kt .nrwrap { display: flex; width: 100%; }
.kt .nrwrap input { padding-right: 32px; }
.kt .nrbang { position: absolute; right: 10px; top: 10px; display: flex; color: var(--miss); }
.kt .nrmsg { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; min-height: 0; }
.kt .tempw { position: relative; }
.kt .tempw input { padding-right: 40px; }
.kt .tempw span { position: absolute; right: 10px; top: 8px; color: var(--muted); }
.kt .cp.pincp { flex-direction: row-reverse; font-size: 12px; color: #4B5563; }
.kt .klegs { display: flex; flex-direction: column; gap: 10px; }
.kt .kleg { min-width: 0; }
.kt .kleghd { display: flex; align-items: center; gap: 12px; min-height: 32px; min-width: 0; }
.kt .klhd { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kt .klrow { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.kt .klrow > svg { flex: 0 0 auto; color: var(--accent); }
.kt .klt { flex: 1 1 160px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.kt .klt .voy { color: var(--muted); font-weight: 400; white-space: nowrap; margin-left: .35em; }
.kt .klpath { color: #374151; overflow-wrap: anywhere; }
.kt .kbody { display: flex; flex-direction: column; gap: 14px; padding: 10px 0 0; }
.kt .chain { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.kt .chain.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kt .step { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #FAFBFC; min-width: 0; }
.kt .step.on { background: #fff; border-color: #C9D3F6; }
.kt .stephd { display: flex; align-items: center; gap: 8px; }
.kt .arr { position: absolute; left: -20px; top: 12px; width: 22px; height: 22px; border-radius: 999px; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--muted); z-index: 1; }
.kt .kdt { display: flex; flex-wrap: wrap; gap: 10px 8px; }
.kt .kdt .field { flex: 1 1 130px; }
.kt .kdt .field.ktime { flex: 0 0 120px; }
.kt .kdt .ktime label { white-space: nowrap; }
.kt .kinh { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; margin-top: -6px; font-size: 12px; color: var(--muted); }
.kt .kinh .grow { flex: 1 1 200px; min-width: 0; }
.kt .kinh .linkbtn, .kt .help .linkbtn { font-size: 12px; }
.kt .kdrv { display: flex; flex-direction: column; gap: 8px; }
.kt .kdrv > .fl { font-size: 12px; color: var(--muted); }
.kt .drvs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.kt .rcard { flex-direction: row; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; min-width: 0; }
.kt .rcard:hover { border-color: #B8BFCA; }
.kt .rcard.on { border-color: var(--accent); background: var(--accent-bg); box-shadow: inset 0 0 0 1px var(--accent); }
.kt .rcard input { margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--accent); }
.kt .rc-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.kt .kadd { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-weight: 500; }
.kt .drvbox { display: flex; flex-direction: column; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #FAFBFC; }
.kt .drvbox > .row { gap: 10px; }
.kt .cpv { height: 34px; display: flex; align-items: center; gap: 8px; min-width: 0; padding-left: 6px; }
.kt .cpv .kdoc { color: #4B5563; white-space: nowrap; }
.kt .chk { display: inline-flex; align-items: center; gap: 8px; color: #374151; cursor: pointer; align-self: flex-start; }
.kt .chk input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.kt .ahd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.kt-from { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.kt .kvrs { display: flex; flex-direction: column; margin-top: 4px; }
.kt .kvr { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-top: 1px solid var(--soft); }
.kt .kvr:first-child { border-top: 0; }
.kt .kvr > span:first-child { color: var(--muted); }
.kt .kvr > span:last-child { font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.kt-docs { display: flex; flex-direction: column; padding-bottom: 6px; }
.kt-docs .ahd { align-items: center; padding: 14px 16px 8px; }
.kt .kdrow { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-top: 1px solid var(--soft); }
.kt .kdrow:hover { background: #FAFBFC; }
.kt .kdrow .badge { flex: 0 0 auto; }
.kt .kdrow .b { font-weight: 500; }
.kt .kdrow .b.muted { color: var(--muted); }
.kt .dt { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.kt .dnone { padding: 8px 16px 12px; border-top: 1px solid var(--soft); }
@media (max-width: 720px) {
  .kt-hero, .kt-dupbar { padding-left: 16px; padding-right: 16px; }
  .kt .content { padding: 16px; }
  .kt .chain, .kt .chain.c2 { grid-template-columns: minmax(0, 1fr); }
  .kt .kbody { padding: 12px; }
  .kt .arr { left: 50%; top: -20px; transform: translateX(-50%) rotate(90deg); }
}
@media (max-width: 640px) {
  .kt .g2, .kt .g3 { grid-template-columns: minmax(0, 1fr); }
  .kt .sec, .kt .rare { padding-left: 16px; padding-right: 16px; }
}

/* Customer list (Kontrahenci artboard). */
.kl { gap: 14px; }
.kl .srow { gap: 8px 12px; }
.kl .bigsearch input { padding-right: 14px; }
.kl .seg { align-self: flex-start; }
.kl .tinner { min-width: 960px; }
.kl .th { display: grid; align-items: center; gap: 12px; padding: 8px 16px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 500; border-bottom: 1px solid var(--line); }
.kl .tr { display: grid; align-items: center; gap: 12px; padding: 8px 16px; min-height: 52px; border-top: 1px solid var(--soft); }
.kl .th + .tr { border-top: 0; }
.kl .tr:hover { background: #FAFBFC; }
.kl .kgrid { grid-template-columns: 132px minmax(0, 1.3fr) 156px minmax(0, 1fr) 76px 128px 64px; }
.kl .r { text-align: right; }
.kl .b { font-weight: 600; overflow-wrap: anywhere; }
.kl .m { font-weight: 500; }
.kl .minw { min-width: 0; }
.kl .lnk { color: var(--fg); }
.kl .lnk:hover { color: var(--accent-h); }
.kl .cp.full { display: inline-block; max-width: 100%; color: var(--muted); }
.kl .cp.full svg { margin-left: 6px; vertical-align: -1px; }
.kl .cp.full .cp-ok { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 4px; padding: 2px 6px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px var(--line); white-space: nowrap; z-index: 2; }
.kl .rls { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.kl .rl { height: 20px; padding: 0 7px; border-radius: 999px; background: var(--soft); color: #475467; font-size: 11px; }
.kl .last { display: flex; flex-direction: column; }
.kl .last a { white-space: nowrap; }
.kl .last .muted { font-size: 12px; }
.kl .acts { display: flex; justify-content: flex-end; }
.kl .kempty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 16px; color: var(--muted); text-align: center; overflow-wrap: anywhere; }
.kl .kfoot { padding: 10px 16px; border-top: 1px solid var(--line); color: var(--muted); }
@media (max-width: 720px) { .kl.content { padding: 16px; } }

/* Customer card: hero, form panel on the left, places, briefcases, invoices and drivers on the right (Kontrahent artboard). */
.kc-hero { background: #fff; border-bottom: 1px solid var(--line); padding: 18px max(24px, calc(100% - 1416px)) 16px 24px; }
.kc-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kc-hero h1 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; overflow-wrap: anywhere; }
.kc-sub { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; }
.kc-full { font-size: 14px; }
.kc-nip { color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.kc-nip .mono { color: var(--fg); }
.kc .txt { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.kc-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.kc-roles { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.kc-roles .rlab { color: var(--muted); margin-right: 4px; }
.kc-roles .hint { color: var(--muted); font-size: 12px; margin-left: 4px; }
.kc .tog { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid #E5E7EB; background: #F3F4F6; color: var(--muted); font-weight: 500; white-space: nowrap; transition: transform 160ms ease-out; }
.kc .tog:hover { border-color: var(--line2); color: #374151; }
.kc .tog:active { transform: scale(.97); }
.kc .tog.on { background: var(--accent-bg); border-color: #C7D2FE; color: var(--accent-h); }
.kc-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; align-items: start; }
.kc-form { display: flex; flex-direction: column; min-width: 0; }
.kc-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.kc .sec { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.kc .sec:last-child { border-bottom: 0; }
.kc .sec h2, .kc .ph h2 { margin: 0; font-size: 14px; font-weight: 600; }
.kc .fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.kc .fgrid .wide, .kc .subh { grid-column: 1 / -1; }
.kc .subh { font-size: 12px; font-weight: 600; color: #374151; margin-top: 4px; }
.kc .field .help { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.kc .field .help.ok { color: var(--green); }
.kc .field .help.err { color: var(--red); }
.kc .field input.bad { border-color: #D9A39D; background: #FFFBFA; }
.kc-fullrow { display: flex; align-items: center; gap: 6px; }
.kc-fullrow input { flex: 1 1 auto; min-width: 0; }
.kc-fullrow .btn { flex: 0 0 auto; }
.kc-curs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kc .suf { position: relative; }
.kc .suf input { padding-right: 40px; }
.kc .suf span { position: absolute; right: 10px; top: 0; height: 34px; display: flex; align-items: center; color: var(--muted); pointer-events: none; }
.kc .tagbox { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 34px; padding: 4px 6px; border: 1px solid var(--line2); border-radius: 8px; background: #fff; }
.kc .tagbox:focus-within { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.kc .tagbox input { height: 24px; border: 0; border-radius: 4px; padding: 0 4px; flex: 1 1 140px; min-width: 120px; background: transparent; }
.kc .tagbox input:focus { outline: 0; }
.kc .tag { display: inline-flex; align-items: center; gap: 2px; height: 24px; padding: 0 2px 0 8px; border-radius: 6px; background: var(--accent-bg); color: var(--accent-h); font-size: 12px; font-weight: 500; max-width: 100%; }
.kc .xbtn { width: 20px; height: 20px; border: 0; border-radius: 4px; background: transparent; color: inherit; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: transform 160ms ease-out; }
.kc .xbtn:hover { background: #DDE4FF; }
.kc .xbtn:active { transform: scale(.97); }
.kc .ph { display: flex; flex-direction: row; align-items: center; gap: 8px 10px; padding: 14px 16px; flex-wrap: wrap; }
.kc .th { display: grid; align-items: center; gap: 10px; padding: 8px 16px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 500; border-bottom: 1px solid var(--line); }
.kc .tr { display: grid; align-items: center; gap: 12px; padding: 0 16px; min-height: 44px; border-top: 1px solid var(--soft); }
.kc .th + .tr, .kc .ph + .tr { border-top: 0; }
.kc .ph + .tr { border-top: 1px solid var(--soft); }
.kc .tr:hover { background: #FAFBFC; }
.kc .m { font-weight: 500; overflow-wrap: anywhere; }
.kc .muted2 { color: #4B5563; }
.kc .col { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.kc .col .dk { font-size: 12px; color: var(--muted); }
.kc-places { min-width: 480px; }
.kc .prow { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) 32px 84px; gap: 10px; }
.kc .tr.prow, .kc .tr.drow { padding-top: 8px; padding-bottom: 8px; }
.kc .brow { grid-template-columns: 128px minmax(0, 1fr) auto; }
.kc-drivers { min-width: 520px; }
.kc .drow { grid-template-columns: minmax(0, 1fr) 150px 130px minmax(0, 1fr); }
.kc-dtop { border-top: 1px solid var(--soft); }
.kc-new { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px 14px; border-top: 1px solid var(--soft); background: #FAFBFC; }
.kc-none { padding: 18px 16px 20px; border-top: 1px solid var(--soft); color: var(--muted); text-align: center; }
.kc-off { background: #F9FAFB; border-style: dashed; }
.kc-off .ph, .kc-off h2 { color: var(--muted); }
.kc-off .hint { font-size: 12px; }
@media (max-width: 1180px) { .kc-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .kc-hero { padding-left: 16px; padding-right: 16px; } .kc .content { padding: 16px; } }
@media (max-width: 560px) { .kc .fgrid { grid-template-columns: minmax(0, 1fr); } }

/* Document screen: hero, file preview on the left, description form on the right (Dokument artboard). */
.dk { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.dk-hero { background: #fff; border-bottom: 1px solid var(--line); }
.dk-hero { padding: 18px max(24px, calc(100% - 1416px)) 18px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.dk-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dk-hero h1 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; overflow-wrap: anywhere; }
.dk .help { font-size: 12px; color: var(--muted); }
.dk-title .help { font-size: 13px; }
.dk-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dk-err { padding: 12px 24px 0; max-width: 1440px; }
.dk-body { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: stretch; max-width: 1440px; width: 100%; }
.dk-viewer { flex: 1 1 480px; min-width: 0; background: #ECEEF1; display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.dk-vbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; background: #fff; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.dk-vname { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dk-vname .m { font-weight: 500; overflow-wrap: anywhere; }
.dk-vtools { display: flex; align-items: center; gap: 6px; }
.dk-stage { flex: 1 1 auto; display: flex; justify-content: center; align-items: flex-start; padding: 24px; overflow: auto; }
.dk-page { width: 100%; max-width: 520px; aspect-ratio: 1 / 1.414; background: #fff; border: 1px solid #D1D5DB; transition: transform 160ms ease-out; }
.dk-page.zoom { max-width: none; }
.dk-page iframe { width: 100%; height: 100%; border: 0; display: block; }
.dk-page.img { aspect-ratio: auto; display: flex; justify-content: center; }
.dk-page.img img { max-width: 100%; display: block; }
.dk-nopreview { margin-top: 40px; color: var(--muted); text-align: center; }
.dk-form { flex: 1 1 440px; min-width: 0; max-width: 620px; background: #fff; display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.dk .sec { display: flex; flex-direction: column; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.dk .sec.last { border-bottom: 0; gap: 12px; }
.dk .sec h2 { margin: 0; font-size: 14px; font-weight: 600; }
.dk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px 16px; }
.dk-grid.sm { grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr)); }
.dk .field input.in { height: 38px; border-color: #D1D5DB; }
.dk .field .dd-btn { height: 38px; }
.dk .field input.numin { text-align: right; font-variant-numeric: tabular-nums; }
.dk .field input.bad { border-color: var(--red); background: #FFFBFA; }
.dk .cmp { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); color: #374151; }
.dk .cmp.bad { background: var(--red-bg); border-color: #F0D5D2; color: var(--red); }
.dk .cmp svg { flex: 0 0 auto; margin-top: 2px; }
@media (max-width: 720px) { .dk-hero { padding-left: 16px; padding-right: 16px; } .dk-err { padding: 12px 16px 0; } .dk-stage { padding: 16px; } }
.dk .btn { height: 38px; padding: 0 14px; gap: 8px; border-color: #D1D5DB; }
.dk .btn.primary { border-color: var(--accent); font-weight: 600; }
.dk .btn.sm { height: 32px; padding: 0 10px; font-size: 13px; }

/* Notification e-mail: hero, the mail form on the left, data sources, attachments and earlier notices on the right (Awizacja artboard). */
.aw-hero { background: #fff; border-bottom: 1px solid var(--line); padding: 18px max(24px, calc(100% - 1416px)) 18px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.aw-hrow { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.aw-hero h1 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.45; }
.aw .help { font-size: 12px; color: var(--muted); }
.aw .errt { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--red); }
.aw-cols { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.aw-mail { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 16px 20px; }
.aw .g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; align-items: start; }
.aw-blab { display: flex; align-items: center; gap: 8px; min-height: 28px; flex-wrap: wrap; }
.aw-body { display: block; width: 100%; min-height: 520px; height: 600px; padding: 12px 14px; border: 1px solid var(--line2); border-radius: 8px; background: #fff; font-family: var(--mono); font-size: 13px; line-height: 1.55; resize: vertical; white-space: pre-wrap; }
.aw-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.aw-acts .help { margin-left: 4px; }
.aw-aside { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.aw-aside h2 { margin: 0; font-size: 14px; font-weight: 600; }
.aw .ahd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.aw-src { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.aw-src ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.aw-src li { display: flex; align-items: baseline; gap: 8px; padding: 8px 0; border-top: 1px solid var(--soft); }
.aw-src li:first-child { border-top: 0; }
.aw-src .b { font-weight: 500; }
.aw-src .dot { width: 6px; height: 6px; border-radius: 999px; background: #98A2B3; flex: 0 0 auto; position: relative; top: -2px; }
.aw-src .dot.acc { background: var(--accent); }
.aw-src .dot.grn { background: #5FA97A; }
.aw-src .dot.amb { background: #D7A447; }
.aw-atts { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.aw-att { display: flex; align-items: center; gap: 10px; padding: 8px; margin: 0 -8px; border-radius: 8px; cursor: pointer; }
.aw-att:hover { background: #F9FAFB; }
.aw-att input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); flex: 0 0 auto; }
.aw .badge { width: 28px; height: 28px; flex: 0 0 auto; }
.aw .dt { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.aw .dt .b { font-weight: 500; overflow-wrap: anywhere; }
.aw-prev { display: flex; flex-direction: column; padding-bottom: 6px; }
.aw-prev .ahd { padding: 14px 16px 8px; }
.aw-none { padding: 8px 16px; border-top: 1px solid var(--soft); }
@media (max-width: 720px) { .aw-hero { padding-left: 16px; padding-right: 16px; } .aw .content { padding: 16px; } .aw-mail { padding: 16px; } }
@media (max-width: 640px) { .aw .g2 { grid-template-columns: minmax(0, 1fr); } }

/* Sales invoice screen: hero, form cards on the left, read-only aside (Faktura artboard). */
.fk { line-height: 1.5; overflow-x: clip; }
.fk .mono { font-size: 13px; }
.fk-hero { background: #fff; border-bottom: 1px solid var(--line); padding: 18px max(24px, calc(100% - 1416px)) 18px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.fk-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fk-hero h1 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.fk-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fk .btn { height: 38px; padding: 0 14px; gap: 8px; border-color: #D1D5DB; }
.fk .btn.primary { border-color: var(--accent); font-weight: 600; }
.fk .btn.sm { height: 32px; padding: 0 10px; font-size: 13px; }
.fk .btn.sm.fk-x { padding: 0 8px; }
.fk-body { padding: 24px; display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; max-width: 1440px; width: 100%; }
.fk-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.fk-aside { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.fk .card { background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.fk-clone { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px 10px 16px; background: var(--accent-bg); border: 1px solid #D5DDF7; border-radius: 12px; }
.fk-clone > svg { color: var(--accent-h); }
.fk-ctext { flex: 1 1 320px; min-width: 0; font-size: 13px; color: var(--fg); }
.fk-chead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.fk-chead.start { justify-content: flex-start; }
.fk-chead h2 { margin: 0; font-size: 15px; font-weight: 600; }
.fk-chint { font-size: 13px; color: var(--muted); }
.fk-hcard, .fk-lines { container-type: inline-size; }
.fk-hgrid { padding: 16px 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.fk-hgrid .f-full, .fk-hgrid .f-half, .fk-hgrid .f-wide { grid-column: 1 / -1; }
@container (max-width: 339px) { .fk-hgrid { grid-template-columns: minmax(0, 1fr); } }
@container (min-width: 600px) { .fk-hgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .fk-hgrid .f-half { grid-column: span 2; } }
@container (min-width: 900px) { .fk-hgrid .f-wide { grid-column: span 2; } }
.fk .field input.in { height: 38px; border-color: #D1D5DB; }
.fk .field textarea.in { min-height: 38px; padding: 8px 10px; border-color: #D1D5DB; line-height: 1.45; field-sizing: content; }
.fk .field .fhelp { font-size: 12px; color: var(--muted); }
.fk-pos { border-collapse: collapse; width: 100%; }
.fk-pos th { text-align: left; font-weight: 500; font-size: 12px; color: var(--muted); padding: 8px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; background: #FAFAFA; }
.fk-pos td { padding: 6px; border-bottom: 1px solid #F0F1F3; vertical-align: middle; }
.fk-pos th:first-child, .fk-pos td:first-child { padding-left: 18px; }
.fk-pos th:last-child, .fk-pos td:last-child { padding-right: 12px; }
.fk-pos .r { text-align: right; }
.fk-pos .nw { white-space: nowrap; }
.fk-pos .b { font-weight: 500; }
/* The mock sizes these cells without border-box; widths here include the 6 px side padding. */
.fk-pos .w-lp { width: 44px; } .fk-pos .w-qty { width: 68px; } .fk-pos .w-price { width: 104px; } .fk-pos .w-vat { width: 128px; } .fk-pos .w-1 { width: 1%; }
.fk-pos .c-svc { min-width: 182px; } .fk-pos .c-qty { min-width: 70px; } .fk-pos .c-price { min-width: 104px; } .fk-pos .c-vat { min-width: 120px; }
.fk-pos input { height: 34px; padding: 0 8px; border: 1px solid #D1D5DB; border-radius: 6px; background: #fff; width: 100%; }
.fk-pos textarea { display: block; width: 100%; min-height: 34px; padding: 6px 8px; border: 1px solid #D1D5DB; border-radius: 6px; background: #fff; line-height: 1.45; resize: none; field-sizing: content; }
.fk-pos input.r { text-align: right; font-variant-numeric: tabular-nums; }
.fk-pos input.bad { border-color: var(--red); background: #FFFBFA; }
.fk-none { padding: 20px 18px; color: var(--muted); text-align: center; }
.fk-tscroll { position: relative; }
@container (max-width: 760px) { .fk-tscroll { overflow-x: auto; } }
.fk-sum { display: flex; justify-content: flex-end; padding: 14px 18px; }
.fk-sum dl { margin: 0; display: grid; grid-template-columns: auto auto; gap: 6px 28px; font-size: 14px; text-align: right; }
.fk-sum dt { color: var(--muted); }
.fk-sum dt.b { color: var(--fg); font-weight: 600; }
.fk-sum dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
.fk-sum dd.big { font-size: 18px; font-weight: 600; }
.fk-sum dd.pln { color: var(--muted); font-weight: 400; }
.fk-checks { padding: 14px 18px; display: flex; flex-direction: column; gap: 8px; }
.fk-chhead { display: flex; align-items: center; gap: 12px; }
.fk-chhead > svg { color: var(--muted); }
.fk-chhead h2 { margin: 0; flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; }
.fk-chhead .num { color: #374151; font-weight: 500; white-space: nowrap; }
.fk-checklist { margin: 0; padding: 0 0 0 32px; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #374151; }
.fk-checklist li { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.fk-checklist svg { flex: 0 0 auto; margin-top: 3px; color: var(--green); }
.fk-checklist li.bad { color: var(--miss); font-weight: 500; }
.fk-checklist li.bad svg { color: var(--miss); }
.fk-acard { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.fk-lab { margin: 0; font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.fk-steps { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: #374151; }
.fk-steps .mono { font-size: 12px; }
.fk-from { gap: 10px; }
.fk-from dl { margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.fk-from dl > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fk-from dt { font-size: 12px; color: var(--muted); }
.fk-from dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.fk-from .cp { white-space: normal; max-width: 100%; text-align: left; }
.fk-from .cp .mono { overflow-wrap: anywhere; }
.fk-from .b { display: block; font-weight: 500; }
.fk-from .full { display: block; color: var(--muted); }
@media (max-width: 720px) { .fk-hero { padding-left: 16px; padding-right: 16px; } .fk-body { padding: 16px; } }

/* Waybill screen: hero with the PDF action, the A4 sheet 1:1 on a grey stage (List przewozowy artboard). */
.lp { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.lp-hero { background: #fff; border-bottom: 1px solid var(--line); padding: 18px max(24px, calc(100% - 1416px)) 18px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.lp-hrow { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.lp-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lp-hero h1 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.lp .help { font-size: 12px; color: var(--muted); }
.lp-title .help { font-size: 13px; overflow-wrap: anywhere; }
.lp-acts { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.lp-miss { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lp-miss .b { font-weight: 500; color: var(--fg); }
.lp-stage { flex: 1 1 auto; background: #ECEEF1; padding: 24px; overflow-x: auto; }
/* The A4 sheet scrolls inside the stage on a phone instead of widening the page. */
.lp-stage { contain: inline-size; }
.lp-sheet { width: 794px; min-height: 1123px; padding: 36px 40px; background: #fff; display: flex; flex-direction: column; box-shadow: 0 1px 3px rgba(16, 24, 40, .12); color: #111827; font-size: 11px; line-height: 1.4; }
.lp-sheet .mono { font-size: inherit; }
.lp-t { width: 100%; border-collapse: collapse; table-layout: fixed; }
.lp-t td { box-sizing: content-box; border: 1px solid #111827; vertical-align: top; padding: 7px 10px 9px; font-size: 11px; color: #111827; }
.lp-h104 { height: 104px; } .lp-h92 { height: 92px; } .lp-h136 { height: 136px; } .lp-h84 { height: 84px; }
.lp-h140 { height: 140px; } .lp-h196 { height: 196px; } .lp-h118 { height: 118px; }
.lp-no { font-weight: 700; }
.lp-b { font-weight: 600; }
.lp-sheet .lp-v { font-size: 12px; font-weight: 600; }
.lp-c { text-align: center; }
.lp-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: baseline; }
.lp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.lp-logo { font-family: var(--mono); font-size: 18px; font-weight: 600; line-height: 1.1; }
img.lp-logo { display: block; max-height: 40px; max-width: 180px; }
.lp-addr { text-align: right; line-height: 1.45; }
.lp-pin { margin: -7px -10px 0; padding: 6px 10px; border-bottom: 1px solid #111827; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.lp-sheet .lp-pinv { font-size: 13px; font-weight: 600; }
.lp-dir { font-size: 26px; font-weight: 700; letter-spacing: .12em; line-height: 1.2; margin-top: 14px; }
.lp-carrier { font-size: 14px; font-weight: 700; margin-top: 36px; min-height: 1.4em; }
.lp-stamp { margin-top: 24px; }
.lp-route { margin-top: 20px; letter-spacing: .02em; }
.lp-shipper { margin-top: 16px; line-height: 1.5; }
.lp-when { width: max-content; margin: 22px auto 0; column-gap: 32px; row-gap: 8px; }
.lp-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 16px; align-items: baseline; }
.lp-sheet .lp-cno { font-size: 13px; }
.lp-ship { grid-template-columns: 132px minmax(0, 1fr); row-gap: 12px; }
.lp-weight { margin-top: 14px; }
.lp-remarks { margin-top: 8px; line-height: 1.5; }
.lp-seal { margin-top: 14px; font-weight: 600; }
.lp-modes { grid-template-columns: 110px minmax(0, 1fr); margin-top: 14px; row-gap: 8px; }
.lp-ln { height: 24px; border-bottom: 1px dotted #111827; }
.lp-ln1 { margin-top: 8px; }
.lp-docs { margin-top: 18px; line-height: 1.5; }
.lp-driver { grid-template-columns: 74px minmax(0, 1fr); row-gap: 5px; }
.lp-t td.lp-signcell { vertical-align: bottom; padding-bottom: 12px; }
.lp-sign { margin: 0 28px; border-top: 1px solid #111827; padding-top: 5px; text-align: center; }
.lp-foot { margin-top: auto; padding-top: 16px; display: flex; justify-content: space-between; gap: 16px; font-size: 10px; color: #111827; }
@media (max-width: 720px) { .lp-hero { padding-left: 16px; padding-right: 16px; } .lp-stage { padding: 16px; } }
@page waybill { size: A4; margin: 0; }
@media print {
  body:has(.lp-sheet) { page: waybill; background: #fff; }
  .app:has(.lp-sheet) { display: block; min-height: 0; }
  .app:has(.lp-sheet) .mods, .app:has(.lp-sheet) .hdr, .app:has(.lp-sheet) .tourbtn, .lp-hero { display: none; }
  .lp-stage { padding: 0; background: none; overflow: visible; contain: none; }
  /* The sheet is about 70 px taller than A4, as in the mock; printing scales it onto one page. */
  .lp-sheet { box-shadow: none; zoom: .93; margin: 0 auto; }
}

/* core */
/* donut caption: 12 px, dark for "7 z 9", green for "komplet" */
.dn > .num, .dn > .okt { font-size: 12px; }
/* list: "Kontenery:" and "Brakuje:" labels stay inline (the document screen's root .dk is a flex column) */
.detail .dk { display: inline; }
/* list: files dragged over the window can be dropped on a row; a hidden file input covers each row meanwhile */
.lst .row.tgrid { position: relative; }
.lst .rowdrop { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.dragfiles .lst .rowdrop { pointer-events: auto; }
.lst .row.drop { background: var(--accent-bg); box-shadow: inset 0 0 0 2px var(--accent); }
.lst .dropt { color: var(--accent-h); font-weight: 500; }
/* briefcase: hints outside a field ("4 odcinki", "Dodaj odcinek na końcu:", carrier hint) are 12 px grey as .help in the mock */
.tz .fhelp { font-size: 12px; color: var(--muted); }
/* container: the voyage follows the vessel after a plain space, as in the mock */
.kt .klt .voy { margin-left: 0; }
/* customers: the role filter wraps on a phone and pads its buttons 10 px, as in the mock */
.kl .seg { flex-wrap: wrap; max-width: 100%; }
.kl .seg button { padding: 0 10px; }
/* customer card: its breadcrumb is spaced 12 px like the mock's top bar */
.main:has(> .kc) .crumbs { gap: 12px; }
/* briefcase documents: files dragged over the list drop into the briefcase too, under the mock's overlay */
.tz .dpanel { position: relative; }
.tz .pdrop { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.dragfiles .tz .pdrop { pointer-events: auto; }
.tz .pdover { position: absolute; inset: 0; z-index: 2; border-radius: 10px; border: 2px dashed var(--accent); background: rgba(238,242,255,.92); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 0 16px; color: #4B5563; text-align: center; pointer-events: none; }
.tz .pdover svg { color: var(--accent-h); }
.tz .pdover .pdt { font-size: 16px; font-weight: 600; color: var(--accent-h); }

/* ===== Dropdown list floats over scroll containers (begin) ===== */
/* syntia.ddPlace pins the list to the viewport under its button; hidden until placed. */
.dd-pop, .dd-pop.right { position: fixed; top: 0; left: 0; right: auto; min-width: 0; visibility: hidden; }
/* ===== Dropdown list floats over scroll containers (end) ===== */
/* ===== briefcase route strip: begin ===== */
/* legs that do not fit at --rmin each (six or more in the sheet) scroll sideways; app.js sets --per and .ovf */
.tz .rsw { position: relative; }
.tz .rsw.ovf { padding: 0 40px; }
.tz .rstrip { --rmin: 200px; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.tz .rstrip::-webkit-scrollbar { display: none; }
.tz .rcell { flex: 1 0 var(--rmin); scroll-snap-align: start; }
.tz .rsw.ovf .rcell { flex: 0 0 calc(100% / var(--per, 5)); }
.tz .rarrow { position: absolute; top: 50%; z-index: 1; margin-top: -14px; border-color: var(--line2); background: #fff; color: #344054; box-shadow: 0 1px 2px rgba(16,24,40,.06); }
.tz .rarrow.rprev { left: 6px; }
.tz .rarrow.rnext { right: 6px; }
.tz .rarrow[hidden] { display: none; }
.tz .rarrow[aria-disabled="true"] { opacity: .4; cursor: default; box-shadow: none; }
.tz .rarrow[aria-disabled="true"]:hover { background: #fff; }
.tz .rarrow[aria-disabled="true"]:active { transform: none; }
@media (max-width: 720px) {
  .tz .rstrip { flex-wrap: wrap; overflow-x: visible; scroll-snap-type: none; }
  .tz .rcell { flex: 1 1 100%; }
}
.tz .rstrip { padding: 0; row-gap: 0; }
.tz .rcell { padding: 14px 16px 12px; background: #fff; }
.tz .rarrow { background: #fff; }
@media (max-width: 720px) {
  .tz .rcell, .tz .rcell:first-child { padding: 10px 16px; }
  .tz .rline { display: none; }
}
/* ===== briefcase route strip: end ===== */
/* ==== fix-modal: briefcase sheet over the list, waybill print ==== */
/* list: the toast's "Otwórz teczkę" is a button now (it opens the sheet in place), styled like the link it replaces */
.toast button.tlink { border: 0; background: transparent; padding: 0; }
/* waybill: the iModal A4 form with boxes 1-17 (WaybillForm), shown by the print route and printed by the waybill page */
.wbf { width: 210mm; height: 297mm; box-sizing: border-box; margin: 0 auto; padding: 8mm 15mm 0 12mm; display: flex; flex-direction: column; background: #fff; color: #000; font-family: Calibri, Carlito, Arial, sans-serif; font-size: 9.5pt; line-height: 1.3; }
.wbf-b { font-weight: 700; }
.wbf-u { text-decoration: underline; }
.wbf-c { text-align: center; font-weight: 700; }
.wbf-sm { font-size: 8.5pt; }
.wbf-xs { font-size: 7.5pt; }
.wbf-top { display: flex; justify-content: space-between; gap: 8mm; padding-right: 10mm; }
.wbf-pin { display: grid; grid-template-columns: 1fr 1fr; margin: 2mm 0 1mm; }
.wbf-grid { flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid #000; border-left: 1px solid #000; }
.wbf-box { border-right: 1px solid #000; border-bottom: 1px solid #000; padding: 1mm 1.5mm; min-width: 0; overflow-wrap: anywhere; }
.wbf-full { grid-column: 1 / -1; }
.wbf-head { min-height: 23mm; display: flex; align-items: center; gap: 4mm; }
.wbf-logo { flex: 0 0 auto; max-width: 38mm; padding: 2mm 3mm; border: 1.5px solid #1F3A8A; border-radius: 2mm; color: #1F3A8A; font-weight: 700; font-size: 12pt; line-height: 1.1; text-align: center; }
.wbf-addr { flex: 1 1 auto; min-width: 0; text-align: center; font-size: 9pt; }
.wbf-dir { grid-row: span 2; display: flex; flex-direction: column; align-items: center; }
.wbf-dirn { font-size: 14pt; font-weight: 700; margin-top: 1mm; }
.wbf-carrier { margin: auto 0 0; }
.wbf-stamp { margin: 8mm 0 0 auto; padding-right: 8mm; }
.wbf-h1 { min-height: 26mm; }
.wbf-route { margin-top: 2mm; }
.wbf-h2 { min-height: 24mm; }
.wbf-h2 .wbf-c { margin-top: 1.5mm; }
.wbf-kv { display: grid; grid-template-columns: auto 1fr; column-gap: 6mm; row-gap: 1.5mm; align-items: baseline; }
.wbf-when { width: max-content; margin: 5mm auto 0; column-gap: 18mm; }
.wbf-h4 { min-height: 15mm; }
.wbf-two { display: grid; grid-template-columns: 1fr 1fr; row-gap: 2mm; }
.wbf-two > :nth-child(even) { text-align: center; }
.wbf-ship { grid-template-columns: max-content 1fr; column-gap: 10mm; }
.wbf-h9 { min-height: 22mm; }
.wbf-h9 .wbf-xs:first-of-type { margin-top: 1.5mm; }
.wbf-seal { margin-top: 3mm; }
.wbf-modes { margin: 3mm 0 0 3mm; grid-template-columns: max-content 1fr; column-gap: 10mm; }
.wbf-h11 { min-height: 15mm; }
.wbf-h13 { min-height: 32mm; }
.wbf-plates { display: grid; grid-template-columns: 1fr 1fr; margin: 3mm 0 0 12mm; font-size: 10pt; }
.wbf-driver { margin-top: 3mm; grid-template-columns: max-content 1fr; column-gap: 8mm; }
.wbf-remarks { margin-top: 1mm; min-height: 4mm; }
.wbf-temp { margin-top: 3mm; }
.wbf-avis { margin-top: 3mm; }
.wbf-h15 { min-height: 40mm; }
.wbf-depot { margin-top: 2mm; min-height: 4mm; }
.wbf-line { margin-top: 2mm; }
.wbf-dates { margin-top: 2mm; grid-template-columns: max-content 1fr; column-gap: 8mm; row-gap: 1mm; }
.wbf-genset { margin-top: 2mm; }
.wbf-confirm { display: flex; flex-direction: column; justify-content: space-between; gap: 2mm; }
.wbf-dt { display: grid; grid-template-columns: 1fr 1fr; }
.wbf-fine { font-size: 6.5pt; line-height: 1.25; }
.wbf-h17 { min-height: 17mm; display: flex; flex-direction: column; justify-content: space-between; }
.wbf-foot { margin-top: 1mm; font-size: 8.5pt; }
/* the iModal form ends ~30 mm above the page edge; that space gives way when longer values lengthen the rows, so the form stays one A4 page */
.wbf::after { content: ""; flex: 1 1 26mm; }
/* a value the forwarder owes but the app has no data for, so nobody prints the form thinking it is complete */
.wbf-ph { color: #D92D20; font-weight: 700; font-size: 7.5pt; line-height: 1.2; }
.wbf-logo.wbf-ph { border: 1.5px dashed #D92D20; color: #D92D20; font-size: 9pt; }
.wbf-logo.wbf-img { padding: 0; border: 0; }
.wbf-logo img { display: block; max-height: 40px; max-width: 38mm; }
/* waybill: the page keeps its preview on screen and prints the iModal form */
.wbf-print { display: none; }
/* print route: A4 sheets on a grey desk, one per container */
.wbf-desk { padding: 24px 0; background: var(--bg); }
.wbf-desk .wbf { box-shadow: 0 1px 3px rgba(17,24,39,.12), 0 8px 24px rgba(17,24,39,.08); }
.wbf-desk .wbf + .wbf { margin-top: 24px; }
@page wbf { size: A4; margin: 0; }
@media print {
  body:has(.wbf) { page: wbf; background: #fff; }
  .lp:has(.wbf-print) .lp-stage { display: none; }
  .wbf-print { display: block; }
  .wbf-desk { padding: 0; background: none; }
  .wbf-desk .wbf { box-shadow: none; }
  .wbf-desk .wbf + .wbf { margin-top: 0; break-before: page; }
}
/* sheet menu: "Drukuj list przewozowy" without a container or a truck stays in place but inactive */
.menu button.mi:disabled { opacity: .45; cursor: not-allowed; }
.menu button.mi:disabled:hover { background: transparent; }
/* the print route loads in a hidden frame (app.js printPage) */
.printframe { position: fixed; right: 0; bottom: 0; width: 0; height: 0; border: 0; visibility: hidden; }
/* settings: one column of numbered sections, switches for the view, logo preview */
.st .kv { display: flex; flex-direction: column; gap: 6px; }
.st .lab { font-size: 12px; text-transform: none; letter-spacing: 0; }
.st .lab .tipw { margin-left: 4px; vertical-align: -2px; }
.st .help { font-size: 12px; color: var(--muted); }
.st .logorow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.st .logoprev { max-height: 64px; max-width: 240px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.st .swgroup { display: flex; flex-direction: column; gap: 6px; }
.st .swgroup .lab { margin-bottom: 2px; }
.st .sw { display: flex; align-items: center; gap: 10px; min-height: 28px; cursor: pointer; }
.st .sw input { position: absolute; width: 1px; height: 1px; margin: -1px; opacity: 0; }
.st .swtrack { position: relative; flex: 0 0 auto; width: 34px; height: 20px; border-radius: 999px; background: #CBD2DC; transition: background-color 160ms ease-out; }
.st .swtrack::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .2); transition: transform 160ms ease-out; }
.st .sw input:checked + .swtrack { background: var(--accent); }
.st .sw input:checked + .swtrack::after { transform: translateX(14px); }
.st .sw input:focus-visible + .swtrack { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .st .swtrack, .st .swtrack::after { transition: none; } }
/* Samouczek: one row per chapter, a green check when done, Uruchom or the grey reason on the right */
.st .oblist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.st .obrow { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 0; border-top: 1px solid var(--soft); }
.st .obrow .obname { flex: 1 1 auto; min-width: 0; }
.st .obmark:empty { display: none; }
.st .obrow:first-child { border-top: 0; }
.st .obmark { display: inline-flex; justify-content: center; color: var(--green); }
.st .obname { display: flex; align-items: baseline; gap: 8px; font-weight: 500; }
/* ==== end fix-modal ==== */
/* ==== container in the briefcase sheet: begin ==== */
/* one container in the sheet: actions, status, then form and aside as on the Kontener artboard */
.kt-in { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.kt-in .kt-acts { margin-top: 0; }
.kt-in .kt-dupbar { padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; }
.kt-in .saved, .kt-in .note { margin: 0; }
.kt-in .saved .ic { flex: 0 0 auto; }
.kt-in .kt-cols { margin-top: 4px; }
.kt-in .sec h3, .kt-in .kt-aside h3 { margin: 0; font-size: 14px; font-weight: 600; }
.kt-in .linkbtn.small { font-weight: 500; }
.kt-in > .panel .empty { border-top: 0; }
/* the container number in the Kontenery table opens the container in place, so it is a button set like the link it was */
.tz .nrc .linkbtn.mono { font-family: var(--mono); font-size: 12px; }
/* "Zmień trasę w teczce" lands on the Teczka tab's route section below the sheet's sticky header */
.tz h2[id], .tz .sect[id] { scroll-margin-top: 84px; }
/* ==== container in the briefcase sheet: end ==== */
/* ==== leg driver picker: begin ==== */
/* a leg's driver: the searchable list, then the truck and trailer plates kept for this container; phone and document below */
.kt .kdrvrow { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr); gap: 12px 16px; align-items: start; }
.kt .kdrvrow .in.mono { font-size: 13px; text-transform: uppercase; }
.kt .kdrv > .help .linkbtn { font-size: 12px; }
.kt .kdrvinfo { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; padding-top: 2px; font-size: 12px; color: var(--muted); }
.kt .kdrvinfo .cpb { height: 28px; font-size: 12px; font-weight: 600; }
.kt .kdrvrow .in:disabled { background: var(--soft); }
.kt .kdi { display: inline-flex; align-items: center; gap: 10px; }
.kt .kdi .fl { font-size: 12px; color: var(--muted); }
@media (max-width: 640px) {
  .kt .kdrvrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .kt .kdrvdd { grid-column: 1 / -1; }
}
/* ==== leg driver picker: end ==== */
/* ==== container accordion: begin ==== */
/* the Kontenery table as an accordion: the open row and its container read as one band with an accent edge; the bar with
   previous/next sticks under the sheet's header (--tz-head, app.js headVar) */
.tz .kacc { overflow: clip; }
.tz .kacc > .ptool { position: sticky; top: var(--tz-head, 60px); z-index: 12; background: #fff; }
.tz .kacc-nav { margin-left: auto; }
.tz .kacc-nav .help { min-width: 7ch; text-align: center; }
.tz .kacc .tscroll { container-type: inline-size; }
.tz .krow { cursor: pointer; scroll-margin-top: calc(var(--tz-head, 60px) + 64px); }
.tz .krow.open > td { background: var(--accent-bg); }
.tz .krow.open > td:first-child, .tz .kxrow > td { box-shadow: inset 3px 0 0 var(--accent); }
.tz .kxrow > td { padding: 0; background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); cursor: auto; }
.tz .kxrow + .krow > td { border-top: 0; }
.tz .kx-in { position: sticky; left: 0; width: 100cqw; padding: 20px 24px 28px 27px; }
.tz .kedit { margin-left: 2px; }
.tz .kedit.on { background: var(--accent-bg); color: var(--accent-h); }
@media (max-width: 640px) {
  .tz .kx-in { padding: 16px 12px 20px 15px; }
  .tz .krow { scroll-margin-top: calc(var(--tz-head, 60px) + 104px); }
}
/* ==== container accordion: end ==== */
/* ==== Dokumenty rows with type and container pickers: begin ==== */
/* one column per field: file, type, version, container, action; no status, date, sender or format badge */
.tz .drow.dlrow { grid-template-columns: minmax(0, 1.6fr) minmax(150px, 1fr) 124px minmax(150px, 1fr) 76px; min-height: 52px; }
.tz .drow.dlrow.dhead { min-height: 0; }
.tz .dlrow .dfile { font-size: 13px; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tz .dlrow .dd { min-width: 0; }
.tz .dlrow .dd-btn { height: 30px; font-size: 13px; }
.tz .dlrow .dd-btn.hint .dd-val { color: var(--miss); font-weight: 500; }
.tz .dmiss { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.tz .ptool .dsaved { margin: 0 0 0 auto; }
/* the toolbar with "Zapisano" sticks under the sheet header, below the drop overlay */
.tz .dpanel > .ptool { position: sticky; top: var(--tz-head, 60px); z-index: 1; background: #fff; border-radius: 10px 10px 0 0; box-shadow: 0 1px 0 var(--line); }
/* ==== Dokumenty rows with type and container pickers: end ==== */
/* ==== copy confirmation: begin ==== */
/* "Skopiowano" floats above the copy button's right edge, out of flow, and fades out; a hidden live region reads it out */
.cpb { position: relative; }
.cp > .cp-ok, .cpb > .cp-ok { position: absolute; top: 0; right: 0; left: auto; transform: translateY(calc(-100% - 6px)); z-index: 40; padding: 2px 8px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 4px 12px rgba(17,24,39,.08); font-family: Geist, "Segoe UI", system-ui, sans-serif; font-size: 11px; line-height: 16px; font-weight: 500; color: var(--green); white-space: nowrap; pointer-events: none; animation: cp-ok 1.4s ease forwards; }
/* beside the sheet's title (above it would leave the sheet) and beside the briefcase number in list rows */
.tz .stitle h1 .cp > .cp-ok { top: 50%; right: auto; left: 100%; margin-left: 8px; transform: translateY(-50%); }
.lst .nrcell .cp-ok, .kl .cp.full .cp-ok { right: auto; }
/* customer card sliding in from the right over the briefcase, no scrim */
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 360px; background: #fff; border-left: 1px solid var(--line); box-shadow: -12px 0 40px rgba(17, 24, 39, .14); z-index: 40; display: flex; flex-direction: column; animation: drawer-in 180ms ease-out; }
@keyframes drawer-in { from { opacity: 0; transform: translateX(12px); } }
@media (prefers-reduced-motion: reduce) { .drawer { animation: none; } }
.drawer .dhd { display: flex; align-items: flex-start; gap: 10px; padding: 16px 12px 10px 20px; }
.drawer .dhd h2 { font-size: 15px; line-height: 1.35; }
.drawer .dbody { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 4px 20px 20px; display: flex; flex-direction: column; gap: 14px; }
.drawer .kv { gap: 4px; }
.drawer .kv .k { font-size: 12px; text-transform: none; letter-spacing: 0; }
.drawer ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.drawer .tzl { color: var(--accent); font-weight: 500; }
.drawer .tzl:hover { color: var(--accent-h); text-decoration: underline; }
.drawer .dft { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--line); }
@keyframes cp-ok { 0% { opacity: 0; } 12%, 86% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cp > .cp-ok, .cpb > .cp-ok { animation: none; } }
/* ==== copy confirmation: end ==== */
/* ==== row number hint: begin ==== */
/* a wrong number typed in a Kontenery row: one red line under the field */
.tz .nrhint { display: block; margin-top: 4px; font-size: 12px; color: var(--miss); white-space: normal; }
/* ==== row number hint: end ==== */
/* ==== draft row: begin ==== */
/* "Odrzuć szkic" after the summary of a collapsed new container */
.tz .kdrop { margin-left: 8px; }
/* ==== draft row: end ==== */
/* ==== container fold: begin ==== */
/* an opened container unfolds (grid rows 0fr to 1fr) and fades in once loaded, while the one it replaces folds in the same
   220 ms; content is clipped only while it moves, so tooltips inside it are whole afterwards */
.tz .kx-fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 220ms cubic-bezier(0.2, 0, 0, 1); }
.tz .kx-fold.on { grid-template-rows: 1fr; }
.tz .kx-clip { min-height: 0; overflow: clip; opacity: 0; transition: opacity 160ms ease; }
.tz .kx-fold.on > .kx-clip { opacity: 1; }
.tz .kx-fold.on.done > .kx-clip { overflow: visible; }
@media (prefers-reduced-motion: reduce) {
  .tz .kx-fold, .tz .kx-clip { transition: none; }
}
/* ==== container fold: end ==== */
/* ==== "?" button of the guide (onboard.js): begin ==== */
.tourbtn { position: fixed; right: 12px; bottom: 12px; z-index: 55; width: 32px; height: 32px; padding: 0; border-radius: 999px; border: 1px solid var(--line2); background: #fff; color: var(--muted); font-size: 14px; font-weight: 600; line-height: 1; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(16,24,40,.08); transition: transform 160ms ease-out; }
.tourbtn:hover { color: var(--accent-h); border-color: var(--accent); }
.tourbtn:active { transform: scale(.94); }
.app:has(.drawer) + .tourbtn { right: 372px; }
@media print { .tourbtn { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .tourbtn { transition: none; }
  .tourbtn:active { transform: none; }
}
/* ==== "?" button of the guide (onboard.js): end ==== */
/* ==== Kontenery v2: begin ==== */
/* list toolbar: title, "Dodaj kontener", the search box and the Wszystkie / Z brakami / Gotowe switch */
.tz .ktool { gap: 12px; }
.tz .ktool h2 { font-size: 16px; }
.tz .ktool > .sub.num { font-size: 14px; }
.tz .ktadd { height: 34px; padding: 0 12px; font-size: 13px; font-weight: 600; }
.tz .ksearch { position: relative; display: inline-flex; align-items: center; width: 280px; max-width: 100%; margin-left: 8px; }
.tz .ksearch > svg { position: absolute; left: 12px; color: var(--muted); pointer-events: none; }
.tz .ksearch .in { height: 34px; padding-left: 34px; font-size: 13px; }
.tz .kfilter button { height: 24px; padding: 0 10px; font-size: 12px; font-weight: 600; }
/* rows: 10 px uppercase heading, 13 px cells, the open row on the accent tint with a 3 px edge the detail continues */
.tz .ktbl { table-layout: fixed; min-width: 980px; }
.tz .ktbl th { padding: 8px 12px; font-size: 10px; font-weight: 600; letter-spacing: .06em; background: #FAFBFD; border-bottom: 1px solid var(--line); }
.tz .ktbl td { padding: 12px; font-size: 13px; border-top: 1px solid #ECEBEF; }
.tz .ktbl th:first-child, .tz .ktbl td:first-child { padding-left: 16px; }
.tz .ktbl th:last-child, .tz .ktbl td:last-child { padding-right: 16px; }
.tz .ktbl tbody tr:first-child td { border-top: 0; }
.tz .ktbl .knr { font-size: 13px; font-weight: 600; }
.tz .nrc .linkbtn.knr { font-size: 13px; font-weight: 600; }
.tz .krow.open .knr { color: var(--accent); }
.tz .kdash { color: var(--muted); }
.tz .kdrvc { white-space: nowrap; }
.tz .kdrvc .kdrvt { display: inline-block; max-width: calc(100% - 104px); overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.tz .kdrvc .kdash { vertical-align: middle; }
.tz .kdrvc .bdg { vertical-align: middle; margin-left: 8px; }
.tz .kok { display: inline-flex; align-items: center; gap: 5px; color: #14532D; font-weight: 500; }
.tz .kacts .btn.ghost { color: var(--muted); }
.tz .kacts .btn.ghost:hover { color: var(--fg); }
.tz .kedit .kchev { transition: transform 160ms ease-out; }
.tz .kedit.on .kchev { transform: rotate(180deg); }
.tz .kx-eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.tz .facts .kgaps { font-weight: 400; color: var(--muted); }
/* open container: number, type, actions and the 1 z 4 arrows in one row, sections numbered as on the Teczka tab */
.kt-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 0 4px; }
.kt-head .kt-no { font-size: 20px; font-weight: 600; white-space: nowrap; }
.kt-head .kt-sub { font-size: 14px; color: var(--muted); white-space: nowrap; }
.kt-head .btn { height: 32px; font-size: 13px; font-weight: 600; }
.kt-head .kt-hnav { margin-left: auto; }
.kt-head .kt-hnav .btn { height: 28px; }
.kt-in .savedrow { margin-bottom: 8px; padding: 0 4px; }
.kt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 1fr)); gap: 20px; align-items: start; }
.kt .tsechd { display: flex; align-items: center; gap: 12px; }
.kt .secbtn { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: transparent; color: var(--fg); text-align: left; font: inherit; }
.kt .secchevb { flex: 0 0 auto; display: flex; padding: 0; border: 0; background: transparent; color: #4A5665; }
.tz .secchevb[aria-expanded="false"] .secchev { transform: none; }
.kt .tsechd .linkbtn.small { font-size: 13px; white-space: nowrap; }
.kt .tsechd .linkbtn:disabled { color: var(--muted); cursor: not-allowed; }
.kt .secmeta { font-size: 13px; }
.kt .secmeta .kmeta { color: var(--fg); }
.kt .kempty { color: #9CA3AF; }
/* the container's legs on a timeline: a read-only chain of places and dates, the edit chain behind a link, then the driver row */
.kt .tl .legi:last-child { padding-bottom: 0; }
.kt .tlrail.last .tlline { display: none; }
.kt .klmode { font-size: 15px; font-weight: 600; white-space: nowrap; }
.kt .klmode.road { color: var(--road-fg); }
.kt .klmode.sea { color: var(--accent); }
.kt .klcar { flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kt .kseahd { display: flex; align-items: center; gap: 12px; min-height: 32px; min-width: 0; }
.kt .klsum { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; overflow: hidden; }
.kt .kltxt { font-size: 14px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.kt .klshared { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.kt .kprev { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: 10px; background: #FAFBFD; overflow: hidden; }
.kt .kcell { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; padding: 10px 14px; }
.kt .kcell + .kcell { border-left: 1px solid var(--line); }
.kt .kcell.over { background: #FFFBEB; }
.kt .kcl { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); line-height: 14px; }
.kt .kcp { margin-top: 2px; font-size: 13px; font-weight: 500; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kt .kcd { font-size: 12px; color: var(--muted); line-height: 16px; font-variant-numeric: tabular-nums; }
.kt .kcell.over .kcd { color: var(--amber); }
.kt .kcb { color: var(--muted); font-weight: 400; }
.kt .kdrvdd .flrow .small { font-size: 12px; }
/* aside: dashed read-only cards */
.kt-eyebrow { display: flex; align-items: center; gap: 6px; padding: 0 4px; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.kt-aside { gap: 12px; }
.kt .kt-ro { background: #FAFBFD; border: 1px dashed var(--line2); border-radius: 12px; padding: 16px 18px; }
.kt .kt-ro .ahd { align-items: center; padding: 0 0 6px; }
.kt .kt-ro .ahd h3 { font-size: 15px; font-weight: 600; }
.kt .kt-ro .ahd .linkbtn.small { font-size: 13px; }
.kt .kt-ro .kvr { grid-template-columns: 100px minmax(0, 1fr); gap: 0 12px; padding: 8px 0; border-top: 1px solid #ECEBEF; }
.kt .kt-ro .kvr:first-child { border-top: 1px solid #ECEBEF; }
.kt .kt-ro .kvr > span:last-child { font-weight: 400; }
.kt .kt-ro .kdrow { padding: 10px 0; border-top: 1px solid #ECEBEF; }
.kt .kt-ro .kdrow:hover { background: transparent; }
.kt .kt-ro .kdrow .dt .b { font-weight: 500; }
.kt .kdbtn { height: 26px; padding: 0 10px; font-size: 12px; font-weight: 600; }
.kt .kext { font-family: var(--mono); background: var(--soft); color: #475467; border-color: var(--line); }
.kt .kext.pdf { background: var(--red-bg); color: var(--red); border-color: var(--red-line); }
.kt .kext.xml { background: var(--green-bg); color: var(--green); }
.kt .kext.msg, .kt .kext.new { background: #EEF3FB; color: #2E5AA3; }
.kt .kt-ro .dnone { padding: 8px 0 0; border-top: 1px solid #ECEBEF; }
@media (max-width: 640px) {
  .kt .tsechd { flex-wrap: wrap; }
  .kt .secbtn { flex: 1 1 calc(100% - 30px); }
  .kt .secchevb { order: 1; }
  .kt .tsechd .linkbtn.small { order: 2; flex: 1 1 100%; text-align: left; }
  .kt .sect { white-space: normal; }
  .kt .kprev { flex-direction: column; }
  .kt .kcell + .kcell { border-left: 0; border-top: 1px solid var(--line); }
  .kt .kinh { margin-top: 0; }
}
/* ==== Kontenery v2: end ==== */
/* ==== Lane 3B: undo notice (UndoToast) ==== */
.toast.uto { align-items: flex-start; gap: 12px; padding: 12px 10px 12px 14px; max-width: 640px; animation: utoIn 200ms ease-out; }
@keyframes utoIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.toast.uto .uto-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 13px; }
.toast.uto .uto-l { display: flex; align-items: center; gap: 8px; min-height: 20px; }
.toast.uto .uto-l b { font-weight: 500; }
.toast.uto .uto-ok { color: #86EFAC; display: inline-flex; }
.toast.uto .uto-skip { color: #A3ACBA; display: inline-flex; width: 14px; justify-content: center; }
.toast.uto .mono { color: #fff; }
.toast.uto .uto-acts { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.toast.uto button { border: 0; background: transparent; color: #93B4F5; padding: 0 6px; height: 24px; border-radius: 6px; font: inherit; font-weight: 500; white-space: nowrap; }
.toast.uto button:hover { color: #BFD3FB; background: rgba(255, 255, 255, .08); }
.toast.uto .uto-x { color: #98A2B3; width: 24px; padding: 0; display: inline-grid; place-items: center; }
.toast.uto .uto-x:hover { color: #fff; }
@media (prefers-reduced-motion: reduce) { .toast.uto { animation: none; } }
/* ==== Lane 3B: undo notice end ==== */
/* ==== Lane 3B: "Uzupełnij z…" dialog and the flash of a copied field ==== */
/* the editor sits in a sticky cell (its own stacking context), so while the dialog is open the cell goes above the sheet's sticky bars */
.tz .kx-in:has(> .kt > .ffdim) { z-index: 64; }
.ffdim { position: fixed; inset: 0; z-index: 62; background: rgba(17, 24, 39, .22); }
.ffd { position: fixed; left: 50%; top: 56px; transform: translateX(-50%); z-index: 63; width: 760px; max-width: calc(100vw - 32px); max-height: calc(100vh - 80px); overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 24px 60px rgba(17, 24, 39, .28), 0 2px 8px rgba(17, 24, 39, .08); display: flex; flex-direction: column; }
.ffd.in-anim { animation: ffIn 180ms ease-out; }
@keyframes ffIn { from { opacity: 0; transform: translateX(-50%) scale(.97); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
.ffhd { display: flex; align-items: center; gap: 10px; padding: 16px 20px 12px; }
.ffhd h2 { margin: 0; font-size: 16px; font-weight: 600; }
.ffhd h2 .mono { font-size: 15px; font-weight: 600; }
.ffsec { padding: 0 20px 14px; display: flex; flex-direction: column; gap: 8px; }
.fflab { font-size: 12px; color: var(--muted); font-weight: 500; }
.ffqrow { display: flex; gap: 8px; align-items: center; }
.ffq { position: relative; display: block; }
.ffq .ic { position: absolute; left: 11px; top: 12px; color: var(--muted); pointer-events: none; }
.ffq .in { height: 40px; padding-left: 34px; }
.ffsrc { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 6px 0 12px; border: 1px solid var(--line2); border-radius: 9px; }
.ffsrc .ic { color: var(--muted); flex: 0 0 auto; }
.ffno { font-weight: 600; font-size: 13px; }
.ffd .linkbtn.acc { color: var(--accent); height: 30px; padding: 0 8px; border-radius: 6px; }
.ffd .linkbtn.acc:hover { background: var(--accent-bg); color: var(--accent-h); }
.ffres { border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.ffres button { width: 100%; display: grid; grid-template-columns: 16px 112px minmax(0, 1fr) 150px; gap: 10px; align-items: center; text-align: left; border: 0; border-top: 1px solid #EEF0F4; background: #fff; padding: 0 12px; height: 40px; color: var(--fg); font: inherit; }
.ffres button:first-child { border-top: 0; }
.ffres button:hover, .ffres button.ffact { background: var(--accent-bg); }
.ffres button .ic { color: var(--muted); }
.ffnone { padding: 10px 12px; color: var(--muted); }
.ffchips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ffchip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--line2); border-radius: 8px; background: #fff; white-space: nowrap; color: var(--fg); font: inherit; font-size: 13px; cursor: pointer; user-select: none; transition: background-color 120ms ease, border-color 120ms ease; }
.ffchip:hover { background: var(--soft); }
.ffchip.ffon, .ffchip.ffon:hover { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
/* a target is a checkbox: its tick shows the state, so no outline around it */
label.ffchip, label.ffchip.ffon, label.ffchip.ffon:hover { border-color: transparent; background: transparent; box-shadow: none; padding: 0 10px 0 4px; }
.ffchip .mono { font-weight: 500; font-size: 12px; }
.ffchip .ffnote { color: var(--muted); font-size: 12px; }
.ffchip .ffnote.warn { color: var(--amber); }
.ffchip.fflock { cursor: default; }
.ffchip.ffdis { opacity: .55; cursor: default; }
.ffd .ffcb { appearance: none; -webkit-appearance: none; margin: 0; width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid #98A2B3; background: #fff center / 11px 11px no-repeat; display: inline-block; flex: 0 0 auto; cursor: pointer; transition: background-color 120ms ease, border-color 120ms ease; }
.ffd .ffcb:checked { background-color: var(--accent); border-color: var(--accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"); }
.ffd .ffcb:disabled { border-color: var(--line2); background-color: var(--soft); cursor: default; }
.ffd .ffcb:checked:disabled { background-color: #93B4F5; border-color: #93B4F5; }
.ffd .ffcb.sm { width: 14px; height: 14px; background-size: 10px 10px; }
.ffd .ffcb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ffrow { display: grid; grid-template-columns: 22px 128px minmax(0, 1fr) 16px minmax(0, 1.3fr); gap: 0 10px; align-items: center; padding: 10px 20px; min-height: 48px; border-bottom: 1px solid #EEF0F4; cursor: pointer; font-size: 13px; transition: background-color 120ms ease; }
.ffrow:hover { background: #FAFBFD; }
.ffrow.ffth { padding: 8px 20px; min-height: 0; background: #FAFBFD; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); cursor: default; }
.ffrow.ffth:hover { background: #FAFBFD; }
.ffrow .ffnm { font-weight: 600; }
.ffrow .ffold { color: var(--muted); }
.ffrow .ffarr { color: #98A2B3; display: inline-flex; }
.ffrow .ffnew { font-weight: 500; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ffrow .ffwhy { font-size: 12px; font-weight: 400; color: var(--muted); }
.ffsub { font-size: 12px; color: var(--muted); }
.ffrow.ffoff .ffnew { color: #98A2B3; }
.ffrow.ffoff .ffnew .bdg { opacity: .55; }
.ffrow.ffdis { cursor: default; }
.ffrow.ffdis:hover { background: transparent; }
.ffrow.ffdis .ffnm, .ffrow.ffdis .ffold, .ffrow.ffdis .ffnew { color: #98A2B3; font-weight: 500; }
.ffrow.ffdis .ffnm { font-weight: 600; }
.fflock { padding: 10px 20px; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.ffempty { margin: 0 20px 16px; padding: 22px 16px; border: 1px dashed var(--line2); border-radius: 10px; color: var(--muted); text-align: center; font-size: 13px; }
.fftgt { padding: 14px 20px; border-top: 1px solid var(--line); background: #FAFBFD; display: flex; flex-direction: column; gap: 10px; }
.ffft { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--line); position: sticky; bottom: 0; background: #fff; font-size: 13px; }
.ffcnt { color: #344054; font-weight: 500; }
.ffcnt.muted { color: var(--muted); font-weight: 400; }
.ffft .ferr { font-size: 12px; color: var(--miss); }
/* a field that just took a copied value */
.flash { animation: ffFlash 900ms ease-out; }
@keyframes ffFlash { from { background-color: #DCFCE7; box-shadow: 0 0 0 3px #DCFCE7; } }
@media (prefers-reduced-motion: reduce) { .ffd.in-anim, .flash { animation: none; } }
/* ==== Lane 3B: dialog end ==== */
/* ==== Lane 3C: copy arrows in the split gutter (CopyGutter) ==== */
.gutter { overflow: hidden; }
.cg-grp { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); display: flex; flex-direction: column; gap: 4px; visibility: hidden; }
.cg-arr { width: 34px; height: 28px; display: grid; place-items: center; padding: 0; border-radius: 6px; border: 1px solid #C7D2FE; background: var(--accent-bg); color: var(--accent); transition: transform 160ms ease-out, background-color 150ms ease, color 150ms ease; }
.cg-arr:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.cg-arr:active { transform: scale(.94); }
.cg-arr.no { border-color: var(--line2); background: #fff; color: #98A2B3; cursor: not-allowed; }
.cg-arr.no:hover { background: #fff; color: var(--muted); border-color: var(--line2); }
@media (prefers-reduced-motion: reduce) { .cg-arr { transition: none; } }
/* Fields that differ between the split halves (data-copy + .diff, set only in the split). */
.in.diff, .field.diff .in, .step.diff .in, .field.diff .dd-btn, .step.diff .dd-btn, .kcell.diff { background: var(--diff); border-color: #EBCB7A; }
.tl.diff { background: var(--diff); border-radius: 9px; box-shadow: 0 0 0 6px var(--diff); }
/* Overwrite question of a split arrow, in the target section (CopyQuestion). */
.cq { margin: 0 0 12px; border: 1px solid var(--amber-line); background: #FFFBEB; border-radius: 9px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.cqrows { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 4px 10px; align-items: baseline; }
.cq .cql { color: var(--amber); }
.cq .cqnote { grid-column: 1 / -1; color: var(--amber); }
.cqbtns { display: flex; gap: 8px; margin-top: 4px; }
/* ==== Lane 3C: copy arrows end ==== */
/* ==== Lane F1: Teczka and Trasa cards (BriefcasePanel) ==== */
.tz .tsechd .sect { margin: 0; }
.tz .tsheet { display: flex; flex-direction: column; gap: 24px; }
.tz .tsgrp + .tsgrp { border-top: 1px solid var(--soft); padding-top: 20px; }
.tz .tsub { margin: 0 0 14px; font-size: 14px; font-weight: 600; line-height: 20px; color: var(--fg); }
.tz .tsfs { border: 0; padding: 0; margin: 0; min-width: 0; min-inline-size: 0; }
.tz .tsfs.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
@media (max-width: 640px) { .tz .tsfs.pair { grid-template-columns: minmax(0, 1fr); } }
/* A leg in the hero strip opens the Trasa card; the button keeps the cell's own layout. */
.tz .rgo { display: flex; flex-direction: column; gap: 4px; width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; }
.tz .rgo:hover .rt { color: var(--accent); }
.tz .rgo:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
/* The autosave line takes no room while it has nothing to say. */
.tz .tcontent > .savedrow:not(:has(.saved > *)) { display: none; }
/* ==== Lane F1: end ==== */