:root {
  color-scheme: light;
  --ink: #0c1936;
  --muted: #556781;
  --line: #dde6f0;
  --surface: #fff;
  --background: #fafbfd;
  --blue: #094dce;
  --blue-dark: #0642b5;
  --nav: #fff;
  --nav-ink: #3c536f;
  --radius: 9px;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  color: var(--ink);
  background: var(--background);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
button, input, select { font: inherit; }
button, select { cursor: pointer; }
button:disabled, select:disabled { cursor: default; }
a { color: inherit; text-decoration: none; }
h1, h2, p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #74a3ff; outline-offset: 3px; }

.layout { min-height: 100vh; display: grid; grid-template-columns: clamp(204px, 16.4vw, 260px) minmax(0, 1fr); }
.sidebar { background: var(--nav); color: var(--nav-ink); padding: 18px 12px 20px; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 10px; padding-inline: 9px; color: var(--ink); font-size: clamp(16px, 1.35vw, 21px); font-weight: 750; letter-spacing: -.55px; min-height: 37px; }
.brand-mark { flex: 0 0 36px; width: 36px; height: 36px; background: center / contain no-repeat url("/static/brand-mark.png"); }
.sidebar-organization { padding: 9px 10px 0; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
#navigation { display: grid; gap: 5px; margin-top: 24px; }
#navigation a { display: flex; align-items: center; gap: 11px; min-height: 42px; padding: 8px 11px; border-radius: 8px; font-weight: 550; }
#navigation a:hover { background: #f0f5ff; }
#navigation a.active { background: #e7efff; color: var(--blue-dark); box-shadow: inset 3px 0 var(--blue); }
.sidebar-profile { margin-top: auto; padding: 13px 11px 10px; font-size: 14px; }
.sidebar-profile:hover { color: var(--blue); }
.surface { min-width: 0; }
.topbar { min-height: 67px; padding: 10px 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; border-bottom: 1px solid var(--line); background: var(--surface); }
.workspace-search { position: relative; width: min(100%, 625px); display: flex; align-items: center; gap: 12px; padding: 0 14px; border-radius: 6px; background: #eef2f6; color: var(--muted); }
.workspace-search input { width: 100%; min-width: 0; padding: 9px 0; min-height: 37px; border: 0; background: transparent; color: var(--ink); font-size: 14px; }
.workspace-search input:focus { outline: none; }
.workspace-search:focus-within { outline: 2px solid #a2bdf3; }
.workspace-search input::placeholder { color: var(--muted); }
.search-results, .account-menu-panel { position: absolute; z-index: 3; top: calc(100% + 7px); padding: 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 8px 20px #142b4514; }
.search-results { left: 0; right: 0; max-height: 50vh; overflow: auto; }
.search-results a, .search-results > .muted { display: block; padding: 8px 10px; border-radius: 5px; overflow-wrap: anywhere; }
.search-results a:hover, .search-results a:focus-visible { background: #ecf3ff; }
.search-results .muted { font-size: 13px; }
.account-menu { position: relative; max-width: 42%; }
.account-menu summary { display: flex; align-items: center; gap: 11px; cursor: pointer; list-style: none; }
.account-menu summary::-webkit-details-marker { display: none; }
.account-avatar { display: grid; place-items: center; flex: 0 0 40px; height: 40px; border-radius: 50%; background: #eef2f7; color: #425875; }
.account-identity { font-size: 13px; overflow-wrap: anywhere; }
.account-identity .muted { font-size: 12px; }
.account-menu summary > .icon { transform: rotate(90deg); }
.account-menu-panel { right: 0; display: flex; gap: 5px; }
.account-gate { min-height: 100vh; display: grid; align-items: center; justify-items: center; padding: 24px; background: radial-gradient(ellipse at 50% 20%, #edf4ff, var(--background) 65%); }
.gate-card { width: min(100%, 420px); display: grid; gap: 18px; padding: clamp(20px, 5vw, 34px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 12px 35px #12244012; }
.gate-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 750; }
.gate-card h1 { font-size: clamp(24px, 4vw, 32px); }
.account-form { display: grid; gap: 13px; max-width: 460px; }
.account-form > .button { justify-self: start; }
.gate-card .account-form > .button { justify-self: stretch; }
.account-form > .muted { font-size: 13px; }
.template-form { max-width: 560px; }
.template-source, .template-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.template-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.template-source .button { white-space: normal; overflow-wrap: anywhere; }
.template-form input[type="file"] { max-width: 100%; color: var(--muted); }
.template-form > .muted:empty { display: none; }
.team-forms, .team-credentials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.main { display: grid; align-content: start; gap: 20px; padding: 30px 32px 48px; max-width: 1400px; margin: auto; outline: none; }
.main.workspace-home { max-width: none; padding: 37px 24px 24px; gap: 18px; }
.page-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 64px; }
h1 { font-size: clamp(27px, 3vw, 36px); line-height: 1.12; letter-spacing: -.95px; }
h2 { font-size: 18px; line-height: 1.25; letter-spacing: -.25px; }
.workspace-home h1, .wizard-sheet h1 { font-size: clamp(30px, 3vw, 41px); letter-spacing: -1.3px; }
.workspace-home .page-heading > .button, .hero-flow > .button { min-height: 47px; padding-inline: 20px; }
.workspace-home .heading-text > .muted, .wizard-sheet .heading-text > .muted { font-size: clamp(15px, 1.45vw, 21px); }
.heading-text { display: grid; gap: 7px; min-width: 0; overflow-wrap: anywhere; }
.muted { color: var(--muted); line-height: 1.45; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 8px; min-height: 39px; padding: 8px 14px; border: 1px solid transparent; white-space: nowrap; font-size: 14px; font-weight: 650; transition: background .15s ease, border-color .15s ease; }
.button.primary { color: #fff; background: var(--blue); border-color: var(--blue); }
.button.primary:hover:not(:disabled) { background: var(--blue-dark); border-color: var(--blue-dark); }
.button.secondary { color: var(--ink); background: var(--surface); border-color: #cad6e8; }
.button.secondary:hover:not(:disabled) { background: #eef4ff; border-color: #b4c8ee; }
.button.quiet { color: var(--blue-dark); background: transparent; }
.button.quiet:hover:not(:disabled) { background: #edf3ff; }
.button.danger { color: #fff; background: #a32f2f; border-color: #a32f2f; }
.button.danger:hover:not(:disabled) { background: #872525; border-color: #872525; }
.button.danger-quiet { color: #963733; background: transparent; }
.button.danger-quiet:hover:not(:disabled) { background: #fdf0ef; }
.button.small { min-height: 33px; padding: 5px 10px; font-size: 13px; }
.button:disabled { opacity: .52; }
.text-link { color: var(--blue-dark); }
.text-link:hover { text-decoration: underline; }

.hero { display: grid; gap: 20px; padding: 18px 22px 23px; background: #f2f7fc; border: 1px solid #d9e5f3; border-radius: var(--radius); }
.hero-content { display: grid; justify-items: start; gap: 7px; }
.hero-content h2 { font-size: clamp(20px, 2.2vw, 27px); letter-spacing: -.55px; }
.hero-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: center; gap: 14px; }
.flow-step { display: flex; gap: 13px; align-items: flex-start; min-width: 0; }
.flow-step:not(:nth-child(3))::after { content: ""; width: 9px; height: 9px; flex: 0 0 9px; margin: 16px 10% 0 auto; border: solid #a9bbce; border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); }
.flow-number { flex: 0 0 43px; height: 43px; display: grid; place-items: center; border-radius: 50%; background: #d9e8ff; color: var(--blue); font-size: 18px; font-weight: 700; }
.flow-label { display: grid; gap: 3px; padding-top: 3px; }
.flow-label .muted { font-size: 13px; }
.dashboard-grid, .mapping-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; }
.dashboard-card-heading { display: grid; gap: 3px; }
.dashboard-card-heading h2 { font-size: 23px; }
.dashboard-card-heading .muted { font-size: 14px; }
.batch-filters { display: flex; flex-wrap: wrap; gap: 9px; }
.batch-filters button { padding: 8px 14px; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; font-size: 13px; font-weight: 600; }
.batch-filters button[aria-pressed="true"] { color: var(--blue); border-bottom-color: var(--blue); }
.recent-batches { gap: 12px; }
.recent-batches .recent-table { margin-top: -12px; border-top: 1px solid var(--line); }
.recent-table th, .recent-table td { padding: 10px 7px; }
.recent-table td:last-child { width: 1%; }
.recent-name { display: flex; align-items: center; gap: 10px; }
.recent-name .batch-name { min-width: 108px; }
.recent-name .muted { font-size: 12px; }
.recent-name .file-icon { width: 34px; height: 34px; background: #f0f4f9; color: #50647f; }
.recent-table .pill { white-space: nowrap; }
.recent-table .button, .frequent-templates .button, .dashboard-upload .button { color: var(--blue-dark); }
.frequent-templates .item { min-height: 72px; background: #fbfcfe; }
.frequent-templates .item:nth-child(2) .file-icon { color: #7343c7; background: #f0e8ff; }
.frequent-templates .item:nth-child(3) .file-icon { color: #157555; background: #ddf5ea; }
.dashboard-link { justify-self: start; display: flex; align-items: center; gap: 7px; color: var(--blue-dark); font-weight: 650; font-size: 14px; }
.dashboard-link:hover { text-decoration: underline; }
.dashboard-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 15px; padding: 12px 19px; border: 1px solid #dce8fb; border-radius: var(--radius); background: #f0f6ff; }
.dashboard-upload strong { font-size: 17px; }
.help-intro .hero-content { max-width: 720px; }
.help-intro p, .help-scenario p, .help-steps p, .help-question p { line-height: 1.55; }
.help-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.help-scenarios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.help-scenario { padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: #f7f9fc; }
.help-scenario h3 { margin: 0 0 5px; font-size: 16px; }
.help-exercise { display: grid; align-content: start; gap: 9px; }
.help-exercise h3 { margin-bottom: 0; }
.help-exercise .help-actions { margin: 3px 0; }
.help-steps { display: grid; gap: 12px; padding-left: 24px; margin: 0 0 4px; }
.help-steps li { padding-left: 4px; }
.help-steps li::marker { color: var(--blue-dark); font-weight: 700; }
.help-steps p { margin-top: 3px; }
.help-mapping { border: 1px solid var(--line); border-radius: var(--radius); }
.help-mapping table { min-width: 480px; }
.help-questions { display: grid; gap: 7px; }
.help-question { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); }
.help-question summary { cursor: pointer; font-weight: 650; }
.help-question p { margin-top: 7px; }
.file-icon.word { color: #1b53bd; }
.file-icon.excel { color: #1b7156; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 19px; min-width: 0; display: grid; align-content: start; gap: 14px; }
.card-heading { min-height: 28px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.card-heading h2 { margin: 0; }
.empty { display: grid; gap: 4px; padding: 10px 0; }
.item-list { display: grid; gap: 8px; }
.item { min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; }
.item.selected { background: #f0f5ff; border-color: #b2c7f2; }
.file-icon { display: inline-grid; place-items: center; width: 34px; height: 39px; border-radius: 6px; flex: 0 0 34px; font-weight: 750; background: #ecf2fd; }
.file-icon.excel { background: #e7f3ed; }
.item-description { flex: 1; min-width: 0; overflow-wrap: anywhere; display: grid; gap: 3px; }
.item-description .muted { font-size: 13px; }
.batch-name { display: grid; gap: 4px; min-width: 130px; }
.batch-name .text-link { font-size: 13px; }
.table-scroll { overflow: auto; max-width: 100%; }
.table-scroll.bounded { max-height: 365px; }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: 14px; }
thead { position: sticky; top: 0; background: #f3f6fa; }
th { color: #465a77; font-size: 12px; font-weight: 700; }
th, td { padding: 9px 10px; vertical-align: middle; border-bottom: 1px solid #e7ecf4; overflow-wrap: anywhere; }
tr:last-child td { border-bottom: 0; }
.table-actions { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.table-actions .button { white-space: nowrap; }
.row-file { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }

.wizard-layout { display: block; padding: 6px clamp(12px, 4.15vw, 66px) 9px; background: #f1f4f7; --blue: #067f82; --blue-dark: #07666a; }
.wizard-layout .sidebar { display: none; }
.wizard-layout .topbar, .wizard-layout .main { max-width: 1500px; margin-inline: auto; }
.wizard-layout .topbar { min-height: 49px; padding: 4px clamp(12px, 1.7vw, 26px); border: 1px solid #edf1f6; border-radius: var(--radius); }
.wizard-layout .brand { padding: 0; }
.wizard-actions { display: flex; gap: 12px; align-items: center; }
.draft-status { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; }
.draft-status.saved::before { content: "✓"; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #218866; color: #fff; }
.wizard-layout .main { padding: 0; gap: 5px; margin-top: 5px; }
.wizard-sheet { display: grid; align-content: start; gap: 19px; min-width: 0; padding: 25px clamp(15px, 1.8vw, 27px) 20px; background: #fff; border: 1px solid #edf1f6; border-radius: var(--radius); }
.wizard-sheet .page-heading { min-height: 0; }
.wizard-sheet .heading-text { gap: 3px; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; list-style: none; padding: 0; margin: 0 0 5px; }
.steps li { display: flex; gap: 12px; align-items: center; min-width: 0; color: var(--muted); font-weight: 550; }
.steps li::after { content: ""; height: 2px; flex: 1; background: #dce4eb; }
.steps li.complete::after { background: #278a6e; }
.steps li.current { color: var(--blue-dark); font-weight: 750; }
.step-number { flex: 0 0 37px; height: 37px; display: grid; place-items: center; border-radius: 50%; background: #e8ecf1; color: #405674; font-weight: 650; }
.current .step-number { color: #fff; background: var(--blue); }
.complete .step-number { color: #fff; background: #218866; }
.mapping-grid { grid-template-columns: minmax(0, 1fr) minmax(225px, 27.5%); gap: 19px; }
.data-pane { display: grid; align-content: start; gap: 12px; min-width: 0; }
.row-preview:empty { display: none; }
.data-heading h2 { font-size: clamp(21px, 2.25vw, 31px); letter-spacing: -.65px; }
.data-heading p { margin-top: 4px; }
.workbook-strip { display: flex; align-items: center; gap: 13px; padding: 11px 15px; background: #f4f8fb; border: 1px solid var(--line); border-radius: var(--radius); }
.workbook-strip .file-icon { background: #147451; color: white; }
.sheet-controls { padding: 4px 0; color: var(--muted); font-size: 13px; }
.sheet-controls .controls-grid { margin-top: 9px; }
.sheet-controls summary, .data-preview summary { cursor: pointer; }
.mapping-table, .data-preview { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.mapping-fields th, .mapping-fields td { padding: 5px 9px; }
.mapping-fields th { padding-block: 8px; }
.mapping-fields td:nth-child(2) { width: 35%; min-width: 160px; }
.mapping-fields td:last-child { text-align: center; width: 95px; }
.mapping-fields select { min-height: 34px; }
.mapping-status { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--line); background: #fcfdff; }
.mapping-count { display: flex; align-items: center; gap: 7px; font-weight: 650; color: var(--muted); }
.mapping-count.complete { color: #167647; }
.mapping-count span { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; color: #fff; background: #198154; font-size: 12px; }
.mapping-note { padding: 0 12px 8px; background: #fcfdff; font-size: 13px; }
.data-preview summary { padding: 9px 12px; background: #f2f6fa; color: #405574; font-weight: 650; font-size: 14px; }
.preview-table td, .preview-table th { border-right: 1px solid #e7ecf4; }
.preview-table td { padding-block: 7px; }
.preview-table td:last-child, .preview-table th:last-child { border-right: 0; }
.batch-parameters { border: 1px solid var(--line); border-radius: var(--radius); padding: 19px; background: #f7f9fc; min-width: 0; overflow-wrap: anywhere; }
.batch-parameters h2 { font-size: 22px; }
.batch-parameters dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 16px; margin: 18px 0 23px; }
.batch-parameters dt { color: var(--muted); }
.batch-parameters dd { margin: 0; }
.filename-settings { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.filename-settings h3 { margin: 0; font-size: 17px; }
.filename-settings .muted { font-size: 13px; }
.filename-settings .muted:empty { display: none; }
.stack { display: grid; gap: 13px; }
.file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.upload { display: flex; align-items: center; gap: 13px; padding: 17px; min-height: 93px; border: 1px dashed #9bb2d6; border-radius: 9px; cursor: pointer; background: #f8faff; }
.upload:hover, .upload.dragging, .file-input:focus-visible + .upload { border-color: var(--blue); background: #edf4ff; }
.upload-mark { display: grid; place-items: center; flex: 0 0 40px; height: 40px; border-radius: 9px; color: var(--blue-dark); background: #e4edff; font-size: 23px; font-weight: 650; }
.upload-copy { flex: 1; min-width: 0; }
.upload-copy .muted { margin-top: 4px; font-size: 13px; }
.fields { display: flex; flex-wrap: wrap; gap: 8px; }
.field-chip { display: inline-flex; align-items: center; gap: 8px; border-radius: 6px; border: 1px solid #dce6fa; background: #f0f5ff; padding: 6px 8px; color: #34507a; overflow-wrap: anywhere; }
.field-chip span { font-size: 11px; }
code { color: #234c98; font: 13px "Cascadia Mono", Consolas, monospace; overflow-wrap: anywhere; }
.controls-grid { display: grid; grid-template-columns: minmax(130px, 1.5fr) repeat(3, minmax(94px, 1fr)); gap: 12px; }
.control { display: grid; gap: 6px; font-size: 13px; font-weight: 650; min-width: 0; }
.control .muted { font-weight: 400; font-size: 12px; }
input[type="text"], input[type="password"], input[type="number"], select { min-height: 37px; max-width: 100%; width: 100%; background: #fff; border: 1px solid #c6d3e7; border-radius: 7px; color: var(--ink); padding: 6px 9px; }
input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--blue); }
.wizard-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px clamp(15px, 1.8vw, 27px); background: #fff; border: 1px solid #edf1f6; border-radius: var(--radius); }
.wizard-footer .button { min-height: 43px; min-width: 132px; padding-inline: 17px; }
.notice { border: 1px solid #c7d8f8; background: #eef4ff; color: #28477c; border-radius: 8px; padding: 11px 13px; line-height: 1.45; }
.notice.success, .release-mark { background: #e9f5ef; border-color: #b7dac8; color: #216348; }
.notice.danger, .pill.danger { background: #fdf0ef; border-color: #efc4c2; color: #963733; }
.pill { display: inline-flex; align-items: center; border: 1px solid var(--line); font-weight: 650; font-size: 11px; border-radius: 20px; padding: 2px 7px; }
.pill.success { color: #216348; background: #e9f5ef; border-color: #b7dac8; }
.pill.warning { color: #7c5100; background: #fff4db; border-color: #f5e6be; }
.pill.draft { color: #495c75; background: #ecf1f6; }
.review-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr); gap: 15px; align-items: start; }
.document-paper { min-height: 220px; max-height: 510px; overflow: auto; scrollbar-gutter: stable; padding: clamp(10px, 1.3vw, 22px); border: 1px solid var(--line); background: #fff; color: #161616; font: 14px/1.35 "Times New Roman", serif; white-space: pre-wrap; overflow-wrap: break-word; }
.document-paragraph { min-height: 1em; }
.document-paragraph + .document-paragraph { margin-top: 6px; }
.document-paragraph.center { text-align: center; }
.document-paragraph.right { text-align: right; }
.document-paragraph.both { text-align: justify; }
.document-table { margin-block: 10px; table-layout: fixed; font-size: inherit; }
.document-table td, .document-table tr:last-child td { border: 0; padding: 3px 4px; vertical-align: top; overflow-wrap: break-word; }
.document-table .document-table-gap { padding: 0; }
.toggle { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--muted); }
.edit-box { display: grid; gap: 9px; padding: 11px; border-radius: 8px; background: #edf4ff; }
.release { display: flex; align-items: center; gap: 13px; }
.release-mark { flex: 0 0 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; font-size: 24px; }
.release-copy { flex: 1; min-width: 0; overflow-wrap: anywhere; }

.icon { position: relative; flex: 0 0 18px; width: 18px; height: 18px; display: inline-block; color: inherit; }
.icon::before, .icon::after { position: absolute; content: ""; }
.icon-search::before { width: 11px; height: 11px; top: 2px; left: 2px; border: 1.6px solid currentColor; border-radius: 50%; }
.icon-search::after { width: 6px; height: 1.6px; top: 13px; left: 11px; background: currentColor; transform: rotate(45deg); }
.icon-plus::before, .icon-plus::after { inset: 8px 0 auto; height: 2px; border-radius: 1px; background: currentColor; }
.icon-plus::after { transform: rotate(90deg); }
.icon-chevron::before { inset: 5px auto auto 5px; width: 7px; height: 7px; border: solid currentColor; border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); }
.icon-arrow::before, .icon-download::before, .icon-upload::before { inset: 8px 2px auto 2px; height: 1.6px; background: currentColor; }
.icon-arrow::after, .icon-download::after, .icon-upload::after { top: 5px; right: 2px; width: 8px; height: 8px; border: solid currentColor; border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); }
.icon-download, .icon-upload { border-right: 1.5px solid currentColor; }
.icon-download { transform: rotate(90deg); }
.icon-upload { transform: rotate(-90deg); border-right: 0; border-left: 1.5px solid currentColor; }
.icon-home::before { inset: 3px auto auto 3px; width: 12px; height: 12px; border: solid currentColor; border-width: 1.6px 0 0 1.6px; transform: rotate(45deg); border-radius: 2px; }
.icon-home::after { inset: 8px 3px 1px; border: solid currentColor; border-width: 0 1.6px 1.6px; border-radius: 0 0 2px 2px; }
.icon-document::before { inset: 1px 3px; border: 1.6px solid currentColor; border-radius: 2px; }
.icon-document::after { inset: 6px 6px auto; height: 1.4px; background: currentColor; box-shadow: 0 4px currentColor; }
.icon-layers::before, .icon-layers::after { inset: 1px 3px auto; height: 12px; border: 1.6px solid currentColor; border-radius: 1px; transform: rotate(45deg) skew(-9deg, -9deg); }
.icon-layers::after { top: 5px; border-width: 0 1.6px 1.6px 0; }
.icon-person::before { inset: 1px auto auto 5px; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.icon-person::after { inset: 10px 1px 1px; border: 1.5px solid currentColor; border-radius: 8px 8px 2px 2px; }
.icon-help::before { content: "?"; inset: 0; display: grid; place-items: center; border: 1.5px solid currentColor; border-radius: 50%; font-size: 12px; font-weight: 700; }
.icon-refresh::before { inset: 2px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; }
.icon-refresh::after { top: 2px; right: 2px; border: solid transparent; border-width: 4px 0 4px 5px; border-left-color: currentColor; transform: rotate(49deg); }

@media (max-width: 1240px) {
  .frequent-templates .item { flex-wrap: wrap; }
  .frequent-templates .item .button { margin-left: 46px; }
  .recent-name .file-icon { display: none; }
  .flow-step:not(:nth-child(3))::after { margin-right: 3px; }
}
@media (max-width: 1000px) {
  .layout { grid-template-columns: 192px minmax(0, 1fr); }
  .sidebar { padding-inline: 10px; }
  .brand { font-size: 15px; padding-inline: 4px; }
  .main, .topbar { padding-inline: 20px; }
  .main.workspace-home { padding: 25px 20px; }
  .review-grid, .dashboard-grid, .mapping-grid { grid-template-columns: 1fr; }
  .hero-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-flow .button { justify-self: start; }
}
@media (max-width: 720px) {
  .layout { display: block; }
  .sidebar { padding: 12px; }
  .brand { min-height: 34px; }
  .sidebar-organization { padding-top: 5px; }
  .sidebar-profile { display: none; }
  #navigation { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
  #navigation a { min-height: 32px; padding: 5px 8px; gap: 5px; font-size: 12px; }
  .topbar { min-height: 51px; gap: 8px; }
  .account-avatar { display: none; }
  .account-identity .muted { display: none; }
  .account-menu { max-width: 30%; }
  .team-forms, .team-credentials { grid-template-columns: 1fr; }
  .main, .topbar { padding-inline: 13px; }
  .main { padding-block: 18px 36px; gap: 13px; }
  .main.workspace-home { padding: 17px 13px 24px; gap: 13px; }
  .page-heading { align-items: flex-start; flex-wrap: wrap; gap: 12px; }
  .hero { padding: 17px; }
  .hero-flow { grid-template-columns: 1fr; }
  .help-scenarios { grid-template-columns: 1fr; }
  .flow-step:not(:nth-child(3))::after { display: none; }
  .controls-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wizard-layout .topbar { flex-wrap: wrap; }
  .wizard-actions { margin-left: auto; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
  .steps { gap: 4px; }
  .steps li { justify-content: center; gap: 4px; font-size: 11px; }
  .steps li::after { display: none; }
  .step-number { flex-basis: 23px; height: 23px; font-size: 11px; }
  .wizard-footer .button { min-width: 0; white-space: normal; }
  .workbook-strip { flex-wrap: wrap; }
  .mapping-fields td:nth-child(2) { min-width: 130px; }
  .dashboard-upload .item-description { min-width: min(100%, 170px); }
  .upload, .item, .release { flex-wrap: wrap; }
  .upload { padding: 12px; }
  .card { padding: 13px; }
}