/* حارس المبنى: تنسيق الجوال (عربي، داكن). كل الألوان في المتغيرات هنا فقط؛ الدرجة «فيروزي بحري» اختارها المالك 2026-10-17. */
@font-face{font-family:"Plex Arabic";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-arabic-400.woff2) format("woff2")}
@font-face{font-family:"Plex Arabic";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-arabic-600.woff2) format("woff2")}
@font-face{font-family:"Plex Arabic";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-arabic-700.woff2) format("woff2")}

:root{
  --bg:#061c21;        /* خلفية الصفحة */
  --card:#0d3038;      /* البطاقات والشريطان */
  --card-2:#16444f;    /* أزرار وحقول فوق البطاقة */
  --ink:#f2fcfd;       /* النص الأساسي */
  --muted:#a9d0d6;     /* للأسطر الثانوية فقط */
  --line:#2a5f6b;      /* الحدود */
  --accent:#9be9f4;    /* لون العلامة الوحيد */
  --on-accent:#032a31; /* نص فوق لون العلامة */
  --alert:#ff6a5e;     /* تنبيه وانقطاع */
  --ok:#4be08f;        /* متصل وسليم */
  --scrim:rgba(2,18,22,.80);   /* تعتيم تحت اسم الكاميرا */
  --on-img:#fff;             /* نص فوق الصور */
  --overlay:#030f12;   /* خلفية العرض الكبير (معتمة) */

  --top-h:52px;--nav-h:68px;--pad:max(14px,env(safe-area-inset-left),env(safe-area-inset-right));
  --safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:17px;color-scheme:dark;-webkit-text-size-adjust:100%}
@media(min-width:768px){html{font-size:18px}}
body{margin:0;background:var(--bg);color:var(--ink);font:600 1rem/1.65 "Plex Arabic","Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;min-height:100vh;overflow-wrap:break-word}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
h2{font-size:1.35rem;line-height:1.35;font-weight:700;margin:0}
p{margin:0}
.ic{width:1.5em;height:1.5em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.msg{text-align:center;padding:48px 8px;font-size:1.15rem;font-weight:700}

/* ———— الشريط العلوي: رفيع ويختفي عند النزول ويعود عند الصعود ———— */
#top{position:fixed;inset:0 0 auto 0;z-index:30;height:calc(var(--top-h) + var(--safe-t));padding:var(--safe-t) var(--pad) 0;display:flex;align-items:center;gap:10px;background:var(--card);border-bottom:1px solid var(--line);transition:transform .25s}
body.bar-hidden #top{transform:translateY(-100%)}
.logo{border-radius:9px;flex:none}
.brand{font-size:1.2rem;font-weight:700;white-space:nowrap}
.nextp{margin-inline-start:auto;font-weight:700;display:none}
#install{margin-inline-start:auto}
/* زر المالك للتنقل بين الكاميرات والسماعات في أقصى الشريط */
#swap{margin-inline-start:auto;min-height:40px;padding:0 14px;border-color:var(--accent);color:var(--accent)}
#install:not([hidden])~#swap{margin-inline-start:0}
@media(min-width:900px){.nextp{display:block}.nextp:not([hidden])~#install,.nextp:not([hidden])~#swap{margin-inline-start:0}}

main{max-width:1200px;margin:0 auto;padding:calc(var(--top-h) + var(--safe-t) + 12px) var(--pad) calc(var(--nav-h) + var(--safe-b) + 28px)}

/* ———— الشريط السفلي ———— */
#nav{position:fixed;inset:auto 0 0 0;z-index:30;background:var(--card);border-top:1px solid var(--line);padding-bottom:var(--safe-b)}
#navin{max-width:760px;margin:0 auto;padding:0 var(--pad);display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
#navin button{position:relative;height:var(--nav-h);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;background:none;color:var(--muted);font-size:.9rem;line-height:1.2;font-weight:700;padding:0 4px}
#navin button .ic{width:1.75rem;height:1.75rem}
#navin button[aria-current=page]{color:var(--accent)}
#navin button[aria-current=page]::before{content:"";position:absolute;top:0;inset-inline:22%;height:3px;border-radius:0 0 4px 4px;background:var(--accent)}
.ico{position:relative;display:flex}
.ico i{position:absolute;top:-2px;inset-inline-end:-5px;width:13px;height:13px;border-radius:50%;background:var(--alert);border:2px solid var(--card)}

/* ———— أزرار وعناصر عامة ———— */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 22px;border-radius:99px;border:2px solid var(--line);background:var(--card-2);color:var(--ink);font-weight:700;font-size:1.05rem;line-height:1.2;white-space:nowrap}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.warn{background:var(--alert);border-color:var(--alert);color:#2a0603}
.btn.warn[data-sure]{animation:sure .5s ease-in-out infinite alternate}
@keyframes sure{to{filter:brightness(1.25)}}
.btn.sm{min-height:44px;padding:0 16px;font-size:.95rem}
.btn:active{transform:translateY(1px)}
.btn[aria-busy=true]{opacity:.55;pointer-events:none}
.ibtn{width:48px;height:48px;flex:none;border-radius:50%;display:grid;place-items:center;border:2px solid var(--line);background:var(--card-2)}
.ibtn[aria-busy=true]{opacity:.55;pointer-events:none}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px}
.dot{width:12px;height:12px;flex:none;border-radius:50%;background:var(--muted)}
.dot.ok{background:var(--ok)}.dot.bad{background:var(--alert)}
.screen>:first-child{margin-top:0}

/* صف ثابت تحت الشريط العلوي (أماكن الكاميرات، اختيار الصوت) ويتبعه عند اختفائه */
.stick{position:sticky;top:calc(var(--top-h) + var(--safe-t));z-index:20;background:var(--bg);margin-inline:calc(var(--pad) * -1);padding:6px var(--pad);transition:top .25s}
body.bar-hidden .stick{top:var(--safe-t)}

/* ———— الكاميرات ———— */
.chips{display:flex;gap:8px;overflow-x:auto;padding:3px;scrollbar-width:none;scroll-snap-type:x proximity}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;min-height:48px;padding:0 10px 0 16px;border-radius:99px;border:2px solid var(--line);background:var(--card);display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:1.02rem;white-space:nowrap;scroll-snap-align:center}
.chip .n{min-width:28px;height:28px;padding:0 7px;border-radius:99px;background:var(--bg);display:grid;place-items:center;font-size:.85rem;font-variant-numeric:tabular-nums}
.chip.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.chip.on .n{background:var(--on-accent);color:var(--accent)}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:8px}
@media(min-width:700px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
@media(min-width:1000px){.tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:900px){.chips{flex-wrap:wrap}.stick{position:static}}   /* على الشاشة العريضة تظهر كل الأماكن بلا تمرير */
.tile{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:2px solid var(--line);border-radius:16px;overflow:hidden;background:var(--card);color:var(--on-img)}
.tile:focus-visible{outline-offset:-3px}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tile .nm{position:absolute;inset:auto 0 0 0;padding:24px 10px 7px;text-align:start;font-weight:700;font-size:.95rem;line-height:1.3;background:linear-gradient(transparent,var(--scrim));overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tile .down{position:absolute;inset:0;display:none;place-items:center;padding-bottom:26px;font-weight:700;font-size:1.05rem;color:var(--ink)}
.tile.off .down,.tile.nofeed .down{display:grid}
.tile .mark{position:absolute;top:8px;inset-inline-start:8px;width:14px;height:14px;border-radius:50%;background:var(--alert);box-shadow:0 0 0 3px var(--scrim);display:none}
.tile.off .mark{display:block}
.hint{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--accent);border-radius:16px;padding:12px 14px;margin-bottom:8px}
.hint p{flex:1;min-width:0;line-height:1.5}
.hint p b{display:block;font-size:1.05rem}

/* ———— اليوم / أمس ———— */
.dayrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:2px 0 14px}
.seg{display:flex;padding:4px;border-radius:99px;background:var(--card);border:1px solid var(--line);width:min(100%,290px)}
.seg button{flex:1;min-height:48px;border:0;border-radius:99px;background:none;font-weight:700;font-size:1.05rem;padding:0 12px}
.seg button[aria-pressed=true]{background:var(--accent);color:var(--on-accent)}
.date{color:var(--muted);font-size:.95rem}

/* ———— التنبيهات ———— */
/* شاشة الحارس: الليل (تنبيه بصوت) أو النهار (بلا صوت) */
.gstate{display:flex;align-items:center;gap:12px;background:var(--card);border:2px solid var(--line);border-radius:16px;padding:14px 16px;margin-bottom:14px}
.gstate .ic{width:2rem;height:2rem;color:var(--muted)}
.gstate p{line-height:1.5}
.gstate b{display:block;font-size:1.2rem}
.gstate span{font-weight:700;color:var(--muted)}
.gstate.night{border-color:var(--alert)}
.gstate.night .ic{color:var(--alert)}
.sndbox{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 14px;margin-bottom:14px}
.sndbox p{flex:1 1 180px;line-height:1.5}
.sndbox .okline{display:flex;align-items:center;gap:10px;flex:1 1 100%}
.evlist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
@media(min-width:900px){.evlist{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ev{display:flex;gap:12px;align-items:stretch;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px}
.ev-img{flex:none;width:104px;min-height:78px;padding:0;border:0;border-radius:12px;overflow:hidden;background:var(--card-2);display:block}
.ev-img img{width:100%;height:100%;object-fit:cover;display:block}
.ev-body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:1px}
.ev-time{color:var(--accent);font-weight:700;font-size:1.1rem;font-variant-numeric:tabular-nums}
.ev-time small{font-size:.9rem}
.ev-type{font-size:1.12rem;line-height:1.35;font-weight:700}
.ev-where{line-height:1.45}

/* ———— التقرير ———— */
.phost{margin-bottom:14px}
.pstrip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(60px,1fr);gap:2px;padding:6px;border-radius:16px;background:var(--card);border:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.pstrip::-webkit-scrollbar{display:none}
.pstrip .p{text-align:center;padding:6px 2px;border-radius:12px;line-height:1.35;min-width:0}
.pstrip .p b{display:block;font-size:.9rem}
.pstrip .p .t{display:block;font-size:.9rem;font-weight:700;white-space:nowrap}
.pstrip .p .t small{font-size:.7rem}
.pstrip .p.next{background:var(--accent);color:var(--on-accent)}
.pcity{font-size:.9rem;color:var(--muted);margin:0 4px 6px}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}
@media(min-width:700px){.cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
@media(min-width:1000px){.cards{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stat{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:2px;min-width:0}
.stat .t{font-weight:700;line-height:1.4}
.stat .v.long{font-size:1.6rem;line-height:1.3}
.stat .v{font-size:2.3rem;line-height:1.15;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
.stat .n{color:var(--muted);font-size:.9rem;line-height:1.45}
.sections{display:grid;gap:12px}
@media(min-width:900px){.sections{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}
.rows{margin:8px 0 0}
.rows div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:11px 0;border-top:1px solid var(--line)}
.rows dt{min-width:0}
.rows dd{margin:0;font-weight:700;text-align:end;font-variant-numeric:tabular-nums;flex:none;max-width:50%}

/* ———— السماعات ———— */
.sel{display:flex;align-items:center;gap:12px;font-weight:700;max-width:560px}
.sel span{flex:none}
select{flex:1;min-width:0;min-height:52px;border-radius:99px;background:var(--card-2);border:2px solid var(--line);padding:0 18px;font-weight:700;font-size:1.05rem}
.adhan{display:flex;align-items:center;gap:10px;margin-top:12px;line-height:1.5}
#s-spk>.card+.card{margin-top:14px}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.two .btn{padding:0 10px}
.vol{display:flex;align-items:center;gap:12px;margin-top:10px}
.vol>span{flex:none;font-weight:700}
.vol output{flex:none;min-width:2.2em;white-space:nowrap;text-align:end;font-weight:700;font-variant-numeric:tabular-nums}
details{margin-top:6px}
summary{list-style:none;display:flex;align-items:center;justify-content:space-between;min-height:52px;font-weight:700;color:var(--accent);cursor:pointer;border-top:1px solid var(--line);margin-top:10px}
summary::-webkit-details-marker{display:none}
summary .ic{transition:transform .2s}
details[open] summary .ic{transform:rotate(180deg)}
.spks{list-style:none;margin:0;padding:0}
.spk{padding:12px 0;border-top:1px solid var(--line)}
.spk-top{display:flex;align-items:center;gap:12px}
.spk-name{flex:1;min-width:0;line-height:1.45}
.spk-name b{display:block;font-size:1.05rem}
.spk-name small{display:block;font-size:.9rem;color:var(--muted)}
.spk-name small.bad{color:var(--alert)}
.spk.off .spk-name b{color:var(--muted)}
.spk .vol{margin-top:2px}

input[type=range]{-webkit-appearance:none;appearance:none;flex:1;min-width:0;height:44px;margin:0;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:12px;border-radius:99px;background:linear-gradient(to left,var(--accent) var(--v,50%),var(--line) var(--v,50%))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-9px;border-radius:50%;background:var(--ink);border:4px solid var(--accent)}
input[type=range]::-moz-range-track{height:12px;border-radius:99px;background:var(--line)}
input[type=range]::-moz-range-progress{height:12px;border-radius:99px;background:var(--accent)}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--ink);border:4px solid var(--accent)}

/* ———— العرض الكبير وتكبير الصورة ———— */
.overlay{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;background:var(--overlay);padding:var(--safe-t) var(--pad) var(--safe-b);overscroll-behavior:contain}
.ov-head{display:flex;align-items:center;gap:12px;padding:8px 0;min-height:64px}
.ov-title{flex:1;min-width:0;line-height:1.35}
.ov-title b{display:block;font-size:1.25rem;font-weight:700}
.ov-title small{display:block;color:var(--muted);font-size:.95rem;text-wrap:balance}
.ov-stage{flex:1;min-height:0;position:relative;display:grid;place-items:center;touch-action:none}
.ov-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;-webkit-user-select:none;user-select:none}
.ov-stage .msg{position:absolute;inset:0;display:grid;place-items:center;padding:0}
.v-ctl{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:10px 0}
.v-ctl .btn{min-height:56px;padding:0 8px;width:100%}
.v-mid{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:92px}
.v-mid small{color:var(--muted);font-size:.9rem}
.live{display:inline-flex;align-items:center;gap:8px;font-weight:700}
.live i{width:12px;height:12px;border-radius:50%;background:var(--muted)}
.live.on i{background:var(--ok);animation:pulse 1.4s infinite}
.live.lost i,.live.off i{background:var(--alert)}
.live.lost,.live.off{color:var(--alert)}
@keyframes pulse{50%{opacity:.35}}

#toast{position:fixed;inset-inline:0;bottom:calc(var(--nav-h) + var(--safe-b) + 14px);margin-inline:auto;width:max-content;max-width:min(92vw,520px);z-index:70;background:var(--ink);color:var(--bg);border-radius:99px;padding:12px 22px;font-weight:700;text-align:center;pointer-events:none;opacity:0;transform:translateY(16px);transition:.25s}
#toast.on{opacity:1;transform:none}

.gate{min-height:100vh;display:grid;place-items:center;text-align:center;padding:24px;font-size:1.6rem;line-height:1.6;font-weight:700}

/* ———— جوال بالعرض: شرائط أنحف وصف الأماكن يمرّ مع الصفحة ———— */
@media(max-height:520px){
  :root{--top-h:44px;--nav-h:52px}
  #navin button{flex-direction:row;gap:8px;font-size:.95rem}
  #navin button .ic{width:1.5rem;height:1.5rem}
  #navin button[aria-current=page]::before{inset-inline:12%}
  .stick{position:static}
  .btn{min-height:48px}
  .ov-head{min-height:52px;padding:4px 0}
  .ov-title b{font-size:1.1rem}
  .v-ctl{padding:6px 0}.v-ctl .btn{min-height:48px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ———— الأذان وتنبيهات الجوال ———— */
.sndbox+.sndbox{margin-top:10px}
.adhan{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-top:12px}
.adhan .two{grid-template-columns:repeat(2,minmax(0,1fr))}
.adhan h3{font-size:1.1rem;font-weight:700;margin:0 0 8px}
.ad-state{display:flex;align-items:center;gap:10px;font-size:1.15rem}
.ad-part{border-top:1px solid var(--line);padding-top:12px}
.ad-note{color:var(--muted);font-size:.95rem;margin-top:6px}
.ad-chips{display:flex;flex-wrap:wrap;gap:8px}
.ad-bad{margin:0;padding:0 18px 0 0;color:var(--alert);font-size:.95rem}
.btn.wide{width:100%;justify-content:center;min-height:52px;font-size:1.1rem}
.adhan .sel{display:block;margin-bottom:10px}
.adhan .sel select{width:100%;min-width:0;text-overflow:ellipsis}
/* تشغيل في السماعات + ملفات ومواعيد: حقل لكل شيء بعنوان واضح فوقه */
.fld{display:grid;gap:6px;margin-top:14px}
.fld>span{font-weight:700;font-size:1.05rem}
.fld select{width:100%}
#play .two{margin-top:16px}
#play>.sub{font-size:.95rem;color:var(--muted);margin-top:6px}
#play>.sub .bad{color:var(--alert)}
#play-job{color:var(--accent)}
input[type=time]{width:100%;min-height:52px;border-radius:99px;background:var(--card-2);border:2px solid var(--line);color:var(--ink);padding:0 18px;font:inherit;font-weight:700;font-size:1.15rem}
.upl{margin-top:12px;cursor:pointer}
.upl[aria-busy=true]{opacity:.55;pointer-events:none}
.rows2{list-style:none;margin:10px 0 0;padding:0}
.rows2 li{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.rows2 li.off .r-name b{color:var(--muted)}
.r-name{flex:1;min-width:0;line-height:1.45}
.r-name b{display:block;font-size:1.05rem}
.r-name small{display:block;color:var(--muted);font-size:.92rem}
.chip.sm{min-height:44px;padding:0 14px}
#pl-new .btn.wide{margin-top:16px}
#adhan details .ad-part{margin-top:12px}

/* حافة حمراء على بطاقة التنبيه المهم */
.ev.urgent{box-shadow:inset -6px 0 0 var(--alert)}

/* ———— مناطق التنبيه ———— */
.ze-body{flex:1;min-height:0;overflow-y:auto;display:grid;grid-auto-rows:max-content;gap:14px;align-content:start;padding-bottom:18px}
.ze-stage{position:relative;border-radius:12px;overflow:hidden;background:#000;touch-action:manipulation}
.ze-stage img{display:block;width:100%;height:auto;-webkit-user-select:none;user-select:none}
.ze-stage svg{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair}
.ze-new{fill:rgba(255,106,94,.28);stroke:var(--alert);stroke-width:6;stroke-linejoin:round}
polyline.ze-new{fill:none}
.ze-old{fill:rgba(155,233,244,.16);stroke:var(--accent);stroke-width:4;stroke-dasharray:16 10}
.ze-lbl{fill:#fff;font-weight:700;text-anchor:middle;dominant-baseline:middle;paint-order:stroke;stroke:#000;stroke-width:6px}
.ze-dot{fill:var(--alert);stroke:#fff;stroke-width:5}
.ze-tip{display:flex;align-items:center;gap:10px;justify-content:space-between;font-weight:700;font-size:1.1rem}
.ze-form{display:grid;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px}
.ze-form h3{font-size:1.1rem;margin:0 0 8px}
.ze-form .chip[disabled]{opacity:.4}
.ze-times{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.ze-times label{display:flex;align-items:center;gap:8px;font-weight:700}
.ze-times input,.ze-name{min-height:48px;border-radius:12px;border:2px solid var(--line);background:var(--card-2);color:var(--ink);padding:0 12px;font:inherit;font-weight:700}
.ze-name{width:100%}
.btn[disabled]{opacity:.45}
.zcard{margin-bottom:12px}
.zlist{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
.zrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;border-top:1px solid var(--line);padding-top:10px}
.zrow>div{flex:1 1 100%;min-width:0}
.zrow b{display:block}
.zrow small{display:block;color:var(--muted);font-size:.92rem}
.ze-editing{margin:0 0 6px;font-size:1.08rem;font-weight:700}
#ze-cancel{margin-top:8px}
#v-area{white-space:nowrap}

/* ———— الفيديو المباشر ومراجعة التسجيل وحركة الكاميرا ———— */
/* الفيديو ثابت فوق، والأدوات واللوحة تحته تمرّ وحدها حتى لا يختفي الفيديو */
.ov-scroll{flex:0 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding-top:10px;overscroll-behavior:contain}
.overlay.panel .ov-stage{flex:0 0 min(56.25vw,40vh)}
.overlay.panel .ov-scroll{flex:1 1 auto}
live-video{position:absolute;inset:0;display:grid;place-items:center;background:#000;container-type:size}
live-video video{width:100%;height:100%;object-fit:contain}
/* go2rtc يكتب في رأس البث الفرعي مقاساً خاطئاً (4:3)، فيظهر منضغطاً؛ وكل الكاميرات 16:9، فيُرسم الفيديو بهذه النسبة دائماً (important لأن المشغّل يضع مقاسه داخل العنصر) */
@supports (width:1cqw){live-video video{width:min(100cqw,177.78cqh)!important;height:auto!important;aspect-ratio:16/9;object-fit:fill}}
.v-tools{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.v-tools .btn{flex:1 1 0;max-width:180px;padding:0 10px}
.v-tools .btn[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.live.pb i{background:var(--alert)}
.rec,.cmot{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px;display:grid;gap:8px}
.rec-days{display:flex;flex-wrap:wrap;gap:8px}
.rec-days .chip.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.rec-date{position:relative;cursor:pointer}
.rec-date input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}
.rec-lbl{font-weight:700;margin-top:4px}
.rec-lbl small{color:var(--muted);font-size:.85rem;margin-inline-start:6px}
.rec-bar{display:block;width:100%;height:46px;border-radius:10px;cursor:pointer;touch-action:manipulation}
.rb-bg{fill:var(--bg)}
.rb-rec{fill:var(--card-2)}
.rb-mot{fill:var(--accent)}
.rb-cur{fill:#fff}
.rec-ticks{display:flex;justify-content:space-between;color:var(--muted);font-size:.8rem;line-height:1.2;margin-top:-2px}
.rec-now{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:4px}
.rec-time{position:relative;flex:0 1 220px;display:flex;align-items:center;justify-content:center;min-height:56px;border-radius:99px;background:var(--card-2);border:2px solid var(--line);cursor:pointer}
.rec-time b{font-size:1.5rem;font-variant-numeric:tabular-nums}
.rec-time b small{font-size:1rem}
.rec-time input{position:absolute;inset:0;opacity:0;width:100%;min-height:0;cursor:pointer}
.rec-state{flex:1 1 140px;font-weight:700;color:var(--accent);line-height:1.4}
.rec-jumps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.rec-jumps .btn{padding:4px 2px;min-height:58px;font-size:.88rem;line-height:1.25;white-space:normal;border-radius:14px;text-align:center}
.rec-jumps .btn.pri{font-size:1rem}
.v-rclock{position:absolute;top:6px;inset-inline-start:6px;z-index:3;display:flex;align-items:baseline;gap:5px;white-space:nowrap;max-width:calc(100% - 12px);overflow:hidden;padding:3px 10px;border-radius:10px;background:rgba(0,0,0,.62);color:#fff;font-weight:700;line-height:1.25;pointer-events:none}
.v-rclock b{font-size:1.2rem;font-variant-numeric:tabular-nums}
.v-rclock span{font-size:1rem}
.v-rclock small{font-size:.85rem;opacity:.9}
.v-rclock .sp{background:var(--accent);color:var(--on-accent);border-radius:6px;padding:0 5px;opacity:1}
.rec-speed{display:grid;grid-template-columns:auto repeat(4,minmax(0,1fr));gap:6px;align-items:center}
.rec-speed>span{font-weight:700;margin-inline-end:2px}
.rec-speed .chip{min-width:0;padding-inline:4px;justify-content:center;text-align:center}
.rec-speed .chip.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.rec-shbox{display:grid;gap:8px;margin-top:8px}
.rec-shbox .ad-chips{display:flex;gap:8px;flex-wrap:wrap}
.rec-shbox p{margin:0;font-weight:700}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cm-sum{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline}
.cm-sum b{font-size:1.1rem}
.cm-sum span{color:var(--muted)}
.msg.sm{padding:18px 4px;font-size:1rem}
.seg4{width:100%;max-width:520px}
.seg4 button{padding:0 4px;font-size:.98rem}
/* أعمدة رأسية: ساعات اليوم أو أيام المدة (الأيمن أولاً) */
.vbars{display:flex;align-items:flex-end;gap:2px;height:120px;padding:4px 0;border-bottom:1px solid var(--line)}
.vb{flex:1;min-width:0;height:100%;display:flex;align-items:flex-end;padding:0;border:0;background:none}
.vb i{display:block;width:100%;height:var(--h);min-height:2px;border-radius:4px 4px 0 0;background:var(--accent)}
button.vb:active i{filter:brightness(1.3)}
/* أشرطة أفقية: الحركة لكل دور أو كاميرا */
.hbars{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.hbars .hbars{margin:6px 14px 8px 0;padding-inline-start:10px;border-inline-start:3px solid var(--line)}
.hb{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 10px;min-height:48px;padding:9px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg);text-align:start;font-weight:700}
.hb-v{font-variant-numeric:tabular-nums;white-space:nowrap}
.hb i{grid-column:1/-1;height:8px;border-radius:99px;background:linear-gradient(to left,var(--accent) var(--w),var(--card-2) var(--w))}
.hb[aria-expanded=true]{border-color:var(--accent)}
.charts{margin-bottom:12px}
.ev-rec{align-self:flex-start;margin-top:6px;min-height:40px;padding:0 12px;font-size:.92rem}
.ev-rec .ic{width:1.1em;height:1.1em}
/* صورة التنبيه: زرا التسجيل والبث أسفلها، وإطار أحمر في الإنذار */
.lb-acts{display:flex;gap:10px;padding:12px 0 6px}
.lb-acts .btn{flex:1 1 0;min-height:56px;font-size:1.1rem}
#lb.loud .ov-stage{outline:4px solid var(--alert);outline-offset:-4px;border-radius:12px}
/* بطاقة الحارس: خطوات كبيرة واضحة */
.gstep{flex-direction:column;align-items:stretch;text-align:center}
.gstep .btn.wide{min-height:60px;font-size:1.2rem}
.gstep p{flex:none;font-weight:700}
.gnote{color:var(--muted)}
.gstep .btn.wide{white-space:normal;text-align:center}
body.guard #install{display:none}   /* للحارس زر التثبيت في بطاقته الكبيرة */
.rq-text{width:100%;min-height:96px;margin:10px 0 12px;resize:vertical;line-height:1.6}