/* Tianhao workspace. Quiet navigation, clear hierarchy, real work first. */
:root {
  --bg: #f5f5f7;
  --surface: #fff;
  --ink: #202124;
  --muted: #686b70;
  --line: #e6e7e9;
  --brand: #22624e;
  --brand-dark: #183e33;
  --soft: #eef4f0;
  --amber: #956119;
  --amber-bg: #fff5e7;
  --radius: 20px;
  --shadow: 0 8px 28px #20212407;
}
body {
  font-family: "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  font-size: 14px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
button, a, input, select, textarea { transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease; }
:is(button, a, input, select, textarea):focus-visible { outline: 3px solid #438774; outline-offset: 4px; }
h1 { font-size: 42px; font-weight: 650; line-height: 1.25; letter-spacing: -1.8px; }
h2 { font-size: 20px; letter-spacing: -.5px; }
h3 { font-size: 16px; }
.shell { display: block; }
.brand-mark { width: 36px; height: 36px; border-radius: 11px; background: var(--brand-dark); border: 0; color: #fff; font-size: 17px; letter-spacing: -1px; flex-shrink: 0; }
.brand strong { font-size: 16px; font-weight: 650; letter-spacing: -.3px; }
.brand small { display: block; font-size: 8px; letter-spacing: 1.45px; color: var(--muted); line-height: 1.7; }
.header-account { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.header-account>.btn { width: 34px; min-height: 34px; padding: 0; flex-shrink: 0; }
.user { font-size: 12px; gap: 9px; }
.avatar { width: 32px; height: 32px; background: #edf1ee; color: var(--brand); font-size: 12px; }
.account-label { color: var(--muted); }
.workspace { padding: 0; }
.topbar { height: 54px; max-width: 1360px; margin: auto; padding: 0 40px; background: transparent; border: 0; }
.crumb { font-size: 11px; color: #6b6c71; }
.crumb b { color: #494b50; font-weight: 500; }
.crumb span { color: #b7b8bc; padding: 0 12px; }
.today { font-size: 11px; color: var(--muted); }
.main { max-width: 1360px; padding: 0 40px 36px; }
.preview-bar { padding: 11px 16px; margin-bottom: 0; font-size: 11px; background: #eceeef; border: 0; border-radius: 10px; color: #63686a; }
.preview-bar .dot { background: #628574; }
.preview-bar a { font-size: 11px; }
.page-heading { margin: 0; padding: 40px 0 32px; gap: 24px; }
.page-heading p { font-size: 15px; line-height: 1.7; margin-top: 12px; color: var(--muted); }
.eyebrow { font-size: 10px; color: #777a7e; letter-spacing: 2.6px; margin-bottom: 13px; font-weight: 600; }
.page-heading .actions { justify-content: flex-end; }
.btn { min-height: 42px; padding: 10px 18px; font-size: 13px; border-radius: 999px; color: #33383b; border-color: #d9dcde; background: #fff; }
.btn:hover { background: #f1f2f3; border-color: #c6cacc; }
.btn.primary { color: #fff; background: var(--brand); border-color: var(--brand); }
.btn.primary:hover { background: #194b3b; border-color: #194b3b; }
.page-heading>.btn, .page-heading>.actions>.btn { min-height: 44px; padding: 11px 20px; }
.btn.small { min-height: 34px; padding: 7px 12px; font-size: 12px; }
.btn.ghost { color: var(--muted); }
.btn.danger { color: #aa3838; border-color: #edc7c7; }
.btn:disabled { opacity: .48; }
.metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 32px; }
.metric { padding: 23px 22px 20px; border: 1px solid #fff; border-radius: var(--radius); min-height: 192px; background: #fff; box-shadow: 0 2px 5px #20212402; }
.metric:hover { border-color: #b6c8be; box-shadow: var(--shadow); }
.metric-top { align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: #45494b; }
.metric-icon { height: 27px; width: 27px; border-radius: 50%; background: #f5f6f5; color: #7a8b80; }
.metric-icon .icon { height: 15px; width: 15px; }
.metric-value { font-size: 48px; font-weight: 600; letter-spacing: -2px; line-height: 1.15; margin: 17px 0 11px; color: var(--ink); }
.metric-value .small { font-size: 12px; font-weight: 400; letter-spacing: 0; margin-left: 5px; }
.metric-note { font-size: 11px; line-height: 1.6; color: var(--muted); }
.metric:first-child .metric-value { color: var(--ink); }
.metric:first-child { background: #eaf1eb; border-color: #eaf1eb; }
.metric:first-child:hover { border-color: #a7bfae; }
.metric:first-child .metric-icon { color: #527b60; background: #dce9de; }
.metric:last-child .metric-icon { background: #edf4ef; color: #447459; }
.dashboard-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.dash-main, .dash-side { gap: 24px; }
.dash-side { grid-template-columns: 1fr; }
.panel { border-color: #e8e9eb; border-radius: var(--radius); box-shadow: 0 2px 5px #20212402; }
.panel-head { padding: 23px 26px; border-bottom: 1px solid #efeff1; }
.panel-head a { font-size: 12px; }
.panel-head h2 { font-size: 18px; font-weight: 650; }
.panel-head .small { font-size: 11px; }
.panel-body { padding: 26px; }
.count { color: #646b66; background: #f0f3f0; border-radius: 20px; padding: 3px 9px; margin-left: 8px; font-size: 11px; font-weight: 500; vertical-align: middle; }
.data-table { font-size: 13px; }
.data-table th { font-size: 11px; color: #72767a; background: #fafafb; padding: 13px 22px; border-color: #eeeef0; }
.data-table td { padding: 19px 22px; border-color: #efeff1; }
.data-table tbody tr:hover { background: #fafbfa; }
.data-table .primary-text { font-size: 13px; font-weight: 500; color: var(--ink); line-height: 1.55; }
.data-table .primary-text:hover { color: var(--brand); }
.data-table .secondary-text { font-size: 10px; margin-top: 5px; color: #74787c; }
.data-table .amount { font-size: 13px; font-weight: 600; letter-spacing: -.2px; }
.status { border-radius: 6px; padding: 4px 8px; font-size: 10px; background: #f0f1f2; color: #636b66; }
.status-review, .status-needs_info, .status-pdf_review, .status-pending { color: #90611c; background: #fff3df; }
.status-ready { color: #3d6593; background: #edf2f9; }
.status-issuing, .status-partial { color: #6f5d8c; background: #f2eef7; }
.status-awaiting_platform, .status-valid { color: #3c6c50; background: #edf4ee; }
.status-completed { color: #526c5b; background: #eff3ef; }
.status-void, .status-rejected { color: #a03f3f; background: #fceeee; }
.order-actions { gap: 5px; }
.order-actions .btn.primary { min-height: 32px; padding: 6px 11px; font-size: 11px; }
.order-actions .copy-info { color: #747b76; }
.timeline { padding: 23px 25px; }
.timeline-item { padding: 0 0 24px 18px; border-color: #e7e8e9; }
.timeline-item:before { background: #a3b5aa; width: 5px; height: 5px; }
.timeline-item strong { color: #44484a; font-size: 12px; }
.timeline-item a { font-size: 10px; color: #65756a; }
.timeline-item p { font-size: 10px; color: #73777a; margin-top: 4px; }
.rule-card { background: #ecefef; border: 1px solid #e3e7e5; padding: 25px; border-radius: var(--radius); }
.rule-card .rule-icon { color: #526e60; margin-bottom: 16px; }
.rule-card h3 { font-size: 15px; line-height: 1.6; font-weight: 600; }
.rule-card p { color: #656f69; font-size: 12px; margin-top: 10px; }
.path-example { background: #ffffffa6; border: 0; border-radius: 10px; color: #5d6b62; font-size: 11px; line-height: 1.8; padding: 13px; }
.connection { font-size: 11px; color: #586b5f; }
.flow { padding: 28px 24px; }
.step-number { height: 30px; width: 30px; background: #f2f3f4; color: #62696a; border: 0; font-size: 11px; margin-bottom: 12px; }
.flow-step strong { color: #4e5354; font-size: 12px; }
.flow-step small { color: var(--muted); margin-top: 4px; }
.flow-step:not(:last-child):after { top: 14px; border-top: 1px solid #e2e6e3; }
.flow-caption { background: #fcfcfd; color: #6d7471; padding: 14px 24px; border-color: #efeff1; }
.footer-note { color: #626e66; font-size: 11px; margin-top: 32px; }
.filter-tabs { gap: 5px; padding: 0 0 22px; }
.filter-tab { min-height: 38px; display: inline-flex; align-items: center; padding: 7px 17px; border-radius: 999px; color: #6a6e72; font-size: 12px; }
.filter-tab:hover { background: #e9e9ec; text-decoration: none; }
.filter-tab.active { background: #fff; color: var(--ink); border-color: #e1e2e4; box-shadow: 0 2px 5px #20212405; }
.toolbar { padding: 20px 22px; gap: 12px; }
.toolbar input, .toolbar select { height: 42px; font-size: 12px; }
.search .icon { top: 13px; left: 13px; color: #71787a; }
.toolbar select { max-width: 230px; }
.toolbar .btn { padding: 9px 18px; }
input, select, textarea { border-color: #d6d9dc; border-radius: 10px; font-size: 13px; padding: 11px 13px; background: #fff; }
input:hover, select:hover, textarea:hover { border-color: #aeb7b1; }
input::placeholder, textarea::placeholder { color: #71767c; }
input[readonly], textarea[readonly] { background: #f7f8f8; color: #65716b; }
label.field { font-size: 13px; color: #4d5355; }
.field>span { margin-bottom: 8px; }
.field small { font-size: 11px; }
.form-grid { gap: 20px 22px; }
.form-section { margin-top: 28px; padding-top: 25px; }
.form-section h3 { font-size: 15px; }
.form-note { background: #f4f5f6; color: #686e70; font-size: 12px; border-radius: 10px; padding: 12px 14px; }
.form-error { border-radius: 10px; }
dialog { border: 1px solid #e3e5e7; border-radius: 24px; width: min(960px, calc(100% - 48px)); max-height: 92dvh; box-shadow: 0 32px 100px #18251e33; }
dialog::backdrop { background: #2021244d; backdrop-filter: blur(6px); }
#dialog[open] { display: flex; flex-direction: column; overflow: hidden; }
#dialog>form { display: flex; flex-direction: column; min-height: 0; max-height: 92dvh; }
.dialog-head { padding: 26px 32px; flex-shrink: 0; }
.dialog-head h2 { font-size: 24px; font-weight: 650; }
.dialog-head p { font-size: 12px; margin-top: 8px; }
.dialog-body, #intake-form .dialog-body { padding: 26px 32px; max-height: none; flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.dialog-foot { padding: 18px 32px; background: #fafafb; gap: 12px; flex-shrink: 0; }
#intake-form .dialog-foot .btn { font-size: 13px; }
.close { width: 34px; height: 34px; background: #f1f2f3; border-radius: 50%; color: #686d70; }
.close:hover { background: #e6e9e7; }
.checkbox-label { color: #56645b; font-size: 12px; }
.upload-label { border-radius: 14px; background: #f8faf8; border-color: #bccbc0; padding: 28px 16px; font-size: 13px; }
.upload-label:hover { border-color: var(--brand); background: #f0f5f1; }
.upload-label small { color: #707e74; font-size: 11px; }
.intake-confirm { padding: 16px; background: #f0f5f1; border-color: #dce6de; border-radius: 12px; }
.intake-source h3 span { margin-left: 8px; }
.intake-progress { border-radius: 12px; }
.info-banner { background: #edefef; border-color: transparent; color: #5d6962; border-radius: 12px; padding: 15px 18px; }
.info-banner.warning { color: #86642b; background: #fff5e7; border-color: #f1e0bf; }
.company-grid { gap: 24px; }
.company-card { padding: 28px; }
.company-card h3 { font-size: 17px; }
.company-card p, .company-contact dd { font-size: 12px; }
.company-contact dt { font-size: 11px; }
.company-logo { height: 48px; width: 48px; border-radius: 14px; background: #f0f4f1; color: #63816b; margin-bottom: 22px; }
.company-card .actions { padding-top: 20px; margin-top: 20px; }
.settings-grid, .detail-grid { gap: 24px; }
.integration-row { padding: 20px 0; }
.integration-row p { font-size: 12px; }
.integration-row .service-icon { width: 38px; height: 38px; border-radius: 11px; background: #f7f8f7; }
.setting-item { font-size: 13px; }
.setting-item span { font-size: 11px; }
.setting-list { gap: 22px; }
.account-setup-banner { padding: 24px; border-radius: 16px; background: #edf3ef; border-color: #e0e8e2; }
.member-info strong { font-size: 13px; }
.member-info small { font-size: 11px; }
.fact dt { color: #737a76; font-size: 12px; }
.fact dd { font-size: 14px; }
.facts .span-2 { grid-column: 1 / -1; }
.amount-strip { background: #f7f8f8; padding: 23px 26px; }
.amount-strip small { color: var(--muted); font-size: 11px; }
.amount-strip strong { font-size: 24px; letter-spacing: -.5px; }
.back-link { margin: 25px 0 0; }
.detail-head h1 { font-size: 32px; letter-spacing: -1px; }
.invoice-card, .batch-result { border-radius: 14px; padding: 20px; }
.invoice-card h3 { font-size: 13px; }
.invoice-card p { font-size: 12px; }
.source-text, .job-card, .file-row { border-radius: 10px; }
.download-info, .download-info strong { font-size: 11px; }
.batch-summary { background: #f6f8f6; padding: 22px; }
.batch-summary b { font-size: 24px; }
.bulkbar, .pager { font-size: 12px; padding: 17px 22px; gap: 12px; flex-wrap: wrap; }
.empty { padding: 65px 24px; }
.empty h3 { color: #4e5e54; font-size: 16px; }
.empty p { font-size: 13px; }
.empty .icon { color: #849a8b; }
.toast { border-radius: 14px; background: #243f31; }
.finance-calendar { border-radius: 18px; box-shadow: 0 16px 48px #1c332826; }
.login-page { background: var(--bg); }
.login-card { border-radius: 24px; padding: 36px; }
.login-card .brand>div:last-child { display: block; }
.login-card .brand small { color: var(--muted); }

@media (min-width: 1600px) {
  .main { padding-top: 0; }
  .dashboard-grid { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (max-width: 1150px) {
  .topbar { padding: 0 28px; }
  .main { padding: 0 28px 32px; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dash-side { grid-template-columns: 1fr 1fr; }
  .metric { padding: 20px 17px; }
  .metric-top { font-size: 12px; }
  .metric-value { font-size: 44px; }
  .detail-grid { grid-template-columns: minmax(0, 1fr) 290px; }
}
@media (max-width: 850px) {
  .account-label { display: none; }
  .topbar { padding: 0 24px; height: 50px; }
  .today { display: inline; }
  .main { padding: 0 24px 30px; }
  .page-heading { padding: 32px 0 26px; }
  .page-heading h1 { font-size: 36px; }
  .page-heading p { font-size: 13px; }
  .page-heading>.actions { max-width: 45%; }
  .metrics { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
  .metric { grid-column: span 2; min-height: 170px; padding: 21px; }
  .metric:nth-child(-n+2) { grid-column: span 3; }
  .metric-value { font-size: 42px; margin: 13px 0 9px; }
  .metric-note { font-size: 11px; }
  .detail-grid, .settings-grid { grid-template-columns: 1fr; }
  .company-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel-head { padding: 21px 24px; }
  .data-table td, .data-table th { padding-left: 18px; padding-right: 18px; }
  .detail-head h1 { font-size: 27px; }
}
@media (max-width: 600px) {
  body { font-size: 13px; }
  .header-account .account-label { display: block; font-size: 11px; }
  .header-account .avatar { width: 28px; height: 28px; }
  .workspace { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .topbar { height: 42px; padding: 0 20px; gap: 10px; }
  .crumb, .today { font-size: 10px; }
  .today { display: none; }
  .main { padding: 0 20px 26px; }
  .preview-bar { font-size: 10px; padding: 9px 11px; margin: 0; gap: 7px; border-radius: 9px; }
  .preview-bar .dot { margin-top: 5px; }
  .page-heading { padding: 28px 0 25px; display: flex; align-items: flex-start; flex-wrap: wrap; gap: 20px; }
  .page-heading h1 { font-size: 32px; letter-spacing: -1.2px; }
  .page-heading p { font-size: 12px; margin-top: 9px; line-height: 1.7; }
  .eyebrow { font-size: 9px; margin-bottom: 9px; letter-spacing: 2px; }
  .page-heading>.btn, .page-heading>.actions>.btn { font-size: 12px; margin: 0; min-height: 42px; padding: 10px 17px; }
  .page-heading>.actions { max-width: 100%; justify-content: flex-start; gap: 9px; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 24px; }
  .metric, .metric:nth-child(-n+2) { grid-column: auto; min-height: 173px; padding: 17px 16px; border-radius: 17px; }
  .metric-top { font-size: 12px; gap: 4px; }
  .metric-icon { width: 23px; height: 23px; }
  .metric-value { font-size: 40px; margin: 14px 0 8px; }
  .metric-note { font-size: 10px; line-height: 1.65; }
  .metric:last-child { grid-column: 1 / -1; min-height: 0; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 14px; padding: 16px 18px; }
  .metric:last-child .metric-icon { display: none; }
  .metric:last-child .metric-top { grid-column: 1; }
  .metric:last-child .metric-note { grid-column: 1; grid-row: 2; margin-top: 3px; }
  .metric:last-child .metric-value { grid-column: 2; grid-row: 1 / 3; margin: 0; font-size: 34px; }
  .dashboard-grid, .dash-main, .dash-side { gap: 20px; }
  .dash-side { grid-template-columns: 1fr; }
  .panel, .rule-card { border-radius: 17px; }
  .panel-head { padding: 20px; gap: 10px; }
  .panel-head h2 { font-size: 16px; }
  .panel-head a, .panel-head .small { font-size: 10px; }
  .panel-body { padding: 20px; }
  .data-table.responsive tr { padding: 20px; gap: 6px 10px; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }
  .data-table.responsive td { padding: 0; }
  .data-table.responsive .primary-text { font-size: 13px; line-height: 1.65; }
  .data-table.responsive .secondary-text { font-size: 10px; line-height: 1.7; overflow-wrap: anywhere; }
  .data-table.responsive td.amount-cell { font-size: 14px; }
  .data-table.responsive td.action-cell { margin-top: 13px; }
  .data-table.responsive td.status-cell .secondary-text { max-width: 130px; margin-left: auto; }
  .order-actions { gap: 8px; flex-wrap: wrap; }
  .order-actions .btn.primary { min-height: 38px; padding: 8px 13px; font-size: 11px; }
  .order-actions .copy-info { min-height: 38px; padding: 8px 5px; }
  .btn.small { min-height: 38px; font-size: 11px; }
  .data-table .status { font-size: 10px; padding: 4px 7px; }
  .flow { padding: 24px 12px; }
  .step-number { width: 26px; height: 26px; font-size: 10px; margin-bottom: 10px; }
  .flow-step strong { font-size: 10px; }
  .flow-step:not(:last-child):after { top: 12px; left: calc(50% + 17px); right: calc(-50% + 17px); }
  .flow-caption { padding: 14px 20px; font-size: 10px; line-height: 1.8; }
  .timeline { padding: 22px; }
  .rule-card { padding: 24px; }
  .filter-tabs { gap: 5px; padding-bottom: 18px; }
  .filter-tab { font-size: 11px; min-height: 38px; padding: 8px 14px; }
  .toolbar { padding: 16px; gap: 10px; }
  .toolbar select { font-size: 11px; max-width: 100%; }
  .toolbar .btn { font-size: 12px; min-height: 42px; }
  .pager, .bulkbar { padding: 16px; font-size: 11px; }
  .company-grid { grid-template-columns: 1fr; gap: 18px; }
  .company-card { padding: 24px; }
  .company-card h3 { font-size: 16px; }
  .settings-grid, .detail-grid { gap: 20px; }
  .account-setup-banner { padding: 20px; }
  .detail-grid>.stack:last-child { grid-template-columns: 1fr; }
  .detail-head h1 { font-size: 24px; }
  .amount-strip { padding: 20px; gap: 8px; }
  .amount-strip strong { font-size: 18px; }
  .amount-strip small { font-size: 10px; }
  .fact dd { font-size: 13px; }
  .fact dt { font-size: 11px; }
  .info-banner { font-size: 11px; padding: 14px 16px; }
  dialog { width: calc(100% - 20px); max-height: calc(100dvh - 24px); border-radius: 20px; }
  #dialog>form { max-height: calc(100dvh - 24px); }
  .dialog-head { padding: 20px; gap: 12px; }
  .dialog-head h2 { font-size: 21px; }
  .dialog-head p { font-size: 11px; }
  .dialog-body, #intake-form .dialog-body { padding: 20px; max-height: none; }
  .dialog-foot, #intake-form .dialog-foot { padding: 14px 16px; gap: 8px; }
  #intake-form .dialog-foot .btn { font-size: 12px; padding: 10px 14px; }
  label.field { font-size: 12px; }
  .form-grid { grid-template-columns: 1fr; gap: 17px; }
  .form-section { padding-top: 22px; margin-top: 24px; }
  input, select, textarea { font-size: 14px; }
  .close { width: 34px; height: 34px; }
  .upload-label { padding: 24px 12px; }
  .invoice-card { padding: 17px; }
  .invoice-card .btn { font-size: 11px; }
  .batch-results-list { padding: 16px; }
  .batch-result { padding: 17px; }
  .batch-summary { padding: 17px; }
  .footer-note { font-size: 10px; margin-top: 24px; }
  .toasts { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .skip:focus { z-index: 40; }
}
@media (max-width: 360px) {
  .main { padding-inline: 14px; }
  .header-account .account-label { display: none; }
  .header-account { gap: 5px; }
  .metric { padding: 16px 13px; }
  .metric-top { font-size: 11px; }
  .metric-icon { width: 21px; height: 21px; }
  .data-table.responsive tr { padding: 17px; }
  .data-table.responsive .primary-text { font-size: 12px; }
  .panel-head { padding: 18px; }
  .panel-head h2 { font-size: 15px; }
  .dialog-head, .dialog-body, #intake-form .dialog-body { padding: 17px; }
  #intake-form .dialog-foot .btn { padding-inline: 11px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Work hierarchy: navigation / actionable stages / customer and next action. */
.app-shell { padding-left: 184px; }
.workspace-sidebar { position: fixed; inset: 0 auto 0 0; width: 184px; background: #183e33; color: #dae6df; z-index: 20; padding: 26px 12px 16px; display: flex; flex-direction: column; }
.sidebar-brand .brand { padding: 0 4px 28px; color: #fff; gap: 8px; }
.sidebar-brand .brand:hover { text-decoration: none; }
.sidebar-brand .brand>div:last-child { display: block; }
.sidebar-brand .brand-mark { background: #ffffff0c; border: 1px solid #ffffff3b; color: #fff; }
.sidebar-brand .brand strong { font-size: 14px; font-weight: 600; }
.sidebar-brand .brand small { color: #b1c6b9; font-size: 7px; letter-spacing: .6px; margin-top: 4px; }
.sidebar-caption { padding: 0 12px 10px; color: #a9bdb1; font-size: 10px; letter-spacing: 1.3px; }
.workspace-nav { display: flex; flex-direction: column; gap: 6px; }
.workspace-nav .nav-item { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; padding: 10px 12px; margin: 0; border-radius: 9px; min-height: 44px; color: #c0d2c7; font-size: 13px; }
.workspace-nav .nav-item>span { display: inline; font-size: inherit; }
.workspace-nav .nav-item .icon { display: block; width: 18px; height: 18px; }
.workspace-nav .nav-item:hover { background: #ffffff0c; color: white; text-decoration: none; }
.workspace-nav .nav-item.active { background: #e0ede4; color: #204b39; font-weight: 650; }
.sidebar-tools { margin-top: auto; padding-top: 12px; border-top: 1px solid #ffffff17; display: flex; flex-shrink: 0; }
.sidebar-tools .sidebar-settings { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; padding: 0; margin: 0; border-radius: 9px; color: #c0d2c7; background: transparent; }
.sidebar-tools .sidebar-settings .icon { width: 20px; height: 20px; }
.sidebar-tools .sidebar-settings:hover { background: #ffffff0c; color: white; }
.sidebar-tools .sidebar-settings.active { background: #e0ede4; color: #204b39; }
.app-shell>.workspace { padding: 0; min-width: 0; }
.app-shell .topbar { height: 65px; max-width: none; padding: 0 32px; margin: 0; border-bottom: 1px solid var(--line); background: #ffffffb8; }
.topbar-leading { display: flex; align-items: center; gap: 12px; min-width: 0; }
.top-right { gap: 20px; }
.app-shell .crumb { font-size: 12px; }
.app-shell .crumb b { color: #343e38; font-weight: 550; }
.app-shell .main { max-width: 1600px; padding: 18px 32px 30px; }
.app-shell .preview-bar { padding: 8px 0; background: none; border-radius: 0; color: #626e66; font-size: 11px; }
.app-shell .preview-bar a { color: #6d7e71; }
.app-shell .page-heading { padding: 22px 0 25px; align-items: center; }
.app-shell .page-heading h1 { font-size: 32px; letter-spacing: -.9px; }
.app-shell .page-heading p { margin-top: 9px; font-size: 13px; }
.app-shell .eyebrow { font-size: 11px; letter-spacing: 1px; font-weight: 500; margin-bottom: 8px; color: #626e66; }
.menu-toggle { display: none; }
.mobile-nav-dialog { display: none; }
.overview-heading { display: flex; justify-content: space-between; align-items: center; margin: 0 0 13px; }
.overview-heading h2 { font-size: 14px; font-weight: 600; color: #555e58; letter-spacing: 0; }
.completed-link { font-size: 12px; color: #626e66; display: inline-flex; gap: 5px; align-items: baseline; }
.completed-link strong { color: #465c4d; font-weight: 600; font-variant-numeric: tabular-nums; }
.completed-link>span { margin-left: 4px; }
.task-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 26px; }
.task-metrics .metric { padding: 19px 20px 16px; min-height: 183px; border: 1px solid #e4e7e5; background: #fff; border-radius: 15px; display: block; }
.task-metrics .metric-top { font-size: 13px; color: #464f49; font-weight: 600; }
.task-metrics .metric-icon { height: 27px; width: 27px; background: #eff3f0; color: #6f8977; }
.task-metrics .metric-value { font-size: 40px; line-height: 1.1; margin: 14px 0 9px; color: #24392d; letter-spacing: -1px; }
.task-metrics .metric-value .small { font-size: 11px; color: #6e7971; margin-left: 7px; }
.task-metrics .metric-note { font-size: 11px; line-height: 1.6; color: #5f6b62; min-height: 35px; }
.metric-bottom { margin-top: 13px; padding-top: 12px; border-top: 1px solid #edf0ed; display: flex; align-items: center; justify-content: space-between; gap: 5px; font-size: 10px; color: #5f6b62; }
.metric-bottom strong { font-size: 11px; font-weight: 550; color: var(--brand); }
.task-metrics .metric.is-priority { border-color: #c6d8cb; background: #eaf2ec; }
.task-metrics .metric.is-priority .metric-icon { background: #d9e9dd; color: #3e7150; }
.task-metrics .metric.is-priority .metric-bottom { border-color: #d2e2d6; }
.task-metrics .metric.has-work:hover { border-color: #7eaa8c; }
.task-metrics .metric.stage-pdf_review.has-work { border-color: #e7d2ae; background: #fffbf2; }
.task-metrics .metric.stage-pdf_review.has-work .metric-bottom strong { color: #946019; }
.task-metrics .metric.is-clear { background: #f9faf9; border-color: #e8ebe8; box-shadow: none; }
.task-metrics .metric.is-clear .metric-top { color: #626e66; font-weight: 500; }
.task-metrics .metric.is-clear .metric-value { color: #7b877f; font-weight: 450; }
.task-metrics .metric.is-clear .metric-icon { background: transparent; color: #86958a; }
.task-metrics .metric.is-clear .metric-bottom strong { color: #626e66; font-weight: 400; }
.app-shell .dashboard-grid { grid-template-columns: minmax(0, 1fr) 238px; gap: 24px; }
.app-shell .dash-main { gap: 20px; }
.app-shell .dash-side { display: grid; grid-template-columns: 1fr; gap: 17px; }
.task-panel { border-radius: 16px; }
.task-panel .panel-head { padding: 20px 22px 17px; }
.task-panel .panel-head h2 { font-size: 18px; }
.task-panel .panel-head p { font-size: 11px; color: #626e66; margin-top: 5px; }
.application-table .primary-text { font-weight: 600; font-size: 14px; line-height: 1.55; }
.application-table td.mobile-hide .primary-text { font-size: 12px; font-weight: 400; color: #59685e; }
.application-table .amount { font-size: 15px; font-weight: 650; }
.application-table th { padding: 12px 18px; color: #6e7771; }
.application-table td { padding: 17px 18px; }
.application-table .secondary-text { color: #626e66; }
.application-table .status-cell .secondary-text { line-height: 1.6; }
.application-table .action-header { text-align: right; }
.application-table .attention-row .primary-cell { box-shadow: inset 3px 0 #c38c3a; }
.application-table .attention-row .status-cell .secondary-text { color: #956019; font-weight: 500; }
.order-actions .task-action { font-size: 11px; background: #f0f6f1; border-color: #e0eae2; color: #2e6544; padding: 7px 11px; min-height: 32px; }
.order-actions .task-action:hover { background: #e5efe7; border-color: #b8d1be; }
.order-actions .copy-info { font-size: 11px; color: #767e78; }
.activity-panel .panel-head { padding: 4px 0 15px; border-bottom: 1px solid #e1e5e2; }
.activity-panel .panel-head h2 { font-size: 14px; font-weight: 550; color: #59665d; }
.activity-panel .panel-head .small { font-size: 10px; color: #626e66; }
.activity-panel .timeline { padding: 20px 3px 0; }
.activity-panel .timeline-item { padding-bottom: 23px; border-color: #dfe5e1; }
.activity-panel .timeline-item:before { background: #b1bdb4; box-shadow: 0 0 0 3px var(--bg); }
.activity-panel .timeline-item strong { color: #5d6961; font-size: 11px; font-weight: 400; }
.activity-panel .timeline-item a, .activity-panel .timeline-item p { color: #626e66; font-size: 10px; }
.delivery-reminder { display: flex; gap: 10px; padding-top: 19px; border-top: 1px solid #e1e5e2; color: #65796b; }
.delivery-reminder>.icon { width: 17px; height: 17px; margin-top: 2px; }
.delivery-reminder strong { display: block; font-size: 11px; font-weight: 550; color: #5e6b62; }
.delivery-reminder span { display: block; font-size: 11px; color: #626e66; margin-top: 4px; line-height: 1.8; }
.workflow-help { background: #f9faf9; border: 1px solid #e2e7e3; border-radius: 13px; overflow: hidden; }
.workflow-help>summary { display: flex; justify-content: space-between; align-items: center; padding: 17px 20px; color: #65746a; cursor: pointer; font-size: 12px; list-style: none; }
.workflow-help>summary::-webkit-details-marker { display: none; }
.workflow-help>summary>span:first-child { display: inline-flex; align-items: center; gap: 9px; }
.workflow-help .icon { width: 16px; height: 16px; }
.workflow-help>summary:focus-visible { outline: 3px solid #438774; outline-offset: -4px; }
.workflow-help[open] .disclosure-mark { transform: rotate(45deg); }
.workflow-help .flow { border-top: 1px solid var(--line); }
.archive-help { padding: 18px 22px; font-size: 11px; color: #68776c; border-top: 1px solid var(--line); }
.archive-help strong { color: #52675a; font-weight: 550; }
.archive-help p { margin-top: 5px; }
.archive-help .connection { padding-top: 10px; }
.app-shell .detail-head h1, .app-shell h1:has(.detail-head) { font-size: 27px; }
.app-shell .detail-head { font-size: inherit; }

@media (min-width: 1600px) {
  .app-shell .dashboard-grid { grid-template-columns: minmax(0, 1fr) 260px; }
}
@media (max-width: 1200px) {
  .app-shell { padding-left: 176px; }
  .workspace-sidebar { width: 176px; padding-inline: 10px; }
  .sidebar-brand .brand { gap: 8px; padding-inline: 5px; }
  .sidebar-brand .brand strong { font-size: 14px; }
  .sidebar-brand .brand small { font-size: 7px; letter-spacing: .7px; }
  .app-shell .main { padding: 16px 25px 28px; }
  .app-shell .topbar { padding: 0 25px; }
  .app-shell .dashboard-grid { grid-template-columns: 1fr; }
  .app-shell .dash-side { grid-template-columns: 1fr 1fr; padding: 10px 3px 0; gap: 30px; }
  .delivery-reminder { align-self: start; }
  .task-metrics { gap: 10px; }
  .task-metrics .metric { padding: 17px 16px 14px; }
  .task-metrics .metric-top { font-size: 12px; }
  .metric-bottom>span { display: none; }
}
@media (max-width: 950px) and (min-width: 701px) {
  .app-shell { padding-left: 160px; }
  .workspace-sidebar { width: 160px; padding-inline: 10px; }
  .sidebar-brand .brand { gap: 7px; padding-inline: 2px; }
  .sidebar-brand .brand-mark { width: 30px; height: 32px; font-size: 15px; }
  .sidebar-brand .brand strong { font-size: 12px; }
  .sidebar-brand .brand small { font-size: 6px; letter-spacing: .6px; }
  .workspace-nav .nav-item { padding: 11px 12px; gap: 10px; font-size: 12px; }
  .task-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .task-metrics .metric { grid-column: auto; min-height: 166px; }
  .task-metrics .metric-note { min-height: 18px; }
  .metric-bottom>span { display: inline; }
  .app-shell .main { padding-inline: 20px; }
  .app-shell .topbar { padding-inline: 20px; }
  .app-shell .today { display: none; }
  .application-table .order-actions { flex-direction: column; align-items: flex-end; gap: 1px; }
  .application-table td, .application-table th { padding-inline: 13px; }
  .app-shell .page-heading { flex-wrap: wrap; }
  .app-shell .page-heading>.actions { max-width: 100%; }
  .app-shell .detail-grid { grid-template-columns: 1fr; }
  .app-shell .company-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .app-shell { padding-left: 0; }
  .workspace-sidebar { display: none; }
  .app-shell>.workspace { padding: 0; }
  .app-shell .topbar { height: 60px; padding: 0 18px; }
  .topbar-leading { gap: 9px; }
  .menu-toggle { display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: #42634e; width: 36px; height: 38px; padding: 0; flex-shrink: 0; }
  .menu-toggle:hover { background: #e9efe9; }
  .app-shell .crumb { font-size: 11px; }
  .app-shell .crumb span { padding-inline: 7px; }
  .app-shell .today { display: none; }
  .app-shell .top-right { gap: 0; }
  .header-account { gap: 6px; }
  .header-account .account-label { display: none; }
  .header-account>.btn { width: 30px; min-height: 34px; }
  .app-shell .main { padding: 10px 18px 24px; }
  .app-shell .preview-bar { padding: 7px 0; font-size: 10px; }
  .app-shell .page-heading { padding: 22px 0 24px; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
  .app-shell .page-heading h1 { font-size: 28px; letter-spacing: -.8px; }
  .app-shell .page-heading p { font-size: 12px; }
  .app-shell .eyebrow { font-size: 10px; margin-bottom: 6px; }
  .overview-heading { margin-bottom: 11px; }
  .overview-heading h2 { font-size: 13px; }
  .completed-link { font-size: 11px; }
  .task-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 22px; }
  .task-metrics .metric, .task-metrics .metric:nth-child(-n+2), .task-metrics .metric:last-child { grid-column: auto; display: block; padding: 16px 14px 13px; min-height: 0; border-radius: 13px; }
  .task-metrics .metric-top { font-size: 12px; }
  .task-metrics .metric-icon { display: grid; height: 21px; width: 21px; }
  .task-metrics .metric:last-child .metric-icon { display: grid; }
  .task-metrics .metric-value, .task-metrics .metric:last-child .metric-value { font-size: 34px; margin: 12px 0 7px; }
  .task-metrics .metric-note { font-size: 10px; min-height: 33px; }
  .task-metrics .metric:last-child .metric-note { margin: 0; }
  .metric-bottom { margin-top: 10px; padding-top: 10px; }
  .metric-bottom strong { font-size: 10px; }
  .metric-bottom>span { display: none; }
  .app-shell .dashboard-grid { gap: 22px; }
  .app-shell .dash-side { grid-template-columns: 1fr; gap: 19px; padding: 0 4px; }
  .task-panel .panel-head { padding: 18px 17px; }
  .task-panel .panel-head h2 { font-size: 16px; }
  .task-panel .panel-head p { font-size: 10px; }
  .application-table.responsive tr { grid-template-columns: minmax(0, 1fr) auto; padding: 18px; }
  .application-table.responsive td.primary-cell { grid-column: 1 / -1; grid-row: 1; padding-bottom: 5px; }
  .application-table.responsive .primary-text { font-size: 14px; font-weight: 600; }
  .application-table.responsive td.status-cell { grid-column: 1; grid-row: 2; text-align: left; }
  .application-table.responsive td.status-cell .secondary-text { max-width: none; margin-left: 0; font-size: 10px; }
  .application-table.responsive td.amount-cell { grid-column: 2; grid-row: 2; font-size: 16px; padding-top: 4px; }
  .application-table.responsive td.action-cell { grid-row: 3; margin-top: 9px; }
  .application-table.responsive .attention-row { box-shadow: inset 3px 0 #c38c3a; }
  .application-table.responsive .attention-row .primary-cell { box-shadow: none; }
  .application-table .order-actions { flex-direction: row; }
  .order-actions .task-action { min-height: 38px; padding: 8px 13px; }
  .workflow-help>summary { padding: 16px; }
  .app-shell .footer-note { margin-top: 23px; font-size: 10px; }
  .app-shell .detail-head h1, .app-shell h1:has(.detail-head) { font-size: 23px; }
  .amount-strip { grid-template-columns: 1fr; padding: 10px 20px; gap: 0; }
  .amount-strip>div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; }
  .amount-strip>div+div { border-top: 1px solid var(--line); }
  .amount-strip small { margin: 0; }
  .amount-strip strong { font-size: 18px; white-space: nowrap; flex-shrink: 0; }
  .mobile-nav-dialog[open] { display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; margin: 0; width: min(256px, calc(100vw - 30px)); height: 100dvh; max-height: 100dvh; max-width: none; padding: 24px 17px; border: 0; border-radius: 0 18px 18px 0; background: #183e33; color: #fff; box-shadow: 12px 0 60px #18251e33; }
  .mobile-nav-dialog::backdrop { background: #14251d66; backdrop-filter: blur(3px); }
  .drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 0 2px 31px; }
  .drawer-head .brand { padding: 0; gap: 9px; color: #fff; }
  .drawer-head .brand:hover { text-decoration: none; }
  .drawer-head .brand>div:last-child { display: block; }
  .drawer-head .brand-mark { background: #ffffff0c; border: 1px solid #ffffff3b; }
  .drawer-head .brand strong { font-size: 14px; }
  .drawer-head .brand small { color: #b1c6b9; font-size: 7px; letter-spacing: .7px; }
  .drawer-head .close { color: #dbe6de; background: #ffffff13; width: 30px; height: 30px; }
  .mobile-nav-dialog .sidebar-caption { margin-top: 4px; }
  .toasts { bottom: 24px; }
}
@media (max-width: 360px) {
  .app-shell .main { padding-inline: 14px; }
  .app-shell .topbar { padding-inline: 11px; }
  .app-shell .crumb { font-size: 10px; }
  .task-metrics .metric, .task-metrics .metric:last-child { padding-inline: 12px; }
  .task-metrics .metric-top { font-size: 11px; }
  .application-table.responsive tr { padding: 16px; }
}