/* ===== قوائم الشريط المنبثقة ===== */
.menu{position:absolute;bottom:8px;z-index:46;display:none;flex-direction:column;gap:2px;min-width:210px;
  background:var(--bar-solid);border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:0 14px 40px rgba(0,0,0,.45);color:var(--txt)}
.menu.on{display:flex;animation:pin .14s ease}
.mi{display:flex;align-items:center;gap:10px;height:36px;border:0;border-radius:8px;background:transparent;color:var(--txt);
  padding:0 10px;cursor:pointer;font-family:inherit;font-size:14px;text-align:right;width:100%}
.mi:hover{background:var(--bar2)}
.mi.on{background:var(--accent-soft);color:var(--accent)}
.mi svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.mi span{flex:1}
.mi kbd{font-family:inherit;font-size:11px;color:var(--muted);background:var(--field);border-radius:5px;padding:1px 6px;direction:ltr}
.mi.active-glob{color:#ffd43b}
.msep{height:1px;background:var(--line);margin:4px 2px}
.mlbl{font-size:12px;color:var(--muted);font-weight:700;padding:4px 6px 2px}

#penPop{min-width:0;padding:10px}
.cgrid{display:grid;grid-template-columns:repeat(6,26px);gap:8px;padding:4px 6px 8px}
.cgrid .sw{width:26px;height:26px}
.cgrid .cc{width:26px;height:26px}
.cgrid #customColor{width:26px;height:26px}
.wrow{display:flex;gap:6px;padding:4px 6px}
.wrow .wd{width:40px;height:36px}

/* أزرار لها قائمة: سهم صغير */
button.b.caret::before{content:"";position:absolute;bottom:3px;left:3px;border-left:3px solid transparent;border-right:3px solid transparent;
  border-top:3px solid currentColor;opacity:.6}
button.b.popOpen{background:var(--bar2)}

/* زر اللون */
.pdot{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#e5484d;box-shadow:0 0 0 2px rgba(255,255,255,.25)}
.pdot i{display:block;border-radius:50%;background:rgba(255,255,255,.9);width:8px;height:8px}

/* مؤشر التسجيل */
.recPill{display:none;align-items:center;gap:6px;height:30px;padding:0 6px 0 10px;border-radius:15px;background:rgba(229,72,77,.16);
  border:1px solid rgba(229,72,77,.5);color:#ffb3b5;font-size:13px;font-variant-numeric:tabular-nums;-webkit-app-region:no-drag;flex:0 0 auto}
.recPill.on{display:flex}
.recPill .rdot{width:9px;height:9px;border-radius:50%;background:#e5484d;animation:blink 1.1s infinite}
.recPill.paused .rdot{animation:none;opacity:.4}
.recPill button{width:24px;height:24px;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;cursor:pointer;font-size:11px;padding:0}
.recPill button:hover{background:var(--danger)}
@keyframes blink{50%{opacity:.25}}

/* لوحة إعداد التسجيل */
#recPanel{max-width:520px;inset:auto 0 14px 0;max-height:calc(100% - 28px)}
.ropt{display:flex;flex-direction:column;gap:14px}
.rrow{display:flex;align-items:center;gap:10px}
.rrow .lbl{width:110px;flex:0 0 auto}
.seg{display:flex;background:var(--field);border-radius:10px;padding:3px;gap:3px;flex:1}
.seg button{flex:1;height:34px;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer;font-family:inherit;font-size:13.5px}
.seg button.on{background:var(--accent);color:#fff;font-weight:700}
.ropt select{flex:1;min-width:0}
.tog{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14px}
.tog input{display:none}
.tog .sl{width:38px;height:22px;border-radius:11px;background:#3b3e49;position:relative;transition:.15s;flex:0 0 auto}
.tog .sl::after{content:"";position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.15s}
.tog input:checked + .sl{background:var(--accent)}
.tog input:checked + .sl::after{right:19px}
.rnote{font-size:12.5px;color:var(--muted);line-height:1.6}
#recStart{height:46px;border:0;border-radius:12px;background:var(--danger);color:#fff;font-size:16px;font-weight:800;cursor:pointer;font-family:inherit}
#recStart:hover{filter:brightness(1.1)}
#countdown{position:absolute;inset:0;z-index:70;display:none;place-items:center;background:rgba(0,0,0,.35);pointer-events:none}
#countdown.on{display:grid}
#countdown span{font-size:160px;font-weight:900;color:#fff;text-shadow:0 8px 40px rgba(0,0,0,.5);animation:cd 1s ease}
@keyframes cd{from{transform:scale(1.6);opacity:0}30%{opacity:1}to{transform:scale(.9)}}
.toastBtn{margin-inline-start:10px;background:var(--accent);border:0;color:#fff;border-radius:12px;padding:3px 12px;cursor:pointer;font-family:inherit;pointer-events:auto}

/* وضع اختيار برنامج لدائرة */
#appsPanel.pick .ph h2::after{content:attr(data-pick);display:block;font-size:13px;color:var(--accent);font-weight:400;margin-top:2px}
/* اللغات من اليسار إلى اليمين */
html[dir=ltr] .mi{text-align:left}
html[dir=ltr] #back svg,html[dir=ltr] #fwd svg,html[dir=ltr] #back2 svg,html[dir=ltr] #fwd2 svg{transform:scaleX(-1)}
html[dir=ltr] .textEntry{direction:ltr}

/* الأختام */
.stampIc{font-size:17px;font-weight:900;line-height:1;color:#2fb344}
.stampGrid{display:grid;grid-template-columns:repeat(3,48px);gap:6px;padding:4px 6px 6px}
.stampGrid button{width:48px;height:44px;border:0;border-radius:10px;background:var(--field);cursor:pointer;font-size:24px;font-weight:900;font-family:"Segoe UI",Tahoma,Arial}
.stampGrid button:hover{background:var(--hover)}
#stage.t-eraser #draw,#stage.t-stamp #draw{cursor:none}
.stampGrid{grid-template-columns:repeat(3,38px);gap:4px}
.stampGrid button{width:38px;height:32px;font-size:18px;border-radius:8px}
.stampSizes{display:flex;align-items:center;gap:4px;padding:2px 6px 6px;font-size:12px;color:var(--muted)}
.stampSizes span{margin-inline-end:2px}
.stampSizes button{height:24px;border:0;border-radius:999px;background:var(--field);color:var(--txt);font:inherit;font-size:11.5px;padding:0 9px;cursor:pointer}
.stampSizes button.on{background:var(--accent);color:#fff}