:root {
  font-family: "Microsoft YaHei UI", "PingFang SC", sans-serif;
  color: #172536;
  background: #f4f7fa;
  font-synthesis: none;
  --navy: #0b1f35;
  --navy-soft: #132e4c;
  --teal: #0e8f86;
  --teal-soft: #e7f6f4;
  --cyan: #25a6bd;
  --amber: #d89019;
  --red: #c74b50;
  --line: #dfe7ee;
  --muted: #66778a;
  --surface: #ffffff;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-width: 320px; min-height: 100vh; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.boot-screen {
  min-height: 100vh; display: grid; place-content: center; text-align: center; color: var(--muted);
}
.login-page { min-height: 100vh; display: grid; grid-template-columns: minmax(460px, 1.18fr) minmax(390px, .82fr); overflow: hidden; background: #f5f8fa; }
.login-brand { position: relative; isolation: isolate; display: flex; overflow: hidden; flex-direction: column; justify-content: center; padding: clamp(58px, 10vh, 112px) clamp(48px, 8vw, 120px); background: linear-gradient(145deg, #071b31 0%, #0b3451 62%, #07565f 140%); color: white; }
.login-brand::before { content: ""; position: absolute; z-index: -2; width: 520px; height: 520px; top: -210px; right: -175px; border: 1px solid rgba(90, 215, 211, .16); border-radius: 50%; box-shadow: 0 0 0 72px rgba(82, 190, 194, .035), 0 0 0 148px rgba(82, 190, 194, .022); }
.login-brand::after { content: ""; position: absolute; z-index: -3; inset: 0; opacity: .18; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(120deg, rgba(0,0,0,.8), transparent 72%); }
.login-brand-content { position: relative; z-index: 1; max-width: 650px; }
.login-brand-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 30px; color: #92d6d5; font-size: 12px; font-weight: 700; letter-spacing: .18em; }
.login-brand-kicker i { width: 26px; height: 2px; border-radius: 99px; background: #39c8c1; box-shadow: 0 0 14px rgba(57, 200, 193, .65); }
.brand-symbol.large { position: relative; width: 64px; height: 64px; margin-bottom: 30px; border: 1px solid rgba(255,255,255,.2); border-radius: 18px; background: linear-gradient(145deg, #12a99f, #1686aa); box-shadow: 0 15px 36px rgba(0, 11, 27, .3), inset 0 1px rgba(255,255,255,.25); }
.brand-symbol.large::after { content: ""; position: absolute; inset: -8px; border: 1px solid rgba(84, 213, 205, .18); border-radius: 23px; }
.brand-symbol.large svg { width: 34px; height: 34px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.2)); }
.login-brand h1 { max-width: 650px; margin: 0; font-size: clamp(38px, 4vw, 58px); font-weight: 760; line-height: 1.18; letter-spacing: -.03em; }
.login-brand h1 span { color: #d7f5f3; font-weight: 600; }
.login-brand p { max-width: 540px; margin: 24px 0 0; color: #a8c8d5; font-size: 17px; line-height: 1.85; }
.login-assurance { display: flex; align-items: center; gap: 10px; margin-top: 42px; flex-wrap: wrap; }
.login-assurance span { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border: 1px solid rgba(177, 226, 226, .15); border-radius: 9px; background: rgba(255,255,255,.045); color: #c5dee5; font-size: 12px; backdrop-filter: blur(5px); }
.login-assurance svg { width: 15px; height: 15px; color: #56d2ca; }
.login-brand-footer { position: absolute; left: clamp(48px, 8vw, 120px); bottom: 34px; color: rgba(195, 221, 228, .56); font-size: 11px; letter-spacing: .12em; }
.login-circuit { position: absolute; z-index: -1; right: 7%; bottom: 9%; width: 180px; height: 170px; opacity: .32; }
.login-circuit::before, .login-circuit::after, .login-circuit i { content: ""; position: absolute; border-color: #55c8c4; border-style: solid; }
.login-circuit::before { inset: 22px 0 0 30px; border-width: 1px 0 0 1px; border-radius: 24px 0 0; }
.login-circuit::after { width: 105px; height: 74px; right: 0; bottom: 0; border-width: 0 1px 1px 0; border-radius: 0 0 20px; }
.login-circuit i:nth-child(1) { width: 8px; height: 8px; top: 18px; left: 26px; border-width: 2px; border-radius: 50%; background: #56d2ca; box-shadow: 0 0 14px #56d2ca; }
.login-circuit i:nth-child(2) { width: 58px; top: 64px; left: 0; border-width: 1px 0 0; }
.login-circuit i:nth-child(3) { height: 48px; right: 28px; bottom: 0; border-width: 0 0 0 1px; }
.login-circuit span { position: absolute; right: 23px; bottom: 45px; width: 11px; height: 11px; border: 2px solid #56d2ca; border-radius: 50%; box-shadow: 0 0 14px rgba(86,210,202,.7); }
.login-panel { position: relative; display: grid; place-items: center; padding: 42px; background: radial-gradient(circle at 15% 15%, rgba(86, 189, 190, .1), transparent 30%), linear-gradient(145deg, #f8fafb, #edf3f6); }
.login-panel::before { content: ""; position: absolute; width: 210px; height: 210px; right: -95px; bottom: -95px; border: 1px solid rgba(28, 128, 145, .09); border-radius: 50%; box-shadow: 0 0 0 42px rgba(28, 128, 145, .025); }
.login-form { position: relative; z-index: 1; width: min(400px, 100%); }
.login-form h2 { margin: 0 0 7px; color: #142b40; font-size: 34px; letter-spacing: -.03em; }
.login-form > div:first-child p { margin: 0 0 32px; color: var(--muted); font-size: 13px; }
.login-form .field-input { height: 48px; }
.login-button { width: 100%; padding-block: 12px; margin-top: 8px; }
.login-error { background: #fff0f1; color: #a93940; padding: 10px 12px; border-radius: 6px; font-size: 12px; margin-bottom: 18px; }
.login-error:empty { display: none; }
.brand-mark {
  width: 54px; height: 54px; margin: 0 auto 16px; display: grid; place-items: center;
  border-radius: 14px; background: var(--teal); color: white; font-size: 24px; font-weight: 800;
}

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 228px 1fr; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: 228px; padding: 24px 16px;
  background: var(--navy); color: white; display: flex; flex-direction: column; z-index: 20;
}
.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 26px; }
.brand-symbol {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px;
  background: #17a49a; font-weight: 800;
}
.brand strong { display: block; font-size: 15px; }
.brand small { color: #8fa8bf; font-size: 11px; }
.nav { display: grid; gap: 4px; }
.nav button {
  border: 0; background: transparent; color: #aebed0; padding: 12px 14px;
  border-radius: 8px; text-align: left; display: flex; gap: 11px; align-items: center; font-size: 14px;
}
.nav button:hover, .nav button.active { background: var(--navy-soft); color: white; }
.nav button.active { box-shadow: inset 3px 0 #25b9ad; }
.nav-icon { width: 20px; text-align: center; font-size: 15px; }
.sidebar-footer { margin-top: auto; padding: 16px 10px 0; border-top: 1px solid #1c3855; }
.sidebar-footer small { color: #7f98b0; }

.main { grid-column: 2; min-width: 0; }
.topbar {
  height: 68px; padding: 0 30px; background: white; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 10;
}
.topbar h1 { margin: 0; font-size: 18px; letter-spacing: .02em; }
.top-actions { display: flex; align-items: center; gap: 18px; color: var(--muted); font-size: 13px; }
.user-chip { display: flex; align-items: center; gap: 9px; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; background: #d9eeec; color: #08746d;
  display: grid; place-items: center; font-weight: 700;
}
.content { padding: 26px 30px 40px; max-width: 1500px; margin: 0 auto; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; gap: 20px; }
.page-heading h2 { margin: 0 0 5px; font-size: 24px; }
.page-heading p { margin: 0; color: var(--muted); font-size: 13px; }

.button {
  border: 1px solid var(--line); background: white; color: #22354a; padding: 9px 15px;
  border-radius: 7px; font-size: 13px; font-weight: 600;
}
.button:hover { border-color: #a8b9c8; background: #f8fafc; }
.button.primary { background: var(--teal); border-color: var(--teal); color: white; }
.button.danger { color: var(--red); border-color: #efc7c9; }
.button.small { padding: 6px 10px; font-size: 12px; }

.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); background: white; margin-bottom: 22px; }
.metric { padding: 21px 24px; border-right: 1px solid var(--line); }
.metric:last-child { border-right: 0; }
.metric span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 10px; }
.metric strong { font-size: 28px; font-weight: 700; }
.metric em { font-style: normal; margin-left: 8px; color: var(--muted); font-size: 12px; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; }
.panel { background: white; border: 1px solid var(--line); }
.panel-header { padding: 17px 20px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.panel-header h3 { margin: 0; font-size: 15px; }
.panel-body { padding: 20px; }

.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; color: #718196; font-weight: 600; background: #f7f9fb; }
th, td { padding: 13px 15px; border-bottom: 1px solid #e9eef3; white-space: nowrap; }
tr:hover td { background: #fbfcfd; }
.dashboard-order-table { overflow-x: hidden; }
.compact-order-table { table-layout: fixed; }
.compact-order-table th:nth-child(1) { width: 18%; }
.compact-order-table th:nth-child(2) { width: 24%; }
.compact-order-table th:nth-child(3) { width: 20%; }
.compact-order-table th:nth-child(4) { width: 22%; }
.compact-order-table th:nth-child(5) { width: 16%; }
.compact-order-table td { overflow: hidden; text-overflow: ellipsis; }
.compact-order-table .client-cell, .compact-order-table .people-cell { white-space: normal; line-height: 1.45; }
.order-number { font-variant-numeric: tabular-nums; }
.empty-table-cell { padding: 34px 15px; text-align: center; color: var(--muted); }
.mobile-only, .mobile-card-list, .mobile-ledger-section { display: none; }
.link-button { background: none; border: 0; padding: 0; color: #087b74; font-weight: 600; }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.status.warning::before { background: var(--amber); }
.status.complete::before { background: #7e8ea0; }
.tag { display: inline-block; padding: 4px 8px; border-radius: 4px; background: var(--teal-soft); color: #08766f; font-size: 11px; }
.tag.warning { background: #fff4dc; color: #9a5d00; }
.tag.complete { background: #e8eef3; color: #506174; }

.activity { list-style: none; padding: 0; margin: 0; }
.activity li { position: relative; padding: 0 0 19px 20px; border-left: 1px solid #dce5ec; color: #34465a; font-size: 13px; }
.activity li:last-child { border-left-color: transparent; }
.activity li::before { content: ""; position: absolute; left: -5px; top: 2px; width: 9px; height: 9px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px white; }
.activity small { display: block; color: var(--muted); margin-top: 5px; }

.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.search { min-width: 240px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 7px; outline: none; }
.search:focus, .field-input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(14,143,134,.1); }
.order-query-panel { margin-bottom: 16px; overflow: hidden; border: 1px solid #dce6ed; border-radius: 12px; background: #fff; box-shadow: 0 5px 18px rgba(25, 55, 80, .045); }
.order-query-main { display: flex; align-items: flex-end; gap: 10px; padding: 13px 16px; flex-wrap: wrap; }
.order-search-box { display: flex; flex: 1 1 390px; align-items: center; min-width: 320px; height: 42px; overflow: hidden; border: 1px solid #cbd9e2; border-radius: 8px; background: #fff; transition: border-color .16s ease, box-shadow .16s ease; }
.order-search-box:focus-within { border-color: #5794b5; box-shadow: 0 0 0 3px rgba(87,148,181,.12); }
.order-search-icon { display: grid; width: 40px; min-width: 40px; place-items: center; color: #6b8295; }
.order-search-icon svg { width: 18px; height: 18px; }
.order-search-box input { flex: 1; min-width: 80px; height: 100%; padding: 0 8px 0 0; border: 0; outline: 0; color: #203b52; font: inherit; }
.order-search-box input::placeholder { color: #98a8b5; }
.order-search-box select { width: 112px; height: 28px; padding: 0 25px 0 10px; border: 0; border-left: 1px solid #e2e9ee; outline: 0; background: #f8fafb; color: #536a7d; font: inherit; font-size: 11px; }
.order-sort-controls { display: flex; align-items: flex-end; gap: 7px; }
.order-sort-controls label { display: grid; gap: 4px; color: #71869a; font-size: 10px; }
.order-sort-controls select { height: 36px; padding: 0 28px 0 10px; border: 1px solid #d3dfe7; border-radius: 7px; outline: 0; background: #fff; color: #29465d; font: inherit; font-size: 12px; }
.order-sort-controls select { min-width: 112px; }
.order-sort-controls select:focus { border-color: #5794b5; box-shadow: 0 0 0 3px rgba(87,148,181,.1); }
.order-sort-direction, .order-query-reset { min-height: 36px; white-space: nowrap; }
.order-query-reset:disabled { cursor: default; opacity: .45; }
.order-filter-row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-top: 1px solid #e8eef2; background: #fbfcfd; flex-wrap: wrap; }
.order-filter-builder-head { display: flex; align-items: center; gap: 10px; }
.order-filter-builder-head > div { min-width: 128px; }
.order-filter-builder-head strong, .order-filter-builder-head small { display: block; }
.order-filter-builder-head strong { color: #34516a; font-size: 12px; }
.order-filter-builder-head small { margin-top: 2px; color: #91a0ac; font-size: 9px; white-space: nowrap; }
.order-filter-builder-head select { height: 36px; padding: 0 30px 0 12px; border: 1px solid #cfe3e5; border-radius: 8px; outline: 0; background: #eef8f8; color: #187f8b; font: inherit; font-size: 11px; font-weight: 700; }
.order-filter-builder-head select:focus { border-style: solid; border-color: #5794b5; box-shadow: 0 0 0 3px rgba(87,148,181,.1); }
.order-filter-list { display: flex; flex: 1 1 420px; align-items: center; gap: 8px; min-width: 240px; flex-wrap: wrap; }
.order-filter-empty { color: #98a5b0; font-size: 11px; }
.order-filter-condition { display: inline-flex; align-items: center; height: 38px; overflow: hidden; border: 1px solid #e0e8ed; border-radius: 9px; background: #f5f8fa; transition: border-color .16s ease, box-shadow .16s ease; }
.order-filter-condition:focus-within { border-color: #a9cdd4; box-shadow: 0 0 0 3px rgba(87,148,181,.08); }
.order-filter-condition > strong { padding-left: 10px; color: #29475f; font-size: 11px; white-space: nowrap; }
.order-filter-condition > select { min-width: 104px; height: 100%; padding: 0 27px 0 10px; border: 0; outline: 0; background: transparent; color: #1f4058; font: inherit; font-size: 11px; }
.order-filter-condition > button { width: 34px; height: 100%; border: 0; background: transparent; color: #8ca0af; font-size: 18px; cursor: pointer; }
.order-filter-condition > button:hover { background: #fff3f2; color: #d95050; }
.order-filter-condition-date { overflow: visible; }
.order-filter-condition-date > i { padding: 0 5px; color: #8a9aa7; font-size: 10px; font-style: normal; }
.order-date-picker { position: relative; display: inline-block; }
.order-date-picker > button { display: flex; min-width: 112px; height: 30px; align-items: center; justify-content: space-between; gap: 7px; padding: 0 9px 0 11px; border: 1px solid #d6e2e8; border-radius: 7px; background: #fff; color: #34536a; font: inherit; font-size: 10px; cursor: pointer; }
.order-date-picker > button:hover { border-color: #9fc2cf; background: #f8fcfc; }
.order-date-picker > button:focus-visible { outline: 0; border-color: #5794b5; box-shadow: 0 0 0 3px rgba(87,148,181,.1); }
.order-date-picker > button span { white-space: nowrap; }
.order-date-picker > button svg { width: 14px; height: 14px; color: #6e8a9e; }
.order-date-picker > input { position: absolute; left: 50%; bottom: 0; width: 1px; height: 1px; border: 0; opacity: 0; pointer-events: none; }
.order-active-filter-count { align-self: center; margin-left: auto; color: #8495a4; font-size: 11px; white-space: nowrap; }
.order-active-filter-count.active { color: #087d75; font-weight: 700; }
.table-sort-button { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-weight: inherit; white-space: nowrap; cursor: pointer; }
.table-sort-button i { color: #9ba9b5; font-size: 12px; font-style: normal; font-weight: 500; }
.table-sort-button:hover, .table-sort-button.active { color: #087d75; }
.table-sort-button.active i { color: #087d75; }
.paginated-list > .table-wrap { border-radius: 12px 12px 0 0; }
.list-pagination { display: flex; min-height: 54px; align-items: center; gap: 18px; padding: 9px 14px; border: 1px solid #dce6ed; border-top: 0; border-radius: 0 0 12px 12px; background: #fbfcfd; color: #6b7f90; font-size: 12px; }
.pagination-size { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.pagination-size select {
  width: 88px;
  min-width: 88px;
  height: 34px;
  padding: 0 34px 0 14px;
  border: 1px solid #d5e0e7;
  border-radius: 7px;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23415f76' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 14px 14px;
  color: #304b61;
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: left;
}
.pagination-size select:focus { border-color: #77a7be; box-shadow: 0 0 0 3px rgba(87,148,181,.09); }
.pagination-summary { margin-right: auto; color: #738696; font-variant-numeric: tabular-nums; }
.pagination-actions { display: inline-flex; align-items: center; gap: 8px; }
.pagination-actions strong { min-width: 44px; color: #415a6e; font-size: 11px; font-variant-numeric: tabular-nums; text-align: center; }
.pagination-actions .button { min-width: 64px; min-height: 32px; padding: 5px 10px; border-color: #d6e1e8; background: #fff; color: #456278; font-weight: 600; }
.pagination-actions .button:not(:disabled):hover { border-color: #9fc4cf; background: #f3faf9; color: #087b74; }
.pagination-actions .button:disabled { cursor: default; opacity: .42; }
.paginated-list > .table-wrap.order-table-scroll {
  max-height: clamp(320px, calc(100vh - 360px), 680px);
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  scrollbar-gutter: stable both-edges;
  scrollbar-color: #7994a8 #e8eef3;
  scrollbar-width: auto;
}
.order-table-scroll table { min-width: 1560px; }
.order-table-scroll thead th { position: sticky; top: 0; z-index: 2; box-shadow: 0 1px #dfe7ee; }
.order-table-scroll::-webkit-scrollbar { width: 14px; height: 14px; }
.order-table-scroll::-webkit-scrollbar-track { background: #e8eef3; }
.order-table-scroll::-webkit-scrollbar-thumb { border: 3px solid #e8eef3; border-radius: 999px; background: #7994a8; }
.order-table-scroll::-webkit-scrollbar-thumb:hover { background: #56778f; }

.audit-panel { overflow: hidden; }
.audit-filters { display: grid; grid-template-columns: 150px minmax(190px, 1fr) 130px 150px 150px auto; gap: 12px; align-items: end; padding: 16px 18px; border-top: 1px solid #e7edf1; background: #f8fafb; }
.audit-filters label { display: grid; gap: 6px; min-width: 0; }
.audit-filters label > span { color: #617789; font-size: 11px; font-weight: 600; }
.audit-filters .field-input { min-height: 38px; padding-top: 7px; padding-bottom: 7px; background: #fff; }
.audit-filter-actions { display: flex; gap: 8px; align-items: center; }
.audit-table-wrap { border: 0; border-radius: 0; box-shadow: none; }
.audit-table-wrap table { min-width: 850px; }
.audit-result { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.audit-result.success { background: #e8f7f2; color: #087a68; }
.audit-result.failure { background: #fff0ef; color: #c1453c; }
.audit-panel .list-pagination { margin: 0; border-top: 1px solid #e5ebef; border-radius: 0; background: #fff; }

.operations-panel { margin-bottom: 22px; overflow: hidden; }
.operations-panel .panel-header small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.operations-status-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 16px 18px; background: #f8fafb; }
.operations-status-card { min-width: 0; display: grid; gap: 5px; padding: 14px; border: 1px solid #dce6e9; border-radius: 8px; background: #fff; }
.operations-status-card::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #11978e; }
.operations-status-card.warning::before { background: #dc8b13; }
.operations-status-card span { color: #65798a; font-size: 11px; }
.operations-status-card strong { color: #173049; font-size: 20px; }
.operations-status-card small { color: #8b99a5; font-size: 10px; line-height: 1.45; }
.operations-backup-list { border-top: 1px solid #e6ecef; }
.operations-backup-row { display: grid; grid-template-columns: minmax(150px, 1fr) 90px 150px 90px; align-items: center; gap: 12px; min-height: 54px; padding: 9px 18px; border-bottom: 1px solid #edf1f3; font-size: 12px; }
.operations-backup-row:last-child { border-bottom: 0; }
.operations-backup-row > div strong, .operations-backup-row > div small { display: block; }
.operations-backup-row > div small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.operations-backup-row .complete { color: #078b7f; }
.operations-backup-row .warning { color: #c67c0d; }
.operations-empty, .operations-note { margin: 0; padding: 14px 18px; border-top: 1px solid #e7edef; color: #667b8c; font-size: 11px; line-height: 1.65; }
.operations-note { display: flex; gap: 10px; background: #f7fbfd; }
.operations-note strong { flex: 0 0 auto; color: #29475e; }

@media (max-width: 1280px) {
  .audit-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .audit-filter-actions { justify-content: flex-end; }
}

.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; }
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.info-item label { display: block; color: var(--muted); font-size: 11px; margin-bottom: 6px; }
.info-item strong { font-size: 13px; }
.timeline { display: flex; overflow-x: auto; padding: 24px 4px 14px; }
.timeline-node { position: relative; min-width: 112px; padding: 0 5px 8px; border: 0; background: transparent; text-align: center; font: inherit; font-size: 11px; color: #8391a2; cursor: pointer; }
.timeline-node::before { content: ""; display: block; width: 13px; height: 13px; margin: 0 auto 8px; border: 3px solid white; border-radius: 50%; background: #cad4dd; box-shadow: 0 0 0 1px #cad4dd; position: relative; z-index: 2; }
.timeline-node::after { content: ""; position: absolute; height: 2px; background: #dbe3e9; left: 0; right: 0; top: 6px; z-index: 1; }
.timeline-node:first-child::after { left: 50%; }
.timeline-node:last-child::after { right: 50%; }
.timeline-node.complete::before { background: var(--teal); box-shadow: 0 0 0 1px var(--teal); }
.timeline-node.complete::after { background: var(--teal); }
.timeline-node.active { color: #08766f; font-weight: 700; }
.timeline-node.active::before { background: white; box-shadow: 0 0 0 3px var(--teal); }
.timeline-node > span { display: inline-block; padding: 4px 7px; border-radius: 6px; line-height: 1.45; transition: color .16s ease, background .16s ease, box-shadow .16s ease; }
.timeline-node:hover > span { color: #08766f; background: #edf8f7; }
.timeline-node.selected > span { color: #075f5a; background: #e1f4f2; box-shadow: inset 0 0 0 1px #a8d9d5; font-weight: 700; }
.timeline-node:focus-visible { outline: none; }
.timeline-node:focus-visible > span { outline: 3px solid rgba(13, 142, 133, .2); outline-offset: 2px; }
.workflow-template-note { margin: 18px 20px 0; padding: 10px 12px; border-left: 3px solid #8aa0b3; background: #f5f8fa; color: var(--muted); font-size: 12px; }
.workflow-template .timeline-node.configured { color: #40566b; font-weight: 600; }
.workflow-template .timeline-node.configured::before { background: white; box-shadow: 0 0 0 2px #8aa0b3; }
.workflow-template .timeline-node.configured::after { background: #cbd6df; }
.workflow-template .timeline-node small { display: block; margin-top: 5px; color: #8796a5; font-size: 10px; font-weight: 400; }
.workflow-editor { margin-bottom: 22px; }
.workflow-editor .panel-header small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.workflow-card-strip { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding: 24px 20px; }
.workflow-arrow { color: #8da0b1; font-size: 18px; flex: 0 0 auto; }
.workflow-node-card { position: relative; min-width: 148px; min-height: 116px; padding: 14px 12px; border: 2px solid #d5dfe7; border-radius: 9px; background: white; color: #21374c; text-align: left; }
.workflow-node-card:hover, .workflow-node-card.selected { border-color: var(--teal); background: #f4fbfa; }
.workflow-node-card strong, .workflow-node-card small { display: block; }
.workflow-node-card strong { margin: 8px 0 7px; }
.workflow-node-card small { color: var(--muted); font-size: 10px; margin-top: 3px; }
.workflow-node-type { display: inline-block; padding: 2px 6px; border-radius: 4px; background: #eaf0f5; color: #596d80; font-size: 10px; }
.workflow-card-actions { position: absolute; right: 7px; top: 7px; display: flex; gap: 5px; }
.workflow-card-actions i { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid #d5dfe7; border-radius: 4px; background: white; font-style: normal; font-size: 12px; }
.section-title { margin: 0 0 12px; font-size: 14px; }
.independent-task-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.independent-task-grid .workflow-node-card { width: 100%; }
.workflow-properties { margin-bottom: 22px; }
.task-kind { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }

.designer-page { margin: -26px -30px -40px; background: #f5f7fa; border: 1px solid #d9e1e8; min-height: calc(100vh - 68px); box-shadow: 0 18px 50px rgba(15, 35, 55, .08); overflow: hidden; }
.designer-topbar { height: 58px; padding: 0 16px 0 12px; display: grid; grid-template-columns: minmax(260px, 1fr) auto minmax(220px, 1fr); align-items: center; gap: 18px; background: #fff; border-bottom: 1px solid #dce4eb; }
.designer-titlebar { display: flex; align-items: center; min-width: 0; gap: 10px; }
.designer-back { width: 30px; height: 30px; border: 0; background: transparent; color: #31465b; border-radius: 6px; font-size: 28px; line-height: 1; }
.designer-back:hover { background: #eef3f7; }
.designer-titlebar h2 { max-width: 520px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; color: #10283f; }
.designer-titlebar small { display: block; margin-top: 4px; color: #78889a; font-size: 11px; }
.designer-tabs { height: 100%; display: flex; align-items: stretch; gap: 22px; white-space: nowrap; }
.designer-tabs button { position: relative; border: 0; background: transparent; color: #283c51; padding: 0 2px; font-size: 14px; }
.designer-tabs button.active { color: #146fe8; font-weight: 700; }
.designer-tabs button.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 4px 4px 0 0; background: #146fe8; }
.designer-toolbar { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.designer { display: grid; grid-template-columns: minmax(170px, 210px) minmax(0, 1fr) minmax(300px, 340px); height: calc(100vh - 126px); min-height: 660px; background: #f2f5f8; border: 0; box-shadow: none; }
.designer-column { min-width: 0; padding: 14px; border-right: 1px solid var(--line); background: #fbfcfd; overflow-y: auto; }
.designer-column:last-child { border-right: 0; }
.designer-column h3 { margin: 0 0 15px; font-size: 14px; }
.designer .properties { position: static; max-height: none; overflow-y: auto; background: #ffffff; box-shadow: inset 1px 0 0 var(--line); }
.designer-column-head { margin-bottom: 18px; }
.designer-column-head h3, .inspector-head h3 { margin: 0; color: #10283f; font-size: 15px; }
.designer-column-head small, .inspector-head small { display: block; margin-top: 5px; color: #8291a2; font-size: 11px; }
.control-group { margin-bottom: 16px; }
.control-group h4 { margin: 0 0 10px; color: #263b50; font-size: 12px; font-weight: 700; }
.control-list { display: grid; grid-template-columns: 1fr; gap: 7px; }
.control-item { min-height: 44px; padding: 8px 10px; border: 1px solid #d8e1e8; border-radius: 6px; background: #fff; font-size: 12px; text-align: left; color: #263d52; display: flex; align-items: center; gap: 8px; box-shadow: 0 1px 0 rgba(16, 40, 63, .03); }
.control-item:hover { border-color: #1179ef; color: #0b61ca; background: #f7fbff; box-shadow: 0 6px 16px rgba(21, 98, 178, .08); }
.control-item:disabled { cursor: not-allowed; opacity: .5; box-shadow: none; }
.control-item[draggable="true"] { cursor: grab; }
.control-item[draggable="true"]:active { cursor: grabbing; }
.control-icon { width: 22px; min-width: 22px; height: 22px; border-radius: 5px; border: 1px solid #cfdae5; display: grid; place-items: center; color: #60758b; font-size: 10px; font-weight: 700; background: #f8fafc; }
.canvas { min-width: 0; position: relative; background: linear-gradient(180deg, #f5f7fa 0%, #edf1f5 100%); padding: 22px 24px; overflow: auto; }
.canvas-ruler { position: sticky; top: -22px; height: 1px; margin: -22px -24px 16px; background: #d9e1e8; z-index: 1; }
.form-sheet { width: min(1120px, 100%); min-width: 0; min-height: 820px; margin: 0 auto 34px; background: white; border: 1px solid #e3e9ef; border-radius: 10px; padding: 30px 30px; box-shadow: 0 16px 42px rgba(15, 36, 58, .1); }
.sheet-meta { margin-bottom: 12px; color: #7d8c9d; font-size: 11px; letter-spacing: .08em; text-align: center; }
.form-sheet-title { text-align: center; color: #14375a; font-size: 22px; line-height: 1.35; margin: 0 0 8px; }
.form-sheet-subtitle { margin: 0 0 30px; text-align: center; color: #6b7b8d; font-size: 13px; }
.form-field { position: relative; padding: 16px 42px 16px 38px; border: 1px solid transparent; margin-bottom: 12px; cursor: grab; border-radius: 8px; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, opacity .15s ease; }
.field-layout-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; align-items: start; }
.field-layout-grid > .form-field { grid-column: span var(--field-span, 12); min-width: 0; margin-bottom: 0; }
.form-field:active { cursor: grabbing; }
.form-field:hover { border-color: #b7dcd8; background: #f8fcfb; }
.form-field.selected { border-color: #0b8f87; background: #f3fbfa; box-shadow: 0 0 0 2px rgba(12, 155, 146, .12); }
.preview-mode .form-field { cursor: default; }
.preview-mode .form-field:hover { border-color: transparent; background: transparent; }
.preview-mode .component-library { opacity: .78; }
.form-field.dragging { opacity: .45; box-shadow: 0 10px 24px rgba(15, 36, 58, .12); }
.form-field.drop-before::before, .form-field.drop-after::after { content: ""; position: absolute; left: 12px; right: 12px; height: 3px; border-radius: 999px; background: var(--teal); box-shadow: 0 0 0 3px rgba(12, 155, 146, .14); }
.form-field.drop-before::before { top: -6px; }
.form-field.drop-after::after { bottom: -6px; }
.field-layout-grid .form-field.drop-before::before { top: 8px; bottom: 8px; left: -7px; right: auto; width: 3px; height: auto; }
.field-layout-grid .form-field.drop-after::after { top: 8px; bottom: 8px; left: auto; right: -7px; width: 3px; height: auto; }
.field-drag-handle { position: absolute; left: 10px; top: 13px; color: #9aa8b5; font-size: 13px; line-height: 1; letter-spacing: 0; user-select: none; }
.form-field:hover .field-drag-handle, .form-field.selected .field-drag-handle { color: #0c9b92; }
.field-resize-handle { position: absolute; top: 34px; right: -6px; width: 11px; height: calc(100% - 46px); min-height: 28px; border-radius: 999px; cursor: ew-resize; opacity: 0; background: linear-gradient(180deg, rgba(12, 155, 146, .18), rgba(12, 155, 146, .34)); box-shadow: inset 0 0 0 1px rgba(12, 155, 146, .3); transition: opacity .15s ease; }
.form-field:hover .field-resize-handle, .form-field.selected .field-resize-handle, .form-field.resizing .field-resize-handle { opacity: 1; }
.form-field.resizing { cursor: ew-resize; user-select: none; box-shadow: 0 0 0 2px rgba(12, 155, 146, .2), 0 10px 24px rgba(15, 36, 58, .12); }
.field-label { display: block; color: #12283d; font-size: 13px; font-weight: 700; margin-bottom: 9px; }
.field-preview { min-height: 38px; border: 1px solid #dce4eb; border-radius: 5px; background: #fff; color: #75879a; padding: 10px 12px; font-size: 12px; }
.preview-textarea { height: 90px; display: flex; align-items: flex-start; background: repeating-linear-gradient(#fafbfc, #fafbfc 27px, #edf2f6 28px); }
.preview-number, .preview-date, .preview-date-range, .preview-select { display: flex; align-items: center; gap: 8px; }
.preview-number span, .preview-date span, .preview-date-range span, .preview-select span { flex: 1; }
.preview-number b { width: 22px; height: 22px; border-radius: 4px; border: 1px solid #cfdbe4; display: inline-flex; align-items: center; justify-content: center; color: #51677c; font-weight: 600; }
.preview-date i, .preview-date-range i, .preview-select i { color: #6b7d90; font-style: normal; }
.preview-date i, .preview-select i { margin-left: auto; }
.preview-date-range span:last-child { text-align: right; }
.choice-preview { display: flex; flex-wrap: wrap; gap: 10px 16px; padding: 10px 2px 2px; color: #445970; font-size: 12px; }
.choice-preview span { display: inline-flex; align-items: center; gap: 6px; }
.choice-preview i { width: 13px; height: 13px; border: 1px solid #94a9bc; border-radius: 999px; background: white; box-shadow: inset 0 0 0 3px white; }
.checkbox-preview i { border-radius: 3px; }
.choice-preview.choice-style-checklist i,
.choice-preview.choice-style-checkCross i { width: auto; height: auto; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #0b6b65; font-style: normal; font-weight: 800; }
.table-preview-wrap { display: grid; gap: 8px; overflow-x: auto; }
.table-preview, .business-table, .key-value-table { width: 100%; border-collapse: collapse; table-layout: fixed; background: white; border: 1px solid #d5e0e8; border-radius: 8px; overflow: hidden; }
.table-preview th, .table-preview td, .business-table th, .business-table td, .key-value-table th, .key-value-table td { border: 1px solid #dbe5ec; padding: 9px 10px; min-height: 34px; text-align: left; vertical-align: middle; }
.table-preview th, .business-table th, .key-value-table th { background: #eef5f8; color: #253b50; font-size: 12px; font-weight: 700; }
.table-preview td { color: #536a7f; font-size: 12px; }
.table-preview td span { color: #a0adba; }
.table-preview-note { color: #7d8fa1; font-size: 11px; }
.business-table-wrap { display: grid; gap: 10px; overflow-x: auto; }
.business-table th { white-space: nowrap; }
.business-table td { padding: 0; background: white; }
.key-value-table-wrap { display: grid; gap: 8px; overflow-x: auto; }
.key-value-table th { width: 34%; color: #20384e; }
.key-value-table td { padding: 0; background: white; }
.preview-key-value-table td { padding: 10px 12px; color: #9aa8b5; }
.preview-key-value-table td span { color: #9aa8b5; }
.table-cell-input { width: 100%; min-width: 120px; border: 0; border-radius: 0; background: white; padding: 10px 12px; outline: none; font-size: 13px; }
.table-cell-input:focus { box-shadow: inset 0 0 0 1px var(--teal); background: #fbfdfe; }
.word-template-designer { display: grid; gap: 14px; }
.word-template-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border: 1px solid #d8e5ee; border-radius: 7px; background: #f7fbfd; color: #51677c; font-size: 12px; }
.word-template-note strong { color: #10283f; }
.word-template-table-wrap { overflow-x: auto; border: 1px solid #cfdce6; border-radius: 7px; background: white; }
.word-template-table { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 720px; }
.word-template-table td { border: 1px solid #cfdce6; height: 54px; min-height: 54px; padding: 10px 12px; color: #1f3348; font-size: 13px; line-height: 1.55; vertical-align: middle; white-space: normal; overflow-wrap: anywhere; }
.designer .word-template-table-wrap { overflow-x: visible; }
.designer .word-template-table { min-width: 0; }
.designer .word-template-table td { height: 48px; min-height: 48px; padding: 8px 10px; font-size: 12px; }
.word-template-label-cell { background: #f0f6f8; font-weight: 700; text-align: center; }
.word-template-static-cell { background: #fff; color: #22384d; }
.word-template-blank-cell { background: #fbfdfe; }
.word-template-input-cell { position: relative; background: #f9fcff; color: #0d5fa8; cursor: pointer; transition: background .15s ease, box-shadow .15s ease; }
.word-template-input-cell:hover { background: #eef8ff; box-shadow: inset 0 0 0 1px #87c6ff; }
.word-template-input-cell.drop-ready { background: #e5f6f3; box-shadow: inset 0 0 0 2px var(--teal); }
.word-template-input-cell span { display: block; color: #0d5fa8; font-weight: 700; }
.word-template-input-cell small { display: block; margin-top: 3px; color: #7a8fa3; font-size: 10px; }
.word-template-input-cell.selected { box-shadow: inset 0 0 0 2px #1188ff; background: #eaf5ff; }
.word-template-editable-cell { cursor: pointer; transition: background .15s ease, box-shadow .15s ease; }
.word-template-editable-cell:hover { background: #fffdf3; box-shadow: inset 0 0 0 1px #f1bf55; }
.word-template-editable-cell.selected { background: #fff8e7; box-shadow: inset 0 0 0 2px #f59e0b; }
.word-template-editable-cell.drop-ready { background: #e5f6f3; box-shadow: inset 0 0 0 2px var(--teal); }
.word-cell-add-hint { display: block; color: #92a5b8; font-size: 12px; text-align: center; }
.word-template-inline-cell-editor { width: 100%; min-width: 0; min-height: 40px; resize: vertical; border: 1px solid #f0b84b; border-radius: 5px; background: #fff; padding: 7px 8px; color: #1f3348; font: inherit; line-height: inherit; outline: none; }
.word-template-inline-cell-editor:focus { border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .16); }
.word-template-input-cell.editing { padding: 7px; }
.word-template-cell-editor { display: grid; gap: 5px; }
.word-template-cell-editor label { margin: 0; color: #506b84; font-size: 10px; font-weight: 700; }
.word-template-component-pill { justify-self: start; padding: 3px 7px; border-radius: 999px; background: #0b75d1; color: white; font-size: 10px; font-weight: 700; }
.word-template-design-input { width: 100%; min-width: 0; border: 1px solid #b8d3ea; border-radius: 5px; background: white; padding: 6px 7px; color: #12304a; outline: none; font-size: 12px; }
.word-template-design-input.muted { border-color: #d3e0ea; color: #536b7f; font-size: 11px; }
.word-template-design-input:focus { border-color: #1188ff; box-shadow: 0 0 0 3px rgba(17, 136, 255, .12); }
.word-template-cell-input { width: 100%; min-width: 0; border: 0; background: transparent; outline: none; color: #12283d; font-size: 13px; }
.word-template-cell-input::placeholder { color: #9aa8b5; }
.word-template-input-cell:focus-within { box-shadow: inset 0 0 0 2px var(--teal); background: #f4fbfa; }
.word-required-mark { position: absolute; z-index: 2; top: 2px; right: 5px; color: var(--red); font-size: 14px; font-style: normal; font-weight: 800; line-height: 1; }
.word-template-input-cell:has(.word-required-mark) { padding-right: 18px; }
.business-field-invalid { position: relative; outline: 3px solid rgba(220, 38, 38, .55); outline-offset: 2px; background-color: #fff6f6 !important; scroll-margin-block: 110px; }
.business-field-invalid .field-input,
.business-field-invalid .word-template-cell-input,
.business-field-invalid .choice-input-option,
.business-field-invalid .inline-signature-canvas { border-color: #dc2626 !important; }
.navigation-target-highlight { scroll-margin-top: 88px; animation: navigation-target-pulse 1.6s ease-out; }
@keyframes navigation-target-pulse {
  0%, 35% { box-shadow: 0 0 0 4px rgba(13, 148, 136, .28), 0 10px 28px rgba(15, 118, 110, .14); }
  100% { box-shadow: 0 0 0 0 rgba(13, 148, 136, 0); }
}
.date-range-inputs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 10px; width: 100%; }
.date-range-inputs label { display: grid; gap: 5px; min-width: 0; margin: 0; }
.date-range-inputs label span { color: #60758b; font-size: 11px; font-weight: 700; }
.date-range-inputs em { align-self: center; color: #60758b; font-style: normal; font-weight: 700; }
.word-template-input-cell .date-range-inputs { gap: 5px; }
.word-template-input-cell .date-range-inputs label span { font-size: 9px; }
.word-inline-choice-field { display: grid; gap: 8px; width: 100%; text-align: left; }
.word-inline-choice-field > strong { color: #20384e; font-size: 12px; }
.word-date-input-wrap { display: grid; gap: 5px; }
.word-date-input-wrap span { color: #7a8fa3; font-size: 11px; font-weight: 700; }
.word-cell-component { display: grid; gap: 4px; color: #1b5f9e; }
.word-cell-component strong { font-size: 12px; color: #0d5fa8; }
.word-cell-component small { margin: 0; color: #7a8fa3; font-size: 10px; }
.word-cell-component em { font-style: normal; color: #153d5f; font-size: 13px; font-weight: 700; letter-spacing: 0; }
.word-select-preview span { display: flex; align-items: center; justify-content: space-between; min-height: 28px; padding: 5px 8px; border: 1px solid #b8d3ea; border-radius: 5px; background: #fff; color: #1f3348; font-weight: 500; }
.word-select-preview span::after { content: "⌄"; color: #60758b; font-size: 11px; }
.word-choice-preview > div { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 5px 9px; max-width: 100%; }
.word-choice-preview span { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; color: #1f3348; font-size: 11px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.word-choice-preview i { width: 12px; height: 12px; border: 1px solid #7192ad; border-radius: 3px; background: #fff; }
.word-choice-preview.radio i { border-radius: 50%; }
.word-choice-preview.choice-style-checklist i,
.word-choice-preview.choice-style-checkCross i { width: auto; height: auto; border: 0; border-radius: 0; background: transparent; color: #0b6b65; font-style: normal; font-weight: 800; }
.word-cell-date { gap: 2px; }
.word-cell-signature { min-height: 42px; position: relative; }
.word-cell-signature i { display: block; height: 18px; border-bottom: 1px solid #7c91a4; }
.word-cell-textarea { min-height: 50px; background: repeating-linear-gradient(transparent, transparent 20px, rgba(136, 165, 190, .22) 21px); }
.word-template-cell-textarea-input { min-height: 58px; resize: vertical; }
.word-template-fill-hint { padding: 8px 10px; border: 1px dashed #8fb3c7; border-radius: 5px; background: #fbfdfe; color: #536b7f; font-size: 12px; text-align: center; }
.word-cell-checks { display: flex; flex-wrap: wrap; gap: 6px 10px; color: #24394e; font-size: 12px; }
.word-cell-checks label { display: inline-flex; align-items: center; gap: 4px; }
.choice-inputs { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.choice-inputs.choice-layout-stack { display: grid; grid-template-columns: 1fr; align-items: stretch; }
.choice-input-option { display: inline-flex; align-items: center; min-width: 0; }
.choice-input-option input { position: absolute; opacity: 0; pointer-events: none; }
.choice-input-option span { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 6px 10px; border: 1px solid #cfdce7; border-radius: 7px; background: #fff; color: #24394e; font-size: 12px; line-height: 1.35; cursor: pointer; overflow-wrap: anywhere; }
.choice-input-option.checked span { border-color: #0c9b92; background: #eafbf8; color: #075f58; box-shadow: inset 0 0 0 1px rgba(12, 155, 146, .12); }
.choice-input-option i { min-width: 14px; color: #0b6b65; font-style: normal; font-weight: 800; text-align: center; }
.choice-style-checkCross .choice-input-option span { min-width: 48px; justify-content: center; }
.choice-style-checkCross .choice-input-option i { font-size: 14px; }
.quick-option-row { display: flex; flex-wrap: wrap; gap: 7px; }
.layout-size-options.three-choice { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.word-form-field { grid-column: 1 / -1; }
.word-template-extra-fields { margin-top: 12px; background: #fff; }
.word-template-extra-before { margin-top: 0; margin-bottom: 12px; }
.word-template-extra-after { margin-top: 12px; }
.word-extra-title { display: none; }
.word-extra-empty { margin-top: 12px; padding: 14px; border: 1px dashed #b8cbd8; color: #7a8fa3; font-size: 12px; text-align: center; background: #fbfdfe; }
.word-extra-empty-before { margin-top: 0; margin-bottom: 12px; background: #f8fbff; }
.word-template-drop-zone { min-height: 46px; display: grid; grid-template-columns: max-content 1fr; align-items: center; gap: 10px; padding: 11px 14px; border: 1px dashed #b8cbd8; border-radius: 7px; background: linear-gradient(180deg, #fbfdff, #f6faff); color: #7890a5; font-size: 12px; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease; }
.word-template-drop-zone strong { color: #173a5a; font-size: 13px; }
.word-template-drop-before { margin-bottom: 12px; }
.word-template-drop-after { margin-top: 12px; }
.designer-dragging-component .word-template-drop-zone { border-color: #72b8df; background: #f0f8ff; box-shadow: inset 0 0 0 1px rgba(17, 121, 239, .08); }
.word-template-drop-zone.drop-ready { border-color: #0c9b92; background: #eafbf8; box-shadow: 0 0 0 3px rgba(12, 155, 146, .14), inset 0 0 0 1px rgba(12, 155, 146, .26); transform: translateY(-1px); }
.word-template-drop-zone.drop-ready strong { color: #087a72; }
.word-template-extra-fields .field-layout-grid { background: #fff; }
.word-template-extra-fields .form-field { margin: 0; padding: 12px 42px 12px 38px; border: 1px solid #111827; border-radius: 0; background: #fff; font-family: "SimSun", "Microsoft YaHei", sans-serif; }
.word-template-extra-fields .form-field:hover { background: #fbfdfe; }
.word-template-extra-fields .form-field.selected { background: #eef8ff; box-shadow: inset 0 0 0 2px #1188ff; }
.word-template-extra-fields .field-label { color: #111827; font-family: "SimHei", "Microsoft YaHei", sans-serif; font-size: 13px; margin-bottom: 8px; }
.word-template-extra-fields .field-preview,
.word-template-extra-fields .upload-preview,
.word-template-extra-fields .signature-preview { border-color: #111827; border-radius: 0; background: #fff; font-family: "SimSun", "Microsoft YaHei", sans-serif; }
.word-template-extra-fields .table-preview,
.word-template-extra-fields .key-value-table { border-color: #111827; border-radius: 0; }
.word-template-extra-fields .table-preview th,
.word-template-extra-fields .table-preview td,
.word-template-extra-fields .key-value-table th,
.word-template-extra-fields .key-value-table td { border-color: #111827; background: #fff; }
.word-form-extra-inputs { margin-top: 14px; padding-top: 14px; border-top: 1px solid #cfdce6; background: #fff; }
.word-form-extra-before { margin-top: 0; margin-bottom: 14px; padding-top: 0; padding-bottom: 14px; border-top: 0; border-bottom: 1px solid #cfdce6; }
.word-form-extra-after { margin-top: 14px; }
.word-form-extra-inputs .property-group label { font-family: "SimHei", "Microsoft YaHei", sans-serif; color: #111827; }
.word-form-extra-inputs .field-input,
.word-form-extra-inputs .business-table,
.word-form-extra-inputs .key-value-table { border-color: #111827; border-radius: 0; background: #fff; font-family: "SimSun", "Microsoft YaHei", sans-serif; }
.table-row-actions, .table-property-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mini-tool-button { border: 1px solid #cbd8e2; background: #f7fafb; color: #264257; border-radius: 6px; padding: 7px 10px; font-size: 12px; cursor: pointer; }
.mini-tool-button:hover { border-color: var(--teal); color: #08766f; background: #f2fbfa; }
.mini-tool-button.danger-soft:hover { border-color: #e3a0a6; color: #a33a46; background: #fff7f8; }
.upload-preview { min-height: 86px; border: 1px dashed #abc1d2; border-radius: 6px; background: #fbfdfe; color: #5f7488; display: grid; place-items: center; gap: 4px; padding: 12px; text-align: center; }
.upload-preview span { width: 32px; height: 24px; border: 2px solid #8fb3c7; border-radius: 4px; position: relative; }
.image-preview span::before { content: ""; position: absolute; left: 5px; bottom: 4px; width: 18px; height: 10px; background: linear-gradient(135deg, transparent 48%, #8fb3c7 50%); }
.attachment-preview span { width: 24px; height: 30px; border-radius: 3px; }
.attachment-preview span::before { content: ""; position: absolute; right: -2px; top: -2px; width: 9px; height: 9px; background: #fbfdfe; border-left: 2px solid #8fb3c7; border-bottom: 2px solid #8fb3c7; }
.upload-preview strong { font-size: 12px; color: #2c4054; }
.upload-preview small { font-size: 10px; color: #91a0ae; }
.signature-preview { height: 74px; border: 1px solid #d7e1e8; border-radius: 5px; background: #fff; position: relative; color: #8b9baa; padding: 10px; font-size: 11px; }
.signature-preview i { position: absolute; left: 16px; right: 16px; bottom: 17px; border-bottom: 1px solid #8396a8; }
.section-preview { display: flex; align-items: center; gap: 12px; color: #10283f; font-size: 15px; font-weight: 700; padding: 8px 0; }
.section-preview::before, .section-preview::after { content: ""; height: 1px; background: #d5e1e9; flex: 1; }
.section-preview::before { flex: .25; }
.field-kind-table, .field-kind-keyValueTable, .field-kind-image, .field-kind-attachment, .field-kind-signature { padding-bottom: 16px; }
.field-actions { position: absolute; right: 7px; top: 9px; display: grid; gap: 4px; }
.field-actions button { width: 24px; height: 24px; border: 0; background: white; color: #728196; }
.empty-canvas { color: #91a0ae; text-align: center; padding: 130px 20px; border: 1px dashed #cfd9e1; }
.property-group { margin-bottom: 16px; }
.property-group label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 7px; }
.required-mark { margin-left: 3px; color: var(--red); font-style: normal; }
.field-input { width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; outline: none; font-size: 13px; }
.property-section-title { margin: 18px 0 10px; padding-top: 14px; border-top: 1px solid var(--line); color: #10283f; font-size: 13px; font-weight: 700; }
.inspector-head { margin: -18px -18px 18px; padding: 18px; border-bottom: 1px solid #e3e9ef; background: #fbfcfd; }
.inspector-summary { margin-bottom: 18px; padding: 12px; border: 1px solid #dfe8ef; border-radius: 8px; background: linear-gradient(180deg, #f9fbfd, #f4f8fb); }
.inspector-summary strong { display: block; color: #10283f; font-size: 14px; }
.inspector-summary span { display: inline-block; margin-top: 7px; color: #0b68cf; background: #eaf4ff; border-radius: 4px; padding: 3px 7px; font-size: 11px; }
.format-preview-box { margin-bottom: 16px; padding: 11px 12px; border: 1px solid #d9e6ef; border-radius: 8px; background: #f8fbfd; }
.format-preview-box label { display: block; margin-bottom: 6px; color: #607489; font-size: 11px; }
.format-preview-box strong { display: block; color: #12304a; font-size: 13px; font-weight: 800; }
.format-preview-box small { display: block; margin-top: 5px; color: #7a8fa3; font-size: 11px; line-height: 1.5; }
.properties .field-input { background: #fff; }
.properties textarea.field-input { resize: vertical; min-height: 98px; line-height: 1.6; }
.layout-size-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.layout-size-button { border: 1px solid #d4e0e9; background: #fff; color: #294156; border-radius: 7px; padding: 8px 10px; font-size: 12px; font-weight: 700; cursor: pointer; }
.layout-size-button:hover { border-color: #79bdb7; background: #f4fbfa; color: #08766f; }
.layout-size-button.active { border-color: var(--teal); background: #e8f7f5; color: #08766f; box-shadow: inset 0 0 0 1px rgba(12, 155, 146, .12); }
.layout-size-button:disabled { cursor: not-allowed; opacity: .45; background: #f6f8fa; }
.checkbox-line { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.field-input.compact { min-width: 150px; padding: 6px 8px; }
.switch-line { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.table-actions { display: flex; gap: 7px; align-items: center; }
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 7px; background: #f8fafb; }
.check-grid label { display: flex; align-items: center; gap: 7px; padding: 7px; border-radius: 5px; background: white; color: #26394a; }
.check-grid small { color: var(--muted); margin-left: auto; }
.assignment-group-panel .panel-header small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 400; }
.assignment-group-users { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.assignment-person { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 11px 13px; border: 1px solid #dce6ec; border-radius: 10px; background: #f9fbfc; cursor: pointer; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.assignment-person:hover, .assignment-person.selected { border-color: #79bcb6; background: #eef8f6; box-shadow: 0 4px 14px rgba(29,126,119,.08); }
.assignment-person input { accent-color: var(--teal); }
.assignment-person span, .assignment-person strong, .assignment-person small { display: block; }
.assignment-person strong { color: #253c4d; font-size: 13px; }
.assignment-person small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.assignment-group-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 14px; }
.assignment-group-footer p { margin: 0; }
.assignment-preview { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 12px; margin-bottom: 16px; padding: 14px 16px; border: 1px solid #cfe5e2; border-radius: 11px; background: linear-gradient(135deg, #f2faf9, #f8fbfc); }
.assignment-preview > svg { width: 25px; height: 25px; padding: 8px; box-sizing: content-box; border-radius: 10px; background: #def2ef; color: var(--teal); }
.assignment-preview small, .assignment-preview strong, .assignment-preview p { display: block; }
.assignment-preview small { color: #668078; font-size: 10px; }
.assignment-preview strong { margin-top: 3px; color: #24443f; font-size: 14px; }
.assignment-preview p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.assignment-preview.blocked { border-color: #eed8b4; background: #fff9ef; }
.assignment-preview.blocked > svg { background: #f8e9cc; color: #a76b13; }
.assignment-preview.blocked strong { color: #80551b; }
.inspector-selection-card { margin: 0 0 14px; padding: 15px; border: 1px solid #cfe2e3; border-radius: 12px; background: linear-gradient(135deg, #f7fbfb, #f2f8f9); }
.inspector-selection-card > div:first-child { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.inspector-selection-card > div:first-child > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: #dff2f0; color: var(--teal); }
.inspector-selection-card svg { width: 18px; height: 18px; }
.inspector-selection-card p, .inspector-selection-card p strong, .inspector-selection-card p small { display: block; margin: 0; }
.inspector-selection-card p strong { color: #28444d; font-size: 13px; }
.inspector-selection-card p small, .inspector-selection-card > small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.inspector-selection-card > small { display: block; margin-top: 10px; }
.hint { color: var(--muted); font-size: 12px; }
.danger-text { color: var(--red); }
.form-status-grid { display: grid; gap: 10px; }
.form-status-card { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 7px; }
.form-status-card.complete { border-color: #a8d9d4; background: #f4fbfa; }
.form-status-card strong, .form-status-card small { display: block; }
.form-status-card small { color: var(--muted); margin-top: 4px; font-size: 11px; }
.form-number { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #e8eef3; color: #506174; font-weight: 700; }
.form-status-card.complete .form-number { background: var(--teal); color: white; }
.form-card-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.attachment-requirements,
.readonly-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.attachment-upload { display: grid; grid-template-columns: minmax(130px, 180px) minmax(180px, 1fr) auto; gap: 10px; align-items: center; margin-bottom: 14px; }
.attachment-upload-hint { grid-column: 2 / -1; }
.attachment-list { display: grid; gap: 8px; }
.attachment-item { display: block; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; color: #172536; text-decoration: none; background: white; }
.attachment-item small { display: block; margin-top: 4px; color: var(--muted); }
.node-workspace { overflow: hidden; }
.node-workspace-header { min-height: 74px; }
.node-workspace-header > div small { display: block; margin-bottom: 4px; color: var(--muted); font-size: 10px; }
.node-workspace-header > div h3 { margin: 0; font-size: 18px; }
.node-workspace-body { display: grid; gap: 18px; }
.node-overview-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid #dfe7ed; border-radius: 9px; background: #f8fafc; }
.node-overview-grid > div { min-width: 0; padding: 14px 16px; border-right: 1px solid #e2e9ee; }
.node-overview-grid > div:last-child { border-right: 0; }
.node-overview-grid span, .node-overview-grid strong { display: block; }
.node-overview-grid span { margin-bottom: 6px; color: var(--muted); font-size: 10px; }
.node-overview-grid strong { overflow: hidden; color: #20364a; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.node-guidance { display: flex; align-items: flex-start; gap: 11px; padding: 13px 15px; border-left: 3px solid #68a9c7; border-radius: 5px; background: #f0f7fb; color: #315972; }
.node-guidance > svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; }
.node-guidance strong { display: block; color: #24475e; font-size: 12px; }
.node-guidance p { margin: 3px 0 0; color: #587387; font-size: 11px; line-height: 1.65; }
.node-resource-section { padding: 16px; border: 1px solid #dfe7ed; border-radius: 9px; background: #fff; }
.node-section-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.node-section-title > div strong, .node-section-title > div small { display: block; }
.node-section-title > div strong { color: #1b3449; font-size: 14px; }
.node-section-title > div small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.node-section-title > span { flex: 0 0 auto; padding: 4px 8px; border-radius: 999px; background: #eef3f6; color: #647688; font-size: 10px; }
.node-section-title > span.complete { background: #e6f6f3; color: #087a71; }
.node-section-title > span.warning { background: #fff4df; color: #ad6810; }
.node-form-card { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 14px; border-radius: 8px; background: #f7fafc; }
.node-form-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 9px; background: #e4f4f2; color: #07857d; }
.node-form-icon svg { width: 24px; height: 24px; }
.node-form-copy { min-width: 0; }
.node-form-copy strong, .node-form-copy small { display: block; }
.node-form-copy strong { overflow: hidden; color: #17334a; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.node-form-copy small { margin-top: 5px; color: var(--muted); font-size: 10px; }
.node-form-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.side-task-summary { display: flex; align-items: center; gap: 12px; }
.side-task-summary p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.side-task-form-module { margin-top: 16px; padding-top: 16px; border-top: 1px solid #e4ebf0; }
.side-task-form-module .node-section-title { margin-bottom: 10px; }
.side-task-form-card { grid-template-columns: 40px minmax(0, 1fr); border: 1px solid #e0e9ef; background: linear-gradient(180deg, #f9fbfc, #f5f9fb); }
.side-task-form-card .node-form-icon { width: 40px; height: 40px; }
.side-task-form-card .node-form-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
.side-task-form-card .node-form-actions .button { justify-content: center; white-space: nowrap; }
.side-task-form-card .node-form-actions .button:first-child:nth-last-child(3) { grid-column: 1 / -1; }
.node-attachment-upload { margin: 14px 0; padding-top: 14px; border-top: 1px dashed #d6e1e8; }
.node-attachment-list { display: grid; gap: 8px; }
.node-attachment-list > a { display: grid; grid-template-columns: 34px minmax(0, 1fr) 18px; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #e0e8ee; border-radius: 7px; color: #1d3e56; text-decoration: none; }
.node-attachment-list > a:hover { border-color: #a8ced1; background: #f5fbfa; }
.node-attachment-list > a > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 7px; background: #edf5f8; color: #4c809d; }
.node-attachment-list svg { width: 17px; height: 17px; }
.node-attachment-list strong, .node-attachment-list small { display: block; }
.node-attachment-list strong { overflow-wrap: anywhere; font-size: 12px; }
.node-attachment-list small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.node-attachment-list > p { margin: 0; padding: 14px; border-radius: 7px; background: #f8fafb; color: var(--muted); font-size: 11px; text-align: center; }
.attachment-upload-status { grid-column: 1 / -1; display: grid; gap: 7px; padding: 10px 12px; border: 1px solid #cfe4e1; border-radius: 8px; background: #f4fbfa; }
.attachment-upload-status[hidden] { display: none; }
.attachment-upload-status > div { display: flex; justify-content: space-between; gap: 12px; color: #476879; font-size: 11px; }
.attachment-upload-status > div strong { color: #087d74; }
.attachment-upload-status > p { height: 6px; margin: 0; overflow: hidden; border-radius: 999px; background: #dcebe9; }
.attachment-upload-status > p i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #15998f, #39b9ae); transition: width .15s ease; }
.attachment-upload-status.failed { border-color: #efcfca; background: #fff8f6; }
.attachment-upload-status.failed > div strong { color: #b85249; }
.attachment-upload-status.failed > p i { background: #d96a60; }
.attachment-upload-status.warning { border-color: #ead8aa; background: #fffaf0; }
.attachment-upload-status.warning > div strong { color: #9b6b13; }
.attachment-upload-status.warning > p i { background: #d7a640; }
.attachment-upload-status > .button { justify-self: start; }
.attachment-record { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid #e0e8ee; border-radius: 9px; background: #fff; }
.attachment-record:hover { border-color: #b7d5d6; box-shadow: 0 4px 14px rgba(31, 75, 94, .06); }
.attachment-thumbnail, .attachment-file-icon { display: grid; place-items: center; width: 46px; height: 46px; overflow: hidden; border-radius: 8px; background: #edf5f8; color: #4c809d; }
.attachment-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.attachment-file-icon svg { width: 19px; height: 19px; }
.attachment-record-info { min-width: 0; }
.attachment-record-info strong, .attachment-record-info small { display: block; }
.attachment-record-info strong { overflow-wrap: anywhere; color: #1d3e56; font-size: 12px; }
.attachment-record-info small { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.attachment-record-actions { display: flex; gap: 6px; align-items: center; }
.attachment-record-actions .button { min-height: 30px; margin: 0; cursor: pointer; text-decoration: none; }
.attachment-record.recycled { margin-top: 8px; border-style: dashed; background: #fafbfc; opacity: .9; }
.attachment-recycle { margin-top: 14px; border-top: 1px solid #e7edf1; }
.attachment-recycle summary { padding: 12px 2px 4px; color: #6b7f8f; font-size: 11px; cursor: pointer; }
.attachment-recycle > div { display: grid; gap: 8px; }
.node-empty-material { display: flex; align-items: center; gap: 13px; padding: 18px; border: 1px dashed #cfdce5; border-radius: 9px; background: #fbfcfd; }
.node-empty-material > svg { width: 30px; height: 30px; color: #70a8a4; }
.node-empty-material strong, .node-empty-material p { display: block; }
.node-empty-material strong { color: #29465c; font-size: 13px; }
.node-empty-material p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.node-history-section { padding-top: 16px; border-top: 1px solid #e5ebef; }
.node-history-section ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.node-history-section li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 9px; align-items: flex-start; }
.node-history-section li > i { width: 8px; height: 8px; margin-top: 5px; border: 2px solid #fff; border-radius: 50%; background: #17978e; box-shadow: 0 0 0 1px #17978e; }
.node-history-section li strong, .node-history-section li small { display: block; }
.node-history-section li strong { color: #294157; font-size: 11px; }
.node-history-section li small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.preview-modal { width: calc(100vw - 40px); height: calc(100vh - 32px); max-width: 1540px; max-height: none; display: flex; flex-direction: column; border-radius: 14px; }
.preview-modal .modal-header { min-height: 70px; padding: 13px 20px; background: #fff; }
.preview-modal-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.preview-modal-title > span { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 10px; background: #e7f3f2; color: #087d75; }
.preview-modal-title svg { width: 22px; height: 22px; }
.preview-modal-title h3 { overflow: hidden; max-width: 60vw; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
.preview-modal .modal-header small { display: block; margin-top: 4px; color: var(--muted); }
.preview-close-button { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; padding: 0; border: 0; border-radius: 9px; background: #f1f4f6; color: #5c6c79; font-size: 25px; line-height: 1; }
.preview-close-button:hover { background: #e8edf0; color: #23394a; }
.preview-reader-toolbar { min-height: 46px; padding: 9px 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #d8e0e6; background: #f7f9fb; }
.preview-reader-toolbar > div { display: flex; align-items: center; gap: 8px; color: #344b5d; font-size: 12px; }
.preview-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #12a095; box-shadow: 0 0 0 4px rgba(18,160,149,.1); }
.preview-reader-toolbar p { display: flex; gap: 18px; margin: 0; color: #7b8994; font-size: 11px; }
.preview-reader-toolbar p span { position: relative; }
.preview-reader-toolbar p span + span::before { content: "·"; position: absolute; left: -11px; }
.preview-frame-wrap { flex: 1; min-height: 0; overflow: hidden; padding: 12px; background: #dfe5ea; }
.document-preview { display: block; width: 100%; height: 100%; border: 0; border-radius: 7px; background: #eef2f5; }
.preview-modal .modal-footer { min-height: 66px; padding: 10px 20px; background: #fff; }
.preview-footer-note { color: #7d8a94; font-size: 11px; }
.preview-footer-actions { display: flex; align-items: center; gap: 10px; }
.preview-footer-actions .button { min-height: 42px; }
.preview-footer-actions .button.primary { display: flex; align-items: center; gap: 7px; }
.preview-footer-actions svg { width: 16px; height: 16px; }
.signature-group { margin-top: 18px; }
#signature-pad { width: 100%; height: 150px; display: block; border: 1px dashed #9babb9; border-radius: 7px; background: #fff; touch-action: none; margin-bottom: 8px; }
.inline-signature-field { display: grid; gap: 7px; min-width: 0; margin: 0; }
.inline-signature-canvas { width: 100%; height: 132px; display: block; border: 1px dashed #8fb3c7; border-radius: 6px; background: #fff; touch-action: none; }
#signature-pad, .inline-signature-canvas { cursor: zoom-in; transition: border-color .18s ease, box-shadow .18s ease; }
#signature-pad:hover, #signature-pad:focus-visible, .inline-signature-canvas:hover, .inline-signature-canvas:focus-visible { outline: 0; border-color: #168f89; box-shadow: 0 0 0 3px rgba(22,143,137,.13); }
.inline-signature-field.compact { gap: 5px; }
.inline-signature-field.compact .inline-signature-canvas { height: 70px; min-width: 140px; border-color: #9db8cc; background: #fff; }
.inline-signature-clear { justify-self: start; font-size: 12px; }
.signature-field-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.signature-field-actions > span { color: #718496; font-size: 11px; }

.signature-editor-overlay { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 18px; background: rgba(8,24,39,.64); }
.signature-editor { width: min(980px, 100%); max-height: 96vh; display: flex; flex-direction: column; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 28px 80px rgba(0,0,0,.3); }
.signature-editor-header, .signature-editor-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 18px; }
.signature-editor-header { border-bottom: 1px solid #e1e8ec; }
.signature-editor-header h3, .signature-editor-header p { margin: 0; }
.signature-editor-header h3 { color: #173049; font-size: 18px; }
.signature-editor-header p { margin-top: 4px; color: var(--muted); font-size: 11px; }
.signature-editor-close { width: 38px; height: 38px; border: 0; border-radius: 50%; background: #f1f5f7; color: #4e6577; font-size: 24px; cursor: pointer; }
.signature-editor-body { min-height: 0; overflow: auto; padding: 18px; }
.signature-editor-body canvas { width: 100%; height: min(42vh, 360px); min-height: 230px; display: block; border: 2px solid #76aaa6; border-radius: 10px; background: #fff; touch-action: none; cursor: crosshair; }
.signature-editor-tools { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.signature-privacy-note { margin: 12px 0 0; color: #6c7e8d; font-size: 11px; line-height: 1.6; }
.signature-editor-footer { justify-content: flex-end; border-top: 1px solid #e1e8ec; }

.modal-backdrop { position: fixed; inset: 0; background: rgba(7,21,36,.45); z-index: 50; display: grid; place-items: center; padding: 20px; }
.modal { width: min(560px, 100%); max-height: min(92vh, 980px); background: white; border-radius: 10px; box-shadow: 0 24px 70px rgba(0,0,0,.2); display: flex; flex-direction: column; overflow: hidden; }
.modal-header, .modal-footer { padding: 17px 20px; display: flex; align-items: center; justify-content: space-between; }
.modal-header { border-bottom: 1px solid var(--line); }
.modal-header h3 { margin: 0; font-size: 16px; }
.modal-body { padding: 20px; overflow: auto; min-height: 0; }
.modal-footer { border-top: 1px solid var(--line); justify-content: flex-end; gap: 10px; }
.modal-action-submit-new-order,
.modal-action-submit-business-form { width: min(1500px, calc(100vw - 36px)); height: min(940px, calc(100vh - 36px)); max-height: calc(100vh - 36px); }
.modal-action-submit-new-order .modal-header,
.modal-action-submit-business-form .modal-header { padding: 18px 24px; }
.modal-action-submit-new-order .modal-body,
.modal-action-submit-business-form .modal-body { padding: 24px; background: #f5f8fb; }
.modal-action-submit-new-order .modal-footer,
.modal-action-submit-business-form .modal-footer { padding: 16px 24px; background: #fff; }
.new-order-business-form { display: block; }
.modal-action-submit-new-order .word-form-field,
.modal-action-submit-business-form .word-form-field { margin-bottom: 0; }
.modal-action-submit-new-order .word-template-table-wrap,
.modal-action-submit-business-form .word-template-table-wrap { border-color: #bfd0dc; box-shadow: 0 10px 28px rgba(15, 36, 58, .08); }
.modal-action-submit-new-order .word-template-table,
.modal-action-submit-business-form .word-template-table { min-width: 1080px; }
.new-order-business-form + .property-group { margin-top: 18px; padding: 16px; border: 1px solid #dbe5ec; border-radius: 8px; background: #fff; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.business-layout-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.business-layout-item { grid-column: span var(--field-span, 12); min-width: 0; }

.toast { position: fixed; right: 24px; bottom: 24px; z-index: 80; pointer-events: none; background: #10283f; color: white; padding: 12px 16px; border-radius: 7px; font-size: 13px; box-shadow: 0 12px 30px rgba(0,0,0,.2); }

.ledger-overview .panel-header > div small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.ledger-status-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 18px 20px; }
.ledger-status-card { min-width: 0; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 12px; padding: 15px; border: 1px solid #e0e7ed; border-radius: 9px; background: #fbfdff; }
.ledger-status-card > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; }
.ledger-status-card > span svg { width: 23px; height: 23px; }
.ledger-status-card.tone-blue > span, .ledger-status-card.tone-sky > span { background: #e8f2ff; color: #1477db; }
.ledger-status-card.tone-teal > span { background: #e7f8f6; color: #0b918a; }
.ledger-status-card.tone-amber > span { background: #fff2df; color: #e58300; }
.ledger-status-card small, .ledger-status-card strong, .ledger-status-card p { display: block; }
.ledger-status-card small { color: #748497; font-size: 10px; }
.ledger-status-card strong { margin-top: 4px; color: #193149; font-size: 17px; }
.ledger-status-card p { margin: 4px 0 0; color: #8996a3; font-size: 9px; line-height: 1.45; }
.ledger-management-note { display: flex; align-items: flex-start; gap: 10px; margin: 0 20px 18px; padding: 12px 14px; border: 1px solid #d9e8f2; border-radius: 8px; background: #f5faff; color: #5d7184; font-size: 11px; line-height: 1.65; }
.ledger-management-note svg { width: 20px; height: 20px; flex: 0 0 20px; color: #1474cf; }
.ledger-management-note strong { margin-right: 8px; color: #25425d; }
.ledger-member-summary { display: grid; grid-template-columns: minmax(190px, 1.15fr) repeat(3, minmax(140px, 1fr)); align-items: stretch; }
.ledger-total, .ledger-summary-detail { min-width: 0; padding: 21px 24px; border-right: 1px solid #e6ebef; }
.ledger-member-summary > :last-child { border-right: 0; }
.ledger-total > span, .ledger-summary-detail > span { display: block; color: #748497; font-size: 11px; }
.ledger-total p { margin: 7px 0 5px; }
.ledger-total p strong { color: #153451; font-size: 30px; line-height: 1; }
.ledger-total p em { margin-left: 6px; color: #68798b; font-size: 11px; font-style: normal; }
.ledger-total small { color: #91a0ae; font-size: 10px; }
.ledger-summary-detail { display: flex; flex-direction: column; justify-content: center; }
.ledger-summary-detail strong { margin-top: 9px; overflow: hidden; color: #263e55; font-size: 13px; line-height: 1.5; text-overflow: ellipsis; }

.nav-icon svg, .brand-symbol svg, .topbar svg, .sidebar-footer svg { width: 22px; height: 22px; display: block; }

@media (min-width: 621px) {
  body { background: #f4f7fb; }
  .app-shell { grid-template-columns: 250px minmax(0, 1fr); transition: grid-template-columns .2s ease; }
  .sidebar { width: 250px; padding: 18px 10px 16px; background: linear-gradient(180deg, #062a50 0%, #07345f 55%, #062b52 100%); box-shadow: 5px 0 22px rgba(5, 31, 58, .12); transition: width .2s ease; }
  .brand { min-height: 58px; gap: 11px; padding: 0 10px 18px; }
  .brand-symbol { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 10px; background: linear-gradient(145deg, #0b70a0, #0e9aa2); box-shadow: 0 8px 20px rgba(3, 27, 52, .25); }
  .brand-symbol svg { width: 27px; height: 27px; }
  .brand strong { font-size: 17px; letter-spacing: .02em; white-space: nowrap; }
  .brand small { margin-top: 3px; color: #8fb8d5; }
  .nav { gap: 5px; }
  .nav button { min-height: 52px; gap: 14px; padding: 0 15px; border-radius: 7px; color: #d6e6f3; font-size: 15px; font-weight: 700; }
  .nav button:hover { background: rgba(13, 120, 158, .28); color: #fff; }
  .nav button.active { background: linear-gradient(90deg, #087492, #08627f); box-shadow: inset 4px 0 #24d4d0, 0 8px 20px rgba(2, 24, 48, .18); color: white; }
  .nav-icon { width: 24px; display: grid; place-items: center; }
  .nav-icon svg { width: 23px; height: 23px; stroke-width: 1.9; }
  .sidebar-footer { min-height: 58px; display: flex; align-items: center; gap: 11px; padding: 15px 10px 0; color: #e8f3fb; }
  .sidebar-company-icon { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(36, 135, 184, .35); color: #dff6ff; }
  .sidebar-company-icon svg { width: 19px; height: 19px; }
  .sidebar-footer strong, .sidebar-footer small { display: block; }
  .sidebar-footer strong { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
  .sidebar-footer small { margin-top: 3px; color: #86a8c3; font-size: 10px; }
  .main { grid-column: 2; }
  .app-shell.sidebar-collapsed { grid-template-columns: 76px minmax(0, 1fr); }
  .app-shell.sidebar-collapsed .sidebar { width: 76px; padding-inline: 9px; }
  .app-shell.sidebar-collapsed .brand { justify-content: center; padding-inline: 0; }
  .app-shell.sidebar-collapsed .brand > div:last-child,
  .app-shell.sidebar-collapsed .nav-label,
  .app-shell.sidebar-collapsed .sidebar-footer > div { display: none; }
  .app-shell.sidebar-collapsed .nav button { justify-content: center; padding-inline: 0; }
  .app-shell.sidebar-collapsed .sidebar-footer { justify-content: center; padding-inline: 0; }
  .topbar { height: 72px; padding: 0 26px; gap: 24px; box-shadow: 0 1px 5px rgba(29, 53, 76, .04); }
  .topbar-title { min-width: 290px; display: flex; align-items: center; gap: 19px; }
  .topbar-title h1 { font-size: 20px; white-space: nowrap; }
  .topbar-menu { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: #172536; }
  .topbar-menu:hover { background: #eff4f8; }
  .global-search { width: min(480px, 38vw); height: 40px; display: flex; align-items: center; margin-left: auto; overflow: hidden; border: 1px solid #d8e1e9; border-radius: 7px; background: #fff; }
  .global-search:focus-within { border-color: #70aee8; box-shadow: 0 0 0 3px rgba(29, 120, 225, .1); }
  .global-search input { flex: 1; min-width: 0; height: 100%; padding: 0 14px; border: 0; outline: 0; color: #273b4f; font-size: 13px; }
  .global-search input::placeholder { color: #9aa8b5; }
  .global-search button { width: 43px; height: 100%; display: grid; place-items: center; border: 0; background: transparent; color: #2a3e52; }
  .global-search svg { width: 19px; height: 19px; }
  .top-actions { gap: 15px; }
  .notification-button { position: relative; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #21374a; }
  .notification-button:hover { background: #f0f4f8; }
  .notification-button b { position: absolute; top: -1px; right: -1px; min-width: 17px; height: 17px; padding: 0 4px; display: grid; place-items: center; border: 2px solid white; border-radius: 999px; background: #ed3b45; color: white; font-size: 9px; }
  .user-chip { gap: 10px; }
  .user-chip .avatar { width: 40px; height: 40px; background: linear-gradient(145deg, #d9edff, #c8e2f5); color: #0b5f9a; }
  .user-chip span strong, .user-chip span small { display: block; }
  .user-chip span strong { color: #26394b; font-size: 13px; }
  .user-chip span small { margin-top: 2px; color: #8795a4; font-size: 10px; }
  .content { max-width: none; padding: 18px 22px 32px; }
  .panel { border-color: #e0e6ec; border-radius: 9px; box-shadow: 0 3px 13px rgba(31, 58, 82, .04); overflow: hidden; }
  .dashboard-welcome { min-height: 43px; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
  .dashboard-welcome h2 { margin: 0; color: #14273a; font-size: 19px; }
  .dashboard-welcome p { margin: 4px 0 0; color: #78899a; font-size: 12px; }
  .dashboard-create { padding-inline: 17px; background: #087e9d !important; border-color: #087e9d !important; box-shadow: 0 5px 14px rgba(8, 126, 157, .17); }
  .dashboard-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
  .dashboard-metric-card { width: 100%; min-height: 112px; display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 17px; padding: 16px; border: 1px solid #dfe5eb; border-radius: 9px; background: #fff; box-shadow: 0 3px 13px rgba(31, 58, 82, .04); color: inherit; font: inherit; text-align: left; cursor: pointer; appearance: none; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
  .dashboard-metric-card:hover { transform: translateY(-2px); border-color: #b9cedf; box-shadow: 0 9px 22px rgba(31, 58, 82, .1); }
  .dashboard-metric-card:focus-visible { outline: 3px solid rgba(20, 121, 237, .22); outline-offset: 2px; border-color: #1479ed; }
  .dashboard-metric-card:active { transform: translateY(0); }
  .dashboard-metric-icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 11px; }
  .dashboard-metric-icon svg { width: 39px; height: 39px; }
  .dashboard-metric-card.tone-blue .dashboard-metric-icon { background: #e7f1ff; color: #146fd6; }
  .dashboard-metric-card.tone-teal .dashboard-metric-icon { background: #e5f8f7; color: #0c9a98; }
  .dashboard-metric-card.tone-amber .dashboard-metric-icon { background: #fff3dc; color: #f08c00; }
  .dashboard-metric-card.tone-sky .dashboard-metric-icon { background: #e8f3ff; color: #1677d2; }
  .dashboard-metric-card > div > span { color: #33475a; font-size: 13px; }
  .dashboard-metric-card p { margin: 3px 0 2px; }
  .dashboard-metric-card p strong { color: #121b26; font-size: 31px; line-height: 1; font-variant-numeric: tabular-nums; }
  .dashboard-metric-card p em { margin-left: 7px; color: #5d6d7d; font-size: 12px; font-style: normal; }
  .dashboard-metric-card small { color: #8a98a6; font-size: 10px; }
  .dashboard-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
  .dashboard-main-stack, .dashboard-side-stack { display: grid; gap: 18px; }
  .dashboard-section-head { min-height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid #e7ebef; }
  .dashboard-section-head h3 { display: flex; align-items: center; gap: 10px; margin: 0; color: #1b2c3d; font-size: 16px; }
  .dashboard-section-head h3::before { content: ""; width: 4px; height: 18px; border-radius: 4px; background: #1479ed; }
  .dashboard-more { display: inline-flex; align-items: center; gap: 3px; border: 0; background: transparent; color: #778797; font-size: 12px; }
  .dashboard-more:hover { color: #126fcf; }
  .dashboard-more svg { width: 14px; height: 14px; }
  .dashboard-tabs { display: flex; gap: 7px; padding: 10px 14px; border-bottom: 1px solid #edf0f3; }
  .dashboard-tabs button { min-width: 74px; padding: 7px 11px; border: 1px solid #dce3e9; border-radius: 5px; background: #fff; color: #576879; font-size: 12px; }
  .dashboard-tabs button span { margin-left: 4px; color: #8997a5; }
  .dashboard-tabs button.active { border-color: #1376e5; background: #1376e5; color: #fff; box-shadow: 0 4px 10px rgba(19, 118, 229, .2); }
  .dashboard-tabs button.active span { color: #fff; }
  .dashboard-task-table { min-height: 248px; }
  .dashboard-task-table table { font-size: 12px; }
  .dashboard-task-table th { color: #405164; background: #f4f7fa; font-size: 11px; }
  .dashboard-task-table th, .dashboard-task-table td { padding: 10px 13px; }
  .dashboard-task-table tr:last-child td { border-bottom: 0; }
  .dashboard-task-table th:nth-child(1) { width: 15%; }
  .dashboard-task-table th:nth-child(2) { width: 27%; }
  .dashboard-task-table th:nth-child(3) { width: 13%; }
  .dashboard-task-table th:nth-child(4) { width: 17%; }
  .dashboard-task-table th:nth-child(5) { width: 18%; }
  .dashboard-order-link, .dashboard-enter { border: 0; background: transparent; color: #116fd6; font-size: 12px; }
  .dashboard-order-link { padding: 0; font-variant-numeric: tabular-nums; }
  .dashboard-enter { padding: 5px 8px; border-radius: 4px; }
  .dashboard-enter:hover { background: #edf5ff; }
  .dashboard-client-cell strong, .dashboard-client-cell small { display: block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dashboard-client-cell strong { color: #293b4d; font-size: 12px; }
  .dashboard-client-cell small { margin-top: 3px; color: #8b98a6; font-size: 10px; }
  .dashboard-kind, .dashboard-node { display: inline-block; padding: 4px 8px; border-radius: 4px; font-size: 11px; }
  .dashboard-kind.kind-main { background: #eaf3ff; color: #126dce; }
  .dashboard-kind.kind-independent { background: #e8f8f6; color: #087f77; }
  .dashboard-kind.kind-return { background: #fff2df; color: #b66a00; }
  .dashboard-node { background: #edf7ff; color: #0f72c6; }
  .dashboard-priority-list { display: grid; padding: 5px 12px 10px; }
  .dashboard-priority-task { width: 100%; min-height: 84px; display: grid; grid-template-columns: 38px minmax(0, 1fr) 16px; align-items: center; gap: 10px; padding: 10px 2px; border: 0; border-bottom: 1px solid #edf1f4; background: transparent; color: inherit; text-align: left; }
  .dashboard-priority-task:last-child { border-bottom: 0; }
  .dashboard-priority-task:hover { background: #f8fafc; }
  .dashboard-priority-task:focus-visible { outline: 3px solid rgba(20, 121, 237, .18); outline-offset: 1px; border-radius: 7px; }
  .dashboard-priority-task > svg { width: 15px; height: 15px; color: #9aa6b2; }
  .dashboard-priority-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; }
  .dashboard-priority-icon svg { width: 21px; height: 21px; }
  .dashboard-priority-icon.kind-main { background: #e8f2ff; color: #1478df; }
  .dashboard-priority-icon.kind-independent { background: #e6f7f6; color: #0b9390; }
  .dashboard-priority-icon.kind-return { background: #fff1dd; color: #f07d00; }
  .dashboard-priority-copy { min-width: 0; }
  .dashboard-priority-copy > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .dashboard-priority-copy time { color: #9aa6b2; font-size: 9px; white-space: nowrap; }
  .dashboard-priority-copy strong, .dashboard-priority-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dashboard-priority-copy strong { margin-top: 6px; color: #24384a; font-size: 12px; }
  .dashboard-priority-copy small { margin-top: 5px; color: #8b98a5; font-size: 10px; }
  .dashboard-priority-copy small b { color: #52697d; font-weight: 700; }
  .dashboard-priority-copy .dashboard-kind { padding: 3px 7px; font-size: 9px; }
  .dashboard-priority-empty { min-height: 218px; display: grid; place-items: center; align-content: center; gap: 7px; color: #98a5b1; text-align: center; }
  .dashboard-priority-empty > span { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: #edf7f6; color: #14938a; }
  .dashboard-priority-empty svg { width: 25px; height: 25px; }
  .dashboard-priority-empty strong { color: #4e6274; font-size: 12px; }
  .dashboard-priority-empty small { font-size: 10px; }
  .dashboard-activity-list { padding: 9px 14px 13px; }
  .dashboard-activity-item { position: relative; width: 100%; min-height: 62px; display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 8px; padding: 9px 0; border: 0; border-bottom: 1px solid #edf1f4; background: transparent; color: inherit; text-align: left; }
  .dashboard-activity-item:last-child { border-bottom: 0; }
  button.dashboard-activity-item:hover { background: #f8fafc; }
  .dashboard-activity-item > i { width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: #8794a1; }
  .dashboard-activity-item > i.tone-blue { background: #1676dc; }
  .dashboard-activity-item > i.tone-teal { background: #15936b; }
  .dashboard-activity-item span strong, .dashboard-activity-item span small { display: block; }
  .dashboard-activity-item span strong { color: #344556; font-size: 11px; line-height: 1.45; }
  .dashboard-activity-item span small { margin-top: 4px; color: #8b98a5; font-size: 10px; }
  .dashboard-activity-item time { color: #9aa6b2; font-size: 9px; white-space: nowrap; }
  .dashboard-empty { padding: 30px 10px; color: #8a98a6; font-size: 12px; text-align: center; }
  .dashboard-flow-meta { display: flex; flex-wrap: wrap; gap: 8px 26px; padding: 13px 16px 4px; color: #647587; font-size: 11px; }
  .dashboard-flow-meta strong { color: #2c3e50; }
  .dashboard-flow-meta strong.active { color: #1275df; }
  .dashboard-flow-scroll { overflow-x: auto; padding: 15px 12px 8px; }
  .dashboard-flow-steps { min-width: max-content; display: flex; }
  .dashboard-flow-step { position: relative; width: 118px; color: #8c98a5; text-align: center; }
  .dashboard-flow-step::after { content: ""; position: absolute; top: 24px; left: calc(50% + 27px); width: calc(100% - 54px); height: 2px; background: #d8dee4; }
  .dashboard-flow-step:last-child::after { display: none; }
  .dashboard-flow-marker { position: relative; z-index: 2; width: 50px; height: 50px; display: grid; place-items: center; margin: 0 auto 9px; border: 3px solid #cbd2d9; border-radius: 50%; background: #fff; color: #9ba5ae; font-size: 14px; font-weight: 800; }
  .dashboard-flow-step.complete::after { background: #10a39f; }
  .dashboard-flow-step.complete .dashboard-flow-marker { border-color: #10a39f; color: #07918d; background: #edfbfa; }
  .dashboard-flow-step.active .dashboard-flow-marker { border-color: #1478e9; color: #1478e9; background: #edf5ff; box-shadow: 0 0 0 5px rgba(20, 120, 233, .08); }
  .dashboard-flow-step.complete strong { color: #1a5f60; }
  .dashboard-flow-step.active strong { color: #146fce; }
  .dashboard-flow-step strong, .dashboard-flow-step small { display: block; }
  .dashboard-flow-step strong { min-height: 32px; padding: 0 4px; color: #566676; font-size: 11px; line-height: 1.35; }
  .dashboard-flow-step small { margin-top: 3px; color: #97a2ad; font-size: 9px; }
  .dashboard-flow-legend { display: flex; gap: 25px; padding: 8px 18px 14px; color: #677888; font-size: 10px; }
  .dashboard-flow-legend span { display: inline-flex; align-items: center; gap: 7px; }
  .dashboard-flow-legend span::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #c8d0d7; }
  .dashboard-flow-legend span.complete::before { background: #10a39f; }
  .dashboard-flow-legend span.active::before { background: #1478e9; }
}

@media (min-width: 621px) and (max-width: 1250px) {
  .dashboard-workspace { grid-template-columns: 1fr; }
  .dashboard-side-stack { grid-template-columns: 1fr 1fr; }
  .global-search { width: min(360px, 32vw); }
  .topbar-title { min-width: 230px; }
}

@media (max-width: 980px) {
  .app-shell { grid-template-columns: 72px 1fr; }
  .sidebar { width: 72px; padding: 20px 10px; }
  .brand { padding-inline: 7px; }
  .brand div:last-child, .nav-label, .sidebar-footer { display: none; }
  .nav button { justify-content: center; padding: 12px; }
  .main { grid-column: 2; }
  .dashboard-grid, .detail-grid { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .ledger-status-grid { grid-template-columns: 1fr 1fr; }
  .ledger-member-summary { grid-template-columns: 1fr 1fr; }
  .ledger-member-summary > * { border-bottom: 1px solid #e6ebef; }
  .ledger-member-summary > :nth-child(2n) { border-right: 0; }
  .ledger-member-summary > :nth-last-child(-n+2) { border-bottom: 0; }
  .metric:nth-child(2) { border-right: 0; }
  .metric:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .designer-topbar { grid-template-columns: 1fr; height: auto; padding: 12px; gap: 12px; }
  .designer-tabs { height: 38px; overflow-x: auto; }
  .designer-toolbar { justify-content: flex-start; }
  .designer { height: auto; min-height: 0; grid-template-columns: 180px 1fr; }
  .designer .properties { grid-column: 1 / -1; border-top: 1px solid var(--line); position: static; max-height: none; overflow: visible; }
  .canvas { padding: 20px; }
  .preview-reader-toolbar p span:nth-child(3) { display: none; }
  .node-overview-grid { grid-template-columns: 1fr 1fr; }
  .node-overview-grid > div:nth-child(2n) { border-right: 0; }
  .node-overview-grid > div:nth-child(-n+2) { border-bottom: 1px solid #e2e9ee; }
  .node-form-card { grid-template-columns: 46px minmax(0, 1fr); }
  .node-form-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

@media (max-width: 760px) {
  .content { padding: 12px 10px 18px; }
  .designer-page { margin: 0; min-height: 0; border-radius: 8px; overflow: visible; }
  .designer-topbar { grid-template-columns: 1fr; height: auto; padding: 10px; gap: 10px; }
  .designer-titlebar h2 { max-width: none; white-space: normal; font-size: 15px; }
  .designer-tabs { height: 36px; gap: 18px; overflow-x: auto; }
  .designer-toolbar { justify-content: flex-start; flex-wrap: wrap; }
  .designer { display: grid; grid-template-columns: 1fr; height: auto; min-height: 0; }
  .designer-column { border-right: 0; border-bottom: 1px solid var(--line); padding: 12px; overflow: visible; }
  .designer .properties { grid-column: auto; border-top: 0; box-shadow: none; position: static; max-height: none; overflow: visible; }
  .designer-column-head, .inspector-head { margin-bottom: 10px; }
  .component-library { position: sticky; top: 58px; z-index: 7; max-height: 34vh; overflow-y: auto; box-shadow: 0 8px 20px rgba(15, 35, 55, .08); }
  .control-group { margin-bottom: 10px; }
  .control-list { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
  .control-item { flex: 0 0 104px; min-height: 42px; padding: 8px; }
  .canvas { padding: 10px; overflow: visible; }
  .canvas-ruler { display: none; }
  .form-sheet { width: 100%; min-width: 0; min-height: 520px; margin-bottom: 12px; padding: 14px 10px; border-radius: 8px; box-shadow: none; }
  .form-sheet-title { font-size: 18px; }
  .form-sheet-subtitle { margin-bottom: 16px; font-size: 12px; }
  .designer .word-template-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .designer .word-template-table { min-width: 720px; }
  .word-template-table td { padding: 7px 6px; font-size: 11px; line-height: 1.45; }
  .word-template-drop-zone { grid-template-columns: 1fr; gap: 4px; padding: 10px; }
  .layout-size-options { grid-template-columns: 1fr 1fr; }
}

.user-chip-button { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; }
.user-chip-button:hover .avatar { box-shadow: 0 0 0 3px rgba(20, 143, 134, .12); }
.login-form { width: min(410px, 100%); padding: 40px; border: 1px solid rgba(191, 207, 216, .72); border-radius: 20px; background: rgba(255,255,255,.94); box-shadow: 0 24px 70px rgba(20, 50, 70, .12); backdrop-filter: blur(10px); }
.login-title > small { margin: 0 0 9px; color: #168b93; font-size: 12px; font-weight: 750; letter-spacing: .08em; text-align: left; }
.login-form .property-group { margin-top: 20px; }
.login-form .property-group > label, .login-password-head label { color: #4c6273; font-size: 12px; font-weight: 650; }
.login-field { display: flex; align-items: center; height: 50px; margin-top: 8px; padding: 0 14px; border: 1px solid #d6e1e7; border-radius: 11px; background: #f8fafb; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.login-field:focus-within { border-color: #4ea5a8; background: #fff; box-shadow: 0 0 0 4px rgba(42, 155, 158, .1); }
.login-field > svg { flex: 0 0 auto; width: 18px; height: 18px; margin-right: 11px; color: #7893a3; }
.login-form .login-field .field-input { width: 100%; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; box-shadow: none; color: #173044; }
.login-form .login-field .field-input::placeholder { color: #9baab4; }
.login-field.login-field-invalid { border-color: #d8676d; background: #fff8f8; box-shadow: 0 0 0 4px rgba(216,103,109,.1); }
.login-password-control { position: relative; flex: 1 1 auto; min-width: 0; height: 100%; }
.login-password-control .login-password-input { position: relative; z-index: 1; }
.login-credential-input[type="password"]::-ms-reveal,
.login-credential-input[type="password"]::-ms-clear { display: none; }
.login-password-toggle { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; margin-left: 8px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: #6d8797; }
.login-password-toggle:hover, .login-password-toggle:focus-visible { background: #dff0f1; color: #137b82; outline: none; }
.login-password-toggle svg { width: 18px; height: 18px; }
.login-password-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0; }
.login-password-head label { margin: 0; }
.login-password-head button { padding: 2px 0; border: 0; background: transparent; color: #278b9d; font-size: 12px; }
.login-password-head button:hover { color: #087a78; }
.login-button { display: flex; height: 50px; align-items: center; justify-content: center; gap: 8px; margin-top: 28px; border: 0; border-radius: 11px; background: linear-gradient(110deg, #0c9188, #168fa2); font-size: 14px; box-shadow: 0 12px 24px rgba(13, 143, 134, .2); }
.login-button:hover { filter: brightness(1.04); transform: translateY(-1px); }
.login-button svg { width: 16px; height: 16px; }
.login-recovery-card > div:nth-child(2) { text-align: center; }
.login-recovery-icon { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 18px; border-radius: 16px; background: #e7f1f6; color: #4c91b5; }
.login-recovery-icon svg { width: 28px; height: 28px; }
.login-recovery-steps { display: grid; gap: 0; margin-top: 24px; border: 1px solid #e5eaee; border-radius: 12px; }
.login-recovery-steps p { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 1px 10px; margin: 0; padding: 14px; border-bottom: 1px solid #edf1f4; }
.login-recovery-steps p:last-child { border-bottom: 0; }
.login-recovery-steps p > span { grid-row: 1 / 3; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #e8f2f7; color: #4c91b5; font-size: 12px; font-weight: 800; }
.login-recovery-steps strong { color: #2f4352; font-size: 13px; }
.login-recovery-steps small { margin: 3px 0 0; color: #7d8b96; font-size: 11px; line-height: 1.5; text-align: left; }
.login-security-note { display: flex; gap: 9px; margin-top: 16px; padding: 11px 12px; border-radius: 9px; background: #f2f7fa; color: #607684; font-size: 11px; line-height: 1.55; }
.login-security-note svg { flex: 0 0 auto; width: 17px; color: #4c91b5; }
.mobile-profile-page { display: grid; gap: 16px; width: min(820px, 100%); margin: 0 auto; }
.mobile-profile-card { display: grid; grid-template-columns: 72px minmax(0,1fr); align-items: center; gap: 18px; padding: 26px; border: 1px solid #e0e7ec; border-radius: 16px; background: #fff; box-shadow: 0 7px 24px rgba(24, 53, 75, .06); }
.mobile-profile-avatar { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: #e4f0f6; color: #4388ad; font-size: 25px; font-weight: 750; }
.mobile-profile-card h2 { margin: 0; color: #293a47; }
.mobile-profile-card > div:nth-child(2) p { margin: 5px 0 0; color: #7d8992; }
.mobile-profile-details { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); margin-top: 4px; padding-top: 18px; border-top: 1px dashed #e0e6ea; }
.mobile-profile-details p { margin: 0; padding: 0 18px; border-right: 1px solid #edf0f2; }
.mobile-profile-details p:first-child { padding-left: 0; }
.mobile-profile-details p:last-child { padding-right: 0; border-right: 0; }
.mobile-profile-details span, .mobile-profile-details strong { display: block; }
.mobile-profile-details span { color: #8b969e; font-size: 11px; }
.mobile-profile-details strong { margin-top: 5px; color: #415867; font-size: 13px; overflow-wrap: anywhere; }
.mobile-profile-menu { overflow: hidden; border: 1px solid #e0e7ec; border-radius: 16px; background: #fff; box-shadow: 0 7px 24px rgba(24, 53, 75, .05); }
.mobile-profile-menu button { display: grid; grid-template-columns: 38px minmax(0,1fr) auto 20px; align-items: center; gap: 12px; width: 100%; min-height: 62px; padding: 10px 18px; border: 0; border-bottom: 1px solid #edf0f3; background: #fff; text-align: left; }
.mobile-profile-menu button:last-child { border-bottom: 0; }
.mobile-profile-menu button > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; }
.mobile-profile-menu button > span svg { width: 19px; }
.mobile-profile-menu .blue, .mobile-profile-menu .sky { background: #eaf3f9; color: #4b91b4; }
.mobile-profile-menu .amber { background: #fff4df; color: #d4952d; }
.mobile-profile-menu .green { background: #e8f5ee; color: #4a9b70; }
.mobile-profile-menu .violet { background: #f0edfa; color: #7967b5; }
.mobile-profile-menu strong { color: #354550; font-size: 14px; }
.mobile-profile-menu em { color: #9aa3aa; font-size: 11px; font-style: normal; }
.mobile-profile-menu button > svg { width: 17px; color: #aeb7be; }
.mobile-profile-logout { min-height: 48px; border: 1px solid #dfe5e9; border-radius: 12px; background: #fff; color: #5a90aa; font-size: 14px; }
.profile-form-tip { display: flex; align-items: center; gap: 12px; padding: 13px; border-radius: 10px; background: #eef6fa; color: #4c91b5; }
.profile-form-tip.secure { background: #edf7f2; color: #459169; }
.profile-form-tip > svg { flex: 0 0 auto; width: 25px; height: 25px; }
.profile-form-tip span, .profile-form-tip strong, .profile-form-tip small { display: block; }
.profile-form-tip strong { color: #304858; font-size: 13px; }
.profile-form-tip small { margin-top: 3px; color: #748692; font-size: 10px; }
.profile-form-error { padding: 10px 12px; border: 1px solid #f0ced1; border-radius: 8px; background: #fff2f3; color: #ad3f46; font-size: 12px; }

/* Collaborative site-task form: one workflow stage is editable at a time. */
.site-task-staged-form { display: grid; gap: 14px; }
.site-task-stage-banner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 14px 16px; border: 1px solid #cfe2eb; border-radius: 11px; background: linear-gradient(135deg, #eef7fa, #f8fbfd); }
.site-task-stage-banner > span { padding: 6px 9px; border-radius: 7px; background: #4c91b5; color: #fff; font-size: 11px; font-weight: 800; white-space: nowrap; }
.site-task-stage-banner strong, .site-task-stage-banner small { display: block; }
.site-task-stage-banner strong { color: #18384f; font-size: 15px; }
.site-task-stage-banner small { margin-top: 3px; color: #6c8291; font-size: 11px; line-height: 1.5; }
.site-task-stage-banner em { padding: 5px 8px; border-radius: 999px; background: #e6f5ef; color: #218267; font-size: 11px; font-style: normal; font-weight: 700; white-space: nowrap; }
.site-task-desktop-lock-note, .site-task-lock-note { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 8px; background: #f5f7f9; color: #667b8b; font-size: 11px; line-height: 1.5; }
.site-task-desktop-lock-note svg, .site-task-lock-note svg { flex: 0 0 auto; width: 16px; height: 16px; color: #718797; }
.word-template-input-cell.is-locked { background: #f2f4f6; color: #667987; cursor: default; }
.word-template-input-cell.is-locked:hover { background: #f2f4f6; box-shadow: none; }
.word-template-readonly-value { min-height: 32px; display: flex; align-items: center; color: #4e6372; line-height: 1.5; overflow-wrap: anywhere; }
.word-template-readonly-value em { color: #a0aab2; font-size: 11px; font-style: normal; }
.readonly-signature { display: block; width: auto; max-width: 100%; height: 42px; object-fit: contain; object-position: left center; }

/* Instrument checkout/return: keep each instrument and its four inputs in one row. */
.instrument-register-form { display: grid; gap: 12px; }
.instrument-register-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 15px; border: 1px solid #d8e3ea; border-radius: 9px; background: #f7fafc; }
.instrument-register-heading strong, .instrument-register-heading small { display: block; }
.instrument-register-heading strong { color: #19364c; font-size: 14px; }
.instrument-register-heading small { margin-top: 3px; color: #738692; font-size: 10px; }
.instrument-register-heading > span { flex: 0 0 auto; padding: 5px 9px; border-radius: 999px; background: #e5f3f7; color: #3d87a8; font-size: 11px; font-weight: 700; }
.instrument-register-table-wrap { overflow: auto; border: 1px solid #cfdde6; border-radius: 9px; background: #fff; }
.instrument-register-table { width: 100%; min-width: 1080px; border-collapse: collapse; table-layout: fixed; }
.instrument-register-table th, .instrument-register-table td { border-right: 1px solid #d7e2e9; border-bottom: 1px solid #d7e2e9; padding: 9px 10px; text-align: left; vertical-align: middle; }
.instrument-register-table th:last-child, .instrument-register-table td:last-child { border-right: 0; }
.instrument-register-table tbody tr:last-child td { border-bottom: 0; }
.instrument-register-table th { background: #edf4f7; color: #385269; font-size: 11px; font-weight: 750; }
.instrument-register-table td { color: #334b5d; font-size: 12px; }
.instrument-register-table th:nth-child(1), .instrument-register-table td:nth-child(1) { width: 54px; text-align: center; }
.instrument-register-table th:nth-child(2), .instrument-register-table td:nth-child(2) { width: 130px; }
.instrument-register-table th:nth-child(3), .instrument-register-table td:nth-child(3) { width: 190px; }
.instrument-register-table th:nth-child(4), .instrument-register-table td:nth-child(4) { width: 140px; }
.instrument-register-table th:nth-child(5), .instrument-register-table td:nth-child(5) { width: 150px; }
.instrument-register-table th:nth-child(6), .instrument-register-table td:nth-child(6) { width: 170px; }
.instrument-cell-input { width: 100%; min-height: 38px; padding: 7px 9px; border: 1px solid #cbd9e2; border-radius: 7px; background: #fff; color: #243d51; font: inherit; }
.instrument-cell-input:focus { border-color: #5794b5; outline: none; box-shadow: 0 0 0 3px rgba(87,148,181,.12); }
.instrument-register-table .choice-inputs { flex-wrap: nowrap; gap: 5px; }
.instrument-register-table .choice-input-option span { min-height: 36px; padding: 6px 8px; white-space: nowrap; }

@media (max-width: 900px) and (min-width: 621px) {
  .login-page { grid-template-columns: minmax(300px, .85fr) minmax(390px, 1.15fr); }
  .login-brand { padding: 54px 38px; }
  .login-brand h1 { font-size: clamp(31px, 4.8vw, 42px); }
  .login-brand p { font-size: 14px; }
  .login-assurance { display: grid; width: max-content; margin-top: 32px; }
  .login-brand-footer { left: 38px; }
  .login-circuit { right: -35px; opacity: .2; }
  .login-panel { padding: 30px; }
  .login-form { padding: 34px; }
}

@media (max-width: 620px) {
  .operations-status-grid { grid-template-columns: 1fr 1fr; gap: 9px; padding: 12px; }
  .operations-status-card { padding: 11px; }
  .operations-status-card strong { font-size: 17px; }
  .operations-backup-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 10px 13px; }
  .operations-backup-row > span:nth-of-type(2),
  .operations-backup-row > span:nth-of-type(3) { font-size: 10px; text-align: right; }
  .operations-note { align-items: flex-start; flex-direction: column; gap: 4px; padding: 11px 13px; }
  .signature-field-actions { align-items: flex-start; }
  .signature-editor-overlay { padding: 0; }
  .signature-editor { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; }
  .signature-editor-header { padding: 12px 14px; }
  .signature-editor-body { padding: 14px; }
  .signature-editor-body canvas { height: min(48vh, 360px); min-height: 260px; }
  .signature-editor-tools { display: grid; grid-template-columns: 1fr 1fr; }
  .signature-editor-tools .button { width: 100%; min-height: 44px; padding: 8px 10px; white-space: normal; }
  .signature-editor-footer { padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
  .signature-editor-footer .button { flex: 1; min-height: 48px; }
  .assignment-group-users { grid-template-columns: 1fr; gap: 8px; }
  .assignment-person { min-height: 52px; padding: 10px 12px; }
  .assignment-group-footer { align-items: stretch; flex-direction: column; gap: 10px; }
  .assignment-group-footer .button { width: 100%; }
  .assignment-preview { grid-template-columns: 36px minmax(0, 1fr); gap: 10px; padding: 12px; }
  .assignment-preview > svg { width: 20px; height: 20px; padding: 7px; }
  .assignment-preview strong { font-size: 13px; line-height: 1.45; }
  .inspector-selection-card { padding: 13px; }
  .node-workspace { margin-top: 14px !important; }
  .node-workspace-header { min-height: 62px; }
  .node-workspace-body { gap: 12px; padding: 14px; }
  .node-overview-grid { grid-template-columns: 1fr 1fr; }
  .node-overview-grid > div { padding: 11px; }
  .node-form-card { grid-template-columns: 40px minmax(0, 1fr); padding: 12px; }
  .node-form-icon { width: 40px; height: 40px; }
  .node-form-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .node-form-actions .button:first-child:nth-last-child(3) { grid-column: 1 / -1; }
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; overflow-x: clip; }
  #app { width: 100%; max-width: 100%; }
  button, input, select, textarea { touch-action: manipulation; }
  .login-page { display: block; width: 100%; min-height: 100vh; min-height: 100svh; overflow-x: hidden; background: #fff; }
  .login-brand { display: none; }
  .login-panel { min-height: 100vh; min-height: 100svh; place-items: start center; padding: max(28px, env(safe-area-inset-top)) 18px max(34px, env(safe-area-inset-bottom)); border-radius: 0; background: #fff; }
  .login-panel::before { display: none; }
  .login-form { width: 100%; margin: 0 auto; }
  .app-shell { display: block; }
  .sidebar { display: none; }
  .main { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .topbar { height: 58px; padding: 0 16px; }
  .topbar-title { display: flex; align-items: center; }
  .topbar h1 { font-size: 15px; }
  .topbar-menu, .global-search, .notification-button { display: none; }
  .top-actions { display: flex; gap: 0; }
  .top-actions > span, .top-actions .user-chip { display: none; }
  .top-actions .link-button { min-width: 44px; min-height: 44px; font-size: 13px; }
  .content { padding: 18px 14px 26px; }
  .page-heading { display: block; margin-bottom: 18px; }
  .page-heading h2 { font-size: 21px; }
  .page-heading .button { margin-top: 14px; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .ledger-status-grid { grid-template-columns: 1fr; padding: 14px; }
  .ledger-management-note { margin: 0 14px 14px; }
  .ledger-member-summary { grid-template-columns: 1fr; }
  .ledger-total, .ledger-summary-detail { padding: 16px; border-right: 0; border-bottom: 1px solid #e6ebef; }
  .ledger-member-summary > :nth-last-child(-n+2) { border-bottom: 1px solid #e6ebef; }
  .ledger-member-summary > :last-child { border-bottom: 0; }
  .metric { padding: 16px; }
  .metric strong { font-size: 23px; }
  .info-grid, .form-grid { grid-template-columns: 1fr; }
  .form-status-card { grid-template-columns: 30px 1fr; }
  .form-card-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .attachment-upload { grid-template-columns: 1fr; }
  .attachment-upload-hint { grid-column: auto; }
  .attachment-record { grid-template-columns: 42px minmax(0, 1fr); }
  .attachment-thumbnail, .attachment-file-icon { width: 42px; height: 42px; }
  .attachment-record-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .form-grid .full { grid-column: auto; }
  .field-layout-grid, .business-layout-grid { grid-template-columns: 1fr; }
  .field-layout-grid > .form-field, .business-layout-item { grid-column: auto; }
  .field-resize-handle { display: none; }
  .control-item { flex-basis: 96px; }
  .field-input, .search { font-size: 16px; }
  .order-query-main { display: grid; grid-template-columns: 1fr 1fr; padding: 12px; }
  .order-search-box { grid-column: 1 / -1; min-width: 0; width: 100%; }
  .order-search-box input { font-size: 16px; }
  .order-search-box select { width: 104px; }
  .order-sort-controls { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; }
  .order-sort-controls select { width: 100%; height: 42px; font-size: 14px; }
  .order-sort-direction { height: 42px; align-self: end; }
  .order-query-reset { width: 100%; }
  .order-filter-row { display: none; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; }
  .order-filter-label, .order-active-filter-count { grid-column: 1 / -1; margin: 0; }
  .order-filter-row select, .order-filter-row input { width: 100%; min-width: 0; height: 42px; font-size: 14px; }
  .button { min-height: 42px; }
  .desktop-only { display: none !important; }
  .mobile-only { display: block; }
  .mobile-tabbar { position: fixed; right: 0; bottom: 0; left: 0; z-index: 45; display: grid; height: calc(64px + env(safe-area-inset-bottom)); padding: 6px 8px env(safe-area-inset-bottom); grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid #d9e3eb; background: rgba(255, 255, 255, .98); box-shadow: 0 -8px 24px rgba(15, 42, 66, .08); backdrop-filter: blur(12px); }
  .mobile-tabbar button { position: relative; display: grid; place-items: center; align-content: center; gap: 2px; min-width: 0; padding: 3px 1px; border: 0; border-radius: 10px; background: transparent; color: #6a7e90; }
  .mobile-tabbar button > span { display: grid; place-items: center; width: 25px; height: 25px; }
  .mobile-tabbar svg { width: 20px; height: 20px; }
  .mobile-tabbar small { max-width: 100%; overflow: hidden; font-size: 10px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-tabbar button.active { color: #087b74; background: #edf9f7; }
  .mobile-tabbar button.active small { font-weight: 800; }
  .mobile-tabbar b { position: absolute; top: 1px; left: calc(50% + 7px); min-width: 16px; height: 16px; padding: 0 4px; border: 2px solid #fff; border-radius: 999px; background: #e34850; color: #fff; font-size: 9px; line-height: 12px; }
  .mobile-dashboard { margin: -2px -2px 0; }
  .mobile-home-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
  .mobile-home-heading small { color: var(--muted); font-size: 10px; }
  .mobile-home-heading h2 { margin: 4px 0 3px; color: #10283f; font-size: 21px; }
  .mobile-home-heading p { margin: 0; color: #64798b; font-size: 11px; }
  .mobile-home-heading > button { position: relative; display: grid; place-items: center; width: 42px; min-width: 42px; height: 42px; border: 1px solid #dce6ed; border-radius: 13px; background: #fff; color: #29475f; }
  .mobile-home-heading > button svg { width: 21px; height: 21px; }
  .mobile-home-heading > button b { position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; padding: 0 4px; border: 2px solid #f4f7fa; border-radius: 999px; background: #e34850; color: #fff; font-size: 9px; line-height: 15px; }
  .mobile-todo-summary { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 17px 18px; border: 0; border-radius: 16px; background: linear-gradient(135deg, #087e77, #12a69b); color: #fff; text-align: left; box-shadow: 0 10px 26px rgba(8, 126, 119, .2); }
  .mobile-todo-summary small, .mobile-todo-summary strong, .mobile-todo-summary p { display: block; }
  .mobile-todo-summary small { color: rgba(255,255,255,.76); font-size: 10px; }
  .mobile-todo-summary strong { margin-top: 2px; font-size: 30px; line-height: 1.1; }
  .mobile-todo-summary strong em { margin-left: 4px; font-size: 12px; font-style: normal; font-weight: 500; }
  .mobile-todo-summary p { margin: 7px 0 0; color: rgba(255,255,255,.78); font-size: 10px; }
  .mobile-todo-summary > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.16); }
  .mobile-todo-summary svg { width: 19px; height: 19px; }
  .mobile-home-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 12px 0 20px; }
  .mobile-home-stats button { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 12px 10px; border: 1px solid #e0e8ee; border-radius: 13px; background: #fff; text-align: left; }
  .mobile-home-stats button > span { display: grid; place-items: center; width: 29px; min-width: 29px; height: 29px; border-radius: 9px; background: #edf7f6; color: #078178; }
  .mobile-home-stats svg { width: 16px; height: 16px; }
  .mobile-home-stats small, .mobile-home-stats strong { display: block; }
  .mobile-home-stats small { overflow: hidden; color: #708294; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-home-stats strong { margin-top: 2px; color: #18344c; font-size: 17px; }
  .mobile-home-section { overflow: hidden; margin-bottom: 16px; border: 1px solid #e0e8ee; border-radius: 15px; background: #fff; }
  .mobile-home-section-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 15px 11px; }
  .mobile-home-section-head h3 { margin: 0; color: #17324a; font-size: 16px; }
  .mobile-home-section-head p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }
  .mobile-home-section-head button { padding: 6px 9px; border: 0; border-radius: 8px; background: #edf8f7; color: #087b74; font-size: 10px; font-weight: 700; }
  .mobile-home-section .mobile-card-list { padding-top: 0; }
  .mobile-quick-entry { display: grid; gap: 9px; }
  .mobile-quick-entry button { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid #e0e8ee; border-radius: 13px; background: #fff; text-align: left; }
  .mobile-quick-entry button > svg { width: 20px; height: 20px; color: #087b74; }
  .mobile-quick-entry span, .mobile-quick-entry strong, .mobile-quick-entry small { display: block; }
  .mobile-quick-entry strong { color: #203b52; font-size: 13px; }
  .mobile-quick-entry small { margin-top: 2px; color: var(--muted); font-size: 9px; }
  .panel { border-radius: 12px; overflow: hidden; box-shadow: 0 4px 14px rgba(23, 50, 75, .05); }
  .panel-header { padding: 15px 16px; }
  .panel-body { padding: 16px; }
  .toolbar .search { width: 100%; min-width: 0; }
  .mobile-card-list { display: grid; gap: 12px; padding: 12px; }
  .mobile-order-list { padding: 0; }
  .paginated-list > .table-wrap { border-radius: 12px; }
  .list-pagination { min-height: 0; margin-top: 12px; padding: 11px 12px; border: 1px solid #dfe7ec; border-radius: 11px; gap: 9px 12px; flex-wrap: wrap; background: rgba(255,255,255,.72); }
  .pagination-size { order: 1; }
  .pagination-size select { height: 34px; }
  .pagination-summary { order: 2; margin-left: auto; margin-right: 0; }
  .pagination-actions { order: 3; width: 100%; justify-content: space-between; padding-top: 8px; border-top: 1px solid #edf1f4; }
  .pagination-actions .button { flex: 1; min-height: 36px; }
  .pagination-actions strong { min-width: 54px; }
  .mobile-work-card { padding: 16px; border: 1px solid #dbe5ec; border-radius: 14px; background: white; box-shadow: 0 5px 16px rgba(21, 52, 78, .06); }
  .mobile-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .mobile-card-heading small { display: block; margin-bottom: 5px; color: var(--muted); font-size: 11px; }
  .mobile-card-heading strong { display: block; color: #10283f; font-size: 17px; line-height: 1.35; }
  .mobile-status-pill { flex: 0 0 auto; padding: 5px 9px; border-radius: 999px; background: #e4f7f4; color: #08766f; font-size: 11px; font-weight: 700; }
  .mobile-status-pill.complete { background: #e9eef3; color: #5d6d7c; }
  .mobile-card-client { margin-top: 13px; color: #17334c; font-size: 15px; font-weight: 700; line-height: 1.5; }
  .mobile-card-fields { display: grid; gap: 9px; margin-top: 14px; padding-top: 13px; border-top: 1px solid #edf1f4; }
  .mobile-card-fields p { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; margin: 0; line-height: 1.45; }
  .mobile-card-fields span { color: var(--muted); font-size: 12px; }
  .mobile-card-fields strong { min-width: 0; color: #2c4054; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
  .mobile-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 15px; padding-top: 13px; border-top: 1px solid #edf1f4; }
  .mobile-card-footer small { color: var(--muted); font-size: 10px; }
  .mobile-card-footer .button { flex: 0 0 auto; min-width: 104px; }
  .mobile-task-card .mobile-card-heading strong { font-size: 16px; }
  .mobile-empty-state { padding: 34px 18px; text-align: center; color: var(--muted); }
  .mobile-empty-state span { display: grid; place-items: center; width: 38px; height: 38px; margin: 0 auto 10px; border-radius: 50%; background: #eaf5f4; color: var(--teal); font-weight: 800; }
  .mobile-empty-state p { margin: 0; font-size: 13px; }
  .mobile-flow-summary { padding: 18px 16px; }
  .mobile-flow-heading span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 11px; }
  .mobile-flow-heading strong { color: #10283f; font-size: 17px; }
  .mobile-progress-track { height: 7px; margin: 14px 0 9px; overflow: hidden; border-radius: 999px; background: #e3eaf0; }
  .mobile-progress-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0d968c, #24b7aa); }
  .mobile-flow-meta { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 10px; }
  .mobile-flow-meta span:last-child { text-align: right; }
  .mobile-ledger-section { margin-top: 22px; }
  .mobile-section-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
  .mobile-section-heading h3 { margin: 0; font-size: 16px; }
  .mobile-ledger-section .mobile-card-list { padding: 0; }
  .info-grid { gap: 0; }
  .info-item { padding: 12px 0; border-bottom: 1px solid #edf1f4; }
  .info-item:last-child { border-bottom: 0; }
  .info-item label { margin-bottom: 5px; font-size: 11px; }
  .info-item strong { display: block; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
  .mobile-order-info { padding: 15px 16px 0; }
  .mobile-order-primary { padding-bottom: 13px; border-bottom: 1px solid #edf1f4; }
  .mobile-order-primary small, .mobile-order-primary strong { display: block; }
  .mobile-order-primary small { margin-bottom: 4px; color: var(--muted); font-size: 10px; }
  .mobile-order-primary strong { color: #10283f; font-size: 16px; line-height: 1.45; }
  .mobile-order-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .mobile-order-info-grid p, .mobile-order-more p { min-width: 0; margin: 0; padding: 12px 0; border-bottom: 1px solid #edf1f4; }
  .mobile-order-info-grid span, .mobile-order-info-grid strong, .mobile-order-more span, .mobile-order-more strong { display: block; }
  .mobile-order-info-grid span, .mobile-order-more span { margin-bottom: 4px; color: var(--muted); font-size: 10px; }
  .mobile-order-info-grid strong, .mobile-order-more strong { color: #294156; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
  .mobile-order-more summary { padding: 13px 0 15px; color: #087b74; font-size: 12px; font-weight: 700; text-align: center; list-style: none; }
  .mobile-order-more summary::-webkit-details-marker { display: none; }
  .mobile-order-more summary::after { content: "⌄"; margin-left: 6px; }
  .mobile-order-more[open] summary::after { content: "⌃"; }
  .mobile-order-more div { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .page-order-detail .main { padding-bottom: calc(148px + env(safe-area-inset-bottom)); }
  .mobile-current-task { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: start; margin-bottom: 14px; padding: 15px; overflow: hidden; border: 1px solid #cfe2e4; border-radius: 14px; background: linear-gradient(145deg, #f7fffe, #eef8f8); }
  .mobile-current-task.needs-form { border-color: #bfe0dc; }
  .mobile-current-task.ready { border-color: #bed5ec; background: linear-gradient(145deg, #f8fbff, #edf5fc); }
  .mobile-current-task.is-complete { border-color: #d8e1e8; background: #f8fafb; }
  .mobile-task-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #dff5f2; color: #078178; }
  .mobile-current-task.ready .mobile-task-icon { background: #e2effc; color: #196fbd; }
  .mobile-current-task svg { width: 22px; height: 22px; }
  .mobile-current-task small, .mobile-current-task strong, .mobile-current-task p { display: block; }
  .mobile-current-task small { margin-bottom: 3px; color: #6a7f91; font-size: 10px; }
  .mobile-current-task strong { color: #10283f; font-size: 16px; line-height: 1.35; }
  .mobile-current-task p { margin: 6px 0 0; color: #5d7183; font-size: 11px; line-height: 1.5; }
  .mobile-current-task em { padding: 4px 8px; border-radius: 999px; background: #fff; color: #087b74; font-size: 10px; font-style: normal; font-weight: 800; white-space: nowrap; }
  .mobile-order-actionbar { position: fixed; right: 0; bottom: calc(64px + env(safe-area-inset-bottom)); left: 0; z-index: 40; display: flex; align-items: center; gap: 10px; min-height: 70px; padding: 10px 14px; border-top: 1px solid #d9e3eb; background: rgba(255, 255, 255, .98); box-shadow: 0 -8px 24px rgba(18, 42, 64, .1); backdrop-filter: blur(12px); }
  .mobile-order-actionbar .button { flex: 0 0 auto; min-width: 116px; min-height: 46px; margin: 0; border-radius: 11px; }
  .mobile-reject-action { display: grid; place-items: center; gap: 1px; width: 42px; min-width: 42px; height: 46px; border: 0; border-radius: 9px; background: #fff3f3; color: #b8454c; font-size: 9px; }
  .mobile-reject-action svg { width: 15px; height: 15px; transform: rotate(180deg); }
  .mobile-action-copy { min-width: 0; flex: 1; }
  .mobile-action-copy small, .mobile-action-copy strong { display: block; }
  .mobile-action-copy small { color: var(--muted); font-size: 9px; }
  .mobile-action-copy strong { margin-top: 2px; overflow: hidden; color: #21384d; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
  .modal-backdrop { padding: 0; place-items: stretch; }
  .modal-action-submit-business-form,
  .modal-action-submit-new-order { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; box-shadow: none; }
  .modal-action-submit-business-form .modal-header,
  .modal-action-submit-new-order .modal-header { flex: 0 0 auto; padding: 14px 16px; background: #fff; }
  .modal-action-submit-business-form .modal-header h3,
  .modal-action-submit-new-order .modal-header h3 { max-width: calc(100vw - 90px); font-size: 17px; line-height: 1.4; }
  .modal-action-submit-business-form .modal-body,
  .modal-action-submit-new-order .modal-body { flex: 1 1 auto; padding: 14px; background: #f3f7fa; overscroll-behavior: contain; }
  .modal-action-submit-business-form .modal-footer,
  .modal-action-submit-new-order .modal-footer { flex: 0 0 auto; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -7px 22px rgba(18, 42, 64, .09); }
  .modal-action-submit-business-form .modal-footer .button,
  .modal-action-submit-new-order .modal-footer .button { min-height: 46px; }
  .modal-action-submit-business-form .modal-footer .button:last-child,
  .modal-action-submit-new-order .modal-footer .button:last-child { flex: 1; }
  .modal-action-submit-business-form .modal-header small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
  .modal-action-submit-business-form .modal-body { padding: 12px; }
  .modal-action-submit-business-form #business-form-fields,
  .modal-action-submit-business-form .word-form-field { width: 100%; min-width: 0; }
  .modal-action-submit-business-form .word-template-table-wrap { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .modal-action-submit-business-form .word-template-table { min-width: 1080px; }
  .modal-action-submit-business-form .word-template-cell-input,
  .modal-action-submit-business-form .word-date-input-wrap,
  .modal-action-submit-business-form .inline-signature-field.compact { box-sizing: border-box; min-width: 0; max-width: 100%; }
  .modal-action-submit-business-form .inline-signature-field.compact .signature-field-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .modal-action-submit-business-form .inline-signature-field.compact .inline-signature-clear { width: 100%; }
  .modal-action-submit-business-form .modal-footer > .button:first-child { min-width: 76px; }
  .mobile-form-save-copy { min-width: 0; flex: 1; }
  .mobile-form-save-copy small, .mobile-form-save-copy strong { display: block; }
  .mobile-form-save-copy small { color: var(--muted); font-size: 9px; }
  .mobile-form-save-copy strong { margin-top: 1px; color: #263e53; font-size: 11px; }
  .mobile-business-form { display: grid; gap: 12px; }
  .mobile-form-intro { padding: 15px; border-radius: 14px; background: linear-gradient(135deg, #087e77, #10a69b); color: #fff; box-shadow: 0 8px 20px rgba(13, 143, 134, .16); }
  .mobile-form-intro-heading > span { display: block; margin-bottom: 3px; color: rgba(255,255,255,.72); font-size: 10px; }
  .mobile-form-intro-heading > strong { display: block; font-size: 17px; line-height: 1.35; }
  .mobile-form-progress { margin-top: 14px; }
  .mobile-form-progress p { display: flex; justify-content: space-between; margin: 0 0 6px; font-size: 10px; }
  .mobile-form-progress p span { color: rgba(255,255,255,.78); }
  .mobile-form-progress p strong { font-size: 11px; }
  .mobile-form-progress > div { height: 6px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.22); }
  .mobile-form-progress i { display: block; height: 100%; border-radius: inherit; background: #fff; transition: width .2s ease; }
  .mobile-form-intro > small { display: block; margin-top: 10px; color: rgba(255,255,255,.78); font-size: 10px; line-height: 1.5; }
  .mobile-form-intro > small b { color: #fff; }
  .mobile-form-intro > small span { float: right; color: #d8fffa; white-space: nowrap; }
  .mobile-form-groups { display: grid; gap: 12px; }
  .mobile-form-group { overflow: hidden; border: 1px solid #dce6ed; border-radius: 14px; background: #fff; box-shadow: 0 3px 12px rgba(22, 50, 74, .04); }
  .mobile-form-group > header { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 13px 15px; border-bottom: 1px solid #edf1f4; background: #fbfdfe; }
  .mobile-form-group > header > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: #e5f5f3; color: #087b74; font-size: 12px; font-weight: 800; }
  .mobile-form-group > header strong, .mobile-form-group > header small { display: block; }
  .mobile-form-group > header strong { color: #17324a; font-size: 14px; }
  .mobile-form-group > header small { margin-top: 2px; color: var(--muted); font-size: 9px; }
  .mobile-form-group > header em { color: #8696a4; font-size: 10px; font-style: normal; }
  .mobile-form-group.is-complete > header em { color: #087b74; font-weight: 800; }
  .mobile-business-fields { display: block; }
  .mobile-field-shell { position: relative; padding: 14px 15px; border-bottom: 1px solid #edf1f4; }
  .mobile-field-shell:last-child { border-bottom: 0; }
  .mobile-field-shell.is-complete::after { content: "✓"; position: absolute; top: 14px; right: 15px; color: #0b968c; font-size: 12px; font-weight: 900; }
  .mobile-field-shell > .business-layout-item { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .mobile-field-shell > .property-group > label { max-width: calc(100% - 24px); margin-bottom: 8px; color: #344b60; font-size: 13px; font-weight: 700; }
  .mobile-business-fields .field-input { min-height: 46px; border-color: #ccd9e3; border-radius: 9px; background: #fbfdfe; }
  .mobile-business-fields textarea.field-input { min-height: 92px; line-height: 1.6; resize: vertical; }
  .mobile-business-fields .date-range-inputs { grid-template-columns: 1fr; align-items: stretch; gap: 7px; }
  .mobile-business-fields .date-range-inputs em { text-align: center; line-height: 1; }
  .mobile-form-section { padding: 10px 4px 2px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
  .mobile-form-section strong { display: flex; align-items: center; gap: 8px; color: #15334d; font-size: 15px; }
  .mobile-form-section strong::before { content: ""; width: 4px; height: 17px; border-radius: 999px; background: var(--teal); }
  .mobile-business-fields .choice-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mobile-business-fields .choice-input-option, .mobile-business-fields .choice-input-option span { width: 100%; }
  .mobile-business-fields .choice-input-option span { min-height: 44px; justify-content: center; padding: 8px 10px; font-size: 13px; }
  .mobile-dynamic-table { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
  .mobile-dynamic-table > label { display: block; margin: 0 0 9px 4px !important; color: #15334d !important; font-size: 15px !important; }
  .mobile-table-records { display: grid; gap: 10px; }
  .mobile-table-record { display: grid; gap: 10px; padding: 14px; border: 1px solid #dce6ed; border-radius: 12px; background: #fff; box-shadow: 0 3px 10px rgba(22, 50, 74, .04); }
  .mobile-table-record-title { padding-bottom: 8px; border-bottom: 1px solid #edf1f4; color: var(--teal); font-size: 13px; font-weight: 800; }
  .mobile-table-record .property-group { margin: 0; }
  .mobile-table-record .property-group label { color: #52677b; font-size: 12px; font-weight: 600; }
  .mobile-dynamic-table .table-row-actions { display: grid; grid-template-columns: 1fr 1fr; margin-top: 10px; }
  .mobile-key-value-field { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
  .mobile-key-value-field > label { margin: 0 0 9px 4px !important; color: #15334d !important; font-size: 15px !important; }
  .mobile-key-value-list { display: grid; gap: 10px; }
  .mobile-key-value-list .property-group { margin: 0; padding: 14px; border: 1px solid #dce6ed; border-radius: 12px; background: #fff; }
  .inline-signature-field { padding: 14px !important; }
  .inline-signature-canvas { height: 180px; border-width: 2px; border-color: #80aaa7; border-radius: 10px; }
  .inline-signature-clear { min-height: 40px; padding: 6px 10px; border: 1px solid #d7e1e8; border-radius: 8px; }
  .mobile-form-attachments { margin-top: 14px; padding: 15px; border: 1px solid #dce6ed; border-radius: 12px; background: #fff; }
  .mobile-form-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .mobile-form-section-heading strong, .mobile-form-section-heading span { display: block; }
  .mobile-form-section-heading strong { color: #15334d; font-size: 15px; }
  .mobile-form-section-heading div > span { margin-top: 4px; color: var(--muted); font-size: 11px; }
  .mobile-attachment-controls { display: grid; gap: 10px; margin-top: 14px; }
  .mobile-attachment-controls .button { width: 100%; }
  .mobile-form-attachment-list { display: grid; gap: 8px; margin-top: 12px; }
  .mobile-form-attachment-list a { display: flex; justify-content: space-between; gap: 10px; padding: 10px; border-radius: 8px; background: #f3f7fa; color: #1f4059; text-decoration: none; }
  .mobile-form-attachment-list a strong { min-width: 0; overflow-wrap: anywhere; }
  .mobile-form-attachment-list a small { flex: 0 0 auto; color: var(--muted); }
  .mobile-form-attachment-list p { margin: 8px 0 0; color: var(--muted); font-size: 12px; text-align: center; }
  .mobile-form-attachment-list .attachment-record { display: grid; grid-template-columns: 44px minmax(0, 1fr); padding: 10px; border: 1px solid #e0e8ee; background: #fff; }
  .mobile-form-attachment-list .attachment-record a { display: grid; padding: 0; background: #edf5f8; }
  .mobile-form-attachment-list .attachment-record-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
  .mobile-form-attachment-list .attachment-record-actions a { display: inline-flex; padding: 5px 10px; background: #fff; }
  .mobile-form-attachment-list .attachment-record-info small { white-space: normal; }

  /* Mobile app visual system: calm blue, flat information hierarchy, no desktop overflow. */
  body { background: #f3f6fa; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei UI", sans-serif; }
  .main { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .topbar {
    position: sticky; top: 0; display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px;
    height: 60px; padding: 0 14px; border: 0; background: #5794b5; color: #fff;
    box-shadow: 0 2px 10px rgba(36, 83, 111, .15);
  }
  .desktop-topbar-title, .top-actions, .global-search { display: none !important; }
  .mobile-topbar-spacer { width: 38px; }
  .mobile-page-title { min-width: 0; overflow: hidden; font-size: 18px !important; font-weight: 700; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-top-profile {
    display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(255,255,255,.7);
    border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; font-size: 13px; font-weight: 800;
  }
  .mobile-top-profile.active { background: #fff; color: #367a9f; }
  .content { max-width: none; padding: 14px 12px 28px; overflow-x: clip; }
  .page-heading { margin: 0; }
  .page-heading > div:first-child { display: none; }
  .page-heading .button { width: 100%; margin: 0 0 12px; }
  .page-order-detail .page-heading > div:first-child { display: block; margin-bottom: 13px; }
  .page-order-detail .page-heading h2 { margin-top: 7px !important; font-size: 19px; }
  .page-order-detail .page-heading p { font-size: 12px; }
  .toolbar { margin: 0 0 12px; padding: 10px; border: 1px solid #e3e9ef; border-radius: 12px; background: #fff; }
  .toolbar .search { height: 44px; border: 0; border-radius: 9px; background: #f2f5f8; }
  .toolbar > .tag { margin-left: auto; }

  .mobile-tabbar {
    height: calc(68px + env(safe-area-inset-bottom)); padding: 7px 8px env(safe-area-inset-bottom);
    border-color: #e1e6eb; background: rgba(255,255,255,.98); box-shadow: 0 -3px 16px rgba(31, 60, 79, .08);
  }
  .mobile-tabbar button { gap: 3px; border-radius: 0; color: #7f8992; }
  .mobile-tabbar button > span { width: 28px; height: 27px; }
  .mobile-tabbar svg { width: 22px; height: 22px; stroke-width: 1.65; }
  .mobile-tabbar small { font-size: 11px; }
  .mobile-tabbar button.active { background: transparent; color: #4388ad; }
  .mobile-tabbar button.active small { font-weight: 700; }

  .mobile-dashboard { margin: 0; }
  .mobile-home-heading { margin: 2px 2px 14px; }
  .mobile-home-heading h2 { color: #263746; font-size: 20px; font-weight: 700; }
  .mobile-home-heading p { color: #84919c; font-size: 12px; }
  .mobile-home-heading > button { border: 0; border-radius: 50%; box-shadow: 0 3px 12px rgba(44, 79, 101, .08); color: #4d8faf; }
  .mobile-todo-summary {
    padding: 20px 22px; border: 1px solid #e2e9ef; border-radius: 15px; background: #fff; color: #293d4d;
    box-shadow: 0 4px 15px rgba(39, 72, 93, .06);
  }
  .mobile-todo-summary small { color: #6f7f8c; font-size: 12px; }
  .mobile-todo-summary strong { margin-top: 5px; color: #4a91b5; font-size: 34px; font-weight: 500; }
  .mobile-todo-summary strong em { color: #84909a; }
  .mobile-todo-summary p { color: #8a96a0; font-size: 11px; }
  .mobile-todo-summary > span { background: #edf5f9; color: #4d8faf; }
  .mobile-home-stats { overflow: hidden; gap: 0; margin: 12px 0 18px; border: 1px solid #e2e9ef; border-radius: 15px; background: #fff; box-shadow: 0 4px 15px rgba(39, 72, 93, .05); }
  .mobile-home-stats button { display: grid; justify-items: center; gap: 4px; padding: 15px 5px; border: 0; border-right: 1px solid #edf1f4; border-radius: 0; text-align: center; }
  .mobile-home-stats button:last-child { border-right: 0; }
  .mobile-home-stats button > span { width: 31px; height: 31px; background: #edf5fa; color: #4a91b5; }
  .mobile-home-stats small { font-size: 10px; }
  .mobile-home-stats strong { color: #4a91b5; font-size: 21px; font-weight: 500; }
  .mobile-home-section { border-color: #e2e9ef; border-radius: 15px; box-shadow: 0 4px 15px rgba(39, 72, 93, .05); }
  .mobile-home-section-head button { background: transparent; color: #4a91b5; }
  .mobile-quick-entry button { border-color: #e2e9ef; border-radius: 13px; box-shadow: 0 3px 11px rgba(39, 72, 93, .04); }
  .mobile-quick-entry button > svg { color: #4a91b5; }

  .page-orders .mobile-order-list,
  .page-archives .mobile-archive-list {
    overflow: hidden; display: block; padding: 0; border: 1px solid #e1e7ec; border-radius: 13px;
    background: #fff; box-shadow: 0 4px 15px rgba(39, 72, 93, .05);
  }
  .page-orders .mobile-work-card,
  .page-archives .mobile-work-card {
    padding: 16px 15px; border: 0; border-bottom: 1px solid #edf0f3; border-radius: 0; box-shadow: none;
  }
  .page-orders .mobile-work-card:last-child,
  .page-archives .mobile-work-card:last-child { border-bottom: 0; }
  .mobile-card-heading small { margin-bottom: 4px; font-size: 10px; }
  .mobile-card-heading strong { font-size: 16px; font-weight: 650; }
  .mobile-status-pill { padding: 4px 8px; border: 1px solid #87b9d3; border-radius: 5px; background: #f7fbfd; color: #4b92b6; font-weight: 600; }
  .mobile-status-pill.complete { border-color: #aeb7bf; background: #fff; color: #727c84; }
  .mobile-card-client { margin-top: 12px; color: #354754; font-size: 15px; font-weight: 650; }
  .mobile-card-fields { gap: 7px; margin-top: 11px; padding-top: 0; border: 0; }
  .mobile-card-fields p { grid-template-columns: 68px minmax(0, 1fr); }
  .mobile-card-fields span, .mobile-card-fields strong { font-size: 12px; font-weight: 400; }
  .mobile-card-fields span { color: #929ca4; }
  .mobile-card-fields strong { color: #687681; }
  .mobile-card-footer { margin-top: 12px; padding-top: 11px; }
  .mobile-card-footer .button { min-width: 78px; min-height: 34px; padding: 6px 10px; border: 0; background: transparent; color: #438db3; }
  .mobile-card-footer .button::after { content: "  ›"; }
  .mobile-card-list { gap: 10px; }
  .page-tasks .panel { border: 1px solid #e1e7ec; box-shadow: 0 4px 15px rgba(39, 72, 93, .05); }
  .page-tasks .mobile-card-list { display: block; padding: 0; }
  .page-tasks .panel-header { min-height: 52px; padding: 13px 14px; }
  .page-tasks .panel-header h3 { font-size: 16px; }
  .page-tasks .panel-header .tag { padding: 5px 8px; font-size: 10px; }
  .page-tasks .mobile-work-card { padding: 15px 14px; border: 0; border-bottom: 1px solid #edf0f3; border-radius: 0; box-shadow: none; }
  .page-tasks .mobile-work-card:last-child { border-bottom: 0; }
  .page-tasks .mobile-card-heading strong { font-size: 16px; }
  .page-tasks .mobile-card-client { margin-top: 10px; font-size: 14px; }
  .page-tasks .mobile-card-fields { gap: 5px; margin-top: 9px; }
  .page-tasks .mobile-card-footer { margin-top: 10px; padding-top: 9px; }
  .page-tasks .mobile-empty-state { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px 16px; }
  .page-tasks .mobile-empty-state span { width: 30px; height: 30px; margin: 0; }

  .ledger-overview { border-color: #e1e7ec; box-shadow: 0 4px 15px rgba(39, 72, 93, .05); }
  .ledger-status-grid { grid-template-columns: 1fr 1fr; gap: 9px; padding: 12px; }
  .ledger-status-card { min-width: 0; }
  .mobile-ledger-section .mobile-card-list { overflow: hidden; display: block; border: 1px solid #e1e7ec; border-radius: 13px; background: #fff; }
  .mobile-ledger-section .mobile-work-card { border: 0; border-bottom: 1px solid #edf0f3; border-radius: 0; box-shadow: none; }

  .mobile-profile-page { display: grid; gap: 14px; }
  .mobile-profile-card { position: relative; display: grid; grid-template-columns: 58px minmax(0,1fr); align-items: center; gap: 14px; padding: 22px 18px 18px; border: 1px solid #e1e7ec; border-radius: 15px; background: #fff; box-shadow: 0 4px 15px rgba(39, 72, 93, .06); }
  .mobile-profile-avatar { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #e4f0f6; color: #4388ad; font-size: 22px; font-weight: 750; }
  .mobile-profile-card h2 { margin: 0; color: #293a47; font-size: 20px; }
  .mobile-profile-card p { margin: 5px 0 0; color: #7d8992; font-size: 12px; }
  .mobile-profile-card > small { grid-column: 1 / -1; padding-top: 14px; border-top: 1px dashed #e3e8ec; color: #568aa4; font-size: 13px; }
  .mobile-profile-details { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; margin-top: 0; padding-top: 10px; }
  .mobile-profile-details p { display: flex; justify-content: space-between; gap: 18px; padding: 10px 0; border-right: 0; border-bottom: 1px solid #edf0f2; }
  .mobile-profile-details p:last-child { border-bottom: 0; }
  .mobile-profile-details span, .mobile-profile-details strong { margin: 0; font-size: 12px; }
  .mobile-profile-details strong { max-width: 65%; text-align: right; }
  .mobile-profile-menu { overflow: hidden; border: 1px solid #e1e7ec; border-radius: 15px; background: #fff; box-shadow: 0 4px 15px rgba(39, 72, 93, .05); }
  .mobile-profile-menu button { display: grid; grid-template-columns: 35px minmax(0,1fr) auto 18px; align-items: center; gap: 10px; width: 100%; min-height: 58px; padding: 10px 15px; border: 0; border-bottom: 1px solid #edf0f3; background: #fff; text-align: left; }
  .mobile-profile-menu button:last-child { border-bottom: 0; }
  .mobile-profile-menu button > span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 8px; }
  .mobile-profile-menu button > span svg { width: 18px; height: 18px; }
  .mobile-profile-menu .blue, .mobile-profile-menu .sky { background: #eaf3f9; color: #4b91b4; }
  .mobile-profile-menu .amber { background: #fff4df; color: #d4952d; }
  .mobile-profile-menu .green { background: #e8f5ee; color: #4a9b70; }
  .mobile-profile-menu .violet { background: #f0edfa; color: #7967b5; }
  .mobile-profile-menu strong { color: #354550; font-size: 14px; font-weight: 600; }
  .mobile-profile-menu em { color: #9aa3aa; font-size: 10px; font-style: normal; }
  .mobile-profile-menu button > svg { width: 16px; color: #aeb7be; }
  .mobile-profile-logout { min-height: 48px; border: 1px solid #dfe5e9; border-radius: 12px; background: #fff; color: #5a90aa; font-size: 14px; }

  .login-form { padding: 24px 20px; border: 0; border-radius: 14px; box-shadow: none; }
  .login-panel { padding: 26px 16px; background: #fff; }
  .login-title h2, .login-recovery-card h2 { font-size: 23px; }
  .modal-action-submit-profile,
  .modal-action-submit-password { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; box-shadow: none; }
  .modal-action-submit-profile .modal-body,
  .modal-action-submit-password .modal-body { flex: 1 1 auto; padding: 16px 14px; background: #f3f6f9; }
  .modal-action-submit-profile .modal-footer,
  .modal-action-submit-password .modal-footer { padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -7px 22px rgba(18, 42, 64, .08); }
  .modal-action-submit-profile .modal-footer .button:last-child,
  .modal-action-submit-password .modal-footer .button:last-child { flex: 1; min-height: 46px; }
  .profile-settings-form { display: grid; gap: 12px; }
  .profile-settings-form .property-group { padding: 14px; border: 1px solid #e0e7ec; border-radius: 12px; background: #fff; }
  .profile-settings-form .field-input { margin-top: 7px; }
  .preview-modal { width: 100vw; height: 100dvh; border-radius: 0; }
  .preview-modal .modal-header { min-height: 60px; padding: 10px 13px; }
  .preview-modal-title > span { width: 35px; height: 35px; }
  .preview-modal-title h3 { max-width: calc(100vw - 120px); font-size: 15px; }
  .preview-modal-title small { max-width: calc(100vw - 120px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .preview-reader-toolbar { min-height: 40px; padding: 8px 13px; }
  .preview-reader-toolbar p { display: none; }
  .preview-frame-wrap { padding: 7px; }
  .preview-modal .modal-footer { min-height: 60px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); }
  .preview-footer-note { display: none; }
  .preview-footer-actions { width: 100%; }
  .preview-footer-actions .button:first-child { flex: 0 0 auto; }
  .preview-footer-actions .button:last-child { flex: 1; justify-content: center; }

  .mobile-form-intro { border: 1px solid #dce8ef; background: #fff; color: #2e4453; box-shadow: 0 4px 14px rgba(39, 72, 93, .05); }
  .mobile-form-intro-heading > span { color: #7f8d98; }
  .mobile-form-intro-heading > strong { color: #2b3f4e; }
  .mobile-form-progress p span, .mobile-form-intro > small { color: #7f8d98; }
  .mobile-form-progress p strong { color: #4a91b5; }
  .mobile-form-progress > div { background: #e8eef2; }
  .mobile-form-progress i { background: #5794b5; }
  .mobile-form-intro > small b { color: #d94b51; }
  .mobile-form-intro > small span { color: #5591b0; }
  .mobile-form-group > header > span { background: #e9f2f7; color: #4b8eaf; }
  .mobile-form-group.is-complete > header em { color: #4b8eaf; }
  .mobile-field-shell.is-complete::after { color: #4b8eaf; }
  .mobile-form-section strong::before { background: #5794b5; }
  .mobile-business-fields .field-input:focus { border-color: #5794b5; box-shadow: 0 0 0 3px rgba(87,148,181,.11); }
  .mobile-site-task-form { gap: 12px; }
  .site-task-stage-banner { grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 12px; border-radius: 12px; }
  .site-task-stage-banner > span { align-self: start; padding: 5px 7px; font-size: 10px; }
  .site-task-stage-banner strong { font-size: 14px; }
  .site-task-stage-banner small { font-size: 10px; }
  .site-task-stage-banner em { grid-column: 2; justify-self: start; margin-top: -3px; }
  .site-task-previous-sections { display: grid; gap: 8px; }
  .site-task-lock-note { align-items: flex-start; padding: 10px 11px; border: 1px solid #e1e7eb; border-radius: 10px; background: #fff; }
  .site-task-readonly-stage { overflow: hidden; border: 1px solid #dfe7ec; border-radius: 11px; background: #fff; }
  .site-task-readonly-stage summary { display: grid; grid-template-columns: minmax(0, 1fr) 18px; align-items: center; gap: 8px; min-height: 56px; padding: 10px 12px; cursor: pointer; list-style: none; }
  .site-task-readonly-stage summary::-webkit-details-marker { display: none; }
  .site-task-readonly-stage summary strong, .site-task-readonly-stage summary small { display: block; }
  .site-task-readonly-stage summary strong { color: #334b5c; font-size: 13px; }
  .site-task-readonly-stage summary small { margin-top: 3px; color: #8b99a3; font-size: 10px; }
  .site-task-readonly-stage summary > svg { width: 16px; color: #8a99a4; transition: transform .18s ease; }
  .site-task-readonly-stage[open] summary > svg { transform: rotate(90deg); }
  .site-task-readonly-stage > div { display: grid; gap: 0; padding: 0 12px 8px; border-top: 1px solid #edf1f3; }
  .site-task-readonly-stage p { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; margin: 0; padding: 10px 0; border-bottom: 1px solid #f0f3f5; }
  .site-task-readonly-stage p:last-child { border-bottom: 0; }
  .site-task-readonly-stage p span { color: #8a969f; font-size: 11px; }
  .site-task-readonly-stage p strong { min-width: 0; color: #4b5f6d; font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
  .site-task-readonly-stage p strong em { color: #b0b8be; font-style: normal; font-weight: 400; }
  .site-task-readonly-stage .readonly-signature { height: 38px; }

  .mobile-instrument-register { display: grid; gap: 12px; }
  .mobile-instrument-list { display: grid; gap: 10px; }
  .mobile-instrument-card { overflow: hidden; border: 1px solid #dfe7ec; border-radius: 13px; background: #fff; box-shadow: 0 4px 14px rgba(39,72,93,.045); }
  .mobile-instrument-card summary { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 17px; align-items: center; gap: 9px; min-height: 64px; padding: 10px 12px; cursor: pointer; list-style: none; }
  .mobile-instrument-card summary::-webkit-details-marker { display: none; }
  .mobile-instrument-card summary > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #eaf3f8; color: #4b8faf; font-size: 11px; font-weight: 800; }
  .mobile-instrument-card summary strong, .mobile-instrument-card summary small { display: block; }
  .mobile-instrument-card summary strong { color: #2f4657; font-size: 13px; line-height: 1.4; }
  .mobile-instrument-card summary small { margin-top: 3px; color: #87949e; font-size: 10px; }
  .mobile-instrument-card summary em { padding: 4px 7px; border-radius: 999px; background: #eef5f8; color: #5790aa; font-size: 10px; font-style: normal; white-space: nowrap; }
  .mobile-instrument-card.has-value summary em { background: #e9f5ef; color: #37876b; }
  .mobile-instrument-card summary > svg { width: 16px; color: #8d9aa3; transition: transform .18s ease; }
  .mobile-instrument-card[open] summary > svg { transform: rotate(90deg); }
  .mobile-instrument-fields { display: grid; gap: 0; padding: 3px 12px 12px; border-top: 1px solid #edf1f3; }
  .mobile-instrument-fields .mobile-field-shell { padding: 12px 0; border-bottom: 1px solid #edf1f3; }
  .mobile-instrument-fields .mobile-field-shell:last-child { border-bottom: 0; }
  .mobile-instrument-fields .property-group { margin: 0; padding: 0; border: 0; background: transparent; }
  .mobile-instrument-fields .property-group > label { display: block; margin: 0 0 7px; color: #5b6f7e; font-size: 11px; font-weight: 700; }
  .mobile-instrument-fields .field-input { width: 100%; min-height: 44px; border-color: #cedbe3; border-radius: 9px; background: #fbfdfe; }
  .mobile-instrument-fields .choice-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .mobile-instrument-fields .choice-input-option, .mobile-instrument-fields .choice-input-option span { width: 100%; }
  .mobile-instrument-fields .choice-input-option span { min-height: 44px; justify-content: center; }
  .button.primary { background: #4c91b5; border-color: #4c91b5; }
  .mobile-card-footer .mobile-card-action {
    min-width: auto; min-height: 34px; padding: 6px 4px 6px 10px; border: 0;
    background: transparent; color: #438db3; font-weight: 650; box-shadow: none;
  }
  .mobile-card-footer .mobile-card-action:active { background: #edf5f9; color: #2f7599; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select,
  textarea { font-size: 16px !important; }
}