/* Shared presentation layer. Business rules and saved records live elsewhere. */
@font-face {font-family: 'Noto Sans'; src: url('/fonts/noto-sans-regular.woff') format('woff'); font-style: normal; font-weight: 400; font-display: swap}
@font-face {font-family: 'Noto Sans'; src: url('/fonts/noto-sans-bold.woff') format('woff'); font-style: normal; font-weight: 700; font-display: swap}
:root {
  --nav: #15243b;
  --bg: #f2f5f9;
  --surface: #fff;
  --ink: #172b46;
  --muted: #5f7188;
  --line: #dfe6ef;
  --blue: #2866d7;
  --blue-soft: #edf3ff;
  --green: #167559;
  --red: #b63d36;
  --radius: 14px;
  --sidebar-width: 246px;
  --shadow: 0 2px 5px #18345004, 0 8px 24px #18345003;
}
body {font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 1rem; line-height: 1.55; text-rendering: optimizeLegibility}
body:has(dialog[open]) {overflow: hidden}
button, input, select, textarea {font-family: inherit}
button:disabled {cursor: not-allowed}
small {font-size: .8125rem}
::selection {background: #c9ddff; color: #172b46}
:focus-visible {outline: 3px solid #80aaff; outline-offset: 3px}
[hidden] {display: none !important}
.skip-link {position: fixed; top: -70px; left: 16px; z-index: 100; background: white; padding: 12px 18px; border-radius: 8px; color: var(--blue)}
.skip-link:focus {top: 12px}

/* Navigation stays readable on tablets; a drawer replaces it on small screens. */
.sidebar {width: var(--sidebar-width); padding: 24px 14px 14px; color: #c5d1e2; gap: 0}
.brand {padding: 0 12px 24px; gap: 12px; font-size: 1.4rem; letter-spacing: -.4px}
.brand-icon {width: 36px; height: 36px; line-height: 32px; border-radius: 10px; background: #397be9}
.brand-erp {font-size: .75rem; letter-spacing: .06em; color: #c4d6ee; border-color: #516582; padding: 2px 5px}
.workspace {padding: 14px 10px; margin-bottom: 14px; gap: 10px; border-color: #ffffff12}
.workspace strong {font-size: .8125rem; line-height: 1.4; color: #edf3fc}
.workspace small {font-size: .75rem; color: #a2b4ce}
.workspace-avatar {font-size: .75rem; padding: 7px; border-color: #49607c; color: #b4c9e4}
.sidebar nav {flex: 1; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #425778 transparent; padding: 0 1px}
.nav-label {font-size: .75rem; font-weight: 600; letter-spacing: .06em; color: #93a9c6; padding: 10px 12px 9px}
.nav-label.settings-label {margin-top: 14px; border-top: 1px solid #ffffff12; padding-top: 20px}
.nav-item {min-height: 44px; gap: 11px; padding: 10px 12px; margin-bottom: 4px; font-size: .875rem; color: #c6d4e7; border: 1px solid transparent; border-radius: 8px; line-height: 1.5; position: relative}
.nav-item .icon {width: 19px; height: 19px}
.nav-item:hover {background: #223853; color: white}
.nav-item.active {background: #2b63bc; border-color: #447ed6; box-shadow: none; color: white}
.nav-item.active::before {content: ''; position: absolute; left: -1px; width: 3px; height: 21px; background: #b9d6ff; border-radius: 0 3px 3px 0}
.nav-count {font-size: .75rem; min-width: 23px; text-align: center; padding: 1px 6px; background: #ffffff18}
.sidebar-bottom {margin-top: 12px; flex-shrink: 0}
.private-note {margin: 0 0 10px; padding: 10px; background: #ffffff05; border-color: #ffffff12}
.private-note strong {font-size: .75rem; font-weight: 500; color: #d6e2f4}
.private-note small {font-size: .75rem; color: #9eb1ca}
.user-profile {padding: 14px 9px 0; border-color: #ffffff18; gap: 10px}
.user-profile strong {font-size: .875rem; color: white}
.user-profile small {font-size: .75rem; color: #a6bbd6}
.avatar {width: 34px; height: 34px; font-size: .75rem}
.main-shell {margin-left: var(--sidebar-width); min-width: 0}
.topbar {height: 70px; padding: 0 32px; background: #ffffffed; border-color: var(--line)}
.breadcrumbs {font-size: .875rem; color: var(--muted); gap: 12px; min-width: 0}
.breadcrumbs strong {font-weight: 600; color: var(--ink)}
.topbar-right {gap: 14px; flex-shrink: 0}
.sync {font-size: .75rem; color: var(--muted)}
.icon-button {width: 40px; height: 40px; border-radius: 9px; color: #60738c}
.icon-button:hover {background: #e9f0fc; color: var(--blue)}
.notification-button>span:last-child:not(:first-child) {font-size: .75rem; min-width: 20px; width: auto; line-height: 17px; padding: 0 3px; top: 1px; right: 1px; background: #b63d36}
.profile-small {width: 36px; height: 36px}
.sidebar-close, .sidebar-scrim {display: none}
main {max-width: 1840px; padding: 30px 32px 32px; min-width: 0}
.heading {margin-bottom: 24px; align-items: center; gap: 20px}
.eyebrow {font-size: .75rem; letter-spacing: .08em; color: #627a99; margin-bottom: 7px}
.heading h1, .chat-heading h1 {font-size: 2rem; line-height: 1.25; letter-spacing: -.7px; font-weight: 700; color: #172b46}
.heading p {font-size: .875rem; color: var(--muted); margin-top: 9px; max-width: 800px}
.heading .button {margin-top: 0}
.button {min-height: 42px; padding: 10px 15px; border-radius: 9px; font-size: .875rem; font-weight: 600; color: #3a5271; border-color: #cfdbea; transition: background .15s, border-color .15s, box-shadow .15s}
.button:hover {background: #f0f5fe; border-color: #a7c1e6}
.button.primary {background: var(--blue); border-color: var(--blue); box-shadow: 0 3px 7px #2866d720; color: white}
.button.primary:hover {background: #1c54b9; border-color: #1c54b9}
.button.small {min-height: 38px; padding: 8px 12px; font-size: .875rem}
.button .icon {width: 17px; height: 17px}
.button.danger {color: #b03d35; background: #fff2ef; border-color: #edc6bf}
.link-button {font-size: .875rem; line-height: 1.5; min-height: 32px; color: #245bb7}
.link-button:hover {text-decoration: underline; text-underline-offset: 3px}

/* Numbers are the visual anchor; the profit card has a dedicated surface. */
.metrics {grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px}
.metric {min-width: 0; min-height: 186px; padding: 20px; border-radius: var(--radius); box-shadow: var(--shadow); overflow: visible}
.metric.accent {padding-top: 20px; border-top: 1px solid var(--line)}
.metric-top {font-size: .875rem; color: #526783; gap: 12px; align-items: flex-start; min-height: 37px; margin-bottom: 16px; line-height: 1.5}
.metric-top {overflow-wrap: anywhere}
.metric-icon {width: 34px; height: 34px; flex: none; display: inline-flex; justify-content: center; align-items: center; padding: 8px; background: #eef3fc; color: #587ca9; border-radius: 9px}
.metric.accent .metric-icon {background: #e8f5ef; color: #167559}
.metric-value {font-size: clamp(1.35rem, 1.7vw, 2rem); font-weight: 700; letter-spacing: -.7px; line-height: 1.3; white-space: normal; overflow-wrap: anywhere; font-variant-numeric: tabular-nums}
.metric-caption {font-size: .8125rem; color: var(--muted); line-height: 1.6; margin-top: 11px}
.metric-caption b {font-weight: 600; color: #4b607e}
.metric.profit {background: #193656; border-color: #193656; color: white; box-shadow: 0 5px 18px #19365618}
.metric.profit .metric-top {color: #e0eaf8}
.metric.profit .metric-value {color: #fff}
.metric.profit .metric-caption, .metric.profit .metric-caption b {color: #c5d6eb}
.metric.profit .metric-icon {background: #ffffff14; color: #d6e7ff; border: 1px solid #ffffff25}
.metric.profit .metric-chart-button:hover {background: #ffffff28; color: white}
.metric.profit.is-negative {background: #693132; border-color: #693132}
.metric-action {font: inherit; text-align: left}
.metric-action:hover {border-color: #7ea3dc; box-shadow: 0 6px 20px #2866d710}
.metric-link {font-size: .8125rem; font-weight: 600; margin-top: 10px; color: #245bb7}
.attention {font-size: .875rem; line-height: 1.6; color: #805b21; background: #fff8eb; border-color: #efdab0; padding: 13px 16px; margin-bottom: 24px; gap: 12px; border-radius: 10px}
.attention strong {color: #785018}
.attention button {font-size: .875rem; font-weight: 600; color: #805b21; flex-shrink: 0; min-height: 32px}

/* Working tables and filters. */
.workspace-grid {grid-template-columns: minmax(0, 1fr); gap: 28px}
.panel {border-color: var(--line); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0}
.panel-header {padding: 21px 22px 18px; gap: 12px}
.panel-header h2, .chart-overview h2 {font-size: 1.125rem !important; line-height: 1.4; letter-spacing: -.2px; font-weight: 650}
.count {font-size: .8125rem; color: #466285; background: #edf2f8; padding: 2px 7px; border-radius: 6px}
.filter-bar {padding: 0 22px 20px; gap: 10px}
.status-filters {display: flex; flex-wrap: wrap; gap: 8px; padding: 0 22px 16px}
.status-filter {display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: .875rem; line-height: 1.5; color: #526783; background: #fff}
.status-filter:hover {background: #f2f6fc; border-color: #a7bfdf}
.status-filter[aria-pressed=true] {color: #2054a9; background: #edf3ff; border-color: #98b9ef; font-weight: 700}
.status-filter-count {min-width: 21px; padding: 0 5px; border-radius: 5px; background: #edf1f6; color: #526783; font-size: .75rem; font-variant-numeric: tabular-nums; text-align: center}
.status-filter[aria-pressed=true] .status-filter-count {background: #dce9ff; color: #2054a9}
.search-field {flex: 1 1 220px; min-width: 180px}
.search-field .icon {left: 13px; top: 13px; width: 17px; height: 17px; color: #657d9a}
.control {min-height: 44px; font-size: .875rem; color: #243d5c; padding: 10px 12px; border-color: #cbd7e6; border-radius: 8px; min-width: 0; line-height: 1.5; transition: border-color .15s, box-shadow .15s}
.control::placeholder {color: #718199; opacity: 1}
.control:hover {border-color: #aebfd4}
.control:focus {border-color: #4c83df; outline: 3px solid #2866d718; outline-offset: 0; box-shadow: none}
.search-field input {padding-left: 39px}
.filter-bar select {max-width: 190px; color: #425c7b}
.table-wrap {overscroll-behavior-x: contain}
th {background: #f5f7fb; padding: 13px 16px; color: #5d718c; font-size: .875rem; text-transform: none; letter-spacing: 0; font-weight: 600}
td {padding: 19px 16px; font-size: .875rem; color: #304a6b; border-bottom-color: #e9eef5}
td:first-child, th:first-child {padding-left: 22px}
td:last-child, th:last-child {padding-right: 22px}
.order-row:hover {background: #f2f7ff}
.order-row:focus-visible {outline: 2px solid var(--blue); outline-offset: -3px; background: #f2f7ff}
.order-name {font-size: .9375rem; line-height: 1.5; font-weight: 650; color: #172b46; max-width: 310px; overflow-wrap: anywhere}
.order-meta {font-size: .8125rem; line-height: 1.55; color: #6b7d95; margin-top: 6px; overflow-wrap: anywhere}
.order-id {color: #526f96; font-weight: 550}
.order-money {font-size: .9375rem; font-weight: 650; font-variant-numeric: tabular-nums; color: #253d5e}
.subtle {font-size: .8125rem; line-height: 1.55; color: #687c96}
.employee-cell {gap: 9px}
.employee-cell .avatar {width: 30px; height: 30px; font-size: .75rem}
.employee-cell strong {font-size: .875rem; font-weight: 600; color: #324c6d}
.employee-cell small {font-size: .75rem; color: #6f8097}
.status {font-size: .875rem; line-height: 1.4; padding: 5px 9px; font-weight: 550; white-space: normal; max-width: 100%; border-radius: 6px}
.status-progress {background: #e9f1ff; color: #295eb2}
.status-ready, .status-delivered, .status-done {background: #e7f4ed; color: #246c50}
.status-new, .status-pending {background: #edf1f6; color: #586c87}
.status-paused {background: #fff2d9; color: #825e20}
.progress-track {height: 4px; margin-top: 10px; max-width: 112px}
.order-progress {display: flex; align-items: center; gap: 8px; margin-top: 8px}
.order-progress .progress-track {margin-top: 0; flex-shrink: 0}
.progress-percent {font-size: .75rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap}
.table-footer {font-size: .75rem; padding: 15px 22px; color: #6b7d95; gap: 12px; background: #fcfdff}
.deadline-panel {display: block; min-width: 0}
.deadline-heading {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 14px}
.deadline-heading h2 {font-size: 1.125rem; font-weight: 700; line-height: 1.4; letter-spacing: -.2px}
.deadline-heading p {font-size: .8125rem; color: var(--muted); margin-top: 5px}
.deadline-heading .link-button {display: inline-flex; align-items: center; gap: 7px}
.deadline-grid {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px}
.deadline-item {display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 16px; min-width: 0; text-align: left; background: white; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); transition: border-color .15s, background .15s}
.deadline-item:hover {background: #f9fbff; border-color: #8eafe2}
.deadline-line {display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; margin: 0}
.deadline-title {font-size: .9375rem; font-weight: 700; line-height: 1.5; color: #253d5e; overflow-wrap: anywhere}
.deadline-date {font-size: .8125rem; color: #526783; white-space: nowrap}
.deadline-order {display: block; font-size: .8125rem; color: #526783; margin: 0; overflow-wrap: anywhere; white-space: normal; overflow: visible; text-overflow: clip}
.deadline-person {display: flex; align-items: center; font-size: .8125rem; color: #425c7b; gap: 7px; margin: 0; min-width: 0}
.deadline-person>span:last-child {min-width: 0; overflow-wrap: anywhere}
.deadline-person .avatar {width: 24px; height: 24px; font-size: .6875rem}
.deadline-bottom {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 7px; margin-top: auto; padding-top: 2px; font-size: .75rem}
.deadline-state {color: #526783; padding: 3px 7px; border-radius: 5px; background: #f0f3f8}
.is-overdue .deadline-state {color: #a33830; background: #ffede8}
.is-today .deadline-state {color: #2054a9; background: #e8f0ff}
.deadline-open {display: inline-flex; align-items: center; gap: 5px; color: #245bb7}
.deadline-open .icon {width: 14px; height: 14px}
.deadline-empty {display: flex; gap: 9px; align-items: center; grid-column: 1/-1; padding: 20px; border: 1px dashed #cbd7e6; border-radius: 12px; font-size: .875rem; color: var(--muted)}
.danger-text {color: var(--red)}
.finance-note, .team-explainer {font-size: .875rem; line-height: 1.7; color: var(--muted)}
.app-footer {font-size: .75rem; padding: 18px 32px; color: #687c96; gap: 12px}
.demo-note {font-size: .75rem; color: #687c96; line-height: 1.6}

/* The order is a clear, spacious working drawer with a fixed action bar. */
dialog {width: min(960px, 96vw); border-left-color: var(--line); box-shadow: -15px 0 70px #10254528}
dialog::backdrop {background: #10203866; backdrop-filter: blur(3px)}
.drawer-header {padding: 25px 30px 22px; gap: 16px; background: #fff; flex-shrink: 0}
.drawer-header small {font-size: .75rem; letter-spacing: .04em; color: #5e7697; margin-bottom: 6px}
.drawer-header h2 {font-size: 1.5rem; line-height: 1.4; letter-spacing: -.4px; overflow-wrap: anywhere}
.drawer-header>.icon-button {flex: none; background: #f1f5fa}
.drawer-tabs {padding: 0 30px; gap: 26px; overflow-x: auto; flex-shrink: 0; scrollbar-width: thin; background: #fff}
.drawer-tab {font-size: .875rem; font-weight: 500; color: #5a6f8d; padding: 16px 2px 14px; white-space: nowrap; border-bottom-width: 3px}
.drawer-tab:hover {color: var(--blue)}
.drawer-tab.active {font-weight: 650; color: var(--blue); border-color: var(--blue)}
.drawer-body {padding: 26px 30px 32px; background: #fbfcfe; min-height: 0}
.drawer-footer {padding: 17px 30px; gap: 16px; flex-shrink: 0; background: white; box-shadow: 0 -5px 20px #172b4604}
.drawer-footer small {font-size: .75rem; line-height: 1.5; color: #647a97; max-width: 290px}
.drawer-footer .actions {gap: 10px}
.field-grid {gap: 20px}
.field>span, .field>label, .customer-section .field>span, .stage-name-field>span {font-size: .875rem; font-weight: 550; color: #4a6283; margin-bottom: 8px}
.field .control, .entry-card .control, .team-add .control, .member-row .field .control, .role-form .field .control, .stage-fields .field .control {font-size: .9375rem; min-height: 44px; padding: 10px 12px}
.field small {font-size: .8125rem; color: #667b96; line-height: 1.6}
.section-title {font-size: .9375rem; color: #304e72; line-height: 1.5}
.section-heading {gap: 14px; margin-bottom: 15px}
.section-heading h3 {font-size: 1rem; line-height: 1.5; color: #253d5e}
.label-pill {font-size: .75rem; font-weight: 550; color: #4d709d}
.date-pair, .stage-card, .counterparty-card {padding: 20px; border-radius: 12px; background: white}
.drawer-note {font-size: .8125rem; line-height: 1.7; color: #5c7290; background: #f0f5fe; border-color: #d9e5f7; padding: 14px 16px; border-radius: 9px}
.minor-empty {padding: 22px 18px; font-size: .875rem; color: #647992; background: #f6f8fc; border-color: #cfdbea; line-height: 1.6}
.entry-card, .entry-card.expense {padding: 18px; grid-template-columns: minmax(145px, 1fr) minmax(140px, 1fr) minmax(150px, 1.2fr) 36px; gap: 12px; border-radius: 11px; margin-bottom: 14px}
.entry-card label>span {font-size: .8125rem; color: #59708f; margin-bottom: 7px}
.entry-card .icon-button {width: 36px; height: 42px; color: #73859d}
.entry-card .icon-button:hover {color: #b63d36; background: #fff0ed}
.entry-note {grid-column: 1/-1}
.manager-payment-entry {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px}
.finance-document {font-size: .875rem; align-items: flex-start; flex-wrap: wrap}
.finance-document a {font-size: .875rem; line-height: 1.5}
.finance-document small {font-size: .75rem}
.transaction-section {margin-top: 26px}
.finance-summary>div {background: white; padding: 20px; border-radius: 11px; border-color: var(--line)}
.finance-summary small {font-size: .875rem; color: #576d8b}
.finance-summary strong {font-size: 1.5rem; color: var(--ink); font-variant-numeric: tabular-nums}
.finance-summary .net-profit.is-positive {background: #193656; border-color: #193656}
.finance-summary .net-profit.is-positive strong, .finance-summary .net-profit.is-positive small {color: white}
.finance-summary .net-profit.is-positive span {color: #cadcf1}
.order-settlement {background: #fff; border-color: #b8ccec; border-top: 3px solid #397be9; padding: 22px; border-radius: 12px}
.order-settlement h3 {font-size: 1.125rem; margin-bottom: 20px}
.order-total-field .control {min-height: 51px; background: #f8faff; font-size: 1.375rem}
.settlement-value strong {font-size: 1.375rem}
.order-settlement-grid {gap: 20px}
.stage-card.overdue {border-left: 3px solid #c75b45}
.stage-row-title {font-size: .9375rem; font-weight: 600}
.stage-number {font-size: .8125rem; color: #416897; background: #eef4ff; padding: 5px 8px}
.assignee-box>span {font-size: .875rem; color: #516b8f}
.assignee-chip {font-size: .875rem; padding: 7px 10px; color: #526c8d; border-color: #d4deed; border-radius: 7px; background: #fff}
.assignee-chip input {width: 15px; height: 15px}
.stage-picker-option, .stage-name-field>.stage-name-select, .stage-card-top .stage-name-field input {font-size: .9375rem}
.catalog-intro, .customer-hint, .reward-hint, .finance-import-hint, .finance-confirm {font-size: .875rem; color: #5a7190}
.catalog-default, .stage-custom-name>span {font-size: .8125rem}
.equipment-caption {font-size: .8125rem; color: #5e7594}
.reward-summary>div {padding: 18px; border-radius: 10px; background: white}
.reward-summary span {font-size: .875rem; color: #536d90}
.reward-summary strong {font-size: 1.5rem}
.reward-summary .reward-balance {background: #edf3ff}
.import-source, .import-filename {font-size: .875rem}
.import-summary {font-size: 1rem}

/* Supporting screens use the same hierarchy and controls. */
.team-grid {grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px}
.team-card {padding: 24px; box-shadow: var(--shadow); border-color: var(--line)}
.team-card-top {display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px}
.team-card-top .avatar {margin: 0}
.employee-delete-button {color: #a33830; font-size: .875rem; font-weight: 400; box-shadow: none}
.employee-delete-button:hover {color: #922c26; border-color: #e6bdb6; background: #fff3ef}
.employee-delete-dialog {inset: 0; margin: auto; width: 510px; height: fit-content; max-width: calc(100vw - 28px); max-height: 90dvh; overflow-y: auto}
.employee-delete-dialog .confirm-body {padding: 24px}
.employee-delete-dialog .confirm-body p {font-size: .875rem; line-height: 1.65; color: #526783; overflow-wrap: anywhere}
.employee-delete-dialog .confirm-body p strong {color: var(--ink)}
.employee-removal-note {padding: 12px 14px; background: #f4f7fc; border-radius: 8px}
.employee-removal-blockers {padding: 0; margin-top: 16px}
.employee-removal-blockers ul {margin: 12px 0 0; padding: 0; list-style: none}
.employee-removal-blockers li {padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .875rem}
.employee-removal-blockers li>span {display: block}
.employee-removal-blockers .link-button {margin-top: 4px}
.employee-delete-dialog .confirm-actions {flex-wrap: wrap}
.employee-delete-dialog .confirm-actions .button {white-space: normal}
.employee-delete-dialog .error-banner {margin: 14px 0 0; font-size: .875rem}
.team-card .avatar {width: 44px; height: 44px; font-size: .875rem}
.team-card h3 {font-size: 1.0625rem; color: var(--ink)}
.team-card p {font-size: .875rem; color: var(--muted)}
.team-card small {font-size: .8125rem; line-height: 1.7; color: #5e7594}
.team-add h3 {font-size: 1.0625rem}
.access-heading h2, .role-matrix h2, .role-form h3 {font-size: 1.125rem}
.access-role p, .access-account strong, .access-permissions span, .role-matrix>div, .role-help {font-size: .875rem}
.access-account span, .access-badge, .member-account small {font-size: .8125rem}
.member-account strong, .member-active, .member-row .field>span {font-size: .875rem}
.member-row {grid-template-columns: minmax(160px, 1.2fr) minmax(170px, 1fr) minmax(160px, 1fr) auto; gap: 16px}
.member-row:where([data-manager="false"]) {grid-template-columns: minmax(160px, 1.2fr) minmax(170px, 1fr) auto auto}
.role-capacity {display: block; margin-top: 4px; color: var(--muted); font-size: .8125rem; font-weight: 400}
.role-limits {color: #3d5878}
.member-row>button {justify-self: start}
.role-form {grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px}
.role-form>.button {justify-self: start}
.role-error, .role-help, .notice p, .notification-intro {font-size: .875rem; line-height: 1.7}
.notice h3 {font-size: 1rem; font-weight: 600}
.notice-actions {flex-wrap: wrap; gap: 10px 20px}
.approval-row h3 {font-size: 1.0625rem}
.approval-row p, .change-status {font-size: .875rem}
.change-field h3 {font-size: 1rem}
.notification-admin .field input {font-size: .9375rem; min-height: 44px; border-radius: 8px}
.channel-state, .settings-check small {font-size: .8125rem}
.notification-health, .error-banner, .settings-error {font-size: .875rem; line-height: 1.7}
.analytics-total {box-shadow: var(--shadow)}
.analytics-total.profit.positive {background: #193656; border-color: #193656}
.analytics-total.profit.positive h3, .analytics-total.profit.positive p {color: #d1e1f5}
.analytics-total.profit.positive>strong {color: white}
.analytics-chart {min-width: 680px}
.chart-row {font-size: .875rem; grid-template-columns: 210px 1fr 175px; gap: 20px; margin-top: 20px}
.chart-track {height: 10px}
.chart-track span {background: #397be9}
.chart-row.expense .chart-track span {background: #8c9fb9}
.chat-layout {height: min(760px, calc(100dvh - 260px)); border-color: var(--line)}
.chat-layout>aside {background: #f7f9fd}
.chat-room.selected {border-color: #c2d5f3; background: #e9f1fd}
.chat-room-label strong {font-size: .9375rem; color: #243d5c}
.chat-thread-header {background: #fff}
.chat-messages {background: #fbfcfe}
.chat-message {background: #fff; border-color: #dfe7f1; box-shadow: 0 2px 4px #1a355405}
.chat-message.mine {background: #eaf2ff; border-color: #cbddf7}
.chat-compose {background: white}
.chat-top-badge {min-width: 20px; height: 20px; font-size: .75rem; line-height: 20px}
.empty-state, .loading-panel {font-size: 1rem; color: #5f7694; padding: 54px 24px}
.empty-state h3 {font-size: 1.125rem; color: #314e73}
.empty-state p {font-size: .875rem; line-height: 1.7}
#toast {left: calc(50% + 123px); font-size: .875rem; line-height: 1.6; padding: 14px 20px; border-radius: 10px}

@media(max-width: 1550px) {
  .workspace-grid {grid-template-columns: minmax(0, 1fr)}
  .metric {padding: 18px}
  .metric.accent {padding-top: 18px}
  .metric-top {font-size: .875rem}
  .metrics {gap: 13px}
}
@media(max-width: 1200px) {
  :root {--sidebar-width: 224px}
  .sidebar {width: var(--sidebar-width); padding: 22px 12px 14px}
  .main-shell {margin-left: var(--sidebar-width)}
  main {padding: 26px 24px}
  .topbar {padding: 0 24px}
  .metrics {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px}
  .metric {min-height: 172px; padding: 20px}
  .metric.accent {padding-top: 20px}
  .metric-top {font-size: .875rem; margin-bottom: 12px}
  .metric-value {font-size: 1.75rem}
  .metric-caption {font-size: .8125rem}
  .team-grid {grid-template-columns: repeat(2, minmax(0, 1fr))}
  .member-row {grid-template-columns: repeat(2, minmax(0, 1fr))}
  .member-account {grid-column: 1/-1}
  .member-active {white-space: normal}
  .deadline-grid {grid-template-columns: repeat(2, minmax(0, 1fr))}
  #toast {left: calc(50% + 112px)}
}
@media(max-width: 900px) {
  .sidebar {display: flex; transform: translateX(-105%); width: min(300px, 88vw); z-index: 45; box-shadow: 12px 0 44px #15243b30; transition: transform .2s; visibility: hidden}
  .sidebar.open {transform: translateX(0); visibility: visible}
  .sidebar .brand>span+span, .sidebar .nav-label, .sidebar .sidebar-bottom {display: block}
  .sidebar .workspace {display: flex}
  .sidebar .nav-item {font-size: .875rem; justify-content: flex-start; gap: 11px}
  .sidebar .nav-item>span:not(:first-child) {display: inline-block}
  .sidebar .nav-item .icon {width: 19px; height: 19px}
  .sidebar-close {position: absolute; right: 10px; top: 12px; display: inline-flex; width: 32px; height: 32px; color: #c6d4e7}
  .sidebar .brand {padding-right: 28px}
  .sidebar-scrim {display: block; position: fixed; inset: 0; z-index: 40; background: #10203880; backdrop-filter: blur(2px); width: 100%; height: 100%}
  body.nav-open {overflow: hidden}
  .main-shell {margin-left: 0}
  .mobile-toggle {display: inline-flex}
  .topbar {height: 64px; padding: 0 20px}
  .breadcrumbs {font-size: .875rem; gap: 9px}
  .topbar-right {gap: 8px}
  .sync {display: none}
  main {padding: 24px 20px}
  .heading h1, .chat-heading h1 {font-size: 1.75rem}
  .brand>span+span {display: block}
  .filter-bar select {max-width: none; flex: 1 1 130px}
  .search-field {flex-basis: 100%}
  .orders-table {min-width: 710px}
  .chat-layout {grid-template-columns: minmax(220px, 260px) minmax(0, 1fr)}
  .chart-row {grid-template-columns: 180px 1fr 150px}
  #toast {left: 50%}
}
@media(max-width: 640px) {
  .topbar {height: 60px; padding: 0 12px}
  .breadcrumbs>span:not(.crumb-divider), .crumb-divider {display: none}
  .breadcrumbs strong {font-size: .9375rem}
  .topbar-right {gap: 4px}
  .profile-small {display: inline-flex; width: 32px; height: 32px}
  main {padding: 22px 14px 24px}
  .heading, .chat-heading {flex-wrap: wrap; align-items: flex-start; gap: 16px; margin-bottom: 20px}
  .heading h1, .chat-heading h1 {font-size: 1.625rem}
  .heading p {font-size: .875rem; max-width: none; margin-top: 8px}
  .eyebrow {font-size: .75rem}
  .heading .button {font-size: .875rem; padding: 10px 14px; min-height: 42px; margin: 0}
  .metrics {gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr))}
  .metric {min-height: 172px; padding: 15px}
  .metric.accent {padding-top: 15px}
  .metric-top {font-size: .875rem; gap: 7px; min-height: 43px; margin-bottom: 13px}
  .metric-icon {width: 29px; height: 29px; padding: 6px}
  .metric-value {font-size: 1.375rem; letter-spacing: -.4px}
  .metric-caption, .metric-link {font-size: .75rem; line-height: 1.65}
  .metric-caption {margin-top: 10px}
  .metric-action .metric-top {align-items: flex-start}
  .attention {font-size: .875rem; padding: 13px; align-items: flex-start; flex-wrap: wrap; gap: 8px}
  .attention>span {flex: 1; min-width: 200px}
  .attention button {font-size: .875rem; margin-left: 25px}
  .panel-header {padding: 18px}
  .panel-header h2 {font-size: 1.0625rem !important}
  .filter-bar {padding: 0 18px 18px; gap: 9px}
  .status-filters {padding: 0 18px 16px; gap: 7px}
  .status-filter {padding: 8px 10px; min-height: 44px}
  .filter-bar select {flex-basis: 40%; font-size: .875rem}
  .orders-table {min-width: 0; table-layout: auto}
  .orders-table thead {display: none}
  .orders-table tr {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 18px; gap: 16px; background: white}
  .orders-table tr:hover {background: #f5f9ff}
  .orders-table td {min-width: 0; font-size: .875rem}
  .orders-table .money-cell {display: block}
  .order-name {font-size: 1rem; max-width: none}
  .order-meta {font-size: .8125rem}
  .order-money {font-size: .9375rem; white-space: normal; overflow-wrap: anywhere}
  .employee-cell .avatar {width: 28px; height: 28px}
  .employee-cell strong {font-size: .875rem}
  .employee-cell small {font-size: .75rem}
  .orders-table .progress-cell {grid-column: 2; grid-row: 3}
  .table-footer {font-size: .75rem; padding: 15px 18px}
  .deadline-grid {grid-template-columns: 1fr; gap: 10px}
  .deadline-item {padding: 16px}
  dialog, #catalog-dialog, #requisites-dialog, #rewards-dialog {width: 100vw; max-width: 100vw}
  .drawer-header {padding: 21px 18px 18px}
  .drawer-header h2 {font-size: 1.375rem}
  .drawer-tabs {padding: 0 18px; gap: 23px}
  .drawer-tab {font-size: .875rem; padding-top: 15px; padding-bottom: 13px}
  .drawer-body {padding: 22px 18px 26px}
  .drawer-footer {padding: 14px 18px}
  .drawer-footer small {display: none}
  .drawer-footer .actions {width: 100%; justify-content: flex-end; flex-wrap: wrap}
  .drawer-footer .button {white-space: normal}
  .field-grid, .stage-fields {grid-template-columns: 1fr; gap: 18px}
  .field.full-mobile {grid-column: auto}
  .field .control, .control, .entry-card .control {font-size: 1rem}
  .date-pair, .stage-card, .counterparty-card {padding: 16px}
  .section-heading {flex-wrap: wrap; align-items: flex-start}
  .entry-card, .entry-card.expense {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 32px; padding: 14px; gap: 12px 10px}
  .entry-card .entry-category {grid-column: 1/-1}
  .entry-card .entry-delete {grid-column: 3; grid-row: 1; width: 32px}
  .entry-card .entry-note {grid-column: 1/-1}
  .entry-card:not(.expense):not(.manager-payment-entry)>div:empty {display: none}
  .entry-card label>span {font-size: .8125rem}
  .finance-document {gap: 7px}
  .finance-summary {gap: 12px}
  .finance-summary>div {padding: 17px}
  .finance-summary small {font-size: .875rem}
  .finance-summary strong {font-size: 1.25rem; overflow-wrap: anywhere}
  .finance-summary .net-profit strong {font-size: 1.625rem}
  .order-settlement {padding: 18px}
  .order-settlement-grid {grid-template-columns: 1fr}
  .order-total-field .control {font-size: 1.375rem}
  .settlement-value {padding: 12px; min-width: 0}
  .settlement-value strong {font-size: 1.25rem}
  .customer-settlement-summary {gap: 10px}
  .stage-picker-option, .production-actions .button, .assignee-chip {font-size: .875rem}
  .catalog-default {font-size: .8125rem}
  .catalog-row .field>span {font-size: .875rem}
  .team-grid, .role-form, .member-row {grid-template-columns: 1fr}
  .team-card {padding: 22px}
  .role-matrix>div {grid-template-columns: 1fr; gap: 5px; padding: 16px 0}
  .member-account, .member-row .field {grid-column: 1}
  .chart-row {grid-template-columns: minmax(0, 1fr) auto; gap: 10px; font-size: .875rem}
  .chart-row .chart-track {grid-column: 1/-1; grid-row: 2}
  .chart-row strong {grid-column: 2; grid-row: 1}
  .chart-overview {padding: 20px}
  .chat-layout {display: flex; flex-direction: column; height: auto; min-height: 0}
  .chat-layout>aside {max-height: 330px; border-right: 0; border-bottom: 1px solid var(--line); flex: none}
  .chat-layout .chat-thread {height: 620px; max-height: 85dvh; min-height: 440px}
  .chat-compose-actions {flex-wrap: wrap}
  .app-footer {font-size: .75rem; padding: 16px 18px}
  #toast {font-size: .875rem; max-width: calc(100vw - 28px); bottom: 16px}
  .confirm-dialog {width: 430px; max-width: 94vw}
}
@media(max-width: 380px) {
  .metrics, .finance-summary, .customer-settlement-summary {grid-template-columns: 1fr}
  .metric {min-height: 0; padding: 20px}
  .metric-top {min-height: 32px; margin-bottom: 10px}
  .metric-value {font-size: 1.625rem}
  .entry-card, .entry-card.expense {grid-template-columns: minmax(0, 1fr) 32px}
  .entry-card>label {grid-column: 1}
  .entry-card .entry-category {grid-column: 1/-1}
  .entry-card .entry-delete {grid-column: 2}
  .finance-summary .net-profit {grid-column: auto}
}
@media(prefers-reduced-motion: reduce) {
  *, *::before, *::after {scroll-behavior: auto !important; transition: none !important}
}