:root{--ink:#0F172A;--mut:#64748B;--line:#E2E8F0;--bg:#F5F7FB;--card:#fff;--pri:#4F46E5;--pri2:#7C3AED;--ok:#059669;--warn:#D97706;--err:#DC2626;--r:14px;--sh:0 1px 3px rgba(15,23,42,.06),0 8px 24px -12px rgba(15,23,42,.12)}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Tajawal',Tahoma,sans-serif;background:var(--bg);color:var(--ink);min-height:100vh;display:flex;flex-direction:column}
a{color:var(--pri);text-decoration:none}
.wrap{max-width:1200px;width:100%;margin:0 auto;padding:24px 20px;flex:1}
/* topbar */
.topbar{background:linear-gradient(135deg,#1E1B4B,#312E81 60%,#4C1D95);color:#fff;position:sticky;top:0;z-index:50;box-shadow:0 2px 12px rgba(30,27,75,.35)}
.tb-in{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:18px;min-height:58px}
.brand{color:#fff;font-size:1.15rem;display:flex;gap:6px;align-items:center}.brand span{opacity:.75;font-size:.85rem}
.nav{display:flex;gap:2px;flex-wrap:wrap;flex:1}
.nav a{color:#C7D2FE;padding:8px 11px;border-radius:9px;font-size:.92rem;font-weight:500;transition:.15s}
.nav a:hover{background:rgba(255,255,255,.1);color:#fff}
.nav a.on{background:rgba(255,255,255,.16);color:#fff;font-weight:700}
.ai-link{background:linear-gradient(135deg,#7C3AED,#DB2777)!important;color:#fff!important;font-weight:700!important}
.tb-user{display:flex;gap:10px;align-items:center;font-size:.88rem;color:#C7D2FE}
.logout{color:#FCA5A5;font-size:.82rem}
.burger{display:none;background:none;border:0;color:#fff;font-size:1.4rem;cursor:pointer}
@media(max-width:1080px){.burger{display:block}.nav{display:none;position:absolute;top:58px;right:0;left:0;background:#1E1B4B;flex-direction:column;padding:12px}.nav a{padding:12px}body.nav-open .nav{display:flex}}
/* cards & grids */
.grid{display:grid;gap:16px}
.g4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:20px}
.kpi{position:relative;overflow:hidden}
.kpi .t{color:var(--mut);font-size:.85rem;margin-bottom:6px}
.kpi .v{font-size:1.55rem;font-weight:800}
.kpi .v small{font-size:.85rem;color:var(--mut);font-weight:500}
.kpi::after{content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--pri),var(--pri2))}
h1.page{font-size:1.45rem;margin-bottom:4px}
.sub{color:var(--mut);font-size:.9rem;margin-bottom:18px}
.head-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:18px}
/* tables */
.tbl{width:100%;border-collapse:collapse;font-size:.92rem}
.tbl th{text-align:right;color:var(--mut);font-weight:600;font-size:.8rem;padding:10px 12px;border-bottom:2px solid var(--line);white-space:nowrap}
.tbl td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:nth-child(even) td{background:#FAFBFF}
.tbl tr:hover td{background:#F1F3FF}
.tbl .num{font-variant-numeric:tabular-nums;direction:ltr;text-align:left;white-space:nowrap}
.tbl-scroll{overflow-x:auto}
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.78rem;font-weight:700}
/* forms */
.frm{display:grid;gap:14px}
.frm-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
label.f{display:block}
label.f b{display:block;font-size:.82rem;color:var(--mut);margin-bottom:5px;font-weight:600}
input,select,textarea{width:100%;padding:9px 12px;border:1.5px solid var(--line);border-radius:10px;font-family:inherit;font-size:.92rem;background:#fff;transition:.15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--pri);box-shadow:0 0 0 3px rgba(79,70,229,.12)}
.btn{display:inline-block;padding:9px 20px;border-radius:10px;border:0;background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;font-family:inherit;font-size:.92rem;font-weight:700;cursor:pointer;transition:.15s}
.btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.btn-line{background:#fff;color:var(--pri);border:1.5px solid var(--pri)}
.btn-sm{padding:5px 12px;font-size:.82rem}
.btn-red{background:#fff;color:var(--err);border:1.5px solid #FECACA}
.btn-green{background:linear-gradient(135deg,#059669,#0D9488)}
.flash{background:#D1FAE5;color:#065F46;border:1px solid #A7F3D0;padding:12px 16px;border-radius:10px;margin-bottom:16px;font-weight:600}
.flash-err{background:#FEE2E2;color:#991B1B;border-color:#FECACA}
.foot{text-align:center;color:var(--mut);font-size:.82rem;padding:22px;border-top:1px solid var(--line);margin-top:30px}
.empty{text-align:center;color:var(--mut);padding:40px 20px}
.empty .i{font-size:2.4rem;margin-bottom:8px}
/* login */
.login-box{max-width:420px;margin:8vh auto;background:#fff;border-radius:20px;box-shadow:var(--sh);overflow:hidden}
.login-hd{background:linear-gradient(135deg,#1E1B4B,#4C1D95);color:#fff;padding:34px 30px;text-align:center}
.login-hd .lg{font-size:2.2rem}.login-hd h1{font-size:1.3rem;margin-top:8px}.login-hd p{color:#C7D2FE;font-size:.85rem;margin-top:4px}
.login-bd{padding:28px 30px}
/* tree */
.tree li{list-style:none;padding:3px 0}
.tree .acode{font-variant-numeric:tabular-nums;color:var(--mut);font-size:.82rem;margin-inline-end:8px}
.tree .grp>span{font-weight:800}
/* AI chat */
.chat-wrap{max-width:860px;margin:0 auto;display:flex;flex-direction:column;height:calc(100vh - 170px);min-height:480px}
.chat-box{flex:1;overflow-y:auto;padding:18px;background:#fff;border:1px solid var(--line);border-radius:var(--r) var(--r) 0 0;display:flex;flex-direction:column;gap:12px}
.msg{max-width:78%;padding:11px 15px;border-radius:16px;font-size:.95rem;line-height:1.7;white-space:pre-wrap;word-break:break-word;animation:msgIn .25s ease}
.msg.user{align-self:flex-start;background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;border-bottom-right-radius:4px}
.msg.bot{align-self:flex-end;background:#F1F5F9;border-bottom-left-radius:4px}
.msg img{max-width:220px;border-radius:10px;display:block;margin-bottom:6px}
.msg .act{display:inline-block;background:#ECFDF5;color:#065F46;border:1px solid #A7F3D0;border-radius:999px;padding:3px 12px;font-size:.8rem;font-weight:700;margin:4px 4px 0 0}
.msg .act a{color:#065F46;text-decoration:underline}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.typing{display:flex;gap:5px;padding:12px 16px;align-self:flex-end}
.typing i{width:8px;height:8px;border-radius:50%;background:var(--pri);animation:tp 1s infinite}
.typing i:nth-child(2){animation-delay:.18s;background:var(--pri2)}.typing i:nth-child(3){animation-delay:.36s;background:#DB2777}
@keyframes tp{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-6px);opacity:1}}
.chat-in{display:flex;gap:8px;padding:12px;background:#fff;border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r) var(--r);align-items:flex-end}
.chat-in textarea{resize:none;max-height:120px;border-radius:12px}
.chat-tools{display:flex;gap:4px}
.ctool{background:#F1F5F9;border:0;width:40px;height:40px;border-radius:10px;font-size:1.1rem;cursor:pointer;transition:.15s}
.ctool:hover{background:#E2E8F0}
.ctool.rec{background:#FEE2E2;animation:pulse 1s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(220,38,38,.15)}}
.send{background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;border:0;width:44px;height:44px;border-radius:12px;font-size:1.15rem;cursor:pointer}
.prev{display:flex;align-items:center;gap:8px;background:#EEF2FF;padding:6px 12px;border-radius:10px;margin:0 12px;font-size:.82rem}
.prev img{height:38px;border-radius:6px}
.prev button{background:none;border:0;color:var(--err);cursor:pointer;font-size:1rem}
.chat-hint{text-align:center;color:var(--mut);font-size:.78rem;padding:8px}
/* doc print */
@media print{.topbar,.foot,.no-print,.flash{display:none!important}.wrap{padding:0;max-width:100%}body{background:#fff}}
.bars{display:flex;align-items:flex-end;gap:8px;height:140px;padding-top:10px}
.bars .b{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.7rem;color:var(--mut)}
.bars .b i{width:100%;max-width:38px;border-radius:6px 6px 0 0;background:linear-gradient(180deg,var(--pri),var(--pri2));display:block}
.bars .b i.e{background:linear-gradient(180deg,#F59E0B,#EF4444)}
.pair{display:flex;gap:3px;align-items:flex-end;height:100px;width:100%;justify-content:center}