:root{
  --bg:#0f1117; --surface:#fff; --ink:#16142e; --muted:#6b6790; --line:#e6e3f0;
  --accent:#7c3aed; --accent2:#c026d3; --ok:#16a34a; --warn:#d97706; --err:#dc2626;
  --new:#6366f1; --warm:#f97316; --cold:#0ea5e9; --invalid:#94a3b8; --refusal:#dc2626; --unidentified:#a855f7;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Onest',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:#f5f4fb}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* ── Guest (sign-in) ── */
body.guest{display:grid;place-items:center;min-height:100vh;background:linear-gradient(160deg,#241645,#0e0922)}
.loginbox{background:#fff;border-radius:20px;padding:40px;width:360px;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.loginbox h1{font-size:22px;margin:0 0 4px}
.loginbox .sub{color:var(--muted);font-size:14px;margin:0 0 24px}

/* ── The app: sidebar plus content ── */
html,body{max-width:100%}
body.app{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
body.app>*{min-width:0}                     /* grid children must be able to shrink, or the page scrolls sideways */
.side{background:#1a1730;color:#fff;padding:22px 16px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{font-weight:800;font-size:20px;letter-spacing:-.02em;margin:0 6px 26px}
.brand span{display:block;font-size:12px;font-weight:600;color:var(--accent2);letter-spacing:.2em}
.side nav{display:flex;flex-direction:column;gap:2px;flex:1}
.side nav a{color:rgba(255,255,255,.75);padding:10px 12px;border-radius:10px;font-size:15px;display:flex;align-items:center;gap:11px;white-space:nowrap;overflow:hidden}
.side nav a:hover{background:rgba(255,255,255,.08);text-decoration:none}
.side nav a.on{background:var(--accent);color:#fff}
.side .ic{flex:0 0 auto;width:22px;text-align:center;font-size:16px}
.brandrow{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;gap:8px}
.brandrow .brand{margin:0}
.sidetoggle{background:rgba(255,255,255,.08);border:none;color:rgba(255,255,255,.7);width:30px;height:30px;border-radius:8px;cursor:pointer;display:grid;place-items:center;flex:0 0 auto}
.sidetoggle:hover{background:rgba(255,255,255,.16);color:#fff}
.logout .lb-btn{display:flex;align-items:center;gap:11px;justify-content:flex-start}
.logout .lb-btn .ic{width:22px;text-align:center}
/* collapsed sidebar */
html.side-mini body.app{grid-template-columns:66px 1fr}
html.side-mini .side{padding:22px 10px}
html.side-mini .brand,html.side-mini .lb,html.side-mini .who{display:none}
html.side-mini .brandrow{justify-content:center;margin-bottom:20px}
html.side-mini .side nav a{justify-content:center;padding:11px 0;gap:0}
html.side-mini .navsep{height:1px;padding:0;margin:14px 6px;background:rgba(255,255,255,.12)}
html.side-mini .logout .lb-btn{justify-content:center;gap:0}
html.side-mini .sidetoggle svg{transform:rotate(180deg)}
.navsep{color:rgba(255,255,255,.4);font-size:11px;text-transform:uppercase;letter-spacing:.12em;margin:18px 12px 6px}
.logout{border-top:1px solid rgba(255,255,255,.1);padding-top:14px;margin-top:14px}
.who{display:flex;flex-direction:column;margin-bottom:10px}
.who b{font-size:14px}
.who span{font-size:12px;color:rgba(255,255,255,.5)}
.logout button{width:100%;background:rgba(255,255,255,.1);color:#fff;border:none;padding:9px;border-radius:9px;cursor:pointer;font-size:14px}
.logout button:hover{background:rgba(255,255,255,.18)}
.content{padding:30px 34px;max-width:1200px}

h1.page{font-size:26px;margin:0 0 4px}
.pagesub{color:var(--muted);margin:0 0 24px}

/* ── Forms ── */
label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin:14px 0 6px}
input,select,textarea{width:100%;max-width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;font:inherit;background:#fff}
input[type=date]{min-width:0}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}
.btn{display:inline-block;background:var(--accent);color:#fff;border:none;padding:11px 20px;border-radius:10px;font:inherit;font-weight:600;cursor:pointer}
.btn:hover{filter:brightness(1.08);text-decoration:none}
.btn--ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn--sm{padding:7px 12px;font-size:13px}

/* ── Flash messages ── */
.flash{padding:12px 16px;border-radius:10px;margin-bottom:16px;font-size:14px}
.flash--info{background:#eef2ff;color:#3730a3}
.flash--ok{background:#ecfdf5;color:#065f46}
.flash--err{background:#fef2f2;color:#991b1b}

/* ── Cards and grids ── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-bottom:26px}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.card .n{font-size:28px;font-weight:800;letter-spacing:-.02em}
.card .l{color:var(--muted);font-size:13px;margin-top:2px}

/* ── Tables ── */
.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.toolbar input[type=search]{max-width:280px}
.toolbar select{max-width:200px}
table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
th,td{text-align:left;padding:11px 14px;font-size:14px;border-bottom:1px solid var(--line)}
th{background:#faf9fe;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
tr:last-child td{border-bottom:none}
tr:hover td{background:#faf9fe}

/* ── Status badges ── */
.st{display:inline-block;padding:3px 10px;border-radius:100px;font-size:12px;font-weight:600;color:#fff}
.st--new{background:var(--new)} .st--warm{background:var(--warm)} .st--cold{background:var(--cold)}
.st--invalid{background:var(--invalid)} .st--refusal{background:var(--refusal)} .st--unidentified{background:var(--unidentified)}

/* ── Company card ── */
.chead{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:20px}
.chead h1{font-size:24px;margin:0 0 6px}
.grid2{display:grid;grid-template-columns:1.4fr 1fr;gap:22px;align-items:start}
.panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px;margin-bottom:18px}
.panel h2{font-size:15px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 14px}
.contact{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.contact .nm{font-weight:600}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.ctlist{display:flex;flex-direction:column;gap:8px}
.ct{border:1px solid var(--line);border-radius:12px;padding:10px 12px;transition:border-color .12s}
.ct:hover{border-color:#d9d2f0}
.ct-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ct-nm{font-weight:600;font-size:14px}
.ct-edit{background:none;border:1px solid var(--line);border-radius:8px;padding:2px 8px;cursor:pointer;font-size:12px;line-height:1.4;color:var(--muted)}
.ct-edit:hover{border-color:var(--accent)}
.ct-chips{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:5px;font-size:13px;color:var(--muted)}
.ct-form{margin-top:10px;border-top:1px solid var(--line);padding-top:10px;display:flex;flex-direction:column;gap:10px}
.ct-form[hidden]{display:none}
.sbadge{display:inline-block;padding:1px 8px;border-radius:100px;font-size:11px;font-weight:600;color:#fff;vertical-align:middle;white-space:nowrap}
.acwrap{position:relative;margin:8px 0}
.acwrap input{width:100%}
.acbox{position:absolute;left:0;right:0;top:100%;z-index:30;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.14);max-height:260px;overflow:auto;display:none;margin-top:2px}
.acbox.open{display:block}
.acitem{padding:8px 12px;cursor:pointer;font-size:13px;border-bottom:1px solid #f1f3f5}
.acitem:last-child{border-bottom:none}
.acitem:hover{background:#faf9fe}
.acitem .co{color:var(--muted);font-size:12px}
.ev-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:3px}
.ev-chan{font-weight:600;font-size:12px}
.ev-dir{font-size:11px;font-weight:600;border-radius:100px;padding:1px 8px}
.ev-dir.din{background:#e7f5ff;color:#1971c2}
.ev-dir.dout{background:#e6fcf5;color:#0ca678}
.ev-acc{font-size:11px;color:var(--muted);background:#f1f3f5;border-radius:100px;padding:1px 8px}
.ev-who{font-size:12px;color:var(--muted)}
.ev-who .arr{color:var(--accent);font-weight:700;margin:0 3px}
.ev-who .hnd{color:var(--accent);font-size:11px}
/* the conversation timeline, laid out like a chat */
.chat{display:flex;flex-direction:column;gap:8px}
.msg{display:flex}
.msg.m-more{display:none}
.emoji-btn{background:#fff;border:1px solid var(--line);border-radius:8px;cursor:pointer;font-size:16px;line-height:1;padding:4px 8px}
.emoji-wrap{position:relative}
.emoji-pop{position:absolute;right:0;top:100%;z-index:40;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.14);padding:6px;display:flex;flex-wrap:wrap;gap:2px;width:264px;margin-top:4px}
.emoji-pop[hidden]{display:none}
.emoji-i{background:none;border:0;cursor:pointer;font-size:20px;line-height:1;padding:4px;border-radius:6px}
.emoji-i:hover{background:#f1f3f5}
.rt-tools{display:flex;align-items:center;gap:4px;flex-wrap:wrap;border:1px solid var(--line);border-bottom:none;border-radius:10px 10px 0 0;padding:5px 8px;background:#faf9fe}
.rt-tools button{background:#fff;border:1px solid var(--line);border-radius:7px;min-width:30px;height:28px;cursor:pointer;font-size:13px;line-height:1;padding:0 7px;color:var(--ink)}
.rt-tools button:hover{background:#f1eefb}
.rt-tools .rt-sep{width:1px;height:18px;background:var(--line);margin:0 2px}
.rt-edit{min-height:120px;max-height:340px;overflow:auto;border:1px solid var(--line);border-radius:0 0 10px 10px;padding:11px 13px;background:#fff;font:inherit;line-height:1.45}
.rt-edit:focus{outline:none;border-color:var(--accent)}
.rt-edit:empty:before{content:attr(data-ph);color:var(--muted)}
.rt-edit a{color:var(--accent)}
.rt-edit ul,.rt-edit ol,.btext ul,.btext ol{margin:6px 0;padding-left:22px}
.btext a{color:var(--accent);text-decoration:underline}
.rate-form{display:flex;gap:6px;align-items:flex-end;flex-wrap:nowrap}
.rate-form .rl{display:flex;flex-direction:column;gap:2px;margin:0;font-size:10px;font-weight:600;color:var(--muted);white-space:nowrap}
.rate-form .rl i{font-style:normal}
.rate-form .rl input{width:56px;padding:4px 6px}
.acct-table{min-width:660px}
.acct-table td{vertical-align:top}
.limcell{min-width:250px}
.daychip{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:8px;padding:5px 9px;font-size:13px;cursor:pointer;background:#fff;user-select:none}
.daychip input{width:auto;margin:0}
tr.rec-indeal td{background:#fff4e6}
.crm-toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:9999;padding:9px 18px;border-radius:9px;color:#fff;font-size:13px;box-shadow:0 6px 20px rgba(0,0,0,.22);background:#0ca678;transition:opacity .4s}
.crm-toast.err{background:#c92a2a}
.crm-toast.out{opacity:0}
.rchart{display:flex;flex-direction:column;gap:7px;margin-top:8px}
.rbar{display:grid;grid-template-columns:180px 1fr 100px;align-items:center;gap:12px;text-decoration:none;color:inherit;padding:3px 6px;border-radius:8px}
a.rbar:hover{background:#f6f4fd}
.rbar--on{background:#efeafc;outline:1px solid var(--brand,#7c3aed)}
.rbar-lab{font-size:13px;font-weight:600}
.rbar-track{height:14px;background:#eceef1;border-radius:100px;overflow:hidden}
.rbar-fill{display:block;height:100%;border-radius:100px;min-width:2px;transition:width .3s}
.rbar-val{font-size:13px;text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:640px){.rbar{grid-template-columns:120px 1fr 74px;gap:8px}.rbar-lab{font-size:12px}}
.idtag{font-size:12px;color:var(--muted);background:#f1eefb;border-radius:6px;padding:1px 7px;font-variant-numeric:tabular-nums}
.logo-row{display:flex;align-items:center;gap:12px;margin:0 0 14px;flex-wrap:wrap}
.co-logo{max-height:56px;max-width:180px;object-fit:contain;border:1px solid var(--line);border-radius:10px;padding:6px;background:#fff}
.co-logo--empty{display:flex;align-items:center;justify-content:center;width:96px;height:56px;font-size:11px;color:var(--muted);background:#faf9fe;border-style:dashed}
.asv-hint{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}
.asv-ind{font-size:12px;font-weight:600;transition:opacity .2s}
.asv-ind.on{color:var(--muted)}
.asv-ind.ok{color:var(--ok)}
.asv-ind.err{color:var(--err)}
.msg.out{justify-content:flex-end}
.msg.in{justify-content:flex-start}
.msg.note{justify-content:center}
.bub{max-width:80%;border-radius:14px;padding:8px 12px;font-size:14px;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.msg.in .bub{background:#f1f3f5;border-bottom-left-radius:4px}
.msg.out .bub{background:#efe6fb;border-bottom-right-radius:4px}
.msg.note .bub{background:#fff8e6;max-width:92%}
.bfrom{font-size:11px;font-weight:600;color:var(--muted);margin-bottom:2px}
.bfrom .ci{font-size:13px}
.bfrom .hnd{color:var(--accent);font-weight:400}
.bsub{font-weight:600;font-size:13px;margin-bottom:2px}
.btext{white-space:pre-wrap;word-break:break-word;line-height:1.4}
.btext.clamp{max-height:150px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent)}
.btime{font-size:10px;color:var(--muted);margin-top:4px;text-align:right}
.chanpick{border:1px solid var(--line);border-radius:10px;padding:6px 12px;cursor:pointer;font-size:13px}
.chanpick:has(input:checked){border-color:var(--accent);background:#faf9fe}
.ev-body.clamp{max-height:80px;overflow:hidden;position:relative;cursor:pointer}
.ev-body.clamp::after{content:"▾ expand";position:absolute;right:0;bottom:0;font-size:11px;color:var(--accent);padding:0 4px 0 26px;background:linear-gradient(90deg,transparent,#fff 45%)}
.field{display:flex;justify-content:space-between;gap:10px;padding:5px 0;font-size:14px}
.field .k{color:var(--muted)}
.masked{font-family:monospace;color:var(--muted)}
.reveal{cursor:pointer;color:var(--accent);font-size:12px;border:1px dashed var(--accent);border-radius:6px;padding:1px 7px;background:none}
.tl{position:relative;padding-left:20px}
.tl .ev{position:relative;padding:0 0 16px 12px;border-left:2px solid var(--line)}
.tl .ev::before{content:"";position:absolute;left:-6px;top:3px;width:10px;height:10px;border-radius:50%;background:var(--accent)}
.tl .ev .meta{font-size:12px;color:var(--muted)}
.tag{display:inline-block;background:#f1eefb;color:var(--accent);border-radius:100px;padding:2px 10px;font-size:12px;margin:2px}
.dealrow td .ds{font-weight:600}
.pager{display:flex;gap:6px;margin-top:16px}
.pager a,.pager span{padding:7px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:13px}
.pager .cur{background:var(--accent);color:#fff;border-color:var(--accent)}
.muted{color:var(--muted)}
.od{color:var(--err)!important;font-weight:600}
.tscroll{overflow-x:auto;border-radius:14px}
table.wide{min-width:1180px}
table.wide th,table.wide td{padding:8px 10px;font-size:13px;vertical-align:top}
.ie--txt{background:#fff;border:1px solid var(--line)}
/* responsive form rows: two fields side by side, stacked on a phone */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.frow--amt{grid-template-columns:2fr 1fr}
.frow>div{min-width:0}                      /* so input[type=date] can shrink inside the grid */
.frow input,.frow select{min-width:0;max-width:100%}
@media(max-width:560px){.frow,.frow--amt{grid-template-columns:1fr}}
select.ie{min-width:108px}                 /* status and owner: wide enough that the text is not clipped */
table.wide td{white-space:nowrap}
/* the Contact column: compact, long names truncated */
td.ccontact{max-width:190px}
td.ccontact b,td.ccontact .muted{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:190px}
/* the comment field grows on focus */
.ccomment{width:150px;height:34px;resize:none;overflow:hidden;white-space:nowrap;line-height:1.4;transition:width .12s,height .12s}
.ccomment:focus{position:relative;z-index:6;width:360px;height:88px;white-space:normal;overflow:auto;box-shadow:0 10px 30px rgba(20,16,50,.16)}
/* the reveal button on a direct contact: toggles between Show and the value */
.creveal{border:1px solid var(--line);background:#faf9fe;border-radius:7px;padding:3px 10px;font-size:12px;cursor:pointer;color:var(--accent);white-space:nowrap;font-family:inherit}
.creveal:hover{border-color:var(--accent);background:#fff}
.creveal.shown{color:var(--ink);border-style:dashed}
/* the inline occasion editor */
.occell .tag{display:inline-flex;align-items:center;gap:4px;margin:1px 2px}
.occ-rm{border:none;background:none;color:var(--muted);cursor:pointer;font-size:13px;line-height:1;padding:0 1px}
.occ-rm:hover{color:var(--err)}
.occ-input{width:96px;padding:4px 8px;border:1px dashed var(--line);border-radius:7px;font:inherit;font-size:12px;background:#fff}
.occ-input:focus{outline:none;border-color:var(--accent);border-style:solid}
/* modal */
.modal{position:fixed;inset:0;background:rgba(15,17,23,.5);display:none;z-index:100;align-items:flex-start;justify-content:center;padding:56px 16px;overflow:auto}
.modal.open{display:flex}
.modalbox{background:#fff;border-radius:18px;padding:24px 26px;width:540px;max-width:100%;box-shadow:0 30px 80px rgba(0,0,0,.32)}
.mclose{background:none;border:none;font-size:26px;cursor:pointer;color:var(--muted);line-height:1}
.cval{font-size:13px;white-space:nowrap}
.cval a{color:var(--ink)}
/* multi-select filter: a dropdown of checkboxes */
.msel{position:relative;display:inline-block}
.msel>summary{list-style:none;cursor:pointer;padding:11px 32px 11px 13px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:14px;white-space:nowrap;position:relative;user-select:none}
.msel>summary::-webkit-details-marker{display:none}
.msel>summary::after{content:"▾";position:absolute;right:12px;color:var(--muted)}
.msel[open]>summary{border-color:var(--accent)}
.msel-pan{position:absolute;z-index:30;top:calc(100% + 4px);left:0;min-width:210px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 40px rgba(20,16,50,.16);padding:10px}
.msel-pan label{display:flex;align-items:center;gap:9px;padding:6px 8px;margin:0;border-radius:8px;font-size:14px;font-weight:400;color:var(--ink);text-transform:none;cursor:pointer}
.msel-pan label:hover{background:#faf9fe}
.msel-pan input{width:auto}
.msel-pan .apply{margin-top:8px;width:100%}

/* ── quick-filter chips ── */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.chip{padding:7px 14px;border-radius:100px;background:#fff;border:1px solid var(--line);font-size:13px;color:var(--ink)}
.chip:hover{text-decoration:none;border-color:var(--accent)}
.chip.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.chip--warn.on{background:var(--warn);border-color:var(--warn)}

/* ── inline-editable fields ── */
.ie{padding:5px 8px;border:1px solid transparent;border-radius:8px;font:inherit;font-size:13px;background:#faf9fe;max-width:100%;cursor:pointer}
.ie:hover{border-color:var(--line)}
.ie:focus{outline:none;border-color:var(--accent);background:#fff}
.ie--stage{color:#fff;font-weight:600;border:none;-webkit-appearance:none;appearance:none;padding-right:20px;min-width:138px}
.ie--stage option{color:var(--ink);background:#fff}
.ie--date{width:140px;background:#fff;border:1px solid var(--line)}
.ie.saving{opacity:.5}
.ie.saved{box-shadow:0 0 0 2px var(--ok)}

/* ── the bulk-action bar ── */
.bulkbar{display:flex;gap:10px;align-items:center;background:#1a1730;color:#fff;padding:10px 16px;border-radius:12px;margin-bottom:12px}
.bulkbar select{max-width:200px}
.bulkbar .btn{background:var(--accent2)}

/* ── dashboard: the pipeline bar ── */
.fbar{display:flex;gap:10px;flex-wrap:wrap}
.fbar-seg{flex:1;min-width:90px;text-align:center;background:#fff;border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:12px;padding:14px 8px}
.fbar-seg:hover{text-decoration:none;transform:translateY(-2px)}
.fbar-seg .n{display:block;font-family:inherit;font-weight:800;font-size:22px}
.fbar-seg .l{display:block;font-size:12px;color:var(--muted);margin-top:2px}

/* ── the board ── */
.kanban{display:flex;gap:14px;overflow-x:auto;padding-bottom:14px;align-items:flex-start}
.kcol{flex:0 0 250px;background:#f0eef8;border-radius:14px;min-height:200px}
.kcol.over{outline:2px dashed var(--accent);outline-offset:-2px}
.khead{display:flex;align-items:center;gap:8px;padding:14px 14px 10px;border-bottom:2px solid var(--line);font-size:14px}
.khead .kcount{margin-left:auto;background:#fff;border-radius:100px;padding:1px 9px;font-size:12px;color:var(--muted)}
.ksum{display:none;padding:2px 14px 8px;font-size:12.5px;font-weight:700;color:#16a34a}
.kanban.sums .ksum{display:block}
.sumtgl{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);cursor:pointer;white-space:nowrap}
.sumtgl input{width:auto}
.kdot{width:9px;height:9px;border-radius:50%}
.kbody{padding:10px;display:flex;flex-direction:column;gap:8px;min-height:60px}
.kcard{background:#fff;border:1px solid var(--line);border-radius:11px;padding:11px 12px;box-shadow:0 2px 6px rgba(20,16,50,.05);cursor:grab}
.kcard.drag{opacity:.4}
.kcard .kname{font-weight:600;font-size:14px;color:var(--ink);cursor:pointer}
.kcard:hover .kname{color:var(--accent)}
.kmeta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:6px;font-size:12px}
.knext{font-size:12px;color:var(--muted);margin-top:6px}
.kmore{text-align:center;font-size:12px;padding:6px}
.kcol .st{font-size:11px;padding:2px 8px}
.dstatus{display:inline-block;margin-top:6px;font-size:11px;font-weight:600;color:#5b45d6;background:#efeafd;border-radius:100px;padding:2px 9px}
.impnew{background:#e6f6ec;color:#15803d;border-radius:4px;padding:0 4px}
.ddocs{display:inline-block;margin-top:6px;font-size:11px;font-weight:600;color:#15803d;background:#e6f6ec;border-radius:100px;padding:2px 9px}
.stbadge{display:inline-block;color:#fff;font-size:11px;font-weight:600;border-radius:100px;padding:2px 9px;margin:2px 2px 2px 0;white-space:nowrap}
.stbadge:hover{text-decoration:none;filter:brightness(1.08)}
/* pipeline tabs */
.ptabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;border-bottom:1px solid var(--line);padding-bottom:10px}
.ptab{padding:8px 15px;border-radius:10px;font-size:14px;color:var(--ink);background:#fff;border:1px solid var(--line)}
.ptab:hover{text-decoration:none;border-color:var(--accent)}
.ptab.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.ptab .arch{font-size:10px;opacity:.7;text-transform:uppercase;letter-spacing:.05em}
.ptab--add{color:var(--muted);border-style:dashed}
/* view switcher */
.vtoggle{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.vtoggle a{padding:8px 14px;font-size:14px;color:var(--ink)}
.vtoggle a:hover{text-decoration:none;background:#faf9fe}
.vtoggle a.on{background:var(--accent);color:#fff}
/* stage editor */
.stlist{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}
.stitem{padding:16px 18px}
.strow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.stmove{display:flex;flex-direction:column;gap:2px}
.stmove .mv{width:26px;height:20px;border:1px solid var(--line);background:#fff;border-radius:6px;cursor:pointer;font-size:11px;line-height:1;color:var(--muted)}
.stmove .mv:disabled{opacity:.3;cursor:default}
.stform{display:flex;align-items:center;gap:8px;margin:0}
.clr{width:38px;height:38px;padding:2px;border:1px solid var(--line);border-radius:8px;cursor:pointer;background:#fff}
.stname{width:200px;font-weight:600}
.ststatuses{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.stinp{padding:3px 8px;border:1px solid var(--line);border-radius:7px;font:inherit;font-size:13px;width:130px;background:#fff}
.ststatuses .tag{display:inline-flex;align-items:center;gap:2px;background:#f1eefb;padding:2px 4px 2px 6px}

/* on a tablet the two-column cards stack; the sidebar stays */
@media(max-width:960px){.grid2{grid-template-columns:1fr}}
/* phones only (<=700px): the sidebar becomes a compact top bar with a collapsible menu */
@media(max-width:700px){
  html,body{overflow-x:hidden}
  body.app{display:block !important;width:100%;max-width:100%;overflow-x:hidden}
  body.app>*{width:100%;max-width:100%}
  .side{position:static !important;top:auto;z-index:auto;height:auto !important;width:100% !important;max-width:100%;
        overflow:hidden;flex-direction:column;padding:12px 16px !important;border-radius:0}
  .brand,.lb{display:block !important}
  .brandrow{justify-content:space-between;margin-bottom:0}
  .sidetoggle{width:38px;height:38px;flex:0 0 auto}
  .sidetoggle svg{transform:rotate(-90deg)}                 /* closed */
  .side.open .sidetoggle svg{transform:rotate(90deg)}       /* open */
  html.side-mini .sidetoggle svg{transform:rotate(-90deg)}  /* the mini state is ignored on mobile */
  .side nav,.side .logout{display:none}
  .side.open nav{display:flex !important;margin-top:12px}
  .side.open .logout{display:block !important}
  .side.open .who{display:flex !important;flex-direction:column}   /* name and role stack, so they do not run together */
  .side nav a{justify-content:flex-start !important;padding:12px 12px !important;gap:11px !important;font-size:16px}
  .navsep{height:auto !important;background:none !important;padding:0 !important;margin:14px 12px 6px !important}
  .content{width:100%;max-width:100%;overflow-x:hidden}
  .grid2{grid-template-columns:1fr}
  .cmpz{order:-1}                                            /* the composer sits above the history, so there is nothing to scroll past */
  .emoji-pop{width:min(264px,72vw)}
  table{min-width:0}
  /* ── general responsive fixes ── */
  .chead{flex-wrap:wrap;gap:12px}                            /* the heading and its action button wrap instead of overlapping */
  .chead h1,.page{font-size:20px;word-break:break-word}
  .ct-top{flex-wrap:wrap}                                    /* contact card: the name and the buttons take two rows when space runs out */
  .ct-nm{min-width:0;overflow-wrap:anywhere}
  .frow-mob{grid-template-columns:1fr !important}            /* inline two-column grids stack */
  .panel{padding:16px}
  /* every table scrolls horizontally inside itself, rather than dragging the page sideways */
  .content table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  .modalbox{padding:18px 16px}
  .chanpick{font-size:13px}
  /* the filter dropdowns fit the screen instead of being clipped on the right */
  .msel-pan{left:auto;right:0;min-width:0;width:max-content;max-width:calc(100vw - 32px)}
  .toolbar{flex-wrap:wrap;gap:8px}
  .toolbar input[type=search]{max-width:100%}
}
@media(max-width:560px){
  .content{padding:20px 16px}
  .chead h1,.page{font-size:19px}
  .rt-tools{flex-wrap:wrap}                                  /* the formatting toolbar wraps */
}

/* ── Campaign step attachments: order, preview, removal ── */
.att-box{margin:6px 0 4px}
.att-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.att-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--line);border-radius:10px;background:#faf9fe}
.att-row.dragging{opacity:.45}
.att-drag{cursor:grab;color:var(--muted);font-size:15px;line-height:1;user-select:none;flex:none}
.att-num{min-width:20px;text-align:right;font-weight:700;color:var(--accent);font-size:12px;flex:none}
.att-th{width:42px;height:42px;object-fit:cover;border-radius:8px;border:1px solid var(--line);background:#fff;flex:none}
.att-th.att-file{display:flex;align-items:center;justify-content:center;font-size:20px}
.att-name{flex:1;font-size:13px;word-break:break-all}
.att-move{display:flex;flex-direction:column;gap:2px;flex:none}
.att-move button{width:26px;height:18px;padding:0;line-height:1;border:1px solid var(--line);background:#fff;border-radius:6px;cursor:pointer;color:var(--ink);font-size:11px}
.att-move button:hover{border-color:var(--accent);color:var(--accent)}
.att-del{width:28px;height:28px;padding:0;border:1px solid var(--line);background:#fff;border-radius:8px;cursor:pointer;color:var(--err);font-weight:700;font-size:13px;flex:none}
.att-del:hover{background:#fef2f2;border-color:var(--err)}

/* Campaign step preview: both versions of the text, with a name and without */
.pv-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.pv-col{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fbfbfd;min-width:0}
.pv-head{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:6px}
.pv-subj{font-size:12px;font-weight:600;margin-bottom:6px;padding-bottom:6px;border-bottom:1px dashed var(--line);overflow-wrap:anywhere}
.pv-body{font-size:12.5px;line-height:1.5;max-height:220px;overflow:auto;overflow-wrap:anywhere;white-space:pre-wrap}
@media(max-width:900px){.pv-pair{grid-template-columns:1fr}}

/* ── Content calendar ──
   A seven-column grid rather than a table: a cell has to accept a dropped post and stretch to
   fit several posts on the same day. */
.mcal-head{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px}
.mcal-head div{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding-left:4px}
.mcal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.mcal-day{min-height:96px;border:1px solid var(--line);border-radius:12px;padding:6px;background:#fff;display:flex;flex-direction:column;gap:4px}
.mcal-day.off{background:#faf9fe;border-style:dashed}
.mcal-day.now{border-color:var(--accent);box-shadow:0 0 0 2px rgba(124,58,237,.12)}
.mcal-day.over{background:#f5f1ff;border-color:var(--accent)}
.mcal-num{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted);font-weight:600}
.mcal-add{display:inline}
.mcal-add button{border:none;background:none;color:var(--muted);cursor:pointer;font-size:14px;line-height:1;padding:0 2px;opacity:0}
.mcal-day:hover .mcal-add button{opacity:1}
.mcal-add button:hover{color:var(--accent)}
.mchip{display:block;font-size:11.5px;line-height:1.35;padding:4px 6px;border-radius:7px;background:#faf9fe;border-left:3px solid var(--muted);color:var(--ink);cursor:grab;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mchip:hover{background:#f1ecff;text-decoration:none}
.mchip.dragging{opacity:.45}
.mchip-pl{margin-right:3px}
@media(max-width:900px){.mcal-day{min-height:70px}.mchip{font-size:10.5px}}

/* ── Channel card in the post editor ── */
.smm-card{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:10px;position:relative;transition:border-color .12s,background .12s}
.smm-card.on{border-color:#d9d2f0;background:#fcfbff}
.smm-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.smm-on{display:flex;align-items:center;gap:8px;margin:0;font-size:13.5px;color:var(--ink);font-weight:400;cursor:pointer;text-transform:none;letter-spacing:0}
.smm-on input{width:auto;margin:0;flex:none}
.smm-ic{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;font-size:14px;flex:none}
.smm-body{margin-top:2px}
.smm-card:not(.on) .smm-body{opacity:.5}
.smm-meta{font-size:11px;margin-top:8px}
.smm-issues{margin-top:6px;display:flex;flex-direction:column;gap:4px}
.smm-issue{font-size:11.5px;line-height:1.4;padding:5px 8px;border-radius:8px;background:#fffbeb;color:#92400e}
.smm-issue.bad{background:#fef2f2;color:#991b1b}
.smm-own .rt-edit{min-height:70px}
.smm-card .asv-ind{position:absolute;right:12px;bottom:8px;font-size:11px}