/* ==========================================================================
   لوحة تحكّم سعيد · داكنة وحدها (التطبيق داكن فقط)
   التوكنز من بلوك الثيم الداكن في index.html. الحالات (جيّد/تنبيه/حرِج/معلومة)
   ألوان منفصلة عن التركوازيّ عمدًا: التركوازيّ للبنية والتفاعل، والحالة تحمل
   معنى ولا تظهر إلّا مع نصّ يسمّيها.
   ========================================================================== */
@font-face{font-family:"Thmanyah Sans";src:url("/Fonts/Thmanyah/thmanyahsans-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Thmanyah Sans";src:url("/Fonts/Thmanyah/thmanyahsans-Medium.woff2") format("woff2");font-weight:500 600;font-style:normal;font-display:swap;}
@font-face{font-family:"Thmanyah Sans";src:url("/Fonts/Thmanyah/thmanyahsans-Bold.woff2") format("woff2");font-weight:700 800;font-style:normal;font-display:swap;}
@font-face{font-family:"Thmanyah Sans";src:url("/Fonts/Thmanyah/thmanyahsans-Black.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap;}

:root{
  color-scheme:dark;
  --bg:#001C27; --bg-2:#04212C;
  --surface:#052633; --surface-3:#073B49;
  --border:#0E3340; --border-2:#16404E;
  --text:#F5F7F8; --text-dim:#8EA8B1; --text-faint:#647783;
  /* مشتقّ: بين dim وfaint · يعبر 4.5:1 على السطح (faint وحده 3.4:1 فلا يُكتب به نصّ صغير) */
  --text-mute:#7E939D;
  --accent:#15D8D3; --accent-2:#58DED4; --on-accent:#00232B;
  --chip:#092E3D;
  /* العنبر = الفعل الأساسيّ الواحد في الشاشة (قاعدة التطبيق) */
  --amber:#FFB24D; --on-amber:#3A1E00; --amber-tint:#2A2417;
  /* حالات · كلّها ≥5.6:1 على السطح */
  --good:#5BD68A; --warn:#FFB24D; --critical:#FF6B6B; --info:#7CB7FF; --muted:#647783;
  --grid:rgba(255,255,255,.06);
  --font:"Thmanyah Sans",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  --r-xs:6px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:99px;
  --shadow:0 16px 38px -18px rgba(0,0,0,.7);
  --ease:cubic-bezier(.2,.9,.25,1);
  --top-h:60px; --tabs-h:46px;
  --gutter:24px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{font-family:var(--font);font-size:14px;line-height:1.5;background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;min-height:100vh;word-spacing:.055em;}
html.no-scroll,html.no-scroll body{overflow:hidden;}
[hidden]{display:none !important;}
button,input,select,textarea{font:inherit;color:inherit;}
button{cursor:pointer;}
a{color:var(--accent-2);}
img{max-width:100%;}
:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px;border-radius:6px;}
:focus:not(:focus-visible){outline:none;}
.num,.tnum{font-variant-numeric:tabular-nums;}
.ltr{direction:ltr;unicode-bidi:isolate;}
.dim{color:var(--text-dim);}
.mute{color:var(--text-mute);}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.ico{width:16px;height:16px;flex:none;display:inline-block;vertical-align:middle;}
.ico-sm{width:14px;height:14px;}
.ico-lg{width:20px;height:20px;}

/* ===== شريط الوضع التجريبيّ ===== */
.mock-banner{background:var(--amber-tint);color:#FFD89A;font-size:12px;font-weight:700;text-align:center;
  padding:4px 12px;border-bottom:1px solid rgba(255,178,77,.25);letter-spacing:0;}

/* ===== شاشات الوسط (إقلاع · دخول · ممنوع) ===== */
.center-view{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:24px 16px;}
.boot{display:flex;align-items:center;gap:10px;color:var(--text-dim);font-size:14px;}
.spinner{width:18px;height:18px;border-radius:50%;border:2px solid var(--border-2);border-top-color:var(--accent);
  animation:spin .8s linear infinite;flex:none;display:inline-block;}
.spinner.sm{width:14px;height:14px;}
@keyframes spin{to{transform:rotate(360deg);}}
.auth-card{width:min(380px,100%);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:28px 24px 22px;text-align:center;box-shadow:var(--shadow);}
.auth-mascot{width:72px;height:72px;display:block;margin:0 auto 8px;}
.auth-card h1{font-size:20px;font-weight:800;margin:4px 0 6px;line-height:1.35;}
.auth-card p{color:var(--text-dim);margin:0 0 4px;font-size:14px;}
.auth-actions{display:grid;gap:10px;margin:20px 0 6px;}
.btn-auth{height:46px;border-radius:10px;border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;
  gap:10px;font-size:15px;font-weight:700;transition:filter var(--dur,.15s),background .15s;}
.btn-auth svg{width:18px;height:18px;flex:none;}
.btn-auth:disabled{opacity:.6;cursor:progress;}
.btn-apple{background:#fff;color:#000;}
.btn-apple:hover{filter:brightness(.94);}
.btn-google{background:var(--bg-2);border-color:var(--border-2);color:var(--text);}
.btn-google:hover{background:var(--surface-3);}
.auth-err{color:var(--critical) !important;font-size:13px !important;min-height:1.5em;margin:6px 0 !important;}
.auth-alt{font-size:13px;color:var(--accent-2);text-decoration:none;}
.auth-alt:hover{text-decoration:underline;}
.auth-lock{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 10px;border-radius:50%;
  background:var(--chip);color:var(--warn);}
.auth-lock svg{width:24px;height:24px;}
.auth-who{font-weight:700;color:var(--text) !important;word-break:break-all;}

/* ===== الرأس ===== */
.top{position:sticky;top:0;z-index:20;height:var(--top-h);display:flex;align-items:center;gap:12px;
  padding:0 var(--gutter);padding-top:env(safe-area-inset-top);height:calc(var(--top-h) + env(safe-area-inset-top));
  background:var(--bg);border-bottom:1px solid var(--border);}
.brand{display:flex;align-items:center;gap:10px;min-width:0;}
.brand img{width:34px;height:34px;flex:none;}
.brand-text{display:flex;flex-direction:column;min-width:0;line-height:1.25;}
.brand-text strong{font-size:16px;font-weight:800;}
.updated{font-size:12px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.top-actions{margin-inline-start:auto;display:flex;align-items:center;gap:8px;min-width:0;}
.who{font-size:13px;color:var(--text-dim);max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ===== التبويبات ===== */
.tabs{position:sticky;top:calc(var(--top-h) + env(safe-area-inset-top));z-index:19;display:flex;gap:4px;
  padding:0 calc(var(--gutter) - 10px);background:var(--bg);border-bottom:1px solid var(--border);
  overflow-x:auto;scrollbar-width:none;}
.tabs::-webkit-scrollbar{display:none;}
.tab{position:relative;height:var(--tabs-h);padding:0 12px;border:0;background:none;color:var(--text-dim);
  font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;border-radius:0;}
.tab::after{content:"";position:absolute;inset-inline:10px;bottom:-1px;height:2px;border-radius:2px;background:transparent;}
.tab:hover{color:var(--text);}
.tab[aria-selected="true"]{color:var(--text);}
.tab[aria-selected="true"]::after{background:var(--accent);}
.tab-badge{min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);
  font-size:11px;font-weight:800;display:inline-grid;place-items:center;font-variant-numeric:tabular-nums;line-height:1;}

/* ===== الهيكل ===== */
.main{max-width:1320px;margin:0 auto;padding:20px var(--gutter) 28px;}
.panel{min-width:0;}
.panel.is-stale{opacity:.55;transition:opacity .2s;}
.foot{max-width:1320px;margin:0 auto;padding:18px var(--gutter) calc(28px + env(safe-area-inset-bottom));
  color:var(--text-mute);font-size:12px;border-top:1px solid var(--border);}

/* ===== أزرار وحقول ===== */
.btn{height:36px;padding:0 14px;border-radius:var(--r-sm);border:1px solid var(--border-2);background:var(--bg-2);
  color:var(--text);font-size:13px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  white-space:nowrap;transition:background .15s,border-color .15s,color .15s;text-decoration:none;}
.btn:hover{background:var(--surface-3);}
.btn:disabled{opacity:.55;cursor:default;}
.btn-sm{height:30px;padding:0 10px;font-size:12px;gap:6px;}
.btn-primary{background:var(--amber);border-color:transparent;color:var(--on-amber);font-weight:700;}
.btn-primary:hover{background:#FFBE66;}
.btn-ghost{background:transparent;border-color:transparent;color:var(--text-dim);}
.btn-ghost:hover{background:var(--surface);color:var(--text);}
.btn-danger{color:var(--critical);border-color:color-mix(in srgb,var(--critical) 35%,transparent);background:transparent;}
.btn-danger:hover{background:color-mix(in srgb,var(--critical) 10%,transparent);}
.btn-icon{width:36px;height:36px;border-radius:var(--r-sm);border:1px solid var(--border-2);background:var(--bg-2);
  display:inline-grid;place-items:center;color:var(--text-dim);flex:none;padding:0;}
.btn-icon:hover{color:var(--text);background:var(--surface-3);}
.btn-icon.is-busy svg{animation:spin .8s linear infinite;}
.link{background:none;border:0;padding:0;color:inherit;font:inherit;text-align:start;cursor:pointer;}
.link:hover{color:var(--accent-2);}
.input,.select,.textarea{background:var(--bg-2);border:1px solid var(--border-2);border-radius:var(--r-sm);color:var(--text);
  font-size:14px;transition:border-color .15s;}
.input,.select{height:36px;padding:0 12px;}
.input::placeholder,.textarea::placeholder{color:var(--text-mute);}
.input:focus,.select:focus,.textarea:focus{border-color:var(--accent);outline:none;}
.select{appearance:none;-webkit-appearance:none;padding-inline-start:12px;padding-inline-end:30px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238EA8B1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left 10px center;}
.textarea{width:100%;min-height:84px;padding:10px 12px;resize:vertical;line-height:1.55;}
/* إرسال رسالة (ن42) */
.send-grid{display:grid;gap:14px;}
.fld{display:grid;gap:6px;}
.fld-l{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;font-weight:700;color:var(--text-dim);}
.fld-c{font-variant-numeric:tabular-nums;font-weight:500;color:var(--text-mute);}
.fld-c.over{color:var(--critical);}
.fld-n{font-size:12px;line-height:1.6;color:var(--text-mute);}
.chk{display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px solid var(--border-2);border-radius:var(--r-sm);background:var(--bg-2);font-size:14px;cursor:pointer;}
.chk input{width:17px;height:17px;accent-color:var(--accent);}
.chk-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;}
.reach{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding:12px 14px;border:1px solid var(--border-2);border-radius:var(--r-sm);background:var(--chip);font-size:14px;}
.reach b{color:var(--text);font-variant-numeric:tabular-nums;}
.reach .warn{color:var(--warn);}
.prev{display:grid;gap:6px;padding:14px;border:1px solid var(--border-2);border-radius:var(--r-md);background:var(--surface);}
.prev-h{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--accent);}
.prev-t{font-weight:700;overflow-wrap:anywhere;}
.prev-b{font-size:14px;line-height:1.6;color:var(--text-dim);white-space:pre-line;overflow-wrap:anywhere;}
.send-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.log-item{display:grid;gap:6px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg-2);}
.log-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--text-mute);}
.search{position:relative;flex:1 1 260px;max-width:380px;min-width:0;}
.search .input{width:100%;padding-inline-start:36px;}
.search .ico{position:absolute;inset-inline-start:11px;top:50%;transform:translateY(-50%);color:var(--text-mute);pointer-events:none;}

/* مقطّع (segmented) */
.seg{display:inline-flex;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-sm);padding:2px;gap:2px;flex:none;}
.seg button{height:28px;padding:0 10px;border:0;border-radius:6px;background:none;color:var(--text-dim);font-size:12px;font-weight:600;white-space:nowrap;}
.seg button:hover{color:var(--text);}
.seg button[aria-pressed="true"]{background:var(--surface-3);color:var(--text);}
.seg .c{color:var(--text-mute);font-variant-numeric:tabular-nums;margin-inline-start:4px;}

/* رقائق التصفية */
.chip{height:32px;padding:0 12px;border-radius:var(--r-pill);border:1px solid var(--border-2);background:transparent;
  color:var(--text-dim);font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;flex:none;}
.chip:hover{color:var(--text);background:var(--surface);}
.chip[aria-pressed="true"]{background:var(--surface-3);color:var(--text);border-color:color-mix(in srgb,var(--accent) 45%,var(--border-2));}
.chip .c{color:var(--text-mute);font-variant-numeric:tabular-nums;}
.chip[aria-pressed="true"] .c{color:var(--text-dim);}

/* حبوب الحالة: نقطة ملوّنة + نصّ (اللون لا يحمل المعنى وحده) */
.pill{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:var(--r-pill);background:var(--chip);
  color:var(--text-dim);font-size:12px;font-weight:600;white-space:nowrap;line-height:1;}
.pill .dot{width:6px;height:6px;border-radius:50%;background:var(--muted);flex:none;}
.t-good .dot{background:var(--good);} .t-warn .dot{background:var(--warn);} .t-critical .dot{background:var(--critical);}
.t-info .dot{background:var(--info);} .t-muted .dot{background:var(--muted);} .t-accent .dot{background:var(--accent);}
.pill.stage{background:transparent;border:1px solid var(--border-2);}
.pill.strong{color:var(--text);}
.tag{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:var(--r-xs);background:var(--surface-3);
  color:var(--text-dim);font-size:12px;max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tags{display:flex;flex-wrap:wrap;gap:4px;min-width:0;}

/* ===== البطاقات ===== */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:16px;min-width:0;}
.card-h{display:flex;align-items:center;gap:8px 12px;margin-bottom:12px;flex-wrap:wrap;}
.card-t{font-size:15px;font-weight:700;margin:0;line-height:1.35;}
.card-s{font-size:12px;color:var(--text-dim);}
.card-a{margin-inline-start:auto;display:flex;align-items:center;gap:8px;}
.card-note{font-size:12px;color:var(--text-mute);margin:10px 0 0;line-height:1.6;}
.sec-t{font-size:13px;font-weight:700;color:var(--text-dim);margin:0;}
.empty{color:var(--text-mute);font-size:13px;padding:10px 0;}
.empty-lg{text-align:center;padding:40px 16px;color:var(--text-dim);}
.loading{display:flex;align-items:center;gap:10px;color:var(--text-dim);font-size:13px;padding:14px 0;}
.err-box{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;background:color-mix(in srgb,var(--critical) 8%,var(--surface));
  border:1px solid color-mix(in srgb,var(--critical) 30%,var(--border));border-radius:var(--r-md);padding:14px 16px;}
.err-box .ico{color:var(--critical);}
.err-box strong{font-size:14px;}
.err-box .dim{font-size:12px;flex-basis:100%;}
.err-box .btn{margin-inline-start:auto;}

/* ===== شريط الأرقام ===== */
.kpis{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--border);border:1px solid var(--border);
  border-radius:var(--r-md);overflow:hidden;margin-bottom:16px;}
.kpi{background:var(--surface);padding:14px 16px 13px;display:flex;flex-direction:column;gap:2px;min-width:0;border:0;
  text-align:start;color:inherit;}
button.kpi:hover{background:#062B39;}
.kpi-l{font-size:12px;color:var(--text-dim);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.kpi-v{font-size:26px;font-weight:800;line-height:1.2;letter-spacing:0;}
/* يلتفّ ولا يُقصّ: «عن الفترة السابقة» كانت تنقطع في بطاقة 142 بكسل على الجوّال */
.kpi-s{font-size:12px;color:var(--text-dim);display:flex;align-items:center;flex-wrap:wrap;gap:2px 6px;min-width:0;line-height:1.45;}
.kpi-s .dot{width:6px;height:6px;border-radius:50%;flex:none;}
.kpi.t-warn .kpi-s .dot{background:var(--warn);} .kpi.t-good .kpi-s .dot{background:var(--good);}
.kpi.t-critical .kpi-s .dot{background:var(--critical);}
.kpi.t-accent .kpi-s .dot{background:var(--accent);} .kpi.t-info .kpi-s .dot{background:var(--info);}
.stack{display:flex;flex-direction:column;gap:16px;min-width:0;}
.delta{font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:3px;}
.delta.up-good,.delta.down-good{color:var(--good);}
.delta.up-bad,.delta.down-bad{color:var(--critical);}

/* ===== شبكة النظرة العامّة ===== */
.ov{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:16px;align-items:start;}
.ov-col{display:flex;flex-direction:column;gap:16px;min-width:0;}
.metrics-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 -4px;}
.metrics-h h2{font-size:15px;font-weight:800;margin:0;}
.metrics-h .seg{margin-inline-start:auto;}
.pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;}

/* صفوف الأعمدة الأفقيّة (القمع · الأبواب · التوزيعات) */
.rows{display:flex;flex-direction:column;}
.brow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:9px 0;border-top:1px solid var(--border);}
.brow:first-child{border-top:0;padding-top:2px;}
.brow .lbl{font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px;min-width:0;}
.brow .lbl .ico{color:var(--text-dim);}
.brow .val{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;text-align:end;white-space:nowrap;}
.brow .val .dim{font-weight:500;margin-inline-start:6px;}
.brow .val .dim::before{content:"·";color:var(--text-faint);margin-inline-end:6px;}
.brow .meta{grid-column:1 / -1;font-size:12px;color:var(--text-dim);font-variant-numeric:tabular-nums;}
.brow .note{font-size:11px;font-weight:600;color:var(--warn);background:color-mix(in srgb,var(--warn) 10%,transparent);
  padding:1px 6px;border-radius:var(--r-pill);white-space:nowrap;}
.track{grid-column:1 / -1;height:6px;border-radius:3px;background:rgba(255,255,255,.05);overflow:hidden;}
.track i{display:block;height:100%;background:var(--accent);border-start-end-radius:3px;border-end-end-radius:3px;min-width:0;}
.track.soft i{background:color-mix(in srgb,var(--accent) 70%,var(--surface));}
.big-rate{font-size:22px;font-weight:800;line-height:1.2;}

/* هذا الأسبوع */
.wk{display:flex;flex-direction:column;}
.wk-sec{padding:12px 0;border-top:1px solid var(--border);}
.wk-sec:first-child{border-top:0;padding-top:0;}
.wk-h{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.wk-h .sec-t{color:var(--text);}
.wk-h .count{font-size:12px;color:var(--text-dim);font-variant-numeric:tabular-nums;background:var(--chip);border-radius:var(--r-pill);padding:0 7px;line-height:20px;}
.wk-h .btn{margin-inline-start:auto;}
.wk-item{display:flex;align-items:center;gap:10px;width:100%;padding:7px 8px;margin:0 -8px;width:calc(100% + 16px);
  border:0;background:none;border-radius:var(--r-sm);text-align:start;color:inherit;min-width:0;}
.wk-item:hover{background:var(--bg-2);}
.wk-item .nm{font-size:13px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wk-item .sub{margin-inline-start:auto;font-size:12px;color:var(--text-dim);white-space:nowrap;flex:none;}
.wk-item .sub.t-warn{color:var(--warn);} .wk-item .sub.t-critical{color:var(--critical);}
.wk-msg{flex-direction:column;align-items:stretch;gap:2px;}
.wk-msg .row1{display:flex;align-items:center;gap:8px;min-width:0;}
.wk-msg .txt{font-size:12px;color:var(--text-dim);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  overflow-wrap:anywhere;line-height:1.55;}
.udot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;}

/* ===== الرسوم ===== */
.chart{position:relative;width:100%;min-width:0;}
.chart svg{display:block;overflow:visible;}
.viz{direction:ltr;font-family:var(--font);}
.viz .grid{stroke:var(--grid);stroke-width:1;shape-rendering:crispEdges;}
.viz .base{stroke:var(--border-2);stroke-width:1;shape-rendering:crispEdges;}
.viz .tick{fill:var(--text-dim);font-size:11px;font-variant-numeric:tabular-nums;}
.viz .xl{fill:var(--text-dim);font-size:11px;}
.viz .bar{fill:var(--accent);transition:fill .12s;}
.viz .bar.on{fill:#7CEAE6;}
.viz .bar-lbl{fill:var(--text);font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;}
.viz .line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;}
.viz .area{fill:var(--accent);opacity:.1;}
.viz .pt{fill:var(--accent);stroke:var(--surface);stroke-width:2;}
.viz .xhair{stroke:var(--text-dim);stroke-width:1;opacity:.55;shape-rendering:crispEdges;}
.viz .end-lbl{fill:var(--text);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;}
.viz .hit{fill:transparent;cursor:crosshair;touch-action:pan-y;}
.viz:focus{outline:none;}
.chart:focus-within{outline:none;}
.tip{position:absolute;z-index:6;pointer-events:none;background:#0A3342;border:1px solid var(--border-2);border-radius:var(--r-sm);
  padding:8px 10px;font-size:12px;box-shadow:0 10px 24px -10px rgba(0,0,0,.8);min-width:128px;white-space:nowrap;line-height:1.5;}
.tip .tip-d{color:var(--text-dim);margin-bottom:4px;font-weight:600;}
.tip .tip-r{display:flex;align-items:center;gap:10px;justify-content:space-between;}
.tip .tip-r b{font-variant-numeric:tabular-nums;font-weight:800;color:var(--text);}
.tip .tip-r span{color:var(--text-dim);}
.tip .key{display:inline-block;width:10px;height:2px;border-radius:1px;background:var(--accent);margin-inline-end:6px;vertical-align:middle;}
.chart-empty{padding:28px 8px;text-align:center;color:var(--text-mute);font-size:13px;}
.twin{max-height:280px;overflow:auto;border:1px solid var(--border);border-radius:var(--r-sm);}

/* ===== الجداول ===== */
.tbl-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);-webkit-overflow-scrolling:touch;}
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;}
.tbl th{position:sticky;top:0;z-index:1;background:var(--bg-2);color:var(--text-dim);font-size:12px;font-weight:600;text-align:start;
  padding:9px 12px;border-bottom:1px solid var(--border);white-space:nowrap;}
.tbl td{padding:9px 12px;border-bottom:1px solid var(--border);vertical-align:middle;}
.tbl tbody tr:last-child td{border-bottom:0;}
.tbl td.num,.tbl th.num{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap;}
.tbl .clip{max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.twin .tbl th{top:0;}

/* جدول العملاء */
.cust-tbl{overflow:visible;}
.cust-tbl .tbl th{top:calc(var(--top-h) + var(--tabs-h) + env(safe-area-inset-top));}
.cust-tbl .tbl th:first-child{border-start-start-radius:var(--r-md);}
.cust-tbl .tbl th:last-child{border-start-end-radius:var(--r-md);}
.cust-tbl tbody tr{cursor:pointer;transition:background .1s;}
.cust-tbl tbody tr:hover td{background:rgba(21,216,211,.035);}
.cust-tbl tbody tr.is-open td{background:rgba(21,216,211,.07);}
.cust-cell{display:flex;align-items:center;gap:10px;min-width:0;max-width:300px;}
.cust-cell .ids{display:flex;flex-direction:column;min-width:0;line-height:1.35;}
.cust-cell .nm{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:6px;}
.cust-cell .nm .link{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cust-cell .em{font-size:12px;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:ltr;text-align:right;}
.prov{display:inline-flex;align-items:center;gap:6px;color:var(--text-dim);white-space:nowrap;}
.prov .ico{width:14px;height:14px;}
.plats{color:var(--text-dim);white-space:nowrap;}
.when{white-space:nowrap;color:var(--text-dim);}
.when.strong{color:var(--text);}

/* الصورة الرمزيّة */
.av{width:30px;height:30px;border-radius:50%;flex:none;display:inline-grid;place-items:center;font-size:12px;font-weight:700;
  color:var(--text);overflow:hidden;background:#0E4A5A;line-height:1;user-select:none;}
.av img{width:100%;height:100%;object-fit:cover;display:block;}
.av.lg{width:52px;height:52px;font-size:19px;}
.av.md{width:38px;height:38px;font-size:14px;}
.av.c1{background:#0E4A5A;} .av.c2{background:#2F3F6B;} .av.c3{background:#553A55;} .av.c4{background:#2D5540;}
.av.c5{background:#5A4630;} .av.c6{background:#1F4C6C;} .av.c7{background:#4A3B63;} .av.c8{background:#3B5157;}

/* شريط أدوات العملاء */
.toolbar{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;}
.tb-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;}
.tb-row .grow{flex:1 1 auto;}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;min-width:0;padding:1px;}
.chips::-webkit-scrollbar{display:none;}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.filters .select{min-width:0;}
.count-line{font-size:12px;color:var(--text-dim);font-variant-numeric:tabular-nums;white-space:nowrap;}
.more{display:flex;justify-content:center;padding:14px 0 0;}

/* قائمة العملاء على الجوّال */
.clist{display:none;flex-direction:column;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);overflow:hidden;}
.crow{display:flex;gap:12px;padding:12px 14px;border:0;border-top:1px solid var(--border);background:none;width:100%;text-align:start;color:inherit;min-width:0;}
.crow:first-child{border-top:0;}
.crow:hover,.crow:active{background:var(--bg-2);}
.crow-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.crow-top{display:flex;align-items:center;gap:8px;min-width:0;}
.crow-top .nm{font-weight:700;font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.crow-top .pill{margin-inline-start:auto;}
.crow-mail{font-size:12px;color:var(--text-dim);direction:ltr;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.crow-meta{font-size:12px;color:var(--text-dim);display:flex;flex-wrap:wrap;gap:2px 10px;}
.crow-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px;}

/* ===== ملفّ العميل (الدرج) ===== */
.drawer{position:fixed;inset:0;z-index:40;}
.drawer-scrim{position:absolute;inset:0;background:rgba(0,8,12,.58);opacity:0;transition:opacity .22s var(--ease);}
.drawer-panel{position:absolute;top:0;bottom:0;inset-inline-end:0;width:min(500px,100%);background:var(--bg-2);
  border-inline-start:1px solid var(--border-2);box-shadow:-24px 0 48px -24px rgba(0,0,0,.7);display:flex;flex-direction:column;
  transform:translateX(-102%);transition:transform .26s var(--ease);outline:none;}
.drawer.open .drawer-scrim{opacity:1;}
.drawer.open .drawer-panel{transform:none;}
.dr-head{padding:16px 18px 14px;padding-top:calc(16px + env(safe-area-inset-top));border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:12px;}
.dr-id{display:flex;gap:12px;align-items:flex-start;min-width:0;}
.dr-id .ids{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.dr-id h2{font-size:18px;font-weight:800;margin:0;line-height:1.3;overflow-wrap:anywhere;}
.dr-id .em{font-size:13px;color:var(--text-dim);direction:ltr;text-align:right;overflow-wrap:anywhere;}
.dr-pills{display:flex;flex-wrap:wrap;gap:6px;}
.dr-actions{display:flex;gap:8px;flex-wrap:wrap;}
.dr-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:0 18px calc(24px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch;}
.dsec{padding:16px 0;border-top:1px solid var(--border);}
.dsec:first-child{border-top:0;}
.dsec-h{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.dsec-h .sec-t{color:var(--text);font-size:14px;}
.dsec-h .aside{margin-inline-start:auto;font-size:12px;color:var(--text-dim);}
.kv{display:grid;grid-template-columns:128px minmax(0,1fr);gap:8px 12px;margin:0;font-size:13px;}
.kv dt{color:var(--text-dim);}
.kv dd{margin:0;min-width:0;overflow-wrap:anywhere;}
.stat2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 12px;}
.stat .l{font-size:12px;color:var(--text-dim);}
.stat .v{font-size:20px;font-weight:800;line-height:1.3;}
.stat .track{margin-top:6px;}
.lock{display:flex;align-items:center;gap:8px;color:var(--text-dim);font-size:13px;background:var(--surface);border:1px dashed var(--border-2);
  border-radius:var(--r-sm);padding:10px 12px;}
.form-row{display:grid;grid-template-columns:128px minmax(0,1fr);gap:10px 12px;align-items:center;margin-bottom:12px;}
.form-row>label{font-size:13px;color:var(--text-dim);}
.form-row .select,.form-row .input{width:100%;}
.fu{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.fu .input{width:auto;flex:1 1 150px;min-width:0;}
.fu-hint{font-size:12px;margin-top:4px;}
.fu-hint.t-warn{color:var(--warn);} .fu-hint.t-critical{color:var(--critical);}
.tag-ed{display:flex;flex-wrap:wrap;gap:6px;align-items:center;background:var(--bg-2);border:1px solid var(--border-2);border-radius:var(--r-sm);
  padding:6px;min-height:38px;}
.tag-ed:focus-within{border-color:var(--accent);}
.tag-ed .tag{padding-inline-end:2px;max-width:200px;}
.tag-ed .tag button{border:0;background:none;color:var(--text-dim);width:18px;height:18px;border-radius:4px;display:grid;place-items:center;padding:0;}
.tag-ed .tag button:hover{color:var(--critical);background:rgba(255,255,255,.05);}
.tag-ed input{flex:1 1 90px;min-width:80px;border:0;background:none;height:24px;padding:0 4px;font-size:13px;color:var(--text);}
.tag-ed input:focus{outline:none;}
.hint{font-size:12px;color:var(--text-mute);margin-top:4px;}
.note-form{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;}
.note-bar{display:flex;align-items:center;gap:10px;}
.note-bar .count-line{margin-inline-end:auto;}
.note{padding:10px 12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);margin-bottom:8px;}
.note-t{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.6;margin:0;}
.note-f{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:12px;color:var(--text-dim);}
.note-f .btn{margin-inline-start:auto;}

/* ===== الرسائل ===== */
.msgs{display:flex;flex-direction:column;gap:10px;}
.msg{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:12px 14px;}
.msg.unread{border-color:color-mix(in srgb,var(--accent) 38%,var(--border));}
.msg-h{display:flex;align-items:center;gap:8px;min-width:0;}
.msg-h .nm{font-weight:700;font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.msg-h .time{margin-inline-start:auto;font-size:12px;color:var(--text-dim);white-space:nowrap;flex:none;}
.msg-t{margin:6px 0 8px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.65;}
.msg-f{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.msg-f .meta{font-size:12px;color:var(--text-dim);}
.msg-f .acts{margin-inline-start:auto;display:flex;gap:6px;}
.msg.in-drawer{background:var(--surface);padding:10px 12px;}
.msg.in-drawer .msg-t{font-size:13px;margin:4px 0 6px;}
.list-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
.list-head h2{font-size:15px;font-weight:800;margin:0;}

/* ===== قوقل ===== */
.g-head{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin-bottom:14px;}
.g-head h2{font-size:15px;font-weight:800;margin:0;}
.g-head .card-s{white-space:nowrap;}
.g-head .card-a{flex-wrap:wrap;}
.kpis.k4{grid-template-columns:repeat(4,minmax(0,1fr));}
.g-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;margin-bottom:16px;align-items:start;}
.g-grid.even{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
.multi{display:flex;flex-direction:column;gap:14px;}
.multi-t{font-size:12px;font-weight:700;color:var(--text-dim);margin:0 0 4px;}
.meter{height:8px;border-radius:4px;background:rgba(255,255,255,.06);overflow:hidden;margin:8px 0 4px;}
.meter i{display:block;height:100%;background:var(--good);border-start-end-radius:4px;border-end-end-radius:4px;}
.idx{display:flex;flex-direction:column;}
.idx-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:9px 0;border-top:1px solid var(--border);}
.idx-row:first-child{border-top:0;}
.idx-row .path{font-size:13px;font-weight:600;direction:ltr;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.idx-row .cov{grid-column:1 / -1;font-size:12px;color:var(--text-dim);display:flex;gap:6px 12px;flex-wrap:wrap;}
.idx-row .cov .en{direction:ltr;unicode-bidi:isolate;}
.connect{max-width:680px;margin:8px auto;}
.connect .card-t{font-size:17px;}
.steps{display:flex;flex-direction:column;gap:12px;margin-top:14px;}
.step{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;border:1px solid var(--border);border-radius:var(--r-md);padding:14px;background:var(--bg-2);}
.step.hl{border-color:color-mix(in srgb,var(--warn) 55%,var(--border));background:color-mix(in srgb,var(--warn) 5%,var(--bg-2));}
.step-n{width:28px;height:28px;border-radius:50%;background:var(--chip);display:grid;place-items:center;font-weight:800;font-size:13px;}
.step.hl .step-n{background:var(--warn);color:var(--on-amber);}
.step h3{font-size:14px;font-weight:700;margin:2px 0 6px;}
.step p{margin:0 0 8px;font-size:13px;color:var(--text-dim);line-height:1.7;}
.step .flag{font-size:12px;font-weight:700;color:var(--warn);margin-inline-start:6px;}
.en{direction:ltr;unicode-bidi:isolate;font-weight:600;color:var(--text);}
.copybox{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--border-2);border-radius:var(--r-sm);padding:6px 6px 6px 10px;margin:4px 0 10px;min-width:0;}
.copybox code{flex:1;min-width:0;direction:ltr;text-align:left;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;
  overflow-wrap:anywhere;color:var(--text);}
.connect-f{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;}
.g-msg{font-size:13px;color:var(--critical);background:color-mix(in srgb,var(--critical) 8%,transparent);border-radius:var(--r-sm);padding:8px 10px;margin-top:10px;overflow-wrap:anywhere;}
.show-all{display:flex;justify-content:center;padding-top:10px;}

/* ===== الإشعار العائم ===== */
.toast{position:fixed;inset-inline-start:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translate(50%,20px);z-index:60;
  background:#0B3746;border:1px solid var(--border-2);color:var(--text);font-size:13px;font-weight:600;padding:10px 16px;border-radius:var(--r-pill);
  box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s var(--ease);max-width:calc(100vw - 32px);text-align:center;}
.toast.show{opacity:1;transform:translate(50%,0);}
.toast.bad{border-color:color-mix(in srgb,var(--critical) 45%,var(--border-2));}

/* ===== تجاوب ===== */
@media (max-width:1180px){
  .cust-tbl .col-tags{display:none;}
}
@media (max-width:1099px){
  :root{--gutter:20px;}
  .kpis{grid-template-columns:repeat(4,minmax(0,1fr));}
  .kpis:not(.k4) .kpi:first-child{grid-column:span 2;}
  .ov{display:flex;flex-direction:column;}
  .ov-col{display:contents;}
  .o-kpi{order:0;} .o-week{order:1;} .o-signups{order:2;} .o-trend{order:3;} .o-metrics{order:4;}
  .o-prov{order:5;} .o-plat{order:6;}
  .g-grid,.g-grid.even{grid-template-columns:minmax(0,1fr);}
  .cust-tbl .col-plat,.cust-tbl .col-joined{display:none;}
}
@media (max-width:859px){
  .cust-tbl{display:none;}
  .clist{display:flex;}
}
@media (max-width:699px){
  :root{--gutter:16px;--top-h:56px;}
  body{font-size:14px;}
  .main{padding-top:16px;}
  .who{display:none;}
  .updated{font-size:11.5px;}
  .brand img{width:30px;height:30px;}
  .tabs{gap:0;justify-content:space-between;}
  .tab{padding:0 10px;font-size:14px;}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
  .kpis.k4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .kpi{padding:12px 14px;}
  .kpi-v{font-size:22px;}
  .pair{grid-template-columns:minmax(0,1fr);}
  .card{padding:14px;}
  .metrics-h .seg{margin-inline-start:0;}
  .search{max-width:none;flex-basis:100%;}
  .filters{display:grid;grid-template-columns:1fr 1fr;}
  .filters .select{width:100%;}
  .drawer-panel{width:100%;border-inline-start:0;transform:translateY(104%);}
  .drawer.open .drawer-panel{transform:none;}
  .kv,.form-row{grid-template-columns:104px minmax(0,1fr);}
  .g-head .card-a{margin-inline-start:0;width:100%;}
  /* ⛔ iOS يكبّر الصفحة عند التركيز على حقل خطّه أصغر من 16px */
  .input,.select,.textarea,.tag-ed input{font-size:16px;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation-duration:.01ms !important;}
}