:root {
  --crm-brand-key: #fa0a41;
  --crm-brand-strong: #c90831;
  --crm-brand-soft: #fff1f4;
  --crm-canvas: #f8f9fb;
  --crm-surface: #ffffff;
  --crm-surface-subtle: #f4f6f8;
  --crm-border: #e3e5e8;
  --crm-text: #1d2433;
  --crm-text-muted: #667085;
  --crm-text-faint: #98a2b3;
  --crm-success: #027a48;
  --crm-success-soft: #ecfdf3;
  --crm-warning: #b54708;
  --crm-warning-soft: #fffaeb;
  --crm-danger: #b42318;
  --crm-danger-soft: #fff4f2;
  --crm-info: #175cd3;
  --crm-info-soft: #eff8ff;
  --crm-radius-control: 8px;
  --crm-radius-card: 16px;
  --crm-shadow: 0 10px 30px rgb(16 24 40 / 6%);
  --crm-shadow-focus: 0 0 0 3px rgb(250 10 65 / 28%);
  --crm-font-sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--crm-canvas); }
body { margin: 0; color: var(--crm-text); background: var(--crm-canvas); font-family: var(--crm-font-sans); font-size: 14px; line-height: 1.5; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 100; padding: 8px 11px; color: white; border-radius: 7px; background: var(--crm-brand-strong); box-shadow: var(--crm-shadow); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
button, input, select, textarea { font: inherit; }
button, a, select, input { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; box-shadow: var(--crm-shadow-focus); }
a { color: inherit; text-decoration: none; }
small { font-size: 12px; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 248px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; border-right: 1px solid var(--crm-border); background: var(--crm-surface); padding: 22px 12px 15px; z-index: 20; }
.brand { display: flex; gap: 10px; align-items: center; padding: 0 10px 25px; }
.brand-mark { display: grid; width: 34px; height: 34px; border-radius: 11px; place-items: center; background: var(--crm-brand-strong); color: white; font-weight: 800; font-size: 19px; letter-spacing: -0.06em; box-shadow: 0 5px 12px rgb(201 8 49 / 20%); }
.brand-copy { display: grid; line-height: 1.2; }
.brand-copy strong { font-size: 16px; letter-spacing: .02em; }
.brand-copy small { margin-top: 3px; color: var(--crm-text-muted); font-size: 10px; white-space: nowrap; }
.primary-nav { display: grid; gap: 4px; }
.primary-nav a { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; min-height: 43px; padding: 0 11px; color: #535c6c; border-radius: 9px; font-weight: 650; transition: background .15s, color .15s; }
.primary-nav a > span:first-child { font-size: 18px; text-align: center; }
.primary-nav a:hover { color: var(--crm-text); background: var(--crm-surface-subtle); }
.primary-nav a.active { color: var(--crm-brand-strong); background: var(--crm-brand-soft); }
.nav-count { min-width: 20px; padding: 1px 6px; border-radius: 100px; background: #f0f2f5; color: var(--crm-text-muted); font-size: 11px; text-align: center; }
.active .nav-count { background: white; color: var(--crm-brand-strong); }
.sidebar-footer { margin-top: auto; padding: 12px 9px 0; border-top: 1px solid var(--crm-border); }
.demo-chip { display: inline-flex; align-items: center; gap: 5px; margin: 0 0 14px; padding: 3px 7px; color: var(--crm-success); background: var(--crm-success-soft); border: 1px solid #b7ebd0; border-radius: 100px; font-size: 10px; font-weight: 750; letter-spacing: .03em; }
.demo-chip span { font-size: 8px; }
.user-summary { display: flex; align-items: center; gap: 8px; }
.user-summary strong, .user-summary small { display: block; line-height: 1.35; }
.user-summary strong { font-size: 12px; }
.user-summary small { color: var(--crm-text-muted); font-size: 10px; }
.avatar { display: inline-grid; flex: 0 0 auto; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: #e7eaf0; color: #344054; font-size: 12px; font-weight: 750; }
.avatar-ink { color: white; background: #344054; }
.avatar-plum { color: #5925dc; background: #eee9fe; }
.avatar-teal { color: #087a7a; background: #d9f4ee; }
.avatar-amber { color: #a15c07; background: #fff0c8; }

.main-content { min-width: 0; }
.topbar { height: 66px; display: flex; align-items: center; gap: 14px; padding: 0 38px; background: var(--crm-surface); border-bottom: 1px solid var(--crm-border); }
.breadcrumb { flex: 1; color: var(--crm-text-muted); font-size: 13px; font-weight: 650; }
.topbar-actions { display: flex; align-items: center; gap: 15px; }
.today-label { color: var(--crm-text-muted); font-size: 12px; }
.help-button, .rail-toggle { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--crm-border); border-radius: 50%; color: var(--crm-text-muted); background: var(--crm-surface); font-weight: 800; }
.rail-toggle { display: none; width: 34px; height: 34px; border-radius: 8px; }
.page-root { padding: 32px 38px 48px; max-width: 1660px; margin: 0 auto; }
.page-heading { display: flex; gap: 18px; align-items: flex-start; justify-content: space-between; margin-bottom: 26px; }
.eyebrow { margin: 0 0 6px; color: var(--crm-brand-strong); font-size: 11px; font-weight: 800; letter-spacing: .1em; }
h1 { margin: 0; color: #182230; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; letter-spacing: -.045em; }
h2 { margin: 0; color: #182230; font-size: 17px; line-height: 1.35; letter-spacing: -.025em; }
h3 { margin: 0; font-size: 14px; }
.page-summary { max-width: 680px; margin: 8px 0 0; color: var(--crm-text-muted); }
.page-heading-actions { display: flex; align-items: center; gap: 8px; padding-top: 2px; }
.mock-note { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; color: var(--crm-text-muted); border: 1px solid var(--crm-border); border-radius: 7px; font-size: 11px; white-space: nowrap; }

.button { display: inline-flex; gap: 7px; align-items: center; justify-content: center; min-height: 38px; padding: 0 13px; border: 1px solid transparent; border-radius: var(--crm-radius-control); font-size: 13px; font-weight: 750; transition: background .15s, border .15s, transform .12s; }
.button:hover { transform: translateY(-1px); }
.button-primary { color: white; background: var(--crm-brand-strong); box-shadow: 0 4px 10px rgb(201 8 49 / 16%); }
.button-primary:hover { background: #aa0629; }
.button-secondary { color: #344054; background: white; border-color: #d0d5dd; }
.button-secondary:hover { background: #f9fafb; }
.button-quiet { min-height: 30px; padding: 0 8px; color: var(--crm-brand-strong); background: transparent; font-size: 12px; }
.button-quiet:hover { background: var(--crm-brand-soft); }
.button-small { min-height: 30px; padding: 0 9px; font-size: 11px; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; margin-bottom: 26px; }
.metric-card, .card { background: var(--crm-surface); border: 1px solid var(--crm-border); border-radius: var(--crm-radius-card); box-shadow: var(--crm-shadow); }
.metric-card { min-height: 121px; padding: 18px; }
.metric-label { display: flex; align-items: center; justify-content: space-between; color: var(--crm-text-muted); font-size: 12px; font-weight: 700; }
.metric-icon { display: grid; width: 27px; height: 27px; place-items: center; color: var(--crm-brand-strong); background: var(--crm-brand-soft); border-radius: 8px; font-size: 14px; }
.metric-value { margin-top: 12px; color: #182230; font-size: 27px; font-weight: 780; line-height: 1; letter-spacing: -.04em; }
.metric-note { margin-top: 8px; color: var(--crm-text-muted); font-size: 11px; }
.metric-note strong { color: var(--crm-success); }
.metric-note.warning strong { color: var(--crm-warning); }
.card { overflow: hidden; }
.card-head { display: flex; gap: 12px; align-items: center; justify-content: space-between; min-height: 62px; padding: 0 20px; border-bottom: 1px solid var(--crm-border); }
.card-head p { margin: 3px 0 0; color: var(--crm-text-muted); font-size: 12px; }
.card-body { padding: 20px; }

.split-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(285px, .85fr); gap: 20px; }
.work-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 16px; }
.work-column { min-width: 0; }
.column-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; padding: 0 2px; color: var(--crm-text-muted); font-size: 11px; font-weight: 800; letter-spacing: .05em; }
.column-label b { display: grid; min-width: 21px; height: 21px; padding: 0 6px; place-items: center; color: #475467; background: #f1f3f5; border-radius: 50%; font-size: 10px; }
.work-item { width: 100%; margin-bottom: 9px; padding: 13px; text-align: left; border: 1px solid var(--crm-border); border-radius: 11px; background: white; }
.work-item:hover { border-color: #c7cdd6; box-shadow: 0 5px 13px rgb(16 24 40 / 8%); }
.work-item.overdue { border-left: 3px solid var(--crm-danger); }
.work-item.today { border-left: 3px solid var(--crm-brand-key); }
.work-item.soon { border-left: 3px solid #7f56d9; }
.work-item-title { display: block; color: #344054; font-size: 12px; font-weight: 750; line-height: 1.45; }
.work-item-meta { display: flex; align-items: center; gap: 5px; margin-top: 8px; color: var(--crm-text-muted); font-size: 10px; }
.work-item-meta strong { color: var(--crm-danger); font-weight: 750; }
.mini-avatar { display: grid; width: 17px; height: 17px; place-items: center; color: white; background: #667085; border-radius: 50%; font-size: 8px; font-weight: 750; }
.handoff-list { display: grid; gap: 0; }
.handoff-row { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--crm-border); }
.handoff-row:last-child { border-bottom: 0; }
.handoff-row p { margin: 2px 0 0; color: var(--crm-text-muted); font-size: 11px; }
.status-icon { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 50%; font-weight: 800; }
.status-icon.amber { color: var(--crm-warning); background: var(--crm-warning-soft); }
.status-icon.green { color: var(--crm-success); background: var(--crm-success-soft); }
.empty-inline { padding: 18px 0; color: var(--crm-text-muted); font-size: 12px; }

.toolbar { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-bottom: 16px; }
.search-control { position: relative; flex: 1 1 250px; max-width: 410px; }
.search-control span { position: absolute; top: 8px; left: 11px; color: var(--crm-text-faint); }
.search-control input, .filter-select, .form-control { width: 100%; min-height: 38px; padding: 0 11px; color: #344054; border: 1px solid #d0d5dd; border-radius: var(--crm-radius-control); background: white; }
.search-control input { padding-left: 32px; }
.filter-select { width: auto; min-width: 132px; }
.results-note { margin-left: auto; color: var(--crm-text-muted); font-size: 11px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--crm-border); border-radius: var(--crm-radius-card); background: var(--crm-surface); box-shadow: var(--crm-shadow); }
.data-table { width: 100%; min-width: 1100px; border-collapse: collapse; text-align: left; }
.data-table th { padding: 11px 13px; color: var(--crm-text-muted); background: #fbfcfd; border-bottom: 1px solid var(--crm-border); font-size: 10px; font-weight: 800; letter-spacing: .035em; white-space: nowrap; }
.data-table td { height: 64px; padding: 10px 13px; border-bottom: 1px solid #edf0f2; color: #475467; font-size: 12px; vertical-align: middle; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr { cursor: default; transition: background .12s; }
.data-table tbody tr:hover { background: #fffafb; }
.opportunity-open { display: grid; width: 100%; padding: 3px 4px; color: inherit; text-align: left; border: 0; border-radius: 5px; background: transparent; }
.opportunity-open:hover .opportunity-name { color: var(--crm-brand-strong); }
.opportunity-open:focus-visible { outline: 2px solid var(--crm-brand-key); outline-offset: 2px; }
.opportunity-name { display: block; max-width: 220px; color: #344054; font-weight: 760; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.subtle { display: block; margin-top: 2px; color: var(--crm-text-muted); font-size: 10px; }
.person-cell { display: flex; gap: 7px; align-items: center; white-space: nowrap; }
.badge { display: inline-flex; align-items: center; max-width: 154px; min-height: 22px; padding: 2px 8px; border: 1px solid transparent; border-radius: 100px; color: #475467; background: #f2f4f7; font-size: 10px; font-weight: 760; white-space: nowrap; }
.badge-contact { color: #175cd3; background: #eff8ff; border-color: #b2ddff; }
.badge-qualify { color: #087a7a; background: #ecfdf3; border-color: #abefc6; }
.badge-handoff { color: #7a3e0a; background: #fffaeb; border-color: #fedf89; }
.badge-proposal { color: #6941c6; background: #f4f3ff; border-color: #d9d6fe; }
.badge-won { color: #027a48; background: #ecfdf3; border-color: #abefc6; }
.badge-target { color: #475467; background: #f2f4f7; border-color: #e4e7ec; }
.due { font-weight: 700; white-space: nowrap; }
.due.overdue { color: var(--crm-danger); }
.due.today { color: var(--crm-brand-strong); }
.due.soon { color: var(--crm-warning); }
.stage-select { min-width: 118px; min-height: 30px; padding: 0 21px 0 7px; color: #344054; border: 1px solid #d0d5dd; border-radius: 6px; background: white; font-size: 11px; font-weight: 650; }
.table-cell-select, .table-date-input { width: 100%; min-width: 112px; min-height: 30px; padding: 0 7px; color: #344054; border: 1px solid transparent; border-radius: 6px; background: transparent; font-size: 11px; font-weight: 650; }
.table-cell-select:hover, .table-date-input:hover, .table-cell-select:focus, .table-date-input:focus { border-color: #d0d5dd; background: white; }
.table-date-input { min-width: 132px; color: #475467; font-variant-numeric: tabular-nums; }
.table-date-input.overdue { color: #b42318; border-color: #fecdca; background: #fef3f2; }
.table-date-input.today { color: #9e0930; border-color: #fbc6d5; background: #fff1f4; }
.table-date-input.soon { color: #93370d; border-color: #fedf89; background: #fffaeb; }
.table-date-cell { display: grid; gap: 3px; }
.table-date-cell .table-date-input.is-invalid { color: #b42318; border-color: #f04438; background: #fff5f4; }
.table-date-cell small { color: #b42318; font-size: 9px; font-weight: 700; white-space: nowrap; }
.table-inline-feedback, .table-date-cell, .pipeline-stage-picker, [data-detail-stage], [data-detail-feedback] { position: relative; }
.table-inline-feedback.is-just-saved > select, .table-date-cell.is-just-saved .table-date-input, .pipeline-stage-picker.is-just-saved select { border-color: #6ce9a6; background: #ecfdf3; animation: field-saved-flash 3s ease-out; }
[data-detail-stage].is-just-saved .badge, [data-detail-feedback].is-just-saved { box-shadow: 0 0 0 3px rgb(18 183 106 / 20%); animation: field-saved-flash 3s ease-out; }
.inline-save-confirmation { position: absolute; top: -12px; right: 3px; z-index: 3; min-height: 18px; padding: 2px 6px; color: #027a48; border: 1px solid #abefc6; border-radius: 999px; background: #fff; box-shadow: 0 2px 4px rgb(16 24 40 / 9%); font-size: 10px; font-weight: 800; line-height: 1.35; white-space: nowrap; animation: inline-save-in 3s ease-out; }
@keyframes field-saved-flash { 0% { box-shadow: 0 0 0 0 rgb(18 183 106 / 0%); } 16% { box-shadow: 0 0 0 3px rgb(18 183 106 / 26%); } 100% { box-shadow: 0 0 0 0 rgb(18 183 106 / 0%); } }
@keyframes inline-save-in { 0%, 12% { opacity: 0; transform: translateY(4px); } 26%, 82% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) {
  .table-inline-feedback.is-just-saved > select, .table-date-cell.is-just-saved .table-date-input, .pipeline-stage-picker.is-just-saved select, [data-detail-stage].is-just-saved .badge, [data-detail-feedback].is-just-saved, .inline-save-confirmation { animation: none; }
}
.table-cell-button { display: grid; width: 100%; gap: 3px; padding: 4px 5px; color: #344054; text-align: left; border: 1px solid transparent; border-radius: 6px; background: transparent; font-size: 11px; font-weight: 650; }
.table-cell-button:hover { border-color: #d0d5dd; background: white; }
.table-cell-button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-cell-button small { color: var(--crm-brand-strong); font-size: 9px; font-weight: 750; }
.toolbar-clear { min-height: 30px; padding: 0 8px; color: #475467; border: 1px solid #d0d5dd; border-radius: 6px; background: white; font-size: 10px; font-weight: 750; }
.toolbar-clear:hover { color: var(--crm-brand-strong); border-color: #fbc6d5; background: var(--crm-brand-soft); }
.filter-empty td { height: auto; padding: 0; background: #fffdfd; }
.filter-empty td > * { margin: 0 8px 0 0; }
.filter-empty td { color: var(--crm-text-muted); font-size: 11px; }
.filter-empty td::before { display: inline-block; width: 18px; height: 18px; margin: 14px 9px 14px 14px; color: var(--crm-warning); background: var(--crm-warning-soft); border-radius: 50%; content: "!"; font-weight: 800; line-height: 18px; text-align: center; }

.pipeline-scroll { overflow-x: auto; margin: 0 -38px; padding: 0 38px 16px; }
.kanban { display: grid; grid-template-columns: repeat(10, 266px); gap: 13px; align-items: start; min-width: max-content; }
.kanban-column { min-height: 526px; padding: 10px; border: 1px solid var(--crm-border); border-radius: 13px; background: #f1f3f5; }
.kanban-head { display: flex; gap: 7px; align-items: center; justify-content: space-between; margin: 1px 2px 12px; }
.kanban-head h2 { max-width: 170px; font-size: 12px; }
.kanban-count { display: grid; width: 22px; height: 22px; place-items: center; color: var(--crm-text-muted); background: white; border-radius: 50%; font-size: 10px; font-weight: 800; }
.pipeline-card { width: 100%; margin-bottom: 9px; padding: 14px; text-align: left; border: 1px solid var(--crm-border); border-radius: 11px; background: white; box-shadow: 0 2px 3px rgb(16 24 40 / 3%); }
.pipeline-card.is-selected { border-color: #f8b4c5; background: #fff8fa; box-shadow: inset 3px 0 0 var(--crm-brand-key), 0 1px 2px rgb(16 24 40 / 4%); }
.pipeline-card:hover { border-color: #c5ccd5; box-shadow: 0 7px 16px rgb(16 24 40 / 8%); }
.pipeline-card:focus-visible { outline: 2px solid var(--crm-brand-key); outline-offset: 2px; }
.pipeline-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.pipeline-card-open { min-width: 0; padding: 0; color: inherit; text-align: left; border: 0; background: transparent; }
.pipeline-card h3 { color: #344054; font-size: 12px; line-height: 1.45; }
.pipeline-card-open:hover h3 { color: var(--crm-brand-strong); }
.pipeline-card-open:focus-visible { outline: 2px solid var(--crm-brand-key); outline-offset: 3px; border-radius: 4px; }
.pipeline-card .account-name { display: block; margin-top: 4px; color: var(--crm-text-muted); font-size: 10px; }
.card-amount { margin: 15px 0 10px; color: #182230; font-size: 16px; font-weight: 780; letter-spacing: -.03em; }
.pipeline-card-footer { display: flex; gap: 5px; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px solid #eef0f2; color: var(--crm-text-muted); font-size: 10px; }
.pipeline-card-footer > span { display: flex; gap: 5px; align-items: center; }
.pipeline-card:focus-within { border-color: #f99ab4; box-shadow: 0 0 0 3px rgb(250 10 65 / 12%); }
.pipeline-stage-picker { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 6px; align-items: center; margin-top: 10px; color: var(--crm-text-muted); font-size: 9px; font-weight: 750; }
.pipeline-stage-picker select { min-width: 0; min-height: 27px; padding: 0 5px; color: #344054; border: 1px solid #d0d5dd; border-radius: 5px; background: white; font-size: 9px; }
.pipeline-readonly-note { display: block; margin-top: 10px; color: var(--crm-text-muted); font-size: 9px; }
.lane-action { width: 100%; min-height: 28px; margin-top: 4px; padding: 0 7px; color: var(--crm-brand-strong); background: var(--crm-brand-soft); border: 0; border-radius: 6px; font-size: 10px; font-weight: 760; }
.lane-action:hover { background: #ffe3ea; }
.lane-empty { padding: 27px 7px; color: var(--crm-text-faint); text-align: center; font-size: 11px; }
.pipeline-footer-note { margin-top: 8px; color: var(--crm-text-muted); font-size: 11px; }

.account-hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .9fr); gap: 18px; margin-bottom: 20px; padding: 24px; border: 1px solid var(--crm-border); border-radius: var(--crm-radius-card); background: linear-gradient(110deg, white 0%, #fff8fa 100%); box-shadow: var(--crm-shadow); }
.account-identity { display: flex; gap: 15px; align-items: flex-start; }
.account-logo { display: grid; flex: 0 0 auto; width: 52px; height: 52px; place-items: center; color: white; background: linear-gradient(135deg, #1d2939 0%, #475467 100%); border-radius: 15px; font-size: 20px; font-weight: 800; }
.account-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.account-title-row h1 { font-size: 25px; }
.account-meta { margin: 7px 0 0; color: var(--crm-text-muted); font-size: 12px; }
.account-hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; align-self: center; }
.account-hero-stats div { padding: 3px 13px; border-left: 1px solid var(--crm-border); }
.account-hero-stats div:first-child { border-left: 0; }
.account-hero-stats strong, .account-hero-stats small { display: block; }
.account-hero-stats strong { color: #182230; font-size: 17px; letter-spacing: -.025em; }
.account-hero-stats small { margin-top: 3px; color: var(--crm-text-muted); font-size: 10px; }
.account-layout { display: grid; grid-template-columns: minmax(0, 1.36fr) minmax(300px, .88fr); gap: 20px; }
.stack { display: grid; gap: 20px; }
.summary-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.summary-list div { padding: 12px 0; border-bottom: 1px solid var(--crm-border); }
.summary-list div:nth-last-child(-n+2) { border-bottom: 0; }
.summary-list dt { color: var(--crm-text-muted); font-size: 10px; font-weight: 700; }
.summary-list dd { margin: 4px 0 0; color: #344054; font-size: 12px; font-weight: 650; }
.relationship-map { position: relative; min-height: 226px; overflow: hidden; padding: 17px; background: radial-gradient(circle at 50% 35%, #fff1f4 0, #fff 43%, #fff 100%); }
.org-root, .org-node { position: relative; z-index: 2; display: inline-flex; gap: 7px; align-items: center; padding: 7px 10px; border: 1px solid var(--crm-border); border-radius: 8px; background: white; box-shadow: 0 3px 8px rgb(16 24 40 / 5%); font-size: 11px; font-weight: 750; }
.org-root { margin-left: calc(50% - 62px); color: #344054; }
.org-branches { position: relative; display: flex; justify-content: space-between; margin-top: 61px; }
.org-branches::before { content: ""; position: absolute; right: 17%; left: 17%; top: -26px; height: 27px; border-top: 1px solid #cbd5e1; border-right: 1px solid #cbd5e1; border-left: 1px solid #cbd5e1; }
.org-branches::after { content: ""; position: absolute; top: -61px; left: 50%; width: 1px; height: 35px; background: #cbd5e1; }
.org-node::before { content: ""; position: absolute; top: -35px; left: 50%; width: 1px; height: 35px; background: #cbd5e1; }
.org-node.promoter { color: #6941c6; border-color: #d9d6fe; background: #f9f8ff; }
.org-node.decision { color: #027a48; border-color: #abefc6; background: #f6fef9; }
.org-node.user { color: #b54708; border-color: #fedf89; background: #fffaeb; }
.contact-list { display: grid; gap: 0; }
.contact-row { display: grid; grid-template-columns: 31px 1fr auto; gap: 9px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--crm-border); }
.contact-row:last-child { border-bottom: 0; }
.contact-row strong, .contact-row small { display: block; }
.contact-row strong { color: #344054; font-size: 12px; }
.contact-row small { margin-top: 1px; color: var(--crm-text-muted); font-size: 10px; }
.role-label { color: var(--crm-text-muted); font-size: 10px; text-align: right; }
.account-opportunities { display: grid; gap: 9px; }
.account-op-row { display: grid; grid-template-columns: 1fr auto; gap: 9px; align-items: center; width: 100%; padding: 13px; text-align: left; border: 1px solid var(--crm-border); border-radius: 9px; background: white; }
.account-op-row:hover { border-color: #c4cad3; background: #fffafb; }
.account-op-row strong, .account-op-row small { display: block; }
.account-op-row strong { color: #344054; font-size: 12px; }
.account-op-row small { margin-top: 3px; color: var(--crm-text-muted); font-size: 10px; }
.timeline { display: grid; gap: 0; }
.timeline-item { position: relative; display: grid; grid-template-columns: 72px 1fr; gap: 10px; padding: 0 0 15px; }
.timeline-item::before { content: ""; position: absolute; top: 19px; bottom: -2px; left: 77px; width: 1px; background: #e4e7ec; }
.timeline-item:last-child::before { display: none; }
.timeline-time { color: var(--crm-text-muted); font-size: 10px; text-align: right; }
.timeline-content { position: relative; padding-left: 15px; color: #475467; font-size: 11px; }
.timeline-content::before { content: ""; position: absolute; top: 3px; left: -4px; width: 8px; height: 8px; border: 2px solid white; border-radius: 50%; background: var(--crm-brand-key); box-shadow: 0 0 0 1px var(--crm-brand-key); }
.timeline-content strong { display: block; color: #344054; font-size: 11px; }
.timeline-content p { margin: 2px 0 0; }

.gantt-card { border: 1px solid var(--crm-border); border-radius: var(--crm-radius-card); overflow: auto; background: white; box-shadow: var(--crm-shadow); }
.gantt-head, .gantt-row { display: grid; grid-template-columns: 270px minmax(730px, 1fr); min-width: 1000px; }
.gantt-head { color: var(--crm-text-muted); border-bottom: 1px solid var(--crm-border); background: #fbfcfd; font-size: 10px; font-weight: 800; }
.gantt-label-head { padding: 12px 17px; border-right: 1px solid var(--crm-border); }
.date-header { display: grid; grid-template-columns: repeat(31, minmax(24px, 1fr)); }
.date-header span { padding: 12px 2px; border-right: 1px solid #f0f2f4; text-align: center; }
.date-header span.weekend { color: var(--crm-danger); background: #fffafb; }
.gantt-label { display: flex; align-items: center; gap: 10px; min-height: 72px; padding: 11px 17px; border-right: 1px solid var(--crm-border); border-bottom: 1px solid #edf0f2; }
.gantt-label strong, .gantt-label small { display: block; }
.gantt-label strong { color: #344054; font-size: 12px; }
.gantt-label small { margin-top: 2px; color: var(--crm-text-muted); font-size: 10px; }
.gantt-track { position: relative; display: grid; grid-template-columns: repeat(31, minmax(24px, 1fr)); min-height: 72px; overflow: hidden; border-bottom: 1px solid #edf0f2; background-image: linear-gradient(to right, #f0f2f4 1px, transparent 1px); background-size: calc(100% / 31) 100%; }
.gantt-track::after { content: ""; position: absolute; top: 0; bottom: 0; left: 32.26%; width: 2px; background: var(--crm-brand-key); opacity: .85; }
.gantt-bar { z-index: 1; align-self: center; height: 28px; padding: 5px 8px; color: white; border-radius: 5px; background: #344054; font-size: 10px; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 2px 5px rgb(16 24 40 / 20%); }
.gantt-bar.brand { background: var(--crm-brand-strong); }
.gantt-bar.teal { background: #087a7a; }
.gantt-legend { display: flex; flex-wrap: wrap; gap: 14px; padding: 13px 17px; color: var(--crm-text-muted); font-size: 10px; }
.gantt-legend span { display: flex; gap: 5px; align-items: center; }
.legend-square { width: 10px; height: 10px; border-radius: 2px; background: var(--crm-brand-strong); }
.legend-square.teal { background: #087a7a; }
.legend-line { width: 2px; height: 13px; background: var(--crm-brand-key); }
.link-status-panel { margin-top: 19px; }
.delivery-status-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; padding: 16px; }
.delivery-status { padding: 13px; border: 1px solid var(--crm-border); border-radius: 10px; }
.delivery-status h3 { color: #344054; font-size: 12px; }
.delivery-status p { margin: 5px 0 0; color: var(--crm-text-muted); font-size: 10px; }
.delivery-status .badge { margin-top: 10px; }

.drawer-backdrop { position: fixed; inset: 0; z-index: 40; background: rgb(16 24 40 / 30%); backdrop-filter: blur(2px); }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 41; display: flex; flex-direction: column; width: min(580px, 100vw); background: white; box-shadow: -18px 0 44px rgb(16 24 40 / 18%); }
.drawer-head { display: flex; gap: 13px; align-items: flex-start; justify-content: space-between; padding: 26px 25px 19px; border-bottom: 1px solid var(--crm-border); }
.drawer-head h2 { margin-top: 5px; font-size: 20px; }
.drawer-head p { margin: 6px 0 0; color: var(--crm-text-muted); font-size: 12px; }
.icon-close { display: grid; width: 33px; height: 33px; place-items: center; color: var(--crm-text-muted); border: 1px solid var(--crm-border); border-radius: 8px; background: white; font-size: 19px; }
.drawer-scroll { overflow: auto; padding: 22px 25px 38px; }
.drawer-section { margin-bottom: 26px; }
.drawer-section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }
.drawer-section-title h3 { color: #344054; font-size: 12px; }
.detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--crm-border); border-radius: 10px; overflow: hidden; }
.detail-grid div { min-height: 68px; padding: 11px; border-right: 1px solid var(--crm-border); border-bottom: 1px solid var(--crm-border); }
.detail-grid div:nth-child(even) { border-right: 0; }
.detail-grid div:nth-last-child(-n+2) { border-bottom: 0; }
.detail-grid small, .detail-grid strong { display: block; }
.detail-grid small { color: var(--crm-text-muted); font-size: 10px; }
.detail-grid strong { margin-top: 4px; color: #344054; font-size: 12px; }
.detail-callout { padding: 13px; color: #475467; border-left: 3px solid var(--crm-brand-key); border-radius: 0 8px 8px 0; background: #fff8fa; font-size: 11px; }
.detail-callout strong { color: #344054; }
.activity-entry { display: grid; grid-template-columns: 1fr 92px; gap: 8px; margin-bottom: 9px; }
.activity-entry .form-control { min-height: 37px; }
.activity-entry select.form-control { padding: 0 5px; }
.link-card { padding: 13px; border: 1px solid var(--crm-border); border-radius: 10px; background: #fbfcfd; }
.link-card strong, .link-card small { display: block; }
.link-card strong { color: #344054; font-size: 12px; }
.link-card small { margin-top: 2px; color: var(--crm-text-muted); font-size: 10px; }

.dialog-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; overflow: auto; padding: 16px; background: rgb(16 24 40 / 38%); }
.dialog { display: flex; flex-direction: column; width: min(450px, 100%); max-block-size: calc(100dvh - 32px); overflow: hidden; border-radius: 15px; background: white; box-shadow: 0 20px 45px rgb(16 24 40 / 25%); }
.dialog-head { padding: 21px 22px 0; }
.dialog-head h2 { font-size: 18px; }
.dialog-head p { margin: 7px 0 0; color: var(--crm-text-muted); font-size: 12px; }
.dialog-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 19px 22px; }
.form-label { display: block; margin: 0 0 6px; color: #344054; font-size: 11px; font-weight: 750; }
.form-hint { margin: 5px 0 0; color: var(--crm-text-muted); font-size: 10px; }
.form-control.is-invalid { border-color: #f04438; background: #fff5f4; }
.modal-validation { margin: 0 0 14px; padding: 9px 10px; color: #b42318; border: 1px solid #fecdca; border-radius: 7px; background: #fef3f2; font-size: 11px; font-weight: 700; line-height: 1.5; }
.dialog-foot { display: flex; justify-content: flex-end; gap: 9px; padding: 14px 22px; border-top: 1px solid var(--crm-border); background: #fbfcfd; }
.about-grid { display: grid; gap: 10px; }
.about-item { padding: 11px; border: 1px solid var(--crm-border); border-radius: 8px; color: #475467; font-size: 11px; }
.about-item strong { color: #344054; }
.dialog-help { width: min(590px, 100%); }
.shortcut-guide { margin-top: 18px; padding-top: 17px; border-top: 1px solid var(--crm-border); }
.shortcut-guide h3 { color: #344054; font-size: 12px; }
.shortcut-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.shortcut-grid > div { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px; align-items: start; padding: 8px; border: 1px solid #eaecf0; border-radius: 7px; background: #fbfcfd; }
.shortcut-grid kbd { display: inline-flex; min-height: 21px; align-items: center; padding: 0 5px; color: #475467; border: 1px solid #d0d5dd; border-bottom-width: 2px; border-radius: 4px; background: white; box-shadow: 0 1px 0 #eaecf0; font-family: var(--crm-font-sans); font-size: 9px; font-weight: 800; white-space: nowrap; }
.shortcut-grid span { display: grid; gap: 1px; min-width: 0; }
.shortcut-grid strong { color: #344054; font-size: 10px; line-height: 1.35; }
.shortcut-grid small { color: #667085; font-size: 9px; line-height: 1.4; }

.toast-region { position: fixed; right: 21px; bottom: 20px; z-index: 80; display: grid; gap: 8px; }
.toast { display: flex; gap: 8px; align-items: center; width: min(360px, calc(100vw - 42px)); padding: 11px 13px; color: #344054; border: 1px solid #abefc6; border-radius: 10px; background: white; box-shadow: 0 10px 30px rgb(16 24 40 / 16%); font-size: 12px; animation: toast-in .22s ease-out; }
.toast::before { content: "✓"; display: grid; width: 20px; height: 20px; place-items: center; color: var(--crm-success); background: var(--crm-success-soft); border-radius: 50%; font-weight: 800; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1180px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-grid, .account-layout { grid-template-columns: 1fr; }
  .account-hero { grid-template-columns: 1fr; }
  .account-hero-stats { max-width: 530px; }
}
@media (max-width: 1023px) {
  .app-shell { grid-template-columns: 65px minmax(0, 1fr); }
  .sidebar { padding-right: 8px; padding-left: 8px; }
  .brand { justify-content: center; padding: 0 0 25px; }
  .brand-copy, .primary-nav a > span:nth-child(2), .nav-count, .sidebar-footer .demo-chip, .user-summary > span:not(.avatar) { display: none; }
  .primary-nav a { display: grid; grid-template-columns: 1fr; place-items: center; padding: 0; }
  .sidebar-footer { display: grid; place-items: center; padding-right: 0; padding-left: 0; }
  .topbar { padding: 0 26px; }
  .page-root { padding: 28px 26px 44px; }
  .pipeline-scroll { margin-right: -26px; margin-left: -26px; padding-right: 26px; padding-left: 26px; }
}
@media (max-width: 767px) {
  .app-shell { display: block; }
  .sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: 238px; height: auto; padding: 20px 12px; transform: translateX(-105%); transition: transform .2s ease; box-shadow: 14px 0 30px rgb(16 24 40 / 15%); }
  .sidebar.open { transform: translateX(0); }
  .brand { justify-content: flex-start; padding: 0 10px 25px; }
  .brand-copy, .primary-nav a > span:nth-child(2), .nav-count, .sidebar-footer .demo-chip, .user-summary > span:not(.avatar) { display: initial; }
  .primary-nav a { display: grid; grid-template-columns: 22px 1fr auto; place-items: initial; padding: 0 11px; }
  .sidebar-footer { display: block; padding-right: 9px; padding-left: 9px; }
  .rail-toggle { display: grid; }
  .topbar { height: 58px; padding: 0 16px; }
  .today-label { display: none; }
  .page-root { padding: 23px 16px 36px; }
  .page-heading { display: block; margin-bottom: 20px; }
  .page-heading-actions { margin-top: 14px; }
  .mock-note { white-space: normal; }
  .metric-grid { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
  .metric-card { min-height: 104px; padding: 14px; }
  .metric-value { font-size: 23px; }
  .work-columns { grid-template-columns: 1fr; padding: 13px; }
  .work-column { padding-bottom: 11px; border-bottom: 1px solid var(--crm-border); }
  .work-column:last-child { padding-bottom: 0; border-bottom: 0; }
  .toolbar { gap: 7px; }
  .search-control { order: -1; flex-basis: 100%; max-width: none; }
  .results-note { display: none; }
  .table-wrap { border-radius: 10px; }
  .data-table { min-width: 700px; }
  .data-table th:nth-child(3), .data-table td:nth-child(3), .data-table th:nth-child(5), .data-table td:nth-child(5), .data-table th:nth-child(7), .data-table td:nth-child(7), .data-table th:nth-child(8), .data-table td:nth-child(8) { display: none; }
  .pipeline-scroll { margin-right: -16px; margin-left: -16px; padding-right: 16px; padding-left: 16px; }
  .account-hero { padding: 18px; }
  .account-hero-stats { grid-template-columns: 1fr 1fr 1fr; }
  .account-hero-stats div { padding: 3px 8px; }
  .summary-list { grid-template-columns: 1fr; }
  .summary-list div:nth-last-child(2) { border-bottom: 1px solid var(--crm-border); }
  .relationship-map { min-height: 260px; }
  .org-branches { gap: 7px; }
  .org-node { max-width: 30%; justify-content: center; padding: 7px 5px; font-size: 10px; text-align: center; }
  .delivery-status-list { grid-template-columns: 1fr; }
  .drawer-head, .drawer-scroll { padding-right: 18px; padding-left: 18px; }
  .drawer { width: 100%; }
}

/* Monday-style board shell + TailAdmin-inspired three-pane workspace */
.app-shell { grid-template-columns: 248px minmax(0, 1fr) 388px; align-items: start; transition: grid-template-columns .2s ease; }
.app-shell.sidebar-collapsed { grid-template-columns: 66px minmax(0, 1fr) 388px; }
.app-shell.detail-closed { grid-template-columns: 248px minmax(0, 1fr) 0; }
.app-shell.sidebar-collapsed.detail-closed { grid-template-columns: 66px minmax(0, 1fr) 0; }
.sidebar { grid-column: 1; }
.main-content { grid-column: 2; min-width: 0; }
.work-panel { position: sticky; top: 0; grid-column: 3; width: 388px; height: 100vh; overflow: hidden; border-left: 1px solid var(--crm-border); background: var(--crm-surface); transition: width .2s ease, opacity .16s ease; z-index: 15; }
.detail-closed .work-panel { width: 0; border-left-color: transparent; opacity: 0; pointer-events: none; }
#work-panel-content { min-width: 388px; }
.detail-toggle { display: inline-flex; min-height: 31px; gap: 5px; align-items: center; padding: 0 9px; color: var(--crm-text-muted); border: 1px solid var(--crm-border); border-radius: 7px; background: white; font-size: 11px; font-weight: 750; }
.detail-toggle:hover { color: var(--crm-text); background: var(--crm-surface-subtle); }
.rail-toggle { display: grid; }
.page-root { max-width: none; padding: 27px 30px 45px; }
.topbar { position: sticky; top: 0; z-index: 12; height: 57px; padding: 0 30px; }
.page-heading { margin-bottom: 20px; }
.page-heading h1 { font-size: 26px; }
.page-summary { max-width: 760px; font-size: 13px; }
.app-shell.sidebar-collapsed .sidebar { padding-right: 8px; padding-left: 8px; }
.app-shell.sidebar-collapsed .brand { justify-content: center; padding-right: 0; padding-left: 0; }
.app-shell.sidebar-collapsed .brand-copy, .app-shell.sidebar-collapsed .primary-nav a > span:nth-child(2), .app-shell.sidebar-collapsed .nav-count, .app-shell.sidebar-collapsed .sidebar-footer .demo-chip, .app-shell.sidebar-collapsed .user-summary > span:not(.avatar) { display: none; }
.app-shell.sidebar-collapsed .primary-nav a { grid-template-columns: 1fr; place-items: center; padding: 0; }
.app-shell.sidebar-collapsed .sidebar-footer { display: grid; place-items: center; padding-right: 0; padding-left: 0; }

.board-shell { overflow: hidden; margin-bottom: 0; border: 1px solid var(--crm-border); border-radius: var(--crm-radius-card) var(--crm-radius-card) 0 0; background: white; box-shadow: var(--crm-shadow); }
.board-header { display: flex; align-items: center; justify-content: space-between; min-height: 71px; padding: 16px 20px 12px; }
.board-title-line { display: flex; gap: 8px; align-items: center; }
.board-title-line h1 { font-size: 22px; letter-spacing: -.035em; }
.board-header p { margin: 3px 0 0; color: var(--crm-text-muted); font-size: 11px; }
.board-context-note { display: inline-flex; margin-top: 6px; padding: 3px 6px; color: var(--crm-text-muted); border: 1px solid var(--crm-border); border-radius: 5px; background: #fbfcfd; font-size: 9px; font-weight: 700; }
.board-privacy { padding: 2px 6px; color: var(--crm-text-muted); border: 1px solid var(--crm-border); border-radius: 4px; background: #fbfcfd; font-size: 9px; font-weight: 700; }
.board-members { display: flex; align-items: center; }
.board-members .avatar { width: 26px; height: 26px; margin-left: -5px; border: 2px solid white; font-size: 10px; }
.board-members .avatar:first-child { margin-left: 0; }
.member-more { display: grid; width: 26px; height: 26px; margin-left: 3px; place-items: center; color: var(--crm-text-muted); border: 0; border-radius: 50%; background: #f2f4f7; font-size: 9px; font-weight: 750; }
.view-tabs { display: flex; min-height: 40px; gap: 5px; padding: 0 13px; border-top: 1px solid #f0f2f4; }
.view-tabs a { position: relative; display: inline-flex; gap: 6px; align-items: center; padding: 0 10px; color: var(--crm-text-muted); font-size: 11px; font-weight: 700; }
.view-tabs a:hover { color: #344054; background: #fafafa; }
.view-tabs a.active { color: var(--crm-brand-strong); }
.view-tabs a.active::after { position: absolute; right: 9px; bottom: -1px; left: 9px; height: 2px; background: var(--crm-brand-key); content: ""; }
.context-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 54px; padding: 8px 13px; border: 1px solid var(--crm-border); border-top: 0; background: white; box-shadow: var(--crm-shadow); }
.context-toolbar .search-control { flex-basis: 230px; max-width: 350px; }
.context-toolbar .filter-select { min-height: 34px; font-size: 11px; }
.context-toolbar .results-note { margin-left: auto; }
.saved-views { display: inline-flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.saved-views > span { margin-right: 2px; color: var(--crm-text-muted); font-size: 10px; font-weight: 750; }
.saved-view { display: inline-flex; gap: 6px; align-items: center; min-height: 30px; padding: 0 8px; color: #475467; border: 1px solid transparent; border-radius: 6px; background: transparent; font-size: 10px; font-weight: 750; white-space: nowrap; }
.saved-view:hover { border-color: #e4e7ec; background: #f9fafb; }
.saved-view.active { color: var(--crm-brand-strong); border-color: #fbc6d5; background: var(--crm-brand-soft); }
.saved-view b { display: inline-grid; min-width: 17px; height: 17px; padding: 0 4px; place-items: center; color: inherit; border-radius: 999px; background: rgb(255 255 255 / 70%); font-size: 9px; }
.toolbar-divider { width: 1px; height: 22px; background: var(--crm-border); }
.table-state { display: grid; place-items: start; align-content: center; min-height: 330px; margin-top: 0; padding: 42px; border: 1px solid var(--crm-border); border-top: 0; border-radius: 0 0 var(--crm-radius-card) var(--crm-radius-card); background: white; box-shadow: var(--crm-shadow); }
.table-state .eyebrow { margin: 0 0 7px; }
.table-state h2 { margin: 0; color: #182230; font-size: 18px; letter-spacing: -.02em; }
.table-state p:not(.eyebrow) { max-width: 510px; margin: 8px 0 18px; color: var(--crm-text-muted); font-size: 12px; line-height: 1.65; }
.table-state-conflict { border-color: #fedf89; background: linear-gradient(180deg, #fffdf7 0%, #fff 55%); }
.table-state-denied { border-color: #fecdca; background: linear-gradient(180deg, #fff8f7 0%, #fff 55%); }
.table-state-loading { background: linear-gradient(115deg, #fff 22%, #f8fafc 38%, #fff 54%); background-size: 220% 100%; animation: table-state-loading 1.7s ease-in-out infinite; }
@keyframes table-state-loading { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.board-group { overflow: hidden; border: 1px solid var(--crm-border); border-top: 0; border-radius: 0 0 var(--crm-radius-card) var(--crm-radius-card); background: white; box-shadow: var(--crm-shadow); }
.board-group-header { display: flex; justify-content: space-between; align-items: center; min-height: 36px; padding: 0 14px; color: var(--crm-text-muted); background: #fbfcfd; border-bottom: 1px solid var(--crm-border); font-size: 10px; }
.board-group-header > div { display: inline-flex; gap: 7px; align-items: center; color: #475467; }
.board-group-header strong { font-size: 11px; }
.work-actor-control { display: inline-flex; gap: 7px; align-items: center; color: var(--crm-text-muted); font-size: 10px; font-weight: 700; }
.work-actor-control .filter-select { min-width: 128px; }
.group-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--crm-brand-key); }
.group-dot.attention { background: var(--crm-warning); }
.board-group .table-wrap { border: 0; border-radius: 0; box-shadow: none; }
.table-wrap-cards { overflow: visible; }
.opportunity-card-list { display: grid; gap: 9px; padding: 11px; background: #fbfcfd; }
.opportunity-mobile-card { display: grid; gap: 11px; width: 100%; padding: 14px; color: #475467; border: 1px solid var(--crm-border); border-radius: 10px; background: white; text-align: left; box-shadow: 0 1px 2px rgb(16 24 40 / 4%); }
.opportunity-mobile-card:hover { border-color: #fbc6d5; background: #fffafb; }
.opportunity-mobile-card.is-selected { border-color: #f8b4c5; box-shadow: inset 3px 0 0 var(--crm-brand-key), 0 1px 2px rgb(16 24 40 / 4%); }
.opportunity-mobile-card-head { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; }
.opportunity-mobile-card-head > span { min-width: 0; }
.opportunity-mobile-card-head strong, .opportunity-mobile-card-head small { display: block; }
.opportunity-mobile-card-head strong { overflow: hidden; color: #344054; font-size: 13px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.opportunity-mobile-card-head small { margin-top: 3px; color: var(--crm-text-muted); font-size: 10px; }
.opportunity-mobile-next { display: grid; gap: 3px; }
.opportunity-mobile-next small { color: var(--crm-text-muted); font-size: 9px; font-weight: 750; }
.opportunity-mobile-next strong { color: #475467; font-size: 11px; line-height: 1.5; }
.opportunity-mobile-card-footer { display: flex; flex-wrap: wrap; gap: 7px 10px; align-items: center; padding-top: 10px; border-top: 1px solid #eef0f2; }
.opportunity-mobile-card-footer .person-cell { color: #475467; font-size: 10px; }
.opportunity-mobile-card-footer .avatar { width: 20px; height: 20px; font-size: 9px; }
.mobile-note-count { color: var(--crm-text-muted); font-size: 10px; }
.mobile-filter-empty { display: grid; gap: 6px; padding: 32px 20px; color: var(--crm-text-muted); background: white; font-size: 11px; text-align: center; }
.mobile-filter-empty strong { color: #475467; font-size: 12px; }
.mobile-filter-empty .button { justify-self: center; margin-top: 4px; }
.board-group .table-wrap:not(.table-wrap-cards) { max-block-size: max(320px, calc(100dvh - 342px)); overflow: auto; scroll-padding-top: 38px; }
.data-table { min-width: 1035px; }
.data-table th { position: sticky; top: 0; z-index: 3; height: 38px; padding: 8px 11px; background: #fbfcfd; box-shadow: 0 1px 0 var(--crm-border); font-size: 9px; }
.data-table td { height: 48px; padding: 6px 11px; font-size: 11px; }
.data-table td:first-child, .data-table th:first-child { position: sticky; left: 0; z-index: 2; background: inherit; box-shadow: 1px 0 0 #edf0f2; }
.data-table th:first-child { z-index: 5; background: #fbfcfd; }
.data-table tbody tr.is-selected td { background: #fff8fa; }
.data-table tbody tr.is-selected td:first-child { background: #fff8fa; box-shadow: inset 3px 0 0 var(--crm-brand-key), 1px 0 0 #edf0f2; }
.data-table tbody tr:hover td { background: #fffafb; }
.data-table tbody tr:hover td:first-child { background: #fffafb; }
.opportunity-name { max-width: 198px; }
.note-count { display: inline-flex; gap: 4px; align-items: center; min-height: 25px; padding: 0 7px; color: #667085; border: 1px solid #e4e7ec; border-radius: 5px; background: white; font-size: 10px; font-weight: 750; }
.note-count:hover { color: var(--crm-brand-strong); border-color: #fbc6d5; background: var(--crm-brand-soft); }
.inline-create-row td { background: #fff !important; border-top: 1px solid #f3d4dc; }
.inline-create-row td:first-child { background: #fff !important; }
.inline-create-row input, .inline-create-row select { width: 100%; min-width: 76px; height: 30px; padding: 0 7px; color: #475467; border: 1px solid transparent; border-radius: 5px; background: transparent; font-size: 10px; }
.inline-create-row input:hover, .inline-create-row select:hover, .inline-create-row input:focus, .inline-create-row select:focus { border-color: #d0d5dd; background: #fff; }
.inline-create-row input#inline-title { min-width: 180px; color: var(--crm-brand-strong); font-weight: 700; }
.inline-identity-fields { display: grid; gap: 2px; min-width: 180px; }
.inline-identity-fields input#inline-account { min-width: 180px; color: #667085; }
.inline-identity-fields small, .inline-cell-note { color: var(--crm-text-muted); font-size: 9px; line-height: 1.3; }
.inline-save { min-height: 28px; padding: 0 8px; color: var(--crm-brand-strong); border: 0; border-radius: 5px; background: var(--crm-brand-soft); font-size: 10px; font-weight: 750; white-space: nowrap; }
.inline-save:hover { background: #ffe3ea; }
.inline-create-row .is-invalid { border-color: #d92d20 !important; background: #fff5f4 !important; }
.inline-create-error td { height: auto; padding: 8px 11px; color: #b42318; background: #fff5f4 !important; border-top: 1px solid #fecdca; font-size: 10px; }
.inline-create-error strong { margin-right: 6px; }

.panel-head { display: flex; gap: 11px; align-items: flex-start; justify-content: space-between; min-height: 115px; padding: 18px 18px 14px; border-bottom: 1px solid var(--crm-border); background: white; box-shadow: inset 3px 0 0 var(--crm-brand-key); }
.panel-head .eyebrow { margin-bottom: 4px; font-size: 9px; }
.panel-identity-line { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 4px; }
.panel-identity-line .eyebrow { margin: 0; }
.panel-identity-line .badge { min-height: 19px; padding: 0 6px; font-size: 8px; }
.panel-head h2 { color: #182230; font-size: 16px; line-height: 1.35; letter-spacing: -.025em; }
.panel-head p:last-child { margin: 4px 0 0; color: var(--crm-text-muted); font-size: 10px; }
.panel-head-content { min-width: 0; }
.panel-head .icon-close { flex: 0 0 auto; width: 28px; height: 28px; font-size: 17px; }
.panel-record-nav { display: flex; gap: 5px; align-items: center; margin-top: 11px; }
.panel-record-position { flex: 1; min-width: 0; overflow: hidden; color: var(--crm-text-muted); font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.record-nav-button { min-height: 26px; padding: 0 7px; color: #475467; border: 1px solid #d0d5dd; border-radius: 6px; background: white; font-size: 9px; font-weight: 800; white-space: nowrap; }
.record-nav-button:hover:not(:disabled) { color: var(--crm-brand-strong); border-color: #f8b4c5; background: var(--crm-brand-soft); }
.record-nav-button:disabled { cursor: not-allowed; opacity: .45; }
.panel-tabs { display: flex; min-height: 41px; gap: 5px; padding: 0 13px; border-bottom: 1px solid var(--crm-border); background: #fbfcfd; }
.panel-tabs button { position: relative; padding: 0 8px; color: var(--crm-text-muted); border: 0; background: transparent; font-size: 11px; font-weight: 750; }
.panel-tabs button.active { color: var(--crm-brand-strong); }
.panel-tabs button.active::after { position: absolute; right: 7px; bottom: -1px; left: 7px; height: 2px; background: var(--crm-brand-key); content: ""; }
.panel-tabs span { display: inline-grid; min-width: 16px; height: 16px; margin-left: 3px; place-items: center; color: #667085; border-radius: 50%; background: #eaecf0; font-size: 9px; }
.panel-tabs-wide { justify-content: space-between; gap: 0; padding: 0 8px; }
.panel-tabs-wide button { padding: 0 6px; font-size: 10px; }
.panel-scroll { height: calc(100vh - 156px); overflow-y: auto; padding: 16px 18px 34px; }
.panel-section { margin: 0 0 22px; }
.panel-section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.panel-section-title h3 { color: #344054; font-size: 11px; }
.panel-section-actions { display: inline-flex; align-items: center; gap: 2px; }
.next-action-editor { padding: 11px; border: 1px solid #fbc6d5; border-radius: 9px; background: #fff8fa; }
.next-action-editor .form-label { margin-bottom: 5px; }
.next-action-editor > div { display: flex; justify-content: flex-end; gap: 7px; margin-top: 9px; }
.panel-detail-grid { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid var(--crm-border); border-radius: 8px; }
.panel-detail-grid div { min-height: 60px; padding: 10px; border-right: 1px solid var(--crm-border); border-bottom: 1px solid var(--crm-border); }
.panel-detail-grid div:nth-child(even) { border-right: 0; }
.panel-detail-grid div:nth-last-child(-n + 2) { border-bottom: 0; }
.panel-detail-grid small, .panel-detail-grid strong { display: block; }
.panel-detail-grid small { color: var(--crm-text-muted); font-size: 9px; }
.panel-detail-grid strong { margin-top: 3px; color: #344054; font-size: 11px; }
.panel-account-link { width: 100%; margin-top: 10px; }
.handoff-context { padding: 11px; border: 1px solid #fedf89; border-radius: 8px; background: #fffaeb; }
.handoff-context strong { color: #7a3e0a; font-size: 11px; }
.handoff-context p { margin: 5px 0 9px; color: #7a3e0a; font-size: 10px; line-height: 1.55; }
.panel-timeline { display: grid; gap: 0; }
.panel-timeline > div { display: grid; grid-template-columns: 66px 1fr; gap: 8px; padding: 0 0 11px; color: #475467; font-size: 10px; }
.panel-timeline time { color: var(--crm-text-muted); text-align: right; }
.panel-timeline span { position: relative; padding-left: 10px; }
.panel-timeline span::before { position: absolute; top: 4px; left: -3px; width: 6px; height: 6px; border: 2px solid white; border-radius: 50%; background: var(--crm-brand-key); box-shadow: 0 0 0 1px var(--crm-brand-key); content: ""; }
.panel-timeline strong { display: block; color: #344054; font-size: 10px; }
.panel-copy { margin: 0 0 13px; color: var(--crm-text-muted); font-size: 10px; line-height: 1.6; }
.collaboration-summary { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid var(--crm-border); border-radius: 8px; }
.collaboration-summary span { min-height: 47px; padding: 10px; color: #667085; border-right: 1px solid var(--crm-border); border-bottom: 1px solid var(--crm-border); font-size: 10px; line-height: 1.4; }
.collaboration-summary span:nth-child(even) { border-right: 0; }
.collaboration-summary span:last-child { grid-column: span 2; border-bottom: 0; }
.collaboration-summary strong { display: block; color: #344054; font-size: 14px; }
.note-textarea { padding-top: 9px; resize: vertical; }
.panel-save-note { width: 100%; margin-top: 10px; }
.memo-guide, .note-total { color: var(--crm-text-muted); font-size: 9px; font-weight: 650; }
.panel-notes-history { padding-top: 18px; border-top: 1px solid var(--crm-border); }
.handoff-note { margin-bottom: 10px; padding: 11px; border: 1px solid var(--crm-border); border-radius: 9px; background: #fff; }
.handoff-note > div { display: flex; gap: 7px; align-items: center; }
.handoff-note .avatar { width: 25px; height: 25px; font-size: 10px; }
.handoff-note strong, .handoff-note small { display: block; }
.handoff-note strong { color: #344054; font-size: 10px; }
.handoff-note small { margin-top: 1px; color: var(--crm-text-muted); font-size: 9px; }
.handoff-note p { margin: 9px 0 0 32px; color: #475467; font-size: 10px; line-height: 1.6; }
.update-composer { padding: 13px; border: 1px solid #d9d6fe; border-radius: 10px; background: #fbfaff; }
.update-composer .panel-section-title { margin-bottom: 8px; }
.update-composer textarea { min-height: 86px; background: white; }
.update-composer-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 9px; }
.update-composer-controls .form-control { min-width: 0; font-size: 10px; }
.update-composer-controls .button { white-space: nowrap; }
.update-draft-status { display: flex; gap: 8px; align-items: center; justify-content: space-between; min-height: 26px; margin-top: 8px; color: #667085; font-size: 9px; }
.update-draft-status .button { min-height: 25px; }
.reply-target { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 10px; padding: 9px; border: 1px solid #d9d6fe; border-radius: 7px; background: white; }
.reply-target .avatar { width: 24px; height: 24px; font-size: 9px; }
.reply-target span { display: grid; gap: 2px; min-width: 0; }
.reply-target strong { color: #344054; font-size: 10px; }
.reply-target small { overflow: hidden; color: #667085; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.panel-updates-history { padding-top: 2px; }
.update-thread { display: grid; gap: 10px; }
.update-card { padding: 11px; border: 1px solid var(--crm-border); border-radius: 10px; background: #fff; }
.update-card-head { display: flex; gap: 7px; align-items: center; }
.update-card-head .avatar { width: 25px; height: 25px; font-size: 10px; }
.update-card-head div { display: grid; gap: 1px; }
.update-card-head strong { color: #344054; font-size: 10px; }
.update-card-head small { color: #667085; font-size: 9px; }
.update-card > p { margin: 8px 0 0 32px; color: #475467; font-size: 10px; line-height: 1.6; white-space: pre-wrap; }
.update-actions { display: flex; gap: 5px; margin: 9px 0 0 32px; }
.update-readonly-count { margin: 9px 0 0 32px; color: var(--crm-text-muted); font-size: 9px; font-weight: 700; }
.update-action { min-height: 24px; padding: 0 7px; color: #667085; border: 1px solid #e4e7ec; border-radius: 5px; background: #fff; font-size: 9px; font-weight: 700; }
.update-action:hover { color: var(--crm-brand-strong); border-color: #fbc6d5; background: var(--crm-brand-soft); }
.update-action.is-active { color: var(--crm-brand-strong); border-color: #f8b4c5; background: var(--crm-brand-soft); }
.update-replies { display: grid; gap: 7px; margin: 9px 0 0 32px; padding-left: 9px; border-left: 2px solid #e4e7ec; }
.update-card.update-reply { padding: 8px; border-color: #eaecf0; background: #fbfcfd; }
.update-card.update-reply > p { margin-left: 30px; }
.change-history { display: grid; gap: 0; overflow: hidden; border: 1px solid var(--crm-border); border-radius: 9px; }
.change-history article { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 9px; padding: 10px; border-bottom: 1px solid var(--crm-border); }
.change-history article:last-child { border-bottom: 0; }
.change-history time { color: #667085; font-size: 9px; line-height: 1.45; text-align: right; }
.change-history time small { font-size: 8px; }
.change-history span { display: grid; gap: 3px; }
.change-history strong { color: #344054; font-size: 10px; }
.change-history p { margin: 0; color: #667085; font-size: 10px; line-height: 1.45; }
.panel-empty { display: grid; height: 100%; align-content: center; justify-items: center; padding: 30px; color: var(--crm-text-muted); text-align: center; }
.panel-empty > span { display: grid; width: 38px; height: 38px; margin-bottom: 12px; place-items: center; color: var(--crm-brand-strong); border-radius: 10px; background: var(--crm-brand-soft); font-size: 18px; }
.panel-empty h2 { color: #344054; font-size: 14px; }
.panel-empty p { max-width: 230px; margin: 5px 0 0; font-size: 11px; }
.panel-readonly-message { padding: 11px; color: #475467; border: 1px solid #d9d6fe; border-radius: 9px; background: #fbfaff; font-size: 11px; }
.panel-readonly-message strong { color: #344054; }
.panel-readonly-message p, .panel-readonly-note { margin: 5px 0 0; color: #667085; font-size: 10px; line-height: 1.55; }
.update-composer.is-readonly { display: none; }

@media (max-width: 1280px) {
  .app-shell, .app-shell.sidebar-collapsed { grid-template-columns: 66px minmax(0, 1fr) 350px; }
  .app-shell.detail-closed, .app-shell.sidebar-collapsed.detail-closed { grid-template-columns: 66px minmax(0, 1fr) 0; }
  .sidebar { padding-right: 8px; padding-left: 8px; }
  .brand { justify-content: center; padding-right: 0; padding-left: 0; }
  .brand-copy, .primary-nav a > span:nth-child(2), .nav-count, .sidebar-footer .demo-chip, .user-summary > span:not(.avatar) { display: none; }
  .primary-nav a { grid-template-columns: 1fr; place-items: center; padding: 0; }
  .sidebar-footer { display: grid; place-items: center; padding-right: 0; padding-left: 0; }
  .work-panel, #work-panel-content { width: 350px; min-width: 350px; }
  .page-root { padding-right: 22px; padding-left: 22px; }
  .topbar { padding-right: 22px; padding-left: 22px; }
  .metric-grid { gap: 11px; }
}
@media (max-width: 1023px) {
  .app-shell, .app-shell.sidebar-collapsed { grid-template-columns: 66px minmax(0, 1fr) 320px; }
  .app-shell.detail-closed, .app-shell.sidebar-collapsed.detail-closed { grid-template-columns: 66px minmax(0, 1fr) 0; }
  .work-panel, #work-panel-content { width: 320px; min-width: 320px; }
  .board-header { padding-right: 15px; padding-left: 15px; }
  .data-table { min-width: 980px; }
}
@media (max-width: 767px) {
  .app-shell, .app-shell.sidebar-collapsed, .app-shell.detail-closed, .app-shell.sidebar-collapsed.detail-closed { display: block; }
  .topbar { padding: 0 16px; }
  .detail-toggle span { display: none; }
  .work-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 30; width: min(388px, 100vw); min-width: 0; transform: translateX(0); box-shadow: -12px 0 30px rgb(16 24 40 / 16%); }
  #work-panel-content { width: min(388px, 100vw); min-width: 0; }
  .detail-closed .work-panel { width: min(388px, 100vw); transform: translateX(102%); opacity: 1; border-left-color: var(--crm-border); }
  .panel-scroll { height: calc(100vh - 156px); }
  .panel-tabs-wide { padding: 0 6px; }
  .panel-tabs-wide button { padding: 0 4px; font-size: 9px; }
  .update-composer-controls { grid-template-columns: 1fr; }
  .update-composer-controls .button { width: 100%; }
  .change-history article { grid-template-columns: 64px minmax(0, 1fr); }
  .board-header p { max-width: 210px; }
  .board-members { display: none; }
  .context-toolbar .results-note { display: none; }
  .saved-views { width: 100%; }
  .saved-views > span { width: 100%; }
  .toolbar-divider { display: none; }
  .table-state { min-height: 270px; padding: 28px 22px; }
  .board-group-header > span { display: none; }
  .opportunity-card-list { gap: 8px; padding: 10px; }
  .opportunity-mobile-card { padding: 13px; }
  .inline-create-row input#inline-title { min-width: 150px; }
  .shortcut-grid { grid-template-columns: 1fr; }
}

/* Pipeline scan cues and text-backed deadline states.
   The board remains horizontally scrollable, but its full workflow and end
   state are expressed in real page content rather than a visual-only overlay. */
.pipeline-cue {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin: 0 38px 8px;
  color: #475467;
  font-size: 10px;
  font-weight: 750;
}
.pipeline-stage-overview { display: grid; grid-template-columns: 146px minmax(0, 1fr); gap: 11px; align-items: center; margin: 0 38px 9px; padding: 10px 12px; border: 1px solid var(--crm-border); border-radius: 10px; background: var(--crm-surface); }
.pipeline-stage-overview > div:first-child { display: grid; gap: 2px; }
.pipeline-stage-overview strong { color: #344054; font-size: 11px; }
.pipeline-stage-overview span { color: var(--crm-text-muted); font-size: 9px; line-height: 1.45; }
.pipeline-stage-steps { display: grid; grid-template-columns: repeat(8, minmax(88px, 1fr)); gap: 5px; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.pipeline-stage-step { display: grid; min-width: 0; min-height: 48px; padding: 6px 7px; color: #475467; text-align: left; border: 1px solid #e4e7ec; border-radius: 7px; background: #fff; }
.pipeline-stage-step:hover { color: var(--crm-brand-strong); border-color: #fbc6d5; background: #fff8fa; }
.pipeline-stage-step.active { color: var(--crm-brand-strong); border-color: #f8b4c5; background: var(--crm-brand-soft); box-shadow: inset 0 2px 0 var(--crm-brand-key); }
.pipeline-stage-step span { overflow: hidden; color: inherit; font-size: 9px; font-weight: 750; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.pipeline-stage-step strong { margin-top: 3px; color: #344054; font-size: 10px; line-height: 1; }
.pipeline-stage-step small { overflow: hidden; margin-top: 3px; color: #667085; font-size: 8px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.pipeline-stage-step:focus-visible { outline: 2px solid var(--crm-brand-key); outline-offset: 2px; }
@media (max-width: 1280px) {
  .pipeline-stage-overview { grid-template-columns: 1fr; gap: 8px; }
  .pipeline-stage-overview > div:first-child { grid-template-columns: auto 1fr; align-items: baseline; gap: 8px; }
}
.pipeline-cue span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid #e4e7ec;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 1px 2px rgb(16 24 40 / 4%);
}
.pipeline-cue span:last-child { color: #027a48; border-color: #abefc6; background: #ecfdf3; }
.pipeline-scroll {
  position: relative;
  display: flow-root;
  padding-bottom: 24px;
  scroll-padding-inline: 38px;
  scroll-snap-type: inline proximity;
  scrollbar-color: #98a2b3 #eaecf0;
  scrollbar-width: thin;
}
.kanban {
  scroll-snap-type: inline proximity;
}
.kanban-column {
  position: relative;
  scroll-snap-align: start;
  scroll-margin-inline: 38px;
}
.kanban-column:last-child {
  border-color: #abefc6;
  background: linear-gradient(180deg, #effcf4 0%, #f1f3f5 38%);
}
.kanban-column:last-child .kanban-head::after {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  margin-left: auto;
  padding: 0 5px;
  color: #027a48;
  border: 1px solid #abefc6;
  border-radius: 100px;
  background: #fff;
  content: "終端";
  font-size: 9px;
  font-weight: 800;
}

/* A label, icon, border, and value communicate timing together. */
.data-table .due,
.pipeline-card-footer .due {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  min-height: 23px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: 100px;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.data-table .due::before,
.pipeline-card-footer .due::before {
  font-size: 9px;
  font-weight: 800;
}
.data-table .due.overdue,
.pipeline-card-footer .due.overdue {
  color: #b42318;
  border-color: #fecdca;
  background: #fef3f2;
}
.data-table .due.overdue::before,
.pipeline-card-footer .due.overdue::before {
  content: "! 期限超過";
}
.data-table .due.today,
.pipeline-card-footer .due.today {
  color: #9e0930;
  border-color: #fbc6d5;
  background: #fff1f4;
}
.data-table .due.today::before,
.pipeline-card-footer .due.today::before {
  content: "● 本日";
}
.data-table .due.soon,
.pipeline-card-footer .due.soon {
  color: #93370d;
  border-color: #fedf89;
  background: #fffaeb;
}
.data-table .due.soon::before,
.pipeline-card-footer .due.soon::before {
  content: "◷ 期限接近";
}
.panel-detail-grid strong.overdue,
.detail-grid strong.overdue { color: #b42318; }
.panel-detail-grid strong.today,
.detail-grid strong.today { color: #9e0930; }
.panel-detail-grid strong.soon,
.detail-grid strong.soon { color: #93370d; }
.panel-detail-grid strong.overdue::after,
.detail-grid strong.overdue::after,
.panel-detail-grid strong.today::after,
.detail-grid strong.today::after,
.panel-detail-grid strong.soon::after,
.detail-grid strong.soon::after {
  display: block;
  width: max-content;
  margin-top: 4px;
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.25;
}
.panel-detail-grid strong.overdue::after,
.detail-grid strong.overdue::after { color: #b42318; background: #fef3f2; content: "! 期限超過"; }
.panel-detail-grid strong.today::after,
.detail-grid strong.today::after { color: #9e0930; background: #fff1f4; content: "● 本日が期限"; }
.panel-detail-grid strong.soon::after,
.detail-grid strong.soon::after { color: #93370d; background: #fffaeb; content: "◷ 期限接近"; }

/* The application can attach these SLA classes to handoff states without
   introducing another visual language. The status text remains visible. */
.handoff-context .sla-status,
.handoff-context .handoff-sla,
.handoff-note .sla-status,
.handoff-note .handoff-sla {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  margin-top: 8px;
  padding: 3px 6px;
  border: 1px solid #fedf89;
  border-radius: 4px;
  color: #93370d;
  background: #fffaeb;
  font-size: 9px;
  font-weight: 800;
}
.handoff-context .sla-status.overdue,
.handoff-context .handoff-sla.overdue,
.handoff-note .sla-status.overdue,
.handoff-note .handoff-sla.overdue {
  color: #b42318;
  border-color: #fecdca;
  background: #fef3f2;
}

.dialog-wide { width: min(680px, calc(100vw - 32px)); }
.handoff-form {
  display: grid;
  gap: 12px;
  max-height: min(60vh, 620px);
  overflow: auto;
  padding-right: 4px;
}
.handoff-form .form-label { display: grid; gap: 6px; margin: 0; }
.handoff-form textarea { resize: vertical; }
.ownership-card,
.delivery-readonly {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fafafa;
}
.ownership-card p { margin: 0; color: #475467; font-size: 12px; line-height: 1.7; }
.ownership-card > div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid #eaecf0;
  color: #344054;
  font-size: 11px;
}
.ownership-card time { color: #667085; font-variant-numeric: tabular-nums; }
.ownership-card span { display: grid; gap: 2px; }
.ownership-card small { color: #667085; }
.handoff-checklist {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}
.handoff-checklist > div {
  display: grid;
  grid-template-columns: 17px minmax(90px, .8fr) minmax(0, 1.7fr);
  gap: 7px;
  align-items: start;
  padding: 8px;
  border: 1px solid #eaecf0;
  border-radius: 7px;
  font-size: 10px;
}
.handoff-checklist > div > span {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  color: #fff;
  background: #98a2b3;
  font-weight: 800;
}
.handoff-checklist > div.complete > span { background: #047857; }
.handoff-checklist > div.missing { border-color: #fedf89; background: #fffaeb; }
.handoff-checklist > div.missing > span { background: #b54708; }
.handoff-checklist strong { color: #344054; }
.handoff-checklist p { margin: 0; color: #667085; line-height: 1.45; }
.delivery-readonly {
  margin: 0 14px 14px;
  border-color: #c7d7fe;
  color: #344054;
  font-size: 11px;
}
.delivery-readonly strong { color: #1d4ed8; }
.delivery-readonly small { color: #667085; line-height: 1.5; }
.delivery-deadlines { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.delivery-deadlines span {
  padding: 5px 7px;
  border: 1px solid #c7d7fe;
  border-radius: 5px;
  color: #475467;
  background: #f5f8ff;
  font-size: 11px;
}
.delivery-deadlines strong { margin-left: 4px; color: #1d4ed8; }
.fixture-label {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 7px;
  border: 1px solid #c7d7fe;
  border-radius: 999px;
  color: #1d4ed8;
  background: #f5f8ff;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.insight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.insight-card { min-height: 270px; }
.funnel-list,
.handoff-review { display: grid; gap: 8px; padding: 0 18px 18px; }
.funnel-list > div {
  display: grid;
  grid-template-columns: minmax(105px, 1fr) 44px minmax(24px, 1.4fr);
  gap: 8px;
  align-items: center;
  min-height: 29px;
  font-size: 11px;
}
.funnel-list > div > strong { color: #344054; text-align: right; }
.funnel-list > div > i {
  display: block;
  width: var(--bar);
  max-width: 100%;
  height: 9px;
  border-radius: 99px;
  background: linear-gradient(90deg, #5b38d6, #a98ff3);
}
.insight-table { width: calc(100% - 36px); margin: 0 18px 18px; border-collapse: collapse; font-size: 12px; }
.insight-table th,
.insight-table td { padding: 10px 0; border-bottom: 1px solid #eaecf0; text-align: left; color: #475467; }
.insight-table th { color: #667085; font-weight: 700; }
.insight-table th:last-child,
.insight-table td:last-child { text-align: right; color: #344054; font-weight: 750; }
.handoff-review > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 9px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid #eaecf0;
}
.handoff-review > div:last-child { border-bottom: 0; }
.handoff-review strong { color: #344054; font-size: 12px; }
.handoff-review small { grid-column: 2; color: #667085; line-height: 1.4; }

@media (max-width: 767px) {
  .pipeline-cue, .pipeline-stage-overview { margin-right: 16px; margin-left: 16px; }
  .pipeline-stage-overview { grid-template-columns: 1fr; gap: 8px; }
  .pipeline-stage-steps { grid-template-columns: repeat(8, 88px); }
  .pipeline-scroll { scroll-padding-inline: 16px; }
  .kanban-column { scroll-margin-inline: 16px; }
  .insight-grid { grid-template-columns: 1fr; }
  .handoff-checklist > div { grid-template-columns: 17px minmax(0, 1fr); }
  .handoff-checklist p { grid-column: 2; }
  .ownership-card > div { grid-template-columns: 1fr; gap: 3px; }
}
@media (forced-colors: active) {
  .data-table .due,
  .pipeline-card-footer .due,
  .handoff-context .sla-status,
  .handoff-context .handoff-sla,
  .handoff-note .sla-status,
  .handoff-note .handoff-sla { border: 1px solid CanvasText; }
}
@media (prefers-reduced-motion: reduce) {
  .table-state-loading { animation: none; }
}

/* SCOP Design Sketch translation: dense, quiet, line-led operational surfaces. */
:root {
  --crm-ink: #0b0c0d;
  --crm-canvas: #ffffff;
  --crm-surface: #ffffff;
  --crm-surface-subtle: #f0f2f3;
  --crm-border: #dfe2e3;
  --crm-text: #141617;
  --crm-text-muted: #67696a;
  --crm-text-faint: #9a9c9d;
  --crm-radius-control: 2px;
  --crm-radius-card: 0;
  --crm-shadow: none;
  --crm-shadow-focus: 0 0 0 2px rgb(11 12 13 / 30%);
  --crm-font-sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  --crm-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --crm-font-utility: var(--crm-font-mono);
}

html, body { background: var(--crm-surface); }
body { color: var(--crm-text); font-size: 13px; line-height: 1.35; }
small { font-size: 11px; }
.app-shell { grid-template-columns: 224px minmax(0, 1fr) 364px; }
.sidebar { padding: 16px 8px 12px; border-color: var(--crm-border); }
.brand { gap: 9px; padding: 0 8px 24px; }
.brand-mark { width: 28px; height: 22px; border-radius: 0; background: var(--crm-ink); box-shadow: none; font-size: 13px; }
.brand-copy strong { color: var(--crm-ink); font-size: 14px; letter-spacing: -.02em; }
.brand-copy small { display: none; }
.primary-nav { gap: 1px; }
.primary-nav a { min-height: 34px; gap: 8px; padding: 0 8px; border-radius: 0; color: #454748; font-size: 12px; font-weight: 650; }
.primary-nav a > span:first-child { color: var(--crm-ink); font-size: 12px; }
.primary-nav a:hover { color: var(--crm-ink); background: var(--crm-surface-subtle); }
.primary-nav a.active { color: var(--crm-ink); background: var(--crm-surface-subtle); }
.nav-count, .active .nav-count { min-width: 18px; padding: 0 5px; border-radius: 0; color: var(--crm-text-muted); background: transparent; font-family: var(--crm-font-mono); font-size: 10px; }
.sidebar-footer { padding: 12px 8px 0; }
.demo-chip { margin-bottom: 10px; padding: 0; color: var(--crm-text-muted); border: 0; border-radius: 0; background: transparent; font-weight: 650; }
.demo-chip span { color: var(--crm-ink); }
.avatar { width: 26px; height: 26px; border-radius: 0; color: white; background: var(--crm-ink); font-size: 10px; }
.avatar-plum, .avatar-teal, .avatar-amber { color: white; background: #454748; }
.topbar { height: 56px; padding: 0 28px; border-color: var(--crm-border); }
.breadcrumb { color: var(--crm-text-muted); font-size: 11px; font-weight: 650; }
.today-label { font-family: var(--crm-font-mono); font-size: 10px; }
.help-button, .rail-toggle, .detail-toggle { border-color: var(--crm-border); border-radius: 0; box-shadow: none; }
.detail-toggle { min-height: 28px; color: var(--crm-ink); font-size: 10px; }
.page-root { padding: 24px 28px 40px; }
.page-heading { margin-bottom: 20px; }
.eyebrow { margin-bottom: 4px; color: var(--crm-text-faint); font-family: var(--crm-font-mono); font-size: 10px; font-weight: 700; letter-spacing: .04em; }
h1, .page-heading h1 { color: var(--crm-ink); font-size: 24px; font-weight: 750; letter-spacing: -.04em; }
h2 { color: var(--crm-ink); font-size: 16px; letter-spacing: -.03em; }
h3 { color: var(--crm-ink); }
.page-summary { margin-top: 5px; color: var(--crm-text-muted); font-size: 11px; }
.mock-note { min-height: 24px; padding: 3px 6px; border-radius: 0; color: var(--crm-text-muted); background: var(--crm-surface-subtle); }

.button { min-height: 32px; padding: 0 10px; border-radius: 0; font-size: 11px; font-weight: 700; box-shadow: none; }
.button:hover { transform: none; }
.button-primary { background: var(--crm-ink); color: white; }
.button-primary:hover { background: #333536; }
.button-secondary { color: var(--crm-ink); border-color: var(--crm-border); background: white; }
.button-quiet { color: var(--crm-ink); }
.button-quiet:hover { background: var(--crm-surface-subtle); }
.button-small { min-height: 28px; }

.metric-grid { gap: 0; margin-bottom: 22px; border-top: 1px solid var(--crm-border); border-bottom: 1px solid var(--crm-border); }
.metric-card { min-height: 90px; padding: 12px 14px; border: 0; border-right: 1px solid var(--crm-border); border-radius: 0; background: transparent; box-shadow: none; }
.metric-card:last-child { border-right: 0; }
.metric-label { color: var(--crm-text-muted); font-size: 10px; font-weight: 650; }
.metric-icon { display: none; }
.metric-value, .card-amount, .account-hero-stats strong { color: var(--crm-ink); font-family: var(--crm-font-utility); font-variant-numeric: tabular-nums; }
.metric-value { margin-top: 14px; font-size: 26px; font-weight: 650; letter-spacing: -.055em; }
.metric-note { margin-top: 5px; font-size: 9px; }
.metric-note strong { color: var(--crm-success); }

.card, .table-wrap, .gantt-card, .account-hero, .work-panel { border-color: var(--crm-border); border-radius: 0; box-shadow: none; }
.card-head { min-height: 50px; padding: 0 16px; }
.card-head p { margin-top: 2px; font-size: 10px; }
.card-body { padding: 16px; }
.split-grid, .account-layout { gap: 16px; }
.work-columns { padding: 12px 16px; }
.work-item, .opportunity-mobile-card { padding: 10px; border-radius: 0; box-shadow: none; }
.work-item:hover, .opportunity-mobile-card:hover { border-color: var(--crm-ink); box-shadow: none; }
.work-item.today { border-left-color: var(--crm-ink); }
.work-item.soon { border-left-color: #67696a; }

.board-shell { margin-bottom: 16px; }
.board-header { padding-bottom: 14px; border-bottom-color: var(--crm-border); }
.board-header > div > p, .board-context-note { display: none; }
.board-title-line { gap: 7px; }
.board-title-line h1 { font-size: 24px; }
.board-privacy { padding: 1px 4px; border-radius: 0; color: var(--crm-text-muted); background: var(--crm-surface-subtle); font-family: var(--crm-font-mono); font-size: 9px; }
.board-members .avatar { width: 22px; height: 22px; margin-left: -4px; }
.member-more { width: 22px; height: 22px; border-radius: 0; background: var(--crm-surface-subtle); font-family: var(--crm-font-mono); font-size: 9px; }
.view-tabs { gap: 2px; padding-top: 10px; }
.view-tabs a { min-height: 27px; padding: 0 7px; border-radius: 0; color: var(--crm-text-muted); font-size: 10px; }
.view-tabs a.active { color: var(--crm-ink); background: transparent; box-shadow: inset 0 -2px 0 var(--crm-ink); }

.context-toolbar { gap: 7px; margin-bottom: 12px; }
.saved-views { gap: 0; padding: 0; border: 1px solid var(--crm-border); border-radius: 0; background: white; }
.saved-views > span { padding: 0 8px; color: var(--crm-text-muted); font-size: 10px; }
.saved-view { min-height: 30px; padding: 0 8px; border-radius: 0; font-size: 10px; }
.saved-view.active { color: white; background: var(--crm-ink); }
.saved-view b { font-family: var(--crm-font-mono); }
.search-control input, .filter-select, .form-control, .stage-select, .table-cell-select, .table-date-input { min-height: 32px; border-color: #c9cccd; border-radius: 0; font-size: 11px; }
.toolbar-clear { border-color: var(--crm-border); border-radius: 0; }
.results-note { font-family: var(--crm-font-mono); }
.board-group-header { min-height: 34px; padding: 0; }
.board-group-header > span { display: none; }
.group-dot { width: 8px; height: 8px; border-radius: 0; background: var(--crm-ink); }
.table-wrap { background: white; }
.data-table { font-size: 11px; }
.data-table th { height: 36px; padding: 8px 11px; color: var(--crm-ink); background: var(--crm-surface-subtle); font-family: var(--crm-font-mono); font-size: 9px; font-weight: 700; letter-spacing: .02em; }
.data-table td { height: 48px; padding: 6px 11px; color: #343637; font-size: 11px; }
.data-table tbody tr:hover td, .data-table tbody tr:hover td:first-child { background: #f8f9f9; }
.data-table tbody tr.is-selected td, .data-table tbody tr.is-selected td:first-child { background: var(--crm-surface-subtle); box-shadow: inset 2px 0 0 var(--crm-ink); }
.data-table th:nth-child(5), .data-table td:nth-child(5), .data-table th:nth-child(6), .data-table td:nth-child(6), .data-table th:nth-child(9), .data-table td:nth-child(9) { font-family: var(--crm-font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.opportunity-open:hover .opportunity-name, .table-cell-button small { color: var(--crm-ink); }
.badge { min-height: 19px; padding: 1px 5px; border-radius: 0; color: var(--crm-ink); border-color: transparent; font-size: 9px; font-weight: 750; }
.badge-contact, .badge-qualify, .badge-handoff, .badge-proposal, .badge-won, .badge-target { color: var(--crm-ink); border-color: transparent; }
.badge-contact, .badge-target { background: #f0f2f3; }
.badge-qualify, .badge-won { background: #00f081; }
.badge-handoff { background: #fff1c9; }
.badge-proposal { background: #ff4d78; }
.due, .data-table .due, .pipeline-card-footer .due { border-radius: 0; font-family: var(--crm-font-mono); }
.data-table .due.today, .pipeline-card-footer .due.today { color: var(--crm-ink); border-color: var(--crm-ink); background: white; }
.data-table .due.soon, .pipeline-card-footer .due.soon { color: #745300; border-color: #d8c36a; background: #fff8d8; }

.pipeline-stage-overview { gap: 10px; padding: 10px 0; border-top: 1px solid var(--crm-border); border-bottom: 1px solid var(--crm-border); border-radius: 0; background: transparent; }
.pipeline-stage-overview > div:first-child { display: block; }
.pipeline-stage-overview strong { color: var(--crm-text-muted); font-family: var(--crm-font-mono); font-size: 9px; letter-spacing: .04em; }
.pipeline-stage-overview span, .pipeline-cue, .pipeline-footer-note { display: none; }
.pipeline-stage-steps { gap: 0; overflow: visible; }
.pipeline-stage-step { min-height: 45px; padding: 6px 8px; border: 0; border-right: 1px solid var(--crm-border); border-radius: 0; background: transparent; }
.pipeline-stage-step:last-child { border-right: 0; }
.pipeline-stage-step:hover { color: var(--crm-ink); border-color: var(--crm-border); background: var(--crm-surface-subtle); }
.pipeline-stage-step.active { color: white; border-color: var(--crm-ink); background: var(--crm-ink); box-shadow: none; }
.pipeline-stage-step.active strong, .pipeline-stage-step.active small { color: white; }
.pipeline-stage-step strong, .pipeline-stage-step small { font-family: var(--crm-font-mono); font-variant-numeric: tabular-nums; }
.pipeline-scroll { margin: 0 -28px; padding: 16px 28px 20px; scroll-padding-inline: 28px; }
.kanban { gap: 8px; }
.kanban-column { min-height: 490px; padding: 8px; border-radius: 0; background: var(--crm-surface-subtle); }
.kanban-column:last-child { border-color: var(--crm-border); background: var(--crm-surface-subtle); }
.kanban-column:last-child .kanban-head::after { display: none; }
.kanban-head { margin: 1px 0 9px; }
.kanban-head h2 { color: var(--crm-ink); font-size: 11px; }
.kanban-count { width: auto; height: auto; padding: 1px 4px; border-radius: 0; background: white; font-family: var(--crm-font-mono); font-size: 9px; }
.pipeline-card { margin-bottom: 7px; padding: 10px; border-radius: 0; box-shadow: none; }
.pipeline-card.is-selected { border-color: var(--crm-ink); background: white; box-shadow: inset 2px 0 0 var(--crm-ink); }
.pipeline-card:hover { border-color: var(--crm-ink); box-shadow: none; }
.pipeline-card h3 { color: var(--crm-ink); font-size: 11px; }
.pipeline-card-open:hover h3 { color: var(--crm-ink); text-decoration: underline; }
.card-amount { margin: 12px 0 8px; font-size: 15px; font-weight: 650; }
.pipeline-card-footer { padding-top: 8px; font-family: var(--crm-font-mono); }
.pipeline-stage-picker { grid-template-columns: 28px minmax(0, 1fr); margin-top: 8px; }
.pipeline-stage-picker select { border-radius: 0; }
.lane-action { color: var(--crm-ink); border-radius: 0; background: var(--crm-surface-subtle); }
.lane-empty { color: var(--crm-text-muted); border: 1px dashed #c9cccd; border-radius: 0; background: transparent; }

.work-panel { width: 364px; background: white; }
#work-panel-content { min-width: 364px; }
.panel-head { min-height: 106px; padding: 15px 16px 12px; background: white; box-shadow: inset 2px 0 0 var(--crm-ink); }
.panel-head .eyebrow { color: var(--crm-text-faint); }
.panel-head h2 { font-size: 15px; }
.panel-tabs { min-height: 38px; padding: 0 8px; background: white; }
.panel-tabs button { color: var(--crm-text-muted); font-size: 10px; }
.panel-tabs button.active { color: var(--crm-ink); }
.panel-tabs button.active::after { right: 5px; left: 5px; background: var(--crm-ink); }
.panel-tabs span { border-radius: 0; background: var(--crm-surface-subtle); }
.panel-scroll { height: calc(100vh - 144px); padding: 14px 16px 28px; }
.panel-section { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--crm-border); }
.panel-section:last-child { border-bottom: 0; }
.panel-section-title h3 { color: var(--crm-text-muted); font-family: var(--crm-font-mono); font-size: 9px; letter-spacing: .04em; }
.panel-detail-grid { border-radius: 0; }
.panel-detail-grid div { min-height: 54px; }
.detail-callout, .handoff-context, .update-card, .ownership-card, .panel-readonly-message { border-radius: 0; box-shadow: none; }
.panel-copy { font-size: 10px; }
.update-card { border-color: var(--crm-border); background: white; }
.update-action { border-radius: 0; }
.note-textarea { border-radius: 0; }

@media (max-width: 1023px) {
  .app-shell { grid-template-columns: 56px minmax(0, 1fr) 340px; }
  .work-panel, #work-panel-content { width: 340px; min-width: 340px; }
}
@media (max-width: 767px) {
  .metric-grid { gap: 0; }
  .metric-card { min-height: 82px; padding: 10px; }
  .pipeline-scroll { margin: 0 -16px; padding-right: 16px; padding-left: 16px; }
  .pipeline-stage-steps { overflow-x: auto; }
}

/* Programmatic focus is used to announce route changes; it should not create
   a persistent visual frame around the full workspace. */
#app:focus { outline: 0; }

/* Round-two review: keep the ten-stage navigator as one intentional strip and
   leave the record-creation action reachable while the table is scrolled. */
.pipeline-stage-steps {
  grid-template-columns: repeat(10, minmax(88px, 1fr));
  overflow-x: auto;
  scrollbar-width: thin;
}
.pipeline-stage-step span { font-size: 10px; }
.pipeline-stage-step strong { font-size: 11px; }
.pipeline-stage-step small { font-size: 9px; }
.inline-create-row td:nth-child(8) {
  position: sticky;
  right: 0;
  z-index: 4;
  background: white !important;
  box-shadow: -1px 0 0 var(--crm-border);
}

/* One unambiguous card action: normal movement advances one workflow step.
   The table still exposes the direct stage selector for dense editing. */
.pipeline-card .pipeline-stage-picker { display: none; }
.pipeline-card .lane-action {
  width: auto;
  min-height: 26px;
  margin-top: 8px;
  padding: 0;
  color: var(--crm-ink);
  border: 0;
  border-bottom: 1px solid var(--crm-ink);
  background: transparent;
  font-size: 10px;
  font-weight: 700;
}
.pipeline-card .lane-action:hover { background: transparent; }
.update-composer .panel-copy { display: none; }
.metric-label { font-size: 11px; }
.metric-note { font-size: 10px; }
.data-table th { font-size: 10px; }
.panel-section-title h3 { font-size: 10px; }
.panel-tabs button { font-size: 11px; }
@media (max-width: 767px) {
  .pipeline-stage-steps { grid-template-columns: repeat(10, 88px); }
}

/* Readability pass: retain the compact Figma-derived material language while
   lifting interface text one clear step for everyday CRM use. */
body { font-size: 14px; line-height: 1.45; }
.brand-copy strong { font-size: 15px; }
.primary-nav a { min-height: 38px; font-size: 13px; }
.primary-nav a > span:first-child { font-size: 13px; }
.nav-count, .active .nav-count { font-size: 11px; }
.user-summary strong { font-size: 13px; }
.user-summary small, .demo-chip { font-size: 11px; }
.breadcrumb { font-size: 12px; }
.today-label, .detail-toggle { font-size: 11px; }
h1, .page-heading h1, .board-title-line h1 { font-size: 26px; }
h2 { font-size: 17px; }
.button { min-height: 34px; font-size: 12px; }
.button-quiet { font-size: 11px; }
.metric-label { font-size: 12px; }
.metric-value { font-size: 28px; }
.metric-note { font-size: 11px; }
.board-privacy, .member-more { font-size: 10px; }
.view-tabs a { min-height: 30px; font-size: 11px; }
.saved-views > span, .saved-view { font-size: 11px; }
.search-control input, .filter-select, .form-control, .stage-select, .table-cell-select, .table-date-input { min-height: 34px; font-size: 12px; }
.data-table { font-size: 12px; }
.data-table th { height: 40px; font-size: 11px; }
.data-table td { height: 54px; font-size: 12px; }
.opportunity-name { font-size: 13px; }
.subtle, .table-cell-button small { font-size: 10px; }
.table-cell-button { font-size: 12px; }
.badge { min-height: 21px; font-size: 10px; }
.pipeline-stage-overview strong { font-size: 10px; }
.pipeline-stage-step span { font-size: 11px; }
.pipeline-stage-step strong { font-size: 12px; }
.pipeline-stage-step small { font-size: 10px; }
.kanban-head h2, .pipeline-card h3 { font-size: 12px; }
.kanban-count { font-size: 10px; }
.pipeline-card .account-name, .pipeline-card-footer { font-size: 11px; }
.card-amount { font-size: 16px; }
.pipeline-card .lane-action { min-height: 28px; font-size: 11px; }
.pipeline-card-open { flex: 1 1 auto; }
.pipeline-card-owner { display: inline-flex; flex: 0 0 auto; gap: 4px; align-items: center; color: var(--crm-ink); }
.pipeline-card-owner .avatar { width: 28px; height: 28px; font-size: 11px; }
.pipeline-card-owner-name { font-size: 11px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.panel-head h2 { font-size: 17px; }
.panel-head .eyebrow, .panel-section-title h3 { font-size: 11px; }
.panel-tabs button { font-size: 12px; }
.panel-detail-grid small, .panel-detail-grid strong { font-size: 11px; }
.detail-callout, .handoff-context, .ownership-card { font-size: 12px; }
.panel-copy, .panel-timeline > div, .panel-timeline strong, .collaboration-summary span { font-size: 11px; }
.collaboration-summary strong { font-size: 15px; }
.memo-guide, .note-total, .update-draft-status { font-size: 10px; }
.update-composer-controls .form-control, .update-card-head strong, .update-card > p, .handoff-note strong, .handoff-note p, .change-history strong, .change-history p { font-size: 11px; }
.update-card-head small, .handoff-note small, .change-history time { font-size: 10px; }

/* Feedback pass: make the dense desktop workspace readable at a glance. */
:root { --crm-detail-panel-width: 420px; }
body { font-size: 16px; line-height: 1.5; }
small { font-size: 12px; }
.app-shell { grid-template-columns: 224px minmax(0, 1fr) var(--crm-detail-panel-width); }
.app-shell.sidebar-collapsed { grid-template-columns: 56px minmax(0, 1fr) var(--crm-detail-panel-width); }
.app-shell.detail-closed { grid-template-columns: 224px minmax(0, 1fr) 0; }
.app-shell.sidebar-collapsed.detail-closed { grid-template-columns: 56px minmax(0, 1fr) 0; }
.work-panel { width: var(--crm-detail-panel-width); min-width: var(--crm-detail-panel-width); }
#work-panel-content { width: var(--crm-detail-panel-width); min-width: var(--crm-detail-panel-width); }
.detail-resizer { position: absolute; top: 0; bottom: 0; left: -6px; z-index: 30; width: 12px; cursor: col-resize; touch-action: none; }
.detail-resizer::after { position: absolute; top: 50%; left: 5px; width: 2px; height: 48px; background: var(--crm-border); content: ""; transform: translateY(-50%); }
.detail-resizer:hover::after, .detail-resizer:focus-visible::after, body.is-resizing-detail .detail-resizer::after { background: var(--crm-ink); }
.detail-resizer:focus-visible { outline: 2px solid var(--crm-ink); outline-offset: -2px; }
body.is-resizing-detail, body.is-resizing-detail * { cursor: col-resize !important; user-select: none; }

.brand-copy strong { font-size: 16px; }
.primary-nav a { min-height: 42px; font-size: 14px; }
.primary-nav a > span:first-child { font-size: 14px; }
.nav-count, .active .nav-count { font-size: 12px; }
.breadcrumb { font-size: 13px; }
.today-label, .detail-toggle { font-size: 12px; }
h1, .page-heading h1, .board-title-line h1 { font-size: 30px; }
h2 { font-size: 20px; }
.button { min-height: 38px; font-size: 13px; }
.button-quiet { font-size: 12px; }
.metric-card { min-height: 104px; padding: 14px 16px; }
.metric-label { font-size: 13px; }
.metric-value { font-size: 32px; }
.metric-note { font-size: 12px; }
.search-control input, .filter-select, .form-control, .stage-select, .table-cell-select, .table-date-input { min-height: 38px; font-size: 13px; }
.saved-views > span, .saved-view { min-height: 36px; font-size: 12px; }
.data-table { font-size: 13px; }
.data-table th { height: 44px; font-size: 12px; }
.data-table td { height: 58px; font-size: 13px; }
.opportunity-name { font-size: 14px; }
.subtle, .table-cell-button small { font-size: 11px; }
.table-cell-button { font-size: 13px; }
.badge { min-height: 32px; padding: 4px 10px; font-size: 14px; line-height: 1.25; }
.badge-proposal { color: white; background: #b3003b; letter-spacing: .02em; }
.badge-handoff { background: #fff1c9; }
.kanban-head h2 { font-size: 14px; }
.kanban-count { min-width: 24px; min-height: 24px; font-size: 12px; }
.pipeline-stage-steps { grid-template-columns: repeat(5, minmax(132px, 1fr)); overflow-x: auto; }
.pipeline-stage-step { min-height: 64px; align-content: center; gap: 3px; }
.pipeline-stage-step .pipeline-stage-name { display: block; overflow: visible; color: var(--crm-ink); font-family: var(--crm-font-sans); font-size: 13px; font-weight: 750; line-height: 1.2; white-space: nowrap; }
.pipeline-stage-step .pipeline-stage-count { display: block; margin-top: 2px; color: var(--crm-ink); font-size: 14px; }
.pipeline-stage-step small { font-size: 11px; }
.pipeline-stage-step.active .pipeline-stage-name, .pipeline-stage-step.active .pipeline-stage-count { color: white; }
.pipeline-card { padding: 12px; }
.pipeline-card[draggable="true"] { cursor: grab; }
.pipeline-card[draggable="true"]:active { cursor: grabbing; }
.pipeline-card.is-dragging { opacity: .45; }
.kanban-column.is-drag-target { outline: 2px solid var(--crm-ink); outline-offset: -2px; background: #e7eaeb; }
.pipeline-card h3 { font-size: 14px; }
.pipeline-card .account-name, .pipeline-card-footer { font-size: 12px; }
.pipeline-card-owner .avatar { width: 30px; height: 30px; font-size: 12px; }
.pipeline-card-owner-name { font-size: 12px; }
.card-amount { font-size: 18px; }
.pipeline-card .lane-action { min-height: 30px; font-size: 12px; }
.panel-head h2 { font-size: 19px; }
.panel-head .eyebrow, .panel-section-title h3 { font-size: 12px; }
.panel-tabs button { min-height: 42px; font-size: 13px; }
.panel-detail-grid small { font-size: 12px; }
.panel-detail-grid strong { font-size: 14px; }
.detail-callout, .handoff-context, .ownership-card { font-size: 13px; }
.panel-copy, .panel-timeline > div, .panel-timeline strong, .collaboration-summary span { font-size: 12px; }
.collaboration-summary strong { font-size: 17px; }
.memo-guide, .note-total, .update-draft-status { font-size: 11px; }
.update-composer-controls .form-control, .update-card-head strong, .update-card > p, .handoff-note strong, .handoff-note p, .change-history strong, .change-history p { font-size: 12px; }
.update-card-head small, .handoff-note small, .change-history time { font-size: 11px; }
.panel-section-actions [data-advance] { display: none; }

@media (max-width: 767px) {
  .work-panel, #work-panel-content { width: min(var(--crm-detail-panel-width), 100vw); min-width: 0; }
  .detail-resizer { display: none; }
  .pipeline-stage-steps { grid-template-columns: repeat(5, 132px); }
}

/* Sales forecast and delivery capacity: CRM plans stay visibly distinct from SCOP facts. */
.planning-summary { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid var(--crm-border); }
.planning-summary > div { min-height: 52px; padding: 9px 10px; border-right: 1px solid var(--crm-border); border-bottom: 1px solid var(--crm-border); }
.planning-summary > div:nth-child(even) { border-right: 0; }
.planning-summary > div:nth-last-child(-n + 2) { border-bottom: 0; }
.planning-summary > .planning-wide { grid-column: 1 / -1; border-right: 0; }
.planning-summary small, .planning-summary strong { display: block; }
.planning-summary small { color: var(--crm-text-muted); font-size: 12px; }
.planning-summary strong { margin-top: 3px; color: var(--crm-ink); font-size: 14px; }
.offering-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.offering-tags span { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 7px; border: 1px solid #cbd5e1; color: #344054; background: #f8fafc; font-size: 11px; font-weight: 750; }
.delivery-plan-section .panel-copy { margin: 9px 0 0; }
.plan-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.plan-form-grid .form-label { display: grid; gap: 6px; margin: 0; }
.offering-picker { margin: 14px 0 0; padding: 0; border: 0; }
.offering-picker legend { color: var(--crm-ink); font-size: 14px; font-weight: 800; }
.offering-picker p { margin: 5px 0 9px; color: var(--crm-text-muted); font-size: 12px; line-height: 1.5; }
.offering-picker > div { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.offering-picker label { display: flex; align-items: center; gap: 7px; min-height: 36px; padding: 7px 8px; border: 1px solid var(--crm-border); color: #344054; background: #fff; font-size: 13px; }
.offering-picker input { width: 16px; height: 16px; accent-color: var(--crm-brand-key); }
.delivery-month-control { display: inline-flex; align-items: center; gap: 7px; color: var(--crm-text-muted); font-size: 12px; font-weight: 700; }
.delivery-month-control .filter-select { min-height: 34px; padding: 0 28px 0 8px; background-position: right 8px center; font-size: 13px; }
.capacity-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 16px; border: 1px solid var(--crm-border); background: #fff; }
.capacity-card { min-height: 94px; padding: 14px 16px; border-right: 1px solid var(--crm-border); }
.capacity-card:last-of-type { border-right: 0; }
.capacity-card > span, .capacity-card > small { display: block; color: var(--crm-text-muted); font-size: 12px; }
.capacity-card > strong { display: block; margin: 4px 0; color: var(--crm-ink); font-family: var(--crm-font-mono); font-size: 26px; letter-spacing: -.04em; }
.capacity-card > strong small { color: var(--crm-text-muted); font-family: inherit; font-size: 13px; }
.capacity-card.at-limit { box-shadow: inset 3px 0 0 var(--crm-brand-key); background: #fff8fa; }
.capacity-summary > p { grid-column: 1 / -1; margin: 0; padding: 9px 16px; border-top: 1px solid var(--crm-border); color: var(--crm-text-muted); font-size: 12px; }
.capacity-gantt .gantt-head, .capacity-gantt .gantt-row { grid-template-columns: 300px minmax(730px, 1fr); }
.capacity-gantt .date-header, .capacity-gantt .gantt-track { grid-template-columns: repeat(var(--gantt-columns), minmax(24px, 1fr)); }
.capacity-gantt .gantt-track::after { display: none; }
.capacity-gantt .gantt-label, .capacity-gantt .gantt-track { min-height: 86px; }
.capacity-gantt .gantt-label small + small { margin-top: 3px; }
.gantt-group-label { min-width: 1030px; padding: 8px 16px; color: var(--crm-text-muted); border-bottom: 1px solid var(--crm-border); background: #f8fafc; font-family: var(--crm-font-mono); font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.gantt-empty { min-width: 1030px; padding: 16px; color: var(--crm-text-muted); border-bottom: 1px solid var(--crm-border); background: #fff; font-size: 13px; }
.capacity-gantt .gantt-bar { grid-row: 1; align-self: end; height: 30px; margin-bottom: 10px; border-radius: 0; box-shadow: none; }
.capacity-gantt .gantt-bar span { margin-left: 6px; color: inherit; font-family: var(--crm-font-mono); font-size: 10px; font-weight: 700; opacity: .82; }
.capacity-gantt .gantt-bar.is-confirmed { color: #fff; background: var(--crm-ink); }
.capacity-gantt .gantt-bar.is-forecast { color: #344054; border: 1px dashed #667085; background: #f2f4f7; }
.legend-square.forecast { border: 1px dashed #667085; background: #f2f4f7; }
.gantt-deadline { z-index: 2; display: grid; grid-row: 1; inline-size: 34px; block-size: 20px; box-sizing: border-box; align-self: start; justify-self: start; place-items: center; margin-top: 8px; padding: 0; color: #fff; font-size: 10px; font-weight: 800; line-height: 1; text-align: center; }
.gantt-deadline.deadline-submission, .legend-deadline.submission { background: #b42318; }
.gantt-deadline.deadline-creative, .legend-deadline.creative { background: #175cd3; }
.gantt-deadline.deadline-report, .legend-deadline.report { background: #027a48; }
.legend-deadline { display: inline-block; width: 10px; height: 10px; }

@media (max-width: 767px) {
  .plan-form-grid, .offering-picker > div, .capacity-summary { grid-template-columns: 1fr; }
  .capacity-card { border-right: 0; border-bottom: 1px solid var(--crm-border); }
  .capacity-card:last-of-type { border-bottom: 0; }
}

@media (max-width: 1500px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1280px) {
  .app-shell, .app-shell.sidebar-collapsed { grid-template-columns: 56px minmax(0, 1fr) var(--crm-detail-panel-width); }
  .app-shell.detail-closed, .app-shell.sidebar-collapsed.detail-closed { grid-template-columns: 56px minmax(0, 1fr) 0; }
}

/* Account relationship diagram: a single parent-to-children connector tree.
   Grid owns the responsive node positions; positioned pseudo-elements only draw lines. */
.relationship-map {
  display: grid;
  grid-template-rows: auto auto;
  justify-items: stretch;
  min-height: 176px;
  overflow: visible;
  padding: 20px 18px 18px;
  background: #f8fafb;
  isolation: isolate;
}
.org-root {
  justify-self: center;
  margin: 0;
  border-radius: 2px;
  box-shadow: none;
}
.org-root::after {
  position: absolute;
  z-index: -1;
  top: 100%;
  left: 50%;
  width: 1px;
  height: 26px;
  background: var(--crm-border);
  content: "";
}
.org-branches {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 50px;
}
.org-branches::before {
  position: absolute;
  z-index: -1;
  top: -25px;
  right: calc(16.667% + 1px);
  left: calc(16.667% + 1px);
  height: 1px;
  background: var(--crm-border);
  content: "";
}
.org-branch {
  position: relative;
  display: flex;
  justify-content: center;
  min-width: 0;
}
.org-branch::before {
  position: absolute;
  z-index: -1;
  top: -25px;
  left: 50%;
  width: 1px;
  height: 25px;
  background: var(--crm-border);
  content: "";
}
.org-node {
  justify-content: center;
  min-width: 0;
  max-width: 100%;
  border-radius: 2px;
  box-shadow: none;
}

@media (max-width: 767px) {
  .relationship-map { min-height: 170px; padding-inline: 10px; }
  .org-branches { gap: 4px; }
  .org-node { padding-inline: 5px; font-size: 10px; }
}