/* TradeOps 6.7: native workbench design layer. See docs/ui-reference-notes.md.
 * Original CSS, inspired by semantic tokens and quiet component hierarchy.
 * Existing DOM, visibility rules and JavaScript behavior remain authoritative.
 */
:root {
  --wb-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --wb-font-size: 14px;
  --wb-text: #20242b;
  --wb-muted: #667085;
  --wb-subtle: #798291;
  --wb-surface: #ffffff;
  --wb-surface-soft: #f8f9fb;
  --wb-surface-hover: #f2f4f7;
  --wb-border: #e4e7ec;
  --wb-border-strong: #cfd5df;
  --wb-primary: #24292f;
  --wb-link: #445f85;
  --wb-selected: #edf1f7;
  --wb-focus: #7b98c1;
  --wb-danger: #a84842;
  --wb-warning: #846128;
  --wb-radius: 6px;
  --wb-radius-panel: 8px;
  --wb-control-height: 36px;
  --wb-space: 24px;
  --ink: var(--wb-text);
  --muted: var(--wb-muted);
  --line: var(--wb-border);
  --paper: var(--wb-surface);
  --wash: var(--wb-surface-soft);
  --surface: var(--wb-surface-soft);
  --accent: var(--wb-primary);
  --accent-wash: var(--wb-surface-hover);
  --link: var(--wb-link);
  --selected: var(--wb-selected);
  --focus: var(--wb-focus);
  --danger: var(--wb-danger);
  --warn: var(--wb-warning);
}

body { font-family: var(--wb-font); font-size: var(--wb-font-size); line-height: 1.65; color: var(--wb-text); background: var(--wb-surface); text-rendering: optimizeLegibility; }
button, input, select, textarea { font-family: inherit; }
h1, h2, h3, h4 { color: var(--wb-text); letter-spacing: 0; font-weight: 600; }
h1 { font-size: 24px; line-height: 1.45; margin-bottom: 8px; }
h2 { font-size: 18px; line-height: 1.5; }
h3 { font-size: 15px; line-height: 1.6; }
h4 { font-size: 13px; line-height: 1.6; }
small, .small { font-size: 12px; line-height: 1.7; }
a { color: var(--wb-link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #2f4c76; }
::selection { color: var(--wb-text); background: #dfe7f2; }
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--wb-focus); outline-offset: 3px; }
input:focus, select:focus, textarea:focus { outline: 2px solid #c4d2e7; outline-offset: 1px; border-color: var(--wb-focus); box-shadow: none; }

/* Navigation uses the existing 228px rail and 56px header geometry. */
.side { background: var(--wb-surface-soft); border-right-color: var(--wb-border); padding: 17px 11px 13px; }
.brand { gap: 10px; padding: 3px 10px 17px; }
.brand b { font-size: 15px; line-height: 1.5; color: var(--wb-text); }
.brand small { font-size: 9px; line-height: 1.5; letter-spacing: .8px; color: var(--wb-muted); }
.brand-symbol { border-color: var(--wb-border-strong); border-radius: var(--wb-radius); background: #fff; color: #535f72; }
.nav-group { margin-top: 17px; }
.nav-group > small, .nav-section { font-size: 11px; line-height: 1.5; color: var(--wb-muted); padding: 0 10px 7px; }
.side a.nav { min-height: 36px; padding: 8px 10px; margin: 2px 0; border-radius: var(--wb-radius); font-size: 13px; font-weight: 400; color: #525c6c; }
.side a.nav:hover { background: #edf0f4; color: var(--wb-text); }
.side a.nav.active { background: #e9edf3; color: #28364b; font-weight: 600; }
.nav-icon { color: #7c8798; }
.nav.active .nav-icon { color: #536a8a; }
.side-bottom { gap: 9px; padding-top: 13px; border-color: var(--wb-border); }
.side-bottom b { font-size: 12px; color: #454f5e; }
.side-bottom small { font-size: 10px; color: var(--wb-muted); }
.top { border-bottom-color: var(--wb-border); padding-inline: 26px; }
.top .workspace-control select { font-size: 13px; font-weight: 500; }
.top .header-context { font-size: 13px; color: var(--wb-muted); }
.top .connection-label { font-size: 11px; }
.top .quick-search { border-radius: var(--wb-radius); min-height: 32px; background: #fff; }
.quick-search > span { font-size: 11px; }
.quick-search kbd { font-size: 10px; }
.top-right > .icon-button, .icon-button { width: 32px; height: 32px; min-width: 32px; min-height: 32px; border-radius: var(--wb-radius); }
.icon-button:hover { background: var(--wb-surface-hover); }
.main { padding: 26px 28px 48px; }
.page-header { gap: 20px; margin-bottom: 24px; }
.page-header p { font-size: 13px; line-height: 1.8; color: var(--wb-muted); }
.page-header > .button-row { flex-wrap: wrap; }
.footer { font-size: 11px; border-color: var(--wb-border); }

/* Native controls retain validation, FormData and keyboard behavior. */
button, .btn { min-height: var(--wb-control-height); padding: 7px 12px; border: 1px solid var(--wb-border-strong); border-radius: var(--wb-radius); background: #fff; color: #414b5b; font-size: 13px; line-height: 1.5; font-weight: 500; box-shadow: none; transition: background-color .12s ease, border-color .12s ease; }
button:hover, .btn:hover { color: var(--wb-text); border-color: #b9c2cf; background: var(--wb-surface-hover); }
button.primary, .btn.primary { color: #fff; background: var(--wb-primary); border-color: var(--wb-primary); }
button.primary:hover, .btn.primary:hover { color: #fff; background: #151a20; border-color: #151a20; }
button.danger, .btn.danger { color: var(--wb-danger); border-color: #dfbdb9; background: #fff; }
button.danger:hover, .btn.danger:hover { color: #913b35; background: #fcf5f4; border-color: #ce9d96; }
button.link, .btn.link { min-height: 30px; padding: 4px 3px; border: 0; border-radius: 3px; color: var(--wb-link); background: transparent; font-size: 12px; }
button.link:hover, .btn.link:hover { color: #2f4c76; background: transparent; text-decoration: underline; }
button:disabled { opacity: .55; cursor: not-allowed; }
button[aria-busy=true] { cursor: progress; }
.button-row { gap: 8px; }
input, select, textarea { padding: 8px 11px; border-color: var(--wb-border-strong); border-radius: var(--wb-radius); font-size: 13px; line-height: 1.65; color: var(--wb-text); background: #fff; }
input:not([type=checkbox]):not([type=radio]), select { min-height: var(--wb-control-height); max-width: 100%; }
input::placeholder, textarea::placeholder { color: #818999; opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: #aeb9c9; }
input[type=checkbox], input[type=radio] { width: 15px; height: 15px; accent-color: #526e96; }
input[type=file] { padding: 6px; font-size: 12px; background: var(--wb-surface-soft); }
input[type=file]::file-selector-button { border-radius: 4px; border-color: var(--wb-border-strong); padding: 6px 9px; font-size: 12px; }
textarea { min-height: 118px; line-height: 1.85; }
label, label span.field-label { color: #475366; font-size: 13px; font-weight: 500; }
label { margin-bottom: 17px; }
label span.field-label { margin-bottom: 7px; }
.fields { column-gap: 20px; }
.inline-checks label { font-size: 12px; font-weight: 400; line-height: 1.8; }
fieldset { border-color: var(--wb-border); border-radius: var(--wb-radius); }
legend { color: var(--wb-muted); font-size: 12px; font-weight: 500; }
.field-help, .field-hint, .field-error { font-size: 12px; line-height: 1.7; }
[aria-invalid=true] { border-color: #be7770; background-color: #fffdfc; }
[aria-invalid=true]:focus { border-color: #b76d65; outline-color: #e9c7c3; }
.form-feedback { font-size: 13px; border-radius: var(--wb-radius); padding: 12px 14px; }
.save-indicator { font-size: 12px; line-height: 1.7; }
dialog { width: min(760px,calc(100% - 32px)); padding: 24px; border-color: #ccd3de; border-radius: 10px; box-shadow: 0 8px 30px rgb(29 39 54 / 10%); }
dialog::backdrop { background: rgb(22 29 40 / 28%); }
.dialog-head { gap: 16px; margin-bottom: 22px; padding-bottom: 16px; }
.dialog-head h2 { font-size: 19px; }
.dialog-head button { min-height: 30px; font-size: 12px; }
.toast { font-size: 13px; border-color: var(--wb-border-strong); border-radius: var(--wb-radius); box-shadow: 0 3px 12px rgb(29 39 54 / 7%); }
.notice { border-color: #e0e5ed; border-left-color: #a9b8cc; border-radius: var(--wb-radius); font-size: 13px; line-height: 1.8; background: #f8fafc; color: #55657d; }
.notice.warn { background: #fbf9f5; color: #80683f; }
.notice.error { background: #fcf7f5; color: #984f48; }
.label { font-size: 11px; border-radius: 4px; padding: 3px 7px; }
.count-badge { font-size: 11px; min-width: 19px; height: 19px; border-radius: 4px; }

/* Tables and lists use type, dividers and selection instead of card effects. */
.table-wrap { border-radius: var(--wb-radius); border-color: var(--wb-border); }
table { font-size: 13px; line-height: 1.7; }
th { padding: 11px 14px; font-size: 12px; font-weight: 500; color: #626e80; background: var(--wb-surface-soft); }
td { padding: 12px 14px; color: #465164; border-bottom-color: #edf0f4; vertical-align: top; }
td > b { color: #344054; font-weight: 600; }
tbody tr:hover { background: #fafbfc; }
table button, table .btn { min-height: 30px; font-size: 12px; padding: 5px 9px; }
.entry { gap: 14px; padding: 14px 4px; }
.entry .entry-body a { font-size: 13px; color: #38465c; }
.entry .entry-body small, .entry .index { font-size: 12px; }
.panel, .reader, .submission, .lesson-training { border-color: var(--wb-border); border-radius: var(--wb-radius-panel); box-shadow: none; padding: 22px; }
.section-heading h2, .work-section > h2, .work-section .section-heading h2 { font-size: 15px; }
.section-heading > a, .work-section .section-heading a { font-size: 12px; }
.summary-strip > span { gap: 12px; }
.summary-strip small { font-size: 12px; }
.summary-strip b { color: #344054; font-size: 22px; }
.work-row { padding: 14px 7px; min-height: 70px; }
.work-row-body b { font-size: 14px; color: #344054; font-weight: 500; }
.work-row-body small, .work-row-body time, .resource-list small { font-size: 12px; }
.resource-list b { color: #47566e; font-size: 13px; }
.overview-tabs > button, .view-tabs > a { font-size: 13px; min-height: 38px; }
.overview-tabs > button[aria-selected=true]::after, .view-tabs > a.active::after { background: #637eaa; }
.metric .value { font-size: 25px; font-variant-numeric: tabular-nums; }
.metric small { font-size: 12px; }
.book-entry h2 { font-size: 18px; }
.book-entry p, .book-entry > small { font-size: 13px; }
.empty { border-color: var(--wb-border); border-style: solid; border-radius: var(--wb-radius); color: var(--wb-muted); }
.empty p { font-size: 13px; }
.skeleton { background: #eef1f5; border-radius: 5px; }
.skeleton::after { content: none; animation: none; }

/* Keep existing queue/detail and mobile selection semantics intact. */
.customer-workspace, .assignment-workspace, .notebook-workspace, .seller-workspace { border-color: var(--wb-border); border-radius: var(--wb-radius-panel); }
.assignment-queue-header, .notebook-queue-head, .seller-queue-head { background: #fcfcfd; border-bottom-color: var(--wb-border); }
.assignment-queue-header h2, .seller-queue-head h2 { font-size: 14px; }
.assignment-queue-header input, .assignment-queue-header select, .notebook-queue-head input, .seller-queue-head input, .seller-queue-head select { font-size: 13px; min-height: 36px; }
.assignment-queue-list, .seller-queue-list { min-height: 0; }
.assignment-queue-item, .notebook-entry, .seller-queue-item { padding: 15px 16px; border-bottom-color: var(--wb-border); }
.assignment-queue-item.is-selected, .notebook-entry.is-selected, .seller-queue-item.is-selected { background: var(--wb-selected); border-left-color: #8a9fc0; }
.assignment-queue-item h3, .notebook-entry h2, .seller-queue-item h3 { font-size: 13px; font-weight: 600; line-height: 1.7; }
.assignment-queue-person, .assignment-queue-meta, .notebook-entry-meta, .seller-queue-item > div { font-size: 11px; }
.notebook-entry p, .seller-queue-item p, .seller-queue-item > small { font-size: 12px; line-height: 1.8; }
.assignment-detail-toolbar, .notebook-detail-toolbar, .seller-detail-toolbar { border-bottom-color: var(--wb-border); font-size: 12px; }
.assignment-detail-toolbar button, .assignment-detail-toolbar .btn, .notebook-detail-toolbar button, .seller-detail-toolbar button, .seller-detail-toolbar .btn { font-size: 12px; min-height: 32px; }
.assignment-detail-content, .notebook-editor, .seller-editor { padding: 24px; }
.assignment-record-header h2 { font-size: 21px; }
.notebook-properties label, #notebook-form > p { font-size: 13px; }
.notebook-editor-meta, .notebook-record-header > small { font-size: 12px; }
#notebook-note { font-size: 15px; line-height: 1.9; border-radius: var(--wb-radius); }
.notebook-tabs button, .seller-tabs button { font-size: 12px; }
.customer-name { font-size: 14px; font-weight: 500; }
.property-list dt, .property-list dd { font-size: 13px; }
.knowledge-tree-heading, .knowledge-book-toggle { font-size: 13px; }
.knowledge-chapter-link { font-size: 12px; line-height: 1.7; }
.knowledge-outline h2, .knowledge-outline-link { font-size: 12px; }
.knowledge-breadcrumbs { font-size: 12px; }
.knowledge-reading-header h1 { font-size: 25px; }
.knowledge-article .text-block p, .knowledge-article .text-block li, .knowledge-article .lead { font-size: 15px; line-height: 1.9; }

/* Courses and capability stages share the same operational language. */
.course-academy-summary, .course-academy-title small, .course-academy-evidence, .course-open-label { font-size: 12px; }
.course-academy-title b { font-size: 14px; }
.course-academy-module > header p { font-size: 13px; }
.course-sidebar-section h2 { font-size: 14px; }
.course-sidebar-section p, .course-self-evidence > div, .course-task-link b { font-size: 13px; }
.course-task-link small, .course-task-summary, .course-task-actions, .course-evidence-boundary { font-size: 11px; line-height: 1.8; }
.course-task-actions .link { font-size: 12px; }
.course-content .training-grid h3 { font-size: 13px; color: #526986; }
.course-content .training-grid p, .course-content .training-grid li { font-size: 13px; }
.course-content .lesson-journey span { font-size: 12px; }
.curriculum { background: #fff; border-color: var(--wb-border); border-radius: var(--wb-radius-panel); }
.curriculum-heading { padding: 24px; }
.curriculum-heading h2 { font-size: 22px; letter-spacing: 0; }
.curriculum-heading p, .curriculum-stage-heading p { font-size: 14px; line-height: 1.8; }
.curriculum-eyebrow { font-size: 11px; color: var(--wb-muted); }
.curriculum-profile label { margin-bottom: 0; }
.curriculum-profile .field-label, .curriculum-profile select { font-size: 13px; }
.curriculum-profile button { min-height: 36px; font-size: 13px; }
.curriculum-star-note { color: #697487; font-size: 12px; line-height: 1.85; background: #fff; }
.curriculum-recommendation { background: var(--wb-surface-soft); font-size: 13px; }
.curriculum-recommendation > span, .curriculum-recommendation p { font-size: 12px; }
.curriculum-stages { background: #fafbfc; border-color: var(--wb-border); }
.curriculum-stages button { min-height: 66px; padding: 12px 10px; border-radius: var(--wb-radius); }
.curriculum-stages button[aria-current=step] { background: #fff; border-color: #d9e0ea; color: #2f4565; }
.curriculum-stage-number { width: 28px; height: 28px; font-size: 12px; color: #65758d; background: #fff; border-color: #dde3ec; border-radius: 5px; }
.curriculum-stages b { font-size: 13px; }
.curriculum-stages small { font-size: 11px; line-height: 1.65; }
.curriculum-stage-heading h3 { font-size: 21px; }
.curriculum h4 { font-size: 14px; }
.curriculum-two li, .curriculum-two p { font-size: 13px; color: #606d81; }
.curriculum-lessons b { font-size: 13px; }
.curriculum-lessons small, .curriculum-evidence-boundary, .curriculum-section-heading > span { font-size: 12px; }
.curriculum-lessons a { padding: 14px 6px; }
.curriculum-resource-links, .curriculum-assignment-list a { font-size: 13px; }
#curriculum-practice .field-label { font-size: 13px; }
.seller-summary small, .seller-summary > p { font-size: 11px; }
.seller-problems > summary { font-size: 14px; }
.seller-problems > summary span, .seller-problem-head { font-size: 12px; }
.seller-problem-row b { font-size: 13px; }
.seller-problem-row small, .seller-problem-deliverable { font-size: 12px; line-height: 1.8; }
.seller-editor .fields > label, .seller-action-heading label { font-size: 13px; }
.seller-editor input, .seller-editor select, .seller-editor textarea { font-size: 13px; }
.seller-action-card { padding: 18px; border-radius: var(--wb-radius); }
.seller-action-expectation p, .seller-save-bar span, .seller-history-list article small { font-size: 12px; }
#seller-analysis h3 { font-size: 15px; }
#seller-analysis p, #seller-analysis li { font-size: 13px; line-height: 1.85; }
.seller-suggestion b { font-size: 13px; }
.seller-draft summary, .seller-draft pre, .seller-resource-group a { font-size: 13px; }
.seller-history-list article b { font-size: 13px; }
.seller-summary-text { font-size: 13px; line-height: 1.8; }

@media (max-width: 1100px) {
  .main { padding: 24px 22px 44px; }
  .top { padding-inline: 22px; }
  .page-header { gap: 16px; flex-wrap: wrap; }
  .page-header > .button-row { min-width: 0; max-width: 100%; }
  .curriculum-heading h2 { font-size: 21px; }
  .curriculum-profile { gap: 14px; }
}
@media (max-width: 760px) {
  .main { padding: 20px 16px 36px; }
  .top { padding-inline: 14px; gap: 10px; }
  .top-left { gap: 8px; }
  .top-right { gap: 6px; }
  .top .connection-label { display: none; }
  .top .quick-search { min-width: 32px; width: 32px; padding: 7px; }
  .top .quick-search > span, .top .quick-search kbd { display: none; }
  .top .workspace-control select { max-width: 150px; font-size: 12px; }
  .page-header { margin-bottom: 20px; gap: 13px; }
  h1 { font-size: 22px; }
  .page-header p { font-size: 13px; }
  .panel, .reader, .submission, .lesson-training { padding: 18px; }
  .assignment-detail-content, .notebook-editor, .seller-editor { padding: 18px; }
  .curriculum-heading, .curriculum-detail { padding: 19px; }
  .curriculum-profile { padding-inline: 19px; }
  .curriculum-star-note, .curriculum-recommendation { padding-inline: 19px; }
  .curriculum-stages button { min-width: 180px; width: 180px; min-height: 64px; }
  .curriculum-two { gap: 18px; }
  .knowledge-article .text-block p, .knowledge-article .text-block li { font-size: 14px; }
}
@media (max-width: 560px) {
  .main { padding: 18px 13px 32px; }
  .top { padding-inline: 12px; }
  .top .workspace-control select { max-width: 128px; }
  .page-header > div:first-child { width: 100%; }
  .page-header > .button-row { gap: 7px; }
  .page-header > .button-row .btn, .page-header > .button-row button { padding: 7px 9px; font-size: 12px; }
  h1 { font-size: 21px; }
  .panel, .reader, .submission, .lesson-training { padding: 15px; }
  button, .btn { min-height: 38px; }
  input:not([type=checkbox]):not([type=radio]), select, textarea,
  .seller-editor input, .seller-editor select, .seller-editor textarea,
  .seller-queue-head input, .seller-queue-head select,
  .assignment-queue-header input, .assignment-queue-header select,
  .curriculum-profile select { min-height: 40px; font-size: 16px; }
  .curriculum-profile button { min-height: 40px; }
  .fields, dialog .fields { grid-template-columns: minmax(0,1fr); }
  .fields > .full { grid-column: 1; }
  .table-wrap { border-radius: 5px; }
  .assignment-detail-content, .notebook-editor, .seller-editor { padding: 16px 13px; }
  .seller-detail-toolbar button, .seller-detail-toolbar .btn { font-size: 11px; min-height: 32px; }
  .seller-tabs { gap: 14px; }
  .seller-tabs button { font-size: 12px; }
  .seller-action-card { padding: 14px; }
  .seller-action-heading { gap: 8px; }
  .seller-problem-row small, .seller-problem-deliverable { font-size: 12px; }
  .seller-summary > p { font-size: 11px; }
  .course-academy-title b { font-size: 14px; }
  .course-academy-evidence { font-size: 12px; }
  .course-content .lesson-journey span { font-size: 11px; }
  .course-task-actions, .course-evidence-boundary { font-size: 12px; }
  .curriculum-heading, .curriculum-detail { padding: 16px; }
  .curriculum-profile { padding-inline: 16px; }
  .curriculum-heading h2 { font-size: 20px; }
  .curriculum-stage-heading h3 { font-size: 19px; }
  .curriculum-star-note, .curriculum-recommendation { padding-inline: 16px; }
  .curriculum-stages { padding: 9px; }
  .curriculum-stages small { font-size: 11px; }
  .curriculum-stage-number { width: 26px; height: 26px; }
  .summary-strip > span { padding-inline: 12px; }
  .summary-strip small { font-size: 11px; }
  .summary-strip b { font-size: 20px; }
  dialog { width: calc(100% - 24px); max-height: calc(100dvh - 24px); padding: 17px 15px; border-radius: 8px; }
  .dialog-head { gap: 10px; }
  .dialog-head h2 { font-size: 18px; }
  .toast { font-size: 12px; padding: 10px 13px; }
}
@media (max-width: 360px) {
  .top .workspace-control select { max-width: 110px; }
  .main { padding-inline: 11px; }
  .seller-detail-toolbar > .button-row { flex-wrap: wrap; }
  .curriculum-profile { padding-inline: 14px; }
  .curriculum-heading, .curriculum-detail { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  html, body { scroll-behavior: auto; }
  button, .btn, .side, .mobile-cover { transition: none; }
  .loading::before, .skeleton::after { animation: none; }
}
@media print {
  body { font-size: 11pt; color: #111; background: #fff; }
  .main { max-width: none; padding: 0; }
  .panel, .reader, .submission, .seller-workspace, .curriculum { box-shadow: none; background: #fff; border-radius: 0; }
  .curriculum { border: 0; }
  .curriculum-heading, .curriculum-detail { padding: 0; }
  .curriculum-layout { display: block; }
  .curriculum-stages, .curriculum-profile, .curriculum-conflict, .curriculum-heading > .btn { display: none; }
  .curriculum-two { break-inside: avoid; }
  .curriculum-star-note, .curriculum-recommendation { padding: 10px 0; background: #fff; }
  .table-wrap { overflow: visible; }
  th { background: #fff; }
}