/* ==========================================================================
   Avato — teal design system
   Extracted from the public/app.html prototype <style> block so every
   module view can reuse the same classes. Plus Jakarta Sans + Lucide icons.
   ========================================================================== */

:root{
  --bg:#eceef6; --panel:#fff; --ink:#1f2230; --muted:#8a8fa3; --line:#eef0f5; --line2:#e4e7ef;
  --accent:#13b3a0; --accent-ink:#0e8e7f; --accent-soft:#d7f2ec; --accent-soft2:#eafaf6;
  --red:#f0584f; --red-soft:#fdeceb; --ctrl:#2c2e3a;
  --blue:#5b8def; --amber:#e8943a; --amber-soft:#fdf1e3; --green:#22b07d;
  --r:22px; --r2:16px; --r3:12px;
  --shadow:0 10px 40px rgba(30,30,70,.07); --shadow2:0 4px 18px rgba(30,30,70,.06);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer}
[data-lucide]{width:18px;height:18px;stroke-width:2}
.app{display:flex;min-height:100vh;padding:14px;gap:14px}

/* SIDEBAR (light, minimal) */
.side{width:228px;flex-shrink:0;background:var(--panel);border-radius:var(--r);display:flex;flex-direction:column;position:sticky;top:14px;height:calc(100vh - 28px);box-shadow:var(--shadow2);overflow:hidden}
.brand{display:flex;align-items:center;gap:10px;padding:22px 22px 16px;font-weight:800;font-size:19px}
.brand .logo{width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,var(--accent),#3ddbc6);display:flex;align-items:center;justify-content:center;color:#fff}
.brand small{font-weight:500;font-size:10.5px;color:var(--muted);display:block;letter-spacing:.02em}
.nav{padding:8px 12px;display:flex;flex-direction:column;gap:3px;flex:1;overflow-y:auto}
.nav-label{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:14px 12px 6px;font-weight:700}
.nav-item{display:flex;align-items:center;gap:12px;padding:10px 13px;border-radius:12px;font-size:13.5px;font-weight:600;color:#6b7088;border:none;background:none;width:100%;text-align:left;transition:.14s;position:relative}
.nav-item:hover{background:var(--accent-soft2);color:var(--ink)}
.nav-item.active{background:var(--accent-soft);color:var(--accent-ink)}
.nav-item.active::before{content:'';position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:4px;height:22px;background:var(--accent);border-radius:0 4px 4px 0}
.nav-item [data-lucide]{width:18px;height:18px;flex-shrink:0}
.nav-label-text{flex:1}
.side-foot{padding:14px;margin:0 12px 12px;background:var(--accent-soft2);border-radius:var(--r2)}
.plan small{font-size:11px;color:var(--muted)}
.plan .bar{height:6px;background:#fff;border-radius:6px;margin:8px 0 6px;overflow:hidden}
.plan .bar i{display:block;height:100%;width:40%;background:var(--accent);border-radius:6px}
.upgrade{color:var(--accent-ink);font-size:12px;font-weight:700;margin-top:8px;display:inline-flex;gap:6px;align-items:center}
.engine{font-size:10px;color:var(--muted);margin-top:10px;line-height:1.6}.engine b{color:#5a6076}

/* MAIN */
main{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px}
.topbar{background:var(--panel);border-radius:var(--r);min-height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;box-shadow:var(--shadow2);position:sticky;top:14px;z-index:50}
.topbar h2{font-size:17px;font-weight:800;letter-spacing:-.01em}.topbar .sub{font-size:12.5px;color:var(--muted);font-weight:500;margin-top:1px}
.btn{border:1px solid var(--line2);background:#fff;padding:10px 16px;border-radius:12px;font-size:13px;font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:7px;transition:.14s}
.btn:hover{border-color:var(--accent);color:var(--accent-ink)}
.btn-primary{background:var(--accent);color:#fff;border:none}.btn-primary:hover{background:var(--accent-ink);color:#fff}
.btn [data-lucide]{width:16px;height:16px}
.btn-sm{padding:7px 12px;font-size:12px}
.row{display:flex;gap:10px;align-items:center}
.panel{background:var(--panel);border-radius:var(--r);box-shadow:var(--shadow2);padding:24px 26px}
.screen{display:none;animation:fade .25s}.screen.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.tags{display:flex;gap:5px;flex-wrap:wrap}
.tag{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:100px}
.t-voice{background:var(--accent-soft);color:var(--accent-ink)}.t-screen{background:#e7eefe;color:var(--blue)}.t-form{background:var(--amber-soft);color:var(--amber)}
.section-h{display:flex;align-items:center;justify-content:space-between;margin:0 0 16px}
.section-h h3{font-size:16px;font-weight:800}
.callout{background:var(--accent-soft2);border:1px solid var(--accent-soft);border-radius:var(--r2);padding:14px 16px;font-size:13px;color:var(--accent-ink);line-height:1.6;margin-top:16px}
.callout.warn{background:var(--amber-soft);border-color:#f6dcc0;color:#a9641f}
/* photo gradients (fallback) */
.g1{background:linear-gradient(135deg,#1e3a5f,#2c5282)}.g2{background:linear-gradient(135deg,#134e4a,#0f766e)}
.g3{background:linear-gradient(135deg,#065f46,#059669)}.g4{background:linear-gradient(135deg,#7c2d12,#c2410c)}
.g5{background:linear-gradient(135deg,#312e81,#4f46e5)}.g6{background:linear-gradient(135deg,#0f766e,#14b8a6)}
.g7{background:linear-gradient(135deg,#713f12,#b45309)}.g8{background:linear-gradient(135deg,#1e1b4b,#3730a3)}

/* ONBOARDING */
.ob{max-width:560px;margin:5vh auto;text-align:center}
.ob .step-dots{display:flex;gap:6px;justify-content:center;margin-bottom:26px}
.ob .step-dots i{width:28px;height:5px;border-radius:5px;background:var(--line2)}.ob .step-dots i.on{background:var(--accent)}
.ob h1{font-size:32px;font-weight:800;letter-spacing:-.02em}.ob p{color:var(--muted);margin-top:12px;font-size:15px;line-height:1.65}
.urlbox{margin-top:26px;display:flex;gap:8px;background:#fff;border:1px solid var(--line2);border-radius:16px;padding:8px 8px 8px 18px;box-shadow:var(--shadow)}
.urlbox input{flex:1;border:none;outline:none;font-size:15px;background:none;font-family:inherit}
.crawl{margin-top:22px;background:#fff;border:1px solid var(--line2);border-radius:16px;padding:20px;text-align:left;display:none;box-shadow:var(--shadow2)}.crawl.show{display:block}
.crawl-line{display:flex;align-items:center;gap:11px;font-size:13px;padding:7px 0;color:#5a6076;opacity:0;transform:translateX(-6px);animation:slidein .4s forwards}
@keyframes slidein{to{opacity:1;transform:none}}
.crawl-line .ck{width:20px;height:20px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.crawl-line .ck [data-lucide]{width:12px;height:12px}

/* DASHBOARD */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px}
.stat{background:var(--panel);border-radius:var(--r2);padding:20px;box-shadow:var(--shadow2)}
.stat .si{width:38px;height:38px;border-radius:11px;background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.stat .n{font-size:27px;font-weight:800;letter-spacing:-.02em}.stat .l{font-size:12.5px;color:var(--muted);margin-top:2px}
.stat .d{font-size:11px;font-weight:700;color:var(--green);margin-top:7px;display:inline-flex;gap:4px;align-items:center}
.grid2{display:grid;grid-template-columns:2fr 1fr;gap:14px}
.avatars{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.av-card{background:var(--panel);border-radius:var(--r2);overflow:hidden;box-shadow:var(--shadow2);transition:.18s;cursor:pointer}
.av-card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.av-thumb{height:160px;background-size:cover;background-position:center top;display:flex;align-items:flex-start;justify-content:space-between;padding:12px}
.av-live{background:rgba(255,255,255,.92);color:var(--green);font-size:10.5px;font-weight:800;padding:4px 10px;border-radius:100px;display:flex;align-items:center;gap:6px;backdrop-filter:blur(4px)}
.av-live i{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block;animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.av-b{padding:15px}.av-b .nm{font-weight:700;font-size:14.5px}.av-b .role{font-size:12px;color:var(--muted);margin:2px 0 12px}
.av-meta{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);border-top:1px solid var(--line);padding-top:11px}.av-meta b{color:var(--ink)}
.activity .act{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.activity .act:last-child{border:none}.act .ai{width:30px;height:30px;border-radius:9px;background:var(--accent-soft2);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;flex-shrink:0}.act .ai [data-lucide]{width:15px;height:15px}.act small{color:var(--muted)}
.spark{display:flex;align-items:flex-end;gap:5px;height:96px;margin-top:14px}
.spark i{flex:1;background:var(--accent-soft);border-radius:5px 5px 0 0;transition:.2s;position:relative}.spark i:hover{background:var(--accent)}
.spark i b{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);font-size:9px;color:var(--muted);margin-bottom:3px}

/* TEMPLATES */
.gallery{display:flex;gap:16px;align-items:flex-start}
.cats{width:230px;flex-shrink:0;background:var(--panel);border-radius:var(--r2);padding:10px;position:sticky;top:90px;box-shadow:var(--shadow2)}
.cats .cl{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:10px 12px 6px;font-weight:700}
.cat{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;font-size:13px;font-weight:600;color:#6b7088;cursor:pointer;border:none;background:none;width:100%;text-align:left}
.cat:hover{background:var(--accent-soft2);color:var(--ink)}.cat.active{background:var(--accent-soft);color:var(--accent-ink)}
.cat [data-lucide]{width:16px;height:16px;flex-shrink:0}
.cat .ct{margin-left:auto;background:#fff;font-size:11px;font-weight:700;padding:1px 8px;border-radius:100px;color:var(--muted)}
.cat.active .ct{background:#fff;color:var(--accent-ink)}
.tpl-wrap{flex:1;min-width:0}.tpl-sec{margin-bottom:34px}
.tpl-sec-h{display:flex;align-items:center;gap:11px;margin-bottom:14px}.tpl-sec-h .shi{width:34px;height:34px;border-radius:10px;background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center}.tpl-sec-h h3{font-size:18px;font-weight:800}.tpl-sec-h span{font-size:12px;color:var(--muted)}
.tpls{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:14px}
.tpl{background:var(--panel);border-radius:var(--r2);overflow:hidden;cursor:pointer;transition:.18s;display:flex;flex-direction:column;box-shadow:var(--shadow2)}
.tpl:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.tpl-top{height:92px;display:flex;align-items:center;justify-content:center;color:#fff}.tpl-top [data-lucide]{width:30px;height:30px;stroke-width:1.6}
.tpl-b{padding:15px;flex:1;display:flex;flex-direction:column;gap:7px}
.tpl-b .ind{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.tpl-b .ti{font-size:14.5px;font-weight:700;line-height:1.3}.tpl-b .de{font-size:12px;color:var(--muted);line-height:1.55;flex:1}
.tpl-foot{display:flex;align-items:center;justify-content:space-between;margin-top:6px}.use{font-size:12px;color:var(--accent-ink);font-weight:700;display:inline-flex;gap:3px;align-items:center}.use [data-lucide]{width:14px;height:14px}

/* AVATAR LIBRARY */
.avlib{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.avl{background:var(--panel);border-radius:var(--r2);overflow:hidden;cursor:pointer;transition:.18s;box-shadow:var(--shadow2)}
.avl:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.avl img{width:100%;height:185px;object-fit:cover;object-position:center top;display:block}
.avl .ab{padding:12px 14px}.avl .ab b{font-size:13.5px}.avl .ab small{display:block;color:var(--muted);font-size:11px}
.avl-new{border:2px dashed var(--accent-soft);background:var(--accent-soft2);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--accent-ink);font-weight:700;font-size:13px;gap:8px;min-height:233px;text-align:center;padding:16px}
.avl-new .plus{width:46px;height:46px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center}

/* BUILDER */
.builder{display:flex;gap:14px;align-items:flex-start}
.build-left{flex:1;min-width:0;background:var(--panel);border-radius:var(--r);padding:24px 26px;box-shadow:var(--shadow2)}
.build-right{width:400px;flex-shrink:0;background:#15171f;border-radius:var(--r);display:flex;flex-direction:column;align-items:center;padding:20px;position:sticky;top:90px}
.build-tabs{display:flex;gap:4px;background:var(--accent-soft2);border-radius:14px;padding:5px;margin-bottom:22px}
.bt{flex:1;padding:10px 4px;border-radius:10px;border:none;background:none;font-size:11.5px;font-weight:700;color:#6b7088;display:flex;flex-direction:column;align-items:center;gap:5px}
.bt [data-lucide]{width:17px;height:17px}.bt.active{background:#fff;color:var(--accent-ink);box-shadow:var(--shadow2)}
.bpane{display:none}.bpane.active{display:block;animation:fade .2s}
.field{margin-bottom:20px}.field label{display:flex;align-items:center;font-size:13px;font-weight:700;margin-bottom:7px}
.field .hint{font-size:12px;color:var(--muted);margin-bottom:9px;line-height:1.55}
.field input[type=text],.field textarea,.field select{width:100%;border:1px solid var(--line2);border-radius:12px;padding:12px 14px;font-size:13.5px;font-family:inherit;outline:none;background:#fff;color:var(--ink)}
.field textarea{min-height:120px;resize:vertical;line-height:1.6}.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent)}
.ai-pill{display:inline-flex;align-items:center;gap:5px;background:var(--accent-soft);color:var(--accent-ink);font-size:11px;font-weight:700;padding:3px 10px;border-radius:100px;margin-left:8px}.ai-pill [data-lucide]{width:12px;height:12px}
.kb-item{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line2);border-radius:12px;padding:12px 14px;margin-bottom:8px;font-size:13px}
.kb-item .ic{width:32px;height:32px;border-radius:9px;background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;flex-shrink:0}.kb-item .ic [data-lucide]{width:16px;height:16px}
.kb-item .meta{flex:1}.kb-item .meta small{display:block;color:var(--muted);font-size:11px}.kb-item .ok{color:var(--green);font-weight:800;font-size:12px;display:inline-flex;gap:4px;align-items:center}.kb-item .ok [data-lucide]{width:14px;height:14px}
.avatar-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}
.av-pick{aspect-ratio:3/4;border-radius:13px;border:2.5px solid transparent;overflow:hidden;cursor:pointer;position:relative}
.av-pick img{width:100%;height:100%;object-fit:cover;object-position:center top}
.av-pick span{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.7));color:#fff;font-size:10px;font-weight:700;padding:9px 4px 5px;text-align:center}
.av-pick.sel{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.cap-row{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line2);border-radius:12px;padding:11px 13px;margin-bottom:8px}
.cap-row .ic{font-size:14px;width:18px;text-align:center}.cap-row .nm{font-weight:600;font-size:13px;flex:1}.cap-row .ty{font-size:11px;color:var(--muted);background:var(--accent-soft2);padding:2px 9px;border-radius:7px}
.toggle{width:40px;height:23px;border-radius:100px;background:var(--line2);position:relative;cursor:pointer;flex-shrink:0;transition:.15s}
.toggle.on{background:var(--accent)}.toggle i{position:absolute;top:2.5px;left:2.5px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.15s}.toggle.on i{left:19px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.chip{border:1px solid var(--line2);background:#fff;border-radius:100px;padding:7px 14px;font-size:12px;font-weight:600;color:#6b7088}
.chip:hover{border-color:var(--accent);color:var(--accent-ink)}.chip.add{border-style:dashed;color:var(--accent-ink);border-color:var(--accent-soft)}.chip.sel{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft2)}
/* builder preview */
.pv-avatar{width:100%;border-radius:var(--r2);overflow:hidden;position:relative;aspect-ratio:3/4;max-height:50vh}
.pv-avatar img{width:100%;height:100%;object-fit:cover;object-position:center top}
.pv-cap{position:absolute;bottom:74px;left:14px;right:14px;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);color:#fff;border-radius:12px;padding:11px 14px;font-size:13px;line-height:1.5}
.pv-start{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;border:none;padding:11px 24px;border-radius:100px;font-weight:700;font-size:13px;display:inline-flex;gap:7px;align-items:center;box-shadow:0 6px 20px rgba(19,179,160,.5)}
.pv-bar{margin-top:12px;width:100%;display:flex;gap:8px}
.pv-bar .pvb{flex:1;background:#22242f;border-radius:11px;padding:9px;text-align:center;color:#9a9fb4;font-size:10px}.pv-bar .pvb b{display:block;color:#fff;font-size:12px;margin-top:2px}
.pv-actions{width:100%;margin-top:10px;display:flex;gap:8px}.pv-actions .btn{flex:1;justify-content:center;background:#22242f;color:#cfd2e0;border-color:#2e3140}.pv-actions .btn:hover{border-color:var(--accent);color:#fff}

/* DEPLOY */
.deploy-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:14px}
.dep{background:var(--panel);border-radius:var(--r2);padding:17px;cursor:pointer;transition:.18s;position:relative;box-shadow:var(--shadow2);border:2px solid transparent}
.dep:hover{box-shadow:var(--shadow);transform:translateY(-3px)}.dep.sel{border-color:var(--accent)}
.dep .di{width:42px;height:42px;border-radius:12px;background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center}.dep .dt{font-weight:700;font-size:13.5px;margin:11px 0 4px}.dep .dd{font-size:12px;color:var(--muted);line-height:1.5}
.dep .stage{position:absolute;top:14px;right:14px;font-size:10px;font-weight:700;color:var(--accent-ink);background:var(--accent-soft2);padding:3px 9px;border-radius:100px}
.code{background:#15171f;color:#cfd2e0;border-radius:var(--r2);padding:18px;font-family:ui-monospace,Menlo,monospace;font-size:12px;line-height:1.7;margin-top:16px;overflow-x:auto;white-space:pre-wrap;word-break:break-word}
.code .k{color:#7fdccc}.code .s{color:#86efac}.code .c{color:#6b7088}

/* INTEGRATIONS */
.intg{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px}
.ig{background:var(--panel);border-radius:var(--r2);padding:20px;display:flex;flex-direction:column;gap:9px;box-shadow:var(--shadow2)}
.ig .iglogo{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff}.ig .iglogo [data-lucide]{width:22px;height:22px}
.ig .ign{font-weight:700;font-size:14.5px}.ig .igd{font-size:12px;color:var(--muted);line-height:1.5;flex:1}
.ig .igb{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.conn{font-size:11px;font-weight:700;padding:4px 11px;border-radius:100px;display:inline-flex;gap:5px;align-items:center}.conn.on{background:var(--accent-soft);color:var(--accent-ink)}.conn.off{background:var(--bg);color:var(--muted)}

/* ANALYTICS */
.funnel{display:flex;flex-direction:column;gap:9px;margin-top:6px}
.fn{display:flex;align-items:center;gap:12px}.fn .fbar{height:42px;border-radius:11px;background:linear-gradient(90deg,var(--accent),#3ddbc6);display:flex;align-items:center;padding:0 15px;color:#fff;font-weight:800;font-size:13px;min-width:64px}
.fn .fmeta{font-size:12px;color:var(--muted)}.fn .fmeta b{color:var(--ink);font-size:13.5px}
.barchart{display:flex;align-items:flex-end;gap:8px;height:170px;margin-top:14px;padding-top:18px}
.barchart .bc{flex:1;background:var(--accent-soft);border-radius:7px 7px 0 0;position:relative}.barchart .bc:hover{background:var(--accent)}
.barchart .bc b{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);font-size:10px;color:var(--muted);margin-bottom:3px}.barchart .bc em{position:absolute;top:100%;left:50%;transform:translateX(-50%);font-size:10px;color:var(--muted);margin-top:5px;font-style:normal}
.qlist{list-style:none}.qlist li{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}.qlist li:last-child{border:none}.qlist li span{color:var(--accent-ink);font-weight:700}

/* LEADS TABLE */
.lead-tbl{background:var(--panel);border-radius:var(--r2);overflow:hidden;box-shadow:var(--shadow2)}
.lead-tbl table{width:100%;border-collapse:collapse;font-size:13px}
.lead-tbl th{text-align:left;padding:14px 18px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);border-bottom:1px solid var(--line);font-weight:700}
.lead-tbl td{padding:14px 18px;border-bottom:1px solid var(--line)}.lead-tbl tr:last-child td{border-bottom:none}.lead-tbl tr:hover td{background:var(--accent-soft2)}
.pillg{font-size:11px;font-weight:700;padding:3px 10px;border-radius:100px;background:var(--accent-soft);color:var(--accent-ink)}
.pilly{font-size:11px;font-weight:700;padding:3px 10px;border-radius:100px;background:var(--amber-soft);color:var(--amber)}
.stars{color:#f5a623}

/* ── LIVE CALL (modeled on reference) ── */
.call-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.call-back{width:38px;height:38px;border-radius:12px;background:var(--accent-soft2);border:none;color:var(--accent-ink);display:flex;align-items:center;justify-content:center}
.call-head h3{font-size:18px;font-weight:800}
.call-pill{background:var(--accent-soft);color:var(--accent-ink);font-size:12px;font-weight:700;padding:5px 12px;border-radius:100px;display:inline-flex;gap:6px;align-items:center}.call-pill [data-lucide]{width:14px;height:14px}
.call-meta{display:flex;gap:22px;align-items:center;padding:0 2px 14px;border-bottom:1px solid var(--line);margin-bottom:16px;flex-wrap:wrap}
.cm{display:flex;align-items:center;gap:8px;font-size:13px;color:#5a6076;font-weight:600}.cm b{color:var(--ink)}.cm [data-lucide]{width:16px;height:16px;color:var(--muted)}
.cm .ml{margin-left:auto}
.call-body{display:flex;gap:16px;align-items:stretch}
.stage{flex:1.55;min-width:0;display:flex;flex-direction:column}
.video{position:relative;border-radius:var(--r2);overflow:hidden;background:#000;aspect-ratio:16/11}
.video>img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.v-pub{position:absolute;top:14px;left:14px;display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.16);backdrop-filter:blur(10px);padding:7px 13px 7px 7px;border-radius:100px;color:#fff}
.v-pub img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.v-pub small{display:block;font-size:10px;opacity:.85;line-height:1.1}.v-pub b{font-size:13px}
.v-rec{position:absolute;top:14px;right:14px;background:rgba(0,0,0,.45);backdrop-filter:blur(10px);color:#fff;font-size:12px;font-weight:700;padding:7px 13px;border-radius:100px;display:flex;gap:7px;align-items:center}
.v-rec i{width:8px;height:8px;border-radius:50%;background:var(--red);animation:pulse 1.4s infinite}
.v-pip{position:absolute;top:14px;right:14px;top:auto;bottom:90px;right:14px;display:flex;flex-direction:column;gap:9px}
.v-pip .pip{width:74px;height:54px;border-radius:12px;overflow:hidden;border:2px solid rgba(255,255,255,.8);position:relative;background:#222}
.v-pip .pip img{width:100%;height:100%;object-fit:cover}
.v-pip .pip span{position:absolute;bottom:3px;left:4px;font-size:8px;color:#fff;background:rgba(0,0,0,.5);padding:1px 5px;border-radius:5px}
.v-pip .pip.screen{background:#0d1117;display:flex;align-items:center;justify-content:center;color:#7fdccc}
/* subtitles overlay */
.v-sub{position:absolute;bottom:86px;left:50%;transform:translateX(-50%);max-width:80%;text-align:center;background:rgba(0,0,0,.62);backdrop-filter:blur(8px);color:#fff;font-size:15px;font-weight:600;line-height:1.4;padding:9px 16px;border-radius:12px}
.v-sub small{display:block;font-size:10px;color:#9be8db;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px}
/* control bar */
.ctrls{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:10px;align-items:center}
.cbtn{width:46px;height:46px;border-radius:50%;background:rgba(44,46,58,.92);backdrop-filter:blur(8px);border:none;color:#fff;display:flex;align-items:center;justify-content:center;transition:.14s}
.cbtn:hover{background:#3a3d4d}.cbtn.on{background:#fff;color:var(--ctrl)}
.cbtn.end{width:58px;background:var(--red)}.cbtn.end:hover{background:#d8453c}
.cbtn [data-lucide]{width:20px;height:20px}
.v-vol{position:absolute;left:16px;bottom:74px;background:rgba(44,46,58,.92);border-radius:100px;padding:12px 7px;display:flex;flex-direction:column;align-items:center;gap:8px}
.v-vol .track{width:5px;height:80px;background:#54576a;border-radius:5px;position:relative}.v-vol .track i{position:absolute;bottom:0;left:0;right:0;height:62%;background:var(--accent);border-radius:5px}.v-vol .track b{position:absolute;left:50%;bottom:62%;transform:translate(-50%,50%);width:13px;height:13px;border-radius:50%;background:#fff}.v-vol [data-lucide]{width:16px;height:16px;color:#fff}
/* transcript ticker under video */
.ticker{display:flex;align-items:center;gap:14px;margin-top:14px;padding:0 4px}
.ticker .wave{display:flex;align-items:center;gap:2px;height:30px}
.ticker .wave i{width:3px;background:var(--accent);border-radius:3px;animation:wv 1s infinite ease-in-out}
@keyframes wv{0%,100%{height:7px}50%{height:26px}}
.ticker .tx{font-size:13px;color:#5a6076}.ticker .tx b{color:var(--accent-ink);text-transform:uppercase;font-size:10px;letter-spacing:.06em;display:block}
/* side panel */
.side-panel{width:360px;flex-shrink:0;background:#fff;border:1px solid var(--line);border-radius:var(--r2);display:flex;flex-direction:column;overflow:hidden}
.sp-tabs{display:flex;padding:14px 16px 0;gap:6px;border-bottom:1px solid var(--line)}
.sp-tab{padding:9px 14px;border:none;background:none;font-size:13px;font-weight:700;color:var(--muted);border-bottom:2.5px solid transparent;margin-bottom:-1px}
.sp-tab.on{color:var(--accent-ink);border-color:var(--accent)}
.sp-body{flex:1;overflow-y:auto;padding:16px}
.sp-pane{display:none}.sp-pane.on{display:block}
.trans-ctl{display:flex;align-items:center;gap:8px;background:var(--accent-soft2);border-radius:10px;padding:8px 10px;margin-bottom:14px;font-size:12px;font-weight:600;color:var(--accent-ink)}
.trans-ctl [data-lucide]{width:15px;height:15px}.trans-ctl select{margin-left:auto;border:1px solid var(--accent-soft);border-radius:8px;padding:5px 8px;font-family:inherit;font-size:12px;font-weight:700;color:var(--accent-ink);background:#fff;outline:none}
.tline{margin-bottom:16px}.tline .who{font-size:11px;font-weight:700;color:var(--muted);margin-bottom:4px;display:flex;align-items:center;gap:7px}
.tline .who img{width:20px;height:20px;border-radius:50%;object-fit:cover}.tline .who .tm{margin-left:auto;font-weight:500}
.tline .txt{font-size:13.5px;line-height:1.55;background:var(--bg);border-radius:12px;padding:10px 13px}
.tline.ai .txt{background:var(--accent-soft2)}
.chatb{display:flex;flex-direction:column;gap:10px}
.cmsg{max-width:85%;font-size:13px;padding:9px 13px;border-radius:14px;line-height:1.45}
.cmsg.them{background:var(--bg);align-self:flex-start;border-bottom-left-radius:5px}.cmsg.me{background:var(--accent-soft);color:var(--accent-ink);align-self:flex-end;border-bottom-right-radius:5px}
.chat-input{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.chat-input input{flex:1;border:1px solid var(--line2);border-radius:11px;padding:11px 13px;font-family:inherit;font-size:13px;outline:none}
.chat-input button{width:42px;border:none;border-radius:11px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center}
.capfill{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line);font-size:13px}
.capfill .cf-ic{width:30px;height:30px;border-radius:9px;background:var(--accent-soft2);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px}
.capfill .cf-v{margin-left:auto;font-weight:700}.capfill .cf-v.done{color:var(--green)}.capfill .cf-v.wait{color:var(--muted);font-weight:500}

/* EXPERIENCE PREVIEW */
.exp-toolbar{display:flex;gap:14px;align-items:center;margin-bottom:18px;flex-wrap:wrap}
.seg{display:inline-flex;background:#fff;border:1px solid var(--line2);border-radius:12px;padding:4px}
.seg button{border:none;background:none;padding:8px 16px;border-radius:9px;font-size:12.5px;font-weight:700;color:var(--muted);display:inline-flex;gap:6px;align-items:center}.seg button.on{background:var(--accent);color:#fff}.seg button [data-lucide]{width:15px;height:15px}
.stage-wrap{display:flex;justify-content:center;padding:6px}
.frame-desk{width:860px;max-width:100%;background:#000;border-radius:20px;overflow:hidden;display:flex;box-shadow:var(--shadow);min-height:480px}
.fd-video{flex:1.4;position:relative}.fd-video>img{width:100%;height:100%;object-fit:cover;object-position:center 18%}
.fd-badge{position:absolute;top:14px;left:14px;background:rgba(255,255,255,.16);backdrop-filter:blur(10px);color:#fff;font-size:11.5px;padding:6px 13px;border-radius:100px;display:flex;gap:7px;align-items:center;font-weight:600}.fd-badge i{width:7px;height:7px;border-radius:50%;background:#4ade80}
.fd-cc{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);max-width:84%;text-align:center;background:rgba(0,0,0,.6);color:#fff;font-size:13px;font-weight:600;padding:8px 14px;border-radius:11px}
.fd-side{flex:1;background:#fff;display:flex;flex-direction:column;padding:24px}
.fd-side .q{font-size:17px;font-weight:800;line-height:1.4}.fd-side .sub2{font-size:12px;color:var(--muted);margin:7px 0 18px}
.opt{border:1.5px solid var(--line2);border-radius:13px;padding:14px 16px;margin-bottom:10px;font-size:13.5px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:11px}
.opt:hover{border-color:var(--accent);background:var(--accent-soft2)}.opt .on{width:24px;height:24px;border-radius:7px;background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800}
.fd-side .typ{margin-top:auto;display:flex;gap:8px;border-top:1px solid var(--line);padding-top:16px}.fd-side .typ input{flex:1;border:1px solid var(--line2);border-radius:11px;padding:11px;font-family:inherit;font-size:13px;outline:none}.fd-side .typ button{background:var(--accent);color:#fff;border:none;border-radius:11px;width:44px;display:flex;align-items:center;justify-content:center}
.frame-mob{width:300px;height:600px;background:#000;border-radius:38px;overflow:hidden;position:relative;box-shadow:var(--shadow);border:8px solid #15171f}
.frame-mob>img{width:100%;height:100%;object-fit:cover;object-position:center 16%}
.fm-badge{position:absolute;top:18px;left:18px;background:rgba(255,255,255,.18);backdrop-filter:blur(8px);color:#fff;font-size:11px;padding:6px 12px;border-radius:100px;display:flex;gap:6px;align-items:center;font-weight:600}.fm-badge i{width:7px;height:7px;border-radius:50%;background:#4ade80}
.fm-cc{position:absolute;left:16px;right:16px;bottom:230px;text-align:center;background:rgba(0,0,0,.6);color:#fff;font-size:12.5px;font-weight:600;padding:7px 12px;border-radius:10px}
.fm-overlay{position:absolute;left:0;right:0;bottom:0;padding:18px;background:linear-gradient(transparent,rgba(0,0,0,.88) 38%)}
.fm-overlay .q{color:#fff;font-size:15px;font-weight:700;margin-bottom:13px;line-height:1.35}
.fm-opt{background:rgba(255,255,255,.96);border-radius:12px;padding:13px 15px;margin-bottom:9px;font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:10px}.fm-opt .on{width:21px;height:21px;border-radius:6px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800}

/* MODAL */
.modal-bg{position:fixed;inset:0;background:rgba(20,18,40,.55);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:200;padding:20px}.modal-bg.show{display:flex}
.modal{background:#fff;border-radius:22px;width:100%;max-width:720px;max-height:90vh;overflow-y:auto;box-shadow:0 30px 90px rgba(0,0,0,.35)}
.modal-h{display:flex;align-items:center;padding:22px 26px;border-bottom:1px solid var(--line)}.modal-h h3{font-size:18px;font-weight:800;flex:1}.modal-x{border:none;background:var(--bg);width:32px;height:32px;border-radius:9px;color:var(--muted);display:flex;align-items:center;justify-content:center}
.modal-b{padding:26px}
.method-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.method{border:2px solid var(--line2);border-radius:16px;padding:22px 14px;text-align:center;cursor:pointer;transition:.15s}.method:hover,.method.sel{border-color:var(--accent);background:var(--accent-soft2)}
.method .mi{width:52px;height:52px;border-radius:14px;background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;margin:0 auto}.method .mi [data-lucide]{width:26px;height:26px}.method .mt{font-weight:700;font-size:13.5px;margin:12px 0 4px}.method .md{font-size:11.5px;color:var(--muted);line-height:1.5}
.consent{background:var(--amber-soft);border:1px solid #f6dcc0;border-radius:14px;padding:16px 18px;margin-top:18px;font-size:12.5px;line-height:1.6;color:#8a5316}
.consent label{display:flex;gap:10px;align-items:flex-start;margin-top:11px;cursor:pointer;font-weight:600}.consent input{margin-top:2px}
.genwrap{display:none;margin-top:18px}.genwrap.show{display:block}
.genresult{display:none;margin-top:16px;text-align:center}.genresult.show{display:block}
.genresult .gimg{width:200px;height:260px;border-radius:16px;margin:0 auto 14px;background-size:cover;background-position:center top}

/* search bar */
.searchbar{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line2);border-radius:13px;padding:11px 15px}
.searchbar [data-lucide]{width:17px;height:17px;color:var(--muted)}
.searchbar input{flex:1;border:none;outline:none;font-family:inherit;font-size:13.5px;background:none}
.searchbar .cnt{font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap}
/* lead modal */
.modal-lg{max-width:880px}
.rec-player{position:relative;border-radius:16px;overflow:hidden;background:#0c0a14;aspect-ratio:16/7;display:flex;align-items:center;justify-content:center}
.rec-poster{position:absolute;inset:0;background-size:cover;background-position:center 20%;opacity:.55}
.rec-play{position:relative;width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.92);border:none;color:var(--ctrl);display:flex;align-items:center;justify-content:center}
.rec-play [data-lucide]{width:24px;height:24px}
.rec-meta{position:absolute;bottom:12px;left:14px;right:14px;display:flex;align-items:center;gap:10px}
.rec-type{background:rgba(0,0,0,.55);color:#fff;font-size:11px;font-weight:700;padding:5px 11px;border-radius:100px;display:inline-flex;align-items:center;gap:6px;text-transform:capitalize}
.rec-type [data-lucide]{width:13px;height:13px}
.rec-s3{display:flex;align-items:center;gap:8px;background:var(--accent-soft2);border:1px solid var(--accent-soft);border-radius:11px;padding:10px 14px;margin-top:12px;font-size:12px;color:var(--accent-ink);font-weight:600}
.rec-s3 [data-lucide]{width:15px;height:15px}
.rec-s3 code{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;background:#fff;padding:3px 8px;border-radius:6px;color:#444a5e}
.lead-cols{display:grid;grid-template-columns:1.2fr 1fr;gap:22px;margin-top:20px}
.col-h{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;margin-bottom:12px;color:var(--ink)}
.col-h [data-lucide]{width:16px;height:16px;color:var(--accent-ink)}
.lead-transcript{max-height:340px;overflow-y:auto;padding-right:6px}
/* fallback chain pills */
.chain{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11px;color:var(--muted);margin-top:6px}
.chain b{background:var(--accent-soft2);color:var(--accent-ink);padding:2px 8px;border-radius:6px;font-weight:700}
.qa-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.qa-row:last-child{border:none}
.qa-q{flex:1}.qa-q small{display:block;color:var(--muted);font-size:11px}
.qa-bar{width:120px;height:7px;border-radius:5px;background:var(--bg);overflow:hidden;flex-shrink:0}
.qa-bar i{display:block;height:100%;background:var(--accent);border-radius:5px}
.qa-pct{width:42px;text-align:right;font-weight:700;font-size:12px;color:var(--accent-ink)}
.qa-lead{background:var(--bg);border-radius:11px;padding:11px 13px;margin-bottom:8px}
.qa-q2{font-size:12.5px;font-weight:700;display:flex;gap:7px;align-items:flex-start}.qa-q2 [data-lucide]{width:14px;height:14px;color:var(--muted);flex-shrink:0;margin-top:1px}
.qa-a2{font-size:13px;color:var(--accent-ink);font-weight:600;display:flex;gap:7px;align-items:flex-start;margin-top:6px}.qa-a2 [data-lucide]{width:14px;height:14px;flex-shrink:0;margin-top:2px}

/* ── GENERIC UTILITIES ── */
.muted{color:var(--muted)}
.flex{display:flex}
.gap{gap:10px}
.flex-1{flex:1}
.center{text-align:center}
.mt0{margin-top:0}.mt8{margin-top:8px}.mt14{margin-top:14px}.mt22{margin-top:22px}
.mb0{margin-bottom:0}.mb14{margin-bottom:14px}
.fw700{font-weight:700}
.empty{text-align:center;padding:42px 24px;color:var(--muted)}
.empty .ei{width:56px;height:56px;border-radius:16px;background:var(--accent-soft2);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.empty .ei [data-lucide]{width:26px;height:26px}
.empty h4{font-size:15px;font-weight:800;color:var(--ink);margin-bottom:6px}
.empty p{font-size:13px;line-height:1.6;max-width:360px;margin:0 auto 16px}
/* generic table */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;padding:14px 18px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);border-bottom:1px solid var(--line);font-weight:700}
.tbl td{padding:14px 18px;border-bottom:1px solid var(--line)}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:var(--accent-soft2)}
/* outcome badges (avato_outcome_color → green|accent|amber|blue|red|muted) */
.badge{font-size:11px;font-weight:700;padding:3px 10px;border-radius:100px;display:inline-flex;align-items:center;gap:5px}
.badge-green{background:#d6f5e7;color:var(--green)}
.badge-accent{background:var(--accent-soft);color:var(--accent-ink)}
.badge-amber{background:var(--amber-soft);color:var(--amber)}
.badge-blue{background:#e7eefe;color:var(--blue)}
.badge-red{background:var(--red-soft);color:var(--red)}
.badge-muted{background:var(--bg);color:var(--muted)}
/* flash alerts */
.alert{border-radius:var(--r2);padding:13px 16px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:9px;margin-bottom:14px}
.alert [data-lucide]{width:17px;height:17px;flex-shrink:0}
.alert-error{background:var(--red-soft);color:var(--red);border:1px solid #f7cfcc}
.alert-success{background:var(--accent-soft2);color:var(--accent-ink);border:1px solid var(--accent-soft)}
/* error pages */
.err-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.err-card{background:var(--panel);border-radius:var(--r);box-shadow:var(--shadow);padding:48px 44px;max-width:460px;text-align:center}
.err-logo{width:54px;height:54px;border-radius:16px;background:linear-gradient(135deg,var(--accent),#3ddbc6);display:flex;align-items:center;justify-content:center;color:#fff;margin:0 auto 22px}
.err-card .code{background:none;color:var(--accent-ink);padding:0;margin:0;font-family:'Plus Jakarta Sans',sans-serif;font-size:54px;font-weight:800;letter-spacing:-.03em}
.err-card h1{font-size:21px;font-weight:800;margin:6px 0 10px}
.err-card p{font-size:13.5px;color:var(--muted);line-height:1.65;margin-bottom:24px}

@media(max-width:768px){.lead-cols{grid-template-columns:1fr}}
@media(max-width:1100px){.build-right,.side-panel{display:none}.call-body,.builder{flex-direction:column}.stage{width:100%}}
@media(max-width:900px){.side{display:none}.stats{grid-template-columns:1fr 1fr}.gallery,.grid2{flex-direction:column;grid-template-columns:1fr}.method-grid{grid-template-columns:1fr}.frame-desk{flex-direction:column}.app{padding:10px;gap:10px}}

/* Over-quota / caution banner (Gap S2) */
.alert-warn{background:var(--amber-soft);color:#a9641f;border:1px solid #f6dcc0}