/* VEXEN app. Graphite neutrals with a cool blue tint, one cobalt accent, a warm signal colour for things that need attention.
   Layout: split sign-in screens (brand panel + form); signed in, a slim sidebar and a calm working canvas. */
:root {
  --bg: #f6f7f9; --canvas: #ffffff; --raise: #ffffff; --sunk: #eef0f4;
  --fg: #0c0f16; --fg-2: #3a4152; --muted: #6b7386; --line: #e3e6ec; --line-2: #d3d8e1;
  --accent: #0b8a78; --accent-2: #087565; --accent-fg: #ffffff; --accent-soft: #dff5f1; --accent-ring: rgba(11, 138, 120, .25);
  --warm: #946000; --good: #0f8a5f; --good-soft: #e3f5ed; --bad: #c8322f; --bad-soft: #fdecec;
  --ink: #060a12; --ink-2: #0f1624; --ink-line: rgba(255, 255, 255, .09); --ink-fg: #edf2f9; --ink-muted: #9ba7bb;
  --glow-mint: #5eead4; --glow-honey: #f6c35c;
  --shadow-sm: 0 1px 2px rgba(12, 15, 22, .06); --shadow: 0 1px 2px rgba(12, 15, 22, .05), 0 8px 24px -8px rgba(12, 15, 22, .12);
  --shadow-lg: 0 24px 60px -20px rgba(12, 15, 22, .28);
  --r: 12px; --r-sm: 8px;
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (prefers-color-scheme: dark) { :root {
  --bg: #070b14; --canvas: #0e1522; --raise: #121a29; --sunk: #0a101b;
  --fg: #eceef3; --fg-2: #c3c8d4; --muted: #8b93a7; --line: #1f2633; --line-2: #2a3242;
  --accent: #5eead4; --accent-2: #8af2e1; --accent-fg: #071016; --accent-soft: rgba(94, 234, 212, .1); --accent-ring: rgba(94, 234, 212, .3);
  --warm: #f6c35c; --good: #3ccf8e; --good-soft: #0f2a20; --bad: #ff6b66; --bad-soft: #2d1414;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -10px rgba(0, 0, 0, .6); --shadow-lg: 0 30px 80px -20px rgba(0, 0, 0, .7);
  color-scheme: dark } }

* { box-sizing: border-box }
html, body { height: 100% }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 14.5px/1.55 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility }
h1, h2, h3 { margin: 0; letter-spacing: -.02em; text-wrap: balance; color: var(--fg) }
h1 { font: 600 26px/1.15 var(--sans) } h2 { font: 600 17px/1.3 var(--sans) } h3 { font: 600 14.5px/1.3 var(--sans) }
p { margin: 0 } a { color: var(--accent); text-decoration: none } a:hover { text-decoration: underline }
.muted { color: var(--muted) } .mono { font-family: var(--mono) } .small { font-size: 13px }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px }

#app { min-height: 100% }
.boot { height: 100vh; display: grid; place-items: center }
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--accent); animation: spin .8s linear infinite }
@keyframes spin { to { transform: rotate(360deg) } }

/* Buttons and fields */
.btn { --b: var(--accent); display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--r-sm);
  border: 1px solid transparent; background: var(--b); color: var(--accent-fg); font: 600 14px/1 var(--sans); cursor: pointer; white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .15) inset, 0 1px 2px rgba(12, 15, 22, .2); transition: background .15s, transform .05s, box-shadow .15s }
.btn:hover { background: var(--accent-2); text-decoration: none } .btn:active { transform: translateY(1px) }
.btn[disabled] { opacity: .55; cursor: progress }
.btn.secondary { background: var(--raise); color: var(--fg); border-color: var(--line-2); box-shadow: var(--shadow-sm) }
.btn.secondary:hover { background: var(--sunk) }
.btn.ghost { background: transparent; color: var(--fg-2); box-shadow: none } .btn.ghost:hover { background: var(--sunk) }
.btn.danger { background: transparent; color: var(--bad); border-color: var(--line-2); box-shadow: none } .btn.danger:hover { background: var(--bad-soft) }
.btn.block { width: 100% } .btn.sm { height: 32px; padding: 0 12px; font-size: 13px }
.btn .spinner { width: 14px; height: 14px; border-width: 2px; border-color: rgba(255, 255, 255, .35); border-top-color: currentColor }

.field { display: grid; gap: 6px } .field > span { font: 500 13px/1.2 var(--sans); color: var(--fg-2) }
.field small { color: var(--muted); font-size: 12.5px }
input, select, textarea { font: 400 14.5px/1.4 var(--sans); width: 100%; height: 42px; padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--line-2);
  background: var(--canvas); color: var(--fg); transition: border-color .15s, box-shadow .15s }
input::placeholder { color: var(--muted) }
input:hover, select:hover { border-color: var(--muted) }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring) }
input[aria-invalid="true"] { border-color: var(--bad) }
.code-input { font: 500 26px/1 var(--mono); letter-spacing: .5em; text-align: center; height: 60px; padding-left: .5em }
.error { color: var(--bad); font-size: 13.5px; min-height: 0 } .error:empty { display: none }
.notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--fg-2); font-size: 13.5px }
.notice.stack { display: grid; gap: 6px } .notice .mono { word-break: break-all; font-size: 12.5px; color: var(--fg) }
.notice.warn { background: color-mix(in srgb, var(--warm) 12%, transparent) }

/* Sign-in screens: brand panel + form */
.auth { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) }
.brand-panel { position: relative; overflow: hidden; background: var(--ink); color: var(--ink-fg); padding: 40px clamp(28px, 5vw, 64px); display: flex; flex-direction: column; justify-content: space-between; gap: 40px; isolation: isolate }
.brand-panel::before { content: ""; position: absolute; inset: -20%; z-index: -1; opacity: .55;
  background: radial-gradient(40% 35% at 25% 20%, rgba(94, 234, 212, .28), transparent 70%), radial-gradient(35% 30% at 85% 85%, rgba(246, 195, 92, .22), transparent 70%) }
.brand-panel::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .35;
  background-image: linear-gradient(var(--ink-line) 1px, transparent 1px), linear-gradient(90deg, var(--ink-line) 1px, transparent 1px); background-size: 44px 44px;
  mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent) }
.logo { display: inline-flex; align-items: center; gap: 10px; font: 700 17px/1 var(--sans); letter-spacing: .14em; color: inherit }
.logo svg { width: 26px; height: 26px; color: currentColor }
.brand-copy h2 em { font: italic 400 1.08em/1 var(--serif); letter-spacing: -.01em; background: linear-gradient(100deg, var(--glow-mint), var(--glow-honey)); -webkit-background-clip: text; background-clip: text; color: transparent }
.brand-copy h2 { color: #fff; font: 600 clamp(26px, 3vw, 38px)/1.1 var(--sans); letter-spacing: -.03em; max-width: 15ch }
.brand-copy p { color: var(--ink-muted); margin-top: 14px; max-width: 42ch; font-size: 15px }
.loop { display: grid; gap: 8px; max-width: 380px; margin: 0; padding: 0 }
.loop li { list-style: none; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .03); border: 1px solid var(--ink-line);
  font-size: 13.5px; color: var(--ink-fg); animation: loop 12s infinite; animation-delay: calc(var(--i) * 1.5s) }
.loop li b { font: 500 11px/1 var(--mono); color: var(--ink-muted); width: 18px }
.loop ol { margin: 0; padding: 0; display: grid; gap: 8px }
@keyframes loop { 0%, 8% { border-color: rgba(94, 234, 212, .8); background: rgba(94, 234, 212, .1) } 14%, 100% { border-color: var(--ink-line); background: rgba(255, 255, 255, .03) } }
.brand-foot { font-size: 12.5px; color: var(--ink-muted) }
.form-side { display: grid; place-items: center; padding: 40px max(20px, env(safe-area-inset-right)) 40px max(20px, env(safe-area-inset-left)) }
.form-card { width: min(420px, 100%); display: grid; gap: 18px }
.form-card header { display: grid; gap: 6px }
.form-card .alt { text-align: center; font-size: 13.5px; color: var(--muted) }
.steps { display: flex; gap: 6px } .steps i { height: 4px; flex: 1; border-radius: 4px; background: var(--line) } .steps i.on { background: var(--accent) }
.qr { justify-self: center; padding: 10px; background: #fff; border-radius: var(--r); border: 1px solid var(--line); box-shadow: var(--shadow-sm) }
.qr svg { display: block; width: 168px; height: 168px }
.key { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: var(--r-sm); background: var(--sunk); font: 500 13px/1.4 var(--mono); word-break: break-all }
.key span { flex: 1 }

/* Business type picker */
.picker { border: 1px solid var(--line-2); border-radius: var(--r); background: var(--canvas); overflow: hidden }
.picker input { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; height: 44px; box-shadow: none !important }
.picker-list { max-height: 260px; overflow: auto; padding: 6px; display: grid; gap: 2px; overscroll-behavior: contain }
.picker-group { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 10px 8px 6px }
.picker-opt { display: grid; gap: 2px; text-align: left; padding: 9px 10px; border-radius: var(--r-sm); border: 1px solid transparent; background: none; color: var(--fg); cursor: pointer; font: inherit }
.picker-opt:hover { background: var(--sunk) }
.picker-opt[aria-selected="true"] { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, transparent) }
.picker-opt b { font-weight: 600; font-size: 14px } .picker-opt span { font-size: 12.5px; color: var(--muted) }
.picker-empty { padding: 16px; color: var(--muted); font-size: 13.5px }

/* Signed-in shell */
.shell { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 248px minmax(0, 1fr) }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 18px; padding: 18px 14px; background: var(--ink); color: var(--ink-fg); border-right: 1px solid var(--ink-line) }
.side .logo { padding: 4px 6px }
.switcher { display: grid; gap: 4px } .switcher label { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); padding: 0 6px }
.switcher select { background: var(--ink-2); color: var(--ink-fg); border-color: var(--ink-line); height: 38px }
.nav { display: grid; gap: 2px }
.nav button { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: var(--r-sm); border: 0; background: none; color: var(--ink-muted); font: 500 14px/1 var(--sans); cursor: pointer; text-align: left }
.nav button:hover { background: var(--ink-2); color: var(--ink-fg) }
.nav button[aria-current="page"] { background: var(--ink-2); color: #fff; box-shadow: inset 2px 0 0 var(--accent) }
.nav svg { width: 17px; height: 17px; flex: none; opacity: .9 }
.nav .soon { margin-left: auto; font: 500 10px/1 var(--mono); padding: 3px 6px; border-radius: 99px; border: 1px solid var(--ink-line); color: var(--ink-muted) }
.side .me { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-top: 1px solid var(--ink-line) }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 600 12.5px/1 var(--sans); background: linear-gradient(140deg, #0b8a78, #2bb7a2); color: #fff; flex: none }
.me .who { min-width: 0; flex: 1 } .me .who b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.me .who span { font-size: 12px; color: var(--ink-muted); text-transform: capitalize }
.me .btn.ghost { color: var(--ink-muted); height: 32px; padding: 0 8px } .me .btn.ghost:hover { background: var(--ink-2); color: var(--ink-fg) }
.shell > div, .main > * { min-width: 0 }
.main { min-width: 0; padding: 28px clamp(16px, 4vw, 44px) 60px; display: grid; gap: 24px; align-content: start; max-width: 1280px }
.page-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between }
.page-head .eyebrow { font: 500 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px }
.card { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm) }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line) }
.card-body { padding: 18px }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px }
.stat { padding: 16px 18px; display: grid; gap: 6px } .stat span { font-size: 12.5px; color: var(--muted) } .stat b { font: 600 24px/1 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums }
.board-wrap { display: grid; gap: 10px }
.board-title { display: flex; align-items: center; gap: 10px } .board-title .pill { margin-left: auto }
.lanes { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity }
.lane { flex: 0 0 200px; scroll-snap-align: start; background: var(--sunk); border: 1px solid var(--line); border-radius: var(--r); padding: 10px; display: grid; gap: 8px; align-content: start; min-height: 92px }
.lane-head { display: flex; align-items: center; gap: 8px; font: 600 12.5px/1.2 var(--sans); color: var(--fg-2) }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none }
.lane-empty { font-size: 12px; color: var(--muted); border: 1px dashed var(--line-2); border-radius: var(--r-sm); padding: 10px; text-align: center }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 99px; font: 500 11.5px/1 var(--sans); background: var(--sunk); color: var(--fg-2); border: 1px solid var(--line); white-space: nowrap }
.pill.good { background: var(--good-soft); color: var(--good); border-color: transparent } .pill.accent { background: var(--accent-soft); color: var(--accent); border-color: transparent }
.pill.off { color: var(--muted) }
table { width: 100%; border-collapse: collapse; font-size: 14px }
th { text-align: left; font: 500 11.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--sunk) }
td { padding: 12px 18px; border-bottom: 1px solid var(--line); vertical-align: middle } tr:last-child td { border-bottom: 0 }
.person { display: flex; align-items: center; gap: 10px } .person b { font-weight: 600 } .person div span { display: block; font-size: 12.5px; color: var(--muted) }
.tbl { overflow-x: auto }
.invite { display: grid; grid-template-columns: 1fr 1.3fr 160px auto; gap: 10px; align-items: end }
.empty { display: grid; place-items: center; gap: 8px; padding: 40px 20px; text-align: center; color: var(--muted) }

#toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 50;
  background: var(--ink); color: #fff; padding: 11px 16px; border-radius: 10px; font-size: 14px; box-shadow: var(--shadow-lg); transition: opacity .2s, transform .2s; max-width: calc(100vw - 32px) }
#toast.show { opacity: 1; transform: translate(-50%, 0) }
.mobile-bar { display: none }

@media (max-width: 960px) {
  .auth { grid-template-columns: 1fr } .brand-panel { padding: 28px 24px; gap: 20px } .brand-panel .loop, .brand-foot { display: none }
  .brand-copy h2 { font-size: 24px } .brand-copy p { display: none }
  .shell { grid-template-columns: minmax(0, 1fr) } .side { display: none }
  .mobile-bar { display: flex; position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; align-items: center; gap: 10px; padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); background: var(--ink); color: var(--ink-fg) }
  .mobile-bar select { flex: 1; min-width: 0; height: 36px; background: var(--ink-2); color: var(--ink-fg); border-color: var(--ink-line) }
  .mobile-bar .btn.ghost { color: var(--ink-fg) }
  .mobile-tabs { display: flex; gap: 6px; overflow-x: auto } .mobile-tabs .btn { flex: none }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)) } .invite { grid-template-columns: 1fr }
  .main { padding-top: 18px }
}
@media (min-width: 961px) { .mobile-tabs { display: none } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important } }

/* VEXEN admin console */
.admin-tag { margin: -8px 0 0; padding: 0 6px; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--glow-mint) }
.mobile-bar .admin-tag { margin: 0; flex: 1 }
.nav-admin { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: var(--r-sm); border: 1px dashed var(--ink-line); background: none; color: var(--ink-muted); font: 500 13.5px/1 var(--sans); cursor: pointer; text-align: left; margin-top: 6px }
.nav-admin:hover { color: var(--ink-fg); border-color: var(--glow-mint) }
.nav-admin svg { width: 16px; height: 16px }
.stat small { font-size: 12px; color: var(--muted) }
button.stat { text-align: left; font: inherit; color: inherit; cursor: pointer; transition: border-color .15s, transform .1s }
button.stat:hover { border-color: var(--accent) }
.stat.attention { border-color: color-mix(in srgb, var(--warm) 55%, var(--line)); background: color-mix(in srgb, var(--warm) 7%, var(--canvas)) }
.chart { width: 100%; height: auto; display: block }
.chart text { font: 500 10.5px var(--mono); fill: var(--muted) }
.chart .grid { stroke: var(--line); stroke-width: 1 }
.chart .bar { fill: var(--accent) }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px }
.rank { display: grid; gap: 10px }
.rank-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) auto; gap: 12px; align-items: center; font-size: 13.5px }
.rank-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: none }
.rank-bar { height: 8px; border-radius: 99px; background: var(--sunk); overflow: hidden }
.rank-bar i { display: block; height: 100%; border-radius: 99px; background: var(--accent) }
.rank-row b { font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center }
.toolbar input { flex: 1 1 260px; width: auto } .toolbar select { flex: 0 1 190px; width: auto }
.leads { display: grid; gap: 12px }
.lead { padding: 16px 18px; display: grid; gap: 10px }
.lead-top { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center }
.lead-top .person span a { color: var(--accent) }
.lead-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px }
.lead-meta .btn.ghost { height: 26px; padding: 0 6px } .lead-meta svg { width: 14px; height: 14px }
.tags { display: flex; flex-wrap: wrap; gap: 6px }
.quote { border-left: 3px solid var(--line-2); padding: 2px 0 2px 10px; color: var(--fg-2); white-space: pre-wrap; overflow-wrap: anywhere }
.status-select { width: auto; height: 34px; font-weight: 600; font-size: 13px; border-radius: 99px; padding: 0 30px 0 12px }
.status-select.s-new { border-color: color-mix(in srgb, var(--warm) 60%, var(--line)); color: var(--warm) }
.status-select.s-contacted { color: var(--fg-2) }
.status-select.s-demo_booked { border-color: var(--accent); color: var(--accent) }
.status-select.s-won { border-color: var(--good); color: var(--good) }
.status-select.s-not_a_fit { color: var(--muted) }
.notes summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent); width: fit-content }
.notes[open] { display: grid; gap: 8px }
textarea { height: auto; padding: 10px 12px; resize: vertical; line-height: 1.5 }
@media (max-width: 960px) { .grid2 { grid-template-columns: minmax(0, 1fr) } .rank-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto } }
.btn svg { width: 16px; height: 16px; flex: none }

/* CRM: board, cards, record panel, contacts, import */
.tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); padding-bottom: 0 }
.tab { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font: 600 14px/1 var(--sans); cursor: pointer; white-space: nowrap; margin-bottom: -1px }
.tab[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--accent) }
.tab .count, .lane-head .count { font: 500 11px/1 var(--mono); padding: 3px 6px; border-radius: 99px; background: var(--sunk); color: var(--muted) }
.board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; align-items: flex-start; scroll-snap-type: x proximity; min-height: 320px }
.board .lane { flex: 0 0 272px; min-height: 160px; transition: background .12s, border-color .12s }
.board .lane.over { border-color: var(--accent); background: var(--accent-soft) }
.lane-total { margin-left: auto; font: 500 12px/1 var(--mono); color: var(--fg-2) }
.rcard { display: grid; gap: 6px; width: 100%; text-align: left; padding: 10px 11px; border-radius: 10px; border: 1px solid var(--line); background: var(--canvas); color: var(--fg); font: inherit; cursor: grab; box-shadow: var(--shadow-sm); transition: border-color .12s, transform .08s, box-shadow .12s }
.rcard:hover { border-color: var(--line-2); box-shadow: var(--shadow) }
.rcard.locked { cursor: pointer }
.rcard.dragging { opacity: .45; transform: rotate(1.5deg) }
.rcard-top { display: flex; align-items: flex-start; gap: 8px } .rcard-top b { flex: 1; font-weight: 600; font-size: 13.5px; line-height: 1.35; overflow-wrap: anywhere }
.rcard-sub { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.rcard-foot { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px }
.rcard-foot .val { font: 600 12.5px/1 var(--mono); color: var(--fg) }
.avatar.xs { width: 22px; height: 22px; font-size: 9.5px }
.due { font: 600 11px/1 var(--sans); padding: 4px 7px; border-radius: 99px; background: var(--sunk); color: var(--fg-2); white-space: nowrap }
.due.soon { background: color-mix(in srgb, var(--warm) 14%, transparent); color: var(--warm) }
.due.late { background: var(--bad-soft); color: var(--bad) }
.drawer-wrap { position: fixed; inset: 0; z-index: 40; background: rgba(6, 10, 18, .42); display: flex; justify-content: flex-end; animation: fade .15s ease }
.drawer { width: min(520px, 100%); height: 100%; background: var(--canvas); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; animation: slide .2s ease; padding-bottom: env(safe-area-inset-bottom, 0px) }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(16px + env(safe-area-inset-top, 0px)) 20px 14px; border-bottom: 1px solid var(--line) }
.drawer-head h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.drawer-body { flex: 1; overflow-y: auto; padding: 18px 20px 28px; display: grid; gap: 14px; align-content: start }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px }
.drawer-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: space-between }
input:disabled, select:disabled, textarea:disabled { background: var(--sunk); color: var(--fg-2); cursor: not-allowed }
.history { border-top: 1px solid var(--line); padding-top: 14px; display: grid; gap: 8px }
.hist { display: grid; gap: 8px }
.hist-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 8px 10px; border-radius: 8px; background: var(--sunk) }
.hist-row small { white-space: nowrap }
.list { display: grid; gap: 6px }
.row-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--canvas); color: var(--fg); font: inherit; text-align: left; cursor: pointer }
.row-link:hover { border-color: var(--line-2) } .row-link span { display: grid; gap: 2px; min-width: 0 } .row-link b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.stages { display: flex; flex-wrap: wrap; gap: 10px }
.stage { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px } .stage b { font-variant-numeric: tabular-nums }
tr.clickable { cursor: pointer } tr.clickable:hover td { background: var(--sunk) } tr.clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px }
.head-actions { display: flex; gap: 8px; flex-wrap: wrap }
.import-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: end }
.map-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }
input[type="file"] { height: auto; padding: 9px }
@keyframes fade { from { opacity: 0 } } @keyframes slide { from { transform: translateX(24px); opacity: .6 } }
@media (max-width: 960px) { .board .lane { flex-basis: 82vw } .two, .import-grid, .map-grid { grid-template-columns: minmax(0, 1fr) } .drawer { width: 100% } }

.row-inline { display: flex; gap: 10px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.row-inline select { width: auto; min-width: 120px; }

/* Chats: inbox list + open conversation */
.nav .nav-count { margin-left: auto; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 99px; background: var(--glow-mint); color: #062019; font: 700 11px/18px var(--sans); text-align: center }
.mobile-tabs .nav-count { margin-left: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--accent); color: var(--accent-fg); font: 700 11px/18px var(--sans) }
.tab .count.unread { background: var(--accent); color: var(--accent-fg) }
.chat-layout { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 14px; height: calc(100vh - 230px); min-height: 460px }
.chat-side { display: flex; flex-direction: column; min-height: 0; overflow: hidden }
.chat-side .tabs { padding: 0 8px }
.chat-list { flex: 1; overflow-y: auto; padding: 6px }
.chat-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; width: 100%; padding: 10px; border: 0; border-radius: 10px; background: none; color: var(--fg); text-align: left; font: inherit; cursor: pointer }
.chat-row:hover { background: var(--sunk) }
.chat-row.on { background: var(--accent-soft) }
.chat-row-main { display: grid; gap: 3px; min-width: 0 }
.chat-row-top { display: flex; justify-content: space-between; gap: 8px } .chat-row-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600 }
.chat-row-top small { color: var(--muted); font-size: 12px; flex: none }
.chat-row.unread .chat-row-top b, .chat-row.unread .chat-row-text { color: var(--fg); font-weight: 650 }
.chat-row-text { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.chat-row-foot { display: flex; gap: 6px; margin-top: 3px }
.dot-unread { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); margin-top: 6px }
.avatar.sm { width: 34px; height: 34px; font-size: 12px }
.avatar.visitor { background: linear-gradient(140deg, #64748b, #94a3b8) }
.chat-pane { display: flex; flex-direction: column; min-height: 0; overflow: hidden }
.chat-pane > .empty { flex: 1 } .chat-pane > .empty svg { width: 28px; height: 28px; opacity: .5 }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap }
.chat-who { display: grid; min-width: 0; flex: 1 } .chat-who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.chat-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap }
.chat-actions select.sm, select.sm { height: 32px; font-size: 13px; width: auto; padding: 0 28px 0 10px }
.chat-back { display: none }
.chat-log { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; background: var(--bg) }
.cmsg { display: flex; flex-direction: column; gap: 4px; max-width: min(78%, 560px) }
.cmsg-bubble { padding: 9px 13px; border-radius: 14px; white-space: pre-wrap; overflow-wrap: anywhere }
.cmsg small { color: var(--muted); font-size: 11.5px; padding: 0 4px }
.cmsg.visitor { align-self: flex-start } .cmsg.visitor .cmsg-bubble { background: var(--canvas); border: 1px solid var(--line); border-bottom-left-radius: 4px }
.cmsg.team { align-self: flex-end; align-items: flex-end } .cmsg.team .cmsg-bubble { background: var(--accent); color: var(--accent-fg); border-bottom-right-radius: 4px }
.cmsg.note { align-self: flex-end; align-items: flex-end } .cmsg.note .cmsg-bubble { background: color-mix(in srgb, var(--warm) 13%, var(--canvas)); border: 1px dashed color-mix(in srgb, var(--warm) 45%, transparent); border-bottom-right-radius: 4px }
.chat-closed { align-self: center; font-size: 12.5px; color: var(--muted) }
.chat-compose { border-top: 1px solid var(--line); padding: 10px 14px 12px; display: grid; gap: 8px; background: var(--canvas) }
.chat-compose.note { background: color-mix(in srgb, var(--warm) 6%, var(--canvas)) }
.chat-compose textarea { resize: vertical; min-height: 64px; max-height: 240px }
.chat-compose-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px }
.segs { display: inline-flex; gap: 2px; padding: 2px; border-radius: 9px; background: var(--sunk); justify-self: start }
.seg { height: 28px; padding: 0 12px; border: 0; border-radius: 7px; background: none; color: var(--muted); font: 600 12.5px/1 var(--sans); cursor: pointer }
.seg.on { background: var(--canvas); color: var(--fg); box-shadow: var(--shadow-sm) }
@media (max-width: 960px) {
  .chat-layout { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0 }
  .chat-layout .chat-pane { display: none; height: calc(100vh - 150px); min-height: 420px }
  .chat-layout.has-open .chat-side { display: none } .chat-layout.has-open .chat-pane { display: flex }
  .chat-back { display: inline-flex } .chat-actions { width: 100% }
}

/* Chat setup */
.check { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); flex: none }
.check span { display: grid; gap: 2px } .check small { color: var(--muted); font-size: 12.5px }
input[type="color"] { width: 64px; height: 40px; padding: 4px; cursor: pointer }
.install { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line) }
.snippet { margin: 0; padding: 12px 14px; border-radius: var(--r-sm); background: var(--ink); color: var(--ink-fg); font: 12.5px/1.5 var(--mono); white-space: pre-wrap; word-break: break-all }
.danger-text { color: var(--bad) }

/* Client portal: section on a record, and the team's portal page */
.portal-box { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--sunk) }
.portal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px }
.portal-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center }
.portal-compose { display: grid; gap: 8px; padding: 12px; border-radius: var(--r-sm); background: var(--canvas); border: 1px solid var(--line) }
.portal-posts { display: grid; gap: 8px }
.ppost { padding: 10px 12px; border-radius: var(--r-sm); background: var(--canvas); border: 1px solid var(--line); display: grid; gap: 4px }
.ppost.client { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: var(--accent-soft) }
.ppost.approval { border-style: dashed }
.ppost-head { display: flex; justify-content: space-between; gap: 8px } .ppost-head small { font-size: 12px }
.ppost-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px }
.good-text { color: var(--good) } .warn-text { color: var(--warm) }
.plist { display: grid; padding: 6px }
.prow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 0; border-radius: 10px; background: none; color: var(--fg); font: inherit; text-align: left; cursor: pointer; width: 100% }
.prow:hover { background: var(--sunk) }
.prow-main { display: grid; gap: 2px; min-width: 0 } .prow-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.stack-form { display: grid; gap: 14px }