/* منصة Agents — the Logic Leap Workspace look (tokens, login, logo, load ring copied from the ERP front-end) */
:root{--ll-purple:#8f3b9e;--ll-magenta:#c65ad4;--ll-magenta-soft:#e18aec;--ll-grad:linear-gradient(135deg,#8f3b9e,#c65ad4);
--ll-grad-text:linear-gradient(120deg,#e18aec,#c65ad4 55%,#8f3b9e);--ll-glow:rgba(198,90,212,.45);--ll-ink:#0b0612;--ll-ink-2:#120a1c;
--ll-panel:#1a0f28;--ll-panel-2:#221336;--ll-hover:rgba(198,90,212,.08);--ll-selected:rgba(198,90,212,.14);--ll-hairline:#392352;
--ll-hairline-soft:#2a1840;--ll-text:#f3edf8;--ll-text-2:#d9cce6;--ll-muted:#c5b6d6;--ll-muted-2:#9a88b0;--ll-ok:#3fe0b0;--ll-info:#6cc4ff;
--ll-warning:#f5b84a;--ll-danger:#ff6b81;--ll-navbar-h:50px;--ll-radius:10px;--ll-radius-sm:6px;--ll-radius-lg:18px;
--ll-shadow:0 10px 30px -12px rgba(0,0,0,.6);--ll-shadow-lg:0 24px 60px -20px rgba(0,0,0,.8);--ll-font:"Cairo",system-ui,"Segoe UI",Tahoma,sans-serif;
--ll-fs:1;--ll-accent:var(--ll-magenta);--ll-accent-rgb:198 90 212;--ll-primary-rgb:143 59 158;--ll-surface-rgb:26 15 40;--ll-on-accent:#fff;color-scheme:dark}
:root[data-theme=light]{color-scheme:light;--ll-ink:#f4f5f9;--ll-ink-2:#fff;--ll-panel:#fff;--ll-panel-2:#eef0f5;--ll-hairline:#d5d9e3;
--ll-hairline-soft:#e6e8ef;--ll-text:#1a1530;--ll-text-2:#352f4d;--ll-muted:#4c4662;--ll-muted-2:#6a657e;--ll-purple:#7a2d8a;--ll-magenta:#a63fb6;
--ll-magenta-soft:#862f97;--ll-grad:linear-gradient(135deg,#7a2d8a,#a63fb6);--ll-grad-text:linear-gradient(120deg,#a63fb6,#7a2d8a 55%,#5a2266);
--ll-ok:#0b6e52;--ll-info:#1d5fa8;--ll-warning:#8a4f00;--ll-danger:#b4233a;--ll-accent-rgb:166 63 182;--ll-primary-rgb:122 45 138;--ll-surface-rgb:255 255 255;
--ll-shadow:0 10px 30px -14px rgba(26,21,48,.18);--ll-shadow-lg:0 24px 60px -24px rgba(26,21,48,.25)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--ll-ink);color:var(--ll-text);font:14px/1.7 var(--ll-font)}
a{color:var(--ll-magenta-soft)}
.ll-muted{color:var(--ll-muted)}.ll-small{font-size:calc(12.5px * var(--ll-fs))}.ll-stack{display:flex;flex-direction:column;gap:16px}

/* background: the ERP's radial glow + faint grid */
.ll-login-page,.ll-home{position:relative;min-height:100vh;background:radial-gradient(900px 520px at 85% -10%,rgb(var(--ll-primary-rgb) / .38),transparent 62%),
radial-gradient(760px 520px at 0% 105%,rgb(var(--ll-accent-rgb) / .18),transparent 60%),var(--ll-ink);background-attachment:fixed}
.ll-login-page:before,.ll-home:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgb(var(--ll-accent-rgb) / .06) 1px,transparent 1px),
linear-gradient(90deg,rgb(var(--ll-accent-rgb) / .06) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(at 50% 30%,#000 20%,transparent 75%);mask-image:radial-gradient(at 50% 30%,#000 20%,transparent 75%)}
.ll-login-page>*,.ll-home>*{position:relative}

/* logo */
.ll-logo{display:inline-flex;align-items:center;gap:7px;font-weight:900;letter-spacing:1px;line-height:1;user-select:none;direction:ltr}
.ll-logo-logic{color:#c65ad4}.ll-logo-leap{color:#fff;background:linear-gradient(135deg,#8f3b9e,#c65ad4);border-radius:6px;box-shadow:0 4px 18px -4px rgba(198,90,212,.45)}
.ll-logo-sm{font-size:calc(15px * var(--ll-fs))}.ll-logo-sm .ll-logo-leap{padding:4px 8px 5px}

/* login */
.ll-login-page{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px 80px}
.ll-login-card{width:100%;max-width:400px;background:linear-gradient(150deg,rgb(var(--ll-primary-rgb) / .12),rgb(var(--ll-surface-rgb) / .9));
border:1px solid var(--ll-hairline-soft);border-radius:var(--ll-radius-lg);box-shadow:var(--ll-shadow-lg);padding:34px 30px 22px;backdrop-filter:blur(10px)}
.ll-login-brand{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:28px}
.ll-login-company{margin:0;font-size:calc(26px * var(--ll-fs));font-weight:800;line-height:1.3;text-align:center;background:var(--ll-grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.ll-login-footer{display:flex;justify-content:space-between;align-items:center;margin-top:24px;padding-top:14px;border-top:1px solid var(--ll-hairline-soft)}
.ll-login-poweredby{position:absolute;bottom:22px;inset-inline:0;display:flex;align-items:center;justify-content:center;gap:10px;direction:ltr;opacity:.85}
.ll-login-product{font-size:calc(12px * var(--ll-fs));font-weight:600;letter-spacing:3px;color:var(--ll-muted)}
.ll-login-card .ll-input{height:42px;padding:0 14px;border:1px solid var(--ll-hairline);border-radius:var(--ll-radius);background:var(--ll-ink-2)}
.ll-login-card .ll-input:focus{border-color:var(--ll-magenta);box-shadow:0 0 0 3px rgb(var(--ll-accent-rgb) / .18)}
.ll-alert{padding:9px 12px;border-radius:var(--ll-radius);font-size:13px;border:1px solid}
.ll-alert-danger{background:rgba(255,107,129,.1);border-color:rgba(255,107,129,.35);color:var(--ll-danger)}

/* form controls (same as the ERP) */
.ll-label-stack{display:flex;flex-direction:column;gap:4px;font-weight:600;color:var(--ll-text-2)}
.ll-input,:where(input:not([type=checkbox]):not([type=file]):not([type=hidden]),select){width:100%;height:34px;padding:2px 6px;border:0;border-bottom:1px solid var(--ll-hairline);
border-radius:0;background:transparent;font:inherit;color:var(--ll-text);outline:none;transition:border-color .15s,box-shadow .15s}
:where(input,select):hover{border-bottom-color:var(--ll-muted-2)}
:where(input,select):focus{border-bottom-color:var(--ll-magenta);box-shadow:0 1px 0 0 var(--ll-magenta)}
select{cursor:pointer}select option{background:var(--ll-panel);color:var(--ll-text)}input::placeholder{color:var(--ll-muted-2)}
input[type=checkbox]{accent-color:var(--ll-magenta)}
.ll-btn,button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 16px;border:1px solid transparent;border-radius:var(--ll-radius);
font:inherit;font-weight:600;cursor:pointer;white-space:nowrap;text-decoration:none;transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s,transform .15s;
background:var(--ll-grad);color:var(--ll-on-accent);box-shadow:0 8px 26px -8px var(--ll-glow)}
.ll-btn:hover:not(:disabled),button:hover:not(:disabled),.btn:hover{box-shadow:0 10px 30px -6px var(--ll-glow);transform:translateY(-1px)}
.ll-btn-block{width:100%;height:42px;font-size:calc(15px * var(--ll-fs))}
.btn.sec,.ll-btn-ghost{background:transparent;color:var(--ll-magenta-soft);border-color:var(--ll-hairline);box-shadow:none}
.btn.sec:hover,.ll-btn-ghost:hover{background:var(--ll-hover);box-shadow:none}
.btn.bad{background:var(--ll-danger);box-shadow:none}
.ll-link-btn{border:0;background:none;color:var(--ll-magenta-soft);font:inherit;cursor:pointer;padding:0;box-shadow:none;height:auto}
.ll-link-btn:hover{transform:none;box-shadow:none}

/* shell: top bar + side nav */
.ll-topbar{position:sticky;top:0;z-index:20;height:var(--ll-navbar-h);display:flex;align-items:center;gap:12px;padding:0 16px;background:color-mix(in srgb,var(--ll-ink-2) 92%,transparent);
border-bottom:1px solid var(--ll-hairline-soft);backdrop-filter:blur(8px)}
.ll-topbar-title{font-weight:700;font-size:15px;color:var(--ll-text)}
.ll-topbar .sp{margin-inline-start:auto}
.ll-icon-btn{display:inline-grid;place-items:center;width:34px;height:34px;padding:0;border-radius:var(--ll-radius);border:1px solid transparent;background:transparent;
color:var(--ll-text-2);box-shadow:none;cursor:pointer}
.ll-icon-btn:hover{background:var(--ll-hover);color:var(--ll-magenta-soft);transform:none;box-shadow:none}
.ll-icon-btn svg,.ll-nav svg{width:18px;height:18px}
.ll-user{display:inline-flex;align-items:center;gap:8px;color:var(--ll-text-2);font-weight:600}
.ll-avatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--ll-grad);color:#fff;font-size:12px;font-weight:700}
.ll-shell{display:grid;grid-template-columns:232px 1fr;min-height:calc(100vh - var(--ll-navbar-h))}
.ll-nav{background:color-mix(in srgb,var(--ll-ink-2) 85%,transparent);border-inline-end:1px solid var(--ll-hairline-soft);padding:14px 10px;display:flex;flex-direction:column;gap:2px}
.ll-nav a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--ll-radius);color:var(--ll-text-2);text-decoration:none;font-weight:600}
.ll-nav a:hover{background:var(--ll-hover);color:var(--ll-text)}
.ll-nav a.on{background:var(--ll-selected);color:var(--ll-magenta-soft);box-shadow:inset -3px 0 0 var(--ll-magenta)}
.ll-nav .ll-nav-sep{height:1px;background:var(--ll-hairline-soft);margin:8px 6px}
main{padding:22px 26px;min-width:0}
.ll-page-title{font-size:calc(22px * var(--ll-fs));font-weight:800;margin:0 0 18px}
h3{margin:0 0 12px;font-size:15px;font-weight:700}

/* surfaces */
.card{background:var(--ll-panel);border:1px solid var(--ll-hairline-soft);border-radius:var(--ll-radius-lg);padding:18px;margin-bottom:16px;overflow-x:auto;box-shadow:var(--ll-shadow)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:16px}
.tile{background:var(--ll-panel);border:1px solid var(--ll-hairline-soft);border-radius:var(--ll-radius-lg);padding:14px 16px;position:relative;overflow:hidden}
.tile:before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;background:var(--ll-grad)}
.tile .v{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums}.tile .k{color:var(--ll-muted-2);font-size:12.5px;font-weight:600}
table{width:100%;border-collapse:collapse}th,td{padding:9px 10px;border-bottom:1px solid var(--ll-hairline-soft);text-align:right;white-space:nowrap}
th{color:var(--ll-muted-2);font-weight:700;font-size:12.5px;background:var(--ll-panel-2)}tbody tr:hover{background:var(--ll-hover)}td{font-variant-numeric:tabular-nums}
.row{display:flex;gap:14px;flex-wrap:wrap;align-items:end}.row label{display:flex;flex-direction:column;gap:2px;font-size:12.5px;font-weight:600;color:var(--ll-text-2);min-width:140px}
.row label input,.row label select{width:auto;min-width:140px}
.s-completed,.s-running{color:var(--ll-ok);font-weight:700}.s-failed,.s-rejected{color:var(--ll-danger);font-weight:700}
.s-in_progress,.s-dialing{color:var(--ll-info);font-weight:700}.s-no_answer,.s-paused{color:var(--ll-warning);font-weight:700}.s-draft,.s-done{color:var(--ll-muted);font-weight:700}
.msg{padding:10px 14px;border-radius:var(--ll-radius);background:var(--ll-selected);border:1px solid var(--ll-hairline);margin-bottom:14px}
.transcript{display:flex;flex-direction:column}
.t-agent,.t-user,.t-tool{padding:8px 12px;border-radius:var(--ll-radius);margin-bottom:8px;max-width:80%}
.t-agent{background:var(--ll-selected)}.t-user{background:var(--ll-panel-2);margin-inline-start:auto}.t-tool{color:var(--ll-muted-2);font-size:12.5px;max-width:100%}
.t-agent b,.t-user b{display:block;font-size:12px;color:var(--ll-muted-2)}.t-agent b{color:var(--ll-magenta-soft)}
.bar{height:8px;background:var(--ll-panel-2);border-radius:6px;overflow:hidden}.bar i{display:block;height:100%;background:var(--ll-grad)}

/* the ERP's loading ring */
@keyframes ll-spin{to{transform:rotate(360deg)}}
.ll-loadring{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .25s}
.ll-loadring.on{opacity:1;pointer-events:auto}
.ll-loadring-disc{position:relative;width:172px;height:172px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--ll-panel) 88%,transparent);
border:1px solid var(--ll-hairline-soft);box-shadow:0 18px 48px color-mix(in srgb,#000 35%,transparent),0 0 36px color-mix(in srgb,var(--ll-accent) 22%,transparent);
backdrop-filter:blur(6px);transform:scale(.92);transition:transform .25s}
.ll-loadring.on .ll-loadring-disc{transform:scale(1)}
.ll-loadring-svg{position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);animation:ll-spin 1.4s linear infinite}
.ll-loadring-svg circle{fill:none;stroke-width:6}
.ll-loadring-track{stroke:color-mix(in srgb,var(--ll-accent) 16%,transparent)}
.ll-loadring-arc{stroke:url(#ll-loadring-grad);stroke-linecap:round;transition:stroke-dasharray .3s;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--ll-accent) 60%,transparent))}
.ll-loadring-text{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px}
.ll-loadring-ws{font-size:calc(11px * var(--ll-fs));font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ll-muted)}
@media (prefers-reduced-motion:reduce){.ll-loadring-svg{animation:none}.ll-loadring-arc,.ll-loadring-disc{transition:none}}

@media (max-width:820px){.ll-shell{grid-template-columns:1fr}.ll-nav{flex-direction:row;overflow-x:auto;border:0;border-bottom:1px solid var(--ll-hairline-soft)}
.ll-nav a{white-space:nowrap}.ll-nav .ll-nav-sep{display:none}main{padding:16px}.ll-user span:not(.ll-avatar){display:none}}
