:root,
body.theme-light {
  --bg:#f6f7fb; --panel:#ffffff; --panel-2:#f1f3fb; --line:rgba(21,19,95,.14); --text:#11133d; --muted:#59607e; --accent:#f2aa00; --accent-2:#15135f; --danger:#dc2626; --warn:#d97706; --ok:#16a34a; --info:#2563eb;
  --soft-shadow: 0 18px 44px rgba(21,19,95,.08);
}
body.theme-dark {
  --bg: #07081a; --panel: #101336; --panel-2:#171b46; --line: rgba(255,255,255,.1); --text: #eef8f5; --muted: #aeb4d6; --accent: #f2aa00; --accent-2:#15135f; --danger: #f87171; --warn: #f59e0b; --ok: #22c55e; --info: #60a5fa;
  --soft-shadow: 0 20px 54px rgba(0,0,0,.24);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font-family: "Alexandria", system-ui, sans-serif; direction:rtl; color: var(--text); background: radial-gradient(circle at 82% 6%, rgba(242,170,0,.12), transparent 26rem), linear-gradient(180deg,#fbfcff,var(--bg)); display: grid; grid-template-columns: 282px minmax(0, 1fr); min-height: 100vh; animation: pageIn .35s ease both; }
body.theme-dark { background: radial-gradient(circle at 82% 6%, rgba(242,170,0,.16), transparent 26rem), linear-gradient(180deg,#08091f,var(--bg)); }
body.auth-lock { display:block; min-height:100vh; }
body.auth-lock aside, body.auth-lock main { display:none; }
aside { grid-column: 1; grid-row:1; direction:rtl; background: #ffffff; border-left: 1px solid var(--line); padding: 18px; position: sticky; top: 0; height: 100vh; overflow: auto; box-shadow: var(--soft-shadow); }
main { grid-column: 2; grid-row:1; direction:rtl; }
body.theme-dark aside { background: linear-gradient(180deg,#090a2b,#050617); box-shadow: none; }
body.theme-light aside { background:#ffffff; box-shadow: var(--soft-shadow); }
.brand { display:grid; gap:7px; padding:12px; margin-bottom:16px; border:1px solid rgba(242,170,0,.28); border-radius:12px; background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(242,170,0,.08)); }
.brand img { width:150px; max-width:100%; height:auto; object-fit:contain; filter: drop-shadow(0 8px 22px rgba(0,0,0,.28)); }
.brand span { font-weight:800; color:var(--accent); letter-spacing:0; }
.brand small { color:var(--muted); }
button, input, select, textarea { font: inherit; }
button { color: var(--text); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.13); border-radius: 8px; padding: 10px 13px; cursor: pointer; transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease; }
body.theme-light button { background:#fff; border-color:rgba(21,19,95,.16); }
button:hover { border-color: rgba(45,212,191,.55); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,0,0,.16); }
button:active { transform: translateY(0) scale(.98); }
button.primary { background: linear-gradient(135deg,rgba(242,170,0,.24),rgba(21,19,95,.32)); border-color: rgba(242,170,0,.55); }
body.theme-light button.primary, body.theme-light a.primary { background:linear-gradient(135deg,#f2aa00,#ffd773); color:#11133d; border-color:rgba(242,170,0,.75); font-weight:800; }
button.danger { background: rgba(248,113,113,.12); border-color: rgba(248,113,113,.35); }
button.ghost { background: transparent; }
aside button { display: flex; align-items:center; gap:10px; width: 100%; margin-bottom: 8px; text-align: start; min-height:44px; }
aside button.active { background: linear-gradient(135deg, rgba(242,170,0,.2), rgba(37,99,235,.06)); border-color: rgba(242,170,0,.5); box-shadow: 0 12px 28px rgba(242,170,0,.12); }
.nav-icon { width:28px; height:28px; display:inline-grid; place-items:center; flex:0 0 28px; border-radius:8px; background:rgba(242,170,0,.13); color:var(--accent); }
.nav-icon svg { width:16px; height:16px; stroke-width:2.1; }
.nav-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-section { display:grid; gap:6px; margin-bottom:14px; }
.nav-section > span { color:var(--muted); font-size:12px; padding:0 6px 3px; }
.hub-tabs { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.hub-tab { border:1px solid var(--line); background:var(--panel); color:var(--text); border-radius:10px; padding:9px 18px; font-family:inherit; font-weight:700; font-size:14px; cursor:pointer; transition:.15s; }
.hub-tab:hover { border-color:var(--accent-2); transform:translateY(-1px); }
.hub-tab.active { background:var(--accent-2); color:#fff; border-color:var(--accent-2); box-shadow:0 6px 16px rgba(21,19,95,.22); }

/* ===== صفحة التحكم في الموقع (CMS control) ===== */
.cms-layout { display:flex; gap:16px; align-items:flex-start; }
.cms-layout > .cms-side { width:264px; flex:none; position:sticky; top:12px; max-height:calc(100vh - 24px); overflow-y:auto !important; overflow-x:hidden; padding-inline-end:6px; }
.cms-layout > .cms-side::-webkit-scrollbar, .cms-layout > .cms-main::-webkit-scrollbar { width:8px; }
.cms-layout > .cms-side::-webkit-scrollbar-thumb, .cms-layout > .cms-main::-webkit-scrollbar-thumb { background:rgba(21,19,95,.38); border-radius:6px; }
.cms-layout > .cms-side::-webkit-scrollbar-track, .cms-layout > .cms-main::-webkit-scrollbar-track { background:transparent; }
/* زرار «معاينة الموقع» وغيره من الروابط في شريط الإجراءات: نفس مقاس الأزرار */
.actions a.primary, #page-actions a.primary { padding:0 16px; border-radius:8px; text-decoration:none; gap:7px; font-weight:800; }
.cms-side-head { margin-bottom:10px; }
.cms-side-head h2 { font-size:18px; margin:0; }
.cms-side-head p { color:var(--muted); font-size:12px; margin:4px 0 0; }
.cms-nav { display:flex; flex-direction:column; gap:12px; }
.cms-nav-group { display:flex; flex-direction:column; gap:3px; }
.cms-nav-title { color:var(--accent); font-size:11px; font-weight:800; letter-spacing:.4px; padding:2px 6px; }
.cms-nav-btn { display:flex; justify-content:space-between; align-items:center; gap:8px; width:100%; text-align:right; border:1px solid transparent; border-radius:9px; padding:9px 12px; cursor:pointer; font-family:inherit; font-weight:700; font-size:13.5px; background:transparent; color:var(--text); transition:.14s; }
.cms-nav-btn:hover { background:var(--panel-2); border-color:var(--line); }
.cms-nav-btn.active { background:var(--accent-2); color:#fff; border-color:var(--accent-2); }
.cnb-count { min-width:22px; text-align:center; font-size:11px; font-weight:800; border-radius:20px; padding:1px 7px; background:rgba(21,19,95,.10); color:var(--accent-2); }
.cms-nav-btn.active .cnb-count { background:rgba(255,255,255,.22); color:#fff; }
.cms-layout > .cms-main { flex:1; min-width:0; }
.cms-main-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:12px; }
.cms-main-head h2 { margin:0; font-size:19px; }
.cms-main-head p { color:var(--muted); font-size:13px; margin:4px 0 0; }
.cms-items { display:grid; gap:12px; }
.cms-card { border:1px solid var(--line); border-radius:12px; padding:14px; background:var(--panel); transition:.15s; }
.cms-card:hover { border-color:var(--accent-2); box-shadow:0 6px 18px rgba(21,19,95,.08); }
.cms-card.is-hidden { opacity:.6; }
.cms-card-top { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.cms-card-preview { margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13.5px; color:var(--text); }
.cms-card-preview img { border-radius:8px; }
.cms-ord { padding:6px 9px; }
.cms-drag { cursor:grab; user-select:none; color:var(--muted); font-weight:900; letter-spacing:-2px; padding:0 6px; font-size:15px; line-height:1; }
.cms-drag:active { cursor:grabbing; }
.cms-card[draggable="true"] { cursor:default; }
.cms-card.dragging { opacity:.5; }
.cms-card.drop-before { border-top:3px solid var(--accent); }
.cms-card.drop-after { border-bottom:3px solid var(--accent); }
.cms-empty { text-align:center; padding:34px 18px; color:var(--muted); display:flex; flex-direction:column; align-items:center; gap:12px; }
/* محرّر القسم (المودال) — كان بلا تنسيق */
.cms-editor { display:grid; gap:14px; max-height:64vh; overflow:auto; padding:2px; }
.cms-field { display:flex; flex-direction:column; gap:5px; }
.cms-field-label { font-weight:700; font-size:13px; color:var(--accent-2); }
.cms-field input[type=text], .cms-field textarea { width:100%; border:1px solid var(--line); border-radius:9px; padding:9px 11px; font-family:inherit; font-size:14px; background:var(--panel); color:var(--text); box-sizing:border-box; }
.cms-field textarea { min-height:64px; resize:vertical; }
.cms-i18n { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cms-i18n label { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted); font-weight:700; }
.cms-i18n textarea { min-height:58px; }
.cms-group { border:1px solid var(--line); border-radius:10px; padding:12px; display:grid; gap:10px; }
.cms-group legend { padding:0 6px; font-weight:800; font-size:13px; color:var(--accent-2); }
.cms-check { display:flex; align-items:center; gap:8px; font-weight:700; }
.cms-upload { display:flex; align-items:center; gap:10px; margin-top:6px; }
.cms-upload img { border:1px solid var(--line); }
@media(max-width:900px){ .cms-layout { flex-direction:column; } .cms-layout > .cms-side { width:100%; position:static; max-height:none; } .cms-i18n { grid-template-columns:1fr; } }
.session-card { display:grid; gap:6px; margin-top:18px; border:1px solid var(--line); border-radius:8px; padding:12px; background:rgba(255,255,255,.04); }
.session-card span, .user-chip { color:var(--muted); font-size:12px; }
main { padding: 22px; min-width: 0; }
header { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 28px; }
h2 { font-size: 18px; margin-bottom: 12px; }
p, .muted { color: var(--muted); }
.actions, .mini-actions, .toolbar { display: flex; gap: 8px; flex-wrap: wrap; }
.actions { justify-content: flex-end; }
.filter-bar { display:grid; grid-template-columns: repeat(5, minmax(150px, 1fr)) auto; gap:10px; align-items:end; margin-bottom:14px; }
.filter-bar button { min-height:42px; }
.cards { display: grid; grid-template-columns: repeat(4, minmax(160px, 1fr)); gap: 12px; margin-bottom: 14px; }
.card, .panel, .table-wrap { background: linear-gradient(180deg, color-mix(in srgb, var(--panel-2) 92%, transparent), color-mix(in srgb, var(--panel) 96%, transparent)); border: 1px solid var(--line); border-radius: 8px; padding: 16px; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; animation: panelIn .32s ease both; }
.card:hover, .panel:hover { transform: translateY(-2px); border-color: rgba(242,170,0,.34); box-shadow: 0 18px 40px rgba(0,0,0,.18); }
.card span { color: var(--muted); display: block; font-size: 13px; }
.card strong { display: block; font-size: 28px; margin-top: 6px; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stack { display: grid; gap: 12px; }
.box-grid, .package-grid, .algorithm-grid.modern, .payment-grid, .notification-grid, .module-strip, .chart-grid { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:14px; }
.box-card, .package-card, .algorithm-card { display:grid; gap:12px; align-content:start; }
.box-head, .package-head, .algo-top { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.box-icon, .algo-icon { width:40px; height:40px; display:grid; place-items:center; border-radius:8px; background:rgba(242,170,0,.14); color:var(--accent); font-weight:800; }
.box-icon svg, .algo-icon svg { width:20px; height:20px; stroke-width:2.1; }
.metric-row, .package-metrics, .algorithm-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.metric-row span, .package-metrics span, .algorithm-summary span { color:var(--muted); font-size:12px; }
.metric-row strong, .package-metrics strong, .algorithm-summary strong { font-size:22px; color:var(--text); display:block; }
.algorithm-hero, .plans-toolbar, .subscription-board, .app-control { display:grid; grid-template-columns:1.2fr .8fr; gap:14px; margin-bottom:14px; }
.algorithm-hero, .plans-toolbar { border:1px solid var(--line); border-radius:8px; padding:18px; background:linear-gradient(135deg,rgba(242,170,0,.13),color-mix(in srgb,var(--panel) 92%,transparent)); }
.algorithm-hero h2, .plans-toolbar h2, .app-preview h2 { font-size:24px; }
.algorithm-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
.algorithm-summary div, .package-metrics div { border:1px solid var(--line); border-radius:8px; padding:10px; background:rgba(255,255,255,.045); }
.module-strip { grid-template-columns: repeat(4,minmax(0,1fr)); margin-bottom:14px; }
.module-strip article { display:grid; gap:8px; }
.module-strip strong { color:var(--accent); font-size:18px; }
.module-card { position:relative; overflow:hidden; }
.module-card::before { content:""; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg,var(--accent),#2dd4bf,var(--info)); opacity:.8; }
.payment-grid, .notification-grid { grid-template-columns: repeat(2,minmax(0,1fr)); margin-bottom:14px; }
.payment-card, .notification-card { min-height:220px; }
.role-switch { display:inline-flex; gap:6px; padding:4px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.04); }
.role-switch button { padding:8px 10px; }
.link-guide, .users-shell { display:grid; grid-template-columns: minmax(0,1fr) auto; gap:14px; align-items:center; margin-bottom:14px; }
.link-guide { background:linear-gradient(135deg, rgba(242,170,0,.16), color-mix(in srgb,var(--panel) 92%,transparent)); }
.link-guide span, .users-hero span { color:var(--accent); font-weight:800; }
.device-tabs { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.device-tabs button.active { border-color:rgba(242,170,0,.7); background:rgba(242,170,0,.16); }
.device-health-card { display:grid; gap:14px; }
.device-health-main { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.04); }
.users-shell { grid-template-columns: 1.4fr .6fr; }
.users-hero { display:grid; gap:10px; align-content:center; }
.login-credentials { display:grid; gap:6px; padding:10px 0; border-bottom:1px solid var(--line); }
.login-credentials code { direction:ltr; text-align:left; background:rgba(242,170,0,.12); border:1px solid rgba(242,170,0,.25); border-radius:8px; padding:8px; color:var(--text); }
.role-cards { display:grid; gap:10px; }
.role-card { display:grid; gap:8px; padding:12px; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.04); }
.role-card div { display:flex; justify-content:space-between; gap:10px; align-items:center; }
.role-card span, .role-card small { color:var(--muted); }
.chart-grid { grid-template-columns: repeat(2,minmax(0,1fr)); margin-bottom:14px; }
.trend-chart { min-height:220px; display:grid; grid-template-columns:repeat(14,minmax(0,1fr)); gap:8px; align-items:end; padding-top:18px; }
.trend-chart div { display:grid; gap:6px; align-items:end; min-height:160px; }
.trend-chart i { display:block; height:var(--h); min-height:8px; border-radius:8px 8px 2px 2px; background:var(--bar-color, #4f8f7b); box-shadow:0 10px 24px rgba(79,143,123,.16); }
.trend-chart span { color:var(--muted); font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; writing-mode:vertical-rl; max-height:58px; justify-self:center; }
.chips { display:flex; gap:7px; flex-wrap:wrap; }
.chips span { border:1px solid var(--line); border-radius:999px; padding:5px 9px; color:var(--muted); background:rgba(255,255,255,.05); font-size:12px; }
.algorithm-card footer { display:grid; gap:4px; color:var(--muted); margin-top:auto; }
.subscription-board { grid-template-columns:2fr 1fr 1fr; }
.subscription-hero strong { font-size:32px; display:block; color:var(--accent); }
.plan-table { display:block; }
.active-plan { border-color:rgba(34,197,94,.35); }
.app-control { grid-template-columns:1.1fr .9fr; }
.phone-shell { margin-top:16px; max-width:280px; border:10px solid color-mix(in srgb,var(--text) 15%,transparent); border-radius:28px; padding:18px; background:var(--panel-2); display:grid; gap:12px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: start; border-bottom: 1px solid rgba(255,255,255,.08); padding: 11px 8px; vertical-align: top; }
body.theme-light th, body.theme-light td, body.theme-light .row { border-bottom-color:rgba(21,19,95,.1); }
th { color: var(--muted); font-weight: 600; }
tbody tr { transition: background .16s ease; }
tbody tr:hover { background: rgba(45,212,191,.06); }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.badge { display: inline-flex; padding: 4px 8px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid var(--line); font-size: 12px; }
.critical, .failed, .offline, .revoked, .disabled { color: var(--danger); }
.critical, .failed { animation: pulseAlert 1.8s ease-in-out infinite; }
.warning, .pending, .issued { color: var(--warn); }
.ok, .online, .active, .paid, .applied, .delivered { color: var(--ok); }
.queued, .assigned, .published { color: var(--info); }
input, select, textarea { width: 100%; color: var(--text); background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
body.theme-light input, body.theme-light select, body.theme-light textarea { background:#fff; }
label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
dialog { width: min(680px, calc(100vw - 28px)); border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); }
dialog[open] { animation: modalIn .22s ease both; }
dialog::backdrop { background: rgba(0,0,0,.55); }
#modal-body { display: grid; gap: 10px; margin-top: 12px; }
menu { display: flex; gap: 8px; justify-content: flex-start; padding: 0; margin: 16px 0 0; }
#toast { position: fixed; bottom: 18px; left: 18px; display: grid; gap: 8px; z-index: 10; }
.toast { background: #10262a; border: 1px solid var(--line); border-right: 4px solid var(--accent); border-radius: 8px; padding: 12px 14px; min-width: 240px; animation: toastIn .24s ease both; }
.status { margin-bottom: 12px; border: 1px solid rgba(245,158,11,.35); background: rgba(245,158,11,.1); color: #fde68a; border-radius: 8px; padding: 12px; }
.status-inline { border:1px solid rgba(245,158,11,.35); background:rgba(245,158,11,.08); color:var(--warn); border-radius:8px; padding:10px; }
.login-screen { direction:rtl; min-height:100vh; padding:28px; display:grid; place-items:center; background:
  radial-gradient(circle at 80% 20%, rgba(242,170,0,.14), transparent 30%),
  linear-gradient(135deg, #f7f8fd, #eef2ff 52%, #fff8e1); }
.login-card { width:min(1060px,100%); display:grid; grid-template-columns:1.15fr .85fr; gap:18px; align-items:stretch; }
.login-copy, .login-form { border:1px solid rgba(21,19,95,.12); border-radius:12px; padding:26px; background:rgba(255,255,255,.82); box-shadow:0 24px 80px rgba(21,19,95,.12); }
.login-copy { display:grid; align-content:center; gap:16px; }
.login-copy span { color:var(--accent); font-weight:800; }
.login-copy h1 { font-size:36px; color:#11133d; }
.login-copy p { max-width:620px; color:#59607e; line-height:1.8; }
.login-form { display:grid; gap:14px; }
.login-form h2 { color:#11133d; font-size:24px; }
.demo-credentials { display:flex; gap:10px; flex-wrap:wrap; }
.empty { color: var(--muted); padding: 18px; border: 1px dashed var(--line); border-radius: 8px; }
.loading { color: transparent; padding: 24px; min-height: 92px; border-radius: 8px; background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.12), rgba(255,255,255,.05)); background-size: 220% 100%; animation: shimmer 1.3s linear infinite; }
.loading-skeleton { display: grid; gap: 12px; }
.loading-skeleton span { display: block; min-height: 54px; border-radius: 8px; background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.12), rgba(255,255,255,.05)); background-size: 220% 100%; animation: shimmer 1.3s linear infinite; }
.toast { display: flex; align-items: center; gap: 10px; }
.toast strong { color: var(--accent); }
.toast-error { border-right-color: var(--danger); }
.state-empty { display: grid; gap: 6px; place-items: center; text-align: center; }
.page-enter { animation: pageIn .28s ease both; }
[dir="ltr"] body { direction: ltr; grid-template-columns: 282px minmax(0, 1fr); }
[dir="ltr"] aside { grid-column:1; direction:ltr; }
[dir="ltr"] main { grid-column:2; direction:ltr; }
[dir="ltr"] .login-screen { direction:ltr; }
[dir="ltr"] aside { border-left: 0; border-right: 1px solid var(--line); }
[dir="ltr"] #toast { right: 18px; left: auto; }
pre { white-space: pre-wrap; direction: ltr; text-align: left; color: #cce4df; overflow: auto; }
body.theme-light pre { color:#26315c; }
.settings-shell { display:grid; grid-template-columns: 260px minmax(0,1fr); gap:14px; align-items:start; }
.settings-nav { display:grid; gap:8px; position:sticky; top:18px; }
.settings-nav button { text-align:start; }
.settings-nav button.active { border-color:rgba(242,170,0,.6); background:rgba(242,170,0,.16); }
.section-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.kpi-grid { display:grid; grid-template-columns: repeat(4,minmax(140px,1fr)); gap:12px; }
.plan-matrix { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:12px; }
.plan-card { border:1px solid var(--line); border-radius:8px; padding:16px; background:rgba(255,255,255,.045); }
.translation-grid { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:12px; }
.bar-chart { display:grid; gap:10px; }
.bar-row { display:grid; grid-template-columns: minmax(92px, 1fr) minmax(120px, 2fr) 42px; gap:10px; align-items:center; }
.bar-row span { color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar-row strong { text-align:end; color:var(--accent); }
.bar-track { height:12px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; border:1px solid var(--line); }
.bar-track i { display:block; height:100%; border-radius:inherit; background:var(--bar-color, #4f8f7b); }
.event-image { display:block; width:100%; max-height:360px; object-fit:contain; border-radius:8px; border:1px solid var(--line); background:rgba(0,0,0,.18); }
.integration-guide code, pre { white-space: pre-wrap; word-break: break-word; }
.integration-guide .panel { overflow: hidden; }
td video { width: 220px; max-width: 100%; max-height: 160px; border-radius: 10px; border: 1px solid var(--line); background: #111; }
td figure { margin: 0; }
td .event-image { max-width: 220px; max-height: 160px; }
.event-details .grid { align-items:start; }
.edge-selector { margin-bottom:14px; }
.edge-selector label { max-width:420px; }
.video-card { display:grid; gap:12px; align-content:start; }
.video-card h2 { margin-bottom:4px; }
.audit-details { display:grid; gap:8px; min-width:260px; }
.audit-details span { display:grid; grid-template-columns: minmax(110px,.7fr) minmax(140px,1fr); gap:10px; align-items:start; padding:8px; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.04); }
.audit-details strong { color:var(--accent); font-size:12px; }
.audit-details em { font-style:normal; color:var(--text); word-break:break-word; }
.table-wrap { overflow:auto; box-shadow: var(--soft-shadow); }
.table-wrap table { min-width: 760px; }
.mini-actions button { min-height: 34px; padding: 7px 10px; font-size: 12px; }
.actions button, .actions a.primary { min-height: 40px; display:inline-flex; align-items:center; justify-content:center; }
button:disabled { opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }
button.danger:hover { border-color:rgba(220,38,38,.45); }
.panel, .card, .table-wrap { box-shadow: var(--soft-shadow); }
.panel .panel, .card .card { box-shadow:none; }
.badge, .chips span { white-space:nowrap; }
body.theme-light .session-card,
body.theme-light .algorithm-summary div,
body.theme-light .package-metrics div,
body.theme-light .plan-card,
body.theme-light .role-switch { background:#ffffff; }
body.theme-light .toast { background:#ffffff; color:#11133d; box-shadow:0 18px 38px rgba(21,19,95,.16); }
body.theme-light .status { color:#92400e; background:#fff7ed; }
dialog { box-shadow:0 24px 80px rgba(0,0,0,.28); }
body.theme-light dialog { box-shadow:0 24px 80px rgba(21,19,95,.18); }
.status-badge i, .severity-badge i { width:7px; height:7px; border-radius:50%; background:currentColor; display:inline-block; margin-inline-end:6px; }
.empty.state-empty strong { color:var(--accent); font-size:24px; }
@media (max-width: 1100px) { .cards, .grid.three, .box-grid, .package-grid, .algorithm-grid.modern, .payment-grid, .notification-grid, .module-strip, .chart-grid, .filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { body, [dir="ltr"] body { grid-template-columns: 1fr; } aside, main, [dir="ltr"] aside, [dir="ltr"] main { grid-column:1; } aside { position: static; height: auto; } header { display: grid; } .cards, .grid, .grid.three, .settings-shell, .translation-grid, .kpi-grid, .plan-matrix, .box-grid, .package-grid, .algorithm-grid.modern, .algorithm-hero, .plans-toolbar, .subscription-board, .app-control, .metric-row, .package-metrics, .algorithm-summary, .payment-grid, .notification-grid, .module-strip, .chart-grid, .login-card, .link-guide, .users-shell, .filter-bar { grid-template-columns: 1fr; } .login-screen { padding:14px; } }
@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toastIn { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes pulseAlert { 0%, 100% { filter: drop-shadow(0 0 0 rgba(248,113,113,0)); } 50% { filter: drop-shadow(0 0 10px rgba(248,113,113,.55)); } }

/* ============================================================= */
/*  MODERN UI v2 — visual-only refresh (same palette, more motion) */
/* ============================================================= */
:root{
  --radius-xl: 18px; --radius-lg: 14px; --radius-md: 11px; --radius-sm: 9px;
  --glass-blur: 16px;
  --elev-1: 0 2px 8px rgba(21,19,95,.06), 0 8px 24px rgba(21,19,95,.07);
  --elev-2: 0 6px 18px rgba(21,19,95,.10), 0 22px 50px rgba(21,19,95,.12);
  --glow-accent: 0 10px 30px rgba(242,170,0,.28);
  --ring-accent: 0 0 0 3px rgba(242,170,0,.28);
}
body.theme-dark{
  --elev-1: 0 2px 10px rgba(0,0,0,.32), 0 10px 30px rgba(0,0,0,.34);
  --elev-2: 0 8px 26px rgba(0,0,0,.42), 0 26px 60px rgba(0,0,0,.5);
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
html { scroll-behavior: smooth; }
* { transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .25s ease, transform .25s cubic-bezier(.2,.8,.2,1); }
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.6;
  background:
    radial-gradient(40rem 40rem at 86% -8%, rgba(242,170,0,.16), transparent 60%),
    radial-gradient(36rem 36rem at -6% 18%, rgba(21,19,95,.14), transparent 60%),
    radial-gradient(30rem 30rem at 50% 120%, rgba(37,99,235,.10), transparent 60%);
  animation: auroraFloat 18s ease-in-out infinite alternate;
}
@keyframes auroraFloat { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(0,-18px,0) scale(1.06); } }
aside{
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
}
body.theme-light aside{ background: rgba(255,255,255,.78); }
body.theme-dark aside{ background: linear-gradient(180deg, rgba(9,10,43,.82), rgba(5,6,23,.88)); }
*::-webkit-scrollbar{ width:9px; height:9px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background:rgba(21,19,95,.5); border-radius:8px; border:2px solid transparent; background-clip:padding-box; transition:background .18s ease; }
*::-webkit-scrollbar-thumb:hover{ background:var(--accent); }
*::-webkit-scrollbar-thumb:active{ background:var(--accent); }
*{ scrollbar-width:thin; scrollbar-color:rgba(21,19,95,.5) transparent; }
body.theme-dark *{ scrollbar-color:rgba(255,255,255,.28) transparent; }
body.theme-dark *::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.28); }
body.theme-dark *::-webkit-scrollbar-thumb:hover{ background:var(--accent); }
aside button{ border-radius: var(--radius-md); position:relative; overflow:hidden; border-color:transparent; background:transparent; }
aside button::before{
  content:""; position:absolute; inset-inline-start:0; top:50%; transform:translateY(-50%) scaleY(0);
  width:3px; height:62%; border-radius:3px; background:linear-gradient(var(--accent),var(--info));
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
}
aside button:hover{ background:rgba(242,170,0,.10); transform: translateX(-3px); box-shadow:none; }
aside button.active::before{ transform:translateY(-50%) scaleY(1); }
aside button.active{ background:linear-gradient(135deg, rgba(242,170,0,.18), rgba(37,99,235,.05)); box-shadow: var(--elev-1); }
.nav-icon{ border-radius: var(--radius-sm); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
aside button:hover .nav-icon{ transform: rotate(-6deg) scale(1.08); }
.card, .panel, .table-wrap{ border-radius: var(--radius-lg); box-shadow: var(--elev-1); backdrop-filter: blur(6px); position:relative; overflow:hidden; }
.card::after, .panel::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(120deg, transparent 40%, rgba(255,255,255,.16) 50%, transparent 60%);
  background-size:220% 100%; background-position:120% 0; opacity:0; transition:opacity .3s ease;
}
.card:hover, .panel:hover{ transform: translateY(-4px); box-shadow: var(--elev-2), var(--glow-accent); border-color: rgba(242,170,0,.42); }
.card:hover::after, .panel:hover::after{ opacity:1; animation: sheenMove 1.1s ease; }
@keyframes sheenMove { from { background-position:120% 0; } to { background-position:-120% 0; } }
.card strong{ background:linear-gradient(135deg,var(--text),color-mix(in srgb,var(--accent) 60%, var(--text))); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
button{ border-radius: var(--radius-md); position:relative; overflow:hidden; }
button:hover{ transform: translateY(-2px); box-shadow: var(--elev-1); }
button.primary, a.primary{ box-shadow: var(--glow-accent); }
button.primary:hover, a.primary:hover{ box-shadow: 0 14px 38px rgba(242,170,0,.42); filter:saturate(1.05); }
button::after{
  content:""; position:absolute; top:0; inset-inline-start:-60%; width:45%; height:100%; transform:skewX(-20deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); opacity:0;
}
button:hover::after{ animation: btnSheen .7s ease; }
@keyframes btnSheen { 0%{ inset-inline-start:-60%; opacity:.0;} 30%{opacity:.9;} 100%{ inset-inline-start:130%; opacity:0; } }
input, select, textarea{ border-radius: var(--radius-sm) !important; transition: box-shadow .2s ease, border-color .2s ease, background .2s ease; }
input:focus, select:focus, textarea:focus{ outline:none; border-color: rgba(242,170,0,.7) !important; box-shadow: var(--ring-accent); }
.brand{ border-radius: var(--radius-lg); box-shadow: var(--elev-1); }
.badge, .status-badge, .severity-badge, .chip, .tag, .user-chip{ border-radius: 999px; }
.cards > *, .grid > *, .box-grid > *, .module-strip > *, .chart-grid > *{ animation: riseIn .5s cubic-bezier(.2,.8,.2,1) both; }
.cards > *:nth-child(2){ animation-delay:.05s; } .cards > *:nth-child(3){ animation-delay:.10s; } .cards > *:nth-child(4){ animation-delay:.15s; }
.grid > *:nth-child(2){ animation-delay:.06s; } .grid > *:nth-child(3){ animation-delay:.12s; } .grid > *:nth-child(4){ animation-delay:.18s; }
@keyframes riseIn { from { opacity:0; transform: translateY(14px) scale(.985); } to { opacity:1; transform:none; } }
.modal, .modal-card, .login-card{ border-radius: var(--radius-xl) !important; box-shadow: var(--elev-2) !important; backdrop-filter: blur(var(--glass-blur)) saturate(140%); }
table tbody tr{ transition: background .18s ease; }
table tbody tr:hover{ background: color-mix(in srgb, var(--accent) 8%, transparent); }
h1{ letter-spacing:-.02em; } h2{ letter-spacing:-.01em; }

/* ============================================================= */
/*  MODERN UI v3 — calm, premium, world-class (overrides v2)      */
/* ============================================================= */
:root{
  --elev-1: 0 1px 2px rgba(21,19,95,.04), 0 6px 18px rgba(21,19,95,.06);
  --elev-2: 0 4px 14px rgba(21,19,95,.07), 0 16px 40px rgba(21,19,95,.09);
}
body.theme-dark{
  --elev-1: 0 1px 3px rgba(0,0,0,.26), 0 8px 24px rgba(0,0,0,.26);
  --elev-2: 0 6px 20px rgba(0,0,0,.34), 0 20px 48px rgba(0,0,0,.4);
}
body::before{ opacity:.30; animation-duration: 28s; }
.card::after, .panel::after{ display:none !important; }
.card, .panel, .table-wrap{ border-color: color-mix(in srgb, var(--line) 72%, transparent); box-shadow: var(--elev-1); }
.card:hover, .panel:hover{ transform: translateY(-2px); box-shadow: var(--elev-2); border-color: color-mix(in srgb, var(--accent) 22%, var(--line)); }
button::after{ display:none !important; }
button:hover{ transform: translateY(-1px); box-shadow: var(--elev-1); }
button.primary{ box-shadow: var(--elev-1); }
button.primary:hover{ box-shadow: var(--elev-2); filter:none; }
aside{ padding:16px 12px; }
.brand{ box-shadow:none; border-color: color-mix(in srgb, var(--accent) 22%, transparent); }
.nav-section{ gap:3px; }
.nav-section > span{ text-transform:uppercase; letter-spacing:.13em; font-size:10.5px; opacity:.65; margin:10px 8px 5px; }
aside button{ min-height:42px; padding:9px 11px; border-radius:12px; color:var(--muted); font-weight:600; background:transparent; box-shadow:none; transition: background .18s ease, color .18s ease; }
aside button:hover{ background: color-mix(in srgb, var(--accent) 9%, transparent); color:var(--text); transform:none; box-shadow:none; }
aside button .nav-icon{ background:transparent; color:var(--muted); transition: color .18s ease, background .18s ease; }
aside button:hover .nav-icon{ transform:none; color:var(--accent); }
aside button.active{ background: color-mix(in srgb, var(--accent) 12%, transparent); color:var(--text); box-shadow:none; }
aside button.active .nav-icon{ color:var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
aside button.active::before{ height:46%; width:3px; border-radius:0 3px 3px 0; background:var(--accent); }
.session-card{ border-radius:14px; background: color-mix(in srgb, var(--panel-2) 60%, transparent); box-shadow:none; }
main{ padding:26px 26px 40px; }
h1{ font-weight:800; } h2{ font-weight:700; }

/* ============================================================= */
/*  MODERN UI v4 — GLASS-PREMIUM MINIMALIST TECH (LIGHT THEME)   */
/* ============================================================= */
body.theme-light {
  --bg: #f5f7fa;
  --panel: rgba(255, 255, 255, 0.88);
  --panel-2: rgba(241, 245, 249, 0.8);
  --line: rgba(21, 19, 95, 0.08);
  --text: #0f172a;
  --muted: #64748b;
  --soft-shadow: 0 10px 40px -10px rgba(21, 19, 95, 0.04), 0 1px 3px rgba(21, 19, 95, 0.02);
}

/* Beautiful dynamic rotating gradient aurora in background */
body.theme-light::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background: 
    radial-gradient(45rem 45rem at 85% -10%, rgba(242, 170, 0, 0.12), transparent 70%),
    radial-gradient(40rem 40rem at -10% 20%, rgba(21, 19, 95, 0.08), transparent 70%),
    radial-gradient(35rem 35rem at 50% 110%, rgba(37, 99, 235, 0.05), transparent 70%);
  animation: auroraMotion 24s ease-in-out infinite alternate;
}

@keyframes auroraMotion {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(2%, -3%, 0) rotate(2deg) scale(1.05); }
  100% { transform: translate3d(-1%, 2%, 0) rotate(-1deg) scale(0.98); }
}

/* Glassmorphic dashboard cards & panels with white inner sheen and soft borders */
body.theme-light .card, 
body.theme-light .panel, 
body.theme-light .table-wrap {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(21, 19, 95, 0.09) !important;
  box-shadow: 
    0 10px 30px -5px rgba(21, 19, 95, 0.03), 
    0 1px 3px rgba(21, 19, 95, 0.01),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  border-radius: 20px !important;
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), 
              border-color 0.28s ease, 
              box-shadow 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

body.theme-light .card:hover, 
body.theme-light .panel:hover {
  transform: translateY(-4px) scale(1.004);
  border-color: rgba(242, 170, 0, 0.5) !important;
  box-shadow: 
    0 24px 50px -12px rgba(21, 19, 95, 0.08), 
    0 4px 15px -3px rgba(242, 170, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Sleek inputs and select boxes with ambient focus ring */
body.theme-light input, 
body.theme-light select, 
body.theme-light textarea {
  background: rgba(248, 250, 252, 0.9);
  border: 1px solid rgba(21, 19, 95, 0.12);
  color: #0f172a;
  border-radius: 12px !important;
  font-size: 14px;
  padding: 12px 15px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

body.theme-light input:focus, 
body.theme-light select:focus, 
body.theme-light textarea:focus {
  background: #ffffff;
  border-color: rgba(242, 170, 0, 0.8) !important;
  box-shadow: 0 0 0 4px rgba(242, 170, 0, 0.18), 0 2px 4px rgba(0, 0, 0, 0.02);
  outline: none;
}

/* Beautiful executive buttons */
body.theme-light button {
  background: #ffffff;
  border: 1px solid rgba(21, 19, 95, 0.1);
  color: #475569;
  border-radius: 12px;
  font-weight: 600;
  padding: 11px 16px;
  box-shadow: 0 2px 4px rgba(21, 19, 95, 0.02);
  transition: all 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

body.theme-light button:hover {
  background: rgba(241, 245, 249, 0.9);
  border-color: rgba(21, 19, 95, 0.18);
  color: #0f172a;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(21, 19, 95, 0.04);
}

body.theme-light button.primary {
  background: linear-gradient(135deg, #f2aa00, #d49500);
  color: #ffffff;
  border: 1px solid #c28900;
  box-shadow: 0 4px 14px rgba(242, 170, 0, 0.25);
  font-weight: 700;
}

body.theme-light button.primary:hover {
  background: linear-gradient(135deg, #ffd773, #f2aa00);
  color: #15135f;
  border-color: #f2aa00;
  box-shadow: 0 6px 20px rgba(242, 170, 0, 0.38);
  transform: translateY(-2px);
}

/* Glassmorphic Sidebar in Light Mode */
body.theme-light aside {
  background: rgba(255, 255, 255, 0.76) !important;
  border-left: 1px solid rgba(21, 19, 95, 0.07) !important;
  backdrop-filter: blur(30px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
  box-shadow: 6px 0 30px rgba(21, 19, 95, 0.015) !important;
  border-radius: 0 24px 24px 0;
  padding: 20px 14px;
}

body.theme-light aside button {
  color: #475569;
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
  border-radius: 14px;
  margin-bottom: 6px;
  transition: all 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}

body.theme-light aside button:hover {
  background: rgba(242, 170, 0, 0.07);
  color: #b47f00;
  transform: translateX(-4px);
}

body.theme-light aside button.active {
  background: linear-gradient(135deg, rgba(242, 170, 0, 0.13), rgba(21, 19, 95, 0.03)) !important;
  color: #b47f00 !important;
  font-weight: 700;
  border-left: 3px solid #f2aa00 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

body.theme-light aside button.active .nav-icon {
  background: rgba(242, 170, 0, 0.16) !important;
  color: #b47f00 !important;
}

/* Premium Table Styling (Light Mode) */
body.theme-light th {
  color: #475569;
  font-weight: 700;
  border-bottom: 2px solid rgba(21, 19, 95, 0.08);
  background: rgba(248, 250, 252, 0.85);
  padding: 14px 10px;
}

body.theme-light td {
  border-bottom: 1px solid rgba(21, 19, 95, 0.04);
  padding: 12px 10px;
}

body.theme-light tbody tr {
  transition: background-color 0.2s ease;
}

body.theme-light tbody tr:hover {
  background: rgba(242, 170, 0, 0.035);
}

/* Gold Glow for statistics highlights */
body.theme-light .card strong {
  color: #15135f;
  text-shadow: none;
  transition: text-shadow 0.25s ease;
}

body.theme-light .card:hover strong {
  text-shadow: 0 0 15px rgba(242, 170, 0, 0.25);
  color: #f2aa00;
}

/* Executive status indicators */
.badge, .status-badge, .severity-badge {
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 6px 12px;
  border-radius: 20px;
  transition: all 0.2s ease;
  border: 1px solid currentColor;
}

/* Pulsating alerts */
.live-chip, .critical, .failed {
  box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4);
  animation: pulseGlow v4-pulseGlow 2s infinite cubic-bezier(0.66, 0, 0, 1);
}

@keyframes v4-pulseGlow {
  0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.5); }
  70% { box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); }
  100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

/* ============================================================= */
/*  MODERN UI v5 — FLUID RESPONSIVE LAYER + EVIDENCE MODAL        */
/*  Pure styling layer (overrides above). Makes every page fit    */
/*  any screen size automatically, and gives the evidence viewer  */
/*  a large, centered, responsive image/video presentation.       */
/* ============================================================= */

/* ---- Universal dialog: always centered + never taller than the viewport ---- */
dialog { margin: auto; max-height: calc(100vh - 36px); overflow: auto; }
#modal-body { max-height: none; }

/* ---- Item 1: Evidence viewer — large, centered image + video ---- */
dialog#modal.evi {
  width: min(1120px, calc(100vw - 32px));
  padding: 22px 24px;
}
.evi-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  align-items: start;
}
.evi-media-col { display: grid; gap: 8px; min-width: 0; }
.evi-media-col > h4 { margin: 0 0 2px; color: var(--muted); font-size: 13px; }
.evi-media {
  display: block;
  width: 100%;
  max-height: min(68vh, 620px);
  object-fit: contain;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #000;
  margin: 0 auto;
}
img.evi-media { cursor: zoom-in; }
.evi-empty {
  display: grid; place-items: center; min-height: 220px; text-align: center;
  border: 1px dashed var(--line); border-radius: 12px; color: var(--muted);
  background: color-mix(in srgb, var(--panel-2) 70%, transparent); padding: 16px;
}

/* ---- Item 2: Fluid auto-fit card grids (reflow at ANY width, not only at 3 breakpoints) ---- */
.cards { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.kpi-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.box-grid, .package-grid, .algorithm-grid.modern, .notification-grid,
.payment-grid, .module-strip, .chart-grid, .plan-matrix, .translation-grid,
.scenario-grid, .module-toggle-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.metric-row, .package-metrics, .algorithm-summary, .scenario-meta, .compact-metrics {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.filter-bar { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

/* Media inside any panel/table never overflows its container */
img, video, canvas, svg { max-width: 100%; }
.panel img, .card img, .panel video, .card video { height: auto; }

/* ---- Tablet breakpoint: slimmer sidebar so content keeps room (761–1180px) ---- */
@media (max-width: 1180px) and (min-width: 761px) {
  body, [dir="ltr"] body { grid-template-columns: 234px minmax(0, 1fr); }
  main { padding: 20px 18px 34px; }
}

/* ---- Two-column hero blocks stack earlier so they never crush ---- */
@media (max-width: 920px) {
  .algorithm-hero, .plans-toolbar, .subscription-board, .app-control,
  .link-guide, .users-shell, .grid { grid-template-columns: 1fr; }
}

/* ---- Phone breakpoint refinements ---- */
@media (max-width: 560px) {
  main { padding: 14px 12px 28px; }
  h1 { font-size: 22px; }
  h2 { font-size: 16px; }
  header { gap: 10px; }
  .actions { justify-content: flex-start; }
  dialog#modal.evi { padding: 16px; }
  .evi-media { max-height: 52vh; }
  /* Wide charts scroll instead of crushing */
  .trend-chart { grid-auto-columns: 26px; grid-template-columns: none; grid-auto-flow: column; overflow-x: auto; padding-bottom: 6px; }
  .table-wrap { -webkit-overflow-scrolling: touch; }
}

/* ============================================================= */
/*  UI v6 — FULL-PAGE MODALS + CENTERED EVIDENCE STAGE            */
/*  (owner 2026-07-09). Pure styling override layer: it changes   */
/*  NO markup contract and NO ids/classes main.js depends on.     */
/*  Appended last so it wins over the v5 block above.             */
/* ============================================================= */

/* ---- Every dialog may now USE the page instead of a fixed 680px column.
   Content-driven: it grows with its content up to nearly the full viewport,
   while a short confirm/form still keeps the comfortable 680px baseline
   (a 1400px-wide "delete camera?" box would be worse, not better). ---- */
dialog {
  width: max-content;
  min-width: min(680px, calc(100vw - 32px));
  max-width: min(1560px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  margin: auto;                 /* true centering on BOTH axes */
  overflow: auto;
}

/* ---- Evidence viewer: FULL PAGE, exactly ONE media centered in the middle.
   The shared `<form method="dialog">` becomes a 3-row page frame:
   title / stage (all remaining height) / action bar. ---- */
dialog#modal.evi {
  width: calc(100vw - 20px);
  max-width: none;
  height: calc(100vh - 20px);
  max-height: calc(100vh - 20px);
  padding: 0;
  overflow: hidden;
}
dialog#modal.evi > form {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  height: 100%;
  min-height: 0;
  padding: 18px 22px 14px;
  box-sizing: border-box;
}
dialog#modal.evi > form > h2 { margin: 0; }
dialog#modal.evi #modal-body { min-height: 0; height: 100%; max-height: none; overflow: hidden; }

.evi-shell { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; height: 100%; min-height: 0; }

/* ---- Tab bar: «الصورة | الفيديو» — only one stage is ever in flow ---- */
.evi-tabs { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.evi-tab { padding: 8px 20px; border-radius: 999px; font-weight: 700; font-size: 13px; cursor: pointer; }
.evi-tab.active { background: linear-gradient(135deg, #f2aa00, #ffd773); color: #11133d; border-color: rgba(242,170,0,.75); }

/* ---- The stage: media perfectly centered, filling all remaining height ---- */
.evi-stage { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 8px; min-height: 0; }
.evi-stage[hidden] { display: none; }          /* beats `.evi-stage{display:grid}` */
.evi-frame { display: grid; place-items: center; min-height: 0; min-width: 0; }
.evi-frame > .evi-media {                       /* wins over v5 `.evi-media{width:100%}` */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  object-fit: contain;
}
.evi-stage .evi-empty { width: 100%; max-width: 720px; margin: auto; }
.evi-actions { display: flex; justify-content: center; gap: 10px; }

/* ---- Evidence path rows stay readable and centered under the stage ---- */
.evi-meta { width: 100%; max-width: 1100px; margin-inline: auto; display: grid; gap: 6px; }

@media (max-width: 560px) {
  dialog { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
  dialog#modal.evi { width: calc(100vw - 10px); height: calc(100vh - 10px); }
  dialog#modal.evi > form { padding: 14px 14px 10px; }
  .evi-tab { padding: 7px 14px; }
}

/* ============================================================================
   Cloud v2 owner console components (U3 customer-360, U4 fleet, U5 CMS editor)
   STC identity: navy #15135f / gold #f2aa00, light default, RTL.
   ============================================================================ */
.status-pill { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:700; border:1px solid var(--line); background:rgba(255,255,255,.5); }
.status-pill.ok { color:var(--ok); border-color:rgba(22,163,74,.35); background:rgba(22,163,74,.08); }
.status-pill.crit { color:var(--danger); border-color:rgba(220,38,38,.35); background:rgba(220,38,38,.08); }
.status-pill.warn { color:var(--warn); border-color:rgba(217,119,6,.35); background:rgba(217,119,6,.08); }
.crit { color:var(--danger); }
.warn { color:var(--warn); }
.status-inline.error { border-color:rgba(220,38,38,.4); background:rgba(220,38,38,.08); color:var(--danger); }
.linklike { background:none; border:none; padding:0; margin:0; color:var(--accent-2); font-weight:700; cursor:pointer; text-decoration:underline; }
body.theme-dark .linklike { color:var(--accent); }
.linklike:hover { color:var(--accent); transform:none; box-shadow:none; }

/* Customer 360 */
.customer-360 { gap:14px; }
.customer-head { display:grid; gap:12px; }
.customer-head .ch-title { display:flex; align-items:center; gap:12px; }
.customer-head .ch-title h2 { margin:0; }
.customer-head .ch-meta { display:flex; flex-wrap:wrap; gap:16px; color:var(--muted); font-size:13px; }
.customer-head .ch-actions { display:flex; gap:8px; flex-wrap:wrap; }
.activation-box { margin:12px 0; padding:12px; border:1px dashed rgba(242,170,0,.5); border-radius:10px; background:rgba(242,170,0,.06); }
.activation-box code { direction:ltr; unicode-bidi:embed; background:rgba(21,19,95,.08); border:1px solid rgba(21,19,95,.16); border-radius:6px; padding:4px 8px; margin:0 6px; font-weight:700; }

/* Fleet offline-camera banner (impossible to miss) */
.alert-banner { border-width:2px; }
.alert-banner.crit { border-color:rgba(220,38,38,.5); background:rgba(220,38,38,.06); }
.alert-banner.ok { border-color:rgba(22,163,74,.4); background:rgba(22,163,74,.06); }
.alert-banner .ab-head { font-size:16px; font-weight:800; margin-bottom:10px; color:var(--danger); display:flex; align-items:center; gap:8px; }
.alert-banner.ok .ab-head { color:var(--ok); }
.alert-banner .ab-head strong { font-size:24px; }

/* CMS block editor */
.cms-toolbar .cms-add { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.cms-toolbar .cms-add select { max-width:280px; }
.cms-blocks { gap:12px; }
.cms-block { padding:14px 16px; }
.cms-block.hidden-block { opacity:.6; }
.cms-block-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.cms-block-head .cbh-title { display:flex; align-items:center; gap:10px; }
.cms-type-badge { font-weight:800; color:var(--accent-2); background:rgba(242,170,0,.14); border:1px solid rgba(242,170,0,.3); border-radius:8px; padding:4px 10px; }
body.theme-dark .cms-type-badge { color:var(--accent); }
.cms-block-preview { margin-top:10px; padding-top:10px; border-top:1px solid var(--line); display:flex; align-items:center; gap:10px; flex-wrap:wrap; color:var(--text); }
.cms-block-preview .muted { color:var(--muted); }
.cms-editor { display:grid; gap:14px; }
.cms-field { display:grid; gap:6px; }
.cms-field-label { color:var(--muted); font-size:13px; font-weight:700; }
.cms-i18n { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cms-i18n label { gap:4px; }
.cms-i18n textarea { min-height:60px; }
.cms-group { border:1px solid var(--line); border-radius:10px; padding:12px; display:grid; gap:10px; }
.cms-group legend { color:var(--accent-2); font-weight:700; padding:0 6px; }
body.theme-dark .cms-group legend { color:var(--accent); }
.cms-check { display:flex; align-items:center; gap:8px; }
.cms-check input { width:auto; }
.cms-upload { display:flex; gap:8px; align-items:center; margin-top:6px; }
.cms-upload input[type=file] { width:auto; }

/* منع أي تمرير أفقي ناتج عن خلفيات زخرفية (الأورورا) */
html, body { overflow-x: hidden; max-width: 100%; }

/* ---- customer cycle stepper (data -> plan -> payment -> activation) ---- */
.cycle-card { display:grid; gap:16px; border:1.5px solid rgba(242,170,0,.35); background:linear-gradient(180deg,rgba(242,170,0,.06),transparent); }
.cycle-steps { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cyc-step { display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-weight:700; font-size:13px; white-space:nowrap; flex:0 0 auto; }
.cyc-step .cyc-label { padding-inline-start:2px; }
.cyc-dot { width:28px; height:28px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; border:2px solid var(--line); background:var(--panel); color:var(--muted); font-weight:800; }
.cyc-step.active .cyc-dot { border-color:var(--accent); color:var(--accent-2); background:rgba(242,170,0,.15); }
.cyc-step.active { color:var(--accent-2); }
.cyc-step.done .cyc-dot { border-color:var(--ok); background:var(--ok); color:#fff; }
.cyc-step.done { color:var(--ok); }
.cyc-sep { flex:0 0 34px; height:2px; background:var(--line); border-radius:2px; }
.cycle-body h3 { margin:0 0 4px; font-size:17px; }
body.theme-dark .cyc-step.active { color:var(--accent); }
body.theme-dark .cyc-step.active .cyc-dot { color:var(--accent); }

/* ---- header live clock (like the Edge) ---- */
.hdr-clock { display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:13px; color:var(--accent-2); background:rgba(242,170,0,.10); border:1px solid rgba(242,170,0,.28); border-radius:999px; padding:6px 14px; white-space:nowrap; }
body.theme-dark .hdr-clock { color:var(--accent); }

/* ---- multi-select (payment methods / billing cycles as options) ---- */
.multiselect { display:flex; flex-wrap:wrap; gap:8px; padding:8px; border:1px solid var(--line); border-radius:12px; background:rgba(248,250,252,.6); }
.multiselect .ms-item { display:inline-flex; align-items:center; gap:6px; margin:0; padding:6px 12px; border:1px solid var(--line); border-radius:999px; background:var(--panel); cursor:pointer; font-size:13px; }
.multiselect .ms-item input { width:auto; margin:0; }
.multiselect .ms-item:has(input:checked) { border-color:var(--accent); background:rgba(242,170,0,.12); color:var(--accent-2); font-weight:700; }

/* ---- inline forms (finance / notifications / options) ---- */
.inline-form { display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end; }
.inline-form label { display:grid; gap:6px; min-width:150px; flex:1 1 150px; }
.inline-form button { flex:0 0 auto; }

/* ---- finance monthly chart ---- */
.finance-chart { display:flex; gap:14px; align-items:flex-end; overflow-x:auto; padding:14px 4px 4px; min-height:200px; }
.fc-col { display:flex; flex-direction:column; align-items:center; gap:6px; min-width:64px; }
.fc-bars { display:flex; gap:5px; align-items:flex-end; height:150px; }
.fc-bars i { width:16px; border-radius:6px 6px 0 0; display:block; }
.fc-rev { background:linear-gradient(180deg,#ffd773,#f2aa00); }
.fc-exp { background:linear-gradient(180deg,#3b3a86,#15135f); }
.fc-net { font-weight:800; font-size:12px; }
.fc-net.ok { color:var(--ok); }
.fc-net.crit { color:var(--danger); }
.fc-label { color:var(--muted); font-size:11px; }
.fc-legend { display:flex; gap:18px; justify-content:center; margin-top:10px; color:var(--muted); font-size:13px; }
.fc-legend span { display:inline-flex; align-items:center; gap:6px; }
.fc-legend i { width:14px; height:14px; border-radius:4px; display:inline-block; }

/* ---- notifications: professional channel cards ---- */
.nc-section-title { margin:22px 4px 10px; font-size:15px; font-weight:800; color:var(--accent-2); }
body.theme-dark .nc-section-title { color:var(--accent); }
.notification-card { display:grid; gap:12px; }
.nc-head { display:flex; align-items:center; gap:12px; }
.nc-icon { width:44px; height:44px; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; border-radius:14px; background:rgba(242,170,0,.13); color:var(--accent); border:1px solid rgba(242,170,0,.28); }
.nc-icon svg { width:22px; height:22px; }
.nc-title { flex:1; display:grid; gap:2px; }
.nc-title h2 { margin:0; font-size:16px; }
.nc-meta { display:flex; flex-wrap:wrap; gap:8px; }
.nc-meta span { font-size:12px; color:var(--muted); background:var(--panel-2); border:1px solid var(--line); border-radius:999px; padding:4px 10px; }

/* ---- FCM / service-account uploader ---- */
.fcm-card { display:grid; gap:12px; }
.fcm-drop { border:1.5px dashed rgba(21,19,95,.22); border-radius:14px; padding:20px; text-align:center; color:var(--muted); background:rgba(248,250,252,.6); }
.fcm-status { display:inline-flex; align-items:center; gap:8px; font-weight:700; }
.notify-audience { display:flex; gap:10px; flex-wrap:wrap; }
.notify-audience label { display:inline-flex; align-items:center; gap:6px; min-width:auto; }
.notify-audience input { width:auto; }

/* ============================================================================
   UI v7 — MOBILE OFF-CANVAS NAV DRAWER (owner 2026-07-13, cPanel responsive)
   Appended LAST so it wins. Below 860px the sticky sidebar becomes a slide-in
   drawer opened by the header hamburger (#nav-burger -> body.nav-open) with a
   dim backdrop. Desktop layout is untouched (the burger + backdrop are hidden).
   RTL default = drawer on the RIGHT; the [dir="ltr"] variants flip it left.
   ============================================================================ */
.hdr-lead { display:flex; align-items:center; gap:12px; min-width:0; }
.nav-burger { display:none; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; min-height:44px; padding:0 11px; border-radius:12px; background:transparent; border:1px solid var(--line); flex:0 0 auto; cursor:pointer; }
.nav-burger span { display:block; width:22px; height:2.5px; border-radius:2px; background:var(--accent-2); transition:transform .2s ease, opacity .2s ease; }
body.theme-dark .nav-burger span { background:var(--accent); }
.nav-burger:hover { transform:none; box-shadow:none; border-color:rgba(242,170,0,.5); }
#nav-backdrop { display:none; }

@media (max-width: 860px) {
  /* single column: main takes the full width, the aside floats above it as a drawer */
  body, [dir="ltr"] body { grid-template-columns: 1fr; }
  aside, main, [dir="ltr"] aside, [dir="ltr"] main { grid-column: 1; grid-row: 1; }

  aside {
    position: fixed; top: 0; right: 0; left: auto;
    width: min(300px, 86vw); height: 100vh; max-height: 100vh; overflow-y: auto;
    z-index: 70;
    transform: translateX(100%);            /* hidden off the right edge (RTL) */
    transition: transform .28s cubic-bezier(.2,.8,.2,1);
    box-shadow: -14px 0 44px rgba(21,19,95,.24) !important;
  }
  [dir="ltr"] aside { right: auto; left: 0; transform: translateX(-100%); box-shadow: 14px 0 44px rgba(21,19,95,.24) !important; }
  body.nav-open aside, [dir="ltr"] body.nav-open aside { transform: none; }

  #nav-backdrop { display: block; position: fixed; inset: 0; z-index: 65; background: rgba(10,10,30,.45); opacity: 0; visibility: hidden; transition: opacity .25s ease; }
  body.nav-open #nav-backdrop { opacity: 1; visibility: visible; }

  .nav-burger { display: inline-flex; }
  body.nav-open { overflow: hidden; }        /* lock page scroll while the drawer is open */

  header { align-items: center; }
  main { padding: 16px 14px 30px; }
}

/* Extra-small phones: keep modals and the drawer comfortably inside the viewport */
@media (max-width: 400px) {
  aside { width: min(288px, 92vw); }
  main { padding: 14px 11px 26px; }
}