/* ============================================================
   Ledda prototype — brand design system
   Deep teal surface · parchment content · moss accent
   Fraunces (serif) for headlines/numbers · Inter for UI
   ============================================================ */

:root {
  /* surfaces */
  --parchment: #F7F3EC;
  --bg: #F1EBE0;
  --bg-deep: #14393A;
  --bg-deep-2: #0E2C2D;
  --card: #FFFFFF;
  --card-2: #FBF8F2;

  /* ink */
  --ink: #20302F;
  --ink-soft: #5A6B69;
  --ink-faint: #8A9694;
  --ink-on-deep: #EDE9E0;
  --ink-on-deep-soft: #A8BCB9;

  /* accents */
  --accent: #2C6E66;        /* moss / positive-active */
  --accent-bright: #3E8F84;
  --moss: #4E8A5A;
  --moss-bg: #E7F0E6;
  --warm: #C2762E;          /* amber warming/cooling */
  --warm-bg: #F6ECDD;
  --copper-light: #D9A06B;
  --danger: #B0473A;
  --danger-bg: #F4E2DE;
  --info: #3A6E8F;

  /* window states */
  --win-open: #4E8A5A;
  --win-warming: #C2762E;
  --win-cooling: #9E7B4A;
  --win-closed: #8A9694;

  /* lines */
  --hairline: #E2DCCF;
  --hairline-2: #D6CFBE;
  --hairline-deep: #2A4C4C;

  --sans: "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;

  --shadow-sm: 0 1px 2px rgba(20,57,58,0.04), 0 1px 3px rgba(20,57,58,0.06);
  --shadow-md: 0 4px 16px rgba(20,57,58,0.08), 0 1px 3px rgba(20,57,58,0.05);
  --shadow-lg: 0 18px 50px rgba(14,44,45,0.18);
  --radius: 14px;
  --radius-sm: 9px;
  --nav-w: 232px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
}
button { font-family: inherit; cursor: pointer; }
/* default inline-icon size — specific class rules below override where needed */
svg { width: 16px; height: 16px; flex: none; vertical-align: middle; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(90,107,105,0.28); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(90,107,105,0.45); background-clip: content-box; }

h1,h2,h3,h4 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.012em; margin: 0; }
em { font-style: italic; }
.num { font-family: var(--serif); font-feature-settings: "tnum" 1; letter-spacing: -0.01em; }
.mono-soft { font-variant-numeric: tabular-nums; }

/* ============================================================
   App shell
   ============================================================ */
.app { display: flex; min-height: 100vh; }

/* ---- left nav ---- */
.nav {
  width: var(--nav-w);
  flex: none;
  background: var(--bg-deep);
  color: var(--ink-on-deep);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  border-right: 1px solid var(--bg-deep-2);
}
.nav-brand {
  padding: 22px 22px 18px;
  display: flex; align-items: center; gap: 11px;
}
.nav-mark {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  background: radial-gradient(120% 120% at 30% 20%, var(--accent-bright), var(--accent) 70%);
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}
.nav-mark svg { width: 17px; height: 17px; color: #fff; }
.nav-word { font-family: var(--serif); font-size: 21px; color: #fff; letter-spacing: -0.02em; line-height: 1; }
.nav-word small { display:block; font-family: var(--sans); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-on-deep-soft); margin-top: 3px; }

.nav-section { padding: 8px 14px; }
.nav-section-label { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-on-deep-soft); padding: 14px 10px 7px; opacity: 0.75; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: 9px; margin-bottom: 2px;
  color: var(--ink-on-deep-soft); font-size: 13.5px; font-weight: 500;
  background: none; border: none; width: 100%; text-align: left;
  transition: background .15s, color .15s;
}
.nav-item svg { width: 17px; height: 17px; flex: none; opacity: 0.85; }
.nav-item:hover { background: rgba(255,255,255,0.05); color: var(--ink-on-deep); }
.nav-item.active { background: rgba(78,138,132,0.22); color: #fff; box-shadow: inset 0 0 0 1px rgba(120,180,172,0.25); }
.nav-item.active svg { opacity: 1; color: var(--copper-light); }
.nav-sub { font-size: 11px; color: var(--ink-on-deep-soft); margin-left: auto; background: rgba(255,255,255,0.07); padding: 1px 7px; border-radius: 99px; }

.nav-foot { margin-top: auto; padding: 16px; border-top: 1px solid var(--hairline-deep); }
.nav-foot .demo-tag { font-size: 10.5px; letter-spacing: 0.06em; color: var(--ink-on-deep-soft); display:flex; align-items:center; gap:7px; }
.nav-foot .dot { width: 7px; height: 7px; border-radius: 99px; background: var(--moss); box-shadow: 0 0 0 3px rgba(78,138,132,0.25); animation: pulse 2.4s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.45} }

/* ---- main ---- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ---- topbar ---- */
.topbar {
  height: 60px; flex: none;
  background: rgba(247,243,236,0.85); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
  display: flex; align-items: center; gap: 16px;
  padding: 0 26px; position: sticky; top: 0; z-index: 30;
}
.topbar .crumb { display:flex; align-items:center; gap:9px; font-size: 13px; color: var(--ink-soft); }
.topbar .crumb b { color: var(--ink); font-weight: 600; }
.topbar .crumb svg { width: 14px; height: 14px; opacity: 0.5; }
.topbar-spacer { flex: 1; }

/* persona switcher */
.persona {
  display: flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--hairline-2);
  border-radius: 99px; padding: 4px 5px 4px 12px; box-shadow: var(--shadow-sm);
  position: relative;
}
.persona .pl { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.persona-btn { display:flex; align-items:center; gap:9px; border: none; background: none; padding: 4px 6px; border-radius: 99px; }
.persona-av { width: 26px; height: 26px; border-radius: 99px; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 700; flex: none; }
.persona-name { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.persona-role { font-size: 11px; color: var(--ink-soft); white-space: nowrap; }
.persona .chev { width: 15px; height: 15px; color: var(--ink-faint); }
.persona-menu {
  position: absolute; top: calc(100% + 8px); right: 0; width: 286px;
  background: var(--card); border: 1px solid var(--hairline-2); border-radius: 14px;
  box-shadow: var(--shadow-lg); padding: 7px; z-index: 60;
}
.persona-menu .pm-label { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); padding: 8px 10px 5px; }
.persona-opt { display:flex; align-items:center; gap:11px; padding: 9px 10px; border-radius: 10px; width: 100%; border: none; background: none; text-align: left; }
.persona-opt:hover { background: var(--card-2); }
.persona-opt.sel { background: var(--moss-bg); }
.persona-opt .po-sur { font-size: 10.5px; color: var(--ink-faint); margin-top: 1px; }

.icon-btn { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--hairline-2); background: var(--card); display: grid; place-items: center; color: var(--ink-soft); box-shadow: var(--shadow-sm); }
.icon-btn:hover { color: var(--ink); border-color: var(--hairline); }
.icon-btn svg { width: 17px; height: 17px; }

/* ---- content scroll area ---- */
.content { flex: 1; overflow-y: auto; }
.page { padding: 26px 30px 64px; max-width: 1320px; margin: 0 auto; }
.page-wide { max-width: 1600px; }

/* ============================================================
   Generic primitives
   ============================================================ */
.eyebrow { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); font-weight: 600; display:flex; align-items:center; gap:8px; }
.page-title { font-size: 30px; line-height: 1.1; margin: 9px 0 6px; }
.page-sub { color: var(--ink-soft); font-size: 14.5px; max-width: 70ch; }
.page-head { margin-bottom: 24px; display:flex; align-items:flex-end; justify-content:space-between; gap: 20px; flex-wrap: wrap; }

.card {
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.card-pad { padding: 18px 20px; }

.btn { display:inline-flex; align-items:center; gap:8px; border-radius: 10px; padding: 9px 15px; font-size: 13px; font-weight: 600; border: 1px solid transparent; transition: all .15s; white-space: nowrap; }
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(20,57,58,.18); }
.btn-primary:hover { background: var(--accent-bright); }
.btn-ghost { background: var(--card); color: var(--ink); border-color: var(--hairline-2); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { border-color: var(--ink-faint); }
.btn-deep { background: var(--bg-deep); color: #fff; }
.btn-deep:hover { background: var(--bg-deep-2); }
.btn-sm { padding: 6px 11px; font-size: 12px; border-radius: 8px; }
.btn-warm { background: var(--warm); color: #fff; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.chip { display:inline-flex; align-items:center; gap:6px; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--hairline-2); color: var(--ink-soft); background: var(--card-2); }
.chip .cdot { width: 7px; height: 7px; border-radius: 99px; }

/* simulated tag */
.sim {
  font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-faint); border: 1px dashed var(--hairline-2);
  padding: 1px 6px; border-radius: 5px; font-weight: 600;
  display:inline-flex; align-items:center; gap: 4px;
}
.sim svg { width: 10px; height: 10px; }

/* ---- buying window pill ---- */
.win {
  display:inline-flex; align-items:center; gap:6px;
  font-size: 11.5px; font-weight: 600; padding: 3px 10px 3px 8px; border-radius: 99px;
  border: 1px solid transparent;
}
.win .wdot { width: 8px; height: 8px; border-radius: 99px; position: relative; }
.win.open { color: #2c6340; background: var(--moss-bg); border-color: #cfe2cd; }
.win.open .wdot { background: var(--win-open); box-shadow: 0 0 0 0 rgba(78,138,132,.5); animation: ring 1.8s infinite; }
.win.warming { color: #8a5418; background: var(--warm-bg); border-color: #ecdcc3; }
.win.warming .wdot { background: var(--win-warming); }
.win.cooling { color: #7a5e36; background: #f1ebe0; border-color: #e0d6c2; }
.win.cooling .wdot { background: var(--win-cooling); }
.win.closed { color: var(--ink-faint); background: #f0ede6; border-color: var(--hairline); }
.win.closed .wdot { background: var(--win-closed); }
@keyframes ring { 0%{box-shadow:0 0 0 0 rgba(78,138,132,.5)} 70%{box-shadow:0 0 0 6px rgba(78,138,132,0)} 100%{box-shadow:0 0 0 0 rgba(78,138,132,0)} }

/* ---- score chip with "why" ---- */
.score { display:inline-flex; align-items:center; gap: 8px; position: relative; }
.score-ring { --v: 0; --col: var(--accent); width: 38px; height: 38px; border-radius: 99px; flex: none;
  background: conic-gradient(var(--col) calc(var(--v)*1%), rgba(90,107,105,.14) 0);
  display: grid; place-items: center; transition: background .6s cubic-bezier(.4,0,.2,1); }
.score-ring i { width: 30px; height: 30px; border-radius: 99px; background: var(--card); display:grid; place-items:center; font-style: normal; }
.score-ring b { font-family: var(--serif); font-size: 14px; color: var(--ink); }
.score-mini { font-family: var(--serif); font-size: 16px; cursor: pointer; border-bottom: 1px dotted var(--ink-faint); }
.score.clickable { cursor: pointer; }

/* why popover */
.why {
  position: absolute; z-index: 80; top: calc(100% + 8px); left: 0;
  width: 320px; background: var(--card); border: 1px solid var(--hairline-2);
  border-radius: 13px; box-shadow: var(--shadow-lg); padding: 14px 15px;
  animation: pop .14s ease;
}
@keyframes pop { from { opacity: 0; transform: translateY(-4px); } }
.why h5 { font-family: var(--sans); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 3px; font-weight: 700; }
.why .why-head { display:flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.why .why-total { font-family: var(--serif); font-size: 24px; }
.why-sig { display:flex; gap: 10px; padding: 7px 0; border-top: 1px solid var(--hairline); }
.why-sig:first-of-type { border-top: none; }
.why-sig .ws-ic { width: 26px; height: 26px; border-radius: 7px; flex:none; display:grid; place-items:center; }
.why-sig .ws-ic svg { width: 14px; height: 14px; }
.why-sig .ws-body { flex: 1; min-width: 0; }
.why-sig .ws-sum { font-size: 12.5px; color: var(--ink); font-weight: 500; line-height: 1.3; }
.why-sig .ws-meta { font-size: 10.5px; color: var(--ink-faint); margin-top: 2px; display:flex; gap:8px; align-items:center; }
.why-sig .ws-w { font-family: var(--serif); font-size: 14px; flex:none; }
.why-sig .ws-w.decayed { color: var(--ink-faint); text-decoration: line-through; opacity: .7; font-size: 11px; }
.why-decay-note { font-size: 10.5px; color: var(--ink-faint); margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--hairline); display:flex; gap: 6px; align-items:center; }
.why-decay-note svg { width: 12px; height: 12px; flex:none; }

/* signal type colors */
.st-hiring { background: #e7f0e6; color: #3f7a4a; }
.st-review { background: #f6ecdd; color: #a5631f; }
.st-news { background: #e6eef3; color: #366b8d; }
.st-social { background: #efe7f2; color: #76498a; }
.st-crm { background: #eef0ef; color: #4a5b59; }
.st-inbound { background: #fdeede; color: #c2762e; }
.st-call { background: #e9eef4; color: #3a5d8f; }

/* ---- tables ---- */
.tbl-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--hairline); background: var(--card); box-shadow: var(--shadow-sm); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tbl th { text-align: left; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); font-weight: 700; padding: 11px 14px; border-bottom: 1px solid var(--hairline); background: var(--card-2); position: sticky; top: 0; white-space: nowrap; }
table.tbl td { padding: 11px 14px; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
table.tbl tr:last-child td { border-bottom: none; }
table.tbl tbody tr { transition: background .12s; }
table.tbl tbody tr:hover { background: var(--card-2); }
table.tbl tbody tr.clickable { cursor: pointer; }
.t-co { display:flex; align-items:center; gap: 11px; }
.t-logo { width: 32px; height: 32px; border-radius: 8px; flex:none; display:grid; place-items:center; font-family: var(--serif); font-size: 14px; color:#fff; font-weight:500; }
.t-co b { font-weight: 600; color: var(--ink); display:block; }
.t-co small { color: var(--ink-faint); font-size: 11.5px; }

/* provenance cell */
.cell-prov { position: relative; }
.cell-prov .prov {
  position: absolute; bottom: calc(100% + 4px); left: 0; z-index: 70;
  background: var(--bg-deep); color: var(--ink-on-deep); font-size: 11px;
  padding: 6px 10px; border-radius: 8px; white-space: nowrap; box-shadow: var(--shadow-md);
  display: none; align-items: center; gap: 6px;
}
.cell-prov .prov svg { width: 12px; height: 12px; color: var(--copper-light); }
.cell-prov:hover .prov { display: flex; }
.cell-ai { color: var(--accent); }
.cell-loading { display:inline-flex; align-items:center; gap:7px; color: var(--ink-faint); font-style: italic; }

/* ---- KPI tiles ---- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 14px; }
.kpi { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
.kpi .k-label { font-size: 11.5px; color: var(--ink-soft); font-weight: 500; display:flex; align-items:center; gap:6px; }
.kpi .k-label svg { width: 14px; height: 14px; color: var(--ink-faint); }
.kpi .k-val { font-family: var(--serif); font-size: 32px; line-height: 1; margin: 11px 0 5px; }
.kpi .k-val small { font-size: 16px; color: var(--ink-soft); }
.kpi .k-delta { font-size: 11.5px; font-weight: 600; display:inline-flex; align-items:center; gap:4px; }
.kpi .k-delta.up { color: var(--moss); }
.kpi .k-delta.down { color: var(--danger); }
.kpi.feature { background: linear-gradient(150deg, var(--bg-deep), var(--bg-deep-2)); color: #fff; border-color: var(--bg-deep-2); }
.kpi.feature .k-label { color: var(--ink-on-deep-soft); }
.kpi.feature .k-label svg { color: var(--copper-light); }
.kpi.feature .k-val { color: #fff; }

/* section heading */
.sec-head { display:flex; align-items:center; justify-content:space-between; margin: 30px 0 14px; gap: 16px; }
.sec-head h3 { font-size: 19px; }
.sec-head .sh-sub { font-size: 12.5px; color: var(--ink-soft); }

/* ============================================================
   Cockpit — SDR queue
   ============================================================ */
.cockpit-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 22px; align-items: start; }
@media (max-width: 1100px){ .cockpit-grid { grid-template-columns: 1fr; } }

.queue-head { display:flex; align-items:center; justify-content:space-between; margin-bottom: 14px; }
.queue-count { font-family: var(--serif); font-size: 17px; }
.queue-count b { color: var(--accent); }

.call-card { background: var(--card); border: 1px solid var(--hairline-2); border-radius: 16px; box-shadow: var(--shadow-md); overflow: hidden; }
.call-card .cc-top { padding: 18px 20px 14px; display:flex; gap: 14px; align-items: flex-start; }
.cc-rank { font-family: var(--serif); font-size: 13px; color: var(--ink-faint); background: var(--card-2); border:1px solid var(--hairline); width: 26px; height: 26px; border-radius: 8px; display:grid; place-items:center; flex:none; }
.cc-person { flex: 1; min-width: 0; }
.cc-person h3 { font-size: 20px; }
.cc-person .cc-title { font-size: 13px; color: var(--ink-soft); }
.cc-person .cc-co { font-size: 12.5px; color: var(--ink-faint); margin-top: 2px; display:flex; align-items:center; gap: 7px; flex-wrap:wrap; }
.cc-reason { margin: 4px 20px 16px; background: var(--card-2); border: 1px solid var(--hairline); border-left: 3px solid var(--accent); border-radius: 10px; padding: 12px 14px; }
.cc-reason .cr-label { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 5px; display:flex; align-items:center; gap:6px; }
.cc-reason p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.cc-talk { margin: 0 20px 16px; font-size: 13px; color: var(--ink-soft); font-style: italic; padding-left: 12px; border-left: 2px solid var(--hairline-2); }
.cc-actions { display:flex; gap: 9px; padding: 0 20px 16px; }
.cc-actions .btn { flex: 1; justify-content: center; }
.cc-wa { background: #25925a; color:#fff; }
.cc-wa:hover { background: #1f7d4d; }
.cc-call { background: var(--accent); color:#fff; }
.cc-email { background: var(--card); border: 1px solid var(--hairline-2); color: var(--ink); }
.cc-outcomes { border-top: 1px solid var(--hairline); padding: 14px 20px 16px; background: var(--card-2); }
.cc-outcomes .co-label { font-size: 11px; color: var(--ink-soft); margin-bottom: 9px; font-weight: 600; }
.outcome-btns { display:flex; gap: 7px; flex-wrap: wrap; }
.ob { font-size: 12px; font-weight: 600; padding: 7px 12px; border-radius: 9px; border: 1px solid var(--hairline-2); background: var(--card); color: var(--ink); display:inline-flex; align-items:center; gap:6px; transition: all .12s; }
.ob:hover { border-color: var(--ink-faint); transform: translateY(-1px); }
.ob.win { border-color:#cfe2cd; } .ob.win:hover{ background: var(--moss-bg); }
.ob.meeting { border-color:#cfe2cd; color:#2c6340; } .ob.meeting:hover{ background: var(--moss-bg); }
.ob.lost:hover { background: var(--danger-bg); color: var(--danger); }
.ob.nocontact:hover { background: #f0ede6; }
.ob.nurturing:hover { background: var(--warm-bg); color: #8a5418; }

/* outcome confirmation flyback */
.flyback { position: fixed; z-index: 200; pointer-events: none; font-size: 12.5px; font-weight: 600; color: #fff; background: var(--accent); padding: 8px 14px; border-radius: 99px; box-shadow: var(--shadow-lg); display:flex; align-items:center; gap: 8px; }
.flyback svg { width:15px;height:15px; }

/* mini-CRM list */
.mini-crm .mc-row { display:flex; align-items:center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--hairline); }
.mini-crm .mc-row:last-child { border-bottom: none; }
.mc-status { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.s-meeting { background: var(--moss-bg); color: #2c6340; }
.s-won { background: #d9ecd9; color: #1f6b34; }
.s-lost { background: var(--danger-bg); color: var(--danger); }
.s-nocontact { background: #f0ede6; color: var(--ink-faint); }
.s-nurturing { background: var(--warm-bg); color: #8a5418; }
.s-working { background: #e6eef3; color: var(--info); }

/* ============================================================
   Funnel + bars (manager)
   ============================================================ */
.funnel { display:flex; flex-direction: column; gap: 8px; }
.fn-row { display:flex; align-items:center; gap: 14px; }
.fn-label { width: 150px; flex:none; font-size: 12.5px; color: var(--ink-soft); text-align: right; }
.fn-bar-wrap { flex: 1; height: 38px; background: var(--card-2); border-radius: 8px; overflow:hidden; position:relative; border:1px solid var(--hairline); }
.fn-bar { height: 100%; border-radius: 8px; display:flex; align-items:center; padding: 0 12px; color:#fff; font-family: var(--serif); font-size: 15px; transition: width 1s cubic-bezier(.4,0,.2,1); min-width: 44px; }
.fn-pct { width: 56px; flex:none; font-size: 12px; color: var(--ink-soft); font-weight: 600; }

.bars { display:flex; flex-direction:column; gap: 11px; }
.bar-row { display:grid; grid-template-columns: 130px 1fr 44px; align-items:center; gap: 12px; font-size: 12.5px; }
.bar-track { height: 9px; background: var(--card-2); border-radius: 99px; overflow:hidden; border: 1px solid var(--hairline); }
.bar-fill { height: 100%; border-radius: 99px; transition: width .8s; }

/* trendline */
.spark { width: 100%; height: 120px; }

/* ============================================================
   LDR workspace
   ============================================================ */
.toolbar { display:flex; align-items:center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.search { display:flex; align-items:center; gap: 8px; background: var(--card); border: 1px solid var(--hairline-2); border-radius: 10px; padding: 8px 12px; box-shadow: var(--shadow-sm); flex: 1; min-width: 200px; max-width: 340px; }
.search svg { width: 16px; height: 16px; color: var(--ink-faint); }
.search input { border: none; outline: none; background: none; font-family: inherit; font-size: 13px; width: 100%; color: var(--ink); }
.seg { display:flex; background: var(--card); border: 1px solid var(--hairline-2); border-radius: 10px; padding: 3px; box-shadow: var(--shadow-sm); gap: 2px; }
.seg button { border: none; background: none; padding: 6px 12px; border-radius: 7px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.seg button.on { background: var(--bg-deep); color: #fff; }
.filter-pill { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; padding: 7px 12px; border-radius: 99px; border: 1px solid var(--hairline-2); background: var(--card); color: var(--ink-soft); box-shadow: var(--shadow-sm); }
.filter-pill.on { background: var(--moss-bg); border-color:#cfe2cd; color:#2c6340; }
.filter-pill svg { width:14px;height:14px; }

.bulkbar { display:flex; align-items:center; gap: 12px; background: var(--bg-deep); color:#fff; border-radius: 12px; padding: 10px 16px; margin-bottom: 14px; box-shadow: var(--shadow-md); animation: pop .16s ease; }
.bulkbar .bb-count { font-size: 13px; font-weight: 600; }
.bulkbar .bb-count b { color: var(--copper-light); font-family: var(--serif); }
.bulkbar .btn { padding: 6px 12px; }

/* generate / enrich flow */
.flow-steps { display:flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.flow-step { flex: 1; min-width: 160px; background: var(--card); border: 1px solid var(--hairline); border-radius: 12px; padding: 14px; opacity: .55; transition: all .3s; position: relative; }
.flow-step.active { opacity: 1; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(44,110,102,.1); }
.flow-step.done { opacity: 1; }
.flow-step .fs-n { width: 24px; height: 24px; border-radius: 99px; background: var(--card-2); border:1px solid var(--hairline); display:grid; place-items:center; font-family: var(--serif); font-size: 12px; margin-bottom: 8px; }
.flow-step.done .fs-n { background: var(--accent); color:#fff; border-color: var(--accent); }
.flow-step.active .fs-n { background: var(--bg-deep); color:#fff; border-color: var(--bg-deep); }
.flow-step h4 { font-size: 14px; margin-bottom: 3px; }
.flow-step p { font-size: 12px; color: var(--ink-soft); margin: 0; }

.research-log { background: var(--bg-deep); border-radius: 12px; padding: 16px 18px; font-size: 12.5px; color: var(--ink-on-deep-soft); max-height: 240px; overflow-y: auto; }
.research-log .rl-line { display:flex; gap: 9px; padding: 4px 0; align-items: baseline; animation: slidein .3s ease; }
@keyframes slidein { from { opacity:0; transform: translateX(-6px);} }
.research-log .rl-t { color: var(--copper-light); font-variant-numeric: tabular-nums; flex:none; font-size: 11px; }
.research-log .rl-ok { color: var(--moss); }
.research-log .rl-line b { color: #fff; font-weight: 600; }

.beforeafter { display:grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; }
.ba-card { text-align:center; padding: 20px; }
.ba-card .ba-n { font-family: var(--serif); font-size: 40px; }
.ba-card .ba-l { font-size: 12px; color: var(--ink-soft); }
.ba-arrow { color: var(--accent); }

/* ============================================================
   Studio
   ============================================================ */
.studio-tabs { display:flex; gap: 4px; background: var(--card); border:1px solid var(--hairline-2); border-radius: 11px; padding: 4px; box-shadow: var(--shadow-sm); }
.studio-tabs button { border:none; background:none; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--ink-soft); display:flex; align-items:center; gap:7px; }
.studio-tabs button svg { width: 16px; height: 16px; }
.studio-tabs button.on { background: var(--bg-deep); color: #fff; }

/* canvas */
.canvas-wrap { display:flex; gap: 0; border:1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; background: var(--card); box-shadow: var(--shadow-sm); min-height: 540px; }
.canvas {
  flex: 1; position: relative; overflow: auto;
  background:
    radial-gradient(circle at 1px 1px, rgba(90,107,105,.16) 1px, transparent 0);
  background-size: 22px 22px;
  background-color: #faf7f1;
  padding: 40px;
}
.canvas-flow { display:flex; align-items:center; gap: 0; min-width: max-content; padding: 30px 0; }
.cnode {
  width: 178px; background: var(--card); border: 1px solid var(--hairline-2); border-radius: 12px;
  box-shadow: var(--shadow-md); position: relative; z-index: 2; transition: all .15s;
}
.cnode:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.cnode.sel { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(44,110,102,.15), var(--shadow-md); }
.cnode .cn-head { display:flex; align-items:center; gap: 9px; padding: 11px 13px; border-bottom: 1px solid var(--hairline); }
.cn-cat { width: 28px; height: 28px; border-radius: 8px; display:grid; place-items:center; flex:none; }
.cn-cat svg { width: 15px; height: 15px; }
.cat-source { background:#e6eef3; color:#366b8d; }
.cat-enrich { background:#efe7f2; color:#76498a; }
.cat-signal { background:#f6ecdd; color:#a5631f; }
.cat-score { background:#e7f0e6; color:#3f7a4a; }
.cat-action { background:#fdeede; color:#c2762e; }
.cnode .cn-name { font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.cnode .cn-cat-l { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.cnode .cn-body { padding: 10px 13px; font-size: 11.5px; color: var(--ink-soft); }
.cn-status { position:absolute; top: -7px; right: -7px; width: 18px; height: 18px; border-radius: 99px; display:grid; place-items:center; border: 2px solid var(--card); }
.cn-status svg { width: 10px; height: 10px; color:#fff; }
.st-idle { background: var(--ink-faint); } .st-running { background: var(--warm); animation: spin 1s linear infinite; } .st-ok { background: var(--moss); } .st-error { background: var(--danger); }
@keyframes spin { to { transform: rotate(360deg); } }
.cwire { width: 46px; height: 2px; flex:none; position: relative; background: var(--hairline-2); z-index:1; }
.cwire.flow { background: linear-gradient(90deg, var(--accent), var(--accent)); }
.cwire.flow::after { content:''; position:absolute; top:-3px; width:8px; height:8px; border-radius:99px; background: var(--copper-light); animation: travel 1.1s linear infinite; box-shadow: 0 0 8px var(--copper-light); }
@keyframes travel { from { left: -8px; } to { left: 46px; } }
.cwire::before { content:''; position:absolute; right:-1px; top:-3px; border-left: 6px solid var(--hairline-2); border-top:4px solid transparent; border-bottom:4px solid transparent; }
.canvas-add { width: 60px; display:grid; place-items:center; }
.canvas-add button { width: 38px; height: 38px; border-radius: 99px; border: 1.5px dashed var(--hairline-2); background: var(--card); color: var(--ink-faint); display:grid; place-items:center; }
.canvas-add button:hover { border-color: var(--accent); color: var(--accent); }

/* config panel */
.config-panel { width: 320px; flex:none; border-left: 1px solid var(--hairline); background: var(--card-2); padding: 18px; overflow-y: auto; }
.config-panel h4 { font-size: 16px; margin-bottom: 3px; }
.config-panel .cp-cat { font-size: 11px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 16px; }
.field { margin-bottom: 14px; }
.field label { font-size: 11.5px; font-weight: 600; color: var(--ink-soft); display:block; margin-bottom: 5px; }
.field input[type=text], .field input[type=number], .field select, .field textarea {
  width: 100%; border: 1px solid var(--hairline-2); border-radius: 8px; padding: 8px 10px;
  font-family: inherit; font-size: 12.5px; background: var(--card); color: var(--ink); outline: none;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(44,110,102,.1); }
.preview-box { background: var(--card); border:1px solid var(--hairline); border-radius: 10px; padding: 11px; font-size: 11.5px; }
.preview-box .pb-label { font-size: 10px; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-faint); margin-bottom: 7px; font-weight:700; display:flex; align-items:center; gap:5px; }
.preview-box .pb-row { display:flex; justify-content:space-between; padding: 4px 0; border-top:1px solid var(--hairline); }
.preview-box .pb-row:first-of-type { border-top:none; }
.preview-box .pb-row span:last-child { font-weight:600; color: var(--ink); }

/* rule builder */
.rule { display:flex; align-items:center; gap: 7px; flex-wrap: wrap; background: var(--card); border:1px solid var(--hairline); border-radius: 10px; padding: 13px; font-size: 13px; }
.rule .kw { font-family: var(--serif); font-style: italic; color: var(--accent); }
.rule select, .rule input { border:1px solid var(--hairline-2); border-radius: 7px; padding: 5px 8px; font-family: inherit; font-size: 12.5px; background: var(--card-2); }
.rule .emit { background: var(--moss-bg); border:1px solid #cfe2cd; color:#2c6340; border-radius: 7px; padding: 4px 9px; font-weight:600; font-size:12px; }

/* scoring config */
.scoring-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
@media(max-width: 1000px){ .scoring-grid { grid-template-columns: 1fr; } }
.weight-row { display:grid; grid-template-columns: 150px 1fr 38px; align-items:center; gap: 12px; margin-bottom: 13px; }
.weight-row .wr-label { font-size: 12.5px; display:flex; align-items:center; gap: 8px; }
.weight-row .wr-val { font-family: var(--serif); font-size: 15px; text-align:right; }
input[type=range] { -webkit-appearance: none; appearance: none; height: 6px; background: var(--hairline-2); border-radius: 99px; outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 99px; background: var(--accent); cursor: pointer; box-shadow: 0 1px 3px rgba(20,57,58,.3); border: 2px solid #fff; }
input[type=range]::-webkit-slider-thumb:hover { background: var(--accent-bright); }

.reorder-list { list-style:none; padding:0; margin:0; }
.reorder-list li { display:flex; align-items:center; gap: 11px; padding: 9px 12px; background: var(--card); border:1px solid var(--hairline); border-radius: 9px; margin-bottom: 7px; transition: all .45s cubic-bezier(.4,0,.2,1); }
.reorder-list li .rl-rank { font-family: var(--serif); color: var(--ink-faint); width: 18px; }
.reorder-list li .rl-name { flex: 1; font-size: 13px; font-weight: 500; }
.reorder-list li.bumped { border-color:#cfe2cd; background: var(--moss-bg); }

/* template gallery */
.tpl-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap: 14px; }
.tpl-card { background: var(--card); border:1px solid var(--hairline); border-radius: 13px; padding: 16px; box-shadow: var(--shadow-sm); transition: all .15s; text-align:left; }
.tpl-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--hairline-2); }
.tpl-ic { width: 38px; height: 38px; border-radius: 10px; display:grid; place-items:center; margin-bottom: 12px; }
.tpl-ic svg { width: 19px; height: 19px; }
.tpl-card h4 { font-size: 15px; margin-bottom: 5px; }
.tpl-card p { font-size: 12px; color: var(--ink-soft); margin: 0 0 11px; line-height: 1.45; }
.tpl-meta { font-size: 11px; color: var(--ink-faint); display:flex; gap: 10px; }

/* ============================================================
   Drawer (lead detail)
   ============================================================ */
.scrim { position: fixed; inset: 0; background: rgba(14,44,45,0.4); backdrop-filter: blur(2px); z-index: 100; animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.drawer {
  position: fixed; top: 0; right: 0; height: 100vh; width: 480px; max-width: 94vw;
  background: var(--bg); z-index: 110; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; animation: slidedr .25s cubic-bezier(.4,0,.2,1);
}
@keyframes slidedr { from { transform: translateX(100%); } }
.drawer-head { padding: 20px 22px; border-bottom: 1px solid var(--hairline); background: var(--card); display:flex; gap: 14px; align-items: flex-start; }
.drawer-body { flex:1; overflow-y: auto; padding: 20px 22px; }
.drawer-x { margin-left:auto; }

/* signal timeline */
.timeline { position: relative; padding-left: 26px; }
.timeline::before { content:''; position:absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--hairline); }
.tl-item { position: relative; padding: 0 0 18px; }
.tl-dot { position:absolute; left: -26px; top: 1px; width: 20px; height: 20px; border-radius: 99px; display:grid; place-items:center; border: 3px solid var(--bg); }
.tl-dot svg { width: 11px; height: 11px; }
.tl-item h5 { font-family: var(--sans); font-size: 13px; font-weight: 600; margin: 0 0 2px; }
.tl-item .tl-meta { font-size: 11px; color: var(--ink-faint); display:flex; gap: 9px; align-items:center; margin-bottom: 5px; }
.tl-snippet { font-size: 12px; color: var(--ink-soft); background: var(--card); border:1px solid var(--hairline); border-left: 2px solid var(--hairline-2); border-radius: 7px; padding: 8px 10px; font-style: italic; }
.tl-weight { margin-left:auto; font-family: var(--serif); font-size: 13px; }

.dr-section { margin-bottom: 22px; }
.dr-section > h4 { font-size: 11px; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-faint); margin-bottom: 11px; font-weight:700; font-family: var(--sans); }
.dr-field { display:flex; justify-content:space-between; padding: 7px 0; border-bottom: 1px solid var(--hairline); font-size: 13px; }
.dr-field .dl { color: var(--ink-soft); }
.dr-field .dv { font-weight: 500; text-align:right; }
.talk-track { background: linear-gradient(150deg, var(--bg-deep), var(--bg-deep-2)); color: var(--ink-on-deep); border-radius: 12px; padding: 15px 17px; }
.talk-track .tt-label { font-size: 10px; letter-spacing:.12em; text-transform:uppercase; color: var(--copper-light); font-weight:700; margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.talk-track p { margin:0; font-size: 13.5px; line-height: 1.55; font-family: var(--serif); font-style: italic; }

/* feedback loop toast */
.loop-toast {
  position: fixed; bottom: 22px; right: 22px; z-index: 220; width: 340px;
  background: var(--card); border: 1px solid var(--hairline-2); border-radius: 14px;
  box-shadow: var(--shadow-lg); padding: 15px 16px; animation: toastin .3s cubic-bezier(.4,0,.2,1);
  border-left: 4px solid var(--accent);
}
@keyframes toastin { from { transform: translateY(20px); opacity: 0; } }
.loop-toast .lt-head { display:flex; align-items:center; gap: 9px; font-size: 13px; font-weight: 700; color: var(--accent); margin-bottom: 6px; }
.loop-toast .lt-head svg { width: 17px; height: 17px; }
.loop-toast p { margin: 0; font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; }
.loop-toast .lt-flow { display:flex; align-items:center; gap:7px; margin-top: 10px; font-size: 11px; color: var(--ink-faint); }
.loop-toast .lt-flow b { color: var(--ink); }

/* time scrubber */
.scrubber { background: var(--card); border:1px solid var(--hairline); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-sm); }
.scrubber-head { display:flex; justify-content:space-between; align-items:center; margin-bottom: 16px; }
.scrubber .sc-day { font-family: var(--serif); font-size: 22px; }
.scrub-track { margin: 18px 0 8px; }
.scrub-marks { display:flex; justify-content:space-between; font-size: 10.5px; color: var(--ink-faint); margin-top: 6px; }

/* activity feed */
.feed-item { display:flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--hairline); }
.feed-item:last-child { border:none; }
.feed-ic { width: 30px; height: 30px; border-radius: 8px; flex:none; display:grid; place-items:center; }
.feed-ic svg { width: 15px; height: 15px; }
.feed-body { flex:1; min-width:0; }
.feed-body p { margin: 0; font-size: 13px; line-height: 1.4; }
.feed-body .fb-time { font-size: 11px; color: var(--ink-faint); margin-top: 2px; }
.feed-body b { font-weight: 600; }

.empty { text-align:center; padding: 50px 20px; color: var(--ink-faint); }
.empty svg { width: 38px; height: 38px; opacity: .4; margin-bottom: 10px; }

.lever-note { background: var(--warm-bg); border: 1px solid #ecdcc3; border-radius: 10px; padding: 11px 14px; font-size: 12px; color: #8a5418; display:flex; gap: 9px; align-items: flex-start; }
.lever-note svg { width: 15px; height: 15px; flex:none; margin-top:1px; }
.lever-note b { display:block; margin-bottom:1px; }

.split-2 { display:grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items:start; }
@media(max-width:980px){ .split-2 { grid-template-columns:1fr; } }
.split-32 { display:grid; grid-template-columns: 1.5fr 1fr; gap: 22px; align-items:start; }
@media(max-width:1100px){ .split-32 { grid-template-columns:1fr; } }

.hint-bar { font-size:11.5px; color: var(--ink-faint); display:flex; align-items:center; gap:7px; margin-top:8px; }
.hint-bar svg { width:13px; height:13px; }

@media (max-width: 820px) {
  .nav { display: none; }
  .page { padding: 18px 16px 48px; }
}