/* R5 presentation layer. Keep business fields, event hooks and role projections intact. */
:root {
  color-scheme: light;
  --green: #2164d9;
  --deep: #12345c;
  --muted: #607087;
  --line: #dfe6ef;
  --cream: #f3f6fb;
  --orange: #a85a09;
  --red: #b42336;
  --r5-blue-soft: #eef4ff;
  --r5-ink: #1e293b;
  --r5-success: #237346;
  color: var(--r5-ink);
  background: var(--cream);
  font-size: 14px;
  line-height: 1.6;
}

body { background: var(--cream); color: var(--r5-ink); }
[hidden] { display: none !important; }
a, button, input, select, textarea { touch-action: manipulation; }
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid #83afff;
  outline-offset: 3px;
}
button:disabled { cursor: not-allowed; opacity: .65; }
::selection { background: #dceaff; color: #163a72; }

/* White navigation keeps a long, role-specific menu within the viewport. */
.sidebar {
  width: 236px;
  padding: 25px 16px 18px;
  background: #fff;
  color: #46566d;
  border-right: 1px solid var(--line);
}
.sidebar .brand { color: #17385f; margin: 0 10px 25px; flex-shrink: 0; }
.brand-mark { color: #fff; background: #2164d9; border-radius: 10px; }
.brand small { color: #64748b; font-size: 12px; letter-spacing: 1.2px; }
.nav-label { color: #5d708b; font-size: 12px; letter-spacing: .6px; margin: 10px 12px; flex-shrink: 0; }
.nav { flex: 1; min-height: 0; overflow-y: auto; gap: 4px; scrollbar-width: thin; padding: 2px; }
.nav a { min-height: 42px; padding: 10px 12px; color: #46566d; font-size: 14px; border-radius: 8px; }
.nav a:hover { background: #f1f5fb; color: #174eaa; }
.nav a.active { color: #1756ba; background: #eaf1ff; font-weight: 650; box-shadow: inset 3px 0 #2164d9; }
.nav a.active:after { background: #2164d9; }
.sidebar-bottom { flex-shrink: 0; margin-top: 16px; }
.demo-box { border-color: #dce6f3; background: #f7f9fd; color: #607087; font-size: 12px; line-height: 1.7; padding: 12px; }
.demo-box strong { color: #3a5274; font-size: 12px; }
.demo-dot { background: #3978df; }
.sidebar-user { color: #34445b; font-size: 13px; margin: 16px 7px 0; }
.sidebar-user small { color: #64748b; font-size: 12px; }
.avatar { color: #1d58b0; background: #e5eeff; }
.logout { color: #61718a; min-width: 36px; min-height: 36px; border-radius: 8px; }
.logout:hover { color: #174eaa; background: #edf3ff; }
.workspace { margin-left: 236px; }
.topbar { min-height: 74px; height: auto; padding: 16px 30px; background: #fff; border-color: var(--line); }
.breadcrumb { color: #64748b; font-size: 13px; }
.breadcrumb strong { color: #293b55; font-weight: 600; }
.topbar-tools { gap: 12px; }
.topbar-tools > button { min-width: 38px; min-height: 38px; border-radius: 8px; }
.topbar-tools > button:hover { background: #eef4ff; color: #1d58b0; }
.search input { height: 40px; font-size: 13px; color: #334155; border-color: #d8e1ed; background: #f8fafd; }
.search .icon { top: 12px; color: #5d708b; }
.environment { font-size: 12px; color: #52657e; background: #f3f6fb; border-color: #dce4ef; }
.content { padding: 28px 30px 36px; }
.page-head { margin-bottom: 24px; }
.page-head h1 { color: #1c2f49; font-size: 26px; font-weight: 650; letter-spacing: 0; }
.page-head p { color: #607087; font-size: 14px; }
.eyebrow { font-size: 12px; color: #5d708b; letter-spacing: 1px; }

/* Buttons and form controls share one clear primary action. */
.btn { min-height: 40px; padding: 9px 15px; border-color: #d4dfed; border-radius: 8px; color: #425873; font-size: 13px; background: #fff; }
.btn:hover { color: #174eaa; background: #f0f5ff; border-color: #b4cdf2; }
.btn-primary { color: #fff; background: #2164d9; border-color: #2164d9; box-shadow: 0 2px 4px #174eaa15; }
.btn-primary:hover { color: #fff; background: #1954bf; border-color: #1954bf; }
.btn-small { min-height: 34px; padding: 7px 11px; font-size: 12px; }
.btn-quiet { background: #fff; }
.btn-danger { color: #ae283b; border-color: #edc5cc; background: #fff7f8; }
.btn-danger:hover { color: #9b1e30; border-color: #df9eaa; background: #ffedf0; }
.link { color: #215fbd; font-size: 13px; line-height: 1.6; }
.button-row { gap: 9px; }
.field label { color: #3f5069; font-size: 14px; font-weight: 550; }
.field label small { color: #5d708b; font-size: 12px; }
.field input, .field select, .field textarea,
.filterbar input, .filterbar select {
  border-color: #cdd8e6;
  color: #24364d;
  background: #fff;
  font-size: 14px;
  min-height: 44px;
  border-radius: 7px;
}
.field input:focus, .field select:focus, .field textarea:focus,
.filterbar input:focus, .filterbar select:focus {
  outline: none;
  border-color: #4f87e5;
  box-shadow: 0 0 0 3px #e5eeff;
}
.field input:disabled, .field select:disabled, .field textarea:disabled { color: #5d708b; background: #f2f5f9; }
.field textarea { min-height: 96px; line-height: 1.8; }
.field input[type="checkbox"], .field input[type="radio"],
.hf-check input, .hf-checklist input, .oa-no-extra input[type="checkbox"] {
  width: 18px; height: 18px; min-height: 18px; padding: 0; accent-color: #2164d9;
}
input[type="file"] { max-width: 100%; min-width: 0; color: #47576e; }
input[type="file"]::file-selector-button {
  min-height: 34px; margin-right: 10px; padding: 6px 12px;
  border: 1px solid #cbd9ed; border-radius: 6px;
  color: #215fbd; background: #edf3ff; font: inherit; cursor: pointer;
}
.help, .subtext, .panel-note, .footer-note, .detail-fact,
.panel-head p, .log-row span:first-child, .stage-tags span,
.wf-flow-hint, .wf-step small, .collab-readers,
.oa-file-slot > .link, .oa-payment-files > .help,
.oa-process-images .help, .oa-slot-preview figcaption,
.v18-file-previews figcaption, .v18-source-card, .v18-source-card small {
  color: #607087; font-size: 12px; line-height: 1.75;
}
.required-star { color: #c12c43; }
.form-grid { gap: 20px; }
.form-section { color: #273d5b; border-color: var(--line); }
.item-row { border-color: #dce5f1; background: #f8faff; border-radius: 10px; padding: 18px; }
.item-row-head { color: #4d6584; font-size: 13px; margin-bottom: 15px; }
.item-fields { gap: 12px; }
.hf-form-section { background: #edf3ff; color: #315787; font-size: 14px; border-radius: 7px; }
.hf-checklist { border-color: #d6e1ef; }
.hf-checklist legend { color: #3f5069; font-size: 13px; }
.hf-checklist label { color: #43546c; line-height: 1.8; }
.wf-form-note { color: #4f6686; background: #f2f6fd; border-color: #dce6f4; font-size: 13px; }

/* Data density remains readable; wide tables scroll inside their own region. */
.panel { border-color: #dfe6ef; border-radius: 12px; box-shadow: 0 2px 7px #16365c04; margin-bottom: 22px; }
.panel-head { padding: 18px 21px; border-color: #e8edf4; }
.panel-head h2 { color: #243a58; font-size: 16px; font-weight: 650; }
.panel-count { color: #4a6590; background: #edf3ff; font-size: 12px; padding: 3px 7px; }
.table-wrap { max-width: 100%; overflow-x: auto; scrollbar-width: thin; overscroll-behavior-x: contain; }
.table-wrap table { min-width: 640px; white-space: normal; }
th { color: #5b6e89; background: #f7f9fd; border-color: #e2e8f1; font-size: 12px; font-weight: 600; padding: 13px 16px; white-space: nowrap; letter-spacing: 0; }
td { color: #40516b; border-color: #e9eef5; font-size: 14px; padding: 16px; line-height: 1.65; vertical-align: top; overflow-wrap: anywhere; }
td.primary { color: #243d61; font-weight: 550; }
tbody tr:hover { background: #f7faff; }
.table-small td { font-size: 13px; padding: 13px 15px; }
.table-small th { padding: 12px 15px; }
.order-title { max-width: 270px; white-space: normal; overflow: visible; }
.money { color: #263d5c; font-variant-numeric: tabular-nums; }
.due-normal { color: #53647c; }
.late { color: #a6560c; }
.empty { color: #697b93; font-size: 14px; }
.empty .icon { color: #9aaac0; }
.filterbar { padding: 15px 20px; border-color: var(--line); background: #fff; }
.tab { color: #60728b; font-size: 13px; min-height: 38px; padding: 8px 12px; }
.tab.active { background: #edf3ff; color: #205bb8; border-color: #cbddf8; }
.cards { gap: 18px; }
.kpi { border-color: #dfe6f0; padding: 22px; border-radius: 12px; box-shadow: 0 2px 7px #16365c04; }
.kpi-top { color: #576c88; font-size: 14px; }
.kpi-symbol { color: #366bc1; background: #edf3ff; }
.kpi-value { color: #18395f; font-size: 32px; font-weight: 650; margin: 10px 0 14px; letter-spacing: -.4px; }
.kpi-value span { color: #5d708b; font-size: 12px; }
.kpi-foot { color: #5d708b; font-size: 12px; border-color: #edf1f6; line-height: 1.65; }
.tiny-dot { background: #4d83d7; }
.warn-dot { background: #c67b20; }
.step-icon { color: #3c6cac; background: #edf3ff; }
.pipeline-step:not(:last-child):after { background: #dbe5f3; }
.pipeline-step strong { color: #243b59; }
.pipeline-step span { color: #607087; font-size: 13px; }
.progress { background: #e8eef7; }
.progress i { background: #4d87e5; }
.progress-row span { color: #607087; font-size: 12px; }
.attention-content strong { color: #344b6b; font-size: 13px; white-space: normal; }
.attention-content small, .activity-row small { color: #5d708b; font-size: 12px; }
.attention-icon { color: #a96513; background: #fff3df; }
.activity-row { color: #506581; font-size: 13px; border-color: #edf1f7; }
.activity-mark { background: #85a9df; }
.role-pill { color: #315f9f; background: #edf3ff; font-size: 12px; }
.log-row { color: #5c708c; border-color: #e9eef6; font-size: 13px; }
.detail-overview { gap: 18px; }
.detail-fact strong { color: #294969; font-size: 16px; }
.detail-note { background: #f3f7fd; color: #526985; font-size: 14px; }
.detail-inline { color: #536b88; font-size: 13px; border-color: #e7edf5; }
.detail-inline-head { color: #294969; }
.detail-inline p { color: #607087; }
.detail-sections .panel-head h2 { font-size: 14px; }
.master-cost-value { color: #254c80; }
.text-muted, .muted { color: #5d708b; }

/* Success, warning and errors keep their business meaning. */
.badge { background: #eaf6ee; color: #267248; font-size: 12px; padding: 5px 8px; line-height: 1.45; }
.badge.gray { background: #f0f3f7; color: #63738a; }
.badge.blue { background: #eaf2ff; color: #2c62af; }
.badge.orange { background: #fff2df; color: #a55c0e; }
.badge.red { background: #ffedf0; color: #b12f43; }
.alert { color: #94600f; background: #fff6e6; border-color: #eedbb5; font-size: 13px; }
.alert.info { color: #3e628e; background: #eef5ff; border-color: #d3e3f8; }
.alert.error { color: #ae2c40; background: #fff1f3; border-color: #edc7ce; }
.wf-warning { color: #996013; background: #fff7e9; border-color: #efe0bf; font-size: 12px; }
.wf-success { color: #2a744b; background: #edf8f1; border-color: #d9eddf; font-size: 12px; }
.wf-gate { color: #976016; background: #fff8e9; border-color: #eeddb9; font-size: 13px; }
.wf-gate.ready { color: #2b704c; background: #edf7f0; border-color: #d3e7dc; }
.wf-private > .panel-head { background: #f5f8fd; }
.dl-status { color: #8b5d12; background: #fff6e4; border-color: #eedeaf; font-size: 12px; }
.dl-bell { color: #425e85; font-size: 13px !important; }
.dl-count { background: #c13b4d; font-size: 12px; }
.ex-progress-target { outline-color: #3477df; box-shadow: inset 0 0 0 3px #d8e8ff; }

/* Order and OA steps retain all details and action hooks. */
.wf-order-banner { background: #edf4ff; border-color: #d4e3fa; padding: 23px; border-radius: 12px; }
.wf-order-banner h2 { color: #244b7b; font-size: 20px; }
.wf-order-banner p { color: #567193; font-size: 13px; }
.wf-selector { border-color: #dce5f0; }
.wf-selector label { color: #536b88; font-size: 13px; }
.wf-selector select { min-height: 44px; font-size: 14px; color: #365578; border-color: #d4dfed; background: #f8faff; }
.wf-flow { grid-template-columns: repeat(9, minmax(106px, 1fr)); padding: 25px 18px; }
.wf-step { min-width: 106px; }
.wf-step > span { width: 35px; height: 35px; background: #edf2f9; color: #6b7d97; font-size: 13px; }
.wf-step:not(:last-child):after { background: #dce5f2; }
.wf-step.done > span { background: #ddf0e4; color: #237346; }
.wf-step strong { color: #46607f; font-size: 13px; }
.wf-step small { color: #5d708b; font-size: 12px; }
.wf-guide { color: #4d6a8b; }
.wf-guide-grid p { color: #5d718b; font-size: 13px; }
.cl-section-nav { gap: 8px; }
.cl-section-nav a { color: #3d6395; background: #fff; border-color: #d4dfef; font-size: 13px; min-height: 38px; padding: 9px 12px; }
.cl-section-nav a:hover, .cl-section-nav a:focus-visible { background: #eef4ff; border-color: #90b5ee; outline-color: #c1d7f8; }
.cl-owner { color: #4d6481; background: #f7faff; border-color: #dce6f3; border-radius: 8px; }
.cl-owner span, .cl-owner small { color: #5d708b; font-size: 12px; }
.cl-owner strong { color: #2e527d; font-size: 14px; }
.cl-subtitle { color: #3e5e87; font-size: 14px; border-color: #e3ebf5; }
.cl-details summary { color: #3d6090; font-size: 13px; }
.v18-identity { border-color: #dfe7f2; border-radius: 10px; }
.ex-public-grid { gap: 16px; }
.ex-progress-card { background: #fcfdff; border-color: #dce6f3; border-radius: 10px; padding: 18px; }
.ex-progress-card h3 { color: #2b4669; font-size: 16px; line-height: 1.6; }
.ex-progress-card p, .ex-result-note { font-size: 13px; color: #536b88; line-height: 1.8; }
.ex-progress-card dl { font-size: 13px; }
.ex-progress-card dt { color: #5d708b; }
.ex-progress-card dd { color: #3e5676; }
.ex-progress-card .button-row { margin-top: 14px; }
.dl-alert { border-color: #dce5f1; border-radius: 10px; }
.dl-alert > p, .dl-alert-head { font-size: 14px; }
.v18-inbox-card { border-color: #e3eaf4; font-size: 14px; }
.v18-inbox-card p { color: #5b708b; }
.duty-content dt, .duty-content dd { color: #526b89; font-size: 13px; line-height: 1.85; }
.duty-content dt { color: #314f77; }
.hf-status { border-color: #e0e8f3; }
.hf-status p, .hf-text p { color: #506784; font-size: 14px; }
.hf-text { border-color: #e5ecf5; }
.hf-text strong { color: #36577f; font-size: 13px; }
.hf-preview-card { background: #f1f6ff; border-color: #d5e3f7; }
.hf-preview-card strong { color: #31537d; font-size: 14px; }
.hf-preview-card p { color: #60738c; font-size: 12px; }
.hf-product-card { color: #4d6380; background: #fcfdff; border-color: #d9e5f4; }
.hf-product-card h3 { color: #2f507d; font-size: 15px; }
.hf-product-card h3 small { color: #667a94; font-size: 12px; }
.hf-product-card p { font-size: 13px; }
.product-attachment-area { border-color: #cedcf0; padding-top: 15px; }
.product-attachment-area label { color: #4c6484; font-size: 14px; }
.oa-file-slot, .oa-payment-files, .oa-product-editor, .oa-process-root { background: #f7faff; border-color: #d5e3f7; border-radius: 9px; }
.oa-file-slot { padding: 14px; }
.oa-file-slot > label, .oa-process-root > legend, .oa-process-images > label { color: #405e85; font-size: 14px; }
.oa-file-slot input[type="file"], .oa-process-images input[type="file"] { font-size: 13px; }
.oa-file-slot > .link { color: #285fac; }
.oa-file-slots { gap: 14px; }
.oa-slot-preview img, .oa-image-gallery img { border-color: #d4e0f1; background: #fff; }
.oa-image-gallery figure, .oa-image-gallery .link { font-size: 12px; }
.oa-note-text { color: #435d7f; font-size: 14px; line-height: 1.9; }
.v18-source-card { color: #445e7e; background: #f4f8ff; border-color: #d6e2f3; max-width: 100%; }
.oa-process-chip span { color: #3e6599; border-color: #ccdcef; }
.oa-process-chip input:checked + span { color: #215fbd; border-color: #76a0e0; background: #eaf2ff; }
.oa-process-chip input:focus-visible + span { outline-color: #91b8f2; }
.oa-process-card { border-color: #d9e5f3; }
.oa-process-card-head, .oa-no-extra { font-size: 13px !important; color: #496482; }
.oa-process-card-head > span { color: #5d708b; font-size: 12px; }
.v18-supplier-summary { font-size: 12px; color: #5b718e; }
.v18-supplier-summary summary { color: #416692; }
.v18-export-status { color: #276b48; font-size: 13px; }

/* A stable modal shell keeps submit controls available on long order forms. */
dialog {
  color: var(--r5-ink); border-color: #d6e1ef; border-radius: 14px;
  width: min(800px, calc(100vw - 40px));
  max-height: min(92vh, 980px); max-height: min(92dvh, 980px);
  box-shadow: 0 24px 90px #102d5538;
}
dialog.wide { width: min(1160px, calc(100vw - 40px)); }
dialog[open] { display: flex; flex-direction: column; overflow: hidden; }
dialog::backdrop { background: #122a4a70; backdrop-filter: blur(2px); }
dialog > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.modal-head { flex-shrink: 0; padding: 22px 25px; background: #fff; border-color: #e1e8f2; }
.modal-head h2 { color: #263e60; font-size: 20px; }
.modal-head p { color: #607087; font-size: 13px; line-height: 1.8; }
.modal-close { color: #617793; min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
.modal-close:hover { color: #1c59b2; background: #edf4ff; }
.modal-body { padding: 24px 25px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.modal-footer { flex-shrink: 0; padding: 16px 25px; background: #f7faff; border-color: #dce5f1; align-items: center; }
.modal-footer .help { font-size: 12px; color: #5d708b; }
.toast { background: #264f83; font-size: 14px; border-radius: 10px; box-shadow: 0 7px 24px #17385b26; }
.toast.error { background: #a82c40; }
.session-reauth-notice { flex-shrink: 0; margin: 0; padding: 14px 20px; border-radius: 0; border-left: 0; border-right: 0; font-size: 13px; }
.session-reauth-notice p { margin: 6px 0 10px; line-height: 1.75; }
#app > .session-reauth-notice { position: fixed; z-index: 60; top: 18px; left: 256px; right: 20px; border: 1px solid #c3d9f5; border-radius: 10px; box-shadow: 0 10px 35px #15345d24; }

/* Work chat remains an operational tool with readable privacy and audit states. */
.collab-room-link:hover, .collab-room-link.active { background: #edf4ff; }
.collab-room-link.active { box-shadow: inset 3px 0 #397bdf; }
.collab-room-link { border-color: #e6edf6; }
.collab-room-link strong { color: #365b8b; font-size: 14px; }
.collab-room-link small, .collab-room-heading p { color: #5d708b; font-size: 12px; }
.collab-room-heading h2 { color: #284c7a; font-size: 20px; }
.collab-thread .collab-message { border-color: #dce5f1; border-radius: 10px; }
.collab-thread .collab-message-mine { background: #eef5ff; border-color: #c9dcf7; }
.collab-message-meta { color: #617793; font-size: 12px; }
.collab-body { color: #3f5675; font-size: 14px; line-height: 1.8; }
.collab-message blockquote { color: #526b8a; border-color: #9fbee8; background: #f2f6fd; }
.collab-thread .collab-message-withdrawn { background: #f3f5f8 !important; color: #64748b; }
.collab-message-withdrawn .collab-body { color: #64748b; }
.collab-attachments a { color: #285faa; border-color: #d1e0f5; background: #f5f9ff; font-size: 13px; }
.collab-attachments small { color: #617793; font-size: 12px; }
.collab-compose-heading, .collab-compose-footer { font-size: 14px; }
.collab-compose-footer small { color: #5d708b; font-size: 12px; }
.collab-compose-panel textarea { color: #2d4769; border-color: #cbdbee; font-size: 14px; line-height: 1.8; }
.collab-compose-panel textarea:focus { outline-color: #99bdf3; }
.collab-compose-options summary, .collab-member-details summary { color: #3d6396; font-size: 13px; }
.collab-search-bar { background: #f5f8fe; border-color: #dce6f5; }
.collab-search-bar input { font-size: 14px; }
.collab-pin-list, .collab-announcement { color: #3f5e88; background: #f0f6ff; border-color: #d6e4f8; }
.collab-announcement h3 { color: #2c507e; font-size: 15px; }
.collab-announcement p { color: #4d6687; font-size: 14px; }
.collab-member-details, .collab-document-options, .collab-group-roster { border-color: #d8e4f3; }
.collab-admin-audit { color: #825720; background: #fff8ec; border-color: #ead7b9; font-size: 13px; }
.collab-compose-error { color: #b12f43; }
.collab-pending-attachments > span { color: #40638e; background: #eef5ff; border-color: #d3e3f8; font-size: 12px; }

/* Earlier feature sheets include dense 9–11px labels; keep those contracts legible. */
.record-list p, .record-list summary, .master-source, .master-price-source summary,
.master-source-info, .master-source-info strong, .wf-blockers, .collab-compose-heading .help,
.wf-grid td .wf-blockers, .wf-terms p, .wf-arrival,
.wf-arrival > span, .wf-arrival > small, .wf-public-cost p, .wf-checks label,
.wf-grid .panel-head .help, .wf-legacy p, .collab-order-link,
.collab-entry p, .collab-inbox-item p, .collab-inbox-item small,
.collab-unread, .collab-members, .collab-members strong,
.collab-reference, .collab-mentions, .collab-nudge-facts,
.collab-event-history, .collab-event-history .collab-body,
.collab-empty, .collab-mention-options label, .duty-binding,
.duty-content dl > div, .collab-inbox-item > .badge,
.wf-cost-arrival-options strong, .wf-cost-arrival-options small, .wf-delivery p {
  font-size: 12px;
  line-height: 1.8;
}
.head-actions .btn, .detail-actions .btn, .wf-selector > .btn,
.wf-section-actions .btn, .collab-reference .link, .collab-message .link,
.collab-nudge-head .link, .collab-message blockquote, .wf-guide, .cl-details,
.oa-source-gallery .link, .wf-order-banner .button-row .btn {
  font-size: 13px;
}
.collab-messages .collab-body { font-size: 14px; }

/* Existing login and the DingTalk entry use the same palette without new assets. */
.login { background: #f8faff; }
.login-visual { background: #173e70; padding: 50px 58px; }
.login-visual .brand { color: #fff; }
.login-visual .brand small { color: #b6c9e3; font-size: 12px; }
.login-visual h1 { font-size: 39px; letter-spacing: 1px; }
.login-visual p { color: #c3d2e6; font-size: 14px; }
.login-graphic { color: #bdd5f7; }
.login-graphic > path { stroke: #bdd5f7; }
.login-caption { color: #b7c9e0; font-size: 12px; letter-spacing: .7px; }
.login-form-container h2 { color: #243f63; }
.login-form-container > p { color: #5d708b; font-size: 14px; }
.login-form-container .btn-primary { font-size: 14px; }
.demo-accounts { color: #5f7592; background: #f2f6fd; border-color: #dce6f5; }
.demo-accounts p { color: #5d708b; font-size: 12px; }
.demo-account-buttons button { min-height: 34px; padding: 6px 9px; color: #3f6393; border-color: #d1dff1; border-radius: 6px; font-size: 12px; }
.demo-account-buttons button:hover { background: #e6efff; }
body > main { max-width: 1080px; padding: 58px 28px; }
body > main > .brand { color: #275da5; font-size: 19px; margin: 0; }
body > main h1 { color: #213e63; font-size: 36px; letter-spacing: -.4px; }
body > main h2 { color: #2c4d77; }
body > main .intro, body > main .foot, body > main .grid p { color: #60738e; font-size: 14px; }
body > main .tag { color: #2e65ad; background: #eaf2ff; font-size: 13px; }
#ding-login, a#local-demo { min-height: 44px; padding: 12px 20px; color: #fff; background: #2164d9; border-radius: 8px; font-size: 14px; }
#ding-login:hover, a#local-demo:hover { background: #1954bf; }
#connection-status { color: #546d8b; line-height: 1.8; }
#entry-error { color: #ae2c40; font-size: 14px; }
body > main a.secondary { color: #2c65b4; font-size: 13px; min-height: 40px; display: inline-flex; align-items: center; }

@media (max-width: 1180px) {
  .content { padding: 24px; }
  .topbar { padding: 15px 24px; }
  .cards { gap: 14px; }
  .kpi { padding: 18px; }
  .kpi-value { font-size: 28px; }
  .item-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .item-fields > .field:first-child { grid-column: 1 / -1; }
  .search input { width: 215px; }
}

@media (max-width: 850px) {
  #app > .session-reauth-notice { left: 18px; right: 18px; }
  .sidebar { width: min(288px, calc(100vw - 54px)); transform: translateX(-100%); }
  .sidebar-open .sidebar { transform: translateX(0); }
  .workspace { margin-left: 0; }
  .mobile-menu { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: #466487; }
  .sidebar-open .mobile-backdrop { background: #152d4c70; }
  .sidebar .brand { margin-bottom: 18px; }
  .nav a { min-height: 44px; }
  .topbar { padding: 12px 18px; }
  .content { padding: 22px 18px; }
  .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wf-order-banner { align-items: flex-start; }
  .wf-flow { grid-template-columns: repeat(9, 116px); }
  .cl-owners { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .login-visual { padding: 42px 36px; }
  .login-visual h1 { font-size: 32px; }
}

@media (max-width: 620px) {
  :root { font-size: 14px; }
  .topbar { gap: 8px; padding: 10px 12px; }
  .breadcrumb { gap: 8px; font-size: 12px; }
  .topbar-tools { gap: 5px; }
  .topbar-tools > button, .dl-bell { min-width: 44px; min-height: 44px; }
  .environment { padding: 5px 7px; }
  .content { padding: 20px 14px 28px; }
  .page-head { align-items: flex-start; gap: 14px; margin-bottom: 20px; }
  .page-head h1 { font-size: 24px; }
  .page-head p { font-size: 13px; }
  .head-actions { gap: 8px; }
  .btn, .btn-small, .button-row > .btn, .tab, .cl-section-nav a {
    min-height: 44px; padding: 10px 12px; font-size: 13px;
  }
  .link { min-height: 44px; align-items: center; padding: 8px 0; font-size: 13px; }
  .btn { white-space: normal; line-height: 1.5; text-align: center; }
  .logout { min-width: 44px; min-height: 44px; }
  .field input, .field select, .field textarea { font-size: 16px; }
  .field label { font-size: 14px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .item-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .item-fields > .field:first-child, .item-fields > .field:nth-child(3) { grid-column: 1 / -1; }
  .item-row { padding: 15px; }
  .item-row-head { font-size: 13px; }
  .field input[type="checkbox"], .field input[type="radio"] { font-size: 14px; }
  .hf-check label, .hf-checklist label, .oa-no-extra, .collab-mention-options label,
  .collab-document-options label, .collab-group-roster label { min-height: 44px; padding: 7px 0; }
  input[type="file"]::file-selector-button { min-height: 40px; }
  .panel-head { padding: 17px 16px; }
  .panel-head h2 { font-size: 15px; }
  .cards { gap: 12px; }
  .kpi { padding: 16px 14px; }
  .kpi-top { font-size: 13px; }
  .kpi-value { font-size: 25px; overflow-wrap: anywhere; }
  .kpi-foot { font-size: 12px; }
  .filterbar { padding: 13px; }
  .filterbar input { font-size: 14px; min-height: 44px; }
  th { font-size: 12px; }
  td, .table-small td { font-size: 13px; padding: 14px; }
  .table-wrap table { min-width: 670px; }
  .wf-selector { flex-wrap: wrap; }
  .wf-selector select { font-size: 14px; min-width: 0; }
  .wf-order-banner { padding: 18px; }
  .wf-order-banner h2 { font-size: 18px; }
  .wf-order-banner p { font-size: 13px; }
  .wf-order-banner .button-row .btn { min-height: 44px; font-size: 13px; padding: 9px 12px; }
  .wf-flow { padding: 20px 14px; grid-template-columns: repeat(9, 116px); gap: 6px; }
  .wf-step strong { font-size: 13px; }
  .wf-step small { font-size: 12px; }
  .wf-flow-hint { font-size: 12px; margin: 14px 16px -5px; }
  .cl-owners { padding: 15px; gap: 10px; }
  .cl-owner { padding: 12px; }
  .cl-owner strong { font-size: 13px; }
  .cl-owner span, .cl-owner small { font-size: 12px; }
  .ex-public-grid { padding: 14px; gap: 12px; }
  .ex-progress-card { padding: 16px; }
  .ex-progress-card h3 { font-size: 16px; }
  .ex-progress-card dl > div { display: block; }
  .ex-progress-card dd { text-align: left; margin: 5px 0 0; }
  .v18-identity { padding: 15px; gap: 14px; }
  .hf-product-grid { padding: 14px; }
  .oa-file-slots { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .oa-file-slot, .oa-payment-files, .oa-product-editor { padding: 13px; }
  .oa-file-slot > .link, .oa-source-gallery .link { font-size: 13px; }
  dialog, dialog.wide {
    width: calc(100vw - 24px); max-width: none;
    max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px);
    border-radius: 12px;
  }
  .modal-head { padding: 16px; align-items: flex-start; }
  .modal-head h2 { font-size: 18px; }
  .modal-head p { font-size: 12px; }
  .modal-close { min-width: 44px; min-height: 44px; margin: -4px -5px 0 5px; }
  .modal-body { padding: 18px 16px; }
  .modal-footer { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); flex-wrap: wrap; gap: 8px; }
  .modal-footer .help { width: 100%; font-size: 12px; line-height: 1.6; }
  .modal-footer .btn { flex: 1 1 auto; }
  .footer-note { flex-wrap: wrap; font-size: 12px; gap: 8px; }
  .toast { left: 50%; width: max-content; max-width: calc(100vw - 28px); font-size: 14px; bottom: 18px; }
  .collab-thread .collab-message { max-width: 100%; padding: 13px 14px; }
  .collab-room-link { padding: 14px; }
  .collab-room-link strong { font-size: 14px; }
  .collab-room-link small { font-size: 12px; }
  .collab-compose-heading .help, .collab-compose-footer small { font-size: 12px; }
  .collab-compose-footer { flex-wrap: wrap; }
  .collab-compose-footer small { max-width: 100%; }
  .collab-compose-footer .btn { width: 100%; }
  .collab-search-bar { padding: 12px; }
  .collab-search-bar input { min-height: 44px; }
  .collab-announcement, .collab-pin-list { padding: 14px; }
  .login-form-area { padding: 32px 22px; }
  .login-form-container h2 { font-size: 27px; }
  .demo-account-buttons button { min-height: 44px; font-size: 13px; padding: 9px 12px; }
  body > main { padding: 30px 18px; }
  body > main h1 { font-size: 28px; }
  body > main .panel { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Native OA: current business facts and one final decision in DingTalk. */
.native-approval-intro { display:flex; align-items:center; gap:14px; padding:16px 18px; margin:0 0 20px; border:1px solid #dbe7ff; border-radius:12px; background:#f5f8ff; }
.native-approval-intro p { margin:0; color:#526782; line-height:1.65; }
.native-approval-mark { display:grid; place-items:center; flex:0 0 42px; height:42px; border-radius:11px; background:#2164d9; color:#fff; font-size:14px; font-weight:700; letter-spacing:.06em; }
.native-approval-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.native-approval-card { min-width:0; padding:20px; border:1px solid #dfe6ef; border-radius:12px; background:#fff; }
.native-approval-card-top { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.native-approval-card-top small { color:#73849c; }
.native-approval-card h3 { margin:16px 0 8px; color:#17365e; font-size:17px; }
.native-approval-card p { color:#63748b; font-size:13px; line-height:1.7; }
.native-approval-card .native-approval-check-status { color:#245cae; font-weight:600; }
.native-approval-card .button-row { margin-top:16px; }
.native-approval-card .help { margin-bottom:0; font-size:12px; }
.footer-note { flex-wrap:wrap; }
.icp-footer { margin-top:24px; text-align:center; }
.icp-link { color:#6a7e9a; font-size:12px; text-decoration:none; }
.icp-link:hover { color:#2164d9; text-decoration:underline; }
.icp-link:focus-visible { outline:2px solid #2164d9; outline-offset:4px; }
@media(max-width:760px) { .native-approval-grid { grid-template-columns:1fr; } .native-approval-intro { align-items:flex-start; padding:14px; } .native-approval-card { padding:16px; } }

/* The server marks this workspace; URL and business data never select it. */
body[data-acceptance-workspace="true"] { --acceptance-banner-height:56px; padding-top:var(--acceptance-banner-height); }
body[data-acceptance-workspace="true"] > .acceptance-workspace-banner {
  position:fixed; inset:0 0 auto; z-index:1000; height:var(--acceptance-banner-height);
  display:flex; align-items:center; justify-content:center; gap:16px; padding:10px 24px;
  color:#795019; background:#fffbeb; border-bottom:2px solid #e5ae41;
  box-shadow:0 3px 12px #79501912; font-size:13px; line-height:1.55; overflow:auto;
}
.acceptance-workspace-banner strong { flex-shrink:0; color:#8b570c; font-size:15px; font-weight:700; }
.acceptance-workspace-banner span { min-width:0; }
body[data-acceptance-workspace="true"] .sidebar { top:var(--acceptance-banner-height); }
body[data-acceptance-workspace="true"] .topbar { position:sticky; top:var(--acceptance-banner-height); z-index:20; }
body[data-acceptance-workspace="true"] .mobile-backdrop { top:var(--acceptance-banner-height); }
body[data-acceptance-workspace="true"] .app-shell { min-height:calc(100vh - var(--acceptance-banner-height)); min-height:calc(100dvh - var(--acceptance-banner-height)); }
body[data-acceptance-workspace="true"] .environment { color:#84520d; background:#fff5d6; border-color:#e9c477; }
body[data-acceptance-workspace="true"] #app > .session-reauth-notice { top:calc(var(--acceptance-banner-height) + 18px); }
body[data-acceptance-workspace="true"] [id^="cl-"], body[data-acceptance-workspace="true"] #oa-v19 { scroll-margin-top:calc(var(--acceptance-banner-height) + 20px); }
.acceptance-workspace-tag { display:inline-flex; align-items:center; margin-bottom:9px; padding:4px 9px; border:1px solid #e9c477; border-radius:5px; color:#84520d; background:#fff5d6; font-size:12px; font-weight:650; line-height:1.4; }
@media(max-width:620px) {
  body[data-acceptance-workspace="true"] { --acceptance-banner-height:96px; }
  body[data-acceptance-workspace="true"] > .acceptance-workspace-banner { align-items:flex-start; flex-direction:column; justify-content:center; gap:4px; padding:10px 16px; }
  .acceptance-workspace-banner strong { font-size:14px; }
  .acceptance-workspace-banner span { font-size:12px; }
}