/* ═══════════════════════════════════════════════════════
   CronSpire Flowboard — Main Stylesheet
   ═══════════════════════════════════════════════════════ */

  :root {
    --bg:#0a0a10; --surface:#141420; --surface2:#22223a; --border:#32324a;
    --accent:#d4880e; --accent2:#5590b8; --danger:#e04555; --warn:#c07818;
    --text:#f0f0ff; --muted:#8888aa; --card:#181828; --green:#3db870;
    --purple:#d4880e; --radius:12px;
  }

  /* ── LIGHT MODE — every token + element overrides ── */
  body.light-mode {
    --bg:#f0f2f8; --surface:#ffffff; --surface2:#e4e8f2; --border:#c8cde0;
    --text:#18182e; --muted:#5a5a88; --card:#ffffff;
    --accent:#d4880e; --accent2:#2d6a96; --danger:#c8203c; --warn:#b06010;
    --green:#1a8a42; --purple:#d4880e;
  }
  body.light-mode .app-sidebar   { background:#fff; border-color:#d8dce8; }
  body.light-mode .sidebar-toggle { background:var(--accent); color:#0e0e12; border-color:#fff; }
  body.light-mode .sidebar-toggle:hover { background:#b06010; }
  body.light-mode .sidebar-item.active { background:rgba(0,0,0,0.04); }
  body.light-mode .sidebar-item.active::before { background:var(--accent); }
  body.light-mode .sidebar-item:hover { background:rgba(0,0,0,0.03); }
  body.light-mode header        { background:rgba(240,242,248,0.96); }
  body.light-mode body::before  { opacity:.3; }

  /* dashboard labels that were hardcoded #fff */
  body.light-mode .stat-label,
  body.light-mode .dash-section-title,
  body.light-mode .priority-stat .plabel,
  body.light-mode .archive-month-label { color:var(--text); }
  body.light-mode .dash-eyebrow { color:var(--muted); }
  body.light-mode .dash-filter-group { background:var(--surface2); border-color:var(--border); }
  body.light-mode .dash-filter-btn.active { background:#fff; color:var(--text); box-shadow:0 1px 4px rgba(0,0,0,0.12); }
  body.light-mode .kpi-card { box-shadow:0 2px 12px rgba(0,0,0,0.06); }
  body.light-mode .kpi-card:hover { box-shadow:0 12px 32px rgba(0,0,0,0.12); border-color:var(--kpi-color, var(--muted)); }
  body.light-mode .kpi-label { color:var(--muted); }
  body.light-mode .dash-panel { box-shadow:0 2px 12px rgba(0,0,0,0.06); }
  body.light-mode .priority-pill.high   { background:rgba(200,32,60,0.06);  border-color:rgba(200,32,60,0.15); }
  body.light-mode .priority-pill.medium { background:rgba(176,88,0,0.06);   border-color:rgba(176,88,0,0.15); }
  body.light-mode .priority-pill.low    { background:rgba(26,122,176,0.06); border-color:rgba(26,122,176,0.15); }

  /* priority badges in light mode need darker text */
  body.light-mode .priority-high   { background:rgba(200,32,60,0.1);  color:#901428; border-color:rgba(200,32,60,0.35); }
  body.light-mode .priority-medium { background:rgba(176,88,0,0.1);   color:#7a3c00; border-color:rgba(176,88,0,0.35); }
  body.light-mode .priority-low    { background:rgba(26,122,176,0.1); color:#0d5a8a; border-color:rgba(26,122,176,0.35); }

  /* due-date in light mode */
  body.light-mode .due-ok      { background:rgba(20,122,56,0.1);  color:#0a6028; border-color:rgba(20,122,56,0.35); }
  body.light-mode .due-soon    { background:rgba(176,88,0,0.1);   color:#7a3c00; border-color:rgba(176,88,0,0.35); }
  body.light-mode .due-overdue { background:rgba(200,32,60,0.1);  color:#901428; border-color:rgba(200,32,60,0.35); }

  /* stale badges */
  body.light-mode .stale-badge.show-danger { background:rgba(200,32,60,0.1);  color:#901428; border-color:rgba(200,32,60,0.35); }
  body.light-mode .stale-badge.show-warn   { background:rgba(176,88,0,0.1);   color:#7a3c00; border-color:rgba(176,88,0,0.35); }
  body.light-mode .snoozed-badge           { background:rgba(90,90,136,0.1);  color:#3a3a70; border-color:rgba(90,90,136,0.35); }

  /* card links */
  body.light-mode .card-link.figma-desktop { background:rgba(112,32,192,0.1); color:#5a18a0; border-color:rgba(112,32,192,0.35); }
  body.light-mode .card-link.figma-mobile  { background:rgba(26,122,176,0.1); color:#0d5a8a; border-color:rgba(26,122,176,0.35); }
  body.light-mode .card-link.dev-link      { background:rgba(184,152,0,0.1);  color:#706000; border-color:rgba(184,152,0,0.35); }
  body.light-mode .card-link.docs-link     { background:rgba(20,122,56,0.1);  color:#0a6028; border-color:rgba(20,122,56,0.35); }
  body.light-mode .card-link.timeline-link { background:rgba(176,88,0,0.1);   color:#7a3c00; border-color:rgba(176,88,0,0.35); }
  body.light-mode .card-link.pm-link       { background:rgba(200,32,60,0.1);  color:#901428; border-color:rgba(200,32,60,0.35); }

  /* notification panel in light */
  body.light-mode .notif-item.critical { background:rgba(200,32,60,0.07);  color:#901428; border-color:rgba(200,32,60,0.25); }
  body.light-mode .notif-item.reminder { background:rgba(20,120,180,0.07);  color:#1a5a80; border-color:rgba(20,120,180,0.25); }
  body.light-mode .notif-item.warning  { background:rgba(176,88,0,0.07);   color:#7a3c00; border-color:rgba(176,88,0,0.25); }
  body.light-mode .notif-item strong   { color:var(--text); }

  /* snooze in light */
  body.light-mode .snooze-btn          { border-color:rgba(0,0,0,0.2); color:rgba(0,0,0,0.45); }
  body.light-mode .snooze-btn:hover    { border-color:rgba(0,0,0,0.5); color:rgba(0,0,0,0.8); background:rgba(0,0,0,0.05); }
  body.light-mode .snooze-dropdown     { background:#fff; border-color:var(--border); box-shadow:0 8px 28px rgba(0,0,0,0.18); }
  body.light-mode .snooze-opt          { color:var(--text); border-bottom-color:var(--border); }
  body.light-mode .snooze-opt:hover    { background:var(--surface2); }

  /* cards in light */
  body.light-mode .card     { box-shadow:0 1px 4px rgba(0,0,0,0.08); }
  body.light-mode .card:hover { box-shadow:0 6px 20px rgba(0,0,0,0.14); }
  body.light-mode .dual-badge { color:#5a18a0; }
  body.light-mode .card-btn { background:var(--surface2); border-color:var(--border); color:var(--muted); }
  body.light-mode .card-btn:hover { color:var(--text); border-color:var(--muted); }
  body.light-mode .overdue-item { background:rgba(200,32,60,0.05); border-color:rgba(200,32,60,0.2); }

  /* theme toggle */
  .theme-btn {
    font-size:1rem; padding:7px 11px; background:var(--surface);
    border:1px solid var(--border); border-radius:8px; cursor:pointer; transition:all .2s; line-height:1;
  }
  .theme-btn:hover { border-color:var(--accent); }

  * { box-sizing:border-box; margin:0; padding:0; }
  :root { --vph: 100vh; }
  body { font-family:'Space Grotesk',sans-serif; background:var(--bg); color:var(--text); height:100vh; overflow:hidden; }
  body::before {
    content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
    background-image:linear-gradient(rgba(240,224,96,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(240,224,96,0.03) 1px,transparent 1px);
    background-size:40px 40px;
  }

  /* ── APP SIDEBAR ──────────────────────────────────── */
  .app-sidebar {
    position:fixed; top:0; left:0; bottom:0; width:220px;
    background:var(--surface); border-right:1px solid var(--border);
    z-index:60; display:flex; flex-direction:column;
    padding:0; overflow:visible;
    transition:width .25s cubic-bezier(.4,0,.2,1);
  }

  /* ── CronSpire logo — shared CSS ───────────────────────────── */
  :root { --cs-body: #eeeeff; --cs-sub: #9090c0; }
  body.light-mode { --cs-body: #18182e; --cs-sub: #9090b0; }

  .cs-acc {
    background:linear-gradient(180deg, #f0d850 0%, #d4880e 55%, #d4880e 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text; display:inline;
  }
  .cs-body { color:var(--cs-body); -webkit-text-fill-color:var(--cs-body); }

  /* Sidebar */
  .cs-icon-wrap {
    width:36px; height:36px; flex-shrink:0; border-radius:50%; overflow:hidden;
    box-shadow:0 0 0 1.5px rgba(144,144,192,0.35);
  }
  body.light-mode .cs-icon-wrap { box-shadow:0 0 0 1.5px rgba(24,24,46,0.15); }
  .cs-icon-wrap img { width:36px; height:36px; display:block; }
  .cs-wordmark { display:flex; flex-direction:column; gap:1px; text-transform:none; letter-spacing:normal; }
  .cs-wordmark-name {
    font-family:'Bricolage Grotesque',sans-serif;
    font-weight:800; font-size:1.1rem; letter-spacing:-0.5px; line-height:1.15; white-space:nowrap;
  }
  .cs-wordmark-sub { font-family:'Space Grotesk',sans-serif; font-weight:500; font-size:0.68rem; letter-spacing:0.3px; color:var(--cs-sub); }

  /* Landing page nav */
  .cs-lp-logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
  .cs-lp-icon { width:46px; height:46px; flex-shrink:0; border-radius:50%; overflow:hidden; }
  .cs-lp-icon img { width:46px; height:46px; display:block; }
  .cs-lp-words { display:flex; flex-direction:column; gap:1px; text-transform:none; letter-spacing:normal; }
  .cs-lp-name {
    font-family:'Bricolage Grotesque',sans-serif;
    font-weight:800; font-size:1.4rem; letter-spacing:-0.5px; line-height:1.1; white-space:nowrap;
  }
  .cs-lp-name-dark { color:#18182e; -webkit-text-fill-color:#18182e; }
  .cs-lp-name-light { color:#eeeeff; -webkit-text-fill-color:#eeeeff; }
  .cs-lp-sub-light { font-family:'Space Grotesk',sans-serif; font-weight:500; font-size:0.72rem; letter-spacing:0.3px; color:#9090c0; }
  .cs-ft-icon {
    width:46px; height:46px; flex-shrink:0; border-radius:50%; overflow:hidden;
    box-shadow:0 0 0 1.5px rgba(144,144,192,0.3);
  }
  .cs-ft-icon img { width:46px; height:46px; display:block; }
  .sidebar-logo {
    font-family:'Bricolage Grotesque',sans-serif; font-weight:800;
    font-size:1.05rem; letter-spacing:-0.5px;
    display:flex; align-items:center; gap:10px;
    padding:16px 16px 14px; border-bottom:1px solid var(--border);
    flex-shrink:0; overflow:hidden;
  }
  .sidebar-logo .logo-mark {
    width:36px; height:36px;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .sidebar-logo .logo-mark svg { width:34px; height:34px; }
  .sidebar-nav {
    flex:1; min-height:0; display:flex; flex-direction:column; gap:2px;
    padding:12px 10px 110px; overflow-y:auto; overflow-x:hidden;
  }
  .sidebar-item {
    font-family:'Space Grotesk',sans-serif; font-weight:500; font-size:0.84rem;
    display:flex; align-items:center; gap:10px;
    padding:10px 14px; border-radius:10px;
    background:transparent; border:none; color:var(--muted);
    cursor:pointer; transition:all .15s; text-align:left; width:100%;
    position:relative;
  }
  .sidebar-item:hover { color:var(--text); background:var(--surface2); }
  .sidebar-item.active {
    color:var(--text); background:var(--surface2);
    font-weight:600;
  }
  .sidebar-item.active::before {
    content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
    width:3px; height:20px; background:var(--accent); border-radius:0 3px 3px 0;
  }
  .sidebar-icon { font-size:1rem; width:22px; text-align:center; flex-shrink:0; line-height:1; }
  .sidebar-label { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .sidebar-divider { height:1px; background:var(--border); margin:6px 14px; flex-shrink:0; }
  .sidebar-bottom {
    display:flex; flex-direction:column; gap:2px;
    padding:8px 10px 14px; border-top:1px solid var(--border);
    flex-shrink:0;
    /* Always anchored to sidebar bottom regardless of nav height */
    position:absolute; bottom:0; left:0; right:0;
    background:var(--surface); z-index:1;
  }

  /* ── Sidebar collapse ── */
  .sidebar-toggle {
    position:absolute; top:22px; right:-14px; z-index:61;
    width:28px; height:28px; border-radius:50%;
    background:var(--accent); border:2px solid var(--bg);
    color:#0e0e12; font-size:0.7rem; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:all .18s; box-shadow:0 2px 10px rgba(0,0,0,0.35);
    line-height:1; padding:0;
  }
  .sidebar-toggle:hover { background:linear-gradient(135deg,#f5e060 0%,#e09820 45%,#c07010 100%); transform:scale(1.1); box-shadow:0 4px 16px rgba(212,136,14,0.4); }
  .sidebar-toggle svg { width:14px; height:14px; transition:transform .25s; }
  .app-sidebar.collapsed .sidebar-toggle svg { transform:rotate(180deg); }

  .app-sidebar.collapsed { width:56px; }
  .app-sidebar.collapsed .sidebar-logo .logo-text { display:none; }
  .app-sidebar.collapsed .sidebar-logo { padding:14px 10px; justify-content:center; }
  .app-sidebar.collapsed .sidebar-label { display:none; }
  .app-sidebar.collapsed .sidebar-item { justify-content:center; padding:10px; }
  .app-sidebar.collapsed .sidebar-nav { padding:10px 6px 110px; }
  .app-sidebar.collapsed .sidebar-bottom { padding:8px 6px 12px; }
  .app-sidebar.collapsed .sidebar-divider { margin:6px 8px; }
  .app-sidebar.collapsed .sidebar-toggle { right:-14px; }
  .app-sidebar.collapsed + header { margin-left:56px; }
  .app-sidebar.collapsed ~ main#main-content { margin-left:56px; }

  /* ── SLIM HEADER (utility bar) ───────────────────── */
  header {
    position:relative; z-index:10; padding:10px 28px;
    display:flex; align-items:center; justify-content:flex-end;
    border-bottom:1px solid var(--border);
    background:rgba(14,14,18,0.92); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
    margin-left:220px; gap:8px; min-height:48px;
    transition:margin-left .25s cubic-bezier(.4,0,.2,1);
  }
  .header-right { display:flex; align-items:center; gap:8px; }
  .notif-bell {
    position:relative; cursor:pointer; padding:7px 10px;
    border-radius:8px; border:1px solid var(--border); background:var(--surface);
    transition:all .18s; font-size:1rem; line-height:1;
  }
  .notif-bell:hover { border-color:var(--muted); background:var(--surface2); }
  .notif-badge {
    position:absolute; top:-4px; right:-4px; background:var(--danger); color:white;
    font-size:0.58rem; font-family:'Bricolage Grotesque',sans-serif; font-weight:800;
    min-width:17px; height:17px; padding:0 4px; border-radius:10px;
    display:none; align-items:center; justify-content:center;
    border:2px solid var(--bg);
  }
  .add-btn {
    font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:0.82rem;
    padding:8px 18px; background:linear-gradient(135deg,#f0d850 0%,#d4880e 45%,#d4880e 100%); color:#1a0a00;
    border:none; border-radius:9px; cursor:pointer; transition:all .18s;
    display:flex; align-items:center; gap:5px;
  }
  .add-btn:hover { background:linear-gradient(135deg,#f5e060 0%,#e09820 45%,#c07010 100%); transform:translateY(-1px); box-shadow:0 4px 16px rgba(212,136,14,0.4); }
  .settings-btn, .theme-btn {
    font-size:0.95rem; padding:7px 10px; background:var(--surface);
    border:1px solid var(--border); border-radius:8px; cursor:pointer;
    transition:all .18s; line-height:1;
  }
  .settings-btn:hover, .theme-btn:hover { border-color:var(--muted); background:var(--surface2); }
  /* Hide old nav buttons in header — kept for JS compat */
  header .nav-btn { display:none !important; }
  /* nav-btn styles used by archive tabs */
  .nav-btn {
    font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:0.8rem;
    padding:7px 15px; background:transparent; color:var(--muted);
    border:1px solid transparent; border-radius:8px; cursor:pointer; transition:all .18s;
  }
  .nav-btn:hover { color:var(--text); background:var(--surface); border-color:var(--border); }
  .nav-btn.active { background:var(--surface2); color:var(--text); border-color:var(--border); }

  /* ── VIEWS ───────────────────────────────────────── */
  main#main-content { margin-left:220px; transition:margin-left .25s cubic-bezier(.4,0,.2,1); }
  .view { display:none; position:relative; z-index:5; }
  #viewDashboard, #viewArchive { height:calc(var(--vph) - 48px); overflow-y:auto; overflow-x:hidden; }
  #viewTime { height:calc(var(--vph) - 48px); overflow-y:auto; overflow-x:hidden; }
  #viewActivity { height:calc(var(--vph) - 48px); overflow-y:auto; overflow-x:hidden; }
  #viewForecast { height:calc(var(--vph) - 48px); overflow-y:auto; overflow-x:hidden; }
  #viewBoard, #viewSales {
    height:calc(var(--vph) - 48px);
    overflow-x:auto;
    overflow-y:auto;
  }
  #viewHelp { height:calc(var(--vph) - 48px); }
  .view.active { display:block; }

  /* ── BOARD ───────────────────────────────────────── */
  .board-wrapper { padding:24px 32px 16px; min-height:100%; }
  .sales-wrapper-inner { padding-bottom:24px; }
  .board { display:flex; gap:18px; min-width:max-content; align-items:flex-start; }
  .column { width:295px; flex-shrink:0; display:flex; flex-direction:column; gap:10px; align-self:stretch; }
  .col-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:11px 15px; background:var(--surface);
    border:1px solid var(--border); border-radius:12px;
    position:relative; overflow:hidden;
  }
  .col-header::before {
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background:var(--col-color, var(--border));
  }
  .col-title {
    font-family:'Bricolage Grotesque',sans-serif; font-weight:700;
    font-size:0.78rem; letter-spacing:1.2px; text-transform:uppercase;
    cursor:text;
  }
  .col-title:hover { color:var(--accent); }
  .col-count {
    font-family:'Bricolage Grotesque',sans-serif; font-weight:700;
    font-size:0.72rem; color:var(--muted);
    background:var(--surface2); padding:2px 9px; border-radius:20px;
    border:1px solid var(--border); cursor:default;
  }
  .col-header:hover .col-count, .sales-col-header:hover .col-count {
    background:rgba(240,224,96,0.12); border-color:rgba(240,224,96,0.35); color:var(--accent);
    transition:background 0.15s, border-color 0.15s, color 0.15s;
  }

  /* ── Column summary tooltip ── */
  #col-tooltip {
    position:fixed; z-index:99999; pointer-events:none;
    width:248px; padding:14px 16px;
    background:rgba(16,16,22,0.97); border:1px solid rgba(255,255,255,0.08);
    border-radius:14px; box-shadow:0 16px 48px rgba(0,0,0,0.6);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    opacity:0; transform:translateY(5px) scale(0.97);
    transition:opacity 0.14s ease, transform 0.14s ease;
    font-family:inherit; font-size:0.78rem; color:#bbb; line-height:1.5;
  }
  #col-tooltip.visible { opacity:1; transform:translateY(0) scale(1); }
  #col-tooltip .ctt-header {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:11px;
  }
  #col-tooltip .ctt-title {
    font-size:0.72rem; font-weight:700; letter-spacing:1.1px;
    text-transform:uppercase; color:var(--accent);
  }
  #col-tooltip .ctt-count {
    font-size:0.72rem; font-weight:700; color:#666;
    background:rgba(255,255,255,0.05); padding:1px 8px;
    border-radius:20px; border:1px solid rgba(255,255,255,0.07);
  }
  #col-tooltip .ctt-row {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:6px; color:#888;
  }
  #col-tooltip .ctt-row .ctt-label { font-size:0.72rem; }
  #col-tooltip .ctt-row .ctt-val { font-weight:700; color:#ddd; font-size:0.82rem; }
  #col-tooltip .ctt-row .ctt-val.green { color:#4ade80; }
  #col-tooltip .ctt-row .ctt-val.amber { color:#fb923c; }
  #col-tooltip .ctt-row .ctt-val.red   { color:#f87171; }
  #col-tooltip .ctt-divider { height:1px; background:rgba(255,255,255,0.06); margin:9px 0; }
  #col-tooltip .ctt-progress-wrap { margin:8px 0 4px; }
  #col-tooltip .ctt-progress-label {
    display:flex; justify-content:space-between;
    font-size:0.7rem; color:#666; margin-bottom:5px;
  }
  #col-tooltip .ctt-progress-bar {
    height:5px; border-radius:3px; background:rgba(255,255,255,0.08); overflow:hidden;
  }
  #col-tooltip .ctt-progress-fill { height:100%; border-radius:3px; }
  #col-tooltip .ctt-pips { display:flex; gap:5px; flex-wrap:wrap; margin-top:9px; }
  #col-tooltip .ctt-pip {
    font-size:0.68rem; font-weight:600; padding:2px 8px;
    border-radius:20px; border:1px solid transparent;
  }
  #col-tooltip .ctt-pip.high   { background:rgba(239,68,68,0.12);  color:#f87171; border-color:rgba(239,68,68,0.2);  }
  #col-tooltip .ctt-pip.medium { background:rgba(251,146,60,0.12); color:#fb923c; border-color:rgba(251,146,60,0.2); }
  #col-tooltip .ctt-pip.low    { background:rgba(74,222,128,0.12); color:#4ade80; border-color:rgba(74,222,128,0.2); }
  #col-tooltip .ctt-empty { font-size:0.74rem; color:#444; text-align:center; padding:4px 0; }
  body.light-mode #col-tooltip {
    background:rgba(255,255,255,0.98); border-color:rgba(0,0,0,0.09);
    box-shadow:0 16px 48px rgba(0,0,0,0.15); color:#555;
  }
  body.light-mode #col-tooltip .ctt-title { color:var(--accent); }
  body.light-mode #col-tooltip .ctt-count { background:rgba(0,0,0,0.04); border-color:rgba(0,0,0,0.08); color:#888; }
  body.light-mode #col-tooltip .ctt-row { color:#888; }
  body.light-mode #col-tooltip .ctt-row .ctt-val { color:#111; }
  body.light-mode #col-tooltip .ctt-divider { background:rgba(0,0,0,0.06); }
  body.light-mode #col-tooltip .ctt-progress-bar { background:rgba(0,0,0,0.07); }
  body.light-mode #col-tooltip .ctt-empty { color:#bbb; }
  .col-pipeline    .col-header { --col-color:#5590b8; }
  .col-backlog     .col-header { --col-color:#6e6e90; }
  .col-design      .col-header { --col-color:#7a78a0; }
  .col-development .col-header { --col-color:var(--accent); }
  .col-review      .col-header { --col-color:var(--warn); }
  .col-done        .col-header { --col-color:#3db870; }
  .drop-zone { min-height:300px; flex:1; border-radius:12px; border:2px dashed transparent; transition:border-color .15s, background .15s; display:flex; flex-direction:column; gap:8px; padding-bottom:40px; }
  .drop-zone.drag-over { border-color:rgba(240,224,96,0.3); background:rgba(240,224,96,0.02); }
  .column.drag-over { background:rgba(240,224,96,0.03); border-radius:16px; }
  .drop-placeholder { height:6px; background:var(--accent); border-radius:3px; margin:2px 0; opacity:0.9; pointer-events:none; box-shadow:0 0 8px rgba(240,224,96,0.5); }

  /* ── CARDS ───────────────────────────────────────── */
  .card {
    background:var(--card); border:1px solid var(--border); border-radius:14px;
    padding:14px 15px; cursor:grab; transition:all .18s;
    animation:cardIn .25s ease; position:relative; overflow:visible;
    z-index:1;
  }
  .card::after {
    content:''; position:absolute; inset:0; border-radius:14px;
    background:linear-gradient(135deg, rgba(255,255,255,0.015) 0%, transparent 60%);
    pointer-events:none; overflow:hidden;
  }
  .card:active { cursor:grabbing; }
  .card:hover {
    border-color:var(--muted); transform:translateY(-3px);
    box-shadow:0 12px 32px rgba(0,0,0,0.45);
    z-index:2;
  }
  /* Card with open dots menu must sit above all other cards */
  .card:has(.card-dots-menu.open) {
    z-index:100 !important;
    transform:none;
  }
  @keyframes cardIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
  .card.stale      { border-color:rgba(240,80,96,0.5)!important;  background:rgba(240,80,96,0.06); }
  .card.warn-stale { border-color:rgba(240,160,48,0.5)!important; background:rgba(240,160,48,0.05); }
  .card.overdue    { border-color:rgba(240,80,96,0.5)!important;  background:rgba(240,80,96,0.07); }
  .card.dual {
    border-left:2px solid transparent;
    border-image:linear-gradient(to bottom,#d4880e 50%,#d4880e 50%) 1;
    background:linear-gradient(135deg,rgba(212,136,14,0.04) 0%,rgba(240,224,96,0.04) 100%);
  }
  .card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:8px; overflow:visible; position:relative; }
  .card-title { font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:0.95rem; line-height:1.35; flex:1; }
  .card-actions { display:flex; gap:4px; opacity:0; transition:opacity .15s; flex-shrink:0; overflow:visible; align-items:center; position:relative; z-index:10; }
  .card:hover .card-actions { opacity:1; }



  /* ══════════════════════════════════════════════════
     HELP CENTRE VIEW
  ══════════════════════════════════════════════════ */
  #viewHelp {
    height: calc(var(--vph) - 48px);
    overflow: hidden;
    display: none;
  }
  #viewHelp.active { display: flex; }

  .hc-layout {
    display: flex;
    height: 100%;
    width: 100%;
  }

  /* ── Sidebar ── */
  .hc-sidebar {
    width: 260px;
    min-width: 260px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .hc-sidebar-top {
    padding: 20px 18px 14px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .hc-sidebar-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800; font-size: 1rem;
    margin-bottom: 12px;
    color: var(--text);
  }
  .hc-search {
    width: 100%; box-sizing: border-box;
    padding: 8px 12px; border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text); font-size: 0.8rem;
    font-family: inherit; outline: none;
    transition: border-color .15s;
  }
  .hc-search:focus { border-color: var(--purple); }
  .hc-nav { flex: 1; overflow-y: auto; padding: 10px 0; }
  .hc-cat-btn {
    display: flex; align-items: center; gap: 9px;
    width: 100%; padding: 9px 18px;
    background: transparent; border: none;
    color: var(--muted); font-size: 0.82rem;
    font-weight: 600; cursor: pointer;
    text-align: left; transition: all .12s;
    border-left: 2px solid transparent;
  }
  .hc-cat-btn:hover { background: var(--surface2); color: var(--text); }
  .hc-cat-btn.active {
    background: rgba(212,136,14,0.08);
    color: var(--purple);
    border-left-color: var(--purple);
    font-weight: 700;
  }
  .hc-cat-count {
    margin-left: auto;
    font-size: 0.68rem; font-weight: 700;
    background: var(--surface2); color: var(--muted);
    padding: 1px 7px; border-radius: 20px;
    border: 1px solid var(--border);
  }
  .hc-cat-btn.active .hc-cat-count {
    background: rgba(212,136,14,0.12);
    color: var(--purple);
    border-color: rgba(212,136,14,0.25);
  }
  .hc-sidebar-footer {
    padding: 14px 18px;
    border-top: 1px solid var(--border);
    font-size: 0.72rem; color: var(--muted);
    flex-shrink: 0;
  }

  /* ── Main content ── */
  .hc-main {
    flex: 1;
    overflow-y: auto;
    padding: 32px 40px;
    max-width: 1200px;
  }

  /* ── Category header ── */
  .hc-cat-header {
    margin-bottom: 28px;
  }
  .hc-cat-label {
    font-size: 0.7rem; font-weight: 800; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
  }
  .hc-cat-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800; font-size: 1.6rem;
    color: var(--text); margin-bottom: 8px;
  }
  .hc-cat-desc {
    font-size: 0.85rem; color: var(--muted); line-height: 1.7;
  }

  /* ── Article list ── */
  .hc-article-list {
    display: flex; flex-direction: column; gap: 10px;
  }
  .hc-article-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 20px;
    cursor: pointer;
    transition: all .15s;
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  }
  .hc-article-card:hover {
    border-color: rgba(212,136,14,0.4);
    background: rgba(212,136,14,0.03);
    transform: translateX(3px);
  }
  .hc-article-card-title {
    font-weight: 700; font-size: 0.9rem;
    color: var(--text); margin-bottom: 5px;
  }
  .hc-article-card-preview {
    font-size: 0.78rem; color: var(--muted);
    line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .hc-article-card-arrow {
    color: var(--muted); font-size: 1rem; flex-shrink: 0; margin-top: 2px;
  }

  /* ── Article reader ── */
  .hc-article-view { display: none; }
  .hc-article-view.active { display: block; }
  .hc-cat-list-view { display: block; }
  .hc-cat-list-view.hidden { display: none; }

  .hc-back-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: none; color: var(--muted);
    font-size: 0.8rem; font-weight: 700; cursor: pointer;
    padding: 0; margin-bottom: 20px; transition: color .12s;
  }
  .hc-back-btn:hover { color: var(--purple); }
  .hc-article-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800; font-size: 1.5rem;
    color: var(--text); margin-bottom: 6px;
  }
  .hc-article-cat-tag {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.7rem; font-weight: 700; color: var(--muted);
    background: var(--surface2); padding: 3px 10px;
    border-radius: 20px; border: 1px solid var(--border);
    margin-bottom: 24px;
  }
  .hc-article-body {
    font-size: 0.88rem; line-height: 1.85;
    color: var(--text); max-width: 680px;
  }
  .hc-article-body p { margin: 0 0 14px; }
  .hc-article-body strong { color: var(--text); font-weight: 700; }
  .hc-article-body code {
    background: var(--surface2); padding: 1px 7px;
    border-radius: 5px; font-size: 0.82rem;
    border: 1px solid var(--border); font-family: monospace;
  }
  .hc-article-body ul {
    padding-left: 20px; margin: 0 0 14px;
  }
  .hc-article-body ul li { margin-bottom: 6px; }
  .hc-article-body .tip-box {
    background: rgba(212,136,14,0.06);
    border: 1px solid rgba(212,136,14,0.2);
    border-left: 3px solid var(--purple);
    border-radius: 8px; padding: 12px 16px;
    margin: 16px 0; font-size: 0.84rem;
  }
  .hc-article-body .warn-box {
    background: rgba(240,160,48,0.07);
    border: 1px solid rgba(240,160,48,0.25);
    border-left: 3px solid var(--warn);
    border-radius: 8px; padding: 12px 16px;
    margin: 16px 0; font-size: 0.84rem;
  }
  .hc-article-body .success-box {
    background: rgba(96,240,144,0.06);
    border: 1px solid rgba(96,240,144,0.2);
    border-left: 3px solid var(--green);
    border-radius: 8px; padding: 12px 16px;
    margin: 16px 0; font-size: 0.84rem;
  }
  .hc-article-body h3 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700; font-size: 0.95rem;
    color: var(--text); margin: 20px 0 8px;
  }
  .hc-article-nav {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 40px; padding-top: 20px;
    border-top: 1px solid var(--border);
  }
  .hc-article-nav-btn {
    display: flex; align-items: center; gap: 6px;
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: 8px; padding: 8px 14px;
    font-size: 0.78rem; font-weight: 700;
    color: var(--muted); cursor: pointer; transition: all .15s;
  }
  .hc-article-nav-btn:hover { color: var(--purple); border-color: rgba(212,136,14,0.4); }

  /* ── Home / search results ── */
  .hc-home { display: flex; flex-direction: column; gap: 28px; }
  .hc-home-hero {
    background: linear-gradient(135deg, rgba(212,136,14,0.12) 0%, rgba(212,136,14,0.04) 100%);
    border: 1px solid rgba(212,136,14,0.2);
    border-radius: 16px; padding: 28px 32px;
  }
  .hc-home-hero-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800; font-size: 1.4rem;
    color: var(--text); margin-bottom: 8px;
  }
  .hc-home-hero-sub {
    font-size: 0.85rem; color: var(--muted); line-height: 1.6;
  }
  .hc-home-cats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
  }
  .hc-home-cat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px; padding: 18px 20px;
    cursor: pointer; transition: all .15s;
  }
  .hc-home-cat-card:hover {
    border-color: rgba(212,136,14,0.4);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0,0,0,0.25);
  }
  .hc-home-cat-icon { font-size: 1.5rem; margin-bottom: 8px; }
  .hc-home-cat-name {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700; font-size: 0.88rem;
    color: var(--text); margin-bottom: 4px;
  }
  .hc-home-cat-count { font-size: 0.72rem; color: var(--muted); }

  .hc-search-results { display: flex; flex-direction: column; gap: 8px; }
  .hc-search-result-item {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; padding: 14px 18px;
    cursor: pointer; transition: all .15s;
  }
  .hc-search-result-item:hover {
    border-color: rgba(212,136,14,0.4);
    background: rgba(212,136,14,0.03);
  }
  .hc-search-result-cat {
    font-size: 0.68rem; font-weight: 700; color: var(--purple);
    text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px;
  }
  .hc-search-result-title {
    font-weight: 700; font-size: 0.87rem; color: var(--text); margin-bottom: 4px;
  }
  .hc-search-result-preview {
    font-size: 0.76rem; color: var(--muted); line-height: 1.5;
  }
  mark { background: rgba(240,224,96,0.35); color: var(--text); border-radius: 2px; padding: 0 1px; }
  /* ── WIN/LOSS ANALYSIS PANEL ─────────────────────────── */
  .wl-analysis-panel {
    background:var(--surface); border:1px solid var(--border);
    border-radius:16px; padding:24px; margin-bottom:28px;
  }
  .wl-analysis-header {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:16px; flex-wrap:wrap; gap:10px;
  }
  .wl-analysis-title {
    font-family:'Bricolage Grotesque',sans-serif;
    font-weight:800; font-size:1.05rem;
    display:flex; align-items:center; gap:10px;
  }
  .wl-run-btn {
    display:flex; align-items:center; gap:8px;
    padding:9px 18px; border-radius:10px; border:none;
    background:linear-gradient(135deg,#7c3aed,#a855f7);
    color:#fff; font-size:0.82rem; font-weight:700;
    cursor:pointer; transition:all .15s;
    box-shadow:0 2px 12px rgba(212,136,14,0.35);
  }
  .wl-run-btn:hover { opacity:0.88; transform:translateY(-1px); }
  .wl-run-btn:disabled { opacity:0.5; cursor:not-allowed; transform:none; }
  .wl-loading {
    display:flex; align-items:center; gap:10px;
    padding:20px 0; color:var(--muted); font-size:0.85rem;
  }
  .wl-results { display:flex; flex-direction:column; gap:16px; }
  .wl-section-title {
    font-size:0.68rem; font-weight:800; letter-spacing:1.5px;
    text-transform:uppercase; color:var(--muted); margin-bottom:8px;
  }
  .wl-stats-row {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:10px;
    margin-bottom:4px;
  }
  .wl-stat {
    background:var(--surface2); border:1px solid var(--border);
    border-radius:10px; padding:12px 14px; text-align:center;
  }
  .wl-stat-num {
    font-family:'Bricolage Grotesque',sans-serif;
    font-size:1.5rem; font-weight:800; line-height:1;
  }
  .wl-stat-label { font-size:0.7rem; color:var(--muted); margin-top:4px; }
  .wl-insight-card {
    background:var(--surface2); border:1px solid var(--border);
    border-radius:10px; padding:13px 15px;
    font-size:0.82rem; line-height:1.65; color:var(--text);
    border-left:3px solid var(--purple);
  }
  .wl-insight-card.positive { border-left-color:var(--green); }
  .wl-insight-card.warning  { border-left-color:var(--warn); }
  .wl-insight-card.tip      { border-left-color:var(--accent); }
  .wl-no-key {
    text-align:center; padding:20px; color:var(--muted);
    font-size:0.83rem; line-height:1.7;
  }
  .wl-timestamp {
    font-size:0.7rem; color:var(--muted); margin-top:10px; text-align:right;
  }
  /* ── CARD DOTS MENU ─────────────────────────────── */
  .card-dots-btn {
    width:28px; height:28px; border-radius:7px;
    border:1px solid transparent; background:transparent;
    color:var(--muted); cursor:pointer; font-size:1.1rem;
    display:flex; align-items:center; justify-content:center;
    transition:all .15s; flex-shrink:0; line-height:1;
  }
  .card-dots-btn:hover {
    background:var(--surface2); border-color:var(--border); color:var(--text);
  }
  .card-dots-menu {
    position:absolute; top:100%; right:0; margin-top:4px;
    background:var(--surface); border:1px solid var(--border);
    border-radius:11px; box-shadow:0 8px 32px rgba(0,0,0,0.35);
    min-width:190px; z-index:9999; overflow:hidden;
    opacity:0; transform:translateY(-6px) scale(0.97);
    pointer-events:none;
    transition:opacity .12s, transform .12s;
  }
  .card-dots-menu.open {
    opacity:1; transform:translateY(0) scale(1);
    pointer-events:all;
  }
  .card-dots-item {
    display:flex; align-items:center; gap:9px;
    padding:9px 14px; font-size:0.8rem; font-weight:600;
    color:var(--text); cursor:pointer; border:none;
    background:transparent; width:100%; text-align:left;
    transition:background .1s;
  }
  .card-dots-item:hover { background:var(--surface2); }
  .card-dots-item.danger { color:var(--danger); }
  .card-dots-item.danger:hover { background:rgba(240,80,96,0.08); }
  .card-dots-item.claude { color:var(--purple); }
  .card-dots-item.claude:hover { background:rgba(212,136,14,0.08); }
  .card-dots-item.green { color:var(--green); }
  .card-dots-item.green:hover { background:rgba(96,240,144,0.08); }
  .card-dots-divider { height:1px; background:var(--border); margin:3px 0; }
  .card-dots-wrap { position:relative; }
  .card-btn {
    background:var(--surface2); border:1px solid var(--border); color:var(--muted);
    font-size:0.72rem; padding:4px 8px; border-radius:6px; cursor:pointer;
    transition:all .15s; font-family:'Space Grotesk',sans-serif; font-weight:500;
  }
  .card-btn:hover { color:var(--text); border-color:var(--muted); background:var(--surface); }
  .card-btn.del:hover { color:var(--danger); border-color:rgba(240,80,96,0.5); background:rgba(240,80,96,0.08); }
  .card-btn.archive:hover { color:var(--green); border-color:rgba(96,240,144,0.5); background:rgba(96,240,144,0.06); }
  .card-desc { font-size:0.78rem; color:var(--muted); line-height:1.6; margin-bottom:10px; }
  .card-clamp3 {
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
    overflow:hidden; text-overflow:ellipsis;
  }

  /* progress bar */
  .progress-wrap { margin-bottom:10px; }
  .progress-label { display:flex; justify-content:space-between; font-size:0.72rem; color:var(--muted); margin-bottom:5px; font-weight:500; }
  .progress-track { height:4px; background:var(--surface2); border-radius:4px; overflow:hidden; }
  .progress-fill  { height:100%; border-radius:4px; transition:width .4s ease; }

  /* badges / tags */
  .due-date    { font-size:0.7rem; padding:3px 9px; border-radius:20px; font-weight:600; white-space:nowrap; }
  .due-ok      { background:rgba(96,240,144,0.1); color:#70e0a0; border:1px solid rgba(96,240,144,0.25); }
  .due-soon    { background:rgba(240,160,48,0.12); color:#f0b060; border:1px solid rgba(240,160,48,0.3); }
  .due-overdue { background:rgba(240,80,96,0.12);  color:#f08090; border:1px solid rgba(240,80,96,0.3); }
  .card-meta { display:flex; align-items:center; flex-wrap:wrap; gap:5px; margin-top:9px; }
  .tag { font-size:0.7rem; letter-spacing:0.5px; text-transform:uppercase; padding:3px 9px; border-radius:20px; font-weight:700; }
  .priority-high   { background:rgba(240,80,96,0.12);  color:#f08090; border:1px solid rgba(240,80,96,0.3); }
  .priority-medium { background:rgba(240,160,48,0.12); color:#f0b060; border:1px solid rgba(240,160,48,0.3); }
  .priority-low    { background:rgba(96,192,240,0.12); color:#80d0f0; border:1px solid rgba(96,192,240,0.3); }
  .stale-badge { font-size:0.7rem; padding:3px 9px; border-radius:20px; font-weight:600; display:none; }
  .stale-badge.show-danger { display:inline-block; background:rgba(240,80,96,0.12);  color:#f08090; border:1px solid rgba(240,80,96,0.3); }
  .stale-badge.show-warn   { display:inline-block; background:rgba(240,160,48,0.12); color:#f0b060; border:1px solid rgba(240,160,48,0.3); }
  .dual-badge { font-size:0.7rem; padding:3px 10px; border-radius:20px; font-weight:600; background:linear-gradient(90deg,rgba(212,136,14,0.18),rgba(240,224,96,0.18)); color:#d0b0f8; border:1px solid rgba(212,136,14,0.3); white-space:nowrap; }
  .risk-flag {
    display:inline-flex; align-items:center; gap:3px;
    font-size:0.68rem; font-weight:800; padding:2px 7px;
    border-radius:5px; border:1px solid;
  }
  .risk-flag.high {
    background:rgba(240,80,96,0.1); color:var(--danger);
    border-color:rgba(240,80,96,0.3);
  }
  .risk-flag.medium {
    background:rgba(240,140,40,0.1); color:#f08c28;
    border-color:rgba(240,140,40,0.3);
  }
  .risk-flag.stalling {
    background:rgba(212,136,14,0.08); color:var(--purple);
    border-color:rgba(212,136,14,0.25);
  }
  .risk-flag { position:relative; cursor:default; }
  .risk-flag::after {
    content: attr(data-tip);
    position:absolute; bottom:calc(100% + 5px); left:50%; transform:translateX(-50%);
    background:rgba(10,10,20,0.92); color:#fff; font-size:0.68rem; font-weight:600;
    padding:4px 8px; border-radius:6px; white-space:nowrap; pointer-events:none;
    opacity:0; transition:opacity .15s; z-index:999;
  }
  .risk-flag:hover::after { opacity:1; }
  /* Follow-up email modal */
  .email-modal-overlay {
    position:fixed;inset:0;z-index:8500;background:rgba(0,0,0,0.5);
    display:none;align-items:center;justify-content:center;
  }
  .email-modal-overlay.open { display:flex; }
  .email-modal {
    background:var(--surface);border:1px solid var(--border);border-radius:18px;
    padding:28px;max-width:560px;width:95%;box-shadow:0 24px 64px rgba(0,0,0,0.35);
    max-height:90vh;overflow-y:auto;
  }
  .email-modal-title {
    font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.05rem;
    color:var(--text);margin-bottom:4px;display:flex;align-items:center;gap:8px;
  }
  .email-modal-sub { font-size:0.78rem;color:var(--muted);margin-bottom:18px; }
  .email-output {
    background:var(--surface2);border:1px solid var(--border);border-radius:12px;
    padding:16px;font-size:0.82rem;color:var(--text);line-height:1.7;
    white-space:pre-wrap;min-height:120px;
  }
  .email-loading {
    display:flex;align-items:center;gap:10px;color:var(--muted);
    font-size:0.82rem;padding:24px 0;
  }
  .email-loading-dots span {
    display:inline-block;width:6px;height:6px;border-radius:50%;
    background:var(--purple);animation:edot 1.2s infinite;margin:0 2px;
  }
  .email-loading-dots span:nth-child(2){animation-delay:.2s}
  .email-loading-dots span:nth-child(3){animation-delay:.4s}
  @keyframes edot{0%,80%,100%{opacity:.2}40%{opacity:1}}
  .email-actions { display:flex;gap:8px;margin-top:14px;justify-content:flex-end; }
  .email-copy-btn {
    padding:8px 18px;border-radius:9px;border:1px solid var(--border);
    background:var(--surface2);color:var(--text);font-size:0.8rem;
    font-weight:700;cursor:pointer;
  }
  .email-copy-btn:hover { border-color:rgba(212,136,14,0.35);color:#d4880e; }
  .email-regen-btn {
    padding:8px 18px;border-radius:9px;border:none;
    background:linear-gradient(135deg,#f0d850 0%,#d4880e 45%,#d4880e 100%);color:#1a0a00;font-size:0.8rem;
    font-weight:700;cursor:pointer;
  }
  .email-close-btn {
    padding:8px 18px;border-radius:9px;border:1px solid var(--border);
    background:transparent;color:var(--muted);font-size:0.8rem;cursor:pointer;
  }
  .snoozed-badge { display:inline-flex; align-items:center; gap:3px; font-size:0.68rem; padding:2px 8px; border-radius:20px; background:rgba(104,104,160,0.15); color:var(--muted); border:1px solid rgba(104,104,160,0.25); }

  /* card links */
  .card-links { display:flex; flex-wrap:wrap; gap:5px; margin-top:9px; }
  .card-link {
    display:inline-flex; align-items:center; gap:4px; font-size:0.7rem; padding:4px 10px;
    border-radius:20px; font-weight:600; text-decoration:none; transition:all .15s;
    white-space:nowrap; border:1px solid transparent; cursor:pointer;
  }
  .card-link.figma-desktop { background:rgba(212,136,14,0.1); color:#c090ff; border-color:rgba(212,136,14,0.3); }
  .card-link.figma-desktop:hover { background:rgba(212,136,14,0.22); border-color:rgba(212,136,14,0.6); }
  .card-link.figma-mobile  { background:rgba(96,192,240,0.1);  color:#80d0f0; border-color:rgba(96,192,240,0.3); }
  .card-link.figma-mobile:hover  { background:rgba(96,192,240,0.22);  border-color:rgba(96,192,240,0.6); }
  .card-link.dev-link      { background:rgba(240,224,96,0.08);  color:#d0c050; border-color:rgba(240,224,96,0.3); }
  .card-link.dev-link:hover      { background:rgba(240,224,96,0.2);   border-color:rgba(240,224,96,0.6); }
  .card-link.docs-link     { background:rgba(96,240,144,0.08);  color:#60d080; border-color:rgba(96,240,144,0.3); }
  .card-link.docs-link:hover     { background:rgba(96,240,144,0.2);   border-color:rgba(96,240,144,0.6); }
  .card-link.timeline-link { background:rgba(240,160,48,0.08);  color:#e09840; border-color:rgba(240,160,48,0.3); }
  .card-link.timeline-link:hover { background:rgba(240,160,48,0.2);   border-color:rgba(240,160,48,0.6); }
  .card-link.pm-link       { background:rgba(240,80,96,0.08);   color:#f08090; border-color:rgba(240,80,96,0.3); }
  .card-link.pm-link:hover       { background:rgba(240,80,96,0.2);    border-color:rgba(240,80,96,0.6); }
  .card-link.lc-0 { background:rgba(212,136,14,0.1);  color:#c090ff; border-color:rgba(212,136,14,0.3); }
  .card-link.lc-0:hover { background:rgba(212,136,14,0.22); border-color:rgba(212,136,14,0.6); }
  .card-link.lc-1 { background:rgba(96,192,240,0.1);  color:#80d0f0; border-color:rgba(96,192,240,0.3); }
  .card-link.lc-1:hover { background:rgba(96,192,240,0.22);  border-color:rgba(96,192,240,0.6); }
  .card-link.lc-2 { background:rgba(240,224,96,0.08); color:#d0c050; border-color:rgba(240,224,96,0.3); }
  .card-link.lc-2:hover { background:rgba(240,224,96,0.2);  border-color:rgba(240,224,96,0.6); }
  .card-link.lc-3 { background:rgba(96,240,144,0.08); color:#60d080; border-color:rgba(96,240,144,0.3); }
  .card-link.lc-3:hover { background:rgba(96,240,144,0.2);  border-color:rgba(96,240,144,0.6); }
  .card-link.lc-4 { background:rgba(240,160,48,0.08); color:#e09840; border-color:rgba(240,160,48,0.3); }
  .card-link.lc-4:hover { background:rgba(240,160,48,0.2);  border-color:rgba(240,160,48,0.6); }
  body.light-mode .card-link.lc-0 { background:rgba(112,32,192,0.1);  color:#5a18a0; border-color:rgba(112,32,192,0.35); }
  body.light-mode .card-link.lc-1 { background:rgba(26,122,176,0.1);  color:#0d5a8a; border-color:rgba(26,122,176,0.35); }
  body.light-mode .card-link.lc-2 { background:rgba(184,152,0,0.1);   color:#706000; border-color:rgba(184,152,0,0.35); }
  body.light-mode .card-link.lc-3 { background:rgba(20,122,56,0.1);   color:#0a6028; border-color:rgba(20,122,56,0.35); }
  body.light-mode .card-link.lc-4 { background:rgba(176,88,0,0.1);    color:#7a3c00; border-color:rgba(176,88,0,0.35); }

  /* ── NOTIFICATIONS ───────────────────────────────── */
  .notif-panel {
    position:fixed; top:56px; right:16px; width:460px;
    background:var(--surface); border:1px solid var(--border); border-radius:16px;
    z-index:300; display:none; box-shadow:0 24px 64px rgba(0,0,0,0.7);
    animation:slideIn .2s ease;
  }
  .notif-panel.open { display:block; }
  @keyframes slideIn { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
  .notif-head {
    padding:14px 18px; border-bottom:1px solid var(--border);
    font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:0.85rem;
    letter-spacing:0.5px; display:flex; justify-content:space-between; align-items:center;
  }
  .notif-head-close { color:var(--muted); font-size:0.85rem; cursor:pointer; transition:color .15s; line-height:1; padding:4px 8px; border-radius:6px; }
  .notif-head-close:hover { color:var(--text); background:var(--surface2); }
  .notif-list { max-height:65vh; overflow-y:auto; overflow-x:visible; padding:10px; display:flex; flex-direction:column; gap:6px; }
  .notif-item { padding:12px 14px; border-radius:10px; font-size:0.81rem; line-height:1.6; border:1px solid transparent; }
  .notif-item.critical { background:rgba(240,80,96,0.08);  border-color:rgba(240,80,96,0.22); color:#f0b0b8; }
  .notif-item.reminder { background:rgba(96,192,240,0.08);  border-color:rgba(96,192,240,0.25); color:#a0d8f0; }
  .notif-item.warning  { background:rgba(240,160,48,0.08); border-color:rgba(240,160,48,0.22); color:#f0c080; }
  .notif-item strong { color:var(--text); font-family:'Bricolage Grotesque',sans-serif; }
  .notif-empty { color:var(--muted); text-align:center; padding:32px 20px; font-size:0.82rem; }
  .notif-item-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .notif-item-text { flex:1; }
  .snooze-wrap { flex-shrink:0; position:relative; }
  .snooze-btn {
    background:transparent; border:1px solid rgba(255,255,255,0.18); color:rgba(255,255,255,0.45);
    font-size:0.72rem; padding:4px 10px; border-radius:6px; cursor:pointer;
    font-family:'Space Grotesk',sans-serif; transition:all .15s; white-space:nowrap;
  }
  .snooze-btn:hover { border-color:rgba(255,255,255,0.5); color:rgba(255,255,255,0.85); background:rgba(255,255,255,0.06); }
  .snooze-dropdown {
    position:fixed; background:var(--surface2); border:1px solid var(--border); border-radius:10px;
    overflow:hidden; z-index:9999; min-width:130px;
    box-shadow:0 12px 36px rgba(0,0,0,0.6); display:none;
  }
  .snooze-dropdown.open { display:block; }
  .snooze-opt {
    display:block; width:100%; padding:10px 16px; text-align:left;
    background:transparent; border:none; color:var(--text);
    font-size:0.8rem; font-family:'Space Grotesk',sans-serif; cursor:pointer;
    transition:background .15s; border-bottom:1px solid var(--border); font-weight:500;
  }
  .snooze-opt:last-child { border-bottom:none; }
  .snooze-opt:hover { background:var(--border); }

  /* ── MODALS ──────────────────────────────────────── */
  .modal-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,0.8);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); z-index:200; display:none;
    align-items:flex-start; justify-content:center; overflow-y:auto; padding:20px 0; box-sizing:border-box;
  }
  .modal-overlay.open { display:flex; }
  .modal {
    background:var(--surface); border:1px solid var(--border); border-radius:20px;
    padding:32px; width:700px; max-width:95vw; animation:modalIn .25s ease;
    max-height:90vh; overflow-y:auto;
    box-shadow:0 32px 80px rgba(0,0,0,0.6);
  }
  /* Header row — title left, X right — shared by modal and deal-modal */
  .mob-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
  }
  .mob-modal-header h2 {
    margin-bottom: 0 !important;
  }
  .mob-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--muted);
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
  }
  .mob-modal-close:hover {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
  }
  @keyframes modalIn { from{opacity:0;transform:translateY(16px) scale(.98)} to{opacity:1;transform:translateY(0) scale(1)} }
  @keyframes slideDown { from{opacity:0;transform:translateY(-100%)} to{opacity:1;transform:translateY(0)} }
  .modal h2 {
    font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.25rem;
    margin-bottom:0; color:var(--text);
    display:flex; align-items:center; gap:8px;
  }
  .modal h2::before { content:''; display:block; width:4px; height:20px; background:var(--accent); border-radius:2px; }
  .form-row { display:flex; gap:12px; }
  .form-row .form-group { flex:1; }
  .form-group { margin-bottom:14px; }
  .form-group label {
    display:block; font-size:0.7rem; letter-spacing:1px; text-transform:uppercase;
    color:var(--muted); margin-bottom:6px; font-weight:600;
  }
  .form-group input,.form-group textarea,.form-group select {
    width:100%; background:var(--surface2); border:1px solid var(--border); border-radius:10px;
    color:var(--text); font-family:'Space Grotesk',sans-serif; font-size:0.88rem;
    padding:10px 13px; outline:none; transition:all .18s;
  }
  .form-group input:focus,.form-group textarea:focus,.form-group select:focus {
    border-color:var(--accent); background:var(--surface); box-shadow:0 0 0 3px rgba(240,224,96,0.08);
  }
  .form-group textarea { resize:vertical; min-height:90px; max-height:400px; line-height:1.6; }
  .form-group input[type="date"]::-webkit-calendar-picker-indicator { filter:invert(0.6); cursor:pointer; }
  .progress-slider-wrap { display:flex; align-items:center; gap:12px; }
  .progress-slider-wrap input[type="range"] {
    flex:1; padding:0; height:6px; cursor:pointer;
    -webkit-appearance:none; appearance:none;
    border-radius:4px; outline:none; border:none;
    background: linear-gradient(to right, var(--prog-color, var(--accent2)) 0%, var(--prog-color, var(--accent2)) var(--prog-pct, 0%), var(--surface2) var(--prog-pct, 0%), var(--surface2) 100%);
  }
  .progress-slider-wrap input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance:none; width:16px; height:16px; border-radius:50%;
    background:var(--prog-color, var(--accent2)); cursor:pointer;
    box-shadow:0 1px 4px rgba(0,0,0,0.3);
  }
  .progress-slider-wrap input[type="range"]::-moz-range-thumb {
    width:16px; height:16px; border-radius:50%; border:none;
    background:var(--prog-color, var(--accent2)); cursor:pointer;
  }

  .link-row { display:flex; flex-direction:column; gap:6px; padding:10px 12px; background:var(--surface2); border:1px solid var(--border); border-radius:10px; }
  .link-label-input { width:100%; font-size:0.82rem; }
  .link-url-input { width:100%; font-size:0.82rem; }
  .progress-slider-val { font-size:0.88rem; font-family:'Bricolage Grotesque',sans-serif; font-weight:700; width:40px; text-align:right; }
  .modal-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:24px; padding-top:20px; border-top:1px solid var(--border); }
  .btn-cancel {
    font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:0.82rem;
    padding:9px 18px; background:transparent; color:var(--muted);
    border:1px solid var(--border); border-radius:9px; cursor:pointer; transition:all .18s;
  }
  .btn-cancel:hover { color:var(--text); border-color:var(--muted); background:var(--surface2); }
  .btn-save {
    font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:0.82rem;
    padding:9px 22px; background:linear-gradient(135deg,#f0d850 0%,#d4880e 45%,#d4880e 100%); color:#1a0a00;
    border:none; border-radius:9px; cursor:pointer; transition:all .18s;
  }
  .btn-save:hover { background:linear-gradient(135deg,#f5e060 0%,#e09820 45%,#c07010 100%); box-shadow:0 4px 16px rgba(212,136,14,0.4); }
  .btn-danger {
    font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:0.82rem;
    padding:9px 22px; background:var(--danger); color:white;
    border:none; border-radius:9px; cursor:pointer; transition:all .18s;
  }
  .btn-danger:hover { background:#ff3048; box-shadow:0 4px 16px rgba(240,80,96,0.3); }

  /* confirm modal */
  .confirm-modal {
    background:var(--surface); border:1px solid var(--border); border-radius:20px;
    padding:36px 32px; width:380px; max-width:95vw; animation:modalIn .2s ease;
    text-align:center; box-shadow:0 32px 80px rgba(0,0,0,0.6);
  }
  .confirm-modal .icon { font-size:2.8rem; margin-bottom:14px; }
  .confirm-modal h3 { font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.2rem; margin-bottom:8px; color:var(--danger); }
  .confirm-modal p { font-size:0.83rem; color:var(--muted); margin-bottom:24px; line-height:1.65; }
  .confirm-modal .confirm-name { color:var(--text); font-weight:700; }

  /* ── DASHBOARD ───────────────────────────────────── */
  @keyframes fadeUp   { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
  @keyframes countUp  { from { opacity:0; transform:scale(.85); } to { opacity:1; transform:scale(1); } }
  @keyframes barGrow  { from { width:0 !important; } to { } }
  @keyframes glowPulse { 0%,100% { opacity:.5; } 50% { opacity:1; } }

  .dashboard-wrapper { padding:32px 40px 60px; max-width:1600px; }

  /* ── header row ── */
  .dash-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:36px; }
  .dash-header-left { display:flex; flex-direction:column; gap:4px; }
  .dash-eyebrow { font-size:0.7rem; letter-spacing:3px; text-transform:uppercase; color:var(--muted); font-weight:500; }
  .dash-headline { font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.5rem; letter-spacing:-0.5px; line-height:1; }
  .dash-headline span { color:var(--accent); }
  .dash-filter-group { display:flex; gap:4px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:4px; }
  .dash-filter-btn { font-family:'Space Grotesk',sans-serif; font-size:0.75rem; padding:6px 14px; border-radius:7px; border:none; background:transparent; color:var(--muted); cursor:pointer; transition:all .2s; white-space:nowrap; }
  .dash-filter-btn.active { background:var(--surface2); color:var(--text); box-shadow:0 1px 4px rgba(0,0,0,0.3); }
  .dash-filter-btn:hover:not(.active) { color:var(--text); }

  /* ── section label ── */
  .dash-section-label { display:flex; align-items:center; gap:10px; margin-bottom:16px; margin-top:36px; }
  .dash-section-label-text { font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:0.7rem; letter-spacing:2.5px; text-transform:uppercase; color:var(--muted); }
  .dash-section-label::after { content:''; flex:1; height:1px; background:var(--border); }

  /* ── KPI cards ── */
  .kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:14px; margin-bottom:8px; align-items:stretch; }
  .kpi-grid > * { min-width:0; }
  /* Sales grid: 4+3 by default, expand to 7 only when there's enough room */
  /* KPI grids — responsive, max 5 per row for readability */
  #salesKpiGrid,
  #projKpiGrid  { grid-template-columns: repeat(3, 1fr); }
  @media (min-width:900px)  {
    #salesKpiGrid,
    #projKpiGrid  { grid-template-columns: repeat(4, 1fr); }
  }
  @media (min-width:1300px) {
    #salesKpiGrid,
    #projKpiGrid  { grid-template-columns: repeat(5, 1fr); }
  }
  .kpi-card { min-height:110px;
    position:relative; overflow:hidden;
    background:var(--surface); border:1px solid var(--border);
    border-radius:16px; padding:22px 20px 18px;
    transition:transform .2s, border-color .2s, box-shadow .2s;
    animation:fadeUp .4s ease both;
  }
  .kpi-card:hover { transform:translateY(-5px); border-color:var(--kpi-color, var(--muted)); box-shadow:0 12px 40px rgba(0,0,0,0.35); background:var(--surface); }
  .kpi-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background:var(--kpi-color, var(--accent)); border-radius:16px 16px 0 0;
  }
  .kpi-card::after {
    content:''; position:absolute; top:-20px; right:-20px;
    width:140px; height:140px; border-radius:50%;
    background:radial-gradient(circle, var(--kpi-color, var(--accent)) 0%, transparent 70%);
    opacity:.09; pointer-events:none;
  }
  .kpi-icon { font-size:1.3rem; margin-bottom:12px; display:block; }
  .kpi-value {
    font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:clamp(1.2rem, 1.6vw, 2.4rem); line-height:1;
    color:var(--kpi-color, var(--text)); margin-bottom:4px;
    animation:countUp .5s ease both;
  }
  .kpi-label { font-size:0.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:1px; font-weight:500; margin-bottom:0; }
  .kpi-sub { font-size:0.7rem; color:var(--muted); margin-top:8px; padding-top:8px; border-top:1px solid var(--border); opacity:.7; }
  .kpi-delta { font-size:0.68rem; font-weight:700; margin-top:5px; letter-spacing:0.2px; }
  .kpi-delta.positive { color:var(--green); }
  .kpi-delta.negative { color:var(--danger); }
  .kpi-delta.neutral  { color:var(--muted); opacity:0.7; }

  /* ── two-column layout ── */
  .dash-cols { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:stretch; }
  .dash-cols > * { min-width:0; }
  .dash-cols-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; align-items:stretch; }
  .dash-cols-3 > * { min-width:0; }
  @media(max-width:900px) { .dash-cols { grid-template-columns:1fr; } .dash-cols-3 { grid-template-columns:1fr; } }

  /* ── panel cards (bars, priority) ── */
  .dash-panel {
    background:var(--surface); border:1px solid var(--border); border-radius:16px;
    padding:22px; animation:fadeUp .5s ease both;
    display:flex; flex-direction:column;
  }
  .dash-panel > *:last-child { flex:1; }
  .dash-panel-title { font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:0.78rem; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:18px; }

  /* ── Collapsible detailed stats ── */
  .dash-details-toggle {
    display:flex; align-items:center; justify-content:space-between; cursor:pointer;
    padding:11px 16px; margin-top:16px; border:1px solid var(--border); background:var(--surface);
    border-radius:10px; width:100%;
    font-family:'Space Grotesk',sans-serif; font-size:0.8rem; font-weight:600;
    color:var(--text); transition:all .15s; text-align:left;
  }
  .dash-details-toggle:hover { border-color:var(--accent); background:var(--surface2); }
  .dash-details-toggle .toggle-label { display:flex; align-items:center; gap:8px; }
  .dash-details-toggle .toggle-chevron {
    font-size:0.55rem; transition:transform .25s; display:inline-flex;
    align-items:center; justify-content:center;
    width:22px; height:22px; border-radius:6px; background:var(--surface2);
    color:var(--muted);
  }
  .dash-details-toggle:hover .toggle-chevron { background:var(--accent); color:#0e0e12; }
  .dash-details-toggle.open .toggle-chevron { transform:rotate(90deg); background:var(--accent); color:#0e0e12; }
  .dash-details-toggle.open { border-color:var(--accent); border-bottom-left-radius:0; border-bottom-right-radius:0; margin-bottom:0; }
  .dash-details-content {
    max-height:0; overflow:hidden; transition:max-height .35s cubic-bezier(.4,0,.2,1);
    border:1px solid transparent; border-top:none; border-radius:0 0 10px 10px;
  }
  .dash-details-content.open { max-height:1200px; border-color:var(--border); padding:4px 12px 12px; }


  /* ══ TIME TRACKING ══════════════════════════════════════ */

  /* ── Floating timer widget ── */
  .timer-widget {
    position:fixed; bottom:32px; right:32px; z-index:900;
    background:var(--surface); border:1px solid var(--accent);
    border-radius:16px; padding:14px 18px;
    box-shadow:0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(232,180,40,0.15);
    display:none; align-items:center; gap:14px;
    font-family:'Space Grotesk',sans-serif;
    animation:fadeUp .3s ease both;
    min-width:280px;
    transition:transform .2s, box-shadow .2s;
  }
  .timer-widget:hover { transform:translateY(-2px); box-shadow:0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(232,180,40,0.3); }
  .timer-widget.active { display:flex; }
  .timer-widget-dot {
    width:10px; height:10px; border-radius:50%; background:var(--green);
    animation:timerPulse 1.5s ease-in-out infinite; flex-shrink:0;
  }
  .timer-widget.paused .timer-widget-dot { background:var(--warn); animation:none; }
  @keyframes timerPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.8)} }
  .timer-widget-info { flex:1; min-width:0; }
  .timer-widget-project {
    font-size:0.75rem; font-weight:700; color:var(--text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px;
  }
  .timer-widget-time {
    font-family:'Bricolage Grotesque',sans-serif; font-weight:800;
    font-size:1.3rem; color:var(--accent); line-height:1; margin-top:2px;
    font-variant-numeric:tabular-nums;
  }
  .timer-widget-actions { display:flex; gap:6px; flex-shrink:0; }
  .timer-widget-btn {
    width:32px; height:32px; border-radius:8px; border:1px solid var(--border);
    background:var(--surface2); color:var(--text); cursor:pointer;
    display:flex; align-items:center; justify-content:center; font-size:0.9rem;
    transition:all .15s;
  }
  .timer-widget-btn:hover { border-color:var(--accent); background:var(--accent); color:#0e0e12; }
  .timer-widget-btn.stop { border-color:var(--danger); }
  .timer-widget-btn.stop:hover { background:var(--danger); color:#fff; border-color:var(--danger); }

  /* ── Card timer indicator ── */
  .card-timer-badge {
    display:inline-flex; align-items:center; gap:4px;
    font-size:0.68rem; font-weight:700; color:var(--green);
    background:rgba(0,200,120,0.1); border:1px solid rgba(0,200,120,0.25);
    border-radius:6px; padding:2px 8px;
    animation:timerPulse 1.5s ease-in-out infinite;
  }
  .card-timer-badge .timer-dot {
    width:6px; height:6px; border-radius:50%; background:var(--green);
  }

  /* ── Time view ── */
  .time-wrapper { padding:24px 32px 60px; max-width:1600px; }
  .time-header {
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    margin-bottom:24px; flex-wrap:wrap;
  }
  .time-title { font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.5rem; letter-spacing:-0.5px; }
  .time-title span { color:var(--accent); }

  /* Weekly summary cards */
  .time-summary-row {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:14px; margin-bottom:28px;
  }
  .time-summary-card {
    position:relative; overflow:hidden;
    background:var(--surface); border:1px solid var(--border);
    border-radius:16px; padding:20px;
    transition:transform .2s, border-color .2s, box-shadow .2s;
  }
  .time-summary-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background:var(--tsc-color, var(--accent)); border-radius:16px 16px 0 0;
  }
  .time-summary-card::after {
    content:''; position:absolute; top:-20px; right:-20px;
    width:140px; height:140px; border-radius:50%;
    background:radial-gradient(circle, var(--tsc-color, var(--accent)) 0%, transparent 70%);
    opacity:.09; pointer-events:none;
  }
  .time-summary-card:hover { transform:translateY(-5px); border-color:var(--tsc-color, var(--muted)); box-shadow:0 12px 40px rgba(0,0,0,0.35); }
  .time-summary-val {
    font-family:'Bricolage Grotesque',sans-serif; font-weight:800;
    font-size:2rem; line-height:1; color:var(--tsc-color, var(--text)); margin-bottom:4px;
  }
  .time-summary-label { font-size:0.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:1px; font-weight:500; }
  .time-summary-sub { font-size:0.7rem; color:var(--muted); margin-top:8px; padding-top:8px; border-top:1px solid var(--border); opacity:.7; }

  /* Weekly bar chart */
  .time-week-chart { display:flex; gap:6px; align-items:flex-end; height:80px; margin-bottom:28px; padding:0 4px; }
  .time-week-bar-wrap { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; }
  .time-week-bar {
    width:100%; min-height:4px; border-radius:6px 6px 0 0;
    background:var(--accent); transition:height .4s cubic-bezier(.4,0,.2,1);
    position:relative;
  }
  .time-week-bar.today { background:var(--green); }
  .time-week-bar-label { font-size:0.65rem; color:var(--muted); font-weight:600; }
  .time-week-bar-hours { font-size:0.6rem; color:var(--text); font-weight:700; position:absolute; top:-16px; left:50%; transform:translateX(-50%); white-space:nowrap; }

  /* Project time breakdown */
  .time-project-list { display:flex; flex-direction:column; gap:10px; margin-bottom:28px; }
  .time-project-row {
    display:flex; align-items:center; gap:14px;
    background:var(--surface); border:1px solid var(--border);
    border-radius:12px; padding:14px 18px; cursor:pointer;
    transition:all .15s;
  }
  .time-project-row:hover { border-color:var(--accent); transform:translateX(4px); }
  .time-project-name { flex:1; font-weight:700; font-size:0.85rem; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .time-project-hours { font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.1rem; color:var(--accent); white-space:nowrap; }
  .time-project-bar-wrap { width:120px; flex-shrink:0; }
  .time-project-bar-track { height:6px; background:var(--surface2); border-radius:3px; overflow:hidden; }
  .time-project-bar-fill { height:100%; border-radius:3px; background:var(--accent); transition:width .4s; }
  .time-project-sessions { font-size:0.72rem; color:var(--muted); white-space:nowrap; }

  /* Time entries log */
  .time-log-section { margin-top:8px; }
  .time-log-date-header {
    font-family:'Bricolage Grotesque',sans-serif; font-weight:700;
    font-size:0.72rem; letter-spacing:2px; text-transform:uppercase;
    color:var(--muted); margin:20px 0 10px; padding-bottom:8px;
    border-bottom:1px solid var(--border);
  }
  .time-log-entry {
    display:flex; align-items:center; gap:12px;
    padding:10px 14px; border-radius:10px;
    transition:background .1s;
  }
  .time-log-entry:hover { background:var(--surface); }
  .time-log-entry-dot { width:8px; height:8px; border-radius:50%; background:var(--accent); flex-shrink:0; }
  .time-log-entry-project { font-weight:600; font-size:0.9rem; color:var(--text); width:160px; flex-shrink:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .time-log-entry-note { font-size:0.88rem; color:var(--muted); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; border-radius:4px; padding:2px 4px; transition:background .1s; }
  .time-log-entry-note:hover { background:var(--surface2); color:var(--text); }
  .time-log-entry-time { font-size:0.82rem; color:var(--muted); white-space:nowrap; width:48px; text-align:right; flex-shrink:0; }
  .time-log-entry-duration { font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:0.9rem; color:var(--text); white-space:nowrap; width:64px; text-align:right; flex-shrink:0; }
  .time-log-entry-del {
    opacity:0; border:none; background:none; color:var(--danger); cursor:pointer;
    font-size:0.8rem; padding:4px; transition:opacity .15s;
  }
  .time-log-entry:hover .time-log-entry-del { opacity:1; }

  /* Timer in detail panel */
  .dp-timer-section {
    background:var(--surface); border:1px solid var(--border);
    border-radius:12px; padding:16px; margin-bottom:4px;
  }
  .dp-timer-display {
    font-family:'Bricolage Grotesque',sans-serif; font-weight:800;
    font-size:1.8rem; color:var(--accent); text-align:center;
    margin:8px 0; font-variant-numeric:tabular-nums;
  }
  .dp-timer-controls { display:flex; gap:8px; justify-content:center; margin-bottom:12px; }
  .dp-timer-btn {
    padding:8px 20px; border-radius:10px; border:1px solid var(--border);
    background:var(--surface2); color:var(--text); font-weight:700;
    font-size:0.8rem; cursor:pointer; transition:all .15s;
    font-family:'Space Grotesk',sans-serif;
  }
  .dp-timer-btn.start { border-color:var(--green); color:var(--green); }
  .dp-timer-btn.start:hover { background:var(--green); color:#0e0e12; }
  .dp-timer-btn.pause { border-color:var(--warn); color:var(--warn); }
  .dp-timer-btn.pause:hover { background:var(--warn); color:#0e0e12; }
  .dp-timer-btn.stop { border-color:var(--danger); color:var(--danger); }
  .dp-timer-btn.stop:hover { background:var(--danger); color:#fff; }
  .dp-timer-total { text-align:center; font-size:0.78rem; color:var(--muted); margin-top:8px; }
  .dp-timer-log { margin-top:12px; max-height:160px; overflow-y:auto; }
  .dp-timer-log-entry {
    display:flex; align-items:center; gap:8px; padding:6px 0;
    border-bottom:1px solid var(--border); font-size:0.75rem;
  }
  .dp-timer-log-entry:last-child { border-bottom:none; }

  /* ── Activity Feed + Weekly Business Review ── */
  .af-wrapper { padding:24px 32px 60px; max-width:1600px; }
  .af-header {
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    margin-bottom:24px; flex-wrap:wrap;
  }
  .af-title { font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.5rem; letter-spacing:-0.5px; }
  .af-title span { color:var(--accent); }

  .af-tabs {
    display:flex; gap:0; border:1px solid var(--border); border-radius:10px;
    overflow:hidden; background:var(--surface);
  }
  .af-tab {
    padding:8px 18px; font-family:'Bricolage Grotesque',sans-serif; font-weight:600;
    font-size:0.78rem; letter-spacing:0.5px; border:none; background:transparent;
    color:var(--muted); cursor:pointer; transition:all .15s; white-space:nowrap;
  }
  .af-tab:not(:last-child) { border-right:1px solid var(--border); }
  .af-tab:hover { color:var(--text); background:var(--surface2); }
  .af-tab.active { background:var(--surface2); color:var(--text); font-weight:700; }

  .af-controls {
    display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  }
  .af-filter-group {
    display:flex; gap:0; border:1px solid var(--border); border-radius:8px;
    overflow:hidden; background:var(--surface);
  }
  .af-filter-btn {
    padding:6px 14px; font-size:0.72rem; font-weight:600; font-family:'Space Grotesk',sans-serif;
    border:none; background:transparent; color:var(--muted); cursor:pointer; transition:all .15s;
  }
  .af-filter-btn:not(:last-child) { border-right:1px solid var(--border); }
  .af-filter-btn:hover { color:var(--text); background:var(--surface2); }
  .af-filter-btn.active { background:var(--surface2); color:var(--text); font-weight:700; }

  .af-search {
    padding:7px 12px; font-size:0.78rem; font-family:'Space Grotesk',sans-serif;
    border:1px solid var(--border); border-radius:8px; background:var(--surface);
    color:var(--text); outline:none; width:180px; transition:border-color .15s;
  }
  .af-search:focus { border-color:var(--accent); }
  .af-search::placeholder { color:var(--muted); }

  /* Timeline */
  .af-timeline { position:relative; padding-left:28px; }
  .af-timeline::before {
    content:''; position:absolute; left:7px; top:0; bottom:0; width:2px;
    background:var(--border); border-radius:2px;
  }
  .af-date-header {
    font-family:'Bricolage Grotesque',sans-serif; font-weight:700;
    font-size:0.72rem; letter-spacing:2px; text-transform:uppercase;
    color:var(--muted); margin:28px 0 14px; position:relative;
  }
  .af-date-header:first-child { margin-top:8px; }
  .af-date-header::before {
    content:''; position:absolute; left:-25px; top:50%; transform:translateY(-50%);
    width:10px; height:10px; border-radius:50%; background:var(--surface2);
    border:2px solid var(--border);
  }

  .af-event {
    position:relative; padding:12px 16px; margin-bottom:8px;
    background:var(--surface); border:1px solid var(--border); border-radius:12px;
    transition:all .15s; cursor:default;
  }
  .af-event:hover { border-color:var(--muted); transform:translateX(3px); }
  .af-event::before {
    content:''; position:absolute; left:-23px; top:18px;
    width:8px; height:8px; border-radius:50%;
    background:var(--af-dot, var(--muted));
  }
  .af-event[data-type="project"] { --af-dot:var(--accent); }
  .af-event[data-type="deal"] { --af-dot:var(--accent2); }
  .af-event[data-type="time"] { --af-dot:var(--green); }
  .af-event[data-type="milestone"] { --af-dot:var(--purple); }

  .af-event-row { display:flex; align-items:flex-start; gap:10px; }
  .af-event-icon { font-size:1rem; flex-shrink:0; line-height:1; margin-top:1px; }
  .af-event-body { flex:1; min-width:0; }
  .af-event-title {
    font-family:'Bricolage Grotesque',sans-serif; font-weight:600;
    font-size:0.85rem; color:var(--text); line-height:1.35;
  }
  .af-event-title strong { color:var(--accent); font-weight:700; }
  .af-event-sub {
    font-size:0.74rem; color:var(--muted); margin-top:3px; line-height:1.4;
  }
  .af-event-time {
    font-size:0.68rem; color:var(--muted); flex-shrink:0;
    font-family:'Space Grotesk',sans-serif; font-variant-numeric:tabular-nums;
  }
  .af-event-tag {
    display:inline-block; font-size:0.62rem; font-weight:700; letter-spacing:0.8px;
    text-transform:uppercase; padding:2px 7px; border-radius:5px; margin-left:6px;
    vertical-align:middle;
  }
  .af-tag-project { background:rgba(240,224,96,0.12); color:var(--accent); }
  .af-tag-deal { background:rgba(96,192,240,0.12); color:var(--accent2); }
  .af-tag-time { background:rgba(96,240,144,0.12); color:var(--green); }
  .af-tag-milestone { background:rgba(212,136,14,0.12); color:var(--purple); }

  .af-empty {
    text-align:center; padding:60px 20px; color:var(--muted);
    font-size:0.85rem; line-height:1.6;
  }
  .af-empty-icon { font-size:2.5rem; margin-bottom:12px; opacity:0.5; }
  .af-load-more {
    display:block; width:100%; margin:20px 0; padding:10px;
    border:1px solid var(--border); border-radius:10px; background:var(--surface);
    color:var(--muted); font-weight:600; font-size:0.78rem; cursor:pointer;
    transition:all .15s; font-family:'Space Grotesk',sans-serif;
  }
  .af-load-more:hover { border-color:var(--accent); color:var(--accent); }

  /* Weekly Business Review */
  .wbr-panel { margin-top:8px; }
  .wbr-generate-wrap {
    text-align:center; padding:48px 20px;
  }
  .wbr-generate-btn {
    display:inline-flex; align-items:center; gap:8px;
    padding:12px 28px; border-radius:12px; border:none;
    background:linear-gradient(135deg,#f0d850 0%,#d4880e 45%,#d4880e 100%); color:#1a0a00;
    font-family:'Bricolage Grotesque',sans-serif; font-weight:700;
    font-size:0.88rem; cursor:pointer; transition:all .18s;
  }
  .wbr-generate-btn:hover { background:linear-gradient(135deg,#f5e060 0%,#e09820 45%,#c07010 100%); transform:translateY(-1px); box-shadow:0 4px 16px rgba(212,136,14,0.4); }
  .wbr-generate-btn:disabled { opacity:0.5; cursor:wait; transform:none; box-shadow:none; }

  .wbr-meta {
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    margin-bottom:20px; flex-wrap:wrap;
  }
  .wbr-meta-date { font-size:0.74rem; color:var(--muted); }
  .wbr-meta-actions { display:flex; gap:8px; }
  .wbr-refresh-btn {
    padding:6px 14px; border-radius:8px; border:1px solid var(--border);
    background:var(--surface); color:var(--muted); font-size:0.72rem;
    font-weight:600; cursor:pointer; transition:all .15s;
  }
  .wbr-refresh-btn:hover { border-color:var(--purple); color:var(--purple); }

  .wbr-section {
    background:var(--surface); border:1px solid var(--border); border-radius:14px;
    padding:18px 20px; margin-bottom:14px;
  }
  .wbr-section-header {
    display:flex; align-items:center; gap:8px; margin-bottom:10px;
  }
  .wbr-section-icon { font-size:1.1rem; }
  .wbr-section-title {
    font-family:'Bricolage Grotesque',sans-serif; font-weight:700;
    font-size:0.82rem; color:var(--text);
  }
  .wbr-section-body {
    font-size:0.8rem; color:var(--text); line-height:1.6;
  }
  .wbr-section-body strong { color:var(--accent); }
  .wbr-section-body ul { margin:6px 0 0 16px; padding:0; }
  .wbr-section-body li { margin-bottom:5px; }
  .wbr-section.critical { border-color:rgba(240,80,96,0.3); background:rgba(240,80,96,0.04); }
  .wbr-section.positive { border-color:rgba(96,240,144,0.2); background:rgba(96,240,144,0.03); }

  .wbr-no-key {
    text-align:center; padding:40px 20px; color:var(--muted);
    font-size:0.82rem; line-height:1.6;
  }
  .wbr-no-key a { color:var(--purple); font-weight:700; }

  /* WBR skeleton loading */
  .wbr-loading { padding:20px 0; }
  .wbr-skel-section {
    background:var(--surface); border:1px solid var(--border);
    border-radius:14px; padding:18px 20px; margin-bottom:14px;
    animation:shimmer 1.5s ease infinite;
  }
  .wbr-skel-title {
    height:14px; width:40%; background:var(--surface2); border-radius:6px; margin-bottom:12px;
  }
  .wbr-skel-line {
    height:10px; background:var(--surface2); border-radius:5px; margin-bottom:8px;
  }
  .wbr-skel-line:last-child { width:60%; }
  @keyframes shimmer {
    0%,100% { opacity:1; }
    50% { opacity:0.5; }
  }

  /* ── Detail panel tabs ── */
  .dp-tabs {
    display:flex; gap:0; border-bottom:1px solid var(--border);
    margin:-4px -24px 0; padding:0 24px;
  }
  .dp-tab {
    font-family:'Space Grotesk',sans-serif; font-size:0.78rem; font-weight:600;
    padding:10px 16px; border:none; background:none; color:var(--muted);
    cursor:pointer; position:relative; transition:color .15s; white-space:nowrap;
  }
  .dp-tab:hover { color:var(--text); }
  .dp-tab.active { color:var(--text); }
  .dp-tab.active::after {
    content:''; position:absolute; bottom:-1px; left:12px; right:12px;
    height:2px; background:var(--accent); border-radius:2px;
  }
  .dp-tab-badge {
    font-size:0.6rem; font-weight:700; background:var(--surface2);
    color:var(--muted); border-radius:4px; padding:1px 5px; margin-left:4px;
  }
  .dp-tab-content { display:none; }
  .dp-tab-content.active { display:block; }

  /* Manual time entry */
  .time-manual-row {
    display:flex; gap:8px; align-items:center; margin-top:10px;
    padding-top:10px; border-top:1px solid var(--border);
  }
  .time-manual-input {
    font-family:'Space Grotesk',sans-serif; font-size:0.78rem;
    padding:6px 10px; border:1px solid var(--border); border-radius:8px;
    background:var(--bg); color:var(--text); outline:none;
    transition:border-color .15s;
  }
  .time-manual-input:focus { border-color:var(--accent); }
  .time-manual-input::placeholder { color:var(--muted); }
  .time-manual-add {
    padding:6px 14px; border-radius:8px; border:1px solid var(--accent);
    background:var(--accent); color:#0e0e12; font-weight:700; font-size:0.75rem;
    cursor:pointer; white-space:nowrap; font-family:'Space Grotesk',sans-serif;
  }
  .time-manual-add:hover { filter:brightness(1.1); }

  /* Filter pills in time view */
  .time-filter-group { display:flex; gap:4px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:4px; }
  .time-filter-btn { font-family:'Space Grotesk',sans-serif; font-size:0.75rem; padding:6px 14px; border-radius:7px; border:none; background:transparent; color:var(--muted); cursor:pointer; transition:all .2s; white-space:nowrap; }
  .time-filter-btn.active { background:var(--surface2); color:var(--text); box-shadow:0 1px 4px rgba(0,0,0,0.3); }
  .time-filter-btn:hover:not(.active) { color:var(--text); }

  body.light-mode .timer-widget { box-shadow:0 8px 32px rgba(0,0,0,0.12), 0 0 0 1px rgba(232,180,40,0.2); }
  body.light-mode .timer-widget:hover { box-shadow:0 12px 40px rgba(0,0,0,0.18), 0 0 0 1px rgba(232,180,40,0.35); }
  body.light-mode .time-summary-card:hover { box-shadow:0 12px 32px rgba(0,0,0,0.12); }

  /* ── Drag scroll on boards ── */
  .board-wrapper.drag-scrolling, .sales-wrapper.drag-scrolling { cursor:grabbing !important; user-select:none; }
  .board-wrapper.drag-scrolling *, .sales-wrapper.drag-scrolling * { cursor:grabbing !important; pointer-events:none; }
  .board-wrapper.drag-scrolling .card, .sales-wrapper.drag-scrolling .deal-card { pointer-events:none; }

  /* ── stage bars (new style) ── */
  .stage-bars { display:flex; flex-direction:column; gap:14px; }
  .stage-bar-row { display:flex; flex-direction:column; gap:5px; }
  .stage-bar-meta { display:flex; justify-content:space-between; align-items:baseline; }
  .stage-bar-label { font-size:0.8rem; color:var(--text); font-weight:500; }
  .stage-bar-count { font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:0.82rem; color:var(--muted); }
  .stage-bar-track { width:100%; height:6px; background:var(--surface2); border-radius:6px; overflow:hidden; }
  .stage-bar-fill { height:100%; border-radius:6px; transition:width .8s cubic-bezier(.4,0,.2,1); animation:barGrow .8s cubic-bezier(.4,0,.2,1) both; }

  /* ── priority pills ── */
  .priority-pills { flex:1; display:flex; flex-direction:column; gap:10px; }
  .priority-pill { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-radius:10px; border:1px solid transparent; transition:all .2s; }
  .priority-pill:hover { transform:translateX(3px); }
  .priority-pill.high   { background:rgba(240,80,96,0.08);  border-color:rgba(240,80,96,0.18); }
  .priority-pill.medium { background:rgba(240,160,48,0.08); border-color:rgba(240,160,48,0.18); }
  .priority-pill.low    { background:rgba(96,192,240,0.08); border-color:rgba(96,192,240,0.18); }
  .priority-pill-left { display:flex; align-items:center; gap:10px; }
  .priority-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
  .priority-pill.high   .priority-dot { background:var(--danger); box-shadow:0 0 6px var(--danger); }
  .priority-pill.medium .priority-dot { background:var(--warn);   box-shadow:0 0 6px var(--warn); }
  .priority-pill.low    .priority-dot { background:var(--accent2);box-shadow:0 0 6px var(--accent2); }
  .priority-pill-name { font-size:0.82rem; font-weight:500; }
  .priority-pill-count { font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.1rem; }
  .priority-pill.high   .priority-pill-count { color:var(--danger); }
  .priority-pill.medium .priority-pill-count { color:var(--warn); }
  .priority-pill.low    .priority-pill-count { color:var(--accent2); }

  /* ── overdue panel ── */
  .overdue-list { display:flex; flex-direction:column; gap:8px; }
  .overdue-item {
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 16px; background:rgba(240,80,96,0.06);
    border:1px solid rgba(240,80,96,0.15); border-radius:10px;
    transition:all .2s;
  }
  .overdue-item:hover { background:rgba(240,80,96,0.1); transform:translateX(3px); }
  .overdue-item .oi-title { font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:0.85rem; }
  .overdue-item .oi-days  { color:var(--danger); font-size:0.72rem; background:rgba(240,80,96,0.12); padding:3px 9px; border-radius:20px; font-weight:600; }

  /* ── conversion ring ── */
  .conv-ring-wrap { display:flex; align-items:center; gap:20px; }
  .conv-ring { position:relative; width:80px; height:80px; flex-shrink:0; }
  .conv-ring svg { transform:rotate(-90deg); }
  .conv-ring-bg  { fill:none; stroke:var(--surface2); stroke-width:7; }
  .conv-ring-fill{ fill:none; stroke:var(--green); stroke-width:7; stroke-linecap:round; transition:stroke-dashoffset .8s cubic-bezier(.4,0,.2,1); }
  .conv-ring-text { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:0.9rem; color:var(--green); }
  .conv-ring-info { flex:1; }
  .conv-ring-title { font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:0.95rem; margin-bottom:4px; }
  .conv-ring-sub { font-size:0.75rem; color:var(--muted); }

  /* ── ARCHIVE ─────────────────────────────────────── */
  .archive-wrapper { padding:24px 32px; }
  .archive-inner { max-width:1600px; }
  .archive-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; flex-wrap:wrap; gap:12px; }
  .archive-title { font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.5rem; letter-spacing:-0.5px; }
  .archive-title span { color:var(--accent); }
  .archive-count { font-size:0.75rem; color:var(--muted); background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:4px 12px; font-weight:600; }
  .archive-search {
    background:var(--surface); border:1px solid var(--border); border-radius:10px;
    color:var(--text); font-family:'Space Grotesk',sans-serif; font-size:0.85rem;
    padding:9px 14px; outline:none; transition:all .18s; width:220px;
  }
  .archive-search:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(96,240,144,0.08); }
  .archive-search::placeholder { color:var(--muted); }
  .archive-month-group { margin-bottom:32px; }
  .archive-month-label {
    font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:0.72rem;
    letter-spacing:2px; text-transform:uppercase; color:var(--muted);
    margin-bottom:14px; padding-bottom:8px; border-bottom:1px solid var(--border);
    display:flex; align-items:center; gap:8px;
  }
  .archive-month-label::before { content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--green); }
  .archive-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(275px,1fr)); gap:12px; }
  .archive-card {
    background:var(--card); border:1px solid var(--border); border-radius:14px;
    border-top:2px solid var(--green); padding:15px 16px;
    transition:all .18s; animation:cardIn .25s ease; position:relative; overflow:hidden;
  }
  .archive-card::after {
    content:''; position:absolute; inset:0; border-radius:14px;
    background:linear-gradient(135deg, rgba(96,240,144,0.03) 0%, transparent 60%);
    pointer-events:none;
  }
  .archive-card:hover { border-color:var(--green); transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,0.4); }
  .archive-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:7px; }
  .archive-card-title { font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:0.95rem; line-height:1.35; flex:1; }
  .archive-card-actions { display:flex; gap:4px; opacity:0; transition:opacity .15s; flex-shrink:0; }
  .archive-card:hover .archive-card-actions { opacity:1; }
  .archive-card-desc { font-size:0.78rem; color:var(--muted); line-height:1.6; margin-bottom:10px; }
  .archive-card-meta { display:flex; align-items:center; flex-wrap:wrap; gap:5px; margin-top:9px; }
  .archive-date { font-size:0.7rem; color:var(--muted); background:var(--surface2); padding:3px 9px; border-radius:20px; border:1px solid var(--border); }
  .archive-empty { text-align:center; padding:70px 20px; color:var(--muted); }
  .archive-empty .ae-icon { font-size:3.5rem; margin-bottom:14px; opacity:0.5; }
  .archive-empty p { font-size:0.85rem; line-height:1.7; }

  /* ── RESTORE MODAL ───────────────────────────────── */
  .restore-modal {
    background:var(--surface); border:1px solid var(--border); border-radius:20px;
    padding:32px; width:420px; max-width:95vw; animation:modalIn .2s ease;
    box-shadow:0 32px 80px rgba(0,0,0,0.6);
  }
  .restore-modal h3 { font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.2rem; margin-bottom:6px; color:var(--green); }
  .restore-modal .rm-sub { font-size:0.8rem; color:var(--muted); margin-bottom:22px; line-height:1.6; }
  .restore-modal .rm-name { color:var(--text); font-weight:700; }
  .stage-picker { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:22px; }
  .stage-pick-btn {
    font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:0.78rem;
    padding:11px 12px; background:var(--surface2); color:var(--muted);
    border:1px solid var(--border); border-radius:10px; cursor:pointer; transition:all .18s; text-align:center;
  }
  .stage-pick-btn:hover { color:var(--text); border-color:var(--muted); background:var(--surface); }
  .stage-pick-btn.selected { color:var(--accent); border-color:var(--accent); background:rgba(240,224,96,0.07); }

  ::-webkit-scrollbar { width:6px; height:8px; }
  ::-webkit-scrollbar-track { background:transparent; }
  ::-webkit-scrollbar-thumb { background:var(--muted); border-radius:4px; }
  ::-webkit-scrollbar-thumb:hover { background:var(--text); }

  /* ── SETTINGS MODAL ─────────────────────────────── */
  .settings-modal {
    background:var(--surface); border:1px solid var(--border); border-radius:20px;
    padding:28px 32px; width:780px; max-width:95vw; animation:modalIn .25s ease;
    max-height:calc(var(--vph) - 40px); box-shadow:0 32px 80px rgba(0,0,0,0.6);
    display:flex; flex-direction:column; overflow:hidden; margin:auto;
  }
  .settings-modal h2 {
    font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.25rem;
    margin-bottom:6px; color:var(--text);
    display:flex; align-items:center; gap:8px;
  }
  .settings-modal h2::before { content:''; display:block; width:4px; height:20px; background:var(--accent); border-radius:2px; }
  .settings-subtitle { font-size:0.78rem; color:var(--muted); margin-bottom:28px; }
  .settings-section { margin-bottom:28px; }
  .settings-section-title {
    font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:0.72rem;
    letter-spacing:1.5px; text-transform:uppercase; color:var(--muted);
    margin-bottom:14px; padding-bottom:8px; border-bottom:1px solid var(--border);
  }

  /* ── TABBED SETTINGS LAYOUT ──────────────────────── */
  .settings-tabs {
    display:flex; gap:0; margin-top:8px;
    min-height:0; flex:1; overflow:hidden;
  }
  .settings-tab-nav {
    width:170px; flex-shrink:0; border-right:1px solid var(--border);
    padding:4px 14px 4px 0; display:flex; flex-direction:column; gap:2px;
    overflow-y:auto;
  }
  .settings-tab-btn {
    display:flex; align-items:center; gap:9px;
    padding:10px 13px; border-radius:10px; border:none;
    background:transparent; color:var(--muted); font-family:'Space Grotesk',sans-serif;
    font-size:0.82rem; font-weight:600; cursor:pointer; transition:all .15s;
    text-align:left; white-space:nowrap;
  }
  .settings-tab-btn:hover { background:var(--surface2); color:var(--text); }
  .settings-tab-btn.active {
    background:var(--surface2); color:var(--text); font-weight:700;
    box-shadow:inset 3px 0 0 var(--accent);
  }
  .settings-tab-btn .stab-icon { font-size:0.92rem; width:20px; text-align:center; flex-shrink:0; }
  .settings-tab-content {
    flex:1; overflow-y:auto; padding:4px 14px 16px 22px;
    min-height:0; scrollbar-gutter:stable;
  }
  .settings-tab-pane { display:none; }
  .settings-tab-pane.active { display:block; }

  .settings-tab-content::-webkit-scrollbar { width:5px; }
  .settings-tab-content::-webkit-scrollbar-track { background:transparent; }
  .settings-tab-content::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }
  .settings-tab-content::-webkit-scrollbar-thumb:hover { background:var(--muted); }
  .settings-tab-content { scrollbar-width:thin; scrollbar-color:var(--border) transparent; }

  @media (max-width:700px) {
    .settings-tabs { flex-direction:column; min-height:0; }
    .settings-tab-nav {
      width:100%; flex-direction:row; border-right:none; border-bottom:1px solid var(--border);
      padding:0 0 8px 0; overflow-x:auto; overflow-y:hidden; gap:0; flex-shrink:0;
      -webkit-overflow-scrolling:touch;
    }
    .settings-tab-btn { padding:8px 12px; font-size:0.76rem; white-space:nowrap; }
    .settings-tab-btn .stab-label { display:none; }
    .settings-tab-btn .stab-icon { font-size:1rem; }
    .settings-tab-btn.active { box-shadow:inset 0 -3px 0 var(--accent); }
    .settings-tab-content { padding:14px 2px 16px 0; }
    .col-rename-key { display:none; }
    .alert-rule-row { flex-wrap:wrap; gap:8px; }
    .col-title-input { width:100px; }
  }

  @media (max-width:480px) {
    .settings-modal { padding:16px 14px; border-radius:14px; }
    .settings-subtitle { margin-bottom:16px; }
    .modal-overlay { padding:10px 0; }
  }

  .alert-rule-row { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
  .alert-rule-label { font-size:0.83rem; flex:1; color:var(--text); }
  .alert-rule-label span { color:var(--muted); font-size:0.74rem; display:block; margin-top:2px; }
  .alert-rule-input {
    width:72px; background:var(--surface2); border:1px solid var(--border); border-radius:9px;
    color:var(--text); font-family:'Space Grotesk',sans-serif; font-size:0.9rem; font-weight:600;
    padding:8px 10px; outline:none; transition:all .18s; text-align:center;
  }
  .alert-rule-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(240,224,96,0.08); }
  .alert-rule-unit { font-size:0.78rem; color:var(--muted); white-space:nowrap; padding-right:2px; }
  .alert-preview {
    background:var(--surface2); border:1px solid var(--border); border-radius:10px;
    padding:13px 16px; font-size:0.78rem; color:var(--muted); line-height:1.9; margin-top:8px;
  }
  .alert-preview strong { color:var(--text); }
  .col-rename-list { display:flex; flex-direction:column; gap:8px; }
  .col-rename-row { display:flex; align-items:center; gap:10px; }
  .col-rename-swatch { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
  .col-rename-input {
    flex:1; background:var(--surface2); border:1px solid var(--border); border-radius:9px;
    color:var(--text); font-family:'Space Grotesk',sans-serif; font-size:0.85rem;
    padding:9px 12px; outline:none; transition:all .18s;
  }
  .col-rename-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(240,224,96,0.08); }
  .col-rename-key { font-size:0.7rem; color:var(--muted); width:100px; flex-shrink:0; text-align:right; }
  .col-title-input {
    font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:0.78rem; letter-spacing:1.2px;
    text-transform:uppercase; background:var(--surface2); border:1px solid var(--accent);
    border-radius:6px; color:var(--text); padding:2px 7px; outline:none; width:130px;
  }
  .settings-btn {
    font-size:0.95rem; padding:7px 10px; background:var(--surface);
    border:1px solid var(--border); border-radius:8px; cursor:pointer; transition:all .18s; line-height:1;
  }
  .settings-btn:hover { border-color:var(--muted); background:var(--surface2); }
  .col-toggle { position:relative; width:36px; height:20px; flex-shrink:0; cursor:pointer; }
  .col-toggle input { opacity:0; width:0; height:0; position:absolute; }
  .col-toggle-track { position:absolute; inset:0; border-radius:20px; background:var(--border); transition:background .2s; }
  .col-toggle input:checked + .col-toggle-track { background:var(--accent); }
  .col-toggle-thumb {
    position:absolute; top:3px; left:3px; width:14px; height:14px;
    border-radius:50%; background:#fff; transition:transform .2s; pointer-events:none;
  }
  .col-toggle input:checked ~ .col-toggle-thumb { transform:translateX(16px); }
  .col-rename-row.locked .col-toggle-track { background:var(--surface2); border:1px solid var(--border); }
  .col-rename-row.disabled .col-rename-input { opacity:0.4; }
  .col-locked-badge {
    font-size:0.67rem; color:var(--muted); background:var(--surface2);
    border:1px solid var(--border); border-radius:20px; padding:2px 8px;
    white-space:nowrap; flex-shrink:0;
  }
  .col-count-info {
    font-size:0.75rem; color:var(--muted); margin-bottom:14px;
    background:var(--surface2); border-radius:10px; padding:9px 13px;
  }
  .col-count-info span { color:var(--accent); font-weight:700; }

  /* ── SALES PIPELINE ──────────────────────────────── */
  .sales-wrapper { padding:24px 32px 16px; }
  .sales-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:12px; }
  .sales-title { font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.5rem; letter-spacing:-0.5px; line-height:1; }
  .sales-title span { color:var(--accent); }
  .sales-board { display:flex; gap:18px; min-width:max-content; align-items:flex-start; }
  .sales-column { width:295px; flex-shrink:0; display:flex; flex-direction:column; gap:10px; align-self:stretch; cursor:default; }
  .sales-col-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:11px 15px; background:var(--surface);
    border:1px solid var(--border); border-radius:12px;
    position:relative; overflow:hidden;
  }
  .sales-col-header::before {
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background:var(--scol-color, var(--border));
  }
  .scol-lead        .sales-col-header { --scol-color:#5590b8; }
  .scol-qualified   .sales-col-header { --scol-color:#7a78a0; }
  .scol-proposal    .sales-col-header { --scol-color:var(--accent); }
  .scol-negotiation .sales-col-header { --scol-color:var(--warn); }
  .scol-won         .sales-col-header { --scol-color:#3db870; }
  .scol-lost        .sales-col-header { --scol-color:var(--danger); }

  /* sales summary bar */
  .sales-summary { display:flex; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
  .sales-stat {
    background:var(--surface); border:1px solid var(--border); border-radius:14px;
    padding:14px 20px; flex:1; min-width:130px; position:relative; overflow:hidden;
    transition:transform .2s, border-color .2s, box-shadow .2s;
  }
  .sales-stat::before {
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background:var(--kpi-color, var(--accent)); border-radius:14px 14px 0 0;
  }
  .sales-stat::after {
    content:''; position:absolute; top:-20px; right:-20px;
    width:140px; height:140px; border-radius:50%;
    background:radial-gradient(circle, var(--kpi-color, var(--accent)) 0%, transparent 70%);
    opacity:.09; pointer-events:none;
  }
  .sales-stat:hover { border-color:var(--kpi-color, var(--muted)); transform:translateY(-5px); box-shadow:0 12px 40px rgba(0,0,0,0.35); }
  .sales-stat-label { font-size:0.7rem; letter-spacing:1px; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:6px; }
  .sales-stat-value { font-family:'Bricolage Grotesque',sans-serif; font-size:1.7rem; font-weight:800; line-height:1; }

  /* deal cards */
  .deal-card {
    background:var(--card); border:1px solid var(--border); border-radius:14px;
    padding:14px 15px; cursor:grab; transition:all .18s;
    animation:cardIn .25s ease; position:relative; overflow:visible;
    z-index:1;
  }
  .deal-card::after {
    content:''; position:absolute; inset:0; border-radius:14px;
    background:linear-gradient(135deg, rgba(255,255,255,0.015) 0%, transparent 60%);
    pointer-events:none;
  }
  .deal-card:active { cursor:grabbing; }
  .deal-card:hover { border-color:var(--muted); transform:translateY(-3px); box-shadow:0 12px 32px rgba(0,0,0,0.45); z-index:2; }
  .deal-card:has(.card-dots-menu.open) { z-index:100 !important; transform:none; }
  .deal-card.won        { border-color:rgba(96,240,144,0.45)!important;  background:rgba(96,240,144,0.04); }
  .deal-card.lost       { border-color:rgba(240,80,96,0.45)!important;  background:rgba(240,80,96,0.04); }
  .deal-card.stale      { border-color:rgba(240,80,96,0.5)!important;   background:rgba(240,80,96,0.06); }
  .deal-card.warn-stale { border-color:rgba(240,160,48,0.5)!important;  background:rgba(240,160,48,0.05); }
  .deal-top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:7px; }
  .deal-company { font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:0.95rem; line-height:1.3; flex:1; }
  .deal-contact { font-size:0.78rem; color:var(--muted); margin-bottom:7px; }
  .deal-value { font-family:'Bricolage Grotesque',sans-serif; font-size:1.15rem; font-weight:800; color:var(--accent); margin-bottom:7px; }
  .deal-meta { display:flex; align-items:center; flex-wrap:wrap; gap:5px; margin-top:6px; }
  .deal-prob { font-size:0.7rem; padding:3px 9px; border-radius:20px; font-weight:600; background:rgba(96,192,240,0.1); color:#80d0f0; border:1px solid rgba(96,192,240,0.3); }
  .deal-close { font-size:0.7rem; padding:3px 9px; border-radius:20px; font-weight:600; background:rgba(240,160,48,0.1); color:#f0b060; border:1px solid rgba(240,160,48,0.25); }
  .deal-notes { font-size:0.77rem; color:var(--muted); line-height:1.55; margin-bottom:7px; }
  .deal-actions { display:flex; gap:4px; opacity:0; transition:opacity .15s; flex-shrink:0; }
  .deal-card:hover .deal-actions { opacity:1; }
  .convert-btn {
    font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:0.7rem;
    padding:4px 10px; background:var(--green); color:#0e0e12;
    border:none; border-radius:20px; cursor:pointer; transition:all .15s; white-space:nowrap;
  }
  .convert-btn:hover { background:#80ffa8; box-shadow:0 3px 10px rgba(96,240,144,0.3); }

  /* deal modal */
  .deal-modal {
    background:var(--surface); border:1px solid var(--border); border-radius:20px;
    padding:32px; width:700px; max-width:95vw; animation:modalIn .25s ease;
    max-height:90vh; overflow-y:auto; box-shadow:0 32px 80px rgba(0,0,0,0.6);
  }
  .deal-modal h2 {
    font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.25rem;
    margin-bottom:0; color:var(--text);
    display:flex; align-items:center; gap:8px;
  }
  .deal-modal h2::before { content:''; display:block; width:4px; height:20px; background:var(--accent); border-radius:2px; }

  /* sales settings section */
  .scol-rename-swatch { width:9px; height:9px; border-radius:50%; flex-shrink:0; }


  /* ── AI INSIGHTS ─────────────────────────────────── */
  @keyframes insightIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
  .ai-panel {
    background:var(--surface); border:1px solid var(--border); border-radius:16px;
    padding:22px; margin-bottom:20px; position:relative;
    animation:fadeUp .4s ease both;
  }
  .ai-panel::before {
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg, var(--purple), var(--accent), var(--accent2));
    border-radius:16px 16px 0 0;
  }
  .ai-panel-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
  .ai-panel-title { font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:0.78rem; letter-spacing:2px; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:8px; }
  .ai-badge { font-size:0.62rem; font-weight:800; letter-spacing:1px; padding:2px 7px; border-radius:20px; background:linear-gradient(90deg,#7c3aed,#d4880e); color:#fff; text-transform:uppercase; text-shadow:0 1px 2px rgba(0,0,0,0.4); }
  /* Next action suggestion in detail panel */
  .dp-prob-suggest-btn {
    font-size:0.68rem; font-weight:800; letter-spacing:0.5px;
    padding:3px 10px; border-radius:20px;
    border:1px solid rgba(240,192,48,0.4);
    background:rgba(240,192,48,0.08); color:var(--warn);
    cursor:pointer; transition:all .15s; white-space:nowrap;
  }
  .dp-prob-suggest-btn:hover {
    background:rgba(240,192,48,0.18); border-color:rgba(240,192,48,0.7);
  }
  .dp-prob-result {
    background:var(--surface2); border:1px solid rgba(240,192,48,0.25);
    border-radius:12px; padding:14px; margin-top:10px;
  }
  .dp-prob-number {
    font-family:'Bricolage Grotesque',sans-serif;
    font-size:2.2rem; font-weight:800; line-height:1;
  }
  .dp-prob-reasoning {
    font-size:0.8rem; color:var(--muted); line-height:1.6; margin-top:8px;
  }
  .dp-prob-apply-btn {
    margin-top:10px; padding:6px 16px; border-radius:8px;
    border:none; background:linear-gradient(135deg,#f0d850 0%,#d4880e 45%,#d4880e 100%); color:#1a0a00;
    font-size:0.78rem; font-weight:700; cursor:pointer;
  }
  .dp-prob-apply-btn:hover { background:linear-gradient(135deg,#f5e060 0%,#e09820 45%,#c07010 100%); box-shadow:0 4px 16px rgba(212,136,14,0.4); }

  .dp-next-action-btn {
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:100%; padding:11px 16px; border-radius:12px;
    border:1.5px dashed rgba(212,136,14,0.35);
    background:rgba(212,136,14,0.10); color:#d4880e;
    font-size:0.82rem; font-weight:700; cursor:pointer;
    transition:all .15s;
  }
  .dp-next-action-btn:hover {
    background:rgba(212,136,14,0.12); border-color:rgba(212,136,14,0.6);
    transform:translateY(-1px);
  }
  .dp-next-action-result {
    background:var(--surface2); border:1px solid rgba(212,136,14,0.25);
    border-radius:12px; padding:16px; font-size:0.84rem;
    color:var(--text); line-height:1.7; margin-bottom:12px;
  }
  .dp-next-action-header {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:10px;
  }
  .dp-next-action-label {
    font-size:0.68rem; font-weight:800; letter-spacing:1px;
    text-transform:uppercase; color:var(--purple);
    display:flex; align-items:center; gap:6px;
  }
  .dp-next-action-regen {
    font-size:0.72rem; font-weight:700; color:var(--muted);
    background:none; border:none; cursor:pointer; padding:2px 6px;
    border-radius:6px;
  }
  .dp-next-action-regen:hover { color:var(--purple); background:rgba(212,136,14,0.08); }
  .dp-next-action-loading {
    display:flex; align-items:center; gap:8px;
    padding:14px 0; color:var(--muted); font-size:0.82rem;
  }

  .claude-badge {
    display:inline-flex; align-items:center; gap:4px;
    font-size:0.6rem; font-weight:800; letter-spacing:0.5px;
    padding:2px 8px 2px 6px; border-radius:20px;
    background:linear-gradient(135deg,#7c3aed 0%,#a855f7 100%);
    color:#fff; text-transform:uppercase;
    box-shadow:0 1px 6px rgba(212,136,14,0.4);
    vertical-align:middle; flex-shrink:0;
  }
  .claude-badge::before {
    content:'✳';
    font-size:0.65rem;
  }
  /* AI info tooltip */
  .ai-info-tip {
    display:inline-flex; align-items:center; justify-content:center;
    width:18px; height:18px; border-radius:50%; font-size:0.65rem; font-weight:700;
    background:var(--surface2); border:1px solid var(--border); color:var(--muted);
    cursor:help; position:relative; vertical-align:middle; margin-left:5px; flex-shrink:0;
    transition:all .15s;
  }
  .ai-info-tip:hover { border-color:var(--purple); color:var(--purple); background:rgba(212,136,14,0.08); }
  /* Bubble is positioned by JS as fixed element on body */
  .ai-info-bubble-fixed {
    position:fixed; width:250px; padding:10px 13px; border-radius:10px; font-size:0.75rem; font-weight:400;
    line-height:1.5; color:var(--text); background:var(--surface); border:1px solid var(--border);
    box-shadow:0 8px 24px rgba(0,0,0,0.25); z-index:99999; text-transform:none; letter-spacing:0;
    word-wrap:break-word; pointer-events:none; display:none;
  }
  .ai-info-bubble-fixed.show { display:block; }
  /* Wrap-up tab */
  .wu-stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
  .wu-stat { background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:12px 14px; }
  .wu-stat-label { font-size:0.62rem; text-transform:uppercase; letter-spacing:0.8px; color:var(--muted); font-weight:600; margin-bottom:4px; }
  .wu-stat-value { font-family:'Bricolage Grotesque',sans-serif; font-size:1.1rem; font-weight:800; }
  .wu-timeline { position:relative; padding-left:20px; margin:12px 0; }
  .wu-timeline::before { content:''; position:absolute; left:6px; top:0; bottom:0; width:2px; background:var(--border); }
  .wu-tl-item { position:relative; margin-bottom:12px; font-size:0.78rem; }
  .wu-tl-item::before { content:''; position:absolute; left:-17px; top:5px; width:8px; height:8px; border-radius:50%; background:var(--accent); border:2px solid var(--surface); }
  .wu-tl-item .wu-tl-date { color:var(--muted); font-size:0.7rem; }
  .wu-retro-result { margin-top:12px; padding:14px 16px; background:rgba(212,136,14,0.05); border:1px solid rgba(212,136,14,0.15); border-radius:12px; font-size:0.82rem; line-height:1.7; }
  .ai-refresh-btn { font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:0.72rem; padding:5px 12px; background:transparent; border:1px solid var(--border); border-radius:8px; color:var(--muted); cursor:pointer; transition:all .18s; }
  .ai-refresh-btn:hover { border-color:var(--accent); color:var(--text); }
  .ai-toggle-btn { font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:0.72rem; padding:5px 12px; background:transparent; border:1px solid var(--border); border-radius:8px; color:var(--muted); cursor:pointer; transition:all .18s; display:flex; align-items:center; gap:6px; }
  .ai-toggle-btn:hover { border-color:var(--muted); color:var(--text); }
  .ai-toggle-arrow { display:inline-block; transition:transform .3s ease; font-size:0.65rem; }
  .ai-panel.collapsed .ai-toggle-arrow { transform:rotate(-90deg); }
  .ai-insights-grid { overflow:visible !important; transition:all .3s ease; }
  .ai-panel.collapsed .ai-insights-grid { display:none; }
  .ai-panel.collapsed { padding-bottom:22px; }
  .ai-panel-header { cursor:pointer; user-select:none; }
  .ai-count-badge { font-size:0.68rem; font-weight:700; padding:2px 8px; border-radius:20px; background:var(--surface2); border:1px solid var(--border); color:var(--muted); display:none; }
  .ai-panel.collapsed .ai-count-badge { display:inline-block; }

  /* Generic AI section collapse toggle */
  .ai-section-toggle { background:none; border:1px solid var(--border); border-radius:7px; padding:3px 8px; cursor:pointer; color:var(--muted); font-size:0.6rem; transition:all .2s; display:inline-flex; align-items:center; line-height:1; }
  .ai-section-toggle:hover { border-color:var(--muted); color:var(--text); }
  .ai-section-toggle .ai-section-arrow { display:inline-block; transition:transform .25s ease; }
  .ai-section-toggle.collapsed .ai-section-arrow { transform:rotate(-90deg); }
  .ai-collapse-body { transition:all .25s ease; }
  .ai-collapse-body.collapsed { display:none; }
  .ai-insights-grid { overflow:visible !important; display:flex; flex-direction:column; gap:10px; }
  .ai-insight { overflow:visible !important;
    display:flex; align-items:flex-start; gap:12px; padding:13px 15px;
    border-radius:11px; border:1px solid transparent;
    animation:insightIn .35s ease both;
  }
  .ai-insight.critical { background:rgba(240,80,96,0.07);  border-color:rgba(240,80,96,0.18); }
  .ai-insight.warning  { background:rgba(240,160,48,0.07); border-color:rgba(240,160,48,0.18); }
  .ai-insight.positive { background:rgba(96,240,144,0.07); border-color:rgba(96,240,144,0.18); }
  .ai-insight.info     { background:rgba(96,192,240,0.07); border-color:rgba(96,192,240,0.18); }
  .ai-insight.tip      { background:rgba(212,136,14,0.07); border-color:rgba(212,136,14,0.18); }
  .ai-insight-icon { font-size:1.1rem; flex-shrink:0; margin-top:1px; }
  .ai-insight-body { flex:1; }
  .ai-insight-title { font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:0.85rem; margin-bottom:3px; }
  .ai-insight.critical .ai-insight-title { color:#f08090; }
  .ai-insight.warning  .ai-insight-title { color:#f0b060; }
  .ai-insight.positive .ai-insight-title { color:#70e0a0; }
  .ai-insight.info     .ai-insight-title { color:#80d0f0; }
  .ai-insight.tip      .ai-insight-title { color:#c090ff; }
  .ai-insight-text { font-size:0.8rem; color:var(--muted); line-height:1.6; }
  .ai-insight-text strong { color:var(--text); font-weight:600; }
  .ai-empty { text-align:center; padding:20px; color:var(--muted); font-size:0.82rem; }
  .ai-score { display:flex; align-items:center; gap:10px; }
  .ai-score-label { font-size:0.72rem; color:var(--muted); }
  .ai-score-bar { flex:1; height:5px; background:var(--surface2); border-radius:3px; overflow:hidden; max-width:120px; }
  .ai-score-fill { height:100%; border-radius:3px; transition:width .8s ease; }
  .ai-score-val { font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:0.82rem; }

  /* ── PROB TOOLTIP ───────────────────────────────── */
  .prob-info-wrap { position:relative; display:inline-flex; align-items:center; }
  .prob-info-btn { width:16px; height:16px; border-radius:50%; border:1.5px solid var(--muted); background:transparent; color:var(--muted); font-size:0.65rem; font-weight:800; cursor:help; display:inline-flex; align-items:center; justify-content:center; line-height:1; flex-shrink:0; }
  .prob-tooltip {
    position:fixed; width:260px; background:var(--surface); border:1px solid var(--border);
    border-radius:12px; padding:14px 16px; box-shadow:0 12px 36px rgba(0,0,0,0.45);
    opacity:0; pointer-events:none; transform:translateY(-4px);
    transition:opacity .18s ease, transform .18s ease; z-index:10000;
    font-size:0.75rem; line-height:1.6; color:var(--muted);
  }
  .prob-info-wrap:hover .prob-tooltip,
  .prob-info-btn:focus + .prob-tooltip { opacity:1; pointer-events:auto; transform:translateY(0); }
  .prob-tooltip::before {
    content:''; position:absolute; top:-6px; right:var(--arrow-right, 14px);
    width:10px; height:10px; background:var(--surface);
    border-left:1px solid var(--border); border-top:1px solid var(--border);
    transform:rotate(45deg);
  }
  .prob-tooltip-title { font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:0.8rem; color:var(--text); margin-bottom:10px; display:flex; align-items:center; gap:6px; }
  .prob-tooltip-row { display:flex; justify-content:space-between; align-items:center; padding:3px 0; border-bottom:1px solid var(--border); gap:12px; }
  .prob-tooltip-row:last-child { border-bottom:none; }
  .prob-tooltip-factor { color:var(--muted); }
  .prob-tooltip-effect { font-weight:700; white-space:nowrap; }
  .prob-tooltip-effect.pos { color:var(--green); }
  .prob-tooltip-effect.neg { color:var(--danger); }
  .prob-tooltip-effect.neu { color:var(--accent); }
  .prob-tooltip-note { margin-top:10px; padding-top:8px; border-top:1px solid var(--border); font-size:0.7rem; color:var(--muted); font-style:italic; }

  /* ── DETAIL SIDE PANEL ──────────────────────────── */
  #detailPanel.open { transform:translateX(0) !important; }
  .dp-section { display:flex; flex-direction:column; gap:6px; }
  .dp-label { font-size:0.68rem; font-weight:700; letter-spacing:1px; color:var(--muted); text-transform:uppercase; }
  .dp-value { font-size:0.92rem; color:var(--text); line-height:1.6; white-space:pre-wrap; }
  .dp-title { font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.3rem; color:var(--text); line-height:1.3; }
  .dp-divider { height:1px; background:var(--border); flex-shrink:0; }
  .dp-progress-track { height:8px; background:var(--surface2); border-radius:4px; overflow:hidden; margin-top:4px; }
  .dp-progress-fill  { height:100%; border-radius:4px; transition:width .3s ease; }
  .dp-tags { display:flex; flex-wrap:wrap; gap:6px; }
  .dp-links { display:flex; flex-wrap:wrap; gap:6px; }

  /* Hero section */
  .dp-hero {
    background:var(--surface2); border-radius:12px; padding:16px;
    display:flex; flex-direction:column; gap:10px; margin-bottom:4px;
  }
  .dp-hero-title {
    font-family:'Bricolage Grotesque',sans-serif; font-weight:800;
    font-size:1.3rem; color:var(--text); line-height:1.3;
  }
  .dp-hero-stats {
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  }
  .dp-hero-value {
    font-family:'Bricolage Grotesque',sans-serif; font-weight:800;
    font-size:1.5rem; color:var(--accent); line-height:1;
  }
  .dp-hero-prob {
    display:inline-flex; align-items:center; gap:4px;
    font-family:'Bricolage Grotesque',sans-serif; font-weight:700;
    font-size:0.85rem; padding:3px 10px; border-radius:20px;
    background:rgba(255,255,255,0.06); border:1.5px solid var(--border);
  }
  .dp-hero-progress {
    width:100%; display:flex; align-items:center; gap:10px;
  }
  .dp-hero-progress-track {
    flex:1; height:8px; background:rgba(255,255,255,0.08); border-radius:4px; overflow:hidden;
  }
  .dp-hero-progress-fill { height:100%; border-radius:4px; transition:width .3s ease; }
  .dp-hero-progress-label {
    font-family:'Bricolage Grotesque',sans-serif; font-weight:800;
    font-size:1rem; min-width:42px; text-align:right;
  }

  /* Compact contact row */
  .dp-contact-row {
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    padding:8px 0;
  }
  .dp-contact-name {
    font-size:0.88rem; font-weight:600; color:var(--text);
  }
  .dp-contact-btn {
    display:inline-flex; align-items:center; gap:4px; padding:4px 10px;
    border-radius:7px; font-size:0.75rem; font-weight:600;
    text-decoration:none; transition:all 0.15s; border:1px solid var(--border);
    background:var(--surface2);
  }
  .dp-contact-btn:hover { border-color:var(--text); }
  .dp-contact-btn.phone { color:var(--green); }
  .dp-contact-btn.email { color:var(--accent); }

  /* Collapsible sections */
  .dp-collapse-header {
    display:flex; align-items:center; justify-content:space-between;
    cursor:pointer; padding:6px 0; user-select:none;
  }
  .dp-collapse-header:hover .dp-label { color:var(--text); }
  .dp-collapse-arrow {
    font-size:0.65rem; color:var(--muted); transition:transform 0.2s;
    padding:2px 4px;
  }
  .dp-collapse-header[aria-expanded="false"] .dp-collapse-arrow { transform:rotate(-90deg); }
  .dp-collapse-body { overflow:hidden; transition:max-height 0.25s ease; }
  .dp-collapse-body.collapsed { max-height:0 !important; overflow:hidden; }

  body.light-mode .dp-hero { background:var(--surface2); }
  body.light-mode .dp-hero-progress-track { background:rgba(0,0,0,0.06); }
  body.light-mode .dp-hero-prob { background:rgba(0,0,0,0.03); }

  .backup-btn-wrap { position:relative; display:flex; align-items:center; }
  .backup-btn {
    font-size:0.72rem; font-weight:800; padding:5px 12px; border-radius:8px;
    border:1.5px solid rgba(96,240,144,0.4); background:rgba(96,240,144,0.08);
    color:var(--green); cursor:pointer; letter-spacing:0.5px;
    display:flex; align-items:center; gap:5px; transition:all .15s;
  }
  .backup-btn:hover { background:rgba(96,240,144,0.18); border-color:rgba(96,240,144,0.7); }
  .backup-tooltip {
    display:none; position:absolute; top:calc(100% + 10px); right:0;
    background:var(--surface); border:1px solid var(--border);
    border-radius:12px; padding:14px 16px; width:290px;
    box-shadow:0 8px 32px rgba(0,0,0,0.25); z-index:9999;
    font-size:0.78rem; color:var(--text); line-height:1.6;
  }
  .backup-tooltip::before {
    content:''; position:absolute; top:-6px; right:16px;
    width:10px; height:10px; background:var(--surface);
    border-left:1px solid var(--border); border-top:1px solid var(--border);
    transform:rotate(45deg);
  }
  .backup-tooltip-title { font-weight:800; color:var(--green); margin-bottom:8px; font-size:0.82rem; }
  .import-tooltip-title { font-weight:800; color:var(--accent); margin-bottom:8px; font-size:0.82rem; }
  .backup-tooltip-step { display:flex; gap:8px; margin-bottom:6px; }
  .backup-tooltip-num {
    width:18px; height:18px; border-radius:50%; background:rgba(96,240,144,0.15);
    color:var(--green); font-weight:800; font-size:0.68rem;
    display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px;
  }
  .import-tooltip-num {
    width:18px; height:18px; border-radius:50%; background:rgba(240,224,96,0.15);
    color:var(--accent); font-weight:800; font-size:0.68rem;
    display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px;
  }
  .backup-tooltip-warn {
    margin-top:10px; padding:8px 10px; background:rgba(240,80,96,0.08);
    border-radius:8px; border:1px solid rgba(240,80,96,0.2);
    color:var(--danger); font-size:0.74rem; line-height:1.5;
  }
  .backup-tooltip-info {
    margin-top:10px; padding:8px 10px; background:rgba(240,224,96,0.06);
    border-radius:8px; border:1px solid rgba(240,224,96,0.2);
    color:var(--text); font-size:0.74rem; line-height:1.5;
  }
  .backup-btn-wrap { position:relative; }
  .backup-btn-wrap .backup-tooltip { display:none; }
  .backup-btn-wrap:hover .backup-tooltip { display:block; }
  .import-btn-wrap { position:relative; }
  .import-btn-wrap .backup-tooltip { display:none; }
  .import-btn-wrap:hover .backup-tooltip { display:block; }
  .backup-last { font-size:0.72rem; color:var(--muted); margin-top:8px; padding-top:8px; border-top:1px solid var(--border); font-weight:500; }



  /* ── HELP PANEL ─────────────────────────────────────── */
  .help-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,0.5);
    z-index:1200; display:none; align-items:flex-start; justify-content:flex-end;
  }
  .help-overlay.open { display:flex; }
  .help-panel {
    width:480px; max-width:95vw; height:100vh;
    background:var(--surface); border-left:1px solid var(--border);
    box-shadow:-12px 0 40px rgba(0,0,0,0.4);
    display:flex; flex-direction:column; overflow:hidden;
  }
  .help-header {
    padding:20px 24px; border-bottom:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
  }
  .help-header h2 { font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.1rem; color:var(--text); margin:0; }
  .help-search-wrap { padding:14px 24px; border-bottom:1px solid var(--border); flex-shrink:0; }
  .help-search { width:100%; padding:8px 12px; border-radius:8px; border:1px solid var(--border); background:var(--surface2); color:var(--text); font-size:0.85rem; box-sizing:border-box; }
  .help-search:focus { outline:none; border-color:var(--accent); }
  .help-body { flex:1; overflow-y:auto; padding:16px 24px 32px; }
  .help-section { margin-bottom:8px; }
  .help-section-title {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 14px; border-radius:10px; cursor:pointer;
    background:var(--surface2); border:1px solid var(--border);
    font-weight:700; font-size:0.85rem; color:var(--text);
    transition:all .15s; user-select:none;
  }
  .help-section-title:hover { border-color:var(--muted); }
  .help-section-title.open { border-color:var(--accent); color:var(--accent); }
  .help-section-title .help-chevron { font-size:0.7rem; transition:transform .2s; }
  .help-section-title.open .help-chevron { transform:rotate(180deg); }
  .help-articles { display:none; padding:8px 0 4px 0; }
  .help-articles.open { display:block; }
  .help-article { padding:12px 14px; margin-bottom:6px; border-radius:10px; background:var(--surface); border:1px solid var(--border); }
  .help-article-title { font-weight:700; font-size:0.82rem; color:var(--text); margin-bottom:6px; }
  .help-article-body { font-size:0.79rem; color:var(--muted); line-height:1.7; }
  .help-article-body strong { color:var(--text); }
  .help-article-body code { background:var(--surface2); padding:1px 5px; border-radius:4px; font-size:0.75rem; color:var(--accent); }
  .help-tag { display:inline-block; padding:2px 7px; border-radius:5px; font-size:0.7rem; font-weight:700; margin-right:4px; margin-bottom:4px; }
  .help-tip { margin-top:8px; padding:7px 10px; background:rgba(240,224,96,0.08); border-radius:7px; border-left:3px solid var(--accent); font-size:0.77rem; color:var(--text); }
  .help-no-results { text-align:center; padding:40px 20px; color:var(--muted); font-size:0.85rem; }









  /* ── INSIGHT DISMISS DROPDOWN ───────────────────────── */
  .ai-dismiss-wrap { position:absolute; top:10px; right:10px; }
  .ai-dismiss-trigger {
    width:22px; height:22px; border-radius:50%;
    border:none; background:transparent; color:var(--muted);
    font-size:0.7rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
    opacity:0; transition:opacity .15s, background .15s;
    line-height:1;
  }
  .ai-insight:hover .ai-dismiss-trigger { opacity:1; }
  .ai-dismiss-trigger:hover { background:var(--surface2); color:var(--text); }
  .ai-dismiss-menu {
    position:fixed;
    background:var(--surface); border:1px solid var(--border); border-radius:10px;
    box-shadow:0 12px 32px rgba(0,0,0,0.28); min-width:170px;
    z-index:99999; overflow:hidden;
    opacity:0; pointer-events:none; transform:translateY(-4px);
    transition:opacity .15s, transform .15s;
  }
  .ai-dismiss-menu.open { opacity:1; pointer-events:auto; transform:translateY(0); }
  .ai-dismiss-option {
    display:flex; align-items:center; gap:8px;
    padding:9px 14px; font-size:0.78rem; font-weight:600; color:var(--text);
    cursor:pointer; transition:background .1s; white-space:nowrap; border:none;
    background:transparent; width:100%; text-align:left;
  }
  .ai-dismiss-option:hover { background:var(--surface2); }
  .ai-dismiss-option.suppress { color:var(--danger); }

  .ai-insight-dismiss {
    position:absolute; top:10px; right:10px;
    width:20px; height:20px; border-radius:50%;
    border:none; background:transparent; color:var(--muted);
    font-size:0.65rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
    opacity:0; transition:opacity .15s, background .15s;
    line-height:1;
  }
  .ai-insight:hover .ai-insight-dismiss { opacity:1; }
  .ai-insight-dismiss:hover { background:var(--surface2); color:var(--text); }

  /* ── AI LOADING SKELETON ────────────────────────────── */
  .ai-loading { display:flex; flex-direction:column; gap:16px; }
  .ai-loading-header { display:flex; align-items:center; gap:12px; padding:12px 16px; background:rgba(212,136,14,0.07); border:1px solid rgba(212,136,14,0.2); border-radius:12px; }
  .ai-loading-spinner {
    width:28px; height:28px; border-radius:50%; flex-shrink:0;
    border:2.5px solid rgba(212,136,14,0.2);
    border-top-color:var(--purple);
    animation:spin .8s linear infinite;
  }
  .ai-skeleton-list { display:flex; flex-direction:column; gap:10px; }
  .ai-skeleton-row {
    display:flex; gap:12px; align-items:flex-start;
    padding:14px 16px; border-radius:12px;
    background:var(--surface); border:1px solid var(--border);
    animation:skeletonPulse 1.6s ease-in-out infinite;
  }
  .ai-skeleton-icon { width:32px; height:32px; border-radius:8px; background:var(--surface2); flex-shrink:0; }
  .ai-skeleton-body { flex:1; display:flex; flex-direction:column; gap:7px; padding-top:2px; }
  .ai-skeleton-title { height:11px; border-radius:6px; background:var(--surface2); }
  .ai-skeleton-text  { height:9px;  border-radius:6px; background:var(--surface2); opacity:0.6; }
  @keyframes skeletonPulse {
    0%, 100% { opacity:1; }
    50%       { opacity:0.45; }
  }


  /* ── CLAUDE ENABLE TOGGLE ───────────────────────────── */
  .claude-toggle {
    width:36px; height:20px; border-radius:10px; background:var(--surface2);
    border:1px solid var(--border); cursor:pointer; position:relative;
    transition:background .2s; flex-shrink:0;
  }
  .claude-toggle.on { background:var(--purple); border-color:var(--purple); }
  .claude-toggle-knob {
    position:absolute; top:2px; left:2px;
    width:14px; height:14px; border-radius:50%;
    background:#fff; transition:transform .2s;
    box-shadow:0 1px 3px rgba(0,0,0,0.3);
  }
  .claude-toggle.on .claude-toggle-knob { transform:translateX(16px); }

  /* ── AI MODE TOGGLE ─────────────────────────────────── */
  .ai-mode-toggle { display:flex; background:var(--surface2); border:1px solid var(--border); border-radius:9px; padding:2px; gap:2px; }
  .ai-mode-btn { font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:0.7rem; padding:4px 10px; border:none; border-radius:7px; background:transparent; color:var(--muted); cursor:pointer; transition:all .15s; white-space:nowrap; }
  .ai-mode-btn.active { background:var(--surface); color:var(--text); box-shadow:0 1px 4px rgba(0,0,0,0.15); }
  .ai-mode-btn:hover:not(.active) { color:var(--text); }

  /* ── REMINDER ROWS ──────────────────────────────────── */
  .reminder-list { display:flex; flex-direction:column; }
  .reminder-row {
    display:flex; justify-content:space-between; align-items:center;
    padding:8px 4px; gap:10px;
    border-bottom:1px solid var(--border);
    transition:background .12s;
  }
  .reminder-row:last-child { border-bottom:none; }
  .reminder-clickable { cursor:pointer; border-radius:6px; padding:8px 8px; margin:0 -4px; }
  .reminder-clickable:hover { background:var(--surface2); }
  body.light-mode .reminder-clickable:hover { background:rgba(0,0,0,0.04); }

  /* ── GLOBAL SETTINGS ────────────────────────────────── */
  .currency-opt {
    padding:7px 14px; border-radius:9px; border:1.5px solid var(--border);
    background:var(--surface2); color:var(--text); font-size:0.82rem;
    font-weight:700; cursor:pointer; transition:all .15s;
  }
  .currency-opt:hover { border-color:var(--muted); }
  .currency-opt.selected { border-color:var(--accent); background:rgba(240,224,96,0.1); color:var(--accent); }

#detailPanel {
    width: 660px;
    min-width: 320px;
    max-width: 90vw;
  }
  #detailPanel.dp-fullscreen {
    width: 100vw !important;
    max-width: 100vw !important;
    border-left: none !important;
  }
  /* Hide Share with Client in fullscreen — modal would open behind the panel */
  #detailPanel.dp-fullscreen .dp-next-action-btn[onclick*="openPortalShare"] { display: none !important; }
  #dp-resize-handle {
    position: absolute;
    top: 0; left: 0;
    width: 5px; height: 100%;
    cursor: ew-resize;
    z-index: 10;
    background: transparent;
    transition: background .15s;
  }
  #dp-resize-handle:hover,
  #dp-resize-handle.dragging { background: var(--accent); opacity: 0.5; }
  .dp-expand-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--muted);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 4px 8px;
    transition: all .15s;
    line-height: 1;
    flex-shrink: 0;
  }
  .dp-expand-btn:hover { border-color: var(--accent); color: var(--accent); }
  .dp-section { display:flex; flex-direction:column; gap:6px; }
  .dp-label { font-size:0.68rem; font-weight:700; letter-spacing:1px; color:var(--muted); text-transform:uppercase; }
  .dp-value { font-size:0.92rem; color:var(--text); line-height:1.6; white-space:pre-wrap; }
  .dp-title { font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.3rem; color:var(--text); line-height:1.3; }
  .dp-divider { height:1px; background:var(--border); flex-shrink:0; }
  .dp-progress-track { height:8px; background:var(--surface2); border-radius:4px; overflow:hidden; margin-top:4px; }
  .dp-progress-fill  { height:100%; border-radius:4px; transition:width .3s ease; }
  .dp-tags { display:flex; flex-wrap:wrap; gap:6px; }
  .dp-links { display:flex; flex-wrap:wrap; gap:6px; }

  /* Hero section */
  .dp-hero {
    background:var(--surface2); border-radius:12px; padding:16px;
    display:flex; flex-direction:column; gap:10px; margin-bottom:4px;
  }
  .dp-hero-title {
    font-family:'Bricolage Grotesque',sans-serif; font-weight:800;
    font-size:1.3rem; color:var(--text); line-height:1.3;
  }
  .dp-hero-stats {
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  }
  .dp-hero-value {
    font-family:'Bricolage Grotesque',sans-serif; font-weight:800;
    font-size:1.5rem; color:var(--accent); line-height:1;
  }
  .dp-hero-prob {
    display:inline-flex; align-items:center; gap:4px;
    font-family:'Bricolage Grotesque',sans-serif; font-weight:700;
    font-size:0.85rem; padding:3px 10px; border-radius:20px;
    background:rgba(255,255,255,0.06); border:1.5px solid var(--border);
  }
  .dp-hero-progress {
    width:100%; display:flex; align-items:center; gap:10px;
  }
  .dp-hero-progress-track {
    flex:1; height:8px; background:rgba(255,255,255,0.08); border-radius:4px; overflow:hidden;
  }
  .dp-hero-progress-fill { height:100%; border-radius:4px; transition:width .3s ease; }
  .dp-hero-progress-label {
    font-family:'Bricolage Grotesque',sans-serif; font-weight:800;
    font-size:1rem; min-width:42px; text-align:right;
  }

  /* Compact contact row */
  .dp-contact-row {
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    padding:8px 0;
  }
  .dp-contact-name {
    font-size:0.88rem; font-weight:600; color:var(--text);
  }
  .dp-contact-btn {
    display:inline-flex; align-items:center; gap:4px; padding:4px 10px;
    border-radius:7px; font-size:0.75rem; font-weight:600;
    text-decoration:none; transition:all 0.15s; border:1px solid var(--border);
    background:var(--surface2);
  }
  .dp-contact-btn:hover { border-color:var(--text); }
  .dp-contact-btn.phone { color:var(--green); }
  .dp-contact-btn.email { color:var(--accent); }

  /* Collapsible sections */
  .dp-collapse-header {
    display:flex; align-items:center; justify-content:space-between;
    cursor:pointer; padding:6px 0; user-select:none;
  }
  .dp-collapse-header:hover .dp-label { color:var(--text); }
  .dp-collapse-arrow {
    font-size:0.65rem; color:var(--muted); transition:transform 0.2s;
    padding:2px 4px;
  }
  .dp-collapse-header[aria-expanded="false"] .dp-collapse-arrow { transform:rotate(-90deg); }
  .dp-collapse-body { overflow:hidden; transition:max-height 0.25s ease; }
  .dp-collapse-body.collapsed { max-height:0 !important; overflow:hidden; }

  body.light-mode .dp-hero { background:var(--surface2); }
  body.light-mode .dp-hero-progress-track { background:rgba(0,0,0,0.06); }
  body.light-mode .dp-hero-prob { background:rgba(0,0,0,0.03); }

  .backup-btn-wrap { position:relative; display:flex; align-items:center; }
  .backup-btn {
    font-size:0.72rem; font-weight:800; padding:5px 12px; border-radius:8px;
    border:1.5px solid rgba(96,240,144,0.4); background:rgba(96,240,144,0.08);
    color:var(--green); cursor:pointer; letter-spacing:0.5px;
    display:flex; align-items:center; gap:5px; transition:all .15s;
  }
  .backup-btn:hover { background:rgba(96,240,144,0.18); border-color:rgba(96,240,144,0.7); }
  .backup-tooltip {
    display:none; position:absolute; top:calc(100% + 10px); right:0;
    background:var(--surface); border:1px solid var(--border);
    border-radius:12px; padding:14px 16px; width:290px;
    box-shadow:0 8px 32px rgba(0,0,0,0.25); z-index:9999;
    font-size:0.78rem; color:var(--text); line-height:1.6;
  }
  .backup-tooltip::before {
    content:''; position:absolute; top:-6px; right:16px;
    width:10px; height:10px; background:var(--surface);
    border-left:1px solid var(--border); border-top:1px solid var(--border);
    transform:rotate(45deg);
  }
  .backup-tooltip-title { font-weight:800; color:var(--green); margin-bottom:8px; font-size:0.82rem; }
  .import-tooltip-title { font-weight:800; color:var(--accent); margin-bottom:8px; font-size:0.82rem; }
  .backup-tooltip-step { display:flex; gap:8px; margin-bottom:6px; }
  .backup-tooltip-num {
    width:18px; height:18px; border-radius:50%; background:rgba(96,240,144,0.15);
    color:var(--green); font-weight:800; font-size:0.68rem;
    display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px;
  }
  .import-tooltip-num {
    width:18px; height:18px; border-radius:50%; background:rgba(240,224,96,0.15);
    color:var(--accent); font-weight:800; font-size:0.68rem;
    display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px;
  }
  .backup-tooltip-warn {
    margin-top:10px; padding:8px 10px; background:rgba(240,80,96,0.08);
    border-radius:8px; border:1px solid rgba(240,80,96,0.2);
    color:var(--danger); font-size:0.74rem; line-height:1.5;
  }
  .backup-tooltip-info {
    margin-top:10px; padding:8px 10px; background:rgba(240,224,96,0.06);
    border-radius:8px; border:1px solid rgba(240,224,96,0.2);
    color:var(--text); font-size:0.74rem; line-height:1.5;
  }
  .backup-btn-wrap { position:relative; }
  .backup-btn-wrap .backup-tooltip { display:none; }
  .backup-btn-wrap:hover .backup-tooltip { display:block; }
  .import-btn-wrap { position:relative; }
  .import-btn-wrap .backup-tooltip { display:none; }
  .import-btn-wrap:hover .backup-tooltip { display:block; }
  .backup-last { font-size:0.72rem; color:var(--muted); margin-top:8px; padding-top:8px; border-top:1px solid var(--border); font-weight:500; }



  /* ── HELP PANEL ─────────────────────────────────────── */
  .help-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,0.5);
    z-index:1200; display:none; align-items:flex-start; justify-content:flex-end;
  }
  .help-overlay.open { display:flex; }
  .help-panel {
    width:480px; max-width:95vw; height:100vh;
    background:var(--surface); border-left:1px solid var(--border);
    box-shadow:-12px 0 40px rgba(0,0,0,0.4);
    display:flex; flex-direction:column; overflow:hidden;
  }
  .help-header {
    padding:20px 24px; border-bottom:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
  }
  .help-header h2 { font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.1rem; color:var(--text); margin:0; }
  .help-search-wrap { padding:14px 24px; border-bottom:1px solid var(--border); flex-shrink:0; }
  .help-search { width:100%; padding:8px 12px; border-radius:8px; border:1px solid var(--border); background:var(--surface2); color:var(--text); font-size:0.85rem; box-sizing:border-box; }
  .help-search:focus { outline:none; border-color:var(--accent); }
  .help-body { flex:1; overflow-y:auto; padding:16px 24px 32px; }
  .help-section { margin-bottom:8px; }
  .help-section-title {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 14px; border-radius:10px; cursor:pointer;
    background:var(--surface2); border:1px solid var(--border);
    font-weight:700; font-size:0.85rem; color:var(--text);
    transition:all .15s; user-select:none;
  }
  .help-section-title:hover { border-color:var(--muted); }
  .help-section-title.open { border-color:var(--accent); color:var(--accent); }
  .help-section-title .help-chevron { font-size:0.7rem; transition:transform .2s; }
  .help-section-title.open .help-chevron { transform:rotate(180deg); }
  .help-articles { display:none; padding:8px 0 4px 0; }
  .help-articles.open { display:block; }
  .help-article { padding:12px 14px; margin-bottom:6px; border-radius:10px; background:var(--surface); border:1px solid var(--border); }
  .help-article-title { font-weight:700; font-size:0.82rem; color:var(--text); margin-bottom:6px; }
  .help-article-body { font-size:0.79rem; color:var(--muted); line-height:1.7; }
  .help-article-body strong { color:var(--text); }
  .help-article-body code { background:var(--surface2); padding:1px 5px; border-radius:4px; font-size:0.75rem; color:var(--accent); }
  .help-tag { display:inline-block; padding:2px 7px; border-radius:5px; font-size:0.7rem; font-weight:700; margin-right:4px; margin-bottom:4px; }
  .help-tip { margin-top:8px; padding:7px 10px; background:rgba(240,224,96,0.08); border-radius:7px; border-left:3px solid var(--accent); font-size:0.77rem; color:var(--text); }
  .help-no-results { text-align:center; padding:40px 20px; color:var(--muted); font-size:0.85rem; }









  /* ── INSIGHT DISMISS DROPDOWN ───────────────────────── */
  .ai-dismiss-wrap { position:absolute; top:10px; right:10px; }
  .ai-dismiss-trigger {
    width:22px; height:22px; border-radius:50%;
    border:none; background:transparent; color:var(--muted);
    font-size:0.7rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
    opacity:0; transition:opacity .15s, background .15s;
    line-height:1;
  }
  .ai-insight:hover .ai-dismiss-trigger { opacity:1; }
  .ai-dismiss-trigger:hover { background:var(--surface2); color:var(--text); }
  .ai-dismiss-menu {
    position:fixed;
    background:var(--surface); border:1px solid var(--border); border-radius:10px;
    box-shadow:0 12px 32px rgba(0,0,0,0.28); min-width:170px;
    z-index:99999; overflow:hidden;
    opacity:0; pointer-events:none; transform:translateY(-4px);
    transition:opacity .15s, transform .15s;
  }
  .ai-dismiss-menu.open { opacity:1; pointer-events:auto; transform:translateY(0); }
  .ai-dismiss-option {
    display:flex; align-items:center; gap:8px;
    padding:9px 14px; font-size:0.78rem; font-weight:600; color:var(--text);
    cursor:pointer; transition:background .1s; white-space:nowrap; border:none;
    background:transparent; width:100%; text-align:left;
  }
  .ai-dismiss-option:hover { background:var(--surface2); }
  .ai-dismiss-option.suppress { color:var(--danger); }

  .ai-insight-dismiss {
    position:absolute; top:10px; right:10px;
    width:20px; height:20px; border-radius:50%;
    border:none; background:transparent; color:var(--muted);
    font-size:0.65rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
    opacity:0; transition:opacity .15s, background .15s;
    line-height:1;
  }
  .ai-insight:hover .ai-insight-dismiss { opacity:1; }
  .ai-insight-dismiss:hover { background:var(--surface2); color:var(--text); }

  /* ── AI LOADING SKELETON ────────────────────────────── */
  .ai-loading { display:flex; flex-direction:column; gap:16px; }
  .ai-loading-header { display:flex; align-items:center; gap:12px; padding:12px 16px; background:rgba(212,136,14,0.07); border:1px solid rgba(212,136,14,0.2); border-radius:12px; }
  .ai-loading-spinner {
    width:28px; height:28px; border-radius:50%; flex-shrink:0;
    border:2.5px solid rgba(212,136,14,0.2);
    border-top-color:var(--purple);
    animation:spin .8s linear infinite;
  }
  .ai-skeleton-list { display:flex; flex-direction:column; gap:10px; }
  .ai-skeleton-row {
    display:flex; gap:12px; align-items:flex-start;
    padding:14px 16px; border-radius:12px;
    background:var(--surface); border:1px solid var(--border);
    animation:skeletonPulse 1.6s ease-in-out infinite;
  }
  .ai-skeleton-icon { width:32px; height:32px; border-radius:8px; background:var(--surface2); flex-shrink:0; }
  .ai-skeleton-body { flex:1; display:flex; flex-direction:column; gap:7px; padding-top:2px; }
  .ai-skeleton-title { height:11px; border-radius:6px; background:var(--surface2); }
  .ai-skeleton-text  { height:9px;  border-radius:6px; background:var(--surface2); opacity:0.6; }
  @keyframes skeletonPulse {
    0%, 100% { opacity:1; }
    50%       { opacity:0.45; }
  }


  /* ── CLAUDE ENABLE TOGGLE ───────────────────────────── */
  .claude-toggle {
    width:36px; height:20px; border-radius:10px; background:var(--surface2);
    border:1px solid var(--border); cursor:pointer; position:relative;
    transition:background .2s; flex-shrink:0;
  }
  .claude-toggle.on { background:var(--purple); border-color:var(--purple); }
  .claude-toggle-knob {
    position:absolute; top:2px; left:2px;
    width:14px; height:14px; border-radius:50%;
    background:#fff; transition:transform .2s;
    box-shadow:0 1px 3px rgba(0,0,0,0.3);
  }
  .claude-toggle.on .claude-toggle-knob { transform:translateX(16px); }

  /* ── AI MODE TOGGLE ─────────────────────────────────── */
  .ai-mode-toggle { display:flex; background:var(--surface2); border:1px solid var(--border); border-radius:9px; padding:2px; gap:2px; }
  .ai-mode-btn { font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:0.7rem; padding:4px 10px; border:none; border-radius:7px; background:transparent; color:var(--muted); cursor:pointer; transition:all .15s; white-space:nowrap; }
  .ai-mode-btn.active { background:var(--surface); color:var(--text); box-shadow:0 1px 4px rgba(0,0,0,0.15); }
  .ai-mode-btn:hover:not(.active) { color:var(--text); }

  /* ── REMINDER ROWS ──────────────────────────────────── */
  .reminder-list { display:flex; flex-direction:column; }
  .reminder-row {
    display:flex; justify-content:space-between; align-items:center;
    padding:8px 4px; gap:10px;
    border-bottom:1px solid var(--border);
    transition:background .12s;
  }
  .reminder-row:last-child { border-bottom:none; }
  .reminder-clickable { cursor:pointer; border-radius:6px; padding:8px 8px; margin:0 -4px; }
  .reminder-clickable:hover { background:var(--surface2); }
  body.light-mode .reminder-clickable:hover { background:rgba(0,0,0,0.04); }

  /* ── GLOBAL SETTINGS ────────────────────────────────── */
  .currency-opt {
    padding:7px 14px; border-radius:9px; border:1.5px solid var(--border);
    background:var(--surface2); color:var(--text); font-size:0.82rem;
    font-weight:700; cursor:pointer; transition:all .15s;
  }
  .currency-opt:hover { border-color:var(--muted); }
  .currency-opt.selected { border-color:var(--accent); background:rgba(240,224,96,0.1); color:var(--accent); }

  /* ── DASHBOARD: NEEDS ATTENTION PANELS ─────────── */
  .dash-needs-attention {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px 20px;
    margin-top: 8px;
  }
  .dna-title {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 14px;
  }
  .dna-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .dna-block {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
  }
  .dna-block-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .dna-count {
    background: var(--warn);
    color: #1a0a00;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 1px 7px;
    border-radius: 20px;
    min-width: 18px;
    text-align: center;
  }
  .dna-rows { display: flex; flex-direction: column; gap: 6px; }
  .dna-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    padding: 5px 0;
    border-bottom: 1px solid var(--border);
  }
  .dna-row:last-child { border-bottom: none; }
  .dna-row-clickable { cursor: pointer; border-radius: 6px; padding: 5px 8px; margin: 0 -8px; transition: background 0.15s; }
  .dna-row-clickable:hover { background: var(--surface2); }
  body.light-mode .dna-row-clickable:hover { background: rgba(0,0,0,0.04); }
  .dna-row-name { flex: 1; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dna-row-stage { font-size: 0.68rem; color: var(--muted); text-transform: capitalize; flex-shrink: 0; }
  .dna-row-val { font-weight: 700; flex-shrink: 0; }
  .dna-row-val.danger { color: var(--danger); }
  .dna-row-badge {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    flex-shrink: 0;
  }
  .dna-row-badge.warn { background: rgba(240,160,48,0.15); color: var(--warn); }
  .dna-big-val {
    font-size: 1.6rem;
    font-weight: 800;
    font-family: 'Bricolage Grotesque', sans-serif;
    margin: 4px 0 6px;
  }
  .dna-big-val.danger { color: var(--danger); }
  .dna-big-val.green  { color: var(--green); }
  .dna-big-val.warn   { color: var(--warn); }
  .dna-big-val.muted  { color: var(--muted); }
  .dna-sub { font-size: 0.72rem; color: var(--muted); }
  .dna-empty { font-size: 0.75rem; color: var(--green); font-weight: 600; }


  /* ── DASHBOARD: NEEDS ATTENTION PANELS ─────────── */
  .dash-needs-attention {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px 20px;
    margin-top: 8px;
  }
  .dna-title {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 14px;
  }
  .dna-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .dna-block {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
  }
  .dna-block-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .dna-count {
    background: var(--warn);
    color: #1a0a00;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 1px 7px;
    border-radius: 20px;
    min-width: 18px;
    text-align: center;
  }
  .dna-rows { display: flex; flex-direction: column; gap: 6px; }
  .dna-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    padding: 5px 0;
    border-bottom: 1px solid var(--border);
  }
  .dna-row:last-child { border-bottom: none; }
  .dna-row-clickable { cursor: pointer; border-radius: 6px; padding: 5px 8px; margin: 0 -8px; transition: background 0.15s; }
  .dna-row-clickable:hover { background: var(--surface2); }
  body.light-mode .dna-row-clickable:hover { background: rgba(0,0,0,0.04); }
  .dna-row-name { flex: 1; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dna-row-stage { font-size: 0.68rem; color: var(--muted); text-transform: capitalize; flex-shrink: 0; }
  .dna-row-val { font-weight: 700; flex-shrink: 0; }
  .dna-row-val.danger { color: var(--danger); }
  .dna-row-badge {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    flex-shrink: 0;
  }
  .dna-row-badge.warn { background: rgba(240,160,48,0.15); color: var(--warn); }
  .dna-big-val {
    font-size: 1.6rem;
    font-weight: 800;
    font-family: 'Bricolage Grotesque', sans-serif;
    margin: 4px 0 6px;
  }
  .dna-big-val.danger { color: var(--danger); }
  .dna-big-val.green  { color: var(--green); }
  .dna-big-val.warn   { color: var(--warn); }
  .dna-big-val.muted  { color: var(--muted); }
  .dna-sub { font-size: 0.72rem; color: var(--muted); }
  .dna-empty { font-size: 0.75rem; color: var(--green); font-weight: 600; }


  /* ── BADGE COUNT FIX ─────────────────────────────────── */
  .dna-count {
    background: rgba(240,160,48,0.18) !important;
    color: #f0c060 !important;
    border: 1px solid rgba(240,160,48,0.4) !important;
  }
  body.light-mode .dna-count {
    background: rgba(176,88,0,0.12) !important;
    color: #8a4400 !important;
    border: 1px solid rgba(176,88,0,0.35) !important;
  }

  /* ── KPI STAT TOOLTIP ─────────────────────────────────── */
  .kpi-tip {
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--surface2); border: 1px solid var(--border);
    color: var(--muted); font-size: 0.6rem; font-weight: 700;
    cursor: default; margin-left: 5px; flex-shrink: 0;
    vertical-align: middle; position: relative;
  }
  .kpi-tip:hover { border-color: var(--accent); color: var(--accent); }
  /* Tooltip bubble — rendered as a fixed div via JS, not ::after */
  #kpi-tooltip-bubble {
    position: fixed; z-index: 99999; pointer-events: none;
    background: var(--surface); border: 1px solid var(--border);
    color: var(--text); font-size: 0.72rem; font-weight: 400;
    padding: 7px 10px; border-radius: 8px;
    white-space: normal; width: 210px; text-align: left;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3); line-height: 1.5;
    opacity: 0; transition: opacity 0.1s;
  }
  #kpi-tooltip-bubble.visible { opacity: 1; }

  /* ── BOARD SETTINGS PANEL ───────────────────────────── */
  .board-settings-panel {
    position:fixed; top:0; right:-440px; width:420px; height:100vh;
    background:var(--surface); border-left:1px solid var(--border);
    box-shadow:-12px 0 40px rgba(0,0,0,0.4);
    z-index:900; display:flex; flex-direction:column;
    transition:right .25s cubic-bezier(.4,0,.2,1);
  }
  .board-settings-panel.open { right:0; }
  .bsp-header {
    padding:18px 22px; border-bottom:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
  }
  .bsp-header h3 { font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1rem; color:var(--text); margin:0; }
  .bsp-body { flex:1; overflow-y:auto; padding:18px 22px 32px; display:flex; flex-direction:column; gap:22px; }
  .bsp-section-title { font-size:0.72rem; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
  .bsp-save-btn { margin:0 22px 22px; padding:10px; border-radius:10px; background:linear-gradient(135deg,#f0d850 0%,#d4880e 45%,#d4880e 100%); color:#1a0a00; font-weight:800; font-size:0.85rem; border:none; cursor:pointer; transition:all .15s; }
  .bsp-save-btn:hover { background:linear-gradient(135deg,#f5e060 0%,#e09820 45%,#c07010 100%); box-shadow:0 4px 16px rgba(212,136,14,0.4); }
  .board-settings-btn {
    font-size:0.75rem; font-weight:700; padding:4px 12px; border-radius:7px;
    border:none; background:#E8A020;
    color:#1a0a00; cursor:pointer; transition:all .15s; display:inline-flex;
    align-items:center; gap:4px; vertical-align:middle;
  }
  .board-settings-btn:hover { background:#d4900a; box-shadow:0 4px 12px rgba(212,136,14,0.35); }

  /* ── REMIND ME PICKER ───────────────────────────────── */
  .remind-btn {
    font-size:0.68rem; font-weight:700; padding:2px 7px; border-radius:6px;
    border:1px solid var(--border); background:transparent; color:var(--muted);
    cursor:pointer; transition:all .15s; white-space:nowrap;
  }
  .remind-btn:hover { color:var(--accent2); border-color:var(--accent2); background:rgba(96,192,240,0.08); }
  .remind-btn.active { color:var(--accent2); border-color:var(--accent2); background:rgba(96,192,240,0.1); }
  .remind-btn.overdue { color:var(--warn); border-color:var(--warn); background:rgba(240,160,48,0.12); animation:remind-pulse 2s ease-in-out infinite; }
  .remind-btn.overdue:hover { color:var(--warn); border-color:var(--warn); background:rgba(240,160,48,0.22); }
  @keyframes remind-pulse { 0%,100% { box-shadow:0 0 0 0 rgba(240,160,48,0); } 50% { box-shadow:0 0 0 3px rgba(240,160,48,0.25); } }
  .remind-picker {
    position:fixed; z-index:3000;
    background:var(--surface); border:1px solid var(--border); border-radius:14px;
    padding:16px; box-shadow:0 12px 40px rgba(0,0,0,0.5); width:240px;
    display:none;
  }
  .remind-picker.open { display:block; }
  .remind-picker-title { font-size:0.78rem; font-weight:800; color:var(--text); margin-bottom:12px; }
  .remind-quick { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:12px; }
  .remind-quick-btn.active {
    background: var(--accent) !important;
    color: #fff !important;
    border-color: var(--accent) !important;
  }
  .remind-quick-btn {
    padding:7px 4px; border-radius:8px; border:1px solid var(--border);
    background:var(--surface2); color:var(--text); font-size:0.75rem; font-weight:700;
    cursor:pointer; text-align:center; transition:all .15s;
  }
  .remind-quick-btn:hover { border-color:var(--accent2); color:var(--accent2); background:rgba(96,192,240,0.08); }
  .remind-picker-divider { font-size:0.7rem; color:var(--muted); margin-bottom:8px; font-weight:600; }
  .remind-date-row { display:flex; gap:6px; align-items:center; }
  .remind-date-input { flex:1; padding:6px 10px; border-radius:8px; border:1px solid var(--border); background:var(--surface2); color:var(--text); font-size:0.78rem; }
  .remind-date-input:focus { outline:none; border-color:var(--accent2); }
  .remind-set-btn { padding:6px 12px; border-radius:8px; background:var(--accent2); color:#0e0e12; font-size:0.75rem; font-weight:800; border:none; cursor:pointer; }
  .remind-clear-btn { width:100%; margin-top:8px; padding:6px; border-radius:8px; border:1px solid rgba(240,80,96,0.3); background:transparent; color:var(--danger); font-size:0.74rem; font-weight:700; cursor:pointer; }
  .remind-clear-btn:hover { background:rgba(240,80,96,0.08); }

  /* ── ACCESSIBILITY ──────────────────────────────────── */
  /* Skip to main content link */
  .skip-link {
    position:fixed; top:-100px; left:16px; z-index:99999;
    background:var(--accent); color:#0e0e12; font-weight:800;
    padding:10px 18px; border-radius:8px; text-decoration:none; font-size:0.85rem;
    transition:top .15s;
  }
  .skip-link:focus { top:16px; }

  /* Global focus ring — visible on all interactive elements */
  *:focus-visible {
    outline:2.5px solid var(--accent);
    outline-offset:2px;
    border-radius:4px;
  }
  /* Remove default outline only when focus-visible is supported */
  *:focus:not(:focus-visible) { outline:none; }

  /* Stronger focus for cards */
  .card:focus-visible, .deal-card:focus-visible {
    outline:2.5px solid var(--accent);
    outline-offset:3px;
  }

  /* Button focus */
  button:focus-visible, .nav-btn:focus-visible, .add-btn:focus-visible {
    outline:2.5px solid var(--accent);
    outline-offset:2px;
  }

  /* ── DARK MODE CONTRAST FIXES ──────────────────────── */
  /* Cards — lift them off the background clearly */
  body:not(.light-mode) .card {
    background:#1e1e30;
    border-color:#38385a;
    box-shadow:0 2px 8px rgba(0,0,0,0.4);
  }
  body:not(.light-mode) .card:hover {
    border-color:#5050a0;
    box-shadow:0 4px 16px rgba(0,0,0,0.5);
  }
  /* Deal cards */
  body:not(.light-mode) .deal-card {
    background:#1e1e30;
    border-color:#38385a;
    box-shadow:0 2px 8px rgba(0,0,0,0.4);
  }
  body:not(.light-mode) .deal-card:hover {
    border-color:#5050a0;
  }
  /* Column headers */
  body:not(.light-mode) .column {
    background:#111120;
  }
  body:not(.light-mode) .sales-column {
    background:#111120;
    border-radius:14px;
  }
  /* KPI / stat cards on dashboard */
  body:not(.light-mode) .kpi-card,
  body:not(.light-mode) .stat-card {
    background:#1e1e30;
    border-color:#38385a;
  }
  /* Insight rows */
  body:not(.light-mode) .insight-item {
    background:#1e1e30;
    border-color:#38385a;
  }
  /* Card title brighter */
  body:not(.light-mode) .card-title {
    color:#f4f4ff;
  }
  body:not(.light-mode) .card-desc,
  body:not(.light-mode) .deal-notes {
    color:#b0b0d8;
  }
  /* Deal company name */
  body:not(.light-mode) .deal-company {
    color:#f4f4ff;
  }
  /* Muted text slightly brighter */
  body:not(.light-mode) .card-desc { color:#a8a8cc; }
  /* Drop zone columns */
  body:not(.light-mode) .drop-zone { background:transparent; }
  /* Archive cards */
  body:not(.light-mode) .archive-card {
    background:#1e1e30;
    border-color:#38385a;
  }
  /* Section headers on dashboard */
  body:not(.light-mode) .dash-section-title { color:#d0d0f0; }
  /* Progress label */
  body:not(.light-mode) .progress-label { color:#9090c0; }
  body:not(.light-mode) .progress-label span:first-child { color:#9090c0; }

  /* ── DASHBOARD VIEW TOGGLE ──────────────────────── */
  .dash-view-toggle { display:none !important; } /* Unified dashboard — toggle retired */
  .dash-view-btn { padding:6px 14px; border-radius:7px; border:none; background:transparent; color:var(--muted); font-size:0.8rem; font-weight:700; cursor:pointer; transition:all .15s; display:flex; align-items:center; gap:6px; white-space:nowrap; }
  .dash-view-btn.active { background:var(--surface2); color:var(--text); box-shadow:0 1px 4px rgba(0,0,0,0.3); }
  /* ── CHARTS VIEW ─────────────────────────────────── */
  #dashChartsView { display:none; }
  #dashChartsView.visible { display:block; }
  #dashKpiView.hidden { display:none; }
  .charts-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:16px; }
  .charts-grid > * { min-width:0; }
  .charts-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; margin-top:16px; }
  .charts-grid-3 > * { min-width:0; }
  .charts-grid-wide { display:grid; grid-template-columns:2fr 1fr; gap:20px; margin-top:16px; }
  .charts-grid-wide > * { min-width:0; }
  .chart-panel { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:20px 22px; }
  .chart-panel-title { font-size:0.72rem; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin-bottom:16px; }
  .chart-canvas-wrap { display:flex; align-items:center; justify-content:center; position:relative; }
  /* Pie/donut charts */
  .pie-wrap { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
  .pie-legend { display:flex; flex-direction:column; gap:8px; flex:1; min-width:110px; }
  .pie-legend-item { display:flex; align-items:center; gap:8px; font-size:0.78rem; color:var(--text); }
  .pie-legend-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
  .pie-legend-label { flex:1; font-weight:600; }
  .pie-legend-val { font-weight:800; color:var(--text); }
  /* Bar chart */
  .chart-bar-group { display:flex; flex-direction:column; gap:10px; }
  .chart-bar-row { display:flex; flex-direction:column; gap:4px; }
  .chart-bar-meta { display:flex; justify-content:space-between; font-size:0.76rem; }
  .chart-bar-label { color:var(--text); font-weight:600; }
  .chart-bar-val { color:var(--muted); font-weight:700; }
  .chart-bar-track { height:10px; background:var(--surface2); border-radius:6px; overflow:hidden; }
  .chart-bar-fill { height:100%; border-radius:6px; transition:width .5s cubic-bezier(.4,0,.2,1); }
  /* Grouped stat bar */
  .chart-stat-row { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); }
  .chart-stat-row:last-child { border-bottom:none; }
  .chart-stat-icon { font-size:1.2rem; width:28px; text-align:center; }
  .chart-stat-info { flex:1; }
  .chart-stat-label { font-size:0.76rem; font-weight:700; color:var(--text); }
  .chart-stat-sub { font-size:0.7rem; color:var(--muted); margin-top:1px; }
  .chart-stat-value { font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1rem; }
  /* Monthly bar chart */
  .monthly-bars { display:flex; align-items:flex-end; gap:8px; height:120px; padding-top:8px; }
  .monthly-bar-col { display:flex; flex-direction:column; align-items:center; gap:4px; flex:1; }
  .monthly-bar-fill { width:100%; border-radius:4px 4px 0 0; min-height:2px; transition:height .5s cubic-bezier(.4,0,.2,1); background:var(--accent); }
  .monthly-bar-label { font-size:0.62rem; color:var(--muted); font-weight:700; text-transform:uppercase; white-space:nowrap; }
  .monthly-bar-val { font-size:0.65rem; color:var(--text); font-weight:800; }
  /* Big number stat in chart view — matches kpi-card style */
  .chart-kpi-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:14px; margin-bottom:0; }
  .chart-kpi-pill {
    position:relative; overflow:hidden;
    background:var(--surface); border:1px solid var(--border);
    border-radius:16px; padding:22px 20px 18px;
    transition:transform .2s, border-color .2s, box-shadow .2s;
  }
  .chart-kpi-pill:hover { transform:translateY(-3px); border-color:var(--muted); box-shadow:0 12px 40px rgba(0,0,0,0.35); }
  .chart-kpi-pill::before {
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background:var(--ckpi-color, var(--accent)); border-radius:16px 16px 0 0;
  }
  .chart-kpi-pill::after {
    content:''; position:absolute; top:-40px; right:-20px;
    width:100px; height:100px; border-radius:50%;
    background:radial-gradient(circle, var(--ckpi-color, var(--accent)) 0%, transparent 70%);
    opacity:.07; pointer-events:none;
  }
  .chart-kpi-pill-val { font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:2.2rem; line-height:1; margin-bottom:4px; color:var(--ckpi-color, var(--text)); }
  .chart-kpi-pill-label { font-size:0.72rem; font-weight:500; color:var(--muted); text-transform:uppercase; letter-spacing:1px; }
  /* Section divider — unified for both views */
  .charts-section-label { font-size:0.7rem; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin:32px 0 14px; display:flex; align-items:center; gap:8px; }
  .charts-section-label::after { content:''; flex:1; height:1px; background:var(--border); }
  @media (max-width:900px) {
    .charts-grid, .charts-grid-wide { grid-template-columns:1fr; }
    .charts-grid-3 { grid-template-columns:1fr 1fr; }
    .chart-kpi-row { grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); }
  }
  @media (max-width:600px) {
    .charts-grid-3 { grid-template-columns:1fr; }
    .chart-kpi-row { grid-template-columns:1fr 1fr; }
  }
  /* ── RESPONSIVE — WIDE LAPTOP (≤1400px) ─────────── */
  @media (max-width:1400px) {
    .kpi-grid { gap:10px; }
    .kpi-card { padding:18px 14px 14px; }
  }

  /* ── RESPONSIVE — LAPTOP (≤1280px) ──────────────── */
  @media (max-width:1280px) {
    header { padding:10px 20px; }
    .board-wrapper, .sales-wrapper { padding:20px 24px 16px; }
    .dashboard-wrapper { padding:24px 28px 48px; }
    .af-wrapper { padding:20px 24px 48px; }
    .fc-wrapper { padding:24px 28px 48px; }
    .qt-wrapper { padding:24px 28px 48px; }
    .archive-wrapper { padding:20px 24px; }
    .column, .sales-column { width:265px; }
    .board, .sales-board { gap:14px; }
    .kpi-grid { grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:12px; }
    .kpi-value { font-size:2rem; }
    .charts-grid-3 { grid-template-columns:1fr 1fr; }
  }

  /* ── RESPONSIVE — SMALL LAPTOP (≤1100px) ─────────── */
  @media (max-width:1100px) {
    .app-sidebar { width:200px; }
    header { margin-left:200px; padding:10px 18px; }
    main#main-content { margin-left:200px; }
    #viewDashboard, #viewArchive { height:calc(var(--vph) - 48px); }
    #viewBoard, #viewSales { height:calc(var(--vph) - 48px); }
    #viewHelp, #viewTime, #viewActivity { height:calc(var(--vph) - 48px); }
    #viewForecast { height:calc(var(--vph) - 48px); }
    #viewQuotes { height:calc(var(--vph) - 48px); }
    .board-wrapper, .sales-wrapper { padding:16px 18px 16px; }
    .dashboard-wrapper { padding:20px 20px 40px; }
    .time-wrapper { padding:20px 20px 40px; }
    .af-wrapper { padding:20px 20px 40px; }
    .fc-wrapper { padding:20px 20px 40px; }
    .qt-wrapper { padding:20px 20px 40px; }
    .archive-wrapper { padding:16px 18px; }
    .column, .sales-column { width:245px; }
    .board, .sales-board { gap:12px; }
    .card, .deal-card { padding:12px 13px; }
    .kpi-grid { grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; }
    .kpi-value { font-size:1.8rem; }
    .charts-grid-wide { grid-template-columns:1fr; }
    .charts-grid { grid-template-columns:1fr; }
    .dash-cols { gap:14px; }
    .dash-headline, .sales-title, .archive-title { font-size:1.3rem; }
    .notif-panel { width:380px; right:10px; }
    .settings-modal { width:720px; padding:24px 26px; }
    .modal { width:660px; padding:26px; }
    .deal-modal { width:660px; padding:26px; }
    .archive-inner { max-width:100%; margin:0; }
  }

  /* ── RESPONSIVE — TABLET (≤700px) ─────────────── */
  @media (max-width:700px) {
    .kpi-grid { grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:8px; }
    .kpi-card { min-height:80px; padding:12px 12px 10px; }
    .kpi-value { font-size:1.6rem; }
    .kpi-icon { font-size:1.1rem; }
    .dash-section-label { margin-top:20px; margin-bottom:10px; }
    .dash-cols-3, .dash-cols { grid-template-columns:1fr; }
    .charts-grid, .charts-grid-wide, .charts-grid-3 { grid-template-columns:1fr; }
    .chart-kpi-row { grid-template-columns:1fr 1fr; }
    .dashboard-wrapper { padding:12px 10px 28px; }
    .dash-headline, .sales-title, .archive-title { font-size:1.1rem; }
  }

  /* ── RESPONSIVE — COMPACT LAPTOP (≤900px) ────────── */
  @media (max-width:900px) {
    .app-sidebar { width:56px; padding:0; }
    .sidebar-logo .logo-text { display:none; }
    .sidebar-logo { padding:14px 10px; justify-content:center; }
    .sidebar-label { display:none; }
    .sidebar-item { justify-content:center; padding:10px; }
    .sidebar-item.active::before { width:3px; height:16px; }
    .sidebar-nav { padding:10px 6px 110px; }
    .sidebar-bottom { padding:8px 6px 12px; }
    .sidebar-divider { margin:6px 8px; }
    header { margin-left:56px; padding:10px 14px; }
    main#main-content { margin-left:56px; }
    #viewDashboard, #viewArchive { height:calc(var(--vph) - 48px); }
    #viewBoard, #viewSales { height:calc(var(--vph) - 48px); }
    #viewHelp, #viewTime, #viewActivity { height:calc(var(--vph) - 48px); }
    #viewForecast { height:calc(var(--vph) - 48px); }
    #viewQuotes { height:calc(var(--vph) - 48px); }
    .dash-cols { grid-template-columns:1fr; }
    .dash-cols-3 { grid-template-columns:1fr; }
    .add-btn { padding:7px 13px; font-size:0.78rem; }
    .board-wrapper, .sales-wrapper { padding:14px 14px 16px; }
    .dashboard-wrapper { padding:16px 14px 36px; }
    .time-wrapper { padding:16px 14px 36px; }
    .af-wrapper { padding:16px 14px 36px; }
    .fc-wrapper { padding:16px 14px 36px; }
    .qt-wrapper { padding:16px 14px 36px; }
    .fc-scenarios { grid-template-columns:1fr; }
    .qt-grid { grid-template-columns:1fr; }
    .fc-kpi-strip { grid-template-columns:repeat(2,1fr); }
    .qt-kpi-strip { grid-template-columns:repeat(2,1fr); }
    .af-search { width:140px; }
    .time-summary-row { grid-template-columns:1fr 1fr 1fr; }
    .archive-wrapper { padding:14px; }
    .column, .sales-column { width:230px; }
    .kpi-grid { grid-template-columns:repeat(auto-fit,minmax(100px,1fr)); gap:8px; }
    .kpi-value { font-size:1.5rem; }
    .kpi-card { min-height:90px; padding:14px 12px 12px; }
    .sales-summary { gap:8px; }
    .sales-stat { padding:12px 14px; }
    .sales-stat-value { font-size:1.45rem; }
    .notif-panel { width:320px; right:8px; }
    .settings-modal { width:95vw; padding:22px 20px; }
    .modal { width:95vw; padding:22px; }
    .deal-modal { width:95vw; padding:22px; }
    .confirm-modal { width:95vw; padding:28px 22px; }
    .restore-modal { width:95vw; padding:24px; }
    .archive-grid { grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; }
    .dash-headline, .sales-title, .archive-title { font-size:1.2rem; }
    .dash-filter-btn { padding:5px 10px; font-size:0.72rem; }
  }

  /* ── RESPONSIVE — MOBILE (≤480px) ─────────────── */
  @media (max-width:480px) {
    .kpi-grid { grid-template-columns:1fr 1fr; gap:6px; }
    .kpi-card { min-height:70px; padding:10px 10px 8px; }
    .kpi-value { font-size:1.35rem; }
    .dashboard-wrapper { padding:10px 8px 24px; }
    .dash-filter-btn { padding:4px 8px; font-size:0.68rem; }
    .chart-kpi-row { grid-template-columns:1fr 1fr; }
    .dash-headline, .sales-title, .archive-title { font-size:0.95rem; }
  }

  /* light mode overrides for new elements */
  body.light-mode header { background:rgba(240,242,248,0.95); }
  body.light-mode .app-sidebar { background:#fff; }
  body.light-mode .nav-btn.active { background:var(--surface); }
  body.light-mode .card { box-shadow:0 1px 6px rgba(0,0,0,0.07); }
  body.light-mode .card:hover { box-shadow:0 10px 28px rgba(0,0,0,0.12); }
  body.light-mode .deal-card { box-shadow:0 1px 6px rgba(0,0,0,0.07); }
  body.light-mode .deal-card:hover { box-shadow:0 10px 28px rgba(0,0,0,0.12); }
  body.light-mode .archive-card { box-shadow:0 1px 6px rgba(0,0,0,0.06); }
  body.light-mode .archive-card:hover { box-shadow:0 8px 24px rgba(0,0,0,0.12); }
  body.light-mode .modal { box-shadow:0 24px 60px rgba(0,0,0,0.2); }
  body.light-mode .deal-modal { box-shadow:0 24px 60px rgba(0,0,0,0.2); }
  body.light-mode .confirm-modal { box-shadow:0 24px 60px rgba(0,0,0,0.2); }
  body.light-mode .settings-modal { box-shadow:0 24px 60px rgba(0,0,0,0.2); }
  body.light-mode .restore-modal { box-shadow:0 24px 60px rgba(0,0,0,0.2); }
  body.light-mode .priority-high   { background:rgba(200,32,60,0.08);  color:#901428; border-color:rgba(200,32,60,0.3); }
  body.light-mode .priority-medium { background:rgba(176,88,0,0.08);   color:#7a3c00; border-color:rgba(176,88,0,0.3); }
  body.light-mode .priority-low    { background:rgba(26,122,176,0.08); color:#0d5a8a; border-color:rgba(26,122,176,0.3); }
  body.light-mode .due-ok      { background:rgba(20,122,56,0.08);  color:#0a6028; border-color:rgba(20,122,56,0.3); }
  body.light-mode .due-soon    { background:rgba(176,88,0,0.08);   color:#7a3c00; border-color:rgba(176,88,0,0.3); }
  body.light-mode .due-overdue { background:rgba(200,32,60,0.08);  color:#901428; border-color:rgba(200,32,60,0.3); }
  body.light-mode .stale-badge.show-danger { background:rgba(200,32,60,0.08);  color:#901428; border-color:rgba(200,32,60,0.3); }
  body.light-mode .stale-badge.show-warn   { background:rgba(176,88,0,0.08);   color:#7a3c00; border-color:rgba(176,88,0,0.3); }
  body.light-mode .deal-prob  { background:rgba(26,122,176,0.08); color:#0d5a8a; border-color:rgba(26,122,176,0.3); }
  body.light-mode .deal-close { background:rgba(176,88,0,0.08);   color:#7a3c00; border-color:rgba(176,88,0,0.3); }
  body.light-mode .convert-btn { background:var(--green); color:#fff; }
  body.light-mode .card-link.figma-desktop { background:rgba(112,32,192,0.08); color:#5a18a0; border-color:rgba(112,32,192,0.3); }
  body.light-mode .card-link.figma-mobile  { background:rgba(26,122,176,0.08); color:#0d5a8a; border-color:rgba(26,122,176,0.3); }
  body.light-mode .card-link.dev-link      { background:rgba(184,152,0,0.08);  color:#706000; border-color:rgba(184,152,0,0.3); }
  body.light-mode .card-link.docs-link     { background:rgba(20,122,56,0.08);  color:#0a6028; border-color:rgba(20,122,56,0.3); }
  body.light-mode .card-link.timeline-link { background:rgba(176,88,0,0.08);   color:#7a3c00; border-color:rgba(176,88,0,0.3); }
  body.light-mode .card-link.pm-link       { background:rgba(200,32,60,0.08);  color:#901428; border-color:rgba(200,32,60,0.3); }
  body.light-mode .notif-item.critical { background:rgba(200,32,60,0.06);  color:#901428; border-color:rgba(200,32,60,0.2); }
  body.light-mode .notif-item.warning  { background:rgba(176,88,0,0.06);   color:#7a3c00; border-color:rgba(176,88,0,0.2); }
  body.light-mode .notif-item strong   { color:var(--text); }
  body.light-mode .snooze-btn { border-color:rgba(0,0,0,0.18); color:rgba(0,0,0,0.4); }
  body.light-mode .snooze-btn:hover { border-color:rgba(0,0,0,0.45); color:rgba(0,0,0,0.75); background:rgba(0,0,0,0.04); }
  body.light-mode .snooze-dropdown { background:#fff; border-color:var(--border); box-shadow:0 10px 32px rgba(0,0,0,0.15); }
  body.light-mode .snooze-opt { color:var(--text); border-bottom-color:var(--border); }
  body.light-mode .snooze-opt:hover { background:var(--surface2); }
  body.light-mode .card-btn { background:var(--surface2); border-color:var(--border); color:var(--muted); }
  body.light-mode .card-btn:hover { color:var(--text); border-color:var(--muted); }
  body.light-mode .dual-badge { color:#5a18a0; }
  body.light-mode .col-rename-input:focus { border-color:var(--accent); }
  body.light-mode .col-title-input { background:var(--surface2); color:var(--text); }
  body.light-mode .sales-stat { box-shadow:0 1px 6px rgba(0,0,0,0.06); }
  body.light-mode .sales-stat:hover { box-shadow:0 12px 32px rgba(0,0,0,0.12); border-color:var(--kpi-color, var(--muted)); }

/* ══════════════════════════════════════════════════
   MODULE ONBOARDING OVERLAY
══════════════════════════════════════════════════ */
#moduleOnboarding {
  position:fixed; inset:0; z-index:2000;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  animation: moduleOnboardFadeIn .4s ease;
}
@keyframes moduleOnboardFadeIn { from{opacity:0;transform:scale(0.97)} to{opacity:1;transform:scale(1)} }
#moduleOnboarding.hidden { display:none; }

.mob-inner {
  max-width:680px; width:100%;
  display:flex; flex-direction:column; align-items:center;
}
.mob-logo {
  font-family:'Bricolage Grotesque',sans-serif; font-weight:800;
  font-size:1.4rem; letter-spacing:-0.5px;
  display:flex; align-items:center; gap:10px; margin-bottom:40px;
}
.mob-logo-mark {
  width:38px; height:38px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.mob-logo-mark svg { width:34px; height:34px; }
.mob-logo span { color:var(--accent); }
.mob-heading {
  font-family:'Bricolage Grotesque',sans-serif; font-weight:800;
  font-size:2rem; text-align:center; letter-spacing:-0.5px;
  line-height:1.2; margin-bottom:10px;
}
.mob-sub {
  font-size:0.92rem; color:var(--muted); text-align:center;
  line-height:1.6; margin-bottom:44px; max-width:440px;
}
.mob-options {
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
  width:100%; margin-bottom:32px;
}
@media(max-width:600px) { .mob-options { grid-template-columns:1fr; } }
.mob-option {
  background:var(--surface); border:2px solid var(--border);
  border-radius:18px; padding:28px 20px 24px;
  cursor:pointer; transition:all .22s;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  text-align:center; position:relative; overflow:hidden;
}
.mob-option::before {
  content:''; position:absolute; inset:0;
  background:var(--mob-accent-bg, transparent);
  transition:opacity .22s; opacity:0;
}
.mob-option:hover { border-color:var(--mob-accent,var(--accent)); transform:translateY(-3px); box-shadow:0 12px 40px rgba(0,0,0,0.35); }
.mob-option:hover::before { opacity:1; }
.mob-option.selected { border-color:var(--mob-accent,var(--accent)); box-shadow:0 0 0 4px var(--mob-glow,rgba(240,224,96,0.12)), 0 12px 40px rgba(0,0,0,0.35); }
.mob-option.selected::before { opacity:1; }
.mob-option-icon { font-size:2.2rem; line-height:1; position:relative; z-index:1; }
.mob-option-title { font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1rem; position:relative; z-index:1; }
.mob-option-desc { font-size:0.78rem; color:var(--muted); line-height:1.55; position:relative; z-index:1; }
.mob-option[data-choice="projects"] { --mob-accent:var(--accent);  --mob-accent-bg:rgba(240,224,96,0.04); --mob-glow:rgba(240,224,96,0.15); }
.mob-option[data-choice="sales"]    { --mob-accent:var(--green);   --mob-accent-bg:rgba(96,240,144,0.04); --mob-glow:rgba(96,240,144,0.15); }
.mob-option[data-choice="both"]     { --mob-accent:var(--purple);  --mob-accent-bg:rgba(212,136,14,0.04); --mob-glow:rgba(212,136,14,0.15); }
.mob-option.selected .mob-option-title { color:var(--mob-accent); }
.mob-check {
  position:absolute; top:12px; right:12px; width:22px; height:22px; border-radius:50%;
  background:var(--mob-accent,var(--accent)); color:#0e0e12;
  font-size:0.7rem; font-weight:900; display:none; align-items:center; justify-content:center; z-index:2;
}
.mob-option.selected .mob-check { display:flex; }
.mob-cta {
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700;
  font-size:0.95rem; padding:14px 44px;
  background:var(--accent); color:#0e0e12;
  border:none; border-radius:12px; cursor:pointer;
  transition:all .18s; opacity:0.35; pointer-events:none;
}
.mob-cta.ready { opacity:1; pointer-events:auto; }
.mob-cta.ready:hover { background:linear-gradient(135deg,#f5e060 0%,#e09820 45%,#c07010 100%); transform:translateY(-2px); box-shadow:0 4px 16px rgba(212,136,14,0.4); }
.mob-footer { margin-top:20px; font-size:0.75rem; color:var(--muted); text-align:center; }

/* ── Module Manager in Settings ─────────────────── */
.module-card {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border:1px solid var(--border);
  border-radius:12px; background:var(--surface2); gap:12px; margin-bottom:10px;
}
.module-card-left { display:flex; align-items:center; gap:12px; }
.module-card-icon { font-size:1.4rem; width:36px; text-align:center; }
.module-card-name { font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:0.9rem; margin-bottom:2px; }
.module-card-desc { font-size:0.76rem; color:var(--muted); }
.module-toggle-wrap { display:flex; align-items:center; gap:8px; font-size:0.78rem; font-weight:600; color:var(--muted); flex-shrink:0; }
.module-lock-note { font-size:0.72rem; color:var(--muted); font-style:italic; margin-top:6px; }

/* ── API Setup Wizard ──────────────────────────────── */
#apiWizardOverlay {
  position:fixed; inset:0; z-index:100001; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity 0.25s ease;
}
#apiWizardOverlay.open { opacity:1; pointer-events:all; }
.api-wiz-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.api-wiz-card {
  position:relative; background:var(--surface); border:1px solid var(--border); border-radius:20px;
  padding:32px 28px 28px; max-width:480px; width:92%;
  box-shadow:0 24px 80px rgba(0,0,0,0.35); transform:translateY(12px) scale(0.97); transition:transform 0.3s ease;
}
#apiWizardOverlay.open .api-wiz-card { transform:translateY(0) scale(1); }
.api-wiz-close {
  position:absolute; top:12px; right:14px; background:none; border:none; font-size:20px;
  color:var(--muted); cursor:pointer; width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; transition:all 0.15s;
}
.api-wiz-close:hover { background:var(--surface2); color:var(--text); }
.api-wiz-title {
  font-family:'Bricolage Grotesque',sans-serif; font-size:1.15rem; font-weight:800;
  color:var(--text); text-align:center; margin:0 0 4px;
}
.api-wiz-sub { font-size:0.82rem; color:var(--muted); text-align:center; margin:0 0 22px; line-height:1.5; }
.api-wiz-steps { display:flex; flex-direction:column; gap:0; }
.api-wiz-step {
  display:flex; align-items:flex-start; gap:14px; padding:14px 0;
  border-bottom:1px solid var(--border); font-size:0.84rem; color:var(--text); line-height:1.6;
}
.api-wiz-step:last-child { border-bottom:none; padding-bottom:0; }
.api-wiz-step:first-child { padding-top:0; }
.api-wiz-num {
  flex-shrink:0; width:28px; height:28px; border-radius:50%; background:var(--accent); color:#0e0e12;
  font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:0.82rem;
  display:flex; align-items:center; justify-content:center; margin-top:1px;
}
.api-wiz-step a { color:var(--purple); font-weight:700; }
.api-wiz-step a:hover { text-decoration:underline; }
.api-wiz-step code { font-size:0.78rem; background:var(--surface2); padding:1px 6px; border-radius:4px; color:var(--accent); }
.api-wiz-footer {
  margin-top:18px; padding-top:14px; border-top:1px solid var(--border);
  font-size:0.76rem; color:var(--muted); text-align:center; line-height:1.6;
}

/* ── ACTIVITY LOG ──────────────────────────────────────── */
.activity-section { margin-top:8px; }
.activity-add {
  display:flex; flex-direction:column; gap:6px; margin-bottom:14px;
}
.activity-add-footer {
  display:flex; justify-content:flex-end; align-items:center; gap:10px;
}
.activity-input {
  flex:1 1 auto; font-family:'Space Grotesk',sans-serif; font-size:0.82rem;
  background:var(--bg); border:1.5px solid var(--border); color:var(--text);
  border-radius:9px; padding:10px 14px; outline:none; resize:none;
  min-height:56px; max-height:400px; overflow-y:auto; transition:border-color 0.2s;
}
.activity-input:focus { border-color:var(--accent); }
.activity-input::placeholder { color:var(--muted); }
.activity-add-btn {
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700;
  font-size:0.78rem; padding:5px 20px; height:28px;
  background:var(--accent); color:#0e0e12;
  border:none; border-radius:8px; cursor:pointer; transition:all 0.15s;
  flex-shrink:0; white-space:nowrap;
}
.activity-add-btn:hover { background:linear-gradient(135deg,#f5e060 0%,#e09820 45%,#c07010 100%); }
.activity-log { display:flex; flex-direction:column; gap:0; }
.activity-entry {
  display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--border);
  font-size:0.9375rem; line-height:1.6; position:relative;
}
.activity-entry:last-child { border-bottom:none; }
.activity-dot {
  width:8px; height:8px; border-radius:50%; background:var(--accent);
  flex-shrink:0; margin-top:6px;
}
.activity-date {
  font-size:0.7rem; color:var(--muted); font-weight:600;
  white-space:nowrap; min-width:80px; flex-shrink:0; margin-top:1px;
}
.activity-text { color:var(--text); flex:1; border-radius:6px; padding:2px 4px; margin:-2px -4px; word-break:break-word; }
/* 3-dot activity menu */
.act-menu-wrap { position:relative; flex-shrink:0; }
.act-menu-btn {
  background:none; border:none; cursor:pointer; color:var(--muted);
  font-size:1.1rem; font-weight:700; padding:1px 6px; border-radius:5px;
  line-height:1; opacity:0.45; transition:opacity 0.15s, background 0.15s;
}
.act-menu-btn:hover { opacity:1; background:var(--surface2); }
.act-menu-dropdown {
  display:none; position:absolute; top:100%; right:0; z-index:9999;
  background:var(--bg); border:1.5px solid var(--border); border-radius:9px;
  padding:4px; box-shadow:0 4px 18px rgba(0,0,0,0.22); min-width:110px;
}
.act-menu-dropdown button {
  display:flex; align-items:center; gap:7px; width:100%;
  background:none; border:none; cursor:pointer; padding:7px 10px;
  border-radius:6px; font-size:0.82rem; font-weight:600;
  color:var(--text); font-family:'Space Grotesk',sans-serif; text-align:left;
  transition:background 0.12s;
}
.act-menu-dropdown button:hover { background:var(--surface2); }
.act-menu-dropdown button.danger { color:var(--danger); }
.act-menu-dropdown button.danger:hover { background:rgba(240,80,96,0.1); }
.act-menu-divider { height:1px; background:var(--border); margin:3px 4px; }
.activity-action-btn {
  background:none; border:none; color:var(--text); cursor:pointer;
  font-size:0.875rem; font-weight:600; padding:3px 7px; border-radius:4px; transition:all 0.15s;
}
.activity-action-btn:hover { background:var(--surface2); }
.activity-del { color:var(--danger) !important; }
.activity-del:hover { background:rgba(240,80,96,0.12) !important; }
.activity-edit-wrap { flex:1; display:flex; flex-direction:column; gap:6px; }
.activity-edit-input {
  font-family:'Space Grotesk',sans-serif; font-size:0.8rem;
  background:var(--bg); border:1.5px solid var(--accent); color:var(--text);
  border-radius:7px; padding:8px 10px; outline:none; resize:none;
  min-height:36px; max-height:400px; overflow-y:auto; line-height:1.5; flex:1 1 auto; width:100%;
}
.activity-edit-btns { display:flex; gap:6px; }
.activity-save-btn {
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700;
  font-size:0.72rem; padding:4px 14px; background:linear-gradient(135deg,#f0d850 0%,#d4880e 45%,#d4880e 100%); color:#1a0a00;
  border:none; border-radius:6px; cursor:pointer;
}
.activity-save-btn:hover { background:linear-gradient(135deg,#f5e060 0%,#e09820 45%,#c07010 100%); }
.activity-cancel-btn {
  font-family:'Bricolage Grotesque',sans-serif; font-weight:600;
  font-size:0.72rem; padding:4px 12px; background:transparent; color:var(--muted);
  border:1.5px solid var(--border); border-radius:6px; cursor:pointer;
}
.activity-cancel-btn:hover { color:var(--text); border-color:var(--text); }
.activity-empty { font-size:0.78rem; color:var(--muted); padding:8px 0; font-style:italic; }

/* Formatting toolbar */
.activity-toolbar { display:flex;align-items:center;gap:4px;padding:5px 8px;background:var(--surface2);border:1.5px solid var(--border);border-bottom:none;border-radius:9px 9px 0 0;flex-wrap:wrap; }
.activity-toolbar-btn { width:26px;height:26px;border:1px solid var(--border);border-radius:5px;background:none;color:var(--text);cursor:pointer;font-size:0.8rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.15s; }
.activity-toolbar-btn:hover { background:rgba(255,255,255,0.08); }
.activity-toolbar-divider { width:1px;height:18px;background:var(--border);margin:0 2px;flex-shrink:0; }
.activity-toolbar-attach { display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 8px;border:1px solid var(--border);border-radius:5px;background:none;color:var(--muted);cursor:pointer;font-size:0.75rem;white-space:nowrap;transition:all 0.15s; }
.activity-toolbar-attach:hover { color:var(--text);border-color:var(--text); }
.activity-add.has-toolbar .activity-input { border-radius:0 0 9px 9px; }
/* Contenteditable editor */
.activity-editor {
  min-height:60px; max-height:220px; overflow-y:auto;
  background:var(--surface2); border:1.5px solid var(--border);
  border-radius:0 0 9px 9px; border-top:none;
  padding:10px 12px 10px 24px;
  font-family:'Space Grotesk',sans-serif; font-size:0.9375rem;
  color:var(--text); outline:none; line-height:1.6;
  word-break:break-word; cursor:text;
}
.activity-editor:focus { border-color:var(--accent); }
.activity-editor[data-placeholder]:empty:before {
  content:attr(data-placeholder); color:var(--muted); pointer-events:none;
}
.activity-editor ul, .activity-editor ol,
.activity-edit-input ul, .activity-edit-input ol { padding-left:20px; margin:4px 0; }
.activity-editor li, .activity-edit-input li { margin:2px 0; }
/* Edit mode contenteditable */
.activity-edit-toolbar { display:flex;align-items:center;gap:4px;padding:5px 8px;background:var(--surface2);border:1.5px solid var(--accent);border-bottom:none;border-radius:7px 7px 0 0; }
.activity-edit-input[contenteditable] {
  display:block; min-height:52px; max-height:400px; overflow-y:auto;
  background:var(--bg); border:1.5px solid var(--accent); border-top:none;
  border-radius:0 0 7px 7px; padding:8px 10px 8px 24px;
  font-family:'Space Grotesk',sans-serif; font-size:0.9375rem;
  color:var(--text); outline:none; line-height:1.6; word-break:break-word;
  flex:1 1 auto; width:100%; box-sizing:border-box;
}

/* Pending links (queued before posting) */
.activity-pending-links { display:none;flex-wrap:wrap;gap:5px;padding:6px 10px;background:var(--surface2);border:1.5px solid var(--border);border-top:none;border-bottom:none; }

/* Attachment badge on entries */
.activity-links-badge { display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;background:var(--surface2);border:1px solid var(--border);color:var(--muted);font-size:0.8rem;cursor:pointer;user-select:none;transition:border-color 0.15s,color 0.15s;margin-top:5px; }
.activity-links-badge:hover { border-color:var(--accent2);color:var(--accent2); }
.activity-links-list { display:none;flex-direction:column;border-radius:8px;border:1px solid var(--border);overflow:hidden;margin-top:5px; }
.activity-links-list.open { display:flex; }
.activity-link-row { display:flex;align-items:center;padding:7px 12px;border-bottom:1px solid var(--border);font-size:0.78rem;text-decoration:none;color:var(--text);transition:background 0.15s;gap:6px; }
.activity-link-row:last-child { border-bottom:none; }
.activity-link-row:hover { background:var(--surface2); }
.activity-link-label { flex:1;color:var(--accent2); }
.activity-link-domain { font-size:0.67rem;color:var(--muted);flex-shrink:0; }
.activity-link-del { opacity:0;background:none;border:none;cursor:pointer;color:var(--muted);font-size:0.8rem;padding:2px 6px;border-radius:4px;transition:opacity 0.15s,color 0.15s,background 0.15s;flex-shrink:0; }
.activity-link-row:hover .activity-link-del { opacity:1; }
.activity-link-del:hover { color:var(--danger);background:rgba(240,80,96,0.1); }

/* Reply button + thread */
.activity-reply-btn { background:none;border:none;color:var(--muted);font-size:0.8rem;cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:3px;margin-top:4px;transition:color 0.15s;align-self:flex-start; }
.activity-reply-btn:hover { color:var(--accent2); }
.activity-reply-count { background:var(--surface2);border-radius:10px;padding:1px 6px;font-size:0.68rem; }
.activity-replies { display:none;margin-top:8px;border-left:2px solid var(--border);padding-left:12px; }
.activity-replies.open { display:block; }

/* Reply items */
.ae-ri { display:flex;gap:8px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,0.05);position:relative; }
.ae-ri:last-of-type { border-bottom:none; }
.ae-ri-text { font-size:0.9375rem;color:var(--text);line-height:1.6;word-break:break-word; }
/* ae-ri-actions replaced by .act-menu-wrap */
.ae-ri-edit { background:none;border:none;cursor:pointer;font-size:0.85rem;padding:3px 7px;border-radius:4px;transition:all 0.15s;color:var(--text);font-weight:600; }
.ae-ri-del { background:none;border:none;cursor:pointer;font-size:0.85rem;padding:3px 7px;border-radius:4px;transition:all 0.15s;color:var(--danger);font-weight:600; }
.ae-ri-edit:hover { background:var(--surface2); }
.ae-ri-del:hover { background:rgba(240,80,96,0.12); }

/* Reply compose box */
.reply-compose-area { margin-top:8px;background:var(--surface2);border:1.5px solid var(--border);border-radius:9px;padding:10px 14px;display:flex;flex-direction:column;gap:8px;transition:border-color 0.2s; }
.reply-compose-area:focus-within { border-color:var(--accent); }
.reply-toolbar { display:flex;align-items:center;gap:3px;padding-bottom:6px;border-bottom:1px solid var(--border); }
.reply-editor {
  min-height:72px; max-height:160px; overflow-y:auto;
  background:transparent; color:var(--text);
  font-family:'Space Grotesk',sans-serif; font-size:0.9375rem;
  outline:none; line-height:1.6; word-break:break-word;
}
.reply-editor[data-placeholder]:empty:before { content:attr(data-placeholder);color:var(--muted);pointer-events:none; }
.reply-editor ul, .reply-editor ol { padding-left:20px;margin:3px 0; }
.reply-editor li { margin:1px 0; }
.reply-compose-footer { display:flex;justify-content:space-between;align-items:center; }
.reply-send-btn { padding:5px 16px;background:var(--accent);color:#0e0e12;border:none;border-radius:7px;font-size:0.84rem;font-weight:700;cursor:pointer;white-space:nowrap; }

/* Files tab */
.files-item { display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);gap:10px; }
.files-item:last-child { border-bottom:none; }
.files-item-left { display:flex;flex-direction:column;gap:3px;flex:1;min-width:0; }
.files-item-label { display:flex;align-items:center;gap:6px;font-size:0.82rem;font-weight:600;color:var(--accent2);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.files-item-label:hover { text-decoration:underline; }
.files-item-source { font-size:0.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.files-item-date { font-size:0.7rem;color:var(--muted);flex-shrink:0; }

/* light mode overrides */
body.light-mode .activity-input { background:var(--surface2); }
body.light-mode .activity-edit-input { background:var(--surface2); }
body.light-mode .activity-entry { border-bottom-color:var(--border); }

/* ── ACTIVATION SCREEN ─────────────────────────────────── */
#activationScreen {
  position:fixed; inset:0; z-index:99999;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column;
}
#activationScreen::before {
  content:''; position:fixed; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(240,224,96,0.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(240,224,96,0.03) 1px,transparent 1px);
  background-size:40px 40px;
}
.act-card {
  position:relative; z-index:1;
  background:var(--surface); border:1px solid var(--border);
  border-radius:20px; padding:48px 44px; max-width:440px; width:90%;
  text-align:center;
  animation:actFadeIn 0.6s ease;
}
@keyframes actFadeIn {
  from { opacity:0; transform:translateY(20px); }
  to { opacity:1; transform:translateY(0); }
}
.act-bird {
  margin:0 auto 20px; display:flex; justify-content:center;
}
.act-bird svg { display:block; }
.act-title {
  font-family:'Bricolage Grotesque',sans-serif; font-weight:800;
  font-size:1.5rem; letter-spacing:-0.5px; margin-bottom:4px;
}
.act-title span { }
.act-sub {
  font-size:0.82rem; color:var(--muted); margin-bottom:32px; line-height:1.5;
}
.act-input-wrap {
  position:relative; margin-bottom:16px;
}
.act-input {
  width:100%; font-family:'Space Grotesk',sans-serif; font-size:1rem;
  font-weight:600; letter-spacing:2px; text-align:center; text-transform:uppercase;
  background:var(--bg); border:2px solid var(--border); color:var(--text);
  border-radius:12px; padding:16px 20px; outline:none;
  transition:border-color 0.2s, box-shadow 0.2s;
}
.act-input::placeholder {
  font-size:0.85rem; letter-spacing:1px; font-weight:400;
  color:var(--muted); text-transform:none;
}
.act-input:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(240,224,96,0.12);
}
.act-input.shake {
  animation:actShake 0.5s ease;
}
@keyframes actShake {
  0%,100% { transform:translateX(0); }
  20%,60% { transform:translateX(-8px); }
  40%,80% { transform:translateX(8px); }
}
.act-input.error {
  border-color:var(--danger);
  box-shadow:0 0 0 4px rgba(240,80,96,0.12);
}
.act-input.success {
  border-color:var(--green);
  box-shadow:0 0 0 4px rgba(96,240,144,0.12);
}
.act-btn {
  width:100%; font-family:'Bricolage Grotesque',sans-serif; font-weight:700;
  font-size:0.95rem; padding:14px 24px;
  background:var(--accent); color:#0e0e12; border:none; border-radius:12px;
  cursor:pointer; transition:all 0.2s;
}
.act-btn:hover {
  background:linear-gradient(135deg,#f5e060 0%,#e09820 45%,#c07010 100%); transform:translateY(-1px);
  box-shadow:0 6px 24px rgba(240,224,96,0.3);
}
.act-btn:active { transform:translateY(0); }
.act-btn:disabled {
  opacity:0.5; cursor:not-allowed; transform:none; box-shadow:none;
}
.act-error {
  font-size:0.78rem; color:var(--danger); margin-top:14px;
  min-height:20px; transition:opacity 0.2s;
}
.act-footer {
  margin-top:24px; font-size:0.72rem; color:var(--muted); line-height:1.6;
}
.act-footer a {
  color:var(--accent); text-decoration:none;
}
.act-footer a:hover { text-decoration:underline; }

/* Licensed-to watermark in app footer */
.licensed-badge {
  position:fixed; bottom:8px; right:16px; z-index:50;
  font-size:0.65rem; color:var(--muted); opacity:0.5;
  font-family:'Space Grotesk',sans-serif; pointer-events:none;
}

/* ══ LANDING PAGE (browser-only) ═══════════════════════════ */
#landingPage {
  display:none; /* shown via JS when in browser mode */
  position:fixed; inset:0; z-index:10000;
  background:#f8f8fa;
  overflow-y:scroll; overflow-x:hidden;
  font-family:'Space Grotesk',sans-serif;
  color:#1a1a2e;
  flex-direction:column;
  scrollbar-width:none;
}
#landingPage::-webkit-scrollbar { display:none; }
.lp-container {
  max-width:960px; margin:0 auto; padding:0 24px;
  display:flex; flex-direction:column; align-items:center;
  flex:1; box-sizing:border-box; width:100%; overflow-x:hidden;
}

/* Nav */
.lp-nav {
  width:100%; display:flex; justify-content:space-between; align-items:center;
  padding:20px 0; border-bottom:1px solid rgba(0,0,0,0.06);
}
.lp-nav-brand {
  display:flex; align-items:center; gap:12px;
  text-transform:none; letter-spacing:normal;
}

.lp-nav-bird { width:38px; height:38px; }
.lp-nav-name-unused {
  font-size:1.3rem; font-weight:800; letter-spacing:2px;
  text-transform:uppercase;
}
.lp-nav-links {
  display:flex; gap:20px; align-items:center;
}
.lp-nav-link {
  font-size:0.82rem; color:rgba(26,26,46,0.5); text-decoration:none;
  font-weight:600; transition:color 0.15s;
}
.lp-nav-link:hover { color:#d4880e; }
.lp-nav-buy {
  font-size:0.78rem; font-weight:700; color:#fff; background:linear-gradient(135deg,#d4880e,#d4880e);
  padding:8px 18px; border-radius:8px; text-decoration:none; transition:opacity 0.15s;
}
.lp-nav-buy:hover { opacity:0.85; }

/* Hero */
.lp-hero {
  text-align:center; padding:80px 0 40px;
  max-width:680px;
}
.lp-badge {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(180,140,0,0.08); border:1px solid rgba(180,140,0,0.2);
  border-radius:100px; padding:6px 16px; margin-bottom:28px;
  font-size:0.75rem; font-weight:600; color:#9a7800;
  letter-spacing:0.5px;
}
.lp-badge-dot {
  width:6px; height:6px; border-radius:50%; background:#d4880e;
  animation:lpPulse 2s infinite;
}
@keyframes lpPulse {
  0%,100% { opacity:1; } 50% { opacity:0.3; }
}
.lp-h1 {
  font-size:clamp(2.4rem, 5vw, 3.8rem); font-weight:900;
  line-height:1.1; margin:0 0 20px; letter-spacing:-1px;
  color:#1a1a2e;
}
.lp-h1 span { color:#d4880e; }
.lp-subtitle {
  font-size:1.05rem; line-height:1.7; color:rgba(26,26,46,0.5);
  margin:0 0 40px; font-weight:400;
}

/* CTA Buttons */
.lp-cta-wrap {
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
  margin-bottom:60px;
}
.lp-cta {
  display:inline-flex; align-items:center; gap:8px;
  padding:16px 32px; border-radius:14px; font-size:0.92rem;
  font-weight:700; font-family:'Space Grotesk',sans-serif;
  cursor:pointer; transition:all 0.2s; border:none;
  text-decoration:none;
}
.lp-cta-primary {
  background:linear-gradient(135deg, #d4880e 0%, #d4880e 50%, #f0d850 100%); color:#fff;
  box-shadow:0 4px 24px rgba(184,152,0,0.3); text-shadow:0 1px 2px rgba(0,0,0,0.15);
}
.lp-cta-primary:hover { background:linear-gradient(135deg, #b06010 0%, #d09028 50%, #b06010 100%); transform:translateY(-2px); box-shadow:0 8px 32px rgba(192,120,24,0.4); }
.lp-cta-secondary {
  background:rgba(0,0,0,0.04); color:#1a1a2e;
  border:1px solid rgba(0,0,0,0.1);
}
.lp-cta-secondary:hover { background:rgba(0,0,0,0.08); border-color:rgba(0,0,0,0.2); }
.lp-cta-icon { font-size:1.1rem; }

/* Industries section */
.lp-industries {
  width:100%; max-width:900px; text-align:center; margin-bottom:60px;
}
.lp-industries-title {
  font-size:1.4rem; font-weight:800; color:#1a1a2e; margin-bottom:8px;
}
.lp-industries-sub {
  font-size:0.88rem; color:rgba(26,26,46,0.5); margin-bottom:32px; max-width:600px; margin-left:auto; margin-right:auto; line-height:1.6;
}
.lp-industries-grid {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:14px;
}
.lp-industry-card {
  background:#fff; border:1px solid rgba(0,0,0,0.06); border-radius:14px;
  padding:24px 16px; text-align:center; transition:all 0.2s;
  box-shadow:0 2px 8px rgba(0,0,0,0.04);
}
.lp-industry-card:hover { border-color:rgba(184,152,0,0.3); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.08); }
.lp-industry-icon { font-size:1.8rem; margin-bottom:10px; }
.lp-industry-name { font-size:0.9rem; font-weight:700; color:#1a1a2e; margin-bottom:4px; }
.lp-industry-desc { font-size:0.78rem; color:rgba(26,26,46,0.45); line-height:1.6; }
@media(max-width:768px) {
  .lp-nav { flex-wrap:wrap; gap:12px; }
  .lp-nav-links { gap:12px; flex-wrap:wrap; justify-content:center; }
  .lp-nav-link { font-size:0.72rem; }
  .lp-nav-buy { font-size:0.7rem; padding:6px 14px; }
  .lp-industries-grid { grid-template-columns:repeat(2, 1fr); }
  .lp-features { grid-template-columns:1fr; }
}

/* FAQ Section */
.lp-faq { width:100%; max-width:900px; margin-bottom:60px; }
.lp-faq-title { font-size:1.4rem; font-weight:800; color:#1a1a2e; margin-bottom:8px; text-align:center; }
.lp-faq-sub { font-size:0.88rem; color:rgba(26,26,46,0.5); margin-bottom:28px; text-align:center; }
.lp-faq-item {
  border:1px solid rgba(0,0,0,0.06); border-radius:12px; margin-bottom:8px;
  background:#fff; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,0.03);
}
.lp-faq-q {
  display:flex; align-items:center; justify-content:space-between; padding:16px 20px;
  cursor:pointer; font-size:0.95rem; font-weight:700; color:#1a1a2e;
  user-select:none; transition:background 0.15s;
}
.lp-faq-q:hover { background:rgba(184,152,0,0.04); }
.lp-faq-arrow { font-size:0.7rem; color:rgba(26,26,46,0.3); transition:transform 0.25s; flex-shrink:0; margin-left:12px; }
.lp-faq-item.open .lp-faq-arrow { transform:rotate(180deg); }
.lp-faq-a {
  max-height:0; overflow:hidden; transition:max-height 0.3s ease, padding 0.3s ease;
  font-size:0.88rem; color:rgba(26,26,46,0.6); line-height:1.7; padding:0 20px;
}
.lp-faq-item.open .lp-faq-a { max-height:500px; padding:0 20px 18px; }

/* Features grid */
.lp-features {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;
  width:100%; margin-bottom:60px;
}
.lp-feature {
  background:#fff; border:1px solid rgba(0,0,0,0.07);
  border-radius:16px; padding:28px 24px; text-align:left;
  transition:border-color 0.2s;
  box-shadow:0 2px 8px rgba(0,0,0,0.04);
}
.lp-feature:hover { border-color:rgba(180,140,0,0.3); }
.lp-feature-icon {
  font-size:1.6rem; margin-bottom:14px;
}
.lp-feature-title {
  font-size:1rem; font-weight:700; color:#1a1a2e; margin-bottom:8px;
}
.lp-feature-desc {
  font-size:0.88rem; line-height:1.6; color:rgba(26,26,46,0.5);
}

/* How it works */
.lp-steps {
  width:100%; text-align:center; margin-bottom:60px;
}
.lp-steps-title {
  font-size:0.72rem; font-weight:700; letter-spacing:3px; color:rgba(26,26,46,0.3);
  text-transform:uppercase; margin-bottom:32px;
}
.lp-steps-row {
  display:flex; justify-content:center; gap:40px; flex-wrap:wrap;
}
.lp-step {
  display:flex; flex-direction:column; align-items:center; gap:10px;
  max-width:180px;
}
.lp-step-num {
  width:40px; height:40px; border-radius:12px;
  background:rgba(180,140,0,0.08); border:1px solid rgba(180,140,0,0.2);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; color:#9a7800; font-size:0.9rem;
}
.lp-step-text {
  font-size:0.88rem; color:rgba(26,26,46,0.5); line-height:1.6;
}
.lp-step-text strong { color:#1a1a2e; }
.lp-step-arrow {
  color:rgba(0,0,0,0.15); font-size:1.4rem; align-self:center;
  margin-top:-6px;
}

/* Footer */
.lp-footer {
  width:100%; background:#1a1a2e; color:rgba(255,255,255,0.5);
  padding:60px 40px 30px; box-sizing:border-box;
}
.lp-footer-inner { max-width:1100px; margin:0 auto; }
.lp-footer-grid {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px;
  margin-bottom:40px;
}
.lp-footer-brand-name {
  margin-bottom:12px;
  text-transform:none; letter-spacing:normal;
}
.lp-footer-brand-desc {
  font-size:0.85rem; color:rgba(255,255,255,0.35); line-height:1.6;
  max-width:280px;
}
.lp-footer-col-title {
  font-size:0.72rem; font-weight:700; letter-spacing:2px;
  text-transform:uppercase; color:rgba(255,255,255,0.7);
  margin-bottom:14px;
}
.lp-footer-link {
  display:block; font-size:0.85rem; color:rgba(255,255,255,0.4);
  padding:4px 0; transition:color 0.2s; text-decoration:none;
}
.lp-footer-link:hover { color:#d4880e; }
.lp-footer-bottom {
  border-top:1px solid rgba(255,255,255,0.08);
  padding-top:24px;
  display:flex; justify-content:space-between; align-items:center;
  font-size:0.78rem; color:rgba(255,255,255,0.25);
}

/* Responsive */
@media(max-width:768px) {
  .lp-features { grid-template-columns:1fr; }
  .lp-hero { padding:50px 0 30px; width:100%; }
  .lp-step-arrow { display:none; }
  .lp-steps-row { gap:24px; }
  .lp-nav-links { display:none; }
  .lp-h1 { font-size:1.6rem; letter-spacing:-0.5px; }
  .lp-subtitle { font-size:0.92rem; }
  .lp-industries-grid { grid-template-columns:repeat(2, 1fr); gap:10px; }
  .lp-industries-title, .lp-faq-title { font-size:1.2rem; }
  .lp-faq-q { font-size:0.88rem; padding:14px 16px; }
  .lp-faq-a { font-size:0.82rem; }
  .lp-cta { font-size:0.85rem; padding:14px 20px; }
  .lp-cta-wrap { flex-direction:column; align-items:stretch; gap:10px; padding:0 8px; }
  .lp-nav-name { font-size:1.1rem !important; }
  .lp-nav-bird { width:32px !important; height:32px !important; }
  .lp-footer { padding:40px 24px 24px; }
  .lp-footer-grid { grid-template-columns:1fr 1fr; gap:30px; }
  .lp-footer-bottom { flex-direction:column; gap:8px; text-align:center; }
  .lp-badge { font-size:0.7rem; padding:5px 12px; }
  .lp-ss-section { padding:0 12px; }
}
@media(max-width:480px) {
  .lp-container { padding:0 16px; }
  .lp-industries-grid { grid-template-columns:1fr; }
  .lp-h1 { font-size:1.3rem; }
  .lp-feature { padding:20px 16px; }
  .lp-steps-row { flex-direction:column; align-items:center; }
  .lp-footer-grid { grid-template-columns:1fr; gap:24px; }
  .lp-cta { font-size:0.8rem; padding:12px 16px; justify-content:center; }
  .lp-subtitle { font-size:0.86rem; }
  .lp-ss-section { padding:0 8px; }
  .lp-ss-tray { padding:12px 10px 14px; }
  .lp-ss-tab2 { font-size:0.62rem; padding:4px 9px; }
}

/* ── PWA Install Banner ─────────────────────────── */
#pwaInstallBanner {
  display:none; position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  z-index:9000; background:linear-gradient(135deg,#d4880e 0%,#f0d850 100%);
  border-radius:16px; padding:16px 24px; box-shadow:0 8px 32px rgba(0,0,0,0.35);
  font-family:'Space Grotesk',sans-serif; max-width:440px; width:calc(100% - 40px);
  animation: pwaSlideUp 0.4s ease-out;
}
@keyframes pwaSlideUp {
  from { transform:translateX(-50%) translateY(100px); opacity:0; }
  to   { transform:translateX(-50%) translateY(0); opacity:1; }
}
#pwaInstallBanner .pwa-row {
  display:flex; align-items:center; gap:14px;
}
#pwaInstallBanner .pwa-icon {
  width:44px; height:44px; border-radius:10px; background:rgba(0,0,0,0.12);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
#pwaInstallBanner .pwa-icon svg { width:28px; height:28px; }
#pwaInstallBanner .pwa-text {
  flex:1; min-width:0;
}
#pwaInstallBanner .pwa-title {
  font-size:0.92rem; font-weight:800; color:#0e0e12; letter-spacing:0.5px;
}
#pwaInstallBanner .pwa-sub {
  font-size:0.75rem; color:rgba(14,14,18,0.6); margin-top:2px; line-height:1.3;
}
#pwaInstallBanner .pwa-actions {
  display:flex; gap:8px; margin-top:12px;
}
#pwaInstallBanner .pwa-install-btn {
  flex:1; padding:10px 0; border:none; border-radius:10px; cursor:pointer;
  font-family:'Space Grotesk',sans-serif; font-size:0.82rem; font-weight:700;
  background:#0e0e12; color:#f0d850; transition:all 0.15s;
}
#pwaInstallBanner .pwa-install-btn:hover { background:#1a1a2e; }
#pwaInstallBanner .pwa-dismiss-btn {
  padding:10px 16px; border:2px solid rgba(14,14,18,0.2); border-radius:10px;
  cursor:pointer; font-family:'Space Grotesk',sans-serif; font-size:0.82rem;
  font-weight:600; background:transparent; color:rgba(14,14,18,0.6); transition:all 0.15s;
}
#pwaInstallBanner .pwa-dismiss-btn:hover { border-color:rgba(14,14,18,0.5); color:#0e0e12; }

/* ── Install Modal ── */
#lpInstallModal { position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity 0.25s ease; pointer-events:none; }
#lpInstallModal.lp-modal-open { opacity:1; pointer-events:all; }
.lp-modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.5); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.lp-modal-card {
  position:relative; background:#fff; border-radius:20px; padding:40px 36px 32px; max-width:440px; width:90%;
  box-shadow:0 24px 80px rgba(0,0,0,0.2); transform:translateY(12px) scale(0.97); transition:transform 0.3s ease;
}
#lpInstallModal.lp-modal-open .lp-modal-card { transform:translateY(0) scale(1); }
.lp-modal-close {
  position:absolute; top:14px; right:16px; background:none; border:none; font-size:24px;
  color:#999; cursor:pointer; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  transition:all 0.15s;
}
.lp-modal-close:hover { background:#f0f0f0; color:#333; }
.lp-modal-icon { font-size:36px; text-align:center; margin-bottom:8px; }
.lp-modal-title { font-family:'Space Grotesk',sans-serif; font-size:1.4rem; font-weight:700; color:#1a1a2e; text-align:center; margin:0 0 6px; }
.lp-modal-sub { font-family:'Space Grotesk',sans-serif; font-size:0.92rem; color:#777; text-align:center; margin:0 0 24px; }
.lp-modal-steps { display:flex; flex-direction:column; gap:16px; }
.lp-modal-step {
  display:flex; align-items:flex-start; gap:14px; font-family:'Space Grotesk',sans-serif; font-size:0.95rem;
  color:#333; line-height:1.5;
}
.lp-modal-step-num {
  flex-shrink:0; width:28px; height:28px; border-radius:50%; background:#1a1a2e; color:#f0d850;
  font-weight:700; font-size:0.85rem; display:flex; align-items:center; justify-content:center;
}
.lp-modal-hint {
  margin-top:8px; padding-top:14px; border-top:1px solid #eee; font-family:'Space Grotesk',sans-serif;
  font-size:0.8rem; color:#aaa; text-align:center;
}

/* ── Toast Notification ── */
.app-toast {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); z-index:99999;
  padding:12px 24px; border-radius:12px; font-family:'Space Grotesk',sans-serif; font-size:0.88rem;
  font-weight:600; color:#fff; box-shadow:0 8px 32px rgba(0,0,0,0.25); opacity:0;
  transition:all 0.3s ease; pointer-events:none; max-width:400px; text-align:center;
}
.app-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.app-toast.warn { background:#d4880e; }
.app-toast.success { background:#34c759; }
.app-toast.error { background:#f05060; }

/* ── App Confirm Modal ── */
.app-confirm-overlay { position:fixed; inset:0; z-index:99998; background:rgba(0,0,0,0.4); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity 0.2s; }
.app-confirm-overlay.show { opacity:1; }
.app-confirm-card {
  background:var(--surface,#fff); border-radius:16px; padding:28px 24px 20px; max-width:400px; width:90%;
  box-shadow:0 16px 48px rgba(0,0,0,0.2); transform:scale(0.95); transition:transform 0.2s;
}
.app-confirm-overlay.show .app-confirm-card { transform:scale(1); }
.app-confirm-title { font-weight:700; font-size:1rem; color:var(--text,#1a1a2e); margin-bottom:8px; }
.app-confirm-msg { font-size:0.88rem; color:var(--muted,#888); line-height:1.5; margin-bottom:20px; }
.app-confirm-actions { display:flex; gap:8px; justify-content:flex-end; }
.app-confirm-actions button { padding:9px 20px; border-radius:10px; font-weight:700; font-size:0.85rem; cursor:pointer; border:none; font-family:inherit; }
.app-confirm-actions .confirm-ok { background:var(--purple,#7c3aed); color:#fff; }
.app-confirm-actions .confirm-ok:hover { opacity:0.9; }
.app-confirm-actions .confirm-cancel { background:var(--surface2,#f0f0f0); color:var(--text,#333); border:1px solid var(--border,#ddd); }
.app-confirm-actions .confirm-cancel:hover { background:var(--border,#e0e0e0); }

/* ══ REVENUE FORECAST VIEW ══════════════════════════════ */
#viewForecast { height:calc(var(--vph) - 48px); overflow-y:auto; overflow-x:hidden; }
.fc-wrapper { padding:28px 36px 60px; max-width:1600px; }
.fc-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:28px; flex-wrap:wrap; gap:16px; }
.fc-eyebrow { font-size:0.7rem; letter-spacing:3px; text-transform:uppercase; color:var(--muted); font-weight:500; }
.fc-headline { font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.5rem; letter-spacing:-0.5px; }
.fc-headline span { color:var(--accent); }
.fc-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.fc-btn {
  padding:8px 16px; border-radius:9px; border:1px solid var(--border); background:var(--surface);
  color:var(--muted); font-size:0.75rem; font-weight:600; cursor:pointer; transition:all .15s;
  font-family:'Space Grotesk',sans-serif; white-space:nowrap; display:flex; align-items:center; gap:5px;
}
.fc-btn:hover { border-color:var(--accent); color:var(--accent); }
.fc-btn.primary { background:linear-gradient(135deg,#f0d850 0%,#d4880e 45%,#d4880e 100%); border-color:transparent; color:#1a0a00; font-weight:700; }
.fc-btn.primary:hover { background:linear-gradient(135deg,#f5e060 0%,#e09820 45%,#c07010 100%); box-shadow:0 4px 16px rgba(212,136,14,0.4); transform:translateY(-1px); }

/* Forecast period toggle */
.fc-period-toggle { display:flex; border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.fc-period-btn {
  padding:7px 14px; font-size:0.72rem; font-weight:600; border:none; background:transparent;
  color:var(--muted); cursor:pointer; transition:all .15s; font-family:inherit;
}
.fc-period-btn:not(:last-child) { border-right:1px solid var(--border); }
.fc-period-btn:hover { color:var(--text); background:var(--surface2); }
.fc-period-btn.active { background:var(--surface2); color:var(--text); font-weight:700; }

/* KPI strip */
.fc-kpi-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:28px; }
@media (min-width:1050px) { .fc-kpi-strip { grid-template-columns:repeat(5,1fr); } }
.fc-kpi {
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:18px 20px; position:relative; overflow:hidden;
  transition:transform .2s, border-color .2s, box-shadow .2s;
}
.fc-kpi::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--kpi-color,var(--accent)); }
.fc-kpi::after {
  content:''; position:absolute; top:-20px; right:-20px;
  width:140px; height:140px; border-radius:50%;
  background:radial-gradient(circle, var(--kpi-color, var(--accent)) 0%, transparent 70%);
  opacity:.09; pointer-events:none;
}
.fc-kpi:hover { transform:translateY(-5px); border-color:var(--kpi-color, var(--muted)); box-shadow:0 12px 40px rgba(0,0,0,0.35); }
body.light-mode .fc-kpi:hover { box-shadow:0 12px 32px rgba(0,0,0,0.12); border-color:var(--kpi-color, var(--muted)); }
.fc-kpi-label { font-size:0.68rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.fc-kpi-value { font-family:'Bricolage Grotesque',sans-serif; font-size:1.6rem; font-weight:800; color:var(--text); line-height:1.1; }
.fc-kpi-sub { font-size:0.7rem; color:var(--muted); margin-top:4px; }

/* Scenario cards */
.fc-scenarios { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:28px; }
.fc-scenario-card {
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:20px 22px; position:relative; overflow:hidden; text-align:center;
  transition:transform .2s, border-color .2s, box-shadow .2s;
}
.fc-scenario-card:hover { transform:translateY(-5px); box-shadow:0 12px 40px rgba(0,0,0,0.35); }
body.light-mode .fc-scenario-card:hover { box-shadow:0 12px 32px rgba(0,0,0,0.12); }
.fc-scenario-card.best { border-color:rgba(96,240,144,0.25); }
.fc-scenario-card.best:hover { border-color:var(--green); }
.fc-scenario-card.best::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--green); }
.fc-scenario-card.expected::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--accent); }
.fc-scenario-card.expected:hover { border-color:var(--accent); }
.fc-scenario-card.conservative { border-color:rgba(240,160,48,0.2); }
.fc-scenario-card.conservative:hover { border-color:var(--warn); }
.fc-scenario-card.conservative::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--warn); }
.fc-scenario-label { font-size:0.68rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
.fc-scenario-value { font-family:'Bricolage Grotesque',sans-serif; font-size:1.85rem; font-weight:800; line-height:1.1; }
.fc-scenario-desc { font-size:0.72rem; color:var(--muted); margin-top:6px; line-height:1.4; }

/* Forecast chart area */
.fc-chart-section { margin-bottom:28px; }
.fc-section-title {
  font-size:0.7rem; font-weight:800; letter-spacing:2px; text-transform:uppercase;
  color:var(--muted); margin-bottom:16px; display:flex; align-items:center; gap:8px;
}
.fc-section-title::after { content:''; flex:1; height:1px; background:var(--border); }
.fc-month-chart { display:flex; gap:2px; align-items:flex-end; height:180px; padding:0 4px; }
.fc-month-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; position:relative; }
.fc-month-bar-wrap { width:100%; flex:1; display:flex; flex-direction:column; justify-content:flex-end; gap:2px; min-height:0; }
.fc-month-bar {
  width:100%; border-radius:6px 6px 0 0; min-height:2px; transition:height .4s ease;
  position:relative; cursor:default;
}
.fc-month-bar.weighted { background:var(--accent); opacity:0.9; border-radius:6px 6px 0 0; }
.fc-month-bar.pipeline { background:var(--surface2); border:1px solid var(--border); border-bottom:none; border-radius:6px 6px 0 0; }
.fc-month-val { font-size:0.68rem; font-weight:700; color:var(--text); white-space:nowrap; }
.fc-month-label { font-size:0.68rem; color:var(--muted); font-weight:600; white-space:nowrap; }
.fc-chart-legend { display:flex; gap:16px; justify-content:center; margin-top:14px; }
.fc-chart-legend-item { display:flex; align-items:center; gap:5px; font-size:0.7rem; color:var(--muted); }
.fc-chart-legend-dot { width:10px; height:10px; border-radius:3px; flex-shrink:0; }

/* Deal forecast table */
.fc-table-wrap {
  margin-bottom:28px; border-radius:14px; overflow:hidden; border:1px solid var(--border); background:var(--surface);
  -webkit-transform:translateZ(0); transform:translateZ(0); isolation:isolate;
}
.fc-table { width:100%; border-collapse:collapse; font-size:0.78rem; }
.fc-table thead th {
  padding:12px 14px; text-align:left; font-size:0.68rem; font-weight:700;
  letter-spacing:1px; text-transform:uppercase; color:var(--muted); background:var(--surface2);
}
.fc-table thead th:last-child { text-align:right; }
.fc-table tbody td {
  padding:11px 14px; border-bottom:1px solid var(--border); color:var(--text); vertical-align:middle;
}
.fc-table tbody td:last-child { text-align:right; font-weight:700; }
.fc-table tbody tr:last-child td { border-bottom:none; }
.fc-table tbody tr:hover { background:rgba(240,224,96,0.03); }
.fc-table .fc-deal-name { font-weight:600; }
.fc-table .fc-stage-pill {
  display:inline-block; padding:2px 8px; border-radius:6px; font-size:0.68rem; font-weight:600;
  background:var(--surface2); color:var(--muted);
}
.fc-table .fc-prob-bar {
  display:inline-flex; align-items:center; gap:6px; font-weight:600;
}
.fc-table .fc-prob-track { width:40px; height:5px; background:var(--surface2); border-radius:3px; overflow:hidden; }
.fc-table .fc-prob-fill { height:100%; border-radius:3px; }
.fc-table tfoot td {
  padding:12px 14px; font-weight:800; border-top:2px solid var(--border);
  background:var(--surface2); color:var(--text);
}
.fc-table tfoot td:last-child { text-align:right; }

/* AI Commentary section */
.fc-ai-section {
  border-radius:14px;
  padding:0; margin-bottom:28px;
}
.fc-ai-section.has-content {
  background:var(--surface); border:1px solid var(--border);
  padding:22px 24px;
}
.fc-ai-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:8px; }
.fc-ai-title { font-size:0.82rem; font-weight:700; color:var(--text); display:flex; align-items:center; gap:8px; }

.fc-ai-body { font-size:0.82rem; color:var(--text); line-height:1.65; }
.fc-ai-body strong { color:var(--accent); }
.fc-ai-body ul { margin:8px 0 8px 18px; padding:0; }
.fc-ai-body li { margin-bottom:6px; }
.fc-ai-insight {
  background:var(--surface2); border:1px solid var(--border); border-radius:10px;
  padding:14px 16px; margin-bottom:10px;
}
.fc-ai-insight:last-child { margin-bottom:0; }
.fc-ai-insight-header { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.fc-ai-insight-icon { font-size:1rem; }
.fc-ai-insight-title { font-weight:700; font-size:0.8rem; color:var(--text); }
.fc-ai-insight-body { font-size:0.78rem; color:var(--muted); line-height:1.55; }
.fc-ai-insight-body strong { color:var(--accent); }

.fc-ai-no-key {
  text-align:center; padding:28px 20px; color:var(--muted); font-size:0.82rem; line-height:1.6;
}
.fc-ai-no-key a { color:var(--purple); font-weight:700; }

/* Loading skeleton for AI */
.fc-ai-loading { padding:8px 0; }
.fc-ai-skel {
  background:var(--surface2); border-radius:10px; padding:14px 16px; margin-bottom:10px;
  animation:wbrPulse 1.5s ease-in-out infinite;
}
.fc-ai-skel-title { height:12px; width:30%; background:var(--border); border-radius:4px; margin-bottom:8px; }
.fc-ai-skel-line { height:10px; background:var(--border); border-radius:4px; margin-bottom:6px; }
.fc-ai-skel-line:last-child { width:60%; }

/* Empty state */
.fc-empty {
  text-align:center; padding:60px 20px; color:var(--muted); font-size:0.88rem; line-height:1.6;
}
.fc-empty-icon { font-size:2.5rem; margin-bottom:16px; }

/* Aging alerts */
.fc-aging-alerts { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:28px; }
.fc-aging-alert {
  flex:1; min-width:200px; padding:14px 16px; border-radius:12px;
  border:1px solid var(--border); background:var(--surface); font-size:0.78rem;
}
.fc-aging-alert.warn { border-color:rgba(240,160,48,0.3); background:rgba(240,160,48,0.04); }
.fc-aging-alert.danger { border-color:rgba(240,80,96,0.3); background:rgba(240,80,96,0.04); }
.fc-aging-alert-title { font-weight:700; color:var(--text); margin-bottom:4px; display:flex; align-items:center; gap:6px; }
.fc-aging-alert-body { color:var(--muted); line-height:1.45; }

/* ══ QUOTES / PROPOSALS VIEW ════════════════════════════ */
#viewQuotes { height:calc(var(--vph) - 48px); overflow-y:auto; overflow-x:hidden; }
.qt-wrapper { padding:28px 36px 60px; max-width:1600px; }
.qt-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:28px; flex-wrap:wrap; gap:16px; }
.qt-eyebrow { font-size:0.7rem; letter-spacing:3px; text-transform:uppercase; color:var(--muted); font-weight:500; }
.qt-headline { font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.5rem; letter-spacing:-0.5px; }
.qt-headline span { color:var(--accent); }
.qt-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.qt-btn {
  padding:8px 16px; border-radius:9px; border:1px solid var(--border); background:var(--surface);
  color:var(--muted); font-size:0.75rem; font-weight:600; cursor:pointer; transition:all .15s;
  font-family:'Space Grotesk',sans-serif; white-space:nowrap; display:flex; align-items:center; gap:5px;
}
.qt-btn:hover { border-color:var(--accent); color:var(--accent); }
.qt-btn.primary { background:linear-gradient(135deg,#f0d850 0%,#d4880e 45%,#d4880e 100%); border-color:transparent; color:#1a0a00; font-weight:700; }
.qt-btn.primary:hover { background:linear-gradient(135deg,#f5e060 0%,#e09820 45%,#c07010 100%); box-shadow:0 4px 16px rgba(212,136,14,0.4); transform:translateY(-1px); }
.qt-btn.active { background:var(--accent); color:#0a0a10; border-color:var(--accent); }

/* Status tabs */
.qt-tabs { display:flex; gap:6px; margin-bottom:22px; flex-wrap:wrap; }
.qt-tab {
  padding:7px 14px; border-radius:8px; border:1px solid var(--border); background:var(--surface);
  color:var(--muted); font-size:0.75rem; font-weight:600; cursor:pointer; transition:all .15s;
  font-family:'Space Grotesk',sans-serif;
}
.qt-tab:hover { border-color:var(--accent); color:var(--accent); }
.qt-tab.active { background:var(--accent); color:#0a0a10; border-color:var(--accent); font-weight:700; }
.qt-tab .qt-tab-count { margin-left:5px; opacity:0.7; font-weight:400; }

/* Search */
.qt-search {
  width:240px; padding:8px 14px; border-radius:9px; border:1px solid var(--border);
  background:var(--surface); color:var(--text); font-size:0.8rem; font-family:inherit;
  outline:none; transition:border-color .15s;
}
.qt-search:focus { border-color:var(--accent); }

/* KPI strip */
.qt-kpi-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:28px; }
.qt-kpi {
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:18px 16px; position:relative; overflow:hidden;
  transition:transform .2s, border-color .2s, box-shadow .2s;
}
.qt-kpi::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--kpi-color,var(--accent)); border-radius:14px 14px 0 0; }
.qt-kpi::after {
  content:''; position:absolute; top:-20px; right:-20px;
  width:140px; height:140px; border-radius:50%;
  background:radial-gradient(circle, var(--kpi-color, var(--accent)) 0%, transparent 70%);
  opacity:.09; pointer-events:none;
}
.qt-kpi:hover { transform:translateY(-5px); border-color:var(--kpi-color, var(--muted)); box-shadow:0 12px 40px rgba(0,0,0,0.35); }
body.light-mode .qt-kpi:hover { box-shadow:0 12px 32px rgba(0,0,0,0.12); border-color:var(--kpi-color, var(--muted)); }
.qt-kpi-label { font-size:0.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:1px; font-weight:500; margin-bottom:4px; }
.qt-kpi-value { font-size:1.5rem; font-weight:800; font-family:'Bricolage Grotesque',sans-serif; color:var(--text); }
.qt-kpi-value.accent { color:var(--accent); }
.qt-kpi-value.green { color:var(--green); }
.qt-kpi-value.purple { color:var(--purple); }

/* Quote cards grid */
.qt-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; }
.qt-grid > * { min-width:0; }
.qt-card {
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:20px; cursor:pointer; transition:all .18s; position:relative;
}
.qt-card:hover { border-color:var(--accent); transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,0.1); }
.qt-card-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px; }
.qt-card-title { font-weight:700; font-size:0.95rem; color:var(--text); line-height:1.35; }
.qt-card-company { font-size:0.8rem; color:var(--muted); margin-bottom:6px; }
.qt-card-meta { display:flex; gap:12px; font-size:0.72rem; color:var(--muted); margin-top:8px; flex-wrap:wrap; }
.qt-card-meta span { display:flex; align-items:center; gap:3px; }
.qt-card-total { font-size:1.15rem; font-weight:800; color:var(--text); font-family:'Bricolage Grotesque',sans-serif; }
.qt-card-footer { display:flex; justify-content:space-between; align-items:center; margin-top:14px; padding-top:12px; border-top:1px solid var(--border); }

/* Status badges */
.qt-status {
  display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:6px;
  font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px;
}
.qt-status.draft { background:rgba(144,144,192,0.12); color:var(--muted); }
.qt-status.sent { background:rgba(96,192,240,0.12); color:var(--accent2); }
.qt-status.accepted { background:rgba(96,240,144,0.12); color:var(--green); }
.qt-status.declined { background:rgba(240,80,96,0.12); color:var(--danger); }
.qt-status.expired { background:rgba(240,160,48,0.12); color:var(--warn); }

/* Empty state */
.qt-empty { text-align:center; padding:60px 20px; color:var(--muted); }
.qt-empty-icon { font-size:2.5rem; margin-bottom:16px; }
.qt-empty-text { font-size:0.88rem; line-height:1.5; margin-bottom:16px; }

/* ── QUOTE EDITOR OVERLAY ──────────────────────────────── */
.qt-editor-overlay {
  display:none; position:fixed; inset:0; z-index:9500;
  background:rgba(0,0,0,0.6); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  justify-content:center; align-items:flex-start; overflow-y:auto; padding:30px 20px;
}
.qt-editor-overlay.open { display:flex; }
.qt-editor {
  background:var(--surface); border:1px solid var(--border); border-radius:18px;
  width:100%; max-width:860px; padding:32px 36px 28px; position:relative; margin:auto 0;
}
.qt-editor-title { font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.4rem; margin-bottom:20px; }
.qt-editor-close {
  position:absolute; top:16px; right:18px; background:none; border:none;
  color:var(--muted); font-size:1.3rem; cursor:pointer; padding:4px 8px; border-radius:6px;
}
.qt-editor-close:hover { color:var(--text); background:var(--surface2); }

/* Editor sections */
.qt-ed-section { margin-bottom:22px; }
.qt-ed-section-title {
  font-weight:700; font-size:0.82rem; color:var(--text); margin-bottom:10px;
  display:flex; align-items:center; gap:6px;
}
.qt-ed-row { display:flex; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
.qt-ed-field { flex:1; min-width:150px; }
.qt-ed-field label { display:block; font-size:0.72rem; color:var(--muted); font-weight:600; margin-bottom:4px; text-transform:uppercase; letter-spacing:0.5px; }
.qt-ed-field input, .qt-ed-field select, .qt-ed-field textarea {
  width:100%; padding:9px 12px; border-radius:9px; border:1px solid var(--border);
  background:var(--bg); color:var(--text); font-size:0.82rem; font-family:inherit;
  outline:none; transition:border-color .15s;
}
.qt-ed-field input:focus, .qt-ed-field select:focus, .qt-ed-field textarea:focus { border-color:var(--accent); }
.qt-ed-field textarea { resize:vertical; min-height:60px; }

/* Line items table */
.qt-li-table { width:100%; border-collapse:collapse; margin-top:8px; }
.qt-li-table th {
  text-align:left; padding:8px 10px; font-size:0.68rem; color:var(--muted);
  text-transform:uppercase; letter-spacing:0.5px; font-weight:600; border-bottom:1px solid var(--border);
}
.qt-li-table th:last-child { text-align:center; width:40px; }
.qt-li-table td { padding:6px 4px; vertical-align:middle; }
.qt-li-table td input {
  width:100%; padding:8px 10px; border-radius:8px; border:1px solid var(--border);
  background:var(--bg); color:var(--text); font-size:0.82rem; font-family:inherit;
  outline:none; transition:border-color .15s;
}
.qt-li-table td input:focus { border-color:var(--accent); }
.qt-li-table td input.li-num { text-align:right; width:90px; }
.qt-li-table td input.li-amount { text-align:right; width:100px; background:transparent; border-color:transparent; font-weight:700; color:var(--text); }
.qt-li-table .li-remove {
  background:none; border:none; color:var(--muted); cursor:pointer; font-size:1rem;
  padding:4px 8px; border-radius:6px; transition:all .15s;
}
.qt-li-table .li-remove:hover { color:var(--danger); background:rgba(240,80,96,0.08); }
.qt-li-add-btn {
  margin-top:8px; padding:7px 14px; border-radius:8px; border:1px dashed var(--border);
  background:transparent; color:var(--muted); font-size:0.78rem; font-weight:600;
  cursor:pointer; transition:all .15s; font-family:inherit; display:inline-flex; align-items:center; gap:4px;
}
.qt-li-add-btn:hover { border-color:var(--accent); color:var(--accent); }

/* Financial summary */
.qt-fin-summary {
  margin-top:16px; border-top:1px solid var(--border); padding-top:14px;
  display:flex; justify-content:flex-end;
}
.qt-fin-rows { min-width:280px; }
.qt-fin-row { display:flex; justify-content:space-between; align-items:center; padding:5px 0; font-size:0.82rem; }
.qt-fin-row.total { border-top:2px solid var(--border); margin-top:8px; padding-top:10px; font-weight:800; font-size:1rem; }
.qt-fin-row label { color:var(--muted); font-weight:500; }
.qt-fin-row .qt-fin-val { font-weight:700; color:var(--text); }
.qt-fin-row input {
  width:80px; padding:5px 8px; border-radius:7px; border:1px solid var(--border);
  background:var(--bg); color:var(--text); font-size:0.82rem; font-family:inherit;
  text-align:right; outline:none;
}
.qt-fin-row input:focus { border-color:var(--accent); }
.qt-fin-row select {
  padding:5px 8px; border-radius:7px; border:1px solid var(--border);
  background:var(--bg); color:var(--text); font-size:0.78rem; font-family:inherit; outline:none;
}

/* Editor actions bar */
.qt-ed-actions { display:flex; justify-content:space-between; align-items:center; margin-top:24px; padding-top:18px; border-top:1px solid var(--border); gap:12px; flex-wrap:wrap; }
.qt-ed-actions-left { display:flex; gap:8px; }
.qt-ed-actions-right { display:flex; gap:8px; }
.qt-ed-save {
  padding:10px 22px; border-radius:10px; border:none; background:linear-gradient(135deg,#f0d850 0%,#d4880e 45%,#d4880e 100%);
  color:#1a0a00; font-weight:700; font-size:0.85rem; cursor:pointer; font-family:inherit;
  transition:all .15s;
}
.qt-ed-save:hover { background:linear-gradient(135deg,#f5e060 0%,#e09820 45%,#c07010 100%); box-shadow:0 4px 16px rgba(212,136,14,0.4); }
.qt-ed-delete {
  padding:10px 18px; border-radius:10px; border:1px solid rgba(240,80,96,0.3);
  background:rgba(240,80,96,0.06); color:var(--danger); font-weight:600; font-size:0.82rem;
  cursor:pointer; font-family:inherit; transition:all .15s;
}
.qt-ed-delete:hover { background:var(--danger); color:#fff; border-color:var(--danger); }
.qt-ed-export {
  padding:10px 18px; border-radius:10px; border:1px solid rgba(212,136,14,0.3);
  background:rgba(212,136,14,0.06); color:var(--warn); font-weight:600; font-size:0.82rem;
  cursor:pointer; font-family:inherit; transition:all .15s; display:flex; align-items:center; gap:5px;
}
.qt-ed-export:hover { background:var(--warn); color:#fff; border-color:var(--warn); }
.qt-ed-ai-btn {
  padding:10px 18px; border-radius:10px; border:1px solid rgba(96,192,240,0.3);
  background:rgba(96,192,240,0.06); color:var(--accent2); font-weight:600; font-size:0.82rem;
  cursor:pointer; font-family:inherit; transition:all .15s; display:flex; align-items:center; gap:5px;
}
.qt-ed-ai-btn:hover { background:var(--accent2); color:#fff; border-color:var(--accent2); }

  /* Announcement banner */
  #ann-banner {
    display:none;
    position:fixed;top:0;left:220px;right:260px;z-index:9999;
    padding:10px 16px 10px 20px;
    display:none;align-items:center;gap:12px;
    box-shadow:0 2px 16px rgba(0,0,0,0.25);
    border-radius:0 0 10px 0;
    animation:annSlideDown 0.35s cubic-bezier(.22,1,.36,1);
  }
  .app-sidebar.collapsed ~ #ann-banner, body.sidebar-collapsed #ann-banner { left:56px; }
  @media (max-width:768px) { #ann-banner { left:0; } }
  @keyframes annSlideDown {
    from { transform:translateY(-100%); opacity:0; }
    to { transform:translateY(0); opacity:1; }
  }
  #ann-banner.visible { display:flex !important; }
  .ann-banner-icon { font-size:1.1rem;flex-shrink:0; }
  .ann-banner-body { flex:1;min-width:0; }
  .ann-banner-title { font-size:0.78rem;font-weight:800;margin-bottom:1px; }
  .ann-banner-msg { font-size:0.72rem;opacity:0.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
  .ann-banner-close {
    flex-shrink:0;background:none;border:none;font-size:1rem;cursor:pointer;
    opacity:0.6;padding:0 4px;line-height:1;
  }
  .ann-banner-close:hover { opacity:1; }


/* ═══════════════════════════════════════════════════════
   Landing Page — Screenshot Carousel
   ═══════════════════════════════════════════════════════ */

        /* macOS window chrome */
        .lp-ss-chrome{background:#111124;border-radius:14px 14px 0 0;padding:11px 16px;display:flex;align-items:center;gap:7px;border-bottom:1px solid rgba(255,255,255,0.06);}
        .lp-ss-dot{width:11px;height:11px;border-radius:50%;}
        .lp-ss-chrome-label{margin-left:10px;font-size:0.68rem;font-family:'Bricolage Grotesque',sans-serif;font-weight:600;color:rgba(255,255,255,0.2);letter-spacing:0.3px;}
        /* Viewport — clips image from bottom, never from sides */
        .lp-ss-vp{width:100%;aspect-ratio:2.5/1;overflow:hidden;position:relative;background:#eeeef5;box-shadow:0 20px 64px rgba(0,0,0,0.18);}
        .lp-ss-vp img{width:100%;height:auto;display:block;position:absolute;top:0;left:0;opacity:0;transition:opacity 0.35s ease;}
        .lp-ss-vp img.ss-active{opacity:1;}
        /* Tray below */
        .lp-ss-tray{background:#f5f5f8;border:1px solid rgba(26,26,46,0.08);border-top:none;border-radius:0 0 14px 14px;padding:16px 18px 18px;box-shadow:0 20px 64px rgba(0,0,0,0.08);}
        .lp-ss-caption{font-size:0.8rem;font-family:'Space Grotesk',sans-serif;color:rgba(26,26,46,0.45);font-weight:500;text-align:center;min-height:18px;margin-bottom:13px;}
        .lp-ss-tabs{display:flex;gap:5px;justify-content:center;flex-wrap:wrap;}
        .lp-ss-tab{font-size:0.67rem;font-weight:700;padding:5px 11px;border-radius:20px;cursor:pointer;color:rgba(26,26,46,0.38);border:1.5px solid transparent;background:none;font-family:'Bricolage Grotesque',sans-serif;transition:all 0.15s;white-space:nowrap;}
        .lp-ss-tab:hover{color:#18182e;background:rgba(212,136,14,0.08);}
        .lp-ss-tab.ss-on{color:#18182e;background:rgba(212,136,14,0.14);border-color:rgba(212,136,14,0.45);}
        /* Progress pips */
        .lp-ss-pips{display:flex;gap:5px;justify-content:center;margin-top:12px;}
        .lp-ss-pip{width:22px;height:3px;border-radius:2px;background:rgba(26,26,46,0.1);cursor:pointer;transition:width 0.2s;overflow:hidden;position:relative;}
        .lp-ss-pip.ss-on{width:34px;}
        .lp-ss-pip-fill{position:absolute;top:0;left:0;height:100%;width:0;background:#d4880e;border-radius:2px;}
        .lp-ss-pip.ss-on .lp-ss-pip-fill{animation:ssFill 4s linear forwards;}
        @keyframes ssFill{from{width:0}to{width:100%}}
        @media(max-width:768px){
          .lp-ss-vp{aspect-ratio:2.5/1;}
          .lp-ss-tabs{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px;}
          .lp-ss-tabs::-webkit-scrollbar{display:none;}
          .lp-ss-tray{padding:11px 12px 14px;}
        }
        @media(max-width:480px){.lp-ss-vp{aspect-ratio:2.5/1;}.lp-ss-tab{font-size:0.61rem;padding:4px 8px;}}

/* ── 7th Column: Testing / QA (Project Board) ── */
.col-testing { --col-color: #5590b8; }

/* ── 7th Column: On Hold (Sales Board) ── */
.scol-on-hold { --scol-color: #9090c0; }
/* Mobile: remove sidebar margin */
@media (max-width: 768px) {
  main#main-content { margin-left: 0 !important; padding: 0 !important; }
}
/* Mobile: allow body to be visible and scrollable */
@media (max-width: 768px) {
  body { overflow: visible !important; overflow-x: hidden !important; }
}

/* ── Time Section Redesign ────────────────────────────────────────────────── */
  .dp-time-wrap { display:flex; flex-direction:column; gap:10px; padding:4px 0; }
  .dp-time-total-bar { background:var(--surface2); border-radius:8px; padding:8px 12px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .dp-time-total-val { font-size:1.1rem; font-weight:800; color:var(--accent); font-family:'Bricolage Grotesque',sans-serif; }
  .dp-time-total-label { font-size:0.68rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--muted); margin-right:8px; }
  .dp-time-total-actions { display:flex; align-items:center; gap:6px; }
  .dp-time-form { border:1.5px solid var(--border); border-radius:10px; background:var(--surface2); padding:10px 12px; display:flex; flex-direction:column; gap:8px; }
  .dp-time-form-label { font-size:0.62rem; font-weight:800; letter-spacing:0.07em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:3px; }
  .dp-time-row1 { display:flex; align-items:flex-end; gap:8px; }
  .dp-time-field { display:flex; flex-direction:column; }
  .dp-time-num-input { padding:7px 8px; border-radius:7px; border:1.5px solid var(--border); background:var(--bg); color:var(--text); font-size:0.88rem; font-weight:700; font-family:'Space Grotesk',sans-serif; outline:none; text-align:center; width:64px; }
  .dp-time-num-input:focus { border-color:var(--accent); }
  .dp-time-colon { font-size:1.1rem; font-weight:700; color:var(--muted); padding-bottom:6px; }
  .dp-time-date-input { padding:7px 8px; border-radius:7px; border:1.5px solid var(--border); background:var(--bg); color:var(--text); font-size:0.78rem; font-family:'Space Grotesk',sans-serif; outline:none; }
  .dp-time-date-input:focus { border-color:var(--accent); }
  .dp-time-rte-wrap { border:1.5px solid var(--border); border-radius:8px; background:var(--bg); overflow:hidden; }
  .dp-time-rte-wrap:focus-within { border-color:var(--accent); }
  .dp-time-rte-toolbar { display:flex; align-items:center; gap:2px; padding:4px 6px; background:var(--surface2); border-bottom:1px solid var(--border); }
  .dp-time-rte-btn { background:none; border:none; cursor:pointer; color:var(--text); font-size:0.8rem; font-weight:700; padding:3px 7px; border-radius:4px; line-height:1; font-family:'Space Grotesk',sans-serif; transition:background 0.12s; }
  .dp-time-rte-btn:hover { background:var(--border); }
  .dp-time-rte-attach { background:none; border:none; cursor:pointer; color:var(--muted); font-size:0.75rem; font-weight:600; padding:3px 8px; border-radius:4px; line-height:1; font-family:'Space Grotesk',sans-serif; transition:all 0.12s; margin-left:2px; }
  .dp-time-rte-attach:hover { background:var(--surface2); color:var(--accent2); }
  .dp-time-rte-sep { width:1px; height:14px; background:var(--border); margin:0 3px; flex-shrink:0; }
  .dp-time-rte-div { min-height:80px; max-height:160px; overflow-y:auto; padding:8px 10px; outline:none; font-size:0.875rem; color:var(--text); line-height:1.55; font-family:'Space Grotesk',sans-serif; }
  .dp-time-rte-div:empty:before { content:attr(data-placeholder); color:var(--muted); pointer-events:none; }
  .dp-time-rte-div ul { margin:4px 0 4px 18px; padding:0; }
  .dp-time-pending-links { display:flex; flex-wrap:wrap; gap:5px; padding:4px 0 0; }
  .dp-time-add-btn { padding:7px 14px; border-radius:8px; border:none; background:var(--accent); color:#0e0e12; font-weight:800; font-size:0.8rem; cursor:pointer; font-family:'Space Grotesk',sans-serif; white-space:nowrap; flex-shrink:0; transition:opacity 0.15s; align-self:flex-end; }
  .dp-time-add-btn:hover { opacity:0.85; }
  .dp-time-log-wrap { display:flex; flex-direction:column; }

  /* ── Time month grouping ────────────────────────────────────── */
  .dp-time-month-group { margin-bottom:4px; }
  .dp-time-month-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:7px 2px 6px; cursor:pointer; user-select:none;
    border-bottom:2px solid var(--border); margin-bottom:2px;
    transition:opacity 0.15s;
  }
  .dp-time-month-header:hover { opacity:0.75; }
  .dp-time-month-left { display:flex; align-items:center; gap:8px; }
  .dp-time-month-name { font-size:0.8rem; font-weight:700; color:var(--text); }
  .dp-time-month-total { font-size:0.8rem; font-weight:800; color:var(--accent); font-family:'Bricolage Grotesque',sans-serif; }
  .dp-time-month-right { display:flex; align-items:center; gap:4px; }
  .dp-time-month-arrow { font-size:0.6rem; color:var(--muted); transition:transform 0.2s; display:inline-block; }
  .dp-time-month-arrow.open { transform:rotate(180deg); }
  .dp-time-month-body { display:none; }
  .dp-time-month-body.open { display:block; }
  .dp-time-entry { display:flex; align-items:flex-start; gap:8px; padding:9px 4px; border-bottom:1px solid var(--border); border-radius:5px; transition:background 0.12s; }
  .dp-time-entry:last-child { border-bottom:none; }
  .dp-time-entry:hover { background:var(--surface2); }
  .dp-time-entry-left { display:flex; flex-direction:column; gap:2px; width:50px; flex-shrink:0; }
  .dp-time-entry-date { font-size:0.7rem; color:var(--muted); white-space:nowrap; }
  .dp-time-entry-dur { font-size:0.75rem; font-weight:800; color:var(--accent); font-family:'Bricolage Grotesque',sans-serif; white-space:nowrap; }
  .dp-time-entry-body { flex:1; display:flex; flex-direction:column; gap:4px; min-width:0; }
  .dp-time-entry-note { font-size:0.875rem; color:var(--text); line-height:1.55; word-break:break-word; }
  .dp-time-entry-note ul { margin:4px 0 4px 16px; padding:0; }

/* ── Timer Stop Note Card ─────────────────────────────────────────────────── */
  .timer-stop-card {
    position:fixed; bottom:32px; right:32px; z-index:900;
    background:var(--surface); border:1.5px solid var(--accent);
    border-radius:16px; padding:16px 18px;
    box-shadow:0 8px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(232,180,40,0.2);
    font-family:'Space Grotesk',sans-serif;
    animation:fadeUp .25s ease both;
    width:360px; display:flex; flex-direction:column; gap:10px;
  }
  .timer-stop-header { display:flex; align-items:center; justify-content:space-between; }
  .timer-stop-title { font-size:0.8rem; font-weight:700; color:var(--text); }
  .timer-stop-dur { font-size:1rem; font-weight:800; color:var(--accent); font-family:'Bricolage Grotesque',sans-serif; margin-top:2px; }
  .timer-stop-rte-wrap { border:1.5px solid var(--border); border-radius:8px; background:var(--bg); overflow:hidden; }
  .timer-stop-rte-wrap:focus-within { border-color:var(--accent); }
  .timer-stop-rte-toolbar { display:flex; align-items:center; gap:2px; padding:4px 6px; background:var(--surface2); border-bottom:1px solid var(--border); }
  .timer-stop-rte-btn { background:none; border:none; cursor:pointer; color:var(--text); font-size:0.78rem; font-weight:700; padding:3px 7px; border-radius:4px; line-height:1; transition:background 0.12s; }
  .timer-stop-rte-btn:hover { background:var(--border); }
  .timer-stop-rte-div { min-height:60px; max-height:120px; overflow-y:auto; padding:8px 10px; outline:none; font-size:0.875rem; color:var(--text); line-height:1.55; }
  .timer-stop-rte-div:empty:before { content:'What did you work on? (optional)'; color:var(--muted); pointer-events:none; }
  .timer-stop-rte-div ul { margin:4px 0 4px 16px; padding:0; }
  .timer-stop-actions { display:flex; gap:8px; justify-content:flex-end; }
  .timer-stop-discard { padding:7px 14px; border-radius:8px; border:1.5px solid var(--border); background:none; color:var(--muted); font-size:0.78rem; font-weight:700; cursor:pointer; font-family:'Space Grotesk',sans-serif; transition:all 0.15s; }
  .timer-stop-discard:hover { border-color:var(--danger); color:var(--danger); }
  .timer-stop-save { padding:7px 18px; border-radius:8px; border:none; background:var(--accent); color:#0e0e12; font-size:0.82rem; font-weight:800; cursor:pointer; font-family:'Space Grotesk',sans-serif; transition:opacity 0.15s; }
  .timer-stop-save:hover { opacity:0.88; }

  /* ═══════════════════════════════════════════════════════
     RETAINER BOARD (Session 2)
     ═══════════════════════════════════════════════════════ */

  .rb-wrapper { max-width:1600px; margin:0 auto; padding:28px 36px 60px; }

  /* Header (matches sales-header style) */
  .rb-header { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:0 0 14px; }
  .rb-header .sales-title { flex-shrink:0; }
  .rb-summary { font-size:0.78rem; color:var(--muted); flex:1; min-width:160px; }

  /* Department tabs */
  .rb-tabs-prim {
    display:flex; gap:4px; border-bottom:1px solid var(--border);
    margin-bottom:18px; flex-wrap:wrap; padding:0 0 0 2px;
  }
  .rb-tab-prim {
    padding:9px 16px; cursor:pointer; font-size:0.82rem; font-weight:600;
    color:var(--muted); border:none; background:none;
    border-bottom:2px solid transparent; margin-bottom:-1px;
    user-select:none; font-family:'Space Grotesk',sans-serif;
    transition:color 0.15s, border-color 0.15s;
  }
  .rb-tab-prim:hover { color:var(--text); }
  .rb-tab-prim.on { color:var(--accent); border-bottom-color:var(--accent); }

  /* Empty state */
  .rb-empty {
    padding:60px 24px; max-width:520px; margin:30px auto; text-align:center;
    background:var(--surface); border:1px solid var(--border); border-radius:14px;
  }
  .rb-empty-icon { font-size:2.6rem; margin-bottom:14px; }
  .rb-empty-title { font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:1.25rem; color:var(--text); margin-bottom:8px; }
  .rb-empty-msg   { font-size:0.86rem; color:var(--muted); line-height:1.5; }

  /* Board list */
  .rb-board-list { display:flex; flex-direction:column; gap:14px; }

  /* Client card */
  .rb-client {
    background:var(--surface); border:1px solid var(--border); border-radius:12px;
    overflow:hidden; transition:border-color 0.15s;
  }
  .rb-client:hover { border-color:var(--muted); }
  .rb-client-h {
    display:flex; align-items:center; gap:10px; padding:14px 18px; cursor:pointer; user-select:none;
  }
  .rb-client-name { font-weight:700; font-size:1rem; color:var(--text); font-family:'Bricolage Grotesque',sans-serif; }
  .rb-client-meta { font-size:0.72rem; color:var(--muted); margin-left:auto; font-weight:600; }

  .rb-cstatus { font-size:0.65rem; line-height:1; }
  .rb-cstatus-active { color:var(--green); }
  .rb-cstatus-paused { color:var(--muted); }

  .rb-svc-tags { display:inline-flex; gap:5px; flex-wrap:wrap; }

  .rb-caret {
    display:inline-block; width:10px; font-size:0.65rem; color:var(--muted);
    transition:transform 0.15s; flex-shrink:0;
  }
  .rb-client.closed > .rb-client-h .rb-caret,
  .rb-month.closed  > .rb-month-h  .rb-caret { transform:rotate(-90deg); }
  .rb-client.closed > .rb-client-body,
  .rb-month.closed  > .rb-month-body { display:none; }
  .rb-client-body { padding:0 18px 12px; }

  /* Month sub-section */
  .rb-month {
    margin-top:8px; padding:6px 0 6px 14px;
    border-left:2px solid var(--border);
  }
  .rb-month-h {
    display:flex; align-items:center; gap:8px; padding:6px 0; cursor:pointer; user-select:none;
  }
  .rb-month-name { font-size:0.86rem; font-weight:700; color:var(--text); }
  .rb-month-meta { font-size:0.72rem; color:var(--muted); font-weight:600; }
  .rb-month-body { margin-top:4px; }

  /* Add row / month placeholder */
  .rb-add {
    font-size:0.72rem; color:var(--muted); padding:8px 0 4px;
    cursor:pointer; transition:color 0.15s; font-weight:600;
  }
  .rb-add:hover { color:var(--accent); }

  /* Task table */
  .rb-table { width:100%; border-collapse:collapse; }
  .rb-th {
    font-size:0.62rem; text-align:left; padding:6px 10px; color:var(--muted);
    font-weight:700; text-transform:uppercase; letter-spacing:0.6px;
    border-bottom:1px solid var(--border); background:rgba(0,0,0,0.04);
  }
  body.light-mode .rb-th { background:rgba(0,0,0,0.02); }
  .rb-th-task { width:38%; }
  .rb-th-r { text-align:right; }
  .rb-td {
    font-size:0.82rem; padding:10px; border-bottom:1px solid var(--border);
    vertical-align:middle; color:var(--text); word-wrap:break-word;
  }
  .rb-td-task { font-weight:600; }
  .rb-td-r { text-align:right; }
  .rb-td-due { color:var(--muted); font-size:0.78rem; }
  .rb-task-row:hover { background:rgba(212,136,14,0.04); }
  body.light-mode .rb-task-row:hover { background:rgba(212,136,14,0.06); }

  .rb-task-cell { display:flex; align-items:center; gap:8px; }
  .rb-task-title { flex:1; }

  .rb-add-row td { padding:8px 10px; font-size:0.72rem; color:var(--muted); cursor:pointer; font-weight:600; }
  .rb-add-row:hover td { color:var(--accent); background:transparent; }

  /* Comment count icon */
  .rb-cm-ico {
    display:inline-flex; align-items:center; gap:3px; font-size:0.72rem; color:var(--muted);
    flex-shrink:0; cursor:pointer; font-weight:600;
  }
  .rb-cm-ico:hover { color:var(--accent); }
  .rb-cm-ico svg { stroke:currentColor; }

  /* Avatars (multi-assignee stack) */
  .rb-av-stack { display:inline-flex; }
  .rb-av {
    width:24px; height:24px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:0.62rem; font-weight:800; box-sizing:border-box;
  }
  .rb-av-stack .rb-av + .rb-av { margin-left:-7px; border:2px solid var(--surface); }
  .rb-av-empty { background:var(--surface2); color:var(--muted); }
  .rb-av-c0 { background:rgba(212,136,14,0.18); color:var(--accent); }
  .rb-av-c1 { background:rgba(85,144,184,0.18); color:var(--accent2); }
  .rb-av-c2 { background:rgba(61,184,112,0.18); color:var(--green); }
  .rb-av-c3 { background:rgba(224,69,85,0.18); color:var(--danger); }
  .rb-av-c4 { background:rgba(155,143,247,0.20); color:#9b8ff7; }
  body.light-mode .rb-av-c0 { background:rgba(212,136,14,0.14); color:#854f0b; }
  body.light-mode .rb-av-c1 { background:rgba(85,144,184,0.14); color:#0d5a8a; }
  body.light-mode .rb-av-c2 { background:rgba(26,138,66,0.14); color:#0a6028; }
  body.light-mode .rb-av-c3 { background:rgba(200,32,60,0.14); color:#901428; }
  body.light-mode .rb-av-c4 { background:rgba(124,106,247,0.14); color:#5a18a0; }

  /* Status pills */
  .rb-status-pill {
    display:inline-block; padding:3px 10px; border-radius:7px;
    font-size:0.7rem; font-weight:700; white-space:nowrap;
    border:1px solid transparent;
  }
  .rb-st-work  { background:rgba(85,144,184,0.14);  color:var(--accent2); border-color:rgba(85,144,184,0.3); }
  .rb-st-rev   { background:rgba(212,136,14,0.14);  color:var(--accent);  border-color:rgba(212,136,14,0.3); }
  .rb-st-done  { background:rgba(61,184,112,0.14);  color:var(--green);   border-color:rgba(61,184,112,0.3); }
  .rb-st-stuck { background:rgba(224,69,85,0.14);   color:var(--danger);  border-color:rgba(224,69,85,0.3); }
  .rb-st-wait  { background:rgba(136,136,170,0.14); color:var(--muted);   border-color:var(--border); }
  .rb-st-sent  { background:rgba(155,143,247,0.16); color:#9b8ff7;        border-color:rgba(155,143,247,0.32); }
  .rb-st-sign  { background:rgba(46,196,176,0.14);  color:#2ec4b0;        border-color:rgba(46,196,176,0.3); }
  body.light-mode .rb-st-work  { background:rgba(13,90,138,0.10);  color:#0d5a8a; border-color:rgba(13,90,138,0.3); }
  body.light-mode .rb-st-rev   { background:rgba(176,88,0,0.10);   color:#7a3c00; border-color:rgba(176,88,0,0.3); }
  body.light-mode .rb-st-done  { background:rgba(20,122,56,0.10);  color:#0a6028; border-color:rgba(20,122,56,0.3); }
  body.light-mode .rb-st-stuck { background:rgba(200,32,60,0.10);  color:#901428; border-color:rgba(200,32,60,0.3); }
  body.light-mode .rb-st-sent  { background:rgba(90,24,160,0.10);  color:#5a18a0; border-color:rgba(90,24,160,0.3); }
  body.light-mode .rb-st-sign  { background:rgba(15,110,86,0.10);  color:#0f6e56; border-color:rgba(15,110,86,0.3); }

  /* Service tags (color-keyed — works for default + custom user tabs) */
  .rb-svc-tag {
    display:inline-block; padding:2px 8px; border-radius:6px;
    font-size:0.65rem; font-weight:700; white-space:nowrap;
    border:1px solid transparent;
  }
  .rb-svc-color-gold   { background:rgba(212,136,14,0.14); color:var(--accent);  border-color:rgba(212,136,14,0.3); }
  .rb-svc-color-blue   { background:rgba(85,144,184,0.14); color:var(--accent2); border-color:rgba(85,144,184,0.3); }
  .rb-svc-color-purple { background:rgba(155,143,247,0.16);color:#9b8ff7;        border-color:rgba(155,143,247,0.32); }
  .rb-svc-color-pink   { background:rgba(224,122,181,0.16);color:#e07ab5;        border-color:rgba(224,122,181,0.32); }
  .rb-svc-color-teal   { background:rgba(46,196,176,0.14); color:#2ec4b0;        border-color:rgba(46,196,176,0.3); }
  .rb-svc-color-lblue  { background:rgba(126,196,232,0.14);color:#7ec4e8;        border-color:rgba(126,196,232,0.3); }
  .rb-svc-color-coral  { background:rgba(232,155,90,0.14); color:#e89b5a;        border-color:rgba(232,155,90,0.3); }
  .rb-svc-color-green  { background:rgba(61,184,112,0.14); color:var(--green);   border-color:rgba(61,184,112,0.3); }
  .rb-svc-color-red    { background:rgba(224,69,85,0.14);  color:var(--danger);  border-color:rgba(224,69,85,0.3); }
  .rb-svc-color-slate  { background:rgba(136,136,170,0.18);color:#8888aa;        border-color:rgba(136,136,170,0.35); }
  body.light-mode .rb-svc-color-gold   { background:rgba(176,88,0,0.10);   color:#7a3c00; border-color:rgba(176,88,0,0.3); }
  body.light-mode .rb-svc-color-blue   { background:rgba(13,90,138,0.10);  color:#0d5a8a; border-color:rgba(13,90,138,0.3); }
  body.light-mode .rb-svc-color-purple { background:rgba(90,24,160,0.10);  color:#5a18a0; border-color:rgba(90,24,160,0.3); }
  body.light-mode .rb-svc-color-pink   { background:rgba(160,30,100,0.10); color:#a01e64; border-color:rgba(160,30,100,0.3); }
  body.light-mode .rb-svc-color-teal   { background:rgba(15,110,86,0.10);  color:#0f6e56; border-color:rgba(15,110,86,0.3); }
  body.light-mode .rb-svc-color-lblue  { background:rgba(13,90,138,0.10);  color:#0d5a8a; border-color:rgba(13,90,138,0.3); }
  body.light-mode .rb-svc-color-coral  { background:rgba(176,88,0,0.10);   color:#7a3c00; border-color:rgba(176,88,0,0.3); }
  body.light-mode .rb-svc-color-green  { background:rgba(20,122,56,0.10);  color:#0a6028; border-color:rgba(20,122,56,0.3); }
  body.light-mode .rb-svc-color-red    { background:rgba(200,32,60,0.10);  color:#901428; border-color:rgba(200,32,60,0.3); }
  body.light-mode .rb-svc-color-slate  { background:rgba(80,80,110,0.10);  color:#46466a; border-color:rgba(80,80,110,0.3); }

  /* Gear icon at end of tab row */
  .rb-tab-gear {
    margin-left:auto; padding:6px 10px; border:none; background:none;
    color:var(--muted); cursor:pointer; font-size:1rem; border-radius:8px;
    transition:color 0.15s, background 0.15s; align-self:center;
  }
  .rb-tab-gear:hover { color:var(--accent); background:rgba(212,136,14,0.08); }

  /* ── Retainer search ── */
  .rb-search-wrap {
    position:relative; flex:0 1 280px; min-width:200px;
  }
  .rb-search {
    width:100%; padding:8px 32px 8px 14px; border-radius:10px;
    border:1px solid var(--border); background:var(--surface); color:var(--text);
    font-size:0.82rem; font-family:'Space Grotesk',sans-serif;
    transition:border-color 0.15s, box-shadow 0.15s; box-sizing:border-box;
  }
  .rb-search::placeholder { color:var(--muted); }
  .rb-search:focus {
    outline:none; border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(212,136,14,0.12);
  }
  .rb-search-clear {
    position:absolute; right:6px; top:50%; transform:translateY(-50%);
    width:22px; height:22px; padding:0; border:none; background:none;
    color:var(--muted); font-size:1.1rem; line-height:1; cursor:pointer;
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-family:'Space Grotesk',sans-serif;
  }
  .rb-search-clear:hover { background:var(--border); color:var(--text); }