:root {
  --cn-brand: #1f4e79;
  --cn-brand-soft: #e8f0f8;
  --cn-bg: #f5f6f8;
  --cn-card: #fff;
  --cn-border: #e3e6ea;
  --cn-muted: #6b7280;
  --bs-primary: #1f4e79;
  --bs-primary-rgb: 31, 78, 121;
  --bs-link-color: #1f4e79;
  --bs-link-color-rgb: 31, 78, 121;
}

body { background: var(--cn-bg); color: #1f2937; font-size: .925rem; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }

.btn-primary { --bs-btn-bg: var(--cn-brand); --bs-btn-border-color: var(--cn-brand); --bs-btn-hover-bg: #183f62; --bs-btn-hover-border-color: #183f62; --bs-btn-active-bg: #143654; }

/* Top bar */
.cn-topbar { background: #fff; border-bottom: 1px solid var(--cn-border); padding: .35rem 0; }
.cn-topbar .navbar-brand { font-weight: 600; font-size: 1rem; display: flex; align-items: center; gap: .5rem; }
.cn-mark { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: .45rem; background: var(--cn-brand); color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .02em; }
.cn-topbar .nav-link { color: #374151; border-radius: .4rem; padding: .4rem .7rem !important; }
.cn-topbar .nav-link:hover { background: var(--cn-bg); text-decoration: none; }
.cn-topbar .nav-link.active { background: var(--cn-brand-soft); color: var(--cn-brand); font-weight: 600; }
.cn-old { font-size: .65rem; opacity: .5; }
.cn-search { position: relative; min-width: 16rem; }
.cn-search .bi { position: absolute; left: .6rem; top: 50%; transform: translateY(-50%); color: var(--cn-muted); font-size: .8rem; }
.cn-search .form-control { padding-left: 1.8rem; background: var(--cn-bg); border-color: transparent; }
.cn-search .form-control:focus { background: #fff; border-color: var(--cn-border); }
.cn-user { display: flex; align-items: center; gap: .45rem; border: 0; }
.cn-avatar { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--cn-brand-soft); color: var(--cn-brand); font-size: .72rem; font-weight: 700; flex: none; }
.cn-avatar-sm { width: 1.6rem; height: 1.6rem; font-size: .62rem; }

/* Page */
.cn-main { padding: 1.5rem 1.5rem 3rem; max-width: 2000px; }
.cn-page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.cn-card { background: var(--cn-card); border: 1px solid var(--cn-border); border-radius: .6rem; padding: 1.1rem 1.2rem; }
.cn-card-title { font-size: .95rem; font-weight: 600; margin-bottom: .9rem; }
.cn-stat { background: var(--cn-card); border: 1px solid var(--cn-border); border-radius: .6rem; padding: .9rem 1.1rem; display: flex; flex-direction: column; }
.cn-stat-label { color: var(--cn-muted); font-size: .8rem; }
.cn-stat-value { font-size: 1.6rem; font-weight: 600; line-height: 1.2; }
.cn-empty { text-align: center; padding: 3rem 1rem; }

.cn-table thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: var(--cn-muted); font-weight: 600; background: #fafbfc; }
.cn-table td, .cn-table th { padding-left: 1rem; padding-right: 1rem; }
.cn-col-role { width: 14rem; }

/* Pipeline bars */
.cn-funnel li + li { margin-top: .35rem; }
.cn-funnel a { display: grid; grid-template-columns: 9.5rem 1fr auto; align-items: center; gap: .75rem; color: inherit; padding: .3rem .4rem; border-radius: .4rem; }
.cn-funnel a:hover { background: var(--cn-bg); text-decoration: none; }
.cn-funnel-bar { background: var(--cn-bg); border-radius: 1rem; height: .6rem; overflow: hidden; }
.cn-funnel-bar span { display: block; height: 100%; width: 0; background: var(--cn-brand); border-radius: 1rem; transition: width .4s ease; }
.cn-funnel-count { text-align: right; font-weight: 600; }

.cn-feed li { display: flex; gap: .6rem; padding: .45rem 0; }
.cn-feed li + li { border-top: 1px solid var(--cn-border); }
.cn-results li { padding: .45rem 0; }
.cn-results li + li { border-top: 1px solid var(--cn-border); }

/* Sign-in */
.cn-auth { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.cn-auth-card { width: 100%; max-width: 24rem; background: #fff; border: 1px solid var(--cn-border); border-radius: .75rem; padding: 2rem; }
.cn-auth-brand { display: flex; align-items: center; gap: .6rem; font-weight: 600; margin-bottom: 1.5rem; }

@media (max-width: 991.98px) {
  .cn-search { min-width: 0; }
  .cn-main { padding: 1rem 1rem 2rem; }
}
@media (max-width: 575.98px) {
  .cn-funnel a { grid-template-columns: 7.5rem 1fr 2rem; gap: .5rem; }
}

/* Lists and filters */
.cn-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; align-items: center; }
.cn-filters > .form-control { flex: 1 1 16rem; max-width: 26rem; }
.cn-filters > .form-select, .cn-filters > .ts-wrapper { flex: 0 1 11rem; }
.cn-filters > .cn-filter-wide, .cn-filters > .ts-wrapper.cn-filter-wide { flex-basis: 16rem; }
.cn-sort { color: inherit; }
.cn-sort.active { color: var(--cn-brand); }
.cn-sort.active::after { content: " ↓"; }
.min-w-0 { min-width: 0; }
.cn-narrow { max-width: 40rem; }

/* Record pages */
.cn-dl { display: grid; grid-template-columns: 6.5rem 1fr; gap: .4rem .75rem; font-size: .875rem; }
.cn-dl dt { color: var(--cn-muted); font-weight: 500; }
.cn-dl dd { margin: 0; word-break: break-word; }
.cn-notes { font-size: .875rem; background: var(--cn-bg); border-radius: .4rem; padding: .6rem .75rem; white-space: normal; }
.cn-people li { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem 0; }
.cn-people li + li { border-top: 1px solid var(--cn-border); }
.cn-suggest { border-top: 1px dashed var(--cn-border); padding-top: .75rem; }
.cn-mini-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.cn-mini-stats > div { background: var(--cn-bg); border-radius: .4rem; padding: .5rem .7rem; font-size: .75rem; color: var(--cn-muted); display: flex; flex-direction: column; }
.cn-mini-stats span { font-size: 1.15rem; font-weight: 600; color: #1f2937; line-height: 1.3; }
.cn-form .form-label { font-weight: 500; font-size: .85rem; margin-bottom: .3rem; }
.ts-wrapper.form-select { padding: 0; }
@media (max-width: 575.98px) { .cn-mini-stats { grid-template-columns: repeat(2, 1fr); } }

/* Onboarding board */
.cn-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15.5rem, 1fr); gap: .75rem; overflow-x: auto; padding-bottom: .75rem; align-items: start; }
.cn-column { background: #eceef2; border-radius: .6rem; padding: .6rem; min-height: 8rem; }
.cn-column-hold { background: #f3eee6; }
.cn-column-head { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: .82rem; padding: .15rem .25rem .55rem; color: #374151; }
.cn-column-empty { color: var(--cn-muted); font-size: .8rem; text-align: center; padding: 1rem 0; margin: 0; }
.cn-tile { display: flex; flex-direction: column; gap: .35rem; background: #fff; border: 1px solid var(--cn-border); border-radius: .5rem; padding: .65rem .7rem; color: inherit; margin-bottom: .5rem; transition: box-shadow .15s, border-color .15s; }
.cn-tile:hover { text-decoration: none; border-color: #c9d3de; box-shadow: 0 2px 8px rgba(16, 24, 40, .06); }
.cn-tile-title { font-weight: 600; font-size: .88rem; line-height: 1.3; color: var(--cn-brand); }
.cn-tile-sub { font-size: .75rem; color: var(--cn-muted); margin-top: -.2rem; }
.cn-tile-meta { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.cn-chip { display: inline-flex; align-items: center; gap: .2rem; font-size: .7rem; color: #4b5563; background: var(--cn-bg); border-radius: 1rem; padding: .1rem .45rem; }
.cn-chip-late { background: #fde8e8; color: #b42318; }
.cn-avatars { display: inline-flex; margin-left: auto; }
.cn-avatar-xs { width: 1.35rem; height: 1.35rem; font-size: .55rem; border: 2px solid #fff; margin-left: -.35rem; }
.cn-avatar-more { background: #e5e7eb; color: #4b5563; }
.cn-progress { display: block; height: .3rem; background: var(--cn-bg); border-radius: 1rem; overflow: hidden; }
.cn-progress > span { display: block; height: 100%; width: 0; background: #2e9d6a; border-radius: 1rem; transition: width .4s; }
.cn-progress-lg { height: .5rem; }

/* Stage badges */
.cn-stage { display: inline-block; font-size: .72rem; font-weight: 600; border-radius: 1rem; padding: .15rem .55rem; background: #eef2f6; color: #374151; }
.cn-stage-converting { background: #fff4e0; color: #9a5b00; }
.cn-stage-final-design { background: #e6f4fb; color: #0b6a91; }
.cn-stage-website-completed { background: #e7f6ee; color: #1d7a4c; }
.cn-stage-for-delivery { background: var(--cn-brand-soft); color: var(--cn-brand); }
.cn-stage-on-hold { background: #fdecec; color: #b42318; }
.cn-stage-archived { background: #eceef1; color: #6b7280; }

/* Project page */
.cn-logo { width: 3rem; height: 3rem; object-fit: contain; border-radius: .5rem; border: 1px solid var(--cn-border); background: #fff; flex: none; }
.cn-stagebar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; padding: .7rem .9rem; }
.cn-steps { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.cn-step button, .cn-step-label { display: inline-flex; align-items: center; gap: .4rem; border: 0; background: none; padding: .35rem .6rem; border-radius: 2rem; font-size: .8rem; color: var(--cn-muted); }
.cn-step button:hover { background: var(--cn-bg); color: #1f2937; }
.cn-step-dot { display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: #e5e7eb; color: #4b5563; font-size: .68rem; font-weight: 700; }
.cn-step.done .cn-step-dot { background: #d1ead9; color: #1d7a4c; }
.cn-step.done button, .cn-step.done .cn-step-label { color: #1f2937; }
.cn-step.current .cn-step-label { background: var(--cn-brand-soft); color: var(--cn-brand); font-weight: 600; }
.cn-step.current .cn-step-dot { background: var(--cn-brand); color: #fff; }
.cn-stage-side { display: flex; gap: .4rem; }
.cn-tabs .nav-link { color: #4b5563; font-size: .88rem; }
.cn-tabs .nav-link.active { font-weight: 600; color: var(--cn-brand); }
.cn-composer .ql-toolbar.ql-snow, .cn-form .ql-toolbar.ql-snow, details .ql-toolbar.ql-snow { border-radius: .4rem .4rem 0 0; border-color: var(--cn-border); }
.cn-editor.ql-container.ql-snow { border-radius: 0 0 .4rem .4rem; border-color: var(--cn-border); font-family: inherit; font-size: .9rem; min-height: 6rem; }
.cn-editor-tall.ql-container { min-height: 14rem; }
.cn-file-input { max-width: 22rem; }
.cn-timeline-day { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--cn-muted); padding: .9rem 0 .3rem; }
.cn-timeline-day:first-child { padding-top: 0; }
.cn-timeline-item { display: flex; gap: .65rem; padding: .55rem 0; border-top: 1px solid var(--cn-border); }
.cn-timeline-body { flex: 1; min-width: 0; }
.cn-timeline-head { display: flex; gap: .5rem; align-items: baseline; font-size: .85rem; }
.cn-timeline-item.is-system .cn-rich { color: #4b5563; font-size: .82rem; }
.cn-timeline-item.is-system .cn-avatar { background: #f1f3f6; color: #6b7280; }
.cn-rich { font-size: .9rem; word-break: break-word; }
.cn-rich p:last-child { margin-bottom: 0; }
.cn-rich img { max-width: 100%; max-height: 220px; border-radius: .4rem; border: 1px solid var(--cn-border); margin: .35rem .35rem 0 0; cursor: zoom-in; }
.cn-rich video { max-width: 100%; max-height: 260px; border-radius: .4rem; margin-top: .35rem; }
.cn-rich del { color: #8a8f98; }
.cn-rich del + span, .cn-rich .text-success { color: #1d7a4c; }
.cn-group-title { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; margin: 1rem 0 .4rem; }
.cn-tasks li, .cn-checklist li, .cn-files li { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; border-top: 1px solid var(--cn-border); }
.cn-checklist li:first-child, .cn-files li:first-child { border-top: 0; }
.cn-tasks li.is-done .cn-task-name { color: var(--cn-muted); text-decoration: line-through; }
.cn-check { border: 0; background: none; padding: 0; font-size: 1.1rem; line-height: 1; color: #9ca3af; }
.cn-check .bi-check-square-fill { color: #2e9d6a; }
button.cn-check:hover { color: var(--cn-brand); }
.cn-owner-select { width: 11rem; }
.cn-link-like { color: var(--bs-link-color); cursor: pointer; }
.cn-link-like:hover { text-decoration: underline; }
.cn-upload-inline { display: inline; }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
@media (max-width: 575.98px) {
  .cn-board { grid-auto-columns: 82%; }
  .cn-owner-select { width: 8rem; }
}

/* Client progress page */
.cn-client { background: var(--cn-bg); }
.cn-client-top { background: #fff; border-bottom: 1px solid var(--cn-border); padding: .7rem 0; font-weight: 600; }
.cn-client-top .cn-client-wrap { display: flex; align-items: center; gap: .5rem; }
.cn-client-wrap { max-width: 860px; margin: 0 auto; padding-left: 1rem; padding-right: 1rem; }
.cn-client-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; list-style: none; margin: 0; padding: 0; counter-reset: s; }
.cn-client-steps li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; font-size: .78rem; color: var(--cn-muted); position: relative; }
.cn-client-steps li::before { content: ""; position: absolute; top: .65rem; left: -50%; width: 100%; height: 2px; background: #e5e7eb; z-index: 0; }
.cn-client-steps li:first-child::before { display: none; }
.cn-client-steps li.done::before, .cn-client-steps li.current::before { background: #2e9d6a; }
.cn-client-steps .cn-step-dot { position: relative; z-index: 1; }
.cn-client-steps li.done .cn-step-dot { background: #2e9d6a; color: #fff; }
.cn-client-steps li.current .cn-step-dot { background: var(--cn-brand); color: #fff; }
.cn-client-steps li.current { color: var(--cn-brand); font-weight: 600; }
.cn-client-steps li.done { color: #1f2937; }
@media (max-width: 575.98px) { .cn-client-steps { grid-template-columns: 1fr; } .cn-client-steps li { flex-direction: row; text-align: left; } .cn-client-steps li::before { display: none; } }

/* Collapsible cards (details/summary) */
details.cn-card > summary { cursor: pointer; }
details.cn-card .cn-caret { transition: transform .15s; color: var(--cn-muted); }
details.cn-card[open] .cn-caret { transform: rotate(90deg); }
.cn-num { width: 1.25rem; text-align: right; flex: none; }

/* Work items and documentation */
.cn-status-pills .nav-link { font-size: .82rem; padding: .3rem .7rem; color: #4b5563; }
.cn-status-pills .nav-link.active { background: var(--cn-brand); color: #fff; }
.cn-status-pills .nav-link.active .badge { background: rgba(255, 255, 255, .25) !important; color: #fff; }
.cn-status-select { min-width: 9.5rem; }
.cn-doc iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: .5rem; margin: .5rem 0; }
.cn-doc .ratio iframe { position: static; }
.cn-doc h2 { font-size: 1.15rem; margin-top: 1rem; }
.cn-doc h3 { font-size: 1rem; margin-top: .9rem; }
.cn-stat-link { color: inherit; transition: border-color .15s, box-shadow .15s; }
.cn-stat-link:hover { text-decoration: none; border-color: #c9d3de; box-shadow: 0 2px 8px rgba(16, 24, 40, .06); }

/* Sales */
.cn-deal-board .cn-column-won { background: #e9f5ee; }
.cn-deal-board .cn-column-lost { background: #f6eeee; }
.cn-column-sum { font-size: .75rem; color: var(--cn-muted); padding: 0 .25rem .5rem; margin-top: -.35rem; }
.cn-dropzone { min-height: 3rem; border-radius: .4rem; }
.cn-column.is-over .cn-dropzone { background: rgba(31, 78, 121, .06); outline: 2px dashed rgba(31, 78, 121, .25); }
.cn-deal[draggable="true"] { cursor: grab; }
.cn-deal.is-dragging { opacity: .45; }
.cn-deal-value { font-weight: 600; font-size: .85rem; }
.cn-deal-stage-open { background: var(--cn-brand-soft); color: var(--cn-brand); }
.cn-deal-stage-won { background: #e7f6ee; color: #1d7a4c; }
.cn-deal-stage-lost { background: #fdecec; color: #b42318; }
.cn-deal-amount { font-size: 1.6rem; font-weight: 600; line-height: 1.2; }
.cn-segmented { display: flex; flex-wrap: wrap; gap: .3rem; }
.cn-activity li { display: flex; gap: .6rem; align-items: flex-start; padding: .6rem 0; border-top: 1px solid var(--cn-border); }
.cn-activity li:first-child { border-top: 0; }
.cn-activity li.is-done .cn-activity-body { color: var(--cn-muted); text-decoration: line-through; }
.cn-activity-icon { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--cn-bg); color: #4b5563; flex: none; font-size: .8rem; }
.cn-activity-body { font-size: .88rem; white-space: normal; word-break: break-word; }
.cn-date { width: 10rem; }
.cn-month { width: 10rem; flex: 0 0 auto; }
.cn-pct { width: 6.5rem; flex: none; text-align: center; }
.cn-chart { position: relative; height: 260px; }
.cn-funnel-wide { min-width: 7rem; }
.cn-dialog { border: 1px solid var(--cn-border); border-radius: .6rem; padding: 1.1rem 1.2rem; width: min(22rem, 92vw); }
.cn-dialog::backdrop { background: rgba(16, 24, 40, .35); }

/* SOPs */
.cn-sop-card { display: flex; flex-direction: column; color: inherit; transition: border-color .15s, box-shadow .15s; }
.cn-sop-card:hover { text-decoration: none; border-color: #c9d3de; box-shadow: 0 2px 8px rgba(16, 24, 40, .06); }
.cn-sop-number { font-size: .75rem; font-weight: 600; color: var(--cn-muted); letter-spacing: .02em; }
.cn-chip-ok { background: #e7f6ee; color: #1d7a4c; }
.cn-toc { position: sticky; top: 4.5rem; }
.cn-toc ol { padding-left: 1.2rem; font-size: .85rem; }
.cn-toc li { padding: .15rem 0; }
.cn-sop { padding: 2rem 2.2rem; }
.cn-sop-head { border-bottom: 2px solid var(--cn-brand); padding-bottom: 1.2rem; margin-bottom: 1.5rem; }
.cn-sop-org { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; color: var(--cn-brand); }
.cn-sop-kind { font-size: .8rem; color: var(--cn-muted); text-transform: uppercase; letter-spacing: .04em; }
.cn-sop-title { font-size: 1.45rem; font-weight: 600; margin: .3rem 0 1rem; }
.cn-sop-meta { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .5rem 1.25rem; margin: 0; }
.cn-sop-meta dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--cn-muted); font-weight: 600; }
.cn-sop-meta dd { margin: 0; font-size: .88rem; }
.cn-sop-summary { margin: 1rem 0 0; font-size: .92rem; background: var(--cn-bg); border-radius: .4rem; padding: .7rem .9rem; }
.cn-sop-section { padding: .4rem 0 1rem; scroll-margin-top: 5rem; }
.cn-sop-section + .cn-sop-section { border-top: 1px solid var(--cn-border); padding-top: 1.1rem; }
.cn-sop-section.is-editing { border-left: 3px solid var(--cn-brand-soft); padding-left: .9rem; }
.cn-sop-section h2 { font-size: 1.05rem; font-weight: 600; margin-bottom: .6rem; }
.cn-sop-num { color: var(--cn-brand); }
.cn-sop-tools form { display: inline; }
.cn-sop-body { font-size: .92rem; line-height: 1.6; }
.cn-sop-body h3 { font-size: .95rem; font-weight: 600; margin: 1.1rem 0 .5rem; }
.cn-sop-body blockquote { border-left: 3px solid var(--cn-brand); padding: .3rem .9rem; margin: .7rem 0; background: var(--cn-bg); font-style: italic; }
.cn-rich table { width: 100%; border-collapse: collapse; margin: .7rem 0 1rem; font-size: .88rem; }
.cn-rich th, .cn-rich td { border: 1px solid var(--cn-border); padding: .4rem .6rem; vertical-align: top; text-align: left; }
.cn-rich thead th, .cn-rich table tr:first-child td { background: #f1f4f8; font-weight: 600; }
.cn-sop-foot { margin-top: 1.5rem; padding-top: .8rem; border-top: 1px solid var(--cn-border); font-size: .75rem; color: var(--cn-muted); }
.ql-editor table td { border: 1px solid #ccc; padding: .3rem .5rem; }
.ql-snow .ql-toolbar button .bi, .ql-toolbar.ql-snow button .bi { font-size: .95rem; line-height: 1; }
@media (max-width: 575.98px) { .cn-sop { padding: 1.1rem; } }

/* Printing (SOPs and any page): just the content */
@media print {
  .cn-topbar, .d-print-none, .alert, .btn, nav.small { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .cn-main { padding: 0; max-width: none; }
  .cn-card { border: 0; padding: 0; }
  .col-lg-9 { width: 100% !important; flex: 0 0 100%; max-width: 100%; }
  .cn-sop-section { break-inside: auto; }
  .cn-sop-section h2 { break-after: avoid; }
  .cn-rich table { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}

/* Rich-text editors grow with their content (Quill's default 100% height let long text spill over the buttons below). */
.cn-editor.ql-container { height: auto; }
.cn-editor .ql-editor { min-height: 6rem; max-height: 70vh; overflow-y: auto; }
.cn-editor-tall .ql-editor { min-height: 14rem; }
.cn-card-attention { border-color: #f3d58a; background: #fffbf0; }

/* Onboarding stage overview tiles */
.cn-stage-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .5rem; }
.cn-stage-tile { display: flex; flex-direction: column; background: var(--cn-card); border: 1px solid var(--cn-border); border-left: 4px solid #cfd6df; border-radius: .5rem; padding: .55rem .75rem; color: inherit; transition: border-color .15s, box-shadow .15s; }
.cn-stage-tile:hover { text-decoration: none; box-shadow: 0 2px 8px rgba(16, 24, 40, .06); }
.cn-stage-tile.is-active { box-shadow: 0 0 0 2px var(--cn-brand); }
.cn-stage-tile.is-empty .cn-stage-tile-count { color: #b8c0ca; }
.cn-stage-tile-label { font-size: .75rem; color: var(--cn-muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-stage-tile-count { font-size: 1.45rem; font-weight: 600; line-height: 1.2; }
.cn-stage-tile-note { font-size: .7rem; color: var(--cn-muted); }
.cn-stage-tile-note.is-late { color: #b42318; font-weight: 600; }
.cn-stage-tile-all { border-left-color: var(--cn-brand); }
.cn-stage-tile-pending { border-left-color: #9aa5b1; }
.cn-stage-tile-converting { border-left-color: #e0a100; }
.cn-stage-tile-final-design { border-left-color: #0b8ec2; }
.cn-stage-tile-website-completed { border-left-color: #2e9d6a; }
.cn-stage-tile-for-delivery { border-left-color: var(--cn-brand); }
.cn-stage-tile-on-hold { border-left-color: #d64545; }
.cn-stage-tile-archived { border-left-color: #c3c8cf; }
.cn-group-row td { background: #f7f8fa; padding-top: .45rem !important; padding-bottom: .45rem !important; }
.cn-activity-form .cn-segmented .btn { font-size: .78rem; }
.cn-activity-meeting, .cn-activity-demo, .cn-activity-visit { background: #e8f0f8; color: var(--cn-brand); }
.cn-activity-call { background: #e7f6ee; color: #1d7a4c; }
.cn-activity-email { background: #fff4e0; color: #9a5b00; }

/* Pipelines */
.cn-pipeline-menu { min-width: 18rem; max-height: 70vh; overflow-y: auto; }
.cn-template-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .5rem; }
.cn-template { display: flex; flex-direction: column; gap: .15rem; border: 1px solid var(--cn-border); border-radius: .5rem; padding: .6rem .75rem .6rem 2.2rem; position: relative; cursor: pointer; }
.cn-template .form-check-input { position: absolute; left: .75rem; top: .75rem; }
.cn-template:has(input:checked) { border-color: var(--cn-brand); box-shadow: 0 0 0 1px var(--cn-brand); }
.cn-move-to { width: 9rem; }
.cn-role-select { width: 7.5rem; flex: none; }
.cn-type-filter { display: flex; flex-wrap: wrap; gap: .25rem; }
.cn-type-filter a { font-size: .75rem; padding: .15rem .55rem; border-radius: 1rem; background: var(--cn-bg); color: #4b5563; }
.cn-type-filter a:hover { text-decoration: none; background: #e7eaee; }
.cn-type-filter a.is-active { background: var(--cn-brand); color: #fff; }

/* Logged emails */
.cn-emails > li { border-top: 1px solid var(--bs-border-color); }
.cn-emails > li:first-child { border-top: 0; }
.cn-emails summary { display: flex; gap: .65rem; align-items: flex-start; padding: .6rem 0; cursor: pointer; list-style: none; }
.cn-emails summary::-webkit-details-marker { display: none; }
.cn-emails summary:hover .fw-semibold { color: var(--cn-brand); }
.cn-email-dir { flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; }
.cn-email-out { background: #e0ecff; color: #1d4ed8; }
.cn-email-in { background: #dcfce7; color: #15803d; }
.cn-email-preview { color: #4b5563; }
.cn-emails details[open] .cn-email-preview { display: none !important; }
.cn-email-body { margin: 0 0 .9rem 2.4rem; padding: .75rem; background: var(--cn-bg); border-radius: .5rem; }
.cn-email-text { font-size: .875rem; white-space: normal; overflow-wrap: anywhere; max-height: 60vh; overflow-y: auto; }
.cn-file-select { width: auto; min-width: 14rem; flex: 1 1 14rem; }

/* AI assistant */
.cn-ai { border-left: 3px solid #8b5cf6; }
.cn-ai-note { border-top: 1px solid var(--bs-border-color); margin-top: .75rem; padding-top: .6rem; }
.cn-ai-note summary { cursor: pointer; }
.cn-ai-answer { font-size: .9rem; margin: .5rem 0; }
.cn-ai-answer p { margin-bottom: .5rem; }
.cn-ai-answer ul { padding-left: 1.2rem; margin-bottom: .5rem; }
.cn-ai-h { font-size: .9rem; font-weight: 600; margin: .9rem 0 .35rem; }

/* IT setup guide on Integrations */
.cn-guide { border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .6rem .8rem; background: var(--cn-brand-soft); }
.cn-guide summary { cursor: pointer; }
.cn-guide-steps { list-style: none; }
.cn-guide-steps > li { padding: .6rem 0; border-top: 1px solid var(--bs-border-color); }
.cn-guide-steps > li:first-child { border-top: 0; }
.cn-guide-steps p, .cn-guide-steps ul { margin-bottom: .4rem; }
.cn-code { background: #0f172a; color: #e2e8f0; padding: .6rem .75rem; border-radius: .4rem; font-size: .75rem; white-space: pre-wrap; overflow-wrap: anywhere; margin-bottom: .4rem; }

.cn-email-original { margin-top: .5rem; }
.cn-email-original summary { cursor: pointer; }
.cn-email-original .cn-email-text { color: #6b7280; border-left: 2px solid var(--bs-border-color); padding-left: .6rem; }

/* Platforms */
.cn-plat-active { background: #e7f6ee; color: #1d7a4c; }
.cn-plat-paused { background: #fff4e0; color: #9a5b00; }
.cn-plat-suspended { background: #fdecec; color: #b42318; }
.cn-plat-can-be-dropped { background: #ede3fb; color: #5b3a9a; }
.cn-plat-dropped { background: #343a40; color: #f1f3f5; }
/* List rows by status: Suspended red, Can be Dropped light purple, Dropped dark. */
.cn-table tr.cn-plat-row-suspended { --bs-table-bg: #f8d4d4; --bs-table-color: #7a1212; }
.cn-table tr.cn-plat-row-can-be-dropped { --bs-table-bg: #f1e9fd; }
.cn-table tr.cn-plat-row-dropped { --bs-table-bg: #3a3f45; --bs-table-color: #e9ecef; }
.cn-table tr.cn-plat-row-dropped a, .cn-table tr.cn-plat-row-dropped .text-body-tertiary { color: #c9dcff !important; }
.cn-plat-purpose { max-width: 32rem; }
.cn-plat-notes { max-width: 22rem; }

/* Home sidebar */
.cn-home-side { display: flex; flex-direction: column; gap: .75rem; }
.cn-side-stat .cn-stat-label i { margin-right: .2rem; }
.cn-side-divider { display: flex; align-items: center; gap: .5rem; margin: .5rem 0 0; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--cn-muted); }
.cn-side-divider::before, .cn-side-divider::after { content: ""; flex: 1; border-top: 1px solid var(--cn-border); }

/* Logged in as someone else */
.cn-impersonating { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .5rem 1rem; background: #ffe08a; color: #3d2e00; font-size: .875rem; position: sticky; top: 0; z-index: 1031; }
.cn-impersonating form { margin: 0; }
.cn-perm-select { min-width: 8.5rem; }
/* Sales lists: packages and their inclusions */
.cn-product-tree .cn-depth-1 { padding-left: 1.5rem; }
/* Deal form: check box lists, new-client box, steps in the New client window */
.cn-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .15rem 1rem; }
.cn-new-client { border: 1px dashed var(--cn-border); border-radius: .5rem; padding: .75rem 1rem; }
.cn-steps { display: flex; gap: .5rem; list-style: none; padding: 0; flex-wrap: wrap; }
.cn-steps li { padding: .2rem .6rem; border-radius: 1rem; background: var(--bs-tertiary-bg); color: var(--cn-muted); }
.cn-steps li.is-active { background: var(--bs-primary); color: #fff; }
.cn-mini-list { margin: .15rem 0 0; padding-left: 1.1rem; font-size: .875rem; color: var(--cn-muted); }
/* Sales lists: add-on price table */
.cn-addon-table td { min-width: 5.5rem; }
.cn-addon-table td:first-child { min-width: 14rem; }
.cn-addon-table td:nth-child(8) { min-width: 16rem; }
.cn-addon-table .cn-money { min-width: 7rem; }
.cn-addon-table .cn-unit { max-width: 6rem; }
.cn-addon-table .cn-qty { max-width: 5rem; }
/* Deal form: add-on rows with quantity and line totals */
.cn-addon-row { display: flex; align-items: center; gap: .75rem; padding: .4rem 0; border-top: 1px solid var(--cn-border); }
.cn-addon-qty { width: 7.5rem; flex: none; }
.cn-addon-total { width: 9rem; flex: none; }
/* Sales → Quote builder */
.cn-stat-accent { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.cn-quote-lines td { padding: .3rem .25rem; }
.cn-quote-lines .cn-q-sec td { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--cn-muted); padding-top: .9rem; border-bottom-width: 2px; }
.cn-quote-lines .cn-q-tot td { font-weight: 600; border-top: 2px solid var(--cn-border); }
.cn-quote-lines .cn-q-disc td:last-child { color: var(--bs-success); }
.cn-quote-lines .cn-q-zero td { color: var(--cn-muted); opacity: .55; }
.cn-package-table td:first-child { min-width: 14rem; } .cn-package-table .input-group { min-width: 8rem; }