/* Cohopers console: shared layout for team modules (Client Onboarding,
   Website & Pricing) and the client portal. Brand from the logo:
   ink #061F23, teal #015E66 / #057985, cyan #1ACFF8. Weights capped at 600. */
:root {
  --navy: #061F23; --blue: #057985; --blue-h: #015E66; --violet: #1ACFF8; --cyan: #1ACFF8;
  --blue-50: #E8F4F5; --blue-100: #D5ECEE; --blue-200: #A9D8DD;
  --ink-1: #0A2227; --ink-2: #34494E; --ink-3: #5F7378; --ink-4: #93A4A8;
  --line: #E1E9EB; --line-2: #CFDBDE; --bg: #F3F7F8; --card: #FFFFFF;
  --ok: #059669; --ok-bg: #ECFDF5; --warn: #B45309; --warn-bg: #FFFBEB; --bad: #DC2626; --bad-bg: #FEF2F2;
  --r: 12px; --r-sm: 8px; --sb: 248px; --top: 60px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg); color: var(--ink-1);
       font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--navy); }
b, strong, th { font-weight: 600; }
h1, h2, h3, h4 { font-family: 'Manrope', 'Inter', sans-serif; font-weight: 600; color: var(--ink-1); letter-spacing: -.01em; }

/* Topbar */
.tb { position: fixed; inset: 0 0 auto 0; height: var(--top); background: var(--navy); border-bottom: 3px solid transparent;
      border-image: linear-gradient(90deg, #015E66, #1ACFF8) 1;
      display: flex; align-items: center; z-index: 50; }
.tb-brand { width: var(--sb); display: flex; align-items: center; gap: 10px; padding: 0 18px; height: 100%; border-right: 1px solid rgba(255,255,255,.08); flex-shrink: 0; }
.tb-brand img { height: 34px; }
.tb-brand .sep { width: 1px; height: 18px; background: rgba(255,255,255,.15); }
.tb-brand .lbl { font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--cyan); text-transform: uppercase; white-space: nowrap; }
.tb-search { flex: 1; padding: 0 20px; }
.tb-search form { max-width: 460px; position: relative; }
.tb-search input[type=search] { width: 100%; height: 36px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 0 12px 0 34px; background: rgba(255,255,255,.06); font: inherit; color: #fff; min-height: 36px; }
.tb-search input::placeholder { color: rgba(255,255,255,.45); }
.tb-search input:focus { outline: none; border-color: var(--cyan); background: rgba(255,255,255,.1); box-shadow: 0 0 0 3px rgba(26,207,248,.18); }
.tb-search i { position: absolute; left: 12px; top: 11px; color: rgba(255,255,255,.45); font-size: 13px; }
.tb-actions { display: flex; align-items: center; gap: 8px; padding: 0 18px; }
.icon-btn { width: 34px; height: 34px; border-radius: var(--r-sm); border: 1px solid rgba(255,255,255,.12); background: transparent; color: rgba(255,255,255,.7);
            display: inline-flex; align-items: center; justify-content: center; }
.icon-btn:hover { color: var(--cyan); border-color: rgba(26,207,248,.5); background: rgba(255,255,255,.04); }
.who { display: flex; align-items: center; gap: 8px; padding-left: 6px; }
.who .av { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #015E66, #1ACFF8); color: #fff;
           display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
.who .meta { line-height: 1.2; }
.who .meta span { display: block; font-size: 12.5px; font-weight: 500; color: #fff; }
.who .meta small { color: rgba(255,255,255,.55); font-size: 11px; }
.hamb { display: none; background: none; border: 0; font-size: 18px; color: #fff; cursor: pointer; }

/* Sidebar */
.sb { position: fixed; top: var(--top); left: 0; bottom: 0; width: var(--sb); background: #fff; border-right: 1px solid var(--line);
      overflow-y: auto; padding: 14px 10px 30px; z-index: 40; }
.sb .grp { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; color: var(--ink-4); text-transform: uppercase; padding: 14px 10px 6px; }
.sb a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--ink-2); font-size: 13.5px; margin-bottom: 1px; }
.sb a i { width: 16px; text-align: center; color: var(--ink-4); font-size: 13px; }
.sb a:hover { background: var(--bg); color: var(--ink-1); }
.sb a.on { background: var(--blue-50); color: var(--navy); font-weight: 600; box-shadow: inset 3px 0 0 var(--blue); }
.sb a.on i { color: var(--blue); }
.sb .badge { margin-left: auto; }
.sb-foot { margin-top: 18px; padding: 12px 10px 0; border-top: 1px solid var(--line); font-size: 11px; color: var(--ink-4); }

/* Main */
.main { margin-left: var(--sb); padding: calc(var(--top) + 24px) 28px 48px; min-height: 100vh; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head h1 { font-size: 22px; letter-spacing: -.01em; }
.page-head p { color: var(--ink-3); margin-top: 2px; font-size: 13.5px; }
.crumbs { font-size: 12.5px; color: var(--ink-3); margin-bottom: 6px; }
.crumbs a { color: var(--ink-3); }
.crumbs a:hover { color: var(--blue); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Cards & grids */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.card-h h3 { font-size: 14.5px; }
.card-h .sub { color: var(--ink-3); font-size: 12.5px; }
.card-b { padding: 16px 18px; }
.card-b.flush { padding: 0; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.g-side { grid-template-columns: minmax(0, 1fr) 340px; }
.stack > * + * { margin-top: 16px; }
.mt { margin-top: 16px; }

/* Stat tiles */
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; display: block; color: inherit; }
a.stat:hover { border-color: var(--blue-200); color: inherit; }
.stat .k { font-size: 12px; color: var(--ink-3); display: flex; align-items: center; gap: 7px; }
.stat .k i { color: var(--blue); }
.stat .v { font-size: 26px; font-weight: 600; margin-top: 6px; letter-spacing: -.02em; color: var(--ink-1); }
.stat .s { font-size: 12px; color: var(--ink-3); margin-top: 2px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: var(--r-sm); border: 1px solid var(--line-2);
       background: #fff; color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--blue-200); color: var(--blue); background: var(--blue-50); }
.btn-p { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn-p:hover { background: var(--blue-h); border-color: var(--blue-h); color: #fff; }
.btn-d { color: var(--bad); }
.btn-d:hover { background: var(--bad-bg); border-color: #FECACA; color: var(--bad); }
.btn-sm { height: 30px; padding: 0 10px; font-size: 12.5px; }
.btn-xs { height: 26px; padding: 0 8px; font-size: 12px; border-radius: 6px; }
.btn-link { background: none; border: 0; color: var(--blue); cursor: pointer; font: inherit; padding: 0; }

/* Tables */
.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); font-weight: 600;
          padding: 10px 14px; border-bottom: 1px solid var(--line); background: #FAFBFE; white-space: nowrap; }
.tbl td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: #FAFBFF; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl tfoot td { font-weight: 600; background: var(--blue-50); border-top: 1px solid var(--blue-200); }
.tbl .muted, .muted { color: var(--ink-3); }
.small { font-size: 12px; }
.nowrap { white-space: nowrap; }
.trunc { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Pills, badges */
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 500;
        background: var(--bg); color: var(--ink-2); border: 1px solid var(--line); white-space: nowrap; }
.pill.ok { background: var(--ok-bg); color: var(--ok); border-color: #A7F3D0; }
.pill.warn { background: var(--warn-bg); color: var(--warn); border-color: #FDE68A; }
.pill.bad { background: var(--bad-bg); color: var(--bad); border-color: #FECACA; }
.pill.info { background: var(--blue-50); color: var(--blue); border-color: var(--blue-200); }
.badge { display: inline-flex; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--blue); color: #fff;
         font-size: 11px; font-weight: 600; align-items: center; justify-content: center; }
.badge.red { background: var(--bad); }
.bar { height: 6px; background: var(--blue-100); border-radius: 3px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--blue); border-radius: 3px; }

/* Forms */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.form-grid .full { grid-column: 1 / -1; }
.field label { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-2); margin-bottom: 5px; }
.field .help { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; }
.field .err { font-size: 12px; color: var(--bad); margin-top: 4px; }
input[type=text], input[type=email], input[type=number], input[type=url], input[type=date], input[type=datetime-local], input[type=search],
input[type=password], select, textarea {
  width: 100%; border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 8px 11px; font: inherit; font-size: 13.5px;
  color: var(--ink-1); background: #fff; min-height: 38px; }
textarea { min-height: 70px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(5,121,133,.14); }
input[type=file] { font-size: 13px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filters input:not([type=checkbox]):not([type=radio]), .filters select { width: auto; min-width: 120px; height: 36px; min-height: 36px; padding: 0 10px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; }
.tabs a { padding: 9px 14px; color: var(--ink-3); font-size: 13.5px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a.on { color: var(--navy); border-color: var(--blue); font-weight: 600; }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 9px; overflow: hidden; }
.seg a { padding: 6px 12px; font-size: 12.5px; color: var(--ink-2); border-right: 1px solid var(--line-2); }
.seg a:last-child { border-right: 0; }
.seg a.on { background: var(--blue-50); color: var(--navy); font-weight: 600; }

/* Messages */
.msgs { margin-bottom: 16px; }
.msg { padding: 10px 14px; border-radius: var(--r-sm); margin-bottom: 8px; font-size: 13.5px; border: 1px solid; display: flex; gap: 9px; align-items: flex-start; }
.msg.success { background: var(--ok-bg); border-color: #A7F3D0; color: #065F46; }
.msg.error { background: var(--bad-bg); border-color: #FECACA; color: #991B1B; }
.msg.warning { background: var(--warn-bg); border-color: #FDE68A; color: #92400E; }
.msg.info { background: var(--blue-50); border-color: var(--blue-200); color: var(--navy); }

/* Lists */
.list-row { display: flex; align-items: center; gap: 12px; padding: 11px 18px; border-bottom: 1px solid var(--line); }
.list-row:last-child { border-bottom: 0; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--blue-50); color: var(--blue); display: flex; align-items: center;
          justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0; }
.avatar.lg { width: 56px; height: 56px; font-size: 18px; background: linear-gradient(135deg, #015E66, #1ACFF8); color: #fff; }
.grow { flex: 1; min-width: 0; }
.name { font-weight: 500; color: var(--ink-1); }
a.name:hover { color: var(--blue); }
.empty { text-align: center; padding: 36px 18px; color: var(--ink-3); }
.empty i { font-size: 26px; color: var(--blue-200); display: block; margin-bottom: 10px; }
.kv { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 7px 12px; font-size: 13px; }
.kv dt { color: var(--ink-3); }
.kv dd { color: var(--ink-1); word-break: break-word; }

/* Timeline */
.tl { list-style: none; }
.tl li { position: relative; padding: 0 0 14px 22px; font-size: 13px; }
.tl li::before { content: ''; position: absolute; left: 5px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.tl li::after { content: ''; position: absolute; left: 8px; top: 16px; bottom: 0; width: 1px; background: var(--line); }
.tl li:last-child::after { display: none; }
.tl .when { font-size: 11.5px; color: var(--ink-3); }

/* Kanban */
.board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 12px; align-items: flex-start; }
.col { flex: 0 0 272px; background: #EEF1F8; border-radius: var(--r); display: flex; flex-direction: column; max-height: calc(100vh - 230px); }
.col-h { padding: 11px 12px 8px; display: flex; align-items: center; gap: 8px; }
.col-h h4 { font-size: 13px; }
.col-h .n { margin-left: auto; font-size: 12px; color: var(--ink-3); }
.col-h.owner { font-size: 11px; color: var(--ink-3); padding: 0 12px 8px; min-height: 8px; }
.col-b { padding: 4px 8px 10px; overflow-y: auto; flex: 1; min-height: 60px; }
.col-b.drop { background: rgba(5,121,133,.06); outline: 2px dashed var(--blue-200); outline-offset: -4px; border-radius: 10px; }
.kc { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 11px; margin-bottom: 8px; cursor: grab; }
.kc:hover { border-color: var(--blue-200); }
.kc.locked { cursor: default; }
.kc .t { display: flex; gap: 8px; align-items: flex-start; }
.kc .nm { font-weight: 500; font-size: 13px; color: var(--ink-1); line-height: 1.3; }
.kc .sub { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; line-height: 1.35; }
.kc .f { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; gap: 6px; }
.kc .mini { display: inline-flex; gap: 4px; }
.kc .mini span { font-size: 11px; padding: 1px 6px; border-radius: 6px; background: var(--bg); border: 1px solid var(--line); }
.kc .age { font-size: 11px; color: var(--ink-3); }
.kc .age.late { color: var(--bad); }
.kc input[type=checkbox] { margin-top: 2px; }

.chart-box { position: relative; height: 240px; }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--ink-2); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.drop-zone { border: 1.5px dashed var(--blue-200); border-radius: var(--r); background: var(--blue-50); padding: 18px; }

/* ── Cohopers additions ───────────────────────────────────────────── */
.page-head h1 { font-size: 24px; }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.stat .v { font-family: 'Manrope', 'Inter', sans-serif; }
.stat.dark { background: var(--navy); border-color: var(--navy); }
.stat.dark .k, .stat.dark .s { color: rgba(255,255,255,.6); }
.stat.dark .k i { color: var(--cyan); }
.stat.dark .v { color: #fff; }
.btn-accent { background: var(--cyan); border-color: var(--cyan); color: var(--navy); }
.btn-accent:hover { background: #fff; border-color: var(--cyan); color: var(--navy); }
.g-side-l { grid-template-columns: 340px minmax(0, 1fr); }
.mt-lg { margin-top: 24px; }
.right { text-align: right; }
.flex { display: flex; align-items: center; gap: 8px; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.req::after { content: ' *'; color: var(--bad); }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.check input { width: 16px; height: 16px; min-height: 0; accent-color: var(--blue); }
.thumb { width: 44px; height: 32px; border-radius: 6px; object-fit: cover; border: 1px solid var(--line); background: var(--bg); }
.thumb.logo { object-fit: contain; padding: 3px; }
.thumb.dark { background: var(--navy); }
.price { font-family: 'Manrope', 'Inter', sans-serif; font-weight: 600; font-variant-numeric: tabular-nums; }
.hero-card { background: var(--navy); color: #fff; border-radius: var(--r); padding: 22px 24px; position: relative; overflow: hidden; }
.hero-card::after { content: ''; position: absolute; right: 18px; top: 18px; width: 120px; height: 60px; border-top: 3px solid var(--cyan); border-right: 3px solid var(--cyan); opacity: .8; }
.hero-card h2 { color: #fff; font-size: 20px; }
.hero-card p { color: rgba(255,255,255,.7); }
.hero-card .avatar.lg { margin-bottom: 0; }

/* Lifecycle stepper */
.steps { display: flex; gap: 0; overflow-x: auto; padding: 4px 0; }
.step { flex: 1; min-width: 110px; position: relative; text-align: center; font-size: 12px; color: var(--ink-3); padding-top: 34px; }
.step::before { content: ''; position: absolute; top: 13px; left: 50%; right: -50%; height: 2px; background: var(--line); }
.step:last-child::before { display: none; }
.step .dot { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); width: 24px; height: 24px; border-radius: 50%;
             background: #fff; border: 2px solid var(--line-2); display: flex; align-items: center; justify-content: center; font-size: 11px; z-index: 1; }
.step.done { color: var(--ink-1); }
.step.done .dot { background: var(--blue); border-color: var(--blue); color: #fff; }
.step.done::before { background: var(--blue); }
.step.now { color: var(--navy); font-weight: 600; }
.step.now .dot { border-color: var(--blue); color: var(--blue); box-shadow: 0 0 0 4px var(--blue-50); }
.hero-card .step { color: rgba(255,255,255,.55); }
.hero-card .step.done, .hero-card .step.now { color: #fff; }
.hero-card .step::before { background: rgba(255,255,255,.15); }
.hero-card .step.done::before { background: var(--cyan); }
.hero-card .step .dot { background: var(--navy); border-color: rgba(255,255,255,.25); }
.hero-card .step.done .dot { background: var(--cyan); border-color: var(--cyan); color: var(--navy); }
.hero-card .step.now .dot { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 0 4px rgba(26,207,248,.15); }

/* Lifecycle timeline with icons */
.ltl { list-style: none; }
.ltl li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ltl li:last-child { border-bottom: 0; }
.ltl .ic { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--blue-50); color: var(--blue); font-size: 13px; }
.ltl .ic.system { background: var(--bg); color: var(--ink-4); }
.ltl .ic.email { background: #EEF6FF; color: #2563EB; }
.ltl .ic.visit, .ltl .ic.meeting { background: #F3F0FF; color: #6D28D9; }
.ltl .ic.whatsapp { background: #ECFDF5; color: #059669; }
.ltl .t { font-weight: 500; color: var(--ink-1); font-size: 13.5px; }
.ltl .m { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.ltl .b { font-size: 13px; color: var(--ink-2); margin-top: 6px; white-space: pre-line; }

/* Calendar */
.cal-wrap { overflow-x: auto; }
.cal { display: grid; min-width: 760px; position: relative; }
.cal .hcell { position: sticky; top: 0; background: #FAFCFC; border-bottom: 1px solid var(--line); padding: 8px 10px; font-size: 12px; font-weight: 600; color: var(--ink-2); z-index: 2; }
.cal .hcell small { display: block; font-weight: 400; color: var(--ink-3); }
.cal .hcell.today { color: var(--blue); }
.cal .tcell { font-size: 11px; color: var(--ink-3); text-align: right; padding: 2px 8px 0; }
.cal .ccol { position: relative; border-right: 1px solid var(--line); }
.cal .slot { height: 44px; border-bottom: 1px dashed #EBF1F2; display: block; }
.cal .slot:hover { background: var(--blue-50); }
.cal .slot.past { background: repeating-linear-gradient(135deg, #F7FAFA, #F7FAFA 6px, #F0F4F5 6px, #F0F4F5 12px); pointer-events: none; }
.cal .ev { position: absolute; left: 4px; right: 4px; border-radius: 8px; padding: 5px 8px; font-size: 11.5px; line-height: 1.3; overflow: hidden;
           background: var(--blue); color: #fff; border: 1px solid var(--blue-h); box-shadow: 0 4px 10px -6px rgba(6,31,35,.5); z-index: 1; }
.cal .ev b { font-weight: 600; display: block; }
.cal .ev.block { background: repeating-linear-gradient(135deg, #334A4F, #334A4F 6px, #2B4045 6px, #2B4045 12px); border-color: #22383C; }
.cal .ev.mine { background: var(--cyan); color: var(--navy); border-color: #11B5DA; }
.cal .ev.busy { background: #DCE5E7; color: var(--ink-2); border-color: var(--line-2); box-shadow: none; }
.cal .ev:hover { z-index: 3; }
.cal .now-line { position: absolute; left: 0; right: 0; height: 2px; background: #EF4444; z-index: 2; }
.legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.month .d { min-height: 104px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 6px 7px; font-size: 12px; }
.month .d.out { background: #FAFCFC; color: var(--ink-4); }
.month .d.today .n { background: var(--blue); color: #fff; border-radius: 6px; padding: 0 6px; }
.month .n { font-weight: 600; display: inline-block; margin-bottom: 4px; }
.month .chip { display: block; font-size: 11px; padding: 2px 6px; border-radius: 5px; background: var(--blue-50); color: var(--navy); margin-bottom: 3px;
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.month .chip.block { background: #E5ECEE; color: var(--ink-2); }
.month .wk { padding: 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #FAFCFC; }

/* Kanban tweaks */
.col.member { background: #E8F7F1; }
.col.lost { background: #F7EDED; }

/* Doc tiles (KYC) */
.docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.doc { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-2); }
.doc i { color: var(--blue); font-size: 18px; }
.doc.missing { border-style: dashed; color: var(--ink-4); }
.doc.missing i { color: var(--ink-4); }

@media (max-width: 1100px) {
  .g-side-l { grid-template-columns: minmax(0, 1fr); }
  .g4, .g5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-side { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .hamb { display: inline-block; }
  .tb-brand { width: auto; border-right: 0; }
  .tb-search { display: none; }
  .who .meta { display: none; }
  .sb { transform: translateX(-100%); transition: transform .2s; box-shadow: 0 10px 30px rgba(6,31,35,.18); }
  .sb.open { transform: none; }
  .main { margin-left: 0; padding: calc(var(--top) + 16px) 16px 40px; }
  .g2, .g3, .g4, .g5, .form-grid { grid-template-columns: minmax(0, 1fr); }
  .kv { grid-template-columns: 110px minmax(0, 1fr); }
}