:root { color-scheme: light; --ink:#17212b; --muted:#68727d; --line:#dfe4e8; --paper:#fff; --bg:#f3f5f6; --blue:#1463ff; --navy:#092a48; --green:#087f5b; --amber:#9a6700; --red:#b42318; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.5 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
main { width:min(1480px,calc(100% - 40px)); margin:24px auto 48px; }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:4px; font-size:clamp(25px,3vw,38px); letter-spacing:-.03em; }
h2 { font-size:20px; }
.eyebrow { margin-bottom:7px; color:var(--blue); font-size:12px; font-weight:800; letter-spacing:.16em; }
.muted { color:var(--muted); }
.login-card { width:min(440px,100%); margin:14vh auto 0; padding:36px; border:1px solid var(--line); border-radius:18px; background:var(--paper); box-shadow:0 18px 60px rgba(9,42,72,.08); }
label { display:block; margin:20px 0 7px; font-weight:700; }
input,textarea,select { width:100%; border:1px solid #b9c2ca; border-radius:9px; padding:12px; font:inherit; background:#fff; }
.inline { width:auto; margin-right:8px; }
.permission-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:12px; }
.permission-option { display:flex; align-items:flex-start; gap:9px; min-height:48px; margin:0; padding:10px; border:1px solid var(--line); border-radius:9px; background:#fff; font-weight:650; }
.permission-option input { flex:0 0 auto; width:auto; margin:4px 0 0; }
.permission-option span { display:block; }
.permission-code { color:var(--muted); font-size:10px; font-weight:600; }
fieldset { margin-top:18px; border:1px solid var(--line); border-radius:9px; }
input:focus,textarea:focus,select:focus { outline:3px solid rgba(20,99,255,.18); border-color:var(--blue); }
textarea { min-height:110px; resize:vertical; }
button,.button { border:0; border-radius:9px; padding:10px 15px; background:var(--blue); color:#fff; font:inherit; font-weight:750; cursor:pointer; text-decoration:none; display:inline-block; }
button:hover,.button:hover { filter:brightness(.94); }
button:disabled { opacity:.55; cursor:not-allowed; }
button:focus-visible,.button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:3px solid rgba(20,99,255,.28); outline-offset:2px; }
form > button[type="submit"] { width:100%; margin-top:18px; }
.secondary { background:#e9edf0; color:var(--ink); }
header { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:18px; padding:4px 2px; }
.identity { display:flex; align-items:center; gap:10px; }
.pill { display:inline-block; padding:3px 9px; border-radius:999px; background:#e7efff; color:#174ea6; font-size:12px; font-weight:800; text-transform:capitalize; }
.notice { margin-bottom:18px; padding:11px 14px; border-left:4px solid var(--amber); border-radius:8px; background:#fff8e6; color:#604300; }
.safety-status { display:flex; align-items:center; gap:10px; padding:9px 13px; border:1px solid #ead9a5; border-left-width:1px; border-radius:11px; }
.safety-status-dot { flex:0 0 auto; width:9px; height:9px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 4px rgba(154,103,0,.12); }
.safety-status strong,.safety-status span { display:block; }
.safety-status strong { font-size:13px; }
.safety-status div > span { color:#7a641f; font-size:12px; }
.safety-status.ready { border-color:#b7dfcf; background:#edf9f3; color:#075e45; }
.safety-status.ready .safety-status-dot { background:var(--green); box-shadow:0 0 0 4px rgba(8,127,91,.12); }
.safety-status.ready div > span { color:#39715f; }
.console-layout { display:grid; grid-template-columns:230px minmax(0,1fr); gap:20px; align-items:start; }
.sidebar { position:sticky; top:18px; max-height:calc(100vh - 36px); overflow-y:auto; padding:10px; border:1px solid var(--line); border-radius:15px; background:var(--paper); box-shadow:0 6px 24px rgba(9,42,72,.04); scrollbar-width:thin; }
nav { display:flex; flex-direction:column; gap:4px; }
nav #refresh { margin-top:10px; }
.nav-group { padding:4px 0; border-bottom:1px solid var(--line); }
.nav-group:first-child { padding-top:0; }
.nav-group:last-of-type { border-bottom:0; }
.nav-label { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:2px 8px; min-height:48px; margin:0; padding:7px 10px; border-radius:10px; color:var(--ink); cursor:pointer; list-style:none; }
.nav-label::-webkit-details-marker { display:none; }
.nav-label::after { content:"›"; grid-column:2; grid-row:1 / span 2; color:#87919b; font-size:22px; line-height:1; transition:transform .16s ease; }
.nav-label span { font-size:13px; font-weight:820; letter-spacing:-.01em; }
.nav-label small { color:#87919b; font-size:10px; font-weight:650; }
.nav-group[open] > .nav-label { background:#f1f5f8; color:var(--navy); }
.nav-group[open] > .nav-label::after { transform:rotate(90deg); }
.nav-group[open] > .tab { animation:nav-reveal .14s ease both; }
.nav-group > .tab { margin-top:3px; padding-left:18px; }
@keyframes nav-reveal { from { opacity:0; transform:translateY(-2px); } to { opacity:1; transform:none; } }
.tab { width:100%; display:flex; align-items:center; justify-content:space-between; text-align:left; background:transparent; color:var(--muted); }
.tab:hover { background:#f0f4f7; color:var(--ink); }
.tab.active { background:var(--navy); color:#fff; }
.tab span { min-width:24px; margin-left:8px; padding:1px 7px; border-radius:999px; background:rgba(104,114,125,.12); text-align:center; font-size:12px; }
.tab.active span { background:rgba(255,255,255,.15); }
.workspace { min-width:0; padding:24px; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.62); }
.workspace-header { display:flex; align-items:end; justify-content:space-between; gap:24px; padding-bottom:18px; border-bottom:1px solid var(--line); margin-bottom:18px; }
.workspace-header h2 { margin-bottom:2px; font-size:27px; letter-spacing:-.025em; }
.workspace-header p { margin-bottom:0; }
.search-field { width:min(310px,42%); margin:0; color:var(--muted); font-size:12px; }
.search-field span { display:block; margin-bottom:5px; font-weight:750; }
.search-field input { padding:10px 12px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr)); gap:16px; }
.card { min-width:0; padding:20px; border:1px solid var(--line); border-radius:13px; background:var(--paper); box-shadow:0 3px 15px rgba(9,42,72,.035); }
.card-head { display:flex; justify-content:space-between; gap:12px; }
.meta { display:flex; flex-wrap:wrap; gap:7px; margin:10px 0; color:var(--muted); font-size:13px; }
.message { margin:12px 0; padding:12px; border-radius:8px; background:#f5f7f8; white-space:pre-wrap; overflow-wrap:anywhere; }
.actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:15px; }
.reject { background:#fff0ee; color:var(--red); }
.approve { background:var(--green); }
.status { display:inline-block; padding:3px 8px; border-radius:999px; background:#eef1f3; font-size:12px; font-weight:800; text-transform:capitalize; white-space:nowrap; }
.status.pending,.status.pending_approval { color:var(--amber); background:#fff4d6; }
.status.approved,.status.succeeded,.status.active,.status.enabled { color:var(--green); background:#e7f6ef; }
.status.rejected,.status.failed { color:var(--red); background:#fff0ee; }
.status.won { color:var(--green); }
.status.lost { color:var(--red); }
.status.alert-urgent { color:var(--red); background:#fff0ee; }
.status.alert-high { color:var(--amber); background:#fff4d6; }
.status.alert-normal { color:#174ea6; background:#e7efff; }
.metric { margin:8px 0 0; color:var(--navy); font-size:36px; font-weight:850; }
.metric-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.metric-card { position:relative; min-width:0; min-height:146px; padding:17px 18px; overflow:hidden; border:1px solid var(--line); border-radius:13px; background:#fff; color:var(--ink); text-align:left; box-shadow:0 3px 15px rgba(9,42,72,.035); transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease; }
.metric-card::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:#cbd3da; }
.metric-card.has-value::before { background:var(--blue); }
.metric-card:hover { filter:none; border-color:#afc2d3; box-shadow:0 8px 24px rgba(9,42,72,.09); transform:translateY(-1px); }
.metric-label,.metric-note,.metric-action { display:block; }
.metric-label { color:#46515c; font-size:13px; font-weight:800; }
.metric-value { display:block; margin:5px 0 1px; color:var(--navy); font-size:31px; line-height:1.1; letter-spacing:-.035em; }
.metric-note { color:var(--muted); font-size:12px; }
.metric-action { margin-top:12px; color:var(--blue); font-size:11px; font-weight:800; opacity:0; transition:opacity .16s ease; }
.metric-card:hover .metric-action,.metric-card:focus-visible .metric-action { opacity:1; }
.metric-card.is-quiet .metric-value { color:#87919b; }
.lead-controls { display:flex; align-items:center; gap:8px; margin-top:15px; }
.workflow-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:0 0 18px; }
.decision-governance { margin-bottom:18px; padding:18px; border:1px solid #ccd9e5; border-radius:13px; background:linear-gradient(145deg,#fff 0%,#f2f7fb 100%); }
.governance-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.governance-head h3 { margin-bottom:3px; color:var(--navy); font-size:18px; }
.governance-head p { margin-bottom:0; }
.governance-badge { flex:0 0 auto; padding:5px 10px; border-radius:999px; background:#e7efff; color:#174ea6; font-size:11px; font-weight:850; letter-spacing:.06em; text-transform:uppercase; }
.decision-lifecycle { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:7px; margin:16px 0 0; padding:0; list-style:none; counter-reset:decision-step; }
.decision-lifecycle li { counter-increment:decision-step; min-width:0; padding:11px; border:1px solid var(--line); border-radius:9px; background:#fff; }
.decision-lifecycle li::before { content:counter(decision-step,decimal-leading-zero); display:block; margin-bottom:5px; color:var(--blue); font-size:10px; font-weight:850; }
.decision-lifecycle strong,.decision-lifecycle span { display:block; }
.decision-lifecycle strong { color:var(--navy); font-size:13px; }
.decision-lifecycle span { margin-top:3px; color:var(--muted); font-size:11px; line-height:1.35; }
.decision-lifecycle .current { border-color:var(--navy); background:var(--navy); }
.decision-lifecycle .current::before { color:#9dbbff; }
.decision-lifecycle .current strong { color:#fff; }
.decision-lifecycle .current span { color:#dce8f3; }
.workflow-stat { padding:14px; border:1px solid var(--line); border-radius:11px; background:#fff; }
.workflow-stat strong { display:block; color:var(--navy); font-size:24px; }
.workflow-stat span { color:var(--muted); font-size:12px; }
.inbox-filter-bar { display:grid; grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) minmax(180px,2fr); gap:12px; align-items:end; margin-bottom:18px; padding:14px; border:1px solid #ccd9e5; border-radius:13px; background:#fff; }
.inbox-filter { min-width:0; margin:0; }
.inbox-filter span { display:block; margin-bottom:5px; color:var(--muted); font-size:12px; font-weight:750; }
.inbox-filter select { padding:10px 12px; }
.inbox-filter-bar .filter-results { grid-column:auto; align-self:center; text-align:right; }
.inbox-badges { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.brand-badge,.channel-badge { display:inline-block; padding:3px 8px; border-radius:999px; font-size:11px; font-weight:850; white-space:nowrap; }
.brand-watabe { color:#174ea6; background:#e7efff; }
.brand-duhosting { color:#7a3e00; background:#fff0d9; }
.brand-dudumizi { color:#087f5b; background:#e7f6ef; }
.brand-unrouted { color:#5f6770; background:#eef1f3; }
.channel-whatsapp { color:#067647; background:#dcfae6; }
.channel-email { color:#6941c6; background:#f1eaff; }
.readiness-hero { display:flex; align-items:center; gap:18px; margin-bottom:18px; padding:18px; border:1px solid #ccd9e5; border-radius:13px; background:linear-gradient(145deg,#fff 0%,#f2f7fb 100%); color:var(--muted); }
.readiness-score { flex:0 0 auto; color:var(--navy); font-size:30px; font-weight:850; }
.readiness-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.coverage-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.coverage-list { margin:8px 0 0; padding:0; list-style:none; }
.coverage-list li { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:8px; padding:9px 0; border-bottom:1px solid var(--line); }
.coverage-list li:last-child { border-bottom:0; }
.coverage-ready,.coverage-missing { min-width:26px; text-align:center; }
.coverage-ready { color:var(--green); }
.coverage-missing { color:var(--amber); }
.compact { padding:6px 9px; font-size:12px; }
.setup-actions { margin-top:18px; padding:18px; border:1px solid var(--line); border-radius:13px; background:#fff; }
.setup-actions h3 { margin-bottom:8px; color:var(--navy); }
.agentic-hero { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:18px; padding:20px; border:1px solid #bcd0e2; border-radius:13px; background:linear-gradient(135deg,#fff 0%,#edf5fb 100%); }
.agentic-hero h3 { margin-bottom:4px; color:var(--navy); }
.agentic-hero p { margin-bottom:0; }
.agentic-hero button { flex:0 0 auto; }
.cycle-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:12px; }
.prospect-portfolio { margin-bottom:20px; padding:0; border:1px solid #ccd9e5; border-radius:13px; background:linear-gradient(145deg,#fff 0%,#f2f7fb 100%); }
.prospect-portfolio > summary { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 18px; cursor:pointer; list-style:none; }
.prospect-portfolio > summary::-webkit-details-marker { display:none; }
.prospect-portfolio > summary strong,.prospect-portfolio > summary small { display:block; }
.prospect-portfolio > summary strong { color:var(--navy); font-size:16px; }
.prospect-portfolio > summary small { margin-top:2px; color:var(--muted); font-size:12px; }
.prospect-portfolio[open] > summary { border-bottom:1px solid var(--line); }
.prospect-portfolio > .brand-lead-grid { margin:0; padding:16px; }
.prospect-filter-bar { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) auto auto; gap:10px; align-items:end; margin-bottom:16px; padding:14px; border:1px solid #ccd9e5; border-radius:13px; background:#fff; }
.prospect-filter { min-width:0; margin:0; }
.prospect-filter span { display:block; margin-bottom:5px; color:var(--muted); font-size:12px; font-weight:750; }
.prospect-filter select { min-width:0; padding:10px; }
.filter-results { grid-column:1 / -3; align-self:center; margin:0; color:var(--muted); font-size:13px; }
.prospect-filter-apply,.prospect-filter-reset { grid-row:2; white-space:nowrap; }
.prospect-filter-apply { grid-column:5; }
.prospect-filter-reset { grid-column:6; }
.prospect-gateway-readiness { margin-bottom:16px; padding:16px; border:1px solid #ccd9e5; border-radius:13px; background:#fff; }
.proposal-release-policy { margin-bottom:16px; padding:16px; border-left:4px solid var(--blue); border-radius:9px; background:#eef4ff; }
.proposal-release-policy h3 { margin-bottom:4px; color:var(--navy); }
.proposal-release-policy p { margin-bottom:0; }
.prospect-review summary { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.prospect-review + button { margin-top:10px; }
.communications-workspace { margin-bottom:20px; padding:18px; border:1px solid #b9cde0; border-radius:14px; background:linear-gradient(145deg,#fff 0%,#f1f7fc 100%); }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:8px 0 14px; }
.section-heading h2 { margin:0; color:var(--navy); font-size:21px; }
.section-heading .eyebrow { margin-bottom:2px; }
.compact-summary { margin-bottom:14px; }
.compact-summary .workflow-stat { padding:10px 12px; }
.compact-summary .workflow-stat strong { font-size:21px; }
.prospect-list-heading { margin-top:26px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.prospect-card .message { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:4; }
.lead-card-hidden { display:none; }
.show-more-leads { display:block; min-width:180px; margin:18px auto 0; }
.prospect-gateway-readiness h3 { margin:0; color:var(--navy); }
.gateway-readiness-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:12px; }
.gateway-readiness-card { display:flex; flex-wrap:wrap; align-items:center; gap:7px; min-width:0; padding:12px; border:1px solid var(--line); border-radius:9px; }
.gateway-readiness-card strong { flex:1 0 100%; color:var(--navy); }
.brand-lead-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:16px; }
.brand-lead-card { min-width:0; padding:16px; border:1px solid var(--line); border-radius:11px; background:#fff; }
.brand-lead-card h2 { margin-bottom:0; font-size:17px; }
.service-lead-group { padding:9px 0; border-bottom:1px solid var(--line); }
.service-lead-group:last-child { border-bottom:0; }
.service-lead-group summary { display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--navy); font-weight:750; cursor:pointer; }
.service-lead-group summary strong { min-width:25px; padding:2px 7px; border-radius:999px; background:#e7efff; color:#174ea6; text-align:center; font-size:12px; }
.workflow-stage { margin:24px 0 10px; padding-bottom:8px; border-bottom:1px solid var(--line); font-size:16px; }
.decision-detail { margin:12px 0; }
.decision-detail summary { color:var(--navy); font-weight:750; cursor:pointer; }
.decision-list { margin:8px 0 0; padding-left:20px; color:var(--muted); }
.decision-list li + li { margin-top:5px; }
.lead-controls select { flex:1; padding:9px; }
.error { min-height:1.5em; color:var(--red); }
.empty { padding:60px 20px; border:1px dashed #c5ccd2; border-radius:12px; text-align:center; color:var(--muted); }
dialog { width:min(560px,calc(100% - 28px)); max-height:calc(100vh - 40px); overflow:auto; border:0; border-radius:15px; padding:25px; box-shadow:0 20px 80px rgba(0,0,0,.24); }
dialog::backdrop { background:rgba(6,25,42,.55); }
.dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }
#menu-toggle { display:none; }
.filtered-out { display:none !important; }
@media (max-width:900px) {
  main { width:min(100% - 24px,760px); margin:16px auto 32px; }
  header { align-items:flex-start; flex-direction:column; }
  .identity { width:100%; flex-wrap:wrap; }
  .identity #logout { margin-left:auto; }
  #menu-toggle { display:inline-block; }
  .console-layout { display:block; }
  .sidebar { position:static; max-height:min(58vh,520px); margin-bottom:14px; overflow-y:auto; overscroll-behavior:contain; }
  .sidebar:not(.open) { display:none; }
  nav { display:block; }
  .nav-group { padding:8px 0; }
  nav #refresh { margin-top:5px; }
  .workspace { padding:18px; }
  .workspace-header { align-items:stretch; flex-direction:column; gap:14px; }
  .search-field { width:100%; }
  .grid { grid-template-columns:1fr; }
  .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .workflow-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .decision-lifecycle { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .readiness-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .coverage-grid { grid-template-columns:1fr; }
  .agentic-hero { align-items:flex-start; flex-direction:column; }
  .brand-lead-grid { grid-template-columns:1fr; }
  .gateway-readiness-grid { grid-template-columns:1fr; }
  .inbox-filter-bar { grid-template-columns:1fr 1fr; }
  .inbox-filter-bar .filter-results { grid-column:1 / -1; text-align:left; }
  .prospect-filter-bar { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .filter-results { grid-column:1 / -1; }
  .prospect-filter-apply,.prospect-filter-reset { grid-row:auto; }
  .prospect-filter-apply { grid-column:1; }
  .prospect-filter-reset { grid-column:2; }
  .login-card { padding:25px; }
}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 18px}.kpi{padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}.kpi strong{display:block;font-size:1.6rem;margin-top:6px}.lead-profile{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}.timeline-event{padding:10px 0;border-bottom:1px solid var(--line)}
@media (max-width:480px) {
  .permission-grid { grid-template-columns:1fr; }
  main { width:calc(100% - 20px); }
  .workspace { padding:14px; }
  nav { grid-template-columns:1fr; }
  .identity { gap:7px; }
  .identity #operator-name { width:100%; }
  .actions > button,.actions > .button { flex:1 1 auto; text-align:center; }
  .dialog-actions { flex-direction:column-reverse; }
  .dialog-actions button { width:100%; }
  .workflow-summary { grid-template-columns:1fr 1fr; }
  .governance-head { flex-direction:column; }
  .decision-lifecycle { grid-template-columns:1fr 1fr; }
  .readiness-grid { grid-template-columns:1fr; }
  .readiness-hero { align-items:flex-start; flex-direction:column; }
  .cycle-stats { grid-template-columns:1fr; }
  .prospect-filter-bar { grid-template-columns:1fr; }
  .filter-results,.prospect-filter-apply,.prospect-filter-reset { grid-column:1; }
  .prospect-filter-apply,.prospect-filter-reset { width:100%; }
  .communications-workspace { padding:14px; }
  .section-heading { align-items:flex-start; }
  .compact-summary { grid-template-columns:1fr 1fr; }
  .inbox-filter-bar { grid-template-columns:1fr; }
  .inbox-filter-bar .filter-results { grid-column:1; }
  .card-head { align-items:flex-start; flex-direction:column; }
  .inbox-badges { justify-content:flex-start; }
  .metric-card { min-height:118px; padding:14px; }
  .metric-note { display:none; }
  .metric-action { margin-top:8px; opacity:1; }
  .safety-status { align-items:flex-start; }
}