body[data-public-demo]{--demo-ribbon-height:44px;padding-top:var(--demo-ribbon-height)}
.public-demo-banner{position:fixed;inset:0 0 auto;z-index:2000;display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:10px 16px;border-bottom:1px solid #9ac2ec;background:#eef6ff;color:#234b75;font:13px/1.5 Inter,Arial,sans-serif;text-align:center;box-shadow:0 1px 4px #0714370d}
.public-demo-banner svg{flex:0 0 18px}.public-demo-banner strong{color:inherit}
html[data-color-mode=dark] .public-demo-banner{background:#172c42;border-color:#4a7096;color:#c8e5ff}
body[data-public-demo] #sidebar{top:var(--demo-ribbon-height);height:calc(100dvh - var(--demo-ribbon-height))}
body[data-public-demo] .customer-auth{min-height:calc(100dvh - var(--demo-ribbon-height))}
@media(max-width:800px){body[data-public-demo] #sidebar{top:calc(var(--demo-ribbon-height) + var(--demo-header-height,104px));height:calc(100dvh - var(--demo-ribbon-height) - var(--demo-header-height,104px))}}
@media(max-width:550px){body[data-public-demo]{--demo-ribbon-height:59px}.public-demo-banner{padding:10px 14px;font-size:12px;gap:8px}}

.mofa-network-preview{position:relative;padding:32px;border:1px solid #ddc28a88;border-radius:18px;background:#163c38;color:#fff;box-shadow:0 20px 50px #0a25252b}.mofa-kicker{font-size:11px;letter-spacing:.13em;color:#e1c98e}.mofa-network-preview h3{font-size:30px;line-height:1.2;margin:18px 0 24px}.mofa-emirates{display:flex;flex-wrap:wrap;gap:8px}.mofa-emirates span{font-size:12px;padding:7px 10px;border:1px solid #ffffff40;border-radius:7px}.mofa-metrics{display:flex;justify-content:space-between;gap:16px;margin:28px 0 12px;border-top:1px solid #e1c98e66;padding-top:20px}.mofa-metrics strong{font-size:28px}.mofa-metrics small{display:block;font-size:11px;font-weight:400;color:#e1c98e;margin-top:6px}.mofa-disclaimer{font-size:11px;color:#e1c98e}.customer-auth .auth-art-note{display:none}@media(max-width:550px){.mofa-network-preview{padding:20px}.mofa-network-preview h3{font-size:24px}}

html[dir=rtl] .mofa-network-preview,html[dir=rtl] .mofa-kicker,html[dir=rtl] .auth-eyebrow,html[dir=rtl] .showcase-eyebrow{letter-spacing:normal}html[dir=rtl] .auth-submit>span{display:inline-block;transform:scaleX(-1)}

/* MoFA-inspired visual identity: isolated demo chrome only. Reference: mofa.gov.ae,
   4 Nov 2026. Fonts are bundled under the SIL Open Font License. No official seal. */
@font-face{font-family:MofaAlexandria;src:url('./fonts/Alexandria.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:MofaKufi;src:url('./fonts/NotoKufiArabic.ttf') format('truetype');font-weight:100 900;font-display:swap}
body[data-public-demo][data-ui-shell]{--mofa-gold:#92722a;--mofa-gold-light:#d7bd80;--mofa-tint:#f8f5ed;--canvas:#f8f8f7;--surface:#fff;--card:#fff;--ink:#232528;--muted:#626568;--line:#e3e2df;--border:#d0cec8;--soft:#f5f4f1;--accent-soft:#f7f2e5;--purple:var(--mofa-gold);--blue:var(--mofa-gold);--cyan:#6a6454;--control-border:#c9c5bb;--control-focus:var(--mofa-gold);--dialog-surface:#fff;--ui-text:#232528;--ui-muted:#626568;--ui-border:#c9c5bb;--ui-link:#795b1d;--button-bg:#92722a;--button-hover:#75591f;--auth-ink:#232528;--auth-muted:#626568;--auth-blue:#795b1d;--auth-line:#d5d0c5;--auth-lime:#ead9b3;background:var(--canvas);color:var(--ink);font-family:MofaAlexandria,Arial,sans-serif}
html[lang=ar] body[data-public-demo][data-ui-shell]{font-family:MofaKufi,Tahoma,Arial,sans-serif;line-height:1.8}
body[data-public-demo][data-ui-shell] :is(h1,h2,h3,.auth-brand){font-family:MofaAlexandria,Arial,sans-serif;color:var(--ink);letter-spacing:normal}
body[data-public-demo][data-ui-shell] :is(input,select,textarea,button,.theme-select-panel,.theme-date-panel){font-family:inherit}
body[data-public-demo][data-ui-shell] .public-demo-banner{background:var(--mofa-tint);border-color:#cfba88;color:#5f4a22;font-family:inherit;font-size:12px;box-shadow:0 3px 0 #92722a}
body[data-public-demo][data-ui-shell] :is(#sidebar,.page-header){background:var(--surface);border-color:var(--line);border-radius:0}
body[data-public-demo][data-ui-shell] #sidebar{box-shadow:none;border-inline-end:1px solid var(--line)}
body[data-public-demo][data-ui-shell] #sidebar nav a{color:var(--ink);font-weight:500;border:1px solid transparent;border-radius:6px}
body[data-public-demo][data-ui-shell] #sidebar nav a:is(.active,:hover){background:var(--accent-soft);color:var(--ui-link);border-color:#d8c9a3}
body[data-public-demo][data-ui-shell] #sidebar nav a.active{box-shadow:inset 3px 0 var(--mofa-gold)}
html[dir=rtl] body[data-public-demo][data-ui-shell] #sidebar nav a.active{box-shadow:inset -3px 0 var(--mofa-gold)}
body[data-public-demo][data-ui-shell] #sidebar nav a:is(.active,:hover) .icon{color:var(--ui-link)}
body[data-public-demo][data-ui-shell] :is(.brand,.auth-brand){color:var(--ink)}
body[data-public-demo][data-ui-shell] :is(.menu-label,.eyebrow,.auth-eyebrow){color:var(--ui-link);letter-spacing:.02em}
body[data-public-demo][data-ui-shell] :is(.card,.settings-card,.screen-card,.screen-grid-card,.content-asset-card,.builder-grid-card){background:var(--surface);border-color:var(--line);border-radius:10px;box-shadow:0 2px 7px #24201805}
body[data-public-demo][data-ui-shell] :is(th,thead){background:var(--soft);color:var(--ui-text);border-color:var(--line)}
body[data-public-demo][data-ui-shell] :is(td,.table-wrap){border-color:var(--line)}
body[data-public-demo][data-ui-shell] :is(.avatar,.badge:not(.success):not(.warning):not(.danger):not(.error)){background:var(--accent-soft);color:var(--ui-link);border-color:#d9c9a0}
body[data-public-demo][data-ui-shell] :is(.tabs,.settings-tabs,.playlist-orientation-tabs) :is(a,button)[aria-selected=true],body[data-public-demo][data-ui-shell] .tabs a.active{background:var(--accent-soft);color:var(--ui-link);border-color:var(--mofa-gold)}
body[data-public-demo][data-ui-shell] .theme-select-panel{font-family:inherit;border-color:var(--control-border);box-shadow:0 10px 32px #30271524}
body[data-public-demo][data-ui-shell] .theme-select-option:is([aria-selected=true],:hover),body[data-public-demo][data-ui-shell] .theme-select-option.is-active{background:var(--accent-soft);color:var(--ui-link)}
body[data-public-demo][data-ui-shell] :is(.theme-select-trigger,.theme-select-search,input,textarea):focus-visible{outline-color:var(--control-focus);border-color:var(--control-focus);box-shadow:0 0 0 3px #92722a1a}
body[data-public-demo][data-ui-shell] :is(button,a,summary):focus-visible{outline:2px solid var(--control-focus);outline-offset:3px}
body[data-public-demo][data-ui-shell] input:is([type=checkbox],[type=radio]){accent-color:var(--mofa-gold)}
body[data-public-demo][data-ui-shell] .yes-no-switch input:checked+.yes-no-track{background:var(--button-bg);border-color:var(--button-bg)}
body[data-public-demo][data-ui-shell] .yes-no-switch input:focus-visible+.yes-no-track{outline-color:var(--control-focus)}
body[data-public-demo][data-ui-shell] :is(dialog,.profile-dropdown,.notification-panel,.table-filter-options,.library-card-menu-panel){background:var(--surface);border-color:var(--control-border);color:var(--ink)}
body[data-public-demo][data-ui-shell] .workspace-welcome{background:linear-gradient(120deg,var(--surface),var(--mofa-tint));border-color:#dfd4b9}
/* Auth: a light government-style surface and quiet gold detail, rather than blue. */
body[data-public-demo][data-ui-shell=auth] .auth-form-panel{background:var(--surface)}
body[data-public-demo][data-ui-shell=auth] .auth-showcase{background:#f3f1eb;color:#232528;border-inline-end:1px solid #ded8c9}
body[data-public-demo][data-ui-shell=auth] .showcase-content :is(h2,h3){color:#232528}
body[data-public-demo][data-ui-shell=auth] .showcase-content :is(.showcase-lead,.showcase-benefits p){color:#5d5b55}
body[data-public-demo][data-ui-shell=auth] :is(.showcase-eyebrow,.showcase-link){color:#795b1d}
body[data-public-demo][data-ui-shell=auth] .auth-orbit{border-color:#b2965b33}
body[data-public-demo][data-ui-shell=auth] .auth-brand img{background:#92722a}
body[data-public-demo][data-ui-shell=auth] .auth-submit{background:var(--button-bg);border-color:var(--button-bg);box-shadow:0 3px 8px #60481814}
body[data-public-demo][data-ui-shell=auth] .auth-submit:hover{background:var(--button-hover)}
body[data-public-demo][data-ui-shell=auth] .auth-notice{background:#faf7ef;border-color:#d9c9a4;color:#5f512f}
body[data-public-demo][data-ui-shell=auth] .auth-form-content h1{font-size:clamp(24px,2.1vw,32px);line-height:1.5}
body[data-public-demo][data-ui-shell=auth] .showcase-benefits{border-color:#d8d0bf}
body[data-public-demo][data-ui-shell=auth] .showcase-benefits>div>span{background:#ede6d5;border-color:#ccb983;color:#71541f}
body[data-public-demo][data-ui-shell=auth] .mofa-network-preview{background:#fff;border-color:#cfba88;box-shadow:0 12px 36px #473b2010}
body[data-public-demo][data-ui-shell=auth] .mofa-network-preview :is(.mofa-kicker,.mofa-disclaimer,.mofa-metrics small){color:#795b1d}
body[data-public-demo][data-ui-shell=auth] .mofa-emirates span{border-color:#ded6c3;background:#faf8f2;color:#393833}
body[data-public-demo][data-ui-shell=auth] .mofa-metrics{border-color:#d9c9a0}
body[data-public-demo][data-ui-shell=auth] .mofa-metrics strong{color:#232528}
html[data-color-mode=dark] body[data-public-demo][data-ui-shell]{--mofa-gold:#d7bd80;--mofa-tint:#302c23;--canvas:#181817;--surface:#242421;--card:#242421;--ink:#f0eee7;--muted:#c1bfb6;--line:#46443c;--border:#696252;--soft:#302f29;--accent-soft:#383223;--control-border:#80755e;--control-focus:#e7ca86;--dialog-surface:#242421;--ui-text:#f0eee7;--ui-muted:#c1bfb6;--ui-border:#80755e;--ui-link:#e7ca86;--button-bg:#806124;--button-hover:#96742f}
html[data-color-mode=dark] body[data-public-demo][data-ui-shell] .public-demo-banner{background:#302c23;border-color:#8e7a50;color:#f0dbac}
html[data-color-mode=dark] body[data-public-demo][data-ui-shell] #sidebar nav a:is(.active,:hover){border-color:#80704c}
html[data-color-mode=dark] body[data-public-demo][data-ui-shell] :is(.avatar,.badge:not(.success):not(.warning):not(.danger):not(.error)){border-color:#80704c}
@media(max-width:550px){html[lang=ar] body[data-public-demo][data-ui-shell] :is(.auth-description,.auth-notice,.auth-security-note){line-height:1.9}body[data-public-demo][data-ui-shell] .public-demo-banner{font-size:11px}}
/* Let bilingual content determine height; never overlay the feature summaries. */
body[data-public-demo][data-ui-shell=auth] .auth-product-art{height:auto;margin-block:30px 24px}
body[data-public-demo][data-ui-shell=auth] .showcase-benefits strong{color:#232528}
body[data-public-demo][data-ui-shell=auth] .auth-showcase h2{font-size:clamp(32px,3.2vw,48px);line-height:1.45}

body[data-public-demo][data-ui-shell=auth] .auth-brand img.controlsignage-default-logo{background:transparent;padding:0;border-radius:0;width:200px;height:auto}