/* صفحة المدير: لوحة اجتماعات. مشغّلان بلونين ثابتين (زين ماجنتا، تاسك تركوازي)، والهايبرد بنمط مخطّط حتى لا يعتمد المعنى على اللون وحده. */
body.mgr { --zc: light-dark(#b0246f, #f06bb0); --tc: var(--acc); overflow-y: auto; }
body.mgr.sl-open { overflow: hidden; }
.m-root { max-width: 1200px; margin: 0 auto; padding: 18px 16px calc(40px + env(safe-area-inset-bottom)); }
.z { --c: var(--zc); } .t { --c: var(--tc); }

/* رموز اللون: عادي = صلب، هايبرد = مخطّط */
.mk { display: inline-block; width: 14px; height: 14px; border-radius: 4px; background: var(--c); flex: none; vertical-align: middle; }
.mk.h { background: repeating-linear-gradient(135deg, var(--c) 0 3px, color-mix(in srgb, var(--c) 52%, #000) 3px 6px); }

/* ---- الدخول ---- */
.mg-login { min-height: 92dvh; display: grid; place-items: center; }
.mg-lcard { width: min(400px, 100%); text-align: center; padding: 30px 26px 24px; border-radius: 24px; border: 1px solid var(--line); background: color-mix(in srgb, var(--surf) 92%, transparent); backdrop-filter: blur(10px); box-shadow: var(--shadow); animation: mgUp .5s var(--ease, ease) both; }
.mg-lcard img { display: block; margin: 0 auto 10px; } .mg-lcard h1 { margin: 0 0 4px; font-size: 26px; } .mg-lcard p { margin: 0 0 20px; color: var(--mut); font-size: 14px; }
.mg-lcard .inp { text-align: center; direction: ltr; margin-bottom: 10px; } .mg-lcard .err { min-height: 22px; margin-top: 10px; }
.mg-hint { display: block; margin-top: 14px; color: var(--mut); line-height: 1.6; }
.mg-fp { position: relative; width: 100%; display: grid; justify-items: center; gap: 8px; padding: 18px 10px 14px; border-radius: 20px; border: 1.5px solid color-mix(in srgb, var(--acc) 55%, var(--line)); background: color-mix(in srgb, var(--acc) 9%, transparent); font-weight: 700; font-size: 16px; color: var(--tx); }
.mg-fp svg { width: 58px; height: 58px; color: var(--acc); }
.mg-fp::after { content: ''; position: absolute; inset: 8px auto auto 50%; width: 58px; height: 58px; margin-inline-start: -29px; border-radius: 50%; border: 2px solid var(--acc); opacity: 0; animation: mgPing 2.4s ease-out 2; pointer-events: none; }
.mg-fp:disabled { opacity: .6; }
.mg-lnk { border: 0; background: none; color: var(--acc); text-decoration: underline; padding: 8px; font-size: 14px; }
@keyframes mgPing { 0% { transform: scale(.8); opacity: .7; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes mgUp { from { opacity: 0; transform: translateY(14px); } }

/* ---- الرأس ---- */
.mg-top { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.mg-brand { display: flex; gap: 12px; align-items: center; } .mg-brand h1 { margin: 0; font-size: 24px; line-height: 1.2; } .mg-brand small { color: var(--mut); }
.mg-acts { display: flex; flex-wrap: wrap; gap: 8px; } .mg-acts .btn { display: inline-flex; align-items: center; gap: 6px; } .mg-acts svg { width: 17px; height: 17px; }
.mg-pk { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 16px; padding: 14px 16px; border-radius: 16px; border: 1px dashed color-mix(in srgb, var(--acc) 65%, var(--line)); background: color-mix(in srgb, var(--acc) 8%, transparent); }
.mg-pk div { display: grid; gap: 2px; } .mg-pk span { color: var(--mut); font-size: 13.5px; }

/* ---- القسم الأول: حلقة + أرقام ---- */
.mg-hero { display: grid; grid-template-columns: minmax(300px, 5fr) 7fr; gap: 14px; align-items: stretch; }
.mg-hero-c { border: 1px solid var(--line); background: var(--surf); border-radius: 20px; padding: 18px; display: grid; grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr); align-items: center; gap: 12px; }
.mg-dnw { min-width: 0; } .mg-dn { width: 100%; height: auto; display: block; animation: mgSpin .9s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes mgSpin { from { opacity: 0; transform: rotate(-50deg) scale(.92); } }
.dn-bg { fill: none; stroke: color-mix(in srgb, var(--line) 80%, transparent); stroke-width: 30; }
.dn-seg { fill: none; stroke-width: 30; cursor: pointer; transition: stroke-width .15s; outline: none; } .dn-seg:hover, .dn-seg:focus-visible { stroke-width: 35; }
.dn-seg.z.p { stroke: var(--zc); } .dn-seg.z.h { stroke: url(#pz); } .dn-seg.t.p { stroke: var(--tc); } .dn-seg.t.h { stroke: url(#pt); }
.dn-n { font: 700 30px 'IBM Plex Sans Arabic', system-ui; fill: var(--tx); } .dn-l { font: 500 11px 'IBM Plex Sans Arabic', system-ui; fill: var(--mut); }
.mg-dl { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mg-dl button { width: 100%; display: grid; grid-template-columns: 16px 1fr auto 42px; gap: 8px; align-items: center; text-align: start; padding: 8px 8px; border: 0; background: none; border-radius: 10px; color: var(--tx); }
.mg-dl button:hover { background: color-mix(in srgb, var(--acc) 12%, transparent); } .mg-dl b { font-size: 16px; } .mg-dl em { color: var(--mut); font-style: normal; font-size: 13px; text-align: end; }
.mg-dl .z, .mg-dl .t { --c: inherit; } .mg-dl .mk.z { --c: var(--zc); } .mg-dl .mk.t { --c: var(--tc); }

.mg-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mg-k { text-align: start; display: grid; gap: 2px; align-content: center; padding: 18px 20px 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--surf); position: relative; overflow: hidden; transition: transform .18s var(--ease, ease), border-color .18s; color: var(--tx); }
.mg-k::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 6px; background: var(--c); }
.mg-k.h::before { background: repeating-linear-gradient(135deg, var(--c) 0 5px, transparent 5px 9px); }
.mg-k:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 60%, var(--line)); }
.mg-k small { color: var(--mut); font-size: 14px; font-weight: 600; }
.mg-k b { font-size: clamp(34px, 4.4vw, 54px); line-height: 1.1; font-weight: 700; color: var(--c); letter-spacing: -.01em; }
.mg-k span { color: var(--mut); font-size: 13.5px; }
.mg-strip { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 14px 2px 18px; color: var(--mut); font-size: 14px; } .mg-strip b { color: var(--tx); font-size: 16px; margin-inline-start: 4px; }

/* ---- زين مقابل تاسك ---- */
.mg-ops { display: grid; gap: 20px; }
.mg-ob-h { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; } .mg-ob-h b { font-size: 16px; } .mg-ob-h span { color: var(--mut); font-size: 13.5px; }
.mg-track { display: flex; height: 42px; border-radius: 12px; overflow: hidden; gap: 2px; min-width: 70px; }
.seg { border: 0; padding: 0; min-width: 0; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13.5px; background: var(--c); transition: filter .15s; }
.seg.h { background: repeating-linear-gradient(135deg, var(--c) 0 7px, color-mix(in srgb, var(--c) 52%, #000) 7px 14px); }
.seg:hover { filter: brightness(1.18); } .seg span { text-shadow: 0 1px 2px rgba(0,0,0,.5); overflow: hidden; }
.mg-lg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; color: var(--mut); font-size: 13px; } .mg-lg .mk { margin-inline-start: 10px; }
.mg-ob.z { --c: var(--zc); } .mg-ob.t { --c: var(--tc); }
.mg-ins { margin: 0; padding-inline-start: 20px; display: grid; gap: 8px; line-height: 1.7; } .mg-ins .dn { color: var(--s2); font-weight: 700; }

/* ---- التقارير ---- */
.mg-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.mg-tabs [role=tab] { border: 1px solid var(--line); background: var(--surf2); border-radius: 99px; padding: 7px 16px; font-weight: 600; font-size: 14px; color: var(--mut); transition: background .15s, color .15s; }
.mg-tabs [aria-selected=true] { background: var(--acc); border-color: var(--acc); color: var(--accfg); }
.mg-vs { display: inline-flex; padding: 3px; gap: 2px; border-radius: 99px; border: 1px solid var(--line); background: var(--surf2); }
.mg-vs button { border: 0; background: none; padding: 5px 14px; border-radius: 99px; font-size: 13px; font-weight: 600; color: var(--mut); } .mg-vs [aria-pressed=true] { background: var(--acc); color: var(--accfg); }
.mg-reps[data-view=chart] .mg-vt, .mg-reps[data-view=table] .mg-vc { display: none; }
.mg-pt { margin: 0 0 10px; font-size: 16px; display: none; }
.mg-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 12px; font-size: 13px; color: var(--mut); } .mg-key span { display: inline-flex; align-items: center; gap: 6px; }
.mg-sc { display: grid; gap: 8px; }
.mg-sr { display: grid; grid-template-columns: minmax(90px, 150px) 1fr 58px; gap: 10px; align-items: center; }
.mg-sr .nm { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-st { display: flex; gap: 2px; height: 30px; border-radius: 9px; overflow: hidden; background: color-mix(in srgb, var(--line) 35%, transparent); }
.mg-st .seg { height: 100%; font-size: 12.5px; }
.mg-n.tt { font-weight: 700; text-align: end; } .mg-more { color: var(--mut); font-size: 13px; margin: 10px 0 0; }
.mg-tbl th, .mg-tbl td { text-align: center; white-space: nowrap; } .mg-tbl td.nm, .mg-tbl th:first-child { text-align: start; font-weight: 600; }
.mg-tbl th.gz, .mg-tbl td.gz { color: var(--zc); } .mg-tbl th.gt, .mg-tbl td.gt { color: var(--tc); }
.mg-tbl td.gz, .mg-tbl td.gt { background: color-mix(in srgb, currentColor 5%, transparent); } .mg-tbl td .mg-n { color: inherit; }
.mg-tbl td.tot { font-weight: 700; } .mg-tbl tfoot td { font-weight: 700; border-top: 2px solid var(--line); }
.mg-n { border: 0; background: none; font: inherit; font-weight: inherit; padding: 4px 10px; border-radius: 8px; color: var(--tx); min-width: 44px; } .mg-n:hover { background: color-mix(in srgb, var(--acc) 16%, transparent); text-decoration: underline; }
.mg-n.hy { font-style: italic; }
.mg-bw { width: 120px; min-width: 90px; } .mg-bw i { display: block; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--zc), var(--tc)); opacity: .75; margin-inline-start: auto; }
.mg-rep .tbl-wrap { max-height: none; overflow-y: visible; overflow-x: auto; }
.mg-foot { text-align: center; color: var(--mut); font-size: 12.5px; margin-top: 22px; }

.mg-dlg { width: min(980px, calc(100vw - 20px)); } .mg-lbar { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; } .mg-lbar .inp { flex: 1; min-width: 200px; height: 44px; }
.mg-dlg .tbl2 td, .mg-dlg .tbl2 th { white-space: nowrap; } .mg-dlg td:nth-child(2) { white-space: normal; min-width: 220px; }

@media (max-width: 960px) { .mg-hero { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .mg-brand h1 { font-size: 20px; } .mg-k { padding: 14px; } .mg-hero-c { grid-template-columns: 1fr; } .mg-sr { grid-template-columns: 78px 1fr 50px; gap: 6px; } .mg-st { height: 26px; } }

/* ---- عرض الاجتماع: شرائح بملء الشاشة ---- */
.sl { position: fixed; inset: 0; z-index: 60; color-scheme: dark; display: flex; flex-direction: column; padding: clamp(14px, 2.6vw, 38px); gap: 14px;
  --tx: #eaf6fa; --mut: #93b4bf; --line: rgba(150, 215, 235, .2); --surf: rgba(255, 255, 255, .05); --surf2: rgba(255, 255, 255, .08); --zc: #f06bb0; --tc: #3cc3df; --acc: #3cc3df; --accfg: #04222b;
  color: var(--tx); background: radial-gradient(1100px 560px at 85% -10%, rgba(60, 195, 223, .22), transparent 70%), radial-gradient(900px 500px at 0% 110%, rgba(240, 107, 176, .14), transparent 70%), linear-gradient(160deg, #04161c, #072a35 62%, #0a3441); }
.sl[hidden] { display: none; }
.sl-top { display: flex; align-items: center; gap: 16px; } .sl-brand { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--mut); flex: 1; }
.sl-t { margin: 0; font-size: clamp(22px, 3.4vw, 44px); font-weight: 700; text-align: center; flex: 3; }
.sl-r { flex: 1; display: flex; justify-content: flex-end; align-items: center; gap: 12px; } .sl-cnt { color: var(--mut); font-size: 15px; }
.sl-x { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--surf); color: var(--tx); display: grid; place-items: center; } .sl-x svg { width: 18px; height: 18px; }
.sl-stage { flex: 1; min-height: 0; position: relative; display: grid; align-items: center; }
.sl-s { animation: slIn .45s cubic-bezier(.2, .7, .2, 1) both; max-height: 100%; overflow: auto; padding: 4px; } .sl-s.back { animation-name: slInBack; }
@keyframes slIn { from { opacity: 0; transform: translateX(-46px); } } @keyframes slInBack { from { opacity: 0; transform: translateX(46px); } }
.sl-nav { display: flex; align-items: center; justify-content: center; gap: 18px; }
.sl-nav > button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--surf); color: var(--tx); font-size: 26px; line-height: 1; } .sl-nav > button:disabled { opacity: .3; }
.sl-dots { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; } .sl-dots button { width: 10px; height: 10px; padding: 0; border-radius: 50%; border: 0; background: rgba(150, 215, 235, .3); transition: width .2s, background .2s; } .sl-dots [aria-current=true] { width: 28px; border-radius: 6px; background: var(--acc); }
.sl-ov { display: grid; grid-template-columns: minmax(280px, 5fr) 7fr; gap: clamp(14px, 3vw, 44px); align-items: center; }
.sl-dn { display: grid; gap: 14px; justify-items: center; } .sl-dn .mg-dn { max-height: 44vh; } .sl-dn .mg-dl { width: 100%; }
.sl-k { gap: clamp(10px, 1.6vw, 22px); } .sl .mg-k { background: var(--surf); } .sl .mg-k b { font-size: clamp(44px, 7vw, 104px); } .sl .mg-k small { font-size: clamp(15px, 1.7vw, 24px); } .sl .mg-k span { font-size: clamp(13px, 1.3vw, 19px); }
.sl-ops { gap: clamp(26px, 6vh, 64px); } .sl-ops .mg-track { height: clamp(52px, 9vh, 96px); } .sl-ops .seg { font-size: clamp(16px, 2.2vw, 30px); } .sl-ops .mg-ob-h b { font-size: clamp(20px, 2.6vw, 34px); } .sl-ops .mg-ob-h span, .sl-ops .mg-lg { font-size: clamp(14px, 1.5vw, 20px); }
.sl-hy { display: grid; gap: clamp(12px, 2.4vh, 26px); } .sl-hn { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .sl-hn .mg-k { padding-block: 12px; } .sl-hn .mg-k b { font-size: clamp(36px, 5.4vw, 76px); }
.sl-chart .mg-sc { gap: clamp(8px, 1.6vh, 16px); } .sl-chart .mg-sr { grid-template-columns: minmax(110px, 190px) 1fr 76px; } .sl-chart .nm { font-size: clamp(14px, 1.7vw, 24px); } .sl-chart .mg-st { height: clamp(30px, 5.6vh, 56px); } .sl-chart .seg { font-size: clamp(13px, 1.5vw, 21px); } .sl-chart .mg-n.tt { font-size: clamp(15px, 1.8vw, 26px); } .sl-chart .mg-key { font-size: clamp(13px, 1.4vw, 19px); }
.sl-ins { font-size: clamp(18px, 2.4vw, 32px); line-height: 1.9; max-width: 1000px; margin-inline: auto; }
@media (max-width: 800px) { .sl-ov { grid-template-columns: 1fr; } .sl-t { font-size: 20px; } .sl-brand span { display: none; } .sl-hn { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .mg-k, .mg-tabs [role=tab], .seg, .mg-dn, .sl-s, .mg-lcard, .dn-seg, .sl-dots button { transition: none; animation: none; } .mg-fp::after { animation: none; } .mg-k:hover { transform: none; } }

/* ---- الطباعة: خلفية بيضاء، الحلقة والجداول، بلا أزرار ---- */
@media print {
  body.mgr { background: #fff !important; color: #111 !important; --tx: #111; --mut: #444; --line: #bbb; --surf: #fff; --surf2: #fff; --zc: #a01c62; --tc: #0d6479; }
  .mg-acts, .mg-tabs, .mg-vs, .mg-pk, .toast, .mg-bw, dialog, .sl, .mg-foot button { display: none !important; }
  .mg-reps .mg-vc { display: none !important; } .mg-reps .mg-vt { display: block !important; }
  .mg-rep[hidden] { display: block !important; } .mg-rep { break-inside: avoid; margin-bottom: 18px; } .mg-pt { display: block; }
  .pn, .mg-k, .mg-hero-c { break-inside: avoid; border-color: #bbb; } .m-root { max-width: none; padding: 0; } .mg-dn { animation: none; }
  .mg-k:hover { transform: none; } .mg-n { color: inherit; } .seg, .dn-seg, .mk { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .mg-hero { grid-template-columns: 5fr 7fr; }
}

/* ======== لوحة المراقبة: الشريط، الفلاتر، الأقسام الإضافية ======== */
.mg-acts #mgBack { text-decoration: none; display: inline-flex; align-items: center; }
.mg-status { flex-basis: 100%; }
.mg-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--surf2); font-size: 12.5px; color: var(--mut); }
.mg-chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--ok, #2fbf71); box-shadow: 0 0 0 0 currentColor; animation: mgPulse 2.4s infinite; }
.mg-chip.warn i { background: var(--s2, #e8a33a); } .mg-chip.old i, .mg-chip.off i { background: var(--bad, #e2554f); animation: none; }
@keyframes mgPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok, #2fbf71) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }

.mg-fb { position: sticky; top: 0; z-index: 20; margin: 0 -4px 16px; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg2, var(--surf)) 90%, transparent); backdrop-filter: blur(12px); display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: end; justify-content: space-between; box-shadow: 0 6px 22px -14px rgba(0,0,0,.45); }
.mg-fs { display: flex; flex-wrap: wrap; gap: 8px 10px; flex: 1; }
.mg-f { display: grid; gap: 3px; font-size: 12px; color: var(--mut); font-weight: 600; min-width: 118px; flex: 1 1 118px; max-width: 200px; }
.mg-f select, .mg-pvc select, .mg-lbar2 select, .mg-set select { height: 38px; padding: 0 10px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--bg2, var(--surf)); color: var(--tx); font: 500 14px 'IBM Plex Sans Arabic', system-ui; width: 100%; }
.mg-f select.on { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 10%, var(--bg2, var(--surf))); font-weight: 700; }
.mg-fi { display: flex; gap: 10px; align-items: center; font-size: 13.5px; color: var(--mut); } .mg-fi b { color: var(--tx); font-size: 16px; }

.mg-strip .s1 b { color: var(--s1, #e2554f); }
.mg-sec .pn-h { flex-wrap: wrap; } .mg-sec { scroll-margin-top: 90px; }

.mg-pvc { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 12px; } .mg-pvc label { display: grid; gap: 3px; font-size: 12px; color: var(--mut); font-weight: 600; min-width: 150px; }
.mg-pv td.hm { background: color-mix(in srgb, var(--acc) calc(var(--h, 0) * 62%), transparent); } .mg-pv td.hm .mg-n { color: var(--tx); font-weight: 600; }
.mg-pv th { white-space: normal; }
.mg-tt .rk { color: var(--mut); width: 32px; } .mg-tt .gv { white-space: normal; color: var(--mut); font-size: 12.5px; max-width: 200px; }
.mg-n.lk { text-align: start; padding-inline: 6px; font-weight: 600; } .mg-n.lk:hover { text-decoration: underline; }
.mg-tb { position: relative; height: 24px; min-width: 130px; border-radius: 7px; background: color-mix(in srgb, var(--line) 40%, transparent); overflow: hidden; } .mg-tb i { position: absolute; inset-block: 0; inset-inline-start: 0; background: color-mix(in srgb, var(--acc) 55%, transparent); border-radius: 7px; } .mg-tb b { position: relative; padding-inline: 8px; font-size: 12.5px; line-height: 24px; }

.mg-q { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.mg-qc { text-align: start; display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surf2); color: var(--tx); border-inline-start: 4px solid var(--ok, #2fbf71); }
.mg-qc b { font-size: 26px; line-height: 1.15; } .mg-qc span { color: var(--mut); font-size: 13px; } .mg-qc em { font-style: normal; font-size: 12px; color: var(--ok, #2fbf71); font-weight: 700; }
.mg-qc.bad { border-inline-start-color: var(--s2, #e8a33a); } .mg-qc.bad em { color: var(--s2, #e8a33a); } .mg-qc:hover { border-color: var(--acc); }

.mg-cd { display: flex; align-items: end; gap: 6px; height: 74px; margin-bottom: 14px; } .mg-cd div { flex: 1; display: grid; grid-template-rows: 1fr auto; justify-items: center; height: 100%; min-width: 0; } .mg-cd i { align-self: end; width: 70%; max-width: 26px; min-height: 3px; border-radius: 5px 5px 2px 2px; background: var(--acc); opacity: .8; } .mg-cd small { font-size: 10.5px; color: var(--mut); }
.mg-feed { list-style: none; margin: 0; padding: 0; display: grid; } .mg-feed li { display: grid; grid-template-columns: 70px 120px 1fr auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13.5px; } .mg-feed li:first-child { border-top: 0; }
.mg-feed .id { border: 0; background: none; color: var(--acc); font-weight: 700; text-align: start; } .mg-feed .k { color: var(--mut); } .mg-feed .v { overflow: hidden; text-overflow: ellipsis; } .mg-feed s { color: var(--mut); } .mg-feed time { color: var(--mut); font-size: 12px; }

.mg-lbar2 { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; } .mg-lbar2 select { flex: 1 1 260px; width: auto; height: 44px; } .mg-lbar2 .inp { flex: 2 1 260px; height: 44px; }
.mg-lt td.wrap, .mg-lt th { white-space: normal; } .mg-lt td.wrap { min-width: 180px; max-width: 320px; } .mg-lt td { white-space: nowrap; } .mg-lt td a { color: var(--acc); text-decoration: none; } .mg-lt td a:hover { text-decoration: underline; }
.mg-sh { border: 0; background: none; font: inherit; font-weight: 700; color: inherit; padding: 2px 0; white-space: nowrap; } .mg-sh:hover { color: var(--acc); }
.mg-pg { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; margin-top: 12px; } .mg-pg div { display: flex; gap: 8px; }

.mg-set { display: grid; gap: 4px; } .mg-sr2 { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 11px 0; border-top: 1px solid var(--line); } .mg-sr2:first-child { border-top: 0; }
.mg-sr2 > div:first-child { display: grid; gap: 2px; flex: 1 1 200px; } .mg-sr2 b { font-size: 14px; } .mg-sr2 small { color: var(--mut); font-size: 12px; } .mg-sr2 select { width: 200px; max-width: 100%; }
.mg-cks { display: flex; flex-wrap: wrap; gap: 6px 14px; max-width: 520px; } .mg-ck { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; } .mg-ck input { width: 17px; height: 17px; accent-color: var(--acc); }

#mg.dense .pn-b { padding: 10px; } #mg.dense .mg-k { padding: 12px 14px; } #mg.dense .mg-k b { font-size: clamp(28px, 3.4vw, 40px); } #mg.dense .tbl2 td, #mg.dense .tbl2 th { padding-block: 5px; } #mg.dense .mg-sc { gap: 5px; } #mg.dense .mg-st { height: 22px; }

.sl-play { font-size: 15px !important; }
@media (max-width: 640px) { .mg-fb { position: static; } .mg-feed li { grid-template-columns: 58px 1fr; } .mg-feed .v, .mg-feed time { grid-column: 1 / -1; } .mg-sr2 select { width: 100%; } }
@media print { .mg-fb, #mgSet, [data-sec=list], [data-sec=changes] { display: none !important; } .mg-pv td.hm { print-color-adjust: exact; -webkit-print-color-adjust: exact; } }