/* Al-Fareed Estate CRM — "Emerald & Gold" theme (matches the logo) with dark mode + animations */
:root{
  --bg:#F3F4F0; --bg2:#E9ECE6; --card:#FFFFFF; --ink:#172420; --muted:#66736D; --line:#E2E6E1;
  --green:#0B3D2E; --green-2:#14624A; --green-3:#1F8A66; --green-soft:#E1F0E8; --gold:#D4AF37; --gold-2:#B8921F; --gold-soft:#FBF3DC;
  --amber:#E9A23B; --amber-soft:#FBF0DC; --red:#D64545; --red-soft:#FCE6E6; --blue:#2F6FED; --blue-soft:#E4ECFD; --teal:#0F8B8D; --teal-soft:#DFF3F3;
  --violet:#7048E8; --violet-soft:#ECE6FB; --orange:#E8590C; --orange-soft:#FCE8DC; --cyan:#0B7285; --cyan-soft:#DDF3F7;
  --rose:#C2255C; --rose-soft:#FBE1EA; --slate:#5C6B73; --slate-soft:#E8ECEF; --greenc:#2B8A3E; --greenc-soft:#DDF4E3;
  --side-bg:linear-gradient(180deg,#0B3D2E 0%,#082B21 100%); --side-ink:#DCE8E1; --side-muted:#8FAFA0;
  --radius:16px; --shadow:0 1px 2px rgba(23,36,32,.05),0 8px 24px rgba(23,36,32,.06); --shadow-lg:0 12px 40px rgba(23,36,32,.14);
  --sidebar:252px; --font:'Sora',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
:root[data-theme="dark"]{
  --bg:#0E1613; --bg2:#141F1A; --card:#182420; --ink:#E7EEEA; --muted:#93A59C; --line:#24332C;
  --green-soft:#17352A; --gold-soft:#3A3016; --amber-soft:#3A2E14; --red-soft:#3E1F1F; --blue-soft:#1C2A45; --teal-soft:#15302F; --violet-soft:#2A2345; --orange-soft:#3E2416; --cyan-soft:#132E34; --rose-soft:#3C1A28; --slate-soft:#243036; --greenc-soft:#17342A;
  --side-bg:linear-gradient(180deg,#0A1F18 0%,#07160F 100%); --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35); --shadow-lg:0 12px 40px rgba(0,0,0,.5);
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--ink);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased;transition:background .3s,color .3s}
a{color:var(--green-3);text-decoration:none} button{font-family:inherit}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.01em} h1{font-size:23px} h2{font-size:17px} h3{font-size:14px}
.muted{color:var(--muted)} .small{font-size:12px} .tiny{font-size:11px} .b{font-weight:600} .nowrap{white-space:nowrap}
.row{display:flex;align-items:center;gap:8px} .row.wrap{flex-wrap:wrap} .grow{flex:1} .right{margin-left:auto} .col{display:flex;flex-direction:column;gap:6px}
.hide{display:none!important}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(214,69,69,.55)}70%{box-shadow:0 0 0 10px rgba(214,69,69,0)}100%{box-shadow:0 0 0 0 rgba(214,69,69,0)}}
@keyframes glow{0%,100%{box-shadow:0 6px 20px rgba(212,175,55,.35)}50%{box-shadow:0 10px 30px rgba(212,175,55,.6)}}
@keyframes growBar{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes growW{from{width:0}to{}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes ring{to{stroke-dashoffset:var(--off)}}
@keyframes drawCheck{to{stroke-dashoffset:0}}
@keyframes spinG{to{transform:rotate(360deg)}}
@keyframes gradMove{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes confetti{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(90vh) rotate(720deg);opacity:0}}
@keyframes slideL{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes slideR{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* layout */
#app{min-height:100vh}
.shell{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);min-height:100vh}
.side{background:var(--side-bg);color:var(--side-ink);padding:18px 14px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:6px;box-shadow:4px 0 24px rgba(0,0,0,.12)}
.brand{display:flex;align-items:center;gap:10px;padding:6px 8px 18px}
.brand .mark{width:44px;height:44px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px;overflow:hidden;flex:none;box-shadow:0 0 0 2px var(--gold),0 4px 14px rgba(0,0,0,.3)}
.brand .mark img{width:100%;height:100%;object-fit:cover}
.brand .t1{font-weight:700;font-size:15px;line-height:1.1;color:#fff} .brand .t2{font-size:11px;color:var(--gold);letter-spacing:.12em;text-transform:uppercase}
.nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;color:var(--side-ink);font-weight:500;transition:.18s;position:relative}
.nav a:hover{background:rgba(255,255,255,.07);transform:translateX(2px)} .nav a.on{background:linear-gradient(90deg,var(--gold),var(--gold-2));color:#0B3D2E;font-weight:600;box-shadow:0 6px 18px rgba(212,175,55,.35)}
.nav a svg{width:18px;height:18px;flex:none} .nav .badge{margin-left:auto}
.side .foot{margin-top:auto;border-top:1px solid rgba(255,255,255,.12);padding-top:12px;color:#fff} .side .foot .muted{color:var(--side-muted)}
.side .btn.ghost{color:var(--side-ink)} .side .btn.ghost:hover{background:rgba(255,255,255,.1)}
.main{padding:22px 28px 90px;max-width:1440px;width:100%;min-width:0;overflow-x:hidden}
#page{animation:fadeUp .3s ease-out}
.top{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--green-soft);color:var(--green);display:grid;place-items:center;font-weight:600;font-size:12px;flex:none}
.avatar.lg{width:56px;height:56px;font-size:18px;background:linear-gradient(135deg,var(--green-2),var(--green-3));color:#fff;box-shadow:0 0 0 3px var(--gold-soft),0 8px 20px rgba(20,98,74,.3)}
.avatar.c1{background:#E1F0E8;color:#14624A}.avatar.c2{background:#FBF3DC;color:#8A6A10}.avatar.c3{background:#E4ECFD;color:#2F6FED}.avatar.c4{background:#FBE1EA;color:#C2255C}.avatar.c5{background:#ECE6FB;color:#7048E8}.avatar.c6{background:#DFF3F3;color:#0F8B8D}

/* mobile */
.tabbar{display:none}
@media (max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr)} .side{display:none}
  .main{padding:12px 14px 92px}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;background:var(--card);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom));z-index:40;box-shadow:0 -6px 20px rgba(0,0,0,.06)}
  .tabbar a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;color:var(--muted);padding:4px 0;border-radius:12px;transition:.2s}
  .tabbar a.on{color:var(--green-3);font-weight:600} .tabbar a.on svg{animation:bounce .5s;fill:var(--green-soft)} .tabbar a svg{width:22px;height:22px}
  :root[data-theme="dark"] .tabbar a.on{color:var(--gold)}
  .mtop{display:flex;align-items:center;gap:10px;margin-bottom:12px;position:sticky;top:0;background:var(--bg);z-index:30;padding:6px 0}
  .top > h1, .top > div > h1{display:none} .top > div > .muted{display:none}
  .filters{display:none} .filters.open{display:flex} .filters select{flex:1;min-width:45%}
  h1{font-size:19px}
  table.tbl{white-space:nowrap}
}
@media (min-width:901px){.mtop{display:none}}

/* cards & grid */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);transition:box-shadow .2s,transform .2s;min-width:0}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.card.pad0{padding:0} .card + .card{margin-top:14px}
.grid{display:grid;gap:14px} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} .g5{grid-template-columns:repeat(5,1fr)}
@media (max-width:1100px){.g4,.g5{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.g2,.g3{grid-template-columns:1fr} .g4,.g5{grid-template-columns:repeat(2,1fr)}}
.stat{display:flex;flex-direction:column;gap:4px;padding:18px 16px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);position:relative;overflow:hidden;color:var(--ink);transition:.2s;animation:fadeUp .4s both}
.stat:nth-child(2){animation-delay:.05s}.stat:nth-child(3){animation-delay:.1s}.stat:nth-child(4){animation-delay:.15s}.stat:nth-child(5){animation-delay:.2s}
.stat:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.stat::after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:var(--tint,var(--green-soft));opacity:.6}
.stat .n{font-size:30px;font-weight:700;letter-spacing:-.02em;position:relative} .stat .l{font-size:12px;color:var(--muted);position:relative}
.stat .ic{position:absolute;right:14px;top:14px;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--tint,var(--green-soft));color:var(--tintInk,var(--green-2));z-index:1} .stat .ic svg{width:20px;height:20px}
.stat.t-green{--tint:var(--green-soft);--tintInk:var(--green-3)} .stat.t-red{--tint:var(--red-soft);--tintInk:var(--red)} .stat.t-amber{--tint:var(--amber-soft);--tintInk:#9A6412} .stat.t-blue{--tint:var(--blue-soft);--tintInk:var(--blue)} .stat.t-gold{--tint:var(--gold-soft);--tintInk:var(--gold-2)}
.stat.warn .n{color:var(--red)} .stat.good .n{color:var(--greenc)}
.alert{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:var(--radius);background:linear-gradient(90deg,var(--red-soft),var(--card));border:1px solid rgba(214,69,69,.3);margin-bottom:14px;animation:fadeUp .4s}
.alert .dot{width:12px;height:12px;border-radius:50%;background:var(--red);flex:none;animation:pulse 1.6s infinite}
.sec-h{display:flex;align-items:center;gap:10px;margin:0 0 12px} .sec-h h2{flex:1}
.ring{position:relative;width:110px;height:110px;margin:0 auto} .ring svg{transform:rotate(-90deg)} .ring .c{fill:none;stroke:var(--bg2);stroke-width:10} .ring .p{fill:none;stroke:url(#gg);stroke-width:10;stroke-linecap:round;stroke-dasharray:283;stroke-dashoffset:283;animation:ring 1.2s ease-out forwards}
.ring .lbl{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font-weight:700;font-size:20px} .ring .lbl span{display:block;font-size:11px;color:var(--muted);font-weight:500}
.trophy{background:linear-gradient(90deg,var(--gold-soft),transparent)} .trophy td:first-child::before{content:"🥇 ";}

/* badges */
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:600;white-space:nowrap;line-height:1.6}
.badge.slate{background:var(--slate-soft);color:var(--slate)} .badge.blue{background:var(--blue-soft);color:var(--blue)} .badge.teal{background:var(--teal-soft);color:var(--teal)}
.badge.amber{background:var(--amber-soft);color:#9A6412} .badge.violet{background:var(--violet-soft);color:var(--violet)} .badge.cyan{background:var(--cyan-soft);color:var(--cyan)}
.badge.orange{background:var(--orange-soft);color:var(--orange)} .badge.gold{background:var(--gold-soft);color:var(--gold-2)} .badge.green{background:var(--greenc-soft);color:var(--greenc)}
.badge.rose{background:var(--rose-soft);color:var(--rose)} .badge.red{background:var(--red-soft);color:var(--red)} .badge.navy{background:var(--green-soft);color:var(--green-2)}
.badge.hot{background:var(--red-soft);color:var(--red)} .badge.high{background:var(--orange-soft);color:var(--orange)} .badge.medium{background:var(--amber-soft);color:#9A6412} .badge.low{background:var(--slate-soft);color:var(--slate)}
.badge.sla{background:var(--red);color:#fff;animation:pulse 1.6s infinite}
.badge.new{background:linear-gradient(90deg,var(--gold),#F3D77A,var(--gold));background-size:400px 100%;animation:shimmer 2s linear infinite;color:#0B3D2E}
:root[data-theme="dark"] .badge.hot,:root[data-theme="dark"] .badge.red{color:#FF8A8A} :root[data-theme="dark"] .badge.green{color:#7BE39A} :root[data-theme="dark"] .badge.gold{color:#F0D27A} :root[data-theme="dark"] .badge.blue{color:#9DB8FF} :root[data-theme="dark"] .badge.medium,:root[data-theme="dark"] .badge.amber{color:#F2C879} :root[data-theme="dark"] .badge.violet{color:#C3B1FF} :root[data-theme="dark"] .badge.teal{color:#8EE0E1} :root[data-theme="dark"] .badge.navy{color:#9ED8BE} :root[data-theme="dark"] .badge.orange{color:#FFB38A} :root[data-theme="dark"] .badge.rose{color:#FF9DBF} :root[data-theme="dark"] .badge.cyan{color:#8EDBEB}
.pill-count{background:var(--gold);color:#0B3D2E;border-radius:999px;padding:0 7px;font-size:11px;font-weight:700}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 14px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-weight:600;font-size:13px;cursor:pointer;white-space:nowrap;transition:.15s;position:relative;overflow:hidden}
.btn:hover{background:var(--bg2);transform:translateY(-1px)} .btn:active{transform:scale(.96)} .btn:disabled{opacity:.5;cursor:default;transform:none}
.btn.p{background:linear-gradient(135deg,var(--green-2),var(--green));border-color:transparent;color:#fff;box-shadow:0 6px 16px rgba(11,61,46,.25)} .btn.p:hover{box-shadow:0 8px 22px rgba(11,61,46,.35)}
.btn.a{background:linear-gradient(135deg,#F0CB5A,var(--gold));border-color:transparent;color:#0B3D2E}
.btn.d{background:var(--red-soft);border-color:transparent;color:var(--red)}
.btn.wa{background:#DCF8E3;border-color:transparent;color:#128C4A} .btn.call{background:var(--blue-soft);border-color:transparent;color:var(--blue)}
:root[data-theme="dark"] .btn.wa{background:#163D2A;color:#7BE39A} :root[data-theme="dark"] .btn.call{background:#1C2A45;color:#9DB8FF}
.btn.sm{padding:6px 10px;font-size:12px;border-radius:9px} .btn.xs{padding:4px 8px;font-size:11px;border-radius:7px}
.btn.icon{padding:8px;width:36px;height:36px} .btn svg{width:16px;height:16px}
.btn.ghost{border-color:transparent;background:transparent} .btn.ghost:hover{background:var(--bg2)}
.btn.block{width:100%}
.btn .rip{position:absolute;border-radius:50%;background:rgba(255,255,255,.5);transform:scale(0);animation:ripple .5s linear;pointer-events:none} @keyframes ripple{to{transform:scale(4);opacity:0}}

/* forms */
input,select,textarea{font-family:inherit;font-size:14px;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;width:100%;outline:none;transition:.15s}
input:focus,select:focus,textarea:focus{border-color:var(--green-3);box-shadow:0 0 0 3px var(--green-soft)}
textarea{min-height:80px;resize:vertical} select{appearance:auto}
label.f{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;color:var(--muted)}
label.f > span.req::after{content:" *";color:var(--red)}
.fgrid{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)} .fgrid .full{grid-column:1/-1}
@media (max-width:600px){.fgrid{grid-template-columns:1fr}}
.seg{display:inline-flex;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:3px;gap:2px;flex-wrap:wrap}
.seg button{border:0;background:transparent;padding:6px 11px;border-radius:9px;font-weight:600;font-size:12px;color:var(--muted);cursor:pointer;transition:.15s}
.seg button.on{background:var(--card);color:var(--green-3);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.chips{display:flex;gap:6px;flex-wrap:wrap} .chip{padding:5px 11px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-size:12px;cursor:pointer;font-weight:500;transition:.15s}
.chip:hover{border-color:var(--green-3)} .chip.on{background:var(--green-2);color:#fff;border-color:var(--green-2)}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px} .filters select,.filters input{width:auto;min-width:130px;padding:7px 10px;font-size:13px}
.check{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;cursor:pointer} .check input{width:auto}

/* table */
table.tbl{width:100%;border-collapse:collapse} .tbl th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);font-weight:600}
.tbl td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle} .tbl tr:last-child td{border-bottom:0} .tbl tr.click{cursor:pointer;transition:.15s} .tbl tr.click:hover td{background:var(--bg2)}
.tbl tbody tr{animation:fadeIn .3s both}
.tbl .name{font-weight:600}
/* lead cards */
.lead-card{display:flex;gap:10px;padding:12px 14px 12px 16px;border-bottom:1px solid var(--line);cursor:pointer;position:relative;transition:.15s;animation:fadeUp .3s both}
.lead-card::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:4px;border-radius:0 4px 4px 0;background:var(--strip,transparent)}
.lead-card.s-hot{--strip:var(--red)} .lead-card.s-pool{--strip:var(--violet)} .lead-card.s-won{--strip:var(--greenc)} .lead-card.s-seller{--strip:var(--gold)}
.lead-card:last-child{border-bottom:0} .lead-card:hover{background:var(--bg2);transform:translateX(2px)}
.lead-card .body{flex:1;min-width:0} .lead-card .name{font-weight:600} .lead-card .meta{font-size:12px;color:var(--muted);display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.lead-card .acts{display:flex;gap:6px;align-items:center}
/* soft per-lead background tints (match avatar colour) */
.lead-card.bg-c1{background:#EEF7F2;--strip:#1F8A66}.lead-card.bg-c2{background:#FBF6E6;--strip:#D4AF37}.lead-card.bg-c3{background:#ECF2FD;--strip:#2F6FED}
.lead-card.bg-c4{background:#FCEEF3;--strip:#C2255C}.lead-card.bg-c5{background:#F1EDFB;--strip:#7048E8}.lead-card.bg-c6{background:#E9F6F6;--strip:#0F8B8D}
.lead-card.s-hot{--strip:var(--red)} .lead-card.s-pool.bg-c1,.lead-card.s-pool.bg-c2,.lead-card.s-pool.bg-c3,.lead-card.s-pool.bg-c4,.lead-card.s-pool.bg-c5,.lead-card.s-pool.bg-c6{--strip:var(--violet)}
.lead-card[class*="bg-c"]:hover{filter:brightness(.97)}
:root[data-theme="dark"] .lead-card.bg-c1{background:#15271F}:root[data-theme="dark"] .lead-card.bg-c2{background:#26231A}:root[data-theme="dark"] .lead-card.bg-c3{background:#192235}
:root[data-theme="dark"] .lead-card.bg-c4{background:#2A1B22}:root[data-theme="dark"] .lead-card.bg-c5{background:#211D33}:root[data-theme="dark"] .lead-card.bg-c6{background:#152828}

/* kanban */
.kanban{display:flex;gap:12px;overflow-x:auto;padding-bottom:12px;align-items:flex-start;min-height:60vh}
.kcol{flex:0 0 264px;background:var(--bg2);border-radius:var(--radius);padding:10px;max-height:78vh;display:flex;flex-direction:column;border-top:4px solid var(--kc,var(--slate));transition:.2s}
.kcol h3{display:flex;align-items:center;gap:8px;padding:4px 6px 10px;font-size:13px} .kcol h3 .cnt{margin-left:auto;background:var(--card);border-radius:999px;padding:0 8px;font-size:11px}
.kcol .cards{overflow-y:auto;display:flex;flex-direction:column;gap:8px;min-height:40px;flex:1}
.kcard{background:var(--card);border-radius:12px;padding:10px;box-shadow:0 1px 3px rgba(0,0,0,.08);cursor:grab;border:1px solid transparent;transition:.15s}
.kcard:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:var(--shadow)} .kcard.dragging{opacity:.6;transform:rotate(3deg) scale(1.03);box-shadow:var(--shadow-lg)} .kcol.over{outline:2px dashed var(--gold);background:var(--gold-soft)}
.kcard .n{font-weight:600;font-size:13px} .kcard .m{font-size:11px;color:var(--muted);margin-top:3px}
.kcard .f{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:11px}
.kc-slate{--kc:var(--slate)}.kc-blue{--kc:var(--blue)}.kc-teal{--kc:var(--teal)}.kc-amber{--kc:var(--amber)}.kc-violet{--kc:var(--violet)}.kc-cyan{--kc:var(--cyan)}.kc-orange{--kc:var(--orange)}.kc-gold{--kc:var(--gold)}.kc-green{--kc:var(--greenc)}.kc-rose{--kc:var(--rose)}.kc-navy{--kc:var(--green-2)}
.confetti{position:fixed;top:-10px;width:10px;height:14px;z-index:99;animation:confetti 1.8s ease-in forwards;pointer-events:none}

/* stepper */
.stepper{display:flex;gap:4px;margin:10px 0 4px;overflow-x:auto;padding-bottom:4px} .stepper .s{flex:1;min-width:64px;text-align:center;font-size:10px;color:var(--muted);position:relative}
.stepper .s i{display:block;height:6px;border-radius:3px;background:var(--bg2);margin-bottom:5px;transition:.4s} .stepper .s.done i{background:var(--green-3)} .stepper .s.cur i{background:linear-gradient(90deg,var(--green-3),var(--gold));box-shadow:0 0 0 2px var(--gold-soft)} .stepper .s.cur{color:var(--ink);font-weight:600}
.stepper .s.lost i{background:var(--red)}

/* timeline */
.tl{display:flex;flex-direction:column;gap:0} .tl .it{display:flex;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line);animation:slideR .3s both} .tl .it:last-child{border:0}
.tl .ico{width:30px;height:30px;border-radius:10px;background:var(--bg2);display:grid;place-items:center;flex:none;font-size:14px}
.tl .ico.call{background:var(--blue-soft)}.tl .ico.whatsapp{background:#DCF8E3}.tl .ico.status{background:var(--violet-soft)}.tl .ico.rate{background:var(--gold-soft)}.tl .ico.followup{background:var(--amber-soft)}.tl .ico.visit{background:var(--orange-soft)}
.tl .tx{flex:1} .tl .when{font-size:11px;color:var(--muted)}

/* charts */
.bars{display:flex;align-items:flex-end;gap:8px;height:150px;padding-top:10px} .bars .b{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end;position:relative}
.bars .b .stack{width:100%;display:flex;flex-direction:column-reverse;gap:2px;height:100%;justify-content:flex-start;transform-origin:bottom;animation:growBar .8s cubic-bezier(.2,.8,.2,1) both}
.bars .b .seg1{background:var(--green-3);border-radius:4px 4px 0 0} .bars .b .seg2{background:var(--gold)} .bars .b .seg3{background:var(--blue)} .bars .b .seg4{background:var(--greenc)}
.bars .b .lb{font-size:10px;color:var(--muted)} .bars .b:hover .tip{opacity:1} .bars .b .tip{position:absolute;top:-6px;background:var(--ink);color:var(--card);font-size:10px;padding:3px 6px;border-radius:6px;opacity:0;transition:.15s;white-space:nowrap;pointer-events:none}
.legend{display:flex;gap:12px;font-size:11px;color:var(--muted);flex-wrap:wrap} .legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px}
.hbar{display:flex;align-items:center;gap:10px;font-size:12px;padding:4px 0} .hbar .lb{width:120px;flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hbar .tr{flex:1;background:var(--bg2);border-radius:6px;height:14px;overflow:hidden} .hbar .fl{height:100%;background:linear-gradient(90deg,var(--green-3),var(--green-2));border-radius:6px;animation:growW .9s cubic-bezier(.2,.8,.2,1) both} .hbar .v{width:46px;text-align:right;font-weight:600}
.donut{display:flex;align-items:center;gap:16px} .donut svg{flex:none} .donut .lg{display:flex;flex-direction:column;gap:5px;font-size:12px} .donut .lg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px}
.funnel{display:flex;flex-direction:column;gap:6px} .funnel .st{display:flex;align-items:center;gap:10px} .funnel .bar{height:26px;border-radius:8px;display:flex;align-items:center;padding:0 10px;font-size:12px;font-weight:600;min-width:34px;animation:growW .8s both}
.progress{height:10px;background:var(--bg2);border-radius:999px;overflow:hidden} .progress i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),#F3D77A);border-radius:999px;animation:growW 1s both}

/* modal */
#modal-root .back{position:fixed;inset:0;background:rgba(8,22,16,.55);backdrop-filter:blur(3px);z-index:50;display:flex;align-items:flex-end;justify-content:center;padding:0;animation:fadeIn .15s}
@media (min-width:601px){#modal-root .back{align-items:center;padding:20px}}
.modal{background:var(--card);border-radius:22px 22px 0 0;width:100%;max-width:640px;max-height:92vh;overflow:auto;padding:20px;animation:up .22s cubic-bezier(.2,.8,.2,1)}
@media (min-width:601px){.modal{border-radius:22px}} .modal.wide{max-width:900px}
@keyframes up{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
.modal h2{margin-bottom:12px} .modal .actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
#toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:6px;align-items:center}
#toast div{background:var(--green);color:#fff;padding:10px 18px;border-radius:999px;font-size:13px;box-shadow:var(--shadow-lg);animation:up .25s;display:flex;gap:8px;align-items:center} #toast div.err{background:var(--red)} #toast div::before{content:"✔"} #toast div.err::before{content:"✖"}

/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:20px;background:linear-gradient(-45deg,#0B3D2E,#14624A,#0A2A1F,#1F8A66);background-size:400% 400%;animation:gradMove 14s ease infinite;position:relative;overflow:hidden}
.login::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(212,175,55,.25),transparent 70%);top:-160px;right:-120px}
.login .box{background:var(--card);border-radius:24px;padding:30px 28px;width:100%;max-width:410px;box-shadow:0 30px 70px rgba(0,0,0,.35);animation:pop .5s cubic-bezier(.2,.8,.2,1);position:relative}
.login .box .brand{justify-content:center;padding-bottom:18px;flex-direction:column;gap:8px} .login .box .brand .t1{color:var(--ink);font-size:20px} .login .box .brand .t2{color:var(--gold-2)}
.login .box .brand .mark{width:96px;height:96px;box-shadow:0 0 0 3px var(--gold),0 10px 30px rgba(0,0,0,.25);animation:glow 3s infinite}
.login .box form{display:flex;flex-direction:column;gap:12px}
.login .offices{font-size:11px;color:var(--muted);text-align:center;margin-top:12px;line-height:1.6}
.bio{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px;border-radius:14px;border:2px dashed var(--gold);background:var(--gold-soft);color:var(--green);font-weight:600;cursor:pointer;transition:.15s} .bio:hover{background:var(--gold);color:#0B3D2E} .bio svg{width:26px;height:26px}
.or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:11px} .or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}

/* lead detail */
.detail-head{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap} .detail-head .acts{display:flex;gap:6px;flex-wrap:wrap}
.kv{display:grid;grid-template-columns:130px 1fr;gap:6px 10px;font-size:13px} .kv dt{color:var(--muted);font-size:12px;padding-top:2px} .kv dd{margin:0;font-weight:500}
.kv dd select,.kv dd input{padding:6px 9px;font-size:13px}
.offer-box{background:linear-gradient(135deg,var(--gold-soft),var(--card));border:1px solid rgba(212,175,55,.45);border-radius:var(--radius);padding:14px}
.offer-box .big{font-size:20px;font-weight:700}
.cmp{display:flex;height:10px;border-radius:999px;overflow:hidden;background:var(--bg2);margin-top:8px} .cmp i{display:block;height:100%} .cmp .o{background:var(--blue)} .cmp .r{background:var(--gold)}
.will{display:flex;gap:6px} .will button{flex:1;border:1px solid var(--line);background:var(--card);padding:9px 4px;border-radius:10px;font-weight:600;cursor:pointer;font-size:12px;transition:.15s;color:var(--ink)} .will button.on{background:linear-gradient(135deg,var(--green-2),var(--green-3));color:#fff;border-color:transparent;transform:scale(1.04)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:12px;overflow-x:auto} .tabs button{border:0;background:transparent;padding:10px 12px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;font-size:13px;transition:.15s}
.tabs button.on{color:var(--green-3);border-bottom-color:var(--gold)}
.empty{padding:34px 20px;text-align:center;color:var(--muted);animation:fadeIn .4s} .empty .big{font-size:40px;margin-bottom:6px;animation:bounce 2s infinite} .empty svg{width:120px;height:90px;margin-bottom:8px;opacity:.8}
.fab{position:fixed;right:18px;bottom:86px;width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,#F0CB5A,var(--gold));color:#0B3D2E;display:grid;place-items:center;box-shadow:0 10px 26px rgba(212,175,55,.5);z-index:39;border:0;cursor:pointer;animation:glow 3s infinite;transition:.15s}
.fab:active{transform:scale(.92)} .fab svg{width:26px;height:26px} @media (min-width:901px){.fab{display:none}}
.settings-nav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.list-edit{display:grid;gap:8px} .list-edit .it{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:center}
@media (max-width:600px){.list-edit .it{grid-template-columns:1fr}}
.rule{border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:10px;transition:.15s} .rule:hover{border-color:var(--gold)}
.msg{display:flex;gap:8px;margin-bottom:10px;animation:fadeUp .25s} .msg .bub{background:var(--bg2);border-radius:14px 14px 14px 4px;padding:8px 12px;max-width:80%} .msg.me{flex-direction:row-reverse} .msg.me .bub{background:var(--green-soft);border-radius:14px 14px 4px 14px}
.dup{background:var(--gold-soft);border:1px solid rgba(212,175,55,.5);border-radius:12px;padding:8px 12px;font-size:12px}
.online{width:8px;height:8px;border-radius:50%;background:#2B8A3E;display:inline-block;margin-right:4px;box-shadow:0 0 0 3px rgba(43,138,62,.2)} .offline{background:#C5CCC8;box-shadow:none}
.swatch{width:28px;height:28px;border-radius:9px;border:2px solid transparent;cursor:pointer;transition:.15s} .swatch:hover{transform:scale(1.1)} .swatch.on{border-color:var(--ink)}
.spin{display:inline-block;width:18px;height:18px;border:2px solid var(--line);border-top-color:var(--gold);border-radius:50%;animation:spinG .8s linear infinite}
.loading{padding:40px;text-align:center}
.skel{background:linear-gradient(90deg,var(--bg2) 25%,var(--card) 50%,var(--bg2) 75%);background-size:800px 100%;animation:shimmer 1.3s infinite;border-radius:10px}
.skel.line{height:14px;margin:8px 0} .skel.card{height:90px;margin-bottom:12px;border-radius:var(--radius)}
.checkmark{width:52px;height:52px;margin:0 auto 8px} .checkmark circle{fill:none;stroke:var(--greenc);stroke-width:3;stroke-dasharray:160;stroke-dashoffset:160;animation:drawCheck .5s ease-out forwards} .checkmark path{fill:none;stroke:var(--greenc);stroke-width:4;stroke-linecap:round;stroke-dasharray:50;stroke-dashoffset:50;animation:drawCheck .4s .3s ease-out forwards}
.theme-toggle{display:inline-flex;align-items:center;gap:6px;cursor:pointer;border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:12px;font-weight:600;background:var(--card);color:var(--ink)}
.side .theme-toggle{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15);color:#fff}
.ptr{position:fixed;top:0;left:50%;transform:translateX(-50%) translateY(-60px);z-index:45;background:var(--card);border-radius:999px;padding:8px 14px;box-shadow:var(--shadow-lg);font-size:12px;transition:transform .2s;display:flex;gap:8px;align-items:center}
@media print{.side,.tabbar,.top,.fab{display:none!important} .main{padding:0}}