:root{--brand:#0f766e;--brand-strong:#115e59;--accent:#0369a1;--background:#f8fafc;--surface:#fff;--text:#0f172a;--text-muted:#475569;--border:#cbd5e1;--danger:#b91c1c;--warning:#a16207;--success:#15803d;--focus:#2563eb;--font-family:Inter, "Noto Sans Arabic", system-ui, sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{background:var(--background);color:var(--text);font-family:var(--font-family)}button,input,select,textarea{font:inherit}button{cursor:pointer}.app{background:var(--background);min-height:100vh;color:var(--text);font-family:var(--font-family);grid-template-columns:268px minmax(0,1fr);display:grid}.sidebar{background:linear-gradient(180deg, var(--brand-strong), #0b3f3d 100%);color:#fff;flex-direction:column;min-height:100vh;padding:26px 18px 20px;display:flex;position:sticky;top:0;box-shadow:10px 0 35px #0f172a14}.brand-lockup,.mobile-brand{align-items:center;gap:12px;display:flex}.brand-lockup{padding:0 10px 28px}.brand-lockup div{gap:2px;display:grid}.brand-lockup strong{letter-spacing:.02em;font-size:1.06rem}.brand-lockup span:not(.brand-mark){opacity:.72;font-size:.76rem}.brand-mark{background:#ffffff24;border:1px solid #fff3;border-radius:11px;place-items:center;width:36px;height:36px;font-weight:800;display:inline-grid;box-shadow:inset 0 1px #ffffff24}.sidebar nav{gap:5px;display:grid}.nav-item{color:#ffffffc2;text-align:start;background:0 0;border:0;border-radius:10px;align-items:center;gap:11px;width:100%;padding:11px 12px;transition:background .15s,color .15s;display:flex}.nav-item:hover{color:#fff;background:#ffffff14}.nav-item:focus-visible{outline-offset:2px;outline:3px solid #fff}.nav-item:disabled{cursor:default;opacity:.45}.nav-item:disabled:hover{color:#ffffffc2;background:0 0}.nav-item--active{color:#fff;background:#ffffff24;font-weight:700}.nav-dot{opacity:.55;background:currentColor;border-radius:999px;width:7px;height:7px}.nav-item--active .nav-dot{opacity:1;background:#7dd3fc;box-shadow:0 0 0 4px #7dd3fc1f}.sidebar__footer{border-top:1px solid #ffffff21;gap:4px;margin-top:auto;padding:18px 10px 0;display:grid}.sidebar__footer span,.sidebar__footer small{color:#ffffff9e;font-size:.72rem}.sidebar__footer strong{font-size:.86rem}.sidebar__footer button{color:#fff;background:0 0;border:1px solid #ffffff3d;border-radius:8px;width:fit-content;margin-top:8px;padding:6px 9px;font-size:.72rem}.sidebar__footer button:hover{background:#ffffff1a}.sidebar__footer button:focus-visible{outline-offset:2px;outline:3px solid #fff}.main-column{min-width:0}.topbar{border-bottom:1px solid var(--border);z-index:5;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#ffffffeb;justify-content:flex-end;align-items:center;height:68px;padding:0 34px;display:flex;position:sticky;top:0}.mobile-brand{display:none}.locale-switch{border:1px solid var(--border);background:#fff;border-radius:10px;display:inline-flex;overflow:hidden}.locale-switch button{color:var(--text-muted);background:0 0;border:0;padding:7px 11px}.locale-switch button.selected{background:var(--brand);color:#fff;font-weight:700}.locale-switch button:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}main{max-width:1500px;margin:0 auto;padding:34px}.page-heading{justify-content:space-between;align-items:end;gap:24px;margin-bottom:22px;display:flex}.page-heading h1,.panel h1{letter-spacing:-.035em;margin:6px 0 0;font-size:clamp(1.65rem,3vw,2.25rem)}.eyebrow{text-transform:uppercase;letter-spacing:.12em;color:var(--brand);font-size:.7rem;font-weight:800}.development-badge{color:#075985;background:#e0f2fe;border-radius:999px;padding:7px 10px;font-size:.74rem;font-weight:750}.metrics{grid-template-columns:repeat(6,minmax(135px,1fr));gap:13px;margin-bottom:18px;display:grid}.metric-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;flex-direction:column;justify-content:space-between;min-height:116px;padding:18px;display:flex;box-shadow:0 1px 2px #0f172a08}.metric-card__label{color:var(--text-muted);font-size:.78rem;font-weight:650}.metric-card__value{letter-spacing:-.04em;font-size:1.7rem}.metric-card__detail{color:var(--text-muted);font-size:.72rem}.panel{background:var(--surface);border:1px solid var(--border);border-radius:17px;margin-top:18px;overflow:hidden;box-shadow:0 1px 2px #0f172a08}.panel--page{margin-top:0}.panel__heading{padding:20px 22px 14px}.panel__heading h2{margin:0;font-size:1rem}.panel__heading h1{margin-bottom:4px}.feature-foundation{min-height:280px;padding:34px}.feature-foundation p,.error-state p{max-width:680px;color:var(--text-muted);line-height:1.7}.error-state{border-inline-start:4px solid var(--danger);padding:34px}.table-wrap{width:100%;overflow-x:auto}table{border-collapse:collapse;width:100%;min-width:720px}th,td{text-align:start;vertical-align:middle;border-top:1px solid #e2e8f0;padding:14px 22px}th{color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;background:#fafcfd;font-size:.7rem}td{font-size:.82rem}td strong{font-size:.84rem;display:block}.cell-secondary{color:var(--text-muted);margin-top:4px;font-size:.7rem;display:block}.cell-secondary .status{margin-top:4px}.status{color:#334155;background:#f1f5f9;border-radius:999px;align-items:center;width:fit-content;padding:4px 8px;font-size:.68rem;font-weight:760;display:inline-flex}.status--success{color:#166534;background:#dcfce7}.status--warning{color:#854d0e;background:#fef3c7}.status--danger{color:#991b1b;background:#fee2e2}[dir=rtl] .sidebar{box-shadow:-10px 0 35px #0f172a14}@media (width<=1180px){.metrics{grid-template-columns:repeat(3,minmax(150px,1fr))}}@media (width<=820px){.app{grid-template-columns:1fr}.sidebar{min-height:auto;padding:16px;position:static}.brand-lockup{padding-bottom:14px}.sidebar nav{grid-template-columns:repeat(3,1fr)}.nav-item{text-align:center;justify-content:center;font-size:.76rem}.nav-dot,.sidebar__footer{display:none}.topbar{justify-content:space-between;padding:0 18px;top:0}.mobile-brand{color:var(--text);display:flex}.mobile-brand .brand-mark{background:var(--brand);color:#fff;border:0}main{padding:22px 16px 32px}.metrics{grid-template-columns:repeat(2,minmax(135px,1fr))}}@media (width<=560px){.sidebar nav{padding-bottom:3px;display:flex;overflow-x:auto}.nav-item{width:auto;min-width:max-content}.metrics{grid-template-columns:1fr 1fr}.page-heading{flex-direction:column;align-items:start}th,td{padding:13px 15px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
