:root{--bg:#F7F4F8;--card:#fff;--line:#EAE4EC;--line2:#DCD3DF;--soft:#F0EAF1;--ink:#1E1A22;--ink2:#3A3440;--mut:#655E6B;--pri:#93388F;--pri-d:#7A2B77;--pri-t:#F4E8F3;--plum:#2A1F2C;--ok:#17663F;--ok-t:#E3F3EA;--warn:#7A4F00;--warn-t:#FBF0D9;--bad:#9A2B24;--bad-t:#FBE9E7;--info:#1B4F8C;--info-t:#E6EFF9}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:'Readex Pro',system-ui,sans-serif;color:var(--ink);background:var(--bg);font-size:14px;line-height:1.5}
button,input,select,textarea{font-family:inherit;font-size:14px;color:inherit}
a{color:var(--pri-d)}
h1{margin:0;font-size:26px;font-weight:700}h2{margin:0;font-size:17px;font-weight:600}
.mut{color:var(--mut)}.sm{font-size:12.5px}.b{font-weight:600}.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.row{display:flex;align-items:center;gap:12px}.wrap{flex-wrap:wrap}.col{display:flex;flex-direction:column;gap:12px}.grow{flex:1;min-width:0}
.btn{min-height:44px;padding:0 16px;border-radius:10px;border:1px solid var(--line2);background:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;color:var(--ink);white-space:nowrap}
.btn:hover{background:#FAF3FA}.btn.pri{background:var(--pri);border-color:var(--pri);color:#fff;font-weight:600}.btn.pri:hover{background:var(--pri-d)}
.btn.danger{border-color:#D9A6A1;color:var(--bad)}.btn.sm{min-height:38px;padding:0 12px;font-size:13px}.btn:disabled{opacity:.55;cursor:default}
.btn.ghost{border-color:transparent;background:transparent;color:var(--mut)}
.in,select.in,textarea.in{width:100%;min-height:44px;padding:0 12px;border-radius:10px;border:1px solid var(--line2);background:#fff}
textarea.in{padding:10px 12px;line-height:1.6;resize:vertical}
.in:focus,.btn:focus-visible,a:focus-visible{outline:2px solid var(--pri);outline-offset:1px}
.in:disabled{background:#F3EEF4;color:var(--mut);border-color:var(--line)}
label.f{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--mut)}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;padding:4px 10px;border-radius:12px;white-space:nowrap;background:#EFE9F0;color:var(--ink2)}
.chip.new{background:var(--info-t);color:var(--info)}.chip.interested,.chip.pri{background:var(--pri-t);color:var(--pri-d)}.chip.trial,.chip.warn{background:var(--warn-t);color:var(--warn)}.chip.enrolled,.chip.ok{background:var(--ok-t);color:var(--ok)}.chip.lost,.chip.bad{background:var(--bad-t);color:var(--bad)}.chip.dark{background:var(--plum);color:#fff}
.av{width:36px;height:36px;border-radius:50%;background:var(--pri-t);color:var(--pri-d);font-size:12.5px;font-weight:600;display:flex;align-items:center;justify-content:center;flex:none}
.av.g{background:#EFE9F0;color:var(--ink2)}
table{width:100%;border-collapse:collapse}th{font-size:12.5px;font-weight:500;color:var(--mut);text-align:start;padding:8px 10px}td{padding:12px 10px;border-top:1px solid var(--soft);text-align:start}th,td{white-space:nowrap}
.scroll-x{overflow-x:auto}tr.click{cursor:pointer}tr.click:hover,tr.sel{background:#FAF3FA}
.bar{height:8px;border-radius:4px;background:var(--soft);overflow:hidden;flex:1}.bar>i{display:block;height:100%;border-radius:4px;background:var(--pri)}
/* الهيكل */
.shell{display:flex;min-height:100vh}
.side{width:256px;flex:none;background:#fff;border-inline-end:1px solid var(--line);padding:20px 16px 16px;display:flex;flex-direction:column;gap:22px;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;padding-inline:6px}.brand img{width:72px;height:72px;object-fit:contain}
.nav{display:flex;flex-direction:column;gap:4px}
.nav a{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:10px;text-decoration:none;color:var(--ink2);font-size:14.5px}
.nav a:hover{background:#FAF3FA}.nav a.on{background:var(--pri-t);color:var(--pri-d);font-weight:600}
.badge{min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--pri);color:#fff;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;margin-inline-start:auto}
.seg{display:flex;background:#F3EEF4;border-radius:10px;padding:4px;gap:4px}.seg button{flex:1;min-height:36px;border:0;border-radius:7px;background:transparent;color:var(--mut);cursor:pointer;font-size:13px}.seg button.on{background:#fff;color:var(--ink);font-weight:600}
.userchip{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;width:100%;text-align:start}
.main{flex:1;min-width:0;padding:28px 32px 40px;display:flex;flex-direction:column;gap:20px}
.main.flush{padding:0;gap:0}
.head{display:flex;flex-wrap:wrap;align-items:center;gap:14px}.head .t{flex:1 1 240px;display:flex;flex-direction:column;gap:4px}
.grid{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}.g2{flex:2 1 560px;min-width:0}.g1{flex:1 1 320px;min-width:0}
.kpi{flex:1 1 200px;display:flex;flex-direction:column;gap:8px}.kpi .v{font-size:32px;font-weight:700;line-height:1}
.li{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--soft)}
.ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.banner{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 16px;background:var(--warn-t);color:#5E3D00;font-size:13px}
/* المحادثات */
.inbox{display:flex;flex:1;min-height:0;height:100vh}
.inbox.demo{height:calc(100vh - 58px)}
.clist{width:340px;flex:none;background:#fff;border-inline-end:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.clist .items{overflow-y:auto;flex:1}
.citem{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:start;border:0;border-top:1px solid var(--soft);background:#fff;padding:14px 18px;cursor:pointer}
.citem:hover,.citem.on{background:#FAF3FA}
.tabs{display:flex;gap:6px;flex-wrap:wrap}.tab{min-height:36px;padding:0 14px;border-radius:18px;border:1px solid var(--line2);background:#fff;cursor:pointer;font-size:13px}.tab.on{background:var(--pri);border-color:var(--pri);color:#fff;font-weight:600}
.chat{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}
.chat-head{background:#fff;border-bottom:1px solid var(--line);padding:12px 20px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.msgs{flex:1;overflow-y:auto;padding:22px 24px;display:flex;flex-direction:column;gap:14px}
.msg{max-width:72%;display:flex;flex-direction:column;gap:4px;align-self:flex-start}.msg.d-out{align-self:flex-end}.msg.d-note{align-self:center}
.msg .bub{padding:11px 14px;border-radius:14px;font-size:14.5px;line-height:1.65;background:#fff;border:1px solid var(--line);white-space:pre-wrap;overflow-wrap:anywhere}
.msg.d-out .bub{background:var(--pri-t);border-color:#E6D2E5}.msg.d-note .bub{background:var(--warn-t);border-color:#EBD9AE;color:#5E3D00}
.msg .meta{font-size:11.5px;color:var(--mut);padding-inline:4px}
.composer{background:#fff;border-top:1px solid var(--line);padding:12px 20px 16px;display:flex;flex-direction:column;gap:10px}
.lpane{width:300px;flex:none;background:#fff;border-inline-start:1px solid var(--line);padding:22px 18px;display:flex;flex-direction:column;gap:16px;overflow-y:auto}
.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--mut);padding:40px;text-align:center}
.pills{display:flex;flex-wrap:wrap;gap:8px}.pill{min-height:40px;padding:0 14px;border-radius:20px;border:1px solid var(--line2);background:#fff;cursor:pointer;font-size:13.5px}.pill.on{background:var(--pri);border-color:var(--pri);color:#fff;font-weight:600}
.note-box{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:10px;background:#F3EEF4;color:var(--ink2);font-size:13px;line-height:1.6}.note-box.ok{background:var(--ok-t);color:var(--ok)}
/* شارت */
.chart{display:flex;align-items:flex-end;gap:14px;height:240px;border-bottom:1px solid var(--line2);padding-inline:6px;min-width:520px}
.chart .wk{flex:1;display:flex;align-items:flex-end;justify-content:center;gap:4px}.chart .c{flex:1;max-width:26px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11.5px}
.chart .c i{display:block;width:100%;border-radius:5px 5px 0 0;background:#C9A3C7;min-height:3px}.chart .c.w i{background:#6B2468}
.wlabels{display:flex;gap:14px;padding:8px 6px 0;min-width:520px}.wlabels span{flex:1;text-align:center;font-size:12px;color:var(--mut)}
.repcard{flex:1 1 210px;text-align:start;background:#fff;border:2px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px;cursor:pointer}.repcard.on{border-color:var(--pri)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--mut);display:inline-block}.dot.on{background:#1B7F4F}
.perm{display:inline-flex;width:26px;height:26px;border-radius:50%;align-items:center;justify-content:center;background:#EFE9F0;color:var(--mut)}.perm.y{background:var(--ok-t);color:var(--ok)}
/* مودال وتوست */
.modal-bg{position:fixed;inset:0;background:rgba(30,26,34,.5);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}
.modal{background:#fff;border-radius:16px;padding:24px;width:100%;max-width:460px;max-height:90vh;overflow-y:auto;display:flex;flex-direction:column;gap:14px}
#toasts{position:fixed;bottom:20px;inset-inline-start:20px;display:flex;flex-direction:column;gap:10px;z-index:60;max-width:min(380px,calc(100vw - 40px))}
.toast{background:var(--plum);color:#fff;border-radius:12px;padding:14px 16px;display:flex;gap:12px;align-items:flex-start;box-shadow:0 8px 24px rgba(30,26,34,.25)}
.toast.err{background:#7A1F19}.toast .x{margin-inline-start:auto;background:transparent;border:0;color:#D9C7DA;cursor:pointer;min-width:32px;min-height:32px;font-size:18px}
/* الدخول + الانترو */
.login{display:flex;flex-wrap:wrap;min-height:100vh;background:var(--plum);overflow:hidden}
.login .stage{flex:999 1 380px;min-width:0;min-height:520px;padding:40px 24px 32px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px}
.login .sq{position:relative;width:min(440px,86%);aspect-ratio:1/1}
.login .sq svg,.login .sq img{position:absolute;inset:0;width:100%;height:100%}.login .sq svg{overflow:visible}
.login .sq img{object-fit:cover;border-radius:28px;clip-path:circle(90% at 47.1% 41.4%);animation:rv-logo 1.1s 3.1s cubic-bezier(.3,.7,.2,1) backwards}
.login .cap{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;color:#D9C7DA;animation:rv-fade .8s 4s backwards}
.login .panel{flex:1 1 420px;max-width:560px;min-width:0;overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center;animation:rv-open .9s 4.4s cubic-bezier(.2,.8,.2,1) backwards}
.login form{width:100%;min-width:300px;max-width:400px;padding:40px 28px;display:flex;flex-direction:column;gap:18px;animation:rv-fade .7s 5s backwards}
.rv-tower{animation:rv-rise 1.1s cubic-bezier(.2,.8,.2,1) backwards}
.rv-star{opacity:.35;animation:rv-twinkle 2.4s backwards}
.rv-ring{opacity:0;transform-origin:210.5px 185px;animation:rv-chime 1.5s ease-out}
.rv-hand{transform-origin:210.5px 185px}.rv-hand.h{animation:rv-spin-h 2.2s .9s cubic-bezier(.15,.7,.2,1) backwards}.rv-hand.m{animation:rv-spin-m 2.2s .9s cubic-bezier(.15,.7,.2,1) backwards}
.rv-glow{opacity:.2;animation:rv-glow 1.4s 1.2s backwards}
@keyframes rv-rise{from{transform:translateY(90px);opacity:0}}
@keyframes rv-spin-m{from{transform:rotate(-1440deg)}}
@keyframes rv-spin-h{from{transform:rotate(-120deg)}}
@keyframes rv-glow{from{opacity:0}}
@keyframes rv-chime{from{transform:scale(.5);opacity:.8}to{transform:scale(3.4);opacity:0}}
@keyframes rv-fade{from{opacity:0;transform:translateY(14px)}}
@keyframes rv-open{from{max-width:0;opacity:0}}
@keyframes rv-twinkle{from{opacity:0}50%{opacity:.9}to{opacity:.35}}
@keyframes rv-logo{from{clip-path:circle(0% at 47.1% 41.4%)}to{clip-path:circle(90% at 47.1% 41.4%)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}
@media (max-width:900px){
.shell{flex-direction:column}.side{width:auto;height:auto;position:static;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 12px}
.brand img{width:44px;height:44px}.brand .sub{display:none}.nav{flex-direction:row;overflow-x:auto;flex:1 1 100%;order:3}.nav a{white-space:nowrap}.side .bottom{margin:0 0 0 auto;flex-direction:row;align-items:center}.side .bottom .seg{display:none}.userchip .who{display:none}
.main{padding:18px 14px 30px}.inbox,.inbox.demo{flex-direction:column;height:auto}.clist,.lpane{width:auto;border:0;border-bottom:1px solid var(--line)}.clist .items{max-height:300px}.msgs{min-height:320px;max-height:60vh}.msg{max-width:90%}
}
.side .bottom{margin-top:auto;display:flex;flex-direction:column;gap:14px}