@font-face{font-family:Cairo;font-weight:700;unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F;src:url(fonts/cairo-arabic-700-normal.woff2) format("woff2")}
@font-face{font-family:Cairo;font-weight:800;unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F;src:url(fonts/cairo-arabic-800-normal.woff2) format("woff2")}
@font-face{font-family:Cairo;font-weight:900;unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F;src:url(fonts/cairo-arabic-900-normal.woff2) format("woff2")}
@font-face{font-family:Cairo;font-weight:700;unicode-range:U+0000-05FF,U+2000-206F,U+2212;src:url(fonts/cairo-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:Cairo;font-weight:800;unicode-range:U+0000-05FF,U+2000-206F,U+2212;src:url(fonts/cairo-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:Cairo;font-weight:900;unicode-range:U+0000-05FF,U+2000-206F,U+2212;src:url(fonts/cairo-latin-900-normal.woff2) format("woff2")}
@font-face{font-family:Plex;font-weight:400;unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F;src:url(fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2")}
@font-face{font-family:Plex;font-weight:500;unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F;src:url(fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format("woff2")}
@font-face{font-family:Plex;font-weight:600;unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F;src:url(fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format("woff2")}
@font-face{font-family:Plex;font-weight:700;unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F;src:url(fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format("woff2")}
@font-face{font-family:Plex;font-weight:400;unicode-range:U+0000-05FF,U+2000-206F,U+2212;src:url(fonts/ibm-plex-sans-arabic-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Plex;font-weight:500;unicode-range:U+0000-05FF,U+2000-206F,U+2212;src:url(fonts/ibm-plex-sans-arabic-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Plex;font-weight:600;unicode-range:U+0000-05FF,U+2000-206F,U+2212;src:url(fonts/ibm-plex-sans-arabic-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Plex;font-weight:700;unicode-range:U+0000-05FF,U+2000-206F,U+2212;src:url(fonts/ibm-plex-sans-arabic-latin-700-normal.woff2) format("woff2")}

:root{--ink:#0F1B2D;--ink2:#1B2A40;--paper:#F5F3EE;--card:#fff;--green:#0EA371;--green-d:#0A7A55;--green-l:#E3F5EC;--coral:#F2545B;--coral-d:#C2333A;--coral-l:#FDE8E8;--amber:#F5A524;--amber-d:#A16207;--amber-l:#FEF3DC;--blue:#2563EB;--blue-l:#E6EEFD;--muted:#5B6676;--line:#E8E4DC;--r:18px}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{background:var(--paper);color:var(--ink);font-family:Plex,system-ui,sans-serif;font-size:16px;line-height:1.5}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.display{font-family:Cairo,Plex,sans-serif;font-weight:800}
.muted{color:var(--muted)}
.logo{display:inline-grid;place-items:center;border-radius:28%;background:linear-gradient(145deg,#12C084,#0A7A55);position:relative;flex-shrink:0}
.logo svg{width:62%;height:62%}
/* mobile shell */
.app{max-width:480px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:5;background:rgba(245,243,238,.92);backdrop-filter:blur(10px);padding:14px 18px 12px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line)}
.top h1{font-family:Cairo;font-weight:800;font-size:19px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top>div:nth-child(2){min-width:0;flex:1}
.top .end{flex-shrink:0}
.top .sub{font-size:13px;color:var(--muted)}
.top .end{margin-right:auto}
.live{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--green-d);background:var(--green-l);padding:4px 10px;border-radius:999px}
.live:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.3}}
main{flex:1;padding:16px 16px 120px}
.section-title{font-size:13px;font-weight:600;color:var(--muted);margin:18px 4px 8px}
.list{display:flex;flex-direction:column;gap:8px}
.row{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;min-height:64px}
.row .av{width:40px;height:40px;border-radius:50%;background:#ECEFF3;display:grid;place-items:center;font-family:Cairo;font-weight:700;color:var(--muted);flex-shrink:0}
.row .main{flex:1;min-width:0}
.row .t{font-weight:600}
.row .s{font-size:13px;color:var(--muted)}
.pill{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:5px 12px;font-size:13px;font-weight:700;white-space:nowrap}
.pill.ok{background:var(--green-l);color:var(--green-d)}
.pill.ko{background:var(--coral-l);color:var(--coral-d)}
.pill.wa{background:var(--amber-l);color:var(--amber-d)}
.pill.in{background:var(--blue-l);color:var(--blue)}
.pill.nt{background:#ECEFF3;color:var(--muted)}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;border-radius:16px;padding:15px 18px;font-weight:700;font-size:16px;width:100%;transition:transform .08s}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--green);color:#fff}
.btn.dark{background:var(--ink);color:#fff}
.btn.danger{background:var(--coral);color:#fff}
.btn.soft{background:var(--green-l);color:var(--green-d)}
.btn.ghost{background:#fff;border:1px solid var(--line)}
.btn.sm{width:auto;padding:9px 14px;font-size:14px;border-radius:12px}
.btn[disabled]{opacity:.45;pointer-events:none}
.dock{position:fixed;bottom:0;left:0;right:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--paper) 30%)}
.dock .inner{max-width:448px;margin:0 auto}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:18px}
.toast{position:fixed;top:14px;left:50%;transform:translate(-50%,-140%);background:var(--ink);color:#fff;padding:12px 18px;border-radius:14px;font-weight:600;z-index:50;transition:transform .3s;max-width:92vw;text-align:center}
.toast.show{transform:translate(-50%,0)}
.sheet-bg{position:fixed;inset:0;background:rgba(15,27,45,.45);z-index:40;display:none;align-items:flex-end;justify-content:center}
.sheet-bg.show{display:flex}
.sheet{background:var(--paper);width:100%;max-width:480px;border-radius:26px 26px 0 0;padding:22px 18px calc(22px + env(safe-area-inset-bottom));max-height:88vh;overflow:auto}
.unlock{position:fixed;inset:0;z-index:60;background:var(--ink);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:30px;text-align:center}
.unlock h2{font-family:Cairo;font-weight:900;font-size:30px}
.unlock p{color:#B9C3D1;max-width:320px}
.unlock .btn{max-width:300px}
input,textarea,select{font:inherit;width:100%;padding:13px 14px;border-radius:14px;border:1px solid var(--line);background:#fff;color:var(--ink)}
.empty{text-align:center;padding:40px 20px;color:var(--muted)}