:root {
  --ink: #172d36;
  --muted: #74838c;
  --faint: #99a5ad;
  --line: #e5eaed;
  --line-dark: #d5dfe3;
  --canvas: #f5f6f8;
  --surface: #fff;
  --teal: #087f77;
  --teal-dark: #086b65;
  --teal-soft: #e8f4f1;
  --amber: #b67b1e;
  --amber-soft: #fff5e4;
  --blue: #4778ba;
  --blue-soft: #edf3fc;
  --red: #c65352;
  --red-soft: #fff0ee;
  --shadow: 0 3px 12px rgba(29, 50, 61, .035);
  --sidebar: #142e39;
  font-family: Arial, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  font-synthesis: none;
  color: var(--ink);
  background: var(--canvas);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }
button, input, select, textarea { outline: 0; }
:focus-visible { outline: 3px solid #8dd5c9; outline-offset: 3px; }
input:focus, select:focus, textarea:focus { border-color: #65b8ad !important; box-shadow: 0 0 0 3px #e4f3ef; }
a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-dark); }
h1, h2, h3, h4, p { margin: 0; }
button svg, .nav-icon svg, .stat-icon svg, .tag svg, .activity-dot svg, .brand-mark svg { display: block; width: 20px; height: 20px; flex-shrink: 0; }
button svg { width: 17px; height: 17px; }
.app-shell { display: flex; min-height: 100vh; }

/* Quiet, persistent navigation. */
.sidebar { width: 216px; position: fixed; inset: 0 auto 0 0; display: flex; flex-direction: column; background: var(--sidebar); padding: 30px 16px 16px; color: #9db1b9; z-index: 35; }
.brand { display: flex; gap: 11px; align-items: center; padding: 0 9px 28px; }
.brand-mark { display: grid; place-items: center; width: 35px; height: 35px; color: #e8fbf4; border: 1px solid #2d696a; border-radius: 10px; background: #19504f; }
.brand-mark svg { width: 24px; height: 24px; }
.brand-title { color: #fff; font-size: 23px; font-weight: 700; letter-spacing: 3px; line-height: 1.15; }
.brand-subtitle { margin-top: 4px; color: #92aeb6; font-size: 10px; letter-spacing: 1.5px; }
.nav-section { margin-top: 13px; margin-bottom: 7px; padding: 0 14px; color: #637f8b; font-size: 10px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; }
.nav-item { position: relative; border: none; background: transparent; display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 13px; margin: 3px 0; border-radius: 8px; color: #aabfc7; font-size: 13px; text-align: left; transition: background .18s, color .18s; }
.nav-item:hover { color: #fff; background: #203d48; }
.nav-item.active { color: #e6fcf3; background: #24504f; font-weight: 600; }
.nav-item.active::before { content: ''; width: 3px; height: 17px; background: #67c5a8; position: absolute; left: -16px; border-radius: 0 2px 2px 0; }
.nav-icon { width: 20px; height: 20px; opacity: .85; flex-shrink: 0; }
.nav-badge { margin-left: auto; border-radius: 5px; padding: 0 6px; color: #daf1e9; background: rgba(126, 202, 174, .17); font-size: 10px; line-height: 19px; font-variant-numeric: tabular-nums; }
.sidebar-footer { margin-top: auto; padding: 16px 8px 0; }
.workspace-indicator { padding: 12px 8px 17px; margin-bottom: 15px; border-bottom: 1px solid #2a434e; font-size: 11px; line-height: 1.8; color: #8da7b1; }
.workspace-indicator::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 8px; background: #67bda3; border-radius: 50%; }
.user-meta { display: flex; gap: 10px; align-items: center; font-size: 12px; color: #d4e2e5; }
.user-meta small, .user-meta p { color: #77939f; font-size: 10px; }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 31px; height: 31px; flex-shrink: 0; border-radius: 50%; background: #dcebe5; color: #3f6b5d; font-size: 12px; font-weight: 700; }

.workspace { flex: 1; margin-left: 216px; min-width: 0; }
.topbar { height: 68px; background: #fff; padding: 0 36px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.breadcrumb { display: flex; align-items: center; gap: 10px; color: #8d9aa2; font-size: 12px; }
.breadcrumb svg { width: 15px; height: 15px; }
.breadcrumb strong { color: #405660; font-weight: 500; }
.topbar-actions { display: flex; align-items: center; gap: 16px; font-size: 11px; color: var(--muted); }
.mode-badge { display: inline-flex; align-items: center; gap: 7px; padding: 4px 9px; background: #f7f9fa; border: 1px solid var(--line); border-radius: 5px; color: #788b94; font-size: 10px; letter-spacing: .2px; }
.mode-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #9fb0b7; }
.page { max-width: 1510px; margin: auto; padding: 31px 36px 42px; }
.main-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 23px; }
.eyebrow { color: var(--teal); font-size: 10px; letter-spacing: 1.4px; font-weight: 700; margin-bottom: 5px; text-transform: uppercase; }
.page-title { font-size: 25px; line-height: 1.35; font-weight: 650; letter-spacing: -.7px; }
.page-description { color: var(--muted); font-size: 12px; line-height: 1.8; margin-top: 7px; }
.page-actions { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 15px; min-height: 36px; font-size: 12px; font-weight: 500; line-height: 1.4; border: 1px solid transparent; border-radius: 6px; background: #fff; color: #49606a; transition: background .18s, border-color .18s, box-shadow .18s, transform .18s; white-space: nowrap; }
.button:hover { box-shadow: 0 2px 5px #102e3810; }
.button:active { transform: translateY(1px); }
.button.primary, button.primary { color: #fff; background: var(--teal); border-color: var(--teal); }
.button.primary:hover { background: #066c65; border-color: #066c65; }
.button.secondary { border-color: #d8e1e5; background: #fff; color: #425a64; }
.button.secondary:hover { background: #f9fbfb; border-color: #b8cbd0; }
.button.ghost { background: transparent; border-color: transparent; color: var(--teal); }
.button.ghost:hover { background: #edf7f4; }
.button.danger { color: var(--red); border-color: #f0d4d0; background: #fff; }
.button.danger:hover { background: var(--red-soft); }
.button.small { min-height: 29px; padding: 6px 10px; font-size: 11px; border-radius: 5px; }
.button.small svg { width: 14px; height: 14px; }
.icon-button { border: 1px solid transparent; padding: 5px; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: #80919a; border-radius: 5px; }
.icon-button:hover { background: #eef3f4; color: #2c505b; }
.icon-button svg { width: 18px; height: 18px; }

.trial-banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 21px; border: 1px solid #dfe9e8; background: #eff5f4; border-radius: 6px; color: #728a8c; font-size: 11px; }
.trial-banner svg { width: 15px; height: 15px; color: #5b9690; flex-shrink: 0; }
.trial-banner strong { color: #3a6c68; font-weight: 500; }
.trial-banner .button, .trial-banner button { margin-left: auto; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; margin-bottom: 22px; }
.stat-card { position: relative; padding: 18px 19px 15px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow); min-width: 0; }
.stat-icon { float: right; width: 33px; height: 33px; display: grid; place-items: center; border-radius: 8px; color: #68948c; background: #f0f7f4; }
.stat-icon.amber { color: #ba8b44; background: #fff7e9; }
.stat-icon.blue { color: #7291bb; background: #f0f4fa; }
.stat-icon.gray { color: #8a9aa4; background: #f3f6f7; }
.stat-icon svg { width: 18px; height: 18px; }
.stat-value { font-size: 29px; line-height: 1.2; font-weight: 600; letter-spacing: -.8px; font-variant-numeric: tabular-nums; color: #19353e; }
.stat-label { color: #7c8c94; font-size: 11px; margin-top: 6px; }
.stat-foot { color: #a1adb3; font-size: 10px; margin-top: 11px; padding-top: 9px; border-top: 1px solid #f0f3f4; }
.stat-foot strong { color: #73958c; font-weight: 500; }
.workflow-strip { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 21px; padding: 14px 19px; border: 1px solid var(--line); background: #fff; border-radius: 7px; }
.workflow-step { display: flex; align-items: center; gap: 8px; color: #9aa9b0; font-size: 11px; }
.workflow-step > span:first-child, .step-number { display: grid; place-items: center; width: 21px; height: 21px; background: #f0f3f4; border: 1px solid #e2e9ec; border-radius: 50%; font-size: 10px; flex-shrink: 0; }
.workflow-step.is-done { color: #7c9792; }
.workflow-step.is-done > span:first-child { background: #e9f5f0; color: #38967d; border-color: #d5eae2; }
.workflow-step.is-current { color: #2a776e; font-weight: 600; }
.workflow-step.is-current > span:first-child { color: #fff; border-color: var(--teal); background: var(--teal); box-shadow: 0 0 0 3px #edf7f3; }
.workflow-strip > svg { width: 14px; height: 14px; color: #bdc9ce; }

/* Task queue: the primary place business users act. */
.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 270px; align-items: start; gap: 22px; }
.task-panel { min-width: 0; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 13px; }
.section-title { font-size: 15px; font-weight: 600; color: #25414b; letter-spacing: -.2px; }
.section-meta { color: #98a6ad; font-size: 10px; font-weight: 400; }
.section-title .section-meta { margin-left: 8px; }
.task-toolbar { border: 1px solid var(--line); border-radius: 7px; background: #fff; margin-bottom: 12px; }
.tabs { display: flex; align-items: stretch; padding: 0 16px; gap: 20px; border-bottom: 1px solid #edf1f3; }
.tab { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: transparent; border: 0; padding: 14px 1px 12px; color: #84939b; font-size: 11px; white-space: nowrap; }
.tab.active { color: var(--teal); font-weight: 600; }
.tab.active::after { content: ''; height: 2px; left: 0; right: 0; bottom: -1px; position: absolute; background: var(--teal); border-radius: 2px; }
.tab > span { min-width: 16px; padding: 0 4px; font-size: 9px; line-height: 15px; background: #f0f3f5; color: #94a4ad; border-radius: 3px; }
.tab.active > span { color: #2b8b7c; background: #eaf5f1; }
.task-search { display: flex; align-items: center; gap: 10px; padding: 11px 13px; }
.search-input { position: relative; flex: 1; min-width: 0; }
.search-input svg { position: absolute; width: 15px; height: 15px; top: 9px; left: 11px; color: #a3afb7; }
.search-input input { padding: 7px 11px 7px 33px; width: 100%; background: #f9fafb; border: 1px solid #e9eef1; border-radius: 5px; font-size: 11px; color: #455f6a; height: 33px; }
input::placeholder, textarea::placeholder { color: #a4afb5; }
.filter-select { padding: 6px 29px 6px 10px; background: #fff; color: #7d9099; border: 1px solid #e3eaed; border-radius: 5px; font-size: 11px; height: 33px; min-width: 112px; }
.task-list { display: flex; flex-direction: column; gap: 11px; }
.task-card { border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow); padding: 16px 18px 0; overflow: hidden; transition: border-color .18s, box-shadow .18s; }
.task-card:hover { border-color: #b9d6d0; box-shadow: 0 3px 14px #1c514911; }
.task-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.task-kind { color: #a0aeb5; font-size: 10px; }
.task-id { font-family: Arial, sans-serif; color: #a3b0b7; font-size: 10px; letter-spacing: .3px; margin-left: auto; }
.task-title { font-size: 14px; font-weight: 600; line-height: 1.65; color: #29444e; }
.task-summary { margin-top: 4px; color: #8d9ba3; font-size: 11px; line-height: 1.8; }
.task-info { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; font-size: 10px; color: #91a0a8; margin-top: 12px; padding-bottom: 14px; }
.task-info > span { display: inline-flex; align-items: center; gap: 5px; }
.task-info svg { width: 12px; height: 12px; color: #a7b4ba; }
.task-info strong { font-weight: 500; color: #637c87; }
.task-footer { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid #eff2f4; min-height: 51px; }
.task-customer { display: flex; align-items: center; gap: 7px; color: #83969f; font-size: 10px; }
.task-customer .avatar { width: 23px; height: 23px; font-size: 9px; border-radius: 5px; color: #7c9f93; background: #eef3f0; }
.task-action { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.task-action .button { font-size: 10px; min-height: 28px; padding: 5px 10px; }
.task-meta { display: flex; align-items: center; gap: 4px; color: #a0adb4; font-size: 10px; }
.task-meta svg { width: 12px; height: 12px; }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 4px; line-height: 1.65; font-size: 10px; font-weight: 500; color: #81949d; background: #f0f4f5; white-space: nowrap; }
.tag svg { width: 11px; height: 11px; }
.tag.amber, .pill.amber { background: var(--amber-soft); color: var(--amber); }
.tag.teal, .pill.teal { background: var(--teal-soft); color: #278f7c; }
.tag.blue, .pill.blue { background: var(--blue-soft); color: #5b82b6; }
.tag.red, .pill.red { background: var(--red-soft); color: var(--red); }
.tag.gray, .pill.gray { background: #f0f3f5; color: #8c9da6; }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 65px 25px; color: #8c9da6; background: #fff; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; }
.empty-state svg { width: 34px; height: 34px; color: #b5cac4; margin-bottom: 8px; }
.empty-state h3 { font-size: 15px; color: #5c777e; font-weight: 500; }

.aside-stack { display: flex; flex-direction: column; gap: 17px; }
.info-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 18px; box-shadow: var(--shadow); }
.info-card-title { display: flex; align-items: center; justify-content: space-between; color: #49616b; font-size: 12px; font-weight: 600; margin-bottom: 17px; }
.info-card-title svg { color: #9fb0b7; width: 15px; height: 15px; }
.activity-list { margin: 0; padding: 0; list-style: none; }
.activity-item { position: relative; display: flex; align-items: flex-start; gap: 9px; padding-bottom: 17px; font-size: 10px; color: #8c9ba3; line-height: 1.8; }
.activity-item:last-child { padding-bottom: 0; }
.activity-item:not(:last-child)::after { content: ''; position: absolute; width: 1px; top: 15px; bottom: 2px; left: 5px; background: #edf1f3; }
.activity-dot { width: 11px; height: 11px; border-radius: 50%; background: #e9f4ef; border: 3px solid #f7fbf9; box-shadow: 0 0 0 1px #d9e9e2; flex-shrink: 0; margin-top: 3px; z-index: 1; }
.activity-dot.amber { background: #e9c88a; box-shadow: 0 0 0 1px #f6ead2; }
.activity-dot.teal { background: #91b9aa; }
.activity-item strong { font-weight: 500; color: #5f7a84; }
.activity-item small { display: block; font-size: 9px; color: #a5b1b7; margin-top: 3px; }
.mini-checklist { display: flex; flex-direction: column; gap: 13px; }
.mini-check { display: flex; align-items: flex-start; gap: 8px; color: #8c9da5; font-size: 10px; line-height: 1.8; }
.mini-check > svg { margin-top: 3px; width: 13px; height: 13px; flex-shrink: 0; color: #6cab96; }
.mini-check strong { display: block; font-weight: 500; font-size: 11px; color: #607b83; }
.tip-card { background: #f0f5f3; border: 1px solid #e0eae5; color: #81968e; border-radius: 8px; padding: 16px 17px; font-size: 10px; line-height: 1.9; }
.tip-card h3 { display: flex; align-items: center; gap: 7px; color: #5a7b6e; font-size: 11px; font-weight: 600; margin-bottom: 7px; }
.tip-card svg { width: 14px; height: 14px; }
.progress-bar { height: 5px; background: #edf2f2; border-radius: 9px; overflow: hidden; margin: 12px 0 8px; }
.progress-bar > div, .progress-bar > span { display: block; height: 100%; border-radius: inherit; background: #69ab96; transition: width .3s; }

/* Ledgers and supporting screens. */
.table-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); overflow: hidden; }
.table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 13px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.table-toolbar .search-input { max-width: 330px; }
.table-wrap { width: 100%; overflow: auto; }
.data-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 11px; white-space: nowrap; }
.data-table th { padding: 12px 16px; background: #f8fafb; color: #83959f; font-size: 10px; font-weight: 500; border-bottom: 1px solid var(--line); }
.data-table td { padding: 15px 16px; color: #647d88; border-bottom: 1px solid #edf2f4; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr { transition: background .16s; }
.data-table tbody tr:hover { background: #f9fcfb; }
.data-table td .button { font-size: 10px; }
.mono { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace; letter-spacing: -.3px; }
.customer-cell { display: flex; align-items: center; gap: 8px; }
.customer-cell .avatar { width: 28px; height: 28px; font-size: 10px; border-radius: 6px; }
.customer-cell small { display: block; font-size: 9px; color: #a0afb6; }
.connection-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.connection-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 22px; display: flex; flex-direction: column; gap: 13px; box-shadow: var(--shadow); }
.connection-card > svg { color: #578d83; width: 25px; height: 25px; }
.connection-card h3 { font-size: 14px; font-weight: 600; }
.connection-card p { color: #8a9ba3; font-size: 11px; line-height: 1.9; }
.connection-card .button { margin-top: auto; }
.connection-status { display: inline-flex; align-items: center; gap: 6px; color: #90a1aa; font-size: 10px; }
.connection-status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #b9c6cc; }
.connection-status.is-connected { color: #3d947c; }
.connection-status.is-connected::before { background: #65af92; }
.settings-section { margin-bottom: 24px; }
.settings-section > h2 { font-size: 15px; margin-bottom: 12px; font-weight: 600; }
.settings-section > p { color: #8a9ca5; font-size: 11px; margin: -4px 0 15px; }
.rule-card { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: 7px; margin-bottom: 10px; }
.rule-card > svg { color: #6e9d8d; width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.rule-card h3 { font-weight: 500; font-size: 12px; }
.rule-card p { margin-top: 5px; color: #8c9ca4; font-size: 11px; line-height: 1.8; }
.rule-card .tag { margin-left: auto; }
.flow-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.flow-node { position: relative; padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.flow-node:not(:last-child)::after { content: '→'; position: absolute; top: 42%; right: -14px; z-index: 1; color: #a1b7bc; }
.flow-node h3 { margin: 12px 0 7px; font-size: 13px; }
.flow-node p { font-size: 11px; color: #8b9ca5; line-height: 1.9; }
.flow-node > svg { color: #69978a; width: 22px; height: 22px; }
.kbd, kbd { padding: 1px 5px; border: 1px solid #dae2e5; border-bottom-width: 2px; background: #f9fafb; border-radius: 4px; font-size: 10px; color: #7f929d; }
.pill { display: inline-flex; align-items: center; padding: 3px 9px; font-size: 10px; border-radius: 20px; background: #eef3f4; color: #7d949d; }
.inline-code { padding: 2px 5px; background: #f3f6f7; border-radius: 4px; color: #627d87; font: 11px Consolas, monospace; }
.split-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.allocation-summary { padding: 13px 15px; border: 1px solid #dbece6; border-radius: 6px; background: #eff7f3; color: #668e7f; font-size: 11px; display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; }

/* The detail drawer is a focused, bounded working surface. */
.drawer-backdrop, .modal-backdrop { position: fixed; inset: 0; background: rgba(15, 36, 45, .3); z-index: 80; backdrop-filter: blur(2px); animation: fade-in .18s ease-out; }
.drawer { position: fixed; top: 0; bottom: 0; right: 0; width: min(640px, 100vw); background: #fff; box-shadow: -10px 0 45px #0c2b3824; display: flex; flex-direction: column; z-index: 81; animation: drawer-in .25s ease-out; }
.drawer:not(.is-open)[hidden], .drawer-backdrop[hidden], .modal-backdrop[hidden], .modal[hidden] { display: none; }
.drawer-header { display: flex; align-items: flex-start; gap: 15px; padding: 24px 27px 20px; border-bottom: 1px solid var(--line); }
.drawer-header > div:first-child { flex: 1; }
.drawer-header .task-top { margin-bottom: 7px; }
.drawer-title { font-size: 19px; font-weight: 600; letter-spacing: -.4px; line-height: 1.5; }
.drawer-header p { color: #8d9fa7; font-size: 11px; margin-top: 7px; line-height: 1.8; }
.drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 27px 28px; scrollbar-width: thin; scrollbar-color: #d8e2e5 transparent; }
.drawer-body > h3 { font-size: 13px; font-weight: 600; margin: 23px 0 12px; }
.drawer-body > h3:first-child { margin-top: 0; }
.drawer-body > p { color: #8b9da5; font-size: 11px; line-height: 1.9; margin-bottom: 15px; }
.drawer-footer { border-top: 1px solid var(--line); padding: 17px 27px; background: #fbfcfc; display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.drawer-footer > span, .drawer-footer > p { margin-right: auto; font-size: 10px; color: #91a2aa; }
.drawer-tabs { display: flex; gap: 22px; padding: 0 27px; border-bottom: 1px solid var(--line); }
.drawer-tab { position: relative; border: 0; background: none; padding: 13px 0; color: #899ca5; font-size: 11px; }
.drawer-tab.active { color: var(--teal); font-weight: 600; }
.drawer-tab.active::after { content: ''; height: 2px; bottom: -1px; left: 0; right: 0; position: absolute; background: var(--teal); }
.record-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 21px; border: 1px solid var(--line); border-radius: 7px; background: #f9fbfc; padding: 17px; margin-bottom: 17px; }
.summary-cell { min-width: 0; }
.summary-cell.full { grid-column: 1 / -1; }
.field-label { display: block; margin-bottom: 5px; font-size: 10px; font-weight: 400; color: #9aa8af; }
.field-value { color: #587580; font-size: 11px; line-height: 1.8; overflow-wrap: anywhere; }
.field-value.mono { font-size: 10px; }
.callout { display: flex; align-items: flex-start; gap: 9px; padding: 13px 15px; margin: 15px 0; border: 1px solid #e0e8ec; border-radius: 6px; background: #f5f8fa; font-size: 11px; color: #82969f; line-height: 1.85; }
.callout > svg { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; }
.callout strong { color: #5b747f; font-weight: 500; }
.callout.warning { color: #a78b57; background: #fff9ee; border-color: #f1e5ce; }
.callout.warning strong { color: #a57a34; }
.callout.info { color: #718fa8; background: #f1f6fb; border-color: #dfe9f4; }
.callout.success { color: #6d9988; background: #f0f8f3; border-color: #dcece0; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 15px; }
.form-field { display: flex; flex-direction: column; min-width: 0; gap: 6px; }
.form-field.full, .form-grid > .full { grid-column: 1 / -1; }
.form-field > label { font-size: 11px; color: #718994; }
.form-field > label .required, .form-field > label > em { color: #cf876c; font-style: normal; margin-left: 2px; }
.form-field > small { font-size: 10px; color: #a0aeb6; line-height: 1.7; }
.input, .textarea, .select { width: 100%; padding: 9px 11px; border: 1px solid #dce5e9; border-radius: 5px; background: #fff; color: #53717e; font-size: 12px; line-height: 1.6; transition: border-color .16s, box-shadow .16s; }
.input, .select { min-height: 38px; }
.input[readonly], .input:disabled { background: #f8fafb; color: #92a3ab; }
.textarea { min-height: 87px; resize: vertical; }
.radio-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.radio-card { display: flex; align-items: flex-start; gap: 8px; padding: 12px; border: 1px solid #e1e9ec; border-radius: 6px; font-size: 11px; color: #718992; cursor: pointer; background: #fff; transition: border-color .15s, background .15s; }
.radio-card:hover { border-color: #9cc8bc; }
.radio-card:has(input:checked) { border-color: #72afa0; background: #f3faf6; color: #437b68; }
.radio-card input, .checkbox-line input { accent-color: var(--teal); flex-shrink: 0; margin: 2px 0 0; }
.radio-card small { display: block; color: #9babb2; font-size: 10px; margin-top: 2px; }
.checkbox-line { display: flex; align-items: flex-start; gap: 8px; color: #7c939c; font-size: 11px; line-height: 1.8; padding: 10px 0; cursor: pointer; }
.warehouse-options { display: flex; flex-direction: column; gap: 9px; margin: 12px 0; }
.warehouse-option { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border: 1px solid #e1e8ec; border-radius: 6px; cursor: pointer; font-size: 11px; color: #6c8791; }
.warehouse-option:has(input:checked), .warehouse-option.selected { border-color: #76b3a3; background: #f5faf7; }
.warehouse-option input { accent-color: var(--teal); margin: 3px 0 0; }
.warehouse-option strong { color: #4f6c77; font-weight: 500; }
.warehouse-option p { color: #93a4ad; font-size: 10px; margin-top: 3px; }
.warehouse-option .tag { margin-left: auto; }
.source-list { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.source-row { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid #e2eaed; border-radius: 6px; font-size: 11px; color: #69818b; }
.source-row .input { width: 90px; min-height: 31px; padding: 5px 8px; font-size: 11px; margin-left: auto; }
.source-row strong { color: #496b77; font-weight: 500; }
.source-row small { display: block; color: #a0aeb6; font-size: 10px; }
.timeline { border-left: 1px solid #dfe9ec; margin: 8px 0 0 5px; padding-left: 18px; }
.timeline-item { position: relative; font-size: 11px; color: #7c939d; line-height: 1.85; padding: 0 0 21px; }
.timeline-item::before { content: ''; position: absolute; left: -22px; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: #9db9ae; box-shadow: 0 0 0 4px #fff; }
.timeline-item small { color: #a7b4bb; font-size: 10px; display: block; }
.timeline-item:last-child { padding-bottom: 0; }

.modal-backdrop { z-index: 90; display: grid; place-items: center; padding: 25px; }
.modal { width: min(610px, calc(100vw - 40px)); max-height: calc(100vh - 50px); background: #fff; border: 1px solid #e4ecee; box-shadow: 0 20px 70px #102e3b33; border-radius: 12px; display: flex; flex-direction: column; animation: modal-in .2s ease-out; }
.modal-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; padding: 23px 25px 18px; border-bottom: 1px solid var(--line); }
.modal-header h2 { font-size: 18px; font-weight: 600; letter-spacing: -.4px; }
.modal-header p { color: #8ca0a9; font-size: 11px; margin-top: 6px; }
.modal-body { padding: 22px 25px; overflow-y: auto; min-height: 0; }
.modal-footer { padding: 17px 25px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 9px; background: #fbfcfc; border-radius: 0 0 12px 12px; }
.modal-footer p { margin-right: auto; font-size: 10px; color: #94a6ad; align-self: center; }
.dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 185px; border: 1px dashed #bad3ca; border-radius: 7px; background: #f8fcfa; text-align: center; padding: 25px; color: #88a198; font-size: 11px; cursor: pointer; transition: background .15s, border-color .15s; }
.dropzone:hover, .dropzone.dragover { background: #edf8f2; border-color: #67aa91; }
.dropzone > svg { width: 32px; height: 32px; color: #7ca594; margin-bottom: 5px; }
.dropzone strong { color: #4f7d6b; font-size: 12px; font-weight: 500; }
.dropzone input { width: 100%; max-width: 250px; font-size: 10px; margin-top: 9px; color: #789588; }
.import-preview { margin-top: 18px; padding: 16px; background: #f8fafb; border: 1px solid #e4ebee; border-radius: 6px; }
.import-preview h3 { font-size: 12px; font-weight: 500; margin-bottom: 10px; }
.import-status { display: flex; align-items: center; gap: 8px; color: #80969f; font-size: 11px; margin: 10px 0; }
.import-status svg { width: 15px; height: 15px; color: #6aa28c; }
.file-chip { display: inline-flex; align-items: center; gap: 6px; color: #54796c; background: #edf6ef; border: 1px solid #d9e9de; border-radius: 5px; padding: 7px 10px; font-size: 11px; }
.file-chip svg { width: 14px; height: 14px; }
.step-number { color: #6d9384; background: #edf7f0; border-color: #d4e8dc; width: 25px; height: 25px; }
.toast-container { position: fixed; bottom: 26px; left: calc(50% + 108px); transform: translateX(-50%); z-index: 120; display: flex; flex-direction: column; align-items: center; gap: 9px; pointer-events: none; width: min(520px, calc(100vw - 30px)); }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 9px; background: #fff; box-shadow: 0 6px 30px #143b4430; border: 1px solid #dfe9e6; border-radius: 8px; color: #557b6a; font-size: 12px; padding: 13px 20px; animation: modal-in .2s ease-out; }
.toast svg { width: 17px; height: 17px; color: #6fa68e; }
.toast.error { color: #ad6d62; border-color: #f0dcd7; }
.toast.error svg { color: #c28273; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes drawer-in { from { transform: translateX(45px); opacity: .7; } to { transform: translateX(0); opacity: 1; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }

@media (min-width: 1600px) {
  .page { padding-top: 37px; }
  .content-grid { grid-template-columns: minmax(0, 1fr) 290px; gap: 25px; }
  .task-card { padding: 18px 21px 0; }
  .task-title { font-size: 15px; }
  .task-summary { font-size: 12px; }
}
@media (max-width: 1180px) {
  .page { padding: 27px 25px 35px; }
  .topbar { padding: 0 25px; }
  .content-grid { grid-template-columns: minmax(0, 1fr) 235px; gap: 16px; }
  .info-card { padding: 15px; }
  .stats-grid { gap: 10px; }
  .stat-card { padding: 16px 14px 13px; }
  .stat-value { font-size: 26px; }
  .stat-icon { width: 29px; height: 29px; }
  .tabs { gap: 15px; }
  .task-card { padding-left: 15px; padding-right: 15px; }
  .task-footer { flex-wrap: wrap; }
  .task-meta { display: none; }
  .connection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-overview { gap: 12px; }
  .flow-node { padding: 17px; }
}
@media (max-width: 980px) {
  .sidebar { width: 188px; padding-left: 12px; padding-right: 12px; }
  .workspace { margin-left: 188px; }
  .brand { padding-left: 7px; gap: 9px; }
  .brand-title { font-size: 21px; }
  .nav-item { gap: 9px; padding-left: 10px; font-size: 12px; }
  .nav-item.active::before { left: -12px; }
  .page { padding: 25px 22px 32px; }
  .topbar { padding: 0 22px; height: 61px; }
  .topbar-actions { gap: 10px; }
  .main-header { align-items: flex-start; gap: 15px; }
  .page-title { font-size: 23px; }
  .page-description { max-width: 365px; font-size: 11px; }
  .page-actions { gap: 6px; }
  .page-actions .button { font-size: 11px; padding: 8px 11px; }
  .content-grid { grid-template-columns: minmax(0, 1fr); }
  .aside-stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 5px; }
  .aside-stack .tip-card { grid-column: 1 / -1; }
  .stats-grid { gap: 9px; }
  .stat-card { padding: 13px; }
  .stat-icon { width: 25px; height: 25px; border-radius: 6px; }
  .stat-icon svg { width: 14px; height: 14px; }
  .stat-value { font-size: 24px; }
  .stat-label { font-size: 10px; }
  .stat-foot { font-size: 9px; }
  .workflow-strip { padding: 13px; gap: 7px; }
  .workflow-step { gap: 5px; font-size: 10px; }
  .workflow-strip > svg { width: 10px; height: 10px; }
  .flow-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
  .flow-node:nth-child(2)::after { display: none; }
  .toast-container { left: calc(50% + 94px); }
}
@media (max-width: 720px) {
  .app-shell { display: block; padding-top: 110px; }
  .sidebar { width: 100%; height: 110px; padding: 11px 15px 0; inset: 0 0 auto; display: block; }
  .brand { padding: 0; gap: 8px; height: 37px; }
  .brand-mark { width: 28px; height: 28px; border-radius: 7px; }
  .brand-mark svg { width: 20px; height: 20px; }
  .brand-title { font-size: 17px; letter-spacing: 2px; }
  .brand-subtitle { font-size: 8px; margin-top: 2px; letter-spacing: 1px; }
  .sidebar nav, .sidebar > .nav-list { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin-top: 8px; }
  .sidebar nav::-webkit-scrollbar { display: none; }
  .nav-section, .sidebar-footer { display: none; }
  .nav-item { display: inline-flex; width: auto; margin: 0; padding: 9px 12px 10px; border-radius: 5px 5px 0 0; white-space: nowrap; font-size: 11px; gap: 6px; min-height: 42px; }
  .nav-item.active::before { top: auto; bottom: 0; left: 12px; right: 12px; width: auto; height: 2px; border-radius: 2px; }
  .nav-icon, .nav-icon svg { width: 16px; height: 16px; }
  .nav-badge { font-size: 8px; line-height: 16px; padding: 0 4px; }
  .workspace { margin-left: 0; }
  .topbar { height: 46px; padding: 0 18px; }
  .breadcrumb { font-size: 10px; gap: 6px; }
  .mode-badge { font-size: 8px; padding: 2px 6px; gap: 4px; }
  .topbar-actions > span:not(.mode-badge) { display: none; }
  .topbar-actions .avatar { width: 25px; height: 25px; font-size: 10px; }
  .page { padding: 21px 18px 30px; }
  .main-header { flex-wrap: wrap; margin-bottom: 18px; gap: 13px; }
  .eyebrow { font-size: 8px; margin-bottom: 4px; }
  .page-title { font-size: 22px; }
  .page-description { font-size: 11px; max-width: none; margin-top: 5px; }
  .page-actions { width: 100%; justify-content: flex-end; }
  .page-actions .button { padding: 8px 12px; }
  .trial-banner { font-size: 10px; align-items: flex-start; padding: 10px; line-height: 1.8; margin-bottom: 15px; }
  .trial-banner svg { margin-top: 2px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 17px; }
  .stat-card { padding: 14px; }
  .stat-value { font-size: 27px; }
  .stat-icon { width: 29px; height: 29px; }
  .stat-foot { margin-top: 8px; padding-top: 7px; }
  .workflow-strip { overflow-x: auto; justify-content: flex-start; padding: 12px; gap: 11px; margin-bottom: 18px; }
  .workflow-step { white-space: nowrap; }
  .workflow-step > span:first-child { width: 18px; height: 18px; font-size: 9px; }
  .workflow-strip > svg { flex-shrink: 0; }
  .section-heading { margin-bottom: 10px; }
  .section-title { font-size: 14px; }
  .section-meta { font-size: 9px; }
  .tabs { padding: 0 12px; gap: 19px; overflow-x: auto; scrollbar-width: none; }
  .tab { font-size: 10px; padding: 12px 0; }
  .task-search { padding: 10px; gap: 7px; }
  .filter-select { min-width: 95px; max-width: 120px; font-size: 10px; padding-left: 8px; }
  .search-input input { font-size: 10px; }
  .task-card { padding: 14px 14px 0; }
  .task-title { font-size: 13px; }
  .task-summary { font-size: 10px; }
  .task-info { margin-top: 10px; gap: 6px 13px; padding-bottom: 12px; }
  .task-top { gap: 6px; }
  .task-kind { font-size: 9px; }
  .task-id { font-size: 9px; }
  .tag { font-size: 9px; padding: 2px 6px; }
  .task-customer { font-size: 9px; }
  .task-action { gap: 4px; }
  .task-action .button { padding: 5px 8px; font-size: 9px; }
  .task-action .button svg { width: 12px; height: 12px; }
  .aside-stack { gap: 12px; }
  .info-card { padding: 14px; }
  .info-card-title { font-size: 11px; margin-bottom: 14px; }
  .activity-item { font-size: 9px; gap: 7px; }
  .mini-check { font-size: 9px; }
  .mini-check strong { font-size: 10px; }
  .tip-card { font-size: 9px; }
  .drawer { width: 100%; }
  .drawer-header { padding: 20px 20px 17px; }
  .drawer-title { font-size: 18px; }
  .drawer-body { padding: 19px 20px 25px; }
  .drawer-footer { padding: 14px 20px; gap: 7px; flex-wrap: wrap; }
  .drawer-footer .button { font-size: 11px; padding: 8px 11px; }
  .drawer-footer > span, .drawer-footer > p { flex-basis: 100%; font-size: 9px; }
  .drawer-tabs { padding: 0 20px; gap: 20px; }
  .drawer-tab { font-size: 10px; }
  .connection-grid { grid-template-columns: minmax(0, 1fr); gap: 13px; }
  .connection-card { padding: 18px; }
  .flow-overview { gap: 12px; }
  .flow-node { padding: 15px; }
  .flow-node h3 { font-size: 12px; }
  .flow-node p { font-size: 10px; }
  .table-toolbar { padding: 12px; flex-wrap: wrap; }
  .table-toolbar .search-input { flex-basis: 100%; max-width: none; }
  .data-table th { padding: 10px 13px; }
  .data-table td { padding: 12px 13px; }
  .rule-card { padding: 15px; gap: 10px; }
  .rule-card h3 { font-size: 11px; }
  .rule-card p { font-size: 10px; }
  .modal-backdrop { padding: 15px; }
  .modal { width: 100%; max-height: calc(100dvh - 30px); }
  .modal-header { padding: 19px 20px 15px; }
  .modal-header h2 { font-size: 17px; }
  .modal-body { padding: 19px 20px; }
  .modal-footer { padding: 14px 20px; }
  .modal-footer .button { padding: 8px 12px; font-size: 11px; }
  .toast-container { left: 50%; bottom: 18px; }
  .toast { padding: 11px 15px; font-size: 11px; }
}
@media (max-width: 400px) {
  .page { padding-left: 13px; padding-right: 13px; }
  .topbar { padding-left: 13px; padding-right: 13px; }
  .nav-item { padding-left: 9px; padding-right: 9px; gap: 5px; }
  .nav-badge { display: none; }
  .tabs { gap: 15px; }
  .task-id { display: none; }
  .task-info { gap: 5px 10px; }
  .task-footer { gap: 6px; }
  .task-customer { max-width: 125px; }
  .task-customer .avatar { display: none; }
  .task-action .button { padding: 5px 7px; }
  .aside-stack { grid-template-columns: minmax(0, 1fr); }
  .form-grid, .radio-group { grid-template-columns: minmax(0, 1fr); }
  .record-summary { padding: 14px; gap: 12px; }
  .drawer-header, .drawer-body { padding-left: 16px; padding-right: 16px; }
  .drawer-footer { padding-left: 16px; padding-right: 16px; }
  .source-row { padding: 11px; gap: 7px; }
  .source-row .input { width: 73px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .sidebar, .topbar, .page-actions, .task-action, .drawer-backdrop, .modal-backdrop, .toast-container { display: none !important; }
  .workspace { margin: 0; }
  .app-shell { display: block; padding: 0; }
  .page { max-width: none; padding: 0; }
  .task-card, .info-card, .stat-card, .table-card { box-shadow: none; break-inside: avoid; }
  .content-grid { grid-template-columns: minmax(0, 1fr); }
  .aside-stack { display: none; }
}

/* Bind the shared visual system to the concrete application markup. */
.skip-link { position: fixed; top: -70px; left: 20px; padding: 10px 16px; background: #fff; color: var(--teal); border-radius: 6px; z-index: 150; box-shadow: var(--shadow); }
.skip-link:focus { top: 12px; }
.brand-title { display: flex; align-items: baseline; gap: 6px; }
.brand-en { color: #688d97; font: 7px Arial, sans-serif; letter-spacing: 1px; }
.brand-subtitle { display: block; margin-top: 5px; letter-spacing: 1.7px; font-size: 9px; }
.sidebar-save { display: flex; align-items: center; gap: 6px; margin: -5px 0 19px; color: #6b8995; font-size: 9px; }
.sidebar-save svg { width: 12px; height: 12px; }
.workspace-indicator { padding: 10px 0 14px; display: flex; align-items: center; gap: 7px; }
.workspace-indicator::before { display: none; }
.workspace-indicator .activity-dot { width: 5px; height: 5px; border: 0; background: #72b89f; box-shadow: none; margin: 0; }
.workspace-indicator .pill { margin-left: auto; padding: 1px 5px; font-size: 7px; letter-spacing: .5px; color: #7eaaa1; background: #224448; }
.user-profile { display: flex; align-items: center; gap: 9px; padding: 0; width: 100%; border: 0; color: #c4d8df; background: none; text-align: left; }
.user-profile > svg { margin-left: auto; color: #5f7f8b; width: 14px; height: 14px; }
.user-profile .user-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.user-profile .user-meta strong { font-weight: 500; font-size: 11px; }
.user-profile .user-meta small { font-size: 8px; }
.page-footer { padding: 0 36px 21px; max-width: 1510px; margin: auto; display: flex; justify-content: space-between; gap: 18px; font-size: 9px; color: #b2bdc3; }
.mode-badge::before { display: none; }
.mode-badge > span { width: 5px; height: 5px; border-radius: 50%; background: #a6b5bc; }
.stat-card { display: block; text-align: left; color: var(--ink); transition: border-color .18s, transform .18s, box-shadow .18s; }
.stat-card:hover { border-color: #bad6cc; box-shadow: 0 4px 14px #244c4510; transform: translateY(-1px); }
.stat-card .stat-label { display: block; margin: 0 0 8px; color: #788e98; font-size: 11px; }
.stat-value { display: block; }
.stat-value small { margin-left: 7px; font-size: 10px; color: #abb7be; font-weight: 400; }
.stat-foot { display: flex; align-items: center; justify-content: space-between; gap: 7px; line-height: 1.8; }
.stat-foot svg { width: 11px; height: 11px; color: #b9c5cb; }
.stat-icon.red { color: #ce8e84; background: #fff3f0; }
.workflow-strip > i { height: 1px; background: #e6ecee; flex: 1; margin: 0 5px; }
.workflow-step > svg { width: 20px; height: 20px; border-radius: 50%; padding: 4px; border: 1px solid #d2e7df; color: #6caa93; background: #eaf6ef; }
.workflow-step .step-number { width: 21px; height: 21px; }
.section-title > span { margin-left: 4px; padding: 1px 6px; font-size: 10px; font-weight: 500; color: #819a9f; background: #e9eff0; border-radius: 4px; vertical-align: 1px; }
.task-filters { display: flex; gap: 10px; align-items: center; padding: 11px 13px; }
.task-filters .task-search { position: relative; display: block; padding: 0; flex: 1; min-width: 0; }
.task-search > svg { position: absolute; left: 11px; top: 9px; width: 15px; height: 15px; color: #a2b0b8; pointer-events: none; }
input.search-input { display: block; width: 100%; height: 33px; padding: 7px 11px 7px 33px; background: #f9fafb; border: 1px solid #e9eef1; border-radius: 5px; font-size: 11px; color: #455f6a; }
.task-top { align-items: flex-start; gap: 12px; margin-bottom: 0; }
.task-kind { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 8px; flex-shrink: 0; background: #f1f4f6; color: #8b9fa9; margin-top: 2px; }
.task-kind svg { width: 17px; height: 17px; }
.task-kind.amber { color: #bc914c; background: #fff6e9; }
.task-kind.blue { color: #7795bb; background: #edf3fb; }
.task-kind.red { color: #c68a7e; background: #fff1ed; }
.task-kind.teal { color: #629c8b; background: #ebf6f0; }
.task-content { flex: 1; min-width: 0; }
.task-title-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.task-title-row .tag { font-size: 9px; }
.task-info .task-id { margin-left: 0; font-size: 10px; color: #9eacb4; }
.task-info > span + span { position: relative; }
.task-info > span + span::before { content: ''; width: 1px; height: 8px; background: #e4e9ec; position: absolute; left: -9px; top: 50%; transform: translateY(-50%); }
.task-info .task-customer { color: #65838f; font-size: 10px; }
.task-footer { margin-top: 0; padding: 10px 0; }
.task-meta { display: inline-flex; gap: 6px; }
.mini-avatar { display: grid; place-items: center; height: 20px; width: 20px; color: #7e9a8f; background: #eef3ef; border-radius: 50%; font-size: 8px; }
.task-due { display: inline-flex; align-items: center; gap: 4px; margin-left: 9px; color: #a0adb5; font-size: 9px; }
.task-due.overdue { color: #c39070; }
button.task-action { font-size: 10px; min-height: 28px; padding: 6px 10px; }
button.task-action svg { width: 13px; height: 13px; }
.info-card-title { justify-content: flex-start; gap: 8px; }
.info-card-title > svg { color: #87ae9c; }
.mini-check { gap: 9px; }
.mini-check strong { display: inline; font-size: 10px; font-weight: 600; color: #668e7d; }
.info-card-divider { height: 1px; background: #eff3f4; margin: 16px 0 12px; }
.muted-small { color: #91a3ab; font-size: 10px; line-height: 1.9; }
.tip-label { display: block; color: #8eaa9a; font-size: 9px; letter-spacing: 1px; margin-bottom: 9px; }
.tip-card h3 { font-size: 12px; line-height: 1.8; margin-bottom: 7px; }
.tip-card .button { font-size: 9px; padding: 8px 0 0; justify-content: flex-start; color: #709684; }
.tip-card .button:hover { background: none; box-shadow: none; color: #477b64; }
.tip-card .button svg { width: 11px; height: 11px; }
.table-toolbar h2 { font-size: 13px; font-weight: 600; }
.table-sub { display: block; font-size: 9px; font-weight: 400; color: #a2b0b8; margin-top: 5px; line-height: 1.6; }
.data-table td > svg { width: 13px; height: 13px; color: #78a58e; vertical-align: -2px; margin-right: 5px; }
.page > .table-card, .page > .info-card { margin-bottom: 20px; }
.page > .connection-grid { margin-bottom: 23px; }
.import-card { display: flex; flex-direction: column; align-items: flex-start; padding: 23px; }
.import-card h2, .connection-card h2 { font-size: 14px; font-weight: 600; line-height: 1.7; }
.import-card h2 { margin-top: 13px; }
.import-card p, .page > .info-card > p { color: #8c9fa8; font-size: 11px; line-height: 1.9; margin: 9px 0 13px; }
.import-card .file-chip { margin-bottom: 19px; font-size: 9px; color: #8ca298; background: #f4f8f5; border-color: #e8efea; padding: 4px 7px; }
.import-card > .button { margin-top: auto; }
.large-icon { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 10px; background: #edf6f1; color: #719d87; }
.large-icon svg { width: 21px; height: 21px; }
.large-icon.blue { background: #eef3fa; color: #7e9bbd; }
.import-status { padding: 16px 20px; margin: 0; gap: 30px; }
.table-card > .callout { margin: 0 18px 15px; }
.table-card > .task-list { padding: 17px; }
.execution-submit { margin: -3px 0 23px; }
.connection-card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.connection-card-footer { border-top: 1px solid #edf2f4; padding-top: 13px; margin-top: 3px; display: flex; align-items: center; gap: 6px; color: #a4b1b8; font-size: 10px; }
.connection-card-footer svg { width: 12px; height: 12px; }
.rule-card { display: block; margin-bottom: 0; padding: 19px; }
.rule-card-heading { display: flex; align-items: center; gap: 9px; padding-bottom: 15px; border-bottom: 1px solid #edf2f4; }
.rule-card-heading .avatar { width: 28px; height: 28px; font-size: 11px; border-radius: 7px; background: #eef5f0; color: #6c9480; }
.rule-card-heading h2 { font-size: 13px; font-weight: 600; }
.rule-card-heading .icon-button { margin-left: auto; }
.rule-details { margin: 16px 0; display: flex; flex-direction: column; gap: 12px; }
.rule-details > div { display: flex; justify-content: space-between; gap: 20px; font-size: 10px; line-height: 1.8; }
.rule-details dt { color: #9aaab2; }
.rule-details dd { margin: 0; color: #6e8894; text-align: right; }
.allowed-actions { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 14px; border-top: 1px solid #edf2f4; }
.form-section-label { font-size: 12px; color: #5e7c86; font-weight: 600; margin: 10px 0 0; padding-top: 16px; border-top: 1px solid #edf1f3; }
.form-section-label:first-child { margin: 0; padding: 0; border-top: 0; }
.form-field .field-label { margin-bottom: 0; font-size: 11px; color: #8298a2; }
.radio-card.is-disabled { cursor: not-allowed; background: #fafbfc; color: #bec8cd; }
.radio-card.is-disabled:hover { border-color: #e1e9ec; }
.raw-remark { margin: 12px 0 17px; padding: 14px; background: #f9fbfc; border: 1px solid #e5ecef; border-radius: 6px; color: #849ba5; font-size: 11px; line-height: 2; overflow-wrap: anywhere; }
.issue-list { padding-left: 17px; color: #ae8c62; font-size: 11px; line-height: 2; margin-bottom: 4px; }
.source-row > span > svg { width: 16px; height: 16px; color: #95aaa9; }
.source-row > div:last-child { margin-left: auto; text-align: right; }
.source-row .table-sub { font-size: 9px; margin-top: 3px; }
.timeline-item { display: flex; gap: 0; }
.timeline-item > .activity-dot { display: none; }
.timeline-item strong { font-weight: 500; }
.timeline-item p { font-size: 9px; color: #a3b2b9; margin-top: 4px; }
.drawer-footer { justify-content: space-between; }
.drawer-footer > .page-actions { margin-left: auto; }
.drawer-footer > .button.ghost { padding-left: 0; }
.drawer-footer .button { font-size: 11px; }
.modal.wide { width: min(760px, calc(100vw - 40px)); }
.modal-body > p { color: #8299a3; font-size: 11px; line-height: 1.9; margin-bottom: 17px; }
.modal-body > .form-field { margin-top: 17px; }
.modal-body .flow-overview { grid-template-columns: 1fr; gap: 13px; margin-bottom: 0; }
.modal-body .flow-node { display: flex; gap: 14px; padding: 13px 15px; background: #fafcfb; }
.modal-body .flow-node::after { display: none; }
.modal-body .flow-node .step-number { margin-top: 1px; }
.modal-body .flow-node h3 { margin: 0 0 4px; font-size: 12px; }
.modal-body .flow-node p { font-size: 10px; }
.dropzone.dragging { background: #edf8f2; border-color: #67aa91; }
.import-preview:empty { display: none; }
.import-preview > p { color: #8199a3; font-size: 11px; margin: 11px 0; }
.import-preview .data-table { table-layout: fixed; white-space: normal; min-width: 420px; }
.import-preview .data-table th, .import-preview .data-table td { overflow-wrap: anywhere; font-size: 10px; padding: 9px; }
#split-rows { display: flex; flex-direction: column; gap: 13px; margin: 20px 0 12px; }
#split-rows .split-row { align-items: flex-end; gap: 12px; }
#split-rows .split-row > .step-number { margin-bottom: 8px; }
#split-rows .split-row > .form-field { flex: 1; }
#split-rows .split-row > .form-field:last-child { max-width: 160px; }

@media (max-width: 1180px) {
  .task-title { font-size: 13px; }
  .task-title-row { gap: 7px; }
  .task-kind { width: 29px; height: 29px; border-radius: 7px; }
  .task-kind svg { width: 15px; height: 15px; }
  .task-top { gap: 10px; }
  .page-footer { padding-left: 25px; padding-right: 25px; }
}
@media (max-width: 980px) {
  .task-meta { display: inline-flex; }
  .task-due { margin-left: 4px; }
  .page-footer { padding-left: 22px; padding-right: 22px; }
  .brand-en { font-size: 6px; letter-spacing: .6px; }
  .brand-title { gap: 4px; }
  .stat-card .stat-label { font-size: 10px; }
  .stat-foot { font-size: 9px; }
  .stat-foot svg { display: none; }
}
@media (max-width: 720px) {
  .sidebar { display: grid; grid-template-columns: minmax(0, 1fr) 80px; grid-template-rows: 38px 49px; column-gap: 6px; padding-top: 10px; height: 107px; }
  .app-shell { padding-top: 107px; }
  .sidebar .brand { grid-column: 1 / -1; align-self: start; }
  .brand-title { display: flex; gap: 7px; }
  .brand-en { font-size: 6px; letter-spacing: 1px; }
  .brand-subtitle { font-size: 7px; margin-top: 3px; letter-spacing: 1.4px; }
  .sidebar nav { margin-top: 4px; align-self: end; }
  .sidebar nav[aria-label="主要导航"] { grid-column: 1; grid-row: 2; }
  .sidebar nav[aria-label="管理导航"] { grid-column: 2; grid-row: 2; margin-left: 0; padding-left: 4px; border-left: 1px solid #2c4650; gap: 1px; overflow: visible; }
  .sidebar nav[aria-label="管理导航"] .nav-item { font-size: 0; width: 36px; justify-content: center; padding: 9px 6px 10px; }
  .sidebar nav[aria-label="管理导航"] .nav-icon { flex-shrink: 0; }
  .sidebar nav[aria-label="管理导航"] .nav-item.active::before { left: 6px; right: 6px; }
  .task-filters { padding: 10px; gap: 7px; }
  input.search-input { font-size: 10px; }
  .task-top { gap: 9px; }
  .task-title-row { align-items: flex-start; }
  .task-title-row .tag { font-size: 8px; padding: 2px 5px; margin-top: 1px; }
  .task-kind { width: 27px; height: 27px; }
  .task-kind svg { width: 14px; height: 14px; }
  .task-title { font-size: 12px; }
  .task-info .task-customer, .task-info .task-id { font-size: 9px; }
  .task-info { font-size: 9px; }
  .task-meta { font-size: 9px; gap: 4px; }
  .mini-avatar { width: 17px; height: 17px; font-size: 7px; }
  .task-due { font-size: 8px; margin-left: 4px; }
  .task-due svg { width: 10px; height: 10px; }
  button.task-action { font-size: 9px; padding: 6px 8px; }
  .mini-check strong { font-size: 9px; }
  .workflow-strip > i { min-width: 12px; flex-shrink: 0; margin: 0; }
  .stat-card .stat-label { font-size: 10px; margin-bottom: 7px; }
  .stat-value small { font-size: 9px; }
  .stat-foot { font-size: 9px; }
  .stat-foot svg { display: block; }
  .task-customer { max-width: none; }
  .page-footer { padding: 0 18px 18px; flex-direction: column; gap: 4px; font-size: 8px; }
  .drawer-footer { flex-wrap: nowrap; gap: 8px; }
  .drawer-footer > .page-actions { width: auto; gap: 7px; }
  .drawer-footer .button { font-size: 10px; padding: 8px 10px; }
  .drawer-footer > .button.ghost { font-size: 9px; padding-left: 0; }
  .drawer-footer > .button.ghost svg { width: 13px; height: 13px; }
  .modal.wide { width: 100%; }
  .rule-card { padding: 17px; }
  .import-status { gap: 15px; padding: 14px 17px; flex-wrap: wrap; }
  .import-card { padding: 19px; }
  .execution-submit { flex-wrap: wrap; justify-content: flex-start; }
  .page > .info-card > .page-actions { justify-content: flex-start; flex-wrap: wrap; }
}
@media (max-width: 400px) {
  .sidebar { grid-template-columns: minmax(0, 1fr) 68px; padding-left: 10px; padding-right: 10px; column-gap: 4px; }
  .sidebar nav[aria-label="主要导航"] { gap: 1px; }
  .sidebar nav[aria-label="主要导航"] .nav-item { padding-left: 8px; padding-right: 8px; gap: 4px; font-size: 10px; }
  .sidebar nav[aria-label="主要导航"] .nav-icon { display: none; }
  .sidebar nav[aria-label="管理导航"] .nav-item { width: 29px; }
  .task-info .task-id { display: inline-flex; }
  .task-meta .mini-avatar { display: none; }
  .task-due { margin-left: 3px; }
  .task-info { gap: 5px 13px; }
  .task-info > span + span::before { left: -7px; }
  .task-title-row .tag { font-size: 7px; }
  .drawer-footer .button { font-size: 9px; padding: 8px 8px; }
  .drawer-footer > .page-actions { gap: 4px; }
  .drawer-footer > .button.ghost svg { display: none; }
  #split-rows .split-row { gap: 7px; }
  #split-rows .split-row > .form-field:last-child { max-width: 95px; }
  #split-rows .split-row > .step-number { width: 19px; height: 19px; font-size: 8px; }
  #split-rows .input { font-size: 10px; padding-left: 8px; padding-right: 8px; }
  #split-rows .field-label { font-size: 9px; }
}

/* Version 0.2: feedback intake, visible ledger changes, and Agent handoff. */
.pipeline-v2 { gap: 10px; padding: 10px 12px; margin-bottom: 23px; overflow: hidden; }
.pipeline-v2 .workflow-step { display: flex; flex: 1; align-items: center; gap: 10px; padding: 10px 11px; border: 0; border-radius: 6px; background: transparent; color: #92a3ad; text-align: left; white-space: normal; min-width: 0; line-height: 1.6; transition: background .15s, color .15s; }
.pipeline-v2 .workflow-step:hover { background: #f5f9f7; color: #628d7e; }
.pipeline-v2 .workflow-step.is-current { background: #edf7f2; color: #3d8070; }
.pipeline-v2 .workflow-step > span:not(.step-number) { display: block; min-width: 0; }
.pipeline-v2 .workflow-step strong { display: block; font-size: 11px; font-weight: 600; line-height: 1.6; }
.pipeline-v2 .workflow-step small { display: block; margin-top: 3px; color: #a5b1b8; font-size: 9px; line-height: 1.7; font-weight: 400; }
.pipeline-v2 .workflow-step.is-current small { color: #85a99a; }
.pipeline-v2 .step-number { width: 25px; height: 25px; font-size: 10px; flex-shrink: 0; }
.pipeline-v2 > i { flex: 0 1 25px; min-width: 10px; margin: 0; background: #e5ecee; }

.ledger-v2 { min-width: 1420px; }
.ledger-v2 .ledger-groups th { padding-top: 10px; padding-bottom: 10px; color: #7b919c; background: #eef3f5; border-right: 1px solid #e0e8eb; letter-spacing: .3px; font-size: 10px; }
.ledger-v2 .ledger-groups th:nth-child(2) { color: #638d7c; background: #edf6f0; border-right-color: #dce9e1; border-left: 1px solid #dce9e1; }
.ledger-v2 thead tr:not(.ledger-groups) th:nth-child(n+4):nth-child(-n+7) { background: #f4faf6; color: #7f9d8f; }
.ledger-v2 tbody td:nth-child(n+4):nth-child(-n+7) { background: #fcfefc; }
.ledger-v2 tbody tr:hover td { background: #f7fafb; }
.ledger-v2 tbody tr:hover td:nth-child(n+4):nth-child(-n+7) { background: #f3faf5; }
.ledger-v2 tr:not(.ledger-groups) > :nth-child(4), .ledger-v2 tr:not(.ledger-groups) > :nth-child(8) { border-left: 1px solid #e0eae4; }
.ledger-v2 td { vertical-align: top; line-height: 1.8; }
.ledger-v2 td:first-child { min-width: 205px; }
.ledger-v2 td:nth-child(2) { min-width: 185px; }
.ledger-v2 td:nth-child(3) { min-width: 105px; }
.ledger-v2 td:nth-child(4) { min-width: 235px; max-width: 295px; white-space: normal; overflow-wrap: anywhere; }
.ledger-v2 td:nth-child(5) { min-width: 150px; }
.ledger-v2 td:nth-child(6) { min-width: 185px; }
.ledger-v2 td:nth-child(7) { min-width: 135px; }
.ledger-v2 td:nth-child(8) { min-width: 225px; max-width: 290px; white-space: normal; }
.ledger-v2 td:nth-child(8) .table-sub { line-height: 1.9; color: #9babb3; overflow-wrap: anywhere; }
.ledger-v2 .table-sub { margin-top: 5px; }

.feedback-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 22px; align-items: start; margin-bottom: 24px; }
.feedback-layout > * { min-width: 0; }
.feedback-composer { padding: 22px; }
.feedback-composer .section-heading { margin-bottom: 10px; }
.feedback-composer > .muted-small { line-height: 1.95; max-width: 680px; }
.feedback-composer .scope-field { margin: 20px 0 18px; }
.feedback-composer .field-label { font-size: 11px; margin-bottom: 1px; }
.feedback-composer .select { min-height: 37px; background: #fbfcfc; font-size: 11px; }
.feedback-input { min-height: 245px; padding: 14px 15px; line-height: 2; background: #fcfdfd; font-size: 12px; color: #55747e; resize: vertical; overflow-wrap: anywhere; tab-size: 4; }
.feedback-input::placeholder { color: #b0bdc3; line-height: 2; }
.composer-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; padding-top: 15px; }
.feedback-composer > .callout:last-child { margin-bottom: 0; margin-top: 20px; font-size: 10px; }
.feedback-report { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: baseline; column-gap: 11px; row-gap: 10px; }
.feedback-report strong { color: #4f8171; font-size: 22px; line-height: 1.4; font-weight: 500; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.feedback-report span { color: #90a29f; font-size: 10px; }
.feedback-preview-card { margin-bottom: 23px; }
.feedback-preview-card .table-toolbar { background: #fafcfb; padding: 18px 21px; }
.feedback-preview-card .table-toolbar h2 { font-size: 14px; color: #456e5d; }
.feedback-preview-card .table-toolbar p { margin-top: 5px; }
.preview-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 27px; padding: 18px 22px; background: #f3f8f5; border-bottom: 1px solid #e5eee8; }
.preview-summary > span { display: inline-flex; align-items: baseline; gap: 5px; font-size: 10px; color: #8ba295; }
.preview-summary strong { font-size: 21px; font-weight: 500; color: #5c8a74; line-height: 1.2; font-variant-numeric: tabular-nums; }
.feedback-preview-card > .callout { margin: 14px 21px; }
.feedback-preview-card > .callout ul { margin: 7px 0 0; padding-left: 15px; font-size: 10px; line-height: 2; }
.feedback-change { padding: 20px 21px; border-bottom: 1px solid #eaf0ed; }
.feedback-change:last-child { border-bottom: 0; }
.feedback-change > .task-title-row { justify-content: flex-start; gap: 7px; margin-bottom: 12px; flex-wrap: wrap; }
.feedback-change > .task-title-row > strong { color: #65887a; font-size: 11px; margin-right: auto; font-weight: 500; }
.feedback-change .table-wrap { border: 1px solid #e4ece7; border-radius: 5px; }
.compact-diff { table-layout: fixed; white-space: normal; min-width: 420px; }
.compact-diff th { font-size: 9px; padding: 9px 12px; }
.compact-diff td { font-size: 10px; padding: 10px 12px; overflow-wrap: anywhere; word-break: break-word; vertical-align: top; line-height: 1.8; }
.compact-diff th:first-child, .compact-diff td:first-child { width: 24%; color: #96a7af; }
.compact-diff td:nth-child(2) { color: #a5b3bb; background: #fcfdfd; }
.compact-diff th:nth-child(3), .compact-diff td:nth-child(3) { background: #f4faf5; border-left: 1px solid #e5efe8; }
.compact-diff td:nth-child(3) strong { font-weight: 500; color: #648976; }
.inline-result { padding: 10px 12px; border-radius: 4px; font-size: 10px; line-height: 1.85; margin: 12px 0 0; overflow-wrap: anywhere; }
.inline-result.teal { background: #f0f8f2; color: #74a08b; }
.inline-result.amber { background: #fff8ed; color: #b19a71; }
.feedback-evidence { padding: 15px; margin: 13px 0; border: 1px solid #e2ebee; background: #fbfcfd; border-radius: 6px; }
.feedback-evidence > small { float: right; color: #a5b5bc; font-size: 9px; line-height: 22px; }
.feedback-evidence > pre, .feedback-raw { display: block; max-width: 100%; margin: 12px 0 0; padding: 13px 14px; border: 1px solid #e7edf0; border-radius: 5px; background: #f6f8fa; color: #8a9fa9; font: 10px/1.9 Consolas, 'Microsoft YaHei', monospace; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; tab-size: 4; }
.feedback-evidence > pre { margin-bottom: 0; background: #fff; font-size: 9px; }
.task-card > .feedback-raw { margin: 11px 0 13px; background: #f8fafb; }
.modal-body > .feedback-raw { margin-top: 0; margin-bottom: 17px; }
.modal-body details { margin: 14px 0 20px; border: 1px solid #e4ebee; border-radius: 6px; background: #fafdfe; overflow: hidden; }
.modal-body details > summary { padding: 11px 14px; color: #7d959f; font-size: 11px; cursor: pointer; list-style-position: inside; }
.modal-body details > summary:hover { background: #f4f8f8; }
.modal-body details > .feedback-raw { margin: 0; border: 0; border-top: 1px solid #e8eef0; border-radius: 0; background: #fff; }
.conflict-row { margin-top: 13px; padding: 15px; background: #fffbf4; border: 1px solid #efe3cc; border-radius: 6px; }
.conflict-row > strong { display: block; color: #a58c5e; font-size: 11px; font-weight: 500; margin-bottom: 9px; }
.conflict-row > label { display: flex; align-items: flex-start; gap: 8px; font-size: 11px; line-height: 1.9; color: #a5967b; cursor: pointer; border: 1px solid #eee5d5; border-radius: 4px; background: #fff; padding: 9px 11px; overflow-wrap: anywhere; margin-top: 7px; transition: background .15s, border-color .15s; }
.conflict-row > label:has(input:checked) { border-color: #78b099; background: #f5fbf6; color: #6d9481; }
.conflict-row input[type="radio"] { margin: 4px 0 0; accent-color: #498c70; flex-shrink: 0; }
.handoff-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.handoff-stats .stat-card { cursor: default; }
.handoff-stats .stat-card:hover { transform: none; border-color: var(--line); box-shadow: var(--shadow); }

/* Evidence based AI assistance lives inside the existing feedback workflow. */
.feedback-ai-status { display: flex; align-items: flex-start; gap: 10px; border: 1px solid #e5e9ed; border-radius: 6px; background: #f8fafb; padding: 13px 14px; margin: 17px 0 0; color: #8a9da6; }
.feedback-ai-status.is-configured { border-color: #dcebe3; background: #f4faf6; }
.feedback-ai-status .ai-status-icon { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 6px; color: #9db0ba; background: #edf2f5; flex-shrink: 0; margin-top: 1px; }
.feedback-ai-status.is-configured .ai-status-icon { color: #6c9a85; background: #e6f2e9; }
.feedback-ai-status .ai-status-icon svg { width: 15px; height: 15px; }
.feedback-ai-status > div { min-width: 0; }
.feedback-ai-status strong { font-size: 11px; color: #718a95; font-weight: 500; }
.feedback-ai-status.is-configured strong { color: #5c8a73; }
.feedback-ai-status p { font-size: 9px; line-height: 1.9; margin-top: 3px; color: #9baeb6; }
.feedback-ai-status small { display: block; font: 8px/1.8 Consolas, monospace; color: #a3b6ad; margin-top: 3px; overflow-wrap: anywhere; }
.feedback-ai-status > .button { margin-left: auto; font-size: 9px; min-height: 24px; padding: 4px 5px; align-self: center; flex-shrink: 0; }
.feedback-selection-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.feedback-selection-grid .scope-field { margin-bottom: 0; min-width: 0; }
.feedback-selection-grid select { max-width: 100%; text-overflow: ellipsis; }
.feedback-selection-hint { margin: 8px 0 17px; font-size: 9px; }
.ai-composer-actions { flex-wrap: wrap; gap: 8px; }
.ai-composer-actions > .button:first-child { margin-right: auto; padding-left: 0; }
.ai-composer-actions > .button { font-size: 10px; padding: 9px 12px; }
.feedback-ai-notice { font-size: 9px; line-height: 1.9; margin-top: 14px; color: #a0b0b6; }
#feedback-ai-error:empty { display: none; }
#feedback-ai-error .callout { margin-bottom: 0; }
.feedback-ai-result-card > .callout:last-child { margin: 16px 21px 19px; font-size: 10px; }
.feedback-ai-result-card .feedback-change .task-title-row .button { font-size: 9px; padding: 4px 7px; margin-left: auto; }
.ai-field-evidence { display: block; color: #91ac9d; font-size: 9px; margin-top: 6px; line-height: 1.9; font-weight: 400; }
.ai-review-list { padding: 20px 21px; border-bottom: 1px solid #edf1ef; }
.ai-review-list > h3 { color: #8e826a; font-size: 12px; font-weight: 500; margin-bottom: 12px; }
.ai-review-item { display: flex; gap: 9px; padding: 12px 13px; border: 1px solid #f0e8d8; border-radius: 5px; background: #fffbf4; margin-top: 8px; }
.ai-review-item > svg { width: 14px; height: 14px; color: #c4a77b; flex-shrink: 0; margin-top: 2px; }
.ai-review-item > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ai-review-item strong { font-size: 10px; font-weight: 500; color: #ad997a; }
.ai-review-item .tag { margin-left: 6px; font-size: 8px; }
.ai-review-item p { font-size: 9px; color: #b9ac97; line-height: 1.9; margin-top: 5px; }
.ai-review-item .button { display: flex; width: fit-content; padding: 5px 0 0; font-size: 9px; min-height: 24px; }
.ai-result-evidence { margin: 0; border-bottom: 1px solid #e8efeb; background: #fcfdfd; }
.ai-result-evidence > summary { cursor: pointer; padding: 16px 21px; color: #8a9f9a; font-size: 10px; }
.ai-result-evidence > summary:hover { background: #f7faf8; }
.ai-result-evidence > div { padding: 0 21px 19px; }
.ai-result-evidence h3 { margin-top: 9px; color: #8b9e97; font-weight: 500; font-size: 10px; }
.ai-result-evidence pre { margin-top: 8px; margin-bottom: 15px; max-height: 360px; overflow-y: auto; }
.ai-result-evidence .muted-small { margin-top: 10px; font-size: 8px; }
.ai-evaluation-entry { padding: 8px 0 0; font-size: 9px; min-height: 25px; color: #8aa297; }
.ai-evaluation-entry svg { width: 12px; height: 12px; }
.ai-evaluation-dropzone { min-height: 125px; margin: 15px 0; }
.ai-evaluation-dropzone > svg { width: 24px; height: 24px; }
.ai-evaluation-summary { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 18px 0; padding: 13px; border: 1px solid #e0ebe4; background: #f5faf6; border-radius: 5px; }
.ai-evaluation-summary strong { font-size: 11px; font-weight: 500; color: #7b9b88; overflow-wrap: anywhere; }
.ai-evaluation-summary p { font-size: 9px; color: #a2b4a7; margin-top: 4px; line-height: 1.8; }
.ai-evaluation-list { display: flex; flex-direction: column; gap: 13px; }
.ai-evaluation-case { padding: 15px; border: 1px solid #e4ebee; border-radius: 6px; background: #fff; min-width: 0; }
.ai-evaluation-case > .task-title-row > strong { font-size: 11px; color: #6f8d98; }
.ai-evaluation-case details { background: #f9fbfc; margin: 11px 0 0; border: 1px solid #e7edf0; }
.ai-evaluation-case details > summary { padding: 8px 11px; font-size: 9px; color: #92a5ae; cursor: pointer; }
.ai-evaluation-case details .feedback-raw { margin: 0; border: 0; border-top: 1px solid #e8eef0; max-height: 220px; overflow-y: auto; font-size: 9px; }
.ai-evaluation-metrics { display: flex; align-items: center; flex-wrap: wrap; gap: 15px; color: #8ba598; font-size: 9px; margin: 13px 0 10px; }
.ai-evaluation-totals { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 23px; margin: -6px 0 17px; padding: 12px 14px; border: 1px solid #e0ebe4; border-radius: 5px; background: #f6faf7; font-size: 10px; color: #91a69a; }
.ai-evaluation-totals strong { margin: 0 3px; color: #6e947c; font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
.ai-evaluation-case .table-wrap { border: 1px solid #e4ece7; border-radius: 5px; }
.ai-evaluation-case .compact-diff { min-width: 460px; }
.ai-evaluation-missing { color: #a5b4ba; font-size: 9px; line-height: 1.9; margin-top: 12px; }
.ai-evaluation-review { margin: 10px 0 0; padding: 10px 12px 10px 24px; background: #fffbf2; border: 1px solid #f1e9d8; border-radius: 4px; color: #b1a084; font-size: 9px; line-height: 1.9; }
.ai-evaluation-empty { padding: 10px 0; }
@media (max-width: 1180px) {
  .feedback-selection-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .feedback-selection-grid .scope-field + .scope-field { margin-top: 13px; }
  .ai-composer-actions > .button { font-size: 9px; padding: 8px 9px; }
}
@media (max-width: 980px) {
  .feedback-selection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
  .feedback-selection-grid .scope-field + .scope-field { margin-top: 20px; }
}
@media (max-width: 720px) {
  .feedback-selection-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .feedback-selection-grid .scope-field + .scope-field { margin-top: 13px; }
  .feedback-ai-status { padding: 11px; gap: 8px; }
  .feedback-ai-status strong { font-size: 10px; }
  .feedback-ai-status > .button { font-size: 8px; }
  .feedback-ai-status p, .feedback-ai-notice, .feedback-selection-hint { font-size: 8px; }
  .ai-composer-actions { justify-content: flex-end; }
  .ai-composer-actions > .button:first-child { margin-right: auto; }
  .ai-composer-actions > .button.primary { flex-basis: 100%; min-height: 36px; font-size: 11px; }
  .ai-review-list { padding: 16px; }
  .ai-result-evidence > summary { padding-left: 16px; padding-right: 16px; }
  .ai-result-evidence > div { padding-left: 16px; padding-right: 16px; }
  .feedback-ai-result-card > .callout:last-child { margin-left: 16px; margin-right: 16px; font-size: 9px; }
}

@media (max-width: 1180px) {
  .feedback-layout { grid-template-columns: minmax(0, 1fr) 250px; gap: 16px; }
  .feedback-composer { padding: 19px; }
  .pipeline-v2 { gap: 5px; padding: 9px; }
  .pipeline-v2 .workflow-step { padding: 9px 7px; gap: 7px; }
  .pipeline-v2 .workflow-step strong { font-size: 10px; }
  .pipeline-v2 .workflow-step small { font-size: 8px; }
  .pipeline-v2 > i { flex-basis: 10px; }
  .pipeline-v2 .step-number { width: 22px; height: 22px; font-size: 9px; }
}
@media (max-width: 980px) {
  .feedback-layout { grid-template-columns: minmax(0, 1fr); }
  .feedback-layout > .aside-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feedback-layout > .aside-stack > .tip-card { grid-column: auto; }
  .feedback-layout > .aside-stack > :last-child:nth-child(3) { grid-column: 1 / -1; }
  .feedback-layout .feedback-report { grid-template-columns: auto 1fr auto 1fr auto 1fr; row-gap: 0; }
  .pipeline-v2 { flex-wrap: nowrap; }
  .pipeline-v2 .workflow-step { gap: 6px; padding: 9px 5px; }
  .pipeline-v2 .workflow-step small { font-size: 7px; }
  .pipeline-v2 .step-number { width: 19px; height: 19px; font-size: 8px; }
  .pipeline-v2 > i { min-width: 6px; flex-basis: 6px; }
}
@media (max-width: 720px) {
  .pipeline-v2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; padding: 7px; }
  .pipeline-v2 > i { display: none; }
  .pipeline-v2 .workflow-step { gap: 8px; padding: 10px; }
  .pipeline-v2 .workflow-step strong { font-size: 10px; }
  .pipeline-v2 .workflow-step small { font-size: 8px; margin-top: 2px; }
  .pipeline-v2 .step-number { width: 23px; height: 23px; font-size: 9px; }
  .feedback-layout { gap: 15px; margin-bottom: 18px; }
  .feedback-composer { padding: 17px; }
  .feedback-composer > .muted-small { font-size: 9px; }
  .feedback-composer .field-label { font-size: 10px; }
  .feedback-composer .scope-field { margin-top: 16px; margin-bottom: 15px; }
  .feedback-composer .select { font-size: 10px; }
  .feedback-input { font-size: 11px; min-height: 250px; padding: 12px; }
  .composer-actions .button { font-size: 10px; padding: 8px 11px; }
  .feedback-layout > .aside-stack { display: grid; grid-template-columns: minmax(0, 1fr); }
  .feedback-layout > .aside-stack > :last-child:nth-child(3) { grid-column: auto; }
  .feedback-layout .feedback-report { grid-template-columns: 28px minmax(0, 1fr); row-gap: 9px; }
  .feedback-report strong { font-size: 20px; }
  .feedback-preview-card .table-toolbar { align-items: flex-start; padding: 16px; gap: 13px; }
  .feedback-preview-card .table-toolbar > .button { margin-left: auto; font-size: 10px; padding: 8px 10px; }
  .preview-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 15px; padding: 16px; }
  .preview-summary > span { font-size: 9px; }
  .preview-summary strong { font-size: 19px; }
  .feedback-change { padding: 16px; }
  .feedback-change > .task-title-row { gap: 6px; }
  .feedback-change > .task-title-row > strong { flex-basis: 100%; font-size: 10px; }
  .feedback-change > .task-title-row .tag { font-size: 8px; }
  .feedback-preview-card > .callout { margin-left: 16px; margin-right: 16px; font-size: 9px; }
  .inline-result { font-size: 9px; }
  .feedback-raw, .feedback-evidence > pre { font-size: 9px; padding: 11px; }
  .feedback-evidence { padding: 12px; }
  .feedback-evidence > small { float: none; display: block; margin-top: 4px; line-height: 1.7; }
  .conflict-row { padding: 12px; }
  .conflict-row > label { font-size: 10px; padding: 9px; }
  .handoff-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
  .handoff-stats .stat-card { padding: 12px; }
  .handoff-stats .stat-label { font-size: 9px; }
  .handoff-stats .stat-value { font-size: 24px; }
  .handoff-stats .stat-foot { font-size: 8px; line-height: 1.7; }
}
@media (max-width: 400px) {
  .pipeline-v2 .workflow-step { padding: 9px 6px; gap: 7px; }
  .pipeline-v2 .workflow-step strong { font-size: 9px; }
  .pipeline-v2 .workflow-step small { font-size: 7px; }
  .feedback-composer { padding: 15px; }
  .handoff-stats { gap: 7px; }
  .handoff-stats .stat-card { padding: 10px; }
  .handoff-stats .stat-label { font-size: 8px; }
  .handoff-stats .stat-value { font-size: 23px; }
  .handoff-stats .stat-foot { font-size: 7px; }
}

.split-row {grid-template-columns: 28px minmax(0,1fr) 140px 30px;}
.allocation-summary-list {display:grid;gap:12px;margin-bottom:18px;}
.allocation-summary-list > .allocation-summary {display:block;margin-top:0;border:1px solid #cfe4df;border-radius:10px;background:#f4faf8;padding:16px 18px;}
.allocation-summary-list > .allocation-summary.has-remainder {border-color:#e8d6a4;background:#fffaf0;}
.allocation-summary-list > .allocation-summary > div:first-child {font-size:13px;color:#425b63;}
.allocation-summary-list > .allocation-summary > div:first-child span {margin-left:12px;color:#6b8187;}
.allocation-metrics {display:flex;flex-wrap:wrap;gap:12px 30px;margin-top:12px;font-size:12px;}
.allocation-metrics strong {font-size:20px;margin:0 4px;}
.has-remainder .allocation-remainder {color:#9a6817;}
.allocation-summary-list > .allocation-summary p {font-size:11px;line-height:1.7;margin:10px 0 0;color:#71858a;}
.allocation-parent {background:#f3f7f7;}
.allocation-child td:first-child {padding-left:30px;border-left:3px solid #cfe4df;}
.allocation-controls {padding:15px 0;margin-bottom:18px;border-bottom:1px solid var(--line);}
.allocation-controls > .page-actions {margin-top:10px;justify-content:flex-start;}
.company-verification {padding:12px 0;border-bottom:1px solid var(--line);}
.company-verification > strong {display:block;margin-top:7px;font-size:13px;}
.company-verification > p {margin:7px 0 0;}
.example-panel {margin-top:18px;}
.example-panel > p {margin-top:12px;}
.allocation-destinations {display:grid;gap:7px;margin-top:14px;}
.allocation-destination {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;font-size:12px;}
.allocation-destination > .page-actions {flex-shrink:0;}
.allocation-change-history {margin:16px 0 10px;}
.allocation-change-history > summary {font-size:12px;color:#526e76;}
.allocation-change-history .data-table {min-width:500px;margin-top:12px;}
#allocation-adjust-preview {margin:0;}
#allocation-adjust-error {color:#b3473d;font-size:12px;line-height:1.7;}
@media (max-width:720px) {.split-row {grid-template-columns:24px minmax(0,1fr) 30px;} .split-row .form-field:nth-of-type(2) {grid-column:2;} .split-row > .icon-button {grid-column:3;grid-row:1;}}
.workflow-modes { margin: 0 0 22px; padding: 14px 16px; border: 1px solid #dce8e5; border-radius: 9px; background: #fff; display: flex; align-items: center; gap: 22px; }
.mode-switch { display: flex; flex-shrink: 0; border: 1px solid #dae5e3; padding: 3px; border-radius: 7px; background: #f6f8f8; }
.mode-switch button { display: grid; grid-template-columns: 18px auto; column-gap: 7px; border: 0; border-radius: 5px; padding: 9px 13px; background: transparent; color: #72848b; font-size: 12px; text-align: left; }
.mode-switch button svg { width: 17px; height: 17px; grid-row: 1 / 3; align-self: center; }
.mode-switch button span { grid-column: 2; font-size: 9px; margin-top: 3px; opacity: .8; }
.mode-switch button.active { background: #fff; color: #087f79; box-shadow: 0 1px 5px #173a3c12; font-weight: 600; }
.workflow-modes > p { margin: 0; color: #7a9099; font-size: 11px; line-height: 1.8; }
.excel-flow-card { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 20px; border-color: #d6e8df; background: #f5fbf8; }
.excel-flow-card h2 { font-size: 15px; margin: 0 0 7px; color: #315953; }
.excel-flow-card p { color: #81948c; font-size: 11px; line-height: 1.8; margin: 0; }
.excel-flow-card .page-actions { flex-shrink: 0; }
.feedback-action-items { margin-top: 22px; }
@media (max-width:1000px) { .workflow-modes { flex-direction: column; align-items: flex-start; gap: 10px; } .excel-flow-card { flex-direction: column; align-items: flex-start; } }
@media (max-width:720px) { .workflow-modes { padding: 11px; } .mode-switch { width: 100%; } .mode-switch button { flex: 1; padding: 8px; } .mode-switch button span { font-size: 8px; } .workflow-modes > p { font-size: 10px; } }
.feedback-extra { border: 1px solid var(--border, #e4ebee); border-radius: 8px; padding: 12px; }
.feedback-extra > summary { cursor: pointer; color: #57727f; font-size: 12px; }
.feedback-extra[open] > summary { margin-bottom: 16px; }
.optional-ai,.wechat-example { margin: 14px 0; }
.wechat-allocation-preview { padding: 0 22px 18px; }
.wechat-allocation-preview .data-table { min-width: 780px; }
.wechat-field-details { margin: 0 22px 20px; border: 1px solid #e4ebee; border-radius: 8px; padding: 12px; }
.wechat-field-details > summary { cursor: pointer; color: #57727f; font-size: 12px; }
.wechat-example .page-actions { justify-content: flex-start; margin-top: 12px; }
.configurable-rules {margin-bottom:24px;}
.configurable-rules .table-toolbar {align-items:flex-start;gap:16px;}
.configurable-rules .table-toolbar p {margin:8px 0 0;max-width:600px;}
.rule-profile-list {padding:0 22px;}
.rule-profile-card {display:flex;justify-content:space-between;align-items:center;gap:18px;padding:16px 0;border-top:1px solid var(--line);}
.rule-profile-card h3 {font-size:14px;margin:0 0 4px;}
.rule-profile-card p,.rule-fixed-guards {font-size:12px;color:#637c85;line-height:1.8;margin:0;}
.rule-fixed-guards {padding:14px 22px;background:#f6f9fa;border-top:1px solid var(--line);}
.rule-editor-section {border-top:1px solid var(--line);margin-top:18px;padding-top:14px;}
.rule-editor-section > summary {color:#234b55;cursor:pointer;font-weight:600;padding:4px 0;}
.rule-editor-section .table-wrap {margin:12px 0;}
.rule-mapping-table,.rule-status-table {min-width:620px;}
.rule-mapping-table td:first-child {width:32%;}
.rule-mapping-table td:last-child,.rule-status-table td:last-child {width:72px;}
.rule-mapping-table textarea {min-height:62px;font-size:12px;line-height:1.5;}
.rule-status-table .input,.rule-status-table .select {font-size:12px;min-width:110px;}
.rule-required-table {min-width:420px;}
.rule-required-table th:not(:first-child),.rule-required-table td:not(:first-child) {text-align:center;width:80px;}
.rule-phone-kinds {display:flex;align-items:center;gap:20px;margin:14px 0;font-size:12px;flex-wrap:wrap;}
.inline-rule-error {color:#a63834;font-size:13px;white-space:pre-wrap;}
.import-rule-profile {margin:14px 0;}
@media(max-width:800px){.configurable-rules .table-toolbar,.rule-profile-card {align-items:flex-start;flex-direction:column;}.configurable-rules .page-actions {flex-wrap:wrap;}}

/* A short, practical route through the Excel trial. */
.trial-guide-intro {display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:18px;padding:20px 22px;background:var(--teal-soft);border:1px solid #d7e8e1;border-radius:9px;}
.trial-guide-intro > div {display:flex;gap:14px;align-items:flex-start;}
.trial-guide-intro > div > svg {color:var(--teal);flex-shrink:0;margin-top:3px;}
.trial-guide-intro h2 {font-size:17px;color:#28564f;margin-bottom:5px;}
.trial-guide-intro p,.trial-download-card p {color:#68817f;font-size:12px;line-height:1.8;}
.trial-downloads {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-bottom:20px;}
.trial-download-card {display:flex;flex-direction:column;align-items:flex-start;gap:10px;background:#fff;border:1px solid var(--line);border-radius:9px;padding:20px;}
.trial-download-card .large-icon {width:32px;height:32px;margin:0;}
.trial-download-card .large-icon svg {width:20px;height:20px;}
.trial-download-card h3 {font-size:14px;color:#2d4d57;}
.trial-download-card p {flex:1;color:#7a8d96;}
.trial-download-card a {margin-top:2px;}
.trial-boundary {margin-bottom:22px;}
.trial-steps {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin:0 0 20px;}
.trial-step {display:flex;align-items:flex-start;gap:14px;border:1px solid var(--line);border-radius:9px;background:#fff;padding:21px;min-width:0;}
.trial-step-number {display:grid;place-items:center;flex-shrink:0;width:28px;height:28px;border-radius:50%;background:#eaf3f0;color:var(--teal);font-size:13px;font-weight:600;}
.trial-step-body {min-width:0;}
.trial-step h3 {font-size:15px;line-height:1.7;margin:0 0 13px;color:#2e4c56;}
.trial-responsibility {margin-bottom:10px;}
.trial-responsibility strong {display:inline-block;font-size:10px;line-height:1.5;border-radius:3px;padding:2px 6px;background:#f1f4f6;color:#637f8c;margin-bottom:4px;font-weight:500;}
.trial-responsibility.auto strong {background:#edf7f2;color:#4d8b76;}
.trial-responsibility p {font-size:12px;color:#71848c;line-height:1.9;}
.trial-step-actions {display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.trial-step-actions .button {white-space:normal;text-align:left;}
.trial-success-check {display:flex;gap:12px;padding:17px 20px;margin-bottom:20px;border:1px solid #dce9e0;background:#f2f8f4;border-radius:8px;color:#4e7866;}
.trial-success-check > svg {flex-shrink:0;margin-top:2px;}
.trial-success-check strong {font-size:13px;}
.trial-success-check p {font-size:12px;line-height:1.9;margin-top:4px;}
.trial-column-guide {margin-bottom:20px;}
.trial-column-guide > summary {color:#355b66;font-size:13px;cursor:pointer;font-weight:600;}
.trial-column-guide .table-wrap {margin:16px 0;}
.trial-column-guide .data-table {min-width:620px;}
.trial-column-guide .data-table td:first-child {white-space:nowrap;color:#355b66;font-weight:500;}
.trial-backup {display:flex;justify-content:space-between;align-items:center;gap:20px;}
.trial-backup h2 {display:flex;align-items:center;gap:8px;font-size:13px;margin-bottom:7px;color:#496b77;}
.trial-backup h2 svg {width:17px;height:17px;}
.trial-backup p,.workspace-reset-row p {font-size:12px;color:#7c8d96;line-height:1.9;}
.workspace-reset-row {display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:17px;margin-top:19px;border-top:1px solid var(--line);}
@media(max-width:1000px){.trial-steps {grid-template-columns:1fr;}.trial-download-card {padding:16px;}.trial-backup,.workspace-reset-row {align-items:flex-start;flex-direction:column;gap:12px;}}
@media(max-width:720px){.trial-downloads {grid-template-columns:1fr;}.trial-guide-intro {align-items:flex-start;flex-direction:column;gap:12px;padding:17px;}.trial-step {padding:17px;gap:10px;}.trial-guide-intro h2 {font-size:16px;}.trial-guide-intro .tag {margin-left:36px;}}

/* Keep every source upload and its feedback in a visible batch. */
.session-bar {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:13px 20px;width:100%;min-width:0;margin:0 0 22px;padding:14px 18px;border:1px solid #dce8e6;border-left:3px solid #60b1a4;border-radius:8px;background:#f4f9f8;}
.session-bar.is-empty {background:#f8fafb;border-color:#e1e8eb;border-left-color:#adc4cb;}
.session-summary {flex:1 1 200px;min-width:0;}
.session-summary strong {display:block;font-size:13px;line-height:1.7;font-weight:600;color:#305d5a;overflow-wrap:anywhere;}
.session-summary small {display:block;color:#7b9193;font-size:10px;line-height:1.8;margin-top:2px;overflow-wrap:anywhere;}
.session-controls {display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 10px;min-width:0;max-width:100%;}
.session-select-label {display:flex;align-items:center;gap:8px;min-width:0;color:#647f83;font-size:11px;}
.session-select {display:block;min-width:0;width:220px;max-width:100%;min-height:34px;padding:6px 28px 6px 10px;border:1px solid #cfdddc;border-radius:5px;background:#fff;color:#35575e;font-size:12px;line-height:1.5;text-overflow:ellipsis;}
.session-select:disabled {color:#8a9da1;background:#f4f7f7;}
.session-controls .button {min-height:34px;}
.trial-session-help {margin-bottom:18px;}
.trial-session-help p {line-height:1.9;}
@media(max-width:1000px){.session-controls {justify-content:flex-start;}.session-summary {flex-basis:100%;}}
@media(max-width:600px){.session-bar {padding:12px 14px;gap:11px;}.session-controls {width:100%;}.session-select-label {flex:1 1 100%;width:100%;}.session-select {flex:1;width:auto;}.session-controls .button {flex:1 1 auto;}}

/* Association review keeps receipt, applied fields and verification separate. */
.legacy-association-entry {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 18px;margin:0 0 14px;border:1px solid #d5e4e8;border-radius:7px;background:#f2f8fa;}
.legacy-association-entry strong {font-size:13px;color:#3a6372;}
.legacy-association-entry p {font-size:11px;color:#7b9099;line-height:1.8;margin-top:4px;}
.association-review-toolbar {display:flex;justify-content:space-between;align-items:center;gap:15px;margin:18px 0 12px;color:#748a94;font-size:11px;}
.association-review-wrap {margin:0 0 16px;border:1px solid var(--line);border-radius:7px;}
.modal.wide:has(.association-review-wrap) {width:min(1200px,calc(100vw - 48px));}
.modal.wide:has(.association-review-wrap) .modal-body {overflow-x:hidden;}
.association-review-table {min-width:1090px;table-layout:fixed;}
.association-review-table th:nth-child(1) {width:55px;}
.association-review-table th:nth-child(2),.association-review-table th:nth-child(3) {width:185px;}
.association-review-table th:nth-child(4) {width:155px;}
.association-review-table th:nth-child(5) {width:245px;}
.association-review-table th {white-space:normal;overflow-wrap:anywhere;}
.association-review-table td {vertical-align:top;white-space:normal;overflow-wrap:anywhere;}
.association-review-table td p {font-size:11px;line-height:1.8;margin:7px 0;}
.association-review-table td details {font-size:11px;margin-top:10px;}
.association-review-table td summary {cursor:pointer;color:var(--teal);}
.association-review-table .feedback-raw {max-height:230px;max-width:100%;overflow:auto;font-size:10px;}
.association-item-check,#association-select-all {width:15px;height:15px;accent-color:var(--teal);cursor:pointer;}
.association-item-check:disabled {cursor:not-allowed;}
.association-evidence {padding-left:15px;margin:0;font-size:11px;line-height:1.8;color:#607c87;}
.association-warning {color:#a57834;background:#fff8e9;border-radius:4px;padding:7px 9px;}
.association-blocked {background:#fafafa;}
.association-focus {box-shadow:inset 3px 0 #5fae9e;}
.feedback-current-progress {padding:12px 14px;border-radius:6px;background:#eff7f3;color:#5c7e73;}
.import-snapshot {font-size:11px;color:#91a0a8;}
@media(max-width:720px){.legacy-association-entry {align-items:flex-start;flex-direction:column;}.association-review-toolbar {align-items:flex-start;flex-wrap:wrap;gap:8px;}}

.business-submission-panel {margin:0 0 22px;padding:19px 20px;border:1px solid #cfe2da;border-radius:9px;background:#f4faf6;}
.submission-panel-heading {display:flex;align-items:center;justify-content:space-between;gap:20px;}
.submission-panel-heading h2 {font-size:15px;color:#355e51;margin-bottom:6px;}
.submission-panel-heading p {font-size:12px;color:#759087;line-height:1.9;max-width:720px;}
.submission-scope-list {list-style:none;margin:14px 0 0;padding:0;max-height:185px;overflow:auto;}
.submission-scope-list li {display:flex;align-items:center;flex-wrap:wrap;gap:6px 13px;padding:8px 0;border-top:1px solid #e3eee7;font-size:11px;color:#70877d;}
.submission-scope-list li strong {color:#3e6556;font-weight:500;}
.submission-excluded {padding-top:12px;margin-top:10px;border-top:1px solid #dfebe2;font-size:11px;color:#8b7c64;line-height:1.9;max-height:180px;overflow:auto;}
.submission-excluded strong {font-weight:500;}
.submission-excluded p {margin-top:4px;}
.import-business-confirmation {padding:13px 15px;margin:16px 0;background:#f2f9f5;border:1px solid #d8e8df;border-radius:7px;align-items:flex-start;}
.import-business-confirmation input {margin-top:4px;flex-shrink:0;}
.import-business-confirmation small {display:block;margin-top:5px;font-size:11px;color:#82968a;line-height:1.8;}
.contact-summary {border:1px solid #e0e8e9;border-radius:8px;background:#fafcfc;padding:14px 15px;}
.contact-summary > .field-label {display:block;margin-bottom:6px;}
.contact-summary > strong {font-size:14px;color:#355965;overflow-wrap:anywhere;}
.contact-summary > p {font-size:11px;color:#81979e;line-height:1.8;margin-top:4px;}
.contact-summary > details {margin-top:12px;background:#fff;}
.contact-summary .form-grid {margin-top:12px;}
.recycle-order-fields {border:1px solid #d7e8e4;border-radius:8px;background:#f8fcfa;padding:16px;}
.recycle-order-fields h3 {margin:0;color:#315e57;font-size:14px;}
.recycle-order-fields header > p,.recycle-conditional-hint,.recycle-sheet-hint {font-size:11px;color:#718b86;line-height:1.85;margin:7px 0 13px;}
.recycle-default-summary {display:flex;flex-direction:column;gap:5px;margin:0 0 15px;padding:10px 12px;border-radius:5px;background:#edf6f2;font-size:11px;color:#537a6c;line-height:1.8;overflow-wrap:anywhere;}
.recycle-order-fields .field-label {display:flex;flex-wrap:wrap;align-items:center;gap:5px;color:#527a70;font-size:11px;}
.recycle-c1-badge {border:1px solid #dce5ec;border-radius:4px;padding:1px 4px;background:#f3f7fb;font-size:9px;color:#6c899d;}
.recycle-order-fields .recycle-conditional-hint {margin:12px 0;}
.recycle-order-fields .recycle-sheet-hint {margin:12px 0 0;}
.recycle-optional {background:#fff;}
.recycle-optional > summary {line-height:1.9;}
.recycle-code-input {min-height:64px;}
.submission-hint {font-size:11px;color:#77938a;line-height:1.8;border-radius:6px;padding:10px 12px;background:#f0f7f3;}
@media(max-width:850px){.submission-panel-heading {align-items:flex-start;flex-direction:column;gap:13px;}.business-submission-panel {padding:16px;}}

.import-submission-scope {padding:14px 16px;margin:16px 0;border:1px solid #d8e8df;border-radius:7px;background:#f3faf6;font-size:12px;color:#54796a;line-height:1.9;}
.import-submission-scope > strong {font-weight:600;}
.import-submission-scope > p {margin:6px 0;font-size:11px;color:#789185;}
.import-submission-scope > ul {padding:0;margin:10px 0;list-style:none;max-height:190px;overflow:auto;}
.import-submission-scope li {display:flex;flex-wrap:wrap;gap:5px 13px;border-top:1px solid #e1ece5;padding:7px 0;font-size:11px;}
.import-submission-scope li strong {font-weight:500;}

.tonnage-reminder {margin:0;padding:9px 12px;border-left:2px solid #d3c6ab;background:#faf8f3;color:#8c806a;font-size:11px;line-height:1.9;}
.submission-row-actions {display:flex;flex-wrap:wrap;gap:6px;min-width:170px;}
.submission-table th:first-child,.submission-table td:first-child {width:35px;text-align:center;}
.submission-record-check,#submission-select-all {width:15px;height:15px;accent-color:var(--teal);cursor:pointer;}
.submission-table {min-width:1060px;}
.submission-table td {vertical-align:top;white-space:normal;overflow-wrap:anywhere;max-width:280px;}
.submission-table td:nth-child(2) {min-width:150px;}
.submission-table td:nth-child(4) {min-width:160px;}
.submission-table td:nth-child(7) {min-width:220px;}
.submission-table .button:disabled {cursor:not-allowed;}
.submission-toolbar {flex-wrap:wrap;gap:12px;}
.submission-batch-actions {display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px;}
.submission-action-help {flex-basis:100%;margin:0;color:#70878d;font-size:11px;line-height:1.8;}
@media(max-width:1100px){
 .submission-table th:last-child,.submission-table td:last-child {position:sticky;right:0;z-index:2;background:#fff;box-shadow:-7px 0 12px -10px #315962;}
 .submission-table th:last-child {background:#f5f8fa;}
 .submission-row-actions {min-width:116px;max-width:130px;}
 .submission-row-actions .button {width:100%;justify-content:center;}
}

/* Workflows separate concurrent customer work without discarding history. */
.workflow-list-panel .table-toolbar {flex-wrap:wrap;}
.workflow-search {position:relative;display:flex;align-items:center;min-width:230px;max-width:420px;flex:1;gap:8px;}
.workflow-search > svg {position:absolute;left:11px;width:16px;height:16px;color:#90a5ab;pointer-events:none;}
.workflow-search .search-input {width:100%;padding-left:34px;}
.workflow-list {display:grid;gap:14px;padding:18px;}
.workflow-card {padding:18px;border:1px solid #e0e8e9;border-radius:8px;background:#fff;min-width:0;}
.workflow-card.is-closed {background:#fafbfb;}
.workflow-card-heading {display:flex;align-items:flex-start;gap:9px;}
.workflow-card-heading > div:first-child {flex:1;min-width:0;}
.workflow-card-heading h2 {font-size:14px;line-height:1.8;color:#365c66;font-weight:600;overflow-wrap:anywhere;}
.workflow-card-heading p {font-size:11px;color:#7b959d;line-height:1.9;margin:5px 0 0;overflow-wrap:anywhere;}
.workflow-card-meta {display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.3fr) minmax(0,1fr);gap:12px 18px;margin:15px 0;padding:13px 0;border-top:1px solid #edf1f2;border-bottom:1px solid #edf1f2;}
.workflow-card-meta dt {font-size:10px;color:#96a6ac;line-height:1.7;}
.workflow-card-meta dd {font-size:11px;color:#68828c;line-height:1.9;margin:4px 0 0;overflow-wrap:anywhere;}
.workflow-card-actions {display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.closed-workflow-banner {display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 17px;margin:0 0 20px;border:1px solid #dce5e8;border-radius:8px;background:#f5f8fa;}
.closed-workflow-banner > div {display:flex;gap:10px;min-width:0;}
.closed-workflow-banner svg {flex-shrink:0;color:#7c96a3;margin-top:2px;}
.closed-workflow-banner strong {font-size:12px;color:#567682;}
.closed-workflow-banner p {font-size:11px;line-height:1.9;color:#8197a0;margin-top:4px;}
.readonly-business-fields {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;padding:15px;border:1px solid #e5ecee;border-radius:7px;background:#fbfcfc;}
.readonly-business-fields dt {font-size:10px;color:#91a4ac;line-height:1.8;}
.readonly-business-fields dd {margin:4px 0 0;font-size:12px;color:#5d7a86;line-height:1.9;overflow-wrap:anywhere;}
.workflow-readonly-feedback {padding:18px;}
.workflow-readonly-feedback article + article {border-top:1px solid #e8edef;margin-top:22px;padding-top:20px;}
.workflow-readonly-feedback h3 {font-size:12px;color:#476d7a;margin-bottom:12px;}
.session-summary strong .tag {vertical-align:middle;margin-left:5px;}
@media(max-width:850px){.workflow-card-meta {grid-template-columns:repeat(2,minmax(0,1fr));}.workflow-card-meta > div:first-child {grid-column:1/-1;}.closed-workflow-banner {align-items:flex-start;flex-direction:column;}}
@media(max-width:600px){.workflow-list {padding:12px;}.workflow-card {padding:14px;}.workflow-card-heading {flex-wrap:wrap;}.workflow-card-heading > div:first-child {flex-basis:100%;}.workflow-search {min-width:0;flex-basis:100%;}.workflow-card-meta,.readonly-business-fields {grid-template-columns:1fr;}.workflow-card-meta > div:first-child {grid-column:auto;}}

.workflow-card.is-deleted {background:#fafbfb;}
.workflow-completion h3 {font-size:13px;color:#476b78;line-height:1.8;overflow-wrap:anywhere;}
.workflow-completion > p {margin:11px 0;font-size:12px;line-height:1.9;color:#728892;}
.workflow-completion ul {max-height:260px;overflow:auto;padding-left:18px;color:#788e98;font-size:12px;line-height:2;}
.workflow-completion li + li {margin-top:7px;}
.workflow-completion li strong {font-weight:500;color:#557886;}
.feedback-session-context {padding:12px 16px;gap:10px;margin-bottom:18px;}
.feedback-session-context .session-summary {flex:1 1 100%;}
.feedback-session-switch {display:flex;align-items:center;gap:15px;flex-wrap:wrap;width:100%;}
.feedback-session-switch .session-select-label {flex:1;min-width:0;}
.feedback-session-switch .session-select {width:100%;max-width:420px;}
.workflow-more {position:relative;flex-shrink:0;}
.workflow-more > summary {cursor:pointer;font-size:11px;color:#6f8c93;padding:7px 4px;}
.workflow-more > .session-controls {display:none;}
.workflow-more[open] > .session-controls {display:flex;position:absolute;right:0;top:100%;z-index:20;min-width:260px;max-width:min(400px,calc(100vw - 60px));padding:13px;border:1px solid #dce7e7;border-radius:7px;background:#fff;box-shadow:0 8px 25px #2647551a;justify-content:flex-start;}
.feedback-entry-tabs {display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.feedback-entry-tab {flex:1 1 155px;min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 10px;border:1px solid #dfe8e9;border-radius:7px;background:#fff;color:#6d8a94;font-size:12px;line-height:1.7;cursor:pointer;}
.feedback-entry-tab svg {width:17px;height:17px;flex-shrink:0;}
.feedback-entry-tab.active {border-color:#72ad9d;background:#f0f8f4;color:#3e7e6c;font-weight:600;}
.feedback-excel-entry,.feedback-manual-entry,.compact-feedback-composer {margin-bottom:18px;}
.feedback-excel-entry h2,.feedback-manual-entry h2,.compact-feedback-composer h2 {font-size:15px;color:#3d6875;line-height:1.8;margin-bottom:7px;}
.feedback-excel-entry > p,.feedback-manual-entry > p,.feedback-entry-help {font-size:12px;color:#80969e;line-height:1.9;margin:0 0 18px;}
.feedback-excel-entry .page-actions {justify-content:flex-start;flex-wrap:wrap;}
.feedback-excel-entry .button.primary {min-height:42px;padding:11px 20px;}
.feedback-receipt {margin:0 0 18px;border:1px solid #e3eaec;border-radius:7px;background:#fafcfc;overflow:hidden;}
.feedback-receipt > summary {padding:13px 16px;cursor:pointer;color:#78909a;font-size:11px;line-height:1.9;overflow-wrap:anywhere;}
.feedback-receipt > .info-card {margin:0;border-width:1px 0 0;border-radius:0;box-shadow:none;}
.feedback-manual-list {display:grid;gap:10px;}
.feedback-manual-list > article {display:flex;align-items:center;justify-content:space-between;gap:15px;padding:13px 14px;border:1px solid #e5ecee;border-radius:7px;}
.feedback-manual-list > article > div {min-width:0;}
.feedback-manual-list strong {font-size:12px;color:#4b7180;overflow-wrap:anywhere;}
.feedback-manual-list p {font-size:11px;line-height:1.8;color:#8b9da5;margin-top:4px;overflow-wrap:anywhere;}
.feedback-manual-list .button {flex-shrink:0;}
.feedback-manual-actions {display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-shrink:0;}
.compact-feedback-composer > .form-field {margin-top:14px;}
.compact-feedback-composer .feedback-input {min-height:132px;}
.compact-feedback-composer .composer-actions {margin:12px 0 16px;}
.compact-feedback-composer .optional-ai {margin-top:12px;}
.compact-feedback-composer .optional-ai .form-field {margin:15px 0;}
.compact-feedback-composer .optional-ai .muted-small {margin:12px 0 0;}
.feedback-pending-section {margin-top:18px;}
@media(max-width:600px){.feedback-entry-tabs {gap:7px;}.feedback-entry-tab {flex-basis:135px;padding:11px 8px;font-size:11px;}.feedback-manual-list > article {align-items:flex-start;flex-wrap:wrap;}.feedback-manual-actions {width:100%;justify-content:space-between;}.feedback-session-switch .session-select-label {flex-basis:calc(100% - 60px);width:auto;}.workflow-more[open] > .session-controls {min-width:240px;}.feedback-excel-entry .page-actions .button {flex:1 1 auto;justify-content:center;}}

/* Customer-supplied sheets and text share the same scoped preview. */
.customer-material-composer h2 > span {font-size:11px;font-weight:400;color:#8ca1a8;margin-left:7px;}
.customer-material-upload {display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap;padding:15px 16px;margin:17px 0;border:1px solid #dae7e7;border-radius:7px;background:#f6faf9;}
.customer-material-upload strong {font-size:12px;color:#517781;}
.customer-material-upload p {font-size:11px;color:#8ba0a7;line-height:1.8;margin-top:4px;}
.customer-material-upload label {cursor:pointer;flex-shrink:0;}
.customer-material-upload label.is-loading {opacity:.65;cursor:wait;}
.customer-material-attachment {margin:15px 0 18px;padding:14px;border:1px solid #e0e9eb;border-radius:7px;background:#fcfdfd;min-width:0;}
.customer-material-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;}
.customer-material-heading > strong {display:flex;align-items:center;gap:7px;color:#63838e;font-size:11px;line-height:1.8;min-width:0;overflow-wrap:anywhere;}
.customer-material-heading > strong svg {flex-shrink:0;width:17px;height:17px;}
.customer-material-heading .button {flex-shrink:0;}
.customer-material-attachment > .form-field {margin:13px 0;}
.customer-material-attachment small {display:block;margin-top:6px;}
.customer-material-preview > p {font-size:11px;color:#8a9ea6;line-height:1.8;margin:10px 0;}
.customer-material-preview .table-wrap {max-height:240px;border:1px solid #e7edef;border-radius:5px;}
.customer-material-preview th,.customer-material-preview td {padding:10px 12px;max-width:230px;white-space:normal;overflow-wrap:anywhere;vertical-align:top;font-size:10px;}
.customer-material-preview th:first-child,.customer-material-preview td:first-child {white-space:nowrap;color:#a0afb5;}
.customer-material-mapping {margin-top:14px;}
.customer-material-mapping > .muted-small {margin:12px 0;line-height:1.9;}
.customer-material-mapping > .form-field {margin:12px 0;}
.customer-material-mapping-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.customer-material-attachment > .muted-small {margin:10px 0 0;line-height:1.9;}
.workflow-selection-bar {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 18px;padding:12px 18px;border-bottom:1px solid #e8eef0;background:#fbfdfc;}
.workflow-selection-bar > div {display:flex;align-items:center;flex-wrap:wrap;gap:8px;}
.workflow-selection-bar > div > span {font-size:11px;color:#8aa0a8;}
.workflow-card-heading .workflow-card-title {flex:1;min-width:0;}
.workflow-card-choice {flex-shrink:0;padding:4px 2px 0 0;}
.workflow-item-check,#workflow-select-all {width:15px;height:15px;accent-color:var(--teal);cursor:pointer;}
.workflow-name-list {max-height:220px;overflow:auto;padding-left:20px;color:#7b929c;font-size:12px;line-height:2;overflow-wrap:anywhere;}
@media(max-width:600px){.customer-material-mapping-grid {grid-template-columns:1fr;}.customer-material-heading {align-items:flex-start;flex-wrap:wrap;}.customer-material-upload label {width:100%;justify-content:center;}.workflow-selection-bar {align-items:flex-start;flex-direction:column;}.workflow-card-heading .workflow-card-title {flex-basis:calc(100% - 35px);}}

/* Cookie login and read-only system planning. */
#login-form { display: grid; gap: 15px; }
.auth-migration-banner { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.auth-migration-banner > div { min-width: 0; }
.auth-migration-banner .button { flex-shrink: 0; }
.order-plan-details { max-width: 320px; margin-top: 9px; white-space: normal; overflow-wrap: anywhere; font-size: 11px; line-height: 1.8; }
.order-plan-details summary { cursor: pointer; color: #456f80; }
.order-plan-details p { margin: 8px 0; }
.order-plan-details ul { padding-left: 17px; }
.order-plan-details li + li { margin-top: 6px; }
@media (max-width: 720px) { .auth-migration-banner { align-items: stretch; flex-direction: column; } .auth-migration-banner .button { align-self: flex-start; } }

/* Workflow-local telephone test directory. */
.phone-mock-editor{margin:16px 0;max-height:45vh;overflow:auto}
.phone-mock-editor table{min-width:720px;width:100%}
.phone-mock-editor td{padding:8px}
.phone-mock-editor .input{min-width:110px;width:100%}
.phone-mock-editor td:nth-child(2){min-width:210px}
.phone-mock-review{display:grid;gap:12px}
.phone-mock-result{border:1px solid var(--border,#dde6e9);border-radius:10px;padding:16px}
.phone-mock-result>div{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.phone-mock-result p{overflow-wrap:anywhere;margin:10px 0}
.phone-mock-result .form-field{margin-top:12px}