:root {
  --navy-950: #24324a;
  --navy-900: #344054;
  --navy-800: #475467;
  --ink-950: #24324a;
  --ink-800: #344054;
  --ink-650: #667085;
  --ink-500: #667085;
  --ink-350: #98a2b3;
  --line-strong: #d3dae6;
  --line: #e3e8f0;
  --line-soft: #edf0f5;
  --surface: #ffffff;
  --content-secondary: #f1f4fa;
  --canvas: #f7f8fc;
  --canvas-deep: #f1f4fa;
  --primary: #5b5bd6;
  --primary-dark: #4848bc;
  --primary-soft: #eeeeff;
  --teal: #168a8a;
  --teal-soft: #e8f7f5;
  --blue: #3f7fb5;
  --blue-soft: #eaf2fa;
  --green: #2e946b;
  --green-soft: #e8f6ef;
  --amber: #d78a24;
  --amber-soft: #fff4df;
  --red: #d25555;
  --red-soft: #fdecec;
  --purple: #8867c9;
  --purple-soft: #f2edfa;
  --gray: #7b8495;
  --gray-soft: #eef0f4;
  --sidebar-w: 228px;
  --topbar-h: 64px;
  --radius-control: 8px;
  --radius-panel: 10px;
  --shadow-float: 0 24px 70px rgba(36, 50, 74, .16);
  --shadow-small: 0 4px 14px rgba(36, 50, 74, .06);
  font-family: Inter, "Segoe UI", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  color: var(--ink-950);
  background: var(--canvas);
  font-synthesis: none;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: var(--canvas); }
body { font-size: 14px; line-height: 1.45; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
::selection { background: var(--primary-soft); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.app-shell { min-height: 100vh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 30; width: var(--sidebar-w);
  display: flex; flex-direction: column; color: #eaf1f7;
  background: linear-gradient(180deg, var(--navy-950) 0%, #10273f 100%);
  border-right: 1px solid #1b3651;
}
.brand { height: 72px; display: flex; align-items: center; gap: 10px; padding: 0 18px; }
.brand-mark {
  display: inline-grid; place-items: center; width: 30px; height: 34px; color: white;
  background: linear-gradient(145deg, #28a2b4, #176b87); font-weight: 800; font-size: 18px;
  border-radius: 6px 6px 12px 6px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
.brand-name { font-weight: 750; letter-spacing: .01em; font-size: 17px; }
.next-tag { margin-left: auto; color: #90c7d4; font-size: 9px; letter-spacing: .14em; font-weight: 800; }
.quick-create {
  margin: 3px 14px 16px; height: 40px; display: flex; align-items: center; gap: 9px; padding: 0 11px;
  border: 1px solid rgba(118, 181, 199, .34); border-radius: 7px; color: white; background: rgba(34, 132, 159, .18);
  cursor: pointer; font-weight: 650; text-align: left;
}
.quick-create:hover { background: rgba(41, 151, 180, .3); border-color: rgba(133, 204, 222, .54); }
.quick-create > span { font-size: 19px; color: #8ed4e3; }
.quick-create kbd { margin-left: auto; }
kbd { font-size: 10px; line-height: 1; padding: 3px 5px; border: 1px solid currentColor; border-radius: 4px; opacity: .62; box-shadow: none; }
.primary-nav { padding: 0 8px; overflow-y: auto; }
.nav-group-label { margin: 13px 11px 6px; color: #70859a; font-size: 10px; font-weight: 750; letter-spacing: .13em; }
.nav-item {
  position: relative; width: 100%; min-height: 39px; display: flex; align-items: center; gap: 11px;
  padding: 0 11px; border: 0; border-radius: 6px; color: #aebcca; background: transparent; cursor: pointer; text-align: left;
}
.nav-item:hover { color: #f3f8fb; background: rgba(255,255,255,.055); }
.nav-item.active { color: white; background: rgba(32, 138, 164, .27); }
.nav-item.active::before { content: ""; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 3px; background: #4cb6c9; border-radius: 0 4px 4px 0; }
.nav-icon { width: 19px; color: #8ba6b9; font-size: 16px; text-align: center; }
.nav-item.active .nav-icon { color: #79cad9; }
.nav-count { margin-left: auto; min-width: 21px; height: 19px; display: grid; place-items: center; padding: 0 5px; color: #dceaf0; background: rgba(255,255,255,.1); border-radius: 9px; font-size: 11px; }
.sidebar-bottom { margin-top: auto; padding: 10px 8px 13px; border-top: 1px solid rgba(255,255,255,.07); }
.nav-item.subtle { min-height: 35px; }
.environment-safety { display: flex; gap: 9px; align-items: center; margin: 12px 10px 1px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,.07); color: #a6b8c5; }
.environment-safety strong, .environment-safety small { display: block; }
.environment-safety strong { font-size: 11px; font-weight: 650; }
.environment-safety small { margin-top: 1px; color: #71899b; font-size: 10px; }
.safety-dot { width: 8px; height: 8px; border-radius: 50%; background: #3bbd88; box-shadow: 0 0 0 4px rgba(59,189,136,.13); }

.workspace { min-height: 100vh; margin-left: var(--sidebar-w); }
.topbar {
  position: sticky; top: 0; z-index: 25; height: var(--topbar-h); display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px);
}
.search-trigger {
  width: min(460px, 40vw); height: 36px; display: flex; align-items: center; gap: 9px; padding: 0 10px;
  color: var(--ink-500); background: #f7f8fa; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; text-align: left;
}
.search-trigger:hover { border-color: #b7c5d3; background: white; }
.search-trigger .search-icon { color: var(--ink-800); font-size: 20px; transform: rotate(-15deg); }
.search-trigger kbd { margin-left: auto; }
.topbar-actions { display: flex; align-items: center; gap: 7px; }
.icon-btn { width: 34px; height: 34px; border: 0; border-radius: 6px; background: transparent; color: var(--ink-650); cursor: pointer; font-size: 18px; }
.icon-btn:hover { background: var(--gray-soft); color: var(--ink-950); }
.has-indicator::after { content: ""; position: absolute; width: 6px; height: 6px; margin: 2px 0 0 -6px; background: var(--red); border: 2px solid white; border-radius: 50%; }
.user-chip { display: flex; align-items: center; gap: 8px; margin-left: 7px; padding: 4px 5px 4px 4px; border: 0; border-radius: 7px; background: transparent; cursor: pointer; text-align: left; }
.user-chip:hover { background: var(--gray-soft); }
.avatar { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 7px; color: #115871; background: #d9edf2; font-weight: 750; }
.user-chip strong, .user-chip small { display: block; }
.user-chip strong { font-size: 12px; }
.user-chip small { color: var(--ink-500); font-size: 10px; }

.main { padding: 22px 24px 36px; min-width: 0; }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.page-title-row { display: flex; align-items: center; gap: 10px; }
.page-title { margin: 0; font-size: 23px; line-height: 1.25; letter-spacing: -.025em; }
.page-subtitle { margin: 5px 0 0; color: var(--ink-500); font-size: 13px; }
.page-actions, .toolbar-actions { display: flex; align-items: center; gap: 8px; }
.eyebrow { color: var(--primary); font-size: 11px; font-weight: 800; letter-spacing: .12em; }

.btn { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 6px; background: white; cursor: pointer; font-weight: 620; font-size: 13px; }
.btn:hover { border-color: #9faebf; background: #f8fafb; }
.btn-primary { color: white; border-color: var(--primary); background: var(--primary); }
.btn-primary:hover { border-color: var(--primary-dark); background: var(--primary-dark); }
.btn-danger { color: var(--red); border-color: #e7b6b4; background: var(--red-soft); }
.btn-quiet { border-color: transparent; background: transparent; color: var(--ink-650); }
.btn-quiet:hover { border-color: transparent; background: var(--gray-soft); color: var(--ink-950); }
.btn-small { min-height: 28px; padding: 0 9px; font-size: 12px; }
.btn-large { min-height: 44px; padding: 0 16px; }
.btn-icon { width: 34px; padding: 0; }
.segmented { display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 7px; background: #f5f7f9; }
.segmented button { min-height: 28px; padding: 0 10px; border: 0; border-radius: 4px; background: transparent; color: var(--ink-500); cursor: pointer; font-size: 12px; }
.segmented button.active { color: var(--ink-950); background: white; box-shadow: 0 1px 4px rgba(24,42,64,.12); font-weight: 700; }

.metric-strip { display: grid; grid-template-columns: repeat(6, minmax(130px, 1fr)); background: var(--surface); border: 1px solid var(--line); margin-bottom: 16px; }
.metric { position: relative; min-height: 92px; padding: 16px 17px; border-right: 1px solid var(--line-soft); cursor: pointer; }
.metric:last-child { border-right: 0; }
.metric:hover { background: #fafcfd; }
.metric::after { content: ""; position: absolute; inset: auto 16px 0; height: 2px; background: var(--metric-color, var(--primary)); opacity: 0; }
.metric:hover::after { opacity: 1; }
.metric-label { display: flex; align-items: center; justify-content: space-between; color: var(--ink-500); font-size: 12px; }
.metric-label span:last-child { width: 7px; height: 7px; background: var(--metric-color, var(--primary)); border-radius: 50%; }
.metric-value { margin-top: 8px; font-size: 25px; font-weight: 760; letter-spacing: -.03em; }
.metric-note { margin-top: 2px; color: var(--ink-500); font-size: 11px; }
.tone-danger { --metric-color: var(--red); }
.tone-warning { --metric-color: var(--amber); }
.tone-info { --metric-color: var(--blue); }
.tone-success { --metric-color: var(--green); }
.tone-purple { --metric-color: var(--purple); }

.dashboard-grid { display: grid; grid-template-columns: minmax(580px, 1.45fr) minmax(360px, .8fr); gap: 16px; align-items: start; }
.dashboard-side { display: grid; gap: 16px; }
.panel { background: var(--surface); border: 1px solid var(--line); }
.panel-head { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 15px; border-bottom: 1px solid var(--line-soft); }
.panel-title { margin: 0; font-size: 14px; font-weight: 750; }
.panel-subtitle { color: var(--ink-500); font-size: 11px; }
.panel-tabs { display: flex; gap: 4px; height: 50px; align-items: end; }
.panel-tabs button { height: 50px; padding: 0 11px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--ink-500); cursor: pointer; font-size: 12px; }
.panel-tabs button.active { color: var(--primary-dark); border-bottom-color: var(--primary); font-weight: 700; }
.panel-body { padding: 14px; }
.panel-body.flush { padding: 0; }
.panel-foot { min-height: 39px; display: flex; align-items: center; justify-content: center; padding: 0 12px; border-top: 1px solid var(--line-soft); color: var(--primary); font-size: 12px; cursor: pointer; }
.panel-foot:hover { background: #f7fafb; }

.queue-list { min-height: 425px; }
.queue-row { display: grid; grid-template-columns: 31px minmax(0, 1fr) 150px 82px 74px; gap: 10px; align-items: center; min-height: 62px; padding: 8px 14px; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.queue-row:last-child { border-bottom: 0; }
.queue-row:hover { background: #f8fafb; }
.queue-indicator { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; color: var(--blue); background: var(--blue-soft); font-weight: 800; font-size: 11px; }
.queue-row[data-level="danger"] .queue-indicator { color: var(--red); background: var(--red-soft); }
.queue-row[data-level="warning"] .queue-indicator { color: var(--amber); background: var(--amber-soft); }
.queue-row[data-level="success"] .queue-indicator { color: var(--green); background: var(--green-soft); }
.queue-main { min-width: 0; }
.queue-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 680; }
.queue-subtitle { overflow: hidden; margin-top: 3px; color: var(--ink-500); text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.queue-reason { color: var(--ink-650); font-size: 12px; }
.queue-due { color: var(--ink-500); font-size: 11px; }
.queue-due.overdue { color: var(--red); font-weight: 700; }
.queue-action { opacity: 0; }
.queue-row:hover .queue-action { opacity: 1; }
.empty-state { min-height: 220px; display: grid; place-items: center; padding: 28px; text-align: center; color: var(--ink-500); }
.empty-state strong { display: block; margin-bottom: 4px; color: var(--ink-800); }

.focus-list { padding: 2px 0; }
.focus-row { display: grid; grid-template-columns: 4px minmax(0,1fr) auto; gap: 11px; align-items: center; min-height: 58px; padding: 7px 14px; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.focus-row:last-child { border-bottom: 0; }
.focus-row:hover { background: #f8fafb; }
.focus-bar { height: 32px; background: var(--blue); border-radius: 2px; }
.focus-row.danger .focus-bar { background: var(--red); }
.focus-row.warning .focus-bar { background: var(--amber); }
.focus-row.success .focus-bar { background: var(--green); }
.focus-title { font-weight: 650; font-size: 12px; }
.focus-note { margin-top: 2px; color: var(--ink-500); font-size: 11px; }
.focus-value { text-align: right; font-weight: 750; font-size: 12px; }
.focus-value small { display: block; color: var(--ink-500); font-weight: 500; }
.activity-mini { display: flex; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); }
.activity-mini:last-child { border: 0; }
.activity-dot { margin-top: 5px; width: 7px; height: 7px; flex: 0 0 auto; background: var(--primary); border-radius: 50%; }
.activity-mini p { margin: 0; font-size: 12px; }
.activity-mini small { display: block; margin-top: 3px; color: var(--ink-500); }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 51px; margin-bottom: 12px; padding: 7px 9px; background: white; border: 1px solid var(--line); }
.filters { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.field-control { height: 34px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 5px; color: var(--ink-800); background: white; }
.field-control:hover { border-color: #9facbc; }
.filter-search { position: relative; }
.filter-search input { width: 235px; padding-left: 31px; }
.filter-search::before { content: "⌕"; position: absolute; left: 10px; top: 5px; color: var(--ink-500); font-size: 18px; transform: rotate(-12deg); }
.active-filter { height: 28px; display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; border-radius: 4px; color: var(--primary-dark); background: var(--primary-soft); font-size: 11px; }
.view-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.view-tab { min-height: 38px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; color: var(--ink-500); background: transparent; cursor: pointer; font-size: 12px; }
.view-tab.active { color: var(--primary-dark); border-bottom-color: var(--primary); font-weight: 700; }
.view-tab span { margin-left: 5px; color: var(--ink-350); }

.table-wrap { overflow: auto; max-height: calc(100vh - 225px); background: white; border: 1px solid var(--line); }
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; white-space: nowrap; font-size: 12px; }
.data-table th { position: sticky; top: 0; z-index: 4; height: 39px; padding: 0 11px; color: var(--ink-500); background: #f5f7f9; border-bottom: 1px solid var(--line-strong); font-weight: 650; text-align: left; }
.data-table td { height: 49px; padding: 0 11px; border-bottom: 1px solid var(--line-soft); color: var(--ink-800); }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover td { background: #f8fafc; }
.data-table th:first-child, .data-table td:first-child { position: sticky; left: 0; z-index: 3; background: white; }
.data-table th:first-child { z-index: 6; background: #f5f7f9; }
.data-table .checkbox-cell { width: 42px; text-align: center; }
.data-table .primary-cell { min-width: 220px; font-weight: 680; color: var(--ink-950); cursor: pointer; }
.data-table .link { color: var(--primary-dark); cursor: pointer; }
.data-table .link:hover { text-decoration: underline; }
.table-foot { min-height: 42px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; color: var(--ink-500); background: white; border: 1px solid var(--line); border-top: 0; font-size: 11px; }
.muted { color: var(--ink-500); }
.money { font-variant-numeric: tabular-nums; font-weight: 670; }
.risk-text { color: var(--red); font-weight: 650; }
.date-overdue { color: var(--red); font-weight: 700; }

.badge { display: inline-flex; align-items: center; min-height: 22px; gap: 5px; padding: 0 7px; border-radius: 4px; color: var(--ink-650); background: var(--gray-soft); font-size: 10px; font-weight: 700; letter-spacing: .01em; }
.badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.badge-danger { color: var(--red); background: var(--red-soft); }
.badge-warning { color: var(--amber); background: var(--amber-soft); }
.badge-info { color: var(--blue); background: var(--blue-soft); }
.badge-success { color: var(--green); background: var(--green-soft); }
.badge-purple { color: var(--purple); background: var(--purple-soft); }
.badge-neutral { color: #697385; background: #edf0f4; }
.badge-solid-danger { color: white; background: var(--red); }
.badge-solid-warning { color: #fff; background: var(--amber); }
.badge-solid-success { color: #fff; background: var(--green); }

.pipeline-summary { display: grid; grid-template-columns: repeat(9, minmax(100px,1fr)); margin-bottom: 12px; background: white; border: 1px solid var(--line); }
.stage-summary { position: relative; min-height: 63px; padding: 10px; border-right: 1px solid var(--line-soft); cursor: pointer; }
.stage-summary:last-child { border-right: 0; }
.stage-summary.active { background: #f1f8fa; }
.stage-summary.active::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: var(--primary); }
.stage-summary span { display: block; overflow: hidden; color: var(--ink-500); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.stage-summary strong { display: block; margin-top: 5px; font-size: 13px; }
.kanban-scroll { overflow: auto; padding-bottom: 8px; }
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: 285px; gap: 10px; min-width: max-content; }
.kanban-column { min-height: calc(100vh - 275px); background: #e9edf2; border: 1px solid #d6dde6; }
.kanban-head { position: sticky; top: 0; z-index: 4; min-height: 45px; display: flex; align-items: center; justify-content: space-between; padding: 0 11px; background: #e2e7ed; border-bottom: 1px solid #d0d8e1; }
.kanban-head strong { font-size: 12px; }
.kanban-head span { color: var(--ink-500); font-size: 10px; }
.kanban-list { min-height: 300px; padding: 8px; }
.opportunity-card { padding: 11px; margin-bottom: 8px; background: white; border: 1px solid #d4dce5; border-left: 3px solid #6e96aa; box-shadow: 0 1px 2px rgba(14,31,49,.04); cursor: grab; }
.opportunity-card:hover { border-color: #aebbc8; border-left-color: var(--primary); box-shadow: var(--shadow-small); }
.opportunity-card.dragging { opacity: .45; }
.opportunity-card.risk { border-left-color: var(--red); }
.opportunity-card.high { border-left-color: var(--green); }
.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 7px; }
.card-no { color: var(--ink-500); font-size: 9px; font-weight: 700; }
.card-title { margin-top: 4px; font-size: 12px; font-weight: 720; line-height: 1.35; }
.card-account { margin-top: 3px; color: var(--ink-500); font-size: 10px; }
.card-money { margin-top: 10px; font-size: 14px; font-weight: 780; }
.card-next { margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line-soft); color: var(--ink-650); font-size: 10px; }
.card-next strong { display: block; margin-bottom: 3px; color: var(--ink-800); font-size: 11px; }
.card-meta { display: flex; justify-content: space-between; gap: 6px; margin-top: 9px; color: var(--ink-500); font-size: 9px; }
.card-warning { margin-top: 8px; display: flex; gap: 5px; align-items: center; color: var(--red); font-size: 9px; font-weight: 700; }

.account-hero { background: white; border: 1px solid var(--line); margin-bottom: 14px; }
.account-hero-main { display: flex; align-items: flex-start; gap: 16px; padding: 18px; }
.company-avatar { width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 auto; color: #125a70; background: #ddedf1; border: 1px solid #c4dce2; font-weight: 800; font-size: 19px; }
.company-title { flex: 1; min-width: 0; }
.company-title h1 { margin: 0; font-size: 21px; }
.company-title p { margin: 5px 0 0; color: var(--ink-500); font-size: 12px; }
.hero-badges { display: flex; gap: 6px; margin-top: 9px; }
.hero-metrics { display: flex; align-self: stretch; }
.hero-stat { min-width: 114px; padding: 4px 16px; border-left: 1px solid var(--line-soft); }
.hero-stat span { display: block; color: var(--ink-500); font-size: 10px; }
.hero-stat strong { display: block; margin-top: 7px; font-size: 14px; }
.account-actionbar { min-height: 48px; display: flex; align-items: center; gap: 5px; padding: 6px 12px; background: #f6f8fa; border-top: 1px solid var(--line); }
.account-actionbar .btn { background: transparent; border-color: transparent; }
.account-actionbar .btn:hover { background: white; border-color: var(--line-strong); }
.account-actionbar .btn-primary { color: white; background: var(--primary); border-color: var(--primary); }
.account-layout { display: grid; grid-template-columns: 280px minmax(520px, 1fr) 290px; gap: 14px; align-items: start; }
.info-list { margin: 0; }
.info-row { display: grid; grid-template-columns: 86px minmax(0,1fr); gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 12px; }
.info-row:last-child { border-bottom: 0; }
.info-row dt { color: var(--ink-500); }
.info-row dd { margin: 0; color: var(--ink-800); overflow-wrap: anywhere; }
.contact-card { padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.contact-card:last-child { border-bottom: 0; }
.contact-name { font-weight: 700; font-size: 12px; }
.contact-role { margin: 2px 0 6px; color: var(--ink-500); font-size: 10px; }
.contact-line { color: var(--ink-650); font-size: 10px; }
.next-step-box { padding: 12px; background: #f1f8fa; border-left: 3px solid var(--primary); }
.next-step-box small { color: var(--primary-dark); font-weight: 750; }
.next-step-box strong { display: block; margin-top: 7px; font-size: 12px; }
.next-step-box span { display: block; margin-top: 5px; color: var(--ink-500); font-size: 10px; }
.risk-box { padding: 11px; background: var(--red-soft); border-left: 3px solid var(--red); }
.risk-box strong { color: var(--red); font-size: 11px; }
.risk-box p { margin: 5px 0 0; color: #704241; font-size: 10px; }
.timeline { padding: 4px 14px 12px; }
.timeline-item { position: relative; display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 8px; padding: 11px 0; }
.timeline-item:not(:last-child)::after { content: ""; position: absolute; left: 16px; top: 42px; bottom: -5px; width: 1px; background: var(--line); }
.timeline-icon { position: relative; z-index: 1; width: 32px; height: 32px; display: grid; place-items: center; color: var(--blue); background: var(--blue-soft); border: 3px solid white; border-radius: 50%; font-size: 10px; font-weight: 750; }
.timeline-icon.future { color: var(--amber); background: var(--amber-soft); }
.timeline-content { padding-top: 3px; }
.timeline-title { font-weight: 680; font-size: 12px; }
.timeline-copy { margin-top: 4px; color: var(--ink-650); font-size: 11px; line-height: 1.5; }
.timeline-meta { display: flex; gap: 8px; margin-top: 5px; color: var(--ink-500); font-size: 9px; }
.related-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; padding: 11px; }
.related-tile { min-height: 74px; padding: 10px; border: 1px solid var(--line); cursor: pointer; }
.related-tile:hover { border-color: #aab9c8; background: #fafcfd; }
.related-tile span { display: block; color: var(--ink-500); font-size: 10px; }
.related-tile strong { display: block; margin-top: 8px; font-size: 18px; }
.related-tile small { display: block; margin-top: 2px; color: var(--ink-500); font-size: 9px; }

.entity-layout { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 14px; align-items: start; }
.task-group-title { min-height: 37px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; color: var(--ink-650); background: #f5f7f9; border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 750; }
.task-row { display: grid; grid-template-columns: 24px minmax(0,1fr) 150px 110px 84px; align-items: center; gap: 9px; min-height: 55px; padding: 6px 12px; border-bottom: 1px solid var(--line-soft); }
.task-row:hover { background: #f9fafb; }
.task-check { width: 18px; height: 18px; border: 1px solid var(--line-strong); border-radius: 50%; background: white; cursor: pointer; }
.task-check:hover { border-color: var(--green); background: var(--green-soft); }
.task-check.completed { display: grid; place-items: center; border-color: var(--green); background: var(--green); color: white; cursor: default; font-size: 11px; }
.task-title { font-weight: 650; font-size: 14px; }
.task-context { margin-top: 2px; color: var(--ink-500); font-size: 12px; }
.quick-note { padding: 12px; background: #f7f9fb; border-bottom: 1px solid var(--line); }
.quick-note textarea { width: 100%; min-height: 75px; resize: vertical; padding: 9px; border: 1px solid var(--line-strong); border-radius: 5px; background: white; }
.quick-note-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 7px; color: var(--ink-500); font-size: 10px; }

.chart-panel { min-height: 280px; }
.bar-chart { display: flex; align-items: end; gap: 12px; min-height: 190px; padding: 20px 10px 0; border-bottom: 1px solid var(--line); }
.bar-item { flex: 1; min-width: 32px; display: flex; flex-direction: column; align-items: stretch; justify-content: end; height: 170px; }
.bar-value { margin-bottom: 5px; text-align: center; color: var(--ink-650); font-size: 9px; }
.bar { min-height: 3px; background: linear-gradient(180deg, #3b91aa, #1c647d); }
.bar-label { margin-top: 7px; overflow: hidden; color: var(--ink-500); text-overflow: ellipsis; white-space: nowrap; text-align: center; font-size: 9px; }
.funnel-row { display: grid; grid-template-columns: 110px 1fr 80px; gap: 10px; align-items: center; margin: 10px 0; font-size: 11px; }
.funnel-track { height: 8px; background: var(--gray-soft); }
.funnel-fill { height: 100%; background: var(--primary); }
.funnel-value { text-align: right; color: var(--ink-650); }

.drawer-layer, .modal-layer, .command-layer { position: fixed; inset: 0; z-index: 80; }
.drawer-scrim, .modal-scrim { position: absolute; inset: 0; background: rgba(11,23,41,.3); backdrop-filter: blur(1px); }
.drawer { position: absolute; inset: 0 0 0 auto; width: min(590px, 92vw); overflow-y: auto; background: white; box-shadow: var(--shadow-float); animation: drawer-in .18s ease-out; }
@keyframes drawer-in { from { transform: translateX(30px); opacity: .7; } }
.drawer-head { position: sticky; top: 0; z-index: 4; min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--line); }
.drawer-head h2 { margin: 0; font-size: 17px; }
.drawer-head p { margin: 3px 0 0; color: var(--ink-500); font-size: 10px; }
.drawer-close { width: 31px; height: 31px; border: 0; border-radius: 5px; background: transparent; cursor: pointer; font-size: 19px; }
.drawer-close:hover { background: var(--gray-soft); }
.drawer-body { padding: 16px; }
.drawer-footer { position: sticky; bottom: 0; min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px; background: rgba(255,255,255,.97); border-top: 1px solid var(--line); }
.drawer-section { margin-bottom: 18px; }
.drawer-section-title { margin: 0 0 9px; color: var(--ink-650); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.drawer-kpis { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--line); margin-bottom: 15px; }
.drawer-kpi { min-height: 66px; padding: 10px; border-right: 1px solid var(--line-soft); }
.drawer-kpi:last-child { border: 0; }
.drawer-kpi span { display: block; color: var(--ink-500); font-size: 9px; }
.drawer-kpi strong { display: block; margin-top: 7px; font-size: 14px; }

.modal-layer { display: grid; place-items: center; }
.modal { position: relative; z-index: 1; width: min(540px, 92vw); max-height: 88vh; overflow-y: auto; background: white; box-shadow: var(--shadow-float); }
.modal-wide { width: min(920px, 94vw); }
.modal-head { min-height: 57px; display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; font-size: 17px; }
.modal-body { padding: 16px; }
.modal-foot { min-height: 57px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 10px 16px; background: #f7f9fa; border-top: 1px solid var(--line); }
.quick-create-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
.create-option { min-height: 78px; display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); background: white; cursor: pointer; text-align: left; }
.create-option:hover { border-color: #99b6c3; background: #f8fcfd; }
.create-option-icon { width: 37px; height: 37px; display: grid; place-items: center; flex: 0 0 auto; color: var(--primary); background: var(--primary-soft); font-size: 18px; }
.create-option strong, .create-option small { display: block; }
.create-option strong { font-size: 12px; }
.create-option small { margin-top: 3px; color: var(--ink-500); font-size: 10px; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.form-grid.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.field { display: block; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field > span { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 5px; color: var(--ink-650); font-size: 11px; font-weight: 650; }
.field > span em { color: var(--red); font-style: normal; }
.field > span small { color: var(--ink-350); font-weight: 500; }
.field input, .field select, .field textarea { width: 100%; min-height: 37px; padding: 8px 9px; color: var(--ink-950); background: white; border: 1px solid var(--line-strong); border-radius: 5px; }
.field textarea { min-height: 82px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus,
.field-control:focus, .filter-search input:focus,
.costing-form-grid input:focus, .costing-form-grid select:focus,
.full-field input:focus, .full-field select:focus, .full-field textarea:focus,
.costing-edit-table input:focus, .costing-edit-table select:focus {
  border-color: var(--primary); outline: 0; box-shadow: 0 0 0 3px rgba(91,91,214,.12);
}
.field-help { margin-top: 4px; color: var(--ink-500); font-size: 9px; }
.form-section { margin: 17px 0 10px; padding-top: 15px; border-top: 1px solid var(--line); }
.form-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.form-section h3 { margin: 0 0 4px; font-size: 13px; }
.form-section p { margin: 0 0 12px; color: var(--ink-500); font-size: 10px; }
.form-error { min-height: 18px; margin: 5px 0; color: var(--red); font-size: 11px; }
.switch-line { min-height: 37px; display: flex; align-items: center; justify-content: space-between; padding: 0 9px; border: 1px solid var(--line); }
.switch-line label { color: var(--ink-650); font-size: 11px; }
.switch { width: 34px; height: 19px; appearance: none; padding: 2px; background: #aab4c1; border-radius: 10px; cursor: pointer; transition: .16s; }
.switch::before { content: ""; display: block; width: 15px; height: 15px; background: white; border-radius: 50%; transition: .16s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.switch:checked { background: var(--primary); }
.switch:checked::before { transform: translateX(15px); }

.wizard-head { display: grid; grid-template-columns: repeat(5,1fr); padding: 0 16px; background: #f7f9fa; border-bottom: 1px solid var(--line); }
.wizard-step { position: relative; min-height: 58px; display: flex; align-items: center; gap: 7px; color: var(--ink-350); font-size: 10px; }
.wizard-step:not(:last-child)::after { content: ""; position: absolute; left: 25px; right: 7px; top: 20px; height: 1px; background: var(--line-strong); }
.wizard-step i { position: relative; z-index: 1; width: 20px; height: 20px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--line-strong); border-radius: 50%; background: #f7f9fa; font-style: normal; font-size: 9px; }
.wizard-step.active { color: var(--primary-dark); font-weight: 750; }
.wizard-step.active i, .wizard-step.complete i { color: white; border-color: var(--primary); background: var(--primary); }
.autosave-state { display: flex; align-items: center; gap: 5px; color: var(--ink-500); font-size: 10px; }
.autosave-state::before { content: ""; width: 6px; height: 6px; background: var(--green); border-radius: 50%; }

.command-layer { display: flex; justify-content: center; padding-top: 10vh; background: rgba(9,21,37,.43); backdrop-filter: blur(2px); }
.command-box { width: min(680px, 92vw); height: fit-content; overflow: hidden; background: white; box-shadow: var(--shadow-float); }
.command-input-wrap { height: 59px; display: flex; align-items: center; gap: 10px; padding: 0 15px; border-bottom: 1px solid var(--line); }
.command-input-wrap > span { font-size: 21px; transform: rotate(-12deg); }
.command-input-wrap input { flex: 1; height: 48px; border: 0; outline: 0; font-size: 15px; }
.command-results { max-height: 440px; overflow-y: auto; padding: 7px; }
.command-group { padding: 8px 8px 5px; color: var(--ink-500); font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.command-result { display: grid; grid-template-columns: 32px minmax(0,1fr) auto; gap: 9px; align-items: center; min-height: 49px; padding: 6px 9px; cursor: pointer; }
.command-result:hover, .command-result.active { background: #edf5f7; }
.command-result-icon { width: 29px; height: 29px; display: grid; place-items: center; color: var(--primary); background: var(--primary-soft); font-size: 11px; font-weight: 800; }
.command-result strong, .command-result small { display: block; }
.command-result strong { font-size: 12px; }
.command-result small { margin-top: 2px; color: var(--ink-500); font-size: 10px; }
.command-box footer { min-height: 34px; display: flex; gap: 18px; align-items: center; padding: 0 13px; color: var(--ink-500); background: #f7f9fa; border-top: 1px solid var(--line); font-size: 9px; }

.toast-region { position: fixed; right: 18px; bottom: 18px; z-index: 110; display: grid; gap: 8px; }
.toast { min-width: 280px; max-width: 420px; display: flex; align-items: center; gap: 10px; padding: 11px 12px; color: white; background: var(--navy-900); box-shadow: var(--shadow-small); animation: toast-in .2s ease-out; font-size: 11px; }
.toast::before { content: "✓"; width: 20px; height: 20px; display: grid; place-items: center; flex: 0 0 auto; color: var(--green); background: white; border-radius: 50%; font-weight: 900; }
.toast.error::before { content: "!"; color: var(--red); }
.toast button { margin-left: auto; color: #9ed2df; background: transparent; border: 0; cursor: pointer; font-weight: 700; }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } }

.login-screen { min-height: 100vh; display: grid; grid-template-columns: minmax(470px, .95fr) minmax(520px, 1.05fr); background: var(--canvas); }
.login-panel { display: flex; flex-direction: column; padding: clamp(34px, 5vw, 76px) clamp(42px, 8vw, 120px); background: white; }
.login-brand { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 760; }
.login-copy { margin-top: auto; max-width: 500px; }
.login-copy h1 { margin: 13px 0 14px; font-size: clamp(32px, 3.4vw, 48px); line-height: 1.12; letter-spacing: -.045em; }
.login-copy p { max-width: 455px; margin: 0; color: var(--ink-500); line-height: 1.8; }
.login-form { display: grid; gap: 12px; margin: 38px 0 auto; max-width: 430px; }
.login-form label { color: var(--ink-650); font-size: 11px; font-weight: 650; }
.login-form input { width: 100%; height: 43px; margin-top: 6px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: 5px; }
.login-foot { margin: 40px 0 0; color: var(--ink-350); font-size: 10px; }
.login-aside { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 10vw; color: var(--ink-950); background: linear-gradient(145deg, #eeeeff 0%, #e8f7f5 58%, #f2edfa 100%); }
.login-aside::before { content: ""; position: absolute; width: 650px; height: 650px; right: -270px; top: -280px; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; box-shadow: 0 0 0 80px rgba(255,255,255,.025), 0 0 0 170px rgba(255,255,255,.018); }
.signal-preview { position: relative; z-index: 1; width: min(460px, 100%); background: rgba(8,24,40,.4); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 25px 70px rgba(0,0,0,.21); backdrop-filter: blur(12px); }
.signal-head { min-height: 53px; display: flex; justify-content: space-between; align-items: center; padding: 0 17px; border-bottom: 1px solid rgba(91,91,214,.12); color: var(--ink-650); font-size: 12.5px; }
.signal-head strong { color: var(--ink-500); }
.signal-row { min-height: 62px; display: flex; justify-content: space-between; align-items: center; padding: 0 17px; border-bottom: 1px solid rgba(91,91,214,.1); color: var(--ink-800); }
.signal-row:last-child { border: 0; }
.signal-row::before { content: ""; width: 5px; height: 28px; margin-right: 12px; background: #65a6bb; }
.signal-row span { flex: 1; font-size: 12px; }
.signal-row strong { font-size: 20px; }
.signal-row.danger::before { background: #ef6961; }
.signal-row.warning::before { background: #efb44b; }
.signal-row.info::before { background: #57a9e4; }
.signal-row.success::before { background: #41c58e; }
.login-aside blockquote { position: relative; z-index: 1; width: min(450px,100%); margin: 38px 0 0; color: var(--ink-650); font-size: 15px; line-height: 1.7; }

@media (max-width: 1280px) {
  :root { --sidebar-w: 208px; }
  .metric-strip { grid-template-columns: repeat(3,1fr); }
  .metric:nth-child(3) { border-right: 0; }
  .metric:nth-child(-n+3) { border-bottom: 1px solid var(--line-soft); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-side { grid-template-columns: repeat(2,1fr); }
  .account-layout { grid-template-columns: 245px minmax(450px,1fr); }
  .account-layout > :last-child { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
  .hero-stat { min-width: 95px; padding: 4px 10px; }
}

@media (max-width: 900px) {
  :root { --sidebar-w: 68px; }
  .brand { padding: 0 18px; }
  .brand-name, .next-tag, .quick-create:not(:focus) { font-size: 0; }
  .quick-create { justify-content: center; margin-inline: 11px; padding: 0; }
  .quick-create kbd, .nav-item > span:not(.nav-icon):not(.nav-count), .environment-safety span:last-child { display: none; }
  .nav-item { justify-content: center; padding: 0; }
  .nav-count { position: absolute; right: 0; top: 3px; }
  .main { padding-inline: 14px; }
  .dashboard-side { grid-template-columns: 1fr; }
  .account-layout { grid-template-columns: 1fr; }
  .account-layout > :last-child { grid-column: auto; display: block; }
  .hero-metrics { display: none; }
  .queue-row { grid-template-columns: 31px minmax(0,1fr) 100px; }
  .queue-reason, .queue-action { display: none; }
  .login-screen { grid-template-columns: 1fr; }
  .login-aside { display: none; }
}

/* 2026 parity pass: one restrained visual system and complete record actions */
body { color: var(--ink-950); background: var(--canvas); font-size: 14px; }
.sidebar { color: var(--ink-800); background: #f8fafc; border-right: 1px solid var(--line); }
.brand { height: 64px; }
.brand-mark { background: var(--primary); box-shadow: none; }
.brand-name { color: var(--ink-950); }
.next-tag { color: var(--primary); }
.quick-create { color: var(--primary-dark); background: white; border: 1px solid #b6cdf2; border-radius: 6px; }
.quick-create:hover { color: white; background: var(--primary); border-color: var(--primary); }
.quick-create > span { color: inherit; }
.nav-group-label { color: var(--ink-500); }
.nav-item { color: var(--ink-650); border-radius: 4px; }
.nav-item:hover { color: var(--ink-950); background: var(--gray-soft); }
.nav-item.active { color: var(--primary-dark); background: var(--primary-soft); font-weight: 700; }
.nav-item.active::before { top: 5px; bottom: 5px; background: var(--primary); }
.nav-icon, .nav-item.active .nav-icon { color: currentColor; }
.nav-count { color: var(--primary-dark); background: #dbe8fb; }
.sidebar-bottom { border-top-color: var(--line); }
.environment-safety { color: var(--ink-650); border-top-color: var(--line); }
.environment-safety small { color: var(--ink-500); }
.topbar { background: rgba(255,255,255,.98); backdrop-filter: none; }
.main { padding-top: 20px; }
.page-header h1 { color: var(--ink-950); font-size: 24px; letter-spacing: -.02em; }
.page-header p { color: var(--ink-650); font-size: 14px; }
.panel, .metric-card, .focus-card, .pipeline-column, .card, .drawer-record-list { border-color: var(--line); border-radius: 7px; box-shadow: none; }
.btn { min-height: 38px; border-radius: 5px; }
.btn-primary { color: white; background: var(--primary); border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); }
.field-control, .filter-search input, .field input, .field select, .field textarea { border-radius: 5px; }
.data-table th { height: 42px; color: var(--ink-650); background: #f7f8f9; font-size: 12px; }
.data-table td { min-height: 46px; padding-top: 10px; padding-bottom: 10px; font-size: 14px; }
.data-table tbody tr { height: 46px; }
.data-table tbody tr:hover { background: #f7f9fc; }
.amount-emphasis, .money { color: var(--ink-950); font-weight: 760; font-variant-numeric: tabular-nums; }
.date-overdue, .risk-text { color: var(--red) !important; font-weight: 760; }
.badge { border-radius: 4px; }
.badge-info, .badge-blue { color: var(--blue); background: var(--blue-soft); }
.badge-warning, .badge-amber { color: var(--amber); background: var(--amber-soft); }
.badge-success, .badge-green { color: var(--green); background: var(--green-soft); }
.badge-danger, .badge-red { color: var(--red); background: var(--red-soft); }
.badge-neutral { color: var(--ink-650); background: var(--gray-soft); }
.opportunity-card { border-radius: 6px; box-shadow: none; }
.opportunity-card .card-actions { grid-template-columns: repeat(4,minmax(0,1fr)); }
.opportunity-card .card-actions .btn { min-width: 0; padding-inline: 5px; font-size: 12px; }
.queue-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.queue-actions .btn { min-height: 30px; }
.action-menu > div { border-radius: 5px; }
.action-menu > div a { display: flex; align-items: center; min-height: 32px; padding: 0 8px; font-size: 12px; }
.action-menu > div button.danger, .action-menu > div a.danger { color: var(--red); }
.drawer { width: min(620px, 96vw); }
.drawer-head, .record-drawer-head { position: sticky; top: 0; z-index: 5; background: white; border-bottom: 1px solid var(--line); }
.drawer-head h2 { font-size: 22px; }
.drawer-head-actions, .modal-head-actions { display: flex; align-items: flex-start; gap: 6px; }
.drawer-header-context { display: flex; flex-wrap: wrap; gap: 7px 16px; margin-top: 8px; color: var(--ink-650); font-size: 12px; }
.drawer-header-context strong { color: var(--ink-950); font-size: 13px; }
.drawer-footer { position: sticky; bottom: 0; z-index: 5; background: white; border-top: 1px solid var(--line); }
.drawer-action-footer { display: flex; flex-wrap: wrap; gap: 6px; }
.drawer-footer-spacer { flex: 1; }
.record-priority-grid { border-radius: 5px; overflow: hidden; }
.field-invalid input, .field-invalid select, .field-invalid textarea { border-color: var(--red); box-shadow: 0 0 0 2px rgba(174,46,36,.12); }
.modal-spacer { flex: 1; }

.attachment-panel { margin-top: 14px; padding: 14px; border: 1px solid var(--line); background: white; }
.attachment-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.attachment-heading h3 { margin: 0; font-size: 15px; }
.attachment-heading p { margin: 3px 0 0; color: var(--ink-500); font-size: 12px; }
.attachment-heading > span { color: var(--ink-650); font-size: 12px; }
.attachment-dropzone { padding: 10px; border: 1px dashed #b3b9c4; background: #fafbfc; transition: .15s ease; }
.attachment-dropzone.dragover { border-color: var(--primary); background: var(--primary-soft); }
.attachment-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.attachment-picker { width: 100%; min-height: 54px; display: grid; place-items: center; border: 0; color: var(--ink-650); background: transparent; cursor: pointer; }
.attachment-picker strong, .attachment-picker span { display: block; }
.attachment-picker strong { color: var(--primary-dark); font-size: 14px; }
.attachment-picker span { margin-top: 3px; font-size: 12px; }
.attachment-upload-meta { display: grid; grid-template-columns: 145px 1fr; gap: 7px; }
.attachment-upload-meta select, .attachment-upload-meta input { min-height: 36px; padding: 0 9px; border: 1px solid var(--line); border-radius: 4px; background: white; }
.attachment-progress { position: relative; height: 22px; margin-top: 8px; overflow: hidden; color: var(--ink-950); background: var(--line-soft); font-size: 11px; text-align: center; }
.attachment-progress span { position: absolute; inset: 0 auto 0 0; width: 0; background: #b7d4ff; transition: width .15s ease; }
.attachment-progress strong { position: relative; line-height: 22px; }
.attachment-list { margin-top: 8px; border-top: 1px solid var(--line-soft); }
.attachment-item { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: 10px; align-items: center; min-height: 60px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.attachment-thumb { width: 42px; height: 42px; display: grid; place-items: center; overflow: hidden; background: var(--gray-soft); }
.attachment-thumb img { width: 100%; height: 100%; object-fit: cover; }
.attachment-type { color: var(--ink-650); font-size: 10px; font-weight: 800; }
.attachment-type.pdf { color: var(--red); }
.attachment-info { min-width: 0; }
.attachment-info strong, .attachment-info span, .attachment-info small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-info strong { font-size: 13px; }
.attachment-info span, .attachment-info small { margin-top: 2px; color: var(--ink-500); font-size: 12px; }
.attachment-actions { display: flex; align-items: center; gap: 3px; }
.attachment-actions > button, .attachment-actions > a { padding: 5px 6px; border: 0; color: var(--primary-dark); background: transparent; cursor: pointer; font-size: 12px; }
.attachment-empty { padding: 18px 8px 8px; color: var(--ink-500); font-size: 13px; text-align: center; }
.attachment-preview { min-height: 480px; display: grid; place-items: center; padding: 12px; background: #f1f2f4; }
.attachment-preview-image { max-width: 100%; max-height: 70vh; object-fit: contain; }
.attachment-preview-frame { width: 100%; height: 70vh; border: 0; background: white; }
.attachment-preview-empty { max-width: 420px; text-align: center; }

.resource-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; min-width: min(820px, 82vw); }
.resource-modal-grid .panel { overflow: hidden; }
.resource-list { border-top: 1px solid var(--line); }
.resource-row { width: 100%; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--line-soft); background: white; cursor: pointer; text-align: left; }
.resource-row:hover { background: #f7f9fc; }
.resource-row strong, .resource-row small { display: block; }
.resource-row small { margin-top: 3px; color: var(--ink-500); font-size: 12px; }

@media (max-width: 1400px) {
  :root { --sidebar-w: 216px; }
  .topbar { padding-inline: 18px; }
  .main { padding: 14px 14px 26px; }
  .page-header h1 { font-size: 22px; }
  .data-table td { padding-inline: 9px; }
  .attachment-item { grid-template-columns: 38px minmax(0,1fr); }
  .attachment-actions { grid-column: 2; }
}

@media (max-width: 900px) {
  .attachment-upload-meta, .resource-modal-grid { grid-template-columns: 1fr; min-width: 0; }
}

/* Readability and action-loop standard for the core sales pages */
.page-subtitle, .panel-subtitle, .muted { font-size: 13px; }
.view-tabs { overflow-x: auto; scrollbar-width: thin; }
.view-tab { flex: 0 0 auto; min-height: 42px; padding-inline: 15px; font-size: 13px; white-space: nowrap; }
.field-control { height: 38px; font-size: 14px; }
.filter-search input { width: 260px; }
.data-table { font-size: 14px; }
.data-table th { height: 42px; padding-inline: 12px; font-size: 13px; }
.data-table td { height: 46px; padding: 4px 12px; line-height: 1.2; }
.data-table .primary-cell { min-width: 190px; }
.data-table td .muted { margin-top: 3px; font-size: 12px; }
.table-foot { min-height: 42px; font-size: 12px; }
.badge { min-height: 23px; padding-inline: 7px; font-size: 12px; }
.badge-purple { color: var(--blue); background: var(--blue-soft); }
.tone-purple { --metric-color: var(--blue); }
.money, .amount-emphasis { color: var(--ink-950); font-size: 15px; font-weight: 780; }
.next-cell { min-width: 210px; white-space: normal; }
.next-cell strong { display: block; font-size: 14px; }
.count-cell { text-align: center; font-size: 16px; font-weight: 750; }
.clickable-row { cursor: pointer; }
.row-actions { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.row-actions .btn { min-height: 30px; }
.account-table { min-width: 1180px; }
.account-table-wrap { max-height: calc(100vh - 250px); }

.pipeline-views { margin-bottom: 10px; }
.pipeline-summary { grid-template-columns: repeat(5,minmax(170px,1fr)); margin-bottom: 10px; }
.stage-summary { appearance: none; min-height: 64px; border: 0; border-right: 1px solid var(--line-soft); border-radius: 0; background: white; text-align: left; }
.stage-summary:hover { background: #f7fafb; }
.stage-summary span { font-size: 13px; }
.stage-summary strong { margin-top: 6px; font-size: 14px; }
.kanban { grid-auto-flow: unset; grid-template-columns: repeat(5,minmax(250px,1fr)); min-width: 1300px; gap: 10px; }
.kanban-column { min-height: calc(100vh - 330px); background: #eef1f4; }
.kanban-head { min-height: 48px; background: #e7ebef; }
.kanban-head strong { font-size: 14px; }
.kanban-head span { font-size: 12px; }
.kanban-list { padding: 9px; }
.kanban-list.drag-target { outline: 2px dashed var(--primary); outline-offset: -5px; background: #e7e7ff; }
.kanban-empty { display: grid; place-items: center; min-height: 120px; color: var(--ink-500); font-size: 13px; }
.opportunity-card { margin-bottom: 10px; padding: 12px 12px 0; border-left-width: 4px; cursor: default; }
.opportunity-card.signal-danger { border-left-color: var(--red); }
.opportunity-card.signal-warning { border-left-color: var(--amber); }
.opportunity-card.signal-success { border-left-color: var(--green); }
.stage-chip { color: var(--ink-650); font-size: 12px; font-weight: 700; }
.card-signal { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 750; }
.card-signal::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.card-signal.danger { color: var(--red); }
.card-signal.warning { color: var(--amber); }
.card-signal.success { color: var(--green); }
.card-title { margin-top: 8px; font-size: 15px; line-height: 1.4; }
.card-account { margin-top: 3px; color: var(--ink-650); font-size: 13px; }
.card-money { margin-top: 9px; font-size: 18px; }
.card-next { margin-top: 10px; padding-top: 9px; font-size: 12px; }
.card-next small { color: var(--ink-500); font-size: 12px; }
.card-next strong { margin: 3px 0; font-size: 14px; line-height: 1.4; }
.card-next span { font-size: 12px; }
.card-risk { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding: 7px 0; border-top: 1px solid var(--line-soft); font-size: 12px; }
.card-risk span { color: var(--ink-500); }
.card-risk strong { color: var(--ink-800); }
.card-actions { display: grid; grid-template-columns: repeat(3,1fr); margin: 0 -12px; border-top: 1px solid var(--line); }
.card-actions button { min-height: 35px; padding: 0 4px; border: 0; border-right: 1px solid var(--line-soft); background: #fafbfc; color: var(--ink-650); cursor: pointer; font-size: 12px; }
.card-actions button:last-child { border-right: 0; color: var(--primary-dark); font-weight: 700; }
.card-actions button:hover { background: var(--primary-soft); color: var(--primary-dark); }

.drawer { width: min(580px,94vw); }
.drawer-head { min-height: 72px; padding: 12px 18px; }
.drawer-head h2 { font-size: 20px; }
.drawer-head p { font-size: 12px; }
.drawer-body { padding: 18px; }
.drawer-footer { min-height: 64px; padding: 10px 18px; }
.drawer-action-footer { justify-content: flex-start; flex-wrap: wrap; gap: 6px; }
.drawer-action-footer .btn { flex: 1 1 auto; padding-inline: 10px; }
.drawer-title-meta { display: flex; gap: 5px; margin-top: 7px; }
.drawer-head-actions { display: flex; align-items: center; gap: 6px; }
.drawer-section { margin-bottom: 20px; }
.drawer-section-title { margin-bottom: 10px; font-size: 12px; }
.drawer-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.drawer-section-heading > span { color: var(--ink-500); font-size: 12px; }
.drawer-summary { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; gap: 12px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.drawer-summary strong, .drawer-summary span { display: block; }
.drawer-summary strong { font-size: 16px; }
.drawer-summary span { margin-top: 3px; color: var(--ink-500); font-size: 13px; }
.contact-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px; background: #f7f9fa; border-left: 3px solid var(--blue); }
.contact-summary strong, .contact-summary span { display: block; }
.contact-summary strong { font-size: 14px; }
.contact-summary span { margin-top: 3px; color: var(--ink-650); font-size: 13px; }
.drawer-copy { margin: 0; color: var(--ink-800); font-size: 14px; line-height: 1.65; }
.drawer-record-list { border: 1px solid var(--line); }
.drawer-record { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 11px; border: 0; border-bottom: 1px solid var(--line-soft); background: white; cursor: pointer; text-align: left; }
.drawer-record:last-child { border-bottom: 0; }
.drawer-record:hover { background: #f8fafb; }
.drawer-record strong, .drawer-record small { display: block; }
.drawer-record strong { font-size: 14px; }
.drawer-record small { margin-top: 3px; color: var(--ink-500); font-size: 12px; }
.empty-inline { padding: 14px; color: var(--ink-500); font-size: 13px; text-align: center; }
.activity-line { display: grid; grid-template-columns: 48px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.activity-line > span { color: var(--blue); font-size: 12px; font-weight: 700; }
.activity-line strong, .activity-line small { display: block; }
.activity-line strong { font-size: 14px; }
.activity-line small { margin-top: 3px; color: var(--ink-500); font-size: 12px; line-height: 1.45; }
.next-step-box { padding: 13px; }
.next-step-box small, .next-step-box span { font-size: 12px; }
.next-step-box strong { font-size: 15px; }
.next-step-box.overdue { background: var(--red-soft); border-left-color: var(--red); }
.next-step-box.overdue small { color: var(--red); }
.risk-inline { margin-top: 8px; padding: 9px 11px; color: var(--red); background: var(--red-soft); font-size: 13px; }
.business-summary { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--line); }
.business-summary > div { padding: 10px; border-right: 1px solid var(--line-soft); }
.business-summary > div:last-child { border-right: 0; }
.business-summary span, .business-summary strong, .business-summary small { display: block; }
.business-summary span, .business-summary small { color: var(--ink-500); font-size: 12px; }
.business-summary strong { margin: 5px 0 2px; font-size: 18px; }
.info-row { grid-template-columns: 110px minmax(0,1fr); padding: 9px 0; font-size: 14px; }
.drawer-kpi span { font-size: 12px; }
.drawer-kpi strong { font-size: 15px; }
.record-priority-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-bottom: 14px; background: var(--line); border: 1px solid var(--line); }
.record-priority-grid > div { padding: 12px; background: white; }
.record-priority-grid span, .record-priority-grid strong { display: block; }
.record-priority-grid span { color: var(--ink-500); font-size: 12px; }
.record-priority-grid strong { margin-top: 5px; font-size: 14px; }

.quote-views { margin-bottom: 10px; }
.quote-table { min-width: 1320px; }
.quote-table-wrap { max-height: calc(100vh - 295px); }
.priority-copy { min-width: 210px; max-width: 290px; white-space: normal; font-weight: 650; }
.priority-date { min-width: 145px; }
.priority-date strong { display: block; }
.date-warning { color: var(--amber); font-weight: 700; }
.quote-actions { display: flex; align-items: center; gap: 4px; min-width: 330px; }
.action-menu { position: relative; }
.action-menu summary { min-height: 30px; display: inline-flex; align-items: center; padding: 0 8px; color: var(--ink-650); cursor: pointer; font-size: 12px; list-style: none; }
.action-menu summary::-webkit-details-marker { display: none; }
.action-menu[open] summary { background: var(--gray-soft); }
.action-menu > div { position: absolute; right: 0; z-index: 20; width: 138px; padding: 4px; background: white; border: 1px solid var(--line); box-shadow: var(--shadow-small); }
.action-menu > div button { width: 100%; min-height: 32px; padding: 0 8px; border: 0; background: white; cursor: pointer; text-align: left; font-size: 12px; }
.action-menu > div button:hover { background: var(--gray-soft); }

.field > span, .switch-line label { font-size: 13px; }
.field > span small, .field-help { font-size: 12px; }
.field input, .field select, .field textarea { min-height: 40px; font-size: 14px; }
.field textarea { min-height: 92px; line-height: 1.55; }
.form-section h3 { font-size: 15px; }
.form-section p { font-size: 13px; line-height: 1.55; }
.form-error, .autosave-state { font-size: 12px; }
.nav-group-label, .user-chip small, .metric-note, .queue-subtitle, .queue-due, .focus-note, .activity-mini small, .panel-foot, .task-context, .timeline-meta, .related-tile small, .bar-label, .bar-value, .login-form label, .login-foot { font-size: 12px; }
.metric-label, .queue-reason, .focus-value, .task-group-title { font-size: 13px; }
.queue-title, .focus-title, .activity-mini p, .task-title, .timeline-title { font-size: 14px; }
.timeline-copy, .contact-role, .contact-line { font-size: 13px; }

@media (max-width: 1400px) {
  .main { padding: 18px 18px 30px; }
  .page-header { margin-bottom: 14px; }
  .pipeline-summary { min-width: 960px; }
  .pipeline-summary, .quote-views { overflow-x: auto; }
  .drawer { width: min(560px,94vw); }
  .account-table { min-width: 1120px; table-layout: fixed; }
  .account-table th, .account-table td { padding-inline: 7px; }
  .account-table .primary-cell { min-width: 0; width: 180px; }
  .account-table th:nth-child(2), .account-table td:nth-child(2) { width: 180px; }
  .account-table th:nth-child(3), .account-table td:nth-child(3) { width: 72px; }
  .account-table th:nth-child(4), .account-table td:nth-child(4) { width: 142px; }
  .account-table th:nth-child(5), .account-table td:nth-child(5) { width: 80px; }
  .account-table th:nth-child(6), .account-table td:nth-child(6) { width: 92px; }
  .account-table th:nth-child(7), .account-table td:nth-child(7) { width: 182px; }
  .account-table th:nth-child(8), .account-table td:nth-child(8) { width: 132px; }
  .account-table th:nth-child(9), .account-table td:nth-child(9) { width: 72px; }
  .account-table th:nth-child(10), .account-table td:nth-child(10) { width: 88px; }
  .account-table th:nth-child(11), .account-table td:nth-child(11) { width: 60px; }
  .account-table th:nth-child(12), .account-table td:nth-child(12) { width: 58px; }
  .account-table td { overflow: hidden; text-overflow: ellipsis; }
  .account-table .next-cell { min-width: 132px; }
}

@media (max-width: 900px) {
  .page-header { flex-direction: column; }
  .page-actions { width: 100%; justify-content: flex-end; }
  .toolbar { align-items: flex-start; flex-direction: column; }
  .business-summary { grid-template-columns: repeat(2,1fr); }
  .contact-summary { grid-template-columns: 1fr; }
}

/* YiiCRM benchmark workflow surfaces */
.product-table { min-width: 1500px; }
.rfq-table { min-width: 1450px; }
.supplier-table { min-width: 1600px; }
.mono { font-family: "SFMono-Regular", Consolas, monospace; letter-spacing: .02em; }
.score-cell { font-size: 15px; font-weight: 750; text-align: center; }
.score-pill { width: 38px; height: 30px; display: inline-grid; place-items: center; color: white; border-radius: 5px; font-weight: 800; }
.score-pill.good { background: var(--green); }
.score-pill.mid { background: var(--blue); }
.score-pill.risk { background: var(--amber); }
.offer-compare { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.offer-card { min-width: 0; padding: 14px; border: 1px solid var(--line); background: white; }
.offer-card.recommended { border: 2px solid var(--green); box-shadow: inset 0 3px 0 var(--green-soft); }
.offer-head { min-height: 48px; display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; border-bottom: 1px solid var(--line-soft); }
.offer-head strong,.offer-head small { display: block; }
.offer-head strong { font-size: 15px; }
.offer-head small { margin-top: 3px; color: var(--ink-500); font-size: 12px; }
.offer-card dl { display: grid; grid-template-columns: repeat(2,1fr); margin: 10px 0; }
.offer-card dl div { padding: 8px 7px; border-bottom: 1px solid var(--line-soft); }
.offer-card dt { color: var(--ink-500); font-size: 12px; }
.offer-card dd { margin: 4px 0 0; color: var(--ink-950); font-size: 15px; font-weight: 750; }
.offer-card p { min-height: 38px; margin: 8px 0; color: var(--ink-650); font-size: 13px; line-height: 1.5; }
body:has(.offer-compare) .drawer { width: min(960px,96vw); }

/* Order costing work surface */
.costing-overview { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:14px; overflow:hidden; background:var(--surface); border:1px solid var(--line); border-radius:9px; }
.costing-overview > div { min-height:92px; padding:15px 18px; border-right:1px solid var(--line-soft); background:linear-gradient(180deg,var(--primary-soft),var(--surface) 70%); }
.costing-overview > div:nth-child(2) { background:linear-gradient(180deg,var(--green-soft),var(--surface) 70%); }
.costing-overview > div:nth-child(3) { background:linear-gradient(180deg,var(--red-soft),var(--surface) 70%); }
.costing-overview > div:nth-child(4) { background:linear-gradient(180deg,var(--purple-soft),var(--surface) 70%); border-right:0; }
.costing-overview span,.costing-overview small { display:block; color:var(--ink-500); font-size:12px; }
.costing-overview strong { display:block; margin:5px 0 2px; color:var(--ink-950); font-size:24px; letter-spacing:-.03em; }
.costing-list-table .primary-cell { min-width:190px; }
.cost-status { display:inline-flex; align-items:center; justify-content:center; min-width:76px; min-height:30px; padding:0 10px; border-radius:6px; font-size:13px; font-weight:750; }
.cost-status-green { color:var(--green); background:var(--green-soft); }.cost-status-blue { color:var(--blue); background:var(--blue-soft); }.cost-status-amber { color:var(--amber); background:var(--amber-soft); }.cost-status-purple { color:var(--purple); background:var(--purple-soft); }
.cost-profit strong,.cost-profit small { display:block; }.cost-profit strong { color:var(--green); font-size:15px; }.cost-profit small { margin-top:3px; color:var(--ink-500); }.cost-profit.negative strong,.danger-text { color:var(--red)!important; }.success-text,.cost-positive { color:var(--green)!important; }
body:has(.costing-detail-layout) .drawer,body:has(.costing-editor) .drawer { width:min(1240px,97vw); overflow:hidden; }
.costing-detail-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:18px; height:calc(100vh - 138px); padding:0; background:var(--canvas); overflow:hidden; }
.costing-main { min-width:0; padding:18px 20px 34px; overflow:auto; }.costing-aside { padding:16px; overflow:auto; background:var(--surface); border-left:1px solid var(--line); }
.costing-hero { display:grid; grid-template-columns:1.35fr repeat(3,1fr); margin-bottom:14px; overflow:hidden; background:var(--surface); border:1px solid var(--line); border-radius:9px; }
.costing-hero > div { min-height:112px; padding:17px; border-right:1px solid var(--line-soft); }.costing-hero > div:last-child { border-right:0; }
.costing-hero span,.costing-hero small { display:block; color:var(--ink-500); font-size:12px; }.costing-hero strong { display:block; margin:9px 0 3px; font-size:22px; }
.costing-hero .profit-hero { color:var(--primary-dark); background:linear-gradient(145deg,var(--primary-soft),var(--surface)); }.costing-hero .profit-hero strong { font-size:30px; letter-spacing:-.04em; }.costing-hero .profit-hero em { margin-left:8px; font-style:normal; font-size:18px; font-weight:800; }.costing-hero .profit-hero.negative { color:var(--red); background:var(--red-soft); }
.formula-trace { display:flex; flex-wrap:wrap; gap:6px 16px; margin-bottom:14px; padding:11px 13px; color:var(--ink-650); background:var(--blue-soft); border-left:3px solid var(--blue); font-size:12px; }.formula-trace strong { color:var(--ink-950); }.formula-trace span { position:relative; padding-left:10px; }.formula-trace span::before { content:"·"; position:absolute; left:0; }
.costing-section,.editor-section { margin-bottom:14px; padding:16px; background:var(--surface); border:1px solid var(--line); border-radius:9px; }.costing-section .section-heading,.editor-section .section-heading { margin-bottom:12px; }.costing-section h3,.editor-section h3 { margin:0; font-size:16px; }
.costing-income-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:1px; overflow:hidden; background:var(--line); border:1px solid var(--line); border-radius:7px; }.costing-income-grid > div { min-width:0; padding:12px; background:var(--surface); }.costing-income-grid span,.costing-income-grid strong { display:block; }.costing-income-grid span { color:var(--ink-500); font-size:12px; }.costing-income-grid strong { margin-top:5px; font-size:14px; }
.costing-compare-table tfoot td { height:46px; background:var(--canvas-deep); border-top:1px solid var(--line-strong); font-weight:800; }
.profit-analysis-grid { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); }.profit-analysis-grid > div { padding:14px; border-right:1px solid var(--line-soft); }.profit-analysis-grid > div:last-child { border-right:0; }.profit-analysis-grid span,.profit-analysis-grid strong { display:block; }.profit-analysis-grid span { color:var(--ink-500); font-size:12px; }.profit-analysis-grid strong { margin-top:7px; font-size:18px; }
.costing-aside section { margin-bottom:20px; }.costing-aside h3 { margin:0 0 10px; color:var(--ink-650); font-size:12px; letter-spacing:.04em; text-transform:uppercase; }.costing-aside dl { margin:0; }.costing-aside dl div { display:grid; grid-template-columns:72px 1fr; gap:8px; padding:8px 0; border-bottom:1px solid var(--line-soft); }.costing-aside dt { color:var(--ink-500); }.costing-aside dd { margin:0; overflow-wrap:anywhere; font-weight:650; }
.costing-risk { margin-bottom:7px; padding:10px 11px; border-left:3px solid var(--amber); background:var(--amber-soft); }.costing-risk strong,.costing-risk span { display:block; }.costing-risk strong { font-size:13px; }.costing-risk span { margin-top:3px; color:var(--ink-650); font-size:12px; }.costing-risk.risk-danger { border-left-color:var(--red); background:var(--red-soft); }.costing-risk.risk-success { border-left-color:var(--green); background:var(--green-soft); }
.version-line { padding:8px 0; border-bottom:1px solid var(--line-soft); }.version-line strong,.version-line span { display:block; }.version-line strong { font-size:12px; }.version-line span { margin-top:3px; color:var(--ink-500); font-size:11px; }.version-line.audit strong { color:var(--ink-650); font-weight:600; }
.costing-editor { height:100vh; display:flex; flex-direction:column; background:var(--canvas); }.costing-editor .drawer-body { flex:1; overflow:auto; padding:16px 18px 90px; }.costing-editor-head { flex:0 0 auto; }.costing-editor-footer { flex:0 0 auto; }
.costing-live-summary { position:sticky; top:-16px; z-index:4; display:grid; grid-template-columns:repeat(5,1fr); margin:-16px -18px 14px; background:var(--surface); border-bottom:1px solid var(--line); box-shadow:0 5px 14px rgba(23,32,51,.06); }.costing-live-summary > div { min-height:82px; padding:13px 16px; border-right:1px solid var(--line-soft); }.costing-live-summary span,.costing-live-summary strong,.costing-live-summary em { display:block; }.costing-live-summary span { color:var(--ink-500); font-size:12px; }.costing-live-summary strong { margin-top:5px; font-size:19px; }.costing-live-summary em { color:var(--ink-500); font-style:normal; font-weight:750; }.costing-live-summary .profit { color:var(--green); background:var(--green-soft); }
.costing-form-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }.costing-form-grid label,.full-field { display:grid; gap:5px; color:var(--ink-650); font-size:12px; font-weight:650; }.costing-form-grid input,.costing-form-grid select,.full-field input,.full-field select,.full-field textarea,.costing-edit-table input,.costing-edit-table select,.snapshot-note input { min-width:0; height:40px; padding:0 9px; color:var(--ink-950); background:var(--surface); border:1px solid var(--line-strong); border-radius:6px; }.full-field textarea { height:auto; padding:9px; resize:vertical; }.costing-form-grid .span-2 { grid-column:span 2; }.revenue-fields { grid-template-columns:repeat(6,1fr); }
.costing-edit-table { overflow:auto; }.costing-edit-table table { min-width:1400px; width:100%; border-collapse:separate; border-spacing:0; }.costing-edit-table th { position:sticky; top:0; z-index:2; height:40px; padding:0 8px; color:var(--ink-650); background:var(--canvas-deep); border-bottom:1px solid var(--line-strong); text-align:left; font-size:12px; }.costing-edit-table td { min-width:105px; padding:5px 5px; border-bottom:1px solid var(--line-soft); }.costing-edit-table td:first-child { min-width:170px; }.costing-edit-table input,.costing-edit-table select { width:100%; height:36px; }.costing-edit-table td:first-child input+input,.costing-edit-table td:first-child select+input { margin-top:4px; }.costing-edit-table tfoot td { background:var(--canvas-deep); font-weight:750; }.cost-subtotal { color:var(--ink-950); font-weight:800; white-space:nowrap; }
.line-action { display:block; width:100%; padding:3px; color:var(--primary); background:transparent; border:0; cursor:pointer; font-size:11px; }.line-action.danger { color:var(--red); }.snapshot-note { display:flex; align-items:center; gap:7px; color:var(--ink-500); font-size:12px; }.snapshot-note input { width:190px; height:34px; }
.suggested-price-result { margin-top:18px; padding:18px; background:var(--primary-soft); border-left:4px solid var(--primary); }.suggested-price-result span,.suggested-price-result strong,.suggested-price-result small { display:block; }.suggested-price-result strong { margin:5px 0; color:var(--primary-dark); font-size:28px; }.suggested-price-result small { color:var(--ink-650); }

@media (max-width:1100px) {
  .costing-overview { grid-template-columns:repeat(2,1fr); }.costing-overview > div:nth-child(2) { border-right:0; }.costing-detail-layout { grid-template-columns:1fr 270px; }.costing-hero { grid-template-columns:repeat(2,1fr); }.costing-income-grid { grid-template-columns:repeat(3,1fr); }.costing-form-grid { grid-template-columns:repeat(2,1fr); }.revenue-fields { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:760px) {
  .costing-detail-layout { display:block; height:calc(100vh - 138px); overflow:auto; }.costing-main,.costing-aside { overflow:visible; }.costing-aside { border-left:0; border-top:1px solid var(--line); }.costing-hero,.profit-analysis-grid { grid-template-columns:1fr 1fr; }.costing-live-summary { grid-template-columns:1fr 1fr; position:static; margin:0 0 12px; }.costing-form-grid,.revenue-fields { grid-template-columns:1fr; }.costing-form-grid .span-2 { grid-column:auto; }.snapshot-note { display:none; }
}
.choice-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.choice-check { display: flex; gap: 9px; align-items: flex-start; min-height: 66px; padding: 10px; border: 1px solid var(--line); background: #fafbfc; cursor: pointer; }
.choice-check:has(input:checked) { border-color: #86b8c7; background: var(--primary-soft); }
.choice-check input { margin-top: 3px; }
.choice-check strong,.choice-check small { display: block; }
.choice-check strong { font-size: 14px; }
.choice-check small { margin-top: 4px; color: var(--ink-500); font-size: 12px; line-height: 1.4; }
.related-grid { grid-template-columns: repeat(2,1fr); }
.flow-rail { display: grid; grid-template-columns: repeat(4,1fr); margin-bottom: 12px; border: 1px solid var(--line); }
.flow-node { position: relative; min-width: 0; padding: 10px 8px 10px 34px; border-right: 1px solid var(--line-soft); background: #fafbfc; }
.flow-node:last-child { border-right: 0; }
.flow-node > span { position: absolute; left: 9px; top: 14px; width: 18px; height: 18px; display: grid; place-items: center; border: 1px solid var(--line-strong); color: var(--ink-500); background: white; border-radius: 50%; font-size: 10px; }
.flow-node strong,.flow-node small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow-node strong { font-size: 13px; }
.flow-node small { margin-top: 3px; color: var(--ink-500); font-size: 12px; }
.flow-node.complete > span { color: white; border-color: var(--green); background: var(--green); }
.flow-node.current { background: var(--primary-soft); }
.flow-node.pending { color: var(--ink-500); background: #f4f6f8; }
.flow-node[role="button"] { cursor: pointer; }
.flow-node[role="button"]:hover { background: var(--primary-soft); }
.document-flow { grid-template-columns: repeat(5,minmax(86px,1fr)); overflow-x: auto; }
.analytics-detail-grid { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(340px,.8fr); gap: 16px; margin-top: 16px; }
.analytics-sample-summary { margin-top: 20px; }
.compact-table th,.compact-table td { height: 42px; padding-top: 7px; padding-bottom: 7px; }

@media (max-width: 1100px) {
  .analytics-detail-grid { grid-template-columns: 1fr; }
}
.benchmark-metrics { grid-template-columns: repeat(7,minmax(115px,1fr)); }
.tone-purple { --metric-color: var(--blue); }

@media (max-width: 1400px) {
  .product-table { min-width: 1380px; }
  .rfq-table { min-width: 1320px; }
  .supplier-table { min-width: 1480px; }
  body:has(.offer-compare) .drawer { width: min(880px,97vw); }
  .choice-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 900px) {
  .offer-compare,.choice-grid { grid-template-columns: 1fr; }
}

/* AlluraPak Workboard visual system — generic work-management patterns, original styling. */
body { font-size: 14px; color: var(--ink-950); background: var(--canvas); }
.sidebar { color: var(--ink-800); background: linear-gradient(180deg, #f7f6fd 0%, var(--content-secondary) 100%); border-right-color: var(--line); }
.brand { height: 76px; }
.brand-mark { background: var(--primary); border-radius: 9px 4px 9px 4px; box-shadow: 0 4px 10px rgba(91,91,214,.16); }
.brand-name { color: var(--ink-950); }
.next-tag { color: var(--purple); }
.quick-create { height: 42px; color: var(--primary-dark); border-color: #d8d8f4; background: rgba(255,255,255,.78); border-radius: 8px; }
.quick-create:hover { color: white; background: var(--primary); border-color: var(--primary); }
.quick-create > span { color: currentColor; }
.nav-group-label { color: var(--ink-350); font-size: 11px; }
.nav-item { min-height: 42px; color: var(--ink-650); border-radius: 7px; font-size: 14px; }
.nav-item:hover { color: var(--ink-950); background: rgba(255,255,255,.72); }
.nav-item.active { color: var(--ink-950); background: var(--primary-soft); }
.nav-item.active::before { background: var(--primary); }
.nav-item.active .nav-icon { color: var(--primary); }
.nav-count { color: var(--primary-dark); background: #e2e2f8; }
.sidebar-bottom,.environment-safety { border-color: var(--line); }
.environment-safety,.environment-safety small { color: var(--ink-500); }
.topbar { height: var(--topbar-h); padding: 0 28px; background: rgba(255,255,255,.93); border-bottom-color: var(--line); }
.search-trigger { height: 40px; width: min(520px,45vw); background: var(--content-secondary); border-radius: 8px; }
.main { padding: 26px 28px 42px; }
.page-header { margin-bottom: 20px; }
.page-title { font-size: 24px; font-weight: 760; }
.page-subtitle { max-width: 760px; margin-top: 6px; color: var(--ink-650); font-size: 13px; }
.btn { min-height: 38px; padding: 0 14px; border-color: var(--line-strong); border-radius: 7px; font-size: 13px; }
.btn-primary { box-shadow: 0 3px 8px rgba(91,91,214,.16); }
.btn-small { min-height: 31px; padding: 0 10px; }
.field-control { height: 40px; padding: 0 12px; border-color: var(--line-strong); border-radius: 7px; font-size: 14px; }
.filter-search input { width: 258px; padding-left: 34px; }
.filter-search::before { top: 8px; color: var(--ink-650); }
.toolbar { min-height: 58px; padding: 8px 10px; border-color: var(--line); border-radius: 9px; box-shadow: 0 1px 1px rgba(36,50,74,.02); }
.board-toolbar { position: relative; z-index: 12; }
.panel { border-color: var(--line); border-radius: 10px; box-shadow: 0 1px 2px rgba(31,41,55,.025); overflow: hidden; }
.panel-head { min-height: 58px; padding: 0 17px; }
.panel-title { font-size: 15px; }
.panel-subtitle { margin-top: 2px; font-size: 12.5px; }

.saved-view-bar { min-height: 46px; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 12px; padding: 0 4px; border-bottom: 1px solid var(--line); }
.saved-view-tabs { display: flex; align-items: flex-end; gap: 3px; overflow-x: auto; }
.saved-view-tab { height: 44px; flex: 0 0 auto; padding: 0 14px; color: var(--ink-650); border: 0; border-bottom: 3px solid transparent; background: transparent; cursor: pointer; font-size: 13px; }
.saved-view-tab:hover { color: var(--ink-950); background: rgba(255,255,255,.58); }
.saved-view-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 750; }
.saved-view-tab span { min-width: 21px; margin-left: 6px; padding: 2px 6px; color: var(--ink-650); background: #e9ecf3; border-radius: 10px; font-size: 11px; }
.saved-view-tab.custom { color: var(--ink-500); }
.saved-hint { padding-bottom: 12px; color: var(--ink-500); font-size: 12px; white-space: nowrap; }
.board-tools { display: flex; align-items: center; gap: 10px; }
.board-tools > label { display: flex; align-items: center; gap: 7px; color: var(--ink-650); font-size: 12px; }
.board-select { min-width: 118px; height: 34px; font-size: 12px; }
.density-switch { display: flex; padding: 2px; border: 1px solid var(--line); background: #f4f6fa; border-radius: 7px; }
.density-switch button { height: 29px; padding: 0 9px; color: var(--ink-650); border: 0; background: transparent; border-radius: 5px; cursor: pointer; font-size: 12px; }
.density-switch button.active { color: var(--primary-dark); background: white; box-shadow: 0 1px 4px rgba(31,41,55,.12); font-weight: 700; }

.board-groups { display: grid; gap: 14px; }
.board-group { min-width: 0; background: white; border: 1px solid var(--line); border-radius: 9px; overflow: visible; box-shadow: 0 1px 2px rgba(31,41,55,.02); }
.board-group-head { --group-color: var(--primary); min-height: 48px; display: flex; align-items: center; gap: 9px; padding: 0 12px; color: var(--ink-950); background: #fbfcfe; border-bottom: 1px solid var(--line); }
.board-group-head.tone-cyan { --group-color: var(--blue); }
.board-group-head.tone-green { --group-color: var(--green); }
.board-group-head.tone-amber { --group-color: var(--amber); }
.board-group-head.tone-red { --group-color: var(--red); background: #fff9f9; }
.board-group-head.tone-purple { --group-color: var(--purple); }
.board-group-head.tone-slate { --group-color: #7c8493; }
.group-toggle { width: 26px; height: 30px; padding: 0; color: var(--ink-650); border: 0; background: transparent; cursor: pointer; font-size: 20px; }
.group-accent { width: 5px; height: 27px; background: var(--group-color); border-radius: 3px; }
.board-group-head strong { color: var(--group-color); font-size: 15px; }
.group-count { min-width: 25px; padding: 2px 7px; color: var(--ink-650); background: var(--gray-soft); border-radius: 12px; text-align: center; font-size: 12px; }
.group-summary { color: var(--ink-650); font-size: 12px; font-variant-numeric: tabular-nums; }
.group-spacer { flex: 1; }
.group-add { min-height: 30px; padding: 0 9px; color: var(--group-color); border: 1px solid transparent; background: transparent; border-radius: 6px; cursor: pointer; font-size: 12px; }
.group-add:hover { border-color: var(--line); background: white; }
.board-group > .table-wrap { border: 0; border-radius: 0 0 9px 9px; }

.table-wrap { max-height: calc(100vh - 260px); border-color: var(--line); border-radius: 8px; }
.data-table { font-size: 14px; }
.data-table th { height: 42px; padding: 0 12px; color: var(--ink-650); background: var(--content-secondary); font-size: 12.5px; font-weight: 720; letter-spacing: .015em; }
.data-table td { height: 50px; padding: 7px 12px; color: var(--ink-800); }
.density-compact .data-table td { height: 44px; padding-top: 4px; padding-bottom: 4px; }
.data-table tbody tr:nth-child(even) td { background: #fafbfe; }
.data-table tbody tr:hover td { background: var(--primary-soft); }
.data-table .primary-cell { min-width: 235px; color: var(--ink-950); }
.primary-cell > strong { font-weight: 760; }
.cell-meta, .primary-cell small { display: block; margin-top: 3px; color: var(--ink-500); font-size: 12px; font-weight: 450; }
.data-table th:nth-child(2), .data-table td:nth-child(2) { position: sticky; left: 42px; z-index: 3; }
.data-table th:nth-child(2) { z-index: 6; background: var(--content-secondary); }
.data-table tbody tr:nth-child(even) td:nth-child(2) { background: #fafbfe; }
.data-table tbody tr:hover td:nth-child(2) { background: var(--primary-soft); }
.product-table th:first-child,.product-table td:first-child { min-width: 270px; }
.product-table th:nth-child(2),.product-table td:nth-child(2) { left: 270px; }
.quote-table th:first-child,.quote-table td:first-child { min-width: 145px; }
.quote-table th:nth-child(2),.quote-table td:nth-child(2) { left: 145px; min-width: 230px; }
.resizable-table th { position: sticky; }
.column-resizer { position: absolute; top: 8px; right: -3px; z-index: 9; width: 7px; height: 26px; cursor: col-resize; }
.column-resizer::after { content: ""; position: absolute; left: 3px; top: 2px; bottom: 2px; width: 1px; background: var(--line-strong); }
.column-resizer:hover::after { width: 2px; background: var(--primary); }

.inline-edit { min-width: 86px; height: 34px; padding: 0 28px 0 9px; color: inherit; border: 1px solid transparent; background: transparent; border-radius: 6px; cursor: pointer; font: inherit; }
.inline-edit:hover,.inline-edit:focus { border-color: rgba(31,41,55,.22); background-color: rgba(255,255,255,.55); }
.status-cell { min-width: 112px; min-height: 35px; display: flex; align-items: center; justify-content: center; color: white; border-radius: 5px; overflow: hidden; }
.status-cell .status-select { width: 100%; color: inherit; text-align: center; text-align-last: center; font-weight: 720; }
.status-cell select option { color: var(--ink-950); background: white; }
.status-blue { color: #285b83; background: #dceaf6; }
.status-green { color: #216b4e; background: #dcefe6; }
.status-amber { color: #825014; background: #fae2b8; }
.status-red { color: #943b3b; background: #f7d8d8; }
.status-purple { color: #654494; background: #e7def3; }
.status-slate { color: #505967; background: #e2e5ea; }
.grade-cell { min-width: 62px; }
.grade-cell .inline-edit { min-width: 58px; padding-right: 20px; text-align: center; font-weight: 760; }
.grade-A { color: var(--purple); background: var(--purple-soft); }
.grade-B { color: var(--teal); background: var(--teal-soft); }
.grade-C { color: var(--ink-650); background: var(--gray-soft); }
.owner-cell { min-width: 130px; display: flex; align-items: center; gap: 7px; }
.owner-cell > span:not(.owner-avatar) { display: none; }
.owner-select { min-width: 96px; padding-left: 3px; }
.owner-avatar { width: 28px; height: 28px; flex: 0 0 auto; display: inline-grid; place-items: center; color: var(--primary-dark); background: #e1e1f8; border-radius: 50%; font-size: 12px; font-weight: 800; }
.risk-cell { min-width: 86px; padding: 7px 9px; border-left: 4px solid; border-radius: 4px; font-size: 12px; font-weight: 720; }
.risk-danger { color: #a53d3d; border-color: var(--red); background: var(--red-soft); }
.risk-warning { color: #9a5d12; border-color: var(--amber); background: var(--amber-soft); }
.risk-success { color: #247754; border-color: var(--green); background: var(--green-soft); }
.amount-emphasis { color: var(--ink-950)!important; font-size: 15px; font-weight: 800!important; }
.next-cell strong,.priority-date strong,.feedback-cell strong { color: var(--ink-950); font-weight: 760; }
.date-overdue strong,.date-overdue { color: var(--red)!important; }
.account-emphasis { cursor: pointer; font-weight: 760; }
.feedback-cell { min-width: 210px; white-space: normal; }
.feedback-cell button { display: block; margin-top: 3px; padding: 0; color: var(--primary); border: 0; background: transparent; cursor: pointer; font-size: 12px; }
.feedback-cell.waiting strong { color: var(--amber); }
.followup-cell { min-width: 148px; }
.followup-cell .inline-date { width: 134px; font-weight: 720; }
.followup-cell span { display: block; margin-top: 2px; font-size: 12px; }

.section-kicker { color: var(--primary); font-size: 10px; font-weight: 850; letter-spacing: .14em; }
.my-work-panel { margin-bottom: 24px; }
.work-panel-head { min-height: 72px; }
.work-panel-head h2 { margin-top: 2px; }
.work-panel-head p { margin: 2px 0 0; color: var(--ink-500); font-size: 12px; }
.action-tabs { align-self: stretch; display: flex; align-items: flex-end; gap: 2px; }
.action-tabs button { height: 51px; padding: 0 13px; color: var(--ink-650); border: 0; border-bottom: 3px solid transparent; background: transparent; cursor: pointer; }
.action-tabs button.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 740; }
.action-tabs span { margin-left: 5px; padding: 2px 6px; color: inherit; background: #edf0f5; border-radius: 10px; font-size: 11px; }
.my-work-list { min-height: 292px; }
.my-work-row { min-height: 58px; display: grid; grid-template-columns: 28px 32px minmax(230px,1fr) 88px 105px 126px 186px; gap: 10px; align-items: center; padding: 7px 14px; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.my-work-row:hover { background: #f6f7ff; }
.work-check,.task-check { width: 21px; height: 21px; border: 2px solid #aeb6c5; background: white; border-radius: 50%; cursor: pointer; }
.work-check:hover,.task-check:hover { border-color: var(--green); box-shadow: inset 0 0 0 4px white; background: var(--green); }
.work-type,.task-type-icon { width: 29px; height: 29px; display: grid; place-items: center; color: var(--primary); background: var(--primary-soft); border-radius: 7px; font-size: 12px; font-weight: 800; }
.type-email { color: var(--blue); background: var(--blue-soft); }
.type-call { color: var(--green); background: var(--green-soft); }
.type-whatsapp { color: var(--teal); background: var(--teal-soft); }
.type-meeting { color: var(--purple); background: var(--purple-soft); }
.work-main strong,.work-main span { display: block; }
.work-main strong { font-size: 14px; }
.work-main span { margin-top: 2px; color: var(--ink-500); font-size: 12px; }
.work-kind { color: var(--ink-650); }
.work-due { font-weight: 720; }
.work-due small { display: block; margin-top: 2px; color: var(--ink-500); font-size: 11px; font-weight: 450; }
.work-owner { display: flex; align-items: center; gap: 7px; }
.work-actions { display: flex; justify-content: flex-end; gap: 2px; opacity: .22; }
.my-work-row:hover .work-actions { opacity: 1; }
.overview-section { margin-bottom: 24px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 10px; }
.section-heading h2 { margin: 2px 0 0; font-size: 17px; }
.section-heading > span { color: var(--ink-500); font-size: 12px; }
.signal-metrics { display: grid; grid-template-columns: repeat(6,minmax(135px,1fr)); gap: 10px; }
.signal-metric { --metric-color: var(--blue); position: relative; min-height: 126px; padding: 17px 15px 13px; background: white; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; overflow: hidden; }
.signal-metric:hover { transform: translateY(-1px); border-color: #cad0dc; box-shadow: var(--shadow-small); }
.metric-topline { position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--metric-color); }
.signal-metric > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.signal-metric > div span { color: var(--ink-650); font-size: 12.5px; }
.signal-metric > div strong { color: var(--ink-950); font-size: 24px; }
.signal-metric p { margin: 15px 0 6px; color: var(--ink-500); font-size: 12px; }
.signal-metric button { padding: 0; color: var(--metric-color); border: 0; background: transparent; cursor: pointer; font-size: 12px; font-weight: 700; }
.assist-grid { display: grid; grid-template-columns: 1.05fr 1fr .8fr; gap: 14px; align-items: start; }

.pipeline-summary { grid-template-columns: repeat(5,minmax(150px,1fr)); border-radius: 9px; overflow: hidden; }
.stage-summary { min-height: 70px; }
.stage-summary span { font-size: 12px; }
.stage-summary strong { margin-top: 6px; font-size: 14px; }
.kanban { grid-auto-columns: 302px; gap: 12px; }
.workboard-kanban .kanban-column { --stage-color: var(--primary); min-height: calc(100vh - 314px); background: var(--content-secondary); border-color: var(--line); border-radius: 9px; overflow: visible; }
.workboard-kanban .stage-tone-2 { --stage-color: var(--blue); }
.workboard-kanban .stage-tone-3 { --stage-color: var(--purple); }
.workboard-kanban .stage-tone-4 { --stage-color: var(--amber); }
.workboard-kanban .stage-tone-5 { --stage-color: var(--green); }
.workboard-kanban .kanban-column.collapsed { width: 64px; min-height: 360px; }
.workboard-kanban .kanban-head { min-height: 62px; gap: 8px; padding: 0 10px; background: white; border-top: 5px solid var(--stage-color); border-radius: 9px 9px 0 0; }
.workboard-kanban .kanban-head > div { min-width: 0; flex: 1; }
.workboard-kanban .kanban-head strong,.workboard-kanban .kanban-head small { display: block; }
.workboard-kanban .kanban-head strong { color: var(--ink-950); font-size: 14px; }
.workboard-kanban .kanban-head small { margin-top: 2px; color: var(--ink-500); font-size: 11px; }
.pipeline-collapse,.stage-add { width: 26px; height: 28px; padding: 0; color: var(--ink-650); border: 0; background: transparent; cursor: pointer; font-size: 18px; }
.stage-total { color: var(--ink-800); font-size: 11px; font-weight: 740; }
.kanban-list { padding: 9px; }
.opportunity-card { margin-bottom: 9px; padding: 13px 13px 0; border: 0; border-left: 4px solid var(--green); border-radius: 8px; box-shadow: 0 2px 8px rgba(31,41,55,.07); }
.opportunity-card.signal-danger { border-left-color: var(--red); }
.opportunity-card.signal-warning { border-left-color: var(--amber); }
.card-top { align-items: center; }
.stage-chip { padding: 0; color: var(--ink-500); background: transparent; font-size: 11px; }
.card-signal { min-height: 25px; padding: 4px 8px; color: white!important; border-radius: 5px; font-size: 11px; font-weight: 750; }
.card-signal.danger { color: #943b3b!important; background: var(--red-soft); }
.card-signal.warning { color: #825014!important; background: var(--amber-soft); }
.card-signal.success { color: #216b4e!important; background: var(--green-soft); }
.card-title { margin-top: 12px; font-size: 15px; font-weight: 780; }
.card-account { margin-top: 3px; color: var(--ink-650); font-size: 12px; }
.card-value-row { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.card-money { font-size: 18px; font-weight: 820; }
.card-owner { display: flex; align-items: center; gap: 6px; color: var(--ink-650); font-size: 11px; }
.card-owner .owner-avatar { width: 25px; height: 25px; }
.card-next { margin-top: 12px; padding: 10px; background: var(--content-secondary); border-left: 3px solid var(--stage-color,var(--primary)); border-radius: 5px; }
.card-next small,.card-next strong,.card-next span { display: block; }
.card-next strong { margin-top: 3px; color: var(--ink-950); font-size: 13px; }
.card-next span { margin-top: 3px; color: var(--ink-650); font-size: 11px; }
.card-actions { display: grid; grid-template-columns: 1fr 1fr auto; margin: 12px -13px 0; border-top: 1px solid var(--line-soft); }
.card-actions > button,.card-actions > details > summary { min-height: 36px; display: grid; place-items: center; padding: 0 8px; color: var(--ink-650); border: 0; border-right: 1px solid var(--line-soft); background: white; cursor: pointer; font-size: 11px; }
.card-actions > button:hover,.card-actions > details > summary:hover { color: var(--primary); background: #f7f7ff; }
.card-more { position: relative; }
.card-more > summary { list-style: none; }

.task-workspace { display: grid; grid-template-columns: minmax(680px,1fr) 310px; gap: 14px; align-items: start; }
.task-list { background: white; }
.work-task-row { min-height: 56px; grid-template-columns: 28px 32px minmax(220px,1fr) 100px 132px 88px 66px; padding: 7px 12px; }
.task-check.completed { display: grid; place-items: center; color: white; border-color: var(--green); background: var(--green); }
.task-main { min-width: 0; }
.task-title-button { display: block; max-width: 100%; overflow: hidden; padding: 0; color: var(--ink-950); border: 0; background: transparent; cursor: pointer; font-size: 14px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.task-main > span { display: block; margin-top: 2px; color: var(--ink-500); font-size: 12px; }
.task-main p { grid-column: 1/-1; margin: 8px 0 0; padding: 9px 10px; color: var(--ink-650); background: #f7f8fb; border-radius: 5px; font-size: 12px; }
.task-inline-type .inline-edit { width: 94px; }
.inline-date { min-width: 126px; font-variant-numeric: tabular-nums; }
.task-links { display: flex; gap: 4px; }
.task-links button { padding: 0; color: var(--primary); border: 0; background: transparent; cursor: pointer; font-size: 12px; }
.quick-log-panel { position: sticky; top: 82px; background: white; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.quick-log-panel.collapsed { width: 44px; justify-self: end; }
.quick-log-toggle { width: 100%; min-height: 36px; color: var(--ink-650); border: 0; border-bottom: 1px solid var(--line); background: var(--content-secondary); cursor: pointer; font-size: 12.5px; }
.quick-log-panel.collapsed .quick-log-toggle { width: 44px; min-height: 148px; writing-mode: vertical-rl; }
.quick-note { display: grid; gap: 10px; padding: 14px; }
.quick-note label { display: grid; gap: 5px; color: var(--ink-650); font-size: 12px; }
.quick-note textarea { min-height: 112px; padding: 10px; border: 1px solid var(--line-strong); border-radius: 7px; resize: vertical; }

.product-gallery { display: grid; grid-template-columns: repeat(4,minmax(230px,1fr)); gap: 14px; }
.product-card { min-width: 0; background: white; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: 0 2px 8px rgba(31,41,55,.035); cursor: pointer; }
.product-card:hover { transform: translateY(-2px); border-color: #c9d0dc; box-shadow: 0 9px 24px rgba(31,41,55,.09); }
.product-visual { height: 142px; display: grid; place-items: center; color: white; background: linear-gradient(145deg,#e3e3fa,#8f79cf); overflow: hidden; }
.product-visual img { width: 100%; height: 100%; object-fit: cover; }
.product-visual > span { width: 64px; height: 64px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.6); border-radius: 18px 6px 18px 6px; background: rgba(255,255,255,.18); font-size: 28px; font-weight: 800; }
.product-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; padding: 13px 13px 4px; }
.product-card-head span { color: var(--ink-500); font-size: 11px; }
.product-card-head h3 { margin: 3px 0 0; font-size: 15px; }
.stock-cell { min-width: 88px; padding: 7px 9px; color: white; border-radius: 5px; text-align: center; font-size: 11px; font-weight: 750; }
.stock-green { color: #216b4e; background: #dcefe6; }
.stock-amber { color: #825014; background: #fae2b8; }
.stock-red { color: #943b3b; background: #f7d8d8; }
.stock-slate { color: #505967; background: #e2e5ea; }
.product-card dl { display: grid; grid-template-columns: repeat(2,1fr); margin: 6px 13px 13px; border-top: 1px solid var(--line-soft); }
.product-card dl div { padding: 10px 6px 6px 0; }
.product-card dt { color: var(--ink-500); font-size: 11px; }
.product-card dd { margin: 3px 0 0; color: var(--ink-950); font-size: 12px; font-weight: 720; }
.product-card footer { min-height: 42px; display: flex; align-items: center; gap: 5px; padding: 0 10px 0 13px; border-top: 1px solid var(--line-soft); }
.product-card footer span { flex: 1; color: var(--ink-500); font-size: 11px; }
.product-card footer button { padding: 5px 7px; color: var(--primary); border: 0; background: transparent; cursor: pointer; font-size: 11px; }
.product-name-cell { display: flex; align-items: center; gap: 10px; }
.product-thumb { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; color: white; background: linear-gradient(145deg,#e1e1f7,#8867c9); border-radius: 7px; overflow: hidden; }
.product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-name-cell > span:last-child { min-width: 0; }

.drawer { width: min(600px,96vw); background: var(--canvas); }
.drawer-head { position: sticky; top: 0; z-index: 12; background: rgba(255,255,255,.97); border-bottom-color: var(--line); backdrop-filter: blur(10px); }
.record-drawer-head { min-height: 136px; align-items: flex-start; padding-top: 18px; }
.drawer-head h2 { font-size: 19px; }
.drawer-head-actions { display: flex; align-items: center; gap: 6px; }
.drawer-body { padding: 15px; }
.drawer-section,.drawer-summary,.next-step-box,.record-priority-grid { background: white; border: 1px solid var(--line); border-radius: 8px; }
.drawer-section { margin-bottom: 12px; padding: 14px; }
.drawer-footer { position: sticky; bottom: 0; z-index: 12; background: rgba(255,255,255,.97); border-top-color: var(--line); backdrop-filter: blur(10px); }
.drawer-action-footer { gap: 6px; overflow-x: auto; }
.drawer-action-footer .btn { flex: 0 0 auto; }
.next-step-box { border-left: 5px solid var(--blue); }
.next-step-box.overdue { border-left-color: var(--red); }
.next-step-box strong { font-size: 15px; }
.attachment-panel { border-radius: 8px; }

@media (max-width: 1600px) {
  .signal-metrics { grid-template-columns: repeat(3,1fr); }
  .product-gallery { grid-template-columns: repeat(3,minmax(220px,1fr)); }
  .my-work-row { grid-template-columns: 28px 32px minmax(210px,1fr) 76px 92px 112px 154px; }
  .work-actions .btn-quiet { display: none; }
}

@media (max-width: 1400px) {
  :root { --sidebar-w: 214px; }
  .main { padding: 20px 20px 34px; }
  .topbar { padding: 0 20px; }
  .page-subtitle { max-width: 610px; }
  .assist-grid { grid-template-columns: 1fr 1fr; }
  .assist-grid > :last-child { grid-column: 1/-1; }
  .product-gallery { grid-template-columns: repeat(3,minmax(210px,1fr)); }
  .task-workspace { grid-template-columns: minmax(650px,1fr) 270px; }
  .work-task-row { grid-template-columns: 28px 32px minmax(190px,1fr) 96px 126px 72px 62px; }
  .saved-hint { display: none; }
  .filter-search input { width: 220px; }
}

@media (max-width: 1180px) {
  .product-gallery { grid-template-columns: repeat(2,minmax(230px,1fr)); }
  .assist-grid { grid-template-columns: 1fr; }
  .assist-grid > :last-child { grid-column: auto; }
  .my-work-row { grid-template-columns: 26px 30px minmax(210px,1fr) 85px 105px 126px; }
  .work-kind { display: none; }
  .work-actions { display: none; }
  .task-workspace { grid-template-columns: 1fr; }
  .quick-log-panel { position: static; width: 100%; }
  .quick-log-panel.collapsed { width: 100%; }
  .quick-log-panel.collapsed .quick-log-toggle { width: 100%; min-height: 36px; writing-mode: horizontal-tb; }
}

/* Final shared interaction and readability rules. */
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn-primary { border-color: var(--primary); }
.btn:disabled,.btn[aria-disabled="true"] { color: var(--ink-350); background: var(--gray-soft); border-color: var(--line); box-shadow: none; cursor: not-allowed; opacity: .72; }
.btn-primary:disabled { color: #fff; background: #aaaadd; border-color: #aaaadd; }
.field-control:disabled,.field input:disabled,.field select:disabled,.field textarea:disabled { color: var(--ink-500); background: var(--gray-soft); cursor: not-allowed; }

.page-subtitle,.panel-subtitle,.saved-hint,.board-tools > label,.board-select,
.density-switch button,.group-count,.group-summary,.group-add,.cell-meta,.primary-cell small,
.risk-cell,.feedback-cell button,.followup-cell span,.work-panel-head p,.work-type,.task-type-icon,
.work-main span,.work-due small,.section-heading > span,.signal-metric p,.signal-metric button,
.stage-summary span,.workboard-kanban .kanban-head small,.stage-total,.stage-chip,.card-signal,
.card-account,.card-owner,.card-next span,.card-actions > button,.card-actions > details > summary,
.task-main > span,.task-main p,.task-links button,.quick-note label,.product-card-head span,
.stock-cell,.product-card dt,.product-card dd,.product-card footer span,.product-card footer button,
.costing-overview span,.costing-overview small,.costing-hero span,.costing-hero small,
.costing-income-grid span,.costing-aside h3,.costing-risk span,.costing-form-grid label,
.full-field,.costing-edit-table th,.snapshot-note,.attachment-heading p,.attachment-heading > span,
.attachment-picker span,.attachment-info span,.attachment-info small,.attachment-actions > button,
.attachment-actions > a { font-size: 12.5px; }

.data-table tbody tr:focus-within td { background: var(--primary-soft); }
.data-table th:first-child { background: var(--content-secondary); }
.panel,.board-group,.signal-metric,.product-card,.drawer-section,.drawer-summary,.next-step-box,
.record-priority-grid,.costing-section,.editor-section { border-color: var(--line); box-shadow: 0 1px 2px rgba(36,50,74,.025); }

/* Production dashboard and persisted settings center. */
.environment-badge { display:flex; gap:9px; align-items:center; margin:12px 10px 1px; padding-top:11px; border-top:1px solid var(--line); color:var(--ink-650); }
.environment-badge strong,.environment-badge small { display:block; }
.environment-badge strong { font-size:11px; }
.environment-badge small { color:var(--ink-500); font-size:10px; }
.environment-pill { display:inline-flex; align-items:center; height:34px; padding:0 10px; color:#825014; background:var(--amber-soft); border:1px solid #f0d6a7; border-radius:7px; font-size:12.5px; font-weight:700; }
.environment-pill.production { color:#216b4e; background:var(--green-soft); border-color:#c9e8d9; }
.avatar-large { width:46px; height:46px; font-size:18px; }

.dashboard-filterbar { display:flex; align-items:center; gap:12px; margin:0 0 14px; padding:10px 12px; background:var(--content-secondary); border:1px solid var(--line); border-radius:9px; }
.dashboard-filterbar > div { flex:1; min-width:0; }
.dashboard-filterbar > div strong,.dashboard-filterbar > div span { display:block; }
.dashboard-filterbar > div span { margin-top:2px; color:var(--ink-650); font-size:12.5px; }
.dashboard-filterbar label { display:flex; align-items:center; gap:7px; color:var(--ink-650); font-size:12.5px; }
.dashboard-filterbar select { min-width:112px; height:36px; }
.dashboard-kpis { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin-bottom:16px; }
.dashboard-kpi { position:relative; min-width:0; min-height:126px; display:flex; flex-direction:column; align-items:flex-start; padding:15px 14px 12px; overflow:hidden; text-align:left; border:1px solid var(--line); border-radius:9px; background:#fff; cursor:pointer; box-shadow:0 2px 6px rgba(36,50,74,.035); }
.dashboard-kpi:hover { transform:translateY(-1px); border-color:#cbd3e2; box-shadow:0 7px 18px rgba(36,50,74,.08); }
.dashboard-kpi .kpi-accent { position:absolute; inset:0 0 auto; height:4px; background:var(--blue); }
.dashboard-kpi .kpi-label { color:var(--ink-650); font-weight:700; }
.dashboard-kpi strong { max-width:100%; margin-top:10px; color:var(--ink-950); font-size:21px; line-height:1.15; overflow-wrap:anywhere; }
.dashboard-kpi small { margin-top:7px; color:var(--ink-500); font-size:12px; }
.dashboard-kpi em { margin-top:auto; color:var(--primary); font-size:12px; font-style:normal; font-weight:700; }
.dashboard-kpi.tone-danger { background:linear-gradient(180deg,var(--red-soft),#fff 54%); }.dashboard-kpi.tone-danger .kpi-accent{background:var(--red)}
.dashboard-kpi.tone-warning { background:linear-gradient(180deg,var(--amber-soft),#fff 54%); }.dashboard-kpi.tone-warning .kpi-accent{background:var(--amber)}
.dashboard-kpi.tone-purple { background:linear-gradient(180deg,var(--purple-soft),#fff 54%); }.dashboard-kpi.tone-purple .kpi-accent{background:var(--purple)}
.dashboard-kpi.tone-success { background:linear-gradient(180deg,var(--green-soft),#fff 54%); }.dashboard-kpi.tone-success .kpi-accent{background:var(--green)}
.dashboard-kpi.tone-teal { background:linear-gradient(180deg,var(--teal-soft),#fff 54%); }.dashboard-kpi.tone-teal .kpi-accent{background:var(--teal)}

.dashboard-charts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.dashboard-chart { min-width:0; min-height:285px; padding:15px; background:#fff; border:1px solid var(--line); border-radius:9px; }
.dashboard-chart > header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.dashboard-chart h2 { margin:2px 0 0; font-size:16px; }
.dashboard-chart > header small { color:var(--ink-500); font-size:12px; }
.chart-empty { min-height:205px; display:grid; place-items:center; align-content:center; gap:6px; color:var(--ink-500); text-align:center; background:var(--canvas); border:1px dashed var(--line-strong); border-radius:8px; }
.chart-empty strong { color:var(--ink-800); }.chart-empty span { font-size:12.5px; }
.funnel-chart { display:grid; gap:7px; }
.funnel-row { display:grid; grid-template-columns:94px minmax(80px,1fr) 35px 150px; align-items:center; gap:8px; min-height:29px; padding:0; border:0; background:transparent; cursor:pointer; text-align:left; }
.funnel-row:hover { color:var(--primary-dark); }.funnel-row > span { font-size:12.5px; font-weight:700; }
.funnel-row i { display:block; height:18px; border-radius:3px; background:var(--blue); }.funnel-row.stage-2 i{background:var(--teal)}.funnel-row.stage-3 i{background:var(--primary)}.funnel-row.stage-4 i{background:var(--purple)}.funnel-row.stage-5 i{background:var(--amber)}.funnel-row.stage-6 i{background:var(--green)}
.funnel-row > strong { text-align:right; }.funnel-row > small { color:var(--ink-500); font-size:11.5px; text-align:right; }
.trend-chart { height:196px; display:flex; align-items:flex-end; gap:9px; padding:10px 4px 0; border-bottom:1px solid var(--line); }
.trend-month { min-width:0; flex:1; text-align:center; }.trend-bars { height:150px; display:flex; align-items:flex-end; justify-content:center; gap:3px; }
.trend-bars i { width:min(13px,27%); min-height:0; border-radius:3px 3px 0 0; }.trend-bars .inquiry{background:var(--blue)}.trend-bars .quote{background:var(--purple)}.trend-bars .order{background:var(--green)}
.trend-month > strong,.trend-month > small { display:block; font-size:11px; }.trend-month > small{color:var(--ink-500)}
.chart-legend { display:flex; justify-content:center; gap:18px; margin-top:10px; color:var(--ink-650); font-size:11.5px; }.chart-legend span::before{content:"";display:inline-block;width:8px;height:8px;margin-right:5px;border-radius:2px;background:var(--blue)}.chart-legend .quote::before{background:var(--purple)}.chart-legend .order::before{background:var(--green)}
.amount-trend { max-height:222px; overflow:auto; }.amount-trend > div { display:grid; grid-template-columns:75px repeat(3,1fr); gap:8px; align-items:center; min-height:40px; padding:5px 0; border-bottom:1px solid var(--line-soft); }.amount-trend span{color:var(--ink-650);font-size:11.5px}
.rank-chart { display:grid; gap:8px; }.rank-chart button { display:grid; grid-template-columns:94px minmax(70px,1fr) 50px; gap:8px; align-items:center; min-height:30px; padding:0; border:0; background:transparent; cursor:pointer; text-align:left; }.rank-chart button:hover span{color:var(--primary-dark)}.rank-chart button > span{font-size:12.5px;font-weight:650}.rank-chart i{display:block;height:9px;background:var(--canvas-deep);border-radius:3px;overflow:hidden}.rank-chart b{display:block;height:100%;background:var(--teal)}.rank-chart button>strong{text-align:right}.stage-ranks b{background:var(--primary)}.stage-ranks button>strong small{display:block;color:var(--ink-500);font-size:9.5px;font-weight:500}
.overdue-chart { height:210px; display:flex; align-items:flex-end; gap:12px; padding:10px 10px 0; border-bottom:1px solid var(--line); }.overdue-chart button { height:100%; flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; padding:0; border:0; background:transparent; cursor:pointer; }.overdue-chart button span{order:3;margin-top:7px;font-size:11.5px}.overdue-chart button i{order:2;width:min(48px,80%);background:var(--amber);border-radius:5px 5px 0 0}.overdue-chart button strong{order:1;margin-bottom:5px}.overdue-chart .bucket-3{background:#e87543}.overdue-chart .bucket-4{background:var(--red)}

.settings-layout { display:grid; grid-template-columns:190px minmax(0,1fr); gap:14px; align-items:start; }
.settings-nav { position:sticky; top:78px; display:grid; padding:7px; background:var(--content-secondary); border:1px solid var(--line); border-radius:9px; }
.settings-nav a { min-height:38px; display:flex; align-items:center; padding:0 10px; border-radius:6px; color:var(--ink-650); font-size:13px; font-weight:650; }
.settings-nav a:hover { color:var(--primary-dark); background:var(--primary-soft); }
.settings-content { min-width:0; padding-bottom:80px; }
.settings-section { margin-bottom:12px; padding:17px; background:#fff; border:1px solid var(--line); border-radius:9px; scroll-margin-top:76px; }
.settings-section > header { margin-bottom:14px; }.settings-section h2{margin:0;font-size:17px}.settings-section header p{margin:4px 0 0;color:var(--ink-650);font-size:12.5px}
.settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px 15px; }
.settings-field { display:flex; flex-direction:column; gap:6px; color:var(--ink-800); font-size:12.5px; font-weight:700; }.settings-field-wide{grid-column:span 2}.settings-field small{color:var(--ink-500);font-weight:400}.settings-field textarea{height:auto;min-height:76px;padding:9px 10px;resize:vertical}
.profile-summary { grid-column:span 2; display:flex; align-items:center; gap:11px; padding:10px 12px; background:var(--primary-soft); border-radius:8px; }.profile-summary strong,.profile-summary small{display:block}.profile-summary small{margin-top:2px;color:var(--ink-650)}
.settings-inline-action { grid-column:span 2; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 12px; background:var(--canvas); border:1px solid var(--line); border-radius:8px; }.settings-inline-action strong,.settings-inline-action small{display:block}.settings-inline-action small{margin-top:2px;color:var(--ink-500);font-size:12px}
.settings-error { position:sticky; bottom:66px; z-index:8; margin:0; background:var(--red-soft); }
.settings-savebar { position:sticky; bottom:0; z-index:9; min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 13px; background:rgba(255,255,255,.96); border:1px solid var(--line); border-radius:9px; box-shadow:0 -8px 22px rgba(36,50,74,.07); backdrop-filter:blur(10px); }.settings-savebar strong,.settings-savebar small{display:block}.settings-savebar small{margin-top:2px;color:var(--ink-500);font-size:11.5px}

@media (max-width:1600px){.dashboard-kpis{grid-template-columns:repeat(3,1fr)}.dashboard-chart{min-height:270px}}
@media (max-width:1400px){.dashboard-chart{padding:13px}.funnel-row{grid-template-columns:82px minmax(65px,1fr) 30px 118px}.dashboard-filterbar>div span{max-width:460px}.settings-layout{grid-template-columns:165px minmax(0,1fr)}}
@media (max-width:1400px) and (min-width:1101px){.kanban{grid-template-columns:repeat(5,minmax(0,1fr));min-width:0}.kanban-list{padding:7px}.opportunity-card{padding:10px 9px 0}.opportunity-card .card-actions{margin-inline:-9px}.card-actions button{font-size:11px}}
@media (max-width:1100px){.dashboard-charts{grid-template-columns:1fr}.settings-layout{grid-template-columns:1fr}.settings-nav{position:static;grid-template-columns:repeat(3,1fr)}.settings-grid{grid-template-columns:1fr}.settings-field-wide,.profile-summary,.settings-inline-action{grid-column:span 1}}

/* 2026-07 customer prioritization and configurable business-option pass. */
.combo-field input { width: 100%; }
.combo-field small { display: block; margin-top: 5px; color: var(--ink-500); font-size: 11.5px; font-weight: 450; }
.account-toolbar .toolbar-actions { flex-wrap: wrap; justify-content: flex-end; }
.account-sort-control { display: flex; align-items: center; gap: 7px; color: var(--ink-650); font-size: 12px; white-space: nowrap; }
.account-sort-control select { min-width: 178px; height: 34px; font-size: 12px; }
.account-group .board-group-head { border-top: 3px solid var(--group-color); }
.account-group-active .board-group-head { background: linear-gradient(90deg, var(--blue-soft), #fbfdff 44%); }
.account-group-prospect .board-group-head { background: linear-gradient(90deg, var(--purple-soft), #fdfcff 44%); }
.account-group-paused .board-group-head { background: linear-gradient(90deg, var(--amber-soft), #fffdf9 44%); }
.account-group-dormant .board-group-head { background: linear-gradient(90deg, var(--gray-soft), #fbfcfe 44%); }
.account-group-active { box-shadow: 0 2px 10px rgba(63,127,181,.08); }
.account-group-prospect { box-shadow: 0 2px 10px rgba(136,103,201,.07); }
.account-row td:first-child { position: relative; }
.account-row td:first-child::before { content: ""; position: absolute; inset: 5px auto 5px 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--line-strong); }
.account-row-status-active td:first-child::before { background: var(--blue); }
.account-row-status-prospect td:first-child::before { background: var(--purple); }
.account-row-status-paused td:first-child::before { background: var(--amber); }
.account-row-status-dormant td:first-child::before { background: #8a93a3; }
.account-row-status-dormant td { color: #687184; }
.activity-cell { min-width: 150px; }
.activity-cell strong { color: var(--ink-950); font-weight: 720; }
.account-board-groups .group-count { color: var(--group-color); background: color-mix(in srgb, var(--group-color) 12%, white); font-weight: 750; }
.settings-section:nth-of-type(3) { border-top: 3px solid var(--purple); background: linear-gradient(180deg, #fdfcff, #fff 100px); }
.settings-section:nth-of-type(4) { border-top: 3px solid var(--blue); }
.settings-section:nth-of-type(5) { border-top: 3px solid var(--teal); }
.settings-section:nth-of-type(6) { border-top: 3px solid var(--amber); }
.settings-section:nth-of-type(7) { border-top: 3px solid var(--primary); }

@media (max-width: 1500px) {
  .account-toolbar { align-items: flex-start; }
  .account-toolbar .toolbar-actions { width: 100%; justify-content: space-between; }
}