/* Convoq product UI — bright, airy, distinct from the dark admin cockpit.
   Brand teal accent, soft neutrals, tactile cards. No external fonts (strict CSP). */
:root{
  --bg:#f4f6f9; --bg-grad-1:#eef9f6; --bg-grad-2:#f3f4fb;
  --surface:#ffffff; --line:#e5e9f0; --line-2:#d8deea;
  --ink:#101826; --muted:#5d6b80; --muted-2:#8a97aa;
  --teal:#34295B; --teal-deep:#241C40; --teal-soft:#efecf6;
  --indigo:#5b67f0; --amber:#e8932a; --rose:#e0506a; --violet:#8a5bf0;
  --radius:16px; --shadow:0 10px 30px rgba(16,24,38,.08);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans); color:var(--ink); font-size:15px; line-height:1.55;
  background:
    radial-gradient(900px 500px at 90% -10%, var(--bg-grad-1), transparent 60%),
    radial-gradient(800px 500px at -10% 110%, var(--bg-grad-2), transparent 55%),
    var(--bg);
  -webkit-font-smoothing:antialiased; min-height:100vh;
}
h1{font-size:26px; letter-spacing:-.4px; margin:0 0 6px}
h2{letter-spacing:-.3px}
.sub{color:var(--muted); margin:0 0 18px}
.hint{color:var(--muted-2); font-weight:400; font-size:12px}
.muted{color:var(--muted)}
a{color:var(--teal-deep); text-decoration:none}

/* Brand */
.brand{display:flex; align-items:center; gap:10px; font-weight:750; font-size:19px; letter-spacing:-.3px}
.brand-mark{display:grid; place-items:center; width:30px; height:30px; border-radius:9px;
  background:linear-gradient(135deg,var(--teal),var(--teal-deep)); color:#fff; font-weight:800;
  box-shadow:0 6px 16px rgba(52,41,91,.35)}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:11px 18px; border-radius:11px; font-weight:650; font-size:14.5px; cursor:pointer;
  border:1px solid transparent; font-family:inherit; transition:transform .06s ease, box-shadow .2s ease, background .2s}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(135deg,var(--teal),var(--teal-deep)); color:#fff;
  box-shadow:0 8px 20px rgba(52,41,91,.28)}
.btn.primary:hover{box-shadow:0 10px 26px rgba(52,41,91,.4)}
.btn.ghost{background:var(--surface); border-color:var(--line-2); color:var(--ink)}
.btn.ghost:hover{border-color:var(--teal); color:var(--teal-deep)}
.btn.sm{padding:7px 12px; font-size:13px; border-radius:9px}
.btn.block{width:100%}
.btn.google{background:#fff; border:1px solid var(--line-2); color:#1f2937; width:100%}
.btn.google:hover{border-color:#c3ccda}
.btn.google .g{display:grid; place-items:center; width:20px; height:20px; border-radius:50%;
  background:conic-gradient(from -45deg,#ea4335 0 25%,#fbbc05 0 50%,#34a853 0 75%,#4285f4 0); color:#fff;
  font-weight:800; font-size:12px; -webkit-text-stroke:0}

label{display:grid; gap:6px; font-size:13px; color:var(--muted); font-weight:600; margin-bottom:14px}
input[type=text],input[type=email],input[type=password],textarea{
  width:100%; padding:11px 13px; border:1px solid var(--line-2); border-radius:11px;
  font-size:15px; font-family:inherit; color:var(--ink); background:#fff}
textarea{resize:vertical}
input:focus,textarea:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(52,41,91,.16)}

.alert{padding:11px 14px; border-radius:11px; font-size:13.5px; margin-bottom:14px}
.alert.err{background:#fdecef; border:1px solid #f6c9d2; color:#a3263c}
.alert.ok{background:#eafaf0; border:1px solid #bfe6cf; color:#1a5c3a}
.alert.wide{max-width:none}

/* ---------- Centered card pages ---------- */
body.centered{display:grid; place-items:center; padding:32px 18px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:22px;
  box-shadow:var(--shadow); padding:34px 32px; width:100%; max-width:540px}
.card.narrow{max-width:430px; text-align:center}
.card .brand{justify-content:center; margin-bottom:14px}
.actions{display:flex; gap:12px; justify-content:flex-end; margin-top:8px}
.actions.stack{flex-direction:column}
.step{font-size:12px; font-weight:700; color:var(--teal-deep); text-transform:uppercase; letter-spacing:1px; margin-bottom:6px}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.urlnote{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; color:var(--muted);
  background:#f6f8fb; border:1px dashed var(--line-2); padding:9px 12px; border-radius:10px; margin:-2px 0 16px}
.switch{margin-top:18px; color:var(--muted); font-size:14px}
.invite-links{list-style:none; padding:0; margin:0 0 18px; display:grid; gap:8px}
.invite-links li{background:#f6f8fb; border:1px solid var(--line); border-radius:10px; padding:9px 12px; font-size:12.5px}
.invite-links .il-email{font-weight:700; margin-right:8px}
.invite-links code{font-family:ui-monospace,Menlo,Consolas,monospace; color:var(--teal-deep); word-break:break-all}

/* ---------- Auth split layout ---------- */
body.auth{display:grid; place-items:center; min-height:100vh; padding:24px}
.auth-wrap{display:grid; grid-template-columns:1fr 1fr; max-width:940px; width:100%;
  background:var(--surface); border:1px solid var(--line); border-radius:24px; overflow:hidden; box-shadow:var(--shadow)}
.auth-panel{padding:42px 40px}
.auth-panel h1{margin-top:12px}
.divider{display:flex; align-items:center; gap:12px; color:var(--muted-2); font-size:12px; margin:18px 0}
.divider::before,.divider::after{content:""; flex:1; height:1px; background:var(--line)}
.auth-art{background:linear-gradient(150deg,var(--teal-deep),#34295B 55%,#4a3d78);
  color:#fff; padding:42px 36px; display:flex; align-items:center}
.art-card h2{font-size:22px; margin:0 0 10px}
.art-card p{color:rgba(255,255,255,.85); margin:0 0 22px}
.art-stack{display:grid; gap:12px}
.mini-card{display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.2); border-radius:14px; padding:12px 14px; backdrop-filter:blur(6px)}
.mini-card strong{display:block} .mini-card em{font-style:normal; font-size:12.5px; color:rgba(255,255,255,.8)}
.mc-ava{display:grid; place-items:center; width:38px; height:38px; border-radius:11px;
  background:rgba(255,255,255,.22); font-weight:800}

/* ---------- Discovery ---------- */
body.discovery{padding:0}
.disc-top{display:flex; align-items:center; justify-content:space-between; padding:18px 28px;
  background:rgba(255,255,255,.7); border-bottom:1px solid var(--line); backdrop-filter:blur(8px); position:sticky; top:0; z-index:5}
.disc-user{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--muted)}
.disc-wrap{max-width:1040px; margin:0 auto; padding:40px 28px 70px}
.disc-head{margin-bottom:26px}
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px}
.ws-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; display:flex; flex-direction:column; gap:16px; box-shadow:0 2px 8px rgba(16,24,38,.04);
  transition:transform .14s ease, box-shadow .2s ease, border-color .2s}
.ws-card:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--line-2)}
.ws-logo{display:grid; place-items:center; width:54px; height:54px; border-radius:15px;
  background:linear-gradient(135deg,var(--teal),var(--teal-deep)); color:#fff; font-weight:800; font-size:24px;
  box-shadow:0 8px 18px rgba(52,41,91,.3)}
.ws-body h3{margin:0 0 6px; font-size:18px; letter-spacing:-.3px}
.ws-meta{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--muted)}
.dot-sep{color:var(--muted-2)}
.ws-actions{margin-top:auto; display:flex; align-items:center; gap:14px}
.leave-form{margin:0}
.link-danger{background:none; border:none; color:var(--rose); font-size:13px; cursor:pointer; font-family:inherit; padding:0}
.link-danger:hover{text-decoration:underline}

/* role badges */
.role-badge{font-size:11.5px; font-weight:750; padding:3px 9px; border-radius:20px; letter-spacing:.2px}
.r-owner{background:#eafaf3; color:#0a8a5f} .r-admin{background:#eef0ff; color:#4a55d6}
.r-manager{background:#fff3e2; color:#b9711a} .r-member{background:#eef2f7; color:#566377}
.r-guest{background:#f3ecff; color:#6e3fd0}

/* create card */
.ws-card.create{align-items:flex-start; justify-content:center; border:2px dashed var(--line-2);
  background:transparent; box-shadow:none; color:var(--muted)}
.ws-card.create:hover{border-color:var(--teal); color:var(--teal-deep)}
.ws-logo.plus{background:#eef2f7; color:var(--muted); box-shadow:none; font-size:30px}
.ws-card.create:hover .ws-logo.plus{background:var(--teal-soft); color:var(--teal-deep)}

/* ---------- Workspace home shell ---------- */
body.wsapp{padding:0}
.ws-shell{display:grid; grid-template-columns:72px 1fr; min-height:100vh}
.ws-rail{background:#0c1622; display:flex; flex-direction:column; align-items:center; gap:14px; padding:18px 0}
.rail-switch{display:grid; place-items:center}
.rail-logo{display:grid; place-items:center; width:44px; height:44px; border-radius:14px;
  background:linear-gradient(135deg,var(--teal),var(--teal-deep)); color:#fff; font-weight:800; font-size:20px}
.rail-switch.ghost{color:#5b6b80; font-size:22px}
.ws-bar{display:flex; align-items:center; justify-content:space-between; padding:16px 26px; border-bottom:1px solid var(--line); background:#fff}
.ws-bar strong{margin-right:10px}
.ws-bar-right{display:flex; align-items:center; gap:12px; font-size:13.5px}
.ws-empty{display:grid; place-items:center; text-align:center; padding:90px 20px; gap:6px}
.we-icon{display:grid; place-items:center; width:64px; height:64px; border-radius:18px; margin-bottom:10px;
  background:linear-gradient(135deg,var(--teal),var(--teal-deep)); color:#fff; font-weight:800; font-size:28px}
.ws-empty p{color:var(--muted); max-width:420px; margin:4px 0 18px}

@media (max-width:780px){
  .auth-wrap{grid-template-columns:1fr} .auth-art{display:none}
  .row2{grid-template-columns:1fr} .ws-shell{grid-template-columns:56px 1fr}
}

.brand-logo{width:30px;height:30px;border-radius:9px;display:block;object-fit:contain;background:#fff}
.we-icon img{width:100%;height:100%;border-radius:18px;display:block;object-fit:contain}

/* Engaging signup panel */
.art-stats{display:flex;gap:18px;margin:22px 0 18px}
.art-stats .stat{display:flex;flex-direction:column}
.art-stats .num{font-size:26px;font-weight:800;letter-spacing:-.5px;line-height:1}
.art-stats .lbl{font-size:12px;color:rgba(255,255,255,.78);margin-top:4px}
.art-features{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.art-features span{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
  border-radius:20px;padding:6px 12px;font-size:12.5px}
.art-quote{margin:0;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  border-radius:14px;padding:16px 18px;backdrop-filter:blur(6px)}
.art-quote .stars{color:#ffd25e;letter-spacing:2px;font-size:14px;margin-bottom:8px}
.art-quote blockquote{margin:0 0 10px;font-size:14.5px;line-height:1.5}
.art-quote figcaption{font-size:12.5px;color:rgba(255,255,255,.82);font-weight:600}
.art-quote figcaption span{font-weight:400}

/* ===== Workspace chat shell ===== */
body.ws{margin:0;height:100vh;overflow:hidden;background:#f4f6f9}
.app-shell{display:grid;grid-template-columns:64px 248px 1fr;height:100vh}
.app-shell:has(#thread:not([hidden])){grid-template-columns:64px 248px 1fr 360px}

.rail{background:#1d1430;display:flex;flex-direction:column;align-items:center;gap:14px;padding:14px 0}
.rail-ws{width:42px;height:42px;border-radius:13px;background:var(--brand,#34295B);color:#fff;display:grid;
  place-items:center;font-weight:800;text-decoration:none;font-size:18px}
.rail-ico{width:42px;height:42px;border-radius:13px;background:rgba(255,255,255,.08);color:#fff;display:grid;
  place-items:center;text-decoration:none;font-size:16px;transition:.15s}
.rail-ico:hover{background:rgba(255,255,255,.18)}
.rail-ico.bottom{margin-top:auto;font-weight:700}

.sidebar{background:#241a3a;color:#cfc7df;display:flex;flex-direction:column;overflow-y:auto}
.side-head{display:flex;align-items:center;gap:8px;padding:16px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.side-head strong{color:#fff;font-size:15px}
.role-chip{font-size:10px;text-transform:uppercase;letter-spacing:.5px;background:rgba(255,255,255,.12);
  color:#e7e2f2;padding:2px 7px;border-radius:20px}
.side-section{padding:12px 8px}
.side-section-h{display:flex;align-items:center;justify-content:space-between;padding:4px 10px;color:#9b91b4;
  font-size:12px;text-transform:uppercase;letter-spacing:.6px}
.mini-btn{background:transparent;border:0;color:#9b91b4;font-size:18px;cursor:pointer;line-height:1;border-radius:6px;width:24px;height:24px}
.mini-btn:hover{background:rgba(255,255,255,.12);color:#fff}
.chan-list{list-style:none;margin:6px 0 0;padding:0}
.chan{display:flex;align-items:center;gap:7px;padding:6px 10px;border-radius:8px;color:#cfc7df;text-decoration:none;font-size:14.5px}
.chan:hover{background:rgba(255,255,255,.07)}
.chan.active{background:var(--brand,#34295B);color:#fff}
.chan .hash{opacity:.7;width:14px;text-align:center}
.chan .cname{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chan .badge{background:#fff;color:#241a3a;font-size:11px;font-weight:800;border-radius:20px;padding:1px 7px;min-width:18px;text-align:center}
.chan.active .badge{background:rgba(255,255,255,.25);color:#fff}
.newchan-form{padding:10px;display:flex;flex-direction:column;gap:8px}
.newchan-form input[type=text]{background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.12);color:#fff;
  border-radius:8px;padding:8px 10px;font-size:13px}
.newchan-form input::placeholder{color:#8a80a3}
.newchan-form .ck{font-size:12.5px;display:flex;align-items:center;gap:6px;color:#b6acce}
.btn.sm{padding:7px 12px;font-size:13px}

.chat{display:flex;flex-direction:column;height:100vh;background:#fff;min-width:0}
.chat-top{display:flex;align-items:center;justify-content:space-between;padding:13px 20px;border-bottom:1px solid #eef1f5}
.ct-title{display:flex;align-items:baseline;gap:8px;min-width:0}
.ct-title .hash{color:#9aa3b2}
.ct-title strong{font-size:16px}
.ct-desc{color:#8a97aa;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
.ct-actions{display:flex;align-items:center;gap:12px}
.members{color:#8a97aa;font-size:13px}
.btn.ghost{background:#fff;border:1px solid #d7dde6;color:#101826;text-decoration:none}
.btn.ghost:hover{background:#f4f6f9}

.messages{flex:1;overflow-y:auto;padding:16px 20px 8px}
.chan-intro{padding:24px 0 16px;border-bottom:1px solid #f1f3f7;margin-bottom:12px}
.chan-intro .ci-emoji{width:52px;height:52px;border-radius:14px;background:var(--brand,#34295B);color:#fff;
  display:grid;place-items:center;font-size:24px;font-weight:800;margin-bottom:12px}
.chan-intro h2{margin:0 0 4px;font-size:22px}
.chan-intro p{margin:0;color:#6b7686}

.msg{display:flex;gap:11px;padding:8px 6px;border-radius:10px}
.msg:hover{background:#f8fafc}
.msg:hover .msg-tools{opacity:1}
.ava{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,#34295B,#241C40);color:#fff;
  display:grid;place-items:center;font-weight:700;flex:none}
.msg-main{min-width:0;flex:1}
.msg-head{display:flex;align-items:baseline;gap:8px}
.msg-head .author{font-weight:700;font-size:14.5px}
.msg-head .time{color:#9aa3b2;font-size:12px}
.msg .body{font-size:14.5px;line-height:1.5;color:#1b2330;word-wrap:break-word}
.msg .body a{color:var(--brand,#34295B)}
.reacts{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.react{background:#eef2f7;border:1px solid #e0e6ee;border-radius:20px;padding:2px 9px;font-size:12.5px;cursor:pointer}
.react:hover{border-color:var(--brand,#34295B)}
.msg-tools{display:flex;gap:4px;margin-top:5px;opacity:0;transition:.12s}
.msg-tools .tool{background:#fff;border:1px solid #e4e9f0;border-radius:7px;padding:3px 9px;font-size:12.5px;cursor:pointer;color:#41506a}
.msg-tools .tool:hover{background:#f1f4f9}

.composer{display:flex;gap:10px;padding:14px 20px;border-top:1px solid #eef1f5;align-items:flex-end}
.composer textarea{flex:1;resize:none;border:1px solid #d7dde6;border-radius:12px;padding:11px 14px;font:inherit;
  font-size:14.5px;line-height:1.4;max-height:180px;outline:none}
.composer textarea:focus{border-color:var(--brand,#34295B);box-shadow:0 0 0 3px rgba(52,41,91,.12)}

.thread{background:#fff;border-left:1px solid #eef1f5;display:flex;flex-direction:column;height:100vh}
.thread-top{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #eef1f5}
.thread-top .x{background:none;border:0;font-size:22px;cursor:pointer;color:#8a97aa;line-height:1}
.thread-body{flex:1;overflow-y:auto;padding:12px 14px}
.thread-parent-msg{border-bottom:1px solid #eef1f5;padding-bottom:12px;margin-bottom:6px}
.thread .loading{color:#9aa3b2;padding:18px;text-align:center}
.thread-composer{padding:12px 14px}

@media(max-width:900px){
  .app-shell{grid-template-columns:56px 1fr}
  .app-shell .sidebar{display:none}
  .app-shell:has(#thread:not([hidden])){grid-template-columns:56px 1fr}
}

/* DM sidebar + headers */
.dm-ava{width:22px;height:22px;border-radius:7px;background:linear-gradient(135deg,#34295B,#241C40);color:#fff;
  display:inline-grid;place-items:center;font-size:11px;font-weight:700;flex:none}
.dm-ava.sm{width:30px;height:30px;border-radius:9px;font-size:13px}
.dm-ava.lg{width:52px;height:52px;border-radius:14px;font-size:22px;background:linear-gradient(135deg,#34295B,#241C40)}
.chan.dm{gap:9px}
.side-empty{list-style:none;color:#8a80a3;font-size:12.5px;padding:4px 12px}
.newdm-panel{padding:6px 8px;display:flex;flex-direction:column;gap:2px}
.dm-pick{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;color:#cfc7df;text-decoration:none;font-size:14px}
.dm-pick:hover{background:rgba(255,255,255,.08)}
.ct-title .dm-ava.sm{margin-right:2px}

/* Huddles */
.chat{position:relative}
.huddle-btn{display:inline-flex;align-items:center;gap:5px}
.btn.danger{background:#c0271f;border:1px solid #c0271f;color:#fff}
.btn.danger:hover{background:#a51d16}
.huddle-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:linear-gradient(90deg,#fff0ef,#ffe6e4);border-bottom:1px solid #f4c9c6;padding:10px 20px}
.huddle-banner .hb-text{color:#7a1410;font-size:14px}
.huddle-stage{position:absolute;inset:0;z-index:30;background:#0d0a16;display:flex;flex-direction:column}
.huddle-bar{display:flex;align-items:center;gap:10px;padding:10px 16px;color:#fff;background:#161021;border-bottom:1px solid rgba(255,255,255,.08)}
.huddle-bar > span{font-weight:600;margin-right:auto}
.huddle-frame{flex:1;min-height:0}
.huddle-frame iframe{width:100%;height:100%;border:0;display:block}

/* Presence dots */
.dm-ava{position:relative}
.pdot{position:absolute;right:-2px;bottom:-2px;width:10px;height:10px;border-radius:50%;border:2px solid #241a3a;box-sizing:border-box}
.pdot.on{background:#2bb673}
.pdot.off{background:#7d7390}
.ct-title .dm-ava .pdot{border-color:#fff}
.chat-top .pdot.on{background:#2bb673}

/* Attachments + composer file button */
.attach-btn{display:grid;place-items:center;width:40px;height:40px;border:1px solid #d7dde6;border-radius:12px;
  cursor:pointer;font-size:18px;color:#41506a;flex:none;user-select:none}
.attach-btn:hover{background:#f4f6f9;border-color:var(--brand,#34295B)}
.attach-btn.busy{opacity:.5;pointer-events:none}
.att-img-link{display:inline-block;margin-top:6px}
.att-img{max-width:340px;max-height:280px;border-radius:12px;border:1px solid #e4e9f0;display:block}
.att-file{display:inline-flex;align-items:center;gap:8px;margin-top:6px;background:#f4f6f9;border:1px solid #e0e6ee;
  border-radius:10px;padding:8px 12px;text-decoration:none;color:#1b2330;font-size:13.5px;max-width:340px}
.att-file:hover{border-color:var(--brand,#34295B)}
.att-file span{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.att-file em{color:#8a97aa;font-style:normal;font-size:12px}

/* ===== CRM ===== */
.rail-ico.active{background:var(--brand,#34295B);color:#fff}
.crm-side{padding:0}
.crm-nav{padding:12px 10px;display:flex;flex-direction:column;gap:3px}
.crm-link{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:9px;color:#cfc7df;text-decoration:none;font-size:14.5px}
.crm-link:hover{background:rgba(255,255,255,.07)}
.crm-link.active{background:var(--brand,#34295B);color:#fff}
.crm-stats{margin:8px 12px;padding:12px;background:rgba(0,0,0,.18);border-radius:12px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.crm-stats .cs{display:flex;flex-direction:column}
.crm-stats .n{font-size:17px;font-weight:800;color:#fff;line-height:1.1}
.crm-stats .l{font-size:11px;color:#9b91b4;margin-top:2px}
.back-chat{display:block;margin:6px 16px;color:#9b91b4;text-decoration:none;font-size:13px}
.back-chat:hover{color:#fff}

.crm-main{background:#f4f6f9;height:100vh;overflow-y:auto;padding:22px 26px}
.crm-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
.crm-top h1{margin:0;font-size:23px}
.crm-top .sub{margin:3px 0 0;color:#6b7686;font-size:13.5px}
.crm-top-actions{display:flex;align-items:center;gap:10px}
.crumb{color:var(--brand,#34295B);text-decoration:none;font-size:13px;display:inline-block;margin-bottom:4px}
.search-form input{border:1px solid #d7dde6;border-radius:10px;padding:9px 13px;font-size:14px;min-width:230px;outline:none}
.search-form input:focus{border-color:var(--brand,#34295B)}

/* slide-over forms */
.card-form{background:#fff;border:1px solid #e6eaf0;border-radius:14px;padding:16px 18px;margin-bottom:18px;
  box-shadow:0 6px 22px rgba(20,30,50,.06)}
.card-form.inline{box-shadow:none;margin-top:14px}
.card-form label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:#41506a;font-weight:600}
.card-form input,.card-form select,.card-form textarea{border:1px solid #d7dde6;border-radius:9px;padding:9px 11px;font:inherit;font-size:14px;outline:none;font-weight:400}
.card-form input:focus,.card-form select:focus,.card-form textarea:focus{border-color:var(--brand,#34295B)}
.ff{margin-bottom:12px}
.ff-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:12px}
.ff-actions{margin-top:12px}

/* pipeline board */
.board{display:flex;gap:14px;align-items:flex-start;overflow-x:auto;padding-bottom:14px}
.col{background:#eef1f6;border-radius:14px;width:270px;min-width:270px;display:flex;flex-direction:column;max-height:calc(100vh - 170px)}
.col.won{background:#e7f6ee}.col.lost{background:#f6eaea}
.col-h{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid rgba(0,0,0,.06)}
.col-name{font-weight:700;font-size:13.5px}
.col-meta{font-size:11.5px;color:#6b7686}
.col-body{padding:10px;display:flex;flex-direction:column;gap:9px;overflow-y:auto;min-height:60px}
.col-body.over{outline:2px dashed var(--brand,#34295B);outline-offset:-6px;border-radius:10px}
.deal{background:#fff;border:1px solid #e3e8ef;border-radius:11px;padding:11px 12px;cursor:grab;box-shadow:0 1px 2px rgba(20,30,50,.05)}
.deal:active{cursor:grabbing}
.deal.dragging{opacity:.5}
.deal-title{font-weight:600;font-size:14px;line-height:1.3}
.deal-val{color:#1a7f43;font-weight:700;font-size:13px;margin-top:4px}
.deal-meta{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.deal-contact{color:var(--brand,#34295B);text-decoration:none;font-size:12.5px}
.deal-owner{width:22px;height:22px;border-radius:7px;background:linear-gradient(135deg,#34295B,#241C40);color:#fff;display:inline-grid;place-items:center;font-size:11px;font-weight:700}

/* contacts table */
.crm-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid #e6eaf0;border-radius:14px;overflow:hidden}
.crm-table th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;color:#8a97aa;padding:11px 14px;border-bottom:1px solid #eef1f5;background:#fafbfc}
.crm-table td{padding:11px 14px;border-bottom:1px solid #f1f3f7;font-size:14px}
.crm-table tr.row-link{cursor:pointer}
.crm-table tr.row-link:hover td{background:#f8fafc}
.crm-table td a{color:#1b2330;text-decoration:none;font-weight:600}
.crm-table td a:hover{color:var(--brand,#34295B)}
.t-ava{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,#34295B,#241C40);color:#fff;font-size:12px;font-weight:700;vertical-align:middle;margin-right:6px}

/* contact detail */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.contact-card,.contact-deals{background:#fff;border:1px solid #e6eaf0;border-radius:14px;padding:18px 20px}
.contact-card h3,.contact-deals h3{margin:0 0 10px;font-size:14px}
.contact-card dl{display:grid;grid-template-columns:90px 1fr;gap:6px 10px;margin:0 0 8px;font-size:14px}
.contact-card dt{color:#8a97aa}
.notes{font-size:14px;color:#37404f;line-height:1.5}
.delete-row{margin-top:14px}
.cd-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cd-deal{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid #f1f3f7}
.cd-stage{margin-left:8px;font-size:11.5px;color:#8a97aa;background:#f1f4f9;padding:2px 8px;border-radius:20px}
.cd-val{font-weight:700;font-size:13.5px}
.cd-status{font-size:11px;padding:2px 8px;border-radius:20px;margin-left:6px;font-weight:600}
.cd-status.open{background:#eef4ff;color:#2456b8}.cd-status.won{background:#e7f6ee;color:#1a7f43}.cd-status.lost{background:#f6eaea;color:#b02a22}
.crm-empty{background:#fff;border:1px dashed #d7dde6;border-radius:14px;padding:26px;text-align:center;color:#6b7686}
.crm-empty.sm{padding:14px;text-align:left}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr}}

/* success alert */
.alert.ok{background:#eafaf0;border:1px solid #bfe6cf;color:#1a5c3a;border-radius:10px;padding:11px 14px;font-size:14px;margin-bottom:14px}

/* Search in sidebar */
.side-search{padding:8px 12px;position:relative}
.side-search input{width:100%;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.12);
  color:#fff;border-radius:9px;padding:8px 11px;font-size:13.5px;outline:none}
.side-search input::placeholder{color:#8a80a3}
.side-search input:focus{border-color:var(--brand,#34295B)}
.search-results{position:absolute;left:12px;right:12px;top:46px;background:#fff;border:1px solid #e4e1ec;
  border-radius:10px;box-shadow:0 14px 34px -12px rgba(15,12,22,.4);max-height:360px;overflow-y:auto;z-index:40}
.sr-item{padding:10px 12px;border-bottom:1px solid #f1f3f7;cursor:default}
.sr-item:hover{background:#f8fafc}
.sr-meta{font-size:11.5px;color:#8a97aa;margin-bottom:3px;font-weight:600}
.sr-body{font-size:13px;color:#1b2330;line-height:1.4}
.sr-empty{padding:14px;color:#8a97aa;font-size:13px;text-align:center}

/* edited indicator */
.edited{color:#9aa3b2;font-size:11px}

/* edit box */
.edit-box{margin-top:6px}
.edit-ta{width:100%;border:1px solid var(--brand,#34295B);border-radius:9px;padding:8px 11px;font:inherit;
  font-size:14px;resize:vertical;min-height:44px;outline:none}
.edit-actions{display:flex;gap:8px;margin-top:6px}
.danger-tool{color:#c0271f!important}
.danger-tool:hover{background:#fdecea!important}