:root{
  /* lookbook cinematic palette */
  --bg:#060605; --bg2:#0c0c0b; --card:#0f0f0e; --card2:#161614;
  --line:rgba(239,233,221,.14); --line2:rgba(239,233,221,.24);
  --line-soft:rgba(239,233,221,.06);
  --txt:#efe9dd; --ivory-dim:#d9d2c4; --muted:#8c867a; --faint:#5c574d;
  --accent:#b99a63; --accent2:#cbb488;
  --gold:#cbb488; --green:#93c0a3; --red:#d98d88; --amber:#d9b779; --cyan:#93b6c0;
  --radius:12px;
  --shadow:0 24px 70px rgba(0,0,0,.6);
  /* Primary font stack (whole app). Defined once here; referenced everywhere. */
  --font:'Lato',Helvetica,Calibri,sans-serif;
  /* Headings default to the same Lato stack. To restore the lookbook serif
     brand look, set this back to: 'Instrument Serif',Georgia,serif */
  --serif:var(--font);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--txt);font-family:var(--font);font-size:14px;line-height:1.55;
  -webkit-font-smoothing:antialiased;letter-spacing:.1px}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent2);text-decoration:none}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#26241f;border-radius:8px;border:2px solid var(--bg)}
::-webkit-scrollbar-track{background:transparent}

/* editorial eyebrow helper */
.eyebrow{text-transform:uppercase;letter-spacing:3px;font-size:10px;color:var(--muted);font-weight:500}

/* ---------- login ---------- */
#login{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:
    radial-gradient(1100px 620px at 22% -12%,rgba(185,154,99,.10),transparent 60%),
    radial-gradient(820px 560px at 92% 112%,rgba(203,180,136,.06),transparent 60%),
    var(--bg)}
.login-card{width:100%;max-width:410px;background:linear-gradient(180deg,var(--card2),var(--card));
  border:1px solid var(--line);border-radius:16px;padding:40px 34px;box-shadow:var(--shadow)}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.brand-mark{width:40px;height:40px;border-radius:9px;display:grid;place-items:center;font-weight:600;
  font-size:14px;letter-spacing:1px;background:linear-gradient(150deg,var(--accent2),var(--accent));
  color:#151310;font-family:var(--serif);box-shadow:0 4px 18px rgba(185,154,99,.24)}
.brand-name{font-weight:400;font-size:22px;letter-spacing:.3px;font-family:var(--serif)}
.brand-sub{color:var(--muted);font-size:12.5px;margin-bottom:26px;text-transform:uppercase;letter-spacing:2px}
.field{margin-bottom:15px}
.field label{display:block;font-size:10.5px;color:var(--muted);margin-bottom:7px;font-weight:500;
  text-transform:uppercase;letter-spacing:1.8px}
.input{width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:9px;padding:12px 14px;
  outline:none;transition:border-color .18s,box-shadow .18s;color:var(--txt)}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(185,154,99,.16)}
.input::placeholder{color:var(--faint)}
textarea.input{resize:vertical;min-height:70px}
.btn{background:linear-gradient(150deg,var(--accent2),var(--accent));border:1px solid transparent;
  border-radius:100px;padding:11px 20px;font-weight:600;cursor:pointer;color:#151310;
  text-transform:uppercase;letter-spacing:1.8px;font-size:11px;transition:filter .18s,transform .05s,opacity .18s}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.full{width:100%;padding:13px 20px}
.btn.ghost{background:transparent;border:1px solid var(--line2);color:var(--ivory-dim)}
.btn.ghost:hover{background:rgba(239,233,221,.05);filter:none;border-color:var(--accent)}
.btn.sm{padding:8px 14px;font-size:10px;letter-spacing:1.6px}
.btn.danger{background:transparent;border:1px solid rgba(217,141,136,.45);color:var(--red)}
.btn.danger:hover{background:rgba(217,141,136,.08);filter:none}
.err{background:rgba(217,141,136,.10);border:1px solid rgba(217,141,136,.32);color:#e8b3af;
  padding:10px 13px;border-radius:9px;font-size:13px;margin-bottom:15px}
.hint{color:var(--faint);font-size:11px;margin-top:16px;text-align:center;text-transform:uppercase;letter-spacing:1.6px}

/* ---------- shell ---------- */
#app{display:none;min-height:100vh}
#app.on{display:grid;grid-template-columns:236px 1fr}
.side{background:linear-gradient(180deg,var(--bg2),var(--bg));border-right:1px solid var(--line);
  padding:22px 16px;display:flex;flex-direction:column;gap:3px;position:sticky;top:0;height:100vh}
.side .brand{margin-bottom:26px;padding:0 6px}
.side .brand-name{font-size:19px}
.nav{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;color:var(--muted);
  cursor:pointer;font-weight:500;border:1px solid transparent;font-size:13.5px;transition:background .15s,color .15s}
.nav:hover{background:var(--card);color:var(--txt)}
.nav.on{background:var(--card2);color:var(--txt);border-color:var(--line);box-shadow:inset 2px 0 0 var(--accent)}
.nav .ico{width:18px;text-align:center;font-size:14px;color:var(--accent)}
.nav .badge{margin-left:auto;background:var(--accent);color:#151310;border-radius:99px;font-size:10px;
  padding:1px 7px;font-weight:700}
.navlink{text-decoration:none}
.navlink .ico{color:var(--accent2)}
.side-foot{margin-top:auto;border-top:1px solid var(--line);padding-top:16px}
.me{display:flex;align-items:center;gap:10px;padding:4px 6px}
.me-name{font-weight:600;font-size:13px}
.me-pts{color:var(--gold);font-size:11px;font-weight:600;letter-spacing:.5px}
.avi{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;font-weight:700;
  font-size:12px;color:#151310;flex-shrink:0}
.avi.sm{width:24px;height:24px;font-size:10px;border-radius:6px}
.avi.lg{width:44px;height:44px;font-size:15px;border-radius:11px}

.main{padding:34px 40px 70px;max-width:1440px;width:100%}
.head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:28px;flex-wrap:wrap}
h1{font-size:38px;font-weight:400;letter-spacing:.2px;font-family:var(--serif);line-height:1.05}
.sub{color:var(--muted);font-size:13px;margin-top:6px}
h2{font-size:14px;font-weight:600;margin-bottom:14px;letter-spacing:2px;text-transform:uppercase;color:var(--ivory-dim)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* ---------- cards / stats ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.grid{display:grid;gap:16px}
.stats{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-bottom:26px}
.stat .k{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:2px;font-weight:500}
.stat .v{font-size:34px;font-weight:400;letter-spacing:.2px;margin-top:8px;font-family:var(--serif)}
.stat .d{font-size:12px;color:var(--faint);margin-top:4px}
.gold{color:var(--gold)} .green{color:var(--green)} .red{color:var(--red)}
.amber{color:var(--amber)} .cyan{color:var(--cyan)} .muted{color:var(--muted)}

/* ---------- pipeline board ---------- */
.board{display:grid;grid-template-columns:repeat(10,minmax(146px,1fr));gap:9px;overflow-x:auto;padding-bottom:14px}
.col{background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:9px;min-height:200px;
  display:flex;flex-direction:column;gap:8px;transition:background .12s,border-color .12s}
.col.drop{background:rgba(185,154,99,.08);border-color:var(--accent)}
.col-h{display:flex;align-items:center;justify-content:space-between;padding:3px 4px 7px}
.col-t{font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:1.6px;color:var(--ivory-dim)}
.col-n{font-size:11px;color:var(--faint);font-weight:600}
.col-v{font-size:11px;color:var(--muted);padding:0 4px 4px;margin-top:-4px}
.lead{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:10px 11px;cursor:pointer;
  transition:border-color .12s,transform .06s}
.lead:hover{border-color:var(--line2);transform:translateY(-1px)}
.lead.drag{opacity:.4}
.lead-n{font-weight:600;font-size:12.5px;line-height:1.35;overflow-wrap:anywhere}
.lead-m{color:var(--muted);font-size:11.5px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.lead-f{display:flex;align-items:center;justify-content:space-between;margin-top:9px;gap:8px}
.lead-v{font-weight:600;font-size:12.5px;color:var(--green)}
.stale{color:var(--amber);font-size:10.5px;font-weight:600}

/* ---------- table ---------- */
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:2px;color:var(--muted);
  font-weight:500;padding:10px 11px;border-bottom:1px solid var(--line)}
td{padding:12px 11px;border-bottom:1px solid var(--line-soft);font-size:13px}
tbody tr:hover{background:var(--card2)}
tbody tr:last-child td{border-bottom:none}
.rank{font-weight:400;font-size:22px;width:38px;font-family:var(--serif)}
.r1{color:var(--gold)} .r2{color:#cdc7b8} .r3{color:#c39a6a}

.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:99px;font-size:10.5px;
  font-weight:600;text-transform:uppercase;letter-spacing:.8px;border:1px solid transparent}
.p-new{background:rgba(140,134,122,.14);color:#c8c2b5;border-color:rgba(140,134,122,.25)}
.p-contacted{background:rgba(147,182,192,.12);color:var(--cyan);border-color:rgba(147,182,192,.22)}
.p-appointment{background:rgba(185,154,99,.12);color:var(--accent2);border-color:rgba(185,154,99,.24)}
.p-demo{background:rgba(203,180,136,.12);color:var(--accent2);border-color:rgba(203,180,136,.22)}
.p-quoted{background:rgba(217,183,121,.12);color:var(--amber);border-color:rgba(217,183,121,.24)}
.p-followup1{background:rgba(203,180,136,.10);color:var(--gold);border-color:rgba(203,180,136,.2)}
.p-followup2{background:rgba(203,180,136,.14);color:var(--gold);border-color:rgba(203,180,136,.26)}
.p-followup3{background:rgba(203,180,136,.18);color:var(--gold);border-color:rgba(203,180,136,.32)}
.p-estimate_created{background:rgba(147,182,192,.12);color:var(--cyan);border-color:rgba(147,182,192,.22)}
.p-estimate_sent{background:rgba(217,183,121,.12);color:var(--amber);border-color:rgba(217,183,121,.24)}
.p-showroom{background:rgba(185,154,99,.16);color:var(--accent2);border-color:rgba(185,154,99,.30)}
.p-won{background:rgba(147,192,163,.14);color:var(--green);border-color:rgba(147,192,163,.28)}
.p-lost{background:rgba(217,141,136,.12);color:var(--red);border-color:rgba(217,141,136,.26)}
/* pipeline card point-shift arrows */
.lead-arrows{display:flex;gap:6px;margin-top:8px}
.lead-arrows .btn.sm{padding:3px 9px;font-size:12px;line-height:1}
.lead-pts{color:var(--gold);font-weight:700}

/* ---------- chat ---------- */
.chat-wrap{display:grid;grid-template-columns:180px 1fr;gap:16px;height:calc(100vh - 170px);min-height:420px}
.chan{background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:11px;
  display:flex;flex-direction:column;gap:3px}
.chan-i{padding:9px 11px;border-radius:8px;cursor:pointer;color:var(--muted);font-size:13px;font-weight:500}
.chan-i:hover{background:var(--card)}
.chan-i.on{background:var(--card2);color:var(--txt)}
.chat{background:var(--card);border:1px solid var(--line);border-radius:11px;display:flex;flex-direction:column;overflow:hidden}
.msgs{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:14px}
.msg{display:flex;gap:11px}
.msg-b{flex:1;min-width:0}
.msg-h{display:flex;align-items:baseline;gap:8px}
.msg-n{font-weight:600;font-size:13px}
.msg-t{color:var(--faint);font-size:11px}
.msg-x{font-size:13.5px;white-space:pre-wrap;word-wrap:break-word;margin-top:2px;color:var(--ivory-dim)}
.chat-in{border-top:1px solid var(--line);padding:13px;display:flex;gap:9px;background:var(--bg2)}
.chat-in .input{flex:1}
.day-sep{text-align:center;color:var(--faint);font-size:10px;font-weight:600;text-transform:uppercase;
  letter-spacing:2px;margin:6px 0}

/* ---------- feed ---------- */
.feed{display:flex;flex-direction:column;gap:12px;max-height:520px;overflow-y:auto}
.fi{display:flex;gap:11px;align-items:flex-start}
.fi-b{flex:1;min-width:0;font-size:13px}
.fi-t{color:var(--faint);font-size:11px;margin-top:2px}
.pts{color:var(--gold);font-weight:700;font-size:11.5px;white-space:nowrap}

/* ---------- modal ---------- */
.mask{position:fixed;inset:0;background:rgba(3,3,2,.72);backdrop-filter:blur(4px);z-index:50;
  display:grid;place-items:center;padding:22px;overflow-y:auto}
.modal{background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line2);
  border-radius:15px;width:100%;max-width:560px;box-shadow:var(--shadow);max-height:92vh;
  display:flex;flex-direction:column}
.modal.wide{max-width:760px}
.modal-h{padding:20px 22px;border-bottom:1px solid var(--line);display:flex;
  align-items:flex-start;justify-content:space-between;gap:12px}
.modal-t{font-size:22px;font-weight:400;font-family:var(--serif);letter-spacing:.2px}
.modal-b{padding:22px;overflow-y:auto}
.modal-f{padding:15px 22px;border-top:1px solid var(--line);display:flex;gap:9px;justify-content:flex-end}
.x{background:none;border:none;color:var(--muted);font-size:22px;cursor:pointer;line-height:1;padding:0 2px}
.x:hover{color:var(--txt)}
/* When .x is a footer "Cancel" button (btn ghost x), size it like a button,
   not like the big close-glyph "×" in the modal header. */
.btn.x{font-size:11px;line-height:1.2;padding:11px 20px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:13px}

.toast{position:fixed;bottom:24px;right:24px;background:var(--card2);border:1px solid var(--line2);
  border-radius:11px;padding:13px 17px;box-shadow:var(--shadow);z-index:99;font-size:13.5px;font-weight:500;
  animation:pop .25s ease}
@keyframes pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.empty{text-align:center;color:var(--faint);padding:40px 20px;font-size:13px;text-transform:uppercase;letter-spacing:1.5px}
.tabs{display:flex;gap:6px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.tab{padding:9px 14px;cursor:pointer;color:var(--muted);font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:1.6px;border-bottom:1px solid transparent;margin-bottom:-1px}
.tab:hover{color:var(--txt)}
.tab.on{color:var(--txt);border-bottom-color:var(--accent)}

@media(max-width:860px){
  #app.on{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;
    border-right:none;border-bottom:1px solid var(--line);padding:12px}
  .side .brand{margin:0 12px 0 4px}
  .side-foot{margin:0 0 0 auto;border:none;padding:0}
  .nav{padding:8px 11px;font-size:13px}
  .main{padding:22px 16px 56px}
  h1{font-size:30px}
  .chat-wrap{grid-template-columns:1fr;height:auto}
  .chan{flex-direction:row;overflow-x:auto}
  .msgs{height:52vh}
  .g2,.g3{grid-template-columns:1fr}
  .main .grid{grid-template-columns:1fr !important}
  .board{grid-template-columns:repeat(10,minmax(155px,1fr))}
}

/* ---------- quote import ---------- */
.drop{border:1px dashed var(--line2);border-radius:11px;padding:26px 18px;text-align:center;
  cursor:pointer;transition:border-color .15s,background .15s;background:var(--bg2)}
.drop:hover{border-color:var(--accent)}
.drop.over{border-color:var(--accent);background:rgba(185,154,99,.08)}
.drop .big{font-weight:600;font-size:13px;margin-bottom:4px;text-transform:uppercase;letter-spacing:1.5px}
.drop .sm{color:var(--muted);font-size:12.5px}
.srcline{font-size:11.5px;color:var(--muted);margin:0 0 3px 2px}
.tag{display:inline-block;padding:2px 8px;border-radius:99px;font-size:10px;font-weight:700;
  letter-spacing:.6px;text-transform:uppercase}
.tag-alias{background:rgba(147,192,163,.15);color:var(--green)}
.tag-exact{background:rgba(147,192,163,.15);color:var(--green)}
.tag-guess{background:rgba(217,183,121,.16);color:var(--amber)}
.tag-none{background:rgba(217,141,136,.16);color:var(--red)}

/* ===== Sales Credit Tree ===== */
.ct-node { border-left: 2px solid var(--line); margin: 4px 0 4px 6px; padding-left: 12px; }
.ct-node > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 10px; padding: 7px 10px; border-radius: 8px; }
.ct-node > summary::-webkit-details-marker { display: none; }
.ct-node > summary:hover { background: var(--bg2); }
.ct-node > summary::before { content: '▸'; color: var(--muted); font-size: 11px; transition: transform .15s; display: inline-block; }
.ct-node[open] > summary::before { transform: rotate(90deg); }
.ct-name { font-weight: 700; }
.ct-meta { color: var(--muted); font-size: 12.5px; }
.ct-root > summary { background: var(--bg2); border: 1px solid var(--line); }
.ct-root > summary .ct-name { font-size: 16px; }
.ct-branch > summary .ct-name { color: var(--accent, var(--gold)); letter-spacing: .3px; }
.ct-children { margin-left: 4px; }
.ct-leaf { display: flex; align-items: baseline; gap: 8px; padding: 4px 10px 4px 20px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.ct-leaf:hover { background: var(--bg2); }
.ct-dot { color: var(--muted); }
.ct-job { flex: 1; }
.ct-val { color: var(--green); font-weight: 650; white-space: nowrap; }

/* ---- Credit Tree: boxed org-chart (Part 6) ---- */
.ct-chart { padding: 8px 4px 24px; }
.ctb-root { display: flex; justify-content: center; }
.ctb-box { background: var(--bg2); border: 1px solid var(--line2, var(--line)); border-radius: 10px; padding: 12px 16px; text-align: center; min-width: 180px; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.ctb-top { border-color: var(--gold, #b99a63); }
.ctb-name { font-weight: 800; font-size: 15px; }
.ctb-sub { color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.ctb-tot { font-weight: 700; font-size: 14px; margin-top: 4px; }
.ctb-down { width: 2px; background: var(--line2, var(--line)); margin: 0 auto; height: 20px; }
.ctb-down-lg { height: 26px; }
.ctb-branches { display: flex; gap: 20px; justify-content: center; align-items: flex-start; flex-wrap: wrap; position: relative; padding-top: 14px; }
.ctb-branches::before { content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 2px; background: var(--line2, var(--line)); }
.ctb-col { display: flex; flex-direction: column; align-items: center; position: relative; padding-top: 0; flex: 1 1 260px; max-width: 360px; }
.ctb-col::before { content: ""; position: absolute; top: -14px; height: 14px; width: 2px; background: var(--line2, var(--line)); }
.ctb-branch { border-color: var(--accent, #4f7cff); }
.ctb-reps { display: flex; flex-direction: column; gap: 12px; width: 100%; margin-top: 4px; }
.ctb-node { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.ctb-rep { width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: var(--bg2); }
.ctb-jobs { padding: 6px 12px 10px; }
.ctb-job { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; font-size: 12.5px; cursor: pointer; border-bottom: 1px dashed var(--line); }
.ctb-job:last-child { border-bottom: 0; }
.ctb-job:hover { color: var(--gold, #b99a63); }
.ctb-jn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctb-jv { color: var(--green); font-weight: 650; white-space: nowrap; }

/* ---- Leaderboard / Team clickable rows ---- */
.lb-row { cursor: pointer; }
tr.lb-row:hover { background: rgba(79,124,255,.10) !important; }
.card.lb-row:hover { border-color: var(--accent, #4f7cff); }

/* ---- Team chat message tools (master only, Part 7) ---- */
.msg-tools { display: inline-flex; gap: 4px; margin-left: 8px; opacity: 0; transition: opacity .12s; }
.msg:hover .msg-tools { opacity: 1; }
.msg-tools button { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 12px; padding: 0 2px; }
.msg-tools button:hover { color: var(--text, #fff); }