* { margin:0; padding:0; box-sizing:border-box; }
  :root { --brand:#c0622a; --dark:#1a1a1a; --bg:#f8f7f5; --card:#fff; --text:#333; --muted:#888; --green:#2d8a4e; --red:#c0392b; }
  body.dark-mode { --bg:#141414; --card:#1e1e1e; --text:#e8e8e8; --muted:#999; --dark:#0a0a0a; --brand:#e07840; --green:#3aa85e; --red:#e05050; }
  body.dark-mode th { background:#252525; color:#aaa; }
  body.dark-mode td { border-color:#2a2a2a; }
  body.dark-mode input, body.dark-mode select, body.dark-mode textarea { background:#252525; color:#e8e8e8; border-color:#444; }
  body.dark-mode .modal-overlay { background:rgba(0,0,0,0.75); }
  body.dark-mode .pm-item { background:#252525; border-color:#3a3a3a; }
  body.dark-mode .pm-panel { background:#1a1208; border-color:#8a4a1a; }
  body.dark-mode .pm-group-hdr { background:#1e1a14 !important; }
  body.dark-mode .ob-row:hover { background:#1e1e1e; }
  body.dark-mode .login-box { background:#1e1e1e; }
  body { font-family:'Segoe UI',system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--text); transition:background 0.2s,color 0.2s; }

  /* Login */
  .login-wrap { display:flex; justify-content:center; align-items:center; min-height:100vh; background:linear-gradient(135deg,#1a1a1a 0%,#2a1f17 100%); }
  .login-box { background:var(--card); padding:40px; border-radius:12px; width:360px; box-shadow:0 20px 60px rgba(0,0,0,0.3); }
  .login-box h1 { font-size:24px; margin-bottom:4px; color:var(--brand); }
  .login-box p { font-size:13px; color:var(--muted); margin-bottom:24px; }
  .login-box input { width:100%; padding:12px 14px; border:1px solid #ddd; border-radius:8px; font-size:14px; margin-bottom:12px; outline:none; transition:border .2s; }
  .login-box input:focus { border-color:var(--brand); }
  .login-box button { width:100%; padding:12px; background:var(--brand); color:#fff; border:none; border-radius:8px; font-size:15px; font-weight:600; cursor:pointer; transition:background .2s; }
  .login-box button:hover { background:#a8531f; }
  .login-err { color:var(--red); font-size:13px; margin-bottom:10px; display:none; }

  /* Nav */
  nav { background:var(--dark); color:#fff; padding:12px 24px; display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; z-index:100; }
  nav h1 { font-size:18px; color:var(--brand); }
  nav .nav-right { display:flex; gap:16px; align-items:center; }
  nav .nav-right span { font-size:13px; color:#aaa; }
  nav button { background:none; border:1px solid #555; color:#ccc; padding:6px 14px; border-radius:6px; cursor:pointer; font-size:13px; }
  nav button:hover { border-color:var(--brand); color:var(--brand); }
  .nav-tabs { display:flex; gap:4px; }
  .nav-tabs button { border:none; padding:8px 16px; border-radius:6px 6px 0 0; font-size:13px; }
  .nav-tabs button.active { background:var(--bg); color:var(--brand); font-weight:600; }

  /* Layout */
  .container { max-width:1200px; margin:0 auto; padding:20px; }

  /* Stats */
  .stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-bottom:24px; }
  .stat-card { background:var(--card); padding:20px; border-radius:10px; box-shadow:0 1px 4px rgba(0,0,0,0.06); }
  .stat-card .label { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; }
  .stat-card .value { font-size:28px; font-weight:700; color:var(--brand); margin-top:4px; }
  .stat-card .sub { font-size:12px; color:var(--muted); margin-top:2px; }

  /* Search bar */
  .search-bar { display:flex; gap:12px; margin-bottom:20px; align-items:center; }
  .search-bar input { flex:1; padding:12px 16px; border:1px solid #ddd; border-radius:8px; font-size:14px; outline:none; }
  .search-bar input:focus { border-color:var(--brand); }
  .search-bar select { padding:12px; border:1px solid #ddd; border-radius:8px; font-size:14px; outline:none; }
  .btn { padding:10px 20px; border:none; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; transition:all .2s; }
  .btn-brand { background:var(--brand); color:#fff; }
  .btn-brand:hover { background:#a8531f; }
  .btn-outline { background:none; border:1px solid #ddd; color:var(--text); }
  .btn-outline:hover { border-color:var(--brand); color:var(--brand); }
  .btn-sm { padding:6px 12px; font-size:12px; }
  .btn-green { background:var(--green); color:#fff; }
  .btn-red { background:var(--red); color:#fff; }

  /* Table */
  .table-wrap { background:var(--card); border-radius:10px; box-shadow:0 1px 4px rgba(0,0,0,0.06); overflow-x:auto; }
  table { width:100%; border-collapse:collapse; font-size:13px; }
  th { background:#f5f4f2; padding:10px 12px; text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:0.5px; color:var(--muted); position:sticky; top:0; }
  td { padding:10px 12px; border-top:1px solid #f0f0f0; }
  tr:hover td { background:#faf9f7; }
  .status-active { color:var(--green); font-weight:600; }
  .status-hold { color:#e67e22; font-weight:600; }
  .status-deceased, .status-removed { color:var(--red); font-weight:600; }
  .no-addr { color:var(--red); font-size:11px; }
  .has-addr { color:var(--green); font-size:11px; }

  /* Modal */
  .modal-overlay { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); z-index:200; justify-content:center; align-items:center; }
  .modal-overlay.open { display:flex; }
  .modal { background:var(--card); border-radius:12px; padding:32px; width:520px; max-height:90vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,0.3); }
  .modal h2 { font-size:20px; margin-bottom:20px; color:var(--brand); }
  .modal .field { margin-bottom:14px; }
  .modal .field label { display:block; font-size:12px; color:var(--muted); margin-bottom:4px; text-transform:uppercase; letter-spacing:0.5px; }
  .modal .field input, .modal .field select { width:100%; padding:10px 12px; border:1px solid #ddd; border-radius:8px; font-size:14px; outline:none; }
  .modal .field input:focus, .modal .field select:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(192,98,42,0.1); }
  .modal .row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .modal .actions { display:flex; gap:10px; margin-top:20px; justify-content:flex-end; }
  .toast { position:fixed; bottom:20px; right:20px; background:var(--green); color:#fff; padding:12px 20px; border-radius:8px; font-size:14px; z-index:300; display:none; box-shadow:0 4px 12px rgba(0,0,0,0.15); }
  .toast.error { background:var(--red); }

  /* Sortable headers */
  th.sortable { cursor:pointer; user-select:none; transition:color .2s; white-space:nowrap; }
  th.sortable:hover { color:var(--brand); }
  th.sortable span { font-size:10px; margin-left:2px; }

  /* Pagination */
  .pagination { display:flex; justify-content:space-between; align-items:center; padding:16px; }
  .pagination span { font-size:13px; color:var(--muted); }

  /* Send log */
  .log-item { padding:12px 16px; border-bottom:1px solid #f0f0f0; }
  .log-item:last-child { border:none; }
  .log-item .log-name { font-weight:600; }
  .log-item .log-detail { font-size:12px; color:var(--muted); margin-top:2px; }

  /* Mobile contact cards (hidden on desktop, shown on mobile) */
  .mobile-cards { display:none; }
  .m-card { background:var(--card); border-radius:10px; padding:16px; margin-bottom:12px; box-shadow:0 1px 4px rgba(0,0,0,0.06); }
  .m-card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
  .m-card-name { font-size:16px; font-weight:700; color:var(--text); }
  .m-card-row { display:flex; justify-content:space-between; font-size:13px; padding:3px 0; color:var(--muted); }
  .m-card-row .m-label { font-weight:600; color:#999; font-size:11px; text-transform:uppercase; }
  .m-card-row .m-value { color:var(--text); text-align:right; max-width:60%; }
  .m-card-actions { display:flex; gap:8px; margin-top:12px; padding-top:10px; border-top:1px solid #f0f0f0; }
  .m-card-actions button { flex:1; }

  /* Mobile sort dropdown */
  .mobile-sort { display:none; }

  /* Outbox Tab */
  .ob-summary { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
  .ob-stat { background:var(--card); border-radius:10px; padding:14px 20px; flex:1; min-width:140px; box-shadow:0 1px 4px rgba(0,0,0,0.06); }
  .ob-stat .ob-num { font-size:28px; font-weight:800; }
  .ob-stat .ob-lbl { font-size:12px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; margin-top:2px; }
  .ob-stat.highlight { border-left:4px solid var(--brand); }
  .ob-schedule { background:var(--card); border-radius:10px; padding:16px 20px; margin-bottom:20px; box-shadow:0 1px 4px rgba(0,0,0,0.06); }
  .ob-schedule h4 { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:0.8px; color:var(--muted); margin:0 0 12px; }
  .ob-sched-row { display:flex; align-items:center; gap:12px; padding:8px 0; border-bottom:1px solid #f0f0f0; }
  .ob-sched-row:last-child { border-bottom:none; }
  .ob-sched-time { font-size:13px; font-weight:700; color:var(--dark); min-width:70px; }
  .ob-sched-label { font-size:13px; flex:1; }
  .ob-sched-days { font-size:11px; color:var(--muted); }
  .ob-sched-status { font-size:12px; font-weight:700; padding:2px 10px; border-radius:12px; }
  .ob-sched-status.done { background:#eafaf0; color:#27ae60; }
  .ob-sched-status.pending { background:#fff8f0; color:#e67e22; }
  /* Transactions Tab */
  .tx-card { background:#fff; border-radius:14px; box-shadow:0 2px 12px rgba(0,0,0,0.07); margin-bottom:20px; overflow:hidden; }
  .tx-header { background:linear-gradient(135deg,#0f172a,#1e3a5f); color:#fff; padding:22px 24px; }
  .tx-address { font-size:20px; font-weight:800; margin:0 0 4px; }
  .tx-buyers { font-size:14px; opacity:0.75; margin:0 0 14px; }
  .tx-meta { display:flex; gap:20px; flex-wrap:wrap; }
  .tx-meta-item { font-size:12px; opacity:0.65; text-transform:uppercase; letter-spacing:0.8px; }
  .tx-meta-item span { display:block; font-size:16px; font-weight:700; opacity:1; color:#38bdf8; letter-spacing:0; text-transform:none; margin-top:2px; }
  .tx-progress { background:#0d2137; padding:12px 24px; }
  .tx-prog-bar { height:6px; background:rgba(255,255,255,0.12); border-radius:3px; margin-top:6px; }
  .tx-prog-fill { height:6px; background:#38bdf8; border-radius:3px; }
  .tx-timeline { padding:20px 24px; }
  .tx-tl-row { display:flex; align-items:center; gap:12px; padding:8px 0; border-bottom:1px solid #f5f5f5; font-size:13px; }
  .tx-tl-row:last-child { border-bottom:none; }
  .tx-tl-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
  .tx-tl-dot.sent { background:#27ae60; }
  .tx-tl-dot.next { background:#e67e22; box-shadow:0 0 0 3px #fde8cc; }
  .tx-tl-dot.upcoming { background:#ddd; }
  .tx-tl-dot.skipped { background:#ccc; }
  .tx-tl-date { width:72px; flex-shrink:0; color:var(--muted); }
  .tx-tl-label { flex:1; }
  .tx-tl-actions { display:flex; gap:6px; flex-shrink:0; }
  .tx-tl-actions button { font-size:11px; padding:3px 9px; border-radius:5px; cursor:pointer; border:1px solid #ddd; background:#fff; color:#555; font-weight:600; transition:all .15s; }
  .tx-tl-actions button:hover { border-color:var(--brand); color:var(--brand); }
  .tx-tl-actions button.skip-btn { border-color:#e74c3c; color:#e74c3c; }
  .tx-tl-actions button.skip-btn:hover { background:#e74c3c; color:#fff; }
  .tx-tl-badge { font-size:10px; padding:1px 7px; border-radius:8px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; }
  .tx-tl-badge.sent { background:#eafaf0; color:#27ae60; }
  .tx-tl-badge.next { background:#fff3e0; color:#e67e22; }
  .tx-tl-badge.email { background:#eaf3fb; color:#2980b9; }
  .tx-tl-badge.sms { background:#eafaf0; color:#27ae60; }
  .tx-tl-badge.skipped { background:#f5f5f5; color:#999; text-decoration:line-through; }
  .tx-tl-badge.approved { background:#eafaf0; color:#27ae60; }
  .tx-tl-badge.needs-approval { background:#fff8e1; color:#e67e22; }
  .next-up-panel { background:#fff8f3; border-left:4px solid #e67e22; padding:16px 24px; }
  .next-up-panel .nu-label { font-size:10px; font-weight:800; color:#e67e22; text-transform:uppercase; letter-spacing:1.5px; margin-bottom:6px; }
  .next-up-panel .nu-subject { font-size:15px; font-weight:700; color:#1a1a1a; margin-bottom:8px; }
  .next-up-panel .nu-meta { font-size:12px; color:#777; margin-bottom:12px; }
  .next-up-panel .nu-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
  .btn-approve { background:#27ae60; color:#fff; border:none; padding:6px 16px; border-radius:8px; font-size:12px; font-weight:700; cursor:pointer; }
  .btn-approve.approved { background:#eafaf0; color:#27ae60; border:2px solid #27ae60; }
  .btn-approve:hover { opacity:0.85; }
  /* Escrow message preview modal */
  .escrow-preview-modal { display:none; position:fixed; top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6);z-index:300;justify-content:center;align-items:center; }
  .escrow-preview-modal.open { display:flex; }
  .escrow-preview-inner { background:var(--card);border-radius:12px;width:680px;max-width:96vw;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,0.35); }
  .escrow-preview-header { padding:18px 24px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #eee; }
  .escrow-preview-header h3 { font-size:16px;color:var(--brand); }
  .escrow-preview-body { flex:1;overflow:auto;padding:0; }
  .escrow-preview-footer { padding:14px 24px;border-top:1px solid #eee;display:flex;gap:10px;justify-content:flex-end; }

  /* Pending Messages (Outbox preview) */
  .pm-panel { background:#fff8f0; border:2px solid #e67e22; border-radius:12px; padding:16px 20px; margin-bottom:16px; }
  .pm-panel h3 { margin:0 0 4px; font-size:15px; color:#c0622a; display:flex; align-items:center; gap:8px; }
  .pm-panel .pm-sub { font-size:12px; color:#a0522d; margin:0 0 12px; }
  .pm-item { background:#fff; border:1px solid #f0d9c4; border-radius:8px; padding:12px 14px; margin-bottom:10px; }
  .pm-item:last-child { margin-bottom:0; }
  .pm-meta { display:flex; gap:10px; align-items:center; margin-bottom:8px; flex-wrap:wrap; }
  .pm-name { font-weight:700; font-size:14px; }
  .pm-step { font-size:11px; background:#fef0e0; color:#c0622a; padding:2px 8px; border-radius:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }
  .pm-type-sms { font-size:11px; background:#eafaf0; color:#27ae60; padding:2px 8px; border-radius:10px; font-weight:600; }
  .pm-type-email { font-size:11px; background:#eaf3fb; color:#2980b9; padding:2px 8px; border-radius:10px; font-weight:600; }
  .pm-body { font-size:13px; color:#444; line-height:1.6; white-space:pre-wrap; margin-bottom:10px; border-left:3px solid #e67e22; padding-left:10px; }
  .pm-actions { display:flex; gap:8px; flex-wrap:wrap; }
  .pm-edit-area { width:100%; box-sizing:border-box; font-size:13px; padding:8px; border:1px solid #ddd; border-radius:6px; min-height:80px; margin-bottom:8px; display:none; resize:vertical; }

  /* ── Campaign Plan (cp-*) ─────────────────────────────────────── */
  .cp-hero{background:var(--dark);color:#fff;border-radius:14px;padding:22px 26px;margin-bottom:20px;}
  .cp-hero-title{font-size:21px;font-weight:800;margin:0 0 3px;letter-spacing:-0.3px;}
  .cp-hero-sub{font-size:13px;opacity:0.6;margin:0;}
  .cp-stat-row{display:flex;gap:28px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,0.15);padding-top:14px;margin-top:14px;}
  .cp-stat{min-width:70px;}
  .cp-stat-n{font-size:28px;font-weight:800;line-height:1;}
  .cp-stat-lbl{font-size:10px;opacity:0.5;text-transform:uppercase;letter-spacing:1px;margin-top:3px;}
  .cp-group{background:#fff;border-radius:12px;box-shadow:0 1px 8px rgba(0,0,0,0.07);margin-bottom:18px;overflow:hidden;}
  .cp-group-hdr{display:flex;align-items:center;gap:12px;padding:14px 18px;background:#fafafa;border-bottom:2px solid #f0f0f0;}
  .cp-group-icon{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;}
  .cp-group-icon.email{background:#eaf3fb;}
  .cp-group-icon.sms{background:#eafaf0;}
  .cp-group-title{font-size:14px;font-weight:800;color:var(--dark);flex:1;}
  .cp-group-cnt{font-size:12px;background:#ebebeb;color:#555;padding:3px 10px;border-radius:10px;font-weight:700;white-space:nowrap;}
  .cp-sel-all{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);cursor:pointer;user-select:none;white-space:nowrap;}
  .cp-sel-all input{width:14px;height:14px;cursor:pointer;accent-color:var(--brand);}
  .cp-row{display:flex;align-items:flex-start;gap:13px;padding:14px 18px;border-bottom:1px solid #f5f5f5;transition:background 0.1s;}
  .cp-row:last-child{border-bottom:none;}
  .cp-row:hover{background:#fdfcfb;}
  .cp-row.cp-skipped{opacity:0.35;}
  .cp-cb{flex-shrink:0;margin-top:5px;width:16px;height:16px;cursor:pointer;accent-color:var(--brand);}
  .cp-av{width:40px;height:40px;border-radius:50%;color:#fff;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;text-transform:uppercase;letter-spacing:0.5px;}
  .cp-info{flex:1;min-width:0;}
  .cp-name-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:2px;}
  .cp-name{font-size:14px;font-weight:700;color:var(--dark);}
  .cp-type-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;text-transform:uppercase;letter-spacing:0.5px;}
  .cp-type-badge.email{background:#eaf3fb;color:#2980b9;}
  .cp-type-badge.sms{background:#eafaf0;color:#27ae60;}
  .cp-dest{font-size:12px;color:var(--muted);margin-bottom:6px;}
  .cp-subject{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:3px;}
  .cp-msg-preview{font-size:13px;color:#444;line-height:1.6;margin-bottom:6px;padding:9px 13px;background:#f8f7f5;border-radius:7px;border-left:3px solid #ddd;}
  .cp-msg-preview.email-prev{border-left-color:#2980b9;}
  .cp-msg-preview.sms-prev{border-left-color:#27ae60;}
  .cp-engage{font-size:11px;font-weight:600;margin-top:2px;}
  .cp-engage.opened{color:#27ae60;}
  .cp-engage.clicked{color:var(--brand);}
  .cp-engage.none{color:#ccc;}
  .cp-row-btns{display:flex;flex-direction:column;gap:5px;flex-shrink:0;padding-top:2px;}
  .cp-btn-skip{border:1px solid #e0e0e0;background:#fff;color:#bbb;border-radius:6px;padding:5px 11px;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap;}
  .cp-btn-skip:hover{border-color:#e07070;color:#e07070;background:#fff5f5;}
  .cp-btn-hold{border:1px solid #e0e0e0;background:#fff;color:#bbb;border-radius:6px;padding:5px 11px;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap;}
  .cp-btn-hold:hover{border-color:#e67e22;color:#e67e22;}
  .cp-btn-schedule{border:1px solid #c8def5;background:#f0f7ff;color:#2980b9;border-radius:6px;padding:5px 11px;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap;}
  .cp-btn-schedule:hover{border-color:#2980b9;background:#ddeeff;color:#1a5f8e;}
  .sched-modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.55);z-index:310;justify-content:center;align-items:center;}
  .sched-modal.open{display:flex;}
  .sched-modal-inner{background:#fff;border-radius:14px;width:520px;max-width:96vw;padding:26px 28px;box-shadow:0 20px 60px rgba(0,0,0,0.3);}
  .sched-opt{display:flex;align-items:flex-start;gap:10px;font-size:14px;cursor:pointer;padding:10px 12px;border-radius:8px;border:1.5px solid #eee;margin-bottom:8px;transition:border-color 0.15s;}
  .sched-opt:has(input:checked){border-color:var(--brand);background:#fff8f5;}
  .sched-cascade-box{background:#f0f8ff;border:1.5px solid #c0ddf0;border-radius:10px;padding:14px 16px;margin-top:4px;}
  .cp-hold-section{background:#fff5f5;border:1.5px solid #f5c0c0;border-radius:12px;padding:16px 20px;margin-bottom:20px;}
  .cp-hold-title{font-size:13px;font-weight:800;color:#cc4444;margin:0 0 14px;display:flex;align-items:center;gap:8px;}
  .cp-hold-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid #fde0e0;}
  .cp-hold-row:last-child{border-bottom:none;}
  .cp-hold-av{width:32px;height:32px;border-radius:50%;background:#ffbbbb;color:#cc4444;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .cp-hold-name{font-size:13px;font-weight:700;color:var(--dark);min-width:140px;}
  .cp-hold-detail{font-size:12px;color:#aaa;flex:1;}
  .cp-btn-resume{background:#27ae60;color:#fff;border:none;border-radius:6px;padding:5px 14px;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap;}
  .cp-btn-resume:hover{opacity:0.85;}
  .cp-send-bar{position:sticky;bottom:0;background:#fff;border-top:2px solid #f0f0f0;padding:13px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:0 -4px 18px rgba(0,0,0,0.09);border-radius:0 0 10px 10px;margin-top:10px;}
  .cp-send-lbl{font-size:14px;color:var(--muted);}
  .cp-send-lbl strong{color:var(--dark);font-size:18px;font-weight:800;}
  .cp-send-btn{background:var(--brand);color:#fff;border:none;border-radius:10px;padding:13px 32px;font-size:15px;font-weight:800;cursor:pointer;letter-spacing:0.5px;transition:opacity 0.15s;}
  .cp-send-btn:hover{opacity:0.88;}
  .cp-send-btn:disabled{background:#ccc;cursor:not-allowed;opacity:1;}
  .cp-refresh-btn{background:transparent;color:rgba(255,255,255,0.8);border:1.5px solid rgba(255,255,255,0.4);border-radius:8px;padding:8px 14px;font-size:12px;font-weight:700;cursor:pointer;}
  .cp-refresh-btn:hover{background:rgba(255,255,255,0.1);}
  .cp-camp-bar{display:flex;align-items:center;gap:14px;margin-bottom:20px;flex-wrap:wrap;padding:16px 20px;background:#fff;border-radius:12px;box-shadow:0 1px 8px rgba(0,0,0,0.07);}
  .cp-camp-sel{flex:1;min-width:220px;border:2px solid #e0e0e0;border-radius:10px;padding:10px 14px;font-size:14px;font-weight:600;color:var(--dark);background:#fff;cursor:pointer;appearance:none;-webkit-appearance:none;}
  .cp-camp-sel:focus{outline:none;border-color:var(--brand);}
  .cp-camp-date{font-size:13px;color:var(--muted);flex-shrink:0;white-space:nowrap;}
  .cp-prev-panel{background:#fff;border-radius:14px;box-shadow:0 2px 12px rgba(0,0,0,0.08);margin-bottom:20px;overflow:hidden;}
  .cp-prev-hdr{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1.5px solid #f0f0f0;background:#fafafa;flex-wrap:wrap;}
  .cp-prev-hdr-left{min-width:0;}
  .cp-prev-lbl{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);}
  .cp-prev-subj{font-size:14px;font-weight:700;color:var(--dark);margin-top:3px;}
  .cp-prev-body{padding:24px 28px;max-height:540px;overflow-y:auto;}
  .cp-email-preview{background:#f7f7f7;border-radius:10px;padding:28px 32px;font-family:Georgia,serif;font-size:15px;color:#333;line-height:1.8;}
  .cp-email-preview p{margin:0 0 18px;}
  .cp-sms-preview{background:#e8f8ee;border-radius:18px 18px 6px 18px;padding:14px 20px;max-width:380px;font-size:15px;line-height:1.7;color:#1a1a1a;white-space:pre-wrap;font-family:-apple-system,sans-serif;border:1.5px solid #b7e4c7;}
  .cp-master-ta{width:100%;box-sizing:border-box;font-size:14px;line-height:1.8;padding:14px 18px;border:2px solid var(--brand);border-radius:10px;min-height:180px;resize:vertical;font-family:Georgia,serif;color:#333;}
  .cp-btn-edit-tpl{border:1.5px solid #ddd;background:#fff;color:#555;border-radius:8px;padding:7px 16px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;}
  .cp-btn-edit-tpl:hover,.cp-btn-edit-tpl.active{border-color:var(--brand);color:var(--brand);background:#fff8f5;}
  .cp-btn-apply-tpl{background:var(--brand);color:#fff;border:none;border-radius:8px;padding:9px 20px;font-size:12px;font-weight:800;cursor:pointer;}
  .cp-btn-apply-tpl:hover{opacity:0.88;}
  .cp-recip-panel{background:#fff;border-radius:14px;box-shadow:0 2px 12px rgba(0,0,0,0.08);margin-bottom:20px;overflow:hidden;}
  .cp-recip-hdr{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1.5px solid #f0f0f0;background:#fafafa;flex-wrap:wrap;}
  .cp-recip-hdr-title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);flex:1;}
  .cp-recip-row{border-bottom:1px solid #f5f5f5;}
  .cp-recip-row:last-child{border-bottom:none;}
  .cp-recip-main{display:flex;align-items:center;gap:12px;padding:13px 20px;transition:background .1s;}
  .cp-recip-main:hover{background:#fdfcfb;}
  .cp-recip-row.cp-skipped .cp-recip-main{opacity:0.38;}
  .cp-recip-cb{flex-shrink:0;width:17px;height:17px;cursor:pointer;accent-color:var(--brand);}
  .cp-recip-info{flex:1;min-width:0;}
  .cp-recip-name{font-size:14px;font-weight:700;color:var(--dark);}
  .cp-recip-dest{font-size:12px;color:var(--muted);margin-top:1px;}
  .cp-recip-engage{font-size:11px;margin-top:3px;}
  .cp-badge-custom{font-size:10px;font-weight:700;background:#fff3cd;color:#856404;padding:2px 7px;border-radius:10px;margin-left:6px;letter-spacing:.04em;}
  .cp-recip-btns{display:flex;gap:6px;flex-shrink:0;}
  .cp-btn-cedit{border:1px solid #ddd;background:#f8f8f8;color:#666;border-radius:6px;padding:5px 11px;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap;}
  .cp-btn-cedit:hover,.cp-btn-cedit.active{border-color:#c0622a;color:#c0622a;background:#fff8f2;}
  .cp-btn-chold{border:1px solid #ddd;background:#f8f8f8;color:#bbb;border-radius:6px;padding:5px 11px;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap;}
  .cp-btn-chold:hover{border-color:#e67e22;color:#e67e22;background:#fffbf5;}
  .cp-recip-edit{padding:14px 20px 18px;background:#fffcf8;border-top:1px solid #f0f0f0;display:none;}
  .cp-recip-edit.open{display:block;}
  .cp-recip-ta{width:100%;box-sizing:border-box;font-size:13px;line-height:1.8;padding:10px 14px;border:2px solid #ddd;border-radius:8px;min-height:100px;resize:vertical;font-family:Georgia,serif;color:#333;}
  .cp-recip-ta:focus{outline:none;border-color:#c0622a;}
  .cp-recip-ta-note{font-size:11px;color:var(--muted);margin-top:6px;}
  .ob-filters { display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
  .ob-row { display:grid; grid-template-columns:90px 60px 1fr 1fr 1fr; gap:10px; align-items:center; padding:10px 12px; border-bottom:1px solid #f5f5f5; font-size:13px; }
  .ob-row:hover { background:#fafaf8; }
  .ob-row .ob-time { color:var(--muted); font-size:11px; }
  .ob-row .ob-type-badge { display:inline-block; padding:2px 8px; border-radius:12px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; }
  .ob-type-email { background:#eaf3fb; color:#2980b9; }
  .ob-type-sms { background:#eafaf0; color:#27ae60; }
  .ob-row .ob-contact { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .ob-row .ob-campaign { color:var(--muted); font-size:11px; }
  .ob-thead { cursor:default; }
  .ob-thead div { cursor:pointer; user-select:none; white-space:nowrap; }
  .ob-thead div:hover { color:var(--brand); }
  .ob-thead div.ob-sort-active { color:var(--brand); font-weight:800; }
  .ob-row .ob-subject { color:#555; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:12px; }
  .ob-row .ob-engagement { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
  .ob-badge { display:inline-flex; align-items:center; gap:3px; font-size:11px; font-weight:600; padding:2px 7px; border-radius:10px; }
  .ob-badge.opened { background:#fef9e7; color:#d4ac0d; }
  .ob-badge.video { background:#eaf3fb; color:#2980b9; }
  .ob-badge.browse { background:#f3eafc; color:#8e44ad; }
  .ob-badge.listing { background:#eafaf0; color:#27ae60; }
  .ob-badge.none { background:#f5f5f5; color:#bbb; }
  .ob-thead { display:grid; grid-template-columns:90px 60px 1fr 1fr 1fr; gap:10px; padding:6px 12px; font-size:10px; text-transform:uppercase; letter-spacing:0.5px; color:var(--muted); font-weight:700; border-bottom:2px solid #eee; margin-bottom:4px; }
  @media (max-width:768px) {
    .ob-row { grid-template-columns:1fr 1fr; gap:6px; }
    .ob-thead { display:none; }
  }

  /* Action Banner */
  #actionBanner { display:none; position:sticky; top:56px; z-index:98; background:#c0392b; color:#fff; padding:10px 20px; display:none; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; box-shadow:0 2px 8px rgba(0,0,0,0.3); animation:bannerPulse 1.4s ease-in-out infinite; }
  #actionBanner.show { display:flex; }
  @keyframes bannerPulse { 0%,100%{background:#c0392b;box-shadow:0 2px 8px rgba(0,0,0,0.3);} 50%{background:#922b21;box-shadow:0 2px 20px rgba(192,57,43,0.7);} }
  #actionBanner .ab-msg { font-size:15px; font-weight:800; letter-spacing:0.3px; }
  #actionBanner .ab-sub { font-size:12px; opacity:0.9; margin-top:3px; }
  #actionBanner .ab-chips { display:flex; gap:8px; flex-wrap:wrap; margin-top:5px; }
  #actionBanner .ab-chip { background:rgba(255,255,255,0.2); border-radius:20px; padding:2px 10px; font-size:11px; font-weight:700; }
  #actionBanner .ab-chip.urgent { background:rgba(255,255,255,0.35); }
  #actionBanner button { background:#fff; color:#c0392b; border:none; padding:8px 18px; border-radius:6px; font-weight:700; font-size:13px; cursor:pointer; white-space:nowrap; }
  #actionBanner button:hover { background:#ffe8e8; }

  /* Action Item Center */
  .ac-section { margin-bottom:20px; }
  .ac-section-hdr { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:0.8px; padding:6px 10px; border-radius:6px; margin-bottom:8px; }
  .ac-section-hdr.urgent { background:#fdecea; color:#c0392b; }
  .ac-section-hdr.followup { background:#fef3e8; color:#e67e22; }
  .ac-section-hdr.lunch { background:#eaf6ee; color:#1e8449; }
  .ac-section-hdr.task { background:#f0f3ff; color:#2c3e8c; }
  .ac-section-hdr.snoozed { background:#f5f5f5; color:#888; }
  .ac-section-hdr .ac-badge { background:currentColor; color:#fff; border-radius:10px; padding:1px 7px; font-size:11px; }
  .ai-item { padding:14px; border-radius:10px; background:#fff; border:1px solid #eee; margin-bottom:8px; }
  .ai-item.cat-urgent { border-left:5px solid #c0392b; background:#fffafa; animation:urgentPulse 2s ease-in-out infinite; }
  @keyframes urgentPulse { 0%,100%{box-shadow:0 0 0 0 rgba(192,57,43,0);} 50%{box-shadow:0 0 0 4px rgba(192,57,43,0.12);} }
  .ai-item.cat-followup { border-left:5px solid #e67e22; }
  .ai-item.cat-lunch { border-left:5px solid #27ae60; }
  .ai-item.cat-task { border-left:5px solid #5b7be3; }
  .ai-item .ai-who { font-size:12px; color:var(--muted); margin-bottom:4px; }
  .ai-item .ai-desc { font-size:14px; font-weight:600; color:var(--dark); margin-bottom:10px; line-height:1.4; }
  .ai-item .ai-actions { display:flex; gap:8px; flex-wrap:wrap; }
  .ai-item .ai-explain { display:none; margin-top:10px; }
  .ai-item .ai-explain textarea { width:100%; padding:8px; border:1px solid #ddd; border-radius:6px; font-size:13px; font-family:inherit; resize:vertical; }
  .ai-item .ai-explain p { font-size:12px; color:var(--brand); font-weight:600; margin-bottom:6px; }

  /* Resume recording button */
  #resumeRecBtn { display:none; }

  /* Journey Tab */
  .j-pipeline { display:flex; align-items:flex-start; }
  .j-step-wrap { display:flex; flex-direction:column; align-items:center; }
  .j-dot { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:8px; font-weight:800; flex-shrink:0; }
  .j-dot.done { background:#27ae60; color:#fff; }
  .j-dot.next-up { background:#e67e22; color:#fff; box-shadow:0 0 0 3px rgba(230,126,34,0.25); }
  .j-dot.pending { background:#e8e8e8; color:#bbb; }
  .j-connector { height:2px; width:10px; flex-shrink:0; margin-top:12px; }
  .j-connector.done { background:#27ae60; }
  .j-connector.pending { background:#e0e0e0; }
  .j-step-date { font-size:9px; color:var(--muted); margin-top:2px; white-space:nowrap; max-width:34px; text-align:center; line-height:1.2; }
  .j-badge { display:inline-block; font-size:10px; font-weight:700; padding:2px 8px; border-radius:10px; text-transform:uppercase; letter-spacing:0.5px; white-space:nowrap; }
  .j-badge.engaged { background:#eafaf1; color:#27ae60; }
  .j-badge.active { background:#eaf3fb; color:#2980b9; }
  .j-badge.unresponsive { background:#fef9e7; color:#c0392b; }
  .j-badge.on_hold { background:#fef5e7; color:#f39c12; }
  .j-badge.complete { background:#f0f0f0; color:#888; }
  .j-badge.not_started { background:#f5f5f5; color:#aaa; }
  .j-next { font-size:12px; line-height:1.5; }
  .j-next.overdue .j-next-label { color:#c0392b; font-weight:700; }
  .j-next.today .j-next-label { color:#e67e22; font-weight:700; }
  .j-next.soon .j-next-label { color:#2980b9; }
  .j-pipe-stat { background:var(--card); border-radius:10px; padding:10px 12px; text-align:center; box-shadow:0 1px 6px rgba(0,0,0,0.06); cursor:pointer; transition:transform .15s,box-shadow .15s; }
  .j-pipe-stat:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.1); }
  .j-pipe-stat .ps-num { font-size:22px; font-weight:800; color:var(--dark); }
  .j-pipe-stat .ps-label { font-size:10px; color:var(--muted); margin-top:2px; }
  .j-pipe-stat .ps-bar { height:3px; border-radius:2px; margin-top:6px; }
  .bp-arrow { display:flex; flex-direction:column; align-items:center; padding:0 6px; flex-shrink:0; gap:3px; }
  .bp-arrow-line { font-size:18px; color:#bbb; }
  .bp-wait { font-size:10px; color:var(--muted); background:#f0ede8; border-radius:20px; padding:2px 8px; white-space:nowrap; }
  .queue-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(185px,1fr)); gap:12px; margin-bottom:20px; }
  .qcard { background:var(--card); border-radius:10px; padding:16px; box-shadow:0 1px 4px rgba(0,0,0,0.06); border-left:4px solid #ddd; cursor:pointer; transition:transform .15s,box-shadow .15s; }
  .qcard:hover { transform:translateY(-2px); box-shadow:0 4px 14px rgba(0,0,0,0.1); }
  .qcard .qc-icon { font-size:22px; margin-bottom:6px; }
  .qcard .qc-count { font-size:30px; font-weight:800; }
  .qcard .qc-label { font-size:13px; font-weight:600; color:var(--dark); margin-top:1px; }
  .qcard .qc-sub { font-size:11px; color:var(--muted); margin-top:2px; }
  .qcard.qc-hot { border-left-color:#c0392b; } .qcard.qc-hot .qc-count { color:#c0392b; }
  .qcard.qc-fu  { border-left-color:#e67e22; } .qcard.qc-fu  .qc-count { color:#e67e22; }
  .qcard.qc-re  { border-left-color:#8e44ad; } .qcard.qc-re  .qc-count { color:#8e44ad; }
  .qcard.qc-ok  { border-left-color:var(--green); } .qcard.qc-ok  .qc-count { color:var(--green); }
  .qcard.qc-ne  { border-left-color:#2980b9; } .qcard.qc-ne  .qc-count { color:#2980b9; }
  .qcard.qc-np  { border-left-color:#16a085; } .qcard.qc-np  .qc-count { color:#16a085; }
  .rx-badge { display:inline-block; padding:2px 8px; border-radius:12px; font-size:11px; font-weight:700; cursor:pointer; }
  .rx-hot { background:#ffeaea; color:#c0392b; } .rx-warm { background:#fef5e4; color:#e67e22; }
  .rx-cold { background:#eaf3fb; color:#2980b9; } .rx-fu { background:#f3eafc; color:#8e44ad; }
  .rx-none { background:#f5f4f2; color:#999; }
  .eng-wrap { display:flex; gap:4px; align-items:center; flex-wrap:wrap; font-size:13px; }
  .board-filters { display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap; }
  .bf { padding:5px 13px; border-radius:20px; font-size:12px; font-weight:600; cursor:pointer; border:1px solid #ddd; background:var(--card); color:var(--muted); transition:all .15s; }
  .bf.on { background:var(--brand); color:#fff; border-color:var(--brand); }

  /* ── Responsive ── */
  /* Prevent 300ms tap delay on all buttons */
  button, a, input, select, textarea { touch-action: manipulation; }

  /* Floating Tell Me Something button */
  .qn-fab { position:fixed; bottom:28px; right:28px; z-index:9999; background:#c0622a; color:#fff; border:none; border-radius:50%; width:56px; height:56px; font-size:24px; cursor:pointer; box-shadow:0 4px 16px rgba(0,0,0,0.3); display:flex; align-items:center; justify-content:center; }

  @media (max-width: 768px) {
    /* Nav */
    nav { flex-wrap:wrap; gap:6px; padding:10px 12px; }
    nav h1 { font-size:16px; }
    .nav-right span { display:none; }
    .nav-right { gap:8px; }
    nav button { padding:6px 10px; font-size:12px; }

    /* Nav tabs - scrollable row, don't squish */
    .nav-tabs { order:3; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; display:flex; flex-wrap:nowrap; gap:4px; padding-bottom:2px; scrollbar-width:none; }
    .nav-tabs::-webkit-scrollbar { display:none; }
    .nav-tabs button { flex:0 0 auto; white-space:nowrap; font-size:13px; padding:9px 14px; border-radius:8px; }

    /* Container */
    .container { padding:12px; }

    /* Stats */
    .stats { grid-template-columns:repeat(3, 1fr); gap:8px; margin-bottom:16px; }
    .stat-card { padding:12px; }
    .stat-card .label { font-size:10px; }
    .stat-card .value { font-size:20px; }
    .stat-card .sub { font-size:10px; }

    /* Search bar */
    .search-bar { flex-wrap:wrap; gap:8px; }
    .search-bar input { width:100%; flex:none; padding:12px 14px; font-size:16px; }
    .search-bar select { flex:1; min-width:0; padding:10px 8px; font-size:14px; }
    .search-bar .btn { width:100%; padding:14px; font-size:15px; }

    /* Hide desktop table, show mobile cards */
    .table-wrap { display:none; }
    .mobile-cards { display:block; }
    .mobile-sort { display:flex; gap:8px; margin-bottom:12px; align-items:center; }
    .mobile-sort select { flex:1; padding:10px; border:1px solid #ddd; border-radius:8px; font-size:14px; }
    .mobile-sort label { font-size:12px; color:var(--muted); white-space:nowrap; }

    /* Mobile cards - larger tap targets */
    .m-card-actions button { padding:12px 8px; font-size:13px; }

    /* Pagination */
    .pagination { flex-wrap:wrap; gap:8px; padding:12px 0; }
    .pagination .btn-sm { padding:12px 18px; font-size:14px; }

    /* Modal - full width, scroll inside */
    .modal-overlay { align-items:flex-end; }
    .modal { width:100%; margin:0; border-radius:16px 16px 0 0; max-height:92vh; padding:20px 16px; }
    .modal h2 { font-size:18px; margin-bottom:14px; }
    .modal .row { grid-template-columns:1fr; gap:8px; }
    .modal .field { margin-bottom:10px; }
    .modal .field input, .modal .field select, .modal .field textarea { padding:14px; font-size:16px; }
    .modal .actions { flex-wrap:wrap; gap:10px; }
    .modal .actions button { flex:1; padding:16px; font-size:16px; min-width:120px; }

    /* Quick Note modal textarea */
    #quickNoteText { font-size:16px; min-height:100px; }

    /* Floating button - bigger on mobile */
    .qn-fab { width:64px; height:64px; font-size:28px; bottom:16px; right:16px; }

    /* Escrow preview modal */
    .escrow-preview-inner { width:100%; border-radius:16px 16px 0 0; margin-top:auto; max-height:92vh; }
    .escrow-preview-modal { align-items:flex-end; }

    /* Transaction cards */
    .tx-card { margin-bottom:16px; }
    .tx-meta { grid-template-columns:1fr 1fr; }
    .tx-tl-actions button { padding:6px 10px; font-size:12px; }

    /* Login */
    .login-box { width:calc(100vw - 32px); padding:28px; }

    /* Send log */
    .log-item { padding:12px; }

    /* Insights */
    .ins-kpi-row { grid-template-columns:repeat(2,1fr); }
  }
  .ins-kpi-row { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px; }
  .ins-kpi { background:#fff; border-radius:12px; padding:16px 18px; box-shadow:0 1px 8px rgba(0,0,0,0.07); }
  .ins-kpi .ik-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:6px; }
  .ins-kpi .ik-value { font-size:28px; font-weight:800; color:var(--dark); line-height:1; }
  .ins-kpi .ik-sub { font-size:11px; color:var(--muted); margin-top:4px; }
  .ins-card { background:#fff; border-radius:12px; padding:20px; box-shadow:0 1px 8px rgba(0,0,0,0.07); }
  .ins-card-title { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:14px; }
  .ins-funnel-row { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
  .ins-funnel-label { font-size:12px; color:var(--dark); font-weight:500; width:130px; flex-shrink:0; }
  .ins-funnel-track { flex:1; background:#f3f4f6; border-radius:6px; height:10px; overflow:hidden; }
  .ins-funnel-bar { height:100%; border-radius:6px; transition:width .4s ease; }
  .ins-funnel-num { font-size:12px; color:var(--muted); width:80px; text-align:right; flex-shrink:0; }
  .ins-eng-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .ins-eng-tile { background:var(--bg); border-radius:10px; padding:14px 16px; text-align:center; }
  .ins-eng-tile .et-val { font-size:26px; font-weight:800; }
  .ins-eng-tile .et-lbl { font-size:11px; color:var(--muted); margin-top:3px; }
  .ins-act-row { display:flex; align-items:flex-start; gap:10px; padding:8px 0; border-bottom:1px solid #f5f5f5; font-size:12px; }
  .ins-act-row:last-child { border-bottom:none; }
  .ins-act-icon { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; margin-top:1px; }
  .ins-act-body { flex:1; line-height:1.4; }
  .ins-act-name { font-weight:600; color:var(--dark); }
  .ins-act-what { color:var(--muted); }
  .ins-act-time { font-size:11px; color:var(--muted); margin-top:1px; }
</style>
      <style>@keyframes pulse-rec { 0%,100% { opacity:1; } 50% { opacity:0.3; } }</style>
    </div>

    <!-- Phase 3: Processing -->
    <div id="callPhase3" style="display:none;">
      <div style="text-align:center; padding:20px;">
        <div style="background:#c0392b; color:#fff; font-size:28px; font-weight:900; padding:24px; border-radius:16px; margin-bottom:20px; animation:hangup-flash 1s ease infinite; text-transform:uppercase; letter-spacing:2px;">DON'T FORGET<br>TO HANG UP!!!</div>
        <style>@keyframes hangup-flash { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:0.85;transform:scale(1.03);} }</style>
      <style>@keyframes spin { to { transform:rotate(360deg); } }</style>
    </div>

    <!-- Phase 4: Summary + Save (auto-saved, but editable) -->
    <div id="callPhase4" style="display:none;">
      <div style="background:#f0faf4; border:1px solid #b8e6cc; border-radius:10px; padding:14px; margin-bottom:12px; text-align:center;">
        <span style="color:var(--green); font-weight:600;">Call logged and saved</span>
      </div>
      <div style="margin-bottom:12px;">
        <div id="aiSummaryContent" contenteditable="true" style="font-size:13px; line-height:1.6; background:#fff; padding:16px; border-radius:8px; border:1px solid #ddd; outline:none; min-height:100px; cursor:text;" onfocus="this.style.borderColor='var(--brand)'" onblur="this.style.borderColor='#ddd'"></div>
      <div style="font-size:11px; color:var(--muted); margin-top:4px; text-align:right;">Click to edit summary before saving</div>
        <style>
          #aiSummaryContent h3 { font-size:14px; color:var(--brand); margin:16px 0 8px 0; text-transform:uppercase; letter-spacing:1px; }
          #aiSummaryContent h3:first-child { margin-top:0; }
          #aiSummaryContent p { margin:0 0 8px 0; }
          #aiSummaryContent ul, #aiSummaryContent ol { margin:0 0 12px 0; padding-left:20px; }
          #aiSummaryContent li { margin-bottom:6px; }
          #aiSummaryContent strong { color:var(--dark); }