:root {
    --bg: #FAF9F7;          /* warm off-white paper — calmer than cold grey */
    --surface: #FFFFFF;
    --surface-2: #F6F5F2;   /* faint warm neutral for tracks/headers */
    --border: #ECEAE5;      /* warm-tinted hairline */
    --border-strong: #DEDBD4;
    --text: #0A0A0A;
    --text-secondary: #6B675F; /* warm grey, easier for long reading */
    --text-tertiary: #9A968C;
    /* Focus-calm status tints — whisper-soft, meaning over decoration */
    --task-tint-todo:        #F7F8FA; /* cool mist — neutral fresh */
    --task-tint-in_progress: #FBF6EC; /* warm amber-cream — active/energy */
    --task-tint-review:      #F6F4FB; /* soft lavender — calm focus */
    --task-tint-backlog:     #F7F6F4; /* quiet warm grey — parked */
    --task-tint-done:        #EFF8F1; /* restful green — completion reward */
    --accent: #C11E00;
    --accent-soft: #FDE8E4;
    --black: #0A0A0A;
    --green-bg: #E7F6EC;
    --green-text: #0F7A3A;
    --yellow-bg: #FFF4D6;
    --yellow-text: #8A6A00;
    --blue-bg: #E6F0FE;
    --blue-text: #1156C9;
    --gray-bg: #F0F0F0;
    --gray-text: #595959;
    --sidebar-w: 220px;
    --header-h: 56px;
    --radius: 10px;
    --radius-sm: 6px;
    --radius-lg: 14px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);

    /* KB category colors */
    --kb-onboarding: #2563EB;
    --kb-fb: #2563EB;
    --kb-prog: #7C3AED;
    --kb-fb-types: #DC2626;
    --kb-google: #16A34A;
    --kb-sops: #EA580C;
  }
  * { box-sizing: border-box; }
  html, body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  button { font-family: inherit; cursor: pointer; }
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-thumb { background: #DADADA; border-radius: 4px; }
  ::-webkit-scrollbar-track { background: transparent; }

  /* === Layout === */
  .app {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    min-height: 100vh;
  }

  /* === Sidebar === */
  .sidebar {
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 18px 14px;
    position: sticky;
    top: 0;
    height: 100vh;
  }
  .logo {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.02em;
    padding: 6px 10px 24px;
    display: flex;
    align-items: baseline;
    gap: 2px;
  }
  .logo .dot { color: var(--accent); }
  .nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
  .nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: var(--radius-sm);
    color: var(--text-secondary); font-weight: 500;
    cursor: pointer; border: none; background: transparent;
    text-align: left; width: 100%;
    transition: background 0.12s ease, color 0.12s ease;
    font-size: 13.5px;
  }
  .nav-item:hover { background: #F4F4F4; color: var(--text); }
  .nav-item.active { background: var(--black); color: #fff; }
  .nav-item svg { width: 16px; height: 16px; flex-shrink: 0; }

  .user-card {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 4px 4px;
    border-top: 1px solid var(--border);
    margin-top: 8px; padding-top: 12px;
  }
  .user-card-main {
    display: flex; align-items: center; gap: 10px;
    flex: 1; min-width: 0;
    border: none; background: transparent; cursor: pointer;
    padding: 6px; border-radius: var(--radius-sm); text-align: left;
    transition: background 0.12s ease;
  }
  .user-card-main:hover { background: var(--surface-2); }
  /* Sign out — lives at the very bottom, away from daily actions */
  .signout-btn {
    display: flex; align-items: center; gap: 9px;
    width: 100%; margin-top: 2px;
    padding: 9px 12px; border-radius: var(--radius-sm);
    border: none; background: transparent; cursor: pointer;
    color: var(--text-tertiary); font-weight: 500; font-size: 13px;
    transition: background 0.12s ease, color 0.12s ease;
  }
  .signout-btn:hover { background: var(--accent-soft); color: var(--accent); }
  .signout-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
  /* Header "Me" avatar button — right-most account entry point */
  .header-me {
    border: none; background: transparent; cursor: pointer; padding: 2px;
    border-radius: 50%; display: inline-flex; align-items: center;
    transition: box-shadow 0.12s ease, transform 0.12s ease;
  }
  .header-me:hover { transform: scale(1.05); }
  .header-me:hover .avatar { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--border-strong); }
  .header-me .avatar { width: 30px; height: 30px; font-size: 11px; }
  /* Account dropdown (My profile / Sign out) under the header avatar */
  .user-menu-pop {
    position: fixed; z-index: 3000; min-width: 180px; padding: 6px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm); box-shadow: 0 12px 32px rgba(0,0,0,0.18);
  }
  .user-menu-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 10px; border: none; background: transparent; cursor: pointer;
    border-radius: 8px; font-size: 13px; font-weight: 500;
    color: var(--text); text-align: left;
    transition: background 0.12s ease, color 0.12s ease;
  }
  .user-menu-item:hover { background: var(--surface-2); }
  .user-menu-item.signout:hover { background: var(--accent-soft); color: var(--accent); }
  .user-menu-item svg { width: 16px; height: 16px; flex-shrink: 0; }
  .avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--black); color: #fff;
    font-size: 11px; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    position: relative; overflow: hidden;
  }
  /* Employee photo overlays the initials once it loads (see AvatarImg). */
  .avatar .avatar-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; border-radius: inherit;
    opacity: 0; transition: opacity .2s;
  }
  .avatar .avatar-img.loaded { opacity: 1; }
  .avatar.red { background: var(--accent); }
  .avatar.gray { background: #6B6B6B; }
  .avatar.blue { background: #1F4FB6; }
  .avatar.green { background: #2A7F4D; }
  .avatar.purple { background: #6B3FB1; }
  .avatar.orange { background: #B86C1B; }
  .avatar.lg { width: 36px; height: 36px; font-size: 12px; }
  .avatar.sm { width: 22px; height: 22px; font-size: 9.5px; }
  .avatar.xs { width: 18px; height: 18px; font-size: 8px; }
  .avatar.xl { width: 44px; height: 44px; font-size: 14px; }

  .user-card .meta { display: flex; flex-direction: column; min-width: 0; }
  .user-card .name { font-weight: 600; font-size: 12.5px; color: var(--text); }
  .user-card .role { color: var(--text-tertiary); font-size: 11px; }

  /* === Main === */
  .main { display: flex; flex-direction: column; min-width: 0; }
  .header {
    height: var(--header-h);
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 32px; position: sticky; top: 0; z-index: 10;
  }
  .header .crumb { font-size: 13.5px; font-weight: 500; color: var(--text); }
  .header .actions { display: flex; align-items: center; gap: 14px; color: var(--text-tertiary); }
  .icon-btn {
    width: 32px; height: 32px;
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    border: none; background: transparent; color: var(--text-secondary);
  }
  .icon-btn:hover { background: #F4F4F4; }
  .icon-btn svg { width: 16px; height: 16px; }

  /* === Page === */
  .page { padding: 28px 36px; display: none; }
  .page.active { display: block; }
  .page-header {
    display: flex; justify-content: space-between; align-items: flex-end;
    margin-bottom: 22px;
  }
  .page-title {
    font-size: 26px; font-weight: 700; letter-spacing: -0.02em;
    margin: 0 0 4px;
  }
  .page-subtitle { color: var(--text-tertiary); font-size: 13px; }

  /* === Buttons === */
  .btn {
    border: 1px solid var(--border-strong); background: var(--surface);
    color: var(--text); padding: 8px 14px;
    border-radius: var(--radius-sm); font-weight: 500; font-size: 13px;
    display: inline-flex; align-items: center; gap: 6px;
  }
  .btn:hover { background: #F7F7F7; }
  .btn.primary { background: var(--black); color: #fff; border-color: var(--black); }
  .btn.primary:hover { background: #1F1F1F; }
  .btn svg { width: 14px; height: 14px; }

  /* === Card === */
  .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .card-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 13px 16px;
    border-bottom: 1px solid var(--border);
  }
  .card-label {
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
    text-transform: uppercase;
  }
  .card-meta {
    font-size: 11.5px; color: var(--text-tertiary);
    display: flex; align-items: center; gap: 4px;
  }

  /* === KPI Grid === */
  .kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 14px;
  }
  .kpi {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    position: relative;
    overflow: hidden;
  }
  .kpi::before {
    content: '';
    position: absolute;
    left: 0; top: 12px; bottom: 12px;
    width: 3px;
    background: var(--accent);
    border-radius: 0 2px 2px 0;
  }
  .kpi-value {
    font-size: 28px; font-weight: 700; letter-spacing: -0.025em;
    line-height: 1.1;
  }
  .kpi-label {
    font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-top: 4px;
  }

  /* === Home Grid === */
  .home-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 12px;
    align-items: start;
  }
  .home-grid .col { display: flex; flex-direction: column; gap: 12px; }

  .greet-row {
    display: flex; justify-content: space-between; align-items: flex-end;
    margin-bottom: 22px;
  }
  .greet h1 {
    font-size: 24px; font-weight: 700; letter-spacing: -0.02em;
    margin: 0 0 3px;
  }
  .greet .sub { color: var(--text-tertiary); font-size: 13px; }
  .greet-date { color: var(--text-tertiary); font-size: 13px; }

  /* === List Items === */
  .list-row {
    padding: 11px 16px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 10px;
  }
  .list-row:last-child { border-bottom: none; }
  .task-bar {
    width: 3px; height: 28px;
    background: var(--accent); border-radius: 2px;
    flex-shrink: 0;
  }
  .task-info {
    display: flex; flex-direction: column;
    flex: 1; min-width: 0;
  }
  .task-title {
    font-size: 12.5px; font-weight: 500; color: var(--text);
    margin-bottom: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .task-meta {
    font-size: 11px; color: var(--text-tertiary);
  }
  .task-meta b { color: var(--text-secondary); font-weight: 500; }
  .row-dot {
    color: var(--text-tertiary);
    font-size: 16px; padding: 2px 6px; cursor: pointer;
  }

  .team-row { display: flex; align-items: center; gap: 10px; }
  .team-row .meta { flex: 1; min-width: 0; }
  .team-row .name { font-size: 12.5px; font-weight: 500; }
  .team-row .role { font-size: 11px; color: var(--text-tertiary); }
  .team-row .stat { font-size: 11px; color: var(--text-tertiary); }
  .team-row .right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
  .pill-active {
    font-size: 10px; padding: 1px 7px;
    background: var(--green-bg); color: var(--green-text);
    border-radius: 999px; font-weight: 600;
  }

  .acc-row { display: flex; align-items: center; gap: 10px; }
  .acc-row .meta { flex: 1; min-width: 0; }
  .acc-row .name { font-size: 12.5px; font-weight: 500; }
  .acc-row .industry { font-size: 11px; color: var(--text-tertiary); }
  .acc-row .count {
    font-size: 11px; color: var(--text-tertiary);
    padding: 2px 7px; background: var(--surface-2);
    border-radius: 999px; font-weight: 500;
  }

  /* === Online Now === */
  .online-now {
    padding: 14px 16px;
    display: flex; align-items: center; gap: 12px;
  }
  .online-now-stack { display: flex; }
  .online-now-stack .avatar {
    margin-right: -7px;
    border: 2px solid var(--surface);
    width: 28px; height: 28px; font-size: 10px;
  }
  .online-now-stack .avatar.offline { opacity: 0.3; }

  /* === Pills / Tags === */
  .pill {
    display: inline-flex; align-items: center;
    padding: 3px 9px; font-size: 11px; font-weight: 600;
    border-radius: 999px;
    gap: 4px;
  }
  .pill.green { background: var(--green-bg); color: var(--green-text); }
  .pill.yellow { background: var(--yellow-bg); color: var(--yellow-text); }
  .pill.red { background: var(--red-bg); color: var(--accent); }
  .pill.gray { background: var(--gray-bg); color: var(--gray-text); }
  .pill.blue { background: var(--blue-bg); color: var(--blue-text); }
  .pill.dark { background: var(--black); color: #fff; }

  .tag {
    display: inline-flex; align-items: center;
    padding: 2px 8px; font-size: 11px;
    border-radius: 4px;
    background: var(--surface-2); color: var(--text-secondary);
    font-weight: 500;
  }

  /* === Filter chips === */
  .filter-bar {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
  }
  .search {
    flex: 1; max-width: 320px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 8px 12px 8px 34px;
    font-size: 12.5px;
    color: var(--text);
    position: relative;
    height: 34px;
  }
  .search-wrap {
    position: relative; flex-shrink: 0;
  }
  .search-wrap svg {
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    width: 14px; height: 14px;
    color: var(--text-tertiary);
  }
  .search-wrap .search { padding-left: 32px; }
  .search:focus { outline: none; border-color: var(--text-secondary); }
  .chip {
    padding: 7px 13px;
    border-radius: 999px;
    font-size: 12.5px; font-weight: 500;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
  }
  .chip.active { background: var(--black); color: #fff; border-color: var(--black); }
  .chip .count { color: var(--text-tertiary); font-weight: 500; }
  .chip.active .count { color: rgba(255,255,255,0.6); }
  .select {
    padding: 7px 30px 7px 13px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: var(--surface) url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%239A9A9A' stroke-width='2'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e") no-repeat right 10px center;
    font-size: 12.5px; color: var(--text);
    appearance: none; cursor: pointer;
    height: 34px;
    min-width: 160px;
  }

  /* === Table === */
  .table-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .table-row {
    display: grid;
    grid-template-columns: 2.2fr 1.4fr 2fr 1fr 1fr 1.2fr 1.2fr 0.8fr;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    font-size: 12.5px;
  }
  .table-row:last-child { border-bottom: none; }
  .table-head {
    background: var(--surface);
    color: var(--text-tertiary);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding-top: 10px; padding-bottom: 10px;
  }
  .table-row .acct {
    display: flex; align-items: center; gap: 10px;
  }
  .table-row .acct .nm { font-weight: 600; font-size: 13px; }
  .table-row .acct .tasks {
    font-size: 10px; color: var(--text-tertiary);
    margin-left: 6px;
    background: var(--surface-2);
    padding: 1px 7px; border-radius: 999px;
  }
  .services { display: flex; flex-wrap: wrap; gap: 4px; }
  .avatar-stack { display: flex; }
  .avatar-stack .avatar {
    margin-right: -6px;
    border: 2px solid var(--surface);
  }

  /* === Tasks Page === */
  /* Account-grouped columns: check · Name · Priority · Assignee · Due */
  :root { --task-line-cols: 24px minmax(0, 1fr) 130px 160px 80px; }
  .task-group {
    margin-bottom: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16,24,40,0.03);
  }
  .task-group-head {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
  }
  .task-group.collapsed .task-group-head { border-bottom: 0; }
  .task-group-head .nm {
    font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em;
  }
  .task-group-head .count {
    font-size: 11px; color: var(--text-tertiary);
    margin-left: auto;
  }
  .task-group-card {
    background: transparent;
  }
  .task-line {
    display: grid;
    grid-template-columns: var(--task-line-cols);
    gap: 14px;
    align-items: center;
    padding: 0 18px;
    min-height: 52px;
    border-bottom: 1px solid var(--border);
    transition: background 0.12s ease;
  }
  .task-line:last-child { border-bottom: none; }
  .task-line:hover { background: var(--surface-2); }
  .task-line.is-done { background: rgba(22,163,74,0.025); }
  .task-line .ttl { font-size: 13.5px; font-weight: 500; color: var(--text); line-height: 1.3; }
  .task-line.is-done .ttl { color: var(--text-tertiary); text-decoration: line-through; }
  .task-line .status-cell, .task-line .priority-cell { display: flex; align-items: center; }
  .task-line .priority-cell { font-size: 12.5px; }
  .task-line .due {
    font-size: 12.5px; color: #DC2626; font-weight: 500;
    white-space: nowrap;
    display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  }
  .task-line .due.ok { color: var(--text-secondary); font-weight: 400; }
  .task-line.is-done .due { color: var(--text-tertiary); font-weight: 400; }
  /* Timer button: hidden by default, shown on row hover (keeps the layout calm) */
  .task-line .timer-btn { opacity: 0; transition: opacity 0.15s ease; }
  .task-line:hover .timer-btn { opacity: 1; }
  .task-line .time-logged:empty { display: none; }
  /* Assignee column: avatar + first name inline */
  .task-line .assignee-inline {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12.5px; color: var(--text-secondary);
    min-width: 0;
  }
  .task-line .assignee-inline > span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Square dark brand badge for the account group header */
  .avatar.square {
    border-radius: 6px;
    background: #111827; color: #fff;
    width: 28px; height: 28px; font-size: 10px; font-weight: 700;
  }
  .avatar.square.sm { width: 22px; height: 22px; font-size: 9px; }

  /* Task-specific status pill overrides — match the reference card style:
     In Progress = solid dark, others = soft gray. Scoped to task views so
     they don't change pills elsewhere. */
  .task-line .pill, .task-row .pill, .task-board-card .pill {
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
  }
  .task-line .pill.red,
  .task-row .pill.red,
  .task-board-card .pill.red {
    background: #111827; color: #fff;
  }
  .task-line .pill.gray,
  .task-row .pill.gray,
  .task-board-card .pill.gray {
    background: #f3f4f6; color: #374151;
  }
  .task-line .pill.yellow,
  .task-row .pill.yellow {
    background: #fef3c7; color: #92400e;
  }

  /* === Task drawer (detail + new) — Asana-style 2-col layout === */
  .td-eyebrow {
    font-size: 12px; color: var(--text-tertiary); font-weight: 500;
    padding: 14px 22px 0;
  }
  .td-title {
    margin: 8px 0 4px;
    font-size: 22px; font-weight: 700; letter-spacing: -0.015em;
    line-height: 1.25;
  }
  .td-subtitle {
    font-size: 13px; color: var(--text-tertiary);
    line-height: 1.5;
    margin-bottom: 18px;
  }
  .td-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
    margin-bottom: 18px;
  }
  .td-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .td-field.span2 { grid-column: 1 / span 2; }
  .td-label {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-tertiary);
  }
  .td-label svg { width: 13px; height: 13px; opacity: 0.7; }
  .td-value {
    background: #f3f4f6;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 13px;
    color: var(--text);
    min-height: 38px;
    display: flex; align-items: center;
    transition: border-color 0.15s ease, background 0.15s ease;
  }
  body[data-theme="dark"] .td-value { background: rgba(255,255,255,0.04); }
  .td-value.editable { cursor: text; }
  .td-value.editable:hover { background: #ebedf0; }
  body[data-theme="dark"] .td-value.editable:hover { background: rgba(255,255,255,0.07); }
  .td-value.red { color: #DC2626; font-weight: 500; }
  .td-value select, .td-value input[type="date"], .td-value input[type="text"] {
    background: transparent;
    border: 0;
    width: 100%;
    font-size: 13px;
    color: inherit;
    outline: none;
    cursor: pointer;
  }
  /* Stretch the native date input so any click in the .td-value lands on it,
     and pull its picker indicator to the right edge for a cleaner look. */
  .td-value input[type="date"] {
    height: 100%;
    padding: 0;
    margin: 0;
    cursor: pointer;
  }
  .td-value input[type="date"]::-webkit-calendar-picker-indicator {
    margin-left: auto;
    cursor: pointer;
    opacity: 0.55;
  }
  .td-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
  .td-priority-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    margin-right: 8px;
    background: #9ca3af;
  }
  .td-priority-dot.high   { background: #111827; }
  .td-priority-dot.low    { background: #d1d5db; }
  .td-divider {
    border: 0; border-top: 1px solid var(--border);
    margin: 18px 0;
  }
  .td-section-label {
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 8px;
  }
  .td-notes {
    background: #f3f4f6;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 13px; line-height: 1.55;
    color: var(--text-secondary);
    white-space: pre-wrap;
  }
  body[data-theme="dark"] .td-notes { background: rgba(255,255,255,0.04); }
  .td-notes.empty { color: var(--text-tertiary); font-style: italic; }
  .td-activity-row {
    display: flex; gap: 10px;
    padding: 8px 0;
    align-items: flex-start;
  }
  .td-activity-row .body { flex: 1; font-size: 12.5px; }
  .td-activity-row .body b { font-weight: 600; }
  .td-activity-row .body .action { color: var(--text-tertiary); }
  .td-activity-row .body .when {
    color: var(--text-tertiary); font-size: 11px; margin-top: 2px;
  }
  .td-comment-input {
    width: 100%;
    background: #f3f4f6;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px; font-family: inherit;
    resize: vertical;
    min-height: 60px;
    outline: none;
    transition: border-color 0.15s ease;
  }
  body[data-theme="dark"] .td-comment-input { background: rgba(255,255,255,0.04); }
  .td-comment-input:focus { border-color: var(--accent); background: var(--surface); }
  .task-toolbar {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 18px;
    flex-wrap: wrap;
  }
  .check {
    color: var(--text-tertiary);
    font-size: 12px;
    display: inline-flex; align-items: center; gap: 6px;
  }
  .check input { accent-color: var(--accent); }

  /* View switcher — pill with 3 buttons (account/list/board) */
  .view-switch {
    display: inline-flex;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 3px;
    gap: 2px;
  }
  .view-switch button {
    background: transparent; border: 0;
    width: 32px; height: 28px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-tertiary);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  }
  .view-switch button:hover { color: var(--text-secondary); background: rgba(0,0,0,0.03); }
  .view-switch button.active {
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 1px 2px rgba(16,24,40,0.10);
  }
  .view-switch button svg { width: 15px; height: 15px; }

  /* Account-group header collapse arrow + counts */
  .task-group.collapsed .task-group-card { display: none; }
  .task-group-head {
    cursor: pointer;
    border-radius: var(--radius);
  }
  .task-group-head:hover { background: rgba(0,0,0,0.02); }
  .task-group-head .industry {
    font-size: 11.5px; color: var(--text-tertiary); font-weight: 400; margin-left: 4px;
  }
  .task-group-head .overdue-pill {
    font-size: 11px; color: #DC2626; font-weight: 600;
    padding: 2px 8px; border-radius: 10px; background: rgba(220,38,38,0.08);
  }
  .task-group-head .active-pill {
    font-size: 11px; color: var(--text-secondary); font-weight: 500;
    padding: 2px 8px; border-radius: 10px; background: rgba(0,0,0,0.04);
  }
  .task-group-head .total-count {
    font-size: 11.5px; color: var(--text-tertiary);
  }
  .task-group-head .chev {
    color: var(--text-tertiary);
    transition: transform 0.15s ease;
  }
  .task-group.collapsed .task-group-head .chev { transform: rotate(-90deg); }

  /* Task line — enhanced with description subtitle */
  .task-line .task-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .task-line .task-text > span:first-child {
    display: inline-flex; align-items: center; gap: 7px; min-width: 0;
  }
  .task-line .task-text .ttl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .task-line .task-text .desc {
    font-size: 11.5px; color: var(--text-tertiary); font-weight: 400;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  }
  /* Recurring-series badge + due-time chip on task lines */
  .task-recur {
    flex: none;
    font-size: 10px; font-weight: 600; letter-spacing: 0.02em;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border-radius: 999px; padding: 1px 7px;
  }
  .due-time { display: block; font-size: 10.5px; font-weight: 400; color: var(--text-tertiary); line-height: 1.2; }

  /* === Rich-text editor (Shopify-style description) === */
  .rte {
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--surface); overflow: hidden;
    transition: border-color 0.15s ease;
  }
  .rte:focus-within { border-color: var(--accent); }
  .rte-toolbar {
    display: flex; align-items: center; gap: 2px;
    padding: 5px 6px; border-bottom: 1px solid var(--border);
    background: #f9fafb;
  }
  body[data-theme="dark"] .rte-toolbar { background: rgba(255,255,255,0.03); }
  .rte-toolbar button {
    border: 0; background: transparent; cursor: pointer;
    width: 28px; height: 28px; border-radius: 6px;
    font-size: 13px; color: var(--text-secondary);
    display: inline-flex; align-items: center; justify-content: center;
  }
  .rte-toolbar button:hover { background: rgba(0,0,0,0.06); color: var(--text); }
  body[data-theme="dark"] .rte-toolbar button:hover { background: rgba(255,255,255,0.08); }
  .rte-toolbar .sep { width: 1px; height: 16px; background: var(--border); margin: 0 4px; }
  .rte-body {
    padding: 10px 12px; font-size: 13px; line-height: 1.55;
    color: var(--text); min-height: 64px; outline: none;
    max-height: 320px; overflow-y: auto;
  }
  .rte-body:empty::before { content: attr(data-placeholder); color: var(--text-tertiary); }
  .rte-body ul, .rte-body ol { margin: 4px 0; padding-left: 22px; }
  .rte-body li { margin: 2px 0; }
  .rte-body b, .rte-body strong { font-weight: 700; }
  /* Render formatted description in the read-only Description section */
  .td-notes ul, .td-notes ol { margin: 4px 0; padding-left: 22px; }
  .td-notes li { margin: 2px 0; }
  .td-notes b, .td-notes strong { font-weight: 700; }
  .td-notes:not(.empty) { white-space: normal; }

  /* === Tasks: list (table) view === */
  /* =========================================================
     TASKS — shared design tokens for all three views
     Column model (list):  check · Name · Assignee · Due · Priority · +
     Status is conveyed by sections (Asana-style), not a column.
     ========================================================= */
  :root {
    --task-cols: 40px minmax(240px, 2.8fr) 160px 140px 130px 40px;
    --task-pad-x: 18px;
    --task-green: #16a34a;
  }

  /* List sections (grouped by status) */
  .task-section { border-bottom: 1px solid var(--border); }
  .task-section:last-child { border-bottom: none; }
  .task-section-head {
    display: flex; align-items: center; gap: 8px;
    padding: 0 var(--task-pad-x);
    height: 40px;
    cursor: pointer;
    background: var(--surface);
    user-select: none;
  }
  /* Each status section carries its own calm tint (head + rows) so the eye
     groups work at a glance without effort — meaning over decoration. */
  .task-section[data-section="todo"]        { --sec-tint: var(--task-tint-todo); }
  .task-section[data-section="in_progress"] { --sec-tint: var(--task-tint-in_progress); }
  .task-section[data-section="review"]      { --sec-tint: var(--task-tint-review); }
  .task-section[data-section="backlog"]     { --sec-tint: var(--task-tint-backlog); }
  .task-section[data-section="done"]        { --sec-tint: var(--task-tint-done); }
  .task-section-head { background: var(--sec-tint, var(--surface)); }
  .task-section-body { background: var(--sec-tint, var(--surface)); }
  .task-section-head:hover { filter: brightness(0.985); }
  .task-section-head .chev { color: var(--text-tertiary); display: inline-flex; transition: transform 0.15s ease; }
  .task-section.collapsed .task-section-head .chev { transform: rotate(-90deg); }
  .task-section-head .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
  .task-section-head .dot.status-todo        { background: #94A3B8; }
  .task-section-head .dot.status-in_progress { background: #D97706; }
  .task-section-head .dot.status-review      { background: #8B7FD4; }
  .task-section-head .dot.status-backlog     { background: var(--border-strong); }
  .task-section-head .dot.status-done        { background: var(--task-green); }
  .task-section-head .sec-name { font-size: 13px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
  .task-section-head .sec-count {
    font-size: 11.5px; color: var(--text-secondary); font-weight: 600;
    background: rgba(255,255,255,0.7); border: 1px solid var(--border);
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .task-section.collapsed .task-section-body { display: none; }

  .task-table {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16,24,40,0.03);
  }
  .task-table-head {
    display: grid;
    grid-template-columns: var(--task-cols);
    gap: 14px;
    align-items: center;
    padding: 0 var(--task-pad-x);
    height: 40px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 2;
  }
  .task-table-head > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .task-table-head .add-col {
    display: flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 6px; cursor: pointer;
    color: var(--text-tertiary); margin: 0 auto;
  }
  .task-table-head .add-col:hover { background: rgba(0,0,0,0.05); color: var(--text-secondary); }
  .task-table-head .add-col svg { width: 14px; height: 14px; }

  .task-row {
    display: grid;
    grid-template-columns: var(--task-cols);
    gap: 14px;
    align-items: center;
    padding: 0 var(--task-pad-x);
    min-height: 52px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.12s ease;
  }
  .task-row:last-child { border-bottom: none; }
  .task-row:hover { background: rgba(255,255,255,0.6); box-shadow: inset 2px 0 0 rgba(0,0,0,0.06); }
  .task-row.is-done { opacity: 0.85; }

  /* completion check circle — shared by list + account views */
  .task-check {
    width: 22px; height: 22px; border-radius: 50%;
    border: 1.5px solid var(--border-strong);
    background: var(--surface); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: transparent; padding: 0;
    transition: border-color .12s ease, background .12s ease, color .12s ease, transform .12s ease;
  }
  .task-check svg { width: 12px; height: 12px; stroke-width: 3; }
  .task-check:hover { border-color: var(--task-green); color: var(--task-green); transform: scale(1.08); }
  .task-check.checked { background: var(--task-green); border-color: var(--task-green); color: #fff; }
  .task-check.checked:hover { background: #15803d; border-color: #15803d; }

  .task-row .row-num { font-size: 12px; color: var(--text-tertiary); text-align: center; font-variant-numeric: tabular-nums; }
  .task-row .title-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .task-row .title-cell .title {
    font-size: 13.5px; font-weight: 500; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3;
  }
  .task-row .title-cell .sub {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; color: var(--text-tertiary); font-weight: 400;
  }
  .task-row .title-cell .sub::before {
    content: ''; width: 6px; height: 6px; border-radius: 2px;
    background: #111827; opacity: 0.55; flex: none;
  }
  .task-row.is-done .title-cell .title { color: var(--text-tertiary); text-decoration: line-through; }
  .task-row .assignee-cell { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-secondary); min-width: 0; }
  .task-row .assignee-cell > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .assignee-empty { width: 22px; height: 22px; border-radius: 50%; border: 1.5px dashed var(--border-strong); display: inline-block; flex: none; }
  .task-row .status-cell { display: flex; align-items: center; }
  .task-row .due-cell { font-size: 12.5px; color: #DC2626; font-weight: 500; white-space: nowrap; }
  .task-row .due-cell.ok { color: var(--text-secondary); font-weight: 400; }
  .task-row.is-done .due-cell { color: var(--text-tertiary); font-weight: 400; }
  .task-row .priority-cell { font-size: 12.5px; }
  .priority-dot {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--text-secondary);
  }
  .priority-dot::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%; display: inline-block;
  }
  .priority-dot.high::before   { background: #E06C50; } /* warm coral — urgent, not alarming */
  .priority-dot.medium::before { background: #E0A53B; } /* amber */
  .priority-dot.low::before    { background: #7FB89A; } /* soft sage — relaxed */

  /* === Tasks: board (kanban) view — columns ARE the status === */
  .task-board {
    display: grid;
    grid-template-columns: repeat(5, minmax(248px, 1fr));
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 8px;
    align-items: start;
  }
  .task-board-col {
    display: flex; flex-direction: column; min-width: 248px;
    background: var(--col-tint, var(--surface-2));
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
  }
  .task-board-col[data-board-col="todo"]        { --col-tint: var(--task-tint-todo); }
  .task-board-col[data-board-col="in_progress"] { --col-tint: var(--task-tint-in_progress); }
  .task-board-col[data-board-col="review"]      { --col-tint: var(--task-tint-review); }
  .task-board-col[data-board-col="backlog"]     { --col-tint: var(--task-tint-backlog); }
  .task-board-col[data-board-col="done"]        { --col-tint: var(--task-tint-done); }
  .task-board-col-head {
    display: flex; align-items: center; gap: 8px;
    padding: 2px 2px 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
  }
  .task-board-col-head::before {
    content: ''; width: 8px; height: 8px; border-radius: 50%; flex: none;
    background: #D97706;
  }
  .task-board-col[data-board-col="todo"] .task-board-col-head::before { background: #94A3B8; }
  .task-board-col[data-board-col="review"] .task-board-col-head::before { background: #8B7FD4; }
  .task-board-col[data-board-col="backlog"] .task-board-col-head::before { background: var(--border-strong); }
  .task-board-col[data-board-col="done"] .task-board-col-head::before { background: var(--task-green); }
  .task-board-col-head .col-count {
    margin-left: auto; color: var(--text-secondary); font-weight: 600;
    background: rgba(255,255,255,0.7); border: 1px solid var(--border);
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; letter-spacing: 0;
  }
  .task-board-col-body { display: flex; flex-direction: column; gap: 8px; min-height: 8px; }
  .task-board-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px;
    cursor: pointer;
    display: flex; flex-direction: column; gap: 10px;
    box-shadow: 0 1px 2px rgba(16,24,40,0.04);
    transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
  }
  .task-board-card:hover { box-shadow: 0 4px 12px rgba(16,24,40,0.08); border-color: var(--border-strong); transform: translateY(-1px); }
  .task-board-card .card-head { display: flex; align-items: flex-start; gap: 9px; }
  .task-board-card .card-head .task-check { margin-top: 1px; flex: none; }
  .task-board-card .card-title { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--text); min-width: 0; }
  .task-board-card.is-done .card-title { color: var(--text-tertiary); text-decoration: line-through; }
  .task-board-card .card-meta {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; padding-left: 31px;
    font-size: 11.5px; color: var(--text-tertiary);
  }
  .task-board-card .card-meta .left {
    display: inline-flex; align-items: center; gap: 6px;
    min-width: 0; overflow: hidden;
  }
  .task-board-card .card-meta .left > .acct { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .task-board-card .card-meta .due { color: #DC2626; font-weight: 500; white-space: nowrap; }
  .task-board-card .card-meta .due.ok { color: var(--text-tertiary); font-weight: 400; }
  .task-board-card .card-meta .assignee-empty { width: 22px; height: 22px; }

  /* === CRM Kanban === */
  .crm-board {
    display: grid;
    grid-template-columns: repeat(6, minmax(170px, 1fr));
    gap: 10px;
    overflow-x: auto;
  }
  .crm-col { min-width: 170px; }
  .crm-col-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px;
    font-size: 12.5px; font-weight: 600;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  }
  .crm-col-head .ct {
    color: var(--text-tertiary); font-weight: 500; font-size: 11.5px;
  }
  .crm-col-body { display: flex; flex-direction: column; gap: 8px; padding: 8px 0; }
  .crm-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 13px;
  }
  .crm-card .brand { font-size: 13px; font-weight: 600; margin-bottom: 1px; }
  .crm-card .person { font-size: 11.5px; color: var(--text-tertiary); margin-bottom: 8px; }
  .crm-card .gmv { font-size: 10.5px; color: var(--text-secondary); margin-bottom: 8px; font-weight: 500; }
  .crm-card .svc { display: flex; flex-wrap: wrap; gap: 4px; }

  .crm-col.col-new .crm-col-head { background: #FEF3F2; color: #B91C1C; }
  .crm-col.col-contacted .crm-col-head { background: #FFF7ED; color: #C2410C; }
  .crm-col.col-qualified .crm-col-head { background: #FEFCE8; color: #A16207; }
  .crm-col.col-proposal .crm-col-head { background: #ECFDF5; color: #047857; }
  .crm-col.col-won .crm-col-head { background: #EFF6FF; color: #1E40AF; }
  .crm-col.col-lost .crm-col-head { background: #F4F4F5; color: #52525B; }

  .crm-col.col-new .crm-card { background: #FFFAF9; }
  .crm-col.col-contacted .crm-card { background: #FFFCF5; }
  .crm-col.col-qualified .crm-card { background: #FFFEF5; }
  .crm-col.col-proposal .crm-card { background: #F6FEF9; }
  .crm-col.col-won .crm-card { background: #F7FAFF; }
  .crm-col.col-lost .crm-card { background: #FAFAFA; }

  .crm-toggle {
    display: inline-flex; border: 1px solid var(--border-strong);
    border-radius: 999px; padding: 3px;
    background: var(--surface);
  }
  .crm-toggle button {
    border: none; background: transparent;
    padding: 5px 16px; border-radius: 999px;
    font-size: 12px; font-weight: 500; color: var(--text-secondary);
  }
  .crm-toggle button.active { background: var(--black); color: #fff; }

  /* === HR === */
  .hr-tabs {
    display: flex; gap: 24px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 18px;
  }
  .hr-tab {
    padding: 10px 0;
    border: none; background: transparent;
    font-size: 13.5px; font-weight: 500;
    color: var(--text-tertiary);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
  }
  .hr-tab.active { color: var(--text); border-bottom-color: var(--text); }

  .pill-filter {
    display: inline-flex; gap: 8px; flex-wrap: wrap;
  }
  .pill-filter .chip { padding: 6px 14px; font-size: 12px; }
  .pill-filter .chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }

  .hr-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .person-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    position: relative;
  }
  .person-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 12px;
  }

  /* === Presence: live today / WFH / away === */
  .presence-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    vertical-align: middle; margin-right: 5px; flex: none;
  }
  .presence-dot.live { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,0.16); }
  .presence-dot.wfh  { background: #2563EB; box-shadow: 0 0 0 3px rgba(37,99,235,0.16); }
  .presence-dot.away { background: var(--border-strong); }
  .presence-badge {
    position: absolute; top: 12px; right: 12px;
    display: inline-flex; align-items: center;
    font-size: 10.5px; font-weight: 600; letter-spacing: 0.01em;
    padding: 3px 9px 3px 8px; border-radius: 999px;
    border: 1px solid var(--border);
  }
  .presence-badge.live { color: #15803d; background: #EFF8F1; border-color: rgba(22,163,74,0.2); }
  .presence-badge.wfh  { color: #1D4ED8; background: #EAF1FE; border-color: rgba(37,99,235,0.2); }
  .presence-badge.away { color: var(--text-tertiary); background: var(--surface-2); }
  .presence-badge .presence-dot { box-shadow: none; }
  /* Avatar presence ring */
  .avatar-presence { position: relative; display: inline-flex; border-radius: 50%; }
  .avatar-presence::after {
    content: ''; position: absolute; right: -1px; bottom: -1px;
    width: 11px; height: 11px; border-radius: 50%;
    border: 2px solid var(--surface);
  }
  .avatar-presence.live::after { background: #16a34a; }
  .avatar-presence.wfh::after  { background: #2563EB; }
  .avatar-presence.away::after { background: var(--border-strong); }
  /* Subtitle presence dots align nicely inline */
  .page-subtitle .presence-dot { width: 7px; height: 7px; box-shadow: none; margin: 0 4px 0 2px; }
  .person-head .id { flex: 1; min-width: 0; }
  .person-head .nm { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
  .person-head .role { font-size: 11.5px; color: var(--text-tertiary); }
  .role-tag {
    font-size: 9.5px; font-weight: 600;
    padding: 2px 7px; border-radius: 999px;
    text-transform: lowercase;
  }
  .role-tag.founder { background: var(--accent); color: #fff; }
  .role-tag.avp { background: var(--gray-bg); color: var(--text); }
  .role-tag.team { background: var(--surface-2); color: var(--text-secondary); }
  .person-meta {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 11.5px; color: var(--text-tertiary);
  }
  .person-meta div { display: flex; align-items: center; gap: 6px; }
  .person-meta svg { width: 12px; height: 12px; }
  .vert-tag {
    font-size: 11px; font-weight: 500; color: var(--text-secondary);
  }

  /* === KB === */
  .kb-shell {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 18px;
    align-items: start;
  }
  .kb-side {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    position: sticky; top: 76px;
  }
  .kb-side .search-wrap { width: 100%; margin-bottom: 8px; }
  .kb-side .search { width: 100%; }
  .kb-content-map-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border-radius: var(--radius-sm);
    background: var(--surface-2); font-size: 12.5px; font-weight: 500;
    margin-bottom: 14px; cursor: pointer;
  }
  .kb-side .topics-label {
    font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
    color: var(--text-tertiary); text-transform: uppercase;
    padding: 6px 10px; margin-top: 4px;
  }
  .kb-topic { font-size: 12.5px; }
  .kb-topic-head {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; cursor: pointer; color: var(--text);
    font-weight: 500;
  }
  .kb-topic-head .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--text-tertiary);
  }
  .kb-topic-head .chev {
    margin-left: auto; color: var(--text-tertiary);
  }
  .kb-sub-list { display: flex; flex-direction: column; padding-left: 24px; }
  .kb-sub-list a {
    padding: 5px 10px;
    text-decoration: none; color: var(--text-secondary);
    font-size: 12px;
  }
  .kb-sub-list a:hover { color: var(--text); }

  .kb-cats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .kb-cat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .kb-cat-head {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    border-top: 3px solid var(--kb-onboarding);
  }
  .kb-cat-head h3 { margin: 0; font-size: 14px; font-weight: 700; }
  .kb-cat-head .ct { font-size: 11px; color: var(--text-tertiary); }
  .kb-cat.c1 .kb-cat-head { border-top-color: #2563EB; }
  .kb-cat.c2 .kb-cat-head { border-top-color: #2563EB; }
  .kb-cat.c3 .kb-cat-head { border-top-color: #7C3AED; }
  .kb-cat.c4 .kb-cat-head { border-top-color: #DC2626; }
  .kb-cat.c5 .kb-cat-head { border-top-color: #16A34A; }
  .kb-cat.c6 .kb-cat-head { border-top-color: #EA580C; }

  .kb-section { padding: 12px 16px 14px; }
  .kb-section + .kb-section { border-top: 1px solid var(--border); }
  .kb-section-name {
    font-size: 12px; font-weight: 600; color: var(--text);
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 6px;
  }
  .kb-section-name .ct {
    font-size: 10px; color: var(--text-tertiary); font-weight: 500;
  }
  .kb-section a {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 0;
    text-decoration: none; color: var(--text-secondary);
    font-size: 12px;
  }
  .kb-section a:hover { color: var(--text); }
  .kb-section svg { width: 12px; height: 12px; }

  /* === Finance === */
  .fin-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 14px;
  }
  .fin-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
  }
  .fin-label {
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 6px;
  }
  .fin-value {
    font-size: 26px; font-weight: 700; letter-spacing: -0.02em;
  }
  .fin-delta {
    font-size: 12px; color: var(--green-text); font-weight: 500;
    margin-top: 4px;
  }
  .fin-delta.down { color: var(--accent); }
  .fin-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .fin-table-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    align-items: center;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border);
    font-size: 12.5px;
  }
  .fin-table-row:last-child { border-bottom: none; }
  .fin-table-head {
    color: var(--text-tertiary);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .progress {
    height: 4px; background: var(--surface-2); border-radius: 2px;
    overflow: hidden; margin-top: 8px;
  }
  .progress > div { height: 100%; background: var(--accent); border-radius: 2px; }
  .neg { color: var(--accent); }
  .pos { color: var(--green-text); }

  /* === Hiring (exam + AI interview results) === */
  .hiring-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
  @media (max-width: 900px) { .hiring-kpis { grid-template-columns: repeat(2, 1fr); } }
  .hiring-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
  .hiring-tbl-scroll { overflow-x: auto; }
  .hiring-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
  .hiring-table th {
    text-align: left; padding: 10px 14px; white-space: nowrap;
    color: var(--text-tertiary); font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
    border-bottom: 1px solid var(--border); background: var(--surface-2);
  }
  .hiring-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
  .hiring-table tbody tr:last-child td { border-bottom: none; }
  .hiring-table tbody tr.hiring-row:hover { background: var(--surface-2); cursor: pointer; }
  .hiring-detail td { background: var(--surface-2); }
  .hiring-empty { padding: 40px; text-align: center; color: var(--text-tertiary); font-size: 13px; }

  /* === Admin Panel === */
  .admin-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  .admin-grid .btn { grid-column: span 4; justify-self: end; }
  @media (max-width: 800px) {
    .admin-grid { grid-template-columns: 1fr 1fr; }
    .admin-grid .btn { grid-column: span 2; }
  }
  .admin-input {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 10px;
    font-size: 13px;
    color: var(--text);
    font-family: inherit;
  }
  .admin-input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
  .admin-mini {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 3px 6px;
    font-size: 12px;
    color: var(--text);
    font-family: inherit;
  }
  .admin-table { font-size: 13px; }
  .admin-table th {
    text-align: left; padding: 10px 12px;
    font-size: 11.5px; font-weight: 600;
    color: var(--text-secondary); text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
  }
  .admin-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
  }
  .admin-table tr:last-child td { border-bottom: none; }
  .admin-table tr.inactive-row td { opacity: 0.55; }
  .admin-table .btn { margin-left: 4px; }

  /* === Admin: Data & Backup console === */
  .dir-cards {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px;
  }
  @media (max-width: 720px) { .dir-cards { grid-template-columns: repeat(2, 1fr); } }
  .dir-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    padding: 14px; border-radius: var(--radius);
    border: 1px solid var(--border); background: var(--surface-2);
    cursor: pointer; text-align: left;
    transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
  }
  .dir-card.primary:hover { border-color: var(--border-strong); box-shadow: 0 2px 8px rgba(16,24,40,0.06); transform: translateY(-1px); }
  .dir-card .dir-icon { font-size: 18px; }
  .dir-card .dir-count { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; }
  .dir-card .dir-label { font-size: 11.5px; color: var(--text-tertiary); }
  .dir-card.primary { background: var(--task-tint-todo); }
  .dir-card.linked-summary { background: var(--surface); cursor: default; justify-content: center; }

  .data-tabs {
    display: flex; gap: 6px; flex-wrap: wrap;
    padding-bottom: 12px; margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
  }
  .data-tab {
    border: 1px solid var(--border); background: var(--surface);
    border-radius: 999px; padding: 5px 11px; font-size: 12px; cursor: pointer;
    color: var(--text-secondary); display: inline-flex; align-items: center; gap: 6px;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
  }
  .data-tab:hover { border-color: var(--border-strong); }
  .data-tab.active { background: var(--black); color: #fff; border-color: var(--black); }
  .data-tab .t-count { font-size: 10.5px; opacity: 0.6; font-variant-numeric: tabular-nums; }
  .data-tab.active .t-count { opacity: 0.7; }

  .data-viewer { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
  .data-viewer-scroll { max-height: 420px; overflow: auto; }
  .data-viewer-table { width: 100%; border-collapse: collapse; font-size: 12px; }
  .data-viewer-table th {
    position: sticky; top: 0; z-index: 1;
    text-align: left; padding: 8px 10px; white-space: nowrap;
    font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
    color: var(--text-tertiary); background: var(--surface-2); border-bottom: 1px solid var(--border);
  }
  .data-viewer-table td {
    padding: 7px 10px; border-bottom: 1px solid var(--border);
    max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    vertical-align: top;
  }
  .data-viewer-table tr:hover td { background: var(--surface-2); }
  .data-viewer-foot {
    display: flex; align-items: center; padding: 10px 12px;
    font-size: 11.5px; color: var(--text-tertiary); border-top: 1px solid var(--border);
    background: var(--surface-2);
  }

  /* === Auth Gate === */
  .auth-gate {
    position: fixed; inset: 0;
    background: var(--bg);
    display: flex; align-items: center; justify-content: center;
    z-index: 200;
  }
  .auth-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px;
    width: 380px; max-width: 92vw;
    box-shadow: 0 16px 48px rgba(0,0,0,0.06);
  }
  .auth-logo {
    font-weight: 800; font-size: 22px; color: var(--text);
    margin-bottom: 4px;
  }
  .auth-sub {
    font-size: 13px; color: var(--text-secondary); margin-bottom: 20px;
  }
  .auth-form { display: flex; flex-direction: column; gap: 14px; }
  .auth-field { display: flex; flex-direction: column; gap: 6px; }
  .auth-field span { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
  .auth-field input {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    font-size: 14px;
    color: var(--text);
    font-family: inherit;
  }
  .auth-field input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
  .auth-error {
    color: var(--accent); font-size: 12.5px; min-height: 16px;
  }
  .auth-submit { width: 100%; padding: 10px 14px; font-size: 14px; font-weight: 600; }
  .auth-switch { text-align: center; font-size: 12.5px; margin-top: 4px; }
  .auth-switch a { color: var(--accent); text-decoration: none; }

  /* === Modal === */
  .modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    display: none;
    align-items: center; justify-content: center;
    z-index: 100;
    backdrop-filter: blur(2px);
  }
  .modal-backdrop.show { display: flex; }
  .modal {
    background: var(--surface);
    border-radius: var(--radius-lg);
    width: 480px; max-width: 92vw;
    max-height: 90vh; overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.18);
  }
  .modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border);
  }
  .modal-header h2 {
    margin: 0; font-size: 17px; font-weight: 700;
    letter-spacing: -0.01em;
  }
  .modal-close {
    border: none; background: transparent;
    color: var(--text-tertiary);
    cursor: pointer; padding: 4px;
    border-radius: var(--radius-sm);
  }
  .modal-close:hover { background: var(--surface-2); color: var(--text); }
  .modal-body {
    padding: 18px 22px;
    display: flex; flex-direction: column; gap: 13px;
  }
  .field { display: flex; flex-direction: column; gap: 5px; }
  .field label {
    font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-tertiary);
  }
  .field input[type="text"], .field input[type="number"], .field input[type="date"],
  .field select, .field textarea {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 9px 11px;
    font-size: 13px; font-family: inherit;
    color: var(--text);
    background: var(--surface);
    width: 100%;
  }
  .field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: var(--text);
  }
  .field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .checkbox-group {
    display: flex; flex-wrap: wrap; gap: 6px;
  }
  .checkbox-group label {
    font-size: 12px; color: var(--text);
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 500; padding: 6px 11px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    cursor: pointer;
    text-transform: none; letter-spacing: 0;
  }
  .checkbox-group input { margin: 0; accent-color: var(--accent); }
  .checkbox-group label:has(input:checked) {
    background: var(--black); color: #fff; border-color: var(--black);
  }
  .modal-footer {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 22px;
    border-top: 1px solid var(--border);
    gap: 8px;
  }
  .modal-footer .right { display: flex; gap: 8px; }
  .modal-error {
    color: var(--accent); font-size: 12px;
    padding: 0 22px 6px;
    min-height: 14px;
  }
  .toast {
    position: fixed; bottom: 24px; left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--black); color: #fff;
    padding: 10px 18px; border-radius: 999px;
    font-size: 13px; font-weight: 500;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    z-index: 200; opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: none;
  }
  .toast.show {
    opacity: 1; transform: translateX(-50%) translateY(0);
  }

  /* === Heatmap === */
  .heatmap {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
    gap: 5px;
    padding: 14px 16px;
  }
  .heat-tile {
    aspect-ratio: 1;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700;
    color: white;
    cursor: default;
    letter-spacing: -0.01em;
  }
  .heat-tile.good { background: #16A34A; }
  .heat-tile.warn { background: #EA580C; }
  .heat-tile.risk { background: #DC2626; }
  .heat-legend {
    display: flex; gap: 14px; padding: 0 16px 12px;
    font-size: 11px; color: var(--text-tertiary);
  }
  .heat-legend span { display: inline-flex; align-items: center; gap: 5px; }
  .heat-legend i {
    width: 9px; height: 9px; border-radius: 2px;
    display: inline-block;
  }
  .heat-legend i.good { background: #16A34A; }
  .heat-legend i.warn { background: #EA580C; }
  .heat-legend i.risk { background: #DC2626; }

  /* === On-leave badge + strip === */
  .leave-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px 3px 8px; border-radius: 999px;
    background: #FFF7ED; border: 1px solid #FED7AA; color: #C2410C;
    font-size: 11.5px; font-weight: 650; letter-spacing: -0.01em;
  }
  .leave-badge i {
    width: 7px; height: 7px; border-radius: 50%;
    background: #F97316; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.18);
  }
  .leave-badge em { font-style: normal; font-weight: 500; opacity: 0.75; }

  .leave-strip {
    display: flex; flex-wrap: wrap; gap: 9px; padding: 15px 16px;
  }
  .leave-chip {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 15px 8px 9px; border-radius: 12px;
    background: linear-gradient(135deg, #FFFBF6 0%, #FFF7ED 100%);
    border: 1px solid #FDE4CC;
    box-shadow: 0 1px 2px rgba(120, 70, 20, 0.04);
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
  }
  .leave-chip:hover {
    transform: translateY(-2px); border-color: #FDBA74;
    box-shadow: 0 6px 16px rgba(234, 88, 12, 0.13);
  }
  .leave-chip-info { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
  .leave-chip-info .nm {
    font-size: 12.5px; font-weight: 650; letter-spacing: -0.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .leave-chip-info .mt {
    font-size: 10.5px; font-weight: 500; color: #C2410C; opacity: 0.85;
    white-space: nowrap;
  }
  .leave-card .card-meta {
    padding: 2px 10px; border-radius: 999px;
    background: #FFF7ED; border: 1px solid #FED7AA; color: #C2410C;
    font-size: 11px; font-weight: 650;
  }
  .leave-empty {
    display: flex; align-items: center; gap: 9px;
    padding: 22px 16px; font-size: 12.5px; color: var(--text-tertiary);
  }
  .leave-empty span { font-size: 17px; }

  /* === Capacity bars === */
  .cap-row { padding: 12px 16px; border-bottom: 1px solid var(--border); }
  .cap-row:last-child { border-bottom: none; }
  .cap-label {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 12.5px; margin-bottom: 6px;
  }
  .cap-label .nm { font-weight: 600; }
  .cap-label .pct { font-size: 11.5px; color: var(--text-tertiary); }
  .cap-bar {
    height: 5px; background: var(--surface-2);
    border-radius: 3px; overflow: hidden;
  }
  .cap-bar > div { height: 100%; border-radius: 3px; transition: width 0.3s; }
  .cap-bar > div.good { background: #16A34A; }
  .cap-bar > div.warn { background: #EA580C; }
  .cap-bar > div.risk { background: #DC2626; }

  /* === Pipeline rows === */
  .pipe-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 11px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 12.5px;
  }
  .pipe-row:last-child { border-bottom: none; }
  .pipe-row .stage-tag {
    display: inline-block; padding: 2px 8px; font-size: 11px;
    border-radius: 999px; font-weight: 600;
  }
  .pipe-row .stage-tag.new       { background:#FEF3F2; color:#B91C1C; }
  .pipe-row .stage-tag.contacted { background:#FFF7ED; color:#C2410C; }
  .pipe-row .stage-tag.qualified { background:#FEFCE8; color:#A16207; }
  .pipe-row .stage-tag.proposal  { background:#ECFDF5; color:#047857; }
  .pipe-row .stage-tag.won       { background:#EFF6FF; color:#1E40AF; }

  /* === User switcher === */
  .user-switch {
    padding: 6px 28px 6px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface) url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%239A9A9A' stroke-width='2'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e") no-repeat right 8px center;
    font-size: 12.5px; color: var(--text);
    appearance: none; cursor: pointer;
    height: 32px;
    font-family: inherit;
  }

  /* === Account Workspace === */
  .ws-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 22px 36px 0;
  }
  .ws-back {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--text-tertiary); font-size: 12.5px;
    background: none; border: none; cursor: pointer;
    padding: 0 0 14px;
  }
  .ws-back:hover { color: var(--text); }
  .ws-back svg { width: 14px; height: 14px; }
  .ws-id {
    display: flex; align-items: center; gap: 16px;
    margin-bottom: 18px;
  }
  .ws-id .avatar {
    width: 56px; height: 56px;
    font-size: 17px;
    border-radius: 12px;
  }
  .ws-id .name { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
  .ws-id .meta {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    font-size: 12.5px; color: var(--text-tertiary);
    margin-top: 4px;
  }
  .ws-id .meta .dot { color: var(--border-strong); }
  .ws-id .actions { margin-left: auto; display: flex; gap: 8px; }
  .ws-tabs {
    display: flex; gap: 0;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    margin-bottom: -1px;
  }
  .ws-tab {
    padding: 11px 16px;
    border: none; background: transparent;
    font-size: 13px; font-weight: 500;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center; gap: 7px;
  }
  .ws-tab:hover { color: var(--text); }
  .ws-tab .ct {
    font-size: 10px; padding: 1px 6px;
    border-radius: 999px;
    background: var(--surface-2); color: var(--text-tertiary);
    font-weight: 600;
  }
  .ws-tab.active { color: var(--text); border-bottom-color: var(--text); }
  .ws-tab.active .ct { background: var(--black); color: #fff; }

  .ws-body { padding: 24px 36px; }

  /* Mini KPI for performance tab */
  .mini-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-bottom: 14px;
  }
  .mini-kpi {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 13px 15px;
    position: relative;
    overflow: hidden;
  }
  .mini-kpi .label {
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-tertiary);
  }
  .mini-kpi .value {
    font-size: 18px; font-weight: 700;
    letter-spacing: -0.015em;
    margin-top: 3px;
  }
  .mini-kpi .delta { font-size: 10.5px; color: var(--green-text); margin-top: 2px; font-weight: 500; }
  .mini-kpi .delta.down { color: var(--accent); }

  .spark { margin-top: 6px; height: 22px; width: 100%; display: block; }
  .spark .area { fill: var(--accent); opacity: 0.12; }
  .spark .line { fill: none; stroke: var(--accent); stroke-width: 1.5; }

  /* Channel bar */
  .channel-bar {
    height: 10px; border-radius: 5px; overflow: hidden;
    display: flex; margin: 12px 16px;
  }
  .channel-bar > div { height: 100%; }
  .channel-meta { display: flex; gap: 14px; padding: 0 16px 14px; font-size: 11.5px; color: var(--text-secondary); flex-wrap: wrap; }
  .channel-meta i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; }

  /* AI action buttons */
  .ai-actions { display: flex; gap: 6px; flex-wrap: wrap; }
  .ai-btn {
    padding: 7px 13px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-size: 12.5px; font-weight: 500;
    color: var(--text); cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    font-family: inherit;
  }
  .ai-btn:hover { background: var(--black); color: #fff; border-color: var(--black); }
  .ai-btn::before { content: '✦'; color: var(--accent); font-size: 11px; }
  .ai-btn:hover::before { color: #fff; }

  /* Health factor row */
  .health-factor {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
  }
  .health-factor:last-child { border-bottom: none; }
  .health-factor .ic {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: 14px; font-weight: 700;
  }
  .health-factor.good .ic { background: var(--green-bg); color: var(--green-text); }
  .health-factor.warn .ic { background: var(--yellow-bg); color: var(--yellow-text); }
  .health-factor.risk .ic { background: var(--red-bg); color: var(--accent); }
  .health-factor .info { flex: 1; min-width: 0; }
  .health-factor .nm { font-size: 13px; font-weight: 600; }
  .health-factor .desc { font-size: 11.5px; color: var(--text-secondary); margin-top: 1px; }
  .health-factor .score { font-size: 13px; font-weight: 700; min-width: 40px; text-align: right; }

  /* Creative grid */
  .creative-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
    padding: 16px;
  }
  .creative-tile {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
  }
  .creative-tile .thumb {
    aspect-ratio: 1;
    background: linear-gradient(135deg, #FDE8E4, #FFF4D6);
    display: flex; align-items: center; justify-content: center;
    font-size: 32px; color: var(--accent); opacity: 0.7;
    font-weight: 700;
    letter-spacing: -0.02em;
  }
  .creative-tile.v2 .thumb { background: linear-gradient(135deg, #E6F0FE, #E7F6EC); color: #1156C9; }
  .creative-tile.v3 .thumb { background: linear-gradient(135deg, #F5F3FF, #FEF3F2); color: #7C3AED; }
  .creative-tile .info { padding: 9px 11px; }
  .creative-tile .nm { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .creative-tile .stats { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
  .creative-tile .perf { display: flex; gap: 4px; margin-top: 6px; }
  .creative-tile .perf .pill { font-size: 10px; padding: 1px 6px; }

  /* File list */
  .file-row {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 12.5px;
  }
  .file-row:last-child { border-bottom: none; }
  .file-icon {
    width: 32px; height: 32px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-tertiary);
    flex-shrink: 0;
  }
  .file-icon svg { width: 14px; height: 14px; }
  .file-row .nm { font-weight: 500; }
  .file-row .meta-line { font-size: 11px; color: var(--text-tertiary); }

  /* Workspace columns */
  .ws-2col { display: grid; grid-template-columns: 1.5fr 1fr; gap: 12px; }
  .ws-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

  /* Comms thread */
  .comms-row {
    display: flex; gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
  }
  .comms-row:last-child { border-bottom: none; }
  .comms-row .body { flex: 1; min-width: 0; }
  .comms-row .top { display: flex; justify-content: space-between; align-items: baseline; }
  .comms-row .who { font-size: 12.5px; font-weight: 600; }
  .comms-row .when { font-size: 11px; color: var(--text-tertiary); }
  .comms-row .msg { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; }
  .comms-row .ch {
    font-size: 9.5px; padding: 1px 6px; border-radius: 4px;
    background: var(--surface-2); color: var(--text-secondary);
    text-transform: uppercase; font-weight: 600; letter-spacing: 0.05em;
    margin-right: 6px;
  }

  /* Make brand rows clickable */
  .table-row[data-brand] { cursor: pointer; transition: background 0.1s; }
  .table-row[data-brand]:hover { background: var(--surface-2); }

  /* === Dark Mode === */
  body[data-theme="dark"] {
    --bg: #0E0E0E;
    --surface: #161616;
    --surface-2: #202020;
    --border: #262626;
    --border-strong: #333;
    --text: #F2F2F2;
    --text-secondary: #B5B5B5;
    --text-tertiary: #7A7A7A;
    --black: #F2F2F2;
    --green-bg: #0A2418;
    --green-text: #4ADE80;
    --yellow-bg: #2A2010;
    --yellow-text: #FBBF24;
    --red-bg: #2A1010;
    --gray-bg: #262626;
    --gray-text: #C4C4C4;
    --accent-soft: #2A1010;
  }
  body[data-theme="dark"] .nav-item.active,
  body[data-theme="dark"] .btn.primary,
  body[data-theme="dark"] .chip.active,
  body[data-theme="dark"] .crm-toggle button.active,
  body[data-theme="dark"] .checkbox-group label:has(input:checked) {
    background: #FFFFFF;
    color: #0A0A0A;
    border-color: #FFFFFF;
  }
  body[data-theme="dark"] .pill.green { background: rgba(16,163,74,0.15); }
  body[data-theme="dark"] .pill.yellow { background: rgba(234,179,8,0.15); }
  body[data-theme="dark"] .pill.red { background: rgba(220,38,38,0.18); }
  body[data-theme="dark"] .heat-tile.good { background: #16A34A; }
  body[data-theme="dark"] .heat-tile.warn { background: #EA580C; }
  body[data-theme="dark"] .heat-tile.risk { background: #DC2626; }

  /* === Command Palette === */
  .palette-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    display: none;
    align-items: flex-start; justify-content: center;
    padding-top: 96px;
    z-index: 110;
    backdrop-filter: blur(3px);
  }
  .palette-backdrop.show { display: flex; }
  .palette {
    background: var(--surface);
    border-radius: 14px;
    width: 620px; max-width: 92vw;
    max-height: 70vh;
    display: flex; flex-direction: column;
    box-shadow: 0 30px 80px rgba(0,0,0,0.35);
    overflow: hidden;
    border: 1px solid var(--border);
  }
  .palette-input-wrap {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
  }
  .palette-input-wrap svg { width: 16px; height: 16px; color: var(--text-tertiary); }
  .palette-input {
    flex: 1; border: none; outline: none;
    background: transparent;
    font-size: 15px; font-family: inherit;
    color: var(--text);
  }
  .palette-input::placeholder { color: var(--text-tertiary); }
  .palette-results {
    flex: 1; overflow-y: auto;
    padding: 6px 0;
  }
  .palette-section {
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--text-tertiary);
    padding: 10px 18px 4px;
  }
  .palette-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 18px;
    cursor: pointer;
    font-size: 13px;
  }
  .palette-item.selected { background: var(--surface-2); }
  .palette-item .ic {
    width: 24px; height: 24px;
    border-radius: 5px;
    background: var(--surface-2);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; color: var(--text-secondary);
    flex-shrink: 0;
  }
  .palette-item.selected .ic { background: var(--surface); }
  .palette-item .nm { font-weight: 500; }
  .palette-item .sub { color: var(--text-tertiary); font-size: 11.5px; margin-left: auto; }
  .palette-empty { padding: 30px; text-align: center; color: var(--text-tertiary); font-size: 13px; }
  .palette-footer {
    border-top: 1px solid var(--border);
    padding: 10px 18px;
    display: flex; justify-content: space-between;
    font-size: 11px; color: var(--text-tertiary);
    gap: 16px;
  }
  .palette-footer kbd {
    background: var(--surface-2); padding: 2px 6px;
    border-radius: 4px; font-size: 10.5px; font-family: inherit;
    border: 1px solid var(--border);
    margin-right: 3px;
  }

  /* === Header bell === */
  .bell-wrap { position: relative; }
  .bell-dot {
    position: absolute;
    top: 4px; right: 4px;
    width: 7px; height: 7px;
    background: var(--accent);
    border-radius: 50%;
    border: 2px solid var(--surface);
  }
  .activity-pop {
    position: absolute; top: 42px; right: 0;
    width: 360px; max-height: 460px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 48px rgba(0,0,0,0.16);
    z-index: 99;
    display: none;
    overflow: hidden;
    flex-direction: column;
  }
  .activity-pop.show { display: flex; }
  .activity-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center;
  }
  .activity-header h3 { margin: 0; font-size: 14px; font-weight: 700; }
  .activity-header button {
    background: none; border: none; color: var(--text-tertiary);
    font-size: 11px; cursor: pointer;
  }
  .activity-list { overflow-y: auto; flex: 1; }
  .activity-row {
    padding: 10px 18px;
    border-bottom: 1px solid var(--border);
    display: flex; gap: 10px;
    font-size: 12.5px;
  }
  .activity-row:last-child { border-bottom: none; }
  .activity-row .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent);
    margin-top: 6px; flex-shrink: 0;
  }
  .activity-row.read .dot { background: var(--text-tertiary); opacity: 0.35; }
  .activity-row .body { flex: 1; }
  .activity-row .when { color: var(--text-tertiary); font-size: 11px; margin-top: 2px; }

  /* === Task Drawer === */
  .drawer-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.35);
    display: none;
    z-index: 95;
  }
  .drawer-backdrop.show { display: block; }
  .drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 480px; max-width: 92vw;
    background: var(--surface);
    border-left: 1px solid var(--border);
    transform: translateX(100%);
    transition: transform 0.22s ease;
    z-index: 96;
    overflow-y: auto;
    box-shadow: -10px 0 40px rgba(0,0,0,0.12);
  }
  .drawer.show { transform: translateX(0); }
  .drawer-header {
    padding: 16px 22px;
    border-bottom: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center;
    position: sticky; top: 0; background: var(--surface); z-index: 1;
  }
  .drawer-header h2 { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
  .drawer-body { padding: 18px 22px; }
  .drawer-fields { display: flex; flex-direction: column; gap: 12px; }
  .drawer-field {
    display: grid; grid-template-columns: 100px 1fr;
    align-items: center; gap: 12px;
    font-size: 12.5px;
  }
  .drawer-field label {
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-tertiary);
  }
  .drawer-comments { margin-top: 22px; }

  /* === Task attachments (Drive images + reference links) === */
  .att-zone {
    border: 1.5px dashed var(--border); border-radius: 10px;
    padding: 14px; text-align: center; cursor: pointer;
    color: var(--text-tertiary); font-size: 12.5px;
    transition: border-color .15s, background .15s; background: var(--surface, transparent);
  }
  .att-zone:hover, .att-zone.drag { border-color: var(--accent); color: var(--accent); }
  .att-zone .att-zone-hint { font-size: 11px; margin-top: 3px; color: var(--text-tertiary); }
  .att-linkrow { display: flex; gap: 8px; margin-top: 8px; }
  .att-linkrow input {
    flex: 1; border: 1px solid var(--border); border-radius: 8px;
    padding: 7px 10px; font-size: 12.5px; background: transparent; color: var(--text); outline: 0;
  }
  .att-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
  .att-item {
    position: relative; border: 1px solid var(--border); border-radius: 10px;
    overflow: hidden; background: var(--surface, transparent);
  }
  .att-item.img { width: 104px; height: 104px; }
  .att-item.img img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
  /* Before the blob src is set the <img> has no src — hide it so the browser's
     broken-image icon never flashes; the shimmer below covers the tile instead. */
  .att-item.img img:not([src]) { display: none; }
  .att-item.img .att-spin {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 0; color: var(--text-tertiary);
    background: linear-gradient(100deg,
      var(--surface-2, #ececec) 25%, var(--gray-bg, #f6f6f6) 50%, var(--surface-2, #ececec) 75%);
    background-size: 200% 100%; animation: att-shimmer 1.15s linear infinite;
  }
  .att-item.img .att-spin.err { animation: none; background: var(--surface-2, #f3f3f3); font-size: 15px; }
  @keyframes att-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
  .att-item.link {
    display: flex; align-items: center; gap: 7px; padding: 8px 12px;
    font-size: 12.5px; max-width: 240px; color: var(--text);
  }
  .att-item.link a { color: var(--accent); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .att-item .att-x {
    position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%;
    background: rgba(0,0,0,.6); color: #fff; border: 0; cursor: pointer; line-height: 1;
    font-size: 12px; display: flex; align-items: center; justify-content: center;
  }
  .att-item.link .att-x { position: static; background: transparent; color: var(--text-tertiary); margin-left: auto; }
  .att-lightbox {
    position: fixed; inset: 0; background: rgba(0,0,0,.82); z-index: 9999;
    display: none; align-items: center; justify-content: center; padding: 40px;
  }
  .att-lightbox.show { display: flex; }
  .att-lightbox img { max-width: 92vw; max-height: 92vh; border-radius: 8px; }

  .comment {
    display: flex; gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
  }
  .comment:last-child { border: none; }
  .comment .body { flex: 1; }
  .comment .top { display: flex; justify-content: space-between; }
  .comment .who { font-size: 12.5px; font-weight: 600; }
  .comment .when { font-size: 11px; color: var(--text-tertiary); }
  .comment .msg { font-size: 12.5px; color: var(--text-secondary); margin-top: 3px; }
  .comment-input-wrap {
    display: flex; gap: 8px;
    padding-top: 12px;
  }
  .comment-input {
    flex: 1;
    padding: 9px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: 13px; font-family: inherit;
    background: var(--surface);
    color: var(--text);
    resize: vertical; min-height: 60px;
  }
  .comment-input:focus { outline: none; border-color: var(--text); }

  /* === CRM drag styling === */
  .crm-card { cursor: grab; user-select: none; }
  .crm-card.dragging { opacity: 0.4; cursor: grabbing; }
  .crm-col-body.drop-target {
    background: var(--surface-2);
    border-radius: var(--radius-sm);
  }

  /* === Theme toggle === */
  .theme-toggle {
    width: 32px; height: 32px;
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    border: none; background: transparent; color: var(--text-secondary);
    cursor: pointer;
  }
  .theme-toggle:hover { background: var(--surface-2); }
  .theme-toggle svg { width: 16px; height: 16px; }

  /* Settings row + toggle switch (Me page) */
  .settings-row {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 16px 20px;
  }
  .settings-row-title { font-size: 13.5px; font-weight: 600; color: var(--text); }
  .settings-row-sub { font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; max-width: 460px; }
  .switch { position: relative; display: inline-flex; cursor: pointer; flex: none; }
  .switch input { position: absolute; opacity: 0; width: 0; height: 0; }
  .switch-track {
    width: 40px; height: 23px; border-radius: 999px;
    background: var(--border-strong); transition: background 0.18s ease;
    display: inline-flex; align-items: center; padding: 2px;
  }
  .switch-thumb {
    width: 19px; height: 19px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2); transition: transform 0.18s ease;
  }
  .switch input:checked + .switch-track { background: var(--task-green); }
  .switch input:checked + .switch-track .switch-thumb { transform: translateX(17px); }
  .switch input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* === Mobile responsive === */
  @media (max-width: 900px) {
    .app { grid-template-columns: 1fr; }
    .sidebar {
      position: fixed; top: 0; left: 0; bottom: 0;
      width: 240px; z-index: 90;
      transform: translateX(-100%);
      transition: transform 0.22s ease;
    }
    .sidebar.open { transform: translateX(0); }
    .header { padding: 0 16px; }
    .page { padding: 18px 16px; }
    .home-grid { grid-template-columns: 1fr; }
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .hr-grid { grid-template-columns: 1fr; }
    .crm-board { grid-template-columns: repeat(6, 240px); overflow-x: auto; }
    .ws-2col, .ws-3col { grid-template-columns: 1fr; }
    .mini-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .ws-header { padding: 16px; }
    .ws-body { padding: 16px; }
    .table-row { grid-template-columns: 2fr 1fr 1.5fr 0.8fr 0.8fr 1fr 1fr 0.6fr; font-size: 11px; }
    .filter-bar { overflow-x: auto; flex-wrap: nowrap; }
    .palette { width: 92vw; }
    .drawer { width: 100vw; }
    .menu-toggle { display: flex; }
  }
  .menu-toggle { display: none; }
  .mobile-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.4); z-index: 89;
  }
  .mobile-overlay.show { display: block; }

  /* === Calendar === */
  .cal-legend {
    display: flex; gap: 14px; margin-bottom: 14px;
    font-size: 11.5px; color: var(--text-secondary);
  }
  .cal-legend i {
    display: inline-block; width: 9px; height: 9px;
    border-radius: 2px; margin-right: 5px;
  }
  .cal-legend i.meeting,.cal-dot.meeting { background: #2563EB; }
  .cal-legend i.report,.cal-dot.report   { background: #EA580C; }
  .cal-legend i.task,.cal-dot.task       { background: #C11E00; }
  .cal-legend i.leave,.cal-dot.leave     { background: #7C3AED; }
  .cal-legend i.sales,.cal-dot.sales     { background: #16A34A; }
  .cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
  }
  .cal-day {
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    min-height: 220px;
    display: flex; flex-direction: column;
    overflow: hidden;
  }
  .cal-day.today { outline: 2px solid var(--accent); }
  .cal-day-head {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
  }
  .cal-dow {
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-tertiary);
  }
  .cal-date { font-size: 18px; font-weight: 700; line-height: 1.2; }
  .cal-day.today .cal-date { color: var(--accent); }
  .cal-events { flex: 1; padding: 6px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
  .cal-event {
    background: var(--surface);
    border-left: 3px solid var(--text-tertiary);
    border-radius: 4px;
    padding: 5px 8px;
    font-size: 11px;
  }
  .cal-event.meeting { border-left-color: #2563EB; }
  .cal-event.report  { border-left-color: #EA580C; }
  .cal-event.task    { border-left-color: #C11E00; }
  .cal-event.leave   { border-left-color: #7C3AED; }
  .cal-event.sales   { border-left-color: #16A34A; }
  .cal-time { font-size: 10px; color: var(--text-tertiary); font-weight: 600; }
  .cal-title { font-weight: 500; line-height: 1.3; }
  .cal-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--text-tertiary);
    flex-shrink: 0;
    margin-right: 4px;
  }

  /* === Capacity matrix === */
  .cap-matrix {
    width: 100%; border-collapse: collapse;
    font-size: 12px;
  }
  .cap-matrix th, .cap-matrix td {
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 9px 10px;
    text-align: center;
    white-space: nowrap;
  }
  .cap-matrix thead th {
    background: var(--surface-2);
    font-size: 10.5px; font-weight: 700;
    color: var(--text-tertiary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    position: sticky; top: 0;
    z-index: 1;
  }
  .cap-matrix .sticky-col {
    position: sticky; left: 0;
    background: var(--surface);
    text-align: left;
    z-index: 2;
    min-width: 200px;
  }
  .cap-matrix thead .sticky-col { z-index: 3; background: var(--surface-2); }
  .cap-matrix .cap-cell {
    cursor: pointer;
    transition: background 0.1s;
    font-weight: 600;
    color: var(--text);
    min-width: 38px;
  }
  .cap-matrix .cap-cell:hover { outline: 2px solid var(--text); outline-offset: -2px; }
  .cap-pill {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 11.5px; font-weight: 700;
  }
  .cap-pill.low  { background: var(--gray-bg);   color: var(--text-tertiary); }
  .cap-pill.good { background: var(--green-bg);  color: var(--green-text); }
  .cap-pill.warn { background: var(--yellow-bg); color: var(--yellow-text); }
  .cap-pill.risk { background: var(--red-bg);    color: var(--accent); }

  /* === Creative pipeline cards === */
  .creative-card { padding: 10px 11px; }

  /* === Time Tracking === */
  .timer-btn {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0;
    color: var(--text-secondary);
  }
  .timer-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
  .timer-btn.running {
    background: var(--accent); color: #fff; border-color: var(--accent);
    animation: pulse 1.5s ease-in-out infinite;
  }
  @keyframes pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(193,30,0,0.5); }
    50%     { box-shadow: 0 0 0 6px rgba(193,30,0,0); }
  }
  .timer-btn svg { width: 11px; height: 11px; }
  .time-logged { font-size: 11px; color: var(--text-tertiary); min-width: 50px; text-align: right; }
  .time-logged.active { color: var(--accent); font-weight: 600; }

  /* === AI Assistant === */
  .ai-fab {
    position: fixed; bottom: 24px; right: 24px;
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--black); color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    cursor: pointer; z-index: 80;
    border: none; transition: transform 0.15s;
  }
  .ai-fab:hover { transform: scale(1.05); }
  .ai-fab.hidden { display: none; }
  .ai-fab svg { width: 22px; height: 22px; }
  .ai-fab .sparkle {
    position: absolute; top: 8px; right: 8px;
    width: 10px; height: 10px;
    background: var(--accent);
    border-radius: 50%;
  }

  .ai-panel {
    position: fixed; bottom: 24px; right: 24px;
    width: 400px; max-width: calc(100vw - 32px);
    height: 560px; max-height: calc(100vh - 96px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    display: none;
    flex-direction: column;
    z-index: 81;
    overflow: hidden;
  }
  .ai-panel.show { display: flex; }
  .ai-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center;
  }
  .ai-header h3 { margin: 0; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
  .ai-header h3 .badge {
    background: var(--accent); color: #fff;
    font-size: 9.5px; padding: 2px 7px;
    border-radius: 999px; font-weight: 600; letter-spacing: 0.04em;
  }
  .ai-messages {
    flex: 1; overflow-y: auto;
    padding: 14px 16px;
    display: flex; flex-direction: column; gap: 10px;
  }
  .ai-msg { display: flex; }
  .ai-msg.user { justify-content: flex-end; }
  .ai-bubble {
    max-width: 85%;
    padding: 9px 13px;
    border-radius: 14px;
    font-size: 12.5px; line-height: 1.5;
  }
  .ai-msg.user .ai-bubble {
    background: var(--black); color: #fff;
    border-bottom-right-radius: 4px;
  }
  .ai-msg.assistant .ai-bubble {
    background: var(--surface-2); color: var(--text);
    border-bottom-left-radius: 4px;
  }
  .ai-empty {
    padding: 30px 20px; text-align: center;
    color: var(--text-secondary);
  }
  .ai-input-wrap {
    padding: 12px 14px;
    border-top: 1px solid var(--border);
    display: flex; gap: 8px;
  }
  .ai-input-wrap input {
    flex: 1;
    padding: 9px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: 13px; font-family: inherit;
    background: var(--surface); color: var(--text);
  }
  .ai-input-wrap input:focus { outline: none; border-color: var(--text); }
  .ai-input-wrap button {
    padding: 9px 14px; border: none;
    background: var(--black); color: #fff;
    border-radius: var(--radius-sm);
    font-size: 12.5px; font-weight: 600;
    cursor: pointer; font-family: inherit;
  }
  .ai-suggestions {
    padding: 0 14px 12px;
    display: flex; gap: 6px; flex-wrap: wrap;
  }
  .ai-sugg {
    padding: 5px 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 11px; color: var(--text-secondary);
    cursor: pointer; font-family: inherit;
  }
  .ai-sugg:hover { background: var(--black); color: #fff; border-color: var(--black); }

  /* === THE WALL === */
  .wall {
    position: fixed; inset: 0;
    background: #050505;
    color: #fff;
    z-index: 1000;
    display: none;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
  }
  .wall.show { display: block; }
  .wall-bg {
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse at 20% 0%, rgba(193,30,0,0.18), transparent 50%),
      radial-gradient(ellipse at 80% 100%, rgba(37,99,235,0.12), transparent 50%),
      #050505;
  }
  .wall-bg::before {
    content:'';
    position: absolute; inset: 0;
    background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
                       linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 40px 40px;
  }
  .wall-grid {
    position: relative; height: 100vh;
    display: grid;
    grid-template-rows: 50px auto minmax(0, 1fr) auto;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
    padding: 14px 20px 20px;
    z-index: 1;
  }
  .wall-header {
    grid-column: 1 / -1;
    display: flex; align-items: center; justify-content: space-between;
  }
  .wall-logo {
    font-size: 18px; font-weight: 800; letter-spacing: -0.02em;
  }
  .wall-logo .dot { color: #C11E00; }
  .wall-live {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(193,30,0,0.15);
    color: #FF5A3C;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.1em;
  }
  .wall-live::before {
    content:''; width:7px; height:7px; border-radius:50%;
    background: #FF5A3C;
    animation: pulse-red 1.4s ease-in-out infinite;
  }
  @keyframes pulse-red {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,90,60,0.6); }
    50%      { box-shadow: 0 0 0 8px rgba(255,90,60,0); }
  }
  .wall-time {
    font-size: 16px; font-weight: 600; letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: #B5B5B5;
  }
  .wall-close {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
  }

  .wall-kpi-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  .wall-kpi {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 18px 22px;
    position: relative;
    overflow: hidden;
  }
  .wall-kpi::before {
    content: '';
    position: absolute; left: 0; top: 16px; bottom: 16px;
    width: 3px;
    background: linear-gradient(180deg, #C11E00, transparent);
    border-radius: 0 2px 2px 0;
  }
  .wall-kpi .label {
    font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: #7A7A7A;
  }
  .wall-kpi .value {
    font-size: 38px; font-weight: 800;
    letter-spacing: -0.03em;
    margin: 6px 0 4px;
    font-variant-numeric: tabular-nums;
  }
  .wall-kpi .delta { font-size: 12px; color: #4ADE80; font-weight: 600; }
  .wall-kpi .delta.down { color: #FF5A3C; }
  .wall-kpi .spark2 { position: absolute; right: 16px; bottom: 12px; width: 80px; height: 30px; opacity: 0.55; }
  .wall-kpi .spark2 .line { fill: none; stroke: #C11E00; stroke-width: 1.5; }

  .wall-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    overflow: hidden;
    display: flex; flex-direction: column;
  }
  .wall-card-head {
    padding: 12px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    display: flex; justify-content: space-between; align-items: center;
  }
  .wall-card-head h3 {
    margin: 0; font-size: 11px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: #B5B5B5;
  }
  .wall-card-head .meta { font-size: 11px; color: #7A7A7A; }

  .wall-heatmap {
    grid-column: 1 / 3;
  }
  .wall-heat {
    flex: 1; padding: 14px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
    gap: 5px;
    overflow-y: auto;
    align-content: start;
  }
  .wall-tile {
    aspect-ratio: 1;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 800;
    letter-spacing: -0.03em;
    color: #fff;
    animation: tile-pulse 4s ease-in-out infinite;
    cursor: default;
  }
  .wall-tile.good { background: #16A34A; }
  .wall-tile.warn { background: #EA580C; }
  .wall-tile.risk { background: #DC2626; animation-duration: 1.6s; }
  @keyframes tile-pulse {
    0%, 100% { transform: scale(1); opacity: 0.95; }
    50%      { transform: scale(0.97); opacity: 0.78; }
  }

  .wall-stream {
    grid-column: 3 / 4;
    grid-row: 3 / 4;
  }
  .wall-stream-list {
    flex: 1; overflow: hidden;
    padding: 10px 18px;
    position: relative;
  }
  .wall-stream-track {
    display: flex; flex-direction: column; gap: 11px;
    animation: scroll-up 35s linear infinite;
  }
  @keyframes scroll-up {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); }
  }
  .wall-stream-item {
    display: flex; gap: 9px;
    font-size: 12px;
    line-height: 1.4;
  }
  .wall-stream-item .dot {
    width: 7px; height: 7px; margin-top: 5px;
    border-radius: 50%; background: #C11E00;
    flex-shrink: 0;
  }
  .wall-stream-item .when { color: #7A7A7A; font-size: 10.5px; margin-top: 2px; }

  .wall-online {
    padding: 14px 18px;
    display: flex; flex-wrap: wrap; gap: 6px;
  }
  .wall-online .av {
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700;
    color: #fff;
    border: 2px solid rgba(255,255,255,0.1);
  }
  .wall-online .av.red    { background: #C11E00; }
  .wall-online .av.gray   { background: #5C5C5C; }
  .wall-online .av.blue   { background: #1F4FB6; }
  .wall-online .av.green  { background: #2A7F4D; }
  .wall-online .av.purple { background: #6B3FB1; }
  .wall-online .av.orange { background: #B86C1B; }

  .wall-cap {
    padding: 14px 18px;
    display: flex; flex-direction: column; gap: 11px;
  }
  .wall-cap-row .label {
    display: flex; justify-content: space-between;
    font-size: 12px; margin-bottom: 5px;
  }
  .wall-cap-row .label .nm { font-weight: 600; color: #E5E5E5; }
  .wall-cap-row .label .pct { color: #7A7A7A; font-size: 11px; font-variant-numeric: tabular-nums; }
  .wall-cap-row .bar {
    height: 5px; background: rgba(255,255,255,0.08);
    border-radius: 3px; overflow: hidden;
  }
  .wall-cap-row .bar > div { height: 100%; border-radius: 3px; }
  .wall-cap-row .bar > div.good { background: #16A34A; }
  .wall-cap-row .bar > div.warn { background: #EA580C; }
  .wall-cap-row .bar > div.risk { background: #DC2626; }

  /* === ACCOUNT DOCTOR === */
  .doctor-overlay {
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 32px 36px;
    margin-bottom: 14px;
  }
  .doctor-spinner {
    width: 28px; height: 28px;
    border: 2px solid var(--border-strong);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    margin-right: 10px;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  .doctor-section {
    border-top: 1px solid var(--border);
    padding-top: 18px;
    margin-top: 18px;
    opacity: 0;
    animation: doctor-reveal 0.4s ease forwards;
  }
  @keyframes doctor-reveal {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .doctor-h {
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 12px;
    display: flex; align-items: center; gap: 8px;
  }
  .doctor-score {
    display: flex; align-items: center; gap: 24px;
    padding: 12px 0;
  }
  .doctor-score-num {
    font-size: 64px; font-weight: 800; letter-spacing: -0.04em;
    line-height: 1;
  }
  .doctor-score-bar {
    flex: 1;
    height: 8px; background: var(--surface-2);
    border-radius: 4px; overflow: hidden;
    margin-top: 8px;
  }
  .doctor-score-bar > div {
    height: 100%; border-radius: 4px;
    transition: width 0.8s ease;
  }
  .doctor-list {
    display: flex; flex-direction: column; gap: 10px;
    margin-top: 4px;
  }
  .doctor-item {
    display: flex; gap: 12px;
    padding: 12px 16px;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    align-items: flex-start;
  }
  .doctor-item .num {
    font-size: 22px; font-weight: 800;
    color: var(--accent); letter-spacing: -0.02em;
    line-height: 1; flex-shrink: 0;
    margin-top: 2px;
    min-width: 22px;
  }
  .doctor-item .text { flex: 1; }
  .doctor-item .text .title { font-size: 13px; font-weight: 600; margin-bottom: 3px; }
  .doctor-item .text .desc { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
  .doctor-item.green .num { color: var(--green-text); }
  .doctor-item.warn  .num { color: var(--yellow-text); }
  .doctor-item.risk  .num { color: var(--accent); }

  .similar-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .similar-card {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    cursor: pointer;
    transition: background 0.1s;
  }
  .similar-card:hover { background: var(--surface-2); }
  .similar-card .nm { font-size: 13px; font-weight: 600; }
  .similar-card .meta { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
  .similar-card .stat { font-size: 11px; color: var(--text-secondary); margin-top: 6px; }

  /* === BRAND UNIVERSE === */
  .universe {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    height: 640px;
    position: relative;
    overflow: hidden;
  }
  .universe svg { width: 100%; height: 100%; cursor: grab; }
  .universe svg:active { cursor: grabbing; }
  body[data-theme="dark"] .universe { background: #0A0A0A; }
  .universe-tooltip {
    position: absolute;
    background: var(--black);
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    pointer-events: none;
    transform: translate(-50%, -130%);
    white-space: nowrap;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    z-index: 5;
    display: none;
  }
  .universe-tooltip.show { display: block; }
  .universe-tooltip .nm { font-weight: 700; margin-bottom: 2px; }
  .universe-tooltip .sub { font-size: 11px; opacity: 0.7; }
  .universe-legend {
    position: absolute;
    bottom: 14px; left: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: 11px;
    display: flex; gap: 14px;
  }
  .universe-legend i {
    display: inline-block; width: 9px; height: 9px;
    border-radius: 50%; margin-right: 5px;
  }
  .universe-legend .good { background: #16A34A; }
  .universe-legend .warn { background: #EA580C; }
  .universe-legend .risk { background: #DC2626; }
  .universe-mode-toggle {
    display: inline-flex; border: 1px solid var(--border-strong);
    border-radius: 999px; padding: 3px;
    background: var(--surface);
  }
  .universe-mode-toggle button {
    border: none; background: transparent;
    padding: 5px 14px; border-radius: 999px;
    font-size: 12px; font-weight: 500; color: var(--text-secondary);
    cursor: pointer; font-family: inherit;
  }
  .universe-mode-toggle button.active { background: var(--black); color: #fff; }

  /* Wall trigger button */
  .wall-trigger {
    background: linear-gradient(135deg, #C11E00, #FF5A3C);
    color: #fff;
    border: none;
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    font-size: 12px; font-weight: 600;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    font-family: inherit;
    box-shadow: 0 2px 8px rgba(193,30,0,0.25);
  }
  .wall-trigger:hover { box-shadow: 0 4px 16px rgba(193,30,0,0.4); }
  .wall-trigger svg { width: 13px; height: 13px; }

  /* === Me page === */
  .me-hero {
    background: linear-gradient(180deg, var(--surface), var(--surface-2));
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 26px 32px;
    margin-bottom: 14px;
  }
  .me-hero-content {
    display: flex; align-items: center; gap: 18px;
    margin-bottom: 22px;
    flex-wrap: wrap;
  }
  .me-stats {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
  }
  .me-stat .num {
    font-size: 22px; font-weight: 800;
    letter-spacing: -0.025em;
  }
  .me-stat .lbl {
    font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-tertiary);
    margin-top: 2px;
  }
  @media (max-width: 900px) {
    .me-stats { grid-template-columns: repeat(3, 1fr); }
    .me-hero-content { flex-direction: column; align-items: flex-start; }
  }

  /* === The Plate === */
  .plate-card {
    background: linear-gradient(135deg, #0A0A0A, #1F1F1F);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 28px 32px 24px;
    margin-bottom: 14px;
    position: relative;
    overflow: hidden;
  }
  body[data-theme="dark"] .plate-card {
    background: linear-gradient(135deg, #1A1A1A, #2A2A2A);
  }
  .plate-card::before {
    content:'';
    position: absolute; top: -40%; right: -10%;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(193,30,0,0.4), transparent 60%);
    pointer-events: none;
  }
  .plate-header {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 6px;
    position: relative;
  }
  .plate-header .label {
    font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: #FF5A3C;
  }
  .plate-header .meta { font-size: 11px; color: #999; }
  .plate-card h2 {
    margin: 0 0 16px;
    font-size: 22px; font-weight: 800;
    letter-spacing: -0.025em;
    position: relative;
  }
  .plate-list {
    display: flex; flex-direction: column; gap: 4px;
    position: relative;
  }
  .plate-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    transition: background 0.15s;
  }
  .plate-item:hover { background: rgba(255,255,255,0.07); }
  .plate-icon {
    width: 24px; height: 24px;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800;
    flex-shrink: 0;
  }
  .plate-icon.urgent { background: #DC2626; color: #fff; }
  .plate-icon.warn   { background: rgba(234,88,12,0.2); color: #F97316; }
  .plate-icon.info   { background: rgba(37,99,235,0.2); color: #60A5FA; }
  .plate-icon.heart  { background: rgba(193,30,0,0.2); color: #FF5A3C; }
  .plate-text { flex: 1; min-width: 0; font-size: 13px; line-height: 1.4; }
  .plate-text .ttl { font-weight: 600; color: #fff; }
  .plate-text .sub { font-size: 11.5px; color: #999; margin-top: 2px; }
  .plate-action {
    background: rgba(255,255,255,0.08);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.12);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 11.5px; font-weight: 600;
    cursor: pointer; font-family: inherit;
    flex-shrink: 0;
  }
  .plate-action:hover { background: var(--accent); border-color: var(--accent); }
  .plate-empty {
    text-align: center; padding: 20px;
    color: #999; font-size: 13px;
    position: relative;
  }
  .plate-empty .big { font-size: 32px; margin-bottom: 6px; }

  /* === Morning Brief === */
  .brief-overlay {
    position: fixed; inset: 0;
    background: #050505;
    color: #fff;
    z-index: 1100;
    display: none;
    align-items: center; justify-content: center;
    overflow: hidden;
  }
  .brief-overlay.show { display: flex; }
  .brief-overlay::before {
    content:'';
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse at 20% 10%, rgba(193,30,0,0.20), transparent 55%),
      radial-gradient(ellipse at 85% 90%, rgba(37,99,235,0.15), transparent 55%);
    pointer-events: none;
  }
  .brief-overlay::after {
    content:'';
    position: absolute; inset: 0;
    background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
                       linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
  }
  .brief-progress {
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px; display: flex; gap: 4px;
    padding: 12px 24px;
    z-index: 2;
  }
  .brief-progress .bar {
    flex: 1; height: 3px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    overflow: hidden;
  }
  .brief-progress .bar > div {
    height: 100%; width: 0;
    background: #fff;
    transition: width 0.1s linear;
  }
  .brief-progress .bar.done > div { width: 100%; }
  .brief-progress .bar.active > div { animation: brief-fill var(--dur, 7s) linear forwards; }
  @keyframes brief-fill { to { width: 100%; } }

  .brief-controls {
    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 12px; align-items: center;
    font-size: 11px; color: rgba(255,255,255,0.5);
    z-index: 2;
    letter-spacing: 0.06em;
  }
  .brief-controls kbd {
    background: rgba(255,255,255,0.08);
    padding: 3px 7px; border-radius: 4px;
    font-family: inherit;
    font-size: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
  }
  .brief-close {
    position: absolute; top: 24px; right: 24px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    width: 36px; height: 36px;
    border-radius: 50%;
    cursor: pointer; font-family: inherit;
    z-index: 2;
    font-size: 16px;
  }
  .brief-stage {
    position: relative;
    width: 1100px; max-width: 92vw;
    z-index: 1;
    text-align: center;
    padding: 60px;
  }
  .brief-stage.left { text-align: left; }
  .brief-eyebrow {
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: #FF5A3C;
    margin-bottom: 18px;
    opacity: 0;
    animation: brief-in 0.5s ease 0.05s forwards;
  }
  .brief-headline {
    font-size: 64px; font-weight: 800;
    letter-spacing: -0.035em; line-height: 1.05;
    margin: 0 0 14px;
    opacity: 0;
    animation: brief-in 0.6s ease 0.15s forwards;
  }
  .brief-headline .accent { color: #FF5A3C; }
  .brief-sub {
    font-size: 18px; color: rgba(255,255,255,0.6);
    line-height: 1.5;
    max-width: 760px; margin: 0 auto;
    opacity: 0;
    animation: brief-in 0.5s ease 0.3s forwards;
  }
  .brief-stage.left .brief-sub { margin: 0; }
  .brief-mega {
    font-size: 144px; font-weight: 800;
    letter-spacing: -0.06em; line-height: 1;
    background: linear-gradient(135deg, #FFFFFF, #FF5A3C);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin: 28px 0 18px;
    opacity: 0;
    animation: brief-in 0.6s ease 0.2s forwards;
    font-variant-numeric: tabular-nums;
  }
  .brief-list {
    display: flex; flex-direction: column; gap: 10px;
    margin-top: 32px; max-width: 720px;
    opacity: 0;
    animation: brief-in 0.5s ease 0.4s forwards;
  }
  .brief-stage.center .brief-list { margin: 32px auto 0; }
  .brief-list-item {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 16px 20px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    text-align: left;
  }
  .brief-list-item .num {
    font-size: 26px; font-weight: 800;
    color: #FF5A3C;
    line-height: 1; flex-shrink: 0;
    min-width: 30px;
    font-variant-numeric: tabular-nums;
  }
  .brief-list-item .ti { font-size: 16px; font-weight: 600; }
  .brief-list-item .de { font-size: 13px; color: rgba(255,255,255,0.55); margin-top: 3px; line-height: 1.5; }
  @keyframes brief-in {
    to { opacity: 1; transform: translateY(0); }
    from { opacity: 0; transform: translateY(12px); }
  }

  /* === Profile === */
  .profile-hero {
    background: linear-gradient(180deg, var(--surface), var(--surface-2));
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 26px 32px;
    margin-bottom: 14px;
    position: relative;
    overflow: hidden;
  }
  .profile-hero::before {
    content:'';
    position: absolute; top: -40%; right: -10%;
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(193,30,0,0.08), transparent 60%);
    pointer-events: none;
  }
  .profile-hero-row {
    display: flex; align-items: center; gap: 22px;
    position: relative;
    flex-wrap: wrap;
  }
  .profile-avatar { width: 80px; height: 80px; font-size: 24px; border-radius: 18px; }
  .profile-name {
    margin: 0; font-size: 30px; font-weight: 800;
    letter-spacing: -0.025em;
  }
  .profile-tags {
    display: flex; gap: 8px; margin-top: 6px;
    align-items: center; color: var(--text-secondary);
    font-size: 13px; flex-wrap: wrap;
  }
  .profile-tags .role-tag { font-size: 10px; }
  .profile-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
    position: relative;
  }
  .profile-stats .num { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
  .profile-stats .lbl {
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-tertiary); margin-top: 2px;
  }

  /* Skills */
  .skill-row {
    padding: 11px 16px;
    border-bottom: 1px solid var(--border);
  }
  .skill-row:last-child { border-bottom: none; }
  .skill-label {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 13px; font-weight: 500;
    margin-bottom: 6px;
  }
  .skill-stars {
    display: inline-flex; gap: 2px;
  }
  .skill-stars .st {
    width: 18px; height: 6px;
    background: var(--surface-2);
    border-radius: 2px;
    cursor: pointer;
    transition: background 0.1s;
  }
  .skill-stars .st.filled { background: var(--accent); }
  .skill-stars.editable .st:hover { background: var(--text-tertiary); }
  .skill-stars.editable .st.filled:hover { background: var(--accent); }

  /* Skill Matrix table */
  .skill-matrix {
    width: 100%; border-collapse: collapse;
    font-size: 12px;
  }
  .skill-matrix th, .skill-matrix td {
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 8px 10px;
    text-align: center;
    white-space: nowrap;
  }
  .skill-matrix thead th {
    background: var(--surface-2);
    font-size: 10px; font-weight: 700;
    color: var(--text-tertiary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    position: sticky; top: 0;
  }
  .skill-matrix .sticky-col {
    position: sticky; left: 0;
    background: var(--surface);
    text-align: left;
    min-width: 180px;
    z-index: 1;
  }
  .skill-matrix thead .sticky-col { background: var(--surface-2); z-index: 2; }
  .skill-matrix td.skill-cell {
    font-weight: 700;
    color: var(--text);
  }
  .skill-cell-bar {
    display: inline-block;
    width: 32px; height: 4px;
    background: var(--surface-2);
    border-radius: 2px;
    margin-top: 3px;
    overflow: hidden;
  }
  .skill-cell-bar > div { height: 100%; background: var(--accent); border-radius: 2px; }

  /* 1:1 thread */
  .ono-thread {
    display: flex; flex-direction: column; gap: 10px;
    padding: 16px;
  }
  .ono-note {
    padding: 13px 15px;
    background: var(--surface-2);
    border-radius: var(--radius);
    border-left: 3px solid var(--accent);
  }
  .ono-note .head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 8px;
  }
  .ono-note .who { font-size: 12px; font-weight: 600; }
  .ono-note .when { font-size: 11px; color: var(--text-tertiary); }
  .ono-note .body { font-size: 13px; line-height: 1.6; color: var(--text); }
  .ono-note .actions {
    margin-top: 8px;
    padding: 8px 11px;
    background: var(--surface);
    border-radius: 6px;
    font-size: 12px;
    color: var(--text-secondary);
  }
  .ono-note .actions::before {
    content: 'ACTION'; font-size: 9.5px; font-weight: 700;
    letter-spacing: 0.1em; color: var(--accent);
    display: block; margin-bottom: 3px;
  }

  /* Wins Wall */
  .wins-feed { display: flex; flex-direction: column; gap: 12px; }
  .win-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 22px;
    transition: border-color 0.15s;
  }
  .win-card:hover { border-color: var(--text-tertiary); }
  .win-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 10px;
  }
  .win-head .info { flex: 1; }
  .win-head .nm { font-size: 13px; font-weight: 600; }
  .win-head .when { font-size: 11px; color: var(--text-tertiary); }
  .win-text {
    font-size: 14px; line-height: 1.55;
    color: var(--text);
    margin-bottom: 12px;
  }
  .win-tags {
    display: flex; gap: 5px; margin-top: 8px; flex-wrap: wrap;
  }
  .win-reactions {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
  }
  .win-reaction {
    padding: 5px 11px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    font-size: 12px;
    background: var(--surface);
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 4px;
    font-family: inherit;
  }
  .win-reaction:hover { background: var(--surface-2); }
  .win-reaction.active {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
  }
  .win-reaction-add {
    color: var(--text-tertiary);
    font-weight: 500;
  }
  .win-comments {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 6px;
  }
  .win-comment {
    display: flex; gap: 8px;
    font-size: 12.5px;
    padding: 6px 0;
  }
  .win-comment .body { flex: 1; }
  .win-comment .who { font-weight: 600; margin-right: 4px; }

  /* Onboarding */
  .onboard-card {
    background: linear-gradient(135deg, rgba(37,99,235,0.06), rgba(124,58,237,0.06));
    border: 1px solid rgba(37,99,235,0.2);
    border-radius: var(--radius-lg);
    padding: 18px 22px;
    margin-bottom: 14px;
  }
  .onboard-day {
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .onboard-day:last-child { border: none; }
  .onboard-day-head {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 13px; font-weight: 700;
    margin-bottom: 8px;
  }
  .onboard-day-head .pct { font-size: 11px; color: var(--text-tertiary); font-weight: 500; }
  .onboard-item {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 0;
    font-size: 12.5px;
    cursor: pointer;
  }
  .onboard-item.checked { color: var(--text-tertiary); text-decoration: line-through; }
  .onboard-check {
    width: 16px; height: 16px;
    border: 1.5px solid var(--border-strong);
    border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .onboard-item.checked .onboard-check {
    background: var(--green-text);
    border-color: var(--green-text);
    color: #fff;
  }

  /* Make any avatar clickable for profile */
  [data-person] { cursor: pointer; }

  /* === Vibes Banner === */
  .vibes-banner {
    background: linear-gradient(135deg, rgba(193,30,0,0.06), rgba(124,58,237,0.06));
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 22px;
    margin-bottom: 14px;
    display: flex; align-items: center; gap: 16px;
    position: relative;
    overflow: hidden;
  }
  .vibes-banner::before {
    content:'';
    position: absolute; top: -50%; right: -10%;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(255,90,60,0.1), transparent 60%);
    pointer-events: none;
  }
  .vibes-emoji {
    font-size: 30px; flex-shrink: 0;
    animation: gentle-bounce 2.6s ease-in-out infinite;
  }
  @keyframes gentle-bounce {
    0%,100% { transform: translateY(0) rotate(0); }
    50%     { transform: translateY(-3px) rotate(-3deg); }
  }
  .vibes-text { font-size: 15px; font-weight: 500; color: var(--text); flex: 1; line-height: 1.5; }
  .vibes-text small { color: var(--text-tertiary); font-size: 12px; font-weight: 400; }

  /* === Mood Check === */
  .mood-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
  }
  .mood-question {
    font-size: 13px; font-weight: 600;
    margin-bottom: 12px;
  }
  .mood-emojis {
    display: flex; gap: 8px; justify-content: space-between;
  }
  .mood-emoji {
    width: 44px; height: 44px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
    border: 2px solid transparent;
    background: var(--surface-2);
    cursor: pointer;
    transition: all 0.15s;
  }
  .mood-emoji:hover { transform: scale(1.15); }
  .mood-emoji.selected {
    border-color: var(--accent);
    background: var(--accent-soft);
  }
  .mood-history {
    display: flex; gap: 4px; margin-top: 12px;
    align-items: center;
    font-size: 11px; color: var(--text-tertiary);
  }
  .mood-dot {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--surface-2);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px;
  }

  /* === Confetti === */
  .confetti-piece {
    position: fixed;
    top: -20px;
    width: 8px; height: 14px;
    pointer-events: none;
    z-index: 999;
    animation: confetti-fall 2.2s ease-in forwards;
    border-radius: 2px;
  }
  @keyframes confetti-fall {
    0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
  }

  /* === High-Five === */
  .hi5-btn {
    background: rgba(255, 165, 0, 0.1);
    border: 1px solid rgba(255, 165, 0, 0.3);
    color: #B86C1B;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px; font-weight: 600;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 4px;
    font-family: inherit;
    transition: transform 0.1s;
  }
  .hi5-btn:hover { background: rgba(255, 165, 0, 0.18); transform: scale(1.06); }
  .hi5-btn:active { transform: scale(0.94); }
  .hi5-burst {
    position: fixed;
    pointer-events: none;
    z-index: 998;
    font-size: 32px;
    animation: hi5-zoom 1s ease-out forwards;
  }
  @keyframes hi5-zoom {
    0%   { transform: scale(0.4) rotate(-20deg); opacity: 0; }
    20%  { transform: scale(1.6) rotate(0deg);   opacity: 1; }
    100% { transform: scale(1.2) translateY(-80px) rotate(20deg); opacity: 0; }
  }

  /* === Coffee Chat === */
  .coffee-card {
    background: linear-gradient(135deg, #6F4F2F 0%, #C29063 100%);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    position: relative;
    overflow: hidden;
  }
  .coffee-card::before {
    content:'☕';
    position: absolute; right: -10px; bottom: -20px;
    font-size: 130px; opacity: 0.18;
    transform: rotate(-15deg);
  }
  .coffee-label {
    font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.2em; text-transform: uppercase;
    opacity: 0.7;
    position: relative;
  }
  .coffee-headline {
    font-size: 18px; font-weight: 700; letter-spacing: -0.01em;
    margin: 6px 0 12px;
    position: relative;
  }
  .coffee-pair {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 12px;
    position: relative;
  }
  .coffee-pair .arrow { color: rgba(255,255,255,0.5); font-size: 18px; }
  .coffee-actions {
    display: flex; gap: 8px;
    position: relative;
  }
  .coffee-btn {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    padding: 6px 13px;
    border-radius: 6px;
    font-size: 11.5px; font-weight: 600;
    cursor: pointer; font-family: inherit;
  }
  .coffee-btn.primary { background: #fff; color: #6F4F2F; }

  /* === Streak === */
  .streak-card {
    background: linear-gradient(135deg, #FF6B35, #C11E00);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 18px 22px;
    position: relative;
    overflow: hidden;
  }
  .streak-card::before {
    content:'🔥';
    position: absolute; right: -15px; top: -25px;
    font-size: 130px; opacity: 0.2;
    transform: rotate(15deg);
  }
  .streak-num {
    font-size: 42px; font-weight: 800; letter-spacing: -0.04em;
    line-height: 1;
    position: relative;
  }
  .streak-label {
    font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    opacity: 0.85;
    margin-top: 4px;
    position: relative;
  }
  .streak-msg {
    font-size: 12px; margin-top: 8px; opacity: 0.85;
    position: relative;
  }

  /* === Birthday Banner === */
  .bday-banner {
    background: linear-gradient(135deg, #FFD700 0%, #FF6B35 60%, #C11E00 100%);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 14px 20px;
    margin-bottom: 14px;
    display: flex; align-items: center; gap: 14px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
  }
  .bday-banner::before {
    content:'🎂';
    position: absolute; right: 24px; bottom: -18px;
    font-size: 80px; opacity: 0.3;
    transform: rotate(-15deg);
  }
  .bday-banner .info { flex: 1; position: relative; }
  .bday-banner .nm { font-size: 14px; font-weight: 700; }
  .bday-banner .sub { font-size: 12px; opacity: 0.85; margin-top: 2px; }
  .bday-banner button {
    background: #fff; color: #C11E00;
    border: none; padding: 7px 14px;
    border-radius: 6px;
    font-size: 12px; font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    position: relative;
    z-index: 1;
  }

  /* === Accounts Power Bar === */
  .acc-quick-chips {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin-bottom: 12px;
  }
  .acc-quick-chip {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px; font-weight: 500;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text-secondary);
    cursor: pointer;
    font-family: inherit;
    display: inline-flex; align-items: center; gap: 5px;
  }
  .acc-quick-chip:hover { background: var(--surface-2); }
  .acc-quick-chip.active {
    background: var(--accent); color: #fff; border-color: var(--accent);
  }
  .acc-quick-chip .ct {
    font-size: 11px;
    color: var(--text-tertiary);
  }
  .acc-quick-chip.active .ct { color: rgba(255,255,255,0.7); }
  .acc-quick-chip.clear {
    color: var(--accent);
    border-color: var(--accent);
    border-style: dashed;
  }
  .acc-quick-chip.clear:hover { background: var(--accent-soft); }

  /* Table head sort indicators */
  .table-head .th-sort {
    cursor: pointer; user-select: none;
    display: inline-flex; align-items: center; gap: 3px;
  }
  .table-head .th-sort:hover { color: var(--text); }
  .table-head .th-sort.active { color: var(--text); }
  .table-head .th-sort .arrow { font-size: 9px; opacity: 0.6; }

  /* Row checkbox */
  .table-row-check {
    display: grid;
    grid-template-columns: 28px 2.2fr 1.4fr 2fr 1fr 1fr 1.2fr 1.2fr 0.8fr;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    font-size: 12.5px;
    transition: background 0.1s;
  }
  .table-row-check:last-child { border-bottom: none; }
  .table-row-check.selected { background: var(--accent-soft); }
  .table-row-check.head {
    background: var(--surface);
    color: var(--text-tertiary);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 10px 18px;
  }
  .table-row-check input[type="checkbox"] {
    accent-color: var(--accent);
    width: 14px; height: 14px;
    cursor: pointer;
  }
  .table-row-check[data-brand] { cursor: pointer; }
  .table-row-check[data-brand]:hover { background: var(--surface-2); }
  .table-row-check[data-brand].selected:hover { background: var(--accent-soft); filter: brightness(0.98); }

  /* Bulk actions bar */
  .bulk-bar {
    position: sticky; top: var(--header-h); z-index: 9;
    background: var(--black); color: #fff;
    border-radius: var(--radius);
    padding: 11px 18px;
    margin-bottom: 12px;
    display: flex; align-items: center; gap: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  }
  .bulk-bar .count {
    font-weight: 700;
    margin-right: 8px;
  }
  .bulk-bar .bulk-divider {
    width: 1px; height: 18px;
    background: rgba(255,255,255,0.15);
  }
  .bulk-bar select, .bulk-bar button {
    background: rgba(255,255,255,0.1);
    color: #fff; border: 1px solid rgba(255,255,255,0.15);
    padding: 6px 11px;
    border-radius: 6px;
    font-size: 12px; font-family: inherit;
    cursor: pointer;
  }
  .bulk-bar button.danger { background: rgba(220,38,38,0.25); border-color: rgba(220,38,38,0.4); }
  .bulk-bar button:hover { background: rgba(255,255,255,0.2); }
  .bulk-bar .spacer { flex: 1; }
  .bulk-bar button.clear-sel { color: rgba(255,255,255,0.7); background: transparent; border: none; }

  /* Inline editable cells */
  .inline-edit {
    cursor: pointer;
    padding: 2px 5px; margin: -2px -5px;
    border-radius: 4px;
    transition: background 0.1s;
  }
  .inline-edit:hover {
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 1px var(--accent);
  }
  .inline-edit-select {
    border: 1px solid var(--accent);
    border-radius: 4px;
    padding: 3px 6px;
    font-size: 12px; font-family: inherit;
    background: var(--surface); color: var(--text);
    outline: none;
  }

  /* Account-edit drawer enhancements */
  .acc-edit-bar {
    display: flex; align-items: center;
    gap: 10px; flex-wrap: wrap;
    margin-bottom: 14px;
  }
  .acc-results-count {
    font-size: 12.5px; color: var(--text-tertiary);
    display: inline-flex; align-items: center; gap: 6px;
  }
  .acc-results-count strong { color: var(--text); font-weight: 700; }

  /* Filter chip group container */
  .filter-row-2 {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-bottom: 12px;
  }

  /* === CRM Power === */
  .crm-kpi-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 14px;
  }
  .crm-kpi {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    position: relative;
    overflow: hidden;
  }
  .crm-kpi::before {
    content: '';
    position: absolute; left: 0; top: 12px; bottom: 12px;
    width: 3px;
    background: linear-gradient(180deg, #2563EB, transparent);
    border-radius: 0 2px 2px 0;
  }
  .crm-kpi .label {
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-tertiary);
  }
  .crm-kpi .value {
    font-size: 22px; font-weight: 800; letter-spacing: -0.02em;
    margin-top: 3px;
  }
  .crm-kpi .delta { font-size: 11px; color: var(--green-text); margin-top: 2px; font-weight: 500; }
  .crm-kpi .delta.down { color: var(--accent); }

  /* Funnel viz */
  .funnel-card { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; }
  .funnel-row {
    display: grid; grid-template-columns: 100px 1fr 80px;
    align-items: center; gap: 12px;
    font-size: 12.5px;
  }
  .funnel-bar {
    height: 22px; border-radius: 5px;
    background: var(--surface-2);
    overflow: hidden;
    position: relative;
  }
  .funnel-bar > div {
    height: 100%; border-radius: 5px;
    display: flex; align-items: center; padding: 0 9px;
    color: #fff; font-size: 11px; font-weight: 600;
    transition: width 0.4s ease;
  }
  .funnel-row .lbl { font-weight: 600; }
  .funnel-row .val { text-align: right; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
  .funnel-conv {
    font-size: 10px; color: var(--text-tertiary);
    text-align: center;
    margin: -4px 0 -4px 110px;
    padding-left: 10px;
  }

  /* Lead card enhancements */
  .lead-card-v2 {
    background: var(--surface);
    border-radius: var(--radius-sm);
    padding: 11px 12px;
    cursor: grab; user-select: none;
    transition: transform 0.1s;
  }
  .lead-card-v2:hover { transform: translateY(-1px); }
  .lead-card-v2 .top {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 6px;
  }
  .lead-card-v2 .nm {
    font-size: 13px; font-weight: 700; letter-spacing: -0.01em;
    line-height: 1.2;
  }
  .lead-card-v2 .stale-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent);
    animation: pulse-red 1.4s ease-in-out infinite;
    flex-shrink: 0; margin-top: 5px;
  }
  .lead-card-v2 .contact {
    font-size: 11.5px; color: var(--text-tertiary);
    margin-bottom: 6px;
  }
  .lead-card-v2 .value-row {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 6px;
  }
  .lead-card-v2 .value {
    font-size: 13px; font-weight: 700; letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
  }
  .lead-card-v2 .score-pill {
    font-size: 9.5px; font-weight: 700;
    padding: 2px 7px; border-radius: 999px;
    letter-spacing: 0.04em; text-transform: uppercase;
  }
  .lead-card-v2 .score-pill.hot { background: #DC2626; color: #fff; }
  .lead-card-v2 .score-pill.warm { background: #EA580C; color: #fff; }
  .lead-card-v2 .score-pill.cold { background: var(--surface-2); color: var(--text-secondary); }
  .lead-card-v2 .svc { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 6px; }
  .lead-card-v2 .meta-row {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 6px; border-top: 1px solid var(--border);
    font-size: 10.5px; color: var(--text-tertiary);
  }
  .lead-card-v2 .source-tag {
    background: var(--surface-2);
    padding: 1px 7px; border-radius: 999px;
    font-weight: 600; letter-spacing: 0.03em;
  }
  .lead-card-v2 .stale-text {
    color: var(--accent); font-weight: 600;
  }

  /* Lead drawer (uses .drawer base class) */
  .lead-section {
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
  }
  .lead-section:last-child { border-bottom: none; }
  .lead-section h3 {
    margin: 0 0 10px;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-tertiary);
  }
  .lead-activity-item {
    display: flex; gap: 10px;
    padding: 8px 0;
    font-size: 12.5px;
  }
  .lead-activity-item .ic {
    width: 24px; height: 24px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    background: var(--surface-2);
    font-size: 12px;
  }
  .lead-activity-item .body { flex: 1; }
  .lead-activity-item .body .top {
    display: flex; justify-content: space-between;
    font-size: 11.5px;
    margin-bottom: 2px;
  }
  .lead-activity-item .body .when { color: var(--text-tertiary); }
  .lead-activity-item .body .summary { color: var(--text-secondary); }

  /* BD Leaderboard */
  .bd-board {
    display: flex; flex-direction: column; gap: 4px;
  }
  .bd-row {
    display: grid;
    grid-template-columns: 18px 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 12.5px;
  }
  .bd-row:last-child { border-bottom: none; }
  .bd-row .rank {
    font-weight: 700;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
  }
  .bd-row.first .rank { color: #FBBF24; }
  .bd-row.second .rank { color: #94A3B8; }
  .bd-row.third .rank { color: #B45309; }
  .bd-row .stat { font-weight: 700; font-variant-numeric: tabular-nums; }
  .bd-row .delta { font-size: 11px; color: var(--text-tertiary); }

  /* Win/Loss modal-y */
  .crm-quick-filters {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-bottom: 12px;
  }

  /* === Outreach Queue === */
  .outreach-card {
    background: linear-gradient(135deg, #0F172A, #1E293B);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 22px 26px;
    margin-bottom: 14px;
    position: relative;
    overflow: hidden;
  }
  .outreach-card::before {
    content:'';
    position: absolute; top: -40%; right: -10%;
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(239,68,68,0.25), transparent 60%);
    pointer-events: none;
  }
  .outreach-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 14px; position: relative;
  }
  .outreach-label {
    font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: #FF5A3C;
    display: flex; align-items: center; gap: 8px;
  }
  .outreach-label::before {
    content:''; width:7px; height:7px; border-radius:50%;
    background:#FF5A3C; animation: pulse-red 1.4s ease-in-out infinite;
  }
  .outreach-card h2 {
    margin: 0; font-size: 24px; font-weight: 800;
    letter-spacing: -0.025em;
    position: relative;
  }
  .outreach-card .sub {
    color: rgba(255,255,255,0.55); font-size: 13px;
    margin-top: 4px;
    position: relative;
  }
  .outreach-list {
    display: flex; flex-direction: column; gap: 8px;
    position: relative;
  }
  .outreach-item {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 16px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s;
  }
  .outreach-item:hover { background: rgba(255,255,255,0.09); }
  .outreach-item .priority {
    font-size: 18px; font-weight: 800;
    color: #FF5A3C;
    min-width: 24px; text-align: center;
  }
  .outreach-item .info { flex: 1; min-width: 0; }
  .outreach-item .nm { font-size: 14px; font-weight: 700; }
  .outreach-item .reason {
    font-size: 11.5px; color: rgba(255,255,255,0.55);
    margin-top: 2px;
    line-height: 1.4;
  }
  .outreach-item .actions {
    display: flex; gap: 6px;
  }
  .outreach-item button {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    padding: 6px 11px; border-radius: 6px;
    font-size: 11.5px; font-weight: 600;
    cursor: pointer; font-family: inherit;
  }
  .outreach-item button:hover { background: var(--accent); border-color: var(--accent); }
  .outreach-item .value {
    font-size: 13px; font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  /* === AI Email Composer === */
  .email-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 1050;
    display: none;
    align-items: center; justify-content: center;
    backdrop-filter: blur(4px);
  }
  .email-overlay.show { display: flex; }
  .email-panel {
    background: var(--surface);
    border-radius: var(--radius-lg);
    width: 720px; max-width: 92vw;
    max-height: 88vh;
    display: flex; flex-direction: column;
    box-shadow: 0 30px 80px rgba(0,0,0,0.35);
    overflow: hidden;
  }
  .email-head {
    padding: 16px 22px;
    border-bottom: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center;
  }
  .email-head h3 {
    margin: 0; font-size: 16px; font-weight: 700;
    display: flex; align-items: center; gap: 8px;
  }
  .email-head h3 .ai-badge {
    background: linear-gradient(135deg, #2563EB, #7C3AED);
    color: #fff; padding: 2px 9px; font-size: 9.5px; font-weight: 700;
    letter-spacing: 0.06em; border-radius: 999px;
  }
  .email-body { flex: 1; overflow-y: auto; padding: 16px 22px; }
  .email-field {
    display: grid; grid-template-columns: 70px 1fr;
    align-items: center; gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
  }
  .email-field label {
    font-size: 11px; font-weight: 700;
    color: var(--text-tertiary);
    letter-spacing: 0.06em; text-transform: uppercase;
  }
  .email-field input {
    border: none; outline: none;
    background: transparent; color: var(--text);
    font-size: 13px; font-family: inherit;
    padding: 4px 0;
  }
  .email-templates {
    display: flex; gap: 6px; flex-wrap: wrap;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
  }
  .email-template {
    background: var(--surface-2); border: 1px solid var(--border);
    padding: 5px 11px; border-radius: 999px;
    font-size: 11.5px; cursor: pointer;
    font-family: inherit; color: var(--text-secondary);
  }
  .email-template:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
  .email-content {
    margin-top: 14px;
    min-height: 280px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.6;
    font-family: inherit;
    background: var(--surface);
    color: var(--text);
    resize: vertical;
    width: 100%;
    box-sizing: border-box;
  }
  .email-content:focus { outline: none; border-color: var(--text); }
  .email-streaming-cursor {
    display: inline-block; width: 7px; height: 14px;
    background: var(--accent); margin-left: 2px;
    animation: blink 1s steps(2) infinite;
    vertical-align: text-bottom;
  }
  @keyframes blink { 50% { opacity: 0; } }
  .email-foot {
    padding: 14px 22px;
    border-top: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center;
  }
  .email-foot .meta { font-size: 11px; color: var(--text-tertiary); }
  .email-foot .actions { display: flex; gap: 8px; }

  /* === Pipeline Simulator === */
  .sim-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    margin-bottom: 14px;
    position: relative;
    overflow: hidden;
  }
  .sim-card::before {
    content:'';
    position: absolute; top: -50%; right: -10%;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(37,99,235,0.06), transparent 60%);
    pointer-events: none;
  }
  .sim-header {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 14px;
  }
  .sim-header h3 {
    margin: 0; font-size: 16px; font-weight: 700;
    letter-spacing: -0.01em;
  }
  .sim-header .label {
    font-size: 10.5px; font-weight: 700;
    color: #2563EB;
    letter-spacing: 0.16em; text-transform: uppercase;
  }
  .sim-grid {
    display: grid; grid-template-columns: 1.2fr 1fr;
    gap: 24px;
  }
  .sim-sliders { display: flex; flex-direction: column; gap: 14px; }
  .sim-slider-row {
    display: grid; grid-template-columns: 110px 1fr 60px;
    align-items: center; gap: 12px;
    font-size: 12.5px;
  }
  .sim-slider-row label { font-weight: 600; }
  .sim-slider-row input[type=range] {
    width: 100%; accent-color: var(--accent);
    cursor: pointer;
  }
  .sim-slider-row .val {
    text-align: right; font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
  }
  .sim-output {
    background: var(--surface-2);
    border-radius: var(--radius);
    padding: 18px 20px;
    display: flex; flex-direction: column; justify-content: center;
  }
  .sim-output .baseline { font-size: 11px; color: var(--text-tertiary); }
  .sim-output .baseline-val {
    font-size: 18px; font-weight: 700;
    color: var(--text-secondary);
    margin: 2px 0 14px;
  }
  .sim-output .projected { font-size: 11px; color: var(--text-tertiary); }
  .sim-output .projected-val {
    font-size: 36px; font-weight: 800;
    letter-spacing: -0.03em;
    margin: 2px 0 6px;
    background: linear-gradient(135deg, #2563EB, #7C3AED);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .sim-output .delta {
    font-size: 13px; font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
    display: inline-flex; align-items: center; gap: 4px;
    align-self: flex-start;
  }
  .sim-output .delta.up { background: var(--green-bg); color: var(--green-text); }
  .sim-output .delta.down { background: var(--red-bg); color: var(--accent); }
  .sim-output .insight {
    font-size: 12px; color: var(--text-secondary);
    margin-top: 12px; line-height: 1.5;
  }
  .sim-reset {
    background: transparent; border: none;
    color: var(--text-tertiary); font-size: 11.5px;
    cursor: pointer; font-family: inherit;
    text-decoration: underline;
  }
  .sim-reset:hover { color: var(--text); }

  /* === Lookalike brands === */
  .lookalike-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .lookalike-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
    transition: background 0.15s;
  }
  .lookalike-card:hover { background: var(--surface); border-color: var(--accent); }
  .lookalike-card .nm { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
  .lookalike-card .meta { font-size: 11px; color: var(--text-tertiary); }
  .lookalike-card .stat {
    font-size: 11px; color: var(--green-text);
    margin-top: 6px; font-weight: 600;
  }
  .lookalike-card .insight {
    font-size: 11.5px; color: var(--text-secondary);
    margin-top: 6px; line-height: 1.5;
    padding-top: 6px;
    border-top: 1px solid var(--border);
  }

  /* === Win Probability === */
  .winprob-card {
    background: linear-gradient(135deg, #064E3B, #0F766E 50%, #0E7490 100%);
    color: #fff;
    border-radius: 14px;
    padding: 20px 24px;
    margin-bottom: 14px;
    position: relative;
    overflow: hidden;
  }
  .winprob-card::before {
    content:'';
    position: absolute; top: -40%; right: -10%;
    width: 240px; height: 240px;
    background: radial-gradient(circle, rgba(255,255,255,0.1), transparent 60%);
    pointer-events: none;
  }
  .winprob-card.low {
    background: linear-gradient(135deg, #7C2D12, #B45309 50%, #92400E 100%);
  }
  .winprob-row {
    display: flex; align-items: center; gap: 24px;
    position: relative;
  }
  .winprob-circle {
    width: 110px; height: 110px;
    position: relative; flex-shrink: 0;
  }
  .winprob-num {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 32px; font-weight: 800;
    letter-spacing: -0.03em;
  }
  .winprob-label {
    font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    margin-bottom: 4px;
  }
  .winprob-title {
    font-size: 16px; font-weight: 700;
    margin-bottom: 8px;
  }
  .winprob-factors {
    display: flex; flex-direction: column; gap: 6px;
    flex: 1;
  }
  .winprob-factor {
    display: grid;
    grid-template-columns: 130px 1fr 40px;
    align-items: center; gap: 10px;
    font-size: 11.5px;
  }
  .winprob-factor .bar {
    height: 5px; border-radius: 3px;
    background: rgba(255,255,255,0.12);
    overflow: hidden;
  }
  .winprob-factor .bar > div {
    height: 100%; background: rgba(255,255,255,0.85);
    transition: width 0.4s ease;
  }
  .winprob-factor .v { font-weight: 700; text-align: right; opacity: 0.85; font-variant-numeric: tabular-nums; }

  /* === Sequences === */
  .seq-list { display: flex; flex-direction: column; gap: 8px; padding: 8px 0; }
  .seq-step {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--surface-2);
    border-radius: 8px;
    border-left: 3px solid var(--border-strong);
    font-size: 12.5px;
  }
  .seq-step.done {
    border-left-color: var(--green-text);
    opacity: 0.7;
  }
  .seq-step.current {
    border-left-color: var(--accent);
    background: var(--accent-soft);
  }
  .seq-step .day {
    font-size: 11px; font-weight: 700;
    color: var(--text-tertiary);
    text-align: center;
  }
  .seq-step.current .day { color: var(--accent); }
  .seq-step .nm { font-weight: 600; }
  .seq-step .meta { font-size: 11px; color: var(--text-tertiary); }
  .seq-step .ic {
    font-size: 14px;
  }
  .seq-step .status {
    font-size: 10px; font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-tertiary);
  }
  .seq-step.done .status { background: var(--green-bg); color: var(--green-text); }
  .seq-step.current .status { background: var(--accent); color: #fff; }

  .seq-picker {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
    margin-top: 6px;
  }
  .seq-option {
    padding: 11px 14px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--surface);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: all 0.1s;
  }
  .seq-option:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
  }
  .seq-option .nm { font-size: 12.5px; font-weight: 700; margin-bottom: 2px; }
  .seq-option .desc { font-size: 11px; color: var(--text-tertiary); }
  .seq-option .steps-count {
    margin-top: 6px; font-size: 10px;
    color: var(--accent); font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
  }

  /* === Stakeholder Map === */
  .stakeholder-grid {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .stakeholder-card {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
  }
  .stakeholder-card.champion { border-color: var(--green-text); background: var(--green-bg); }
  .stakeholder-card.blocker { border-color: var(--accent); background: var(--red-bg); }
  .stakeholder-card .nm { font-size: 12.5px; font-weight: 700; }
  .stakeholder-card .role {
    font-size: 11px; color: var(--text-tertiary);
    margin-bottom: 8px;
  }
  .stakeholder-card .status-pill {
    font-size: 9.5px; font-weight: 700;
    padding: 2px 7px; border-radius: 999px;
    letter-spacing: 0.06em; text-transform: uppercase;
    display: inline-block;
    margin-right: 6px;
  }
  .status-pill.champion { background: var(--green-text); color: #fff; }
  .status-pill.engaged { background: var(--blue-bg); color: var(--blue-text); }
  .status-pill.unknown { background: var(--gray-bg); color: var(--text-tertiary); }
  .status-pill.blocker { background: var(--accent); color: #fff; }
  .stakeholder-card .eng {
    font-size: 10px; color: var(--text-tertiary);
    margin-top: 4px;
  }

  /* === Source Attribution Donut === */
  .source-donut {
    display: flex; align-items: center; gap: 22px;
    padding: 8px 16px;
  }
  .donut-svg { width: 140px; height: 140px; flex-shrink: 0; }
  .donut-legend { flex: 1; display: flex; flex-direction: column; gap: 7px; font-size: 12px; }
  .donut-legend-row {
    display: grid;
    grid-template-columns: 12px 1fr auto auto;
    align-items: center; gap: 10px;
  }
  .donut-legend-row .swatch {
    width: 10px; height: 10px; border-radius: 2px;
  }
  .donut-legend-row .nm { font-weight: 600; }
  .donut-legend-row .stat { font-size: 11px; color: var(--text-tertiary); }
  .donut-legend-row .pct { font-weight: 700; font-variant-numeric: tabular-nums; }

  /* Velocity table */
  .velocity-table {
    width: 100%; border-collapse: collapse;
    font-size: 12px;
  }
  .velocity-table th, .velocity-table td {
    padding: 9px 16px;
    border-bottom: 1px solid var(--border);
    text-align: left;
  }
  .velocity-table th {
    background: var(--surface-2);
    font-size: 10px; font-weight: 700;
    color: var(--text-tertiary);
    text-transform: uppercase; letter-spacing: 0.06em;
  }
  .velocity-table td.num {
    text-align: right; font-variant-numeric: tabular-nums; font-weight: 600;
  }

  /* AI command pill */
  .ai-cmd-success {
    background: rgba(16,163,74,0.15) !important;
    color: #4ADE80 !important;
    border-left: 3px solid #4ADE80;
    padding-left: 10px !important;
  }
  body[data-theme="dark"] .ai-cmd-success { color: #4ADE80; }

  /* User card reset link */
  .user-card .reset-link {
    margin-left: auto; color: var(--text-tertiary);
    background: transparent; border: none;
    cursor: pointer; padding: 4px;
    border-radius: var(--radius-sm);
  }
  .user-card .reset-link:hover { color: var(--text); background: var(--surface-2); }
  .user-card .reset-link svg { width: 14px; height: 14px; }

  /* === CRM Table view === */
  .crm-table-wrap {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-md); overflow: hidden;
    margin-top: 14px;
  }
  .crm-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
  .crm-table thead th {
    text-align: left; padding: 10px 14px; font-weight: 600;
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-tertiary); background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    cursor: pointer; user-select: none;
    white-space: nowrap;
  }
  .crm-table thead th:hover { color: var(--text); }
  .crm-table thead th .sort-ic { opacity: 0.5; margin-left: 4px; font-size: 9px; }
  .crm-table thead th.active .sort-ic { opacity: 1; }
  .crm-table tbody tr { border-bottom: 1px solid var(--border); cursor: pointer; }
  .crm-table tbody tr:hover { background: var(--surface-2); }
  .crm-table tbody tr:last-child { border-bottom: none; }
  .crm-table td { padding: 12px 14px; vertical-align: middle; }
  .crm-table td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
  .crm-table .brand-cell { font-weight: 600; }
  .crm-table .contact-cell { color: var(--text-secondary); font-size: 11.5px; }
  .crm-table .stage-pill {
    display: inline-block; padding: 3px 9px; border-radius: 999px;
    font-size: 10.5px; font-weight: 700; text-transform: capitalize;
  }
  .crm-table .stale-pill { color: var(--accent); font-weight: 600; }

  /* CRM table action bar (Import/Export + bulk ops) */
  .crm-table-actions {
    display: flex; justify-content: space-between; align-items: center;
    gap: 10px; margin-bottom: 10px; flex-wrap: wrap;
  }
  .crm-table-actions .bulk-count {
    font-size: 11.5px; color: var(--text-secondary); font-weight: 600;
    padding: 4px 9px; background: var(--surface-2);
    border-radius: 999px; border: 1px solid var(--border);
  }
  .crm-table-actions select {
    padding: 5px 10px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--surface);
    font-size: 12px; color: var(--text);
  }
  .crm-table-actions select:disabled { opacity: 0.45; cursor: not-allowed; }
  .crm-table-actions button:disabled { opacity: 0.45; cursor: not-allowed; }
  .crm-table tbody tr.row-selected { background: rgba(37,99,235,0.08); }
  .crm-table tbody tr.row-selected:hover { background: rgba(37,99,235,0.14); }

  /* === CRM Forecast view === */
  .forecast-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px; margin-top: 14px;
  }
  .forecast-month {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 16px;
  }
  .forecast-month .month-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 12px; padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
  }
  .forecast-month .month-name {
    font-size: 13px; font-weight: 700; letter-spacing: -0.01em;
  }
  .forecast-month .month-count {
    font-size: 11px; color: var(--text-tertiary); font-weight: 500;
  }
  .forecast-month .month-total {
    font-size: 22px; font-weight: 800; letter-spacing: -0.02em;
    margin-bottom: 4px;
  }
  .forecast-month .month-weighted {
    font-size: 11px; color: var(--text-secondary); margin-bottom: 12px;
  }
  .forecast-bar-row {
    display: grid; grid-template-columns: 60px 1fr 70px;
    align-items: center; gap: 8px; margin-bottom: 6px;
    font-size: 11px;
  }
  .forecast-bar-row .lbl { color: var(--text-secondary); font-weight: 600; }
  .forecast-bar-row .bar {
    height: 10px; background: var(--surface-2); border-radius: 999px;
    overflow: hidden; position: relative;
  }
  .forecast-bar-row .bar > div {
    height: 100%; border-radius: 999px;
    transition: width 0.4s ease;
  }
  .forecast-bar-row .val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 11px; }
  .forecast-month .deal-list { margin-top: 10px; }
  .forecast-month .deal-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 0; border-top: 1px dashed var(--border); font-size: 11.5px;
  }
  .forecast-month .deal-row:first-child { border-top: none; }
  .forecast-month .deal-row .nm { font-weight: 600; }
  .forecast-month .deal-row .vl { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
  .forecast-quota {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 16px;
    margin-top: 14px;
  }
  .forecast-quota .quota-bar {
    height: 14px; background: var(--surface-2); border-radius: 999px;
    overflow: hidden; margin-top: 10px; position: relative;
  }
  .forecast-quota .quota-bar > .committed {
    height: 100%; background: linear-gradient(90deg,#059669,#10B981);
    border-radius: 999px;
  }
  .forecast-quota .quota-bar > .best {
    position: absolute; top: 0; height: 100%;
    background: rgba(37,99,235,0.35); border-radius: 999px;
  }
  .forecast-quota .quota-mark {
    position: absolute; top: -2px; bottom: -2px; width: 2px;
    background: var(--text);
  }
  .forecast-legend { display: flex; gap: 14px; margin-top: 10px; font-size: 11px; color: var(--text-secondary); }
  .forecast-legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: middle; margin-right: 5px; }

  /* === CRM Win/Loss Analysis view === */
  .analysis-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 12px; margin-top: 14px;
  }
  @media (max-width: 900px) { .analysis-grid { grid-template-columns: 1fr; } }
  .analysis-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 16px;
  }
  .analysis-card h4 {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--text-tertiary); margin: 0 0 14px;
  }
  .reason-row {
    display: grid; grid-template-columns: 1fr 70px 50px;
    align-items: center; gap: 10px; margin-bottom: 8px; font-size: 12px;
  }
  .reason-row .rl { font-weight: 500; }
  .reason-row .rb { height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
  .reason-row .rb > div { height: 100%; border-radius: 999px; }
  .reason-row.loss .rb > div { background: #DC2626; }
  .reason-row.win .rb > div { background: #059669; }
  .reason-row .rc { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-secondary); }
  .winrate-row {
    display: grid; grid-template-columns: 90px 1fr 80px;
    align-items: center; gap: 10px; margin-bottom: 8px; font-size: 12px;
  }
  .winrate-row .lbl { font-weight: 600; }
  .winrate-row .bar { height: 10px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
  .winrate-row .bar > div { height: 100%; background: linear-gradient(90deg,#1E40AF,#3B82F6); border-radius: 999px; }
  .winrate-row .val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
  .analysis-empty {
    padding: 24px; text-align: center; color: var(--text-tertiary); font-size: 12.5px;
  }

  /* === Reason picker (lightweight modal) === */
  .reason-picker-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    z-index: 1200; display: none; align-items: center; justify-content: center;
    animation: fade-in 0.15s ease;
  }
  .reason-picker-backdrop.show { display: flex; }
  .reason-picker {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 22px; width: 90%; max-width: 420px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.3);
  }
  .reason-picker h3 { margin: 0 0 6px; font-size: 17px; font-weight: 700; }
  .reason-picker .sub { font-size: 12.5px; color: var(--text-secondary); margin-bottom: 14px; }
  .reason-picker .options { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
  .reason-picker .options button {
    text-align: left; padding: 10px 12px; background: var(--surface-2);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-size: 12.5px; cursor: pointer; color: var(--text);
    transition: all 0.15s ease;
  }
  .reason-picker .options button:hover {
    background: var(--text); color: var(--surface); border-color: var(--text);
  }
  .reason-picker .options button.selected {
    background: var(--text); color: var(--surface); border-color: var(--text);
  }
  .reason-picker .custom-input {
    width: 100%; padding: 10px 12px; background: var(--surface-2);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-size: 12.5px; color: var(--text); margin-bottom: 14px;
    font-family: inherit;
  }
  .reason-picker .actions { display: flex; gap: 8px; justify-content: flex-end; }

  /* === Lead drawer enhancements === */
  .lead-nudge {
    margin: 14px 0 0; padding: 12px 14px;
    background: linear-gradient(135deg, rgba(37,99,235,0.08), rgba(124,58,237,0.08));
    border: 1px solid rgba(37,99,235,0.25);
    border-radius: var(--radius-md);
    display: flex; gap: 12px; align-items: flex-start;
  }
  .lead-nudge.warm { background: linear-gradient(135deg, rgba(234,88,12,0.08), rgba(217,119,6,0.08)); border-color: rgba(234,88,12,0.25); }
  .lead-nudge.hot { background: linear-gradient(135deg, rgba(220,38,38,0.10), rgba(234,88,12,0.10)); border-color: rgba(220,38,38,0.30); }
  .lead-nudge.good { background: linear-gradient(135deg, rgba(5,150,105,0.08), rgba(16,185,129,0.08)); border-color: rgba(5,150,105,0.25); }
  .lead-nudge .nudge-ic { font-size: 20px; line-height: 1; flex-shrink: 0; }
  .lead-nudge .nudge-body { flex: 1; }
  .lead-nudge .nudge-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); margin-bottom: 3px; }
  .lead-nudge .nudge-text { font-size: 13px; font-weight: 500; line-height: 1.45; }
  .lead-nudge .nudge-action {
    margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap;
  }
  .lead-nudge .nudge-action button {
    padding: 5px 10px; font-size: 11.5px; font-weight: 600;
    border: 1px solid var(--border-strong); background: var(--surface);
    border-radius: var(--radius-sm); cursor: pointer; color: var(--text);
  }
  .lead-nudge .nudge-action button:hover { background: var(--text); color: var(--surface); border-color: var(--text); }

  .notes-editor {
    width: 100%; min-height: 80px; padding: 10px 12px;
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--radius-sm); font-size: 13px; line-height: 1.6;
    color: var(--text); resize: vertical; font-family: inherit;
  }
  .notes-editor:focus { outline: none; border-color: var(--text); }
  .notes-save-bar {
    display: flex; gap: 6px; margin-top: 6px; justify-content: flex-end;
    font-size: 11px; color: var(--text-tertiary);
  }

  /* === CRM Daily Digest banner === */
  .crm-digest {
    background: linear-gradient(135deg, rgba(37,99,235,0.08), rgba(124,58,237,0.06));
    border: 1px solid rgba(37,99,235,0.25);
    border-radius: var(--radius-md);
    padding: 16px 18px; margin-bottom: 14px;
    display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: flex-start;
  }
  .crm-digest .dg-eyebrow {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; color: #2563EB; margin-bottom: 4px;
  }
  .crm-digest .dg-title { font-size: 16px; font-weight: 700; margin-bottom: 10px; letter-spacing: -0.01em; }
  .crm-digest .dg-sections {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  }
  @media (max-width: 720px) { .crm-digest .dg-sections { grid-template-columns: 1fr; } }
  .crm-digest .dg-section h4 {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--text-tertiary); margin: 0 0 6px;
  }
  .crm-digest .dg-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 4px 0; font-size: 12px; gap: 8px;
    cursor: pointer; border-bottom: 1px dashed var(--border);
  }
  .crm-digest .dg-item:last-child { border-bottom: none; }
  .crm-digest .dg-item:hover .nm { text-decoration: underline; }
  .crm-digest .dg-item .nm { font-weight: 600; }
  .crm-digest .dg-item .mt { color: var(--text-tertiary); font-size: 10.5px; font-variant-numeric: tabular-nums; }
  .crm-digest .dg-empty { color: var(--text-tertiary); font-size: 11.5px; padding: 4px 0; }
  .crm-digest .dg-dismiss {
    background: transparent; border: none; font-size: 18px; cursor: pointer;
    color: var(--text-tertiary); padding: 0 4px; line-height: 1;
  }
  .crm-digest .dg-dismiss:hover { color: var(--text); }

  /* === Lead drawer inline edit === */
  .lead-edit-brand {
    width: 100%; font-size: 22px; font-weight: 800; letter-spacing: -0.02em;
    border: 1px solid transparent; background: transparent;
    padding: 4px 8px; margin: 0 0 4px -8px; border-radius: var(--radius-sm);
    color: var(--text); font-family: inherit;
  }
  .lead-edit-brand:hover { border-color: var(--border); }
  .lead-edit-brand:focus { outline: none; border-color: var(--text); background: var(--surface-2); }
  .lead-edit-contact {
    width: 100%; font-size: 13px; color: var(--text-secondary);
    border: 1px solid transparent; background: transparent;
    padding: 4px 8px; margin: 0 0 16px -8px; border-radius: var(--radius-sm);
    font-family: inherit;
  }
  .lead-edit-contact:hover { border-color: var(--border); }
  .lead-edit-contact:focus { outline: none; border-color: var(--text); background: var(--surface-2); color: var(--text); }

  .lead-edit-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px;
  }
  .lead-edit-grid .lf > label {
    display: block; font-size: 10px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-tertiary); margin-bottom: 4px;
  }
  .lead-edit-grid .lf input,
  .lead-edit-grid .lf select {
    width: 100%; padding: 6px 10px;
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--radius-sm); font-size: 13px;
    color: var(--text); font-family: inherit;
    font-variant-numeric: tabular-nums;
  }
  .lead-edit-grid .lf input:focus,
  .lead-edit-grid .lf select:focus {
    outline: none; border-color: var(--text);
  }

  .lead-edit-section { margin-top: 14px; }
  .lead-edit-section > label {
    display: block; font-size: 10px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-tertiary); margin-bottom: 6px;
  }
  .services-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .svc-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 999px;
    border: 1px solid var(--border);
    font-size: 11.5px; cursor: pointer;
    background: var(--surface-2); color: var(--text-secondary);
    transition: all 0.15s ease;
    user-select: none;
  }
  .svc-chip input { display: none; }
  .svc-chip:hover { border-color: var(--text-secondary); }
  .svc-chip.on {
    background: var(--text); color: var(--surface); border-color: var(--text);
  }

  .lead-section.danger-zone h3 { color: var(--accent); }

  /* Polished activity timeline (vertical line + dots) */
  .timeline {
    position: relative; padding-left: 22px; margin-top: 10px;
  }
  .timeline::before {
    content: ''; position: absolute; left: 7px; top: 4px; bottom: 4px;
    width: 2px; background: var(--border);
  }
  .timeline-item {
    position: relative; padding-bottom: 14px;
  }
  .timeline-item:last-child { padding-bottom: 0; }
  .timeline-item::before {
    content: ''; position: absolute; left: -22px; top: 4px;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--surface); border: 2px solid var(--text);
    z-index: 1;
  }
  .timeline-item .tl-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 8px; margin-bottom: 2px;
  }
  .timeline-item .tl-kind {
    font-size: 12px; font-weight: 600; text-transform: capitalize;
  }
  .timeline-item .tl-when { font-size: 11px; color: var(--text-tertiary); white-space: nowrap; }
  .timeline-item .tl-summary { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }