/* Real ERP recording, isolated from the feature carousel and application. */
#dashboard-customization { scroll-margin-top:104px; }
.dash-live { scroll-margin-block:100px; }
.dash-live { --dash-surface:#fff; --dash-bg:#f8fafc; --dash-line:#dbe3ee; --dash-ink:#0f172a; --dash-muted:#475569; border-radius:14px; }
.dark .dash-live { --dash-surface:#111c2e; --dash-bg:#0f172a; --dash-line:#334155; --dash-ink:#f1f5f9; --dash-muted:#cbd5e1; }
.dash-live-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:18px 20px; border-bottom:1px solid var(--dash-line); }
.dash-live-head strong { display:flex; align-items:center; gap:9px; font-size:.95rem; }
.dash-live-head svg { width:19px; height:19px; color:#2563eb; }
.dark .dash-live-head svg { color:#93c5fd; }
.dash-live-badge { display:inline-flex; align-items:center; gap:7px; padding:5px 9px; border-radius:6px; color:#047857; background:#ecfdf5; font-size:.75rem; font-weight:700; }
.dash-live-badge::before { content:''; width:6px; height:6px; background:currentColor; border-radius:50%; }
.dark .dash-live-badge { background:#064e3b; color:#a7f3d0; }
.dash-live-screen { position:relative; aspect-ratio:8/5; background:var(--dash-bg); overflow:hidden; }
.dash-live-screen video { display:block; width:100%; height:100%; object-fit:contain; }
.dash-live video::cue { background:#0f172ae6; color:white; font-family:inherit; }
.dash-live-controls { display:flex; align-items:center; gap:8px; padding:10px 14px; border-top:1px solid var(--dash-line); }
.dash-live [hidden] { display:none !important; }
.dash-live button { font:inherit; cursor:pointer; }
.dash-live button:focus-visible, .dash-live input:focus-visible { outline:2px solid #2563eb; outline-offset:3px; }
.dash-live-play, .dash-live-icon { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; min-height:44px; border:0; border-radius:8px; background:var(--dash-bg); color:var(--dash-ink); }
.dash-live-play { gap:6px; padding:0 12px; font-size:.75rem !important; font-weight:700 !important; }
.dash-live-icon { width:44px; }
.dash-live-play svg, .dash-live-icon svg { width:18px; height:18px; }
.dash-live button:hover { background:#eff6ff; color:#1d4ed8; }
.dark .dash-live button:hover { background:#1e3a5f; color:#bfdbfe; }
.dash-live-controls input { flex:1; width:100%; min-width:28px; height:44px; accent-color:#2563eb; direction:ltr; cursor:pointer; }
.dash-live-chapters { display:flex; gap:6px; padding:0 14px 12px; }
.dash-live-chapters button { flex:1; min-width:0; min-height:44px; padding:6px 9px; border:1px solid var(--dash-line); border-radius:7px; background:var(--dash-surface); color:var(--dash-muted); font-size:.75rem; line-height:1.5; font-weight:700; transition:background-color .18s,color .18s,border-color .18s; }
.dash-live-chapters button[aria-current="step"] { color:#1d4ed8; border-color:#93c5fd; background:#eff6ff; }
.dark .dash-live-chapters button[aria-current="step"] { color:#bfdbfe; border-color:#3b82f6; background:#172e50; }
.dash-live figcaption { display:flex; flex-direction:column; gap:4px; padding:14px 20px; border-top:1px solid var(--dash-line); background:var(--dash-bg); font-size:.78rem; }
.dash-live [data-dashboard-status] { color:var(--dash-ink); font-weight:700; }
.dash-live-caption { font-size:.75rem; }
.dash-live.is-loading .dash-live-play { color:var(--dash-muted); }
.dash-live-screen:fullscreen { display:flex; align-items:center; justify-content:center; background:#0f172a; }
.dash-live-screen:fullscreen video { max-height:100vh; object-fit:contain; }
@media(min-width:1024px) { .dash-showcase-layout { grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:36px; } }
@media(max-width:640px) {
  .dash-live-head { padding:14px; gap:8px; }
  .dash-live-head strong { font-size:.83rem; }
  .dash-live-controls { gap:4px; padding:8px; }
  .dash-live-play { padding:0 8px; }
  .dash-live-chapters { gap:5px; padding:0 8px 10px; }
  .dash-live-chapters button { padding:6px 4px; }
  .dash-live figcaption { padding:12px 14px; }
}
@media(prefers-reduced-motion:reduce) { .dash-live-chapters button { transition:none; } }

/* ===== تحسين الشكل (2026-11-06): نافذة بحدّ ناعم وتوهّج، أزرار مدوّرة، تبويبات مرقّمة ===== */
.dash-live { border-radius:24px; border:1px solid var(--dash-line); box-shadow:0 36px 80px -36px rgba(30,41,99,.5), 0 0 0 7px rgba(99,102,241,.07); }
.dash-live-head { padding:16px 20px; background:linear-gradient(180deg,var(--dash-bg),var(--dash-surface)); }
.dash-live-head strong { gap:12px; font-size:1.02rem; font-weight:800; }
.dash-live-head strong svg { box-sizing:content-box; width:20px; height:20px; padding:9px; border-radius:13px; color:#fff; background:linear-gradient(135deg,#2563eb,#7c3aed); box-shadow:0 8px 18px -8px rgba(99,102,241,.9); }
.dark .dash-live-head strong svg { color:#fff; }
.dash-live-badge { padding:5px 12px; border-radius:999px; }
.dash-live-badge::before { animation:dl-pulse 2.2s ease-out infinite; }
@keyframes dl-pulse { 0% { box-shadow:0 0 0 0 rgba(4,120,87,.5); } 70%,100% { box-shadow:0 0 0 7px rgba(4,120,87,0); } }
.dash-live-screen { margin:14px 16px 0; border:1px solid var(--dash-line); border-radius:16px; background:#fff; box-shadow:0 22px 44px -28px rgba(15,23,42,.55); }
.dark .dash-live-screen { background:#0f172a; }
.dash-live-controls { gap:10px; padding:14px 16px 6px; border-top:0; }
.dash-live-play { min-height:46px; padding:0 22px; border-radius:999px; color:#fff; background:linear-gradient(135deg,#2563eb,#4f46e5); font-size:.85rem !important; box-shadow:0 12px 24px -12px rgba(37,99,235,.95); transition:transform .18s, box-shadow .18s; }
.dash-live button.dash-live-play:hover { color:#fff; background:linear-gradient(135deg,#1d4ed8,#4338ca); transform:translateY(-1px); }
.dash-live button.dash-live-play:active { transform:scale(.97); }
.dash-live-icon { width:46px; min-height:46px; border:1px solid var(--dash-line); border-radius:50%; background:var(--dash-surface); }
.dash-live-controls input[type="range"] { -webkit-appearance:none; appearance:none; background:transparent; }
.dash-live-controls input[type="range"]::-webkit-slider-runnable-track { height:6px; border-radius:6px; background:linear-gradient(90deg,#2563eb var(--p,0%),var(--dash-line) var(--p,0%)); }
.dash-live-controls input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; margin-top:-6px; border-radius:50%; border:3px solid #fff; background:#2563eb; box-shadow:0 2px 8px rgba(15,23,42,.35); }
.dash-live-controls input[type="range"]::-moz-range-track { height:6px; border-radius:6px; background:var(--dash-line); }
.dash-live-controls input[type="range"]::-moz-range-progress { height:6px; border-radius:6px; background:#2563eb; }
.dash-live-controls input[type="range"]::-moz-range-thumb { width:14px; height:14px; border-radius:50%; border:3px solid #fff; background:#2563eb; box-shadow:0 2px 8px rgba(15,23,42,.35); }
.dash-live-chapters { gap:8px; padding:8px 16px 16px; counter-reset:dlch; }
.dash-live-chapters button { counter-increment:dlch; display:flex; align-items:center; justify-content:center; gap:9px; padding:8px 10px; border-radius:14px; font-size:.8rem; }
.dash-live-chapters button::before { content:counter(dlch); flex:none; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; border:1px solid var(--dash-line); background:var(--dash-bg); color:var(--dash-muted); font-size:.72rem; font-weight:800; }
.dash-live-chapters button[aria-current="step"] { box-shadow:0 10px 22px -16px rgba(37,99,235,.9); }
.dash-live-chapters button[aria-current="step"]::before { color:#fff; border-color:#2563eb; background:#2563eb; }
.dash-live figcaption { gap:5px; padding:14px 20px 16px; }
.dash-live [data-dashboard-status] { font-size:.92rem; }
@media(max-width:640px) {
  .dash-live { border-radius:18px; }
  .dash-live-screen { margin:10px 10px 0; border-radius:12px; }
  .dash-live-controls { padding:10px 10px 4px; gap:6px; }
  .dash-live-play { padding:0 14px; }
  .dash-live-icon { width:42px; min-height:42px; }
  .dash-live-chapters { padding:6px 10px 12px; }
  .dash-live-chapters button::before { display:none; }
}
@media(prefers-reduced-motion:reduce) { .dash-live-badge::before { animation:none; } .dash-live button.dash-live-play { transition:none; } }