/* ============================================================
   ZYNTARI OPS — dashboard styles
   Brand tokens from the marketing site, tuned for app density.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&display=swap');

:root{
  --bg:#000000; --bg-1:#06060a; --bg-2:#0a0a12;
  --panel:#0c0c15; --panel-2:#10101a;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --c-blue:#6ea8ff; --c-peri:#8e9bf7; --c-violet:#c39bff;
  --grad:linear-gradient(108deg,var(--c-blue),var(--c-peri) 46%,var(--c-violet));
  --grad-soft:linear-gradient(108deg,rgba(110,168,255,.16),rgba(195,155,255,.16));
  --glow:rgba(142,155,247,.45);
  --tx:#f4f4f8; --tx-soft:#b9b9c9; --tx-mute:#7d7d8f; --tx-dim:#565666;
  --ok:#5ad48f; --warn:#f0c662; --bad:#e08a9b;
  --f-d:'Space Grotesk',system-ui,sans-serif;
  --f-b:'Satoshi',system-ui,sans-serif;
  --f-m:'JetBrains Mono',ui-monospace,monospace;
  --r:12px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --sidebar-w:228px;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{ background:var(--bg); color:var(--tx); font-family:var(--f-b); font-size:14.5px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow:hidden; }
#root{ height:100vh; }
a{ color:var(--c-peri); text-decoration:none; }
button{ font-family:inherit; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.1); border-radius:6px; border:2px solid #000; }
::-webkit-scrollbar-track{ background:transparent; }

/* ---------- shell ---------- */
.shell{ display:grid; grid-template-columns:var(--sidebar-w) 1fr; height:100vh; position:relative; isolation:isolate; }
.shell::before{ content:""; position:fixed; inset:0; z-index:-2;
  background:url('bg.jpg') center / cover no-repeat; opacity:.57; pointer-events:none; }
.shell::after{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35) 40%, rgba(0,0,0,.6)); }
.sidebar{ background:linear-gradient(180deg, rgba(142,155,247,.07), transparent 30%), rgba(4,4,10,.72); backdrop-filter:blur(10px); border-right:1px solid var(--line); display:flex; flex-direction:column; padding:18px 14px; gap:4px; }
.side-logo{ display:flex; align-items:center; gap:10px; padding:6px 10px 18px; }
.side-logo img{ height:22px; }
.side-logo .ops{ font-family:var(--f-m); font-size:10px; letter-spacing:.22em; color:var(--tx-dim); border:1px solid var(--line-2); border-radius:5px; padding:2px 7px; }
.nav-item{
  display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:9px;
  background:none; border:0; cursor:pointer; color:var(--tx-mute); width:100%;
  font-family:var(--f-d); font-weight:500; font-size:13.5px; letter-spacing:.01em; text-align:start;
  transition:background .2s,color .2s;
}
.nav-item svg{ width:17px; height:17px; stroke:currentColor; stroke-width:1.7; fill:none; flex-shrink:0; }
.nav-item:hover{ color:var(--tx); background:rgba(255,255,255,.04); }
.nav-item.on{ color:var(--tx); background:linear-gradient(108deg,rgba(110,168,255,.14),rgba(195,155,255,.12)); }
.nav-item.on svg{ stroke:url(#dgrad); }
.nav-sect{ font-family:var(--f-m); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--tx-dim); padding:16px 12px 6px; }
.side-foot{ margin-top:auto; border-top:1px solid var(--line); padding-top:12px; }
.side-user{ display:flex; align-items:center; gap:10px; padding:8px 10px; }
.side-user .nm{ font-size:13px; font-weight:700; line-height:1.2; }
.side-user .rl{ font-family:var(--f-m); font-size:10.5px; color:var(--tx-mute); text-transform:uppercase; letter-spacing:.1em; }
.logout{ background:none; border:0; color:var(--tx-dim); cursor:pointer; font-size:12px; padding:6px 10px; border-radius:7px; }
.logout:hover{ color:var(--bad); background:rgba(224,138,155,.07); }

.main{ overflow-y:auto; position:relative;
  background:
    radial-gradient(1100px 480px at 84% -180px, rgba(142,155,247,.1), transparent 62%),
    radial-gradient(900px 600px at -220px 112%, rgba(195,155,255,.07), transparent 60%); }
.main-inner{ padding:26px 30px 60px; max-width:1280px; }
.topbar{ position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:16px; padding:14px 30px; background:rgba(4,4,8,.82); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.topbar::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:linear-gradient(90deg,transparent,rgba(142,155,247,.55),transparent); opacity:.45; pointer-events:none; }
.topbar h1{ font-family:var(--f-d); font-weight:700; font-size:18px; letter-spacing:-.01em; }
.topbar .crumb{ font-family:var(--f-m); font-size:11px; color:var(--tx-dim); letter-spacing:.08em; }
.topbar .sp{ flex:1; }

/* ---------- primitives ---------- */
.grid{ display:grid; gap:16px; }
.cols-2{ grid-template-columns:1fr 1fr; }
.cols-3{ grid-template-columns:repeat(3,1fr); }
.cols-4{ grid-template-columns:repeat(4,1fr); }
.panel{ background:linear-gradient(180deg, rgba(12,12,21,.82), rgba(6,6,10,.86)); backdrop-filter:blur(8px); border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; position:relative; }
.panel::before{ content:""; position:absolute; top:-1px; left:14px; right:14px; height:1px; background:linear-gradient(90deg,transparent,rgba(142,155,247,.4),transparent); opacity:.5; pointer-events:none; }
.panel.tight{ padding:14px 16px; }
.panel h3{ font-family:var(--f-d); font-size:14px; font-weight:600; margin-bottom:12px; color:var(--tx-soft); }
.klabel{ font-family:var(--f-m); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--tx-mute); }
.kval{ font-family:var(--f-d); font-weight:700; font-size:26px; letter-spacing:-.02em; margin-top:6px; }
.kval.grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ksub{ font-size:12px; color:var(--tx-mute); margin-top:4px; }

.badge{ display:inline-flex; align-items:center; gap:8px; font-family:var(--f-m); font-size:10px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--tx-soft); white-space:nowrap; }
.badge::before{ content:""; width:6px; height:6px; transform:rotate(45deg); background:currentColor; border-radius:1px; box-shadow:0 0 8px -1px currentColor; flex-shrink:0; }
.badge.ok{ color:var(--ok); }
.badge.warn{ color:var(--warn); }
.badge.bad{ color:var(--bad); }
.badge.info{ color:var(--c-peri); }
.badge.dim{ color:var(--tx-dim); }
.badge.nodot::before{ display:none; }

.btn{ display:inline-flex; align-items:center; gap:8px; font-family:var(--f-d); font-weight:600; font-size:13px;
  padding:9px 16px; border-radius:9px; cursor:pointer; border:0; transition:transform .2s,box-shadow .25s,background .2s; white-space:nowrap; }
.btn.primary{ background:var(--grad); color:#0a0a14; box-shadow:0 6px 20px -8px var(--glow); }
.btn.primary:hover{ transform:translateY(-1px); }
.btn.ghost{ background:rgba(255,255,255,.04); color:var(--tx); box-shadow:inset 0 0 0 1px var(--line-2); }
.btn.ghost:hover{ background:rgba(255,255,255,.08); }
.btn.sm{ padding:6px 11px; font-size:12px; border-radius:7px; }
.btn.danger{ background:rgba(224,138,155,.12); color:var(--bad); box-shadow:inset 0 0 0 1px rgba(224,138,155,.3); }
.iconbtn{ background:none; border:0; cursor:pointer; color:var(--tx-dim); padding:5px; border-radius:6px; display:grid; place-items:center; }
.iconbtn:hover{ color:var(--tx); background:rgba(255,255,255,.06); }
.iconbtn svg{ width:15px; height:15px; stroke:currentColor; stroke-width:1.8; fill:none; }

/* tables */
table.tbl{ width:100%; border-collapse:collapse; }
.tbl th{ font-family:var(--f-m); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--tx-dim); text-align:start; padding:8px 12px; border-bottom:1px solid var(--line); font-weight:500; }
.tbl td{ padding:11px 12px; border-bottom:1px solid var(--line); font-size:13.5px; color:var(--tx-soft); vertical-align:middle; }
.tbl tr:last-child td{ border-bottom:0; }
.tbl tbody tr{ cursor:pointer; transition:background .15s; }
.tbl tbody tr:hover{ background:rgba(142,155,247,.05); }
.tbl .strong{ color:var(--tx); font-weight:700; }
.mono{ font-family:var(--f-m); font-size:12.5px; }
.money{ font-family:var(--f-m); font-size:13px; color:var(--tx); }

/* inputs */
.inp, select.inp, textarea.inp{
  width:100%; background:var(--bg-1); border:1px solid var(--line-2); border-radius:9px;
  color:var(--tx); font-family:var(--f-b); font-size:13.5px; padding:9px 12px; outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.inp:focus{ border-color:var(--c-peri); box-shadow:0 0 0 3px rgba(142,155,247,.14); }
.inp::placeholder{ color:var(--tx-dim); }
textarea.inp{ resize:vertical; min-height:70px; }
.fld{ display:flex; flex-direction:column; gap:6px; }
.fld label{ font-family:var(--f-m); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--tx-mute); }
.frow{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* kanban */
.kanban{ display:grid; grid-template-columns:repeat(5,minmax(200px,1fr)); gap:14px; align-items:start; }
.kcol{ background:rgba(6,6,12,.72); backdrop-filter:blur(6px); border:1px solid var(--line); border-radius:var(--r); padding:12px; min-height:120px; }
.kcol-head{ display:flex; align-items:center; justify-content:space-between; padding:2px 4px 10px; }
.kcol-head .kt{ font-family:var(--f-m); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--tx-mute); }
.kcol-head .kc{ font-family:var(--f-m); font-size:10.5px; color:var(--tx-dim); }
.kcard{ background:linear-gradient(180deg,var(--panel-2),var(--panel)); border:1px solid var(--line-2); border-radius:10px; padding:12px 13px; margin-bottom:10px; cursor:pointer; transition:border-color .2s, transform .2s; }
.kcard:hover{ border-color:rgba(142,155,247,.45); transform:translateY(-1px); }
.kcard .co{ font-family:var(--f-d); font-weight:700; font-size:14px; }
.kcard .meta{ display:flex; justify-content:space-between; align-items:center; margin-top:8px; }
.kcard .who{ font-size:12px; color:var(--tx-mute); margin-top:2px; }
.kmove{ display:flex; gap:6px; margin-top:10px; }

/* misc */
.avatar{ width:30px; height:30px; border-radius:9px; border:1px solid transparent;
  background:linear-gradient(165deg,var(--panel-2),var(--bg-2)) padding-box, linear-gradient(135deg,rgba(110,168,255,.65),rgba(195,155,255,.55)) border-box;
  display:grid; place-items:center; font-family:var(--f-d); font-weight:600; font-size:11px; letter-spacing:.04em; color:var(--tx-soft); flex-shrink:0; }
.avatar.lg{ width:42px; height:42px; font-size:13.5px; border-radius:12px; }
.row{ display:flex; align-items:center; gap:10px; }
.row.between{ justify-content:space-between; }
.stack{ display:flex; flex-direction:column; gap:4px; }
.muted{ color:var(--tx-mute); } .dim{ color:var(--tx-dim); } .soft{ color:var(--tx-soft); }
.sm{ font-size:12.5px; } .xs{ font-size:11.5px; }
.progress{ height:6px; background:rgba(255,255,255,.06); border-radius:4px; overflow:hidden; }
.progress i{ display:block; height:100%; background:var(--grad); border-radius:4px; transition:width .5s var(--ease); }
.hr{ height:1px; background:var(--line); border:0; margin:14px 0; }
.empty{ text-align:center; color:var(--tx-dim); padding:34px 10px; font-size:13px; }
.linkchip{ display:inline-flex; align-items:center; gap:7px; font-family:var(--f-m); font-size:11.5px; color:var(--tx-soft); border:1px solid var(--line-2); border-radius:7px; padding:5px 10px; transition:border-color .2s,color .2s; }
.linkchip:hover{ border-color:var(--c-peri); color:var(--c-peri); }
.linkchip svg{ width:12px; height:12px; stroke:currentColor; stroke-width:1.8; fill:none; }
.tag{ font-family:var(--f-m); font-size:10.5px; color:var(--tx-mute); border:1px solid var(--line); border-radius:5px; padding:2px 7px; }

/* drawer + modal */
.overlay{ position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(3px); z-index:90; }
.drawerp{ position:fixed; top:0; bottom:0; right:0; width:min(520px,94vw); background:var(--bg-1); border-left:1px solid var(--line-2); z-index:95; overflow-y:auto; padding:24px 26px 40px; box-shadow:-30px 0 80px rgba(0,0,0,.6); animation:slidein .28s var(--ease); }
@keyframes slidein{ from{ transform:translateX(40px); opacity:0; } to{ transform:none; opacity:1; } }
.modal{ position:fixed; inset:0; z-index:95; display:grid; place-items:center; padding:20px; }
.modal-box{ width:min(480px,94vw); background:var(--bg-1); border:1px solid var(--line-2); border-radius:14px; padding:24px; box-shadow:0 40px 100px rgba(0,0,0,.7); animation:pop .25s var(--ease); max-height:88vh; overflow-y:auto; }
@keyframes pop{ from{ transform:translateY(14px) scale(.98); opacity:0; } to{ transform:none; opacity:1; } }
.modal-box h3{ font-family:var(--f-d); font-size:17px; margin-bottom:16px; }

/* login */
.login{ height:100vh; display:grid; place-items:center; position:relative; overflow:hidden; }
.login-box{ width:min(400px,92vw); background:linear-gradient(180deg,var(--panel),var(--bg-1)); border:1px solid var(--line-2); border-radius:16px; padding:34px; position:relative; z-index:2; }
.login-box img{ height:26px; margin-bottom:8px; }
.login-box .sub{ font-family:var(--f-m); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--tx-dim); margin-bottom:24px; }
.login-orb{ position:absolute; width:560px; height:560px; border-radius:50%; filter:blur(90px); opacity:.32; }
.login-orb.a{ background:radial-gradient(circle,rgba(110,168,255,.6),transparent 70%); top:-180px; left:-120px; }
.login-orb.b{ background:radial-gradient(circle,rgba(195,155,255,.5),transparent 70%); bottom:-200px; right:-140px; }
.quick{ display:flex; flex-direction:column; gap:8px; margin-top:18px; }
.quick .q{ display:flex; align-items:center; gap:11px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.02); cursor:pointer; transition:border-color .2s,background .2s; text-align:start; width:100%; color:var(--tx); }
.quick .q:hover{ border-color:rgba(142,155,247,.5); background:rgba(142,155,247,.06); }
.quick .q .qn{ font-weight:700; font-size:13.5px; }
.quick .q .qd{ font-size:11.5px; color:var(--tx-mute); }

/* timeline */
.mline{ display:flex; flex-direction:column; gap:0; }
.mstep{ display:grid; grid-template-columns:22px 1fr auto; gap:12px; padding:10px 0; align-items:start; position:relative; }
.mstep::before{ content:""; position:absolute; left:10px; top:26px; bottom:-4px; width:2px; background:var(--line); }
.mstep:last-child::before{ display:none; }
.mdot{ width:21px; height:21px; border-radius:50%; display:grid; place-items:center; font-size:10px; font-family:var(--f-m); border:1px solid var(--line-2); color:var(--tx-dim); background:var(--bg-1); z-index:1; }
.mdot.paid{ background:var(--grad); color:#0a0a14; border-color:transparent; }
.mdot.due{ border-color:var(--warn); color:var(--warn); }

/* identity orb */
.id-orb{ width:13px; height:13px; border-radius:50%; flex-shrink:0; display:inline-block;
  box-shadow:0 0 0 2px rgba(255,255,255,.07), 0 0 12px -2px rgba(142,155,247,.6); }
.id-orb.lg{ width:19px; height:19px; }

/* pipeline rows */
.lead-row{ cursor:pointer; }
.lead-stage select{ background:var(--bg-1); border:1px solid var(--line-2); color:var(--tx-soft); font-family:var(--f-m); font-size:11px; letter-spacing:.06em; text-transform:uppercase; border-radius:7px; padding:5px 8px; outline:none; cursor:pointer; }

/* finance donut */
.donut-wrap{ display:flex; gap:26px; align-items:center; flex-wrap:wrap; }
.donut{ position:relative; width:150px; height:150px; flex-shrink:0; }
.donut svg{ transform:rotate(-90deg); }
.donut .dc{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; }
.donut .dc .v{ font-family:var(--f-d); font-weight:700; font-size:19px; }
.legend{ display:flex; flex-direction:column; gap:9px; }
.legend .li{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--tx-soft); }
.legend .sw{ width:9px; height:9px; border-radius:3px; }

/* range chips */
.range-chips{ display:flex; gap:6px; flex-wrap:wrap; }

@media (max-width:1100px){ .kanban{ grid-template-columns:repeat(3,1fr); } .cols-4{ grid-template-columns:1fr 1fr; } }

/* ---------- live chat ---------- */
.chatwrap{ display:grid; grid-template-columns:300px 1fr; gap:16px; height:calc(100vh - 170px); min-height:440px; }
.threadlist{ padding:0; overflow-y:auto; }
.thread-item{ display:flex; gap:11px; align-items:center; padding:13px 15px; border-bottom:1px solid var(--line); cursor:pointer; transition:background .15s; }
.thread-item:hover{ background:rgba(142,155,247,.05); }
.thread-item.on{ background:linear-gradient(108deg,rgba(110,168,255,.1),rgba(195,155,255,.07)); }
.odot{ width:8px; height:8px; border-radius:50%; background:var(--tx-dim); flex-shrink:0; }
.odot.live{ background:var(--ok); box-shadow:0 0 9px rgba(90,212,143,.8); }
.unread-pill{ font-family:var(--f-m); font-size:10px; background:var(--grad); color:#0a0a14; border-radius:100px; padding:1px 7px; font-weight:700; }
.convo{ display:flex; flex-direction:column; padding:0; overflow:hidden; }
.convo-head{ display:flex; align-items:center; gap:11px; padding:13px 18px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.02); }
.convo-body{ flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:10px; }
.cmsg{ max-width:72%; padding:10px 14px; border-radius:13px; font-size:13.5px; line-height:1.5; white-space:pre-line; }
.cmsg.me{ background:var(--grad); color:#0a0a14; font-weight:500; align-self:flex-end; border-bottom-right-radius:4px; }
.cmsg.them{ background:rgba(255,255,255,.05); border:1px solid var(--line); color:var(--tx-soft); align-self:flex-start; border-bottom-left-radius:4px; }
.cmsg .cwho{ display:block; font-family:var(--f-m); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; opacity:.65; margin-bottom:3px; }
.convo-foot{ display:flex; gap:9px; padding:13px 15px; border-top:1px solid var(--line); }
.online-strip{ display:flex; gap:10px; flex-wrap:wrap; }
.online-card{ display:flex; align-items:center; gap:10px; border:1px solid var(--line-2); border-radius:10px; padding:8px 13px; background:rgba(255,255,255,.02); }
@media (max-width:900px){ .chatwrap{ grid-template-columns:1fr; height:auto; } .threadlist{ max-height:240px; } }
@media (max-width:860px){
  .shell{ grid-template-columns:64px 1fr; }
  .sidebar .nav-item span,.side-logo .ops,.nav-sect,.side-user div{ display:none; }
  .side-logo img{ height:18px; }
  .cols-3{ grid-template-columns:1fr; } .cols-2{ grid-template-columns:1fr; }
  .kanban{ grid-template-columns:repeat(2,1fr); }
}