:root{
  --ink:#FFFFFF;
  --panel:#FFFFFF;
  --panel2:#F4F2FE;
  --line:#DDD8F5;
  --amber:#6B4EF2;
  --magenta:#EE3B52;
  --mint:#6B4EF2;
  --sky:#A594F7;
  --cream:#1B1640;
  --muted:#6F6796;
  --danger:#EE3B52;
  --violet:#6B4EF2;
  --violetDk:#4C31C9;
  --violetLt:#EFEBFE;
  --red:#EE3B52;
  --redLt:#FDECEE;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:#FFFFFF;
  color:#1B1640;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px;line-height:1.5;
  padding-bottom:60px;
}
h1,h2,h3,h4{font-family:"Avenir Next","Trebuchet MS",Verdana,sans-serif;margin:0;letter-spacing:-0.02em}
.mono{font-family:"Courier New",Courier,monospace}
.eyebrow{
  font-family:"Courier New",Courier,monospace;
  font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);
}

/* ---------- Header ---------- */
header{
  background:#FFFFFF;
  border-bottom:1px solid var(--line);
  padding:16px 20px 0 20px;
  position:sticky;top:0;z-index:50;
}
.brandrow{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.brand{display:flex;align-items:center;gap:12px}
.mark{
  width:48px;height:42px;border-radius:12px;
  background:#6B4EF2;
  display:flex;align-items:center;justify-content:center;
  font-family:"Avenir Next","Trebuchet MS",sans-serif;font-weight:800;font-size:16px;letter-spacing:0.02em;color:#FFFFFF;
  flex:0 0 auto;
}
.brand h1{font-size:22px;font-weight:800;letter-spacing:0.04em}
.brand .sub{font-size:11px;color:var(--muted);letter-spacing:0.14em;text-transform:uppercase;font-family:"Courier New",monospace}
.savechip{
  font-family:"Courier New",monospace;font-size:11px;color:var(--muted);
  border:1px solid var(--line);border-radius:20px;padding:5px 12px;
}
/* marquee dot rule — signature */
.marquee{display:flex;gap:7px;padding:12px 0 10px 0;overflow:hidden}
.marquee i{width:5px;height:5px;border-radius:50%;background:#DDD8F5;flex:0 0 auto}
.marquee i.on{background:#6B4EF2}

nav{display:flex;gap:4px;overflow-x:auto;padding-bottom:0}
nav button{
  background:transparent;border:0;border-bottom:3px solid transparent;
  color:var(--muted);padding:11px 14px;font-size:14px;font-weight:600;
  cursor:pointer;white-space:nowrap;font-family:inherit;
}
nav button.active{color:#6B4EF2;border-bottom-color:#6B4EF2}

main{max-width:1240px;margin:0 auto;padding:20px}
.tabpane{display:none}
.tabpane.show{display:block}

/* ---------- Cards ---------- */
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:18px;margin-bottom:16px;box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.card > h3{font-size:16px;margin-bottom:4px}
.card .hint{font-size:12.5px;color:var(--muted);margin-bottom:14px}

.kpigrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:16px}
.kpi{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:15px;
  position:relative;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.kpi:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--amber)}
.kpi:before{background:#6B4EF2}
.kpi.m:before{background:#EE3B52} .kpi.g:before{background:#6B4EF2} .kpi.s:before{background:#A594F7}
.kpi .lab{font-family:"Courier New",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.kpi .val{font-family:"Avenir Next","Trebuchet MS",sans-serif;font-size:30px;font-weight:800;line-height:1.15;margin-top:6px}
.kpi .note{font-size:11.5px;color:var(--muted);margin-top:2px}

/* ---------- Forms ---------- */
label{display:block;font-family:"Courier New",monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#6F6796;margin-bottom:5px}
input,select,textarea{
  width:100%;background:#FAFAFA;border:1px solid var(--line);border-radius:9px;
  color:var(--cream);padding:10px 11px;font-size:14.5px;font-family:inherit;
}
input:focus,select:focus,textarea:focus{outline:2px solid #6B4EF2;outline-offset:1px;border-color:#6B4EF2;background:#FFFFFF}
textarea{min-height:70px;resize:vertical}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.field{margin-bottom:12px}

button.btn{
  background:#6B4EF2;color:#FFFFFF;border:1px solid #6B4EF2;border-radius:9px;
  padding:11px 18px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;
}
button.btn:active{transform:translateY(1px)}
button.btn.ghost{background:#FFFFFF;color:#4C31C9;border:1px solid #C9C0F0}
button.btn.mag{background:#EE3B52;color:#fff;border-color:#EE3B52}
button.btn.dang{background:#FFFFFF;color:#EE3B52;border:1px solid #EE3B52}
button.btn.sm{padding:7px 12px;font-size:12.5px}
.btnrow{display:flex;gap:9px;flex-wrap:wrap}

/* ---------- Chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.catgroup{margin-bottom:12px}
.catgrouphead{
  font-family:"Courier New",monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:#6B4EF2;font-weight:700;margin-bottom:6px;padding-bottom:4px;border-bottom:1px solid #ECE9F8;
}
.catgroup-toggle{cursor:pointer;user-select:none;display:flex;align-items:center;gap:4px}
.catgroup-toggle:active{opacity:.7}
.catgroup-arrow{display:inline-block;width:10px;font-size:9px;color:#6B4EF2}
.catgroup-count{
  background:#6B4EF2;color:#FFFFFF;border-radius:10px;padding:1px 7px;font-size:9.5px;
  font-weight:700;margin-left:auto;letter-spacing:0;
}
.chip{
  border:1px solid var(--line);border-radius:20px;padding:6px 12px;font-size:12.5px;
  cursor:pointer;color:var(--muted);background:#FFFFFF;user-select:none;
}
.chip.on{background:#6B4EF2;border-color:#6B4EF2;color:#FFFFFF;font-weight:600}
.tag{
  display:inline-block;border-radius:6px;padding:3px 8px;font-size:11px;font-weight:700;
  font-family:"Courier New",monospace;letter-spacing:.05em;margin:2px 4px 2px 0;
}
.t-new{background:#FFFFFF;color:#8C86A8;box-shadow:inset 0 0 0 1px #DDD8F5}
.t-contacted{background:#EFEBFE;color:#6B4EF2}
.t-proposal{background:#DCD4FC;color:#4C31C9}
.t-negotiating{background:#9E88F7;color:#FFFFFF}
.t-partner{background:#6B4EF2;color:#FFFFFF}
.t-rejected{background:#FDECEE;color:#D22740;text-decoration:line-through}
.t-unreachable{background:#FFFFFF;color:#9A94B8;box-shadow:inset 0 0 0 1px #E8E5F5}
.tag.cat{background:#F4F2FE;color:#4C31C9;font-weight:600}
.tag.main{background:#4C31C9;color:#FFFFFF;font-weight:700}
.r-vi{background:#6B4EF2;color:#FFFFFF}
.r-imp{background:#DCD4FC;color:#4C31C9}
.r-gth{background:#FFFFFF;color:#6B4EF2;box-shadow:inset 0 0 0 1px #C9C0F0}
.r-lbc{background:#FDECEE;color:#D22740;box-shadow:inset 0 0 0 1px #F8CFD5}
.r-oth{background:#F4F2FE;color:#6F6796;box-shadow:inset 0 0 0 1px #DDD8F5}

/* ---------- Table ---------- */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{
  text-align:left;font-family:"Courier New",monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);padding:9px 10px;border-bottom:1px solid var(--line);
  white-space:nowrap;
}
td{padding:10px;border-bottom:1px solid #ECE9F8;vertical-align:top}
tr.rowclick{cursor:pointer}
tr.rowclick:hover td{background:#F7F5FE}
.empty{text-align:center;color:var(--muted);padding:34px 12px;font-size:13.5px}

/* ---------- Bars ---------- */
.bar{margin-bottom:10px}
.bar .top{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:4px}
.bar .top b{font-family:"Courier New",monospace;color:var(--cream)}
.bar .track{height:8px;background:#ECE9F8;border-radius:6px;overflow:hidden}
.bar .fill{height:100%;background:#6B4EF2;border-radius:6px;transition:width .4s}
.bar .fill.m{background:#EE3B52} .bar .fill.g{background:#6B4EF2} .bar .fill.s{background:#A594F7}

/* ---------- Modal (fixed, iPad-safe) ---------- */
.modal{
  display:none;position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(27,22,64,.55);z-index:200;padding:14px;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.modal.show{display:block}
.modalbox{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  max-width:780px;margin:24px auto;padding:20px;box-shadow:0 12px 40px rgba(0,0,0,.18);
}
.modalhead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}
.x{background:#FFFFFF;border:1px solid #C9C0F0;color:#4C31C9;border-radius:8px;width:34px;height:34px;font-size:18px;cursor:pointer;flex:0 0 auto}

/* ---------- Note sheet ---------- */
.sheet{background:#F4F2FE;border-left:3px solid #6B4EF2;border-radius:0 10px 10px 0;padding:14px 16px;margin-bottom:12px}
.sheet .en{font-size:14px}
.sheet .ar{font-size:15px;color:#4A4A4A;direction:rtl;text-align:right;margin-top:8px;font-family:"Geeza Pro","Segoe UI",Tahoma,sans-serif}

.toast{
  display:none;position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  background:#6B4EF2;color:#FFFFFF;font-weight:700;font-size:14px;
  padding:12px 20px;border-radius:10px;z-index:400;box-shadow:0 6px 24px rgba(0,0,0,.28);
}
.toast.show{display:block}
.callticket{
  background:#FAF9FE;border:1px dashed #D2CBF2;border-radius:10px;padding:12px;margin-bottom:10px;
}
.callticket.od{border:1px solid #EE3B52;border-left:4px solid #EE3B52;background:#FDECEE}
.callticket .hdr{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);font-family:"Courier New",monospace}
#printArea{display:none}
@media print{
  @page{ margin:12mm; }
  table.pr thead{display:table-header-group}
  table.pr tr{page-break-inside:avoid}
  body{background:#FFFFFF !important;background-image:none !important;padding:0 !important}
  header,nav,main,.modal,.toast{display:none !important}
  #printArea{display:block !important}
  .pr-h1{font-family:"Avenir Next","Trebuchet MS",sans-serif;font-size:26px;font-weight:800;letter-spacing:.04em;margin:0;color:#6B4EF2}
  .pr-sub{font-family:"Courier New",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#555;margin-top:4px}
  .pr-rule{border:0;border-top:2px solid #6B4EF2;margin:12px 0 18px 0}
  .pr-sec{margin:0 0 20px 0;page-break-inside:avoid}
  .pr-sec h2{font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:#4C31C9;border-bottom:1px solid #CCC;padding-bottom:5px;margin:0 0 10px 0}
  .pr-kpis{display:table;width:100%;table-layout:fixed;border-collapse:collapse}
  .pr-kpi{display:table-cell;border:1px solid #CCC;padding:10px;text-align:center}
  .pr-kpi .k{font-family:"Courier New",monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#666}
  .pr-kpi .v{font-size:24px;font-weight:800;margin-top:4px}
  .pr-kpi .n{font-size:9px;color:#777;margin-top:2px}
  table.pr{width:100%;border-collapse:collapse;font-size:11px}
  table.pr th{text-align:left;background:#EFEBFE;color:#4C31C9;padding:6px 8px;border:1px solid #DDD;font-size:9px;letter-spacing:.08em;text-transform:uppercase}
  table.pr td{padding:6px 8px;border:1px solid #DDD;vertical-align:top}
  .pr-foot{margin-top:20px;padding-top:8px;border-top:1px solid #CCC;font-family:"Courier New",monospace;font-size:9px;color:#777;text-align:center}
}
@media(max-width:600px){
  main{padding:14px}
  .kpi .val{font-size:25px}
  .brand h1{font-size:19px}
}